chore: update storybook to v7.6

- using npx storybook @latest upgrade
- regenerates package-lock
- resolves warnings for current storybook files

.eslintrc.js

@@ -4,13 +4,7 @@ module.exports = {
     browser: true,
     es2020: true,
   },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/eslint-recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react/recommended',
-    // 'airbnb',
-  ],
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/eslint-recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react/recommended', 'plugin:storybook/recommended'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaFeatures: {

.storybook/main.js

@@ -1,15 +1,12 @@
 module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-    'storybook-addon-next',
-  ],
-  framework: '@storybook/react',
-  core: {
-    builder: 'webpack5',
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
+
+  framework: {
+    name: '@storybook/nextjs',
+    options: {}
   },
+
   webpackFinal: async (config, { configType }) => {
     config.resolve = {
       ...config.resolve,
@@ -22,8 +19,14 @@ module.exports = {
     // Return the altered config
     return config;
   },
+
   features: {
     emotionAlias: false,
   },
+
   staticDirs: ['../public'],
+
+  docs: {
+    autodocs: true
+  }
 };

package.json

@@ -18,8 +18,8 @@
     "lint:errors": "eslint pages src --quiet",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "chromatic": "npx chromatic --exit-zero-on-changes",
     "prepare": "node ./husky-prepare.js"
   },
@@ -126,14 +126,13 @@
     "@emotion/babel-plugin": "^11.9.2",
     "@emotion/eslint-plugin": "^11.7.0",
     "@hookform/devtools": "^4.3.1",
-    "@storybook/addon-actions": "^6.5.14",
-    "@storybook/addon-essentials": "^6.5.14",
-    "@storybook/addon-interactions": "^6.5.14",
-    "@storybook/addon-links": "^6.5.14",
-    "@storybook/builder-webpack5": "^6.5.14",
-    "@storybook/manager-webpack5": "^6.5.14",
-    "@storybook/react": "^6.5.14",
-    "@storybook/testing-library": "^0.0.13",
+    "@storybook/addon-actions": "^7.6.7",
+    "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-interactions": "^7.6.7",
+    "@storybook/addon-links": "^7.6.7",
+    "@storybook/nextjs": "^7.6.7",
+    "@storybook/react": "^7.6.7",
+    "@storybook/testing-library": "^0.2.2",
     "@types/d3-ease": "^1.0.9",
     "@types/express-slow-down": "^1.3.2",
     "@types/file-saver": "^2.0.5",
@@ -162,10 +161,11 @@
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-react-hooks": "^4.1.2",
+    "eslint-plugin-storybook": "^0.6.15",
     "husky": "^8.0.3",
     "next-unused": "0.0.6",
     "prettier": "^2.0.5",
-    "storybook-addon-next": "^1.7.1",
+    "storybook": "^7.6.7",
     "typescript": "^4.3.2",
     "validate-branch-name": "^1.3.0",
     "webpack": "^5.76.0"

src/features/user/BulkCodes/stories/BulkGiftTotal.stories.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 
 import BulkGiftTotal from '../components/BulkGiftTotal';
 
 export default {
-  title: `Components/BulkGiftTotal`,
+  title: 'Components/BulkGiftTotal',
   component: BulkGiftTotal,
-} as ComponentMeta<typeof BulkGiftTotal>;
+} as Meta<typeof BulkGiftTotal>;
 
