diff --git a/addons/storysource/README.md b/addons/storysource/README.md index 59fad9a662d3..847ad2157961 100644 --- a/addons/storysource/README.md +++ b/addons/storysource/README.md @@ -143,3 +143,29 @@ module.exports = { }, }; ``` + +### injectDecorator +Tell storysource whether you need inject decorator.If false, you need to add the decorator by yourself; + +Defaults: true + +Usage: + +```js +module.exports = { + module: { + rules: [ + { + test: /\.stories\.jsx?$/, + loaders: [ + { + loader: require.resolve('@storybook/addon-storysource/loader'), + options: { injectDecorator: false } + } + ], + enforce: 'pre', + }, + ], + }, +}; +``` diff --git a/addons/storysource/src/loader/__snapshots__/inject-decorator.test.js.snap b/addons/storysource/src/loader/__snapshots__/inject-decorator.test.js.snap index 2a42bfc8fdee..f5c3d3d46fd5 100644 --- a/addons/storysource/src/loader/__snapshots__/inject-decorator.test.js.snap +++ b/addons/storysource/src/loader/__snapshots__/inject-decorator.test.js.snap @@ -1,5 +1,216 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`inject-decorator injectDecorator option is false - angular does not inject stories decorator after the all "storiesOf" functions 1`] = ` +"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], + }, +})); +" +`; + +exports[`inject-decorator injectDecorator option is false - ts does not inject stories decorator after the all "storiesOf" functions 1`] = ` +"import { Component } from '@angular/core'; +import { Store, StoreModule } from '@ngrx/store'; +import { storiesOf, moduleMetadata } from '@storybook/angular'; + +@Component({ + selector: 'storybook-comp-with-store', + template: '
{{this.getSotreState()}}
', +}) +class WithStoreComponent { + private store: Store; + + constructor(store: Store) { + this.store = store; + } + + getSotreState(): string { + return this.store === undefined ? 'Store is NOT injected' : 'Store is injected'; + } +} + +storiesOf('ngrx|Store', module) + .addDecorator( + moduleMetadata({ + imports: [StoreModule.forRoot({})], + declarations: [WithStoreComponent], + }) + ) + .add('With component', () => { + return { + component: WithStoreComponent, + }; + });" +`; + +exports[`inject-decorator injectDecorator option is false does not inject stories decorator after the all "storiesOf" functions 1`] = ` +"import React from 'react'; +import { storiesOf } from '@storybook/react'; +import { withInfo } from '@storybook/addon-info'; +import { action } from '@storybook/addon-actions'; + +import DocgenButton from '../components/DocgenButton'; +import FlowTypeButton from '../components/FlowTypeButton'; +import BaseButton from '../components/BaseButton'; +import TableComponent from '../components/TableComponent'; + +storiesOf('Addons|Info.React Docgen', module) + .add( + 'Comments from PropType declarations', + withInfo( + 'Comments above the PropType declarations should be extracted from the React component file itself and rendered in the Info Addon prop table' + )(() => ) + ) + .add( + 'Comments from Flow declarations', + withInfo( + 'Comments above the Flow declarations should be extracted from the React component file itself and rendered in the Info Addon prop table' + )(() => ) + ) + .add( + 'Comments from component declaration', + withInfo( + 'Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading' + )(() => ) + ); + +const markdownDescription = \` +#### You can use markdown in your withInfo() description. + +Sometimes you might want to manually include some code examples: +~~~js +const Button = () =>