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

Merge branch 'next' of github.com:storybookjs/storybook into state-to-props

Browse Source
This commit is contained in:
Jessica-Koch 2019-08-29 20:34:57 -07:00
commit 41be7a5847
152 changed files with 1742 additions and 1254 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.github/CODEOWNERS vendored
View File

@ -7,12 +7,12 @@
/addons/centered/ @kazupon
/addons/events/ @z4o4z @ndelangen
/addons/graphql/ @mnmtanish
/addons/info/ @theinterned @z4o4z @UsulPro @dangreenisrael @danielduan
/addons/info/ @theinterned @z4o4z @UsulPro @dangreenisrael
/addons/jest/ @renaudtertrais
/addons/knobs/ @alexandrebodin @theinterned @leonrodenburg @alterx
/addons/links/ @ndelangen
/addons/notes/ @alexandrebodin
/addons/options/ @danielduan @UsulPro
/addons/options/ @UsulPro
/addons/storyshots/ @igor-dv @thomasbertet
/addons/storysource/ @igor-dv
/addons/viewport/ @saponifi3d
@ -20,7 +20,7 @@
/app/angular/ @alterx @igor-dv
/app/polymer/ @ndelangen @naipath @leonrodenburg
/app/react/ @xavcz @shilman @thomasbertet
/app/react-native/ @rmevans9 @danielduan @Gongreg @tmeasday
/app/react-native/ @rmevans9 @Gongreg @tmeasday
/app/vue/ @thomasbertet @kazupon
/app/svelte/ @plumpNation
@ -29,12 +29,12 @@
/examples/angular-cli/ @igor-dv @alterx
/examples/cra-kitchen-sink/ @ndelangen @UsulPro
/examples/cra-ts-kitchen-sink/ @mucsi96
/examples/official-storybook/ @danielduan @UsulPro
/examples/official-storybook/ @UsulPro
/examples/polymer-cli/ @naipath @igor-dv
/examples/vue-kitchen-sink/ @igor-dv @alexandrebodin
/examples/svelte-kitchen-sink/ @plumpNation
/examples-native/crna-kitchen-sink/ @Gongreg @danielduan
/examples-native/crna-kitchen-sink/ @Gongreg
/lib/addons/ @ndelangen @theinterned
/lib/channel-postmessage/ @mnmtanish @ndelangen

66
CHANGELOG.md
View File

