[AP-138]: Asset preview component (#50)

* Task: implement asset-preview and dropdown-menu

* Task: implement asset-preview and dropdown-menu

* Task: rename preview and extract menu items

* Fix: merge conflicts

* Fix: lint

.storybook/preview.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { Preview } from "@storybook/react";
 import "../assets/css/globals.css";
-import { GlobalProvider } from "../assets/js/src/modules/app/components/global-provider";
+import { GlobalProvider } from "../assets/js/src/modules/app/global-provider";
 import { App } from 'antd'
 
 const preview: Preview = {

assets/js/src/components/dropdown-menu/dropdown-menu.stories.tsx

@@ -0,0 +1,55 @@
+import { type Meta } from '@storybook/react'
+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',
+  component: DropdownMenuComponent,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+}
+
+export default config
+
+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')
+  }
+]
+
+export const _default = {
+  args: {
+    children,
+    placement: 'bottomLeft',
+    dropdownItems
+  }
+}

assets/js/src/components/dropdown-menu/dropdown-menu.styles.tsx

@@ -0,0 +1,14 @@
+import { createStyles } from 'antd-style'
+
+export const useStyle = createStyles(({ token, css }) => {
+  return {
+    'menu-icon': css`
+        vertical-align: middle;
+        margin-right: ${token.marginXS}px;
+      `,
+    'flexbox-start-end': css`
+        display: flex;
+        justify-content: space-between;
+      `
+  }
+})

assets/js/src/components/dropdown-menu/dropdown-menu.tsx

@@ -0,0 +1,80 @@
+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
+}
+
+interface DropdownMenuProps extends React.PropsWithChildren {
+  children: ReactElement
+  placement: DropdownProps['placement']
+  dropdownItems: DropdownMenuItemProps[]
+  openClassName?: string
+}
+
+export const DropdownMenu = ({
+  children,
+  placement,
+  dropdownItems,
+  openClassName
+}: DropdownMenuProps
+): React.JSX.Element => {
+  const items: MenuProps['items'] = []
+
+  dropdownItems.forEach((item, index) => {
+    items.push(
+      {
+        key: index.toString(),
+        label: (
+                    <MenuItemContent item={item} />
+        )
+      }
+    )
+  })
+
+  return (
+      <div>
+        <Dropdown menu={{ items }}
+                  placement={placement}
+                  openClassName={openClassName}
+            >
+            {children}
+        </Dropdown>
+      </div>
+  )
+}
+
+function MenuItemContent (prop): React.JSX.Element {
+  const { item } = prop
+  const { styles } = useStyle()
+  const iconOptions = { width: '16px', height: '16px' }
+
+  if (item.iconNameRight as boolean) {
+    return (
+            <div onClick={item.onClick}
+                 className={styles['flexbox-start-end']}
+            >
+                <div>
+                    <Icon name={item.iconNameLeft} options={iconOptions} className={styles['menu-icon']}/>
+                    {item.label}
+                </div>
+                <div>
+                    <Icon name={item.iconNameRight} options={iconOptions} className={styles['menu-icon']}/>
+                </div>
+            </div>
+
+    )
+  }
+
+  return (
+        <div onClick={item.onClick}>
+            <Icon name={item.iconNameLeft} options={iconOptions} className={styles['menu-icon']} />
+            {item.label}
+        </div>
+  )
+}

assets/js/src/components/icon/icon.tsx

