AP-85 Add documentation for storybook

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

Hide file tree

Showing 4 changed files with 59 additions and 0 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -8,6 +8,7 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@storybook/addon-onboarding",
     "@storybook/addon-interactions",
+    "@storybook/addon-a11y",
   ],
   framework: {
     name: "@storybook/react-webpack5",
@@ -17,8 +18,19 @@ const config: StorybookConfig = {
       },
     },
   },
+
   docs: {
     autodocs: "tag",
+  },
+
+  webpackFinal: async (config) => {
+    config.resolve!.alias = {
+      ...config.resolve!.alias,
+      "@Pimcore": path.resolve(__dirname, "../assets/js"),
+    };
+
+    return config;
   }
 };
+
 export default config;
diff --git a/README.md b/README.md
@@ -3,6 +3,28 @@ todo
 
 ## Features in a Nutshell
 
+## Storybook
+
+Pimcore studio is using [Storybook](https://storybook.js.org/) for documentation of presentational react components.
+
+### Commands
+
+```
+npm run storybook // run storybook with live reloading
+npm run build-storybook // for building storybook for a static hosting
+```
+
+### Docker environment
+
+To use storybook in your local environment ensure that you open up port `6006`
+
+```
+node:
+  ports: 
+    - "6006:6006"
+  ...
+```
+
 
 ## Documentation Overview
 - [Installation](./doc/01_Installation.md)
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "@babel/preset-react": "^7.23.3",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
     "@rtk-query/codegen-openapi": "^1.2.0",
+    "@storybook/addon-a11y": "^7.6.10",
     "@storybook/addon-essentials": "^7.6.10",
     "@storybook/addon-interactions": "^7.6.10",
     "@storybook/addon-links": "^7.6.10",