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

Move addon-info stories to official-storybook

Browse Source
This commit is contained in:
Hypnosphi 2018-04-21 20:19:55 +03:00
parent 86a9d2a9b0
commit 2c73655020
9 changed files with 82 additions and 257 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
addons/graphql/package.json
View File

@ -17,9 +17,7 @@
"url": "https://github.com/storybooks/storybook.git"
},
"scripts": {
"deploy-storybook": "storybook-to-ghpages",
"prepare": "node ../../scripts/prepare.js",
"storybook": "start-storybook -p 9001"
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"babel-runtime": "^6.26.0",

1
addons/info/.storybook/addons.js
View File

@ -1 +0,0 @@
import '@storybook/addon-actions/register';

11
addons/info/.storybook/config.js
View File

@ -1,11 +0,0 @@
import React from 'react';
import { configure, setAddon, addDecorator } from '@storybook/react';
import InfoAddon from '../src/';
addDecorator(story => <div style={{ padding: 20 }}>{story()}</div>);
setAddon(InfoAddon);
configure(() => {
require('../example/story');
}, module);

4
addons/info/.storybook/user/modify_webpack_config.js
View File

@ -1,4 +0,0 @@
module.exports = () => {
// This is the default webpack config defined in the `../webpack.config.js`
// modify as you need.
};

28
addons/info/.storybook/webpack.config.js
View File

@ -1,28 +0,0 @@
// IMPORTANT
// ---------
// This is an auto generated file with React CDK.
// Do not modify this file.
// Use `.storybook/user/modify_webpack_config.js instead`.
const path = require('path');
const updateConfig = require('./user/modify_webpack_config');
const config = {
module: {
loaders: [
{
test: /\.css?$/,
loaders: ['style', 'raw'],
include: path.resolve(__dirname, '../'),
},
{
test: /\.json?$/,
loaders: ['json'],
include: path.resolve(__dirname, '../'),
},
],
},
};
updateConfig(config);
module.exports = config;

21
addons/info/example/Button.js
View File

@ -1,21 +0,0 @@
import PropTypes from 'prop-types';
import React from 'react';
const Button = ({ disabled, label, onClick }) => (
<button disabled={disabled} onClick={onClick}>
{label}
</button>
);
Button.propTypes = {
label: PropTypes.string.isRequired,
disabled: PropTypes.bool,
onClick: PropTypes.func,
};
Button.defaultProps = {
disabled: false,
onClick() {},
};
export default Button;

181
addons/info/example/story.js
View File

@ -1,181 +0,0 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import Button from './Button';
storiesOf('Button').addWithInfo(
'simple usage',
'This is the basic usage with the button with providing a label to show the text.',
() => (
<div>
<Button label="The Button" onClick={action('onClick')} />
<br />
<p>Click the "?" mark at top-right to view the info.</p>
</div>
)
);
storiesOf('Button').addWithInfo(
'simple usage (inline info)',
`
This is the basic usage with the button with providing a label to show the text.
`,
() => <Button label="The Button" onClick={action('onClick')} />,
{ inline: true }
);
storiesOf('Button').addWithInfo(
'simple usage (disable source)',
`
This is the basic usage with the button with providing a label to show the text.
`,
() => <Button label="The Button" onClick={action('onClick')} />,
{ source: false, inline: true }
);
storiesOf('Button').addWithInfo(
'simple usage (no header)',
`
This is the basic usage with the button with providing a label to show the text.
`,
() => <Button label="The Button" onClick={action('onClick')} />,
{ header: false, inline: true }
);
storiesOf('Button').addWithInfo(
'simple usage (no prop tables)',
`
This is the basic usage with the button with providing a label to show the text.
`,
() => <Button label="The Button" onClick={action('onClick')} />,
{ propTables: false, inline: true }
);
storiesOf('Button').addWithInfo(
'simple usage (custom propTables)',
`
This is the basic usage with the button with providing a label to show the text.
Since, the story source code is wrapped inside a div, info addon can't figure out propTypes on it's own.
So, we need to give relevant React component classes manually using \`propTypes\` option as shown below:
~~~js
storiesOf('Button')
.addWithInfo(
'simple usage (custom propTables)',
<info>,
<storyFn>,
{ inline: true, propTables: [Button]}
);
~~~
`,
() => (
<div>
<Button label="The Button" onClick={action('onClick')} />
<br />
</div>
),
{ inline: true, propTables: [Button] }
);
storiesOf('Button').addWithInfo(
'simple usage (JSX description)',
<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/storybooks/react-storybook-addon-info">This is a link</a>
</p>
<p>
<img alt="350x150" src="http://placehold.it/350x150" />
</p>
</div>,
() => (
<div>
<Button label="The Button" onClick={action('onClick')} />
<br />
<p>Click the "?" mark at top-right to view the info.</p>
</div>
)
);
storiesOf('Button').addWithInfo(
'simple usage (inline JSX description)',
<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/storybooks/react-storybook-addon-info">This is a link</a>
</p>
<p>
<img alt="350x150" src="http://placehold.it/350x150" />
</p>
</div>,
() => <Button label="The Button" onClick={action('onClick')} />,
{ inline: true }
);
storiesOf('Button').addWithInfo(
'simple usage (maxPropsInLine === 1)',
`
This is the basic usage with the button with providing a label to show the text.
`,
() => <Button label="The Button" onClick={action('onClick')} />,
{ inline: true, maxPropsIntoLine: 1 }
);
storiesOf('Button').addWithInfo(
'simple usage (maxPropObjectKeys === 5)',
`
This is the basic usage with the button with providing a label to show the text.
`,
() => <Button label="The Button" object={{ a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }} />,
{ inline: true, maxPropObjectKeys: 5 }
);
storiesOf('Button').addWithInfo(
'simple usage (maxPropArrayLength === 8)',
`
This is the basic usage with the button with providing a label to show the text.
`,
() => <Button label="The Button" array={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]} />,
{ inline: true, maxPropArrayLength: 8 }
);
storiesOf('Button').addWithInfo(
'simple usage (maxPropStringLength === 10)',
`
This is the basic usage with the button with providing a label to show the text.
`,
() => <Button label="The Button" string="1 2 3 4 5 6 7 8" />,
{ inline: true, maxPropStringLength: 5 }
);
storiesOf('Button').addWithInfo(
'with custom styles',
`
This is an example of how to customize the styles of the info components.
For the full styles available, see \`./src/components/Story.js\`
`,
() => <Button label="The Button" onClick={action('onClick')} />,
{
inline: true,
styles: stylesheet => ({
...stylesheet,
infoPage: {
backgroundColor: '#ccc',
},
}),
}
);

