Merge pull request #16662 from storybookjs/feature/eslint-plugin-test

Build: Add eslint-plugin-storybook to the repo

.eslintrc.js

@@ -1,6 +1,6 @@
 module.exports = {
   root: true,
-  extends: ['@storybook/eslint-config-storybook'],
+  extends: ['@storybook/eslint-config-storybook', 'plugin:storybook/recommended'],
   rules: {
     '@typescript-eslint/ban-ts-comment': 'warn',
   },

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

@@ -53,12 +53,6 @@ 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]}

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

@@ -45,12 +45,6 @@ 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]}

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

@@ -45,12 +45,6 @@ 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]}

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

@@ -45,12 +45,6 @@ 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]}

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

@@ -30,5 +30,5 @@ export default {
   includeStories: ['withTimeout'],
 };
 
-export const withTimeout = () => <AsyncTestComponent />;
-withTimeout.storyName = `with ${TIMEOUT}ms timeout simulating async operation`;
+export const WithTimeout = () => <AsyncTestComponent />;
+WithTimeout.storyName = `with ${TIMEOUT}ms timeout simulating async operation`;

addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js

@@ -11,14 +11,14 @@ export default {
   },
 };
 
-export const withText = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+export const WithText = () => <Button onClick={action('clicked')}>Hello Button</Button>;
 
-export const withSomeEmoji = () => (
+export const WithSomeEmoji = () => (
   <Button onClick={action('clicked')}>
     <span role="img" aria-label="so cool">
       😀 😎 👍 💯
     </span>
   </Button>
 );
 
-withSomeEmoji.storyName = 'with some emoji';
+WithSomeEmoji.storyName = 'with some emoji';

addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js

@@ -11,6 +11,6 @@ export default {
   },
 };
 
-export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;
+export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
 
-toStorybook.storyName = 'to Storybook';
+ToStorybook.storyName = 'to Storybook';

examples/angular-cli/src/stories/addons/interactions/addon-interactions.stories.ts

@@ -1,6 +1,9 @@
+/* eslint-disable storybook/use-storybook-testing-library */
+// @TODO: use addon-interactions and remove the rule disable above
 import { Story, Meta } from '@storybook/angular';
 import { expect } from '@storybook/jest';
-import { within, userEvent } from '@storybook/testing-library';
+import { within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { CounterComponent } from './counter/counter.component';
 

examples/angular-cli/src/stories/basics/component-with-pipe/custom-pipes.stories.ts

@@ -19,8 +19,6 @@ export const Simple: Story = () => ({
   },
 });
 
-Simple.storyName = 'Simple';
-
 export const WithArgsStory: Story = (args) => ({
   props: args,
 });

examples/angular-cli/src/stories/core/parameters/bootstrap-options.stories.ts

@@ -20,5 +20,3 @@ export default {
 } as Meta;
 
 export const WithPreserveWhitespaces: Story = (_args) => ({});
-
-WithPreserveWhitespaces.storyName = 'With Preserve Whitespaces';

examples/angular-cli/src/stories/preview/csf3/input-with-play.stories.ts

@@ -1,3 +1,6 @@
+/* eslint-disable storybook/await-interactions */
+/* eslint-disable storybook/use-storybook-testing-library */
+// @TODO: use addon-interactions and remove the rule disable above
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { InputComponent } from './sb-input.component';
@@ -26,7 +29,7 @@ export const WithTemplate = {
     template: '<h1>Heading</h1><sb-input></sb-input>',
   }),
   play: async () => {
-    const input = await screen.getByAltText('sb-input');
-    await userEvent.type(input, `Typing from CSF3`);
+    const input = screen.getByAltText('sb-input');
+    userEvent.type(input, `Typing from CSF3`);
   },
 };

examples/angular-cli/src/stories/welcome-angular.stories.ts

@@ -6,7 +6,7 @@ export default {
   title: 'Welcome/ To Angular',
 } as Meta;
 
