upgrade storybook to version 8, does not include fixing webpack misco…

…nfiguration

.vscode/settings.json

@@ -0,0 +1 @@
+{}

package.json

@@ -39,39 +39,36 @@
     "react-dom": "*"
   },
   "devDependencies": {
-    "@babel/core": "^7.7.4",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
-    "@storybook/addon-essentials": "^7.0.2",
-    "@storybook/addon-links": "^7.0.2",
-    "@storybook/addons": "^7.0.2",
-    "@storybook/api": "^7.0.2",
-    "@storybook/components": "^7.0.2",
-    "@storybook/react": "^7.0.2",
-    "@storybook/react-webpack5": "^7.0.2",
-    "@storybook/testing-react": "^2.0.0",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^14.0.0",
-    "@types/jest": "^27.4.1",
-    "@types/node": "^12.12.14",
-    "@types/react": "^16.9.13",
-    "@types/react-dom": "^16.9.4",
-    "@types/react-syntax-highlighter": "^13.5.0",
-    "@types/yup": "^0.26.26",
-    "awesome-typescript-loader": "^5.2.1",
-    "babel-loader": "^8.0.6",
-    "concurrently": "^7.1.0",
-    "formik": "^2.0.6",
-    "gh-pages": "^2.1.1",
-    "jest": "^27.5.1",
-    "prettier": "^1.19.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-textarea-autosize": "^8.4.1",
-    "storybook": "^7.0.2",
-    "typescript": "^4.2.3",
-    "yup": "^0.32.11"
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-typescript": "^7.26.0",
+    "@storybook/addon-essentials": "^8.4.3",
+    "@storybook/addon-links": "^8.4.3",
+    "@storybook/components": "^8.4.3",
+    "@storybook/react": "^8.4.3",
+    "@storybook/react-webpack5": "^8.4.3",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.9.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@types/testing-library__jest-dom": "^5.14.9",
+    "@types/yup": "^0.32.0",
+    "babel-loader": "^9.2.1",
+    "concurrently": "^9.1.0",
+    "formik": "^2.4.6",
+    "gh-pages": "^6.2.0",
+    "jest": "^29.7.0",
+    "prettier": "^3.3.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-textarea-autosize": "^8.5.5",
+    "storybook": "^8.4.3",
+    "typescript": "^5.6.3",
+    "yup": "^1.4.0"
   },
   "keywords": [
     "storybook",
@@ -86,7 +83,11 @@
   "author": "bhishp",
   "license": "MIT",
   "dependencies": {
-    "react-json-tree": "^0.18.0"
+    "@storybook/core-events": "^8.4.3",
+    "@storybook/manager-api": "^8.4.3",
+    "jest-environment-jsdom": "^29.7.0",
+    "react-json-tree": "^0.19.0",
+    "ts-loader": "^9.5.1"
   },
   "storybook": {
     "icon": "https://pbs.twimg.com/profile_images/1148688127252471810/-UcA36Bw_400x400.png",

src/FormikPanel.tsx

@@ -1,7 +1,7 @@
 import React, { CSSProperties, useState } from 'react';
 import { FormikState } from 'formik';
 import { JSONTree } from 'react-json-tree';
-import { useChannel } from '@storybook/api';
+import { useChannel } from '@storybook/manager-api';
 import { STORY_RENDERED } from '@storybook/core-events';
 
 import { EVT_ON_SUBMIT, EVT_RENDER, EVT_SUBMIT } from './shared';

src/index.tsx

@@ -1,6 +1,7 @@
-import React, { useEffect } from 'react';
+import React, { ReactNode, useEffect } from 'react';
 import { Formik, Form } from 'formik';
-import { makeDecorator, useArgs, addons } from '@storybook/addons';
+import { makeDecorator, useArgs } from '@storybook/preview-api';
+import { addons } from '@storybook/manager-api';
 import {
   ConfigWithoutExtra,
   EVT_ON_SUBMIT,
@@ -56,7 +57,7 @@ export const withFormik = makeDecorator({
             updateArgs(props.values);
           }, [hasArgs, props.values]);
 
-          return <Form>{getStory(context)}</Form>;
+          return <Form>{getStory(context) as ReactNode}</Form>;
         }}
       </Formik>
     );

