Fix: lint

pimcore · Feb 28, 2024 · 1ed5fc8 · 1ed5fc8
1 parent e2a94cf
commit 1ed5fc8
Show file tree

Hide file tree

Showing 9 changed files with 112 additions and 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
@@ -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,42 +16,40 @@ const config: Meta = {
 
 export default config
 
-const styles = useStyle //Doesn't work - it's only for demonstration
-
 const children =
     <Button
       size="small"
       icon={<Icon name="dots-horizontal"/>}
     />
 
 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -2,58 +2,58 @@ 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;
           margin-bottom: 7px;
         };
       `,
 
-      '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;
-      `,
+      `
   }
 })