mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 06:01:22 +08:00
Merge branch 'next' into pr/brandonseydel/10853
# Conflicts: # yarn.lock
This commit is contained in:
Norbert de Langen
commit
5048280fcd
@ -31,6 +31,7 @@ module.exports = {
|
||||
},
|
||||
],
|
||||
['@babel/plugin-proposal-class-properties', { loose: true }],
|
||||
['@babel/plugin-proposal-private-methods', { loose: true }],
|
||||
'@babel/plugin-proposal-export-default-from',
|
||||
'@babel/plugin-syntax-dynamic-import',
|
||||
['@babel/plugin-proposal-object-rest-spread', { loose: true, useBuiltIns: true }],
|
||||
@ -43,7 +44,7 @@ module.exports = {
|
||||
overrides: [
|
||||
{
|
||||
test: './examples/vue-kitchen-sink',
|
||||
presets: ['babel-preset-vue'],
|
||||
presets: ['@vue/babel-preset-jsx'],
|
||||
env: {
|
||||
test: withTests,
|
||||
},
|
||||
|
||||
@ -55,7 +55,7 @@ jobs:
|
||||
- lib
|
||||
chromatic:
|
||||
<<: *defaults
|
||||
parallelism: 10
|
||||
parallelism: 11
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace:
|
||||
@ -77,7 +77,7 @@ jobs:
|
||||
yarn packtracker
|
||||
examples:
|
||||
<<: *defaults
|
||||
parallelism: 10
|
||||
parallelism: 11
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace:
|
||||
@ -105,7 +105,7 @@ jobs:
|
||||
- .verdaccio-cache
|
||||
examples-v2:
|
||||
docker:
|
||||
- image: cypress/included:4.5.0
|
||||
- image: cypress/included:4.7.0
|
||||
environment:
|
||||
TERM: xterm
|
||||
working_directory: /tmp/storybook
|
||||
@ -135,7 +135,7 @@ jobs:
|
||||
destination: cypress
|
||||
examples-v2-yarn-2:
|
||||
docker:
|
||||
- image: cypress/included:4.5.0
|
||||
- image: cypress/included:4.7.0
|
||||
environment:
|
||||
TERM: xterm
|
||||
working_directory: /tmp/storybook
|
||||
@ -166,7 +166,7 @@ jobs:
|
||||
e2e:
|
||||
working_directory: /tmp/storybook
|
||||
docker:
|
||||
- image: cypress/included:4.5.0
|
||||
- image: cypress/included:4.7.0
|
||||
environment:
|
||||
TERM: xterm
|
||||
steps:
|
||||
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@ -31,3 +31,4 @@ cypress/videos
|
||||
cypress/screenshots
|
||||
examples/ember-cli/ember-output
|
||||
.verdaccio-cache
|
||||
tsconfig.tsbuildinfo
|
||||
|
||||
151
CHANGELOG.md
151
CHANGELOG.md
@ -1,3 +1,154 @@
|
||||
## 6.0.0-beta.21 (June 4, 2020)
|
||||
|
||||
### Breaking Changes
|
||||
|
||||
- Preact: Update Preact version ([#10978](https://github.com/storybookjs/storybook/pull/10978))
|
||||
|
||||
### Features
|
||||
|
||||
- Addon-docs: Angular ArgTypes for pipes, injectables, classes ([#11016](https://github.com/storybookjs/storybook/pull/11016))
|
||||
- TypeScript: Add warning for setup issues and fix Babel config ([#10998](https://github.com/storybookjs/storybook/pull/10998))
|
||||
- Core: Add logLevel preset property to filter logging ([#10370](https://github.com/storybookjs/storybook/pull/10370))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Addon-controls: Fix initialization logic; remove react-select ([#11024](https://github.com/storybookjs/storybook/pull/11024))
|
||||
- CLI: Fix `sb init` in Yarn workspace environment ([#10985](https://github.com/storybookjs/storybook/pull/10985))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- React: Remove argsStory helper function ([#11036](https://github.com/storybookjs/storybook/pull/11036))
|
||||
- Addon-controls: Remove residual options-type controls ([#11015](https://github.com/storybookjs/storybook/pull/11015))
|
||||
|
||||
## 6.0.0-beta.20 (June 1, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Addon-controls: Fix `options` control types ([#11003](https://github.com/storybookjs/storybook/pull/11003))
|
||||
- Addon-controls: Fix no-control handling ([#11001](https://github.com/storybookjs/storybook/pull/11001))
|
||||
- Addon-docs: Fix function argType inference in react-docgen-typescript ([#10997](https://github.com/storybookjs/storybook/pull/10997))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Addon-controls/a11y: Fix PARAM_KEY export for consistency ([#10988](https://github.com/storybookjs/storybook/pull/10988))
|
||||
|
||||
## 6.0.0-beta.19 (May 30, 2020)
|
||||
|
||||
### Features
|
||||
|
||||
- Addon-controls: Add warning to controls tab on no-args story ([#10986](https://github.com/storybookjs/storybook/pull/10986))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Addon-docs: Handle JSON.parse exception for Angular union types ([#10984](https://github.com/storybookjs/storybook/pull/10984))
|
||||
|
||||
## 6.0.0-beta.18 (May 29, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Fix HMR for navigation sidebar in UI ([#10981](https://github.com/storybookjs/storybook/pull/10981))
|
||||
- Core: Fix `register.tsx` as manager code in preset heuristic ([#10980](https://github.com/storybookjs/storybook/pull/10980))
|
||||
- Core: Send global args with set stories ([#10910](https://github.com/storybookjs/storybook/pull/10910))
|
||||
- Core: Log swallowed errors when requiring stories ([#10974](https://github.com/storybookjs/storybook/pull/10974))
|
||||
- Core: Support valid globs ([#10926](https://github.com/storybookjs/storybook/pull/10926))
|
||||
|
||||
## 6.0.0-beta.17 (May 28, 2020)
|
||||
|
||||
### Features
|
||||
|
||||
- Addon-controls: Angular support ([#10946](https://github.com/storybookjs/storybook/pull/10946))
|
||||
- Addon-controls: Web-components support ([#10953](https://github.com/storybookjs/storybook/pull/10953))
|
||||
|
||||
## 6.0.0-beta.16 (May 28, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Add missing babel plugin ([#10941](https://github.com/storybookjs/storybook/pull/10941))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- CI: Stabilize E2E tests ([#10888](https://github.com/storybookjs/storybook/pull/10888))
|
||||
|
||||
## 6.0.0-beta.15 (May 27, 2020)
|
||||
|
||||
### Features
|
||||
|
||||
- Addon-Controls: Next-generation knobs ([#10834](https://github.com/storybookjs/storybook/pull/10834))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Avoid re-render on HMR of other stories ([#10908](https://github.com/storybookjs/storybook/pull/10908))
|
||||
- Core: Fix auth for refs ([#10845](https://github.com/storybookjs/storybook/pull/10845))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Bump react-syntax-highlighter from 11.0.2 to 12.2.1 ([#10919](https://github.com/storybookjs/storybook/pull/10919))
|
||||
|
||||
## 6.0.0-beta.14 (May 25, 2020)
|
||||
|
||||
### Breaking Changes
|
||||
|
||||
- CSF: Hoist story annotation object ([#10907](https://github.com/storybookjs/storybook/pull/10907))
|
||||
- Vue: Remove babel-preset-vue ([#10909](https://github.com/storybookjs/storybook/pull/10909))
|
||||
|
||||
### Features
|
||||
|
||||
- Angular: Support `workspace.json` in nx workspace ([#10881](https://github.com/storybookjs/storybook/pull/10881))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Addon-docs: Fix single item width in Preview block ([#10877](https://github.com/storybookjs/storybook/pull/10877))
|
||||
- UI: Center toolbar icon buttons ([#10897](https://github.com/storybookjs/storybook/pull/10897))
|
||||
- Core: Fix double rendering on startup ([#10892](https://github.com/storybookjs/storybook/pull/10892))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Core: Use dedicated loader for es6 modules ([#10783](https://github.com/storybookjs/storybook/pull/10783))
|
||||
- Core: Fix yarn test command on windows ([#10904](https://github.com/storybookjs/storybook/pull/10904))
|
||||
|
||||
## 5.3.19 (May 24, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- UI: Fix search stories ([#10539](https://github.com/storybookjs/storybook/pull/10539))
|
||||
|
||||
### Security
|
||||
|
||||
- Upgrade markdown-to-jsx to 6.11.4 ([#10873](https://github.com/storybookjs/storybook/pull/10873))
|
||||
|
||||
## 6.0.0-beta.13 (May 23, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Fix ts/tsx resolution in the manager ([#10886](https://github.com/storybookjs/storybook/pull/10886))
|
||||
- Core: Fix typo in projectRoot node_modules detection ([#10848](https://github.com/storybookjs/storybook/pull/10848))
|
||||
- Addon-docs: Fix story inline rendering ([#10875](https://github.com/storybookjs/storybook/pull/10875))
|
||||
- Core: Fix CRA filter for built-in webpack settings ([#10861](https://github.com/storybookjs/storybook/pull/10861))
|
||||
- Addon-docs: Fix react forwardRefs with destructured props ([#10864](https://github.com/storybookjs/storybook/pull/10864))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- React: Upgrade preset-create-react-app in examples ([#10867](https://github.com/storybookjs/storybook/pull/10867))
|
||||
- Core: Close server when e2e test failed ([#10868](https://github.com/storybookjs/storybook/pull/10868))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Upgrade markdown-to-jsx to 6.11.4 ([#10873](https://github.com/storybookjs/storybook/pull/10873))
|
||||
|
||||
## 6.0.0-beta.12 (May 21, 2020)
|
||||
|
||||
### Breaking Changes
|
||||
|
||||
- Core: Zero-config TypeScript loading ([#10813](https://github.com/storybookjs/storybook/pull/10813))
|
||||
|
||||
## 6.0.0-beta.11 (May 21, 2020)
|
||||
|
||||
Failed publish
|
||||
|
||||
## 6.0.0-beta.10 (May 21, 2020)
|
||||
|
||||
Failed publish
|
||||
|
||||
## 6.0.0-beta.9 (May 21, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
81
MIGRATION.md
81
MIGRATION.md
@ -1,6 +1,9 @@
|
||||
<h1>Migration</h1>
|
||||
|
||||
- [From version 5.3.x to 6.0.x](#from-version-53x-to-60x)
|
||||
- [Hoisted CSF annotations](#hoisted-csf-annotations)
|
||||
- [Zero config typescript](#zero-config-typescript)
|
||||
- [Correct globs in main.js](#correct-globs-in-mainjs)
|
||||
- [Backgrounds addon has a new api](#backgrounds-addon-has-a-new-api)
|
||||
- [CRA preset removed](#cra-preset-removed)
|
||||
- [Args passed as first argument to story](#args-passed-as-first-argument-to-story)
|
||||
@ -13,6 +16,7 @@
|
||||
- [Imported types](#imported-types)
|
||||
- [Rolling back](#rolling-back)
|
||||
- [New addon presets](#new-addon-presets)
|
||||
- [Removed babel-preset-vue from Vue preset](#removed-babel-preset-vue-from-vue-preset)
|
||||
- [Removed Deprecated APIs](#removed-deprecated-apis)
|
||||
- [New setStories event](#new-setstories-event)
|
||||
- [Client API changes](#client-api-changes)
|
||||
@ -113,6 +117,66 @@
|
||||
|
||||
## From version 5.3.x to 6.0.x
|
||||
|
||||
### Hoisted CSF annotations
|
||||
|
||||
Storybook 6 introduces hoisted CSF annotations and deprecates the `StoryFn.story` object-style annotation.
|
||||
|
||||
In 5.x CSF, you would annotate a story like this:
|
||||
|
||||
```js
|
||||
export const Basic = () => <Button />
|
||||
Basic.story = {
|
||||
name: 'foo',
|
||||
parameters: { ... },
|
||||
decorators: [ ... ],
|
||||
};
|
||||
```
|
||||
|
||||
In 6.0 CSF this becomes:
|
||||
|
||||
```js
|
||||
export const Basic = () => <Button />
|
||||
Basic.storyName = 'foo';
|
||||
Basic.parameters = { ... };
|
||||
Basic.decorators = [ ... ];
|
||||
```
|
||||
|
||||
1. The new syntax is slightly more compact/ergonomic compared the the old one
|
||||
2. Similar to React's `displayName`, `propTypes`, `defaultProps` annotations
|
||||
3. We're introducing a new feature, [Storybook Args](https://docs.google.com/document/d/1Mhp1UFRCKCsN8pjlfPdz8ZdisgjNXeMXpXvGoALjxYM/edit?usp=sharing), where the new syntax will be significantly more ergonomic
|
||||
|
||||
To help you upgrade your stories, we've crated a codemod:
|
||||
|
||||
```
|
||||
npx @storybook/cli@next migrate csf-hoist-story-annotations --glob="**/*.stories.js"
|
||||
```
|
||||
|
||||
For more information, [see the documentation](https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md#csf-hoist-story-annotations).
|
||||
|
||||
### Zero config typescript
|
||||
|
||||
Storybook has built-in Typescript support in 6.0. That means you should remove your complex Typescript configurations from your `.storybook` config. We've tried to pick sensible defaults that work out of the box, especially for nice prop table generation in `@storybook/addon-docs`.
|
||||
|
||||
To migrate from an old setup, we recommend deleting any typescript-specific webpack/babel configurations in your project. If you want to override the defaults, see the [typescript configuration docs](https://github.com/storybookjs/storybook/blob/next/docs/src/pages/configurations/typescript-config/index.md).
|
||||
|
||||
### Correct globs in main.js
|
||||
|
||||
In 5.3 we introduced the `main.js` file with a `stories` property. This property was documented as a "glob" pattern. This was our intention, however the implementation allowed for non valid globs to be specified and work. In fact, we promoted invalid globs in our documentation and CLI templates.
|
||||
|
||||
We've corrected this, the CLI templates have been changed to use valid globs.
|
||||
|
||||
We've also changed the code that resolves these globs, so that invalid globs will log a warning. They will break in the future, so if you see this warning, please ensure you're specifying a valid glob.
|
||||
|
||||
Example of an **invalid** glob:
|
||||
```
|
||||
stories: ['./**/*.stories.(ts|js)']
|
||||
```
|
||||
|
||||
Example of a **valid** glob:
|
||||
```
|
||||
stories: ['./**/*.stories.@(ts|js)']
|
||||
```
|
||||
|
||||
### Backgrounds addon has a new api
|
||||
|
||||
Starting in 6.0, the backgrounds addon now receives an object instead of an array as parameter, with a property to define the default background.
|
||||
@ -335,6 +399,23 @@ MyNonCheckedStory.story = {
|
||||
};
|
||||
```
|
||||
|
||||
### Removed babel-preset-vue from Vue preset
|
||||
|
||||
`babel-preset-vue` is not included by default anymore when using Storybook with Vue.
|
||||
This preset is outdated and [caused problems](https://github.com/storybookjs/storybook/issues/4475) with more modern setups.
|
||||
|
||||
If you have an older Vue setup that relied on this preset, make sure it is included in your babel config
|
||||
(install `babel-preset-vue` and add it to the presets).
|
||||
|
||||
```json
|
||||
{
|
||||
"presets": ["babel-preset-vue"]
|
||||
}
|
||||
```
|
||||
|
||||
However, please take a moment to review why this preset is necessary in your setup.
|
||||
One usecase used to be to enable JSX in your stories. For this case, we recommend to use `@vue/babel-preset-jsx` instead.
|
||||
|
||||
### Removed Deprecated APIs
|
||||
|
||||
In 6.0 we removed a number of APIs that were previously deprecated.
|
||||
|
||||
@ -160,11 +160,14 @@ See [Addon / Framework Support Table](ADDONS_SUPPORT.md)
|
||||
| ------------------------------------------- | -------------------------------------------------------------------------- |
|
||||
| [info](https://github.com/storybookjs/storybook/tree/master/addons/info) | Annotate stories with extra component usage information |
|
||||
| [notes](https://github.com/storybookjs/storybook/tree/master/addons/notes) | Annotate Storybook stories with notes |
|
||||
| [contexts](https://github.com/storybookjs/storybook/tree/master/addons/contexts) | Addon for driving your components under dynamic contexts |
|
||||
|
||||
In order to continue improving your experience, we have to eventually deprecate certain addons in favor of new, better tools.
|
||||
|
||||
If you're using info/notes, we highly recommend you to migrate to [docs](addons/docs/) instead, and [here is a guide](addons/docs/docs/recipes.md#migrating-from-notesinfo-addons) to help you.
|
||||
|
||||
If you're using contexts, we highly recommend you to migrate to [toolbars](https://github.com/storybookjs/storybook/tree/next/addons/toolbars) and [here is a guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-addon-contexts) to help you.
|
||||
|
||||
## Badges & Presentation materials
|
||||
|
||||
We have a badge! Link it to your live Storybook example.
|
||||
|
||||
@ -40,10 +40,8 @@ If you wish to selectively disable `a11y` checks for a subset of stories, you ca
|
||||
|
||||
```js
|
||||
export const MyNonCheckedStory = () => <SomeComponent />;
|
||||
MyNonCheckedStory.story = {
|
||||
parameters: {
|
||||
MyNonCheckedStory.parameters = {
|
||||
a11y: { disable: true },
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "6.0.0-beta.9",
|
||||
"version": "6.0.0-beta.21",
|
||||
"description": "a11y addon for storybook",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -33,14 +33,14 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.9",
|
||||
"@storybook/api": "6.0.0-beta.9",
|
||||
"@storybook/channels": "6.0.0-beta.9",
|
||||
"@storybook/client-api": "6.0.0-beta.9",
|
||||
"@storybook/client-logger": "6.0.0-beta.9",
|
||||
"@storybook/components": "6.0.0-beta.9",
|
||||
"@storybook/core-events": "6.0.0-beta.9",
|
||||
"@storybook/theming": "6.0.0-beta.9",
|
||||
"@storybook/addons": "6.0.0-beta.21",
|
||||
"@storybook/api": "6.0.0-beta.21",
|
||||
"@storybook/channels": "6.0.0-beta.21",
|
||||
"@storybook/client-api": "6.0.0-beta.21",
|
||||
"@storybook/client-logger": "6.0.0-beta.21",
|
||||
"@storybook/components": "6.0.0-beta.21",
|
||||
"@storybook/core-events": "6.0.0-beta.21",
|
||||
"@storybook/theming": "6.0.0-beta.21",
|
||||
"axe-core": "^3.5.2",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -2,6 +2,7 @@ import { DecoratorFunction } from '@storybook/addons';
|
||||
import deprecate from 'util-deprecate';
|
||||
import dedent from 'ts-dedent';
|
||||
|
||||
export { PARAM_KEY } from './constants';
|
||||
export * from './highlight';
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "6.0.0-beta.9",
|
||||
"version": "6.0.0-beta.21",
|
||||
"description": "Action Logger addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -28,12 +28,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.9",
|
||||
"@storybook/api": "6.0.0-beta.9",
|
||||
"@storybook/client-api": "6.0.0-beta.9",
|
||||
"@storybook/components": "6.0.0-beta.9",
|
||||
"@storybook/core-events": "6.0.0-beta.9",
|
||||
"@storybook/theming": "6.0.0-beta.9",
|
||||
"@storybook/addons": "6.0.0-beta.21",
|
||||
"@storybook/api": "6.0.0-beta.21",
|
||||
"@storybook/client-api": "6.0.0-beta.21",
|
||||
"@storybook/components": "6.0.0-beta.21",
|
||||
"@storybook/core-events": "6.0.0-beta.21",
|
||||
"@storybook/theming": "6.0.0-beta.21",
|
||||
"core-js": "^3.0.1",
|
||||
"fast-deep-equal": "^3.1.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -12,15 +12,16 @@ export const decorateAction = (_decorators: DecoratorFunction[]) => {
|
||||
);
|
||||
};
|
||||
|
||||
const deprecatedCallback = deprecate(() => {},
|
||||
'decorate.* is no longer supported as of Storybook 6.0.');
|
||||
|
||||
export const decorate = (_decorators: DecoratorFunction[]) => {
|
||||
return deprecate(
|
||||
() => {
|
||||
return {
|
||||
action: deprecate(() => {}, 'decorate.action is no longer supported as of Storybook 6.0.'),
|
||||
actions: deprecate(() => {},
|
||||
'decorate.actions is no longer supported as of Storybook 6.0.'),
|
||||
withActions: deprecate(() => {},
|
||||
'decorate.withActions is no longer supported as of Storybook 6.0.'),
|
||||
action: deprecatedCallback,
|
||||
actions: deprecatedCallback,
|
||||
withActions: deprecatedCallback,
|
||||
};
|
||||
},
|
||||
dedent`
|
||||
|
||||
@ -42,22 +42,20 @@ const createHandlers = (actionsFn: (...arg: any[]) => object, ...handles: any[])
|
||||
});
|
||||
};
|
||||
|
||||
const applyEventHandlers = (actionsFn: any, ...handles: any[]) => {
|
||||
const applyEventHandlers = deprecate(
|
||||
(actionsFn: any, ...handles: any[]) => {
|
||||
useEffect(() => {
|
||||
if (root != null) {
|
||||
const handlers = createHandlers(actionsFn, ...handles);
|
||||
handlers.forEach(({ eventName, handler }) => root.addEventListener(eventName, handler));
|
||||
return () =>
|
||||
handlers.forEach(({ eventName, handler }) => root.removeEventListener(eventName, handler));
|
||||
handlers.forEach(({ eventName, handler }) =>
|
||||
root.removeEventListener(eventName, handler)
|
||||
);
|
||||
}
|
||||
return undefined;
|
||||
}, [root, actionsFn, handles]);
|
||||
};
|
||||
|
||||
const applyDeprecatedOptions = (actionsFn: any, options: any[]) => {
|
||||
if (options) {
|
||||
deprecate(
|
||||
() => applyEventHandlers(actionsFn, options),
|
||||
},
|
||||
dedent`
|
||||
withActions(options) is deprecated, please configure addon-actions using the addParameter api:
|
||||
|
||||
@ -67,7 +65,11 @@ const applyDeprecatedOptions = (actionsFn: any, options: any[]) => {
|
||||
},
|
||||
});
|
||||
`
|
||||
)();
|
||||
);
|
||||
|
||||
const applyDeprecatedOptions = (actionsFn: any, options: any[]) => {
|
||||
if (options) {
|
||||
applyEventHandlers(actionsFn, options);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -20,15 +20,16 @@ Add the following content to it:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
addons: ['@storybook/addon-backgrounds']
|
||||
}
|
||||
addons: ['@storybook/addon-backgrounds'],
|
||||
};
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
Backgrounds requires two parameters:
|
||||
* `default` - matches the **name** of the value which will be selected by default.
|
||||
* `values` - an array of elements containing name and value (with a valid css color e.g. HEX, RGBA, etc.)
|
||||
|
||||
- `default` - matches the **name** of the value which will be selected by default.
|
||||
- `values` - an array of elements containing name and value (with a valid css color e.g. HEX, RGBA, etc.)
|
||||
|
||||
Write your stories like this:
|
||||
|
||||
@ -52,9 +53,7 @@ export default {
|
||||
},
|
||||
};
|
||||
|
||||
export const defaultView = () => (
|
||||
<button>Click me</button>
|
||||
);
|
||||
export const defaultView = () => <button>Click me</button>;
|
||||
```
|
||||
|
||||
You can add the backgrounds to all stories by using `parameters` in `.storybook/preview.js`:
|
||||
@ -78,25 +77,20 @@ import React from 'react';
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
}
|
||||
};
|
||||
|
||||
export const defaultView = () => (
|
||||
<button>Click me</button>
|
||||
);
|
||||
export const defaultView = () => <button>Click me</button>;
|
||||
|
||||
defaultView.story = {
|
||||
parameters: {
|
||||
defaultView.parameters = {
|
||||
backgrounds: {
|
||||
default: 'red',
|
||||
values: [
|
||||
{ name: 'red', value: 'rgba(255, 0, 0)' },
|
||||
],
|
||||
values: [{ name: 'red', value: 'rgba(255, 0, 0)' }],
|
||||
},
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
Once you have defined backgrounds for your stories (as can be seen in the examples above), you can set a default background per story by passing the `default` property using a name from the available backgrounds:
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
|
||||
@ -109,11 +103,9 @@ export default {
|
||||
parameters: {
|
||||
backgrounds: { default: 'twitter' },
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
export const twitterColorSelected = () => (
|
||||
<button>Click me</button>
|
||||
);
|
||||
export const twitterColorSelected = () => <button>Click me</button>;
|
||||
```
|
||||
|
||||
If you don't want to use backgrounds for a story, you can set the `backgrounds` parameter to `{ disable: true }` to skip the addon:
|
||||
@ -127,15 +119,11 @@ import React from 'react';
|
||||
*/
|
||||
export default {
|
||||
title: 'Button',
|
||||
}
|
||||
};
|
||||
|
||||
export const disabledBackgrounds = () => (
|
||||
<button>Click me</button>
|
||||
);
|
||||
export const disabledBackgrounds = () => <button>Click me</button>;
|
||||
|
||||
disabledBackgrounds.story = {
|
||||
parameters: {
|
||||
disabledBackgrounds.parameters = {
|
||||
backgrounds: { disable: true },
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "6.0.0-beta.9",
|
||||
"version": "6.0.0-beta.21",
|
||||
"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.9",
|
||||
"@storybook/api": "6.0.0-beta.9",
|
||||
"@storybook/client-logger": "6.0.0-beta.9",
|
||||
"@storybook/components": "6.0.0-beta.9",
|
||||
"@storybook/core-events": "6.0.0-beta.9",
|
||||
"@storybook/theming": "6.0.0-beta.9",
|
||||
"@storybook/addons": "6.0.0-beta.21",
|
||||
"@storybook/api": "6.0.0-beta.21",
|
||||
"@storybook/client-logger": "6.0.0-beta.21",
|
||||
"@storybook/components": "6.0.0-beta.21",
|
||||
"@storybook/core-events": "6.0.0-beta.21",
|
||||
"@storybook/theming": "6.0.0-beta.21",
|
||||
"core-js": "^3.0.1",
|
||||
"memoizerific": "^1.11.3",
|
||||
"react": "^16.8.3",
|
||||
|
||||
465
addons/controls/README.md
Normal file
465
addons/controls/README.md
Normal file
@ -0,0 +1,465 @@
|
||||
<center>
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/next/addons/controls/docs/media/addon-controls-hero.gif" width="80%" />
|
||||
</center>
|
||||
|
||||
<h1>Storybook Controls</h1>
|
||||
|
||||
Storybook Controls gives you UI to interact with a component's inputs dynamically, without needing to code. It creates an addon panel next to your component examples ("stories"), so you can edit them live.
|
||||
|
||||
It does not require any modification to your components, and stories for controls are:
|
||||
|
||||
- **Convenient.** Auto-generate controls based on [React/Vue/Angular/etc.](#framework-support) components.
|
||||
- **Portable.** Reuse your interactive stories in documentation, tests, and even in designs.
|
||||
- **Rich.** Customize the controls and interactive data to suit your exact needs.
|
||||
|
||||
Controls are built on top of [Storybook Args](https://github.com/storybookjs/storybook/blob/next/docs/src/pages/formats/component-story-format/index.md#args-story-inputs), which is an open, standards-based format that enable stories to be reused in a variety of contexts.
|
||||
|
||||
- **Documentation.** 100% compatible with [Storybook Docs](https://github.com/storybookjs/storybook/tree/next/addons/docs).
|
||||
- **Testing.** Import stories directly into your [Jest](https://jestjs.io/) tests.
|
||||
- **Ecosystem.** Reuse stories in design/development tools that support it.
|
||||
|
||||
Controls replaces [Storybook Knobs](https://github.com/storybookjs/storybook/tree/master/addons/knobs). It incorporates lessons from years of supporting Knobs on tens of thousands of projects and dozens of different frameworks. We couldn't incrementally fix knobs, so we built a better version.
|
||||
|
||||
<h2>Contents</h2>
|
||||
|
||||
- [Installation](#installation)
|
||||
- [Writing stories](#writing-stories)
|
||||
- [Getting started](#getting-started)
|
||||
- [Auto-generated args](#auto-generated-args)
|
||||
- [Custom controls args](#custom-controls-args)
|
||||
- [Fully custom args](#fully-custom-args)
|
||||
- [Template stories](#template-stories)
|
||||
- [Configuration](#configuration)
|
||||
- [Control annotations](#control-annotations)
|
||||
- [Parameters](#parameters)
|
||||
- [Expanded: show property documentation](#expanded-show-property-documentation)
|
||||
- [Framework support](#framework-support)
|
||||
- [FAQs](#faqs)
|
||||
- [How will this replace addon-knobs?](#how-will-this-replace-addon-knobs)
|
||||
- [How do I migrate from addon-knobs?](#how-do-i-migrate-from-addon-knobs)
|
||||
|
||||
## Installation
|
||||
|
||||
Controls requires [Storybook Docs](https://github.com/storybookjs/storybook/tree/next/addons/docs). If you're not using it already, please install that first.
|
||||
|
||||
Next, install the package:
|
||||
|
||||
```sh
|
||||
npm install @storybook/addon-controls -D # or yarn
|
||||
```
|
||||
|
||||
And add it to your `.storybook/main.js` config:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
addons: [
|
||||
'@storybook/addon-docs'
|
||||
'@storybook/addon-controls'
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
## Writing stories
|
||||
|
||||
Let's see how to write stories that automatically generate controls based on your component properties.
|
||||
|
||||
Controls is built on [Storybook Args](https://github.com/storybookjs/storybook/blob/next/docs/src/pages/formats/component-story-format/index.md#args-story-inputs), which is a small, backwards-compatible change to Storybook's [Component Story Format](https://medium.com/storybookjs/component-story-format-66f4c32366df).
|
||||
|
||||
This section is a step-by-step walkthrough for how to upgrade your stories. It takes you from a starting point of the traditional "no args" stories, to auto-generated args, to auto-generated args with custom controls, to fully custom args if you need them.
|
||||
|
||||
### Getting started
|
||||
|
||||
Let's start with the following component/story combination, which should look familiar if you're coming from an older version of Storybook.
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
interface ButtonProps {
|
||||
/** The main label of the button */
|
||||
label?: string;
|
||||
}
|
||||
export const Button = ({ label = 'FIXME' }: ButtonProps) => <button>{label}</button>;
|
||||
```
|
||||
|
||||
And here's a story that shows that Button component:
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
import { Button } from './Button';
|
||||
export default { title: 'Button', component: Button };
|
||||
|
||||
export const Basic = () => <Button label="hello" />;
|
||||
```
|
||||
|
||||
After installing the controls addon, you'll see a new tab that shows the component's props, but it doesn't show controls because the story doesn't use args. That's not very useful, but we'll fix that momentarily.
|
||||
|
||||
<center>
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/next/addons/controls/docs/media/addon-controls-install.png" width="80%" />
|
||||
</center>
|
||||
|
||||
### Auto-generated args
|
||||
|
||||
To upgrade your story to an Args story, modify it to accept an args object. **NOTE:** you may need to refresh the browser at this point.
|
||||
|
||||
```jsx
|
||||
export const Basic = (args) => {
|
||||
console.log({ args });
|
||||
return <Button label="hello" />;
|
||||
};
|
||||
```
|
||||
|
||||
Now you'll see auto-generated controls in the `Controls` tab, and you can see the `args` data updating as you edit the values in the UI:
|
||||
|
||||
<center>
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/next/addons/controls/docs/media/addon-controls-args-logging.png" width="80%" />
|
||||
</center>
|
||||
|
||||
Since the args directly matches the `Button`'s props, we can pass it into the args directly:
|
||||
|
||||
```jsx
|
||||
export const Basic = (args) => <Button {...args} />;
|
||||
```
|
||||
|
||||
This generates an interactive UI:
|
||||
|
||||
<center>
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/next/addons/controls/docs/media/addon-controls-args-no-annotation.png" width="80%" />
|
||||
</center>
|
||||
|
||||
Unfortunately this uses the default values specified in the component, and not the label `hello`, which is what we wanted. To address this, we add an `args` annotation to the story, which specifies the initial values:
|
||||
|
||||
```jsx
|
||||
export const Basic = (args) => <Button {...args} />;
|
||||
Basic.args = { label: 'hello' };
|
||||
```
|
||||
|
||||
Now we're back where we started, but we have a fully interactive story!
|
||||
|
||||
<center>
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/next/addons/controls/docs/media/addon-controls-args-annotated.png" width="80%" />
|
||||
</center>
|
||||
|
||||
And this fully interactive story is also available in the `Docs` tab of Storybook:
|
||||
|
||||
<center>
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/next/addons/controls/docs/media/addon-controls-args-docs.png" width="80%" />
|
||||
</center>
|
||||
|
||||
### Custom controls args
|
||||
|
||||
There are cases where you'd like to customize the controls that get auto-generated from your component.
|
||||
|
||||
Consider the following modification to the `Button` we introduced above:
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
interface ButtonProps {
|
||||
label?: string;
|
||||
background?: string;
|
||||
}
|
||||
export const Button = ({ background, label = 'FIXME' }: ButtonProps) => (
|
||||
<button style={{ backgroundColor: background }}>{label}</button>
|
||||
);
|
||||
```
|
||||
|
||||
And the slightly expanded story:
|
||||
|
||||
```jsx
|
||||
export const Basic = (args) => <Button {...args} />;
|
||||
Basic.args = { label: 'hello', background: '#ff0' };
|
||||
```
|
||||
|
||||
This generates the following `Controls` UI:
|
||||
|
||||
<center>
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/next/addons/controls/docs/media/addon-controls-args-background-string.png" width="80%" />
|
||||
</center>
|
||||
|
||||
This works as long as you type a valid string into the auto-generated text control, but it's certainly is not the best UI for picking a color.
|
||||
|
||||
We can specify which controls get used by declaring a custom `ArgType` for the `background` property. `ArgTypes` encode basic metadata for args, such as `name`, `description`, `defaultValue` for an arg. These get automatically filled in by `Storybook Docs`.
|
||||
|
||||
`ArgTypes` can also contain arbitrary annotations which can be overridden by the user. Since `background` is a property of the component, let's put that annotation on the default export.
|
||||
|
||||
```jsx
|
||||
import { Button } from './Button';
|
||||
export default {
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
argTypes: {
|
||||
background: { control: { type: 'color' } },
|
||||
},
|
||||
};
|
||||
|
||||
export const Basic = (args) => <Button {...args} />;
|
||||
Basic.args = { label: 'hello', background: '#ff0' };
|
||||
```
|
||||
|
||||
This generates the following UI, which is what we wanted in the first place:
|
||||
|
||||
<center>
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/next/addons/controls/docs/media/addon-controls-args-background-color.png" width="80%" />
|
||||
</center>
|
||||
|
||||
### 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?
|
||||
|
||||
Consider the following story for our `Button` from above:
|
||||
|
||||
```jsx
|
||||
import range from 'lodash/range';
|
||||
// export default etc.
|
||||
|
||||
export const Reflow = ({ count, label, ...args }) => (
|
||||
<>
|
||||
{range(count).map((i) => (
|
||||
<Button label={`${label} ${i}`} {...args} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
Reflow.args = { count: 3, label: 'reflow' };
|
||||
```
|
||||
|
||||
This generates the following UI:
|
||||
|
||||
<center>
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/next/addons/controls/docs/media/addon-controls-args-reflow.png" width="80%" />
|
||||
</center>
|
||||
|
||||
Storybook has inferred the control to be a numeric input based on the initial value of the `count` arg. As we did above, we can also specify a custom control [as we did above](#custom-controls). Only this time since it's story specific we can do it at the story level:
|
||||
|
||||
```jsx
|
||||
// export const Reflow = ... (as above)
|
||||
// Reflow.args = ...
|
||||
Reflow.argTypes = {
|
||||
count: { control: { type: 'range', min: 0, max: 20 } },
|
||||
};
|
||||
```
|
||||
|
||||
This generates the following UI with a custom range slider:
|
||||
|
||||
<center>
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/next/addons/controls/docs/media/addon-controls-args-reflow-slider.png" width="80%" />
|
||||
</center>
|
||||
|
||||
<h4>Angular</h4>
|
||||
|
||||
To achieve this within an angular-cli build.
|
||||
|
||||
```jsx
|
||||
export const Reflow = ({ count, label, ...args }) => ({
|
||||
props: {
|
||||
label: label,
|
||||
count: [...Array(count).keys()]
|
||||
},
|
||||
template: `<Button *ngFor="let i of count">{{label}} {{i}}</Button>`
|
||||
}
|
||||
);
|
||||
Reflow.args = { count: 3, label: 'reflow' };
|
||||
```
|
||||
|
||||
### Template stories
|
||||
|
||||
Suppose you've created the `Basic` story from above, but now we want to create a second story with a different state, such as how the button renders with the label is really long.
|
||||
|
||||
The simplest thing would be to create a second story:
|
||||
|
||||
```jsx
|
||||
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:
|
||||
|
||||
```jsx
|
||||
export const VeryLongLabel = Basic.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();
|
||||
VeryLongLabel.args = { ...Basic.args, label: 'this is a very long string' };
|
||||
```
|
||||
|
||||
<center>
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/next/addons/controls/docs/media/addon-controls-args-template.png" width="80%" />
|
||||
</center>
|
||||
|
||||
## Configuration
|
||||
|
||||
The controls addon can be configured in two ways:
|
||||
|
||||
- Individual controls can be configured via [control annotations](#control-annotations),
|
||||
- The addon's appearance can be configured via [parameters](#parameters).
|
||||
|
||||
### Control annotations
|
||||
|
||||
As shown above in the [custom control args](#custom-controls-args) and [fully custom args](#fully-custom-args) sections, you can configure controls via a "control" annotation in the `argTypes` field of either a component or story.
|
||||
|
||||
Here is the full list of available controls:
|
||||
|
||||
| data type | control type | description | options |
|
||||
| ----------- | ------------ | -------------------------------------------------------------- | -------------- |
|
||||
| **array** | array | serialize array into a comma-separated string inside a textbox | separator |
|
||||
| **boolean** | boolean | checkbox input | - |
|
||||
| **number** | number | a numberic text box input | min, max, step |
|
||||
| | range | a range slider input | min, max, step |
|
||||
| **object** | object | json editor text input | - |
|
||||
| **enum** | radio | radio buttons input | options |
|
||||
| | inline-radio | inline radio buttons input | options |
|
||||
| | check | multi-select checkbox input | options |
|
||||
| | inline-check | multi-select inline checkbox input | options |
|
||||
| | select | select dropdown input | options |
|
||||
| | multi-select | multi-select dropdown input | options |
|
||||
| **string** | text | simple text input | - |
|
||||
| | color | color picker input that assumes strings are color values | - |
|
||||
| | date | date picker input | - |
|
||||
|
||||
Example customizing a control for an `enum` data type (defaults to `select` control type):
|
||||
|
||||
```js
|
||||
export default {
|
||||
title: 'Widget',
|
||||
component: Widget,
|
||||
argTypes: {
|
||||
loadingState: {
|
||||
type: 'inline-radio',
|
||||
options: ['loading', 'error', 'ready'],
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
Example customizing a `number` data type (defaults to `number` control type):
|
||||
|
||||
```js
|
||||
export default {
|
||||
title: 'Gizmo',
|
||||
component: Gizmo,
|
||||
argTypes: {
|
||||
width: { type: 'range', min: 400, max: 1200, step: 50 };
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Parameters
|
||||
|
||||
Controls supports the following configuration parameters, either [globally or on a per-story basis](https://storybook.js.org/docs/basics/writing-stories/#parameters):
|
||||
|
||||
- [Expanded: show property documentation](#expanded-show-property-documentation)
|
||||
- [Hide NoControls warning](#hide-nocontrols-warning)
|
||||
|
||||
#### Expanded: show property documentation
|
||||
|
||||
Since Controls is built on the same engine as Storybook Docs, it can also show property documentation alongside your controls using the `expanded` parameter (defaults to `false`).
|
||||
|
||||
To enable expanded mode globally, add the following to `.storybook/preview.js`:
|
||||
|
||||
```jsx
|
||||
export const parameters = {
|
||||
controls: { expanded: true },
|
||||
};
|
||||
```
|
||||
|
||||
And here's what the resulting UI looks like:
|
||||
|
||||
<center>
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/next/addons/controls/docs/media/addon-controls-expanded.png" width="80%" />
|
||||
</center>
|
||||
|
||||
#### Hide NoControls warning
|
||||
|
||||
If you don't plan to handle the control args inside your Story, you can remove the warning with:
|
||||
|
||||
```jsx
|
||||
Basic.parameters = {
|
||||
controls: { hideNoControlsWarning: true },
|
||||
};
|
||||
```
|
||||
|
||||
## Framework support
|
||||
|
||||
| | Manual | Auto-generated |
|
||||
| -------------- | :----: | :------------: |
|
||||
| React | + | + |
|
||||
| Vue | + | + |
|
||||
| Angular | + | + |
|
||||
| Ember | + | # |
|
||||
| Web components | + | + |
|
||||
| HTML | + | |
|
||||
| Svelte | + | |
|
||||
| Preact | + | |
|
||||
| Riot | + | |
|
||||
| Mithril | + | |
|
||||
| Marko | + | |
|
||||
|
||||
**Note:** `#` = WIP support
|
||||
|
||||
## FAQs
|
||||
|
||||
### How will this replace addon-knobs?
|
||||
|
||||
Addon-knobs is one of Storybook's most popular addons with over 1M weekly downloads, so we know lots of users will be affected by this change. Knobs is also a mature addon, with various options that are not available in addon-controls.
|
||||
|
||||
Therefore, rather than deprecating addon-knobs immediately, we will continue to release knobs with the Storybook core distribution until 7.0. This will give us time to improve Controls based on user feedback, and also give knobs users ample time to migrate.
|
||||
|
||||
If you are somehow tied to knobs or prefer the knobs interface, we are happy to take on maintainers for the knobs project. If this interests you, hop on our [Discord](https://discord.gg/UUt2PJb).
|
||||
|
||||
### How do I migrate from addon-knobs?
|
||||
|
||||
If you're already using [Storybook Knobs](https://github.com/storybookjs/storybook/tree/master/addons/knobs) you should consider migrating to Controls.
|
||||
|
||||
You're probably using it for something that can be satisfied by one of the cases [described above](#writing-stories).
|
||||
|
||||
Let's walk through two examples: migrating [knobs to auto-generated args](#knobs-to-custom-args) and [knobs to custom args](#knobs-to-custom-args).
|
||||
|
||||
<h4>Knobs to auto-generated args</h4>
|
||||
|
||||
First, let's consider a knobs version of a basic story that fills in the props for a component:
|
||||
|
||||
```jsx
|
||||
import { text } from '@storybook/addon-knobs';
|
||||
import { Button } from './Button';
|
||||
|
||||
export const Basic = () => <Button label={text('Label', 'hello')} />;
|
||||
```
|
||||
|
||||
This fills in the Button's label based on a knob, which is exactly the [auto-generated](#auto-generated-args) use case above. So we can rewrite it using auto-generated args:
|
||||
|
||||
```jsx
|
||||
export const Basic = (args) => <Button {...args} />;
|
||||
Basic.args = { label: 'hello' };
|
||||
```
|
||||
|
||||
<h4>Knobs to manually-configured args</h4>
|
||||
|
||||
Similarly, we can also consider a story that uses knob inputs to change its behavior:
|
||||
|
||||
```jsx
|
||||
import range from 'lodash/range';
|
||||
import { number, text } from '@storybook/addon-knobs';
|
||||
|
||||
export const Reflow = () => {
|
||||
const count = number('Count', 10, { min: 0, max: 100, range: true });
|
||||
const label = number('Label', 'reflow');
|
||||
return (
|
||||
<>
|
||||
{range(count).map((i) => (
|
||||
<Button label={`button ${i}`} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
And again, as above, this can be rewritten using [fully custom args](#fully-custom-args):
|
||||
|
||||
```jsx
|
||||
export const Reflow = ({ count, label, ...args }) => (
|
||||
<>{range(count).map((i) => <Button label={`${label} ${i}` {...args}} />)}</>
|
||||
);
|
||||
Reflow.args = { count: 3, label: 'reflow' };
|
||||
Reflow.argTypes = { count: { control: { type: 'range', min: 0, max: 20 } } };
|
||||
```
|
||||
BIN
addons/controls/docs/media/addon-controls-args-annotated.png
Normal file
BIN
addons/controls/docs/media/addon-controls-args-annotated.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
addons/controls/docs/media/addon-controls-args-docs.png
Normal file
BIN
addons/controls/docs/media/addon-controls-args-docs.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
addons/controls/docs/media/addon-controls-args-logging.png
Normal file
BIN
addons/controls/docs/media/addon-controls-args-logging.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
BIN
addons/controls/docs/media/addon-controls-args-no-annotation.png
Normal file
BIN
addons/controls/docs/media/addon-controls-args-no-annotation.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
addons/controls/docs/media/addon-controls-args-reflow-slider.png
Normal file
BIN
addons/controls/docs/media/addon-controls-args-reflow-slider.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
BIN
addons/controls/docs/media/addon-controls-args-reflow.png
Normal file
BIN
addons/controls/docs/media/addon-controls-args-reflow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
addons/controls/docs/media/addon-controls-args-template.png
Normal file
BIN
addons/controls/docs/media/addon-controls-args-template.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
addons/controls/docs/media/addon-controls-expanded.png
Normal file
BIN
addons/controls/docs/media/addon-controls-expanded.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
addons/controls/docs/media/addon-controls-hero.gif
Normal file
BIN
addons/controls/docs/media/addon-controls-hero.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 470 KiB |
BIN
addons/controls/docs/media/addon-controls-install.png
Normal file
BIN
addons/controls/docs/media/addon-controls-install.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
47
addons/controls/package.json
Normal file
47
addons/controls/package.json
Normal file
@ -0,0 +1,47 @@
|
||||
{
|
||||
"name": "@storybook/addon-controls",
|
||||
"version": "6.0.0-beta.21",
|
||||
"description": "Controls for component properties",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"storybook",
|
||||
"knobs",
|
||||
"controls",
|
||||
"properties"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/addons/controls",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/controls"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/register.js",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts"
|
||||
],
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.21",
|
||||
"@storybook/api": "6.0.0-beta.21",
|
||||
"@storybook/client-api": "6.0.0-beta.21",
|
||||
"@storybook/components": "6.0.0-beta.21",
|
||||
"@storybook/theming": "6.0.0-beta.21",
|
||||
"core-js": "^3.0.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*",
|
||||
"react-dom": "*"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
}
|
||||
1
addons/controls/preset.js
Normal file
1
addons/controls/preset.js
Normal file
@ -0,0 +1 @@
|
||||
module.exports = require('./dist/preset');
|
||||
1
addons/controls/register.js
Normal file
1
addons/controls/register.js
Normal file
@ -0,0 +1 @@
|
||||
export * from './dist/register';
|
||||
44
addons/controls/src/components/ControlsPanel.tsx
Normal file
44
addons/controls/src/components/ControlsPanel.tsx
Normal file
@ -0,0 +1,44 @@
|
||||
import React, { FC } from 'react';
|
||||
import { styled } from '@storybook/theming';
|
||||
import { ArgsTable, Link } from '@storybook/components';
|
||||
import { useArgs, useArgTypes, useParameter } from '@storybook/api';
|
||||
import { PARAM_KEY } from '../constants';
|
||||
|
||||
interface ControlsParameters {
|
||||
expanded?: boolean;
|
||||
hideNoControlsWarning?: boolean;
|
||||
}
|
||||
|
||||
const NoControlsWrapper = styled.div(({ theme }) => ({
|
||||
background: theme.background.warning,
|
||||
padding: 20,
|
||||
}));
|
||||
|
||||
const NoControlsWarning = () => (
|
||||
<NoControlsWrapper>
|
||||
This story is not configured to handle controls.
|
||||
<Link
|
||||
href="https://github.com/storybookjs/storybook/blob/next/addons/controls/README.md#writing-stories"
|
||||
target="_blank"
|
||||
cancel={false}
|
||||
>
|
||||
Learn how to add controls »
|
||||
</Link>
|
||||
</NoControlsWrapper>
|
||||
);
|
||||
|
||||
export const ControlsPanel: FC = () => {
|
||||
const [args, updateArgs] = useArgs();
|
||||
const rows = useArgTypes();
|
||||
const { expanded, hideNoControlsWarning = false } = useParameter<ControlsParameters>(
|
||||
PARAM_KEY,
|
||||
{}
|
||||
);
|
||||
const hasControls = Object.values(rows).filter((argType) => argType?.control?.type).length > 0;
|
||||
return (
|
||||
<>
|
||||
{hasControls || hideNoControlsWarning ? null : <NoControlsWarning />}
|
||||
<ArgsTable {...{ compact: !expanded && hasControls, rows, args, updateArgs }} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
2
addons/controls/src/constants.ts
Normal file
2
addons/controls/src/constants.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export const ADDON_ID = 'addon-controls' as const;
|
||||
export const PARAM_KEY = 'controls' as const;
|
||||
1
addons/controls/src/index.ts
Normal file
1
addons/controls/src/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { PARAM_KEY } from './constants';
|
||||
3
addons/controls/src/preset/index.ts
Normal file
3
addons/controls/src/preset/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export function managerEntries(entry: any[] = []) {
|
||||
return [...entry, require.resolve('../register')];
|
||||
}
|
||||
24
addons/controls/src/register.tsx
Normal file
24
addons/controls/src/register.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
import React from 'react';
|
||||
import addons, { types } from '@storybook/addons';
|
||||
import { AddonPanel } from '@storybook/components';
|
||||
import { API } from '@storybook/api';
|
||||
import { ControlsPanel } from './components/ControlsPanel';
|
||||
import { ADDON_ID, PARAM_KEY } from './constants';
|
||||
|
||||
addons.register(ADDON_ID, (api: API) => {
|
||||
addons.addPanel(ADDON_ID, {
|
||||
title: 'Controls',
|
||||
type: types.PANEL,
|
||||
paramKey: PARAM_KEY,
|
||||
render: ({ key, active }) => {
|
||||
if (!active || !api.getCurrentStoryData()) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<AddonPanel key={key} active={active}>
|
||||
<ControlsPanel />
|
||||
</AddonPanel>
|
||||
);
|
||||
},
|
||||
});
|
||||
});
|
||||
9
addons/controls/tsconfig.json
Normal file
9
addons/controls/tsconfig.json
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": ["webpack-env", "jest"]
|
||||
},
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["src/**.test.ts"]
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-cssresources",
|
||||
"version": "6.0.0-beta.9",
|
||||
"version": "6.0.0-beta.21",
|
||||
"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.9",
|
||||
"@storybook/api": "6.0.0-beta.9",
|
||||
"@storybook/components": "6.0.0-beta.9",
|
||||
"@storybook/core-events": "6.0.0-beta.9",
|
||||
"@storybook/theming": "6.0.0-beta.9",
|
||||
"@storybook/addons": "6.0.0-beta.21",
|
||||
"@storybook/api": "6.0.0-beta.21",
|
||||
"@storybook/components": "6.0.0-beta.21",
|
||||
"@storybook/core-events": "6.0.0-beta.21",
|
||||
"@storybook/theming": "6.0.0-beta.21",
|
||||
"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.9",
|
||||
"version": "6.0.0-beta.21",
|
||||
"description": "Design asset preview for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -34,12 +34,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.9",
|
||||
"@storybook/api": "6.0.0-beta.9",
|
||||
"@storybook/client-logger": "6.0.0-beta.9",
|
||||
"@storybook/components": "6.0.0-beta.9",
|
||||
"@storybook/core-events": "6.0.0-beta.9",
|
||||
"@storybook/theming": "6.0.0-beta.9",
|
||||
"@storybook/addons": "6.0.0-beta.21",
|
||||
"@storybook/api": "6.0.0-beta.21",
|
||||
"@storybook/client-logger": "6.0.0-beta.21",
|
||||
"@storybook/components": "6.0.0-beta.21",
|
||||
"@storybook/core-events": "6.0.0-beta.21",
|
||||
"@storybook/theming": "6.0.0-beta.21",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3",
|
||||
|
||||
@ -7,7 +7,7 @@ import { Panel } from './panel';
|
||||
|
||||
addons.register(ADDON_ID, () => {
|
||||
addons.add(PANEL_ID, {
|
||||
title: 'design assets',
|
||||
title: 'Design Assets',
|
||||
type: types.PANEL,
|
||||
render: ({ active, key }) => (
|
||||
<AddonPanel active={active} key={key}>
|
||||
|
||||
@ -113,7 +113,7 @@ Then add the following to your `.storybook/main.js`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
stories: ['../src/**/*.stories.(js|mdx)'],
|
||||
stories: ['../src/**/*.stories.@(js|mdx)'],
|
||||
addons: ['@storybook/addon-docs'],
|
||||
};
|
||||
```
|
||||
@ -226,12 +226,7 @@ addParameters({
|
||||
|
||||
## TypeScript configuration
|
||||
|
||||
SB Docs for React uses `babel-plugin-react-docgen` to extract Docgen comments from your code automatically. However, if you're using TypeScript, some extra configuration maybe required to get this information included in your docs.
|
||||
|
||||
1. You can add [react-docgen-typescript-loader](https://www.npmjs.com/package/react-docgen-typescript-loader) to your project by following the instructions there.
|
||||
2. You can use [@storybook/preset-typescript](https://www.npmjs.com/package/@storybook/preset-typescript) which includes `react-docgen-typescript-loader`.
|
||||
|
||||
Install the preset with care. If you've already configured Typescript manually, that configuration may conflict with the preset. You can [debug your final webpack configuration with `--debug-webpack`](https://storybook.js.org/docs/configurations/custom-webpack-config/#debug-the-default-webpack-config).
|
||||
As of SB6 [TypeScript is zero-config](https://github.com/storybookjs/storybook/blob/next/docs/src/pages/configurations/typescript-config/index.md) and should work with SB Docs out of the box. For advanced configuration options, refer to the [Props documentation](./docs/props-tables.md).
|
||||
|
||||
## More resources
|
||||
|
||||
|
||||
@ -12,6 +12,7 @@ To learn more about Storybook Docs, read the [general documentation](../README.m
|
||||
|
||||
- [Installation](#installation)
|
||||
- [DocsPage](#docspage)
|
||||
- [Props tables](#props-tables)
|
||||
- [MDX](#mdx)
|
||||
- [IFrame height](#iframe-height)
|
||||
- [More resources](#more-resources)
|
||||
@ -36,7 +37,9 @@ module.exports = {
|
||||
|
||||
When you [install docs](#installation) you should get basic [DocsPage](../docs/docspage.md) documentation automagically for all your stories, available in the `Docs` tab of the Storybook UI.
|
||||
|
||||
Props tables for your components requires a few more steps. Docs for Angular relies on [Compodoc](https://compodoc.app/), the excellent API documentation tool. It supports `inputs`, `outputs`, `properties`, `methods`, `view/content child/children` as first class prop types.
|
||||
## Props tables
|
||||
|
||||
Getting [Props tables](../docs/props-tables.md) for your components requires a few more steps. Docs for Angular relies on [Compodoc](https://compodoc.app/), the excellent API documentation tool. It supports `inputs`, `outputs`, `properties`, `methods`, `view/content child/children` as first class prop types.
|
||||
|
||||
To get this, you'll first need to install Compodoc:
|
||||
|
||||
@ -103,7 +106,7 @@ Then update your `.storybook/main.js` to make sure you load MDX files:
|
||||
|
||||
```ts
|
||||
module.exports = {
|
||||
stories: ['../src/stories/**/*.stories.(js|ts|mdx)'],
|
||||
stories: ['../src/stories/**/*.stories.@(js|ts|mdx)'],
|
||||
};
|
||||
```
|
||||
|
||||
@ -192,8 +195,8 @@ For `DocsPage`, you need to update the parameter locally in a story:
|
||||
|
||||
```ts
|
||||
export const basic = () => ...
|
||||
basic.story = {
|
||||
parameters: { docs: { iframeHeight: 400 } }
|
||||
basic.parameters = {
|
||||
docs: { iframeHeight: 400 }
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -44,7 +44,7 @@ Then update your `.storybook/main.js` to make sure you load MDX files:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
stories: ['../src/stories/**/*.stories.(js|mdx)'],
|
||||
stories: ['../src/stories/**/*.stories.@(js|mdx)'],
|
||||
};
|
||||
```
|
||||
|
||||
@ -80,8 +80,8 @@ For `DocsPage`, you need to update the parameter locally in a story:
|
||||
|
||||
```ts
|
||||
export const basic = () => ...
|
||||
basic.story = {
|
||||
parameters: { docs: { iframeHeight: 400 } }
|
||||
basic.parameters = {
|
||||
docs: { iframeHeight: 400 }
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -110,8 +110,8 @@ export default {
|
||||
import { Button } from './Button';
|
||||
// export default { ... }
|
||||
export const basic => () => <Button>Basic</Button>
|
||||
basic.story = {
|
||||
parameters: { docs: { page: null } }
|
||||
basic.parameters = {
|
||||
docs: { page: null }
|
||||
}
|
||||
```
|
||||
|
||||
@ -155,7 +155,7 @@ You can interleave your own components to customize the auto-generated contents
|
||||
|
||||
## Story file names
|
||||
|
||||
Unless you use a custom webpack configuration, all of your story files should have the suffix `*.stories.[jt]sx?`, e.g. `"Badge.stories.js"`, `"Badge.stories.tsx"`, etc.
|
||||
Unless you use a custom webpack configuration, all of your story files should have the suffix `*.stories.@(j|t)sx?`, e.g. `"Badge.stories.js"`, `"Badge.stories.tsx"`, etc.
|
||||
|
||||
The docs preset assumes this naming convention for its `source-loader` setup. If you want to use a different naming convention, you'll need a [manual configuration](../README.md#manual-configuration).
|
||||
|
||||
|
||||
@ -7,26 +7,21 @@
|
||||
Storybook Docs automatically generates props tables for components in supported frameworks. This document is a consolidated summary of prop tables, provides instructions for reporting bugs, and list known limitations for each framework.
|
||||
|
||||
- [Usage](#usage)
|
||||
- [Args Controls](#args-controls)
|
||||
- [DocsPage](#docspage)
|
||||
- [MDX](#mdx)
|
||||
- [Controls customization](#controls-customization)
|
||||
- [Rows customization](#rows-customization)
|
||||
- [Controls](#controls)
|
||||
- [Customization](#customization)
|
||||
- [Customizing ArgTypes](#customizing-argtypes)
|
||||
- [Reporting a bug](#reporting-a-bug)
|
||||
- [Known limitations](#known-limitations)
|
||||
- [React](#react)
|
||||
- [Fully support React.FC](#fully-support-reactfc)
|
||||
- [Imported types](#imported-types)
|
||||
- [Vue](#vue)
|
||||
- [Angular](#angular)
|
||||
- [Web components](#web-components)
|
||||
- [Ember](#ember)
|
||||
- [More resources](#more-resources)
|
||||
|
||||
## Usage
|
||||
|
||||
For framework-specific setup instructions, see the framework's README: [React](../react/README.md), [Vue](../vue/README.md), [Angular](../angular/README.md), [Web Components](../web-components/README.md), [Ember](../ember/README.md).
|
||||
|
||||
### DocsPage
|
||||
|
||||
To use the props table in [DocsPage](./docspage.md), simply export a component property on your stories metadata:
|
||||
|
||||
```js
|
||||
@ -40,6 +35,8 @@ export default {
|
||||
// stories etc...
|
||||
```
|
||||
|
||||
### MDX
|
||||
|
||||
To use the props table in [MDX](./mdx.md), use the `Props` block:
|
||||
|
||||
```js
|
||||
@ -52,19 +49,19 @@ import { MyComponent } from './MyComponent';
|
||||
<Props of={MyComponent} />
|
||||
```
|
||||
|
||||
## Args Controls
|
||||
## Controls
|
||||
|
||||
Starting in SB 6.0, the `Props` block has built-in controls (formerly known as "knobs") for editing stories dynamically.
|
||||
Starting in SB 6.0, the `Props` block has built-in `Controls` (formerly known as "knobs") for editing stories dynamically.
|
||||
|
||||
<center>
|
||||
<img src="./media/args-controls.gif" width="100%" />
|
||||
<img src="./media/args-controls.gif" width="80%" />
|
||||
</center>
|
||||
|
||||
These controls are implemented appear automatically in the props table when your story accepts [Storybook Args](https://github.com/storybookjs/storybook/blob/next/docs/src/pages/formats/component-story-format/index.md#args-story-inputs) as its input.
|
||||
<br/>
|
||||
|
||||
### DocsPage
|
||||
These controls are implemented appear automatically in the props table when your story accepts [Storybook Args](https://github.com/storybookjs/storybook/blob/next/docs/src/pages/formats/component-story-format/index.md#args-story-inputs) as its input. This is done slightly differently depending on whether you're using `DocsPage` or `MDX`.
|
||||
|
||||
In DocsPage, simply write your story to consume args and the auto-generated props table will display controls in the right-most column:
|
||||
**DocsPage.** In [DocsPage](./docspage.md), simply write your story to consume args and the auto-generated props table will display controls in the right-most column:
|
||||
|
||||
```js
|
||||
export default {
|
||||
@ -72,106 +69,132 @@ export default {
|
||||
component: MyComponent,
|
||||
};
|
||||
|
||||
export const Controls = (args) => <MyComponent {...args} />;
|
||||
export const WithControls = (args) => <MyComponent {...args} />;
|
||||
```
|
||||
|
||||
These controls can be [customized](#controls-customization) if the defaults don't meet your needs.
|
||||
|
||||
### MDX
|
||||
|
||||
In [MDX](./mdx.md), the `Props` controls are more configurable than in DocsPage. In order to show controls, `Props` must be a function of a story, not a component:
|
||||
**MDX.** In [MDX](./mdx.md), the `Props` controls are more configurable than in DocsPage. In order to show controls, `Props` must be a function of a story, not a component:
|
||||
|
||||
```js
|
||||
<Story name="Controls">
|
||||
<Story name="WithControls">
|
||||
{args => <MyComponent {...args} />}
|
||||
</Story>
|
||||
|
||||
<Props story="Controls" />
|
||||
```
|
||||
|
||||
### Controls customization
|
||||
For a very detailed walkthrough of how to write stories that use controls, see the [addon-controls README](https://github.com/storybookjs/storybook/blob/next/addons/controls/README.md#writing-stories).
|
||||
|
||||
Under the hood, props tables are rendered from an internal data structure called `ArgTypes`. When you declare a story's `component` metadata, Docs automatically extracts `ArgTypes` based on the component's properties. We can customize this by editing the `argTypes` metadata.
|
||||
## Customization
|
||||
|
||||
For example, consider a `Label` component that accepts a `background` color:
|
||||
Props tables are automatically inferred from your components and stories, but sometimes it's useful to customize the results.
|
||||
|
||||
Props tables are rendered from an internal data structure called `ArgTypes`. When you declare a story's `component` metadata, Docs automatically extracts `ArgTypes` based on the component's properties.
|
||||
|
||||
You can can customize what's shown in the props table by [customizing the `ArgTypes` data](#customizing-argtypes). This is currently available for `DocsPage` and `<Props story="xxx">` construct, but not for the `<Props of={component} />` construct,
|
||||
|
||||
### Customizing ArgTypes
|
||||
|
||||
> **NOTE:** This API is experimental and may change outside of the typical semver release cycle
|
||||
|
||||
When you declare a `component` in for your `DocsPage` [as described above](#docspage) or use the `<Props story="xxx" />` construct [in MDX](#controls), the props table shows the `story.argTypes` that gets extracted by Storybook.
|
||||
|
||||
Consider the following input:
|
||||
|
||||
```js
|
||||
// Button.js
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
export const Button = ({ label }) => <button>{label}</button>;
|
||||
Button.propTypes = {
|
||||
/** demo description */
|
||||
label: PropTypes.string,
|
||||
};
|
||||
Button.defaultProps = {
|
||||
label: 'Hello',
|
||||
};
|
||||
|
||||
export const Label = ({ label, borderWidth, background }) => <div style={{ borderWidth, background }}>{label}</div>;
|
||||
Label.propTypes = {
|
||||
label: PropTypes.string;
|
||||
borderWidth: PropTypes.number;
|
||||
background: PropTypes.string;
|
||||
// Button.stories.js
|
||||
export default { title: 'Button', component: Button };
|
||||
```
|
||||
|
||||
This generates the equivalent of following in-memory data structure for the `Button` component:
|
||||
|
||||
```js
|
||||
const argTypes = {
|
||||
label: {
|
||||
name: 'label',
|
||||
type: { name: 'string', required: false },
|
||||
defaultValue: 'Hello',
|
||||
description: 'demo description',
|
||||
table: {
|
||||
type: { summary: 'string' },
|
||||
defaultValue: { summary: 'Hello' },
|
||||
}
|
||||
control: {
|
||||
type: 'text'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Given this input, the Docs addon will show a text editor for the `background` and a numeric input for the `borderWidth` prop:
|
||||
In this `ArgTypes` data structure, `name`, `type`, `defaultValue`, and `description` are standard fields in all `ArgTypes` (analogous to `PropTypes` in React). The `table` and `control` fields are addon-specific annotations. So, for example, the `table` annotation provides extra information to customize how `label` gets rendered, and the `control` annotation provides extra information for the control for editing the property.
|
||||
|
||||
<center>
|
||||
<img src="./media/props-tables-controls-uncustomized.png" width="100%" />
|
||||
</center>
|
||||
|
||||
But suppose we prefer to show a color picker for `background` and a numeric input for `borderWidth`. We can customize this in the story metadata's `argTypes` field (at the component OR story level):
|
||||
As a user, you can customize the prop table by selectively overriding these values. Consider the following modification to `Button.stories.js` from above:
|
||||
|
||||
```js
|
||||
export default {
|
||||
title: 'Label',
|
||||
component: Label,
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
argTypes: {
|
||||
background: { control: { type: 'color' } },
|
||||
borderWidth: { control: { type: 'range', min: 0, max: 6 } },
|
||||
label: {
|
||||
description: 'overwritten description',
|
||||
table: {
|
||||
type: { summary: 'something short' detail: 'something really really long' },
|
||||
},
|
||||
control: {
|
||||
type: null
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
This generates the following custom UI:
|
||||
|
||||
<center>
|
||||
<img src="./media/props-tables-controls-customized.png" width="100%" />
|
||||
</center>
|
||||
|
||||
Support controls include `array`, `boolean`, `color`, `date`, `range`, `object`, `text`, as well as a number of different options controls: `radio`, `inline-radio`, `check`, `inline-check`, `select`, `multi-select`.
|
||||
|
||||
To see the full list of configuration options, see the [typescript type defintions](https://github.com/storybookjs/storybook/blob/next/lib/components/src/controls/types.ts).
|
||||
|
||||
### Rows customization
|
||||
|
||||
In addition to customizing [controls](#controls-customization), it's also possible to customize `Props` fields, such as description, or even the rows themselves.
|
||||
|
||||
Consider the following story for the `Label` component from in the previous section:
|
||||
These values--`description`, `table.type`, and `controls.type`--get merged over the defaults that are extracted by Storybook. The final merged values would be:
|
||||
|
||||
```js
|
||||
export const Batch = ({ labels, padding }) => (
|
||||
<div style={{ padding }}>
|
||||
{labels.map((label) => (
|
||||
<Label key={label} label={label} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
```
|
||||
|
||||
In this case, the args are basically unrelated to the underlying component's props, and are instead related to the individual story. To generate a prop table for the story, you can configure the Story's metadata:
|
||||
|
||||
```js
|
||||
Batch.story = {
|
||||
argTypes: {
|
||||
labels: {
|
||||
description: 'A comma-separated list of labels to display',
|
||||
defaultValue: 'a,b,c',
|
||||
control: { type: 'array' }
|
||||
const argTypes = {
|
||||
label: {
|
||||
name: 'label',
|
||||
type: { name: 'string', required: false },
|
||||
defaultValue: 'Hello',
|
||||
description: 'overwritten description',
|
||||
table: {
|
||||
type: { summary: 'something short' detail: 'something really really long' },
|
||||
defaultValue: { summary: 'Hello' },
|
||||
}
|
||||
padding: {
|
||||
description: 'The padding to space out labels int he story',
|
||||
defaultValue: 4,
|
||||
control: { type: 'range', min: 0, max: 20, step: 2 },
|
||||
control: {
|
||||
type: null
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
In this case, the user-specified `argTypes` are not a subset of the component's props, so Storybook shows ONLY the user-specified `argTypes`, and shows the component's props (without controls) in a separate tab.
|
||||
This would render a row with a modified description, a type display with a dropdown that shows the detail, and no control.
|
||||
|
||||
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:
|
||||
|
||||
| Field | Description |
|
||||
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `name` | The name of the property |
|
||||
| `type.required` | Whether or not the property is required |
|
||||
| `description` | A markdown description for the property |
|
||||
| `table.type.summary` | A short version of the type |
|
||||
| `table.type.detail` | A longer version of the type (if it's a complex type) |
|
||||
| `table.defaultValue.summary` | A short version of the default value |
|
||||
| `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) |
|
||||
|
||||
## Reporting a bug
|
||||
|
||||
@ -179,7 +202,7 @@ Extracting component properties from source is a tricky problem with thousands o
|
||||
|
||||
If you're seeing a problem with your prop table, here's what to do.
|
||||
|
||||
First, look to see if there's already a test case that corresponds to your situation. If there is, it should be documented in the [Known Limitations](#known-limitations) section above. There should also be one or more corresponding test fixtures contained in this package. For example, if you are using React, look under the directory `./src/frameworks/react/__testfixtures__`.
|
||||
First, look to see if there's already a test case that corresponds to your situation. If there is, it should be documented in the [Known Limitations](#known-limitations) section below. There should also be one or more corresponding test fixtures contained in this package. For example, if you are using React, look under the directory `./src/frameworks/react/__testfixtures__`.
|
||||
|
||||
If your problem is not already represented here, do the following:
|
||||
|
||||
@ -197,57 +220,13 @@ If the problem appears to be an issue with the sub-package, please file an issue
|
||||
|
||||
This package relies on a variety of sub-packages to extract property information from components. Many of the bugs in this package correspond to bugs in a sub-package. Since we don't maintain the sub-packages, the best we can do for now is (1) document these limitations, (2) provide clean reproductions to the sub-package, (3) optionally provide PRs to those packages to fix the problems.
|
||||
|
||||
### React
|
||||
|
||||
SB Docs for React uses `babel-plugin-react-docgen`/`react-docgen` for both JS PropTypes prop tables and, as of 6.0, TypeScript-driven props tables.
|
||||
|
||||
#### Fully support React.FC
|
||||
|
||||
The biggest known issue is https://github.com/reactjs/react-docgen/issues/387, which means that the following common pattern **DOESN'T WORK**:
|
||||
|
||||
```tsx
|
||||
import React, { FC } from 'react';
|
||||
interface IProps { ... };
|
||||
const MyComponent: FC<IProps> = ({ ... }) => ...
|
||||
```
|
||||
|
||||
The following workaround is needed:
|
||||
|
||||
```tsx
|
||||
const MyComponent: FC<IProps> = ({ ... }: IProps) => ...
|
||||
```
|
||||
|
||||
Please upvote https://github.com/reactjs/react-docgen/issues/387 if this is affecting your productivity, or better yet, submit a fix!
|
||||
|
||||
#### Imported types
|
||||
|
||||
Another major issue is support for imported types.
|
||||
|
||||
```js
|
||||
import React, { FC } from 'react';
|
||||
import SomeType from './someFile';
|
||||
|
||||
type NewType = SomeType & { foo: string };
|
||||
const MyComponent: FC<NewType> = ...
|
||||
```
|
||||
|
||||
This was also an issue in RDTL so it doesn't get worse with `react-docgen`. There's an open PR for this https://github.com/reactjs/react-docgen/pull/352 which you can upvote if it affects you.
|
||||
|
||||
### Vue
|
||||
|
||||
SB Docs for Vue uses `vue-docgen-loader`/`vue-docgen-api` for SFC and JSX components.
|
||||
|
||||
### Angular
|
||||
|
||||
SB Docs for Angular uses `compodoc` for prop table information.
|
||||
|
||||
### Web components
|
||||
|
||||
SB Docs for Web-components uses `custom-elements.json` for prop table information.
|
||||
|
||||
### Ember
|
||||
|
||||
SB Docs for Ember uses `yui-doc` for prop table information.
|
||||
| Framework | Underlying library | Docs | Open issues |
|
||||
| -------------- | ---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| React | `react-docgen` `react-docgen-typescript` | [Docs](../react/README.md#props-tables) | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+react%22) |
|
||||
| Vue | `vue-docgen-api` | [Docs](../vue/README.md#props-tables) | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+vue%22) |
|
||||
| Angular | `compodoc` | [Docs](../angular/README.md#props-tables) | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+angular%22) |
|
||||
| Web-components | `custom-elements.json` | [Docs](../web-components/README.md#props-tables) | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+web-components%22) |
|
||||
| Ember | `yui-doc` | [Docs](../ember/README.md#props-tables) | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+ember%22) |
|
||||
|
||||
## More resources
|
||||
|
||||
|
||||
@ -51,8 +51,8 @@ export default {
|
||||
};
|
||||
|
||||
export const basic = () => <Button>Basic</Button>;
|
||||
basic.story = {
|
||||
parameters: { foo: 'bar' },
|
||||
basic.parameters = {
|
||||
foo: 'bar',
|
||||
};
|
||||
```
|
||||
|
||||
@ -199,7 +199,7 @@ User defines stories in CSF and renders docs using DocsPage, but wishes to exclu
|
||||
|
||||
```js
|
||||
export const foo = () => <Button>foo</Button>;
|
||||
foo.story = { parameters: { docs: { disable: true } } };
|
||||
foo.parameters = { docs: { disable: true } };
|
||||
```
|
||||
|
||||
### MDX Stories
|
||||
@ -220,11 +220,9 @@ Based on user feedback, it's also possible to control the view mode for an indiv
|
||||
|
||||
```js
|
||||
export const Foo = () => <Component />;
|
||||
Foo.story = {
|
||||
parameters: {
|
||||
Foo.parameters = {
|
||||
// reset the view mode to "story" whenever the user navigates to this story
|
||||
viewMode: 'story',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@ -245,10 +243,8 @@ If you override the `docs.source.code` parameter, the `Source` block will render
|
||||
|
||||
```js
|
||||
const Example = () => <Button />;
|
||||
Example.story = {
|
||||
parameters: {
|
||||
Example.parameters = {
|
||||
docs: { source: { code: 'some arbitrary string' } },
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
@ -8,6 +8,7 @@ To learn more about Storybook Docs, read the [general documentation](../README.m
|
||||
|
||||
- [Installation](#installation)
|
||||
- [DocsPage](#docspage)
|
||||
- [Props tables](#props-tables)
|
||||
- [MDX](#mdx)
|
||||
- [IFrame height](#iframe-height)
|
||||
- [More resources](#more-resources)
|
||||
@ -32,7 +33,9 @@ module.exports = {
|
||||
|
||||
When you [install docs](#installation) you should get basic [DocsPage](../docs/docspage.md) documentation automagically for all your stories, available in the `Docs` tab of the Storybook UI.
|
||||
|
||||
Props tables for your components requires a few more steps. Docs for Ember relies on [@storybook/ember-cli-storybook addon](https://github.com/storybookjs/ember-cli-storybook), to extract documentation comments from your component source files. If you're using Storybook with Ember, you should already have this addon installed, you will just need to enable it by adding the following config block in your `ember-cli-build.js` file:
|
||||
## Props tables
|
||||
|
||||
Getting [Props tables](../docs/props-tables.md) for your components requires a few more steps. Docs for Ember relies on [@storybook/ember-cli-storybook addon](https://github.com/storybookjs/ember-cli-storybook), to extract documentation comments from your component source files. If you're using Storybook with Ember, you should already have this addon installed, you will just need to enable it by adding the following config block in your `ember-cli-build.js` file:
|
||||
|
||||
```js
|
||||
let app = new EmberApp(defaults, {
|
||||
@ -85,7 +88,7 @@ Then update your `.storybook/main.js` to make sure you load MDX files:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
stories: ['../src/stories/**/*.stories.(js|mdx)'],
|
||||
stories: ['../src/stories/**/*.stories.@(js|mdx)'],
|
||||
};
|
||||
```
|
||||
|
||||
@ -131,8 +134,8 @@ For `DocsPage`, you need to update the parameter locally in a story:
|
||||
|
||||
```ts
|
||||
export const basic = () => ...
|
||||
basic.story = {
|
||||
parameters: { docs: { iframeHeight: 400 } }
|
||||
basic.parameters = {
|
||||
docs: { iframeHeight: 400 }
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "6.0.0-beta.9",
|
||||
"version": "6.0.0-beta.21",
|
||||
"description": "Superior documentation for your components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -48,17 +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.9",
|
||||
"@storybook/api": "6.0.0-beta.9",
|
||||
"@storybook/client-api": "6.0.0-beta.9",
|
||||
"@storybook/components": "6.0.0-beta.9",
|
||||
"@storybook/core": "6.0.0-beta.9",
|
||||
"@storybook/core-events": "6.0.0-beta.9",
|
||||
"@storybook/addons": "6.0.0-beta.21",
|
||||
"@storybook/api": "6.0.0-beta.21",
|
||||
"@storybook/client-api": "6.0.0-beta.21",
|
||||
"@storybook/client-logger": "6.0.0-beta.21",
|
||||
"@storybook/components": "6.0.0-beta.21",
|
||||
"@storybook/core": "6.0.0-beta.21",
|
||||
"@storybook/core-events": "6.0.0-beta.21",
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/node-logger": "6.0.0-beta.9",
|
||||
"@storybook/postinstall": "6.0.0-beta.9",
|
||||
"@storybook/source-loader": "6.0.0-beta.9",
|
||||
"@storybook/theming": "6.0.0-beta.9",
|
||||
"@storybook/node-logger": "6.0.0-beta.21",
|
||||
"@storybook/postinstall": "6.0.0-beta.21",
|
||||
"@storybook/source-loader": "6.0.0-beta.21",
|
||||
"@storybook/theming": "6.0.0-beta.21",
|
||||
"acorn": "^7.1.0",
|
||||
"acorn-jsx": "^5.1.0",
|
||||
"acorn-walk": "^7.0.0",
|
||||
@ -84,8 +85,8 @@
|
||||
"@babel/core": "^7.9.6",
|
||||
"@emotion/core": "^10.0.20",
|
||||
"@emotion/styled": "^10.0.17",
|
||||
"@storybook/react": "6.0.0-beta.9",
|
||||
"@storybook/web-components": "6.0.0-beta.9",
|
||||
"@storybook/react": "6.0.0-beta.21",
|
||||
"@storybook/web-components": "6.0.0-beta.21",
|
||||
"@types/cross-spawn": "^6.0.1",
|
||||
"@types/doctrine": "^0.0.3",
|
||||
"@types/enzyme": "^3.10.3",
|
||||
|
||||
@ -12,8 +12,10 @@ To learn more about Storybook Docs, read the [general documentation](../README.m
|
||||
|
||||
- [Installation](#installation)
|
||||
- [DocsPage](#docspage)
|
||||
- [Props tables](#props-tables)
|
||||
- [MDX](#mdx)
|
||||
- [Inline Stories](#inline-stories)
|
||||
- [Inline stories](#inline-stories)
|
||||
- [TypeScript props with `react-docgen`](#typescript-props-with-react-docgen)
|
||||
- [More resources](#more-resources)
|
||||
|
||||
## Installation
|
||||
@ -37,7 +39,9 @@ module.exports = {
|
||||
|
||||
When you [install docs](#installation) you should get basic [DocsPage](../docs/docspage.md) documentation automagically for all your stories, available in the `Docs` tab of the Storybook UI.
|
||||
|
||||
To show the props table for your component, be sure to fill in the `component` field in your story metadata:
|
||||
## Props tables
|
||||
|
||||
Storybook Docs automatically generates [Props tables](../docs/props-tables.md) for your components based on either `PropTypes` or `TypeScript` types. To show the props table for your component, be sure to fill in the `component` field in your story metadata:
|
||||
|
||||
```ts
|
||||
import { Button } from './Button';
|
||||
@ -73,7 +77,7 @@ Then update your `.storybook/main.js` to make sure you load MDX files:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
stories: ['../src/stories/**/*.stories.(js|mdx)'],
|
||||
stories: ['../src/stories/**/*.stories.@(js|mdx)'],
|
||||
};
|
||||
```
|
||||
|
||||
@ -98,7 +102,7 @@ Some **markdown** description, or whatever you want.
|
||||
<Props of={Button} />
|
||||
```
|
||||
|
||||
## Inline Stories
|
||||
## Inline stories
|
||||
|
||||
Storybook Docs renders all React stories inline on the page by default. If you want to render stories in an `iframe` so that they are better isolated. To do this, update `.storybook/preview.js`:
|
||||
|
||||
@ -112,6 +116,66 @@ addParameters({
|
||||
});
|
||||
```
|
||||
|
||||
## TypeScript props with `react-docgen`
|
||||
|
||||
If you're using TypeScript, there are two different options for generating props: `react-docgen-typescript` (default) or `react-docgen`.
|
||||
|
||||
You can add the following lines to your `.storybook/main.js` to switch between the two (or disable docgen):
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
typescript: {
|
||||
// also valid 'react-docgen-typescript' | false
|
||||
reactDocgen: 'react-docgen',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
Neither option is perfect, so here's everything you should know if you're thinking about using `react-docgen` for TypeScript.
|
||||
|
||||
| | `react-docgen-typescript` | `react-docgen` |
|
||||
| --------------- | ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
|
||||
| **Features** | **Great**. The analysis produces great results which gives the best props table experience. | **OK**. React-docgen produces basic results that are fine for most use cases. |
|
||||
| **Performance** | **Slow**. It's doing a lot more work to produce those results, and may also have an inefficient implementation. | **Blazing fast**. Adding it to your project increases build time negligibly. |
|
||||
| **Bugs** | **Many**. There are a lot of corner cases that are not handled properly, and are annoying for developers. | **Few**. But there's a dealbreaker, which is lack for imported types (see below). |
|
||||
| **SB docs** | **Good**. Our prop tables have supported `react-docgen-typescript` results from the beginning, so it's relatively stable. | **OK**. There are some obvious improvements to fully support `react-docgen`, and they're coming soon. |
|
||||
|
||||
**Performance** is a common question, so here are build times from a random project to quantify. Your mileage may vary:
|
||||
|
||||
| Docgen | Build time |
|
||||
| ----------------------- | ---------- |
|
||||
| react-docgen-typescript | 59s |
|
||||
| react-docgen | 29s |
|
||||
| none | 28s |
|
||||
|
||||
The biggest limitation of `react-docgen` is lack of support for imported types. What that means is that when a component uses a type defined in another file or package, `react-docgen` is unable to extract props information for that type.
|
||||
|
||||
```tsx
|
||||
import React, { FC } from 'react';
|
||||
import SomeType from './someFile';
|
||||
|
||||
type NewType = SomeType & { foo: string };
|
||||
const MyComponent: FC<NewType> = ...
|
||||
```
|
||||
|
||||
So in the previous example, `SomeType` would simply be ignored! There's an [open PR for this in the `react-docgen` repo](https://github.com/reactjs/react-docgen/pull/352) which you can upvote if it affects you.
|
||||
|
||||
Another common pitfall when switching to `react-docgen` is [lack of support for `React.FC`](https://github.com/reactjs/react-docgen/issues/387). This means that the following common pattern **DOESN'T WORK**:
|
||||
|
||||
```tsx
|
||||
import React, { FC } from 'react';
|
||||
interface IProps { ... };
|
||||
const MyComponent: FC<IProps> = ({ ... }) => ...
|
||||
```
|
||||
|
||||
Fortunately, the following workaround works:
|
||||
|
||||
```tsx
|
||||
const MyComponent: FC<IProps> = ({ ... }: IProps) => ...
|
||||
```
|
||||
|
||||
Please upvote [the issue](https://github.com/reactjs/react-docgen/issues/387) if this is affecting your productivity, or better yet, submit a fix!
|
||||
|
||||
## More resources
|
||||
|
||||
Want to learn more? Here are some more articles on Storybook Docs:
|
||||
|
||||
@ -2,6 +2,10 @@ import path from 'path';
|
||||
import { ProgressPlugin, DllPlugin } from 'webpack';
|
||||
import TerserPlugin from 'terser-webpack-plugin';
|
||||
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import uiPaths from '@storybook/ui/paths';
|
||||
import themingPaths from '@storybook/theming/paths';
|
||||
|
||||
const resolveLocal = (dir) => path.join(__dirname, dir);
|
||||
|
||||
const r = resolveLocal('../../../node_modules');
|
||||
@ -50,6 +54,11 @@ export default ({ entry, provided = [] }) => ({
|
||||
resolve: {
|
||||
extensions: ['.mjs', '.js', '.jsx', '.json'],
|
||||
modules: [path.join(__dirname, '../../../node_modules')],
|
||||
alias: {
|
||||
...themingPaths,
|
||||
...uiPaths,
|
||||
semver: require.resolve('@storybook/semver'),
|
||||
},
|
||||
},
|
||||
|
||||
plugins: [
|
||||
|
||||
@ -27,15 +27,6 @@ type StoryRefProps = {
|
||||
|
||||
export type StoryProps = StoryDefProps | StoryRefProps;
|
||||
|
||||
const inferInlineStories = (framework: string): boolean => {
|
||||
switch (framework) {
|
||||
case 'react':
|
||||
return true;
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
export const lookupStoryId = (
|
||||
storyName: string,
|
||||
{ mdxStoryNameToKey, mdxComponentMeta }: DocsContextProps
|
||||
@ -53,23 +44,17 @@ export const getStoryProps = (props: StoryProps, context: DocsContextProps): Pur
|
||||
const data = context.storyStore.fromId(previewId) || {};
|
||||
|
||||
const { height, inline } = props;
|
||||
const { parameters = {}, docs = {} } = data;
|
||||
const { framework = null } = parameters;
|
||||
const { storyFn = undefined, name: storyName = undefined, parameters = {} } = data;
|
||||
const { docs = {} } = parameters;
|
||||
|
||||
if (docs.disable) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// prefer props, then global options, then framework-inferred values
|
||||
const {
|
||||
inlineStories = inferInlineStories(framework),
|
||||
iframeHeight = undefined,
|
||||
prepareForInline = undefined,
|
||||
} = docs;
|
||||
const { storyFn = undefined, name: storyName = undefined } = data;
|
||||
|
||||
// prefer block props, then story parameters defined by the framework-specific settings and optionally overriden by users
|
||||
const { inlineStories = false, iframeHeight = 100, prepareForInline } = docs;
|
||||
const storyIsInline = typeof inline === 'boolean' ? inline : inlineStories;
|
||||
if (storyIsInline && !prepareForInline && framework !== 'react') {
|
||||
if (storyIsInline && !prepareForInline) {
|
||||
throw new Error(
|
||||
`Story '${storyName}' is set to render inline, but no 'prepareForInline' function is implemented in your docs configuration!`
|
||||
);
|
||||
|
||||
@ -3,9 +3,7 @@
|
||||
exports[`angular component properties doc-button 1`] = `
|
||||
Object {
|
||||
"_inputValue": Object {
|
||||
"defaultValue": Object {
|
||||
"summary": "'some value'",
|
||||
},
|
||||
"defaultValue": "some value",
|
||||
"description": "",
|
||||
"name": "_inputValue",
|
||||
"table": Object {
|
||||
@ -15,11 +13,12 @@ Object {
|
||||
"summary": "string",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "void",
|
||||
},
|
||||
},
|
||||
"_value": Object {
|
||||
"defaultValue": Object {
|
||||
"summary": "'Private hello'",
|
||||
},
|
||||
"defaultValue": "Private hello",
|
||||
"description": "<p>Private value. </p>
|
||||
",
|
||||
"name": "_value",
|
||||
@ -30,11 +29,12 @@ Object {
|
||||
"summary": "string",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "void",
|
||||
},
|
||||
},
|
||||
"appearance": Object {
|
||||
"defaultValue": Object {
|
||||
"summary": "'secondary'",
|
||||
},
|
||||
"defaultValue": "secondary",
|
||||
"description": "<p>Appearance style of the button. </p>
|
||||
",
|
||||
"name": "appearance",
|
||||
@ -45,11 +45,16 @@ Object {
|
||||
"summary": "\\"primary\\" | \\"secondary\\"",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "enum",
|
||||
"value": Array [
|
||||
"primary",
|
||||
"secondary",
|
||||
],
|
||||
},
|
||||
},
|
||||
"buttonRef": Object {
|
||||
"defaultValue": Object {
|
||||
"summary": undefined,
|
||||
},
|
||||
"defaultValue": undefined,
|
||||
"description": "",
|
||||
"name": "buttonRef",
|
||||
"table": Object {
|
||||
@ -59,11 +64,12 @@ Object {
|
||||
"summary": "ElementRef",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "void",
|
||||
},
|
||||
},
|
||||
"calc": Object {
|
||||
"defaultValue": Object {
|
||||
"summary": "",
|
||||
},
|
||||
"defaultValue": undefined,
|
||||
"description": "<p>An internal calculation method which adds <code>x</code> and <code>y</code> together.</p>
|
||||
",
|
||||
"name": "calc",
|
||||
@ -74,11 +80,12 @@ Object {
|
||||
"summary": "(x: number, y: string | number) => number",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "void",
|
||||
},
|
||||
},
|
||||
"inputValue": Object {
|
||||
"defaultValue": Object {
|
||||
"summary": undefined,
|
||||
},
|
||||
"defaultValue": undefined,
|
||||
"description": "<p>Setter for <code>inputValue</code> that is also an <code>@Input</code>. </p>
|
||||
",
|
||||
"name": "inputValue",
|
||||
@ -89,11 +96,12 @@ Object {
|
||||
"summary": "string",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "string",
|
||||
},
|
||||
},
|
||||
"internalProperty": Object {
|
||||
"defaultValue": Object {
|
||||
"summary": "'Public hello'",
|
||||
},
|
||||
"defaultValue": "Public hello",
|
||||
"description": "<p>Public value. </p>
|
||||
",
|
||||
"name": "internalProperty",
|
||||
@ -104,11 +112,12 @@ Object {
|
||||
"summary": "string",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "void",
|
||||
},
|
||||
},
|
||||
"isDisabled": Object {
|
||||
"defaultValue": Object {
|
||||
"summary": "false",
|
||||
},
|
||||
"defaultValue": false,
|
||||
"description": "<p>Sets the button to a disabled state. </p>
|
||||
",
|
||||
"name": "isDisabled",
|
||||
@ -119,11 +128,12 @@ Object {
|
||||
"summary": undefined,
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "boolean",
|
||||
},
|
||||
},
|
||||
"item": Object {
|
||||
"defaultValue": Object {
|
||||
"summary": undefined,
|
||||
},
|
||||
"defaultValue": undefined,
|
||||
"description": undefined,
|
||||
"name": "item",
|
||||
"table": Object {
|
||||
@ -133,11 +143,12 @@ Object {
|
||||
"summary": "[]",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "object",
|
||||
},
|
||||
},
|
||||
"label": Object {
|
||||
"defaultValue": Object {
|
||||
"summary": undefined,
|
||||
},
|
||||
"defaultValue": undefined,
|
||||
"description": "<p>The inner text of the button.</p>
|
||||
",
|
||||
"name": "label",
|
||||
@ -148,11 +159,12 @@ Object {
|
||||
"summary": "string",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "string",
|
||||
},
|
||||
},
|
||||
"onClick": Object {
|
||||
"defaultValue": Object {
|
||||
"summary": "new EventEmitter<Event>()",
|
||||
},
|
||||
"defaultValue": undefined,
|
||||
"description": "<p>Handler to be called when the button is clicked by a user.</p>
|
||||
<p>Will also block the emission of the event if <code>isDisabled</code> is true.</p>
|
||||
",
|
||||
@ -164,11 +176,12 @@ Object {
|
||||
"summary": "EventEmitter",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "void",
|
||||
},
|
||||
},
|
||||
"privateMethod": Object {
|
||||
"defaultValue": Object {
|
||||
"summary": "",
|
||||
},
|
||||
"defaultValue": undefined,
|
||||
"description": "<p>A private method.</p>
|
||||
",
|
||||
"name": "privateMethod",
|
||||
@ -179,11 +192,12 @@ Object {
|
||||
"summary": "(password: string) => void",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "void",
|
||||
},
|
||||
},
|
||||
"processedItem": Object {
|
||||
"defaultValue": Object {
|
||||
"summary": undefined,
|
||||
},
|
||||
"defaultValue": undefined,
|
||||
"description": "",
|
||||
"name": "processedItem",
|
||||
"table": Object {
|
||||
@ -193,11 +207,12 @@ Object {
|
||||
"summary": "T[]",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "void",
|
||||
},
|
||||
},
|
||||
"protectedMethod": Object {
|
||||
"defaultValue": Object {
|
||||
"summary": "",
|
||||
},
|
||||
"defaultValue": undefined,
|
||||
"description": "<p>A protected method.</p>
|
||||
",
|
||||
"name": "protectedMethod",
|
||||
@ -208,11 +223,12 @@ Object {
|
||||
"summary": "(id?: number) => void",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "void",
|
||||
},
|
||||
},
|
||||
"publicMethod": Object {
|
||||
"defaultValue": Object {
|
||||
"summary": "",
|
||||
},
|
||||
"defaultValue": undefined,
|
||||
"description": "<p>A public method using an interface. </p>
|
||||
",
|
||||
"name": "publicMethod",
|
||||
@ -223,11 +239,12 @@ Object {
|
||||
"summary": "(things: ISomeInterface) => void",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "void",
|
||||
},
|
||||
},
|
||||
"showKeyAlias": Object {
|
||||
"defaultValue": Object {
|
||||
"summary": undefined,
|
||||
},
|
||||
"defaultValue": undefined,
|
||||
"description": undefined,
|
||||
"name": "showKeyAlias",
|
||||
"table": Object {
|
||||
@ -237,11 +254,12 @@ Object {
|
||||
"summary": "",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "void",
|
||||
},
|
||||
},
|
||||
"size": Object {
|
||||
"defaultValue": Object {
|
||||
"summary": "'medium'",
|
||||
},
|
||||
"defaultValue": "medium",
|
||||
"description": "<p>Size of the button. </p>
|
||||
",
|
||||
"name": "size",
|
||||
@ -252,11 +270,12 @@ Object {
|
||||
"summary": "ButtonSize",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "object",
|
||||
},
|
||||
},
|
||||
"somethingYouShouldNotUse": Object {
|
||||
"defaultValue": Object {
|
||||
"summary": "false",
|
||||
},
|
||||
"defaultValue": false,
|
||||
"description": "<p>Some input you shouldn't use.</p>
|
||||
",
|
||||
"name": "somethingYouShouldNotUse",
|
||||
@ -267,6 +286,9 @@ Object {
|
||||
"summary": undefined,
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "boolean",
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
|
||||
41
addons/docs/src/frameworks/angular/compodoc.test.ts
Normal file
41
addons/docs/src/frameworks/angular/compodoc.test.ts
Normal file
@ -0,0 +1,41 @@
|
||||
import { extractType } from './compodoc';
|
||||
import { Decorator } from './types';
|
||||
|
||||
const makeProperty = (compodocType?: string) => ({
|
||||
type: compodocType,
|
||||
name: 'dummy',
|
||||
decorators: [] as Decorator[],
|
||||
optional: true,
|
||||
});
|
||||
|
||||
describe('extractType', () => {
|
||||
describe('with compodoc type', () => {
|
||||
it.each([
|
||||
['string', { name: 'string' }],
|
||||
['boolean', { name: 'boolean' }],
|
||||
['number', { name: 'number' }],
|
||||
['object', { name: 'object' }],
|
||||
['foo', { name: 'object' }],
|
||||
[null, { name: 'void' }],
|
||||
[undefined, { name: 'void' }],
|
||||
['T[]', { name: 'object' }],
|
||||
['[]', { name: 'object' }],
|
||||
['"primary" | "secondary"', { name: 'enum', value: ['primary', 'secondary'] }],
|
||||
])('%s', (compodocType, expected) => {
|
||||
expect(extractType(makeProperty(compodocType), null)).toEqual(expected);
|
||||
});
|
||||
});
|
||||
|
||||
describe('without compodoc type', () => {
|
||||
it.each([
|
||||
['string', { name: 'string' }],
|
||||
[false, { name: 'boolean' }],
|
||||
[10, { name: 'number' }],
|
||||
[['abc'], { name: 'object' }],
|
||||
[{ foo: 1 }, { name: 'object' }],
|
||||
[undefined, { name: 'void' }],
|
||||
])('%s', (defaultValue, expected) => {
|
||||
expect(extractType(makeProperty(null), defaultValue)).toEqual(expected);
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -3,7 +3,18 @@
|
||||
|
||||
import { PropDef } from '@storybook/components';
|
||||
import { ArgType, ArgTypes } from '@storybook/api';
|
||||
import { Argument, CompodocJson, Component, Method, Property, Directive } from './types';
|
||||
import { logger } from '@storybook/client-logger';
|
||||
import {
|
||||
Argument,
|
||||
Class,
|
||||
CompodocJson,
|
||||
Component,
|
||||
Injectable,
|
||||
Method,
|
||||
Pipe,
|
||||
Property,
|
||||
Directive,
|
||||
} from './types';
|
||||
|
||||
type Sections = Record<string, PropDef[]>;
|
||||
|
||||
@ -52,12 +63,14 @@ const mapPropertyToSection = (key: string, item: Property) => {
|
||||
|
||||
const mapItemToSection = (key: string, item: Method | Property): string => {
|
||||
switch (key) {
|
||||
case 'methods':
|
||||
case 'methodsClass':
|
||||
return 'methods';
|
||||
case 'inputsClass':
|
||||
return 'inputs';
|
||||
case 'outputsClass':
|
||||
return 'outputs';
|
||||
case 'properties':
|
||||
case 'propertiesClass':
|
||||
if (isMethod(item)) {
|
||||
throw new Error("Cannot be of type Method if key === 'propertiesClass'");
|
||||
@ -70,7 +83,10 @@ const mapItemToSection = (key: string, item: Method | Property): string => {
|
||||
|
||||
export const findComponentByName = (name: string, compodocJson: CompodocJson) =>
|
||||
compodocJson.components.find((c: Component) => c.name === name) ||
|
||||
compodocJson.directives.find((c: Directive) => c.name === name);
|
||||
compodocJson.directives.find((c: Directive) => c.name === name) ||
|
||||
compodocJson.pipes.find((c: Pipe) => c.name === name) ||
|
||||
compodocJson.injectables.find((c: Injectable) => c.name === name) ||
|
||||
compodocJson.classes.find((c: Class) => c.name === name);
|
||||
|
||||
const getComponentData = (component: Component | Directive) => {
|
||||
if (!component) {
|
||||
@ -90,19 +106,78 @@ const displaySignature = (item: Method): string => {
|
||||
return `(${args.join(', ')}) => ${item.returnType}`;
|
||||
};
|
||||
|
||||
export const extractArgTypesFromData = (componentData: Directive) => {
|
||||
const extractTypeFromValue = (defaultValue: any) => {
|
||||
const valueType = typeof defaultValue;
|
||||
return defaultValue || valueType === 'boolean' ? valueType : null;
|
||||
};
|
||||
|
||||
const extractEnumValues = (compodocType: any) => {
|
||||
if (typeof compodocType !== 'string' || compodocType.indexOf('|') === -1) {
|
||||
return null;
|
||||
}
|
||||
|
||||
try {
|
||||
return compodocType.split('|').map((value) => JSON.parse(value));
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
export const extractType = (property: Property, defaultValue: any) => {
|
||||
const compodocType = property.type || extractTypeFromValue(defaultValue);
|
||||
switch (compodocType) {
|
||||
case 'string':
|
||||
case 'boolean':
|
||||
case 'number':
|
||||
return { name: compodocType };
|
||||
case undefined:
|
||||
case null:
|
||||
return { name: 'void' };
|
||||
default: {
|
||||
const enumValues = extractEnumValues(compodocType);
|
||||
return enumValues ? { name: 'enum', value: enumValues } : { name: 'object' };
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const extractDefaultValue = (property: Property) => {
|
||||
try {
|
||||
// eslint-disable-next-line no-eval
|
||||
const value = eval(property.defaultValue);
|
||||
return value;
|
||||
} catch (err) {
|
||||
logger.debug(`Error extracting ${property.name}: ${property.defaultValue}`);
|
||||
return undefined;
|
||||
}
|
||||
};
|
||||
|
||||
export const extractArgTypesFromData = (componentData: Class | Directive | Injectable | Pipe) => {
|
||||
const sectionToItems: Record<string, ArgType[]> = {};
|
||||
const compodocClasses = ['propertiesClass', 'methodsClass', 'inputsClass', 'outputsClass'];
|
||||
type COMPODOC_CLASS = 'propertiesClass' | 'methodsClass' | 'inputsClass' | 'outputsClass';
|
||||
const compodocClasses = ['component', 'directive'].includes(componentData.type)
|
||||
? ['propertiesClass', 'methodsClass', 'inputsClass', 'outputsClass']
|
||||
: ['properties', 'methods'];
|
||||
type COMPODOC_CLASS =
|
||||
| 'properties'
|
||||
| 'methods'
|
||||
| 'propertiesClass'
|
||||
| 'methodsClass'
|
||||
| 'inputsClass'
|
||||
| 'outputsClass';
|
||||
|
||||
compodocClasses.forEach((key: COMPODOC_CLASS) => {
|
||||
const data = componentData[key] || [];
|
||||
const data = (componentData as any)[key] || [];
|
||||
data.forEach((item: Method | Property) => {
|
||||
const section = mapItemToSection(key, item);
|
||||
const defaultValue = isMethod(item) ? undefined : extractDefaultValue(item as Property);
|
||||
const type =
|
||||
isMethod(item) || section !== 'inputs'
|
||||
? { name: 'void' }
|
||||
: extractType(item as Property, defaultValue);
|
||||
const argType = {
|
||||
name: item.name,
|
||||
description: item.description,
|
||||
defaultValue: { summary: isMethod(item) ? '' : item.defaultValue },
|
||||
defaultValue,
|
||||
type,
|
||||
table: {
|
||||
category: section,
|
||||
type: {
|
||||
@ -152,5 +227,5 @@ export const extractComponentDescription = (component: Component | Directive) =>
|
||||
if (!componentData) {
|
||||
return null;
|
||||
}
|
||||
return componentData.rawdescription;
|
||||
return componentData.rawdescription || componentData.description;
|
||||
};
|
||||
|
||||
@ -2,26 +2,56 @@ export interface Method {
|
||||
name: string;
|
||||
args: Argument[];
|
||||
returnType: string;
|
||||
decorators: Decorator[];
|
||||
description: string;
|
||||
decorators?: Decorator[];
|
||||
description?: string;
|
||||
}
|
||||
|
||||
export interface Property {
|
||||
name: string;
|
||||
decorators: Decorator[];
|
||||
decorators?: Decorator[];
|
||||
type: string;
|
||||
optional: boolean;
|
||||
defaultValue?: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
export interface Class {
|
||||
name: string;
|
||||
ngname: string;
|
||||
type: 'pipe';
|
||||
properties: Property[];
|
||||
methods: Method[];
|
||||
description?: string;
|
||||
rawdescription?: string;
|
||||
}
|
||||
|
||||
export interface Injectable {
|
||||
name: string;
|
||||
type: 'injectable';
|
||||
properties: Property[];
|
||||
methods: Method[];
|
||||
description?: string;
|
||||
rawdescription?: string;
|
||||
}
|
||||
|
||||
export interface Pipe {
|
||||
name: string;
|
||||
type: 'class';
|
||||
properties: Property[];
|
||||
methods: Method[];
|
||||
description?: string;
|
||||
rawdescription?: string;
|
||||
}
|
||||
|
||||
export interface Directive {
|
||||
name: string;
|
||||
type: 'directive' | 'component';
|
||||
propertiesClass: Property[];
|
||||
inputsClass: Property[];
|
||||
outputsClass: Property[];
|
||||
methodsClass: Method[];
|
||||
rawdescription: string;
|
||||
description?: string;
|
||||
rawdescription?: string;
|
||||
}
|
||||
|
||||
export type Component = Directive;
|
||||
@ -39,4 +69,7 @@ export interface Decorator {
|
||||
export interface CompodocJson {
|
||||
directives: Directive[];
|
||||
components: Component[];
|
||||
pipes: Pipe[];
|
||||
injectables: Injectable[];
|
||||
classes: Class[];
|
||||
}
|
||||
|
||||
@ -3,8 +3,10 @@ import { enhanceArgTypes } from './enhanceArgTypes';
|
||||
|
||||
export const parameters = {
|
||||
docs: {
|
||||
inlineStories: false,
|
||||
container: DocsContainer,
|
||||
page: DocsPage,
|
||||
iframeHeight: 100,
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -136,18 +136,17 @@ describe('enhanceArgTypes', () => {
|
||||
it('options', () => {
|
||||
expect(
|
||||
enhance({
|
||||
argType: { control: { type: 'options', options: [1, 2], controlType: 'radio' } },
|
||||
argType: { control: { type: 'radio', options: [1, 2] } },
|
||||
}).input
|
||||
).toMatchInlineSnapshot(`
|
||||
{
|
||||
"name": "input",
|
||||
"control": {
|
||||
"type": "options",
|
||||
"type": "radio",
|
||||
"options": [
|
||||
1,
|
||||
2
|
||||
],
|
||||
"controlType": "radio"
|
||||
]
|
||||
}
|
||||
}
|
||||
`);
|
||||
|
||||
@ -28,7 +28,7 @@ const inferControl = (argType: ArgType): Control => {
|
||||
return { type: 'number' };
|
||||
case 'enum': {
|
||||
const { value } = type as SBEnumType;
|
||||
return { type: 'options', controlType: 'select', options: value };
|
||||
return { type: 'select', options: value };
|
||||
}
|
||||
case 'function':
|
||||
case 'symbol':
|
||||
|
||||
@ -4,7 +4,7 @@ import { extractComponentDescription } from '../../lib/docgen';
|
||||
|
||||
export const parameters = {
|
||||
docs: {
|
||||
// react is Storybook's "native" framework, so it's stories are inherently prepared to be rendered inline
|
||||
inlineStories: true,
|
||||
// NOTE: that the result is a react element. Hooks support is provided by the outer code.
|
||||
prepareForInline: (storyFn: StoryFn) => storyFn(),
|
||||
extractArgTypes,
|
||||
|
||||
@ -26,7 +26,7 @@ function getPropDefs(component: Component, section: string): PropDef[] {
|
||||
// eslint-disable-next-line react/forbid-foreign-prop-types
|
||||
if (!hasDocgen(component) && !component.propTypes) {
|
||||
if (isForwardRef(component) || component.render) {
|
||||
processedComponent = component.render().type;
|
||||
processedComponent = component.render({}).type;
|
||||
}
|
||||
if (isMemo(component)) {
|
||||
processedComponent = component.type().type;
|
||||
|
||||
@ -18,7 +18,7 @@ const argsTableProps = (component: Component) => {
|
||||
|
||||
const ArgsStory = ({ component }: any) => {
|
||||
const { rows } = argsTableProps(component);
|
||||
const initialArgs = mapValues(rows, () => null) as Args;
|
||||
const initialArgs = mapValues(rows, (argType) => argType.defaultValue) as Args;
|
||||
|
||||
const [args, setArgs] = useState(initialArgs);
|
||||
return (
|
||||
|
||||
@ -2,138 +2,158 @@
|
||||
|
||||
exports[`web-components component properties lit-element-demo-card 1`] = `
|
||||
Object {
|
||||
"sections": Object {
|
||||
"attributes": Array [
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"summary": "false",
|
||||
},
|
||||
"description": "Indicates that the back of the card is shown",
|
||||
"name": "back-side",
|
||||
"required": "",
|
||||
"type": Object {
|
||||
"summary": "boolean",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"summary": "\\"Your Message\\"",
|
||||
},
|
||||
"description": "Header message",
|
||||
"name": "header",
|
||||
"required": "",
|
||||
"type": Object {
|
||||
"summary": "string",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"summary": "[]",
|
||||
},
|
||||
"description": "Data rows",
|
||||
"name": "rows",
|
||||
"required": "",
|
||||
"type": Object {
|
||||
"summary": "object",
|
||||
},
|
||||
},
|
||||
],
|
||||
"css": Array [
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"summary": undefined,
|
||||
},
|
||||
"description": "Header font size",
|
||||
"name": "--demo-wc-card-header-font-size",
|
||||
"required": "",
|
||||
"type": Object {
|
||||
"summary": undefined,
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"summary": undefined,
|
||||
},
|
||||
"description": "Font color for front",
|
||||
"name": "--demo-wc-card-front-color",
|
||||
"required": "",
|
||||
"type": Object {
|
||||
"summary": undefined,
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"summary": undefined,
|
||||
},
|
||||
"description": "Font color for back",
|
||||
"name": "--demo-wc-card-back-color",
|
||||
"required": "",
|
||||
"type": Object {
|
||||
"summary": undefined,
|
||||
},
|
||||
},
|
||||
],
|
||||
"events": Array [
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"summary": undefined,
|
||||
},
|
||||
"description": "Fires whenever it switches between front/back",
|
||||
"name": "side-changed",
|
||||
"required": "",
|
||||
"type": Object {
|
||||
"summary": undefined,
|
||||
},
|
||||
},
|
||||
],
|
||||
"properties": Array [
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"summary": "false",
|
||||
},
|
||||
"description": "Indicates that the back of the card is shown",
|
||||
"name": "backSide",
|
||||
"required": "",
|
||||
"type": Object {
|
||||
"summary": "boolean",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"summary": "\\"Your Message\\"",
|
||||
},
|
||||
"description": "Header message",
|
||||
"name": "header",
|
||||
"required": "",
|
||||
"type": Object {
|
||||
"summary": "string",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"summary": "[]",
|
||||
},
|
||||
"description": "Data rows",
|
||||
"name": "rows",
|
||||
"required": "",
|
||||
"type": Object {
|
||||
"summary": "object",
|
||||
},
|
||||
},
|
||||
],
|
||||
"slots": Array [
|
||||
Object {
|
||||
"defaultValue": Object {
|
||||
"summary": undefined,
|
||||
},
|
||||
"": Object {
|
||||
"description": "This is an unnamed slot (the default slot)",
|
||||
"name": "",
|
||||
"required": "",
|
||||
"required": false,
|
||||
"table": Object {
|
||||
"category": "slots",
|
||||
"defaultValue": Object {
|
||||
"summary": undefined,
|
||||
},
|
||||
"type": Object {
|
||||
"summary": undefined,
|
||||
},
|
||||
},
|
||||
],
|
||||
"type": Object {
|
||||
"name": "void",
|
||||
},
|
||||
},
|
||||
"--demo-wc-card-back-color": Object {
|
||||
"description": "Font color for back",
|
||||
"name": "--demo-wc-card-back-color",
|
||||
"required": false,
|
||||
"table": Object {
|
||||
"category": "css",
|
||||
"defaultValue": Object {
|
||||
"summary": undefined,
|
||||
},
|
||||
"type": Object {
|
||||
"summary": undefined,
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "void",
|
||||
},
|
||||
},
|
||||
"--demo-wc-card-front-color": Object {
|
||||
"description": "Font color for front",
|
||||
"name": "--demo-wc-card-front-color",
|
||||
"required": false,
|
||||
"table": Object {
|
||||
"category": "css",
|
||||
"defaultValue": Object {
|
||||
"summary": undefined,
|
||||
},
|
||||
"type": Object {
|
||||
"summary": undefined,
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "void",
|
||||
},
|
||||
},
|
||||
"--demo-wc-card-header-font-size": Object {
|
||||
"description": "Header font size",
|
||||
"name": "--demo-wc-card-header-font-size",
|
||||
"required": false,
|
||||
"table": Object {
|
||||
"category": "css",
|
||||
"defaultValue": Object {
|
||||
"summary": undefined,
|
||||
},
|
||||
"type": Object {
|
||||
"summary": undefined,
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "void",
|
||||
},
|
||||
},
|
||||
"back-side": Object {
|
||||
"description": "Indicates that the back of the card is shown",
|
||||
"name": "back-side",
|
||||
"required": false,
|
||||
"table": Object {
|
||||
"category": "attributes",
|
||||
"defaultValue": Object {
|
||||
"summary": "false",
|
||||
},
|
||||
"type": Object {
|
||||
"summary": "boolean",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "void",
|
||||
},
|
||||
},
|
||||
"backSide": Object {
|
||||
"description": "Indicates that the back of the card is shown",
|
||||
"name": "backSide",
|
||||
"required": false,
|
||||
"table": Object {
|
||||
"category": "properties",
|
||||
"defaultValue": Object {
|
||||
"summary": "false",
|
||||
},
|
||||
"type": Object {
|
||||
"summary": "boolean",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "boolean",
|
||||
},
|
||||
},
|
||||
"header": Object {
|
||||
"description": "Header message",
|
||||
"name": "header",
|
||||
"required": false,
|
||||
"table": Object {
|
||||
"category": "properties",
|
||||
"defaultValue": Object {
|
||||
"summary": "\\"Your Message\\"",
|
||||
},
|
||||
"type": Object {
|
||||
"summary": "string",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "string",
|
||||
},
|
||||
},
|
||||
"rows": Object {
|
||||
"description": "Data rows",
|
||||
"name": "rows",
|
||||
"required": false,
|
||||
"table": Object {
|
||||
"category": "properties",
|
||||
"defaultValue": Object {
|
||||
"summary": "[]",
|
||||
},
|
||||
"type": Object {
|
||||
"summary": "object",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "object",
|
||||
},
|
||||
},
|
||||
"side-changed": Object {
|
||||
"description": "Fires whenever it switches between front/back",
|
||||
"name": "side-changed",
|
||||
"required": false,
|
||||
"table": Object {
|
||||
"category": "events",
|
||||
"defaultValue": Object {
|
||||
"summary": undefined,
|
||||
},
|
||||
"type": Object {
|
||||
"summary": undefined,
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "void",
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`web-components component properties lit-html-welcome 1`] = `false`;
|
||||
exports[`web-components component properties lit-html-welcome 1`] = `Object {}`;
|
||||
|
||||
@ -3,11 +3,11 @@
|
||||
import { addParameters } from '@storybook/client-api';
|
||||
import React from 'react';
|
||||
import { render } from 'lit-html';
|
||||
import { extractProps, extractComponentDescription } from './custom-elements';
|
||||
import { extractArgTypes, extractComponentDescription } from './custom-elements';
|
||||
|
||||
addParameters({
|
||||
docs: {
|
||||
extractProps,
|
||||
extractArgTypes,
|
||||
extractComponentDescription,
|
||||
inlineStories: true,
|
||||
prepareForInline: (storyFn) => {
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { getCustomElements, isValidComponent, isValidMetaData } from '@storybook/web-components';
|
||||
import { ArgTypes } from '@storybook/api';
|
||||
|
||||
interface TagItem {
|
||||
name: string;
|
||||
@ -31,49 +32,51 @@ interface Sections {
|
||||
css?: any;
|
||||
}
|
||||
|
||||
function mapData(data: TagItem[]) {
|
||||
return data.map((item) => ({
|
||||
function mapData(data: TagItem[], category: string) {
|
||||
return (
|
||||
data &&
|
||||
data.reduce((acc, item) => {
|
||||
const type = category === 'properties' ? { name: item.type } : { name: 'void' };
|
||||
acc[item.name] = {
|
||||
name: item.name,
|
||||
type: { summary: item.type },
|
||||
required: '',
|
||||
required: false,
|
||||
description: item.description,
|
||||
type,
|
||||
table: {
|
||||
category,
|
||||
type: { summary: item.type },
|
||||
defaultValue: { summary: item.default !== undefined ? item.default : item.defaultValue },
|
||||
}));
|
||||
},
|
||||
};
|
||||
return acc;
|
||||
}, {} as ArgTypes)
|
||||
);
|
||||
}
|
||||
|
||||
function isEmpty(obj: object) {
|
||||
return Object.entries(obj).length === 0 && obj.constructor === Object;
|
||||
}
|
||||
|
||||
export const extractPropsFromElements = (tagName: string, customElements: CustomElements) => {
|
||||
export const extractArgTypesFromElements = (tagName: string, customElements: CustomElements) => {
|
||||
if (!isValidComponent(tagName) || !isValidMetaData(customElements)) {
|
||||
return null;
|
||||
}
|
||||
const metaData = customElements.tags.find(
|
||||
(tag) => tag.name.toUpperCase() === tagName.toUpperCase()
|
||||
);
|
||||
const sections: Sections = {};
|
||||
if (metaData.attributes) {
|
||||
sections.attributes = mapData(metaData.attributes);
|
||||
}
|
||||
if (metaData.properties) {
|
||||
sections.properties = mapData(metaData.properties);
|
||||
}
|
||||
if (metaData.events) {
|
||||
sections.events = mapData(metaData.events);
|
||||
}
|
||||
if (metaData.slots) {
|
||||
sections.slots = mapData(metaData.slots);
|
||||
}
|
||||
if (metaData.cssProperties) {
|
||||
sections.css = mapData(metaData.cssProperties);
|
||||
}
|
||||
return isEmpty(sections) ? false : { sections };
|
||||
const argTypes = {
|
||||
...mapData(metaData.attributes, 'attributes'),
|
||||
...mapData(metaData.properties, 'properties'),
|
||||
...mapData(metaData.events, 'events'),
|
||||
...mapData(metaData.slots, 'slots'),
|
||||
...mapData(metaData.cssProperties, 'css'),
|
||||
};
|
||||
return argTypes;
|
||||
};
|
||||
|
||||
export const extractProps = (tagName: string) => {
|
||||
export const extractArgTypes = (tagName: string) => {
|
||||
const customElements: CustomElements = getCustomElements();
|
||||
return extractPropsFromElements(tagName, customElements);
|
||||
return extractArgTypesFromElements(tagName, customElements);
|
||||
};
|
||||
|
||||
export const extractComponentDescription = (tagName: string) => {
|
||||
|
||||
@ -29,7 +29,7 @@ describe('web-components component properties', () => {
|
||||
// https://github.com/Polymer/lit-html/issues/516
|
||||
jest.mock('lit-html', () => {});
|
||||
// eslint-disable-next-line global-require
|
||||
const { extractPropsFromElements } = require('./custom-elements');
|
||||
const { extractArgTypesFromElements } = require('./custom-elements');
|
||||
|
||||
const fixturesDir = path.join(__dirname, '__testfixtures__');
|
||||
fs.readdirSync(fixturesDir, { withFileTypes: true }).forEach((testEntry) => {
|
||||
@ -52,7 +52,7 @@ describe('web-components component properties', () => {
|
||||
);
|
||||
|
||||
// snapshot the properties
|
||||
const properties = extractPropsFromElements('input', customElements);
|
||||
const properties = extractArgTypesFromElements('input', customElements);
|
||||
expect(properties).toMatchSpecificSnapshot(path.join(testDir, 'properties.snapshot'));
|
||||
});
|
||||
}
|
||||
|
||||
@ -4,10 +4,13 @@ import { PTType } from './types';
|
||||
import { SBType } from '../types';
|
||||
import { trimQuotes } from '../utils';
|
||||
|
||||
const SIGNATURE_REGEXP = /^\(.*\) => /;
|
||||
|
||||
export const convert = (type: PTType): SBType | any => {
|
||||
const { name, raw, computed, value } = type;
|
||||
const base: any = {};
|
||||
if (typeof raw !== 'undefined') base.raw = raw;
|
||||
|
||||
switch (name) {
|
||||
case 'enum': {
|
||||
const values = computed ? value : value.map((v: PTType) => trimQuotes(v.value));
|
||||
@ -40,6 +43,7 @@ export const convert = (type: PTType): SBType | any => {
|
||||
case 'elementType':
|
||||
default:
|
||||
const otherVal = value ? `${name}(${value})` : name;
|
||||
return { ...base, name: 'other', value: otherVal };
|
||||
const otherName = SIGNATURE_REGEXP.test(name) ? 'function' : 'other';
|
||||
return { ...base, name: otherName, value: otherVal };
|
||||
}
|
||||
};
|
||||
|
||||
@ -49,9 +49,8 @@ function MDXContent({ components, ...props }) {
|
||||
MDXContent.isMDXComponent = true;
|
||||
|
||||
export const componentNotes = () => <Button>Component notes</Button>;
|
||||
componentNotes.story = {};
|
||||
componentNotes.story.name = 'component notes';
|
||||
componentNotes.story.parameters = { storySource: { source: '<Button>Component notes</Button>' } };
|
||||
componentNotes.storyName = 'component notes';
|
||||
componentNotes.parameters = { storySource: { source: '<Button>Component notes</Button>' } };
|
||||
|
||||
const componentMeta = {
|
||||
title: 'Button',
|
||||
|
||||
@ -33,9 +33,8 @@ function MDXContent({ components, ...props }) {
|
||||
MDXContent.isMDXComponent = true;
|
||||
|
||||
export const componentNotes = () => <Button>Component notes</Button>;
|
||||
componentNotes.story = {};
|
||||
componentNotes.story.name = 'component notes';
|
||||
componentNotes.story.parameters = { storySource: { source: '<Button>Component notes</Button>' } };
|
||||
componentNotes.storyName = 'component notes';
|
||||
componentNotes.parameters = { storySource: { source: '<Button>Component notes</Button>' } };
|
||||
|
||||
const componentMeta = {
|
||||
title: 'Button',
|
||||
|
||||
@ -52,10 +52,9 @@ function MDXContent({ components, ...props }) {
|
||||
MDXContent.isMDXComponent = true;
|
||||
|
||||
export const one = () => <Button>One</Button>;
|
||||
one.story = {};
|
||||
one.story.name = 'one';
|
||||
one.story.parameters = { storySource: { source: '<Button>One</Button>' } };
|
||||
one.story.decorators = [(storyFn) => <div className=\\"local\\">{storyFn()}</div>];
|
||||
one.storyName = 'one';
|
||||
one.parameters = { storySource: { source: '<Button>One</Button>' } };
|
||||
one.decorators = [(storyFn) => <div className=\\"local\\">{storyFn()}</div>];
|
||||
|
||||
const componentMeta = {
|
||||
title: 'Button',
|
||||
|
||||
@ -38,7 +38,7 @@ export const __page = () => {
|
||||
throw new Error('Docs-only story');
|
||||
};
|
||||
|
||||
__page.story = { parameters: { docsOnly: true } };
|
||||
__page.parameters = { docsOnly: true };
|
||||
|
||||
const componentMeta = { title: 'docs-only', includeStories: ['__page'] };
|
||||
|
||||
|
||||
@ -32,7 +32,7 @@ export const __page = () => {
|
||||
throw new Error('Docs-only story');
|
||||
};
|
||||
|
||||
__page.story = { parameters: { docsOnly: true } };
|
||||
__page.parameters = { docsOnly: true };
|
||||
|
||||
const componentMeta = { title: \\"Addons/Docs/what's in a title?\\", includeStories: ['__page'] };
|
||||
|
||||
|
||||
@ -40,14 +40,12 @@ function MDXContent({ components, ...props }) {
|
||||
MDXContent.isMDXComponent = true;
|
||||
|
||||
export const one = () => <Button>One</Button>;
|
||||
one.story = {};
|
||||
one.story.name = 'one';
|
||||
one.story.parameters = { storySource: { source: '<Button>One</Button>' } };
|
||||
one.storyName = 'one';
|
||||
one.parameters = { storySource: { source: '<Button>One</Button>' } };
|
||||
|
||||
export const helloStory = () => <Button>Hello button</Button>;
|
||||
helloStory.story = {};
|
||||
helloStory.story.name = 'hello story';
|
||||
helloStory.story.parameters = { storySource: { source: '<Button>Hello button</Button>' } };
|
||||
helloStory.storyName = 'hello story';
|
||||
helloStory.parameters = { storySource: { source: '<Button>Hello button</Button>' } };
|
||||
|
||||
const componentMeta = { title: 'Button', includeStories: ['one', 'helloStory'] };
|
||||
|
||||
|
||||
@ -49,14 +49,12 @@ function MDXContent({ components, ...props }) {
|
||||
MDXContent.isMDXComponent = true;
|
||||
|
||||
export const componentNotes = () => <Button>Component notes</Button>;
|
||||
componentNotes.story = {};
|
||||
componentNotes.story.name = 'component notes';
|
||||
componentNotes.story.parameters = { storySource: { source: '<Button>Component notes</Button>' } };
|
||||
componentNotes.storyName = 'component notes';
|
||||
componentNotes.parameters = { storySource: { source: '<Button>Component notes</Button>' } };
|
||||
|
||||
export const storyNotes = () => <Button>Story notes</Button>;
|
||||
storyNotes.story = {};
|
||||
storyNotes.story.name = 'story notes';
|
||||
storyNotes.story.parameters = {
|
||||
storyNotes.storyName = 'story notes';
|
||||
storyNotes.parameters = {
|
||||
storySource: { source: '<Button>Story notes</Button>' },
|
||||
...{
|
||||
notes: 'story notes',
|
||||
|
||||
@ -53,14 +53,12 @@ function MDXContent({ components, ...props }) {
|
||||
MDXContent.isMDXComponent = true;
|
||||
|
||||
export const helloButton = () => <Button>Hello button</Button>;
|
||||
helloButton.story = {};
|
||||
helloButton.story.name = 'hello button';
|
||||
helloButton.story.parameters = { storySource: { source: '<Button>Hello button</Button>' } };
|
||||
helloButton.storyName = 'hello button';
|
||||
helloButton.parameters = { storySource: { source: '<Button>Hello button</Button>' } };
|
||||
|
||||
export const two = () => <Button>Two</Button>;
|
||||
two.story = {};
|
||||
two.story.name = 'two';
|
||||
two.story.parameters = { storySource: { source: '<Button>Two</Button>' } };
|
||||
two.storyName = 'two';
|
||||
two.parameters = { storySource: { source: '<Button>Two</Button>' } };
|
||||
|
||||
const componentMeta = {
|
||||
title: 'Button',
|
||||
|
||||
@ -49,9 +49,8 @@ function MDXContent({ components, ...props }) {
|
||||
MDXContent.isMDXComponent = true;
|
||||
|
||||
export const componentNotes = () => <Button>Component notes</Button>;
|
||||
componentNotes.story = {};
|
||||
componentNotes.story.name = 'component notes';
|
||||
componentNotes.story.argTypes = {
|
||||
componentNotes.storyName = 'component notes';
|
||||
componentNotes.argTypes = {
|
||||
a: {
|
||||
name: 'A',
|
||||
},
|
||||
@ -59,11 +58,11 @@ componentNotes.story.argTypes = {
|
||||
name: 'B',
|
||||
},
|
||||
};
|
||||
componentNotes.story.args = {
|
||||
componentNotes.args = {
|
||||
a: 1,
|
||||
b: 2,
|
||||
};
|
||||
componentNotes.story.parameters = { storySource: { source: '<Button>Component notes</Button>' } };
|
||||
componentNotes.parameters = { storySource: { source: '<Button>Component notes</Button>' } };
|
||||
|
||||
const componentMeta = { title: 'Button', includeStories: ['componentNotes'] };
|
||||
|
||||
|
||||
@ -33,9 +33,8 @@ function MDXContent({ components, ...props }) {
|
||||
MDXContent.isMDXComponent = true;
|
||||
|
||||
export const text = () => 'Plain text';
|
||||
text.story = {};
|
||||
text.story.name = 'text';
|
||||
text.story.parameters = { storySource: { source: \\"'Plain text'\\" } };
|
||||
text.storyName = 'text';
|
||||
text.parameters = { storySource: { source: \\"'Plain text'\\" } };
|
||||
|
||||
const componentMeta = { title: 'Text', includeStories: ['text'] };
|
||||
|
||||
|
||||
@ -43,24 +43,20 @@ function MDXContent({ components, ...props }) {
|
||||
MDXContent.isMDXComponent = true;
|
||||
|
||||
export const one = () => <Button>One</Button>;
|
||||
one.story = {};
|
||||
one.story.name = 'one';
|
||||
one.story.parameters = { storySource: { source: '<Button>One</Button>' } };
|
||||
one.storyName = 'one';
|
||||
one.parameters = { storySource: { source: '<Button>One</Button>' } };
|
||||
|
||||
export const helloStory = () => <Button>Hello button</Button>;
|
||||
helloStory.story = {};
|
||||
helloStory.story.name = 'hello story';
|
||||
helloStory.story.parameters = { storySource: { source: '<Button>Hello button</Button>' } };
|
||||
helloStory.storyName = 'hello story';
|
||||
helloStory.parameters = { storySource: { source: '<Button>Hello button</Button>' } };
|
||||
|
||||
export const wPunctuation = () => <Button>with punctuation</Button>;
|
||||
wPunctuation.story = {};
|
||||
wPunctuation.story.name = 'w/punctuation';
|
||||
wPunctuation.story.parameters = { storySource: { source: '<Button>with punctuation</Button>' } };
|
||||
wPunctuation.storyName = 'w/punctuation';
|
||||
wPunctuation.parameters = { storySource: { source: '<Button>with punctuation</Button>' } };
|
||||
|
||||
export const _1FineDay = () => <Button>starts with number</Button>;
|
||||
_1FineDay.story = {};
|
||||
_1FineDay.story.name = '1 fine day';
|
||||
_1FineDay.story.parameters = { storySource: { source: '<Button>starts with number</Button>' } };
|
||||
_1FineDay.storyName = '1 fine day';
|
||||
_1FineDay.parameters = { storySource: { source: '<Button>starts with number</Button>' } };
|
||||
|
||||
const componentMeta = {
|
||||
title: 'Button',
|
||||
|
||||
@ -37,9 +37,8 @@ function MDXContent({ components, ...props }) {
|
||||
MDXContent.isMDXComponent = true;
|
||||
|
||||
export const basic = assertIsFn(basicFn);
|
||||
basic.story = {};
|
||||
basic.story.name = 'basic';
|
||||
basic.story.parameters = { storySource: { source: 'basicFn' } };
|
||||
basic.storyName = 'basic';
|
||||
basic.parameters = { storySource: { source: 'basicFn' } };
|
||||
|
||||
const componentMeta = { title: 'story-function-var', includeStories: ['basic'] };
|
||||
|
||||
|
||||
@ -39,9 +39,8 @@ export const functionStory = () => {
|
||||
btn.addEventListener('click', action('Click'));
|
||||
return btn;
|
||||
};
|
||||
functionStory.story = {};
|
||||
functionStory.story.name = 'function';
|
||||
functionStory.story.parameters = {
|
||||
functionStory.storyName = 'function';
|
||||
functionStory.parameters = {
|
||||
storySource: {
|
||||
source:
|
||||
\\"() => {\\\\n const btn = document.createElement('button');\\\\n btn.innerHTML = 'Hello Button';\\\\n btn.addEventListener('click', action('Click'));\\\\n return btn;\\\\n}\\",
|
||||
|
||||
@ -39,9 +39,8 @@ export const multipleChildren = () => (
|
||||
<p>Hello Child #2</p>
|
||||
</>
|
||||
);
|
||||
multipleChildren.story = {};
|
||||
multipleChildren.story.name = 'multiple children';
|
||||
multipleChildren.story.parameters = {
|
||||
multipleChildren.storyName = 'multiple children';
|
||||
multipleChildren.parameters = {
|
||||
storySource: { source: '<p>Hello Child #1</p>\\\\n<p>Hello Child #2</p>' },
|
||||
};
|
||||
|
||||
|
||||
@ -51,9 +51,8 @@ export const toStorybook = () => ({
|
||||
declarations: [Welcome],
|
||||
},
|
||||
});
|
||||
toStorybook.story = {};
|
||||
toStorybook.story.name = 'to storybook';
|
||||
toStorybook.story.parameters = {
|
||||
toStorybook.storyName = 'to storybook';
|
||||
toStorybook.parameters = {
|
||||
storySource: {
|
||||
source:
|
||||
'{\\\\n template: \`<storybook-welcome-component (showApp)=\\"showApp()\\"></storybook-welcome-component>\`,\\\\n props: {\\\\n showApp: linkTo(\\\\'Button\\\\')\\\\n },\\\\n moduleMetadata: {\\\\n declarations: [Welcome]\\\\n }\\\\n}',
|
||||
|
||||
@ -33,7 +33,7 @@ export const __page = () => {
|
||||
throw new Error('Docs-only story');
|
||||
};
|
||||
|
||||
__page.story = { parameters: { docsOnly: true } };
|
||||
__page.parameters = { docsOnly: true };
|
||||
|
||||
const componentMeta = { title: \`\${titleFunction('template')}\`, includeStories: ['__page'] };
|
||||
|
||||
|
||||
@ -102,16 +102,15 @@ function genStoryExport(ast, context) {
|
||||
}
|
||||
|
||||
statements.push(`export const ${storyKey} = ${storyVal};`);
|
||||
statements.push(`${storyKey}.story = {};`);
|
||||
|
||||
// always preserve the name, since CSF exports can get modified by displayName
|
||||
statements.push(`${storyKey}.story.name = '${storyName}';`);
|
||||
statements.push(`${storyKey}.storyName = '${storyName}';`);
|
||||
|
||||
const argTypes = genAttribute('argTypes', ast.openingElement);
|
||||
if (argTypes) statements.push(`${storyKey}.story.argTypes = ${argTypes};`);
|
||||
if (argTypes) statements.push(`${storyKey}.argTypes = ${argTypes};`);
|
||||
|
||||
const args = genAttribute('args', ast.openingElement);
|
||||
if (args) statements.push(`${storyKey}.story.args = ${args};`);
|
||||
if (args) statements.push(`${storyKey}.args = ${args};`);
|
||||
|
||||
let parameters = getAttr(ast.openingElement, 'parameters');
|
||||
parameters = parameters && parameters.expression;
|
||||
@ -119,16 +118,16 @@ function genStoryExport(ast, context) {
|
||||
const sourceParam = `storySource: { source: '${source}' }`;
|
||||
if (parameters) {
|
||||
const { code: params } = generate(parameters, {});
|
||||
statements.push(`${storyKey}.story.parameters = { ${sourceParam}, ...${params} };`);
|
||||
statements.push(`${storyKey}.parameters = { ${sourceParam}, ...${params} };`);
|
||||
} else {
|
||||
statements.push(`${storyKey}.story.parameters = { ${sourceParam} };`);
|
||||
statements.push(`${storyKey}.parameters = { ${sourceParam} };`);
|
||||
}
|
||||
|
||||
let decorators = getAttr(ast.openingElement, 'decorators');
|
||||
decorators = decorators && decorators.expression;
|
||||
if (decorators) {
|
||||
const { code: decos } = generate(decorators, {});
|
||||
statements.push(`${storyKey}.story.decorators = ${decos};`);
|
||||
statements.push(`${storyKey}.decorators = ${decos};`);
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
@ -336,7 +335,7 @@ function extractExports(node, options) {
|
||||
if (metaExport) {
|
||||
if (!storyExports.length) {
|
||||
storyExports.push('export const __page = () => { throw new Error("Docs-only story"); };');
|
||||
storyExports.push('__page.story = { parameters: { docsOnly: true } };');
|
||||
storyExports.push('__page.parameters = { docsOnly: true };');
|
||||
includeStories.push('__page');
|
||||
}
|
||||
} else {
|
||||
|
||||
@ -13,6 +13,7 @@ To learn more about Storybook Docs, read the [general documentation](../README.m
|
||||
- [Installation](#installation)
|
||||
- [Preset options](#preset-options)
|
||||
- [DocsPage](#docspage)
|
||||
- [Props tables](#props-tables)
|
||||
- [MDX](#mdx)
|
||||
- [Inline Stories](#inline-stories)
|
||||
- [More resources](#more-resources)
|
||||
@ -62,7 +63,9 @@ The `vueDocgenOptions` is an object for configuring `vue-docgen-api`. See [`vue-
|
||||
|
||||
When you [install docs](#installation) you should get basic [DocsPage](../docs/docspage.md) documentation automagically for all your stories, available in the `Docs` tab of the Storybook UI.
|
||||
|
||||
Props tables for your components requires a few more steps. Docs for Vue relies on [`vue-docgen-loader`](https://github.com/pocka/vue-docgen-loader). It supports `props`, `events`, and `slots` as first class prop types.
|
||||
## Props tables
|
||||
|
||||
Getting [Props tables](../docs/props-tables.md) for your components requires a few more steps. Docs for Vue relies on [`vue-docgen-loader`](https://github.com/pocka/vue-docgen-loader). It supports `props`, `events`, and `slots` as first class prop types.
|
||||
|
||||
Finally, be sure to fill in the `component` field in your story metadata:
|
||||
|
||||
@ -100,7 +103,7 @@ Then update your `.storybook/main.js` to make sure you load MDX files:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
stories: ['../src/stories/**/*.stories.(js|mdx)'],
|
||||
stories: ['../src/stories/**/*.stories.@(js|mdx)'],
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
@ -1,4 +1,9 @@
|
||||
# Storybook Docs for Web Components
|
||||
<h1>Storybook Docs for Web Components</h1>
|
||||
|
||||
- [Installation](#installation)
|
||||
- [Props tables](#props-tables)
|
||||
- [Stories not inline](#stories-not-inline)
|
||||
- [More resources](#more-resources)
|
||||
|
||||
## Installation
|
||||
|
||||
@ -22,9 +27,9 @@
|
||||
};
|
||||
```
|
||||
|
||||
### custom-elements.json
|
||||
## Props tables
|
||||
|
||||
In order to get documentation for web-components you will need to have a [custom-elements.json](https://github.com/webcomponents/custom-elements-json) file.
|
||||
In order to get [Props tables](..docs/../../docs/props-tables.md) documentation for web-components you will need to have a [custom-elements.json](https://github.com/webcomponents/custom-elements-json) file.
|
||||
|
||||
You can hand write it or better generate it. Depending on the web components sugar you are choosing your milage may vary.
|
||||
|
||||
@ -44,7 +49,7 @@ To generate this file with Stencil, add `docs-vscode` to outputTargets in `stenc
|
||||
},
|
||||
```
|
||||
|
||||
The file looks somewthing like this:
|
||||
The file looks something like this:
|
||||
|
||||
```json
|
||||
{
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-essentials",
|
||||
"version": "6.0.0-beta.9",
|
||||
"version": "6.0.0-beta.21",
|
||||
"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.9",
|
||||
"@storybook/addon-backgrounds": "6.0.0-beta.9",
|
||||
"@storybook/addon-docs": "6.0.0-beta.9",
|
||||
"@storybook/addon-viewport": "6.0.0-beta.9",
|
||||
"@storybook/addons": "6.0.0-beta.9",
|
||||
"@storybook/api": "6.0.0-beta.9",
|
||||
"@storybook/node-logger": "6.0.0-beta.9",
|
||||
"@storybook/addon-actions": "6.0.0-beta.21",
|
||||
"@storybook/addon-backgrounds": "6.0.0-beta.21",
|
||||
"@storybook/addon-docs": "6.0.0-beta.21",
|
||||
"@storybook/addon-viewport": "6.0.0-beta.21",
|
||||
"@storybook/addons": "6.0.0-beta.21",
|
||||
"@storybook/api": "6.0.0-beta.21",
|
||||
"@storybook/node-logger": "6.0.0-beta.21",
|
||||
"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.9",
|
||||
"version": "6.0.0-beta.21",
|
||||
"description": "Add events to your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -31,18 +31,18 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.9",
|
||||
"@storybook/api": "6.0.0-beta.9",
|
||||
"@storybook/client-api": "6.0.0-beta.9",
|
||||
"@storybook/core-events": "6.0.0-beta.9",
|
||||
"@storybook/theming": "6.0.0-beta.9",
|
||||
"@storybook/addons": "6.0.0-beta.21",
|
||||
"@storybook/api": "6.0.0-beta.21",
|
||||
"@storybook/client-api": "6.0.0-beta.21",
|
||||
"@storybook/core-events": "6.0.0-beta.21",
|
||||
"@storybook/theming": "6.0.0-beta.21",
|
||||
"core-js": "^3.0.1",
|
||||
"format-json": "^1.0.3",
|
||||
"lodash": "^4.17.15",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.8.3",
|
||||
"react-lifecycles-compat": "^3.0.4",
|
||||
"react-textarea-autosize": "^7.0.4",
|
||||
"react-textarea-autosize": "^8.0.1",
|
||||
"regenerator-runtime": "^0.13.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-google-analytics",
|
||||
"version": "6.0.0-beta.9",
|
||||
"version": "6.0.0-beta.21",
|
||||
"description": "Storybook addon for google analytics",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -20,8 +20,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.9",
|
||||
"@storybook/core-events": "6.0.0-beta.9",
|
||||
"@storybook/addons": "6.0.0-beta.21",
|
||||
"@storybook/core-events": "6.0.0-beta.21",
|
||||
"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.9",
|
||||
"version": "6.0.0-beta.21",
|
||||
"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.9",
|
||||
"@storybook/api": "6.0.0-beta.9",
|
||||
"@storybook/addons": "6.0.0-beta.21",
|
||||
"@storybook/api": "6.0.0-beta.21",
|
||||
"@types/webpack": "^4.41.9",
|
||||
"babel-loader": "^8.0.6",
|
||||
"core-js": "^3.0.1",
|
||||
|
||||
@ -4,7 +4,7 @@ Brings Jest results in storybook.
|
||||
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
|
||||
[](http://storybooks-official.netlify.com/?selectedKind=Addons%7Cjest&selectedStory=withTests&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Ftests%2Fpanel)
|
||||
[](http://storybooks-official.netlify.com/?selectedKind=Addons%7Cjest&selectedStory=withTests&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Ftests%2Fpanel)
|
||||
|
||||
> Checkout the above [Live Storybook](http://storybooks-official.netlify.com/?selectedKind=Addons%7Cjest&selectedStory=withTests&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Ftests%2Fpanel).
|
||||
|
||||
@ -73,8 +73,8 @@ within `.storybook/main.js`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
addons: ['@storybook/addon-jest']
|
||||
}
|
||||
addons: ['@storybook/addon-jest'],
|
||||
};
|
||||
```
|
||||
|
||||
## Usage
|
||||
@ -92,13 +92,9 @@ export default {
|
||||
decorators: [withTests({ results })],
|
||||
};
|
||||
|
||||
export const defaultView = () => (
|
||||
<div>Jest results in storybook</div>
|
||||
);
|
||||
defaultView.story = {
|
||||
parameters: {
|
||||
export const defaultView = () => <div>Jest results in storybook</div>;
|
||||
defaultView.parameters = {
|
||||
jest: ['MyComponent.test.js', 'MyOtherComponent.test.js'],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@ -126,13 +122,9 @@ export default {
|
||||
title: 'MyComponent',
|
||||
};
|
||||
|
||||
export const defaultView = () => (
|
||||
<div>Jest results in storybook</div>
|
||||
);
|
||||
defaultView.story = {
|
||||
parameters: {
|
||||
export const defaultView = () => <div>Jest results in storybook</div>;
|
||||
defaultView.parameters = {
|
||||
jest: ['MyComponent.test.js', 'MyOtherComponent.test.js'],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@ -147,13 +139,9 @@ export default {
|
||||
title: 'MyComponent',
|
||||
};
|
||||
|
||||
export const defaultView = () => (
|
||||
<div>Jest results in storybook</div>
|
||||
);
|
||||
defaultView.story = {
|
||||
parameters: {
|
||||
export const defaultView = () => <div>Jest results in storybook</div>;
|
||||
defaultView.parameters = {
|
||||
jest: { disable: true },
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "6.0.0-beta.9",
|
||||
"version": "6.0.0-beta.21",
|
||||
"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.9",
|
||||
"@storybook/api": "6.0.0-beta.9",
|
||||
"@storybook/components": "6.0.0-beta.9",
|
||||
"@storybook/core-events": "6.0.0-beta.9",
|
||||
"@storybook/theming": "6.0.0-beta.9",
|
||||
"@storybook/addons": "6.0.0-beta.21",
|
||||
"@storybook/api": "6.0.0-beta.21",
|
||||
"@storybook/components": "6.0.0-beta.21",
|
||||
"@storybook/core-events": "6.0.0-beta.21",
|
||||
"@storybook/theming": "6.0.0-beta.21",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3",
|
||||
|
||||
@ -23,35 +23,34 @@ within `.storybook/main.js`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
addons: ['@storybook/addon-knobs']
|
||||
}
|
||||
addons: ['@storybook/addon-knobs'],
|
||||
};
|
||||
```
|
||||
|
||||
Now, write your stories with Knobs.
|
||||
|
||||
### With React
|
||||
|
||||
```js
|
||||
import React from "react";
|
||||
import { withKnobs, text, boolean, number } from "@storybook/addon-knobs";
|
||||
import React from 'react';
|
||||
import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';
|
||||
|
||||
export default {
|
||||
title: "Storybook Knobs",
|
||||
decorators: [withKnobs]
|
||||
title: 'Storybook Knobs',
|
||||
decorators: [withKnobs],
|
||||
};
|
||||
// Add the `withKnobs` decorator to add knobs support to your stories.
|
||||
// You can also configure `withKnobs` as a global decorator.
|
||||
|
||||
// Knobs for React props
|
||||
export const withAButton = () => (
|
||||
<button disabled={boolean("Disabled", false)}>
|
||||
{text("Label", "Hello Storybook")}
|
||||
</button>
|
||||
<button disabled={boolean('Disabled', false)}>{text('Label', 'Hello Storybook')}</button>
|
||||
);
|
||||
|
||||
// Knobs as dynamic variables.
|
||||
export const asDynamicVariables = () => {
|
||||
const name = text("Name", "James");
|
||||
const age = number("Age", 35);
|
||||
const name = text('Name', 'James');
|
||||
const age = number('Age', 35);
|
||||
const content = `I am ${name} and I'm ${age} years old.`;
|
||||
|
||||
return <div>{content}</div>;
|
||||
@ -59,7 +58,9 @@ export const asDynamicVariables = () => {
|
||||
```
|
||||
|
||||
### With Vue.js
|
||||
|
||||
MyButton.story.js:
|
||||
|
||||
```js
|
||||
import { storiesOf } from '@storybook/vue';
|
||||
import { withKnobs, text, boolean } from '@storybook/addon-knobs';
|
||||
@ -67,8 +68,8 @@ import { withKnobs, text, boolean } from '@storybook/addon-knobs';
|
||||
import MyButton from './MyButton.vue';
|
||||
|
||||
export default {
|
||||
title: "Storybook Knobs",
|
||||
decorators: [withKnobs]
|
||||
title: 'Storybook Knobs',
|
||||
decorators: [withKnobs],
|
||||
};
|
||||
|
||||
// Assign `props` to the story's component, calling
|
||||
@ -80,17 +81,18 @@ export const exampleWithKnobs = () => ({
|
||||
components: { MyButton },
|
||||
props: {
|
||||
isDisabled: {
|
||||
default: boolean('Disabled', false)
|
||||
default: boolean('Disabled', false),
|
||||
},
|
||||
text: {
|
||||
default: text('Text', 'Hello Storybook')
|
||||
}
|
||||
default: text('Text', 'Hello Storybook'),
|
||||
},
|
||||
template: `<MyButton :isDisabled="isDisabled">{{ text }}</MyButton>`
|
||||
},
|
||||
template: `<MyButton :isDisabled="isDisabled">{{ text }}</MyButton>`,
|
||||
});
|
||||
```
|
||||
|
||||
MyButton.vue:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<button :disabled="isDisabled">
|
||||
@ -103,14 +105,15 @@ export default {
|
||||
props: {
|
||||
isDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
}
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### With Angular
|
||||
|
||||
```js
|
||||
import { storiesOf } from '@storybook/angular';
|
||||
import { boolean, number, text, withKnobs } from '@storybook/addon-knobs';
|
||||
@ -118,8 +121,8 @@ import { boolean, number, text, withKnobs } from '@storybook/addon-knobs';
|
||||
import { Button } from '@storybook/angular/demo';
|
||||
|
||||
export default {
|
||||
title: "Storybook Knobs",
|
||||
decorators: [withKnobs]
|
||||
title: 'Storybook Knobs',
|
||||
decorators: [withKnobs],
|
||||
};
|
||||
|
||||
export const withKnobs = () => ({
|
||||
@ -131,6 +134,7 @@ export const withKnobs = () => ({
|
||||
```
|
||||
|
||||
### With Ember
|
||||
|
||||
```js
|
||||
import { withKnobs, text, boolean } from '@storybook/addon-knobs';
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
@ -160,9 +164,9 @@ export const inGroups = () => {
|
||||
const personalGroupId = 'personal info';
|
||||
const generalGroupId = 'general info';
|
||||
|
||||
const name = text("Name", "James", personalGroupId);
|
||||
const age = number("Age", 35, {min: 0, max: 99}, personalGroupId);
|
||||
const message = text("Hello!", 35, generalGroupId);
|
||||
const name = text('Name', 'James', personalGroupId);
|
||||
const age = number('Age', 35, { min: 0, max: 99 }, personalGroupId);
|
||||
const message = text('Hello!', 35, generalGroupId);
|
||||
const content = `
|
||||
I am ${name} and I'm ${age} years old.
|
||||
${message}
|
||||
@ -345,7 +349,7 @@ Options can also be an array:
|
||||
```js
|
||||
import { select } from '@storybook/addon-knobs';
|
||||
const label = 'Cats';
|
||||
const options = ['linus', 'eleanor', 'lover']
|
||||
const options = ['linus', 'eleanor', 'lover'];
|
||||
const defaultValue = 'eleanor';
|
||||
const groupId = 'GROUP-ID2';
|
||||
const value = select(label, options, defaultValue, groupId);
|
||||
@ -406,13 +410,15 @@ const valuesObj = {
|
||||
};
|
||||
const defaultValue = 'kiwi';
|
||||
const optionsObj = {
|
||||
display: 'inline-radio'
|
||||
display: 'inline-radio',
|
||||
};
|
||||
const groupId = 'GROUP-ID1';
|
||||
|
||||
const value = options(label, valuesObj, defaultValue, optionsObj, groupId);
|
||||
```
|
||||
|
||||
> The display property for `optionsObj` accepts:
|
||||
>
|
||||
> - `radio`
|
||||
> - `inline-radio`
|
||||
> - `check`
|
||||
@ -459,8 +465,8 @@ If your component needs the date in a different form you can wrap the `date` fun
|
||||
|
||||
```js
|
||||
function myDateKnob(name, defaultValue) {
|
||||
const stringTimestamp = date(name, defaultValue)
|
||||
return new Date(stringTimestamp)
|
||||
const stringTimestamp = date(name, defaultValue);
|
||||
return new Date(stringTimestamp);
|
||||
}
|
||||
```
|
||||
|
||||
@ -494,11 +500,8 @@ export default {
|
||||
decorators: [withKnobs],
|
||||
};
|
||||
|
||||
export const defaultView = () => (
|
||||
<div />
|
||||
);
|
||||
defaultView.story = {
|
||||
parameters: {
|
||||
export const defaultView = () => <div />;
|
||||
defaultView.parameters = {
|
||||
knobs: {
|
||||
// Doesn't emit events while user is typing.
|
||||
timestamps: true,
|
||||
@ -506,8 +509,7 @@ defaultView.story = {
|
||||
// Escapes strings to be safe for inserting as innerHTML. This option is true by default. It's safe to set it to `false` with frameworks like React which do escaping on their side.
|
||||
// You can still set it to false, but it's strongly discouraged to set to true in cases when you host your storybook on some route of your main site or web app.
|
||||
escapeHTML: true,
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@ -518,9 +520,8 @@ If you are using Typescript, make sure you have the type definitions installed f
|
||||
- node
|
||||
- react
|
||||
|
||||
You can install them using: (*assuming you are using Typescript >2.0.*)
|
||||
You can install them using: (_assuming you are using Typescript >2.0._)
|
||||
|
||||
```sh
|
||||
yarn add @types/node @types/react --dev
|
||||
```
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-knobs",
|
||||
"version": "6.0.0-beta.9",
|
||||
"version": "6.0.0-beta.21",
|
||||
"description": "Storybook Addon Prop Editor Component",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,13 +29,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.9",
|
||||
"@storybook/api": "6.0.0-beta.9",
|
||||
"@storybook/channels": "6.0.0-beta.9",
|
||||
"@storybook/client-api": "6.0.0-beta.9",
|
||||
"@storybook/components": "6.0.0-beta.9",
|
||||
"@storybook/core-events": "6.0.0-beta.9",
|
||||
"@storybook/theming": "6.0.0-beta.9",
|
||||
"@storybook/addons": "6.0.0-beta.21",
|
||||
"@storybook/api": "6.0.0-beta.21",
|
||||
"@storybook/channels": "6.0.0-beta.21",
|
||||
"@storybook/client-api": "6.0.0-beta.21",
|
||||
"@storybook/components": "6.0.0-beta.21",
|
||||
"@storybook/core-events": "6.0.0-beta.21",
|
||||
"@storybook/theming": "6.0.0-beta.21",
|
||||
"@types/react-color": "^3.0.1",
|
||||
"copy-to-clipboard": "^3.0.8",
|
||||
"core-js": "^3.0.1",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "6.0.0-beta.9",
|
||||
"version": "6.0.0-beta.21",
|
||||
"description": "Story Links addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,11 +29,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.9",
|
||||
"@storybook/client-logger": "6.0.0-beta.9",
|
||||
"@storybook/core-events": "6.0.0-beta.9",
|
||||
"@storybook/addons": "6.0.0-beta.21",
|
||||
"@storybook/client-logger": "6.0.0-beta.21",
|
||||
"@storybook/core-events": "6.0.0-beta.21",
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/router": "6.0.0-beta.9",
|
||||
"@storybook/router": "6.0.0-beta.21",
|
||||
"@types/qs": "^6.9.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -17,6 +17,8 @@ jest.mock('global', () => ({
|
||||
kind: 'kind',
|
||||
})),
|
||||
},
|
||||
window: global,
|
||||
__STORYBOOK_LOGGER: console,
|
||||
__STORYBOOK_CLIENT_API__: {
|
||||
raw: jest.fn(() => [
|
||||
{
|
||||
|
||||
@ -14,6 +14,7 @@ jest.mock('global', () => ({
|
||||
search: 'search',
|
||||
},
|
||||
},
|
||||
window: global,
|
||||
__STORYBOOK_STORY_STORE__: {
|
||||
getSelection: jest.fn(() => ({ id: 1 })),
|
||||
fromId: jest.fn(() => ({})),
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-queryparams",
|
||||
"version": "6.0.0-beta.9",
|
||||
"version": "6.0.0-beta.21",
|
||||
"description": "parameter addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -30,12 +30,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.9",
|
||||
"@storybook/api": "6.0.0-beta.9",
|
||||
"@storybook/client-logger": "6.0.0-beta.9",
|
||||
"@storybook/components": "6.0.0-beta.9",
|
||||
"@storybook/core-events": "6.0.0-beta.9",
|
||||
"@storybook/theming": "6.0.0-beta.9",
|
||||
"@storybook/addons": "6.0.0-beta.21",
|
||||
"@storybook/api": "6.0.0-beta.21",
|
||||
"@storybook/client-logger": "6.0.0-beta.21",
|
||||
"@storybook/components": "6.0.0-beta.21",
|
||||
"@storybook/core-events": "6.0.0-beta.21",
|
||||
"@storybook/theming": "6.0.0-beta.21",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"qs": "^6.6.0",
|
||||
|
||||
@ -33,21 +33,20 @@ Now run your Jest test command. (Usually, `npm test`.) Then you can see all of y
|
||||
|
||||
|
||||
|
||||
|
||||
## Configure your app for Jest
|
||||
|
||||
In many cases, for example Create React App, it's already configured for Jest. You need to create a filename with the extension `.test.js`.
|
||||
|
||||
If you still need to configure jest you can use the resources mentioned below:
|
||||
|
||||
- [Getting Started - Jest Official Documentation](https://facebook.github.io/jest/docs/en/getting-started.html)
|
||||
- [Javascript Testing with Jest - Egghead](https://egghead.io/lessons/javascript-test-javascript-with-jest). ***paid content***
|
||||
- [Javascript Testing with Jest - Egghead](https://egghead.io/lessons/javascript-test-javascript-with-jest). **_paid content_**
|
||||
|
||||
> Note: If you use React 16, you'll need to follow [these additional instructions](https://github.com/facebook/react/issues/9102#issuecomment-283873039).
|
||||
>
|
||||
> Note: Make sure you have added the ```json``` extension to ```moduleFileExtensions``` in ```jest.config.json```. If this is missing it leads to the [following error](https://github.com/storybookjs/storybook/issues/3728): ```Cannot find module 'spdx-license-ids' from 'scan.js'```.
|
||||
> Note: Make sure you have added the `json` extension to `moduleFileExtensions` in `jest.config.json`. If this is missing it leads to the [following error](https://github.com/storybookjs/storybook/issues/3728): `Cannot find module 'spdx-license-ids' from 'scan.js'`.
|
||||
>
|
||||
> Note: Please make sure you are using ```jsdom``` as the testEnvironment on your jest config file.
|
||||
|
||||
> Note: Please make sure you are using `jsdom` as the testEnvironment on your jest config file.
|
||||
|
||||
### Configure Jest to work with Webpack's [require.context()](https://webpack.js.org/guides/dependency-management/#require-context)
|
||||
|
||||
@ -55,7 +54,7 @@ If you still need to configure jest you can use the resources mentioned below:
|
||||
|
||||
Sometimes it's useful to configure Storybook with Webpack's require.context feature. You could be loading stories [one of two ways](https://storybook.js.org/docs/basics/writing-stories/#loading-stories).
|
||||
|
||||
1) If you're using the `storiesOf` API, you can integrate it this way:
|
||||
1. If you're using the `storiesOf` API, you can integrate it this way:
|
||||
|
||||
```js
|
||||
import { configure } from '@storybook/react';
|
||||
@ -63,13 +62,13 @@ import { configure } from '@storybook/react';
|
||||
const req = require.context('../stories', true, /\.stories\.js$/); // <- import all the stories at once
|
||||
|
||||
function loadStories() {
|
||||
req.keys().forEach(filename => req(filename));
|
||||
req.keys().forEach((filename) => req(filename));
|
||||
}
|
||||
|
||||
configure(loadStories, module);
|
||||
```
|
||||
|
||||
2) If you're using Component Story Format (CSF), you'll integrate it like so:
|
||||
2. If you're using Component Story Format (CSF), you'll integrate it like so:
|
||||
|
||||
```js
|
||||
import { configure } from '@storybook/react';
|
||||
@ -100,11 +99,13 @@ Next, it needs to be registered and loaded before each test. To register it, cre
|
||||
import registerRequireContextHook from 'babel-plugin-require-context-hook/register';
|
||||
registerRequireContextHook();
|
||||
```
|
||||
|
||||
That file needs to be added as a setup file for Jest. To do that, add (or create) a property in Jest's config called [`setupFiles`](https://jestjs.io/docs/en/configuration.html#setupfiles-array). Add the file name and path to this array.
|
||||
|
||||
```json
|
||||
setupFiles: ['<rootDir>/.jest/register-context.js']
|
||||
```
|
||||
|
||||
Finally, add the plugin to `.babelrc`:
|
||||
|
||||
```json
|
||||
@ -118,6 +119,7 @@ Finally, add the plugin to `.babelrc`:
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The plugin is only added to the test environment otherwise it could replace webpack's version of it.
|
||||
|
||||
#### Option 2: Macro
|
||||
@ -138,6 +140,7 @@ const req = requireContext('../stories', true, /\.stories\.js$/);
|
||||
```
|
||||
|
||||
### Configure Jest for React
|
||||
|
||||
StoryShots addon for React is dependent on [react-test-renderer](https://github.com/facebook/react/tree/master/packages/react-test-renderer), but
|
||||
[doesn't](#deps-issue) install it, so you need to install it separately.
|
||||
|
||||
@ -146,6 +149,7 @@ yarn add react-test-renderer --dev
|
||||
```
|
||||
|
||||
### Configure Jest for Angular
|
||||
|
||||
StoryShots addon for Angular is dependent on [jest-preset-angular](https://github.com/thymikee/jest-preset-angular), but
|
||||
[doesn't](#deps-issue) install it, so you need to install it separately.
|
||||
|
||||
@ -155,6 +159,7 @@ yarn add jest-preset-angular
|
||||
|
||||
If you already use Jest for testing your angular app - probably you already have the needed jest configuration.
|
||||
Anyway you can add these lines to your jest config:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
globals: {
|
||||
@ -167,7 +172,9 @@ module.exports = {
|
||||
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node', '.html'],
|
||||
};
|
||||
```
|
||||
|
||||
### Configure Jest for Vue
|
||||
|
||||
StoryShots addon for Vue is dependent on [jest-vue-preprocessor](https://github.com/vire/jest-vue-preprocessor), but
|
||||
[doesn't](#deps-issue) install it, so you need to install it separately.
|
||||
|
||||
@ -177,20 +184,20 @@ yarn add jest-vue-preprocessor
|
||||
|
||||
If you already use Jest for testing your vue app - probably you already have the needed jest configuration.
|
||||
Anyway you can add these lines to your jest config:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
transform: {
|
||||
'^.+\\.jsx?$': 'babel-jest',
|
||||
'.*\\.(vue)$': '<rootDir>/node_modules/jest-vue-preprocessor',
|
||||
},
|
||||
transformIgnorePatterns: [
|
||||
'/node_modules/(?!(@storybook/.*\\.vue$))',
|
||||
],
|
||||
transformIgnorePatterns: ['/node_modules/(?!(@storybook/.*\\.vue$))'],
|
||||
moduleFileExtensions: ['vue', 'js', 'jsx', 'json', 'node'],
|
||||
};
|
||||
```
|
||||
|
||||
### Configure Jest for Preact
|
||||
|
||||
StoryShots addon for Preact is dependent on [preact-render-to-json](https://github.com/nathancahill/preact-render-to-json), but
|
||||
[doesn't](#deps-issue) install it, so you need to install it separately.
|
||||
|
||||
@ -216,6 +223,7 @@ Add the following to your Jest configuration:
|
||||
```
|
||||
|
||||
### <a name="deps-issue"></a>Why don't we install dependencies of each framework ?
|
||||
|
||||
Storyshots addon is currently supporting React, Angular and Vue. Each framework needs its own packages to be integrated with Jest. We don't want people that use only React will need to bring other dependencies that do not make sense for them.
|
||||
|
||||
`dependencies` - will installed an exact version of the particular dep - Storyshots can work with different versions of the same framework (let's say React v16 and React v15), that have to be compatible with a version of its plugin (react-test-renderer).
|
||||
@ -238,34 +246,33 @@ out elements that rely on refs, you will have to use the
|
||||
Here is an example of how to specify the `createNodeMock` option in Storyshots:
|
||||
|
||||
```js
|
||||
import initStoryshots, { snapshotWithOptions } from '@storybook/addon-storyshots'
|
||||
import TextareaThatUsesRefs from '../component/TextareaThatUsesRefs'
|
||||
import initStoryshots, { snapshotWithOptions } from '@storybook/addon-storyshots';
|
||||
import TextareaThatUsesRefs from '../component/TextareaThatUsesRefs';
|
||||
|
||||
initStoryshots({
|
||||
test: snapshotWithOptions({
|
||||
createNodeMock: (element) => {
|
||||
if (element.type === TextareaThatUsesRefs) {
|
||||
return document.createElement('textarea')
|
||||
return document.createElement('textarea');
|
||||
}
|
||||
},
|
||||
}),
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
Provide a function to have story-specific options:
|
||||
|
||||
|
||||
```js
|
||||
initStoryshots({
|
||||
test: snapshotWithOptions(story =>({
|
||||
test: snapshotWithOptions((story) => ({
|
||||
createNodeMock: (element) => {
|
||||
if(story.name == 'foobar') {
|
||||
return null
|
||||
if (story.name == 'foobar') {
|
||||
return null;
|
||||
}
|
||||
return element
|
||||
return element;
|
||||
},
|
||||
})),
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
### StoryShots for async rendered components
|
||||
@ -280,28 +287,28 @@ Add _stories of UserForm_ in the file: UserForm.story.jsx
|
||||
|
||||
```jsx
|
||||
/* global module */
|
||||
import React from "react";
|
||||
import { QueryRenderer } from "react-relay";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import React from 'react';
|
||||
import { QueryRenderer } from 'react-relay';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
// Use the same queries used in YOUR app routes
|
||||
import { newUserFormQuery, editUserFormQuery } from "app/routes";
|
||||
import UserFormContainer from "app/users/UserForm";
|
||||
import { newUserFormQuery, editUserFormQuery } from 'app/routes';
|
||||
import UserFormContainer from 'app/users/UserForm';
|
||||
|
||||
// YOUR function to generate a Relay Environment mock.
|
||||
// See https://github.com/1stdibs/relay-mock-network-layer for more info
|
||||
import getEnvironment from "test/support/relay-environment-mock";
|
||||
import getEnvironment from 'test/support/relay-environment-mock';
|
||||
|
||||
// User test data YOU generated for your tests
|
||||
import { user } from "test/support/data/index";
|
||||
import { user } from 'test/support/data/index';
|
||||
|
||||
// Use this function to return a new Environment for each story
|
||||
const Environment = () =>
|
||||
getEnvironment({
|
||||
mocks: {
|
||||
Node: () => ({ __typename: "User" }),
|
||||
User: () => user
|
||||
}
|
||||
Node: () => ({ __typename: 'User' }),
|
||||
User: () => user,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
@ -328,23 +335,23 @@ const renderStory = (query, environment, variables = {}) => (
|
||||
/>
|
||||
);
|
||||
|
||||
storiesOf("users/UserForm", module)
|
||||
.add("New User", () => {
|
||||
storiesOf('users/UserForm', module)
|
||||
.add('New User', () => {
|
||||
const environment = new Environment();
|
||||
return renderStory(newUserFormQuery, environment);
|
||||
})
|
||||
.add("Editing User", () => {
|
||||
.add('Editing User', () => {
|
||||
const environment = new Environment();
|
||||
return renderStory(editUserFormQuery, environment, { id: user.id });
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
Then, init Storyshots for async component in the file: StoryShots.test.js
|
||||
|
||||
```jsx
|
||||
import initStoryshots, { Stories2SnapsConverter } from "@storybook/addon-storyshots";
|
||||
import { mount } from "enzyme";
|
||||
import toJson from "enzyme-to-json";
|
||||
import initStoryshots, { Stories2SnapsConverter } from '@storybook/addon-storyshots';
|
||||
import { mount } from 'enzyme';
|
||||
import toJson from 'enzyme-to-json';
|
||||
|
||||
// Runner
|
||||
initStoryshots({
|
||||
@ -352,7 +359,7 @@ initStoryshots({
|
||||
test: ({
|
||||
story,
|
||||
context,
|
||||
done // --> callback passed to test method when asyncJest option is true
|
||||
done, // --> callback passed to test method when asyncJest option is true
|
||||
}) => {
|
||||
const converter = new Stories2SnapsConverter();
|
||||
const snapshotFilename = converter.getSnapshotFileName(context);
|
||||
@ -371,12 +378,12 @@ initStoryshots({
|
||||
}
|
||||
|
||||
done();
|
||||
}, waitTime)
|
||||
}, waitTime);
|
||||
},
|
||||
// other options here
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
NOTICE that When using the `asyncJest: true` option, you also must specify a `test` method that calls the `done()` callback.
|
||||
|
||||
This is a really powerful technique to write stories of Relay components because it integrates data fetching with component rendering. So instead of passing data props manually, we can let Relay do the job for us as it does in our application.
|
||||
@ -414,7 +421,7 @@ If you are using a different config directory path, you could change it like thi
|
||||
import initStoryshots from '@storybook/addon-storyshots';
|
||||
|
||||
initStoryshots({
|
||||
configPath: '.my-storybook-config-dir'
|
||||
configPath: '.my-storybook-config-dir',
|
||||
});
|
||||
```
|
||||
|
||||
@ -433,15 +440,14 @@ original one. It also may be useful for separating tests to different test confi
|
||||
|
||||
```js
|
||||
initStoryshots({
|
||||
configPath: '.my-storybook-config-dir/testConfig1.js'
|
||||
configPath: '.my-storybook-config-dir/testConfig1.js',
|
||||
});
|
||||
|
||||
initStoryshots({
|
||||
configPath: '.my-storybook-config-dir/testConfig2.js'
|
||||
configPath: '.my-storybook-config-dir/testConfig2.js',
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
### `suite`
|
||||
|
||||
By default, Storyshots groups stories inside a Jest test suite called "Storyshots". You could change it like this:
|
||||
@ -450,7 +456,7 @@ By default, Storyshots groups stories inside a Jest test suite called "Storyshot
|
||||
import initStoryshots from '@storybook/addon-storyshots';
|
||||
|
||||
initStoryshots({
|
||||
suite: 'MyStoryshots'
|
||||
suite: 'MyStoryshots',
|
||||
});
|
||||
```
|
||||
|
||||
@ -462,7 +468,7 @@ If you'd like to only run a subset of the stories for your snapshot tests based
|
||||
import initStoryshots from '@storybook/addon-storyshots';
|
||||
|
||||
initStoryshots({
|
||||
storyKindRegex: /^MyComponent$/
|
||||
storyKindRegex: /^MyComponent$/,
|
||||
});
|
||||
```
|
||||
|
||||
@ -474,7 +480,7 @@ If you want to run all stories except stories of a specific kind, you can write
|
||||
import initStoryshots from '@storybook/addon-storyshots';
|
||||
|
||||
initStoryshots({
|
||||
storyKindRegex:/^((?!.*?DontTest).)*$/
|
||||
storyKindRegex: /^((?!.*?DontTest).)*$/,
|
||||
});
|
||||
```
|
||||
|
||||
@ -489,7 +495,7 @@ If you'd like to only run a subset of the stories for your snapshot tests based
|
||||
import initStoryshots from '@storybook/addon-storyshots';
|
||||
|
||||
initStoryshots({
|
||||
storyNameRegex: /buttons/
|
||||
storyNameRegex: /buttons/,
|
||||
});
|
||||
```
|
||||
|
||||
@ -533,7 +539,6 @@ initStoryshots({
|
||||
If you are using enzyme, you need to make sure jest knows how to serialize rendered components.
|
||||
For that, you can pass an enzyme-compatible snapshotSerializer (like [enzyme-to-json](https://github.com/adriantoine/enzyme-to-json), [jest-serializer-enzyme](https://github.com/rogeliog/jest-serializer-enzyme) etc.) with the `snapshotSerializer` option (see below).
|
||||
|
||||
|
||||
### `snapshotSerializers`
|
||||
|
||||
Pass an array of snapshotSerializers to the jest runtime that serializes your story (such as enzyme-to-json).
|
||||
@ -549,8 +554,9 @@ initStoryshots({
|
||||
```
|
||||
|
||||
This option needs to be set if either:
|
||||
* the multiSnapshot function is used to create multiple snapshot files (i.e. one per story), since it ignores any serializers specified in your jest config.
|
||||
* serializers not specified in your jest config should be used when snapshotting stories.
|
||||
|
||||
- the multiSnapshot function is used to create multiple snapshot files (i.e. one per story), since it ignores any serializers specified in your jest config.
|
||||
- serializers not specified in your jest config should be used when snapshotting stories.
|
||||
|
||||
### `serializer` (deprecated)
|
||||
|
||||
@ -569,6 +575,7 @@ initStoryshots({
|
||||
This option only needs to be set if the default `snapshotSerializers` is not set in your jest config.
|
||||
|
||||
### `stories2snapsConverter`
|
||||
|
||||
This parameter should be an instance of the [`Stories2SnapsConverter`](src/Stories2SnapsConverter.js) (or a derived from it) Class that is used to convert story-file name to snapshot-file name and vice versa.
|
||||
|
||||
By default, the instance of this class is created with these default options:
|
||||
@ -592,7 +599,6 @@ initStoryshots({
|
||||
storiesExtensions: ['.foo'],
|
||||
}),
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
## Exports
|
||||
@ -620,6 +626,7 @@ Like the default, but allows you to specify a set of options for the renderer, j
|
||||
|
||||
Like `snapshotWithOptions`, but generate a separate snapshot file for each stories file rather than a single monolithic file (as is the convention in Jest). This makes it dramatically easier to review changes. If you'd like the benefit of separate snapshot files, but don't have custom options to pass, you can pass an empty object.
|
||||
If you use [Component Story Format](https://storybook.js.org/docs/formats/component-story-format/), you may also need to add an additional Jest transform to automate detecting story file names:
|
||||
|
||||
```js
|
||||
// jest.config.js
|
||||
module.exports = {
|
||||
@ -670,7 +677,7 @@ initStoryshots({
|
||||
if (snapshotFileName) {
|
||||
expect(toJson(shallowTree)).toMatchSpecificSnapshot(snapshotFileName);
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
@ -678,7 +685,6 @@ initStoryshots({
|
||||
|
||||
Enables Jest `done()` callback in the StoryShots tests for async testing. See [StoryShots for async rendered components](#storyshots-for-async-rendered-components) for more info.
|
||||
|
||||
|
||||
## Story Parameters
|
||||
|
||||
### `disable`
|
||||
@ -689,10 +695,8 @@ Some stories are difficult or impossible to snapshot, such as those covering com
|
||||
export const Exception = () => {
|
||||
throw new Error('storyFn threw an error! WHOOPS');
|
||||
};
|
||||
Exception.story = {
|
||||
name: 'story throws exception',
|
||||
parameters: {
|
||||
Exception.storyName = 'story throws exception';
|
||||
Exception.parameters = {
|
||||
storyshots: { disable: true },
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "6.0.0-beta.9",
|
||||
"version": "6.0.0-beta.21",
|
||||
"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.9",
|
||||
"@storybook/client-api": "6.0.0-beta.9",
|
||||
"@storybook/core": "6.0.0-beta.9",
|
||||
"@storybook/addons": "6.0.0-beta.21",
|
||||
"@storybook/client-api": "6.0.0-beta.21",
|
||||
"@storybook/core": "6.0.0-beta.21",
|
||||
"@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.9",
|
||||
"@storybook/react": "6.0.0-beta.9",
|
||||
"@storybook/addon-docs": "6.0.0-beta.21",
|
||||
"@storybook/react": "6.0.0-beta.21",
|
||||
"babel-loader": "^8.0.6",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-to-json": "^3.4.1",
|
||||
|
||||
@ -53,8 +53,10 @@ function getConfigPathParts(input: string): Output {
|
||||
output.stories = stories.map(
|
||||
(pattern: string | { path: string; recursive: boolean; match: string }) => {
|
||||
const { path: basePath, recursive, match } = toRequireContext(pattern);
|
||||
const regex = new RegExp(match);
|
||||
|
||||
// eslint-disable-next-line no-underscore-dangle
|
||||
return global.__requireContext(configDir, basePath, recursive, match);
|
||||
return global.__requireContext(configDir, basePath, recursive, regex);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
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