-export const toAngular: Story = () => ({
+export const ToAngular: Story = () => ({
   component: AppComponent,
   props: {
     showApp: linkTo('Button'),

examples/angular-cli/src/stories/welcome-storybook.stories.ts

@@ -6,7 +6,7 @@ export default {
   title: 'Welcome/ To Storybook',
 } as Meta;
 
-export const toStorybook: Story = () => ({
+export const ToStorybook: Story = () => ({
   component: Welcome,
   props: {
     showApp: linkTo('Button'),

examples/cra-ts-essentials/src/stories/0-Welcome.stories.tsx

@@ -7,6 +7,6 @@ export default {
   component: Welcome,
 };
 
-export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;
+export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
 
-toStorybook.storyName = 'to Storybook';
+ToStorybook.storyName = 'to Storybook';

examples/ember-cli/stories/polyfill-example.stories.js

@@ -4,7 +4,7 @@ export default {
   title: 'EmberOptions/Polyfills',
 };
 
-export const namedBlockExample = () => {
+export const NamedBlockExample = () => {
   return {
     template: hbs`
       <NamedBlock

examples/official-storybook/stories/addon-a11y/base-button.stories.js

@@ -22,9 +22,9 @@ export const InvalidContrast = () => (
 );
 InvalidContrast.storyName = 'Invalid contrast';
 
-export const delayedRender = () => (
+export const DelayedRenderStory = () => (
   <DelayedRender>
     <BaseButton label="This button has a delayed render of 1s" />
   </DelayedRender>
 );
-delayedRender.storyName = 'delayed render';
+DelayedRenderStory.storyName = 'delayed render';

examples/official-storybook/stories/addon-a11y/form.stories.js

@@ -17,7 +17,6 @@ export const WithoutLabel = () => (
     <Form.Input />
   </Form.Field>
 );
-WithoutLabel.storyName = 'Without Label';
 
 export const WithLabel = () => (
   <Form.Field label={text}>

examples/official-storybook/stories/addon-actions.stories.js

@@ -77,8 +77,6 @@ export const CircularPayload = () => {
   return <Button onClick={() => action('circular')(circular)}>Circular Payload</Button>;
 };
 
-CircularPayload.storyName = 'Circular Payload';
-
 export const ReservedKeywordAsName = () => <Button onClick={action('delete')}>Delete</Button>;
 
 ReservedKeywordAsName.storyName = 'Reserved keyword as name';
@@ -186,7 +184,6 @@ export const LimitActionOutput = () => {
     </Fragment>
   );
 };
-LimitActionOutput.storyName = 'Limit Action Output';
 
 export const SkippedViaDisableTrue = () => (
   <Button onClick={action('hello-world')}>Hello World</Button>

examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js

@@ -23,11 +23,11 @@ export default {
   },
 };
 
-export const defDocsPage = () => <div>Default docs page</div>;
+export const DefDocsPage = () => <div>Default docs page</div>;
 
-export const smallDocsPage = () => <div>Just primary story, </div>;
+export const SmallDocsPage = () => <div>Just primary story, </div>;
 
-smallDocsPage.parameters = {
+SmallDocsPage.parameters = {
   docs: {
     page: () => (
       <>
@@ -38,9 +38,9 @@ smallDocsPage.parameters = {
   },
 };
 
-export const checkBoxProps = () => <div>Primary props displayed with a check box </div>;
+export const CheckBoxProps = () => <div>Primary props displayed with a check box </div>;
 
-checkBoxProps.parameters = {
+CheckBoxProps.parameters = {
   docs: {
     page: () => {
       const [showProps, setShowProps] = React.useState(false);
@@ -61,9 +61,9 @@ checkBoxProps.parameters = {
   },
 };
 
-export const customLabels = () => <div>Display custom title, Subtitle, Description</div>;
+export const CustomLabels = () => <div>Display custom title, Subtitle, Description</div>;
 
-customLabels.parameters = {
+CustomLabels.parameters = {
   docs: {
     page: () => (
       <>
@@ -78,25 +78,25 @@ customLabels.parameters = {
   },
 };
 
-export const customStoriesFilter = () => <div>Displays ALL stories (not excluding first one)</div>;
+export const CustomStoriesFilter = () => <div>Displays ALL stories (not excluding first one)</div>;
 
-customStoriesFilter.parameters = {
+CustomStoriesFilter.parameters = {
   docs: {
     page: () => <Stories includePrimary />,
   },
 };
 
-export const multipleComponents = () => (
+export const MultipleComponents = () => (
   <ButtonGroup>
     <DocgenButton label="one" />
     <DocgenButton label="two" />
     <DocgenButton label="three" />
   </ButtonGroup>
 );
 
-multipleComponents.storyName = 'Many Components';
+MultipleComponents.storyName = 'Many Components';
 
-multipleComponents.parameters = {
+MultipleComponents.parameters = {
   component: ButtonGroup,
   subcomponents: {
     SubGroup,
@@ -116,14 +116,14 @@ multipleComponents.parameters = {
   },
 };
 
-export const componentsProps = () => <div>Display multiple prop tables in tabs</div>;
+export const ComponentsProps = () => <div>Display multiple prop tables in tabs</div>;
 
-componentsProps.subcomponents = {
+ComponentsProps.subcomponents = {
   'Docgen Button': DocgenButton,
   'Base Button': BaseButton,
 };
 
-componentsProps.parameters = {
+ComponentsProps.parameters = {
   docs: {
     page: () => (
       <>

examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.js

@@ -1,3 +1,4 @@
+/* eslint-disable storybook/default-exports */
 import React from 'react';
 import { Button } from '@storybook/react/demo';
 

examples/official-storybook/stories/addon-docs/dynamic-title.stories.js

@@ -6,4 +6,4 @@ export default {
   title: 'Addons/Docs/dynamic title',
 };
 
-export const basic = () => 'Story with title that is evaluated in runtime';
+export const Basic = () => 'Story with title that is evaluated in runtime';

examples/official-storybook/stories/addon-docs/memo.stories.js

@@ -10,5 +10,5 @@ export default {
   },
 };
 
-export const displaysCorrectly = () => <MemoButton label="Hello memo World" />;
-displaysCorrectly.storyName = 'Displays components with memo correctly';
+export const DisplaysCorrectly = () => <MemoButton label="Hello memo World" />;
+DisplaysCorrectly.storyName = 'Displays components with memo correctly';

examples/official-storybook/stories/addon-docs/transform-source.stories.js

@@ -9,17 +9,17 @@ export default {
   },
 };
 
-export const code = () => 'StoryType "CODE" story which has source transformed';
-code.parameters = {
+export const Code = () => 'StoryType "CODE" story which has source transformed';
+Code.parameters = {
   docs: { source: { type: 'code' } },
 };
 
-export const dynamic = () => 'StoryType "DYNAMIC" story which has source transformed';
-dynamic.parameters = {
+export const Dynamic = () => 'StoryType "DYNAMIC" story which has source transformed';
+Dynamic.parameters = {
   docs: { source: { type: 'dynamic' } },
 };
 
-export const auto = () => 'StoryType "AUTO" story which has source transformed';
-dynamic.parameters = {
+export const Auto = () => 'StoryType "AUTO" story which has source transformed';
+Dynamic.parameters = {
   docs: { source: { type: 'auto' } },
 };

examples/official-storybook/stories/addon-storyshots.stories.js

@@ -1,7 +1,9 @@
+/* eslint-disable storybook/use-storybook-expect */
+/* eslint-disable storybook/await-interactions */
 import React, { useState } from 'react';
 import { styled } from '@storybook/theming';
 
-const Block = styled.div({
+const BlockDiv = styled.div({
   display: 'inline-block',
   height: 400,
   width: 400,
@@ -12,18 +14,22 @@ export default {
   title: 'Addons/Storyshots',
 };
 
-export const block = () => {
+export const Block = () => {
   const [hover, setHover] = useState(false);
 
   return (
-    <Block data-test-block onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
+    <BlockDiv
+      data-test-block
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+    >
       {hover && 'I am hovered'}
-    </Block>
+    </BlockDiv>
   );
 };
-block.storyName = 'Block story';
+Block.storyName = 'Block story';
 
-block.parameters = {
+Block.parameters = {
   async puppeteerTest(page) {
     const element = await page.$('[data-test-block]');
     await element.hover();