Update folder structure (#55)

* Update folder structure

* Remove unused preview component

assets/js/build/openapi-config.ts

@@ -5,7 +5,7 @@ const config: ConfigFile = {
   apiFile: '../src/app/api/pimcore/index.ts',
   apiImport: 'api',
   outputFiles: {
-    '../src/modules/asset/api/asset.gen.ts': {
+    '../src/modules/asset/asset-api-slice.gen.ts': {
       filterEndpoints: [/apiAsset/i]
     }
   },

assets/js/src/components/formatted-date/formatted-date.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+interface FormattedDateProps {
+  timestamp: number
+}
+
+const FormattedDate = (props: FormattedDateProps): React.JSX.Element => {
+  const { i18n } = useTranslation()
+  const formattedDate = i18n.format(new Date(props.timestamp), 'datetime', i18n.language)
+
+  return (
+    <>
+      {formattedDate}
+    </>
+  )
+}
+
+export { FormattedDate }

assets/js/src/components/grid/grid.stories.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { type Meta } from '@storybook/react'
+import { Grid } from './grid'
+import { createColumnHelper } from '@tanstack/react-table'
+
+const config: Meta = {
+  title: 'Pimcore studio/UI/Grid',
+  component: Grid,
+  parameters: {
+    layout: 'centered'
+  },
+
+  tags: ['autodocs']
+}
+
+export default config
+
+interface User {
+  firstname: string
+  lastname: string
+  age: number
+}
+
+const data: User[] = [
+  { firstname: 'John', lastname: 'Doe', age: 25 },
+  { firstname: 'Jane', lastname: 'Doe', age: 22 }
+]
+
+const columnHelper = createColumnHelper<User>()
+
+const columns = [
+  columnHelper.accessor('firstname', {}),
+  columnHelper.accessor('lastname', {
+    cell: info => <b>{info.getValue()}</b>
+  }),
+  columnHelper.accessor('age', {
+    cell: info => <b>{info.getValue()}</b>
+  })
+]
+
+export const _default = {
+  args: {
+    data,
+    columns
+  }
+}

assets/js/src/components/grid/grid.styles.ts

@@ -0,0 +1,19 @@
+import { createStyles } from 'antd-style'
+
+export const useStyles = createStyles(({ token, css }) => {
+  return {
+    grid: css`
+      table {
+        table-layout: auto;
+      }
+
+      .ant-table-cell {
+        border-left: 1px solid #F0F0F0;
+
+        &:first-of-type {
+          border-left: 0;
+        }
+      }
+    `
+  }
+})

assets/js/src/components/grid/grid.tsx

@@ -0,0 +1,62 @@
+import { useCssComponentHash } from '@Pimcore/modules/ant-design/hooks/use-css-component-hash'
+import { type ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import React, { useState } from 'react'
+import { useStyles } from './grid.styles'
+
+export interface GridProps {
+  data: any[]
+  columns: Array<ColumnDef<any>>
+}
+
+export const Grid = (props: GridProps): React.JSX.Element => {
+  const { columns } = props
+  const [data] = useState(props.data)
+  const hashId = useCssComponentHash('table')
+  const { styles } = useStyles()
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel()
+  })
+
+  return (
+    <div className={['ant-table-wrapper', hashId, styles.grid].join(' ')}>
+      <div className="ant-table ant-table-small">
+        <div className='ant-table-container'>
+          <div className='ant-table-content'>
+            <table>
+              <thead className='ant-table-thead'>
+                {table.getHeaderGroups().map(headerGroup => (
+                  <tr key={headerGroup.id}>
+                    {headerGroup.headers.map(header => (
+                      <th className='ant-table-cell' key={header.id} style={{ width: header.column.getSize() }}>
+                        {header.isPlaceholder
+                          ? null
+                          : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                      </th>
+                    ))}
+                  </tr>
+                ))}
+              </thead>
+              <tbody className="ant-table-tbody">
+                {table.getRowModel().rows.map(row => (
+                  <tr className='ant-table-row' key={row.id}>
+                    {row.getVisibleCells().map(cell => (
+                      <td className='ant-table-cell' key={cell.id} style={{ width: cell.column.getSize() }} >
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      </td>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -16,7 +16,8 @@ const icons = {
   hierarchy: React.lazy(async () => await import('@Pimcore/assets/icons/core/hierarchy.inline.svg')),
   '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'))
+  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'))
 }
 
 export interface IconProps {
@@ -26,11 +27,13 @@ export interface IconProps {
 
 export const Icon = ({ name, options }: IconProps): React.JSX.Element => {
   const SvgIcon = icons[name]
+  const width = options?.width ?? 16
+  const height = options?.height ?? 16
 
   return (
-    <div style={{ width: options?.width, height: options?.height }} className={`pimcore-icon pimcore-icon-${name} anticon`}>
+    <div style={{ width, height }} className={`pimcore-icon pimcore-icon-${name} anticon`}>
       <Suspense fallback={<div />}>
-        <SvgIcon {...options} />
+        <SvgIcon width={width} height={height} {...options} />
       </Suspense>
     </div>
   )

assets/js/src/components/tree/tree.tsx

@@ -53,24 +53,30 @@ const Tree = (props: TreeProps): React.JSX.Element => {
   })
   const { isLoading, isError, data } = apiHookResult
 
-  if (isLoading !== false) {
-    return <></>
-  }
-
   if (isError !== false) {
     return (<div>{'Error'}</div>)
   }
 
-  const { nodes: items } = dataTransformer(data)
+  let items: any[] = []
+
+  if (isLoading === false && data !== undefined) {
+    const { nodes } = dataTransformer(data)
+    items = nodes
+  }
 
   return (
-    <div className={['tree', styles.tree].join(' ')}>
-      <TreeContext.Provider value={{ ...props, selectedIdsState }}>
-        {items.map((item) => (
-          <TreeNode key={item.id} {...item} />
-        ))}
-      </TreeContext.Provider>
-    </div>
+    <>
+      {isLoading === false && items.length !== 0 && (
+        <div className={['tree', styles.tree].join(' ')}>
+          <TreeContext.Provider value={{ ...props, selectedIdsState }}>
+            {items.map((item) => (
+              <TreeNode key={item.id} {...item} />
+            ))}
+          </TreeContext.Provider>
+        </div>
+      )}
+    </>
+
   )
 }
 

assets/js/src/modules/ant-design/hooks/use-css-component-hash.ts

@@ -0,0 +1,12 @@
+import useStyle from 'antd/es/table/style'
+import { ConfigContext } from 'antd/es/config-provider/context'
+import { useContext } from 'react'
+
+export const useCssComponentHash = (componentName: string): string => {
+  const context = useContext(ConfigContext)
+  const prefix = context.getPrefixCls(componentName, '')
+
+  const hashId = useStyle(prefix)[1]
+
+  return hashId
+}

assets/js/src/modules/app/components/app.tsx → assets/js/src/modules/app/app-view.tsx

@@ -1,15 +1,15 @@
 import React, { StrictMode } from 'react'
 import { GlobalProvider } from './global-provider'
-import { BaseLayout } from '@Pimcore/modules/base-layout/components/base-layout'
+import { BaseLayoutView } from '@Pimcore/modules/base-layout/base-layout-view'
 import { App as AntApp } from 'antd'
 
-export const App = (): React.JSX.Element => {
+export const AppView = (): React.JSX.Element => {
   return (
     <>
       <StrictMode>
         <GlobalProvider>
           <AntApp>
-            <BaseLayout />
+            <BaseLayoutView />
           </AntApp>
         </GlobalProvider>
       </StrictMode>

assets/js/src/modules/app/components/global-provider.tsx → assets/js/src/modules/app/global-provider.tsx

@@ -1,5 +1,5 @@
 import { store } from '@Pimcore/app/store'
-import { ThemeProvider } from '@Pimcore/modules/theme/components/ThemeProvider'
+import { ThemeProvider } from '@Pimcore/modules/theme/theme-provider'
 import React from 'react'
 import { Provider } from 'react-redux'
 

assets/js/src/modules/app/utils/app-runner.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { createRoot } from 'react-dom/client'
-import { App } from '../components/app'
+import { AppView } from '../app-view'
 
 export function runApp (): void {
   const domElement = document.getElementById('app')
@@ -10,5 +10,5 @@ export function runApp (): void {
   }
 
   const root = createRoot(domElement)
-  root.render(<App />)
+  root.render(<AppView />)
 }

assets/js/src/modules/asset-tree/asset-tree-container.tsx

@@ -0,0 +1,47 @@
+import { Tree } from '@Pimcore/components/tree/tree'
+import React from 'react'
+import { useNodeApiHook } from './hooks/use-node-api-hook'
+import { type TreeNodeProps } from '@Pimcore/components/tree/node/tree-node'
+import { PagerContainer } from './pager/pager-container'
+import { useAsset } from '@Pimcore/modules/asset/hooks/use-asset'
+import { api } from '@Pimcore/modules/asset/asset-api-slice.gen'
+import { store } from '@Pimcore/app/store'
+
+export interface AssetTreeContainerProps {
+  id: number
+}
+
+const defaultProps: AssetTreeContainerProps = {
+  id: 1
+}
+
+const AssetTreeContainer = (props: AssetTreeContainerProps): React.JSX.Element => {
+  const { id } = props
+  const { openAsset } = useAsset()
+
+  async function onSelect (node: TreeNodeProps): Promise<void> {
+    await store.dispatch(api.endpoints.apiAssetsIdGet.initiate({ id: node.id }))
+
+    openAsset({
+      name: node.label,
+      icon: node.icon,
+      config: {
+        id: node.id
+      }
+    })
+  }
+
+  return (
+    <Tree
+      nodeId={id}
+      nodeApiHook={useNodeApiHook}
+      maxItemsPerNode={20}
+      renderPager={PagerContainer}
+      onSelect={onSelect}
+    />
+  )
+}
+
+AssetTreeContainer.defaultProps = defaultProps
+
+export { AssetTreeContainer }

assets/js/src/modules/asset-tree/hooks/use-node-api-hook.ts

@@ -1,6 +1,6 @@
 import { type TreeNodeProps } from '@Pimcore/components/tree/node/tree-node'
 import { TreeContext } from '@Pimcore/components/tree/tree'
-import { type ApiAssetsGetCollectionApiResponse, useApiAssetsGetCollectionQuery } from '@Pimcore/modules/asset/api/asset.gen'
+import { type ApiAssetsGetCollectionApiResponse, useApiAssetsGetCollectionQuery } from '@Pimcore/modules/asset/asset-api-slice.gen'
 import { type UseQueryHookResult } from '@reduxjs/toolkit/dist/query/react/buildHooks'
 import { type Dispatch, type SetStateAction, useContext, useState } from 'react'
 

assets/js/src/modules/asset-tree/index.ts

@@ -1,7 +1,7 @@
 import { registerWidget } from '../widget-manager/utils/widget-registry'
-import { AssetTree } from './containers/asset-tree'
+import { AssetTreeContainer } from './asset-tree-container'
 
 registerWidget({
   name: 'asset-tree',
-  component: AssetTree
+  component: AssetTreeContainer
 })