New examples

assets/js/src/examples/api-data/components/api-data-widget.tsx

@@ -0,0 +1,32 @@
+import { Content, Header } from '@pimcore/studio-ui-bundle/components'
+import { useAssetGetTreeQuery } from '@pimcore/studio-ui-bundle/api/asset'
+import React, { useEffect } from 'react'
+import { ApiError, trackError } from '@pimcore/studio-ui-bundle/modules/app'
+
+export const ApiDataWidget = (): React.JSX.Element => {
+  const { isLoading, data, isError, error } = useAssetGetTreeQuery({
+    page: 1,
+    pageSize: 10
+  })
+
+  useEffect(() => {
+    if (isError) {
+      trackError(new ApiError(error))
+    }
+  }, [isError])
+
+  return (
+    <Content
+      loading={ isLoading }
+      padded
+    >
+      <Header title="API data" />
+
+      {data?.items.map((item) => (
+        <div key={ item.id }>
+          {item.filename}
+        </div>
+      ))}
+    </Content>
+  )
+}

assets/js/src/examples/api-data/index.ts

@@ -0,0 +1,10 @@
+import { type IAbstractPlugin } from '@pimcore/studio-ui-bundle'
+import { ApiDataExtension } from './modules/api-data-extension'
+
+export const ApiDataPlugin: IAbstractPlugin = {
+  name: 'ApiDataPlugin',
+
+  onStartup ({ moduleSystem }) {
+    moduleSystem.registerModule(ApiDataExtension)
+  }
+}

assets/js/src/examples/api-data/modules/api-data-extension.tsx

@@ -0,0 +1,32 @@
+import { type AbstractModule, container } from '@pimcore/studio-ui-bundle'
+import { serviceIds } from '@pimcore/studio-ui-bundle/app'
+import { type MainNavRegistry } from '@pimcore/studio-ui-bundle/modules/app'
+import { type WidgetRegistry } from '@pimcore/studio-ui-bundle/modules/widget-manager'
+import { ApiDataWidget } from '../components/api-data-widget'
+
+export const ApiDataExtension: AbstractModule = {
+  onInit () {
+    const mainNavRegistryService = container.get<MainNavRegistry>(serviceIds.mainNavRegistry)
+
+    mainNavRegistryService.registerMainNavItem({
+      path: 'Example Plugin/Api Data',
+      widgetConfig: {
+        name: 'Api Data',
+        id: 'api-data',
+        component: 'api-data-widget',
+        config: {
+          icon: {
+            type: 'name',
+            value: 'pimcore'
+          }
+        }
+      }
+    })
+
+    const widgetRegistryService = container.get<WidgetRegistry>(serviceIds.widgetManager)
+    widgetRegistryService.registerWidget({
+      name: 'api-data-widget',
+      component: ApiDataWidget
+    })
+  }
+}

assets/js/src/examples/custom-widgets/components/example-widget.tsx