9
addons/info/package.json
View File

@ -10,9 +10,7 @@
"url": "https://github.com/storybooks/storybook.git"
},
"scripts": {
"prepare": "node ../../scripts/prepare.js",
"publish-storybook": "bash .scripts/publish_storybook.sh",
"storybook": "start-storybook -p 9010"
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/client-logger": "4.0.0-alpha.3",
@ -29,12 +27,9 @@
"util-deprecate": "^1.0.2"
},
"devDependencies": {
"@storybook/addon-actions": "4.0.0-alpha.3",
"@storybook/react": "4.0.0-alpha.3",
"react-test-renderer": "^16.3.2"
},
"peerDependencies": {
"react": "*",
"react-dom": "*"
"react": "*"
}
}

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

@ -51,6 +51,30 @@ storiesOf('Addons|Info.Markdown', module).add(
withInfo(markdownDescription)(() => <BaseButton onClick={action('clicked')} label="Button" />)
);
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/storybooks/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).add(
'Displays JSX in description',
withInfo({ text: JSXDescription })(() => (
<BaseButton onClick={action('clicked')} label="Button" />
))
);
storiesOf('Addons|Info.Options.inline', module).add(
'Inlines component inside story',
withInfo({
@ -159,7 +183,7 @@ storiesOf('Addons|Info.GitHub issues', module).add(
))
);
storiesOf('Addons|Info.Options.maxPropsIntoLine', module).add(
storiesOf('Addons|Info.Options.maxPropsIntoLine === 0', module).add(
'Object and array props are broken to lines',
withInfo({
text: 'Component should be inlined between description and PropType table',
@ -212,3 +236,57 @@ storiesOf('Addons|Info.Options.maxPropsIntoLine', module).add(
/>
))
);
storiesOf('Addons|Info.Options.maxPropsIntoLine === 3', module).add(
'Object and array props are broken to lines',
withInfo({
text: 'Component should be inlined between description and PropType table',
inline: true,
maxPropsIntoLine: 3,
})(() => (
<BaseButton
label="Button"
object={{
one: 'Object and array properties',
two: 'will be broken to different lines',
three: 'if greater than `maxPropsIntoLine` option threshold.',
}}
array={['one', 'two', 'three', 'four']}
arrayOfObjects={[
{
one: 'Object and array properties will be broken to different lines',
two: 'if greater than `maxPropsIntoLine` option threshold.',
object: {
object1: {
one: 'one',
two: 'two',
three: 'three',
},
array: ['one', 'two', 'three'],
object2: {
object: {
one: 'one',
two: 'two',
three: 'three',
},
array: [
'one',
'two',
{
object: {
object: {
one: 'one',
two: 'two',
three: 'three',
},
array: ['one', 'two', 'three'],
},
},
],
},
},
},
]}
/>
))
);