diff --git a/.eslintrc.js b/.eslintrc.js index 6c1acdeef112..3dc077d3aad4 100644 --- a/.eslintrc.js +++ b/.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', }, diff --git a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap index 2c7cbf790b68..3f13c5c1a766 100644 --- a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap +++ b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap @@ -53,12 +53,6 @@ exports[`Storyshots Another Button with text 1`] = ` `; -exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = ` - -

- -`; - exports[`Storyshots Button With Text 1`] = ` ; +export const WithText = () => ; -export const withSomeEmoji = () => ( +export const WithSomeEmoji = () => ( ); -withSomeEmoji.storyName = 'with some emoji'; +WithSomeEmoji.storyName = 'with some emoji'; diff --git a/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js b/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js index c1ffd1fbe5c5..8c850f44a7bb 100644 --- a/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js +++ b/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js @@ -11,6 +11,6 @@ export default { }, }; -export const toStorybook = () => ; +export const ToStorybook = () => ; -toStorybook.storyName = 'to Storybook'; +ToStorybook.storyName = 'to Storybook'; diff --git a/examples/angular-cli/src/stories/addons/interactions/addon-interactions.stories.ts b/examples/angular-cli/src/stories/addons/interactions/addon-interactions.stories.ts index e56546348852..4b2bbbbd8f54 100644 --- a/examples/angular-cli/src/stories/addons/interactions/addon-interactions.stories.ts +++ b/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'; diff --git a/examples/angular-cli/src/stories/basics/component-with-pipe/custom-pipes.stories.ts b/examples/angular-cli/src/stories/basics/component-with-pipe/custom-pipes.stories.ts index cdfcff5e0694..f8c4343737d8 100644 --- a/examples/angular-cli/src/stories/basics/component-with-pipe/custom-pipes.stories.ts +++ b/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, }); diff --git a/examples/angular-cli/src/stories/core/parameters/bootstrap-options.stories.ts b/examples/angular-cli/src/stories/core/parameters/bootstrap-options.stories.ts index ba03de07131e..b8327d995f42 100644 --- a/examples/angular-cli/src/stories/core/parameters/bootstrap-options.stories.ts +++ b/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'; diff --git a/examples/angular-cli/src/stories/preview/csf3/input-with-play.stories.ts b/examples/angular-cli/src/stories/preview/csf3/input-with-play.stories.ts index 1a1f810cee9e..924953246535 100644 --- a/examples/angular-cli/src/stories/preview/csf3/input-with-play.stories.ts +++ b/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: '

Heading