@ -1,3 +1,69 @@
## 5.2.0-beta.47 (August 30, 2019)
### Bug Fixes
* UI: Optimize treeview render/filter performance ([#7910](https://github.com/storybookjs/storybook/pull/7910))
* Addon-docs: Fix DocsPage to respect displayName ([#7915](https://github.com/storybookjs/storybook/pull/7915))
## 5.2.0-beta.46 (August 29, 2019)
CSF users: this reverts the `makeDisplayName` change introduced in `5.2.0-beta.43` for maintainability reasons. See [#7901](https://github.com/storybookjs/storybook/pull/7901) for full rationale. And apologies for the inconvenience!
### Bug Fixes
* React: Fix missing props in the Welcome.tsx demo ([#7774](https://github.com/storybookjs/storybook/pull/7774))
### Maintenance
* CSF: Revert `makeDisplayName` & add stable `storyNameFromExport` ([#7901](https://github.com/storybookjs/storybook/pull/7901))
* Addon-a11y: Upgrade axe to 3.3.2 which adds/mods rules ([#7888](https://github.com/storybookjs/storybook/pull/7888))
## 5.2.0-beta.45 (August 28, 2019)
### Bug Fixes
* Addon-docs: Fix MDX Story ID to match new CSF ([#7894](https://github.com/storybookjs/storybook/pull/7894))
## 5.2.0-beta.44 (August 28, 2019)
Publish failed
## 5.2.0-beta.43 (August 28, 2019)
CSF users: This is potentially a breaking change. If you want to opt-out of the new default display name calculation (`lodash.startCase`) you can add the following to your SB config:
```js
addParameters({ options: { makeDisplayName: key => key }});
```
### Features
* CSF: Transform CSF named exports w/ `makeDisplayName` ([#7878](https://github.com/storybookjs/storybook/pull/7878))
## 5.2.0-beta.42 (August 28, 2019)
Addon-docs users: This is a breaking change if you have been hacking the `docs` parameter manually. If you're using the zero-config option for `DocsPage` or `MDX`, you should be unaffected by it.
### Maintenance
* Addon-docs: Make config API consistent with other addons ([#7874](https://github.com/storybookjs/storybook/pull/7874))
## 5.2.0-beta.41 (August 27, 2019)
### Features
* Addon-info: Add configurable component comparator ([#7409](https://github.com/storybookjs/storybook/pull/7409))
### Bug Fixes
* Addon-viewports: Add back default viewports ([#7448](https://github.com/storybookjs/storybook/pull/7448))
* Core: Pass a separate hooks context per story ([#7860](https://github.com/storybookjs/storybook/pull/7860))
* UI: Fix TooltipLinkList not scrollable ([#7865](https://github.com/storybookjs/storybook/pull/7865))
### Maintenance
* UI: Add ignore `first-child` selector warning flag ([#7861](https://github.com/storybookjs/storybook/pull/7861))
## 5.2.0-beta.40 (August 23, 2019)
### Bug Fixes

15
MIGRATION.md
View File

@ -67,6 +67,21 @@
## From version 5.1.x to 5.2.x
### default viewports
The default viewports have been reduced to a smaller set, we think is enough for most usecases.
You can get the old default back by adding the following to your `config.js`:
```js
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
addParameters({
viewport: {
viewports: INITIAL_VIEWPORTS,
},
});
```
### Grid toolbar-feature
The grid feature in the toolbar has been relocated to [addon-background](https://github.com/storybookjs/storybook/tree/next/addons/backgrounds), follow the setup intructions on that addon to get the feature again.

16
addons/a11y/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-a11y",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"description": "a11y addon for storybook",
"keywords": [
"a11y",
@ -26,13 +26,13 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-beta.40",
"@storybook/api": "5.2.0-beta.40",
"@storybook/client-logger": "5.2.0-beta.40",
"@storybook/components": "5.2.0-beta.40",
"@storybook/core-events": "5.2.0-beta.40",
"@storybook/theming": "5.2.0-beta.40",
"axe-core": "^3.2.2",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/api": "5.2.0-beta.47",
"@storybook/client-logger": "5.2.0-beta.47",
"@storybook/components": "5.2.0-beta.47",
"@storybook/core-events": "5.2.0-beta.47",
"@storybook/theming": "5.2.0-beta.47",
"axe-core": "^3.3.2",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",

14
addons/actions/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-actions",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"description": "Action Logger addon for storybook",
"keywords": [
"storybook"
@ -21,12 +21,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-beta.40",
"@storybook/api": "5.2.0-beta.40",
"@storybook/client-api": "5.2.0-beta.40",
"@storybook/components": "5.2.0-beta.40",
"@storybook/core-events": "5.2.0-beta.40",
"@storybook/theming": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/api": "5.2.0-beta.47",
"@storybook/client-api": "5.2.0-beta.47",
"@storybook/components": "5.2.0-beta.47",
"@storybook/core-events": "5.2.0-beta.47",
"@storybook/theming": "5.2.0-beta.47",
"core-js": "^3.0.1",
"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.2.0-beta.40",
"version": "5.2.0-beta.47",
"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.2.0-beta.40",
"@storybook/api": "5.2.0-beta.40",
"@storybook/client-logger": "5.2.0-beta.40",
"@storybook/components": "5.2.0-beta.40",
"@storybook/core-events": "5.2.0-beta.40",
"@storybook/theming": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/api": "5.2.0-beta.47",
"@storybook/client-logger": "5.2.0-beta.47",
"@storybook/components": "5.2.0-beta.47",
"@storybook/core-events": "5.2.0-beta.47",
"@storybook/theming": "5.2.0-beta.47",
"core-js": "^3.0.1",
"memoizerific": "^1.11.3",
"react": "^16.8.3",

2
addons/centered/README.md
View File

@ -4,6 +4,8 @@ Storybook Centered Decorator can be used to center components inside the preview
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
⚠️ This addon applies styling to the view in order to center the component. This may impact the look and feel of story.
### Usage
```sh

4
addons/centered/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-centered",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"description": "Storybook decorator to center components",
"keywords": [
"addon",
@ -23,7 +23,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.47",
"core-js": "^3.0.1",
"global": "^4.3.2",
"util-deprecate": "^1.0.2"

10
addons/contexts/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-contexts",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"description": "Storybook Addon Contexts",
"keywords": [
"storybook",
@ -28,10 +28,10 @@
"dev:check-types": "tsc --noEmit"
},
"dependencies": {
"@storybook/addons": "5.2.0-beta.40",
"@storybook/api": "5.2.0-beta.40",
"@storybook/components": "5.2.0-beta.40",
"@storybook/core-events": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/api": "5.2.0-beta.47",
"@storybook/components": "5.2.0-beta.47",
"@storybook/core-events": "5.2.0-beta.47",
"core-js": "^3.0.1"
},
"peerDependencies": {

10
addons/cssresources/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-cssresources",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"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.2.0-beta.40",
"@storybook/api": "5.2.0-beta.40",
"@storybook/components": "5.2.0-beta.40",
"@storybook/core-events": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/api": "5.2.0-beta.47",
"@storybook/components": "5.2.0-beta.47",
"@storybook/core-events": "5.2.0-beta.47",
"core-js": "^3.0.1",
"global": "^4.3.2",
"react": "^16.8.3"

14
addons/design-assets/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-design-assets",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"description": "Design asset preview for storybook",
"keywords": [
"addon",
@ -27,12 +27,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-beta.40",
"@storybook/api": "5.2.0-beta.40",
"@storybook/client-logger": "5.2.0-beta.40",
"@storybook/components": "5.2.0-beta.40",
"@storybook/core-events": "5.2.0-beta.40",
"@storybook/theming": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/api": "5.2.0-beta.47",
"@storybook/client-logger": "5.2.0-beta.47",
"@storybook/components": "5.2.0-beta.47",
"@storybook/core-events": "5.2.0-beta.47",
"@storybook/theming": "5.2.0-beta.47",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",

6
addons/docs/README.md
View File

@ -189,8 +189,10 @@ import { addParameters } from '@storybook/react';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
addParameters({
docsContainer: DocsContainer,
docs: DocsPage,
docs: {
container: DocsContainer,
page: DocsPage,
},
});
```

8
addons/docs/docs/docspage.md
View File

@ -196,7 +196,7 @@ And here are the return type signatures for each of the slot functions
What if you don't want a `DocsPage` for your storybook, for a specific component, or even for a specific story?
You can replace DocsPage at any level by overriding the `docs` parameter:
You can replace DocsPage at any level by overriding the `docs.page` parameter:
- With `null` to remove docs
- [With MDX](#csf-stories-with-mdx-docs) docs
@ -206,7 +206,7 @@ You can replace DocsPage at any level by overriding the `docs` parameter:
```js
import { addParameters } from '@storybook/react';
addParameters({ docs: null });
addParameters({ docs: { page: null } });
```
**Component-level (Button.stories.js)**
@ -216,7 +216,7 @@ import { Button } from './Button';
export default {
title: 'Demo/Button',
component: Button,
parameters: { docs: null },
parameters: { docs: { page: null } },
};
```
@ -227,7 +227,7 @@ import { Button } from './Button';
// export default { ... }
export const basic => () => <Button>Basic</Button>
basic.story = {
parameters: { docs: null }
parameters: { docs: { page: null } }
}
```

4
addons/docs/docs/recipes.md
View File

@ -56,7 +56,9 @@ import mdx from './Button.mdx';
export default {
title: 'Demo/Button',
parameters: {
docs: mdx,
docs: {
page: mdx,
},
},
};

14
addons/docs/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-docs",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"description": "Superior documentation for your components",
"keywords": [
"addon",
@ -29,12 +29,12 @@
"@mdx-js/loader": "^1.1.0",
"@mdx-js/mdx": "^1.1.0",
"@mdx-js/react": "^1.0.27",
"@storybook/addons": "5.2.0-beta.40",
"@storybook/api": "5.2.0-beta.40",
"@storybook/components": "5.2.0-beta.40",
"@storybook/router": "5.2.0-beta.40",
"@storybook/source-loader": "5.2.0-beta.40",
"@storybook/theming": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/api": "5.2.0-beta.47",
"@storybook/components": "5.2.0-beta.47",
"@storybook/router": "5.2.0-beta.47",
"@storybook/source-loader": "5.2.0-beta.47",
"@storybook/theming": "5.2.0-beta.47",
"core-js": "^3.0.1",
"global": "^4.3.2",
"js-string-escape": "^1.0.1",

2
addons/docs/src/blocks/DocsContainer.tsx
View File

@ -47,7 +47,7 @@ export const DocsContainer: React.FunctionComponent<DocsContainerProps> = ({
const parameters = (context && context.parameters) || {};
const options = parameters.options || {};
const theme = ensureTheme(options.theme);
const { components: userComponents = null } = options.docs || {};
const { components: userComponents = null } = parameters.docs || {};
const components = { ...defaultComponents, ...userComponents };
return (
<DocsContext.Provider value={context}>

12
addons/docs/src/blocks/DocsContext.ts
View File

@ -6,15 +6,11 @@ export interface DocsContextProps {
selectedStory?: string;
/**
* mdxKind is a statically-generated "kind" that corresponds to the
* component that's being documented in the MDX file, It's combined
* with the MDX story name `<Story name='story name'>...</Story>` to
* generate a storyId. In the case that the user is viewing a non-MDX
* story, the value of `mdxKind` will be the currently-selected kind.
* (I can't remember the corner case in which using the currentl-selected
* kind breaks down in MDX-defined stories, but there is one!)
* mdxStoryNameToId is an MDX-compiler-generated mapping of an MDX story's
* display name to its storyId. It's used internally by the `<Story>`
* doc block.
*/
mdxKind?: string;
mdxStoryNameToId?: Record<string, string>;
parameters?: any;
storyStore?: any;
forceRender?: () => void;

8
addons/docs/src/blocks/DocsPage.tsx
View File

@ -37,6 +37,7 @@ interface DocsStoryProps {
description?: string;
expanded?: boolean;
withToolbar?: boolean;
parameters?: any;
}
interface StoryData {
@ -84,9 +85,10 @@ const DocsStory: React.FunctionComponent<DocsStoryProps> = ({
description,
expanded = true,
withToolbar = false,
parameters,
}) => (
<>
{expanded && <StoryHeading>{name}</StoryHeading>}
{expanded && <StoryHeading>{(parameters && parameters.displayName) || name}</StoryHeading>}
{expanded && description && <Description markdown={description} />}
<Preview withToolbar={withToolbar}>
<Story id={id} />
@ -110,9 +112,7 @@ export const DocsPage: React.FunctionComponent<DocsPageProps> = ({
const propsTableProps = propsSlot(context);
const { selectedKind, storyStore } = context;
const componentStories = (storyStore.raw() as StoryData[]).filter(
s => s.kind === selectedKind
);
const componentStories = storyStore.getStoriesForKind(selectedKind);
const primary = primarySlot(componentStories, context);
const stories = storiesSlot(componentStories, context);

5
addons/docs/src/blocks/Preview.tsx
View File

@ -1,6 +1,5 @@
import React, { ReactNodeArray } from 'react';
import { Preview as PurePreview, PreviewProps as PurePreviewProps } from '@storybook/components';
import { toId } from '@storybook/router';
import { getSourceProps } from './Source';
import { DocsContext, DocsContextProps } from './DocsContext';
@ -20,7 +19,7 @@ const getPreviewProps = (
children,
...props
}: PreviewProps & { children?: React.ReactNode },
{ mdxKind, storyStore }: DocsContextProps
{ mdxStoryNameToId, storyStore }: DocsContextProps
): PurePreviewProps => {
if (withSource === SourceState.NONE && !children) {
return props;
@ -29,7 +28,7 @@ const getPreviewProps = (
const stories = childArray.filter(
(c: React.ReactElement) => c.props && (c.props.id || c.props.name)
) as React.ReactElement[];
const targetIds = stories.map(s => s.props.id || toId(mdxKind, s.props.name));
const targetIds = stories.map(s => s.props.id || mdxStoryNameToId[s.props.name]);
const sourceProps = getSourceProps({ ids: targetIds }, { storyStore });
return {
...props, // pass through columns etc.

9
addons/docs/src/blocks/Props.tsx
View File

@ -23,17 +23,16 @@ export const getPropsTableProps = (
{ exclude, of }: PropsProps,
{ parameters }: DocsContextProps
): PropsTableProps => {
const { component } = parameters;
try {
const params = parameters || {};
const { component, framework = null } = params;
const target = of === CURRENT_SELECTION ? component : of;
if (!target) {
throw new Error(PropsTableError.NO_COMPONENT);
}
const { framework = null } = parameters || {};
const { getPropDefs = inferPropDefs(framework) } =
(parameters && parameters.options && parameters.options.docs) || {};
const { getPropDefs = inferPropDefs(framework) } = params.docs || {};
if (!getPropDefs) {
throw new Error(PropsTableError.PROPS_UNSUPPORTED);
}

7
addons/docs/src/blocks/Story.tsx
View File

@ -1,5 +1,4 @@
import React from 'react';
import { toId } from '@storybook/router';
import { Story, StoryProps as PureStoryProps } from '@storybook/components';
import { CURRENT_SELECTION } from './shared';
@ -32,12 +31,12 @@ const inferInlineStories = (framework: string): boolean => {
export const getStoryProps = (
props: StoryProps,
{ id: currentId, storyStore, parameters, mdxKind }: DocsContextProps
{ id: currentId, storyStore, parameters, mdxStoryNameToId }: DocsContextProps
): PureStoryProps => {
const { id } = props as StoryRefProps;
const { name } = props as StoryDefProps;
const inputId = id === CURRENT_SELECTION ? currentId : id;
const previewId = inputId || toId(mdxKind, name);
const previewId = inputId || mdxStoryNameToId[name];
const { height, inline } = props;
const data = storyStore.fromId(previewId);
@ -45,7 +44,7 @@ export const getStoryProps = (
// prefer props, then global options, then framework-inferred values
const { inlineStories = inferInlineStories(framework), iframeHeight = undefined } =
(parameters && parameters.options && parameters.options.docs) || {};
(parameters && parameters.docs) || {};
return {
inline: typeof inline === 'boolean' ? inline : inlineStories,
id: previewId,

6
addons/docs/src/frameworks/angular/config.js vendored
View File

@ -3,6 +3,8 @@ import { addParameters } from '@storybook/angular';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
addParameters({
docsContainer: DocsContainer,
docs: DocsPage,
docs: {
container: DocsContainer,
page: DocsPage,
},
});

6
addons/docs/src/frameworks/html/config.js
View File

@ -3,6 +3,8 @@ import { addParameters } from '@storybook/html';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
addParameters({
docsContainer: DocsContainer,
docs: DocsPage,
docs: {
container: DocsContainer,
page: DocsPage,
},
});

6
addons/docs/src/frameworks/react/config.js
View File

@ -3,6 +3,8 @@ import { addParameters } from '@storybook/react';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
addParameters({
docsContainer: DocsContainer,
docs: DocsPage,
docs: {
container: DocsContainer,
page: DocsPage,
},
});

6
addons/docs/src/frameworks/vue/config.js
View File

@ -3,6 +3,8 @@ import { addParameters } from '@storybook/vue';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
addParameters({
docsContainer: DocsContainer,
docs: DocsPage,
docs: {
container: DocsContainer,
page: DocsPage,
},
});

184
addons/docs/src/mdx/__snapshots__/mdx-compiler-plugin.test.js.snap
View File

@ -53,6 +53,7 @@ MDXContent.isMDXComponent = true;
export const one = () => <Button>One</Button>;
one.story = {};
one.story.name = 'one';
one.story.parameters = { mdxSource: '<Button>One</Button>' };
one.story.decorators = [storyFn => <div className=\\"local\\">{storyFn()}</div>];
@ -72,12 +73,15 @@ const componentMeta = {
includeStories: ['one'],
};
const mdxKind = componentMeta.title;
const mdxStoryNameToId = { one: 'button--one' };
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docsContainer = ({ context, children }) => (
<DocsContainer context={{ ...context, mdxKind }}>{children}</DocsContainer>
);
componentMeta.parameters.docs = MDXContent;
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
),
page: MDXContent,
};
export default componentMeta;
"
@ -117,20 +121,23 @@ function MDXContent({ components, ...props }) {
MDXContent.isMDXComponent = true;
export const storybookDocsOnly = () => {
export const __page = () => {
throw new Error('Docs-only story');
};
storybookDocsOnly.story = { parameters: { docsOnly: true } };
__page.story = { parameters: { docsOnly: true } };
const componentMeta = { title: 'docs-only', includeStories: ['storybookDocsOnly'] };
const componentMeta = { title: 'docs-only', includeStories: ['__page'] };
const mdxStoryNameToId = {};
const mdxKind = componentMeta.title;
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docsContainer = ({ context, children }) => (
<DocsContainer context={{ ...context, mdxKind }}>{children}</DocsContainer>
);
componentMeta.parameters.docs = MDXContent;
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
),
page: MDXContent,
};
export default componentMeta;
"
@ -177,6 +184,7 @@ MDXContent.isMDXComponent = true;
export const one = () => <Button>One</Button>;
one.story = {};
one.story.name = 'one';
one.story.parameters = { mdxSource: '<Button>One</Button>' };
export const helloStory = () => <Button>Hello button</Button>;
@ -186,12 +194,15 @@ helloStory.story.parameters = { mdxSource: '<Button>Hello button</Button>' };
const componentMeta = { title: 'Button', includeStories: ['one', 'helloStory'] };
const mdxKind = componentMeta.title;
const mdxStoryNameToId = { one: 'button--one', 'hello story': 'button--hello-story' };
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docsContainer = ({ context, children }) => (
<DocsContainer context={{ ...context, mdxKind }}>{children}</DocsContainer>
);
componentMeta.parameters.docs = MDXContent;
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
),
page: MDXContent,
};
export default componentMeta;
"
@ -268,12 +279,18 @@ const componentMeta = {
includeStories: ['componentNotes', 'storyNotes'],
};
const mdxKind = componentMeta.title;
const mdxStoryNameToId = {
'component notes': 'button--component-notes',
'story notes': 'button--story-notes',
};
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docsContainer = ({ context, children }) => (
<DocsContainer context={{ ...context, mdxKind }}>{children}</DocsContainer>
);
componentMeta.parameters.docs = MDXContent;
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
),
page: MDXContent,
};
export default componentMeta;
"
@ -334,6 +351,7 @@ helloButton.story.parameters = { mdxSource: '<Button>Hello button</Button>' };
export const two = () => <Button>Two</Button>;
two.story = {};
two.story.name = 'two';
two.story.parameters = { mdxSource: '<Button>Two</Button>' };
const componentMeta = {
@ -344,12 +362,15 @@ const componentMeta = {
includeStories: ['helloButton', 'two'],
};
const mdxKind = componentMeta.title;
const mdxStoryNameToId = { 'hello button': 'button--hello-button', two: 'button--two' };
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docsContainer = ({ context, children }) => (
<DocsContainer context={{ ...context, mdxKind }}>{children}</DocsContainer>
);
componentMeta.parameters.docs = MDXContent;
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
),
page: MDXContent,
};
export default componentMeta;
"
@ -386,12 +407,15 @@ MDXContent.isMDXComponent = true;
const componentMeta = { includeStories: [] };
const mdxKind = componentMeta.title;
const mdxStoryNameToId = {};
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docsContainer = ({ context, children }) => (
<DocsContainer context={{ ...context, mdxKind }}>{children}</DocsContainer>
);
componentMeta.parameters.docs = MDXContent;
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
),
page: MDXContent,
};
export default componentMeta;
"
@ -431,16 +455,20 @@ MDXContent.isMDXComponent = true;
export const text = () => 'Plain text';
text.story = {};
text.story.name = 'text';
text.story.parameters = { mdxSource: \\"'Plain text'\\" };
const componentMeta = { title: 'Text', includeStories: ['text'] };
const mdxKind = componentMeta.title;
const mdxStoryNameToId = { text: 'text--text' };
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docsContainer = ({ context, children }) => (
<DocsContainer context={{ ...context, mdxKind }}>{children}</DocsContainer>
);
componentMeta.parameters.docs = MDXContent;
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
),
page: MDXContent,
};
export default componentMeta;
"
@ -487,6 +515,7 @@ MDXContent.isMDXComponent = true;
export const one = () => <Button>One</Button>;
one.story = {};
one.story.name = 'one';
one.story.parameters = { mdxSource: '<Button>One</Button>' };
export const helloStory = () => <Button>Hello button</Button>;
@ -501,12 +530,19 @@ wPunctuation.story.parameters = { mdxSource: '<Button>with punctuation</Button>'
const componentMeta = { title: 'Button', includeStories: ['one', 'helloStory', 'wPunctuation'] };
const mdxKind = componentMeta.title;
const mdxStoryNameToId = {
one: 'button--one',
'hello story': 'button--hello-story',
'w/punctuation': 'button--w-punctuation',
};
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docsContainer = ({ context, children }) => (
<DocsContainer context={{ ...context, mdxKind }}>{children}</DocsContainer>
);
componentMeta.parameters.docs = MDXContent;
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
),
page: MDXContent,
};
export default componentMeta;
"
@ -545,27 +581,30 @@ function MDXContent({ components, ...props }) {
MDXContent.isMDXComponent = true;
export const story0 = () => {
export const functionStory = () => {
const btn = document.createElement('button');
btn.innerHTML = 'Hello Button';
btn.addEventListener('click', action('Click'));
return btn;
};
story0.story = {};
story0.story.name = 'function';
story0.story.parameters = {
functionStory.story = {};
functionStory.story.name = 'function';
functionStory.story.parameters = {
mdxSource:
\\"() => {\\\\n const btn = document.createElement('button');\\\\n btn.innerHTML = 'Hello Button';\\\\n btn.addEventListener('click', action('Click'));\\\\n return btn;\\\\n}\\",
};
const componentMeta = { includeStories: ['story0'] };
const componentMeta = { includeStories: ['functionStory'] };
const mdxStoryNameToId = {};
const mdxKind = componentMeta.title;
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docsContainer = ({ context, children }) => (
<DocsContainer context={{ ...context, mdxKind }}>{children}</DocsContainer>
);
componentMeta.parameters.docs = MDXContent;
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
),
page: MDXContent,
};
export default componentMeta;
"
@ -631,12 +670,15 @@ toStorybook.story.parameters = {
const componentMeta = { title: 'MDX|Welcome', includeStories: ['toStorybook'] };
const mdxKind = componentMeta.title;
const mdxStoryNameToId = { 'to storybook': 'mdx-welcome--to-storybook' };
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docsContainer = ({ context, children }) => (
<DocsContainer context={{ ...context, mdxKind }}>{children}</DocsContainer>
);
componentMeta.parameters.docs = MDXContent;
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
),
page: MDXContent,
};
export default componentMeta;
"
@ -673,12 +715,15 @@ MDXContent.isMDXComponent = true;
const componentMeta = { includeStories: [] };
const mdxKind = componentMeta.title;
const mdxStoryNameToId = {};
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docsContainer = ({ context, children }) => (
<DocsContainer context={{ ...context, mdxKind }}>{children}</DocsContainer>
);
componentMeta.parameters.docs = MDXContent;
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
),
page: MDXContent,
};
export default componentMeta;
"
@ -716,12 +761,15 @@ MDXContent.isMDXComponent = true;
const componentMeta = { includeStories: [] };
const mdxKind = componentMeta.title;
const mdxStoryNameToId = {};
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docsContainer = ({ context, children }) => (
<DocsContainer context={{ ...context, mdxKind }}>{children}</DocsContainer>
);
componentMeta.parameters.docs = MDXContent;
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
),
page: MDXContent,
};
export default componentMeta;
"

79
addons/docs/src/mdx/mdx-compiler-plugin.js
View File

@ -3,6 +3,7 @@ const parser = require('@babel/parser');
const generate = require('@babel/generator').default;
const camelCase = require('lodash/camelCase');
const jsStringEscape = require('js-string-escape');
const { toId, storyNameFromExport } = require('@storybook/router/utils');
// Generate the MDX as is, but append named exports for every
// story in the contents
@ -17,17 +18,19 @@ function getAttr(elt, what) {
return attr && attr.value;
}
function getStoryFn(name, counter) {
if (name) {
const storyFn = camelCase(name.replace(/[^a-z0-9-]/g, '-'));
if (storyFn.length > 1 && !RESERVED.exec(storyFn)) {
return storyFn;
}
}
return `story${counter}`;
}
const isReserved = name => RESERVED.exec(name);
function genStoryExport(ast, counter) {
const sanitizeName = name => {
let key = camelCase(name);
if (isReserved(key)) {
key = `${key}Story`;
}
return key;
};
const getStoryKey = (name, counter) => (name ? sanitizeName(name) : `story${counter}`);
function genStoryExport(ast, context) {
let storyName = getAttr(ast.openingElement, 'name');
let storyId = getAttr(ast.openingElement, 'id');
storyName = storyName && storyName.value;
@ -45,7 +48,7 @@ function genStoryExport(ast, counter) {
// console.log('genStoryExport', JSON.stringify(ast, null, 2));
const statements = [];
const storyKey = getStoryFn(storyName, counter);
const storyKey = getStoryKey(storyName, context.counter);
let body = ast.children.find(n => n.type !== 'JSXText');
let storyCode = null;
@ -72,9 +75,8 @@ function genStoryExport(ast, counter) {
}
statements.push(`${storyKey}.story = {};`);
if (storyName !== storyKey) {
statements.push(`${storyKey}.story.name = '${storyName}';`);
}
// always preserve the name, since CSF exports can get modified by displayName
statements.push(`${storyKey}.story.name = '${storyName}';`);
let parameters = getAttr(ast.openingElement, 'parameters');
parameters = parameters && parameters.expression;
@ -94,23 +96,26 @@ function genStoryExport(ast, counter) {
statements.push(`${storyKey}.story.decorators = ${decos};`);
}
// eslint-disable-next-line no-param-reassign
context.storyNameToKey[storyName] = storyKey;
return {
[storyKey]: statements.join('\n'),
};
}
function genPreviewExports(ast, counter) {
function genPreviewExports(ast, context) {
// console.log('genPreviewExports', JSON.stringify(ast, null, 2));
let localCounter = counter;
const previewExports = {};
for (let i = 0; i < ast.children.length; i += 1) {
const child = ast.children[i];
if (child.type === 'JSXElement' && child.openingElement.name.name === 'Story') {
const storyExport = genStoryExport(child, localCounter);
const storyExport = genStoryExport(child, context);
if (storyExport) {
Object.assign(previewExports, storyExport);
localCounter += 1;
// eslint-disable-next-line no-param-reassign
context.counter += 1;
}
}
}
@ -163,12 +168,16 @@ function getExports(node, counter) {
// insert `mdxKind` into the context so that we can know what "kind" we're rendering into
// when we render <Story name="xxx">...</Story>, since this MDX can be attached to any `selectedKind`!
const wrapperJs = `
const mdxKind = componentMeta.title;
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docsContainer = ({ context, children }) => <DocsContainer context={{...context, mdxKind}}>{children}</DocsContainer>;
componentMeta.parameters.docs = MDXContent;
componentMeta.parameters.docs = {
container: ({ context, children }) => <DocsContainer context={{...context, mdxStoryNameToId}}>{children}</DocsContainer>,
page: MDXContent,
};
`.trim();
// Use this rather than JSON.stringify because `Meta`'s attributes
// are already valid code strings, so we want to insert them raw
// rather than add an extra set of quotes
function stringifyMeta(meta) {
let result = '{ ';
Object.entries(meta).forEach(([key, val]) => {
@ -186,16 +195,18 @@ function extractExports(node, options) {
const storyExports = [];
const includeStories = [];
let metaExport = null;
let counter = 0;
const context = {
counter: 0,
storyNameToKey: {},
};
node.children.forEach(n => {
const exports = getExports(n, counter);
const exports = getExports(n, context);
if (exports) {
const { stories, meta } = exports;
if (stories) {
Object.entries(stories).forEach(([key, story]) => {
includeStories.push(key);
storyExports.push(story);
counter += 1;
});
}
if (meta) {
@ -208,22 +219,32 @@ function extractExports(node, options) {
});
if (metaExport) {
if (!storyExports.length) {
storyExports.push(
'export const storybookDocsOnly = () => { throw new Error("Docs-only story"); };'
);
storyExports.push('storybookDocsOnly.story = { parameters: { docsOnly: true } };');
includeStories.push('storybookDocsOnly');
storyExports.push('export const __page = () => { throw new Error("Docs-only story"); };');
storyExports.push('__page.story = { parameters: { docsOnly: true } };');
includeStories.push('__page');
}
} else {
metaExport = {};
}
metaExport.includeStories = JSON.stringify(includeStories);
const { title } = metaExport;
const mdxStoryNameToId = Object.entries(context.storyNameToKey).reduce(
(acc, [storyName, storyKey]) => {
if (title) {
acc[storyName] = toId(title, storyNameFromExport(storyKey));
}
return acc;
},
{}
);
const fullJsx = [
'import { DocsContainer } from "@storybook/addon-docs/blocks";',
defaultJsx,
...storyExports,
`const componentMeta = ${stringifyMeta(metaExport)};`,
`const mdxStoryNameToId = ${JSON.stringify(mdxStoryNameToId)};`,
wrapperJs,
'export default componentMeta;',
].join('\n\n');

12
addons/events/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-events",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"description": "Add events to your Storybook stories.",
"keywords": [
"addon",
@ -24,11 +24,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-beta.40",
"@storybook/api": "5.2.0-beta.40",
"@storybook/client-api": "5.2.0-beta.40",
"@storybook/core-events": "5.2.0-beta.40",
"@storybook/theming": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/api": "5.2.0-beta.47",
"@storybook/client-api": "5.2.0-beta.47",
"@storybook/core-events": "5.2.0-beta.47",
"@storybook/theming": "5.2.0-beta.47",
"core-js": "^3.0.1",
"format-json": "^1.0.3",
"lodash": "^4.17.11",

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

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-google-analytics",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"description": "Storybook addon for google analytics",
"keywords": [
"addon",
@ -20,8 +20,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-beta.40",
"@storybook/core-events": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/core-events": "5.2.0-beta.47",
"core-js": "^3.0.1",
"global": "^4.3.2",
"react-ga": "^2.5.7"

6
addons/graphql/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-graphql",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"description": "Storybook addon to display the GraphiQL IDE",
"keywords": [
"addon",
@ -22,8 +22,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-beta.40",
"@storybook/api": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/api": "5.2.0-beta.47",
"core-js": "^3.0.1",
"global": "^4.3.2",
"graphiql": "^0.13.0",

10
addons/info/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-info",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"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.2.0-beta.40",
"@storybook/client-logger": "5.2.0-beta.40",
"@storybook/components": "5.2.0-beta.40",
"@storybook/theming": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/client-logger": "5.2.0-beta.47",
"@storybook/components": "5.2.0-beta.47",
"@storybook/theming": "5.2.0-beta.47",
"core-js": "^3.0.1",
"global": "^4.3.2",
"jsx-to-string": "^1.4.0",

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

@ -26,6 +26,7 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
maxPropObjectKeys={3}
maxPropStringLength={50}
maxPropsIntoLine={3}
propTableCompare={[Function]}
propTables={Array []}
propTablesExclude={Array []}
showHeader={true}
@ -160,6 +161,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
maxPropObjectKeys={3}
maxPropStringLength={50}
maxPropsIntoLine={3}
propTableCompare={[Function]}
propTables={Array []}
propTablesExclude={Array []}
showHeader={true}
@ -292,6 +294,7 @@ exports[`addon Info should render <Info /> for memoized component 1`] = `
maxPropObjectKeys={3}
maxPropStringLength={50}
maxPropsIntoLine={3}
propTableCompare={[Function]}
propTables={null}
propTablesExclude={Array []}
showHeader={true}
@ -821,6 +824,7 @@ exports[`addon Info should render component description if story kind matches co
maxPropObjectKeys={3}
maxPropStringLength={50}
maxPropsIntoLine={3}
propTableCompare={[Function]}
propTables={null}
propTablesExclude={Array []}
showHeader={true}
@ -5379,6 +5383,7 @@ exports[`addon Info should render component description if story name matches co
maxPropObjectKeys={3}
maxPropStringLength={50}
maxPropsIntoLine={3}
propTableCompare={[Function]}
propTables={null}
propTablesExclude={Array []}
showHeader={true}

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

@ -302,6 +302,7 @@ class Story extends Component {
const {
children,
propTablesExclude,
propTableCompare,
maxPropObjectKeys,
maxPropArrayLength,
maxPropStringLength,
@ -349,7 +350,7 @@ class Story extends Component {
(propTables.length > 0 && // if propTables is set and has items in it
!propTables.includes(innerChildren.type)) || // ignore types that are missing from propTables
(Array.isArray(propTablesExclude) && // also ignore excluded types
~propTablesExclude.indexOf(innerChildren.type)) // eslint-disable-line no-bitwise
propTablesExclude.some(Comp => propTableCompare(innerChildren, Comp)))
) {
return;
}
@ -409,6 +410,7 @@ Story.propTypes = {
info: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
propTables: PropTypes.arrayOf(PropTypes.func),
propTablesExclude: PropTypes.arrayOf(PropTypes.func),
propTableCompare: PropTypes.func.isRequired,
showInline: PropTypes.bool,
showHeader: PropTypes.bool,
showSource: PropTypes.bool,

7
addons/info/src/index.js
View File

@ -13,6 +13,12 @@ const defaultOptions = {
header: true,
source: true,
propTables: [],
propTableCompare: (element, Component) =>
// https://github.com/gaearon/react-hot-loader#checking-element-types
typeof reactHotLoaderGlobal === 'undefined'
? element.type === Component
: // eslint-disable-next-line no-undef
reactHotLoaderGlobal.areComponentsEqual(element.type, Component),
TableComponent: PropTable,
maxPropsIntoLine: 3,
maxPropObjectKeys: 3,
@ -73,6 +79,7 @@ function addInfo(storyFn, context, infoOptions) {
: s => nestedObjectAssign({}, s, options.styles),
propTables: options.propTables,
propTablesExclude: options.propTablesExclude,
propTableCompare: options.propTableCompare,
PropTable: makeTableComponent(options.TableComponent),
components,
maxPropObjectKeys: options.maxPropObjectKeys,

12
addons/jest/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-jest",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"description": "React storybook addon that show component jest report",
"keywords": [
"addon",
@ -28,11 +28,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-beta.40",
"@storybook/api": "5.2.0-beta.40",
"@storybook/components": "5.2.0-beta.40",
"@storybook/core-events": "5.2.0-beta.40",
"@storybook/theming": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/api": "5.2.0-beta.47",
"@storybook/components": "5.2.0-beta.47",
"@storybook/core-events": "5.2.0-beta.47",
"@storybook/theming": "5.2.0-beta.47",
"core-js": "^3.0.1",
"global": "^4.3.2",
"react": "^16.8.3",

14
addons/knobs/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-knobs",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"description": "Storybook Addon Prop Editor Component",
"keywords": [
"addon",
@ -22,12 +22,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-beta.40",
"@storybook/api": "5.2.0-beta.40",
"@storybook/client-api": "5.2.0-beta.40",
"@storybook/components": "5.2.0-beta.40",
"@storybook/core-events": "5.2.0-beta.40",
"@storybook/theming": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/api": "5.2.0-beta.47",
"@storybook/client-api": "5.2.0-beta.47",
"@storybook/components": "5.2.0-beta.47",
"@storybook/core-events": "5.2.0-beta.47",
"@storybook/theming": "5.2.0-beta.47",
"copy-to-clipboard": "^3.0.8",
"core-js": "^3.0.1",
"escape-html": "^1.0.3",

8
addons/links/package.json
View File

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

16
addons/notes/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-notes",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"description": "Write notes for your Storybook stories.",
"keywords": [
"addon",
@ -23,13 +23,13 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-beta.40",
"@storybook/api": "5.2.0-beta.40",
"@storybook/client-logger": "5.2.0-beta.40",
"@storybook/components": "5.2.0-beta.40",
"@storybook/core-events": "5.2.0-beta.40",
"@storybook/router": "5.2.0-beta.40",
"@storybook/theming": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/api": "5.2.0-beta.47",
"@storybook/client-logger": "5.2.0-beta.47",
"@storybook/components": "5.2.0-beta.47",
"@storybook/core-events": "5.2.0-beta.47",
"@storybook/router": "5.2.0-beta.47",
"@storybook/theming": "5.2.0-beta.47",
"core-js": "^3.0.1",
"global": "^4.3.2",
"markdown-to-jsx": "^6.10.3",

8
addons/ondevice-actions/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-ondevice-actions",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"description": "Action Logger addon for react-native storybook",
"keywords": [
"storybook"
@ -19,13 +19,13 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-beta.40",
"@storybook/core-events": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/core-events": "5.2.0-beta.47",
"core-js": "^3.0.1",
"fast-deep-equal": "^2.0.1"
},
"devDependencies": {
"@storybook/addon-actions": "5.2.0-beta.40"
"@storybook/addon-actions": "5.2.0-beta.47"
},
"peerDependencies": {
"@storybook/addon-actions": "*",

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

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-ondevice-backgrounds",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"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.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.47",
"core-js": "^3.0.1",
"prop-types": "^15.7.2"
},

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

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

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

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-ondevice-notes",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"description": "Write notes for your react-native Storybook stories.",
"keywords": [
"addon",
@ -20,8 +20,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-beta.40",
"@storybook/client-logger": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/client-logger": "5.2.0-beta.47",
"core-js": "^3.0.1",
"prop-types": "^15.7.2",
"react-native-simple-markdown": "^1.1.0"

4
addons/options/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-options",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"description": "Options addon for storybook",
"keywords": [
"addon",
@ -22,7 +22,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.47",
"core-js": "^3.0.1",
"util-deprecate": "^1.0.2"
},

14
addons/queryparams/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-queryparams",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"description": "parameter addon for storybook",
"keywords": [
"addon",
@ -23,12 +23,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-beta.40",
"@storybook/api": "5.2.0-beta.40",
"@storybook/client-logger": "5.2.0-beta.40",
"@storybook/components": "5.2.0-beta.40",
"@storybook/core-events": "5.2.0-beta.40",
"@storybook/theming": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/api": "5.2.0-beta.47",
"@storybook/client-logger": "5.2.0-beta.47",
"@storybook/components": "5.2.0-beta.47",
"@storybook/core-events": "5.2.0-beta.47",
"@storybook/theming": "5.2.0-beta.47",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",

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

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storyshots",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"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.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.47",
"core-js": "^3.0.1",
"glob": "^7.1.3",
"global": "^4.3.2",

2
addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap
View File

@ -166,6 +166,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
onClick={[Function]}
>
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "transparent",
@ -272,6 +273,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
"textDecoration": "none",
}
}
target="_blank"
>
Writing Stories
</a>

2
addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap
View File

@ -139,6 +139,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<p>
See these sample
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "transparent",
@ -233,6 +234,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
"textDecoration": "none",
}
}
target="_blank"
>
Writing Stories
</a>

2
addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.foo
View File

@ -43,6 +43,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<p>
See these sample
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "transparent",
@ -137,6 +138,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
"textDecoration": "none",
}
}
target="_blank"
>
Writing Stories
</a>

2
addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.storyshot
View File

@ -43,6 +43,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<p>
See these sample
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "transparent",
@ -137,6 +138,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
"textDecoration": "none",
}
}
target="_blank"
>
Writing Stories
</a>

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

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storyshots-puppeteer",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"description": "Image snapshots addition to StoryShots based on puppeteer",
"keywords": [
"addon",
@ -22,8 +22,8 @@
"prepare": "node ../../../scripts/prepare.js"
},
"dependencies": {
"@storybook/node-logger": "5.2.0-beta.40",
"@storybook/router": "5.2.0-beta.40",
"@storybook/node-logger": "5.2.0-beta.47",
"@storybook/router": "5.2.0-beta.47",
"core-js": "^3.0.1",
"jest-image-snapshot": "^2.8.2",
"regenerator-runtime": "^0.12.1"

12
addons/storysource/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storysource",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"description": "Stories addon for storybook",
"keywords": [
"addon",
@ -22,11 +22,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-beta.40",
"@storybook/components": "5.2.0-beta.40",
"@storybook/router": "5.2.0-beta.40",
"@storybook/source-loader": "5.2.0-beta.40",
"@storybook/theming": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/components": "5.2.0-beta.47",
"@storybook/router": "5.2.0-beta.47",
"@storybook/source-loader": "5.2.0-beta.47",
"@storybook/theming": "5.2.0-beta.47",
"core-js": "^3.0.1",
"estraverse": "^4.2.0",
"loader-utils": "^1.2.3",

25
addons/viewport/README.md
View File

@ -25,6 +25,7 @@ Then, add following content to .storybook/addons.js
```js
import '@storybook/addon-viewport/register';
```
You should now be able to see the viewport addon icon in the the toolbar at the top of the screen.
## Configuration
@ -34,7 +35,12 @@ The viewport addon is configured by story parameters with the `viewport` key. To
```js
import { addParameters } from '@storybook/react';
addParameters({ viewport: { viewports: newViewports } });
addParameters({
viewport: {
viewports: newViewports, // newViewports would be an ViewportMap. (see below for examples)
defaultViewport: 'someDefault',
},
});
```
Options can take a object with the following keys:
@ -49,7 +55,7 @@ Setting this property to, let say `iphone6`, will make `iPhone 6` the default de
---
A key-value pair of viewport's key and properties (see `Viewport` definition below) for all viewports to be displayed. Default is [`INITIAL_VIEWPORTS`](src/defaults.ts)
A key-value pair of viewport's key and properties (see `Viewport` definition below) for all viewports to be displayed. Default is [`MINIMAL_VIEWPORTS`](src/defaults.ts)
#### Viewport Model
@ -95,6 +101,21 @@ addStories('Stories', module)
## Examples
### Use Detailed Set of Devices
The default viewports being used is [`MINIMAL_VIEWPORTS`](src/defaults.ts). If you'd like to use a more granular list of devices, you can use [`INITIAL_VIEWPORTS`](src/defaults.ts) like so in your `config.js` file in your `.storybook` directory.
```js
import { addParameters } from '@storybook/react';
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
addParameters({
viewport: {
viewports: INITIAL_VIEWPORTS,
},
});
```
### Use Custom Set of Devices
This will replace all previous devices with `Kindle Fire 2` and `Kindle Fire HD` by simply calling `addParameters` with the two devices as `viewports` in `config.js` file in your `.storybook` directory.

14
addons/viewport/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-viewport",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"description": "Storybook addon to change the viewport size to mobile",
"keywords": [
"addon",
@ -21,12 +21,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-beta.40",
"@storybook/api": "5.2.0-beta.40",
"@storybook/client-logger": "5.2.0-beta.40",
"@storybook/components": "5.2.0-beta.40",
"@storybook/core-events": "5.2.0-beta.40",
"@storybook/theming": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/api": "5.2.0-beta.47",
"@storybook/client-logger": "5.2.0-beta.47",
"@storybook/components": "5.2.0-beta.47",
"@storybook/core-events": "5.2.0-beta.47",
"@storybook/theming": "5.2.0-beta.47",
"core-js": "^3.0.1",
"global": "^4.3.2",
"memoizerific": "^1.11.3",

9
addons/viewport/src/Tool.tsx
View File

@ -8,6 +8,7 @@ import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/comp
import { useParameter, useAddonState } from '@storybook/api';
import { PARAM_KEY, ADDON_ID } from './constants';
import { MINIMAL_VIEWPORTS } from './defaults';
import { ViewportAddonParameter, ViewportMap, ViewportStyles, Styles } from './models';
interface ViewportItem {
@ -122,7 +123,7 @@ export const ViewportTool: FunctionComponent<{}> = React.memo(
const { viewports, defaultViewport, disable } = useParameter<ViewportAddonParameter>(
PARAM_KEY,
{
viewports: {},
viewports: MINIMAL_VIEWPORTS,
defaultViewport: responsiveViewport.id,
}
);
@ -195,13 +196,15 @@ export const ViewportTool: FunctionComponent<{}> = React.memo(
},
[`#${wrapperId}`]: {
padding: theme.layoutMargin,
display: 'grid',
alignContent: 'center',
alignItems: 'center',
justifyContent: 'center',
justifyItems: 'center',
overflow: 'auto',
gridTemplateColumns: 'minmax(0, 1fr)',
display: 'grid',
gridTemplateColumns: '100%',
gridTemplateRows: '100%',
},
}}
/>

27
addons/viewport/src/defaults.ts
View File

@ -131,3 +131,30 @@ export const INITIAL_VIEWPORTS: ViewportMap = {
},
};
export const DEFAULT_VIEWPORT = 'responsive';
export const MINIMAL_VIEWPORTS: ViewportMap = {
mobile1: {
name: 'Small mobile',
styles: {
height: '568px',
width: '320px',
},
type: 'mobile',
},
mobile2: {
name: 'Large mobile',
styles: {
height: '896px',
width: '414px',
},
type: 'mobile',
},
tablet: {
name: 'Tablet',
styles: {
height: '1112px',
width: '834px',
},
type: 'tablet',
},
};

8
app/angular/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/angular",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -26,9 +26,9 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-beta.40",
"@storybook/core": "5.2.0-beta.40",
"@storybook/node-logger": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/core": "5.2.0-beta.47",
"@storybook/node-logger": "5.2.0-beta.47",
"angular2-template-loader": "^0.6.2",
"core-js": "^3.0.1",
"fork-ts-checker-webpack-plugin": "^1.3.4",

4
app/ember/package.json
View File

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

6
app/html/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/html",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -26,8 +26,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-beta.40",
"@storybook/core": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/core": "5.2.0-beta.47",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",

6
app/marko/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/marko",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -27,8 +27,8 @@
},
"dependencies": {
"@marko/webpack": "^1.2.0",
"@storybook/client-logger": "5.2.0-beta.40",
"@storybook/core": "5.2.0-beta.40",
"@storybook/client-logger": "5.2.0-beta.47",
"@storybook/core": "5.2.0-beta.47",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",

4
app/mithril/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/mithril",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"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.2.0-beta.40",
"@storybook/core": "5.2.0-beta.47",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",

4
app/polymer/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/polymer",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"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.2.0-beta.40",
"@storybook/core": "5.2.0-beta.47",
"@webcomponents/webcomponentsjs": "^1.2.0",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",

6
app/preact/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/preact",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"description": "Storybook for Preact: Develop Preact Component in isolation.",
"keywords": [
"storybook"
@ -27,8 +27,8 @@
},
"dependencies": {
"@babel/plugin-transform-react-jsx": "^7.3.0",
"@storybook/addons": "5.2.0-beta.40",
"@storybook/core": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/core": "5.2.0-beta.47",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",

4
app/rax/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/rax",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"description": "Storybook for Rax: Develop Rax Component in isolation.",
"keywords": [
"storybook",
@ -27,7 +27,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/core": "5.2.0-beta.40",
"@storybook/core": "5.2.0-beta.47",
"babel-preset-rax": "^1.0.0-beta.0",
"common-tags": "^1.8.0",
"core-js": "^2.6.2",

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

@ -1,6 +1,6 @@
{
"name": "@storybook/react-native-server",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"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.2.0-beta.40",
"@storybook/api": "5.2.0-beta.40",
"@storybook/channel-websocket": "5.2.0-beta.40",
"@storybook/core": "5.2.0-beta.40",
"@storybook/core-events": "5.2.0-beta.40",
"@storybook/ui": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/api": "5.2.0-beta.47",
"@storybook/channel-websocket": "5.2.0-beta.47",
"@storybook/core": "5.2.0-beta.47",
"@storybook/core-events": "5.2.0-beta.47",
"@storybook/ui": "5.2.0-beta.47",
"commander": "^2.19.0",
"core-js": "^3.0.1",
"global": "^4.3.2",

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

@ -1,6 +1,6 @@
{
"name": "@storybook/react-native",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"description": "A better way to develop React Native Components for your app",
"keywords": [
"react",
@ -24,11 +24,11 @@
"dependencies": {
"@emotion/core": "^10.0.14",
"@emotion/native": "^10.0.14",
"@storybook/addons": "5.2.0-beta.40",
"@storybook/channel-websocket": "5.2.0-beta.40",
"@storybook/channels": "5.2.0-beta.40",
"@storybook/client-api": "5.2.0-beta.40",
"@storybook/core-events": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/channel-websocket": "5.2.0-beta.47",
"@storybook/channels": "5.2.0-beta.47",
"@storybook/client-api": "5.2.0-beta.47",
"@storybook/core-events": "5.2.0-beta.47",
"core-js": "^3.0.1",
"emotion-theming": "^10.0.14",
"react-native-swipe-gestures": "^1.0.3",

8
app/react/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/react",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -29,9 +29,9 @@
"@babel/plugin-transform-react-constant-elements": "^7.2.0",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@storybook/addons": "5.2.0-beta.40",
"@storybook/core": "5.2.0-beta.40",
"@storybook/node-logger": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/core": "5.2.0-beta.47",
"@storybook/node-logger": "5.2.0-beta.47",
"@svgr/webpack": "^4.0.3",
"babel-plugin-add-react-displayname": "^0.0.5",
"babel-plugin-named-asset-import": "^0.3.1",

4
app/react/src/demo/Welcome.tsx
View File

@ -59,6 +59,7 @@ const Link = ({
children,
href,
target,
rel,
...props
}: {
children: string;
@ -70,6 +71,8 @@ const Link = ({
<a
href={href}
{...props}
target={target}
rel={rel}
style={{
color: '#1474f3',
textDecoration: 'none',
@ -101,6 +104,7 @@ const NavButton = ({
<button
{...props}
type="button"
onClick={onClick}
style={{
color: '#1474f3',
textDecoration: 'none',

4
app/riot/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/riot",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"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.2.0-beta.40",
"@storybook/core": "5.2.0-beta.47",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",

4
app/svelte/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/svelte",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"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.2.0-beta.40",
"@storybook/core": "5.2.0-beta.47",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",

6
app/vue/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/vue",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -26,8 +26,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-beta.40",
"@storybook/core": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/core": "5.2.0-beta.47",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",

6
dev-kits/addon-decorator/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-decorator",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"description": "decorator addon for storybook",
"keywords": [
"devkit",
@ -24,8 +24,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-beta.40",
"@storybook/client-api": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/client-api": "5.2.0-beta.47",
"core-js": "^3.0.1",
"global": "^3.0.1"
},

14
dev-kits/addon-parameter/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-parameter",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"description": "parameter addon for storybook",
"keywords": [
"devkit",
@ -24,12 +24,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-beta.40",
"@storybook/api": "5.2.0-beta.40",
"@storybook/client-logger": "5.2.0-beta.40",
"@storybook/components": "5.2.0-beta.40",
"@storybook/core-events": "5.2.0-beta.40",
"@storybook/theming": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/api": "5.2.0-beta.47",
"@storybook/client-logger": "5.2.0-beta.47",
"@storybook/components": "5.2.0-beta.47",
"@storybook/core-events": "5.2.0-beta.47",
"@storybook/theming": "5.2.0-beta.47",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",

16
dev-kits/addon-roundtrip/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-roundtrip",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"description": "roundtrip addon for storybook",
"keywords": [
"devkit",
@ -24,13 +24,13 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-beta.40",
"@storybook/api": "5.2.0-beta.40",
"@storybook/client-api": "5.2.0-beta.40",
"@storybook/client-logger": "5.2.0-beta.40",
"@storybook/components": "5.2.0-beta.40",
"@storybook/core-events": "5.2.0-beta.40",
"@storybook/theming": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/api": "5.2.0-beta.47",
"@storybook/client-api": "5.2.0-beta.47",
"@storybook/client-logger": "5.2.0-beta.47",
"@storybook/components": "5.2.0-beta.47",
"@storybook/core-events": "5.2.0-beta.47",
"@storybook/theming": "5.2.0-beta.47",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",

4
docs/package.json
View File

@ -39,9 +39,9 @@
"marked": "^0.7.0",
"polished": "^3.4.1",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react": "^16.9.0",
"react-document-title": "^2.0.3",
"react-dom": "^16.8.6",
"react-dom": "^16.9.0",
"react-helmet": "^5.2.0",
"react-popper-tooltip": "^2.8.3",
"react-router": "^4.3.1",

3
docs/src/new-components/basics/tooltip/TooltipLinkList.js
View File

@ -5,6 +5,9 @@ import ListItem from '../ListItem';
const List = styled.div`
min-width: 180px;
overflow: hidden;
overflow-y: auto;
maxHeight: ${10.5 * 32 /* 10.5 items */};
`;
function TooltipLinkList({ links, LinkWrapper }) {

14
docs/src/pages/configurations/options-parameter/index.md
View File

@ -75,13 +75,13 @@ addParameters({
*/
theme: undefined,
/**
* function to sort stories in the tree view
* common use is alphabetical `(a, b) => a[1].id.localeCompare(b[1].id)`
* if left undefined, then the order in which the stories are imported will
* be the order they display
* @type {Function}
*/
storySort: undefined
* function to sort stories in the tree view
* common use is alphabetical `(a, b) => a[1].id.localeCompare(b[1].id)`
* if left undefined, then the order in which the stories are imported will
* be the order they display
* @type {Function}
*/
storySort: undefined,
},
});
```

29
docs/src/pages/formats/component-story-format/index.md
View File

@ -43,6 +43,35 @@ simple.story = {
};
```
## Storybook Export vs Name Handling
Storybook handles named exports and `story.name` slightly differently. When should you use one vs. the other?
In general, you should use named exports. Storybook passes them through a `storyNameFromExport` function ([#7901](https://github.com/storybookjs/storybook/pull/7901)), which is implemented with `lodash.startCase`:
```js
it('should format CSF exports with sensible defaults', () => {
const testCases = {
name: 'Name',
someName: 'Some Name',
someNAME: 'Some NAME',
some_custom_NAME: 'Some Custom NAME',
someName1234: 'Some Name 1234',
someName1_2_3_4: 'Some Name 1 2 3 4',
};
Object.entries(testCases).forEach(([key, val]) => {
expect(storyNameFromExport(key)).toBe(val);
});
});
```
When you want to change the name of your story, just rename the CSF export. This will change the name of the story and also change the Story's ID / URL.
You should use the `story.name` option in the following cases:
1. Want the name to show up in the Storybook UI in a way that's not possible with a named export, e.g. reserved keywords like "default", special characters like emoji, spacing/capitalization other than what's provided by `storyNameFromExport`
2. Want to preserve the Story ID independently from changing how it's displayed. Having stable Story ID's is useful for integration with third party tools.
## Non-story exports
In some cases, you may want to export a mixture of story and non-stories. For example., it can be useful to export data that's used in your stories.

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

@ -1 +1 @@
{"version":"5.2.0-beta.40","info":{"plain":"### Bug Fixes\n\n* Addon-docs: Fix DocsPage primary story switching ([#7849](https://github.com/storybookjs/storybook/pull/7849))\n* Source-loader: Selectively ignore typescript errors in generated code ([#7845](https://github.com/storybookjs/storybook/pull/7845))\n* Addon-docs: Force hidden attribute on #root element ([#7841](https://github.com/storybookjs/storybook/pull/7841))\n\n### Maintenance\n\n* Remove temporarily added --no-dll option on examples ([#7647](https://github.com/storybookjs/storybook/pull/7647))"}}
{"version":"5.2.0-beta.47","info":{"plain":"### Bug Fixes\n\n* UI: Optimize treeview render/filter performance ([#7910](https://github.com/storybookjs/storybook/pull/7910))\n* Addon-docs: Fix DocsPage to respect displayName ([#7915](https://github.com/storybookjs/storybook/pull/7915))"}}

27
docs/yarn.lock
View File

@ -9822,15 +9822,15 @@ react-dom@^15.6.0:
object-assign "^4.1.0"
prop-types "^15.5.10"
react-dom@^16.8.3, react-dom@^16.8.6:
version "16.8.6"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f"
integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==
react-dom@^16.8.3, react-dom@^16.9.0:
version "16.9.0"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.9.0.tgz#5e65527a5e26f22ae3701131bcccaee9fb0d3962"
integrity sha512-YFT2rxO9hM70ewk9jq0y6sQk8cL02xm4+IzYBz75CQGlClQQ1Bxq0nhHF6OtSbit+AIahujJgb/CPRibFkMNJQ==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
prop-types "^15.6.2"
scheduler "^0.13.6"
scheduler "^0.15.0"
react-error-overlay@^3.0.0:
version "3.0.0"
@ -10025,15 +10025,14 @@ react@^15.6.0:
object-assign "^4.1.0"
prop-types "^15.5.10"
react@^16.8.3, react@^16.8.6:
version "16.8.6"
resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==
react@^16.8.3, react@^16.9.0:
version "16.9.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.9.0.tgz#40ba2f9af13bc1a38d75dbf2f4359a5185c4f7aa"
integrity sha512-+7LQnFBwkiw+BobzOF6N//BdoNw0ouwmSJTEm9cglOOmsg/TMiFHZLe2sEoN5M7LgJTj9oHH0gxklfnQe66S1w==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
prop-types "^15.6.2"
scheduler "^0.13.6"
read-all-stream@^3.0.0:
version "3.1.0"
@ -10867,6 +10866,14 @@ scheduler@^0.13.6:
loose-envify "^1.1.0"
object-assign "^4.1.1"
scheduler@^0.15.0:
version "0.15.0"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.15.0.tgz#6bfcf80ff850b280fed4aeecc6513bc0b4f17f8e"
integrity sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
schema-utils@^0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.3.0.tgz#f5877222ce3e931edae039f17eb3716e7137f8cf"

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

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

6
examples/angular-cli/.storybook/config.ts
View File

@ -8,9 +8,9 @@ addCssWarning();
addParameters({
options: {
hierarchyRootSeparator: /\|/,
docs: {
iframeHeight: '60px',
},
},
docs: {
iframeHeight: '60px',
},
});

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

@ -1,6 +1,6 @@
{
"name": "angular-cli",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"private": true,
"license": "MIT",
"scripts": {
@ -34,21 +34,21 @@
"@angular-devkit/build-angular": "^0.13.4",
"@angular/cli": "^7.3.6",
"@angular/compiler-cli": "^7.2.6",
"@storybook/addon-a11y": "5.2.0-beta.40",
"@storybook/addon-actions": "5.2.0-beta.40",
"@storybook/addon-backgrounds": "5.2.0-beta.40",
"@storybook/addon-centered": "5.2.0-beta.40",
"@storybook/addon-docs": "5.2.0-beta.40",
"@storybook/addon-jest": "5.2.0-beta.40",
"@storybook/addon-knobs": "5.2.0-beta.40",
"@storybook/addon-links": "5.2.0-beta.40",
"@storybook/addon-notes": "5.2.0-beta.40",
"@storybook/addon-options": "5.2.0-beta.40",
"@storybook/addon-storyshots": "5.2.0-beta.40",
"@storybook/addon-storysource": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.40",
"@storybook/angular": "5.2.0-beta.40",
"@storybook/source-loader": "5.2.0-beta.40",
"@storybook/addon-a11y": "5.2.0-beta.47",
"@storybook/addon-actions": "5.2.0-beta.47",
"@storybook/addon-backgrounds": "5.2.0-beta.47",
"@storybook/addon-centered": "5.2.0-beta.47",
"@storybook/addon-docs": "5.2.0-beta.47",
"@storybook/addon-jest": "5.2.0-beta.47",
"@storybook/addon-knobs": "5.2.0-beta.47",
"@storybook/addon-links": "5.2.0-beta.47",
"@storybook/addon-notes": "5.2.0-beta.47",
"@storybook/addon-options": "5.2.0-beta.47",
"@storybook/addon-storyshots": "5.2.0-beta.47",
"@storybook/addon-storysource": "5.2.0-beta.47",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/angular": "5.2.0-beta.47",
"@storybook/source-loader": "5.2.0-beta.47",
"@types/core-js": "^2.5.0",
"@types/jest": "^24.0.11",
"@types/node": "~12.0.2",

2
examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot
View File

@ -12,7 +12,7 @@ exports[`Storyshots Core|Parameters passed to story 1`] = `
<button
_ngcontent-a-c7=""
>
Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{},"docs":{"iframeHeight":"60px"}},"globalParameter":"globalParameter","framework":"angular","chapterParameter":"chapterParameter","storyParameter":"storyParameter"}
Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"docs":{"iframeHeight":"60px"},"globalParameter":"globalParameter","framework":"angular","chapterParameter":"chapterParameter","storyParameter":"storyParameter"}
</button>
</storybook-button-component>
</storybook-dynamic-app-root>

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

@ -1,6 +1,6 @@
{
"name": "cra-kitchen-sink",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"private": true,
"scripts": {
"build": "react-scripts build",
@ -19,23 +19,23 @@
"react-lifecycles-compat": "^3.0.4"
},
"devDependencies": {
"@storybook/addon-a11y": "5.2.0-beta.40",
"@storybook/addon-actions": "5.2.0-beta.40",
"@storybook/addon-backgrounds": "5.2.0-beta.40",
"@storybook/addon-centered": "5.2.0-beta.40",
"@storybook/addon-docs": "5.2.0-beta.40",
"@storybook/addon-events": "5.2.0-beta.40",
"@storybook/addon-info": "5.2.0-beta.40",
"@storybook/addon-jest": "5.2.0-beta.40",
"@storybook/addon-knobs": "5.2.0-beta.40",
"@storybook/addon-links": "5.2.0-beta.40",
"@storybook/addon-notes": "5.2.0-beta.40",
"@storybook/addon-options": "5.2.0-beta.40",
"@storybook/addon-storyshots": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.40",
"@storybook/client-logger": "5.2.0-beta.40",
"@storybook/react": "5.2.0-beta.40",
"@storybook/theming": "5.2.0-beta.40",
"@storybook/addon-a11y": "5.2.0-beta.47",
"@storybook/addon-actions": "5.2.0-beta.47",
"@storybook/addon-backgrounds": "5.2.0-beta.47",
"@storybook/addon-centered": "5.2.0-beta.47",
"@storybook/addon-docs": "5.2.0-beta.47",
"@storybook/addon-events": "5.2.0-beta.47",
"@storybook/addon-info": "5.2.0-beta.47",
"@storybook/addon-jest": "5.2.0-beta.47",
"@storybook/addon-knobs": "5.2.0-beta.47",
"@storybook/addon-links": "5.2.0-beta.47",
"@storybook/addon-notes": "5.2.0-beta.47",
"@storybook/addon-options": "5.2.0-beta.47",
"@storybook/addon-storyshots": "5.2.0-beta.47",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/client-logger": "5.2.0-beta.47",
"@storybook/react": "5.2.0-beta.47",
"@storybook/theming": "5.2.0-beta.47",
"react-scripts": "^3.0.1"
}
}

24
examples/cra-kitchen-sink/src/stories/perf.stories.js Normal file
View File

@ -0,0 +1,24 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { Button } from '@storybook/react/demo';
for (let i = 0; i < 1; i += 1) {
const randomDemoName = Math.random()
.toString(36)
.substring(7);
const stories = storiesOf(`Perf.${randomDemoName}`);
for (let j = 0; j < 10; j += 1) {
stories
.add(`with text ${j}`, () => <Button>Hello Button</Button>)
.add(`with emoji ${j}`, () => (
<Button>
<span role="img" aria-label="so cool">
😀 😎 👍 💯
</span>
</Button>
));
}
}

10
examples/cra-react15/package.json
View File

@ -1,6 +1,6 @@
{
"name": "cra-react15",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"private": true,
"dependencies": {
"babel-loader": "8.0.6",
@ -19,10 +19,10 @@
"build-storybook": "build-storybook -s public"
},
"devDependencies": {
"@storybook/addon-actions": "5.2.0-beta.40",
"@storybook/addon-links": "5.2.0-beta.40",
"@storybook/react": "5.2.0-beta.40",
"@storybook/theming": "5.2.0-beta.40",
"@storybook/addon-actions": "5.2.0-beta.47",
"@storybook/addon-links": "5.2.0-beta.47",
"@storybook/react": "5.2.0-beta.47",
"@storybook/theming": "5.2.0-beta.47",
"babel-core": "6",
"babel-runtime": "6"
}

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

@ -1,6 +1,6 @@
{
"name": "cra-ts-kitchen-sink",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"private": true,
"scripts": {
"build-storybook": "build-storybook -s public",
@ -14,12 +14,12 @@
"react-dom": "^16.8.3"
},
"devDependencies": {
"@storybook/addon-a11y": "5.2.0-beta.40",
"@storybook/addon-actions": "5.2.0-beta.40",
"@storybook/addon-info": "5.2.0-beta.40",
"@storybook/addon-options": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.40",
"@storybook/react": "5.2.0-beta.40",
"@storybook/addon-a11y": "5.2.0-beta.47",
"@storybook/addon-actions": "5.2.0-beta.47",
"@storybook/addon-info": "5.2.0-beta.47",
"@storybook/addon-options": "5.2.0-beta.47",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/react": "5.2.0-beta.47",
"@types/enzyme": "^3.9.0",
"@types/react": "^16.8.3",
"@types/react-dom": "^16.8.2",

20
examples/dev-kits/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/example-devkits",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"private": true,
"scripts": {
"build-storybook": "build-storybook -c ./ -s built-storybooks",
@ -8,15 +8,15 @@
"storybook": "start-storybook -p 9011 -c ./"
},
"devDependencies": {
"@storybook/addon-decorator": "5.2.0-beta.40",
"@storybook/addon-parameter": "5.2.0-beta.40",
"@storybook/addon-roundtrip": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.40",
"@storybook/components": "5.2.0-beta.40",
"@storybook/core-events": "5.2.0-beta.40",
"@storybook/node-logger": "5.2.0-beta.40",
"@storybook/react": "5.2.0-beta.40",
"@storybook/theming": "5.2.0-beta.40",
"@storybook/addon-decorator": "5.2.0-beta.47",
"@storybook/addon-parameter": "5.2.0-beta.47",
"@storybook/addon-roundtrip": "5.2.0-beta.47",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/components": "5.2.0-beta.47",
"@storybook/core-events": "5.2.0-beta.47",
"@storybook/node-logger": "5.2.0-beta.47",
"@storybook/react": "5.2.0-beta.47",
"@storybook/theming": "5.2.0-beta.47",
"cors": "^2.8.5",
"cross-env": "^5.2.0",
"enzyme-to-json": "^3.3.5",

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

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

6
examples/html-kitchen-sink/.storybook/config.js
View File

@ -13,9 +13,9 @@ addParameters({
},
options: {
hierarchyRootSeparator: /\|/,
docs: {
iframeHeight: '200px',
},
},
docs: {
iframeHeight: '200px',
},
});

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

@ -1,6 +1,6 @@
{
"name": "html-kitchen-sink",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"private": true,
"description": "",
"keywords": [],
@ -14,26 +14,26 @@
"storybook": "start-storybook -p 9006"
},
"devDependencies": {
"@storybook/addon-a11y": "5.2.0-beta.40",
"@storybook/addon-actions": "5.2.0-beta.40",
"@storybook/addon-backgrounds": "5.2.0-beta.40",
"@storybook/addon-centered": "5.2.0-beta.40",
"@storybook/addon-docs": "5.2.0-beta.40",
"@storybook/addon-events": "5.2.0-beta.40",
"@storybook/addon-jest": "5.2.0-beta.40",
"@storybook/addon-knobs": "5.2.0-beta.40",
"@storybook/addon-links": "5.2.0-beta.40",
"@storybook/addon-notes": "5.2.0-beta.40",
"@storybook/addon-options": "5.2.0-beta.40",
"@storybook/addon-storyshots": "5.2.0-beta.40",
"@storybook/addon-storysource": "5.2.0-beta.40",
"@storybook/addon-viewport": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.40",
"@storybook/client-api": "5.2.0-beta.40",
"@storybook/core": "5.2.0-beta.40",
"@storybook/core-events": "5.2.0-beta.40",
"@storybook/html": "5.2.0-beta.40",
"@storybook/source-loader": "5.2.0-beta.40",
"@storybook/addon-a11y": "5.2.0-beta.47",
"@storybook/addon-actions": "5.2.0-beta.47",
"@storybook/addon-backgrounds": "5.2.0-beta.47",
"@storybook/addon-centered": "5.2.0-beta.47",
"@storybook/addon-docs": "5.2.0-beta.47",
"@storybook/addon-events": "5.2.0-beta.47",
"@storybook/addon-jest": "5.2.0-beta.47",
"@storybook/addon-knobs": "5.2.0-beta.47",
"@storybook/addon-links": "5.2.0-beta.47",
"@storybook/addon-notes": "5.2.0-beta.47",
"@storybook/addon-options": "5.2.0-beta.47",
"@storybook/addon-storyshots": "5.2.0-beta.47",
"@storybook/addon-storysource": "5.2.0-beta.47",
"@storybook/addon-viewport": "5.2.0-beta.47",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/client-api": "5.2.0-beta.47",
"@storybook/core": "5.2.0-beta.47",
"@storybook/core-events": "5.2.0-beta.47",
"@storybook/html": "5.2.0-beta.47",
"@storybook/source-loader": "5.2.0-beta.47",
"eventemitter3": "^4.0.0",
"format-json": "^1.0.3",
"global": "^4.3.2"

140
examples/html-kitchen-sink/tests/__snapshots__/htmlshots.test.js.snap
View File

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addons|Actions Decorated actions + config 1`] = `
exports[`Storyshots Addons|Actions Story 1 1`] = `
<button
type="button"
>
@ -8,7 +8,7 @@ exports[`Storyshots Addons|Actions Decorated actions + config 1`] = `
</button>
`;
exports[`Storyshots Addons|Actions Decorated actions 1`] = `
exports[`Storyshots Addons|Actions Story 2 1`] = `
<button
type="button"
>
@ -16,7 +16,7 @@ exports[`Storyshots Addons|Actions Decorated actions 1`] = `
</button>
`;
exports[`Storyshots Addons|Actions Hello World 1`] = `
exports[`Storyshots Addons|Actions Story 3 1`] = `
<button
type="button"
>
@ -24,7 +24,7 @@ exports[`Storyshots Addons|Actions Hello World 1`] = `
</button>
`;
exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
exports[`Storyshots Addons|Actions Story 4 1`] = `
<button
type="button"
>
@ -32,36 +32,36 @@ exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
</button>
`;
exports[`Storyshots Addons|Actions Multiple actions 1`] = `
<button
type="button"
>
Hello World
</button>
`;
exports[`Storyshots Addons|Actions Multiple actions, object + config 1`] = `
<button
type="button"
>
Hello World
</button>
`;
exports[`Storyshots Addons|Actions Multiple actions, object 1`] = `
<button
type="button"
>
Hello World
</button>
`;
exports[`Storyshots Addons|Actions Multiple actions, selector 1`] = `
exports[`Storyshots Addons|Actions Story 5 1`] = `
`;
exports[`Storyshots Addons|Backgrounds story 1 1`] = `
exports[`Storyshots Addons|Actions Story 6 1`] = `
<button
type="button"
>
Hello World
</button>
`;
exports[`Storyshots Addons|Actions Story 7 1`] = `
<button
type="button"
>
Hello World
</button>
`;
exports[`Storyshots Addons|Actions Story 8 1`] = `
<button
type="button"
>
Hello World
</button>
`;
exports[`Storyshots Addons|Backgrounds Story 1 1`] = `
<span
style="color: white"
>
@ -69,7 +69,7 @@ exports[`Storyshots Addons|Backgrounds story 1 1`] = `
</span>
`;
exports[`Storyshots Addons|Backgrounds story 2 1`] = `
exports[`Storyshots Addons|Backgrounds Story 2 1`] = `
<span
style="color: white"
>
@ -77,7 +77,7 @@ exports[`Storyshots Addons|Backgrounds story 2 1`] = `
</span>
`;
exports[`Storyshots Addons|Centered button in center 1`] = `
exports[`Storyshots Addons|Centered Story 1 1`] = `
<div
id="sb-addon-centered-wrapper"
style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
@ -98,9 +98,29 @@ exports[`Storyshots Addons|Events Logger 1`] = `
`;
exports[`Storyshots Addons|Jest withTests 1`] = `This story shows test results`;
exports[`Storyshots Addons|Jest With Tests 1`] = `This story shows test results`;
exports[`Storyshots Addons|Knobs All knobs 1`] = `
exports[`Storyshots Addons|Knobs DOM 1`] = `
<p>
John Doe
</p>
`;
exports[`Storyshots Addons|Knobs Simple 1`] = `
<div>
I am John Doe and I'm 44 years old.
</div>
`;
exports[`Storyshots Addons|Knobs Story 3 1`] = `
<p
style="transition: color 0.5s ease-out; color: orangered;"
>
John Doe
</p>
`;
exports[`Storyshots Addons|Knobs Story 4 1`] = `
<div
style="border: 2px dotted deeppink; padding: 8px 22px; border-radius: 8px"
>
@ -147,29 +167,9 @@ exports[`Storyshots Addons|Knobs All knobs 1`] = `
</div>
`;
exports[`Storyshots Addons|Knobs CSS transitions 1`] = `
<p
style="transition: color 0.5s ease-out; color: orangered;"
>
John Doe
</p>
`;
exports[`Storyshots Addons|Knobs Story 5 1`] = `&lt;img src=x onerror="alert('XSS Attack')" &gt;`;
exports[`Storyshots Addons|Knobs DOM 1`] = `
<p>
John Doe
</p>
`;
exports[`Storyshots Addons|Knobs Simple 1`] = `
<div>
I am John Doe and I'm 44 years old.
</div>
`;
exports[`Storyshots Addons|Knobs XSS safety 1`] = `&lt;img src=x onerror="alert('XSS Attack')" &gt;`;
exports[`Storyshots Addons|Notes Simple note 1`] = `
exports[`Storyshots Addons|Notes Story 1 1`] = `
<p>
@ -185,8 +185,6 @@ exports[`Storyshots Addons|Notes Simple note 1`] = `
exports[`Storyshots Addons|a11y Default 1`] = `<button />`;
exports[`Storyshots Addons|a11y Delayed render 1`] = `<div />`;
exports[`Storyshots Addons|a11y Disabled 1`] = `
<button
disabled=""
@ -195,27 +193,29 @@ exports[`Storyshots Addons|a11y Disabled 1`] = `
</button>
`;
exports[`Storyshots Addons|a11y Invalid contrast 1`] = `
<button
style="color: black; background-color: brown;"
>
Testing the a11y addon
</button>
`;
exports[`Storyshots Addons|a11y Label 1`] = `
<button>
Testing the a11y addon
</button>
`;
exports[`Storyshots Demo button 1`] = `
exports[`Storyshots Addons|a11y Story 4 1`] = `
<button
style="color: black; background-color: brown;"
>
Testing the a11y addon
</button>
`;
exports[`Storyshots Addons|a11y Story 5 1`] = `<div />`;
exports[`Storyshots Demo Button 1`] = `
<button>
Hello Button
</button>
`;
exports[`Storyshots Demo effect 1`] = `
exports[`Storyshots Demo Effect 1`] = `
<button
id="button"
>
@ -223,13 +223,13 @@ exports[`Storyshots Demo effect 1`] = `
</button>
`;
exports[`Storyshots Demo heading 1`] = `
exports[`Storyshots Demo Heading 1`] = `
<h1>
Hello World
</h1>
`;
exports[`Storyshots Demo headings 1`] = `
exports[`Storyshots Demo Headings 1`] = `
<section>
<h1>
Hello World

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

@ -1,6 +1,6 @@
{
"name": "marko-cli",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"private": true,
"description": "Demo of how to build an app using marko-starter",
"repository": {
@ -24,14 +24,14 @@
"marko-starter": "^2.0.4"
},
"devDependencies": {
"@storybook/addon-a11y": "5.2.0-beta.40",
"@storybook/addon-actions": "5.2.0-beta.40",
"@storybook/addon-knobs": "5.2.0-beta.40",
"@storybook/addon-options": "5.2.0-beta.40",
"@storybook/addon-storysource": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.40",
"@storybook/marko": "5.2.0-beta.40",
"@storybook/source-loader": "5.2.0-beta.40",
"@storybook/addon-a11y": "5.2.0-beta.47",
"@storybook/addon-actions": "5.2.0-beta.47",
"@storybook/addon-knobs": "5.2.0-beta.47",
"@storybook/addon-options": "5.2.0-beta.47",
"@storybook/addon-storysource": "5.2.0-beta.47",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/marko": "5.2.0-beta.47",
"@storybook/source-loader": "5.2.0-beta.47",
"prettier": "^1.16.4",
"webpack": "^4.33.0"
}

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

@ -1,6 +1,6 @@
{
"name": "mithril-example",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"private": true,
"scripts": {
"build-storybook": "build-storybook",
@ -11,20 +11,20 @@
"mithril": "^1.1.6"
},
"devDependencies": {
"@storybook/addon-a11y": "5.2.0-beta.40",
"@storybook/addon-actions": "5.2.0-beta.40",
"@storybook/addon-backgrounds": "5.2.0-beta.40",
"@storybook/addon-centered": "5.2.0-beta.40",
"@storybook/addon-knobs": "5.2.0-beta.40",
"@storybook/addon-links": "5.2.0-beta.40",
"@storybook/addon-notes": "5.2.0-beta.40",
"@storybook/addon-options": "5.2.0-beta.40",
"@storybook/addon-storyshots": "5.2.0-beta.40",
"@storybook/addon-storysource": "5.2.0-beta.40",
"@storybook/addon-viewport": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.40",
"@storybook/mithril": "5.2.0-beta.40",
"@storybook/source-loader": "5.2.0-beta.40",
"@storybook/addon-a11y": "5.2.0-beta.47",
"@storybook/addon-actions": "5.2.0-beta.47",
"@storybook/addon-backgrounds": "5.2.0-beta.47",
"@storybook/addon-centered": "5.2.0-beta.47",
"@storybook/addon-knobs": "5.2.0-beta.47",
"@storybook/addon-links": "5.2.0-beta.47",
"@storybook/addon-notes": "5.2.0-beta.47",
"@storybook/addon-options": "5.2.0-beta.47",
"@storybook/addon-storyshots": "5.2.0-beta.47",
"@storybook/addon-storysource": "5.2.0-beta.47",
"@storybook/addon-viewport": "5.2.0-beta.47",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/mithril": "5.2.0-beta.47",
"@storybook/source-loader": "5.2.0-beta.47",
"webpack": "^4.33.0"
}
}

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

@ -58,10 +58,15 @@ addParameters({
{ name: 'light', value: '#eeeeee' },
{ name: 'dark', value: '#222222' },
],
// eslint-disable-next-line react/prop-types
docs: ({ context }) => (
<DocsPage context={context} subtitleSlot={({ selectedKind }) => `Subtitle: ${selectedKind}`} />
),
docs: {
// eslint-disable-next-line react/prop-types
page: ({ context }) => (
<DocsPage
context={context}
subtitleSlot={({ selectedKind }) => `Subtitle: ${selectedKind}`}
/>
),
},
});
configure(

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

@ -1,6 +1,6 @@
{
"name": "official-storybook",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"private": true,
"scripts": {
"build-storybook": "build-storybook -c ./ -s built-storybooks",
@ -15,34 +15,34 @@
},
"devDependencies": {
"@packtracker/webpack-plugin": "^2.0.1",
"@storybook/addon-a11y": "5.2.0-beta.40",
"@storybook/addon-actions": "5.2.0-beta.40",
"@storybook/addon-backgrounds": "5.2.0-beta.40",
"@storybook/addon-centered": "5.2.0-beta.40",
"@storybook/addon-contexts": "5.2.0-beta.40",
"@storybook/addon-cssresources": "5.2.0-beta.40",
"@storybook/addon-design-assets": "5.2.0-beta.40",
"@storybook/addon-docs": "5.2.0-beta.40",
"@storybook/addon-events": "5.2.0-beta.40",
"@storybook/addon-graphql": "5.2.0-beta.40",
"@storybook/addon-info": "5.2.0-beta.40",
"@storybook/addon-jest": "5.2.0-beta.40",
"@storybook/addon-knobs": "5.2.0-beta.40",
"@storybook/addon-links": "5.2.0-beta.40",
"@storybook/addon-notes": "5.2.0-beta.40",
"@storybook/addon-options": "5.2.0-beta.40",
"@storybook/addon-queryparams": "5.2.0-beta.40",
"@storybook/addon-storyshots": "5.2.0-beta.40",
"@storybook/addon-storyshots-puppeteer": "5.2.0-beta.40",
"@storybook/addon-storysource": "5.2.0-beta.40",
"@storybook/addon-viewport": "5.2.0-beta.40",
"@storybook/addons": "5.2.0-beta.40",
"@storybook/components": "5.2.0-beta.40",
"@storybook/core-events": "5.2.0-beta.40",
"@storybook/node-logger": "5.2.0-beta.40",
"@storybook/react": "5.2.0-beta.40",
"@storybook/source-loader": "5.2.0-beta.40",
"@storybook/theming": "5.2.0-beta.40",
"@storybook/addon-a11y": "5.2.0-beta.47",
"@storybook/addon-actions": "5.2.0-beta.47",
"@storybook/addon-backgrounds": "5.2.0-beta.47",
"@storybook/addon-centered": "5.2.0-beta.47",
"@storybook/addon-contexts": "5.2.0-beta.47",
"@storybook/addon-cssresources": "5.2.0-beta.47",
"@storybook/addon-design-assets": "5.2.0-beta.47",
"@storybook/addon-docs": "5.2.0-beta.47",
"@storybook/addon-events": "5.2.0-beta.47",
"@storybook/addon-graphql": "5.2.0-beta.47",
"@storybook/addon-info": "5.2.0-beta.47",
"@storybook/addon-jest": "5.2.0-beta.47",
"@storybook/addon-knobs": "5.2.0-beta.47",
"@storybook/addon-links": "5.2.0-beta.47",
"@storybook/addon-notes": "5.2.0-beta.47",
"@storybook/addon-options": "5.2.0-beta.47",
"@storybook/addon-queryparams": "5.2.0-beta.47",
"@storybook/addon-storyshots": "5.2.0-beta.47",
"@storybook/addon-storyshots-puppeteer": "5.2.0-beta.47",
"@storybook/addon-storysource": "5.2.0-beta.47",
"@storybook/addon-viewport": "5.2.0-beta.47",
"@storybook/addons": "5.2.0-beta.47",
"@storybook/components": "5.2.0-beta.47",
"@storybook/core-events": "5.2.0-beta.47",
"@storybook/node-logger": "5.2.0-beta.47",
"@storybook/react": "5.2.0-beta.47",
"@storybook/source-loader": "5.2.0-beta.47",
"@storybook/theming": "5.2.0-beta.47",
"cors": "^2.8.5",
"cross-env": "^5.2.0",
"enzyme-to-json": "^3.3.5",
@ -53,6 +53,7 @@
"global": "^4.3.2",
"graphql": "^14.1.1",
"jest-emotion": "^10.0.11",
"lodash": "^4.17.11",
"paths.macro": "^2.0.2",
"prop-types": "^15.7.2",
"react": "^16.8.3",

6
examples/official-storybook/stories/addon-docs/addon-docs.stories.js
View File

@ -13,7 +13,7 @@ export const basic = () => <div>Click docs tab to see basic docs</div>;
export const noDocs = () => <div>Click docs tab to see no docs error</div>;
noDocs.story = {
name: 'no docs',
parameters: { docs: null },
parameters: { docs: { page: null } },
};
export const withNotes = () => <div>Click docs tab to see DocsPage docs</div>;
@ -34,7 +34,7 @@ export const mdxOverride = () => <div>Click docs tab to see MDX-overridden docs<
mdxOverride.story = {
name: 'mdx override',
parameters: {
docs: mdxNotes,
docs: { page: mdxNotes },
},
};
@ -42,6 +42,6 @@ export const jsxOverride = () => <div>Click docs tab to see JSX-overridden docs<
jsxOverride.story = {
name: 'jsx override',
parameters: {
docs: () => <div>Hello docs</div>,
docs: { page: () => <div>Hello docs</div> },
},
};

2
examples/official-storybook/stories/addon-docs/mdx.stories.js
View File

@ -9,6 +9,6 @@ export default {
// This renders the contents of the docs panel into story content
export const typography = () => {
const Docs = markdown.parameters.docs;
const Docs = markdown.parameters.docs.page;
return <Docs />;
};

21
examples/official-storybook/stories/hooks.stories.js Normal file
View File

@ -0,0 +1,21 @@
import React from 'react';
import { useState } from '@storybook/client-api';
export default {
title: 'Hooks',
};
export const Checkbox = () => {
const [on, setOn] = useState(false);
return (
<label>
<input type="checkbox" checked={on} onChange={e => setOn(e.target.checked)} />
On
</label>
);
};
export const Input = () => {
const [text, setText] = useState('foo');
return <input value={text} onChange={e => setText(e.target.value)} />;
};

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

@ -1,6 +1,6 @@
{
"name": "polymer-cli",
"version": "5.2.0-beta.40",
"version": "5.2.0-beta.47",
"private": true,
"scripts": {
"build-storybook": "build-storybook",
@ -10,17 +10,17 @@
},
"dependencies": {
"@polymer/polymer": "^2.6.0",
"@storybook/addon-a11y": "5.2.0-beta.40",
"@storybook/addon-actions": "5.2.0-beta.40",
"@storybook/addon-backgrounds": "5.2.0-beta.40",
"@storybook/addon-knobs": "5.2.0-beta.40",
"@storybook/addon-links": "5.2.0-beta.40",
"@storybook/addon-notes": "5.2.0-beta.40",
"@storybook/addon-options": "5.2.0-beta.40",
"@storybook/addon-storysource": "5.2.0-beta.40",
"@storybook/addon-viewport": "5.2.0-beta.40",
"@storybook/polymer": "5.2.0-beta.40",
"@storybook/source-loader": "5.2.0-beta.40",
"@storybook/addon-a11y": "5.2.0-beta.47",
"@storybook/addon-actions": "5.2.0-beta.47",
"@storybook/addon-backgrounds": "5.2.0-beta.47",
"@storybook/addon-knobs": "5.2.0-beta.47",
"@storybook/addon-links": "5.2.0-beta.47",
"@storybook/addon-notes": "5.2.0-beta.47",
"@storybook/addon-options": "5.2.0-beta.47",
"@storybook/addon-storysource": "5.2.0-beta.47",
"@storybook/addon-viewport": "5.2.0-beta.47",
"@storybook/polymer": "5.2.0-beta.47",
"@storybook/source-loader": "5.2.0-beta.47",
"@webcomponents/webcomponentsjs": "^1.2.0",
"global": "^4.3.2",
"lit-html": "^1.0.0",

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