From f49fdafd62f1be4a74fda721abd2cf66f405bce7 Mon Sep 17 00:00:00 2001 From: igor Date: Mon, 5 Feb 2018 17:24:06 +0200 Subject: [PATCH 1/5] Add hierarchyRootSeparator to angular examples --- examples/angular-cli/.storybook/addons.js | 1 + examples/angular-cli/.storybook/config.js | 5 + examples/angular-cli/package.json | 1 + .../addon-actions.stories.storyshot | 12 +- .../addon-knobs.stories.storyshot | 4 +- .../addon-links.stories.storyshot | 6 +- .../addon-notes.stories.storyshot | 12 +- .../custom-metadata.stories.storyshot | 60 ++-- .../custom-ng-content.stories.storyshot | 21 ++ .../custom-styles.stories.storyshot | 16 +- .../src/stories/__snapshots__/index.storyshot | 275 +++--------------- .../src/stories/addon-actions.stories.ts | 2 +- .../src/stories/addon-knobs.stories.ts | 2 +- .../src/stories/addon-links.stories.ts | 2 +- .../src/stories/addon-notes.stories.ts | 2 +- .../di.component.stories.storyshot | 90 ++++++ .../component-with-di/di.component.stories.ts | 2 +- .../styled.component.stories.storyshot | 38 +++ .../styled.component.stories.ts | 2 +- .../src/stories/custom-metadata.stories.ts | 6 +- .../src/stories/custom-ng-content.stories.ts | 15 + .../src/stories/custom-styles.stories.ts | 2 +- .../custom-cva-component.stories.storyshot | 25 ++ .../custom-cva-component.stories.ts | 2 +- examples/angular-cli/src/stories/index.ts | 18 +- .../inheritance.stories.storyshot | 36 +++ .../inheritance/inheritance.stories.ts | 2 +- 27 files changed, 357 insertions(+), 302 deletions(-) create mode 100644 examples/angular-cli/src/stories/__snapshots__/custom-ng-content.stories.storyshot create mode 100644 examples/angular-cli/src/stories/custom-ng-content.stories.ts diff --git a/examples/angular-cli/.storybook/addons.js b/examples/angular-cli/.storybook/addons.js index c558d2235028..85b68e06ab66 100644 --- a/examples/angular-cli/.storybook/addons.js +++ b/examples/angular-cli/.storybook/addons.js @@ -4,3 +4,4 @@ import '@storybook/addon-actions/register'; import '@storybook/addon-links/register'; import '@storybook/addon-notes/register'; import '@storybook/addon-knobs/register'; +import '@storybook/addon-options/register'; diff --git a/examples/angular-cli/.storybook/config.js b/examples/angular-cli/.storybook/config.js index 8fb37a998635..29275bdbc9e0 100644 --- a/examples/angular-cli/.storybook/config.js +++ b/examples/angular-cli/.storybook/config.js @@ -1,8 +1,13 @@ import { configure } from '@storybook/angular'; +import { setOptions } from '@storybook/addon-options'; import addCssWarning from '../src/cssWarning'; addCssWarning(); +setOptions({ + hierarchyRootSeparator: /\|/, +}); + function loadStories() { // put welcome screen at the top of the list so it's the first one displayed require('../src/stories'); diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json index cae500b863f6..2971f700c490 100644 --- a/examples/angular-cli/package.json +++ b/examples/angular-cli/package.json @@ -33,6 +33,7 @@ "@storybook/addon-actions": "^3.4.0-alpha.7", "@storybook/addon-links": "^3.4.0-alpha.7", "@storybook/addon-notes": "^3.4.0-alpha.7", + "@storybook/addon-options": "^3.4.0-alpha.7", "@storybook/addon-storyshots": "^3.4.0-alpha.7", "@storybook/addons": "^3.4.0-alpha.7", "@storybook/angular": "^3.4.0-alpha.7", 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 744f3a1be919..252d7be8acc7 100644 --- a/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot @@ -1,18 +1,18 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Storyshots Addon Actions Action and method 1`] = ` +exports[`Storyshots Addon|Actions Action and method 1`] = ` @@ -22,19 +22,19 @@ exports[`Storyshots Addon Actions Action and method 1`] = ` `; -exports[`Storyshots Addon Actions Action only 1`] = ` +exports[`Storyshots Addon|Actions Action only 1`] = ` diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot index 59e126d4c6db..c33cc5239ccc 100644 --- a/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Storyshots Addon Knobs All knobs 1`] = ` +exports[`Storyshots Addon|Knobs All knobs 1`] = ` `; -exports[`Storyshots Addon Knobs Simple 1`] = ` +exports[`Storyshots Addon|Knobs Simple 1`] = ` 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 94b5ff1c35a0..03dd16736718 100644 --- a/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot @@ -1,18 +1,18 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Storyshots Addon Notes Note with HTML 1`] = ` +exports[`Storyshots Addon|Notes Note with HTML 1`] = ` @@ -22,19 +22,19 @@ exports[`Storyshots Addon Notes Note with HTML 1`] = ` `; -exports[`Storyshots Addon Notes Simple note 1`] = ` +exports[`Storyshots Addon|Notes Simple note 1`] = ` diff --git a/examples/angular-cli/src/stories/__snapshots__/custom-metadata.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/custom-metadata.stories.storyshot index d927a530a22b..dc40ccce186f 100644 --- a/examples/angular-cli/src/stories/__snapshots__/custom-metadata.stories.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/custom-metadata.stories.storyshot @@ -1,34 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Storyshots Custom Pipe Default 1`] = ` - - -

- CustomPipe: foobar -

- - -`; - -exports[`Storyshots Custom Pipe/With Knobs NameComponent 1`] = ` - - -

- CustomPipe: foobar -

- - -`; - -exports[`Storyshots Custom ngModule metadata simple 1`] = ` +exports[`Storyshots Custom|Metadata simple 1`] = ` `; -exports[`Storyshots Custom ngModule metadata with knobs 1`] = ` +exports[`Storyshots Custom|Metadata with knobs 1`] = ` `; + +exports[`Storyshots Custom|Pipe Default 1`] = ` + + +

+ CustomPipe: foobar +

+ + +`; + +exports[`Storyshots Custom|Pipe/With Knobs NameComponent 1`] = ` + + +

+ CustomPipe: foobar +

+ + +`; diff --git a/examples/angular-cli/src/stories/__snapshots__/custom-ng-content.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/custom-ng-content.stories.storyshot new file mode 100644 index 000000000000..3616eacf80cd --- /dev/null +++ b/examples/angular-cli/src/stories/__snapshots__/custom-ng-content.stories.storyshot @@ -0,0 +1,21 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Custom|ng-content Default 1`] = ` + + + +
+

+ This is rendered in ng-content +

+
+ + + +`; 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 454a8bf5b983..0b26e9da8a43 100644 --- a/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Storyshots Custom Style Default 1`] = ` +exports[`Storyshots Custom|Style Default 1`] = ` @@ -25,24 +25,24 @@ exports[`Storyshots Custom Style Default 1`] = ` `; -exports[`Storyshots Custom Style With Knobs 1`] = ` +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.storyshot index 4b9cce2ec8be..30483889802a 100644 --- a/examples/angular-cli/src/stories/__snapshots__/index.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/index.storyshot @@ -6,19 +6,22 @@ exports[`Storyshots Button with some emoji 1`] = ` data={[Function Object]} target={[Function ViewContainerRef_]} > - - - - - + + + + - + + `; @@ -29,13 +32,6 @@ exports[`Storyshots Button with text 1`] = ` target={[Function ViewContainerRef_]} > - - -

- This is a template -

- - - - + + +`; + +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 @@ -90,14 +95,14 @@ exports[`Storyshots Button with text 1`] = ` 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.) @@ -106,12 +111,12 @@ exports[`Storyshots Button with text 1`] = `