', }), 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`); }, }; diff --git a/examples/angular-cli/src/stories/welcome-angular.stories.ts b/examples/angular-cli/src/stories/welcome-angular.stories.ts index c0003987c2d2..095afc8616bc 100644 --- a/examples/angular-cli/src/stories/welcome-angular.stories.ts +++ b/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'), diff --git a/examples/angular-cli/src/stories/welcome-storybook.stories.ts b/examples/angular-cli/src/stories/welcome-storybook.stories.ts index a68ba20a49a6..958a9a439153 100644 --- a/examples/angular-cli/src/stories/welcome-storybook.stories.ts +++ b/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'), diff --git a/examples/cra-kitchen-sink/src/stories/cra-svgr.stories.js b/examples/cra-kitchen-sink/src/stories/cra-svgr.stories.js deleted file mode 100644 index 044c8df8d416..000000000000 --- a/examples/cra-kitchen-sink/src/stories/cra-svgr.stories.js +++ /dev/null @@ -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', () => ); diff --git a/examples/cra-ts-essentials/src/stories/0-Welcome.stories.tsx b/examples/cra-ts-essentials/src/stories/0-Welcome.stories.tsx index 29a1920ce69d..9920a416e1ff 100644 --- a/examples/cra-ts-essentials/src/stories/0-Welcome.stories.tsx +++ b/examples/cra-ts-essentials/src/stories/0-Welcome.stories.tsx @@ -7,6 +7,6 @@ export default { component: Welcome, }; -export const toStorybook = () => ; +export const ToStorybook = () => ; -toStorybook.storyName = 'to Storybook'; +ToStorybook.storyName = 'to Storybook'; diff --git a/examples/ember-cli/stories/polyfill-example.stories.js b/examples/ember-cli/stories/polyfill-example.stories.js index 841f12358149..48a44973530c 100644 --- a/examples/ember-cli/stories/polyfill-example.stories.js +++ b/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` ( ); InvalidContrast.storyName = 'Invalid contrast'; -export const delayedRender = () => ( +export const DelayedRenderStory = () => ( ); -delayedRender.storyName = 'delayed render'; +DelayedRenderStory.storyName = 'delayed render'; diff --git a/examples/official-storybook/stories/addon-a11y/form.stories.js b/examples/official-storybook/stories/addon-a11y/form.stories.js index a60eb6b4a6d3..97cdb4b5f9ed 100644 --- a/examples/official-storybook/stories/addon-a11y/form.stories.js +++ b/examples/official-storybook/stories/addon-a11y/form.stories.js @@ -17,7 +17,6 @@ export const WithoutLabel = () => ( ); -WithoutLabel.storyName = 'Without Label'; export const WithLabel = () => ( diff --git a/examples/official-storybook/stories/addon-actions.stories.js b/examples/official-storybook/stories/addon-actions.stories.js index e3f94d324a72..ae7ad1de5b38 100644 --- a/examples/official-storybook/stories/addon-actions.stories.js +++ b/examples/official-storybook/stories/addon-actions.stories.js @@ -77,8 +77,6 @@ export const CircularPayload = () => { return ; }; -CircularPayload.storyName = 'Circular Payload'; - export const ReservedKeywordAsName = () => ; ReservedKeywordAsName.storyName = 'Reserved keyword as name'; @@ -186,7 +184,6 @@ export const LimitActionOutput = () => { ); }; -LimitActionOutput.storyName = 'Limit Action Output'; export const SkippedViaDisableTrue = () => ( diff --git a/examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js b/examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js index 1ac7ad185e7c..6a10bf8cc232 100644 --- a/examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js +++ b/examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js @@ -23,11 +23,11 @@ export default { }, }; -export const defDocsPage = () =>
Default docs page
; +export const DefDocsPage = () =>
Default docs page
; -export const smallDocsPage = () =>
Just primary story,
; +export const SmallDocsPage = () =>
Just primary story,
; -smallDocsPage.parameters = { +SmallDocsPage.parameters = { docs: { page: () => ( <> @@ -38,9 +38,9 @@ smallDocsPage.parameters = { }, }; -export const checkBoxProps = () =>
Primary props displayed with a check box
; +export const CheckBoxProps = () =>
Primary props displayed with a check box
; -checkBoxProps.parameters = { +CheckBoxProps.parameters = { docs: { page: () => { const [showProps, setShowProps] = React.useState(false); @@ -61,9 +61,9 @@ checkBoxProps.parameters = { }, }; -export const customLabels = () =>
Display custom title, Subtitle, Description
; +export const CustomLabels = () =>
Display custom title, Subtitle, Description
; -customLabels.parameters = { +CustomLabels.parameters = { docs: { page: () => ( <> @@ -78,15 +78,15 @@ customLabels.parameters = { }, }; -export const customStoriesFilter = () =>
Displays ALL stories (not excluding first one)
; +export const CustomStoriesFilter = () =>
Displays ALL stories (not excluding first one)
; -customStoriesFilter.parameters = { +CustomStoriesFilter.parameters = { docs: { page: () => , }, }; -export const multipleComponents = () => ( +export const MultipleComponents = () => ( @@ -94,9 +94,9 @@ export const multipleComponents = () => ( ); -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 = () =>
Display multiple prop tables in tabs
; +export const ComponentsProps = () =>
Display multiple prop tables in tabs
; -componentsProps.subcomponents = { +ComponentsProps.subcomponents = { 'Docgen Button': DocgenButton, 'Base Button': BaseButton, }; -componentsProps.parameters = { +ComponentsProps.parameters = { docs: { page: () => ( <> diff --git a/examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.js b/examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.js index a64a24f19564..e4963c85d93a 100644 --- a/examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.js +++ b/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'; diff --git a/examples/official-storybook/stories/addon-docs/dynamic-title.stories.js b/examples/official-storybook/stories/addon-docs/dynamic-title.stories.js index 9250bb4fbea6..08c5b3197bdb 100644 --- a/examples/official-storybook/stories/addon-docs/dynamic-title.stories.js +++ b/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'; diff --git a/examples/official-storybook/stories/addon-docs/memo.stories.js b/examples/official-storybook/stories/addon-docs/memo.stories.js index 3d07ae61abc9..6a371f8b770a 100644 --- a/examples/official-storybook/stories/addon-docs/memo.stories.js +++ b/examples/official-storybook/stories/addon-docs/memo.stories.js @@ -10,5 +10,5 @@ export default { }, }; -export const displaysCorrectly = () => ; -displaysCorrectly.storyName = 'Displays components with memo correctly'; +export const DisplaysCorrectly = () => ; +DisplaysCorrectly.storyName = 'Displays components with memo correctly'; diff --git a/examples/official-storybook/stories/addon-docs/transform-source.stories.js b/examples/official-storybook/stories/addon-docs/transform-source.stories.js index d805bc05ddf0..b6ae7a8657a8 100644 --- a/examples/official-storybook/stories/addon-docs/transform-source.stories.js +++ b/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' } }, }; diff --git a/examples/official-storybook/stories/addon-storyshots.stories.js b/examples/official-storybook/stories/addon-storyshots.stories.js index eaf56417ff5a..057b87c42b40 100644 --- a/examples/official-storybook/stories/addon-storyshots.stories.js +++ b/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 ( - setHover(true)} onMouseLeave={() => setHover(false)}> + setHover(true)} + onMouseLeave={() => setHover(false)} + > {hover && 'I am hovered'} - + ); }; -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(); diff --git a/examples/official-storybook/stories/core/errors.stories.js b/examples/official-storybook/stories/core/errors.stories.js index 727dcf21d92b..1587aa0fe116 100644 --- a/examples/official-storybook/stories/core/errors.stories.js +++ b/examples/official-storybook/stories/core/errors.stories.js @@ -17,15 +17,15 @@ Exception.parameters = { chromatic: { disable: true }, }; -export const badComponent = () => ( +export const BadComponentStory = () => (
Hello world
 ); -badComponent.storyName = 'story errors - invariant error'; +BadComponentStory.storyName = 'story errors - invariant error'; -badComponent.parameters = { +BadComponentStory.parameters = { storyshots: { disable: true }, chromatic: { disable: true }, }; diff --git a/examples/official-storybook/stories/core/prefix.stories.js b/examples/official-storybook/stories/core/prefix.stories.js index 0010f1ddfe65..182404c7c62a 100644 --- a/examples/official-storybook/stories/core/prefix.stories.js +++ b/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({}); diff --git a/examples/official-storybook/stories/demo/setup.stories.tsx b/examples/official-storybook/stories/demo/setup.stories.tsx index ade8666b7d76..3c83fbbf341f 100644 --- a/examples/official-storybook/stories/demo/setup.stories.tsx +++ b/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'; diff --git a/examples/official-storybook/stories/other-dirname.stories.js b/examples/official-storybook/stories/other-dirname.stories.js deleted file mode 100644 index 734a8a8912be..000000000000 --- a/examples/official-storybook/stories/other-dirname.stories.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import base from 'paths.macro'; - -import BaseButton from '../components/BaseButton'; - -export const story1 = () => ; -story1.storyName = 'story 1'; - -export const story2 = () => ; -story2.storyName = 'story 2'; diff --git a/examples/react-ts/src/AccountForm.stories.tsx b/examples/react-ts/src/AccountForm.stories.tsx index 86d7587a97f7..d670d64ee45a 100644 --- a/examples/react-ts/src/AccountForm.stories.tsx +++ b/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'; diff --git a/examples/react-ts/src/button.stories.tsx b/examples/react-ts/src/button.stories.tsx index 4f2400bb7454..b37bb8072345 100644 --- a/examples/react-ts/src/button.stories.tsx +++ b/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'; diff --git a/examples/vue-kitchen-sink/src/stories/components/app.stories.js b/examples/vue-kitchen-sink/src/stories/components/app.stories.js index 229c3457cfe4..8f957aa35913 100644 --- a/examples/vue-kitchen-sink/src/stories/components/app.stories.js +++ b/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'; diff --git a/examples/vue-kitchen-sink/src/stories/components/welcome.stories.js b/examples/vue-kitchen-sink/src/stories/components/welcome.stories.js index b40eaf5bdecd..35df982eb801 100644 --- a/examples/vue-kitchen-sink/src/stories/components/welcome.stories.js +++ b/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'; diff --git a/examples/vue-kitchen-sink/src/stories/core-errors.stories.js b/examples/vue-kitchen-sink/src/stories/core-errors.stories.js index 3b5c1245bfe7..1081882d161b 100644 --- a/examples/vue-kitchen-sink/src/stories/core-errors.stories.js +++ b/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; diff --git a/examples/web-components-kitchen-sink/src/stories/misc/script/script.stories.ts b/examples/web-components-kitchen-sink/src/stories/misc/script/script.stories.ts index ce2ccd8a3cd8..bbe219fa13a4 100644 --- a/examples/web-components-kitchen-sink/src/stories/misc/script/script.stories.ts +++ b/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`
