Merge pull request #35 from storybookjs/chore/add-csf3-example

chore: add example stories using CSF 3 [skip ci]

Author: yannbf

example/.storybook/main.js

@@ -0,0 +1,12 @@
+import type { StorybookConfig } from '@storybook/react/types';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.tsx'],
+  logLevel: 'debug',
+  addons: ['@storybook/preset-create-react-app', '@storybook/addon-essentials'],
+  features: {
+    previewCsfV3: true,
+  },
+};
+
+module.exports = config;

example/.storybook/main.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Story } from '@storybook/react';
+import type { Story } from '@storybook/react';
+import { ThemeProvider, convert, themes } from '@storybook/theming';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' }
@@ -12,6 +13,11 @@ export const decorators = [
       <StoryFn />
     </>
   ),
+  (StoryFn: Story) => (
+    <ThemeProvider theme={convert(themes.light)}>
+      <StoryFn />
+    </ThemeProvider>
+  ),
 ];
 
 export const globalTypes = {

example/.storybook/preview.tsx

@@ -27,16 +27,20 @@
     "@types/node": "14.14.20",
     "@types/react": "^16.14.2",
     "@types/react-dom": "16.9.10",
+    "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"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^6.1.21",
-    "@storybook/react": "^6.1.21",
+    "@storybook/addon-essentials": "^6.4.0-alpha.12",
+    "@storybook/react": "^6.4.0-alpha.12",
+    "@storybook/components": "^6.4.0-alpha.12",
+    "@storybook/theming": "^6.4.0-alpha.12",
     "@storybook/preset-create-react-app": "^3.1.5",
-    "@testing-library/react": "^11.2.5"
+    "@testing-library/react": "^11.2.5",
+    "@testing-library/user-event": "^13.1.9"
   }
 }

example/package.json

@@ -0,0 +1,97 @@
+import React from 'react';
+import type { ComponentMeta } from '@storybook/react';
+import { screen } from '@testing-library/dom';
+import userEvent from '@testing-library/user-event';
+
+import { AccountForm, AccountFormProps } from './AccountForm';
+
+export default {
+  title: 'CSF3/AccountForm',
+  component: AccountForm,
+  parameters: {
+    layout: 'centered',
+  },
+} as ComponentMeta<typeof AccountForm>;
+
+
+export const Standard = {
+  args: { passwordVerification: false },
+};
+
+export const StandardEmailFilled = {
+  ...Standard,
+  play: () => userEvent.type(screen.getByTestId('email'), 'michael@chromatic.com'),
+};
+
+export const StandardEmailFailed = {
+  ...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'));
+  },
+};
+
+export const StandardPasswordFailed = {
+  ...Standard,
+  play: async () => {
+    await StandardEmailFilled.play();
+    await userEvent.type(screen.getByTestId('password1'), 'asdf');
+    await userEvent.click(screen.getByTestId('submit'));
+  },
+};
+
+export const StandardFailHover = {
+  ...StandardPasswordFailed,
+  play: async () => {
+    await StandardPasswordFailed.play();
+    await sleep(100);
+    await userEvent.hover(screen.getByTestId('password-error-info'));
+  },
+};
+
+export const Verification = {
+  args: { passwordVerification: true },
+};
+
+export const VerificationPasssword1 = {
+  ...Verification,
+  play: async () => {
+    await StandardEmailFilled.play();
+    await userEvent.type(screen.getByTestId('password1'), 'asdfasdf');
+    await userEvent.click(screen.getByTestId('submit'));
+  },
+};
+
+export const VerificationPasswordMismatch = {
+  ...Verification,
+  play: async () => {
+    await StandardEmailFilled.play();
+    await userEvent.type(screen.getByTestId('password1'), 'asdfasdf');
+    await userEvent.type(screen.getByTestId('password2'), 'asdf1234');
+    await userEvent.click(screen.getByTestId('submit'));
+  },
+};
+
+const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
+
+export const VerificationSuccess = {
+  ...Verification,
+  play: async () => {
+    await StandardEmailFilled.play();
+    await sleep(1000);
+    await userEvent.type(screen.getByTestId('password1'), 'asdfasdf', { delay: 50 });
+    await sleep(1000);
+    await userEvent.type(screen.getByTestId('password2'), 'asdfasdf', { delay: 50 });
+    await sleep(1000);
+    await userEvent.click(screen.getByTestId('submit'));
+  },
+};
+
+export const StandardWithRenderFunction = {
+  ...Standard,
+  render: (args: AccountFormProps) => (<div>
+    <p>This uses a custom render</p>
+    <AccountForm {...args} />
+  </div>),
+};