mirror of
https://github.com/storybookjs/storybook.git
synced 2025-03-31 05:03:21 +08:00
Fix some warnings + separate stories
This commit is contained in:
igor-dv
parent
9e29f89096
commit
be70a9ecc6
7
examples/cra-kitchen-sink/src/stories/App.stories.js
Normal file
7
examples/cra-kitchen-sink/src/stories/App.stories.js
Normal file
@ -0,0 +1,7 @@
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
// eslint-disable-next-line import/extensions,import/no-unresolved
|
||||
import App from 'App';
|
||||
|
||||
storiesOf('App', module).add('full app', () => <App />);
|
||||
@ -0,0 +1,5 @@
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import LifecycleLogger from '../components/LifecycleLogger';
|
||||
|
||||
storiesOf('Lifecycle', module).add('logging', () => <LifecycleLogger />);
|
||||
@ -0,0 +1,29 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots App full app 1`] = `
|
||||
<div
|
||||
class="App"
|
||||
>
|
||||
<div
|
||||
class="App-header"
|
||||
>
|
||||
<img
|
||||
alt="logo"
|
||||
class="App-logo"
|
||||
src="file-stub"
|
||||
/>
|
||||
<h2>
|
||||
Welcome to React
|
||||
</h2>
|
||||
</div>
|
||||
<p
|
||||
class="App-intro"
|
||||
>
|
||||
To get started, edit
|
||||
<code>
|
||||
src/App.js
|
||||
</code>
|
||||
and save to reload.
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
@ -0,0 +1,7 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Lifecycle logging 1`] = `
|
||||
<div>
|
||||
Lifecycle methods are logged to the console
|
||||
</div>
|
||||
`;
|
||||
@ -1,33 +1,5 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots App full app 1`] = `
|
||||
<div
|
||||
class="App"
|
||||
>
|
||||
<div
|
||||
class="App-header"
|
||||
>
|
||||
<img
|
||||
alt="logo"
|
||||
class="App-logo"
|
||||
src="file-stub"
|
||||
/>
|
||||
<h2>
|
||||
Welcome to React
|
||||
</h2>
|
||||
</div>
|
||||
<p
|
||||
class="App-intro"
|
||||
>
|
||||
To get started, edit
|
||||
<code>
|
||||
src/App.js
|
||||
</code>
|
||||
and save to reload.
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button addons composition 1`] = `
|
||||
.emotion-4 {
|
||||
display: -webkit-box;
|
||||
@ -168,13 +140,6 @@ exports[`Storyshots Button addons composition 1`] = `
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
style="padding-left:33px;padding-right:3px"
|
||||
>
|
||||
<span
|
||||
style="color:#444"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="padding-left:33px;padding-right:3px"
|
||||
>
|
||||
@ -445,13 +410,6 @@ exports[`Storyshots Button with new info 1`] = `
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
style="padding-left:33px;padding-right:3px"
|
||||
>
|
||||
<span
|
||||
style="color:#444"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="padding-left:33px;padding-right:3px"
|
||||
>
|
||||
@ -768,26 +726,3 @@ exports[`Storyshots Button with text 1`] = `
|
||||
Hello Button
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Lifecycle logging 1`] = `
|
||||
<div>
|
||||
Lifecycle methods are logged to the console
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Some really long story kind description with text 1`] = `
|
||||
<div
|
||||
style="position:fixed;top:0;left:0;bottom:0;right:0;display:flex;align-items:center;overflow:auto"
|
||||
>
|
||||
<div
|
||||
style="margin:auto;max-height:100%"
|
||||
>
|
||||
<button
|
||||
style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
|
||||
type="button"
|
||||
>
|
||||
Hello Button
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -0,0 +1,18 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Some really long story kind description with text 1`] = `
|
||||
<div
|
||||
style="position:fixed;top:0;left:0;bottom:0;right:0;display:flex;align-items:center;overflow:auto"
|
||||
>
|
||||
<div
|
||||
style="margin:auto;max-height:100%"
|
||||
>
|
||||
<button
|
||||
style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
|
||||
type="button"
|
||||
>
|
||||
Hello Button
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,17 +1,11 @@
|
||||
import React from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { setOptions } from '@storybook/addon-options';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { withNotes } from '@storybook/addon-notes';
|
||||
import centered from '@storybook/addon-centered';
|
||||
import { withInfo } from '@storybook/addon-info';
|
||||
import { Button } from '@storybook/react/demo';
|
||||
|
||||
// eslint-disable-next-line import/extensions,import/no-unresolved
|
||||
import App from 'App';
|
||||
import Container from './Container';
|
||||
import LifecycleLogger from '../components/LifecycleLogger';
|
||||
|
||||
const InfoButton = () => (
|
||||
<span
|
||||
@ -33,57 +27,48 @@ const InfoButton = () => (
|
||||
|
||||
storiesOf('Button', module)
|
||||
.addDecorator(withNotes)
|
||||
.add('with text', () => (
|
||||
<Button onClick={action('clicked')}>
|
||||
{setOptions({ selectedAddonPanel: 'storybook/actions/actions-panel' })}
|
||||
Hello Button
|
||||
</Button>
|
||||
))
|
||||
.add('with some emoji', () => (
|
||||
<Button onClick={action('clicked')}>
|
||||
{setOptions({ selectedAddonPanel: 'storybook/actions/actions-panel' })}
|
||||
<span role="img" aria-label="so cool">
|
||||
😀 😎 👍 💯
|
||||
</span>
|
||||
</Button>
|
||||
))
|
||||
.add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>, {
|
||||
options: { selectedAddonPanel: 'storybook/actions/actions-panel' },
|
||||
})
|
||||
.add(
|
||||
'with notes',
|
||||
'with some emoji',
|
||||
() => (
|
||||
<Button>
|
||||
{setOptions({ selectedAddonPanel: 'storybook/notes/panel' })}
|
||||
Check my notes in the notes panel
|
||||
<Button onClick={action('clicked')}>
|
||||
<span role="img" aria-label="so cool">
|
||||
😀 😎 👍 💯
|
||||
</span>
|
||||
</Button>
|
||||
),
|
||||
{ notes: 'A very simple button' }
|
||||
{
|
||||
options: { selectedAddonPanel: 'storybook/actions/actions-panel' },
|
||||
}
|
||||
)
|
||||
.add('with notes', () => <Button>Check my notes in the notes panel</Button>, {
|
||||
notes: 'A very simple button',
|
||||
options: { selectedAddonPanel: 'storybook/notes/panel' },
|
||||
})
|
||||
.add(
|
||||
'with new info',
|
||||
withInfo(
|
||||
'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its new painless API.'
|
||||
)(context => (
|
||||
<Container>
|
||||
{setOptions({ selectedAddonPanel: 'storybook/info/info-panel' })}
|
||||
click the <InfoButton /> label in top right for info about "{context.story}"
|
||||
</Container>
|
||||
))
|
||||
)),
|
||||
{
|
||||
options: { selectedAddonPanel: 'storybook/info/info-panel' },
|
||||
}
|
||||
)
|
||||
.add(
|
||||
'addons composition',
|
||||
withInfo('see Notes panel for composition info')(
|
||||
withNotes('Composition: Info(Notes())')(context => (
|
||||
<div>
|
||||
{setOptions({ selectedAddonPanel: 'storybook/notes/panel' })}
|
||||
click the <InfoButton /> label in top right for info about "{context.story}"
|
||||
</div>
|
||||
))
|
||||
)
|
||||
withInfo('see Notes panel for composition info')(context => (
|
||||
<div>
|
||||
click the <InfoButton /> label in top right for info about "{context.story}"
|
||||
</div>
|
||||
)),
|
||||
{
|
||||
notes: 'Composition: Info(Notes())',
|
||||
options: { selectedAddonPanel: 'storybook/notes/panel' },
|
||||
}
|
||||
);
|
||||
|
||||
storiesOf('App', module).add('full app', () => <App />);
|
||||
|
||||
storiesOf('Some really long story kind description', module)
|
||||
.addDecorator(centered)
|
||||
.add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>);
|
||||
|
||||
storiesOf('Lifecycle', module).add('logging', () => <LifecycleLogger />);
|
||||
|
||||
@ -0,0 +1,9 @@
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import centered from '@storybook/addon-centered';
|
||||
import { Button } from '@storybook/react/demo';
|
||||
|
||||
storiesOf('Some really long story kind description', module)
|
||||
.addDecorator(centered)
|
||||
.add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>);
|
||||
Loading…
x
Reference in New Issue
Block a user