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

Merge branch 'next' into fix-expandable-vertical-align

Browse Source
This commit is contained in:
Norbert de Langen 2019-11-27 18:46:48 +01:00 committed by GitHub
commit 1750d0e6fc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
305 changed files with 4481 additions and 2981 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
CHANGELOG.md
View File

@ -1,3 +1,38 @@
## 5.3.0-beta.10 (November 27, 2019)
### Features
* MDX: Allow user to override `docs.container` parameter ([#8968](https://github.com/storybookjs/storybook/pull/8968))
* Addon-docs: Increase docs content wrapper max-width to 1000px ([#8970](https://github.com/storybookjs/storybook/pull/8970))
* Addon-docs: Prop table support for Angular directives ([#8922](https://github.com/storybookjs/storybook/pull/8922))
* Addon-docs: Increase width of props table type column ([#8950](https://github.com/storybookjs/storybook/pull/8950))
### Bug Fixes
* Addon-docs: Fix `Preview` theming escape hatch ([#8969](https://github.com/storybookjs/storybook/pull/8969))
* Core: Don't try to require .ts files from dist ([#8971](https://github.com/storybookjs/storybook/pull/8971))
* Core: Use logger in base-webpack.config.js ([#8966](https://github.com/storybookjs/storybook/pull/8966))
### Maintenance
* Examples: Add "debug" script for storybook-official ([#8973](https://github.com/storybookjs/storybook/pull/8973))
* Build: Upgrade to node 10 on netlify ([#8967](https://github.com/storybookjs/storybook/pull/8967))
* Core/triconfig everywhere: migrate examples ([#8942](https://github.com/storybookjs/storybook/pull/8942))
## 5.3.0-beta.9 (November 26, 2019)
### Features
* Storyshots: Remove abandoned storyshots when run with `-u` flag ([#8889](https://github.com/storybookjs/storybook/pull/8889))
### Bug Fixes
* Addon-docs: Support subcomponents as a top-level default export ([#8931](https://github.com/storybookjs/storybook/pull/8931))
### Dependency Upgrades
* Core: Add missing dependencies ([#8945](https://github.com/storybookjs/storybook/pull/8945))
## 5.3.0-beta.8 (November 26, 2019)
### Features

25
HISTORY.md
View File

@ -1,25 +0,0 @@
## v.Next
- Deprecated `{ linkTo, action }` as built-in addons: <https://github.com/storybookjs/storybook/issues/1017>. From 3.0 use them as you would [any other addon](https://storybook.js.org/addons/using-addons/).
Before:
```js
// .storybook/addons.js
import '@kadira/storybook/addons'
// *.stories.js
import { linkTo, action } from '@kadira/storybook'
```
After:
```js
// .storybook/addons.js
import '@storybook/addon-actions/register'
import '@storybook/addon-links/register'
// *.stories.js
import { action } from '@storybook/addon-actions'
import { linkTo } from '@storybook/addon-links'
```

81
addons/a11y/README.md
View File

@ -14,37 +14,40 @@ First, install the addon.
$ yarn add @storybook/addon-a11y --dev
```
Add this line to your `addons.js` file (create this file inside your storybook config directory if needed).
Add this line to your `main.js` file (create this file inside your storybook config directory if needed).
```js
import '@storybook/addon-a11y/register';
module.exports = {
addons: ['@storybook/addon-a11y/register']
}
```
import the `withA11y` decorator to check your stories for violations within your components.
```js
import React from 'react';
import { storiesOf, addDecorator } from '@storybook/react';
import { withA11y } from '@storybook/addon-a11y';
// should only be added once
// best place is in config.js
addDecorator(withA11y)
export default {
title: 'button',
decorators: [withA11y],
};
storiesOf('button', module)
.add('Accessible', () => (
<button>
Accessible button
</button>
))
.add('Inaccessible', () => (
<button style={{ backgroundColor: 'red', color: 'darkRed', }}>
Inaccessible button
</button>
));
export const accessible = () => (
<button>
Accessible button
</button>
);
export const inaccessible = () => (
<button style={{ backgroundColor: 'red', color: 'darkRed', }}>
Inaccessible button
</button>
);
```
For more customizability. Use the `addParameters` function to configure [aXe options](https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#api-name-axeconfigure).
For more customizability use parameters to configure [aXe options](https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#api-name-axeconfigure).
You can override these options [at story level too](https://storybook.js.org/docs/configurations/options-parameter/#per-story-options).
```js
@ -53,26 +56,32 @@ import { storiesOf, addDecorator, addParameters } from '@storybook/react';
import { withA11y } from '@storybook/addon-a11y';
addDecorator(withA11y)
addParameters({
a11y: {
element: '#root', // optional selector which element to inspect
config: {}, // axe-core configurationOptions (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#parameters-1)
options: {} // axe-core optionsParameter (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter)
export default {
title: 'button',
decorators: [withA11y],
parameters: {
a11y: {
// optional selector which element to inspect
element: '#root',
// axe-core configurationOptions (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#parameters-1)
config: {},
// axe-core optionsParameter (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter)
options: {},
},
},
});
};
storiesOf('button', module)
.add('Accessible', () => (
<button style={{ backgroundColor: 'black', color: 'white', }}>
Accessible button
</button>
))
.add('Inaccessible', () => (
<button style={{ backgroundColor: 'black', color: 'black', }}>
Inaccessible button
</button>
));
export const accessible = () => (
<button>
Accessible button
</button>
);
export const inaccessible = () => (
<button style={{ backgroundColor: 'red', color: 'darkRed', }}>
Inaccessible button
</button>
);
```
## Roadmap

14
addons/a11y/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-a11y",
"version": "5.3.0-beta.8",
"version": "5.3.0-beta.10",
"description": "a11y addon for storybook",
"keywords": [
"a11y",
@ -33,12 +33,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.8",
"@storybook/api": "5.3.0-beta.8",
"@storybook/client-logger": "5.3.0-beta.8",
"@storybook/components": "5.3.0-beta.8",
"@storybook/core-events": "5.3.0-beta.8",
"@storybook/theming": "5.3.0-beta.8",
"@storybook/addons": "5.3.0-beta.10",
"@storybook/api": "5.3.0-beta.10",
"@storybook/client-logger": "5.3.0-beta.10",
"@storybook/components": "5.3.0-beta.10",
"@storybook/core-events": "5.3.0-beta.10",
"@storybook/theming": "5.3.0-beta.10",
"axe-core": "^3.3.2",
"core-js": "^3.0.1",
"global": "^4.3.2",

70
addons/actions/README.md
View File

@ -14,10 +14,12 @@ Install:
npm i -D @storybook/addon-actions
```
Then, add following content to `.storybook/addons.js`
Then, add following content to `.storybook/main.js`
```js
import '@storybook/addon-actions/register';
module.exports = {
addons: ['@storybook/addon-actions/register']
}
```
Import the `action` function and use it to create actions handlers. When creating action handlers, provide a **name** to make it easier to identify.
@ -25,14 +27,17 @@ Import the `action` function and use it to create actions handlers. When creatin
> _Note: Make sure NOT to use reserved words as function names. [issues#29](https://github.com/storybookjs/storybook-addon-actions/issues/29#issuecomment-288274794)_
```js
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import Button from './button';
storiesOf('Button', module).add('default view', () => (
export default {
title: 'Button',
component: Button,
};
export const defaultView = () => (
<Button onClick={action('button-click')}>Hello World!</Button>
));
);
```
## Multiple actions
@ -40,22 +45,27 @@ storiesOf('Button', module).add('default view', () => (
If your story requires multiple actions, it may be convenient to use `actions` to create many at once:
```js
import { storiesOf } from '@storybook/react';
import { actions } from '@storybook/addon-actions';
import Button from './button';
export default {
title: 'Button',
component: Button,
};
// This will lead to { onClick: action('onClick'), ... }
const eventsFromNames = actions('onClick', 'onMouseOver');
// This will lead to { onClick: action('clicked'), ... }
const eventsFromObject = actions({ onClick: 'clicked', onMouseOver: 'hovered' });
storiesOf('Button', module)
.add('default view', () => <Button {...eventsFromNames}>Hello World!</Button>)
.add('default view, different actions', () => (
<Button {...eventsFromObject}>Hello World!</Button>
));
export const first = () => (
<Button {...eventsFromNames}>Hello World!</Button>
);
export const second = () => (
<Button {...eventsFromObject}>Hello World!</Button>
);
```
## Action Decorators
@ -66,14 +76,18 @@ If you wish to process action data before sending them over to the logger, you c
```js
import { decorate } from '@storybook/addon-actions';
import Button from './button';
export default {
title: 'Button',
component: Button,
};
const firstArg = decorate([args => args.slice(0, 1)]);
storiesOf('Button', module).add('default view', () => (
export const first = () => (
<Button onClick={firstArg.action('button-click')}>Hello World!</Button>
));
);
```
## Configuration
@ -88,7 +102,7 @@ The action logger, by default, will log all actions fired during the lifetime of
this can make the storybook laggy. As a workaround, you can configure an upper limit to how many actions should
be logged.
To apply the configuration globally use the `configureActions` function in your `config.js` file.
To apply the configuration globally use the `configureActions` function in your `preview.js` file.
```js
import { configureActions } from '@storybook/addon-actions';
@ -97,14 +111,14 @@ configureActions({
depth: 100,
// Limit the number of items logged into the actions panel
limit: 20,
})
});
```
To apply the configuration per action use:
```js
action('my-action', {
depth: 5,
})
});
```
### Available Options
@ -121,15 +135,15 @@ You can define action handles in a declarative way using `withActions` decorator
Keys have `'<eventName> <selector>'` format, e.g. `'click .btn'`. Selector is optional. This can be used with any framework but is especially useful for `@storybook/html`.
```js
import { storiesOf } from '@storybook/html';
import { withActions } from '@storybook/addon-actions';
import Button from './button';
storiesOf('button', module)
// Log mouseovers on entire story and clicks on .btn
.addDecorator(withActions('mouseover', 'click .btn'))
.add('with actions', () => `
<div>
Clicks on this button will be logged: <button className="btn" type="button">Button</button>
</div>
`);
export default {
title: 'Button',
decorators: [withActions('mouseover', 'click .btn')]
};
export const first = () => (
<Button className="btn">Hello World!</Button>
);
```

14
addons/actions/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-actions",
"version": "5.3.0-beta.8",
"version": "5.3.0-beta.10",
"description": "Action Logger addon for storybook",
"keywords": [
"storybook"
@ -28,12 +28,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.8",
"@storybook/api": "5.3.0-beta.8",
"@storybook/client-api": "5.3.0-beta.8",
"@storybook/components": "5.3.0-beta.8",
"@storybook/core-events": "5.3.0-beta.8",
"@storybook/theming": "5.3.0-beta.8",
"@storybook/addons": "5.3.0-beta.10",
"@storybook/api": "5.3.0-beta.10",
"@storybook/client-api": "5.3.0-beta.10",
"@storybook/components": "5.3.0-beta.10",
"@storybook/core-events": "5.3.0-beta.10",
"@storybook/theming": "5.3.0-beta.10",
"core-js": "^3.0.1",
"fast-deep-equal": "^2.0.1",
"global": "^4.3.2",

87
addons/backgrounds/README.md
View File

@ -14,12 +14,14 @@ npm i -D @storybook/addon-backgrounds
## Configuration
Then create a file called `addons.js` in your storybook config.
Then create a file called `main.js` in your storybook config.
Add following content to it:
```js
import '@storybook/addon-backgrounds/register';
module.exports = {
addons: ['@storybook/addon-backgrounds/register']
}
```
## Usage
@ -28,19 +30,23 @@ Then write your stories like this:
```js
import React from 'react';
import { storiesOf } from '@storybook/react';
storiesOf('Button', module)
.addParameters({
export default {
title: 'Button',
parameters: {
backgrounds: [
{ name: 'twitter', value: '#00aced', default: true },
{ name: 'facebook', value: '#3b5998' },
],
})
.add('with text', () => <button>Click me</button>);
]
},
};
export const defaultView = () => (
<button>Click me</button>
);
```
You can add the backgrounds to all stories with `addParameters` in `.storybook/config.js`:
You can add the backgrounds to all stories with `addParameters` in `.storybook/preview.js`:
```js
import { addParameters } from '@storybook/react'; // <- or your storybook framework
@ -51,48 +57,53 @@ addParameters({
{ name: 'facebook', value: '#3b5998' },
],
});
// should be before configure()
```
If you want to override backgrounds for a single story or group of stories, pass the `backgrounds` parameter:
```js
import React from 'react';
import { storiesOf } from '@storybook/react';
storiesOf('Button', module)
.add('with text', () => <button>Click me</button>, {
backgrounds: [{
name: 'red', value: 'rgba(255, 0, 0)',
}]
});
export default {
title: 'Button',
}
export const defaultView = () => (
<button>Click me</button>
);
defaultView.story = {
parameters: {
background: [
{ name: 'red', value: 'rgba(255, 0, 0)' },
],
},
};
```
If you don't want to use backgrounds for a story, you can set the `backgrounds` parameter to `[]`, or use `{ disable: true }` to skip the addon:
```js
import React from 'react';
import { storiesOf } from '@storybook/react';
storiesOf('Button', module)
.add('example 1', () => <button>Click me</button>, {
backgrounds: [],
});
export default {
title: 'Button',
}
storiesOf('Button', module)
.add('example 2', () => <button>Click me</button>, {
backgrounds: { disable: true },
});
```
## Events
If you want to react to a background change—for instance to implement some custom logic in your Storybook—you can subscribe to the `storybook/background/update` event. It will be emitted when the user changes the background.
```js
addonAPI.getChannel().on('storybook/background/update', (bg) => {
console.log('Background color', bg.selected);
console.log('Background name', bg.name);
});
export const noBackgrounds = () => (
<button>Click me</button>
);
noBackgrounds.story = {
parameters: {
background: [],
},
};
export const disabledBackgrounds = () => (
<button>Click me</button>
);
disabledBackgrounds.story = {
parameters: {
background: { disabled: true },
},
};
```

14
addons/backgrounds/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-backgrounds",
"version": "5.3.0-beta.8",
"version": "5.3.0-beta.10",
"description": "A storybook addon to show different backgrounds for your preview",
"keywords": [
"addon",
@ -32,12 +32,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.8",
"@storybook/api": "5.3.0-beta.8",
"@storybook/client-logger": "5.3.0-beta.8",
"@storybook/components": "5.3.0-beta.8",
"@storybook/core-events": "5.3.0-beta.8",
"@storybook/theming": "5.3.0-beta.8",
"@storybook/addons": "5.3.0-beta.10",
"@storybook/api": "5.3.0-beta.10",
"@storybook/client-logger": "5.3.0-beta.10",
"@storybook/components": "5.3.0-beta.10",
"@storybook/core-events": "5.3.0-beta.10",
"@storybook/theming": "5.3.0-beta.10",
"core-js": "^3.0.1",
"memoizerific": "^1.11.3",
"react": "^16.8.3",

4
addons/centered/package.json
View File

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

31
addons/contexts/README.md
View File

@ -47,14 +47,15 @@ To get it started, add this package into your project:
yarn add -D @storybook/addon-contexts
```
Then, register the addon by adding the following line into your `addon.js` file (you should be able to find the file
under the storybook config directory of your project):
within `.storybook/main.js`:
```js
import '@storybook/addon-contexts/register';
module.exports = {
addons: ['@storybook/addon-contexts/register']
}
```
To load your contextual setups for your stories globally, add the following lines into `config.js` file (you should
To load your contextual setups for your stories globally, add the following lines into `preview.js` file (you should
see it near your `addon.js` file):
```js
@ -68,28 +69,24 @@ addDecorator(withContexts(contexts));
Alternatively, like other addons, you can use this addon only for a given set of stories:
```js
import { storiesOf } from '@storybook/[framework]';
import { withContexts } from '@storybook/addon-contexts/[framework]';
import { contexts } from './configs/contexts';
const story = storiesOf('Component With Contexts', module).addDecorator(withContexts(contexts)); // use this addon with a default contextual environment setups
export default {
title: 'Component With Contexts',
decorators: [withContexts(contexts)],
};
```
Finally, you may want to modify the default setups at per story level. Here is how you can do this:
```js
story.add(
() => {
/* some stories */
},
{
contexts: [
{
/* the modified setup goes here, sharing the same API signatures */
},
],
export const defaultView = () => <div />;
defaultView.story = {
parameters: {
context: [{}]
}
);
};
```
## ⚙️ Setups

10
addons/contexts/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-contexts",
"version": "5.3.0-beta.8",
"version": "5.3.0-beta.10",
"description": "Storybook Addon Contexts",
"keywords": [
"preact",
@ -27,10 +27,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.8",
"@storybook/api": "5.3.0-beta.8",
"@storybook/components": "5.3.0-beta.8",
"@storybook/core-events": "5.3.0-beta.8",
"@storybook/addons": "5.3.0-beta.10",
"@storybook/api": "5.3.0-beta.10",
"@storybook/components": "5.3.0-beta.10",
"@storybook/core-events": "5.3.0-beta.10",
"core-js": "^3.0.1",
"global": "^4.3.2",
"qs": "^6.6.0"

52
addons/cssresources/README.md
View File

@ -14,49 +14,37 @@ yarn add -D @storybook/addon-cssresources
## Configuration
Then create a file called `addons.js` in your storybook config.
Then create a file called `main.js` in your storybook config.
Add following content to it:
```js
import '@storybook/addon-cssresources/register';
module.exports = {
addons: ['@storybook/addon-cssresources/register']
}
```
## Usage
You need add the all the css resources at compile time using the `withCssResources` decorator. They can be added globally or per story. You can then choose which ones to load from the cssresources addon ui:
You need add the all the css resources at compile time using the `withCssResources` decorator. They can be added globally or per story. You can then choose which ones to load from the cssresources addon UI:
```js
// Import from @storybook/X where X is your framework
import { configure, addDecorator, addParameters, storiesOf } from '@storybook/react';
import { withCssResources } from '@storybook/addon-cssresources';
// global
addDecorator(withCssResources)
addParameters({
cssresources: [{
id: `bluetheme`,
code: `<style>body { background-color: lightblue; }</style>`,
picked: false,
},
],
});
export default {
title: 'CssResources',
parameters: {
cssresources: [{
id: `bluetheme`,
code: `<style>body { background-color: lightblue; }</style>`,
picked: false,
},
],
},
decorators: [withCssResources],
};
You can use the `cssresources` parameter to override resources on each story individually:
// per story
storiesOf('Addons|Cssresources', module)
.add('Camera Icon', () => <i className="fa fa-camera-retro"> Camera Icon</i>, {
cssresources: [
{
id: `fontawesome`,
code: `<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></link>`,
picked: true,
}, {
id: `whitetheme`,
code: `<style>.fa { color: #fff }</style>`,
picked: true,
},
],
});
export const defaultView = () => (
<div />
);
```

10
addons/cssresources/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-cssresources",
"version": "5.3.0-beta.8",
"version": "5.3.0-beta.10",
"description": "A storybook addon to switch between css resources at runtime for your story",
"keywords": [
"addon",
@ -32,10 +32,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.8",
"@storybook/api": "5.3.0-beta.8",
"@storybook/components": "5.3.0-beta.8",
"@storybook/core-events": "5.3.0-beta.8",
"@storybook/addons": "5.3.0-beta.10",
"@storybook/api": "5.3.0-beta.10",
"@storybook/components": "5.3.0-beta.10",
"@storybook/core-events": "5.3.0-beta.10",
"core-js": "^3.0.1",
"global": "^4.3.2",
"react": "^16.8.3"

39
addons/design-assets/README.md
View File

@ -11,45 +11,32 @@ npm install @storybook/addon-design-assets
```
## Usage
within `addons.js`:
within `.storybook/main.js`:
```js
import '@storybook/addon-design-assets/register';
module.exports = {
addons: ['@storybook/addon-design-assets/register']
}
```
within your stories:
```js
import { storiesOf } from '@storybook/react';
import React from 'react';
import imageUrl from './images/my-image.jpg';
storiesOf('root|group/component', module)
.addParameters({
export default {
title: 'Design Assets',
parameters: {
assets: [
imageUrl, // link to a file imported
'https://via.placeholder.com/300/09f/fff.png', // link to an external image
'https://www.example.com', // link to a webpage
'https://www.example.com?id={id}', // link to a webpage with the current story's id in the url
],
})
.add('variant', () => <div>your story here</div>);
```
},
};
If you have a set of different assets on 1 story, you might want to name then:
```js
import { storiesOf } from '@storybook/react';
import imageUrl from './images/my-image.jpg';
storiesOf('root|group/component', module)
.addParameters({
assets: [{
url: 'https://via.placeholder.com/300/09f/fff.png', // link to an external image
name: 'blue',
}, {
url: 'https://via.placeholder.com/300/f90/fff.png', // link to an external image
name: 'orange',
}],
})
.add('variant', () => <div>your story here</div>);
```
export const defaultView = () => (
<div>your story here</div>
);

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

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-design-assets",
"version": "5.3.0-beta.8",
"version": "5.3.0-beta.10",
"description": "Design asset preview for storybook",
"keywords": [
"addon",
@ -34,12 +34,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.8",
"@storybook/api": "5.3.0-beta.8",
"@storybook/client-logger": "5.3.0-beta.8",
"@storybook/components": "5.3.0-beta.8",
"@storybook/core-events": "5.3.0-beta.8",
"@storybook/theming": "5.3.0-beta.8",
"@storybook/addons": "5.3.0-beta.10",
"@storybook/api": "5.3.0-beta.10",
"@storybook/client-logger": "5.3.0-beta.10",
"@storybook/components": "5.3.0-beta.10",
"@storybook/core-events": "5.3.0-beta.10",
"@storybook/theming": "5.3.0-beta.10",
"core-js": "^3.0.1",
"global": "^4.3.2",
"react": "^16.8.3",

100
addons/docs/README.md
View File

@ -106,22 +106,15 @@ Docs has peer dependencies on `react`, `react-is`, and `babel-loader`. If you wa
yarn add -D react react-is babel-loader
```
Then add the following to your `.storybook/presets.js` exports:
Then add the following to your `.storybook/main.js`:
```js
module.exports = ['@storybook/addon-docs/preset'];
module.exports = {
presets: ['@storybook/addon-docs/preset'],
stories: ['../src/**/*/stories.(js|mdx)'],
};
```
**Configure.** If you're migrating from an earlier version of Storybook and want to use `MDX`, you need to upgrade your Storybook config:
```js
import { configure } from '@storybook/react';
configure(require.context('../src', true, /\.stories\.(js|mdx)$/), module);
```
For more information on the new `configure`, see ["Loading stories"](https://github.com/storybookjs/storybook/blob/next/docs/src/pages/basics/writing-stories/index.md#loading-stories) in the Storybook documentation.
If using in conjunction with the [storyshots add-on](../storyshots/storyshots-core/README.md), you will need to
configure Jest to transform MDX stories into something Storyshots can understand:
@ -147,65 +140,72 @@ Add the following to your Jest configuration:
The `addon-docs` preset has a few configuration options that can be used to configure its babel/webpack loading behavior. Here's an example of how to use the preset with options:
```js
module.exports = [
{
name: '@storybook/addon-docs/react/preset',
options: {
configureJSX: true,
babelOptions: {},
sourceLoaderOptions: null,
module.exports = {
presets: [
{
name: '@storybook/addon-docs/react/preset',
options: {
configureJSX: true,
babelOptions: {},
sourceLoaderOptions: null,
},
},
},
];
],
};
```
The `configureJsx` option is useful when you're writing your docs in MDX and your project's babel config isn't already set up to handle JSX files. `babelOptions` is a way to further configure the babel processor when you're using `configureJSX`.
`sourceLoaderOptions` is an object for configuring `@storybook/source-loader`. When set to `null` it tells docs not to run the `source-loader` at all, which can be used as an optimization, or if you're already using `source-loader` in your `webpack.config.js`.
`sourceLoaderOptions` is an object for configuring `@storybook/source-loader`. When set to `null` it tells docs not to run the `source-loader` at all, which can be used as an optimization, or if you're already using `source-loader` in your `main.js`.
## Manual configuration
If you don't want to use the preset, and prefer to configure "the long way", first register the addon in `.storybook/addons.js`:
If you don't want to use the preset, and prefer to configure "the long way", first register the addon in `.storybook/main.js`:
```js
import '@storybook/addon-docs/register';
module.exports = {
addons: ['@storybook/addon-docs/register']
};
```
Then configure Storybook's webpack loader in `.storybook/webpack.config.js` to understand MDX story files and annotate TS/JS story files with source code using `source-loader`:
Then configure Storybook's webpack loader in `.storybook/main.js` to understand MDX story files and annotate TS/JS story files with source code using `source-loader`:
```js
const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');
module.exports = async ({ config }) => {
config.module.rules.push({
test: /\.(stories|story)\.mdx$/,
use: [
{
loader: 'babel-loader',
// may or may not need this line depending on your app's setup
options: {
plugins: ['@babel/plugin-transform-react-jsx'],
module.exports = {
webpack: async config => {
config.module.rules.push({
test: /\.(stories|story)\.mdx$/,
use: [
{
loader: 'babel-loader',
// may or may not need this line depending on your app's setup
options: {
plugins: ['@babel/plugin-transform-react-jsx'],
},
},
},
{
loader: '@mdx-js/loader',
options: {
compilers: [createCompiler({})],
{
loader: '@mdx-js/loader',
options: {
compilers: [createCompiler({})],
},
},
},
],
});
config.module.rules.push({
test: /\.(stories|story)\.[tj]sx?$/,
loader: require.resolve('@storybook/source-loader'),
exclude: [/node_modules/],
enforce: 'pre',
});
return config;
],
});
config.module.rules.push({
test: /\.(stories|story)\.[tj]sx?$/,
loader: require.resolve('@storybook/source-loader'),
exclude: [/node_modules/],
enforce: 'pre',
});
return config;
}
};
```
Finally, you'll need to set up DocsPage in `.storybook/config.js`:
Finally, you'll need to set up DocsPage in `.storybook/preview.js`:
```js
import { addParameters } from '@storybook/react';

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

@ -225,7 +225,7 @@ You can replace DocsPage at any level by overriding the `docs.page` parameter:
- [With MDX](./recipes.md#csf-stories-with-mdx-docs) docs
- With a custom React component
**Globally (config.js)**
**Globally (preview.js)**
```js
import { addParameters } from '@storybook/react';

2
addons/docs/docs/mdx.md
View File

@ -165,7 +165,7 @@ To add [decorators](https://github.com/storybookjs/storybook/blob/next/docs/src/
</Story>
```
In addition, global decorators work just like before, e.g. adding the following to your `.storybook/config.js`:
In addition, global decorators work just like before, e.g. adding the following to your `.storybook/preview.js`:
```js
import { addDecorator, addParameters } from '@storybook/react';

6
addons/docs/docs/multiframework.md
View File

@ -36,7 +36,7 @@ For props tables and descriptions, both of which are described in more detail be
Props tables are enabled by the framework-specific `docs.extractProps` parameter, which extracts a component's props into a common data structure.
Here's how it's done in Vue's framework-specific `config.js`:
Here's how it's done in Vue's framework-specific `preview.js`:
```js
import { extractProps } from './extractProps';
@ -49,7 +49,7 @@ addParameters({
});
```
The `extractProps`function receives a component as an argument, and returns an object of type [`PropsTableProps`](https://github.com/storybookjs/storybook/blob/next/lib/components/src/blocks/PropsTable/PropsTable.tsx#L147), which can either be a array of `PropDef` rows (React), or a mapping of section name to an array of `PropDef` rows (e.g. `Props`/`Events`/`Slots` in Vue).
The `extractProps`function receives a component as an argument, and returns an object of type [`PropsTableProps`](https://github.com/storybookjs/storybook/blob/next/lib/components/src/blocks/PropsTable/PropsTable.tsx#L147), which can either be an array of `PropDef` rows (React), or a mapping of section name to an array of `PropDef` rows (e.g. `Props`/`Events`/`Slots` in Vue).
```ts
export interface PropDef {
@ -79,7 +79,7 @@ It follows the pattern of [Props tables](#props-tables) above, only it's even si
Inline story rendering is another framework specific optimization, made possible by the `docs.prepareForInline` parameter.
Again let's look at Vue's framework-specific `config.js`:
Again let's look at Vue's framework-specific `preview.js`:
```js
import toReact from '@egoist/vue-to-react';

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

@ -157,7 +157,7 @@ We made this error explicit to make sure you know what you're doing when you mix
If you're currently using the notes/info addons, you can upgrade to DocsPage by providing a custom `docs.extractComponentDescription` parameter. There are different ways to use each addon, so you can adapt this recipe according to your use case.
Suppose you've added a `notes` parameter to each component in your library, containing markdown text, and you want that to show up at the top of the page in the `Description` slot. You could do that by adding the following snippet to `.storybook/config.js`:
Suppose you've added a `notes` parameter to each component in your library, containing markdown text, and you want that to show up at the top of the page in the `Description` slot. You could do that by adding the following snippet to `.storybook/preview.js`:
```js
import { addParameters } from '@storybook/client-api';

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

@ -10,7 +10,7 @@
Storybook theming is the **recommended way** to theme your docs. If you update your storybook theme according to [the documentation](https://storybook.js.org/docs/configurations/theming/), Storybook Docs should adapt in reasonable ways.
For example, here's how to change your docs (and Storybook) to the dark theme, by modifying `.storybook/config.js`:
For example, here's how to change your docs (and Storybook) to the dark theme, by modifying `.storybook/preview.js`:
```js
import { addParameters } from '@storybook/react';
@ -45,7 +45,7 @@ You can style these classes in `.storybook/preview-head.html`. For example, here
If you're using MDX, there's one more level of themability. MDX allows you to [completely override the components](https://mdxjs.com/advanced/components) that are rendered from markdown using a `components` parameter. This is an advanced usage that we don't officially support in Storybook, but it's a powerful mechanism if you need it.
Here's how you might insert a custom code renderer for `code` blocks on the page, in `.storybook/config.js`:
Here's how you might insert a custom code renderer for `code` blocks on the page, in `.storybook/preview.js`:
```js
import { addParameters } from '@storybook/react';

17
addons/docs/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-docs",
"version": "5.3.0-beta.8",
"version": "5.3.0-beta.10",
"description": "Superior documentation for your components",
"keywords": [
"addon",
@ -45,13 +45,13 @@
"@mdx-js/loader": "^1.1.0",
"@mdx-js/mdx": "^1.1.0",
"@mdx-js/react": "^1.0.27",
"@storybook/addons": "5.3.0-beta.8",
"@storybook/api": "5.3.0-beta.8",
"@storybook/components": "5.3.0-beta.8",
"@storybook/postinstall": "5.3.0-beta.8",
"@storybook/router": "5.3.0-beta.8",
"@storybook/source-loader": "5.3.0-beta.8",
"@storybook/theming": "5.3.0-beta.8",
"@storybook/addons": "5.3.0-beta.10",
"@storybook/api": "5.3.0-beta.10",
"@storybook/components": "5.3.0-beta.10",
"@storybook/postinstall": "5.3.0-beta.10",
"@storybook/router": "5.3.0-beta.10",
"@storybook/source-loader": "5.3.0-beta.10",
"@storybook/theming": "5.3.0-beta.10",
"acorn": "^7.1.0",
"acorn-jsx": "^5.1.0",
"acorn-walk": "^7.0.0",
@ -63,6 +63,7 @@
"js-string-escape": "^1.0.1",
"lodash": "^4.17.15",
"prop-types": "^15.7.2",
"react-element-to-jsx-string": "^14.1.0",
"ts-dedent": "^1.1.0",
"util-deprecate": "^1.0.2",
"vue-docgen-api": "^3.26.0",

3
addons/docs/src/blocks/Source.tsx
View File

@ -5,6 +5,7 @@ import { CURRENT_SELECTION } from './shared';
interface CommonProps {
language?: string;
dark?: boolean;
}
type SingleSourceProps = {
@ -76,7 +77,7 @@ export const getSourceProps = (
.join('\n\n');
}
return source
? { code: source, language: props.language || 'jsx' }
? { code: source, language: props.language || 'jsx', dark: props.dark || false }
: { error: SourceError.SOURCE_UNAVAILABLE };
};

4
addons/docs/src/blocks/index.ts
View File

@ -20,6 +20,4 @@ export * from './Title';
export * from './Wrapper';
export * from './shared';
// helper function for MDX
export const makeStoryFn = (val: any) => (typeof val === 'function' ? val : () => val);
export * from './mdx';

14
addons/docs/src/blocks/mdx.tsx Normal file
View File

@ -0,0 +1,14 @@
import * as React from 'react';
import { DocsContext, DocsContextProps } from './DocsContext';
// Hacky utility for dealing with functions or values in MDX Story elements
export const makeStoryFn = (val: any) => (typeof val === 'function' ? val : () => val);
// Hacky utilty for adding mdxStoryToId to the default context
export const AddContext: React.FC<DocsContextProps> = props => {
const { children, ...rest } = props;
const parentContext = React.useContext(DocsContext);
return (
<DocsContext.Provider value={{ ...parentContext, ...rest }}>{children}</DocsContext.Provider>
);
};

17
addons/docs/src/frameworks/angular/compodoc.ts
View File

@ -2,7 +2,7 @@
/* global window */
import { PropDef } from '@storybook/components';
import { Argument, CompodocJson, Component, Method, Property } from './types';
import { Argument, CompodocJson, Component, Method, Property, Directive } from './types';
type Sections = Record<string, PropDef[]>;
@ -18,7 +18,7 @@ export const setCompodocJson = (compodocJson: CompodocJson) => {
// @ts-ignore
export const getCompdocJson = (): CompodocJson => window.__STORYBOOK_COMPODOC_JSON__;
export const checkValidComponent = (component: Component) => {
export const checkValidComponentOrDirective = (component: Component | Directive) => {
if (!component.name) {
throw new Error(`Invalid component ${JSON.stringify(component)}`);
}
@ -71,15 +71,18 @@ const mapItemToSection = (key: string, item: Method | Property): string => {
}
};
const getComponentData = (component: Component) => {
const getComponentData = (component: Component | Directive) => {
if (!component) {
return null;
}
checkValidComponent(component);
checkValidComponentOrDirective(component);
const compodocJson = getCompdocJson();
checkValidCompodocJson(compodocJson);
const { name } = component;
return compodocJson.components.find((c: Component) => c.name === name);
return (
compodocJson.components.find((c: Component) => c.name === name) ||
compodocJson.directives.find((c: Directive) => c.name === name)
);
};
const displaySignature = (item: Method): string => {
@ -89,7 +92,7 @@ const displaySignature = (item: Method): string => {
return `(${args.join(', ')}) => ${item.returnType}`;
};
export const extractProps = (component: Component) => {
export const extractProps = (component: Component | Directive) => {
const componentData = getComponentData(component);
if (!componentData) {
return null;
@ -140,7 +143,7 @@ export const extractProps = (component: Component) => {
return isEmpty(sections) ? null : { sections };
};
export const extractComponentDescription = (component: Component) => {
export const extractComponentDescription = (component: Component | Directive) => {
const componentData = getComponentData(component);
if (!componentData) {
return null;

5
addons/docs/src/frameworks/angular/types.ts
View File

@ -15,7 +15,7 @@ export interface Property {
description?: string;
}
export interface Component {
export interface Directive {
name: string;
propertiesClass: Property[];
inputsClass: Property[];
@ -24,6 +24,8 @@ export interface Component {
rawdescription: string;
}
export type Component = Directive;
export interface Argument {
name: string;
type: string;
@ -35,5 +37,6 @@ export interface Decorator {
}
export interface CompodocJson {
directives: Directive[];
components: Component[];
}

0
addons/docs/src/frameworks/react/propTypes/captions.ts → addons/docs/src/frameworks/react/lib/captions.ts
View File

118
addons/docs/src/frameworks/react/lib/createDefaultValue.ts
View File

@ -1,118 +0,0 @@
import { isNil } from 'lodash';
// @ts-ignore
import { PropDefaultValue } from '@storybook/components';
import {
OBJECT_CAPTION,
FUNCTION_CAPTION,
ELEMENT_CAPTION,
ARRAY_CAPTION,
} from '../propTypes/captions';
import { generateCode } from './generateCode';
import {
InspectionFunction,
InspectionResult,
InspectionType,
InspectionElement,
InspectionIdentifiableInferedType,
inspectValue,
} from './inspection';
import { isHtmlTag } from './isHtmlTag';
import { createSummaryValue, isTooLongForDefaultValueSummary } from '../../../lib';
function getPrettyIdentifier(inferedType: InspectionIdentifiableInferedType): string {
const { type, identifier } = inferedType;
switch (type) {
case InspectionType.FUNCTION:
return (inferedType as InspectionFunction).hasArguments
? `${identifier}( ... )`
: `${identifier}()`;
case InspectionType.ELEMENT:
return `<${identifier} />`;
default:
return identifier;
}
}
function generateObject({ ast }: InspectionResult): PropDefaultValue {
let prettyCaption = generateCode(ast, true);
// Cannot get escodegen to add a space before the last } with the compact mode settings.
// This fix it until a better solution is found.
if (!prettyCaption.endsWith(' }')) {
prettyCaption = `${prettyCaption.slice(0, -1)} }`;
}
return !isTooLongForDefaultValueSummary(prettyCaption)
? createSummaryValue(prettyCaption)
: createSummaryValue(OBJECT_CAPTION, generateCode(ast));
}
function generateFunc({ inferedType, ast }: InspectionResult): PropDefaultValue {
const { identifier } = inferedType as InspectionFunction;
if (!isNil(identifier)) {
return createSummaryValue(
getPrettyIdentifier(inferedType as InspectionIdentifiableInferedType),
generateCode(ast)
);
}
const prettyCaption = generateCode(ast, true);
return !isTooLongForDefaultValueSummary(prettyCaption)
? createSummaryValue(prettyCaption)
: createSummaryValue(FUNCTION_CAPTION, generateCode(ast));
}
// All elements are JSX elements.
// JSX elements are not supported by escodegen.
function generateElement(
defaultValue: string,
inspectionResult: InspectionResult
): PropDefaultValue {
const { inferedType } = inspectionResult;
const { identifier } = inferedType as InspectionElement;
if (!isNil(identifier)) {
if (!isHtmlTag(identifier)) {
const prettyIdentifier = getPrettyIdentifier(
inferedType as InspectionIdentifiableInferedType
);
return createSummaryValue(
prettyIdentifier,
prettyIdentifier !== defaultValue ? defaultValue : undefined
);
}
}
return !isTooLongForDefaultValueSummary(defaultValue)
? createSummaryValue(defaultValue)
: createSummaryValue(ELEMENT_CAPTION, defaultValue);
}
function generateArray({ ast }: InspectionResult): PropDefaultValue {
const prettyCaption = generateCode(ast, true);
return !isTooLongForDefaultValueSummary(prettyCaption)
? createSummaryValue(prettyCaption)
: createSummaryValue(ARRAY_CAPTION, generateCode(ast));
}
export function createDefaultValue(defaultValue: string): PropDefaultValue {
const inspectionResult = inspectValue(defaultValue);
switch (inspectionResult.inferedType.type) {
case InspectionType.OBJECT:
return generateObject(inspectionResult);
case InspectionType.FUNCTION:
return generateFunc(inspectionResult);
case InspectionType.ELEMENT:
return generateElement(defaultValue, inspectionResult);
case InspectionType.ARRAY:
return generateArray(inspectionResult);
default:
return null;
}
}

85
addons/docs/src/frameworks/react/lib/defaultValues/createDefaultValue.ts Normal file
View File

@ -0,0 +1,85 @@
import { isNil } from 'lodash';
import { PropDefaultValue } from '@storybook/components';
import { FUNCTION_CAPTION, ELEMENT_CAPTION } from '../captions';
import {
InspectionFunction,
InspectionResult,
InspectionType,
InspectionElement,
InspectionIdentifiableInferedType,
inspectValue,
} from '../inspection';
import { isHtmlTag } from '../isHtmlTag';
import { createSummaryValue, isTooLongForDefaultValueSummary } from '../../../../lib';
import { generateCode } from '../generateCode';
import { generateObject } from './generateObject';
import { generateArray } from './generateArray';
import { getPrettyIdentifier } from './prettyIdentifier';
function generateFunc({ inferedType, ast }: InspectionResult): PropDefaultValue {
const { identifier } = inferedType as InspectionFunction;
if (!isNil(identifier)) {
return createSummaryValue(
getPrettyIdentifier(inferedType as InspectionIdentifiableInferedType),
generateCode(ast)
);
}
const prettyCaption = generateCode(ast, true);
return !isTooLongForDefaultValueSummary(prettyCaption)
? createSummaryValue(prettyCaption)
: createSummaryValue(FUNCTION_CAPTION, generateCode(ast));
}
// All elements are JSX elements.
// JSX elements are not supported by escodegen.
function generateElement(
defaultValue: string,
inspectionResult: InspectionResult
): PropDefaultValue {
const { inferedType } = inspectionResult;
const { identifier } = inferedType as InspectionElement;
if (!isNil(identifier)) {
if (!isHtmlTag(identifier)) {
const prettyIdentifier = getPrettyIdentifier(
inferedType as InspectionIdentifiableInferedType
);
return createSummaryValue(
prettyIdentifier,
prettyIdentifier !== defaultValue ? defaultValue : undefined
);
}
}
return !isTooLongForDefaultValueSummary(defaultValue)
? createSummaryValue(defaultValue)
: createSummaryValue(ELEMENT_CAPTION, defaultValue);
}
export function createDefaultValue(defaultValue: string): PropDefaultValue {
try {
const inspectionResult = inspectValue(defaultValue);
switch (inspectionResult.inferedType.type) {
case InspectionType.OBJECT:
return generateObject(inspectionResult);
case InspectionType.FUNCTION:
return generateFunc(inspectionResult);
case InspectionType.ELEMENT:
return generateElement(defaultValue, inspectionResult);
case InspectionType.ARRAY:
return generateArray(inspectionResult);
default:
return null;
}
} catch (e) {
// eslint-disable-next-line no-console
console.error(e);
}
return null;
}

189
addons/docs/src/frameworks/react/lib/defaultValues/createFromRawDefaultProp.ts Normal file
View File

@ -0,0 +1,189 @@
import { PropDefaultValue, PropDef } from '@storybook/components';
import { isNil, isPlainObject, isArray, isFunction, isString } from 'lodash';
// @ts-ignore
import reactElementToJSXString from 'react-element-to-jsx-string';
import { createSummaryValue, isTooLongForDefaultValueSummary } from '../../../../lib';
import { inspectValue, InspectionFunction } from '../inspection';
import { generateObject } from './generateObject';
import { generateArray } from './generateArray';
import { getPrettyElementIdentifier, getPrettyFuncIdentifier } from './prettyIdentifier';
import { OBJECT_CAPTION, FUNCTION_CAPTION, ELEMENT_CAPTION } from '../captions';
import { isHtmlTag } from '../isHtmlTag';
export type TypeResolver = (rawDefaultProp: any, propDef: PropDef) => PropDefaultValue;
export interface TypeResolvers {
string: TypeResolver;
object: TypeResolver;
function: TypeResolver;
default: TypeResolver;
}
function isReactElement(element: any): boolean {
return !isNil(element.$$typeof);
}
export function extractFunctionName(func: Function, propName: string): string {
const { name } = func;
// Comparison with the prop name is to discard inferred function names.
if (name !== '' && name !== 'anoynymous' && name !== propName) {
return name;
}
return null;
}
const stringResolver: TypeResolver = rawDefaultProp => {
return createSummaryValue(rawDefaultProp);
};
function generateReactObject(rawDefaultProp: any) {
const { type } = rawDefaultProp;
const { displayName } = type;
const jsx = reactElementToJSXString(rawDefaultProp);
if (!isNil(displayName)) {
const prettyIdentifier = getPrettyElementIdentifier(displayName);
return createSummaryValue(prettyIdentifier, prettyIdentifier !== jsx ? jsx : undefined);
}
if (isString(type)) {
// This is an HTML element.
if (isHtmlTag(type)) {
const jsxCompact = reactElementToJSXString(rawDefaultProp, { tabStop: 0 });
const jsxSummary = jsxCompact.replace(/\r?\n|\r/g, '');
if (!isTooLongForDefaultValueSummary(jsxSummary)) {
return createSummaryValue(jsxSummary);
}
}
}
return createSummaryValue(ELEMENT_CAPTION, jsx);
}
const objectResolver: TypeResolver = rawDefaultProp => {
if (isReactElement(rawDefaultProp) && !isNil(rawDefaultProp.type)) {
return generateReactObject(rawDefaultProp);
}
if (isPlainObject(rawDefaultProp)) {
const inspectionResult = inspectValue(JSON.stringify(rawDefaultProp));
return generateObject(inspectionResult);
}
if (isArray(rawDefaultProp)) {
const inspectionResult = inspectValue(JSON.stringify(rawDefaultProp));
return generateArray(inspectionResult);
}
return createSummaryValue(OBJECT_CAPTION);
};
const functionResolver: TypeResolver = (rawDefaultProp, propDef) => {
let isElement = false;
let inspectionResult;
// Try to display the name of the component. The body of the component is ommited since the code has been transpiled.
if (isFunction(rawDefaultProp.render)) {
isElement = true;
} else if (!isNil(rawDefaultProp.prototype) && isFunction(rawDefaultProp.prototype.render)) {
isElement = true;
} else {
let innerElement;
try {
inspectionResult = inspectValue(rawDefaultProp.toString());
const { hasParams, params } = inspectionResult.inferedType as InspectionFunction;
if (hasParams) {
// It might be a functional component accepting props.
if (params.length === 1 && params[0].type === 'ObjectPattern') {
innerElement = rawDefaultProp({});
}
} else {
innerElement = rawDefaultProp();
}
if (!isNil(innerElement)) {
if (isReactElement(innerElement)) {
isElement = true;
}
}
} catch (e) {
// do nothing.
}
}
const funcName = extractFunctionName(rawDefaultProp, propDef.name);
if (!isNil(funcName)) {
if (isElement) {
return createSummaryValue(getPrettyElementIdentifier(funcName));
}
if (!isNil(inspectionResult)) {
inspectionResult = inspectValue(rawDefaultProp.toString());
}
const { hasParams } = inspectionResult.inferedType as InspectionFunction;
return createSummaryValue(getPrettyFuncIdentifier(funcName, hasParams));
}
return createSummaryValue(isElement ? ELEMENT_CAPTION : FUNCTION_CAPTION);
};
const defaultResolver: TypeResolver = rawDefaultProp => {
return createSummaryValue(rawDefaultProp.toString());
};
const DEFAULT_TYPE_RESOLVERS: TypeResolvers = {
string: stringResolver,
object: objectResolver,
function: functionResolver,
default: defaultResolver,
};
export function createTypeResolvers(customResolvers: Partial<TypeResolvers> = {}): TypeResolvers {
return {
...DEFAULT_TYPE_RESOLVERS,
...customResolvers,
};
}
// When react-docgen cannot provide a defaultValue we take it from the raw defaultProp.
// It works fine for types that are not transpiled. For the types that are transpiled, we can only provide partial support.
// This means that:
// - The detail might not be available.
// - Identifiers might not be "prettified" for all the types.
export function createDefaultValueFromRawDefaultProp(
rawDefaultProp: any,
propDef: PropDef,
typeResolvers: TypeResolvers = DEFAULT_TYPE_RESOLVERS
): PropDefaultValue {
try {
// Keep the extra () otherwise it will fail for functions.
// eslint-disable-next-line prettier/prettier
switch (typeof (rawDefaultProp)) {
case 'string':
return typeResolvers.string(rawDefaultProp, propDef);
case 'object':
return typeResolvers.object(rawDefaultProp, propDef);
case 'function': {
return typeResolvers.function(rawDefaultProp, propDef);
}
default:
return typeResolvers.default(rawDefaultProp, propDef);
}
} catch (e) {
// eslint-disable-next-line no-console
console.error(e);
}
return null;
}

19
addons/docs/src/frameworks/react/lib/defaultValues/generateArray.ts Normal file
View File

@ -0,0 +1,19 @@
import { PropDefaultValue } from '@storybook/components';
import { ARRAY_CAPTION } from '../captions';
import { InspectionResult, InspectionArray } from '../inspection';
import { createSummaryValue, isTooLongForDefaultValueSummary } from '../../../../lib';
import { generateArrayCode } from '../generateCode';
export function generateArray({ inferedType, ast }: InspectionResult): PropDefaultValue {
const { depth } = inferedType as InspectionArray;
if (depth <= 2) {
const compactArray = generateArrayCode(ast, true);
if (!isTooLongForDefaultValueSummary(compactArray)) {
return createSummaryValue(compactArray);
}
}
return createSummaryValue(ARRAY_CAPTION, generateArrayCode(ast));
}

19
addons/docs/src/frameworks/react/lib/defaultValues/generateObject.ts Normal file
View File

@ -0,0 +1,19 @@
import { PropDefaultValue } from '@storybook/components';
import { OBJECT_CAPTION } from '../captions';
import { InspectionResult, InspectionArray } from '../inspection';
import { createSummaryValue, isTooLongForDefaultValueSummary } from '../../../../lib';
import { generateObjectCode } from '../generateCode';
export function generateObject({ inferedType, ast }: InspectionResult): PropDefaultValue {
const { depth } = inferedType as InspectionArray;
if (depth === 1) {
const compactObject = generateObjectCode(ast, true);
if (!isTooLongForDefaultValueSummary(compactObject)) {
return createSummaryValue(compactObject);
}
}
return createSummaryValue(OBJECT_CAPTION, generateObjectCode(ast));
}

2
addons/docs/src/frameworks/react/lib/defaultValues/index.ts Normal file
View File

@ -0,0 +1,2 @@
export * from './createDefaultValue';
export * from './createFromRawDefaultProp';

26
addons/docs/src/frameworks/react/lib/defaultValues/prettyIdentifier.ts Normal file
View File

@ -0,0 +1,26 @@
import {
InspectionIdentifiableInferedType,
InspectionFunction,
InspectionType,
} from '../inspection';
export function getPrettyIdentifier(inferedType: InspectionIdentifiableInferedType): string {
const { type, identifier } = inferedType;
switch (type) {
case InspectionType.FUNCTION:
return getPrettyFuncIdentifier(identifier, (inferedType as InspectionFunction).hasParams);
case InspectionType.ELEMENT:
return getPrettyElementIdentifier(identifier);
default:
return identifier;
}
}
export function getPrettyFuncIdentifier(identifier: string, hasArguments: boolean): string {
return hasArguments ? `${identifier}( ... )` : `${identifier}()`;
}
export function getPrettyElementIdentifier(identifier: string) {
return `<${identifier} />`;
}

45
addons/docs/src/frameworks/react/lib/generateCode.ts
View File

@ -1,4 +1,5 @@
import { generate } from 'escodegen';
import dedent from 'ts-dedent';
const BASIC_OPTIONS = {
format: {
@ -23,3 +24,47 @@ const PRETTY_OPTIONS = {
export function generateCode(ast: any, compact = false): string {
return generate(ast, compact ? COMPACT_OPTIONS : PRETTY_OPTIONS);
}
export function generateObjectCode(ast: any, compact = false): string {
return !compact ? generateCode(ast) : generateCompactObjectCode(ast);
}
function generateCompactObjectCode(ast: any): string {
let result = generateCode(ast, true);
// Cannot get escodegen to add a space before the last } with the compact mode settings.
// Fix it until a better solution is found.
if (!result.endsWith(' }')) {
result = `${result.slice(0, -1)} }`;
}
return result;
}
export function generateArrayCode(ast: any, compact = false): string {
return !compact ? generateMultilineArrayCode(ast) : generateCompactArrayCode(ast);
}
function generateMultilineArrayCode(ast: any): string {
let result = generateCode(ast);
// escodegen add extra spacing before the closing bracket of a multile line array with a nested object.
// Fix it until a better solution is found.
if (result.endsWith(' }]')) {
result = dedent(result);
}
return result;
}
function generateCompactArrayCode(ast: any): string {
let result = generateCode(ast, true);
// escodegen add extra an extra before the opening bracket of a compact array that contains primitive values.
// Fix it until a better solution is found.
if (result.startsWith('[ ')) {
result = result.replace('[ ', '[');
}
return result;
}

3
addons/docs/src/frameworks/react/lib/index.ts Normal file
View File

@ -0,0 +1,3 @@
export * from './captions';
export * from './isHtmlTag';
export * from './generateCode';

65
addons/docs/src/frameworks/react/lib/inspection/acornParser.test.ts
View File

@ -67,14 +67,34 @@ describe('parse', () => {
const inferedType = result.inferedType as InspectionObject;
expect(inferedType.type).toBe(InspectionType.OBJECT);
expect(inferedType.depth).toBe(1);
expect(result.ast).toBeDefined();
});
it('support deep PropTypes.shape', () => {
const result = parse('PropTypes.shape({ foo: PropTypes.shape({ bar: PropTypes.string }) })');
const inferedType = result.inferedType as InspectionObject;
expect(inferedType.type).toBe(InspectionType.OBJECT);
expect(inferedType.depth).toBe(2);
expect(result.ast).toBeDefined();
});
it('support shape', () => {
const result = parse('shape({ foo: PropTypes.string })');
const result = parse('shape({ foo: string })');
const inferedType = result.inferedType as InspectionObject;
expect(inferedType.type).toBe(InspectionType.OBJECT);
expect(inferedType.depth).toBe(1);
expect(result.ast).toBeDefined();
});
it('support deep shape', () => {
const result = parse('shape({ foo: shape({ bar: string }) })');
const inferedType = result.inferedType as InspectionObject;
expect(inferedType.type).toBe(InspectionType.OBJECT);
expect(inferedType.depth).toBe(2);
expect(result.ast).toBeDefined();
});
@ -83,6 +103,7 @@ describe('parse', () => {
const inferedType = result.inferedType as InspectionObject;
expect(inferedType.type).toBe(InspectionType.OBJECT);
expect(inferedType.depth).toBe(1);
expect(result.ast).toBeDefined();
});
@ -95,6 +116,25 @@ describe('parse', () => {
const inferedType = result.inferedType as InspectionObject;
expect(inferedType.type).toBe(InspectionType.OBJECT);
expect(inferedType.depth).toBe(1);
expect(result.ast).toBeDefined();
});
it('support deep object literal', () => {
const result = parse(`
{
foo: {
hey: PropTypes.string
},
bar: PropTypes.string,
hey: {
ho: PropTypes.string
}
}`);
const inferedType = result.inferedType as InspectionObject;
expect(inferedType.type).toBe(InspectionType.OBJECT);
expect(inferedType.depth).toBe(2);
expect(result.ast).toBeDefined();
});
@ -103,6 +143,7 @@ describe('parse', () => {
const inferedType = result.inferedType as InspectionObject;
expect(inferedType.type).toBe(InspectionType.OBJECT);
expect(inferedType.depth).toBe(1);
expect(result.ast).toBeDefined();
});
@ -111,6 +152,16 @@ describe('parse', () => {
const inferedType = result.inferedType as InspectionArray;
expect(inferedType.type).toBe(InspectionType.ARRAY);
expect(inferedType.depth).toBe(1);
expect(result.ast).toBeDefined();
});
it('support deep array', () => {
const result = parse("['bottom-left', { foo: string }, [['hey', 'ho']]]");
const inferedType = result.inferedType as InspectionArray;
expect(inferedType.type).toBe(InspectionType.ARRAY);
expect(inferedType.depth).toBe(3);
expect(result.ast).toBeDefined();
});
@ -129,7 +180,8 @@ describe('parse', () => {
expect(inferedType.type).toBe(InspectionType.FUNCTION);
expect(inferedType.identifier).toBeUndefined();
expect(inferedType.hasArguments).toBeFalsy();
expect(inferedType.hasParams).toBeFalsy();
expect(inferedType.params.length).toBe(0);
expect(result.ast).toBeDefined();
});
@ -139,7 +191,8 @@ describe('parse', () => {
expect(inferedType.type).toBe(InspectionType.FUNCTION);
expect(inferedType.identifier).toBeUndefined();
expect(inferedType.hasArguments).toBeTruthy();
expect(inferedType.hasParams).toBeTruthy();
expect(inferedType.params.length).toBe(2);
expect(result.ast).toBeDefined();
});
@ -149,7 +202,8 @@ describe('parse', () => {
expect(inferedType.type).toBe(InspectionType.FUNCTION);
expect(inferedType.identifier).toBe('concat');
expect(inferedType.hasArguments).toBeFalsy();
expect(inferedType.hasParams).toBeFalsy();
expect(inferedType.params.length).toBe(0);
expect(result.ast).toBeDefined();
});
@ -159,7 +213,8 @@ describe('parse', () => {
expect(inferedType.type).toBe(InspectionType.FUNCTION);
expect(inferedType.identifier).toBe('concat');
expect(inferedType.hasArguments).toBeTruthy();
expect(inferedType.hasParams).toBeTruthy();
expect(inferedType.params.length).toBe(2);
expect(result.ast).toBeDefined();
});

35
addons/docs/src/frameworks/react/lib/inspection/acornParser.ts
View File

@ -35,6 +35,29 @@ function extractIdentifierName(identifierNode: any) {
return !isNil(identifierNode) ? identifierNode.name : null;
}
function filterAncestors(ancestors: estree.Node[]): estree.Node[] {
return ancestors.filter(x => x.type === 'ObjectExpression' || x.type === 'ArrayExpression');
}
function calculateNodeDepth(node: estree.Expression): number {
const depths: number[] = [];
acornWalk.ancestor(
node,
{
ObjectExpression(_: any, ancestors: estree.Node[]) {
depths.push(filterAncestors(ancestors).length);
},
ArrayExpression(_: any, ancestors: estree.Node[]) {
depths.push(filterAncestors(ancestors).length);
},
},
ACORN_WALK_VISITORS
);
return Math.max(...depths);
}
function parseIdentifier(identifierNode: estree.Identifier): ParsingResult<InspectionIdentifier> {
return {
inferedType: {
@ -72,7 +95,8 @@ function parseFunction(
const inferedType: InspectionFunction | InspectionElement = {
type: isJsx ? InspectionType.ELEMENT : InspectionType.FUNCTION,
hasArguments: funcNode.params.length !== 0,
params: funcNode.params,
hasParams: funcNode.params.length !== 0,
};
const identifierName = extractIdentifierName((funcNode as estree.FunctionExpression).id);
@ -135,10 +159,7 @@ function parseCall(callNode: estree.CallExpression): ParsingResult<InspectionObj
const identifierName = extractIdentifierName(identifierNode);
if (identifierName === 'shape') {
return {
inferedType: { type: InspectionType.OBJECT },
ast: callNode.arguments[0],
};
return parseObject(callNode.arguments[0] as estree.ObjectExpression);
}
return null;
@ -146,14 +167,14 @@ function parseCall(callNode: estree.CallExpression): ParsingResult<InspectionObj
function parseObject(objectNode: estree.ObjectExpression): ParsingResult<InspectionObject> {
return {
inferedType: { type: InspectionType.OBJECT },
inferedType: { type: InspectionType.OBJECT, depth: calculateNodeDepth(objectNode) },
ast: objectNode,
};
}
function parseArray(arrayNode: estree.ArrayExpression): ParsingResult<InspectionArray> {
return {
inferedType: { type: InspectionType.ARRAY },
inferedType: { type: InspectionType.ARRAY, depth: calculateNodeDepth(arrayNode) },
ast: arrayNode,
};
}

5
addons/docs/src/frameworks/react/lib/inspection/types.ts
View File

@ -24,10 +24,12 @@ export interface InspectionLiteral extends InspectionInferedType {
export interface InspectionObject extends InspectionInferedType {
type: InspectionType.OBJECT;
depth: number;
}
export interface InspectionArray extends InspectionInferedType {
type: InspectionType.ARRAY;
depth: number;
}
export interface InspectionClass extends InspectionInferedType {
@ -38,7 +40,8 @@ export interface InspectionClass extends InspectionInferedType {
export interface InspectionFunction extends InspectionInferedType {
type: InspectionType.FUNCTION;
identifier?: string;
hasArguments: boolean;
params: any[];
hasParams: boolean;
}
export interface InspectionElement extends InspectionInferedType {

347
addons/docs/src/frameworks/react/propTypes/createType.ts
View File

@ -1,9 +1,8 @@
import { isNil } from 'lodash';
import { PropSummaryValue, PropType } from '@storybook/components';
import { PropType } from '@storybook/components';
import { createSummaryValue, isTooLongForTypeSummary } from '../../../lib';
import { ExtractedProp, DocgenPropType } from '../../../lib/docgen';
import { generateCode } from '../lib/generateCode';
import { generateFuncSignature } from './generateFuncSignature';
import { generateFuncSignature, generateShortFuncSignature } from './generateFuncSignature';
import {
OBJECT_CAPTION,
ARRAY_CAPTION,
@ -11,9 +10,17 @@ import {
FUNCTION_CAPTION,
ELEMENT_CAPTION,
CUSTOM_CAPTION,
} from './captions';
import { InspectionType, inspectValue } from '../lib/inspection';
import { isHtmlTag } from '../lib/isHtmlTag';
isHtmlTag,
generateObjectCode,
generateCode,
} from '../lib';
import {
InspectionType,
inspectValue,
InspectionElement,
InspectionObject,
InspectionArray,
} from '../lib/inspection';
enum PropTypesType {
CUSTOM = 'custom',
@ -38,27 +45,30 @@ interface EnumValue {
interface TypeDef {
name: string;
value: PropSummaryValue;
short: string;
compact: string;
full: string;
inferedType?: InspectionType;
}
function createTypeDef({
name,
summary,
detail,
short,
compact,
full,
inferedType,
}: {
name: string;
summary: string;
detail?: string;
short: string;
compact: string;
full?: string;
inferedType?: InspectionType;
}): TypeDef {
return {
name,
value: {
summary,
detail: !isNil(detail) ? detail : summary,
},
short,
compact,
full: !isNil(full) ? full : short,
inferedType,
};
}
@ -67,11 +77,19 @@ function cleanPropTypes(value: string): string {
return value.replace(/PropTypes./g, '').replace(/.isRequired/g, '');
}
function splitIntoLines(value: string): string[] {
return value.split(/\r?\n/);
}
function prettyObject(ast: any, compact = false): string {
return cleanPropTypes(generateObjectCode(ast, compact));
}
function prettyArray(ast: any, compact = false): string {
return cleanPropTypes(generateCode(ast, compact));
}
function getCaptionFromInspectionType(type: InspectionType): string {
function getCaptionForInspectionType(type: InspectionType): string {
switch (type) {
case InspectionType.OBJECT:
return OBJECT_CAPTION;
@ -88,59 +106,70 @@ function getCaptionFromInspectionType(type: InspectionType): string {
}
}
function generateValuesForObjectAst(ast: any): [string, string] {
let summary = prettyObject(ast, true);
let detail;
function generateTypeFromString(value: string, originalTypeName: string): TypeDef {
const { inferedType, ast } = inspectValue(value);
const { type } = inferedType;
if (!isTooLongForTypeSummary(summary)) {
detail = summary;
} else {
summary = OBJECT_CAPTION;
detail = prettyObject(ast);
let short;
let compact;
let full;
switch (type) {
case InspectionType.IDENTIFIER:
case InspectionType.LITERAL:
short = value;
compact = value;
break;
case InspectionType.OBJECT: {
const { depth } = inferedType as InspectionObject;
short = OBJECT_CAPTION;
compact = depth === 1 ? prettyObject(ast, true) : null;
full = prettyObject(ast);
break;
}
case InspectionType.ELEMENT: {
const { identifier } = inferedType as InspectionElement;
short = !isNil(identifier) && !isHtmlTag(identifier) ? identifier : ELEMENT_CAPTION;
compact = splitIntoLines(value).length === 1 ? value : null;
full = value;
break;
}
case InspectionType.ARRAY: {
const { depth } = inferedType as InspectionArray;
short = ARRAY_CAPTION;
compact = depth <= 2 ? prettyArray(ast, true) : null;
full = prettyArray(ast);
break;
}
default:
short = getCaptionForInspectionType(type);
compact = value;
full = value;
break;
}
return [summary, detail];
return createTypeDef({
name: originalTypeName,
short,
compact,
full,
inferedType: type,
});
}
function generateCustom({ raw }: DocgenPropType): TypeDef {
if (!isNil(raw)) {
const { inferedType, ast } = inspectValue(raw);
const { type, identifier } = inferedType as any;
let summary;
let detail;
switch (type) {
case InspectionType.IDENTIFIER:
case InspectionType.LITERAL:
summary = raw;
break;
case InspectionType.OBJECT: {
const [objectCaption, objectValue] = generateValuesForObjectAst(ast);
summary = objectCaption;
detail = objectValue;
break;
}
case InspectionType.ELEMENT:
summary = !isNil(identifier) && !isHtmlTag(identifier) ? identifier : ELEMENT_CAPTION;
detail = raw;
break;
default:
summary = getCaptionFromInspectionType(type);
detail = raw;
break;
}
return createTypeDef({
name: PropTypesType.CUSTOM,
summary,
detail,
inferedType: type,
});
return generateTypeFromString(raw, PropTypesType.CUSTOM);
}
return createTypeDef({ name: PropTypesType.CUSTOM, summary: CUSTOM_CAPTION });
return createTypeDef({
name: PropTypesType.CUSTOM,
short: CUSTOM_CAPTION,
compact: CUSTOM_CAPTION,
});
}
function generateFunc(extractedProp: ExtractedProp): TypeDef {
@ -150,47 +179,48 @@ function generateFunc(extractedProp: ExtractedProp): TypeDef {
if (!isNil(jsDocTags.params) || !isNil(jsDocTags.returns)) {
return createTypeDef({
name: PropTypesType.FUNC,
summary: FUNCTION_CAPTION,
detail: generateFuncSignature(jsDocTags.params, jsDocTags.returns),
short: generateShortFuncSignature(jsDocTags.params, jsDocTags.returns),
compact: null,
full: generateFuncSignature(jsDocTags.params, jsDocTags.returns),
});
}
}
return createTypeDef({ name: PropTypesType.FUNC, summary: FUNCTION_CAPTION });
return createTypeDef({
name: PropTypesType.FUNC,
short: FUNCTION_CAPTION,
compact: FUNCTION_CAPTION,
});
}
function generateShape(type: DocgenPropType, extractedProp: ExtractedProp): TypeDef {
const fields = Object.keys(type.value)
.map((key: string) => `${key}: ${generateType(type.value[key], extractedProp).value.detail}`)
.map((key: string) => `${key}: ${generateType(type.value[key], extractedProp).full}`)
.join(', ');
const { ast } = inspectValue(`{ ${fields} }`);
const [summary, detail] = generateValuesForObjectAst(ast);
const { inferedType, ast } = inspectValue(`{ ${fields} }`);
const { depth } = inferedType as InspectionObject;
return createTypeDef({
name: PropTypesType.SHAPE,
summary,
detail,
short: OBJECT_CAPTION,
compact: depth === 1 ? prettyObject(ast, true) : null,
full: prettyObject(ast),
});
}
function objectOf(of: string): string {
return `objectOf(${of})`;
}
function generateObjectOf(type: DocgenPropType, extractedProp: ExtractedProp): TypeDef {
const format = (of: string) => `objectOf(${of})`;
const { name, value } = generateType(type.value, extractedProp);
// eslint-disable-next-line prefer-const
let { summary, detail } = value;
if (name === PropTypesType.SHAPE) {
if (!isTooLongForTypeSummary(detail)) {
summary = detail;
}
}
const { short, compact, full } = generateType(type.value, extractedProp);
return createTypeDef({
name: PropTypesType.OBJECTOF,
summary: format(summary),
detail: format(detail),
short: objectOf(short),
compact: !isNil(compact) ? objectOf(compact) : null,
full: objectOf(full),
});
}
@ -198,76 +228,58 @@ function generateUnion(type: DocgenPropType, extractedProp: ExtractedProp): Type
if (Array.isArray(type.value)) {
const values = type.value.reduce(
(acc: any, v: any) => {
const { summary, detail } = generateType(v, extractedProp).value;
const { short, compact, full } = generateType(v, extractedProp);
acc.summary.push(summary);
acc.detail.push(detail);
acc.short.push(short);
acc.compact.push(compact);
acc.full.push(full);
return acc;
},
{ summary: [], detail: [] }
{ short: [], compact: [], full: [] }
);
return createTypeDef({
name: PropTypesType.UNION,
summary: values.summary.join(' | '),
detail: values.detail.join(' | '),
short: values.short.join(' | '),
compact: values.compact.every((x: string) => !isNil(x)) ? values.compact.join(' | ') : null,
full: values.full.join(' | '),
});
}
return createTypeDef({ name: PropTypesType.UNION, summary: type.value });
return createTypeDef({ name: PropTypesType.UNION, short: type.value, compact: null });
}
function generateEnumValue({ value, computed }: EnumValue): TypeDef {
if (computed) {
const { inferedType, ast } = inspectValue(value) as any;
const { type } = inferedType;
let caption = getCaptionFromInspectionType(type);
if (
type === InspectionType.FUNCTION ||
type === InspectionType.CLASS ||
type === InspectionType.ELEMENT
) {
if (!isNil(inferedType.identifier)) {
caption = inferedType.identifier;
}
}
return createTypeDef({
name: 'enumvalue',
summary: caption,
detail: type === InspectionType.OBJECT ? prettyObject(ast) : value,
inferedType: type,
});
}
return createTypeDef({ name: 'enumvalue', summary: value });
return computed
? generateTypeFromString(value, 'enumvalue')
: createTypeDef({ name: 'enumvalue', short: value, compact: value });
}
function generateEnum(type: DocgenPropType): TypeDef {
if (Array.isArray(type.value)) {
const values = type.value.reduce(
(acc: any, v: EnumValue) => {
const { summary, detail } = generateEnumValue(v).value;
const { short, compact, full } = generateEnumValue(v);
acc.summary.push(summary);
acc.detail.push(detail);
acc.short.push(short);
acc.compact.push(compact);
acc.full.push(full);
return acc;
},
{ summary: [], detail: [] }
{ short: [], compact: [], full: [] }
);
return createTypeDef({
name: PropTypesType.ENUM,
summary: values.summary.join(' | '),
detail: values.detail.join(' | '),
short: values.short.join(' | '),
compact: values.compact.every((x: string) => !isNil(x)) ? values.compact.join(' | ') : null,
full: values.full.join(' | '),
});
}
return createTypeDef({ name: PropTypesType.ENUM, summary: type.value });
return createTypeDef({ name: PropTypesType.ENUM, short: type.value, compact: type.value });
}
function braceAfter(of: string): string {
@ -278,27 +290,31 @@ function braceAround(of: string): string {
return `[${of}]`;
}
function createArrayOfObjectTypeDef(summary: string, detail: string): TypeDef {
function createArrayOfObjectTypeDef(short: string, compact: string, full: string): TypeDef {
return createTypeDef({
name: PropTypesType.ARRAYOF,
summary: summary === OBJECT_CAPTION ? braceAfter(summary) : braceAround(summary),
detail: braceAround(detail),
short: braceAfter(short),
compact: !isNil(compact) ? braceAround(compact) : null,
full: braceAround(full),
});
}
function generateArray(type: DocgenPropType, extractedProp: ExtractedProp): TypeDef {
const { name, value, inferedType } = generateType(type.value, extractedProp);
const { summary, detail } = value;
const { name, short, compact, full, inferedType } = generateType(type.value, extractedProp);
if (name === PropTypesType.CUSTOM) {
if (inferedType === InspectionType.OBJECT) {
return createArrayOfObjectTypeDef(summary, detail);
return createArrayOfObjectTypeDef(short, compact, full);
}
} else if (name === PropTypesType.SHAPE) {
return createArrayOfObjectTypeDef(summary, detail);
return createArrayOfObjectTypeDef(short, compact, full);
}
return createTypeDef({ name: PropTypesType.ARRAYOF, summary: braceAfter(detail) });
return createTypeDef({
name: PropTypesType.ARRAYOF,
short: braceAfter(short),
compact: braceAfter(short),
});
}
function generateType(type: DocgenPropType, extractedProp: ExtractedProp): TypeDef {
@ -311,7 +327,11 @@ function generateType(type: DocgenPropType, extractedProp: ExtractedProp): TypeD
case PropTypesType.SHAPE:
return generateShape(type, extractedProp);
case PropTypesType.INSTANCEOF:
return createTypeDef({ name: PropTypesType.INSTANCEOF, summary: type.value });
return createTypeDef({
name: PropTypesType.INSTANCEOF,
short: type.value,
compact: type.value,
});
case PropTypesType.OBJECTOF:
return generateObjectOf(type, extractedProp);
case PropTypesType.UNION:
@ -321,37 +341,64 @@ function generateType(type: DocgenPropType, extractedProp: ExtractedProp): TypeD
case PropTypesType.ARRAYOF:
return generateArray(type, extractedProp);
default:
return createTypeDef({ name: type.name, summary: type.name });
return createTypeDef({ name: type.name, short: type.name, compact: type.name });
}
} catch (e) {
// eslint-disable-next-line no-console
console.error(e);
}
return createTypeDef({ name: 'unknown', summary: 'unknown' });
return createTypeDef({ name: 'unknown', short: 'unknown', compact: 'unknown' });
}
export function createType(extractedProp: ExtractedProp): PropType {
const { type } = extractedProp.docgenInfo;
switch (type.name) {
case PropTypesType.CUSTOM:
case PropTypesType.SHAPE:
case PropTypesType.INSTANCEOF:
case PropTypesType.OBJECTOF:
case PropTypesType.UNION:
case PropTypesType.ENUM:
case PropTypesType.ARRAYOF: {
const { summary, detail } = generateType(type, extractedProp).value;
return createSummaryValue(summary, summary !== detail ? detail : undefined);
}
case PropTypesType.FUNC: {
const { detail } = generateType(type, extractedProp).value;
return createSummaryValue(detail);
}
default:
return null;
// A type could be null if a defaultProp has been provided without a type definition.
if (isNil(type)) {
return null;
}
try {
switch (type.name) {
case PropTypesType.CUSTOM:
case PropTypesType.SHAPE:
case PropTypesType.INSTANCEOF:
case PropTypesType.OBJECTOF:
case PropTypesType.UNION:
case PropTypesType.ENUM:
case PropTypesType.ARRAYOF: {
const { short, compact, full } = generateType(type, extractedProp);
if (!isNil(compact)) {
if (!isTooLongForTypeSummary(compact)) {
return createSummaryValue(compact);
}
}
return createSummaryValue(short, short !== full ? full : undefined);
}
case PropTypesType.FUNC: {
const { short, compact, full } = generateType(type, extractedProp);
let summary = short;
const detail = full;
if (!isTooLongForTypeSummary(full)) {
summary = full;
} else if (!isNil(compact)) {
summary = compact;
}
return createSummaryValue(summary, summary !== detail ? detail : undefined);
}
default:
return null;
}
} catch (e) {
// eslint-disable-next-line no-console
console.error(e);
}
return null;
}

329
addons/docs/src/frameworks/react/propTypes/generateFuncSignature.test.ts
View File

@ -1,156 +1,187 @@
import { generateFuncSignature } from './generateFuncSignature';
import { generateFuncSignature, generateShortFuncSignature } from './generateFuncSignature';
import { parseJsDoc } from '../../../lib/jsdocParser';
it('should return an empty string with there is no @params and @returns tags', () => {
const result = generateFuncSignature(null, null);
describe('generateFuncSignature', () => {
it('should return an empty string when there is no @params and @returns tags', () => {
const result = generateFuncSignature(null, null);
expect(result).toBe('');
expect(result).toBe('');
});
it('should return a signature with a single arg when there is a @param tag with a name', () => {
const { params, returns } = parseJsDoc('@param event').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event)');
});
it('should return a signature with a single arg when there is a @param tag with a name and a type', () => {
const { params, returns } = parseJsDoc('@param {SyntheticEvent} event').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: SyntheticEvent)');
});
it('should return a signature with a single arg when there is a @param tag with a name, a type and a desc', () => {
const { params, returns } = parseJsDoc(
'@param {SyntheticEvent} event - React event'
).extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: SyntheticEvent)');
});
it('should support @param of record type', () => {
const { params, returns } = parseJsDoc('@param {{a: number}} event').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: ({a: number}))');
});
it('should support @param of union type', () => {
const { params, returns } = parseJsDoc('@param {(number|boolean)} event').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: (number|boolean))');
});
it('should support @param of array type', () => {
const { params, returns } = parseJsDoc('@param {number[]} event').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: number[])');
});
it('should support @param with a nullable type', () => {
const { params, returns } = parseJsDoc('@param {?number} event').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: number)');
});
it('should support @param with a non nullable type', () => {
const { params, returns } = parseJsDoc('@param {!number} event').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: number)');
});
it('should support optional @param with []', () => {
const { params, returns } = parseJsDoc('@param {number} [event]').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: number)');
});
it('should support optional @param with =', () => {
const { params, returns } = parseJsDoc('@param {number=} event').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: number)');
});
it('should support @param of type any', () => {
const { params, returns } = parseJsDoc('@param {*} event').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: any)');
});
it('should support multiple @param tags', () => {
const { params, returns } = parseJsDoc(
'@param {SyntheticEvent} event\n@param {string} customData'
).extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: SyntheticEvent, customData: string)');
});
it('should return a signature with a return type when there is a @returns with a type', () => {
const { params, returns } = parseJsDoc('@returns {string}').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('() => string');
});
it('should support @returns of record type', () => {
const { params, returns } = parseJsDoc('@returns {{a: number, b: string}}').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('() => ({a: number, b: string})');
});
it('should support @returns of array type', () => {
const { params, returns } = parseJsDoc('@returns {integer[]}').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('() => integer[]');
});
it('should support @returns of union type', () => {
const { params, returns } = parseJsDoc('@returns {(number|boolean)}').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('() => (number|boolean)');
});
it('should support @returns type any', () => {
const { params, returns } = parseJsDoc('@returns {*}').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('() => any');
});
it('should support @returns of type void', () => {
const { params, returns } = parseJsDoc('@returns {void}').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('() => void');
});
it('should return a full signature when there is a single @param tag and a @returns', () => {
const { params, returns } = parseJsDoc(
'@param {SyntheticEvent} event - React event.\n@returns {string}'
).extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: SyntheticEvent) => string');
});
it('should return a full signature when there is a multiple @param tags and a @returns', () => {
const { params, returns } = parseJsDoc(
'@param {SyntheticEvent} event - React event.\n@param {string} data\n@returns {string}'
).extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: SyntheticEvent, data: string) => string');
});
});
it('should return a signature with a single arg when there is a @param tag with a name', () => {
const { params, returns } = parseJsDoc('@param event').extractedTags;
const result = generateFuncSignature(params, returns);
describe('generateShortFuncSignature', () => {
it('should return an empty string when there is no @params and @returns tags', () => {
const result = generateShortFuncSignature(null, null);
expect(result).toBe('(event)');
});
it('should return a signature with a single arg when there is a @param tag with a name and a type', () => {
const { params, returns } = parseJsDoc('@param {SyntheticEvent} event').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: SyntheticEvent)');
});
it('should return a signature with a single arg when there is a @param tag with a name, a type and a desc', () => {
const { params, returns } = parseJsDoc(
'@param {SyntheticEvent} event - React event'
).extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: SyntheticEvent)');
});
it('should support @param of record type', () => {
const { params, returns } = parseJsDoc('@param {{a: number}} event').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: ({a: number}))');
});
it('should support @param of union type', () => {
const { params, returns } = parseJsDoc('@param {(number|boolean)} event').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: (number|boolean))');
});
it('should support @param of array type', () => {
const { params, returns } = parseJsDoc('@param {number[]} event').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: number[])');
});
it('should support @param with a nullable type', () => {
const { params, returns } = parseJsDoc('@param {?number} event').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: number)');
});
it('should support @param with a non nullable type', () => {
const { params, returns } = parseJsDoc('@param {!number} event').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: number)');
});
it('should support optional @param with []', () => {
const { params, returns } = parseJsDoc('@param {number} [event]').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: number)');
});
it('should support optional @param with =', () => {
const { params, returns } = parseJsDoc('@param {number=} event').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: number)');
});
it('should support @param of type any', () => {
const { params, returns } = parseJsDoc('@param {*} event').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: any)');
});
it('should support multiple @param tags', () => {
const { params, returns } = parseJsDoc(
'@param {SyntheticEvent} event\n@param {string} customData'
).extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: SyntheticEvent, customData: string)');
});
it('should return a signature with a return type when there is a @returns with a type', () => {
const { params, returns } = parseJsDoc('@returns {string}').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('() => string');
});
it('should support @returns of record type', () => {
const { params, returns } = parseJsDoc('@returns {{a: number, b: string}}').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('() => ({a: number, b: string})');
});
it('should support @returns of array type', () => {
const { params, returns } = parseJsDoc('@returns {integer[]}').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('() => integer[]');
});
it('should support @returns of union type', () => {
const { params, returns } = parseJsDoc('@returns {(number|boolean)}').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('() => (number|boolean)');
});
it('should support @returns type any', () => {
const { params, returns } = parseJsDoc('@returns {*}').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('() => any');
});
it('should support @returns of type void', () => {
const { params, returns } = parseJsDoc('@returns {void}').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('() => void');
});
it('should return a full signature when there is a single @param tag and a @returns', () => {
const { params, returns } = parseJsDoc(
'@param {SyntheticEvent} event - React event.\n@returns {string}'
).extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: SyntheticEvent) => string');
});
it('should return a full signature when there is a multiple @param tags and a @returns', () => {
const { params, returns } = parseJsDoc(
'@param {SyntheticEvent} event - React event.\n@param {string} data\n@returns {string}'
).extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: SyntheticEvent, data: string) => string');
expect(result).toBe('');
});
it('should return ( ... ) when there is @params', () => {
const { params, returns } = parseJsDoc('@param event').extractedTags;
const result = generateShortFuncSignature(params, returns);
expect(result).toBe('( ... )');
});
it('should return ( ... ) => returnsType when there is @params and a @returns', () => {
const { params, returns } = parseJsDoc('@param event\n@returns {string}').extractedTags;
const result = generateShortFuncSignature(params, returns);
expect(result).toBe('( ... ) => string');
});
it('should return () => returnsType when there is only a @returns', () => {
const { params, returns } = parseJsDoc('@returns {string}').extractedTags;
const result = generateShortFuncSignature(params, returns);
expect(result).toBe('() => string');
});
});

26
addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts
View File

@ -37,3 +37,29 @@ export function generateFuncSignature(
return funcParts.join(' ');
}
export function generateShortFuncSignature(
params: ExtractedJsDocParam[],
returns: ExtractedJsDocReturns
): string {
const hasParams = !isNil(params);
const hasReturns = !isNil(returns);
if (!hasParams && !hasReturns) {
return '';
}
const funcParts = [];
if (hasParams) {
funcParts.push('( ... )');
} else {
funcParts.push('()');
}
if (hasReturns) {
funcParts.push(`=> ${returns.getTypeName()}`);
}
return funcParts.join(' ');
}

577
addons/docs/src/frameworks/react/propTypes/handleProp.test.ts → addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx
View File

@ -2,12 +2,17 @@
import { PropDef } from '@storybook/components';
import PropTypes from 'prop-types';
import React from 'react';
import { Component } from '../../../blocks/shared';
import { extractComponentProps, DocgenInfo } from '../../../lib/docgen';
import { extractComponentProps, DocgenInfo, DocgenPropDefaultValue } from '../../../lib/docgen';
import { enhancePropTypesProp, enhancePropTypesProps } from './handleProp';
const DOCGEN_SECTION = 'props';
function ReactComponent() {
return <div>React Component!</div>;
}
function createDocgenSection(docgenInfo: DocgenInfo): Record<string, any> {
return {
[DOCGEN_SECTION]: {
@ -32,7 +37,9 @@ function createDocgenProp({
// eslint-disable-next-line react/forbid-foreign-prop-types
function createComponent({ propTypes = {}, defaultProps = {}, docgenInfo = {} }): Component {
const component = () => {};
const component = () => {
return <div>Hey!</div>;
};
component.propTypes = propTypes;
component.defaultProps = defaultProps;
@ -42,8 +49,12 @@ function createComponent({ propTypes = {}, defaultProps = {}, docgenInfo = {} })
return component;
}
function extractPropDef(component: Component): PropDef {
return enhancePropTypesProp(extractComponentProps(component, DOCGEN_SECTION)[0]);
function createDefaultValue(defaultValue: string): DocgenPropDefaultValue {
return { value: defaultValue };
}
function extractPropDef(component: Component, rawDefaultProp?: any): PropDef {
return enhancePropTypesProp(extractComponentProps(component, DOCGEN_SECTION)[0], rawDefaultProp);
}
describe('enhancePropTypesProp', () => {
@ -93,7 +104,7 @@ describe('enhancePropTypesProp', () => {
type: {
name: 'custom',
raw:
'{\n text: PropTypes.string.isRequired,\n value: PropTypes.string.isRequired,\n}',
'{\n text: PropTypes.string.isRequired,\n value1: PropTypes.string.isRequired,\n value2: PropTypes.string.isRequired,\n value3: PropTypes.string.isRequired,\n value4: PropTypes.string.isRequired,\n}',
},
});
@ -103,12 +114,28 @@ describe('enhancePropTypesProp', () => {
const expectedDetail = `{
text: string,
value: string
value1: string,
value2: string,
value3: string,
value4: string
}`;
expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should not have a deep object as summary', () => {
const component = createTestComponent({
type: {
name: 'custom',
raw: '{\n foo: { bar: PropTypes.string.isRequired,\n }}',
},
});
const { type } = extractPropDef(component);
expect(type.summary).toBe('object');
});
it('should use identifier of a React element when available', () => {
const component = createTestComponent({
type: {
@ -133,7 +160,8 @@ describe('enhancePropTypesProp', () => {
const component = createTestComponent({
type: {
name: 'custom',
raw: '<div>Hello world!</div>',
raw:
'<div>Hello world from Montreal, Quebec, Canada!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>',
},
});
@ -141,7 +169,8 @@ describe('enhancePropTypesProp', () => {
expect(type.summary).toBe('element');
const expectedDetail = '<div>Hello world!</div>';
const expectedDetail =
'<div>Hello world from Montreal, Quebec, Canada!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>';
expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
@ -150,7 +179,7 @@ describe('enhancePropTypesProp', () => {
const component = createTestComponent({
type: {
name: 'custom',
raw: '() => {\n return <div>Inlined FunctionnalComponent!</div>;\n}',
raw: '() => {\n return <div>Inlined FunctionalComponent!</div>;\n}',
},
});
@ -159,23 +188,43 @@ describe('enhancePropTypesProp', () => {
expect(type.summary).toBe('element');
const expectedDetail = `() => {
return <div>Inlined FunctionnalComponent!</div>;
return <div>Inlined FunctionalComponent!</div>;
}`;
expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should return "custom" when it is not a known type', () => {
const component = createTestComponent({
type: {
name: 'custom',
raw: 'Symbol("Hey!")',
},
describe('when it is not a known type', () => {
it('should return "custom" when its a long type', () => {
const component = createTestComponent({
type: {
name: 'custom',
raw:
'Symbol("A very very very very very very lonnnngggggggggggggggggggggggggggggggggggg symbol")',
},
});
const { type } = extractPropDef(component);
expect(type.summary).toBe('custom');
expect(type.detail).toBe(
'Symbol("A very very very very very very lonnnngggggggggggggggggggggggggggggggggggg symbol")'
);
});
const { type } = extractPropDef(component);
it('should return "custom" when its a short type', () => {
const component = createTestComponent({
type: {
name: 'custom',
raw: 'Symbol("Hey!")',
},
});
expect(type.summary).toBe('custom');
const { type } = extractPropDef(component);
expect(type.summary).toBe('Symbol("Hey!")');
expect(type.detail).toBeUndefined();
});
});
});
@ -254,6 +303,10 @@ describe('enhancePropTypesProp', () => {
name: 'string',
required: false,
},
anotherAnother: {
name: 'string',
required: false,
},
},
},
});
@ -265,12 +318,37 @@ describe('enhancePropTypesProp', () => {
const expectedDetail = `{
foo: string,
bar: string,
another: string
another: string,
anotherAnother: string
}`;
expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should not have a deep shape as summary', () => {
const component = createTestComponent({
type: {
name: 'shape',
value: {
bar: {
name: 'shape',
value: {
hey: {
name: 'string',
required: false,
},
},
required: false,
},
},
},
});
const { type } = extractPropDef(component);
expect(type.summary).toBe('object');
});
it('should support enum of string', () => {
const component = createTestComponent({
type: {
@ -326,6 +404,50 @@ describe('enhancePropTypesProp', () => {
expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should support short object in enum summary', () => {
const component = createTestComponent({
type: {
name: 'enum',
value: [
{
value: '{\n text: PropTypes.string.isRequired,\n}',
computed: true,
},
{
value: '{\n foo: PropTypes.string,\n}',
computed: true,
},
],
},
});
const { type } = extractPropDef(component);
expect(type.summary).toBe('{ text: string } | { foo: string }');
});
it('should not have a deep object in an enum summary', () => {
const component = createTestComponent({
type: {
name: 'enum',
value: [
{
value: '{\n text: { foo: PropTypes.string.isRequired,\n }\n}',
computed: true,
},
{
value: '{\n foo: PropTypes.string,\n}',
computed: true,
},
],
},
});
const { type } = extractPropDef(component);
expect(type.summary).toBe('object | object');
});
it('should support enum of element', () => {
const component = createTestComponent({
type: {
@ -470,7 +592,7 @@ describe('enhancePropTypesProp', () => {
value: {
name: 'custom',
raw:
'{\n foo: PropTypes.string,\n bar: PropTypes.string,\n another: PropTypes.string,\n}',
'{\n foo: PropTypes.string,\n bar: PropTypes.string,\n another: PropTypes.string,\n anotherAnother: PropTypes.string,\n}',
},
},
});
@ -482,12 +604,29 @@ describe('enhancePropTypesProp', () => {
const expectedDetail = `objectOf({
foo: string,
bar: string,
another: string
another: string,
anotherAnother: string
})`;
expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should not have deep object in summary', () => {
const component = createTestComponent({
type: {
name: 'objectOf',
value: {
name: 'custom',
raw: '{\n foo: { bar: PropTypes.string,\n }\n}',
},
},
});
const { type } = extractPropDef(component);
expect(type.summary).toBe('objectOf(object)');
});
it('should support objectOf short shape', () => {
const component = createTestComponent({
type: {
@ -529,6 +668,10 @@ describe('enhancePropTypesProp', () => {
name: 'string',
required: false,
},
anotherAnother: {
name: 'string',
required: false,
},
},
},
},
@ -541,11 +684,39 @@ describe('enhancePropTypesProp', () => {
const expectedDetail = `objectOf({
foo: string,
bar: string,
another: string
another: string,
anotherAnother: string
})`;
expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should not have a deep shape in summary', () => {
const component = createTestComponent({
type: {
name: 'objectOf',
value: {
name: 'shape',
value: {
bar: {
name: 'shape',
value: {
hey: {
name: 'string',
required: false,
},
},
required: false,
},
},
},
},
});
const { type } = extractPropDef(component);
expect(type.summary).toBe('objectOf(object)');
});
});
it('should support union', () => {
@ -628,7 +799,7 @@ describe('enhancePropTypesProp', () => {
value: {
name: 'custom',
raw:
'{\n text: PropTypes.string.isRequired,\n value: PropTypes.string.isRequired,\n}',
'{\n text: PropTypes.string.isRequired,\n value: PropTypes.string.isRequired,\n another: PropTypes.string.isRequired,\n anotherAnother: PropTypes.string.isRequired,\n}',
},
},
});
@ -639,12 +810,30 @@ describe('enhancePropTypesProp', () => {
const expectedDetail = `[{
text: string,
value: string
value: string,
another: string,
anotherAnother: string
}]`;
expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should not have deep object in summary', () => {
const component = createTestComponent({
type: {
name: 'arrayOf',
value: {
name: 'custom',
raw: '{\n foo: { bar: PropTypes.string, }\n}',
},
},
});
const { type } = extractPropDef(component);
expect(type.summary).toBe('object[]');
});
it('should support array of short shape', () => {
const component = createTestComponent({
type: {
@ -686,6 +875,10 @@ describe('enhancePropTypesProp', () => {
name: 'string',
required: false,
},
anotherAnother: {
name: 'string',
required: false,
},
},
},
},
@ -698,29 +891,60 @@ describe('enhancePropTypesProp', () => {
const expectedDetail = `[{
foo: string,
bar: string,
another: string
another: string,
anotherAnother: string
}]`;
expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should not have deep shape in summary', () => {
const component = createTestComponent({
type: {
name: 'arrayOf',
value: {
name: 'shape',
value: {
bar: {
name: 'shape',
value: {
hey: {
name: 'string',
required: false,
},
},
required: false,
},
},
},
},
});
const { type } = extractPropDef(component);
expect(type.summary).toBe('object[]');
});
});
});
describe('defaultValue', () => {
function createTestComponent(defaultValue: string): Component {
function createTestComponent(
defaultValue: DocgenPropDefaultValue,
typeName = 'anything-is-fine'
): Component {
return createComponent({
docgenInfo: {
...createDocgenProp({
name: 'prop',
type: { name: 'anything-is-fine' },
defaultValue: { value: defaultValue },
type: { name: typeName },
defaultValue,
}),
},
});
}
it('should support short object', () => {
const component = createTestComponent("{ foo: 'foo', bar: 'bar' }");
const component = createTestComponent(createDefaultValue("{ foo: 'foo', bar: 'bar' }"));
const { defaultValue } = extractPropDef(component);
@ -731,7 +955,9 @@ describe('enhancePropTypesProp', () => {
});
it('should support long object', () => {
const component = createTestComponent("{ foo: 'foo', bar: 'bar', another: 'another' }");
const component = createTestComponent(
createDefaultValue("{ foo: 'foo', bar: 'bar', another: 'another' }")
);
const { defaultValue } = extractPropDef(component);
@ -746,8 +972,18 @@ describe('enhancePropTypesProp', () => {
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should not have deep object in summary', () => {
const component = createTestComponent(
createDefaultValue("{ foo: 'foo', bar: { hey: 'ho' } }")
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('object');
});
it('should support short function', () => {
const component = createTestComponent('() => {}');
const component = createTestComponent(createDefaultValue('() => {}'));
const { defaultValue } = extractPropDef(component);
@ -757,7 +993,9 @@ describe('enhancePropTypesProp', () => {
it('should support long function', () => {
const component = createTestComponent(
'(foo, bar) => {\n const concat = foo + bar;\n const append = concat + " hey!";\n \n return append;\n}'
createDefaultValue(
'(foo, bar) => {\n const concat = foo + bar;\n const append = concat + " hey!";\n \n return append;\n}'
)
);
const { defaultValue } = extractPropDef(component);
@ -774,7 +1012,9 @@ describe('enhancePropTypesProp', () => {
});
it('should use the name of function when available and indicate that args are present', () => {
const component = createTestComponent('function concat(a, b) {\n return a + b;\n}');
const component = createTestComponent(
createDefaultValue('function concat(a, b) {\n return a + b;\n}')
);
const { defaultValue } = extractPropDef(component);
@ -788,7 +1028,9 @@ describe('enhancePropTypesProp', () => {
});
it('should use the name of function when available', () => {
const component = createTestComponent('function hello() {\n return "hello";\n}');
const component = createTestComponent(
createDefaultValue('function hello() {\n return "hello";\n}')
);
const { defaultValue } = extractPropDef(component);
@ -802,7 +1044,7 @@ describe('enhancePropTypesProp', () => {
});
it('should support short element', () => {
const component = createTestComponent('<div>Hey!</div>');
const component = createTestComponent(createDefaultValue('<div>Hey!</div>'));
const { defaultValue } = extractPropDef(component);
@ -812,23 +1054,33 @@ describe('enhancePropTypesProp', () => {
it('should support long element', () => {
const component = createTestComponent(
'() => {\n return <div>Inlined FunctionnalComponent!</div>;\n}'
createDefaultValue(
'<div>Hey! Hey! Hey!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>'
)
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('element');
expect(defaultValue.detail).toBe(
'<div>Hey! Hey! Hey!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>'
);
});
const expectedDetail = `() => {
return <div>Inlined FunctionnalComponent!</div>;
}`;
it('should support element with props', () => {
const component = createTestComponent(createDefaultValue('<Component className="toto" />'));
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('<Component />');
expect(defaultValue.detail).toBe('<Component className="toto" />');
});
it("should use the name of the React component when it's available", () => {
const component = createTestComponent(
'function InlinedFunctionalComponent() {\n return <div>Inlined FunctionnalComponent!</div>;\n}'
createDefaultValue(
'function InlinedFunctionalComponent() {\n return <div>Inlined FunctionnalComponent!</div>;\n}'
)
);
const { defaultValue } = extractPropDef(component);
@ -843,7 +1095,7 @@ describe('enhancePropTypesProp', () => {
});
it('should not use the name of an HTML element', () => {
const component = createTestComponent('<div>Hey!</div>');
const component = createTestComponent(createDefaultValue('<div>Hey!</div>'));
const { defaultValue } = extractPropDef(component);
@ -851,7 +1103,7 @@ describe('enhancePropTypesProp', () => {
});
it('should support short array', () => {
const component = createTestComponent('[1]');
const component = createTestComponent(createDefaultValue('[1]'));
const { defaultValue } = extractPropDef(component);
@ -861,7 +1113,9 @@ describe('enhancePropTypesProp', () => {
it('should support long array', () => {
const component = createTestComponent(
'[\n {\n thing: {\n id: 2,\n func: () => {},\n arr: [],\n },\n },\n]'
createDefaultValue(
'[\n {\n thing: {\n id: 2,\n func: () => {},\n arr: [],\n },\n },\n]'
)
);
const { defaultValue } = extractPropDef(component);
@ -879,6 +1133,241 @@ describe('enhancePropTypesProp', () => {
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should not have deep array in summary', () => {
const component = createTestComponent(createDefaultValue('[[[1]]]'));
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('array');
});
describe('fromRawDefaultProp', () => {
[
{ type: 'string', defaultProp: 'foo' },
{ type: 'number', defaultProp: 1 },
{ type: 'boolean', defaultProp: true },
{ type: 'symbol', defaultProp: Symbol('hey!') },
].forEach(x => {
it(`should support ${x.type}`, () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, x.defaultProp);
expect(defaultValue.summary).toBe(x.defaultProp.toString());
expect(defaultValue.detail).toBeUndefined();
});
});
it('should support array of primitives', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, [1, 2, 3]);
expect(defaultValue.summary).toBe('[1, 2, 3]');
expect(defaultValue.detail).toBeUndefined();
});
it('should support array of short object', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, [{ foo: 'bar' }]);
expect(defaultValue.summary).toBe("[{ 'foo': 'bar' }]");
expect(defaultValue.detail).toBeUndefined();
});
it('should support array of long object', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, [{ foo: 'bar', bar: 'foo', hey: 'ho' }]);
expect(defaultValue.summary).toBe('array');
const expectedDetail = `[{
'foo': 'bar',
'bar': 'foo',
'hey': 'ho'
}]`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should support short object', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, { foo: 'bar' });
expect(defaultValue.summary).toBe("{ 'foo': 'bar' }");
expect(defaultValue.detail).toBeUndefined();
});
it('should support long object', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, { foo: 'bar', bar: 'foo', hey: 'ho' });
expect(defaultValue.summary).toBe('object');
const expectedDetail = `{
'foo': 'bar',
'bar': 'foo',
'hey': 'ho'
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should support anonymous function', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, () => 'hey!');
expect(defaultValue.summary).toBe('func');
expect(defaultValue.detail).toBeUndefined();
});
it('should support named function', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, function hello() {
return 'world!';
});
expect(defaultValue.summary).toBe('hello()');
expect(defaultValue.detail).toBeUndefined();
});
it('should support named function with params', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, function add(a: number, b: number) {
return a + b;
});
expect(defaultValue.summary).toBe('add( ... )');
expect(defaultValue.detail).toBeUndefined();
});
it('should support React element', () => {
const component = createTestComponent(null);
const defaultProp = <ReactComponent />;
// Simulate babel-plugin-add-react-displayname.
defaultProp.type.displayName = 'ReactComponent';
const { defaultValue } = extractPropDef(component, defaultProp);
expect(defaultValue.summary).toBe('<ReactComponent />');
expect(defaultValue.detail).toBeUndefined();
});
it('should support React element with props', () => {
const component = createTestComponent(null);
// @ts-ignore
const defaultProp = <ReactComponent className="toto" />;
// Simulate babel-plugin-add-react-displayname.
defaultProp.type.displayName = 'ReactComponent';
const { defaultValue } = extractPropDef(component, defaultProp);
expect(defaultValue.summary).toBe('<ReactComponent />');
expect(defaultValue.detail).toBe('<ReactComponent className="toto" />');
});
it('should support short HTML element', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, <div>HTML element</div>);
expect(defaultValue.summary).toBe('<div>HTML element</div>');
expect(defaultValue.detail).toBeUndefined();
});
it('should support long HTML element', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(
component,
<div>HTML element!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>
);
expect(defaultValue.summary).toBe('element');
const expectedDetail = `<div>
HTML element!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
</div>`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
['element', 'elementType'].forEach(x => {
it(`should support inlined React class component for ${x}`, () => {
const component = createTestComponent(null, x);
const { defaultValue } = extractPropDef(
component,
class InlinedClassComponent extends React.PureComponent {
render() {
return <div>Inlined ClassComponent!</div>;
}
}
);
expect(defaultValue.summary).toBe('<InlinedClassComponent />');
expect(defaultValue.detail).toBeUndefined();
});
it(`should support inlined anonymous React functional component for ${x}`, () => {
const component = createTestComponent(null, x);
const { defaultValue } = extractPropDef(component, () => {
return <div>Inlined FunctionnalComponent!</div>;
});
expect(defaultValue.summary).toBe('element');
expect(defaultValue.detail).toBeUndefined();
});
it(`should support inlined anonymous React functional component with props for ${x}`, () => {
const component = createTestComponent(null, x);
const { defaultValue } = extractPropDef(component, ({ foo }: { foo: string }) => {
return <div>{foo}</div>;
});
expect(defaultValue.summary).toBe('element');
expect(defaultValue.detail).toBeUndefined();
});
it(`should support inlined named React functional component for ${x}`, () => {
const component = createTestComponent(null, x);
const { defaultValue } = extractPropDef(component, function InlinedFunctionalComponent() {
return <div>Inlined FunctionnalComponent!</div>;
});
expect(defaultValue.summary).toBe('<InlinedFunctionalComponent />');
expect(defaultValue.detail).toBeUndefined();
});
it(`should support inlined named React functional component with props for ${x}`, () => {
const component = createTestComponent(null, x);
const { defaultValue } = extractPropDef(component, function InlinedFunctionalComponent({
foo,
}: {
foo: string;
}) {
return <div>{foo}</div>;
});
expect(defaultValue.summary).toBe('<InlinedFunctionalComponent />');
expect(defaultValue.detail).toBeUndefined();
});
});
});
});
});

23
addons/docs/src/frameworks/react/propTypes/handleProp.ts
View File

@ -2,11 +2,12 @@ import { isNil } from 'lodash';
import { PropDef } from '@storybook/components';
import { ExtractedProp } from '../../../lib/docgen';
import { createType } from './createType';
import { createDefaultValue } from '../lib/createDefaultValue';
import { createDefaultValue, createDefaultValueFromRawDefaultProp } from '../lib/defaultValues';
import { Component } from '../../../blocks/shared';
import { keepOriginalDefinitionOrder } from './sortProps';
import { rawDefaultPropTypeResolvers } from './rawDefaultPropResolvers';
export function enhancePropTypesProp(extractedProp: ExtractedProp): PropDef {
export function enhancePropTypesProp(extractedProp: ExtractedProp, rawDefaultProp?: any): PropDef {
const { propDef } = extractedProp;
const newtype = createType(extractedProp);
@ -15,8 +16,19 @@ export function enhancePropTypesProp(extractedProp: ExtractedProp): PropDef {
}
const { defaultValue } = extractedProp.docgenInfo;
if (!isNil(defaultValue)) {
if (!isNil(defaultValue) && !isNil(defaultValue.value)) {
const newDefaultValue = createDefaultValue(defaultValue.value);
if (!isNil(newDefaultValue)) {
propDef.defaultValue = newDefaultValue;
}
} else if (!isNil(rawDefaultProp)) {
const newDefaultValue = createDefaultValueFromRawDefaultProp(
rawDefaultProp,
propDef,
rawDefaultPropTypeResolvers
);
if (!isNil(newDefaultValue)) {
propDef.defaultValue = newDefaultValue;
}
@ -29,7 +41,10 @@ export function enhancePropTypesProps(
extractedProps: ExtractedProp[],
component: Component
): PropDef[] {
const enhancedProps = extractedProps.map(enhancePropTypesProp);
const rawDefaultProps = !isNil(component.defaultProps) ? component.defaultProps : {};
const enhancedProps = extractedProps.map(x =>
enhancePropTypesProp(x, rawDefaultProps[x.propDef.name])
);
return keepOriginalDefinitionOrder(enhancedProps, component);
}

31
addons/docs/src/frameworks/react/propTypes/rawDefaultPropResolvers.ts Normal file
View File

@ -0,0 +1,31 @@
import { isNil } from 'lodash';
import { TypeResolver, extractFunctionName, createTypeResolvers } from '../lib/defaultValues';
import { createSummaryValue } from '../../../lib';
import { FUNCTION_CAPTION, ELEMENT_CAPTION } from '../lib';
import {
getPrettyElementIdentifier,
getPrettyFuncIdentifier,
} from '../lib/defaultValues/prettyIdentifier';
import { inspectValue, InspectionFunction } from '../lib/inspection';
const funcResolver: TypeResolver = (rawDefaultProp, { name, type }) => {
const isElement = type.summary === 'element' || type.summary === 'elementType';
const funcName = extractFunctionName(rawDefaultProp, name);
if (!isNil(funcName)) {
// Try to display the name of the component. The body of the component is ommited since the code has been transpiled.
if (isElement) {
return createSummaryValue(getPrettyElementIdentifier(funcName));
}
const { hasParams } = inspectValue(rawDefaultProp.toString()).inferedType as InspectionFunction;
return createSummaryValue(getPrettyFuncIdentifier(funcName, hasParams));
}
return createSummaryValue(isElement ? ELEMENT_CAPTION : FUNCTION_CAPTION);
};
export const rawDefaultPropTypeResolvers = createTypeResolvers({
function: funcResolver,
});

223
addons/docs/src/frameworks/react/typeScript/handleProp.test.ts
View File

@ -1,223 +0,0 @@
/* eslint-disable no-underscore-dangle */
import { PropDef } from '@storybook/components';
import { Component } from '../../../blocks/shared';
import { extractComponentProps, DocgenInfo } from '../../../lib/docgen';
import { enhanceTypeScriptProp } from './handleProp';
const DOCGEN_SECTION = 'props';
function createDocgenSection(docgenInfo: DocgenInfo): Record<string, any> {
return {
[DOCGEN_SECTION]: {
...docgenInfo,
},
};
}
function createDocgenProp({
name,
tsType,
...others
}: Partial<DocgenInfo> & { name: string }): Record<string, any> {
return {
[name]: {
tsType,
required: false,
...others,
},
};
}
// eslint-disable-next-line react/forbid-foreign-prop-types
function createComponent({ propTypes = {}, defaultProps = {}, docgenInfo = {} }): Component {
const component = () => {};
component.propTypes = propTypes;
component.defaultProps = defaultProps;
// @ts-ignore
component.__docgenInfo = createDocgenSection(docgenInfo);
return component;
}
function extractPropDef(component: Component): PropDef {
return enhanceTypeScriptProp(extractComponentProps(component, DOCGEN_SECTION)[0]);
}
describe('enhanceTypeScriptProp', () => {
describe('defaultValue', () => {
function createTestComponent(defaultValue: string): Component {
return createComponent({
docgenInfo: {
...createDocgenProp({
name: 'prop',
tsType: { name: 'anything-is-fine' },
defaultValue: { value: defaultValue },
}),
},
});
}
it('should support short object', () => {
const component = createTestComponent("{ foo: 'foo', bar: 'bar' }");
const { defaultValue } = extractPropDef(component);
const expectedSummary = "{ foo: 'foo', bar: 'bar' }";
expect(defaultValue.summary.replace(/\s/g, '')).toBe(expectedSummary.replace(/\s/g, ''));
expect(defaultValue.detail).toBeUndefined();
});
it('should support long object', () => {
const component = createTestComponent("{ foo: 'foo', bar: 'bar', another: 'another' }");
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('object');
const expectedDetail = `{
foo: 'foo',
bar: 'bar',
another: 'another'
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should support short function', () => {
const component = createTestComponent('() => {}');
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('() => {}');
expect(defaultValue.detail).toBeUndefined();
});
it('should support long function', () => {
const component = createTestComponent(
'(foo, bar) => {\n const concat = foo + bar;\n const append = concat + " hey!";\n \n return append;\n}'
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('func');
const expectedDetail = `(foo, bar) => {
const concat = foo + bar;
const append = concat + ' hey!';
return append
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should use the name of function when available and indicate that args are present', () => {
const component = createTestComponent('function concat(a, b) {\n return a + b;\n}');
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('concat( ... )');
const expectedDetail = `function concat(a, b) {
return a + b
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should use the name of function when available', () => {
const component = createTestComponent('function hello() {\n return "hello";\n}');
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('hello()');
const expectedDetail = `function hello() {
return 'hello'
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should support short element', () => {
const component = createTestComponent('<div>Hey!</div>');
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('<div>Hey!</div>');
expect(defaultValue.detail).toBeUndefined();
});
it('should support long element', () => {
const component = createTestComponent(
'() => {\n return <div>Inlined FunctionnalComponent!</div>;\n}'
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('element');
const expectedDetail = `() => {
return <div>Inlined FunctionnalComponent!</div>;
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it("should use the name of the React component when it's available", () => {
const component = createTestComponent(
'function InlinedFunctionalComponent() {\n return <div>Inlined FunctionnalComponent!</div>;\n}'
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('<InlinedFunctionalComponent />');
const expectedDetail = `function InlinedFunctionalComponent() {
return <div>Inlined FunctionnalComponent!</div>;
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should not use the name of an HTML element', () => {
const component = createTestComponent('<div>Hey!</div>');
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).not.toBe('<div />');
});
it('should support short array', () => {
const component = createTestComponent('[1]');
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('[1]');
expect(defaultValue.detail).toBeUndefined();
});
it('should support long array', () => {
const component = createTestComponent(
'[\n {\n thing: {\n id: 2,\n func: () => {},\n arr: [],\n },\n },\n]'
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('array');
const expectedDetail = `[{
thing: {
id: 2,
func: () => {
},
arr: []
}
}]`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
});
});

502
addons/docs/src/frameworks/react/typeScript/handleProp.test.tsx Normal file
View File

@ -0,0 +1,502 @@
/* eslint-disable no-underscore-dangle */
import { PropDef } from '@storybook/components';
import React from 'react';
import { Component } from '../../../blocks/shared';
import { extractComponentProps, DocgenInfo, DocgenPropDefaultValue } from '../../../lib/docgen';
import { enhanceTypeScriptProp } from './handleProp';
const DOCGEN_SECTION = 'props';
function ReactComponent() {
return <div>React Component!</div>;
}
function createDocgenSection(docgenInfo: DocgenInfo): Record<string, any> {
return {
[DOCGEN_SECTION]: {
...docgenInfo,
},
};
}
function createDocgenProp({
name,
tsType,
...others
}: Partial<DocgenInfo> & { name: string }): Record<string, any> {
return {
[name]: {
tsType,
required: false,
...others,
},
};
}
// eslint-disable-next-line react/forbid-foreign-prop-types
function createComponent({ propTypes = {}, defaultProps = {}, docgenInfo = {} }): Component {
const component = () => {
return <div>Hey!</div>;
};
component.propTypes = propTypes;
component.defaultProps = defaultProps;
// @ts-ignore
component.__docgenInfo = createDocgenSection(docgenInfo);
return component;
}
function createDefaultValue(defaultValue: string): DocgenPropDefaultValue {
return { value: defaultValue };
}
function extractPropDef(component: Component, rawDefaultProp?: any): PropDef {
return enhanceTypeScriptProp(extractComponentProps(component, DOCGEN_SECTION)[0], rawDefaultProp);
}
describe('enhanceTypeScriptProp', () => {
describe('defaultValue', () => {
function createTestComponent(
defaultValue: DocgenPropDefaultValue,
typeName = 'anything-is-fine'
): Component {
return createComponent({
docgenInfo: {
...createDocgenProp({
name: 'prop',
tsType: { name: typeName },
defaultValue,
}),
},
});
}
it('should support short object', () => {
const component = createTestComponent(createDefaultValue("{ foo: 'foo', bar: 'bar' }"));
const { defaultValue } = extractPropDef(component);
const expectedSummary = "{ foo: 'foo', bar: 'bar' }";
expect(defaultValue.summary.replace(/\s/g, '')).toBe(expectedSummary.replace(/\s/g, ''));
expect(defaultValue.detail).toBeUndefined();
});
it('should support long object', () => {
const component = createTestComponent(
createDefaultValue("{ foo: 'foo', bar: 'bar', another: 'another' }")
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('object');
const expectedDetail = `{
foo: 'foo',
bar: 'bar',
another: 'another'
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should not have deep object in summary', () => {
const component = createTestComponent(
createDefaultValue("{ foo: 'foo', bar: { hey: 'ho' } }")
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('object');
});
it('should support short function', () => {
const component = createTestComponent(createDefaultValue('() => {}'));
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('() => {}');
expect(defaultValue.detail).toBeUndefined();
});
it('should support long function', () => {
const component = createTestComponent(
createDefaultValue(
'(foo, bar) => {\n const concat = foo + bar;\n const append = concat + " hey!";\n \n return append;\n}'
)
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('func');
const expectedDetail = `(foo, bar) => {
const concat = foo + bar;
const append = concat + ' hey!';
return append
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should use the name of function when available and indicate that args are present', () => {
const component = createTestComponent(
createDefaultValue('function concat(a, b) {\n return a + b;\n}')
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('concat( ... )');
const expectedDetail = `function concat(a, b) {
return a + b
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should use the name of function when available', () => {
const component = createTestComponent(
createDefaultValue('function hello() {\n return "hello";\n}')
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('hello()');
const expectedDetail = `function hello() {
return 'hello'
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should support short element', () => {
const component = createTestComponent(createDefaultValue('<div>Hey!</div>'));
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('<div>Hey!</div>');
expect(defaultValue.detail).toBeUndefined();
});
it('should support long element', () => {
const component = createTestComponent(
createDefaultValue(
'<div>Hey! Hey! Hey!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>'
)
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('element');
expect(defaultValue.detail).toBe(
'<div>Hey! Hey! Hey!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>'
);
});
it('should support element with props', () => {
const component = createTestComponent(createDefaultValue('<Component className="toto" />'));
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('<Component />');
expect(defaultValue.detail).toBe('<Component className="toto" />');
});
it("should use the name of the React component when it's available", () => {
const component = createTestComponent(
createDefaultValue(
'function InlinedFunctionalComponent() {\n return <div>Inlined FunctionnalComponent!</div>;\n}'
)
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('<InlinedFunctionalComponent />');
const expectedDetail = `function InlinedFunctionalComponent() {
return <div>Inlined FunctionnalComponent!</div>;
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should not use the name of an HTML element', () => {
const component = createTestComponent(createDefaultValue('<div>Hey!</div>'));
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).not.toBe('<div />');
});
it('should support short array', () => {
const component = createTestComponent(createDefaultValue('[1]'));
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('[1]');
expect(defaultValue.detail).toBeUndefined();
});
it('should support long array', () => {
const component = createTestComponent(
createDefaultValue(
'[\n {\n thing: {\n id: 2,\n func: () => {},\n arr: [],\n },\n },\n]'
)
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('array');
const expectedDetail = `[{
thing: {
id: 2,
func: () => {
},
arr: []
}
}]`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should not have deep array in summary', () => {
const component = createTestComponent(createDefaultValue('[[[1]]]'));
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('array');
});
describe('fromRawDefaultProp', () => {
[
{ type: 'string', defaultProp: 'foo' },
{ type: 'number', defaultProp: 1 },
{ type: 'boolean', defaultProp: true },
{ type: 'symbol', defaultProp: Symbol('hey!') },
].forEach(x => {
it(`should support ${x.type}`, () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, x.defaultProp);
expect(defaultValue.summary).toBe(x.defaultProp.toString());
expect(defaultValue.detail).toBeUndefined();
});
});
it('should support array of primitives', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, [1, 2, 3]);
expect(defaultValue.summary).toBe('[1, 2, 3]');
expect(defaultValue.detail).toBeUndefined();
});
it('should support array of short object', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, [{ foo: 'bar' }]);
expect(defaultValue.summary).toBe("[{ 'foo': 'bar' }]");
expect(defaultValue.detail).toBeUndefined();
});
it('should support array of long object', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, [{ foo: 'bar', bar: 'foo', hey: 'ho' }]);
expect(defaultValue.summary).toBe('array');
const expectedDetail = `[{
'foo': 'bar',
'bar': 'foo',
'hey': 'ho'
}]`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should support short object', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, { foo: 'bar' });
expect(defaultValue.summary).toBe("{ 'foo': 'bar' }");
expect(defaultValue.detail).toBeUndefined();
});
it('should support long object', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, { foo: 'bar', bar: 'foo', hey: 'ho' });
expect(defaultValue.summary).toBe('object');
const expectedDetail = `{
'foo': 'bar',
'bar': 'foo',
'hey': 'ho'
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should support anonymous function', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, () => 'hey!');
expect(defaultValue.summary).toBe('func');
expect(defaultValue.detail).toBeUndefined();
});
it('should support named function', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, function hello() {
return 'world!';
});
expect(defaultValue.summary).toBe('hello()');
expect(defaultValue.detail).toBeUndefined();
});
it('should support named function with params', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, function add(a: number, b: number) {
return a + b;
});
expect(defaultValue.summary).toBe('add( ... )');
expect(defaultValue.detail).toBeUndefined();
});
it('should support React element', () => {
const component = createTestComponent(null);
const defaultProp = <ReactComponent />;
// Simulate babel-plugin-add-react-displayname.
defaultProp.type.displayName = 'ReactComponent';
const { defaultValue } = extractPropDef(component, defaultProp);
expect(defaultValue.summary).toBe('<ReactComponent />');
expect(defaultValue.detail).toBeUndefined();
});
it('should support React element with props', () => {
const component = createTestComponent(null);
// @ts-ignore
const defaultProp = <ReactComponent className="toto" />;
// Simulate babel-plugin-add-react-displayname.
defaultProp.type.displayName = 'ReactComponent';
const { defaultValue } = extractPropDef(component, defaultProp);
expect(defaultValue.summary).toBe('<ReactComponent />');
expect(defaultValue.detail).toBe('<ReactComponent className="toto" />');
});
it('should support short HTML element', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, <div>HTML element</div>);
expect(defaultValue.summary).toBe('<div>HTML element</div>');
expect(defaultValue.detail).toBeUndefined();
});
it('should support long HTML element', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(
component,
<div>HTML element!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>
);
expect(defaultValue.summary).toBe('element');
const expectedDetail = `<div>
HTML element!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
</div>`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
['element', 'elementType'].forEach(x => {
it(`should support inlined React class component for ${x}`, () => {
const component = createTestComponent(null, x);
const { defaultValue } = extractPropDef(
component,
class InlinedClassComponent extends React.PureComponent {
render() {
return <div>Inlined ClassComponent!</div>;
}
}
);
expect(defaultValue.summary).toBe('<InlinedClassComponent />');
expect(defaultValue.detail).toBeUndefined();
});
it(`should support inlined anonymous React functional component for ${x}`, () => {
const component = createTestComponent(null, x);
const { defaultValue } = extractPropDef(component, () => {
return <div>Inlined FunctionnalComponent!</div>;
});
expect(defaultValue.summary).toBe('element');
expect(defaultValue.detail).toBeUndefined();
});
it(`should support inlined anonymous React functional component with props for ${x}`, () => {
const component = createTestComponent(null, x);
const { defaultValue } = extractPropDef(component, ({ foo }: { foo: string }) => {
return <div>{foo}</div>;
});
expect(defaultValue.summary).toBe('element');
expect(defaultValue.detail).toBeUndefined();
});
it(`should support inlined named React functional component for ${x}`, () => {
const component = createTestComponent(null, x);
const { defaultValue } = extractPropDef(component, function InlinedFunctionalComponent() {
return <div>Inlined FunctionnalComponent!</div>;
});
expect(defaultValue.summary).toBe('<InlinedFunctionalComponent />');
expect(defaultValue.detail).toBeUndefined();
});
it(`should support inlined named React functional component with props for ${x}`, () => {
const component = createTestComponent(null, x);
const { defaultValue } = extractPropDef(component, function InlinedFunctionalComponent({
foo,
}: {
foo: string;
}) {
return <div>{foo}</div>;
});
expect(defaultValue.summary).toBe('<InlinedFunctionalComponent />');
expect(defaultValue.detail).toBeUndefined();
});
});
});
});
});

12
addons/docs/src/frameworks/react/typeScript/handleProp.ts
View File

@ -1,14 +1,20 @@
import { isNil } from 'lodash';
import { PropDef } from '@storybook/components';
import { ExtractedProp } from '../../../lib/docgen';
import { createDefaultValue } from '../lib/createDefaultValue';
import { createDefaultValue, createDefaultValueFromRawDefaultProp } from '../lib/defaultValues';
export function enhanceTypeScriptProp(extractedProp: ExtractedProp): PropDef {
export function enhanceTypeScriptProp(extractedProp: ExtractedProp, rawDefaultProp?: any): PropDef {
const { propDef } = extractedProp;
const { defaultValue } = extractedProp.docgenInfo;
if (!isNil(defaultValue)) {
if (!isNil(defaultValue) && !isNil(defaultValue.value)) {
const newDefaultValue = createDefaultValue(defaultValue.value);
if (!isNil(newDefaultValue)) {
propDef.defaultValue = newDefaultValue;
}
} else if (!isNil(rawDefaultProp)) {
const newDefaultValue = createDefaultValueFromRawDefaultProp(rawDefaultProp, propDef);
if (!isNil(newDefaultValue)) {
propDef.defaultValue = newDefaultValue;
}

7
addons/docs/src/lib/docgen/createPropDef.ts
View File

@ -13,6 +13,11 @@ export type PropDefFactory = (
jsDocParsingResult?: JsDocParsingResult
) => PropDef;
function createType(type: DocgenType) {
// A type could be null if a defaultProp has been provided without a type definition.
return !isNil(type) ? createSummaryValue(type.name) : null;
}
function createDefaultValue(defaultValue: DocgenPropDefaultValue): PropDefaultValue {
if (!isNil(defaultValue)) {
const { value } = defaultValue;
@ -30,7 +35,7 @@ function createBasicPropDef(name: string, type: DocgenType, docgenInfo: DocgenIn
return {
name,
type: createSummaryValue(type.name),
type: createType(type),
required,
description,
defaultValue: createDefaultValue(defaultValue),

37
addons/docs/src/lib/docgen/flow/createPropDef.test.ts
View File

@ -97,11 +97,40 @@ describe('type', () => {
flowType: {
name: 'signature',
type: 'object',
raw: '{ (x: string): void, prop: string }',
raw:
'{ (x: string): void, prop1: string, prop2: string, prop3: string, prop4: string, prop5: string }',
signature: {
properties: [
{
key: 'prop',
key: 'prop1',
value: {
name: 'string',
required: true,
},
},
{
key: 'prop2',
value: {
name: 'string',
required: true,
},
},
{
key: 'prop3',
value: {
name: 'string',
required: true,
},
},
{
key: 'prop4',
value: {
name: 'string',
required: true,
},
},
{
key: 'prop5',
value: {
name: 'string',
required: true,
@ -133,7 +162,9 @@ describe('type', () => {
const { type } = createFlowPropDef(PROP_NAME, docgenInfo);
expect(type.summary).toBe('object');
expect(type.detail).toBe('{ (x: string): void, prop: string }');
expect(type.detail).toBe(
'{ (x: string): void, prop1: string, prop2: string, prop3: string, prop4: string, prop5: string }'
);
});
it('should support func signature', () => {

5
addons/docs/src/lib/docgen/flow/createType.ts
View File

@ -55,6 +55,11 @@ function generateDefault({ name, raw }: DocgenFlowType): PropType {
}
export function createType(type: DocgenFlowType): PropType {
// A type could be null if a defaultProp has been provided without a type definition.
if (isNil(type)) {
return null;
}
switch (type.name) {
case FlowTypesType.UNION:
return generateUnion(type as DocgenFlowUnionType);

2
addons/docs/src/lib/docgen/typeScript/createDefaultValue.ts
View File

@ -4,7 +4,7 @@ import { DocgenInfo } from '../types';
import { createSummaryValue } from '../../utils';
import { isDefaultValueBlacklisted } from '../utils/defaultValue';
export function createDefaultValue({ tsType, defaultValue }: DocgenInfo): PropDefaultValue {
export function createDefaultValue({ defaultValue }: DocgenInfo): PropDefaultValue {
if (!isNil(defaultValue)) {
const { value } = defaultValue;

6
addons/docs/src/lib/docgen/typeScript/createType.ts
View File

@ -1,8 +1,14 @@
import { PropType } from '@storybook/components';
import { isNil } from 'lodash';
import { DocgenInfo } from '../types';
import { createSummaryValue } from '../../utils';
export function createType({ tsType, required }: DocgenInfo): PropType {
// A type could be null if a defaultProp has been provided without a type definition.
if (isNil(tsType)) {
return null;
}
if (!required) {
return createSummaryValue(tsType.name.replace(' | undefined', ''));
}

0
addons/docs/src/lib/docgen/utils/docgen.ts → addons/docs/src/lib/docgen/utils/docgenInfo.ts
View File

2
addons/docs/src/lib/docgen/utils/index.ts
View File

@ -1,3 +1,3 @@
export * from './defaultValue';
export * from './string';
export * from './docgen';
export * from './docgenInfo';

2
addons/docs/src/lib/utils.ts
View File

@ -1,6 +1,6 @@
import { PropSummaryValue } from '@storybook/components';
export const MAX_TYPE_SUMMARY_LENGTH = 30;
export const MAX_TYPE_SUMMARY_LENGTH = 70;
export const MAX_DEFALUT_VALUE_SUMMARY_LENGTH = 50;
export function isTooLongForTypeSummary(value: string): boolean {

10
addons/docs/src/mdx/__testfixtures__/component-id.output.snapshot
View File

@ -2,7 +2,7 @@
exports[`docs-mdx-compiler-plugin component-id.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer, makeStoryFn } from '@storybook/addon-docs/blocks';
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
import { Button } from '@storybook/react/demo';
import { Story, Meta } from '@storybook/addon-docs/blocks';
@ -43,10 +43,12 @@ const mdxStoryNameToId = { 'component notes': 'button-id--component-notes' };
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
...(componentMeta.parameters.docs || {}),
page: () => (
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
<MDXContent />
</AddContext>
),
page: MDXContent,
};
export default componentMeta;

10
addons/docs/src/mdx/__testfixtures__/decorators.output.snapshot
View File

@ -2,7 +2,7 @@
exports[`docs-mdx-compiler-plugin decorators.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer, makeStoryFn } from '@storybook/addon-docs/blocks';
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
import { Button } from '@storybook/react/demo';
import { Story, Meta } from '@storybook/addon-docs/blocks';
@ -77,10 +77,12 @@ const mdxStoryNameToId = { one: 'button--one' };
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
...(componentMeta.parameters.docs || {}),
page: () => (
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
<MDXContent />
</AddContext>
),
page: MDXContent,
};
export default componentMeta;

10
addons/docs/src/mdx/__testfixtures__/docs-only.output.snapshot
View File

@ -2,7 +2,7 @@
exports[`docs-mdx-compiler-plugin docs-only.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer, makeStoryFn } from '@storybook/addon-docs/blocks';
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
import { Meta } from '@storybook/addon-docs/blocks';
@ -46,10 +46,12 @@ const mdxStoryNameToId = {};
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
...(componentMeta.parameters.docs || {}),
page: () => (
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
<MDXContent />
</AddContext>
),
page: MDXContent,
};
export default componentMeta;

10
addons/docs/src/mdx/__testfixtures__/non-story-exports.output.snapshot
View File

@ -2,7 +2,7 @@
exports[`docs-mdx-compiler-plugin non-story-exports.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer, makeStoryFn } from '@storybook/addon-docs/blocks';
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
import { Button } from '@storybook/react/demo';
import { Story, Meta } from '@storybook/addon-docs/blocks';
@ -55,10 +55,12 @@ const mdxStoryNameToId = { one: 'button--one', 'hello story': 'button--hello-sto
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
...(componentMeta.parameters.docs || {}),
page: () => (
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
<MDXContent />
</AddContext>
),
page: MDXContent,
};
export default componentMeta;

10
addons/docs/src/mdx/__testfixtures__/parameters.output.snapshot
View File

@ -2,7 +2,7 @@
exports[`docs-mdx-compiler-plugin parameters.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer, makeStoryFn } from '@storybook/addon-docs/blocks';
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
import { Button } from '@storybook/react/demo';
import { Story, Meta } from '@storybook/addon-docs/blocks';
@ -78,10 +78,12 @@ const mdxStoryNameToId = {
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
...(componentMeta.parameters.docs || {}),
page: () => (
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
<MDXContent />
</AddContext>
),
page: MDXContent,
};
export default componentMeta;

10
addons/docs/src/mdx/__testfixtures__/previews.output.snapshot
View File

@ -2,7 +2,7 @@
exports[`docs-mdx-compiler-plugin previews.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer, makeStoryFn } from '@storybook/addon-docs/blocks';
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
import { Button } from '@storybook/react/demo';
import { Preview, Story, Meta } from '@storybook/addon-docs/blocks';
@ -74,10 +74,12 @@ const mdxStoryNameToId = { 'hello button': 'button--hello-button', two: 'button-
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
...(componentMeta.parameters.docs || {}),
page: () => (
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
<MDXContent />
</AddContext>
),
page: MDXContent,
};
export default componentMeta;

10
addons/docs/src/mdx/__testfixtures__/story-current.output.snapshot
View File

@ -2,7 +2,7 @@
exports[`docs-mdx-compiler-plugin story-current.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer, makeStoryFn } from '@storybook/addon-docs/blocks';
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
import { Story } from '@storybook/addon-docs/blocks';
@ -35,10 +35,12 @@ const mdxStoryNameToId = {};
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
...(componentMeta.parameters.docs || {}),
page: () => (
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
<MDXContent />
</AddContext>
),
page: MDXContent,
};
export default componentMeta;

10
addons/docs/src/mdx/__testfixtures__/story-def-text-only.output.snapshot
View File

@ -2,7 +2,7 @@
exports[`docs-mdx-compiler-plugin story-def-text-only.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer, makeStoryFn } from '@storybook/addon-docs/blocks';
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
import { Story, Meta } from '@storybook/addon-docs/blocks';
@ -43,10 +43,12 @@ const mdxStoryNameToId = { text: 'text--text' };
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
...(componentMeta.parameters.docs || {}),
page: () => (
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
<MDXContent />
</AddContext>
),
page: MDXContent,
};
export default componentMeta;

10
addons/docs/src/mdx/__testfixtures__/story-definitions.output.snapshot
View File

@ -2,7 +2,7 @@
exports[`docs-mdx-compiler-plugin story-definitions.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer, makeStoryFn } from '@storybook/addon-docs/blocks';
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
import { Button } from '@storybook/react/demo';
import { Story, Meta } from '@storybook/addon-docs/blocks';
@ -76,10 +76,12 @@ const mdxStoryNameToId = {
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
...(componentMeta.parameters.docs || {}),
page: () => (
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
<MDXContent />
</AddContext>
),
page: MDXContent,
};
export default componentMeta;

10
addons/docs/src/mdx/__testfixtures__/story-function-var.output.snapshot
View File

@ -2,7 +2,7 @@
exports[`docs-mdx-compiler-plugin story-function-var.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer, makeStoryFn } from '@storybook/addon-docs/blocks';
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
import { Meta, Story } from '@storybook/addon-docs/blocks';
export const basicFn = () => <Button mdxType=\\"Button\\" />;
@ -47,10 +47,12 @@ const mdxStoryNameToId = { basic: 'story-function-var--basic' };
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
...(componentMeta.parameters.docs || {}),
page: () => (
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
<MDXContent />
</AddContext>
),
page: MDXContent,
};
export default componentMeta;

10
addons/docs/src/mdx/__testfixtures__/story-function.output.snapshot
View File

@ -2,7 +2,7 @@
exports[`docs-mdx-compiler-plugin story-function.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer, makeStoryFn } from '@storybook/addon-docs/blocks';
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
const makeShortcode = name =>
function MDXDefaultShortcode(props) {
@ -52,10 +52,12 @@ const mdxStoryNameToId = {};
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
...(componentMeta.parameters.docs || {}),
page: () => (
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
<MDXContent />
</AddContext>
),
page: MDXContent,
};
export default componentMeta;

10
addons/docs/src/mdx/__testfixtures__/story-object.output.snapshot
View File

@ -2,7 +2,7 @@
exports[`docs-mdx-compiler-plugin story-object.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer, makeStoryFn } from '@storybook/addon-docs/blocks';
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
import { Story, Meta } from '@storybook/addon-docs/blocks';
import { Welcome, Button } from '@storybook/angular/demo';
@ -64,10 +64,12 @@ const mdxStoryNameToId = { 'to storybook': 'mdx-welcome--to-storybook' };
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
...(componentMeta.parameters.docs || {}),
page: () => (
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
<MDXContent />
</AddContext>
),
page: MDXContent,
};
export default componentMeta;

10
addons/docs/src/mdx/__testfixtures__/story-references.output.snapshot
View File

@ -2,7 +2,7 @@
exports[`docs-mdx-compiler-plugin story-references.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer, makeStoryFn } from '@storybook/addon-docs/blocks';
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
import { Story } from '@storybook/addon-docs/blocks';
@ -35,10 +35,12 @@ const mdxStoryNameToId = {};
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
...(componentMeta.parameters.docs || {}),
page: () => (
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
<MDXContent />
</AddContext>
),
page: MDXContent,
};
export default componentMeta;

10
addons/docs/src/mdx/__testfixtures__/vanilla.output.snapshot
View File

@ -2,7 +2,7 @@
exports[`docs-mdx-compiler-plugin vanilla.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer, makeStoryFn } from '@storybook/addon-docs/blocks';
import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
import { Button } from '@storybook/react/demo';
@ -36,10 +36,12 @@ const mdxStoryNameToId = {};
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
container: ({ context, children }) => (
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
...(componentMeta.parameters.docs || {}),
page: () => (
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
<MDXContent />
</AddContext>
),
page: MDXContent,
};
export default componentMeta;

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

@ -179,8 +179,8 @@ function getExports(node, counter) {
const wrapperJs = `
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
container: ({ context, children }) => <DocsContainer context={{...context, mdxStoryNameToId}}>{children}</DocsContainer>,
page: MDXContent,
...(componentMeta.parameters.docs || {}),
page: () => <AddContext mdxStoryNameToId={mdxStoryNameToId}><MDXContent /></AddContext>,
};
`.trim();
@ -310,7 +310,7 @@ function extractExports(node, options) {
);
const fullJsx = [
'import { DocsContainer, makeStoryFn } from "@storybook/addon-docs/blocks";',
'import { makeStoryFn, AddContext } from "@storybook/addon-docs/blocks";',
defaultJsx,
...storyExports,
`const componentMeta = ${stringifyMeta(metaExport)};`,

10
addons/docs/vue/README.md
View File

@ -66,10 +66,12 @@ Docs has peer dependencies on `react`, `react-is`, and `babel-loader`. If you wa
yarn add -D react react-is babel-loader
```
Then update your `.storybook/config.js` to make sure you load MDX files:
Then update your `.storybook/main.js` to make sure you load MDX files:
```ts
configure(require.context('../src/stories', true, /\.stories\.(js|mdx)$/), module);
```js
module.exports = {
stories: ['../src/stories/**/*.stories.(js|mdx)'],
};
```
Finally, you can create MDX files like this:
@ -100,7 +102,7 @@ Yes, it's redundant to declare `component` twice. [Coming soon](https://github.c
Storybook Docs renders all Vue stories inside IFrames, with a default height of `60px` (configurable using the `docs.iframeHeight` story parameter).
Starting in 5.3, you can also render stories inline, and in 6.0 this will become the default behavior. To render inline, update `.storybook/config.js`:
Starting in 5.3, you can also render stories inline, and in 6.0 this will become the default behavior. To render inline, update `.storybook/preview.js`:
```js
import { addParameters } from '@storybook/vue';

2
addons/docs/web-components/README.md
View File

@ -4,7 +4,7 @@
- Be sure to check the [installation section of the general addon-docs page](../README.md) before proceeding.
- Be sure to have a [custom-elements.json](./#custom-elementsjson) file.
- Add to your `.storybook/config.js`
- Add to your `.storybook/preview.js`
```js
import { setCustomElements } from '@storybook/web-components';

27
addons/events/README.md
View File

@ -12,20 +12,17 @@ This [storybook](https://storybooks.js.org) ([source](https://github.com/storybo
npm i --save-dev @storybook/addon-events
```
Then create a file called `addons.js` in your storybook config.
Add following content to it:
within `.storybook/main.js`:
```js
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import '@storybook/addon-events/register';
module.exports = {
addons: ['@storybook/addon-events/register']
}
```
Then write your stories like this:
```js
import { storiesOf } from '@storybook/react';
import withEvents from '@storybook/addon-events';
import EventEmiter from 'event-emiter';
@ -35,9 +32,9 @@ import * as EVENTS from './events';
const emiter = new EventEmiter();
const emit = emiter.emit.bind(emiter);
storiesOf('WithEvents', module)
.addDecorator(
export default {
title: 'withEvents',
decorators: [
withEvents({
emit,
events: [
@ -87,7 +84,11 @@ storiesOf('WithEvents', module)
],
},
]
})
)
.add('Logger', () => <Logger emiter={emiter} />);
}),
],
}
export const defaultView = () => (
<Logger emiter={emiter} />
);
```

12
addons/events/package.json
View File

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

6
addons/google-analytics/README.md
View File

@ -12,10 +12,12 @@ Install:
yarn add @storybook/addon-google-analytics --dev
```
Then, add following content to `.storybook/addons.js`
within `.storybook/main.js`:
```js
import '@storybook/addon-google-analytics/register';
module.exports = {
addons: ['@storybook/addon-google-analytics/register']
}
```
Then, set an environment variable

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

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-google-analytics",
"version": "5.3.0-beta.8",
"version": "5.3.0-beta.10",
"description": "Storybook addon for google analytics",
"keywords": [
"addon",
@ -20,8 +20,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.8",
"@storybook/core-events": "5.3.0-beta.8",
"@storybook/addons": "5.3.0-beta.10",
"@storybook/core-events": "5.3.0-beta.10",
"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.3.0-beta.8",
"version": "5.3.0-beta.10",
"description": "Storybook addon to display the GraphiQL IDE",
"keywords": [
"addon",
@ -29,8 +29,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.8",
"@storybook/api": "5.3.0-beta.8",
"@storybook/addons": "5.3.0-beta.10",
"@storybook/api": "5.3.0-beta.10",
"core-js": "^3.0.1",
"global": "^4.3.2",
"graphiql": "^0.16.0",

129
addons/info/README.md
View File

@ -23,7 +23,7 @@ It is possible to add `info` by default to all or a subsection of stories by usi
It is important to declare this decorator as **the first decorator**, otherwise it won't work well.
```js
// Globally in your .storybook/config.js.
// Globally in your .storybook/preview.js.
import { addDecorator } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
@ -33,9 +33,10 @@ addDecorator(withInfo);
or
```js
storiesOf('Component', module)
.addDecorator(withInfo) // At your stories directly.
.add(...);
export default {
title: 'Component',
decorators: [withInfo],
};
```
Then, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.
@ -43,88 +44,39 @@ A complete list of possible configurations can be found [in a later section](#se
This can be done per book of stories:
```js
import { storiesOf } from '@storybook/react';
import Component from './Component';
storiesOf('Component', module)
.addParameters({
info: {
// Your settings
},
})
.add('with some emoji', () => <Component />);
export default {
title: 'Component',
parameters: {
info: {},
},
};
```
...or for each story individually:
```js
import { storiesOf } from '@storybook/react';
import Component from './Component';
storiesOf('Component', module)
.add(
'with some emoji',
() => <Component emoji />,
{ info: { inline: true, header: false } } // Make your component render inline with the additional info
)
.add(
'with no emoji',
() => <Component />,
{ info: '☹️ no emojis' } // Add additional info text directly
);
```
export default {
title: 'Component',
};
...or even together:
```js
import { storiesOf } from '@storybook/react';
import Component from './Component';
storiesOf('Component', module)
.addParameters({
info: {
// Make a default for all stories in this book,
inline: true, // where the components are inlined
styles: {
header: {
h1: {
color: 'red', // and the headers of the sections are red.
},
},
},
},
})
.add('green version', () => <Component green />, {
info: {
styles: stylesheet => ({
// Setting the style with a function
...stylesheet,
header: {
...stylesheet.header,
h1: {
...stylesheet.header.h1,
color: 'green', // Still inlined but with green headers!
},
},
}),
},
})
.add('something else', () => <Component different />, {
info: 'This story has additional text added to the info!', // Still inlined and with red headers!
});
export const defaultView = () => <Component />;
defaultView = {
parameters: {
info: { inline: true },
},
};
```
It is also possible to disable the `info` addon entirely.
Depending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.
```
{
info: {
disable: true
}
info: {
disable: true,
}
```
@ -134,30 +86,27 @@ The `info` addon also supports markdown.
To use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.
```js
storiesOf('Button', module).add('Button Component', () => <Button />, {
info: {
text: `
description or documentation about my component, supports markdown
info: {
text: `
description or documentation about my component, supports markdown
~~~js
<Button>Click Here</Button>
~~~
`,
},
});
~~~js
<Button>Click Here</Button>
~~~
`,
}
```
## Setting Global Options
To configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/config.js`.
To configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.
```js
// config.js
import { withInfo } from '@storybook/addon-info';
addDecorator(
withInfo({
header: false, // Global configuration for the info addon across all of your stories.
header: false,
})
);
```
@ -298,6 +247,14 @@ import React from 'react';
import { storiesOf } from '@storybook/react';
import Button from './button';
export default {
title: 'Button',
component: Button,
parameters: {
info: TableComponent,
},
};
const Red = props => <span style={{ color: 'red' }} {...props} />;
const TableComponent = ({ propDefinitions }) => {
@ -332,11 +289,7 @@ const TableComponent = ({ propDefinitions }) => {
);
};
storiesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {
info: {
TableComponent,
},
});
export const defaultView = () => <Button />;
```
### React Docgen Integration

10
addons/info/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-info",
"version": "5.3.0-beta.8",
"version": "5.3.0-beta.10",
"description": "A Storybook addon to show additional information for your stories.",
"keywords": [
"addon",
@ -28,10 +28,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.8",
"@storybook/client-logger": "5.3.0-beta.8",
"@storybook/components": "5.3.0-beta.8",
"@storybook/theming": "5.3.0-beta.8",
"@storybook/addons": "5.3.0-beta.10",
"@storybook/client-logger": "5.3.0-beta.10",
"@storybook/components": "5.3.0-beta.10",
"@storybook/theming": "5.3.0-beta.10",
"core-js": "^3.0.1",
"global": "^4.3.2",
"marksy": "^7.0.0",

81
addons/jest/README.md
View File

@ -69,10 +69,12 @@ You could create a `prebuild:storybook` npm script, which will never fail by app
### Register
Register addon at `.storybook/addons.js`
within `.storybook/main.js`:
```js
import '@storybook/addon-jest/register';
module.exports = {
addons: ['@storybook/addon-jest/register']
}
```
## Usage
@ -85,18 +87,22 @@ In your `story.js`
import results from '../.jest-test-results.json';
import { withTests } from '@storybook/addon-jest';
storiesOf('MyComponent', module)
.addDecorator(withTests({ results }))
.add(
'This story shows test results from MyComponent.test.js and MyOtherComponent.test.js',
() => <div>Jest results in storybook</div>,
{
jest: ['MyComponent.test.js', 'MyOtherComponent.test.js'],
}
);
export default {
title: 'MyComponent',
decorators: [withTests({ results })],
};
export const defaultView = () => (
<div>Jest results in storybook</div>
);
defaultView.story = {
parameters: {
jest: ['MyComponent.test.js', 'MyOtherComponent.test.js'],
},
};
```
Or in order to avoid importing `.jest-test-results.json` in each story, add the decorator in your `.storybook/config.js` and results will display for stories that you have set the `jest` parameter on:
Or in order to avoid importing `.jest-test-results.json` in each story, add the decorator in your `.storybook/preview.js` and results will display for stories that you have set the `jest` parameter on:
```js
import { addDecorator } from '@storybook/react'; // <- or your view layer
@ -114,13 +120,20 @@ addDecorator(
Then in your story:
```js
storiesOf('MyComponent', module)
// Use .addParameters if you want the same tests displayed for all stories of the component
.addParameters({ jest: ['MyComponent', 'MyOtherComponent'] })
.add(
'This story shows test results from MyComponent.test.js and MyOtherComponent.test.js',
() => <div>Jest results in storybook</div>
);
import React from 'react';
export default {
title: 'MyComponent',
};
export const defaultView = () => (
<div>Jest results in storybook</div>
);
defaultView.story = {
parameters: {
jest: ['MyComponent.test.js', 'MyOtherComponent.test.js'],
},
};
```
### Disabling
@ -128,9 +141,20 @@ storiesOf('MyComponent', module)
You can disable the addon for a single story by setting the `jest` parameter to `{disable: true}`:
```js
storiesOf('MyComponent', module).add('Story', () => <div>Jest results disabled here</div>, {
jest: { disable: true },
});
import React from 'react';
export default {
title: 'MyComponent',
};
export const defaultView = () => (
<div>Jest results in storybook</div>
);
defaultView.story = {
parameters: {
jest: { disable: true },
},
};
```
### withTests(options)
@ -153,7 +177,7 @@ declare module '*.json' {
}
```
In your `.storybook/config.ts`:
In your `.storybook/preview.ts`:
```ts
import { addDecorator } from '@storybook/angular';
@ -169,17 +193,6 @@ addDecorator(
);
```
Then in your story:
```js
storiesOf('MyComponent', module)
.addParameters({ jest: ['my.component', 'my-other.component'] })
.add(
'This story shows test results from my.component.spec.ts and my-other.component.spec.ts',
() => <div>Jest results in storybook</div>
);
```
##### Example [here](https://github.com/storybookjs/storybook/tree/master/examples/angular-cli)
## TODO

12
addons/jest/package.json
View File

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

139
addons/knobs/README.md
View File

@ -19,10 +19,12 @@ First of all, you need to install Knobs into your project as a dev dependency.
yarn add @storybook/addon-knobs --dev
```
Then, configure it as an addon by adding it to your `addons.js` file (located in the Storybook config directory).
within `.storybook/main.js`:
```js
import '@storybook/addon-knobs/register';
module.exports = {
addons: ['@storybook/addon-knobs/register']
}
```
Now, write your stories with Knobs.
@ -48,10 +50,10 @@ export const withAButton = () => (
// Knobs as dynamic variables.
export const asDynamicVariables = () => {
const name = text("Name", "Arunoda Susiripala");
const age = number("Age", 89);
const name = text("Name", "James");
const age = number("Age", 35);
const content = `I am ${name} and I'm ${age} years old.`;
return <div>{content}</div>;
};
```
@ -64,18 +66,17 @@ import { withKnobs, text, boolean } from '@storybook/addon-knobs';
import MyButton from './MyButton.vue';
const stories = storiesOf('Storybook Knobs', module);
// Add the `withKnobs` decorator to add knobs support to your stories.
// You can also configure `withKnobs` as a global decorator.
stories.addDecorator(withKnobs);
export default {
title: "Storybook Knobs",
decorators: [withKnobs]
};
// Assign `props` to the story's component, calling
// knob methods within the `default` property of each prop,
// then pass the story's prop data to the component’s prop in
// the template with `v-bind:` or by placing the prop within
// the component’s slot.
stories.add('with a button', () => ({
export const withKnobs = () => ({
components: { MyButton },
props: {
isDisabled: {
@ -86,7 +87,7 @@ stories.add('with a button', () => ({
}
},
template: `<MyButton :isDisabled="isDisabled">{{ text }}</MyButton>`
}));
});
```
MyButton.vue:
@ -116,33 +117,61 @@ import { boolean, number, text, withKnobs } from '@storybook/addon-knobs';
import { Button } from '@storybook/angular/demo';
const stories = storiesOf('Storybook Knobs', module);
export default {
title: "Storybook Knobs",
decorators: [withKnobs]
};
// "withKnobs" decorator should be applied before the stories using knobs
stories.addDecorator(withKnobs);
// Knobs for Angular props
stories.add('with a button', () => ({
export const withKnobs = () => ({
component: Button,
props: {
text: text('text', 'Hello Storybook'), // The first param of the knob function has to be exactly the same as the component input.
text: text('text', 'Hello Storybook'), // The first param of the knob function has to be exactly the same as the component input.
},
}));
});
```
Categorize your Knobs by assigning them a `groupId`. When a `groupId` exists, tabs will appear in the Knobs storybook panel to filter between the groups. Knobs without a `groupId` are automatically categorized into the `ALL` group.
### With Ember
```js
// Knob assigned a groupId.
stories.add('as dynamic variables', () => {
const groupId = 'GROUP-ID1'
const name = text('Name', 'Arunoda Susiripala', groupId);
import { withKnobs, text, boolean } from '@storybook/addon-knobs';
import hbs from 'htmlbars-inline-precompile';
const content = `My name is ${name}.`;
return (<div>{content}</div>);
export default {
title: 'StoryBook with Knobs',
decorators: [withKnobs],
};
export const button = () => ({
template: hbs`
<button disabled={{disabled}}>{{label}}</button>
`,
context: {
label: text('label', 'Hello Storybook'),
disabled: boolean('disabled', false),
},
});
```
## Categorization
Categorize your Knobs by assigning them a `groupId`. When a `groupId` exists, tabs will appear in the Knobs storybook panel to filter between the groups. Knobs without a `groupId` are automatically categorized into the `ALL` group.
```js
export const inGroups = () => {
const personalGroupId = 'personal info';
const generalGroupId = 'general info';
const name = text("Name", "James", personalGroupId);
const age = number("Age", 35, personalGroupId);
const message = text("Hello!", 35, generalGroupId);
const content = `
I am ${name} and I'm ${age} years old.
${message}
`;
return <div>{content}</div>;
};
```
You can see your Knobs in a Storybook panel as shown below.
![](docs/demo.png)
@ -166,7 +195,7 @@ Allows you to get some text from the user.
import { text } from '@storybook/addon-knobs';
const label = 'Your Name';
const defaultValue = 'Arunoda Susiripala';
const defaultValue = 'James';
const groupId = 'GROUP-ID1';
const value = text(label, defaultValue, groupId);
@ -185,6 +214,7 @@ const groupId = 'GROUP-ID1';
const value = boolean(label, defaultValue, groupId);
```
### number
Allows you to get a number from the user.
@ -200,9 +230,11 @@ const value = number(label, defaultValue);
```
For use with `groupId`, pass the default `options` as the third argument.
```
```js
const value = number(label, defaultValue, {}, groupId);
```
### number bound by range
Allows you to get a number from the user using a range slider.
@ -246,7 +278,7 @@ import { object } from '@storybook/addon-knobs';
const label = 'Styles';
const defaultValue = {
backgroundColor: 'red'
backgroundColor: 'red',
};
const groupId = 'GROUP-ID1';
@ -281,8 +313,9 @@ const value = array(label, defaultValue);
> const value = array(label, defaultValue, separator);
> ```
For use with `groupId`, pass the default `separator` as the third argument
```
For use with `groupId`, pass the default `separator` as the third argument.
```js
const value = array(label, defaultValue, ',', groupId);
```
@ -348,9 +381,9 @@ import { radios } from '@storybook/addon-knobs';
const label = 'Fruits';
const options = {
Kiwi: 'kiwi',
Guava: 'guava',
Watermelon: 'watermelon',
Kiwi: 'kiwi',
Guava: 'guava',
Watermelon: 'watermelon',
};
const defaultValue = 'kiwi';
const groupId = 'GROUP-ID1';
@ -454,30 +487,38 @@ withKnobs also accepts two optional options as story parameters.
Usage:
```js
import { storiesOf } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
const stories = storiesOf('Storybook Knobs', module);
export default {
title: 'Storybook Knobs',
decorators: [withKnobs],
};
stories.addDecorator(withKnobs)
stories.add('story name', () => ..., {
knobs: {
timestamps: true, // Doesn't emit events while user is typing.
escapeHTML: true // Escapes strings to be safe for inserting as innerHTML. This option is true by default. It's safe to set it to `false` with frameworks like React which do escaping on their side.
// You can still set it to false, but it's strongly unrecommendend in cases when you host your storybook on some route of your main site or web app.
export const defaultView = () => (
<div />
);
defaultView.story = {
parameters: {
knobs: {
// Doesn't emit events while user is typing.
timestamps: true,
// Escapes strings to be safe for inserting as innerHTML. This option is true by default. It's safe to set it to `false` with frameworks like React which do escaping on their side.
// You can still set it to false, but it's strongly discouraged to set to true in cases when you host your storybook on some route of your main site or web app.
escapeHTML: true,
}
}
});
};
```
## Typescript
If you are using Typescript, make sure you have the type definitions installed for the following libs:
- node
- react
- node
- react
You can install them using:
*assuming you are using Typescript >2.0.*
You can install them using: (*assuming you are using Typescript >2.0.*)
```sh
yarn add @types/node @types/react --dev

14
addons/knobs/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-knobs",
"version": "5.3.0-beta.8",
"version": "5.3.0-beta.10",
"description": "Storybook Addon Prop Editor Component",
"keywords": [
"addon",
@ -29,12 +29,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.8",
"@storybook/api": "5.3.0-beta.8",
"@storybook/client-api": "5.3.0-beta.8",
"@storybook/components": "5.3.0-beta.8",
"@storybook/core-events": "5.3.0-beta.8",
"@storybook/theming": "5.3.0-beta.8",
"@storybook/addons": "5.3.0-beta.10",
"@storybook/api": "5.3.0-beta.10",
"@storybook/client-api": "5.3.0-beta.10",
"@storybook/components": "5.3.0-beta.10",
"@storybook/core-events": "5.3.0-beta.10",
"@storybook/theming": "5.3.0-beta.10",
"@types/react-color": "^3.0.1",
"copy-to-clipboard": "^3.0.8",
"core-js": "^3.0.1",

110
addons/links/README.md
View File

@ -12,25 +12,29 @@ Install this addon by adding the `@storybook/addon-links` dependency:
yarn add -D @storybook/addon-links
```
First configure it as an addon by adding it to your addons.js file (located in the Storybook config directory).
within `.storybook/main.js`:
```js
import '@storybook/addon-links/register';
module.exports = {
addons: ['@storybook/addon-links/register']
}
```
Then you can import `linkTo` in your stories and use like this:
```js
import { storiesOf } from '@storybook/react'
import { linkTo } from '@storybook/addon-links'
storiesOf('Button', module)
.add('First', () => (
<button onClick={linkTo('Button', 'Second')}>Go to "Second"</button>
))
.add('Second', () => (
<button onClick={linkTo('Button', 'First')}>Go to "First"</button>
));
export default {
title: 'Button',
};
export const first = () => (
<button onClick={linkTo('Button', 'second')}>Go to "Second"</button>
);
export const second = () => (
<button onClick={linkTo('Button', 'first')}>Go to "First"</button>
);
```
Have a look at the linkTo function:
@ -45,28 +49,36 @@ linkTo('Toggle') // Links to the first story in the 'Toggle' kind
With that, you can link an event in a component to any story in the Storybook.
- First parameter is the story kind name (what you named with `storiesOf`).
- Second (optional) parameter is the story name (what you named with `.add`).
If the second parameter is omitted, the link will point to the first story in the given kind.
- First parameter is the story kind name (what you named with `title`).
- Second (optional) parameter is the story name (what you named with `exported name`).
If the second parameter is omitted, the link will point to the first story in the given kind.
You can also pass a function instead for any of above parameter. That function accepts arguments emitted by the event and it should return a string:
```js
import { storiesOf } from '@storybook/react';
import { LinkTo, linkTo } from '@storybook/addon-links';
storiesOf('Select', module)
.add('Index', () => (
<select value="Index" onChange={linkTo('Select', e => e.currentTarget.value)}>
<option>Index</option>
<option>First</option>
<option>Second</option>
<option>Third</option>
</select>
))
.add('First', () => <LinkTo story="Index">Go back</LinkTo>)
.add('Second', () => <LinkTo story="Index">Go back</LinkTo>)
.add('Third', () => <LinkTo story="Index">Go back</LinkTo>);
export default {
title: 'Select',
};
export const index = () => (
<select value="Index" onChange={linkTo('Select', e => e.currentTarget.value)}>
<option>index</option>
<option>first</option>
<option>second</option>
<option>third</option>
</select>
);
export const first = () => (
<LinkTo story="index">Go back</LinkTo>
);
export const second = () => (
<LinkTo story="index">Go back</LinkTo>
);
export const third = () => (
<LinkTo story="index">Go back</LinkTo>
);
```
## hrefTo function
@ -74,16 +86,18 @@ storiesOf('Select', module)
If you want to get an URL for a particular story, you may use `hrefTo` function. It returns a promise, which resolves to string containing a relative URL:
```js
import { storiesOf } from '@storybook/react';
import { hrefTo } from '@storybook/addon-links';
import { action } from '@storybook/addon-actions';
storiesOf('Href', module)
.add('log', () => {
hrefTo('Href', 'log').then(action('URL of this story'));
export default {
title: 'Href',
};
return <span>See action logger</span>;
});
export const log = () => {
hrefTo('Href', 'log').then(action('URL of this story'));
return <span>See action logger</span>;
};
```
## withLinks decorator
@ -92,14 +106,16 @@ storiesOf('Href', module)
Here is an example in React, but it works with any framework:
```js
import { storiesOf } from '@storybook/react'
import { withLinks } from '@storybook/addon-links'
storiesOf('Button', module)
.addDecorator(withLinks)
.add('First', () => (
<button data-sb-kind="OtherKind" data-sb-story="OtherStory">Go to "OtherStory"</button>
))
export default {
title: 'Button',
decorators: [withLinks],
};
export const first = () => (
<button data-sb-kind="OtherKind" data-sb-story="otherStory">Go to "OtherStory"</button>
);
```
## LinkTo component (React only)
@ -108,16 +124,18 @@ One possible way of using `hrefTo` is to create a component that uses native `a`
A React implementation of such a component can be imported from `@storybook/addon-links` package:
```js
import { storiesOf } from '@storybook/react';
import LinkTo from '@storybook/addon-links/react';
storiesOf('Link', module)
.add('First', () => (
<LinkTo story="Second">Go to Second</LinkTo>
))
.add('Second', () => (
<LinkTo story="First">Go to First</LinkTo>
));
export default {
title: 'Link',
};
export const first = () => (
<LinkTo story="second">Go to Second</LinkTo>
);
export const second = () => (
<LinkTo story="first">Go to First</LinkTo>
);
```
It accepts all the props the `a` element does, plus `story` and `kind`. It the `kind` prop is omitted, the current kind will be preserved.

10
addons/links/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-links",
"version": "5.3.0-beta.8",
"version": "5.3.0-beta.10",
"description": "Story Links addon for storybook",
"keywords": [
"addon",
@ -29,10 +29,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.8",
"@storybook/client-logger": "5.3.0-beta.8",
"@storybook/core-events": "5.3.0-beta.8",
"@storybook/router": "5.3.0-beta.8",
"@storybook/addons": "5.3.0-beta.10",
"@storybook/client-logger": "5.3.0-beta.10",
"@storybook/core-events": "5.3.0-beta.10",
"@storybook/router": "5.3.0-beta.10",
"core-js": "^3.0.1",
"global": "^4.3.2",
"prop-types": "^15.7.2",

2
addons/links/src/preview.ts
View File

@ -36,7 +36,7 @@ const valueOrCall = (args: string[]) => (value: string | ((...args: string[]) =>
export const linkTo = (
idOrKindInput: string,
storyInput?: string | ((...args: any[]) => string)
) => (...args: string[]) => {
) => (...args: any[]) => {
const resolver = valueOrCall(args);
const { storyId } = storyStore.getSelection();
const current = storyStore.fromId(storyId) || {};

105
addons/notes/README.md
View File

@ -14,81 +14,34 @@ Storybook Addon Notes allows you to write notes (text or HTML) for your stories
yarn add -D @storybook/addon-notes
```
Then create a file called `addons.js` in your Storybook config.
Add following content to it:
within `.storybook/main.js`:
```js
// register the notes addon as a tab
import '@storybook/addon-notes/register';
// or register the notes addon as a panel. Only one can be used!
import '@storybook/addon-notes/register-panel';
module.exports = {
addons: ['@storybook/addon-notes/register']
}
```
Alternatively register the notes addon into a panel. Choose only one, not both.
```js
module.exports = {
addons: ['@storybook/addon-notes/register-panel']
}
```
Now, you can use the `notes` parameter to add a note to each story.
### With React
```js
import { storiesOf } from '@storybook/react';
import Component from './Component';
storiesOf('Component', module).add('with some emoji', () => <Component />, {
notes: 'An example of addon notes',
});
```
### With Vue
```js
import { storiesOf } from '@storybook/vue';
import MyButton from './MyButton.vue';
storiesOf('MyButton', module).add(
'with some emoji',
() => ({
components: { MyButton },
template: '<my-button>😀 😎 👍 💯</my-button>',
}),
{
notes: 'An example of addon notes',
}
);
```
### With Angular
```js
import { storiesOf } from '@storybook/vue';
import { ButtonComponent } from './button.component';
storiesOf('Button', module).add(
'with some emoji',
() => ({
component: ButtonComponent,
props: {
text: '😀 😎 👍 💯'
}
}),
{
notes: 'An example of addon notes',
}
);
```
### Upgrading to CSF Format
Add `notes` to the `parameters` object:
```js
export default {
title: 'Component',
parameters: {
notes: 'My notes',
}
}
notes: 'some documentation here',
},
};
```
## Using Markdown
@ -96,13 +49,19 @@ export default {
Using Markdown in your notes is supported, Storybook will load Markdown as raw by default.
```js
import { storiesOf } from '@storybook/react';
import Component from './Component';
import markdownNotes from './someMarkdownText.md';
import markdown from './someMarkdownText.md';
storiesOf('Component', module).add('With Markdown', () => <Component />, {
notes: { markdown: markdownNotes },
});
export default {
title: 'Component',
};
export const withMarkdown = () => <Component />;
withmarkdown.story = {
parameters: {
notes: { markdown },
}
};
```
## Giphy
@ -122,10 +81,14 @@ If you need to display different notes for different consumers of your storybook
```js
import { storiesOf } from '@storybook/react';
import Component from './Component';
import intro from './intro.md';
import design from './design.md';
storiesOf('Component', module).add('With Markdown', () => <Component />, {
notes: { Introduction: intro, 'Design Notes': design },
});
export default {
title: 'Component',
parameters: {
notes: { Introduction: intro, 'Design Notes': design },
},
};
```

16
addons/notes/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-notes",
"version": "5.3.0-beta.8",
"version": "5.3.0-beta.10",
"description": "Write notes for your Storybook stories.",
"keywords": [
"addon",
@ -30,13 +30,13 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.8",
"@storybook/api": "5.3.0-beta.8",
"@storybook/client-logger": "5.3.0-beta.8",
"@storybook/components": "5.3.0-beta.8",
"@storybook/core-events": "5.3.0-beta.8",
"@storybook/router": "5.3.0-beta.8",
"@storybook/theming": "5.3.0-beta.8",
"@storybook/addons": "5.3.0-beta.10",
"@storybook/api": "5.3.0-beta.10",
"@storybook/client-logger": "5.3.0-beta.10",
"@storybook/components": "5.3.0-beta.10",
"@storybook/core-events": "5.3.0-beta.10",
"@storybook/router": "5.3.0-beta.10",
"@storybook/theming": "5.3.0-beta.10",
"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.3.0-beta.8",
"version": "5.3.0-beta.10",
"description": "Action Logger addon for react-native storybook",
"keywords": [
"storybook"
@ -26,13 +26,13 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.8",
"@storybook/core-events": "5.3.0-beta.8",
"@storybook/addons": "5.3.0-beta.10",
"@storybook/core-events": "5.3.0-beta.10",
"core-js": "^3.0.1",
"fast-deep-equal": "^2.0.1"
},
"devDependencies": {
"@storybook/addon-actions": "5.3.0-beta.8"
"@storybook/addon-actions": "5.3.0-beta.10"
},
"peerDependencies": {
"@storybook/addon-actions": "*",

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

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-ondevice-backgrounds",
"version": "5.3.0-beta.8",
"version": "5.3.0-beta.10",
"description": "A react-native storybook addon to show different backgrounds for your preview",
"keywords": [
"addon",
@ -31,9 +31,9 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.8",
"@storybook/api": "5.3.0-beta.8",
"@storybook/client-api": "5.3.0-beta.8",
"@storybook/addons": "5.3.0-beta.10",
"@storybook/api": "5.3.0-beta.10",
"@storybook/client-api": "5.3.0-beta.10",
"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.3.0-beta.8",
"version": "5.3.0-beta.10",
"description": "Display storybook story knobs on your deviced.",
"keywords": [
"addon",
@ -28,8 +28,8 @@
},
"dependencies": {
"@emotion/native": "^10.0.14",
"@storybook/addons": "5.3.0-beta.8",
"@storybook/core-events": "5.3.0-beta.8",
"@storybook/addons": "5.3.0-beta.10",
"@storybook/core-events": "5.3.0-beta.10",
"core-js": "^3.0.1",
"deep-equal": "^1.0.1",
"prop-types": "^15.7.2",

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

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-ondevice-notes",
"version": "5.3.0-beta.8",
"version": "5.3.0-beta.10",
"description": "Write notes for your react-native Storybook stories.",
"keywords": [
"addon",
@ -28,11 +28,11 @@
},
"dependencies": {
"@emotion/core": "^10.0.20",
"@storybook/addons": "5.3.0-beta.8",
"@storybook/api": "5.3.0-beta.8",
"@storybook/client-api": "5.3.0-beta.8",
"@storybook/client-logger": "5.3.0-beta.8",
"@storybook/core-events": "5.3.0-beta.8",
"@storybook/addons": "5.3.0-beta.10",
"@storybook/api": "5.3.0-beta.10",
"@storybook/client-api": "5.3.0-beta.10",
"@storybook/client-logger": "5.3.0-beta.10",
"@storybook/core-events": "5.3.0-beta.10",
"core-js": "^3.0.1",
"prop-types": "^15.7.2",
"react-native-simple-markdown": "^1.1.0"

137
addons/options/README.md
View File

@ -1,136 +1,3 @@
#NOTE: Options Addon is deprecated as of Storybook 5.0
# Options Addon is deprecated as of Storybook 5.0
Options are now configured using the [`options` parameter](../../docs/src/pages/configurations/options-parameter/index.md) which is built into Storybook.
- Global options: `addParameters({ options: { ... }})` and no addon is needed.
- Story options: `storiesOf(...).add('name', storyFn, { options: { ... }})`
See the [migration docs](../../MIGRATION.md#options-addon-deprecated) for what's changed.
# Storybook Options Addon
The Options addon can be used to (re-)configure the [Storybook](https://storybook.js.org) UI at runtime.
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/options/docs/screenshot.png)
## Getting Started
First, install the addon
```sh
yarn add @storybook/addon-options --dev
```
Add this line to your `addons.js` file (create this file inside your storybook config directory if needed).
```js
import '@storybook/addon-options/register';
```
### Set options globally
Import and use the `addParameters` + `options`-key in your `config.js` file.
```js
import { addParameters, configure } from '@storybook/react';
// Option defaults:
addParameters({
options: {
/**
* name to display in the top left corner
* @type {String}
*/
name: 'Storybook',
/**
* URL for name in top left corner to link to
* @type {String}
*/
url: '#',
/**
* show story component as full screen
* @type {Boolean}
*/
goFullScreen: false,
/**
* display panel that shows a list of stories
* @type {Boolean}
*/
showStoriesPanel: true,
/**
* display panel that shows addon configurations
* @type {Boolean}
*/
showAddonPanel: true,
/**
* display floating search box to search through stories
* @type {Boolean}
*/
showSearchBox: false,
/**
* show addon panel as a vertical panel on the right
* @type {Boolean}
*/
addonPanelInRight: false,
/**
* display the top-level grouping as a "root" in the sidebar
* @type {Boolean}
*/
showRoots: null,
/**
* sidebar tree animations
* @type {Boolean}
*/
sidebarAnimations: true,
/**
* id to select an addon panel
* @type {String}
*/
selectedPanel: undefined, // The order of addons in the "Addon panel" is the same as you import them in 'addons.js'. The first panel will be opened by default as you run Storybook
/**
* enable/disable shortcuts
* @type {Boolean}
*/
enableShortcuts: false, // true by default
/**
* show/hide tool bar
* @type {Boolean}
*/
isToolshown: false, // true by default
},
});
configure(() => require('./stories'), module);
```
### Using per-story options
The options-addon accepts story parameters on the `options` key:
```js
import { storiesOf } from '@storybook/react';
import MyComponent from './my-component';
storiesOf('Addons|Custom options', module)
// If you want to set the option for all stories in of this kind
.addParameters({ options: { addonPanelInRight: true } })
.add(
'Story for MyComponent',
() => <MyComponent />,
// If you want to set the options for a specific story
{ options: { addonPanelInRight: false } }
);
```
## TypeScript
To install type definitions: `yarn add @types/storybook__addon-options --dev`
Make sure you also have the type definitions installed for the following libs:
- Node
- React
You can install them using `yarn add @types/node @types/react --dev`, assuming you are using TypeScript >2.0.
Please read https://storybook.js.org/docs/configurations/options-parameter/ to learn about storybook's options and setting them.

4
addons/options/package.json
View File

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

16
addons/options/src/register.ts
View File

@ -1,10 +1,14 @@
import addons from '@storybook/addons';
import deprecate from 'util-deprecate';
import EVENTS, { ADDON_ID } from './constants';
addons.register(ADDON_ID, api => {
const channel = addons.getChannel();
addons.register(
ADDON_ID,
deprecate(api => {
const channel = addons.getChannel();
channel.on(EVENTS.SET, data => {
api.setOptions(data.options);
});
});
channel.on(EVENTS.SET, data => {
api.setOptions(data.options);
});
}, 'storybook-addon-options is deprecated and will stop working soon')
);

14
addons/queryparams/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-queryparams",
"version": "5.3.0-beta.8",
"version": "5.3.0-beta.10",
"description": "parameter addon for storybook",
"keywords": [
"addon",
@ -30,12 +30,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.8",
"@storybook/api": "5.3.0-beta.8",
"@storybook/client-logger": "5.3.0-beta.8",
"@storybook/components": "5.3.0-beta.8",
"@storybook/core-events": "5.3.0-beta.8",
"@storybook/theming": "5.3.0-beta.8",
"@storybook/addons": "5.3.0-beta.10",
"@storybook/api": "5.3.0-beta.10",
"@storybook/client-logger": "5.3.0-beta.10",
"@storybook/components": "5.3.0-beta.10",
"@storybook/core-events": "5.3.0-beta.10",
"@storybook/theming": "5.3.0-beta.10",
"core-js": "^3.0.1",
"global": "^4.3.2",
"qs": "^6.6.0",

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

@ -385,7 +385,7 @@ Whenever you change you're data requirements by adding (and rendering) or (accid
### `config`
The `config` parameter must be a function that helps to configure storybook like the `config.js` does.
The `config` parameter must be a function that helps to configure storybook like the `preview.js` does.
If it's not specified, storyshots will try to use [configPath](#configPath) parameter.
```js
@ -425,8 +425,8 @@ import initStoryshots from '@storybook/addon-storyshots';
initStoryshots({ configPath: path.resolve(__dirname, '../../.storybook') });
```
`configPath` can also specify path to the `config.js` itself. In this case, config directory will be
a base directory of the `configPath`. It may be useful when the `config.js` for test should differ from the
`configPath` can also specify path to the `preview.js` itself. In this case, config directory will be
a base directory of the `configPath`. It may be useful when the `preview.js` for test should differ from the
original one. It also may be useful for separating tests to different test configs:
```js

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

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storyshots",
"version": "5.3.0-beta.8",
"version": "5.3.0-beta.10",
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
"keywords": [
"addon",
@ -33,9 +33,9 @@
},
"dependencies": {
"@jest/transform": "^24.9.0",
"@storybook/addons": "5.3.0-beta.8",
"@storybook/client-api": "5.3.0-beta.8",
"@storybook/core": "5.3.0-beta.8",
"@storybook/addons": "5.3.0-beta.10",
"@storybook/client-api": "5.3.0-beta.10",
"@storybook/core": "5.3.0-beta.10",
"@types/glob": "^7.1.1",
"@types/jest": "^24.0.16",
"@types/jest-specific-snapshot": "^0.5.3",
@ -49,8 +49,8 @@
"ts-dedent": "^1.1.0"
},
"devDependencies": {
"@storybook/addon-docs": "5.3.0-beta.8",
"@storybook/react": "5.3.0-beta.8",
"@storybook/addon-docs": "5.3.0-beta.10",
"@storybook/react": "5.3.0-beta.10",
"babel-loader": "^8.0.6",
"enzyme-to-json": "^3.4.1",
"jest-emotion": "^10.0.17",

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