diff --git a/packages/redux-devtools-ui/.storybook/main.js b/packages/redux-devtools-ui/.storybook/main.js deleted file mode 100644 index cc294c9a..00000000 --- a/packages/redux-devtools-ui/.storybook/main.js +++ /dev/null @@ -1,13 +0,0 @@ -module.exports = { - stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], - addons: [{ - name: '@storybook/addon-essentials', - options: { - backgrounds: false - } - }], - framework: { - name: "@storybook/react-webpack5", - options: {} - } -}; \ No newline at end of file diff --git a/packages/redux-devtools-ui/.storybook/main.ts b/packages/redux-devtools-ui/.storybook/main.ts new file mode 100644 index 00000000..bbfda9da --- /dev/null +++ b/packages/redux-devtools-ui/.storybook/main.ts @@ -0,0 +1,24 @@ +import type { StorybookConfig } from '@storybook/react-webpack5'; + +const config: StorybookConfig = { + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], + addons: [ + '@storybook/addon-links', + { + name: '@storybook/addon-essentials', + options: { + backgrounds: false, + }, + }, + '@storybook/addon-interactions', + ], + framework: { + name: '@storybook/react-webpack5', + options: {}, + }, + docs: { + autodocs: 'tag', + }, +}; + +export default config; diff --git a/packages/redux-devtools-ui/.storybook/preview.tsx b/packages/redux-devtools-ui/.storybook/preview.tsx index 7128b553..b45932a5 100644 --- a/packages/redux-devtools-ui/.storybook/preview.tsx +++ b/packages/redux-devtools-ui/.storybook/preview.tsx @@ -1,41 +1,9 @@ import React from 'react'; +import type { Preview } from '@storybook/react'; + import { Container } from '../src'; import { listSchemes, listThemes } from '../src/utils/theme'; -export const parameters = { - actions: { argTypesRegex: '^on[A-Z].*' }, -}; - -export const globalTypes = { - theme: { - name: 'Theme', - description: 'Global theme for components', - defaultValue: 'default', - toolbar: { - items: listThemes(), - showName: true, - }, - }, - scheme: { - name: 'Color Scheme', - description: 'Global color scheme for components', - defaultValue: 'default', - toolbar: { - items: listSchemes(), - showName: true, - }, - }, - color: { - name: 'Color', - description: 'Global color for components', - defaultValue: 'light', - toolbar: { - items: ['auto', 'light', 'dark'], - showName: true, - }, - }, -}; - const withThemeProvider = (Story, context) => ( ( ); -export const decorators = [withThemeProvider]; + +const preview: Preview = { + parameters: { + actions: { argTypesRegex: '^on[A-Z].*' }, + }, + globalTypes: { + theme: { + name: 'Theme', + description: 'Global theme for components', + defaultValue: 'default', + toolbar: { + items: listThemes(), + showName: true, + }, + }, + scheme: { + name: 'Color Scheme', + description: 'Global color scheme for components', + defaultValue: 'default', + toolbar: { + items: listSchemes(), + showName: true, + }, + }, + color: { + name: 'Color', + description: 'Global color for components', + defaultValue: 'light', + toolbar: { + items: ['auto', 'light', 'dark'], + showName: true, + }, + }, + }, + decorators: [withThemeProvider], +}; + +export default preview; diff --git a/packages/redux-devtools-ui/package.json b/packages/redux-devtools-ui/package.json index ee61cfc8..a6ef98e9 100644 --- a/packages/redux-devtools-ui/package.json +++ b/packages/redux-devtools-ui/package.json @@ -68,6 +68,8 @@ "@babel/preset-react": "^7.18.6", "@babel/preset-typescript": "^7.21.0", "@storybook/addon-essentials": "^7.0.2", + "@storybook/addon-interactions": "^7.0.2", + "@storybook/addon-links": "^7.0.2", "@storybook/react": "^7.0.2", "@storybook/react-webpack5": "7.0.2", "@testing-library/dom": "^9.2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2350eebd..856e2d14 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3127,6 +3127,12 @@ importers: '@storybook/addon-essentials': specifier: ^7.0.2 version: 7.0.2(react-dom@18.2.0)(react@18.2.0) + '@storybook/addon-interactions': + specifier: ^7.0.2 + version: 7.0.2(react-dom@18.2.0)(react@18.2.0) + '@storybook/addon-links': + specifier: ^7.0.2 + version: 7.0.2(react-dom@18.2.0)(react@18.2.0) '@storybook/react': specifier: ^7.0.2 version: 7.0.2(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.5) @@ -3939,7 +3945,7 @@ packages: resolution: {integrity: sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.21.3 + '@babel/types': 7.21.4 /@babel/helper-module-transforms@7.21.2: resolution: {integrity: sha512-79yj2AR4U/Oqq/WOV7Lx6hUjau1Zfo4cI+JLAVYeMV5XIlbOhmjEk5ulbTc9fMpmlojzZHkUUxAiK+UKn+hNQQ==} @@ -4772,7 +4778,7 @@ packages: '@babel/helper-module-imports': 7.18.6 '@babel/helper-plugin-utils': 7.20.2 '@babel/plugin-syntax-jsx': 7.18.6(@babel/core@7.21.3) - '@babel/types': 7.21.3 + '@babel/types': 7.21.4 dev: true /@babel/plugin-transform-react-pure-annotations@7.18.6(@babel/core@7.21.3): @@ -5112,7 +5118,7 @@ packages: '@babel/helper-plugin-utils': 7.20.2 '@babel/plugin-proposal-unicode-property-regex': 7.18.6(@babel/core@7.21.3) '@babel/plugin-transform-dotall-regex': 7.18.6(@babel/core@7.21.3) - '@babel/types': 7.21.3 + '@babel/types': 7.21.4 esutils: 2.0.3 dev: true @@ -7195,6 +7201,17 @@ packages: - supports-color dev: true + /@jest/types@27.5.1: + resolution: {integrity: sha512-Cx46iJ9QpwQTjIdq5VJu2QTMMs3QlEjI0x1QbBP5W1+nMzyc2XmimiRR/CbX9TO0cPTeUlxWMOu8mslYsJ8DEw==} + engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0} + dependencies: + '@types/istanbul-lib-coverage': 2.0.4 + '@types/istanbul-reports': 3.0.1 + '@types/node': 18.15.10 + '@types/yargs': 16.0.5 + chalk: 4.1.2 + dev: true + /@jest/types@29.5.0: resolution: {integrity: sha512-qbu7kN6czmVRc3xWFQcAN03RAUamgppVUdXrvl1Wr3jlNF93o9mJbGcDWrwGB6ht44u7efB1qCFgVQmca24Uog==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} @@ -8010,6 +8027,61 @@ packages: '@storybook/preview-api': 7.0.2 dev: true + /@storybook/addon-interactions@7.0.2(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-vPWnyGND4s9nVp+U21N/jE00dCRsHcKU68SoL4OiIZioTTRbLvrTG9eAdBkZXsVPpFHq8gndma3nXfplOSSckg==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || 18 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || 18 + peerDependenciesMeta: + react: + optional: true + react-dom: + optional: true + dependencies: + '@storybook/client-logger': 7.0.2 + '@storybook/components': 7.0.2(react-dom@18.2.0)(react@18.2.0) + '@storybook/core-common': 7.0.2 + '@storybook/core-events': 7.0.2 + '@storybook/global': 5.0.0 + '@storybook/instrumenter': 7.0.2 + '@storybook/manager-api': 7.0.2(react-dom@18.2.0)(react@18.2.0) + '@storybook/preview-api': 7.0.2 + '@storybook/theming': 7.0.2(react-dom@18.2.0)(react@18.2.0) + '@storybook/types': 7.0.2 + jest-mock: 27.5.1 + polished: 4.2.2 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + ts-dedent: 2.2.0 + transitivePeerDependencies: + - supports-color + dev: true + + /@storybook/addon-links@7.0.2(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-lPtfy2MqrcI9YjupBM2eRKGPdFKVPCz7WgO/JQQakGugORJTEGCyJrNJNtWY9jDenv8ynLZ40OxtPBZi54Sr6Q==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || 18 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || 18 + peerDependenciesMeta: + react: + optional: true + react-dom: + optional: true + dependencies: + '@storybook/client-logger': 7.0.2 + '@storybook/core-events': 7.0.2 + '@storybook/csf': 0.1.0 + '@storybook/global': 5.0.0 + '@storybook/manager-api': 7.0.2(react-dom@18.2.0)(react@18.2.0) + '@storybook/preview-api': 7.0.2 + '@storybook/router': 7.0.2(react-dom@18.2.0)(react@18.2.0) + '@storybook/types': 7.0.2 + prop-types: 15.8.1 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + ts-dedent: 2.2.0 + dev: true + /@storybook/addon-measure@7.0.2(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-cf/d5MXpHAjyUiDIVfc8pLn79CPHgnryDmNNlSiP2zEFKcivrRWiu8Rmrad8pGqLkuAh+PXLKCGn9uiqDvg7QQ==} peerDependencies: @@ -8529,6 +8601,16 @@ packages: resolution: {integrity: sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==} dev: true + /@storybook/instrumenter@7.0.2: + resolution: {integrity: sha512-zr9/fuaYtGVUtcL8XgjA4Iq5jtzdcqQyOSH4XLXtz6JtSad3lkRagbJo2Vzbw7dO/4vzjfTMxEzvWjUuPxLOhA==} + dependencies: + '@storybook/channels': 7.0.2 + '@storybook/client-logger': 7.0.2 + '@storybook/core-events': 7.0.2 + '@storybook/global': 5.0.0 + '@storybook/preview-api': 7.0.2 + dev: true + /@storybook/manager-api@7.0.2(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-PbLj9Rc5uCMPfMdaXv1wE3koA3+d0rmZ3BJI8jeq+mfZEvpvfI4OOpRioT1q04CkkVomFOVFTyO0Q/o6Rb5N7g==} peerDependencies: @@ -9795,6 +9877,12 @@ packages: resolution: {integrity: sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==} dev: true + /@types/yargs@16.0.5: + resolution: {integrity: sha512-AxO/ADJOBFJScHbWhq2xAhlWP24rY4aCEG/NFaMvbT3X2MgRsLjhjQwsn0Zi5zn0LG9jUhCCZMeX9Dkuw6k+vQ==} + dependencies: + '@types/yargs-parser': 21.0.0 + dev: true + /@types/yargs@17.0.23: resolution: {integrity: sha512-yuogunc04OnzGQCrfHx+Kk883Q4X0aSwmYZhKjI21m+SVYzjIbrWl8dOOwSv5hf2Um2pdCOXWo9isteZTNXUZQ==} dependencies: @@ -10665,7 +10753,7 @@ packages: '@babel/core': 7.21.3 find-cache-dir: 3.3.2 schema-utils: 4.0.0 - webpack: 5.76.3(esbuild@0.17.15) + webpack: 5.76.3(webpack-cli@5.0.1) dev: true /babel-plugin-add-react-displayname@0.0.5: @@ -15251,6 +15339,14 @@ packages: stack-utils: 2.0.6 dev: true + /jest-mock@27.5.1: + resolution: {integrity: sha512-K4jKbY1d4ENhbrG2zuPWaQBvDly+iZ2yAW+T1fATN78hc0sInwn7wZB8XtlNnvHug5RMwV897Xm4LqmPM4e2Og==} + engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0} + dependencies: + '@jest/types': 27.5.1 + '@types/node': 18.15.10 + dev: true + /jest-mock@29.5.0: resolution: {integrity: sha512-GqOzvdWDE4fAV2bWQLQCkujxYWL7RxjCnj71b5VhDAGOevB3qj3Ovg26A5NI84ZpODxyzaozXLOh2NCgkbvyaw==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}