diff --git a/code/addons/docs/template/stories/docspage/basic.stories.ts b/code/addons/docs/template/stories/docspage/basic.stories.ts new file mode 100644 index 000000000000..03bf9371aedd --- /dev/null +++ b/code/addons/docs/template/stories/docspage/basic.stories.ts @@ -0,0 +1,20 @@ +import globalThis from 'global'; + +export default { + component: globalThis.Components.Button, + args: { children: 'Click Me!' }, + parameters: { chromatic: { disable: true } }, +}; + +export const Basic = { + args: { children: 'Basic' }, +}; + +export const Disabled = { + args: { children: 'Disabled in DocsPage' }, + parameters: { docs: { disable: true } }, +}; + +export const Another = { + args: { children: 'Another' }, +}; diff --git a/code/addons/docs/template/stories/docspage/description.stories.ts b/code/addons/docs/template/stories/docspage/description.stories.ts new file mode 100644 index 000000000000..46918806038e --- /dev/null +++ b/code/addons/docs/template/stories/docspage/description.stories.ts @@ -0,0 +1,30 @@ +import globalThis from 'global'; + +export default { + component: globalThis.Components.Button, + // FIXME: remove array subcomponents in 7.0? + subcomponents: { + Pre: globalThis.Components.Pre, + }, + args: { children: 'Click Me!' }, + parameters: { + docs: { + description: { + component: '**Component** description', + }, + }, + chromatic: { disable: true }, + }, +}; + +export const Basic = {}; + +export const CustomDescription = { + parameters: { + docs: { + description: { + story: '**Story** description', + }, + }, + }, +}; diff --git a/code/addons/docs/template/stories/docspage/extract-description.stories.ts b/code/addons/docs/template/stories/docspage/extract-description.stories.ts new file mode 100644 index 000000000000..068c60a2cc71 --- /dev/null +++ b/code/addons/docs/template/stories/docspage/extract-description.stories.ts @@ -0,0 +1,17 @@ +import globalThis from 'global'; + +export default { + component: globalThis.Components.Button, + args: { children: 'Click Me!' }, + parameters: { + docs: { + // FIXME: this is typically provided by the renderer preset to extract + // the description automatically based on docgen info. including here + // for documentation purposes only. + extractComponentDescription: () => 'component description', + }, + chromatic: { disable: true }, + }, +}; + +export const Basic = {}; diff --git a/code/addons/docs/template/stories/docspage/overflow.stories.ts b/code/addons/docs/template/stories/docspage/overflow.stories.ts new file mode 100644 index 000000000000..6be8604b0e19 --- /dev/null +++ b/code/addons/docs/template/stories/docspage/overflow.stories.ts @@ -0,0 +1,12 @@ +import globalThis from 'global'; + +export default { + component: globalThis.Components.Pre, + args: { + text: 'Demonstrates overflow', + style: { width: 2000, height: 500, background: 'hotpink' }, + }, + parameters: { chromatic: { disable: true } }, +}; + +export const Basic = {}; diff --git a/code/addons/docs/template/stories/docspage/override.stories.ts b/code/addons/docs/template/stories/docspage/override.stories.ts new file mode 100644 index 000000000000..fd044c11ead7 --- /dev/null +++ b/code/addons/docs/template/stories/docspage/override.stories.ts @@ -0,0 +1,25 @@ +import globalThis from 'global'; + +// FIXME: do this using basic React functions for multi-framework +// once sandbox linking is working +// +// import { createElement } from 'react'; +// import { Title, Primary } from '@storybook/addon-docs'; +// +// const Override = () => +// createElement('div', { style: { border: '10px solid green', padding: '100px' } }, [ +// createElement(Title), +// createElement(Primary), +// ]); +const Override = () => 'overridden'; + +export default { + component: globalThis.Components.Button, + args: { children: 'Click Me!' }, + parameters: { + chromatic: { disable: true }, + docs: { page: Override }, + }, +}; + +export const Basic = {}; diff --git a/code/addons/docs/template/stories/docspage/source.stories.ts b/code/addons/docs/template/stories/docspage/source.stories.ts new file mode 100644 index 000000000000..eabfd2555c1d --- /dev/null +++ b/code/addons/docs/template/stories/docspage/source.stories.ts @@ -0,0 +1,43 @@ +import globalThis from 'global'; + +export default { + component: globalThis.Components.Button, + args: { children: 'Click Me!' }, + parameters: { chromatic: { disable: true } }, +}; + +export const Auto = {}; + +export const Disabled = { + parameters: { + docs: { + source: { code: null }, + }, + }, +}; + +export const Code = { + parameters: { + docs: { + source: { type: 'code' }, + }, + }, +}; + +export const Custom = { + parameters: { + docs: { + source: { code: 'custom source' }, + }, + }, +}; + +export const Transform = { + parameters: { + docs: { + transformSource(src: string) { + return `// We transformed this!\nconst example = (\n${src}\n);`; + }, + }, + }, +}; diff --git a/code/examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js b/code/examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js deleted file mode 100644 index 6a10bf8cc232..000000000000 --- a/code/examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js +++ /dev/null @@ -1,144 +0,0 @@ -import React from 'react'; -import { Title, Subtitle, Description, Primary, ArgsTable, Stories } from '@storybook/addon-docs'; -import { DocgenButton } from '../../components/DocgenButton'; -import BaseButton from '../../components/BaseButton'; -import { ButtonGroup, SubGroup } from '../../components/ButtonGroup'; - -export default { - title: 'Addons/Docs/stories docs blocks', - component: DocgenButton, - parameters: { - docs: { - page: () => ( - <> - - <Subtitle /> - <Description /> - <Primary /> - <ArgsTable /> - <Stories /> - </> - ), - }, - }, -}; - -export const DefDocsPage = () => <div>Default docs page</div>; - -export const SmallDocsPage = () => <div>Just primary story, </div>; - -SmallDocsPage.parameters = { - docs: { - page: () => ( - <> - <Title /> - <Primary /> - </> - ), - }, -}; - -export const CheckBoxProps = () => <div>Primary props displayed with a check box </div>; - -CheckBoxProps.parameters = { - docs: { - page: () => { - const [showProps, setShowProps] = React.useState(false); - return ( - <> - <Title /> - <Subtitle /> - <Description /> - <Primary /> - <label> - <input type="checkbox" checked={showProps} onChange={() => setShowProps(!showProps)} /> - <span>display props</span> - </label> - {showProps && <ArgsTable />} - </> - ); - }, - }, -}; - -export const CustomLabels = () => <div>Display custom title, Subtitle, Description</div>; - -CustomLabels.parameters = { - docs: { - page: () => ( - <> - <Title>Custom title - Custom sub title - Custom description - - - - - ), - }, -}; - -export const CustomStoriesFilter = () =>
Displays ALL stories (not excluding first one)
; - -CustomStoriesFilter.parameters = { - docs: { - page: () => , - }, -}; - -export const MultipleComponents = () => ( - - - - - -); - -MultipleComponents.storyName = 'Many Components'; - -MultipleComponents.parameters = { - component: ButtonGroup, - subcomponents: { - SubGroup, - 'Docgen Button': DocgenButton, - 'Base Button': BaseButton, - }, - docs: { - page: () => ( - <> - - <Subtitle /> - <Description /> - <Primary name="Many Components" /> - <ArgsTable /> - </> - ), - }, -}; - -export const ComponentsProps = () => <div>Display multiple prop tables in tabs</div>; - -ComponentsProps.subcomponents = { - 'Docgen Button': DocgenButton, - 'Base Button': BaseButton, -}; - -ComponentsProps.parameters = { - docs: { - page: () => ( - <> - <Title>Multiple prop tables - - Here's what happens when your component has some related components - - - - ), - }, -}; diff --git a/code/examples/official-storybook/stories/addon-docs/addon-docs.stories.js b/code/examples/official-storybook/stories/addon-docs/addon-docs.stories.js deleted file mode 100644 index 5ed4abd107f2..000000000000 --- a/code/examples/official-storybook/stories/addon-docs/addon-docs.stories.js +++ /dev/null @@ -1,52 +0,0 @@ -import React from 'react'; -import notes from '../notes/notes.md'; -import mdxNotes from '../notes/notes.mdx'; -import { DocgenButton } from '../../components/DocgenButton'; - -// const docsTitle = (title) => `Docs/${title}`; - -export default { - // FIXME dynamic title - // title: `Addons/${docsTitle('stories')}`, - title: 'Addons/Docs/stories', - component: DocgenButton, -}; - -export const Basic = () =>
Click docs tab to see basic docs
; - -export const NoDocs = () =>
Click docs tab to see no docs error
; -NoDocs.storyName = 'no docs'; -NoDocs.parameters = { docs: { page: null } }; - -export const WithNotes = () =>
Click docs tab to see DocsPage docs
; -WithNotes.storyName = 'with notes'; -WithNotes.parameters = { notes }; - -export const WithInfo = () =>
Click docs tab to see DocsPage docs
; -WithInfo.storyName = 'with info'; - -WithInfo.parameters = { - info: 'some user info string', -}; - -export const MdxOverride = () =>
Click docs tab to see MDX-overridden docs
; -MdxOverride.storyName = 'mdx override'; - -MdxOverride.parameters = { - docs: { page: mdxNotes }, -}; - -export const JsxOverride = () =>
Click docs tab to see JSX-overridden docs
; -JsxOverride.storyName = 'jsx override'; - -JsxOverride.parameters = { - docs: { page: () =>
Hello docs
}, -}; - -export const DocsDisable = () =>
This story shouldn't show up in DocsPage
; - -DocsDisable.parameters = { - docs: { disable: true }, -}; - -export const LargerThanPreview = () =>
HUGE
; diff --git a/code/examples/official-storybook/stories/addon-docs/array-subcomponents.stories.js b/code/examples/official-storybook/stories/addon-docs/array-subcomponents.stories.js deleted file mode 100644 index c42ffd6048c2..000000000000 --- a/code/examples/official-storybook/stories/addon-docs/array-subcomponents.stories.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import Button from '../../components/TsButton'; - -export default { - title: 'Addons/Docs/Subcomponents array', - component: Button, - subcomponents: [Button], -}; - -export const Basic = () => ; diff --git a/code/examples/official-storybook/stories/addon-docs/dynamic-title.stories.js b/code/examples/official-storybook/stories/addon-docs/dynamic-title.stories.js deleted file mode 100644 index 08c5b3197bdb..000000000000 --- a/code/examples/official-storybook/stories/addon-docs/dynamic-title.stories.js +++ /dev/null @@ -1,9 +0,0 @@ -// const getTitle = () => `Addons/Docs/${['dynamic title'][0]}`; - -export default { - // FIXME dynamic title - // title: getTitle(), - title: 'Addons/Docs/dynamic title', -}; - -export const Basic = () => 'Story with title that is evaluated in runtime'; diff --git a/code/examples/official-storybook/stories/addon-docs/memo.stories.js b/code/examples/official-storybook/stories/addon-docs/memo.stories.js deleted file mode 100644 index 6a371f8b770a..000000000000 --- a/code/examples/official-storybook/stories/addon-docs/memo.stories.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { MemoButton } from '../../components/MemoButton'; - -export default { - title: 'Addons/Docs/Memo', - component: MemoButton, - parameters: { - chromatic: { disable: true }, - docs: { source: { type: 'dynamic' } }, - }, -}; - -export const DisplaysCorrectly = () => ; -DisplaysCorrectly.storyName = 'Displays components with memo correctly'; diff --git a/code/examples/official-storybook/stories/addon-docs/mixed-leaves-component.stories.js b/code/examples/official-storybook/stories/addon-docs/mixed-leaves-component.stories.js deleted file mode 100644 index 3d6a49874f1c..000000000000 --- a/code/examples/official-storybook/stories/addon-docs/mixed-leaves-component.stories.js +++ /dev/null @@ -1,13 +0,0 @@ -// This example exists solely to demonstrate nav hierarchy -// in --docs mode when a folder contains both a component and -// individual stories -// -// See also ./mixed-leaves-folder.stories.js - -export default { - title: 'Addons/Docs/Mixed Leaves/Component', - parameters: { chromatic: { disable: true } }, -}; - -export const B = () => 'b'; -export const C = () => 'c'; diff --git a/code/examples/official-storybook/stories/addon-docs/mixed-leaves-folder.stories.js b/code/examples/official-storybook/stories/addon-docs/mixed-leaves-folder.stories.js deleted file mode 100644 index 2f9216606fe9..000000000000 --- a/code/examples/official-storybook/stories/addon-docs/mixed-leaves-folder.stories.js +++ /dev/null @@ -1,12 +0,0 @@ -// This example exists solely to demonstrate nav hierarchy -// in --docs mode when a folder contains both a component and -// individual stories -// -// See also ./mixed-leaves-component.stories.js - -export default { - title: 'Addons/Docs/Mixed Leaves', - parameters: { chromatic: { disable: true } }, -}; - -export const A = () => 'a'; diff --git a/code/examples/official-storybook/stories/addon-docs/source.stories.tsx b/code/examples/official-storybook/stories/addon-docs/source.stories.tsx deleted file mode 100644 index e9a671086f9a..000000000000 --- a/code/examples/official-storybook/stories/addon-docs/source.stories.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; -import Button from '../../components/TsButton'; - -export default { - title: 'Addons/Docs/Source', - component: Button, - argTypes: { - children: { control: 'text' }, - type: { control: 'text' }, - }, - parameters: { - chromatic: { disable: true }, - }, -}; - -const Template = (args) => ; - -export const ForceCodeSource = Template.bind({}); -ForceCodeSource.args = { ...Basic.args }; -ForceCodeSource.parameters = { docs: { source: { type: 'code' } } }; - -export const CustomSource = Template.bind({}); -CustomSource.args = { ...Basic.args }; -CustomSource.parameters = { docs: { source: { code: 'custom source' } } }; - -export const NoSource = Template.bind({}); -NoSource.args = { ...Basic.args }; -NoSource.parameters = { docs: { source: { code: null } } }; diff --git a/code/examples/official-storybook/stories/addon-docs/subcomponents.stories.js b/code/examples/official-storybook/stories/addon-docs/subcomponents.stories.js deleted file mode 100644 index 2fa7db68a0b9..000000000000 --- a/code/examples/official-storybook/stories/addon-docs/subcomponents.stories.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { DocgenButton } from '../../components/DocgenButton'; -import { ButtonGroup } from '../../components/ButtonGroup'; - -export default { - title: 'Addons/Docs/ButtonGroup', - component: ButtonGroup, - parameters: { viewMode: 'docs' }, - subcomponents: { DocgenButton }, -}; - -export const Basic = () => ( - - - - -); diff --git a/code/examples/official-storybook/stories/addon-docs/transform-source.stories.js b/code/examples/official-storybook/stories/addon-docs/transform-source.stories.js deleted file mode 100644 index b6ae7a8657a8..000000000000 --- a/code/examples/official-storybook/stories/addon-docs/transform-source.stories.js +++ /dev/null @@ -1,25 +0,0 @@ -export default { - title: 'Addons/Docs/transformSource', - parameters: { - docs: { - transformSource(src, ctx) { - return `// We transformed this!\n const example = ${src};`; - }, - }, - }, -}; - -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 = { - docs: { source: { type: 'dynamic' } }, -}; - -export const Auto = () => 'StoryType "AUTO" story which has source transformed'; -Dynamic.parameters = { - docs: { source: { type: 'auto' } }, -}; diff --git a/code/examples/official-storybook/stories/addon-docs/ts-button.stories.tsx b/code/examples/official-storybook/stories/addon-docs/ts-button.stories.tsx deleted file mode 100644 index e0a2b613a1a1..000000000000 --- a/code/examples/official-storybook/stories/addon-docs/ts-button.stories.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import * as React from 'react'; -import Button, { Type } from '../../components/TsButton'; - -export default { - title: 'Addons/Docs/TsButton', - component: Button, - parameters: { - viewMode: 'story', - }, -}; - -type Story = () => any; - -export const SimpleButton: Story = () => { - const x = 0; - return ; -}; - -const typeOptions = { - Default: 'default', - Action: 'action', -}; - -export const WithType = () => ; diff --git a/scripts/sandbox.ts b/scripts/sandbox.ts index b9f6cb1d717c..f0ac8cb4dc50 100644 --- a/scripts/sandbox.ts +++ b/scripts/sandbox.ts @@ -272,7 +272,7 @@ async function addStories(paths: string[], { mainConfig }: { mainConfig: ConfigF .map(([p]) => ({ directory: path.join('..', '..', '..', 'code', p), titlePrefix: p.split('/').slice(-4, -2).join('/'), - files: '*.stories.@(js|jsx|ts|tsx)', + files: '**/*.stories.@(js|jsx|ts|tsx)', })); mainConfig.setFieldValue(['stories'], [...stories, ...extraStories]);