From a85aa0bd5d48e4a0dc0df80e30baef4e5a7f25e5 Mon Sep 17 00:00:00 2001 From: vin0401 Date: Thu, 24 Apr 2025 13:40:07 +0200 Subject: [PATCH 1/4] Add new examples --- .../asset-editor-toolbar-button/index.ts | 21 ++--- .../asset-editor-toolbar-button-extension.ts | 19 ++++ assets/js/src/examples/boilerplate/index.ts | 16 ++++ .../custom-icons/components/custom-icons.tsx | 41 ++++++++ .../examples/custom-icons/icons/rocket.tsx | 19 ++++ assets/js/src/examples/custom-icons/index.ts | 10 ++ .../modules/custom-icon-extension.tsx | 40 ++++++++ .../components/another-example-widget.tsx | 14 +++ .../components/example-widget.tsx | 94 +++++++++++++++++++ .../js/src/examples/custom-widgets/index.ts | 10 ++ .../modules/custom-widgets-extension.tsx | 38 ++++++++ .../js/src/examples/main-nav-entry/index.ts | 39 ++------ .../modules/main-nav-entry-extension.ts | 37 ++++++++ .../tab-manager/components/example-tab.tsx | 11 +++ .../tab-manager/components/preview-tab.tsx | 12 +++ assets/js/src/examples/tab-manager/index.ts | 12 +++ .../modules/asset-folder-tab-exentsion.tsx | 19 ++++ .../modules/object-preview-tab-extension.tsx | 21 +++++ assets/js/src/main.tsx | 30 +++--- 19 files changed, 438 insertions(+), 65 deletions(-) create mode 100644 assets/js/src/examples/asset-editor-toolbar-button/modules/asset-editor-toolbar-button-extension.ts create mode 100644 assets/js/src/examples/boilerplate/index.ts create mode 100644 assets/js/src/examples/custom-icons/components/custom-icons.tsx create mode 100644 assets/js/src/examples/custom-icons/icons/rocket.tsx create mode 100644 assets/js/src/examples/custom-icons/index.ts create mode 100644 assets/js/src/examples/custom-icons/modules/custom-icon-extension.tsx create mode 100644 assets/js/src/examples/custom-widgets/components/another-example-widget.tsx create mode 100644 assets/js/src/examples/custom-widgets/components/example-widget.tsx create mode 100644 assets/js/src/examples/custom-widgets/index.ts create mode 100644 assets/js/src/examples/custom-widgets/modules/custom-widgets-extension.tsx create mode 100644 assets/js/src/examples/main-nav-entry/modules/main-nav-entry-extension.ts create mode 100644 assets/js/src/examples/tab-manager/components/example-tab.tsx create mode 100644 assets/js/src/examples/tab-manager/components/preview-tab.tsx create mode 100644 assets/js/src/examples/tab-manager/index.ts create mode 100644 assets/js/src/examples/tab-manager/modules/asset-folder-tab-exentsion.tsx create mode 100644 assets/js/src/examples/tab-manager/modules/object-preview-tab-extension.tsx diff --git a/assets/js/src/examples/asset-editor-toolbar-button/index.ts b/assets/js/src/examples/asset-editor-toolbar-button/index.ts index a0ceb0e..8c0552e 100644 --- a/assets/js/src/examples/asset-editor-toolbar-button/index.ts +++ b/assets/js/src/examples/asset-editor-toolbar-button/index.ts @@ -1,19 +1,10 @@ -import { type AbstractModule, container } from '@pimcore/studio-ui-bundle' -import { serviceIds } from '@pimcore/studio-ui-bundle/app' -import { componentConfig, type ComponentRegistry } from '@pimcore/studio-ui-bundle/modules/app' -import CustomToolbarButton from './components/custom-toolbar-button/custom-toolbar-button' +import { type IAbstractPlugin } from '@pimcore/studio-ui-bundle' +import { AssetEditorToolbarButtonExtension } from './modules/asset-editor-toolbar-button-extension' -export const AssetEditorToolbarButtonExtension: AbstractModule = { - onInit: (): void => { - const componentRegistry = container.get(serviceIds['App/ComponentRegistry/ComponentRegistry']) +export const AssetEditorToolbarButtonPlugin: IAbstractPlugin = { + name: 'AssetEditorToolbarButtonPlugin', - componentRegistry.registerToSlot( - componentConfig.asset.editor.toolbar.slots.left.name, - { - name: 'customToolbarButton', - component: CustomToolbarButton, - priority: 500 - } - ) + onStartup ({ moduleSystem }) { + moduleSystem.registerModule(AssetEditorToolbarButtonExtension) } } diff --git a/assets/js/src/examples/asset-editor-toolbar-button/modules/asset-editor-toolbar-button-extension.ts b/assets/js/src/examples/asset-editor-toolbar-button/modules/asset-editor-toolbar-button-extension.ts new file mode 100644 index 0000000..8e1b360 --- /dev/null +++ b/assets/js/src/examples/asset-editor-toolbar-button/modules/asset-editor-toolbar-button-extension.ts @@ -0,0 +1,19 @@ +import { type AbstractModule, container } from '@pimcore/studio-ui-bundle' +import { serviceIds } from '@pimcore/studio-ui-bundle/app' +import { componentConfig, type ComponentRegistry } from '@pimcore/studio-ui-bundle/modules/app' +import CustomToolbarButton from '../components/custom-toolbar-button/custom-toolbar-button' + +export const AssetEditorToolbarButtonExtension: AbstractModule = { + onInit: (): void => { + const componentRegistry = container.get(serviceIds['App/ComponentRegistry/ComponentRegistry']) + + componentRegistry.registerToSlot( + componentConfig.asset.editor.toolbar.slots.left.name, + { + name: 'customToolbarButton', + component: CustomToolbarButton, + priority: 500 + } + ) + } +} diff --git a/assets/js/src/examples/boilerplate/index.ts b/assets/js/src/examples/boilerplate/index.ts new file mode 100644 index 0000000..52f9c7e --- /dev/null +++ b/assets/js/src/examples/boilerplate/index.ts @@ -0,0 +1,16 @@ +import { IAbstractPlugin } from "@pimcore/studio-ui-bundle"; + +export const BoilerplatePlugin: IAbstractPlugin = { + name: 'BoilerplatePlugin', + + onInit({ container }) { + // This is where you would initialize your plugin + // Most common use case would be to register new services here + // container.bind('some-service', SomeService); + }, + + onStartup ({ moduleSystem }) { + // This is where you would register your modules + // moduleSystem.registerModule(YourModule) + } +} diff --git a/assets/js/src/examples/custom-icons/components/custom-icons.tsx b/assets/js/src/examples/custom-icons/components/custom-icons.tsx new file mode 100644 index 0000000..349e392 --- /dev/null +++ b/assets/js/src/examples/custom-icons/components/custom-icons.tsx @@ -0,0 +1,41 @@ +import { Box, Flex, Icon, IconButton, IconTextButton, Space } from '@pimcore/studio-ui-bundle/components' +import React from 'react' + +export const CustomIcons = (): React.JSX.Element => { + return ( + + +

Custom Icons

+ + + + + + + + Rocket + + + + Rocket + + + + ) +} diff --git a/assets/js/src/examples/custom-icons/icons/rocket.tsx b/assets/js/src/examples/custom-icons/icons/rocket.tsx new file mode 100644 index 0000000..4492bb1 --- /dev/null +++ b/assets/js/src/examples/custom-icons/icons/rocket.tsx @@ -0,0 +1,19 @@ +import React from 'react' + +export interface RocketProps extends React.SVGProps { } + +export const Rocket = (props: RocketProps): React.JSX.Element => { + return ( + + {/* */} + + + ) +} diff --git a/assets/js/src/examples/custom-icons/index.ts b/assets/js/src/examples/custom-icons/index.ts new file mode 100644 index 0000000..9c9166f --- /dev/null +++ b/assets/js/src/examples/custom-icons/index.ts @@ -0,0 +1,10 @@ +import { type IAbstractPlugin } from '@pimcore/studio-ui-bundle' +import { CustomIconExtension } from './modules/custom-icon-extension' + +export const CustomIconPlugin: IAbstractPlugin = { + name: 'CustomIconPlugin', + + onStartup ({ moduleSystem }) { + moduleSystem.registerModule(CustomIconExtension) + } +} diff --git a/assets/js/src/examples/custom-icons/modules/custom-icon-extension.tsx b/assets/js/src/examples/custom-icons/modules/custom-icon-extension.tsx new file mode 100644 index 0000000..ee5c642 --- /dev/null +++ b/assets/js/src/examples/custom-icons/modules/custom-icon-extension.tsx @@ -0,0 +1,40 @@ +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 IconLibrary } from '@pimcore/studio-ui-bundle/modules/icon-library' +import { type WidgetRegistry } from '@pimcore/studio-ui-bundle/modules/widget-manager' +import { CustomIcons } from '../components/custom-icons' +import { Rocket } from '../icons/rocket' + +export const CustomIconExtension: AbstractModule = { + onInit (): void { + const iconLibrary = container.get(serviceIds.iconLibrary) + iconLibrary.register({ + name: 'rocket-example', + component: Rocket + }) + + const mainNavRegistryService = container.get(serviceIds.mainNavRegistry) + + mainNavRegistryService.registerMainNavItem({ + path: 'Example Plugin/Custom Icons', + widgetConfig: { + name: 'Custom Icons', + id: 'custom-icon', + component: 'custom-icons', + config: { + icon: { + type: 'name', + value: 'rocket-example' + } + } + } + }) + + const widgetRegistryService = container.get(serviceIds.widgetManager) + widgetRegistryService.registerWidget({ + name: 'custom-icons', + component: CustomIcons + }) + } +} diff --git a/assets/js/src/examples/custom-widgets/components/another-example-widget.tsx b/assets/js/src/examples/custom-widgets/components/another-example-widget.tsx new file mode 100644 index 0000000..cdca56b --- /dev/null +++ b/assets/js/src/examples/custom-widgets/components/another-example-widget.tsx @@ -0,0 +1,14 @@ +import { Content, Header } from '@pimcore/studio-ui-bundle/components' +import React from 'react' + +export const AnotherExampleWidget = (): React.JSX.Element => { + return ( + +
+ +
+ This is another example widget. +
+ + ) +} diff --git a/assets/js/src/examples/custom-widgets/components/example-widget.tsx b/assets/js/src/examples/custom-widgets/components/example-widget.tsx new file mode 100644 index 0000000..4f98307 --- /dev/null +++ b/assets/js/src/examples/custom-widgets/components/example-widget.tsx @@ -0,0 +1,94 @@ +import { Button, Content, Header, Select, Space, type SelectProps } from '@pimcore/studio-ui-bundle/components' +import { useWidgetManager } from '@pimcore/studio-ui-bundle/modules/widget-manager' +import React from 'react' + +export const ExampleWidget = (): React.JSX.Element => { + const widgetManager = useWidgetManager() + const [selectedOption, setSelectedOption] = React.useState(undefined) + const [selectedWidget, setSelectedWidget] = React.useState | undefined>(undefined) + + const widgets = [ + { + name: 'Example widget', + component: 'example-widget', + config: { + icon: { + type: 'name', + value: 'pimcore' + } + } + }, + + { + name: 'Example widget with fixed id', + id: 'example-widget-fixed-id', + component: 'example-widget', + config: { + icon: { + type: 'name', + value: 'pimcore' + } + } + }, + + { + name: 'Another example widget', + component: 'another-example-widget', + config: { + icon: { + type: 'name', + value: 'pimcore' + } + } + } + ] + + const onSelectChange: SelectProps['onChange'] = (value) => { + setSelectedOption(value) + const selected = widgets.find((widget) => widget.name === value) + setSelectedWidget(selected) + } + + const selectOptions: SelectProps['options'] = widgets.map((widget) => ({ + label: widget.name, + value: widget.name + })) + + return ( + +
+ +
+ Select a widget: +
+ +