diff --git a/code/examples/react-ts/src/docs2/MetaOf.mdx b/code/addons/docs/template/stories/docs2/MetaOf.mdx similarity index 75% rename from code/examples/react-ts/src/docs2/MetaOf.mdx rename to code/addons/docs/template/stories/docs2/MetaOf.mdx index f48a75b6bd58..7bb445673c5c 100644 --- a/code/examples/react-ts/src/docs2/MetaOf.mdx +++ b/code/addons/docs/template/stories/docs2/MetaOf.mdx @@ -1,5 +1,5 @@ import { Meta, Story, Stories } from '@storybook/addon-docs'; -import * as ButtonStories from '../button.stories'; +import * as ButtonStories from './button.stories.ts'; diff --git a/code/examples/react-ts/src/docs2/NoTitle.mdx b/code/addons/docs/template/stories/docs2/NoTitle.mdx similarity index 100% rename from code/examples/react-ts/src/docs2/NoTitle.mdx rename to code/addons/docs/template/stories/docs2/NoTitle.mdx diff --git a/code/examples/react-ts/src/docs2/Title.mdx b/code/addons/docs/template/stories/docs2/Title.mdx similarity index 60% rename from code/examples/react-ts/src/docs2/Title.mdx rename to code/addons/docs/template/stories/docs2/Title.mdx index 1a32a98731b2..17e53867f95b 100644 --- a/code/examples/react-ts/src/docs2/Title.mdx +++ b/code/addons/docs/template/stories/docs2/Title.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/addon-docs'; - + # Docs with title diff --git a/code/addons/docs/template/stories/docs2/button.stories.ts b/code/addons/docs/template/stories/docs2/button.stories.ts new file mode 100644 index 000000000000..2c2de80caa51 --- /dev/null +++ b/code/addons/docs/template/stories/docs2/button.stories.ts @@ -0,0 +1,21 @@ +import globalThis from 'global'; + +export default { + component: globalThis.Components.Button, + args: { onClick: () => console.log('clicked!') }, + parameters: { + chromatic: { disable: true }, + }, +}; + +export const Basic = { + args: { children: 'Basic' }, +}; + +export const One = { + args: { children: 'One' }, +}; + +export const Two = { + args: { children: 'Two' }, +}; diff --git a/code/addons/docs/template/stories/docspage/iframe.stories.ts b/code/addons/docs/template/stories/docspage/iframe.stories.ts new file mode 100644 index 000000000000..e1fb4bb43524 --- /dev/null +++ b/code/addons/docs/template/stories/docspage/iframe.stories.ts @@ -0,0 +1,12 @@ +import globalThis from 'global'; + +export default { + component: globalThis.Components.Button, + args: { children: 'Rendered in iframe' }, + parameters: { + chromatic: { disable: true }, + docs: { iframeHeight: 120, inlineStories: true }, + }, +}; + +export const Basic = {}; diff --git a/code/addons/docs/template/stories/stories-mdx/basic.stories.mdx b/code/addons/docs/template/stories/stories-mdx/basic.stories.mdx new file mode 100644 index 000000000000..27236621aeb9 --- /dev/null +++ b/code/addons/docs/template/stories/stories-mdx/basic.stories.mdx @@ -0,0 +1,28 @@ +import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'; +import globalThis from 'global'; + + + +# MDX Stories + +This file demonstrates defining stories inside MDX. + + + + + + + + + + diff --git a/code/examples/official-storybook/stories/addon-docs/colorpalette.stories.mdx b/code/addons/docs/template/stories/stories-mdx/colorpalette.stories.mdx similarity index 92% rename from code/examples/official-storybook/stories/addon-docs/colorpalette.stories.mdx rename to code/addons/docs/template/stories/stories-mdx/colorpalette.stories.mdx index 98aed2ad2a6c..c038dc2638ac 100644 --- a/code/examples/official-storybook/stories/addon-docs/colorpalette.stories.mdx +++ b/code/addons/docs/template/stories/stories-mdx/colorpalette.stories.mdx @@ -1,6 +1,6 @@ import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs'; - + + +# Legacy CSF in MDX Stories + +This file demonstrates legacy reuse of CSF stories inside MDX. This mechanism has been +overhauled and improved in 7.0, and the legacy mode is now deprecated and will be +removed in 8.0. + + + + + + + + + + + +## Duplicate stories + +Reference story by ID to show it multiple times in a page. + + + + diff --git a/code/examples/angular-cli/src/stories/addons/docs/markdown.stories.mdx b/code/addons/docs/template/stories/stories-mdx/markdown.stories.mdx similarity index 93% rename from code/examples/angular-cli/src/stories/addons/docs/markdown.stories.mdx rename to code/addons/docs/template/stories/stories-mdx/markdown.stories.mdx index f63bebdf5b03..44b053c61619 100644 --- a/code/examples/angular-cli/src/stories/addons/docs/markdown.stories.mdx +++ b/code/addons/docs/template/stories/stories-mdx/markdown.stories.mdx @@ -1,6 +1,10 @@ import { Meta } from '@storybook/addon-docs'; - + + +# Markdown + +This is a basic **docs-only MDX** that demonstrates a whole mess of Mardown formatting. # h1 Heading @@ -135,6 +139,8 @@ Right aligned columns [link to in page anchor](#h1-heading) +[link to another story (docs, without prefix)](/docs/addons-docs-docs-only--page) + [link to another story (docs)](?path=/docs/addons-docs-docs-only--page) [link to another story (canvas)](?path=/story/addons-docs-buttongroup--basic) diff --git a/code/addons/docs/template/stories/stories-mdx/play-functions.stories.mdx b/code/addons/docs/template/stories/stories-mdx/play-functions.stories.mdx new file mode 100644 index 000000000000..ac65c995420f --- /dev/null +++ b/code/addons/docs/template/stories/stories-mdx/play-functions.stories.mdx @@ -0,0 +1,32 @@ +import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'; +import globalThis from 'global'; + + console.log('component play')} +/> + +# MDX Play function Stories + +This file demonstrates defining stories inside MDX. + + + + + + + console.log('story play')} + /> + diff --git a/code/examples/angular-cli/src/stories/addons/docs/__snapshots__/addon-docs.stories.storyshot b/code/examples/angular-cli/src/stories/addons/docs/__snapshots__/addon-docs.stories.storyshot deleted file mode 100644 index 5c919c4f289b..000000000000 --- a/code/examples/angular-cli/src/stories/addons/docs/__snapshots__/addon-docs.stories.storyshot +++ /dev/null @@ -1,25 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Addons/Docs with some emoji 1`] = ` - - - - - -`; - -exports[`Storyshots Addons/Docs with text 1`] = ` - - - - - -`; diff --git a/code/examples/angular-cli/src/stories/addons/docs/__snapshots__/duplicate.stories.storyshot b/code/examples/angular-cli/src/stories/addons/docs/__snapshots__/duplicate.stories.storyshot deleted file mode 100644 index a763f20505b3..000000000000 --- a/code/examples/angular-cli/src/stories/addons/docs/__snapshots__/duplicate.stories.storyshot +++ /dev/null @@ -1,22 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Addons/Docs/DuplicateStories Basic 1`] = ` - - - - - -`; diff --git a/code/examples/angular-cli/src/stories/addons/docs/__snapshots__/simple.stories.storyshot b/code/examples/angular-cli/src/stories/addons/docs/__snapshots__/simple.stories.storyshot deleted file mode 100644 index 71a264590f50..000000000000 --- a/code/examples/angular-cli/src/stories/addons/docs/__snapshots__/simple.stories.storyshot +++ /dev/null @@ -1,13 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Addons/Docs/SimpleButton with text 1`] = ` - - - - - -`; diff --git a/code/examples/angular-cli/src/stories/addons/docs/__snapshots__/template.stories.storyshot b/code/examples/angular-cli/src/stories/addons/docs/__snapshots__/template.stories.storyshot deleted file mode 100644 index bad4cdd4bef1..000000000000 --- a/code/examples/angular-cli/src/stories/addons/docs/__snapshots__/template.stories.storyshot +++ /dev/null @@ -1,43 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Addons/Docs/MDX with Template Disabled 1`] = ` - - - - - -`; - -exports[`Storyshots Addons/Docs/MDX with Template Normal 1`] = ` - - - - - -`; diff --git a/code/examples/angular-cli/src/stories/addons/docs/addon-docs.stories.mdx b/code/examples/angular-cli/src/stories/addons/docs/addon-docs.stories.mdx deleted file mode 100644 index 49ae5dd72ec8..000000000000 --- a/code/examples/angular-cli/src/stories/addons/docs/addon-docs.stories.mdx +++ /dev/null @@ -1,88 +0,0 @@ -import { moduleMetadata } from '@storybook/angular'; -import { Story, Meta, ArgsTable } from '@storybook/addon-docs'; -import { Welcome, Button } from '../.././angular-demo'; -import { DocButtonComponent } from './doc-button/doc-button.component'; - -# Storybook Docs for Angular - -Storybook supports every major view layer: -React, Vue, Angular, Ember, React Native, etc. - -Storybook Docs does too. - - - -Hallelujah! Angular is working out of the box without modification. -How you like them apples?! - -## Component Declaration - -Just like in React, we first declare our component. - - - -This declaration doesn't show up in the MDX output. - -## SB5 "Classic" Angular Stories - -Next let's declare some stories. - -But first let's review how it's done in SB5 for Angular. - -``` -storiesOf('Button', module) - .addDecorator( - moduleMetadata({ - declarations: [Button], - }) - ) - .add('with text', () => ({ - template: ``, - props: { - text: 'Hello Button', - onClick: () => {}, - }, - })); -``` - -## MDX Stories - -Similarly, here's how we do it in the Docs MDX format. We've already added the decorator above in the component declaration, so we just need to declare a story. - - - {{ - template: ``, - props: { - text: 'hello button', - onClick: () => {}, - }, - }} - - -## Another one - -Let's add another one. The UI updates automatically as you'd expect. - - - {{ - template: ``, - props: { - text: 'πŸ˜€ 😎 πŸ‘ πŸ’―', - onClick: () => {}, - }, - }} - - -## Props - -We can automatically generate props tables from Angular components: - - - -## More info - -For more info, check out the [Storybook Docs Technical Preview](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing). - -We want your feedback to help make this more useful. - -Follow us on Twitter for more short demos & project updates! β€οΈπŸ“ˆπŸ›  diff --git a/code/examples/angular-cli/src/stories/addons/docs/docs-only.stories.mdx b/code/examples/angular-cli/src/stories/addons/docs/docs-only.stories.mdx deleted file mode 100644 index ce2bd7186767..000000000000 --- a/code/examples/angular-cli/src/stories/addons/docs/docs-only.stories.mdx +++ /dev/null @@ -1,80 +0,0 @@ -import { Meta, Canvas } from '@storybook/addon-docs'; - - - -# Documentation-only MDX - -# [Link](http://https://storybook.js.org/) in heading - -This file is a documentation-only MDX file, i.e. it doesn't contain any `` definitions. - -Therefore, it shows up in the [navigation](https://github.com/) UI as a document icon. - -It can, however, still contain a `` definition: - - -
-

