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: () => (
- <>
-
-
-
-
-
-
- >
- ),
- },
- },
-};
-
-export const DefDocsPage = () => Default docs page
;
-
-export const SmallDocsPage = () => Just primary story,
;
-
-SmallDocsPage.parameters = {
- docs: {
- page: () => (
- <>
-
-
- >
- ),
- },
-};
-
-export const CheckBoxProps = () => Primary props displayed with a check box
;
-
-CheckBoxProps.parameters = {
- docs: {
- page: () => {
- const [showProps, setShowProps] = React.useState(false);
- return (
- <>
-
-
-
-
-
- {showProps && }
- >
- );
- },
- },
-};
-
-export const CustomLabels = () => Display custom title, Subtitle, Description
;
-
-CustomLabels.parameters = {
- docs: {
- page: () => (
- <>
- 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: () => (
- <>
-
-
-
-
-
- >
- ),
- },
-};
-
-export const ComponentsProps = () => Display multiple prop tables in tabs
;
-
-ComponentsProps.subcomponents = {
- 'Docgen Button': DocgenButton,
- 'Base Button': BaseButton,
-};
-
-ComponentsProps.parameters = {
- docs: {
- page: () => (
- <>
- 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 Basic = Template.bind({});
-Basic.args = {
- children: 'basic',
- somethingElse: { a: 2 },
-};
-
-export const NoArgs = () => ;
-
-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]);