Migrate storybook from webpack to rsbuild (#1554)

* Migrate storybook form webpack to rsbuild

* Remove logging

* Apply eslint-fixer changes

* Automatic frontend build

---------

Co-authored-by: vin0401 <[email protected]>

Author: vin0401

assets/.storybook/main.ts

@@ -9,8 +9,7 @@
  */
 
 import type { Options } from '@swc/core';
-import type { StorybookConfig } from "@storybook/react-webpack5";
-import path from "path";
+import type { StorybookConfig } from "storybook-react-rsbuild";
 
 const config: StorybookConfig = {
   stories: ["../js/**/*.mdx", "../js/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
@@ -35,46 +34,51 @@ const config: StorybookConfig = {
     "@storybook/addon-webpack5-compiler-swc"
   ],
   framework: {
-    name: "@storybook/react-webpack5",
+    name: "storybook-react-rsbuild",
     options: {
-      builder: {},
+      builder: {
+      },
     },
   },
 
   docs: {
     autodocs: "tag",
   },
 
-  webpackFinal: async (config) => {
-    config.resolve!.alias = {
-      ...config.resolve!.alias,
-      "@Pimcore": path.resolve(__dirname, "../js/src/core"),
-    };
+  rsbuildFinal: (config) => {
+    const pluginsToFilterOut = [
+      'entrypoints-generate',
+      'rsbuild:module-federation-enhanced'
+    ]
 
-    // disable whatever is already set to load SVGs
-    // Exclude inline SVGs for package "@svgr/webpack" from the default encore rule
-    config?.module?.rules?.forEach(rule => {
-      if (!rule || typeof rule !== 'object') return;
-      if (rule.test instanceof RegExp && rule.test.test('.svg')) {
-        rule.exclude = /\.inline.svg$/;
+    const plugins = config.plugins!.filter((plugin) => {
+      // Filter out specific plugins
+      if (typeof plugin === 'object' && 'name' in plugin! && pluginsToFilterOut.includes(plugin!.name)) {
+        return false;
       }
-    });
 
-    // add SVGR instead
-    config!.module!.rules!.push({
-      test: /\.inline.svg$/,
-      use: [
-        {
-          loader: '@svgr/webpack',
-          options: { 
-            icon: true,
-            typescript: true
-          } 
-        },
-      ],
+      return true;
     });
 
-    return config;
+    return {
+      ...config,
+      dev: {
+        ...config.dev,
+        client: {
+          port: 6006
+        },
+        writeToDisk: false,
+        assetPrefix: '/storybook/'
+      },
+      output: {
+        ...config.output,
+        sourceMap: false,
+        assetPrefix: '/storybook/',
+      },
+      plugins: [
+        ...plugins
+      ]
+    };
   },
 
   // Enable typescript decorators for storybook

assets/js/src/__storybook__/core/concepts.mdx

@@ -12,4 +12,7 @@ Storybook helps us build, test, and showcase our components in isolation, ensuri
 - **Docs**: Contains the documentation to several topics like the Storybook itself, the components, the design system and the development process.
 - **Components**: Contains purely presentational components that are used in the application.
 - **Tools**: Contains Tools that help with the daily work.
-- **Modules**: Contains the primary business logic of the different features.
+
+## Pimcore Docs
+
+For more information about Pimcore Studio, please refer to the [Pimcore Studio UI Docs](https://docs.pimcore.com/platform/Studio_UI/).

assets/js/src/__storybook__/overview.mdx

@@ -170,6 +170,9 @@ import { HardlinkTabManager } from '@Pimcore/modules/document/editor/types/hardl
 import { LinkTabManager } from '@Pimcore/modules/document/editor/types/link/tab-manager/link-tab-manager'
 import { SnippetTabManager } from '@Pimcore/modules/document/editor/types/snippet/tab-manager/snippet-tab-manager'
 
+// Component registry
+container.bind(serviceIds['App/ComponentRegistry/ComponentRegistry']).to(ComponentRegistry).inSingletonScope()
+
 // Main nav
 container.bind(serviceIds.mainNavRegistry).to(MainNavRegistry).inSingletonScope()
 
@@ -361,6 +364,3 @@ container.bind(serviceIds['DynamicTypes/Object/Variant']).to(DynamicTypeObjectVa
 
 // Execution engine
 container.bind(serviceIds['ExecutionEngine/JobComponentRegistry']).to(JobComponentRegistry).inSingletonScope()
-
-// Component registry
-container.bind(serviceIds['App/ComponentRegistry/ComponentRegistry']).to(ComponentRegistry).inSingletonScope()

assets/js/src/__storybook__/sdk/sdk-overview.mdx

@@ -13,6 +13,7 @@ import '@Pimcore/app/config/app-config'
 import '@Pimcore/app/module-system/module-system'
 import '@Pimcore/app/config/services'
 import '@Pimcore/app/i18n'
+import '@Pimcore/modules/app/base-layout'
 import '@Pimcore/modules/app/base-layout/main-nav'
 import '@Pimcore/modules/icon-library'
 import '@Pimcore/modules/asset'

assets/js/src/core/app/config/services/index.ts

@@ -9,9 +9,13 @@
  */
 
 import { theme } from 'antd'
+import useTableStyle from 'antd/es/table/style'
+import usePaginationStyle from 'antd/es/pagination/style'
 const { useToken } = theme
 
 export const useCssComponentHash = (): string => {
+  useTableStyle('ant-table')
+  usePaginationStyle('ant-pagination')
   const { hashId } = useToken()
 
   return hashId

assets/js/src/core/bootstrap.ts

@@ -0,0 +1,34 @@
+/**
+ * This source file is available under the terms of the
+ * Pimcore Open Core License (POCL)
+ * Full copyright and license information is available in
+ * LICENSE.md which is distributed with this source code.
+ *
+ *  @copyright  Copyright (c) Pimcore GmbH (https://www.pimcore.com)
+ *  @license    Pimcore Open Core License (POCL)
+ */
+
+import { serviceIds } from '@Pimcore/app/config/services/service-ids'
+import { container } from '@Pimcore/app/depency-injection'
+import { moduleSystem } from '@Pimcore/app/module-system/module-system'
+import { type ComponentRegistry } from '@Pimcore/modules/app/component-registry/component-registry'
+import { MainNav } from '@Pimcore/modules/app/base-layout/main-nav/main-nav'
+import { Search } from '@Pimcore/modules/search/search'
+
+moduleSystem.registerModule({
+  onInit: () => {
+    const componentRegistry = container.get<ComponentRegistry>(serviceIds['App/ComponentRegistry/ComponentRegistry'])
+
+    componentRegistry.registerToSlot('leftSidebar.slot', {
+      name: 'mainNav',
+      priority: 100,
+      component: MainNav
+    })
+
+    componentRegistry.registerToSlot('leftSidebar.slot', {
+      name: 'search',
+      priority: 200,
+      component: Search
+    })
+  }
+})

assets/js/src/core/components/modal-upload/components/modal-upload-button/modal-upload-button.stories.tsx

@@ -36,7 +36,7 @@ export const LeftSidebarView = (): React.JSX.Element => {
               context={ context }
             />
           ) }
-          slot={ componentConfig.leftSidebar.slot }
+          slot={ componentConfig.leftSidebar.slot.name }
         />
       </ul>
     </div>

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

@@ -10,14 +10,6 @@
 
 import { type ComponentRegistryConfig } from './component-registry'
 import { ComponentType } from './enums/component-type'
-import { EditorToolbarContextMenu as AssetEditorToolbarContextMenu } from '@Pimcore/modules/asset/editor/toolbar/context-menu/context-menu'
-import { EditorToolbarContextMenu as DataObjectEditorToolbarContextMenu } from '@Pimcore/modules/data-object/editor/toolbar/context-menu/context-menu'
-import { ConditionalLanguageSelection } from '@Pimcore/modules/data-object/editor/toolbar/language-selection/conditional-language-selection'
-import { MainNav } from '@Pimcore/modules/app/base-layout/main-nav/main-nav'
-import { Search } from '@Pimcore/modules/search/search'
-import { EditorToolbarWorkflowMenu } from '@Pimcore/modules/asset/editor/toolbar/workflow-menu/workflow-menu'
-import { EditorToolbarSaveButton as AssetEditorToolbarSaveButton } from '@Pimcore/modules/asset/editor/toolbar/save-button/save-button'
-import { EditorToolbarSaveButtons as DataObjectEditorToolbarSaveButtons } from '@Pimcore/modules/data-object/editor/toolbar/save-buttons/save-buttons'
 
 const defaultComponentConfig = {
   asset: {
@@ -34,15 +26,15 @@ const defaultComponentConfig = {
             type: ComponentType.SLOT,
             name: 'asset.editor.toolbar.slots.left',
             defaultEntries: [
-              { name: 'contextMenu', priority: 100, component: AssetEditorToolbarContextMenu }
+              { name: 'contextMenu', priority: 100 }
             ]
           },
           right: {
             type: ComponentType.SLOT,
             name: 'asset.editor.toolbar.slots.right',
             defaultEntries: [
-              { name: 'workflowMenu', priority: 100, component: EditorToolbarWorkflowMenu },
-              { name: 'saveButton', priority: 200, component: AssetEditorToolbarSaveButton }
+              { name: 'workflowMenu', priority: 100 },
+              { name: 'saveButton', priority: 200 }
             ]
           }
         }
@@ -60,16 +52,16 @@ const defaultComponentConfig = {
             type: ComponentType.SLOT,
             name: 'dataObject.editor.toolbar.slots.left',
             defaultEntries: [
-              { name: 'contextMenu', priority: 100, component: DataObjectEditorToolbarContextMenu },
-              { name: 'languageSelection', priority: 200, component: ConditionalLanguageSelection }
+              { name: 'contextMenu', priority: 100 },
+              { name: 'languageSelection', priority: 200 }
             ]
           },
           right: {
             type: ComponentType.SLOT,
             name: 'dataObject.editor.toolbar.slots.right',
             defaultEntries: [
-              { name: 'workflowMenu', priority: 100, component: EditorToolbarWorkflowMenu },
-              { name: 'saveButtons', priority: 200, component: DataObjectEditorToolbarSaveButtons }
+              { name: 'workflowMenu', priority: 100 },
+              { name: 'saveButtons', priority: 200 }
             ]
           }
         }
@@ -92,8 +84,8 @@ const defaultComponentConfig = {
       type: ComponentType.SLOT,
       name: 'leftSidebar.slot',
       defaultEntries: [
-        { name: 'mainNav', priority: 100, component: MainNav },
-        { name: 'search', priority: 200, component: Search }
+        { name: 'mainNav', priority: 100 },
+        { name: 'search', priority: 200 }
       ]
     }
   },

assets/js/src/core/modules/app/base-layout/index.ts

@@ -26,10 +26,12 @@ interface ComponentRegistryConfigEntrySingle {
   type: ComponentType.SINGLE
 }
 
+interface ComponentRegistryConfigEntrySlotItem extends Omit<ComponentRegistryEntry<any>, 'component'> {}
+
 interface ComponentRegistryConfigEntrySlot {
   name: string
   type: ComponentType.SLOT
-  defaultEntries?: Array<ComponentRegistryEntry<any>>
+  defaultEntries?: ComponentRegistryConfigEntrySlotItem[]
 }
 
 export type ComponentRegistryConfigEntry = ComponentRegistryConfigEntrySingle | ComponentRegistryConfigEntrySlot

assets/js/src/core/modules/app/base-layout/left-sidebar-view.tsx

@@ -8,35 +8,20 @@
  *  @license    Pimcore Open Core License (POCL)
  */
 
-import React, { useRef } from 'react'
-import { type ComponentRegistryEntry, useComponentRegistry } from './component-registry'
+import React from 'react'
+import { useComponentRegistry } from './component-registry'
 import { isUndefined } from 'lodash'
 
 interface SlotRendererProps {
-  slot: {
-    name: string
-    defaultEntries?: Array<ComponentRegistryEntry<any>>
-  }
+  slot: string
   props?: Record<string, any>
   onRenderComponent?: (Component: React.JSX.Element, context: { name?: string, index?: number, props?: Record<string, any> }) => React.JSX.Element
 }
 
 export const SlotRenderer = ({ slot, props, onRenderComponent }: SlotRendererProps): React.JSX.Element => {
-  const { name, defaultEntries } = slot
+  const name = slot
   const ComponentRegistry = useComponentRegistry()
 
-  const hasRegisteredDefaults = useRef(false)
-
-  if (!hasRegisteredDefaults.current && !isUndefined(defaultEntries)) {
-    const existingEntries = ComponentRegistry.getSlotComponents(name).map(({ name }) => name)
-    defaultEntries.forEach((entry) => {
-      if (!existingEntries.includes(entry.name)) {
-        ComponentRegistry.registerToSlot(name, entry)
-      }
-    })
-    hasRegisteredDefaults.current = true
-  }
-
   const components = ComponentRegistry.getSlotComponents(name)
 
   return (

assets/js/src/core/modules/app/component-registry/component-config.ts renamed to assets/js/src/core/modules/app/component-registry/component-config.tsx

@@ -14,13 +14,9 @@ import React from 'react'
 import { ClassDefinitionsProvider } from '../data-object/utils/provider/class-defintions/class-definitions-provider'
 import { ElementSelectorProvider } from '@sdk/modules/element'
 import { useHandleDeepLink } from './hook/use-handle-deeplink'
-import useTableStyle from 'antd/es/table/style'
-import usePaginationStyle from 'antd/es/pagination/style'
 
 export const DefaultPage = (): React.JSX.Element => {
   useHandleDeepLink()
-  useTableStyle('ant-table')
-  usePaginationStyle('ant-pagination')
 
   const preventDrop = (event: React.DragEvent<HTMLDivElement>): void => {
     event.preventDefault()