GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-05 08:01:20 +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 }) =>
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 = {
tests: null,

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

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

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

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

@ -1,61 +1,55 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
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
onClick={[Function]}
>
<Styled(button)
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
<button
className="emotion-0 emotion-1"
onClick={[Function]}
<span
aria-label="so cool"
role="img"
>
<span
aria-label="so cool"
role="img"
>
😀 😎 👍 💯
</span>
</button>
</Styled(button)>
😀 😎 👍 💯
</span>
</button>
</Button>
`;
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
onClick={[Function]}
>
<Styled(button)
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
<button
className="emotion-0 emotion-1"
onClick={[Function]}
>
Hello Button
</button>
</Styled(button)>
Hello Button
</button>
</Button>
`;
@ -66,256 +60,261 @@ exports[`Storyshots Async with 5ms timeout simulating async operation 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
onClick={[Function]}
>
<Styled(button)
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
<button
className="emotion-0 emotion-1"
onClick={[Function]}
<span
aria-label="so cool"
role="img"
>
<span
aria-label="so cool"
role="img"
>
😀 😎 👍 💯
</span>
</button>
</Styled(button)>
😀 😎 👍 💯
</span>
</button>
</Button>
`;
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
onClick={[Function]}
>
<Styled(button)
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
<button
className="emotion-0 emotion-1"
onClick={[Function]}
>
Hello Button
</button>
</Styled(button)>
Hello Button
</button>
</Button>
`;
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
showApp={[Function]}
>
<ForwardRef>
<Styled(article)>
<article
className="emotion-18 emotion-19"
>
<ForwardRef>
<Styled(h1)>
<h1
className="emotion-0 emotion-1"
>
Welcome to storybook
</h1>
</Styled(h1)>
</ForwardRef>
<p>
This is a UI component dev environment for your app.
</p>
<p>
We've added some basic stories inside the
<ForwardRef>
<Styled(code)>
<code
className="emotion-2 emotion-3"
>
src/stories
</code>
</Styled(code)>
</ForwardRef>
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
<ForwardRef
onClick={[Function]}
<Main>
<article
style={
Object {
"fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
"lineHeight": 1.4,
"margin": 15,
"maxWidth": 600,
}
}
>
<Title>
<h1>
Welcome to storybook
</h1>
</Title>
<p>
This is a UI component dev environment for your app.
</p>
<p>
We've added some basic stories inside the
<InlineCode>
<code
style={
Object {
"backgroundColor": "#f3f2f2",
"border": "1px solid #eae9e9",
"borderRadius": 4,
"color": "#3a3a3a",
"fontSize": 15,
"fontWeight": 600,
"padding": "2px 5px",
}
}
>
<Styled(button)
onClick={[Function]}
>
<button
className="emotion-4 emotion-5"
onClick={[Function]}
>
stories
</button>
</Styled(button)>
</ForwardRef>
for a component called
<ForwardRef>
<Styled(code)>
<code
className="emotion-2 emotion-3"
>
Button
</code>
</Styled(code)>
</ForwardRef>
.
</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
<ForwardRef>
<Styled(code)>
<code
className="emotion-2 emotion-3"
>
Button
</code>
</Styled(code)>
</ForwardRef>
stories located at
<ForwardRef>
<Styled(code)>
<code
className="emotion-2 emotion-3"
>
src/stories/index.js
</code>
</Styled(code)>
</ForwardRef>
.)
</p>
<p>
Usually we create stories with smaller UI components in the app.
<br />
Have a look at the
<ForwardRef
src/stories
</code>
</InlineCode>
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
<NavButton
onClick={[Function]}
>
<button
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
</button>
</NavButton>
for a component called
<InlineCode>
<code
style={
Object {
"backgroundColor": "#f3f2f2",
"border": "1px solid #eae9e9",
"borderRadius": 4,
"color": "#3a3a3a",
"fontSize": 15,
"fontWeight": 600,
"padding": "2px 5px",
}
}
>
Button
</code>
</InlineCode>
.
</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
<InlineCode>
<code
style={
Object {
"backgroundColor": "#f3f2f2",
"border": "1px solid #eae9e9",
"borderRadius": 4,
"color": "#3a3a3a",
"fontSize": 15,
"fontWeight": 600,
"padding": "2px 5px",
}
}
>
Button
</code>
</InlineCode>
stories located at
<InlineCode>
<code
style={
Object {
"backgroundColor": "#f3f2f2",
"border": "1px solid #eae9e9",
"borderRadius": 4,
"color": "#3a3a3a",
"fontSize": 15,
"fontWeight": 600,
"padding": "2px 5px",
}
}
>
src/stories/index.js
</code>
</InlineCode>
.)
</p>
<p>
Usually we create stories with smaller UI components in the app.
<br />
Have a look at the
<Link
href="https://storybook.js.org/basics/writing-stories"
rel="noopener noreferrer"
target="_blank"
>
<a
href="https://storybook.js.org/basics/writing-stories"
rel="noopener noreferrer"
style={
Object {
"borderBottom": "1px solid #1474f3",
"color": "#1474f3",
"paddingBottom": 2,
"textDecoration": "none",
}
}
target="_blank"
>
<Styled(a)
href="https://storybook.js.org/basics/writing-stories"
rel="noopener noreferrer"
target="_blank"
Writing Stories
</a>
</Link>
section in our documentation.
</p>
<Note>
<p
style={
Object {
"opacity": 0.5,
}
}
>
<b>
NOTE:
</b>
<br />
Have a look at the
<InlineCode>
<code
style={
Object {
"backgroundColor": "#f3f2f2",
"border": "1px solid #eae9e9",
"borderRadius": 4,
"color": "#3a3a3a",
"fontSize": 15,
"fontWeight": 600,
"padding": "2px 5px",
}
}
>
<a
className="emotion-12 emotion-13"
href="https://storybook.js.org/basics/writing-stories"
rel="noopener noreferrer"
target="_blank"
>
Writing Stories
</a>
</Styled(a)>
</ForwardRef>
section in our documentation.
.storybook/webpack.config.js
</code>
</InlineCode>
to add webpack loaders and plugins you are using in this project.
</p>
<ForwardRef>
<Styled(p)>
<p
className="emotion-16 emotion-17"
>
<b>
NOTE:
</b>
<br />
Have a look at the
<ForwardRef>
<Styled(code)>
<code
className="emotion-2 emotion-3"
>
.storybook/webpack.config.js
</code>
</Styled(code)>
</ForwardRef>
to add webpack loaders and plugins you are using in this project.
</p>
</Styled(p)>
</ForwardRef>
</article>
</Styled(article)>
</ForwardRef>
</Note>
</article>
</Main>
</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
exports[`Storyshots Another Button with some emoji 1`] = `
<Styled(button)
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
<span
aria-label="so cool"
@ -10,15 +22,27 @@ exports[`Storyshots Another Button with some emoji 1`] = `
>
😀 😎 👍 💯
</span>
</Styled(button)>
</button>
`;
exports[`Storyshots Another Button with text 1`] = `
<Styled(button)
<button
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
</Styled(button)>
</button>
`;
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`] = `
<Styled(button)
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
<span
aria-label="so cool"
@ -37,30 +73,42 @@ exports[`Storyshots Button with some emoji 1`] = `
>
😀 😎 👍 💯
</span>
</Styled(button)>
</button>
`;
exports[`Storyshots Button with text 1`] = `
<Styled(button)
<button
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
</Styled(button)>
</button>
`;
exports[`Storyshots Welcome to Storybook 1`] = `
<ForwardRef>
<ForwardRef>
<Main>
<Title>
Welcome to storybook
</ForwardRef>
</Title>
<p>
This is a UI component dev environment for your app.
</p>
<p>
We've added some basic stories inside the
<ForwardRef>
<InlineCode>
src/stories
</ForwardRef>
</InlineCode>
directory.
<br />
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>
See these sample
<ForwardRef
<NavButton
onClick={[Function]}
>
stories
</ForwardRef>
</NavButton>
for a component called
<ForwardRef>
<InlineCode>
Button
</ForwardRef>
</InlineCode>
.
</p>
<p>
@ -87,14 +135,14 @@ exports[`Storyshots Welcome to Storybook 1`] = `
You can also edit those components and see changes right away.
<br />
(Try editing the
<ForwardRef>
<InlineCode>
Button
</ForwardRef>
</InlineCode>
stories located at
<ForwardRef>
<InlineCode>
src/stories/index.js
</ForwardRef>
</InlineCode>
.)
</p>
<p>
@ -102,26 +150,26 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<br />
Have a look at the
<ForwardRef
<Link
href="https://storybook.js.org/basics/writing-stories"
rel="noopener noreferrer"
target="_blank"
>
Writing Stories
</ForwardRef>
</Link>
section in our documentation.
</p>
<ForwardRef>
<Note>
<b>
NOTE:
</b>
<br />
Have a look at the
<ForwardRef>
<InlineCode>
.storybook/webpack.config.js
</ForwardRef>
</InlineCode>
to add webpack loaders and plugins you are using in this project.
</ForwardRef>
</ForwardRef>
</Note>
</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
exports[`Storyshots Another Button with some emoji 1`] = `
<Styled(button)
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
<span
aria-label="so cool"
@ -10,15 +22,27 @@ exports[`Storyshots Another Button with some emoji 1`] = `
>
😀 😎 👍 💯
</span>
</Styled(button)>
</button>
`;
exports[`Storyshots Another Button with text 1`] = `
<Styled(button)
<button
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
</Styled(button)>
</button>
`;
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`] = `
<Styled(button)
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
<span
aria-label="so cool"
@ -37,30 +73,42 @@ exports[`Storyshots Button with some emoji 1`] = `
>
😀 😎 👍 💯
</span>
</Styled(button)>
</button>
`;
exports[`Storyshots Button with text 1`] = `
<Styled(button)
<button
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
</Styled(button)>
</button>
`;
exports[`Storyshots Welcome to Storybook 1`] = `
<ForwardRef>
<ForwardRef>
<Main>
<Title>
Welcome to storybook
</ForwardRef>
</Title>
<p>
This is a UI component dev environment for your app.
</p>
<p>
We've added some basic stories inside the
<ForwardRef>
<InlineCode>
src/stories
</ForwardRef>
</InlineCode>
directory.
<br />
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>
See these sample
<ForwardRef
<NavButton
onClick={[Function]}
>
stories
</ForwardRef>
</NavButton>
for a component called
<ForwardRef>
<InlineCode>
Button
</ForwardRef>
</InlineCode>
.
</p>
<p>
@ -87,14 +135,14 @@ exports[`Storyshots Welcome to Storybook 1`] = `
You can also edit those components and see changes right away.
<br />
(Try editing the
<ForwardRef>
<InlineCode>
Button
</ForwardRef>
</InlineCode>
stories located at
<ForwardRef>
<InlineCode>
src/stories/index.js
</ForwardRef>
</InlineCode>
.)
</p>
<p>
@ -102,26 +150,26 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<br />
Have a look at the
<ForwardRef
<Link
href="https://storybook.js.org/basics/writing-stories"
rel="noopener noreferrer"
target="_blank"
>
Writing Stories
</ForwardRef>
</Link>
section in our documentation.
</p>
<ForwardRef>
<Note>
<b>
NOTE:
</b>
<br />
Have a look at the
<ForwardRef>
<InlineCode>
.storybook/webpack.config.js
</ForwardRef>
</InlineCode>
to add webpack loaders and plugins you are using in this project.
</ForwardRef>
</ForwardRef>
</Note>
</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
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
className="emotion-0 emotion-1"
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
<span
aria-label="so cool"
@ -25,19 +26,20 @@ exports[`Storyshots Another Button with some emoji 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
className="emotion-0 emotion-1"
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
</button>
@ -50,19 +52,20 @@ exports[`Storyshots Async with 5ms timeout simulating async operation 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
className="emotion-0 emotion-1"
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
<span
aria-label="so cool"
@ -74,75 +77,37 @@ exports[`Storyshots Button with some emoji 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
className="emotion-0 emotion-1"
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
</button>
`;
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
className="emotion-18 emotion-19"
style={
Object {
"fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
"lineHeight": 1.4,
"margin": 15,
"maxWidth": 600,
}
}
>
<h1
className="emotion-0 emotion-1"
>
<h1>
Welcome to storybook
</h1>
<p>
@ -151,7 +116,17 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<p>
We've added some basic stories inside the
<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
</code>
@ -164,15 +139,40 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<p>
See these sample
<button
className="emotion-4 emotion-5"
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
</button>
for a component called
<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
</code>
@ -185,14 +185,34 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<br />
(Try editing the
<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
</code>
stories located at
<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
</code>
@ -204,9 +224,16 @@ exports[`Storyshots Welcome to Storybook 1`] = `
Have a look at the
<a
className="emotion-12 emotion-13"
href="https://storybook.js.org/basics/writing-stories"
rel="noopener noreferrer"
style={
Object {
"borderBottom": "1px solid #1474f3",
"color": "#1474f3",
"paddingBottom": 2,
"textDecoration": "none",
}
}
target="_blank"
>
Writing Stories
@ -215,7 +242,11 @@ exports[`Storyshots Welcome to Storybook 1`] = `
section in our documentation.
</p>
<p
className="emotion-16 emotion-17"
style={
Object {
"opacity": 0.5,
}
}
>
<b>
NOTE:
@ -223,7 +254,17 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<br />
Have a look at the
<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
</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`] = `
<button
className="css-1qwzad5 eux70yo0"
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
<span
aria-label="so cool"
@ -16,8 +27,19 @@ exports[`Storyshots Another Button with some emoji 1`] = `
exports[`Storyshots Another Button with text 1`] = `
<button
className="css-1qwzad5 eux70yo0"
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
</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`] = `
<button
className="css-1qwzad5 eux70yo0"
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
<span
aria-label="so cool"
@ -16,8 +27,19 @@ exports[`Storyshots Another Button with some emoji 1`] = `
exports[`Storyshots Another Button with text 1`] = `
<button
className="css-1qwzad5 eux70yo0"
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
</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`] = `
<button
className="css-1qwzad5 eux70yo0"
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
<span
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`] = `
<button
className="css-1qwzad5 eux70yo0"
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
</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`] = `
<button
className="css-1qwzad5 eux70yo0"
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
<span
aria-label="so cool"
@ -16,8 +27,19 @@ exports[`Storyshots Button with some emoji 1`] = `
exports[`Storyshots Button with text 1`] = `
<button
className="css-1qwzad5 eux70yo0"
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
</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`] = `
<button
className="css-1qwzad5 eux70yo0"
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
<span
aria-label="so cool"
@ -16,8 +27,19 @@ exports[`Storyshots Button with some emoji 1`] = `
exports[`Storyshots Button with text 1`] = `
<button
className="css-1qwzad5 eux70yo0"
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
</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`] = `
<article
className="css-3qkdq7 ensbfgf0"
style={
Object {
"fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
"lineHeight": 1.4,
"margin": 15,
"maxWidth": 600,
}
}
>
<h1
className="css-0 ensbfgf1"
>
<h1>
Welcome to storybook
</h1>
<p>
@ -15,7 +20,17 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<p>
We've added some basic stories inside the
<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
</code>
@ -28,15 +43,40 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<p>
See these sample
<button
className="css-1otf2jm ensbfgf5"
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
</button>
for a component called
<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
</code>
@ -49,14 +89,34 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<br />
(Try editing the
<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
</code>
stories located at
<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
</code>
@ -68,9 +128,16 @@ exports[`Storyshots Welcome to Storybook 1`] = `
Have a look at the
<a
className="css-4d3lbr ensbfgf4"
href="https://storybook.js.org/basics/writing-stories"
rel="noopener noreferrer"
style={
Object {
"borderBottom": "1px solid #1474f3",
"color": "#1474f3",
"paddingBottom": 2,
"textDecoration": "none",
}
}
target="_blank"
>
Writing Stories
@ -79,7 +146,11 @@ exports[`Storyshots Welcome to Storybook 1`] = `
section in our documentation.
</p>
<p
className="css-1tzeee1 ensbfgf2"
style={
Object {
"opacity": 0.5,
}
}
>
<b>
NOTE:
@ -87,7 +158,17 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<br />
Have a look at the
<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
</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`] = `
<article
className="css-3qkdq7 ensbfgf0"
style={
Object {
"fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
"lineHeight": 1.4,
"margin": 15,
"maxWidth": 600,
}
}
>
<h1
className="css-0 ensbfgf1"
>
<h1>
Welcome to storybook
</h1>
<p>
@ -15,7 +20,17 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<p>
We've added some basic stories inside the
<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
</code>
@ -28,15 +43,40 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<p>
See these sample
<button
className="css-1otf2jm ensbfgf5"
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
</button>
for a component called
<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
</code>
@ -49,14 +89,34 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<br />
(Try editing the
<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
</code>
stories located at
<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
</code>
@ -68,9 +128,16 @@ exports[`Storyshots Welcome to Storybook 1`] = `
Have a look at the
<a
className="css-4d3lbr ensbfgf4"
href="https://storybook.js.org/basics/writing-stories"
rel="noopener noreferrer"
style={
Object {
"borderBottom": "1px solid #1474f3",
"color": "#1474f3",
"paddingBottom": 2,
"textDecoration": "none",
}
}
target="_blank"
>
Writing Stories
@ -79,7 +146,11 @@ exports[`Storyshots Welcome to Storybook 1`] = `
section in our documentation.
</p>
<p
className="css-1tzeee1 ensbfgf2"
style={
Object {
"opacity": 0.5,
}
}
>
<b>
NOTE:
@ -87,7 +158,17 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<br />
Have a look at the
<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
</code>

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

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

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

@ -1,46 +1,80 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from '@emotion/styled';
const Main = styled.article({
margin: 15,
maxWidth: 600,
lineHeight: 1.4,
fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
});
const Main = props => (
<article
{...props}
style={{
margin: 15,
maxWidth: 600,
lineHeight: 1.4,
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({
opacity: 0.5,
});
const Note = props => (
<p
{...props}
style={{
opacity: 0.5,
}}
/>
);
const InlineCode = styled.code({
fontSize: 15,
fontWeight: 600,
padding: '2px 5px',
border: '1px solid #eae9e9',
borderRadius: 4,
backgroundColor: '#f3f2f2',
color: '#3a3a3a',
});
const InlineCode = props => (
<code
{...props}
style={{
fontSize: 15,
fontWeight: 600,
padding: '2px 5px',
border: '1px solid #eae9e9',
borderRadius: 4,
backgroundColor: '#f3f2f2',
color: '#3a3a3a',
}}
/>
);
const Link = styled.a({
color: '#1474f3',
textDecoration: 'none',
borderBottom: '1px solid #1474f3',
paddingBottom: 2,
});
const Link = ({ children, href, ...props }) => (
<a
href={href}
{...props}
style={{
color: '#1474f3',
textDecoration: 'none',
borderBottom: '1px solid #1474f3',
paddingBottom: 2,
}}
>
{children}
</a>
);
const NavButton = styled(Link.withComponent('button'))({
borderTop: 'none',
borderRight: 'none',
borderLeft: 'none',
backgroundColor: 'transparent',
padding: 0,
cursor: 'pointer',
font: 'inherit',
});
const NavButton = ({ children, ...props }) => (
<button
{...props}
type="button"
style={{
color: '#1474f3',
textDecoration: 'none',
borderBottom: '1px solid #1474f3',
paddingBottom: 2,
borderTop: 'none',
borderRight: 'none',
borderLeft: 'none',
backgroundColor: 'transparent',
padding: 0,
cursor: 'pointer',
font: 'inherit',
}}
>
{children}
</button>
);
const Welcome = ({ showApp }) => (
<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`] = `
<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
</button>
@ -617,7 +618,8 @@ exports[`Storyshots Button with notes 1`] = `
exports[`Storyshots Button with some emoji 1`] = `
<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
aria-label="so cool"
@ -630,7 +632,8 @@ exports[`Storyshots Button with some emoji 1`] = `
exports[`Storyshots Button with text 1`] = `
<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
</button>
@ -650,7 +653,8 @@ exports[`Storyshots Some really long story kind description with text 1`] = `
style="margin:auto;max-height:100%"
>
<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
</button>

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

