mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 22:21:27 +08:00
Merge branch 'next' into tech/cleanup-unused-dependencies
# Conflicts: # addons/a11y/package.json # addons/cssresources/package.json # addons/storyshots/storyshots-core/package.json # app/angular/package.json # app/ember/package.json # app/html/package.json # app/marko/package.json # app/mithril/package.json # app/polymer/package.json # app/preact/package.json # app/riot/package.json # app/svelte/package.json # app/vue/package.json # lib/components/package.json # lib/core/package.json # lib/theming/package.json # lib/ui/package.json # yarn.lock
This commit is contained in:
Norbert de Langen
commit
564ddb8a7f
114
CHANGELOG.md
114
CHANGELOG.md
@ -1,3 +1,117 @@
|
||||
## 5.0.0-rc.5 (February 23, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* UI: Fix `/` search hotkey so it doesn't type into the input ([#5702](https://github.com/storybooks/storybook/pull/5702))
|
||||
* Addon-a11y: Fix a11y setup being undefined ([#5724](https://github.com/storybooks/storybook/pull/5724))
|
||||
* UI: Fix duplicate theming packages ([#5722](https://github.com/storybooks/storybook/pull/5722))
|
||||
* Core: Clean up debug logging ([#5705](https://github.com/storybooks/storybook/pull/5705))
|
||||
* UI: Minor addon ux tweaks ([#5712](https://github.com/storybooks/storybook/pull/5712))
|
||||
* Addon-a11y: Fix story scrolling ([#5713](https://github.com/storybooks/storybook/pull/5713))
|
||||
* UI: Fix mobile styling ([#5709](https://github.com/storybooks/storybook/pull/5709))
|
||||
* UI: Fix tooltip bugs ([#5692](https://github.com/storybooks/storybook/pull/5692))
|
||||
* UI: Fix toolbar separators ([#5711](https://github.com/storybooks/storybook/pull/5711))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* Typescript: migrate addon-backgrounds ([#5535](https://github.com/storybooks/storybook/pull/5535))
|
||||
* Typescript: fix typings for addon-backgrounds ([#5730](https://github.com/storybooks/storybook/pull/5730))
|
||||
|
||||
## 5.0.0-rc.4 (February 21, 2019)
|
||||
|
||||
### Features
|
||||
|
||||
* UI: Handle prerelease versions in version check ([#5641](https://github.com/storybooks/storybook/pull/5641))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* UI: Fix scrollbar persistence ([#5689](https://github.com/storybooks/storybook/pull/5689))
|
||||
* UI: Fix keyboard shortcuts of toggleNav & togglePanel ([#5677](https://github.com/storybooks/storybook/pull/5677))
|
||||
* Core: Fix singleton module issue for manager & theme ([#5679](https://github.com/storybooks/storybook/pull/5679))
|
||||
* Addon-storysource: Fix source not updating ([#5672](https://github.com/storybooks/storybook/pull/5672))
|
||||
* Core: Fix broken error reporting ([#5678](https://github.com/storybooks/storybook/pull/5678))
|
||||
* Addon-info: Compare component name to story name, not story fn ([#5649](https://github.com/storybooks/storybook/pull/5649))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* CLI: Cleanup version notice ([#5699](https://github.com/storybooks/storybook/pull/5699))
|
||||
* Core: Fix story fn consistency ([#5669](https://github.com/storybooks/storybook/pull/5669))
|
||||
|
||||
## 4.1.13 (February 21, 2019)
|
||||
|
||||
### Maintenance
|
||||
|
||||
* CLI: Cleanup version notice ([#5699](https://github.com/storybooks/storybook/pull/5699))
|
||||
* Docs: Use static versions.json file instead of hacking one in ([#5675](https://github.com/storybooks/storybook/pull/5675))
|
||||
|
||||
## 5.0.0-rc.3 (February 19, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* UI: Styling bug fixes, story updates, and more QA ([#5650](https://github.com/storybooks/storybook/pull/5650))
|
||||
* UI: V5 style refinements ([#5562](https://github.com/storybooks/storybook/pull/5562))
|
||||
|
||||
## 5.0.0-rc.2 (February 19, 2019)
|
||||
|
||||
### Features
|
||||
|
||||
* UI: Allow collapsing active story and use separate expansion for filtered ([#5625](https://github.com/storybooks/storybook/pull/5625))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-a11y: Fix tab highlighting ([#5646](https://github.com/storybooks/storybook/pull/5646))
|
||||
* Addon-jest: Fix event subscription ([#5644](https://github.com/storybooks/storybook/pull/5644))
|
||||
* UI: Handle old versions in version check ([#5638](https://github.com/storybooks/storybook/pull/5638))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* UI: Fix some prop warnings ([#5635](https://github.com/storybooks/storybook/pull/5635))
|
||||
* UI: Use the correct props to start the tooltip open ([#5610](https://github.com/storybooks/storybook/pull/5610))
|
||||
|
||||
## 4.1.12 (February 18, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-google-analytics: Add missing `register.js` file ([#5379](https://github.com/storybooks/storybook/pull/5379))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
* Update modal manager for rn 0.58 support ([#5581](https://github.com/storybooks/storybook/pull/5581))
|
||||
|
||||
## 5.0.0-rc.1 (February 16, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Core: Add missing babel-preset-env dependency ([#5617](https://github.com/storybooks/storybook/pull/5617))
|
||||
|
||||
## 5.0.0-rc.0 (February 16, 2019)
|
||||
|
||||
Welcome to Storybook 5 (SB5) with a beautiful new user interface including:
|
||||
|
||||
* Navigation sidebar redesign
|
||||
* New canvas toolbar
|
||||
* Customizable keyboard shortcuts
|
||||
* Improved search
|
||||
* Version update notifications
|
||||
|
||||
SB5 also includes a new URL structure, expanded addon API, and many more features and architectural improvements.
|
||||
|
||||
See [the RC announcement](https://gist.github.com/shilman/0332090b63f1798a58ed8d85db44f4b4) for more details!
|
||||
|
||||
## 5.0.0-beta.4 (February 15, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* UI: Fix mobile view ([#5603](https://github.com/storybooks/storybook/pull/5603))
|
||||
* UI: Misc warning fixes ([#5601](https://github.com/storybooks/storybook/pull/5601))
|
||||
* UI: Fix ie 11 ([#5599](https://github.com/storybooks/storybook/pull/5599))
|
||||
* CLI: Fix for when outputDir is an absolute path ([#5573](https://github.com/storybooks/storybook/pull/5573))
|
||||
* CLI: Avoid false-negative checks for port ([#5565](https://github.com/storybooks/storybook/pull/5565))
|
||||
* Core: Prioritise programatic configuration ([#5564](https://github.com/storybooks/storybook/pull/5564))
|
||||
* UI: FIX clear search ([#5550](https://github.com/storybooks/storybook/pull/5550))
|
||||
* Core: Transpile safe-eval package ([#5498](https://github.com/storybooks/storybook/pull/5498))
|
||||
* UI: Add default backgrounds to official example ([#5585](https://github.com/storybooks/storybook/pull/5585))
|
||||
|
||||
## 5.0.0-beta.3 (February 13, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
29
MIGRATION.md
29
MIGRATION.md
@ -2,6 +2,7 @@
|
||||
|
||||
- [From version 4.1.x to 5.0.x](#from-version-41x-to-50x)
|
||||
- [Webpack config simplification](#webpack-config-simplification)
|
||||
- [Story hierarchy defaults](#story-hierarchy-defaults)
|
||||
- [From version 4.0.x to 4.1.x](#from-version-40x-to-41x)
|
||||
- [Private addon config](#private-addon-config)
|
||||
- [React 15.x](#react-15x)
|
||||
@ -59,6 +60,34 @@ In contrast, the 4.x configuration function accepted either two or three argumen
|
||||
|
||||
Please see the [current custom webpack documentation](https://github.com/storybooks/storybook/blob/next/docs/src/pages/configurations/custom-webpack-config/index.md) for more information on custom webpack config.
|
||||
|
||||
## Story hierarchy defaults
|
||||
|
||||
Storybook's UI contains a hierarchical tree of stories that can be configured by `hierarchySeparator` and `hierarchyRootSeparator` [options](./addons/options/README.md).
|
||||
|
||||
In Storybook 4.x the values defaulted to `null` for both of these options, so that there would be no hierarchy by default.
|
||||
|
||||
In 5.0, we now provide recommended defaults:
|
||||
|
||||
```js
|
||||
{
|
||||
hierarchyRootSeparator: '|',
|
||||
hierarchySeparator: /\/|\./,
|
||||
}
|
||||
```
|
||||
|
||||
This means if you use the characters { `|`, `/`, `.` } in your story kinds it will triggger the story hierarchy to appear. For example `storiesOf('UI|Widgets/Basics/Button')` will create a story root called `UI` containing a `Widgets/Basics` group, containing a `Button` component.
|
||||
|
||||
If you wish to opt-out of this new behavior and restore the flat UI, simply set them back to `null` in your storybook config, or remove { `|`, `/`, `.` } from your story kinds:
|
||||
|
||||
```js
|
||||
addParameters({
|
||||
options: {
|
||||
hierarchyRootSeparator: null,
|
||||
hierarchySeparator: null,
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## From version 4.0.x to 4.1.x
|
||||
|
||||
There are are a few migrations you should be aware of in 4.1, including one unintentionally breaking change for advanced addon usage.
|
||||
|
||||
@ -131,10 +131,10 @@ See [Addon / Framework Support Table](ADDONS_SUPPORT.md)
|
||||
|
||||
We have a badge! Link it to your live Storybook example.
|
||||
|
||||
|
||||
|
||||
|
||||
```md
|
||||
[](link to site)
|
||||
[](link to site)
|
||||
```
|
||||
|
||||
If you're looking for material to use in your presentation about storybook, like logo's video material and the colors we use etc, you can find all of that at our [press repo](https://github.com/storybooks/press).
|
||||
|
||||
@ -58,10 +58,11 @@ addParameters({
|
||||
a11y: {
|
||||
// ... axe options
|
||||
element: '#root', // optional selector which element to inspect
|
||||
config: {} // axe-core configurationOptions (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#parameters-1)
|
||||
options: {} // axe-core optionsParameter (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter)
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
storiesOf('button', module)
|
||||
.add('Accessible', () => (
|
||||
<button style={{ backgroundColor: 'black', color: 'white', }}>
|
||||
|
||||
@ -16,7 +16,8 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/storybooks/storybook.git"
|
||||
"url": "git+https://github.com/storybooks/storybook.git",
|
||||
"directory": "addons/a11y"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
@ -36,7 +37,7 @@
|
||||
"global": "^4.3.2",
|
||||
"memoizerific": "^1.11.3",
|
||||
"prop-types": "^15.6.2",
|
||||
"react": "^16.8.1",
|
||||
"react": "^16.8.2",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"publishConfig": {
|
||||
|
||||
@ -18,13 +18,16 @@ const ColorIcon = styled.span(
|
||||
},
|
||||
({ filter }) => ({
|
||||
filter: filter === 'mono' ? 'grayscale(100%)' : `url('#${filter}')`,
|
||||
}),
|
||||
({ theme }) => ({
|
||||
boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
|
||||
})
|
||||
);
|
||||
|
||||
class ColorBlindness extends Component {
|
||||
state = {
|
||||
expanded: false,
|
||||
filter: false,
|
||||
filter: null,
|
||||
};
|
||||
|
||||
setFilter = filter => {
|
||||
|
||||
@ -17,13 +17,6 @@ const List = styled.div(({ theme }) => ({
|
||||
}));
|
||||
|
||||
const Item = styled.button(
|
||||
({ active, theme }) =>
|
||||
active
|
||||
? {
|
||||
opacity: 1,
|
||||
borderBottom: `3px solid ${theme.color.secondary}`,
|
||||
}
|
||||
: {},
|
||||
({ theme }) => ({
|
||||
textDecoration: 'none',
|
||||
padding: '10px 15px',
|
||||
@ -41,7 +34,14 @@ const Item = styled.button(
|
||||
outline: '0 none',
|
||||
borderBottom: `3px solid ${theme.color.secondary}`,
|
||||
},
|
||||
})
|
||||
}),
|
||||
({ active, theme }) =>
|
||||
active
|
||||
? {
|
||||
opacity: 1,
|
||||
borderBottom: `3px solid ${theme.color.secondary}`,
|
||||
}
|
||||
: {}
|
||||
);
|
||||
|
||||
class Tabs extends Component {
|
||||
|
||||
@ -9,7 +9,7 @@ import EVENTS, { PARAM_KEY } from './constants';
|
||||
|
||||
const channel = addons.getChannel();
|
||||
let progress = Promise.resolve();
|
||||
let options;
|
||||
let setup = {};
|
||||
|
||||
const getElement = () => {
|
||||
const storyRoot = document.getElementById('story-root');
|
||||
@ -24,13 +24,20 @@ const report = input => {
|
||||
channel.emit(EVENTS.RESULT, input);
|
||||
};
|
||||
|
||||
const run = o => {
|
||||
const run = (c, o) => {
|
||||
progress = progress.then(() => {
|
||||
axe.reset();
|
||||
if (o) {
|
||||
axe.configure(o);
|
||||
if (c) {
|
||||
axe.configure(c);
|
||||
}
|
||||
return axe.run(getElement()).then(report);
|
||||
return axe
|
||||
.run(
|
||||
getElement(),
|
||||
o || {
|
||||
restoreScroll: true,
|
||||
}
|
||||
)
|
||||
.then(report);
|
||||
});
|
||||
};
|
||||
|
||||
@ -41,14 +48,14 @@ export const withA11Y = makeDecorator({
|
||||
allowDeprecatedUsage: false,
|
||||
|
||||
wrapper: (getStory, context, opt) => {
|
||||
options = opt.parameters || opt.options;
|
||||
setup = opt.parameters || opt.options || {};
|
||||
|
||||
return getStory(context);
|
||||
},
|
||||
});
|
||||
|
||||
channel.on(STORY_RENDERED, () => run(options));
|
||||
channel.on(EVENTS.REQUEST, () => run(options));
|
||||
channel.on(STORY_RENDERED, () => run(setup.config, setup.options));
|
||||
channel.on(EVENTS.REQUEST, () => run(setup.config, setup.options));
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
module.hot.decline();
|
||||
@ -63,7 +70,7 @@ export const checkA11y = deprecate(
|
||||
// TODO: REMOVE at v6.0.0
|
||||
export const configureA11y = deprecate(
|
||||
config => {
|
||||
options = config;
|
||||
setup = config;
|
||||
},
|
||||
stripIndents`
|
||||
configureA11y is deprecated, please configure addon-a11y using the addParameter api:
|
||||
|
||||
@ -11,7 +11,8 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"directory": "addons/actions"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
@ -29,7 +30,7 @@
|
||||
"global": "^4.3.2",
|
||||
"lodash": "^4.17.11",
|
||||
"prop-types": "^15.6.2",
|
||||
"react": "^16.8.1",
|
||||
"react": "^16.8.2",
|
||||
"react-inspector": "^2.3.0",
|
||||
"uuid": "^3.3.2"
|
||||
},
|
||||
@ -37,7 +38,7 @@
|
||||
"access": "public"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/lodash": "^4.14.120",
|
||||
"@types/lodash": "^4.14.121",
|
||||
"@types/uuid": "^3.4.4"
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@ export function register() {
|
||||
addons.register(ADDON_ID, api => {
|
||||
addons.addPanel(PANEL_ID, {
|
||||
title: 'Actions',
|
||||
render: ({ active }) => <ActionLogger api={api} active={active} />,
|
||||
render: ({ active, key }) => <ActionLogger key={key} api={api} active={active} />,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@ import { ActionOptions, DecoratorFunction, HandlerFunction } from '../models';
|
||||
|
||||
const applyDecorators = (decorators: DecoratorFunction[], actionCallback: HandlerFunction) => {
|
||||
return (..._args: any[]) => {
|
||||
const decorated = decorators.reduce((args, fn) => fn(args), _args);
|
||||
const decorated = decorators.reduce((args, storyFn) => storyFn(args), _args);
|
||||
actionCallback(...decorated);
|
||||
};
|
||||
};
|
||||
|
||||
@ -56,11 +56,11 @@ const actionsSubscription = (...args: any[]) => {
|
||||
return lastSubscription;
|
||||
};
|
||||
|
||||
export const createDecorator = (actionsFn: any) => (...args: any[]) => (story: () => any) => {
|
||||
export const createDecorator = (actionsFn: any) => (...args: any[]) => (storyFn: () => any) => {
|
||||
if (root != null) {
|
||||
addons.getChannel().emit(Events.REGISTER_SUBSCRIPTION, actionsSubscription(actionsFn, ...args));
|
||||
}
|
||||
return story();
|
||||
return storyFn();
|
||||
};
|
||||
|
||||
export const withActions = createDecorator(actions);
|
||||
|
||||
@ -14,7 +14,8 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"directory": "addons/backgrounds"
|
||||
},
|
||||
"license": "MIT",
|
||||
"author": "jbaxleyiii",
|
||||
@ -32,7 +33,7 @@
|
||||
"core-js": "^2.6.2",
|
||||
"global": "^4.3.2",
|
||||
"memoizerific": "^1.11.3",
|
||||
"react": "^16.8.1",
|
||||
"react": "^16.8.2",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -1,9 +1,14 @@
|
||||
import { styled } from '@storybook/theming';
|
||||
|
||||
export const ColorIcon = styled.span(({ background }: { background: string }) => ({
|
||||
borderRadius: '1rem',
|
||||
display: 'block',
|
||||
height: '1rem',
|
||||
width: '1rem',
|
||||
background,
|
||||
}));
|
||||
export const ColorIcon = styled.span(
|
||||
({ background }: { background: string }) => ({
|
||||
borderRadius: '1rem',
|
||||
display: 'block',
|
||||
height: '1rem',
|
||||
width: '1rem',
|
||||
background,
|
||||
}),
|
||||
({ theme }) => ({
|
||||
boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
|
||||
}),
|
||||
);
|
||||
|
||||
@ -8,7 +8,7 @@ import { SET_STORIES } from '@storybook/core-events';
|
||||
import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
|
||||
|
||||
import { PARAM_KEY } from '../constants';
|
||||
import { ColorIcon } from '../components';
|
||||
import { ColorIcon } from '../components/ColorIcon';
|
||||
import { BackgroundConfig, BackgroundSelectorItem } from '../models';
|
||||
|
||||
const iframeId = 'storybook-preview-background';
|
||||
@ -31,10 +31,7 @@ const createBackgroundSelectorItem = memoize(1000)(
|
||||
})
|
||||
);
|
||||
|
||||
const getSelectedBackgroundColor = (
|
||||
list: BackgroundConfig[],
|
||||
currentSelectedValue: string
|
||||
): string => {
|
||||
const getSelectedBackgroundColor = (list: BackgroundConfig[], currentSelectedValue: string): string => {
|
||||
if (!list.length) {
|
||||
return 'transparent';
|
||||
}
|
||||
@ -54,36 +51,30 @@ const getSelectedBackgroundColor = (
|
||||
return 'transparent';
|
||||
};
|
||||
|
||||
const getDisplayableState = memoize(10)(
|
||||
(props: BackgroundToolProps, state: BackgroundToolState, change) => {
|
||||
const data = props.api.getCurrentStoryData();
|
||||
const list: BackgroundConfig[] = (data && data.parameters && data.parameters[PARAM_KEY]) || [];
|
||||
const getDisplayableState = memoize(10)((props: BackgroundToolProps, state: BackgroundToolState, change) => {
|
||||
const data = props.api.getCurrentStoryData();
|
||||
const list: BackgroundConfig[] = (data && data.parameters && data.parameters[PARAM_KEY]) || [];
|
||||
|
||||
const selectedBackgroundColor = getSelectedBackgroundColor(list, state.selected);
|
||||
const selectedBackgroundColor = getSelectedBackgroundColor(list, state.selected);
|
||||
|
||||
let availableBackgroundSelectorItems: BackgroundSelectorItem[] = [];
|
||||
let availableBackgroundSelectorItems: BackgroundSelectorItem[] = [];
|
||||
|
||||
if (selectedBackgroundColor !== 'transparent') {
|
||||
availableBackgroundSelectorItems.push(
|
||||
createBackgroundSelectorItem('reset', 'Clear background', 'transparent', false, change)
|
||||
);
|
||||
}
|
||||
|
||||
if (list.length) {
|
||||
availableBackgroundSelectorItems = [
|
||||
...availableBackgroundSelectorItems,
|
||||
...list.map(({ name, value }) =>
|
||||
createBackgroundSelectorItem(null, name, value, true, change)
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
return {
|
||||
items: availableBackgroundSelectorItems,
|
||||
selectedBackgroundColor,
|
||||
};
|
||||
if (selectedBackgroundColor !== 'transparent') {
|
||||
availableBackgroundSelectorItems.push(createBackgroundSelectorItem('reset', 'Clear background', 'transparent', null, change));
|
||||
}
|
||||
);
|
||||
|
||||
if (list.length) {
|
||||
availableBackgroundSelectorItems = [
|
||||
...availableBackgroundSelectorItems,
|
||||
...list.map(({ name, value }) => createBackgroundSelectorItem(null, name, value, true, change)),
|
||||
];
|
||||
}
|
||||
|
||||
return {
|
||||
items: availableBackgroundSelectorItems,
|
||||
selectedBackgroundColor,
|
||||
};
|
||||
});
|
||||
|
||||
interface BackgroundToolProps {
|
||||
api: {
|
||||
@ -128,11 +119,7 @@ export class BackgroundSelector extends Component<BackgroundToolProps, Backgroun
|
||||
|
||||
render() {
|
||||
const { expanded } = this.state;
|
||||
const { items, selectedBackgroundColor } = getDisplayableState(
|
||||
this.props,
|
||||
this.state,
|
||||
this.change
|
||||
);
|
||||
const { items, selectedBackgroundColor } = getDisplayableState(this.props, this.state, this.change);
|
||||
|
||||
return items.length ? (
|
||||
<Fragment>
|
||||
@ -149,9 +136,7 @@ export class BackgroundSelector extends Component<BackgroundToolProps, Backgroun
|
||||
placement="top"
|
||||
trigger="click"
|
||||
tooltipShown={expanded}
|
||||
onVisibilityChange={(newVisibility: boolean) =>
|
||||
this.setState({ expanded: newVisibility })
|
||||
}
|
||||
onVisibilityChange={(newVisibility: boolean) => this.setState({ expanded: newVisibility })}
|
||||
tooltip={<TooltipLinkList links={items} />}
|
||||
closeOnClick
|
||||
>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { addons, makeDecorator } from '@storybook/addons';
|
||||
import { addons, makeDecorator, StoryContext, StoryGetter, WrapperSettings } from '@storybook/addons';
|
||||
import deprecate from 'util-deprecate';
|
||||
|
||||
import { REGISTER_SUBSCRIPTION } from '@storybook/core-events';
|
||||
@ -17,7 +17,7 @@ export const withBackgrounds = makeDecorator({
|
||||
parameterName: 'backgrounds',
|
||||
skipIfNoParametersOrOptions: true,
|
||||
allowDeprecatedUsage: true,
|
||||
wrapper: (getStory, context, { options, parameters }) => {
|
||||
wrapper: (getStory: StoryGetter, context: StoryContext, { options, parameters }: WrapperSettings) => {
|
||||
const data = parameters || options || [];
|
||||
const backgrounds = Array.isArray(data) ? data : Object.values(data);
|
||||
|
||||
|
||||
@ -12,7 +12,8 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"directory": "addons/centered"
|
||||
},
|
||||
"license": "MIT",
|
||||
"author": "Muhammed Thanish <mnmtanish@gmail.com>",
|
||||
|
||||
@ -31,15 +31,15 @@ export default function(storyFn) {
|
||||
const wrapper = getWrapperDiv();
|
||||
wrapper.appendChild(inner);
|
||||
|
||||
const component = storyFn();
|
||||
const element = storyFn();
|
||||
|
||||
if (typeof component === 'string') {
|
||||
inner.innerHTML = component;
|
||||
} else if (component instanceof Node) {
|
||||
if (typeof element === 'string') {
|
||||
inner.innerHTML = element;
|
||||
} else if (element instanceof Node) {
|
||||
inner.innerHTML = '';
|
||||
inner.appendChild(component);
|
||||
inner.appendChild(element);
|
||||
} else {
|
||||
return component;
|
||||
return element;
|
||||
}
|
||||
|
||||
return wrapper;
|
||||
|
||||
@ -14,7 +14,8 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"directory": "addons/cssresources"
|
||||
},
|
||||
"license": "MIT",
|
||||
"author": "nm123github",
|
||||
@ -29,7 +30,7 @@
|
||||
"@storybook/core-events": "5.0.0-beta.3",
|
||||
"core-js": "^2.6.2",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.1"
|
||||
"react": "^16.8.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
|
||||
@ -14,7 +14,8 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"directory": "addons/events"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
@ -29,7 +30,7 @@
|
||||
"core-js": "^2.6.2",
|
||||
"format-json": "^1.0.3",
|
||||
"prop-types": "^15.6.2",
|
||||
"react": "^16.8.1",
|
||||
"react": "^16.8.2",
|
||||
"react-lifecycles-compat": "^3.0.4",
|
||||
"react-textarea-autosize": "^7.0.4",
|
||||
"util-deprecate": "^1.0.2"
|
||||
|
||||
@ -39,9 +39,9 @@ export default options => {
|
||||
if (options.children) {
|
||||
return WithEvents(options);
|
||||
}
|
||||
return story => {
|
||||
return storyFn => {
|
||||
addEvents(options);
|
||||
return story();
|
||||
return storyFn();
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@ -12,7 +12,8 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"directory": "addons/google-analytics"
|
||||
},
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
|
||||
@ -12,7 +12,8 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"directory": "addons/graphql"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
|
||||
@ -12,7 +12,8 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"directory": "addons/info"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
@ -30,7 +31,7 @@
|
||||
"marksy": "^6.1.0",
|
||||
"nested-object-assign": "^1.0.1",
|
||||
"prop-types": "^15.6.2",
|
||||
"react": "^16.8.1",
|
||||
"react": "^16.8.2",
|
||||
"react-addons-create-fragment": "^15.5.3",
|
||||
"react-is": "^16.8.1",
|
||||
"react-lifecycles-compat": "^3.0.4",
|
||||
|
||||
@ -2608,7 +2608,7 @@ exports[`addon Info should render component description if story kind matches co
|
||||
context={
|
||||
Object {
|
||||
"kind": "TestComponent",
|
||||
"story": "Basic test",
|
||||
"name": "Basic test",
|
||||
}
|
||||
}
|
||||
excludedPropTypes={Array []}
|
||||
@ -2670,7 +2670,9 @@ exports[`addon Info should render component description if story kind matches co
|
||||
"padding": 0,
|
||||
}
|
||||
}
|
||||
/>
|
||||
>
|
||||
Basic test
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -2823,7 +2825,6 @@ exports[`addon Info should render component description if story kind matches co
|
||||
>
|
||||
cursive
|
||||
</em>
|
||||
|
||||
</div>
|
||||
</P>
|
||||
</div>
|
||||
@ -3822,7 +3823,7 @@ exports[`addon Info should render component description if story name matches co
|
||||
context={
|
||||
Object {
|
||||
"kind": "Test Components",
|
||||
"story": "TestComponent",
|
||||
"name": "TestComponent",
|
||||
}
|
||||
}
|
||||
excludedPropTypes={Array []}
|
||||
@ -3884,7 +3885,9 @@ exports[`addon Info should render component description if story name matches co
|
||||
"padding": 0,
|
||||
}
|
||||
}
|
||||
/>
|
||||
>
|
||||
TestComponent
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -4037,7 +4040,6 @@ exports[`addon Info should render component description if story name matches co
|
||||
>
|
||||
cursive
|
||||
</em>
|
||||
|
||||
</div>
|
||||
</P>
|
||||
</div>
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
.info-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info-table, .info-table td, .info-table th {
|
||||
border-collapse: collapse;
|
||||
border: 1px solid #cccccc;
|
||||
|
||||
@ -264,11 +264,11 @@ class Story extends Component {
|
||||
|
||||
_getComponentDescription() {
|
||||
const {
|
||||
context: { kind, story },
|
||||
context: { kind, name },
|
||||
} = this.props;
|
||||
let retDiv = null;
|
||||
|
||||
const validMatches = [kind, story];
|
||||
const validMatches = [kind, name];
|
||||
|
||||
if (Object.keys(STORYBOOK_REACT_CLASSES).length) {
|
||||
Object.keys(STORYBOOK_REACT_CLASSES).forEach(key => {
|
||||
|
||||
@ -20,7 +20,8 @@ const TestComponent = ({ func, obj, array, number, string, bool, empty }) => (
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
</ul>
|
||||
</div>);
|
||||
</div>
|
||||
);
|
||||
/* eslint-enable */
|
||||
|
||||
const reactClassPath = 'some/path/TestComponent.jsx';
|
||||
@ -31,7 +32,7 @@ const storybookReactClassMock = {
|
||||
description: `
|
||||
# Awesome test component description
|
||||
## with markdown support
|
||||
**bold** *cursive*
|
||||
**bold** *cursive*
|
||||
`,
|
||||
name: 'TestComponent',
|
||||
},
|
||||
@ -45,9 +46,9 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)`;
|
||||
|
||||
describe('addon Info', () => {
|
||||
// eslint-disable-next-line react/prop-types
|
||||
const storyFn = ({ story }) => (
|
||||
const storyFn = ({ name }) => (
|
||||
<div>
|
||||
It's a {story} story:
|
||||
It's a {name} story:
|
||||
<TestComponent
|
||||
func={x => x + 1}
|
||||
obj={{ a: 'a', b: 'b' }}
|
||||
@ -85,7 +86,7 @@ describe('addon Info', () => {
|
||||
const Info = () =>
|
||||
withInfo({ inline: true, propTables: false })(storyFn, {
|
||||
kind: 'TestComponent',
|
||||
story: 'Basic test',
|
||||
name: 'Basic test',
|
||||
});
|
||||
|
||||
expect(mount(<Info />)).toMatchSnapshot();
|
||||
@ -100,7 +101,7 @@ describe('addon Info', () => {
|
||||
const Info = () =>
|
||||
withInfo({ inline: true, propTables: false })(storyFn, {
|
||||
kind: 'Test Components',
|
||||
story: 'TestComponent',
|
||||
name: 'TestComponent',
|
||||
});
|
||||
|
||||
expect(mount(<Info />)).toMatchSnapshot();
|
||||
|
||||
@ -17,7 +17,8 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"directory": "addons/jest"
|
||||
},
|
||||
"license": "MIT",
|
||||
"author": "Renaud Tertrais <renaud.tertrais@gmail.com> (https://github.com/renaudtertrais)",
|
||||
@ -33,7 +34,7 @@
|
||||
"core-js": "^2.6.2",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.6.2",
|
||||
"react": "^16.8.1",
|
||||
"react": "^16.8.2",
|
||||
"upath": "^1.1.0",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import addons from '@storybook/addons';
|
||||
import deprecate from 'util-deprecate';
|
||||
import { normalize } from 'upath';
|
||||
import { ADD_TESTS } from './shared';
|
||||
|
||||
const findTestResults = (testFiles, jestTestResults, jestTestFilesExt) =>
|
||||
Object.values(testFiles).map(name => {
|
||||
@ -22,7 +23,7 @@ const findTestResults = (testFiles, jestTestResults, jestTestFilesExt) =>
|
||||
});
|
||||
|
||||
const emitAddTests = ({ kind, story, testFiles, options }) => {
|
||||
addons.getChannel().emit('storybook/tests/add_tests', {
|
||||
addons.getChannel().emit(ADD_TESTS, {
|
||||
kind,
|
||||
storyName: story,
|
||||
tests: findTestResults(testFiles, options.results, options.filesExt),
|
||||
@ -37,14 +38,14 @@ export const withTests = userOptions => {
|
||||
|
||||
return (...args) => {
|
||||
if (typeof args[0] === 'string') {
|
||||
return deprecate((story, { kind }) => {
|
||||
emitAddTests({ kind, story, testFiles: args, options });
|
||||
return deprecate((storyFn, { kind }) => {
|
||||
emitAddTests({ kind, story: storyFn, testFiles: args, options });
|
||||
|
||||
return story();
|
||||
return storyFn();
|
||||
}, 'Passing component filenames to the `@storybook/addon-jest` via `withTests` is deprecated. Instead, use the `jest` story parameter');
|
||||
}
|
||||
|
||||
const [story, { kind, parameters = {} }] = args;
|
||||
const [storyFn, { kind, parameters = {} }] = args;
|
||||
let { jest: testFiles } = parameters;
|
||||
|
||||
if (typeof testFiles === 'string') {
|
||||
@ -52,10 +53,10 @@ export const withTests = userOptions => {
|
||||
}
|
||||
|
||||
if (testFiles && !testFiles.disable) {
|
||||
emitAddTests({ kind, story, testFiles, options });
|
||||
emitAddTests({ kind, story: storyFn, testFiles, options });
|
||||
}
|
||||
|
||||
return story();
|
||||
return storyFn();
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@ -12,7 +12,8 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"directory": "addons/knobs"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
|
||||
@ -6,10 +6,10 @@ import { Form } from '@storybook/components';
|
||||
const FlexSpaced = styled.div({
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
'& > *': {
|
||||
'&& > *': {
|
||||
marginLeft: 10,
|
||||
},
|
||||
'& > *:first-child': {
|
||||
'&& > *:first-of-type': {
|
||||
marginLeft: 0,
|
||||
},
|
||||
});
|
||||
|
||||
@ -12,7 +12,8 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"directory": "addons/links"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
|
||||
@ -55,8 +55,8 @@ const off = () => {
|
||||
}
|
||||
};
|
||||
|
||||
export const withLinks = story => {
|
||||
export const withLinks = storyFn => {
|
||||
on();
|
||||
addons.getChannel().once(STORY_CHANGED, off);
|
||||
return story();
|
||||
return storyFn();
|
||||
};
|
||||
|
||||
@ -13,7 +13,8 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"directory": "addons/notes"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/public_api.js",
|
||||
|
||||
@ -14,7 +14,8 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"directory": "addons/ondevice-backgrounds"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
|
||||
@ -18,7 +18,7 @@ Refer to its documentation to understand how to use knobs**
|
||||
First of all, you need to install knobs into your project.
|
||||
|
||||
```sh
|
||||
yarn add @storybook/addon-ondevice-knobs --dev
|
||||
yarn add @storybook/addon-ondevice-knobs @storybook/addon-knobs --dev
|
||||
```
|
||||
|
||||
Then create a file called `rn-addons.js` in your storybook config.
|
||||
@ -26,6 +26,7 @@ Then create a file called `rn-addons.js` in your storybook config.
|
||||
```js
|
||||
import '@storybook/addon-ondevice-knobs/register';
|
||||
```
|
||||
> `@storybook/addon-ondevice-knobs` use register only.
|
||||
|
||||
|
||||
Then import `rn-addons.js` next to your `getStorybookUI` call.
|
||||
@ -38,3 +39,10 @@ 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...
|
||||
```
|
||||
|
||||
@ -11,7 +11,8 @@
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"directory": "addons/ondevice-knobs"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
@ -25,7 +26,7 @@
|
||||
"deep-equal": "^1.0.1",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-native-color-picker": "^0.4.0",
|
||||
"react-native-modal-datetime-picker": "^5.1.0",
|
||||
"react-native-modal-datetime-picker": "^6.0.0",
|
||||
"react-native-modal-selector": "^1.0.2",
|
||||
"react-native-switch": "^1.5.0"
|
||||
},
|
||||
|
||||
@ -9,7 +9,8 @@
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"directory": "addons/ondevice-notes"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
|
||||
@ -12,7 +12,8 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"directory": "addons/options"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
|
||||
@ -12,7 +12,8 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"directory": "addons/storyshots/storyshots-core"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
@ -35,7 +36,7 @@
|
||||
"devDependencies": {
|
||||
"enzyme-to-json": "^3.3.4",
|
||||
"jest-emotion": "^10.0.6",
|
||||
"react": "^16.8.1"
|
||||
"react": "^16.8.2"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
|
||||
@ -48,7 +48,7 @@ function testStorySnapshots(options = {}) {
|
||||
.filter(({ name }) => (storyNameRegex ? name.match(storyNameRegex) : true))
|
||||
.filter(({ kind }) => (storyKindRegex ? kind.match(storyKindRegex) : true))
|
||||
.reduce((acc, item) => {
|
||||
const { kind, story: render, parameters } = item;
|
||||
const { kind, storyFn: render, parameters } = item;
|
||||
const existing = acc.find(i => i.kind === kind);
|
||||
const { fileName } = item.parameters;
|
||||
|
||||
|
||||
@ -13,9 +13,9 @@ function bootstrapADocumentAndReturnANode() {
|
||||
function makeSureThatResultIsRenderedSomehow({ context, result, rootElement }) {
|
||||
if (!rootElement.firstChild) {
|
||||
riotForStorybook.render({
|
||||
story: () => result,
|
||||
storyFn: () => result,
|
||||
selectedKind: context.kind,
|
||||
selectedStory: context.story,
|
||||
selectedStory: context.name,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,7 +12,8 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"directory": "addons/storyshots/storyshots-puppeteer"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
@ -21,7 +22,7 @@
|
||||
"prepare": "node ../../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "5.0.0-beta.3",
|
||||
"@storybook/router": "5.0.0-beta.3",
|
||||
"@storybook/node-logger": "5.0.0-beta.3",
|
||||
"core-js": "^2.6.2",
|
||||
"jest-image-snapshot": "^2.6.0",
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { toId } from '@storybook/core/client';
|
||||
import { toId } from '@storybook/router/utils';
|
||||
|
||||
import { URL } from 'url';
|
||||
|
||||
|
||||
@ -12,7 +12,8 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"directory": "addons/storysource"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
@ -24,6 +25,7 @@
|
||||
"@storybook/addons": "5.0.0-beta.3",
|
||||
"@storybook/components": "5.0.0-beta.3",
|
||||
"@storybook/theming": "5.0.0-beta.3",
|
||||
"@storybook/router": "5.0.0-beta.3",
|
||||
"core-js": "^2.6.2",
|
||||
"estraverse": "^4.2.0",
|
||||
"loader-utils": "^1.2.1",
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { styled } from '@storybook/theming';
|
||||
import { Link, SyntaxHighlighter } from '@storybook/components';
|
||||
import { Link } from '@storybook/router';
|
||||
import { SyntaxHighlighter } from '@storybook/components';
|
||||
|
||||
import { createElement } from 'react-syntax-highlighter';
|
||||
import { EVENT_ID } from './events';
|
||||
@ -10,6 +11,7 @@ const StyledStoryLink = styled(Link)(({ theme }) => ({
|
||||
display: 'block',
|
||||
textDecoration: 'none',
|
||||
borderRadius: theme.appBorderRadius,
|
||||
|
||||
'&:hover': {
|
||||
background: theme.background.hoverable,
|
||||
},
|
||||
@ -23,6 +25,7 @@ const SelectedStoryHighlight = styled.div(({ theme }) => ({
|
||||
const StyledSyntaxHighlighter = styled(SyntaxHighlighter)(({ theme }) => ({
|
||||
fontSize: theme.typography.size.s2 - 1,
|
||||
}));
|
||||
|
||||
const areLocationsEqual = (a, b) =>
|
||||
a.startLoc.line === b.startLoc.line &&
|
||||
a.startLoc.col === b.startLoc.col &&
|
||||
@ -73,14 +76,6 @@ export default class StoryPanel extends Component {
|
||||
});
|
||||
};
|
||||
|
||||
clickOnStory = (kind, story) => {
|
||||
const { api } = this.props;
|
||||
|
||||
if (kind && story) {
|
||||
api.selectStory(kind, story);
|
||||
}
|
||||
};
|
||||
|
||||
createPart = (rows, stylesheet, useInlineStyles) =>
|
||||
rows.map((node, i) =>
|
||||
createElement({
|
||||
@ -91,7 +86,7 @@ export default class StoryPanel extends Component {
|
||||
})
|
||||
);
|
||||
|
||||
createStoryPart = (rows, stylesheet, useInlineStyles, location, kindStory) => {
|
||||
createStoryPart = (rows, stylesheet, useInlineStyles, location, id) => {
|
||||
const { currentLocation } = this.state;
|
||||
const first = location.startLoc.line - 1;
|
||||
const last = location.endLoc.line;
|
||||
@ -100,7 +95,7 @@ export default class StoryPanel extends Component {
|
||||
const story = this.createPart(storyRows, stylesheet, useInlineStyles);
|
||||
const storyKey = `${first}-${last}`;
|
||||
|
||||
if (areLocationsEqual(location, currentLocation)) {
|
||||
if (location && currentLocation && areLocationsEqual(location, currentLocation)) {
|
||||
return (
|
||||
<SelectedStoryHighlight key={storyKey} ref={this.setSelectedStoryRef}>
|
||||
{story}
|
||||
@ -108,15 +103,8 @@ export default class StoryPanel extends Component {
|
||||
);
|
||||
}
|
||||
|
||||
const [selectedKind, selectedStory] = kindStory.split('@');
|
||||
const url = `/?selectedKind=${selectedKind}&selectedStory=${selectedStory}`;
|
||||
|
||||
return (
|
||||
<StyledStoryLink
|
||||
href={url}
|
||||
key={storyKey}
|
||||
onClick={() => this.clickOnStory(selectedKind, selectedStory)}
|
||||
>
|
||||
<StyledStoryLink to={`/story/${id}`} key={storyKey}>
|
||||
{story}
|
||||
</StyledStoryLink>
|
||||
);
|
||||
@ -179,6 +167,7 @@ export default class StoryPanel extends Component {
|
||||
language="jsx"
|
||||
showLineNumbers="true"
|
||||
renderer={this.lineRenderer}
|
||||
format={false}
|
||||
copyable={false}
|
||||
padded
|
||||
>
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
export const ADDON_ID = 'storybook/storysource';
|
||||
export const PANEL_ID = `${ADDON_ID}/panel`;
|
||||
export const EVENT_ID = `${ADDON_ID}/story-event`;
|
||||
export const EVENT_ID = `${ADDON_ID}/set`;
|
||||
|
||||
@ -252,7 +252,7 @@ storiesOf('Addons|Info.GitHub issues', module).add(
|
||||
|
||||
exports[`inject-decorator positive - angular calculates "adds" map 1`] = `
|
||||
Object {
|
||||
"Custom|ng-content@Default": Object {
|
||||
"custom-ng-content--default": Object {
|
||||
"endLoc": Object {
|
||||
"col": 2,
|
||||
"line": 17,
|
||||
@ -284,20 +284,7 @@ storiesOf('Custom|ng-content', module).addDecorator(withStorySource(__STORY__, _
|
||||
"
|
||||
`;
|
||||
|
||||
exports[`inject-decorator positive - flow calculates "adds" map 1`] = `
|
||||
Object {
|
||||
"@Flow Class": Object {
|
||||
"endLoc": Object {
|
||||
"col": 70,
|
||||
"line": 35,
|
||||
},
|
||||
"startLoc": Object {
|
||||
"col": 12,
|
||||
"line": 35,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
exports[`inject-decorator positive - flow calculates "adds" map 1`] = `Object {}`;
|
||||
|
||||
exports[`inject-decorator positive - flow injects stories decorator after the all "storiesOf" functions 1`] = `
|
||||
"// @flow
|
||||
@ -340,7 +327,7 @@ stories.add('Flow Class', withInfo('Lorum Ipsum Nem')(() => <Table />));
|
||||
|
||||
exports[`inject-decorator positive - ts calculates "adds" map 1`] = `
|
||||
Object {
|
||||
"ngrx|Store@With component": Object {
|
||||
"ngrx-store--with-component": Object {
|
||||
"endLoc": Object {
|
||||
"col": 3,
|
||||
"line": 32,
|
||||
@ -390,7 +377,7 @@ storiesOf('ngrx|Store', module).addDecorator(withStorySource(__STORY__, __ADDS_M
|
||||
|
||||
exports[`inject-decorator positive calculates "adds" map 1`] = `
|
||||
Object {
|
||||
"Addons|Info.Decorator@Use Info as story decorator": Object {
|
||||
"addons-info-decorator--use-info-as-story-decorator": Object {
|
||||
"endLoc": Object {
|
||||
"col": 73,
|
||||
"line": 137,
|
||||
@ -400,7 +387,7 @@ Object {
|
||||
"line": 137,
|
||||
},
|
||||
},
|
||||
"Addons|Info.GitHub issues@#1814": Object {
|
||||
"addons-info-github-issues--1814": Object {
|
||||
"endLoc": Object {
|
||||
"col": 4,
|
||||
"line": 152,
|
||||
@ -410,7 +397,7 @@ Object {
|
||||
"line": 146,
|
||||
},
|
||||
},
|
||||
"Addons|Info.Markdown@Displays Markdown in description": Object {
|
||||
"addons-info-markdown--displays-markdown-in-description": Object {
|
||||
"endLoc": Object {
|
||||
"col": 96,
|
||||
"line": 44,
|
||||
@ -420,17 +407,7 @@ Object {
|
||||
"line": 43,
|
||||
},
|
||||
},
|
||||
"Addons|Info.Options.TableComponent@Use a custom component for the table": Object {
|
||||
"endLoc": Object {
|
||||
"col": 41,
|
||||
"line": 130,
|
||||
},
|
||||
"startLoc": Object {
|
||||
"col": 2,
|
||||
"line": 127,
|
||||
},
|
||||
},
|
||||
"Addons|Info.Options.header@Shows or hides Info Addon header": Object {
|
||||
"addons-info-options-header--shows-or-hides-info-addon-header": Object {
|
||||
"endLoc": Object {
|
||||
"col": 41,
|
||||
"line": 60,
|
||||
@ -440,7 +417,7 @@ Object {
|
||||
"line": 56,
|
||||
},
|
||||
},
|
||||
"Addons|Info.Options.inline@Inlines component inside story": Object {
|
||||
"addons-info-options-inline--inlines-component-inside-story": Object {
|
||||
"endLoc": Object {
|
||||
"col": 41,
|
||||
"line": 52,
|
||||
@ -450,7 +427,7 @@ Object {
|
||||
"line": 48,
|
||||
},
|
||||
},
|
||||
"Addons|Info.Options.propTables@Shows additional component prop tables": Object {
|
||||
"addons-info-options-proptables--shows-additional-component-prop-tables": Object {
|
||||
"endLoc": Object {
|
||||
"col": 41,
|
||||
"line": 76,
|
||||
@ -460,7 +437,7 @@ Object {
|
||||
"line": 72,
|
||||
},
|
||||
},
|
||||
"Addons|Info.Options.propTablesExclude@Exclude component from prop tables": Object {
|
||||
"addons-info-options-proptablesexclude--exclude-component-from-prop-tables": Object {
|
||||
"endLoc": Object {
|
||||
"col": 4,
|
||||
"line": 89,
|
||||
@ -470,7 +447,7 @@ Object {
|
||||
"line": 80,
|
||||
},
|
||||
},
|
||||
"Addons|Info.Options.source@Shows or hides Info Addon source": Object {
|
||||
"addons-info-options-source--shows-or-hides-info-addon-source": Object {
|
||||
"endLoc": Object {
|
||||
"col": 41,
|
||||
"line": 68,
|
||||
@ -480,7 +457,7 @@ Object {
|
||||
"line": 64,
|
||||
},
|
||||
},
|
||||
"Addons|Info.Options.styles@Extend info styles with an object": Object {
|
||||
"addons-info-options-styles--extend-info-styles-with-an-object": Object {
|
||||
"endLoc": Object {
|
||||
"col": 43,
|
||||
"line": 108,
|
||||
@ -490,7 +467,7 @@ Object {
|
||||
"line": 94,
|
||||
},
|
||||
},
|
||||
"Addons|Info.Options.styles@Full control over styles using a function": Object {
|
||||
"addons-info-options-styles--full-control-over-styles-using-a-function": Object {
|
||||
"endLoc": Object {
|
||||
"col": 43,
|
||||
"line": 123,
|
||||
@ -500,7 +477,27 @@ Object {
|
||||
"line": 111,
|
||||
},
|
||||
},
|
||||
"Addons|Info.React Docgen@Comments from Flow declarations": Object {
|
||||
"addons-info-options-tablecomponent--use-a-custom-component-for-the-table": Object {
|
||||
"endLoc": Object {
|
||||
"col": 41,
|
||||
"line": 130,
|
||||
},
|
||||
"startLoc": Object {
|
||||
"col": 2,
|
||||
"line": 127,
|
||||
},
|
||||
},
|
||||
"addons-info-react-docgen--comments-from-component-declaration": Object {
|
||||
"endLoc": Object {
|
||||
"col": 70,
|
||||
"line": 28,
|
||||
},
|
||||
"startLoc": Object {
|
||||
"col": 4,
|
||||
"line": 25,
|
||||
},
|
||||
},
|
||||
"addons-info-react-docgen--comments-from-flow-declarations": Object {
|
||||
"endLoc": Object {
|
||||
"col": 85,
|
||||
"line": 22,
|
||||
@ -510,7 +507,7 @@ Object {
|
||||
"line": 19,
|
||||
},
|
||||
},
|
||||
"Addons|Info.React Docgen@Comments from PropType declarations": Object {
|
||||
"addons-info-react-docgen--comments-from-proptype-declarations": Object {
|
||||
"endLoc": Object {
|
||||
"col": 79,
|
||||
"line": 16,
|
||||
@ -520,16 +517,6 @@ Object {
|
||||
"line": 13,
|
||||
},
|
||||
},
|
||||
"Addons|Info.React Docgen@Comments from component declaration": Object {
|
||||
"endLoc": Object {
|
||||
"col": 70,
|
||||
"line": 28,
|
||||
},
|
||||
"startLoc": Object {
|
||||
"col": 4,
|
||||
"line": 25,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
const { toId } = require('@storybook/router/utils');
|
||||
|
||||
const STORIES_OF = 'storiesOf';
|
||||
|
||||
function pushParts(source, parts, from, to) {
|
||||
@ -79,20 +81,22 @@ export function handleADD(node, parent, adds) {
|
||||
}
|
||||
|
||||
const kind = findRelatedKind(node.object) || '';
|
||||
const key = `${kind}@${storyName.value}`;
|
||||
if (kind && storyName.value) {
|
||||
const key = toId(kind, storyName.value);
|
||||
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
adds[key] = {
|
||||
// Debug: code: source.slice(storyName.start, lastArg.end),
|
||||
startLoc: {
|
||||
col: storyName.loc.start.column,
|
||||
line: storyName.loc.start.line,
|
||||
},
|
||||
endLoc: {
|
||||
col: lastArg.loc.end.column,
|
||||
line: lastArg.loc.end.line,
|
||||
},
|
||||
};
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
adds[key] = {
|
||||
// Debug: code: source.slice(storyName.start, lastArg.end),
|
||||
startLoc: {
|
||||
col: storyName.loc.start.column,
|
||||
line: storyName.loc.start.line,
|
||||
},
|
||||
endLoc: {
|
||||
col: lastArg.loc.end.column,
|
||||
line: lastArg.loc.end.line,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export function handleSTORYOF(node, parts, source, lastIndex) {
|
||||
|
||||
@ -1,15 +1,12 @@
|
||||
import addons from '@storybook/addons';
|
||||
import { EVENT_ID } from './events';
|
||||
|
||||
function getLocation(context, locationsMap) {
|
||||
return locationsMap[`${context.kind}@${context.name}`] || locationsMap[`@${context.name}`];
|
||||
}
|
||||
const getLocation = (context, locationsMap) => locationsMap[context.id];
|
||||
|
||||
function setStorySource(context, source, locationsMap) {
|
||||
const channel = addons.getChannel();
|
||||
const currentLocation = getLocation(context, locationsMap);
|
||||
|
||||
channel.emit(EVENT_ID, {
|
||||
addons.getChannel().emit(EVENT_ID, {
|
||||
source,
|
||||
currentLocation,
|
||||
locationsMap,
|
||||
@ -17,8 +14,8 @@ function setStorySource(context, source, locationsMap) {
|
||||
}
|
||||
|
||||
export function withStorySource(source, locationsMap = {}) {
|
||||
return (story, context) => {
|
||||
return (storyFn, context) => {
|
||||
setStorySource(context, source, locationsMap);
|
||||
return story();
|
||||
return storyFn();
|
||||
};
|
||||
}
|
||||
|
||||
@ -12,7 +12,8 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"directory": "addons/viewport"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "preview.js",
|
||||
|
||||
@ -20,7 +20,7 @@ const createItem = memoize(1000)((id, name, value, change) => ({
|
||||
onClick: () => {
|
||||
change({ selected: id, expanded: false });
|
||||
},
|
||||
right: `${value.width}-${value.height}`,
|
||||
right: `${value.width.replace('px', '')}x${value.height.replace('px', '')}`,
|
||||
value,
|
||||
}));
|
||||
|
||||
@ -49,7 +49,7 @@ const getState = memoize(10)((props, state, change) => {
|
||||
id: 'rotate',
|
||||
title: 'Rotate viewport',
|
||||
onClick: () => {
|
||||
change({ isRotated: !state.isRotate, expanded: false });
|
||||
change({ isRotated: !state.isRotated, expanded: false });
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
@ -11,7 +11,8 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"directory": "app/angular"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/client/index.js",
|
||||
|
||||
@ -4,7 +4,7 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { AppComponent } from './components/app.component';
|
||||
import { STORY } from './app.token';
|
||||
import { NgModuleMetadata, IGetStory, NgStory } from './types';
|
||||
import { NgModuleMetadata, IStoryFn, NgStory } from './types';
|
||||
|
||||
let platform: any = null;
|
||||
let promises: Array<Promise<NgModuleRef<any>>> = [];
|
||||
@ -40,8 +40,8 @@ const createComponentFromTemplate = (template: string, styles: string[]) => {
|
||||
})(componentClass);
|
||||
};
|
||||
|
||||
const initModule = (currentStory: IGetStory) => {
|
||||
const storyObj = currentStory();
|
||||
const initModule = (storyFn: IStoryFn) => {
|
||||
const storyObj = storyFn();
|
||||
const { component, template, props, styles, moduleMetadata = {} } = storyObj;
|
||||
|
||||
let AnnotatedComponent = template ? createComponentFromTemplate(template, styles) : component;
|
||||
@ -80,6 +80,6 @@ const draw = (newModule: DynamicComponentType): void => {
|
||||
}
|
||||
};
|
||||
|
||||
export const renderNgApp = (story: IGetStory) => {
|
||||
draw(initModule(story));
|
||||
export const renderNgApp = (storyFn: IStoryFn) => {
|
||||
draw(initModule(storyFn));
|
||||
};
|
||||
|
||||
@ -19,4 +19,4 @@ export interface NgStory {
|
||||
styles?: string[];
|
||||
}
|
||||
|
||||
export type IGetStory = () => NgStory;
|
||||
export type IStoryFn = () => NgStory;
|
||||
|
||||
4
app/angular/src/client/preview/render.js
vendored
4
app/angular/src/client/preview/render.js
vendored
@ -1,6 +1,6 @@
|
||||
import { renderNgApp } from './angular/helpers';
|
||||
|
||||
export default function render({ story, showMain }) {
|
||||
export default function render({ storyFn, showMain }) {
|
||||
showMain();
|
||||
renderNgApp(story);
|
||||
renderNgApp(storyFn);
|
||||
}
|
||||
|
||||
@ -8,7 +8,8 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"directory": "app/ember"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/client/index.js",
|
||||
|
||||
@ -50,8 +50,15 @@ function render(options, el) {
|
||||
});
|
||||
}
|
||||
|
||||
export default function renderMain({ story, selectedKind, selectedStory, showMain, showError }) {
|
||||
const element = story();
|
||||
export default function renderMain({
|
||||
storyFn,
|
||||
selectedKind,
|
||||
selectedStory,
|
||||
showMain,
|
||||
showError,
|
||||
// forceRender,
|
||||
}) {
|
||||
const element = storyFn();
|
||||
|
||||
if (!element) {
|
||||
showError({
|
||||
|
||||
@ -11,7 +11,8 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"directory": "app/html"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/client/index.js",
|
||||
|
||||
@ -4,25 +4,25 @@ import { stripIndents } from 'common-tags';
|
||||
const rootElement = document.getElementById('root');
|
||||
|
||||
export default function renderMain({
|
||||
story,
|
||||
storyFn,
|
||||
selectedKind,
|
||||
selectedStory,
|
||||
showMain,
|
||||
showError,
|
||||
forceRender,
|
||||
}) {
|
||||
const component = story();
|
||||
const element = storyFn();
|
||||
|
||||
showMain();
|
||||
if (typeof component === 'string') {
|
||||
rootElement.innerHTML = component;
|
||||
} else if (component instanceof Node) {
|
||||
if (typeof element === 'string') {
|
||||
rootElement.innerHTML = element;
|
||||
} else if (element instanceof Node) {
|
||||
if (forceRender === true) {
|
||||
return;
|
||||
}
|
||||
|
||||
rootElement.innerHTML = '';
|
||||
rootElement.appendChild(component);
|
||||
rootElement.appendChild(element);
|
||||
} else {
|
||||
showError({
|
||||
title: `Expecting an HTML snippet or DOM node from the story: "${selectedStory}" of "${selectedKind}".`,
|
||||
|
||||
@ -11,7 +11,8 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"directory": "app/marko"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/client/index.js",
|
||||
|
||||
@ -4,8 +4,15 @@ import { stripIndents } from 'common-tags';
|
||||
const rootEl = document.getElementById('root');
|
||||
let currLoadedComponent = null; // currently loaded marko widget!
|
||||
|
||||
export default function renderMain({ story, selectedKind, selectedStory, showMain, showError }) {
|
||||
const element = story();
|
||||
export default function renderMain({
|
||||
storyFn,
|
||||
selectedKind,
|
||||
selectedStory,
|
||||
showMain,
|
||||
showError,
|
||||
// forceRender,
|
||||
}) {
|
||||
const element = storyFn();
|
||||
|
||||
// We need to unmount the existing set of components in the DOM node.
|
||||
if (currLoadedComponent) {
|
||||
|
||||
@ -11,7 +11,8 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"directory": "app/mithril"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/client/index.js",
|
||||
|
||||
@ -6,8 +6,15 @@ import { stripIndents } from 'common-tags';
|
||||
|
||||
const rootEl = document.getElementById('root');
|
||||
|
||||
export default function renderMain({ story, selectedKind, selectedStory, showMain, showError }) {
|
||||
const element = story();
|
||||
export default function renderMain({
|
||||
storyFn,
|
||||
selectedKind,
|
||||
selectedStory,
|
||||
showMain,
|
||||
showError,
|
||||
// forceRender,
|
||||
}) {
|
||||
const element = storyFn();
|
||||
|
||||
if (!element) {
|
||||
const error = {
|
||||
|
||||
@ -11,7 +11,8 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"directory": "app/polymer"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/client/index.js",
|
||||
|
||||
@ -5,16 +5,16 @@ import { html, render, TemplateResult } from 'lit-html';
|
||||
const rootElement = document.getElementById('root');
|
||||
|
||||
export default function renderMain({
|
||||
story,
|
||||
storyFn,
|
||||
selectedKind,
|
||||
selectedStory,
|
||||
showMain,
|
||||
showError,
|
||||
forceRender,
|
||||
}) {
|
||||
const component = story();
|
||||
const element = storyFn();
|
||||
|
||||
if (!component) {
|
||||
if (!element) {
|
||||
showError({
|
||||
title: `Expecting a Polymer component from the story: "${selectedStory}" of "${selectedKind}".`,
|
||||
description: stripIndents`
|
||||
@ -26,18 +26,18 @@ export default function renderMain({
|
||||
}
|
||||
|
||||
showMain();
|
||||
if (typeof component === 'string') {
|
||||
rootElement.innerHTML = component;
|
||||
} else if (component instanceof TemplateResult) {
|
||||
if (typeof element === 'string') {
|
||||
rootElement.innerHTML = element;
|
||||
} else if (element instanceof TemplateResult) {
|
||||
// `render` stores the TemplateInstance in the Node and tries to update based on that.
|
||||
// Since we reuse `rootElement` for all stories, remove the stored instance first.
|
||||
// But forceRender means that it's the same story, so we want too keep the state in that case.
|
||||
if (!forceRender) {
|
||||
render(html``, rootElement);
|
||||
}
|
||||
render(component, rootElement);
|
||||
render(element, rootElement);
|
||||
} else {
|
||||
rootElement.innerHTML = '';
|
||||
rootElement.appendChild(component);
|
||||
rootElement.appendChild(element);
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,7 +11,8 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"directory": "app/preact"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/client/index.js",
|
||||
|
||||
@ -6,8 +6,15 @@ import { stripIndents } from 'common-tags';
|
||||
let renderedStory;
|
||||
const rootElement = document ? document.getElementById('root') : null;
|
||||
|
||||
export default function renderMain({ story, selectedKind, selectedStory, showMain, showError }) {
|
||||
const element = story();
|
||||
export default function renderMain({
|
||||
storyFn,
|
||||
selectedKind,
|
||||
selectedStory,
|
||||
showMain,
|
||||
showError,
|
||||
// forceRender,
|
||||
}) {
|
||||
const element = storyFn();
|
||||
|
||||
if (!element) {
|
||||
showError({
|
||||
|
||||
@ -13,7 +13,8 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"directory": "app/react-native"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
|
||||
@ -11,7 +11,8 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"directory": "app/react"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/client/index.js",
|
||||
@ -33,7 +34,7 @@
|
||||
"@svgr/webpack": "^4.0.3",
|
||||
"babel-plugin-named-asset-import": "^0.3.0",
|
||||
"babel-plugin-react-docgen": "^2.0.2",
|
||||
"babel-preset-react-app": "^7.0.0",
|
||||
"babel-preset-react-app": "^7.0.1",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.6.2",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -14,14 +14,14 @@ function render(node, el) {
|
||||
}
|
||||
|
||||
export default function renderMain({
|
||||
story,
|
||||
storyFn,
|
||||
selectedKind,
|
||||
selectedStory,
|
||||
showMain,
|
||||
showError,
|
||||
forceRender,
|
||||
}) {
|
||||
const element = story();
|
||||
const element = storyFn();
|
||||
|
||||
if (!element) {
|
||||
showError({
|
||||
|
||||
@ -11,7 +11,8 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"directory": "app/riot"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/client/index.js",
|
||||
|
||||
@ -4,7 +4,7 @@ import { unregister } from 'riot';
|
||||
import { render as renderRiot } from './rendering';
|
||||
|
||||
export default function renderMain({
|
||||
story,
|
||||
storyFn,
|
||||
selectedKind,
|
||||
selectedStory,
|
||||
showMain = () => {},
|
||||
@ -15,9 +15,9 @@ export default function renderMain({
|
||||
const rootElement = document.getElementById('root');
|
||||
rootElement.innerHTML = '';
|
||||
rootElement.dataset.is = 'root';
|
||||
const component = story();
|
||||
const rendered = renderRiot(component);
|
||||
if (!rendered)
|
||||
const element = storyFn();
|
||||
const rendered = renderRiot(element);
|
||||
if (!rendered) {
|
||||
showError({
|
||||
title: `Expecting a riot snippet or a riot component from the story: "${selectedStory}" of "${selectedKind}".`,
|
||||
description: stripIndents`
|
||||
@ -25,5 +25,6 @@ export default function renderMain({
|
||||
Use "() => <your snippet or node>" or when defining the story.
|
||||
`,
|
||||
});
|
||||
}
|
||||
return rendered;
|
||||
}
|
||||
|
||||
@ -11,7 +11,8 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"directory": "app/svelte"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/client/index.js",
|
||||
|
||||
@ -42,7 +42,7 @@ function mountView({ Component, target, data, on, Wrapper, WrapperData }) {
|
||||
}
|
||||
|
||||
export default function render({
|
||||
story,
|
||||
storyFn,
|
||||
selectedKind,
|
||||
selectedStory,
|
||||
showMain,
|
||||
@ -58,7 +58,7 @@ export default function render({
|
||||
on,
|
||||
Wrapper,
|
||||
WrapperData,
|
||||
} = story();
|
||||
} = storyFn();
|
||||
|
||||
cleanUpPreviousStory();
|
||||
|
||||
|
||||
@ -11,7 +11,8 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"directory": "app/vue"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/client/index.js",
|
||||
|
||||
@ -18,7 +18,7 @@ const root = new Vue({
|
||||
});
|
||||
|
||||
export default function render({
|
||||
story,
|
||||
storyFn,
|
||||
selectedKind,
|
||||
selectedStory,
|
||||
showMain,
|
||||
@ -28,9 +28,9 @@ export default function render({
|
||||
}) {
|
||||
Vue.config.errorHandler = showException;
|
||||
|
||||
const component = story();
|
||||
const element = storyFn();
|
||||
|
||||
if (!component) {
|
||||
if (!element) {
|
||||
showError({
|
||||
title: `Expecting a Vue component from the story: "${selectedStory}" of "${selectedKind}".`,
|
||||
description: stripIndents`
|
||||
@ -45,10 +45,10 @@ export default function render({
|
||||
|
||||
// at component creation || refresh by HMR
|
||||
if (!root[COMPONENT] || !forceRender) {
|
||||
root[COMPONENT] = component;
|
||||
root[COMPONENT] = element;
|
||||
}
|
||||
|
||||
root[VALUES] = component.options[VALUES];
|
||||
root[VALUES] = element.options[VALUES];
|
||||
|
||||
if (!root.$el) {
|
||||
root.$mount('#root');
|
||||
|
||||
@ -5,7 +5,7 @@ import { MemoryRouter } from 'react-router';
|
||||
import 'bootstrap/dist/css/bootstrap.css';
|
||||
import '../src/css/main.css';
|
||||
|
||||
addDecorator(story => <MemoryRouter>{story()}</MemoryRouter>);
|
||||
addDecorator(storyFn => <MemoryRouter>{storyFn()}</MemoryRouter>);
|
||||
|
||||
function loadStories() {
|
||||
require('../src/stories');
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
module.exports = {
|
||||
pathPrefix: '/docs',
|
||||
siteMetadata: {
|
||||
siteTitle: 'Storybook',
|
||||
baseColor: '#e64074',
|
||||
|
||||
@ -3,7 +3,6 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const sm = require('sitemap');
|
||||
const stripIndent = require('common-tags/lib/stripIndent');
|
||||
|
||||
function pagesToSitemap(pages) {
|
||||
return pages
|
||||
@ -24,26 +23,6 @@ function generateSitemap(pages) {
|
||||
fs.writeFileSync(`${__dirname}/public/sitemap.xml`, sitemap.toString());
|
||||
}
|
||||
|
||||
const generateVersionsFile = () => {
|
||||
// TODO: hard-coded for now
|
||||
// must be generated from pr-log / CHANGELOG.md
|
||||
const data = {
|
||||
latest: {
|
||||
version: '4.0.0',
|
||||
info: {
|
||||
plain: stripIndent`
|
||||
- upgrade webpack & babel to latest
|
||||
- new addParameters and third argument to .add to pass data to addons
|
||||
- added the ability to theme storybook
|
||||
- improved ui for mobile devices
|
||||
- improved performance of addon-knobs
|
||||
`,
|
||||
},
|
||||
},
|
||||
};
|
||||
fs.writeFileSync(`${__dirname}/public/versions.json`, JSON.stringify(data));
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
async onPostBuild({ graphql }) {
|
||||
const result = await graphql(`
|
||||
@ -57,7 +36,6 @@ module.exports = {
|
||||
}
|
||||
}
|
||||
`);
|
||||
generateVersionsFile();
|
||||
generateSitemap(result.data.allSitePage.edges.map(({ node }) => node));
|
||||
},
|
||||
onCreateNode({ node, boundActionCreators, getNode }) {
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
"license": "MIT",
|
||||
"main": "n/a",
|
||||
"scripts": {
|
||||
"build": "gatsby build && cp static/**/* ./public",
|
||||
"build": "gatsby build --prefix-paths && cp static/**/* ./public",
|
||||
"build-storybook": "build-storybook",
|
||||
"dev": "gatsby develop",
|
||||
"serve": "gatsby serve",
|
||||
@ -19,12 +19,12 @@
|
||||
"prepare": "npm run snyk-protect"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "5.0.0-alpha.5",
|
||||
"@storybook/addon-links": "5.0.0-alpha.5",
|
||||
"@storybook/addons": "5.0.0-alpha.5",
|
||||
"@storybook/react": "5.0.0-alpha.5",
|
||||
"@storybook/addon-actions": "5.0.0-rc.1",
|
||||
"@storybook/addon-links": "5.0.0-rc.1",
|
||||
"@storybook/addons": "5.0.0-rc.1",
|
||||
"@storybook/react": "5.0.0-rc.1",
|
||||
"babel-loader": "^6.4.1",
|
||||
"bootstrap": "^4.3.0",
|
||||
"bootstrap": "^4.3.1",
|
||||
"common-tags": "^1.8.0",
|
||||
"gatsby": "^1.9.279",
|
||||
"gatsby-link": "^1.6.45",
|
||||
@ -39,7 +39,7 @@
|
||||
"highlight.js": "^9.14.2",
|
||||
"lodash": "^4.17.11",
|
||||
"marked": "^0.5.2",
|
||||
"prop-types": "^15.7.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^15.6.2",
|
||||
"react-document-title": "^2.0.3",
|
||||
"react-dom": "^15.6.2",
|
||||
@ -47,7 +47,7 @@
|
||||
"react-router": "^4.3.1",
|
||||
"react-stack-grid": "^0.7.1",
|
||||
"sitemap": "^2.1.0",
|
||||
"snyk": "^1.126.0"
|
||||
"snyk": "^1.134.2"
|
||||
},
|
||||
"snyk": true
|
||||
}
|
||||
|
||||
@ -79,7 +79,7 @@ import { storiesOf } from '@storybook/react';
|
||||
import MyComponent from '../my_component';
|
||||
|
||||
storiesOf('MyComponent', module)
|
||||
.addDecorator(story => <div style={{ textAlign: 'center' }}>{story()}</div>)
|
||||
.addDecorator(storyFn => <div style={{ textAlign: 'center' }}>{storyFn()}</div>)
|
||||
.add('without props', () => <MyComponent />)
|
||||
.add('with some props', () => <MyComponent text="The Comp" />);
|
||||
```
|
||||
@ -92,7 +92,7 @@ It is possible to apply a decorator **globally** to all the stories. Here is an
|
||||
import React from 'react';
|
||||
import { configure, addDecorator } from '@storybook/react';
|
||||
|
||||
addDecorator(story => <div style={{ textAlign: 'center' }}>{story()}</div>);
|
||||
addDecorator(storyFn => <div style={{ textAlign: 'center' }}>{storyFn()}</div>);
|
||||
|
||||
configure(function() {
|
||||
// ...
|
||||
|
||||
@ -77,7 +77,8 @@ This is for the default configuration where `/stories` is a peer of `src`. If yo
|
||||
|
||||
## Setting up TypeScript with babel-loader
|
||||
|
||||
When using latest create-react-app (CRA 2.0), Babel 7 has native TypeScript support. Setup becomes easier.
|
||||
When using latest create-react-app (CRA 2.0), Babel 7 has native TypeScript support. Setup becomes easier.
|
||||
For a full working demo (that also uses react-docgen-typescript-loader) you can check out this [repo](https://github.com/johot/storybook4-cra2-typescript-react-docgen-typescript-demo).
|
||||
|
||||
### Dependencies you may need
|
||||
|
||||
|
||||
14
docs/static/versions.json
vendored
Normal file
14
docs/static/versions.json
vendored
Normal file
@ -0,0 +1,14 @@
|
||||
{
|
||||
"next": {
|
||||
"version": "5.0.0-rc.5",
|
||||
"info": {
|
||||
"plain": "### Bug Fixes\n\n* UI: Fix `/` search hotkey so it doesn't type into the input ([#5702](https://github.com/storybooks/storybook/pull/5702))\n* Addon-a11y: Fix a11y setup being undefined ([#5724](https://github.com/storybooks/storybook/pull/5724))\n* UI: Fix duplicate theming packages ([#5722](https://github.com/storybooks/storybook/pull/5722))\n* Core: Clean up debug logging ([#5705](https://github.com/storybooks/storybook/pull/5705))\n* UI: Minor addon ux tweaks ([#5712](https://github.com/storybooks/storybook/pull/5712))\n* Addon-a11y: Fix story scrolling ([#5713](https://github.com/storybooks/storybook/pull/5713))\n* UI: Fix mobile styling ([#5709](https://github.com/storybooks/storybook/pull/5709))\n* UI: Fix tooltip bugs ([#5692](https://github.com/storybooks/storybook/pull/5692))\n* UI: Fix toolbar separators ([#5711](https://github.com/storybooks/storybook/pull/5711))\n\n### Maintenance\n\n* Typescript: migrate addon-backgrounds ([#5535](https://github.com/storybooks/storybook/pull/5535))\n* Typescript: fix typings for addon-backgrounds ([#5730](https://github.com/storybooks/storybook/pull/5730))"
|
||||
}
|
||||
},
|
||||
"latest": {
|
||||
"version": "4.1.13",
|
||||
"info": {
|
||||
"plain": "### Maintenance\n\n* Cleanup CLI version notice ([#5699](https://github.com/storybooks/storybook/pull/5699))\n* Use static versions.json file instead of hacking one in ([#5675](https://github.com/storybooks/storybook/pull/5675))"
|
||||
}
|
||||
}
|
||||
}
|
||||
1959
docs/yarn.lock
1959
docs/yarn.lock
File diff suppressed because it is too large
Load Diff
@ -22,7 +22,7 @@
|
||||
"@angular/core": "^7.2.1",
|
||||
"@angular/forms": "^7.2.1",
|
||||
"@angular/platform-browser": "^7.2.1",
|
||||
"@angular/platform-browser-dynamic": "^7.2.4",
|
||||
"@angular/platform-browser-dynamic": "^7.2.6",
|
||||
"@ngrx/store": "^7.2.0",
|
||||
"core-js": "^2.6.2",
|
||||
"rxjs": "^6.3.3",
|
||||
@ -31,7 +31,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^0.11.4",
|
||||
"@angular/cli": "^7.3.0",
|
||||
"@angular/cli": "^7.3.2",
|
||||
"@angular/compiler-cli": "^7.2.1",
|
||||
"@storybook/addon-actions": "5.0.0-beta.3",
|
||||
"@storybook/addon-backgrounds": "5.0.0-beta.3",
|
||||
@ -46,7 +46,7 @@
|
||||
"@storybook/addons": "5.0.0-beta.3",
|
||||
"@storybook/angular": "5.0.0-beta.3",
|
||||
"@types/core-js": "^2.5.0",
|
||||
"@types/jest": "^24.0.0",
|
||||
"@types/jest": "^24.0.6",
|
||||
"@types/node": "~10.12.19",
|
||||
"@types/webpack-env": "^1.13.7",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
"dependencies": {
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.6.2",
|
||||
"react": "^16.8.1",
|
||||
"react": "^16.8.2",
|
||||
"react-dom": "^16.8.1",
|
||||
"react-lifecycles-compat": "^3.0.4"
|
||||
},
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^16.8.1",
|
||||
"react": "^16.8.2",
|
||||
"react-dom": "^16.8.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -85,9 +85,9 @@ storiesOf('Addons|Events', module)
|
||||
],
|
||||
})
|
||||
)
|
||||
.addDecorator(story => {
|
||||
.addDecorator(storyFn => {
|
||||
addons.getChannel().emit(CoreEvents.REGISTER_SUBSCRIPTION, subscription);
|
||||
return story();
|
||||
return storyFn();
|
||||
})
|
||||
.add(
|
||||
'Logger',
|
||||
|
||||
@ -5,7 +5,8 @@
|
||||
"description": "Demo of how to build an app using marko-starter",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/marko-js-samples/marko-starter-demo"
|
||||
"url": "https://github.com/marko-js-samples/marko-starter-demo",
|
||||
"directory": "examples/marko-cli"
|
||||
},
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
|
||||
@ -33,15 +33,21 @@ addDecorator(withCssResources);
|
||||
addDecorator(withA11Y);
|
||||
addDecorator(withNotes);
|
||||
|
||||
addDecorator(fn => (
|
||||
addDecorator(storyFn => (
|
||||
<ThemeProvider theme={themes.normal}>
|
||||
<Global styles={createReset} />
|
||||
{fn()}
|
||||
{storyFn()}
|
||||
</ThemeProvider>
|
||||
));
|
||||
|
||||
addParameters({
|
||||
a11y: {},
|
||||
a11y: {
|
||||
configure: {},
|
||||
options: {
|
||||
checks: { 'color-contrast': { options: { noScroll: true } } },
|
||||
restoreScroll: true,
|
||||
},
|
||||
},
|
||||
options: {
|
||||
name: 'Storybook',
|
||||
hierarchySeparator: /\/|\./,
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
"jest-emotion": "^10.0.7",
|
||||
"paths.macro": "^2.0.2",
|
||||
"prop-types": "^15.6.2",
|
||||
"react": "^16.8.1",
|
||||
"react": "^16.8.2",
|
||||
"react-dom": "^16.8.1",
|
||||
"storybook-chromatic": "^1.2.6",
|
||||
"ts-loader": "^5.3.3",
|
||||
|
||||
@ -83,9 +83,9 @@ storiesOf('Addons|Events.deprecated', module)
|
||||
selectedPanel: 'storybook/events/panel',
|
||||
},
|
||||
})
|
||||
.addDecorator(story => (
|
||||
.addDecorator(storyFn => (
|
||||
<WithEvents emit={emit} events={events}>
|
||||
{story()}
|
||||
{storyFn()}
|
||||
</WithEvents>
|
||||
))
|
||||
.add('Logger', () => <Logger emitter={emitter} />);
|
||||
|
||||
@ -49,10 +49,10 @@ storiesOf('Addons|Links.Href', module).add(
|
||||
);
|
||||
|
||||
storiesOf('Addons|Links.Scroll position', module)
|
||||
.addDecorator(story => (
|
||||
.addDecorator(storyFn => (
|
||||
<Fragment>
|
||||
<div style={{ marginBottom: '100vh' }}>Scroll down to see the link</div>
|
||||
{story()}
|
||||
{storyFn()}
|
||||
</Fragment>
|
||||
))
|
||||
.add('First', () => <LinkTo story="Second">Go to Second</LinkTo>)
|
||||
|
||||
29
examples/official-storybook/stories/core/scroll.stories.js
Normal file
29
examples/official-storybook/stories/core/scroll.stories.js
Normal file
@ -0,0 +1,29 @@
|
||||
import React from 'react';
|
||||
|
||||
export default {
|
||||
title: 'Core|Scroll',
|
||||
};
|
||||
|
||||
export const story1 = () => (
|
||||
<div>
|
||||
<pre>START, when switching stories, you should be able to read this at the top of the page</pre>
|
||||
<div style={{ height: '100vh' }} />
|
||||
<pre>
|
||||
END, this text should be below the scroll "fold" and therefore only be readable after
|
||||
scrolling
|
||||
</pre>
|
||||
</div>
|
||||
);
|
||||
story1.title = 'story with 100vh padding 1';
|
||||
|
||||
export const story2 = () => (
|
||||
<div>
|
||||
<pre>START, when switching stories, you should be able to read this at the top of the page</pre>
|
||||
<div style={{ height: '100vh' }} />
|
||||
<pre>
|
||||
END, this text should be below the scroll "fold" and therefore only be readable after
|
||||
scrolling
|
||||
</pre>
|
||||
</div>
|
||||
);
|
||||
story2.title = 'story with 100vh padding 2';
|
||||
File diff suppressed because it is too large
Load Diff
@ -2,8 +2,8 @@ import { storiesOf } from '@storybook/polymer';
|
||||
import { document } from 'global';
|
||||
|
||||
storiesOf('Custom|Decorator', module)
|
||||
.addDecorator(story => {
|
||||
const el = story();
|
||||
.addDecorator(storyFn => {
|
||||
const el = storyFn();
|
||||
el.setAttribute('title', `${el.getAttribute('title')} - decorated`);
|
||||
return el;
|
||||
})
|
||||
|
||||
@ -3,9 +3,9 @@ import { storiesOf } from '@storybook/vue';
|
||||
import MyButton from './Button.vue';
|
||||
|
||||
storiesOf('Custom|Decorator for Vue', module)
|
||||
.addDecorator(story => {
|
||||
// Decorated with story function
|
||||
const WrapButton = story();
|
||||
.addDecorator(storyFn => {
|
||||
// Decorated with story-function
|
||||
const WrapButton = storyFn();
|
||||
return {
|
||||
components: { WrapButton },
|
||||
template: '<div :style="{ border: borderStyle }"><wrap-button/></div>',
|
||||
|
||||
@ -11,7 +11,8 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"directory": "lib/addons"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/public_api.js",
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user