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,9 +11,9 @@ 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">
       😀 😎 👍 💯
@@ -21,4 +21,4 @@ export const withSomeEmoji = () => (
   </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-kitchen-sink/src/stories/cra-svgr.stories.js

@@ -1,7 +0,0 @@
-// FIXME: @igor-dv
-
-// import React from 'react';
-// import { storiesOf } from '@storybook/react';
-// import { ReactComponent as Logo } from '../logo.svg';
-//
-// storiesOf('CRA', module).add('Svgr', () => <Logo />);

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,15 +78,15 @@ 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" />
@@ -94,9 +94,9 @@ export const multipleComponents = () => (
   </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/demo/setup.stories.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable storybook/use-storybook-testing-library */
+// @TODO: use addon-interactions and remove the rule disable above
 import React from 'react';
 import { screen } from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';

examples/official-storybook/stories/other-dirname.stories.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import base from 'paths.macro';
-
-import BaseButton from '../components/BaseButton';
-
-export const story1 = () => <BaseButton label="Story 1" />;
-story1.storyName = 'story 1';
-
-export const story2 = () => <BaseButton label="Story 2" />;
-story2.storyName = 'story 2';

examples/react-ts/src/AccountForm.stories.tsx

@@ -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 React from 'react';
 import { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 import { screen } from '@testing-library/dom';

examples/react-ts/src/button.stories.tsx

@@ -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 React from 'react';
 import { Meta, ComponentStory } from '@storybook/react';
 import { screen } from '@testing-library/dom';

examples/vue-kitchen-sink/src/stories/components/app.stories.js

@@ -8,7 +8,7 @@ export default {
   },
 };
 
-export const app = () => ({
+export const Default = () => ({
   render: (h) => h(App),
 });
-app.storyName = 'App';
+Default.storyName = 'App';

examples/vue-kitchen-sink/src/stories/components/welcome.stories.js

@@ -7,8 +7,9 @@ export default {
   component: Welcome,
 };
 
-export const welcome = () => {
+export const WelcomeStory = () => {
   return {
     render: (h) => h(Welcome, { listeners: { buttonRequested: linkTo('Button') } }),
   };
 };
+WelcomeStory.storyName = 'Welcome';

examples/vue-kitchen-sink/src/stories/core-errors.stories.js

@@ -3,9 +3,9 @@ export default {
   parameters: { chromatic: { disable: true } },
 };
 
-export const throwsError = () => {
+export const ThrowsError = () => {
   throw new Error('foo');
 };
-throwsError.parameters = { storyshots: { disable: true } };
+ThrowsError.parameters = { storyshots: { disable: true } };
 
-export const nullError = () => null;
+export const NullError = () => null;

examples/web-components-kitchen-sink/src/stories/misc/script/script.stories.ts

@@ -4,14 +4,14 @@ export default {
   title: 'Misc. / Script Tag',
 };
 
-export const inTemplate = () => html`
+export const InTemplate = () => html`
   <div>JS alert</div>
   <script>
     alert('hello');
   </script>
 `;
 
-export const inString = () => '<div>JS alert</div><script>alert("hello")</script>';
+export const InString = () => '<div>JS alert</div><script>alert("hello")</script>';
 
-export const typeModule = () =>
+export const TypeModule = () =>
   '<div>JS alert from module</div><script type="module">alert("hello from module"); export const a = 1;</script>';

lib/components/src/ActionBar/ActionBar.stories.tsx

@@ -28,9 +28,9 @@ export default {
   ],
 };
 
-export const singleItem = () => <ActionBar actionItems={[{ title: 'Clear', onClick: action1 }]} />;
+export const SingleItem = () => <ActionBar actionItems={[{ title: 'Clear', onClick: action1 }]} />;
 
-export const manyItems = () => (
+export const ManyItems = () => (
   <ActionBar
     actionItems={[
       { title: 'Action string', onClick: action1 },

lib/components/src/ScrollArea/ScrollArea.stories.tsx

@@ -39,7 +39,7 @@ export default {
   decorators: [(storyFn: () => any) => <Wrapper>{storyFn()}</Wrapper>],
 };
 
-export const vertical = () => (
+export const Vertical = () => (
   <ScrollArea vertical>
     {list((i) => (
       <Fragment key={i}>
@@ -50,7 +50,7 @@ export const vertical = () => (
   </ScrollArea>
 );
 
-export const horizontal = () => (
+export const Horizontal = () => (
   <ScrollArea horizontal>
     {list((i) => (
       <Block key={i}>{i}</Block>
@@ -58,7 +58,7 @@ export const horizontal = () => (
   </ScrollArea>
 );
 
-export const both = () => (
+export const Both = () => (
   <ScrollArea horizontal vertical>
     {list((i) => (
       <Fragment key={i}>
@@ -71,7 +71,7 @@ export const both = () => (
   </ScrollArea>
 );
 
-export const withOuterBorder = () => (
+export const WithOuterBorder = () => (
   <ScrollArea horizontal vertical>
     <div
       style={{

lib/components/src/Zoom/Zoom.stories.tsx

@@ -26,23 +26,23 @@ const EXAMPLE_ELEMENT = (
 
 const TemplateElement = (args) => <Zoom.Element {...args} />;
 
-export const elementActualSize = TemplateElement.bind({});
+export const ElementActualSize = TemplateElement.bind({});
 
-elementActualSize.args = {
+ElementActualSize.args = {
   scale: 1,
   children: EXAMPLE_ELEMENT,
 };
 
-export const elementZoomedIn = TemplateElement.bind({});
+export const ElementZoomedIn = TemplateElement.bind({});
 
-elementZoomedIn.args = {
+ElementZoomedIn.args = {
   scale: 0.7,
   children: EXAMPLE_ELEMENT,
 };
 
-export const elementZoomedOut = TemplateElement.bind({});
+export const ElementZoomedOut = TemplateElement.bind({});
 
-elementZoomedOut.args = {
+ElementZoomedOut.args = {
   scale: 3,
   children: EXAMPLE_ELEMENT,
 };
@@ -78,37 +78,37 @@ const TemplateIFrame = (args) => {
     </Zoom.IFrame>
   );
 };
-export const iFrameActualSize = TemplateIFrame.bind({});
+export const IFrameActualSize = TemplateIFrame.bind({});
 
-iFrameActualSize.args = {
+IFrameActualSize.args = {
   scale: 1,
   active: true,
 };
 
 // The iFrame stories are disabled because useGlobals works in practice
 // but, for some reason breaks in the stories for Zoom.iFrame
-iFrameActualSize.parameters = {
+IFrameActualSize.parameters = {
   chromatic: { disableSnapshot: true },
 };
 
-export const iFrameZoomedIn = TemplateIFrame.bind({});
+export const IFrameZoomedIn = TemplateIFrame.bind({});
 
-iFrameZoomedIn.args = {
+IFrameZoomedIn.args = {
   scale: 0.7,
   active: true,
 };
 
-iFrameZoomedIn.parameters = {
+IFrameZoomedIn.parameters = {
   chromatic: { disableSnapshot: true },
 };
 
-export const iFrameZoomedOut = TemplateIFrame.bind({});
+export const IFrameZoomedOut = TemplateIFrame.bind({});
 
-iFrameZoomedOut.args = {
+IFrameZoomedOut.args = {
   scale: 3,
   active: true,
 };
 
-iFrameZoomedOut.parameters = {
+IFrameZoomedOut.parameters = {
   chromatic: { disableSnapshot: true },
 };

lib/components/src/bar/button.stories.tsx

@@ -8,7 +8,7 @@ export default {
   title: 'Basics/IconButton',
 };
 
-// eslint-disable-next-line no-underscore-dangle
+/* eslint-disable-next-line no-underscore-dangle */
 export const _IconButton = () => (
   <IconButton>
     <Icons icon="bookmark" />

lib/components/src/blocks/ColorPalette.stories.tsx

@@ -6,7 +6,7 @@ export default {
   component: ColorPalette,
 };
 
-export const defaultStyle = () => (
+export const DefaultStyle = () => (
   <ColorPalette>
     <ColorItem
       title="theme.color.greyscale"

lib/components/src/blocks/EmptyBlock.stories.tsx

@@ -6,4 +6,4 @@ export default {
   component: EmptyBlock,
 };
 
-export const error = () => <EmptyBlock>Generic error message</EmptyBlock>;
+export const Error = () => <EmptyBlock>Generic error message</EmptyBlock>;

lib/components/src/blocks/IconGallery.stories.tsx

@@ -8,7 +8,7 @@ export default {
   component: IconGallery,
 };
 
-export const defaultStyle = () => (
+export const DefaultStyle = () => (
   <IconGallery>
     <IconItem name="add">
       <ExampleIcon icon="add" />

lib/components/src/blocks/Typeset.stories.tsx

@@ -10,9 +10,9 @@ const fontSizes = ['12px', '14px', '16px', '20px', '24px', '32px', '40px', '48px
 const fontWeight = 900;
 const fontFamily = 'monospace';
 
-export const withFontSizes = () => <Typeset fontSizes={fontSizes} />;
-export const withFontWeight = () => <Typeset fontSizes={fontSizes} fontWeight={fontWeight} />;
-export const withFontFamily = () => <Typeset fontSizes={fontSizes} fontFamily={fontFamily} />;
-export const withWeightText = () => (
+export const WithFontSizes = () => <Typeset fontSizes={fontSizes} />;
+export const WithFontWeight = () => <Typeset fontSizes={fontSizes} fontWeight={fontWeight} />;
+export const WithFontFamily = () => <Typeset fontSizes={fontSizes} fontFamily={fontFamily} />;
+export const WithWeightText = () => (
   <Typeset fontSizes={fontSizes} fontWeight={fontWeight} sampleText="Heading" />
 );

lib/components/src/brand/StorybookLogo.stories.tsx

@@ -7,4 +7,4 @@ export default {
   title: 'Basics/Brand/StorybookLogo',
 };
 
-export const normal = () => <StorybookLogo alt="Storybook logo" />;
+export const Normal = () => <StorybookLogo alt="Storybook logo" />;

lib/components/src/placeholder/placeholder.stories.tsx

@@ -8,10 +8,10 @@ export default {
   title: 'Basics/Placeholder',
 };
 
-export const singleChild = () => (
+export const SingleChild = () => (
   <Placeholder>This is a placeholder with single child, it's bolded</Placeholder>
 );
-export const twoChildren = () => (
+export const TwoChildren = () => (
   <Placeholder>
     <Fragment key="title">This has two children, the first bold</Fragment>
     <Fragment key="desc">

lib/components/src/typography/DocumentWrapper.stories.tsx

@@ -9,13 +9,13 @@ export default {
   decorators: [(storyFn: any) => <div style={{ width: '600px' }}>{storyFn()}</div>],
 };
 
-export const withMarkdown = () => (
+export const WithMarkdown = () => (
   <DocumentWrapper>
     <MarkdownSample />
   </DocumentWrapper>
 );
 
-export const withDOM = () => (
+export const WithDOM = () => (
   <DocumentWrapper>
     <h1>h1 Heading</h1>
     <h2>h2 Heading</h2>

lib/core-server/src/__snapshots__/vue-3-cli_manager-prod

@@ -223,227 +223,3 @@ Object {
   ],
 }
 `;
-
-exports[`vue-3-cli preview dev mode 1`] = `
-Object {
-  "entry": Array [
-    "ROOT/lib/core-client/dist/esm/globals/polyfills.js",
-    "ROOT/lib/core-client/dist/esm/manager/index.js",
-    "ROOT/addons/links/dist/esm/register.js",
-    "ROOT/addons/docs/dist/esm/register.js",
-    "ROOT/addons/controls/dist/esm/register.js",
-    "ROOT/addons/actions/dist/esm/register.js",
-    "ROOT/addons/backgrounds/dist/esm/register.js",
-    "ROOT/addons/viewport/dist/esm/register.js",
-    "ROOT/addons/toolbars/dist/esm/register.js",
-    "ROOT/addons/measure/dist/esm/register.js",
-    "ROOT/addons/outline/dist/esm/register.js",
-    "ROOT/addons/interactions/dist/esm/register.js",
-  ],
-  "keys": Array [
-    "name",
-    "mode",
-    "bail",
-    "devtool",
-    "entry",
-    "output",
-    "watchOptions",
-    "plugins",
-    "module",
-    "resolve",
-    "resolveLoader",
-    "recordsPath",
-    "performance",
-    "optimization",
-  ],
-  "module": Object {
-    "rules": Array [
-      Object {
-        "exclude": Array [
-          "NODE_MODULES/",
-          "/dist/",
-        ],
-        "include": Array [
-          "ROOT",
-        ],
-        "test": "/\\\\.(mjs|tsx?|jsx?)$/",
-        "use": Array [
-          Object {
-            "loader": "NODE_MODULES/babel-loader/lib/index.js",
-            "options": Object {
-              "babelrc": false,
-              "configFile": false,
-              "plugins": Array [
-                "NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js",
-                Array [
-                  "NODE_MODULES/@babel/plugin-proposal-decorators/lib/index.js",
-                  Object {
-                    "legacy": true,
-                  },
-                ],
-                Array [
-                  "NODE_MODULES/@babel/plugin-proposal-class-properties/lib/index.js",
-                  Object {
-                    "loose": true,
-                  },
-                ],
-                Array [
-                  "NODE_MODULES/@babel/plugin-proposal-private-methods/lib/index.js",
-                  Object {
-                    "loose": true,
-                  },
-                ],
-                "NODE_MODULES/@babel/plugin-proposal-export-default-from/lib/index.js",
-                "NODE_MODULES/@babel/plugin-syntax-dynamic-import/lib/index.js",
-                Array [
-                  "NODE_MODULES/@babel/plugin-proposal-object-rest-spread/lib/index.js",
-                  Object {
-                    "loose": true,
-                    "useBuiltIns": true,
-                  },
-                ],
-                "NODE_MODULES/@babel/plugin-transform-classes/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-arrow-functions/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-parameters/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-destructuring/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-spread/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-for-of/lib/index.js",
-                "NODE_MODULES/babel-plugin-macros/dist/index.js",
-                "NODE_MODULES/@babel/plugin-proposal-optional-chaining/lib/index.js",
-                "NODE_MODULES/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js",
-                Array [
-                  "NODE_MODULES/babel-plugin-polyfill-corejs3/lib/index.js",
-                  Object {
-                    "absoluteImports": "NODE_MODULES/core-js/index.js",
-                    "method": "usage-global",
-                    "version": "*",
-                  },
-                ],
-                "NODE_MODULES/@babel/plugin-transform-template-literals/lib/index.js",
-              ],
-              "presets": Array [
-                Array [
-                  "NODE_MODULES/@babel/preset-env/lib/index.js",
-                  Object {
-                    "loose": true,
-                    "shippedProposals": true,
-                  },
-                ],
-                "NODE_MODULES/@babel/preset-typescript/lib/index.js",
-                "NODE_MODULES/@babel/preset-react/lib/index.js",
-              ],
-              "sourceType": "unambiguous",
-            },
-          },
-        ],
-      },
-      Object {
-        "include": [Function],
-        "test": "/\\\\.js$/",
-        "use": Array [
-          Object {
-            "loader": "NODE_MODULES/babel-loader/lib/index.js",
-            "options": Object {
-              "plugins": Array [
-                "NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js",
-                Array [
-                  "NODE_MODULES/@babel/plugin-proposal-decorators/lib/index.js",
-                  Object {
-                    "legacy": true,
-                  },
-                ],
-                Array [
-                  "NODE_MODULES/@babel/plugin-proposal-class-properties/lib/index.js",
-                  Object {
-                    "loose": true,
-                  },
-                ],
-                Array [
-                  "NODE_MODULES/@babel/plugin-proposal-private-methods/lib/index.js",
-                  Object {
-                    "loose": true,
-                  },
-                ],
-                "NODE_MODULES/@babel/plugin-proposal-export-default-from/lib/index.js",
-                "NODE_MODULES/@babel/plugin-syntax-dynamic-import/lib/index.js",
-                Array [
-                  "NODE_MODULES/@babel/plugin-proposal-object-rest-spread/lib/index.js",
-                  Object {
-                    "loose": true,
-                    "useBuiltIns": true,
-                  },
-                ],
-                "NODE_MODULES/@babel/plugin-transform-classes/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-arrow-functions/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-parameters/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-destructuring/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-spread/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-for-of/lib/index.js",
-                "NODE_MODULES/babel-plugin-macros/dist/index.js",
-                "NODE_MODULES/@babel/plugin-proposal-optional-chaining/lib/index.js",
-                "NODE_MODULES/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js",
-                Array [
-                  "NODE_MODULES/babel-plugin-polyfill-corejs3/lib/index.js",
-                  Object {
-                    "absoluteImports": "NODE_MODULES/core-js/index.js",
-                    "method": "usage-global",
-                    "version": "*",
-                  },
-                ],
-              ],
-              "presets": Array [
-                Array [
-                  "NODE_MODULES/@babel/preset-env/lib/index.js",
-                  Object {
-                    "loose": true,
-                    "modules": false,
-                    "shippedProposals": true,
-                    "targets": "defaults",
-                  },
-                ],
-                "NODE_MODULES/@babel/preset-react/lib/index.js",
-              ],
-              "sourceType": "unambiguous",
-            },
-          },
-        ],
-      },
-      Object {
-        "test": "/\\\\.css$/",
-        "use": Array [
-          "NODE_MODULES/style-loader/dist/cjs.js",
-          Object {
-            "loader": "NODE_MODULES/css-loader/dist/cjs.js",
-            "options": Object {
-              "importLoaders": 1,
-            },
-          },
-        ],
-      },
-      Object {
-        "loader": "NODE_MODULES/file-loader/dist/cjs.js",
-        "options": Object {
-          "name": "static/media/[name].[contenthash:8].[ext]",
-        },
-        "test": "/\\\\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\\\\?.*)?$/",
-      },
-      Object {
-        "loader": "NODE_MODULES/url-loader/dist/cjs.js",
-        "options": Object {
-          "limit": 10000,
-          "name": "static/media/[name].[contenthash:8].[ext]",
-        },
-        "test": "/\\\\.(mp4|webm|wav|mp3|m4a|aac|oga)(\\\\?.*)?$/",
-      },
-    ],
-  },
-  "plugins": Array [
-    "VirtualModulesPlugin",
-    "HtmlWebpackPlugin",
-    "CaseSensitivePathsPlugin",
-    "DefinePlugin",
-  ],
-}
-`;

lib/core-server/src/utils/__mockdata__/src/NoMeta.stories.ts

@@ -1,3 +1,4 @@
+/* eslint-disable storybook/default-exports */
 // no default export
 // e.g. https://github.com/storybookjs/storybook/issues/16421
 export const StoryOne = {};

lib/ui/src/components/layout/mobile.stories.tsx

@@ -34,7 +34,7 @@ export const InitialAddons = ({ props }: { props: MobileProps }) => (
   <Mobile {...props} options={{ ...props.options, initialActive: ActiveTabs.ADDONS }} />
 );
 
-export const docsOnly = ({ props }: { props: MobileProps }) => <Mobile {...props} docsOnly />;
+export const DocsOnly = ({ props }: { props: MobileProps }) => <Mobile {...props} docsOnly />;
 
 export const Page = ({ props }: { props: MobileProps }) => (
   <Mobile

lib/ui/src/components/notifications/NotificationItem.stories.js

@@ -29,9 +29,9 @@ export const simpleData = {
   },
 };
 
-export const simple = Template.bind({});
+export const Simple = Template.bind({});
 
-simple.args = {
+Simple.args = {
   notification: simpleData,
   onDismissNotification,
 };
@@ -44,9 +44,9 @@ export const longHeadlineData = {
   },
 };
 
-export const longHeadline = Template.bind({});
+export const LongHeadline = Template.bind({});
 
-longHeadline.args = {
+LongHeadline.args = {
   notification: longHeadlineData,
   onDismissNotification,
 };
@@ -60,9 +60,9 @@ export const linkData = {
   link: '/some/path',
 };
 
-export const link = Template.bind({});
+export const Link = Template.bind({});
 
-link.args = {
+Link.args = {
   notification: linkData,
   onDismissNotification,
 };
@@ -80,9 +80,9 @@ export const linkIconWithColorData = {
   link: '/some/path',
 };
 
-export const linkIconWithColor = Template.bind({});
+export const LinkIconWithColor = Template.bind({});
 
-linkIconWithColor.args = {
+LinkIconWithColor.args = {
   notification: linkIconWithColorData,
   onDismissNotification,
 };
@@ -101,9 +101,9 @@ export const linkIconWithColorSubHeadlineData = {
   link: '/some/path',
 };
 
-export const linkIconWithColorSubHeadline = Template.bind({});
+export const LinkIconWithColorSubHeadline = Template.bind({});
 
-linkIconWithColorSubHeadline.args = {
+LinkIconWithColorSubHeadline.args = {
   notification: linkIconWithColorSubHeadlineData,
   onDismissNotification,
 };
@@ -119,9 +119,9 @@ export const bookIconData = {
   },
 };
 
-export const bookIcon = Template.bind({});
+export const BookIcon = Template.bind({});
 
-bookIcon.args = {
+BookIcon.args = {
   notification: bookIconData,
   onDismissNotification,
 };
@@ -138,9 +138,9 @@ export const strongSubHeadlineData = {
   },
 };
 
-export const strongSubHeadline = Template.bind({});
+export const StrongSubHeadline = Template.bind({});
 
-strongSubHeadline.args = {
+StrongSubHeadline.args = {
   notification: strongSubHeadlineData,
   onDismissNotification,
 };
@@ -161,9 +161,9 @@ export const strongEmphasizedSubHeadlineData = {
   },
 };
 
-export const strongEmphasizedSubHeadline = Template.bind({});
+export const StrongEmphasizedSubHeadline = Template.bind({});
 
-strongEmphasizedSubHeadline.args = {
+StrongEmphasizedSubHeadline.args = {
   notification: strongEmphasizedSubHeadlineData,
   onDismissNotification,
 };
@@ -180,9 +180,9 @@ export const bookIconSubHeadlineData = {
   },
 };
 
-export const bookIconSubHeadline = Template.bind({});
+export const BookIconSubHeadline = Template.bind({});
 
-bookIconSubHeadline.args = {
+BookIconSubHeadline.args = {
   notification: bookIconSubHeadlineData,
   onDismissNotification,
 };
@@ -200,9 +200,9 @@ export const bookIconLongSubHeadlineData = {
   },
 };
 
-export const bookIconLongSubHeadline = Template.bind({});
+export const BookIconLongSubHeadline = Template.bind({});
 
-bookIconLongSubHeadline.args = {
+BookIconLongSubHeadline.args = {
   notification: bookIconLongSubHeadlineData,
   onDismissNotification,
 };
@@ -219,9 +219,9 @@ export const accessibilityIconData = {
   },
 };
 
-export const accessibilityIcon = Template.bind({});
+export const AccessibilityIcon = Template.bind({});
 
-accessibilityIcon.args = {
+AccessibilityIcon.args = {
   notification: accessibilityIconData,
   onDismissNotification,
 };
@@ -239,9 +239,9 @@ export const accessibilityGoldIconData = {
   },
 };
 
-export const accessibilityGoldIcon = Template.bind({});
+export const AccessibilityGoldIcon = Template.bind({});
 
-accessibilityGoldIcon.args = {
+AccessibilityGoldIcon.args = {
   notification: accessibilityGoldIconData,
   onDismissNotification,
 };
@@ -258,9 +258,9 @@ export const accessibilityGoldIconLongHeadLineNoSubHeadlineData = {
   },
 };
 
-export const accessibilityGoldIconLongHeadLineNoSubHeadline = Template.bind({});
+export const AccessibilityGoldIconLongHeadLineNoSubHeadline = Template.bind({});
 
-accessibilityGoldIconLongHeadLineNoSubHeadline.args = {
+AccessibilityGoldIconLongHeadLineNoSubHeadline.args = {
   notification: accessibilityGoldIconLongHeadLineNoSubHeadlineData,
   onDismissNotification,
 };

lib/ui/src/components/notifications/NotificationList.stories.js

@@ -32,7 +32,7 @@ export const allData = items;
 
 function clearNotification(id) {}
 
-export const single = () => (
+export const Single = () => (
   <NotificationList
     notifications={singleData}
     clearNotification={clearNotification}
@@ -40,7 +40,7 @@ export const single = () => (
   />
 );
 
-export const all = () => (
+export const All = () => (
   <NotificationList
     notifications={allData}
     clearNotification={clearNotification}
@@ -48,7 +48,7 @@ export const all = () => (
   />
 );
 
-export const placement = () => (
+export const Placement = () => (
   // Note: position:absolute is only for QA/testing. Use position:fixed when integrating into the real UI.
   <NotificationList
     placement={{ position: 'absolute', left: 20, bottom: 20 }}

lib/ui/src/components/preview/iframe.stories.tsx

@@ -14,7 +14,7 @@ const style: CSSProperties = {
   position: 'relative',
 };
 
-export const workingStory = () => (
+export const WorkingStory = () => (
   <IFrame
     active
     id="iframe"
@@ -25,11 +25,11 @@ export const workingStory = () => (
     scale={1.0}
   />
 );
-workingStory.parameters = {
+WorkingStory.parameters = {
   chromatic: { disable: true },
 };
 
-export const missingStory = () => (
+export const MissingStory = () => (
   <IFrame
     active
     id="iframe"

lib/ui/src/components/preview/preview.stories.tsx

@@ -75,7 +75,7 @@ export default {
   ],
 };
 
-export const noTabs = () => (
+export const NoTabs = () => (
   <Consumer>
     {({ api }: Combo) => {
       return (
@@ -89,7 +89,7 @@ export const noTabs = () => (
   </Consumer>
 );
 
-export const hideFullscreen = () => (
+export const HideFullscreen = () => (
   <Consumer>
     {({ api }: Combo) => {
       return (
@@ -103,7 +103,7 @@ export const hideFullscreen = () => (
   </Consumer>
 );
 
-export const hideAllDefaultTools = () => (
+export const HideAllDefaultTools = () => (
   <Consumer>
     {({ api }: Combo) => {
       return (
@@ -127,7 +127,7 @@ export const hideAllDefaultTools = () => (
   </Consumer>
 );
 
-export const withCanvasTab = () => (
+export const WithCanvasTab = () => (
   <Consumer>
     {({ api }: Combo) => {
       return <Preview {...previewProps} api={{ ...api, getElements: () => ({}) }} />;
@@ -135,4 +135,4 @@ export const withCanvasTab = () => (
   </Consumer>
 );
 
-export const withTabs = () => <Preview {...previewProps} />;
+export const WithTabs = () => <Preview {...previewProps} />;

lib/ui/src/components/sidebar/Heading.stories.tsx

@@ -1,5 +1,7 @@
+/* eslint-disable storybook/use-storybook-testing-library */
+// @TODO: use addon-interactions and remove the rule disable above
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { ComponentStory, ComponentMeta, ComponentStoryObj } from '@storybook/react';
 import { ThemeProvider, useTheme, Theme } from '@storybook/theming';
 import { action } from '@storybook/addon-actions';
 import { screen } from '@testing-library/dom';
@@ -24,11 +26,11 @@ const menuItems = [
   { title: 'Menu Item 3', onClick: action('onActivateMenuItem'), id: '3' },
 ];
 
-export const menuHighlighted: Story = () => <Heading menuHighlighted menu={menuItems} />;
+export const MenuHighlighted: Story = () => <Heading menuHighlighted menu={menuItems} />;
 
 export const standardData = { menu: menuItems };
 
-export const standard: Story = () => {
+export const Standard: Story = () => {
   const theme = useTheme() as Theme;
   return (
     <ThemeProvider
@@ -46,7 +48,7 @@ export const standard: Story = () => {
   );
 };
 
-export const standardNoLink: Story = () => {
+export const StandardNoLink: Story = () => {
   const theme = useTheme() as Theme;
   return (
     <ThemeProvider
@@ -64,7 +66,7 @@ export const standardNoLink: Story = () => {
   );
 };
 
-export const linkAndText: Story = () => {
+export const LinkAndText: Story = () => {
   const theme = useTheme() as Theme;
   return (
     <ThemeProvider
@@ -82,7 +84,7 @@ export const linkAndText: Story = () => {
   );
 };
 
-export const onlyText: Story = () => {
+export const OnlyText: Story = () => {
   const theme = useTheme() as Theme;
   return (
     <ThemeProvider
@@ -100,7 +102,7 @@ export const onlyText: Story = () => {
   );
 };
 
-export const longText: Story = () => {
+export const LongText: Story = () => {
   const theme = useTheme() as Theme;
   return (
     <ThemeProvider
@@ -118,7 +120,7 @@ export const longText: Story = () => {
   );
 };
 
-export const customBrandImage: Story = () => {
+export const CustomBrandImage: Story = () => {
   const theme = useTheme() as Theme;
   return (
     <ThemeProvider
@@ -136,7 +138,7 @@ export const customBrandImage: Story = () => {
   );
 };
 
-export const customBrandImageTall: Story = () => {
+export const CustomBrandImageTall: Story = () => {
   const theme = useTheme() as Theme;
   return (
     <ThemeProvider
@@ -154,7 +156,7 @@ export const customBrandImageTall: Story = () => {
   );
 };
 
-export const customBrandImageUnsizedSVG: Story = () => {
+export const CustomBrandImageUnsizedSVG: Story = () => {
   const theme = useTheme() as Theme;
   return (
     <ThemeProvider
@@ -172,7 +174,7 @@ export const customBrandImageUnsizedSVG: Story = () => {
   );
 };
 
-export const noBrand: Story = () => {
+export const NoBrand: Story = () => {
   const theme = useTheme() as Theme;
   return (
     <ThemeProvider
@@ -190,7 +192,7 @@ export const noBrand: Story = () => {
   );
 };
 
-export const skipToCanvasLinkFocused: Story = {
+export const SkipToCanvasLinkFocused: ComponentStoryObj<typeof Heading> = {
   args: { menu: menuItems, skipLinkHref: '#storybook-preview-wrapper' },
   parameters: { layout: 'padded', chromatic: { delay: 300 } },
   play: () => {

lib/ui/src/components/sidebar/Tree.stories.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable storybook/use-storybook-testing-library */
+// @TODO: use addon-interactions and remove the rule disable above
 import React from 'react';
 import type { StoriesHash } from '@storybook/api';
 import { screen } from '@testing-library/dom';

lib/ui/src/settings/SettingsFooter.stories.tsx

@@ -15,4 +15,4 @@ export default {
   ],
 };
 
-export const basic = () => <SettingsFooter />;
+export const Basic = () => <SettingsFooter />;

lib/ui/src/settings/shortcuts.stories.tsx

@@ -50,5 +50,5 @@ export default {
   ],
 };
 
-export const defaults = () => <ShortcutsScreen shortcutKeys={defaultShortcuts} {...actions} />;
-defaults.storyName = 'default shortcuts';
+export const Defaults = () => <ShortcutsScreen shortcutKeys={defaultShortcuts} {...actions} />;
+Defaults.storyName = 'default shortcuts';

package.json

@@ -68,7 +68,7 @@
     "github-release": "github-release-from-changelog",
     "generate-repros": "zx scripts/repros-generator/index.mjs",
     "lint": "yarn lint:js . && yarn lint:md .",
-    "lint:js": "cross-env NODE_ENV=production eslint --cache --cache-location=.cache/eslint --ext .js,.jsx,.json,.html,.ts,.tsx,.mjs --report-unused-disable-directives",
+    "lint:js": "cross-env NODE_ENV=production eslint  --cache --cache-location=.cache/eslint --ext .js,.jsx,.json,.html,.ts,.tsx,.mjs --report-unused-disable-directives",
     "lint:md": "remark -q",
     "lint:package": "sort-package-json",
     "local-registry": "ts-node --project=./scripts/tsconfig.json ./scripts/run-registry.ts ",
@@ -226,6 +226,7 @@
     "eslint-plugin-cypress": "^2.11.2",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-storybook": "^0.3.5",
     "eslint-teamcity": "^3.0.1",
     "esm": "^3.2.25",
     "express": "^4.17.1",

yarn.lock

@@ -8248,6 +8248,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/csf@npm:^0.0.1":
+  version: 0.0.1
+  resolution: "@storybook/csf@npm:0.0.1"
+  dependencies:
+    lodash: ^4.17.15
+  checksum: 7b0f75763415f9147692a460b44417ee56ea9639433716a1fd4d1df4c8b0221cbc71b8da0fbed4dcecb3ccd6c7ed64be39f5c255c713539a6088a1d6488aaa24
+  languageName: node
+  linkType: hard
+
 "@storybook/design-system@npm:^5.4.7":
   version: 5.6.8
   resolution: "@storybook/design-system@npm:5.6.8"
@@ -8899,6 +8908,7 @@ __metadata:
     eslint-plugin-cypress: ^2.11.2
     eslint-plugin-import: ^2.22.1
     eslint-plugin-react: ^7.22.0
+    eslint-plugin-storybook: ^0.3.5
     eslint-teamcity: ^3.0.1
     esm: ^3.2.25
     express: ^4.17.1
@@ -10319,6 +10329,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/json-schema@npm:^7.0.9":
+  version: 7.0.9
+  resolution: "@types/json-schema@npm:7.0.9"
+  checksum: 46a9e92b7922495a50f55632d802f7e7ab2dffd76b3f894baf7b28012e73983df832977bedd748aa9a2bc8400c6e8659ca39faf6ccd93d71d41d5b0293338a0e
+  languageName: node
+  linkType: hard
+
 "@types/json5@npm:^0.0.29":
   version: 0.0.29
   resolution: "@types/json5@npm:0.0.29"
@@ -11196,6 +11213,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/experimental-utils@npm:^5.3.0":
+  version: 5.3.1
+  resolution: "@typescript-eslint/experimental-utils@npm:5.3.1"
+  dependencies:
+    "@types/json-schema": ^7.0.9
+    "@typescript-eslint/scope-manager": 5.3.1
+    "@typescript-eslint/types": 5.3.1
+    "@typescript-eslint/typescript-estree": 5.3.1
+    eslint-scope: ^5.1.1
+    eslint-utils: ^3.0.0
+  peerDependencies:
+    eslint: "*"
+  checksum: bc7d6c1a3467f31017983fd05d4ce1aa7a14b8e778ffadc69e3d2c4089e53d8caa0c95f15b431609a0af4875b811f4c1579edc6e7688f7578e40473a5685091f
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/parser@npm:^2.10.0, @typescript-eslint/parser@npm:^2.30.0":
   version: 2.34.0
   resolution: "@typescript-eslint/parser@npm:2.34.0"
@@ -11240,6 +11273,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/scope-manager@npm:5.3.1":
+  version: 5.3.1
+  resolution: "@typescript-eslint/scope-manager@npm:5.3.1"
+  dependencies:
+    "@typescript-eslint/types": 5.3.1
+    "@typescript-eslint/visitor-keys": 5.3.1
+  checksum: 3cc4f98de238d08e8691de1a251eeeabf0d56e543df9ff0bd2acab485921dab58c58fcba4dbe8618cfca7e6d92963464ceab948f8973a878e72f278968ca1263
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/types@npm:3.10.1":
   version: 3.10.1
   resolution: "@typescript-eslint/types@npm:3.10.1"
@@ -11254,6 +11297,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/types@npm:5.3.1":
+  version: 5.3.1
+  resolution: "@typescript-eslint/types@npm:5.3.1"
+  checksum: 2aa1eef02f2a9f6aef303657dbeb14c57b6b84b622b11d52b8671316baa184bf008726f02c18ee0fb6c0157e34a6a442f211a454f2c5c201986bf79ffde283d8
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/typescript-estree@npm:2.34.0":
   version: 2.34.0
   resolution: "@typescript-eslint/typescript-estree@npm:2.34.0"
@@ -11309,6 +11359,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/typescript-estree@npm:5.3.1":
+  version: 5.3.1
+  resolution: "@typescript-eslint/typescript-estree@npm:5.3.1"
+  dependencies:
+    "@typescript-eslint/types": 5.3.1
+    "@typescript-eslint/visitor-keys": 5.3.1
+    debug: ^4.3.2
+    globby: ^11.0.4
+    is-glob: ^4.0.3
+    semver: ^7.3.5
+    tsutils: ^3.21.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: a57cf5c441772d48f71657b08712fb2333f98f52988bc03d5f15e1d12620a2eeea634209e88b427514f3ddf5a10b7713255b7b9f5582bd95ac3f0e749e03c510
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/visitor-keys@npm:3.10.1":
   version: 3.10.1
   resolution: "@typescript-eslint/visitor-keys@npm:3.10.1"
@@ -11328,6 +11396,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/visitor-keys@npm:5.3.1":
+  version: 5.3.1
+  resolution: "@typescript-eslint/visitor-keys@npm:5.3.1"
+  dependencies:
+    "@typescript-eslint/types": 5.3.1
+    eslint-visitor-keys: ^3.0.0
+  checksum: cec2dc75b6b31d28ceeedebc4b31e86c98c8f4c01a876e1c64399e4f45b35fbfbbdeff5672d014fbcda1c6a0cbedca91957de6fa3cd83f9cdf24259abbd6c06b
+  languageName: node
+  linkType: hard
+
 "@verdaccio/commons-api@npm:9.7.1, @verdaccio/commons-api@npm:^9.7.1":
   version: 9.7.1
   resolution: "@verdaccio/commons-api@npm:9.7.1"
@@ -21986,6 +22064,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-plugin-storybook@npm:^0.3.5":
+  version: 0.3.5
+  resolution: "eslint-plugin-storybook@npm:0.3.5"
+  dependencies:
+    "@storybook/csf": ^0.0.1
+    "@typescript-eslint/experimental-utils": ^5.3.0
+    requireindex: ^1.1.0
+  peerDependencies:
+    eslint: ">=6"
+  checksum: 2fef77dc26aa395cf304c53cacd35bae7f677192eb1f681439c2a0154e57b99d376948e0918e4bb7b3c8ca01358aedbbf7bb5bc3b428b37141599abbdd763580
+  languageName: node
+  linkType: hard
+
 "eslint-plugin-testing-library@npm:^3.9.2":
   version: 3.10.1
   resolution: "eslint-plugin-testing-library@npm:3.10.1"
@@ -22044,6 +22135,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-utils@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "eslint-utils@npm:3.0.0"
+  dependencies:
+    eslint-visitor-keys: ^2.0.0
+  peerDependencies:
+    eslint: ">=5"
+  checksum: 45aa2b63667a8d9b474c98c28af908d0a592bed1a4568f3145cd49fb5d9510f545327ec95561625290313fe126e6d7bdfe3fdbdb6f432689fab6b9497d3bfb52
+  languageName: node
+  linkType: hard
+
 "eslint-visitor-keys@npm:^1.0.0, eslint-visitor-keys@npm:^1.1.0, eslint-visitor-keys@npm:^1.3.0":
   version: 1.3.0
   resolution: "eslint-visitor-keys@npm:1.3.0"
@@ -22058,6 +22160,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-visitor-keys@npm:^3.0.0":
+  version: 3.1.0
+  resolution: "eslint-visitor-keys@npm:3.1.0"
+  checksum: ba23efd2a273cb5a0794ea76669cbe95892bed5d2e165e7744db6a81ede74f4239cf73d142016421d8297b72000486e4b41bba3078eccb9ef82ae0b7e06e9282
+  languageName: node
+  linkType: hard
+
 "eslint-webpack-plugin@npm:^2.5.2":
   version: 2.5.2
   resolution: "eslint-webpack-plugin@npm:2.5.2"
@@ -24727,6 +24836,20 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"globby@npm:^11.0.4":
+  version: 11.0.4
+  resolution: "globby@npm:11.0.4"
+  dependencies:
+    array-union: ^2.1.0
+    dir-glob: ^3.0.1
+    fast-glob: ^3.1.1
+    ignore: ^5.1.4
+    merge2: ^1.3.0
+    slash: ^3.0.0
+  checksum: de5f828c834baf75e3bd3c629bb3a64d1dfa9965831d0b105b728f9184284c6ba2b0d42e24862b411abc18e6e0af12e60880b3a62e096752de3426f2839f9ef7
+  languageName: node
+  linkType: hard
+
 "globby@npm:^12.0.0":
   version: 12.0.1
   resolution: "globby@npm:12.0.1"
@@ -27028,6 +27151,15 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"is-glob@npm:^4.0.3":
+  version: 4.0.3
+  resolution: "is-glob@npm:4.0.3"
+  dependencies:
+    is-extglob: ^2.1.1
+  checksum: 17fb4014e22be3bbecea9b2e3a76e9e34ff645466be702f1693e8f1ee1adac84710d0be0bd9f967d6354036fd51ab7c2741d954d6e91dae6bb69714de92c197a
+  languageName: node
+  linkType: hard
+
 "is-hexadecimal@npm:^1.0.0":
   version: 1.0.4
   resolution: "is-hexadecimal@npm:1.0.4"
@@ -39489,7 +39621,7 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"requireindex@npm:^1.2.0":
+"requireindex@npm:^1.1.0, requireindex@npm:^1.2.0":
   version: 1.2.0
   resolution: "requireindex@npm:1.2.0"
   checksum: 7fb42aed73bf8de9acc4d6716cf07acc7fbe180e58729433bafcf702e76e7bb10e54f8266c06bfec62d752e0ac14d50e8758833de539e6f4e2cd642077866153
@@ -43969,6 +44101,17 @@ resolve@1.19.0:
   languageName: node
   linkType: hard
 
+"tsutils@npm:^3.21.0":
+  version: 3.21.0
+  resolution: "tsutils@npm:3.21.0"
+  dependencies:
+    tslib: ^1.8.1
+  peerDependencies:
+    typescript: ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
+  checksum: 02f19e458ec78ead8fffbf711f834ad8ecd2cc6ade4ec0320790713dccc0a412b99e7fd907c4cda2a1dc602c75db6f12e0108e87a5afad4b2f9e90a24cabd5a2
+  languageName: node
+  linkType: hard
+
 "tty-browserify@npm:0.0.0":
   version: 0.0.0
   resolution: "tty-browserify@npm:0.0.0"