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

Merge branch 'next' into dependabot/npm_and_yarn/docs/react-dom-16.8.6

Browse Source
This commit is contained in:
Norbert de Langen 2019-04-11 14:50:15 +02:00 committed by GitHub
commit cdf9fc6f47
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
189 changed files with 5939 additions and 6160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8110
CHANGELOG.md
View File

File diff suppressed because it is too large Load Diff

14
addons/a11y/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-a11y",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"description": "a11y addon for storybook",
"keywords": [
"a11y",
@ -26,12 +26,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.1.0-alpha.21",
"@storybook/api": "5.1.0-alpha.21",
"@storybook/client-logger": "5.1.0-alpha.21",
"@storybook/components": "5.1.0-alpha.21",
"@storybook/core-events": "5.1.0-alpha.21",
"@storybook/theming": "5.1.0-alpha.21",
"@storybook/addons": "5.1.0-alpha.24",
"@storybook/api": "5.1.0-alpha.24",
"@storybook/client-logger": "5.1.0-alpha.24",
"@storybook/components": "5.1.0-alpha.24",
"@storybook/core-events": "5.1.0-alpha.24",
"@storybook/theming": "5.1.0-alpha.24",
"axe-core": "^3.2.2",
"common-tags": "^1.8.0",
"core-js": "^2.6.5",

3
addons/a11y/src/components/A11YPanel.test.js
View File

@ -26,6 +26,7 @@ const axeResult = {
'Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds',
help: 'Elements must have sufficient color contrast',
helpUrl: 'https://dequeuniversity.com/rules/axe/3.2/color-contrast?application=axeAPI',
nodes: [],
},
],
passes: [
@ -36,6 +37,7 @@ const axeResult = {
description: "Ensures ARIA attributes are allowed for an element's role",
help: 'Elements must only use allowed ARIA attributes',
helpUrl: 'https://dequeuniversity.com/rules/axe/3.2/aria-allowed-attr?application=axeAPI',
nodes: [],
},
],
violations: [
@ -47,6 +49,7 @@ const axeResult = {
'Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds',
help: 'Elements must have sufficient color contrast',
helpUrl: 'https://dequeuniversity.com/rules/axe/3.2/color-contrast?application=axeAPI',
nodes: [],
},
],
};

4
addons/a11y/src/components/A11YPanel.tsx
View File

@ -91,7 +91,7 @@ export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {
if (!prevProps.active && active) {
// removes all elements from the redux map in store from the previous panel
store.dispatch(clearElements(null));
store.dispatch(clearElements());
this.request();
}
}
@ -134,7 +134,7 @@ export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {
() => {
api.emit(EVENTS.REQUEST);
// removes all elements from the redux map in store from the previous panel
store.dispatch(clearElements(null));
store.dispatch(clearElements());
}
);
}

9
addons/a11y/src/components/Report/Elements.tsx
View File