See these sample @@ -120,7 +125,7 @@ exports[`Storyshots Button with text 1`] = ` for a component called Button @@ -131,24 +136,24 @@ exports[`Storyshots Button with text 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 @@ -156,7 +161,7 @@ exports[`Storyshots Button with text 1`] = ` stories located at src/stories/index.js @@ -167,17 +172,17 @@ exports[`Storyshots Button with text 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 @@ -225,190 +230,6 @@ exports[`Storyshots Button with text 1`] = ` - - `; - -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 - - stories - - for a component called - - - Button - - . - -

- - -

- - 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 - - .) - -

- - -

- - Usually we create stories with smaller UI components in the app. -
- - Have a look at the - - - Writing Stories - - - section in our documentation. - -

- - -

- - - - NOTE: - - - -
- - Have a look at the - - .storybook/webpack.config.js - - - to add webpack loaders and plugins you are using in this project. - -

- - -
- - - - -`; diff --git a/examples/angular-cli/src/stories/addon-actions.stories.ts b/examples/angular-cli/src/stories/addon-actions.stories.ts index 6820b38ce4cb..6e20fd02b1ac 100644 --- a/examples/angular-cli/src/stories/addon-actions.stories.ts +++ b/examples/angular-cli/src/stories/addon-actions.stories.ts @@ -2,7 +2,7 @@ import { storiesOf } from '@storybook/angular'; import { action } from '@storybook/addon-actions'; import { Button } from '@storybook/angular/demo'; -storiesOf('Addon Actions', module) +storiesOf('Addon|Actions', module) .add('Action only', () => ({ component: Button, props: { diff --git a/examples/angular-cli/src/stories/addon-knobs.stories.ts b/examples/angular-cli/src/stories/addon-knobs.stories.ts index 29708d2a8bb7..f4a1cd90b38c 100644 --- a/examples/angular-cli/src/stories/addon-knobs.stories.ts +++ b/examples/angular-cli/src/stories/addon-knobs.stories.ts @@ -16,7 +16,7 @@ import { import { SimpleKnobsComponent } from './knobs.component'; import { AllKnobsComponent } from './all-knobs.component'; -storiesOf('Addon Knobs', module) +storiesOf('Addon|Knobs', module) .addDecorator(withKnobs) .add('Simple', () => { const name = text('name', 'John Doe'); diff --git a/examples/angular-cli/src/stories/addon-links.stories.ts b/examples/angular-cli/src/stories/addon-links.stories.ts index c33f82b72565..61c583d620aa 100644 --- a/examples/angular-cli/src/stories/addon-links.stories.ts +++ b/examples/angular-cli/src/stories/addon-links.stories.ts @@ -2,7 +2,7 @@ import { linkTo } from '@storybook/addon-links'; import { storiesOf } from '@storybook/angular'; import { Button } from '@storybook/angular/demo'; -storiesOf('Another Button', module).add('button with link to another story', () => ({ +storiesOf('Addon|Links', module).add('button with link to another story', () => ({ component: Button, props: { text: 'Go to Welcome Story', diff --git a/examples/angular-cli/src/stories/addon-notes.stories.ts b/examples/angular-cli/src/stories/addon-notes.stories.ts index 64468bb5e256..c47e63d39cba 100644 --- a/examples/angular-cli/src/stories/addon-notes.stories.ts +++ b/examples/angular-cli/src/stories/addon-notes.stories.ts @@ -2,7 +2,7 @@ import { storiesOf } from '@storybook/angular'; import { withNotes } from '@storybook/addon-notes'; import { Button } from '@storybook/angular/demo'; -storiesOf('Addon Notes', module) +storiesOf('Addon|Notes', module) .add( 'Simple note', withNotes({ text: 'My notes on some button' })(() => ({ diff --git a/examples/angular-cli/src/stories/component-with-di/__snapshots__/di.component.stories.storyshot b/examples/angular-cli/src/stories/component-with-di/__snapshots__/di.component.stories.storyshot index 84e7b5be377d..eb31a6b0eec5 100644 --- a/examples/angular-cli/src/stories/component-with-di/__snapshots__/di.component.stories.storyshot +++ b/examples/angular-cli/src/stories/component-with-di/__snapshots__/di.component.stories.storyshot @@ -89,3 +89,93 @@ exports[`Storyshots Component dependencies inputs and inject dependencies with k `; + +exports[`Storyshots Custom|Dependencies inputs and inject dependencies 1`] = ` + + +
+ + +
+ All dependencies are defined: true +
+ + +
+ Title: Component dependencies +
+ + +
+ Injector: function Injector_(view, elDef) { + this.view = view; + this.elDef = elDef; + } +
+ + +
+ ElementRef: {"nativeElement":{}} +
+ + +
+ TestToken: 123 +
+ + +
+ + + + +`; + +exports[`Storyshots Custom|Dependencies inputs and inject dependencies with knobs 1`] = ` + + +
+ + +
+ All dependencies are defined: true +
+ + +
+ Title: Component dependencies +
+ + +
+ Injector: function Injector_(view, elDef) { + this.view = view; + this.elDef = elDef; + } +
+ + +
+ ElementRef: {"nativeElement":{}} +
+ + +
+ TestToken: 123 +
+ + +
+ + + + +`; diff --git a/examples/angular-cli/src/stories/component-with-di/di.component.stories.ts b/examples/angular-cli/src/stories/component-with-di/di.component.stories.ts index e17f46d47c23..f72fd8e040a9 100644 --- a/examples/angular-cli/src/stories/component-with-di/di.component.stories.ts +++ b/examples/angular-cli/src/stories/component-with-di/di.component.stories.ts @@ -2,7 +2,7 @@ import { storiesOf } from '@storybook/angular'; import { withKnobs, text } from '@storybook/addon-knobs/angular'; import { DiComponent } from './di.component'; -storiesOf('Component dependencies', module) +storiesOf('Custom|Dependencies', module) .add('inputs and inject dependencies', () => ({ component: DiComponent, props: { diff --git a/examples/angular-cli/src/stories/component-with-style/__snapshots__/styled.component.stories.storyshot b/examples/angular-cli/src/stories/component-with-style/__snapshots__/styled.component.stories.storyshot index d2a95b1f3523..937109ba6e3b 100644 --- a/examples/angular-cli/src/stories/component-with-style/__snapshots__/styled.component.stories.storyshot +++ b/examples/angular-cli/src/stories/component-with-style/__snapshots__/styled.component.stories.storyshot @@ -37,3 +37,41 @@ exports[`Storyshots Component styles Component with styles 1`] = ` `; + +exports[`Storyshots Custom|styleUrls Component with styles 1`] = ` + + +
+ + +

