mirror of
https://github.com/storybookjs/storybook.git
synced 2025-03-16 05:03:11 +08:00
FIX linting after prettier upgrade
This commit is contained in:
Norbert de Langen
parent
4966a71e23
commit
d0b752d8d3
@ -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>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
@ -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 = [];
|
||||
|
||||
@ -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} />
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@ -75,7 +75,10 @@ describe('preview.client_api', () => {
|
||||
},
|
||||
});
|
||||
|
||||
api.storiesOf('none', module).aa().bb();
|
||||
api
|
||||
.storiesOf('none', module)
|
||||
.aa()
|
||||
.bb();
|
||||
expect(data).toEqual(['foo', 'bar']);
|
||||
});
|
||||
|
||||
|
||||
@ -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({
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -75,7 +75,10 @@ describe('preview.client_api', () => {
|
||||
},
|
||||
});
|
||||
|
||||
api.storiesOf('none', module).aa().bb();
|
||||
api
|
||||
.storiesOf('none', module)
|
||||
.aa()
|
||||
.bb();
|
||||
expect(data).toEqual(['foo', 'bar']);
|
||||
});
|
||||
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
);
|
||||
));
|
||||
|
||||
@ -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>
|
||||
);
|
||||
));
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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>
|
||||
);
|
||||
));
|
||||
|
||||
@ -2,10 +2,9 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { TouchableNativeFeedback } from 'react-native';
|
||||
|
||||
const Button = props =>
|
||||
<TouchableNativeFeedback onPress={props.onPress}>
|
||||
{props.children}
|
||||
</TouchableNativeFeedback>;
|
||||
const Button = props => (
|
||||
<TouchableNativeFeedback onPress={props.onPress}>{props.children}</TouchableNativeFeedback>
|
||||
);
|
||||
|
||||
Button.propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
|
||||
@ -2,10 +2,9 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { TouchableHighlight } from 'react-native';
|
||||
|
||||
const Button = props =>
|
||||
<TouchableHighlight onPress={props.onPress}>
|
||||
{props.children}
|
||||
</TouchableHighlight>;
|
||||
const Button = props => (
|
||||
<TouchableHighlight onPress={props.onPress}>{props.children}</TouchableHighlight>
|
||||
);
|
||||
|
||||
Button.propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
|
||||
@ -3,10 +3,7 @@ import PropTypes from 'prop-types';
|
||||
import { View } from 'react-native';
|
||||
import style from './style';
|
||||
|
||||
const CenterView = props =>
|
||||
<View style={style.main}>
|
||||
{props.children}
|
||||
</View>;
|
||||
const CenterView = props => <View style={style.main}>{props.children}</View>;
|
||||
|
||||
CenterView.propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
|
||||
@ -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>
|
||||
);
|
||||
));
|
||||
|
||||
@ -31,7 +31,10 @@ exports.commandLog = function commandLog(message) {
|
||||
|
||||
if (!errorInfo) return;
|
||||
|
||||
const newErrorInfo = errorInfo.split('\n').map(line => ` ${chalk.dim(line)}`).join('\n');
|
||||
const newErrorInfo = errorInfo
|
||||
.split('\n')
|
||||
.map(line => ` ${chalk.dim(line)}`)
|
||||
.join('\n');
|
||||
logger.error(`${newErrorInfo}\n`);
|
||||
return;
|
||||
}
|
||||
@ -43,7 +46,10 @@ exports.commandLog = function commandLog(message) {
|
||||
};
|
||||
|
||||
exports.paddedLog = function paddedLog(message) {
|
||||
const newMessage = message.split('\n').map(line => ` ${line}`).join('\n');
|
||||
const newMessage = message
|
||||
.split('\n')
|
||||
.map(line => ` ${line}`)
|
||||
.join('\n');
|
||||
|
||||
logger.log(newMessage);
|
||||
};
|
||||
|
||||
@ -24,11 +24,7 @@ export default class RoutedLink extends React.Component {
|
||||
const { onClick } = this;
|
||||
const { href, children, ...rest } = this.props;
|
||||
const props = { href, ...rest, onClick };
|
||||
return (
|
||||
<a {...props}>
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
return <a {...props}>{children}</a>;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -32,9 +32,11 @@ export default class ReactProvider extends Provider {
|
||||
inp = i;
|
||||
}}
|
||||
value={
|
||||
this.api.getQueryParam('text') === undefined
|
||||
? 'ONE'
|
||||
: this.api.getQueryParam('text')
|
||||
this.api.getQueryParam('text') === undefined ? (
|
||||
'ONE'
|
||||
) : (
|
||||
this.api.getQueryParam('text')
|
||||
)
|
||||
}
|
||||
onChange={() => {
|
||||
this.api.setQueryParams({ text: inp.value });
|
||||
|
||||
@ -34,18 +34,20 @@ class DownPanel extends Component {
|
||||
}
|
||||
|
||||
renderPanels() {
|
||||
return Object.keys(this.props.panels).sort().map(name => {
|
||||
const panelStyle = { display: 'none' };
|
||||
const panel = this.props.panels[name];
|
||||
if (name === this.props.selectedPanel) {
|
||||
Object.assign(panelStyle, { flex: 1, display: 'flex' });
|
||||
}
|
||||
return (
|
||||
<div key={name} style={panelStyle} role="tabpanel">
|
||||
{panel.render()}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
return Object.keys(this.props.panels)
|
||||
.sort()
|
||||
.map(name => {
|
||||
const panelStyle = { display: 'none' };
|
||||
const panel = this.props.panels[name];
|
||||
if (name === this.props.selectedPanel) {
|
||||
Object.assign(panelStyle, { flex: 1, display: 'flex' });
|
||||
}
|
||||
return (
|
||||
<div key={name} style={panelStyle} role="tabpanel">
|
||||
{panel.render()}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
renderEmpty() {
|
||||
@ -61,9 +63,7 @@ class DownPanel extends Component {
|
||||
<div style={style.tabbar} role="tablist">
|
||||
{this.renderTabs()}
|
||||
</div>
|
||||
<div style={style.content}>
|
||||
{this.renderPanels()}
|
||||
</div>
|
||||
<div style={style.content}>{this.renderPanels()}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -202,13 +202,12 @@ class Layout extends React.Component {
|
||||
>
|
||||
{conditionalRender(
|
||||
showLeftPanel,
|
||||
() =>
|
||||
() => (
|
||||
<div style={leftPanelStyle(leftPanelOnTop)}>
|
||||
<div style={{ flexGrow: 1, height: '100%', width: '100%' }}>
|
||||
{leftPanel()}
|
||||
</div>
|
||||
<div style={{ flexGrow: 1, height: '100%', width: '100%' }}>{leftPanel()}</div>
|
||||
<USplit shift={5} split={storiesSplit} />
|
||||
</div>,
|
||||
</div>
|
||||
),
|
||||
() => <span />
|
||||
)}
|
||||
|
||||
@ -238,11 +237,12 @@ class Layout extends React.Component {
|
||||
</div>
|
||||
{conditionalRender(
|
||||
showDownPanel,
|
||||
() =>
|
||||
() => (
|
||||
<div style={downPanelStyle(downPanelInRight)}>
|
||||
<USplit shift={-5} split={addonSplit} />
|
||||
{downPanel()}
|
||||
</div>,
|
||||
</div>
|
||||
),
|
||||
() => <span />
|
||||
)}
|
||||
</SplitPane>
|
||||
|
||||
@ -41,10 +41,11 @@ const spanStyle = {
|
||||
};
|
||||
|
||||
//eslint-disable-next-line
|
||||
const USplit = ({ shift, split }) =>
|
||||
const USplit = ({ shift, split }) => (
|
||||
<div style={wrapStyle[split](shift)}>
|
||||
<span style={spanStyle[split]()} />
|
||||
</div>;
|
||||
</div>
|
||||
);
|
||||
|
||||
USplit.PropTypes = {
|
||||
shift: PropTypes.number,
|
||||
|
||||
@ -50,9 +50,9 @@ class LeftPanel extends Component {
|
||||
onChange={text => onStoryFilter(text)}
|
||||
/>
|
||||
<div style={scrollStyle}>
|
||||
{hierarchyContainsStories(storiesHierarchy)
|
||||
? <Stories {...pick(this.props, storyProps)} />
|
||||
: null}
|
||||
{hierarchyContainsStories(storiesHierarchy) ? (
|
||||
<Stories {...pick(this.props, storyProps)} />
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -51,7 +51,11 @@ describe('manager.ui.components.left_panel.stories', () => {
|
||||
/>
|
||||
);
|
||||
|
||||
const list = wrap.find('div').first().children('div').last();
|
||||
const list = wrap
|
||||
.find('div')
|
||||
.first()
|
||||
.children('div')
|
||||
.last();
|
||||
|
||||
expect(list.text()).toBe('');
|
||||
});
|
||||
@ -281,7 +285,10 @@ describe('manager.ui.components.left_panel.stories', () => {
|
||||
/>
|
||||
);
|
||||
|
||||
const kind = wrap.find('[data-name="a"]').filterWhere(el => el.text() === 'a').last();
|
||||
const kind = wrap
|
||||
.find('[data-name="a"]')
|
||||
.filterWhere(el => el.text() === 'a')
|
||||
.last();
|
||||
kind.simulate('click');
|
||||
|
||||
onSelectStory.mockClear();
|
||||
|
||||
@ -50,10 +50,6 @@ export function highlightNode(node, style) {
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<span key={key}>
|
||||
{part.text}
|
||||
</span>
|
||||
);
|
||||
return <span key={key}>{part.text}</span>;
|
||||
});
|
||||
}
|
||||
|
||||
@ -97,10 +97,11 @@ export default class TextFilter extends React.Component {
|
||||
/>
|
||||
</div>
|
||||
{this.state.query &&
|
||||
this.state.query.length &&
|
||||
this.state.query.length && (
|
||||
<button style={clearButtonStyle} onClick={this.fireOnClear} className="clear">
|
||||
×
|
||||
</button>}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -65,29 +65,21 @@ export const Keys = ({ shortcutKeys }) => {
|
||||
if (shortcutKeys.length === 1) {
|
||||
return (
|
||||
<span>
|
||||
<b style={commandStyle}>
|
||||
{shortcutKeys[0]}
|
||||
</b>
|
||||
<b style={commandStyle}>{shortcutKeys[0]}</b>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
// if we have multiple key combinations for a shortcut
|
||||
const keys = shortcutKeys.map((key, index, arr) =>
|
||||
const keys = shortcutKeys.map((key, index, arr) => (
|
||||
<span key={key}>
|
||||
<b style={commandStyle}>
|
||||
{key}
|
||||
</b>
|
||||
<b style={commandStyle}>{key}</b>
|
||||
{/* add / & space if it is not a last key combination */}
|
||||
{arr.length - 1 !== index ? <span>/ </span> : ''}
|
||||
</span>
|
||||
);
|
||||
));
|
||||
|
||||
return (
|
||||
<span>
|
||||
{keys}
|
||||
</span>
|
||||
);
|
||||
return <span>{keys}</span>;
|
||||
};
|
||||
|
||||
Keys.propTypes = {
|
||||
@ -95,12 +87,12 @@ Keys.propTypes = {
|
||||
};
|
||||
|
||||
export const Shortcuts = ({ appShortcuts }) => {
|
||||
const shortcuts = appShortcuts.map(shortcut =>
|
||||
const shortcuts = appShortcuts.map(shortcut => (
|
||||
<div key={shortcut.name}>
|
||||
<Keys shortcutKeys={shortcut.keys} />
|
||||
{shortcut.name}
|
||||
</div>
|
||||
);
|
||||
));
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
@ -101,8 +101,7 @@
|
||||
"git add"
|
||||
]
|
||||
},
|
||||
"verbose": true,
|
||||
"concurrent": false
|
||||
"verbose": true
|
||||
},
|
||||
"pr-log": {
|
||||
"skipLabels": [
|
||||
|
||||
15
scripts/bootstrap.js
vendored
15
scripts/bootstrap.js
vendored
@ -9,7 +9,10 @@ const { lstatSync, readdirSync } = require('fs');
|
||||
const { join } = require('path');
|
||||
|
||||
const isTgz = source => lstatSync(source).isFile() && source.match(/.tgz$/);
|
||||
const getDirectories = source => readdirSync(source).map(name => join(source, name)).filter(isTgz);
|
||||
const getDirectories = source =>
|
||||
readdirSync(source)
|
||||
.map(name => join(source, name))
|
||||
.filter(isTgz);
|
||||
|
||||
log.heading = 'storybook';
|
||||
const prefix = 'bootstrap';
|
||||
@ -111,7 +114,11 @@ Object.keys(tasks).forEach(key => {
|
||||
});
|
||||
|
||||
let selection;
|
||||
if (!Object.keys(tasks).map(key => tasks[key].value).filter(Boolean).length) {
|
||||
if (
|
||||
!Object.keys(tasks)
|
||||
.map(key => tasks[key].value)
|
||||
.filter(Boolean).length
|
||||
) {
|
||||
selection = inquirer
|
||||
.prompt([
|
||||
{
|
||||
@ -150,7 +157,9 @@ if (!Object.keys(tasks).map(key => tasks[key].value).filter(Boolean).length) {
|
||||
});
|
||||
} else {
|
||||
selection = Promise.resolve(
|
||||
Object.keys(tasks).map(key => tasks[key]).filter(item => item.value === true)
|
||||
Object.keys(tasks)
|
||||
.map(key => tasks[key])
|
||||
.filter(item => item.value === true)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user