-const Template: ComponentStory<typeof BulkGiftTotal> = (args) => (
+const Template: StoryFn<typeof BulkGiftTotal> = (args) => (
   <BulkGiftTotal {...args} />
 );
 

src/features/user/BulkCodes/stories/Button.stories.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 
 import { Button } from '@mui/material';
 // As this is a MUI component, there is no corresponding Button.tsx component file
 
 export default {
-  title: `Components/Button`,
+  title: 'Components/Button',
   component: Button,
-} as ComponentMeta<typeof Button>;
+} as Meta<typeof Button>;
 
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+const Template: StoryFn<typeof Button> = (args) => <Button {...args} />;
 
 export const Primary = Template.bind({});
 Primary.args = {

src/features/user/BulkCodes/stories/ProjectSelectAutocomplete.stories.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 
 import ProjectSelectAutocomplete from '../components/ProjectSelectAutocomplete';
 
 export default {
-  title: `Components/ProjectSelectAutocomplete`,
+  title: 'Components/ProjectSelectAutocomplete',
   component: ProjectSelectAutocomplete,
-} as ComponentMeta<typeof ProjectSelectAutocomplete>;
+} as Meta<typeof ProjectSelectAutocomplete>;
 
-const Template: ComponentStory<typeof ProjectSelectAutocomplete> = (args) => (
+const Template: StoryFn<typeof ProjectSelectAutocomplete> = (args) => (
   <ProjectSelectAutocomplete {...args} />
 );
 

src/features/user/BulkCodes/stories/RecipientsTable.stories.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 
 import RecipientsTable from '../components/RecipientsTable';
 
 export default {
-  title: `Components/RecipientsTable`,
+  title: 'Components/RecipientsTable',
   component: RecipientsTable,
-} as ComponentMeta<typeof RecipientsTable>;
+} as Meta<typeof RecipientsTable>;
 
-const Template: ComponentStory<typeof RecipientsTable> = (args) => (
+const Template: StoryFn<typeof RecipientsTable> = (args) => (
   <RecipientsTable {...args} />
 );
 

src/features/user/BulkCodes/stories/RecipientsUploadForm.stories.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 
 import RecipientsUploadForm from '../components/RecipientsUploadForm';
 
 export default {
-  title: `Components/RecipientsUploadForm`,
+  title: 'Components/RecipientsUploadForm',
   component: RecipientsUploadForm,
-} as ComponentMeta<typeof RecipientsUploadForm>;
+} as Meta<typeof RecipientsUploadForm>;
 
-const Template: ComponentStory<typeof RecipientsUploadForm> = (args) => (
+const Template: StoryFn<typeof RecipientsUploadForm> = (args) => (
   <RecipientsUploadForm {...args} />
 );
 

src/features/user/BulkCodes/stories/SelectorOption.stories.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 
 import SelectorOption from '../components/SelectorOption';
 
 export default {
-  title: `Components/SelectorOptions`,
+  title: 'Components/SelectorOptions',
   component: SelectorOption,
-} as ComponentMeta<typeof SelectorOption>;
+} as Meta<typeof SelectorOption>;
 
-const Template: ComponentStory<typeof SelectorOption> = (args) => (
+const Template: StoryFn<typeof SelectorOption> = (args) => (
   <SelectorOption {...args} />
 );
 

src/features/user/BulkCodes/stories/UnitCostDisplay.stories.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 
 import UnitCostDisplay from '../components/UnitCostDisplay';
 
 export default {
-  title: `Components/UnitCostDisplay`,
+  title: 'Components/UnitCostDisplay',
   component: UnitCostDisplay,
-} as ComponentMeta<typeof UnitCostDisplay>;
+} as Meta<typeof UnitCostDisplay>;
 
-const Template: ComponentStory<typeof UnitCostDisplay> = (args) => (
+const Template: StoryFn<typeof UnitCostDisplay> = (args) => (
   <UnitCostDisplay {...args} />
 );
 

src/features/user/BulkCodes/stories/UploadWidget.stories.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 
 import UploadWidget from '../components/UploadWidget';
 
 export default {
-  title: `Components/UploadWidget`,
+  title: 'Components/UploadWidget',
   component: UploadWidget,
-} as ComponentMeta<typeof UploadWidget>;
+} as Meta<typeof UploadWidget>;
 
-const Template: ComponentStory<typeof UploadWidget> = (args) => (
+const Template: StoryFn<typeof UploadWidget> = (args) => (
   <UploadWidget {...args} />
 );