Feature - Storybook 8.0

.storybook/main.js

@@ -1,8 +1,18 @@
 module.exports = {
   stories: ['../stories/**/*.stories.tsx'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '../dist/esm/register'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '../dist/esm/register',
+    '@storybook/addon-webpack5-compiler-babel'
+  ],
+
   framework: {
     name: '@storybook/react-webpack5',
     options: {}
+  },
+
+  docs: {
+    autodocs: true
   }
 };

package.json

@@ -43,14 +43,14 @@
     "@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",
+    "@storybook/addon-essentials": "^8.0.0",
+    "@storybook/addon-links": "^8.0.0",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/components": "^8.0.0",
+    "@storybook/manager-api": "^8.0.0",
+    "@storybook/preview-api": "^8.0.0",
+    "@storybook/react": "^8.0.0",
+    "@storybook/react-webpack5": "^8.0.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^27.4.1",
@@ -69,8 +69,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-textarea-autosize": "^8.4.1",
-    "storybook": "^7.0.2",
-    "typescript": "^4.2.3",
+    "storybook": "^8.0.0",
+    "typescript": "^4.9.5",
     "yup": "^0.32.11"
   },
   "keywords": [

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 { Formik, Form } from 'formik';
-import { makeDecorator, useArgs, addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
+import { makeDecorator, useArgs } from '@storybook/preview-api';
 import {
   ConfigWithoutExtra,
   EVT_ON_SUBMIT,

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,4 +1,4 @@
-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';
@@ -11,7 +11,7 @@ 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 = {
@@ -22,7 +22,7 @@ myCheckbox.parameters = {
   }
 };
 
-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>
@@ -37,7 +37,7 @@ mySelect.parameters = {
   }
 };
 
-export const myTextInput: Story = () => (
+export const myTextInput: StoryFn = () => (
   <MyTextInput
     name="formikTweet"
     label="Describe formik in 80 characters"

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';
 

stories/with-controls.stories.tsx

@@ -1,5 +1,5 @@
 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 {
@@ -21,7 +21,7 @@ const meta: Meta = {
 };
 export default meta;
 
-const Template: ComponentStory<FC<PersonalInfo>> = args => {
+const Template: StoryFn<FC<PersonalInfo>> = args => {
   return <PersonalInfoSubForm />;
 };