From 1ed5fc80b9da5c3c1e5d3bc88b82d3ce5e37f140 Mon Sep 17 00:00:00 2001
From: robertSt7 <robert.steinkellner@pimcore.com>
Date: Wed, 28 Feb 2024 12:10:05 +0100
Subject: [PATCH] Fix: lint

---
 .../dropdown-menu/dropdown-menu.stories.tsx   | 61 +++++++--------
 .../dropdown-menu/dropdown-menu.styles.tsx    |  6 +-
 .../dropdown-menu/dropdown-menu.tsx           | 78 +++++++++----------
 .../pimcore-image/pimcore-image.stories.tsx   |  1 -
 .../pimcore-image/pimcore-image.styles.tsx    |  2 +-
 .../pimcore-image/pimcore-image.tsx           | 12 +--
 .../preview-card/preview-card.stories.tsx     |  6 +-
 .../preview-card/preview-card.styles.tsx      | 26 +++----
 .../components/preview-card/preview-card.tsx  | 36 ++++-----
 9 files changed, 112 insertions(+), 116 deletions(-)

diff --git a/assets/js/src/components/dropdown-menu/dropdown-menu.stories.tsx b/assets/js/src/components/dropdown-menu/dropdown-menu.stories.tsx
index a6fb96c9d..9f8d0ff5b 100644
--- a/assets/js/src/components/dropdown-menu/dropdown-menu.stories.tsx
+++ b/assets/js/src/components/dropdown-menu/dropdown-menu.stories.tsx
@@ -1,10 +1,9 @@
 import { type Meta } from '@storybook/react'
