GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-05 08:01:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'next' into jsomsanith/feat/disable_tab

Browse Source
This commit is contained in:
Jimmy Somsanith 2019-06-17 22:09:14 +02:00
commit a4fb0dec84
57 changed files with 14489 additions and 16827 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -27,4 +27,5 @@ lib/**/dll
.expo/packager-info.json
scripts/storage
htpasswd
/false
/false
storybook-out

2
CONTRIBUTING.md
View File

@ -27,7 +27,6 @@ To test your project against the current latest version of storybook, you can cl
```sh
git clone https://github.com/storybookjs/storybook.git
cd storybook
yarn install
yarn bootstrap
```
@ -139,7 +138,6 @@ A good way to do that is using the example `cra-kitchen-sink` app embedded in th
# Download and build this repository:
git clone https://github.com/storybookjs/storybook.git
cd storybook
yarn install
yarn bootstrap --core
# make changes to try and reproduce the problem, such as adding components + stories

4
addons/contexts/src/manager/components/ToolBarControl.tsx
View File

@ -47,5 +47,7 @@ export const ToolBarControl: ToolBarControl = ({
},
};
return icon && list.length && !options.disable ? <ToolBarMenu icon={icon} {...props} /> : null;
return Array.isArray(list) && list.length && !options.disable ? (
<ToolBarMenu icon={icon} {...props} />
) : null;
};

47
addons/contexts/src/manager/components/ToolBarMenu.test.tsx
View File

