mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 17:31:09 +08:00
Merge branch 'master' into codemod
This commit is contained in:
Norbert de Langen
GitHub
commit
54c7dc959d
@ -67,11 +67,15 @@ jobs:
|
||||
- run:
|
||||
name: "Build react kitchen-sink"
|
||||
command: |
|
||||
cd examples/cra-kitchen-sink && npm run build-storybook
|
||||
cd examples/cra-kitchen-sink
|
||||
yarn build-storybook
|
||||
yarn storybook -- --smoke-test
|
||||
- run:
|
||||
name: "Build vue kitchen-sink"
|
||||
command: |
|
||||
cd examples/vue-kitchen-sink && npm run build-storybook
|
||||
cd examples/vue-kitchen-sink
|
||||
yarn build-storybook
|
||||
yarn storybook -- --smoke-test
|
||||
example-react-native:
|
||||
<<: *defaults
|
||||
steps:
|
||||
@ -87,11 +91,17 @@ jobs:
|
||||
- run:
|
||||
name: "Bootstrapping packages"
|
||||
command: |
|
||||
npm run bootstrap -- --core --reactnative
|
||||
npm run bootstrap -- --core --reactnative --reactnativeapp
|
||||
- run:
|
||||
name: "Running react-native"
|
||||
name: "Running React-Native example"
|
||||
command: |
|
||||
echo "TODO"
|
||||
cd examples/react-native-vanilla
|
||||
yarn storybook -- --smoke-test
|
||||
- run:
|
||||
name: "Running React-Native-App example"
|
||||
command: |
|
||||
cd examples/crna-kitchen-sink
|
||||
yarn storybook -- --smoke-test
|
||||
docs:
|
||||
<<: *defaults
|
||||
steps:
|
||||
|
||||
@ -72,7 +72,7 @@ module.exports = {
|
||||
'jsx-a11y/accessible-emoji': ignore,
|
||||
'jsx-a11y/href-no-hash': ignore,
|
||||
'jsx-a11y/label-has-for': ignore,
|
||||
'jsx-a11y/anchor-is-valid': ['warn', { aspects: ['invalidHref'] }],
|
||||
'jsx-a11y/anchor-is-valid': [warn, { aspects: ['invalidHref'] }],
|
||||
'react/no-unescaped-entities': ignore,
|
||||
},
|
||||
};
|
||||
|
||||
20
CHANGELOG.md
20
CHANGELOG.md
@ -1,3 +1,23 @@
|
||||
# 3.2.9
|
||||
|
||||
2017-August-26
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- Fix getstorybook CLI for React Native projects [#1741](https://github.com/storybooks/storybook/pull/1741)
|
||||
|
||||
#### Documentation
|
||||
|
||||
- Improve `addon-info` README options documentation [#1732](https://github.com/storybooks/storybook/pull/1732)
|
||||
|
||||
#### Maintenance
|
||||
|
||||
- ADD a CLI for bootstrapping [#1216](https://github.com/storybooks/storybook/pull/1216)
|
||||
|
||||
#### Dependency Upgrades
|
||||
|
||||
- Update lerna to the latest version 🚀 [#1727](https://github.com/storybooks/storybook/pull/1727)
|
||||
|
||||
# 3.2.8
|
||||
|
||||
2017-August-23
|
||||
|
||||
@ -37,7 +37,7 @@ Here's an example of using Notes and Info in 3.2 with the new API.
|
||||
storiesOf('composition', module)
|
||||
.add('new addons api',
|
||||
withInfo('see Notes panel for composition info')(
|
||||
withNotes({ notes: 'Composition: Info(Notes())' })(context =>
|
||||
withNotes({ text: 'Composition: Info(Notes())' })(context =>
|
||||
<MyComponent name={context.story} />
|
||||
)
|
||||
)
|
||||
|
||||
23
__mocks__/fs.js
Normal file
23
__mocks__/fs.js
Normal file
@ -0,0 +1,23 @@
|
||||
const fs = jest.genMockFromModule('fs');
|
||||
|
||||
// This is a custom function that our tests can use during setup to specify
|
||||
// what the files on the "mock" filesystem should look like when any of the
|
||||
// `fs` APIs are used.
|
||||
let mockFiles = Object.create(null);
|
||||
|
||||
// eslint-disable-next-line no-underscore-dangle
|
||||
function __setMockFiles(newMockFiles) {
|
||||
mockFiles = newMockFiles;
|
||||
}
|
||||
|
||||
// A custom version of `readdirSync` that reads from the special mocked out
|
||||
// file list set via __setMockFiles
|
||||
const readFileSync = (filePath = '') => mockFiles[filePath];
|
||||
const existsSync = filePath => !!mockFiles[filePath];
|
||||
|
||||
// eslint-disable-next-line no-underscore-dangle
|
||||
fs.__setMockFiles = __setMockFiles;
|
||||
fs.readFileSync = readFileSync;
|
||||
fs.existsSync = existsSync;
|
||||
|
||||
module.exports = fs;
|
||||
@ -9,16 +9,10 @@ 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}>
|
||||
{action.count > 1 && counter}
|
||||
</div>
|
||||
<div style={style.countwrap}>{action.count > 1 && counter}</div>
|
||||
<div style={style.inspector}>
|
||||
<Inspector
|
||||
showNonenumerable
|
||||
@ -33,9 +27,7 @@ class ActionLogger extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div style={style.wrapper}>
|
||||
<pre style={style.actions}>
|
||||
{this.getActionData()}
|
||||
</pre>
|
||||
<pre style={style.actions}>{this.getActionData()}</pre>
|
||||
<button style={style.button} onClick={this.props.onClear}>
|
||||
CLEAR
|
||||
</button>
|
||||
|
||||
4
addons/centered/src/react.js
vendored
4
addons/centered/src/react.js
vendored
@ -19,9 +19,7 @@ const innerStyle = {
|
||||
export default function(storyFn) {
|
||||
return (
|
||||
<div style={style}>
|
||||
<div style={innerStyle}>
|
||||
{storyFn()}
|
||||
</div>
|
||||
<div style={innerStyle}>{storyFn()}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -10,10 +10,11 @@ const buttonStyles = {
|
||||
padding: '3px 10px',
|
||||
};
|
||||
|
||||
const Button = ({ children, onClick, style = {} }) =>
|
||||
const Button = ({ children, onClick, style = {} }) => (
|
||||
<button style={{ ...buttonStyles, ...style }} onClick={onClick}>
|
||||
{children}
|
||||
</button>;
|
||||
</button>
|
||||
);
|
||||
|
||||
Button.defaultProps = {
|
||||
onClick: () => {},
|
||||
|
||||
@ -59,16 +59,10 @@ 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>
|
||||
|
||||
@ -37,14 +37,14 @@ export default class CommentList extends Component {
|
||||
}}
|
||||
style={style.wrapper}
|
||||
>
|
||||
{comments.map(comment =>
|
||||
{comments.map(comment => (
|
||||
<CommentItem
|
||||
key={comment.id}
|
||||
comment={comment}
|
||||
ownComment={comment.userId === (this.props.user && this.props.user.id)}
|
||||
deleteComment={() => this.props.deleteComment(comment.id)}
|
||||
/>
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -79,10 +79,12 @@ export default class DataStore {
|
||||
// TODO: send a null and handle the loading part in the UI side.
|
||||
this.eventStore.emit('loading', true);
|
||||
this.fireComments([]);
|
||||
this.loadUsers().then(() => this.loadComments()).then(() => {
|
||||
this.eventStore.emit('loading', false);
|
||||
return Promise.resolve(null);
|
||||
});
|
||||
this.loadUsers()
|
||||
.then(() => this.loadComments())
|
||||
.then(() => {
|
||||
this.eventStore.emit('loading', false);
|
||||
return Promise.resolve(null);
|
||||
});
|
||||
|
||||
return this.currentStory;
|
||||
}
|
||||
@ -98,15 +100,18 @@ export default class DataStore {
|
||||
if (!info) {
|
||||
return null;
|
||||
}
|
||||
return this.db.getCollection('users').get(query, options).then(users => {
|
||||
this.users = users.reduce((newUsers, user) => {
|
||||
const usersObj = {
|
||||
...newUsers,
|
||||
};
|
||||
usersObj[user.id] = user;
|
||||
return usersObj;
|
||||
}, {});
|
||||
});
|
||||
return this.db
|
||||
.getCollection('users')
|
||||
.get(query, options)
|
||||
.then(users => {
|
||||
this.users = users.reduce((newUsers, user) => {
|
||||
const usersObj = {
|
||||
...newUsers,
|
||||
};
|
||||
usersObj[user.id] = user;
|
||||
return usersObj;
|
||||
}, {});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@ -118,15 +123,18 @@ export default class DataStore {
|
||||
if (!info) {
|
||||
return null;
|
||||
}
|
||||
return this.db.getCollection('comments').get(query, options).then(comments => {
|
||||
// add to cache
|
||||
this.addToCache(currentStory, comments);
|
||||
return this.db
|
||||
.getCollection('comments')
|
||||
.get(query, options)
|
||||
.then(comments => {
|
||||
// add to cache
|
||||
this.addToCache(currentStory, comments);
|
||||
|
||||
// set comments only if we are on the relavant story
|
||||
if (deepEquals(currentStory, this.currentStory)) {
|
||||
this.fireComments(comments);
|
||||
}
|
||||
});
|
||||
// set comments only if we are on the relavant story
|
||||
if (deepEquals(currentStory, this.currentStory)) {
|
||||
this.fireComments(comments);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -58,14 +58,14 @@ storiesOf('Button', module)
|
||||
storiesOf('Components', module)
|
||||
.add('CommentForm', () => <CommentForm addComment={action('addComment')} />)
|
||||
.add('CommentList - No Comments', () => <CommentList comments={[]} />)
|
||||
.add('CommentList - with comments', () =>
|
||||
.add('CommentList - with comments', () => (
|
||||
<CommentList user={userObj} comments={commentsList} deleteComment={action('deleteComment')} />
|
||||
)
|
||||
))
|
||||
.add('CommentPanel - not loggedIn', () => <CommentsPanel />)
|
||||
.add('CommentPanel - app not available', () =>
|
||||
.add('CommentPanel - app not available', () => (
|
||||
<CommentsPanel user={userObj} appNotAvailable={{}} />
|
||||
)
|
||||
.add('CommentPanel - loggedIn with no comments', () =>
|
||||
))
|
||||
.add('CommentPanel - loggedIn with no comments', () => (
|
||||
<CommentsPanel
|
||||
user={userObj}
|
||||
loading={false}
|
||||
@ -73,8 +73,8 @@ storiesOf('Components', module)
|
||||
addComment={action('addComment')}
|
||||
deleteComment={action('deleteComment')}
|
||||
/>
|
||||
)
|
||||
.add('CommentPanel - loggedIn with has comments', () =>
|
||||
))
|
||||
.add('CommentPanel - loggedIn with has comments', () => (
|
||||
<CommentsPanel
|
||||
user={userObj}
|
||||
loading={false}
|
||||
@ -82,4 +82,4 @@ storiesOf('Components', module)
|
||||
addComment={action('addComment')}
|
||||
deleteComment={action('deleteComment')}
|
||||
/>
|
||||
);
|
||||
));
|
||||
|
||||
@ -156,17 +156,15 @@ export default class Item extends Component {
|
||||
value={this.state.payloadString}
|
||||
onChange={this.onChange}
|
||||
/>
|
||||
{isTextAreaShowed
|
||||
? <button style={styles.button} onClick={this.onToggleEditClick} title="Close editing">
|
||||
❌
|
||||
</button>
|
||||
: <button
|
||||
style={styles.button}
|
||||
onClick={this.onToggleEditClick}
|
||||
title="Edit event payload"
|
||||
>
|
||||
✏️
|
||||
</button>}
|
||||
{isTextAreaShowed ? (
|
||||
<button style={styles.button} onClick={this.onToggleEditClick} title="Close editing">
|
||||
❌
|
||||
</button>
|
||||
) : (
|
||||
<button style={styles.button} onClick={this.onToggleEditClick} title="Edit event payload">
|
||||
✏️
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -44,6 +44,9 @@ const schema = new graphql.GraphQLSchema({
|
||||
}),
|
||||
});
|
||||
|
||||
express().use(cors()).use('/graphql', graphqlHTTP({ schema, pretty: true })).listen(3000);
|
||||
express()
|
||||
.use(cors())
|
||||
.use('/graphql', graphqlHTTP({ schema, pretty: true }))
|
||||
.listen(3000);
|
||||
|
||||
console.log('GraphQL server running on http://localhost:3000/graphql');
|
||||
|
||||
@ -3,11 +3,7 @@ import PropTypes from 'prop-types';
|
||||
import style from './style';
|
||||
|
||||
export default function FullScreen(props) {
|
||||
return (
|
||||
<div style={style.wrapper}>
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
return <div style={style.wrapper}>{props.children}</div>;
|
||||
}
|
||||
|
||||
FullScreen.defaultProps = { children: null };
|
||||
|
||||
@ -28,9 +28,10 @@ export function setupGraphiQL(config) {
|
||||
return (_query, variables = '{}') => {
|
||||
const query = reIndentQuery(_query);
|
||||
const fetcher = config.fetcher || getDefautlFetcher(config.url);
|
||||
return () =>
|
||||
return () => (
|
||||
<FullScreen>
|
||||
<GraphiQL query={query} variables={variables} fetcher={fetcher} />
|
||||
</FullScreen>;
|
||||
</FullScreen>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-info",
|
||||
"version": "3.2.7",
|
||||
"version": "3.2.9",
|
||||
"description": "A Storybook addon to show additional information for your stories.",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
|
||||
@ -66,9 +66,7 @@ export default function Node(props) {
|
||||
if (!name) {
|
||||
return (
|
||||
<div style={containerStyle}>
|
||||
<span style={tagStyle}>
|
||||
{text}
|
||||
</span>
|
||||
<span style={tagStyle}>{text}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -77,9 +75,7 @@ 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
|
||||
@ -100,9 +96,7 @@ 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}
|
||||
@ -112,7 +106,7 @@ export default function Node(props) {
|
||||
/>
|
||||
<span style={tagStyle}>></span>
|
||||
</div>
|
||||
{React.Children.map(children, childElement =>
|
||||
{React.Children.map(children, childElement => (
|
||||
<Node
|
||||
node={childElement}
|
||||
depth={depth + 1}
|
||||
@ -121,11 +115,9 @@ export default function Node(props) {
|
||||
maxPropArrayLength={maxPropArrayLength}
|
||||
maxPropStringLength={maxPropStringLength}
|
||||
/>
|
||||
)}
|
||||
))}
|
||||
<div style={containerStyleCopy}>
|
||||
<span style={tagStyle}>
|
||||
</{name}>
|
||||
</span>
|
||||
<span style={tagStyle}></{name}></span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -148,27 +148,21 @@ export default function PropTable(props) {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{array.map(row =>
|
||||
{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}
|
||||
{row.defaultValue === undefined ? (
|
||||
'-'
|
||||
) : (
|
||||
<PropVal val={row.defaultValue} {...propValProps} />
|
||||
)}
|
||||
</td>
|
||||
<td>{row.description}</td>
|
||||
</tr>
|
||||
)}
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
|
||||
@ -48,22 +48,14 @@ function previewArray(val, maxPropArrayLength) {
|
||||
} else {
|
||||
delete items[`c${val.length - 1}`];
|
||||
}
|
||||
return (
|
||||
<span style={valueStyles.array}>
|
||||
[{createFragment(items)}]
|
||||
</span>
|
||||
);
|
||||
return <span style={valueStyles.array}>[{createFragment(items)}]</span>;
|
||||
}
|
||||
|
||||
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}`] = ', ';
|
||||
@ -89,31 +81,19 @@ 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') {
|
||||
@ -130,11 +110,7 @@ export default function PropVal(props) {
|
||||
|
||||
if (!braceWrap) return content;
|
||||
|
||||
return (
|
||||
<span>
|
||||
{content}
|
||||
</span>
|
||||
);
|
||||
return <span>{content}</span>;
|
||||
}
|
||||
|
||||
PropVal.defaultProps = {
|
||||
|
||||
@ -32,16 +32,16 @@ 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') &&
|
||||
{(!nodeProps[name] || typeof nodeProps[name] !== 'boolean') && (
|
||||
<span>
|
||||
=
|
||||
<span style={propValueStyle}>
|
||||
@ -52,18 +52,15 @@ export default function Props(props) {
|
||||
maxPropStringLength={maxPropStringLength}
|
||||
/>
|
||||
</span>
|
||||
</span>}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{i === names.length - 1 && (breakIntoNewLines ? <br /> : endingSpace)}
|
||||
</span>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<span>
|
||||
{items}
|
||||
</span>
|
||||
);
|
||||
return <span>{items}</span>;
|
||||
}
|
||||
|
||||
Props.defaultProps = {
|
||||
|
||||
@ -116,11 +116,7 @@ export default class Story extends React.Component {
|
||||
}
|
||||
|
||||
_renderStory() {
|
||||
return (
|
||||
<div style={this.state.stylesheet.infoStory}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
);
|
||||
return <div style={this.state.stylesheet.infoStory}>{this.props.children}</div>;
|
||||
}
|
||||
|
||||
_renderInline() {
|
||||
@ -144,12 +140,11 @@ export default class Story extends React.Component {
|
||||
const infoHeader = this._getInfoHeader();
|
||||
|
||||
return (
|
||||
infoHeader &&
|
||||
<div style={this.state.stylesheet.infoPage}>
|
||||
<div style={this.state.stylesheet.infoBody}>
|
||||
{infoHeader}
|
||||
infoHeader && (
|
||||
<div style={this.state.stylesheet.infoPage}>
|
||||
<div style={this.state.stylesheet.infoBody}>{infoHeader}</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -176,9 +171,7 @@ export default class Story extends React.Component {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={this.state.stylesheet.children}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
<div style={this.state.stylesheet.children}>{this.props.children}</div>
|
||||
<a style={linkStyle} onClick={openOverlay} role="button" tabIndex="0">
|
||||
Show Info
|
||||
</a>
|
||||
@ -207,12 +200,8 @@ 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>
|
||||
);
|
||||
}
|
||||
@ -240,11 +229,7 @@ export default class Story extends React.Component {
|
||||
padding = matches[0].length;
|
||||
}
|
||||
const source = lines.map(s => s.slice(padding)).join('\n');
|
||||
return (
|
||||
<div style={this.state.stylesheet.infoContent}>
|
||||
{this.marksy(source).tree}
|
||||
</div>
|
||||
);
|
||||
return <div style={this.state.stylesheet.infoContent}>{this.marksy(source).tree}</div>;
|
||||
}
|
||||
|
||||
_getComponentDescription() {
|
||||
@ -253,11 +238,7 @@ export default class Story extends React.Component {
|
||||
if (Object.keys(STORYBOOK_REACT_CLASSES).length) {
|
||||
Object.keys(STORYBOOK_REACT_CLASSES).forEach(key => {
|
||||
if (STORYBOOK_REACT_CLASSES[key].name === this.props.context.kind) {
|
||||
retDiv = (
|
||||
<div>
|
||||
{STORYBOOK_REACT_CLASSES[key].docgenInfo.description}
|
||||
</div>
|
||||
);
|
||||
retDiv = <div>{STORYBOOK_REACT_CLASSES[key].docgenInfo.description}</div>;
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -281,7 +262,7 @@ export default class Story extends React.Component {
|
||||
<div>
|
||||
<h1 style={this.state.stylesheet.source.h1}>Story Source</h1>
|
||||
<Pre>
|
||||
{React.Children.map(this.props.children, (root, idx) =>
|
||||
{React.Children.map(this.props.children, (root, idx) => (
|
||||
<Node
|
||||
key={idx}
|
||||
node={root}
|
||||
@ -291,7 +272,7 @@ export default class Story extends React.Component {
|
||||
maxPropArrayLength={maxPropArrayLength}
|
||||
maxPropStringLength={maxPropStringLength}
|
||||
/>
|
||||
)}
|
||||
))}
|
||||
</Pre>
|
||||
</div>
|
||||
);
|
||||
@ -346,7 +327,7 @@ export default class Story extends React.Component {
|
||||
array.sort((a, b) => (a.displayName || a.name) > (b.displayName || b.name));
|
||||
|
||||
const { maxPropObjectKeys, maxPropArrayLength, maxPropStringLength } = this.props;
|
||||
const propTables = array.map(type =>
|
||||
const propTables = array.map(type => (
|
||||
<div key={type.displayName || type.name}>
|
||||
<h2 style={this.state.stylesheet.propTableHead}>
|
||||
"{type.displayName || type.name}" Component
|
||||
@ -358,7 +339,7 @@ export default class Story extends React.Component {
|
||||
maxPropStringLength={maxPropStringLength}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
));
|
||||
|
||||
if (!propTables || propTables.length === 0) {
|
||||
return null;
|
||||
|
||||
@ -61,11 +61,7 @@ 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 };
|
||||
@ -78,11 +74,7 @@ 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 };
|
||||
|
||||
@ -10,11 +10,7 @@ export function P(props) {
|
||||
...baseFonts,
|
||||
fontSize: '15px',
|
||||
};
|
||||
return (
|
||||
<p style={style}>
|
||||
{props.children}
|
||||
</p>
|
||||
);
|
||||
return <p style={style}>{props.children}</p>;
|
||||
}
|
||||
|
||||
P.defaultProps = defaultProps;
|
||||
@ -25,11 +21,7 @@ export function LI(props) {
|
||||
...baseFonts,
|
||||
fontSize: '15px',
|
||||
};
|
||||
return (
|
||||
<li style={style}>
|
||||
{props.children}
|
||||
</li>
|
||||
);
|
||||
return <li style={style}>{props.children}</li>;
|
||||
}
|
||||
|
||||
LI.defaultProps = defaultProps;
|
||||
@ -40,11 +32,7 @@ export function UL(props) {
|
||||
...baseFonts,
|
||||
fontSize: '15px',
|
||||
};
|
||||
return (
|
||||
<ul style={style}>
|
||||
{props.children}
|
||||
</ul>
|
||||
);
|
||||
return <ul style={style}>{props.children}</ul>;
|
||||
}
|
||||
|
||||
UL.defaultProps = defaultProps;
|
||||
|
||||
@ -60,11 +60,7 @@ function addInfo(storyFn, context, infoOptions) {
|
||||
maxPropsIntoLine: options.maxPropsIntoLine,
|
||||
maxPropStringLength: options.maxPropStringLength,
|
||||
};
|
||||
return (
|
||||
<Story {...props}>
|
||||
{storyFn(context)}
|
||||
</Story>
|
||||
);
|
||||
return <Story {...props}>{storyFn(context)}</Story>;
|
||||
}
|
||||
|
||||
export const withInfo = textOrOptions => {
|
||||
|
||||
@ -27,7 +27,7 @@ const testContext = { kind: 'addon_info', story: 'jest_test' };
|
||||
const testOptions = { propTables: false };
|
||||
|
||||
describe('addon Info', () => {
|
||||
const story = context =>
|
||||
const story = context => (
|
||||
<div>
|
||||
It's a {context.story} story:
|
||||
<TestComponent
|
||||
@ -38,7 +38,8 @@ describe('addon Info', () => {
|
||||
string={'seven'}
|
||||
bool
|
||||
/>
|
||||
</div>;
|
||||
</div>
|
||||
);
|
||||
const api = {
|
||||
add: (name, fn) => fn(testContext),
|
||||
};
|
||||
|
||||
@ -135,7 +135,9 @@ export default class Panel extends React.Component {
|
||||
|
||||
render() {
|
||||
const { knobs } = this.state;
|
||||
const knobsArray = Object.keys(knobs).filter(key => knobs[key].used).map(key => knobs[key]);
|
||||
const knobsArray = Object.keys(knobs)
|
||||
.filter(key => knobs[key].used)
|
||||
.map(key => knobs[key]);
|
||||
|
||||
if (knobsArray.length === 0) {
|
||||
return <div style={styles.noKnobs}>NO KNOBS</div>;
|
||||
|
||||
@ -76,7 +76,7 @@ class ColorType extends React.Component {
|
||||
</div>
|
||||
{conditionalRender(
|
||||
displayColorPicker,
|
||||
() =>
|
||||
() => (
|
||||
<div
|
||||
style={styles.popover}
|
||||
ref={e => {
|
||||
@ -84,7 +84,8 @@ class ColorType extends React.Component {
|
||||
}}
|
||||
>
|
||||
<SketchPicker color={knob.value} onChange={color => onChange(color.hex)} />
|
||||
</div>,
|
||||
</div>
|
||||
),
|
||||
() => null
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -21,7 +21,7 @@ const customStyle = `
|
||||
insertCss(style);
|
||||
insertCss(customStyle);
|
||||
|
||||
const DateType = ({ knob, onChange }) =>
|
||||
const DateType = ({ knob, onChange }) => (
|
||||
<div>
|
||||
<Datetime
|
||||
id={knob.name}
|
||||
@ -29,7 +29,8 @@ const DateType = ({ knob, onChange }) =>
|
||||
type="date"
|
||||
onChange={date => onChange(date.valueOf())}
|
||||
/>
|
||||
</div>;
|
||||
</div>
|
||||
);
|
||||
|
||||
DateType.defaultProps = {
|
||||
knob: {},
|
||||
|
||||
@ -24,11 +24,7 @@ class SelectType extends React.Component {
|
||||
value: key,
|
||||
};
|
||||
|
||||
return (
|
||||
<option {...opts}>
|
||||
{val}
|
||||
</option>
|
||||
);
|
||||
return <option {...opts}>{val}</option>;
|
||||
}
|
||||
_options(values) {
|
||||
let data = [];
|
||||
|
||||
@ -36,12 +36,14 @@ Have a look at the linkTo function:
|
||||
import { linkTo } from '@storybook/addon-links'
|
||||
|
||||
linkTo('Toggle', 'off')
|
||||
linkTo(() => 'Toggle', () => 'off')
|
||||
linkTo('Toggle') // Links to the first story in the 'Toggle' kind
|
||||
```
|
||||
|
||||
With that, you can link an event in a component to any story in the Storybook.
|
||||
|
||||
- First parameter is the the story kind name (what you named with `storiesOf`).
|
||||
- Second parameter is the story name (what you named with `.add`).
|
||||
- Second (optional) parameter is the story name (what you named with `.add`). If the second parameter is omitted, the link will point to the first story in the given kind.
|
||||
|
||||
> You can also pass a function instead for any of above parameter. That function accepts arguments emitted by the event and it should return a string. <br/>
|
||||
> Have a look at [PR86](https://github.com/kadirahq/react-storybook/pull/86) for more information.
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
"@storybook/addons": "^3.2.6",
|
||||
"@storybook/channels": "^3.2.0",
|
||||
"@storybook/react": "^3.2.8",
|
||||
"babel-cli": "^6.24.1",
|
||||
"babel-cli": "^6.26.0",
|
||||
"babel-plugin-transform-runtime": "^6.23.0",
|
||||
"babel-preset-env": "^1.6.0",
|
||||
"babel-preset-react": "^6.24.1",
|
||||
@ -34,7 +34,7 @@
|
||||
"@storybook/addons": "^3.2.6",
|
||||
"@storybook/channels": "^3.2.0",
|
||||
"@storybook/react": "^3.2.8",
|
||||
"babel-core": "^6.25.0",
|
||||
"babel-core": "^6.26.0",
|
||||
"react": "*",
|
||||
"react-test-renderer": "*"
|
||||
}
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
"@storybook/channel-websocket": "^3.2.0",
|
||||
"@storybook/ui": "^3.2.7",
|
||||
"autoprefixer": "^7.1.1",
|
||||
"babel-core": "^6.25.0",
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-loader": "^7.0.0",
|
||||
"babel-plugin-syntax-async-functions": "^6.13.0",
|
||||
"babel-plugin-syntax-trailing-function-commas": "^6.22.0",
|
||||
@ -39,14 +39,14 @@
|
||||
"babel-plugin-transform-react-constant-elements": "^6.23.0",
|
||||
"babel-plugin-transform-regenerator": "^6.24.1",
|
||||
"babel-plugin-transform-runtime": "^6.23.0",
|
||||
"babel-polyfill": "^6.23.0",
|
||||
"babel-polyfill": "^6.26.0",
|
||||
"babel-preset-env": "^1.6.0",
|
||||
"babel-preset-minify": "^0.2.0",
|
||||
"babel-preset-react": "^6.24.1",
|
||||
"babel-preset-stage-0": "^6.24.1",
|
||||
"babel-runtime": "^6.23.0",
|
||||
"case-sensitive-paths-webpack-plugin": "^2.0.0",
|
||||
"commander": "^2.9.0",
|
||||
"commander": "^2.11.0",
|
||||
"css-loader": "^0.28.1",
|
||||
"events": "^1.1.1",
|
||||
"express": "^4.15.3",
|
||||
@ -70,7 +70,7 @@
|
||||
"ws": "^3.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-cli": "^6.24.1",
|
||||
"babel-cli": "^6.26.0",
|
||||
"react": "^15.6.1",
|
||||
"react-dom": "^15.6.1",
|
||||
"react-native": "^0.43.3"
|
||||
|
||||
4
app/react-native/src/bin/storybook-start.js
vendored
4
app/react-native/src/bin/storybook-start.js
vendored
@ -15,6 +15,7 @@ program
|
||||
.option('-r, --reset-cache', 'reset react native packager')
|
||||
.option('--skip-packager', 'run only storybook server')
|
||||
.option('-i, --manual-id', 'allow multiple users to work with same storybook')
|
||||
.option('--smoke-test', 'Exit after successful start')
|
||||
.parse(process.argv);
|
||||
|
||||
const projectDir = path.resolve();
|
||||
@ -38,6 +39,9 @@ server.listen(...listenAddr, err => {
|
||||
}
|
||||
const address = `http://${program.host || 'localhost'}:${program.port}/`;
|
||||
console.info(`\nReact Native Storybook started on => ${address}\n`); // eslint-disable-line no-console
|
||||
if (program.smokeTest) {
|
||||
process.exit(0);
|
||||
}
|
||||
});
|
||||
|
||||
if (!program.skipPackager) {
|
||||
|
||||
@ -25,7 +25,7 @@ const styles = {
|
||||
},
|
||||
};
|
||||
|
||||
const PreviewHelp = () =>
|
||||
const PreviewHelp = () => (
|
||||
<div style={styles.main}>
|
||||
<h1>Welcome to storybook</h1>
|
||||
<p>This is a UI component dev environment for your app.</p>
|
||||
@ -54,6 +54,7 @@ const PreviewHelp = () =>
|
||||
<div style={styles.codeBlock}>
|
||||
<pre style={styles.instructionsCode}>react-native run-<platform></pre>
|
||||
</div>
|
||||
</div>;
|
||||
</div>
|
||||
);
|
||||
|
||||
export { PreviewHelp as default };
|
||||
|
||||
@ -4,24 +4,22 @@ import { ListView, View, Text, TouchableOpacity } from 'react-native';
|
||||
import { MinMaxView } from 'react-native-compat';
|
||||
import style from './style';
|
||||
|
||||
const SectionHeader = ({ title, selected }) =>
|
||||
const SectionHeader = ({ title, selected }) => (
|
||||
<View key={title} style={style.header}>
|
||||
<Text style={[style.headerText, selected && style.headerTextSelected]}>
|
||||
{title}
|
||||
</Text>
|
||||
</View>;
|
||||
<Text style={[style.headerText, selected && style.headerTextSelected]}>{title}</Text>
|
||||
</View>
|
||||
);
|
||||
|
||||
SectionHeader.propTypes = {
|
||||
title: PropTypes.string.isRequired,
|
||||
selected: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
const ListItem = ({ title, selected, onPress }) =>
|
||||
const ListItem = ({ title, selected, onPress }) => (
|
||||
<TouchableOpacity key={title} style={style.item} onPress={onPress}>
|
||||
<Text style={[style.itemText, selected && style.itemTextSelected]}>
|
||||
{title}
|
||||
</Text>
|
||||
</TouchableOpacity>;
|
||||
<Text style={[style.itemText, selected && style.itemTextSelected]}>{title}</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
|
||||
ListItem.propTypes = {
|
||||
title: PropTypes.string.isRequired,
|
||||
@ -91,19 +89,18 @@ export default class StoryListView extends Component {
|
||||
<MinMaxView maxWidth={250}>
|
||||
<ListView
|
||||
style={style.list}
|
||||
renderRow={item =>
|
||||
renderRow={item => (
|
||||
<ListItem
|
||||
title={item.name}
|
||||
selected={
|
||||
item.kind === this.props.selectedKind && item.name === this.props.selectedStory
|
||||
}
|
||||
onPress={() => this.changeStory(item.kind, item.name)}
|
||||
/>}
|
||||
renderSectionHeader={(sectionData, sectionName) =>
|
||||
<SectionHeader
|
||||
title={sectionName}
|
||||
selected={sectionName === this.props.selectedKind}
|
||||
/>}
|
||||
/>
|
||||
)}
|
||||
renderSectionHeader={(sectionData, sectionName) => (
|
||||
<SectionHeader title={sectionName} selected={sectionName === this.props.selectedKind} />
|
||||
)}
|
||||
dataSource={this.state.dataSource}
|
||||
stickySectionHeadersEnabled={false}
|
||||
/>
|
||||
|
||||
@ -24,15 +24,17 @@ export default class StoryView extends Component {
|
||||
renderHelp() {
|
||||
return (
|
||||
<View style={style.help}>
|
||||
{this.props.url
|
||||
? <Text>
|
||||
Please open the Storybook UI (
|
||||
{this.props.url}
|
||||
) with a web browser and select a story for preview.
|
||||
</Text>
|
||||
: <Text>
|
||||
Please open the Storybook UI with a web browser and select a story for preview.
|
||||
</Text>}
|
||||
{this.props.url ? (
|
||||
<Text>
|
||||
Please open the Storybook UI (
|
||||
{this.props.url}
|
||||
) with a web browser and select a story for preview.
|
||||
</Text>
|
||||
) : (
|
||||
<Text>
|
||||
Please open the Storybook UI with a web browser and select a story for preview.
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
8
app/react-native/src/preview/index.js
vendored
8
app/react-native/src/preview/index.js
vendored
@ -85,9 +85,11 @@ export default class Preview {
|
||||
this._sendGetCurrentStory();
|
||||
|
||||
// finally return the preview component
|
||||
return params.onDeviceUI
|
||||
? <OnDeviceUI stories={this._stories} events={this._events} url={webUrl} />
|
||||
: <StoryView url={webUrl} events={this._events} />;
|
||||
return params.onDeviceUI ? (
|
||||
<OnDeviceUI stories={this._stories} events={this._events} url={webUrl} />
|
||||
) : (
|
||||
<StoryView url={webUrl} events={this._events} />
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
"@storybook/ui": "^3.2.7",
|
||||
"airbnb-js-shims": "^1.1.1",
|
||||
"autoprefixer": "^7.1.1",
|
||||
"babel-core": "^6.25.0",
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-loader": "^7.0.0",
|
||||
"babel-plugin-react-docgen": "^1.6.0",
|
||||
"babel-preset-env": "^1.6.0",
|
||||
@ -39,8 +39,8 @@
|
||||
"babel-preset-stage-0": "^6.24.1",
|
||||
"babel-runtime": "^6.23.0",
|
||||
"case-sensitive-paths-webpack-plugin": "^2.0.0",
|
||||
"chalk": "^2.0.1",
|
||||
"commander": "^2.9.0",
|
||||
"chalk": "^2.1.0",
|
||||
"commander": "^2.11.0",
|
||||
"common-tags": "^1.4.0",
|
||||
"configstore": "^3.1.0",
|
||||
"css-loader": "^0.28.1",
|
||||
@ -73,9 +73,8 @@
|
||||
"webpack-hot-middleware": "^2.18.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-cli": "^6.24.1",
|
||||
"mock-fs": "^4.3.0",
|
||||
"nodemon": "^1.11.0",
|
||||
"babel-cli": "^6.26.0",
|
||||
"nodemon": "^1.12.0",
|
||||
"react": "^15.6.1",
|
||||
"react-dom": "^15.6.1"
|
||||
},
|
||||
|
||||
@ -55,7 +55,7 @@ describe('preview.client_api', () => {
|
||||
},
|
||||
});
|
||||
|
||||
api.storiesOf('none').aa();
|
||||
api.storiesOf('none', module).aa();
|
||||
expect(data).toBe('foo');
|
||||
});
|
||||
|
||||
@ -75,7 +75,10 @@ describe('preview.client_api', () => {
|
||||
},
|
||||
});
|
||||
|
||||
api.storiesOf('none').aa().bb();
|
||||
api
|
||||
.storiesOf('none', module)
|
||||
.aa()
|
||||
.bb();
|
||||
expect(data).toEqual(['foo', 'bar']);
|
||||
});
|
||||
|
||||
@ -89,7 +92,7 @@ describe('preview.client_api', () => {
|
||||
},
|
||||
});
|
||||
|
||||
api.storiesOf('none').aa();
|
||||
api.storiesOf('none', module).aa();
|
||||
expect(data).toBe('function');
|
||||
});
|
||||
|
||||
@ -109,7 +112,7 @@ describe('preview.client_api', () => {
|
||||
},
|
||||
});
|
||||
|
||||
api.storiesOf('none').bb();
|
||||
api.storiesOf('none', module).bb();
|
||||
expect(data).toBe('foo');
|
||||
});
|
||||
|
||||
@ -124,7 +127,7 @@ describe('preview.client_api', () => {
|
||||
},
|
||||
});
|
||||
|
||||
api.storiesOf(kind).aa();
|
||||
api.storiesOf(kind, module).aa();
|
||||
expect(data).toBe(kind);
|
||||
});
|
||||
});
|
||||
@ -133,7 +136,7 @@ describe('preview.client_api', () => {
|
||||
it('should add local decorators', () => {
|
||||
const storyStore = new StoryStore();
|
||||
const api = new ClientAPI({ storyStore });
|
||||
const localApi = api.storiesOf('none');
|
||||
const localApi = api.storiesOf('none', module);
|
||||
localApi.addDecorator(fn => `aa-${fn()}`);
|
||||
|
||||
localApi.add('storyName', () => 'Hello');
|
||||
@ -144,7 +147,7 @@ describe('preview.client_api', () => {
|
||||
const storyStore = new StoryStore();
|
||||
const api = new ClientAPI({ storyStore });
|
||||
api.addDecorator(fn => `bb-${fn()}`);
|
||||
const localApi = api.storiesOf('none');
|
||||
const localApi = api.storiesOf('none', module);
|
||||
|
||||
localApi.add('storyName', () => 'Hello');
|
||||
expect(storyStore.stories[0].fn()).toBe('bb-Hello');
|
||||
@ -153,7 +156,7 @@ describe('preview.client_api', () => {
|
||||
it('should utilize both decorators at once', () => {
|
||||
const storyStore = new StoryStore();
|
||||
const api = new ClientAPI({ storyStore });
|
||||
const localApi = api.storiesOf('none');
|
||||
const localApi = api.storiesOf('none', module);
|
||||
|
||||
api.addDecorator(fn => `aa-${fn()}`);
|
||||
localApi.addDecorator(fn => `bb-${fn()}`);
|
||||
@ -165,7 +168,7 @@ describe('preview.client_api', () => {
|
||||
it('should pass the context', () => {
|
||||
const storyStore = new StoryStore();
|
||||
const api = new ClientAPI({ storyStore });
|
||||
const localApi = api.storiesOf('none');
|
||||
const localApi = api.storiesOf('none', module);
|
||||
localApi.addDecorator(fn => `aa-${fn()}`);
|
||||
|
||||
localApi.add('storyName', ({ kind, story }) => `${kind}-${story}`);
|
||||
@ -180,7 +183,7 @@ describe('preview.client_api', () => {
|
||||
it('should have access to the context', () => {
|
||||
const storyStore = new StoryStore();
|
||||
const api = new ClientAPI({ storyStore });
|
||||
const localApi = api.storiesOf('none');
|
||||
const localApi = api.storiesOf('none', module);
|
||||
localApi.addDecorator((fn, { kind, story }) => `${kind}-${story}-${fn()}`);
|
||||
|
||||
localApi.add('storyName', () => 'Hello');
|
||||
@ -219,10 +222,10 @@ describe('preview.client_api', () => {
|
||||
'story-2.1': () => 'story-2.1',
|
||||
'story-2.2': () => 'story-2.2',
|
||||
};
|
||||
const kind1 = api.storiesOf('kind-1');
|
||||
const kind1 = api.storiesOf('kind-1', module);
|
||||
kind1.add('story-1.1', functions['story-1.1']);
|
||||
kind1.add('story-1.2', functions['story-1.2']);
|
||||
const kind2 = api.storiesOf('kind-2');
|
||||
const kind2 = api.storiesOf('kind-2', module);
|
||||
kind2.add('story-2.1', functions['story-2.1']);
|
||||
kind2.add('story-2.2', functions['story-2.2']);
|
||||
const book = api.getStorybook();
|
||||
|
||||
@ -30,17 +30,14 @@ const codeStyle = {
|
||||
overflow: 'auto',
|
||||
};
|
||||
|
||||
const ErrorDisplay = ({ error }) =>
|
||||
const ErrorDisplay = ({ error }) => (
|
||||
<div style={mainStyle}>
|
||||
<div style={headingStyle}>
|
||||
{error.message}
|
||||
</div>
|
||||
<div style={headingStyle}>{error.message}</div>
|
||||
<pre style={codeStyle}>
|
||||
<code>
|
||||
{error.stack}
|
||||
</code>
|
||||
<code>{error.stack}</code>
|
||||
</pre>
|
||||
</div>;
|
||||
</div>
|
||||
);
|
||||
|
||||
ErrorDisplay.propTypes = {
|
||||
error: PropTypes.shape({
|
||||
|
||||
@ -1,6 +1,16 @@
|
||||
import mock from 'mock-fs';
|
||||
import loadBabelConfig from './babel_config';
|
||||
|
||||
// eslint-disable-next-line global-require
|
||||
jest.mock('fs', () => require('../../../../__mocks__/fs'));
|
||||
jest.mock('path', () => ({
|
||||
resolve: () => '.babelrc',
|
||||
}));
|
||||
|
||||
const setup = ({ files }) => {
|
||||
// eslint-disable-next-line no-underscore-dangle, global-require
|
||||
require('fs').__setMockFiles(files);
|
||||
};
|
||||
|
||||
describe('babel_config', () => {
|
||||
// As the 'fs' is going to be mocked, let's call require.resolve
|
||||
// so the require.cache has the correct route to the file.
|
||||
@ -8,9 +18,9 @@ describe('babel_config', () => {
|
||||
const babelPluginReactDocgenPath = require.resolve('babel-plugin-react-docgen');
|
||||
|
||||
it('should return the config with the extra plugins when `plugins` is an array.', () => {
|
||||
// Mock a simple `.babelrc` config file.
|
||||
mock({
|
||||
'.babelrc': `{
|
||||
setup({
|
||||
files: {
|
||||
'.babelrc': `{
|
||||
"presets": [
|
||||
"env",
|
||||
"foo-preset"
|
||||
@ -19,72 +29,82 @@ describe('babel_config', () => {
|
||||
"foo-plugin"
|
||||
]
|
||||
}`,
|
||||
},
|
||||
});
|
||||
|
||||
const config = loadBabelConfig('.foo');
|
||||
|
||||
expect(config.plugins).toEqual([
|
||||
'foo-plugin',
|
||||
[
|
||||
babelPluginReactDocgenPath,
|
||||
{
|
||||
DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
|
||||
},
|
||||
expect(config).toEqual({
|
||||
babelrc: false,
|
||||
plugins: [
|
||||
'foo-plugin',
|
||||
[
|
||||
babelPluginReactDocgenPath,
|
||||
{
|
||||
DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
|
||||
},
|
||||
],
|
||||
],
|
||||
]);
|
||||
|
||||
mock.restore();
|
||||
presets: ['env', 'foo-preset'],
|
||||
});
|
||||
});
|
||||
|
||||
it('should return the config with the extra plugins when `plugins` is not an array.', () => {
|
||||
// Mock a `.babelrc` config file with plugins key not being an array.
|
||||
mock({
|
||||
'.babelrc': `{
|
||||
"presets": [
|
||||
"env",
|
||||
"foo-preset"
|
||||
],
|
||||
"plugins": "bar-plugin"
|
||||
}`,
|
||||
setup({
|
||||
files: {
|
||||
'.babelrc': `{
|
||||
"presets": [
|
||||
"env",
|
||||
"foo-preset"
|
||||
],
|
||||
"plugins": "bar-plugin"
|
||||
}`,
|
||||
},
|
||||
});
|
||||
|
||||
const config = loadBabelConfig('.bar');
|
||||
|
||||
expect(config.plugins).toEqual([
|
||||
'bar-plugin',
|
||||
[
|
||||
babelPluginReactDocgenPath,
|
||||
{
|
||||
DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
|
||||
},
|
||||
expect(config).toEqual({
|
||||
babelrc: false,
|
||||
plugins: [
|
||||
'bar-plugin',
|
||||
[
|
||||
babelPluginReactDocgenPath,
|
||||
{
|
||||
DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
|
||||
},
|
||||
],
|
||||
],
|
||||
]);
|
||||
|
||||
mock.restore();
|
||||
presets: ['env', 'foo-preset'],
|
||||
});
|
||||
});
|
||||
|
||||
it('should return the config only with the extra plugins when `plugins` is not present.', () => {
|
||||
// Mock a `.babelrc` config file with no plugins key.
|
||||
mock({
|
||||
'.babelrc': `{
|
||||
"presets": [
|
||||
"env",
|
||||
"foo-preset"
|
||||
]
|
||||
}`,
|
||||
setup({
|
||||
files: {
|
||||
'.babelrc': `{
|
||||
"presets": [
|
||||
"env",
|
||||
"foo-preset"
|
||||
]
|
||||
}`,
|
||||
},
|
||||
});
|
||||
|
||||
const config = loadBabelConfig('.biz');
|
||||
|
||||
expect(config.plugins).toEqual([
|
||||
[
|
||||
babelPluginReactDocgenPath,
|
||||
{
|
||||
DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
|
||||
},
|
||||
expect(config).toEqual({
|
||||
babelrc: false,
|
||||
plugins: [
|
||||
[
|
||||
babelPluginReactDocgenPath,
|
||||
{
|
||||
DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
|
||||
},
|
||||
],
|
||||
],
|
||||
]);
|
||||
|
||||
mock.restore();
|
||||
presets: ['env', 'foo-preset'],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -23,9 +23,11 @@ export function loadEnv(options = {}) {
|
||||
PUBLIC_URL: JSON.stringify(options.production ? '.' : ''),
|
||||
};
|
||||
|
||||
Object.keys(process.env).filter(name => /^STORYBOOK_/.test(name)).forEach(name => {
|
||||
env[name] = JSON.stringify(process.env[name]);
|
||||
});
|
||||
Object.keys(process.env)
|
||||
.filter(name => /^STORYBOOK_/.test(name))
|
||||
.forEach(name => {
|
||||
env[name] = JSON.stringify(process.env[name]);
|
||||
});
|
||||
|
||||
return {
|
||||
'process.env': env,
|
||||
|
||||
@ -33,6 +33,7 @@ program
|
||||
)
|
||||
.option('--ssl-cert <cert>', 'Provide an SSL certificate. (Required with --https)')
|
||||
.option('--ssl-key <key>', 'Provide an SSL key. (Required with --https)')
|
||||
.option('--smoke-test', 'Exit after successful start')
|
||||
.option('-d, --db-path [db-file]', 'DEPRECATED!')
|
||||
.option('--enable-db', 'DEPRECATED!')
|
||||
.parse(process.argv);
|
||||
@ -153,5 +154,8 @@ Promise.all([webpackValid, serverListening])
|
||||
.then(() => {
|
||||
const address = `http://${program.host || 'localhost'}:${program.port}/`;
|
||||
logger.info(`Storybook started on => ${chalk.cyan(address)}\n`);
|
||||
if (program.smokeTest) {
|
||||
process.exit(0);
|
||||
}
|
||||
})
|
||||
.catch(error => logger.error(error));
|
||||
|
||||
@ -1,42 +1,69 @@
|
||||
import mock from 'mock-fs';
|
||||
import { getPreviewHeadHtml } from './utils';
|
||||
import { getPreviewHeadHtml, getManagerHeadHtml } from './utils';
|
||||
|
||||
const HEAD_HTML_CONTENTS = '<script>console.log("custom script!");</script>';
|
||||
// eslint-disable-next-line global-require
|
||||
jest.mock('fs', () => require('../../../../__mocks__/fs'));
|
||||
jest.mock('path', () => ({
|
||||
resolve: (a, p) => p,
|
||||
}));
|
||||
|
||||
describe('server.getPreviewHeadHtml', () => {
|
||||
describe('when .storybook/head.html does not exist', () => {
|
||||
beforeEach(() => {
|
||||
mock({
|
||||
config: {},
|
||||
});
|
||||
const setup = ({ files }) => {
|
||||
// eslint-disable-next-line no-underscore-dangle, global-require
|
||||
require('fs').__setMockFiles(files);
|
||||
};
|
||||
|
||||
const HEAD_HTML_CONTENTS = 'UNITTEST_HEAD_HTML_CONTENTS';
|
||||
|
||||
describe('getPreviewHeadHtml', () => {
|
||||
it('returns an empty string without head.html present', () => {
|
||||
setup({
|
||||
files: {},
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
mock.restore();
|
||||
});
|
||||
|
||||
it('return an empty string', () => {
|
||||
const result = getPreviewHeadHtml('./config');
|
||||
expect(result).toEqual('');
|
||||
});
|
||||
const result = getPreviewHeadHtml('first');
|
||||
expect(result).toEqual('');
|
||||
});
|
||||
|
||||
describe('when .storybook/head.html exists', () => {
|
||||
beforeEach(() => {
|
||||
mock({
|
||||
config: {
|
||||
'head.html': HEAD_HTML_CONTENTS,
|
||||
},
|
||||
});
|
||||
it('return contents of head.html when present', () => {
|
||||
setup({
|
||||
files: {
|
||||
'head.html': HEAD_HTML_CONTENTS,
|
||||
},
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
mock.restore();
|
||||
const result = getPreviewHeadHtml('second');
|
||||
expect(result).toEqual(HEAD_HTML_CONTENTS);
|
||||
});
|
||||
|
||||
it('returns contents of preview-head.html when present', () => {
|
||||
setup({
|
||||
files: {
|
||||
'preview-head.html': HEAD_HTML_CONTENTS,
|
||||
},
|
||||
});
|
||||
|
||||
it('return the contents of the file', () => {
|
||||
const result = getPreviewHeadHtml('./config');
|
||||
expect(result).toEqual(HEAD_HTML_CONTENTS);
|
||||
});
|
||||
const result = getPreviewHeadHtml('second');
|
||||
expect(result).toEqual(HEAD_HTML_CONTENTS);
|
||||
});
|
||||
});
|
||||
|
||||
describe('getManagerHeadHtml', () => {
|
||||
it('returns an empty string without manager-head.html present', () => {
|
||||
setup({
|
||||
files: {},
|
||||
});
|
||||
|
||||
const result = getManagerHeadHtml('first');
|
||||
expect(result).toEqual('');
|
||||
});
|
||||
|
||||
it('returns contents of manager-head.html when present', () => {
|
||||
setup({
|
||||
files: {
|
||||
'manager-head.html': HEAD_HTML_CONTENTS,
|
||||
},
|
||||
});
|
||||
|
||||
const result = getManagerHeadHtml('second');
|
||||
expect(result).toEqual(HEAD_HTML_CONTENTS);
|
||||
});
|
||||
});
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
"@storybook/ui": "^3.2.7",
|
||||
"airbnb-js-shims": "^1.1.1",
|
||||
"autoprefixer": "^7.1.1",
|
||||
"babel-core": "^6.25.0",
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-loader": "^7.0.0",
|
||||
"babel-plugin-react-docgen": "^1.6.0",
|
||||
"babel-preset-env": "^1.6.0",
|
||||
@ -39,8 +39,8 @@
|
||||
"babel-preset-stage-0": "^6.24.1",
|
||||
"babel-runtime": "^6.23.0",
|
||||
"case-sensitive-paths-webpack-plugin": "^2.0.0",
|
||||
"chalk": "^2.0.1",
|
||||
"commander": "^2.9.0",
|
||||
"chalk": "^2.1.0",
|
||||
"commander": "^2.11.0",
|
||||
"common-tags": "^1.4.0",
|
||||
"configstore": "^3.1.0",
|
||||
"css-loader": "^0.28.1",
|
||||
@ -77,8 +77,7 @@
|
||||
"webpack-hot-middleware": "^2.18.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-cli": "^6.24.1",
|
||||
"mock-fs": "^4.3.0",
|
||||
"nodemon": "^1.11.0"
|
||||
"babel-cli": "^6.26.0",
|
||||
"nodemon": "^1.12.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -55,7 +55,7 @@ describe('preview.client_api', () => {
|
||||
},
|
||||
});
|
||||
|
||||
api.storiesOf('none').aa();
|
||||
api.storiesOf('none', module).aa();
|
||||
expect(data).toBe('foo');
|
||||
});
|
||||
|
||||
@ -75,7 +75,10 @@ describe('preview.client_api', () => {
|
||||
},
|
||||
});
|
||||
|
||||
api.storiesOf('none').aa().bb();
|
||||
api
|
||||
.storiesOf('none', module)
|
||||
.aa()
|
||||
.bb();
|
||||
expect(data).toEqual(['foo', 'bar']);
|
||||
});
|
||||
|
||||
@ -89,7 +92,7 @@ describe('preview.client_api', () => {
|
||||
},
|
||||
});
|
||||
|
||||
api.storiesOf('none').aa();
|
||||
api.storiesOf('none', module).aa();
|
||||
expect(data).toBe('function');
|
||||
});
|
||||
|
||||
@ -109,7 +112,7 @@ describe('preview.client_api', () => {
|
||||
},
|
||||
});
|
||||
|
||||
api.storiesOf('none').bb();
|
||||
api.storiesOf('none', module).bb();
|
||||
expect(data).toBe('foo');
|
||||
});
|
||||
|
||||
@ -124,7 +127,7 @@ describe('preview.client_api', () => {
|
||||
},
|
||||
});
|
||||
|
||||
api.storiesOf(kind).aa();
|
||||
api.storiesOf(kind, module).aa();
|
||||
expect(data).toBe(kind);
|
||||
});
|
||||
});
|
||||
@ -133,7 +136,7 @@ describe('preview.client_api', () => {
|
||||
it('should add local decorators', () => {
|
||||
const storyStore = new StoryStore();
|
||||
const api = new ClientAPI({ storyStore });
|
||||
const localApi = api.storiesOf('none');
|
||||
const localApi = api.storiesOf('none', module);
|
||||
localApi.addDecorator(fn => ({ template: `<div>aa${fn().template}</div>` }));
|
||||
|
||||
localApi.add('storyName', () => ({ template: '<p>hello</p>' }));
|
||||
@ -144,7 +147,7 @@ describe('preview.client_api', () => {
|
||||
const storyStore = new StoryStore();
|
||||
const api = new ClientAPI({ storyStore });
|
||||
api.addDecorator(fn => ({ template: `<div>bb${fn().template}</div>` }));
|
||||
const localApi = api.storiesOf('none');
|
||||
const localApi = api.storiesOf('none', module);
|
||||
|
||||
localApi.add('storyName', () => ({ template: '<p>hello</p>' }));
|
||||
expect(storyStore.stories[0].fn().template).toBe('<div>bb<p>hello</p></div>');
|
||||
@ -153,7 +156,7 @@ describe('preview.client_api', () => {
|
||||
it('should utilize both decorators at once', () => {
|
||||
const storyStore = new StoryStore();
|
||||
const api = new ClientAPI({ storyStore });
|
||||
const localApi = api.storiesOf('none');
|
||||
const localApi = api.storiesOf('none', module);
|
||||
|
||||
api.addDecorator(fn => ({ template: `<div>aa${fn().template}</div>` }));
|
||||
localApi.addDecorator(fn => ({ template: `<div>bb${fn().template}</div>` }));
|
||||
@ -165,7 +168,7 @@ describe('preview.client_api', () => {
|
||||
it('should pass the context', () => {
|
||||
const storyStore = new StoryStore();
|
||||
const api = new ClientAPI({ storyStore });
|
||||
const localApi = api.storiesOf('none');
|
||||
const localApi = api.storiesOf('none', module);
|
||||
localApi.addDecorator(fn => ({ template: `<div>aa${fn().template}</div>` }));
|
||||
|
||||
localApi.add('storyName', ({ kind, story }) => ({ template: `<p>${kind}-${story}</p>` }));
|
||||
@ -180,7 +183,7 @@ describe('preview.client_api', () => {
|
||||
it('should have access to the context', () => {
|
||||
const storyStore = new StoryStore();
|
||||
const api = new ClientAPI({ storyStore });
|
||||
const localApi = api.storiesOf('none');
|
||||
const localApi = api.storiesOf('none', module);
|
||||
localApi.addDecorator((fn, { kind, story }) => ({
|
||||
template: `<div>${kind}-${story}-${fn().template}</div>`,
|
||||
}));
|
||||
@ -221,10 +224,10 @@ describe('preview.client_api', () => {
|
||||
'story-2.1': () => 'story-2.1',
|
||||
'story-2.2': () => 'story-2.2',
|
||||
};
|
||||
const kind1 = api.storiesOf('kind-1');
|
||||
const kind1 = api.storiesOf('kind-1', module);
|
||||
kind1.add('story-1.1', functions['story-1.1']);
|
||||
kind1.add('story-1.2', functions['story-1.2']);
|
||||
const kind2 = api.storiesOf('kind-2');
|
||||
const kind2 = api.storiesOf('kind-2', module);
|
||||
kind2.add('story-2.1', functions['story-2.1']);
|
||||
kind2.add('story-2.2', functions['story-2.2']);
|
||||
const book = api.getStorybook();
|
||||
|
||||
@ -1,6 +1,16 @@
|
||||
import mock from 'mock-fs';
|
||||
import loadBabelConfig from './babel_config';
|
||||
|
||||
// eslint-disable-next-line global-require
|
||||
jest.mock('fs', () => require('../../../../__mocks__/fs'));
|
||||
jest.mock('path', () => ({
|
||||
resolve: () => '.babelrc',
|
||||
}));
|
||||
|
||||
const setup = ({ files }) => {
|
||||
// eslint-disable-next-line no-underscore-dangle, global-require
|
||||
require('fs').__setMockFiles(files);
|
||||
};
|
||||
|
||||
describe('babel_config', () => {
|
||||
// As the 'fs' is going to be mocked, let's call require.resolve
|
||||
// so the require.cache has the correct route to the file.
|
||||
@ -8,9 +18,9 @@ describe('babel_config', () => {
|
||||
const babelPluginReactDocgenPath = require.resolve('babel-plugin-react-docgen');
|
||||
|
||||
it('should return the config with the extra plugins when `plugins` is an array.', () => {
|
||||
// Mock a simple `.babelrc` config file.
|
||||
mock({
|
||||
'.babelrc': `{
|
||||
setup({
|
||||
files: {
|
||||
'.babelrc': `{
|
||||
"presets": [
|
||||
"env",
|
||||
"foo-preset"
|
||||
@ -19,72 +29,82 @@ describe('babel_config', () => {
|
||||
"foo-plugin"
|
||||
]
|
||||
}`,
|
||||
},
|
||||
});
|
||||
|
||||
const config = loadBabelConfig('.foo');
|
||||
|
||||
expect(config.plugins).toEqual([
|
||||
'foo-plugin',
|
||||
[
|
||||
babelPluginReactDocgenPath,
|
||||
{
|
||||
DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
|
||||
},
|
||||
expect(config).toEqual({
|
||||
babelrc: false,
|
||||
plugins: [
|
||||
'foo-plugin',
|
||||
[
|
||||
babelPluginReactDocgenPath,
|
||||
{
|
||||
DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
|
||||
},
|
||||
],
|
||||
],
|
||||
]);
|
||||
|
||||
mock.restore();
|
||||
presets: ['env', 'foo-preset'],
|
||||
});
|
||||
});
|
||||
|
||||
it('should return the config with the extra plugins when `plugins` is not an array.', () => {
|
||||
// Mock a `.babelrc` config file with plugins key not being an array.
|
||||
mock({
|
||||
'.babelrc': `{
|
||||
"presets": [
|
||||
"env",
|
||||
"foo-preset"
|
||||
],
|
||||
"plugins": "bar-plugin"
|
||||
}`,
|
||||
setup({
|
||||
files: {
|
||||
'.babelrc': `{
|
||||
"presets": [
|
||||
"env",
|
||||
"foo-preset"
|
||||
],
|
||||
"plugins": "bar-plugin"
|
||||
}`,
|
||||
},
|
||||
});
|
||||
|
||||
const config = loadBabelConfig('.bar');
|
||||
|
||||
expect(config.plugins).toEqual([
|
||||
'bar-plugin',
|
||||
[
|
||||
babelPluginReactDocgenPath,
|
||||
{
|
||||
DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
|
||||
},
|
||||
expect(config).toEqual({
|
||||
babelrc: false,
|
||||
plugins: [
|
||||
'bar-plugin',
|
||||
[
|
||||
babelPluginReactDocgenPath,
|
||||
{
|
||||
DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
|
||||
},
|
||||
],
|
||||
],
|
||||
]);
|
||||
|
||||
mock.restore();
|
||||
presets: ['env', 'foo-preset'],
|
||||
});
|
||||
});
|
||||
|
||||
it('should return the config only with the extra plugins when `plugins` is not present.', () => {
|
||||
// Mock a `.babelrc` config file with no plugins key.
|
||||
mock({
|
||||
'.babelrc': `{
|
||||
"presets": [
|
||||
"env",
|
||||
"foo-preset"
|
||||
]
|
||||
}`,
|
||||
setup({
|
||||
files: {
|
||||
'.babelrc': `{
|
||||
"presets": [
|
||||
"env",
|
||||
"foo-preset"
|
||||
]
|
||||
}`,
|
||||
},
|
||||
});
|
||||
|
||||
const config = loadBabelConfig('.biz');
|
||||
|
||||
expect(config.plugins).toEqual([
|
||||
[
|
||||
babelPluginReactDocgenPath,
|
||||
{
|
||||
DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
|
||||
},
|
||||
expect(config).toEqual({
|
||||
babelrc: false,
|
||||
plugins: [
|
||||
[
|
||||
babelPluginReactDocgenPath,
|
||||
{
|
||||
DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
|
||||
},
|
||||
],
|
||||
],
|
||||
]);
|
||||
|
||||
mock.restore();
|
||||
presets: ['env', 'foo-preset'],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -23,9 +23,11 @@ export function loadEnv(options = {}) {
|
||||
PUBLIC_URL: JSON.stringify(options.production ? '.' : ''),
|
||||
};
|
||||
|
||||
Object.keys(process.env).filter(name => /^STORYBOOK_/.test(name)).forEach(name => {
|
||||
env[name] = JSON.stringify(process.env[name]);
|
||||
});
|
||||
Object.keys(process.env)
|
||||
.filter(name => /^STORYBOOK_/.test(name))
|
||||
.forEach(name => {
|
||||
env[name] = JSON.stringify(process.env[name]);
|
||||
});
|
||||
|
||||
return {
|
||||
'process.env': env,
|
||||
|
||||
@ -33,6 +33,7 @@ program
|
||||
)
|
||||
.option('--ssl-cert <cert>', 'Provide an SSL certificate. (Required with --https)')
|
||||
.option('--ssl-key <key>', 'Provide an SSL key. (Required with --https)')
|
||||
.option('--smoke-test', 'Exit after successful start')
|
||||
.option('-d, --db-path [db-file]', 'DEPRECATED!')
|
||||
.option('--enable-db', 'DEPRECATED!')
|
||||
.parse(process.argv);
|
||||
@ -153,5 +154,8 @@ Promise.all([webpackValid, serverListening])
|
||||
.then(() => {
|
||||
const address = `http://${program.host || 'localhost'}:${program.port}/`;
|
||||
logger.info(`Storybook started on => ${chalk.cyan(address)}\n`);
|
||||
if (program.smokeTest) {
|
||||
process.exit(0);
|
||||
}
|
||||
})
|
||||
.catch(error => logger.error(error));
|
||||
|
||||
@ -1,42 +1,69 @@
|
||||
import mock from 'mock-fs';
|
||||
import { getPreviewHeadHtml } from './utils';
|
||||
import { getPreviewHeadHtml, getManagerHeadHtml } from './utils';
|
||||
|
||||
const HEAD_HTML_CONTENTS = '<script>console.log("custom script!");</script>';
|
||||
// eslint-disable-next-line global-require
|
||||
jest.mock('fs', () => require('../../../../__mocks__/fs'));
|
||||
jest.mock('path', () => ({
|
||||
resolve: (a, p) => p,
|
||||
}));
|
||||
|
||||
describe('server.getPreviewHeadHtml', () => {
|
||||
describe('when .storybook/head.html does not exist', () => {
|
||||
beforeEach(() => {
|
||||
mock({
|
||||
config: {},
|
||||
});
|
||||
const setup = ({ files }) => {
|
||||
// eslint-disable-next-line no-underscore-dangle, global-require
|
||||
require('fs').__setMockFiles(files);
|
||||
};
|
||||
|
||||
const HEAD_HTML_CONTENTS = 'UNITTEST_HEAD_HTML_CONTENTS';
|
||||
|
||||
describe('getPreviewHeadHtml', () => {
|
||||
it('returns an empty string without head.html present', () => {
|
||||
setup({
|
||||
files: {},
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
mock.restore();
|
||||
});
|
||||
|
||||
it('return an empty string', () => {
|
||||
const result = getPreviewHeadHtml('./config');
|
||||
expect(result).toEqual('');
|
||||
});
|
||||
const result = getPreviewHeadHtml('first');
|
||||
expect(result).toEqual('');
|
||||
});
|
||||
|
||||
describe('when .storybook/head.html exists', () => {
|
||||
beforeEach(() => {
|
||||
mock({
|
||||
config: {
|
||||
'head.html': HEAD_HTML_CONTENTS,
|
||||
},
|
||||
});
|
||||
it('return contents of head.html when present', () => {
|
||||
setup({
|
||||
files: {
|
||||
'head.html': HEAD_HTML_CONTENTS,
|
||||
},
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
mock.restore();
|
||||
const result = getPreviewHeadHtml('second');
|
||||
expect(result).toEqual(HEAD_HTML_CONTENTS);
|
||||
});
|
||||
|
||||
it('returns contents of preview-head.html when present', () => {
|
||||
setup({
|
||||
files: {
|
||||
'preview-head.html': HEAD_HTML_CONTENTS,
|
||||
},
|
||||
});
|
||||
|
||||
it('return the contents of the file', () => {
|
||||
const result = getPreviewHeadHtml('./config');
|
||||
expect(result).toEqual(HEAD_HTML_CONTENTS);
|
||||
});
|
||||
const result = getPreviewHeadHtml('second');
|
||||
expect(result).toEqual(HEAD_HTML_CONTENTS);
|
||||
});
|
||||
});
|
||||
|
||||
describe('getManagerHeadHtml', () => {
|
||||
it('returns an empty string without manager-head.html present', () => {
|
||||
setup({
|
||||
files: {},
|
||||
});
|
||||
|
||||
const result = getManagerHeadHtml('first');
|
||||
expect(result).toEqual('');
|
||||
});
|
||||
|
||||
it('returns contents of manager-head.html when present', () => {
|
||||
setup({
|
||||
files: {
|
||||
'manager-head.html': HEAD_HTML_CONTENTS,
|
||||
},
|
||||
});
|
||||
|
||||
const result = getManagerHeadHtml('second');
|
||||
expect(result).toEqual(HEAD_HTML_CONTENTS);
|
||||
});
|
||||
});
|
||||
|
||||
@ -5,11 +5,7 @@ import './breakpoints.css';
|
||||
|
||||
const Breakpoint = ({ mobile, children }) => {
|
||||
const className = mobile ? 'breakpoint-min-width-700' : 'breakpoint-max-width-700';
|
||||
return (
|
||||
<div className={className}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
return <div className={className}>{children}</div>;
|
||||
};
|
||||
|
||||
Breakpoint.propTypes = {
|
||||
|
||||
@ -12,7 +12,7 @@ const getEditUrl = (selectedSectionId, selectedItemId) => {
|
||||
return `${gitHubRepoUrl}/tree/master/docs/pages/${docPath}/index.md`;
|
||||
};
|
||||
|
||||
const Container = ({ sections, selectedItem, selectedSectionId, selectedItemId }) =>
|
||||
const Container = ({ sections, selectedItem, selectedSectionId, selectedItemId }) => (
|
||||
<div id="docs-container" className="row">
|
||||
<div className="nav col-sm-3 col-md-3 hidden-xs">
|
||||
<Nav
|
||||
@ -46,7 +46,8 @@ const Container = ({ sections, selectedItem, selectedSectionId, selectedItemId }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>;
|
||||
</div>
|
||||
);
|
||||
Container.propTypes = {
|
||||
sections: PropTypes.array, // eslint-disable-line
|
||||
selectedItem: PropTypes.object, // eslint-disable-line
|
||||
|
||||
@ -5,24 +5,21 @@ import 'highlight.js/styles/github-gist.css';
|
||||
import Highlight from '../../Highlight';
|
||||
import './style.css';
|
||||
|
||||
const DocsContent = ({ title, content, editUrl }) =>
|
||||
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
|
||||
</a>
|
||||
</p>
|
||||
<div className="markdown">
|
||||
<Highlight>
|
||||
{content}
|
||||
</Highlight>
|
||||
<Highlight>{content}</Highlight>
|
||||
</div>
|
||||
</div>
|
||||
</div>;
|
||||
</div>
|
||||
);
|
||||
|
||||
DocsContent.propTypes = {
|
||||
title: PropTypes.string.isRequired,
|
||||
|
||||
@ -3,13 +3,11 @@ import PropTypes from 'prop-types';
|
||||
import { Link } from 'react-router';
|
||||
import './style.css';
|
||||
|
||||
const Nav = ({ sections, selectedSectionId, selectedItemId }) =>
|
||||
const Nav = ({ sections, selectedSectionId, selectedItemId }) => (
|
||||
<div id="nav">
|
||||
{sections.map(section =>
|
||||
{sections.map(section => (
|
||||
<div key={section.id}>
|
||||
<h3>
|
||||
{section.heading}
|
||||
</h3>
|
||||
<h3>{section.heading}</h3>
|
||||
<ul>
|
||||
{section.items.map(item => {
|
||||
const cssClass =
|
||||
@ -27,8 +25,9 @@ const Nav = ({ sections, selectedSectionId, selectedItemId }) =>
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>;
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
Nav.propTypes = {
|
||||
sections: PropTypes.array, // eslint-disable-line
|
||||
selectedSectionId: PropTypes.string.isRequired,
|
||||
|
||||
@ -7,7 +7,7 @@ import Container from './Container';
|
||||
import Footer from '../Footer';
|
||||
import './style.css';
|
||||
|
||||
const Docs = ({ sections, selectedItem, selectedSectionId, selectedItemId }) =>
|
||||
const Docs = ({ sections, selectedItem, selectedSectionId, selectedItemId }) => (
|
||||
<div className="container">
|
||||
<Helmet title={`${selectedItem.title}`} />
|
||||
<Header currentSection="docs" />
|
||||
@ -18,7 +18,8 @@ const Docs = ({ sections, selectedItem, selectedSectionId, selectedItemId }) =>
|
||||
selectedItemId={selectedItemId}
|
||||
/>
|
||||
<Footer />
|
||||
</div>;
|
||||
</div>
|
||||
);
|
||||
Docs.propTypes = {
|
||||
sections: PropTypes.array, // eslint-disable-line
|
||||
selectedItem: PropTypes.object, // eslint-disable-line
|
||||
|
||||
@ -4,7 +4,7 @@ import slackIcon from './images/slack-icon.png';
|
||||
import githubIcon from './images/github-icon.png';
|
||||
import './style.css';
|
||||
|
||||
const Footer = () =>
|
||||
const Footer = () => (
|
||||
<div id="footer" className="row">
|
||||
<div className="col-md-12">
|
||||
<div className="row logos">
|
||||
@ -24,6 +24,7 @@ const Footer = () =>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>;
|
||||
</div>
|
||||
);
|
||||
|
||||
export default Footer;
|
||||
|
||||
@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
|
||||
import Grid from '../Grid';
|
||||
import './style.css';
|
||||
|
||||
const Examples = ({ items }) =>
|
||||
const Examples = ({ items }) => (
|
||||
<div className="examples">
|
||||
<div className="heading">
|
||||
<h1>Storybook Examples</h1>
|
||||
@ -17,7 +17,8 @@ const Examples = ({ items }) =>
|
||||
</a>
|
||||
</div>
|
||||
<Grid columnWidth={350} items={items} />
|
||||
</div>;
|
||||
</div>
|
||||
);
|
||||
Examples.propTypes = {
|
||||
items: PropTypes.array, // eslint-disable-line react/forbid-prop-types
|
||||
};
|
||||
|
||||
@ -5,10 +5,11 @@ import PropTypes from 'prop-types';
|
||||
import StackGrid from 'react-stack-grid';
|
||||
import GridItem from '../GridItem';
|
||||
|
||||
const Grid = ({ items, columnWidth }) =>
|
||||
const Grid = ({ items, columnWidth }) => (
|
||||
<StackGrid columnWidth={columnWidth}>
|
||||
{items.map((item, idx) => <GridItem key={idx} {...item} />)}
|
||||
</StackGrid>;
|
||||
</StackGrid>
|
||||
);
|
||||
Grid.propTypes = {
|
||||
items: PropTypes.array, // eslint-disable-line
|
||||
columnWidth: PropTypes.number,
|
||||
|
||||
@ -8,32 +8,29 @@ const linkProps = {
|
||||
className: 'link',
|
||||
};
|
||||
|
||||
const GridItem = ({ title, description, source, demo, thumbnail }) =>
|
||||
const GridItem = ({ title, description, source, demo, thumbnail }) => (
|
||||
<div className="grid-item">
|
||||
<div className="photobox" style={{ backgroundImage: `url(${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>;
|
||||
</div>
|
||||
);
|
||||
GridItem.propTypes = {
|
||||
title: PropTypes.string.isRequired,
|
||||
description: PropTypes.string.isRequired,
|
||||
|
||||
@ -2,13 +2,14 @@ import React from 'react';
|
||||
import demoImg from './images/demo.gif';
|
||||
import './style.css';
|
||||
|
||||
const Demo = () =>
|
||||
const Demo = () => (
|
||||
<div id="demo" className="row">
|
||||
<div className="col-xs-12">
|
||||
<center>
|
||||
<img className="demo-img" src={demoImg} alt="" />
|
||||
</center>
|
||||
</div>
|
||||
</div>;
|
||||
</div>
|
||||
);
|
||||
|
||||
export default Demo;
|
||||
|
||||
@ -2,7 +2,7 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './style.css';
|
||||
|
||||
const Item = ({ storybook, owner, source }) =>
|
||||
const Item = ({ storybook, owner, source }) => (
|
||||
<div className="ft-sbooks col-xs-6 col-md-4" key={storybook.link}>
|
||||
<div className="col-md-4">
|
||||
<a href={storybook.link} target="_blank" rel="noopener noreferrer">
|
||||
@ -21,23 +21,23 @@ const Item = ({ storybook, owner, source }) =>
|
||||
source
|
||||
</a>
|
||||
</div>
|
||||
</div>;
|
||||
</div>
|
||||
);
|
||||
Item.propTypes = {
|
||||
storybook: PropTypes.object.isRequired, // eslint-disable-line
|
||||
owner: PropTypes.string.isRequired,
|
||||
source: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
const Featured = ({ featuredStorybooks }) =>
|
||||
const Featured = ({ featuredStorybooks }) => (
|
||||
<div id="featured" className="row">
|
||||
<div className="col-xs-12">
|
||||
<h2>Featured Storybooks</h2>
|
||||
<div className="row">
|
||||
{featuredStorybooks.map(item => <Item {...item} />)}
|
||||
</div>
|
||||
<div className="row">{featuredStorybooks.map(item => <Item {...item} />)}</div>
|
||||
<hr />
|
||||
</div>
|
||||
</div>;
|
||||
</div>
|
||||
);
|
||||
|
||||
Featured.propTypes = {
|
||||
featuredStorybooks: PropTypes.array, // eslint-disable-line
|
||||
|
||||
@ -3,7 +3,7 @@ import './style.css';
|
||||
|
||||
import storybookLogo from '../../../design/homepage/storybook-logo.svg';
|
||||
|
||||
const Heading = () =>
|
||||
const Heading = () => (
|
||||
<div id="heading" className="row">
|
||||
<div className="col-xs-12">
|
||||
<img className="sb-title" src={storybookLogo} alt="Storybook Logo" />
|
||||
@ -13,6 +13,7 @@ const Heading = () =>
|
||||
You'll ♥️ to use
|
||||
</h3>
|
||||
</div>
|
||||
</div>;
|
||||
</div>
|
||||
);
|
||||
|
||||
export default Heading;
|
||||
|
||||
@ -3,7 +3,7 @@ import { Link } from 'react-router';
|
||||
import { UsedByBg } from '../UsedBy/';
|
||||
import './style.css';
|
||||
|
||||
const MainLinks = () =>
|
||||
const MainLinks = () => (
|
||||
<div id="main-links">
|
||||
<div className="main-links-container">
|
||||
<div className="try-now">
|
||||
@ -113,6 +113,7 @@ const MainLinks = () =>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>;
|
||||
</div>
|
||||
);
|
||||
|
||||
export default MainLinks;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import './style.css';
|
||||
|
||||
const Platform = () =>
|
||||
const Platform = () => (
|
||||
<div id="platform" className="row">
|
||||
<div className="col-md-12">
|
||||
<h3 className="built-for">Built for</h3>
|
||||
@ -25,6 +25,7 @@ const Platform = () =>
|
||||
|
||||
<hr />
|
||||
</div>
|
||||
</div>;
|
||||
</div>
|
||||
);
|
||||
|
||||
export default Platform;
|
||||
|
||||
@ -3,7 +3,7 @@ import React from 'react';
|
||||
import { Link } from 'react-router';
|
||||
import './style.css';
|
||||
|
||||
export const UsedByBg = ({ color, style }) =>
|
||||
export const UsedByBg = ({ color, style }) => (
|
||||
<div className="used-by-bg" style={style}>
|
||||
<svg
|
||||
width="100%"
|
||||
@ -25,7 +25,8 @@ export const UsedByBg = ({ color, style }) =>
|
||||
<path id="path0_fill" d="M 43.5 300.5L 0 35L 1440 0L 1371.5 379.5L 43.5 300.5Z" />
|
||||
</defs>
|
||||
</svg>
|
||||
</div>;
|
||||
</div>
|
||||
);
|
||||
UsedByBg.propTypes = {
|
||||
color: PropTypes.string,
|
||||
// eslint-disable-next-line
|
||||
@ -36,7 +37,7 @@ UsedByBg.defaultProps = {
|
||||
style: {},
|
||||
};
|
||||
|
||||
const User = ({ logo, demo, site, title }) =>
|
||||
const User = ({ logo, demo, site, title }) => (
|
||||
<a
|
||||
className="used-by-user"
|
||||
href={demo || site}
|
||||
@ -44,7 +45,8 @@ const User = ({ logo, demo, site, title }) =>
|
||||
rel="noopener nofollow noreferrer"
|
||||
>
|
||||
<img className="used-by-user-image" src={logo} alt={title} />
|
||||
</a>;
|
||||
</a>
|
||||
);
|
||||
User.propTypes = {
|
||||
logo: PropTypes.string.isRequired,
|
||||
demo: PropTypes.string,
|
||||
@ -56,21 +58,20 @@ User.defaultProps = {
|
||||
title: '',
|
||||
};
|
||||
|
||||
const UsedBy = ({ users }) =>
|
||||
const UsedBy = ({ users }) => (
|
||||
<div className="used-by-wrapper">
|
||||
<div className="used-by">
|
||||
<UsedByBg color="#E7F6D8" />
|
||||
<div className="used-by-contents">
|
||||
<h2 className="used-by-title">Used by these fine folks:</h2>
|
||||
<div className="used-by-users">
|
||||
{users.map(user => <User key={user.site} {...user} />)}
|
||||
</div>
|
||||
<div className="used-by-users">{users.map(user => <User key={user.site} {...user} />)}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="used-by-more-examples">
|
||||
<Link to="/examples/">See more examples…</Link>
|
||||
</div>
|
||||
</div>;
|
||||
</div>
|
||||
);
|
||||
UsedBy.propTypes = {
|
||||
users: PropTypes.array, // eslint-disable-line
|
||||
};
|
||||
|
||||
@ -40,7 +40,7 @@ import Footer from '../Footer';
|
||||
// },
|
||||
// ];
|
||||
|
||||
const Homepage = ({ users }) =>
|
||||
const Homepage = ({ users }) => (
|
||||
<div className="container">
|
||||
<Helmet title="Storybook - UI dev environment you'll love to use" />
|
||||
{/* <Header currentSection="home" /> */}
|
||||
@ -51,7 +51,8 @@ const Homepage = ({ users }) =>
|
||||
<UsedBy users={users} />
|
||||
{/* <Featured featuredStorybooks={featuredStorybooks} /> */}
|
||||
<Footer />
|
||||
</div>;
|
||||
</div>
|
||||
);
|
||||
|
||||
Homepage.propTypes = {
|
||||
featuredStorybooks: PropTypes.array, // eslint-disable-line
|
||||
|
||||
@ -41,9 +41,7 @@ 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>
|
||||
|
||||
@ -21,10 +21,10 @@
|
||||
"@storybook/addon-links": "latest",
|
||||
"@storybook/addons": "latest",
|
||||
"@storybook/react": "latest",
|
||||
"babel-cli": "^6.24.1",
|
||||
"babel-core": "^6.25.0",
|
||||
"babel-cli": "^6.26.0",
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-plugin-transform-runtime": "^6.23.0",
|
||||
"babel-polyfill": "^6.23.0",
|
||||
"babel-polyfill": "^6.26.0",
|
||||
"babel-preset-env": "^1.6.0",
|
||||
"babel-preset-react": "^6.24.1",
|
||||
"babel-preset-stage-0": "^6.24.1",
|
||||
|
||||
@ -13,7 +13,7 @@ import 'bootstrap/dist/css/bootstrap.css';
|
||||
import '../css/main.css';
|
||||
import '../css/github.css';
|
||||
|
||||
const PageTemplate = ({ children }) =>
|
||||
const PageTemplate = ({ children }) => (
|
||||
<div>
|
||||
<a
|
||||
href="https://github.com/storybooks/storybook"
|
||||
@ -49,7 +49,8 @@ const PageTemplate = ({ children }) =>
|
||||
</svg>
|
||||
</a>
|
||||
{children}
|
||||
</div>;
|
||||
</div>
|
||||
);
|
||||
|
||||
PageTemplate.propTypes = {
|
||||
children: PropTypes.object, // eslint-disable-line
|
||||
|
||||
@ -101,3 +101,7 @@ This addon lets you navigate different versions of static Storybook builds. As s
|
||||
### [Apollo](https://github.com/abhiaiyer91/apollo-storybook-decorator)
|
||||
|
||||
Wrap your stories with the Apollo client for mocking GraphQL queries/mutations.
|
||||
|
||||
### [Screenshot](https://github.com/tsuyoshiwada/storybook-chrome-screenshot)
|
||||
|
||||
Save the screenshot image of your stories. via [Puppeteer](https://github.com/GoogleChrome/puppeteer).
|
||||
|
||||
@ -5,12 +5,12 @@ title: 'Storybook for Vue'
|
||||
|
||||
You may have tried to use our quick start guide to setup your project for Storybook. If you want to set up Storybook manually, this is the guide for you.
|
||||
|
||||
> This will also help you to understand how Storybook works.
|
||||
> This will also help you understand how Storybook works.
|
||||
|
||||
## Starter Guide Vue
|
||||
|
||||
Storybook has its own Webpack setup and a dev server.
|
||||
Webpack setup is very similar to [Vue CLI](https://github.com/vuejs/vue-cli), but allows you to [configure as you want](/configurations/custom-webpack-config/).
|
||||
The Webpack setup is very similar to [Vue CLI's](https://github.com/vuejs/vue-cli), but allows you to [configure it however you want](/configurations/custom-webpack-config/).
|
||||
|
||||
In this guide, we are trying to set up Storybook for your Vue project.
|
||||
|
||||
@ -43,13 +43,13 @@ npm i --save vue
|
||||
Storybook can be configured in several different ways.
|
||||
That’s why we need a config directory. We've added a `-c` option to the above NPM script mentioning `.storybook` as the config directory.
|
||||
|
||||
There's 3 things you need to tell Storybook to do:
|
||||
There are 3 things you need to tell Storybook to do:
|
||||
|
||||
1. In stories, if use the custom components without Vue `components` option, you need to register these with `Vue.component`.
|
||||
2. In stories, if use the Vue plugins (e.g. `vuex`), you need to install these with `Vue.use`.
|
||||
1. Import and globally register with [`Vue.component()`](https://vuejs.org/v2/api/#Vue-component) any global custom components just like you did with your project. (Note: [components registered locally](https://vuejs.org/v2/guide/components.html#Local-Registration) will be brought in automatically).
|
||||
2. For any required Vue plugins (e.g. `vuex`), you'll also need to [install these with `Vue.use`](https://vuejs.org/v2/api/#Vue-use).
|
||||
3. Require your stories.
|
||||
|
||||
To do that, simply create a file at `.storybook/config.js` with the following content:
|
||||
Here's an example `.storybook/config.js` to get you started:
|
||||
|
||||
```js
|
||||
import { configure } from '@storybook/vue';
|
||||
@ -74,9 +74,9 @@ function loadStories() {
|
||||
configure(loadStories, module);
|
||||
```
|
||||
|
||||
That'll register all your custom components, install all Vue plugins and load stories in `../stories/index.js`.
|
||||
This example registered your custom `Button.vue` component, installed the Vuex plugin, and loaded you Storybook stories defined in `../stories/index.js`.
|
||||
|
||||
All custom components and All Vue plugins should be registered before calling `configure`.
|
||||
All custom components and Vue plugins should be registered before calling `configure()`.
|
||||
|
||||
> This stories folder is just an example, you can load stories from wherever you want to.
|
||||
> We think stories are best located close to the source files.
|
||||
|
||||
@ -1,3 +1,10 @@
|
||||
carbon:
|
||||
thumbnail: ./thumbnails/carbon.png
|
||||
title: Carbon Components
|
||||
description: IBM's Carbon Design System implemented in React.
|
||||
source: https://github.com/carbon-design-system/carbon-components-react
|
||||
demo: http://react.carbondesignsystem.com
|
||||
site: http://carbondesignsystem.com
|
||||
airbnb:
|
||||
thumbnail: ./thumbnails/airbnb.jpg
|
||||
title: Airbnb Dates
|
||||
|
||||
BIN
docs/pages/examples/thumbnails/carbon.png
Normal file
BIN
docs/pages/examples/thumbnails/carbon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
@ -7,7 +7,9 @@ export const colors = colorPairsPicker(config.baseColor, {
|
||||
contrast: 5.5,
|
||||
});
|
||||
|
||||
const darker = chroma(config.baseColor).darken(10).hex();
|
||||
const darker = chroma(config.baseColor)
|
||||
.darken(10)
|
||||
.hex();
|
||||
export const activeColors = colorPairsPicker(darker, {
|
||||
contrast: 7,
|
||||
});
|
||||
|
||||
@ -10,9 +10,7 @@ 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
|
||||
|
||||
@ -2,7 +2,7 @@ import React from 'react';
|
||||
import logo from './logo.svg';
|
||||
import './App.css';
|
||||
|
||||
const App = () =>
|
||||
const App = () => (
|
||||
<div className="App">
|
||||
<div className="App-header">
|
||||
<img src={logo} className="App-logo" alt="logo" />
|
||||
@ -11,6 +11,7 @@ const App = () =>
|
||||
<p className="App-intro">
|
||||
To get started, edit <code>src/App.js</code> and save to reload.
|
||||
</p>
|
||||
</div>;
|
||||
</div>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -2654,9 +2654,9 @@ exports[`Storyshots WithEvents Logger 1`] = `
|
||||
Object {
|
||||
"color": "rgb(51, 51, 51)",
|
||||
"fontFamily": "
|
||||
-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Roboto\\",
|
||||
\\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif
|
||||
",
|
||||
-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Roboto\\",
|
||||
\\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif
|
||||
",
|
||||
"padding": 20,
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,10 +2,11 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
/** Button component description */
|
||||
const DocgenButton = ({ disabled, label, onClick }) =>
|
||||
const DocgenButton = ({ disabled, label, onClick }) => (
|
||||
<button disabled={disabled} onClick={onClick}>
|
||||
{label}
|
||||
</button>;
|
||||
</button>
|
||||
);
|
||||
|
||||
DocgenButton.defaultProps = {
|
||||
disabled: false,
|
||||
|
||||
@ -11,10 +11,11 @@ type PropsType = {
|
||||
};
|
||||
|
||||
/** Flow type button description */
|
||||
const FlowTypeButton = ({ label, onClick, disabled }: PropsType) =>
|
||||
const FlowTypeButton = ({ label, onClick, disabled }: PropsType) => (
|
||||
<button onClick={onClick} disabled={disabled}>
|
||||
{label}
|
||||
</button>;
|
||||
</button>
|
||||
);
|
||||
|
||||
FlowTypeButton.defaultProps = {
|
||||
disabled: false,
|
||||
|
||||
@ -1,16 +1,13 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const Container = ({ children, title, age, isAmazing }) =>
|
||||
const Container = ({ children, title, age, isAmazing }) => (
|
||||
<div title={title}>
|
||||
{children}
|
||||
{isAmazing ? '!!!' : ''}
|
||||
{age
|
||||
? <div>
|
||||
age = {age}
|
||||
</div>
|
||||
: null}
|
||||
</div>;
|
||||
{age ? <div>age = {age}</div> : null}
|
||||
</div>
|
||||
);
|
||||
|
||||
Container.propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
|
||||
@ -58,7 +58,7 @@ export default class Logger extends Component {
|
||||
<div style={styles.wrapper}>
|
||||
<h1>Logger</h1>
|
||||
<dl>
|
||||
{events.map(({ id, name, payload }) =>
|
||||
{events.map(({ id, name, payload }) => (
|
||||
<div style={styles.item} key={id}>
|
||||
<dt>
|
||||
<b>Event name:</b> {name}
|
||||
@ -67,7 +67,7 @@ export default class Logger extends Component {
|
||||
<b>Event payload:</b> {json.plain(payload)}
|
||||
</dd>
|
||||
</div>
|
||||
)}
|
||||
))}
|
||||
</dl>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -41,7 +41,7 @@ const emit = emiter.emit.bind(emiter);
|
||||
|
||||
storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
|
||||
|
||||
const InfoButton = () =>
|
||||
const InfoButton = () => (
|
||||
<span
|
||||
style={{
|
||||
fontFamily: 'sans-serif',
|
||||
@ -54,31 +54,33 @@ const InfoButton = () =>
|
||||
borderRadius: '0px 0px 0px 5px',
|
||||
}}
|
||||
>
|
||||
{' '}Show Info{' '}
|
||||
</span>;
|
||||
{' '}
|
||||
Show Info{' '}
|
||||
</span>
|
||||
);
|
||||
|
||||
storiesOf('Button', module)
|
||||
.addDecorator(withKnobs)
|
||||
.add('with text', () =>
|
||||
.add('with text', () => (
|
||||
<Button onClick={action('clicked')}>
|
||||
{setOptions({ selectedAddonPanel: 'storybook/actions/actions-panel' })}
|
||||
Hello Button
|
||||
</Button>
|
||||
)
|
||||
.add('with some emoji', () =>
|
||||
))
|
||||
.add('with some emoji', () => (
|
||||
<Button onClick={action('clicked')}>
|
||||
{setOptions({ selectedAddonPanel: 'storybook/actions/actions-panel' })}
|
||||
😀 😎 👍 💯
|
||||
</Button>
|
||||
)
|
||||
.add('with notes', () =>
|
||||
))
|
||||
.add('with notes', () => (
|
||||
<WithNotes notes={'A very simple button'}>
|
||||
<Button>
|
||||
{setOptions({ selectedAddonPanel: 'storybook/notes/panel' })}
|
||||
Check my notes in the notes panel
|
||||
</Button>
|
||||
</WithNotes>
|
||||
)
|
||||
))
|
||||
.add('with knobs', () => {
|
||||
setOptions({ selectedAddonPanel: 'storybooks/storybook-addon-knobs' });
|
||||
const name = text('Name', 'Storyteller');
|
||||
@ -110,70 +112,57 @@ storiesOf('Button', module)
|
||||
|
||||
return (
|
||||
<div style={style}>
|
||||
<p>
|
||||
{intro}
|
||||
</p>
|
||||
<p>
|
||||
My birthday is: {new Date(birthday).toLocaleDateString('en-US', dateOptions)}
|
||||
</p>
|
||||
<p>
|
||||
My wallet contains: ${dollars.toFixed(2)}
|
||||
</p>
|
||||
<p>{intro}</p>
|
||||
<p>My birthday is: {new Date(birthday).toLocaleDateString('en-US', dateOptions)}</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>
|
||||
)}
|
||||
</ul>
|
||||
<p>
|
||||
{salutation}
|
||||
</p>
|
||||
<ul>{items.map(item => <li key={item}>{item}</li>)}</ul>
|
||||
<p>{salutation}</p>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
.addWithInfo(
|
||||
'with some info',
|
||||
'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its painful API.',
|
||||
context =>
|
||||
context => (
|
||||
<Container>
|
||||
click the <InfoButton /> label in top right for info about "{context.story}"
|
||||
</Container>
|
||||
)
|
||||
)
|
||||
.add(
|
||||
'with new info',
|
||||
withInfo(
|
||||
'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its new painless API.'
|
||||
)(context =>
|
||||
)(context => (
|
||||
<Container>
|
||||
{setOptions({ selectedAddonPanel: 'storybook/info/info-panel' })}
|
||||
click the <InfoButton /> label in top right for info about "{context.story}"
|
||||
</Container>
|
||||
)
|
||||
))
|
||||
)
|
||||
.add(
|
||||
'addons composition',
|
||||
withInfo('see Notes panel for composition info')(
|
||||
withNotes('Composition: Info(Notes())')(context =>
|
||||
withNotes('Composition: Info(Notes())')(context => (
|
||||
<div>
|
||||
{setOptions({ selectedAddonPanel: 'storybook/notes/panel' })}
|
||||
click the <InfoButton /> label in top right for info about "{context.story}"
|
||||
</div>
|
||||
)
|
||||
))
|
||||
)
|
||||
);
|
||||
|
||||
storiesOf('AddonInfo.DocgenButton', module).addWithInfo('DocgenButton', 'Some Description', () =>
|
||||
storiesOf('AddonInfo.DocgenButton', module).addWithInfo('DocgenButton', 'Some Description', () => (
|
||||
<DocgenButton onClick={action('clicked')} label="Docgen Button" />
|
||||
);
|
||||
));
|
||||
|
||||
storiesOf(
|
||||
'AddonInfo.FlowTypeButton',
|
||||
module
|
||||
).addWithInfo('FlowTypeButton', 'Some Description', () =>
|
||||
).addWithInfo('FlowTypeButton', 'Some Description', () => (
|
||||
<FlowTypeButton onClick={action('clicked')} label="Flow Typed Button" />
|
||||
);
|
||||
));
|
||||
|
||||
storiesOf('App', module).add('full app', () => <App />);
|
||||
|
||||
@ -182,7 +171,7 @@ storiesOf('Some really long story kind description', module)
|
||||
.add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>);
|
||||
|
||||
storiesOf('WithEvents', module)
|
||||
.addDecorator(getStory =>
|
||||
.addDecorator(getStory => (
|
||||
<WithEvents
|
||||
emit={emit}
|
||||
events={[
|
||||
@ -235,7 +224,7 @@ storiesOf('WithEvents', module)
|
||||
>
|
||||
{getStory()}
|
||||
</WithEvents>
|
||||
)
|
||||
))
|
||||
.add('Logger', () => <Logger emiter={emiter} />);
|
||||
|
||||
storiesOf('withNotes', module)
|
||||
@ -243,28 +232,20 @@ storiesOf('withNotes', module)
|
||||
.add('with some emoji', withNotes('My notes on emojies')(() => <p>🤔😳😯😮</p>))
|
||||
.add(
|
||||
'with a button and some emoji',
|
||||
withNotes('My notes on a button with emojies')(() =>
|
||||
withNotes('My notes on a button with emojies')(() => (
|
||||
<Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
|
||||
)
|
||||
))
|
||||
)
|
||||
.add('with old API', () =>
|
||||
.add('with old API', () => (
|
||||
<WithNotes notes="Hello">
|
||||
<Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
|
||||
</WithNotes>
|
||||
);
|
||||
));
|
||||
|
||||
storiesOf('component.base.Link', module)
|
||||
.addDecorator(withKnobs)
|
||||
.add('first', () =>
|
||||
<a>
|
||||
{text('firstLink', 'first link')}
|
||||
</a>
|
||||
)
|
||||
.add('second', () =>
|
||||
<a>
|
||||
{text('secondLink', 'second link')}
|
||||
</a>
|
||||
);
|
||||
.add('first', () => <a>{text('firstLink', 'first link')}</a>)
|
||||
.add('second', () => <a>{text('secondLink', 'second link')}</a>);
|
||||
|
||||
storiesOf('component.base.Span', module)
|
||||
.add('first', () => <span>first span</span>)
|
||||
@ -275,20 +256,20 @@ storiesOf('component.common.Div', module)
|
||||
.add('second', () => <div>second div</div>);
|
||||
|
||||
storiesOf('component.common.Table', module)
|
||||
.add('first', () =>
|
||||
.add('first', () => (
|
||||
<table>
|
||||
<tr>
|
||||
<td>first table</td>
|
||||
</tr>
|
||||
</table>
|
||||
)
|
||||
.add('second', () =>
|
||||
))
|
||||
.add('second', () => (
|
||||
<table>
|
||||
<tr>
|
||||
<td>first table</td>
|
||||
</tr>
|
||||
</table>
|
||||
);
|
||||
));
|
||||
|
||||
storiesOf('component.Button', module)
|
||||
.add('first', () => <button>first button</button>)
|
||||
@ -298,11 +279,7 @@ storiesOf('component.Button', module)
|
||||
|
||||
storiesOf('Cells/Molecules.Atoms/simple', module)
|
||||
.addDecorator(withKnobs)
|
||||
.add('with text', () =>
|
||||
<Button>
|
||||
{text('buttonText', 'Hello Button')}
|
||||
</Button>
|
||||
)
|
||||
.add('with text', () => <Button>{text('buttonText', 'Hello Button')}</Button>)
|
||||
.add('with some emoji', () => <Button>😀 😎 👍 💯</Button>);
|
||||
|
||||
storiesOf('Cells/Molecules/Atoms.more', module)
|
||||
|
||||
@ -11,16 +11,16 @@ import { baseFonts, RoutedLink, MenuLink } from '@storybook/components';
|
||||
css.global('body', baseFonts);
|
||||
|
||||
storiesOf('Navigation', module)
|
||||
.add('Routed link', () =>
|
||||
.add('Routed link', () => (
|
||||
<RoutedLink href="/" onClick={action('navigation triggered')}>
|
||||
Try clicking with different mouse buttons and modifier keys (shift/ctrl/alt/cmd)
|
||||
</RoutedLink>
|
||||
)
|
||||
))
|
||||
.addDecorator(withKnobs)
|
||||
.add('Menu link', () =>
|
||||
.add('Menu link', () => (
|
||||
<Div width={number('Container width', 90, { range: true, min: 50, max: 200, step: 10 })}>
|
||||
<MenuLink href="/" onClick={action('navigation triggered')} active={boolean('Active', true)}>
|
||||
{text('Text', 'Menu link item')}
|
||||
</MenuLink>
|
||||
</Div>
|
||||
);
|
||||
));
|
||||
|
||||
@ -4,9 +4,7 @@ import { TouchableNativeFeedback } from 'react-native';
|
||||
|
||||
export default function Button(props) {
|
||||
return (
|
||||
<TouchableNativeFeedback onPress={props.onPress}>
|
||||
{props.children}
|
||||
</TouchableNativeFeedback>
|
||||
<TouchableNativeFeedback onPress={props.onPress}>{props.children}</TouchableNativeFeedback>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -3,11 +3,7 @@ import PropTypes from 'prop-types';
|
||||
import { TouchableHighlight } from 'react-native';
|
||||
|
||||
export default function Button(props) {
|
||||
return (
|
||||
<TouchableHighlight onPress={props.onPress}>
|
||||
{props.children}
|
||||
</TouchableHighlight>
|
||||
);
|
||||
return <TouchableHighlight onPress={props.onPress}>{props.children}</TouchableHighlight>;
|
||||
}
|
||||
|
||||
Button.defaultProps = {
|
||||
|
||||
@ -4,11 +4,7 @@ import { View } from 'react-native';
|
||||
import style from './style';
|
||||
|
||||
export default function CenterView(props) {
|
||||
return (
|
||||
<View style={style.main}>
|
||||
{props.children}
|
||||
</View>
|
||||
);
|
||||
return <View style={style.main}>{props.children}</View>;
|
||||
}
|
||||
|
||||
CenterView.defaultProps = {
|
||||
|
||||
@ -12,18 +12,14 @@ import Welcome from './Welcome';
|
||||
storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
|
||||
|
||||
storiesOf('Button', module)
|
||||
.addDecorator(getStory =>
|
||||
<CenterView>
|
||||
{getStory()}
|
||||
</CenterView>
|
||||
)
|
||||
.add('with text', () =>
|
||||
.addDecorator(getStory => <CenterView>{getStory()}</CenterView>)
|
||||
.add('with text', () => (
|
||||
<Button onPress={action('clicked-text')}>
|
||||
<Text>Hello Button</Text>
|
||||
</Button>
|
||||
)
|
||||
.add('with some emoji', () =>
|
||||
))
|
||||
.add('with some emoji', () => (
|
||||
<Button onPress={action('clicked-emoji')}>
|
||||
<Text>😀 😎 👍 💯</Text>
|
||||
</Button>
|
||||
);
|
||||
));
|
||||
|
||||
@ -13,9 +13,9 @@
|
||||
"react-native": "0.44.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-jest": "20.0.3",
|
||||
"babel-jest": "21.0.0",
|
||||
"babel-preset-react-native": "1.9.2",
|
||||
"jest": "^20.0.4",
|
||||
"jest": "^21.0.1",
|
||||
"react-test-renderer": "16.0.0-alpha.6",
|
||||
"@storybook/addon-actions": "file:../../packs/storybook-addon-actions.tgz",
|
||||
"@storybook/addon-links": "file:../../packs/storybook-addon-links.tgz",
|
||||
|
||||
@ -4,9 +4,7 @@ import { TouchableNativeFeedback } from 'react-native';
|
||||
|
||||
export default function Button(props) {
|
||||
return (
|
||||
<TouchableNativeFeedback onPress={props.onPress}>
|
||||
{props.children}
|
||||
</TouchableNativeFeedback>
|
||||
<TouchableNativeFeedback onPress={props.onPress}>{props.children}</TouchableNativeFeedback>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -3,11 +3,7 @@ import PropTypes from 'prop-types';
|
||||
import { TouchableHighlight } from 'react-native';
|
||||
|
||||
export default function Button(props) {
|
||||
return (
|
||||
<TouchableHighlight onPress={props.onPress}>
|
||||
{props.children}
|
||||
</TouchableHighlight>
|
||||
);
|
||||
return <TouchableHighlight onPress={props.onPress}>{props.children}</TouchableHighlight>;
|
||||
}
|
||||
|
||||
Button.defaultProps = {
|
||||
|
||||
@ -4,11 +4,7 @@ import { View } from 'react-native';
|
||||
import style from './style';
|
||||
|
||||
export default function CenterView(props) {
|
||||
return (
|
||||
<View style={style.main}>
|
||||
{props.children}
|
||||
</View>
|
||||
);
|
||||
return <View style={style.main}>{props.children}</View>;
|
||||
}
|
||||
|
||||
CenterView.defaultProps = {
|
||||
|
||||
@ -12,18 +12,14 @@ import Welcome from './Welcome';
|
||||
storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
|
||||
|
||||
storiesOf('Button', module)
|
||||
.addDecorator(getStory =>
|
||||
<CenterView>
|
||||
{getStory()}
|
||||
</CenterView>
|
||||
)
|
||||
.add('with text', () =>
|
||||
.addDecorator(getStory => <CenterView>{getStory()}</CenterView>)
|
||||
.add('with text', () => (
|
||||
<Button onPress={action('clicked-text')}>
|
||||
<Text>Hello Button</Text>
|
||||
</Button>
|
||||
)
|
||||
.add('with some emoji', () =>
|
||||
))
|
||||
.add('with some emoji', () => (
|
||||
<Button onPress={action('clicked-emoji')}>
|
||||
<Text>😀 😎 👍 💯</Text>
|
||||
</Button>
|
||||
);
|
||||
));
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
"@storybook/addon-centered": "^3.2.1",
|
||||
"@storybook/addon-notes": "^3.2.0",
|
||||
"@storybook/addon-knobs": "^3.2.0",
|
||||
"babel-core": "^6.25.0",
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-loader": "^7.0.0",
|
||||
"babel-preset-env": "^1.6.0",
|
||||
"cross-env": "^3.0.0",
|
||||
|
||||
@ -174,7 +174,7 @@ storiesOf('Addon Notes', module)
|
||||
.add(
|
||||
'Note with HTML',
|
||||
withNotes({
|
||||
notes: `
|
||||
text: `
|
||||
<h2>My notes on emojies</h2>
|
||||
|
||||
<em>It's not all that important to be honest, but..</em>
|
||||
|
||||
@ -23,5 +23,5 @@
|
||||
"examples/*"
|
||||
],
|
||||
"concurrency": 1,
|
||||
"version": "3.2.8"
|
||||
"version": "3.2.9"
|
||||
}
|
||||
|
||||
@ -51,7 +51,9 @@ export class AddonStore {
|
||||
}
|
||||
|
||||
loadAddons(api) {
|
||||
Object.keys(this.loaders).map(name => this.loaders[name]).forEach(loader => loader(api));
|
||||
Object.keys(this.loaders)
|
||||
.map(name => this.loaders[name])
|
||||
.forEach(loader => loader(api));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -39,7 +39,9 @@ export class PostmsgTransport {
|
||||
const buffer = this._buffer;
|
||||
this._buffer = [];
|
||||
buffer.forEach(item => {
|
||||
this.send(item.event).then(item.resolve).catch(item.reject);
|
||||
this.send(item.event)
|
||||
.then(item.resolve)
|
||||
.catch(item.reject);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -67,7 +67,9 @@ export default class Channel {
|
||||
|
||||
_randomId() {
|
||||
// generates a random 13 character string
|
||||
return Math.random().toString(16).slice(2);
|
||||
return Math.random()
|
||||
.toString(16)
|
||||
.slice(2);
|
||||
}
|
||||
|
||||
_handleEvent(event) {
|
||||
|
||||
@ -6,7 +6,7 @@ const chalk = require('chalk');
|
||||
const helpers = require('../../lib/helpers');
|
||||
|
||||
module.exports = Promise.all([
|
||||
latestVersion('@storybook/react'),
|
||||
latestVersion('@storybook/react-native'),
|
||||
latestVersion('@storybook/addon-actions'),
|
||||
latestVersion('@storybook/addon-links'),
|
||||
latestVersion('prop-types'),
|
||||
@ -33,7 +33,7 @@ module.exports = Promise.all([
|
||||
packageJson.dependencies = packageJson.dependencies || {};
|
||||
packageJson.devDependencies = packageJson.devDependencies || {};
|
||||
|
||||
packageJson.devDependencies['@storybook/react'] = `^${storybookVersion}`;
|
||||
packageJson.devDependencies['@storybook/react-native'] = `^${storybookVersion}`;
|
||||
packageJson.devDependencies['@storybook/addon-actions'] = `^${actionsVersion}`;
|
||||
packageJson.devDependencies['@storybook/addon-links'] = `^${linksVersion}`;
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user