update example to use Storybook 7.0 and addon-interactions

Author: yannbf

example/.storybook/main.ts

@@ -1,11 +1,22 @@
-import type { StorybookConfig } from '@storybook/react/types';
+import type { StorybookConfig } from '@storybook/react-webpack5';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.stories.tsx'],
   logLevel: 'debug',
-  addons: ['@storybook/preset-create-react-app', '@storybook/addon-essentials'],
+  addons: [
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  docs: {
+    docsPage: 'automatic',
+  },
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
   features: {
-    previewCsfV3: true,
+    interactionsDebugger: true,
   },
 };
 

example/package.json

@@ -4,10 +4,10 @@
   "private": true,
   "scripts": {
     "build": "react-scripts build",
-    "build-storybook": "build-storybook -s public",
+    "build-storybook": "storybook build -s public",
     "eject": "react-scripts eject",
     "start": "react-scripts start",
-    "storybook": "start-storybook -p 9009 -s public",
+    "storybook": "storybook dev -p 9009 -s public",
     "test": "SKIP_PREFLIGHT_CHECK=true react-scripts test --setupFiles ./setup.ts"
   },
   "browserslist": {
@@ -23,24 +23,28 @@
     ]
   },
   "dependencies": {
-    "@types/jest": "25.2.3",
+    "@types/jest": "^27.0.0",
     "@types/node": "14.14.20",
-    "@types/react": "^16.14.2",
-    "@types/react-dom": "16.9.10",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.2",
     "formik": "^2.2.9",
     "global": "^4.4.0",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
-    "react-scripts": "3.4.4",
-    "typescript": "^3.9.7"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.9.3"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^6.4.0-rc.2",
-    "@storybook/react": "^6.4.0-rc.2",
-    "@storybook/components": "^6.4.0-rc.2",
-    "@storybook/theming": "^6.4.0-rc.2",
-    "@storybook/preset-create-react-app": "^3.1.5",
-    "@testing-library/react": "^11.2.5",
-    "@testing-library/user-event": "^13.1.9"
+    "@storybook/addon-essentials": "7.0.0-alpha.56",
+    "@storybook/addon-interactions": "^6.5.14",
+    "@storybook/components": "7.0.0-alpha.56",
+    "@storybook/preset-create-react-app": "^4.1.2",
+    "@storybook/react": "7.0.0-alpha.56",
+    "@storybook/react-webpack5": "7.0.0-alpha.56",
+    "@storybook/testing-library": "^0.0.13",
+    "@storybook/theming": "7.0.0-alpha.56",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/user-event": "^13.1.9",
+    "storybook": "7.0.0-alpha.56"
   }
-}
+}

example/src/components/AccountForm.stories.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
-import type { ComponentMeta, ComponentStoryObj } from '@storybook/react';
-import { screen } from '@testing-library/dom';
-import userEvent from '@testing-library/user-event';
+import type { Meta, StoryObj } from '@storybook/react';
+import { within, userEvent} from '@storybook/testing-library';
 
 import { AccountForm, AccountFormProps } from './AccountForm';
 