@ -53,4 +53,51 @@ describe('Tests on addon-contexts component: ToolBarMenu', () => {
</lifecycle(WithTooltipPure)>
`);
});
it('should render TabButton with title if the icon is given', () => {
// given
const someProps = {
title: 'Some Context',
active: true,
expanded: false,
setExpanded: jest.fn,
optionsProps: {
activeName: 'A',
list: ['A', 'B'],
onSelectOption: jest.fn,
},
};
// when
const result = shallow(<ToolBarMenu {...someProps} />);
// then
expect(result).toMatchInlineSnapshot(`
<lifecycle(WithTooltipPure)
closeOnClick={true}
onVisibilityChange={[Function]}
placement="top"
tooltip={
<ToolBarMenuOptions
activeName="A"
list={
Array [
"A",
"B",
]
}
onSelectOption={[Function]}
/>
}
tooltipShown={false}
trigger="click"
>
<TabButton
active={true}
>
Some Context
</TabButton>
</lifecycle(WithTooltipPure)>
`);
});
});

14
addons/contexts/src/manager/components/ToolBarMenu.tsx
View File

@ -1,10 +1,10 @@
import React, { ComponentProps } from 'react';
import { Icons, IconButton, WithTooltip } from '@storybook/components';
import { Icons, IconButton, WithTooltip, TabButton } from '@storybook/components';
import { ToolBarMenuOptions } from './ToolBarMenuOptions';
import { ContextNode, FCNoChildren } from '../../shared/types.d';
type ToolBarMenu = FCNoChildren<{
icon: ComponentProps<typeof Icons>['icon'];
icon?: ComponentProps<typeof Icons>['icon'] | '' | void;
title: ContextNode['title'];
active: boolean;
expanded: boolean;
@ -28,8 +28,12 @@ export const ToolBarMenu: ToolBarMenu = ({
onVisibilityChange={setExpanded}
tooltip={<ToolBarMenuOptions {...optionsProps} />}
>
<IconButton active={active} title={title}>
<Icons icon={icon} />
</IconButton>
{icon ? (
<IconButton active={active} title={title}>
<Icons icon={icon} />
</IconButton>
) : (
<TabButton active={active}>{title}</TabButton>
)}
</WithTooltip>
);

1
addons/info/package.json
View File

@ -28,6 +28,7 @@
"@storybook/theming": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"global": "^4.3.2",
"jsx-to-string": "^1.4.0",
"marksy": "^7.0.0",
"nested-object-assign": "^1.0.3",
"prop-types": "^15.7.2",

15596
addons/info/src/__snapshots__/index.test.js.snap
View File

File diff suppressed because it is too large Load Diff

179
addons/info/src/components/Node.js
View File

@ -1,179 +0,0 @@
import React from 'react';
import { isForwardRef } from 'react-is';
import PropTypes from 'prop-types';
import Props from './Props';
import { getDisplayName } from '../react-utils';
const stylesheet = {
containerStyle: {},
tagStyle: {
color: '#444',
},
};
function getData(element) {
const data = {
name: null,
text: null,
children: null,
};
if (element === null) {
return data;
}
if (typeof element === 'string') {
data.text = element;
return data;
}
if (typeof element === 'number') {
data.text = String.toString(element);
return data;
}
data.children = element.props.children;
data.name = getDisplayName(element.type);
return data;
}
export default function Node(props) {
const {
node,
depth,
maxPropsIntoLine,
maxPropObjectKeys,
maxPropArrayLength,
maxPropStringLength,
} = props;
const { tagStyle, containerStyle } = stylesheet;
const leftPad = {
paddingLeft: 3 + (depth + 1) * 15,
paddingRight: 3,
};
// Keep a copy so that further mutations to containerStyle don't impact us:
const containerStyleCopy = Object.assign({}, containerStyle, leftPad);
const { name, text, children } = getData(node);
// Just text
if (!name) {
return (
<div style={containerStyleCopy}>
<span style={tagStyle}>{text}</span>
</div>
);
}
if (isForwardRef(node) && !node.type.displayName) {
const childElement = node.type.render(node.props);
return (
<div>
<div style={containerStyleCopy}>
<span style={tagStyle}>
&lt;
{`ForwardRef`}
</span>
<Props
node={node}
maxPropsIntoLine={maxPropsIntoLine}
maxPropObjectKeys={maxPropObjectKeys}
maxPropArrayLength={maxPropArrayLength}
maxPropStringLength={maxPropStringLength}
/>
<span style={tagStyle}>&gt;</span>
</div>
<Node
node={childElement}
depth={depth + 1}
maxPropsIntoLine={maxPropsIntoLine}
maxPropObjectKeys={maxPropObjectKeys}
maxPropArrayLength={maxPropArrayLength}
maxPropStringLength={maxPropStringLength}
/>
<div style={containerStyleCopy}>
<span style={tagStyle}>
&lt;/
{`ForwardRef`}
&gt;
</span>
</div>
</div>
);
}
// Single-line tag
if (!children) {
return (
<div style={containerStyleCopy}>
<span style={tagStyle}>
&lt;
{name}
</span>
<Props
node={node}
singleLine
maxPropsIntoLine={maxPropsIntoLine}
maxPropObjectKeys={maxPropObjectKeys}
maxPropArrayLength={maxPropArrayLength}
maxPropStringLength={maxPropStringLength}
/>
<span style={tagStyle}>/&gt;</span>
</div>
);
}
// tag with children
return (
<div>
<div style={containerStyleCopy}>
<span style={tagStyle}>
&lt;
{name}
</span>
<Props
node={node}
maxPropsIntoLine={maxPropsIntoLine}
maxPropObjectKeys={maxPropObjectKeys}
maxPropArrayLength={maxPropArrayLength}
maxPropStringLength={maxPropStringLength}
/>
<span style={tagStyle}>&gt;</span>
</div>
{React.Children.map(children, childElement => (
<Node
node={childElement}
depth={depth + 1}
maxPropsIntoLine={maxPropsIntoLine}
maxPropObjectKeys={maxPropObjectKeys}
maxPropArrayLength={maxPropArrayLength}
maxPropStringLength={maxPropStringLength}
/>
))}
<div style={containerStyleCopy}>
<span style={tagStyle}>
&lt;/
{name}
&gt;
</span>
</div>
</div>
);
}
Node.defaultProps = {
node: null,
depth: 0,
};
Node.propTypes = {
node: PropTypes.node,
depth: PropTypes.number,
maxPropsIntoLine: PropTypes.number.isRequired,
maxPropObjectKeys: PropTypes.number.isRequired,
maxPropArrayLength: PropTypes.number.isRequired,
maxPropStringLength: PropTypes.number.isRequired,
};

96
addons/info/src/components/Story.js
View File

@ -1,14 +1,14 @@
/* eslint no-underscore-dangle: 0 */
import React, { Component, createElement } from 'react';
import React, { Fragment, Component, createElement } from 'react';
import { isForwardRef } from 'react-is';
import { polyfill } from 'react-lifecycles-compat';
import PropTypes from 'prop-types';
import global from 'global';
import marksy from 'marksy';
import Node from './Node';
import { Pre } from './markdown';
import jsxToString from 'react-element-to-jsx-string';
import { Code } from './markdown';
import { getDisplayName, getType } from '../react-utils';
global.STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES || [];
@ -37,10 +37,9 @@ const stylesheetBase = {
position: 'fixed',
background: 'white',
top: 0,
bottom: 0,
left: 0,
right: 0,
padding: '0 40px',
height: '110vh',
width: '100vw',
overflow: 'auto',
zIndex: 99999,
},
@ -54,12 +53,9 @@ const stylesheetBase = {
fontWeight: 300,
lineHeight: 1.45,
fontSize: '15px',
border: '1px solid #eee',
padding: '20px 40px 40px',
borderRadius: '2px',
backgroundColor: '#fff',
marginTop: '20px',
marginBottom: '20px',
},
infoContent: {
marginBottom: 0,
@ -133,7 +129,7 @@ class Story extends Component {
const { stylesheet } = this.state;
return (
<div>
<Fragment>
{this._renderInlineHeader()}
{this._renderStory()}
<div style={stylesheet.infoPage}>
@ -144,7 +140,7 @@ class Story extends Component {
{this._getPropTables()}
</div>
</div>
</div>
</Fragment>
);
}
@ -187,7 +183,7 @@ class Story extends Component {
};
return (
<div>
<Fragment>
<div style={stylesheet.children}>{children}</div>
<button
type="button"
@ -197,26 +193,28 @@ class Story extends Component {
>
Show Info
</button>
<div style={infoStyle} className="info__overlay">
<button
type="button"
style={buttonStyle}
onClick={closeOverlay}
className="info__close-button"
>
×
</button>
<div style={stylesheet.infoPage}>
<div style={stylesheet.infoBody}>
{this._getInfoHeader()}
{this._getInfoContent()}
{this._getComponentDescription()}
{this._getSourceCode()}
{this._getPropTables()}
{open ? (
<div style={infoStyle} className="info__overlay">
<button
type="button"
style={buttonStyle}
onClick={closeOverlay}
className="info__close-button"
>
×
</button>
<div style={stylesheet.infoPage}>
<div style={stylesheet.infoBody}>
{this._getInfoHeader()}
{this._getInfoContent()}
{this._getComponentDescription()}
{this._getSourceCode()}
{this._getPropTables()}
</div>
</div>
</div>
</div>
</div>
) : null}
</Fragment>
);
}
@ -260,7 +258,8 @@ class Story extends Component {
padding = matches[0].length;
}
const source = lines.map(s => s.slice(padding)).join('\n');
return <div style={stylesheet.infoContent}>{this.marksy(source).tree}</div>;
return <Fragment>{this.marksy(source).tree}</Fragment>;
}
_getComponentDescription() {
@ -275,7 +274,7 @@ class Story extends Component {
Object.keys(STORYBOOK_REACT_CLASSES).forEach(key => {
if (validMatches.includes(STORYBOOK_REACT_CLASSES[key].name)) {
const componentDescription = STORYBOOK_REACT_CLASSES[key].docgenInfo.description;
retDiv = <div>{this.marksy(componentDescription).tree}</div>;
retDiv = <Fragment>{this.marksy(componentDescription).tree}</Fragment>;
}
});
}
@ -284,14 +283,7 @@ class Story extends Component {
}
_getSourceCode() {
const {
showSource,
maxPropsIntoLine,
maxPropObjectKeys,
maxPropArrayLength,
maxPropStringLength,
children,
} = this.props;
const { showSource, children } = this.props;
const { stylesheet } = this.state;
if (!showSource) {
@ -299,22 +291,10 @@ class Story extends Component {
}
return (
<div>
<Fragment>
<h1 style={stylesheet.source.h1}>Story Source</h1>
<Pre>
{React.Children.map(children, (root, idx) => (
<Node
key={idx} // eslint-disable-line react/no-array-index-key
node={root}
depth={0}
maxPropsIntoLine={maxPropsIntoLine}
maxPropObjectKeys={maxPropObjectKeys}
maxPropArrayLength={maxPropArrayLength}
maxPropStringLength={maxPropStringLength}
/>
))}
</Pre>
</div>
<Code code={jsxToString(children)} language="jsx" format={false} />
</Fragment>
);
}
@ -404,16 +384,15 @@ class Story extends Component {
}
return (
<div>
<Fragment>
<h1 style={stylesheet.source.h1}>Prop Types</h1>
{propTables}
</div>
</Fragment>
);
}
render() {
const { showInline } = this.props;
// <ThemeProvider theme={stylesheet}></ThemeProvider>
return showInline ? this._renderInline() : this._renderOverlay();
}
}
@ -437,7 +416,6 @@ Story.propTypes = {
styles: PropTypes.func.isRequired,
children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
components: PropTypes.shape({}),
maxPropsIntoLine: PropTypes.number.isRequired,
maxPropObjectKeys: PropTypes.number.isRequired,
maxPropArrayLength: PropTypes.number.isRequired,
maxPropStringLength: PropTypes.number.isRequired,

11
addons/info/src/components/markdown/code.js
View File

@ -1,11 +1,14 @@
import React from 'react';
import PropTypes from 'prop-types';
import { SyntaxHighlighter } from '@storybook/components';
import { ThemeProvider, convert } from '@storybook/theming';
const Code = ({ language, code }) => (
<SyntaxHighlighter bordered copyable language={language}>
{code}
</SyntaxHighlighter>
const Code = ({ code, language = 'plaintext', ...rest }) => (
<ThemeProvider theme={convert()}>
<SyntaxHighlighter bordered copyable language={language} {...rest}>
{code}
</SyntaxHighlighter>
</ThemeProvider>
);
Code.propTypes = {
language: PropTypes.string.isRequired,

20
addons/info/src/components/markdown/text.js
View File

@ -5,35 +5,21 @@ const defaultProps = { children: null };
const propTypes = { children: PropTypes.node };
export function P({ children }) {
const style = {
fontSize: '15px',
};
// <P> is oftentimes used as a parent element of
// <a> and <pre> elements, which is why <div>
// is used as the outputted element when parsing
// marksy content rather than <p>.
return <div style={style}>{children}</div>;
return <p>{children}</p>;
}
P.defaultProps = defaultProps;
P.propTypes = propTypes;
export function LI({ children }) {
const style = {
fontSize: '15px',
};
return <li style={style}>{children}</li>;
return <li>{children}</li>;
}
LI.defaultProps = defaultProps;
LI.propTypes = propTypes;
export function UL({ children }) {
const style = {
fontSize: '15px',
};
return <ul style={style}>{children}</ul>;
return <ul>{children}</ul>;
}
UL.defaultProps = defaultProps;

4
addons/info/src/index.test.js
View File

@ -33,7 +33,9 @@ const storybookReactClassMock = {
# Awesome test component description
## with markdown support
**bold** *cursive*
`,
\`\`\`js
a;
\`\`\``,
name: 'TestComponent',
},
};

15
addons/notes/README.md
View File

