Support Storybook 7.0

.vscode/settings.json

@@ -7,5 +7,6 @@
   "prettier.printWidth": 100,
   "editor.formatOnSave": true,
   "editor.tabSize": 2,
-  "deepscan.enable": true
+  "deepscan.enable": true,
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

CONTRIBUTING.md

@@ -0,0 +1,13 @@
+## Branch structure
+
+- **next** - the `next` version on npm, and the development branch where most work occurs
+- **prerelease** - the `prerelease` version on npm, where eventual changes to `main` get tested
+- **main** - the `latest` version on npm and the stable version that most users use
+
+## Release process
+
+1. All PRs should target the `next` branch, which depends on the `next` version of Storybook.
+2. When merged, a new version of this package will be released on the `next` NPM tag.
+3. If the change contains a bugfix that needs to be patched back to the stable version, please note that in PR description.
+4. PRs labeled `pick` will get cherry-picked back to the `prerelease` branch and will generate a release on the `prerelease` npm tag.
+5. Once validated, `prerelease` PRs will get merged back to the `main` branch, which will generate a release on the `latest` npm tag.

README.md

@@ -59,10 +59,10 @@ If you have global decorators/parameters/etc and want them applied to your stori
 
 ```tsx
 // setupFile.js <-- this will run before the tests in jest.
-import { setGlobalConfig } from '@storybook/testing-react';
+import { setProjectAnnotations } from '@storybook/testing-react';
 import * as globalStorybookConfig from './.storybook/preview'; // path of your preview.js file
 
-setGlobalConfig(globalStorybookConfig);
+setProjectAnnotations(globalStorybookConfig);
 ```
 
 For the setup file to be picked up, you need to pass it as an option to jest in your test command:

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/.storybook/preview.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import type { DecoratorFn } from '@storybook/react';
+import type { Decorator } from '@storybook/react';
 import { ThemeProvider, convert, themes } from '@storybook/theming';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' }
 }
 
-export const decorators: DecoratorFn[] = [
+export const decorators: Decorator[] = [
   (StoryFn, { globals: { locale } }) => (
     <>
       <div>Locale: {locale}</div>

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,29 @@
     ]
   },
   "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.62",
+    "@storybook/addon-interactions": "7.0.0-alpha.62",
+    "@storybook/components": "7.0.0-alpha.62",
+    "@storybook/preset-create-react-app": "^4.1.2",
+    "@storybook/react": "7.0.0-alpha.62",
+    "@storybook/react-webpack5": "7.0.0-alpha.62",
+    "@storybook/testing-library": "^0.0.14-next.0",
+    "@storybook/theming": "7.0.0-alpha.62",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/user-event": "^13.1.9",
+    "storybook": "7.0.0-alpha.62",
+    "type-fest": "^3.3.0"
   }
-}
+}

example/setup.ts

@@ -1,4 +1,4 @@
-import { setGlobalConfig } from '../dist/index';
+import { setProjectAnnotations } from '../dist/index';
 import * as globalStorybookConfig from './.storybook/preview';
 
-setGlobalConfig(globalStorybookConfig);
+setProjectAnnotations(globalStorybookConfig);

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'), 'michael@chromatic.com'),
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByTestId('email'), 'michael@chromatic.com');
+  }
 };
 
 export const StandardEmailFailed: Story = {
   ...Standard,
-  play: async () => {
-    await userEvent.type(screen.getByTestId('email'), 'michael@chromatic.com.com@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'), 'michael@chromatic.com.com@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!');
   },
 };
 

example/tsconfig.json

@@ -30,6 +30,6 @@
     "noEmit": true
   },
   "include": [
-    "src"
+    "src", "../../dist"
   ]
 }