+ Styled with scoped CSS +

+ + +

+ Styled with scoped SCSS +

+ + +

+ Styled with global CSS +

+ + +
+ + + + +`; diff --git a/examples/angular-cli/src/stories/component-with-style/styled.component.stories.ts b/examples/angular-cli/src/stories/component-with-style/styled.component.stories.ts index b1ec85245c3a..6df1a5405b29 100644 --- a/examples/angular-cli/src/stories/component-with-style/styled.component.stories.ts +++ b/examples/angular-cli/src/stories/component-with-style/styled.component.stories.ts @@ -1,6 +1,6 @@ import { storiesOf } from '@storybook/angular'; import { StyledComponent } from './styled.component'; -storiesOf('Component styles', module).add('Component with styles', () => ({ +storiesOf('Custom|styleUrls', module).add('Component with styles', () => ({ component: StyledComponent, })); diff --git a/examples/angular-cli/src/stories/custom-metadata.stories.ts b/examples/angular-cli/src/stories/custom-metadata.stories.ts index 48c03a3ed644..90101db8c68e 100644 --- a/examples/angular-cli/src/stories/custom-metadata.stories.ts +++ b/examples/angular-cli/src/stories/custom-metadata.stories.ts @@ -6,7 +6,7 @@ import { CustomPipePipe } from './moduleMetadata/custom.pipe'; import { DummyService } from './moduleMetadata/dummy.service'; import { ServiceComponent } from './moduleMetadata/service.component'; -storiesOf('Custom Pipe', module).add('Default', () => ({ +storiesOf('Custom|Pipe', module).add('Default', () => ({ component: NameComponent, props: { field: 'foobar', @@ -19,7 +19,7 @@ storiesOf('Custom Pipe', module).add('Default', () => ({ }, })); -storiesOf('Custom Pipe/With Knobs', module) +storiesOf('Custom|Pipe/With Knobs', module) .addDecorator(withKnobs) .add('NameComponent', () => ({ component: NameComponent, @@ -34,7 +34,7 @@ storiesOf('Custom Pipe/With Knobs', module) }, })); -storiesOf('Custom ngModule metadata', module) +storiesOf('Custom|Metadata', module) .add('simple', () => ({ component: ServiceComponent, props: { diff --git a/examples/angular-cli/src/stories/custom-ng-content.stories.ts b/examples/angular-cli/src/stories/custom-ng-content.stories.ts new file mode 100644 index 000000000000..5baa440d797b --- /dev/null +++ b/examples/angular-cli/src/stories/custom-ng-content.stories.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; +import { storiesOf } from '@storybook/angular'; + +@Component({ + selector: 'storybook-with-ng-content', + template: `
`, +}) +class WithNgContentComponent {} + +storiesOf('Custom|ng-content', module).add('Default', () => ({ + template: `

This is rendered in ng-content

`, + moduleMetadata: { + declarations: [WithNgContentComponent], + }, +})); diff --git a/examples/angular-cli/src/stories/custom-styles.stories.ts b/examples/angular-cli/src/stories/custom-styles.stories.ts index 7bf4e59958c0..6d8cabd8f2df 100644 --- a/examples/angular-cli/src/stories/custom-styles.stories.ts +++ b/examples/angular-cli/src/stories/custom-styles.stories.ts @@ -3,7 +3,7 @@ import { action } from '@storybook/addon-actions'; import { withKnobs, text } from '@storybook/addon-knobs/angular'; import { Button } from '@storybook/angular/demo'; -storiesOf('Custom Style', module) +storiesOf('Custom|Style', module) .add('Default', () => ({ template: ``, moduleMetadata: { diff --git a/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot b/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot index 63c11a12c5e8..1efc604e67ad 100644 --- a/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot +++ b/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot @@ -1,5 +1,30 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Storyshots Custom|ngModel custom ControlValueAccessor 1`] = ` + + + + +
+ Type anything +
+ + + + + + + +`; + exports[`Storyshots ngModel custom ControlValueAccessor 1`] = ` ({ component: CustomCvaComponent, diff --git a/examples/angular-cli/src/stories/index.ts b/examples/angular-cli/src/stories/index.ts index 08fc7eac3698..625a86f6bc64 100644 --- a/examples/angular-cli/src/stories/index.ts +++ b/examples/angular-cli/src/stories/index.ts @@ -2,14 +2,18 @@ import { storiesOf } from '@storybook/angular'; import { Welcome, Button } from '@storybook/angular/demo'; storiesOf('Welcome', module).add('to Storybook', () => ({ - component: Welcome, + template: ``, props: {}, + moduleMetadata: { + declarations: [Welcome], + }, })); storiesOf('Button', module) .add('with text', () => ({ + template: ``, moduleMetadata: { - declarations: [Button, Welcome], + declarations: [Button], }, props: { text: 'Hello Button', @@ -18,14 +22,12 @@ storiesOf('Button', module) console.log(event); }, }, - template: ` -

This is a template