@ -2,11 +2,9 @@
exports[`Storyshots Welcome to Storybook 1`] = `
<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
</h1>
<p>
@ -15,7 +13,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<p>
We've added some basic stories inside the
<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
</code>
@ -28,13 +26,14 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<p>
See these sample
<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
</button>
for a component called
<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
</code>
@ -47,13 +46,13 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<br />
(Try editing the
<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
</code>
stories located at
<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
</code>
@ -64,9 +63,9 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<br />
Have a look at the
<a
class="css-4d3lbr ensbfgf4"
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
@ -74,7 +73,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
section in our documentation.
</p>
<p
class="css-1tzeee1 ensbfgf2"
style="opacity:0.5"
>
<b>
NOTE:
@ -82,7 +81,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<br />
Have a look at the
<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
</code>

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

@ -3,102 +3,122 @@
exports[`Storyshots Addons|Actions All types 1`] = `
<div>
<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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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)
</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
</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
</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
</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
</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
</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
</button>
@ -107,7 +127,8 @@ exports[`Storyshots Addons|Actions All types 1`] = `
exports[`Storyshots Addons|Actions Circular Payload 1`] = `
<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
</button>
@ -115,7 +136,8 @@ exports[`Storyshots Addons|Actions Circular Payload 1`] = `
exports[`Storyshots Addons|Actions Decorated action + config 1`] = `
<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
</button>
@ -123,7 +145,8 @@ exports[`Storyshots Addons|Actions Decorated action + config 1`] = `
exports[`Storyshots Addons|Actions Decorated action 1`] = `
<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
</button>
@ -131,7 +154,8 @@ exports[`Storyshots Addons|Actions Decorated action 1`] = `
exports[`Storyshots Addons|Actions Decorated actions + config 1`] = `
<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
</button>
@ -139,7 +163,8 @@ exports[`Storyshots Addons|Actions Decorated actions + config 1`] = `
exports[`Storyshots Addons|Actions Decorated actions 1`] = `
<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
</button>
@ -147,7 +172,8 @@ exports[`Storyshots Addons|Actions Decorated actions 1`] = `
exports[`Storyshots Addons|Actions Function Name 1`] = `
<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
</button>
@ -155,7 +181,8 @@ exports[`Storyshots Addons|Actions Function Name 1`] = `
exports[`Storyshots Addons|Actions Hello World 1`] = `
<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
</button>
@ -164,12 +191,14 @@ exports[`Storyshots Addons|Actions Hello World 1`] = `
exports[`Storyshots Addons|Actions Limit Action Output 1`] = `
<div>
<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
</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
</button>
@ -178,7 +207,8 @@ exports[`Storyshots Addons|Actions Limit Action Output 1`] = `
exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
<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
</button>
@ -186,7 +216,8 @@ exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
exports[`Storyshots Addons|Actions Multiple actions 1`] = `
<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
</button>
@ -194,7 +225,8 @@ exports[`Storyshots Addons|Actions Multiple actions 1`] = `
exports[`Storyshots Addons|Actions Multiple actions, object + config 1`] = `
<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
</button>
@ -202,7 +234,8 @@ exports[`Storyshots Addons|Actions Multiple actions, object + config 1`] = `
exports[`Storyshots Addons|Actions Multiple actions, object 1`] = `
<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
</button>
@ -214,7 +247,8 @@ exports[`Storyshots Addons|Actions Persisting the action logger 1`] = `
Moving away from this story will persist the action logger
</p>
<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)
</button>
@ -223,7 +257,8 @@ exports[`Storyshots Addons|Actions Persisting the action logger 1`] = `
exports[`Storyshots Addons|Actions Reserved keyword as name 1`] = `
<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
</button>
@ -231,7 +266,8 @@ exports[`Storyshots Addons|Actions Reserved keyword as name 1`] = `
exports[`Storyshots Addons|Actions configureActionsDepth 1`] = `
<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)
</button>
@ -239,7 +275,8 @@ exports[`Storyshots Addons|Actions configureActionsDepth 1`] = `
exports[`Storyshots Addons|Actions.deprecated Decorated Action 1`] = `
<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
</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`] = `
<pre>
string
the type of string = string
</pre>
`;
@ -24,7 +24,7 @@ exports[`Storyshots Addons|Knobs.withKnobs dynamic knobs 1`] = `
I must be here
</div>
<div>
I can disapear
I can disappear
</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');
return (
<div>
<div>{text('compulsary', 'I must be here')}</div>
{showOptional === 'yes' ? <div>{text('optional', 'I can disapear')}</div> : null}
<div>{text('compulsory', 'I must be here')}</div>
{showOptional === 'yes' ? <div>{text('optional', 'I can disappear')}</div> : null}
</div>
);
})
@ -202,7 +202,11 @@ storiesOf('Addons|Knobs.withKnobs', module)
'string'
);
const value = m.toString();
return <pre>{value}</pre>;
return (
<pre>
the type of {value} = {typeof m}
</pre>
);
})
.add('triggers actions via button', () => {
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/,
use: defaultConfig.module.rules[0].use,
include: [
path.resolve(__dirname, '../../app/react'),
path.resolve(__dirname, '../../lib/ui/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 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 [
storybookVersion,
notesVersion,
@ -17,7 +24,6 @@ export default async npmOptions => {
'@storybook/addon-links',
'@storybook/addons'
);
mergeDirs(path.resolve(__dirname, 'template'), '.', 'overwrite');
const packageJson = getPackageJson();
@ -35,4 +41,27 @@ export default async npmOptions => {
packageJson.scripts['build-storybook'] = 'build-storybook';
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);
}
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) {
const content = `${JSON.stringify(packageJson, null, 2)}\n`;
const packageJsonPath = path.resolve('package.json');