@@ -17,21 +17,29 @@ const icons = {
   'view-details': React.lazy(async () => await import('@Pimcore/assets/icons/core/view-details.inline.svg')),
   'tag-two-tone': React.lazy(async () => await import('@Pimcore/assets/icons/core/tag-two-tone.inline.svg')),
   workflow: React.lazy(async () => await import('@Pimcore/assets/icons/core/workflow.inline.svg')),
-  'unordered-list-outlined': React.lazy(async () => await import('@Pimcore/assets/icons/core/unordered-list-outlined.inline.svg'))
+  'unordered-list-outlined': React.lazy(async () => await import('@Pimcore/assets/icons/core/unordered-list-outlined.inline.svg')),
+  'dots-horizontal': React.lazy(async () => await import('@Pimcore/assets/icons/core/dots-horizontal.inline.svg')),
+  target: React.lazy(async () => await import('@Pimcore/assets/icons/core/target.inline.svg')),
+  'info-circle-outlined': React.lazy(async () => await import('@Pimcore/assets/icons/core/info-circle-outlined.inline.svg')),
+  'right-outlined': React.lazy(async () => await import('@Pimcore/assets/icons/core/right-outlined.inline.svg')),
+  'rich-edit': React.lazy(async () => await import('@Pimcore/assets/icons/core/rich-edit.inline.svg')),
+  'download-02': React.lazy(async () => await import('@Pimcore/assets/icons/core/download-02.inline.svg')),
+  'delete-outlined': React.lazy(async () => await import('@Pimcore/assets/icons/core/delete-outlined.inline.svg'))
 }
 
 export interface IconProps {
   name: string
   options?: React.SVGProps<SVGSVGElement>
+  className?: string
 }
 
-export const Icon = ({ name, options }: IconProps): React.JSX.Element => {
+export const Icon = ({ name, options, className }: IconProps): React.JSX.Element => {
   const SvgIcon = icons[name]
   const width = options?.width ?? 16
   const height = options?.height ?? 16
 
   return (
-    <div style={{ width, height }} className={`pimcore-icon pimcore-icon-${name} anticon`}>
+    <div style={{ width, height }} className={`pimcore-icon pimcore-icon-${name} anticon ${className}`}>
       <Suspense fallback={<div />}>
         <SvgIcon width={width} height={height} {...options} />
       </Suspense>

assets/js/src/components/pimcore-image/pimcore-image.stories.tsx

@@ -0,0 +1,21 @@
+import { type Meta } from '@storybook/react'
+import { PimcoreImage as PimcoreImageComponent } from './pimcore-image'
+
+const config: Meta = {
+  title: 'Pimcore studio/UI/PimcoreImage',
+  component: PimcoreImageComponent,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+}
+
+export default config
+
+export const _default = {
+  args: {
+    src: 'https://pimcore.com/brand/Website-Banners/image-thumb__23862__header-sujet-img__2019--slider/2024-Pimcore-Home-Main.webp',
+    alt: 'Pimconaut',
+    className: ''
+  }
+}

assets/js/src/components/pimcore-image/pimcore-image.styles.tsx

@@ -0,0 +1,11 @@
+import { createStyles } from 'antd-style'
+
+export const useStyle = createStyles(({ token, css }) => {
+  return {
+    'loading-div': css`
+      position: absolute;
+      top: calc(50% - 11px);
+      left: calc(50% - 8px);
+    `
+  }
+})

assets/js/src/components/pimcore-image/pimcore-image.tsx

@@ -0,0 +1,24 @@
+import { Image, type ImageProps, Spin } from 'antd'
+import React from 'react'
+import { useStyle } from '@Pimcore/components/pimcore-image/pimcore-image.styles'
+
+interface PimcoreImageProps extends ImageProps {
+}
+
+export const PimcoreImage = (
+  props: PimcoreImageProps
+): React.JSX.Element => {
+  const { styles } = useStyle()
+
+  return (
+      <Image
+          placeholder={
+            <div className={styles['loading-div']}>
+                <Spin size="small" />
+            </div>
+          }
+          preview={false}
+          {...props}
+      />
+  )
+}

assets/js/src/components/preview-card/preview-card.stories.tsx

@@ -0,0 +1,48 @@
+import { type Meta } from '@storybook/react'
+import { PreviewCard as PreviewCardComponent } from './preview-card'
+import { type DropdownMenuItemProps } from '@Pimcore/components/dropdown-menu/dropdown-menu'
+import i18n from '@Pimcore/app/i18n'
+
+const config: Meta = {
+  title: 'Pimcore studio/UI/PreviewCard',
+  component: PreviewCardComponent,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+}
+
+export default config
+
+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')
+  }
+]
+
+export const _default = {
+  args: {
+    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
+  }
+}