Build: Add eslint-plugin-storybook to the repo

.eslintrc.js

@@ -1,10 +1,20 @@
 module.exports = {
   root: true,
   extends: ['@storybook/eslint-config-storybook'],
+  plugins: ['storybook'],
   rules: {
     '@typescript-eslint/ban-ts-comment': 'warn',
   },
   overrides: [
+    {
+      files: ['*/**/*.stories.@(js|jsx|ts|tsx)'],
+      extends: ['plugin:storybook/recommended'],
+
+      // 4) Optional: you can override specific rules here
+      rules: {
+        'storybook/no-redundant-story-name': 'warn',
+      },
+    },
     {
       files: [
         '**/__tests__/**',

addons/docs/src/frameworks/react/react-argtypes.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable storybook/default-exports */
 import React, { useState } from 'react';
 import mapValues from 'lodash/mapValues';
 import { storiesOf, StoryContext } from '@storybook/react';

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';

docs/workflows/storybook-composition.md

@@ -64,7 +64,7 @@ You can also compose Storybooks based on the current development environment. Fo
 
 ### Improve your Storybook composition
 
-So far we've covered how we can use composition with local or published Storybooks. One thing worth mentioning as your Storybook will grow in time with your own stories, or through composition with other Storybooks, is that you can optimize the deployment process by including the following command in your workflow:
+So far we've covered how we can use composition with local or published Storybooks. One thing worth mentioning as your Storybook will grow in time with your own stories, or through composition with other Storybooks, is that you can optimize the deployment process by including the following command in your workflow, run from your project root:
 
 ```shell
 npx sb extract

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/legacy/storiesOf.stories.ts

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

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

@@ -1,5 +1,4 @@
-import { screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { screen, userEvent, within } from '@storybook/testing-library';
 import { InputComponent } from './sb-input.component';
 
 export default {
@@ -25,8 +24,8 @@ export const WithTemplate = {
     props,
     template: '<h1>Heading</h1><sb-input></sb-input>',
   }),
-  play: async () => {
-    const input = await screen.getByAltText('sb-input');
+  play: async ({ canvasElement }) => {
+    const input = within(canvasElement).getByAltText('sb-input');
     await 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-react15/src/stories/welcome.stories.js

@@ -1,3 +1,4 @@
+/* eslint-disable storybook/default-exports */
 import React from 'react';
 import { storiesOf, setAddon } from '@storybook/react';
 import { linkTo } from '@storybook/addon-links';

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();

examples/official-storybook/stories/core/errors.stories.js

@@ -17,15 +17,15 @@ Exception.parameters = {
   chromatic: { disable: true },
 };
 
-export const badComponent = () => (
+export const BadComponentStory = () => (
   <Fragment>
     <div>Hello world</div>
     <BadComponent />
   </Fragment>
 );
-badComponent.storyName = 'story errors - invariant error';
+BadComponentStory.storyName = 'story errors - invariant error';
 
-badComponent.parameters = {
+BadComponentStory.parameters = {
   storyshots: { disable: true },
   chromatic: { disable: true },
 };

examples/official-storybook/stories/core/prefix.stories.js

@@ -7,5 +7,5 @@ export default {
 
 const Template = () => 'Story';
 
-export const prefixAndName = Template.bind({});
-export const prefix = Template.bind({});
+export const PrefixAndName = Template.bind({});
+export const Prefix = Template.bind({});

examples/official-storybook/stories/core/unicode.stories.js

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