mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 20:41:07 +08:00
Merge branch 'next' into add/design-system
This commit is contained in:
Norbert de Langen
GitHub
commit
91a062355f
@ -62,7 +62,6 @@ module.exports = {
|
||||
['@babel/plugin-proposal-class-properties', { loose: true }],
|
||||
'babel-plugin-macros',
|
||||
['emotion', { sourceMap: true, autoLabel: true }],
|
||||
'@babel/plugin-transform-react-constant-elements',
|
||||
'babel-plugin-add-react-displayname',
|
||||
],
|
||||
env: {
|
||||
|
||||
112
CHANGELOG.md
112
CHANGELOG.md
@ -1,3 +1,115 @@
|
||||
## 6.0.0-beta.31 (June 17, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- React: Fix react-docgen for JS files ([#11217](https://github.com/storybookjs/storybook/pull/11217))
|
||||
- React: Load root tsconfig.json into docgen-typescript if none provided ([#11184](https://github.com/storybookjs/storybook/pull/11184))
|
||||
- Composition: Remove manual redirects ([#11196](https://github.com/storybookjs/storybook/pull/11196))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Bump react-draggable from 4.4.2 to 4.4.3 ([#11192](https://github.com/storybookjs/storybook/pull/11192))
|
||||
|
||||
## 6.0.0-beta.30 (June 16, 2020)
|
||||
|
||||
### Features
|
||||
|
||||
- MDX: Support function.bind({}) syntax ([#11198](https://github.com/storybookjs/storybook/pull/11198))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Addon-docs: Remove render preprocessing for react components w/o docgen ([#11195](https://github.com/storybookjs/storybook/pull/11195))
|
||||
- Core: Fix addon load order ([#11178](https://github.com/storybookjs/storybook/pull/11178))
|
||||
- Core: Add global box-sizing setting. Fixes #10207 ([#11055](https://github.com/storybookjs/storybook/pull/11055))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Addon-controls: Add examples to angular, ember, html, svelte, vue, web-components ([#11197](https://github.com/storybookjs/storybook/pull/11197))
|
||||
|
||||
## 6.0.0-beta.29 (June 16, 2020)
|
||||
|
||||
### Features
|
||||
|
||||
- Addon-docs: Add syntax highlighting to Code and Description blocks ([#11183](https://github.com/storybookjs/storybook/pull/11183))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- MDX: Don't use root babelrc by default ([#11185](https://github.com/storybookjs/storybook/pull/11185))
|
||||
- Addon-docs: Fix 'show source' for stories with dynamic title ([#10959](https://github.com/storybookjs/storybook/pull/10959))
|
||||
|
||||
## 6.0.0-beta.28 (June 15, 2020)
|
||||
|
||||
### Features
|
||||
|
||||
- Addon-docs: Add argTypes type/control shorthand ([#11174](https://github.com/storybookjs/storybook/pull/11174))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Remove boxSizing to fix weird CSS layouts ([#11175](https://github.com/storybookjs/storybook/pull/11175))
|
||||
- Addon-docs: Fix forwardRef & invalid hook call ([#11154](https://github.com/storybookjs/storybook/pull/11154))
|
||||
- Client-API: Add @types/qs typings ([#11162](https://github.com/storybookjs/storybook/pull/11162))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- CLI: Colocate stories and components, centralize main.js ([#11136](https://github.com/storybookjs/storybook/pull/11136))
|
||||
- Build: Exclude stories from collecting coverage ([#11164](https://github.com/storybookjs/storybook/pull/11164))
|
||||
- Core: Extend router/utils test set ([#11156](https://github.com/storybookjs/storybook/pull/11156))
|
||||
|
||||
## 6.0.0-beta.27 (June 14, 2020)
|
||||
|
||||
### Maintenance
|
||||
|
||||
- UI: Remove unused modules ([#11159](https://github.com/storybookjs/storybook/pull/11159))
|
||||
- UI: Remove unused & duplicated code ([#11155](https://github.com/storybookjs/storybook/pull/11155))
|
||||
- REMOVE unused dependencies && FIX versions ([#11143](https://github.com/storybookjs/storybook/pull/11143))
|
||||
|
||||
## 6.0.0-beta.26 (June 12, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Addon-docs: Fix Vue args rendering in Docs mode ([#11138](https://github.com/storybookjs/storybook/pull/11138))
|
||||
- Typescript: Fix mandatory typescript dependency ([#11140](https://github.com/storybookjs/storybook/pull/11140))
|
||||
|
||||
## 6.0.0-beta.25 (June 11, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Composition: Fix auto refs when there are no specified refs ([#11057](https://github.com/storybookjs/storybook/pull/11057))
|
||||
|
||||
## 6.0.0-beta.24 (June 11, 2020)
|
||||
|
||||
### Breaking Changes
|
||||
|
||||
- Components: Remove PropsTable, clean ArgsTable stories ([#11105](https://github.com/storybookjs/storybook/pull/11105))
|
||||
|
||||
### Features
|
||||
|
||||
- React: Switch react-docgen-typescript-loader to react-docgen-typescript-plugin ([#11106](https://github.com/storybookjs/storybook/pull/11106))
|
||||
- Vue: Add first-class args support ([#11115](https://github.com/storybookjs/storybook/pull/11115))
|
||||
- Core: Add babel plugin for typescript decorators ([#11063](https://github.com/storybookjs/storybook/pull/11063))
|
||||
- CLI: Pass --quiet to disable HMR logging in browser console ([#11087](https://github.com/storybookjs/storybook/pull/11087))
|
||||
- Addon-knobs: Add number of knobs to tab title ([#11075](https://github.com/storybookjs/storybook/pull/11075))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Fix package duplication issues by aliasing all storybook packages ([#11092](https://github.com/storybookjs/storybook/pull/11092))
|
||||
- hidden) canvas ([#10599](https://github.com/storybookjs/storybook/pull/10599))
|
||||
- Core: Fix loglevel filtering ([#11096](https://github.com/storybookjs/storybook/pull/11096))
|
||||
- Core: Remove @babel/plugin-transform-react-constant-elements ([#11086](https://github.com/storybookjs/storybook/pull/11086))
|
||||
- UI: Fix search in production mode ([#10917](https://github.com/storybookjs/storybook/pull/10917))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- CLI: Refactor to simplify works with multiple package managers ([#11074](https://github.com/storybookjs/storybook/pull/11074))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- chore(deps-dev): bump protractor from 5.4.4 to 7.0.0 ([#10832](https://github.com/storybookjs/storybook/pull/10832))
|
||||
- build(deps): [security] bump websocket-extensions from 0.1.3 to 0.1.4 ([#11056](https://github.com/storybookjs/storybook/pull/11056))
|
||||
- build(deps): bump @babel/plugin-transform-shorthand-properties from 7.8.3 to 7.10.1 ([#11088](https://github.com/storybookjs/storybook/pull/11088))
|
||||
- build(deps-dev): bump tslib from 1.13.0 to 2.0.0 ([#11089](https://github.com/storybookjs/storybook/pull/11089))
|
||||
- build(deps-dev): bump @packtracker/webpack-plugin from 2.2.0 to 2.3.0 ([#11091](https://github.com/storybookjs/storybook/pull/11091))
|
||||
|
||||
## 6.0.0-beta.23 (June 8, 2020)
|
||||
|
||||
### Features
|
||||
|
||||
@ -193,8 +193,8 @@ If you're looking for material to use in your presentation about storybook, like
|
||||
We welcome contributions to Storybook!
|
||||
|
||||
- 📥 Pull requests and 🌟 Stars are always welcome.
|
||||
- Read our [contributing guide](CONTRIBUTING.md) to get started.
|
||||
or find us on [Discord](https://discord.gg/sMFvFsG), we're will take the time to guide you
|
||||
- Read our [contributing guide](CONTRIBUTING.md) to get started,
|
||||
or find us on [Discord](https://discord.gg/sMFvFsG), we will take the time to guide you
|
||||
|
||||
Looking for a first issue to tackle?
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "a11y addon for storybook",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -33,14 +33,14 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.23",
|
||||
"@storybook/api": "6.0.0-beta.23",
|
||||
"@storybook/channels": "6.0.0-beta.23",
|
||||
"@storybook/client-api": "6.0.0-beta.23",
|
||||
"@storybook/client-logger": "6.0.0-beta.23",
|
||||
"@storybook/components": "6.0.0-beta.23",
|
||||
"@storybook/core-events": "6.0.0-beta.23",
|
||||
"@storybook/theming": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"@storybook/api": "6.0.0-beta.31",
|
||||
"@storybook/channels": "6.0.0-beta.31",
|
||||
"@storybook/client-api": "6.0.0-beta.31",
|
||||
"@storybook/client-logger": "6.0.0-beta.31",
|
||||
"@storybook/components": "6.0.0-beta.31",
|
||||
"@storybook/core-events": "6.0.0-beta.31",
|
||||
"@storybook/theming": "6.0.0-beta.31",
|
||||
"axe-core": "^3.5.2",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "Action Logger addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -28,12 +28,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.23",
|
||||
"@storybook/api": "6.0.0-beta.23",
|
||||
"@storybook/client-api": "6.0.0-beta.23",
|
||||
"@storybook/components": "6.0.0-beta.23",
|
||||
"@storybook/core-events": "6.0.0-beta.23",
|
||||
"@storybook/theming": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"@storybook/api": "6.0.0-beta.31",
|
||||
"@storybook/client-api": "6.0.0-beta.31",
|
||||
"@storybook/components": "6.0.0-beta.31",
|
||||
"@storybook/core-events": "6.0.0-beta.31",
|
||||
"@storybook/theming": "6.0.0-beta.31",
|
||||
"core-js": "^3.0.1",
|
||||
"fast-deep-equal": "^3.1.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"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": "6.0.0-beta.23",
|
||||
"@storybook/api": "6.0.0-beta.23",
|
||||
"@storybook/client-logger": "6.0.0-beta.23",
|
||||
"@storybook/components": "6.0.0-beta.23",
|
||||
"@storybook/core-events": "6.0.0-beta.23",
|
||||
"@storybook/theming": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"@storybook/api": "6.0.0-beta.31",
|
||||
"@storybook/client-logger": "6.0.0-beta.31",
|
||||
"@storybook/components": "6.0.0-beta.31",
|
||||
"@storybook/core-events": "6.0.0-beta.31",
|
||||
"@storybook/theming": "6.0.0-beta.31",
|
||||
"core-js": "^3.0.1",
|
||||
"memoizerific": "^1.11.3",
|
||||
"react": "^16.8.3",
|
||||
|
||||
@ -28,11 +28,13 @@ Controls replaces [Storybook Knobs](https://github.com/storybookjs/storybook/tre
|
||||
- [Auto-generated args](#auto-generated-args)
|
||||
- [Custom controls args](#custom-controls-args)
|
||||
- [Fully custom args](#fully-custom-args)
|
||||
- [Angular](#angular)
|
||||
- [Template stories](#template-stories)
|
||||
- [Configuration](#configuration)
|
||||
- [Control annotations](#control-annotations)
|
||||
- [Parameters](#parameters)
|
||||
- [Expanded: show property documentation](#expanded-show-property-documentation)
|
||||
- [Hide NoControls warning](#hide-nocontrols-warning)
|
||||
- [Framework support](#framework-support)
|
||||
- [FAQs](#faqs)
|
||||
- [How will this replace addon-knobs?](#how-will-this-replace-addon-knobs)
|
||||
@ -186,7 +188,7 @@ export default {
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
argTypes: {
|
||||
background: { control: { type: 'color' } },
|
||||
background: { control: 'color' },
|
||||
},
|
||||
};
|
||||
|
||||
@ -200,6 +202,8 @@ This generates the following UI, which is what we wanted in the first place:
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/next/addons/controls/docs/media/addon-controls-args-background-color.png" width="80%" />
|
||||
</center>
|
||||
|
||||
> **NOTE:** `@storybook/addon-docs` provide shorthand for `type` and `control` fields, so in the previous example, `control: 'color'` is shorthand `control: { type: 'color' }`. Similarly, `type: 'number'` can be written as shorthand for `type: { name: 'number' }`.
|
||||
|
||||
### Fully custom args
|
||||
|
||||
Up until now, we've only been using auto-generated controls based on the component we're writing stories for. What happens when we want a control for something that's not part of the story?
|
||||
@ -242,7 +246,7 @@ This generates the following UI with a custom range slider:
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/next/addons/controls/docs/media/addon-controls-args-reflow-slider.png" width="80%" />
|
||||
</center>
|
||||
|
||||
**Note:** If you add an `ArgType` that is not part of the component, Storybook will *only* use your argTypes definitions.
|
||||
**Note:** If you add an `ArgType` that is not part of the component, Storybook will _only_ use your argTypes definitions.
|
||||
If you want to merge new controls with the existing component properties, you must enable this parameter:
|
||||
|
||||
```jsx
|
||||
@ -257,11 +261,10 @@ To achieve this within an angular-cli build.
|
||||
export const Reflow = ({ count, label, ...args }) => ({
|
||||
props: {
|
||||
label: label,
|
||||
count: [...Array(count).keys()]
|
||||
count: [...Array(count).keys()],
|
||||
},
|
||||
template: `<Button *ngFor="let i of count">{{label}} {{i}}</Button>`
|
||||
}
|
||||
);
|
||||
template: `<Button *ngFor="let i of count">{{label}} {{i}}</Button>`,
|
||||
});
|
||||
Reflow.args = { count: 3, label: 'reflow' };
|
||||
```
|
||||
|
||||
@ -276,17 +279,22 @@ export const VeryLongLabel = (args) => <Button {...args} />;
|
||||
VeryLongLabel.args = { label: 'this is a very long string', background: '#ff0' };
|
||||
```
|
||||
|
||||
This works, but it repeats code. What we want is to reuse the `Basic` story, but with a different initial state. In Storybook we do this idiomatically for Args stories:
|
||||
This works, but it repeats code. What we want is to reuse the `Basic` story, but with a different initial state. In Storybook we do this idiomatically for Args stories by refactoring the first story into a reusable story function and then `.bind`ing it to create a duplicate object on which to hang `args`:
|
||||
|
||||
```jsx
|
||||
export const VeryLongLabel = Basic.bind();
|
||||
const ButtonStory = (args) => <Button {...args} />;
|
||||
|
||||
export const Basic = ButtonStory.bind({});
|
||||
Basic.args = { label: 'hello', background: '#ff0' };
|
||||
|
||||
export const VeryLongLabel = ButtonStory.bind({});
|
||||
VeryLongLabel.args = { label: 'this is a very long string', background: '#ff0' };
|
||||
```
|
||||
|
||||
We can even reuse initial args from other stories:
|
||||
|
||||
```jsx
|
||||
export const VeryLongLabel = Basic.bind();
|
||||
export const VeryLongLabel = ButtonStory.bind({});
|
||||
VeryLongLabel.args = { ...Basic.args, label: 'this is a very long string' };
|
||||
```
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-controls",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "Controls for component properties",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -30,11 +30,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.23",
|
||||
"@storybook/api": "6.0.0-beta.23",
|
||||
"@storybook/client-api": "6.0.0-beta.23",
|
||||
"@storybook/components": "6.0.0-beta.23",
|
||||
"@storybook/theming": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"@storybook/api": "6.0.0-beta.31",
|
||||
"@storybook/client-api": "6.0.0-beta.31",
|
||||
"@storybook/components": "6.0.0-beta.31",
|
||||
"@storybook/theming": "6.0.0-beta.31",
|
||||
"core-js": "^3.0.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -34,7 +34,7 @@ export const ControlsPanel: FC = () => {
|
||||
PARAM_KEY,
|
||||
{}
|
||||
);
|
||||
const hasControls = Object.values(rows).filter((argType) => argType?.control?.type).length > 0;
|
||||
const hasControls = Object.values(rows).filter((argType) => !!argType?.control).length > 0;
|
||||
return (
|
||||
<>
|
||||
{hasControls || hideNoControlsWarning ? null : <NoControlsWarning />}
|
||||
|
||||
@ -2,12 +2,7 @@ import { useArgTypes } from '@storybook/api';
|
||||
|
||||
export function getTitle(): string {
|
||||
const rows = useArgTypes();
|
||||
|
||||
const controlsCount = Object.values(rows).filter((argType) => argType?.control?.type).length;
|
||||
|
||||
if (controlsCount === 0) {
|
||||
return 'Controls';
|
||||
}
|
||||
|
||||
return `Controls (${controlsCount})`;
|
||||
const controlsCount = Object.values(rows).filter((argType) => argType?.control).length;
|
||||
const suffix = controlsCount === 0 ? '' : ` (${controlsCount})`;
|
||||
return `Controls${suffix}`;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-cssresources",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "A storybook addon to switch between css resources at runtime for your story",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -32,11 +32,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.23",
|
||||
"@storybook/api": "6.0.0-beta.23",
|
||||
"@storybook/components": "6.0.0-beta.23",
|
||||
"@storybook/core-events": "6.0.0-beta.23",
|
||||
"@storybook/theming": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"@storybook/api": "6.0.0-beta.31",
|
||||
"@storybook/components": "6.0.0-beta.31",
|
||||
"@storybook/core-events": "6.0.0-beta.31",
|
||||
"@storybook/theming": "6.0.0-beta.31",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-design-assets",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "Design asset preview for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -34,12 +34,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.23",
|
||||
"@storybook/api": "6.0.0-beta.23",
|
||||
"@storybook/client-logger": "6.0.0-beta.23",
|
||||
"@storybook/components": "6.0.0-beta.23",
|
||||
"@storybook/core-events": "6.0.0-beta.23",
|
||||
"@storybook/theming": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"@storybook/api": "6.0.0-beta.31",
|
||||
"@storybook/client-logger": "6.0.0-beta.31",
|
||||
"@storybook/components": "6.0.0-beta.31",
|
||||
"@storybook/core-events": "6.0.0-beta.31",
|
||||
"@storybook/theming": "6.0.0-beta.31",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3",
|
||||
|
||||
@ -173,9 +173,9 @@ import { addParameters } from '@storybook/vue';
|
||||
|
||||
addParameters({
|
||||
docs: {
|
||||
prepareForInline: (storyFn) => {
|
||||
prepareForInline: (storyFn, { args }) => {
|
||||
const Story = toReact(storyFn());
|
||||
return <Story />;
|
||||
return <Story {...args} />;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@ -88,15 +88,15 @@ import toReact from '@egoist/vue-to-react';
|
||||
addParameters({
|
||||
docs: {
|
||||
// `container`, `page`, etc. here
|
||||
prepareForInline: (storyFn) => {
|
||||
prepareForInline: (storyFn, { args }) => {
|
||||
const Story = toReact(storyFn());
|
||||
return <Story />;
|
||||
return <Story {...args} />;
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
The input is the story function, and the output is a React element, because we render docs pages in react. In the case of Vue, all of the work is done by the `@egoist/vue-to-react` library. If there's no analogous library for your framework, you may need to figure it out yourself!
|
||||
The input is the story function and the story context (id, parameters, args, etc.), and the output is a React element, because we render docs pages in react. In the case of Vue, all of the work is done by the `@egoist/vue-to-react` library. If there's no analogous library for your framework, you may need to figure it out yourself!
|
||||
|
||||
## More resources
|
||||
|
||||
|
||||
@ -12,6 +12,7 @@ Storybook Docs automatically generates props tables for components in supported
|
||||
- [Controls](#controls)
|
||||
- [Customization](#customization)
|
||||
- [Customizing ArgTypes](#customizing-argtypes)
|
||||
- [Custom ArgTypes in MDX](#custom-argtypes-in-mdx)
|
||||
- [Reporting a bug](#reporting-a-bug)
|
||||
- [Known limitations](#known-limitations)
|
||||
- [More resources](#more-resources)
|
||||
@ -149,13 +150,13 @@ export default {
|
||||
label: {
|
||||
description: 'overwritten description',
|
||||
table: {
|
||||
type: { summary: 'something short' detail: 'something really really long' },
|
||||
type: { summary: 'something short', detail: 'something really really long' },
|
||||
},
|
||||
control: {
|
||||
type: null
|
||||
}
|
||||
}
|
||||
}
|
||||
type: null,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@ -169,7 +170,7 @@ const argTypes = {
|
||||
defaultValue: 'Hello',
|
||||
description: 'overwritten description',
|
||||
table: {
|
||||
type: { summary: 'something short' detail: 'something really really long' },
|
||||
type: { summary: 'something short', detail: 'something really really long' },
|
||||
defaultValue: { summary: 'Hello' },
|
||||
}
|
||||
control: {
|
||||
@ -181,6 +182,11 @@ const argTypes = {
|
||||
|
||||
This would render a row with a modified description, a type display with a dropdown that shows the detail, and no control.
|
||||
|
||||
> **NOTE:** `@storybook/addon-docs` provide shorthand for common tasks:
|
||||
>
|
||||
> - `type: 'number'` is shorthand for `type: { name: 'number' }`
|
||||
> - `control: 'radio'` is shorthand for `control: { type: 'radio' }`
|
||||
|
||||
Controls customization has an entire section in the [`addon-controls` README](https://github.com/storybookjs/storybook/blob/next/addons/controls/README.md#configuration).
|
||||
|
||||
Here are the possible customizations for the rest of the prop table:
|
||||
@ -196,6 +202,32 @@ Here are the possible customizations for the rest of the prop table:
|
||||
| `table.defaultValue.detail` | A longer version of the default value (if it's a complex value) |
|
||||
| `control` | See [`addon-controls` README](https://github.com/storybookjs/storybook/blob/next/addons/controls/README.md#configuration) |
|
||||
|
||||
### Custom ArgTypes in MDX
|
||||
|
||||
To do the equivalent of the above customization [in MDX](./mdx.md), use the following.
|
||||
|
||||
Overriding at the component level:
|
||||
|
||||
```jsx
|
||||
<Meta
|
||||
title="MyComponent"
|
||||
component={MyComponent}
|
||||
argTypes={{
|
||||
label: { name: 'label' /* ... */ },
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
And at the story level:
|
||||
|
||||
```jsx
|
||||
<Story name="some story" argTypes={{
|
||||
label: { name: 'label', ... }
|
||||
}}>
|
||||
{/* story contents */}
|
||||
</Story>
|
||||
```
|
||||
|
||||
## Reporting a bug
|
||||
|
||||
Extracting component properties from source is a tricky problem with thousands of corner cases. We've designed this package and its tests to accurately isolate problems, since the cause could either be in this package or (likely) one of the packages it depends on.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "Superior documentation for your components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -48,18 +48,18 @@
|
||||
"@mdx-js/loader": "^1.5.1",
|
||||
"@mdx-js/mdx": "^1.5.1",
|
||||
"@mdx-js/react": "^1.5.1",
|
||||
"@storybook/addons": "6.0.0-beta.23",
|
||||
"@storybook/api": "6.0.0-beta.23",
|
||||
"@storybook/client-api": "6.0.0-beta.23",
|
||||
"@storybook/client-logger": "6.0.0-beta.23",
|
||||
"@storybook/components": "6.0.0-beta.23",
|
||||
"@storybook/core": "6.0.0-beta.23",
|
||||
"@storybook/core-events": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"@storybook/api": "6.0.0-beta.31",
|
||||
"@storybook/client-api": "6.0.0-beta.31",
|
||||
"@storybook/client-logger": "6.0.0-beta.31",
|
||||
"@storybook/components": "6.0.0-beta.31",
|
||||
"@storybook/core": "6.0.0-beta.31",
|
||||
"@storybook/core-events": "6.0.0-beta.31",
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/node-logger": "6.0.0-beta.23",
|
||||
"@storybook/postinstall": "6.0.0-beta.23",
|
||||
"@storybook/source-loader": "6.0.0-beta.23",
|
||||
"@storybook/theming": "6.0.0-beta.23",
|
||||
"@storybook/node-logger": "6.0.0-beta.31",
|
||||
"@storybook/postinstall": "6.0.0-beta.31",
|
||||
"@storybook/source-loader": "6.0.0-beta.31",
|
||||
"@storybook/theming": "6.0.0-beta.31",
|
||||
"acorn": "^7.1.0",
|
||||
"acorn-jsx": "^5.1.0",
|
||||
"acorn-walk": "^7.0.0",
|
||||
@ -85,8 +85,8 @@
|
||||
"@babel/core": "^7.9.6",
|
||||
"@emotion/core": "^10.0.20",
|
||||
"@emotion/styled": "^10.0.17",
|
||||
"@storybook/react": "6.0.0-beta.23",
|
||||
"@storybook/web-components": "6.0.0-beta.23",
|
||||
"@storybook/react": "6.0.0-beta.31",
|
||||
"@storybook/web-components": "6.0.0-beta.31",
|
||||
"@types/cross-spawn": "^6.0.1",
|
||||
"@types/doctrine": "^0.0.3",
|
||||
"@types/enzyme": "^3.10.3",
|
||||
@ -113,7 +113,7 @@
|
||||
"styled-components": "^5.0.1",
|
||||
"terser-webpack-plugin": "^3.0.0",
|
||||
"tmp": "^0.2.1",
|
||||
"tslib": "^1.11.1",
|
||||
"tslib": "^2.0.0",
|
||||
"web-component-analyzer": "^1.0.3",
|
||||
"webpack": "^4.33.0",
|
||||
"zone.js": "^0.10.2"
|
||||
|
||||
@ -144,7 +144,7 @@ Neither option is perfect, so here's everything you should know if you're thinki
|
||||
|
||||
| Docgen | Build time |
|
||||
| ----------------------- | ---------- |
|
||||
| react-docgen-typescript | 59s |
|
||||
| react-docgen-typescript | 33s |
|
||||
| react-docgen | 29s |
|
||||
| none | 28s |
|
||||
|
||||
|
||||
@ -64,7 +64,7 @@ export const getStoryProps = (props: StoryProps, context: DocsContextProps): Pur
|
||||
parameters,
|
||||
inline: storyIsInline,
|
||||
id: previewId,
|
||||
storyFn: prepareForInline && storyFn ? () => prepareForInline(storyFn) : storyFn,
|
||||
storyFn: prepareForInline && storyFn ? () => prepareForInline(storyFn, data) : storyFn,
|
||||
height: height || (storyIsInline ? undefined : iframeHeight),
|
||||
title: storyName,
|
||||
};
|
||||
|
||||
@ -47,7 +47,7 @@ describe('addon-docs enhanceSource', () => {
|
||||
storySource: {
|
||||
source: 'storySource.source',
|
||||
locationsMap: {
|
||||
'foo--bar': { startBody: { line: 1, col: 5 }, endBody: { line: 1, col: 11 } },
|
||||
bar: { startBody: { line: 1, col: 5 }, endBody: { line: 1, col: 11 } },
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -11,14 +11,20 @@ interface StorySource {
|
||||
locationsMap: { [id: string]: { startBody: Location; endBody: Location } };
|
||||
}
|
||||
|
||||
/**
|
||||
* Replaces full story id name like: story-kind--story-name -> story-name
|
||||
* @param id
|
||||
*/
|
||||
const storyIdToSanitizedStoryName = (id: string) => id.replace(/^.*?--/, '');
|
||||
|
||||
const extract = (targetId: string, { source, locationsMap }: StorySource) => {
|
||||
if (!locationsMap) {
|
||||
return source;
|
||||
}
|
||||
const location = locationsMap[targetId];
|
||||
|
||||
// FIXME: bad locationsMap generated for module export functions whose titles are overridden
|
||||
if (!location) return null;
|
||||
const sanitizedStoryName = storyIdToSanitizedStoryName(targetId);
|
||||
const location = locationsMap[sanitizedStoryName];
|
||||
|
||||
const { startBody: start, endBody: end } = location;
|
||||
const lines = source.split('\n');
|
||||
if (start.line === end.line && lines[start.line - 1] !== undefined) {
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
/* global window */
|
||||
|
||||
import { PropDef } from '@storybook/components';
|
||||
import { ArgType, ArgTypes } from '@storybook/api';
|
||||
import { logger } from '@storybook/client-logger';
|
||||
import {
|
||||
@ -16,8 +15,6 @@ import {
|
||||
Directive,
|
||||
} from './types';
|
||||
|
||||
type Sections = Record<string, PropDef[]>;
|
||||
|
||||
export const isMethod = (methodOrProp: Method | Property): methodOrProp is Method => {
|
||||
return (methodOrProp as Method).args !== undefined;
|
||||
};
|
||||
|
||||
@ -3,6 +3,7 @@ import { ArgTypesEnhancer, combineParameters } from '@storybook/client-api';
|
||||
import { ArgTypes } from '@storybook/api';
|
||||
import { inferArgTypes } from './inferArgTypes';
|
||||
import { inferControls } from './inferControls';
|
||||
import { normalizeArgTypes } from './normalizeArgTypes';
|
||||
|
||||
const isSubset = (kind: string, subset: object, superset: object) => {
|
||||
const keys = Object.keys(subset);
|
||||
@ -15,14 +16,15 @@ export const enhanceArgTypes: ArgTypesEnhancer = (context) => {
|
||||
const { component, argTypes: userArgTypes = {}, docs = {}, args = {} } = context.parameters;
|
||||
const { extractArgTypes, forceExtractedArgTypes = false } = docs;
|
||||
|
||||
const namedArgTypes = mapValues(userArgTypes, (val, key) => ({ name: key, ...val }));
|
||||
const normalizedArgTypes = normalizeArgTypes(userArgTypes);
|
||||
const namedArgTypes = mapValues(normalizedArgTypes, (val, key) => ({ name: key, ...val }));
|
||||
const inferredArgTypes = inferArgTypes(args);
|
||||
let extractedArgTypes: ArgTypes = extractArgTypes && component ? extractArgTypes(component) : {};
|
||||
|
||||
if (
|
||||
!forceExtractedArgTypes &&
|
||||
((Object.keys(userArgTypes).length > 0 &&
|
||||
!isSubset(context.kind, userArgTypes, extractedArgTypes)) ||
|
||||
((Object.keys(normalizedArgTypes).length > 0 &&
|
||||
!isSubset(context.kind, normalizedArgTypes, extractedArgTypes)) ||
|
||||
(Object.keys(inferredArgTypes).length > 0 &&
|
||||
!isSubset(context.kind, inferredArgTypes, extractedArgTypes)))
|
||||
) {
|
||||
|
||||
18
addons/docs/src/frameworks/common/normalizeArgTypes.ts
Normal file
18
addons/docs/src/frameworks/common/normalizeArgTypes.ts
Normal file
@ -0,0 +1,18 @@
|
||||
import mapValues from 'lodash/mapValues';
|
||||
import { ArgTypes } from '@storybook/api';
|
||||
import { SBType } from '../../lib/sbtypes';
|
||||
|
||||
const normalizeType = (type: SBType | string) => (typeof type === 'string' ? { name: type } : type);
|
||||
|
||||
const normalizeControl = (control?: any) =>
|
||||
typeof control === 'string' ? { type: control } : control;
|
||||
|
||||
export const normalizeArgTypes = (argTypes: ArgTypes) =>
|
||||
mapValues(argTypes, (argType) => {
|
||||
if (!argType) return argType;
|
||||
const normalized = { ...argType };
|
||||
const { type, control } = argType;
|
||||
if (type) normalized.type = normalizeType(type);
|
||||
if (control) normalized.control = normalizeControl(control);
|
||||
return normalized;
|
||||
});
|
||||
@ -14,17 +14,19 @@ const context = coreDirName.includes('node_modules')
|
||||
: path.join(coreDirName, '../../node_modules'); // SB Monorepo
|
||||
|
||||
function createBabelOptions(babelOptions?: any, configureJSX?: boolean) {
|
||||
if (!configureJSX) {
|
||||
return babelOptions;
|
||||
}
|
||||
|
||||
// for frameworks that are not working with react, we need to configure
|
||||
// the jsx to transpile mdx, for now there will be a flag for that
|
||||
// for more complex solutions we can find alone that we need to add '@babel/plugin-transform-react-jsx'
|
||||
const babelPlugins = (babelOptions && babelOptions.plugins) || [];
|
||||
const plugins = configureJSX
|
||||
? [...babelPlugins, '@babel/plugin-transform-react-jsx']
|
||||
: babelPlugins;
|
||||
|
||||
return {
|
||||
// don't use the root babelrc by default (users can override this in babelOptions)
|
||||
babelrc: false,
|
||||
...babelOptions,
|
||||
// for frameworks that are not working with react, we need to configure
|
||||
// the jsx to transpile mdx, for now there will be a flag for that
|
||||
// for more complex solutions we can find alone that we need to add '@babel/plugin-transform-react-jsx'
|
||||
plugins: [...babelPlugins, '@babel/plugin-transform-react-jsx'],
|
||||
plugins,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@ -1,12 +1,10 @@
|
||||
import { PropDef, PropsTableRowsProps } from '@storybook/components';
|
||||
import { ArgTypes } from '@storybook/api';
|
||||
import { ArgTypesExtractor } from '../../lib/docgen';
|
||||
import { PropDef, ArgTypesExtractor } from '../../lib/docgen';
|
||||
import { extractProps } from './extractProps';
|
||||
|
||||
export const extractArgTypes: ArgTypesExtractor = (component) => {
|
||||
if (component) {
|
||||
const props = extractProps(component);
|
||||
const { rows } = props as PropsTableRowsProps;
|
||||
const { rows } = extractProps(component);
|
||||
if (rows) {
|
||||
return rows.reduce((acc: ArgTypes, row: PropDef) => {
|
||||
const { type, sbType, defaultValue: defaultSummary, jsDocTags, required } = row;
|
||||
|
||||
@ -1,7 +1,12 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { isForwardRef, isMemo } from 'react-is';
|
||||
import { PropDef } from '@storybook/components';
|
||||
import { hasDocgen, extractComponentProps, PropsExtractor, TypeSystem } from '../../lib/docgen';
|
||||
import { isMemo } from 'react-is';
|
||||
import {
|
||||
PropDef,
|
||||
hasDocgen,
|
||||
extractComponentProps,
|
||||
PropsExtractor,
|
||||
TypeSystem,
|
||||
} from '../../lib/docgen';
|
||||
import { Component } from '../../blocks/types';
|
||||
import { enhancePropTypesProps } from './propTypes/handleProp';
|
||||
import { enhanceTypeScriptProps } from './typeScript/handleProp';
|
||||
@ -24,13 +29,8 @@ function getPropDefs(component: Component, section: string): PropDef[] {
|
||||
let processedComponent = component;
|
||||
|
||||
// eslint-disable-next-line react/forbid-foreign-prop-types
|
||||
if (!hasDocgen(component) && !component.propTypes) {
|
||||
if (isForwardRef(component) || component.render) {
|
||||
processedComponent = component.render({}).type;
|
||||
}
|
||||
if (isMemo(component)) {
|
||||
processedComponent = component.type().type;
|
||||
}
|
||||
if (!hasDocgen(component) && !component.propTypes && isMemo(component)) {
|
||||
processedComponent = component.type().type;
|
||||
}
|
||||
|
||||
const extractedProps = extractComponentProps(processedComponent, section);
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import { PropDefaultValue, PropDef } from '@storybook/components';
|
||||
import { PropDefaultValue } from '@storybook/components';
|
||||
import isPlainObject from 'lodash/isPlainObject';
|
||||
import isFunction from 'lodash/isFunction';
|
||||
import isString from 'lodash/isString';
|
||||
// @ts-ignore
|
||||
import reactElementToJSXString from 'react-element-to-jsx-string';
|
||||
import { createSummaryValue, isTooLongForDefaultValueSummary } from '../../../../lib';
|
||||
import { PropDef } from '../../../../lib/docgen';
|
||||
import { inspectValue, InspectionFunction } from '../inspection';
|
||||
import { generateObject } from './generateObject';
|
||||
import { generateArray } from './generateArray';
|
||||
|
||||
@ -1,10 +1,14 @@
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
|
||||
import { PropDef } from '@storybook/components';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import { Component } from '../../../blocks/types';
|
||||
import { extractComponentProps, DocgenInfo, DocgenPropDefaultValue } from '../../../lib/docgen';
|
||||
import {
|
||||
PropDef,
|
||||
extractComponentProps,
|
||||
DocgenInfo,
|
||||
DocgenPropDefaultValue,
|
||||
} from '../../../lib/docgen';
|
||||
import { enhancePropTypesProp, enhancePropTypesProps } from './handleProp';
|
||||
|
||||
const DOCGEN_SECTION = 'props';
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { PropDef } from '@storybook/components';
|
||||
import { ExtractedProp } from '../../../lib/docgen';
|
||||
import { PropDef, ExtractedProp } from '../../../lib/docgen';
|
||||
import { createType } from './createType';
|
||||
import { createDefaultValue, createDefaultValueFromRawDefaultProp } from '../lib/defaultValues';
|
||||
import { Component } from '../../../blocks/types';
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { PropDef } from '@storybook/components';
|
||||
import { PropDef } from '../../../lib/docgen';
|
||||
import { Component } from '../../../blocks/types';
|
||||
|
||||
// react-docgen doesn't returned the props in the order they were defined in the "propTypes" object of the component.
|
||||
|
||||
@ -1,9 +1,13 @@
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
|
||||
import { PropDef } from '@storybook/components';
|
||||
import React from 'react';
|
||||
import { Component } from '../../../blocks/types';
|
||||
import { extractComponentProps, DocgenInfo, DocgenPropDefaultValue } from '../../../lib/docgen';
|
||||
import {
|
||||
PropDef,
|
||||
extractComponentProps,
|
||||
DocgenInfo,
|
||||
DocgenPropDefaultValue,
|
||||
} from '../../../lib/docgen';
|
||||
import { enhanceTypeScriptProp } from './handleProp';
|
||||
|
||||
const DOCGEN_SECTION = 'props';
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { PropDef } from '@storybook/components';
|
||||
import { ExtractedProp } from '../../../lib/docgen';
|
||||
import { PropDef, ExtractedProp } from '../../../lib/docgen';
|
||||
import { createDefaultValue, createDefaultValueFromRawDefaultProp } from '../lib/defaultValues';
|
||||
|
||||
export function enhanceTypeScriptProp(extractedProp: ExtractedProp, rawDefaultProp?: any): PropDef {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import toReact from '@egoist/vue-to-react';
|
||||
import { StoryFn } from '@storybook/addons';
|
||||
import { StoryFn, StoryContext } from '@storybook/addons';
|
||||
import { addParameters } from '@storybook/client-api';
|
||||
import { extractArgTypes } from './extractArgTypes';
|
||||
import { extractComponentDescription } from '../../lib/docgen';
|
||||
@ -8,9 +8,9 @@ import { extractComponentDescription } from '../../lib/docgen';
|
||||
addParameters({
|
||||
docs: {
|
||||
inlineStories: true,
|
||||
prepareForInline: (storyFn: StoryFn) => {
|
||||
prepareForInline: (storyFn: StoryFn, { args }: StoryContext) => {
|
||||
const Story = toReact(storyFn());
|
||||
return <Story />;
|
||||
return <Story {...args} />;
|
||||
},
|
||||
extractArgTypes,
|
||||
extractComponentDescription,
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
// FIXME: this is legacy code that needs to be updated & simplified with ArgType refactor
|
||||
|
||||
export interface JsDocParam {
|
||||
name: string;
|
||||
description?: string;
|
||||
@ -1,5 +1,5 @@
|
||||
import { PropDef, PropDefaultValue } from '@storybook/components';
|
||||
import { TypeSystem, DocgenInfo, DocgenType, DocgenPropDefaultValue } from './types';
|
||||
import { PropDefaultValue } from '@storybook/components';
|
||||
import { PropDef, TypeSystem, DocgenInfo, DocgenType, DocgenPropDefaultValue } from './types';
|
||||
import { JsDocParsingResult } from '../jsdocParser';
|
||||
import { createSummaryValue } from '../utils';
|
||||
import { createFlowPropDef } from './flow/createPropDef';
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { PropDef } from '@storybook/components';
|
||||
import { Component } from '../../blocks/types';
|
||||
import { ExtractedJsDoc, parseJsDoc } from '../jsdocParser';
|
||||
import { DocgenInfo, TypeSystem } from './types';
|
||||
import { PropDef, DocgenInfo, TypeSystem } from './types';
|
||||
import { getDocgenSection, isValidDocgenSection, getDocgenDescription } from './utils';
|
||||
import { getPropDefFactory, PropDefFactory } from './createPropDef';
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { PropsTableProps } from '@storybook/components';
|
||||
import { ArgTypes } from '@storybook/api';
|
||||
import { PropDef } from './PropDef';
|
||||
import { Component } from '../../blocks/types';
|
||||
|
||||
export type PropsExtractor = (component: Component) => PropsTableProps | null;
|
||||
export type PropsExtractor = (component: Component) => { rows?: PropDef[] } | null;
|
||||
|
||||
export type ArgTypesExtractor = (component: Component) => ArgTypes | null;
|
||||
|
||||
@ -49,3 +49,5 @@ export enum TypeSystem {
|
||||
TYPESCRIPT = 'TypeScript',
|
||||
UNKNOWN = 'Unknown',
|
||||
}
|
||||
|
||||
export { PropDef };
|
||||
|
||||
@ -43,10 +43,9 @@ export const convert = (type: PTType): SBType | any => {
|
||||
case 'elementType':
|
||||
default: {
|
||||
if (name?.indexOf('|') > 0) {
|
||||
// react-docgen-typescript-loader doesn't always produce proper
|
||||
// enum types, possibly due to https://github.com/strothj/react-docgen-typescript-loader/issues/81
|
||||
// this hack tries to parse out values from the string and should be
|
||||
// removed when RDTL gets a little smarter about this
|
||||
// react-docgen-typescript-plugin doesn't always produce enum-like unions
|
||||
// (like if a user has turned off shouldExtractValuesFromUnion) so here we
|
||||
// try to recover and construct one.
|
||||
try {
|
||||
const literalValues = name.split('|').map((v: string) => JSON.parse(v));
|
||||
return { ...base, name: 'enum', value: literalValues };
|
||||
|
||||
@ -5,6 +5,12 @@ import { Story, Meta } from '@storybook/addon-docs/blocks';
|
||||
|
||||
# Args
|
||||
|
||||
<Story name="component notes" args={{ a: 1, b: 2 }} argTypes={{ a: { name: 'A' }, b: { name: 'B' } }}>
|
||||
<Button>Component notes</Button>
|
||||
export const ButtonStory = (args) => <Button>Component notes</Button>;
|
||||
|
||||
<Story
|
||||
name="component notes"
|
||||
args={{ a: 1, b: 2 }}
|
||||
argTypes={{ a: { name: 'A' }, b: { name: 'B' } }}
|
||||
>
|
||||
{ButtonStory.bind({})}
|
||||
</Story>
|
||||
|
||||
@ -6,7 +6,7 @@ import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
|
||||
|
||||
import { Button } from '@storybook/react/demo';
|
||||
import { Story, Meta } from '@storybook/addon-docs/blocks';
|
||||
|
||||
export const ButtonStory = (args) => <Button mdxType=\\"Button\\">Component notes</Button>;
|
||||
const makeShortcode = (name) =>
|
||||
function MDXDefaultShortcode(props) {
|
||||
console.warn(
|
||||
@ -17,13 +17,16 @@ const makeShortcode = (name) =>
|
||||
return <div {...props} />;
|
||||
};
|
||||
|
||||
const layoutProps = {};
|
||||
const layoutProps = {
|
||||
ButtonStory,
|
||||
};
|
||||
const MDXLayout = 'wrapper';
|
||||
function MDXContent({ components, ...props }) {
|
||||
return (
|
||||
<MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
|
||||
<Meta title=\\"Button\\" mdxType=\\"Meta\\" />
|
||||
<h1>{\`Args\`}</h1>
|
||||
|
||||
<Story
|
||||
name=\\"component notes\\"
|
||||
args={{
|
||||
@ -40,7 +43,7 @@ function MDXContent({ components, ...props }) {
|
||||
}}
|
||||
mdxType=\\"Story\\"
|
||||
>
|
||||
<Button mdxType=\\"Button\\">Component notes</Button>
|
||||
{ButtonStory.bind({})}
|
||||
</Story>
|
||||
</MDXLayout>
|
||||
);
|
||||
@ -48,7 +51,7 @@ function MDXContent({ components, ...props }) {
|
||||
|
||||
MDXContent.isMDXComponent = true;
|
||||
|
||||
export const componentNotes = () => <Button>Component notes</Button>;
|
||||
export const componentNotes = ButtonStory.bind({});
|
||||
componentNotes.storyName = 'component notes';
|
||||
componentNotes.argTypes = {
|
||||
a: {
|
||||
@ -62,7 +65,7 @@ componentNotes.args = {
|
||||
a: 1,
|
||||
b: 2,
|
||||
};
|
||||
componentNotes.parameters = { storySource: { source: '<Button>Component notes</Button>' } };
|
||||
componentNotes.parameters = { storySource: { source: 'ButtonStory.bind({})' } };
|
||||
|
||||
const componentMeta = { title: 'Button', includeStories: ['componentNotes'] };
|
||||
|
||||
|
||||
@ -84,20 +84,25 @@ function genStoryExport(ast, context) {
|
||||
const storyReactCode = bodyParts.length > 1 ? `<>\n${storyCode}\n</>` : storyCode;
|
||||
// keep track if an indentifier or function call
|
||||
// avoid breaking change for 5.3
|
||||
switch (bodyParts.length === 1 && bodyParts[0].body.type) {
|
||||
// We don't know what type the identifier is, but this code
|
||||
// assumes it's a function from CSF. Let's see who complains!
|
||||
case 'Identifier':
|
||||
storyVal = `assertIsFn(${storyCode})`;
|
||||
break;
|
||||
case 'ArrowFunctionExpression':
|
||||
storyVal = `(${storyCode})`;
|
||||
break;
|
||||
default:
|
||||
storyVal = `() => (
|
||||
const BIND_REGEX = /\.bind\(.*\)/;
|
||||
if (bodyParts.length === 1 && BIND_REGEX.test(bodyParts[0].code)) {
|
||||
storyVal = bodyParts[0].code;
|
||||
} else {
|
||||
switch (bodyParts.length === 1 && bodyParts[0].body.type) {
|
||||
// We don't know what type the identifier is, but this code
|
||||
// assumes it's a function from CSF. Let's see who complains!
|
||||
case 'Identifier':
|
||||
storyVal = `assertIsFn(${storyCode})`;
|
||||
break;
|
||||
case 'ArrowFunctionExpression':
|
||||
storyVal = `(${storyCode})`;
|
||||
break;
|
||||
default:
|
||||
storyVal = `() => (
|
||||
${storyReactCode}
|
||||
)`;
|
||||
break;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-essentials",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "Curated addons to bring out the best of Storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -28,13 +28,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "6.0.0-beta.23",
|
||||
"@storybook/addon-backgrounds": "6.0.0-beta.23",
|
||||
"@storybook/addon-docs": "6.0.0-beta.23",
|
||||
"@storybook/addon-viewport": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.23",
|
||||
"@storybook/api": "6.0.0-beta.23",
|
||||
"@storybook/node-logger": "6.0.0-beta.23",
|
||||
"@storybook/addon-actions": "6.0.0-beta.31",
|
||||
"@storybook/addon-backgrounds": "6.0.0-beta.31",
|
||||
"@storybook/addon-docs": "6.0.0-beta.31",
|
||||
"@storybook/addon-viewport": "6.0.0-beta.31",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"@storybook/api": "6.0.0-beta.31",
|
||||
"@storybook/node-logger": "6.0.0-beta.31",
|
||||
"core-js": "^3.0.1",
|
||||
"regenerator-runtime": "^0.13.3",
|
||||
"ts-dedent": "^1.1.1"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-events",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "Add events to your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -31,11 +31,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.23",
|
||||
"@storybook/api": "6.0.0-beta.23",
|
||||
"@storybook/client-api": "6.0.0-beta.23",
|
||||
"@storybook/core-events": "6.0.0-beta.23",
|
||||
"@storybook/theming": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"@storybook/api": "6.0.0-beta.31",
|
||||
"@storybook/client-api": "6.0.0-beta.31",
|
||||
"@storybook/core-events": "6.0.0-beta.31",
|
||||
"@storybook/theming": "6.0.0-beta.31",
|
||||
"core-js": "^3.0.1",
|
||||
"format-json": "^1.0.3",
|
||||
"lodash": "^4.17.15",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-google-analytics",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "Storybook addon for google analytics",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -20,8 +20,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.23",
|
||||
"@storybook/core-events": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"@storybook/core-events": "6.0.0-beta.31",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react-ga": "^2.5.7",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-graphql",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "Storybook addon to display the GraphiQL IDE",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -31,8 +31,8 @@
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.9.0",
|
||||
"@babel/plugin-transform-classes": "^7.9.2",
|
||||
"@storybook/addons": "6.0.0-beta.23",
|
||||
"@storybook/api": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"@storybook/api": "6.0.0-beta.31",
|
||||
"@types/webpack": "^4.41.9",
|
||||
"babel-loader": "^8.0.6",
|
||||
"core-js": "^3.0.1",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -35,11 +35,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.23",
|
||||
"@storybook/api": "6.0.0-beta.23",
|
||||
"@storybook/components": "6.0.0-beta.23",
|
||||
"@storybook/core-events": "6.0.0-beta.23",
|
||||
"@storybook/theming": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"@storybook/api": "6.0.0-beta.31",
|
||||
"@storybook/components": "6.0.0-beta.31",
|
||||
"@storybook/core-events": "6.0.0-beta.31",
|
||||
"@storybook/theming": "6.0.0-beta.31",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-knobs",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "Storybook Addon Prop Editor Component",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,13 +29,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.23",
|
||||
"@storybook/api": "6.0.0-beta.23",
|
||||
"@storybook/channels": "6.0.0-beta.23",
|
||||
"@storybook/client-api": "6.0.0-beta.23",
|
||||
"@storybook/components": "6.0.0-beta.23",
|
||||
"@storybook/core-events": "6.0.0-beta.23",
|
||||
"@storybook/theming": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"@storybook/api": "6.0.0-beta.31",
|
||||
"@storybook/channels": "6.0.0-beta.31",
|
||||
"@storybook/client-api": "6.0.0-beta.31",
|
||||
"@storybook/components": "6.0.0-beta.31",
|
||||
"@storybook/core-events": "6.0.0-beta.31",
|
||||
"@storybook/theming": "6.0.0-beta.31",
|
||||
"@types/react-color": "^3.0.1",
|
||||
"copy-to-clipboard": "^3.0.8",
|
||||
"core-js": "^3.0.1",
|
||||
|
||||
@ -112,6 +112,14 @@ expectKnobOfType<string>(
|
||||
select<ButtonVariant>('select with string enum options', ButtonVariant, ButtonVariant.primary)
|
||||
);
|
||||
|
||||
expectKnobOfType<string | undefined | null | boolean>(
|
||||
select(
|
||||
'select with an undefined in array',
|
||||
['Apple', 'Banana', 'Grapes', undefined, null, false] as const,
|
||||
undefined
|
||||
)
|
||||
);
|
||||
|
||||
expectKnobOfType<string | null>(
|
||||
select('select with null option', { a: 'Option', b: null }, null, groupId)
|
||||
);
|
||||
|
||||
@ -4,13 +4,13 @@ import PropTypes from 'prop-types';
|
||||
import { Form } from '@storybook/components';
|
||||
import { KnobControlConfig, KnobControlProps } from './types';
|
||||
|
||||
export type SelectTypeKnobValue = string | number | null | undefined | PropertyKey[];
|
||||
export type SelectTypeKnobValue = string | number | boolean | null | undefined | PropertyKey[];
|
||||
|
||||
export type SelectTypeOptionsProp<T extends SelectTypeKnobValue = SelectTypeKnobValue> =
|
||||
| Record<PropertyKey, T>
|
||||
| Record<Extract<T, PropertyKey>, T[keyof T]>
|
||||
| Extract<T, PropertyKey>[]
|
||||
| readonly Extract<T, PropertyKey>[];
|
||||
| T[]
|
||||
| readonly T[];
|
||||
|
||||
export interface SelectTypeKnob<T extends SelectTypeKnobValue = SelectTypeKnobValue>
|
||||
extends KnobControlConfig<T> {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "Story Links addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,11 +29,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.23",
|
||||
"@storybook/client-logger": "6.0.0-beta.23",
|
||||
"@storybook/core-events": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"@storybook/client-logger": "6.0.0-beta.31",
|
||||
"@storybook/core-events": "6.0.0-beta.31",
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/router": "6.0.0-beta.23",
|
||||
"@storybook/router": "6.0.0-beta.31",
|
||||
"@types/qs": "^6.9.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -18,7 +18,6 @@ jest.mock('global', () => ({
|
||||
})),
|
||||
},
|
||||
window: global,
|
||||
__STORYBOOK_LOGGER: console,
|
||||
__STORYBOOK_CLIENT_API__: {
|
||||
raw: jest.fn(() => [
|
||||
{
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-queryparams",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "parameter addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -30,12 +30,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.23",
|
||||
"@storybook/api": "6.0.0-beta.23",
|
||||
"@storybook/client-logger": "6.0.0-beta.23",
|
||||
"@storybook/components": "6.0.0-beta.23",
|
||||
"@storybook/core-events": "6.0.0-beta.23",
|
||||
"@storybook/theming": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"@storybook/api": "6.0.0-beta.31",
|
||||
"@storybook/client-logger": "6.0.0-beta.31",
|
||||
"@storybook/components": "6.0.0-beta.31",
|
||||
"@storybook/core-events": "6.0.0-beta.31",
|
||||
"@storybook/theming": "6.0.0-beta.31",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"qs": "^6.6.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -33,9 +33,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@jest/transform": "^26.0.0",
|
||||
"@storybook/addons": "6.0.0-beta.23",
|
||||
"@storybook/client-api": "6.0.0-beta.23",
|
||||
"@storybook/core": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"@storybook/client-api": "6.0.0-beta.31",
|
||||
"@storybook/core": "6.0.0-beta.31",
|
||||
"@types/glob": "^7.1.1",
|
||||
"@types/jest": "^25.1.1",
|
||||
"@types/jest-specific-snapshot": "^0.5.3",
|
||||
@ -50,8 +50,8 @@
|
||||
"ts-dedent": "^1.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-docs": "6.0.0-beta.23",
|
||||
"@storybook/react": "6.0.0-beta.23",
|
||||
"@storybook/addon-docs": "6.0.0-beta.31",
|
||||
"@storybook/react": "6.0.0-beta.31",
|
||||
"babel-loader": "^8.0.6",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-to-json": "^3.4.1",
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import Vue from 'vue';
|
||||
|
||||
// this is defined in @storybook/vue but not exported,
|
||||
// and we need it to inject args into the story component's props
|
||||
const VALUES = 'STORYBOOK_VALUES';
|
||||
|
||||
function getRenderedTree(story: any) {
|
||||
const component = story.render();
|
||||
|
||||
@ -10,6 +14,9 @@ function getRenderedTree(story: any) {
|
||||
},
|
||||
});
|
||||
|
||||
// @ts-ignore
|
||||
vm[VALUES] = story.args;
|
||||
|
||||
return vm.$mount().$el;
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "Image snapshots addition to StoryShots based on puppeteer",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -30,7 +30,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/node-logger": "6.0.0-beta.23",
|
||||
"@storybook/node-logger": "6.0.0-beta.31",
|
||||
"@types/jest-image-snapshot": "^2.8.0",
|
||||
"@wordpress/jest-puppeteer-axe": "^1.5.0",
|
||||
"core-js": "^3.0.1",
|
||||
@ -42,7 +42,7 @@
|
||||
"@types/puppeteer": "^2.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-storyshots": "6.0.0-beta.23",
|
||||
"@storybook/addon-storyshots": "6.0.0-beta.31",
|
||||
"puppeteer": "^2.0.0 || ^3.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "Stories addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,13 +29,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.23",
|
||||
"@storybook/api": "6.0.0-beta.23",
|
||||
"@storybook/client-logger": "6.0.0-beta.23",
|
||||
"@storybook/components": "6.0.0-beta.23",
|
||||
"@storybook/router": "6.0.0-beta.23",
|
||||
"@storybook/source-loader": "6.0.0-beta.23",
|
||||
"@storybook/theming": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"@storybook/api": "6.0.0-beta.31",
|
||||
"@storybook/client-logger": "6.0.0-beta.31",
|
||||
"@storybook/components": "6.0.0-beta.31",
|
||||
"@storybook/router": "6.0.0-beta.31",
|
||||
"@storybook/source-loader": "6.0.0-beta.31",
|
||||
"@storybook/theming": "6.0.0-beta.31",
|
||||
"core-js": "^3.0.1",
|
||||
"estraverse": "^4.2.0",
|
||||
"loader-utils": "^2.0.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-toolbars",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "Storybook toolbars addon",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -30,10 +30,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.23",
|
||||
"@storybook/api": "6.0.0-beta.23",
|
||||
"@storybook/client-api": "6.0.0-beta.23",
|
||||
"@storybook/components": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"@storybook/api": "6.0.0-beta.31",
|
||||
"@storybook/client-api": "6.0.0-beta.31",
|
||||
"@storybook/components": "6.0.0-beta.31",
|
||||
"core-js": "^3.0.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "Storybook addon to change the viewport size to mobile",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,12 +29,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.23",
|
||||
"@storybook/api": "6.0.0-beta.23",
|
||||
"@storybook/client-logger": "6.0.0-beta.23",
|
||||
"@storybook/components": "6.0.0-beta.23",
|
||||
"@storybook/core-events": "6.0.0-beta.23",
|
||||
"@storybook/theming": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"@storybook/api": "6.0.0-beta.31",
|
||||
"@storybook/client-logger": "6.0.0-beta.31",
|
||||
"@storybook/components": "6.0.0-beta.31",
|
||||
"@storybook/core-events": "6.0.0-beta.31",
|
||||
"@storybook/theming": "6.0.0-beta.31",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"memoizerific": "^1.11.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -34,9 +34,9 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.23",
|
||||
"@storybook/core": "6.0.0-beta.23",
|
||||
"@storybook/node-logger": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"@storybook/core": "6.0.0-beta.31",
|
||||
"@storybook/node-logger": "6.0.0-beta.31",
|
||||
"@types/webpack-env": "^1.15.2",
|
||||
"autoprefixer": "^9.7.6",
|
||||
"core-js": "^3.0.1",
|
||||
|
||||
4
app/aurelia/demo.d.ts
vendored
4
app/aurelia/demo.d.ts
vendored
@ -1,4 +0,0 @@
|
||||
declare module '@storybook/aurelia/demo' {
|
||||
export const Button: any;
|
||||
export const Welcome: any;
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
/* eslint-disable global-require */
|
||||
module.exports = {
|
||||
Welcome: require('./dist/demo/welcome').default,
|
||||
Button: require('./dist/demo/button').default,
|
||||
};
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/aurelia",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "Storybook for Aurelia: Develop Aurelia Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -26,10 +26,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-knobs": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.23",
|
||||
"@storybook/core": "6.0.0-beta.23",
|
||||
"@storybook/node-logger": "6.0.0-beta.23",
|
||||
"@storybook/addon-knobs": "6.0.0-beta.31",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"@storybook/core": "6.0.0-beta.31",
|
||||
"@storybook/node-logger": "6.0.0-beta.31",
|
||||
"fork-ts-checker-webpack-plugin": "^4.0.3",
|
||||
"global": "^4.3.2",
|
||||
"ts-loader": "^6.0.1",
|
||||
|
||||
@ -1,2 +0,0 @@
|
||||
export { default as Button } from './button';
|
||||
export { default as Welcome } from './welcome';
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/ember",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/app/ember",
|
||||
"bugs": {
|
||||
@ -32,7 +32,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@ember/test-helpers": "^1.7.0",
|
||||
"@storybook/core": "6.0.0-beta.23",
|
||||
"@storybook/core": "6.0.0-beta.31",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"regenerator-runtime": "^0.13.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/html",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -34,8 +34,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.23",
|
||||
"@storybook/core": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"@storybook/core": "6.0.0-beta.31",
|
||||
"@types/webpack-env": "^1.15.2",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/marionette",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "Storybook for Marionette: Develop Marionette.js component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -25,7 +25,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "6.0.0-beta.23",
|
||||
"@storybook/core": "6.0.0-beta.31",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/marko",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -34,8 +34,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@marko/webpack": "^2.1.0",
|
||||
"@storybook/client-logger": "6.0.0-beta.23",
|
||||
"@storybook/core": "6.0.0-beta.23",
|
||||
"@storybook/client-logger": "6.0.0-beta.31",
|
||||
"@storybook/core": "6.0.0-beta.31",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"regenerator-runtime": "^0.13.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/mithril",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "Storybook for Mithril: Develop Mithril Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -36,8 +36,8 @@
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.9.6",
|
||||
"@babel/plugin-transform-react-jsx": "^7.3.0",
|
||||
"@storybook/addons": "6.0.0-beta.23",
|
||||
"@storybook/core": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"@storybook/core": "6.0.0-beta.31",
|
||||
"@types/mithril": "^2.0.0",
|
||||
"@types/webpack-env": "^1.15.2",
|
||||
"core-js": "^3.0.1",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/preact",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "Storybook for Preact: Develop Preact Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -35,8 +35,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-transform-react-jsx": "^7.3.0",
|
||||
"@storybook/addons": "6.0.0-beta.23",
|
||||
"@storybook/core": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"@storybook/core": "6.0.0-beta.31",
|
||||
"@types/webpack-env": "^1.15.2",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/rax",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "Storybook for Rax: Develop Rax Component in isolation.",
|
||||
"keywords": [
|
||||
"rax",
|
||||
@ -34,7 +34,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "6.0.0-beta.23",
|
||||
"@storybook/core": "6.0.0-beta.31",
|
||||
"babel-preset-rax": "^1.0.0-beta.0",
|
||||
"core-js": "^3.0.1",
|
||||
"driver-dom": "^2.0.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -34,12 +34,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-transform-react-constant-elements": "^7.6.3",
|
||||
"@babel/preset-flow": "^7.0.0",
|
||||
"@babel/preset-react": "^7.0.0",
|
||||
"@storybook/addons": "6.0.0-beta.23",
|
||||
"@storybook/core": "6.0.0-beta.23",
|
||||
"@storybook/node-logger": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"@storybook/core": "6.0.0-beta.31",
|
||||
"@storybook/node-logger": "6.0.0-beta.31",
|
||||
"@storybook/semver": "^7.3.2",
|
||||
"@svgr/webpack": "^5.4.0",
|
||||
"@types/webpack-env": "^1.15.2",
|
||||
@ -51,13 +50,13 @@
|
||||
"lodash": "^4.17.15",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-dev-utils": "^10.0.0",
|
||||
"react-docgen-typescript-loader": "^3.7.2",
|
||||
"react-docgen-typescript-plugin": "^0.5.0",
|
||||
"regenerator-runtime": "^0.13.3",
|
||||
"ts-dedent": "^1.1.1",
|
||||
"webpack": "^4.43.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/client-api": "6.0.0-beta.23",
|
||||
"@storybook/client-api": "6.0.0-beta.31",
|
||||
"@types/node": "^14.0.10",
|
||||
"@types/webpack": "^4.41.12"
|
||||
},
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
import type { TransformOptions } from '@babel/core';
|
||||
import type { Configuration } from 'webpack';
|
||||
import type { StorybookOptions } from '@storybook/core/types';
|
||||
import ReactDocgenTypescriptPlugin from 'react-docgen-typescript-plugin';
|
||||
|
||||
export function babel(config: TransformOptions, { typescriptOptions }: StorybookOptions) {
|
||||
const { reactDocgen } = typescriptOptions;
|
||||
if (!reactDocgen) {
|
||||
return config;
|
||||
}
|
||||
|
||||
return {
|
||||
...config,
|
||||
overrides: [
|
||||
@ -27,24 +26,13 @@ export function babel(config: TransformOptions, { typescriptOptions }: Storybook
|
||||
|
||||
export function webpackFinal(config: Configuration, { typescriptOptions }: StorybookOptions) {
|
||||
const { reactDocgen, reactDocgenTypescriptOptions } = typescriptOptions;
|
||||
if (reactDocgen !== 'react-docgen-typescript') return config;
|
||||
|
||||
if (reactDocgen !== 'react-docgen-typescript') {
|
||||
return config;
|
||||
}
|
||||
|
||||
return {
|
||||
...config,
|
||||
module: {
|
||||
...config.module,
|
||||
rules: [
|
||||
...config.module.rules,
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
// include: path.resolve(__dirname, "../src"),
|
||||
use: [
|
||||
{
|
||||
loader: require.resolve('react-docgen-typescript-loader'),
|
||||
options: reactDocgenTypescriptOptions,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [...config.plugins, new ReactDocgenTypescriptPlugin(reactDocgenTypescriptOptions)],
|
||||
};
|
||||
}
|
||||
|
||||
@ -8,10 +8,6 @@ export function babelDefault(config: TransformOptions) {
|
||||
require.resolve('@babel/preset-react'),
|
||||
require.resolve('@babel/preset-flow'),
|
||||
],
|
||||
plugins: [
|
||||
...(config.plugins || []),
|
||||
require.resolve('@babel/plugin-transform-react-constant-elements'),
|
||||
require.resolve('babel-plugin-add-react-displayname'),
|
||||
],
|
||||
plugins: [...(config.plugins || []), require.resolve('babel-plugin-add-react-displayname')],
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/riot",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "Storybook for riot.js: View riot snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -34,7 +34,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "6.0.0-beta.23",
|
||||
"@storybook/core": "6.0.0-beta.31",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"raw-loader": "^4.0.1",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/server",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -34,8 +34,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.23",
|
||||
"@storybook/core": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"@storybook/core": "6.0.0-beta.31",
|
||||
"@storybook/node-logger": "^5.2.8",
|
||||
"@types/webpack-env": "^1.15.2",
|
||||
"core-js": "^3.0.1",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/svelte",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -34,8 +34,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.23",
|
||||
"@storybook/core": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"@storybook/core": "6.0.0-beta.31",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"regenerator-runtime": "^0.13.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -34,8 +34,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.23",
|
||||
"@storybook/core": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"@storybook/core": "6.0.0-beta.31",
|
||||
"@types/webpack-env": "^1.15.2",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -22,6 +22,7 @@ export default function render({
|
||||
storyFn,
|
||||
kind,
|
||||
name,
|
||||
args,
|
||||
showMain,
|
||||
showError,
|
||||
showException,
|
||||
@ -29,6 +30,9 @@ export default function render({
|
||||
}: RenderContext) {
|
||||
Vue.config.errorHandler = showException;
|
||||
|
||||
// FIXME: move this into root[COMPONENT] = element
|
||||
// once we get rid of knobs so we don't have to re-create
|
||||
// a new component each time
|
||||
const element = storyFn();
|
||||
|
||||
if (!element) {
|
||||
@ -44,11 +48,13 @@ export default function render({
|
||||
|
||||
showMain();
|
||||
|
||||
// always refresh the component
|
||||
root[COMPONENT] = element;
|
||||
// at component creation || refresh by HMR or switching stories
|
||||
if (!root[COMPONENT] || !forceRender) {
|
||||
root[COMPONENT] = element;
|
||||
}
|
||||
|
||||
// @ts-ignore https://github.com/storybookjs/storybook/pull/7578#discussion_r307986139
|
||||
root[VALUES] = element.options[VALUES];
|
||||
// @ts-ignore https://github.com/storybookjs/storrybook/pull/7578#discussion_r307986139
|
||||
root[VALUES] = { ...element.options[VALUES], ...args };
|
||||
|
||||
if (!root.$el) {
|
||||
root.$mount('#root');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/web-components",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"lit-html",
|
||||
@ -38,8 +38,8 @@
|
||||
"dependencies": {
|
||||
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
|
||||
"@babel/plugin-syntax-import-meta": "^7.2.0",
|
||||
"@storybook/addons": "6.0.0-beta.23",
|
||||
"@storybook/core": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"@storybook/core": "6.0.0-beta.31",
|
||||
"@types/webpack-env": "^1.15.2",
|
||||
"babel-plugin-bundled-import-meta": "^0.3.1",
|
||||
"core-js": "^3.0.1",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-decorator",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "decorator addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -24,8 +24,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.23",
|
||||
"@storybook/client-api": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"@storybook/client-api": "6.0.0-beta.31",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.4.0"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-parameter",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "parameter addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -24,12 +24,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.23",
|
||||
"@storybook/api": "6.0.0-beta.23",
|
||||
"@storybook/client-logger": "6.0.0-beta.23",
|
||||
"@storybook/components": "6.0.0-beta.23",
|
||||
"@storybook/core-events": "6.0.0-beta.23",
|
||||
"@storybook/theming": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"@storybook/api": "6.0.0-beta.31",
|
||||
"@storybook/client-logger": "6.0.0-beta.31",
|
||||
"@storybook/components": "6.0.0-beta.31",
|
||||
"@storybook/core-events": "6.0.0-beta.31",
|
||||
"@storybook/theming": "6.0.0-beta.31",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-preview-wrapper",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "preview wrapper addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -24,7 +24,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"react": "^16.8.3"
|
||||
},
|
||||
"publishConfig": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-roundtrip",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"description": "roundtrip addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -24,13 +24,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.23",
|
||||
"@storybook/api": "6.0.0-beta.23",
|
||||
"@storybook/client-api": "6.0.0-beta.23",
|
||||
"@storybook/client-logger": "6.0.0-beta.23",
|
||||
"@storybook/components": "6.0.0-beta.23",
|
||||
"@storybook/core-events": "6.0.0-beta.23",
|
||||
"@storybook/theming": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"@storybook/api": "6.0.0-beta.31",
|
||||
"@storybook/client-api": "6.0.0-beta.31",
|
||||
"@storybook/client-logger": "6.0.0-beta.31",
|
||||
"@storybook/components": "6.0.0-beta.31",
|
||||
"@storybook/core-events": "6.0.0-beta.31",
|
||||
"@storybook/theming": "6.0.0-beta.31",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3",
|
||||
|
||||
@ -21,7 +21,7 @@ If using relative sizing in your project (like `rem` or `em`), you may update th
|
||||
</style>
|
||||
```
|
||||
|
||||
That's it. Storybook will inject these tags to html body.
|
||||
That’s it. Storybook will inject these tags to the html body. It is also possible to use [environment variables](https://storybook.js.org/docs/configurations/env-vars/#usage-in-custom-headbody).
|
||||
|
||||
> **Important**
|
||||
>
|
||||
|
||||
@ -12,7 +12,7 @@ You can accomplish this by creating a file called `preview-head.html` inside the
|
||||
<script>try{ Typekit.load(); } catch(e){ }</script>
|
||||
```
|
||||
|
||||
That's it. Storybook will inject these tags.
|
||||
That's it. Storybook will inject these tags. It is also possible to use [environment variables](https://storybook.js.org/docs/configurations/env-vars/#usage-in-custom-headbody).
|
||||
|
||||
> **Important**
|
||||
>
|
||||
|
||||
@ -96,7 +96,6 @@ The webpack config [is configurable](/configurations/custom-webpack-config#webpa
|
||||
'./node_modules/@babel/plugin-syntax-dynamic-import/lib/index.js',
|
||||
[ './node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.js', { sourceMap: true, autoLabel: true } ],
|
||||
'./node_modules/babel-plugin-macros/dist/index.js',
|
||||
'./node_modules/@babel/plugin-transform-react-constant-elements/lib/index.js',
|
||||
'./node_modules/babel-plugin-add-react-displayname/index.js',
|
||||
[ './node_modules/babel-plugin-react-docgen/lib/index.js', { DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES' } ],
|
||||
],
|
||||
|
||||
@ -112,7 +112,6 @@ The webpack config [is configurable](/configurations/custom-webpack-config/), an
|
||||
'./node_modules/@babel/plugin-syntax-dynamic-import/lib/index.js',
|
||||
[ './node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.js', { sourceMap: true, autoLabel: true } ],
|
||||
'./node_modules/babel-plugin-macros/dist/index.js',
|
||||
'./node_modules/@babel/plugin-transform-react-constant-elements/lib/index.js',
|
||||
'./node_modules/babel-plugin-add-react-displayname/index.js',
|
||||
[ './node_modules/babel-plugin-react-docgen/lib/index.js', { DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES' } ],
|
||||
],
|
||||
|
||||
@ -18,7 +18,7 @@ Each framework uses the base configuration unless otherwise specified:
|
||||
|
||||
- **Angular** ignores the base and uses `ts-loader` and `ngx-template-loader`.
|
||||
- **Vue** ignores the uses `ts-loader` and applies it to both `.tsx?` and `.vue` files.
|
||||
- **React** adds `react-docgen-typescript-loader` the base.
|
||||
- **React** adds `react-docgen-typescript-plugin` the base.
|
||||
|
||||
## Main.js configuration
|
||||
|
||||
@ -42,12 +42,12 @@ module.exports = {
|
||||
|
||||
And here are the meaning of each field:
|
||||
|
||||
| Field | Framework | Description | Type |
|
||||
| -------------------------------- | --------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
|
||||
| **check** | All | optionally run `fork-ts-checker-webpack-plugin` | `boolean` |
|
||||
| **checkOptions** | All | Options to pass to `fork-ts-checker-webpack-plugin` if it's enabled | [See docs](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin) |
|
||||
| **reactDocgen** | React | which variant docgen processor to run | `'react-docgen-typescript' | 'react-docgen' | false` |
|
||||
| **reactDocgenTypescriptOptions** | React | Options to pass to `react-docgen-typescript-loader` if `react-docgen-typescript` is enabled. | [See docs](https://github.com/strothj/react-docgen-typescript-loader) |
|
||||
| Field | Framework | Description | Type |
|
||||
| -------------------------------- | --------- | -------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
|
||||
| **check** | All | optionally run `fork-ts-checker-webpack-plugin` | `boolean` |
|
||||
| **checkOptions** | All | Options to pass to `fork-ts-checker-webpack-plugin` if it's enabled | [See docs](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin) |
|
||||
| **reactDocgen** | React | which variant docgen processor to run | `'react-docgen-typescript' | 'react-docgen' | false` |
|
||||
| **reactDocgenTypescriptOptions** | React | Options to pass to `react-docgen-typescript-plugin` if `react-docgen-typescript` is enabled. | [See docs](https://github.com/hipstersmoothie/react-docgen-typescript-plugin) |
|
||||
|
||||
## Manual configuration
|
||||
|
||||
|
||||
@ -1 +1 @@
|
||||
{"version":"6.0.0-beta.23","info":{"plain":"### Features\n\n- Addon-docs: Add `docs.forceExtractedArgTypes` parameter ([#11069](https://github.com/storybookjs/storybook/pull/11069))\n\n### Bug Fixes\n\n- Vue: Fix force rendering ([#11076](https://github.com/storybookjs/storybook/pull/11076))\n- Controls: Fix enum extraction for react-docgen-typescript ([#11070](https://github.com/storybookjs/storybook/pull/11070))\n\n### Maintenance\n\n- Core: Zero-config Typescript e2e test ([#10843](https://github.com/storybookjs/storybook/pull/10843))"}}
|
||||
{"version":"6.0.0-beta.31","info":{"plain":"### Bug Fixes\n\n- React: Fix react-docgen for JS files ([#11217](https://github.com/storybookjs/storybook/pull/11217))\n- React: Load root tsconfig.json into docgen-typescript if none provided ([#11184](https://github.com/storybookjs/storybook/pull/11184))\n- Composition: Remove manual redirects ([#11196](https://github.com/storybookjs/storybook/pull/11196))\n\n### Dependency Upgrades\n\n- Bump react-draggable from 4.4.2 to 4.4.3 ([#11192](https://github.com/storybookjs/storybook/pull/11192))"}}
|
||||
@ -1,5 +1,6 @@
|
||||
module.exports = {
|
||||
stories: ['../src/stories/**/*.stories.@(ts|mdx)'],
|
||||
logLevel: 'debug',
|
||||
addons: [
|
||||
'@storybook/addon-docs',
|
||||
'@storybook/addon-controls',
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "angular-cli",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"private": true,
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
@ -37,19 +37,19 @@
|
||||
"@angular/cli": "^9.1.0",
|
||||
"@angular/compiler-cli": "^9.1.0",
|
||||
"@compodoc/compodoc": "^1.1.11",
|
||||
"@storybook/addon-a11y": "6.0.0-beta.23",
|
||||
"@storybook/addon-actions": "6.0.0-beta.23",
|
||||
"@storybook/addon-backgrounds": "6.0.0-beta.23",
|
||||
"@storybook/addon-controls": "6.0.0-beta.23",
|
||||
"@storybook/addon-docs": "6.0.0-beta.23",
|
||||
"@storybook/addon-jest": "6.0.0-beta.23",
|
||||
"@storybook/addon-knobs": "6.0.0-beta.23",
|
||||
"@storybook/addon-links": "6.0.0-beta.23",
|
||||
"@storybook/addon-storyshots": "6.0.0-beta.23",
|
||||
"@storybook/addon-storysource": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.23",
|
||||
"@storybook/angular": "6.0.0-beta.23",
|
||||
"@storybook/source-loader": "6.0.0-beta.23",
|
||||
"@storybook/addon-a11y": "6.0.0-beta.31",
|
||||
"@storybook/addon-actions": "6.0.0-beta.31",
|
||||
"@storybook/addon-backgrounds": "6.0.0-beta.31",
|
||||
"@storybook/addon-controls": "6.0.0-beta.31",
|
||||
"@storybook/addon-docs": "6.0.0-beta.31",
|
||||
"@storybook/addon-jest": "6.0.0-beta.31",
|
||||
"@storybook/addon-knobs": "6.0.0-beta.31",
|
||||
"@storybook/addon-links": "6.0.0-beta.31",
|
||||
"@storybook/addon-storyshots": "6.0.0-beta.31",
|
||||
"@storybook/addon-storysource": "6.0.0-beta.31",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"@storybook/angular": "6.0.0-beta.31",
|
||||
"@storybook/source-loader": "6.0.0-beta.31",
|
||||
"@types/core-js": "^2.5.0",
|
||||
"@types/jest": "^25.1.1",
|
||||
"@types/node": "^14.0.10",
|
||||
@ -60,7 +60,7 @@
|
||||
"jasmine-spec-reporter": "~5.0.2",
|
||||
"jest": "^26.0.0",
|
||||
"jest-preset-angular": "^8.2.0",
|
||||
"protractor": "~5.4.4",
|
||||
"protractor": "~7.0.0",
|
||||
"ts-node": "~8.9.1",
|
||||
"typescript": "^3.4.0"
|
||||
},
|
||||
|
||||
@ -0,0 +1,46 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Addon/Controls Basic 1`] = `
|
||||
<storybook-dynamic-app-root
|
||||
cfr={[Function CodegenComponentFactoryResolver]}
|
||||
data={[Function Object]}
|
||||
target={[Function ViewContainerRef_]}
|
||||
>
|
||||
<my-button>
|
||||
<button
|
||||
class="btn-secondary btn-medium"
|
||||
ng-reflect-ng-class="btn-secondary,btn-medium"
|
||||
>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
|
||||
width="100"
|
||||
/>
|
||||
Args test
|
||||
|
||||
</button>
|
||||
</my-button>
|
||||
</storybook-dynamic-app-root>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon/Controls Disabled 1`] = `
|
||||
<storybook-dynamic-app-root
|
||||
cfr={[Function CodegenComponentFactoryResolver]}
|
||||
data={[Function Object]}
|
||||
target={[Function ViewContainerRef_]}
|
||||
>
|
||||
<my-button>
|
||||
<button
|
||||
class="btn-secondary btn-medium"
|
||||
disabled=""
|
||||
ng-reflect-ng-class="btn-secondary,btn-medium"
|
||||
>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
|
||||
width="100"
|
||||
/>
|
||||
Disabled
|
||||
|
||||
</button>
|
||||
</my-button>
|
||||
</storybook-dynamic-app-root>
|
||||
`;
|
||||
18
examples/angular-cli/src/stories/addon-controls.stories.ts
Normal file
18
examples/angular-cli/src/stories/addon-controls.stories.ts
Normal file
@ -0,0 +1,18 @@
|
||||
import { ButtonComponent } from './doc-button/doc-button.component';
|
||||
|
||||
export default {
|
||||
title: 'Addon/Controls',
|
||||
component: ButtonComponent,
|
||||
parameters: { docs: { iframeHeight: 120 } },
|
||||
};
|
||||
|
||||
const ButtonStory = (args) => ({
|
||||
component: ButtonComponent,
|
||||
props: args,
|
||||
});
|
||||
|
||||
export const Basic = ButtonStory.bind({});
|
||||
Basic.args = { label: 'Args test', isDisabled: false };
|
||||
|
||||
export const Disabled = ButtonStory.bind({});
|
||||
Disabled.args = { label: 'Disabled', isDisabled: true };
|
||||
@ -1,5 +1,6 @@
|
||||
module.exports = {
|
||||
stories: ['../src/stories/**/*.stories.@(ts|mdx)'],
|
||||
logLevel: 'debug',
|
||||
addons: [
|
||||
'@storybook/addon-docs',
|
||||
'@storybook/addon-storysource',
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "aurelia-kitchen-sink",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"private": true,
|
||||
"description": "An Aurelia client application.",
|
||||
"repository": {
|
||||
@ -22,18 +22,18 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@aurelia/webpack-loader": "dev",
|
||||
"@storybook/addon-a11y": "6.0.0-beta.23",
|
||||
"@storybook/addon-actions": "6.0.0-beta.23",
|
||||
"@storybook/addon-backgrounds": "6.0.0-beta.23",
|
||||
"@storybook/addon-docs": "6.0.0-beta.23",
|
||||
"@storybook/addon-jest": "6.0.0-beta.23",
|
||||
"@storybook/addon-knobs": "6.0.0-beta.23",
|
||||
"@storybook/addon-links": "6.0.0-beta.23",
|
||||
"@storybook/addon-storyshots": "6.0.0-beta.23",
|
||||
"@storybook/addon-storysource": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.23",
|
||||
"@storybook/aurelia": "6.0.0-beta.23",
|
||||
"@storybook/source-loader": "6.0.0-beta.23",
|
||||
"@storybook/addon-a11y": "6.0.0-beta.31",
|
||||
"@storybook/addon-actions": "6.0.0-beta.31",
|
||||
"@storybook/addon-backgrounds": "6.0.0-beta.31",
|
||||
"@storybook/addon-docs": "6.0.0-beta.31",
|
||||
"@storybook/addon-jest": "6.0.0-beta.31",
|
||||
"@storybook/addon-knobs": "6.0.0-beta.31",
|
||||
"@storybook/addon-links": "6.0.0-beta.31",
|
||||
"@storybook/addon-storyshots": "6.0.0-beta.31",
|
||||
"@storybook/addon-storysource": "6.0.0-beta.31",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"@storybook/aurelia": "6.0.0-beta.31",
|
||||
"@storybook/source-loader": "6.0.0-beta.31",
|
||||
"@types/node": "^14.0.10",
|
||||
"css-loader": "^3.0.0",
|
||||
"file-loader": "^4.2.0",
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
|
||||
import { CoolButton } from '../cool-button/cool-button';
|
||||
import { Button } from '@storybook/aurelia/demo';
|
||||
import { addComponents } from '@storybook/aurelia';
|
||||
import { text, withKnobs, } from '@storybook/addon-knobs';
|
||||
import { text, withKnobs } from '@storybook/addon-knobs';
|
||||
import Button from './button';
|
||||
|
||||
<Meta title="Welcome" component={CoolButton} decorators={[withKnobs]}/>
|
||||
<Meta title="Welcome" component={CoolButton} decorators={[withKnobs]} />
|
||||
|
||||
# Welcome
|
||||
|
||||
@ -15,10 +15,8 @@ This is a test document written in MDX that defines a `CoolButton` story wrapped
|
||||
{{
|
||||
template: `<cool-button text.bind="testText"></cool-button>`,
|
||||
state: {
|
||||
testText: text('asfdafds', 'asasfdsa')
|
||||
}
|
||||
testText: text('asfdafds', 'asasfdsa'),
|
||||
},
|
||||
}}
|
||||
</Story>
|
||||
</Preview>
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,8 @@
|
||||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
stories: ['../src/stories/**/*.stories.@(js|mdx)'],
|
||||
logLevel: 'debug',
|
||||
addons: [
|
||||
'@storybook/preset-create-react-app',
|
||||
{
|
||||
@ -15,5 +19,13 @@ module.exports = {
|
||||
'@storybook/addon-a11y',
|
||||
'@storybook/addon-jest',
|
||||
],
|
||||
stories: ['../src/stories/**/*.stories.@(js|mdx)'],
|
||||
webpackFinal: (config) => {
|
||||
// add monorepo root as a valid directory to import modules from
|
||||
config.resolve.plugins.forEach((p) => {
|
||||
if (Array.isArray(p.appSrcs)) {
|
||||
p.appSrcs.push(path.join(__dirname, '..', '..', '..'));
|
||||
}
|
||||
});
|
||||
return config;
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cra-kitchen-sink",
|
||||
"version": "6.0.0-beta.23",
|
||||
"version": "6.0.0-beta.31",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "react-scripts build",
|
||||
@ -18,19 +18,19 @@
|
||||
"react-lifecycles-compat": "^3.0.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "6.0.0-beta.23",
|
||||
"@storybook/addon-actions": "6.0.0-beta.23",
|
||||
"@storybook/addon-backgrounds": "6.0.0-beta.23",
|
||||
"@storybook/addon-docs": "6.0.0-beta.23",
|
||||
"@storybook/addon-events": "6.0.0-beta.23",
|
||||
"@storybook/addon-jest": "6.0.0-beta.23",
|
||||
"@storybook/addon-knobs": "6.0.0-beta.23",
|
||||
"@storybook/addon-links": "6.0.0-beta.23",
|
||||
"@storybook/addon-storyshots": "6.0.0-beta.23",
|
||||
"@storybook/addons": "6.0.0-beta.23",
|
||||
"@storybook/client-logger": "6.0.0-beta.23",
|
||||
"@storybook/react": "6.0.0-beta.23",
|
||||
"@storybook/theming": "6.0.0-beta.23",
|
||||
"@storybook/addon-a11y": "6.0.0-beta.31",
|
||||
"@storybook/addon-actions": "6.0.0-beta.31",
|
||||
"@storybook/addon-backgrounds": "6.0.0-beta.31",
|
||||
"@storybook/addon-docs": "6.0.0-beta.31",
|
||||
"@storybook/addon-events": "6.0.0-beta.31",
|
||||
"@storybook/addon-jest": "6.0.0-beta.31",
|
||||
"@storybook/addon-knobs": "6.0.0-beta.31",
|
||||
"@storybook/addon-links": "6.0.0-beta.31",
|
||||
"@storybook/addon-storyshots": "6.0.0-beta.31",
|
||||
"@storybook/addons": "6.0.0-beta.31",
|
||||
"@storybook/client-logger": "6.0.0-beta.31",
|
||||
"@storybook/react": "6.0.0-beta.31",
|
||||
"@storybook/theming": "6.0.0-beta.31",
|
||||
"react-scripts": "^3.0.1"
|
||||
},
|
||||
"storybook": {
|
||||
|
||||
@ -1,8 +1,20 @@
|
||||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
stories: ['../src/stories/welcome.stories', '../src/stories/**/button.stories.js'],
|
||||
logLevel: 'debug',
|
||||
addons: [
|
||||
'@storybook/preset-create-react-app',
|
||||
'@storybook/addon-actions',
|
||||
'@storybook/addon-links',
|
||||
],
|
||||
webpackFinal: (config) => {
|
||||
// add monorepo root as a valid directory to import modules from
|
||||
config.resolve.plugins.forEach((p) => {
|
||||
if (Array.isArray(p.appSrcs)) {
|
||||
p.appSrcs.push(path.join(__dirname, '..', '..', '..'));
|
||||
}
|
||||
});
|
||||
return config;
|
||||
},
|
||||
};
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user