diff --git a/addons/docs/angular/index.js b/addons/docs/angular/index.js new file mode 100644 index 000000000000..38c1756201b7 --- /dev/null +++ b/addons/docs/angular/index.js @@ -0,0 +1 @@ +module.exports = require('../common/index'); diff --git a/addons/docs/angular/preset.js b/addons/docs/angular/preset.js new file mode 100644 index 000000000000..a9b8af2cce0a --- /dev/null +++ b/addons/docs/angular/preset.js @@ -0,0 +1 @@ +module.exports = require('../common/preset'); diff --git a/examples/angular-cli/.storybook/config.ts b/examples/angular-cli/.storybook/config.ts index 4b5a2f1a4993..7510105da2c5 100644 --- a/examples/angular-cli/.storybook/config.ts +++ b/examples/angular-cli/.storybook/config.ts @@ -1,6 +1,6 @@ -/* eslint-disable global-require */ -import { configure, addParameters, addDecorator } from '@storybook/angular'; +import { load, addParameters, addDecorator } from '@storybook/angular'; import { withA11y } from '@storybook/addon-a11y'; +import { DocsPage } from '@storybook/addon-docs/blocks'; import addCssWarning from '../src/cssWarning'; addDecorator(withA11y); @@ -9,16 +9,12 @@ addCssWarning(); addParameters({ options: { hierarchyRootSeparator: /\|/, + docs: { + iframeHeight: '60px', + }, }, + docs: DocsPage, }); -function loadStories() { - // put welcome screen at the top of the list so it's the first one displayed - require('../src/stories'); - - // automatically import all story ts files that end with *.stories.ts - const req = require.context('../src/stories', true, /\.stories\.ts$/); - req.keys().forEach(filename => req(filename)); -} - -configure(loadStories, module); +load(require.context('../src/stories', true, /\.stories\.ts$/), module); +load(require.context('../src/stories', true, /\.stories\.mdx$/), module); diff --git a/examples/angular-cli/.storybook/presets.js b/examples/angular-cli/.storybook/presets.js new file mode 100644 index 000000000000..d8d6ff57fc33 --- /dev/null +++ b/examples/angular-cli/.storybook/presets.js @@ -0,0 +1,8 @@ +module.exports = [ + { + name: '@storybook/addon-docs/angular/preset', + options: { + configureJSX: true, + }, + }, +]; diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json index fcf739dd1f47..1db3ec95ea31 100644 --- a/examples/angular-cli/package.json +++ b/examples/angular-cli/package.json @@ -41,12 +41,14 @@ "@storybook/addon-jest": "5.2.0-alpha.36", "@storybook/addon-knobs": "5.2.0-alpha.36", "@storybook/addon-links": "5.2.0-alpha.36", + "@storybook/addon-docs": "5.2.0-alpha.36", "@storybook/addon-notes": "5.2.0-alpha.36", "@storybook/addon-options": "5.2.0-alpha.36", "@storybook/addon-storyshots": "5.2.0-alpha.36", "@storybook/addon-storysource": "5.2.0-alpha.36", "@storybook/addons": "5.2.0-alpha.36", "@storybook/angular": "5.2.0-alpha.36", + "@storybook/source-loader": "5.2.0-alpha.36", "@types/core-js": "^2.5.0", "@types/jest": "^24.0.11", "@types/node": "~12.0.2", diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot index b2ec516143dc..aceb663dd9cd 100644 --- a/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot @@ -7,10 +7,10 @@ exports[`Storyshots Addon|Actions Action and method 1`] = ` target={[Function ViewContainerRef_]} > @@ -25,10 +25,10 @@ exports[`Storyshots Addon|Actions Action only 1`] = ` target={[Function ViewContainerRef_]} > diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-background.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-background.stories.storyshot index e1225c5c8ad3..2e50937f7f3f 100644 --- a/examples/angular-cli/src/stories/__snapshots__/addon-background.stories.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/addon-background.stories.storyshot @@ -72,11 +72,11 @@ exports[`Storyshots Addon|Background background template 1`] = ` > diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-centered.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-centered.stories.storyshot index fbbda4a2a622..518603dd9fd3 100644 --- a/examples/angular-cli/src/stories/__snapshots__/addon-centered.stories.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/addon-centered.stories.storyshot @@ -92,11 +92,11 @@ exports[`Storyshots Addon|Centered centered template 1`] = ` style="margin: auto; max-height: 100%;" > diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot index 3befab713faa..d582fdc9b04b 100644 --- a/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot @@ -7,10 +7,10 @@ exports[`Storyshots Addon|Links button with link to another story 1`] = ` target={[Function ViewContainerRef_]} > diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot index cb225344a79d..ce3742208373 100644 --- a/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot @@ -7,10 +7,10 @@ exports[`Storyshots Addon|Notes Note with HTML 1`] = ` target={[Function ViewContainerRef_]} > @@ -25,10 +25,10 @@ exports[`Storyshots Addon|Notes Simple note 1`] = ` target={[Function ViewContainerRef_]} > diff --git a/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot index 0025d65968cf..a69a126861f6 100644 --- a/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot @@ -7,12 +7,12 @@ exports[`Storyshots Core|Parameters passed to story 1`] = ` target={[Function ViewContainerRef_]} > diff --git a/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot index 5b5535931a45..2dda80850d23 100644 --- a/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot @@ -8,11 +8,11 @@ exports[`Storyshots Custom|Style Default 1`] = ` > @@ -29,11 +29,11 @@ exports[`Storyshots Custom|Style With Knobs 1`] = ` > diff --git a/examples/angular-cli/src/stories/__snapshots__/index.storyshot b/examples/angular-cli/src/stories/__snapshots__/index.stories.storyshot similarity index 81% rename from examples/angular-cli/src/stories/__snapshots__/index.storyshot rename to examples/angular-cli/src/stories/__snapshots__/index.stories.storyshot index 34b1c6b6e163..6ffc693b1131 100644 --- a/examples/angular-cli/src/stories/__snapshots__/index.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/index.stories.storyshot @@ -8,11 +8,11 @@ exports[`Storyshots Button with some emoji 1`] = ` > @@ -29,11 +29,11 @@ exports[`Storyshots Button with text 1`] = ` > @@ -50,47 +50,47 @@ exports[`Storyshots Welcome to Storybook 1`] = ` >

Welcome to storybook

This is a UI component dev environment for your app.

We've added some basic stories inside the src/stories directory.
A story is a single state of one or more UI components. You can have as many stories as you want.
(Basically a story is like a visual test case.)

See these sample @@ -98,7 +98,7 @@ exports[`Storyshots Welcome to Storybook 1`] = ` for a component called Button @@ -106,26 +106,26 @@ exports[`Storyshots Welcome to Storybook 1`] = ` .

Just like that, you can add your own components as stories.
You can also edit those components and see changes right away.
(Try editing the Button stories located at src/stories/index.js @@ -133,15 +133,15 @@ exports[`Storyshots Welcome to Storybook 1`] = ` .)

Usually we create stories with smaller UI components in the app.
Have a look at the

NOTE:
Have a look at the .storybook/webpack.config.js diff --git a/examples/angular-cli/src/stories/addon-docs.stories.mdx b/examples/angular-cli/src/stories/addon-docs.stories.mdx new file mode 100644 index 000000000000..318db4f30800 --- /dev/null +++ b/examples/angular-cli/src/stories/addon-docs.stories.mdx @@ -0,0 +1,82 @@ +import { moduleMetadata } from '@storybook/angular'; +import { Story, Meta } from '@storybook/addon-docs/blocks'; +import { Welcome, Button } from '@storybook/angular/demo'; +import { linkTo } from '@storybook/addon-links'; + +# 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: () => {}, + }, + }} + + +## 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/examples/angular-cli/src/stories/index.ts b/examples/angular-cli/src/stories/index.stories.ts similarity index 97% rename from examples/angular-cli/src/stories/index.ts rename to examples/angular-cli/src/stories/index.stories.ts index 2c1d1a624428..44f29c327388 100644 --- a/examples/angular-cli/src/stories/index.ts +++ b/examples/angular-cli/src/stories/index.stories.ts @@ -1,4 +1,3 @@ -/* eslint-disable no-console */ import { storiesOf, moduleMetadata } from '@storybook/angular'; import { Welcome, Button } from '@storybook/angular/demo'; import { linkTo } from '@storybook/addon-links'; diff --git a/examples/vue-kitchen-sink/src/stories/addon-docs.stories.mdx b/examples/vue-kitchen-sink/src/stories/addon-docs.stories.mdx index c6862e35a5b7..445657fe2a1f 100644 --- a/examples/vue-kitchen-sink/src/stories/addon-docs.stories.mdx +++ b/examples/vue-kitchen-sink/src/stories/addon-docs.stories.mdx @@ -5,7 +5,7 @@ import { Story, Preview, Meta } from '@storybook/addon-docs/blocks'; Storybook supports every major view layer: React, Vue, Angular, Ember, React Native, etc. -Storybook Docs will too. +Storybook Docs does too. @@ -17,7 +17,7 @@ Just like in React, we first declare our component. -This export doesn't show up in the MDX output. +This declaration doesn't show up in the MDX output. ## SB5 "Classic" Vue Stories @@ -34,7 +34,7 @@ storiesOf('Button', module) ## MDX Stories -Unsurprisingly, here's how we do it in the Docs MDX format: +Similarly, here's how we do it in the Docs MDX format: {{