mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 16:11:08 +08:00
Merge branch 'master' into addon-knobs-performance
This commit is contained in:
Michael Shilman
GitHub
commit
54f51bcc77
@ -53,6 +53,7 @@ module.exports = {
|
||||
],
|
||||
'import/prefer-default-export': ignore,
|
||||
'react/jsx-wrap-multilines': ignore,
|
||||
'react/jsx-indent': ignore,
|
||||
'react/jsx-indent-props': ignore,
|
||||
'react/jsx-closing-bracket-location': ignore,
|
||||
'react/jsx-uses-react': error,
|
||||
|
||||
19
CHANGELOG.md
19
CHANGELOG.md
@ -1,3 +1,22 @@
|
||||
# 3.1.8
|
||||
|
||||
2017-July-06
|
||||
|
||||
#### Documentation
|
||||
|
||||
- Updated addon knob readme. [#1406](https://github.com/storybooks/storybook/pull/1406)
|
||||
- Add a FAQ entry for shared config with next [#1390](https://github.com/storybooks/storybook/pull/1390)
|
||||
- Documented webpack customization example for typescript [#1386](https://github.com/storybooks/storybook/pull/1386)
|
||||
|
||||
#### Maintenance
|
||||
|
||||
- Removed empty array, since webpack 2 doesn't support them anymore. [#1381](https://github.com/storybooks/storybook/pull/1381)
|
||||
|
||||
#### Dependency Upgrades
|
||||
|
||||
- Support webpack 3.0.0 [#1410](https://github.com/storybooks/storybook/pull/1410)
|
||||
- Update react inspector to fix #1385 [#1408](https://github.com/storybooks/storybook/pull/1408)
|
||||
|
||||
# 3.1.7
|
||||
|
||||
2017-June-28
|
||||
|
||||
@ -124,5 +124,5 @@ If you **are** using these addons, migrating is simple:
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { link } from '@storybook/addon-links';
|
||||
import { linkTo } from '@storybook/addon-links';
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "3.1.6",
|
||||
"version": "3.1.8",
|
||||
"description": "Action Logger addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -9,7 +9,11 @@ class ActionLogger extends Component {
|
||||
}
|
||||
|
||||
renderAction(action) {
|
||||
const counter = <div style={style.counter}>{action.count}</div>;
|
||||
const counter = (
|
||||
<div style={style.counter}>
|
||||
{action.count}
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div key={action.id} style={style.action}>
|
||||
<div style={style.countwrap}>
|
||||
@ -29,8 +33,12 @@ class ActionLogger extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div style={style.wrapper}>
|
||||
<pre style={style.actions}>{this.getActionData()}</pre>
|
||||
<button style={style.button} onClick={this.props.onClear}>CLEAR</button>
|
||||
<pre style={style.actions}>
|
||||
{this.getActionData()}
|
||||
</pre>
|
||||
<button style={style.button} onClick={this.props.onClear}>
|
||||
CLEAR
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -30,7 +30,7 @@ export function action(name) {
|
||||
// the same.
|
||||
//
|
||||
// Ref: https://bocoup.com/weblog/whats-in-a-function-name
|
||||
const fnName = name ? name.replace(/\W+/g, '_') : 'action';
|
||||
const fnName = name && typeof name === 'string' ? name.replace(/\W+/g, '_') : 'action';
|
||||
// eslint-disable-next-line no-eval
|
||||
const named = eval(`(function ${fnName}() { return handler.apply(this, arguments) })`);
|
||||
return named;
|
||||
|
||||
@ -9,8 +9,19 @@ const style = {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
overflow: 'auto',
|
||||
};
|
||||
|
||||
const innerStyle = {
|
||||
margin: 'auto',
|
||||
};
|
||||
|
||||
export default function(storyFn) {
|
||||
return <div style={style}>{storyFn()}</div>;
|
||||
return (
|
||||
<div style={style}>
|
||||
<div style={innerStyle}>
|
||||
{storyFn()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -59,10 +59,16 @@ export default class CommentItem extends Component {
|
||||
</div>
|
||||
<div className="comment-content" style={style.commentContent}>
|
||||
<div style={style.commentHead}>
|
||||
<span style={style.commentUser}>{comment.user.name}</span>
|
||||
<span style={style.commentTime}>{time}</span>
|
||||
<span style={style.commentUser}>
|
||||
{comment.user.name}
|
||||
</span>
|
||||
<span style={style.commentTime}>
|
||||
{time}
|
||||
</span>
|
||||
</div>
|
||||
<span style={style.commentText}>{body}</span>
|
||||
<span style={style.commentText}>
|
||||
{body}
|
||||
</span>
|
||||
{showDelete ? this.renderDelete() : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -18,7 +18,9 @@ export default function CommentsPanel(props) {
|
||||
return (
|
||||
<div style={style.wrapper}>
|
||||
<div style={style.message}>
|
||||
<a style={style.button} href={appsUrl}>Create an app for this repo on Storybook Hub</a>
|
||||
<a style={style.button} href={appsUrl}>
|
||||
Create an app for this repo on Storybook Hub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -136,7 +136,9 @@ export default class Item extends Component {
|
||||
|
||||
return (
|
||||
<div style={styles.item}>
|
||||
<label htmlFor={`addon-event-${name}`} style={styles.label}>{title}</label>
|
||||
<label htmlFor={`addon-event-${name}`} style={styles.label}>
|
||||
{title}
|
||||
</label>
|
||||
<button
|
||||
style={styles.button}
|
||||
onClick={this.onEmitClick}
|
||||
|
||||
@ -66,7 +66,9 @@ export default function Node(props) {
|
||||
if (!name) {
|
||||
return (
|
||||
<div style={containerStyle}>
|
||||
<span style={tagStyle}>{text}</span>
|
||||
<span style={tagStyle}>
|
||||
{text}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -75,7 +77,9 @@ export default function Node(props) {
|
||||
if (!children) {
|
||||
return (
|
||||
<div style={containerStyle}>
|
||||
<span style={tagStyle}><{name}</span>
|
||||
<span style={tagStyle}>
|
||||
<{name}
|
||||
</span>
|
||||
<Props
|
||||
node={node}
|
||||
singleLine
|
||||
@ -96,7 +100,9 @@ export default function Node(props) {
|
||||
return (
|
||||
<div>
|
||||
<div style={containerStyleCopy}>
|
||||
<span style={tagStyle}><{name}</span>
|
||||
<span style={tagStyle}>
|
||||
<{name}
|
||||
</span>
|
||||
<Props
|
||||
node={node}
|
||||
maxPropsIntoLine={maxPropsIntoLine}
|
||||
@ -117,7 +123,9 @@ export default function Node(props) {
|
||||
/>
|
||||
)}
|
||||
<div style={containerStyleCopy}>
|
||||
<span style={tagStyle}></{name}></span>
|
||||
<span style={tagStyle}>
|
||||
</{name}>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -34,11 +34,10 @@ export default function PropTable(props) {
|
||||
Object.keys(type.propTypes).forEach(property => {
|
||||
const typeInfo = type.propTypes[property];
|
||||
const required = typeInfo.isRequired === undefined ? 'yes' : 'no';
|
||||
const description = type.__docgenInfo &&
|
||||
type.__docgenInfo.props &&
|
||||
type.__docgenInfo.props[property]
|
||||
? type.__docgenInfo.props[property].description
|
||||
: null;
|
||||
const description =
|
||||
type.__docgenInfo && type.__docgenInfo.props && type.__docgenInfo.props[property]
|
||||
? type.__docgenInfo.props[property].description
|
||||
: null;
|
||||
let propType = PropTypesMap.get(typeInfo) || 'other';
|
||||
|
||||
if (propType === 'other') {
|
||||
@ -100,15 +99,23 @@ export default function PropTable(props) {
|
||||
<tbody>
|
||||
{array.map(row =>
|
||||
<tr key={row.property}>
|
||||
<td>{row.property}</td>
|
||||
<td>{row.propType}</td>
|
||||
<td>{row.required}</td>
|
||||
<td>
|
||||
{row.property}
|
||||
</td>
|
||||
<td>
|
||||
{row.propType}
|
||||
</td>
|
||||
<td>
|
||||
{row.required}
|
||||
</td>
|
||||
<td>
|
||||
{row.defaultValue === undefined
|
||||
? '-'
|
||||
: <PropVal val={row.defaultValue} {...propValProps} />}
|
||||
</td>
|
||||
<td>{row.description}</td>
|
||||
<td>
|
||||
{row.description}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
|
||||
@ -59,7 +59,11 @@ function previewObject(val, maxPropObjectKeys) {
|
||||
const names = Object.keys(val);
|
||||
const items = {};
|
||||
names.slice(0, maxPropObjectKeys).forEach((name, i) => {
|
||||
items[`k${i}`] = <span style={valueStyles.attr}>{name}</span>;
|
||||
items[`k${i}`] = (
|
||||
<span style={valueStyles.attr}>
|
||||
{name}
|
||||
</span>
|
||||
);
|
||||
items[`c${i}`] = ': ';
|
||||
items[`v${i}`] = <PropVal val={val[name]} />;
|
||||
items[`m${i}`] = ', ';
|
||||
@ -71,7 +75,9 @@ function previewObject(val, maxPropObjectKeys) {
|
||||
}
|
||||
return (
|
||||
<span style={valueStyles.object}>
|
||||
{'{'}{createFragment(items)}{'}'}
|
||||
{'{'}
|
||||
{createFragment(items)}
|
||||
{'}'}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@ -83,19 +89,31 @@ export default function PropVal(props) {
|
||||
let content = null;
|
||||
|
||||
if (typeof val === 'number') {
|
||||
content = <span style={valueStyles.number}>{val}</span>;
|
||||
content = (
|
||||
<span style={valueStyles.number}>
|
||||
{val}
|
||||
</span>
|
||||
);
|
||||
} else if (typeof val === 'string') {
|
||||
if (val.length > maxPropStringLength) {
|
||||
val = `${val.slice(0, maxPropStringLength)}…`;
|
||||
}
|
||||
content = <span style={valueStyles.string}>"{val}"</span>;
|
||||
content = (
|
||||
<span style={valueStyles.string}>
|
||||
"{val}"
|
||||
</span>
|
||||
);
|
||||
braceWrap = false;
|
||||
} else if (typeof val === 'boolean') {
|
||||
content = <span style={valueStyles.bool}>{`${val}`}</span>;
|
||||
} else if (Array.isArray(val)) {
|
||||
content = previewArray(val, maxPropArrayLength);
|
||||
} else if (typeof val === 'function') {
|
||||
content = <span style={valueStyles.func}>{val.name ? `${val.name}()` : 'anonymous()'}</span>;
|
||||
content = (
|
||||
<span style={valueStyles.func}>
|
||||
{val.name ? `${val.name}()` : 'anonymous()'}
|
||||
</span>
|
||||
);
|
||||
} else if (!val) {
|
||||
content = <span style={valueStyles.empty}>{`${val}`}</span>;
|
||||
} else if (typeof val !== 'object') {
|
||||
@ -112,7 +130,11 @@ export default function PropVal(props) {
|
||||
|
||||
if (!braceWrap) return content;
|
||||
|
||||
return <span>{content}</span>;
|
||||
return (
|
||||
<span>
|
||||
{content}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
PropVal.propTypes = {
|
||||
|
||||
@ -32,8 +32,14 @@ export default function Props(props) {
|
||||
names.forEach((name, i) => {
|
||||
items.push(
|
||||
<span key={name}>
|
||||
{breakIntoNewLines ? <span><br /> </span> : ' '}
|
||||
<span style={propNameStyle}>{name}</span>
|
||||
{breakIntoNewLines
|
||||
? <span>
|
||||
<br />
|
||||
</span>
|
||||
: ' '}
|
||||
<span style={propNameStyle}>
|
||||
{name}
|
||||
</span>
|
||||
{/* Use implicit true: */}
|
||||
{(!nodeProps[name] || typeof nodeProps[name] !== 'boolean') &&
|
||||
<span>
|
||||
@ -53,7 +59,11 @@ export default function Props(props) {
|
||||
);
|
||||
});
|
||||
|
||||
return <span>{items}</span>;
|
||||
return (
|
||||
<span>
|
||||
{items}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
Props.defaultProps = {
|
||||
|
||||
@ -180,9 +180,13 @@ export default class Story extends React.Component {
|
||||
<div style={this.state.stylesheet.children}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
<a style={linkStyle} onClick={openOverlay} role="button" tabIndex="0">Show Info</a>
|
||||
<a style={linkStyle} onClick={openOverlay} role="button" tabIndex="0">
|
||||
Show Info
|
||||
</a>
|
||||
<div style={infoStyle}>
|
||||
<a style={linkStyle} onClick={closeOverlay} role="button" tabIndex="0">×</a>
|
||||
<a style={linkStyle} onClick={closeOverlay} role="button" tabIndex="0">
|
||||
×
|
||||
</a>
|
||||
<div style={this.state.stylesheet.infoPage}>
|
||||
<div style={this.state.stylesheet.infoBody}>
|
||||
{this._getInfoHeader()}
|
||||
@ -204,8 +208,12 @@ export default class Story extends React.Component {
|
||||
|
||||
return (
|
||||
<div style={this.state.stylesheet.header.body}>
|
||||
<h1 style={this.state.stylesheet.header.h1}>{this.props.context.kind}</h1>
|
||||
<h2 style={this.state.stylesheet.header.h2}>{this.props.context.story}</h2>
|
||||
<h1 style={this.state.stylesheet.header.h1}>
|
||||
{this.props.context.kind}
|
||||
</h1>
|
||||
<h2 style={this.state.stylesheet.header.h2}>
|
||||
{this.props.context.story}
|
||||
</h2>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -61,7 +61,11 @@ export function Pre(props) {
|
||||
lineHeight: 1.5,
|
||||
overflowX: 'scroll',
|
||||
};
|
||||
return <pre style={style}>{props.children}</pre>;
|
||||
return (
|
||||
<pre style={style}>
|
||||
{props.children}
|
||||
</pre>
|
||||
);
|
||||
}
|
||||
|
||||
Pre.propTypes = { children: PropTypes.node };
|
||||
@ -74,7 +78,11 @@ export function Blockquote(props) {
|
||||
borderLeft: '8px solid #fafafa',
|
||||
padding: '1rem',
|
||||
};
|
||||
return <blockquote style={style}>{props.children}</blockquote>;
|
||||
return (
|
||||
<blockquote style={style}>
|
||||
{props.children}
|
||||
</blockquote>
|
||||
);
|
||||
}
|
||||
|
||||
Blockquote.propTypes = { children: PropTypes.node };
|
||||
|
||||
@ -20,7 +20,11 @@ export function H1(props) {
|
||||
padding: 0,
|
||||
fontSize: '40px',
|
||||
};
|
||||
return <h1 id={props.id} style={styles}>{props.children}</h1>;
|
||||
return (
|
||||
<h1 id={props.id} style={styles}>
|
||||
{props.children}
|
||||
</h1>
|
||||
);
|
||||
}
|
||||
|
||||
H1.defaultProps = defaultProps;
|
||||
@ -34,7 +38,11 @@ export function H2(props) {
|
||||
padding: 0,
|
||||
fontSize: '30px',
|
||||
};
|
||||
return <h2 id={props.id} style={styles}>{props.children}</h2>;
|
||||
return (
|
||||
<h2 id={props.id} style={styles}>
|
||||
{props.children}
|
||||
</h2>
|
||||
);
|
||||
}
|
||||
|
||||
H2.defaultProps = defaultProps;
|
||||
@ -49,7 +57,11 @@ export function H3(props) {
|
||||
fontSize: '22px',
|
||||
textTransform: 'uppercase',
|
||||
};
|
||||
return <h3 id={props.id} style={styles}>{props.children}</h3>;
|
||||
return (
|
||||
<h3 id={props.id} style={styles}>
|
||||
{props.children}
|
||||
</h3>
|
||||
);
|
||||
}
|
||||
|
||||
H3.defaultProps = defaultProps;
|
||||
@ -63,7 +75,11 @@ export function H4(props) {
|
||||
padding: 0,
|
||||
fontSize: '20px',
|
||||
};
|
||||
return <h4 id={props.id} style={styles}>{props.children}</h4>;
|
||||
return (
|
||||
<h4 id={props.id} style={styles}>
|
||||
{props.children}
|
||||
</h4>
|
||||
);
|
||||
}
|
||||
|
||||
H4.defaultProps = defaultProps;
|
||||
@ -77,7 +93,11 @@ export function H5(props) {
|
||||
padding: 0,
|
||||
fontSize: '18px',
|
||||
};
|
||||
return <h5 id={props.id} style={styles}>{props.children}</h5>;
|
||||
return (
|
||||
<h5 id={props.id} style={styles}>
|
||||
{props.children}
|
||||
</h5>
|
||||
);
|
||||
}
|
||||
|
||||
H5.defaultProps = defaultProps;
|
||||
@ -91,7 +111,11 @@ export function H6(props) {
|
||||
padding: 0,
|
||||
fontSize: '18px',
|
||||
};
|
||||
return <h6 id={props.id} style={styles}>{props.children}</h6>;
|
||||
return (
|
||||
<h6 id={props.id} style={styles}>
|
||||
{props.children}
|
||||
</h6>
|
||||
);
|
||||
}
|
||||
|
||||
H6.defaultProps = defaultProps;
|
||||
|
||||
@ -10,7 +10,11 @@ export function P(props) {
|
||||
...baseFonts,
|
||||
fontSize: '15px',
|
||||
};
|
||||
return <p style={style}>{props.children}</p>;
|
||||
return (
|
||||
<p style={style}>
|
||||
{props.children}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
P.defaultProps = defaultProps;
|
||||
@ -21,7 +25,11 @@ export function LI(props) {
|
||||
...baseFonts,
|
||||
fontSize: '15px',
|
||||
};
|
||||
return <li style={style}>{props.children}</li>;
|
||||
return (
|
||||
<li style={style}>
|
||||
{props.children}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
LI.defaultProps = defaultProps;
|
||||
@ -32,7 +40,11 @@ export function UL(props) {
|
||||
...baseFonts,
|
||||
fontSize: '15px',
|
||||
};
|
||||
return <ul style={style}>{props.children}</ul>;
|
||||
return (
|
||||
<ul style={style}>
|
||||
{props.children}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
UL.defaultProps = defaultProps;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-knobs",
|
||||
"version": "3.1.6",
|
||||
"version": "3.1.8",
|
||||
"description": "Storybook Addon Prop Editor Component",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
|
||||
@ -140,7 +140,9 @@ export default class Panel extends React.Component {
|
||||
<div style={styles.panel}>
|
||||
<PropForm knobs={knobsArray} onFieldChange={this.handleChange} />
|
||||
</div>
|
||||
<button style={styles.resetButton} onClick={this.reset}>RESET</button>
|
||||
<button style={styles.resetButton} onClick={this.reset}>
|
||||
RESET
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@ const stylesheet = {
|
||||
boxSizing: 'border-box',
|
||||
verticalAlign: 'top',
|
||||
paddingRight: 5,
|
||||
paddingTop: 7,
|
||||
paddingTop: 5,
|
||||
textAlign: 'right',
|
||||
width: 80,
|
||||
fontSize: 12,
|
||||
|
||||
@ -5,7 +5,7 @@ const styles = {
|
||||
display: 'table-cell',
|
||||
boxSizing: 'border-box',
|
||||
verticalAlign: 'middle',
|
||||
height: '26px',
|
||||
height: '25px',
|
||||
width: '100%',
|
||||
outline: 'none',
|
||||
border: '1px solid #f7f4f4',
|
||||
|
||||
@ -24,7 +24,11 @@ class SelectType extends React.Component {
|
||||
value: key,
|
||||
};
|
||||
|
||||
return <option {...opts}>{val}</option>;
|
||||
return (
|
||||
<option {...opts}>
|
||||
{val}
|
||||
</option>
|
||||
);
|
||||
}
|
||||
_options(values) {
|
||||
let data = [];
|
||||
|
||||
@ -32,6 +32,8 @@ Usually, you might already have completed this step. If not, here are some resou
|
||||
- If you are using Create React App, it's already configured for Jest. You just need to create a filename with the extension `.test.js`.
|
||||
- Otherwise check this Egghead [lesson](https://egghead.io/lessons/javascript-test-javascript-with-jest).
|
||||
|
||||
> Note: If you use React 16, you'll need to follow [these additional instructions](https://github.com/facebook/react/issues/9102#issuecomment-283873039).
|
||||
|
||||
## Configure Storyshots
|
||||
|
||||
Create a new test file with the name `Storyshots.test.js`. (Or whatever the name you prefer).
|
||||
@ -68,15 +70,15 @@ initStoryshots({
|
||||
});
|
||||
```
|
||||
|
||||
### `suit`
|
||||
### `suite`
|
||||
|
||||
By default, Storyshots groups stories inside a Jest test suit called "Storyshots". You could change it like this:
|
||||
By default, Storyshots groups stories inside a Jest test suite called "Storyshots". You could change it like this:
|
||||
|
||||
```js
|
||||
import initStoryshots from '@storybook/addon-storyshots';
|
||||
|
||||
initStoryshots({
|
||||
suit: 'MyStoryshots'
|
||||
suite: 'MyStoryshots'
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "3.1.7",
|
||||
"version": "3.1.8",
|
||||
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
@ -22,7 +22,7 @@
|
||||
"devDependencies": {
|
||||
"@storybook/addons": "^3.1.6",
|
||||
"@storybook/channels": "^3.1.6",
|
||||
"@storybook/react": "^3.1.7",
|
||||
"@storybook/react": "^3.1.8",
|
||||
"babel-cli": "^6.24.1",
|
||||
"babel-plugin-transform-runtime": "^6.23.0",
|
||||
"babel-preset-es2015": "^6.24.1",
|
||||
@ -33,7 +33,7 @@
|
||||
"peerDependencies": {
|
||||
"@storybook/addons": "^3.1.6",
|
||||
"@storybook/channels": "^3.1.6",
|
||||
"@storybook/react": "^3.1.7",
|
||||
"@storybook/react": "^3.1.8",
|
||||
"babel-core": "^6.24.1",
|
||||
"react": "*",
|
||||
"react-test-renderer": "*"
|
||||
|
||||
@ -56,7 +56,8 @@ export default function testStorySnapshots(options = {}) {
|
||||
throw new Error('testStorySnapshots is intended only to be used inside jest');
|
||||
}
|
||||
|
||||
const suit = options.suit || 'Storyshots';
|
||||
// NOTE: keep `suit` typo for backwards compatibility
|
||||
const suite = options.suite || options.suit || 'Storyshots';
|
||||
const stories = storybook.getStorybook();
|
||||
|
||||
// Added not to break existing storyshots configs (can be removed in a future major release)
|
||||
@ -72,7 +73,7 @@ export default function testStorySnapshots(options = {}) {
|
||||
continue;
|
||||
}
|
||||
|
||||
describe(suit, () => {
|
||||
describe(suite, () => {
|
||||
describe(group.kind, () => {
|
||||
// eslint-disable-next-line
|
||||
for (const story of group.stories) {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react-native",
|
||||
"version": "3.1.6",
|
||||
"version": "3.1.8",
|
||||
"description": "A better way to develop React Native Components for your app",
|
||||
"keywords": [
|
||||
"react",
|
||||
@ -24,7 +24,7 @@
|
||||
"prepublish": "node ../../scripts/prepublish.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "^3.1.6",
|
||||
"@storybook/addon-actions": "^3.1.8",
|
||||
"@storybook/addon-links": "^3.1.6",
|
||||
"@storybook/addons": "^3.1.6",
|
||||
"@storybook/channel-websocket": "^3.1.6",
|
||||
|
||||
@ -28,27 +28,19 @@ const styles = {
|
||||
const PreviewHelp = () =>
|
||||
<div style={styles.main}>
|
||||
<h1>Welcome to storybook</h1>
|
||||
<p>This is a UI component dev environment for your app.</p>
|
||||
<p>
|
||||
This is a UI component dev environment for your app.
|
||||
We've added some basic stories inside the <span style={styles.code}>
|
||||
storybook/stories
|
||||
</span>{' '}
|
||||
directory. A story is a single state of one or more UI components. You can have as many
|
||||
stories as you want. Basically a story is like a visual test case.
|
||||
</p>
|
||||
<p>
|
||||
We've added some basic stories inside the
|
||||
{' '}
|
||||
<span style={styles.code}>storybook/stories</span>
|
||||
{' '}
|
||||
directory.
|
||||
{' '}
|
||||
A story is a single state of one or more UI components. You can have as many stories as you
|
||||
want. Basically a story is like a visual test case.
|
||||
</p>
|
||||
<p>
|
||||
To see your Storybook stories on the device, you should start your mobile app for the
|
||||
{' '}
|
||||
<span style={styles.code}><platform></span>
|
||||
{' '}
|
||||
of your choice (typically ios or android). (Note that due to an implementation detail, your
|
||||
stories will only show up in the left-pane after your device has connected to this storybook
|
||||
server.)
|
||||
To see your Storybook stories on the device, you should start your mobile app for the{' '}
|
||||
<span style={styles.code}><platform></span> of your choice (typically ios or android).
|
||||
(Note that due to an implementation detail, your stories will only show up in the left-pane
|
||||
after your device has connected to this storybook server.)
|
||||
</p>
|
||||
<p>
|
||||
For <span style={styles.code}>create-react-native-app</span> apps:
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react",
|
||||
"version": "3.1.7",
|
||||
"version": "3.1.8",
|
||||
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/apps/react",
|
||||
"bugs": {
|
||||
@ -22,7 +22,7 @@
|
||||
"prepublish": "node ../../scripts/prepublish.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "^3.1.6",
|
||||
"@storybook/addon-actions": "^3.1.8",
|
||||
"@storybook/addon-links": "^3.1.6",
|
||||
"@storybook/addons": "^3.1.6",
|
||||
"@storybook/channel-postmessage": "^3.1.6",
|
||||
@ -53,6 +53,7 @@
|
||||
"json-loader": "^0.5.4",
|
||||
"json-stringify-safe": "^5.0.1",
|
||||
"json5": "^0.5.1",
|
||||
"lodash.flattendeep": "^4.4.0",
|
||||
"lodash.pick": "^4.4.0",
|
||||
"postcss-flexbugs-fixes": "^3.0.0",
|
||||
"postcss-loader": "^2.0.5",
|
||||
|
||||
41
app/react/src/client/preview/element_check.js
Normal file
41
app/react/src/client/preview/element_check.js
Normal file
@ -0,0 +1,41 @@
|
||||
import React from 'react';
|
||||
import flattenDeep from 'lodash.flattendeep';
|
||||
|
||||
// return true if the element is renderable with react fiber
|
||||
export const isValidFiberElement = element =>
|
||||
typeof element === 'string' || typeof element === 'number' || React.isValidElement(element);
|
||||
|
||||
export const isPriorToFiber = version => {
|
||||
const [majorVersion] = version.split('.');
|
||||
|
||||
return Number(majorVersion) < 16;
|
||||
};
|
||||
|
||||
// accepts an element and return true if renderable else return false
|
||||
const isReactRenderable = element => {
|
||||
// storybook is running with a version prior to fiber,
|
||||
// run a simple check on the element
|
||||
if (isPriorToFiber(React.version)) {
|
||||
return React.isValidElement(element);
|
||||
}
|
||||
|
||||
// the element is not an array, check if its a fiber renderable element
|
||||
if (!Array.isArray(element)) {
|
||||
return isValidFiberElement(element);
|
||||
}
|
||||
|
||||
// the element is in fact a list of elements (array),
|
||||
// loop on its elements to see if its ok to render them
|
||||
const elementsList = element.map(isReactRenderable);
|
||||
|
||||
// flatten the list of elements (possibly deep nested)
|
||||
const flatList = flattenDeep(elementsList);
|
||||
|
||||
// keep only invalid elements
|
||||
const invalidElements = flatList.filter(elementIsRenderable => elementIsRenderable === false);
|
||||
|
||||
// it's ok to render this list if there is no invalid elements inside
|
||||
return !invalidElements.length;
|
||||
};
|
||||
|
||||
export default isReactRenderable;
|
||||
86
app/react/src/client/preview/element_check.test.js
Normal file
86
app/react/src/client/preview/element_check.test.js
Normal file
@ -0,0 +1,86 @@
|
||||
import React from 'react';
|
||||
import isReactRenderable, { isValidFiberElement, isPriorToFiber } from './element_check';
|
||||
|
||||
describe('element_check.utils.isValidFiberElement', () => {
|
||||
it('should accept to render a string', () => {
|
||||
const string = 'react is awesome';
|
||||
|
||||
expect(isValidFiberElement(string)).toBe(true);
|
||||
});
|
||||
|
||||
it('should accept to render a number', () => {
|
||||
const number = 42;
|
||||
|
||||
expect(isValidFiberElement(number)).toBe(true);
|
||||
});
|
||||
|
||||
it('should accept to render a valid React element', () => {
|
||||
const element = <button>Click me</button>;
|
||||
|
||||
expect(isValidFiberElement(element)).toBe(true);
|
||||
});
|
||||
|
||||
it("shouldn't accept to render an arbitrary object", () => {
|
||||
const object = { key: 'bee bop' };
|
||||
|
||||
expect(isValidFiberElement(object)).toBe(false);
|
||||
});
|
||||
|
||||
it("shouldn't accept to render a function", () => {
|
||||
const noop = () => {};
|
||||
|
||||
expect(isValidFiberElement(noop)).toBe(false);
|
||||
});
|
||||
|
||||
it("shouldn't accept to render undefined", () => {
|
||||
expect(isValidFiberElement(undefined)).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('element_check.utils.isPriorToFiber', () => {
|
||||
it('should return true if React version is prior to Fiber (< 16)', () => {
|
||||
const oldVersion = '0.14.5';
|
||||
const version = '15.5.4';
|
||||
|
||||
expect(isPriorToFiber(oldVersion)).toBe(true);
|
||||
expect(isPriorToFiber(version)).toBe(true);
|
||||
});
|
||||
|
||||
it('should return false if React version is using Fiber features (>= 16)', () => {
|
||||
const alphaVersion = '16.0.0-alpha.13';
|
||||
const version = '18.3.1';
|
||||
|
||||
expect(isPriorToFiber(alphaVersion)).toBe(false);
|
||||
expect(isPriorToFiber(version)).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('element_check.isReactRenderable', () => {
|
||||
const string = 'yo';
|
||||
const number = 1337;
|
||||
const element = <span>what's up</span>;
|
||||
const array = [string, number, element];
|
||||
const object = { key: null };
|
||||
|
||||
it('allows rendering React elements only prior to React Fiber', () => {
|
||||
// mutate version for the purpose of the test
|
||||
React.version = '15.5.4';
|
||||
|
||||
expect(isReactRenderable(string)).toBe(false);
|
||||
expect(isReactRenderable(number)).toBe(false);
|
||||
expect(isReactRenderable(element)).toBe(true);
|
||||
expect(isReactRenderable(array)).toBe(false);
|
||||
expect(isReactRenderable(object)).toBe(false);
|
||||
});
|
||||
|
||||
it('allows rendering string, numbers, arrays and React elements with React Fiber', () => {
|
||||
// mutate version for the purpose of the test
|
||||
React.version = '16.0.0-alpha.13';
|
||||
|
||||
expect(isReactRenderable(string)).toBe(true);
|
||||
expect(isReactRenderable(number)).toBe(true);
|
||||
expect(isReactRenderable(element)).toBe(true);
|
||||
expect(isReactRenderable(array)).toBe(true);
|
||||
expect(isReactRenderable(object)).toBe(false);
|
||||
});
|
||||
});
|
||||
@ -32,7 +32,9 @@ const codeStyle = {
|
||||
|
||||
const ErrorDisplay = ({ error }) =>
|
||||
<div style={mainStyle}>
|
||||
<div style={headingStyle}>{error.message}</div>
|
||||
<div style={headingStyle}>
|
||||
{error.message}
|
||||
</div>
|
||||
<pre style={codeStyle}>
|
||||
<code>
|
||||
{error.stack}
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { stripIndents } from 'common-tags';
|
||||
import isReactRenderable from './element_check';
|
||||
import ErrorDisplay from './error_display';
|
||||
|
||||
// check whether we're running on node/browser
|
||||
@ -83,13 +84,13 @@ export function renderMain(data, storyStore) {
|
||||
return renderError(error);
|
||||
}
|
||||
|
||||
if (element.type === undefined) {
|
||||
if (!isReactRenderable(element)) {
|
||||
const error = {
|
||||
title: `Expecting a valid React element from the story: "${selectedStory}" of "${selectedKind}".`,
|
||||
description: stripIndents`
|
||||
Seems like you are not returning a correct React element from the story.
|
||||
Could you double check that?
|
||||
`,
|
||||
Seems like you are not returning a correct React element from the story.
|
||||
Could you double check that?
|
||||
`,
|
||||
};
|
||||
return renderError(error);
|
||||
}
|
||||
|
||||
@ -8,7 +8,9 @@ import './style.css';
|
||||
const DocsContent = ({ title, content, editUrl }) =>
|
||||
<div id="docs-content">
|
||||
<div className="content">
|
||||
<h2 className="title">{title}</h2>
|
||||
<h2 className="title">
|
||||
{title}
|
||||
</h2>
|
||||
<p>
|
||||
<a className="edit-link" href={editUrl} target="_blank" rel="noopener noreferrer">
|
||||
Edit this page
|
||||
|
||||
@ -24,11 +24,19 @@ class Nav extends React.Component {
|
||||
}
|
||||
|
||||
renderNavOpts(nav) {
|
||||
return <option value={nav.id} key={nav.id}>{nav.title}</option>;
|
||||
return (
|
||||
<option value={nav.id} key={nav.id}>
|
||||
{nav.title}
|
||||
</option>
|
||||
);
|
||||
}
|
||||
|
||||
renderHeadingOpts(section) {
|
||||
return <option value={section.id} key={section.id}>{section.heading}</option>;
|
||||
return (
|
||||
<option value={section.id} key={section.id}>
|
||||
{section.heading}
|
||||
</option>
|
||||
);
|
||||
}
|
||||
render() {
|
||||
const { sections, selectedSection, selectedItem } = this.props;
|
||||
|
||||
@ -7,18 +7,21 @@ const Nav = ({ sections, selectedSectionId, selectedItemId }) =>
|
||||
<div id="nav">
|
||||
{sections.map(section =>
|
||||
<div key={section.id}>
|
||||
<h3>{section.heading}</h3>
|
||||
<h3>
|
||||
{section.heading}
|
||||
</h3>
|
||||
<ul>
|
||||
{section.items.map(item => {
|
||||
const cssClass = section.id === selectedSectionId && item.id === selectedItemId
|
||||
? 'selected'
|
||||
: '';
|
||||
const cssClass =
|
||||
section.id === selectedSectionId && item.id === selectedItemId ? 'selected' : '';
|
||||
|
||||
const url = `/${section.id}/${item.id}/`;
|
||||
|
||||
return (
|
||||
<li key={item.id}>
|
||||
<Link className={cssClass} to={url}>{item.title}</Link>
|
||||
<Link className={cssClass} to={url}>
|
||||
{item.title}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
|
||||
@ -10,11 +10,7 @@ const Footer = () =>
|
||||
<div className="row logos">
|
||||
<div className="col-xs-12">
|
||||
<center>
|
||||
Maintained by the
|
||||
{' '}
|
||||
<Link to="/basics/community/">
|
||||
Storybook Community
|
||||
</Link>
|
||||
Maintained by the <Link to="/basics/community/">Storybook Community</Link>
|
||||
.
|
||||
</center>
|
||||
<center>
|
||||
|
||||
@ -14,11 +14,23 @@ const GridItem = ({ title, description, source, demo, thumbnail }) =>
|
||||
<div className="overlay" />
|
||||
</div>
|
||||
<div className="text">
|
||||
<h2>{title}</h2>
|
||||
<p className="desc">{description}</p>
|
||||
<h2>
|
||||
{title}
|
||||
</h2>
|
||||
<p className="desc">
|
||||
{description}
|
||||
</p>
|
||||
<div className="button-row">
|
||||
{demo ? <a href={demo} {...linkProps}>Demo</a> : null}
|
||||
{source ? <a href={source} {...linkProps}>Source</a> : null}
|
||||
{demo
|
||||
? <a href={demo} {...linkProps}>
|
||||
Demo
|
||||
</a>
|
||||
: null}
|
||||
{source
|
||||
? <a href={source} {...linkProps}>
|
||||
Source
|
||||
</a>
|
||||
: null}
|
||||
</div>
|
||||
</div>
|
||||
</div>;
|
||||
|
||||
@ -17,7 +17,9 @@ const Item = ({ storybook, owner, source }) =>
|
||||
{storybook.name}
|
||||
</a>
|
||||
</p>
|
||||
<a href={source} target="_blank" rel="noopener noreferrer">source</a>
|
||||
<a href={source} target="_blank" rel="noopener noreferrer">
|
||||
source
|
||||
</a>
|
||||
</div>
|
||||
</div>;
|
||||
Item.propTypes = {
|
||||
|
||||
@ -46,23 +46,37 @@ const MainLinks = () =>
|
||||
id="search"
|
||||
placeholder="type to search"
|
||||
/>
|
||||
<span className="form-control-feedback" aria-hidden="true">🔍</span>
|
||||
<span className="form-control-feedback" aria-hidden="true">
|
||||
🔍
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-sm-4 read-docs">
|
||||
<Link to="/basics/introduction/"><h3>Basics</h3></Link>
|
||||
<Link to="/basics/introduction/">
|
||||
<h3>Basics</h3>
|
||||
</Link>
|
||||
<ul>
|
||||
<li><Link to="/basics/quick-start-guide/">Quick setup</Link></li>
|
||||
<li><Link to="/basics/slow-start-guide/">Adding to existing project</Link></li>
|
||||
<li><Link to="/basics/writing-stories/">Writing stories</Link></li>
|
||||
<li>
|
||||
<Link to="/basics/quick-start-guide/">Quick setup</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/basics/slow-start-guide/">Adding to existing project</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/basics/writing-stories/">Writing stories</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="col-sm-4 read-docs">
|
||||
<Link to="/configurations/default-config/"><h3>Configuration</h3></Link>
|
||||
<Link to="/configurations/default-config/">
|
||||
<h3>Configuration</h3>
|
||||
</Link>
|
||||
<ul>
|
||||
<li><Link to="/configurations/custom-babel-config/">Babel configurations</Link></li>
|
||||
<li>
|
||||
<Link to="/configurations/custom-babel-config/">Babel configurations</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/configurations/custom-webpack-config/">Webpack configurations</Link>
|
||||
</li>
|
||||
@ -76,9 +90,13 @@ const MainLinks = () =>
|
||||
</div>
|
||||
|
||||
<div className="col-sm-4 read-docs">
|
||||
<Link to="/configurations/default-config/"><h3>Addons</h3></Link>
|
||||
<Link to="/configurations/default-config/">
|
||||
<h3>Addons</h3>
|
||||
</Link>
|
||||
<ul>
|
||||
<li><Link to="/addons/introduction/">Intro to Addons</Link></li>
|
||||
<li>
|
||||
<Link to="/addons/introduction/">Intro to Addons</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/addons/using-addons/">Using Addons</Link>
|
||||
</li>
|
||||
|
||||
@ -6,17 +6,14 @@ const Platform = () =>
|
||||
<div className="col-md-12">
|
||||
<h3 className="built-for">Built for</h3>
|
||||
<p className="platforms">
|
||||
|
||||
<a
|
||||
href="https://github.com/storybooks/storybook/tree/master/app/react"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
React
|
||||
</a>
|
||||
{' '}
|
||||
&
|
||||
{' '}
|
||||
</a>{' '}
|
||||
&{' '}
|
||||
<a
|
||||
href="https://github.com/storybooks/storybook/tree/master/app/react-native"
|
||||
target="_blank"
|
||||
|
||||
@ -67,9 +67,9 @@ const UsedBy = ({ users }) =>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Link to="/examples/" className="used-by-more-examples">
|
||||
See more examples…
|
||||
</Link>
|
||||
<div className="used-by-more-examples">
|
||||
<Link to="/examples/">See more examples…</Link>
|
||||
</div>
|
||||
</div>;
|
||||
UsedBy.propTypes = {
|
||||
users: PropTypes.array, // eslint-disable-line
|
||||
|
||||
@ -63,5 +63,13 @@
|
||||
.used-by-more-examples {
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
margin-top: 50px;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.used-by-more-examples a {
|
||||
background-color: #e4004f;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
@ -41,7 +41,9 @@ const HTML = props => {
|
||||
<meta charSet="utf-8" />
|
||||
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>{title}</title>
|
||||
<title>
|
||||
{title}
|
||||
</title>
|
||||
<link rel="icon" href={favicon} type="image/x-icon" />
|
||||
{css}
|
||||
</head>
|
||||
|
||||
@ -33,8 +33,8 @@
|
||||
"color-pairs-picker": "^1.3.5",
|
||||
"docsearch.js": "^2.3.3",
|
||||
"front-matter": "^2.1.2",
|
||||
"gatsby": "^0.12.45",
|
||||
"gh-pages": "^0.12.0",
|
||||
"gatsby": "0.12.48",
|
||||
"gh-pages": "^1.0.0",
|
||||
"global": "^4.3.2",
|
||||
"highlight.js": "^9.12.0",
|
||||
"loader-utils": "^1.1.0",
|
||||
|
||||
@ -65,6 +65,8 @@ configure(loadStories, module);
|
||||
|
||||
Here we use Webpack's [require.context](https://webpack.github.io/docs/context.html#require-context) to load modules dynamically. Have a look at the relevant Webpack [docs](https://webpack.github.io/docs/context.html#require-context) to learn more about how to use require.context.
|
||||
|
||||
The **React Native** packager resolves all the imports at build-time, so it's not possible to load modules dynamically. If you don't want to import all your stories manually you can use [react-native-storybook-loader](https://github.com/elderfo/react-native-storybook-loader) to automatically create the import statements for all of your stories.
|
||||
|
||||
## Using Decorators
|
||||
|
||||
A decorator is a way to wrap a story with a common set of component(s). Let's say you want to center all your stories. Here is how we can do this with a decorator:
|
||||
|
||||
@ -25,16 +25,23 @@ algolia:
|
||||
description: Lightning-fast, hyper-configurable search.
|
||||
source: https://github.com/algolia/react-instantsearch/
|
||||
demo: https://community.algolia.com/react-instantsearch/storybook/
|
||||
rebass:
|
||||
thumbnail: ./thumbnails/rebass.png
|
||||
title: Rebass
|
||||
description: Functional React UI component library
|
||||
demo: http://jxnblk.com/rebass/stories/
|
||||
source: https://github.com/jxnblk/rebass
|
||||
site: http://jxnblk.com/rebass
|
||||
coursera:
|
||||
thumbnail: ./thumbnails/coursera-ui.png
|
||||
title: Coursera
|
||||
description: Coursera UI component library
|
||||
demo: https://building.coursera.org/ui/
|
||||
demo: https://webedx-spark.github.io/coursera-ui/
|
||||
artsy:
|
||||
thumbnail: ./thumbnails/artsy.png
|
||||
title: Artsy Force
|
||||
description: Artsy's "Force" component library
|
||||
demo: https://artsy.github.io/reaction-force/
|
||||
demo: https://artsy.github.io/reaction/
|
||||
source: https://github.com/artsy/reaction-force
|
||||
site: https://artsy.net
|
||||
necolas:
|
||||
|
||||
BIN
docs/pages/examples/thumbnails/rebass.png
Normal file
BIN
docs/pages/examples/thumbnails/rebass.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
@ -34,31 +34,28 @@ Then, install StoryShots into your app with:
|
||||
npm i -D @storybook/addon-storyshots
|
||||
```
|
||||
|
||||
Then, add the following NPM script into your package.json:
|
||||
Then, assuming you are using Jest for testing, you can create a test file `storyshots.test.js` that contains the following:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"test-storybook": "storyshots"
|
||||
}
|
||||
}
|
||||
```js
|
||||
import initStoryshots from '@storybook/addon-storyshots';
|
||||
|
||||
initStoryshots({ /* configuration options */ });
|
||||
```
|
||||
|
||||
Now you can run the above command with:
|
||||
Now you can snapshot test all of your stories with:
|
||||
|
||||
```sh
|
||||
npm run test-storybook
|
||||
npm test
|
||||
```
|
||||
|
||||
This will save the initial set of snapshots inside your Storybook config directory.
|
||||
|
||||
|
||||
|
||||
After you complete any changes, you can run the above NPM script again and find our structural changes.
|
||||
After you complete any changes, you can run the test again and find all structural changes.
|
||||
|
||||
|
||||
|
||||
* * *
|
||||
|
||||
StoryShots also comes with a few important [productive features](https://github.com/storybooks/storybook/tree/master/addons/storyshots#key-features) that can be customized.
|
||||
Have a look at the StoryShots [repo](https://github.com/storybooks/storybook/tree/master/addons/storyshots) for more information.
|
||||
StoryShots also comes with a variety of customization options. Have a look at the StoryShots [repo](https://github.com/storybooks/storybook/tree/master/addons/storyshots) for more information.
|
||||
|
||||
@ -10,7 +10,9 @@ const Markdown = ({ route }) => {
|
||||
return (
|
||||
<DocumentTitle title={`${post.title} | ${config.siteTitle}`}>
|
||||
<div className="markdown">
|
||||
<h1>{post.title}</h1>
|
||||
<h1>
|
||||
{post.title}
|
||||
</h1>
|
||||
<p>
|
||||
<a className="edit-link" href={editUrl} target="_blank" rel="noopener noreferrer">
|
||||
Edit this page
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
"@storybook/addon-storyshots": "^3.0.0",
|
||||
"@storybook/addons": "^3.0.0",
|
||||
"@storybook/react": "^3.0.0",
|
||||
"react-scripts": "1.0.1"
|
||||
"react-scripts": "1.0.10"
|
||||
},
|
||||
"private": true
|
||||
}
|
||||
|
||||
@ -60,8 +60,12 @@ export default class Logger extends Component {
|
||||
<dl>
|
||||
{events.map(({ id, name, payload }) =>
|
||||
<div style={styles.item} key={id}>
|
||||
<dt><b>Event name:</b> {name}</dt>
|
||||
<dd><b>Event payload:</b> {json.plain(payload)}</dd>
|
||||
<dt>
|
||||
<b>Event name:</b> {name}
|
||||
</dt>
|
||||
<dd>
|
||||
<b>Event payload:</b> {json.plain(payload)}
|
||||
</dd>
|
||||
</div>
|
||||
)}
|
||||
</dl>
|
||||
|
||||
@ -74,14 +74,26 @@ storiesOf('Button', module)
|
||||
|
||||
return (
|
||||
<div style={style}>
|
||||
<p>{intro}</p>
|
||||
<p>My birthday is: {new Date(birthday).toLocaleDateString()}</p>
|
||||
<p>My wallet contains: ${dollars.toFixed(2)}</p>
|
||||
<p>
|
||||
{intro}
|
||||
</p>
|
||||
<p>
|
||||
My birthday is: {new Date(birthday).toLocaleDateString()}
|
||||
</p>
|
||||
<p>
|
||||
My wallet contains: ${dollars.toFixed(2)}
|
||||
</p>
|
||||
<p>In my backpack, I have:</p>
|
||||
<ul>
|
||||
{items.map(item => <li key={item}>{item}</li>)}
|
||||
{items.map(item =>
|
||||
<li key={item}>
|
||||
{item}
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
<p>{salutation}</p>
|
||||
<p>
|
||||
{salutation}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
|
||||
@ -12,7 +12,11 @@ import Welcome from './Welcome';
|
||||
storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
|
||||
|
||||
storiesOf('Button', module)
|
||||
.addDecorator(getStory => <CenterView>{getStory()}</CenterView>)
|
||||
.addDecorator(getStory =>
|
||||
<CenterView>
|
||||
{getStory()}
|
||||
</CenterView>
|
||||
)
|
||||
.add('with text', () =>
|
||||
<Button onPress={action('clicked-text')}>
|
||||
<Text>Hello Button</Text>
|
||||
|
||||
@ -23,5 +23,5 @@
|
||||
"examples/*"
|
||||
],
|
||||
"concurrency": 1,
|
||||
"version": "3.1.7"
|
||||
"version": "3.1.8"
|
||||
}
|
||||
|
||||
@ -14,7 +14,11 @@ import Welcome from './Welcome';
|
||||
storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
|
||||
|
||||
storiesOf('Button', module)
|
||||
.addDecorator(getStory => <CenterView>{getStory()}</CenterView>)
|
||||
.addDecorator(getStory =>
|
||||
<CenterView>
|
||||
{getStory()}
|
||||
</CenterView>
|
||||
)
|
||||
.add('with text', () =>
|
||||
<Button onPress={action('clicked-text')}>
|
||||
<Text>Hello Button</Text>
|
||||
|
||||
@ -12,7 +12,11 @@ import Welcome from './Welcome';
|
||||
storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
|
||||
|
||||
storiesOf('Button', module)
|
||||
.addDecorator(getStory => <CenterView>{getStory()}</CenterView>)
|
||||
.addDecorator(getStory =>
|
||||
<CenterView>
|
||||
{getStory()}
|
||||
</CenterView>
|
||||
)
|
||||
.add('with text', () =>
|
||||
<Button onPress={action('clicked-text')}>
|
||||
<Text>Hello Button</Text>
|
||||
|
||||
@ -40,16 +40,16 @@ class DownPanel extends Component {
|
||||
if (name === this.props.selectedPanel) {
|
||||
Object.assign(panelStyle, { flex: 1, display: 'flex' });
|
||||
}
|
||||
return <div key={name} style={panelStyle} role="tabpanel">{panel.render()}</div>;
|
||||
return (
|
||||
<div key={name} style={panelStyle} role="tabpanel">
|
||||
{panel.render()}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
renderEmpty() {
|
||||
return (
|
||||
<div style={style.empty}>
|
||||
no panels available
|
||||
</div>
|
||||
);
|
||||
return <div style={style.empty}>no panels available</div>;
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -58,8 +58,12 @@ class DownPanel extends Component {
|
||||
}
|
||||
return (
|
||||
<div style={style.wrapper}>
|
||||
<div style={style.tabbar} role="tablist">{this.renderTabs()}</div>
|
||||
<div style={style.content}>{this.renderPanels()}</div>
|
||||
<div style={style.tabbar} role="tablist">
|
||||
{this.renderTabs()}
|
||||
</div>
|
||||
<div style={style.content}>
|
||||
{this.renderPanels()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -204,7 +204,9 @@ class Layout extends React.Component {
|
||||
showLeftPanel,
|
||||
() =>
|
||||
<div style={leftPanelStyle(leftPanelOnTop)}>
|
||||
<div style={{ flexGrow: 1, height: '100%' }}>{leftPanel()}</div>
|
||||
<div style={{ flexGrow: 1, height: '100%' }}>
|
||||
{leftPanel()}
|
||||
</div>
|
||||
<USplit shift={5} split={storiesSplit} />
|
||||
</div>,
|
||||
() => <span />
|
||||
|
||||
@ -50,9 +50,13 @@ const linkStyle = {
|
||||
|
||||
const Header = ({ openShortcutsHelp, name, url }) =>
|
||||
<div style={wrapperStyle}>
|
||||
<button style={shortcutIconStyle} onClick={openShortcutsHelp}>⌘</button>
|
||||
<button style={shortcutIconStyle} onClick={openShortcutsHelp}>
|
||||
⌘
|
||||
</button>
|
||||
<a style={linkStyle} href={url} target="_blank" rel="noopener noreferrer">
|
||||
<h3 style={headingStyle}>{name}</h3>
|
||||
<h3 style={headingStyle}>
|
||||
{name}
|
||||
</h3>
|
||||
</a>
|
||||
</div>;
|
||||
|
||||
|
||||
@ -62,19 +62,31 @@ export function getShortcuts(platform) {
|
||||
export const Keys = ({ shortcutKeys }) => {
|
||||
// if we have only one key combination for a shortcut
|
||||
if (shortcutKeys.length === 1) {
|
||||
return <span><b style={commandStyle}>{shortcutKeys[0]}</b></span>;
|
||||
return (
|
||||
<span>
|
||||
<b style={commandStyle}>
|
||||
{shortcutKeys[0]}
|
||||
</b>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
// if we have multiple key combinations for a shortcut
|
||||
const keys = shortcutKeys.map((key, index, arr) =>
|
||||
<span key={key}>
|
||||
<b style={commandStyle}>{key}</b>
|
||||
<b style={commandStyle}>
|
||||
{key}
|
||||
</b>
|
||||
{/* add / & space if it is not a last key combination */}
|
||||
{arr.length - 1 !== index ? <span>/ </span> : ''}
|
||||
</span>
|
||||
);
|
||||
|
||||
return <span>{keys}</span>;
|
||||
return (
|
||||
<span>
|
||||
{keys}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
Keys.propTypes = {
|
||||
|
||||
14
package.json
14
package.json
@ -39,9 +39,9 @@
|
||||
"babel-preset-env": "^1.5.1",
|
||||
"babel-preset-react": "^6.24.1",
|
||||
"babel-preset-stage-0": "^6.24.1",
|
||||
"chalk": "^1.1.3",
|
||||
"chalk": "^2.0.1",
|
||||
"codecov": "^2.2.0",
|
||||
"danger": "^0.21.0",
|
||||
"danger": "^1.0.0",
|
||||
"enzyme": "^2.8.2",
|
||||
"eslint": "^3.19.0",
|
||||
"eslint-config-airbnb": "^15.0.1",
|
||||
@ -54,16 +54,14 @@
|
||||
"eslint-plugin-react": "^7.0.1",
|
||||
"gh-pages": "^1.0.0",
|
||||
"github-release-from-changelog": "^1.2.1",
|
||||
"husky": "^0.13.4",
|
||||
"husky": "^0.14.3",
|
||||
"jest": "^20.0.4",
|
||||
"jest-enzyme": "^3.2.0",
|
||||
"lerna": "2.0.0-rc.5",
|
||||
"lerna": "2.0.0",
|
||||
"lint-staged": "^4.0.0",
|
||||
"markdown-it-anchor": "^4.0.0",
|
||||
"markdownlint-cli": "^0.3.1",
|
||||
"nodemon": "^1.11.0",
|
||||
"npmc": "^5.0.3-canary.12",
|
||||
"prettier": "^1.3.1",
|
||||
"npmc": "^5.1.0-canary.2",
|
||||
"prettier": "^1.5.2",
|
||||
"react": "^15.5.4",
|
||||
"react-dom": "^15.5.4",
|
||||
"react-test-renderer": "^15.5.4",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user