AP-85 Integrate ant design into storybook preview

pimcore · Jan 24, 2024 · 5edbfde · 5edbfde
1 parent d39aad8
commit 5edbfde
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 4 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,4 +1,5 @@
 import type { StorybookConfig } from "@storybook/react-webpack5";
+import path from "path";
 
 const config: StorybookConfig = {
   stories: ["../assets/js/**/*.mdx", "../assets/js/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
@@ -18,6 +19,6 @@ const config: StorybookConfig = {
   },
   docs: {
     autodocs: "tag",
-  },
+  }
 };
 export default config;
diff --git a/.storybook/preview.ts → .storybook/preview.tsx b/.storybook/preview.ts → .storybook/preview.tsx
@@ -1,4 +1,6 @@
+import React from "react";
 import type { Preview } from "@storybook/react";
+import { ThemeProvider } from "../assets/js/modules/theme/components/ThemeProvider"
 
 const preview: Preview = {
   parameters: {
@@ -10,6 +12,14 @@ const preview: Preview = {
       },
     },
   },
+
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
 };
 
 export default preview;
diff --git a/assets/js/components/example/example.stories.tsx b/assets/js/components/example/example.stories.tsx
@@ -4,12 +4,17 @@ import { Meta } from '@storybook/react';
 import { Example as ExampleComponent } from './example';
 
 export default {
-  title: 'Pimcore studio/Example',
+  title: 'Pimcore studio/UI/Example',
   component: ExampleComponent,
   parameters: {
     layout: 'centered'
   },
   tags: ['autodocs']
 } as Meta;
 
-export const _default = {}
+export const _default = {
+  args: {
+    value: 'Save',
+    prefix: 'Unsaved changes!! '
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -2,7 +2,7 @@
   "compilerOptions": {
     "module": "es6",
     "moduleResolution": "node",
-    "baseUrl": "./assets/js",
+    "baseUrl": "./assets/js/",
     "paths": {
       "@Pimcore/*": ["./*"]
     },