src/register.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { types, addons } from '@storybook/addons';
+import { types, addons } from '@storybook/manager-api';
 import { AddonPanel } from '@storybook/components';
 
 import { ADDON_ID, PANEL_ID, PARAM_KEY } from './shared';
@@ -9,8 +9,8 @@ addons.register(ADDON_ID, () => {
   addons.add(PANEL_ID, {
     type: types.PANEL,
     title: 'Formik',
-    render: ({ active, key }) => (
-      <AddonPanel active={!!active} key={key}>
+    render: ({ active }) => (
+      <AddonPanel active={!!active}>
         <FormikPanel />
       </AddonPanel>
     ),

stories/fields.stories.tsx

@@ -1,28 +1,28 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 import withFormik from '../dist/esm';
 import { MyCheckbox, MySelect, MyTextInput } from './example';
 
 const meta: Meta = {
   decorators: [withFormik],
-  title: 'WithFormik/Fields'
+  title: 'WithFormik/Fields',
 };
 export default meta;
 
 // You may want to demonstrate a library of your custom-made fields
 
-export const myCheckbox: Story = () => (
+export const myCheckbox: StoryFn = () => (
   <MyCheckbox name="likeFormik">Do you like formik?</MyCheckbox>
 );
 myCheckbox.parameters = {
   formik: {
     initialValues: {
-      likeFormik: true
-    }
-  }
+      likeFormik: true,
+    },
+  },
 };
 
-export const mySelect: Story = () => (
+export const mySelect: StoryFn = () => (
   <MySelect name="formikRating" label="How much do you like formik?">
     <option value="3">I like it</option>
     <option value="4">I really like it</option>
@@ -32,12 +32,12 @@ export const mySelect: Story = () => (
 mySelect.parameters = {
   formik: {
     initialValues: {
-      formikRating: '5'
-    }
-  }
+      formikRating: '5',
+    },
+  },
 };
 
-export const myTextInput: Story = () => (
+export const myTextInput: StoryFn = () => (
   <MyTextInput
     name="formikTweet"
     label="Describe formik in 80 characters"
@@ -47,7 +47,7 @@ export const myTextInput: Story = () => (
 myTextInput.parameters = {
   formik: {
     initialValues: {
-      formikTweet: ''
-    }
-  }
+      formikTweet: '',
+    },
+  },
 };

stories/fields.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
-import { composeStories } from '@storybook/testing-react';
+import { composeStories } from '@storybook/react';
 
 import * as stories from './fields.stories';
 
@@ -11,7 +11,7 @@ describe('subforms', () => {
   test('renders correctly from the story using Formik decorator', () => {
     render(<MyTextInput />);
     expect(
-      screen.getByText('Describe formik in 80 characters')
+      screen.getByText('Describe formik in 80 characters'),
     ).toBeInTheDocument();
   });
 });

stories/with-controls.stories.tsx

@@ -1,12 +1,12 @@
 import { Meta } from '@storybook/react';
-import { ComponentStory } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 import React, { FC } from 'react';
 import withFormik from '../dist/esm';
 import {
   PersonalInfo,
   personalInfoInitialValues,
   PersonalInfoSubForm,
-  personalInfoValidationSchema
+  personalInfoValidationSchema,
 } from './example';
 
 const meta: Meta = {
@@ -15,13 +15,13 @@ const meta: Meta = {
   args: personalInfoInitialValues,
   parameters: {
     formik: {
-      validationSchema: personalInfoValidationSchema
-    }
-  }
+      validationSchema: personalInfoValidationSchema,
+    },
+  },
 };
 export default meta;
 
-const Template: ComponentStory<FC<PersonalInfo>> = args => {
+const Template: StoryFn<FC<PersonalInfo>> = _ => {
   return <PersonalInfoSubForm />;
 };