@@ -6,6 +6,7 @@ export const ExampleWidget = (): React.JSX.Element => {
   const widgetManager = useWidgetManager()
   const [selectedOption, setSelectedOption] = React.useState<SelectProps['value']>(undefined)
   const [selectedWidget, setSelectedWidget] = React.useState<Record<string, any> | undefined>(undefined)
+  const areButtonsDisabled = selectedWidget === undefined
 
   const widgets = [
     {
@@ -73,19 +74,31 @@ export const ExampleWidget = (): React.JSX.Element => {
         direction='vertical'
         size='small'
       >
-        <Button onClick={ () => { widgetManager.openMainWidget(selectedWidget) } }>
+        <Button
+          disabled={ areButtonsDisabled }
+          onClick={ () => { widgetManager.openMainWidget(selectedWidget) } }
+        >
           Open main widget
         </Button>
 
-        <Button onClick={ () => { widgetManager.openLeftWidget(selectedWidget) } }>
+        <Button
+          disabled={ areButtonsDisabled }
+          onClick={ () => { widgetManager.openLeftWidget(selectedWidget) } }
+        >
           Open left widget
         </Button>
 
-        <Button onClick={ () => { widgetManager.openRightWidget(selectedWidget) } }>
+        <Button
+          disabled={ areButtonsDisabled }
+          onClick={ () => { widgetManager.openRightWidget(selectedWidget) } }
+        >
           Open right widget
         </Button>
 
-        <Button onClick={ () => { widgetManager.openBottomWidget(selectedWidget) } }>
+        <Button
+          disabled={ areButtonsDisabled }
+          onClick={ () => { widgetManager.openBottomWidget(selectedWidget) } }
+        >
           Open bottom widget
         </Button>
       </Space>

assets/js/src/examples/dynamic-types/components/data-grid.tsx

@@ -0,0 +1,76 @@
+import { Grid } from '@pimcore/studio-ui-bundle/components'
+import React from 'react'
+
+type GridProps = Parameters<typeof Grid>
+const columns: GridProps[0]['columns'] = [
+  {
+    id: 'number-cell',
+    accessorFn: (row) => row['number-cell'],
+    accessorKey: 'number-cell',
+    header: 'Number',
+    meta: {
+      type: 'number'
+    }
+  },
+
+  {
+    id: 'text-cell',
+    accessorFn: (row) => row['text-cell'],
+    accessorKey: 'text-cell',
+    header: 'Text',
+    meta: {
+      type: 'text'
+    }
+  },
+
+  {
+    id: 'boolean-cell',
+    accessorFn: (row) => row['boolean-cell'],
+    accessorKey: 'boolean-cell',
+    header: 'Boolean',
+    meta: {
+      type: 'boolean',
+      editable: false
+    }
+  },
+
+  {
+    id: 'live-updating',
+    accessorFn: (row) => row['live-updating'],
+    accessorKey: 'live-updating',
+    header: 'Live Updating',
+    meta: {
+      type: 'live-updating'
+    }
+  }
+]
+
+const data: GridProps[0]['data'] = [
+  {
+    'number-cell': 1,
+    'text-cell': 'Hello',
+    'live-updating': '2234',
+    'boolean-cell': true
+  },
+  {
+    'number-cell': 2,
+    'text-cell': 'World',
+    'live-updating': '543',
+    'boolean-cell': false
+  },
+  {
+    'number-cell': 3,
+    'text-cell': '!',
+    'live-updating': '234',
+    'boolean-cell': true
+  }
+]
+
+export const DataGrid = (): React.JSX.Element => {
+  return (
+    <Grid
+      columns={ columns }
+      data={ data }
+    />
+  )
+}

assets/js/src/examples/dynamic-types/components/dynamic-types-widget.tsx

@@ -0,0 +1,13 @@
+import { Content, Header } from '@pimcore/studio-ui-bundle/components'
+import React from 'react'
+import { DataGrid } from './data-grid'
+
+export const DynamicTypesWidget = (): React.JSX.Element => {
+  return (
+    <Content padded>
+      <Header title="Dynamic types" />
+
+      <DataGrid />
+    </Content>
+  )
+}

assets/js/src/examples/dynamic-types/dynamic-types/components/live-updating-cell-component.tsx

@@ -0,0 +1,29 @@
+import { type AbstractGridCellDefinition } from '@pimcore/studio-ui-bundle/modules/element'
+import React, { useEffect, useState } from 'react'
+
+export interface LiveUpdatingCellComponentProps extends AbstractGridCellDefinition {}
+
+export const LiveUpdatingCellComponent = ({ getValue }: LiveUpdatingCellComponentProps): React.JSX.Element => {
+  const [currentValue, setCurrentValue] = useState(0)
+
+  useEffect(() => {
+    // Simulate a live updating value
+    // In a real-world scenario, this could be a Server Side Event or an API call
+    // The cell value could be used as a configuration for the API call
+    // or the SSE connection
+    const timer = setInterval(() => {
+      const newValue = Math.floor(Math.random() * 1000)
+      setCurrentValue(newValue)
+    }, 2000)
+
+    return () => {
+      clearInterval(timer)
+    }
+  }, [])
+
+  return (
+    <div className='default-cell__content'>
+      {currentValue}
+    </div>
+  )
+}

assets/js/src/examples/dynamic-types/dynamic-types/definitions/live-updating-cell.tsx

@@ -0,0 +1,13 @@
+import { type AbstractGridCellDefinition, DynamicTypeGridCellAbstract } from '@pimcore/studio-ui-bundle/modules/element'
+import React, { type ReactElement } from 'react'
+import { LiveUpdatingCellComponent } from '../components/live-updating-cell-component'
+import { injectable } from 'inversify'
+
+@injectable()
+export class LiveUpdatingCell extends DynamicTypeGridCellAbstract {
+  id: string = 'live-updating'
+
+  getGridCellComponent (props: AbstractGridCellDefinition): ReactElement<AbstractGridCellDefinition> {
+    return <LiveUpdatingCellComponent { ...props } />
+  }
+}

assets/js/src/examples/dynamic-types/index.ts

@@ -0,0 +1,15 @@
+import { type IAbstractPlugin } from '@pimcore/studio-ui-bundle'
+import { DynamicTypeExtension } from './modules/dynamic-types-extension'
+import { LiveUpdatingCell } from './dynamic-types/definitions/live-updating-cell'
+
+export const DynamicTypePlugin: IAbstractPlugin = {
+  name: 'DynamicTypePlugin',
+
+  onInit ({ container }) {
+    container.bind('DynamicTypes/GridCell/LiveUpdatingCell').to(LiveUpdatingCell)
+  },
+
+  onStartup ({ moduleSystem }) {
+    moduleSystem.registerModule(DynamicTypeExtension)
+  }
+}

assets/js/src/examples/dynamic-types/modules/dynamic-types-extension.tsx

@@ -0,0 +1,37 @@
+import { type AbstractModule, container } from '@pimcore/studio-ui-bundle'
+import { serviceIds } from '@pimcore/studio-ui-bundle/app'
+import { type MainNavRegistry } from '@pimcore/studio-ui-bundle/modules/app'
+import { type WidgetRegistry } from '@pimcore/studio-ui-bundle/modules/widget-manager'
+import { DynamicTypesWidget } from '../components/dynamic-types-widget'
+import { type DynamicTypeGridCellRegistry } from '@pimcore/studio-ui-bundle/modules/element'
+
+export const DynamicTypeExtension: AbstractModule = {
+  onInit: (): void => {
+    const mainNavRegistryService = container.get<MainNavRegistry>(serviceIds.mainNavRegistry)
+
+    mainNavRegistryService.registerMainNavItem({
+      path: 'Example Plugin/Dynamic Types',
+      widgetConfig: {
+        name: 'Dynamic Types',
+        id: 'dynamic-types',
+        component: 'dynamic-types',
+        config: {
+          icon: {
+            type: 'name',
+            value: 'pimcore'
+          }
+        }
+      }
+    })
+
+    const widgetRegistryService = container.get<WidgetRegistry>(serviceIds.widgetManager)
+    widgetRegistryService.registerWidget({
+      name: 'dynamic-types',
+      component: DynamicTypesWidget
+    })
+
+    const gridCellRegistry = container.get<DynamicTypeGridCellRegistry>(serviceIds['DynamicTypes/GridCellRegistry'])
+
+    gridCellRegistry.registerDynamicType(container.get('DynamicTypes/GridCell/LiveUpdatingCell'))
+  }
+}

assets/js/src/main.tsx

@@ -5,6 +5,8 @@ import { AssetEditorToolbarButtonPlugin } from './examples/asset-editor-toolbar-
 import { TabManagerPlugin } from './examples/tab-manager'
 import { CustomIconPlugin } from './examples/custom-icons'
 import { CustomWidgetsPlugin } from './examples/custom-widgets'
+import { DynamicTypePlugin } from './examples/dynamic-types'
+import { ApiDataPlugin } from './examples/api-data'
 
 if (module.hot !== undefined) {
   module.hot.accept()
@@ -20,3 +22,5 @@ pluginSystem.registerPlugin(AssetEditorToolbarButtonPlugin)
 pluginSystem.registerPlugin(TabManagerPlugin)
 pluginSystem.registerPlugin(CustomIconPlugin)
 pluginSystem.registerPlugin(CustomWidgetsPlugin)
+pluginSystem.registerPlugin(DynamicTypePlugin)
+pluginSystem.registerPlugin(ApiDataPlugin)

assets/public/build/entrypoints.json

@@ -0,0 +1,9 @@
+{
+  "entrypoints": {
+    "main": {
+      "js": [
+        "http://localhost:3030/build/main.js"
+      ]
+    }
+  }
+}

assets/public/build/manifest.json

@@ -0,0 +1,3 @@
+{
+  "build/main.js": "http://localhost:3030/build/main.js"
+}

public/build/6b1710b2-8725-4a5d-8724-6b0a9d1a9b2e/entrypoints.json

@@ -0,0 +1,9 @@
+{
+  "entrypoints": {
+    "main": {
+      "js": [
+        "/bundles/pimcorestudioexample/build/6b1710b2-8725-4a5d-8724-6b0a9d1a9b2e/main.8cea60c6.js"
+      ]
+    }
+  }
+}

public/build/6b1710b2-8725-4a5d-8724-6b0a9d1a9b2e/manifest.json

@@ -0,0 +1,3 @@
+{
+  "bundles/pimcorestudioexample/build/6b1710b2-8725-4a5d-8724-6b0a9d1a9b2e/main.js": "/bundles/pimcorestudioexample/build/6b1710b2-8725-4a5d-8724-6b0a9d1a9b2e/main.8cea60c6.js"
+}