-export default {
+const meta = {
   title: 'CSF3/AccountForm',
   component: AccountForm,
   parameters: {
@@ -15,43 +14,53 @@ export default {
     <p>This uses a custom render from meta</p>
     <AccountForm {...args} />
   </div>)
-} as ComponentMeta<typeof AccountForm>;
+} as Meta<typeof AccountForm>;
 
-type Story = ComponentStoryObj<typeof AccountForm>
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
 export const Standard: Story = {
   args: { passwordVerification: false },
 };
 
 export const StandardEmailFilled: Story = {
   ...Standard,
-  play: () => userEvent.type(screen.getByTestId('email'), '[email protected]'),
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByTestId('email'), '[email protected]');
+  }
 };
 
 export const StandardEmailFailed: Story = {
   ...Standard,
-  play: async () => {
-    await userEvent.type(screen.getByTestId('email'), '[email protected]@com');
-    await userEvent.type(screen.getByTestId('password1'), 'testpasswordthatwontfail');
-    await userEvent.click(screen.getByTestId('submit'));
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByTestId('email'), '[email protected]@com');
+    await userEvent.type(canvas.getByTestId('password1'), 'testpasswordthatwontfail');
+    await userEvent.click(canvas.getByTestId('submit'));
   },
 };
 
 export const StandardPasswordFailed: Story = {
   ...Standard,
   play: async (context) => {
+    const {canvasElement} = context;
+    const canvas = within(canvasElement);
     await StandardEmailFilled.play!(context);
-    await userEvent.type(screen.getByTestId('password1'), 'asdf');
-    await userEvent.click(screen.getByTestId('submit'));
+    await userEvent.type(canvas.getByTestId('password1'), 'asdf');
+    await userEvent.click(canvas.getByTestId('submit'));
   },
 };
 
 export const StandardFailHover: Story = {
   ...StandardPasswordFailed,
   play: async (context) => {
+    const {canvasElement} = context;
+    const canvas = within(canvasElement);
     await StandardPasswordFailed.play!(context);
     await sleep(100);
-    await userEvent.hover(screen.getByTestId('password-error-info'));
+    await userEvent.hover(canvas.getByTestId('password-error-info'));
   },
 };
 
@@ -62,19 +71,23 @@ export const Verification: Story = {
 export const VerificationPasssword1: Story = {
   ...Verification,
   play: async (context) => {
+    const {canvasElement} = context;
+    const canvas = within(canvasElement);
     await StandardEmailFilled.play!(context);
-    await userEvent.type(screen.getByTestId('password1'), 'asdfasdf');
-    await userEvent.click(screen.getByTestId('submit'));
+    await userEvent.type(canvas.getByTestId('password1'), 'asdfasdf');
+    await userEvent.click(canvas.getByTestId('submit'));
   },
 };
 
 export const VerificationPasswordMismatch: Story = {
   ...Verification,
   play: async (context) => {
+    const {canvasElement} = context;
+    const canvas = within(canvasElement);
     await StandardEmailFilled.play!(context);
-    await userEvent.type(screen.getByTestId('password1'), 'asdfasdf');
-    await userEvent.type(screen.getByTestId('password2'), 'asdf1234');
-    await userEvent.click(screen.getByTestId('submit'));
+    await userEvent.type(canvas.getByTestId('password1'), 'asdfasdf');
+    await userEvent.type(canvas.getByTestId('password2'), 'asdf1234');
+    await userEvent.click(canvas.getByTestId('submit'));
   },
 };
 
@@ -83,13 +96,15 @@ const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
 export const VerificationSuccess: Story = {
   ...Verification,
   play: async (context) => {
+    const {canvasElement} = context;
+    const canvas = within(canvasElement);
     await StandardEmailFilled.play!(context);
     await sleep(1000);
-    await userEvent.type(screen.getByTestId('password1'), 'asdfasdf', { delay: 50 });
+    await userEvent.type(canvas.getByTestId('password1'), 'asdfasdf', { delay: 50 });
     await sleep(1000);
-    await userEvent.type(screen.getByTestId('password2'), 'asdfasdf', { delay: 50 });
+    await userEvent.type(canvas.getByTestId('password2'), 'asdfasdf', { delay: 50 });
     await sleep(1000);
-    await userEvent.click(screen.getByTestId('submit'));
+    await userEvent.click(canvas.getByTestId('submit'));
   },
 };
 

example/src/components/Button.stories.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import { StoryFn as CSF2Story, StoryObj as CSF3Story, Meta, ComponentStoryObj } from '@storybook/react';
+import { StoryFn as CSF2Story, StoryObj as CSF3Story, Meta } from '@storybook/react';
 import { useArgs } from '@storybook/addons';
-import { screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { within, userEvent} from '@storybook/testing-library';
 
 import { Button, ButtonProps } from './Button';
 
@@ -81,8 +80,9 @@ export const InputFieldFilled: CSF3Story = {
   render: () => {
     return <input />;
   },
-  play: async (context) => {
-    await userEvent.type(screen.getByRole('textbox'), 'Hello world!');
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByRole('textbox'), 'Hello world!');
   },
 };