@ -102,3 +102,18 @@ When using Markdown, you can also embed gifs from Giphy into your Markdown. Curr
<Giphy gif='cheese' />
```
## Multiple Notes Sections
If you need to display different notes for different consumers of your storybook (e.g design, developers), you can configure multiple notes pages. The following will render a tab with unique notes for both `Introduction` and `Design`.
```js
import { storiesOf } from '@storybook/react';
import Component from './Component';
import intro from './intro.md';
import design from './design.md';
storiesOf('Component', module).add('With Markdown', () => <Component />, {
notes: { Introduction: intro, 'Design Notes': design },
});
```

97
addons/notes/src/Panel.tsx
View File

@ -9,6 +9,8 @@ import {
Placeholder,
DocumentFormatting,
Link,
TabWrapper,
TabsState,
} from '@storybook/components';
import Markdown from 'markdown-to-jsx';
import Giphy from './giphy';
@ -31,14 +33,14 @@ interface Props {
api: API;
}
function read(param: Parameters | undefined): string | undefined {
function read(param: Parameters | undefined): Record<string, string> | string | undefined {
if (!param) {
return undefined;
}
if (typeof param === 'string') {
return param;
}
if ('disabled' in param) {
if ('disable' in param) {
return undefined;
}
if ('text' in param) {
@ -47,6 +49,9 @@ function read(param: Parameters | undefined): string | undefined {
if ('markdown' in param) {
return param.markdown;
}
if (typeof param === 'object') {
return param;
}
return undefined;
}
@ -110,7 +115,10 @@ interface Overrides {
}
type Options = typeof defaultOptions & Overrides;
const mapper = ({ state, api }: Combo): { value?: string; options: Options } => {
const mapper = ({
state,
api,
}: Combo): { value?: string | Record<string, string>; options: Options } => {
const extraElements = Object.entries(api.getElements(types.NOTES_ELEMENT)).reduce(
(acc, [k, v]) => ({ ...acc, [k]: v.render }),
{}
@ -133,29 +141,66 @@ const NotesPanel = ({ active }: Props) => {
return (
<Consumer filter={mapper}>
{({ options, value }: { options: Options; value?: string }) => {
return value ? (
<Panel className="addon-notes-container">
<DocumentFormatting>
<Markdown options={options}>{formatter(value)}</Markdown>
</DocumentFormatting>
</Panel>
) : (
<Placeholder>
<Fragment>No notes yet</Fragment>
<Fragment>
Learn how to{' '}
<Link
href="https://github.com/storybookjs/storybook/tree/master/addons/notes"
target="_blank"
withArrow
secondary
cancel={false}
>
document components in Markdown
</Link>
</Fragment>
</Placeholder>
{({ options, value }: { options: Options; value?: string | Record<string, string> }) => {
if (!value) {
return (
<Placeholder>
<Fragment>No notes yet</Fragment>
<Fragment>
Learn how to{' '}
<Link
href="https://github.com/storybookjs/storybook/tree/master/addons/notes"
target="_blank"
withArrow
secondary
cancel={false}
>
document components in Markdown
</Link>
</Fragment>
</Placeholder>
);
}
if (typeof value === 'string' || Object.keys(value).length === 1) {
const md = typeof value === 'object' ? Object.values(value)[0] : value;
return (
<Panel className="addon-notes-container">
<DocumentFormatting>
<Markdown options={options}>{formatter(md)}</Markdown>
</DocumentFormatting>
</Panel>
);
}
const groups: { title: string; render: (props: { active: boolean }) => void }[] = [];
Object.entries(value).forEach(([title, docs]) => {
groups.push({
title,
render: ({ active: isActive }) => (
<TabWrapper key={title} active={isActive}>
<Panel>
<DocumentFormatting>
<Markdown options={options}>{formatter(docs)}</Markdown>
</DocumentFormatting>
</Panel>
</TabWrapper>
),
});
});
return (
<div className="addon-notes-container">
<TabsState>
{groups.map(group => (
<div id={group.title} key={group.title} title={group.title}>
{group.render}
</div>
))}
</TabsState>
</div>
);
}}
</Consumer>

8
addons/notes/src/shared.ts
View File

@ -11,5 +11,11 @@ interface MarkdownParameter {
interface DisabledParameter {
disable: boolean;
}
type TabsParameter = Record<string, string>;
export type Parameters = string | TextParameter | MarkdownParameter | DisabledParameter;
export type Parameters =
| string
| TextParameter
| MarkdownParameter
| DisabledParameter
| TabsParameter;

7
addons/storyshots/storyshots-puppeteer/package.json
View File

@ -26,11 +26,14 @@
"@storybook/router": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"jest-image-snapshot": "^2.8.2",
"puppeteer": "^1.12.2",
"regenerator-runtime": "^0.12.1"
},
"optionalDependencies": {
"puppeteer": "^1.12.2"
},
"peerDependencies": {
"@storybook/addon-storyshots": "5.2.0-alpha.23"
"@storybook/addon-storyshots": "5.2.0-alpha.23",
"puppeteer": "^1.12.2"
},
"publishConfig": {
"access": "public"

0
app/react-native/README.md → app/react-native/readme.md
View File

2
docs/package.json
View File

@ -33,7 +33,7 @@
"gatsby-source-filesystem": "^1.5.39",
"gatsby-transformer-remark": "^1.7.44",
"global": "^4.4.0",
"html-react-parser": "^0.7.0",
"html-react-parser": "^0.7.1",
"is-builtin-module": "^3.0.0",
"lodash": "^4.17.11",
"marked": "^0.6.2",

6
docs/src/pages/presets/preset-gallery/index.md
View File

@ -11,7 +11,11 @@ Storybook-maintained presets are available in the [Presets repo](https://github.
### [Typescript](https://github.com/storybookjs/presets/tree/master/packages/preset-typescript)
Write your stories in typescript with a single line of configuration.
One-line Typescript w/ docgen configuration for storybook.
### [SCSS](https://github.com/storybookjs/presets/tree/master/packages/preset-scss)
One-line SCSS configuration for storybook.
## Community presets

66
docs/yarn.lock
View File

@ -2895,6 +2895,11 @@ core-js@^2.4.0, core-js@^2.5.0:
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.5.tgz#44bc8d249e7fb2ff5d00e0341a7ffb94fbf67895"
integrity sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A==
core-js@^2.4.1:
version "2.6.9"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.9.tgz#6b4b214620c834152e179323727fc19741b084f2"
integrity sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==
core-js@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.0.1.tgz#1343182634298f7f38622f95e73f54e48ddf4738"
@ -4308,6 +4313,25 @@ fb-watchman@^2.0.0:
dependencies:
bser "^2.0.0"
fbjs-css-vars@^1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz#216551136ae02fe255932c3ec8775f18e2c078b8"
integrity sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==
fbjs@1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-1.0.0.tgz#52c215e0883a3c86af2a7a776ed51525ae8e0a5a"
integrity sha512-MUgcMEJaFhCaF1QtWGnmq9ZDRAzECTCRAF7O6UZIlAlkTs1SasiX9aP0Iw7wfD2mJ7wDTNfg2w7u5fSCwJk1OA==
dependencies:
core-js "^2.4.1"
fbjs-css-vars "^1.0.0"
isomorphic-fetch "^2.1.1"
loose-envify "^1.0.0"
object-assign "^4.1.0"
promise "^7.1.1"
setimmediate "^1.0.5"
ua-parser-js "^0.7.18"
fbjs@^0.8.0, fbjs@^0.8.1, fbjs@^0.8.14, fbjs@^0.8.4, fbjs@^0.8.9:
version "0.8.17"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
@ -5723,14 +5747,14 @@ html-entities@^1.2.0:
resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
integrity sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=
html-react-parser@^0.7.0:
version "0.7.0"
resolved "https://registry.yarnpkg.com/html-react-parser/-/html-react-parser-0.7.0.tgz#943b935ce76705bdbef13eed2fec7eee010e5d06"
integrity sha512-CheTifRqOK1mFmtTnFnDUeHPrA19knrus4Hx+7lS/V5ywHvjAl5BMM8phVLWwLo73rqP2QBpnfvraXMMBgHqMw==
html-react-parser@^0.7.1:
version "0.7.1"
resolved "https://registry.yarnpkg.com/html-react-parser/-/html-react-parser-0.7.1.tgz#4230717092e1d2ea486bbe5e6b7f8c955b29cf91"
integrity sha512-e1rvyL5F4BjtQ+p89Y00lQem9A6G45WksytIwEpgxr7rVz4tF0vh1+jcQc8JfAjxWh8hOvzt2VCn1rPPpFZsVQ==
dependencies:
"@types/domhandler" "2.4.1"
html-dom-parser "0.2.1"
react-dom-core "0.0.4"
react-dom-core "0.1.1"
style-to-object "0.2.2"
html-void-elements@^1.0.0, html-void-elements@^1.0.1:
@ -8132,6 +8156,11 @@ oauth-sign@~0.9.0:
resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
object-assign@4.1.1, object-assign@^4.0.0, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
object-assign@^2.0.0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-2.1.1.tgz#43c36e5d569ff8e4816c4efa8be02d26967c18aa"
@ -8142,11 +8171,6 @@ object-assign@^3.0.0:
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-3.0.0.tgz#9bedd5ca0897949bca47e7ff408062d549f587f2"
integrity sha1-m+3VygiXlJvKR+f/QIBi1Un1h/I=
object-assign@^4.0.0, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
object-component@0.0.3:
version "0.0.3"
resolved "https://registry.yarnpkg.com/object-component/-/object-component-0.0.3.tgz#f0c69aa50efc95b866c186f400a33769cb2f1291"
@ -9681,6 +9705,14 @@ rc@^1.0.1, rc@^1.1.2, rc@^1.1.6, rc@^1.2.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
react-15@0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/react-15/-/react-15-0.2.0.tgz#5cc915031b433c50bdec225d3ef8b80a07295175"
integrity sha512-9bdNuBo2I+2AerqURa37AcCKwHqjOvWuNrsd8wKXF+Y+ceBbJAJ1GkWeTliZV40RiEiAgRCLOzwCBxihCZvOfg==
dependencies:
fbjs "1.0.0"
object-assign "4.1.1"
react-addons-create-fragment@^15.6.2:
version "15.6.2"
resolved "https://registry.yarnpkg.com/react-addons-create-fragment/-/react-addons-create-fragment-15.6.2.tgz#a394de7c2c7becd6b5475ba1b97ac472ce7c74f8"
@ -9735,12 +9767,14 @@ react-document-title@^2.0.3:
prop-types "^15.5.6"
react-side-effect "^1.0.2"
react-dom-core@0.0.4:
version "0.0.4"
resolved "https://registry.yarnpkg.com/react-dom-core/-/react-dom-core-0.0.4.tgz#26ef74749c1235993b0e570a83308f323a485b2a"
integrity sha512-nJoncKG/Ltlv3K7f0uVwX3kEvhrRl3dyKguxpYR3OmFF1REcRHiWWxSkD1hJdgeVfoBFp/DPVp48JZuaQhwLoQ==
react-dom-core@0.1.1:
version "0.1.1"
resolved "https://registry.yarnpkg.com/react-dom-core/-/react-dom-core-0.1.1.tgz#d580a72941f84f7b5b53d95d406b654181fb8021"
integrity sha512-06UPgimujyIOsR9owLdLy5731O8rxs/CZrFYX/ZPDLC6VUDwJuTkPWmLVA03es1tO7JqsqsET4rVe0cfKBEQXA==
dependencies:
react "15"
fbjs "1.0.0"
object-assign "4.1.1"
react-15 "0.2.0"
react-dom@^15.6.0:
version "15.6.2"
@ -9939,7 +9973,7 @@ react-transition-group@^1.2.0:
prop-types "^15.5.6"
warning "^3.0.0"
react@15, react@^15.6.0:
react@^15.6.0:
version "15.6.2"
resolved "https://registry.yarnpkg.com/react/-/react-15.6.2.tgz#dba0434ab439cfe82f108f0f511663908179aa72"
integrity sha1-26BDSrQ5z+gvEI8PURZjkIF5qnI=

2
examples-native/crna-kitchen-sink/package.json
View File

@ -37,7 +37,7 @@
"babel-preset-expo": "^5.1.1",
"core-js": "^3.0.1",
"expo-cli": "^2.17.1",
"jest-expo": "^32.0.0",
"jest-expo": "^33.0.2",
"react-test-renderer": "16.5.1",
"schedule": "^0.5.0"
},

12250
examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
View File

File diff suppressed because it is too large Load Diff

1
examples/official-storybook/stories/addon-contexts.stories.js
View File

@ -5,7 +5,6 @@ import { withContexts } from '@storybook/addon-contexts/react';
// Example A: Simple CSS Theming
const topLevelContexts = [
{
icon: 'sidebaralt',
title: 'CSS Themes',
components: ['div'],
params: [

4
lib/cli/generators/ANGULAR/index.js
View File

@ -1,4 +1,4 @@
import mergeDirs from 'merge-dirs';
import fse from 'fs-extra';
import path from 'path';
import {
editStorybookTsConfig,
@ -70,7 +70,7 @@ function editAngularAppTsConfig() {
}
export default async npmOptions => {
mergeDirs(path.resolve(__dirname, 'template'), '.', 'overwrite');
fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
await addDependencies(npmOptions);
editAngularAppTsConfig();

4
lib/cli/generators/EMBER/index.js
View File

@ -1,5 +1,5 @@
import path from 'path';
import mergeDirs from 'merge-dirs';
import fse from 'fs-extra';
import {
getVersions,
getPackageJson,
@ -17,7 +17,7 @@ export default async npmOptions => {
'@storybook/addons'
);
mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
const packageJson = getPackageJson();

4
lib/cli/generators/HTML/index.js
View File

@ -1,4 +1,4 @@
import mergeDirs from 'merge-dirs';
import fse from 'fs-extra';
import path from 'path';
import npmInit from '../../lib/npm_init';
import {
@ -11,7 +11,7 @@ import {
export default async npmOptions => {
const storybookVersion = await getVersion(npmOptions, '@storybook/html');
mergeDirs(path.resolve(__dirname, 'template'), '.', 'overwrite');
fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
let packageJson = getPackageJson();
if (!packageJson) {

4
lib/cli/generators/MARKO/index.js
View File

@ -1,5 +1,5 @@
import path from 'path';
import mergeDirs from 'merge-dirs';
import fse from 'fs-extra';
import {
getVersions,
getPackageJson,
@ -16,7 +16,7 @@ export default async npmOptions => {
'@storybook/addon-knobs'
);
mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
const packageJson = getPackageJson();

4
lib/cli/generators/METEOR/index.js
View File

@ -1,7 +1,7 @@
import path from 'path';
import fs from 'fs';
import JSON5 from 'json5';
import mergeDirs from 'merge-dirs';
import fse from 'fs-extra';
import {
getVersions,
getPackageJson,
@ -32,7 +32,7 @@ export default async npmOptions => {
'@babel/preset-react'
);
mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
const packageJson = getPackageJson();
packageJson.devDependencies = packageJson.devDependencies || {};

4
lib/cli/generators/MITHRIL/index.js
View File

@ -1,5 +1,5 @@
import path from 'path';
import mergeDirs from 'merge-dirs';
import fse from 'fs-extra';
import {
getVersions,
getPackageJson,
@ -17,7 +17,7 @@ export default async npmOptions => {
'@storybook/addons'
);
mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
const packageJson = getPackageJson();

4
lib/cli/generators/POLYMER/index.js
View File

@ -1,4 +1,4 @@
import mergeDirs from 'merge-dirs';
import fse from 'fs-extra';
import path from 'path';
import {
getVersions,
@ -14,7 +14,7 @@ export default async npmOptions => {
'@storybook/polymer',
'polymer-webpack-loader'
);
mergeDirs(path.resolve(__dirname, 'template'), '.', 'overwrite');
fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
const packageJson = getPackageJson() || {}; // Maybe we are in a bower only project, still we need a package json

4
lib/cli/generators/PREACT/index.js
View File

@ -1,5 +1,5 @@
import path from 'path';
import mergeDirs from 'merge-dirs';
import fse from 'fs-extra';
import {
getVersions,
getPackageJson,
@ -17,7 +17,7 @@ export default async npmOptions => {
'@storybook/addons'
);
mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
const packageJson = getPackageJson();

4
lib/cli/generators/RAX/index.js
View File

@ -1,5 +1,5 @@
import path from 'path';
import mergeDirs from 'merge-dirs';
import fse from 'fs-extra';
import {
getVersions,
getPackageJson,
@ -24,7 +24,7 @@ export default async npmOptions => {
'rax'
);
mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
const packageJson = getPackageJson();

4
lib/cli/generators/REACT/index.js
View File

@ -1,5 +1,5 @@
import path from 'path';
import mergeDirs from 'merge-dirs';
import fse from 'fs-extra';
import {
getVersions,
getPackageJson,
@ -17,7 +17,7 @@ export default async npmOptions => {
'@storybook/addons'
);
mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
const packageJson = getPackageJson();

4
lib/cli/generators/REACT_NATIVE/index.js
View File

@ -1,4 +1,4 @@
import mergeDirs from 'merge-dirs';
import fse from 'fs-extra';
import path from 'path';
import shell from 'shelljs';
import chalk from 'chalk';
@ -26,7 +26,7 @@ export default async (npmOptions, installServer) => {
);
// copy all files from the template directory to project directory
mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
// set correct project name on entry files if possible
const dirname = shell.ls('-d', 'ios/*.xcodeproj').stdout;

4
lib/cli/generators/REACT_SCRIPTS/index.js
View File

@ -1,4 +1,4 @@
import mergeDirs from 'merge-dirs';
import fse from 'fs-extra';
import path from 'path';
import fs from 'fs';
import semver from 'semver';
@ -19,7 +19,7 @@ export default async npmOptions => {
'@storybook/addons'
);
mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
const packageJson = getPackageJson();

4
lib/cli/generators/RIOT/index.js
View File

@ -1,4 +1,4 @@
import mergeDirs from 'merge-dirs';
import fse from 'fs-extra';
import path from 'path';
import {
getVersions,
@ -24,7 +24,7 @@ export default async npmOptions => {
'riot-tag-loader'
);
mergeDirs(path.resolve(__dirname, 'template'), '.', 'overwrite');
fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
const packageJson = getPackageJson();

4
lib/cli/generators/SFC_VUE/index.js
View File

@ -1,4 +1,4 @@
import mergeDirs from 'merge-dirs';
import fse from 'fs-extra';
import path from 'path';
import {
getVersions,
@ -17,7 +17,7 @@ export default async npmOptions => {
'@storybook/addons'
);
mergeDirs(path.resolve(__dirname, 'template'), '.', 'overwrite');
fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
const packageJson = getPackageJson();

4
lib/cli/generators/SVELTE/index.js
View File

@ -1,5 +1,5 @@
import path from 'path';
import mergeDirs from 'merge-dirs';
import fse from 'fs-extra';
import {
getVersions,
getPackageJson,
@ -26,7 +26,7 @@ export default async npmOptions => {
'svelte-loader'
);
mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
const packageJson = getPackageJson();

4
lib/cli/generators/VUE/index.js
View File

@ -1,4 +1,4 @@
import mergeDirs from 'merge-dirs';
import fse from 'fs-extra';
import path from 'path';
import {
getVersions,
@ -27,7 +27,7 @@ export default async npmOptions => {
'@babel/core'
);
mergeDirs(path.resolve(__dirname, 'template'), '.', 'overwrite');
fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
const packageJson = getPackageJson();

4
lib/cli/generators/WEBPACK_REACT/index.js
View File

@ -1,4 +1,4 @@
import mergeDirs from 'merge-dirs';
import fse from 'fs-extra';
import path from 'path';
import {
getVersions,
@ -17,7 +17,7 @@ export default async npmOptions => {
'@storybook/addons'
);
mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
const packageJson = getPackageJson();

2
lib/cli/package.json
View File

@ -35,10 +35,10 @@
"commander": "^2.19.0",
"core-js": "^3.0.1",
"cross-spawn": "^6.0.5",
"fs-extra": "^8.0.1",
"inquirer": "^6.2.0",
"jscodeshift": "^0.6.3",
"json5": "^2.1.0",
"merge-dirs": "^0.2.1",
"semver": "^6.0.0",
"shelljs": "^0.8.3",
"update-notifier": "^3.0.0"

37
lib/client-api/src/story_store.js
View File

@ -1,6 +1,4 @@
/* eslint no-underscore-dangle: 0 */
import { history, document } from 'global';
import qs from 'qs';
import EventEmitter from 'eventemitter3';
import memoize from 'memoizerific';
import debounce from 'lodash/debounce';
@ -8,10 +6,6 @@ import { stripIndents } from 'common-tags';
import Events from '@storybook/core-events';
import { logger } from '@storybook/client-logger';
import { toId } from '@storybook/router/utils';
import pathToId from './pathToId';
import { getQueryParams } from './queryparams';
// TODO: these are copies from components/nav/lib
// refactor to DRY
@ -39,9 +33,6 @@ const toExtracted = obj =>
return Object.assign(acc, { [key]: value });
}, {});
const getIdFromLegacyQuery = ({ path, selectedKind, selectedStory }) =>
(path && pathToId(path)) || (selectedKind && selectedStory && toId(selectedKind, selectedStory));
export default class StoryStore extends EventEmitter {
constructor(params) {
super();
@ -51,19 +42,6 @@ export default class StoryStore extends EventEmitter {
this._revision = 0;
this._selection = {};
this._channel = params.channel;
this.on(Events.STORY_INIT, () => {
let storyId = this.getIdOnPath();
if (!storyId) {
const query = getQueryParams();
storyId = getIdFromLegacyQuery(query);
if (storyId) {
const { path, selectedKind, selectedStory, ...rest } = query;
this.setPath(storyId, rest);
}
}
this.setSelection(this.fromId(storyId));
});
}
setChannel = channel => {
@ -71,17 +49,6 @@ export default class StoryStore extends EventEmitter {
};
// NEW apis
getIdOnPath = () => {
const { id } = getQueryParams();
return id;
};
setPath = (storyId, params = {}) => {
const path = `${document.location.pathname}?${qs.stringify({ ...params, id: storyId })}`;
history.replaceState({}, '', path);
};
fromId = id => {
try {
const data = this._data[id];
@ -116,8 +83,8 @@ export default class StoryStore extends EventEmitter {
);
}
setSelection = data => {
this._selection = data;
setSelection = ({ storyId }) => {
this._selection = { storyId };
setTimeout(() => this.emit(Events.STORY_RENDER), 1);
};

59
lib/client-api/src/story_store.test.js
View File

@ -1,25 +1,9 @@
import { history, document } from 'global';
import createChannel from '@storybook/channel-postmessage';
import Events from '@storybook/core-events';
import { toId } from '@storybook/router/utils';
import StoryStore from './story_store';
import { defaultDecorateStory } from './client_api';
jest.mock('global', () => ({
history: { replaceState: jest.fn() },
window: {
addEventListener: jest.fn(),
},
document: {
location: {
pathname: 'pathname',
search: '',
},
addEventListener: jest.fn(),
},
}));
jest.mock('@storybook/node-logger', () => ({
logger: {
info: jest.fn(),
@ -148,47 +132,4 @@ describe('preview.story_store', () => {
});
});
});
describe('setPath', () => {
it('preserves custom URL params', () => {
const store = new StoryStore({ channel });
store.setPath('story--id', { foo: 'bar' });
expect(history.replaceState).toHaveBeenCalledWith({}, '', 'pathname?foo=bar&id=story--id');
});
});
describe('STORY_INIT', () => {
const storyFn = () => 0;
it('supports path params', () => {
document.location = {
pathname: 'pathname',
search: '?path=/story/kind--story&bar=baz',
};
const store = new StoryStore({ channel });
store.addStory(...make('kind', 'story', storyFn));
store.setSelection = jest.fn();
store.emit(Events.STORY_INIT);
expect(history.replaceState).toHaveBeenCalledWith({}, '', 'pathname?bar=baz&id=kind--story');
expect(store.setSelection).toHaveBeenCalled();
expect(store.setSelection.mock.calls[0][0].getDecorated()).toEqual(storyFn);
});
it('supports story kind/name params', () => {
document.location = {
pathname: 'pathname',
search: '?selectedKind=kind&selectedStory=story&bar=baz',
};
const store = new StoryStore({ channel });
store.addStory(...make('kind', 'story', storyFn));
store.setSelection = jest.fn();
store.emit(Events.STORY_INIT);
expect(history.replaceState).toHaveBeenCalledWith({}, '', 'pathname?bar=baz&id=kind--story');
expect(store.setSelection).toHaveBeenCalled();
expect(store.setSelection.mock.calls[0][0].getDecorated()).toEqual(storyFn);
});
});
});

1
lib/core/package.json
View File

@ -66,6 +66,7 @@
"lazy-universal-dotenv": "^2.0.0",
"node-fetch": "^2.6.0",
"open": "^6.1.0",
"pnp-webpack-plugin": "1.4.3",
"postcss-flexbugs-fixes": "^4.1.0",
"postcss-loader": "^3.0.0",
"pretty-hrtime": "^1.0.3",

42
lib/core/src/client/preview/start.js
View File

@ -6,6 +6,7 @@ import { toId } from '@storybook/router/utils';
import { logger } from '@storybook/client-logger';
import Events from '@storybook/core-events';
import deprecate from 'util-deprecate';
import { initializePath, setPath } from './url';
const classes = {
MAIN: 'sb-show-main',
@ -121,8 +122,19 @@ export default function start(render, { decorateStory } = {}) {
const renderMain = forceRender => {
const revision = storyStore.getRevision();
const selection = storyStore.getSelection();
const { kind, name, getDecorated, id } = selection || {};
const { storyId } = storyStore.getSelection();
const data = storyStore.fromId(storyId);
const { kind, name, getDecorated, id } = data || {};
const renderContext = {
...context,
...data,
selectedKind: kind,
selectedStory: name,
forceRender,
};
if (getDecorated) {
// Render story only if selectedKind or selectedStory have changed.
@ -142,21 +154,16 @@ export default function start(render, { decorateStory } = {}) {
addons.getChannel().emit(Events.STORY_CHANGED, id);
}
render({
...context,
...selection,
selectedKind: kind,
selectedStory: name,
forceRender,
});
previousRevision = revision;
previousKind = kind;
previousStory = name;
render(renderContext);
addons.getChannel().emit(Events.STORY_RENDERED, id);
} else {
showNopreview();
addons.getChannel().emit(Events.STORY_MISSING, id);
}
previousRevision = revision;
previousKind = kind;
previousStory = name;
if (!forceRender) {
document.documentElement.scrollTop = 0;
@ -194,10 +201,8 @@ export default function start(render, { decorateStory } = {}) {
storyId = deprecatedToId(kind, name);
}
const data = storyStore.fromId(storyId);
storyStore.setSelection(data);
storyStore.setPath(storyId);
storyStore.setSelection({ storyId });
setPath({ storyId });
});
// Handle keyboard shortcuts
@ -212,6 +217,11 @@ export default function start(render, { decorateStory } = {}) {
};
}
storyStore.on(Events.STORY_INIT, () => {
const { storyId } = initializePath();
storyStore.setSelection({ storyId });
});
storyStore.on(Events.STORY_RENDER, renderUI);
if (typeof window !== 'undefined') {

39
lib/core/src/client/preview/start.test.js
View File

@ -1,9 +1,12 @@
import { document, window } from 'global';
/* eslint-disable no-underscore-dangle */
import { history, document, window } from 'global';
import Events from '@storybook/core-events';
import start from './start';
jest.mock('@storybook/client-logger');
jest.mock('global', () => ({
history: { replaceState: jest.fn() },
navigator: { userAgent: 'browser', platform: '' },
window: {
__STORYBOOK_CLIENT_API__: undefined,
@ -105,3 +108,37 @@ it('emits an error and shows error when your framework calls showError', () => {
expect(render).toHaveBeenCalled();
expect(document.body.classList.add).toHaveBeenCalledWith('sb-show-errordisplay');
});
describe('STORY_INIT', () => {
it('supports path params', () => {
document.location = {
pathname: 'pathname',
search: '?path=/story/kind--story&bar=baz',
};
const render = jest.fn();
const { clientApi } = start(render);
const store = clientApi._storyStore;
store.setSelection = jest.fn();
store.emit(Events.STORY_INIT);
store.emit();
expect(store.setSelection).toHaveBeenCalledWith({ storyId: 'kind--story' });
});
it('supports story kind/name params', () => {
document.location = {
pathname: 'pathname',
search: '?selectedKind=kind&selectedStory=story&bar=baz',
};
const render = jest.fn();
const { clientApi } = start(render);
const store = clientApi._storyStore;
store.setSelection = jest.fn();
store.emit(Events.STORY_INIT);
expect(history.replaceState).toHaveBeenCalledWith({}, '', 'pathname?bar=baz&id=kind--story');
expect(store.setSelection).toHaveBeenCalledWith({ storyId: 'kind--story' });
});
});

39
lib/core/src/client/preview/url.js Normal file
View File

@ -0,0 +1,39 @@
import { history, document } from 'global';
import qs from 'qs';
import { toId } from '@storybook/router/utils';
export function pathToId(path) {
const match = (path || '').match(/^\/story\/(.+)/);
if (!match) {
throw new Error(`Invalid path '${path}', must start with '/story/'`);
}
return match[1];
}
export const setPath = ({ storyId }) => {
const { path, selectedKind, selectedStory, ...rest } = qs.parse(document.location.search, {
ignoreQueryPrefix: true,
});
const newPath = `${document.location.pathname}?${qs.stringify({ ...rest, id: storyId })}`;
history.replaceState({}, '', newPath);
};
export const getIdFromLegacyQuery = ({ path, selectedKind, selectedStory }) =>
(path && pathToId(path)) || (selectedKind && selectedStory && toId(selectedKind, selectedStory));
export const parseQueryParameters = search => {
const { id } = qs.parse(search, { ignoreQueryPrefix: true });
return id;
};
export const initializePath = () => {
const query = qs.parse(document.location.search, { ignoreQueryPrefix: true });
let { id: storyId } = query;
if (!storyId) {
storyId = getIdFromLegacyQuery(query);
if (storyId) {
setPath({ storyId });
}
}
return { storyId };
};

79
lib/core/src/client/preview/url.test.js Normal file
View File

@ -0,0 +1,79 @@
import { history, document } from 'global';
import {
pathToId,
setPath,
getIdFromLegacyQuery,
parseQueryParameters,
initializePath,
} from './url';
jest.mock('global', () => ({
history: { replaceState: jest.fn() },
document: {
location: {
pathname: 'pathname',
search: '',
},
},
}));
describe('url', () => {
describe('pathToId', () => {
it('should parse valid ids', () => {
expect(pathToId('/story/story--id')).toEqual('story--id');
});
it('should error on invalid ids', () => {
[null, '', '/whatever/story/story--id'].forEach(path => {
expect(() => pathToId(path)).toThrow(/Invalid/);
});
});
});
describe('setPath', () => {
it('should navigate to storyId', () => {
setPath({ storyId: 'story--id' });
expect(history.replaceState).toHaveBeenCalledWith({}, '', 'pathname?id=story--id');
});
it('should replace legacy parameters but preserve others', () => {
document.location.search = 'foo=bar&selectedStory=selStory&selectedKind=selKind';
setPath({ storyId: 'story--id' });
expect(history.replaceState).toHaveBeenCalledWith({}, '', 'pathname?foo=bar&id=story--id');
});
});
describe('getIdFromLegacyQuery', () => {
it('should parse story paths', () => {
expect(getIdFromLegacyQuery({ path: '/story/story--id' })).toBe('story--id');
});
it('should parse legacy queries', () => {
expect(
getIdFromLegacyQuery({ path: null, selectedKind: 'kind', selectedStory: 'story' })
).toBe('kind--story');
});
it('should not parse non-queries', () => {
expect(getIdFromLegacyQuery({})).toBeUndefined();
});
});
describe('parseQueryParameters', () => {
it('should parse id', () => {
expect(parseQueryParameters('?foo=bar&id=story--id')).toBe('story--id');
});
it('should not parse non-ids', () => {
expect(parseQueryParameters('')).toBeUndefined();
});
});
describe('initializePath', () => {
it('should handle id queries', () => {
document.location.search = '?id=story--id';
expect(initializePath()).toEqual({ storyId: 'story--id' });
expect(history.replaceState).not.toHaveBeenCalled();
});
it('should redirect legacy queries', () => {
document.location.search = '?selectedKind=kind&selectedStory=story';
expect(initializePath()).toEqual({ storyId: 'kind--story' });
expect(history.replaceState).toHaveBeenCalledWith({}, '', 'pathname?id=kind--story');
});
});
});

2
lib/core/src/server/utils/load-custom-babel-config.js
View File

@ -41,7 +41,7 @@ function loadFromPath(babelConfigPath) {
We tried both loading as JS & JSON, neither worked.
Maybe there's a syntax error in the file?`);
logger.error(`=> From JS loading we got: ${error.js.message}`);
logger.error(`=> From JSON loading we got: ${error.js.message}`);
logger.error(`=> From JSON loading we got: ${error.json && error.json.message}`);
throw error.js;
}

