Build: Improve template stories

code/addons/interactions/template/stories/basics.stories.ts

@@ -47,24 +47,23 @@ export const Callback = {
 export const SyncWaitFor = {
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
-    await step('Setup', Callback.play);
-
+    await step('Submit form', Callback.play);
     await waitFor(() => canvas.getByText('Completed!!'));
   },
 };
 
 export const AsyncWaitFor = {
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
-    await step('Setup', Callback.play);
+    await step('Submit form', Callback.play);
     await waitFor(async () => canvas.getByText('Completed!!'));
   },
 };
 
 export const WaitForElementToBeRemoved = {
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
-    await step('Setup', SyncWaitFor.play);
+    await step('SyncWaitFor play fn', SyncWaitFor.play);
     await waitForElementToBeRemoved(() => canvas.queryByText('Completed!!'), {
       timeout: 2000,
     });
@@ -74,7 +73,7 @@ export const WaitForElementToBeRemoved = {
 export const WithLoaders = {
   loaders: [async () => new Promise((resolve) => setTimeout(resolve, 2000))],
   play: async ({ step }) => {
-    await step('Setup', Callback.play);
+    await step('Submit form', Callback.play);
   },
 };
 

code/addons/links/template/stories/decorator.stories.ts

@@ -13,7 +13,7 @@ export const Basic = {
   args: {
     content: `
       <div>
-        <a class="link" href="#" data-sb-story="basic">go to basic</a>
+        <a class="link" href="#" data-sb-story="other">go to other</a>
       </div>
     `,
   },
@@ -22,7 +22,7 @@ export const Other = {
   args: {
     content: `
       <div>
-        <a class="link" href="#" data-sb-story="basic">to to basic</a>
+        <a class="link" href="#" data-sb-story="third">go to third</a>
       </div>
     `,
   },
@@ -31,7 +31,7 @@ export const Third = {
   args: {
     content: `
       <div>
-        <a class="link" href="#" data-sb-story="other">go to other</a>
+        <a class="link" href="#" data-sb-story="basic">go to basic</a>
       </div>
     `,
   },

code/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap

@@ -53,6 +53,12 @@ exports[`Storyshots Another Button with text 1`] = `
 </Button>
 `;
 
+exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
+<AsyncTestComponent>
+  <h1 />
+</AsyncTestComponent>
+`;
+
 exports[`Storyshots Button With Text 1`] = `
 <Button
   onClick={[Function]}

code/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallow.test.js.snap

@@ -45,6 +45,12 @@ exports[`Storyshots Another Button with text 1`] = `
 </button>
 `;
 
+exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
+<h1>
+
+</h1>
+`;
+
 exports[`Storyshots Button With Text 1`] = `
 <button
   onClick={[Function]}

code/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallowWithOptions.test.js.snap

@@ -45,6 +45,12 @@ exports[`Storyshots Another Button with text 1`] = `
 </button>
 `;
 
+exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
+<h1>
+
+</h1>
+`;
+
 exports[`Storyshots Button With Text 1`] = `
 <button
   onClick={[Function]}

code/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap

@@ -45,6 +45,12 @@ exports[`Storyshots Another Button with text 1`] = `
 </button>
 `;
 
+exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
+<h1>
+
+</h1>
+`;
+
 exports[`Storyshots Button With Text 1`] = `
 <button
   onClick={[Function]}

code/addons/storyshots/storyshots-core/stories/required_with_context/Async.stories.js

@@ -27,7 +27,7 @@ class AsyncTestComponent extends React.Component {
 
 export default {
   title: 'Async',
-  includeStories: ['withTimeout'],
+  includeStories: ['WithTimeout'],
 };
 
 export const WithTimeout = () => <AsyncTestComponent />;

code/addons/viewport/template/stories/parameters.stories.ts

@@ -29,6 +29,7 @@ export const Selected = {
 export const Custom = {
   parameters: {
     viewport: {
+      defaultViewport: 'phone',
       viewports: {
         phone: {
           name: 'Phone Width',

code/examples/external-docs/components/AccountForm.stories.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable storybook/await-interactions */
 /* eslint-disable storybook/use-storybook-testing-library */
 // @TODO: use addon-interactions and remove the rule disable above
 import { ComponentStoryObj, ComponentMeta } from '@storybook/react';
@@ -15,21 +14,18 @@ export default {
   },
 } as ComponentMeta<typeof AccountForm>;
 
-// export const Standard = (args: any) => <AccountForm {...args} />;
-// Standard.args = { passwordVerification: false };
-// Standard.play = () => userEvent.type(screen.getByTestId('email'), '[email protected]');
+type Story = ComponentStoryObj<typeof AccountForm>;
 
-export const Standard: ComponentStoryObj<typeof AccountForm> = {
-  // render: (args: AccountFormProps) => <AccountForm {...args} />,
+export const Standard: Story = {
   args: { passwordVerification: false },
 };
 
-export const StandardEmailFilled = {
+export const StandardEmailFilled: Story = {
   ...Standard,
   play: () => userEvent.type(screen.getByTestId('email'), '[email protected]'),
 };
 
-export const StandardEmailFailed = {
+export const StandardEmailFailed: Story = {
   ...Standard,
   play: async () => {
     await userEvent.type(screen.getByTestId('email'), '[email protected]@com');
@@ -38,21 +34,21 @@ export const StandardEmailFailed = {
   },
 };
 
-export const StandardPasswordFailed = {
+export const StandardPasswordFailed: Story = {
   ...Standard,
-  play: async () => {
-    await StandardEmailFilled.play();
+  play: async (context) => {
+    await StandardEmailFilled.play(context);
     await userEvent.type(screen.getByTestId('password1'), 'asdf');
     await userEvent.click(screen.getByTestId('submit'));
   },
 };
 
 const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
 
-export const StandardFailHover = {
+export const StandardFailHover: Story = {
   ...StandardPasswordFailed,
-  play: async () => {
-    await StandardPasswordFailed.play();
+  play: async (context) => {
+    await StandardPasswordFailed.play(context);
     await sleep(100);
     await userEvent.hover(screen.getByTestId('password-error-info'));
   },
@@ -62,29 +58,29 @@ export const Verification: ComponentStoryObj<typeof AccountForm> = {
   args: { passwordVerification: true },
 };
 
-export const VerificationPasssword1 = {
+export const VerificationPasssword1: Story = {
   ...Verification,
-  play: async () => {
-    await StandardEmailFilled.play();
+  play: async (context) => {
+    await StandardEmailFilled.play(context);
     await userEvent.type(screen.getByTestId('password1'), 'asdfasdf');
     await userEvent.click(screen.getByTestId('submit'));
   },
 };
 
-export const VerificationPasswordMismatch = {
+export const VerificationPasswordMismatch: Story = {
   ...Verification,
-  play: async () => {
-    await StandardEmailFilled.play();
+  play: async (context) => {
+    await StandardEmailFilled.play(context);
     await userEvent.type(screen.getByTestId('password1'), 'asdfasdf');
     await userEvent.type(screen.getByTestId('password2'), 'asdf1234');
     await userEvent.click(screen.getByTestId('submit'));
   },
 };
 
-export const VerificationSuccess = {
+export const VerificationSuccess: Story = {
   ...Verification,
-  play: async () => {
-    await StandardEmailFilled.play();
+  play: async (context) => {
+    await StandardEmailFilled.play(context);
     await sleep(1000);
     await userEvent.type(screen.getByTestId('password1'), 'asdfasdf', { delay: 50 });
     await sleep(1000);

code/package.json

@@ -279,7 +279,7 @@
     "eslint": "^7.17.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-react": "^7.22.0",
-    "eslint-plugin-storybook": "^0.3.5",
+    "eslint-plugin-storybook": "^0.6.4",
     "esm": "^3.2.25",
     "execa": "^5.0.0",
     "express": "^4.17.1",

code/yarn.lock

@@ -8551,7 +8551,7 @@ __metadata:
     eslint: ^7.17.0
     eslint-plugin-import: ^2.22.1
     eslint-plugin-react: ^7.22.0
-    eslint-plugin-storybook: ^0.3.5
+    eslint-plugin-storybook: ^0.6.4
     esm: ^3.2.25
     execa: ^5.0.0
     express: ^4.17.1
@@ -19373,16 +19373,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-storybook@npm:^0.3.5":
-  version: 0.3.5
-  resolution: "eslint-plugin-storybook@npm:0.3.5"
+"eslint-plugin-storybook@npm:^0.6.4":
+  version: 0.6.4
+  resolution: "eslint-plugin-storybook@npm:0.6.4"
   dependencies:
     "@storybook/csf": ^0.0.1
     "@typescript-eslint/experimental-utils": ^5.3.0
     requireindex: ^1.1.0
+    ts-dedent: ^2.2.0
   peerDependencies:
     eslint: ">=6"
-  checksum: 2fef77dc26aa395cf304c53cacd35bae7f677192eb1f681439c2a0154e57b99d376948e0918e4bb7b3c8ca01358aedbbf7bb5bc3b428b37141599abbdd763580
+  checksum: c7fcdb663ae3e064b78d743b880545a7dc44d36368e72b1535706401cba65430cd41b5b7d4aa089bb6aab10357a9dcb894d4469fd1b546a043b9078587270f85
   languageName: node
   linkType: hard
 

scripts/package.json

@@ -114,7 +114,7 @@
     "eslint": "^7.17.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-react": "^7.22.0",
-    "eslint-plugin-storybook": "^0.3.5",
+    "eslint-plugin-storybook": "^0.6.4",
     "execa": "^5.0.0",
     "express": "^4.17.1",
     "find-up": "^5.0.0",

scripts/yarn.lock

@@ -3401,7 +3401,7 @@ __metadata:
     eslint: ^7.17.0
     eslint-plugin-import: ^2.22.1
     eslint-plugin-react: ^7.22.0
-    eslint-plugin-storybook: ^0.3.5
+    eslint-plugin-storybook: ^0.6.4
     execa: ^5.0.0
     express: ^4.17.1
     find-up: ^5.0.0
@@ -8529,16 +8529,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-storybook@npm:^0.3.5":
-  version: 0.3.5
-  resolution: "eslint-plugin-storybook@npm:0.3.5"
+"eslint-plugin-storybook@npm:^0.6.4":
+  version: 0.6.4
+  resolution: "eslint-plugin-storybook@npm:0.6.4"
   dependencies:
     "@storybook/csf": ^0.0.1
     "@typescript-eslint/experimental-utils": ^5.3.0
     requireindex: ^1.1.0
+    ts-dedent: ^2.2.0
   peerDependencies:
     eslint: ">=6"
-  checksum: 2fef77dc26aa395cf304c53cacd35bae7f677192eb1f681439c2a0154e57b99d376948e0918e4bb7b3c8ca01358aedbbf7bb5bc3b428b37141599abbdd763580
+  checksum: c7fcdb663ae3e064b78d743b880545a7dc44d36368e72b1535706401cba65430cd41b5b7d4aa089bb6aab10357a9dcb894d4469fd1b546a043b9078587270f85
   languageName: node
   linkType: hard