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

Merge branch 'future/base' into future-hybrid-stories-index

Browse Source
This commit is contained in:
Michael Shilman 2022-05-05 20:37:26 +08:00
parent 0dd024af28
commit a58a785be2
240 changed files with 5508 additions and 1481 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
CHANGELOG.md
View File

@ -1,3 +1,45 @@
## 6.5.0-beta.4 (May 4, 2022)
### Features
- UI: Add a parent level toolbar exclusion key for tabs ([#18106](https://github.com/storybookjs/storybook/pull/18106))
- Addon-a11y: Display a11y issues number in addon tab title ([#17983](https://github.com/storybookjs/storybook/pull/17983))
### Bug Fixes
- Addon-docs: Fix Canvas block CURRENT_SELECTION handling ([#18130](https://github.com/storybookjs/storybook/pull/18130))
- Telemetry: Add safecheck for crash reports ([#18129](https://github.com/storybookjs/storybook/pull/18129))
- Addon-a11y: Fix a11y params > element use ([#17989](https://github.com/storybookjs/storybook/pull/17989))
## 6.5.0-beta.3 (May 4, 2022)
### Bug Fixes
- UI: Externalize `react-syntax-highlighter` from components ([#18127](https://github.com/storybookjs/storybook/pull/18127))
## 6.5.0-beta.2 (May 2, 2022)
### Features
- Core: Add optional telemetry and crash reporting ([#18046](https://github.com/storybookjs/storybook/pull/18046))
### Bug Fixes
- Controls: Fix URL deserialization for argTypes with mapping ([#18124](https://github.com/storybookjs/storybook/pull/18124))
- Core: Fix telemetry project root detection ([#18125](https://github.com/storybookjs/storybook/pull/18125))
- React: Fix version detection for older versions of `react-dom` ([#18105](https://github.com/storybookjs/storybook/pull/18105))
- CLI: Add non-monorepo testing tools to exclude lists ([#18092](https://github.com/storybookjs/storybook/pull/18092))
### Maintenance
- Examples: Update example to restore 6.4 auto-title behavior in UI ([#18109](https://github.com/storybookjs/storybook/pull/18109))
- CLI: Remove git.io URL ([#18070](https://github.com/storybookjs/storybook/pull/18070))
- UI: Make panel position a persistent preference ([#18036](https://github.com/storybookjs/storybook/pull/18036))
### Dependency Upgrades
- React: Fix jest-specific-snapshot dev dependency ([#18095](https://github.com/storybookjs/storybook/pull/18095))
## 6.5.0-beta.1 (April 28, 2022)
### Features

13
MIGRATION.md
View File

@ -313,6 +313,19 @@ This might be considered a breaking change. However, we feel justified to releas
1. We consider it a bug in the initial auto-title implementation
2. CSF3 and the auto-title feature are experimental, and we reserve the right to make breaking changes outside of semver (tho we try to avoid it)
If you want to restore the old titles in the UI, you can customize your sidebar with the following code snippet in `.storybook/manager.js`:
```js
import { addons } from '@storybook/addons';
import startCase from 'lodash/startCase';
addons.setConfig({
sidebar: {
renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)),
},
});
```
#### Auto-title redundant filename
The heuristic failed in the common scenario in which each component gets its own directory, e.g. `atoms/Button/Button.stories.js`, which would result in the redundant title `Atoms/Button/Button`. Alternatively, `atoms/Button/index.stories.js` would result in `Atoms/Button/Index`.

2
__mocks__/fs-extra.js
View File

@ -15,6 +15,7 @@ function __setMockFiles(newMockFiles) {
const readFile = async (filePath) => mockFiles[filePath];
const readFileSync = (filePath = '') => mockFiles[filePath];
const existsSync = (filePath) => !!mockFiles[filePath];
const readJsonSync = (filePath = '') => JSON.parse(mockFiles[filePath]);
const lstatSync = (filePath) => ({
isFile: () => !!mockFiles[filePath],
});
@ -23,6 +24,7 @@ const lstatSync = (filePath) => ({
fs.__setMockFiles = __setMockFiles;
fs.readFile = readFile;
fs.readFileSync = readFileSync;
fs.readJsonSync = readJsonSync;
fs.existsSync = existsSync;
fs.lstatSync = lstatSync;

18
addons/a11y/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-a11y",
"version": "6.5.0-beta.1",
"version": "6.5.0-beta.4",
"description": "Test component compliance with web accessibility standards",
"keywords": [
"a11y",
@ -45,14 +45,14 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.5.0-beta.1",
"@storybook/api": "6.5.0-beta.1",
"@storybook/channels": "6.5.0-beta.1",
"@storybook/client-logger": "6.5.0-beta.1",
"@storybook/components": "6.5.0-beta.1",
"@storybook/core-events": "6.5.0-beta.1",
"@storybook/addons": "6.5.0-beta.4",
"@storybook/api": "6.5.0-beta.4",
"@storybook/channels": "6.5.0-beta.4",
"@storybook/client-logger": "6.5.0-beta.4",
"@storybook/components": "6.5.0-beta.4",
"@storybook/core-events": "6.5.0-beta.4",
"@storybook/csf": "0.0.2--canary.4566f4d.1",
"@storybook/theming": "6.5.0-beta.1",
"@storybook/theming": "6.5.0-beta.4",
"axe-core": "^4.2.0",
"core-js": "^3.8.2",
"global": "^4.4.0",
@ -81,7 +81,7 @@
"publishConfig": {
"access": "public"
},
"gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
"sbmodern": "dist/modern/index.js",
"storybook": {
"displayName": "Accessibility",

10
addons/a11y/src/a11yRunner.ts
View File

@ -15,11 +15,6 @@ 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.childNodes : document.getElementById('root');
};
/**
* Handle A11yContext events.
* Because the event are sent without manual check, we split calls
@ -41,13 +36,14 @@ const run = async (storyId: string) => {
channel.emit(EVENTS.RUNNING);
const axe = (await import('axe-core')).default;
const { element = getElement(), config, options = {} } = input;
const { element = '#root', config, options = {} } = input;
const htmlElement = document.querySelector(element);
axe.reset();
if (config) {
axe.configure(config);
}
const result = await axe.run(element, options);
const result = await axe.run(htmlElement, options);
// 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,

1
addons/a11y/src/components/A11YPanel.test.tsx
View File

@ -63,6 +63,7 @@ describe('A11YPanel', () => {
mockedApi.useStorybookState.mockReset();
mockedApi.useAddonState.mockReset();
mockedApi.useAddonState.mockImplementation((_, defaultState) => React.useState(defaultState));
mockedApi.useChannel.mockReturnValue(jest.fn());
mockedApi.useParameter.mockReturnValue({ manual: false });
const state: Partial<api.State> = { storyId: 'jest' };

6
addons/a11y/src/components/A11yContext.test.tsx
View File

@ -53,11 +53,13 @@ describe('A11YPanel', () => {
beforeEach(() => {
mockedApi.useChannel.mockReset();
mockedApi.useStorybookState.mockReset();
mockedApi.useAddonState.mockReset();
mockedApi.useAddonState.mockImplementation((_, defaultState) => React.useState(defaultState));
mockedApi.useChannel.mockReturnValue(jest.fn());
const state: Partial<api.State> = { storyId };
const storyState: Partial<api.State> = { storyId };
// Lazy to mock entire state
mockedApi.useStorybookState.mockReturnValue(state as any);
mockedApi.useStorybookState.mockReturnValue(storyState as any);
});
it('should render children', () => {

8
addons/a11y/src/components/A11yContext.tsx
View File

@ -1,11 +1,11 @@
import * as React from 'react';
import { themes, convert } from '@storybook/theming';
import { Result } from 'axe-core';
import { useChannel, useStorybookState } from '@storybook/api';
import { useChannel, useStorybookState, useAddonState } from '@storybook/api';
import { STORY_CHANGED, STORY_RENDERED } from '@storybook/core-events';
import { EVENTS } from '../constants';
import { ADDON_ID, EVENTS } from '../constants';
interface Results {
export interface Results {
passes: Result[];
violations: Result[];
incomplete: Result[];
@ -52,7 +52,7 @@ const defaultResult = {
};
export const A11yContextProvider: React.FC<A11yContextProviderProps> = ({ active, ...props }) => {
const [results, setResults] = React.useState<Results>(defaultResult);
const [results, setResults] = useAddonState<Results>(ADDON_ID, defaultResult);
const [tab, setTab] = React.useState(0);
const [highlighted, setHighlighted] = React.useState<string[]>([]);
const { storyId } = useStorybookState();

55
addons/a11y/src/manager.test.tsx Normal file
View File

@ -0,0 +1,55 @@
import { addons } from '@storybook/addons';
import * as api from '@storybook/api';
import { PANEL_ID } from './constants';
import './manager';
jest.mock('@storybook/api');
jest.mock('@storybook/addons');
const mockedApi = api as unknown as jest.Mocked<api.API>;
mockedApi.getAddonState = jest.fn();
const mockedAddons = addons as jest.Mocked<typeof addons>;
const registrationImpl = mockedAddons.register.mock.calls[0][1];
describe('A11yManager', () => {
it('should register the panels', () => {
// when
registrationImpl(mockedApi);
// then
expect(mockedAddons.add.mock.calls).toHaveLength(2);
expect(mockedAddons.add).toHaveBeenCalledWith(PANEL_ID, expect.anything());
const panel = mockedAddons.add.mock.calls
.map(([_, def]) => def)
.find(({ type }) => type === 'panel');
const tool = mockedAddons.add.mock.calls
.map(([_, def]) => def)
.find(({ type }) => type === 'tool');
expect(panel).toBeDefined();
expect(tool).toBeDefined();
});
it('should compute title with no issues', () => {
// given
mockedApi.getAddonState.mockImplementation(() => undefined);
registrationImpl(api as unknown as api.API);
const title = mockedAddons.add.mock.calls
.map(([_, def]) => def)
.find(({ type }) => type === 'panel').title as Function;
// when / then
expect(title()).toBe('Accessibility');
});
it('should compute title with issues', () => {
// given
mockedApi.getAddonState.mockImplementation(() => ({ violations: [{}], incomplete: [{}, {}] }));
registrationImpl(mockedApi);
const title = mockedAddons.add.mock.calls
.map(([_, def]) => def)
.find(({ type }) => type === 'panel').title as Function;
// when / then
expect(title()).toBe('Accessibility (3)');
});
});

12
addons/a11y/src/manager.tsx
View File

@ -3,9 +3,9 @@ import { addons, types } from '@storybook/addons';
import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
import { VisionSimulator } from './components/VisionSimulator';
import { A11YPanel } from './components/A11YPanel';
import { A11yContextProvider } from './components/A11yContext';
import { A11yContextProvider, Results } from './components/A11yContext';
addons.register(ADDON_ID, () => {
addons.register(ADDON_ID, (api) => {
addons.add(PANEL_ID, {
title: '',
type: types.TOOL,
@ -14,7 +14,13 @@ addons.register(ADDON_ID, () => {
});
addons.add(PANEL_ID, {
title: 'Accessibility',
title() {
const addonState: Results = api?.getAddonState(ADDON_ID);
const violationsNb = addonState?.violations?.length || 0;
const incompleteNb = addonState?.incomplete?.length || 0;
const totalNb = violationsNb + incompleteNb;
return totalNb !== 0 ? `Accessibility (${totalNb})` : 'Accessibility';
},
type: types.PANEL,
render: ({ active = true, key }) => (
<A11yContextProvider key={key} active={active}>

16
addons/actions/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-actions",
"version": "6.5.0-beta.1",
"version": "6.5.0-beta.4",
"description": "Get UI feedback when an action is performed on an interactive element",
"keywords": [
"storybook",
@ -41,13 +41,13 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.5.0-beta.1",
"@storybook/api": "6.5.0-beta.1",
"@storybook/client-logger": "6.5.0-beta.1",
"@storybook/components": "6.5.0-beta.1",
"@storybook/core-events": "6.5.0-beta.1",
"@storybook/addons": "6.5.0-beta.4",
"@storybook/api": "6.5.0-beta.4",
"@storybook/client-logger": "6.5.0-beta.4",
"@storybook/components": "6.5.0-beta.4",
"@storybook/core-events": "6.5.0-beta.4",
"@storybook/csf": "0.0.2--canary.4566f4d.1",
"@storybook/theming": "6.5.0-beta.1",
"@storybook/theming": "6.5.0-beta.4",
"core-js": "^3.8.2",
"fast-deep-equal": "^3.1.3",
"global": "^4.4.0",
@ -80,7 +80,7 @@
"publishConfig": {
"access": "public"
},
"gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
"sbmodern": "dist/modern/index.js",
"storybook": {
"displayName": "Actions",

16
addons/backgrounds/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-backgrounds",
"version": "6.5.0-beta.1",
"version": "6.5.0-beta.4",
"description": "Switch backgrounds to view components in different settings",
"keywords": [
"addon",
@ -45,13 +45,13 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.5.0-beta.1",
"@storybook/api": "6.5.0-beta.1",
"@storybook/client-logger": "6.5.0-beta.1",
"@storybook/components": "6.5.0-beta.1",
"@storybook/core-events": "6.5.0-beta.1",
"@storybook/addons": "6.5.0-beta.4",
"@storybook/api": "6.5.0-beta.4",
"@storybook/client-logger": "6.5.0-beta.4",
"@storybook/components": "6.5.0-beta.4",
"@storybook/core-events": "6.5.0-beta.4",
"@storybook/csf": "0.0.2--canary.4566f4d.1",
"@storybook/theming": "6.5.0-beta.1",
"@storybook/theming": "6.5.0-beta.4",
"core-js": "^3.8.2",
"global": "^4.4.0",
"memoizerific": "^1.11.3",
@ -77,7 +77,7 @@
"publishConfig": {
"access": "public"
},
"gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
"sbmodern": "dist/modern/index.js",
"storybook": {
"displayName": "Backgrounds",

20
addons/controls/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-controls",
"version": "6.5.0-beta.1",
"version": "6.5.0-beta.4",
"description": "Interact with component inputs dynamically in the Storybook UI",
"keywords": [
"addon",
@ -45,15 +45,15 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.5.0-beta.1",
"@storybook/api": "6.5.0-beta.1",
"@storybook/client-logger": "6.5.0-beta.1",
"@storybook/components": "6.5.0-beta.1",
"@storybook/core-common": "6.5.0-beta.1",
"@storybook/addons": "6.5.0-beta.4",
"@storybook/api": "6.5.0-beta.4",
"@storybook/client-logger": "6.5.0-beta.4",
"@storybook/components": "6.5.0-beta.4",
"@storybook/core-common": "6.5.0-beta.4",
"@storybook/csf": "0.0.2--canary.4566f4d.1",
"@storybook/node-logger": "6.5.0-beta.1",
"@storybook/store": "6.5.0-beta.1",
"@storybook/theming": "6.5.0-beta.1",
"@storybook/node-logger": "6.5.0-beta.4",
"@storybook/store": "6.5.0-beta.4",
"@storybook/theming": "6.5.0-beta.4",
"core-js": "^3.8.2",
"lodash": "^4.17.21",
"ts-dedent": "^2.0.0"
@ -73,7 +73,7 @@
"publishConfig": {
"access": "public"
},
"gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
"sbmodern": "dist/modern/manager.js",
"storybook": {
"displayName": "Controls",

28
addons/docs/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-docs",
"version": "6.5.0-beta.1",
"version": "6.5.0-beta.4",
"description": "Document component usage and properties in Markdown",
"keywords": [
"addon",
@ -59,20 +59,20 @@
"@babel/preset-env": "^7.12.11",
"@jest/transform": "^26.6.2",
"@mdx-js/react": "^1.6.22",
"@storybook/addons": "6.5.0-beta.1",
"@storybook/api": "6.5.0-beta.1",
"@storybook/components": "6.5.0-beta.1",
"@storybook/core-common": "6.5.0-beta.1",
"@storybook/core-events": "6.5.0-beta.1",
"@storybook/addons": "6.5.0-beta.4",
"@storybook/api": "6.5.0-beta.4",
"@storybook/components": "6.5.0-beta.4",
"@storybook/core-common": "6.5.0-beta.4",
"@storybook/core-events": "6.5.0-beta.4",
"@storybook/csf": "0.0.2--canary.4566f4d.1",
"@storybook/docs-tools": "6.5.0-beta.1",
"@storybook/docs-tools": "6.5.0-beta.4",
"@storybook/mdx1-csf": "canary",
"@storybook/node-logger": "6.5.0-beta.1",
"@storybook/postinstall": "6.5.0-beta.1",
"@storybook/preview-web": "6.5.0-beta.1",
"@storybook/source-loader": "6.5.0-beta.1",
"@storybook/store": "6.5.0-beta.1",
"@storybook/theming": "6.5.0-beta.1",
"@storybook/node-logger": "6.5.0-beta.4",
"@storybook/postinstall": "6.5.0-beta.4",
"@storybook/preview-web": "6.5.0-beta.4",
"@storybook/source-loader": "6.5.0-beta.4",
"@storybook/store": "6.5.0-beta.4",
"@storybook/theming": "6.5.0-beta.4",
"babel-loader": "^8.0.0",
"core-js": "^3.8.2",
"fast-deep-equal": "^3.1.3",
@ -108,7 +108,7 @@
"publishConfig": {
"access": "public"
},
"gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
"sbmodern": "dist/modern/index.js",
"storybook": {
"displayName": "Docs",

6
addons/docs/src/blocks/Canvas.tsx
View File

@ -11,6 +11,7 @@ import { DocsContext, DocsContextProps } from './DocsContext';
import { SourceContext, SourceContextProps } from './SourceContainer';
import { getSourceProps, SourceState } from './Source';
import { useStories } from './useStory';
import { CURRENT_SELECTION } from './types';
export { SourceState };
@ -53,7 +54,10 @@ const getPreviewProps = (
);
const sourceProps = getSourceProps({ ids: targetIds }, docsContext, sourceContext);
if (!sourceState) sourceState = sourceProps.state;
const stories = useStories(targetIds, docsContext);
const storyIds = targetIds.map((targetId) =>
targetId === CURRENT_SELECTION ? docsContext.id : targetId
);
const stories = useStories(storyIds, docsContext);
isLoading = stories.some((s) => !s);
return {

30
addons/essentials/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-essentials",
"version": "6.5.0-beta.1",
"version": "6.5.0-beta.4",
"description": "Curated addons to bring out the best of Storybook",
"keywords": [
"addon",
@ -39,25 +39,25 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addon-actions": "6.5.0-beta.1",
"@storybook/addon-backgrounds": "6.5.0-beta.1",
"@storybook/addon-controls": "6.5.0-beta.1",
"@storybook/addon-docs": "6.5.0-beta.1",
"@storybook/addon-measure": "6.5.0-beta.1",
"@storybook/addon-outline": "6.5.0-beta.1",
"@storybook/addon-toolbars": "6.5.0-beta.1",
"@storybook/addon-viewport": "6.5.0-beta.1",
"@storybook/addons": "6.5.0-beta.1",
"@storybook/api": "6.5.0-beta.1",
"@storybook/core-common": "6.5.0-beta.1",
"@storybook/node-logger": "6.5.0-beta.1",
"@storybook/addon-actions": "6.5.0-beta.4",
"@storybook/addon-backgrounds": "6.5.0-beta.4",
"@storybook/addon-controls": "6.5.0-beta.4",
"@storybook/addon-docs": "6.5.0-beta.4",
"@storybook/addon-measure": "6.5.0-beta.4",
"@storybook/addon-outline": "6.5.0-beta.4",
"@storybook/addon-toolbars": "6.5.0-beta.4",
"@storybook/addon-viewport": "6.5.0-beta.4",
"@storybook/addons": "6.5.0-beta.4",
"@storybook/api": "6.5.0-beta.4",
"@storybook/core-common": "6.5.0-beta.4",
"@storybook/node-logger": "6.5.0-beta.4",
"core-js": "^3.8.2",
"regenerator-runtime": "^0.13.7",
"ts-dedent": "^2.0.0"
},
"devDependencies": {
"@babel/core": "^7.12.10",
"@storybook/vue": "6.5.0-beta.1",
"@storybook/vue": "6.5.0-beta.4",
"@types/jest": "^26.0.16",
"@types/webpack-env": "^1.16.0"
},
@ -120,6 +120,6 @@
"publishConfig": {
"access": "public"
},
"gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
"sbmodern": "dist/modern/index.js"
}

20
addons/interactions/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-interactions",
"version": "6.5.0-beta.1",
"version": "6.5.0-beta.4",
"description": "Automate, test and debug user interactions",
"keywords": [
"storybook-addons",
@ -42,15 +42,15 @@
},
"dependencies": {
"@devtools-ds/object-inspector": "^1.1.2",
"@storybook/addons": "6.5.0-beta.1",
"@storybook/api": "6.5.0-beta.1",
"@storybook/client-logger": "6.5.0-beta.1",
"@storybook/components": "6.5.0-beta.1",
"@storybook/core-common": "6.5.0-beta.1",
"@storybook/core-events": "6.5.0-beta.1",
"@storybook/addons": "6.5.0-beta.4",
"@storybook/api": "6.5.0-beta.4",
"@storybook/client-logger": "6.5.0-beta.4",
"@storybook/components": "6.5.0-beta.4",
"@storybook/core-common": "6.5.0-beta.4",
"@storybook/core-events": "6.5.0-beta.4",
"@storybook/csf": "0.0.2--canary.4566f4d.1",
"@storybook/instrumenter": "6.5.0-beta.1",
"@storybook/theming": "6.5.0-beta.1",
"@storybook/instrumenter": "6.5.0-beta.4",
"@storybook/theming": "6.5.0-beta.4",
"core-js": "^3.8.2",
"global": "^4.4.0",
"jest-mock": "^27.0.6",
@ -77,7 +77,7 @@
"publishConfig": {
"access": "public"
},
"gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
"sbmodern": "dist/modern/index.js",
"storybook": {
"displayName": "Interactions",

16
addons/jest/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-jest",
"version": "6.5.0-beta.1",
"version": "6.5.0-beta.4",
"description": "React storybook addon that show component jest report",
"keywords": [
"addon",
@ -47,12 +47,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.5.0-beta.1",
"@storybook/api": "6.5.0-beta.1",
"@storybook/client-logger": "6.5.0-beta.1",
"@storybook/components": "6.5.0-beta.1",
"@storybook/core-events": "6.5.0-beta.1",
"@storybook/theming": "6.5.0-beta.1",
"@storybook/addons": "6.5.0-beta.4",
"@storybook/api": "6.5.0-beta.4",
"@storybook/client-logger": "6.5.0-beta.4",
"@storybook/components": "6.5.0-beta.4",
"@storybook/core-events": "6.5.0-beta.4",
"@storybook/theming": "6.5.0-beta.4",
"core-js": "^3.8.2",
"global": "^4.4.0",
"react-sizeme": "^3.0.1",
@ -77,7 +77,7 @@
"publishConfig": {
"access": "public"
},
"gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
"sbmodern": "dist/modern/index.js",
"storybook": {
"displayName": "Jest",

12
addons/links/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-links",
"version": "6.5.0-beta.1",
"version": "6.5.0-beta.4",
"description": "Link stories together to build demos and prototypes with your UI components",
"keywords": [
"addon",
@ -41,11 +41,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.5.0-beta.1",
"@storybook/client-logger": "6.5.0-beta.1",
"@storybook/core-events": "6.5.0-beta.1",
"@storybook/addons": "6.5.0-beta.4",
"@storybook/client-logger": "6.5.0-beta.4",
"@storybook/core-events": "6.5.0-beta.4",
"@storybook/csf": "0.0.2--canary.4566f4d.1",
"@storybook/router": "6.5.0-beta.1",
"@storybook/router": "6.5.0-beta.4",
"@types/qs": "^6.9.5",
"core-js": "^3.8.2",
"global": "^4.4.0",
@ -72,7 +72,7 @@
"publishConfig": {
"access": "public"
},
"gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
"sbmodern": "dist/modern/index.js",
"storybook": {
"displayName": "Links",

14
addons/measure/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-measure",
"version": "6.5.0-beta.1",
"version": "6.5.0-beta.4",
"description": "Inspect layouts by visualizing the box model",
"keywords": [
"storybook-addons",
@ -44,11 +44,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.5.0-beta.1",
"@storybook/api": "6.5.0-beta.1",
"@storybook/client-logger": "6.5.0-beta.1",
"@storybook/components": "6.5.0-beta.1",
"@storybook/core-events": "6.5.0-beta.1",
"@storybook/addons": "6.5.0-beta.4",
"@storybook/api": "6.5.0-beta.4",
"@storybook/client-logger": "6.5.0-beta.4",
"@storybook/components": "6.5.0-beta.4",
"@storybook/core-events": "6.5.0-beta.4",
"@storybook/csf": "0.0.2--canary.4566f4d.1",
"core-js": "^3.8.2",
"global": "^4.4.0"
@ -71,7 +71,7 @@
"publishConfig": {
"access": "public"
},
"gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
"sbmodern": "dist/modern/index.js",
"storybook": {
"displayName": "Measure",

14
addons/outline/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-outline",
"version": "6.5.0-beta.1",
"version": "6.5.0-beta.4",
"description": "Outline all elements with CSS to help with layout placement and alignment",
"keywords": [
"storybook-addons",
@ -47,11 +47,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.5.0-beta.1",
"@storybook/api": "6.5.0-beta.1",
"@storybook/client-logger": "6.5.0-beta.1",
"@storybook/components": "6.5.0-beta.1",
"@storybook/core-events": "6.5.0-beta.1",
"@storybook/addons": "6.5.0-beta.4",
"@storybook/api": "6.5.0-beta.4",
"@storybook/client-logger": "6.5.0-beta.4",
"@storybook/components": "6.5.0-beta.4",
"@storybook/core-events": "6.5.0-beta.4",
"@storybook/csf": "0.0.2--canary.4566f4d.1",
"core-js": "^3.8.2",
"global": "^4.4.0",
@ -76,7 +76,7 @@
"publishConfig": {
"access": "public"
},
"gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
"sbmodern": "dist/modern/index.js",
"storybook": {
"displayName": "Outline",

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

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storyshots",
"version": "6.5.0-beta.1",
"version": "6.5.0-beta.4",
"description": "Take a code snapshot of every story automatically with Jest",
"keywords": [
"addon",
@ -45,11 +45,11 @@
},
"dependencies": {
"@jest/transform": "^26.6.2",
"@storybook/addons": "6.5.0-beta.1",
"@storybook/addons": "6.5.0-beta.4",
"@storybook/babel-plugin-require-context-hook": "1.0.1",
"@storybook/client-api": "6.5.0-beta.1",
"@storybook/core-client": "6.5.0-beta.1",
"@storybook/core-common": "6.5.0-beta.1",
"@storybook/client-api": "6.5.0-beta.4",
"@storybook/core-client": "6.5.0-beta.4",
"@storybook/core-common": "6.5.0-beta.4",
"@storybook/csf": "0.0.2--canary.4566f4d.1",
"@types/glob": "^7.1.3",
"@types/jest": "^26.0.16",
@ -69,11 +69,11 @@
"@angular/core": "^11.2.0",
"@angular/platform-browser-dynamic": "^11.2.0",
"@emotion/jest": "^11.8.0",
"@storybook/addon-docs": "6.5.0-beta.1",
"@storybook/angular": "6.5.0-beta.1",
"@storybook/react": "6.5.0-beta.1",
"@storybook/vue": "6.5.0-beta.1",
"@storybook/vue3": "6.5.0-beta.1",
"@storybook/addon-docs": "6.5.0-beta.4",
"@storybook/angular": "6.5.0-beta.4",
"@storybook/react": "6.5.0-beta.4",
"@storybook/vue": "6.5.0-beta.4",
"@storybook/vue3": "6.5.0-beta.4",
"babel-loader": "^8.0.0",
"enzyme": "^3.11.0",
"enzyme-to-json": "^3.6.1",
@ -150,7 +150,7 @@
"publishConfig": {
"access": "public"
},
"gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
"storybook": {
"displayName": "Storyshots",
"icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",

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

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storyshots-puppeteer",
"version": "6.5.0-beta.1",
"version": "6.5.0-beta.4",
"description": "Image snapshots addition to StoryShots based on puppeteer",
"keywords": [
"addon",
@ -42,7 +42,7 @@
"dependencies": {
"@axe-core/puppeteer": "^4.2.0",
"@storybook/csf": "0.0.2--canary.4566f4d.1",
"@storybook/node-logger": "6.5.0-beta.1",
"@storybook/node-logger": "6.5.0-beta.4",
"@types/jest-image-snapshot": "^4.1.3",
"core-js": "^3.8.2",
"jest-image-snapshot": "^4.3.0",
@ -53,7 +53,7 @@
"@types/puppeteer": "^5.4.0"
},
"peerDependencies": {
"@storybook/addon-storyshots": "6.5.0-beta.1",
"@storybook/addon-storyshots": "6.5.0-beta.4",
"puppeteer": "^2.0.0 || ^3.0.0"
},
"peerDependenciesMeta": {
@ -64,5 +64,5 @@
"publishConfig": {
"access": "public"
},
"gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a"
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04"
}

18
addons/storysource/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storysource",
"version": "6.5.0-beta.1",
"version": "6.5.0-beta.4",
"description": "View a story’s source code to see how it works and paste into your app",
"keywords": [
"addon",
@ -41,13 +41,13 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.5.0-beta.1",
"@storybook/api": "6.5.0-beta.1",
"@storybook/client-logger": "6.5.0-beta.1",
"@storybook/components": "6.5.0-beta.1",
"@storybook/router": "6.5.0-beta.1",
"@storybook/source-loader": "6.5.0-beta.1",
"@storybook/theming": "6.5.0-beta.1",
"@storybook/addons": "6.5.0-beta.4",
"@storybook/api": "6.5.0-beta.4",
"@storybook/client-logger": "6.5.0-beta.4",
"@storybook/components": "6.5.0-beta.4",
"@storybook/router": "6.5.0-beta.4",
"@storybook/source-loader": "6.5.0-beta.4",
"@storybook/theming": "6.5.0-beta.4",
"core-js": "^3.8.2",
"estraverse": "^5.2.0",
"loader-utils": "^2.0.0",
@ -74,7 +74,7 @@
"publishConfig": {
"access": "public"
},
"gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
"sbmodern": "dist/modern/index.js",
"storybook": {
"displayName": "Storysource",

14
addons/toolbars/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-toolbars",
"version": "6.5.0-beta.1",
"version": "6.5.0-beta.4",
"description": "Create your own toolbar items that control story rendering",
"keywords": [
"addon",
@ -45,11 +45,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.5.0-beta.1",
"@storybook/api": "6.5.0-beta.1",
"@storybook/client-logger": "6.5.0-beta.1",
"@storybook/components": "6.5.0-beta.1",
"@storybook/theming": "6.5.0-beta.1",
"@storybook/addons": "6.5.0-beta.4",
"@storybook/api": "6.5.0-beta.4",
"@storybook/client-logger": "6.5.0-beta.4",
"@storybook/components": "6.5.0-beta.4",
"@storybook/theming": "6.5.0-beta.4",
"core-js": "^3.8.2",
"regenerator-runtime": "^0.13.7"
},
@ -68,7 +68,7 @@
"publishConfig": {
"access": "public"
},
"gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
"sbmodern": "dist/modern/manager.js",
"storybook": {
"displayName": "Toolbars",

16
addons/viewport/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-viewport",
"version": "6.5.0-beta.1",
"version": "6.5.0-beta.4",
"description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
"keywords": [
"addon",
@ -42,12 +42,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.5.0-beta.1",
"@storybook/api": "6.5.0-beta.1",
"@storybook/client-logger": "6.5.0-beta.1",
"@storybook/components": "6.5.0-beta.1",
"@storybook/core-events": "6.5.0-beta.1",
"@storybook/theming": "6.5.0-beta.1",
"@storybook/addons": "6.5.0-beta.4",
"@storybook/api": "6.5.0-beta.4",
"@storybook/client-logger": "6.5.0-beta.4",
"@storybook/components": "6.5.0-beta.4",
"@storybook/core-events": "6.5.0-beta.4",
"@storybook/theming": "6.5.0-beta.4",
"core-js": "^3.8.2",
"global": "^4.4.0",
"memoizerific": "^1.11.3",
@ -69,7 +69,7 @@
"publishConfig": {
"access": "public"
},
"gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
"sbmodern": "dist/modern/preview.js",
"storybook": {
"displayName": "Viewport",

24
app/angular/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/angular",
"version": "6.5.0-beta.1",
"version": "6.5.0-beta.4",
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -39,18 +39,18 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.5.0-beta.1",
"@storybook/api": "6.5.0-beta.1",
"@storybook/client-logger": "6.5.0-beta.1",
"@storybook/core-client": "6.5.0-beta.1",
"@storybook/core-common": "6.5.0-beta.1",
"@storybook/core-events": "6.5.0-beta.1",
"@storybook/core-server": "6.5.0-beta.1",
"@storybook/addons": "6.5.0-beta.4",
"@storybook/api": "6.5.0-beta.4",
"@storybook/client-logger": "6.5.0-beta.4",
"@storybook/core-client": "6.5.0-beta.4",
"@storybook/core-common": "6.5.0-beta.4",
"@storybook/core-events": "6.5.0-beta.4",
"@storybook/core-server": "6.5.0-beta.4",
"@storybook/csf": "0.0.2--canary.4566f4d.1",
"@storybook/docs-tools": "6.5.0-beta.1",
"@storybook/node-logger": "6.5.0-beta.1",
"@storybook/docs-tools": "6.5.0-beta.4",
"@storybook/node-logger": "6.5.0-beta.4",
"@storybook/semver": "^7.3.2",
"@storybook/store": "6.5.0-beta.1",
"@storybook/store": "6.5.0-beta.4",
"@types/node": "^14.14.20 || ^16.0.0",
"@types/react": "^16.14.23",
"@types/react-dom": "^16.9.14",
@ -132,5 +132,5 @@
"access": "public"
},
"builders": "dist/ts3.9/builders/builders.json",
"gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a"
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04"
}

12
app/angular/src/builders/utils/build-standalone-errors-handler.ts
View File

@ -21,11 +21,11 @@ export const buildStandaloneErrorHandler = (error: any): any => {
logger.line();
return error.close
? dedent`
FATAL broken build!, will close the process,
Fix the error below and restart storybook.
`
FATAL broken build!, will close the process,
Fix the error below and restart storybook.
`
: dedent`
Broken build, fix the error above.
You may need to refresh the browser.
`;
Broken build, fix the error above.
You may need to refresh the browser.
`;
};

14
app/ember/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/ember",
"version": "6.5.0-beta.1",
"version": "6.5.0-beta.4",
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
"homepage": "https://github.com/storybookjs/storybook/tree/main/app/ember",
"bugs": {
@ -36,11 +36,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/core-client": "6.5.0-beta.1",
"@storybook/core-common": "6.5.0-beta.1",
"@storybook/core-server": "6.5.0-beta.1",
"@storybook/docs-tools": "6.5.0-beta.1",
"@storybook/store": "6.5.0-beta.1",
"@storybook/core-client": "6.5.0-beta.4",
"@storybook/core-common": "6.5.0-beta.4",
"@storybook/core-server": "6.5.0-beta.4",
"@storybook/docs-tools": "6.5.0-beta.4",
"@storybook/store": "6.5.0-beta.4",
"core-js": "^3.8.2",
"global": "^4.4.0",
"react": "16.14.0",
@ -61,6 +61,6 @@
"publishConfig": {
"access": "public"
},
"gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
"sbmodern": "dist/modern/client/index.js"
}

18
app/html/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/html",
"version": "6.5.0-beta.1",
"version": "6.5.0-beta.4",
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -39,14 +39,14 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.5.0-beta.1",
"@storybook/core-client": "6.5.0-beta.1",
"@storybook/core-common": "6.5.0-beta.1",
"@storybook/core-server": "6.5.0-beta.1",
"@storybook/addons": "6.5.0-beta.4",
"@storybook/core-client": "6.5.0-beta.4",
"@storybook/core-common": "6.5.0-beta.4",
"@storybook/core-server": "6.5.0-beta.4",
"@storybook/csf": "0.0.2--canary.4566f4d.1",
"@storybook/docs-tools": "6.5.0-beta.1",
"@storybook/preview-web": "6.5.0-beta.1",
"@storybook/store": "6.5.0-beta.1",
"@storybook/docs-tools": "6.5.0-beta.4",
"@storybook/preview-web": "6.5.0-beta.4",
"@storybook/store": "6.5.0-beta.4",
"@types/node": "^14.14.20 || ^16.0.0",
"@types/webpack-env": "^1.16.0",
"core-js": "^3.8.2",
@ -71,6 +71,6 @@
"publishConfig": {
"access": "public"
},
"gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
"sbmodern": "dist/modern/client/index.js"
}

14
app/preact/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/preact",
"version": "6.5.0-beta.1",
"version": "6.5.0-beta.4",
"description": "Storybook for Preact: Develop Preact Component in isolation.",
"keywords": [
"storybook"
@ -40,12 +40,12 @@
},
"dependencies": {
"@babel/plugin-transform-react-jsx": "^7.12.12",
"@storybook/addons": "6.5.0-beta.1",
"@storybook/core-client": "6.5.0-beta.1",
"@storybook/core-common": "6.5.0-beta.1",
"@storybook/core-server": "6.5.0-beta.1",
"@storybook/addons": "6.5.0-beta.4",
"@storybook/core-client": "6.5.0-beta.4",
"@storybook/core-common": "6.5.0-beta.4",
"@storybook/core-server": "6.5.0-beta.4",
"@storybook/csf": "0.0.2--canary.4566f4d.1",
"@storybook/store": "6.5.0-beta.1",
"@storybook/store": "6.5.0-beta.4",
"@types/node": "^14.14.20 || ^16.0.0",
"@types/webpack-env": "^1.16.0",
"core-js": "^3.8.2",
@ -71,6 +71,6 @@
"publishConfig": {
"access": "public"
},
"gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
"sbmodern": "dist/modern/client/index.js"
}

22
app/react/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/react",
"version": "6.5.0-beta.1",
"version": "6.5.0-beta.4",
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -43,17 +43,17 @@
"@babel/preset-flow": "^7.12.1",
"@babel/preset-react": "^7.12.10",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
"@storybook/addons": "6.5.0-beta.1",
"@storybook/client-logger": "6.5.0-beta.1",
"@storybook/core-client": "6.5.0-beta.1",
"@storybook/core-common": "6.5.0-beta.1",
"@storybook/core-server": "6.5.0-beta.1",
"@storybook/addons": "6.5.0-beta.4",
"@storybook/client-logger": "6.5.0-beta.4",
"@storybook/core-client": "6.5.0-beta.4",
"@storybook/core-common": "6.5.0-beta.4",
"@storybook/core-server": "6.5.0-beta.4",
"@storybook/csf": "0.0.2--canary.4566f4d.1",
"@storybook/docs-tools": "6.5.0-beta.1",
"@storybook/node-logger": "6.5.0-beta.1",
"@storybook/docs-tools": "6.5.0-beta.4",
"@storybook/node-logger": "6.5.0-beta.4",
"@storybook/react-docgen-typescript-plugin": "1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0",
"@storybook/semver": "^7.3.2",
"@storybook/store": "6.5.0-beta.1",
"@storybook/store": "6.5.0-beta.4",
"@types/estree": "^0.0.51",
"@types/node": "^14.14.20 || ^16.0.0",
"@types/webpack-env": "^1.16.0",
@ -79,11 +79,11 @@
},
"devDependencies": {
"@types/util-deprecate": "^1.0.0",
"jest-specific-snapshot": "^4.0.0",
"webpack": "4"
},
"peerDependencies": {
"@babel/core": "^7.11.5",
"jest-specific-snapshot": "^4.0.0",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
"require-from-string": "^2.0.2"
@ -114,6 +114,6 @@
"publishConfig": {
"access": "public"
},
"gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
"sbmodern": "dist/modern/client/index.js"
}

2
app/react/src/client/preview/render.tsx
View File

@ -48,7 +48,7 @@ const renderElement = async (node: ReactElement, el: Element) => {
};
const canUseNewReactRootApi =
reactDomVersion.startsWith('18') || reactDomVersion.startsWith('0.0.0');
reactDomVersion && (reactDomVersion.startsWith('18') || reactDomVersion.startsWith('0.0.0'));
const shouldUseNewRootApi = FRAMEWORK_OPTIONS?.legacyRootApi !== true;

22
app/server/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/server",
"version": "6.5.0-beta.1",
"version": "6.5.0-beta.4",
"description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -39,16 +39,16 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.5.0-beta.1",
"@storybook/api": "6.5.0-beta.1",
"@storybook/client-api": "6.5.0-beta.1",
"@storybook/core-client": "6.5.0-beta.1",
"@storybook/core-common": "6.5.0-beta.1",
"@storybook/core-server": "6.5.0-beta.1",
"@storybook/addons": "6.5.0-beta.4",
"@storybook/api": "6.5.0-beta.4",
"@storybook/client-api": "6.5.0-beta.4",
"@storybook/core-client": "6.5.0-beta.4",
"@storybook/core-common": "6.5.0-beta.4",
"@storybook/core-server": "6.5.0-beta.4",
"@storybook/csf": "0.0.2--canary.4566f4d.1",
"@storybook/node-logger": "6.5.0-beta.1",
"@storybook/preview-web": "6.5.0-beta.1",
"@storybook/store": "6.5.0-beta.1",
"@storybook/node-logger": "6.5.0-beta.4",
"@storybook/preview-web": "6.5.0-beta.4",
"@storybook/store": "6.5.0-beta.4",
"@types/node": "^14.14.20 || ^16.0.0",
"@types/webpack-env": "^1.16.0",
"core-js": "^3.8.2",
@ -71,6 +71,6 @@
"publishConfig": {
"access": "public"
},
"gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
"sbmodern": "dist/modern/client/index.js"
}

20
app/svelte/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/svelte",
"version": "6.5.0-beta.1",
"version": "6.5.0-beta.4",
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -40,15 +40,15 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.5.0-beta.1",
"@storybook/client-logger": "6.5.0-beta.1",
"@storybook/core-client": "6.5.0-beta.1",
"@storybook/core-common": "6.5.0-beta.1",
"@storybook/core-server": "6.5.0-beta.1",
"@storybook/addons": "6.5.0-beta.4",
"@storybook/client-logger": "6.5.0-beta.4",
"@storybook/core-client": "6.5.0-beta.4",
"@storybook/core-common": "6.5.0-beta.4",
"@storybook/core-server": "6.5.0-beta.4",
"@storybook/csf": "0.0.2--canary.4566f4d.1",
"@storybook/docs-tools": "6.5.0-beta.1",
"@storybook/node-logger": "6.5.0-beta.1",
"@storybook/store": "6.5.0-beta.1",
"@storybook/docs-tools": "6.5.0-beta.4",
"@storybook/node-logger": "6.5.0-beta.4",
"@storybook/store": "6.5.0-beta.4",
"core-js": "^3.8.2",
"global": "^4.4.0",
"loader-utils": "^2.0.0",
@ -78,6 +78,6 @@
"publishConfig": {
"access": "public"
},
"gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
"sbmodern": "dist/modern/client/index.js"
}

18
app/vue/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/vue",
"version": "6.5.0-beta.1",
"version": "6.5.0-beta.4",
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -39,14 +39,14 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.5.0-beta.1",
"@storybook/client-logger": "6.5.0-beta.1",
"@storybook/core-client": "6.5.0-beta.1",
"@storybook/core-common": "6.5.0-beta.1",
"@storybook/core-server": "6.5.0-beta.1",
"@storybook/addons": "6.5.0-beta.4",
"@storybook/client-logger": "6.5.0-beta.4",
"@storybook/core-client": "6.5.0-beta.4",
"@storybook/core-common": "6.5.0-beta.4",
"@storybook/core-server": "6.5.0-beta.4",
"@storybook/csf": "0.0.2--canary.4566f4d.1",
"@storybook/docs-tools": "6.5.0-beta.1",
"@storybook/store": "6.5.0-beta.1",
"@storybook/docs-tools": "6.5.0-beta.4",
"@storybook/store": "6.5.0-beta.4",
"@types/node": "^14.14.20 || ^16.0.0",
"@types/webpack-env": "^1.16.0",
"core-js": "^3.8.2",
@ -81,6 +81,6 @@
"publishConfig": {
"access": "public"
},
"gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
"sbmodern": "dist/modern/client/index.js"
}

16
app/vue3/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/vue3",
"version": "6.5.0-beta.1",
"version": "6.5.0-beta.4",
"description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -39,13 +39,13 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.5.0-beta.1",
"@storybook/core-client": "6.5.0-beta.1",
"@storybook/core-common": "6.5.0-beta.1",
"@storybook/core-server": "6.5.0-beta.1",
"@storybook/addons": "6.5.0-beta.4",
"@storybook/core-client": "6.5.0-beta.4",
"@storybook/core-common": "6.5.0-beta.4",
"@storybook/core-server": "6.5.0-beta.4",
"@storybook/csf": "0.0.2--canary.4566f4d.1",
"@storybook/docs-tools": "6.5.0-beta.1",
"@storybook/store": "6.5.0-beta.1",
"@storybook/docs-tools": "6.5.0-beta.4",
"@storybook/store": "6.5.0-beta.4",
"@types/node": "^14.14.20 || ^16.0.0",
"@types/webpack-env": "^1.16.0",
"core-js": "^3.8.2",
@ -78,6 +78,6 @@
"publishConfig": {
"access": "public"
},
"gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
"sbmodern": "dist/modern/client/index.js"
}

22
app/web-components/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/web-components",
"version": "6.5.0-beta.1",
"version": "6.5.0-beta.4",
"description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
"keywords": [
"lit-html",
@ -44,16 +44,16 @@
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-syntax-import-meta": "^7.10.4",
"@babel/preset-env": "^7.12.11",
"@storybook/addons": "6.5.0-beta.1",
"@storybook/client-api": "6.5.0-beta.1",
"@storybook/client-logger": "6.5.0-beta.1",
"@storybook/core-client": "6.5.0-beta.1",
"@storybook/core-common": "6.5.0-beta.1",
"@storybook/core-server": "6.5.0-beta.1",
"@storybook/addons": "6.5.0-beta.4",
"@storybook/client-api": "6.5.0-beta.4",
"@storybook/client-logger": "6.5.0-beta.4",
"@storybook/core-client": "6.5.0-beta.4",
"@storybook/core-common": "6.5.0-beta.4",
"@storybook/core-server": "6.5.0-beta.4",
"@storybook/csf": "0.0.2--canary.4566f4d.1",
"@storybook/docs-tools": "6.5.0-beta.1",
"@storybook/preview-web": "6.5.0-beta.1",
"@storybook/store": "6.5.0-beta.1",
"@storybook/docs-tools": "6.5.0-beta.4",
"@storybook/preview-web": "6.5.0-beta.4",
"@storybook/store": "6.5.0-beta.4",
"@types/node": "^14.14.20 || ^16.0.0",
"@types/webpack-env": "^1.16.0",
"babel-plugin-bundled-import-meta": "^0.3.1",
@ -77,6 +77,6 @@
"publishConfig": {
"access": "public"
},
"gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
"sbmodern": "dist/modern/client/index.js"
}

14
docs/api/cli-options.md
View File

@ -18,10 +18,10 @@ Usage: start-storybook [options]
| `-V`, `--version` | Output the version number <br/>`start-storybook -V` |
| `-p`, `--port [number]` | Port to run Storybook <br/>`start-storybook -p 9009` |
| `-h`, `--host [string]` | Host to run Storybook <br/>`start-storybook -h my-host.com` |
| `-s`, `--static-dir` | **Deprecated** [see note](#static-dir-deprecation). Directory where to load static files from, comma-separated list <br/>`start-storybook -s public` |
| `-s`, `--static-dir` | **Deprecated** [see note](#static-dir-deprecation). Directory where to load static files from, comma-separated list<br/>`start-storybook -s public` |
| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from <br/>`start-storybook -c .storybook` |
| `--https` | Serve Storybook over HTTPS. Note: You must provide your own certificate information. <br/>`start-storybook --https` |
| `--ssl-ca` | Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate) <br/>`start-storybook --ssl-ca my-certificate` |
| `--https` | Serve Storybook over HTTPS. Note: You must provide your own certificate information<br/>`start-storybook --https` |
| `--ssl-ca` | Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)<br/>`start-storybook --ssl-ca my-certificate` |
| `--ssl-cert` | Provide an SSL certificate. (Required with --https)<br/>`start-storybook --ssl-cert my-ssl-certificate` |
| `--ssl-key` | Provide an SSL key. (Required with --https)<br/>`start-storybook --ssl-key my-ssl-key` |
| `--smoke-test` | Exit after successful start<br/>`start-storybook --smoke-test` |
@ -32,7 +32,8 @@ Usage: start-storybook [options]
| `--debug-webpack` | Display final webpack configurations for debugging purposes<br/>`start-storybook --debug-webpack` |
| `--webpack-stats-json` | Write Webpack Stats JSON to disk<br/>`start-storybook --webpack-stats-json /tmp/webpack-stats` |
| `--docs` | Starts Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#preview-storybooks-documentation)<br/>`start-storybook --docs` |
| `--no-manager-cache` | Disables Storybook's manager caching mechanism. See note below.<br/>`start-storybook --no-manager-cache` |
| `--no-manager-cache` | Disables Storybook's manager caching mechanism. See note below<br/>`start-storybook --no-manager-cache` |
| `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md)<br/>`start-storybook --disable-telemetry` |
<div class="aside">
💡 The flag <code>--no-manager-cache</code> disables the internal caching of Storybook and can severely impact your Storybook loading time, so only use it when you need to refresh Storybook's UI, such as when editing themes.
@ -54,15 +55,16 @@ Usage: build-storybook [options]
| ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `-h`, `--help` | Output usage information<br/>`build-storybook --help` |
| `-V`, `--version` | Output the version number<br/>`build-storybook -V` |
| `-s`, `--static-dir` | **Deprecated** [see note](#static-dir-deprecation). Directory where to load static files from, comma-separated list<br/>`build-storybook -s public` |
| `-s`, `--static-dir` | **Deprecated** [see note](#static-dir-deprecation).<br/> Directory where to load static files from, comma-separated list<br/>`build-storybook -s public` |
| `-o`, `--output-dir [dir-name]` | Directory where to store built files<br/>`build-storybook -o /my-deployed-storybook` |
| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from<br/>`build-storybook -c .storybook` |
| `--loglevel [level]` | Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent]<br/>`build-storybook --loglevel warn` |
| `--loglevel [level]` | Controls level of logging during build.<br/> Available options: `silly`, `verbose`, `info` (default), `warn`, `error`, `silent`<br/>`build-storybook --loglevel warn` |
| `--quiet` | Suppress verbose build output<br/>`build-storybook --quiet` |
| `--no-dll` | Do not use dll reference (no-op)<br/>`build-storybook --no-dll` |
| `--debug-webpack` | Display final webpack configurations for debugging purposes<br/>`build-storybook --debug-webpack` |
| `--webpack-stats-json` | Write Webpack Stats JSON to disk<br/>`build-storybook --webpack-stats-json /my-storybook/webpack-stats` |
| `--docs` | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#publish-storybooks-documentation)<br/>`build-storybook --docs` |
| `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).<br/>`build-storybook --disable-telemetry` |
<div class="aside">
💡 If you're using npm instead of yarn to publish Storybook, the commands work slightly different. For example, <code>npm run build-storybook -- -o ./path/to/build</code>.

3
docs/configure/features-and-behavior.md
View File

@ -54,4 +54,5 @@ You can use URL parameters to configure some of the available features:
| **isFullscreen** | `full` | `true` |
| **showNav** | `nav` | `false` |
| **showPanel** | `panel` | `false`, `right`, `bottom` |
| **selectedPanel** | `addonPanel` | Any panel ID |
| **selectedPanel** | `addonPanel` | Any panel ID |
| **showTabs** | `tabs` | `true` |

174
docs/configure/telemetry.md Normal file
View File

@ -0,0 +1,174 @@
---
title: 'Telemetry'
---
Storybook collects completely anonymous data to help us improve user experience. Participation in this anonymous program is optional, and you may opt-out if you'd not like to share any information.
## Why is telemetry collected?
Hundreds of thousands of developers use Storybook daily to build, test, and document components. Storybook is framework agnostic and integrates with the front-end ecosystem:
- **JavaScript frameworks** such as [React](https://reactjs.org/), [Vue](https://vuejs.org/), and [Svelte](https://svelte.dev/)
- **Libraries** such as [Styled-Components](https://styled-components.com/), [Tailwind](https://tailwindcss.com/), [Redux](https://redux.js.org/)
- **Design tools** such as [Figma](https://figma.com/), [Sketch](https://www.sketch.com/), [Zeplin](https://zeplin.io/) and [InVision](https://www.invisionapp.com/)
- **Workflow tools** such as [Notion](https://www.notion.so/product), [Confluence](https://www.atlassian.com/software/confluence), and [Jira](https://www.atlassian.com/software/jira)
In the past, our improvement process relied on manually gathering feedback. But with a growing userbase and the need to support a wide variety of integrations, we need a more accurate method for gauging Storybook usage and pain points.
These telemetry data help us (the maintainers) to prioritize the highest impact projects. That allows us to keep up with trends in the front-end ecosystem and verify that our community's hard work achieves the intended result.
## What is being collected?
We collect general usage details, including command invocation, Storybook version, addons, and the view layer.
Specifically, we track the following information in our telemetry events:
- Timestamp of the occurrence.
- Command invoked (e.g., `init`, `upgrade`, `start-storybook`).
- Storybook unique identifier: One-way hash generated during Storybook installation process.
- One way hash of the IP address where the event occurred for spam detection.
- Story count.
- Storybook version.
- Storybook metadata:
- Language (e.g., TypeScript, JavaScript).
- Supported view layers (e.g., React, Vue, Angular, Svelte).
- Builder (e.g., Webpack4, Webpack5, Vite).
- Meta framework (e.g., [Next](https://nextjs.org/), [Gatsby](https://www.gatsbyjs.com/), [CRA](https://create-react-app.dev/)).
- [Addons](/addons) (e.g., [Essentials](../essentials/introduction), [Accessibility](https://storybook.js.org/addons/@storybook/addon-a11y/)).
- [Feature flags](./overview.md#feature-flags) (e.g., `buildStoriesJson`).
- Whether the command was invoked on CI or not.
Access to the raw data is highly controlled, limited to select members of Storybook's core team who maintain the telemetry. We cannot identify individual users from the dataset: it is anonymized and untraceable back to the user.
## What about sensitive information?
We take your privacy and our security very seriously. We perform additional steps to ensure that secure data (e.g., environment variables or other forms of sensitive data) **do not** make their way into our analytics. You can view all the information we collect by setting the `STORYBOOK_TELEMETRY_DEBUG` to `1` to print out the information gathered. For example:
<!-- prettier-ignore-start -->
<CodeSnippets
paths={[
'common/storybook-telemetry-preview-event.yarn.js.mdx',
'common/storybook-telemetry-preview-event.npm.js.mdx',
]}
/>
<!-- prettier-ignore-end -->
Will generate the following output:
```json
{
"anonymousId": "8bcfdfd5f9616a1923dd92adf89714331b2d18693c722e05152a47f8093392bb",
"eventType": "start",
"payload": {
"storyIndex": {
"storyCount": 4,
"version": 3
}
},
"inCI": false,
"metadata": {
"generatedAt": 1648233198722,
"builder": {
"name": "webpack4"
},
"hasCustomBabel": false,
"hasCustomWebpack": true,
"hasStaticDirs": true,
"hasStorybookEslint": false,
"refCount": 0,
"metaFramework": {
"name": "CRA",
"packageName": "react-scripts",
"version": "4.0.3"
},
"features": {
"buildStoriesJson": true
},
"storybookVersion": "6.5.0",
"language": "typescript",
"storybookPackages": {
"@storybook/addons": {
"version": "6.5.0"
},
"@storybook/builder-webpack4": {
"version": "6.5.0"
},
"@storybook/react": {
"version": "6.5.0"
}
},
"framework": {
"name": "react"
},
"addons": {
"@storybook/preset-create-react-app": {
"version": "3.2.0"
},
"@storybook/addon-ie11": {
"version": "0.0.7--canary.5e87b64.0"
},
"@storybook/addon-essentials": {
"options": {
"viewport": false
},
"version": "6.5.0"
}
}
}
}
```
## Will this data be shared?
The data we collect is anonymous, not traceable to the source, and only meaningful in aggregate form. No data we collect is personally identifiable.
In the future, we plan to share relevant data with the community through public dashboards (or similar data representation formats).
## How to opt-out
You may opt-out of the telemetry by setting Storybook's configuration element `disableTelemetry` to `true`, using the `--disable-telemetry` flag, or setting the environment variable`STORYBOOK_DISABLE_TELEMETRY` to `1`. For example:
<!-- prettier-ignore-start -->
<CodeSnippets
paths={[
'common/storybook-main-disable-telemetry.main-js.js.mdx',
'common/storybook-main-disable-telemetry.main-ts.ts.mdx',
'common/storybook-disable-telemetry-flag.yarn.js.mdx',
'common/storybook-disable-telemetry-flag.npm.js.mdx',
'common/storybook-disable-telemetry-env.env-var.js.mdx',
]}
/>
<!-- prettier-ignore-end -->
## Crash reports (disabled by default)
In addition to general usage telemetry, you may also choose to share crash reports. Storybook will then sanitize the error object (removing all user paths) and append it to the telemetry event. To enable crash reporting, you can set the `enableCrashReports` configuration element to `true`, using the `--enable-crash-reports` flag, or set the `STORYBOOK_ENABLE_CRASH_REPORTS` environment variable to `1`. For example:
<!-- prettier-ignore-start -->
<CodeSnippets
paths={[
'common/storybook-telemetry-main-enable-crash-reports.main-js.js.mdx',
'common/storybook-telemetry-main-enable-crash-reports.main-ts.ts.mdx',
'common/storybook-telemetry-storybook-enable-crash-reports.yarn.js.mdx',
'common/storybook-telemetry-storybook-enable-crash-reports.npm.js.mdx',
'common/storybook-telemetry-storybook-enable-crash-reports.env-var.js.mdx',
]}
/>
<!-- prettier-ignore-end -->
Generates the following item in the telemetry event:
<!-- prettier-ignore-start -->
<CodeSnippets
paths={[
'common/storybook-telemetry-crash-report-event.js.mdx',
]}
/>
<!-- prettier-ignore-end -->

8
docs/contribute/code.md
View File

@ -59,7 +59,9 @@ yarn build
When asked if you want to start the build in `watch` mode, answer **yes** to develop in interactive mode. Afterward, choose which packages you want to build. For example, if you're going to work on a feature for `@storybook/addon-docs`, you might want to select `@storybook/addon-docs` and `@storybook/components`.
<div class="aside">
💡 Build's `watch' mode is great for interactive development. However, for performance reasons it only transpiles your code and doesn't execute the TypeScript compiler. If something isn't working as expected, try running `build` <b>WITHOUT</b> watch mode: it will re-generate TypeScript types and also perform type checking for you.
💡 Build's `watch` mode is great for interactive development. However, for performance reasons it only transpiles your code and doesn't execute the TypeScript compiler. If something isn't working as expected, try running `build` <b>WITHOUT</b> watch mode: it will re-generate TypeScript types and also perform type checking for you.
</div>
![Storybook package selector](./storybook-build-packages-selection-optimized.png)
@ -144,14 +146,14 @@ npx sb@next link --local /path/to/local-repro-directory
```
<div class="aside">
💡 The `sb link` command relies on `yarn 2` linking under the hood. It requires that the local repro is using `yarn 2`, which will be the case if you're using the [`sb repro` command](./how-to-reproduce) per our contributing guidelines. If you are trying to link to a non-`yarn 2` project, linking will fail.
💡 The <code>sb link</code> command relies on <code>yarn 2</code> linking under the hood. It requires that the local repro is using <code>yarn 2</code>, which will be the case if you're using the [<code>sb repro</code> command](./how-to-reproduce) per our contributing guidelines. If you are trying to link to a non-<code>yarn 2</code> project, linking will fail.
</div>
## Troubleshooting
<details>
<summary>`yarn build --all --watch` watches everything but is resource-intensive</summary>
<summary><code>yarn build --all --watch</code> watches everything but is resource-intensive</summary>
It's troublesome to know which packages you're going to change ahead of time, and watching all of them can be highly demanding, even on modern machines. If you're working on a powerful enough machine, you can use `yarn build --all --watch` instead of `yarn build`.

3
docs/get-started/install.md
View File

@ -41,6 +41,7 @@ The command above will make the following changes to your local environment:
- 🛠 Setup the necessary scripts to run and build Storybook.
- 🛠 Add the default Storybook configuration.
- 📝 Add some boilerplate stories to get you started.
- 📡 Set up telemetry to help us improve Storybook. Read more about it [here](../configure/telemetry.md).
Depending on your framework, first, build your app and then check that everything worked by running:
@ -92,4 +93,4 @@ If all else fails, try asking for [help](https://storybook.js.org/support)
</details>
Now that you installed Storybook successfully, let’s take a look at a story that was written for us.
Now that you installed Storybook successfully, let’s take a look at a story that was written for us.

2
docs/snippets/common/component-story-custom-source.js.mdx
View File

@ -12,7 +12,7 @@ export default {
component: Button,
};
export const Template = (args) => ({
const Template = (args) => ({
//👇 Your template goes here
});

3
docs/snippets/common/storybook-disable-telemetry-env.env-var.js.mdx Normal file
View File

@ -0,0 +1,3 @@
```shell
STORYBOOK_DISABLE_TELEMETRY=1 yarn storybook
```

3
docs/snippets/common/storybook-disable-telemetry-flag.npm.js.mdx Normal file
View File

@ -0,0 +1,3 @@
```shell
npm run storybook -- --disable-telemetry
```

3
docs/snippets/common/storybook-disable-telemetry-flag.yarn.js.mdx Normal file
View File

@ -0,0 +1,3 @@
```shell
yarn storybook --disable-telemetry
```

18
docs/snippets/common/storybook-main-disable-telemetry.main-js.js.mdx Normal file
View File

@ -0,0 +1,18 @@
```js
// .storybook/main.js
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'@storybook/preset-create-react-app',
],
framework: '@storybook/react',
core: {
builder: 'webpack5',
disableTelemetry: true, // 👈 Disables telemetry
},
};
```

23
docs/snippets/common/storybook-main-disable-telemetry.main-ts.ts.mdx Normal file
View File

@ -0,0 +1,23 @@
```ts
// .storybook/main.ts
// Imports Storybook's configuration API
import type { StorybookConfig } from '@storybook/core-common';
const config: StorybookConfig = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'@storybook/preset-create-react-app',
],
framework: '@storybook/react',
core: {
builder: 'webpack5',
disableTelemetry: true, // 👈 Disables telemetry
},
};
module.exports = config;
```

13
docs/snippets/common/storybook-telemetry-crash-report-event.js.mdx Normal file
View File

@ -0,0 +1,13 @@
```js
{
stack: 'Error: Your button is not working\n' +
' at Object.<anonymous> ($SNIP/test.js:39:27)\n' +
' at Module._compile (node:internal/modules/cjs/loader:1103:14)\n' +
' at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)\n' +
' at Module.load (node:internal/modules/cjs/loader:981:32)\n' +
' at Function.Module._load (node:internal/modules/cjs/loader:822:12)\n' +
' at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)\n' +
' at node:internal/main/run_main_module:17:47',
message: 'Your button is not working'
}
```

18
docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-js.js.mdx Normal file
View File

@ -0,0 +1,18 @@
```js
// .storybook/main.js
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'@storybook/preset-create-react-app',
],
framework: '@storybook/react',
core: {
builder: 'webpack5',
enableCrashReports: true, // 👈 Appends the crash reports to the telemetry events
},
};
```

23
docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-ts.ts.mdx Normal file
View File

@ -0,0 +1,23 @@
```ts
// .storybook/main.ts
// Imports Storybook's configuration API
import type { StorybookConfig } from '@storybook/core-common';
const config: StorybookConfig = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'@storybook/preset-create-react-app',
],
framework: '@storybook/react',
core: {
builder: 'webpack5',
enableCrashReports: true, // 👈 Appends the crash reports to the telemetry events
},
};
module.exports = config;
```

3
docs/snippets/common/storybook-telemetry-preview-event.npm.js.mdx Normal file
View File

@ -0,0 +1,3 @@
```shell
STORYBOOK_TELEMETRY_DEBUG=1 npm run storybook
```

3
docs/snippets/common/storybook-telemetry-preview-event.yarn.js.mdx Normal file
View File

@ -0,0 +1,3 @@
```shell
STORYBOOK_TELEMETRY_DEBUG=1 yarn storybook
```

3
docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.env-var.js.mdx Normal file
View File

@ -0,0 +1,3 @@
```shell
STORYBOOK_ENABLE_CRASH_REPORTS=1 yarn storybook
```

3
docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.npm.js.mdx Normal file
View File

@ -0,0 +1,3 @@
```shell
npm run storybook -- --enable-crash-reports
```

3
docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.yarn.js.mdx Normal file
View File

@ -0,0 +1,3 @@
```shell
yarn storybook --enable-crash-reports
```

2
docs/snippets/vue/badge-story-starter-example.mdx.mdx
View File

@ -76,4 +76,4 @@ with unique URLs and isolated snapshot tests.
}}
</Story>
</Canvas>
```
```

2
docs/snippets/vue/badge-story.mdx-2.mdx.mdx
View File

@ -69,4 +69,4 @@ with unique URLs, which is great for review and testing.
{Template.bind({})}
</Story>
</Canvas>
```
```

2
docs/snippets/vue/button-group-story.2.js.mdx
View File

@ -1,5 +1,5 @@
```js
//ButtonGroup.stories.js
// ButtonGroup.stories.js
import ButtonGroup from './ButtonGroup.vue';

2
docs/snippets/vue/button-group-story.3.js.mdx
View File

@ -1,5 +1,5 @@
```js
//ButtonGroup.stories.js
// ButtonGroup.stories.js
import ButtonGroup from './ButtonGroup.vue';

31
docs/snippets/vue/button-group-story.ts-2.ts.mdx Normal file
View File

@ -0,0 +1,31 @@
```ts
// ButtonGroup.stories.ts
import ButtonGroup from './ButtonGroup.vue';
import { Meta, StoryFn } from '@storybook/vue';
//👇 Imports the Button stories
import * as ButtonStories from './Button.stories';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'ButtonGroup',
component: ButtonGroup,
} as Meta<typeof Button>;
const Template: StoryFn<typeof Button> = (args, { argTypes }) => ({
components: { ButtonGroup },
props: Object.keys(argTypes),
template: '<ButtonGroup v-bind="$props" />',
});
export const Pair = Template.bind({});
Pair.args = {
buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
orientation: 'horizontal',
};
```

33
docs/snippets/vue/button-group-story.ts-3.ts.mdx Normal file
View File

@ -0,0 +1,33 @@
```ts
// ButtonGroup.stories.ts
import ButtonGroup from './ButtonGroup.vue';
import { Meta, StoryFn } from '@storybook/vue3';
//👇 Imports the Button stories
import * as ButtonStories from './Button.stories';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'ButtonGroup',
component: ButtonGroup,
} as Meta<typeof Button>;
const Template: StoryFn<typeof Button> = (args) => ({
components: { ButtonGroup },
setup() {
return { args };
},
template: '<ButtonGroup v-bind="args" />',
});
export const Pair = Template.bind({});
Pair.args = {
buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
orientation: 'horizontal',
};
```

17
docs/snippets/vue/button-story-component-decorator.ts-2.ts.mdx Normal file
View File

@ -0,0 +1,17 @@
```ts
// Button.stories.ts
import Button from './Button.vue';
import { Meta } from '@storybook/vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
decorators: [() => ({ template: '<div style="margin: 3em;"><story /></div>' })],
} as Meta<typeof Button>;
```

17
docs/snippets/vue/button-story-component-decorator.ts-3.ts.mdx Normal file
View File

@ -0,0 +1,17 @@
```ts
// Button.stories.ts
import Button from './Button.vue';
import { Meta } from '@storybook/vue3';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
decorators: [() => ({ template: '<div style="margin: 3em;"><story /></div>' })],
} as Meta<typeof Button>;
```

16
docs/snippets/vue/button-story-default-export-with-component.ts-2.ts.mdx Normal file
View File

@ -0,0 +1,16 @@
```ts
// Button.stories.ts
import Button from './Button.vue';
import { Meta } from '@storybook/vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
} as Meta<typeof Button>;
```

16
docs/snippets/vue/button-story-default-export-with-component.ts-3.ts.mdx Normal file
View File

@ -0,0 +1,16 @@
```ts
// Button.stories.ts
import Button from './Button.vue';
import { Meta } from '@storybook/vue3';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
} as Meta<typeof Button>;
```

2
docs/snippets/vue/button-story-rename-story.js.mdx
View File

@ -17,4 +17,4 @@ export const Primary = () => ({
template: '<Button primary label="Button" />',
});
Primary.storyName = 'I am the primary';
```
```

22
docs/snippets/vue/button-story-rename-story.ts-2.ts.mdx Normal file
View File

@ -0,0 +1,22 @@
```ts
// Button.stories.ts
import Button from './Button.vue';
import { Meta, StoryFn } from '@storybook/vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
} as Meta<typeof Button>;
export const Primary: StoryFn<typeof Button> = () => ({
components: { Button },
template: '<Button primary label="Button" />',
});
Primary.storyName = 'I am the primary';
```

22
docs/snippets/vue/button-story-rename-story.ts-3.ts.mdx Normal file
View File

@ -0,0 +1,22 @@
```ts
// Button.stories.ts
import Button from './Button.vue';
import { Meta, StoryFn } from '@storybook/vue3';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
} as Meta<typeof Button>;
export const Primary: StoryFn<typeof Button> = () => ({
components: { Button },
template: '<Button primary label="Button" />',
});
Primary.storyName = 'I am the primary';
```

33
docs/snippets/vue/button-story-using-args.ts-2.ts.mdx Normal file
View File

@ -0,0 +1,33 @@
```ts
// Button.stories.ts
import Button from './Button.vue';
import { Meta, StoryFn } from '@storybook/vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
} as Meta<typeof Button>;
//👇 We create a “template” of how args map to rendering
const Template: StoryFn<typeof Button> = (args, { argTypes }) => ({
components: { Button },
props: Object.keys(argTypes),
template: '<Button v-bind="$props" />',
});
//👇 Each story then reuses that template
export const Primary = Template.bind({});
Primary.args = { background: '#ff0', label: 'Button' };
export const Secondary = Template.bind({});
Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
export const Tertiary = Template.bind({});
Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
```

35
docs/snippets/vue/button-story-using-args.ts-3.ts.mdx Normal file
View File

@ -0,0 +1,35 @@
```ts
// Button.stories.ts
import Button from './Button.vue';
import { Meta, StoryFn } from '@storybook/vue3';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
} as Meta<typeof Button>;
//👇 We create a “template” of how args map to rendering
const Template: StoryFn<typeof Button> = (args) => ({
components: { Button },
setup() {
return { args };
},
template: '<Button v-bind="args" />',
});
//👇 Each story then reuses that template
export const Primary = Template.bind({});
Primary.args = { background: '#ff0', label: 'Button' };
export const Secondary = Template.bind({});
Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
export const Tertiary = Template.bind({});
Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
```

26
docs/snippets/vue/button-story-with-blue-args.ts-2.ts.mdx Normal file
View File

@ -0,0 +1,26 @@
```ts
// Button.stories.ts
import Button from './Button.vue';
import { Meta } from '@storybook/vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
//👇 Creates specific parameters for the story
parameters: {
backgrounds: {
values: [
{ name: 'red', value: '#f00' },
{ name: 'green', value: '#0f0' },
{ name: 'blue', value: '#00f' },
],
},
},
} as Meta<typeof Button>;
```

26
docs/snippets/vue/button-story-with-blue-args.ts-3.ts.mdx Normal file
View File

@ -0,0 +1,26 @@
```ts
// Button.stories.ts
import Button from './Button.vue';
import { Meta } from '@storybook/vue3';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
//👇 Creates specific parameters for the story
parameters: {
backgrounds: {
values: [
{ name: 'red', value: '#f00' },
{ name: 'green', value: '#0f0' },
{ name: 'blue', value: '#00f' },
],
},
},
} as Meta<typeof Button>;
```

31
docs/snippets/vue/button-story-with-emojis.ts-2.ts.mdx Normal file
View File

@ -0,0 +1,31 @@
```ts
// Button.stories.ts
import Button from './Button.vue';
import { Meta, StoryFn } from '@storybook/vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
} as Meta<typeof Button>;
export const Primary: StoryFn<typeof Button> = () => ({
components: { Button },
template: '<Button background="#ff0" label="Button" />',
});
export const Secondary: StoryFn<typeof Button> = () => ({
components: { Button },
template: '<Button background="#ff0" label="😄👍😍💯" />',
});
export const Tertiary: StoryFn<typeof Button> = () => ({
components: { Button },
template: '<Button background="#ff0" label="📚📕📈🤓" />',
});
```

31
docs/snippets/vue/button-story-with-emojis.ts-3.ts.mdx Normal file
View File

@ -0,0 +1,31 @@
```ts
// Button.stories.ts
import Button from './Button.vue';
import { Meta, StoryFn } from '@storybook/vue3';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
} as Meta<typeof Button>;
export const Primary: StoryFn<typeof Button> = () => ({
components: { Button },
template: '<Button background="#ff0" label="Button" />',
});
export const Secondary: StoryFn<typeof Button> = () => ({
components: { Button },
template: '<Button background="#ff0" label="😄👍😍💯" />',
});
export const Tertiary: StoryFn<typeof Button> = () => ({
components: { Button },
template: '<Button background="#ff0" label="📚📕📈🤓" />',
});
```

21
docs/snippets/vue/button-story.ts-2.ts.mdx Normal file
View File

@ -0,0 +1,21 @@
```ts
// Button.stories.ts
import Button from './Button.vue';
import { Meta, StoryFn } from '@storybook/vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
} as Meta<typeof Button>;
export const Primary: StoryFn<typeof Button> = () => ({
components: { Button },
template: '<Button primary label="Button" />',
});
```

21
docs/snippets/vue/button-story.ts-3.ts.mdx Normal file
View File

@ -0,0 +1,21 @@
```ts
// Button.stories.ts
import Button from './Button.vue';
import { Meta, StoryFn } from '@storybook/vue3';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
} as Meta<typeof Button>;
export const Primary: StoryFn<typeof Button> = () => ({
components: { Button },
template: '<Button primary label="Button" />',
});
```

2
docs/snippets/vue/component-story-figma-integration.mdx.mdx
View File

@ -10,7 +10,7 @@ import MyComponent from './MyComponent.vue';
<Meta title="FigmaExample" component={MyComponent} decorators={[withDesign]} />
export const Template = (args) => ({
// Components used in your story `template` are defined in the `components` object
// Components used in your story `template` are defined in the `components` object
components: { MyComponent },
template: 'MyComponent />',
});

6
docs/snippets/vue/component-story-figma-integration.ts.mdx
View File

@ -1,7 +1,7 @@
```ts
// MyComponent.stories.ts
import { Meta, Story } from '@storybook/vue'; // For Vue 3 use import { Meta, Story } from '@storybook/vue3';
import { Meta, StoryFn } from '@storybook/vue'; // For Vue 3 use import { Meta, Story } from '@storybook/vue3';
import { withDesign } from 'storybook-addon-designs';
@ -12,10 +12,10 @@ export default {
title: 'FigmaExample',
component: MyComponent,
decorators: [withDesign],
} as Meta;
} as Meta<typeof MyComponent>;
// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
const Template: Story = () => ({
const Template: StoryFn<typeof MyComponent> = () => ({
components: { MyComponent },
template: '<MyComponent />',
});

2
docs/snippets/vue/component-story-with-accessibility.mdx-3.mdx.mdx
View File

@ -46,4 +46,4 @@ export const Template = (args) => ({
}}>
{Template.bind({})}
</Story>
```
```

41
docs/snippets/vue/list-story-expanded.ts-2.ts.mdx Normal file
View File

@ -0,0 +1,41 @@
```ts
// List.stories.ts
import List from './ListComponent.vue';
import ListItem from './ListItem.vue';
import { Meta, StoryFn } from '@storybook/vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
component: List,
} as Meta<typeof List>;
export const Empty: StoryFn<typeof List> = (args, { argTypes }) => ({
components: { List },
props: Object.keys(argTypes),
template: '<list v-bind="$props"/>',
});
export const OneItem: StoryFn<typeof List> = (args, { argTypes }) => ({
components: { List, ListItem },
props: Object.keys(argTypes),
template: '<list v-bind="$props"><list-item/></list>',
});
export const ManyItems: StoryFn<typeof List> = (args, { argTypes }) => ({
components: { List, ListItem },
props: Object.keys(argTypes),
template: `
<list v-bind="$props">
<list-item/>
<list-item/>
<list-item/>
</list>
`,
});
```

47
docs/snippets/vue/list-story-expanded.ts-3.ts.mdx Normal file
View File

@ -0,0 +1,47 @@
```ts
// List.stories.ts
import List from './ListComponent.vue';
import ListItem from './ListItem.vue';
import { Meta, StoryFn } from '@storybook/vue3';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
component: List,
} as Meta<typeof List>;
export const Empty: StoryFn<typeof List> = (args) => ({
components: { List },
setup() {
return { args };
},
template: '<list v-bind="args"/>',
});
export const OneItem: StoryFn<typeof List> = (args) => ({
components: { List, ListItem },
setup() {
return { args };
},
template: '<list v-bind="args"><list-item/></list>',
});
export const ManyItems: StoryFn<typeof List> = (args) => ({
components: { List, ListItem },
setup() {
return { args };
},
template: `
<list v-bind="args">
<list-item/>
<list-item/>
<list-item/>
</list>
`,
});
```

36
docs/snippets/vue/list-story-reuse-data.ts-2.ts.mdx Normal file
View File

@ -0,0 +1,36 @@
```ts
// List.stories.ts
import List from './ListComponent.vue';
import ListItem from './ListItem.vue';
import { Meta, StoryFn } from '@storybook/vue';
//👇 We're importing the necessary stories from ListItem
import { Selected, Unselected } from './ListItem.stories';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
component: List,
} as Meta<typeof List>;
export const ManyItems: StoryFn<typeof List> = (args, { argTypes }) => ({
components: { List, ListItem },
props: Object.keys(argTypes),
template: `
<List v-bind="$props">
<list-item :isSelected="Selected"/>
<list-item :isSelected="Unselected"/>
<list-item :isSelected="Unselected"/>
</List>`,
});
ManyItems.args = {
Selected: Selected.args.isSelected,
Unselected: Unselected.args.isSelected,
};
```

38
docs/snippets/vue/list-story-reuse-data.ts-3.ts.mdx Normal file
View File

@ -0,0 +1,38 @@
```ts
// List.stories.ts
import List from './ListComponent.vue';
import ListItem from './ListItem.vue';
import { Meta, StoryFn } from '@storybook/vue3';
//👇 We're importing the necessary stories from ListItem
import { Selected, Unselected } from './ListItem.stories';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
component: List,
} as Meta<typeof List>;
export const ManyItems: StoryFn<typeof List> = (args) => ({
components: { List, ListItem },
setup() {
return { ...args };
},
template: `
<List v-bind="args">
<list-item :isSelected="Selected"/>
<list-item :isSelected="Unselected"/>
<list-item :isSelected="Unselected"/>
</List>`,
});
ManyItems.args = {
Selected: Selected.args.isSelected,
Unselected: Unselected.args.isSelected,
};
```

23
docs/snippets/vue/list-story-starter.ts-2.ts.mdx Normal file
View File

@ -0,0 +1,23 @@
```ts
// List.stories.ts
import List from './ListComponent.vue';
import { Meta, StoryFn } from '@storybook/vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
component: List,
} as Meta<typeof List>;
// Always an empty list, not super interesting
const Template: StoryFn<typeof List> = (args, { argTypes }) => ({
components: { List },
props: Object.keys(argTypes),
template: '<list v-bind="$props"/>',
});
```

25
docs/snippets/vue/list-story-starter.ts-3.ts.mdx Normal file
View File

@ -0,0 +1,25 @@
```ts
// List.stories.ts
import List from './ListComponent.vue';
import { Meta, StoryFn } from '@storybook/vue3';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
component: List,
} as Meta<typeof LoginForm>;
// Always an empty list, not super interesting
const Template: StoryFn<typeof LoginForm> = (args) => ({
components: { List },
setup() {
return { args };
},
template: '<list v-bind="args"/>',
});
```

2
docs/snippets/vue/login-form-with-play-function.2.js.mdx
View File

@ -16,7 +16,7 @@ export default {
component: LoginForm,
};
export const Template = (args, { argTypes }) => ({
const Template = (args, { argTypes }) => ({
components: { LoginForm },
props: Object.keys(argTypes),
template: `<LoginForm v-bind="$props" v-on="$props" />`,

49
docs/snippets/vue/login-form-with-play-function.ts-2.ts.mdx Normal file
View File

@ -0,0 +1,49 @@
```ts
// LoginForm.stories.ts
import { userEvent, within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import LoginForm from './LoginForm.vue';
import { Meta, StoryFn } from '@storybook/vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Form',
component: LoginForm,
} as Meta<typeof LoginForm>;
const Template: StoryFn<typeof LoginForm> = (args, { argTypes }) => ({
components: { LoginForm },
props: Object.keys(argTypes),
template: `<LoginForm v-bind="$props" v-on="$props" />`,
});
export const EmptyForm = Template.bind({});
export const FilledForm = Template.bind({});
FilledForm.play = async ({ canvasElement }) => {
// Starts querying the component from its root element
const canvas = within(canvasElement);
// 👇 Simulate interactions with the component
await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
// See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await userEvent.click(canvas.getByRole('button'));
// 👇 Assert DOM structure
await expect(
canvas.getByText(
'Everything is perfect. Your account is ready and we should probably get you started!'
)
).toBeInTheDocument();
};
```

51
docs/snippets/vue/login-form-with-play-function.ts-3.ts.mdx Normal file
View File

@ -0,0 +1,51 @@
```js
// LoginForm.stories.ts
import { userEvent, within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import LoginForm from './LoginForm.vue';
import { Meta, StoryFn } from '@storybook/vue3';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Form',
component: LoginForm,
} as Meta<typeof LoginForm>;
const Template: StoryFn<typeof LoginForm> = (args) => ({
components: { LoginForm },
setup() {
return args;
},
template: '<LoginForm @onSubmit="onSubmit" v-bind="args" />',
});
export const EmptyForm = Template.bind({});
export const FilledForm = Template.bind({});
FilledForm.play = async ({ canvasElement }) => {
// Starts querying the component from its root element
const canvas = within(canvasElement);
// 👇 Simulate interactions with the component
await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
// See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await userEvent.click(canvas.getByRole('button'));
// 👇 Assert DOM structure
await expect(
canvas.getByText(
'Everything is perfect. Your account is ready and we should probably get you started!'
)
).toBeInTheDocument();
};
```

2
docs/snippets/vue/my-component-play-function-with-delay.js.mdx
View File

@ -33,4 +33,4 @@ DelayedStory.play = async () => {
delay: 100,
});
};
```
```

2
docs/snippets/vue/my-component-play-function-with-delay.mdx.mdx
View File

@ -31,4 +31,4 @@ const Template = (args) => ({
}}>
{Template.bind({})}
</Story>
```
```

2
docs/snippets/vue/storybook-testing-addon-optional-config.2.js.mdx
View File

@ -7,4 +7,4 @@ import { setGlobalConfig } from '@storybook/testing-vue';
import * as globalStorybookConfig from './.storybook/preview';
setGlobalConfig(globalStorybookConfig);
```
```

2
docs/snippets/vue/storybook-testing-addon-optional-config.3.js.mdx
View File

@ -7,4 +7,4 @@ import { setGlobalConfig } from '@storybook/testing-vue3';
import * as globalStorybookConfig from './.storybook/preview';
setGlobalConfig(globalStorybookConfig);
```
```

5
docs/toc.js
View File

@ -357,6 +357,11 @@ module.exports = {
title: 'Upgrading',
type: 'link',
},
{
pathSegment: 'telemetry',
title: 'Telemetry',
type: 'link',
},
{
pathSegment: '',
title: 'Integration',

2
docs/versions/next.json
View File

@ -1 +1 @@
{"version":"6.5.0-beta.1","info":{"plain":"### Features\n\n- Toolbars: Add dynamicTitle option ([#17789](https://github.com/storybookjs/storybook/pull/17789))\n- Angular: Add webpackStatsJson to angular-builder ([#18001](https://github.com/storybookjs/storybook/pull/18001))\n- CLI/Vue: add interactions to vue cli template ([#18021](https://github.com/storybookjs/storybook/pull/18021))\n- CLI/HTML: Add interactions to cli template ([#18014](https://github.com/storybookjs/storybook/pull/18014))\n\n### Bug Fixes\n\n- CSF: Re-apply TArgs to render type ([#18075](https://github.com/storybookjs/storybook/pull/18075))\n- CLI: await generators for proper install ([#18053](https://github.com/storybookjs/storybook/pull/18053))\n- Core: Fix story index for CSF default exports as TS vars ([#18054](https://github.com/storybookjs/storybook/pull/18054))\n- Core: Fix single-story hoisting regression for auto-title changes ([#18052](https://github.com/storybookjs/storybook/pull/18052))"}}
{"version":"6.5.0-beta.4","info":{"plain":"### Features\n\n- UI: Add a parent level toolbar exclusion key for tabs ([#18106](https://github.com/storybookjs/storybook/pull/18106))\n- Addon-a11y: Display a11y issues number in addon tab title ([#17983](https://github.com/storybookjs/storybook/pull/17983))\n\n### Bug Fixes\n\n- Addon-docs: Fix Canvas block CURRENT_SELECTION handling ([#18130](https://github.com/storybookjs/storybook/pull/18130))\n- Telemetry: Add safecheck for crash reports ([#18129](https://github.com/storybookjs/storybook/pull/18129))\n- Addon-a11y: Fix a11y params > element use ([#17989](https://github.com/storybookjs/storybook/pull/17989))"}}

28
docs/writing-stories/introduction.md
View File

@ -11,7 +11,7 @@ Storybook uses the generic term arguments (args for short) when talking about Re
A component’s stories are defined in a story file that lives alongside the component file. The story file is for development-only, and it won't be included in your production bundle.
```
Button.js | ts | jsx | tsx
Button.js | ts | jsx | tsx | vue | svelte
Button.stories.js | ts | jsx | tsx | mdx
```
@ -32,6 +32,8 @@ The _default_ export metadata controls how Storybook lists your stories and prov
'react/button-story-default-export-with-component.js.mdx',
'react/button-story-default-export-with-component.ts.mdx',
'vue/button-story-default-export-with-component.js.mdx',
'vue/button-story-default-export-with-component.ts-2.ts.mdx',
'vue/button-story-default-export-with-component.ts-3.ts.mdx',
'angular/button-story-default-export-with-component.ts.mdx',
'svelte/button-story-default-export-with-component.js.mdx',
'web-components/button-story-default-export-with-component.js.mdx',
@ -51,6 +53,8 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r
'react/button-story.js.mdx',
'react/button-story.ts.mdx',
'vue/button-story.js.mdx',
'vue/button-story.ts-2.ts.mdx',
'vue/button-story.ts-3.ts.mdx',
'angular/button-story.ts.mdx',
'svelte/button-story.js.mdx',
'svelte/button-story.native-format.mdx',
@ -90,6 +94,8 @@ You can rename any particular story you need. For instance, to give it a more ac
'react/button-story-rename-story.js.mdx',
'react/button-story-rename-story.ts.mdx',
'vue/button-story-rename-story.js.mdx',
'vue/button-story-rename-story.ts-2.ts.mdx',
'vue/button-story-rename-story.ts-3.ts.mdx',
'angular/button-story-rename-story.ts.mdx',
'svelte/button-story-rename-story.js.mdx',
'web-components/button-story-rename-story.js.mdx',
@ -112,6 +118,8 @@ A story is a function that describes how to render a component. You can have mul
'react/button-story-with-emojis.ts.mdx',
'react/button-story-with-emojis.mdx.mdx',
'vue/button-story-with-emojis.js.mdx',
'vue/button-story-with-emojis.ts-2.ts.mdx',
'vue/button-story-with-emojis.ts-3.ts.mdx',
'vue/button-story-with-emojis.mdx.mdx',
'angular/button-story-with-emojis.ts.mdx',
'angular/button-story-with-emojis.mdx.mdx',
@ -138,6 +146,8 @@ Refine this pattern by introducing `args` for your component's stories. It reduc
'react/button-story-using-args.ts.mdx',
'vue/button-story-using-args.2.js.mdx',
'vue/button-story-using-args.3.js.mdx',
'vue/button-story-using-args.ts-2.ts.mdx',
'vue/button-story-using-args.ts-3.ts.mdx',
'angular/button-story-using-args.ts.mdx',
'svelte/button-story-using-args.js.mdx',
'svelte/button-story-using-args.native-format.mdx',
@ -166,6 +176,8 @@ What’s more, you can import `args` to reuse when writing stories for other com
'angular/button-group-story.ts.mdx',
'vue/button-group-story.2.js.mdx',
'vue/button-group-story.3.js.mdx',
'vue/button-group-story.ts-2.ts.mdx',
'vue/button-group-story.ts-3.ts.mdx',
'svelte/button-group-story.js.mdx',
'web-components/button-group-story.js.mdx',
]}
@ -207,8 +219,10 @@ Storybook's `play` function and the [`@storybook/addon-interactions`](https://st
'angular/login-form-with-play-function.ts.mdx',
'angular/login-form-with-play-function.mdx.mdx',
'vue/login-form-with-play-function.2.js.mdx',
'vue/login-form-with-play-function.ts-2.ts.mdx',
'vue/login-form-with-play-function.mdx-2.mdx',
'vue/login-form-with-play-function.3.js.mdx',
'vue/login-form-with-play-function.ts-3.ts.mdx',
'vue/login-form-with-play-function.mdx-3.mdx',
'svelte/login-form-with-play-function.js.mdx',
'svelte/login-form-with-play-function.mdx.mdx',
@ -231,6 +245,8 @@ For instance, suppose you wanted to test your Button component against a differe
'react/button-story-with-blue-args.ts.mdx',
'react/button-story-with-blue-args.mdx.mdx',
'vue/button-story-with-blue-args.js.mdx',
'vue/button-story-with-blue-args.ts-2.ts.mdx',
'vue/button-story-with-blue-args.ts-3.ts.mdx',
'vue/button-story-with-blue-args.mdx.mdx',
'angular/button-story-with-blue-args.ts.mdx',
'angular/button-story-with-blue-args.mdx.mdx',
@ -261,6 +277,8 @@ A simple example is adding padding to a component’s stories. Accomplish this u
'react/button-story-component-decorator.ts.mdx',
'react/button-story-component-decorator.mdx.mdx',
'vue/button-story-component-decorator.js.mdx',
'vue/button-story-component-decorator.ts-2.ts.mdx',
'vue/button-story-component-decorator.ts-3.ts.mdx',
'vue/button-story-component-decorator.mdx.mdx',
'angular/button-story-component-decorator.ts.mdx',
'angular/button-story-component-decorator.mdx.mdx',
@ -287,7 +305,9 @@ When building design systems or component libraries, you may have two or more co
'react/list-story-starter.ts.mdx',
'angular/list-story-starter.ts.mdx',
'vue/list-story-starter.2.js.mdx',
'vue/list-story-starter.ts-2.ts.mdx',
'vue/list-story-starter.3.js.mdx',
'vue/list-story-starter.ts-3.ts.mdx',
'svelte/list-story-starter.native-format.mdx',
'web-components/list-story-starter.js.mdx',
]}
@ -305,7 +325,9 @@ In such cases, it makes sense to render a different function for each story:
'react/list-story-expanded.ts.mdx',
'angular/list-story-expanded.ts.mdx',
'vue/list-story-expanded.2.js.mdx',
'vue/list-story-expanded.ts-2.ts.mdx',
'vue/list-story-expanded.3.js.mdx',
'vue/list-story-expanded.ts-3.ts.mdx',
'svelte/list-story-expanded.native-format.mdx',
'web-components/list-story-expanded.js.mdx',
]}
@ -323,7 +345,9 @@ You can also reuse stories from the child `ListItem` in your `List` component. T
'react/list-story-reuse-data.ts.mdx',
'angular/list-story-reuse-data.ts.mdx',
'vue/list-story-reuse-data.2.js.mdx',
'vue/list-story-reuse-data.ts-2.ts.mdx',
'vue/list-story-reuse-data.3.js.mdx',
'vue/list-story-reuse-data.ts-3.ts.mdx',
'web-components/list-story-reuse-data.js.mdx',
]}
/>
@ -334,4 +358,4 @@ You can also reuse stories from the child `ListItem` in your `List` component. T
💡 Note that there are disadvantages in writing stories like this as you cannot take full advantage of the args mechanism and composing args as you build even more complex composite components. For more discussion, see the [multi component stories](../writing-stories/stories-for-multiple-components.md) workflow documentation.
</div>
</div>

1
examples/angular-cli/.storybook/main.js
View File

@ -16,6 +16,7 @@ module.exports = {
],
core: {
builder: 'webpack4',
disableTelemetry: true,
},
// These are just here to test composition. They could be added to any storybook example project
refs: {

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

@ -1,6 +1,6 @@
{
"name": "angular-cli",
"version": "6.5.0-beta.1",
"version": "6.5.0-beta.4",
"private": true,
"license": "MIT",
"scripts": {
@ -39,21 +39,21 @@
"@angular/compiler-cli": "^11.2.14",
"@angular/elements": "^11.2.14",
"@compodoc/compodoc": "^1.1.18",
"@storybook/addon-a11y": "6.5.0-beta.1",
"@storybook/addon-actions": "6.5.0-beta.1",
"@storybook/addon-backgrounds": "6.5.0-beta.1",
"@storybook/addon-controls": "6.5.0-beta.1",
"@storybook/addon-docs": "6.5.0-beta.1",
"@storybook/addon-interactions": "6.5.0-beta.1",
"@storybook/addon-jest": "6.5.0-beta.1",
"@storybook/addon-links": "6.5.0-beta.1",
"@storybook/addon-storyshots": "6.5.0-beta.1",
"@storybook/addon-storysource": "6.5.0-beta.1",
"@storybook/addons": "6.5.0-beta.1",
"@storybook/angular": "6.5.0-beta.1",
"@storybook/addon-a11y": "6.5.0-beta.4",
"@storybook/addon-actions": "6.5.0-beta.4",
"@storybook/addon-backgrounds": "6.5.0-beta.4",
"@storybook/addon-controls": "6.5.0-beta.4",
"@storybook/addon-docs": "6.5.0-beta.4",
"@storybook/addon-interactions": "6.5.0-beta.4",
"@storybook/addon-jest": "6.5.0-beta.4",
"@storybook/addon-links": "6.5.0-beta.4",
"@storybook/addon-storyshots": "6.5.0-beta.4",
"@storybook/addon-storysource": "6.5.0-beta.4",
"@storybook/addons": "6.5.0-beta.4",
"@storybook/angular": "6.5.0-beta.4",
"@storybook/babel-plugin-require-context-hook": "1.0.1",
"@storybook/jest": "^0.0.5",
"@storybook/source-loader": "6.5.0-beta.1",
"@storybook/source-loader": "6.5.0-beta.4",
"@storybook/testing-library": "^0.0.7",
"@types/core-js": "^2.5.4",
"@types/jest": "^26.0.16",
@ -67,7 +67,7 @@
"jest": "^26.6.3",
"jest-preset-angular": "^8.3.2",
"protractor": "~7.0.0",
"sb": "6.5.0-beta.1",
"sb": "6.5.0-beta.4",
"storybook-addon-angular-ivy": "^0.0.1",
"ts-jest": "^26.4.4",
"ts-node": "^9.1.0",

1
examples/cra-kitchen-sink/.storybook/main.js
View File

@ -29,6 +29,7 @@ module.exports = {
},
core: {
builder: 'webpack4',
disableTelemetry: true,
},
staticDirs: ['../public'],
features: {

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