- - - `, })) .add('with some emoji', () => ({ - component: Button, + template: ``, + moduleMetadata: { + declarations: [Button], + }, props: { text: '😀 😎 👍 💯', onClick: () => {}, diff --git a/examples/angular-cli/src/stories/inheritance/__snapshots__/inheritance.stories.storyshot b/examples/angular-cli/src/stories/inheritance/__snapshots__/inheritance.stories.storyshot index 67e21a5c1f77..720d41b34c54 100644 --- a/examples/angular-cli/src/stories/inheritance/__snapshots__/inheritance.stories.storyshot +++ b/examples/angular-cli/src/stories/inheritance/__snapshots__/inheritance.stories.storyshot @@ -1,5 +1,41 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Storyshots Custom|Inheritance base button 1`] = ` + + + + + + + + + +`; + +exports[`Storyshots Custom|Inheritance icon button 1`] = ` + + + + + + + + + +`; + exports[`Storyshots Inheritance base button 1`] = ` ({ component: IconButtonComponent, props: { From 956ed1823bee623489e241296ab7fd6622cbab61 Mon Sep 17 00:00:00 2001 From: igor Date: Mon, 5 Feb 2018 17:49:55 +0200 Subject: [PATCH 2/5] Separate pipes and providers --- .../custom-pipes.stories.storyshot | 29 ++++++++ ...hot => custom-providers.stories.storyshot} | 32 +-------- .../src/stories/custom-metadata.stories.ts | 66 ------------------- .../src/stories/custom-pipes.stories.ts | 32 +++++++++ .../src/stories/custom-providers.stories.ts | 36 ++++++++++ 5 files changed, 99 insertions(+), 96 deletions(-) create mode 100644 examples/angular-cli/src/stories/__snapshots__/custom-pipes.stories.storyshot rename examples/angular-cli/src/stories/__snapshots__/{custom-metadata.stories.storyshot => custom-providers.stories.storyshot} (52%) delete mode 100644 examples/angular-cli/src/stories/custom-metadata.stories.ts create mode 100644 examples/angular-cli/src/stories/custom-pipes.stories.ts create mode 100644 examples/angular-cli/src/stories/custom-providers.stories.ts diff --git a/examples/angular-cli/src/stories/__snapshots__/custom-pipes.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/custom-pipes.stories.storyshot new file mode 100644 index 000000000000..b2a69015ad53 --- /dev/null +++ b/examples/angular-cli/src/stories/__snapshots__/custom-pipes.stories.storyshot @@ -0,0 +1,29 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Custom|Pipes Simple 1`] = ` + + +

+ CustomPipe: foobar +

+ + +`; + +exports[`Storyshots Custom|Pipes With Knobs 1`] = ` + + +

+ CustomPipe: foobar +

+ + +`; diff --git a/examples/angular-cli/src/stories/__snapshots__/custom-metadata.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/custom-providers.stories.storyshot similarity index 52% rename from examples/angular-cli/src/stories/__snapshots__/custom-metadata.stories.storyshot rename to examples/angular-cli/src/stories/__snapshots__/custom-providers.stories.storyshot index dc40ccce186f..97aa11aaed47 100644 --- a/examples/angular-cli/src/stories/__snapshots__/custom-metadata.stories.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/custom-providers.stories.storyshot @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Storyshots Custom|Metadata simple 1`] = ` +exports[`Storyshots Custom|Providers Simple 1`] = ` `; -exports[`Storyshots Custom|Metadata with knobs 1`] = ` +exports[`Storyshots Custom|Providers With knobs 1`] = ` `; - -exports[`Storyshots Custom|Pipe Default 1`] = ` - - -

- CustomPipe: foobar -

- - -`; - -exports[`Storyshots Custom|Pipe/With Knobs NameComponent 1`] = ` - - -

- CustomPipe: foobar -

