mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-01 05:05:25 +08:00
Norbert de Langen
GitHub
commit
ead1e3d7ed
@ -47,9 +47,12 @@ jobs:
|
||||
- checkout
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
name: Generate static examples
|
||||
command: yarn build-storybooks
|
||||
- run:
|
||||
name: Run chromatic on the pre-built storybook
|
||||
command: yarn chromatic -- -d ./storybook-static
|
||||
command: yarn chromatic
|
||||
packtracker:
|
||||
<<: *defaults
|
||||
steps:
|
||||
@ -352,4 +355,4 @@ workflows:
|
||||
- test
|
||||
- chromatic:
|
||||
requires:
|
||||
- examples
|
||||
- build
|
||||
|
||||
17
.eslintrc.js
17
.eslintrc.js
@ -3,6 +3,22 @@ const ignore = 0;
|
||||
module.exports = {
|
||||
root: true,
|
||||
extends: ['@storybook/eslint-config-storybook'],
|
||||
rules: {
|
||||
'import/extensions': [
|
||||
'error',
|
||||
'never',
|
||||
{ ignorePackages: true, md: 'always', svg: 'always', json: 'always', tag: 'always' },
|
||||
],
|
||||
'import/no-unresolved': [2, { ignore: ['@storybook'] }],
|
||||
'react/state-in-constructor': ignore,
|
||||
'react/static-property-placement': ignore,
|
||||
'react/jsx-props-no-spreading': ignore,
|
||||
'react/jsx-fragments': ignore,
|
||||
'@typescript-eslint/ban-ts-ignore': ignore,
|
||||
'@typescript-eslint/no-object-literal-type-assertion': ignore,
|
||||
'react/sort-comp': 'warn',
|
||||
'max-classes-per-file': ignore,
|
||||
},
|
||||
overrides: [
|
||||
{
|
||||
files: [
|
||||
@ -14,6 +30,7 @@ module.exports = {
|
||||
'docs/src/stories/**',
|
||||
],
|
||||
rules: {
|
||||
'@typescript-eslint/no-empty-function': ignore,
|
||||
'import/no-extraneous-dependencies': ignore,
|
||||
},
|
||||
},
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
/* eslint-disable @typescript-eslint/no-object-literal-type-assertion */
|
||||
import { document } from 'global';
|
||||
import axe, { AxeResults, ElementContext, RunOptions, Spec } from 'axe-core';
|
||||
import deprecate from 'util-deprecate';
|
||||
|
||||
@ -39,7 +39,7 @@
|
||||
"polished": "^3.3.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.8.3",
|
||||
"react-inspector": "^3.0.2",
|
||||
"react-inspector": "^4.0.0",
|
||||
"uuid": "^3.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -26,6 +26,8 @@ const safeDeepEqual = (a: any, b: any): boolean => {
|
||||
};
|
||||
|
||||
export default class ActionLogger extends Component<ActionLoggerProps, ActionLoggerState> {
|
||||
private mounted: boolean;
|
||||
|
||||
constructor(props: ActionLoggerProps) {
|
||||
super(props);
|
||||
|
||||
@ -73,8 +75,6 @@ export default class ActionLogger extends Component<ActionLoggerProps, ActionLog
|
||||
this.setState({ actions: [] });
|
||||
};
|
||||
|
||||
private mounted: boolean;
|
||||
|
||||
render() {
|
||||
const { actions = [] } = this.state;
|
||||
const { active } = this.props;
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
// eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion
|
||||
const parameters = {
|
||||
name: 'centered',
|
||||
parameterName: 'centered',
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
// eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion
|
||||
const styles = {
|
||||
style: {
|
||||
position: 'fixed',
|
||||
|
||||
@ -113,7 +113,7 @@ class Item extends Component<ItemProps, ItemState> {
|
||||
name: PropTypes.string.isRequired,
|
||||
title: PropTypes.string.isRequired,
|
||||
onEmit: PropTypes.func.isRequired,
|
||||
// eslint-disable-next-line react/forbid-prop-types, react/no-unused-prop-types
|
||||
// eslint-disable-next-line react/forbid-prop-types
|
||||
payload: PropTypes.any,
|
||||
};
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ const FETCH_OPTIONS = {
|
||||
export const getDefaultFetcher = (url: string) => {
|
||||
return (params: FetcherParams) => {
|
||||
const body = JSON.stringify(params);
|
||||
const options = Object.assign({ body }, FETCH_OPTIONS);
|
||||
const options = { body, ...FETCH_OPTIONS };
|
||||
return fetch(url, options).then((res: any) => res.json());
|
||||
};
|
||||
};
|
||||
|
||||
@ -75,12 +75,7 @@ function PreviewArray({
|
||||
items[`c${i}`] = ',';
|
||||
});
|
||||
if (val.length > maxPropArrayLength) {
|
||||
items.last = (
|
||||
<span>
|
||||
{indent(breakIntoNewLines, level)}
|
||||
{'…'}
|
||||
</span>
|
||||
);
|
||||
items.last = <span>{indent(breakIntoNewLines, level)}…</span>;
|
||||
} else {
|
||||
delete items[`c${val.length - 1}`];
|
||||
}
|
||||
@ -142,12 +137,7 @@ function PreviewObject({
|
||||
items[`m${i}`] = ',';
|
||||
});
|
||||
if (names.length > maxPropObjectKeys) {
|
||||
items.rest = (
|
||||
<span>
|
||||
{indent(breakIntoNewLines, level)}
|
||||
{'…'}
|
||||
</span>
|
||||
);
|
||||
items.rest = <span>{indent(breakIntoNewLines, level)}…</span>;
|
||||
} else {
|
||||
delete items[`m${names.length - 1}`];
|
||||
}
|
||||
|
||||
@ -167,7 +167,7 @@ class Story extends Component {
|
||||
...stylesheet.button.topRight,
|
||||
};
|
||||
|
||||
const infoStyle = Object.assign({}, stylesheet.info);
|
||||
const infoStyle = { ...stylesheet.info };
|
||||
if (!open) {
|
||||
infoStyle.display = 'none';
|
||||
}
|
||||
|
||||
@ -13,7 +13,7 @@ const PropertyLabel = ({ property, required }) => {
|
||||
return (
|
||||
<span style={styles.hasProperty}>
|
||||
{property}
|
||||
{required ? '' : '?'}:{' '}
|
||||
{required ? '' : '?'}:
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
/* eslint-disable react/prop-types */
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
|
||||
import { withInfo, setDefaults } from '.';
|
||||
import externalMdDocs from '../README.md';
|
||||
|
||||
/* eslint-disable */
|
||||
const TestComponent = ({ func, obj, array, number, string, bool, empty }) => (
|
||||
<div>
|
||||
<h1>{String(func)}</h1>
|
||||
@ -22,7 +23,6 @@ const TestComponent = ({ func, obj, array, number, string, bool, empty }) => (
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
/* eslint-enable */
|
||||
|
||||
const reactClassPath = 'some/path/TestComponent.jsx';
|
||||
const storybookReactClassMock = {
|
||||
@ -47,7 +47,6 @@ const testMarkdown = `# Test story
|
||||
containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)`;
|
||||
|
||||
describe('addon Info', () => {
|
||||
// eslint-disable-next-line react/prop-types
|
||||
const createStoryFn = Component => ({ name }) => (
|
||||
<div>
|
||||
It's a {name} story:
|
||||
|
||||
@ -272,7 +272,7 @@ const Panel = ({ tests }: PanelProps) => (
|
||||
<Placeholder>
|
||||
<Fragment>No tests found</Fragment>
|
||||
<Fragment>
|
||||
Learn how to{' '}
|
||||
Learn how to
|
||||
<Link
|
||||
href="https://github.com/storybookjs/storybook/tree/master/addons/jest"
|
||||
target="_blank"
|
||||
|
||||
@ -52,7 +52,7 @@
|
||||
"qs": "^6.6.0",
|
||||
"react-color": "^2.17.0",
|
||||
"react-lifecycles-compat": "^3.0.4",
|
||||
"react-select": "^3.0.0"
|
||||
"react-select": "^3.0.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/escape-html": "0.0.20",
|
||||
|
||||
@ -58,7 +58,7 @@ export default class KnobManager {
|
||||
|
||||
options: KnobManagerOptions = {};
|
||||
|
||||
calling: boolean = false;
|
||||
calling = false;
|
||||
|
||||
setChannel(channel: Channel) {
|
||||
this.channel = channel;
|
||||
|
||||
@ -15,6 +15,7 @@ import {
|
||||
} from '../index';
|
||||
|
||||
// Note: this is a helper to batch test return types and avoid "declared but never read" errors
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
function expectKnobOfType<T>(..._: T[]) {}
|
||||
|
||||
const groupId = 'GROUP-ID1';
|
||||
|
||||
@ -228,7 +228,6 @@ export default class KnobPanel extends PureComponent<KnobPanelProps> {
|
||||
render: ({ active }) => (
|
||||
<TabWrapper key={knobKeyGroupId} active={active}>
|
||||
<PropForm
|
||||
// eslint-disable-next-line no-use-before-define
|
||||
knobs={knobsArray.filter(
|
||||
knob => (knob.groupId || DEFAULT_GROUP_ID) === knobKeyGroupId
|
||||
)}
|
||||
@ -248,7 +247,7 @@ export default class KnobPanel extends PureComponent<KnobPanelProps> {
|
||||
<Placeholder>
|
||||
<Fragment>No knobs found</Fragment>
|
||||
<Fragment>
|
||||
Learn how to{' '}
|
||||
Learn how to
|
||||
<Link
|
||||
href="https://github.com/storybookjs/storybook/tree/master/addons/knobs"
|
||||
target="_blank"
|
||||
|
||||
@ -153,7 +153,7 @@ const NotesPanel = ({ active }: Props) => {
|
||||
<Placeholder>
|
||||
<Fragment>No notes yet</Fragment>
|
||||
<Fragment>
|
||||
Learn how to{' '}
|
||||
Learn how to
|
||||
<Link
|
||||
href="https://github.com/storybookjs/storybook/tree/master/addons/notes"
|
||||
target="_blank"
|
||||
|
||||
@ -16,7 +16,7 @@ export const withQuery = makeDecorator({
|
||||
? qs.parse(parameters, { ignoreQueryPrefix: true })
|
||||
: parameters;
|
||||
|
||||
const newQuery = qs.stringify(Object.assign({}, currentQuery, additionalQuery));
|
||||
const newQuery = qs.stringify({ ...currentQuery, ...additionalQuery });
|
||||
const newLocation = location.href.replace(location.search, `?${newQuery}`);
|
||||
|
||||
history.replaceState({}, document.title, newLocation);
|
||||
|
||||
@ -34,11 +34,11 @@
|
||||
"glob": "^7.1.3",
|
||||
"global": "^4.3.2",
|
||||
"jest-specific-snapshot": "^2.0.0",
|
||||
"read-pkg-up": "^6.0.0",
|
||||
"read-pkg-up": "^7.0.0",
|
||||
"regenerator-runtime": "^0.12.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"enzyme-to-json": "^3.3.5",
|
||||
"enzyme-to-json": "^3.4.1",
|
||||
"jest-emotion": "^10.0.17",
|
||||
"react": "^16.8.3"
|
||||
},
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
/* eslint-disable no-empty-function */
|
||||
/* eslint-disable @typescript-eslint/no-parameter-properties */
|
||||
/* eslint-disable no-useless-constructor */
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
// We could use NgComponentOutlet here but there's currently no easy way
|
||||
|
||||
@ -187,8 +187,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
stories
|
||||
</button>
|
||||
</NavButton>
|
||||
for a component called
|
||||
|
||||
for a component called
|
||||
<InlineCode>
|
||||
<code
|
||||
style={
|
||||
@ -231,8 +230,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
Button
|
||||
</code>
|
||||
</InlineCode>
|
||||
stories located at
|
||||
|
||||
stories located at
|
||||
<InlineCode>
|
||||
<code
|
||||
style={
|
||||
@ -255,8 +253,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.
|
||||
<br />
|
||||
Have a look at the
|
||||
|
||||
Have a look at the
|
||||
<Link
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
@ -278,8 +275,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
Writing Stories
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
section in our documentation.
|
||||
section in our documentation.
|
||||
</p>
|
||||
<Note>
|
||||
<p
|
||||
|
||||
@ -122,8 +122,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
>
|
||||
stories
|
||||
</NavButton>
|
||||
for a component called
|
||||
|
||||
for a component called
|
||||
<InlineCode>
|
||||
Button
|
||||
</InlineCode>
|
||||
@ -138,8 +137,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
<InlineCode>
|
||||
Button
|
||||
</InlineCode>
|
||||
stories located at
|
||||
|
||||
stories located at
|
||||
<InlineCode>
|
||||
src/stories/index.js
|
||||
</InlineCode>
|
||||
@ -148,8 +146,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.
|
||||
<br />
|
||||
Have a look at the
|
||||
|
||||
Have a look at the
|
||||
<Link
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
@ -157,8 +154,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
>
|
||||
Writing Stories
|
||||
</Link>
|
||||
|
||||
section in our documentation.
|
||||
section in our documentation.
|
||||
</p>
|
||||
<Note>
|
||||
<b>
|
||||
|
||||
@ -122,8 +122,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
>
|
||||
stories
|
||||
</NavButton>
|
||||
for a component called
|
||||
|
||||
for a component called
|
||||
<InlineCode>
|
||||
Button
|
||||
</InlineCode>
|
||||
@ -138,8 +137,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
<InlineCode>
|
||||
Button
|
||||
</InlineCode>
|
||||
stories located at
|
||||
|
||||
stories located at
|
||||
<InlineCode>
|
||||
src/stories/index.js
|
||||
</InlineCode>
|
||||
@ -148,8 +146,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.
|
||||
<br />
|
||||
Have a look at the
|
||||
|
||||
Have a look at the
|
||||
<Link
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
@ -157,8 +154,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
>
|
||||
Writing Stories
|
||||
</Link>
|
||||
|
||||
section in our documentation.
|
||||
section in our documentation.
|
||||
</p>
|
||||
<Note>
|
||||
<b>
|
||||
|
||||
@ -159,8 +159,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
>
|
||||
stories
|
||||
</button>
|
||||
for a component called
|
||||
|
||||
for a component called
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
@ -199,8 +198,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
>
|
||||
Button
|
||||
</code>
|
||||
stories located at
|
||||
|
||||
stories located at
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
@ -221,8 +219,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.
|
||||
<br />
|
||||
Have a look at the
|
||||
|
||||
Have a look at the
|
||||
<a
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
@ -238,8 +235,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
>
|
||||
Writing Stories
|
||||
</a>
|
||||
|
||||
section in our documentation.
|
||||
section in our documentation.
|
||||
</p>
|
||||
<p
|
||||
style={
|
||||
|
||||
@ -63,8 +63,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
>
|
||||
stories
|
||||
</button>
|
||||
for a component called
|
||||
|
||||
for a component called
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
@ -103,8 +102,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
>
|
||||
Button
|
||||
</code>
|
||||
stories located at
|
||||
|
||||
stories located at
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
@ -125,8 +123,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.
|
||||
<br />
|
||||
Have a look at the
|
||||
|
||||
Have a look at the
|
||||
<a
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
@ -142,8 +139,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
>
|
||||
Writing Stories
|
||||
</a>
|
||||
|
||||
section in our documentation.
|
||||
section in our documentation.
|
||||
</p>
|
||||
<p
|
||||
style={
|
||||
|
||||
@ -63,8 +63,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
>
|
||||
stories
|
||||
</button>
|
||||
for a component called
|
||||
|
||||
for a component called
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
@ -103,8 +102,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
>
|
||||
Button
|
||||
</code>
|
||||
stories located at
|
||||
|
||||
stories located at
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
@ -125,8 +123,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.
|
||||
<br />
|
||||
Have a look at the
|
||||
|
||||
Have a look at the
|
||||
<a
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
@ -142,8 +139,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
>
|
||||
Writing Stories
|
||||
</a>
|
||||
|
||||
section in our documentation.
|
||||
section in our documentation.
|
||||
</p>
|
||||
<p
|
||||
style={
|
||||
|
||||
@ -20,7 +20,6 @@ interface ViewportItem {
|
||||
}
|
||||
|
||||
const toList = memoize(50)((items: ViewportMap): ViewportItem[] => [
|
||||
// eslint-disable-next-line no-use-before-define
|
||||
...baseViewports,
|
||||
...Object.entries(items).map(([id, { name, ...rest }]) => ({ ...rest, id, title: name })),
|
||||
]);
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
"fork-ts-checker-webpack-plugin": "^1.3.4",
|
||||
"global": "^4.3.2",
|
||||
"regenerator-runtime": "^0.12.1",
|
||||
"sass-loader": "^7.1.0",
|
||||
"sass-loader": "^8.0.0",
|
||||
"strip-json-comments": "^3.0.1",
|
||||
"ts-loader": "^6.0.1",
|
||||
"tsconfig-paths-webpack-plugin": "^3.2.0"
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
/* eslint-disable no-empty-function */
|
||||
/* eslint-disable no-useless-constructor */
|
||||
/* eslint-disable @typescript-eslint/no-parameter-properties */
|
||||
// We could use NgComponentOutlet here but there's currently no easy way
|
||||
// to provide @Inputs and subscribe to @Outputs, see
|
||||
// https://github.com/angular/angular/issues/15360
|
||||
|
||||
@ -35,14 +35,14 @@
|
||||
"@storybook/core": "5.3.0-alpha.7",
|
||||
"@storybook/core-events": "5.3.0-alpha.7",
|
||||
"@storybook/ui": "5.3.0-alpha.7",
|
||||
"commander": "^2.19.0",
|
||||
"commander": "^3.0.2",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.6.0",
|
||||
"react-dom": "^16.8.3",
|
||||
"uuid": "^3.3.2",
|
||||
"webpack": "^4.33.0",
|
||||
"ws": "^6.1.0"
|
||||
"ws": "^7.1.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"babel-loader": "^7.0.0 || ^8.0.0"
|
||||
|
||||
@ -35,7 +35,7 @@ const PreviewHelp = () => (
|
||||
stories as you want. Basically a story is like a visual test case.
|
||||
</p>
|
||||
<p>
|
||||
To see your Storybook stories on the device, you should start your mobile app for the{' '}
|
||||
To see your Storybook stories on the device, you should start your mobile app for the
|
||||
<span style={styles.code}><platform></span> of your choice (typically ios or android).
|
||||
(Note that due to an implementation detail, your stories will only show up in the left-pane
|
||||
after your device has connected to this storybook server.)
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/core": "^10.0.17",
|
||||
"@emotion/core": "^10.0.20",
|
||||
"@emotion/native": "^10.0.14",
|
||||
"@storybook/addons": "5.3.0-alpha.7",
|
||||
"@storybook/channel-websocket": "5.3.0-alpha.7",
|
||||
|
||||
@ -111,6 +111,7 @@ export default class Preview {
|
||||
|
||||
this._sendSetStories();
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-this-alias
|
||||
const preview = this;
|
||||
|
||||
addons.loadAddons(this._clientApi);
|
||||
@ -118,7 +119,6 @@ export default class Preview {
|
||||
const appliedTheme = { ...theme, ...params.theme };
|
||||
|
||||
// react-native hot module loader must take in a Class - https://github.com/facebook/react-native/issues/10991
|
||||
// eslint-disable-next-line react/prefer-stateless-function
|
||||
return class StorybookRoot extends React.PureComponent {
|
||||
render() {
|
||||
if (onDeviceUI) {
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"lodash": "^4.17.11",
|
||||
"mini-css-extract-plugin": "^0.7.0",
|
||||
"mini-css-extract-plugin": "^0.8.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-dev-utils": "^9.0.0",
|
||||
"regenerator-runtime": "^0.12.1",
|
||||
@ -57,8 +57,8 @@
|
||||
"webpack": "^4.33.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/mini-css-extract-plugin": "^0.2.1",
|
||||
"@types/node": "^12.0.8",
|
||||
"@types/mini-css-extract-plugin": "^0.8.0",
|
||||
"@types/node": "^12.7.9",
|
||||
"@types/webpack": "^4.4.32"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -142,7 +142,7 @@ const Welcome = ({ showApp }: { showApp: () => void }) => (
|
||||
(Basically a story is like a visual test case.)
|
||||
</p>
|
||||
<p>
|
||||
See these sample <NavButton onClick={showApp}>stories</NavButton> for a component called{' '}
|
||||
See these sample <NavButton onClick={showApp}>stories</NavButton> for a component called
|
||||
<InlineCode>Button</InlineCode>.
|
||||
</p>
|
||||
<p>
|
||||
@ -150,22 +150,22 @@ const Welcome = ({ showApp }: { showApp: () => void }) => (
|
||||
<br />
|
||||
You can also edit those components and see changes right away.
|
||||
<br />
|
||||
(Try editing the <InlineCode>Button</InlineCode> stories located at{' '}
|
||||
(Try editing the <InlineCode>Button</InlineCode> stories located at
|
||||
<InlineCode>src/stories/index.js</InlineCode>
|
||||
.)
|
||||
</p>
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.
|
||||
<br />
|
||||
Have a look at the{' '}
|
||||
Have a look at the
|
||||
<Link
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Writing Stories
|
||||
</Link>{' '}
|
||||
section in our documentation.
|
||||
</Link>
|
||||
section in our documentation.
|
||||
</p>
|
||||
<Note>
|
||||
<b>NOTE:</b>
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
"@storybook/core": "5.3.0-alpha.3",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"raw-loader": "^2.0.0",
|
||||
"raw-loader": "^3.1.0",
|
||||
"regenerator-runtime": "^0.12.1",
|
||||
"ts-dedent": "^1.1.0"
|
||||
},
|
||||
|
||||
@ -42,8 +42,8 @@
|
||||
"webpack": "^4.33.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/mini-css-extract-plugin": "^0.2.1",
|
||||
"@types/node": "^12.0.8",
|
||||
"@types/mini-css-extract-plugin": "^0.8.0",
|
||||
"@types/node": "^12.7.9",
|
||||
"@types/webpack": "^4.4.32",
|
||||
"babel-preset-vue": "^2.0.2",
|
||||
"vue": "^2.6.8",
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
"version": "5.3.0-alpha.7",
|
||||
"description": "decorator addon for storybook",
|
||||
"keywords": [
|
||||
"devkit",
|
||||
"addon",
|
||||
"storybook",
|
||||
"decorator"
|
||||
"decorator",
|
||||
"devkit",
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/addons/actions",
|
||||
"bugs": {
|
||||
@ -27,7 +27,7 @@
|
||||
"@storybook/addons": "5.3.0-alpha.7",
|
||||
"@storybook/client-api": "5.3.0-alpha.7",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^3.0.1"
|
||||
"global": "^4.4.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
"version": "5.3.0-alpha.7",
|
||||
"description": "parameter addon for storybook",
|
||||
"keywords": [
|
||||
"devkit",
|
||||
"addon",
|
||||
"storybook",
|
||||
"parameter"
|
||||
"devkit",
|
||||
"parameter",
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook#readme",
|
||||
"bugs": {
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
"version": "5.3.0-alpha.7",
|
||||
"description": "roundtrip addon for storybook",
|
||||
"keywords": [
|
||||
"devkit",
|
||||
"addon",
|
||||
"storybook",
|
||||
"roundtrip"
|
||||
"devkit",
|
||||
"roundtrip",
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybooks/storybook#readme",
|
||||
"bugs": {
|
||||
|
||||
@ -12,8 +12,8 @@ const Platform = () => (
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
React
|
||||
</a>{' '}
|
||||
&{' '}
|
||||
</a>
|
||||
&
|
||||
<a
|
||||
href="https://github.com/storybookjs/storybook/tree/master/app/react-native"
|
||||
target="_blank"
|
||||
@ -22,7 +22,6 @@ const Platform = () => (
|
||||
React Native
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<hr />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import capitalize from 'lodash/capitalize';
|
||||
|
||||
@ -3,6 +3,13 @@
|
||||
"version": "5.3.0-alpha.7",
|
||||
"private": true,
|
||||
"main": "node_modules/expo/AppEntry.js",
|
||||
"workspaces": {
|
||||
"nohoist": [
|
||||
"react-native/**",
|
||||
"**/app/react-native*",
|
||||
"expo"
|
||||
]
|
||||
},
|
||||
"scripts": {
|
||||
"android": "expo start --android",
|
||||
"eject": "expo eject",
|
||||
@ -17,7 +24,7 @@
|
||||
"dependencies": {
|
||||
"expo": "^33.0.7",
|
||||
"prop-types": "^15.6.2",
|
||||
"react": "16.8.6",
|
||||
"react": "16.10.1",
|
||||
"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
|
||||
"whatwg-fetch": "^3.0.0"
|
||||
},
|
||||
@ -26,6 +33,7 @@
|
||||
"@babel/plugin-transform-react-jsx-source": "^7.2.0",
|
||||
"@storybook/addon-actions": "5.3.0-alpha.7",
|
||||
"@storybook/addon-knobs": "5.3.0-alpha.7",
|
||||
"@storybook/addon-links": "5.3.0-alpha.7",
|
||||
"@storybook/addon-ondevice-actions": "5.3.0-alpha.7",
|
||||
"@storybook/addon-ondevice-backgrounds": "5.3.0-alpha.7",
|
||||
"@storybook/addon-ondevice-knobs": "5.3.0-alpha.7",
|
||||
@ -34,18 +42,11 @@
|
||||
"@storybook/react-native": "5.3.0-alpha.7",
|
||||
"babel-loader": "^8.0.4",
|
||||
"babel-plugin-module-resolver": "^3.2.0",
|
||||
"babel-preset-expo": "^5.1.1",
|
||||
"babel-preset-expo": "^7.0.0",
|
||||
"core-js": "^3.0.1",
|
||||
"expo-cli": "^2.17.1",
|
||||
"jest-expo": "^33.0.2",
|
||||
"react-test-renderer": "16.8.6",
|
||||
"react-test-renderer": "16.10.1",
|
||||
"schedule": "^0.5.0"
|
||||
},
|
||||
"workspaces": {
|
||||
"nohoist": [
|
||||
"react-native/**",
|
||||
"**/app/react-native*",
|
||||
"expo"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import React from 'react';
|
||||
import { Text } from 'react-native';
|
||||
|
||||
@ -8,7 +7,7 @@ import { linkTo } from '@storybook/addon-links';
|
||||
import { withKnobs } from '@storybook/addon-knobs';
|
||||
import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
|
||||
import knobsWrapper from './Knobs';
|
||||
// eslint-disable-next-line import/no-unresolved, import/extensions
|
||||
// eslint-disable-next-line import/no-unresolved
|
||||
import Button from './Button';
|
||||
import CenterView from './CenterView';
|
||||
import Welcome from './Welcome';
|
||||
|
||||
@ -52,7 +52,7 @@
|
||||
"@storybook/source-loader": "5.3.0-alpha.7",
|
||||
"@types/core-js": "^2.5.0",
|
||||
"@types/jest": "^24.0.11",
|
||||
"@types/node": "^12.0.8",
|
||||
"@types/node": "^12.7.9",
|
||||
"@types/webpack-env": "^1.14.0",
|
||||
"babel-plugin-require-context-hook": "^1.0.0",
|
||||
"global": "^4.3.2",
|
||||
@ -61,7 +61,7 @@
|
||||
"jest": "^24.7.1",
|
||||
"jest-preset-angular": "^7.1.0",
|
||||
"protractor": "~5.4.2",
|
||||
"ts-node": "~8.3.0",
|
||||
"ts-node": "~8.4.1",
|
||||
"typescript": "^3.4.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@ import { storiesOf } from '@storybook/angular';
|
||||
import { withTests } from '@storybook/addon-jest';
|
||||
|
||||
import { AppComponent } from '../app/app.component';
|
||||
// eslint-disable-next-line import/no-unresolved
|
||||
// eslint-disable-next-line
|
||||
import * as results from '../../addon-jest.testresults.json';
|
||||
|
||||
storiesOf('Addon|Jest', module)
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
/* eslint-disable no-empty-function */
|
||||
/* eslint-disable @typescript-eslint/no-parameter-properties */
|
||||
/* eslint-disable no-useless-constructor */
|
||||
import { Component, Input, InjectionToken, Injector, ElementRef, Inject } from '@angular/core';
|
||||
|
||||
|
||||
@ -12,7 +12,6 @@ const NOOP = () => {};
|
||||
providers: [
|
||||
{
|
||||
provide: NG_VALUE_ACCESSOR,
|
||||
// eslint-disable-next-line no-use-before-define
|
||||
useExisting: forwardRef(() => CustomCvaComponent),
|
||||
multi: true,
|
||||
},
|
||||
|
||||
@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable()
|
||||
export class DummyService {
|
||||
// eslint-disable-next-line no-useless-constructor, no-empty-function
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-function, no-useless-constructor
|
||||
constructor() {}
|
||||
|
||||
getItems() {
|
||||
|
||||
@ -16,7 +16,7 @@ export class ServiceComponent implements OnInit {
|
||||
@Input()
|
||||
name: any;
|
||||
|
||||
// eslint-disable-next-line no-useless-constructor, @typescript-eslint/no-parameter-properties, no-empty-function
|
||||
// eslint-disable-next-line no-useless-constructor
|
||||
constructor(private dummy: DummyService) {}
|
||||
|
||||
async ngOnInit() {
|
||||
|
||||
@ -19,7 +19,7 @@ const InfoButton = () => (
|
||||
borderRadius: '0px 0px 0px 5px',
|
||||
}}
|
||||
>
|
||||
{' Show Info '}
|
||||
Show Info
|
||||
</span>
|
||||
);
|
||||
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
"@types/react-dom": "^16.8.2",
|
||||
"enzyme": "^3.9.0",
|
||||
"enzyme-adapter-react-16": "^1.9.1",
|
||||
"enzyme-to-json": "^3.3.5",
|
||||
"enzyme-to-json": "^3.4.1",
|
||||
"fork-ts-checker-webpack-plugin": "^1.3.3",
|
||||
"react-docgen-typescript-loader": "^3.0.1",
|
||||
"react-scripts": "^3.0.1",
|
||||
|
||||
@ -17,11 +17,11 @@
|
||||
"@storybook/react": "5.3.0-alpha.7",
|
||||
"@storybook/theming": "5.3.0-alpha.7",
|
||||
"cors": "^2.8.5",
|
||||
"cross-env": "^5.2.0",
|
||||
"enzyme-to-json": "^3.3.5",
|
||||
"cross-env": "^6.0.3",
|
||||
"enzyme-to-json": "^3.4.1",
|
||||
"eventemitter3": "^4.0.0",
|
||||
"express": "^4.16.4",
|
||||
"express-graphql": "^0.8.0",
|
||||
"express-graphql": "^0.9.0",
|
||||
"format-json": "^1.0.3",
|
||||
"global": "^4.3.2",
|
||||
"graphql": "^14.1.1",
|
||||
@ -30,8 +30,7 @@
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.8.3",
|
||||
"react-dom": "^16.8.3",
|
||||
"storybook-chromatic": "^1.2.6",
|
||||
"ts-loader": "^5.3.3",
|
||||
"ts-loader": "^6.2.0",
|
||||
"uuid": "^3.3.2",
|
||||
"webpack": "^4.33.0"
|
||||
}
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
"@storybook/source-loader": "5.3.0-alpha.7",
|
||||
"babel-loader": "^8",
|
||||
"broccoli-asset-rev": "^3.0.0",
|
||||
"cross-env": "^5.2.0",
|
||||
"cross-env": "^6.0.3",
|
||||
"ember-ajax": "^4.0.2",
|
||||
"ember-cli": "~3.11.0",
|
||||
"ember-cli-app-version": "^3.0.0",
|
||||
|
||||
@ -108,22 +108,22 @@ const Welcome = {
|
||||
<br />
|
||||
You can also edit those components and see changes right away.
|
||||
<br />
|
||||
(Try editing the <InlineCode>Button</InlineCode> stories located at{' '}
|
||||
(Try editing the <InlineCode>Button</InlineCode> stories located at
|
||||
<InlineCode>src/stories/index.js</InlineCode>
|
||||
.)
|
||||
</p>
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.
|
||||
<br />
|
||||
Have a look at the{' '}
|
||||
Have a look at the
|
||||
<Link
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Writing Stories
|
||||
</Link>{' '}
|
||||
section in our documentation.
|
||||
</Link>
|
||||
section in our documentation.
|
||||
</p>
|
||||
<Note>
|
||||
<b>NOTE:</b>
|
||||
|
||||
@ -1 +0,0 @@
|
||||
../../angular-cli/storybook-static
|
||||
@ -1 +0,0 @@
|
||||
../../cra-kitchen-sink/storybook-static
|
||||
@ -1 +0,0 @@
|
||||
../../cra-react15/storybook-static
|
||||
@ -1 +0,0 @@
|
||||
../../cra-ts-kitchen-sink/storybook-static
|
||||
@ -1 +0,0 @@
|
||||
../../ember-cli/storybook-static
|
||||
@ -1 +0,0 @@
|
||||
../../html-kitchen-sink/storybook-static/
|
||||
@ -1 +0,0 @@
|
||||
../../marko-cli/storybook-static
|
||||
@ -1 +0,0 @@
|
||||
../../mithril-kitchen-sink/storybook-static
|
||||
@ -1 +0,0 @@
|
||||
../../polymer-cli/storybook-static
|
||||
@ -1 +0,0 @@
|
||||
../../preact-kitchen-sink/storybook-static
|
||||
@ -1 +0,0 @@
|
||||
../../riot-kitchen-sink/storybook-static
|
||||
@ -1 +0,0 @@
|
||||
../../svelte-kitchen-sink/storybook-static
|
||||
@ -1 +0,0 @@
|
||||
../../vue-kitchen-sink/storybook-static
|
||||
@ -7,7 +7,6 @@ import { withNotes } from '@storybook/addon-notes';
|
||||
import { DocsPage } from '@storybook/addon-docs/blocks';
|
||||
|
||||
import 'storybook-chromatic';
|
||||
|
||||
import addHeadWarning from './head-warning';
|
||||
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
|
||||
@ -4,7 +4,6 @@
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./",
|
||||
"chromatic": "chromatic test --storybook-addon --exit-zero-on-changes --app-code ab7m45tp9p",
|
||||
"do-image-snapshots": "../../node_modules/.bin/jest --projects=./image-snapshots",
|
||||
"generate-addon-jest-testresults": "jest --config=tests/addon-jest.config.json --json --outputFile=stories/addon-jest.testresults.json",
|
||||
"graphql": "node ./graphql-server/index.js",
|
||||
@ -43,8 +42,8 @@
|
||||
"@storybook/source-loader": "5.3.0-alpha.7",
|
||||
"@storybook/theming": "5.3.0-alpha.7",
|
||||
"cors": "^2.8.5",
|
||||
"cross-env": "^5.2.0",
|
||||
"enzyme-to-json": "^3.3.5",
|
||||
"cross-env": "^6.0.3",
|
||||
"enzyme-to-json": "^3.4.1",
|
||||
"eventemitter3": "^4.0.0",
|
||||
"express": "^4.17.0",
|
||||
"express-graphql": "^0.8.0",
|
||||
@ -57,8 +56,8 @@
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.8.3",
|
||||
"react-dom": "^16.8.3",
|
||||
"storybook-chromatic": "^1.3.3",
|
||||
"terser-webpack-plugin": "^1.2.4",
|
||||
"storybook-chromatic": "2.2.2",
|
||||
"terser-webpack-plugin": "^2.1.2",
|
||||
"ts-loader": "^6.0.0",
|
||||
"uuid": "^3.3.2",
|
||||
"webpack": "^4.33.0"
|
||||
|
||||
@ -18,7 +18,9 @@ const Item = styled.div({
|
||||
});
|
||||
|
||||
export default class Logger extends Component {
|
||||
static LOG_EVENT = 'Logger:log';
|
||||
state = {
|
||||
events: [],
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
emitter: PropTypes.instanceOf(EventEmitter).isRequired,
|
||||
@ -29,10 +31,6 @@ export default class Logger extends Component {
|
||||
title: 'Logger',
|
||||
};
|
||||
|
||||
state = {
|
||||
events: [],
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
const { emitter } = this.props;
|
||||
|
||||
@ -51,6 +49,8 @@ export default class Logger extends Component {
|
||||
}));
|
||||
};
|
||||
|
||||
static LOG_EVENT = 'Logger:log';
|
||||
|
||||
render() {
|
||||
const { events } = this.state;
|
||||
const { title } = this.props;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { render, fireEvent } from 'react-testing-library';
|
||||
import { render, fireEvent } from '@testing-library/react';
|
||||
import { withText as WithText, withCounter as WithCounter } from './button.stories';
|
||||
|
||||
const mockAction = jest.fn();
|
||||
|
||||
@ -29,6 +29,6 @@
|
||||
"devDependencies": {
|
||||
"copy-webpack-plugin": "^5.0.0",
|
||||
"html-webpack-plugin": "^4.0.0-beta.2",
|
||||
"webpack-dev-server": "^3.4.1"
|
||||
"webpack-dev-server": "^3.8.2"
|
||||
}
|
||||
}
|
||||
|
||||
@ -55,9 +55,43 @@ exports[`Storyshots Addons|Backgrounds Example 2 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Centered Button 1`] = `
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
Object {
|
||||
"__b": 0,
|
||||
"__c": null,
|
||||
"__e": null,
|
||||
"__k": null,
|
||||
"__p": null,
|
||||
"constructor": undefined,
|
||||
"key": undefined,
|
||||
"l": null,
|
||||
"props": Object {
|
||||
"children": Object {
|
||||
"__b": 0,
|
||||
"__c": null,
|
||||
"__e": null,
|
||||
"__k": null,
|
||||
"__p": null,
|
||||
"constructor": undefined,
|
||||
"key": undefined,
|
||||
"l": null,
|
||||
"props": Object {
|
||||
"children": VNode {
|
||||
"attributes": undefined,
|
||||
"children": Array [
|
||||
"A button",
|
||||
],
|
||||
"key": undefined,
|
||||
"nodeName": [Function],
|
||||
},
|
||||
"style": Object {
|
||||
"margin": "auto",
|
||||
"maxHeight": "100%",
|
||||
},
|
||||
},
|
||||
"ref": undefined,
|
||||
"type": "div",
|
||||
},
|
||||
"style": Object {
|
||||
"alignItems": "center",
|
||||
"bottom": "0",
|
||||
"display": "flex",
|
||||
@ -66,24 +100,11 @@ exports[`Storyshots Addons|Centered Button 1`] = `
|
||||
"position": "fixed",
|
||||
"right": "0",
|
||||
"top": "0",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"margin": "auto",
|
||||
"maxHeight": "100%",
|
||||
}
|
||||
}
|
||||
>
|
||||
<button
|
||||
class="button"
|
||||
>
|
||||
A button
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
},
|
||||
},
|
||||
"ref": undefined,
|
||||
"type": "div",
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Contexts Simple Css Theming 1`] = `
|
||||
@ -273,7 +294,7 @@ exports[`Storyshots Welcome To Storybook 1`] = `
|
||||
>
|
||||
stories
|
||||
</button>
|
||||
for a component called
|
||||
for a component called
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
@ -312,7 +333,7 @@ exports[`Storyshots Welcome To Storybook 1`] = `
|
||||
>
|
||||
Button
|
||||
</code>
|
||||
stories located at
|
||||
stories located at
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
@ -333,7 +354,7 @@ exports[`Storyshots Welcome To Storybook 1`] = `
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.
|
||||
<br />
|
||||
Have a look at the
|
||||
Have a look at the
|
||||
<a
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
@ -349,7 +370,7 @@ exports[`Storyshots Welcome To Storybook 1`] = `
|
||||
>
|
||||
Writing Stories
|
||||
</a>
|
||||
section in our documentation.
|
||||
section in our documentation.
|
||||
</p>
|
||||
<p
|
||||
style={
|
||||
|
||||
@ -31,12 +31,12 @@
|
||||
"@storybook/preact": "5.3.0-alpha.7",
|
||||
"@storybook/source-loader": "5.3.0-alpha.7",
|
||||
"babel-loader": "^8.0.4",
|
||||
"cross-env": "^5.2.0",
|
||||
"cross-env": "^6.0.3",
|
||||
"file-loader": "^4.2.0",
|
||||
"preact-render-to-json": "^3.6.6",
|
||||
"raw-loader": "^2.0.0",
|
||||
"svg-url-loader": "^2.3.2",
|
||||
"raw-loader": "^3.1.0",
|
||||
"svg-url-loader": "^3.0.2",
|
||||
"webpack": "^4.33.0",
|
||||
"webpack-dev-server": "^3.4.1"
|
||||
"webpack-dev-server": "^3.8.2"
|
||||
}
|
||||
}
|
||||
|
||||
@ -103,7 +103,7 @@ const Welcome = ({ showApp }) => (
|
||||
(Basically a story is like a visual test case.)
|
||||
</p>
|
||||
<p>
|
||||
See these sample <NavButton onClick={showApp}>stories</NavButton> for a component called{' '}
|
||||
See these sample <NavButton onClick={showApp}>stories</NavButton> for a component called
|
||||
<InlineCode>Button</InlineCode>.
|
||||
</p>
|
||||
<p>
|
||||
@ -111,22 +111,22 @@ const Welcome = ({ showApp }) => (
|
||||
<br />
|
||||
You can also edit those components and see changes right away.
|
||||
<br />
|
||||
(Try editing the <InlineCode>Button</InlineCode> stories located at{' '}
|
||||
(Try editing the <InlineCode>Button</InlineCode> stories located at
|
||||
<InlineCode>src/stories/index.js</InlineCode>
|
||||
.)
|
||||
</p>
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.
|
||||
<br />
|
||||
Have a look at the{' '}
|
||||
Have a look at the
|
||||
<Link
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Writing Stories
|
||||
</Link>{' '}
|
||||
section in our documentation.
|
||||
</Link>
|
||||
section in our documentation.
|
||||
</p>
|
||||
<Note>
|
||||
<b>NOTE:</b>
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
"@storybook/addons": "5.3.0-alpha.7",
|
||||
"@storybook/rax": "5.3.0-alpha.7",
|
||||
"@storybook/source-loader": "5.3.0-alpha.7",
|
||||
"babel-eslint": "^8.2.2",
|
||||
"babel-eslint": "^10.0.3",
|
||||
"babel-preset-rax": "^1.0.0-beta.0",
|
||||
"rax-scripts": "^2.0.0",
|
||||
"rax-test-renderer": "^1.0.0",
|
||||
|
||||
@ -26,11 +26,12 @@ withStyle.story = {
|
||||
|
||||
export const withMarkdown = () => (
|
||||
<button type="button">
|
||||
{' '}
|
||||
|
||||
<Text id="text1">😀 😎 👍 💯</Text>
|
||||
<View>
|
||||
<Text id="text1">aaa</Text>
|
||||
</View>{' '}
|
||||
</View>
|
||||
|
||||
</button>
|
||||
);
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@ import { createElement } from 'rax';
|
||||
import { withTests } from '@storybook/addon-jest';
|
||||
import App from '../components/App';
|
||||
import Welcome from '../components/Welcome';
|
||||
// eslint-disable-next-line import/no-unresolved
|
||||
// eslint-disable-next-line
|
||||
import results from '../../jest-test-results.json';
|
||||
|
||||
export default {
|
||||
|
||||
@ -30,12 +30,12 @@
|
||||
"@storybook/riot": "5.3.0-alpha.7",
|
||||
"@storybook/source-loader": "5.3.0-alpha.7",
|
||||
"babel-loader": "^8.0.4",
|
||||
"cross-env": "^5.2.0",
|
||||
"cross-env": "^6.0.3",
|
||||
"file-loader": "^4.2.0",
|
||||
"raw-loader": "^2.0.0",
|
||||
"raw-loader": "^3.1.0",
|
||||
"riot-tag-loader": "^2.1.0",
|
||||
"svg-url-loader": "^2.3.2",
|
||||
"svg-url-loader": "^3.0.2",
|
||||
"webpack": "^4.33.0",
|
||||
"webpack-dev-server": "^3.4.1"
|
||||
"webpack-dev-server": "^3.8.2"
|
||||
}
|
||||
}
|
||||
|
||||
@ -32,13 +32,13 @@
|
||||
"@storybook/vue": "5.3.0-alpha.7",
|
||||
"babel-core": "^7.0.0-bridge.0",
|
||||
"babel-loader": "^8.0.5",
|
||||
"cross-env": "^5.2.0",
|
||||
"cross-env": "^6.0.3",
|
||||
"file-loader": "^4.2.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"storybook-addon-vue-info": "^1.2.1",
|
||||
"svg-url-loader": "^2.3.2",
|
||||
"svg-url-loader": "^3.0.2",
|
||||
"vue-loader": "^15.7.0",
|
||||
"webpack": "^4.33.0",
|
||||
"webpack-dev-server": "^3.4.1"
|
||||
"webpack-dev-server": "^3.8.2"
|
||||
}
|
||||
}
|
||||
|
||||
@ -101,6 +101,10 @@ type StatePartial = Partial<State>;
|
||||
export type Props = Children & RouterData & ProviderData & DocsModeData;
|
||||
|
||||
class ManagerProvider extends Component<Props, State> {
|
||||
api: API;
|
||||
|
||||
modules: any[];
|
||||
|
||||
static displayName = 'Manager';
|
||||
|
||||
constructor(props: Props) {
|
||||
@ -223,10 +227,6 @@ class ManagerProvider extends Component<Props, State> {
|
||||
return false;
|
||||
}
|
||||
|
||||
api: API;
|
||||
|
||||
modules: any[];
|
||||
|
||||
render() {
|
||||
const { children } = this.props;
|
||||
const value = {
|
||||
@ -253,17 +253,17 @@ interface SubState {
|
||||
}
|
||||
|
||||
class ManagerConsumer extends Component<ConsumerProps<SubState, Combo>> {
|
||||
prevChildren?: ReactElement<any> | null;
|
||||
|
||||
prevData?: SubState;
|
||||
|
||||
dataMemory?: (combo: Combo) => SubState;
|
||||
|
||||
constructor(props: ConsumerProps<SubState, Combo>) {
|
||||
super(props);
|
||||
this.dataMemory = props.filter ? memoize(10)(props.filter) : null;
|
||||
}
|
||||
|
||||
dataMemory?: (combo: Combo) => SubState;
|
||||
|
||||
prevChildren?: ReactElement<any> | null;
|
||||
|
||||
prevData?: SubState;
|
||||
|
||||
render() {
|
||||
const { children, pure } = this.props;
|
||||
|
||||
|
||||
@ -84,7 +84,7 @@ const deprecatedLayoutOptions: {
|
||||
addonPanelInRight: 'panelPosition',
|
||||
};
|
||||
|
||||
const deprecationMessage = (optionsMap: OptionsMap, prefix: string = '') =>
|
||||
const deprecationMessage = (optionsMap: OptionsMap, prefix = '') =>
|
||||
`The options { ${Object.keys(optionsMap).join(', ')} } are deprecated -- use ${
|
||||
prefix ? `${prefix}'s` : ''
|
||||
} { ${Object.values(optionsMap).join(', ')} } instead.`;
|
||||
|
||||
@ -1 +1 @@
|
||||
export const version = '5.3.0-alpha.6';
|
||||
export const version = '5.3.0-alpha.7';
|
||||
|
||||
@ -31,7 +31,6 @@ export class PostmsgTransport {
|
||||
|
||||
private connected: boolean;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-parameter-properties
|
||||
constructor(private readonly config: Config) {
|
||||
this.buffer = [];
|
||||
this.handler = null;
|
||||
@ -70,11 +69,9 @@ export class PostmsgTransport {
|
||||
let allowFunction = true;
|
||||
|
||||
if (options && typeof options.allowFunction === 'boolean') {
|
||||
// eslint-disable-next-line prefer-destructuring
|
||||
allowFunction = options.allowFunction;
|
||||
}
|
||||
if (options && Number.isInteger(options.depth)) {
|
||||
// eslint-disable-next-line prefer-destructuring
|
||||
depth = options.depth;
|
||||
}
|
||||
|
||||
|
||||
@ -69,7 +69,6 @@ export class Channel {
|
||||
const event: ChannelEvent = { type: eventName, args, from: this.sender };
|
||||
let options = {};
|
||||
if (args.length >= 1 && args[0] && args[0].options) {
|
||||
// eslint-disable-next-line prefer-destructuring
|
||||
options = args[0].options;
|
||||
}
|
||||
|
||||
|
||||
@ -1,14 +1,16 @@
|
||||
const ignore = 0;
|
||||
|
||||
module.exports = {
|
||||
overrides: {
|
||||
files: '*/template/**',
|
||||
rules: {
|
||||
'react/no-this-in-sfc': ignore,
|
||||
'import/no-unresolved': ignore,
|
||||
'import/no-extraneous-dependencies': ignore,
|
||||
'global-require': ignore,
|
||||
'react/react-in-jsx-scope': ignore,
|
||||
overrides: [
|
||||
{
|
||||
files: '*/template/**',
|
||||
rules: {
|
||||
'react/no-this-in-sfc': ignore,
|
||||
'import/no-unresolved': ignore,
|
||||
'import/no-extraneous-dependencies': ignore,
|
||||
'global-require': ignore,
|
||||
'react/react-in-jsx-scope': ignore,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
/* eslint-disable import/extensions */
|
||||
import hbs from 'htmlbars-inline-precompile';
|
||||
import { linkTo } from '@storybook/addon-links';
|
||||
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
/* eslint-disable import/extensions */
|
||||
import hbs from 'htmlbars-inline-precompile';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
|
||||
@ -134,37 +134,37 @@ const Welcome = {
|
||||
(Basically a story is like a visual test case.)
|
||||
</p>
|
||||
<p>
|
||||
See these sample{' '}
|
||||
See these sample
|
||||
{vnode.attrs.showApp ? (
|
||||
<NavButton onclick={vnode.attrs.showApp}>stories</NavButton>
|
||||
) : (
|
||||
<StoryLink kind={vnode.attrs.showKind} story={vnode.attrs.showStory}>
|
||||
stories
|
||||
</StoryLink>
|
||||
)}{' '}
|
||||
for a component called <InlineCode>Button</InlineCode>.
|
||||
)}
|
||||
for a component called <InlineCode>Button</InlineCode>.
|
||||
</p>
|
||||
<p>
|
||||
Just like that, you can add your own components as stories.
|
||||
<br />
|
||||
You can also edit those components and see changes right away.
|
||||
<br />
|
||||
(Try editing the <InlineCode>Button</InlineCode> stories located at{' '}
|
||||
(Try editing the <InlineCode>Button</InlineCode> stories located at
|
||||
<InlineCode>src/stories/index.js</InlineCode>
|
||||
.)
|
||||
</p>
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.
|
||||
<br />
|
||||
Have a look at the{' '}
|
||||
Have a look at the
|
||||
<Link
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Writing Stories
|
||||
</Link>{' '}
|
||||
section in our documentation.
|
||||
</Link>
|
||||
section in our documentation.
|
||||
</p>
|
||||
<Note>
|
||||
<b>NOTE:</b>
|
||||
|
||||
@ -92,7 +92,7 @@ const Welcome = ({ showApp }) => (
|
||||
(Basically a story is like a visual test case.)
|
||||
</p>
|
||||
<p>
|
||||
See these sample <NavButton onClick={showApp}>stories</NavButton> for a component called{' '}
|
||||
See these sample <NavButton onClick={showApp}>stories</NavButton> for a component called
|
||||
<InlineCode>Button</InlineCode>.
|
||||
</p>
|
||||
<p>
|
||||
@ -100,22 +100,22 @@ const Welcome = ({ showApp }) => (
|
||||
<br />
|
||||
You can also edit those components and see changes right away.
|
||||
<br />
|
||||
(Try editing the <InlineCode>Button</InlineCode> stories located at{' '}
|
||||
(Try editing the <InlineCode>Button</InlineCode> stories located at
|
||||
<InlineCode>src/stories/index.js</InlineCode>
|
||||
.)
|
||||
</p>
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.
|
||||
<br />
|
||||
Have a look at the{' '}
|
||||
Have a look at the
|
||||
<Link
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Writing Stories
|
||||
</Link>{' '}
|
||||
section in our documentation.
|
||||
</Link>
|
||||
section in our documentation.
|
||||
</p>
|
||||
<Note>
|
||||
<b>NOTE:</b>
|
||||
|
||||
@ -83,11 +83,11 @@ const Welcome = ({ showApp }) => (
|
||||
want. (Basically a story is like a visual test case.)
|
||||
</P>
|
||||
<P>
|
||||
See these sample{' '}
|
||||
See these sample
|
||||
<Link href="#" onPress={showApp} rel="noopener noreferrer">
|
||||
stories
|
||||
</Link>{' '}
|
||||
for a component called <InlineCode>Button</InlineCode>.
|
||||
</Link>
|
||||
for a component called <InlineCode>Button</InlineCode>.
|
||||
</P>
|
||||
<P>
|
||||
Just like that, you can add your own components as stories. You can also edit those components
|
||||
@ -96,15 +96,15 @@ const Welcome = ({ showApp }) => (
|
||||
.)
|
||||
</P>
|
||||
<P>
|
||||
Usually we create stories with smaller UI components in the app. Have a look at the{' '}
|
||||
Usually we create stories with smaller UI components in the app. Have a look at the
|
||||
<Link
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Writing Stories
|
||||
</Link>{' '}
|
||||
section in our documentation.
|
||||
</Link>
|
||||
section in our documentation.
|
||||
</P>
|
||||
<Note>
|
||||
<P style={{ fontWeight: 'bold' }}>NOTE:</P>
|
||||
|
||||
@ -5,7 +5,6 @@ import { storiesOf } from '@storybook/react-native';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { linkTo } from '@storybook/addon-links';
|
||||
|
||||
// eslint-disable-next-line import/extensions
|
||||
import Button from './Button';
|
||||
import CenterView from './CenterView';
|
||||
import Welcome from './Welcome';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { mount } from '@storybook/riot';
|
||||
|
||||
/* eslint-disable-next-line import/no-webpack-loader-syntax */
|
||||
// eslint-disable-next-line
|
||||
import MyButtonRaw from 'raw-loader!./MyButton.tag';
|
||||
import './MyButton.tag';
|
||||
|
||||
|
||||
@ -197,7 +197,6 @@ const installStorybook = (projectType, options) => {
|
||||
// Add a new line for the clear visibility.
|
||||
logger.log();
|
||||
|
||||
// eslint-disable-next-line no-use-before-define
|
||||
return projectTypeInquirer(options);
|
||||
}
|
||||
};
|
||||
|
||||
@ -38,16 +38,16 @@
|
||||
"@babel/preset-env": "^7.4.5",
|
||||
"@storybook/codemod": "5.3.0-alpha.7",
|
||||
"chalk": "^2.4.1",
|
||||
"commander": "^2.19.0",
|
||||
"commander": "^3.0.2",
|
||||
"core-js": "^3.0.1",
|
||||
"cross-spawn": "^6.0.5",
|
||||
"cross-spawn": "^7.0.0",
|
||||
"didyoumean": "^1.2.1",
|
||||
"envinfo": "^7.3.1",
|
||||
"esm": "3.2.25",
|
||||
"fs-extra": "^8.0.1",
|
||||
"inquirer": "^7.0.0",
|
||||
"jscodeshift": "^0.6.3",
|
||||
"json5": "^2.1.0",
|
||||
"json5": "^2.1.1",
|
||||
"pkg-add-deps": "^0.1.0",
|
||||
"semver": "^6.0.0",
|
||||
"shelljs": "^0.8.3",
|
||||
|
||||
@ -113,15 +113,11 @@ export default class ClientApi {
|
||||
};
|
||||
};
|
||||
|
||||
getSeparators = () =>
|
||||
Object.assign(
|
||||
{},
|
||||
{
|
||||
hierarchyRootSeparator: '|',
|
||||
hierarchySeparator: /\/|\./,
|
||||
},
|
||||
this._globalParameters.options
|
||||
);
|
||||
getSeparators = () => ({
|
||||
hierarchyRootSeparator: '|',
|
||||
hierarchySeparator: /\/|\./,
|
||||
...this._globalParameters.options,
|
||||
});
|
||||
|
||||
addDecorator = (decorator: DecoratorFunction) => {
|
||||
this._globalDecorators.push(decorator);
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
"@storybook/node-logger": "5.3.0-alpha.7",
|
||||
"@storybook/router": "5.3.0-alpha.7",
|
||||
"core-js": "^3.0.1",
|
||||
"cross-spawn": "^6.0.5",
|
||||
"cross-spawn": "^7.0.0",
|
||||
"globby": "^10.0.1",
|
||||
"jscodeshift": "^0.6.3",
|
||||
"lodash": "^4.17.11",
|
||||
|
||||
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