2
lib/ui/package.json
View File

@ -33,6 +33,7 @@
"copy-to-clipboard": "^3.0.8",
"core-js": "^3.0.1",
"core-js-pure": "^3.0.1",
"emotion-theming": "^10.0.10",
"fast-deep-equal": "^2.0.1",
"fuse.js": "^3.4.4",
"global": "^4.3.2",
@ -49,6 +50,7 @@
"react-hotkeys": "2.0.0-pre4",
"react-sizeme": "^2.6.7",
"recompose": "^0.30.0",
"regenerator-runtime": "^0.13.2",
"resolve-from": "^5.0.0",
"semver": "^6.0.0",
"store2": "^2.7.1",

1089
lib/ui/src/settings/__snapshots__/about.stories.storyshot
View File

File diff suppressed because it is too large Load Diff

3
lib/ui/src/settings/about.js
View File

@ -1,4 +1,5 @@
import React, { Fragment } from 'react';
import semver from 'semver';
import PropTypes from 'prop-types';
import { styled } from '@storybook/theming';
import { GlobalHotKeys } from 'react-hotkeys';
@ -93,7 +94,7 @@ const Container = styled.div({
});
const AboutScreen = ({ latest, current, onClose }) => {
const canUpdate = latest && latest.version !== current.version;
const canUpdate = latest && semver.gt(latest.version, current.version);
let updateMessage;
if (latest) {

3
lib/ui/src/settings/about.stories.js
View File

@ -24,6 +24,9 @@ storiesOf('UI|Settings/AboutScreen', module)
.add('up to date', () => (
<AboutScreen latest={{ version: '5.0.0', info }} current={{ version: '5.0.0' }} {...actions} />
))
.add('old version race condition', () => (
<AboutScreen latest={{ version: '5.0.0', info }} current={{ version: '5.0.3' }} {...actions} />
))
.add('new version required', () => (
<AboutScreen latest={{ version: '5.0.3', info }} current={{ version: '5.0.0' }} {...actions} />
))

2
package.json
View File

@ -164,6 +164,7 @@
"corejs-upgrade-webpack-plugin": "^2.0.0",
"cross-env": "^5.2.0",
"danger": "^7.0.15",
"del": "^4.1.1",
"detect-port": "^1.3.0",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.9.1",
@ -218,6 +219,7 @@
"sort-package-json": "^1.21.0",
"svelte": "^3.4.1",
"svelte-jest": "^0.2.0",
"trash": "^6.0.0",
"ts-jest": "^24.0.2",
"typescript": "^3.4.1",
"weak": "^1.0.1"

462
scripts/bootstrap.js vendored
View File

@ -1,199 +1,285 @@
#!/usr/bin/env node
const inquirer = require('inquirer');
const program = require('commander');
const childProcess = require('child_process');
const chalk = require('chalk');
const log = require('npmlog');
/* eslint-disable global-require, no-octal-escape */
const childProcess = require('child_process');
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);
let cooldown = 0;
log.heading = 'storybook';
const prefix = 'bootstrap';
log.addLevel('aborted', 3001, { fg: 'red', bold: true });
try {
require('inquirer');
require('commander');
require('chalk');
require('npmlog');
} catch (e) {
console.log('🕘 running bootstrap on a clean repo, we have to install dependencies');
childProcess.spawnSync('yarn', ['install', '--ignore-optional'], {
stdio: ['inherit', 'inherit', 'inherit'],
});
process.stdout.write('\x07');
process.stdout.write('\033c');
const spawn = (command, options = {}) => {
const out = childProcess.spawnSync(
`${command}`,
Object.assign(
{
shell: true,
stdio: 'inherit',
},
options
)
);
if (out.status !== 0) {
process.exit(out.status);
}
return out;
};
const main = program
.version('3.0.0')
.option('--all', `Bootstrap everything ${chalk.gray('(all)')}`);
const createTask = ({ defaultValue, option, name, check = () => true, command, pre = [] }) => ({
value: false,
defaultValue: defaultValue || false,
option: option || undefined,
name: name || 'unnamed task',
check: check || (() => true),
command: () => {
// run all pre tasks
pre
// eslint-disable-next-line no-use-before-define
.map(key => tasks[key])
.forEach(task => {
if (!task.check()) {
task.command();
}
});
log.info(prefix, name);
command();
},
});
const tasks = {
reset: createTask({
name: `Clean and re-install dependencies ${chalk.red('(reset)')}`,
defaultValue: false,
option: '--reset',
command: () => {
log.info(prefix, 'git clean');
spawn('git clean -fdx --exclude=".vscode" --exclude=".idea"');
log.info(prefix, 'yarn install');
spawn('yarn install');
},
}),
core: createTask({
name: `Core, Dll & Examples ${chalk.gray('(core)')}`,
defaultValue: true,
option: '--core',
command: () => {
log.info(prefix, 'yarn workspace');
spawn('yarn install');
log.info(prefix, 'prepare');
spawn('lerna run prepare');
log.info(prefix, 'dll');
spawn('lerna run createDlls --scope "@storybook/ui"');
},
}),
dll: createTask({
name: `Generate DLL ${chalk.gray('(dll)')}`,
defaultValue: false,
option: '--dll',
command: () => {
log.info(prefix, 'dll');
spawn('lerna run createDlls --scope "@storybook/ui"');
},
}),
docs: createTask({
name: `Documentation ${chalk.gray('(docs)')}`,
defaultValue: false,
option: '--docs',
command: () => {
spawn('yarn bootstrap:docs');
},
}),
packs: createTask({
name: `Build tarballs of packages ${chalk.gray('(build-packs)')}`,
defaultValue: false,
option: '--packs',
command: () => {
spawn('yarn build-packs');
},
check: () => getDirectories(join(__dirname, '..', 'packs')).length > 0,
}),
registry: createTask({
name: `Run local registry ${chalk.gray('(reg)')}`,
defaultValue: false,
option: '--reg',
command: () => {
spawn('./scripts/run-registry.js');
},
}),
};
Object.keys(tasks)
.reduce((acc, key) => acc.option(tasks[key].option, tasks[key].name), main)
.parse(process.argv);
Object.keys(tasks).forEach(key => {
tasks[key].value = program[tasks[key].option.replace('--', '')] || program.all;
});
let selection;
if (
!Object.keys(tasks)
.map(key => tasks[key].value)
.filter(Boolean).length
) {
selection = inquirer
.prompt([
{
type: 'checkbox',
message: 'Select which packages to bootstrap',
name: 'todo',
choices: Object.keys(tasks).map(key => ({
name: tasks[key].name,
checked: tasks[key].defaultValue,
})),
},
])
.then(({ todo }) =>
todo.map(name => tasks[Object.keys(tasks).find(i => tasks[i].name === name)])
)
.then(list => {
if (list.find(i => i === tasks.reset)) {
return inquirer
.prompt([
{
type: 'confirm',
message: `${chalk.red('DESTRUCTIVE')} files not present in git ${chalk.underline(
'will get deleted'
)}, except for .idea and .vscode, ${chalk.cyan('Continue?')}`,
name: 'sure',
},
])
.then(({ sure }) => {
if (sure) {
return list;
}
throw new Error('problem is between keyboard and chair');
});
}
return list;
});
} else {
selection = Promise.resolve(
Object.keys(tasks)
.map(key => tasks[key])
.filter(item => item.value === true)
);
// give the filesystem some time
cooldown = 1000;
} finally {
// eslint-disable-next-line no-use-before-define
setTimeout(run, cooldown);
}
selection
.then(list => {
if (list.length === 0) {
log.warn(prefix, 'Nothing to bootstrap');
} else {
list.forEach(key => {
key.command();
});
process.stdout.write('\x07');
function run() {
const inquirer = require('inquirer');
const program = require('commander');
const chalk = require('chalk');
const log = require('npmlog');
const isTgz = source => lstatSync(source).isFile() && source.match(/.tgz$/);
const getDirectories = source =>
readdirSync(source)
.map(name => join(source, name))
.filter(isTgz);
log.heading = 'storybook';
const prefix = 'bootstrap';
log.addLevel('aborted', 3001, { fg: 'red', bold: true });
const spawn = (command, options = {}) => {
const out = childProcess.spawnSync(
`${command}`,
Object.assign(
{
shell: true,
stdio: 'inherit',
},
options
)
);
if (out.status !== 0) {
process.exit(out.status);
}
})
.catch(e => {
log.aborted(prefix, chalk.red(e.message));
log.silly(prefix, e);
process.exit(1);
return out;
};
const main = program
.version('5.0.0')
.option('--all', `Bootstrap everything ${chalk.gray('(all)')}`);
const createTask = ({
defaultValue,
option,
name,
check = () => true,
command,
pre = [],
order,
}) => ({
value: false,
defaultValue: defaultValue || false,
option: option || undefined,
name: name || 'unnamed task',
check: check || (() => true),
order,
command: () => {
// run all pre tasks
pre
// eslint-disable-next-line no-use-before-define
.map(key => tasks[key])
.forEach(task => {
if (task.check()) {
task.command();
}
});
log.info(prefix, name);
command();
},
});
const tasks = {
core: createTask({
name: `Core, Dll & Examples ${chalk.gray('(core)')}`,
defaultValue: true,
option: '--core',
command: () => {
log.info(prefix, 'yarn workspace');
},
pre: ['install', 'build', 'dll'],
order: 1,
}),
reset: createTask({
name: `Clean repository ${chalk.red('(reset)')}`,
defaultValue: false,
option: '--reset',
command: () => {
log.info(prefix, 'git clean');
spawn('node -r esm ./scripts/reset.js');
},
order: 0,
}),
install: createTask({
name: `Install dependencies ${chalk.gray('(install)')}`,
defaultValue: false,
option: '--install',
command: () => {
spawn('yarn install --ignore-optional ');
},
order: 1,
}),
build: createTask({
name: `Build packages ${chalk.gray('(build)')}`,
defaultValue: false,
option: '--build',
command: () => {
log.info(prefix, 'prepare');
spawn('lerna run prepare');
},
order: 2,
}),
dll: createTask({
name: `Generate DLL ${chalk.gray('(dll)')}`,
defaultValue: false,
option: '--dll',
command: () => {
log.info(prefix, 'dll');
spawn('lerna run createDlls --scope "@storybook/ui"');
},
order: 3,
}),
docs: createTask({
name: `Documentation ${chalk.gray('(docs)')}`,
defaultValue: false,
option: '--docs',
command: () => {
spawn('yarn bootstrap:docs');
},
order: 6,
}),
packs: createTask({
name: `Build tarballs of packages ${chalk.gray('(build-packs)')}`,
defaultValue: false,
option: '--packs',
command: () => {
spawn('yarn build-packs');
},
check: () => getDirectories(join(__dirname, '..', 'packs')).length === 0,
order: 5,
}),
registry: createTask({
name: `Run local registry ${chalk.gray('(reg)')}`,
defaultValue: false,
option: '--reg',
command: () => {
spawn('./scripts/run-registry.js');
},
order: 11,
}),
dev: createTask({
name: `Run build in watch mode ${chalk.gray('(dev)')}`,
defaultValue: false,
option: '--dev',
command: () => {
spawn('yarn dev');
},
order: 9,
}),
};
const groups = {
main: ['core', 'docs'],
buildtasks: ['install', 'build', 'dll', 'packs'],
devtasks: ['dev', 'registry', 'reset'],
};
Object.keys(tasks)
.reduce((acc, key) => acc.option(tasks[key].option, tasks[key].name), main)
.parse(process.argv);
Object.keys(tasks).forEach(key => {
tasks[key].value = program[tasks[key].option.replace('--', '')] || program.all;
});
const createSeperator = input => `- ${input}${' ---------'.substr(0, 12)}`;
const choices = Object.values(groups)
.map(l =>
l.map(key => ({
name: tasks[key].name,
checked: tasks[key].defaultValue,
}))
)
.reduce(
(acc, i, k) =>
acc.concat(new inquirer.Separator(createSeperator(Object.keys(groups)[k]))).concat(i),
[]
);
let selection;
if (
!Object.keys(tasks)
.map(key => tasks[key].value)
.filter(Boolean).length
) {
selection = inquirer
.prompt([
{
type: 'checkbox',
message: 'Select the bootstrap activities',
name: 'todo',
pageSize: Object.keys(tasks).length + Object.keys(groups).length,
choices,
},
])
.then(({ todo }) =>
todo.map(name => tasks[Object.keys(tasks).find(i => tasks[i].name === name)])
)
.then(list => {
if (list.find(i => i === tasks.reset)) {
return inquirer
.prompt([
{
type: 'confirm',
message: `${chalk.red(
'DESTRUCTIVE'
)} deletes node_modules, files not present in git ${chalk.underline(
'will get trashed'
)}, except for .idea and .vscode, ${chalk.cyan('Continue?')}`,
name: 'sure',
},
])
.then(({ sure }) => {
if (sure) {
return list;
}
throw new Error('problem is between keyboard and chair');
});
}
return list;
});
} else {
selection = Promise.resolve(
Object.keys(tasks)
.map(key => tasks[key])
.filter(item => item.value === true)
);
}
selection
.then(list => {
if (list.length === 0) {
log.warn(prefix, 'Nothing to bootstrap');
} else {
list
.sort((a, b) => a.order - b.order)
.forEach(key => {
key.command();
});
process.stdout.write('\x07');
}
})
.catch(e => {
log.aborted(prefix, chalk.red(e.message));
log.silly(prefix, e);
process.exit(1);
});
}

60
scripts/reset.js Normal file
View File

@ -0,0 +1,60 @@
import fs from 'fs';
import { spawn, exec } from 'child_process';
import trash from 'trash';
import del from 'del';
fs.writeFileSync('reset.log', '');
// let results = [];
const cleaningProcess = spawn('git', [
'clean',
'-xdf',
'-n',
'--exclude=".vscode"',
'--exclude=".idea"',
]);
cleaningProcess.stdout.on('data', data => {
if (data && data.toString()) {
const l = data
.toString()
.split(/\n/)
.forEach(i => {
const [, uri] = i.match(/Would remove (.*)$/) || [];
if (uri) {
if (
uri.match(/node_modules/) ||
uri.match(/dist/) ||
uri.match(/\.cache/) ||
uri.match(/dll/)
) {
del(uri).then(() => {
console.log(`deleted ${uri}`);
});
} else {
trash(uri)
.then(() => {
console.log(`trashed ${uri}`);
})
.catch(e => {
console.log('failed to trash, will try permanent delete');
trash(uri);
});
}
}
});
}
fs.appendFile('reset.log', data, err => {
if (err) {
throw err;
}
});
});
cleaningProcess.on('exit', code => {
if (code === 0) {
console.log('all went well, files are being trashed now');
} else {
console.error(code);
}
});

896
yarn.lock
View File

File diff suppressed because it is too large Load Diff