Migrate storybook to latest app state

pimcore · May 13, 2024 · a0f2b15 · a0f2b15
1 parent 9c82a6d
commit a0f2b15
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 11 deletions.
diff --git a/assets/.storybook/main.ts b/assets/.storybook/main.ts
@@ -11,11 +11,15 @@
  *  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
  */
 
+import type { Options } from '@swc/core';
 import type { StorybookConfig } from "@storybook/react-webpack5";
 import path from "path";
 
 const config: StorybookConfig = {
   stories: ["../js/**/*.mdx", "../js/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  typescript: {
+
+  },
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
@@ -38,7 +42,7 @@ const config: StorybookConfig = {
   webpackFinal: async (config) => {
     config.resolve!.alias = {
       ...config.resolve!.alias,
-      "@Pimcore": path.resolve(__dirname, "../js/src"),
+      "@Pimcore": path.resolve(__dirname, "../js/src/core"),
     };
 
     // disable whatever is already set to load SVGs
@@ -65,6 +69,22 @@ const config: StorybookConfig = {
     });
 
     return config;
+  },
+
+  // Enable typescript decorators for storybook
+  swc: (config: Options): Options => {
+    return {
+      ...config,
+      jsc: {
+        ...config.jsc,
+        parser: {
+          syntax: "typescript",
+          tsx: true,
+          dynamicImport: true,
+          decorators: true,
+        },
+      },
+    };
   }
 };
 

diff --git a/assets/.storybook/preview.tsx b/assets/.storybook/preview.tsx
@@ -11,12 +11,23 @@
  *  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
  */
 
-import React from "react";
-import '../js/src/bootstrap';
+import React, { useEffect, useState } from "react";
+import '../js/src/core/bootstrap';
 import type { Preview } from "@storybook/react";
 import "../css/globals.css";
-import { GlobalProvider } from "../js/src/modules/app/global-provider";
+import { GlobalProvider } from "../js/src/core/modules/app/global-provider";
 import { App } from 'antd'
+import { Pimcore } from '../js/src/core/app/public-api'
+import { moduleSystem } from "../js/src/core/app/module-system/module-system";
+
+declare global {
+  interface Window {
+    Pimcore: typeof Pimcore
+  }
+}
+
+window.Pimcore = Pimcore;
+moduleSystem.initModules();
 
 const preview: Preview = {
   parameters: {
@@ -29,13 +40,15 @@ const preview: Preview = {
   },
 
   decorators: [
-    (Story) => (
-      <GlobalProvider>
-        <App>
-          <Story />
-        </App>
-      </GlobalProvider>
-    ),
+    (Story) => {
+      return (
+        <GlobalProvider>
+          <App>
+            <Story />
+          </App>
+        </GlobalProvider>
+      )
+    }
   ],
 };