GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-05 05:01:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Official-storybook: update stories to module format

Browse Source
This commit is contained in:
Michael Shilman 2019-06-27 22:55:22 +08:00
parent e5b4bcd441
commit d9c67d7502
49 changed files with 2043 additions and 1290 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
examples/official-storybook/stories/addon-a11y.stories.js
View File

@ -1,95 +0,0 @@
import React, { Fragment } from 'react';
import { storiesOf } from '@storybook/react';
import { Form } from '@storybook/components';
import BaseButton from '../components/BaseButton';
import DelayedRender from '../components/DelayedRender';
import Button from '../components/addon-a11y/Button';
const text = 'Testing the a11y addon';
const image = 'http://placehold.it/350x150';
// eslint-disable-next-line no-script-url
const href = 'javascript:void 0';
storiesOf('Addons|A11y/BaseButton', module)
.addParameters({
component: BaseButton,
})
.addParameters({ options: { selectedPanel: 'storybook/a11y/panel' } })
.add('Default', () => <BaseButton label="" />)
.add('Label', () => <BaseButton label={text} />)
.add('Disabled', () => <BaseButton disabled label={text} />)
.add('Invalid contrast', () => (
// FIXME: has no effect on score
<BaseButton style={{ color: 'black', backgroundColor: 'black' }} label={text} />
))
.add('delayed render', () => (
<DelayedRender>
<BaseButton label="This button has a delayed render of 1s" />
</DelayedRender>
));
storiesOf('Addons|A11y/Button', module)
.addParameters({
component: Button,
})
.addParameters({ options: { selectedPanel: 'storybook/a11y/panel' } })
.add('Default', () => <Button />)
.add('Content', () => <Button content={text} />)
.add('Label', () => <Button label={text} />)
.add('Disabled', () => <Button disabled content={text} />)
.add('Invalid contrast', () => <Button contrast="wrong" content={text} />);
storiesOf('Addons|A11y/Form', module)
.addParameters({
component: Form,
})
.addParameters({ options: { selectedPanel: 'storybook/a11y/panel' } })
.add('Without Label', () => (
<Form.Field label="">
<Form.Input />
</Form.Field>
))
.add('With label', () => (
<Form.Field label={text}>
<Form.Input id="1" />
</Form.Field>
))
.add('With placeholder', () => (
<Form.Field label="">
<Form.Input id="1" placeholder={text} />
</Form.Field>
));
storiesOf('Addons|A11y/Image', module)
.addParameters({ options: { selectedPanel: 'storybook/a11y/panel' } })
/* eslint-disable jsx-a11y/alt-text */
.add('Without alt', () => <img src={image} />)
.add('Without alt but unchecked', () => <img src={image} />, {
a11y: {
config: {
disableOtherRules: true,
rules: [],
},
options: {},
},
})
.add('With alt', () => <img src={image} alt={text} />)
.add('Presentation', () => <img role="presentation" src={image} />);
storiesOf('Addons|A11y/Typography', module)
.addParameters({ options: { selectedPanel: 'storybook/a11y/panel' } })
.add('Correct', () => (
<Fragment>
<h1>{text}</h1>
<p>{text}</p>
<a href={href}>{`${text}...`}</a>
</Fragment>
))
/* eslint-disable jsx-a11y/heading-has-content */
.add('Empty Heading', () => <h1 />)
.add('Empty Paragraph', () => <p />)
/* eslint-disable jsx-a11y/anchor-has-content */
.add('Empty Link', () => <a href={href} />)
/* eslint-disable jsx-a11y/anchor-is-valid */
.add('Link without href', () => <a>{`${text}...`}</a>);

34
examples/official-storybook/stories/addon-a11y/base-button.stories.js Normal file
View File

@ -0,0 +1,34 @@
import React from 'react';
import BaseButton from '../../components/BaseButton';
import DelayedRender from '../../components/DelayedRender';
const text = 'Testing the a11y addon';
export default {
title: 'Addons|A11y/BaseButton',
parameters: {
component: BaseButton,
options: { selectedPanel: 'storybook/a11y/panel' },
},
};
export const Default = () => <BaseButton label="" />;
export const Label = () => <BaseButton label={text} />;
export const Disabled = () => <BaseButton disabled label={text} />;
export const invalidContrast = () => (
// FIXME: has no effect on score
<BaseButton style={{ color: 'black', backgroundColor: 'black' }} label={text} />
);
invalidContrast.story = {
name: 'Invalid contrast',
};
export const delayedRender = () => (
<DelayedRender>
<BaseButton label="This button has a delayed render of 1s" />
</DelayedRender>
);
delayedRender.story = {
name: 'delayed render',
};

21
examples/official-storybook/stories/addon-a11y/button.stories.js Normal file
View File

@ -0,0 +1,21 @@
import React from 'react';
import Button from '../../components/addon-a11y/Button';
const text = 'Testing the a11y addon';
export default {
title: 'Addons|A11y/Button',
parameters: {
component: Button,
options: { selectedPanel: 'storybook/a11y/panel' },
},
};
export const Default = () => <Button />;
export const Content = () => <Button content={text} />;
export const Label = () => <Button label={text} />;
export const Disabled = () => <Button disabled content={text} />;
export const invalidContrast = () => <Button contrast="wrong" content={text} />;
invalidContrast.story = {
name: 'Invalid contrast',
};

40
examples/official-storybook/stories/addon-a11y/form.stories.js Normal file
View File

@ -0,0 +1,40 @@
import React from 'react';
import { Form } from '@storybook/components';
const text = 'Testing the a11y addon';
export default {
title: 'Addons|A11y/Form',
parameters: {
component: Form,
options: { selectedPanel: 'storybook/a11y/panel' },
},
};
export const withoutLabel = () => (
<Form.Field label="">
<Form.Input />
</Form.Field>
);
withoutLabel.story = {
name: 'Without Label',
};
export const withLabel = () => (
<Form.Field label={text}>
<Form.Input id="1" />
</Form.Field>
);
withLabel.story = {
name: 'With label',
};
export const withPlaceholder = () => (
<Form.Field label="">
<Form.Input id="1" placeholder={text} />
</Form.Field>
);
withPlaceholder.story = {
name: 'With placeholder',
};

38
examples/official-storybook/stories/addon-a11y/image.stories.js Normal file
View File

@ -0,0 +1,38 @@
/* eslint-disable */
import React from 'react';
const text = 'Testing the a11y addon';
const image = 'http://placehold.it/350x150';
export default {
title: 'Addons|A11y/Image',
parameters: {
options: { selectedPanel: 'storybook/a11y/panel' },
},
};
export const withoutAlt = () => <img src={image} />;
withoutAlt.story = {
name: 'Without alt',
};
export const withoutAltButUnchecked = () => <img src={image} />;
withoutAltButUnchecked.story = {
name: 'Without alt but unchecked',
parameters: {
a11y: {
config: {
disableOtherRules: true,
rules: [],
},
options: {},
},
},
};
export const withAlt = () => <img src={image} alt={text} />;
withAlt.story = {
name: 'With alt',
};
export const Presentation = () => <img role="presentation" src={image} />;

44
examples/official-storybook/stories/addon-a11y/typography.stories.js Normal file
View File

@ -0,0 +1,44 @@
/* eslint-disable */
import React, { Fragment } from 'react';
const text = 'Testing the a11y addon';
const href = 'javascript:void 0';
export default {
title: 'Addons|A11y/Typography',
parameters: {
options: { selectedPanel: 'storybook/a11y/panel' },
},
};
export const Correct = () => (
<Fragment>
<h1>{text}</h1>
<p>{text}</p>
<a href={href}>{`${text}...`}</a>
</Fragment>
);
export const emptyHeading = () => <h1 />;
emptyHeading.story = {
name: 'Empty Heading',
};
export const emptyParagraph = () => <p />;
emptyParagraph.story = {
name: 'Empty Paragraph',
};
export const emptyLink = () => <a href={href} />;
emptyLink.story = {
name: 'Empty Link',
};
export const linkWithoutHref = () => <a>{`${text}...`}</a>;
linkWithoutHref.story = {
name: 'Link without href',
};

333
examples/official-storybook/stories/addon-actions.stories.js
View File