- - -`; diff --git a/examples/angular-cli/src/stories/custom-metadata.stories.ts b/examples/angular-cli/src/stories/custom-metadata.stories.ts deleted file mode 100644 index 90101db8c68e..000000000000 --- a/examples/angular-cli/src/stories/custom-metadata.stories.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { storiesOf } from '@storybook/angular'; -import { withKnobs, text } from '@storybook/addon-knobs/angular'; - -import { NameComponent } from './moduleMetadata/name.component'; -import { CustomPipePipe } from './moduleMetadata/custom.pipe'; -import { DummyService } from './moduleMetadata/dummy.service'; -import { ServiceComponent } from './moduleMetadata/service.component'; - -storiesOf('Custom|Pipe', module).add('Default', () => ({ - component: NameComponent, - props: { - field: 'foobar', - }, - moduleMetadata: { - imports: [], - schemas: [], - declarations: [CustomPipePipe], - providers: [], - }, -})); - -storiesOf('Custom|Pipe/With Knobs', module) - .addDecorator(withKnobs) - .add('NameComponent', () => ({ - component: NameComponent, - props: { - field: text('field', 'foobar'), - }, - moduleMetadata: { - imports: [], - schemas: [], - declarations: [CustomPipePipe], - providers: [], - }, - })); - -storiesOf('Custom|Metadata', module) - .add('simple', () => ({ - component: ServiceComponent, - props: { - name: 'Static name', - }, - moduleMetadata: { - imports: [], - schemas: [], - declarations: [], - providers: [DummyService], - }, - })) - .addDecorator(withKnobs) - .add('with knobs', () => { - const name = text('name', 'Dynamic knob'); - - return { - component: ServiceComponent, - props: { - name, - }, - moduleMetadata: { - imports: [], - schemas: [], - declarations: [], - providers: [DummyService], - }, - }; - }); diff --git a/examples/angular-cli/src/stories/custom-pipes.stories.ts b/examples/angular-cli/src/stories/custom-pipes.stories.ts new file mode 100644 index 000000000000..45b84c68ff0e --- /dev/null +++ b/examples/angular-cli/src/stories/custom-pipes.stories.ts @@ -0,0 +1,32 @@ +import { storiesOf } from '@storybook/angular'; +import { withKnobs, text } from '@storybook/addon-knobs/angular'; + +import { NameComponent } from './moduleMetadata/name.component'; +import { CustomPipePipe } from './moduleMetadata/custom.pipe'; + +storiesOf('Custom|Pipes', module) + .add('Simple', () => ({ + component: NameComponent, + props: { + field: 'foobar', + }, + moduleMetadata: { + imports: [], + schemas: [], + declarations: [CustomPipePipe], + providers: [], + }, + })) + .addDecorator(withKnobs) + .add('With Knobs', () => ({ + component: NameComponent, + props: { + field: text('field', 'foobar'), + }, + moduleMetadata: { + imports: [], + schemas: [], + declarations: [CustomPipePipe], + providers: [], + }, + })); diff --git a/examples/angular-cli/src/stories/custom-providers.stories.ts b/examples/angular-cli/src/stories/custom-providers.stories.ts new file mode 100644 index 000000000000..420c2f1c64a2 --- /dev/null +++ b/examples/angular-cli/src/stories/custom-providers.stories.ts @@ -0,0 +1,36 @@ +import { storiesOf } from '@storybook/angular'; +import { withKnobs, text } from '@storybook/addon-knobs/angular'; + +import { DummyService } from './moduleMetadata/dummy.service'; +import { ServiceComponent } from './moduleMetadata/service.component'; + +storiesOf('Custom|Providers', module) + .add('Simple', () => ({ + component: ServiceComponent, + props: { + name: 'Static name', + }, + moduleMetadata: { + imports: [], + schemas: [], + declarations: [], + providers: [DummyService], + }, + })) + .addDecorator(withKnobs) + .add('With knobs', () => { + const name = text('name', 'Dynamic knob'); + + return { + component: ServiceComponent, + props: { + name, + }, + moduleMetadata: { + imports: [], + schemas: [], + declarations: [], + providers: [DummyService], + }, + }; + }); From fe35a3009f63a3dc479f6d7d43a783969ace40e3 Mon Sep 17 00:00:00 2001 From: igor Date: Tue, 6 Feb 2018 10:02:29 +0200 Subject: [PATCH 3/5] Separate vue examples --- examples/angular-cli/.storybook/config.js | 4 +- .../vue-kitchen-sink/.storybook/addons.js | 1 + .../vue-kitchen-sink/.storybook/config.js | 9 +- examples/vue-kitchen-sink/package.json | 1 + .../addon-actions.stories.storyshot | 19 ++ .../addon-centered.stories.storyshot | 18 ++ .../addon-knobs.stories.storyshot | 45 ++++ .../addon-notes.stories.storyshot | 19 ++ .../custom-decorators.stories.storyshot | 34 +++ .../custom-rendering.stories.storyshot | 95 +++++++ .../src/stories/__snapshots__/index.storyshot | 231 +---------------- .../src/stories/addon-actions.stories.js | 19 ++ .../src/stories/addon-centered.stories.js | 11 + .../src/stories/addon-knobs.stories.js | 69 ++++++ .../src/stories/addon-notes.stories.js | 25 ++ .../src/stories/custom-decorators.stories.js | 33 +++ .../src/stories/custom-rendering.stories.js | 92 +++++++ .../vue-kitchen-sink/src/stories/index.js | 233 ------------------ 18 files changed, 495 insertions(+), 463 deletions(-) create mode 100644 examples/vue-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot create mode 100644 examples/vue-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot create mode 100644 examples/vue-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot create mode 100644 examples/vue-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot create mode 100644 examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot create mode 100644 examples/vue-kitchen-sink/src/stories/__snapshots__/custom-rendering.stories.storyshot create mode 100644 examples/vue-kitchen-sink/src/stories/addon-actions.stories.js create mode 100644 examples/vue-kitchen-sink/src/stories/addon-centered.stories.js create mode 100644 examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js create mode 100644 examples/vue-kitchen-sink/src/stories/addon-notes.stories.js create mode 100644 examples/vue-kitchen-sink/src/stories/custom-decorators.stories.js create mode 100644 examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js diff --git a/examples/angular-cli/.storybook/config.js b/examples/angular-cli/.storybook/config.js index 29275bdbc9e0..b7d5eaf2e962 100644 --- a/examples/angular-cli/.storybook/config.js +++ b/examples/angular-cli/.storybook/config.js @@ -13,8 +13,8 @@ function loadStories() { 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)) + const req = require.context('../src/stories', true, /\.stories\.ts$/); + req.keys().forEach((filename) => req(filename)); } configure(loadStories, module); diff --git a/examples/vue-kitchen-sink/.storybook/addons.js b/examples/vue-kitchen-sink/.storybook/addons.js index 2d7b52c620bd..8f0c06885db4 100644 --- a/examples/vue-kitchen-sink/.storybook/addons.js +++ b/examples/vue-kitchen-sink/.storybook/addons.js @@ -3,3 +3,4 @@ import '@storybook/addon-links/register'; import '@storybook/addon-notes/register'; import '@storybook/addon-knobs/register'; import '@storybook/addon-viewport/register'; +import '@storybook/addon-options/register'; \ No newline at end of file diff --git a/examples/vue-kitchen-sink/.storybook/config.js b/examples/vue-kitchen-sink/.storybook/config.js index 385320a351f4..697f131b66da 100644 --- a/examples/vue-kitchen-sink/.storybook/config.js +++ b/examples/vue-kitchen-sink/.storybook/config.js @@ -1,5 +1,5 @@ import { configure } from '@storybook/vue'; - +import { setOptions } from '@storybook/addon-options'; import Vue from 'vue' import Vuex from 'vuex' @@ -8,8 +8,15 @@ import MyButton from '../src/stories/Button.vue' Vue.component('my-button', MyButton); Vue.use(Vuex); +setOptions({ + hierarchyRootSeparator: /\|/, +}); + function loadStories() { require('../src/stories'); + + const req = require.context('../src/stories', true, /\.stories\.js$/); + req.keys().forEach((filename) => req(filename)); } configure(loadStories, module); diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json index 2382600e3949..623434036a8c 100644 --- a/examples/vue-kitchen-sink/package.json +++ b/examples/vue-kitchen-sink/package.json @@ -18,6 +18,7 @@ "@storybook/addon-knobs": "^3.4.0-alpha.7", "@storybook/addon-links": "^3.4.0-alpha.7", "@storybook/addon-notes": "^3.4.0-alpha.7", + "@storybook/addon-options": "^3.4.0-alpha.7", "@storybook/addon-storyshots": "^3.4.0-alpha.7", "@storybook/addon-viewport": "^3.4.0-alpha.7", "@storybook/addons": "^3.4.0-alpha.7", diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot new file mode 100644 index 000000000000..7691db827094 --- /dev/null +++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot @@ -0,0 +1,19 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Addon|Actions Action and method 1`] = ` + +`; + +exports[`Storyshots Addon|Actions Action only 1`] = ` + +`; diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot new file mode 100644 index 000000000000..4838600b62f3 --- /dev/null +++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot @@ -0,0 +1,18 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Addon|Centered rounded 1`] = ` +
+
+ +
+
+`; diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot new file mode 100644 index 000000000000..f2a13b0fcadf --- /dev/null +++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot @@ -0,0 +1,45 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Addon|Knobs All knobs 1`] = ` +
+

+ My name is Jane, +

+ +

+ today is January 20, 2017 +

+ +

+ I have a stock of 20 apple, costing $2.25 each. +

+ +

+ Also, I have: +

+ +
    +
  • + Laptop +
    • +
  • + Book +
    • +
  • + Whiskey +
    • +
+ +

+ Nice to meet you! +

+
+`; + +exports[`Storyshots Addon|Knobs Simple 1`] = ` +
+ I am John Doe and I'm 44 years old. +
+`; diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot new file mode 100644 index 000000000000..a005840d537d --- /dev/null +++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot @@ -0,0 +1,19 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Addon|Notes Note with HTML 1`] = ` +

+ 🤔😳😯😮 +
+ 😄😩😓😱 +
+ 🤓😑😶😊 +

+`; + +exports[`Storyshots Addon|Notes Simple note 1`] = ` +

+ + Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna. + +

+`; diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot new file mode 100644 index 000000000000..eb88673228af --- /dev/null +++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot @@ -0,0 +1,34 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Custom|Decorator for Vue render 1`] = ` +
+
+ +
+
+`; + +exports[`Storyshots Custom|Decorator for Vue template 1`] = ` +
+
+ +
+
+`; diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-rendering.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-rendering.stories.storyshot new file mode 100644 index 000000000000..b2c1b397beba --- /dev/null +++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-rendering.stories.storyshot @@ -0,0 +1,95 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Custom|Method for rendering Vue JSX 1`] = ` + +`; + +exports[`Storyshots Custom|Method for rendering Vue pre-registered component 1`] = ` +

+ + This component was pre-registered in .storybook/config.js + +
+ + +