JS alert
`; -export const inString = () => '
JS alert
'; +export const InString = () => '
JS alert
'; -export const typeModule = () => +export const TypeModule = () => '
JS alert from module
'; diff --git a/lib/components/src/ActionBar/ActionBar.stories.tsx b/lib/components/src/ActionBar/ActionBar.stories.tsx index 6b019a2c66c0..a464fcc2c706 100644 --- a/lib/components/src/ActionBar/ActionBar.stories.tsx +++ b/lib/components/src/ActionBar/ActionBar.stories.tsx @@ -28,9 +28,9 @@ export default { ], }; -export const singleItem = () => ; +export const SingleItem = () => ; -export const manyItems = () => ( +export const ManyItems = () => ( any) => {storyFn()}], }; -export const vertical = () => ( +export const Vertical = () => ( {list((i) => ( @@ -50,7 +50,7 @@ export const vertical = () => ( ); -export const horizontal = () => ( +export const Horizontal = () => ( {list((i) => ( {i} @@ -58,7 +58,7 @@ export const horizontal = () => ( ); -export const both = () => ( +export const Both = () => ( {list((i) => ( @@ -71,7 +71,7 @@ export const both = () => ( ); -export const withOuterBorder = () => ( +export const WithOuterBorder = () => (
; -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) => { ); }; -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 }, }; diff --git a/lib/components/src/bar/button.stories.tsx b/lib/components/src/bar/button.stories.tsx index 492e8f4177e2..0475fdae8a64 100644 --- a/lib/components/src/bar/button.stories.tsx +++ b/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 = () => ( diff --git a/lib/components/src/blocks/ColorPalette.stories.tsx b/lib/components/src/blocks/ColorPalette.stories.tsx index 2f3830b98a07..f4c18ac7dd71 100644 --- a/lib/components/src/blocks/ColorPalette.stories.tsx +++ b/lib/components/src/blocks/ColorPalette.stories.tsx @@ -6,7 +6,7 @@ export default { component: ColorPalette, }; -export const defaultStyle = () => ( +export const DefaultStyle = () => ( Generic error message; +export const Error = () => Generic error message; diff --git a/lib/components/src/blocks/IconGallery.stories.tsx b/lib/components/src/blocks/IconGallery.stories.tsx index 21401a91a9d8..817cc90a9d4a 100644 --- a/lib/components/src/blocks/IconGallery.stories.tsx +++ b/lib/components/src/blocks/IconGallery.stories.tsx @@ -8,7 +8,7 @@ export default { component: IconGallery, }; -export const defaultStyle = () => ( +export const DefaultStyle = () => ( diff --git a/lib/components/src/blocks/Typeset.stories.tsx b/lib/components/src/blocks/Typeset.stories.tsx index 9945b12555cd..4653fdf49cb6 100644 --- a/lib/components/src/blocks/Typeset.stories.tsx +++ b/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 = () => ; -export const withFontWeight = () => ; -export const withFontFamily = () => ; -export const withWeightText = () => ( +export const WithFontSizes = () => ; +export const WithFontWeight = () => ; +export const WithFontFamily = () => ; +export const WithWeightText = () => ( ); diff --git a/lib/components/src/brand/StorybookLogo.stories.tsx b/lib/components/src/brand/StorybookLogo.stories.tsx index edbf5f1f2a57..57c6e4de6554 100644 --- a/lib/components/src/brand/StorybookLogo.stories.tsx +++ b/lib/components/src/brand/StorybookLogo.stories.tsx @@ -7,4 +7,4 @@ export default { title: 'Basics/Brand/StorybookLogo', }; -export const normal = () => ; +export const Normal = () => ; diff --git a/lib/components/src/placeholder/placeholder.stories.tsx b/lib/components/src/placeholder/placeholder.stories.tsx index 88e937254e9d..4e2a83d5de43 100644 --- a/lib/components/src/placeholder/placeholder.stories.tsx +++ b/lib/components/src/placeholder/placeholder.stories.tsx @@ -8,10 +8,10 @@ export default { title: 'Basics/Placeholder', }; -export const singleChild = () => ( +export const SingleChild = () => ( This is a placeholder with single child, it's bolded ); -export const twoChildren = () => ( +export const TwoChildren = () => ( This has two children, the first bold diff --git a/lib/components/src/typography/DocumentWrapper.stories.tsx b/lib/components/src/typography/DocumentWrapper.stories.tsx index 18e7b74c463b..a67b2bc8b293 100644 --- a/lib/components/src/typography/DocumentWrapper.stories.tsx +++ b/lib/components/src/typography/DocumentWrapper.stories.tsx @@ -9,13 +9,13 @@ export default { decorators: [(storyFn: any) =>
{storyFn()}
], }; -export const withMarkdown = () => ( +export const WithMarkdown = () => ( ); -export const withDOM = () => ( +export const WithDOM = () => (

h1 Heading

h2 Heading

diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod b/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod index 6a12381214bf..852c93c75b1e 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod +++ b/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", - ], -} -`; diff --git a/lib/core-server/src/utils/__mockdata__/src/NoMeta.stories.ts b/lib/core-server/src/utils/__mockdata__/src/NoMeta.stories.ts index b12d3b47ab74..2726cb488557 100644 --- a/lib/core-server/src/utils/__mockdata__/src/NoMeta.stories.ts +++ b/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 = {}; diff --git a/lib/ui/src/components/layout/mobile.stories.tsx b/lib/ui/src/components/layout/mobile.stories.tsx index ec62ff7d23d9..d37f6cb7a891 100644 --- a/lib/ui/src/components/layout/mobile.stories.tsx +++ b/lib/ui/src/components/layout/mobile.stories.tsx @@ -34,7 +34,7 @@ export const InitialAddons = ({ props }: { props: MobileProps }) => ( ); -export const docsOnly = ({ props }: { props: MobileProps }) => ; +export const DocsOnly = ({ props }: { props: MobileProps }) => ; export const Page = ({ props }: { props: MobileProps }) => ( ( +export const Single = () => ( ( /> ); -export const all = () => ( +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. ( +export const WorkingStory = () => (