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

Merge branch 'master' into dd/spellcheck-off

Browse Source
This commit is contained in:
Norbert de Langen 2018-10-23 15:58:59 +02:00
commit 78299c6efe
No known key found for this signature in database
GPG Key ID: 976651DA156C2825
27 changed files with 1276 additions and 576 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
addons/jest/src/components/Panel.js
View File

@ -142,7 +142,7 @@ const Content = styled(({ tests, className }) => (
}); });
const Panel = ({ tests }) => const Panel = ({ tests }) =>
tests ? <Content tests={tests} /> : <NoTests>This story has no tests configures</NoTests>; tests ? <Content tests={tests} /> : <NoTests>This story has no tests configured</NoTests>;
Panel.defaultProps = { Panel.defaultProps = {
tests: null, tests: null,

2
addons/knobs/src/components/__tests__/Select.js
View File

@ -22,7 +22,7 @@ describe('Select', () => {
const green = wrapper.find('option').first(); const green = wrapper.find('option').first();
expect(green.text()).toEqual('Green'); expect(green.text()).toEqual('Green');
expect(green.prop('value')).toEqual('#00ff00'); expect(green.prop('value')).toEqual('Green');
}); });
}); });
}); });

40
addons/knobs/src/components/types/Select.js
View File

@ -1,32 +1,32 @@
import React, { Component } from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Select } from '@storybook/components'; import { Select } from '@storybook/components';
class SelectType extends Component { const SelectType = ({ knob, onChange }) => {
renderOptionList({ options }) { const { options } = knob;
if (Array.isArray(options)) { const entries = Array.isArray(options)
return options.map(val => this.renderOption(val, val)); ? options.reduce((acc, k) => Object.assign(acc, { k }), {})
} : options;
return Object.keys(options).map(key => this.renderOption(key, options[key]));
}
renderOption(key, value) { const selectedKey = Object.keys(entries).find(k => entries[k] === knob.value);
const opts = { key, value };
return <option {...opts}>{key}</option>;
}
render() {
const { knob, onChange } = this.props;
return ( return (
<Select value={knob.value} onChange={e => onChange(e.target.value)} size="flex"> <Select
{this.renderOptionList(knob)} value={selectedKey}
onChange={e => {
onChange(entries[e.target.value]);
}}
size="flex"
>
{Object.entries(entries).map(([key]) => (
<option key={key} value={key}>
{key}
</option>
))}
</Select> </Select>
); );
} };
}
SelectType.defaultProps = { SelectType.defaultProps = {
knob: {}, knob: {},

323
addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap
View File

@ -1,25 +1,23 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Another Button with some emoji 1`] = ` exports[`Storyshots Another Button with some emoji 1`] = `
.emotion-0 {
border: 1px solid #eee;
border-radius: 3px;
background-color: #FFFFFF;
cursor: pointer;
font-size: 15px;
padding: 3px 10px;
margin: 10px;
}
<Button <Button
onClick={[Function]} onClick={[Function]}
>
<Styled(button)
onClick={[Function]}
> >
<button <button
className="emotion-0 emotion-1"
onClick={[Function]} onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
> >
<span <span
aria-label="so cool" aria-label="so cool"
@ -28,34 +26,30 @@ exports[`Storyshots Another Button with some emoji 1`] = `
😀 😎 👍 💯 😀 😎 👍 💯
</span> </span>
</button> </button>
</Styled(button)>
</Button> </Button>
`; `;
exports[`Storyshots Another Button with text 1`] = ` exports[`Storyshots Another Button with text 1`] = `
.emotion-0 {
border: 1px solid #eee;
border-radius: 3px;
background-color: #FFFFFF;
cursor: pointer;
font-size: 15px;
padding: 3px 10px;
margin: 10px;
}
<Button <Button
onClick={[Function]} onClick={[Function]}
>
<Styled(button)
onClick={[Function]}
> >
<button <button
className="emotion-0 emotion-1"
onClick={[Function]} onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
> >
Hello Button Hello Button
</button> </button>
</Styled(button)>
</Button> </Button>
`; `;
@ -66,25 +60,23 @@ exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
`; `;
exports[`Storyshots Button with some emoji 1`] = ` exports[`Storyshots Button with some emoji 1`] = `
.emotion-0 {
border: 1px solid #eee;
border-radius: 3px;
background-color: #FFFFFF;
cursor: pointer;
font-size: 15px;
padding: 3px 10px;
margin: 10px;
}
<Button <Button
onClick={[Function]} onClick={[Function]}
>
<Styled(button)
onClick={[Function]}
> >
<button <button
className="emotion-0 emotion-1"
onClick={[Function]} onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
> >
<span <span
aria-label="so cool" aria-label="so cool"
@ -93,113 +85,75 @@ exports[`Storyshots Button with some emoji 1`] = `
😀 😎 👍 💯 😀 😎 👍 💯
</span> </span>
</button> </button>
</Styled(button)>
</Button> </Button>
`; `;
exports[`Storyshots Button with text 1`] = ` exports[`Storyshots Button with text 1`] = `
.emotion-0 {
border: 1px solid #eee;
border-radius: 3px;
background-color: #FFFFFF;
cursor: pointer;
font-size: 15px;
padding: 3px 10px;
margin: 10px;
}
<Button <Button
onClick={[Function]} onClick={[Function]}
>
<Styled(button)
onClick={[Function]}
> >
<button <button
className="emotion-0 emotion-1"
onClick={[Function]} onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
> >
Hello Button Hello Button
</button> </button>
</Styled(button)>
</Button> </Button>
`; `;
exports[`Storyshots Welcome to Storybook 1`] = ` exports[`Storyshots Welcome to Storybook 1`] = `
.emotion-18 {
margin: 15px;
max-width: 600px;
line-height: 1.4;
font-family: "Helvetica Neue",Helvetica,"Segoe UI",Arial,freesans,sans-serif;
}
.emotion-2 {
font-size: 15px;
font-weight: 600;
padding: 2px 5px;
border: 1px solid #eae9e9;
border-radius: 4px;
background-color: #f3f2f2;
color: #3a3a3a;
}
.emotion-4 {
color: #1474f3;
-webkit-text-decoration: none;
text-decoration: none;
border-bottom: 1px solid #1474f3;
padding-bottom: 2px;
border-top: none;
border-right: none;
border-left: none;
background-color: transparent;
padding: 0;
cursor: pointer;
font: inherit;
}
.emotion-12 {
color: #1474f3;
-webkit-text-decoration: none;
text-decoration: none;
border-bottom: 1px solid #1474f3;
padding-bottom: 2px;
}
.emotion-16 {
opacity: 0.5;
}
<Welcome <Welcome
showApp={[Function]} showApp={[Function]}
> >
<ForwardRef> <Main>
<Styled(article)>
<article <article
className="emotion-18 emotion-19" style={
> Object {
<ForwardRef> "fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
<Styled(h1)> "lineHeight": 1.4,
<h1 "margin": 15,
className="emotion-0 emotion-1" "maxWidth": 600,
}
}
> >
<Title>
<h1>
Welcome to storybook Welcome to storybook
</h1> </h1>
</Styled(h1)> </Title>
</ForwardRef>
<p> <p>
This is a UI component dev environment for your app. This is a UI component dev environment for your app.
</p> </p>
<p> <p>
We've added some basic stories inside the We've added some basic stories inside the
<ForwardRef> <InlineCode>
<Styled(code)>
<code <code
className="emotion-2 emotion-3" style={
Object {
"backgroundColor": "#f3f2f2",
"border": "1px solid #eae9e9",
"borderRadius": 4,
"color": "#3a3a3a",
"fontSize": 15,
"fontWeight": 600,
"padding": "2px 5px",
}
}
> >
src/stories src/stories
</code> </code>
</Styled(code)> </InlineCode>
</ForwardRef>
directory. directory.
<br /> <br />
A story is a single state of one or more UI components. You can have as many stories as you want. A story is a single state of one or more UI components. You can have as many stories as you want.
@ -208,31 +162,50 @@ exports[`Storyshots Welcome to Storybook 1`] = `
</p> </p>
<p> <p>
See these sample See these sample
<ForwardRef <NavButton
onClick={[Function]}
>
<Styled(button)
onClick={[Function]} onClick={[Function]}
> >
<button <button
className="emotion-4 emotion-5"
onClick={[Function]} onClick={[Function]}
style={
Object {
"backgroundColor": "transparent",
"borderBottom": "1px solid #1474f3",
"borderLeft": "none",
"borderRight": "none",
"borderTop": "none",
"color": "#1474f3",
"cursor": "pointer",
"font": "inherit",
"padding": 0,
"paddingBottom": 2,
"textDecoration": "none",
}
}
type="button"
> >
stories stories
</button> </button>
</Styled(button)> </NavButton>
</ForwardRef>
for a component called for a component called
<ForwardRef> <InlineCode>
<Styled(code)>
<code <code
className="emotion-2 emotion-3" style={
Object {
"backgroundColor": "#f3f2f2",
"border": "1px solid #eae9e9",
"borderRadius": 4,
"color": "#3a3a3a",
"fontSize": 15,
"fontWeight": 600,
"padding": "2px 5px",
}
}
> >
Button Button
</code> </code>
</Styled(code)> </InlineCode>
</ForwardRef>
. .
</p> </p>
<p> <p>
@ -241,26 +214,42 @@ exports[`Storyshots Welcome to Storybook 1`] = `
You can also edit those components and see changes right away. You can also edit those components and see changes right away.
<br /> <br />
(Try editing the (Try editing the
<ForwardRef> <InlineCode>
<Styled(code)>
<code <code
className="emotion-2 emotion-3" style={
Object {
"backgroundColor": "#f3f2f2",
"border": "1px solid #eae9e9",
"borderRadius": 4,
"color": "#3a3a3a",
"fontSize": 15,
"fontWeight": 600,
"padding": "2px 5px",
}
}
> >
Button Button
</code> </code>
</Styled(code)> </InlineCode>
</ForwardRef>
stories located at stories located at
<ForwardRef> <InlineCode>
<Styled(code)>
<code <code
className="emotion-2 emotion-3" style={
Object {
"backgroundColor": "#f3f2f2",
"border": "1px solid #eae9e9",
"borderRadius": 4,
"color": "#3a3a3a",
"fontSize": 15,
"fontWeight": 600,
"padding": "2px 5px",
}
}
> >
src/stories/index.js src/stories/index.js
</code> </code>
</Styled(code)> </InlineCode>
</ForwardRef>
.) .)
</p> </p>
<p> <p>
@ -268,54 +257,64 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<br /> <br />
Have a look at the Have a look at the
<ForwardRef <Link
href="https://storybook.js.org/basics/writing-stories"
rel="noopener noreferrer"
target="_blank"
>
<Styled(a)
href="https://storybook.js.org/basics/writing-stories" href="https://storybook.js.org/basics/writing-stories"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<a <a
className="emotion-12 emotion-13"
href="https://storybook.js.org/basics/writing-stories" href="https://storybook.js.org/basics/writing-stories"
rel="noopener noreferrer" rel="noopener noreferrer"
style={
Object {
"borderBottom": "1px solid #1474f3",
"color": "#1474f3",
"paddingBottom": 2,
"textDecoration": "none",
}
}
target="_blank" target="_blank"
> >
Writing Stories Writing Stories
</a> </a>
</Styled(a)> </Link>
</ForwardRef>
section in our documentation. section in our documentation.
</p> </p>
<ForwardRef> <Note>
<Styled(p)>
<p <p
className="emotion-16 emotion-17" style={
Object {
"opacity": 0.5,
}
}
> >
<b> <b>
NOTE: NOTE:
</b> </b>
<br /> <br />
Have a look at the Have a look at the
<ForwardRef> <InlineCode>
<Styled(code)>
<code <code
className="emotion-2 emotion-3" style={
Object {
"backgroundColor": "#f3f2f2",
"border": "1px solid #eae9e9",
"borderRadius": 4,
"color": "#3a3a3a",
"fontSize": 15,
"fontWeight": 600,
"padding": "2px 5px",
}
}
> >
.storybook/webpack.config.js .storybook/webpack.config.js
</code> </code>
</Styled(code)> </InlineCode>
</ForwardRef>
to add webpack loaders and plugins you are using in this project. to add webpack loaders and plugins you are using in this project.
</p> </p>
</Styled(p)> </Note>
</ForwardRef>
</article> </article>
</Styled(article)> </Main>
</ForwardRef>
</Welcome> </Welcome>
`; `;

104
addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallow.test.js.snap
View File

@ -1,8 +1,20 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Another Button with some emoji 1`] = ` exports[`Storyshots Another Button with some emoji 1`] = `
<Styled(button) <button
onClick={[Function]} onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
> >
<span <span
aria-label="so cool" aria-label="so cool"
@ -10,15 +22,27 @@ exports[`Storyshots Another Button with some emoji 1`] = `
> >
😀 😎 👍 💯 😀 😎 👍 💯
</span> </span>
</Styled(button)> </button>
`; `;
exports[`Storyshots Another Button with text 1`] = ` exports[`Storyshots Another Button with text 1`] = `
<Styled(button) <button
onClick={[Function]} onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
> >
Hello Button Hello Button
</Styled(button)> </button>
`; `;
exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = ` exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
@ -28,8 +52,20 @@ exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
`; `;
exports[`Storyshots Button with some emoji 1`] = ` exports[`Storyshots Button with some emoji 1`] = `
<Styled(button) <button
onClick={[Function]} onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
> >
<span <span
aria-label="so cool" aria-label="so cool"
@ -37,30 +73,42 @@ exports[`Storyshots Button with some emoji 1`] = `
> >
😀 😎 👍 💯 😀 😎 👍 💯
</span> </span>
</Styled(button)> </button>
`; `;
exports[`Storyshots Button with text 1`] = ` exports[`Storyshots Button with text 1`] = `
<Styled(button) <button
onClick={[Function]} onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
> >
Hello Button Hello Button
</Styled(button)> </button>
`; `;
exports[`Storyshots Welcome to Storybook 1`] = ` exports[`Storyshots Welcome to Storybook 1`] = `
<ForwardRef> <Main>
<ForwardRef> <Title>
Welcome to storybook Welcome to storybook
</ForwardRef> </Title>
<p> <p>
This is a UI component dev environment for your app. This is a UI component dev environment for your app.
</p> </p>
<p> <p>
We've added some basic stories inside the We've added some basic stories inside the
<ForwardRef> <InlineCode>
src/stories src/stories
</ForwardRef> </InlineCode>
directory. directory.
<br /> <br />
A story is a single state of one or more UI components. You can have as many stories as you want. A story is a single state of one or more UI components. You can have as many stories as you want.
@ -69,16 +117,16 @@ exports[`Storyshots Welcome to Storybook 1`] = `
</p> </p>
<p> <p>
See these sample See these sample
<ForwardRef <NavButton
onClick={[Function]} onClick={[Function]}
> >
stories stories
</ForwardRef> </NavButton>
for a component called for a component called
<ForwardRef> <InlineCode>
Button Button
</ForwardRef> </InlineCode>
. .
</p> </p>
<p> <p>
@ -87,14 +135,14 @@ exports[`Storyshots Welcome to Storybook 1`] = `
You can also edit those components and see changes right away. You can also edit those components and see changes right away.
<br /> <br />
(Try editing the (Try editing the
<ForwardRef> <InlineCode>
Button Button
</ForwardRef> </InlineCode>
stories located at stories located at
<ForwardRef> <InlineCode>
src/stories/index.js src/stories/index.js
</ForwardRef> </InlineCode>
.) .)
</p> </p>
<p> <p>
@ -102,26 +150,26 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<br /> <br />
Have a look at the Have a look at the
<ForwardRef <Link
href="https://storybook.js.org/basics/writing-stories" href="https://storybook.js.org/basics/writing-stories"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
Writing Stories Writing Stories
</ForwardRef> </Link>
section in our documentation. section in our documentation.
</p> </p>
<ForwardRef> <Note>
<b> <b>
NOTE: NOTE:
</b> </b>
<br /> <br />
Have a look at the Have a look at the
<ForwardRef> <InlineCode>
.storybook/webpack.config.js .storybook/webpack.config.js
</ForwardRef> </InlineCode>
to add webpack loaders and plugins you are using in this project. to add webpack loaders and plugins you are using in this project.
</ForwardRef> </Note>
</ForwardRef> </Main>
`; `;

104
addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallowWithOptions.test.js.snap
View File

@ -1,8 +1,20 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Another Button with some emoji 1`] = ` exports[`Storyshots Another Button with some emoji 1`] = `
<Styled(button) <button
onClick={[Function]} onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
> >
<span <span
aria-label="so cool" aria-label="so cool"
@ -10,15 +22,27 @@ exports[`Storyshots Another Button with some emoji 1`] = `
> >
😀 😎 👍 💯 😀 😎 👍 💯
</span> </span>
</Styled(button)> </button>
`; `;
exports[`Storyshots Another Button with text 1`] = ` exports[`Storyshots Another Button with text 1`] = `
<Styled(button) <button
onClick={[Function]} onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
> >
Hello Button Hello Button
</Styled(button)> </button>
`; `;
exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = ` exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
@ -28,8 +52,20 @@ exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
`; `;
exports[`Storyshots Button with some emoji 1`] = ` exports[`Storyshots Button with some emoji 1`] = `
<Styled(button) <button
onClick={[Function]} onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
> >
<span <span
aria-label="so cool" aria-label="so cool"
@ -37,30 +73,42 @@ exports[`Storyshots Button with some emoji 1`] = `
> >
😀 😎 👍 💯 😀 😎 👍 💯
</span> </span>
</Styled(button)> </button>
`; `;
exports[`Storyshots Button with text 1`] = ` exports[`Storyshots Button with text 1`] = `
<Styled(button) <button
onClick={[Function]} onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
> >
Hello Button Hello Button
</Styled(button)> </button>
`; `;
exports[`Storyshots Welcome to Storybook 1`] = ` exports[`Storyshots Welcome to Storybook 1`] = `
<ForwardRef> <Main>
<ForwardRef> <Title>
Welcome to storybook Welcome to storybook
</ForwardRef> </Title>
<p> <p>
This is a UI component dev environment for your app. This is a UI component dev environment for your app.
</p> </p>
<p> <p>
We've added some basic stories inside the We've added some basic stories inside the
<ForwardRef> <InlineCode>
src/stories src/stories
</ForwardRef> </InlineCode>
directory. directory.
<br /> <br />
A story is a single state of one or more UI components. You can have as many stories as you want. A story is a single state of one or more UI components. You can have as many stories as you want.
@ -69,16 +117,16 @@ exports[`Storyshots Welcome to Storybook 1`] = `
</p> </p>
<p> <p>
See these sample See these sample
<ForwardRef <NavButton
onClick={[Function]} onClick={[Function]}
> >
stories stories
</ForwardRef> </NavButton>
for a component called for a component called
<ForwardRef> <InlineCode>
Button Button
</ForwardRef> </InlineCode>
. .
</p> </p>
<p> <p>
@ -87,14 +135,14 @@ exports[`Storyshots Welcome to Storybook 1`] = `
You can also edit those components and see changes right away. You can also edit those components and see changes right away.
<br /> <br />
(Try editing the (Try editing the
<ForwardRef> <InlineCode>
Button Button
</ForwardRef> </InlineCode>
stories located at stories located at
<ForwardRef> <InlineCode>
src/stories/index.js src/stories/index.js
</ForwardRef> </InlineCode>
.) .)
</p> </p>
<p> <p>
@ -102,26 +150,26 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<br /> <br />
Have a look at the Have a look at the
<ForwardRef <Link
href="https://storybook.js.org/basics/writing-stories" href="https://storybook.js.org/basics/writing-stories"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
Writing Stories Writing Stories
</ForwardRef> </Link>
section in our documentation. section in our documentation.
</p> </p>
<ForwardRef> <Note>
<b> <b>
NOTE: NOTE:
</b> </b>
<br /> <br />
Have a look at the Have a look at the
<ForwardRef> <InlineCode>
.storybook/webpack.config.js .storybook/webpack.config.js
</ForwardRef> </InlineCode>
to add webpack loaders and plugins you are using in this project. to add webpack loaders and plugins you are using in this project.
</ForwardRef> </Note>
</ForwardRef> </Main>
`; `;

241
addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap
View File

@ -1,19 +1,20 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Another Button with some emoji 1`] = ` exports[`Storyshots Another Button with some emoji 1`] = `
.emotion-0 {
border: 1px solid #eee;
border-radius: 3px;
background-color: #FFFFFF;
cursor: pointer;
font-size: 15px;
padding: 3px 10px;
margin: 10px;
}
<button <button
className="emotion-0 emotion-1"
onClick={[Function]} onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
> >
<span <span
aria-label="so cool" aria-label="so cool"
@ -25,19 +26,20 @@ exports[`Storyshots Another Button with some emoji 1`] = `
`; `;
exports[`Storyshots Another Button with text 1`] = ` exports[`Storyshots Another Button with text 1`] = `
.emotion-0 {
border: 1px solid #eee;
border-radius: 3px;
background-color: #FFFFFF;
cursor: pointer;
font-size: 15px;
padding: 3px 10px;
margin: 10px;
}
<button <button
className="emotion-0 emotion-1"
onClick={[Function]} onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
> >
Hello Button Hello Button
</button> </button>
@ -50,19 +52,20 @@ exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
`; `;
exports[`Storyshots Button with some emoji 1`] = ` exports[`Storyshots Button with some emoji 1`] = `
.emotion-0 {
border: 1px solid #eee;
border-radius: 3px;
background-color: #FFFFFF;
cursor: pointer;
font-size: 15px;
padding: 3px 10px;
margin: 10px;
}
<button <button
className="emotion-0 emotion-1"
onClick={[Function]} onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
> >
<span <span
aria-label="so cool" aria-label="so cool"
@ -74,75 +77,37 @@ exports[`Storyshots Button with some emoji 1`] = `
`; `;
exports[`Storyshots Button with text 1`] = ` exports[`Storyshots Button with text 1`] = `
.emotion-0 {
border: 1px solid #eee;
border-radius: 3px;
background-color: #FFFFFF;
cursor: pointer;
font-size: 15px;
padding: 3px 10px;
margin: 10px;
}
<button <button
className="emotion-0 emotion-1"
onClick={[Function]} onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
> >
Hello Button Hello Button
</button> </button>
`; `;
exports[`Storyshots Welcome to Storybook 1`] = ` exports[`Storyshots Welcome to Storybook 1`] = `
.emotion-18 {
margin: 15px;
max-width: 600px;
line-height: 1.4;
font-family: "Helvetica Neue",Helvetica,"Segoe UI",Arial,freesans,sans-serif;
}
.emotion-2 {
font-size: 15px;
font-weight: 600;
padding: 2px 5px;
border: 1px solid #eae9e9;
border-radius: 4px;
background-color: #f3f2f2;
color: #3a3a3a;
}
.emotion-4 {
color: #1474f3;
-webkit-text-decoration: none;
text-decoration: none;
border-bottom: 1px solid #1474f3;
padding-bottom: 2px;
border-top: none;
border-right: none;
border-left: none;
background-color: transparent;
padding: 0;
cursor: pointer;
font: inherit;
}
.emotion-12 {
color: #1474f3;
-webkit-text-decoration: none;
text-decoration: none;
border-bottom: 1px solid #1474f3;
padding-bottom: 2px;
}
.emotion-16 {
opacity: 0.5;
}
<article <article
className="emotion-18 emotion-19" style={
> Object {
<h1 "fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
className="emotion-0 emotion-1" "lineHeight": 1.4,
"margin": 15,
"maxWidth": 600,
}
}
> >
<h1>
Welcome to storybook Welcome to storybook
</h1> </h1>
<p> <p>
@ -151,7 +116,17 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<p> <p>
We've added some basic stories inside the We've added some basic stories inside the
<code <code
className="emotion-2 emotion-3" style={
Object {
"backgroundColor": "#f3f2f2",
"border": "1px solid #eae9e9",
"borderRadius": 4,
"color": "#3a3a3a",
"fontSize": 15,
"fontWeight": 600,
"padding": "2px 5px",
}
}
> >
src/stories src/stories
</code> </code>
@ -164,15 +139,40 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<p> <p>
See these sample See these sample
<button <button
className="emotion-4 emotion-5"
onClick={[Function]} onClick={[Function]}
style={
Object {
"backgroundColor": "transparent",
"borderBottom": "1px solid #1474f3",
"borderLeft": "none",
"borderRight": "none",
"borderTop": "none",
"color": "#1474f3",
"cursor": "pointer",
"font": "inherit",
"padding": 0,
"paddingBottom": 2,
"textDecoration": "none",
}
}
type="button"
> >
stories stories
</button> </button>
for a component called for a component called
<code <code
className="emotion-2 emotion-3" style={
Object {
"backgroundColor": "#f3f2f2",
"border": "1px solid #eae9e9",
"borderRadius": 4,
"color": "#3a3a3a",
"fontSize": 15,
"fontWeight": 600,
"padding": "2px 5px",
}
}
> >
Button Button
</code> </code>
@ -185,14 +185,34 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<br /> <br />
(Try editing the (Try editing the
<code <code
className="emotion-2 emotion-3" style={
Object {
"backgroundColor": "#f3f2f2",
"border": "1px solid #eae9e9",
"borderRadius": 4,
"color": "#3a3a3a",
"fontSize": 15,
"fontWeight": 600,
"padding": "2px 5px",
}
}
> >
Button Button
</code> </code>
stories located at stories located at
<code <code
className="emotion-2 emotion-3" style={
Object {
"backgroundColor": "#f3f2f2",
"border": "1px solid #eae9e9",
"borderRadius": 4,
"color": "#3a3a3a",
"fontSize": 15,
"fontWeight": 600,
"padding": "2px 5px",
}
}
> >
src/stories/index.js src/stories/index.js
</code> </code>
@ -204,9 +224,16 @@ exports[`Storyshots Welcome to Storybook 1`] = `
Have a look at the Have a look at the
<a <a
className="emotion-12 emotion-13"
href="https://storybook.js.org/basics/writing-stories" href="https://storybook.js.org/basics/writing-stories"
rel="noopener noreferrer" rel="noopener noreferrer"
style={
Object {
"borderBottom": "1px solid #1474f3",
"color": "#1474f3",
"paddingBottom": 2,
"textDecoration": "none",
}
}
target="_blank" target="_blank"
> >
Writing Stories Writing Stories
@ -215,7 +242,11 @@ exports[`Storyshots Welcome to Storybook 1`] = `
section in our documentation. section in our documentation.
</p> </p>
<p <p
className="emotion-16 emotion-17" style={
Object {
"opacity": 0.5,
}
}
> >
<b> <b>
NOTE: NOTE:
@ -223,7 +254,17 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<br /> <br />
Have a look at the Have a look at the
<code <code
className="emotion-2 emotion-3" style={
Object {
"backgroundColor": "#f3f2f2",
"border": "1px solid #eae9e9",
"borderRadius": 4,
"color": "#3a3a3a",
"fontSize": 15,
"fontWeight": 600,
"padding": "2px 5px",
}
}
> >
.storybook/webpack.config.js .storybook/webpack.config.js
</code> </code>

26
addons/storyshots/storyshots-core/stories/directly_required/__snapshots__/index.foo
View File

@ -2,8 +2,19 @@
exports[`Storyshots Another Button with some emoji 1`] = ` exports[`Storyshots Another Button with some emoji 1`] = `
<button <button
className="css-1qwzad5 eux70yo0"
onClick={[Function]} onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
> >
<span <span
aria-label="so cool" aria-label="so cool"
@ -16,8 +27,19 @@ exports[`Storyshots Another Button with some emoji 1`] = `
exports[`Storyshots Another Button with text 1`] = ` exports[`Storyshots Another Button with text 1`] = `
<button <button
className="css-1qwzad5 eux70yo0"
onClick={[Function]} onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
> >
Hello Button Hello Button
</button> </button>

26
addons/storyshots/storyshots-core/stories/directly_required/__snapshots__/index.storyshot
View File

@ -2,8 +2,19 @@
exports[`Storyshots Another Button with some emoji 1`] = ` exports[`Storyshots Another Button with some emoji 1`] = `
<button <button
className="css-1qwzad5 eux70yo0"
onClick={[Function]} onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
> >
<span <span
aria-label="so cool" aria-label="so cool"
@ -16,8 +27,19 @@ exports[`Storyshots Another Button with some emoji 1`] = `
exports[`Storyshots Another Button with text 1`] = ` exports[`Storyshots Another Button with text 1`] = `
<button <button
className="css-1qwzad5 eux70yo0"
onClick={[Function]} onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
> >
Hello Button Hello Button
</button> </button>

13
addons/storyshots/storyshots-core/stories/directly_required/__snapshots__/index@Another-_-Button@with-_-some-_-emoji.boo
View File

@ -2,8 +2,19 @@
exports[`Storyshots Another Button with some emoji 1`] = ` exports[`Storyshots Another Button with some emoji 1`] = `
<button <button
className="css-1qwzad5 eux70yo0"
onClick={[Function]} onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
> >
<span <span
aria-label="so cool" aria-label="so cool"

13
addons/storyshots/storyshots-core/stories/directly_required/__snapshots__/index@Another-_-Button@with-_-text.boo
View File

@ -2,8 +2,19 @@
exports[`Storyshots Another Button with text 1`] = ` exports[`Storyshots Another Button with text 1`] = `
<button <button
className="css-1qwzad5 eux70yo0"
onClick={[Function]} onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
> >
Hello Button Hello Button
</button> </button>

26
addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Button.stories.foo
View File

@ -2,8 +2,19 @@
exports[`Storyshots Button with some emoji 1`] = ` exports[`Storyshots Button with some emoji 1`] = `
<button <button
className="css-1qwzad5 eux70yo0"
onClick={[Function]} onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
> >
<span <span
aria-label="so cool" aria-label="so cool"
@ -16,8 +27,19 @@ exports[`Storyshots Button with some emoji 1`] = `
exports[`Storyshots Button with text 1`] = ` exports[`Storyshots Button with text 1`] = `
<button <button
className="css-1qwzad5 eux70yo0"
onClick={[Function]} onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
> >
Hello Button Hello Button
</button> </button>

26
addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Button.stories.storyshot
View File

@ -2,8 +2,19 @@
exports[`Storyshots Button with some emoji 1`] = ` exports[`Storyshots Button with some emoji 1`] = `
<button <button
className="css-1qwzad5 eux70yo0"
onClick={[Function]} onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
> >
<span <span
aria-label="so cool" aria-label="so cool"
@ -16,8 +27,19 @@ exports[`Storyshots Button with some emoji 1`] = `
exports[`Storyshots Button with text 1`] = ` exports[`Storyshots Button with text 1`] = `
<button <button
className="css-1qwzad5 eux70yo0"
onClick={[Function]} onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
> >
Hello Button Hello Button
</button> </button>

105
addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.foo
View File

@ -2,11 +2,16 @@
exports[`Storyshots Welcome to Storybook 1`] = ` exports[`Storyshots Welcome to Storybook 1`] = `
<article <article
className="css-3qkdq7 ensbfgf0" style={
> Object {
<h1 "fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
className="css-0 ensbfgf1" "lineHeight": 1.4,
"margin": 15,
"maxWidth": 600,
}
}
> >
<h1>
Welcome to storybook Welcome to storybook
</h1> </h1>
<p> <p>
@ -15,7 +20,17 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<p> <p>
We've added some basic stories inside the We've added some basic stories inside the
<code <code
className="css-1rxzob2 ensbfgf3" style={
Object {
"backgroundColor": "#f3f2f2",
"border": "1px solid #eae9e9",
"borderRadius": 4,
"color": "#3a3a3a",
"fontSize": 15,
"fontWeight": 600,
"padding": "2px 5px",
}
}
> >
src/stories src/stories
</code> </code>
@ -28,15 +43,40 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<p> <p>
See these sample See these sample
<button <button
className="css-1otf2jm ensbfgf5"
onClick={[Function]} onClick={[Function]}
style={
Object {
"backgroundColor": "transparent",
"borderBottom": "1px solid #1474f3",
"borderLeft": "none",
"borderRight": "none",
"borderTop": "none",
"color": "#1474f3",
"cursor": "pointer",
"font": "inherit",
"padding": 0,
"paddingBottom": 2,
"textDecoration": "none",
}
}
type="button"
> >
stories stories
</button> </button>
for a component called for a component called
<code <code
className="css-1rxzob2 ensbfgf3" style={
Object {
"backgroundColor": "#f3f2f2",
"border": "1px solid #eae9e9",
"borderRadius": 4,
"color": "#3a3a3a",
"fontSize": 15,
"fontWeight": 600,
"padding": "2px 5px",
}
}
> >
Button Button
</code> </code>
@ -49,14 +89,34 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<br /> <br />
(Try editing the (Try editing the
<code <code
className="css-1rxzob2 ensbfgf3" style={
Object {
"backgroundColor": "#f3f2f2",
"border": "1px solid #eae9e9",
"borderRadius": 4,
"color": "#3a3a3a",
"fontSize": 15,
"fontWeight": 600,
"padding": "2px 5px",
}
}
> >
Button Button
</code> </code>
stories located at stories located at
<code <code
className="css-1rxzob2 ensbfgf3" style={
Object {
"backgroundColor": "#f3f2f2",
"border": "1px solid #eae9e9",
"borderRadius": 4,
"color": "#3a3a3a",
"fontSize": 15,
"fontWeight": 600,
"padding": "2px 5px",
}
}
> >
src/stories/index.js src/stories/index.js
</code> </code>
@ -68,9 +128,16 @@ exports[`Storyshots Welcome to Storybook 1`] = `
Have a look at the Have a look at the
<a <a
className="css-4d3lbr ensbfgf4"
href="https://storybook.js.org/basics/writing-stories" href="https://storybook.js.org/basics/writing-stories"
rel="noopener noreferrer" rel="noopener noreferrer"
style={
Object {
"borderBottom": "1px solid #1474f3",
"color": "#1474f3",
"paddingBottom": 2,
"textDecoration": "none",
}
}
target="_blank" target="_blank"
> >
Writing Stories Writing Stories
@ -79,7 +146,11 @@ exports[`Storyshots Welcome to Storybook 1`] = `
section in our documentation. section in our documentation.
</p> </p>
<p <p
className="css-1tzeee1 ensbfgf2" style={
Object {
"opacity": 0.5,
}
}
> >
<b> <b>
NOTE: NOTE:
@ -87,7 +158,17 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<br /> <br />
Have a look at the Have a look at the
<code <code
className="css-1rxzob2 ensbfgf3" style={
Object {
"backgroundColor": "#f3f2f2",
"border": "1px solid #eae9e9",
"borderRadius": 4,
"color": "#3a3a3a",
"fontSize": 15,
"fontWeight": 600,
"padding": "2px 5px",
}
}
> >
.storybook/webpack.config.js .storybook/webpack.config.js
</code> </code>

105
addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.storyshot
View File

@ -2,11 +2,16 @@
exports[`Storyshots Welcome to Storybook 1`] = ` exports[`Storyshots Welcome to Storybook 1`] = `
<article <article
className="css-3qkdq7 ensbfgf0" style={
> Object {
<h1 "fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
className="css-0 ensbfgf1" "lineHeight": 1.4,
"margin": 15,
"maxWidth": 600,
}
}
> >
<h1>
Welcome to storybook Welcome to storybook
</h1> </h1>
<p> <p>
@ -15,7 +20,17 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<p> <p>
We've added some basic stories inside the We've added some basic stories inside the
<code <code
className="css-1rxzob2 ensbfgf3" style={
Object {
"backgroundColor": "#f3f2f2",
"border": "1px solid #eae9e9",
"borderRadius": 4,
"color": "#3a3a3a",
"fontSize": 15,
"fontWeight": 600,
"padding": "2px 5px",
}
}
> >
src/stories src/stories
</code> </code>
@ -28,15 +43,40 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<p> <p>
See these sample See these sample
<button <button
className="css-1otf2jm ensbfgf5"
onClick={[Function]} onClick={[Function]}
style={
Object {
"backgroundColor": "transparent",
"borderBottom": "1px solid #1474f3",
"borderLeft": "none",
"borderRight": "none",
"borderTop": "none",
"color": "#1474f3",
"cursor": "pointer",
"font": "inherit",
"padding": 0,
"paddingBottom": 2,
"textDecoration": "none",
}
}
type="button"
> >
stories stories
</button> </button>
for a component called for a component called
<code <code
className="css-1rxzob2 ensbfgf3" style={
Object {
"backgroundColor": "#f3f2f2",
"border": "1px solid #eae9e9",
"borderRadius": 4,
"color": "#3a3a3a",
"fontSize": 15,
"fontWeight": 600,
"padding": "2px 5px",
}
}
> >
Button Button
</code> </code>
@ -49,14 +89,34 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<br /> <br />
(Try editing the (Try editing the
<code <code
className="css-1rxzob2 ensbfgf3" style={
Object {
"backgroundColor": "#f3f2f2",
"border": "1px solid #eae9e9",
"borderRadius": 4,
"color": "#3a3a3a",
"fontSize": 15,
"fontWeight": 600,
"padding": "2px 5px",
}
}
> >
Button Button
</code> </code>
stories located at stories located at
<code <code
className="css-1rxzob2 ensbfgf3" style={
Object {
"backgroundColor": "#f3f2f2",
"border": "1px solid #eae9e9",
"borderRadius": 4,
"color": "#3a3a3a",
"fontSize": 15,
"fontWeight": 600,
"padding": "2px 5px",
}
}
> >
src/stories/index.js src/stories/index.js
</code> </code>
@ -68,9 +128,16 @@ exports[`Storyshots Welcome to Storybook 1`] = `
Have a look at the Have a look at the
<a <a
className="css-4d3lbr ensbfgf4"
href="https://storybook.js.org/basics/writing-stories" href="https://storybook.js.org/basics/writing-stories"
rel="noopener noreferrer" rel="noopener noreferrer"
style={
Object {
"borderBottom": "1px solid #1474f3",
"color": "#1474f3",
"paddingBottom": 2,
"textDecoration": "none",
}
}
target="_blank" target="_blank"
> >
Writing Stories Writing Stories
@ -79,7 +146,11 @@ exports[`Storyshots Welcome to Storybook 1`] = `
section in our documentation. section in our documentation.
</p> </p>
<p <p
className="css-1tzeee1 ensbfgf2" style={
Object {
"opacity": 0.5,
}
}
> >
<b> <b>
NOTE: NOTE:
@ -87,7 +158,17 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<br /> <br />
Have a look at the Have a look at the
<code <code
className="css-1rxzob2 ensbfgf3" style={
Object {
"backgroundColor": "#f3f2f2",
"border": "1px solid #eae9e9",
"borderRadius": 4,
"color": "#3a3a3a",
"fontSize": 15,
"fontWeight": 600,
"padding": "2px 5px",
}
}
> >
.storybook/webpack.config.js .storybook/webpack.config.js
</code> </code>

15
app/react/src/demo/Button.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled from '@emotion/styled';
const Button = styled.button({ const styles = {
border: '1px solid #eee', border: '1px solid #eee',
borderRadius: 3, borderRadius: 3,
backgroundColor: '#FFFFFF', backgroundColor: '#FFFFFF',
@ -9,12 +9,21 @@ const Button = styled.button({
fontSize: 15, fontSize: 15,
padding: '3px 10px', padding: '3px 10px',
margin: 10, margin: 10,
}); };
const Button = ({ children, onClick }) => (
<button onClick={onClick} style={styles} type="button">
{children}
</button>
);
Button.displayName = 'Button'; Button.displayName = 'Button';
Button.propTypes = { Button.propTypes = {
children: PropTypes.node.isRequired, children: PropTypes.node.isRequired,
onClick: PropTypes.func, onClick: PropTypes.func,
}; };
Button.defaultProps = {
onClick: () => {},
};
export default Button; export default Button;

58
app/react/src/demo/Welcome.js
View File

@ -1,21 +1,33 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled from '@emotion/styled';
const Main = styled.article({ const Main = props => (
<article
{...props}
style={{
margin: 15, margin: 15,
maxWidth: 600, maxWidth: 600,
lineHeight: 1.4, lineHeight: 1.4,
fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif', fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
}); }}
/>
);
const Title = styled.h1({}); const Title = ({ children, ...props }) => <h1 {...props}>{children}</h1>;
const Note = styled.p({ const Note = props => (
<p
{...props}
style={{
opacity: 0.5, opacity: 0.5,
}); }}
/>
);
const InlineCode = styled.code({ const InlineCode = props => (
<code
{...props}
style={{
fontSize: 15, fontSize: 15,
fontWeight: 600, fontWeight: 600,
padding: '2px 5px', padding: '2px 5px',
@ -23,16 +35,34 @@ const InlineCode = styled.code({
borderRadius: 4, borderRadius: 4,
backgroundColor: '#f3f2f2', backgroundColor: '#f3f2f2',
color: '#3a3a3a', color: '#3a3a3a',
}); }}
/>
);
const Link = styled.a({ const Link = ({ children, href, ...props }) => (
<a
href={href}
{...props}
style={{
color: '#1474f3', color: '#1474f3',
textDecoration: 'none', textDecoration: 'none',
borderBottom: '1px solid #1474f3', borderBottom: '1px solid #1474f3',
paddingBottom: 2, paddingBottom: 2,
}); }}
>
{children}
</a>
);
const NavButton = styled(Link.withComponent('button'))({ const NavButton = ({ children, ...props }) => (
<button
{...props}
type="button"
style={{
color: '#1474f3',
textDecoration: 'none',
borderBottom: '1px solid #1474f3',
paddingBottom: 2,
borderTop: 'none', borderTop: 'none',
borderRight: 'none', borderRight: 'none',
borderLeft: 'none', borderLeft: 'none',
@ -40,7 +70,11 @@ const NavButton = styled(Link.withComponent('button'))({
padding: 0, padding: 0,
cursor: 'pointer', cursor: 'pointer',
font: 'inherit', font: 'inherit',
}); }}
>
{children}
</button>
);
const Welcome = ({ showApp }) => ( const Welcome = ({ showApp }) => (
<Main> <Main>

12
examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot
View File

@ -609,7 +609,8 @@ exports[`Storyshots Button with new info 1`] = `
exports[`Storyshots Button with notes 1`] = ` exports[`Storyshots Button with notes 1`] = `
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
Check my notes in the notes panel Check my notes in the notes panel
</button> </button>
@ -617,7 +618,8 @@ exports[`Storyshots Button with notes 1`] = `
exports[`Storyshots Button with some emoji 1`] = ` exports[`Storyshots Button with some emoji 1`] = `
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
<span <span
aria-label="so cool" aria-label="so cool"
@ -630,7 +632,8 @@ exports[`Storyshots Button with some emoji 1`] = `
exports[`Storyshots Button with text 1`] = ` exports[`Storyshots Button with text 1`] = `
<button <button
class="css-1qwzad5 eux70yo0" 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 Hello Button
</button> </button>
@ -650,7 +653,8 @@ exports[`Storyshots Some really long story kind description with text 1`] = `
style="margin:auto;max-height:100%" style="margin:auto;max-height:100%"
> >
<button <button
class="css-1qwzad5 eux70yo0" 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 Hello Button
</button> </button>

23
examples/cra-kitchen-sink/src/stories/__snapshots__/welcome.storyshot
View File

@ -2,11 +2,9 @@
exports[`Storyshots Welcome to Storybook 1`] = ` exports[`Storyshots Welcome to Storybook 1`] = `
<article <article
class="css-3qkdq7 ensbfgf0" style="margin:15px;max-width:600px;line-height:1.4;font-family:\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif"
>
<h1
class="css-0 ensbfgf1"
> >
<h1>
Welcome to storybook Welcome to storybook
</h1> </h1>
<p> <p>
@ -15,7 +13,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<p> <p>
We've added some basic stories inside the We've added some basic stories inside the
<code <code
class="css-1rxzob2 ensbfgf3" style="font-size:15px;font-weight:600;padding:2px 5px;border:1px solid #eae9e9;border-radius:4px;background-color:#f3f2f2;color:#3a3a3a"
> >
src/stories src/stories
</code> </code>
@ -28,13 +26,14 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<p> <p>
See these sample See these sample
<button <button
class="css-1otf2jm ensbfgf5" style="color:#1474f3;text-decoration:none;border-bottom:1px solid #1474f3;padding-bottom:2px;border-top:none;border-right:none;border-left:none;background-color:transparent;padding:0;cursor:pointer;font:inherit"
type="button"
> >
stories stories
</button> </button>
for a component called for a component called
<code <code
class="css-1rxzob2 ensbfgf3" style="font-size:15px;font-weight:600;padding:2px 5px;border:1px solid #eae9e9;border-radius:4px;background-color:#f3f2f2;color:#3a3a3a"
> >
Button Button
</code> </code>
@ -47,13 +46,13 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<br /> <br />
(Try editing the (Try editing the
<code <code
class="css-1rxzob2 ensbfgf3" style="font-size:15px;font-weight:600;padding:2px 5px;border:1px solid #eae9e9;border-radius:4px;background-color:#f3f2f2;color:#3a3a3a"
> >
Button Button
</code> </code>
stories located at stories located at
<code <code
class="css-1rxzob2 ensbfgf3" style="font-size:15px;font-weight:600;padding:2px 5px;border:1px solid #eae9e9;border-radius:4px;background-color:#f3f2f2;color:#3a3a3a"
> >
src/stories/index.js src/stories/index.js
</code> </code>
@ -64,9 +63,9 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<br /> <br />
Have a look at the Have a look at the
<a <a
class="css-4d3lbr ensbfgf4"
href="https://storybook.js.org/basics/writing-stories" href="https://storybook.js.org/basics/writing-stories"
rel="noopener noreferrer" rel="noopener noreferrer"
style="color:#1474f3;text-decoration:none;border-bottom:1px solid #1474f3;padding-bottom:2px"
target="_blank" target="_blank"
> >
Writing Stories Writing Stories
@ -74,7 +73,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
section in our documentation. section in our documentation.
</p> </p>
<p <p
class="css-1tzeee1 ensbfgf2" style="opacity:0.5"
> >
<b> <b>
NOTE: NOTE:
@ -82,7 +81,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<br /> <br />
Have a look at the Have a look at the
<code <code
class="css-1rxzob2 ensbfgf3" style="font-size:15px;font-weight:600;padding:2px 5px;border:1px solid #eae9e9;border-radius:4px;background-color:#f3f2f2;color:#3a3a3a"
> >
.storybook/webpack.config.js .storybook/webpack.config.js
</code> </code>

111
examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot
View File

@ -3,102 +3,122 @@
exports[`Storyshots Addons|Actions All types 1`] = ` exports[`Storyshots Addons|Actions All types 1`] = `
<div> <div>
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
Array Array
</button> </button>
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
Boolean Boolean
</button> </button>
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
Empty Object Empty Object
</button> </button>
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
File File
</button> </button>
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
Function A Function A
</button> </button>
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
Bound Function A Bound Function A
</button> </button>
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
Infinity Infinity
</button> </button>
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
-Infinity -Infinity
</button> </button>
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
NaN NaN
</button> </button>
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
null null
</button> </button>
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
Number Number
</button> </button>
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
Multiple Multiple
</button> </button>
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
Plain Object Plain Object
</button> </button>
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
Object (depth: 2) Object (depth: 2)
</button> </button>
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
RegExp RegExp
</button> </button>
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
String String
</button> </button>
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
Symbol Symbol
</button> </button>
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
SyntheticEvent SyntheticEvent
</button> </button>
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
undefined undefined
</button> </button>
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
Window Window
</button> </button>
@ -107,7 +127,8 @@ exports[`Storyshots Addons|Actions All types 1`] = `
exports[`Storyshots Addons|Actions Circular Payload 1`] = ` exports[`Storyshots Addons|Actions Circular Payload 1`] = `
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
Circular Payload Circular Payload
</button> </button>
@ -115,7 +136,8 @@ exports[`Storyshots Addons|Actions Circular Payload 1`] = `
exports[`Storyshots Addons|Actions Decorated action + config 1`] = ` exports[`Storyshots Addons|Actions Decorated action + config 1`] = `
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
Moving away from this story will persist the action logger Moving away from this story will persist the action logger
</button> </button>
@ -123,7 +145,8 @@ exports[`Storyshots Addons|Actions Decorated action + config 1`] = `
exports[`Storyshots Addons|Actions Decorated action 1`] = ` exports[`Storyshots Addons|Actions Decorated action 1`] = `
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
Native Event Native Event
</button> </button>
@ -131,7 +154,8 @@ exports[`Storyshots Addons|Actions Decorated action 1`] = `
exports[`Storyshots Addons|Actions Decorated actions + config 1`] = ` exports[`Storyshots Addons|Actions Decorated actions + config 1`] = `
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
Moving away from this story will persist the action logger Moving away from this story will persist the action logger
</button> </button>
@ -139,7 +163,8 @@ exports[`Storyshots Addons|Actions Decorated actions + config 1`] = `
exports[`Storyshots Addons|Actions Decorated actions 1`] = ` exports[`Storyshots Addons|Actions Decorated actions 1`] = `
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
Native Event Native Event
</button> </button>
@ -147,7 +172,8 @@ exports[`Storyshots Addons|Actions Decorated actions 1`] = `
exports[`Storyshots Addons|Actions Function Name 1`] = ` exports[`Storyshots Addons|Actions Function Name 1`] = `
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
Action.name: fnName Action.name: fnName
</button> </button>
@ -155,7 +181,8 @@ exports[`Storyshots Addons|Actions Function Name 1`] = `
exports[`Storyshots Addons|Actions Hello World 1`] = ` exports[`Storyshots Addons|Actions Hello World 1`] = `
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
Hello World Hello World
</button> </button>
@ -164,12 +191,14 @@ exports[`Storyshots Addons|Actions Hello World 1`] = `
exports[`Storyshots Addons|Actions Limit Action Output 1`] = ` exports[`Storyshots Addons|Actions Limit Action Output 1`] = `
<div> <div>
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
False False
</button> </button>
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
True True
</button> </button>
@ -178,7 +207,8 @@ exports[`Storyshots Addons|Actions Limit Action Output 1`] = `
exports[`Storyshots Addons|Actions Multiple actions + config 1`] = ` exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
Moving away from this story will persist the action logger Moving away from this story will persist the action logger
</button> </button>
@ -186,7 +216,8 @@ exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
exports[`Storyshots Addons|Actions Multiple actions 1`] = ` exports[`Storyshots Addons|Actions Multiple actions 1`] = `
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
Hello World Hello World
</button> </button>
@ -194,7 +225,8 @@ exports[`Storyshots Addons|Actions Multiple actions 1`] = `
exports[`Storyshots Addons|Actions Multiple actions, object + config 1`] = ` exports[`Storyshots Addons|Actions Multiple actions, object + config 1`] = `
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
Moving away from this story will persist the action logger Moving away from this story will persist the action logger
</button> </button>
@ -202,7 +234,8 @@ exports[`Storyshots Addons|Actions Multiple actions, object + config 1`] = `
exports[`Storyshots Addons|Actions Multiple actions, object 1`] = ` exports[`Storyshots Addons|Actions Multiple actions, object 1`] = `
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
Hello World Hello World
</button> </button>
@ -214,7 +247,8 @@ exports[`Storyshots Addons|Actions Persisting the action logger 1`] = `
Moving away from this story will persist the action logger Moving away from this story will persist the action logger
</p> </p>
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
Object (configured clearOnStoryChange: false) Object (configured clearOnStoryChange: false)
</button> </button>
@ -223,7 +257,8 @@ exports[`Storyshots Addons|Actions Persisting the action logger 1`] = `
exports[`Storyshots Addons|Actions Reserved keyword as name 1`] = ` exports[`Storyshots Addons|Actions Reserved keyword as name 1`] = `
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
Delete Delete
</button> </button>
@ -231,7 +266,8 @@ exports[`Storyshots Addons|Actions Reserved keyword as name 1`] = `
exports[`Storyshots Addons|Actions configureActionsDepth 1`] = ` exports[`Storyshots Addons|Actions configureActionsDepth 1`] = `
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
Object (configured depth: 2) Object (configured depth: 2)
</button> </button>
@ -239,7 +275,8 @@ exports[`Storyshots Addons|Actions configureActionsDepth 1`] = `
exports[`Storyshots Addons|Actions.deprecated Decorated Action 1`] = ` exports[`Storyshots Addons|Actions.deprecated Decorated Action 1`] = `
<button <button
class="css-1qwzad5 eux70yo0" style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
> >
Native Event Native Event
</button> </button>

4
examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot
View File

@ -14,7 +14,7 @@ exports[`Storyshots Addons|Knobs.withKnobs accepts story parameters 1`] = `
exports[`Storyshots Addons|Knobs.withKnobs complex select 1`] = ` exports[`Storyshots Addons|Knobs.withKnobs complex select 1`] = `
<pre> <pre>
string the type of string = string
</pre> </pre>
`; `;
@ -24,7 +24,7 @@ exports[`Storyshots Addons|Knobs.withKnobs dynamic knobs 1`] = `
I must be here I must be here
</div> </div>
<div> <div>
I can disapear I can disappear
</div> </div>
</div> </div>
`; `;

114
examples/official-storybook/stories/__snapshots__/other-demo.stories.storyshot Normal file
View File

@ -0,0 +1,114 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Other|Demo/Button with some emoji 1`] = `
<button
style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
>
<span
aria-label="so cool"
role="img"
>
😀 😎 👍 💯
</span>
</button>
`;
exports[`Storyshots Other|Demo/Button with text 1`] = `
<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>
`;
exports[`Storyshots Other|Demo/Welcome to Storybook 1`] = `
<article
style="margin:15px;max-width:600px;line-height:1.4;font-family:\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif"
>
<h1>
Welcome to storybook
</h1>
<p>
This is a UI component dev environment for your app.
</p>
<p>
We've added some basic stories inside the
<code
style="font-size:15px;font-weight:600;padding:2px 5px;border:1px solid #eae9e9;border-radius:4px;background-color:#f3f2f2;color:#3a3a3a"
>
src/stories
</code>
directory.
<br />
A story is a single state of one or more UI components. You can have as many stories as you want.
<br />
(Basically a story is like a visual test case.)
</p>
<p>
See these sample
<button
style="color:#1474f3;text-decoration:none;border-bottom:1px solid #1474f3;padding-bottom:2px;border-top:none;border-right:none;border-left:none;background-color:transparent;padding:0;cursor:pointer;font:inherit"
type="button"
>
stories
</button>
for a component called
<code
style="font-size:15px;font-weight:600;padding:2px 5px;border:1px solid #eae9e9;border-radius:4px;background-color:#f3f2f2;color:#3a3a3a"
>
Button
</code>
.
</p>
<p>
Just like that, you can add your own components as stories.
<br />
You can also edit those components and see changes right away.
<br />
(Try editing the
<code
style="font-size:15px;font-weight:600;padding:2px 5px;border:1px solid #eae9e9;border-radius:4px;background-color:#f3f2f2;color:#3a3a3a"
>
Button
</code>
stories located at
<code
style="font-size:15px;font-weight:600;padding:2px 5px;border:1px solid #eae9e9;border-radius:4px;background-color:#f3f2f2;color:#3a3a3a"
>
src/stories/index.js
</code>
.)
</p>
<p>
Usually we create stories with smaller UI components in the app.
<br />
Have a look at the
<a
href="https://storybook.js.org/basics/writing-stories"
rel="noopener noreferrer"
style="color:#1474f3;text-decoration:none;border-bottom:1px solid #1474f3;padding-bottom:2px"
target="_blank"
>
Writing Stories
</a>
section in our documentation.
</p>
<p
style="opacity:0.5"
>
<b>
NOTE:
</b>
<br />
Have a look at the
<code
style="font-size:15px;font-weight:600;padding:2px 5px;border:1px solid #eae9e9;border-radius:4px;background-color:#f3f2f2;color:#3a3a3a"
>
.storybook/webpack.config.js
</code>
to add webpack loaders and plugins you are using in this project.
</p>
</article>
`;

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

@ -185,8 +185,8 @@ storiesOf('Addons|Knobs.withKnobs', module)
const showOptional = select('Show optional', ['yes', 'no'], 'yes'); const showOptional = select('Show optional', ['yes', 'no'], 'yes');
return ( return (
<div> <div>
<div>{text('compulsary', 'I must be here')}</div> <div>{text('compulsory', 'I must be here')}</div>
{showOptional === 'yes' ? <div>{text('optional', 'I can disapear')}</div> : null} {showOptional === 'yes' ? <div>{text('optional', 'I can disappear')}</div> : null}
</div> </div>
); );
}) })
@ -202,7 +202,11 @@ storiesOf('Addons|Knobs.withKnobs', module)
'string' 'string'
); );
const value = m.toString(); const value = m.toString();
return <pre>{value}</pre>; return (
<pre>
the type of {value} = {typeof m}
</pre>
);
}) })
.add('triggers actions via button', () => { .add('triggers actions via button', () => {
button('Toggle item list state', () => { button('Toggle item list state', () => {

21
examples/official-storybook/stories/other-demo.stories.js Normal file
View File

@ -0,0 +1,21 @@
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).add('to Storybook', () => (
<Welcome showApp={linkTo('Button')} />
));
storiesOf('Other|Demo/Button', module)
.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>
));

1
examples/official-storybook/webpack.config.js
View File

@ -21,6 +21,7 @@ module.exports = async (baseConfig, env, defaultConfig) => ({
test: /\.js/, test: /\.js/,
use: defaultConfig.module.rules[0].use, use: defaultConfig.module.rules[0].use,
include: [ include: [
path.resolve(__dirname, '../../app/react'),
path.resolve(__dirname, '../../lib/ui/src'), path.resolve(__dirname, '../../lib/ui/src'),
path.resolve(__dirname, '../../lib/components/src'), path.resolve(__dirname, '../../lib/components/src'),
], ],

35
lib/cli/generators/ANGULAR/index.js
View File

@ -1,8 +1,15 @@
import mergeDirs from 'merge-dirs'; import mergeDirs from 'merge-dirs';
import path from 'path'; import path from 'path';
import { getVersions, getPackageJson, writePackageJson, installBabel } from '../../lib/helpers'; import {
getVersions,
getPackageJson,
writePackageJson,
installBabel,
getAngularAppTsConfigJson,
writeAngularAppTsConfig,
} from '../../lib/helpers';
export default async npmOptions => { async function addDependencies(npmOptions) {
const [ const [
storybookVersion, storybookVersion,
notesVersion, notesVersion,
@ -17,7 +24,6 @@ export default async npmOptions => {
'@storybook/addon-links', '@storybook/addon-links',
'@storybook/addons' '@storybook/addons'
); );
mergeDirs(path.resolve(__dirname, 'template'), '.', 'overwrite');
const packageJson = getPackageJson(); const packageJson = getPackageJson();
@ -35,4 +41,27 @@ export default async npmOptions => {
packageJson.scripts['build-storybook'] = 'build-storybook'; packageJson.scripts['build-storybook'] = 'build-storybook';
writePackageJson(packageJson); writePackageJson(packageJson);
}
function editAngularAppTsConfig() {
const tsConfigJson = getAngularAppTsConfigJson();
const glob = '**/*.stories.ts';
if (!tsConfigJson) {
return;
}
const { exclude = [] } = tsConfigJson;
if (exclude.includes(glob)) {
return;
}
tsConfigJson.exclude = [...exclude, glob];
writeAngularAppTsConfig(tsConfigJson);
}
export default async npmOptions => {
mergeDirs(path.resolve(__dirname, 'template'), '.', 'overwrite');
await addDependencies(npmOptions);
editAngularAppTsConfig();
}; };

40
lib/cli/lib/helpers.js
View File

@ -62,6 +62,46 @@ export function getBowerJson() {
return JSON.parse(jsonContent); return JSON.parse(jsonContent);
} }
export function getAngularJson() {
const angularJsonPath = path.resolve('angular.json');
if (!fs.existsSync(angularJsonPath)) {
return false;
}
const jsonContent = fs.readFileSync(angularJsonPath, 'utf8');
return JSON.parse(jsonContent);
}
export function getAngularAppTsConfigPath() {
const angularJson = getAngularJson();
const { defaultProject } = angularJson;
const tsConfigPath = angularJson.projects[defaultProject].architect.build.options.tsConfig;
if (!tsConfigPath || !fs.existsSync(path.resolve(tsConfigPath))) {
return false;
}
return tsConfigPath;
}
export function getAngularAppTsConfigJson() {
const tsConfigPath = getAngularAppTsConfigPath();
if (!tsConfigPath || !fs.existsSync(path.resolve(tsConfigPath))) {
return false;
}
const jsonContent = fs.readFileSync(tsConfigPath, 'utf8');
return JSON.parse(jsonContent);
}
export function writeAngularAppTsConfig(tsConfigJson) {
const content = `${JSON.stringify(tsConfigJson, null, 2)}\n`;
const tsConfigPath = getAngularAppTsConfigPath();
if (tsConfigPath) {
fs.writeFileSync(path.resolve(tsConfigPath), content, 'utf8');
}
}
export function writePackageJson(packageJson) { export function writePackageJson(packageJson) {
const content = `${JSON.stringify(packageJson, null, 2)}\n`; const content = `${JSON.stringify(packageJson, null, 2)}\n`;
const packageJsonPath = path.resolve('package.json'); const packageJsonPath = path.resolve('package.json');