mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 19:01:05 +08:00
Merge branch 'next' into marko-5-support
This commit is contained in:
Dylan Piercey
GitHub
commit
50fbeb42ce
@ -1,14 +1,21 @@
|
||||
version: 2.1
|
||||
|
||||
aliases:
|
||||
- &defaults
|
||||
executors:
|
||||
sb_node:
|
||||
parameters:
|
||||
class:
|
||||
description: The Resource class
|
||||
type: enum
|
||||
enum: ["small", "medium", "large", "xlarge"]
|
||||
default: "medium"
|
||||
working_directory: /tmp/storybook
|
||||
docker:
|
||||
- image: circleci/node:10-browsers
|
||||
resource_class: <<parameters.class>>
|
||||
|
||||
jobs:
|
||||
install:
|
||||
<<: *defaults
|
||||
executor: sb_node
|
||||
steps:
|
||||
- checkout
|
||||
- restore_cache:
|
||||
@ -37,7 +44,7 @@ jobs:
|
||||
- app
|
||||
- lib
|
||||
build:
|
||||
<<: *defaults
|
||||
executor: sb_node
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace:
|
||||
@ -54,7 +61,7 @@ jobs:
|
||||
- app
|
||||
- lib
|
||||
chromatic:
|
||||
<<: *defaults
|
||||
executor: sb_node
|
||||
parallelism: 11
|
||||
steps:
|
||||
- checkout
|
||||
@ -65,7 +72,7 @@ jobs:
|
||||
command: |
|
||||
yarn run-chromatics
|
||||
packtracker:
|
||||
<<: *defaults
|
||||
executor: sb_node
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace:
|
||||
@ -76,7 +83,7 @@ jobs:
|
||||
cd examples/official-storybook
|
||||
yarn packtracker
|
||||
examples:
|
||||
<<: *defaults
|
||||
executor: sb_node
|
||||
parallelism: 11
|
||||
steps:
|
||||
- checkout
|
||||
@ -91,7 +98,7 @@ jobs:
|
||||
paths:
|
||||
- built-storybooks
|
||||
publish:
|
||||
<<: *defaults
|
||||
executor: sb_node
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace:
|
||||
@ -188,7 +195,7 @@ jobs:
|
||||
destination: cypress
|
||||
|
||||
smoke-tests:
|
||||
<<: *defaults
|
||||
executor: sb_node
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace:
|
||||
@ -254,7 +261,7 @@ jobs:
|
||||
cd examples/cra-react15
|
||||
yarn storybook --smoke-test --quiet
|
||||
frontpage:
|
||||
<<: *defaults
|
||||
executor: sb_node
|
||||
steps:
|
||||
- checkout
|
||||
- restore_cache:
|
||||
@ -268,7 +275,9 @@ jobs:
|
||||
name: Trigger build
|
||||
command: ./scripts/build-frontpage.js
|
||||
lint:
|
||||
<<: *defaults
|
||||
executor:
|
||||
class: small
|
||||
name: sb_node
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace:
|
||||
@ -277,7 +286,7 @@ jobs:
|
||||
name: Lint
|
||||
command: yarn lint
|
||||
test:
|
||||
<<: *defaults
|
||||
executor: sb_node
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace:
|
||||
@ -290,7 +299,9 @@ jobs:
|
||||
paths:
|
||||
- coverage
|
||||
coverage:
|
||||
<<: *defaults
|
||||
executor:
|
||||
class: small
|
||||
name: sb_node
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace:
|
||||
|
||||
2
.github/automention.yml
vendored
2
.github/automention.yml
vendored
@ -1,5 +1,5 @@
|
||||
'app: angular': ['kroeder', 'igor-dv', 'MaximSagan']
|
||||
'app: ember': ['gabrielcsapo']
|
||||
'app: ember': ['gabrielcsapo', 'gossi', 'meirish']
|
||||
'app: html': ['Hypnosphi']
|
||||
'app: marko': ['nm123github']
|
||||
'app: preact': ['BartWaardenburg']
|
||||
|
||||
71
CHANGELOG.md
71
CHANGELOG.md
@ -1,3 +1,74 @@
|
||||
## 6.0.16 (August 20, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Addon-docs: Fix Vue ArgsTable sanitizing of item.type.elements to item.type.value ([#12165](https://github.com/storybookjs/storybook/pull/12165))
|
||||
|
||||
## 6.0.15 (August 20, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Addon-docs: Fix ArgsTable union type handling in Vue/TS ([#12158](https://github.com/storybookjs/storybook/pull/12158))
|
||||
- Addon-docs: Fix inline rendering for DOM nodes in HTML ([#12164](https://github.com/storybookjs/storybook/pull/12164))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- React: Simplify component type for CSF typing ([#12110](https://github.com/storybookjs/storybook/pull/12110))
|
||||
|
||||
## 6.0.14 (August 20, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Addon-docs: Fix MDX IDs from CSF imports ([#12154](https://github.com/storybookjs/storybook/pull/12154))
|
||||
- Addon-viewport: Add preset to fix windows import ([#12148](https://github.com/storybookjs/storybook/pull/12148))
|
||||
- Composition: Verify refs in node ([#12085](https://github.com/storybookjs/storybook/pull/12085))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Build: Update and optimize circleCI Config ([#12118](https://github.com/storybookjs/storybook/pull/12118))
|
||||
|
||||
## 6.0.13 (August 19, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Source-loader: Fix default exports of type TSAsExpression ([#12099](https://github.com/storybookjs/storybook/pull/12099))
|
||||
- Addon-docs: Fix source code for Template.bind({}) in MDX ([#12107](https://github.com/storybookjs/storybook/pull/12107))
|
||||
- Addon-A11y: Fix manual run & timeline ([#12003](https://github.com/storybookjs/storybook/pull/12003))
|
||||
- Core: Add frameworkPath to options to support custom frameworks ([#12087](https://github.com/storybookjs/storybook/pull/12087))
|
||||
|
||||
## 6.0.12 (August 17, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Angular: Make CLI templates compatible with TS strict mode ([#12081](https://github.com/storybookjs/storybook/pull/12081))
|
||||
- React: Fix CSF component typing ([#12072](https://github.com/storybookjs/storybook/pull/12072))
|
||||
- ArgsTable: Fix styles to allow long text to wrap ([#11818](https://github.com/storybookjs/storybook/pull/11818))
|
||||
- Addon-docs: Fix main check for absolute config dirs ([#12057](https://github.com/storybookjs/storybook/pull/12057))
|
||||
|
||||
## 6.0.11 (August 17, 2020)
|
||||
|
||||
NPM publish failed
|
||||
|
||||
## 6.0.10 (August 15, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Addon-controls: Fix argType inference priority ([#12048](https://github.com/storybookjs/storybook/pull/12048))
|
||||
|
||||
## 6.0.9 (August 15, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Addon-docs: Fix CSF names importing in MDX ([#12044](https://github.com/storybookjs/storybook/pull/12044))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- ArgsTable: Error when subcomponents is an array ([#12033](https://github.com/storybookjs/storybook/pull/12033))
|
||||
|
||||
## 6.0.8 (August 15, 2020)
|
||||
|
||||
Unpublished
|
||||
|
||||
## 6.0.7 (August 14, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
18
MIGRATION.md
18
MIGRATION.md
@ -14,6 +14,7 @@
|
||||
- [DocsPage slots removed](#docspage-slots-removed)
|
||||
- [React prop tables with Typescript](#react-prop-tables-with-typescript)
|
||||
- [ConfigureJSX true by default in React](#configurejsx-true-by-default-in-react)
|
||||
- [User babelrc disabled by default in MDX](#user-babelrc-disabled-by-default-in-mdx)
|
||||
- [Docs description parameter](#docs-description-parameter)
|
||||
- [6.0 Inline stories](#60-inline-stories)
|
||||
- [New addon presets](#new-addon-presets)
|
||||
@ -301,6 +302,23 @@ module.exports = {
|
||||
};
|
||||
```
|
||||
|
||||
#### User babelrc disabled by default in MDX
|
||||
|
||||
In SB 6.0, the Storybook Docs no longer applies the user's babelrc by default when processing MDX files. It caused lots of hard-to-diagnose bugs.
|
||||
|
||||
To restore the old behavior, or pass any MDX-specific babel options, you can configure `.storybook/main.js`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
addons: [
|
||||
{
|
||||
name: '@storybook/addon-docs',
|
||||
options: { mdxBabelOptions: { babelrc: true, configFile: true } },
|
||||
},
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
#### Docs description parameter
|
||||
|
||||
In 6.0, you can customize a component description using the `docs.description.component` parameter, and a story description using `docs.description.story` parameter.
|
||||
|
||||
30
README.md
30
README.md
@ -99,21 +99,21 @@ For additional help, join us [in our Discord](https://discord.gg/sMFvFsG) or [Sl
|
||||
|
||||
### Supported Frameworks
|
||||
|
||||
| Framework | Demo | |
|
||||
| -------------------------------- | --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
|
||||
| [React](app/react) | [v6.0.x](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [](app/react) |
|
||||
| [React Native](app/react-native) | - | [](app/react-native) |
|
||||
| [Vue](app/vue) | [v6.0.x](https://storybookjs.netlify.com/vue-kitchen-sink/) | [](app/vue) |
|
||||
| [Angular](app/angular) | [v6.0.x](https://storybookjs.netlify.com/angular-cli/) | [](app/angular) |
|
||||
| [Marionette.js](app/marionette) | - | [](app/marionette) |
|
||||
| [Mithril](app/mithril) | [v6.0.x](https://storybookjs.netlify.com/mithril-kitchen-sink/) | [](app/mithril) |
|
||||
| [Marko](app/marko) | [v6.0.x](https://storybookjs.netlify.com/marko-cli/) | [](app/marko) |
|
||||
| [HTML](app/html) | [v6.0.x](https://storybookjs.netlify.com/html-kitchen-sink/) | [](app/html) |
|
||||
| [Svelte](app/svelte) | [v6.0.x](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [](app/svelte) |
|
||||
| [Riot](app/riot) | [v6.0.x](https://storybookjs.netlify.com/riot-kitchen-sink/) | [](app/riot) |
|
||||
| [Ember](app/ember) | [v6.0.x](https://storybookjs.netlify.com/ember-cli/) | [](app/ember) |
|
||||
| [Preact](app/preact) | [v6.0.x](https://storybookjs.netlify.com/preact-kitchen-sink/) | [](app/preact) |
|
||||
| [Rax](app/rax) | [v6.0.x](https://storybookjs.netlify.com/rax-kitchen-sink/) | [](app/rax) |
|
||||
| Framework | Demo | |
|
||||
| ----------------------------------------------------------- | --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
|
||||
| [React](app/react) | [v6.0.x](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [](app/react) |
|
||||
| [React Native](https://github.com/storybookjs/react-native) | - | [](app/react-native) |
|
||||
| [Vue](app/vue) | [v6.0.x](https://storybookjs.netlify.com/vue-kitchen-sink/) | [](app/vue) |
|
||||
| [Angular](app/angular) | [v6.0.x](https://storybookjs.netlify.com/angular-cli/) | [](app/angular) |
|
||||
| [Marionette.js](app/marionette) | - | [](app/marionette) |
|
||||
| [Mithril](app/mithril) | [v6.0.x](https://storybookjs.netlify.com/mithril-kitchen-sink/) | [](app/mithril) |
|
||||
| [Marko](app/marko) | [v6.0.x](https://storybookjs.netlify.com/marko-cli/) | [](app/marko) |
|
||||
| [HTML](app/html) | [v6.0.x](https://storybookjs.netlify.com/html-kitchen-sink/) | [](app/html) |
|
||||
| [Svelte](app/svelte) | [v6.0.x](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [](app/svelte) |
|
||||
| [Riot](app/riot) | [v6.0.x](https://storybookjs.netlify.com/riot-kitchen-sink/) | [](app/riot) |
|
||||
| [Ember](app/ember) | [v6.0.x](https://storybookjs.netlify.com/ember-cli/) | [](app/ember) |
|
||||
| [Preact](app/preact) | [v6.0.x](https://storybookjs.netlify.com/preact-kitchen-sink/) | [](app/preact) |
|
||||
| [Rax](app/rax) | [v6.0.x](https://storybookjs.netlify.com/rax-kitchen-sink/) | [](app/rax) |
|
||||
|
||||
### Sub Projects
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"description": "a11y addon for storybook",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -33,14 +33,14 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.7",
|
||||
"@storybook/api": "6.0.7",
|
||||
"@storybook/channels": "6.0.7",
|
||||
"@storybook/client-api": "6.0.7",
|
||||
"@storybook/client-logger": "6.0.7",
|
||||
"@storybook/components": "6.0.7",
|
||||
"@storybook/core-events": "6.0.7",
|
||||
"@storybook/theming": "6.0.7",
|
||||
"@storybook/addons": "6.0.16",
|
||||
"@storybook/api": "6.0.16",
|
||||
"@storybook/channels": "6.0.16",
|
||||
"@storybook/client-api": "6.0.16",
|
||||
"@storybook/client-logger": "6.0.16",
|
||||
"@storybook/components": "6.0.16",
|
||||
"@storybook/core-events": "6.0.16",
|
||||
"@storybook/theming": "6.0.16",
|
||||
"axe-core": "^3.5.2",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
@ -63,7 +63,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f",
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c",
|
||||
"typesVersions": {
|
||||
"<=3.5": {
|
||||
"*": [
|
||||
|
||||
@ -2,21 +2,36 @@ import { document, window } from 'global';
|
||||
import axe from 'axe-core';
|
||||
import addons from '@storybook/addons';
|
||||
import { EVENTS } from './constants';
|
||||
import { Setup } from './params';
|
||||
import { A11yParameters } from './params';
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
module.hot.decline();
|
||||
}
|
||||
|
||||
const channel = addons.getChannel();
|
||||
// Holds axe core running state
|
||||
let active = false;
|
||||
// Holds latest story we requested a run
|
||||
let activeStoryId: string | undefined;
|
||||
|
||||
const getElement = () => {
|
||||
const storyRoot = document.getElementById('story-root');
|
||||
return storyRoot ? storyRoot.children : document.getElementById('root');
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle A11yContext events.
|
||||
* Because the event are sent without manual check, we split calls
|
||||
*/
|
||||
const handleRequest = (storyId: string) => {
|
||||
const { manual } = getParams(storyId);
|
||||
if (!manual) {
|
||||
run(storyId);
|
||||
}
|
||||
};
|
||||
|
||||
const run = async (storyId: string) => {
|
||||
activeStoryId = storyId;
|
||||
try {
|
||||
const input = getParams(storyId);
|
||||
|
||||
@ -24,14 +39,29 @@ const run = async (storyId: string) => {
|
||||
active = true;
|
||||
channel.emit(EVENTS.RUNNING);
|
||||
|
||||
const { element = getElement(), config, options } = input;
|
||||
const {
|
||||
element = getElement(),
|
||||
config,
|
||||
options = {
|
||||
restoreScroll: true,
|
||||
},
|
||||
} = input;
|
||||
axe.reset();
|
||||
if (config) {
|
||||
axe.configure(config);
|
||||
}
|
||||
|
||||
const result = await axe.run(element, options);
|
||||
channel.emit(EVENTS.RESULT, result);
|
||||
// It's possible that we requested a new run on a different story.
|
||||
// Unfortunately, axe doesn't support a cancel method to abort current run.
|
||||
// We check if the story we run against is still the current one,
|
||||
// if not, trigger a new run using the current story
|
||||
if (activeStoryId === storyId) {
|
||||
channel.emit(EVENTS.RESULT, result);
|
||||
} else {
|
||||
active = false;
|
||||
run(activeStoryId);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
channel.emit(EVENTS.ERROR, error);
|
||||
@ -41,7 +71,7 @@ const run = async (storyId: string) => {
|
||||
};
|
||||
|
||||
/** Returns story parameters or default ones. */
|
||||
const getParams = (storyId: string): Setup => {
|
||||
const getParams = (storyId: string): A11yParameters => {
|
||||
const { parameters } = window.__STORYBOOK_STORY_STORE__.fromId(storyId) || {};
|
||||
return (
|
||||
parameters.a11y || {
|
||||
@ -53,5 +83,5 @@ const getParams = (storyId: string): Setup => {
|
||||
);
|
||||
};
|
||||
|
||||
channel.on(EVENTS.REQUEST, run);
|
||||
channel.on(EVENTS.REQUEST, handleRequest);
|
||||
channel.on(EVENTS.MANUAL, run);
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
import React, { useCallback, useMemo } from 'react';
|
||||
import React, { useCallback, useMemo, useState } from 'react';
|
||||
|
||||
import { styled } from '@storybook/theming';
|
||||
|
||||
import { ActionBar, Icons, ScrollArea } from '@storybook/components';
|
||||
|
||||
import { AxeResults } from 'axe-core';
|
||||
import { useChannel, useParameter, useStorybookState, useAddonState } from '@storybook/api';
|
||||
import { useChannel, useParameter, useStorybookState } from '@storybook/api';
|
||||
import { Report } from './Report';
|
||||
import { Tabs } from './Tabs';
|
||||
|
||||
import { useA11yContext } from './A11yContext';
|
||||
import { EVENTS, ADDON_ID } from '../constants';
|
||||
import { EVENTS } from '../constants';
|
||||
import { A11yParameters } from '../params';
|
||||
|
||||
export enum RuleType {
|
||||
@ -51,13 +51,13 @@ const Centered = styled.span<{}>({
|
||||
type Status = 'initial' | 'manual' | 'running' | 'error' | 'ran' | 'ready';
|
||||
|
||||
export const A11YPanel: React.FC = () => {
|
||||
const [status, setStatus] = useAddonState<Status>(ADDON_ID, 'initial');
|
||||
const [error, setError] = React.useState<unknown>(undefined);
|
||||
const { setResults, results } = useA11yContext();
|
||||
const { storyId } = useStorybookState();
|
||||
const { manual } = useParameter<Pick<A11yParameters, 'manual'>>('a11y', {
|
||||
manual: false,
|
||||
});
|
||||
const [status, setStatus] = useState<Status>(manual ? 'manual' : 'initial');
|
||||
const [error, setError] = React.useState<unknown>(undefined);
|
||||
const { setResults, results } = useA11yContext();
|
||||
const { storyId } = useStorybookState();
|
||||
|
||||
React.useEffect(() => {
|
||||
setStatus(manual ? 'manual' : 'initial');
|
||||
|
||||
@ -64,9 +64,9 @@ export const A11yContextProvider: React.FC<A11yContextProviderProps> = ({ active
|
||||
: prevHighlighted.filter((t) => !target.includes(t))
|
||||
);
|
||||
}, []);
|
||||
const handleRun = React.useCallback(() => {
|
||||
emit(EVENTS.REQUEST, storyId);
|
||||
}, [storyId]);
|
||||
const handleRun = (renderedStoryId: string) => {
|
||||
emit(EVENTS.REQUEST, renderedStoryId);
|
||||
};
|
||||
const handleClearHighlights = React.useCallback(() => setHighlighted([]), []);
|
||||
const handleSetTab = React.useCallback((index: number) => {
|
||||
handleClearHighlights();
|
||||
@ -90,7 +90,7 @@ export const A11yContextProvider: React.FC<A11yContextProviderProps> = ({ active
|
||||
|
||||
React.useEffect(() => {
|
||||
if (active) {
|
||||
handleRun();
|
||||
handleRun(storyId);
|
||||
} else {
|
||||
handleClearHighlights();
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"description": "Action Logger addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -28,12 +28,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.7",
|
||||
"@storybook/api": "6.0.7",
|
||||
"@storybook/client-api": "6.0.7",
|
||||
"@storybook/components": "6.0.7",
|
||||
"@storybook/core-events": "6.0.7",
|
||||
"@storybook/theming": "6.0.7",
|
||||
"@storybook/addons": "6.0.16",
|
||||
"@storybook/api": "6.0.16",
|
||||
"@storybook/client-api": "6.0.16",
|
||||
"@storybook/components": "6.0.16",
|
||||
"@storybook/core-events": "6.0.16",
|
||||
"@storybook/theming": "6.0.16",
|
||||
"core-js": "^3.0.1",
|
||||
"fast-deep-equal": "^3.1.1",
|
||||
"global": "^4.3.2",
|
||||
@ -58,7 +58,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f",
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c",
|
||||
"typesVersions": {
|
||||
"<=3.5": {
|
||||
"*": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"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.7",
|
||||
"@storybook/api": "6.0.7",
|
||||
"@storybook/client-logger": "6.0.7",
|
||||
"@storybook/components": "6.0.7",
|
||||
"@storybook/core-events": "6.0.7",
|
||||
"@storybook/theming": "6.0.7",
|
||||
"@storybook/addons": "6.0.16",
|
||||
"@storybook/api": "6.0.16",
|
||||
"@storybook/client-logger": "6.0.16",
|
||||
"@storybook/components": "6.0.16",
|
||||
"@storybook/core-events": "6.0.16",
|
||||
"@storybook/theming": "6.0.16",
|
||||
"core-js": "^3.0.1",
|
||||
"memoizerific": "^1.11.3",
|
||||
"react": "^16.8.3",
|
||||
@ -52,7 +52,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f",
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c",
|
||||
"typesVersions": {
|
||||
"<=3.5": {
|
||||
"*": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-controls",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"description": "Controls for component properties",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -30,12 +30,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.7",
|
||||
"@storybook/api": "6.0.7",
|
||||
"@storybook/client-api": "6.0.7",
|
||||
"@storybook/components": "6.0.7",
|
||||
"@storybook/node-logger": "6.0.7",
|
||||
"@storybook/theming": "6.0.7",
|
||||
"@storybook/addons": "6.0.16",
|
||||
"@storybook/api": "6.0.16",
|
||||
"@storybook/client-api": "6.0.16",
|
||||
"@storybook/components": "6.0.16",
|
||||
"@storybook/node-logger": "6.0.16",
|
||||
"@storybook/theming": "6.0.16",
|
||||
"core-js": "^3.0.1",
|
||||
"ts-dedent": "^1.1.1"
|
||||
},
|
||||
@ -46,5 +46,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f"
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c"
|
||||
}
|
||||
|
||||
@ -23,7 +23,10 @@ export const verifyDocsBeforeControls = (addons: Entry[]) => {
|
||||
};
|
||||
|
||||
export const ensureDocsBeforeControls = (configDir: string) => {
|
||||
const mainFile = path.join(process.cwd(), configDir, 'main');
|
||||
const mainFile = path.isAbsolute(configDir)
|
||||
? path.join(configDir, 'main')
|
||||
: path.join(process.cwd(), configDir, 'main');
|
||||
|
||||
try {
|
||||
// eslint-disable-next-line global-require,import/no-dynamic-require
|
||||
const main = require(mainFile);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-cssresources",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"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.7",
|
||||
"@storybook/api": "6.0.7",
|
||||
"@storybook/components": "6.0.7",
|
||||
"@storybook/core-events": "6.0.7",
|
||||
"@storybook/theming": "6.0.7",
|
||||
"@storybook/addons": "6.0.16",
|
||||
"@storybook/api": "6.0.16",
|
||||
"@storybook/components": "6.0.16",
|
||||
"@storybook/core-events": "6.0.16",
|
||||
"@storybook/theming": "6.0.16",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3",
|
||||
@ -55,7 +55,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f",
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c",
|
||||
"typesVersions": {
|
||||
"<=3.5": {
|
||||
"*": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-design-assets",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"description": "Design asset preview for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -34,12 +34,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.7",
|
||||
"@storybook/api": "6.0.7",
|
||||
"@storybook/client-logger": "6.0.7",
|
||||
"@storybook/components": "6.0.7",
|
||||
"@storybook/core-events": "6.0.7",
|
||||
"@storybook/theming": "6.0.7",
|
||||
"@storybook/addons": "6.0.16",
|
||||
"@storybook/api": "6.0.16",
|
||||
"@storybook/client-logger": "6.0.16",
|
||||
"@storybook/components": "6.0.16",
|
||||
"@storybook/core-events": "6.0.16",
|
||||
"@storybook/theming": "6.0.16",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3",
|
||||
@ -53,7 +53,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f",
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c",
|
||||
"typesVersions": {
|
||||
"<=3.5": {
|
||||
"*": [
|
||||
|
||||
@ -79,7 +79,7 @@ There's a one-to-one mapping from the code in `MDX` to `CSF`, which in turn dire
|
||||
Now let's look at a more realistic example to see a few more things we can do:
|
||||
|
||||
```md
|
||||
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
|
||||
import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
|
||||
|
||||
import { Badge } from './Badge';
|
||||
import { Icon } from './Icon';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"description": "Superior documentation for your components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -47,18 +47,18 @@
|
||||
"@mdx-js/loader": "^1.5.1",
|
||||
"@mdx-js/mdx": "^1.5.1",
|
||||
"@mdx-js/react": "^1.5.1",
|
||||
"@storybook/addons": "6.0.7",
|
||||
"@storybook/api": "6.0.7",
|
||||
"@storybook/client-api": "6.0.7",
|
||||
"@storybook/client-logger": "6.0.7",
|
||||
"@storybook/components": "6.0.7",
|
||||
"@storybook/core": "6.0.7",
|
||||
"@storybook/core-events": "6.0.7",
|
||||
"@storybook/addons": "6.0.16",
|
||||
"@storybook/api": "6.0.16",
|
||||
"@storybook/client-api": "6.0.16",
|
||||
"@storybook/client-logger": "6.0.16",
|
||||
"@storybook/components": "6.0.16",
|
||||
"@storybook/core": "6.0.16",
|
||||
"@storybook/core-events": "6.0.16",
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/node-logger": "6.0.7",
|
||||
"@storybook/postinstall": "6.0.7",
|
||||
"@storybook/source-loader": "6.0.7",
|
||||
"@storybook/theming": "6.0.7",
|
||||
"@storybook/node-logger": "6.0.16",
|
||||
"@storybook/postinstall": "6.0.16",
|
||||
"@storybook/source-loader": "6.0.16",
|
||||
"@storybook/theming": "6.0.16",
|
||||
"acorn": "^7.1.0",
|
||||
"acorn-jsx": "^5.1.0",
|
||||
"acorn-walk": "^7.0.0",
|
||||
@ -83,8 +83,8 @@
|
||||
"@babel/core": "^7.9.6",
|
||||
"@emotion/core": "^10.0.20",
|
||||
"@emotion/styled": "^10.0.17",
|
||||
"@storybook/react": "6.0.7",
|
||||
"@storybook/web-components": "6.0.7",
|
||||
"@storybook/react": "6.0.16",
|
||||
"@storybook/web-components": "6.0.16",
|
||||
"@types/cross-spawn": "^6.0.1",
|
||||
"@types/doctrine": "^0.0.3",
|
||||
"@types/enzyme": "^3.10.3",
|
||||
@ -144,7 +144,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f",
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c",
|
||||
"typesVersions": {
|
||||
"<=3.5": {
|
||||
"*": [
|
||||
|
||||
@ -4,9 +4,13 @@ import { StoryFn } from '@storybook/addons';
|
||||
export const parameters = {
|
||||
docs: {
|
||||
inlineStories: true,
|
||||
prepareForInline: (storyFn: StoryFn<string>) => (
|
||||
// eslint-disable-next-line react/no-danger
|
||||
<div dangerouslySetInnerHTML={{ __html: storyFn() }} />
|
||||
),
|
||||
prepareForInline: (storyFn: StoryFn<string>) => {
|
||||
const html = storyFn();
|
||||
if (typeof html === 'string') {
|
||||
// eslint-disable-next-line react/no-danger
|
||||
return <div dangerouslySetInnerHTML={{ __html: html }} />;
|
||||
}
|
||||
return <div ref={(node) => (node ? node.appendChild(html) : null)} />;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -33,9 +33,19 @@ export const extractComponentSectionArray = (docgenSection: any) => {
|
||||
const typeSystem = getTypeSystem(docgenSection[0]);
|
||||
const createPropDef = getPropDefFactory(typeSystem);
|
||||
|
||||
return docgenSection
|
||||
.map((item: any) => extractProp(item.name, item, typeSystem, createPropDef))
|
||||
.filter(Boolean);
|
||||
return docgenSection.map((item: any) => {
|
||||
let sanitizedItem = item;
|
||||
if (item.type?.elements) {
|
||||
sanitizedItem = {
|
||||
...item,
|
||||
type: {
|
||||
...item.type,
|
||||
value: item.type.elements,
|
||||
},
|
||||
};
|
||||
}
|
||||
return extractProp(sanitizedItem.name, sanitizedItem, typeSystem, createPropDef);
|
||||
});
|
||||
};
|
||||
|
||||
export const extractComponentSectionObject = (docgenSection: any) => {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Story, Meta } from '@storybook/addon-docs/blocks';
|
||||
import { Story, Meta, Canvas } from '@storybook/addon-docs/blocks';
|
||||
import { Welcome, Button } from '@storybook/angular/demo';
|
||||
import * as MyStories from './My.stories';
|
||||
import { Other } from './Other.stories';
|
||||
@ -9,6 +9,8 @@ import { Other } from './Other.stories';
|
||||
|
||||
<Story story={MyStories.Basic} />
|
||||
|
||||
<Story story={Other} />
|
||||
<Canvas>
|
||||
<Story story={Other} />
|
||||
</Canvas>
|
||||
|
||||
<Story name="renamed" story={MyStories.Foo} />
|
||||
|
||||
@ -4,7 +4,7 @@ exports[`docs-mdx-compiler-plugin csf-imports.mdx 1`] = `
|
||||
"/* @jsx mdx */
|
||||
import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
|
||||
|
||||
import { Story, Meta } from '@storybook/addon-docs/blocks';
|
||||
import { Story, Meta, Canvas } from '@storybook/addon-docs/blocks';
|
||||
import { Welcome, Button } from '@storybook/angular/demo';
|
||||
import * as MyStories from './My.stories';
|
||||
import { Other } from './Other.stories';
|
||||
@ -26,8 +26,10 @@ function MDXContent({ components, ...props }) {
|
||||
<MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
|
||||
<Meta title=\\"MDX/CSF imports\\" mdxType=\\"Meta\\" />
|
||||
<h1>{\`Stories from CSF imports\`}</h1>
|
||||
<Story story={MyStories.Basic} name=\\"BasicStory\\" mdxType=\\"Story\\" />
|
||||
<Story story={Other} name=\\"OtherStory\\" mdxType=\\"Story\\" />
|
||||
<Story story={MyStories.Basic} name=\\"_Basic_\\" mdxType=\\"Story\\" />
|
||||
<Canvas mdxType=\\"Canvas\\">
|
||||
<Story story={Other} name=\\"_Other_\\" mdxType=\\"Story\\" />
|
||||
</Canvas>
|
||||
<Story name=\\"renamed\\" story={MyStories.Foo} mdxType=\\"Story\\" />
|
||||
</MDXLayout>
|
||||
);
|
||||
@ -35,23 +37,16 @@ function MDXContent({ components, ...props }) {
|
||||
|
||||
MDXContent.isMDXComponent = true;
|
||||
|
||||
export const BasicStory = MyStories.Basic;
|
||||
export const _Basic_ = MyStories.Basic;
|
||||
|
||||
export const OtherStory = Other;
|
||||
export const _Other_ = Other;
|
||||
|
||||
export const FooStory = MyStories.Foo;
|
||||
FooStory.storyName = 'renamed';
|
||||
export const _Foo_ = MyStories.Foo;
|
||||
_Foo_.storyName = 'renamed';
|
||||
|
||||
const componentMeta = {
|
||||
title: 'MDX/CSF imports',
|
||||
includeStories: ['BasicStory', 'OtherStory', 'FooStory'],
|
||||
};
|
||||
const componentMeta = { title: 'MDX/CSF imports', includeStories: ['_Basic_', '_Other_', '_Foo_'] };
|
||||
|
||||
const mdxStoryNameToKey = {
|
||||
BasicStory: 'BasicStory',
|
||||
OtherStory: 'OtherStory',
|
||||
renamed: 'FooStory',
|
||||
};
|
||||
const mdxStoryNameToKey = { _Basic_: '_Basic_', _Other_: '_Other_', renamed: '_Foo_' };
|
||||
|
||||
componentMeta.parameters = componentMeta.parameters || {};
|
||||
componentMeta.parameters.docs = {
|
||||
|
||||
@ -65,7 +65,7 @@ componentNotes.args = {
|
||||
a: 1,
|
||||
b: 2,
|
||||
};
|
||||
componentNotes.parameters = { storySource: { source: 'Template.bind({})' } };
|
||||
componentNotes.parameters = { storySource: { source: 'args => <Button>Component notes</Button>' } };
|
||||
|
||||
const componentMeta = { title: 'Button', includeStories: ['componentNotes'] };
|
||||
|
||||
|
||||
@ -44,7 +44,7 @@ function genAttribute(key, element) {
|
||||
function genImportStory(ast, storyDef, storyName, context) {
|
||||
const { code: story } = generate(storyDef.expression, {});
|
||||
|
||||
const storyKey = `${story.split('.').pop()}Story`;
|
||||
const storyKey = `_${story.split('.').pop()}_`;
|
||||
|
||||
const statements = [`export const ${storyKey} = ${story};`];
|
||||
if (storyName) {
|
||||
@ -71,6 +71,32 @@ function genImportStory(ast, storyDef, storyName, context) {
|
||||
};
|
||||
}
|
||||
|
||||
function getBodyPart(bodyNode, context) {
|
||||
const body = bodyNode.type === 'JSXExpressionContainer' ? bodyNode.expression : bodyNode;
|
||||
let sourceBody = body;
|
||||
if (
|
||||
body.type === 'CallExpression' &&
|
||||
body.callee.type === 'MemberExpression' &&
|
||||
body.callee.object.type === 'Identifier' &&
|
||||
body.callee.property.type === 'Identifier' &&
|
||||
body.callee.property.name === 'bind' &&
|
||||
(body.arguments.length === 0 ||
|
||||
(body.arguments.length === 1 &&
|
||||
body.arguments[0].type === 'ObjectExpression' &&
|
||||
body.arguments[0].properties.length === 0))
|
||||
) {
|
||||
const bound = body.callee.object.name;
|
||||
const namedExport = context.namedExports[bound];
|
||||
if (namedExport) {
|
||||
sourceBody = namedExport;
|
||||
}
|
||||
}
|
||||
|
||||
const { code: storyCode } = generate(body, {});
|
||||
const { code: sourceCode } = generate(sourceBody, {});
|
||||
return { storyCode, sourceCode, body };
|
||||
}
|
||||
|
||||
function genStoryExport(ast, context) {
|
||||
let storyName = getAttr(ast.openingElement, 'name');
|
||||
let storyId = getAttr(ast.openingElement, 'id');
|
||||
@ -96,30 +122,29 @@ function genStoryExport(ast, context) {
|
||||
|
||||
const bodyNodes = ast.children.filter((n) => n.type !== 'JSXText');
|
||||
let storyCode = null;
|
||||
let sourceCode = null;
|
||||
let storyVal = null;
|
||||
if (!bodyNodes.length) {
|
||||
// plain text node
|
||||
const { code } = generate(ast.children[0], {});
|
||||
storyCode = `'${code}'`;
|
||||
sourceCode = storyCode;
|
||||
storyVal = `() => (
|
||||
${storyCode}
|
||||
)`;
|
||||
} else {
|
||||
const bodyParts = bodyNodes.map((bodyNode) => {
|
||||
const body = bodyNode.type === 'JSXExpressionContainer' ? bodyNode.expression : bodyNode;
|
||||
const { code } = generate(body, {});
|
||||
return { code, body };
|
||||
});
|
||||
const bodyParts = bodyNodes.map((bodyNode) => getBodyPart(bodyNode, context));
|
||||
// if we have more than two children
|
||||
// 1. Add line breaks
|
||||
// 2. Enclose in <> ... </>
|
||||
storyCode = bodyParts.map(({ code }) => code).join('\n');
|
||||
storyCode = bodyParts.map(({ storyCode: code }) => code).join('\n');
|
||||
sourceCode = bodyParts.map(({ sourceCode: code }) => code).join('\n');
|
||||
const storyReactCode = bodyParts.length > 1 ? `<>\n${storyCode}\n</>` : storyCode;
|
||||
// keep track if an indentifier or function call
|
||||
// avoid breaking change for 5.3
|
||||
const BIND_REGEX = /\.bind\(.*\)/;
|
||||
if (bodyParts.length === 1 && BIND_REGEX.test(bodyParts[0].code)) {
|
||||
storyVal = bodyParts[0].code;
|
||||
if (bodyParts.length === 1 && BIND_REGEX.test(bodyParts[0].storyCode)) {
|
||||
storyVal = bodyParts[0].storyCode;
|
||||
} else {
|
||||
switch (bodyParts.length === 1 && bodyParts[0].body.type) {
|
||||
// We don't know what type the identifier is, but this code
|
||||
@ -152,7 +177,7 @@ function genStoryExport(ast, context) {
|
||||
|
||||
let parameters = getAttr(ast.openingElement, 'parameters');
|
||||
parameters = parameters && parameters.expression;
|
||||
const source = jsStringEscape(storyCode);
|
||||
const source = jsStringEscape(sourceCode);
|
||||
const sourceParam = `storySource: { source: '${source}' }`;
|
||||
if (parameters) {
|
||||
const { code: params } = generate(parameters, {});
|
||||
@ -249,7 +274,17 @@ function getExports(node, counter, options) {
|
||||
if (CANVAS_REGEX.exec(value)) {
|
||||
// Canvas/Preview, possibly containing multiple stories
|
||||
const ast = parser.parseExpression(value, { plugins: ['jsx'] });
|
||||
return { stories: genCanvasExports(ast, counter) };
|
||||
|
||||
const canvasExports = genCanvasExports(ast, counter);
|
||||
|
||||
// We're overwriting the Canvas tag here with a version that
|
||||
// has the `name` attribute (e.g. `<Story name="..." story={...} />`)
|
||||
// even if the user didn't provide one. We need the name attribute when
|
||||
// we render the node at runtime.
|
||||
const { code } = generate(ast, {});
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
node.value = code;
|
||||
return { stories: canvasExports };
|
||||
}
|
||||
if (META_REGEX.exec(value)) {
|
||||
const ast = parser.parseExpression(value, { plugins: ['jsx'] });
|
||||
@ -293,8 +328,48 @@ const hasStoryChild = (node) => {
|
||||
return null;
|
||||
};
|
||||
|
||||
function extractExports(node, options) {
|
||||
node.children.forEach((child) => {
|
||||
const getMdxSource = (children) =>
|
||||
encodeURI(
|
||||
children
|
||||
.map(
|
||||
(el) =>
|
||||
generate(el, {
|
||||
quotes: 'double',
|
||||
}).code
|
||||
)
|
||||
.join('\n')
|
||||
);
|
||||
|
||||
// Parse out the named exports from a node, where the key
|
||||
// is the variable name and the value is the AST of the
|
||||
// variable declaration initializer
|
||||
const getNamedExports = (node) => {
|
||||
const namedExports = {};
|
||||
const ast = parser.parse(node.value, {
|
||||
sourceType: 'module',
|
||||
presets: ['env'],
|
||||
plugins: ['jsx'],
|
||||
});
|
||||
if (ast.type === 'File' && ast.program.type === 'Program' && ast.program.body.length === 1) {
|
||||
const exported = ast.program.body[0];
|
||||
if (
|
||||
exported.type === 'ExportNamedDeclaration' &&
|
||||
exported.declaration.type === 'VariableDeclaration' &&
|
||||
exported.declaration.declarations.length === 1
|
||||
) {
|
||||
const declaration = exported.declaration.declarations[0];
|
||||
if (declaration.type === 'VariableDeclarator' && declaration.id.type === 'Identifier') {
|
||||
const { name } = declaration.id;
|
||||
namedExports[name] = declaration.init;
|
||||
}
|
||||
}
|
||||
}
|
||||
return namedExports;
|
||||
};
|
||||
|
||||
function extractExports(root, options) {
|
||||
const namedExports = {};
|
||||
root.children.forEach((child) => {
|
||||
if (child.type === 'jsx') {
|
||||
try {
|
||||
const ast = parser.parseExpression(child.value, { plugins: ['jsx'] });
|
||||
@ -313,16 +388,7 @@ function extractExports(node, options) {
|
||||
},
|
||||
value: {
|
||||
type: 'StringLiteral',
|
||||
value: encodeURI(
|
||||
ast.children
|
||||
.map(
|
||||
(el) =>
|
||||
generate(el, {
|
||||
quotes: 'double',
|
||||
}).code
|
||||
)
|
||||
.join('\n')
|
||||
),
|
||||
value: getMdxSource(ast.children),
|
||||
},
|
||||
});
|
||||
}
|
||||
@ -343,6 +409,8 @@ function extractExports(node, options) {
|
||||
*
|
||||
*/
|
||||
}
|
||||
} else if (child.type === 'export') {
|
||||
Object.assign(namedExports, getNamedExports(child));
|
||||
}
|
||||
});
|
||||
// we're overriding default export
|
||||
@ -352,8 +420,10 @@ function extractExports(node, options) {
|
||||
const context = {
|
||||
counter: 0,
|
||||
storyNameToKey: {},
|
||||
root,
|
||||
namedExports,
|
||||
};
|
||||
node.children.forEach((n) => {
|
||||
root.children.forEach((n) => {
|
||||
const exports = getExports(n, context, options);
|
||||
if (exports) {
|
||||
const { stories, meta } = exports;
|
||||
@ -382,7 +452,7 @@ function extractExports(node, options) {
|
||||
}
|
||||
metaExport.includeStories = JSON.stringify(includeStories);
|
||||
|
||||
const defaultJsx = mdxToJsx.toJSX(node, {}, { ...options, skipExport: true });
|
||||
const defaultJsx = mdxToJsx.toJSX(root, {}, { ...options, skipExport: true });
|
||||
const fullJsx = [
|
||||
'import { assertIsFn, AddContext } from "@storybook/addon-docs/blocks";',
|
||||
defaultJsx,
|
||||
@ -398,7 +468,7 @@ function extractExports(node, options) {
|
||||
|
||||
function createCompiler(mdxOptions) {
|
||||
return function compiler(options = {}) {
|
||||
this.Compiler = (tree) => extractExports(tree, options, mdxOptions);
|
||||
this.Compiler = (root) => extractExports(root, options, mdxOptions);
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-essentials",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"description": "Curated addons to bring out the best of Storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -28,15 +28,15 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "6.0.7",
|
||||
"@storybook/addon-backgrounds": "6.0.7",
|
||||
"@storybook/addon-controls": "6.0.7",
|
||||
"@storybook/addon-docs": "6.0.7",
|
||||
"@storybook/addon-toolbars": "6.0.7",
|
||||
"@storybook/addon-viewport": "6.0.7",
|
||||
"@storybook/addons": "6.0.7",
|
||||
"@storybook/api": "6.0.7",
|
||||
"@storybook/node-logger": "6.0.7",
|
||||
"@storybook/addon-actions": "6.0.16",
|
||||
"@storybook/addon-backgrounds": "6.0.16",
|
||||
"@storybook/addon-controls": "6.0.16",
|
||||
"@storybook/addon-docs": "6.0.16",
|
||||
"@storybook/addon-toolbars": "6.0.16",
|
||||
"@storybook/addon-viewport": "6.0.16",
|
||||
"@storybook/addons": "6.0.16",
|
||||
"@storybook/api": "6.0.16",
|
||||
"@storybook/node-logger": "6.0.16",
|
||||
"core-js": "^3.0.1",
|
||||
"regenerator-runtime": "^0.13.3",
|
||||
"ts-dedent": "^1.1.1"
|
||||
@ -54,7 +54,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f",
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c",
|
||||
"typesVersions": {
|
||||
"<=3.5": {
|
||||
"*": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-events",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"description": "Add events to your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -31,11 +31,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.7",
|
||||
"@storybook/api": "6.0.7",
|
||||
"@storybook/client-api": "6.0.7",
|
||||
"@storybook/core-events": "6.0.7",
|
||||
"@storybook/theming": "6.0.7",
|
||||
"@storybook/addons": "6.0.16",
|
||||
"@storybook/api": "6.0.16",
|
||||
"@storybook/client-api": "6.0.16",
|
||||
"@storybook/core-events": "6.0.16",
|
||||
"@storybook/theming": "6.0.16",
|
||||
"core-js": "^3.0.1",
|
||||
"format-json": "^1.0.3",
|
||||
"lodash": "^4.17.15",
|
||||
@ -55,7 +55,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f",
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c",
|
||||
"typesVersions": {
|
||||
"<=3.5": {
|
||||
"*": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-google-analytics",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"description": "Storybook addon for google analytics",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -20,8 +20,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.7",
|
||||
"@storybook/core-events": "6.0.7",
|
||||
"@storybook/addons": "6.0.16",
|
||||
"@storybook/core-events": "6.0.16",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react-ga": "^2.5.7",
|
||||
@ -35,5 +35,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f"
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-graphql",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"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.7",
|
||||
"@storybook/api": "6.0.7",
|
||||
"@storybook/addons": "6.0.16",
|
||||
"@storybook/api": "6.0.16",
|
||||
"@types/webpack": "^4.41.9",
|
||||
"babel-loader": "^8.0.6",
|
||||
"core-js": "^3.0.1",
|
||||
@ -50,7 +50,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f",
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c",
|
||||
"typesVersions": {
|
||||
"<=3.5": {
|
||||
"*": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"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.7",
|
||||
"@storybook/api": "6.0.7",
|
||||
"@storybook/components": "6.0.7",
|
||||
"@storybook/core-events": "6.0.7",
|
||||
"@storybook/theming": "6.0.7",
|
||||
"@storybook/addons": "6.0.16",
|
||||
"@storybook/api": "6.0.16",
|
||||
"@storybook/components": "6.0.16",
|
||||
"@storybook/core-events": "6.0.16",
|
||||
"@storybook/theming": "6.0.16",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3",
|
||||
@ -57,7 +57,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f",
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c",
|
||||
"typesVersions": {
|
||||
"<=3.5": {
|
||||
"*": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-knobs",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"description": "Storybook Addon Prop Editor Component",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,13 +29,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.7",
|
||||
"@storybook/api": "6.0.7",
|
||||
"@storybook/channels": "6.0.7",
|
||||
"@storybook/client-api": "6.0.7",
|
||||
"@storybook/components": "6.0.7",
|
||||
"@storybook/core-events": "6.0.7",
|
||||
"@storybook/theming": "6.0.7",
|
||||
"@storybook/addons": "6.0.16",
|
||||
"@storybook/api": "6.0.16",
|
||||
"@storybook/channels": "6.0.16",
|
||||
"@storybook/client-api": "6.0.16",
|
||||
"@storybook/components": "6.0.16",
|
||||
"@storybook/core-events": "6.0.16",
|
||||
"@storybook/theming": "6.0.16",
|
||||
"copy-to-clipboard": "^3.0.8",
|
||||
"core-js": "^3.0.1",
|
||||
"escape-html": "^1.0.3",
|
||||
@ -65,7 +65,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f",
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c",
|
||||
"typesVersions": {
|
||||
"<=3.5": {
|
||||
"*": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"description": "Story Links addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,11 +29,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.7",
|
||||
"@storybook/client-logger": "6.0.7",
|
||||
"@storybook/core-events": "6.0.7",
|
||||
"@storybook/addons": "6.0.16",
|
||||
"@storybook/client-logger": "6.0.16",
|
||||
"@storybook/core-events": "6.0.16",
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/router": "6.0.7",
|
||||
"@storybook/router": "6.0.16",
|
||||
"@types/qs": "^6.9.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
@ -53,7 +53,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f",
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c",
|
||||
"typesVersions": {
|
||||
"<=3.5": {
|
||||
"*": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-queryparams",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"description": "parameter addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -30,12 +30,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.7",
|
||||
"@storybook/api": "6.0.7",
|
||||
"@storybook/client-logger": "6.0.7",
|
||||
"@storybook/components": "6.0.7",
|
||||
"@storybook/core-events": "6.0.7",
|
||||
"@storybook/theming": "6.0.7",
|
||||
"@storybook/addons": "6.0.16",
|
||||
"@storybook/api": "6.0.16",
|
||||
"@storybook/client-logger": "6.0.16",
|
||||
"@storybook/components": "6.0.16",
|
||||
"@storybook/core-events": "6.0.16",
|
||||
"@storybook/theming": "6.0.16",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"qs": "^6.6.0",
|
||||
@ -52,7 +52,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f",
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c",
|
||||
"typesVersions": {
|
||||
"<=3.5": {
|
||||
"*": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"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.7",
|
||||
"@storybook/client-api": "6.0.7",
|
||||
"@storybook/core": "6.0.7",
|
||||
"@storybook/addons": "6.0.16",
|
||||
"@storybook/client-api": "6.0.16",
|
||||
"@storybook/core": "6.0.16",
|
||||
"@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.7",
|
||||
"@storybook/react": "6.0.7",
|
||||
"@storybook/addon-docs": "6.0.16",
|
||||
"@storybook/react": "6.0.16",
|
||||
"babel-loader": "^8.0.6",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-to-json": "^3.4.1",
|
||||
@ -64,7 +64,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f",
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c",
|
||||
"typesVersions": {
|
||||
"<=3.5": {
|
||||
"*": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"description": "Image snapshots addition to StoryShots based on puppeteer",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -30,7 +30,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/node-logger": "6.0.7",
|
||||
"@storybook/node-logger": "6.0.16",
|
||||
"@types/jest-image-snapshot": "^2.8.0",
|
||||
"@wordpress/jest-puppeteer-axe": "^1.5.0",
|
||||
"core-js": "^3.0.1",
|
||||
@ -42,7 +42,7 @@
|
||||
"@types/puppeteer": "^2.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-storyshots": "6.0.7",
|
||||
"@storybook/addon-storyshots": "6.0.16",
|
||||
"puppeteer": "^2.0.0 || ^3.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
@ -53,7 +53,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f",
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c",
|
||||
"typesVersions": {
|
||||
"<=3.5": {
|
||||
"*": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"description": "Stories addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,13 +29,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.7",
|
||||
"@storybook/api": "6.0.7",
|
||||
"@storybook/client-logger": "6.0.7",
|
||||
"@storybook/components": "6.0.7",
|
||||
"@storybook/router": "6.0.7",
|
||||
"@storybook/source-loader": "6.0.7",
|
||||
"@storybook/theming": "6.0.7",
|
||||
"@storybook/addons": "6.0.16",
|
||||
"@storybook/api": "6.0.16",
|
||||
"@storybook/client-logger": "6.0.16",
|
||||
"@storybook/components": "6.0.16",
|
||||
"@storybook/router": "6.0.16",
|
||||
"@storybook/source-loader": "6.0.16",
|
||||
"@storybook/theming": "6.0.16",
|
||||
"core-js": "^3.0.1",
|
||||
"estraverse": "^4.2.0",
|
||||
"loader-utils": "^2.0.0",
|
||||
@ -57,5 +57,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f"
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-toolbars",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"description": "Storybook toolbars addon",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -30,10 +30,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.7",
|
||||
"@storybook/api": "6.0.7",
|
||||
"@storybook/client-api": "6.0.7",
|
||||
"@storybook/components": "6.0.7",
|
||||
"@storybook/addons": "6.0.16",
|
||||
"@storybook/api": "6.0.16",
|
||||
"@storybook/client-api": "6.0.16",
|
||||
"@storybook/components": "6.0.16",
|
||||
"core-js": "^3.0.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
@ -43,5 +43,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f"
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"description": "Storybook addon to change the viewport size to mobile",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,12 +29,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.7",
|
||||
"@storybook/api": "6.0.7",
|
||||
"@storybook/client-logger": "6.0.7",
|
||||
"@storybook/components": "6.0.7",
|
||||
"@storybook/core-events": "6.0.7",
|
||||
"@storybook/theming": "6.0.7",
|
||||
"@storybook/addons": "6.0.16",
|
||||
"@storybook/api": "6.0.16",
|
||||
"@storybook/client-logger": "6.0.16",
|
||||
"@storybook/components": "6.0.16",
|
||||
"@storybook/core-events": "6.0.16",
|
||||
"@storybook/theming": "6.0.16",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"memoizerific": "^1.11.3",
|
||||
@ -48,7 +48,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f",
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c",
|
||||
"typesVersions": {
|
||||
"<=3.5": {
|
||||
"*": [
|
||||
|
||||
1
addons/viewport/preset.js
Normal file
1
addons/viewport/preset.js
Normal file
@ -0,0 +1 @@
|
||||
module.exports = require('./dist/preset');
|
||||
@ -1,3 +1 @@
|
||||
// NOTE: loading addons using this file is deprecated!
|
||||
// please use manager.js and preview.js files instead
|
||||
require('./dist/register');
|
||||
|
||||
3
addons/viewport/src/preset/index.ts
Normal file
3
addons/viewport/src/preset/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export function managerEntries(entry: any[] = []) {
|
||||
return [...entry, require.resolve('../register')];
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -34,9 +34,9 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.7",
|
||||
"@storybook/core": "6.0.7",
|
||||
"@storybook/node-logger": "6.0.7",
|
||||
"@storybook/addons": "6.0.16",
|
||||
"@storybook/core": "6.0.16",
|
||||
"@storybook/node-logger": "6.0.16",
|
||||
"@types/webpack-env": "^1.15.2",
|
||||
"autoprefixer": "^9.7.6",
|
||||
"core-js": "^3.0.1",
|
||||
@ -75,7 +75,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f",
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c",
|
||||
"typesVersions": {
|
||||
"<=3.5": {
|
||||
"*": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/aurelia",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"description": "Storybook for Aurelia: Develop Aurelia Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -26,10 +26,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-knobs": "6.0.7",
|
||||
"@storybook/addons": "6.0.7",
|
||||
"@storybook/core": "6.0.7",
|
||||
"@storybook/node-logger": "6.0.7",
|
||||
"@storybook/addon-knobs": "6.0.16",
|
||||
"@storybook/addons": "6.0.16",
|
||||
"@storybook/core": "6.0.16",
|
||||
"@storybook/node-logger": "6.0.16",
|
||||
"fork-ts-checker-webpack-plugin": "^4.0.3",
|
||||
"global": "^4.3.2",
|
||||
"ts-loader": "^6.0.1",
|
||||
@ -55,5 +55,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f"
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/ember",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/app/ember",
|
||||
"bugs": {
|
||||
@ -32,7 +32,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@ember/test-helpers": "^1.7.0",
|
||||
"@storybook/core": "6.0.7",
|
||||
"@storybook/core": "6.0.16",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"regenerator-runtime": "^0.13.3",
|
||||
@ -52,5 +52,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f"
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/html",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -34,8 +34,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.7",
|
||||
"@storybook/core": "6.0.7",
|
||||
"@storybook/addons": "6.0.16",
|
||||
"@storybook/core": "6.0.16",
|
||||
"@types/webpack-env": "^1.15.2",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
@ -54,7 +54,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f",
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c",
|
||||
"typesVersions": {
|
||||
"<=3.5": {
|
||||
"*": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/marionette",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"description": "Storybook for Marionette: Develop Marionette.js component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -25,7 +25,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "6.0.7",
|
||||
"@storybook/core": "6.0.16",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
@ -49,5 +49,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f"
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/marko",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -34,8 +34,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@marko/webpack": "^6.2.8",
|
||||
"@storybook/client-logger": "6.0.7",
|
||||
"@storybook/core": "6.0.7",
|
||||
"@storybook/client-logger": "6.0.16",
|
||||
"@storybook/core": "6.0.16",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"regenerator-runtime": "^0.13.3",
|
||||
@ -54,5 +54,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f"
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/mithril",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"description": "Storybook for Mithril: Develop Mithril Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -36,8 +36,8 @@
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.9.6",
|
||||
"@babel/plugin-transform-react-jsx": "^7.3.0",
|
||||
"@storybook/addons": "6.0.7",
|
||||
"@storybook/core": "6.0.7",
|
||||
"@storybook/addons": "6.0.16",
|
||||
"@storybook/core": "6.0.16",
|
||||
"@types/mithril": "^2.0.0",
|
||||
"@types/webpack-env": "^1.15.2",
|
||||
"core-js": "^3.0.1",
|
||||
@ -60,7 +60,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f",
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c",
|
||||
"typesVersions": {
|
||||
"<=3.5": {
|
||||
"*": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/preact",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"description": "Storybook for Preact: Develop Preact Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -35,8 +35,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-transform-react-jsx": "^7.3.0",
|
||||
"@storybook/addons": "6.0.7",
|
||||
"@storybook/core": "6.0.7",
|
||||
"@storybook/addons": "6.0.16",
|
||||
"@storybook/core": "6.0.16",
|
||||
"@types/webpack-env": "^1.15.2",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
@ -58,7 +58,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f",
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c",
|
||||
"typesVersions": {
|
||||
"<=3.5": {
|
||||
"*": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/rax",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"description": "Storybook for Rax: Develop Rax Component in isolation.",
|
||||
"keywords": [
|
||||
"rax",
|
||||
@ -34,7 +34,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "6.0.7",
|
||||
"@storybook/core": "6.0.16",
|
||||
"babel-preset-rax": "^1.0.0-beta.0",
|
||||
"core-js": "^3.0.1",
|
||||
"driver-dom": "^2.0.0",
|
||||
@ -54,5 +54,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f"
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -36,9 +36,9 @@
|
||||
"dependencies": {
|
||||
"@babel/preset-flow": "^7.0.0",
|
||||
"@babel/preset-react": "^7.0.0",
|
||||
"@storybook/addons": "6.0.7",
|
||||
"@storybook/core": "6.0.7",
|
||||
"@storybook/node-logger": "6.0.7",
|
||||
"@storybook/addons": "6.0.16",
|
||||
"@storybook/core": "6.0.16",
|
||||
"@storybook/node-logger": "6.0.16",
|
||||
"@storybook/semver": "^7.3.2",
|
||||
"@svgr/webpack": "^5.4.0",
|
||||
"@types/webpack-env": "^1.15.2",
|
||||
@ -56,7 +56,7 @@
|
||||
"webpack": "^4.43.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/client-api": "6.0.7",
|
||||
"@storybook/client-api": "6.0.16",
|
||||
"@types/node": "^14.0.10",
|
||||
"@types/webpack": "^4.41.12"
|
||||
},
|
||||
@ -71,7 +71,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f",
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c",
|
||||
"typesVersions": {
|
||||
"<=3.5": {
|
||||
"*": [
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import { Component, FunctionComponent } from 'react';
|
||||
import { ComponentType } from 'react';
|
||||
import { Args as DefaultArgs, Annotations, BaseMeta, BaseStory } from '@storybook/addons';
|
||||
import { StoryFnReactReturnType } from './types';
|
||||
|
||||
export { Args, ArgTypes, Parameters, StoryContext } from '@storybook/addons';
|
||||
|
||||
type ReactComponent = Component | FunctionComponent<any>;
|
||||
type ReactComponent = ComponentType<any>;
|
||||
type ReactReturnType = StoryFnReactReturnType;
|
||||
|
||||
/**
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/riot",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"description": "Storybook for riot.js: View riot snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -34,7 +34,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "6.0.7",
|
||||
"@storybook/core": "6.0.16",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"raw-loader": "^4.0.1",
|
||||
@ -63,5 +63,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f"
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/server",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -34,10 +34,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.7",
|
||||
"@storybook/api": "6.0.7",
|
||||
"@storybook/core": "6.0.7",
|
||||
"@storybook/node-logger": "6.0.7",
|
||||
"@storybook/addons": "6.0.16",
|
||||
"@storybook/api": "6.0.16",
|
||||
"@storybook/core": "6.0.16",
|
||||
"@storybook/node-logger": "6.0.16",
|
||||
"@types/webpack-env": "^1.15.2",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
@ -54,5 +54,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f"
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/svelte",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -34,8 +34,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.7",
|
||||
"@storybook/core": "6.0.7",
|
||||
"@storybook/addons": "6.0.16",
|
||||
"@storybook/core": "6.0.16",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"regenerator-runtime": "^0.13.3",
|
||||
@ -59,7 +59,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f",
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c",
|
||||
"typesVersions": {
|
||||
"<=3.5": {
|
||||
"*": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -34,8 +34,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.7",
|
||||
"@storybook/core": "6.0.7",
|
||||
"@storybook/addons": "6.0.16",
|
||||
"@storybook/core": "6.0.16",
|
||||
"@types/webpack-env": "^1.15.2",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
@ -70,7 +70,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f",
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c",
|
||||
"typesVersions": {
|
||||
"<=3.5": {
|
||||
"*": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/web-components",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"lit-html",
|
||||
@ -38,8 +38,8 @@
|
||||
"dependencies": {
|
||||
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
|
||||
"@babel/plugin-syntax-import-meta": "^7.2.0",
|
||||
"@storybook/addons": "6.0.7",
|
||||
"@storybook/core": "6.0.7",
|
||||
"@storybook/addons": "6.0.16",
|
||||
"@storybook/core": "6.0.16",
|
||||
"@types/webpack-env": "^1.15.2",
|
||||
"babel-plugin-bundled-import-meta": "^0.3.1",
|
||||
"core-js": "^3.0.1",
|
||||
@ -63,7 +63,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f",
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c",
|
||||
"typesVersions": {
|
||||
"<=3.5": {
|
||||
"*": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-decorator",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"description": "decorator addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -24,15 +24,15 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.7",
|
||||
"@storybook/client-api": "6.0.7",
|
||||
"@storybook/addons": "6.0.16",
|
||||
"@storybook/client-api": "6.0.16",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.4.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f",
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c",
|
||||
"typesVersions": {
|
||||
"<=3.5": {
|
||||
"*": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-parameter",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"description": "parameter addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -24,12 +24,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.7",
|
||||
"@storybook/api": "6.0.7",
|
||||
"@storybook/client-logger": "6.0.7",
|
||||
"@storybook/components": "6.0.7",
|
||||
"@storybook/core-events": "6.0.7",
|
||||
"@storybook/theming": "6.0.7",
|
||||
"@storybook/addons": "6.0.16",
|
||||
"@storybook/api": "6.0.16",
|
||||
"@storybook/client-logger": "6.0.16",
|
||||
"@storybook/components": "6.0.16",
|
||||
"@storybook/core-events": "6.0.16",
|
||||
"@storybook/theming": "6.0.16",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3",
|
||||
@ -38,7 +38,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f",
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c",
|
||||
"typesVersions": {
|
||||
"<=3.5": {
|
||||
"*": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-preview-wrapper",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"description": "preview wrapper addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -24,13 +24,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.7",
|
||||
"@storybook/addons": "6.0.16",
|
||||
"react": "^16.8.3"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f",
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c",
|
||||
"typesVersions": {
|
||||
"<=3.5": {
|
||||
"*": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-roundtrip",
|
||||
"version": "6.0.7",
|
||||
"version": "6.0.16",
|
||||
"description": "roundtrip addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -24,13 +24,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.7",
|
||||
"@storybook/api": "6.0.7",
|
||||
"@storybook/client-api": "6.0.7",
|
||||
"@storybook/client-logger": "6.0.7",
|
||||
"@storybook/components": "6.0.7",
|
||||
"@storybook/core-events": "6.0.7",
|
||||
"@storybook/theming": "6.0.7",
|
||||
"@storybook/addons": "6.0.16",
|
||||
"@storybook/api": "6.0.16",
|
||||
"@storybook/client-api": "6.0.16",
|
||||
"@storybook/client-logger": "6.0.16",
|
||||
"@storybook/components": "6.0.16",
|
||||
"@storybook/core-events": "6.0.16",
|
||||
"@storybook/theming": "6.0.16",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3",
|
||||
@ -39,7 +39,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "2ba756b82c1ad607ba5bde77a445a481ccaaf68f",
|
||||
"gitHead": "f01f03d7f756e32cf6f8cc8c9eff85799d36938c",
|
||||
"typesVersions": {
|
||||
"<=3.5": {
|
||||
"*": [
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 25 KiB |
@ -59,7 +59,7 @@ In this ArgTypes data structure, name, type, defaultValue, and description are s
|
||||
|
||||
#### Manual specification
|
||||
|
||||
If you want more control over the props table or any other aspect of using argTypes, you can overwrite the generated argTypes for you component on a per-arg basis. For instance, with the above inferred argTypes and the following default export:
|
||||
If you want more control over the args table or any other aspect of using argTypes, you can overwrite the generated argTypes for you component on a per-arg basis. For instance, with the above inferred argTypes and the following default export:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
|
||||
@ -66,7 +66,7 @@ The `storyName` is useful if you want to use names with special characters, name
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'react/my-component-story-with-storyname.js.mdx',
|
||||
'common/my-component-story-with-storyname.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
|
||||
@ -76,6 +76,25 @@ The value of the `framework` option (in this case ‘vue’) is something that g
|
||||
|
||||
The real meat of this file is the framework presets, and these are standard [Storybook presets](./addons.md#addon-presets) -- you can look at framework packages in the Storybook monorepo (e.g. [React](https://github.com/storybookjs/storybook/blob/next/app/react/src/server/options.ts), [Vue](https://github.com/storybookjs/storybook/blob/next/app/vue/src/server/options.ts), [Web Components](https://github.com/storybookjs/storybook/blob/next/app/web-components/src/server/options.ts)) to see examples of framework-specific customizations.
|
||||
|
||||
When developing your own framework that is not published by storybook, you can pass the path to the framework location with the `frameworkPath` key:
|
||||
|
||||
```ts
|
||||
// my-framework/src/server/options.ts
|
||||
|
||||
const packageJson = require('../../package.json');
|
||||
|
||||
export default {
|
||||
packageJson,
|
||||
framework: 'my-framework',
|
||||
frameworkPath: '@my-framework/storybook',
|
||||
frameworkPresets: [require.resolve('./framework-preset-my-framework.js')],
|
||||
};
|
||||
```
|
||||
|
||||
Passing a relative path to `frameworkPath` is also possible, just keep in mind that these are resolved from the storybook config directory (`.storybook` by default).
|
||||
|
||||
Make sure the `frameworkPath` ends up at the `dist/client/index.js` file within your framework app.
|
||||
|
||||
## Configuring the client
|
||||
|
||||
To configure the client, you must provide a framework specific render function. Before diving into the details, it’s important to understand how user-written stories relate to what is finally rendered on the screen.
|
||||
|
||||
@ -21,12 +21,12 @@ The following table details how to use the API values:
|
||||
| **isFullscreen** | Boolean |Show story component as full screen |`false` |
|
||||
| **showNav** | Boolean |Display panel that shows a list of stories |`true` |
|
||||
| **showPanel** | Boolean |Display panel that shows addon configurations |`true` |
|
||||
| **panelPosition** | String/Object |Where to show the addon panel |`bottom` or `{('bottom'|'right')}` |
|
||||
| **panelPosition** | String/Object |Where to show the addon panel |`bottom` or `right` |
|
||||
| **sidebarAnimations** | Boolean |Sidebar tree animations |`true` |
|
||||
| **enableShortcuts** | Boolean |Enable/disable shortcuts |`true` |
|
||||
| **isToolshown** | String |Show/hide tool bar |`true` |
|
||||
| **theme** | Object |Storybook Theme, see next section |`undefined` |
|
||||
| **selectedPanel** | String |Id to select an addon panel |`my-panel` |
|
||||
| **initialActive** | String |Select the default active tab on Mobile. |`'sidebar'` or `{('sidebar'|'canvas'|'addons')}`|
|
||||
| **initialActive** | String |Select the default active tab on Mobile. |`sidebar` or `canvas` or `addons` |
|
||||
| **showRoots** | Boolean |Display the top-level grouping as a "root" in the sidebar |`false` |
|
||||
|
||||
|
||||
@ -28,8 +28,8 @@ The `main.js` configuration file is a [preset](../api/presets.md) and as such ha
|
||||
|
||||
- `stories` - a array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.js`.
|
||||
- `addons` - a list of the [addons](/addons) you are using.
|
||||
- `webpackFinal` - custom [webpack configuration](./integration.md#extending-storybooks-webpack-config).
|
||||
- `babel` - custom [babel configuration](./integration.md#babel).
|
||||
- `webpackFinal` - custom [webpack configuration](./webpack.md#extending-storybooks-webpack-config).
|
||||
- `babel` - custom [babel configuration](./babel.md).
|
||||
|
||||
## Configure story loading
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: 'Sidebar & URLS'
|
||||
---
|
||||
|
||||
Storybook’s sidebar lists all your stories grouped by component. When you have a lot of components you may wish to also group those components also. To do so, you can add the `/` separator to the `title` of your CSF file and Storybook will group the stories into groups based on common prefixes:
|
||||
Storybook’s sidebar lists all your stories grouped by component. When you have a lot of components you may wish to also group those components. To do so, you can add the `/` separator to the `title` of your CSF file and Storybook will group the stories into groups based on common prefixes:
|
||||
|
||||
|
||||
|
||||
|
||||
@ -13,7 +13,7 @@ Storybook includes two themes that look good out of the box: "normal" (a light t
|
||||
Make sure you have installed [`@storybook/addons`](https://www.npmjs.com/package/@storybook/addons) and [`@storybook/theming`](https://www.npmjs.com/package/@storybook/theming) packages.
|
||||
|
||||
```sh
|
||||
yarn install --dev @storybook/addons @storybook/theming
|
||||
yarn add --dev @storybook/addons @storybook/theming
|
||||
```
|
||||
|
||||
As an example, you can tell Storybook to use the "dark" theme by modifying [`.storybook/manager.js`](./overview.md#configure-story-rendering):
|
||||
@ -32,7 +32,7 @@ When setting a theme, set a full theme object. The theme is replaced, not combin
|
||||
|
||||
## Theming docs
|
||||
|
||||
[Storybook Docs](../writing-docs) uses the same theme system as Storybook’s UI, but is themed independently from the main UI.
|
||||
[Storybook Docs](../writing-docs/introduction) uses the same theme system as Storybook’s UI, but is themed independently from the main UI.
|
||||
|
||||
Supposing you have a Storybook theme defined for the main UI in [`.storybook/manager.js`](./overview.md#configure-story-rendering):
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 68 KiB After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
@ -98,7 +98,7 @@ Using the example above, you can modify any story to retrieve the **Locale** `gl
|
||||
|
||||
<div class="aside">
|
||||
|
||||
In Storybook 6.0, if you set the global option `passArgsFirst: false` for backwards compatibility, the story context is passed as the second argument:
|
||||
In Storybook 6.0, if you set the global option `passArgsFirst: false` for backwards compatibility, the story context is passed as the first argument:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@ title: 'Example Storybooks'
|
||||
|
||||
Storybook is the world’s most popular component explorer. It's widely adopted by industry giants, startups, and open source projects alike.
|
||||
|
||||
This is a curated list of some of Storybooks that power the largest companies for your inspiration.
|
||||
This is a curated list of Storybooks for your inspiration.
|
||||
|
||||
## Storybook team
|
||||
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
```ts
|
||||
// my-button.component.ts
|
||||
|
||||
import { Component, Input} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
@ -23,5 +25,4 @@ export default class ButtonComponent {
|
||||
@Input()
|
||||
content: string;
|
||||
}
|
||||
|
||||
```
|
||||
@ -1,5 +1,5 @@
|
||||
```ts
|
||||
// Button.story.ts
|
||||
// Button.stories.ts
|
||||
|
||||
import Button from './button.component';
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
```ts
|
||||
// Button.stories.js
|
||||
// Button.stories.ts
|
||||
|
||||
import Button from './button.component';
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
// Button.stories.ts
|
||||
|
||||
import Button from './button.component';
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
```ts
|
||||
// Button.stories.ts
|
||||
|
||||
import Button from './button.component';
|
||||
|
||||
export default {
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
```ts
|
||||
// List.stories.ts
|
||||
|
||||
import * as ListItemStories from './ListItem.stories';
|
||||
|
||||
export const ManyItems = Template.bind({});
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
```ts
|
||||
// Page.stories.ts
|
||||
|
||||
import { moduleMetadata } from '@storybook/angular';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
|
||||
@ -2,8 +2,6 @@
|
||||
|
||||
<!---Badge.stories.mdx --->
|
||||
|
||||
|
||||
|
||||
import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
|
||||
|
||||
import { Badge } from './Badge';
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
```js
|
||||
// Button.stories.js
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
|
||||
@ -1,19 +0,0 @@
|
||||
```js
|
||||
// Button.stories.ts
|
||||
|
||||
import { Button, ButtonProps } from './Button';
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
argTypes: {
|
||||
backgroundColor: { control: 'color' },
|
||||
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
page: null
|
||||
}
|
||||
},
|
||||
} as Meta;
|
||||
```
|
||||
@ -3,5 +3,4 @@
|
||||
|
||||
export const Primary = Template.bind({});
|
||||
Primary.parameters = { docs: { page: null } }
|
||||
|
||||
```
|
||||
@ -2,10 +2,12 @@
|
||||
// Button.stories.js
|
||||
|
||||
import { Button } from './Button';
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
};
|
||||
|
||||
export const Sample = () => ({
|
||||
template: '<button label=:label />',
|
||||
data: {
|
||||
|
||||
@ -6,5 +6,4 @@ export default {
|
||||
component: Button,
|
||||
parameters: { actions: { argTypesRegex: '^on.*' } },
|
||||
};
|
||||
|
||||
```
|
||||
@ -5,5 +5,4 @@ export default {
|
||||
title: 'Button',
|
||||
argTypes: { onClick: { action: 'clicked' } },
|
||||
};
|
||||
|
||||
```
|
||||
@ -1,4 +1,6 @@
|
||||
```js
|
||||
// Button.stories.js
|
||||
|
||||
const Primary = ButtonStory.bind({});
|
||||
Primary.args = {
|
||||
primary: true,
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
```js
|
||||
// Button.story.js
|
||||
// Button.stories.js
|
||||
|
||||
export const PrimaryLongName = Template.bind({});
|
||||
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
```js
|
||||
// Button.stories.js
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
```ts
|
||||
// Button.stories.ts
|
||||
// Button.stories.tsx
|
||||
|
||||
import React from 'react';
|
||||
|
||||
@ -14,6 +14,7 @@ import {
|
||||
Stories,
|
||||
PRIMARY_STORY,
|
||||
} from '@storybook/addon-docs/blocks';
|
||||
|
||||
import { Button, ButtonProps } from './Button';
|
||||
|
||||
export default {
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
```js
|
||||
// Checkbox.stories.js
|
||||
|
||||
import { Checkbox } from './Checkbox';
|
||||
|
||||
export default {
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
```md
|
||||
<!--- Checkbox.stories.mdx -->
|
||||
|
||||
|
||||
|
||||
import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
|
||||
import { Checkbox } from './Checkbox';
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
```js
|
||||
// My-component_spec.js
|
||||
// MyComponent.spec.js
|
||||
|
||||
describe('My Component', () => {
|
||||
it('should respond to click on button with warning', () => {
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
```js
|
||||
// Button.stories.js
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
```js
|
||||
// Button.stories.js
|
||||
|
||||
export default {
|
||||
title: 'CustomDescription'
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
```js
|
||||
// Button.stories.js
|
||||
|
||||
export const CustomSource = () => Template.bind({});
|
||||
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
```md
|
||||
<!--- MyComponent.stories.mdx -->
|
||||
|
||||
import { Props } from '@storybook/addon-docs/blocks';
|
||||
import { ArgsTable } from '@storybook/addon-docs/blocks';
|
||||
import { MyComponent } from './MyComponent';
|
||||
|
||||
# My Component!
|
||||
|
||||
<Props of={MyComponent} />
|
||||
<ArgsTable of={MyComponent} />
|
||||
```
|
||||
@ -1,4 +1,5 @@
|
||||
```md
|
||||
<!--- MyComponent.stories.mdx -->
|
||||
|
||||
import { Story } from "@storybook/addon-docs/blocks";
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
```js
|
||||
// Foo-Bar.stories.js
|
||||
// FooBar.stories.js
|
||||
|
||||
export default {
|
||||
title: 'Foo/Bar',
|
||||
|
||||
@ -5,7 +5,9 @@ export default {
|
||||
title: 'Gizmo',
|
||||
component: Gizmo,
|
||||
argTypes: {
|
||||
width: { type: 'range', min: 400, max: 1200, step: 50 };
|
||||
width: {
|
||||
control: { type: 'range', min: 400, max: 1200, step: 50 },
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
```
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
```js
|
||||
// MyComponent.stories.js
|
||||
|
||||
// This will automatically be parsed to the contents of `data.json`
|
||||
import data from './data.json';
|
||||
```
|
||||
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