This is a preview block within a documentation-only MDX file

-

- You may need to wrap certain documentation in a `Preview` in order to reset the styles for use - cases such as documenting a design system. -

-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -## Bottom - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc faucibus urna id nibh mollis, varius facilisis sapien scelerisque. Pellentesque lobortis convallis mi, at accumsan nisl sollicitudin id. Aliquam vitae elementum libero. Nulla blandit est turpis, a consectetur ante rhoncus a. Integer eu quam eu mauris pharetra elementum. Donec ex nisl, tincidunt ut tincidunt id, bibendum ut sem. Sed in congue tortor, a congue dolor. Fusce a magna vel nulla laoreet sagittis. - -# [Link](https://storybook.js.org/) in heading - -## [Link](https://storybook.js.org/) in heading - -### [Link](https://storybook.js.org/) in heading - -#### [Link](https://storybook.js.org/) in heading - -##### [Link](https://storybook.js.org/) in heading - -###### [Link](https://storybook.js.org/) in heading - -He stared at the clinic, [Molly](https://storybook.js.org/) took him to the _[Tank War](https://storybook.js.org/)_, mouth touched with hot gold as a gliding cursor struck sparks from the wall of a **[skyscraper](https://storybook.js.org/)** canyon. diff --git a/code/examples/angular-cli/src/stories/addons/docs/duplicate.stories.mdx b/code/examples/angular-cli/src/stories/addons/docs/duplicate.stories.mdx deleted file mode 100644 index e5c457c04083..000000000000 --- a/code/examples/angular-cli/src/stories/addons/docs/duplicate.stories.mdx +++ /dev/null @@ -1,21 +0,0 @@ -import {Story, Meta, Canvas} from '@storybook/addon-docs'; -import {DocButtonComponent} from "./doc-button/doc-button.component"; -import * as stories from './doc-button/doc-button.stories'; - - - -# Duplicate stories - -Using the same component more than once. Note the imported story can only be used once and thereafter the links have to be used - - - - - - - - - - - - diff --git a/code/examples/angular-cli/src/stories/addons/docs/iframe/__snapshots__/iframe.stories.storyshot b/code/examples/angular-cli/src/stories/addons/docs/iframe/__snapshots__/iframe.stories.storyshot deleted file mode 100644 index 77cf9353816b..000000000000 --- a/code/examples/angular-cli/src/stories/addons/docs/iframe/__snapshots__/iframe.stories.storyshot +++ /dev/null @@ -1,13 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Addons/Docs/Iframe Basic 1`] = ` - - - - - -`; diff --git a/code/examples/angular-cli/src/stories/addons/docs/iframe/iframe.stories.ts b/code/examples/angular-cli/src/stories/addons/docs/iframe/iframe.stories.ts deleted file mode 100644 index c943c0204aea..000000000000 --- a/code/examples/angular-cli/src/stories/addons/docs/iframe/iframe.stories.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Button } from '../../../angular-demo'; - -export default { - title: 'Addons/Docs/Iframe', - component: Button, - parameters: { docs: { iframeHeight: 120, inlineStories: true } }, -}; - -export const Basic = (args) => ({ - props: args, -}); -Basic.args = { text: 'Add πŸ‘Ύ' }; diff --git a/code/examples/angular-cli/src/stories/addons/docs/simple.stories.mdx b/code/examples/angular-cli/src/stories/addons/docs/simple.stories.mdx deleted file mode 100644 index d60148f46b21..000000000000 --- a/code/examples/angular-cli/src/stories/addons/docs/simple.stories.mdx +++ /dev/null @@ -1,30 +0,0 @@ -import { Story, Meta, ArgsTable, Source } from '@storybook/addon-docs'; -import { Button } from '../.././angular-demo'; - - - -# Simple Button - - - {(args) => ({ - props: { - text: args.text, - onClick: () => {}, - }, - })} - - - - - diff --git a/code/examples/angular-cli/src/stories/addons/docs/template.stories.mdx b/code/examples/angular-cli/src/stories/addons/docs/template.stories.mdx deleted file mode 100644 index ffbde5cdf685..000000000000 --- a/code/examples/angular-cli/src/stories/addons/docs/template.stories.mdx +++ /dev/null @@ -1,35 +0,0 @@ -import { Meta, Story, Canvas } from '@storybook/addon-docs'; -import { DocButtonComponent } from './doc-button/doc-button.component'; - - - -# DocButton - -With `MDX` we can define a story for a component right in the middle of the documentation - -export const Template = (args) => ({ props: args }); - - - - {Template.bind({})} - - - -Here's a story that disables the button using args: - - - - {Template.bind({})} - - diff --git a/code/examples/html-kitchen-sink/stories/addon-docs.stories.mdx b/code/examples/html-kitchen-sink/stories/addon-docs.stories.mdx deleted file mode 100644 index 8ac0ce1377da..000000000000 --- a/code/examples/html-kitchen-sink/stories/addon-docs.stories.mdx +++ /dev/null @@ -1,58 +0,0 @@ -import { Story, Canvas, Meta } from '@storybook/addon-docs'; - -# Storybook Docs for HTML - - - -## Story definition - -Hallelujah! HTML is working out of the box without modification. -How you like them apples?! - - - {'

