From c560ee2d8a5392b0928188fb175aded690a3e9ac Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 3 Aug 2019 10:00:56 +0800 Subject: [PATCH 1/2] Angular: Convert angular-cli stories to CSF --- .../src/stories/addon-actions.stories.ts | 49 +++--- .../src/stories/addon-jest.stories.ts | 32 ++-- .../src/stories/addon-knobs.stories.ts | 148 ++++++++++-------- .../src/stories/addon-links.stories.ts | 13 +- .../src/stories/addon-notes.stories.ts | 65 ++++---- .../src/stories/app.component.stories.ts | 13 +- .../component-with-di/di.component.stories.ts | 46 +++--- .../styled.component.stories.ts | 13 +- .../angular-cli/src/stories/core.stories.ts | 34 ++-- .../src/stories/custom-pipes.stories.ts | 51 +++--- .../src/stories/custom-providers.stories.ts | 53 ++++--- .../src/stories/custom-styles.stories.ts | 79 +++++----- .../custom-cva-component.stories.ts | 28 ++-- .../inheritance/inheritance.stories.ts | 41 +++-- .../src/stories/metadata-combined.stories.ts | 52 +++--- .../stories/metadata-individual.stories.ts | 81 +++++----- .../src/stories/metadata-shared.stories.ts | 40 +++-- .../src/stories/on-push/on-push.stories.ts | 39 ++--- 18 files changed, 510 insertions(+), 367 deletions(-) diff --git a/examples/angular-cli/src/stories/addon-actions.stories.ts b/examples/angular-cli/src/stories/addon-actions.stories.ts index 6e20fd02b1ac..dc7d8a047f3b 100644 --- a/examples/angular-cli/src/stories/addon-actions.stories.ts +++ b/examples/angular-cli/src/stories/addon-actions.stories.ts @@ -1,23 +1,34 @@ -import { storiesOf } from '@storybook/angular'; import { action } from '@storybook/addon-actions'; import { Button } from '@storybook/angular/demo'; -storiesOf('Addon|Actions', module) - .add('Action only', () => ({ - component: Button, - props: { - text: 'Action only', - onClick: action('log 1'), - }, - })) - .add('Action and method', () => ({ - component: Button, - props: { - text: 'Action and Method', - onClick: e => { - console.log(e); - e.preventDefault(); - action('log2')(e.target); - }, +export default { + title: 'Addon|Actions', +}; + +export const actionOnly = () => ({ + component: Button, + props: { + text: 'Action only', + onClick: action('log 1'), + }, +}); + +actionOnly.story = { + name: 'Action only', +}; + +export const actionAndMethod = () => ({ + component: Button, + props: { + text: 'Action and Method', + onClick: e => { + console.log(e); + e.preventDefault(); + action('log2')(e.target); }, - })); + }, +}); + +actionAndMethod.story = { + name: 'Action and method', +}; diff --git a/examples/angular-cli/src/stories/addon-jest.stories.ts b/examples/angular-cli/src/stories/addon-jest.stories.ts index 7da82f265592..3bb0fbc7dfda 100644 --- a/examples/angular-cli/src/stories/addon-jest.stories.ts +++ b/examples/angular-cli/src/stories/addon-jest.stories.ts @@ -1,24 +1,28 @@ -import { storiesOf } from '@storybook/angular'; import { withTests } from '@storybook/addon-jest'; import { AppComponent } from '../app/app.component'; // eslint-disable-next-line import/no-unresolved import * as results from '../../addon-jest.testresults.json'; -storiesOf('Addon|Jest', module) - .addDecorator( +export default { + title: 'Addon|Jest', + decorators: [ withTests({ results, filesExt: '((\\.specs?)|(\\.tests?))?(\\.ts)?$', - }) - ) - .add( - 'app.component with jest tests', - () => ({ - component: AppComponent, - props: {}, }), - { - jest: 'app.component', - } - ); + ], +}; + +export const appComponentWithJestTests = () => ({ + component: AppComponent, + props: {}, +}); + +appComponentWithJestTests.story = { + name: 'app.component with jest tests', + + parameters: { + jest: 'app.component', + }, +}; diff --git a/examples/angular-cli/src/stories/addon-knobs.stories.ts b/examples/angular-cli/src/stories/addon-knobs.stories.ts index af0d5154d5dc..61b79ee52140 100644 --- a/examples/angular-cli/src/stories/addon-knobs.stories.ts +++ b/examples/angular-cli/src/stories/addon-knobs.stories.ts @@ -1,4 +1,3 @@ -import { storiesOf } from '@storybook/angular'; import { action } from '@storybook/addon-actions'; import { @@ -17,24 +16,27 @@ import { import { SimpleKnobsComponent } from './knobs.component'; import { AllKnobsComponent } from './all-knobs.component'; -storiesOf('Addon|Knobs', module) - .addParameters({ +export default { + title: 'Addon|Knobs', + decorators: [withKnobs], + parameters: { knobs: { disableDebounce: true, }, - }) - .addDecorator(withKnobs) - .add('Simple', () => { - const name = text('name', 'John Doe'); - const age = number('age', 0); - const phoneNumber = text('phoneNumber', '555-55-55'); + }, +}; - return { - moduleMetadata: { - entryComponents: [SimpleKnobsComponent], - declarations: [SimpleKnobsComponent], - }, - template: ` +export const simple = () => { + const name = text('name', 'John Doe'); + const age = number('age', 0); + const phoneNumber = text('phoneNumber', '555-55-55'); + + return { + moduleMetadata: { + entryComponents: [SimpleKnobsComponent], + declarations: [SimpleKnobsComponent], + }, + template: `

This is a template

`, - props: { - name, - age, - phoneNumber, - }, - }; - }) - .add('All knobs', () => { - const name = text('name', 'Jane'); - const stock = number('stock', 20, { - range: true, - min: 0, - max: 30, - step: 5, - }); - const fruits = { - Apple: 'apples', - Banana: 'bananas', - Cherry: 'cherries', - }; - const fruit = select('fruit', fruits, 'apples'); - const otherFruits = { - Kiwi: 'kiwi', - Guava: 'guava', - Watermelon: 'watermelon', - }; - const otherFruit = radios('Other Fruit', otherFruits, 'watermelon'); - const price = number('price', 2.25); + props: { + name, + age, + phoneNumber, + }, + }; +}; + +simple.story = { + name: 'Simple', +}; + +export const allKnobs = () => { + const name = text('name', 'Jane'); + const stock = number('stock', 20, { + range: true, + min: 0, + max: 30, + step: 5, + }); + const fruits = { + Apple: 'apples', + Banana: 'bananas', + Cherry: 'cherries', + }; + const fruit = select('fruit', fruits, 'apples'); + const otherFruits = { + Kiwi: 'kiwi', + Guava: 'guava', + Watermelon: 'watermelon', + }; + const otherFruit = radios('Other Fruit', otherFruits, 'watermelon'); + const price = number('price', 2.25); + + const border = color('border', 'deeppink'); + const today = date('today', new Date('Jan 20 2017')); + const items = array('items', ['Laptop', 'Book', 'Whiskey']); + const nice = boolean('nice', true); + button('Arbitrary action', action('You clicked it!')); + + return { + component: AllKnobsComponent, + props: { + name, + stock, + fruit, + otherFruit, + price, + border, + today, + items, + nice, + }, + }; +}; + +allKnobs.story = { + name: 'All knobs', +}; - const border = color('border', 'deeppink'); - const today = date('today', new Date('Jan 20 2017')); - const items = array('items', ['Laptop', 'Book', 'Whiskey']); - const nice = boolean('nice', true); - button('Arbitrary action', action('You clicked it!')); +export const xssSafety = () => ({ + template: text('Rendered string', ''), +}); - return { - component: AllKnobsComponent, - props: { - name, - stock, - fruit, - otherFruit, - price, - border, - today, - items, - nice, - }, - }; - }) - .add('XSS safety', () => ({ - template: text('Rendered string', ''), - })); +xssSafety.story = { + name: 'XSS safety', +}; diff --git a/examples/angular-cli/src/stories/addon-links.stories.ts b/examples/angular-cli/src/stories/addon-links.stories.ts index 61c583d620aa..ec41687fbfcf 100644 --- a/examples/angular-cli/src/stories/addon-links.stories.ts +++ b/examples/angular-cli/src/stories/addon-links.stories.ts @@ -1,11 +1,18 @@ import { linkTo } from '@storybook/addon-links'; -import { storiesOf } from '@storybook/angular'; import { Button } from '@storybook/angular/demo'; -storiesOf('Addon|Links', module).add('button with link to another story', () => ({ +export default { + title: 'Addon|Links', +}; + +export const buttonWithLinkToAnotherStory = () => ({ component: Button, props: { text: 'Go to Welcome Story', onClick: linkTo('Welcome'), }, -})); +}); + +buttonWithLinkToAnotherStory.story = { + name: 'button with link to another story', +}; diff --git a/examples/angular-cli/src/stories/addon-notes.stories.ts b/examples/angular-cli/src/stories/addon-notes.stories.ts index 26e6091f59ea..59d68ab17e75 100644 --- a/examples/angular-cli/src/stories/addon-notes.stories.ts +++ b/examples/angular-cli/src/stories/addon-notes.stories.ts @@ -1,34 +1,39 @@ -import { storiesOf } from '@storybook/angular'; import { Button } from '@storybook/angular/demo'; -storiesOf('Addon|Notes', module) - .add( - 'Simple note', - () => ({ - component: Button, - props: { - text: 'Notes on some Button', - onClick: () => {}, - }, - }), - { notes: 'My notes on some button' } - ) - .add( - 'Note with HTML', - () => ({ - component: Button, - props: { - text: 'Notes with HTML', - onClick: () => {}, - }, - }), - { - notes: ` -

My notes on emojis

+export default { + title: 'Addon|Notes', +}; - It's not all that important to be honest, but.. +export const simpleNote = () => ({ + component: Button, + props: { + text: 'Notes on some Button', + onClick: () => {}, + }, +}); - Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇 - `, - } - ); +simpleNote.story = { + name: 'Simple note', + parameters: { notes: 'My notes on some button' }, +}; + +export const noteWithHtml = () => ({ + component: Button, + props: { + text: 'Notes with HTML', + onClick: () => {}, + }, +}); + +noteWithHtml.story = { + name: 'Note with HTML', + parameters: { + notes: ` +

My notes on emojis

+ + 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! 😇 + `, + }, +}; diff --git a/examples/angular-cli/src/stories/app.component.stories.ts b/examples/angular-cli/src/stories/app.component.stories.ts index f965a780e13d..52067047a630 100644 --- a/examples/angular-cli/src/stories/app.component.stories.ts +++ b/examples/angular-cli/src/stories/app.component.stories.ts @@ -1,7 +1,14 @@ -import { storiesOf } from '@storybook/angular'; import { AppComponent } from '../app/app.component'; -storiesOf('App Component', module).add('Component with separate template', () => ({ +export default { + title: 'App Component', +}; + +export const componentWithSeparateTemplate = () => ({ component: AppComponent, props: {}, -})); +}); + +componentWithSeparateTemplate.story = { + name: 'Component with separate template', +}; 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 a553eb7ac001..bbfc736dd1f1 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 @@ -1,23 +1,29 @@ -import { storiesOf } from '@storybook/angular'; import { withKnobs, text } from '@storybook/addon-knobs'; import { DiComponent } from './di.component'; -storiesOf('Custom|Dependencies', module) - .add('inputs and inject dependencies', () => ({ - component: DiComponent, - props: { - title: 'Component dependencies', - }, - })) - .add( - 'inputs and inject dependencies with knobs', - () => ({ - component: DiComponent, - props: { - title: text('title', 'Component dependencies'), - }, - }), - { - decorators: [withKnobs], - } - ); +export default { + title: 'Custom|Dependencies', +}; + +export const inputsAndInjectDependencies = () => ({ + component: DiComponent, + props: { + title: 'Component dependencies', + }, +}); + +inputsAndInjectDependencies.story = { + name: 'inputs and inject dependencies', +}; + +export const inputsAndInjectDependenciesWithKnobs = () => ({ + component: DiComponent, + props: { + title: text('title', 'Component dependencies'), + }, +}); + +inputsAndInjectDependenciesWithKnobs.story = { + name: 'inputs and inject dependencies with knobs', + decorators: [withKnobs], +}; 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 6df1a5405b29..3934fb7a5d2a 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,13 @@ -import { storiesOf } from '@storybook/angular'; import { StyledComponent } from './styled.component'; -storiesOf('Custom|styleUrls', module).add('Component with styles', () => ({ +export default { + title: 'Custom|styleUrls', +}; + +export const componentWithStyles = () => ({ component: StyledComponent, -})); +}); + +componentWithStyles.story = { + name: 'Component with styles', +}; diff --git a/examples/angular-cli/src/stories/core.stories.ts b/examples/angular-cli/src/stories/core.stories.ts index 33858918d912..10c2a42233e8 100644 --- a/examples/angular-cli/src/stories/core.stories.ts +++ b/examples/angular-cli/src/stories/core.stories.ts @@ -1,4 +1,4 @@ -import { storiesOf, addParameters } from '@storybook/angular'; +import { addParameters } from '@storybook/angular'; import { Button } from '@storybook/angular/demo'; const globalParameter = 'globalParameter'; @@ -7,16 +7,22 @@ const storyParameter = 'storyParameter'; addParameters({ globalParameter }); -storiesOf('Core|Parameters', module) - .addParameters({ chapterParameter }) - .add( - 'passed to story', - ({ parameters: { fileName, ...parameters } }) => ({ - component: Button, - props: { - text: `Parameters are ${JSON.stringify(parameters)}`, - onClick: () => 0, - }, - }), - { storyParameter } - ); +export default { + title: 'Core|Parameters', + parameters: { + chapterParameter, + }, +}; + +export const passedToStory = ({ parameters: { fileName, ...parameters } }) => ({ + component: Button, + props: { + text: `Parameters are ${JSON.stringify(parameters)}`, + onClick: () => 0, + }, +}); + +passedToStory.story = { + name: 'passed to story', + parameters: { storyParameter }, +}; diff --git a/examples/angular-cli/src/stories/custom-pipes.stories.ts b/examples/angular-cli/src/stories/custom-pipes.stories.ts index 9bb29bc75ba7..217ebe5ee360 100644 --- a/examples/angular-cli/src/stories/custom-pipes.stories.ts +++ b/examples/angular-cli/src/stories/custom-pipes.stories.ts @@ -1,33 +1,40 @@ -import { storiesOf, moduleMetadata } from '@storybook/angular'; +import { moduleMetadata } from '@storybook/angular'; import { withKnobs, text } from '@storybook/addon-knobs'; import { NameComponent } from './moduleMetadata/name.component'; import { CustomPipePipe } from './moduleMetadata/custom.pipe'; -storiesOf('Custom|Pipes', module) - .addDecorator( +export default { + title: 'Custom|Pipes', + decorators: [ moduleMetadata({ imports: [], schemas: [], declarations: [CustomPipePipe], providers: [], - }) - ) - .add('Simple', () => ({ - component: NameComponent, - props: { - field: 'foobar', - }, - })) - .add( - 'With Knobs', - () => ({ - component: NameComponent, - props: { - field: text('field', 'foobar'), - }, }), - { - decorators: [withKnobs], - } - ); + ], +}; + +export const simple = () => ({ + component: NameComponent, + props: { + field: 'foobar', + }, +}); + +simple.story = { + name: 'Simple', +}; + +export const withKnobsStory = () => ({ + component: NameComponent, + props: { + field: text('field', 'foobar'), + }, +}); + +withKnobsStory.story = { + name: 'With Knobs', + decorators: [withKnobs], +}; diff --git a/examples/angular-cli/src/stories/custom-providers.stories.ts b/examples/angular-cli/src/stories/custom-providers.stories.ts index 12814781bcd0..ad8b66a9048b 100644 --- a/examples/angular-cli/src/stories/custom-providers.stories.ts +++ b/examples/angular-cli/src/stories/custom-providers.stories.ts @@ -1,37 +1,44 @@ -import { storiesOf, moduleMetadata } from '@storybook/angular'; +import { moduleMetadata } from '@storybook/angular'; import { withKnobs, text } from '@storybook/addon-knobs'; import { DummyService } from './moduleMetadata/dummy.service'; import { ServiceComponent } from './moduleMetadata/service.component'; -storiesOf('Custom|Providers', module) - .addDecorator( +export default { + title: 'Custom|Providers', + decorators: [ moduleMetadata({ imports: [], schemas: [], declarations: [], providers: [DummyService], - }) - ) - .add('Simple', () => ({ + }), + ], +}; + +export const simple = () => ({ + component: ServiceComponent, + props: { + name: 'Static name', + }, +}); + +simple.story = { + name: 'Simple', +}; + +export const withKnobsStory = () => { + const name = text('name', 'Dynamic knob'); + + return { component: ServiceComponent, props: { - name: 'Static name', + name, }, - })) - .add( - 'With knobs', - () => { - const name = text('name', 'Dynamic knob'); + }; +}; - return { - component: ServiceComponent, - props: { - name, - }, - }; - }, - { - decorators: [withKnobs], - } - ); +withKnobsStory.story = { + name: 'With knobs', + decorators: [withKnobs], +}; diff --git a/examples/angular-cli/src/stories/custom-styles.stories.ts b/examples/angular-cli/src/stories/custom-styles.stories.ts index fc14f680dde0..1d1bcd1f69b0 100644 --- a/examples/angular-cli/src/stories/custom-styles.stories.ts +++ b/examples/angular-cli/src/stories/custom-styles.stories.ts @@ -1,47 +1,54 @@ -import { storiesOf, moduleMetadata } from '@storybook/angular'; +import { moduleMetadata } from '@storybook/angular'; import { action } from '@storybook/addon-actions'; import { withKnobs, text } from '@storybook/addon-knobs'; import { Button } from '@storybook/angular/demo'; -storiesOf('Custom|Style', module) - .addDecorator( +export default { + title: 'Custom|Style', + decorators: [ moduleMetadata({ declarations: [Button], - }) - ) - .add('Default', () => ({ - template: ``, - props: { - text: 'Button with custom styles', - onClick: action('log'), - }, - styles: [ - ` + }), + ], +}; + +export const defaultStory = () => ({ + template: ``, + props: { + text: 'Button with custom styles', + onClick: action('log'), + }, + styles: [ + ` storybook-button-component { background-color: yellow; padding: 25px; } `, - ], - })) - .add( - 'With Knobs', - () => ({ - template: ``, - props: { - text: text('text', 'Button with custom styles'), - onClick: action('log'), - }, - styles: [ - ` - storybook-button-component { - background-color: red; - padding: 25px; - } - `, - ], - }), - { - decorators: [withKnobs], - } - ); + ], +}); + +defaultStory.story = { + name: 'Default', +}; + +export const withKnobsStory = () => ({ + template: ``, + props: { + text: text('text', 'Button with custom styles'), + onClick: action('log'), + }, + styles: [ + ` + storybook-button-component { + background-color: red; + padding: 25px; + } +`, + ], +}); + +withKnobsStory.story = { + name: 'With Knobs', + decorators: [withKnobs], +}; diff --git a/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva-component.stories.ts b/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva-component.stories.ts index 85ff013cded1..1abfbbfb60fe 100644 --- a/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva-component.stories.ts +++ b/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva-component.stories.ts @@ -1,4 +1,3 @@ -import { storiesOf } from '@storybook/angular'; import { action } from '@storybook/addon-actions'; import { CustomCvaComponent } from './custom-cva.component'; @@ -6,14 +5,19 @@ const description = ` This is an example of component that implements ControlValueAccessor interface `; -storiesOf('Custom|ngModel', module).add( - 'custom ControlValueAccessor', - () => ({ - component: CustomCvaComponent, - props: { - ngModel: 'Type anything', - ngModelChange: action('ngModelChnange'), - }, - }), - { notes: description } -); +export default { + title: 'Custom|ngModel', +}; + +export const customControlValueAccessor = () => ({ + component: CustomCvaComponent, + props: { + ngModel: 'Type anything', + ngModelChange: action('ngModelChnange'), + }, +}); + +customControlValueAccessor.story = { + name: 'custom ControlValueAccessor', + parameters: { notes: description }, +}; diff --git a/examples/angular-cli/src/stories/inheritance/inheritance.stories.ts b/examples/angular-cli/src/stories/inheritance/inheritance.stories.ts index 48b7ff887da6..6d5dbc9030d5 100644 --- a/examples/angular-cli/src/stories/inheritance/inheritance.stories.ts +++ b/examples/angular-cli/src/stories/inheritance/inheritance.stories.ts @@ -1,18 +1,29 @@ -import { storiesOf } from '@storybook/angular'; import { IconButtonComponent } from './icon-button.component'; import { BaseButtonComponent } from './base-button.component'; -storiesOf('Custom|Inheritance', module) - .add('icon button', () => ({ - component: IconButtonComponent, - props: { - icon: 'this is icon', - label: 'this is label', - }, - })) - .add('base button', () => ({ - component: BaseButtonComponent, - props: { - label: 'this is label', - }, - })); +export default { + title: 'Custom|Inheritance', +}; + +export const iconButton = () => ({ + component: IconButtonComponent, + props: { + icon: 'this is icon', + label: 'this is label', + }, +}); + +iconButton.story = { + name: 'icon button', +}; + +export const baseButton = () => ({ + component: BaseButtonComponent, + props: { + label: 'this is label', + }, +}); + +baseButton.story = { + name: 'base button', +}; diff --git a/examples/angular-cli/src/stories/metadata-combined.stories.ts b/examples/angular-cli/src/stories/metadata-combined.stories.ts index 31c5289378e3..9aeceb8b8d2f 100644 --- a/examples/angular-cli/src/stories/metadata-combined.stories.ts +++ b/examples/angular-cli/src/stories/metadata-combined.stories.ts @@ -1,9 +1,10 @@ -import { storiesOf, moduleMetadata } from '@storybook/angular'; +import { moduleMetadata } from '@storybook/angular'; import { TokenComponent, ITEMS, DEFAULT_NAME } from './moduleMetadata/token.component'; import { CustomPipePipe } from './moduleMetadata/custom.pipe'; -storiesOf('Metadata|Combined', module) - .addDecorator( +export default { + title: 'Metadata|Combined', + decorators: [ moduleMetadata({ imports: [], declarations: [TokenComponent], @@ -17,20 +18,31 @@ storiesOf('Metadata|Combined', module) useValue: 'Provider Name', }, ], - }) - ) - .add('Combined 1', () => ({ - template: ``, - props: { - name: 'Prop Name', - }, - })) - .add('Combined 2', () => ({ - template: ``, - props: { - name: 'Prop Name', - }, - moduleMetadata: { - declarations: [CustomPipePipe], - }, - })); + }), + ], +}; + +export const combined1 = () => ({ + template: ``, + props: { + name: 'Prop Name', + }, +}); + +combined1.story = { + name: 'Combined 1', +}; + +export const combined2 = () => ({ + template: ``, + props: { + name: 'Prop Name', + }, + moduleMetadata: { + declarations: [CustomPipePipe], + }, +}); + +combined2.story = { + name: 'Combined 2', +}; diff --git a/examples/angular-cli/src/stories/metadata-individual.stories.ts b/examples/angular-cli/src/stories/metadata-individual.stories.ts index a9dfc7b3e9ef..39887d5a822a 100644 --- a/examples/angular-cli/src/stories/metadata-individual.stories.ts +++ b/examples/angular-cli/src/stories/metadata-individual.stories.ts @@ -1,37 +1,48 @@ -import { storiesOf } from '@storybook/angular'; import { TokenComponent, ITEMS, DEFAULT_NAME } from './moduleMetadata/token.component'; -storiesOf('Metadata|Individual', module) - .add('Individual 1', () => ({ - template: ``, - props: { - name: 'Prop Name', - }, - moduleMetadata: { - imports: [], - declarations: [TokenComponent], - providers: [ - { - provide: ITEMS, - useValue: ['Joe', 'Jane'], - }, - ], - }, - })) - .add('Individual 2', () => ({ - template: ``, - moduleMetadata: { - imports: [], - declarations: [TokenComponent], - providers: [ - { - provide: ITEMS, - useValue: ['Jim', 'Jill'], - }, - { - provide: DEFAULT_NAME, - useValue: 'Provider Name', - }, - ], - }, - })); +export default { + title: 'Metadata|Individual', +}; + +export const individual1 = () => ({ + template: ``, + props: { + name: 'Prop Name', + }, + moduleMetadata: { + imports: [], + declarations: [TokenComponent], + providers: [ + { + provide: ITEMS, + useValue: ['Joe', 'Jane'], + }, + ], + }, +}); + +individual1.story = { + name: 'Individual 1', +}; + +export const individual2 = () => ({ + template: ``, + moduleMetadata: { + imports: [], + declarations: [TokenComponent], + providers: [ + { + provide: ITEMS, + useValue: ['Jim', 'Jill'], + }, + { + provide: DEFAULT_NAME, + useValue: 'Provider Name', + }, + ], + }, +}); + +individual2.story = { + name: 'Individual 2', +}; diff --git a/examples/angular-cli/src/stories/metadata-shared.stories.ts b/examples/angular-cli/src/stories/metadata-shared.stories.ts index d4b38c3f0052..0189ffb13f19 100644 --- a/examples/angular-cli/src/stories/metadata-shared.stories.ts +++ b/examples/angular-cli/src/stories/metadata-shared.stories.ts @@ -1,8 +1,9 @@ -import { storiesOf, moduleMetadata } from '@storybook/angular'; +import { moduleMetadata } from '@storybook/angular'; import { TokenComponent, ITEMS, DEFAULT_NAME } from './moduleMetadata/token.component'; -storiesOf('Metadata|Shared', module) - .addDecorator( +export default { + title: 'Metadata|Shared', + decorators: [ moduleMetadata({ imports: [], declarations: [TokenComponent], @@ -16,14 +17,25 @@ storiesOf('Metadata|Shared', module) useValue: 'Provider Name', }, ], - }) - ) - .add('Shared 1', () => ({ - template: ``, - props: { - name: 'Prop Name', - }, - })) - .add('Shared 2', () => ({ - template: ``, - })); + }), + ], +}; + +export const shared1 = () => ({ + template: ``, + props: { + name: 'Prop Name', + }, +}); + +shared1.story = { + name: 'Shared 1', +}; + +export const shared2 = () => ({ + template: ``, +}); + +shared2.story = { + name: 'Shared 2', +}; diff --git a/examples/angular-cli/src/stories/on-push/on-push.stories.ts b/examples/angular-cli/src/stories/on-push/on-push.stories.ts index b02c7cc9d6d4..d050b138787a 100644 --- a/examples/angular-cli/src/stories/on-push/on-push.stories.ts +++ b/examples/angular-cli/src/stories/on-push/on-push.stories.ts @@ -1,21 +1,24 @@ -import { storiesOf } from '@storybook/angular'; import { withKnobs, text, color } from '@storybook/addon-knobs'; import { OnPushBoxComponent } from './on-push-box.component'; -storiesOf('Core|OnPush', module) - .addDecorator(withKnobs) - .add( - 'Class-specified component with OnPush and Knobs', - () => ({ - component: OnPushBoxComponent, - props: { - word: text('Word', 'OnPush'), - bgColor: color('Box color', '#FFF000'), - }, - }), - { - notes: ` - This component is specified by class and uses OnPush change detection. It has two properties, one being a HostBinding. Both should be updatable using knobs. - `.trim(), - } - ); +export default { + title: 'Core|OnPush', + decorators: [withKnobs], +}; + +export const classSpecifiedComponentWithOnPushAndKnobs = () => ({ + component: OnPushBoxComponent, + props: { + word: text('Word', 'OnPush'), + bgColor: color('Box color', '#FFF000'), + }, +}); + +classSpecifiedComponentWithOnPushAndKnobs.story = { + name: 'Class-specified component with OnPush and Knobs', + parameters: { + notes: ` + This component is specified by class and uses OnPush change detection. It has two properties, one being a HostBinding. Both should be updatable using knobs. + `.trim(), + }, +}; From 6ae22235ec734d72ab9cbc00f58d45ad0ba394c2 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 18 Oct 2019 09:07:36 +0800 Subject: [PATCH 2/2] Angular-cli example: Fix failing storyshots --- examples/angular-cli/jest.config.js | 1 + .../addon-actions.stories.storyshot | 12 ++--- .../addon-background.stories.storyshot | 4 +- .../addon-centered.stories.storyshot | 4 +- .../addon-jest.stories.storyshot | 2 +- .../addon-knobs.stories.storyshot | 4 +- .../addon-links.stories.storyshot | 6 +-- .../addon-notes.stories.storyshot | 12 ++--- .../app.component.stories.storyshot | 2 +- .../__snapshots__/core.stories.storyshot | 8 +-- .../custom-pipes.stories.storyshot | 2 +- .../custom-providers.stories.storyshot | 2 +- .../custom-styles.stories.storyshot | 12 ++--- .../__snapshots__/index.stories.storyshot | 54 +++++++++---------- .../di.component.stories.storyshot | 4 +- .../styled.component.stories.storyshot | 2 +- .../custom-cva-component.stories.storyshot | 2 +- .../inheritance.stories.storyshot | 4 +- .../module-context-forRoot.stories.storyshot | 40 +++++++------- .../module-context.stories.storyshot | 40 +++++++------- .../__snapshots__/on-push.stories.storyshot | 2 +- 21 files changed, 110 insertions(+), 109 deletions(-) diff --git a/examples/angular-cli/jest.config.js b/examples/angular-cli/jest.config.js index 5a1d1f9dfdd6..aef6a6dd8a31 100644 --- a/examples/angular-cli/jest.config.js +++ b/examples/angular-cli/jest.config.js @@ -8,6 +8,7 @@ module.exports = { }, roots: [__dirname], transform: { + '^.+\\.stories\\.[jt]sx?$': '@storybook/addon-storyshots/injectFileName', '^.+\\.jsx?$': '/scripts/babel-jest.js', '^.+[/\\\\].storybook[/\\\\]config\\.ts$': '/scripts/jest-ts-babel.js', '^.+\\.html$': '/node_modules/jest-preset-angular/preprocessor.js', 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 aceb663dd9cd..15bf0a822832 100644 --- a/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot @@ -1,16 +1,16 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Storyshots Addon|Actions Action and method 1`] = ` +exports[`Storyshots Addon|Actions Action And Method 1`] = ` @@ -18,17 +18,17 @@ 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-background.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-background.stories.storyshot index 2e50937f7f3f..f9548c66262a 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 518603dd9fd3..a567e0501801 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-jest.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-jest.stories.storyshot index 2b1132e5688a..1c3a8b3f4756 100644 --- a/examples/angular-cli/src/stories/__snapshots__/addon-jest.stories.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/addon-jest.stories.storyshot @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Storyshots Addon|Jest app.component with jest tests 1`] = ` +exports[`Storyshots Addon|Jest App Component With Jest Tests 1`] = ` `; -exports[`Storyshots Addon|Knobs XSS safety 1`] = ` +exports[`Storyshots Addon|Knobs Xss Safety 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 ce3742208373..f8309318557d 100644 --- a/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot @@ -1,16 +1,16 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Storyshots Addon|Notes Note with HTML 1`] = ` +exports[`Storyshots Addon|Notes Note With Html 1`] = ` @@ -18,17 +18,17 @@ 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__/app.component.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/app.component.stories.storyshot index 3425505a2436..812919e5188b 100644 --- a/examples/angular-cli/src/stories/__snapshots__/app.component.stories.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/app.component.stories.storyshot @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Storyshots App Component Component with separate template 1`] = ` +exports[`Storyshots App Component Component With Separate Template 1`] = ` diff --git a/examples/angular-cli/src/stories/__snapshots__/custom-pipes.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/custom-pipes.stories.storyshot index b2a69015ad53..ac80b8afb219 100644 --- a/examples/angular-cli/src/stories/__snapshots__/custom-pipes.stories.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/custom-pipes.stories.storyshot @@ -14,7 +14,7 @@ exports[`Storyshots Custom|Pipes Simple 1`] = ` `; -exports[`Storyshots Custom|Pipes With Knobs 1`] = ` +exports[`Storyshots Custom|Pipes With Knobs Story 1`] = ` `; -exports[`Storyshots Custom|Providers With knobs 1`] = ` +exports[`Storyshots Custom|Providers With Knobs Story 1`] = ` @@ -21,7 +21,7 @@ exports[`Storyshots Custom|Style Default 1`] = ` `; -exports[`Storyshots Custom|Style With Knobs 1`] = ` +exports[`Storyshots Custom|Style With Knobs Story 1`] = ` diff --git a/examples/angular-cli/src/stories/__snapshots__/index.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/index.stories.storyshot index 6ffc693b1131..d597059e64d0 100644 --- a/examples/angular-cli/src/stories/__snapshots__/index.stories.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/component-with-di/__snapshots__/di.component.stories.storyshot b/examples/angular-cli/src/stories/component-with-di/__snapshots__/di.component.stories.storyshot index bb1e628d5f83..e5a7203f3a78 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 @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Storyshots Custom|Dependencies inputs and inject dependencies 1`] = ` +exports[`Storyshots Custom|Dependencies Inputs And Inject Dependencies 1`] = ` `; -exports[`Storyshots Custom|Dependencies inputs and inject dependencies with knobs 1`] = ` +exports[`Storyshots Custom|Dependencies Inputs And Inject Dependencies With Knobs 1`] = ` `; -exports[`Storyshots Custom|Inheritance icon button 1`] = ` +exports[`Storyshots Custom|Inheritance Icon Button 1`] = ` My Chíp

✕ @@ -38,21 +38,21 @@ exports[`Storyshots Custom|Feature Module as Context with forRoot Component with target={[Function ViewContainerRef_]} > My Chíp
✕ @@ -69,28 +69,28 @@ exports[`Storyshots Custom|Feature Module as Context with forRoot Component with target={[Function ViewContainerRef_]} > Chíp 1
✕ @@ -98,24 +98,24 @@ exports[`Storyshots Custom|Feature Module as Context with forRoot Component with
Chíp 2
✕ @@ -124,7 +124,7 @@ exports[`Storyshots Custom|Feature Module as Context with forRoot Component with
Remove All diff --git a/examples/angular-cli/src/stories/module-context/__snapshots__/module-context.stories.storyshot b/examples/angular-cli/src/stories/module-context/__snapshots__/module-context.stories.storyshot index d61ddd41ba4c..838d283d5c21 100644 --- a/examples/angular-cli/src/stories/module-context/__snapshots__/module-context.stories.storyshot +++ b/examples/angular-cli/src/stories/module-context/__snapshots__/module-context.stories.storyshot @@ -7,21 +7,21 @@ exports[`Storyshots Custom|Feature Module as Context Component with default prov target={[Function ViewContainerRef_]} > My Chíp
✕ @@ -38,21 +38,21 @@ exports[`Storyshots Custom|Feature Module as Context Component with overridden p target={[Function ViewContainerRef_]} > My Chíp
✕ @@ -69,28 +69,28 @@ exports[`Storyshots Custom|Feature Module as Context Component with self and dep target={[Function ViewContainerRef_]} > Chíp 1
✕ @@ -98,24 +98,24 @@ exports[`Storyshots Custom|Feature Module as Context Component with self and dep
Chíp 2
✕ @@ -124,7 +124,7 @@ exports[`Storyshots Custom|Feature Module as Context Component with self and dep
Remove All diff --git a/examples/angular-cli/src/stories/on-push/__snapshots__/on-push.stories.storyshot b/examples/angular-cli/src/stories/on-push/__snapshots__/on-push.stories.storyshot index e449b7c64137..16233edd0907 100644 --- a/examples/angular-cli/src/stories/on-push/__snapshots__/on-push.stories.storyshot +++ b/examples/angular-cli/src/stories/on-push/__snapshots__/on-push.stories.storyshot @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Storyshots Core|OnPush Class-specified component with OnPush and Knobs 1`] = ` +exports[`Storyshots Core|OnPush Class Specified Component With On Push And Knobs 1`] = `