From 9d1a457a9951fb61b090b4f53243ef9097fd70c9 Mon Sep 17 00:00:00 2001
From: vin0401 <marvin.bertram@pimcore.com>
Date: Wed, 24 Jan 2024 15:59:51 +0100
Subject: [PATCH] AP-85 Add documentation for storybook

---
 .storybook/main.ts | 12 ++++++++++++
 README.md          | 22 ++++++++++++++++++++++
 package-lock.json  | 24 ++++++++++++++++++++++++
 package.json       |  1 +
 4 files changed, 59 insertions(+)

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 1c8712391..659bb62ad 100644
--- 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
index 89d376321..185c61512 100644
--- 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
index 4052d27f8..739bd5c44 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,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",
@@ -4535,6 +4536,20 @@
       "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
       "dev": true
     },
+    "node_modules/@storybook/addon-a11y": {
+      "version": "7.6.10",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-7.6.10.tgz",
+      "integrity": "sha512-TP17m4TAWLSSd2x9cWNg7d0MCZZCojYIG83RZMXAb55jt8gKJBMDbupOoDLydBsABQa5Uk9ZP0D/CvumMon8RA==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/addon-highlight": "7.6.10",
+        "axe-core": "^4.2.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
     "node_modules/@storybook/addon-actions": {
       "version": "7.6.10",
       "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-7.6.10.tgz",
@@ -9267,6 +9282,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/axe-core": {
+      "version": "4.8.3",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.3.tgz",
+      "integrity": "sha512-d5ZQHPSPkF9Tw+yfyDcRoUOc4g/8UloJJe5J8m4L5+c7AtDdjDLRxew/knnI4CxvtdxEUVgWz4x3OIQUIFiMfw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/babel-core": {
       "version": "7.0.0-bridge.0",
       "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz",
diff --git a/package.json b/package.json
index 9ad30e334..59769dc86 100644
--- 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",