Config updates

packages/redux-devtools-ui/.storybook/main.js

@@ -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: {}
-  }
-};

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;

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) => (
   <Container
     themeData={{
@@ -47,4 +15,41 @@ const withThemeProvider = (Story, context) => (
     <Story {...context} />
   </Container>
 );
-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;

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

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}