+`; + +exports[`Storyshots Custom|Method for rendering Vue render + component 1`] = ` + +`; + +exports[`Storyshots Custom|Method for rendering Vue render 1`] = ` +
+ renders a div with some text in it.. +
+`; + +exports[`Storyshots Custom|Method for rendering Vue template + component 1`] = ` + +`; + +exports[`Storyshots Custom|Method for rendering Vue template + methods 1`] = ` +

+ + Clicking the button will navigate to another story using the 'addon-links' + +
+ + +

+`; + +exports[`Storyshots Custom|Method for rendering Vue template 1`] = ` +
+

+ A template +

+ +

+ rendered in vue in storybook +

+
+`; + +exports[`Storyshots Custom|Method for rendering Vue vuex + actions 1`] = ` + +`; + +exports[`Storyshots Custom|Method for rendering Vue whatever you want 1`] = ` + +`; diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/index.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/index.storyshot index 8f065230c187..4ba02911bcbc 100644 --- a/examples/vue-kitchen-sink/src/stories/__snapshots__/index.storyshot +++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/index.storyshot @@ -1,85 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Storyshots Addon Actions Action and method 1`] = ` - -`; - -exports[`Storyshots Addon Actions Action only 1`] = ` - -`; - -exports[`Storyshots Addon Knobs All knobs 1`] = ` -
-

- My name is Jane, -

- -

- today is January 20, 2017 -

- -

- I have a stock of 20 apple, costing $2.25 each. -

- -

- Also, I have: -

- -
    -
  • - Laptop -
    • -
  • - Book -
    • -
  • - Whiskey -
    • -
- -

- Nice to meet you! -

-
-`; - -exports[`Storyshots Addon Knobs Simple 1`] = ` -
- I am John Doe and I'm 44 years old. -
-`; - -exports[`Storyshots Addon Notes Note with HTML 1`] = ` -

- 🤔😳😯😮 -
- 😄😩😓😱 -
- 🤓😑😶😊 -

-`; - -exports[`Storyshots Addon Notes Simple note 1`] = ` -

- - Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna. - -

-`; - exports[`Storyshots App App 1`] = `
-
- -
-
-`; - -exports[`Storyshots Button square 1`] = ` -
-
- -
-
-`; - -exports[`Storyshots Decorator for Vue render 1`] = ` -
-
- -
-
-`; - -exports[`Storyshots Decorator for Vue template 1`] = ` -
-
- -
-
-`; - -exports[`Storyshots Method for rendering Vue JSX 1`] = ` - -`; - -exports[`Storyshots Method for rendering Vue pre-registered component 1`] = ` -

- - This component was pre-registered in .storybook/config.js - -
- - -

-`; - -exports[`Storyshots Method for rendering Vue render + component 1`] = ` - -`; - -exports[`Storyshots Method for rendering Vue render 1`] = ` -
- renders a div with some text in it.. -
-`; - -exports[`Storyshots Method for rendering Vue template + component 1`] = ` `; -exports[`Storyshots Method for rendering Vue template + methods 1`] = ` -

- - Clicking the button will navigate to another story using the 'addon-links' - -
- - -

-`; - -exports[`Storyshots Method for rendering Vue template 1`] = ` -
-

- A template -

- -

- rendered in vue in storybook -

-
-`; - -exports[`Storyshots Method for rendering Vue vuex + actions 1`] = ` - -`; - -exports[`Storyshots Method for rendering Vue whatever you want 1`] = ` +exports[`Storyshots Button square 1`] = ` `; diff --git a/examples/vue-kitchen-sink/src/stories/addon-actions.stories.js b/examples/vue-kitchen-sink/src/stories/addon-actions.stories.js new file mode 100644 index 000000000000..e7c24137dda3 --- /dev/null +++ b/examples/vue-kitchen-sink/src/stories/addon-actions.stories.js @@ -0,0 +1,19 @@ +import { storiesOf } from '@storybook/vue'; +import { action } from '@storybook/addon-actions'; + +storiesOf('Addon|Actions', module) + .add('Action only', () => ({ + template: 'Click me to log the action', + methods: { + log: action('log1'), + }, + })) + .add('Action and method', () => ({ + template: 'Click me to log the action', + methods: { + log: e => { + e.preventDefault(); + action('log2')(e.target); + }, + }, + })); diff --git a/examples/vue-kitchen-sink/src/stories/addon-centered.stories.js b/examples/vue-kitchen-sink/src/stories/addon-centered.stories.js new file mode 100644 index 000000000000..d202fc947c07 --- /dev/null +++ b/examples/vue-kitchen-sink/src/stories/addon-centered.stories.js @@ -0,0 +1,11 @@ +import { storiesOf } from '@storybook/vue'; +import Centered from '@storybook/addon-centered'; + +import MyButton from './Button.vue'; + +storiesOf('Addon|Centered', module) + .addDecorator(Centered) + .add('rounded', () => ({ + components: { MyButton }, + template: 'A Button with rounded edges', + })); diff --git a/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js b/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js new file mode 100644 index 000000000000..a63f1646792f --- /dev/null +++ b/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js @@ -0,0 +1,69 @@ +import { storiesOf } from '@storybook/vue'; +import { action } from '@storybook/addon-actions'; +import { + withKnobs, + text, + number, + boolean, + array, + select, + color, + date, + button, +} from '@storybook/addon-knobs/vue'; + +storiesOf('Addon|Knobs', module) + .addDecorator(withKnobs) + .add('Simple', () => { + const name = text('Name', 'John Doe'); + const age = number('Age', 44); + const content = `I am ${name} and I'm ${age} years old.`; + + return { + template: `
${content}
`, + }; + }) + .add('All knobs', () => { + const name = text('Name', 'Jane'); + const stock = number('Stock', 20, { + range: true, + min: 0, + max: 30, + step: 5, + }); + const fruits = { + apples: 'Apple', + bananas: 'Banana', + cherries: 'Cherry', + }; + const fruit = select('Fruit', fruits, 'apple'); + const price = number('Price', 2.25); + + const colour = color('Border', 'deeppink'); + const today = date('Today', new Date('Jan 20 2017 GMT+0')); + const items = array('Items', ['Laptop', 'Book', 'Whiskey']); + const nice = boolean('Nice', true); + + const stockMessage = stock + ? `I have a stock of ${stock} ${fruit}, costing $${price} each.` + : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`; + const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!'; + const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' }; + + button('Arbitrary action', action('You clicked it!')); + + return { + template: ` +
+

My name is ${name},

+

today is ${new Date(today).toLocaleDateString('en-US', dateOptions)}

+

${stockMessage}

+

Also, I have:

+
    + ${items.map(item => `
  • ${item}
    • `).join('')} +
+

${salutation}

+
+ `, + }; + }); diff --git a/examples/vue-kitchen-sink/src/stories/addon-notes.stories.js b/examples/vue-kitchen-sink/src/stories/addon-notes.stories.js new file mode 100644 index 000000000000..a35213b8ff2e --- /dev/null +++ b/examples/vue-kitchen-sink/src/stories/addon-notes.stories.js @@ -0,0 +1,25 @@ +import { storiesOf } from '@storybook/vue'; +import { withNotes } from '@storybook/addon-notes'; + +storiesOf('Addon|Notes', module) + .add( + 'Simple note', + withNotes({ text: 'My notes on some bold text' })(() => ({ + template: + '

Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.

', + })) + ) + .add( + 'Note with HTML', + withNotes({ + text: ` +

My notes on emojies

+ + It's not all that important to be honest, but.. + + Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇 + `, + })(() => ({ + template: '

🤔😳😯😮
😄😩😓😱
🤓😑😶😊

', + })) + ); diff --git a/examples/vue-kitchen-sink/src/stories/custom-decorators.stories.js b/examples/vue-kitchen-sink/src/stories/custom-decorators.stories.js new file mode 100644 index 000000000000..3ff256088776 --- /dev/null +++ b/examples/vue-kitchen-sink/src/stories/custom-decorators.stories.js @@ -0,0 +1,33 @@ +import { storiesOf } from '@storybook/vue'; + +import MyButton from './Button.vue'; + +storiesOf('Custom|Decorator for Vue', module) + .addDecorator(story => { + // Decorated with story function + const WrapButton = story(); + return { + components: { WrapButton }, + template: '
', + data() { + return { borderStyle: 'medium solid red' }; + }, + }; + }) + .addDecorator(() => ({ + // Decorated with `story` component + template: '
', + data() { + return { + borderStyle: 'medium solid blue', + }; + }, + })) + .add('template', () => ({ + template: 'MyButton with template', + })) + .add('render', () => ({ + render(h) { + return h(MyButton, { props: { color: 'pink' } }, ['renders component: MyButton']); + }, + })); diff --git a/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js b/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js new file mode 100644 index 000000000000..cfbde6349393 --- /dev/null +++ b/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js @@ -0,0 +1,92 @@ +import Vuex from 'vuex'; +import { storiesOf } from '@storybook/vue'; +import { action } from '@storybook/addon-actions'; +import { linkTo } from '@storybook/addon-links'; + +import MyButton from './Button.vue'; + +storiesOf('Custom|Method for rendering Vue', module) + .add('render', () => ({ + render: h => h('div', ['renders a div with some text in it..']), + })) + .add('render + component', () => ({ + render(h) { + return h(MyButton, { props: { color: 'pink' } }, ['renders component: MyButton']); + }, + })) + .add('template', () => ({ + template: ` +
+

A template

+

rendered in vue in storybook

+
`, + })) + .add('template + component', () => ({ + components: { MyButton }, + template: 'MyButton rendered in a template', + })) + .add('template + methods', () => ({ + components: { MyButton }, + template: ` +

+ Clicking the button will navigate to another story using the 'addon-links'
+ MyButton rendered in a template + props & methods +

`, + methods: { + action: linkTo('Button'), + }, + })) + .add('JSX', () => ({ + components: { MyButton }, + render() { + // eslint-disable-next-line react/react-in-jsx-scope + return MyButton rendered with JSX; + }, + })) + .add('vuex + actions', () => ({ + components: { MyButton }, + template: 'with vuex: {{ $store.state.count }}', + store: new Vuex.Store({ + state: { count: 0 }, + mutations: { + increment(state) { + state.count += 1; // eslint-disable-line + action('vuex state')(state); + }, + }, + }), + methods: { + log() { + this.$store.commit('increment'); + }, + }, + })) + .add('whatever you want', () => ({ + components: { MyButton }, + template: + 'with awesomeness: {{ $store.state.count }}', + store: new Vuex.Store({ + state: { count: 0 }, + mutations: { + increment(state) { + state.count += 1; // eslint-disable-line + action('vuex state')(state); + }, + }, + }), + methods: { + log() { + this.$store.commit('increment'); + }, + }, + })) + .add('pre-registered component', () => ({ + /* By pre-registering component in config.js, + * the need to register all components with each story is removed. + * You'll only need the template */ + template: ` +

+ This component was pre-registered in .storybook/config.js
+ MyButton rendered in a template +

`, + })); diff --git a/examples/vue-kitchen-sink/src/stories/index.js b/examples/vue-kitchen-sink/src/stories/index.js index 645a4b23cc32..1a6eb3db1688 100644 --- a/examples/vue-kitchen-sink/src/stories/index.js +++ b/examples/vue-kitchen-sink/src/stories/index.js @@ -1,24 +1,5 @@ -/* eslint-disable react/react-in-jsx-scope */ - -import Vuex from 'vuex'; import { storiesOf } from '@storybook/vue'; -import { action } from '@storybook/addon-actions'; -import { linkTo } from '@storybook/addon-links'; -import { withNotes } from '@storybook/addon-notes'; -import { - withKnobs, - text, - number, - boolean, - array, - select, - color, - date, - button, -} from '@storybook/addon-knobs/vue'; -import Centered from '@storybook/addon-centered'; -import MyButton from './Button.vue'; import Welcome from './Welcome.vue'; import App from '../App.vue'; @@ -31,7 +12,6 @@ storiesOf('App', module).add('App', () => ({ })); storiesOf('Button', module) - .addDecorator(Centered) // Works if Vue.component is called in the config.js in .storybook .add('rounded', () => ({ template: 'A Button with rounded edges', @@ -39,216 +19,3 @@ storiesOf('Button', module) .add('square', () => ({ template: 'A Button with square edges', })); - -storiesOf('Method for rendering Vue', module) - .add('render', () => ({ - render: h => h('div', ['renders a div with some text in it..']), - })) - .add('render + component', () => ({ - render(h) { - return h(MyButton, { props: { color: 'pink' } }, ['renders component: MyButton']); - }, - })) - .add('template', () => ({ - template: ` -
-

A template

-

rendered in vue in storybook

-
`, - })) - .add('template + component', () => ({ - components: { MyButton }, - template: 'MyButton rendered in a template', - })) - .add('template + methods', () => ({ - components: { MyButton }, - template: ` -

- Clicking the button will navigate to another story using the 'addon-links'
- MyButton rendered in a template + props & methods -

`, - methods: { - action: linkTo('Button'), - }, - })) - .add('JSX', () => ({ - components: { MyButton }, - render() { - return MyButton rendered with JSX; - }, - })) - .add('vuex + actions', () => ({ - components: { MyButton }, - template: 'with vuex: {{ $store.state.count }}', - store: new Vuex.Store({ - state: { count: 0 }, - mutations: { - increment(state) { - state.count += 1; // eslint-disable-line - action('vuex state')(state); - }, - }, - }), - methods: { - log() { - this.$store.commit('increment'); - }, - }, - })) - .add('whatever you want', () => ({ - components: { MyButton }, - template: - 'with awesomeness: {{ $store.state.count }}', - store: new Vuex.Store({ - state: { count: 0 }, - mutations: { - increment(state) { - state.count += 1; // eslint-disable-line - action('vuex state')(state); - }, - }, - }), - methods: { - log() { - this.$store.commit('increment'); - }, - }, - })) - .add('pre-registered component', () => ({ - /* By pre-registering component in config.js, - * the need to register all components with each story is removed. - * You'll only need the template */ - template: ` -

- This component was pre-registered in .storybook/config.js
- MyButton rendered in a template -

`, - })); - -storiesOf('Decorator for Vue', module) - .addDecorator(story => { - // Decorated with story function - const WrapButton = story(); - return { - components: { WrapButton }, - template: '
', - data() { - return { borderStyle: 'medium solid red' }; - }, - }; - }) - .addDecorator(() => ({ - // Decorated with `story` component - template: '
', - data() { - return { - borderStyle: 'medium solid blue', - }; - }, - })) - .add('template', () => ({ - template: 'MyButton with template', - })) - .add('render', () => ({ - render(h) { - return h(MyButton, { props: { color: 'pink' } }, ['renders component: MyButton']); - }, - })); - -storiesOf('Addon Actions', module) - .add('Action only', () => ({ - template: 'Click me to log the action', - methods: { - log: action('log1'), - }, - })) - .add('Action and method', () => ({ - template: 'Click me to log the action', - methods: { - log: e => { - e.preventDefault(); - action('log2')(e.target); - }, - }, - })); - -storiesOf('Addon Notes', module) - .add( - 'Simple note', - withNotes({ text: 'My notes on some bold text' })(() => ({ - template: - '

Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.

', - })) - ) - .add( - 'Note with HTML', - withNotes({ - text: ` -

My notes on emojies

- - It's not all that important to be honest, but.. - - Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇 - `, - })(() => ({ - template: '

🤔😳😯😮
😄😩😓😱
🤓😑😶😊

', - })) - ); - -storiesOf('Addon Knobs', module) - .addDecorator(withKnobs) - .add('Simple', () => { - const name = text('Name', 'John Doe'); - const age = number('Age', 44); - const content = `I am ${name} and I'm ${age} years old.`; - - return { - template: `
${content}
`, - }; - }) - .add('All knobs', () => { - const name = text('Name', 'Jane'); - const stock = number('Stock', 20, { - range: true, - min: 0, - max: 30, - step: 5, - }); - const fruits = { - apples: 'Apple', - bananas: 'Banana', - cherries: 'Cherry', - }; - const fruit = select('Fruit', fruits, 'apple'); - const price = number('Price', 2.25); - - const colour = color('Border', 'deeppink'); - const today = date('Today', new Date('Jan 20 2017 GMT+0')); - const items = array('Items', ['Laptop', 'Book', 'Whiskey']); - const nice = boolean('Nice', true); - - const stockMessage = stock - ? `I have a stock of ${stock} ${fruit}, costing $${price} each.` - : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`; - const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!'; - const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' }; - - button('Arbitrary action', action('You clicked it!')); - - return { - template: ` -
-

My name is ${name},

-

today is ${new Date(today).toLocaleDateString('en-US', dateOptions)}

-

${stockMessage}

-

Also, I have:

-
    - ${items.map(item => `
  • ${item}
    • `).join('')} -
-

${salutation}

-
- `, - }; - }); - -/* eslint-enable react/react-in-jsx-scope */ From afc895d57a051f63ac3a42b8ea9e9f7b3f70acb9 Mon Sep 17 00:00:00 2001 From: igor Date: Tue, 6 Feb 2018 10:33:08 +0200 Subject: [PATCH 4/5] Separate polymer examples --- examples/polymer-cli/.storybook/addons.js | 1 + examples/polymer-cli/.storybook/config.js | 11 +- examples/polymer-cli/package.json | 1 + .../polymer-cli/src/playground-button.html | 12 +- .../src/stories/addon-actions.stories.js | 15 +++ .../src/stories/addon-knobs.stories.js | 56 ++++++++++ .../src/stories/addon-notes.stories.js | 23 ++++ .../src/stories/advanced.stories.js | 105 ------------------ .../src/stories/custom-decorators.stories.js | 14 +++ .../src/stories/custom-rendering.stories.js | 15 +++ .../polymer-cli/src/stories/index.stories.js | 25 +---- 11 files changed, 148 insertions(+), 130 deletions(-) create mode 100644 examples/polymer-cli/src/stories/addon-actions.stories.js create mode 100644 examples/polymer-cli/src/stories/addon-knobs.stories.js create mode 100644 examples/polymer-cli/src/stories/addon-notes.stories.js delete mode 100644 examples/polymer-cli/src/stories/advanced.stories.js create mode 100644 examples/polymer-cli/src/stories/custom-decorators.stories.js create mode 100644 examples/polymer-cli/src/stories/custom-rendering.stories.js diff --git a/examples/polymer-cli/.storybook/addons.js b/examples/polymer-cli/.storybook/addons.js index 1191fbebf304..40db03219095 100644 --- a/examples/polymer-cli/.storybook/addons.js +++ b/examples/polymer-cli/.storybook/addons.js @@ -2,3 +2,4 @@ import '@storybook/addon-actions/register'; import '@storybook/addon-notes/register'; import '@storybook/addon-knobs/register'; import '@storybook/addon-viewport/register'; +import '@storybook/addon-options/register'; diff --git a/examples/polymer-cli/.storybook/config.js b/examples/polymer-cli/.storybook/config.js index 37ff65014786..ae9f20d8481b 100644 --- a/examples/polymer-cli/.storybook/config.js +++ b/examples/polymer-cli/.storybook/config.js @@ -1,10 +1,15 @@ -/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */ - import { configure } from '@storybook/polymer'; +import { setOptions } from '@storybook/addon-options'; + +setOptions({ + hierarchyRootSeparator: /\|/, +}); function loadStories() { require('../src/stories/index.stories'); - require('../src/stories/advanced.stories'); + + const req = require.context('../src/stories', true, /\.stories\.js$/); + req.keys().forEach((filename) => req(filename)); } configure(loadStories, module); diff --git a/examples/polymer-cli/package.json b/examples/polymer-cli/package.json index c91e7010e13d..a94adc2a3caa 100644 --- a/examples/polymer-cli/package.json +++ b/examples/polymer-cli/package.json @@ -11,6 +11,7 @@ "@storybook/addon-actions": "^3.4.0-alpha.7", "@storybook/addon-knobs": "^3.4.0-alpha.7", "@storybook/addon-notes": "^3.4.0-alpha.7", + "@storybook/addon-options": "^3.4.0-alpha.7", "@storybook/addon-viewport": "^3.4.0-alpha.7", "@storybook/polymer": "^3.4.0-alpha.7", "@webcomponents/webcomponentsjs": "^1.1.0", diff --git a/examples/polymer-cli/src/playground-button.html b/examples/polymer-cli/src/playground-button.html index 272d6b2acc0d..51a4b0ed5daa 100644 --- a/examples/polymer-cli/src/playground-button.html +++ b/examples/polymer-cli/src/playground-button.html @@ -4,7 +4,15 @@