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",