@ -23,7 +23,7 @@ const HighlightToggleElement = styled.span({
fontWeight: 'normal',
float: 'right',
paddingRight: '15px',
input: { margin: 0, },
input: { margin: 0 },
});
interface ElementProps {
@ -43,7 +43,12 @@ const Element: FunctionComponent<ElementProps> = ({ element, passes, type }) =>
<ItemTitle>
{element.target[0]}
<HighlightToggleElement>
<HighlightToggle toggleId={highlightToggleId} type={type} elementsToHighlight={[element]} label={highlightLabel} />
<HighlightToggle
toggleId={highlightToggleId}
type={type}
elementsToHighlight={[element]}
label={highlightLabel}
/>
</HighlightToggleElement>
</ItemTitle>
<Rules rules={rules} passes={passes} />

201
addons/a11y/src/components/Report/HighlightToggle.tsx
View File

@ -1,23 +1,44 @@
import React, { Component, Fragment } from 'react';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { styled, themes, convert } from '@storybook/theming';
import memoize from 'memoizerific';
import { NodeResult } from 'axe-core';
import { Rules } from './Rules';
import { RuleType } from '../A11YPanel';
import { addElement } from '../../redux-config';
import { IFRAME } from '../../constants';
const Checkbox = styled.input({
cursor: 'pointer',
});
export class HighlightedElementData {
originalOutline: string;
isHighlighted: boolean;
}
interface ToggleProps {
elementsToHighlight: NodeResult[];
type: RuleType;
addElement?: (data: any) => void;
highlightedElementsMap?: Map<HTMLElement, HighlightedElementData>;
isToggledOn?: boolean;
toggleId?: string;
indeterminate?: boolean;
}
enum CheckBoxStates {
CHECKED,
UNCHECKED,
INDETERMINATE,
}
const Checkbox = styled.input(({ disabled }) => ({
cursor: disabled ? 'not-allowed' : 'pointer',
}));
const colorsByType = [
convert(themes.normal).color.negative, // VIOLATION,
convert(themes.normal).color.positive, // PASS,
convert(themes.normal).color.warning, // INCOMPLETION,
];
const getIframe = memoize(1)(() => document.getElementsByTagName(IFRAME)[0]);
function getElementBySelectorPath(elementPath: string): HTMLElement {
@ -28,106 +49,92 @@ function getElementBySelectorPath(elementPath: string): HTMLElement {
return null;
}
function areAllRequiredElementsHiglighted(
elementsToHighlight: NodeResult[],
highlightedElementsMap: Map<HTMLElement, HighlightedElementData>
): boolean {
let elementsInMapExist = false;
if (elementsToHighlight) {
for (let element of elementsToHighlight) {
if (element) {
const targetElement = getElementBySelectorPath(element.target[0]);
if (highlightedElementsMap.get(targetElement)) {
elementsInMapExist = true;
if (!highlightedElementsMap.get(targetElement).isHighlighted) {
return false;
}
}
}
}
}
return elementsInMapExist;
function setElementOutlineStyle(targetElement: HTMLElement, outlineStyle: string): void {
targetElement.style.outline = outlineStyle;
}
interface ToggleProps {
elementsToHighlight: NodeResult[];
type: RuleType;
addElement?: (data: any) => void;
highlightedElementsMap?: Map<HTMLElement, HighlightedElementData>;
isToggledOn?: boolean;
toggleId?: string;
function areAllRequiredElementsHighlighted(
elementsToHighlight: NodeResult[],
highlightedElementsMap: Map<HTMLElement, HighlightedElementData>
): CheckBoxStates {
const highlightedCount = elementsToHighlight.filter(item => {
const targetElement = getElementBySelectorPath(item.target[0]);
return (
highlightedElementsMap.has(targetElement) &&
highlightedElementsMap.get(targetElement).isHighlighted
);
}).length;
return highlightedCount === 0
? CheckBoxStates.UNCHECKED
: highlightedCount === elementsToHighlight.length
? CheckBoxStates.CHECKED
: CheckBoxStates.INDETERMINATE;
}
function mapDispatchToProps(dispatch: any) {
return {
addElement: (data: any) => dispatch(addElement(data)),
addElement: (data: { element: HTMLElement; data: HighlightedElementData }) =>
dispatch(addElement(data)),
};
}
const mapStateToProps = (state: any, ownProps: any) => {
const isToggledOn = areAllRequiredElementsHiglighted(
ownProps.elementsToHighlight,
const checkBoxState = areAllRequiredElementsHighlighted(
ownProps.elementsToHighlight || [],
state.highlightedElementsMap
);
return {
highlightedElementsMap: state.highlightedElementsMap,
isToggledOn,
isToggledOn: checkBoxState === CheckBoxStates.CHECKED,
indeterminate: checkBoxState === CheckBoxStates.INDETERMINATE,
};
};
class HighlightToggle extends Component<ToggleProps, {}> {
class HighlightToggle extends Component<ToggleProps> {
static defaultProps: Partial<ToggleProps> = {
elementsToHighlight: [],
};
private checkBoxRef = React.createRef<HTMLInputElement>();
componentDidMount() {
for (let element of this.props.elementsToHighlight) {
if (element) {
const targetElement = getElementBySelectorPath(element.target[0]);
if (targetElement && !this.props.highlightedElementsMap.get(targetElement)) {
this.saveElementDataToMap(
targetElement,
false,
targetElement.style.outline,
this.props.type
);
}
this.props.elementsToHighlight.forEach(element => {
const targetElement = getElementBySelectorPath(element.target[0]);
if (targetElement && !this.props.highlightedElementsMap.has(targetElement)) {
this.saveElementDataToMap(targetElement, false, targetElement.style.outline);
}
});
}
componentDidUpdate(prevProps: Readonly<ToggleProps>): void {
if (this.checkBoxRef.current) {
this.checkBoxRef.current.indeterminate = this.props.indeterminate;
}
}
higlightRuleLocation(targetElement: HTMLElement, addHighlight: boolean): void {
const OUTLINE_STYLE = `dotted`;
const OUTLINE_WIDTH = `1px`;
if (targetElement) {
if (addHighlight) {
switch (this.props.type) {
case RuleType.PASS:
this.setTargetElementOutlineStyle(targetElement, `${convert(themes.normal).color.positive} ${OUTLINE_STYLE} ${OUTLINE_WIDTH}`);
break;
case RuleType.VIOLATION:
this.setTargetElementOutlineStyle(targetElement, `${convert(themes.normal).color.negative} ${OUTLINE_STYLE} ${OUTLINE_WIDTH}`);
break;
case RuleType.INCOMPLETION:
this.setTargetElementOutlineStyle(targetElement, `${convert(themes.normal).color.warning} ${OUTLINE_STYLE} ${OUTLINE_WIDTH}`);
break;
}
} else {
if (this.props.highlightedElementsMap.get(targetElement)) {
this.setTargetElementOutlineStyle(
targetElement,
this.props.highlightedElementsMap.get(targetElement).originalOutline
);
}
}
highlightRuleLocation(targetElement: HTMLElement, addHighlight: boolean): void {
if (!targetElement) {
return;
}
if (addHighlight) {
setElementOutlineStyle(targetElement, `${colorsByType[this.props.type]} dotted 1px`);
return;
}
if (this.props.highlightedElementsMap.has(targetElement)) {
setElementOutlineStyle(
targetElement,
this.props.highlightedElementsMap.get(targetElement).originalOutline
);
}
}
saveElementDataToMap(
targetElement: HTMLElement,
isHighlighted: boolean,
originalOutline: string,
ruleTypeState: RuleType
originalOutline: string
): void {
const data: HighlightedElementData = new HighlightedElementData();
data.isHighlighted = isHighlighted;
@ -136,42 +143,32 @@ class HighlightToggle extends Component<ToggleProps, {}> {
this.props.addElement(payload);
}
setTargetElementOutlineStyle(targetElement: HTMLElement, outlineStyle: string): void {
targetElement.style.outline = outlineStyle;
}
onToggle(): void {
for (let element of this.props.elementsToHighlight) {
if (element) {
const targetElement = getElementBySelectorPath(element.target[0]);
if (this.props.highlightedElementsMap.get(targetElement)) {
let originalOutline = this.props.highlightedElementsMap.get(targetElement).originalOutline;
if (
this.props.isToggledOn &&
this.props.highlightedElementsMap.get(targetElement).isHighlighted
) {
this.higlightRuleLocation(targetElement, false);
this.saveElementDataToMap(targetElement, false, originalOutline, this.props.type);
} else if (
!this.props.isToggledOn &&
!this.props.highlightedElementsMap.get(targetElement).isHighlighted
) {
this.higlightRuleLocation(targetElement, true);
this.saveElementDataToMap(targetElement, true, originalOutline, this.props.type);
}
}
onToggle = (): void => {
this.props.elementsToHighlight.forEach(element => {
const targetElement = getElementBySelectorPath(element.target[0]);
if (!this.props.highlightedElementsMap.has(targetElement)) {
return;
}
}
}
const originalOutline = this.props.highlightedElementsMap.get(targetElement).originalOutline;
const { isHighlighted } = this.props.highlightedElementsMap.get(targetElement);
const { isToggledOn } = this.props;
if ((isToggledOn && isHighlighted) || (!isToggledOn && !isHighlighted)) {
const addHighlight = !isToggledOn && !isHighlighted;
this.highlightRuleLocation(targetElement, addHighlight);
this.saveElementDataToMap(targetElement, addHighlight, originalOutline);
}
});
};
render() {
return (
<Checkbox
ref={this.checkBoxRef}
id={this.props.toggleId}
type="checkbox"
aria-label="Highlight result"
disabled={this.props.elementsToHighlight && this.props.elementsToHighlight.length === 0 ? true : false}
onChange={() => this.onToggle()}
disabled={!this.props.elementsToHighlight.length}
onChange={this.onToggle}
checked={this.props.isToggledOn}
/>
);

8
addons/a11y/src/components/Report/Item.tsx
View File

@ -51,7 +51,7 @@ const HighlightToggleElement = styled.span({
marginRight: '15px',
marginTop: '10px',
input: { margin: 0, },
input: { margin: 0 },
});
interface ItemProps {
@ -94,7 +94,11 @@ export class Item extends Component<ItemProps, ItemState> {
{item.description}
</HeaderBar>
<HighlightToggleElement>
<HighlightToggle toggleId={highlightToggleId} type={type} elementsToHighlight={item ? item.nodes : null} />
<HighlightToggle
toggleId={highlightToggleId}
type={type}
elementsToHighlight={item ? item.nodes : null}
/>
</HighlightToggleElement>
</Wrapper>
{open ? (

3
addons/a11y/src/components/Report/__snapshots__/HighlightToggle.test.js.snap
View File

@ -2,7 +2,7 @@
exports[`HighlightToggle component should match snapshot 1`] = `
.emotion-0 {
cursor: pointer;
cursor: not-allowed;
}
<Provider
@ -321,6 +321,7 @@ exports[`HighlightToggle component should match snapshot 1`] = `
addElement={[Function]}
elementsToHighlight={Array []}
highlightedElementsMap={Map {}}
indeterminate={false}
isToggledOn={false}
>
<Styled(input)

4
addons/a11y/src/components/Report/index.tsx
View File

@ -1,10 +1,8 @@
import React, { Fragment, FunctionComponent } from 'react';
import { Placeholder } from '@storybook/components';
import { styled } from '@storybook/theming';
import { Result, NodeResult } from 'axe-core';
import { Result } from 'axe-core';
import { Item } from './Item';
import { RuleType } from '../A11YPanel';
import HighlightToggle from './HighlightToggle';
export interface ReportProps {
items: Result[];

46
addons/a11y/src/components/Tabs.tsx
View File

@ -1,4 +1,4 @@
import React, { Component } from 'react';
import React, { Component, SyntheticEvent } from 'react';
import { styled } from '@storybook/theming';
import store, { clearElements } from '../redux-config';
@ -71,7 +71,7 @@ const TabsWrapper = styled.div({});
const List = styled.div(({ theme }) => ({
boxShadow: `${theme.appBorderColor} 0 -1px 0 0 inset`,
background: 'rgba(0,0,0,.05)',
background: 'rgba(0, 0, 0, .05)',
display: 'flex',
justifyContent: 'space-between',
whiteSpace: 'nowrap',
@ -90,27 +90,23 @@ interface TabsState {
active: number;
}
function retrieveAllNodesFromResults(items: Result[]): NodeResult[] {
return items.reduce((acc, item) => acc.concat(item.nodes), []);
}
export class Tabs extends Component<TabsProps, TabsState> {
state: TabsState = {
active: 0,
};
onToggle = (index: number) => {
onToggle = (event: SyntheticEvent) => {
this.setState({
active: index,
active: parseInt(event.currentTarget.getAttribute('data-index'), 10),
});
// removes all elements from the redux map in store from the previous panel
store.dispatch(clearElements(null));
store.dispatch(clearElements());
};
retrieveAllNodeResults(items: Result[]): NodeResult[] {
let nodeArray: NodeResult[] = [];
for (const item of items) {
nodeArray = nodeArray.concat(item.nodes);
}
return nodeArray;
}
render() {
const { tabs } = this.props;
const { active } = this.state;
@ -120,21 +116,25 @@ export class Tabs extends Component<TabsProps, TabsState> {
<Container>
<List>
<TabsWrapper>
{tabs.map((tab, index) => (
<Item
key={index}
active={active === index ? true : undefined}
onClick={() => this.onToggle(index)}>
{tab.label}
</Item>
))}
{tabs.map((tab, index) => (
<Item
key={index}
data-index={index}
active={active === index}
onClick={this.onToggle}
>
{tab.label}
</Item>
))}
</TabsWrapper>
<GlobalToggleWrapper>
<HighlightToggleLabel htmlFor={highlightToggleId}>{highlightLabel}</HighlightToggleLabel>
<HighlightToggleLabel htmlFor={highlightToggleId}>
{highlightLabel}
</HighlightToggleLabel>
<HighlightToggle
toggleId={highlightToggleId}
type={tabs[active].type}
elementsToHighlight={this.retrieveAllNodeResults(tabs[active].items)}
elementsToHighlight={retrieveAllNodesFromResults(tabs[active].items)}
label={highlightLabel}
/>
</GlobalToggleWrapper>

19
addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap
View File

@ -215,7 +215,7 @@ exports[`A11YPanel should render report 1`] = `
}
.emotion-8 {
cursor: pointer;
cursor: not-allowed;
}
.emotion-12 {
@ -336,16 +336,15 @@ exports[`A11YPanel should render report 1`] = `
"110qmus": true,
"152wg9i": true,
"1551xjo": true,
"15paq49": true,
"176o2y5": true,
"1977chw": true,
"1cwfnw4": true,
"1fp6daz": true,
"1kjdm0k": true,
"1l7fvsg": true,
"1myfomu": true,
"1s6ajii": true,
"1vwgrhn": true,
"4g6ai3": true,
"4ryd4s": true,
"6hqipu": true,
"animation-u07e3c": true,
@ -360,6 +359,7 @@ exports[`A11YPanel should render report 1`] = `
"qb28": true,
"snh8f7": true,
"tkevr6": true,
"vdhlfv": true,
},
"key": "css",
"nonce": undefined,
@ -683,7 +683,7 @@ exports[`A11YPanel should render report 1`] = `
data-emotion="css"
>
.emotion-8{cursor:pointer;}
.emotion-8{cursor:not-allowed;}
</style>
<style
data-emotion="css"
@ -911,7 +911,7 @@ exports[`A11YPanel should render report 1`] = `
data-emotion="css"
>
.emotion-8{cursor:pointer;}
.emotion-8{cursor:not-allowed;}
</style>,
<style
data-emotion="css"
@ -1163,11 +1163,13 @@ exports[`A11YPanel should render report 1`] = `
>
<Styled(button)
active={true}
data-index={0}
key="0"
onClick={[Function]}
>
<button
className="emotion-1"
data-index={0}
onClick={[Function]}
>
<Styled(span)>
@ -1181,11 +1183,14 @@ exports[`A11YPanel should render report 1`] = `
</button>
</Styled(button)>
<Styled(button)
active={false}
data-index={1}
key="1"
onClick={[Function]}
>
<button
className="emotion-3"
data-index={1}
onClick={[Function]}
>
<Styled(span)>
@ -1199,11 +1204,14 @@ exports[`A11YPanel should render report 1`] = `
</button>
</Styled(button)>
<Styled(button)
active={false}
data-index={2}
key="2"
onClick={[Function]}
>
<button
className="emotion-3"
data-index={2}
onClick={[Function]}
>
<Styled(span)>
@ -1242,6 +1250,7 @@ exports[`A11YPanel should render report 1`] = `
addElement={[Function]}
elementsToHighlight={Array []}
highlightedElementsMap={Map {}}
indeterminate={false}
isToggledOn={false}
label="Highlight results"
toggleId="0-global-checkbox"

7
addons/a11y/src/redux-config.tsx
View File

@ -1,16 +1,17 @@
import { createStore } from 'redux';
import { ADD_ELEMENT, CLEAR_ELEMENTS } from './constants';
import { HighlightedElementData } from './components/Report/HighlightToggle';
// actions
// add element is passed a HighlightedElementData object as the payload
export function addElement(payload: any) {
export function addElement(payload: { element: HTMLElement; data: HighlightedElementData }) {
return { type: ADD_ELEMENT, payload };
}
// clear elements is a function to remove elements from the map and reset elements to their original state
export function clearElements(payload: any) {
return { type: CLEAR_ELEMENTS, payload };
export function clearElements() {
return { type: CLEAR_ELEMENTS };
}
// reducers

12
addons/actions/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-actions",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"description": "Action Logger addon for storybook",
"keywords": [
"storybook"
@ -21,11 +21,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.1.0-alpha.21",
"@storybook/api": "5.1.0-alpha.21",
"@storybook/components": "5.1.0-alpha.21",
"@storybook/core-events": "5.1.0-alpha.21",
"@storybook/theming": "5.1.0-alpha.21",
"@storybook/addons": "5.1.0-alpha.24",
"@storybook/api": "5.1.0-alpha.24",
"@storybook/components": "5.1.0-alpha.24",
"@storybook/core-events": "5.1.0-alpha.24",
"@storybook/theming": "5.1.0-alpha.24",
"core-js": "^2.6.5",
"fast-deep-equal": "^2.0.1",
"global": "^4.3.2",

14
addons/backgrounds/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-backgrounds",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"description": "A storybook addon to show different backgrounds for your preview",
"keywords": [
"addon",
@ -25,12 +25,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.1.0-alpha.21",
"@storybook/api": "5.1.0-alpha.21",
"@storybook/client-logger": "5.1.0-alpha.21",
"@storybook/components": "5.1.0-alpha.21",
"@storybook/core-events": "5.1.0-alpha.21",
"@storybook/theming": "5.1.0-alpha.21",
"@storybook/addons": "5.1.0-alpha.24",
"@storybook/api": "5.1.0-alpha.24",
"@storybook/client-logger": "5.1.0-alpha.24",
"@storybook/components": "5.1.0-alpha.24",
"@storybook/core-events": "5.1.0-alpha.24",
"@storybook/theming": "5.1.0-alpha.24",
"core-js": "^2.6.5",
"memoizerific": "^1.11.3",
"react": "^16.8.4",

2
addons/centered/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-centered",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"description": "Storybook decorator to center components",
"keywords": [
"addon",

10
addons/cssresources/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-cssresources",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"description": "A storybook addon to switch between css resources at runtime for your story",
"keywords": [
"addon",
@ -25,10 +25,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.1.0-alpha.21",
"@storybook/api": "5.1.0-alpha.21",
"@storybook/components": "5.1.0-alpha.21",
"@storybook/core-events": "5.1.0-alpha.21",
"@storybook/addons": "5.1.0-alpha.24",
"@storybook/api": "5.1.0-alpha.24",
"@storybook/components": "5.1.0-alpha.24",
"@storybook/core-events": "5.1.0-alpha.24",
"core-js": "^2.6.5",
"global": "^4.3.2",
"react": "^16.8.4"

8
addons/events/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-events",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"description": "Add events to your Storybook stories.",
"keywords": [
"addon",
@ -24,9 +24,9 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.1.0-alpha.21",
"@storybook/core-events": "5.1.0-alpha.21",
"@storybook/theming": "5.1.0-alpha.21",
"@storybook/addons": "5.1.0-alpha.24",
"@storybook/core-events": "5.1.0-alpha.24",
"@storybook/theming": "5.1.0-alpha.24",
"core-js": "^2.6.5",
"format-json": "^1.0.3",
"prop-types": "^15.7.2",

6
addons/google-analytics/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-google-analytics",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"description": "Storybook addon for google analytics",
"keywords": [
"addon",
@ -20,8 +20,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.1.0-alpha.21",
"@storybook/core-events": "5.1.0-alpha.21",
"@storybook/addons": "5.1.0-alpha.24",
"@storybook/core-events": "5.1.0-alpha.24",
"core-js": "^2.6.5",
"global": "^4.3.2",
"react-ga": "^2.5.7"

2
addons/graphql/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-graphql",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"description": "Storybook addon to display the GraphiQL IDE",
"keywords": [
"addon",

10
addons/info/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-info",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"description": "A Storybook addon to show additional information for your stories.",
"keywords": [
"addon",
@ -22,10 +22,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.1.0-alpha.21",
"@storybook/client-logger": "5.1.0-alpha.21",
"@storybook/components": "5.1.0-alpha.21",
"@storybook/theming": "5.1.0-alpha.21",
"@storybook/addons": "5.1.0-alpha.24",
"@storybook/client-logger": "5.1.0-alpha.24",
"@storybook/components": "5.1.0-alpha.24",
"@storybook/theming": "5.1.0-alpha.24",
"core-js": "^2.6.5",
"global": "^4.3.2",
"marksy": "^6.1.0",

14
addons/jest/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-jest",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"description": "React storybook addon that show component jest report",
"keywords": [
"addon",
@ -23,18 +23,18 @@
"license": "MIT",
"author": "Renaud Tertrais <renaud.tertrais@gmail.com> (https://github.com/renaudtertrais)",
"main": "dist/index.js",
"jsnext:main": "src/index.js",
"types": "dist/index.d.ts",
"scripts": {
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.1.0-alpha.21",
"@storybook/components": "5.1.0-alpha.21",
"@storybook/core-events": "5.1.0-alpha.21",
"@storybook/theming": "5.1.0-alpha.21",
"@storybook/addons": "5.1.0-alpha.24",
"@storybook/api": "5.1.0-alpha.24",
"@storybook/components": "5.1.0-alpha.24",
"@storybook/core-events": "5.1.0-alpha.24",
"@storybook/theming": "5.1.0-alpha.24",
"core-js": "^2.6.5",
"global": "^4.3.2",
"prop-types": "^15.7.2",
"react": "^16.8.4",
"upath": "^1.1.0",
"util-deprecate": "^1.0.2"

0
addons/jest/src/colors.js → addons/jest/src/colors.ts
View File

20
addons/jest/src/components/Indicator.js → addons/jest/src/components/Indicator.ts
View File

@ -1,8 +1,17 @@
import PropTypes from 'prop-types';
import React from 'react';
import { styled } from '@storybook/theming';
const Indicator = styled.div(
interface IndicatorProps {
color: string;
size: number;
children?: React.ReactNode;
right?: boolean;
overrides?: any;
styles?: React.CSSProperties;
}
const Indicator = styled.div<IndicatorProps>(
({ color, size }) => ({
boxSizing: 'border-box',
padding: `0 ${size / 2}px`,
@ -25,11 +34,4 @@ Indicator.defaultProps = {
children: '',
};
Indicator.propTypes = {
color: PropTypes.string.isRequired,
size: PropTypes.number.isRequired,
children: PropTypes.node,
right: PropTypes.bool,
};
export default Indicator;

202
addons/jest/src/components/Message.tsx Normal file
View File

@ -0,0 +1,202 @@
/* tslint:disable:object-literal-sort-keys */
import React from 'react';
import { styled } from '@storybook/theming';
import colors from '../colors';
const patterns = [/^\x08+/, /^\x1b\[[012]?K/, /^\x1b\[?[\d;]{0,3}/];
const Pre = styled.pre({
margin: 0,
});
const Positive = styled.strong({
color: colors.success,
fontWeight: 500,
});
const Negative = styled.strong({
color: colors.error,
fontWeight: 500,
});
interface StackTraceProps {
trace: MsgElement[];
className?: string;
}
const StackTrace = styled(({ trace, className }: StackTraceProps) => (
<details className={className}>
<summary>Callstack</summary>
{trace
.join('')
.trim()
.split(/\n/)
.map((traceLine, traceLineIndex) => (
<div key={traceLineIndex}>{traceLine.trim()}</div>
))}
</details>
))({
background: 'silver',
padding: 10,
overflow: 'auto',
});
const Main = styled(({ msg, className }) => <section className={className}>{msg}</section>)({
padding: 10,
borderBottom: '1px solid silver',
});
interface SubProps {
msg: MsgElement[];
className?: string;
}
const Sub = styled(({ msg, className }: SubProps) => (
<section className={className}>
{msg
.filter(item => typeof item !== 'string' || item.trim() !== '')
.map((item, index, list) => {
if (typeof item === 'string') {
if (index === 0 && index === list.length - 1) {
return item.trim();
}
if (index === 0) {
return item.replace(/^[\s\n]*/, '');
}
if (index === list.length - 1) {
return item.replace(/[\s\n]*$/, '');
}
}
return item;
})}
</section>
))({
padding: 10,
});
interface SubgroupOptions {
startTrigger: (e: MsgElement) => boolean;
endTrigger: (e: MsgElement) => boolean;
grouper: (list: MsgElement[], key: number) => JSX.Element;
accList?: MsgElement[];
grouped?: MsgElement[];
grouperIndex?: number;
mode?: 'inject' | 'stop';
injectionPoint?: number;
}
const createSubgroup = ({
startTrigger,
endTrigger,
grouper,
accList = [],
grouped = [],
grouperIndex = 0,
mode,
injectionPoint,
}: SubgroupOptions) => (acc: MsgElement[], item: MsgElement, i: number, list: MsgElement[]) => {
grouperIndex += 1;
// start or stop extraction
if (startTrigger(item)) {
mode = 'inject';
injectionPoint = i;
}
if (endTrigger(item)) {
mode = 'stop';
}
// push item in correct aggregator
if (mode === 'inject') {
grouped.push(item);
} else {
accList.push(item);
}
// on last iteration inject at detected injection point, and group
if (i === list.length - 1) {
// Provide a "safety net" when Jest returns a partially recognized "group"
// (recognized by acc.startTrigger but acc.endTrigger was never found) and
// it's the only group in output for a test result. In that case, accList
// will be empty, so return whatever was found, even if it will be unstyled
// and prevent next createSubgroup calls from throwing due to empty lists.
accList.push(null);
return accList.reduce<MsgElement[]>((eacc, el, ei) => {
if (injectionPoint === 0 && ei === 0) {
// at index 0, inject before
return eacc.concat(grouper(grouped, grouperIndex)).concat(el);
}
if (injectionPoint > 0 && injectionPoint === ei + 1) {
// at index > 0, and next index WOULD BE injectionPoint, inject after
return eacc.concat(el).concat(grouper(grouped, grouperIndex));
}
// do not inject
return eacc.concat(el);
}, []);
}
return acc;
};
interface MessageProps {
msg: string;
}
type MsgElement = string | JSX.Element;
const Message = ({ msg }: MessageProps) => {
const data = patterns
.reduce((acc, regex) => acc.replace(regex, ''), msg)
.split(/\[2m/)
.join('')
.split(/\[22m/)
.reduce((acc, item) => acc.concat(item), [] as string[])
.map((item, li) =>
item
.split(/\[32m(.*?)\[39m/)
.map((i, index) => (index % 2 ? <Positive key={`p_${li}_${i}`}>{i}</Positive> : i))
)
.reduce((acc, item) => acc.concat(item))
.map((item, li) =>
typeof item === 'string'
? item
.split(/\[31m(.*?)\[39m/)
.map((i, index) => (index % 2 ? <Negative key={`n_${li}_${i}`}>{i}</Negative> : i))
: item
)
.reduce<MsgElement[]>((acc, item) => acc.concat(item), [])
.reduce(
createSubgroup({
startTrigger: e => typeof e === 'string' && e.indexOf('Error: ') === 0,
endTrigger: e => typeof e === 'string' && Boolean(e.match('Expected ')),
grouper: (list, key) => <Main key={key} msg={list} />,
}),
[]
)
.reduce(
(acc, it) =>
typeof it === 'string' ? acc.concat(it.split(/(at(.|\n)+\d+:\d+\))/)) : acc.concat(it),
[] as MsgElement[]
)
.reduce((acc, item) => acc.concat(item), [] as MsgElement[])
.reduce(
createSubgroup({
startTrigger: e => typeof e === 'string' && e.indexOf('Expected ') !== -1,
endTrigger: e => typeof e === 'string' && Boolean(e.match(/^at/)),
grouper: (list, key) => <Sub key={key} msg={list} />,
}),
[]
)
.reduce(
createSubgroup({
startTrigger: e => typeof e === 'string' && Boolean(e.match(/at(.|\n)+\d+:\d+\)/)),
endTrigger: () => false,
grouper: (list, key) => <StackTrace key={key} trace={list} />,
}),
[]
);
return <Pre>{data}</Pre>;
};
export default Message;

24
addons/jest/src/components/Panel.js → addons/jest/src/components/Panel.tsx
View File

@ -1,11 +1,10 @@
import React from 'react';
import PropTypes from 'prop-types';
import { styled } from '@storybook/theming';
import { ScrollArea } from '@storybook/components';
import Indicator from './Indicator';
import Result, { FailedResult } from './Result';
import provideJestResult from '../hoc/provideJestResult';
import provideJestResult, { Test } from '../hoc/provideJestResult';
import colors from '../colors';
const List = styled.ul({
@ -95,7 +94,12 @@ const SuiteTitle = styled.div({
alignItems: 'center',
});
const Content = styled(({ tests, className }) => (
interface ContentProps {
tests: Test[];
className?: string;
}
const Content = styled(({ tests, className }: ContentProps) => (
<div className={className}>
{tests.map(({ name, result }) => {
if (!result) {
@ -142,7 +146,11 @@ const Content = styled(({ tests, className }) => (
flex: '1 1 0%',
});
const Panel = ({ tests }) => (
interface PanelProps {
tests: null | Test[];
}
const Panel = ({ tests }: PanelProps) => (
<ScrollArea vertical>
{tests ? <Content tests={tests} /> : <NoTests>This story has no tests configured</NoTests>}
</ScrollArea>
@ -152,12 +160,4 @@ Panel.defaultProps = {
tests: null,
};
Panel.propTypes = {
tests: PropTypes.arrayOf(
PropTypes.shape({
result: PropTypes.object,
})
),
};
export default provideJestResult(Panel);

47
addons/jest/src/components/PanelTitle.js
View File

@ -1,47 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { styled } from '@storybook/theming';
import provideJestResult from '../hoc/provideJestResult';
import Indicator from './Indicator';
import colors from '../colors';
const Wrapper = styled.div({
display: 'flex',
alignItems: 'center',
});
const PanelName = styled.div({
paddingLeft: 5,
});
const PanelTitle = ({ tests }) => {
if (!tests) {
return null;
}
const results = tests.map(report => report.result).filter(report => !!report);
const success = results.reduce((acc, result) => acc && result.status === 'passed', true);
const color = success ? colors.success : colors.error;
return (
<Wrapper>
<Indicator color={results.length < tests.length ? colors.warning : color} size={10} />
<PanelName>Tests</PanelName>
</Wrapper>
);
};
PanelTitle.defaultProps = {
tests: null,
};
PanelTitle.propTypes = {
tests: PropTypes.arrayOf(
PropTypes.shape({
result: PropTypes.object,
})
),
};
export default provideJestResult(PanelTitle);

264
addons/jest/src/components/Result.js
View File

@ -1,264 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { styled } from '@storybook/theming';
import Indicator from './Indicator';
import colors from '../colors';
const Pre = styled.pre({
margin: 0,
});
const FlexContainer = styled.div({
display: 'flex',
alignItems: 'center',
});
/* eslint no-control-regex:0 */
const patterns = [/^\x08+/, /^\x1b\[[012]?K/, /^\x1b\[?[\d;]{0,3}/];
const Positive = styled.strong({
color: colors.success,
fontWeight: 500,
});
const Negative = styled.strong({
color: colors.error,
fontWeight: 500,
});
const StackTrace = styled(({ trace, className }) => (
<details className={className}>
<summary>Callstack</summary>
{trace
.join('')
.trim()
.split(/\n/)
.map((traceLine, traceLineIndex) => (
// eslint-disable-next-line react/no-array-index-key
<div key={traceLineIndex}>{traceLine.trim()}</div>
))}
</details>
))({
background: 'silver',
padding: 10,
overflow: 'auto',
});
const Main = styled(({ msg, className }) => <section className={className}>{msg}</section>)({
padding: 10,
borderBottom: '1px solid silver',
});
const Sub = styled(({ msg, className }) => (
<section className={className}>
{msg
.filter(item => typeof item !== 'string' || (typeof item === 'string' && item.trim() !== ''))
.map((item, index, list) => {
switch (true) {
case typeof item === 'string' && index === 0 && index === list.length - 1: {
return item.trim();
}
case typeof item === 'string' && index === 0: {
return item.replace(/^[\s\n]*/, '');
}
case typeof item === 'string' && index === list.length - 1: {
return item.replace(/[\s\n]*$/, '');
}
default: {
return item;
}
}
// typeof item === 'string' ? <span>{item}</span> : item;
})}
</section>
))({
padding: 10,
});
const createSubgroup = (acc, item, i, list) => {
// setup aggregators
if (!acc.list) {
acc.list = [];
}
if (!acc.grouped) {
acc.grouped = [];
}
if (!('grouperIndex' in acc)) {
acc.grouperIndex = 0;
} else {
acc.grouperIndex += 1;
}
// start or stop extraction
if (acc.startTrigger(item)) {
acc.mode = 'inject';
acc.injectionPoint = i;
}
if (acc.endTrigger(item)) {
acc.mode = 'stop';
}
// push item in correct aggregator
if (acc.mode === 'inject') {
acc.grouped.push(item);
} else {
acc.list.push(item);
}
// on last iteration inject at detected injectionpoint, and group
if (i === list.length - 1) {
// Provide a "safety net" when Jest returns a partially recognized "group"
// (recognized by acc.startTrigger but acc.endTrigger was never found) and
// it's the only group in output for a test result. In that case, acc.list
// will be empty, so return whatever was found, even if it will be unstyled
// and prevent next createSubgroup calls from throwing due to empty lists.
acc.list.push(null);
return acc.list.reduce((eacc, el, ei) => {
switch (true) {
case acc.injectionPoint === 0 && ei === 0: {
// at index 0, inject before
return eacc.concat(acc.grouper(acc.grouped, acc.grouperIndex)).concat(el);
}
case acc.injectionPoint > 0 && acc.injectionPoint === ei + 1: {
// at index > 0, and next index WOULD BE injectionPoint, inject after
return eacc.concat(el).concat(acc.grouper(acc.grouped, acc.grouperIndex));
}
default: {
// do not inject
return eacc.concat(el);
}
}
}, []);
}
return acc;
};
const Message = ({ msg }) => {
const data = patterns
.reduce((acc, regex) => acc.replace(regex, ''), msg)
.split(/\[2m/)
.join('')
.split(/\[22m/)
.reduce((acc, item) => acc.concat(item), [])
.map((item, li) =>
typeof item === 'string'
? item
.split(/\[32m(.*?)\[39m/)
// eslint-disable-next-line react/no-array-index-key
.map((i, index) => (index % 2 ? <Positive key={`p_${li}_${i}`}>{i}</Positive> : i))
: item
)
.reduce((acc, item) => acc.concat(item), [])
.map((item, li) =>
typeof item === 'string'
? item
.split(/\[31m(.*?)\[39m/)
// eslint-disable-next-line react/no-array-index-key
.map((i, index) => (index % 2 ? <Negative key={`n_${li}_${i}`}>{i}</Negative> : i))
: item
)
.reduce((acc, item) => acc.concat(item), [])
.reduce(createSubgroup, {
startTrigger: e => typeof e === 'string' && e.indexOf('Error: ') === 0,
endTrigger: e => typeof e === 'string' && e.match('Expected '),
grouper: (list, key) => <Main key={key} msg={list} />,
})
.reduce(
(acc, it) =>
typeof it === 'string' ? acc.concat(it.split(/(at(.|\n)+\d+:\d+\))/)) : acc.concat(it),
[]
)
.reduce((acc, item) => acc.concat(item), [])
.reduce(createSubgroup, {
startTrigger: e => typeof e === 'string' && e.indexOf('Expected ') !== -1,
endTrigger: e => typeof e === 'string' && e.match(/^at/),
grouper: (list, key) => <Sub key={key} msg={list} />,
})
.reduce(createSubgroup, {
startTrigger: e => typeof e === 'string' && e.match(/at(.|\n)+\d+:\d+\)/),
endTrigger: () => false,
grouper: (list, key) => <StackTrace key={key} trace={list} />,
});
return <Pre>{data}</Pre>;
};
Message.propTypes = {
msg: PropTypes.string.isRequired,
};
const Head = styled.header({
display: 'flex',
justifyContent: 'space-between',
alignItems: 'flex-start',
});
const Title = styled.h3({
padding: '10px 10px 0 10px',
margin: 0,
});
export const FailedResult = styled(({ fullName, title, status, failureMessages, className }) => (
<div className={className}>
<Head>
<FlexContainer>
<Indicator
color={colors.error}
size={10}
overrides={{ borderRadius: '5px 0', position: 'absolute', top: -1, left: -1 }}
/>
<Title>{fullName || title}</Title>
</FlexContainer>
<Indicator
color={colors.error}
size={16}
overrides={{ borderRadius: '0 5px', position: 'absolute', top: -1, right: -1 }}
>
{status}
</Indicator>
</Head>
{/* eslint-disable react/no-array-index-key */}
{failureMessages.map((msg, i) => (
<Message msg={msg} key={i} />
))}
</div>
))({
display: 'block',
borderRadius: 5,
margin: 0,
padding: 0,
position: 'relative',
border: '1px solid silver',
boxSizing: 'border-box',
});
const Result = ({ fullName, title, status }) => (
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
}}
>
<FlexContainer>
<Indicator color={colors.success} size={10} overrides={{ marginRight: 10 }} />
<div>{fullName || title}</div>
</FlexContainer>
<FlexContainer>
<Indicator color={colors.success} size={14} right>
{status}
</Indicator>
</FlexContainer>
</div>
);
Result.defaultProps = {
fullName: '',
title: '',
};
Result.propTypes = {
fullName: PropTypes.string,
title: PropTypes.string,
status: PropTypes.string.isRequired,
};
export default Result;

88
addons/jest/src/components/Result.tsx Normal file
View File

@ -0,0 +1,88 @@
import React from 'react';
import { styled } from '@storybook/theming';
import Message from './Message';
import Indicator from './Indicator';
import colors from '../colors';
const FlexContainer = styled.div({
display: 'flex',
alignItems: 'center',
});
const Head = styled.header({
display: 'flex',
justifyContent: 'space-between',
alignItems: 'flex-start',
});
const Title = styled.h3({
padding: '10px 10px 0 10px',
margin: 0,
});
export const FailedResult = styled(({ fullName, title, status, failureMessages, className }) => (
<div className={className}>
<Head>
<FlexContainer>
<Indicator
color={colors.error}
size={10}
overrides={{ borderRadius: '5px 0', position: 'absolute', top: -1, left: -1 }}
/>
<Title>{fullName || title}</Title>
</FlexContainer>
<Indicator
color={colors.error}
size={16}
overrides={{ borderRadius: '0 5px', position: 'absolute', top: -1, right: -1 }}
>
{status}
</Indicator>
</Head>
{failureMessages.map((msg: string, i: number) => (
<Message msg={msg} key={i} />
))}
</div>
))({
display: 'block',
borderRadius: 5,
margin: 0,
padding: 0,
position: 'relative',
border: '1px solid silver',
boxSizing: 'border-box',
});
interface ResultProps {
fullName?: string;
title?: string;
status: string;
}
const Result = ({ fullName, title, status }: ResultProps) => (
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
}}
>
<FlexContainer>
<Indicator color={colors.success} size={10} overrides={{ marginRight: 10 }} />
<div>{fullName || title}</div>
</FlexContainer>
<FlexContainer>
<Indicator color={colors.success} size={14} right>
{status}
</Indicator>
</FlexContainer>
</div>
);
Result.defaultProps = {
fullName: '',
title: '',
};
export default Result;

59
addons/jest/src/hoc/provideJestResult.js
View File

@ -1,59 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { STORY_CHANGED } from '@storybook/core-events';
import { ADD_TESTS } from '../shared';
const provideTests = Component =>
class TestProvider extends React.Component {
static propTypes = {
channel: PropTypes.shape({
on: PropTypes.func,
removeListener: PropTypes.func,
}).isRequired,
api: PropTypes.shape({
on: PropTypes.func,
}).isRequired,
active: PropTypes.bool,
};
static defaultProps = {
active: false,
};
state = {};
componentDidMount() {
this.mounted = true;
const { channel, api } = this.props;
this.stopListeningOnStory = api.on(STORY_CHANGED, () => {
const { kind, storyName, tests } = this.state;
if (this.mounted && (kind || storyName || tests)) {
this.onAddTests({});
}
});
channel.on(ADD_TESTS, this.onAddTests);
}
componentWillUnmount() {
this.mounted = false;
const { channel } = this.props;
this.stopListeningOnStory();
channel.removeListener(ADD_TESTS, this.onAddTests);
}
onAddTests = ({ kind, storyName, tests }) => {
this.setState({ kind, storyName, tests });
};
render() {
const { active } = this.props;
const { tests } = this.state;
return active && tests ? <Component {...this.state} /> : null;
}
};
export default provideTests;

82
addons/jest/src/hoc/provideJestResult.tsx Normal file
View File

@ -0,0 +1,82 @@
import React from 'react';
import { STORY_CHANGED } from '@storybook/core-events';
import { ADD_TESTS } from '../shared';
import { API } from '@storybook/api';
// TODO: import type from @types/jest
interface AssertionResult {
status: string;
fullName: string;
title: string;
failureMessages: string[];
}
export interface Test {
name: string;
result: {
status: string;
assertionResults: AssertionResult[];
};
}
interface InjectedProps {
tests?: Test[];
}
export interface HocProps {
api: API;
active?: boolean;
}
export interface HocState {
kind?: string;
storyName?: string;
tests?: Test[];
}
const provideTests = (Component: React.ComponentType<InjectedProps>) =>
class TestProvider extends React.Component<HocProps, HocState> {
static defaultProps = {
active: false,
};
mounted: boolean;
stopListeningOnStory: () => void;
state: HocState = {};
componentDidMount() {
this.mounted = true;
const { api } = this.props;
this.stopListeningOnStory = api.on(STORY_CHANGED, () => {
const { kind, storyName, tests } = this.state;
if (this.mounted && (kind || storyName || tests)) {
this.onAddTests({});
}
});
api.on(ADD_TESTS, this.onAddTests);
}
componentWillUnmount() {
this.mounted = false;
const { api } = this.props;
this.stopListeningOnStory();
api.removeListener(ADD_TESTS, this.onAddTests);
}
onAddTests = ({ kind, storyName, tests }: HocState) => {
this.setState({ kind, storyName, tests });
};
render() {
const { active } = this.props;
const { tests } = this.state;
return active && tests ? <Component tests={tests} /> : null;
}
};
export default provideTests;

29
addons/jest/src/index.js → addons/jest/src/index.ts
View File

@ -3,7 +3,11 @@ import deprecate from 'util-deprecate';
import { normalize } from 'upath';
import { ADD_TESTS } from './shared';
const findTestResults = (testFiles, jestTestResults, jestTestFilesExt) =>
const findTestResults = (
testFiles: string[],
jestTestResults: { testResults: Array<{ name: string }> },
jestTestFilesExt: string
) =>
Object.values(testFiles).map(name => {
const fileName = `${name}${jestTestFilesExt}`;
@ -14,7 +18,7 @@ const findTestResults = (testFiles, jestTestResults, jestTestFilesExt) =>
fileName,
name,
result: jestTestResults.testResults.find(test =>
normalize(test.name).match(fileNamePattern)
Boolean(normalize(test.name).match(fileNamePattern))
),
};
}
@ -22,7 +26,17 @@ const findTestResults = (testFiles, jestTestResults, jestTestFilesExt) =>
return { fileName, name };
});
const emitAddTests = ({ kind, story, testFiles, options }) => {
const emitAddTests = ({
kind,
story,
testFiles,
options,
}: {
kind: string;
story: () => void;
testFiles: any;
options: { results: { testResults: Array<{ name: string }> }; filesExt: string };
}) => {
addons.getChannel().emit(ADD_TESTS, {
kind,
storyName: story,
@ -30,15 +44,16 @@ const emitAddTests = ({ kind, story, testFiles, options }) => {
});
};
export const withTests = userOptions => {
export const withTests = (userOptions: { results: any; filesExt: string }) => {
const defaultOptions = {
filesExt: '((\\.specs?)|(\\.tests?))?(\\.js)?$',
};
const options = Object.assign({}, defaultOptions, userOptions);
const options = { ...defaultOptions, ...userOptions };
return (...args) => {
return (...args: [(string | (() => void)), { kind: string; parameters: { jest?: any } }]) => {
if (typeof args[0] === 'string') {
return deprecate((storyFn, { kind }) => {
// tslint:disable-next-line:no-shadowed-variable
return deprecate((storyFn: () => void, { kind }: { kind: string }) => {
emitAddTests({ kind, story: storyFn, testFiles: args, options });
return storyFn();

6
addons/jest/src/register.js → addons/jest/src/register.tsx
View File

@ -2,15 +2,11 @@ import React from 'react';
import addons from '@storybook/addons';
import { ADDON_ID, PANEL_ID } from './shared';
// import PanelTitle from './components/PanelTitle';
import Panel from './components/Panel';
addons.register(ADDON_ID, api => {
const channel = addons.getChannel();
addons.addPanel(PANEL_ID, {
title: 'tests',
// eslint-disable-next-line react/prop-types
render: ({ active, key }) => <Panel key={key} channel={channel} api={api} active={active} />,
render: ({ active, key }) => <Panel key={key} api={api} active={active} />,
});
});

0
addons/jest/src/shared.js → addons/jest/src/shared.ts
View File

573
addons/jest/src/styles.js
View File

@ -1,573 +0,0 @@
import { document } from 'global';
const styles = `
@font-face {
font-family: octicons-link;
src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAZwABAAAAAACFQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEU0lHAAAGaAAAAAgAAAAIAAAAAUdTVUIAAAZcAAAACgAAAAoAAQAAT1MvMgAAAyQAAABJAAAAYFYEU3RjbWFwAAADcAAAAEUAAACAAJThvmN2dCAAAATkAAAABAAAAAQAAAAAZnBnbQAAA7gAAACyAAABCUM+8IhnYXNwAAAGTAAAABAAAAAQABoAI2dseWYAAAFsAAABPAAAAZwcEq9taGVhZAAAAsgAAAA0AAAANgh4a91oaGVhAAADCAAAABoAAAAkCA8DRGhtdHgAAAL8AAAADAAAAAwGAACfbG9jYQAAAsAAAAAIAAAACABiATBtYXhwAAACqAAAABgAAAAgAA8ASm5hbWUAAAToAAABQgAAAlXu73sOcG9zdAAABiwAAAAeAAAAME3QpOBwcmVwAAAEbAAAAHYAAAB/aFGpk3jaTY6xa8JAGMW/O62BDi0tJLYQincXEypYIiGJjSgHniQ6umTsUEyLm5BV6NDBP8Tpts6F0v+k/0an2i+itHDw3v2+9+DBKTzsJNnWJNTgHEy4BgG3EMI9DCEDOGEXzDADU5hBKMIgNPZqoD3SilVaXZCER3/I7AtxEJLtzzuZfI+VVkprxTlXShWKb3TBecG11rwoNlmmn1P2WYcJczl32etSpKnziC7lQyWe1smVPy/Lt7Kc+0vWY/gAgIIEqAN9we0pwKXreiMasxvabDQMM4riO+qxM2ogwDGOZTXxwxDiycQIcoYFBLj5K3EIaSctAq2kTYiw+ymhce7vwM9jSqO8JyVd5RH9gyTt2+J/yUmYlIR0s04n6+7Vm1ozezUeLEaUjhaDSuXHwVRgvLJn1tQ7xiuVv/ocTRF42mNgZGBgYGbwZOBiAAFGJBIMAAizAFoAAABiAGIAznjaY2BkYGAA4in8zwXi+W2+MjCzMIDApSwvXzC97Z4Ig8N/BxYGZgcgl52BCSQKAA3jCV8CAABfAAAAAAQAAEB42mNgZGBg4f3vACQZQABIMjKgAmYAKEgBXgAAeNpjYGY6wTiBgZWBg2kmUxoDA4MPhGZMYzBi1AHygVLYQUCaawqDA4PChxhmh/8ODDEsvAwHgMKMIDnGL0x7gJQCAwMAJd4MFwAAAHjaY2BgYGaA4DAGRgYQkAHyGMF8NgYrIM3JIAGVYYDT+AEjAwuDFpBmA9KMDEwMCh9i/v8H8sH0/4dQc1iAmAkALaUKLgAAAHjaTY9LDsIgEIbtgqHUPpDi3gPoBVyRTmTddOmqTXThEXqrob2gQ1FjwpDvfwCBdmdXC5AVKFu3e5MfNFJ29KTQT48Ob9/lqYwOGZxeUelN2U2R6+cArgtCJpauW7UQBqnFkUsjAY/kOU1cP+DAgvxwn1chZDwUbd6CFimGXwzwF6tPbFIcjEl+vvmM/byA48e6tWrKArm4ZJlCbdsrxksL1AwWn/yBSJKpYbq8AXaaTb8AAHja28jAwOC00ZrBeQNDQOWO//sdBBgYGRiYWYAEELEwMTE4uzo5Zzo5b2BxdnFOcALxNjA6b2ByTswC8jYwg0VlNuoCTWAMqNzMzsoK1rEhNqByEyerg5PMJlYuVueETKcd/89uBpnpvIEVomeHLoMsAAe1Id4AAAAAAAB42oWQT07CQBTGv0JBhagk7HQzKxca2sJCE1hDt4QF+9JOS0nbaaYDCQfwCJ7Au3AHj+LO13FMmm6cl7785vven0kBjHCBhfpYuNa5Ph1c0e2Xu3jEvWG7UdPDLZ4N92nOm+EBXuAbHmIMSRMs+4aUEd4Nd3CHD8NdvOLTsA2GL8M9PODbcL+hD7C1xoaHeLJSEao0FEW14ckxC+TU8TxvsY6X0eLPmRhry2WVioLpkrbp84LLQPGI7c6sOiUzpWIWS5GzlSgUzzLBSikOPFTOXqly7rqx0Z1Q5BAIoZBSFihQYQOOBEdkCOgXTOHA07HAGjGWiIjaPZNW13/+lm6S9FT7rLHFJ6fQbkATOG1j2OFMucKJJsxIVfQORl+9Jyda6Sl1dUYhSCm1dyClfoeDve4qMYdLEbfqHf3O/AdDumsjAAB42mNgYoAAZQYjBmyAGYQZmdhL8zLdDEydARfoAqIAAAABAAMABwAKABMAB///AA8AAQAAAAAAAAAAAAAAAAABAAAAAA==) format('woff');
}
.markdown-body {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
line-height: 1.5;
color: #333;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 16px;
line-height: 1.5;
word-wrap: break-word;
}
.markdown-body .pl-c {
color: #969896;
}
.markdown-body .pl-c1,
.markdown-body .pl-s .pl-v {
color: #0086b3;
}
.markdown-body .pl-e,
.markdown-body .pl-en {
color: #795da3;
}
.markdown-body .pl-smi,
.markdown-body .pl-s .pl-s1 {
color: #333;
}
.markdown-body .pl-ent {
color: #63a35c;
}
.markdown-body .pl-k {
color: #a71d5d;
}
.markdown-body .pl-s,
.markdown-body .pl-pds,
.markdown-body .pl-s .pl-pse .pl-s1,
.markdown-body .pl-sr,
.markdown-body .pl-sr .pl-cce,
.markdown-body .pl-sr .pl-sre,
.markdown-body .pl-sr .pl-sra {
color: #183691;
}
.markdown-body .pl-v {
color: #ed6a43;
}
.markdown-body .pl-id {
color: #b52a1d;
}
.markdown-body .pl-ii {
color: #f8f8f8;
background-color: #b52a1d;
}
.markdown-body .pl-sr .pl-cce {
font-weight: bold;
color: #63a35c;
}
.markdown-body .pl-ml {
color: #693a17;
}
.markdown-body .pl-mh,
.markdown-body .pl-mh .pl-en,
.markdown-body .pl-ms {
font-weight: bold;
color: #1d3e81;
}
.markdown-body .pl-mq {
color: #008080;
}
.markdown-body .pl-mi {
font-style: italic;
color: #333;
}
.markdown-body .pl-mb {
font-weight: bold;
color: #333;
}
.markdown-body .pl-md {
color: #bd2c00;
background-color: #ffecec;
}
.markdown-body .pl-mi1 {
color: #55a532;
background-color: #eaffea;
}
.markdown-body .pl-mdr {
font-weight: bold;
color: #795da3;
}
.markdown-body .pl-mo {
color: #1d3e81;
}
.markdown-body .octicon {
display: inline-block;
vertical-align: text-top;
fill: currentColor;
}
.markdown-body a {
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
.markdown-body a:active,
.markdown-body a:hover {
outline-width: 0;
}
.markdown-body strong {
font-weight: inherit;
}
.markdown-body strong {
font-weight: bolder;
}
.markdown-body h1 {
font-size: 2em;
margin: 0.67em 0;
}
.markdown-body img {
border-style: none;
}
.markdown-body svg:not(:root) {
overflow: hidden;
}
.markdown-body code,
.markdown-body kbd,
.markdown-body pre {
font-family: monospace, monospace;
font-size: 1em;
}
.markdown-body hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
.markdown-body input {
font: inherit;
margin: 0;
}
.markdown-body input {
overflow: visible;
}
.markdown-body [type="checkbox"] {
box-sizing: border-box;
padding: 0;
}
.markdown-body * {
box-sizing: border-box;
}
.markdown-body input {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
.markdown-body a {
color: #4078c0;
text-decoration: none;
}
.markdown-body a:hover,
.markdown-body a:active {
text-decoration: underline;
}
.markdown-body strong {
font-weight: 600;
}
.markdown-body hr {
height: 0;
margin: 15px 0;
overflow: hidden;
background: transparent;
border: 0;
border-bottom: 1px solid #ddd;
}
.markdown-body hr::before {
display: table;
content: "";
}
.markdown-body hr::after {
display: table;
clear: both;
content: "";
}
.markdown-body table {
border-spacing: 0;
border-collapse: collapse;
}
.markdown-body td,
.markdown-body th {
padding: 0;
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
margin-top: 0;
margin-bottom: 0;
}
.markdown-body h1 {
font-size: 32px;
font-weight: 600;
}
.markdown-body h2 {
font-size: 24px;
font-weight: 600;
}
.markdown-body h3 {
font-size: 20px;
font-weight: 600;
}
.markdown-body h4 {
font-size: 16px;
font-weight: 600;
}
.markdown-body h5 {
font-size: 14px;
font-weight: 600;
}
.markdown-body h6 {
font-size: 12px;
font-weight: 600;
}
.markdown-body p {
margin-top: 0;
margin-bottom: 10px;
}
.markdown-body blockquote {
margin: 0;
}
.markdown-body ul,
.markdown-body ol {
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
}
.markdown-body ol ol,
.markdown-body ul ol {
list-style-type: lower-roman;
}
.markdown-body ul ul ol,
.markdown-body ul ol ol,
.markdown-body ol ul ol,
.markdown-body ol ol ol {
list-style-type: lower-alpha;
}
.markdown-body dd {
margin-left: 0;
}
.markdown-body code {
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 12px;
}
.markdown-body pre {
margin-top: 0;
margin-bottom: 0;
font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
}
.markdown-body .octicon {
vertical-align: text-bottom;
}
.markdown-body input {
-webkit-font-feature-settings: "liga" 0;
font-feature-settings: "liga" 0;
}
.markdown-body::before {
display: table;
content: "";
}
.markdown-body::after {
display: table;
clear: both;
content: "";
}
.markdown-body>*:first-child {
margin-top: 0 !important;
}
.markdown-body>*:last-child {
margin-bottom: 0 !important;
}
.markdown-body a:not([href]) {
color: inherit;
text-decoration: none;
}
.markdown-body .anchor {
float: left;
padding-right: 4px;
margin-left: -20px;
line-height: 1;
}
.markdown-body .anchor:focus {
outline: none;
}
.markdown-body p,
.markdown-body blockquote,
.markdown-body ul,
.markdown-body ol,
.markdown-body dl,
.markdown-body table,
.markdown-body pre {
margin-top: 0;
margin-bottom: 16px;
}
.markdown-body hr {
height: 0.25em;
padding: 0;
margin: 24px 0;
background-color: #e7e7e7;
border: 0;
}
.markdown-body blockquote {
padding: 0 1em;
color: #777;
border-left: 0.25em solid #ddd;
}
.markdown-body blockquote>:first-child {
margin-top: 0;
}
.markdown-body blockquote>:last-child {
margin-bottom: 0;
}
.markdown-body kbd {
display: inline-block;
padding: 3px 5px;
font-size: 11px;
line-height: 10px;
color: #555;
vertical-align: middle;
background-color: #fcfcfc;
border: solid 1px #ccc;
border-bottom-color: #bbb;
border-radius: 3px;
box-shadow: inset 0 -1px 0 #bbb;
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
margin-top: 24px;
margin-bottom: 16px;
font-weight: 600;
line-height: 1.25;
}
.markdown-body h1 .octicon-link,
.markdown-body h2 .octicon-link,
.markdown-body h3 .octicon-link,
.markdown-body h4 .octicon-link,
.markdown-body h5 .octicon-link,
.markdown-body h6 .octicon-link {
color: #000;
vertical-align: middle;
visibility: hidden;
}
.markdown-body h1:hover .anchor,
.markdown-body h2:hover .anchor,
.markdown-body h3:hover .anchor,
.markdown-body h4:hover .anchor,
.markdown-body h5:hover .anchor,
.markdown-body h6:hover .anchor {
text-decoration: none;
}
.markdown-body h1:hover .anchor .octicon-link,
.markdown-body h2:hover .anchor .octicon-link,
.markdown-body h3:hover .anchor .octicon-link,
.markdown-body h4:hover .anchor .octicon-link,
.markdown-body h5:hover .anchor .octicon-link,
.markdown-body h6:hover .anchor .octicon-link {
visibility: visible;
}
.markdown-body h1 {
padding-bottom: 0.3em;
font-size: 2em;
border-bottom: 1px solid #eee;
}
.markdown-body h2 {
padding-bottom: 0.3em;
font-size: 1.5em;
border-bottom: 1px solid #eee;
}
.markdown-body h3 {
font-size: 1.25em;
}
.markdown-body h4 {
font-size: 1em;
}
.markdown-body h5 {
font-size: 0.875em;
}
.markdown-body h6 {
font-size: 0.85em;
color: #777;
}
.markdown-body ul,
.markdown-body ol {
padding-left: 2em;
}
.markdown-body ul ul,
.markdown-body ul ol,
.markdown-body ol ol,
.markdown-body ol ul {
margin-top: 0;
margin-bottom: 0;
}
.markdown-body li>p {
margin-top: 16px;
}
.markdown-body li+li {
margin-top: 0.25em;
}
.markdown-body dl {
padding: 0;
}
.markdown-body dl dt {
padding: 0;
margin-top: 16px;
font-size: 1em;
font-style: italic;
font-weight: bold;
}
.markdown-body dl dd {
padding: 0 16px;
margin-bottom: 16px;
}
.markdown-body table {
display: block;
width: 100%;
overflow: auto;
}
.markdown-body table th {
font-weight: bold;
}
.markdown-body table th,
.markdown-body table td {
padding: 6px 13px;
border: 1px solid #ddd;
}
.markdown-body table tr {
background-color: #fff;
border-top: 1px solid #ccc;
}
.markdown-body table tr:nth-child(2n) {
background-color: #f8f8f8;
}
.markdown-body img {
max-width: 100%;
box-sizing: content-box;
background-color: #fff;
}
.markdown-body code {
padding: 0;
padding-top: 0.2em;
padding-bottom: 0.2em;
margin: 0;
font-size: 85%;
background-color: rgba(0,0,0,0.04);
border-radius: 3px;
}
.markdown-body code::before,
.markdown-body code::after {
letter-spacing: -0.2em;
content: " ";
}
.markdown-body pre {
word-wrap: normal;
}
.markdown-body pre>code {
padding: 0;
margin: 0;
font-size: 100%;
word-break: normal;
white-space: pre;
background: transparent;
border: 0;
}
.markdown-body .highlight {
margin-bottom: 16px;
}
.markdown-body .highlight pre {
margin-bottom: 0;
word-break: normal;
}
.markdown-body .highlight pre,
.markdown-body pre {
padding: 16px;
overflow: auto;
font-size: 85%;
line-height: 1.45;
background-color: #f7f7f7;
border-radius: 3px;
}
.markdown-body pre code {
display: inline;
max-width: auto;
padding: 0;
margin: 0;
overflow: visible;
line-height: inherit;
word-wrap: normal;
background-color: transparent;
border: 0;
}
.markdown-body pre code::before,
.markdown-body pre code::after {
content: normal;
}
.markdown-body .pl-0 {
padding-left: 0 !important;
}
.markdown-body .pl-1 {
padding-left: 3px !important;
}
.markdown-body .pl-2 {
padding-left: 6px !important;
}
.markdown-body .pl-3 {
padding-left: 12px !important;
}
.markdown-body .pl-4 {
padding-left: 24px !important;
}
.markdown-body .pl-5 {
padding-left: 36px !important;
}
.markdown-body .pl-6 {
padding-left: 48px !important;
}
.markdown-body .full-commit .btn-outline:not(:disabled):hover {
color: #4078c0;
border: 1px solid #4078c0;
}
.markdown-body kbd {
display: inline-block;
padding: 3px 5px;
font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
line-height: 10px;
color: #555;
vertical-align: middle;
background-color: #fcfcfc;
border: solid 1px #ccc;
border-bottom-color: #bbb;
border-radius: 3px;
box-shadow: inset 0 -1px 0 #bbb;
}
.markdown-body :checked+.radio-label {
position: relative;
z-index: 1;
border-color: #4078c0;
}
.markdown-body .task-list-item {
list-style-type: none;
}
.markdown-body .task-list-item+.task-list-item {
margin-top: 3px;
}
.markdown-body .task-list-item input {
margin: 0 0.2em 0.25em -1.6em;
vertical-align: middle;
}
.markdown-body hr {
border-bottom-color: #eee;
}
`;
if (document && !document.getElementById('github-markdown-css')) {
const styleNode = document.createElement('style');
styleNode.id = 'github-markdown-css';
styleNode.innerHTML = styles;
document.head.appendChild(styleNode);
}

4
addons/jest/src/typings.d.ts vendored Normal file
View File

@ -0,0 +1,4 @@
// TODO: following packages need definition files or a TS migration
declare module 'global';
declare module '@storybook/components';

1
addons/jest/styles.js
View File

@ -1 +0,0 @@
require('./dist/styles');

13
addons/jest/tsconfig.json Normal file
View File

@ -0,0 +1,13 @@
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"rootDir": "./src",
"types": ["webpack-env"]
},
"include": [
"src/**/*"
],
"exclude": [
"src/__tests__/**/*"
]
}

10
addons/knobs/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-knobs",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"description": "Storybook Addon Prop Editor Component",
"keywords": [
"addon",
@ -22,10 +22,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.1.0-alpha.21",
"@storybook/components": "5.1.0-alpha.21",
"@storybook/core-events": "5.1.0-alpha.21",
"@storybook/theming": "5.1.0-alpha.21",
"@storybook/addons": "5.1.0-alpha.24",
"@storybook/components": "5.1.0-alpha.24",
"@storybook/core-events": "5.1.0-alpha.24",
"@storybook/theming": "5.1.0-alpha.24",
"copy-to-clipboard": "^3.0.8",
"core-js": "^2.6.5",
"escape-html": "^1.0.3",

8
addons/links/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-links",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"description": "Story Links addon for storybook",
"keywords": [
"addon",
@ -22,9 +22,9 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.1.0-alpha.21",
"@storybook/core-events": "5.1.0-alpha.21",
"@storybook/router": "5.1.0-alpha.21",
"@storybook/addons": "5.1.0-alpha.24",
"@storybook/core-events": "5.1.0-alpha.24",
"@storybook/router": "5.1.0-alpha.24",
"common-tags": "^1.8.0",
"core-js": "^2.6.5",
"global": "^4.3.2",

42
addons/notes/README.md
View File

@ -6,7 +6,7 @@ Storybook Addon Notes allows you to write notes (text or HTML) for your stories
![Storybook Addon Notes Demo](docs/demo.png)
### Getting Started
## Getting Started
**NOTE: Documentation on master branch is for alpha version, stable release is on [master](https://github.com/storybooks/storybook/tree/master/addons/)**
@ -14,47 +14,65 @@ Storybook Addon Notes allows you to write notes (text or HTML) for your stories
yarn add -D @storybook/addon-notes
```
Then create a file called `addons.js` in your storybook config.
Then create a file called `addons.js` in your Storybook config.
Add following content to it:
```js
// register the notes addon as a tab
import '@storybook/addon-notes/register';
// or register the notes addon as a panel. Only one can be used!
import '@storybook/addon-notes/register-panel';
```
You can use the `notes` parameter to add a note to each story:
Now, you can use the `notes` parameter to add a note to each story.
### With React
```js
import { storiesOf } from '@storybook/react';
import Component from './Component';
storiesOf('Component', module)
.add('with some emoji', () => <Component />, {
storiesOf('Component', module).add('with some emoji', () => <Component />, {
notes: 'A very simple example of addon notes',
});
```
### With Vue
```js
import { storiesOf } from '@storybook/vue';
import MyButton from './MyButton.vue';
storiesOf('MyButton', module)
.add('with some emoji', () => ({
components: { MyButton },
template: '<my-button>😀 😎 👍 💯</my-button>'
}), {
notes: 'A very simple example of addon notes',
});
```
#### Using Markdown
## Using Markdown
To use markdown in your notes is supported, storybook will load markdown as raw by default.
Using Markdown in your notes is supported, Storybook will load Markdown as raw by default.
```js
import { storiesOf } from '@storybook/react';
import Component from './Component';
import notes from './someMarkdownText.md';
storiesOf('Component', module)
.add('With Markdown', () => <Component />, { notes });
storiesOf('Component', module).add('With Markdown', () => <Component />, { notes });
```
### Giphy
## Giphy
When using markdown, you can also embed gifs from Giphy into your markdown. Currently, the value `gif` of the gif prop is used to search and return the first result returned by Giphy.
When using Markdown, you can also embed gifs from Giphy into your Markdown. Currently, the value `gif` of the gif prop is used to search and return the first result returned by Giphy.
```md
# Title
<Giphy gif='cheese' />
```

14
addons/notes/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-notes",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"description": "Write notes for your Storybook stories.",
"keywords": [
"addon",
@ -23,12 +23,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.1.0-alpha.21",
"@storybook/api": "5.1.0-alpha.21",
"@storybook/client-logger": "5.1.0-alpha.21",
"@storybook/components": "5.1.0-alpha.21",
"@storybook/core-events": "5.1.0-alpha.21",
"@storybook/theming": "5.1.0-alpha.21",
"@storybook/addons": "5.1.0-alpha.24",
"@storybook/api": "5.1.0-alpha.24",
"@storybook/client-logger": "5.1.0-alpha.24",
"@storybook/components": "5.1.0-alpha.24",
"@storybook/core-events": "5.1.0-alpha.24",
"@storybook/theming": "5.1.0-alpha.24",
"core-js": "^2.6.5",
"markdown-to-jsx": "^6.9.3",
"prop-types": "^15.7.2",

1
addons/notes/register-panel.js Normal file
View File

@ -0,0 +1 @@
require('./dist/register.js').default('panel');

2
addons/notes/register.js
View File

@ -1 +1 @@
require('./dist/register.js');
require('./dist/register.js').default('tab');

18
addons/notes/src/register.tsx
View File

@ -6,12 +6,14 @@ import { ADDON_ID, PANEL_ID } from './shared';
// TODO: fix eslint in tslint (igor said he fixed it, should ask him)
import Panel from './Panel';
addons.register(ADDON_ID, api => {
addons.add(PANEL_ID, {
type: types.TAB,
title: 'Notes',
route: ({ storyId }) => `/info/${storyId}`, // todo add type
match: ({ viewMode }) => viewMode === 'info', // todo add type
render: ({ active }) => <Panel api={api} active={active} />,
export default function register(type: types) {
addons.register(ADDON_ID, api => {
addons.add(PANEL_ID, {
type,
title: 'Notes',
route: ({ storyId }) => `/info/${storyId}`, // todo add type
match: ({ viewMode }) => viewMode === 'info', // todo add type
render: ({ active }) => <Panel api={api} active={active} />,
});
});
});
}

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

@ -1,5 +1,3 @@
import { ReactElement } from 'react';
export const ADDON_ID = 'storybooks/notes';
export const PANEL_ID = `${ADDON_ID}/panel`;
export const PARAM_KEY = `notes`;

5
addons/ondevice-backgrounds/README.md
View File

@ -7,12 +7,12 @@ Storybook Backgrounds Addon for react-native can be used to change background co
## Installation
```sh
npm i -D @storybook/addon-ondevice-backgrounds
yarn add -D @storybook/addon-ondevice-backgrounds
```
## Configuration
Then create a file called `rn-addons.js` in your storybook config.
Create a file called `rn-addons.js` in your storybook config.
Add following content to it:
@ -21,6 +21,7 @@ import '@storybook/addon-ondevice-backgrounds/register';
```
Then import `rn-addons.js` next to your `getStorybookUI` call.
```js
import './rn-addons';
```

4
addons/ondevice-backgrounds/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-ondevice-backgrounds",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"description": "A react-native storybook addon to show different backgrounds for your preview",
"keywords": [
"addon",
@ -24,7 +24,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.1.0-alpha.21",
"@storybook/addons": "5.1.0-alpha.24",
"core-js": "^2.6.5",
"prop-types": "^15.7.2"
},

38
addons/ondevice-knobs/README.md
View File

@ -1,48 +1,32 @@
# Storybook Addon On Device Knobs
# Storybook Knobs Addon for react-native
Storybook Addon On Device Knobs allow you to edit React props dynamically using the Storybook UI.
You can also use Knobs as a dynamic variable inside stories in [Storybook](https://storybook.js.org).
Storybook Knobs Addon allows you to edit react props using the Storybook UI using variables inside stories in [Storybook](https://storybook.js.org).
[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
This is how Knobs look like:
[![Storybook Knobs Demo](docs/storybook-knobs-example.png)](https://storybooks-official.netlify.com/?knob-Dollars=12.5&knob-Name=Storyteller&knob-Years%20in%20NY=9&knob-background=%23ffff00&knob-Age=70&knob-Items%5B0%5D=Laptop&knob-Items%5B1%5D=Book&knob-Items%5B2%5D=Whiskey&knob-Other%20Fruit=lime&knob-Birthday=1484870400000&knob-Nice=true&knob-Styles=%7B%22border%22%3A%223px%20solid%20%23ff00ff%22%2C%22padding%22%3A%2210px%22%7D&knob-Fruit=apple&selectedKind=Addons%7CKnobs.withKnobs&selectedStory=tweaks%20static%20values&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybooks%2Fstorybook-addon-knobs)
**This addon is a wrapper for addon [@storybook/addon-knobs](https://github.com/storybooks/storybook/blob/master/addons/knobs).
Refer to its documentation to understand how to use knobs**
## Getting Started
First of all, you need to install knobs into your project.
## Installation
```sh
yarn add @storybook/addon-ondevice-knobs @storybook/addon-knobs --dev
yarn add -D @storybook/addon-ondevice-knobs @storybook/addon-knobs
```
Then create a file called `rn-addons.js` in your storybook config.
## Configuration
Create a file called `rn-addons.js` in your storybook config.
Add following content to it:
```js
import '@storybook/addon-ondevice-knobs/register';
```
> `@storybook/addon-ondevice-knobs` use register only.
Then import `rn-addons.js` next to your `getStorybookUI` call.
```js
import './rn-addons';
```
Now, write your stories with knobs.
**Refer to [@storybook/addon-knobs](https://github.com/storybooks/storybook/blob/master/addons/knobs) to learn how to write stories.**
**Note:** you'll still have to install `@storybook/addon-knobs` as well and import `withKnobs` and all knob types _(e.g. `select`, `text` etc)_ from that module.
```js
// Example
import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';
// Write your story...
```
See [@storybook/addon-knobs](https://github.com/storybooks/storybook/blob/master/addons/knobs) to learn how to write stories with knobs and the [crna-kitchen-sink app](../../examples-native/crna-kitchen-sink) for more examples.

6
addons/ondevice-knobs/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-ondevice-knobs",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"description": "Display storybook story knobs on your deviced.",
"keywords": [
"addon",
@ -21,8 +21,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.1.0-alpha.21",
"@storybook/core-events": "5.1.0-alpha.21",
"@storybook/addons": "5.1.0-alpha.24",
"@storybook/core-events": "5.1.0-alpha.24",
"core-js": "^2.6.5",
"deep-equal": "^1.0.1",
"prop-types": "^15.7.2",

28
addons/ondevice-notes/README.md
View File

@ -1,20 +1,18 @@
# Storybook Addon On Device Notes
# Storybook Notes Addon for react-native
Storybook Addon On Device Notes allows you to write notes (text or markdown) for your stories in [Storybook](https://storybook.js.org).
[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
The Notes Addon allows you to write notes (text or markdown) for your stories in [Storybook](https://storybook.js.org).
![Storybook Addon Notes Demo](docs/demo.png)
### Getting Started
**NOTE: Documentation on master branch is for alpha version, stable release is on [master](https://github.com/storybooks/storybook/tree/master/addons/)**
## Installation
```sh
yarn add -D @storybook/addon-ondevice-notes
```
Then create a file called `rn-addons.js` in your storybook config.
## Configuration
Create a file called `rn-addons.js` in your storybook config.
Add following content to it:
@ -28,17 +26,9 @@ Then import `rn-addons.js` next to your `getStorybookUI` call.
import './rn-addons';
```
Then add the `withNotes` decorator to all stories in your `config.js`:
## Usage
```js
// Import from @storybook/X where X is your framework
import { addDecorator } from '@storybook/react-native';
import { withNotes } from '@storybook/addon-ondevice-notes';
addDecorator(withNotes);
```
You can use the `notes` parameter to add a note to each story:
Use the `notes` parameter to add a note to stories:
```js
import { storiesOf } from '@storybook/react-native';
@ -49,3 +39,5 @@ storiesOf('Component', module).add('with some emoji', () => <Component />, {
notes: 'A very simple component',
});
```
See the [crna-kitchen-sink app](../../examples-native/crna-kitchen-sink) for more examples.

9
addons/ondevice-notes/package.json
View File

@ -1,11 +1,12 @@
{
"name": "@storybook/addon-ondevice-notes",
"version": "5.1.0-alpha.21",
"description": "Write notes for your Storybook stories.",
"version": "5.1.0-alpha.24",
"description": "Write notes for your react-native Storybook stories.",
"keywords": [
"addon",
"notes",
"storybook"
"storybook",
"react-native"
],
"repository": {
"type": "git",
@ -19,7 +20,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.1.0-alpha.21",
"@storybook/addons": "5.1.0-alpha.24",
"core-js": "^2.6.5",
"prop-types": "^15.7.2",
"react-native-simple-markdown": "^1.1.0"

42
addons/ondevice-notes/src/__tests__/index.js
View File

@ -1,42 +0,0 @@
import addons from '@storybook/addons';
import { withNotes } from '..';
addons.getChannel = jest.fn();
describe('Storybook Addon Notes', () => {
it('should inject text from `notes` parameter', () => {
const channel = { emit: jest.fn() };
addons.getChannel.mockReturnValue(channel);
const getStory = jest.fn();
const context = { parameters: { notes: 'hello' } };
withNotes(getStory, context);
expect(channel.emit).toHaveBeenCalledWith('storybook/notes/add_notes', 'hello');
expect(getStory).toHaveBeenCalledWith(context);
});
it('should inject text even if no `notes` parameter is set to reset the addon', () => {
const channel = { emit: jest.fn() };
addons.getChannel.mockReturnValue(channel);
const getStory = jest.fn();
const context = {};
withNotes(getStory, context);
expect(channel.emit).toHaveBeenCalled();
expect(getStory).toHaveBeenCalledWith(context);
});
it('should inject markdown from `notes.markdown` parameter', () => {
const channel = { emit: jest.fn() };
addons.getChannel.mockReturnValue(channel);
const getStory = jest.fn();
const context = { parameters: { notes: { markdown: '# hello' } } };
withNotes(getStory, context);
expect(channel.emit).toHaveBeenCalledWith('storybook/notes/add_notes', '# hello');
expect(getStory).toHaveBeenCalledWith(context);
});
});

37
addons/ondevice-notes/src/index.js
View File

@ -1,34 +1,3 @@
import addons, { makeDecorator } from '@storybook/addons';
export const withNotes = makeDecorator({
name: 'withNotes',
parameterName: 'notes',
wrapper: (getStory, context, { options, parameters }) => {
const channel = addons.getChannel();
const storyOptions = parameters || options;
if (!storyOptions) {
channel.emit('storybook/notes/add_notes', '');
return getStory(context);
}
const { text, markdown } =
typeof storyOptions === 'string' ? { text: storyOptions } : storyOptions;
if (!text && !markdown) {
throw new Error('You must set of one of `text` or `markdown` on the `notes` parameter');
}
channel.emit('storybook/notes/add_notes', text || markdown);
return getStory(context);
},
});
export const withMarkdownNotes = (text, options) =>
withNotes({
markdown: text,
markdownOptions: options,
});
if (__DEV__) {
console.log("import '@storybook/addon-ondevice-notes/register' to register the notes addon");
}

61
addons/ondevice-notes/src/register.js
View File

@ -1,65 +1,54 @@
import React from 'react';
import PropTypes from 'prop-types';
import { View } from 'react-native';
import Markdown from 'react-native-simple-markdown';
import addons from '@storybook/addons';
import Events from '@storybook/core-events';
export class Notes extends React.Component {
constructor(...args) {
super(...args);
this.state = { text: '' };
this.onAddNotes = this.onAddNotes.bind(this);
}
export const PARAM_KEY = `notes`;
class Notes extends React.Component {
setBackgroundFromSwatch = background => {
this.props.channel.emit(Constants.UPDATE_BACKGROUND, background);
};
componentDidMount() {
const { channel } = this.props;
// Listen to the notes and render it.
channel.on('storybook/notes/add_notes', this.onAddNotes);
this.props.channel.on(Events.SELECT_STORY, this.onStorySelected);
}
// This is some cleanup tasks when the Notes panel is unmounting.
componentWillUnmount() {
this.unmounted = true;
const { channel } = this.props;
channel.removeListener('storybook/notes/add_notes', this.onAddNotes);
this.props.channel.removeListener(Events.SELECT_STORY, this.onStorySelected);
}
onAddNotes(text) {
this.setState({ text });
}
onStorySelected = selection => {
this.setState({ selection });
};
render() {
const { active } = this.props;
const { text } = this.state;
const { active, api } = this.props;
if (!active) {
return null;
}
const story = api
.store()
.getStoryAndParameters(this.state.selection.kind, this.state.selection.story);
const text = story.parameters[PARAM_KEY];
const textAfterFormatted = text ? text.trim() : '';
return active ? (
return (
<View style={{ padding: 10, flex: 1 }}>
<Markdown>{textAfterFormatted}</Markdown>
</View>
) : null;
);
}
}
Notes.propTypes = {
active: PropTypes.bool.isRequired,
channel: PropTypes.shape({
on: PropTypes.func,
emit: PropTypes.func,
removeListener: PropTypes.func,
}).isRequired,
api: PropTypes.shape({
on: PropTypes.func,
getQueryParam: PropTypes.func,
setQueryParams: PropTypes.func,
}).isRequired,
};
addons.register('storybook/notes', api => {
const channel = addons.getChannel();
addons.addPanel('storybook/notes/panel', {
title: 'Notes',
// eslint-disable-next-line react/prop-types
render: ({ active, key }) => <Notes key={key} channel={channel} api={api} active={active} />,
});
});

4
addons/options/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-options",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"description": "Options addon for storybook",
"keywords": [
"addon",
@ -22,7 +22,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.1.0-alpha.21",
"@storybook/addons": "5.1.0-alpha.24",
"core-js": "^2.6.5",
"util-deprecate": "^1.0.2"
},

9
addons/storyshots/storyshots-core/README.md
View File

@ -387,6 +387,15 @@ initStoryshots({
});
```
Or, as a more complex example, if we have a package in our `lerna` project called `app` with the path `./packages/app/src/__tests__/storsyhots.js` and the storybook config directory `./packages/app/.storybook`:
```js
import path from 'path';
import initStoryshots from '@storybook/addon-storyshots';
initStoryshots({ configPath: path.resolve(__dirname, '../../.storybook') });
```
`configPath` can also specify path to the `config.js` itself. In this case, config directory will be
a base directory of the `configPath`. It may be useful when the `config.js` for test should differ from the
original one. It also may be useful for separating tests to different test configs:

4
addons/storyshots/storyshots-core/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storyshots",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
"keywords": [
"addon",
@ -25,7 +25,7 @@
"storybook": "start-storybook -p 6006"
},
"dependencies": {
"@storybook/addons": "5.1.0-alpha.21",
"@storybook/addons": "5.1.0-alpha.24",
"core-js": "^2.6.5",
"glob": "^7.1.3",
"global": "^4.3.2",

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

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storyshots-puppeteer",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"description": "Image snappshots addition to StoryShots base on puppeteer",
"keywords": [
"addon",
@ -22,8 +22,8 @@
"prepare": "node ../../../scripts/prepare.js"
},
"dependencies": {
"@storybook/node-logger": "5.1.0-alpha.21",
"@storybook/router": "5.1.0-alpha.21",
"@storybook/node-logger": "5.1.0-alpha.24",
"@storybook/router": "5.1.0-alpha.24",
"core-js": "^2.6.5",
"jest-image-snapshot": "^2.8.1",
"puppeteer": "^1.12.2",

10
addons/storysource/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storysource",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"description": "Stories addon for storybook",
"keywords": [
"addon",
@ -22,10 +22,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.1.0-alpha.21",
"@storybook/components": "5.1.0-alpha.21",
"@storybook/router": "5.1.0-alpha.21",
"@storybook/theming": "5.1.0-alpha.21",
"@storybook/addons": "5.1.0-alpha.24",
"@storybook/components": "5.1.0-alpha.24",
"@storybook/router": "5.1.0-alpha.24",
"@storybook/theming": "5.1.0-alpha.24",
"core-js": "^2.6.5",
"estraverse": "^4.2.0",
"loader-utils": "^1.2.3",

12
addons/viewport/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-viewport",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"description": "Storybook addon to change the viewport size to mobile",
"keywords": [
"addon",
@ -21,11 +21,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.1.0-alpha.21",
"@storybook/client-logger": "5.1.0-alpha.21",
"@storybook/components": "5.1.0-alpha.21",
"@storybook/core-events": "5.1.0-alpha.21",
"@storybook/theming": "5.1.0-alpha.21",
"@storybook/addons": "5.1.0-alpha.24",
"@storybook/client-logger": "5.1.0-alpha.24",
"@storybook/components": "5.1.0-alpha.24",
"@storybook/core-events": "5.1.0-alpha.24",
"@storybook/theming": "5.1.0-alpha.24",
"core-js": "^2.6.5",
"global": "^4.3.2",
"memoizerific": "^1.11.3",

6
app/angular/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/angular",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -26,8 +26,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/core": "5.1.0-alpha.21",
"@storybook/node-logger": "5.1.0-alpha.21",
"@storybook/core": "5.1.0-alpha.24",
"@storybook/node-logger": "5.1.0-alpha.24",
"angular2-template-loader": "^0.6.2",
"core-js": "^2.6.5",
"fork-ts-checker-webpack-plugin": "^0.5.2",

4
app/ember/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/ember",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
"homepage": "https://github.com/storybooks/storybook/tree/master/app/ember",
"bugs": {
@ -24,7 +24,7 @@
},
"dependencies": {
"@ember/test-helpers": "^1.5.0",
"@storybook/core": "5.1.0-alpha.21",
"@storybook/core": "5.1.0-alpha.24",
"common-tags": "^1.8.0",
"core-js": "^2.6.5",
"global": "^4.3.2",

4
app/html/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/html",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -25,7 +25,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/core": "5.1.0-alpha.21",
"@storybook/core": "5.1.0-alpha.24",
"common-tags": "^1.8.0",
"core-js": "^2.6.5",
"global": "^4.3.2",

4
app/marko/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/marko",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -26,7 +26,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/core": "5.1.0-alpha.21",
"@storybook/core": "5.1.0-alpha.24",
"common-tags": "^1.8.0",
"core-js": "^2.6.5",
"global": "^4.3.2",

4
app/mithril/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/mithril",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"description": "Storybook for Mithril: Develop Mithril Component in isolation.",
"keywords": [
"storybook"
@ -27,7 +27,7 @@
},
"dependencies": {
"@babel/plugin-transform-react-jsx": "^7.3.0",
"@storybook/core": "5.1.0-alpha.21",
"@storybook/core": "5.1.0-alpha.24",
"common-tags": "^1.8.0",
"core-js": "^2.6.5",
"global": "^4.3.2",

4
app/polymer/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/polymer",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"description": "Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -25,7 +25,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/core": "5.1.0-alpha.21",
"@storybook/core": "5.1.0-alpha.24",
"@webcomponents/webcomponentsjs": "^1.2.0",
"common-tags": "^1.8.0",
"core-js": "^2.6.5",

4
app/preact/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/preact",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"description": "Storybook for Preact: Develop Preact Component in isolation.",
"keywords": [
"storybook"
@ -27,7 +27,7 @@
},
"dependencies": {
"@babel/plugin-transform-react-jsx": "^7.3.0",
"@storybook/core": "5.1.0-alpha.21",
"@storybook/core": "5.1.0-alpha.24",
"common-tags": "^1.8.0",
"core-js": "^2.6.5",
"global": "^4.3.2",

14
app/react-native-server/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/react-native-server",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"description": "A better way to develop React Native Components for your app",
"keywords": [
"react",
@ -24,12 +24,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.1.0-alpha.21",
"@storybook/api": "5.1.0-alpha.21",
"@storybook/channel-websocket": "5.1.0-alpha.21",
"@storybook/core": "5.1.0-alpha.21",
"@storybook/core-events": "5.1.0-alpha.21",
"@storybook/ui": "5.1.0-alpha.21",
"@storybook/addons": "5.1.0-alpha.24",
"@storybook/api": "5.1.0-alpha.24",
"@storybook/channel-websocket": "5.1.0-alpha.24",
"@storybook/core": "5.1.0-alpha.24",
"@storybook/core-events": "5.1.0-alpha.24",
"@storybook/ui": "5.1.0-alpha.24",
"commander": "^2.19.0",
"global": "^4.3.2",
"react": "^16.6.0",

12
app/react-native/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/react-native",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"description": "A better way to develop React Native Components for your app",
"keywords": [
"react",
@ -23,11 +23,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.1.0-alpha.21",
"@storybook/channel-websocket": "5.1.0-alpha.21",
"@storybook/channels": "5.1.0-alpha.21",
"@storybook/client-api": "5.1.0-alpha.21",
"@storybook/core-events": "5.1.0-alpha.21",
"@storybook/addons": "5.1.0-alpha.24",
"@storybook/channel-websocket": "5.1.0-alpha.24",
"@storybook/channels": "5.1.0-alpha.24",
"@storybook/client-api": "5.1.0-alpha.24",
"@storybook/core-events": "5.1.0-alpha.24",
"core-js": "^2.6.5",
"prop-types": "^15.7.2",
"react-native-swipe-gestures": "^1.0.3",

6
app/react/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/react",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -29,8 +29,8 @@
"@babel/plugin-transform-react-constant-elements": "^7.2.0",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@storybook/core": "5.1.0-alpha.21",
"@storybook/node-logger": "5.1.0-alpha.21",
"@storybook/core": "5.1.0-alpha.24",
"@storybook/node-logger": "5.1.0-alpha.24",
"@svgr/webpack": "^4.0.3",
"babel-plugin-named-asset-import": "^0.3.1",
"babel-plugin-react-docgen": "^3.0.0",

12
app/react/src/server/__snapshots__/cra-config.test.js.snap
View File

@ -47,6 +47,12 @@ Object {
".jsx",
],
},
"resolveLoader": Object {
"modules": Array [
"node_modules",
"/app/react/src/server/__mocks__/react-scripts-2-0-0/node_modules",
],
},
}
`;
@ -110,5 +116,11 @@ Object {
".tsx",
],
},
"resolveLoader": Object {
"modules": Array [
"node_modules",
"/app/react/src/server/__mocks__/react-scripts-2-1-0/node_modules",
],
},
}
`;

5
app/react/src/server/cra-config.js
View File

@ -60,7 +60,7 @@ export function isReactScriptsInstalled(requiredVersion = '2.0.0') {
try {
// eslint-disable-next-line import/no-dynamic-require,global-require
const reactScriptsJson = require(path.join(getReactScriptsPath(), 'package.json'));
return !semver.lt(reactScriptsJson.version, requiredVersion);
return !semver.gtr(requiredVersion, reactScriptsJson.version);
} catch (e) {
return false;
}
@ -176,5 +176,8 @@ export function applyCRAWebpackConfig(baseConfig, configDir) {
...baseConfig.resolve,
extensions: [...baseConfig.resolve.extensions, ...tsExtensions],
},
resolveLoader: {
modules: ['node_modules', path.join(getReactScriptsPath(), 'node_modules')],
},
};
}

14
app/react/src/server/cra-config.test.js
View File

@ -13,6 +13,8 @@ jest.mock('mini-css-extract-plugin', () => {});
const SCRIPT_PATH = '.bin/react-scripts';
const stripCwd = loaderPath => loaderPath.replace(process.cwd(), '');
describe('cra-config', () => {
beforeEach(() => {
fs.realpathSync.mockReset();
@ -64,7 +66,7 @@ esac
if [ -x "$basedir/node" ]; then
"$basedir/node" "$basedir/../custom-react-scripts/bin/react-scripts.js" "$@"
ret=$?
else
else
node "$basedir/../custom-react-scripts/bin/react-scripts.js" "$@"
ret=$?
fi
@ -103,7 +105,10 @@ exit $ret`
});
it('should apply styling webpack rules', () => {
expect(applyCRAWebpackConfig(mockConfig, '/test-project')).toMatchSnapshot();
const webpackConfig = applyCRAWebpackConfig(mockConfig, '/test-project');
// We don't want full paths in snapshots.
webpackConfig.resolveLoader.modules = webpackConfig.resolveLoader.modules.map(stripCwd);
expect(webpackConfig).toMatchSnapshot();
});
});
@ -116,7 +121,10 @@ exit $ret`
});
it('should apply Babel, styling rules and merge plugins', () => {
expect(applyCRAWebpackConfig(mockConfig, '/test-project')).toMatchSnapshot();
const webpackConfig = applyCRAWebpackConfig(mockConfig, '/test-project');
// We don't want full paths in snapshots.
webpackConfig.resolveLoader.modules = webpackConfig.resolveLoader.modules.map(stripCwd);
expect(webpackConfig).toMatchSnapshot();
});
});
});

16
app/react/src/server/framework-preset-cra.js
View File

@ -1,5 +1,6 @@
import path from 'path';
import { logger } from '@storybook/node-logger';
import { applyCRAWebpackConfig, isReactScriptsInstalled } from './cra-config';
import { applyCRAWebpackConfig, getReactScriptsPath, isReactScriptsInstalled } from './cra-config';
export function webpackFinal(config, { configDir }) {
if (!isReactScriptsInstalled()) {
@ -12,6 +13,19 @@ export function webpackFinal(config, { configDir }) {
return applyCRAWebpackConfig(config, configDir);
}
export function managerWebpack(config) {
if (!isReactScriptsInstalled()) {
return config;
}
return {
...config,
resolveLoader: {
modules: ['node_modules', path.join(getReactScriptsPath(), 'node_modules')],
},
};
}
export function babelDefault(config) {
if (!isReactScriptsInstalled()) {
return config;

4
app/riot/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/riot",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"description": "Storybook for riot.js: View riot snippets in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -25,7 +25,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/core": "5.1.0-alpha.21",
"@storybook/core": "5.1.0-alpha.24",
"common-tags": "^1.8.0",
"core-js": "^2.6.5",
"global": "^4.3.2",

4
app/svelte/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/svelte",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -26,7 +26,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/core": "5.1.0-alpha.21",
"@storybook/core": "5.1.0-alpha.24",
"common-tags": "^1.8.0",
"core-js": "^2.6.5",
"global": "^4.3.2",

4
app/vue/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/vue",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -26,7 +26,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/core": "5.1.0-alpha.21",
"@storybook/core": "5.1.0-alpha.24",
"common-tags": "^1.8.0",
"core-js": "^2.6.5",
"global": "^4.3.2",

2
docs/package.json
View File

@ -33,7 +33,7 @@
"highlight.js": "^9.14.2",
"is-builtin-module": "^3.0.0",
"lodash": "^4.17.11",
"marked": "^0.5.2",
"marked": "^0.6.2",
"polished": "^3.2.0",
"prop-types": "^15.7.2",
"react": "^16.8.6",

13
docs/src/pages/configurations/custom-webpack-config/index.md
View File

@ -197,14 +197,23 @@ module.exports = async ({ config, mode }) => {
};
```
Storybook uses the config returned from the above function to render your components in Storybook's "preview" iframe. Note that Storybook has a completely separate webpack config for its own UI (also referred to as the "manager"), so the customizations you make only applies to the rendering of your stories.
Storybook uses the config returned from the above function to render your components in Storybook's "preview" iframe. Note that Storybook has a completely separate webpack config for its own UI (also referred to as the "manager"), so the customizations you make only applies to the rendering of your stories, i.e. you can completely replace `config.module.rules` if you want.
Nevertheless, edit `config` with care. Make sure to preserve the following config options:
- entry
- output
> If your custom webpack config uses a loader that does not explicitly include specific file extensions via the `test` property, it is necessary to `exclude` the `.ejs` file extension from that loader.
Furthermore, `config` requires the `HtmlWebpackplugin` to generate the preview page, so rather than overwriting `config.plugins` you should probably append to it (or overwrite it with care), see [Issue #6020](https://github.com/storybooks/storybook/issues/6020) for examples:
```js
module.exports = async ({ config, mode }) => {
config.plugins.push(...)
return config;
}
```
Finally, if your custom webpack config uses a loader that does not explicitly include specific file extensions via the `test` property, it is necessary to `exclude` the `.ejs` file extension from that loader.
### Extend Mode (**Deprecated**)

2
docs/src/pages/configurations/typescript-config/index.md
View File

@ -13,7 +13,7 @@ This is a central reference for using Storybook with TypeScript.
yarn add -D typescript
yarn add -D awesome-typescript-loader
yarn add -D @types/storybook__react # typings
yarn add -D @storybook/addon-info react-docgen-typescript-webpack-plugin # optional but recommended
yarn add -D @storybook/addon-info react-docgen-typescript-loader # optional but recommended
yarn add -D jest "@types/jest" ts-jest #testing
```

2
docs/src/pages/guides/guide-svelte/index.md
View File

@ -14,7 +14,7 @@ npx -p @storybook/cli sb init --type svelte
## Manual setup
If you want to set up Storybook manually for your React project, this is the guide for you.
If you want to set up Storybook manually for your Svelte project, this is the guide for you.
> It is very important to remember that Svelte components are precompiled from `.svelte` or `.html` files to vanilla javascript, so there is no 'runtime'.

2
docs/src/versions/next.json
View File

@ -1 +1 @@
{"version":"5.1.0-alpha.21","info":{"plain":"### Features\n\n* Addon-centered: Fix horizontal scrolling overflow ([#6361](https://github.com/storybooks/storybook/pull/6361))\n* Angular: Support OnPush change detection for class-specified components ([#6360](https://github.com/storybooks/storybook/pull/6360))\n* Addon-storysource: Reuase clientApi when possible ([#6154](https://github.com/storybooks/storybook/pull/6154))\n\n### Bug Fixes\n\n* React-native: Fix backgrounds addon ([#6393](https://github.com/storybooks/storybook/pull/6393))\n* UI: Fix 'read full changelog' link on about page ([#6385](https://github.com/storybooks/storybook/pull/6385))\n* Addon-a11y: Fix addon initialization with 'makeDecorator' ([#6354](https://github.com/storybooks/storybook/pull/6354))\n* Typescript: Fix a11y build by adding hoist-non-react-statics ([#6348](https://github.com/storybooks/storybook/pull/6348))\n\n### Maintenance\n\n* Typescript: Use Babel instead of tsc ([#5109](https://github.com/storybooks/storybook/pull/5109))"}}
{"version":"5.1.0-alpha.24","info":{"plain":"### Maintenance\n\n- React-native: Remove channel dep from ondevice-notes ([#6431](https://github.com/storybooks/storybook/pull/6431))\n- Typescript: Migrate @storybook/components ([#6095](https://github.com/storybooks/storybook/pull/6095))"}}

8
docs/yarn.lock
View File

@ -6983,10 +6983,10 @@ markdown-table@^1.1.0:
resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-1.1.2.tgz#c78db948fa879903a41bce522e3b96f801c63786"
integrity sha512-NcWuJFHDA8V3wkDgR/j4+gZx+YQwstPgfQDV8ndUeWWzta3dnDTBxpVzqS9lkmJAuV5YX35lmyojl6HO5JXAgw==
marked@^0.5.2:
version "0.5.2"
resolved "https://registry.yarnpkg.com/marked/-/marked-0.5.2.tgz#3efdb27b1fd0ecec4f5aba362bddcd18120e5ba9"
integrity sha512-fdZvBa7/vSQIZCi4uuwo2N3q+7jJURpMVCcbaX0S1Mg65WZ5ilXvC67MviJAsdjqqgD+CEq4RKo5AYGgINkVAA==
marked@^0.6.2:
version "0.6.2"
resolved "https://registry.yarnpkg.com/marked/-/marked-0.6.2.tgz#c574be8b545a8b48641456ca1dbe0e37b6dccc1a"
integrity sha512-LqxwVH3P/rqKX4EKGz7+c2G9r98WeM/SW34ybhgNGhUQNKtf1GmmSkJ6cDGJ/t6tiyae49qRkpyTw2B9HOrgUA==
math-expression-evaluator@^1.2.14:
version "1.2.17"

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

@ -1,6 +1,6 @@
{
"name": "crna-kitchen-sink",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"private": true,
"main": "node_modules/expo/AppEntry.js",
"scripts": {
@ -24,12 +24,12 @@
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/plugin-transform-react-jsx-source": "^7.2.0",
"@storybook/addon-knobs": "5.1.0-alpha.21",
"@storybook/addon-ondevice-backgrounds": "5.1.0-alpha.21",
"@storybook/addon-ondevice-knobs": "5.1.0-alpha.21",
"@storybook/addon-ondevice-notes": "5.1.0-alpha.21",
"@storybook/addons": "5.1.0-alpha.21",
"@storybook/react-native": "5.1.0-alpha.21",
"@storybook/addon-knobs": "5.1.0-alpha.24",
"@storybook/addon-ondevice-backgrounds": "5.1.0-alpha.24",
"@storybook/addon-ondevice-knobs": "5.1.0-alpha.24",
"@storybook/addon-ondevice-notes": "5.1.0-alpha.24",
"@storybook/addons": "5.1.0-alpha.24",
"@storybook/react-native": "5.1.0-alpha.24",
"babel-loader": "^8.0.4",
"babel-plugin-module-resolver": "^3.2.0",
"babel-preset-expo": "^5.1.1",

4
examples-native/crna-kitchen-sink/storybook/stories/index.js
View File

@ -5,14 +5,12 @@ import { storiesOf, addDecorator, addParameters } from '@storybook/react-native'
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';
import { withKnobs } from '@storybook/addon-knobs';
import { withNotes } from '@storybook/addon-ondevice-notes';
import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
import knobsWrapper from './Knobs';
import Button from './Button';
import CenterView from './CenterView';
import Welcome from './Welcome';
addDecorator(withNotes);
addDecorator(withBackgrounds);
addParameters({
@ -26,7 +24,7 @@ storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo(
notes: `
# Markdown!\n
* List Item
* [List Item with Link](https://twitter.com/Charles_Mangwa)
* [List Item with Link](https://storybook.js.org)
`,
});

26
examples/angular-cli/package.json
View File

@ -1,6 +1,6 @@
{
"name": "angular-cli",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"private": true,
"license": "MIT",
"scripts": {
@ -34,18 +34,18 @@
"@angular-devkit/build-angular": "^0.13.4",
"@angular/cli": "^7.3.6",
"@angular/compiler-cli": "^7.2.6",
"@storybook/addon-actions": "5.1.0-alpha.21",
"@storybook/addon-backgrounds": "5.1.0-alpha.21",
"@storybook/addon-centered": "5.1.0-alpha.21",
"@storybook/addon-jest": "5.1.0-alpha.21",
"@storybook/addon-knobs": "5.1.0-alpha.21",
"@storybook/addon-links": "5.1.0-alpha.21",
"@storybook/addon-notes": "5.1.0-alpha.21",
"@storybook/addon-options": "5.1.0-alpha.21",
"@storybook/addon-storyshots": "5.1.0-alpha.21",
"@storybook/addon-storysource": "5.1.0-alpha.21",
"@storybook/addons": "5.1.0-alpha.21",
"@storybook/angular": "5.1.0-alpha.21",
"@storybook/addon-actions": "5.1.0-alpha.24",
"@storybook/addon-backgrounds": "5.1.0-alpha.24",
"@storybook/addon-centered": "5.1.0-alpha.24",
"@storybook/addon-jest": "5.1.0-alpha.24",
"@storybook/addon-knobs": "5.1.0-alpha.24",
"@storybook/addon-links": "5.1.0-alpha.24",
"@storybook/addon-notes": "5.1.0-alpha.24",
"@storybook/addon-options": "5.1.0-alpha.24",
"@storybook/addon-storyshots": "5.1.0-alpha.24",
"@storybook/addon-storysource": "5.1.0-alpha.24",
"@storybook/addons": "5.1.0-alpha.24",
"@storybook/angular": "5.1.0-alpha.24",
"@types/core-js": "^2.5.0",
"@types/jest": "^24.0.11",
"@types/node": "~11.11.0",

34
examples/cra-kitchen-sink/package.json
View File

@ -1,6 +1,6 @@
{
"name": "cra-kitchen-sink",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"private": true,
"scripts": {
"build": "react-scripts build",
@ -19,22 +19,22 @@
"react-lifecycles-compat": "^3.0.4"
},
"devDependencies": {
"@storybook/addon-a11y": "5.1.0-alpha.21",
"@storybook/addon-actions": "5.1.0-alpha.21",
"@storybook/addon-backgrounds": "5.1.0-alpha.21",
"@storybook/addon-centered": "5.1.0-alpha.21",
"@storybook/addon-events": "5.1.0-alpha.21",
"@storybook/addon-info": "5.1.0-alpha.21",
"@storybook/addon-jest": "5.1.0-alpha.21",
"@storybook/addon-knobs": "5.1.0-alpha.21",
"@storybook/addon-links": "5.1.0-alpha.21",
"@storybook/addon-notes": "5.1.0-alpha.21",
"@storybook/addon-options": "5.1.0-alpha.21",
"@storybook/addon-storyshots": "5.1.0-alpha.21",
"@storybook/addons": "5.1.0-alpha.21",
"@storybook/client-logger": "5.1.0-alpha.21",
"@storybook/react": "5.1.0-alpha.21",
"@storybook/theming": "5.1.0-alpha.21",
"@storybook/addon-a11y": "5.1.0-alpha.24",
"@storybook/addon-actions": "5.1.0-alpha.24",
"@storybook/addon-backgrounds": "5.1.0-alpha.24",
"@storybook/addon-centered": "5.1.0-alpha.24",
"@storybook/addon-events": "5.1.0-alpha.24",
"@storybook/addon-info": "5.1.0-alpha.24",
"@storybook/addon-jest": "5.1.0-alpha.24",
"@storybook/addon-knobs": "5.1.0-alpha.24",
"@storybook/addon-links": "5.1.0-alpha.24",
"@storybook/addon-notes": "5.1.0-alpha.24",
"@storybook/addon-options": "5.1.0-alpha.24",
"@storybook/addon-storyshots": "5.1.0-alpha.24",
"@storybook/addons": "5.1.0-alpha.24",
"@storybook/client-logger": "5.1.0-alpha.24",
"@storybook/react": "5.1.0-alpha.24",
"@storybook/theming": "5.1.0-alpha.24",
"react-scripts": "^2.1.8"
}
}

12
examples/cra-ts-kitchen-sink/package.json
View File

@ -1,6 +1,6 @@
{
"name": "cra-ts-kitchen-sink",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"private": true,
"scripts": {
"build-storybook": "build-storybook -s public",
@ -14,11 +14,11 @@
"react-dom": "^16.8.4"
},
"devDependencies": {
"@storybook/addon-actions": "5.1.0-alpha.21",
"@storybook/addon-info": "5.1.0-alpha.21",
"@storybook/addon-options": "5.1.0-alpha.21",
"@storybook/addons": "5.1.0-alpha.21",
"@storybook/react": "5.1.0-alpha.21",
"@storybook/addon-actions": "5.1.0-alpha.24",
"@storybook/addon-info": "5.1.0-alpha.24",
"@storybook/addon-options": "5.1.0-alpha.24",
"@storybook/addons": "5.1.0-alpha.24",
"@storybook/react": "5.1.0-alpha.24",
"@types/enzyme": "^3.9.0",
"@types/react": "^16.8.4",
"@types/react-dom": "^16.8.2",

26
examples/ember-cli/package.json
View File

@ -1,6 +1,6 @@
{
"name": "ember-example",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"private": true,
"scripts": {
"build": "ember build",
@ -15,18 +15,18 @@
},
"devDependencies": {
"@babel/core": "^7.3.4",
"@storybook/addon-a11y": "5.1.0-alpha.21",
"@storybook/addon-actions": "5.1.0-alpha.21",
"@storybook/addon-backgrounds": "5.1.0-alpha.21",
"@storybook/addon-centered": "5.1.0-alpha.21",
"@storybook/addon-knobs": "5.1.0-alpha.21",
"@storybook/addon-links": "5.1.0-alpha.21",
"@storybook/addon-notes": "5.1.0-alpha.21",
"@storybook/addon-options": "5.1.0-alpha.21",
"@storybook/addon-storysource": "5.1.0-alpha.21",
"@storybook/addon-viewport": "5.1.0-alpha.21",
"@storybook/addons": "5.1.0-alpha.21",
"@storybook/ember": "5.1.0-alpha.21",
"@storybook/addon-a11y": "5.1.0-alpha.24",
"@storybook/addon-actions": "5.1.0-alpha.24",
"@storybook/addon-backgrounds": "5.1.0-alpha.24",
"@storybook/addon-centered": "5.1.0-alpha.24",
"@storybook/addon-knobs": "5.1.0-alpha.24",
"@storybook/addon-links": "5.1.0-alpha.24",
"@storybook/addon-notes": "5.1.0-alpha.24",
"@storybook/addon-options": "5.1.0-alpha.24",
"@storybook/addon-storysource": "5.1.0-alpha.24",
"@storybook/addon-viewport": "5.1.0-alpha.24",
"@storybook/addons": "5.1.0-alpha.24",
"@storybook/ember": "5.1.0-alpha.24",
"babel-loader": "^8",
"broccoli-asset-rev": "^3.0.0",
"cross-env": "^5.2.0",

36
examples/html-kitchen-sink/package.json
View File

@ -1,6 +1,6 @@
{
"name": "html-kitchen-sink",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"private": true,
"description": "",
"keywords": [],
@ -14,23 +14,23 @@
"storybook": "start-storybook -p 9006"
},
"devDependencies": {
"@storybook/addon-a11y": "5.1.0-alpha.21",
"@storybook/addon-actions": "5.1.0-alpha.21",
"@storybook/addon-backgrounds": "5.1.0-alpha.21",
"@storybook/addon-centered": "5.1.0-alpha.21",
"@storybook/addon-events": "5.1.0-alpha.21",
"@storybook/addon-jest": "5.1.0-alpha.21",
"@storybook/addon-knobs": "5.1.0-alpha.21",
"@storybook/addon-links": "5.1.0-alpha.21",
"@storybook/addon-notes": "5.1.0-alpha.21",
"@storybook/addon-options": "5.1.0-alpha.21",
"@storybook/addon-storyshots": "5.1.0-alpha.21",
"@storybook/addon-storysource": "5.1.0-alpha.21",
"@storybook/addon-viewport": "5.1.0-alpha.21",
"@storybook/addons": "5.1.0-alpha.21",
"@storybook/core": "5.1.0-alpha.21",
"@storybook/core-events": "5.1.0-alpha.21",
"@storybook/html": "5.1.0-alpha.21",
"@storybook/addon-a11y": "5.1.0-alpha.24",
"@storybook/addon-actions": "5.1.0-alpha.24",
"@storybook/addon-backgrounds": "5.1.0-alpha.24",
"@storybook/addon-centered": "5.1.0-alpha.24",
"@storybook/addon-events": "5.1.0-alpha.24",
"@storybook/addon-jest": "5.1.0-alpha.24",
"@storybook/addon-knobs": "5.1.0-alpha.24",
"@storybook/addon-links": "5.1.0-alpha.24",
"@storybook/addon-notes": "5.1.0-alpha.24",
"@storybook/addon-options": "5.1.0-alpha.24",
"@storybook/addon-storyshots": "5.1.0-alpha.24",
"@storybook/addon-storysource": "5.1.0-alpha.24",
"@storybook/addon-viewport": "5.1.0-alpha.24",
"@storybook/addons": "5.1.0-alpha.24",
"@storybook/core": "5.1.0-alpha.24",
"@storybook/core-events": "5.1.0-alpha.24",
"@storybook/html": "5.1.0-alpha.24",
"eventemitter3": "^3.1.0",
"format-json": "^1.0.3",
"global": "^4.3.2"

14
examples/marko-cli/package.json
View File

@ -1,6 +1,6 @@
{
"name": "marko-cli",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"private": true,
"description": "Demo of how to build an app using marko-starter",
"repository": {
@ -24,12 +24,12 @@
"marko-starter": "^2.0.4"
},
"devDependencies": {
"@storybook/addon-actions": "5.1.0-alpha.21",
"@storybook/addon-knobs": "5.1.0-alpha.21",
"@storybook/addon-options": "5.1.0-alpha.21",
"@storybook/addon-storysource": "5.1.0-alpha.21",
"@storybook/addons": "5.1.0-alpha.21",
"@storybook/marko": "5.1.0-alpha.21",
"@storybook/addon-actions": "5.1.0-alpha.24",
"@storybook/addon-knobs": "5.1.0-alpha.24",
"@storybook/addon-options": "5.1.0-alpha.24",
"@storybook/addon-storysource": "5.1.0-alpha.24",
"@storybook/addons": "5.1.0-alpha.24",
"@storybook/marko": "5.1.0-alpha.24",
"prettier": "^1.16.4",
"webpack": "^4.28.0"
}

26
examples/mithril-kitchen-sink/package.json
View File

@ -1,6 +1,6 @@
{
"name": "mithril-example",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"private": true,
"scripts": {
"build-storybook": "build-storybook",
@ -11,18 +11,18 @@
"mithril": "^1.1.6"
},
"devDependencies": {
"@storybook/addon-actions": "5.1.0-alpha.21",
"@storybook/addon-backgrounds": "5.1.0-alpha.21",
"@storybook/addon-centered": "5.1.0-alpha.21",
"@storybook/addon-knobs": "5.1.0-alpha.21",
"@storybook/addon-links": "5.1.0-alpha.21",
"@storybook/addon-notes": "5.1.0-alpha.21",
"@storybook/addon-options": "5.1.0-alpha.21",
"@storybook/addon-storyshots": "5.1.0-alpha.21",
"@storybook/addon-storysource": "5.1.0-alpha.21",
"@storybook/addon-viewport": "5.1.0-alpha.21",
"@storybook/addons": "5.1.0-alpha.21",
"@storybook/mithril": "5.1.0-alpha.21",
"@storybook/addon-actions": "5.1.0-alpha.24",
"@storybook/addon-backgrounds": "5.1.0-alpha.24",
"@storybook/addon-centered": "5.1.0-alpha.24",
"@storybook/addon-knobs": "5.1.0-alpha.24",
"@storybook/addon-links": "5.1.0-alpha.24",
"@storybook/addon-notes": "5.1.0-alpha.24",
"@storybook/addon-options": "5.1.0-alpha.24",
"@storybook/addon-storyshots": "5.1.0-alpha.24",
"@storybook/addon-storysource": "5.1.0-alpha.24",
"@storybook/addon-viewport": "5.1.0-alpha.24",
"@storybook/addons": "5.1.0-alpha.24",
"@storybook/mithril": "5.1.0-alpha.24",
"webpack": "^4.28.0"
}
}

2
examples/official-storybook/config.js
View File

@ -121,7 +121,7 @@ function loadStories() {
req = require.context('../../lib/ui/src', true, /\.stories\.js$/);
importAll(req);
req = require.context('../../lib/components/src', true, /\.stories\.js$/);
req = require.context('../../lib/components/src', true, /\.stories\.tsx?$/);
importAll(req);
req = require.context('./stories', true, /\.stories\.js$/);

48
examples/official-storybook/package.json
View File

@ -1,6 +1,6 @@
{
"name": "official-storybook",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"private": true,
"scripts": {
"build-storybook": "build-storybook -c ./ -s built-storybooks",
@ -13,29 +13,29 @@
"storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ -s built-storybooks --no-dll"
},
"devDependencies": {
"@storybook/addon-a11y": "5.1.0-alpha.21",
"@storybook/addon-actions": "5.1.0-alpha.21",
"@storybook/addon-backgrounds": "5.1.0-alpha.21",
"@storybook/addon-centered": "5.1.0-alpha.21",
"@storybook/addon-cssresources": "5.1.0-alpha.21",
"@storybook/addon-events": "5.1.0-alpha.21",
"@storybook/addon-graphql": "5.1.0-alpha.21",
"@storybook/addon-info": "5.1.0-alpha.21",
"@storybook/addon-jest": "5.1.0-alpha.21",
"@storybook/addon-knobs": "5.1.0-alpha.21",
"@storybook/addon-links": "5.1.0-alpha.21",
"@storybook/addon-notes": "5.1.0-alpha.21",
"@storybook/addon-options": "5.1.0-alpha.21",
"@storybook/addon-storyshots": "5.1.0-alpha.21",
"@storybook/addon-storyshots-puppeteer": "5.1.0-alpha.21",
"@storybook/addon-storysource": "5.1.0-alpha.21",
"@storybook/addon-viewport": "5.1.0-alpha.21",
"@storybook/addons": "5.1.0-alpha.21",
"@storybook/components": "5.1.0-alpha.21",
"@storybook/core-events": "5.1.0-alpha.21",
"@storybook/node-logger": "5.1.0-alpha.21",
"@storybook/react": "5.1.0-alpha.21",
"@storybook/theming": "5.1.0-alpha.21",
"@storybook/addon-a11y": "5.1.0-alpha.24",
"@storybook/addon-actions": "5.1.0-alpha.24",
"@storybook/addon-backgrounds": "5.1.0-alpha.24",
"@storybook/addon-centered": "5.1.0-alpha.24",
"@storybook/addon-cssresources": "5.1.0-alpha.24",
"@storybook/addon-events": "5.1.0-alpha.24",
"@storybook/addon-graphql": "5.1.0-alpha.24",
"@storybook/addon-info": "5.1.0-alpha.24",
"@storybook/addon-jest": "5.1.0-alpha.24",
"@storybook/addon-knobs": "5.1.0-alpha.24",
"@storybook/addon-links": "5.1.0-alpha.24",
"@storybook/addon-notes": "5.1.0-alpha.24",
"@storybook/addon-options": "5.1.0-alpha.24",
"@storybook/addon-storyshots": "5.1.0-alpha.24",
"@storybook/addon-storyshots-puppeteer": "5.1.0-alpha.24",
"@storybook/addon-storysource": "5.1.0-alpha.24",
"@storybook/addon-viewport": "5.1.0-alpha.24",
"@storybook/addons": "5.1.0-alpha.24",
"@storybook/components": "5.1.0-alpha.24",
"@storybook/core-events": "5.1.0-alpha.24",
"@storybook/node-logger": "5.1.0-alpha.24",
"@storybook/react": "5.1.0-alpha.24",
"@storybook/theming": "5.1.0-alpha.24",
"cors": "^2.8.5",
"cross-env": "^5.2.0",
"enzyme-to-json": "^3.3.5",

16
examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
View File

@ -247,6 +247,9 @@ exports[`Storyshots Basics|Brand/StorybookLogo normal 1`] = `
viewBox="0 0 200 40"
width="200px"
>
<title>
Storybook logo
</title>
<defs>
<path
d="M1.2 36.9L0 3.9c0-1.1.8-2 1.9-2.1l28-1.8a2 2 0 0 1 2.2 1.9 2 2 0 0 1 0 .1v36a2 2 0 0 1-2 2 2 2 0 0 1-.1 0L3.2 38.8a2 2 0 0 1-2-2z"
@ -5827,6 +5830,7 @@ exports[`Storyshots UI|Settings/SettingsFooter basic 1`] = `
<a
class="emotion-1"
href="https://storybook.js.org"
target="_blank"
>
<span
class="emotion-0"
@ -5837,6 +5841,7 @@ exports[`Storyshots UI|Settings/SettingsFooter basic 1`] = `
<a
class="emotion-1"
href="https://github.com/storybooks/storybook"
target="_blank"
>
<span
class="emotion-0"
@ -5847,6 +5852,7 @@ exports[`Storyshots UI|Settings/SettingsFooter basic 1`] = `
<a
class="emotion-1"
href="https://storybook.js.org/support"
target="_blank"
>
<span
class="emotion-0"
@ -7351,6 +7357,7 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
<a
class="emotion-91"
href="https://storybook.js.org"
target="_blank"
>
<span
class="emotion-90"
@ -7361,6 +7368,7 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
<a
class="emotion-91"
href="https://github.com/storybooks/storybook"
target="_blank"
>
<span
class="emotion-90"
@ -7371,6 +7379,7 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
<a
class="emotion-91"
href="https://storybook.js.org/support"
target="_blank"
>
<span
class="emotion-90"
@ -7464,6 +7473,7 @@ exports[`Storyshots UI|Sidebar/ListItemIcon all 1`] = `
.emotion-3 {
color: #333333;
font-weight: 400;
}
.emotion-6 {
@ -7551,6 +7561,7 @@ exports[`Storyshots UI|Sidebar/ListItemIcon all 1`] = `
.emotion-3 {
color: #333333;
font-weight: 400;
}
.emotion-6 {
@ -8395,7 +8406,6 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
class="emotion-0"
height="40px"
role="img"
title="Storybook"
viewBox="0 0 200 40"
width="200px"
>
@ -9828,7 +9838,6 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
class="emotion-0"
height="40px"
role="img"
title="Storybook"
viewBox="0 0 200 40"
width="200px"
>
@ -11346,7 +11355,6 @@ exports[`Storyshots UI|Sidebar/SidebarHeading menuHighlighted 1`] = `
class="emotion-0"
height="40px"
role="img"
title="Storybook"
viewBox="0 0 200 40"
width="200px"
>
@ -11987,7 +11995,6 @@ exports[`Storyshots UI|Sidebar/SidebarHeading standard 1`] = `
class="emotion-0"
height="40px"
role="img"
title="Storybook"
viewBox="0 0 200 40"
width="200px"
>
@ -12325,7 +12332,6 @@ exports[`Storyshots UI|Sidebar/SidebarHeading standardNoLink 1`] = `
class="emotion-0"
height="40px"
role="img"
title="Storybook"
viewBox="0 0 200 40"
width="200px"
>

20
examples/polymer-cli/package.json
View File

@ -1,6 +1,6 @@
{
"name": "polymer-cli",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"private": true,
"scripts": {
"build-storybook": "build-storybook",
@ -10,15 +10,15 @@
},
"dependencies": {
"@polymer/polymer": "^2.6.0",
"@storybook/addon-actions": "5.1.0-alpha.21",
"@storybook/addon-backgrounds": "5.1.0-alpha.21",
"@storybook/addon-knobs": "5.1.0-alpha.21",
"@storybook/addon-links": "5.1.0-alpha.21",
"@storybook/addon-notes": "5.1.0-alpha.21",
"@storybook/addon-options": "5.1.0-alpha.21",
"@storybook/addon-storysource": "5.1.0-alpha.21",
"@storybook/addon-viewport": "5.1.0-alpha.21",
"@storybook/polymer": "5.1.0-alpha.21",
"@storybook/addon-actions": "5.1.0-alpha.24",
"@storybook/addon-backgrounds": "5.1.0-alpha.24",
"@storybook/addon-knobs": "5.1.0-alpha.24",
"@storybook/addon-links": "5.1.0-alpha.24",
"@storybook/addon-notes": "5.1.0-alpha.24",
"@storybook/addon-options": "5.1.0-alpha.24",
"@storybook/addon-storysource": "5.1.0-alpha.24",
"@storybook/addon-viewport": "5.1.0-alpha.24",
"@storybook/polymer": "5.1.0-alpha.24",
"@webcomponents/webcomponentsjs": "^1.2.0",
"global": "^4.3.2",
"lit-html": "^1.0.0",

26
examples/preact-kitchen-sink/package.json
View File

@ -1,6 +1,6 @@
{
"name": "preact-example",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"private": true,
"scripts": {
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@ -16,18 +16,18 @@
"devDependencies": {
"@babel/core": "^7.3.4",
"@babel/plugin-transform-runtime": "^7.2.0",
"@storybook/addon-actions": "5.1.0-alpha.21",
"@storybook/addon-backgrounds": "5.1.0-alpha.21",
"@storybook/addon-centered": "5.1.0-alpha.21",
"@storybook/addon-knobs": "5.1.0-alpha.21",
"@storybook/addon-links": "5.1.0-alpha.21",
"@storybook/addon-notes": "5.1.0-alpha.21",
"@storybook/addon-options": "5.1.0-alpha.21",
"@storybook/addon-storyshots": "5.1.0-alpha.21",
"@storybook/addon-storysource": "5.1.0-alpha.21",
"@storybook/addon-viewport": "5.1.0-alpha.21",
"@storybook/addons": "5.1.0-alpha.21",
"@storybook/preact": "5.1.0-alpha.21",
"@storybook/addon-actions": "5.1.0-alpha.24",
"@storybook/addon-backgrounds": "5.1.0-alpha.24",
"@storybook/addon-centered": "5.1.0-alpha.24",
"@storybook/addon-knobs": "5.1.0-alpha.24",
"@storybook/addon-links": "5.1.0-alpha.24",
"@storybook/addon-notes": "5.1.0-alpha.24",
"@storybook/addon-options": "5.1.0-alpha.24",
"@storybook/addon-storyshots": "5.1.0-alpha.24",
"@storybook/addon-storysource": "5.1.0-alpha.24",
"@storybook/addon-viewport": "5.1.0-alpha.24",
"@storybook/addons": "5.1.0-alpha.24",
"@storybook/preact": "5.1.0-alpha.24",
"babel-loader": "^8.0.4",
"cross-env": "^5.2.0",
"file-loader": "^3.0.1",

26
examples/riot-kitchen-sink/package.json
View File

@ -1,6 +1,6 @@
{
"name": "riot-example",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"private": true,
"scripts": {
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@ -16,18 +16,18 @@
},
"devDependencies": {
"@babel/core": "^7.3.4",
"@storybook/addon-actions": "5.1.0-alpha.21",
"@storybook/addon-backgrounds": "5.1.0-alpha.21",
"@storybook/addon-centered": "5.1.0-alpha.21",
"@storybook/addon-knobs": "5.1.0-alpha.21",
"@storybook/addon-links": "5.1.0-alpha.21",
"@storybook/addon-notes": "5.1.0-alpha.21",
"@storybook/addon-options": "5.1.0-alpha.21",
"@storybook/addon-storyshots": "5.1.0-alpha.21",
"@storybook/addon-storysource": "5.1.0-alpha.21",
"@storybook/addon-viewport": "5.1.0-alpha.21",
"@storybook/addons": "5.1.0-alpha.21",
"@storybook/riot": "5.1.0-alpha.21",
"@storybook/addon-actions": "5.1.0-alpha.24",
"@storybook/addon-backgrounds": "5.1.0-alpha.24",
"@storybook/addon-centered": "5.1.0-alpha.24",
"@storybook/addon-knobs": "5.1.0-alpha.24",
"@storybook/addon-links": "5.1.0-alpha.24",
"@storybook/addon-notes": "5.1.0-alpha.24",
"@storybook/addon-options": "5.1.0-alpha.24",
"@storybook/addon-storyshots": "5.1.0-alpha.24",
"@storybook/addon-storysource": "5.1.0-alpha.24",
"@storybook/addon-viewport": "5.1.0-alpha.24",
"@storybook/addons": "5.1.0-alpha.24",
"@storybook/riot": "5.1.0-alpha.24",
"babel-loader": "^8.0.4",
"cross-env": "^5.2.0",
"file-loader": "^3.0.1",

26
examples/svelte-kitchen-sink/package.json
View File

@ -1,6 +1,6 @@
{
"name": "svelte-example",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"private": true,
"scripts": {
"build-storybook": "build-storybook -s public",
@ -11,17 +11,17 @@
"global": "^4.3.2"
},
"devDependencies": {
"@storybook/addon-actions": "5.1.0-alpha.21",
"@storybook/addon-backgrounds": "5.1.0-alpha.21",
"@storybook/addon-centered": "5.1.0-alpha.21",
"@storybook/addon-knobs": "5.1.0-alpha.21",
"@storybook/addon-links": "5.1.0-alpha.21",
"@storybook/addon-notes": "5.1.0-alpha.21",
"@storybook/addon-options": "5.1.0-alpha.21",
"@storybook/addon-storyshots": "5.1.0-alpha.21",
"@storybook/addon-storysource": "5.1.0-alpha.21",
"@storybook/addon-viewport": "5.1.0-alpha.21",
"@storybook/addons": "5.1.0-alpha.21",
"@storybook/svelte": "5.1.0-alpha.21"
"@storybook/addon-actions": "5.1.0-alpha.24",
"@storybook/addon-backgrounds": "5.1.0-alpha.24",
"@storybook/addon-centered": "5.1.0-alpha.24",
"@storybook/addon-knobs": "5.1.0-alpha.24",
"@storybook/addon-links": "5.1.0-alpha.24",
"@storybook/addon-notes": "5.1.0-alpha.24",
"@storybook/addon-options": "5.1.0-alpha.24",
"@storybook/addon-storyshots": "5.1.0-alpha.24",
"@storybook/addon-storysource": "5.1.0-alpha.24",
"@storybook/addon-viewport": "5.1.0-alpha.24",
"@storybook/addons": "5.1.0-alpha.24",
"@storybook/svelte": "5.1.0-alpha.24"
}
}

26
examples/vue-kitchen-sink/package.json
View File

@ -1,6 +1,6 @@
{
"name": "vue-example",
"version": "5.1.0-alpha.21",
"version": "5.1.0-alpha.24",
"private": true,
"scripts": {
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@ -15,18 +15,18 @@
},
"devDependencies": {
"@babel/core": "^7.3.4",
"@storybook/addon-actions": "5.1.0-alpha.21",
"@storybook/addon-backgrounds": "5.1.0-alpha.21",
"@storybook/addon-centered": "5.1.0-alpha.21",
"@storybook/addon-knobs": "5.1.0-alpha.21",
"@storybook/addon-links": "5.1.0-alpha.21",
"@storybook/addon-notes": "5.1.0-alpha.21",
"@storybook/addon-options": "5.1.0-alpha.21",
"@storybook/addon-storyshots": "5.1.0-alpha.21",
"@storybook/addon-storysource": "5.1.0-alpha.21",
"@storybook/addon-viewport": "5.1.0-alpha.21",
"@storybook/addons": "5.1.0-alpha.21",
"@storybook/vue": "5.1.0-alpha.21",
"@storybook/addon-actions": "5.1.0-alpha.24",
"@storybook/addon-backgrounds": "5.1.0-alpha.24",
"@storybook/addon-centered": "5.1.0-alpha.24",
"@storybook/addon-knobs": "5.1.0-alpha.24",
"@storybook/addon-links": "5.1.0-alpha.24",
"@storybook/addon-notes": "5.1.0-alpha.24",
"@storybook/addon-options": "5.1.0-alpha.24",
"@storybook/addon-storyshots": "5.1.0-alpha.24",
"@storybook/addon-storysource": "5.1.0-alpha.24",
"@storybook/addon-viewport": "5.1.0-alpha.24",
"@storybook/addons": "5.1.0-alpha.24",
"@storybook/vue": "5.1.0-alpha.24",
"babel-core": "^7.0.0-bridge.0",
"babel-loader": "^8.0.5",
"cross-env": "^5.2.0",

Some files were not shown because too many files have changed in this diff Show More