-import {DropdownMenu as DropdownMenuComponent, DropdownMenuItemProps} from './dropdown-menu'
-import {Button} from "antd";
-import {Icon} from "@Pimcore/components/icon/icon";
-import React from "react";
-import i18n from "@Pimcore/app/i18n";
-import {useStyle} from "@Pimcore/components/dropdown-menu/dropdown-menu.styles";
+import { DropdownMenu as DropdownMenuComponent, type DropdownMenuItemProps } from './dropdown-menu'
+import { Button } from 'antd'
+import { Icon } from '@Pimcore/components/icon/icon'
+import React from 'react'
+import i18n from '@Pimcore/app/i18n'
 
 const config: Meta = {
   title: 'Pimcore studio/UI/DropdownMenu',
@@ -17,8 +16,6 @@ const config: Meta = {
 
 export default config
 
-const styles = useStyle //Doesn't work - it's only for demonstration
-
 const children =
     <Button
       size="small"
@@ -26,33 +23,33 @@ const children =
     />
 
 const dropdownItems: DropdownMenuItemProps[] = [
-    {
-        iconNameLeft: 'target',
-        label: i18n.t('preview-card.locate-in-tree')
-    },
-    {
-        iconNameLeft: 'info-circle-outlined',
-        label: i18n.t('preview-card.info'),
-        iconNameRight: 'right-outlined'
-    },
-    {
-        iconNameLeft: 'rich-edit',
-        label: i18n.t('preview-card.rename')
-    },
-    {
-        iconNameLeft: 'download-02',
-        label: i18n.t('preview-card.download-zip')
-    },
-    {
-        iconNameLeft: 'delete-outlined',
-        label: i18n.t('preview-card.delete')
-    }
+  {
+    iconNameLeft: 'target',
+    label: i18n.t('preview-card.locate-in-tree')
+  },
+  {
+    iconNameLeft: 'info-circle-outlined',
+    label: i18n.t('preview-card.info'),
+    iconNameRight: 'right-outlined'
+  },
+  {
+    iconNameLeft: 'rich-edit',
+    label: i18n.t('preview-card.rename')
+  },
+  {
+    iconNameLeft: 'download-02',
+    label: i18n.t('preview-card.download-zip')
+  },
+  {
+    iconNameLeft: 'delete-outlined',
+    label: i18n.t('preview-card.delete')
+  }
 ]
 
 export const _default = {
   args: {
-    children: children,
-    placement: "bottomLeft",
-    dropdownItems: dropdownItems
+    children,
+    placement: 'bottomLeft',
+    dropdownItems
   }
 }
diff --git a/assets/js/src/components/dropdown-menu/dropdown-menu.styles.tsx b/assets/js/src/components/dropdown-menu/dropdown-menu.styles.tsx
index 430d0fecd..d8de38189 100644
--- a/assets/js/src/components/dropdown-menu/dropdown-menu.styles.tsx
+++ b/assets/js/src/components/dropdown-menu/dropdown-menu.styles.tsx
@@ -2,13 +2,13 @@ import { createStyles } from 'antd-style'
 
 export const useStyle = createStyles(({ token, css }) => {
   return {
-      'menu-icon': css `
+    'menu-icon': css`
         vertical-align: middle;
         margin-right: ${token.marginXS}px;
       `,
-      'flexbox-start-end': css `
+    'flexbox-start-end': css`
         display: flex;
         justify-content: space-between;
-      `,
+      `
   }
 })
diff --git a/assets/js/src/components/dropdown-menu/dropdown-menu.tsx b/assets/js/src/components/dropdown-menu/dropdown-menu.tsx
index 0ca94c3f9..af41a5a40 100644
--- a/assets/js/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/assets/js/src/components/dropdown-menu/dropdown-menu.tsx
@@ -1,61 +1,61 @@
-import {Dropdown, DropdownProps, MenuProps} from 'antd'
-import React, { ReactElement } from 'react'
-import {Icon} from "@Pimcore/components/icon/icon"
+import { Dropdown, type DropdownProps, type MenuProps } from 'antd'
+import React, { type ReactElement } from 'react'
+import { Icon } from '@Pimcore/components/icon/icon'
 import { useStyle } from './dropdown-menu.styles'
 
-
 export interface DropdownMenuItemProps {
-    iconNameLeft: string
-    label: string
-    onClick?: () => void
-    iconNameRight?: string
+  iconNameLeft: string
+  label: string
+  onClick?: () => void
+  iconNameRight?: string
 }
 
 interface DropdownMenuProps extends React.PropsWithChildren {
-    children: ReactElement,
-    placement: DropdownProps['placement'],
-    dropdownItems: DropdownMenuItemProps[],
-    openClassName?: string,
+  children: ReactElement
+  placement: DropdownProps['placement']
+  dropdownItems: DropdownMenuItemProps[]
+  openClassName?: string
 }
 
 export const DropdownMenu = ({
-      children,
-      placement,
-      dropdownItems,
-      openClassName,
-    }: DropdownMenuProps
-  ): React.JSX.Element => {
-    const items: MenuProps['items'] = []
+  children,
+  placement,
+  dropdownItems,
+  openClassName
+}: DropdownMenuProps
+): React.JSX.Element => {
+  const items: MenuProps['items'] = []
 
-    dropdownItems.forEach((item, index) => {
-        items.push(
-            {
-                key: index.toString(),
-                label: (
+  dropdownItems.forEach((item, index) => {
+    items.push(
+      {
+        key: index.toString(),
+        label: (
                     <MenuItemContent item={item} />
-                ),
-            },
         )
-    })
+      }
+    )
+  })
 
-    return (
+  return (
       <div>
-        <Dropdown menu={{items}}
+        <Dropdown menu={{ items }}
                   placement={placement}
                   openClassName={openClassName}
             >
             {children}
         </Dropdown>
       </div>
-    )
+  )
 }
 
-function MenuItemContent({item}) {
-    const { styles } = useStyle()
-    const iconOptions = {width: '16px', height: '16px'}
+function MenuItemContent (prop): React.JSX.Element {
+  const { item } = prop
+  const { styles } = useStyle()
+  const iconOptions = { width: '16px', height: '16px' }
 
-    if(item.iconNameRight) {
-        return (
+  if (item.iconNameRight as boolean) {
+    return (
             <div onClick={item.onClick}
                  className={styles['flexbox-start-end']}
             >
@@ -68,13 +68,13 @@ function MenuItemContent({item}) {
                 </div>
             </div>
 
-        )
-    }
+    )
+  }
 
-    return (
+  return (
         <div onClick={item.onClick}>
             <Icon name={item.iconNameLeft} options={iconOptions} className={styles['menu-icon']} />
             {item.label}
         </div>
-    )
+  )
 }
diff --git a/assets/js/src/components/pimcore-image/pimcore-image.stories.tsx b/assets/js/src/components/pimcore-image/pimcore-image.stories.tsx
index 867e90019..5ac241694 100644
--- a/assets/js/src/components/pimcore-image/pimcore-image.stories.tsx
+++ b/assets/js/src/components/pimcore-image/pimcore-image.stories.tsx
@@ -1,7 +1,6 @@
 import { type Meta } from '@storybook/react'
 import { PimcoreImage as PimcoreImageComponent } from './pimcore-image'
 
-
 const config: Meta = {
   title: 'Pimcore studio/UI/PimcoreImage',
   component: PimcoreImageComponent,
diff --git a/assets/js/src/components/pimcore-image/pimcore-image.styles.tsx b/assets/js/src/components/pimcore-image/pimcore-image.styles.tsx
index 3618a2ea6..fc80e4ae3 100644
--- a/assets/js/src/components/pimcore-image/pimcore-image.styles.tsx
+++ b/assets/js/src/components/pimcore-image/pimcore-image.styles.tsx
@@ -2,7 +2,7 @@ import { createStyles } from 'antd-style'
 
 export const useStyle = createStyles(({ token, css }) => {
   return {
-    'loading-div': css `
+    'loading-div': css`
       position: absolute;
       top: calc(50% - 11px);
       left: calc(50% - 8px);
diff --git a/assets/js/src/components/pimcore-image/pimcore-image.tsx b/assets/js/src/components/pimcore-image/pimcore-image.tsx
index 4da29d15a..908f24bce 100644
--- a/assets/js/src/components/pimcore-image/pimcore-image.tsx
+++ b/assets/js/src/components/pimcore-image/pimcore-image.tsx
@@ -1,16 +1,16 @@
-import {Image, ImageProps, Spin} from 'antd'
+import { Image, type ImageProps, Spin } from 'antd'
 import React from 'react'
-import {useStyle} from "@Pimcore/components/pimcore-image/pimcore-image.styles"
+import { useStyle } from '@Pimcore/components/pimcore-image/pimcore-image.styles'
 
-interface PimcoreImageProps extends ImageProps{
+interface PimcoreImageProps extends ImageProps {
 }
 
 export const PimcoreImage = (
   props: PimcoreImageProps
 ): React.JSX.Element => {
-    const { styles } = useStyle()
+  const { styles } = useStyle()
 
-    return (
+  return (
       <Image
           placeholder={
             <div className={styles['loading-div']}>
@@ -20,5 +20,5 @@ export const PimcoreImage = (
           preview={false}
           {...props}
       />
-    )
+  )
 }
diff --git a/assets/js/src/components/preview-card/preview-card.stories.tsx b/assets/js/src/components/preview-card/preview-card.stories.tsx
index 0ead6768b..17e9d51d5 100644
--- a/assets/js/src/components/preview-card/preview-card.stories.tsx
+++ b/assets/js/src/components/preview-card/preview-card.stories.tsx
@@ -1,7 +1,7 @@
 import { type Meta } from '@storybook/react'
 import { PreviewCard as PreviewCardComponent } from './preview-card'
-import {DropdownMenuItemProps} from "@Pimcore/components/dropdown-menu/dropdown-menu";
-import i18n from "@Pimcore/app/i18n";
+import { type DropdownMenuItemProps } from '@Pimcore/components/dropdown-menu/dropdown-menu'
+import i18n from '@Pimcore/app/i18n'
 
 const config: Meta = {
   title: 'Pimcore studio/UI/PreviewCard',
@@ -43,6 +43,6 @@ export const _default = {
     name: 'Pimconaout0_123.jpg',
     selected: false,
     imgSrc: 'https://pimcore.com/brand/Website-Banners/image-thumb__23862__header-sujet-img__2019--slider/2024-Pimcore-Home-Main.webp',
-    dropdownItems: dropdownItems
+    dropdownItems
   }
 }
diff --git a/assets/js/src/components/preview-card/preview-card.styles.tsx b/assets/js/src/components/preview-card/preview-card.styles.tsx
index f0a92845d..bddda9e86 100644
--- a/assets/js/src/components/preview-card/preview-card.styles.tsx
+++ b/assets/js/src/components/preview-card/preview-card.styles.tsx
@@ -2,45 +2,45 @@ import { createStyles } from 'antd-style'
 
 export const useStyle = createStyles(({ token, css }) => {
   return {
-      checkbox: css`
+    checkbox: css`
         position: absolute;
         top: ${token.paddingXXS}px;
         left: ${token.paddingXXS}px;
       `,
-      'checkbox-medium': css`
+    'checkbox-medium': css`
         position: absolute;
         top: ${token.paddingXXS}px;
         left: ${token.paddingXS}px;
       `,
 
-      'dots-button': css`
+    'dots-button': css`
         position: absolute;
         top: ${token.paddingXXS}px;
         right: ${token.paddingXXS}px;
       `,
-      'dots-button-medium': css`
+    'dots-button-medium': css`
         position: absolute;
         top: ${token.paddingXXS}px;
         right: ${token.paddingXS}px;
       `,
-      'dots-button-open-dropdown': css`
+    'dots-button-open-dropdown': css`
           background-color: ${token.Button.defaultColor};
           color: white !important;
       `,
-      'dropdown-menu__icon': css`
+    'dropdown-menu__icon': css`
           vertical-align: text-bottom;
       `,
 
-      img: css `
+    img: css`
         height: 64px !important;
         width: 170px !important;;
       `,
-      'img-medium': css `
+    'img-medium': css`
         height: 109px !important;;
         width: 236px !important;;
       `,
-      
-      card: css `
+
+    card: css`
         .ant-card-body {
           padding: ${token.paddingXXS}px ${token.paddingXS}px;
           margin-top: 7px;
@@ -48,12 +48,12 @@ export const useStyle = createStyles(({ token, css }) => {
         };
       `,
 
-      'menu-icon': css `
+    'menu-icon': css`
         margin-right: ${token.marginXS}px;
       `,
-      'flexbox-start-end': css `
+    'flexbox-start-end': css`
         display: flex;
         justify-content: space-between;
-      `,
+      `
   }
 })
diff --git a/assets/js/src/components/preview-card/preview-card.tsx b/assets/js/src/components/preview-card/preview-card.tsx
index a52486be8..aa828237f 100644
--- a/assets/js/src/components/preview-card/preview-card.tsx
+++ b/assets/js/src/components/preview-card/preview-card.tsx
@@ -1,10 +1,10 @@
-import {Button, Card, Checkbox} from 'antd'
+import { Button, Card, Checkbox } from 'antd'
 import React from 'react'
 import { useStyle } from './preview-card.styles'
 import Meta from 'antd/es/card/Meta'
 import { Icon } from '../icon/icon'
-import {DropdownMenu, DropdownMenuItemProps} from '../dropdown-menu/dropdown-menu'
-import {PimcoreImage} from "@Pimcore/components/pimcore-image/pimcore-image";
+import { DropdownMenu, type DropdownMenuItemProps } from '../dropdown-menu/dropdown-menu'
+import { PimcoreImage } from '@Pimcore/components/pimcore-image/pimcore-image'
 
 export enum SizeTypes {
   SMALL = 'small',
@@ -20,23 +20,23 @@ interface PreviewCardProps {
 }
 
 export const PreviewCard = ({
-      name, selected, dropdownItems, imgSrc, size = SizeTypes.SMALL
-    }: PreviewCardProps
-  ): React.JSX.Element => {
-    const { styles } = useStyle()
+  name, selected, dropdownItems, imgSrc, size = SizeTypes.SMALL
+}: PreviewCardProps
+): React.JSX.Element => {
+  const { styles } = useStyle()
 
-    let classImg: string = styles.img
-    let classCheckbox: string = styles.checkbox
-    let classDotsButton: string = styles['dots-button']
-    if (size === SizeTypes.MEDIUM) {
-      classImg = styles['img-medium']
-      classCheckbox = styles['checkbox-medium'] 
-      classDotsButton = styles['dots-button-medium'] 
-    }
+  let classImg: string = styles.img
+  let classCheckbox: string = styles.checkbox
+  let classDotsButton: string = styles['dots-button']
+  if (size === SizeTypes.MEDIUM) {
+    classImg = styles['img-medium']
+    classCheckbox = styles['checkbox-medium']
+    classDotsButton = styles['dots-button-medium']
+  }
 
-    return (
+  return (
       <div>
-        <Card className={styles.card}     
+        <Card className={styles.card}
           cover={
             <PimcoreImage src={imgSrc} alt={name} className={classImg}/>
           }
@@ -61,5 +61,5 @@ export const PreviewCard = ({
           />
         </Card>
       </div>
-    )
+  )
 }