Hello World

'} - - -## Function stories - - - {() => { - const btn = document.createElement('button'); - btn.innerHTML = 'Hello Button'; - return btn; - }} - - -## Standard source - - - - {'

Standard source

'} - - - -## Custom source - - - - {'

Custom source

'} - - - -## Transformed source - - - `transformed: ${src}` } }} - > - {'

Some source

'} - - - -## Story reference - -You can also reference an existing story from within your MDX file. - - diff --git a/code/examples/official-storybook/stories/addon-docs/addon-docs-mdx.stories.mdx b/code/examples/official-storybook/stories/addon-docs/addon-docs-mdx.stories.mdx deleted file mode 100644 index 44ebc1911a3d..000000000000 --- a/code/examples/official-storybook/stories/addon-docs/addon-docs-mdx.stories.mdx +++ /dev/null @@ -1,217 +0,0 @@ -import { - Story, - Canvas, - ArgsTable, - Source, - Description, - ColorPalette, - ColorItem, - Meta, -} from '@storybook/addon-docs'; -import styled from 'styled-components'; -import { Button } from '../../components/react-demo'; -import TsButton from '../../components/TsButton'; -import { DocgenButton } from '../../components/DocgenButton'; -import MdNotes from '../notes/notes.md'; -import MdxNotes from '../notes/notes.mdx'; - -
{storyFn()}
]} - parameters={{ notes: 'component notes' }} -/> - -# Selected - - - - - - - - - - - -## Transclusion - -### Markdown - - - -### MDX - - - -## A random color ColorPalette - - - - - - - - -## Getting into details - - - -export const nonStory1 = 'foo'; // a non-story export - -export const nonStory2 = () => ; // another one - - - - - - - - - - - - - - - Plain text - - - - - - - - <>This is an iframe! - - -
{storyFn()}
]} -> - <>Story decorators - - - -

Hello Hugh

- - - - {() => { - return
function result
; - }} - - - - - - - - -## Configurable height - - - - - -export const FixedLayoutExample = styled.div(({ theme }) => ({ - '&, header, aside, main, footer': { - position: 'fixed', - top: 0, - right: 0, - bottom: 0, - left: 0, - }, - header: { - height: '3rem', - background: 'red', - }, - 'aside, main': { - top: '3rem', - }, - aside: { - width: '10rem', - background: 'coral', - }, - main: { - left: '10rem', - background: 'yellow', - }, - footer: { - top: 'auto', - height: '3rem', - background: 'green', - }, -})); - -Fixed layout requires custom `height` since it can't be determined. - - - - -
-