Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Addon-docs: Module story format & framework param #7110

Merged
merged 5 commits into from Jun 19, 2019
Merged

Addon-docs: Module story format & framework param #7110

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
711c839
Module story format & framework param
shilman Jun 17, 2019
2ae208e
Fix typo
shilman Jun 17, 2019
92ac9ba
Throw exception if default export lacks title field
shilman Jun 18, 2019
2e3dd28
Update snapshots
shilman Jun 18, 2019
766ae4a
Merge branch 'next' into 7101-module-story-format
shilman Jun 19, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions app/angular/src/client/index.js
View file
Open in desktop
Expand Up @@ -7,6 +7,7 @@ export {
getStorybook,
forceReRender,
raw,
load,
} from './preview';

export { moduleMetadata } from './preview/angular/decorators';
Expand Down
6 changes: 5 additions & 1 deletion app/angular/src/client/preview/index.js
View file
Open in desktop
Expand Up @@ -6,14 +6,18 @@ import render from './render';
const { clientApi, configApi, forceReRender } = start(render);

export const {
storiesOf,
setAddon,
addDecorator,
addParameters,
clearDecorators,
getStorybook,
raw,
load: coreLoad,
shilman marked this conversation as resolved.
Show resolved Hide resolved
} = clientApi;

const framework = 'angular';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I understand that passing framework will be used later (I see it already in https://github.com/storybookjs/storybook/pull/7119/files#diff-0f7bedc2d2cb7019c3fe0f0f28c18959R13). Are any other usecases to this ? (I am always standing for things to be generic =) )

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@igor-dv Yeah, I use it to automatically configure things about docs. For example, react defaults to inlining story renders, whereas the rest default to iframes. React and vue support Props prop tables, the rest do not, etc.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe it worth exposing "feature sets" that each framework supports instead of the framework

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's not a bad idea, though I plan to switch on the framework string to figure out e.g. how to extract the prop definitions. In addition, I believe that having this parameter also coincides with the multiframework stuff that @Hypnosphi is working on, so I thought it would just be a good thing to establish while I am making use of it in the docs work, rather than adding some new mechanism.

export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
export const load = (...args) => coreLoad(...args, framework);

export const { configure } = configApi;
export { forceReRender };
1 change: 1 addition & 0 deletions app/ember/src/client/index.js
View file
Open in desktop
Expand Up @@ -7,6 +7,7 @@ export {
getStorybook,
forceReRender,
raw,
load,
} from './preview';

if (module && module.hot && module.hot.decline) {
Expand Down
7 changes: 5 additions & 2 deletions app/ember/src/client/preview/index.js
View file
Open in desktop
Expand Up @@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
import './globals';
import render from './render';

const { clientApi, configApi, forceReRender } = start(render);
const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);

export const {
storiesOf,
setAddon,
addDecorator,
addParameters,
Expand All @@ -15,5 +14,9 @@ export const {
raw,
} = clientApi;

const framework = 'ember';
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
export const load = (...args) => coreLoad(...args, framework);

export const { configure } = configApi;
export { forceReRender };
1 change: 1 addition & 0 deletions app/html/src/client/index.js
View file
Open in desktop
Expand Up @@ -7,6 +7,7 @@ export {
getStorybook,
forceReRender,
raw,
load,
} from './preview';

if (module && module.hot && module.hot.decline) {
Expand Down
7 changes: 5 additions & 2 deletions app/html/src/client/preview/index.js
View file
Open in desktop
Expand Up @@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
import './globals';
import render from './render';

const { clientApi, configApi, forceReRender } = start(render);
const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);

export const {
storiesOf,
setAddon,
addDecorator,
addParameters,
Expand All @@ -15,5 +14,9 @@ export const {
raw,
} = clientApi;

const framework = 'html';
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
export const load = (...args) => coreLoad(...args, framework);

export const { configure } = configApi;
export { forceReRender };
1 change: 1 addition & 0 deletions app/marko/src/client/index.js
View file
Open in desktop
Expand Up @@ -7,6 +7,7 @@ export {
getStorybook,
forceReRender,
raw,
load,
} from './preview';

if (module && module.hot && module.hot.decline) {
Expand Down
7 changes: 5 additions & 2 deletions app/marko/src/client/preview/index.js
View file
Open in desktop
Expand Up @@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
import './globals';
import render from './render';

const { clientApi, configApi, forceReRender } = start(render);
const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);

export const {
storiesOf,
setAddon,
addDecorator,
addParameters,
Expand All @@ -15,5 +14,9 @@ export const {
raw,
} = clientApi;

const framework = 'marko';
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
export const load = (...args) => coreLoad(...args, framework);

export const { configure } = configApi;
export { forceReRender };
1 change: 1 addition & 0 deletions app/mithril/src/client/index.js
View file
Open in desktop
Expand Up @@ -7,6 +7,7 @@ export {
getStorybook,
forceReRender,
raw,
load,
} from './preview';

if (module && module.hot && module.hot.decline) {
Expand Down
7 changes: 5 additions & 2 deletions app/mithril/src/client/preview/index.js
View file
Open in desktop
Expand Up @@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
import './globals';
import render from './render';

const { clientApi, configApi, forceReRender } = start(render);
const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);

export const {
storiesOf,
setAddon,
addDecorator,
addParameters,
Expand All @@ -15,5 +14,9 @@ export const {
raw,
} = clientApi;

const framework = 'mithril';
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
export const load = (...args) => coreLoad(...args, framework);

export const { configure } = configApi;
export { forceReRender };
1 change: 1 addition & 0 deletions app/polymer/src/client/index.js
View file
Open in desktop
Expand Up @@ -7,6 +7,7 @@ export {
getStorybook,
forceReRender,
raw,
load,
} from './preview';

if (module && module.hot && module.hot.decline) {
Expand Down
7 changes: 5 additions & 2 deletions app/polymer/src/client/preview/index.js
View file
Open in desktop
Expand Up @@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
import './globals';
import render from './render';

const { clientApi, configApi, forceReRender } = start(render);
const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);

export const {
storiesOf,
setAddon,
addDecorator,
addParameters,
Expand All @@ -15,5 +14,9 @@ export const {
raw,
} = clientApi;

const framework = 'polymer';
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
export const load = (...args) => coreLoad(...args, framework);

export const { configure } = configApi;
export { forceReRender };
1 change: 1 addition & 0 deletions app/preact/src/client/index.js
View file
Open in desktop
Expand Up @@ -7,4 +7,5 @@ export {
getStorybook,
forceReRender,
raw,
load,
} from './preview';
7 changes: 5 additions & 2 deletions app/preact/src/client/preview/index.js
View file
Open in desktop
Expand Up @@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
import './globals';
import render from './render';

const { clientApi, configApi, forceReRender } = start(render);
const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);

export const {
storiesOf,
setAddon,
addDecorator,
addParameters,
Expand All @@ -15,5 +14,9 @@ export const {
raw,
} = clientApi;

const framework = 'preact';
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
export const load = (...args) => coreLoad(...args, framework);

export const { configure } = configApi;
export { forceReRender };
5 changes: 4 additions & 1 deletion app/react-native/src/index.ts
View file
Open in desktop
Expand Up @@ -2,7 +2,7 @@ import Preview from './preview';

const preview = new Preview();

export const storiesOf = preview.api().storiesOf.bind(preview);
const rawStoriesOf = preview.api().storiesOf.bind(preview);
export const setAddon = preview.api().setAddon.bind(preview);
export const addDecorator = preview.api().addDecorator.bind(preview);
export const addParameters = preview.api().addParameters.bind(preview);
Expand All @@ -11,3 +11,6 @@ export const configure = preview.configure;
export const getStorybook = preview.api().getStorybook.bind(preview);
export const getStorybookUI = preview.getStorybookUI;
export const raw = preview.api().raw.bind(preview);

export const storiesOf = (...args: any[]) =>
rawStoriesOf(...args).addParameters({ framework: 'react-native' });
1 change: 1 addition & 0 deletions app/react/src/client/index.js
View file
Open in desktop
Expand Up @@ -7,6 +7,7 @@ export {
getStorybook,
raw,
forceReRender,
load,
} from './preview';

if (module && module.hot && module.hot.decline) {
Expand Down
7 changes: 5 additions & 2 deletions app/react/src/client/preview/index.js
View file
Open in desktop
Expand Up @@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
import './globals';
import render from './render';

const { clientApi, configApi, forceReRender } = start(render);
const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);

export const {
storiesOf,
setAddon,
addDecorator,
addParameters,
Expand All @@ -15,5 +14,9 @@ export const {
raw,
} = clientApi;

const framework = 'react';
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
export const load = (...args) => coreLoad(...args, framework);

export const { configure } = configApi;
export { forceReRender };
1 change: 1 addition & 0 deletions app/riot/src/client/index.js
View file
Open in desktop
Expand Up @@ -12,6 +12,7 @@ export {
compileNow,
asCompiledCode,
raw,
load,
} from './preview';

if (module && module.hot && module.hot.decline) {
Expand Down
7 changes: 5 additions & 2 deletions app/riot/src/client/preview/index.js
View file
Open in desktop
Expand Up @@ -5,10 +5,9 @@ import riot, { tag2, mount as vendorMount } from 'riot';
import render from './render';
import { compileNow as unboundCompileNow, asCompiledCode } from './compileStageFunctions';

const { clientApi, configApi, forceReRender } = start(render);
const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);

export const {
storiesOf,
setAddon,
addDecorator,
addParameters,
Expand All @@ -17,6 +16,10 @@ export const {
raw,
} = clientApi;

const framework = 'riot';
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
export const load = (...args) => coreLoad(...args, framework);

export const { configure } = configApi;
const mount = vendorMount.bind(riot, '#root');
const compileNow = unboundCompileNow.bind(null, tag2);
Expand Down
1 change: 1 addition & 0 deletions app/svelte/src/client/index.js
View file
Open in desktop
Expand Up @@ -7,6 +7,7 @@ export {
getStorybook,
forceReRender,
raw,
load,
} from './preview';

if (module && module.hot && module.hot.decline) {
Expand Down
7 changes: 5 additions & 2 deletions app/svelte/src/client/preview/index.js
View file
Open in desktop
Expand Up @@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
import './globals';
import render from './render';

const { clientApi, configApi, forceReRender } = start(render);
const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);

export const {
storiesOf,
setAddon,
addDecorator,
addParameters,
Expand All @@ -15,5 +14,9 @@ export const {
raw,
} = clientApi;

const framework = 'svelte';
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
export const load = (...args) => coreLoad(...args, framework);

export const { configure } = configApi;
export { forceReRender };
1 change: 1 addition & 0 deletions app/vue/src/client/index.js
View file
Open in desktop
Expand Up @@ -7,6 +7,7 @@ export {
getStorybook,
forceReRender,
raw,
load,
} from './preview';

if (module && module.hot && module.hot.decline) {
Expand Down
7 changes: 5 additions & 2 deletions app/vue/src/client/preview/index.js
View file
Open in desktop
Expand Up @@ -70,10 +70,9 @@ function decorateStory(getStory, decorators) {
);
}

const { clientApi, configApi, forceReRender } = start(render, { decorateStory });
const { load: coreLoad, clientApi, configApi, forceReRender } = start(render, { decorateStory });

export const {
storiesOf,
setAddon,
addDecorator,
addParameters,
Expand All @@ -82,5 +81,9 @@ export const {
raw,
} = clientApi;

const framework = 'vue';
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
export const load = (...args) => coreLoad(...args, framework);

export const { configure } = configApi;
export { forceReRender };