@ -1,6 +1,5 @@
import { window, File } from 'global';
import React, { Fragment } from 'react';
import { storiesOf } from '@storybook/react';
import {
action,
actions,
@ -15,152 +14,216 @@ const { Button } = Form;
const pickNative = decorate([args => [args[0].nativeEvent]]);
const pickNativeAction = decorateAction([args => [args[0].nativeEvent]]);
storiesOf('Addons|Actions', module)
.addParameters({
export default {
title: 'Addons|Actions',
parameters: {
options: {
selectedPanel: 'storybook/actions/panel',
},
})
},
};
.add('Basic example', () => <Button onClick={action('hello-world')}>Hello World</Button>)
.add('Multiple actions', () => (
<Button {...actions('onClick', 'onMouseOver')}>Hello World</Button>
))
.add('Multiple actions + config', () => (
<Button {...actions('onClick', 'onMouseOver', { clearOnStoryChange: false })}>
Moving away from this story will persist the action logger
</Button>
))
.add('Multiple actions as object', () => (
<Button {...actions({ onClick: 'clicked', onMouseOver: 'hovered' })}>Hello World</Button>
))
.add('Multiple actions, object + config', () => (
<Button
{...actions({ onClick: 'clicked', onMouseOver: 'hovered' }, { clearOnStoryChange: false })}
>
Moving away from this story will persist the action logger
</Button>
))
.add('Decorated action', () => (
<Button onClick={pickNative.action('decorated')}>Native Event</Button>
))
.add('Decorated action + config', () => (
<Button onClick={pickNative.action('decorated', { clearOnStoryChange: false })}>
Moving away from this story will persist the action logger
</Button>
))
.add('Decorated actions', () => (
<Button {...pickNative.actions('onClick', 'onMouseOver')}>Native Event</Button>
))
.add('Decorated actions + config', () => (
<Button {...pickNative.actions('onClick', 'onMouseOver', { clearOnStoryChange: false })}>
Moving away from this story will persist the action logger
</Button>
))
.add('Circular Payload', () => {
const circular = { foo: {} };
circular.foo.circular = circular;
return <Button onClick={() => action('circular')(circular)}>Circular Payload</Button>;
})
.add('Reserved keyword as name', () => <Button onClick={action('delete')}>Delete</Button>)
.add('All types', () => {
function A() {}
function B() {}
export const basicExample = () => <Button onClick={action('hello-world')}>Hello World</Button>;
const bound = B.bind({});
basicExample.story = {
name: 'Basic example',
};
let file;
try {
file = new File([''], 'filename.txt', { type: 'text/plain', lastModified: new Date() });
} catch (error) {
file = error;
}
const reg = /fooBar/g;
export const multipleActions = () => (
<Button {...actions('onClick', 'onMouseOver')}>Hello World</Button>
);
return (
<Fragment>
<Button onClick={() => action('Array')(['foo', 'bar', { foo: 'bar' }])}>Array</Button>
<Button onClick={() => action('Boolean')(false)}>Boolean</Button>
<Button onClick={() => action('Empty Object')({})}>Empty Object</Button>
<Button onClick={() => action('File')(file)}>File</Button>
<Button onClick={() => action('Function')(A)}>Function A</Button>
<Button onClick={() => action('Function (bound)')(bound)}>Bound Function B</Button>
<Button onClick={() => action('Infinity')(Infinity)}>Infinity</Button>
<Button onClick={() => action('-Infinity')(-Infinity)}>-Infinity</Button>
<Button onClick={() => action('NaN')(NaN)}>NaN</Button>
<Button onClick={() => action('null')(null)}>null</Button>
<Button onClick={() => action('Number')(10000)}>Number</Button>
<Button
onClick={() =>
action('Multiple')(
'foo',
1000,
true,
false,
[1, 2, 3],
null,
undefined,
{ foo: 'bar' },
window
)
}
>
Multiple
</Button>
<Button onClick={() => action('Plain Object')({ foo: { bar: { baz: { bar: 'foo' } } } })}>
Plain Object
</Button>
<Button
onClick={() =>
action('ObjectDepth2', { depth: 2 })({ root: { one: { two: { three: 'foo' } } } })
}
>
Object (depth: 2)
</Button>
<Button onClick={() => action('RegExp')(reg)}>RegExp</Button>
<Button onClick={() => action('String')('foo')}>String</Button>
<Button onClick={() => action('Symbol')(Symbol('A_SYMBOL'))}>Symbol</Button>
<Button onClick={action('SyntheticMouseEvent')}>SyntheticEvent</Button>
<Button onClick={() => action('undefined')(undefined)}>undefined</Button>
<Button onClick={() => action('window')(window)}>Window</Button>
</Fragment>
);
})
multipleActions.story = {
name: 'Multiple actions',
};
.add('configureActionsDepth', () => {
configureActions({
depth: 2,
});
export const multipleActionsConfig = () => (
<Button {...actions('onClick', 'onMouseOver', { clearOnStoryChange: false })}>
Moving away from this story will persist the action logger
</Button>
);
return (
<Button
onClick={() => action('ConfiguredDepth')({ root: { one: { two: { three: 'foo' } } } })}
>
Object (configured depth: 2)
</Button>
);
})
.add('Persisting the action logger', () => (
multipleActionsConfig.story = {
name: 'Multiple actions + config',
};
export const multipleActionsAsObject = () => (
<Button {...actions({ onClick: 'clicked', onMouseOver: 'hovered' })}>Hello World</Button>
);
multipleActionsAsObject.story = {
name: 'Multiple actions as object',
};
export const multipleActionsObjectConfig = () => (
<Button
{...actions({ onClick: 'clicked', onMouseOver: 'hovered' }, { clearOnStoryChange: false })}
>
Moving away from this story will persist the action logger
</Button>
);
multipleActionsObjectConfig.story = {
name: 'Multiple actions, object + config',
};
export const decoratedAction = () => (
<Button onClick={pickNative.action('decorated')}>Native Event</Button>
);
decoratedAction.story = {
name: 'Decorated action',
};
export const decoratedActionConfig = () => (
<Button onClick={pickNative.action('decorated', { clearOnStoryChange: false })}>
Moving away from this story will persist the action logger
</Button>
);
decoratedActionConfig.story = {
name: 'Decorated action + config',
};
export const decoratedActions = () => (
<Button {...pickNative.actions('onClick', 'onMouseOver')}>Native Event</Button>
);
decoratedActions.story = {
name: 'Decorated actions',
};
export const decoratedActionsConfig = () => (
<Button {...pickNative.actions('onClick', 'onMouseOver', { clearOnStoryChange: false })}>
Moving away from this story will persist the action logger
</Button>
);
decoratedActionsConfig.story = {
name: 'Decorated actions + config',
};
export const circularPayload = () => {
const circular = { foo: {} };
circular.foo.circular = circular;
return <Button onClick={() => action('circular')(circular)}>Circular Payload</Button>;
};
circularPayload.story = {
name: 'Circular Payload',
};
export const reservedKeywordAsName = () => <Button onClick={action('delete')}>Delete</Button>;
reservedKeywordAsName.story = {
name: 'Reserved keyword as name',
};
export const allTypes = () => {
function A() {}
function B() {}
const bound = B.bind({});
let file;
try {
file = new File([''], 'filename.txt', { type: 'text/plain', lastModified: new Date() });
} catch (error) {
file = error;
}
const reg = /fooBar/g;
return (
<Fragment>
<p>Moving away from this story will persist the action logger</p>
<Button onClick={action('clear-action-logger', { clearOnStoryChange: false })}>
Object (configured clearOnStoryChange: false)
<Button onClick={() => action('Array')(['foo', 'bar', { foo: 'bar' }])}>Array</Button>
<Button onClick={() => action('Boolean')(false)}>Boolean</Button>
<Button onClick={() => action('Empty Object')({})}>Empty Object</Button>
<Button onClick={() => action('File')(file)}>File</Button>
<Button onClick={() => action('Function')(A)}>Function A</Button>
<Button onClick={() => action('Function (bound)')(bound)}>Bound Function B</Button>
<Button onClick={() => action('Infinity')(Infinity)}>Infinity</Button>
<Button onClick={() => action('-Infinity')(-Infinity)}>-Infinity</Button>
<Button onClick={() => action('NaN')(NaN)}>NaN</Button>
<Button onClick={() => action('null')(null)}>null</Button>
<Button onClick={() => action('Number')(10000)}>Number</Button>
<Button
onClick={() =>
action('Multiple')(
'foo',
1000,
true,
false,
[1, 2, 3],
null,
undefined,
{ foo: 'bar' },
window
)
}
>
Multiple
</Button>
<Button onClick={() => action('Plain Object')({ foo: { bar: { baz: { bar: 'foo' } } } })}>
Plain Object
</Button>
<Button
onClick={() =>
action('ObjectDepth2', { depth: 2 })({ root: { one: { two: { three: 'foo' } } } })
}
>
Object (depth: 2)
</Button>
<Button onClick={() => action('RegExp')(reg)}>RegExp</Button>
<Button onClick={() => action('String')('foo')}>String</Button>
<Button onClick={() => action('Symbol')(Symbol('A_SYMBOL'))}>Symbol</Button>
<Button onClick={action('SyntheticMouseEvent')}>SyntheticEvent</Button>
<Button onClick={() => action('undefined')(undefined)}>undefined</Button>
<Button onClick={() => action('window')(window)}>Window</Button>
</Fragment>
))
.add('Limit Action Output', () => {
configureActions({
limit: 2,
});
);
};
return (
<Fragment>
<Button onClick={() => action('False')(false)}>False</Button>
<Button onClick={() => action('True')(true)}>True</Button>
</Fragment>
);
allTypes.story = {
name: 'All types',
};
export const configureActionsDepth = () => {
configureActions({
depth: 2,
});
storiesOf('Addons|Actions.deprecated', module).add('Decorated Action', () => (
<Button onClick={pickNativeAction('decorated')}>Native Event</Button>
));
return (
<Button onClick={() => action('ConfiguredDepth')({ root: { one: { two: { three: 'foo' } } } })}>
Object (configured depth: 2)
</Button>
);
};
export const persistingTheActionLogger = () => (
<Fragment>
<p>Moving away from this story will persist the action logger</p>
<Button onClick={action('clear-action-logger', { clearOnStoryChange: false })}>
Object (configured clearOnStoryChange: false)
</Button>
</Fragment>
);
persistingTheActionLogger.story = {
name: 'Persisting the action logger',
};
export const limitActionOutput = () => {
configureActions({
limit: 2,
});
return (
<Fragment>
<Button onClick={() => action('False')(false)}>False</Button>
<Button onClick={() => action('True')(true)}>True</Button>
</Fragment>
);
};
limitActionOutput.story = {
name: 'Limit Action Output',
};

67
examples/official-storybook/stories/addon-backgrounds.stories.js
View File

@ -1,10 +1,11 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import BaseButton from '../components/BaseButton';
storiesOf('Addons|Backgrounds', module)
.addParameters({
export default {
title: 'Addons|Backgrounds',
parameters: {
backgrounds: [
{ name: 'white', value: '#ffffff' },
{ name: 'light', value: '#eeeeee' },
@ -12,24 +13,52 @@ storiesOf('Addons|Backgrounds', module)
{ name: 'dark', value: '#222222', default: true },
{ name: 'black', value: '#000000' },
],
})
.add('story 1', () => (
<BaseButton label="You should be able to switch backgrounds for this story" />
))
.add('story 2', () => <BaseButton label="This one too!" />)
.add('overriden', () => <BaseButton label="This one should have different backgrounds" />, {
},
};
export const story1 = () => (
<BaseButton label="You should be able to switch backgrounds for this story" />
);
story1.story = {
name: 'story 1',
};
export const story2 = () => <BaseButton label="This one too!" />;
story2.story = {
name: 'story 2',
};
export const overriden = () => <BaseButton label="This one should have different backgrounds" />;
overriden.story = {
parameters: {
backgrounds: [
{ name: 'pink', value: 'hotpink' },
{ name: 'blue', value: 'deepskyblue', default: true },
],
})
.add('disabled via []', () => <BaseButton label="This one should not use backgrounds" />, {
},
};
export const disabledVia = () => <BaseButton label="This one should not use backgrounds" />;
disabledVia.story = {
name: 'disabled via []',
parameters: {
backgrounds: [],
})
.add(
'skipped via disable:true',
() => <BaseButton label="This one should not use backgrounds either" />,
{
backgrounds: { disable: true },
}
);
},
};
export const skippedViaDisableTrue = () => (
<BaseButton label="This one should not use backgrounds either" />
);
skippedViaDisableTrue.story = {
name: 'skipped via disable:true',
parameters: {
backgrounds: { disable: true },
},
};

14
examples/official-storybook/stories/addon-centered.stories.js
View File

@ -1,9 +1,15 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import centered from '@storybook/addon-centered/react';
import BaseButton from '../components/BaseButton';
storiesOf('Addons|Centered', module)
.addDecorator(centered)
.add('story 1', () => <BaseButton label="This story should be centered" />);
export default {
title: 'Addons|Centered',
decorators: [centered],
};
export const story1 = () => <BaseButton label="This story should be centered" />;
story1.story = {
name: 'story 1',
};

40
examples/official-storybook/stories/addon-contexts.stories.js
View File

@ -1,5 +1,4 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withContexts } from '@storybook/addon-contexts/react';
// Example A: Simple CSS Theming
@ -39,15 +38,20 @@ const storyLevelContexts = [
},
];
const stories = storiesOf('Addons|Contexts', module).addDecorator(withContexts(topLevelContexts));
export default {
title: 'Addons|Contexts',
decorators: [withContexts(topLevelContexts)],
};
stories.add(
'Simple CSS Theming',
() => <>I'm a children of the injected 'div' (where provides a theming context).</>,
{
contexts: storyLevelContexts,
}
export const simpleCssTheming = () => (
<>I'm a children of the injected 'div' (where provides a theming context).</>
);
simpleCssTheming.story = {
name: 'Simple CSS Theming',
parameters: {
contexts: storyLevelContexts,
},
};
// Example B: Language (React Contexts API)
const NaiveIntlContext = React.createContext({
@ -55,14 +59,14 @@ const NaiveIntlContext = React.createContext({
greeting: 'NULL',
});
stories.add(
'Languages',
() => (
<NaiveIntlContext.Consumer>
{({ locale, greeting }) => `Your locale is "${locale}", so I say "${greeting}"!`}
</NaiveIntlContext.Consumer>
),
{
export const Languages = () => (
<NaiveIntlContext.Consumer>
{({ locale, greeting }) => `Your locale is "${locale}", so I say "${greeting}"!`}
</NaiveIntlContext.Consumer>
);
Languages.story = {
parameters: {
contexts: [
{
icon: 'globe',
@ -93,5 +97,5 @@ stories.add(
},
},
],
}
);
},
};

34
examples/official-storybook/stories/addon-cssresources.stories.js
View File

@ -1,8 +1,17 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
storiesOf('Addons|Cssresources', module)
.addParameters({
export default {
title: 'Addons|Cssresources',
};
export const primaryLargeButton = () => (
<button type="button" className="btn btn-lg btn-primary">
Primary Large Button
</button>
);
primaryLargeButton.story = {
name: 'Primary Large Button',
parameters: {
cssresources: [
{
id: `bootstrap v4.1.3`,
@ -18,15 +27,13 @@ storiesOf('Addons|Cssresources', module)
options: {
selectedPanel: 'storybook/cssresources/panel',
},
})
.add('Primary Large Button', () => (
<button type="button" className="btn btn-lg btn-primary">
Primary Large Button
</button>
));
},
};
storiesOf('Addons|Cssresources', module)
.addParameters({
export const cameraIcon = () => <i className="fa fa-camera-retro"> Camera Icon</i>;
cameraIcon.story = {
name: 'Camera Icon',
parameters: {
cssresources: [
{
id: `fontawesome`,
@ -42,6 +49,5 @@ storiesOf('Addons|Cssresources', module)
options: {
selectedPanel: 'storybook/cssresources/panel',
},
})
.add('Camera Icon', () => <i className="fa fa-camera-retro"> Camera Icon</i>);
},
};

103
examples/official-storybook/stories/addon-design-assets.stories.js
View File

@ -1,33 +1,66 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
storiesOf('Addons|Design assets', module)
.addParameters({
export default {
title: 'Addons|Design assets',
parameters: {
options: {
selectedPanel: 'storybook/design-assets/panel',
},
})
.add('single image', () => <div>This story should a single image in the assets panel</div>, {
assets: ['https://via.placeholder.com/300/09f/fff.png'],
})
.add('single webpage', () => <div>This story should a single image in the assets panel</div>, {
assets: ['https://www.example.com'],
})
.add('youtube video', () => <div>This story should a single image in the assets panel</div>, {
assets: ['https://www.youtube.com/embed/p-LFh5Y89eM'],
})
},
};
.add(
'multiple images',
() => <div>This story should a multiple images in the assets panel</div>,
{
assets: [
'https://via.placeholder.com/600/09f/fff.png',
'https://via.placeholder.com/600/f90/fff.png',
],
}
)
.add('named assets', () => <div>This story should a single image in the assets panel</div>, {
export const singleImage = () => <div>This story should a single image in the assets panel</div>;
singleImage.story = {
name: 'single image',
parameters: {
assets: ['https://via.placeholder.com/300/09f/fff.png'],
},
};
export const singleWebpage = () => <div>This story should a single image in the assets panel</div>;
singleWebpage.story = {
name: 'single webpage',
parameters: {
assets: ['https://www.example.com'],
},
};
export const youtubeVideo = () => <div>This story should a single image in the assets panel</div>;
youtubeVideo.story = {
name: 'youtube video',
parameters: {
assets: ['https://www.youtube.com/embed/p-LFh5Y89eM'],
},
};
export const multipleImages = () => (
<div>This story should a multiple images in the assets panel</div>
);
multipleImages.story = {
name: 'multiple images',
parameters: {
assets: [
'https://via.placeholder.com/600/09f/fff.png',
'https://via.placeholder.com/600/f90/fff.png',
],
},
};
export const namedAssets = () => <div>This story should a single image in the assets panel</div>;
namedAssets.story = {
name: 'named assets',
parameters: {
assets: [
{
name: 'blue',
@ -38,11 +71,17 @@ storiesOf('Addons|Design assets', module)
url: 'https://via.placeholder.com/300/f90/fff.png',
},
],
})
.add(
'url replacement',
() => <div>This story should have a webpge, with within it's url the storyId</div>,
{
assets: ['https://via.placeholder.com/600.png?text={id}'],
}
);
},
};
export const urlReplacement = () => (
<div>This story should have a webpge, with within it's url the storyId</div>
);
urlReplacement.story = {
name: 'url replacement',
parameters: {
assets: ['https://via.placeholder.com/600.png?text={id}'],
},
};

29
examples/official-storybook/stories/addon-events.stories.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import EventEmitter from 'eventemitter3';
import { storiesOf } from '@storybook/react';
import withEvents from '@storybook/addon-events';
import Logger from './Logger';
@ -67,25 +66,17 @@ const events = [
},
];
storiesOf('Addons|Events', module)
.addParameters({
export default {
title: 'Addons|Events',
decorators: [withEvents({ emit, events })],
parameters: {
options: {
selectedPanel: 'storybook/events/panel',
},
})
.addDecorator(withEvents({ emit, events }))
.add('Logger', () => <Logger emitter={emitter} />);
},
};
const WithEvents = withEvents;
storiesOf('Addons|Events.deprecated', module)
.addParameters({
options: {
selectedPanel: 'storybook/events/panel',
},
})
.addDecorator(storyFn => (
<WithEvents emit={emit} events={events}>
{storyFn()}
</WithEvents>
))
.add('Logger', () => <Logger emitter={emitter} />);
export const logger = () => <Logger emitter={emitter} />;
logger.story = {
name: 'Logger',
};

62
examples/official-storybook/stories/addon-graphql.stories.js
View File

@ -1,43 +1,47 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
// import { setupGraphiQL } from '@storybook/addon-graphql';
// const graphiql = setupGraphiQL({
// url: 'https://graphql-pokemon.now.sh/?',
// });
export default {
title: 'Addons|GraphQL',
};
storiesOf('Addons|GraphQL', module).add('get Pickachu', () => <div>hello</div>, {
graphiql: {
query: `{
pokemon(name: "Pikachu") {
id
number
name
attacks {
special {
name
type
damage
}
}
evolutions {
export const getPickachu = () => <div>hello</div>;
getPickachu.story = {
name: 'get Pickachu',
parameters: {
graphiql: {
query: `{
pokemon(name: "Pikachu") {
id
number
name
weight {
minimum
maximum
}
attacks {
fast {
special {
name
type
damage
}
}
evolutions {
id
number
name
weight {
minimum
maximum
}
attacks {
fast {
name
type
damage
}
}
}
}
}
}`,
url: 'https://graphql-pokemon.now.sh/?',
}`,
url: 'https://graphql-pokemon.now.sh/?',
},
},
});
};

414
examples/official-storybook/stories/addon-info.stories.js
View File

@ -1,414 +0,0 @@
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 ForwardedRefButton from '../components/ForwardedRefButton';
import ForwardedRefButtonWDisplayName from '../components/ForwardedRefButtonWDisplayName';
import { NamedExportButton } from '../components/NamedExportButton';
import TableComponent from '../components/TableComponent';
import externalMdDocs from './addon-info-resources/EXAMPLE.md';
storiesOf('Addons|Info/React Docgen', module)
.addDecorator(withInfo)
.add(
'Comments from PropType declarations',
() => (
<DocgenButton
onClick={action('clicked')}
label="Docgen Button"
disabled={false}
one={{ key: 1 }}
shape={{
id: 3,
arr: [],
shape: {
shape: {
foo: 'bar',
},
},
func: () => {},
}}
arrayOf={[1, 2, 3]}
/>
),
{
info:
'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',
() => <FlowTypeButton onClick={action('clicked')} label="Flow Typed Button" />,
{
info:
'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',
() => <BaseButton onClick={action('clicked')} label="Button" />,
{
info:
'Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading',
}
)
.add(
'Comments from named export component declaration',
() => <NamedExportButton onClick={action('clicked')} label="Button" />,
{
info:
'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 = () => <button />;
~~~
classes in javascript
~~~javascript
export class FromComponent {
form = new FormControl({
searchTerm: new FromControl(''),
searchDate: new FromControl(''),
endDate: new FromControl(''),
})
}
~~~
html with special formatting
~~~html
<foo-outer property-a="value"
property-b="value"
property-c="value">
<foo-inner property-a="value"
property-b="value" />
</foo-outer>
~~~
Maybe include a [link](http://storybook.js.org) to your project as well.
`;
storiesOf('Addons|Info/Markdown', module)
.addDecorator(withInfo)
.add(
'Displays Markdown in description',
() => <BaseButton onClick={action('clicked')} label="Button" />,
{ info: markdownDescription }
)
.add(
'From internal Markdown file',
() => <BaseButton onClick={action('clicked')} label="Button" />,
{
info: `
# internal
## markdown
file
`,
}
)
.add(
'From external Markdown file',
() => <BaseButton onClick={action('clicked')} label="Button" />,
{ info: externalMdDocs }
);
const JSXDescription = (
<div>
<h2>This is a JSX info section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare massa rutrum metus
commodo, a mattis velit dignissim. Fusce vestibulum turpis sed massa egestas pharetra. Sed at
libero nulla.
</p>
<p>
<a href="https://github.com/storybookjs/react-storybook-addon-info">This is a link</a>
</p>
<p>
<img alt="350x150" src="http://placehold.it/350x150" />
</p>
</div>
);
storiesOf('Addons|Info/JSX', module)
.addDecorator(withInfo)
.add(
'Displays JSX in description',
() => <BaseButton onClick={action('clicked')} label="Button" />,
{
info: { text: JSXDescription },
}
);
storiesOf('Addons|Info/Options.inline', module)
.addDecorator(withInfo)
.add('Inlines component inside story', () => <BaseButton label="Button" />, {
info: {
text: 'Component should be inlined between description and PropType table',
inline: true, // Displays info inline vs click button to view
},
});
storiesOf('Addons|Info/Options.excludedPropTypes', module)
.addDecorator(withInfo)
.add(
'Excludes propTypes that are in the excludedPropTypes array',
() => <BaseButton label="Button" />,
{
info: {
text: 'Label propType should be excluded',
excludedPropTypes: ['label'],
},
}
);
storiesOf('Addons|Info/Options.header', module)
.addDecorator(withInfo)
.add('Shows or hides Info Addon header', () => <BaseButton label="Button" />, {
info: {
text: 'The Info Addon header should be hidden',
header: false, // Toggles display of header with component name and description
},
});
storiesOf('Addons|Info/Options.source', module)
.addDecorator(withInfo)
.add('Shows or hides Info Addon source', () => <BaseButton label="Button" />, {
info: {
text: 'The Info Addon source section should be hidden',
source: false, // Displays the source of story Component
},
});
storiesOf('Addons|Info/Options.propTables', module)
.addDecorator(withInfo)
.add('Shows additional component prop tables', () => <BaseButton label="Button" />, {
info: {
text: 'There should be a prop table added for a component not included in the story',
propTables: [FlowTypeButton],
},
});
storiesOf('Addons|Info/Options.propTablesExclude', module)
.addDecorator(withInfo)
.add(
'Exclude component from prop tables',
() => (
<div>
<BaseButton label="Button" />
<FlowTypeButton label="Flow Typed Button" />
</div>
),
{
info: {
text: 'This can exclude extraneous components from being displayed in prop tables.',
propTablesExclude: [FlowTypeButton],
},
}
);
storiesOf('Addons|Info/Options.styles', module)
.addDecorator(withInfo)
.add('Extend info styles with an object', () => <BaseButton label="Button" />, {
info: {
styles: {
button: {
base: {
background: 'purple',
},
},
header: {
h1: {
color: 'green',
},
},
},
},
})
.add('Full control over styles using a function', () => <BaseButton label="Button" />, {
info: {
styles: stylesheet => ({
...stylesheet,
header: {
...stylesheet.header,
h1: {
...stylesheet.header.h1,
color: 'red',
},
},
}),
},
});
storiesOf('Addons|Info/Options.TableComponent', module)
.addParameters({
component: TableComponent,
})
.addDecorator(withInfo)
.add('Use a custom component for the table', () => <BaseButton label="Button" />, {
info: {
TableComponent,
},
});
storiesOf('Addons|Info/Decorator', module)
.addDecorator(withInfo('Info can take options via the global or local decorator as well.'))
.add('Use Info as story decorator', () => <BaseButton label="Button" />);
const hoc = WrapComponent => ({ ...props }) => <WrapComponent {...props} />;
const Input = hoc(() => <input type="text" />);
const TextArea = hoc(({ children }) => <textarea>{children}</textarea>);
storiesOf('Addons|Info/GitHub issues', module)
.addDecorator(withInfo)
.add(
'#1814',
() => (
<div>
<Input />
<TextArea />
</div>
),
{
info: 'Allow Duplicate DisplayNames for HOC #1814',
}
);
storiesOf('Addons|Info/Parameters', module)
.addDecorator(
withInfo({
styles: {
header: {
h1: {
color: 'green',
},
},
},
})
)
.addParameters({
info: {
text:
'This text should be displayed on every story and the component should be inlined between description and PropType table',
inline: true, // Displays info inline vs click button to view
},
})
.add('Using paramaters across all stories', () => <BaseButton label="Button" />)
.add(
'Overwriting and extending the parameters and options set stories-wise',
() => <BaseButton label="Button" />,
{
info: {
text: 'Label propType should be excluded',
excludedPropTypes: ['label'],
},
}
)
.add(
'Overwrite the parameters with markdown variable',
() => <BaseButton onClick={action('clicked')} label="Button" />,
{ info: markdownDescription }
)
.add(
'Overwrite the text parameter with markdown inline',
() => <BaseButton onClick={action('clicked')} label="Button" />,
{
info: {
text: `
description or documentation about my component, supports markdown
~~~js
<Button>Click Here</Button>
~~~
`,
},
}
)
.add(
'Disable the addon entirely',
() => <BaseButton onClick={action('clicked')} label="Button" />,
{ info: { disable: true } }
);
storiesOf('Addons|Info/ForwardRef', module)
.addDecorator(withInfo)
.add('Displays forwarded ref components correctly', () => (
<ForwardedRefButton label="Forwarded Ref Button" />
))
.add('Uses forwardRef displayName if available', () => (
<ForwardedRefButtonWDisplayName label="Forwarded Ref Button w/ Display Name" />
));
storiesOf('Addons|Info/deprecated', module).add(
'Displays Markdown in description',
withInfo(markdownDescription)(() => <BaseButton onClick={action('clicked')} label="Button" />)
);
storiesOf('Addons|Info/Story Source', module)
.addDecorator(withInfo)
.add('One prop', () => <BaseButton label="Button" />)
.add('Many props', () => <BaseButton label="Button" onClick={action('clicked')} disabled />)
.add('Children', () => (
<div>
<p>Here is my nice button:</p>
<BaseButton label="Button" onClick={action('clicked')} />
</div>
))
.add('Array prop', () => {
const propDefs = [
{
property: 'label',
propType: { name: 'string' },
required: true,
description: 'Text to display inside button',
},
{
property: 'disabled',
propType: { name: 'boolean' },
required: false,
defaultValue: false,
},
{
property: 'onClick',
propType: { name: 'function' },
description: 'Callback for when button is clicked',
required: true,
defaultValue: () => {},
},
{
property: 'style',
propType: { name: 'object' },
description: 'Styles to apply to button',
required: false,
defaultValue: {},
},
];
return <TableComponent propDefinitions={propDefs} />;
})
.add('Object prop', () => (
<BaseButton
label="Button"
style={{
color: 'midnightblue',
backgroundColor: 'powderblue',
fontSize: '16px',
boxShadow: '1px 1px rgba(0, 0, 0, .07)',
borderRadius: '5px',
padding: '4px 8px',
}}
/>
));

0
examples/official-storybook/stories/addon-info-resources/EXAMPLE.md → examples/official-storybook/stories/addon-info/EXAMPLE.md
View File

11
examples/official-storybook/stories/addon-info/decorators.stories.js Normal file
View File

@ -0,0 +1,11 @@
import React from 'react';
import { withInfo } from '@storybook/addon-info';
import BaseButton from '../../components/BaseButton';
export default {
title: 'Addons|Info/Decorator',
decorators: [withInfo('Info can take options via the global or local decorator as well.')],
};
export const useInfo = () => <BaseButton label="Button" />;
useInfo.story = { name: 'Use Info as story decorator' };

17
examples/official-storybook/stories/addon-info/forward-ref.stories.js Normal file
View File

@ -0,0 +1,17 @@
import React from 'react';
import { withInfo } from '@storybook/addon-info';
import ForwardedRefButton from '../../components/ForwardedRefButton';
import ForwardedRefButtonWDisplayName from '../../components/ForwardedRefButtonWDisplayName';
export default {
title: 'Addons|Info/ForwardRef',
decorators: [withInfo],
};
export const displaysCorrectly = () => <ForwardedRefButton label="Forwarded Ref Button" />;
displaysCorrectly.story = { name: 'Displays forwarded ref components correctly' };
export const displayName = () => (
<ForwardedRefButtonWDisplayName label="Forwarded Ref Button w/ Display Name" />
);
displayName.story = { name: 'Uses forwardRef displayName if available' };

27
examples/official-storybook/stories/addon-info/github-issues.js Normal file
View File

@ -0,0 +1,27 @@
import React from 'react';
import { withInfo } from '@storybook/addon-info';
const hoc = WrapComponent => ({ ...props }) => <WrapComponent {...props} />;
const Input = hoc(() => <input type="text" />);
const TextArea = hoc(({ children }) => <textarea>{children}</textarea>);
export default {
title: 'Addons|Info/GitHub issues',
decorators: [withInfo],
};
export const issue1814 = () => (
<div>
<Input />
<TextArea />
</div>
);
issue1814.story = {
name: '#1814',
parameters: {
info: 'Allow Duplicate DisplayNames for HOC #1814',
},
};

38
examples/official-storybook/stories/addon-info/jsx.stories.js Normal file
View File

@ -0,0 +1,38 @@
import React from 'react';
import { withInfo } from '@storybook/addon-info';
import { action } from '@storybook/addon-actions';
import BaseButton from '../../components/BaseButton';
const JSXDescription = (
<div>
<h2>This is a JSX info section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare massa rutrum metus
commodo, a mattis velit dignissim. Fusce vestibulum turpis sed massa egestas pharetra. Sed at
libero nulla.
</p>
<p>
<a href="https://github.com/storybookjs/react-storybook-addon-info">This is a link</a>
</p>
<p>
<img alt="350x150" src="http://placehold.it/350x150" />
</p>
</div>
);
export default {
title: 'Addons|Info/JSX',
decorators: [withInfo],
};
export const displaysJsxInDescription = () => (
<BaseButton onClick={action('clicked')} label="Button" />
);
displaysJsxInDescription.story = {
name: 'Displays JSX in description',
parameters: {
info: { text: JSXDescription },
},
};

82
examples/official-storybook/stories/addon-info/markdown.stories.js Normal file
View File

@ -0,0 +1,82 @@
import React from 'react';
import { withInfo } from '@storybook/addon-info';
import { action } from '@storybook/addon-actions';
import BaseButton from '../../components/BaseButton';
import externalMdDocs from './EXAMPLE.md';
export default {
title: 'Addons|Info/Markdown',
decorators: [withInfo],
excludeStories: ['markdownDescription'],
};
export const markdownDescription = `
#### You can use markdown in your withInfo description.
Sometimes you might want to manually include some \`code\` examples:
~~~js
const Button = () => <button />;
~~~
classes in javascript
~~~javascript
export class FromComponent {
form = new FormControl({
searchTerm: new FromControl(''),
searchDate: new FromControl(''),
endDate: new FromControl(''),
})
}
~~~
html with special formatting
~~~html
<foo-outer property-a="value"
property-b="value"
property-c="value">
<foo-inner property-a="value"
property-b="value" />
</foo-outer>
~~~
Maybe include a [link](http://storybook.js.org) to your project as well.
`;
export const displaysMarkdownInDescription = () => (
<BaseButton onClick={action('clicked')} label="Button" />
);
displaysMarkdownInDescription.story = {
name: 'Displays Markdown in description',
parameters: { info: markdownDescription },
};
export const fromInternalMarkdownFile = () => (
<BaseButton onClick={action('clicked')} label="Button" />
);
fromInternalMarkdownFile.story = {
name: 'From internal Markdown file',
parameters: {
info: `
# internal
## markdown
file
`,
},
};
export const fromExternalMarkdownFile = () => (
<BaseButton onClick={action('clicked')} label="Button" />
);
fromExternalMarkdownFile.story = {
name: 'From external Markdown file',
parameters: { info: externalMdDocs },
};

200
examples/official-storybook/stories/addon-info/options.stories.js Normal file
View File

@ -0,0 +1,200 @@
import React from 'react';
import { withInfo } from '@storybook/addon-info';
import { action } from '@storybook/addon-actions';
import FlowTypeButton from '../../components/FlowTypeButton';
import BaseButton from '../../components/BaseButton';
import TableComponent from '../../components/TableComponent';
import { markdownDescription } from './markdown.stories';
export default {
title: 'Addons|Info/Options',
decorators: [withInfo],
};
export const inlinesComponentInsideStory = () => <BaseButton label="Button" />;
inlinesComponentInsideStory.story = {
name: 'Inlines component inside story',
parameters: {
info: {
text: 'Component should be inlined between description and PropType table',
inline: true, // Displays info inline vs click button to view
},
},
};
export const excludesPropTypesThatAreInTheExcludedPropTypesArray = () => (
<BaseButton label="Button" />
);
excludesPropTypesThatAreInTheExcludedPropTypesArray.story = {
name: 'Excludes propTypes that are in the excludedPropTypes array',
parameters: {
info: {
text: 'Label propType should be excluded',
excludedPropTypes: ['label'],
},
},
};
export const showsOrHidesInfoAddonHeader = () => <BaseButton label="Button" />;
showsOrHidesInfoAddonHeader.story = {
name: 'Shows or hides Info Addon header',
parameters: {
info: {
text: 'The Info Addon header should be hidden',
header: false, // Toggles display of header with component name and description
},
},
};
export const showsOrHidesInfoAddonSource = () => <BaseButton label="Button" />;
showsOrHidesInfoAddonSource.story = {
name: 'Shows or hides Info Addon source',
parameters: {
info: {
text: 'The Info Addon source section should be hidden',
source: false, // Displays the source of story Component
},
},
};
export const showsAdditionalComponentPropTables = () => <BaseButton label="Button" />;
showsAdditionalComponentPropTables.story = {
name: 'Shows additional component prop tables',
parameters: {
info: {
text: 'There should be a prop table added for a component not included in the story',
propTables: [FlowTypeButton],
},
},
};
export const excludeComponentFromPropTables = () => (
<div>
<BaseButton label="Button" />
<FlowTypeButton label="Flow Typed Button" />
</div>
);
excludeComponentFromPropTables.story = {
name: 'Exclude component from prop tables',
parameters: {
info: {
text: 'This can exclude extraneous components from being displayed in prop tables.',
propTablesExclude: [FlowTypeButton],
},
},
};
export const extendInfoStylesWithAnObject = () => <BaseButton label="Button" />;
extendInfoStylesWithAnObject.story = {
name: 'Extend info styles with an object',
parameters: {
info: {
styles: {
button: {
base: {
background: 'purple',
},
},
header: {
h1: {
color: 'green',
},
},
},
},
},
};
export const fullControlOverStylesUsingAFunction = () => <BaseButton label="Button" />;
fullControlOverStylesUsingAFunction.story = {
name: 'Full control over styles using a function',
parameters: {
info: {
styles: stylesheet => ({
...stylesheet,
header: {
...stylesheet.header,
h1: {
...stylesheet.header.h1,
color: 'red',
},
},
}),
},
},
};
export const useACustomComponentForTheTable = () => <BaseButton label="Button" />;
useACustomComponentForTheTable.story = {
name: 'Use a custom component for the table',
parameters: {
component: TableComponent,
info: {
TableComponent,
},
},
};
export const useInfoAsStoryDecorator = () => <BaseButton label="Button" />;
useInfoAsStoryDecorator.story = {
name: 'Use Info as story decorator',
parameters: {
decorators: [withInfo('Info can take options via the global or local decorator as well.')],
},
};
export const usingParamatersAcrossAllStories = () => <BaseButton label="Button" />;
usingParamatersAcrossAllStories.story = {
name: 'Using paramaters across all stories',
};
export const overwritingAndExtendingTheParametersAndOptionsSetStoriesWise = () => (
<BaseButton label="Button" />
);
overwritingAndExtendingTheParametersAndOptionsSetStoriesWise.story = {
name: 'Overwriting and extending the parameters and options set stories-wise',
parameters: {
info: {
text: 'Label propType should be excluded',
excludedPropTypes: ['label'],
},
},
};
export const overwriteTheParametersWithMarkdownVariable = () => (
<BaseButton onClick={action('clicked')} label="Button" />
);
overwriteTheParametersWithMarkdownVariable.story = {
name: 'Overwrite the parameters with markdown variable',
parameters: { info: markdownDescription },
};
export const overwriteTheTextParameterWithMarkdownInline = () => (
<BaseButton onClick={action('clicked')} label="Button" />
);
overwriteTheTextParameterWithMarkdownInline.story = {
name: 'Overwrite the text parameter with markdown inline',
parameters: {
info: {
text: `
description or documentation about my component, supports markdown
~~~js
<Button>Click Here</Button>
~~~
`,
},
},
};
export const disableTheAddonEntirely = () => (
<BaseButton onClick={action('clicked')} label="Button" />
);
disableTheAddonEntirely.story = {
name: 'Disable the addon entirely',
parameters: { info: { disable: true } },
};

80
examples/official-storybook/stories/addon-info/parameters.stories.js Normal file
View File

@ -0,0 +1,80 @@
import React from 'react';
import { withInfo } from '@storybook/addon-info';
import { action } from '@storybook/addon-actions';
import BaseButton from '../../components/BaseButton';
import { markdownDescription } from './markdown.stories';
export default {
title: 'Addons|Info/Parameters',
decorators: [
withInfo({
styles: {
header: {
h1: {
color: 'green',
},
},
},
}),
],
parameters: {
info: {
text:
'This text should be displayed on every story and the component should be inlined between description and PropType table',
inline: true, // Displays info inline vs click button to view
},
},
};
export const usingParamatersAcrossAllStories = () => <BaseButton label="Button" />;
usingParamatersAcrossAllStories.story = {
name: 'Using paramaters across all stories',
};
export const overwritingAndExtendingTheParametersAndOptionsSetStoriesWise = () => (
<BaseButton label="Button" />
);
overwritingAndExtendingTheParametersAndOptionsSetStoriesWise.story = {
name: 'Overwriting and extending the parameters and options set stories-wise',
parameters: {
info: {
text: 'Label propType should be excluded',
excludedPropTypes: ['label'],
},
},
};
export const overwriteTheParametersWithMarkdownVariable = () => (
<BaseButton onClick={action('clicked')} label="Button" />
);
overwriteTheParametersWithMarkdownVariable.story = {
name: 'Overwrite the parameters with markdown variable',
parameters: { info: markdownDescription },
};
export const overwriteTheTextParameterWithMarkdownInline = () => (
<BaseButton onClick={action('clicked')} label="Button" />
);
overwriteTheTextParameterWithMarkdownInline.story = {
name: 'Overwrite the text parameter with markdown inline',
parameters: {
info: {
text: `
description or documentation about my component, supports markdown
~~~js
<Button>Click Here</Button>
~~~
`,
},
},
};
export const disableTheAddonEntirely = () => (
<BaseButton onClick={action('clicked')} label="Button" />
);
disableTheAddonEntirely.story = {
name: 'Disable the addon entirely',
parameters: { info: { disable: true } },
};

117
examples/official-storybook/stories/addon-info/react-docgen.stories.js Normal file
View File

@ -0,0 +1,117 @@
import React from '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 { NamedExportButton } from '../../components/NamedExportButton';
export default {
title: 'Addons|Info/React Docgen',
decorators: [withInfo],
};
export const commentsFromPropTypeDeclarations = () => (
<DocgenButton
onClick={action('clicked')}
label="Docgen Button"
disabled={false}
one={{ key: 1 }}
shape={{
id: 3,
arr: [],
shape: {
shape: {
foo: 'bar',
},
},
func: () => {},
}}
arrayOf={[1, 2, 3]}
/>
);
commentsFromPropTypeDeclarations.story = {
name: 'Comments from PropType declarations',
parameters: {
info:
'Comments above the PropType declarations should be extracted from the React component file itself and rendered in the Info Addon prop table',
},
};
export const commentsFromFlowDeclarations = () => (
<FlowTypeButton onClick={action('clicked')} label="Flow Typed Button" />
);
commentsFromFlowDeclarations.story = {
name: 'Comments from Flow declarations',
parameters: {
info:
'Comments above the Flow declarations should be extracted from the React component file itself and rendered in the Info Addon prop table',
},
};
export const commentsFromComponentDeclaration = () => (
<BaseButton onClick={action('clicked')} label="Button" />
);
commentsFromComponentDeclaration.story = {
name: 'Comments from component declaration',
parameters: {
info:
'Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading',
},
};
export const commentsFromNamedExportComponentDeclaration = () => (
<NamedExportButton onClick={action('clicked')} label="Button" />
);
commentsFromNamedExportComponentDeclaration.story = {
name: 'Comments from named export component declaration',
parameters: {
info:
'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 = () => <button />;
~~~
classes in javascript
~~~javascript
export class FromComponent {
form = new FormControl({
searchTerm: new FromControl(''),
searchDate: new FromControl(''),
endDate: new FromControl(''),
})
}
~~~
html with special formatting
~~~html
<foo-outer property-a="value"
property-b="value"
property-c="value">
<foo-inner property-a="value"
property-b="value" />
</foo-outer>
~~~
Maybe include a [link](http://storybook.js.org) to your project as well.
`;

73
examples/official-storybook/stories/addon-info/story-source.stories.js Normal file
View File

@ -0,0 +1,73 @@
import React from 'react';
import { withInfo } from '@storybook/addon-info';
import { action } from '@storybook/addon-actions';
import BaseButton from '../../components/BaseButton';
import TableComponent from '../../components/TableComponent';
export default {
title: 'Addons|Info/Story Source',
decorators: [withInfo],
};
export const oneProp = () => <BaseButton label="Button" />;
oneProp.story = { name: 'One prop' };
export const manyProps = () => <BaseButton label="Button" onClick={action('clicked')} disabled />;
manyProps.story = { name: 'Many props' };
export const children = () => (
<div>
<p>Here is my nice button:</p>
<BaseButton label="Button" onClick={action('clicked')} />
</div>
);
children.story = { name: 'Children' };
export const arrayProp = () => {
const propDefs = [
{
property: 'label',
propType: { name: 'string' },
required: true,
description: 'Text to display inside button',
},
{
property: 'disabled',
propType: { name: 'boolean' },
required: false,
defaultValue: false,
},
{
property: 'onClick',
propType: { name: 'function' },
description: 'Callback for when button is clicked',
required: true,
defaultValue: () => {},
},
{
property: 'style',
propType: { name: 'object' },
description: 'Styles to apply to button',
required: false,
defaultValue: {},
},
];
return <TableComponent propDefinitions={propDefs} />;
};
arrayProp.story = { name: 'Array prop' };
export const objectProp = () => (
<BaseButton
label="Button"
style={{
color: 'midnightblue',
backgroundColor: 'powderblue',
fontSize: '16px',
boxShadow: '1px 1px rgba(0, 0, 0, .07)',
borderRadius: '5px',
padding: '4px 8px',
}}
/>
);
objectProp.story = { name: 'Object prop' };

15
examples/official-storybook/stories/addon-jest.stories.js
View File

@ -1,9 +1,14 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withTests } from '@storybook/addon-jest';
import { withTests as withTestsHOC } from '@storybook/addon-jest';
import results from './addon-jest.testresults.json';
storiesOf('Addons|Jest', module)
.addDecorator(withTests({ results }))
.add('withTests', () => <p>Hello</p>, { jest: 'addon-jest' });
export default {
title: 'Addons|Jest',
decorators: [withTestsHOC({ results })],
};
export const withTests = () => <p>Hello</p>;
withTests.story = {
parameters: { jest: 'addon-jest' },
};

330
examples/official-storybook/stories/addon-knobs.stories.js
View File

@ -1,330 +0,0 @@
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { storiesOf } from '@storybook/react';
import {
withKnobs,
text,
number,
boolean,
color,
select,
radios,
array,
date,
button,
object,
files,
optionsKnob as options,
} from '@storybook/addon-knobs';
const ItemLoader = ({ isLoading, items }) => {
if (isLoading) {
return <p>Loading data</p>;
}
if (!items.length) {
return <p>No items loaded</p>;
}
return (
<ul>
{items.map(i => (
<li key={i}>{i}</li>
))}
</ul>
);
};
ItemLoader.propTypes = {
isLoading: PropTypes.bool.isRequired,
items: PropTypes.arrayOf(PropTypes.string).isRequired,
};
let injectedItems = [];
let injectedIsLoading = false;
storiesOf('Addons|Knobs.withKnobs', module)
.addParameters({
component: withKnobs,
})
.addDecorator(withKnobs)
.add('tweaks static values', () => {
const name = text('Name', 'Storyteller');
const age = number('Age', 70, { range: true, min: 0, max: 90, step: 5 });
const fruits = {
Apple: 'apple',
Banana: 'banana',
Cherry: 'cherry',
};
const fruit = select('Fruit', fruits, 'apple');
const otherFruits = {
Kiwi: 'kiwi',
Guava: 'guava',
Watermelon: 'watermelon',
};
const otherFruit = radios('Other Fruit', otherFruits, 'watermelon');
const dollars = number('Dollars', 12.5, { min: 0, max: 100, step: 0.01 });
const years = number('Years in NY', 9);
const backgroundColor = color('background', '#dedede');
const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
const otherStyles = object('Styles', {
border: '2px dashed silver',
borderRadius: 10,
padding: '10px',
});
const nice = boolean('Nice', true);
const images = files('Happy Picture', 'image/*', [
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiARwMCyEWcOFPAAAAP0lEQVQoz8WQMQoAIAwDL/7/z3GwghSp4KDZyiUpBMCYUgd8rehtH16/l3XewgU2KAzapjXBbNFaPS6lDMlKB6OiDv3iAH1OAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTAxLTI4VDEyOjExOjMzLTA3OjAwlAHQBgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0wMS0yOFQxMjoxMTozMy0wNzowMOVcaLoAAAAASUVORK5CYII=',
]);
// NOTE: the default value must not change - e.g., do not do date('Label', new Date()) or date('Label')
const defaultBirthday = new Date('Jan 20 2017 GMT+0');
const birthday = date('Birthday', defaultBirthday);
const intro = `My name is ${name}, I'm ${age} years old, and my favorite fruit is ${fruit}. I also enjoy ${otherFruit}.`;
const style = { backgroundColor, ...otherStyles };
const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
return (
<div style={style}>
<p>{intro}</p>
<p>My birthday is: {new Date(birthday).toLocaleDateString('en-US', dateOptions)}</p>
<p>I live in NY for {years} years.</p>
<p>My wallet contains: ${dollars.toFixed(2)}</p>
<p>In my backpack, I have:</p>
<ul>
{items.map(item => (
<li key={item}>{item}</li>
))}
</ul>
<p>{salutation}</p>
<p>
When I am happy I look like this: <img src={images[0]} alt="happy" />
</p>
</div>
);
})
.add('tweaks static values organized in groups', () => {
const GROUP_IDS = {
DISPLAY: 'Display',
GENERAL: 'General',
FAVORITES: 'Favorites',
};
const fruits = {
Apple: 'apple',
Banana: 'banana',
Cherry: 'cherry',
};
const otherFruits = {
Kiwi: 'kiwi',
Guava: 'guava',
Watermelon: 'watermelon',
};
// NOTE: the default value must not change - e.g., do not do date('Label', new Date()) or date('Label')
const defaultBirthday = new Date('Jan 20 2017 GMT+0');
// Ungrouped
const ungrouped = text('Ungrouped', 'Mumble');
// General
const name = text('Name', 'Storyteller', GROUP_IDS.GENERAL);
const age = number('Age', 70, { range: true, min: 0, max: 90, step: 5 }, GROUP_IDS.GENERAL);
const birthday = date('Birthday', defaultBirthday, GROUP_IDS.GENERAL);
const dollars = number(
'Account Balance',
12.5,
{ min: 0, max: 100, step: 0.01 },
GROUP_IDS.GENERAL
);
const years = number('Years in NY', 9, {}, GROUP_IDS.GENERAL);
// Favorites
const nice = boolean('Nice', true, GROUP_IDS.FAVORITES);
const fruit = select('Fruit', fruits, 'apple', GROUP_IDS.FAVORITES);
const otherFruit = radios('Other Fruit', otherFruits, 'watermelon', GROUP_IDS.FAVORITES);
const items = array('Items', ['Laptop', 'Book', 'Whiskey'], ',', GROUP_IDS.FAVORITES);
// Display
const backgroundColor = color('Color', 'rgba(126, 211, 33, 0.22)', GROUP_IDS.DISPLAY);
const otherStyles = object(
'Styles',
{
border: '2px dashed silver',
borderRadius: 10,
padding: '10px',
},
GROUP_IDS.DISPLAY
);
const style = { backgroundColor, ...otherStyles };
const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
return (
<div style={style}>
<h1>General Information</h1>
<p>Name: {name}</p>
<p>Age: {age}</p>
<p>Birthday: {new Date(birthday).toLocaleDateString('en-US', dateOptions)}</p>
<p>Account Balance: {dollars}</p>
<p>Years in NY: {years}</p>
<hr />
<h1>Favorites</h1>
<p>Catchphrase: {salutation}</p>
<p>Fruit: {fruit}</p>
<p>Other Fruit: {otherFruit}</p>
<p>Items:</p>
<ul>
{items.map(item => (
<li key={`${item}`}>{item}</li>
))}
</ul>
<p>When I'm by myself, I say: "{ungrouped}"</p>
</div>
);
})
.add('dynamic knobs', () => {
const showOptional = select('Show optional', ['yes', 'no'], 'yes');
return (
<Fragment>
<div>{text('compulsory', 'I must be here')}</div>
{showOptional === 'yes' ? <div>{text('optional', 'I can disappear')}</div> : null}
</Fragment>
);
})
.add('complex select', () => {
const m = select(
'complex',
{
number: 1,
string: 'string',
object: {},
array: [1, 2, 3],
function: () => {},
},
'string'
);
const value = m.toString();
const type = Array.isArray(m) ? 'array' : typeof m;
return (
<pre>
the type of {JSON.stringify(value, null, 2)} = {type}
</pre>
);
})
.add('optionsKnob', () => {
const valuesRadio = {
Monday: 'Monday',
Tuesday: 'Tuesday',
Wednesday: 'Wednesday',
};
const optionRadio = options('Radio', valuesRadio, 'Tuesday', { display: 'radio' });
const valuesInlineRadio = {
Saturday: 'Saturday',
Sunday: 'Sunday',
};
const optionInlineRadio = options('Inline Radio', valuesInlineRadio, 'Saturday', {
display: 'inline-radio',
});
const valuesSelect = {
January: 'January',
February: 'February',
March: 'March',
};
const optionSelect = options('Select', valuesSelect, 'January', { display: 'select' });
const valuesMultiSelect = {
Apple: 'apple',
Banana: 'banana',
Cherry: 'cherry',
};
const optionsMultiSelect = options('Multi Select', valuesMultiSelect, ['apple'], {
display: 'multi-select',
});
const valuesCheck = {
Corn: 'corn',
Carrot: 'carrot',
Cucumber: 'cucumber',
};
const optionsCheck = options('Check', valuesCheck, ['carrot'], { display: 'check' });
const valuesInlineCheck = {
Milk: 'milk',
Cheese: 'cheese',
Butter: 'butter',
};
const optionsInlineCheck = options('Inline Check', valuesInlineCheck, ['milk'], {
display: 'inline-check',
});
return (
<div>
<p>Weekday: {optionRadio}</p>
<p>Weekend: {optionInlineRadio}</p>
<p>Month: {optionSelect}</p>
<p>Fruit:</p>
<ul>
{optionsMultiSelect.map(item => (
<li key={item}>{item}</li>
))}
</ul>
<p>Vegetables:</p>
<ul>
{optionsCheck.map(item => (
<li key={item}>{item}</li>
))}
</ul>
<p>Dairy:</p>
<ul>
{optionsInlineCheck.map(item => (
<li key={item}>{item}</li>
))}
</ul>
</div>
);
})
.add('triggers actions via button', () => {
button('Toggle item list state', () => {
if (!injectedIsLoading && injectedItems.length === 0) {
injectedIsLoading = true;
} else if (injectedIsLoading && injectedItems.length === 0) {
injectedIsLoading = false;
injectedItems = ['pencil', 'pen', 'eraser'];
} else if (injectedItems.length > 0) {
injectedItems = [];
}
});
return (
<Fragment>
<p>Hit the knob button and it will toggle the items list into multiple states.</p>
<ItemLoader isLoading={injectedIsLoading} items={injectedItems} />
</Fragment>
);
})
.add('XSS safety', () => (
<div
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{
__html: text('Rendered string', '<img src="x" onerror="alert(\'XSS Attack\')" >'),
}}
/>
))
.add('accepts story parameters', () => <div>{text('Rendered string', '<h1>Hello</h1>')}</div>, {
knobs: { escapeHTML: false },
});
storiesOf('Addons|Knobs.withKnobs using options', module)
.addDecorator(
withKnobs({
escapeHTML: false,
})
)
.add('accepts options', () => <div>{text('Rendered string', '<h1>Hello</h1>')}</div>);

16
examples/official-storybook/stories/addon-knobs/with-knobs-options.stories.js Normal file
View File

@ -0,0 +1,16 @@
import React from 'react';
import { withKnobs, text } from '@storybook/addon-knobs';
export default {
title: 'Addons|Knobs.withKnobs using options',
decorators: [
withKnobs({
escapeHTML: false,
}),
],
};
export const acceptsOptions = () => <div>{text('Rendered string', '<h1>Hello</h1>')}</div>;
acceptsOptions.story = {
name: 'accepts options',
};

355
examples/official-storybook/stories/addon-knobs/with-knobs.stories.js Normal file
View File

@ -0,0 +1,355 @@
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import {
withKnobs,
text,
number,
boolean,
color,
select,
radios,
array,
date,
button,
object,
files,
optionsKnob as options,
} from '@storybook/addon-knobs';
const ItemLoader = ({ isLoading, items }) => {
if (isLoading) {
return <p>Loading data</p>;
}
if (!items.length) {
return <p>No items loaded</p>;
}
return (
<ul>
{items.map(i => (
<li key={i}>{i}</li>
))}
</ul>
);
};
ItemLoader.propTypes = {
isLoading: PropTypes.bool.isRequired,
items: PropTypes.arrayOf(PropTypes.string).isRequired,
};
let injectedItems = [];
let injectedIsLoading = false;
export default {
title: 'Addons|Knobs.withKnobs',
decorators: [withKnobs],
parameters: {
component: withKnobs,
},
};
export const tweaksStaticValues = () => {
const name = text('Name', 'Storyteller');
const age = number('Age', 70, { range: true, min: 0, max: 90, step: 5 });
const fruits = {
Apple: 'apple',
Banana: 'banana',
Cherry: 'cherry',
};
const fruit = select('Fruit', fruits, 'apple');
const otherFruits = {
Kiwi: 'kiwi',
Guava: 'guava',
Watermelon: 'watermelon',
};
const otherFruit = radios('Other Fruit', otherFruits, 'watermelon');
const dollars = number('Dollars', 12.5, { min: 0, max: 100, step: 0.01 });
const years = number('Years in NY', 9);
const backgroundColor = color('background', '#dedede');
const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
const otherStyles = object('Styles', {
border: '2px dashed silver',
borderRadius: 10,
padding: '10px',
});
const nice = boolean('Nice', true);
const images = files('Happy Picture', 'image/*', [
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiARwMCyEWcOFPAAAAP0lEQVQoz8WQMQoAIAwDL/7/z3GwghSp4KDZyiUpBMCYUgd8rehtH16/l3XewgU2KAzapjXBbNFaPS6lDMlKB6OiDv3iAH1OAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTAxLTI4VDEyOjExOjMzLTA3OjAwlAHQBgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0wMS0yOFQxMjoxMTozMy0wNzowMOVcaLoAAAAASUVORK5CYII=',
]);
// NOTE: the default value must not change - e.g., do not do date('Label', new Date()) or date('Label')
const defaultBirthday = new Date('Jan 20 2017 GMT+0');
const birthday = date('Birthday', defaultBirthday);
const intro = `My name is ${name}, I'm ${age} years old, and my favorite fruit is ${fruit}. I also enjoy ${otherFruit}.`;
const style = { backgroundColor, ...otherStyles };
const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
return (
<div style={style}>
<p>{intro}</p>
<p>My birthday is: {new Date(birthday).toLocaleDateString('en-US', dateOptions)}</p>
<p>I live in NY for {years} years.</p>
<p>My wallet contains: ${dollars.toFixed(2)}</p>
<p>In my backpack, I have:</p>
<ul>
{items.map(item => (
<li key={item}>{item}</li>
))}
</ul>
<p>{salutation}</p>
<p>
When I am happy I look like this: <img src={images[0]} alt="happy" />
</p>
</div>
);
};
tweaksStaticValues.story = {
name: 'tweaks static values',
};
export const tweaksStaticValuesOrganizedInGroups = () => {
const GROUP_IDS = {
DISPLAY: 'Display',
GENERAL: 'General',
FAVORITES: 'Favorites',
};
const fruits = {
Apple: 'apple',
Banana: 'banana',
Cherry: 'cherry',
};
const otherFruits = {
Kiwi: 'kiwi',
Guava: 'guava',
Watermelon: 'watermelon',
};
// NOTE: the default value must not change - e.g., do not do date('Label', new Date()) or date('Label')
const defaultBirthday = new Date('Jan 20 2017 GMT+0');
// Ungrouped
const ungrouped = text('Ungrouped', 'Mumble');
// General
const name = text('Name', 'Storyteller', GROUP_IDS.GENERAL);
const age = number('Age', 70, { range: true, min: 0, max: 90, step: 5 }, GROUP_IDS.GENERAL);
const birthday = date('Birthday', defaultBirthday, GROUP_IDS.GENERAL);
const dollars = number(
'Account Balance',
12.5,
{ min: 0, max: 100, step: 0.01 },
GROUP_IDS.GENERAL
);
const years = number('Years in NY', 9, {}, GROUP_IDS.GENERAL);
// Favorites
const nice = boolean('Nice', true, GROUP_IDS.FAVORITES);
const fruit = select('Fruit', fruits, 'apple', GROUP_IDS.FAVORITES);
const otherFruit = radios('Other Fruit', otherFruits, 'watermelon', GROUP_IDS.FAVORITES);
const items = array('Items', ['Laptop', 'Book', 'Whiskey'], ',', GROUP_IDS.FAVORITES);
// Display
const backgroundColor = color('Color', 'rgba(126, 211, 33, 0.22)', GROUP_IDS.DISPLAY);
const otherStyles = object(
'Styles',
{
border: '2px dashed silver',
borderRadius: 10,
padding: '10px',
},
GROUP_IDS.DISPLAY
);
const style = { backgroundColor, ...otherStyles };
const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
return (
<div style={style}>
<h1>General Information</h1>
<p>Name: {name}</p>
<p>Age: {age}</p>
<p>Birthday: {new Date(birthday).toLocaleDateString('en-US', dateOptions)}</p>
<p>Account Balance: {dollars}</p>
<p>Years in NY: {years}</p>
<hr />
<h1>Favorites</h1>
<p>Catchphrase: {salutation}</p>
<p>Fruit: {fruit}</p>
<p>Other Fruit: {otherFruit}</p>
<p>Items:</p>
<ul>
{items.map(item => (
<li key={`${item}`}>{item}</li>
))}
</ul>
<p>When I'm by myself, I say: "{ungrouped}"</p>
</div>
);
};
tweaksStaticValuesOrganizedInGroups.story = {
name: 'tweaks static values organized in groups',
};
export const dynamicKnobs = () => {
const showOptional = select('Show optional', ['yes', 'no'], 'yes');
return (
<Fragment>
<div>{text('compulsory', 'I must be here')}</div>
{showOptional === 'yes' ? <div>{text('optional', 'I can disappear')}</div> : null}
</Fragment>
);
};
dynamicKnobs.story = {
name: 'dynamic knobs',
};
export const complexSelect = () => {
const m = select(
'complex',
{
number: 1,
string: 'string',
object: {},
array: [1, 2, 3],
function: () => {},
},
'string'
);
const value = m.toString();
const type = Array.isArray(m) ? 'array' : typeof m;
return (
<pre>
the type of {JSON.stringify(value, null, 2)} = {type}
</pre>
);
};
complexSelect.story = {
name: 'complex select',
};
export const optionsKnob = () => {
const valuesRadio = {
Monday: 'Monday',
Tuesday: 'Tuesday',
Wednesday: 'Wednesday',
};
const optionRadio = options('Radio', valuesRadio, 'Tuesday', { display: 'radio' });
const valuesInlineRadio = {
Saturday: 'Saturday',
Sunday: 'Sunday',
};
const optionInlineRadio = options('Inline Radio', valuesInlineRadio, 'Saturday', {
display: 'inline-radio',
});
const valuesSelect = {
January: 'January',
February: 'February',
March: 'March',
};
const optionSelect = options('Select', valuesSelect, 'January', { display: 'select' });
const valuesMultiSelect = {
Apple: 'apple',
Banana: 'banana',
Cherry: 'cherry',
};
const optionsMultiSelect = options('Multi Select', valuesMultiSelect, ['apple'], {
display: 'multi-select',
});
const valuesCheck = {
Corn: 'corn',
Carrot: 'carrot',
Cucumber: 'cucumber',
};
const optionsCheck = options('Check', valuesCheck, ['carrot'], { display: 'check' });
const valuesInlineCheck = {
Milk: 'milk',
Cheese: 'cheese',
Butter: 'butter',
};
const optionsInlineCheck = options('Inline Check', valuesInlineCheck, ['milk'], {
display: 'inline-check',
});
return (
<div>
<p>Weekday: {optionRadio}</p>
<p>Weekend: {optionInlineRadio}</p>
<p>Month: {optionSelect}</p>
<p>Fruit:</p>
<ul>
{optionsMultiSelect.map(item => (
<li key={item}>{item}</li>
))}
</ul>
<p>Vegetables:</p>
<ul>
{optionsCheck.map(item => (
<li key={item}>{item}</li>
))}
</ul>
<p>Dairy:</p>
<ul>
{optionsInlineCheck.map(item => (
<li key={item}>{item}</li>
))}
</ul>
</div>
);
};
export const triggersActionsViaButton = () => {
button('Toggle item list state', () => {
if (!injectedIsLoading && injectedItems.length === 0) {
injectedIsLoading = true;
} else if (injectedIsLoading && injectedItems.length === 0) {
injectedIsLoading = false;
injectedItems = ['pencil', 'pen', 'eraser'];
} else if (injectedItems.length > 0) {
injectedItems = [];
}
});
return (
<Fragment>
<p>Hit the knob button and it will toggle the items list into multiple states.</p>
<ItemLoader isLoading={injectedIsLoading} items={injectedItems} />
</Fragment>
);
};
triggersActionsViaButton.story = {
name: 'triggers actions via button',
};
export const xssSafety = () => (
<div
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{
__html: text('Rendered string', '<img src="x" onerror="alert(\'XSS Attack\')" >'),
}}
/>
);
xssSafety.story = {
name: 'XSS safety',
};
export const acceptsStoryParameters = () => <div>{text('Rendered string', '<h1>Hello</h1>')}</div>;
acceptsStoryParameters.story = {
name: 'accepts story parameters',
parameters: {
knobs: { escapeHTML: false },
},
};

59
examples/official-storybook/stories/addon-links.stories.js
View File

@ -1,59 +0,0 @@
import React, { Fragment } from 'react';
import { storiesOf } from '@storybook/react';
import { linkTo, hrefTo } from '@storybook/addon-links';
import { action } from '@storybook/addon-actions';
import LinkTo from '@storybook/addon-links/react';
storiesOf('Addons|Links.Link', module)
.add('First', () => <LinkTo story="Second">Go to Second</LinkTo>)
.add('Second', () => <LinkTo story="First">Go to First</LinkTo>);
storiesOf('Addons|Links.Button', module)
.add('First', () => (
<button type="button" onClick={linkTo('Addons|Links.Button', 'Second')}>
Go to "Second"
</button>
))
.add('Second', () => (
<button type="button" onClick={linkTo('Addons|Links.Button', 'First')}>
Go to "First"
</button>
));
storiesOf('Addons|Links.Select', module)
.add('Index', () => (
<select value="Index" onChange={linkTo('Addons|Links.Select', e => e.currentTarget.value)}>
<option>Index</option>
<option>First</option>
<option>Second</option>
<option>Third</option>
</select>
))
.add('First', () => <LinkTo story="Index">Go back</LinkTo>)
.add('Second', () => <LinkTo story="Index">Go back</LinkTo>)
.add('Third', () => <LinkTo story="Index">Go back</LinkTo>);
storiesOf('Addons|Links.Href', module).add(
'log',
() => {
hrefTo('Addons|Links.Href', 'log').then(href => action('URL of this story')(href));
return <span>See action logger</span>;
},
{
options: {
panel: 'storybook/actions/panel',
},
}
);
storiesOf('Addons|Links.Scroll position', module)
.addDecorator(storyFn => (
<Fragment>
<div style={{ marginBottom: '100vh' }}>Scroll down to see the link</div>
{storyFn()}
</Fragment>
))
.add('First', () => <LinkTo story="Second">Go to Second</LinkTo>)
.add('Second', () => <LinkTo story="First">Go to First</LinkTo>);

18
examples/official-storybook/stories/addon-links/button.stories.js Normal file
View File

@ -0,0 +1,18 @@
import React from 'react';
import { linkTo } from '@storybook/addon-links';
export default {
title: 'Addons|Links.Button',
};
export const First = () => (
<button type="button" onClick={linkTo('Addons|Links.Button', 'Second')}>
Go to "Second"
</button>
);
export const Second = () => (
<button type="button" onClick={linkTo('Addons|Links.Button', 'First')}>
Go to "First"
</button>
);

20
examples/official-storybook/stories/addon-links/href.stories.js Normal file
View File

@ -0,0 +1,20 @@
import React from 'react';
import { hrefTo } from '@storybook/addon-links';
import { action } from '@storybook/addon-actions';
export default {
title: 'Addons|Links.Href',
};
export const log = () => {
hrefTo('Addons|Links.Href', 'log').then(href => action('URL of this story')(href));
return <span>See action logger</span>;
};
log.story = {
parameters: {
options: {
panel: 'storybook/actions/panel',
},
},
};

9
examples/official-storybook/stories/addon-links/link.stories.js Normal file
View File

@ -0,0 +1,9 @@
import React from 'react';
import LinkTo from '@storybook/addon-links/react';
export default {
title: 'Addons|Links.Link',
};
export const First = () => <LinkTo story="Second">Go to Second</LinkTo>;
export const Second = () => <LinkTo story="First">Go to First</LinkTo>;

17
examples/official-storybook/stories/addon-links/scroll.stories.js Normal file
View File

@ -0,0 +1,17 @@
import React, { Fragment } from 'react';
import LinkTo from '@storybook/addon-links/react';
export default {
title: 'Addons|Links.Scroll position',
decorators: [
storyFn => (
<Fragment>
<div style={{ marginBottom: '100vh' }}>Scroll down to see the link</div>
{storyFn()}
</Fragment>
),
],
};
export const First = () => <LinkTo story="Second">Go to Second</LinkTo>;
export const Second = () => <LinkTo story="First">Go to First</LinkTo>;

20
examples/official-storybook/stories/addon-links/select.stories.js Normal file
View File

@ -0,0 +1,20 @@
import React from 'react';
import { linkTo } from '@storybook/addon-links';
import LinkTo from '@storybook/addon-links/react';
export default {
title: 'Addons|Links.Select',
};
export const Index = () => (
<select value="Index" onChange={linkTo('Addons|Links.Select', e => e.currentTarget.value)}>
<option>Index</option>
<option>First</option>
<option>Second</option>
<option>Third</option>
</select>
);
export const First = () => <LinkTo story="Index">Go back</LinkTo>;
export const Second = () => <LinkTo story="Index">Go back</LinkTo>;
export const Third = () => <LinkTo story="Index">Go back</LinkTo>;

60
examples/official-storybook/stories/addon-notes.stories.js
View File

@ -1,5 +1,4 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import BaseButton from '../components/BaseButton';
import markdownNotes from './notes/notes.md';
@ -72,20 +71,57 @@ const giphyMarkdown = `
<Giphy query="cheese" />
`;
storiesOf('Addons|Notes', module)
.add('addon notes', baseStory, {
export default {
title: 'Addons|Notes',
};
export const addonNotes = baseStory;
addonNotes.story = {
name: 'addon notes',
parameters: {
notes:
'This is the notes for a button. This is helpful for adding details about a story in a separate panel.',
})
.add('addon notes rendering imported markdown', baseStory, {
},
};
export const addonNotesRenderingImportedMarkdown = baseStory;
addonNotesRenderingImportedMarkdown.story = {
name: 'addon notes rendering imported markdown',
parameters: {
notes: { markdown: markdownNotes },
})
.add('addon notes rendering inline, github-flavored markdown', baseStory, {
},
};
export const addonNotesRenderingInlineGithubFlavoredMarkdown = baseStory;
addonNotesRenderingInlineGithubFlavoredMarkdown.story = {
name: 'addon notes rendering inline, github-flavored markdown',
parameters: {
notes: { markdown: markdownString },
})
.add('with a markdown table', baseStory, {
},
};
export const withAMarkdownTable = baseStory;
withAMarkdownTable.story = {
name: 'with a markdown table',
parameters: {
notes: { markdown: markdownTable },
})
.add('with a markdown giphy', baseStory, {
},
};
export const withAMarkdownGiphy = baseStory;
withAMarkdownGiphy.story = {
name: 'with a markdown giphy',
parameters: {
notes: { markdown: giphyMarkdown },
});
},
};

41
examples/official-storybook/stories/addon-options.stories.js
View File

@ -1,18 +1,33 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
storiesOf('Addons|Options', module)
.add('setting name', () => <div>This story should have changed the name of the storybook</div>, {
export default {
title: 'Addons|Options',
};
export const settingName = () => (
<div>This story should have changed the name of the storybook</div>
);
settingName.story = {
name: 'setting name',
parameters: {
options: {
name: 'Custom Storybook',
},
})
.add(
'hiding addon panel',
() => <div>This story should have changed hidden the addons panel</div>,
{
options: {
showPanel: false,
},
}
);
},
};
export const hidingAddonPanel = () => (
<div>This story should have changed hidden the addons panel</div>
);
hidingAddonPanel.story = {
name: 'hiding addon panel',
parameters: {
options: {
showPanel: false,
},
},
};

37
examples/official-storybook/stories/addon-queryparams.stories.js
View File

@ -1,22 +1,31 @@
import { document } from 'global';
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withQuery } from '@storybook/addon-queryparams';
// debugger;
export default {
title: 'Addons|QueryParams',
decorators: [withQuery],
storiesOf('Addons|QueryParams', module)
.addDecorator(withQuery)
.addParameters({
parameters: {
query: {
mock: true,
},
})
.add('mock is true', () => (
<div>This story should have an extra url query param: {document.location.search}</div>
))
.add(
'mock is 4',
() => <div>This story should have an extra url query param: {document.location.search}</div>,
{ query: { mock: 4 } }
);
},
};
export const mockIsTrue = () => (
<div>This story should have an extra url query param: {document.location.search}</div>
);
mockIsTrue.story = {
name: 'mock is true',
};
export const mockIs4 = () => (
<div>This story should have an extra url query param: {document.location.search}</div>
);
mockIs4.story = {
name: 'mock is 4',
parameters: { query: { mock: 4 } },
};

7
examples/official-storybook/stories/addon-storyshots.stories.js
View File

@ -1,5 +1,4 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { styled } from '@storybook/theming';
const Block = styled.div({
@ -9,4 +8,8 @@ const Block = styled.div({
background: 'hotpink',
});
storiesOf('Addons|Storyshots', module).add('block', () => <Block />);
export default {
title: 'Addons|Storyshots',
};
export const block = () => <Block />;

45
examples/official-storybook/stories/addon-viewport.stories.js
View File

@ -1,45 +0,0 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { styled } from '@storybook/theming';
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
const Panel = styled.div();
storiesOf('Addons|Viewport', module).add('default', () => (
<Panel>I don't have problems being rendered using the default viewport.</Panel>
));
storiesOf('Addons|Viewport.Custom Default (Kindle Fire 2)', module)
.addParameters({
viewport: {
viewports: {
...INITIAL_VIEWPORTS,
kindleFire2: {
name: 'Kindle Fire 2',
styles: {
width: '600px',
height: '963px',
},
},
},
},
})
.add('Inherited', () => (
<Panel>
I've inherited <b>Kindle Fire 2</b> viewport from my parent.
</Panel>
))
.add(
'Overridden via "withViewport" parameterized decorator',
() => (
<Panel>
I respect my parents but I should be looking good on <b>iPad</b>.
</Panel>
),
{ viewport: { defaultViewport: 'ipad' } }
)
.add('Disabled', () => <Panel>There should be no viewport selector in the toolbar</Panel>, {
viewport: { disable: true },
});

46
examples/official-storybook/stories/addon-viewport/custom-default.stories.js Normal file
View File

@ -0,0 +1,46 @@
import React from 'react';
import { styled } from '@storybook/theming';
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
const Panel = styled.div();
export default {
title: 'Addons|Viewport.Custom Default (Kindle Fire 2)',
parameters: {
viewport: {
viewports: {
...INITIAL_VIEWPORTS,
kindleFire2: {
name: 'Kindle Fire 2',
styles: {
width: '600px',
height: '963px',
},
},
},
},
},
};
export const Inherited = () => (
<Panel>
I've inherited <b>Kindle Fire 2</b> viewport from my parent.
</Panel>
);
export const overriddenViaWithViewportParameterizedDecorator = () => (
<Panel>
I respect my parents but I should be looking good on <b>iPad</b>.
</Panel>
);
overriddenViaWithViewportParameterizedDecorator.story = {
name: 'Overridden via "withViewport" parameterized decorator',
parameters: { viewport: { defaultViewport: 'ipad' } },
};
export const Disabled = () => <Panel>There should be no viewport selector in the toolbar</Panel>;
Disabled.story = {
parameters: {
viewport: { disable: true },
},
};

12
examples/official-storybook/stories/addon-viewport/default.stories.js Normal file
View File

@ -0,0 +1,12 @@
import React from 'react';
import { styled } from '@storybook/theming';
const Panel = styled.div();
export default {
title: 'Addons|Viewport',
};
export const defaultFn = () => (
<Panel>I don't have problems being rendered using the default viewport.</Panel>
);
defaultFn.story = { name: 'default' };

27
examples/official-storybook/stories/demo/button.stories.js Normal file
View File

@ -0,0 +1,27 @@
import React from 'react';
import { action } from '@storybook/addon-actions';
import { Button } from '@storybook/react/demo';
export default {
title: 'Other|Demo/Button',
parameters: {
component: Button,
},
};
export const withText = () => <Button onClick={action('clicked')}>Hello Button</Button>;
withText.story = {
name: 'with text',
};
export const withSomeEmoji = () => (
<Button onClick={action('clicked')}>
<span role="img" aria-label="so cool">
😀 😎 👍 💯
</span>
</Button>
);
withSomeEmoji.story = {
name: 'with some emoji',
};

15
examples/official-storybook/stories/demo/welcome.stories.js Normal file
View File

@ -0,0 +1,15 @@
import React from 'react';
import { linkTo } from '@storybook/addon-links';
import { Welcome } from '@storybook/react/demo';
export default {
title: 'Other|Demo/Welcome',
parameters: {
component: Welcome,
},
};
export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;
toStorybook.story = {
name: 'to Storybook',
};

27
examples/official-storybook/stories/deprecated/addon-actions.stories.js Normal file
View File

@ -0,0 +1,27 @@
import { window, File } from 'global';
import React, { Fragment } from 'react';
import {
action,
actions,
configureActions,
decorate,
decorateAction,
} from '@storybook/addon-actions';
import { Form } from '@storybook/components';
const { Button } = Form;
const pickNative = decorate([args => [args[0].nativeEvent]]);
const pickNativeAction = decorateAction([args => [args[0].nativeEvent]]);
export default {
title: 'Addons|Actions.deprecated',
};
export const decoratedAction = () => (
<Button onClick={pickNativeAction('decorated')}>Native Event</Button>
);
decoratedAction.story = {
name: 'Decorated Action',
};

86
examples/official-storybook/stories/deprecated/addon-events.stories.js Normal file
View File

@ -0,0 +1,86 @@
import React from 'react';
import EventEmitter from 'eventemitter3';
import WithEvents from '@storybook/addon-events';
import Logger from '../Logger';
const EVENTS = {
TEST_EVENT_1: 'test-event-1',
TEST_EVENT_2: 'test-event-2',
TEST_EVENT_3: 'test-event-3',
TEST_EVENT_4: 'test-event-4',
};
const emitter = new EventEmitter();
const emit = emitter.emit.bind(emitter);
const eventHandler = name => payload => emit(Logger.LOG_EVENT, { name, payload });
Object.keys(EVENTS).forEach(event => emitter.on(EVENTS[event], eventHandler(EVENTS[event])));
const events = [
{
name: EVENTS.TEST_EVENT_1,
title: 'Test event 1',
payload: 0,
},
{
name: EVENTS.TEST_EVENT_2,
title: 'Test event 2',
payload: 'Test event 2',
},
{
name: EVENTS.TEST_EVENT_3,
title: 'Test event 3',
payload: {
string: 'value',
number: 123,
array: [1, 2, 3],
object: {
string: 'value',
number: 123,
array: [1, 2, 3],
},
},
},
{
name: EVENTS.TEST_EVENT_4,
title: 'Test event 4',
payload: [
{
string: 'value',
number: 123,
array: [1, 2, 3],
},
{
string: 'value',
number: 123,
array: [1, 2, 3],
},
{
string: 'value',
number: 123,
array: [1, 2, 3],
},
],
},
];
export default {
title: 'Addons|Events.deprecated',
decorators: [
storyFn => (
<WithEvents emit={emit} events={events}>
{storyFn()}
</WithEvents>
),
],
parameters: {
options: {
selectedPanel: 'storybook/events/panel',
},
},
};
export const logger = () => <Logger emitter={emitter} />;
logger.story = { name: 'Logger' };

16
examples/official-storybook/stories/deprecated/addon-info.stories.js Normal file
View File

@ -0,0 +1,16 @@
import React from 'react';
import { withInfo } from '@storybook/addon-info';
import { action } from '@storybook/addon-actions';
import BaseButton from '../../components/BaseButton';
import { markdownDescription } from '../addon-info/markdown.stories';
export default {
title: 'Addons|Info/deprecated',
};
export const displaysMarkdown = withInfo(markdownDescription)(() => (
<BaseButton onClick={action('clicked')} label="Button" />
));
displaysMarkdown.story = { name: 'Displays Markdown in description' };

26
examples/official-storybook/stories/other-demo.stories.js
View File

@ -1,26 +0,0 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';
import { Button, Welcome } from '@storybook/react/demo';
storiesOf('Other|Demo/Welcome', module)
.addParameters({
component: Welcome,
})
.add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
storiesOf('Other|Demo/Button', module)
.addParameters({
component: Button,
})
.add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
.add('with some emoji', () => (
<Button onClick={action('clicked')}>
<span role="img" aria-label="so cool">
😀 😎 👍 💯
</span>
</Button>
));

16
examples/official-storybook/stories/other-dirname.stories.js
View File

@ -1,10 +1,16 @@
import React from 'react';
import base from 'paths.macro';
import { storiesOf } from '@storybook/react';
import BaseButton from '../components/BaseButton';
storiesOf(`Other|${base}/Dirname Example`, module)
.add('story 1', () => <BaseButton label="Story 1" />)
.add('story 2', () => <BaseButton label="Story 2" />);
export const story1 = () => <BaseButton label="Story 1" />;
story1.story = {
name: 'story 1',
};
export const story2 = () => <BaseButton label="Story 2" />;
story2.story = {
name: 'story 2',
};