@@ -51,8 +51,9 @@ It allows you to browse a component library, view the different states of each c
View README for:
- 
- 
+ 
+ {interactions.map((call) => (
+
{!isPlaying && interactions.length === 0 && (
{paragraphs[0]}
+ {more && See the full stack trace in the browser console.
} +
diff --git a/addons/interactions/src/components/MethodCall.stories.tsx b/addons/interactions/src/components/MethodCall.stories.tsx
index feda43c8ff5c..b65001b4e1cb 100644
--- a/addons/interactions/src/components/MethodCall.stories.tsx
+++ b/addons/interactions/src/components/MethodCall.stories.tsx
@@ -27,7 +27,6 @@ export default {
},
};
-class FooBar {}
export const Args = () => (
;
+}) => {
const colors = useThemeColors();
if (nested) {
return […];
}
- const nodes = value.slice(0, 3).map((v) => }) => {
+export const ClassNode = ({ name }: { name: string }) => {
const colors = useThemeColors();
- return {value.constructor.name};
+ return {name};
};
-export const FunctionNode = ({ value }: { value: Function }) => {
+export const FunctionNode = ({ name }: { name: string }) => {
const colors = useThemeColors();
- return {value.name || 'anonymous'};
+ return name ? (
+ {name}
+ ) : (
+ anonymous
+ );
};
-export const ElementNode = ({ value }: { value: ElementRef['__element__'] }) => {
- const { prefix, localName, id, classNames = [], innerText } = value;
+export const ElementNode = ({
+ prefix,
+ localName,
+ id,
+ classNames = [],
+ innerText,
+}: ElementRef['__element__']) => {
const name = prefix ? `${prefix}:${localName}` : localName;
const colors = useThemeColors();
return (
@@ -309,8 +330,8 @@ export const ElementNode = ({ value }: { value: ElementRef['__element__'] }) =>
);
};
-export const DateNode = ({ value }: { value: Date }) => {
- const [date, time, ms] = value.toISOString().split(/[T.Z]/);
+export const DateNode = ({ value }: { value: string }) => {
+ const [date, time, ms] = value.split(/[T.Z]/);
const colors = useThemeColors();
return (
@@ -323,42 +344,36 @@ export const DateNode = ({ value }: { value: Date }) => {
);
};
-export const ErrorNode = ({ value }: { value: Error }) => {
+export const ErrorNode = ({ name, message }: { name: string; message: string }) => {
const colors = useThemeColors();
return (
- {value.name}
- {value.message && ': '}
- {value.message && (
- 50 ? value.message : ''}
- >
- {ellipsize(value.message, 50)}
+ {name}
+ {message && ': '}
+ {message && (
+ 50 ? message : ''}>
+ {ellipsize(message, 50)}
)}
);
};
-export const RegExpNode = ({ value }: { value: RegExp }) => {
+export const RegExpNode = ({ flags, source }: { flags: string; source: string }) => {
const colors = useThemeColors();
return (
- /{value.source}/{value.flags}
+ /{source}/{flags}
);
};
-export const SymbolNode = ({ value }: { value: symbol }) => {
+export const SymbolNode = ({ description }: { description: string }) => {
const colors = useThemeColors();
return (
Symbol(
- {value.description && (
- {JSON.stringify(value.description)}
- )}
- )
+ {description && "{description}"})
);
};
diff --git a/addons/interactions/src/components/Subnav/Subnav.stories.tsx b/addons/interactions/src/components/Subnav/Subnav.stories.tsx
index 9605bc53252c..40e365d03fb9 100644
--- a/addons/interactions/src/components/Subnav/Subnav.stories.tsx
+++ b/addons/interactions/src/components/Subnav/Subnav.stories.tsx
@@ -12,6 +12,7 @@ export default {
goto: action('goto'),
next: action('next'),
end: action('end'),
+ rerun: action('rerun'),
},
controlStates: {
debugger: true,
diff --git a/addons/interactions/src/mocks/index.ts b/addons/interactions/src/mocks/index.ts
index 7952b6ecf896..e55fe4d88b8f 100644
--- a/addons/interactions/src/mocks/index.ts
+++ b/addons/interactions/src/mocks/index.ts
@@ -1,31 +1,122 @@
import { CallStates, Call } from '@storybook/instrumenter';
-export const getCall = (status: CallStates): Call => {
- const defaultData = {
- id: 'addons-interactions-accountform--standard-email-filled [3] change',
- cursor: 0,
- path: ['fireEvent'],
- method: 'change',
- storyId: 'addons-interactions-accountform--standard-email-filled',
- args: [
- {
- __callId__: 'addons-interactions-accountform--standard-email-filled [2] getByTestId',
- retain: false,
- },
- {
- target: {
- value: 'michael@chromatic.com',
- },
- },
- ],
- interceptable: true,
- retain: false,
- status,
- };
+export const getCalls = (finalStatus: CallStates) => {
+ const calls: Call[] = [
+ {
+ id: 'story--id [3] within',
+ storyId: 'story--id',
+ cursor: 3,
+ path: [],
+ method: 'within',
+ args: [{ __element__: { localName: 'div', id: 'root' } }],
+ interceptable: false,
+ retain: false,
+ status: CallStates.DONE,
+ },
+ {
+ id: 'story--id [4] findByText',
+ storyId: 'story--id',
+ cursor: 4,
+ path: [{ __callId__: 'story--id [3] within' }],
+ method: 'findByText',
+ args: ['Click'],
+ interceptable: true,
+ retain: false,
+ status: CallStates.DONE,
+ },
+ {
+ id: 'story--id [5] click',
+ storyId: 'story--id',
+ cursor: 5,
+ path: ['userEvent'],
+ method: 'click',
+ args: [{ __element__: { localName: 'button', innerText: 'Click' } }],
+ interceptable: true,
+ retain: false,
+ status: CallStates.DONE,
+ },
+ {
+ id: 'story--id [6] waitFor',
+ storyId: 'story--id',
+ cursor: 6,
+ path: [],
+ method: 'waitFor',
+ args: [{ __function__: { name: '' } }],
+ interceptable: true,
+ retain: false,
+ status: CallStates.DONE,
+ },
+ {
+ id: 'story--id [6] waitFor [0] expect',
+ parentId: 'story--id [6] waitFor',
+ storyId: 'story--id',
+ cursor: 1,
+ path: [],
+ method: 'expect',
+ args: [{ __function__: { name: 'handleSubmit' } }],
+ interceptable: false,
+ retain: false,
+ status: CallStates.DONE,
+ },
+ {
+ id: 'story--id [6] waitFor [1] stringMatching',
+ parentId: 'story--id [6] waitFor',
+ storyId: 'story--id',
+ cursor: 2,
+ path: ['expect'],
+ method: 'stringMatching',
+ args: [{ __regexp__: { flags: 'gi', source: '([A-Z])w+' } }],
+ interceptable: false,
+ retain: false,
+ status: CallStates.DONE,
+ },
+ {
+ id: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
+ parentId: 'story--id [6] waitFor',
+ storyId: 'story--id',
+ cursor: 3,
+ path: [{ __callId__: 'story--id [6] waitFor [0] expect' }],
+ method: 'toHaveBeenCalledWith',
+ args: [{ __callId__: 'story--id [6] waitFor [1] stringMatching', retain: false }],
+ interceptable: true,
+ retain: false,
+ status: CallStates.DONE,
+ },
+ {
+ id: 'story--id [7] expect',
+ storyId: 'story--id',
+ cursor: 7,
+ path: [],
+ method: 'expect',
+ args: [{ __function__: { name: 'handleReset' } }],
+ interceptable: false,
+ retain: false,
+ status: CallStates.DONE,
+ },
+ {
+ id: 'story--id [8] toHaveBeenCalled',
+ storyId: 'story--id',
+ cursor: 8,
+ path: [{ __callId__: 'story--id [7] expect' }, 'not'],
+ method: 'toHaveBeenCalled',
+ args: [],
+ interceptable: true,
+ retain: false,
+ status: finalStatus,
+ },
+ ];
- const overrides = CallStates.ERROR
- ? { exception: { name: 'Error', stack: '', message: "Things didn't work!" } }
- : {};
+ if (finalStatus === CallStates.ERROR) {
+ calls[calls.length - 1].exception = {
+ name: 'Error',
+ stack: '',
+ message: 'Oops!',
+ callId: calls[calls.length - 1].id,
+ };
+ }
- return { ...defaultData, ...overrides };
+ return calls;
};
+
+export const getInteractions = (finalStatus: CallStates) =>
+ getCalls(finalStatus).filter((call) => call.interceptable);
diff --git a/addons/jest/package.json b/addons/jest/package.json
index 595bf3422375..74d3c12556cc 100644
--- a/addons/jest/package.json
+++ b/addons/jest/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-jest",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"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-rc.1",
+ "@storybook/api": "6.5.0-rc.1",
+ "@storybook/client-logger": "6.5.0-rc.1",
+ "@storybook/components": "6.5.0-rc.1",
+ "@storybook/core-events": "6.5.0-rc.1",
+ "@storybook/theming": "6.5.0-rc.1",
"core-js": "^3.8.2",
"global": "^4.4.0",
"react-sizeme": "^3.0.1",
@@ -77,7 +77,7 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
"sbmodern": "dist/modern/index.js",
"storybook": {
"displayName": "Jest",
diff --git a/addons/jest/src/components/Panel.tsx b/addons/jest/src/components/Panel.tsx
index e085d93d4cf6..e548819d64d7 100644
--- a/addons/jest/src/components/Panel.tsx
+++ b/addons/jest/src/components/Panel.tsx
@@ -99,13 +99,13 @@ const getColorByType = (type: string) => {
// using switch to allow for new types to be added
switch (type) {
case StatusTypes.PASSED_TYPE:
- return convert(themes.normal).color.positive;
+ return convert(themes.light).color.positive;
case StatusTypes.FAILED_TYPE:
- return convert(themes.normal).color.negative;
+ return convert(themes.light).color.negative;
case StatusTypes.PENDING_TYPE:
- return convert(themes.normal).color.warning;
+ return convert(themes.light).color.warning;
case StatusTypes.TODO_TYPE:
- return convert(themes.normal).color.purple;
+ return convert(themes.light).color.purple;
default:
return null;
}
@@ -154,7 +154,7 @@ const Content = styled(({ tests, className }: ContentProps) => (
!!(obj && obj.constructor && obj.call && obj.apply);
const optionsOrCallOptions = (opts: any, story: any) => (isFunction(opts) ? opts(story) : opts);
+type SnapshotsWithOptionsArgType = Pick | Function;
+
type SnapshotsWithOptionsReturnType = (
options: Pick
) => any;
export function snapshotWithOptions(
- options: { renderer?: any; serializer?: any } | Function = {}
+ options: SnapshotsWithOptionsArgType = {}
): SnapshotsWithOptionsReturnType {
return ({ story, context, renderTree, snapshotFileName }) => {
const result = renderTree(story, context, optionsOrCallOptions(options, story));
@@ -44,7 +50,9 @@ export function snapshotWithOptions(
};
}
-export function multiSnapshotWithOptions(options = {}): StoryshotsTestMethod {
+export function multiSnapshotWithOptions(
+ options: SnapshotsWithOptionsArgType = {}
+): StoryshotsTestMethod {
return ({ story, context, renderTree, stories2snapsConverter }) => {
const snapshotFileName = stories2snapsConverter.getSnapshotFileName(context);
return snapshotWithOptions(options)({ story, context, renderTree, snapshotFileName });
diff --git a/addons/storyshots/storyshots-puppeteer/package.json b/addons/storyshots/storyshots-puppeteer/package.json
index d7aa04211323..aa5b7f172c56 100644
--- a/addons/storyshots/storyshots-puppeteer/package.json
+++ b/addons/storyshots/storyshots-puppeteer/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storyshots-puppeteer",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"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-rc.1",
"@types/jest-image-snapshot": "^4.1.3",
"core-js": "^3.8.2",
"jest-image-snapshot": "^4.3.0",
@@ -50,11 +50,12 @@
},
"devDependencies": {
"@storybook/csf": "0.0.2--canary.4566f4d.1",
- "@types/puppeteer": "^5.4.0"
+ "@types/puppeteer": "^5.4.0",
+ "puppeteer": "^2.0.0 || ^3.0.0"
},
"peerDependencies": {
- "@storybook/addon-storyshots": "6.5.0-beta.1",
- "puppeteer": "^2.0.0 || ^3.0.0"
+ "@storybook/addon-storyshots": "6.5.0-rc.1",
+ "puppeteer": ">=2.0.0"
},
"peerDependenciesMeta": {
"puppeteer": {
@@ -64,5 +65,5 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a"
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401"
}
diff --git a/addons/storyshots/storyshots-puppeteer/src/config.ts b/addons/storyshots/storyshots-puppeteer/src/config.ts
index c6f40fd6bd04..c7fae1f04371 100644
--- a/addons/storyshots/storyshots-puppeteer/src/config.ts
+++ b/addons/storyshots/storyshots-puppeteer/src/config.ts
@@ -1,11 +1,7 @@
import { MatchImageSnapshotOptions } from 'jest-image-snapshot';
-import {
- Base64ScreenShotOptions,
- Browser,
- DirectNavigationOptions,
- Page,
- ElementHandle,
-} from 'puppeteer';
+import { ScreenshotOptions, Browser, Page, ElementHandle } from 'puppeteer';
+
+type PuppeteerLifeCycleEvent = 'load' | 'domcontentloaded' | 'networkidle0' | 'networkidle2';
export interface Context {
kind: string;
@@ -20,6 +16,16 @@ interface Options {
url: string;
}
+interface Base64ScreenShotOptions extends ScreenshotOptions {
+ encoding: 'base64';
+}
+
+interface DirectNavigationOptions {
+ referer?: string;
+ timeout?: number;
+ waitUntil?: PuppeteerLifeCycleEvent | PuppeteerLifeCycleEvent[];
+}
+
export interface CommonConfig {
storybookUrl: string;
chromeExecutablePath: string;
@@ -40,7 +46,7 @@ export interface ImageSnapshotConfig extends CommonConfig {
getMatchOptions: (options: Options) => MatchImageSnapshotOptions;
getScreenshotOptions: (options: Options) => Base64ScreenShotOptions;
beforeScreenshot: (page: Page, options: Options) => Promise;
- afterScreenshot: (options: { image: string; context: Context }) => Promise;
+ afterScreenshot: (options: { image: string | void | Buffer; context: Context }) => Promise;
}
export interface AxeConfig extends CommonConfig {
diff --git a/addons/storysource/package.json b/addons/storysource/package.json
index 377f4020b34b..d4e6637b2ef3 100644
--- a/addons/storysource/package.json
+++ b/addons/storysource/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storysource",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"description": "View a story’s source code to see how it works and paste into your app",
"keywords": [
"addon",
@@ -41,18 +41,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/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-rc.1",
+ "@storybook/api": "6.5.0-rc.1",
+ "@storybook/client-logger": "6.5.0-rc.1",
+ "@storybook/components": "6.5.0-rc.1",
+ "@storybook/router": "6.5.0-rc.1",
+ "@storybook/source-loader": "6.5.0-rc.1",
+ "@storybook/theming": "6.5.0-rc.1",
"core-js": "^3.8.2",
"estraverse": "^5.2.0",
"loader-utils": "^2.0.0",
"prop-types": "^15.7.2",
- "react-syntax-highlighter": "^15.4.5",
+ "react-syntax-highlighter": "^15.5.0",
"regenerator-runtime": "^0.13.7"
},
"devDependencies": {
@@ -74,7 +74,7 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
"sbmodern": "dist/modern/index.js",
"storybook": {
"displayName": "Storysource",
diff --git a/addons/toolbars/package.json b/addons/toolbars/package.json
index 286f89ff887c..b8b305d57249 100644
--- a/addons/toolbars/package.json
+++ b/addons/toolbars/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-toolbars",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"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-rc.1",
+ "@storybook/api": "6.5.0-rc.1",
+ "@storybook/client-logger": "6.5.0-rc.1",
+ "@storybook/components": "6.5.0-rc.1",
+ "@storybook/theming": "6.5.0-rc.1",
"core-js": "^3.8.2",
"regenerator-runtime": "^0.13.7"
},
@@ -68,7 +68,7 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
"sbmodern": "dist/modern/manager.js",
"storybook": {
"displayName": "Toolbars",
diff --git a/addons/viewport/package.json b/addons/viewport/package.json
index 82b4498fcc22..5016cf623961 100644
--- a/addons/viewport/package.json
+++ b/addons/viewport/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-viewport",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"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-rc.1",
+ "@storybook/api": "6.5.0-rc.1",
+ "@storybook/client-logger": "6.5.0-rc.1",
+ "@storybook/components": "6.5.0-rc.1",
+ "@storybook/core-events": "6.5.0-rc.1",
+ "@storybook/theming": "6.5.0-rc.1",
"core-js": "^3.8.2",
"global": "^4.4.0",
"memoizerific": "^1.11.3",
@@ -69,7 +69,7 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
"sbmodern": "dist/modern/preview.js",
"storybook": {
"displayName": "Viewport",
diff --git a/app/angular/package.json b/app/angular/package.json
index 488ce7a08530..554db8973eca 100644
--- a/app/angular/package.json
+++ b/app/angular/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/angular",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -45,17 +45,17 @@
"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": "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-rc.1",
+ "@storybook/api": "6.5.0-rc.1",
+ "@storybook/client-logger": "6.5.0-rc.1",
+ "@storybook/core": "6.5.0-rc.1",
+ "@storybook/core-common": "6.5.0-rc.1",
+ "@storybook/core-events": "6.5.0-rc.1",
"@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-rc.1",
+ "@storybook/node-logger": "6.5.0-rc.1",
"@storybook/semver": "^7.3.2",
- "@storybook/store": "6.5.0-beta.1",
+ "@storybook/store": "6.5.0-rc.1",
"@types/node": "^14.14.20 || ^16.0.0",
"@types/react": "^16.14.23",
"@types/react-dom": "^16.9.14",
@@ -75,7 +75,7 @@
"read-pkg-up": "^7.0.1",
"regenerator-runtime": "^0.13.7",
"sass-loader": "^10.1.0",
- "telejson": "^5.3.3",
+ "telejson": "^6.0.8",
"ts-dedent": "^2.0.0",
"ts-loader": "^8.0.14",
"tsconfig-paths-webpack-plugin": "^3.3.0",
@@ -137,5 +137,5 @@
"access": "public"
},
"builders": "dist/ts3.9/builders/builders.json",
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a"
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401"
}
diff --git a/app/angular/setup-jest.ts b/app/angular/setup-jest.ts
index 3e05aa930bb9..3caa91649606 100644
--- a/app/angular/setup-jest.ts
+++ b/app/angular/setup-jest.ts
@@ -1,4 +1,4 @@
// eslint-disable-next-line import/no-extraneous-dependencies
-import 'jest-preset-angular';
+import 'jest-preset-angular/setup-jest';
global.EventSource = class {} as any;
diff --git a/app/angular/src/builders/build-storybook/index.spec.ts b/app/angular/src/builders/build-storybook/index.spec.ts
index c396c9cc6d9c..40b12a8b8804 100644
--- a/app/angular/src/builders/build-storybook/index.spec.ts
+++ b/app/angular/src/builders/build-storybook/index.spec.ts
@@ -142,7 +142,7 @@ describe('Build Storybook Builder', () => {
});
it('should throw error', async () => {
- buildStandaloneMock.mockRejectedValue(new Error());
+ buildStandaloneMock.mockRejectedValue(true);
const run = await architect.scheduleBuilder('@storybook/angular:start-storybook', {
browserTarget: 'angular-cli:build-2',
diff --git a/app/angular/src/builders/start-storybook/index.spec.ts b/app/angular/src/builders/start-storybook/index.spec.ts
index 657087f4839e..1430ea25e5ba 100644
--- a/app/angular/src/builders/start-storybook/index.spec.ts
+++ b/app/angular/src/builders/start-storybook/index.spec.ts
@@ -124,7 +124,7 @@ describe('Start Storybook Builder', () => {
});
it('should throw error', async () => {
- buildStandaloneMock.mockRejectedValue(new Error());
+ buildStandaloneMock.mockRejectedValue(true);
const run = await architect.scheduleBuilder('@storybook/angular:start-storybook', {
browserTarget: 'angular-cli:build-2',
diff --git a/app/angular/src/builders/utils/build-standalone-errors-handler.ts b/app/angular/src/builders/utils/build-standalone-errors-handler.ts
index d912c0163126..126ad4836c26 100644
--- a/app/angular/src/builders/utils/build-standalone-errors-handler.ts
+++ b/app/angular/src/builders/utils/build-standalone-errors-handler.ts
@@ -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.
+ `;
};
diff --git a/app/angular/src/client/preview/angular-beta/RendererFactory.test.ts b/app/angular/src/client/preview/angular-beta/RendererFactory.test.ts
index d9976268d77d..3d57c6c9ef2e 100644
--- a/app/angular/src/client/preview/angular-beta/RendererFactory.test.ts
+++ b/app/angular/src/client/preview/angular-beta/RendererFactory.test.ts
@@ -22,6 +22,7 @@ describe('RendererFactory', () => {
rootTargetDOMNode = global.document.getElementById('root');
rootDocstargetDOMNode = global.document.getElementById('root-docs');
(platformBrowserDynamic as any).mockImplementation(platformBrowserDynamicTesting);
+ jest.spyOn(console, 'log').mockImplementation(() => {});
});
afterEach(() => {
diff --git a/app/angular/src/client/preview/angular-beta/StorybookModule.ts b/app/angular/src/client/preview/angular-beta/StorybookModule.ts
index 68c443375a83..275b490c18bc 100644
--- a/app/angular/src/client/preview/angular-beta/StorybookModule.ts
+++ b/app/angular/src/client/preview/angular-beta/StorybookModule.ts
@@ -7,7 +7,7 @@ import deprecate from 'util-deprecate';
import { ICollection, StoryFnAngularReturnType } from '../types';
import { storyPropsProvider } from './StorybookProvider';
import { isComponentAlreadyDeclaredInModules } from './utils/NgModulesAnalyzer';
-import { isDeclarable } from './utils/NgComponentAnalyzer';
+import { isDeclarable, isStandaloneComponent } from './utils/NgComponentAnalyzer';
import { createStorybookWrapperComponent } from './StorybookWrapperComponent';
import { computesTemplateFromComponent } from './ComputesTemplateFromComponent';
@@ -61,6 +61,7 @@ export const getStorybookModuleMetadata = (
props
);
+ const isStandalone = isStandaloneComponent(component);
// Look recursively (deep) if the component is not already declared by an import module
const requiresComponentDeclaration =
isDeclarable(component) &&
@@ -68,7 +69,8 @@ export const getStorybookModuleMetadata = (
component,
moduleMetadata.declarations,
moduleMetadata.imports
- );
+ ) &&
+ !isStandalone;
return {
declarations: [
@@ -76,7 +78,11 @@ export const getStorybookModuleMetadata = (
ComponentToInject,
...(moduleMetadata.declarations ?? []),
],
- imports: [BrowserModule, ...(moduleMetadata.imports ?? [])],
+ imports: [
+ BrowserModule,
+ ...(isStandalone ? [component] : []),
+ ...(moduleMetadata.imports ?? []),
+ ],
providers: [storyPropsProvider(storyProps$), ...(moduleMetadata.providers ?? [])],
entryComponents: [...(moduleMetadata.entryComponents ?? [])],
schemas: [...(moduleMetadata.schemas ?? [])],
diff --git a/app/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.test.ts b/app/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.test.ts
index 03eba18a7236..faa7cdce09ff 100644
--- a/app/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.test.ts
+++ b/app/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.test.ts
@@ -19,6 +19,7 @@ import {
isComponent,
isDeclarable,
getComponentDecoratorMetadata,
+ isStandaloneComponent,
} from './NgComponentAnalyzer';
describe('getComponentInputsOutputs', () => {
@@ -235,6 +236,46 @@ describe('isComponent', () => {
});
});
+describe('isStandaloneComponent', () => {
+ it('should return true with a Component with "standalone: true"', () => {
+ // TODO: `standalone` is only available in Angular v14. Remove cast to `any` once
+ // Angular deps are updated to v14.x.x.
+ @Component({ standalone: true } as any)
+ class FooComponent {}
+
+ expect(isStandaloneComponent(FooComponent)).toEqual(true);
+ });
+
+ it('should return false with a Component with "standalone: false"', () => {
+ // TODO: `standalone` is only available in Angular v14. Remove cast to `any` once
+ // Angular deps are updated to v14.x.x.
+ @Component({ standalone: false } as any)
+ class FooComponent {}
+
+ expect(isStandaloneComponent(FooComponent)).toEqual(false);
+ });
+
+ it('should return false with a Component without the "standalone" property', () => {
+ @Component({})
+ class FooComponent {}
+
+ expect(isStandaloneComponent(FooComponent)).toEqual(false);
+ });
+
+ it('should return false with simple class', () => {
+ class FooPipe {}
+
+ expect(isStandaloneComponent(FooPipe)).toEqual(false);
+ });
+
+ it('should return false with Directive', () => {
+ @Directive()
+ class FooDirective {}
+
+ expect(isStandaloneComponent(FooDirective)).toEqual(false);
+ });
+});
+
describe('getComponentDecoratorMetadata', () => {
it('should return Component with a Component', () => {
@Component({ selector: 'foo' })
diff --git a/app/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.ts b/app/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.ts
index ae88972dfe26..36bd036631e3 100644
--- a/app/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.ts
+++ b/app/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.ts
@@ -108,6 +108,18 @@ export const isComponent = (component: any): component is Type => {
return (decorators || []).some((d) => d instanceof Component);
};
+export const isStandaloneComponent = (component: any): component is Type => {
+ if (!component) {
+ return false;
+ }
+
+ const decorators = reflectionCapabilities.annotations(component);
+
+ // TODO: `standalone` is only available in Angular v14. Remove cast to `any` once
+ // Angular deps are updated to v14.x.x.
+ return (decorators || []).some((d) => d instanceof Component && (d as any).standalone);
+};
+
/**
* Returns all component decorator properties
* is used to get all `@Input` and `@Output` Decorator
diff --git a/app/angular/src/server/__mocks-ng-workspace__/with-lib/projects/pattern-lib/tsconfig.lib.json b/app/angular/src/server/__mocks-ng-workspace__/with-lib/projects/pattern-lib/tsconfig.lib.json
index 6e06ad542ed3..557265aa5b56 100644
--- a/app/angular/src/server/__mocks-ng-workspace__/with-lib/projects/pattern-lib/tsconfig.lib.json
+++ b/app/angular/src/server/__mocks-ng-workspace__/with-lib/projects/pattern-lib/tsconfig.lib.json
@@ -2,6 +2,7 @@
{
"extends": "../../tsconfig.json",
"compilerOptions": {
+ "baseUrl": ".",
"outDir": "../../out-tsc/lib",
"target": "es2015",
"declaration": true,
diff --git a/app/angular/src/server/__mocks-ng-workspace__/without-projects-entry/projects/pattern-lib/tsconfig.lib.json b/app/angular/src/server/__mocks-ng-workspace__/without-projects-entry/projects/pattern-lib/tsconfig.lib.json
index 6e06ad542ed3..557265aa5b56 100644
--- a/app/angular/src/server/__mocks-ng-workspace__/without-projects-entry/projects/pattern-lib/tsconfig.lib.json
+++ b/app/angular/src/server/__mocks-ng-workspace__/without-projects-entry/projects/pattern-lib/tsconfig.lib.json
@@ -2,6 +2,7 @@
{
"extends": "../../tsconfig.json",
"compilerOptions": {
+ "baseUrl": ".",
"outDir": "../../out-tsc/lib",
"target": "es2015",
"declaration": true,
diff --git a/app/ember/package.json b/app/ember/package.json
index 8a632a10b484..6d554027c6ed 100644
--- a/app/ember/package.json
+++ b/app/ember/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/ember",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
"homepage": "https://github.com/storybookjs/storybook/tree/main/app/ember",
"bugs": {
@@ -42,10 +42,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/core": "6.5.0-beta.1",
- "@storybook/core-common": "6.5.0-beta.1",
- "@storybook/docs-tools": "6.5.0-beta.1",
- "@storybook/store": "6.5.0-beta.1",
+ "@storybook/core": "6.5.0-rc.1",
+ "@storybook/core-common": "6.5.0-rc.1",
+ "@storybook/docs-tools": "6.5.0-rc.1",
+ "@storybook/store": "6.5.0-rc.1",
"core-js": "^3.8.2",
"global": "^4.4.0",
"react": "16.14.0",
@@ -56,9 +56,10 @@
},
"peerDependencies": {
"@babel/core": "*",
+ "@types/ember__component": "4.0.8",
"babel-plugin-ember-modules-api-polyfill": "^2.12.0",
"babel-plugin-htmlbars-inline-precompile": "2 || 3",
- "ember-source": "^3.16.0"
+ "ember-source": "~3.28.1"
},
"engines": {
"node": ">=10.13.0"
@@ -66,6 +67,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
"sbmodern": "dist/modern/client/index.js"
}
diff --git a/app/ember/src/client/preview/render.ts b/app/ember/src/client/preview/render.ts
index 29f9375680a6..5b18491ae54b 100644
--- a/app/ember/src/client/preview/render.ts
+++ b/app/ember/src/client/preview/render.ts
@@ -1,12 +1,12 @@
import global from 'global';
import dedent from 'ts-dedent';
-import { RenderContext } from '@storybook/store';
+import type { RenderContext } from '@storybook/store';
+// @ts-ignore
+import Component from '@ember/component'; // eslint-disable-line import/no-unresolved
import { OptionsArgs, EmberFramework } from './types';
const { window: globalWindow, document } = global;
-declare let Ember: any;
-
const rootEl = document.getElementById('root');
const config = globalWindow.require(`${globalWindow.STORYBOOK_NAME}/config/environment`);
@@ -38,7 +38,7 @@ function render(options: OptionsArgs, el: HTMLElement) {
.then((instance: any) => {
instance.register(
'component:story-mode',
- Ember.Component.extend({
+ Component.extend({
layout: template || options,
...context,
})
diff --git a/app/html/README.md b/app/html/README.md
index 3fa757d3a7f5..e898ba689536 100644
--- a/app/html/README.md
+++ b/app/html/README.md
@@ -19,6 +19,11 @@ npx sb init -t html
For more information visit: [storybook.js.org](https://storybook.js.org)
+### Typescript
+
+`npx sb init` will select `.ts` starter stories if your `package.json` has typescript as a dependency. If starting a new project,
+run `npm init` and `npm install typescript --save-dev` before initializing storybook to get the typescript starter stories.
+
---
Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish.
diff --git a/app/html/package.json b/app/html/package.json
index d856567c30bf..6cbb274b905f 100644
--- a/app/html/package.json
+++ b/app/html/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/html",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -45,13 +45,13 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "6.5.0-beta.1",
- "@storybook/core": "6.5.0-beta.1",
- "@storybook/core-common": "6.5.0-beta.1",
+ "@storybook/addons": "6.5.0-rc.1",
+ "@storybook/core": "6.5.0-rc.1",
+ "@storybook/core-common": "6.5.0-rc.1",
"@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-rc.1",
+ "@storybook/preview-web": "6.5.0-rc.1",
+ "@storybook/store": "6.5.0-rc.1",
"@types/node": "^14.14.20 || ^16.0.0",
"@types/webpack-env": "^1.16.0",
"core-js": "^3.8.2",
@@ -76,6 +76,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
"sbmodern": "dist/modern/client/index.js"
}
diff --git a/app/preact/package.json b/app/preact/package.json
index 3fb914a80956..dce5332f9e10 100644
--- a/app/preact/package.json
+++ b/app/preact/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preact",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"description": "Storybook for Preact: Develop Preact Component in isolation.",
"keywords": [
"storybook"
@@ -46,11 +46,11 @@
},
"dependencies": {
"@babel/plugin-transform-react-jsx": "^7.12.12",
- "@storybook/addons": "6.5.0-beta.1",
- "@storybook/core": "6.5.0-beta.1",
- "@storybook/core-common": "6.5.0-beta.1",
+ "@storybook/addons": "6.5.0-rc.1",
+ "@storybook/core": "6.5.0-rc.1",
+ "@storybook/core-common": "6.5.0-rc.1",
"@storybook/csf": "0.0.2--canary.4566f4d.1",
- "@storybook/store": "6.5.0-beta.1",
+ "@storybook/store": "6.5.0-rc.1",
"@types/node": "^14.14.20 || ^16.0.0",
"@types/webpack-env": "^1.16.0",
"core-js": "^3.8.2",
@@ -76,6 +76,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
"sbmodern": "dist/modern/client/index.js"
}
diff --git a/app/react/package.json b/app/react/package.json
index 0938def0307b..50a7d901971a 100644
--- a/app/react/package.json
+++ b/app/react/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/react",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -49,16 +49,16 @@
"@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": "6.5.0-beta.1",
- "@storybook/core-common": "6.5.0-beta.1",
+ "@storybook/addons": "6.5.0-rc.1",
+ "@storybook/client-logger": "6.5.0-rc.1",
+ "@storybook/core": "6.5.0-rc.1",
+ "@storybook/core-common": "6.5.0-rc.1",
"@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-rc.1",
+ "@storybook/node-logger": "6.5.0-rc.1",
"@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-rc.1",
"@types/estree": "^0.0.51",
"@types/node": "^14.14.20 || ^16.0.0",
"@types/webpack-env": "^1.16.0",
@@ -119,6 +119,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
"sbmodern": "dist/modern/client/index.js"
}
diff --git a/app/react/src/client/docs/jsxDecorator.test.tsx b/app/react/src/client/docs/jsxDecorator.test.tsx
index 40eb7c57b74d..86e70c1c87e3 100644
--- a/app/react/src/client/docs/jsxDecorator.test.tsx
+++ b/app/react/src/client/docs/jsxDecorator.test.tsx
@@ -284,4 +284,33 @@ describe('jsxDecorator', () => {
''
);
});
+
+ it('handles stories that trigger Suspense', async () => {
+ // if a story function uses a hook or other library that triggers suspense, it will throw a Promise until it is resolved
+ // and then it will return the story content after the promise is resolved
+ const storyFn = jest.fn();
+ storyFn
+ .mockImplementationOnce(() => {
+ throw Promise.resolve();
+ })
+ .mockImplementation(() => {
+ return resolved args story;
+ });
+ const jsx = '';
+ const context = makeContext('args', { __isArgsStory: true, jsx }, {});
+ expect(() => {
+ jsxDecorator(storyFn, context);
+ }).toThrow(Promise);
+ jsxDecorator(storyFn, context);
+ await new Promise((r) => setTimeout(r, 0));
+
+ expect(mockChannel.emit).toHaveBeenCalledTimes(2);
+ expect(mockChannel.emit).nthCalledWith(1, SNIPPET_RENDERED, 'jsx-test--args', '');
+ expect(mockChannel.emit).nthCalledWith(
+ 2,
+ SNIPPET_RENDERED,
+ 'jsx-test--args',
+ '\n resolved args story\n'
+ );
+ });
});
diff --git a/app/react/src/client/docs/jsxDecorator.tsx b/app/react/src/client/docs/jsxDecorator.tsx
index 727ee31e5f98..20a294ea35f8 100644
--- a/app/react/src/client/docs/jsxDecorator.tsx
+++ b/app/react/src/client/docs/jsxDecorator.tsx
@@ -177,7 +177,6 @@ export const jsxDecorator = (
) => {
const channel = addons.getChannel();
const skip = skipJsxRender(context);
- const story = storyFn();
let jsx = '';
@@ -185,6 +184,7 @@ export const jsxDecorator = (
if (!skip) channel.emit(SNIPPET_RENDERED, (context || {}).id, jsx);
});
+ const story = storyFn();
// We only need to render JSX if the source block is actually going to
// consume it. Otherwise it's just slowing us down.
if (skip) {
diff --git a/app/react/src/client/docs/lib/inspection/acornParser.test.ts b/app/react/src/client/docs/lib/inspection/acornParser.test.ts
index 9367f035b708..f49752aed6f8 100644
--- a/app/react/src/client/docs/lib/inspection/acornParser.test.ts
+++ b/app/react/src/client/docs/lib/inspection/acornParser.test.ts
@@ -148,7 +148,7 @@ describe('parse', () => {
});
it('support array', () => {
- const result = parse("['bottom-left', 'botton-center', 'bottom-right']");
+ const result = parse("['bottom-left', 'bottom-center', 'bottom-right']");
const inferredType = result.inferredType as InspectionArray;
expect(inferredType.type).toBe(InspectionType.ARRAY);
diff --git a/app/react/src/client/preview/render.tsx b/app/react/src/client/preview/render.tsx
index 08238aed678a..e2f305158a58 100644
--- a/app/react/src/client/preview/render.tsx
+++ b/app/react/src/client/preview/render.tsx
@@ -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;
@@ -147,4 +147,6 @@ export async function renderToDOM(
}
await renderElement(element, domElement);
+
+ return () => unmountElement(domElement);
}
diff --git a/app/react/src/server/framework-preset-react-docs.test.ts b/app/react/src/server/framework-preset-react-docs.test.ts
index bd86e13da568..7ed80a8cf5f0 100644
--- a/app/react/src/server/framework-preset-react-docs.test.ts
+++ b/app/react/src/server/framework-preset-react-docs.test.ts
@@ -32,7 +32,7 @@ describe('framework-preset-react-docgen', () => {
presets: ['env', 'foo-preset'],
overrides: [
{
- test: /\.(mjs|tsx?|jsx?)$/,
+ test: /\.(cjs|mjs|tsx?|jsx?)$/,
plugins: [
[
babelPluginReactDocgenPath,
diff --git a/app/react/src/server/framework-preset-react-docs.ts b/app/react/src/server/framework-preset-react-docs.ts
index 98f9c12145b9..675d31487c75 100644
--- a/app/react/src/server/framework-preset-react-docs.ts
+++ b/app/react/src/server/framework-preset-react-docs.ts
@@ -19,8 +19,9 @@ export async function babel(config: TransformOptions, options: Options) {
return {
...config,
overrides: [
+ ...(config?.overrides || []),
{
- test: reactDocgen === 'react-docgen' ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/,
+ test: reactDocgen === 'react-docgen' ? /\.(cjs|mjs|tsx?|jsx?)$/ : /\.(cjs|mjs|jsx?)$/,
plugins: [
[
require.resolve('babel-plugin-react-docgen'),
diff --git a/app/server/package.json b/app/server/package.json
index eec71326b66e..7c03eb9ff0af 100644
--- a/app/server/package.json
+++ b/app/server/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/server",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -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-api": "6.5.0-beta.1",
- "@storybook/core": "6.5.0-beta.1",
- "@storybook/core-common": "6.5.0-beta.1",
+ "@storybook/addons": "6.5.0-rc.1",
+ "@storybook/api": "6.5.0-rc.1",
+ "@storybook/client-api": "6.5.0-rc.1",
+ "@storybook/core": "6.5.0-rc.1",
+ "@storybook/core-common": "6.5.0-rc.1",
"@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-rc.1",
+ "@storybook/preview-web": "6.5.0-rc.1",
+ "@storybook/store": "6.5.0-rc.1",
"@types/node": "^14.14.20 || ^16.0.0",
"@types/webpack-env": "^1.16.0",
"core-js": "^3.8.2",
@@ -76,6 +76,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
"sbmodern": "dist/modern/client/index.js"
}
diff --git a/app/svelte/package.json b/app/svelte/package.json
index 13864ca9b2ca..19f255c5964b 100644
--- a/app/svelte/package.json
+++ b/app/svelte/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/svelte",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -46,14 +46,14 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "6.5.0-beta.1",
- "@storybook/client-logger": "6.5.0-beta.1",
- "@storybook/core": "6.5.0-beta.1",
- "@storybook/core-common": "6.5.0-beta.1",
+ "@storybook/addons": "6.5.0-rc.1",
+ "@storybook/client-logger": "6.5.0-rc.1",
+ "@storybook/core": "6.5.0-rc.1",
+ "@storybook/core-common": "6.5.0-rc.1",
"@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-rc.1",
+ "@storybook/node-logger": "6.5.0-rc.1",
+ "@storybook/store": "6.5.0-rc.1",
"core-js": "^3.8.2",
"global": "^4.4.0",
"loader-utils": "^2.0.0",
@@ -83,6 +83,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
"sbmodern": "dist/modern/client/index.js"
}
diff --git a/app/vue/package.json b/app/vue/package.json
index 76e260802448..1a1646d70965 100644
--- a/app/vue/package.json
+++ b/app/vue/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/vue",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -45,13 +45,13 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "6.5.0-beta.1",
- "@storybook/client-logger": "6.5.0-beta.1",
- "@storybook/core": "6.5.0-beta.1",
- "@storybook/core-common": "6.5.0-beta.1",
+ "@storybook/addons": "6.5.0-rc.1",
+ "@storybook/client-logger": "6.5.0-rc.1",
+ "@storybook/core": "6.5.0-rc.1",
+ "@storybook/core-common": "6.5.0-rc.1",
"@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-rc.1",
+ "@storybook/store": "6.5.0-rc.1",
"@types/node": "^14.14.20 || ^16.0.0",
"@types/webpack-env": "^1.16.0",
"core-js": "^3.8.2",
@@ -86,6 +86,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
"sbmodern": "dist/modern/client/index.js"
}
diff --git a/app/vue/src/client/preview/config.ts b/app/vue/src/client/preview/config.ts
index 964f711b2d7c..759c77b9abeb 100644
--- a/app/vue/src/client/preview/config.ts
+++ b/app/vue/src/client/preview/config.ts
@@ -1,4 +1,4 @@
-export { renderToDOM } from './render';
-export { decorateStory } from './decorateStory';
+export { render, renderToDOM } from './render';
+export { decorateStory as applyDecorators } from './decorateStory';
export const parameters = { framework: 'vue' };
diff --git a/app/vue/src/client/preview/render.ts b/app/vue/src/client/preview/render.ts
index 293d5e423afd..0df15a39b692 100644
--- a/app/vue/src/client/preview/render.ts
+++ b/app/vue/src/client/preview/render.ts
@@ -22,7 +22,7 @@ const root = new Vue({
});
export const render: ArgsStoryFn = (props, context) => {
- const { id, component: Component } = context;
+ const { id, component: Component, argTypes } = context;
const component = Component as VueFramework['component'] & {
__docgenInfo?: { displayName: string };
props: Record;
@@ -49,7 +49,7 @@ export const render: ArgsStoryFn = (props, context) => {
}
return {
- props: component.props,
+ props: Object.keys(argTypes),
components: { [componentName]: component },
template: `<${componentName} v-bind="$props" />`,
};
diff --git a/app/vue3/package.json b/app/vue3/package.json
index 00507a3b9cfa..37912dd5606d 100644
--- a/app/vue3/package.json
+++ b/app/vue3/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/vue3",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -45,12 +45,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "6.5.0-beta.1",
- "@storybook/core": "6.5.0-beta.1",
- "@storybook/core-common": "6.5.0-beta.1",
+ "@storybook/addons": "6.5.0-rc.1",
+ "@storybook/core": "6.5.0-rc.1",
+ "@storybook/core-common": "6.5.0-rc.1",
"@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-rc.1",
+ "@storybook/store": "6.5.0-rc.1",
"@types/node": "^14.14.20 || ^16.0.0",
"@types/webpack-env": "^1.16.0",
"core-js": "^3.8.2",
@@ -83,6 +83,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
"sbmodern": "dist/modern/client/index.js"
}
diff --git a/app/vue3/src/client/docs/extractArgTypes.ts b/app/vue3/src/client/docs/extractArgTypes.ts
index c7a3e4199598..9a26e308afc8 100644
--- a/app/vue3/src/client/docs/extractArgTypes.ts
+++ b/app/vue3/src/client/docs/extractArgTypes.ts
@@ -2,7 +2,7 @@ import type { StrictArgTypes } from '@storybook/csf';
import type { ArgTypesExtractor } from '@storybook/docs-tools';
import { hasDocgen, extractComponentProps, convert } from '@storybook/docs-tools';
-const SECTIONS = ['props', 'events', 'slots'];
+const SECTIONS = ['props', 'events', 'slots', 'methods'];
export const extractArgTypes: ArgTypesExtractor = (component) => {
if (!hasDocgen(component)) {
diff --git a/app/vue3/src/client/preview/config.ts b/app/vue3/src/client/preview/config.ts
index 3baf26e63d03..589efca6a13f 100644
--- a/app/vue3/src/client/preview/config.ts
+++ b/app/vue3/src/client/preview/config.ts
@@ -1,4 +1,4 @@
-export { renderToDOM } from './render';
-export { decorateStory } from './decorateStory';
+export { render, renderToDOM } from './render';
+export { decorateStory as applyDecorators } from './decorateStory';
export const parameters = { framework: 'vue3' };
diff --git a/app/vue3/src/server/framework-preset-vue3.ts b/app/vue3/src/server/framework-preset-vue3.ts
index fb4dc76a2886..549ac4c02acd 100644
--- a/app/vue3/src/server/framework-preset-vue3.ts
+++ b/app/vue3/src/server/framework-preset-vue3.ts
@@ -24,7 +24,7 @@ export function webpack(config: Configuration): Configuration {
options: {},
},
{
- test: /\.tsx?$/,
+ test: /\.ts$/,
use: [
{
loader: require.resolve('ts-loader'),
@@ -35,6 +35,19 @@ export function webpack(config: Configuration): Configuration {
},
],
},
+ {
+ test: /\.tsx$/,
+ use: [
+ {
+ loader: require.resolve('ts-loader'),
+ options: {
+ transpileOnly: true,
+ // Note this is different from the `appendTsSuffixTo` above!
+ appendTsxSuffixTo: [/\.vue$/],
+ },
+ },
+ ],
+ },
],
},
resolve: {
diff --git a/app/web-components/package.json b/app/web-components/package.json
index d1a92efaabb4..8ee26167c130 100644
--- a/app/web-components/package.json
+++ b/app/web-components/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/web-components",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
"keywords": [
"lit-html",
@@ -50,15 +50,15 @@
"@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": "6.5.0-beta.1",
- "@storybook/core-common": "6.5.0-beta.1",
+ "@storybook/addons": "6.5.0-rc.1",
+ "@storybook/client-api": "6.5.0-rc.1",
+ "@storybook/client-logger": "6.5.0-rc.1",
+ "@storybook/core": "6.5.0-rc.1",
+ "@storybook/core-common": "6.5.0-rc.1",
"@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-rc.1",
+ "@storybook/preview-web": "6.5.0-rc.1",
+ "@storybook/store": "6.5.0-rc.1",
"@types/node": "^14.14.20 || ^16.0.0",
"@types/webpack-env": "^1.16.0",
"babel-plugin-bundled-import-meta": "^0.3.1",
@@ -82,6 +82,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
"sbmodern": "dist/modern/client/index.js"
}
diff --git a/app/web-components/src/client/docs/sourceDecorator.test.ts b/app/web-components/src/client/docs/sourceDecorator.test.ts
index 9b900bfb83aa..2612be374199 100644
--- a/app/web-components/src/client/docs/sourceDecorator.test.ts
+++ b/app/web-components/src/client/docs/sourceDecorator.test.ts
@@ -1,13 +1,13 @@
import { html } from 'lit-html';
import { styleMap } from 'lit-html/directives/style-map';
import { addons, useEffect } from '@storybook/addons';
-import type { StoryContext } from '@storybook/addons';
import { SNIPPET_RENDERED } from '@storybook/docs-tools';
+import type { StoryContext, WebComponentsFramework } from '..';
import { sourceDecorator } from './sourceDecorator';
jest.mock('@storybook/addons');
const mockedAddons = addons as jest.Mocked;
-const mockedUseEffect = useEffect as jest.Mocked;
+const mockedUseEffect = useEffect as jest.Mock;
expect.addSnapshotSerializer({
print: (val: any) => val,
@@ -16,16 +16,22 @@ expect.addSnapshotSerializer({
const tick = () => new Promise((r) => setTimeout(r, 0));
-const makeContext = (name: string, parameters: any, args: any, extra?: object): StoryContext => ({
- id: `lit-test--${name}`,
- kind: 'js-text',
- name,
- parameters,
- args,
- argTypes: {},
- globals: {},
- ...extra,
-});
+const makeContext = (
+ name: string,
+ parameters: any,
+ args: any,
+ extra?: Partial>
+) =>
+ ({
+ id: `lit-test--${name}`,
+ kind: 'js-text',
+ name,
+ parameters,
+ args,
+ argTypes: {},
+ globals: {},
+ ...extra,
+ } as StoryContext);
describe('sourceDecorator', () => {
let mockChannel: { on: jest.Mock; emit?: jest.Mock };
@@ -106,4 +112,23 @@ describe('sourceDecorator', () => {
sourceDecorator(storyFn, context);
expect(transformSource).toHaveBeenCalledWith('args story', context);
});
+
+ it('should clean lit expression comments', async () => {
+ const storyFn = (args: any) => html`${args.slot}`;
+ const context = makeContext(
+ 'args',
+ { __isArgsStory: true },
+ { slot: 'some content' },
+ { originalStoryFn: storyFn }
+ );
+ // bind args to storyFn, as it's done in Storybook
+ const boundStoryFn = storyFn.bind(null, context.args);
+ sourceDecorator(boundStoryFn, context);
+ await tick();
+ expect(mockChannel.emit).toHaveBeenCalledWith(
+ SNIPPET_RENDERED,
+ 'lit-test--args',
+ 'some content'
+ );
+ });
});
diff --git a/app/web-components/src/client/docs/sourceDecorator.ts b/app/web-components/src/client/docs/sourceDecorator.ts
index e321db557ac9..0b4b01f25f85 100644
--- a/app/web-components/src/client/docs/sourceDecorator.ts
+++ b/app/web-components/src/client/docs/sourceDecorator.ts
@@ -6,6 +6,9 @@ import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools';
import type { WebComponentsFramework } from '..';
+// Taken from https://github.com/lit/lit/blob/main/packages/lit-html/src/test/test-utils/strip-markers.ts
+const LIT_EXPRESSION_COMMENTS = /|/g;
+
function skipSourceRender(context: StoryContext) {
const sourceParams = context?.parameters.docs?.source;
const isArgsStory = context?.parameters.__isArgsStory;
@@ -44,7 +47,10 @@ export function sourceDecorator(
if (!skipSourceRender(context)) {
const container = window.document.createElement('div');
render(story, container);
- source = applyTransformSource(container.innerHTML.replace(//g, ''), context);
+ source = applyTransformSource(
+ container.innerHTML.replace(LIT_EXPRESSION_COMMENTS, ''),
+ context
+ );
}
return story;
diff --git a/docs/addons/addons-api.md b/docs/addons/addons-api.md
index 26decd0e386b..5c0e5b2a6463 100644
--- a/docs/addons/addons-api.md
+++ b/docs/addons/addons-api.md
@@ -362,7 +362,7 @@ The following table details how to use the API values:
| **showPanel** | Boolean | Display panel that shows addon configurations | `true` |
| **panelPosition** | String/Object | Where to show the addon panel | `bottom` or `right` |
| **enableShortcuts** | Boolean | Enable/disable shortcuts | `true` |
-| **isToolshown** | Boolean | Show/hide tool bar | `true` |
+| **showToolbar** | Boolean | Show/hide tool bar | `true` |
| **theme** | Object | Storybook Theme, see next section | `undefined` |
| **selectedPanel** | String | Id to select an addon panel | `storybook/actions/panel` |
| **initialActive** | String | Select the default active tab on Mobile | `sidebar` or `canvas` or `addons` |
diff --git a/docs/addons/install-addons.md b/docs/addons/install-addons.md
index c110299f640e..c12482c7a1d2 100644
--- a/docs/addons/install-addons.md
+++ b/docs/addons/install-addons.md
@@ -2,7 +2,7 @@
title: Install addons
---
-Storybook has [hundreds of reusable addons](/addons) that are packaged as NPM modules. Let's walk through how to extend Storybook by installing and registering addons.
+Storybook has [hundreds of reusable addons](https://storybook.js.org/addons) that are packaged as NPM modules. Let's walk through how to extend Storybook by installing and registering addons.
### Using addons
diff --git a/docs/addons/introduction.md b/docs/addons/introduction.md
index 3ec5dbf1ae93..7558e16786b4 100644
--- a/docs/addons/introduction.md
+++ b/docs/addons/introduction.md
@@ -5,7 +5,7 @@ title: 'Introduction to addons'
Addons extend Storybook with features and integrations that are not built into the core. Most Storybook features are implemented as addons. For instance: [documentation](../writing-docs/introduction.md), [accessibility testing](https://github.com/storybookjs/storybook/tree/master/addons/a11y), [interactive controls](../essentials/controls.md), among others.
The [addon API](./addons-api.md) makes it easy for you to configure and customize Storybook in new ways. There are countless addons made by the community that unlock time-saving workflows.
-Browse our [addon catalog](/addons) to install an existing addon or as inspiration for your own addon.
+Browse our [addon catalog](https://storybook.js.org/addons) to install an existing addon or as inspiration for your own addon.
## Storybook basics
diff --git a/docs/addons/writing-addons.md b/docs/addons/writing-addons.md
index 7b3079ad94a0..6245585bda3d 100644
--- a/docs/addons/writing-addons.md
+++ b/docs/addons/writing-addons.md
@@ -50,14 +50,23 @@ Once you've gone through the prompts, your `package.json` should look like:
### Build system
-We'll need to add the necessary dependencies and make some adjustments. Run the following commands:
+We'll need to add the necessary dependencies and make some adjustments. Run the following command to install the required dependencies:
-```shell
-# Installs React and Babel CLI
-yarn add react react-dom @babel/cli
+
-# Adds Storybook:
-npx sb init
+
`start-storybook -V` |
| `-p`, `--port [number]` | Port to run Storybook
`start-storybook -p 9009` |
| `-h`, `--host [string]` | Host to run Storybook
`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
`start-storybook -s public` |
+| `-s`, `--static-dir` | **Deprecated** [see note](#static-dir-deprecation). Directory where to load static files from, comma-separated list
`start-storybook -s public` |
| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from
`start-storybook -c .storybook` |
-| `--https` | Serve Storybook over HTTPS. Note: You must provide your own certificate information.
`start-storybook --https` |
-| `--ssl-ca` | Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)
`start-storybook --ssl-ca my-certificate` |
+| `--https` | Serve Storybook over HTTPS. Note: You must provide your own certificate information
`start-storybook --https` |
+| `--ssl-ca` | Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)
`start-storybook --ssl-ca my-certificate` |
| `--ssl-cert` | Provide an SSL certificate. (Required with --https)
`start-storybook --ssl-cert my-ssl-certificate` |
| `--ssl-key` | Provide an SSL key. (Required with --https)
`start-storybook --ssl-key my-ssl-key` |
| `--smoke-test` | Exit after successful start
`start-storybook --smoke-test` |
@@ -32,7 +38,8 @@ Usage: start-storybook [options]
| `--debug-webpack` | Display final webpack configurations for debugging purposes
`start-storybook --debug-webpack` |
| `--webpack-stats-json` | Write Webpack Stats JSON to disk
`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)
`start-storybook --docs` |
-| `--no-manager-cache` | Disables Storybook's manager caching mechanism. See note below.
`start-storybook --no-manager-cache` |
+| `--no-manager-cache` | Disables Storybook's manager caching mechanism. See note below
`start-storybook --no-manager-cache` |
+| `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md)
`start-storybook --disable-telemetry` |
💡 The flag --no-manager-cache 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 +61,16 @@ Usage: build-storybook [options]
| ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `-h`, `--help` | Output usage information
`build-storybook --help` |
| `-V`, `--version` | Output the version number
`build-storybook -V` |
-| `-s`, `--static-dir` | **Deprecated** [see note](#static-dir-deprecation). Directory where to load static files from, comma-separated list
`build-storybook -s public` |
+| `-s`, `--static-dir` | **Deprecated** [see note](#static-dir-deprecation).
Directory where to load static files from, comma-separated list
`build-storybook -s public` |
| `-o`, `--output-dir [dir-name]` | Directory where to store built files
`build-storybook -o /my-deployed-storybook` |
| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from
`build-storybook -c .storybook` |
-| `--loglevel [level]` | Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent]
`build-storybook --loglevel warn` |
+| `--loglevel [level]` | Controls level of logging during build.
Available options: `silly`, `verbose`, `info` (default), `warn`, `error`, `silent`
`build-storybook --loglevel warn` |
| `--quiet` | Suppress verbose build output
`build-storybook --quiet` |
| `--no-dll` | Do not use dll reference (no-op)
`build-storybook --no-dll` |
| `--debug-webpack` | Display final webpack configurations for debugging purposes
`build-storybook --debug-webpack` |
| `--webpack-stats-json` | Write Webpack Stats JSON to disk
`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)
`build-storybook --docs` |
+| `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).
`build-storybook --disable-telemetry` |
💡 If you're using npm instead of yarn to publish Storybook, the commands work slightly different. For example, npm run build-storybook -- -o ./path/to/build.
diff --git a/docs/builders/builder-api.md b/docs/builders/builder-api.md
new file mode 100644
index 000000000000..1ac4563f86a8
--- /dev/null
+++ b/docs/builders/builder-api.md
@@ -0,0 +1,163 @@
+---
+title: 'Builder API'
+---
+
+Storybook is architected to support multiple builders, including [Webpack](https://webpack.js.org/), [Vite](https://vitejs.dev/), and [ESBuild](https://esbuild.github.io/). The builder API is the set of interfaces you can use to add a new builder to Storybook.
+
+
+
+## How do builders work?
+
+In Storybook, a builder is responsible for compiling your components and stories into JS bundles that run in the browser. A builder also provides a development server for interactive development and a production mode for optimized bundles.
+
+To opt into a builder, the user must add it as a dependency and then edit their configuration file (`.storybook/main.js`) to enable it. For example, with the Vite builder:
+
+
+
+
+```
+
+## Manual setup
+
+Storybook uses the Webpack 4 builder by default if you don't specify one. If you want to use a different builder in your application, these docs detail how you can set up Storybook's supported builders.
+
+- [**Vite builder**](./vite.md) for bundling your stories with Vite with near-instant HMR.
+- [**Webpack**](./webpack.md) for bundling your stories with Webpack with improved performance
\ No newline at end of file
diff --git a/docs/builders/storybook-builder-workflow.png b/docs/builders/storybook-builder-workflow.png
new file mode 100644
index 000000000000..7cfceb815bea
Binary files /dev/null and b/docs/builders/storybook-builder-workflow.png differ
diff --git a/docs/builders/storybook-builders.png b/docs/builders/storybook-builders.png
new file mode 100644
index 000000000000..ab61ec37bf46
Binary files /dev/null and b/docs/builders/storybook-builders.png differ
diff --git a/docs/builders/vite.md b/docs/builders/vite.md
new file mode 100644
index 000000000000..7bd7eadfcbd6
--- /dev/null
+++ b/docs/builders/vite.md
@@ -0,0 +1,122 @@
+---
+title: 'Vite'
+---
+
+Storybook Vite builder bundles your components and stories with [Vite](https://vitejs.dev/), a fast ESM bundler.
+
+- For applications built with Vite: it allows reusing the existing configuration in Storybook.
+- For applications built with Webpack: it provides faster startup and refresh times, with the disadvantage that your component's execution environment differs from your application.
+
+## Setup
+
+If you ran `npx storybook init` to include Storybook in your Vite application, the builder is already installed and configured for you. If you want, you can also opt into it manually.
+
+Run the following command to install the builder.
+
+
+
+/projectRoot/node_modules/@vue/cli-service/webpack.config.js) to use a certain feature with Storybook. For other generators, make sure to check the documentation for instructions.
+
+
+
+### TypeScript Module Resolution
+
+When working with TypeScript projects, the default Webpack configuration may fail to resolve module aliases defined in your [`tsconfig` file](https://www.typescriptlang.org/tsconfig). To work around this issue you may use [`tsconfig-paths-webpack-plugin`](https://github.com/dividab/tsconfig-paths-webpack-plugin#tsconfig-paths-webpack-plugin) while [extending Storybook's Webpack config](#extending-storybooks-webpack-config) like:
+
+
+
+
`features: { storyStoreV7: true }` |
-| `buildStoriesJson` | Generates a `stories.json` file to help story loading with the on demand mode.
`features: { buildStoriesJson: true }` |
+| `buildStoriesJson` | Generates a `stories.json` file to help story loading with the on demand mode.
`features: { buildStoriesJson: true }` |
| `emotionAlias` | Provides backwards compatibility for Emotion. See the [migration documentation](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#emotion11-quasi-compatibility) for context.
`features: { emotionAlias: false }` |
| `babelModeV7` | Enables the new [Babel configuration](./babel.md#v7-mode) mode for Storybook.
`features: { babelModeV7: true }` |
| `postcss` | Disables the implicit PostCSS warning. See the [migration documentation](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-implicit-postcss-loader) for context.
`features: { postcss: false }` |
| `modernInlineRender` | Enables Storybook's modern inline rendering mode.
`features: { modernInlineRender: false }` |
+| `previewMdx2` | Enables experimental support for [MDX 2](../writing-docs/mdx.md#mdx-2).
`features: { previewMdx2: true }` |
## Configure story loading
@@ -177,19 +178,20 @@ See the vite builder [TypeScript documentation](https://github.com/storybookjs/b
-| Configuration element | Description |
-| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `stories` | The array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.ts` |
-| `staticDirs` | Sets a list of directories of [static files](./images-and-assets.md#serving-static-files-via-storybook-configuration) to be loaded by Storybook
`staticDirs:['../public']` |
-| `addons` | Sets the list of [addons](/addons) loaded by Storybook
`addons:['@storybook/addon-essentials']` |
-| `typescript` | Configures how Storybook handles [TypeScript files](./typescript.md)
`typescript: { check: false, checkOptions: {} }` |
-| `framework` | Configures Storybook based on a set of framework-specific settings
`framework:'@storybook/svelte'` |
-| `core` | Sets Storybook's Webpack configuration
`core:{ builder: 'webpack5'}` |
-| `features` | Enables Storybook's additional features
. See table below for a list of available features `features: { storyStoreV7: true }` |
-| `refs` | Configures [Storybook composition](../sharing/storybook-composition.md)
`refs:{ example: { title: 'ExampleStorybook', url:'https://your-url.com' } }` |
-| `logLevel` | Configures Storybook's logs in the browser terminal. Useful for debugging
`logLevel: 'debug'` |
-| `webpackFinal` | Customize Storybook's [Webpack](./webpack.md) setup
`webpackFinal: async (config:any) => { return config; }` |
+| Configuration element | Description |
+| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `stories` | The array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.ts` |
+| `staticDirs` | Sets a list of directories of [static files](./images-and-assets.md#serving-static-files-via-storybook-configuration) to be loaded by Storybook
`staticDirs:['../public']` |
+| `addons` | Sets the list of [addons](https://storybook.js.org/addons/) loaded by Storybook
`addons:['@storybook/addon-essentials']` |
+| `typescript` | Configures how Storybook handles [TypeScript files](./typescript.md)
`typescript: { check: false, checkOptions: {} }` |
+| `framework` | Configures Storybook based on a set of framework-specific settings
`framework:'@storybook/svelte'` |
+| `core` | Configures Storybook's internal features.
`core: { builder: 'webpack5' }` |
+| `features` | Enables Storybook's additional features.
See table below for a list of available features `features: { storyStoreV7: true }` |
+| `refs` | Configures [Storybook composition](../sharing/storybook-composition.md)
`refs:{ example: { title: 'ExampleStorybook', url:'https://your-url.com' } }` |
+| `logLevel` | Configures Storybook's logs in the browser terminal. Useful for debugging
`logLevel: 'debug'` |
+| `webpackFinal` | Customize Storybook's [Webpack](../builders/webpack.md) setup
`webpackFinal: async (config:any) => { return config; }` |
| `viteFinal` | Customize Storybook's Vite setup when using the [vite builder](https://github.com/storybookjs/builder-vite)
`viteFinal: async (config: Vite.InlineConfig, options: Options) => { return config; }` |
+| `env` | Defines custom Storybook [environment variables](./environment-variables.md#using-storybook-configuration).
`env: (config) => ({...config, EXAMPLE_VAR: 'Example var' }),` |
## Configure story rendering
diff --git a/docs/configure/sidebar-and-urls.md b/docs/configure/sidebar-and-urls.md
index f49f7a3c66ba..1e301206e38f 100644
--- a/docs/configure/sidebar-and-urls.md
+++ b/docs/configure/sidebar-and-urls.md
@@ -2,11 +2,11 @@
title: 'Sidebar & URLS'
---
-Storybook’s sidebar lists all your stories grouped by component. When you have many components, you may also wish to group those components. To do so, you can add the `/` separator to the `title` of your CSF file and Storybook will group the stories into groups based on common prefixes:
+Storybook’s sidebar lists all your stories grouped by component. When you have many components, you may also wish to group those components. To do so, you can add the `/` separator to the `title` of your CSF file, and Storybook will group the stories into groups based on common prefixes:
-We recommend using a nesting scheme that mirrors the filesystem path of the components. For example, if you have a file `components/modals/Alert.js` name the CSF file `components/modals/Alert.stories.js` and title it `Components/Modals/Alert`.
+We recommend using a nesting scheme that mirrors the filesystem path of the components. For example, if you have a file `components/modals/Alert.js`, name the CSF file `components/modals/Alert.stories.js` and title it `Components/Modals/Alert`.
## Roots
@@ -26,76 +26,100 @@ If you’d prefer to show top-level nodes as folders rather than roots, you can
-## Automatically generate titles
+## Permalink to stories
-With CSF 3.0 files, you can choose to leave out a title and let it be inferred from the story's path on disk instead:
+By default, Storybook generates an `id` for each story based on the component title and the story name. This `id` in particular is used in the URL for each story, and that URL can serve as a permalink (primarily when you [publish](../sharing/publish-storybook.md) your Storybook).
+
+Consider the following story:
storybook 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 [storybook repro command](./how-to-reproduce) per our contributing guidelines. If you are trying to link to a non-yarn 2 project, linking will fail.
## Troubleshooting
-`yarn build --all --watch` watches everything but is resource-intensive
+yarn build --all --watch watches everything but is resource-intensive
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`.
diff --git a/docs/contribute/how-to-reproduce.md b/docs/contribute/how-to-reproduce.md
index ebc2ae7f39f3..2936c2be92a7 100644
--- a/docs/contribute/how-to-reproduce.md
+++ b/docs/contribute/how-to-reproduce.md
@@ -21,7 +21,7 @@ Make sure you have:
First, open a terminal and run the following command:
```shell
-npx sb@next repro
+npx storybook@next repro
```
diff --git a/docs/contribute/new-snippets.md b/docs/contribute/new-snippets.md
index 84e4a91439b2..35a88ea36834 100644
--- a/docs/contribute/new-snippets.md
+++ b/docs/contribute/new-snippets.md
@@ -89,11 +89,15 @@ Go through the rest of the documentation and repeat the process.
Before submitting your contribution, we advise you to check your work against the Storybook website. Doing this prevents last-minute issues with the documentation and is also an excellent way for the maintainers to merge faster once you submit the pull request. However, failing to do so will lead one of the maintainers to notify you that your contribution has an issue.
-Start by forking [frontpage repo](https://github.com/storybookjs/frontpage). Then, clone and install the dependencies with the following commands:
+Start by forking [frontpage repo](https://github.com/storybookjs/frontpage) and cloning it locally.
```shell
git clone https://github.com/your-username/frontpage.git
-cd frontpage
+```
+
+Navigate to the `frontpage` directory and install the required dependencies with the following command:
+
+```shell
yarn
```
diff --git a/docs/essentials/interactions.md b/docs/essentials/interactions.md
index 4e1ca5099177..a46bcc13b11a 100644
--- a/docs/essentials/interactions.md
+++ b/docs/essentials/interactions.md
@@ -18,13 +18,16 @@ The interactions are written using a Storybook-instrumented version of [Testing
Since Interactions is still experimental, it doesn't yet ship with Storybook by default. As such, you'll have to install it. You may also want to add our wrappers for Testing Library and Jest.
-```shell
-# With npm
-npm install @storybook/addon-interactions @storybook/jest @storybook/testing-library --save-dev
+
-# With yarn
-yarn add --dev @storybook/addon-interactions @storybook/jest @storybook/testing-library
-```
+storiesOf format has been removed. For the time being, we're still supporting it, and we have documentation for it. But be advised that this is bound to change in the future.
@@ -273,12 +277,81 @@ Yes, with the release of version 6.2, the [`Storyshots addon`](https://www.npmjs
If you run into a situation where this is not the case, you can adjust the `config` object and manually specify the framework (e.g., `vue3`).
-See our documentation on how to customize the [Storyshots configuration](./snapshot-testing.md).
+See our documentation on how to customize the [Storyshots configuration](./writing-tests/snapshot-testing.md).
### Why are my MDX stories not working in IE11?
Currently there's an issue when using MDX stories with IE11. This issue does not apply to [DocsPage](./writing-docs/docs-page.md). If you're interested in helping us fix this issue, read our Contribution guidelines and submit a pull request.
+### Why aren't my code blocks highlighted with Storybook MDX
+
+Out of the box, Storybook provides syntax highlighting for a set of languages (e.g., Javascript, Markdown, CSS, HTML, Typescript, GraphQL) that you can use with your code blocks. If you're writing your custom code blocks with MDX, you'll need to import the syntax highlighter manually. For example, if you're adding a code block for SCSS, adjust your story to the following:
+
+
+
+react-syntax-highlighter's documentation for a list of available languages.
+
+
+Applying this small change will enable you to add syntax highlight for SCSS or any other language available.
+
+### Why aren't my MDX 2 stories working in Storybook?
+
+MDX 2 introduced some changes to how the code is rendered. For example, if you enabled it in your Storybook and you have the following code block:
+
+```
+
+
+```
+
+You'll need to update it to make it compatible with MDX 2.
+
+```
+
+```
+
+See the following [issue](https://github.com/mdx-js/mdx/issues/1945) for more information.
+
+### Why can't I import my own stories into MDX 2?
+
+This is a known issue with MDX 2. We're working to fix it. For now you can apply the following workaround:
+
+```md
+
+
+import { Story } from '@storybook/addon-docs';
+
+import * as stories from './Button.stories.jsx';
+
+react-syntax-highlighter's documentation for a list of available languages.
-
-
-Applying this small change will enable you to add syntax highlight for SCSS or any other language available.
-
### How can my code detect if it is running in Storybook?
You can do this by checking for the `IS_STORYBOOK` global variable, which will equal `true` when running in Storybook. The environment variable `process.env.STORYBOOK` is also set to `true`.
@@ -375,7 +428,7 @@ Although valid, it introduces additional boilerplate code to the story definitio
## Why is Storybook's source loader returning undefined with curried functions?
-This is a known issue with Storybook. If you're interested in getting it fixed, open an issue with a [working reproduction](./contribute/how-to-reproduce) so that it can be triaged and fixed in future releases.
+This is a known issue with Storybook. If you're interested in getting it fixed, open an issue with a [working reproduction](./contribute/how-to-reproduce.md) so that it can be triaged and fixed in future releases.
## Why are my args no longer displaying the default values?
@@ -412,3 +465,15 @@ export default {
},
};
```
+
+### Why isn't Storybook's test runner working?
+
+There's an issue with Storybook's test runner and the latest version of Jest (i.e., version 28), which prevents it from running effectively. As a workaround, you can downgrade Jest to the previous stable version (i.e., version 27), and you'll be able to run it. See the following [issue](https://github.com/storybookjs/test-runner/issues/99) for more information.
+
+### How does Storybook handles enviroment variables?
+
+Storybook has built-in support for [environment variables](./configure/environment-variables.md). By default, environment variables are only available in Node.js code and are not available in the browser as some variables should be kept secret (e.g., API keys) and **not** exposed to anyone visiting the published Storybook.
+
+To expose a variable, you must preface its name with `STORYBOOK_`. So `STORYBOOK_API_URL` will be available in browser code but `API_KEY` will not. Additionally you can also customize which variables are exposed by setting the [`env`](./configure/environment-variables.md#using-storybook-configuration) field in the `.storybook/main.js` file.
+
+Variables are set when JavaScript is compiled so when the development server is started or you build your Storybook. Environment variable files should not be committed to Git as they often contain secrets which are not safe to add to Git. Instead, add `.env.*` to your `.gitignore` file and set up the environment variables manually on your hosting provider (e.g., [GitHub](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository)).
diff --git a/docs/frameworks.js b/docs/frameworks.js
index e634b6612c45..8d2e1156f7b8 100644
--- a/docs/frameworks.js
+++ b/docs/frameworks.js
@@ -117,27 +117,27 @@ module.exports = {
{
name: 'Source',
unsupported: [],
- path: 'writing-docs/doc-blocks#source',
+ path: 'writing-docs/doc-block-source',
},
{
name: 'Dynamic source',
supported: ['react', 'vue', 'angular', 'svelte', 'web-components', 'html'],
- path: 'writing-docs/doc-blocks#source',
+ path: 'writing-docs/doc-block-source',
},
{
name: 'Args Table',
supported: ['react', 'vue', 'angular', 'html', 'ember', 'web-components', 'svelte'],
- path: 'writing-docs/doc-blocks#argstable',
+ path: 'writing-docs/doc-block-argstable',
},
{
name: 'Description',
supported: ['react', 'vue', 'angular', 'ember', 'web-components'],
- path: 'writing-docs/doc-blocks#description',
+ path: 'writing-docs/doc-block-description',
},
{
name: 'Inline stories',
supported: ['react', 'vue', 'web-components', 'html', 'svelte', 'angular'],
- path: 'writing-docs/doc-blocks#inline-rendering',
+ path: 'writing-docs/docs-page#inline-stories-vs-iframe-stories',
},
],
},
diff --git a/docs/get-started/install.md b/docs/get-started/install.md
index 7c24707d5429..8c5fe9ae609d 100644
--- a/docs/get-started/install.md
+++ b/docs/get-started/install.md
@@ -21,7 +21,7 @@ title: 'Install Storybook'
-sb init is not made for empty projects
+storybook init is not made for empty projects
Storybook needs to be installed into a project that is already set up with a framework. It will not work on an empty project. There are many ways to bootstrap an app in a given framework, including:
@@ -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:
@@ -88,6 +89,12 @@ Below are some of the most common installation issues and instructions on how to
+
+
+Storybook collects completely anonymous data to help us improve user experience. Participation is optional, and you may [opt-out](../configure/telemetry.md#how-to-opt-out) if you'd not like to share any information.
+
+
+
If all else fails, try asking for [help](https://storybook.js.org/support)
diff --git a/docs/get-started/installation-command-section/angular.mdx b/docs/get-started/installation-command-section/angular.mdx
index 5d79b9f6544f..33024a1d6619 100644
--- a/docs/get-started/installation-command-section/angular.mdx
+++ b/docs/get-started/installation-command-section/angular.mdx
@@ -2,7 +2,7 @@
```shell
# Add Storybook:
-npx sb init
+npx storybook init
```
- Update your `angular.json` file to include Storybook's custom builder:
diff --git a/docs/get-started/installation-command-section/ember.mdx b/docs/get-started/installation-command-section/ember.mdx
index 4a5dc26f3c7f..6ddc1d135c44 100644
--- a/docs/get-started/installation-command-section/ember.mdx
+++ b/docs/get-started/installation-command-section/ember.mdx
@@ -2,7 +2,7 @@ Use the Storybook CLI to install it with a couple of commands. Run this inside y
```shell
# Add Storybook:
-npx sb init
+npx storybook init
# Add Ember storybook adapter
ember install @storybook/ember-cli-storybook
diff --git a/docs/get-started/installation-command-section/html.mdx b/docs/get-started/installation-command-section/html.mdx
index 3575943e26df..1062b008a7ff 100644
--- a/docs/get-started/installation-command-section/html.mdx
+++ b/docs/get-started/installation-command-section/html.mdx
@@ -2,7 +2,7 @@ Use the Storybook CLI to install it in a single command. Run this inside your _e
```shell
# Add Storybook:
-npx sb init --type html
+npx storybook init --type html
```
If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it.
diff --git a/docs/get-started/installation-command-section/preact.mdx b/docs/get-started/installation-command-section/preact.mdx
index 7dab36ebede0..5e7193f11630 100644
--- a/docs/get-started/installation-command-section/preact.mdx
+++ b/docs/get-started/installation-command-section/preact.mdx
@@ -2,7 +2,7 @@ Use the Storybook CLI to install it in a single command. Run this inside your _e
```shell
# Add Storybook:
-npx sb init
+npx storybook init
```
If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it.
diff --git a/docs/get-started/installation-command-section/react.mdx b/docs/get-started/installation-command-section/react.mdx
index 7dab36ebede0..5e7193f11630 100644
--- a/docs/get-started/installation-command-section/react.mdx
+++ b/docs/get-started/installation-command-section/react.mdx
@@ -2,7 +2,7 @@ Use the Storybook CLI to install it in a single command. Run this inside your _e
```shell
# Add Storybook:
-npx sb init
+npx storybook init
```
If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it.
diff --git a/docs/get-started/installation-command-section/svelte.mdx b/docs/get-started/installation-command-section/svelte.mdx
index 7dab36ebede0..5e7193f11630 100644
--- a/docs/get-started/installation-command-section/svelte.mdx
+++ b/docs/get-started/installation-command-section/svelte.mdx
@@ -2,7 +2,7 @@ Use the Storybook CLI to install it in a single command. Run this inside your _e
```shell
# Add Storybook:
-npx sb init
+npx storybook init
```
If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it.
diff --git a/docs/get-started/installation-command-section/vue.mdx b/docs/get-started/installation-command-section/vue.mdx
index 7dab36ebede0..5e7193f11630 100644
--- a/docs/get-started/installation-command-section/vue.mdx
+++ b/docs/get-started/installation-command-section/vue.mdx
@@ -2,7 +2,7 @@ Use the Storybook CLI to install it in a single command. Run this inside your _e
```shell
# Add Storybook:
-npx sb init
+npx storybook init
```
If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it.
diff --git a/docs/get-started/installation-command-section/web-components.mdx b/docs/get-started/installation-command-section/web-components.mdx
index 7dab36ebede0..5e7193f11630 100644
--- a/docs/get-started/installation-command-section/web-components.mdx
+++ b/docs/get-started/installation-command-section/web-components.mdx
@@ -2,7 +2,7 @@ Use the Storybook CLI to install it in a single command. Run this inside your _e
```shell
# Add Storybook:
-npx sb init
+npx storybook init
```
If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it.
diff --git a/docs/get-started/installation-problems/angular.mdx b/docs/get-started/installation-problems/angular.mdx
index 773e23f801ac..8113277199e3 100644
--- a/docs/get-started/installation-problems/angular.mdx
+++ b/docs/get-started/installation-problems/angular.mdx
@@ -1,13 +1,19 @@
- Add the `--type angular` flag to the installation command to set up Storybook manually:
```shell
- npx sb init --type angular
+ npx storybook init --type angular
+ ```
+
+- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
+
+ ```shell
+ npx storybook init --use-npm
```
- Storybook supports Webpack 5 out of the box. If you're upgrading from a previous version, run the following command to enable it:
```shell
- npx sb@next automigrate
+ npx storybook@next automigrate
```
Check the [Migration Guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#automigrate) for more information on how to set up Webpack 5.
@@ -19,7 +25,7 @@
- If you need further customization to the Storybook builder configuration, you can use the following table as a reference:
| Configuration element | Description |
-|------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `"browserTarget"` | Build target to be served using the following format.
`"example-project:builder:config"` |
| `"tsConfig"` | Location of the TypeScript configuration file, relative to the current workspace.
`"tsConfig": "./tsconfig.json"`. |
| `"port"` | Port used by Storybook.
`"port": 6006` |
diff --git a/docs/get-started/installation-problems/ember.mdx b/docs/get-started/installation-problems/ember.mdx
index 23856fe3d542..04920a346755 100644
--- a/docs/get-started/installation-problems/ember.mdx
+++ b/docs/get-started/installation-problems/ember.mdx
@@ -1,7 +1,7 @@
- Add the `--type ember` flag to the installation command to set up Storybook manually:
```shell
- npx sb init --type ember
+ npx storybook init --type ember
```
- During the install process, if you get the following warning message:
@@ -14,4 +14,10 @@
Update the [`@storybook/ember-cli-storybook`](https://www.npmjs.com/package/@storybook/ember-cli-storybook) package to the latest version to fix it.
+- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
+
+ ```shell
+ npx storybook init --use-npm
+ ```
+
- For other installation issues, check the [Ember README](../../app/ember/README.md) for additional instructions.
\ No newline at end of file
diff --git a/docs/get-started/installation-problems/html.mdx b/docs/get-started/installation-problems/html.mdx
index d03ae5eb9385..8bd4eae77abe 100644
--- a/docs/get-started/installation-problems/html.mdx
+++ b/docs/get-started/installation-problems/html.mdx
@@ -1,7 +1,7 @@
- Add the `--type html` flag to the installation command to set up Storybook manually:
```shell
- npx sb init --type html
+ npx storybook init --type html
```
- For other installation issues, check the [Html README](../../app/html/README.md) for additional instructions.
\ No newline at end of file
diff --git a/docs/get-started/installation-problems/preact.mdx b/docs/get-started/installation-problems/preact.mdx
index 3b1a2b94a1bd..d3c98c8a2f38 100644
--- a/docs/get-started/installation-problems/preact.mdx
+++ b/docs/get-started/installation-problems/preact.mdx
@@ -1,7 +1,13 @@
- Add the `--type preact` flag to the installation command to set up Storybook manually:
```shell
- npx sb init --type preact
+ npx storybook init --type preact
+ ```
+
+ - Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
+
+ ```shell
+ npx storybook init --use-npm
```
- For other installation issues, check the [Preact README](../../app/preact/README.md) for additional instructions.
\ No newline at end of file
diff --git a/docs/get-started/installation-problems/react.mdx b/docs/get-started/installation-problems/react.mdx
index 36f517bcdaff..6f2853b02b41 100644
--- a/docs/get-started/installation-problems/react.mdx
+++ b/docs/get-started/installation-problems/react.mdx
@@ -1,13 +1,19 @@
- Add the `--type react` flag to the installation command to set up Storybook manually:
```shell
- npx sb init --type react
+ npx storybook init --type react
+ ```
+
+ - Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
+
+ ```shell
+ npx storybook init --use-npm
```
- Storybook supports Webpack 5 out of the box. If you're upgrading from a previous version, run the following command to enable it:
```shell
- npx sb@next automigrate
+ npx storybook@next automigrate
```
Check the [Migration Guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#cra5-upgrade) for more information on how to set up Webpack 5.
diff --git a/docs/get-started/installation-problems/svelte.mdx b/docs/get-started/installation-problems/svelte.mdx
index 2b53693d98c8..0fa6d9782b37 100644
--- a/docs/get-started/installation-problems/svelte.mdx
+++ b/docs/get-started/installation-problems/svelte.mdx
@@ -1,7 +1,13 @@
- Add the `--type svelte` flag to the installation command to set up Storybook manually:
```shell
- npx sb init --type svelte
+ npx storybook init --type svelte
+ ```
+
+ - Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
+
+ ```shell
+ npx storybook init --use-npm
```
- For issues with Svelte Native Story Format, check the [Svelte Story Format addon repository](https://github.com/storybookjs/addon-svelte-csf) for instructions.
diff --git a/docs/get-started/installation-problems/vue.mdx b/docs/get-started/installation-problems/vue.mdx
index 61ab98ead519..3caa0a56199e 100644
--- a/docs/get-started/installation-problems/vue.mdx
+++ b/docs/get-started/installation-problems/vue.mdx
@@ -2,10 +2,16 @@
```shell
# For Vue 2 projects
- npx sb init --type vue
+ npx storybook init --type vue
# For Vue 3 projects
- npx sb init --type vue3
+ npx storybook init --type vue3
+ ```
+
+ - Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
+
+ ```shell
+ npx storybook init --use-npm
```
- For other installation issues, check the [Vue 2 README](../../app/vue/README.md), or the [Vue 3 README](../../app/vue3/README.md) for additional instructions.
diff --git a/docs/get-started/installation-problems/web-components.mdx b/docs/get-started/installation-problems/web-components.mdx
index 21098fcf6aad..09841ea19343 100644
--- a/docs/get-started/installation-problems/web-components.mdx
+++ b/docs/get-started/installation-problems/web-components.mdx
@@ -1,7 +1,7 @@
- Add the `--type web_components` flag to the installation command to set up Storybook manually:
```shell
- npx sb init --type web_components
+ npx storybook init --type web_components
```
- For other installation issues, check the [Web Components README](../../app/web-components/README.md) for additional instructions.
\ No newline at end of file
diff --git a/docs/get-started/setup.md b/docs/get-started/setup.md
index e6cd39d8b027..2959e5685ddd 100644
--- a/docs/get-started/setup.md
+++ b/docs/get-started/setup.md
@@ -42,20 +42,20 @@ Storybook comes with a permissive [default configuration](../configure/overview.
Your project may have additional requirements before components can be rendered in isolation. This warrants customizing configuration further. There are three broad categories of configuration you might need.
-Build configuration like webpack and Babel
+Build configuration like Webpack and Babel
If you see errors on the CLI when you run the `yarn storybook` command, you likely need to make changes to Storybook’s build configuration. Here are some things to try:
- [Presets](../addons/addon-types.md) bundle common configurations for various technologies into Storybook. In particular, presets exist for Create React App, SCSS and Ant Design.
- Specify a custom [Babel configuration](../configure/babel.md#custom-babel-config) for Storybook. Storybook automatically tries to use your project’s config if it can.
-- Adjust the [webpack configuration](../configure/webpack.md) that Storybook uses. Try patching in your own configuration if needed.
+- Adjust the [Webpack configuration](../builders/webpack.md) that Storybook uses. Try patching in your own configuration if needed.
Runtime configuration
-If Storybook builds but you see an error immediately when connecting to it in the browser, in that case, chances are one of your input files is not compiling/transpiling correctly to be interpreted by the browser. Storybook supports modern browsers and IE11, but you may need to check the Babel and webpack settings (see above) to ensure your component code works correctly.
+If Storybook builds but you see an error immediately when connecting to it in the browser, in that case, chances are one of your input files is not compiling/transpiling correctly to be interpreted by the browser. Storybook supports modern browsers and IE11, but you may need to check the Babel and Webpack settings (see above) to ensure your component code works correctly.
@@ -104,7 +104,7 @@ If you are using CSS-in-JS, chances are your styles are working because they’r
@import CSS into components
-Storybook allows you to import CSS files in your components directly. But in some cases you may need to [tweak its webpack configuration](../configure/webpack.md#extendingstorybooks-webpack-config). Angular components require [a special import](../configure/styling-and-css.md#importing-css-files).
+Storybook allows you to import CSS files in your components directly. But in some cases you may need to [tweak its Webpack configuration](../builders/webpack.md#extendingstorybooks-webpack-config). Angular components require [a special import](../configure/styling-and-css.md#importing-css-files).
diff --git a/docs/get-started/whats-a-story.md b/docs/get-started/whats-a-story.md
index 8425cc063cfc..c349c1768787 100644
--- a/docs/get-started/whats-a-story.md
+++ b/docs/get-started/whats-a-story.md
@@ -93,6 +93,6 @@ Stories are also helpful for checking that UI continues to look correct as you m
/>
-Checking component’s stories as you develop helps prevent accidental regressions. Tools that integrate with Storybook can also [automate](../writing-tests/introduction.md) this for you.
+Checking component’s stories as you develop helps prevent accidental regressions. [Tools that integrate with Storybook can automate this](../writing-tests/introduction.md) for you.
Now that we’ve seen the basic anatomy of a story let’s see how we use Storybook’s UI to develop stories.
diff --git a/docs/sharing/design-integrations.md b/docs/sharing/design-integrations.md
index 48f87006987a..58c5a88e7dfd 100644
--- a/docs/sharing/design-integrations.md
+++ b/docs/sharing/design-integrations.md
@@ -123,7 +123,7 @@ Click the "Design" tab in the addon panel to view the embedded Figma design.
## Zeplin
-[Zeplin](https://zeplin.io/) is a design tool that generates styleguides from [Sketch](https://www.sketch.com/), [Figma](https://www.figma.com/), and [Adobe XD](https://www.adobe.com/en/products/xd.html).
+[Zeplin](https://zeplin.io/) is a design tool that generates styleguides from [Sketch](https://www.sketch.com/), [Figma](https://www.figma.com/), and [Adobe XD](https://www.adobe.com/products/xd.html).
Use the [Zeplin addon](https://storybook.js.org/addons/storybook-zeplin) to connect Storybook. The addon displays designs from Zeplin alongside the currently selected story. It includes convenient tooling to overlay the design image atop the live component.
diff --git a/docs/sharing/publish-storybook.md b/docs/sharing/publish-storybook.md
index f260dc6f99aa..2e6794a0a923 100644
--- a/docs/sharing/publish-storybook.md
+++ b/docs/sharing/publish-storybook.md
@@ -21,7 +21,8 @@ First, we'll need to build Storybook as a static web application. The functional
paths={[
'angular/custom-build-script-production.script-for-builder.js.mdx',
'angular/build-storybook-production-mode.with-builder.js.mdx',
- 'common/build-storybook-production-mode.js.mdx',
+ 'common/build-storybook-production-mode.yarn.js.mdx',
+ 'common/build-storybook-production-mode.npm.js.mdx',
]}
/>
@@ -49,13 +50,16 @@ To get started, sign up with your GitHub, GitLab, Bitbucket, or email and genera
Next, install the [Chromatic CLI](https://www.npmjs.com/package/chromatic) package from npm:
-```shell
-# With npm
-npm install --save-dev chromatic
+
-# With yarn
-yarn add --dev chromatic
-```
+>('env');
+ // Stringify env variables after getting `envPrefix` from the final config
+ const envs = stringifyProcessEnvs(envsRaw, finalConfig.envPrefix);
+ // Update `define`
+ finalConfig.define = {
+ ...finalConfig.define,
+ ...envs,
+ };
+
+ await viteBuild(finalConfig);
+}
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-builder-api-configuration-options.ts.mdx b/docs/snippets/common/storybook-builder-api-configuration-options.ts.mdx
new file mode 100644
index 000000000000..6e802781ee3a
--- /dev/null
+++ b/docs/snippets/common/storybook-builder-api-configuration-options.ts.mdx
@@ -0,0 +1,36 @@
+```ts
+// vite-server.ts
+
+import { stringifyProcessEnvs } from './envs';
+import { getOptimizeDeps } from './optimizeDeps';
+import { commonConfig } from './vite-config';
+
+import type { EnvsRaw, ExtendedOptions } from './types';
+
+export async function createViteServer(options: ExtendedOptions, devServer: Server) {
+ const { port, presets } = options;
+
+ // Defines the baseline config.
+ const baseConfig = await commonConfig(options, 'development');
+ const defaultConfig = {
+ ...baseConfig,
+ server: {
+ middlewareMode: true,
+ hmr: {
+ port,
+ server: devServer,
+ },
+ fs: {
+ strict: true,
+ },
+ },
+ optimizeDeps: await getOptimizeDeps(baseConfig, options),
+ };
+
+ const finalConfig = await presets.apply('viteFinal', defaultConfig, options);
+
+ const envsRaw = await presets.apply>('env');
+
+ // Remainder implementation
+}
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-builder-api-dev-server.ts.mdx b/docs/snippets/common/storybook-builder-api-dev-server.ts.mdx
new file mode 100644
index 000000000000..4f37414bf9fa
--- /dev/null
+++ b/docs/snippets/common/storybook-builder-api-dev-server.ts.mdx
@@ -0,0 +1,22 @@
+```ts
+// server.ts
+
+import { createServer } from 'vite';
+
+export async function createViteServer(options: ExtendedOptions, devServer: Server) {
+ const { port } = options;
+ // Remainder server configuration
+
+ // Creates the server.
+ return createServer({
+ // The server configuration goes here
+ server: {
+ middlewareMode: true,
+ hmr: {
+ port,
+ server: devServer,
+ },
+ },
+ });
+}
+```
diff --git a/docs/snippets/common/storybook-builder-api-interface.ts.mdx b/docs/snippets/common/storybook-builder-api-interface.ts.mdx
new file mode 100644
index 000000000000..d8cbd038c15b
--- /dev/null
+++ b/docs/snippets/common/storybook-builder-api-interface.ts.mdx
@@ -0,0 +1,22 @@
+```ts
+export interface Builder {
+ start: (args: {
+ options: Options;
+ startTime: ReturnType;
+ router: Router;
+ server: Server;
+ }) => Promise;
+ bail: (e?: Error) => Promise;
+ }>;
+ build: (arg: {
+ options: Options;
+ startTime: ReturnType;
+ }) => Promise;
+ bail: (e?: Error) => Promise;
+ getConfig: (options: Options) => Promise;
+ corePresets?: string[];
+ overridePresets?: string[];
+}
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-builder-api-mdx.ts.mdx b/docs/snippets/common/storybook-builder-api-mdx.ts.mdx
new file mode 100644
index 000000000000..e9591db2ad4f
--- /dev/null
+++ b/docs/snippets/common/storybook-builder-api-mdx.ts.mdx
@@ -0,0 +1,20 @@
+```ts
+// mdx-plugin.ts
+
+import mdx from 'vite-plugin-mdx';
+
+import { createCompiler } from '@storybook/csf-tools/mdx';
+
+export function mdxPlugin() {
+ return mdx((filename) => {
+ const compilers = [];
+
+ if (filename.endsWith('stories.mdx') || filename.endsWith('story.mdx')) {
+ compilers.push(createCompiler({}));
+ }
+ return {
+ compilers,
+ };
+ });
+}
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-builder-api-preview-exports.ts.mdx b/docs/snippets/common/storybook-builder-api-preview-exports.ts.mdx
new file mode 100644
index 000000000000..0fd6743bacd1
--- /dev/null
+++ b/docs/snippets/common/storybook-builder-api-preview-exports.ts.mdx
@@ -0,0 +1,82 @@
+```ts
+// codegen-iframe-script.ts
+
+import { virtualPreviewFile, virtualStoriesFile } from './virtual-file-names';
+import { transformAbsPath } from './utils/transform-abs-path';
+import type { ExtendedOptions } from './types';
+
+export async function generateIframeScriptCode(options: ExtendedOptions) {
+ const { presets, frameworkPath, framework } = options;
+ const frameworkImportPath = frameworkPath || `@storybook/${framework}`;
+
+ const presetEntries = await presets.apply('config', [], options);
+ const configEntries = [...presetEntries].filter(Boolean);
+
+ const absoluteFilesToImport = (files: string[], name: string) =>
+ files
+ .map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'${transformAbsPath(el)}'`)
+ .join('\n');
+
+ const importArray = (name: string, length: number) =>
+ new Array(length).fill(0).map((_, i) => `${name}_${i}`);
+
+ const code = `
+ // Ensure that the client API is initialized by the framework before any other iframe code
+ // is loaded. That way our client-apis can assume the existence of the API+store
+ import { configure } from '${frameworkImportPath}';
+
+ import {
+ addDecorator,
+ addParameters,
+ addArgTypesEnhancer,
+ addArgsEnhancer,
+ setGlobalRender
+ } from '@storybook/client-api';
+ import { logger } from '@storybook/client-logger';
+ ${absoluteFilesToImport(configEntries, 'config')}
+ import * as preview from '${virtualPreviewFile}';
+ import { configStories } from '${virtualStoriesFile}';
+
+ const configs = [${importArray('config', configEntries.length)
+ .concat('preview.default')
+ .join(',')}].filter(Boolean)
+
+ configs.forEach(config => {
+ Object.keys(config).forEach((key) => {
+ const value = config[key];
+ switch (key) {
+ case 'args':
+ case 'argTypes': {
+ return logger.warn('Invalid args/argTypes in config, ignoring.', JSON.stringify(value));
+ }
+ case 'decorators': {
+ return value.forEach((decorator) => addDecorator(decorator, false));
+ }
+ case 'parameters': {
+ return addParameters({ ...value }, false);
+ }
+ case 'render': {
+ return setGlobalRender(value)
+ }
+ case 'globals':
+ case 'globalTypes': {
+ const v = {};
+ v[key] = value;
+ return addParameters(v, false);
+ }
+ case 'decorateStory':
+ case 'renderToDOM': {
+ return null;
+ }
+ default: {
+ // eslint-disable-next-line prefer-template
+ return console.log(key + ' was not supported :( !');
+ }
+ }
+ });
+ })
+ configStories(configure);
+ `.trim();
+ return code;
+}
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-builder-api-shutdown-server.ts.mdx b/docs/snippets/common/storybook-builder-api-shutdown-server.ts.mdx
new file mode 100644
index 000000000000..03144c66ca7d
--- /dev/null
+++ b/docs/snippets/common/storybook-builder-api-shutdown-server.ts.mdx
@@ -0,0 +1,24 @@
+```ts
+// index.ts
+
+import { createViteServer } from './vite-server';
+
+export const start: ViteBuilder['start'] = async ({ options, server: devServer }) => {
+ // Remainder implementation goes here
+
+ const server = await createViteServer(options as ExtendedOptions, devServer);
+ async function bail(e?: Error): Promise {
+ try {
+ return await server.close();
+ } catch (err) {
+ console.warn('unable to close the server');
+ }
+ throw e;
+ }
+
+ return {
+ bail,
+ totalTime: process.hrtime(startTime),
+ };
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-config-layout.js.mdx b/docs/snippets/common/storybook-config-layout.js.mdx
index 550254d31dd3..c36446aebea2 100644
--- a/docs/snippets/common/storybook-config-layout.js.mdx
+++ b/docs/snippets/common/storybook-config-layout.js.mdx
@@ -9,7 +9,7 @@ addons.setConfig({
showPanel: true,
panelPosition: 'bottom',
enableShortcuts: true,
- isToolshown: true,
+ showToolbar: true,
theme: undefined,
selectedPanel: undefined,
initialActive: 'sidebar',
@@ -18,11 +18,11 @@ addons.setConfig({
collapsedRoots: ['other'],
},
toolbar: {
- title: { hidden: false, },
- zoom: { hidden: false, },
- eject: { hidden: false, },
- copy: { hidden: false, },
- fullscreen: { hidden: false, },
+ title: { hidden: false },
+ zoom: { hidden: false },
+ eject: { hidden: false },
+ copy: { hidden: false },
+ fullscreen: { hidden: false },
},
});
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-csf-3-auto-title-redundant.js.mdx b/docs/snippets/common/storybook-csf-3-auto-title-redundant.js.mdx
new file mode 100644
index 000000000000..26c9d0997b57
--- /dev/null
+++ b/docs/snippets/common/storybook-csf-3-auto-title-redundant.js.mdx
@@ -0,0 +1,17 @@
+```js
+// components/MyComponent/MyComponent.stories.js|jsx|ts|tsx
+
+import { MyComponent } from './MyComponent.js'
+
+export default {
+ component: MyComponent,
+ title: 'components/MyComponent/MyComponent',
+};
+
+export const Default = {
+ args: {
+ something: 'Something else',
+ },
+};
+
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-debug-webpack-dev.npm.js.mdx b/docs/snippets/common/storybook-debug-webpack-dev.npm.js.mdx
new file mode 100644
index 000000000000..080af4a1debf
--- /dev/null
+++ b/docs/snippets/common/storybook-debug-webpack-dev.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm run storybook -- --debug-webpack
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-debug-webpack-dev.yarn.js.mdx b/docs/snippets/common/storybook-debug-webpack-dev.yarn.js.mdx
new file mode 100644
index 000000000000..8dbc7b2b49e4
--- /dev/null
+++ b/docs/snippets/common/storybook-debug-webpack-dev.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn storybook --debug-webpack
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-debug-webpack-prod.npm.js.mdx b/docs/snippets/common/storybook-debug-webpack-prod.npm.js.mdx
new file mode 100644
index 000000000000..5ca3edbb934f
--- /dev/null
+++ b/docs/snippets/common/storybook-debug-webpack-prod.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm run build-storybook -- --debug-webpack
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-debug-webpack-prod.yarn.js.mdx b/docs/snippets/common/storybook-debug-webpack-prod.yarn.js.mdx
new file mode 100644
index 000000000000..1b2c9df57924
--- /dev/null
+++ b/docs/snippets/common/storybook-debug-webpack-prod.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn build-storybook --debug-webpack
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-disable-telemetry-env.env-var.js.mdx b/docs/snippets/common/storybook-disable-telemetry-env.env-var.js.mdx
new file mode 100644
index 000000000000..9ed1c3e5430d
--- /dev/null
+++ b/docs/snippets/common/storybook-disable-telemetry-env.env-var.js.mdx
@@ -0,0 +1,3 @@
+```shell
+STORYBOOK_DISABLE_TELEMETRY=1 yarn storybook
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-disable-telemetry-flag.npm.js.mdx b/docs/snippets/common/storybook-disable-telemetry-flag.npm.js.mdx
new file mode 100644
index 000000000000..81212a40c93a
--- /dev/null
+++ b/docs/snippets/common/storybook-disable-telemetry-flag.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm run storybook -- --disable-telemetry
+```
diff --git a/docs/snippets/common/storybook-disable-telemetry-flag.yarn.js.mdx b/docs/snippets/common/storybook-disable-telemetry-flag.yarn.js.mdx
new file mode 100644
index 000000000000..c9e70448cefa
--- /dev/null
+++ b/docs/snippets/common/storybook-disable-telemetry-flag.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn storybook --disable-telemetry
+```
diff --git a/docs/snippets/common/storybook-main-auto-title-custom.js.mdx b/docs/snippets/common/storybook-main-auto-title-custom.js.mdx
new file mode 100644
index 000000000000..96b6e0408971
--- /dev/null
+++ b/docs/snippets/common/storybook-main-auto-title-custom.js.mdx
@@ -0,0 +1,15 @@
+```js
+// .storybook/main.js
+
+module.exports = {
+ stories: [{ directory: '../src', titlePrefix: 'Custom' }],
+ addons: [
+ '@storybook/addon-links',
+ '@storybook/addon-essentials',
+ '@storybook/addon-interactions',
+ ],
+ core: {
+ builder: 'webpack5',
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-main-configuration-src-dir.main-js.js.mdx b/docs/snippets/common/storybook-main-configuration-src-dir.main-js.js.mdx
new file mode 100644
index 000000000000..f7933dbf6e67
--- /dev/null
+++ b/docs/snippets/common/storybook-main-configuration-src-dir.main-js.js.mdx
@@ -0,0 +1,15 @@
+```js
+// ./storybook/main.js
+
+module.exports = {
+ stories: ['../src'],
+ addons: [
+ '@storybook/addon-links',
+ '@storybook/addon-essentials',
+ '@storybook/addon-interactions',
+ ],
+ core: {
+ builder: 'webpack5'
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-main-disable-telemetry.main-js.js.mdx b/docs/snippets/common/storybook-main-disable-telemetry.main-js.js.mdx
new file mode 100644
index 000000000000..c7786a174244
--- /dev/null
+++ b/docs/snippets/common/storybook-main-disable-telemetry.main-js.js.mdx
@@ -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
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-main-disable-telemetry.main-ts.ts.mdx b/docs/snippets/common/storybook-main-disable-telemetry.main-ts.ts.mdx
new file mode 100644
index 000000000000..1f707e2d95e7
--- /dev/null
+++ b/docs/snippets/common/storybook-main-disable-telemetry.main-ts.ts.mdx
@@ -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;
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-main-enable-mdx2.js.mdx b/docs/snippets/common/storybook-main-enable-mdx2.js.mdx
new file mode 100644
index 000000000000..fe80c1d4c8b7
--- /dev/null
+++ b/docs/snippets/common/storybook-main-enable-mdx2.js.mdx
@@ -0,0 +1,11 @@
+```js
+// .storybook/main.js|ts
+
+module.exports = {
+ stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+ features: {
+ previewMdx2: true, // 👈 MDX 2 enabled here
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-main-enable-transcludemarkdown.js.mdx b/docs/snippets/common/storybook-main-enable-transcludemarkdown.js.mdx
new file mode 100644
index 000000000000..cb07d5763454
--- /dev/null
+++ b/docs/snippets/common/storybook-main-enable-transcludemarkdown.js.mdx
@@ -0,0 +1,22 @@
+```js
+// .storybook/main.js|ts
+
+module.exports = {
+ stories: [
+ //👇 Changes the load order of our stories. First loads the Changelog page
+ '../src/Changelog.stories.mdx',
+ '../stories/**/*.stories.mdx',
+ '../stories/**/*.stories.@(js|jsx|ts|tsx)'
+ ],
+ addons: [
+ '@storybook/addon-links',
+ '@storybook/addon-essentials',
+ {
+ name: '@storybook/addon-docs',
+ options: {
+ transcludeMarkdown: true, //👈 Set transcludeMarkdown to true
+ },
+ },
+ ],
+};
+```
diff --git a/docs/snippets/common/storybook-main-with-single-static-dir.js.mdx b/docs/snippets/common/storybook-main-with-single-static-dir.js.mdx
index 51f72b251d8f..12ca0636ba6b 100644
--- a/docs/snippets/common/storybook-main-with-single-static-dir.js.mdx
+++ b/docs/snippets/common/storybook-main-with-single-static-dir.js.mdx
@@ -2,8 +2,8 @@
// .storybook/main.js
module.exports = {
- stories: [],
- addons: [],
- staticDirs: ['../public'],
+ stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+ staticDirs: ['../public'], //👈 Configures the static asset folder in Storybook
};
```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-manager-render-label-stories.js.mdx b/docs/snippets/common/storybook-manager-render-label-stories.js.mdx
new file mode 100644
index 000000000000..a40abfbadc97
--- /dev/null
+++ b/docs/snippets/common/storybook-manager-render-label-stories.js.mdx
@@ -0,0 +1,13 @@
+```js
+// .storybook/manager.js
+
+import { addons } from '@storybook/addons';
+
+import startCase from 'lodash/startCase';
+
+addons.setConfig({
+ sidebar: {
+ renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)),
+ },
+});
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-mdx2-install.npm.js.mdx b/docs/snippets/common/storybook-mdx2-install.npm.js.mdx
new file mode 100644
index 000000000000..6f6b5f63daad
--- /dev/null
+++ b/docs/snippets/common/storybook-mdx2-install.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm install @storybook/mdx2-csf --save-dev
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-mdx2-install.yarn.js.mdx b/docs/snippets/common/storybook-mdx2-install.yarn.js.mdx
new file mode 100644
index 000000000000..6c80c7bba428
--- /dev/null
+++ b/docs/snippets/common/storybook-mdx2-install.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn add --dev @storybook/mdx2-csf
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-msw-generate.msw.js.mdx b/docs/snippets/common/storybook-msw-generate.msw.js.mdx
new file mode 100644
index 000000000000..413d5bf267e2
--- /dev/null
+++ b/docs/snippets/common/storybook-msw-generate.msw.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npx msw init public/
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-msw-install.npm.js.mdx b/docs/snippets/common/storybook-msw-install.npm.js.mdx
new file mode 100644
index 000000000000..2a8608ebb293
--- /dev/null
+++ b/docs/snippets/common/storybook-msw-install.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm install msw msw-storybook-addon --save-dev
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-msw-install.yarn.js.mdx b/docs/snippets/common/storybook-msw-install.yarn.js.mdx
new file mode 100644
index 000000000000..ff285f0d7176
--- /dev/null
+++ b/docs/snippets/common/storybook-msw-install.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn add --dev msw msw-storybook-addon
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-preview-register-msw-addon.js.mdx b/docs/snippets/common/storybook-preview-register-msw-addon.js.mdx
new file mode 100644
index 000000000000..d1b97095311a
--- /dev/null
+++ b/docs/snippets/common/storybook-preview-register-msw-addon.js.mdx
@@ -0,0 +1,25 @@
+```js
+// .storybook/preview.js
+
+import { initialize, mswDecorator } from 'msw-storybook-addon';
+
+/*
+ * Initializes MSW
+ * See https://github.com/mswjs/msw-storybook-addon#configuring-msw
+ * to learn how to customize it
+ */
+initialize();
+
+export const parameters = {
+ actions: { argTypesRegex: '^on[A-Z].*' },
+ controls: {
+ matchers: {
+ color: /(background|color)$/i,
+ date: /Date$/,
+ },
+ },
+};
+
+// Provide the MSW addon decorator globally
+export const decorators = [mswDecorator];
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-storyloading-with-custom-object.js.mdx b/docs/snippets/common/storybook-storyloading-with-custom-object.js.mdx
index 7b05042aafe1..3859a7c4ae34 100644
--- a/docs/snippets/common/storybook-storyloading-with-custom-object.js.mdx
+++ b/docs/snippets/common/storybook-storyloading-with-custom-object.js.mdx
@@ -8,7 +8,7 @@ module.exports = {
directory: '../packages/stories',
// 👇 The titlePrefix field will generate automatic titles for your stories
titlePrefix: 'MyComponents',
- // 👇 Storybook will load all files that contain the stories extensio
+ // 👇 Storybook will load all files that contain the stories extension
files: '*.stories.*',
},
],
diff --git a/docs/snippets/common/storybook-telemetry-crash-report-event.js.mdx b/docs/snippets/common/storybook-telemetry-crash-report-event.js.mdx
new file mode 100644
index 000000000000..88d98f5c6bb3
--- /dev/null
+++ b/docs/snippets/common/storybook-telemetry-crash-report-event.js.mdx
@@ -0,0 +1,13 @@
+```js
+{
+ stack: 'Error: Your button is not working\n' +
+ ' at Object. ($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'
+}
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-js.js.mdx b/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-js.js.mdx
new file mode 100644
index 000000000000..c1e3d032880e
--- /dev/null
+++ b/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-js.js.mdx
@@ -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
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-ts.ts.mdx b/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-ts.ts.mdx
new file mode 100644
index 000000000000..7ce3bba1a827
--- /dev/null
+++ b/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-ts.ts.mdx
@@ -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;
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-telemetry-preview-event.npm.js.mdx b/docs/snippets/common/storybook-telemetry-preview-event.npm.js.mdx
new file mode 100644
index 000000000000..eab8893ec86f
--- /dev/null
+++ b/docs/snippets/common/storybook-telemetry-preview-event.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+STORYBOOK_TELEMETRY_DEBUG=1 npm run storybook
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-telemetry-preview-event.yarn.js.mdx b/docs/snippets/common/storybook-telemetry-preview-event.yarn.js.mdx
new file mode 100644
index 000000000000..fdb9d20be615
--- /dev/null
+++ b/docs/snippets/common/storybook-telemetry-preview-event.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+STORYBOOK_TELEMETRY_DEBUG=1 yarn storybook
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.env-var.js.mdx b/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.env-var.js.mdx
new file mode 100644
index 000000000000..41b65f194069
--- /dev/null
+++ b/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.env-var.js.mdx
@@ -0,0 +1,3 @@
+```shell
+STORYBOOK_ENABLE_CRASH_REPORTS=1 yarn storybook
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.npm.js.mdx b/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.npm.js.mdx
new file mode 100644
index 000000000000..b0fc399a5408
--- /dev/null
+++ b/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm run storybook -- --enable-crash-reports
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.yarn.js.mdx b/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.yarn.js.mdx
new file mode 100644
index 000000000000..71876f939367
--- /dev/null
+++ b/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn storybook --enable-crash-reports
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-install.npm.js.mdx b/docs/snippets/common/storybook-test-runner-install.npm.js.mdx
index 90f046c3ec62..50b39891c2b2 100644
--- a/docs/snippets/common/storybook-test-runner-install.npm.js.mdx
+++ b/docs/snippets/common/storybook-test-runner-install.npm.js.mdx
@@ -1,3 +1,3 @@
```shell
-npm install @storybook/test-runner jest --save-dev
+npm install @storybook/test-runner jest@27 --save-dev
```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-install.yarn.js.mdx b/docs/snippets/common/storybook-test-runner-install.yarn.js.mdx
index 3221e525779e..79840bb5b1b7 100644
--- a/docs/snippets/common/storybook-test-runner-install.yarn.js.mdx
+++ b/docs/snippets/common/storybook-test-runner-install.yarn.js.mdx
@@ -1,3 +1,3 @@
```shell
-yarn add --dev @storybook/test-runner jest
+yarn add --dev @storybook/test-runner jest@27
```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-vite-builder-aliasing.js.mdx b/docs/snippets/common/storybook-vite-builder-aliasing.js.mdx
new file mode 100644
index 000000000000..223d5bb2a4a1
--- /dev/null
+++ b/docs/snippets/common/storybook-vite-builder-aliasing.js.mdx
@@ -0,0 +1,24 @@
+```js
+// .storybook/main.js|cjs|ts
+
+const { mergeConfig } = require('vite');
+
+module.exports = {
+ stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+ core: {
+ builder: '@storybook/builder-vite',
+ },
+ async viteFinal(config) {
+ // Merge custom configuration into the default config
+ return mergeConfig(config, {
+ // Use the same "resolve" configuration as your app
+ resolve: (await import('../vite.config.js')).default.resolve,
+ // Add dependencies to pre-optimization
+ optimizeDeps: {
+ include: ['storybook-dark-mode'],
+ },
+ });
+ },
+};
+```
diff --git a/docs/snippets/common/storybook-vite-builder-config-env.js.mdx b/docs/snippets/common/storybook-vite-builder-config-env.js.mdx
new file mode 100644
index 000000000000..a3dbee8895aa
--- /dev/null
+++ b/docs/snippets/common/storybook-vite-builder-config-env.js.mdx
@@ -0,0 +1,24 @@
+```js
+// .storybook/main.js|ts
+
+const { mergeConfig } = require('vite');
+
+module.exports = {
+ stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+ core: {
+ builder: '@storybook/builder-vite',
+ },
+ async viteFinal(config, { configType }) {
+ if (configType === 'DEVELOPMENT') {
+ // Your development configuration goes here
+ }
+ if (configType === 'PRODUCTION') {
+ // Your production configuration goes here.
+ }
+ return mergeConfig(config, {
+ // Your environment configuration here
+ });
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-vite-builder-install.npm.js.mdx b/docs/snippets/common/storybook-vite-builder-install.npm.js.mdx
new file mode 100644
index 000000000000..e4d64958fb9a
--- /dev/null
+++ b/docs/snippets/common/storybook-vite-builder-install.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm install @storybook/builder-vite --save-dev
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-vite-builder-install.yarn.js.mdx b/docs/snippets/common/storybook-vite-builder-install.yarn.js.mdx
new file mode 100644
index 000000000000..ff51b902c057
--- /dev/null
+++ b/docs/snippets/common/storybook-vite-builder-install.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn add --dev @storybook/builder-vite
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-vite-builder-react-docgen.js.mdx b/docs/snippets/common/storybook-vite-builder-react-docgen.js.mdx
new file mode 100644
index 000000000000..7d422a056a04
--- /dev/null
+++ b/docs/snippets/common/storybook-vite-builder-react-docgen.js.mdx
@@ -0,0 +1,14 @@
+```js
+// .storybook/main.js
+
+module.exports = {
+ stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+ core: {
+ builder: '@storybook/builder-vite',
+ },
+ typescript: {
+ reactDocgen: 'react-docgen', // 👈 react-docgen configured here.
+ },
+};
+```
diff --git a/docs/snippets/common/storybook-vite-builder-register.js.mdx b/docs/snippets/common/storybook-vite-builder-register.js.mdx
new file mode 100644
index 000000000000..6ae400a96a42
--- /dev/null
+++ b/docs/snippets/common/storybook-vite-builder-register.js.mdx
@@ -0,0 +1,11 @@
+```js
+// .storybook/main.js|ts
+
+module.exports = {
+ stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+ core: {
+ builder: '@storybook/builder-vite', // 👈 The builder enabled here.
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-vite-builder-svelte-plugin.js.mdx b/docs/snippets/common/storybook-vite-builder-svelte-plugin.js.mdx
new file mode 100644
index 000000000000..3ec43e4e035e
--- /dev/null
+++ b/docs/snippets/common/storybook-vite-builder-svelte-plugin.js.mdx
@@ -0,0 +1,24 @@
+```js
+// .storybook/main.js|ts
+
+const preprocess = require('svelte-preprocess');
+
+module.exports = {
+ stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+ core: {
+ builder: '@storybook/builder-vite',
+ },
+ async viteFinal(config, { configType }) {
+ // Customize the Vite config here
+ return config;
+ },
+ svelteOptions: {
+ preprocess: preprocess({
+ typescript: true,
+ postcss: true,
+ sourceMap: true,
+ }),
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-vite-builder-ts-configure.ts.mdx b/docs/snippets/common/storybook-vite-builder-ts-configure.ts.mdx
new file mode 100644
index 000000000000..3948e084d949
--- /dev/null
+++ b/docs/snippets/common/storybook-vite-builder-ts-configure.ts.mdx
@@ -0,0 +1,19 @@
+```ts
+// .storybook/main.ts
+
+import type { StorybookViteConfig } from '@storybook/builder-vite';
+
+const config: StorybookViteConfig = {
+ stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+ core: {
+ builder: '@storybook/builder-vite',
+ },
+ async viteFinal(config, options) {
+ // Add your configuration here
+ return config;
+ },
+};
+
+export default config;
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-write-addon-install-dependencies.npm.js.mdx b/docs/snippets/common/storybook-write-addon-install-dependencies.npm.js.mdx
new file mode 100644
index 000000000000..e196ab444371
--- /dev/null
+++ b/docs/snippets/common/storybook-write-addon-install-dependencies.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm install react react-dom @babel/cli
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-write-addon-install-dependencies.yarn.js.mdx b/docs/snippets/common/storybook-write-addon-install-dependencies.yarn.js.mdx
new file mode 100644
index 000000000000..e81984d3e2a2
--- /dev/null
+++ b/docs/snippets/common/storybook-write-addon-install-dependencies.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn add react react-dom @babel/cli
+```
\ No newline at end of file
diff --git a/docs/snippets/html/button-story-component-decorator.js.mdx b/docs/snippets/html/button-story-component-decorator.js.mdx
new file mode 100644
index 000000000000..c87cb62adbb8
--- /dev/null
+++ b/docs/snippets/html/button-story-component-decorator.js.mdx
@@ -0,0 +1,21 @@
+```js
+// Button.stories.js
+
+import { createButton } from './Button';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ decorators: [(story) => {
+ const decorator = document.createElement('div');
+ decorator.style.margin = '3em';
+ decorator.appendChild(story());
+ return decorator;
+ }],
+};
+
+export const Primary = (args) => createButton(args);
+```
diff --git a/docs/snippets/html/button-story-component-decorator.ts.mdx b/docs/snippets/html/button-story-component-decorator.ts.mdx
new file mode 100644
index 000000000000..d1a4efaa4258
--- /dev/null
+++ b/docs/snippets/html/button-story-component-decorator.ts.mdx
@@ -0,0 +1,23 @@
+```ts
+// Button.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+
+import { createButton, ButtonArgs } from './Button';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ decorators: [(story) => {
+ const decorator = document.createElement('div');
+ decorator.style.margin = '3em';
+ decorator.appendChild(story());
+ return decorator;
+ }],
+} as Meta;
+
+export const Primary: StoryFn = (args) => createButton(args);
+```
diff --git a/docs/snippets/html/button-story-default-exports.js.mdx b/docs/snippets/html/button-story-default-exports.js.mdx
new file mode 100644
index 000000000000..c6bbe5bf64f1
--- /dev/null
+++ b/docs/snippets/html/button-story-default-exports.js.mdx
@@ -0,0 +1,13 @@
+```js
+// Button.stories.js
+
+import { createButton } from './Button';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+};
+```
diff --git a/docs/snippets/html/button-story-default-exports.ts.mdx b/docs/snippets/html/button-story-default-exports.ts.mdx
new file mode 100644
index 000000000000..e294d98b1b40
--- /dev/null
+++ b/docs/snippets/html/button-story-default-exports.ts.mdx
@@ -0,0 +1,15 @@
+```ts
+// Button.stories.ts
+
+import { Meta } from '@storybook/html';
+
+import { createButton, ButtonArgs } from './Button';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+} as Meta;
+```
diff --git a/docs/snippets/html/button-story-rename-story.js.mdx b/docs/snippets/html/button-story-rename-story.js.mdx
new file mode 100644
index 000000000000..3f13f148ce43
--- /dev/null
+++ b/docs/snippets/html/button-story-rename-story.js.mdx
@@ -0,0 +1,16 @@
+```js
+// Button.stories.js
+
+import { createButton } from './Button';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+};
+
+export const Primary = (args) => createButton(args);
+Primary.storyName = 'I am the primary';
+```
diff --git a/docs/snippets/html/button-story-rename-story.ts.mdx b/docs/snippets/html/button-story-rename-story.ts.mdx
new file mode 100644
index 000000000000..0b37196b9a41
--- /dev/null
+++ b/docs/snippets/html/button-story-rename-story.ts.mdx
@@ -0,0 +1,18 @@
+```ts
+// Button.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+
+import { createButton, ButtonArgs } from './Button';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+} as Meta;
+
+export const Primary: StoryFn = (args) => createButton(args);
+Primary.storyName = 'I am the primary';
+```
diff --git a/docs/snippets/html/button-story-using-args.js.mdx b/docs/snippets/html/button-story-using-args.js.mdx
new file mode 100644
index 000000000000..9df04fd6e394
--- /dev/null
+++ b/docs/snippets/html/button-story-using-args.js.mdx
@@ -0,0 +1,26 @@
+```js
+// Button.stories.js
+
+import { createButton } from './Button';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+};
+
+//👇 We create a “template” of how args map to rendering
+const Template = (args) => createButton(args);
+
+//👇 Each story then reuses that template
+export const Primary = Template.bind({});
+Primary.args = { primary: true, label: 'Button' };
+
+export const Secondary = Template.bind({});
+Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
+
+export const Tertiary = Template.bind({});
+Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
+```
diff --git a/docs/snippets/html/button-story-using-args.ts.mdx b/docs/snippets/html/button-story-using-args.ts.mdx
new file mode 100644
index 000000000000..759858bf1da4
--- /dev/null
+++ b/docs/snippets/html/button-story-using-args.ts.mdx
@@ -0,0 +1,27 @@
+```ts
+// Button.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+import { createButton, ButtonArgs } from './Button';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+} as Meta;
+
+//👇 We create a “template” of how args map to rendering
+const Template: StoryFn = (args): HTMLButtonElement => createButton(args);
+
+//👇 Each story then reuses that template
+export const Primary = Template.bind({});
+Primary.args = { primary: true, label: 'Button' };
+
+export const Secondary = Template.bind({});
+Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
+
+export const Tertiary = Template.bind({});
+Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
+```
diff --git a/docs/snippets/html/button-story-with-args.js.mdx b/docs/snippets/html/button-story-with-args.js.mdx
index 60feb2014547..8d71b288cef9 100644
--- a/docs/snippets/html/button-story-with-args.js.mdx
+++ b/docs/snippets/html/button-story-with-args.js.mdx
@@ -1,4 +1,6 @@
```js
+// Button.stories.js
+
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
diff --git a/docs/snippets/html/button-story-with-args.ts.mdx b/docs/snippets/html/button-story-with-args.ts.mdx
index 3130fc260de7..9b75446177ee 100644
--- a/docs/snippets/html/button-story-with-args.ts.mdx
+++ b/docs/snippets/html/button-story-with-args.ts.mdx
@@ -1,16 +1,23 @@
```ts
+// Button.stories.ts
+
import { Meta, StoryFn } from '@storybook/html';
+type ButtonArgs = {
+ primary: boolean;
+ label: string;
+}
+
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
-} as Meta;
+} as Meta;
//👇 We create a “template” of how args map to rendering
-const Template: StoryFn = (args): HTMLButtonElement => {
+const Template: StoryFn = (args): HTMLButtonElement => {
const btn = document.createElement('button');
btn.innerText = args.label;
diff --git a/docs/snippets/html/button-story-with-blue-args.js.mdx b/docs/snippets/html/button-story-with-blue-args.js.mdx
new file mode 100644
index 000000000000..5cb8981ad168
--- /dev/null
+++ b/docs/snippets/html/button-story-with-blue-args.js.mdx
@@ -0,0 +1,25 @@
+```js
+// Button.stories.js
+
+import { createButton } from './Button';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ //👇 Creates specific parameters for the story
+ parameters: {
+ backgrounds: {
+ values: [
+ { name: 'red', value: '#f00' },
+ { name: 'green', value: '#0f0' },
+ { name: 'blue', value: '#00f' },
+ ],
+ },
+ },
+};
+
+export const Primary = (args) => createButton(args);
+```
diff --git a/docs/snippets/html/button-story-with-blue-args.ts.mdx b/docs/snippets/html/button-story-with-blue-args.ts.mdx
new file mode 100644
index 000000000000..906845b4f472
--- /dev/null
+++ b/docs/snippets/html/button-story-with-blue-args.ts.mdx
@@ -0,0 +1,27 @@
+```ts
+// Button.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+
+import { createButton, ButtonArgs } from './Button';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ //👇 Creates specific parameters for the story
+ parameters: {
+ backgrounds: {
+ values: [
+ { name: 'red', value: '#f00' },
+ { name: 'green', value: '#0f0' },
+ { name: 'blue', value: '#00f' },
+ ],
+ },
+ },
+} as Meta;
+
+export const Primary: StoryFn = (args) => createButton(args);
+```
diff --git a/docs/snippets/html/button-story-with-emojis.js.mdx b/docs/snippets/html/button-story-with-emojis.js.mdx
new file mode 100644
index 000000000000..b6b9b43ec295
--- /dev/null
+++ b/docs/snippets/html/button-story-with-emojis.js.mdx
@@ -0,0 +1,16 @@
+```js
+// Button.stories.js
+
+import { createButton } from './Button';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+};
+export const Primary = () => createButton({ backgroundColor: "#ff0", label: "Button"});
+export const Secondary = () => createButton({ backgroundColor: "#ff0", label: "😄👍😍💯"});
+export const Tertiary = () => createButton({ backgroundColor: "#ff0", label: "📚📕📈🤓"});
+```
diff --git a/docs/snippets/html/button-story-with-emojis.ts.mdx b/docs/snippets/html/button-story-with-emojis.ts.mdx
new file mode 100644
index 000000000000..47a1f99f8ee1
--- /dev/null
+++ b/docs/snippets/html/button-story-with-emojis.ts.mdx
@@ -0,0 +1,17 @@
+```ts
+// Button.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+import { createButton, ButtonArgs } from './Button';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+} as Meta;
+export const Primary: StoryFn = () => createButton({ backgroundColor: "#ff0", label: "Button"});
+export const Secondary: StoryFn = () => createButton({ backgroundColor: "#ff0", label: "😄👍😍💯"});
+export const Tertiary: StoryFn = () => createButton({ backgroundColor: "#ff0", label: "📚📕📈🤓"});
+```
diff --git a/docs/snippets/html/button-story.js.mdx b/docs/snippets/html/button-story.js.mdx
index 743c489eff80..6268687c428b 100644
--- a/docs/snippets/html/button-story.js.mdx
+++ b/docs/snippets/html/button-story.js.mdx
@@ -1,4 +1,6 @@
```js
+// Button.stories.js
+
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
diff --git a/docs/snippets/html/button-story.ts.mdx b/docs/snippets/html/button-story.ts.mdx
index 104aa6ccbd19..62e72638171e 100644
--- a/docs/snippets/html/button-story.ts.mdx
+++ b/docs/snippets/html/button-story.ts.mdx
@@ -1,4 +1,6 @@
```ts
+// Button.stories.ts
+
import { Meta, StoryFn } from '@storybook/html';
export default {
diff --git a/docs/snippets/html/list-story-expanded.js.mdx b/docs/snippets/html/list-story-expanded.js.mdx
new file mode 100644
index 000000000000..b9cbe7d627f1
--- /dev/null
+++ b/docs/snippets/html/list-story-expanded.js.mdx
@@ -0,0 +1,27 @@
+
+```js
+// List.stories.js
+
+import { createList } from './List';
+import { createListItem } from './ListItem';
+
+export default {
+ title: 'List',
+};
+
+export const Empty = (args) => createList(args);
+
+export const OneItem = (args) => {
+ const list = createList(args);
+ list.appendChild(createListItem());
+ return list;
+};
+
+export const ManyItems = (args) => {
+ const list = createList(args);
+ list.appendChild(createListItem());
+ list.appendChild(createListItem());
+ list.appendChild(createListItem());
+ return list;
+};
+```
diff --git a/docs/snippets/html/list-story-expanded.ts.mdx b/docs/snippets/html/list-story-expanded.ts.mdx
new file mode 100644
index 000000000000..81e14d1162a4
--- /dev/null
+++ b/docs/snippets/html/list-story-expanded.ts.mdx
@@ -0,0 +1,29 @@
+
+```ts
+// List.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+
+import { createList, ListArgs } from './List';
+import { createListItem } from './ListItem';
+
+export default {
+ title: 'List',
+} as Meta;
+
+export const Empty: StoryFn = (args) => createList(args);
+
+export const OneItem: StoryFn = (args) => {
+ const list = createList(args);
+ list.appendChild(createListItem());
+ return list;
+};
+
+export const ManyItems: StoryFn = (args) => {
+ const list = createList(args);
+ list.appendChild(createListItem());
+ list.appendChild(createListItem());
+ list.appendChild(createListItem());
+ return list;
+};
+```
diff --git a/docs/snippets/html/list-story-reuse-data.js.mdx b/docs/snippets/html/list-story-reuse-data.js.mdx
new file mode 100644
index 000000000000..a58833617912
--- /dev/null
+++ b/docs/snippets/html/list-story-reuse-data.js.mdx
@@ -0,0 +1,22 @@
+
+```js
+// List.stories.js
+
+import { createList } from './List';
+import { createListItem } from './ListItem';
+
+// 👇 We're importing the necessary stories from ListItem
+import { Selected, Unselected } from './ListItem.stories';
+
+export default {
+ title: 'List',
+};
+
+export const ManyItems = (args) => {
+ const list = createList(args);
+ list.appendChild(createListItem(Selected.args));
+ list.appendChild(createListItem(Unselected.args));
+ list.appendChild(createListItem(Unselected.args));
+ return list;
+};
+```
diff --git a/docs/snippets/html/list-story-reuse-data.ts.mdx b/docs/snippets/html/list-story-reuse-data.ts.mdx
new file mode 100644
index 000000000000..434bec00d690
--- /dev/null
+++ b/docs/snippets/html/list-story-reuse-data.ts.mdx
@@ -0,0 +1,32 @@
+
+```ts
+// List.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+
+import { createList, ListArgs } from './List';
+import { createListItem } from './ListItem';
+
+// 👇 We're importing the necessary stories from ListItem
+import { Selected, Unselected } from './ListItem.stories';
+
+export default {
+ title: 'List',
+} as Meta;
+
+export const Empty: StoryFn = (args) => createList(args);
+
+export const OneItem: StoryFn = (args) => {
+ const list = createList(args);
+ list.appendChild(createListItem());
+ return list;
+};
+
+export const ManyItems: StoryFn = (args) => {
+ const list = createList(args);
+ list.appendChild(createListItem(Selected.args));
+ list.appendChild(createListItem(Unselected.args));
+ list.appendChild(createListItem(Unselected.args));
+ return list;
+};
+```
diff --git a/docs/snippets/html/list-story-starter.js.mdx b/docs/snippets/html/list-story-starter.js.mdx
new file mode 100644
index 000000000000..8e4959b468d3
--- /dev/null
+++ b/docs/snippets/html/list-story-starter.js.mdx
@@ -0,0 +1,12 @@
+```js
+// List.stories.js
+
+import { createList } from './List';
+
+export default {
+ title: 'List',
+};
+
+// Always an empty list, not super interesting
+const Template = (args) => createList(args);
+```
diff --git a/docs/snippets/html/list-story-starter.ts.mdx b/docs/snippets/html/list-story-starter.ts.mdx
new file mode 100644
index 000000000000..e0706e6c0827
--- /dev/null
+++ b/docs/snippets/html/list-story-starter.ts.mdx
@@ -0,0 +1,14 @@
+```ts
+// List.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+
+import { createList, ListArgs } from './List';
+
+export default {
+ title: 'List',
+} as Meta;
+
+// Always an empty list, not super interesting
+const Template: StoryFn = (args) => createList(args);
+```
diff --git a/docs/snippets/react/page-story-with-args-composition.ts.mdx b/docs/snippets/react/page-story-with-args-composition.ts.mdx
index a088dfda54fe..be960adff652 100644
--- a/docs/snippets/react/page-story-with-args-composition.ts.mdx
+++ b/docs/snippets/react/page-story-with-args-composition.ts.mdx
@@ -18,7 +18,6 @@ export default {
*/
title: 'DocumentScreen',
component: DocumentScreen,
- title: 'DocumentScreen',
} as ComponentMeta;
@@ -30,4 +29,4 @@ Simple.args = {
document: DocumentHeader.Simple.args.document,
subdocuments: DocumentList.Simple.args.documents,
};
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/badge-story-starter-example.mdx.mdx b/docs/snippets/vue/badge-story-starter-example.mdx.mdx
index 1905cd91cac4..3b228d2840a9 100644
--- a/docs/snippets/vue/badge-story-starter-example.mdx.mdx
+++ b/docs/snippets/vue/badge-story-starter-example.mdx.mdx
@@ -76,4 +76,4 @@ with unique URLs and isolated snapshot tests.
}}
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/badge-story.mdx-2.mdx.mdx b/docs/snippets/vue/badge-story.mdx-2.mdx.mdx
index fb34bac4968d..32ed8f0726b5 100644
--- a/docs/snippets/vue/badge-story.mdx-2.mdx.mdx
+++ b/docs/snippets/vue/badge-story.mdx-2.mdx.mdx
@@ -69,4 +69,4 @@ with unique URLs, which is great for review and testing.
{Template.bind({})}
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-group-story.2.js.mdx b/docs/snippets/vue/button-group-story.2.js.mdx
index 73edf3359698..a083bfbce036 100644
--- a/docs/snippets/vue/button-group-story.2.js.mdx
+++ b/docs/snippets/vue/button-group-story.2.js.mdx
@@ -1,5 +1,5 @@
```js
-//ButtonGroup.stories.js
+// ButtonGroup.stories.js
import ButtonGroup from './ButtonGroup.vue';
diff --git a/docs/snippets/vue/button-group-story.3.js.mdx b/docs/snippets/vue/button-group-story.3.js.mdx
index fba028c49219..6197ffd73ae4 100644
--- a/docs/snippets/vue/button-group-story.3.js.mdx
+++ b/docs/snippets/vue/button-group-story.3.js.mdx
@@ -1,5 +1,5 @@
```js
-//ButtonGroup.stories.js
+// ButtonGroup.stories.js
import ButtonGroup from './ButtonGroup.vue';
diff --git a/docs/snippets/vue/button-group-story.ts-2.ts.mdx b/docs/snippets/vue/button-group-story.ts-2.ts.mdx
new file mode 100644
index 000000000000..d0e1eb3adadc
--- /dev/null
+++ b/docs/snippets/vue/button-group-story.ts-2.ts.mdx
@@ -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;
+
+const Template: StoryFn = (args, { argTypes }) => ({
+ components: { ButtonGroup },
+ props: Object.keys(argTypes),
+ template: ';
+
+const Template: StoryFn = (args) => ({
+ components: { ButtonGroup },
+ setup() {
+ return { args };
+ },
+ template: ';
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-component-decorator.ts-3.ts.mdx b/docs/snippets/vue/button-story-component-decorator.ts-3.ts.mdx
new file mode 100644
index 000000000000..bc4678319e93
--- /dev/null
+++ b/docs/snippets/vue/button-story-component-decorator.ts-3.ts.mdx
@@ -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: ';
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-default-export-with-component.ts-2.ts.mdx b/docs/snippets/vue/button-story-default-export-with-component.ts-2.ts.mdx
new file mode 100644
index 000000000000..3203b13bc70a
--- /dev/null
+++ b/docs/snippets/vue/button-story-default-export-with-component.ts-2.ts.mdx
@@ -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;
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-default-export-with-component.ts-3.ts.mdx b/docs/snippets/vue/button-story-default-export-with-component.ts-3.ts.mdx
new file mode 100644
index 000000000000..afc5e65c7954
--- /dev/null
+++ b/docs/snippets/vue/button-story-default-export-with-component.ts-3.ts.mdx
@@ -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;
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-rename-story.js.mdx b/docs/snippets/vue/button-story-rename-story.js.mdx
index 1b87c6bc4b53..95750d3d6c82 100644
--- a/docs/snippets/vue/button-story-rename-story.js.mdx
+++ b/docs/snippets/vue/button-story-rename-story.js.mdx
@@ -17,4 +17,4 @@ export const Primary = () => ({
template: '',
});
Primary.storyName = 'I am the primary';
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-rename-story.ts-2.ts.mdx b/docs/snippets/vue/button-story-rename-story.ts-2.ts.mdx
new file mode 100644
index 000000000000..14dfc01e1fc2
--- /dev/null
+++ b/docs/snippets/vue/button-story-rename-story.ts-2.ts.mdx
@@ -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;
+
+export const Primary: StoryFn = () => ({
+ components: { Button },
+ template: '',
+});
+Primary.storyName = 'I am the primary';
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-rename-story.ts-3.ts.mdx b/docs/snippets/vue/button-story-rename-story.ts-3.ts.mdx
new file mode 100644
index 000000000000..8925512e6961
--- /dev/null
+++ b/docs/snippets/vue/button-story-rename-story.ts-3.ts.mdx
@@ -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;
+
+export const Primary: StoryFn = () => ({
+ components: { Button },
+ template: '',
+});
+Primary.storyName = 'I am the primary';
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-using-args.ts-2.ts.mdx b/docs/snippets/vue/button-story-using-args.ts-2.ts.mdx
new file mode 100644
index 000000000000..4bfe62dd1183
--- /dev/null
+++ b/docs/snippets/vue/button-story-using-args.ts-2.ts.mdx
@@ -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;
+
+//👇 We create a “template” of how args map to rendering
+const Template: StoryFn = (args, { argTypes }) => ({
+ components: { Button },
+ props: Object.keys(argTypes),
+ template: '',
+});
+
+//👇 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: '📚📕📈🤓' };
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-using-args.ts-3.ts.mdx b/docs/snippets/vue/button-story-using-args.ts-3.ts.mdx
new file mode 100644
index 000000000000..b081e49bbe23
--- /dev/null
+++ b/docs/snippets/vue/button-story-using-args.ts-3.ts.mdx
@@ -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;
+
+//👇 We create a “template” of how args map to rendering
+const Template: StoryFn = (args) => ({
+ components: { Button },
+ setup() {
+ return { args };
+ },
+ template: '',
+});
+
+//👇 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: '📚📕📈🤓' };
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-with-blue-args.ts-2.ts.mdx b/docs/snippets/vue/button-story-with-blue-args.ts-2.ts.mdx
new file mode 100644
index 000000000000..c55b57c2ccc5
--- /dev/null
+++ b/docs/snippets/vue/button-story-with-blue-args.ts-2.ts.mdx
@@ -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;
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-with-blue-args.ts-3.ts.mdx b/docs/snippets/vue/button-story-with-blue-args.ts-3.ts.mdx
new file mode 100644
index 000000000000..00cd50dc5c04
--- /dev/null
+++ b/docs/snippets/vue/button-story-with-blue-args.ts-3.ts.mdx
@@ -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;
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-with-emojis.ts-2.ts.mdx b/docs/snippets/vue/button-story-with-emojis.ts-2.ts.mdx
new file mode 100644
index 000000000000..cf8c9ca28e53
--- /dev/null
+++ b/docs/snippets/vue/button-story-with-emojis.ts-2.ts.mdx
@@ -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;
+
+export const Primary: StoryFn = () => ({
+ components: { Button },
+ template: '',
+});
+
+export const Secondary: StoryFn = () => ({
+ components: { Button },
+ template: '',
+});
+
+export const Tertiary: StoryFn = () => ({
+ components: { Button },
+ template: '',
+});
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-with-emojis.ts-3.ts.mdx b/docs/snippets/vue/button-story-with-emojis.ts-3.ts.mdx
new file mode 100644
index 000000000000..b292bb311fff
--- /dev/null
+++ b/docs/snippets/vue/button-story-with-emojis.ts-3.ts.mdx
@@ -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;
+
+export const Primary: StoryFn = () => ({
+ components: { Button },
+ template: '',
+});
+
+export const Secondary: StoryFn = () => ({
+ components: { Button },
+ template: '',
+});
+
+export const Tertiary: StoryFn = () => ({
+ components: { Button },
+ template: '',
+});
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story.ts-2.ts.mdx b/docs/snippets/vue/button-story.ts-2.ts.mdx
new file mode 100644
index 000000000000..38643023a710
--- /dev/null
+++ b/docs/snippets/vue/button-story.ts-2.ts.mdx
@@ -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;
+
+export const Primary: StoryFn = () => ({
+ components: { Button },
+ template: '',
+});
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story.ts-3.ts.mdx b/docs/snippets/vue/button-story.ts-3.ts.mdx
new file mode 100644
index 000000000000..813792649c3d
--- /dev/null
+++ b/docs/snippets/vue/button-story.ts-3.ts.mdx
@@ -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;
+
+export const Primary: StoryFn = () => ({
+ components: { Button },
+ template: '',
+});
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-figma-integration.mdx.mdx b/docs/snippets/vue/component-story-figma-integration.mdx.mdx
index 9df145fac7df..a75e89528830 100644
--- a/docs/snippets/vue/component-story-figma-integration.mdx.mdx
+++ b/docs/snippets/vue/component-story-figma-integration.mdx.mdx
@@ -10,7 +10,7 @@ import MyComponent from './MyComponent.vue';
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 />',
});
diff --git a/docs/snippets/vue/component-story-figma-integration.ts.mdx b/docs/snippets/vue/component-story-figma-integration.ts.mdx
index 40c50cf2f6d7..0bacfcc5b3b3 100644
--- a/docs/snippets/vue/component-story-figma-integration.ts.mdx
+++ b/docs/snippets/vue/component-story-figma-integration.ts.mdx
@@ -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;
// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
-const Template: Story = () => ({
+const Template: StoryFn = () => ({
components: { MyComponent },
template: ';
+
+export const Empty: StoryFn = (args, { argTypes }) => ({
+ components: { List },
+ props: Object.keys(argTypes),
+ template: '
',
+});
+
+export const OneItem: StoryFn = (args, { argTypes }) => ({
+ components: { List, ListItem },
+ props: Object.keys(argTypes),
+ template: '
',
+});
+
+export const ManyItems: StoryFn = (args, { argTypes }) => ({
+ components: { List, ListItem },
+ props: Object.keys(argTypes),
+ template: `
+
+
+ `,
+});
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-expanded.ts-3.ts.mdx b/docs/snippets/vue/list-story-expanded.ts-3.ts.mdx
new file mode 100644
index 000000000000..74c9ea1a72b4
--- /dev/null
+++ b/docs/snippets/vue/list-story-expanded.ts-3.ts.mdx
@@ -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;
+
+export const Empty: StoryFn = (args) => ({
+ components: { List },
+ setup() {
+ return { args };
+ },
+ template: '
',
+});
+
+export const OneItem: StoryFn = (args) => ({
+ components: { List, ListItem },
+ setup() {
+ return { args };
+ },
+ template: '
',
+});
+
+export const ManyItems: StoryFn = (args) => ({
+ components: { List, ListItem },
+ setup() {
+ return { args };
+ },
+ template: `
+
+
+ `,
+});
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-reuse-data.ts-2.ts.mdx b/docs/snippets/vue/list-story-reuse-data.ts-2.ts.mdx
new file mode 100644
index 000000000000..225252c1575b
--- /dev/null
+++ b/docs/snippets/vue/list-story-reuse-data.ts-2.ts.mdx
@@ -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;
+
+export const ManyItems: StoryFn = (args, { argTypes }) => ({
+ components: { List, ListItem },
+ props: Object.keys(argTypes),
+ template: `
+
+
`,
+});
+
+ManyItems.args = {
+ Selected: Selected.args.isSelected,
+ Unselected: Unselected.args.isSelected,
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-reuse-data.ts-3.ts.mdx b/docs/snippets/vue/list-story-reuse-data.ts-3.ts.mdx
new file mode 100644
index 000000000000..ff0fe53148d8
--- /dev/null
+++ b/docs/snippets/vue/list-story-reuse-data.ts-3.ts.mdx
@@ -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;
+
+export const ManyItems: StoryFn = (args) => ({
+ components: { List, ListItem },
+ setup() {
+ return { ...args };
+ },
+ template: `
+
+
`,
+});
+
+ManyItems.args = {
+ Selected: Selected.args.isSelected,
+ Unselected: Unselected.args.isSelected,
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-starter.ts-2.ts.mdx b/docs/snippets/vue/list-story-starter.ts-2.ts.mdx
new file mode 100644
index 000000000000..ff6266df96ac
--- /dev/null
+++ b/docs/snippets/vue/list-story-starter.ts-2.ts.mdx
@@ -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;
+
+// Always an empty list, not super interesting
+const Template: StoryFn = (args, { argTypes }) => ({
+ components: { List },
+ props: Object.keys(argTypes),
+ template: '
',
+});
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-starter.ts-3.ts.mdx b/docs/snippets/vue/list-story-starter.ts-3.ts.mdx
new file mode 100644
index 000000000000..c70cddcd7b08
--- /dev/null
+++ b/docs/snippets/vue/list-story-starter.ts-3.ts.mdx
@@ -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;
+
+// Always an empty list, not super interesting
+const Template: StoryFn = (args) => ({
+ components: { List },
+ setup() {
+ return { args };
+ },
+ template: '
',
+});
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/login-form-with-play-function.2.js.mdx b/docs/snippets/vue/login-form-with-play-function.2.js.mdx
index bb5d3934efbd..e82613674972 100644
--- a/docs/snippets/vue/login-form-with-play-function.2.js.mdx
+++ b/docs/snippets/vue/login-form-with-play-function.2.js.mdx
@@ -16,7 +16,7 @@ export default {
component: LoginForm,
};
-export const Template = (args, { argTypes }) => ({
+const Template = (args, { argTypes }) => ({
components: { LoginForm },
props: Object.keys(argTypes),
template: `;
+
+const Template: StoryFn = (args, { argTypes }) => ({
+ components: { LoginForm },
+ props: Object.keys(argTypes),
+ template: `;
+
+const Template: StoryFn = (args) => ({
+ components: { LoginForm },
+ setup() {
+ return args;
+ },
+ template: '` elements in the file.
+Unless you use a custom [Webpack configuration](../builders/webpack.md#extending-storybooks-webpack-config), all of your MDX files should have the suffix `*.stories.mdx`. This tells Storybook to apply its special processing to the `` and `` elements in the file.
Be sure to update [.storybook/main.js](../configure/overview.md#configure-story-rendering) file to load `.stories.mdx` stories, as per the addon-docs installation instructions.
+
+## MDX 2
+
+Starting with Storybook 6.5, [MDX 2](https://mdxjs.com/blog/v2/) is introduced as an experimental opt-in feature. To enable it, you'll need to take additional steps. Documented below is our recommendation.
+
+Run the following command to add the necessary dependency.
+
+
+
+
\ No newline at end of file
+
diff --git a/docs/writing-stories/play-function.md b/docs/writing-stories/play-function.md
index cef5c1be9920..0923ee57a2c3 100644
--- a/docs/writing-stories/play-function.md
+++ b/docs/writing-stories/play-function.md
@@ -10,13 +10,16 @@ We recommend installing Storybook's [`addon-interactions`](https://storybook.js.
Run the following command to install the addon and the required dependencies.
-```shell
-# With npm
-npm install @storybook/addon-interactions @storybook/testing-library --save-dev
+
-# With yarn
-yarn add --dev @storybook/addon-interactions @storybook/testing-library
-```
+
- 📝 The current time in console should no longer display after a change of stroy`,
+ 📝 The current time in console should no longer display after a change of story`,
})
class OnDestroyComponent implements OnInit, OnDestroy {
time: string;
diff --git a/examples/cra-kitchen-sink/.storybook/main.js b/examples/cra-kitchen-sink/.storybook/main.js
index 486f57474131..01281cc6563f 100644
--- a/examples/cra-kitchen-sink/.storybook/main.js
+++ b/examples/cra-kitchen-sink/.storybook/main.js
@@ -32,6 +32,7 @@ module.exports = {
},
core: {
builder: 'webpack4',
+ channelOptions: { allowFunction: false, maxDepth: 10 },
},
staticDirs: ['../public'],
features: {
diff --git a/examples/cra-kitchen-sink/package.json b/examples/cra-kitchen-sink/package.json
index c70a38f2f3fa..03fbf5026d70 100644
--- a/examples/cra-kitchen-sink/package.json
+++ b/examples/cra-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "cra-kitchen-sink",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"private": true,
"scripts": {
"build": "react-scripts build",
@@ -11,7 +11,7 @@
"test": "react-scripts test --env=jsdom"
},
"dependencies": {
- "@storybook/client-logger": "6.5.0-beta.1",
+ "@storybook/client-logger": "6.5.0-rc.1",
"global": "^4.4.0",
"prop-types": "^15.7.2",
"react": "16.14.0",
@@ -21,19 +21,19 @@
},
"devDependencies": {
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
- "@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-docs": "6.5.0-beta.1",
+ "@storybook/addon-a11y": "6.5.0-rc.1",
+ "@storybook/addon-actions": "6.5.0-rc.1",
+ "@storybook/addon-backgrounds": "6.5.0-rc.1",
+ "@storybook/addon-docs": "6.5.0-rc.1",
"@storybook/addon-ie11": "0.0.7--canary.5e87b64.0",
- "@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/addons": "6.5.0-beta.1",
- "@storybook/builder-webpack4": "6.5.0-beta.1",
+ "@storybook/addon-jest": "6.5.0-rc.1",
+ "@storybook/addon-links": "6.5.0-rc.1",
+ "@storybook/addon-storyshots": "6.5.0-rc.1",
+ "@storybook/addons": "6.5.0-rc.1",
+ "@storybook/builder-webpack4": "6.5.0-rc.1",
"@storybook/preset-create-react-app": "^3.1.6",
- "@storybook/react": "6.5.0-beta.1",
- "@storybook/theming": "6.5.0-beta.1",
+ "@storybook/react": "6.5.0-rc.1",
+ "@storybook/theming": "6.5.0-rc.1",
"webpack": "4"
},
"storybook": {
diff --git a/examples/cra-react15/.storybook/main.js b/examples/cra-react15/.storybook/main.js
index 76fdcb43fa94..773f08114232 100644
--- a/examples/cra-react15/.storybook/main.js
+++ b/examples/cra-react15/.storybook/main.js
@@ -20,6 +20,8 @@ module.exports = {
},
core: {
builder: 'webpack4',
+ channelOptions: { allowFunction: false, maxDepth: 10 },
+ disableTelemetry: true,
},
staticDirs: ['../public'],
};
diff --git a/examples/cra-react15/package.json b/examples/cra-react15/package.json
index 6131e74e143f..bde8f7ee2e91 100644
--- a/examples/cra-react15/package.json
+++ b/examples/cra-react15/package.json
@@ -1,6 +1,6 @@
{
"name": "cra-react15",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"private": true,
"scripts": {
"build": "react-scripts build",
@@ -19,14 +19,14 @@
"react-scripts": "3.4.4"
},
"devDependencies": {
- "@storybook/addon-actions": "6.5.0-beta.1",
+ "@storybook/addon-actions": "6.5.0-rc.1",
"@storybook/addon-ie11": "0.0.7--canary.5e87b64.0",
- "@storybook/addon-links": "6.5.0-beta.1",
- "@storybook/addons": "6.5.0-beta.1",
- "@storybook/builder-webpack4": "6.5.0-beta.1",
+ "@storybook/addon-links": "6.5.0-rc.1",
+ "@storybook/addons": "6.5.0-rc.1",
+ "@storybook/builder-webpack4": "6.5.0-rc.1",
"@storybook/preset-create-react-app": "^3.1.6",
- "@storybook/react": "6.5.0-beta.1",
- "@storybook/theming": "6.5.0-beta.1",
+ "@storybook/react": "6.5.0-rc.1",
+ "@storybook/theming": "6.5.0-rc.1",
"babel-core": "6",
"babel-runtime": "6",
"webpack": "4"
diff --git a/examples/cra-ts-essentials/.storybook/main.ts b/examples/cra-ts-essentials/.storybook/main.ts
index 4ec79b0ac3f9..5dcc1589ff7f 100644
--- a/examples/cra-ts-essentials/.storybook/main.ts
+++ b/examples/cra-ts-essentials/.storybook/main.ts
@@ -26,6 +26,8 @@ const mainConfig: StorybookConfig = {
},
core: {
builder: 'webpack4',
+ channelOptions: { allowFunction: false, maxDepth: 10 },
+ disableTelemetry: true,
},
staticDirs: ['../public'],
features: {
diff --git a/examples/cra-ts-essentials/package.json b/examples/cra-ts-essentials/package.json
index 0473f4378e8d..18ceaef09a77 100644
--- a/examples/cra-ts-essentials/package.json
+++ b/examples/cra-ts-essentials/package.json
@@ -1,6 +1,6 @@
{
"name": "cra-ts-essentials",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"private": true,
"scripts": {
"build": "react-scripts build",
@@ -23,8 +23,8 @@
]
},
"dependencies": {
- "@storybook/components": "6.5.0-beta.1",
- "@storybook/theming": "6.5.0-beta.1",
+ "@storybook/components": "6.5.0-rc.1",
+ "@storybook/theming": "6.5.0-rc.1",
"@types/jest": "^26.0.16",
"@types/node": "^14.14.20 || ^16.0.0",
"@types/react": "^16.14.23",
@@ -37,12 +37,12 @@
"typescript": "^3.9.7"
},
"devDependencies": {
- "@storybook/addon-essentials": "6.5.0-beta.1",
+ "@storybook/addon-essentials": "6.5.0-rc.1",
"@storybook/addon-ie11": "0.0.7--canary.5e87b64.0",
- "@storybook/addons": "6.5.0-beta.1",
- "@storybook/builder-webpack4": "6.5.0-beta.1",
+ "@storybook/addons": "6.5.0-rc.1",
+ "@storybook/builder-webpack4": "6.5.0-rc.1",
"@storybook/preset-create-react-app": "^3.1.6",
- "@storybook/react": "6.5.0-beta.1",
+ "@storybook/react": "6.5.0-rc.1",
"@storybook/testing-library": "^0.0.9",
"webpack": "4"
},
diff --git a/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.tsx b/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.tsx
index b646a174143b..22da93de5488 100644
--- a/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.tsx
+++ b/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.tsx
@@ -25,7 +25,7 @@ const errorMap = {
password: {
required: {
normal: 'Please enter a password',
- tooltip: 'A password is requried to create an account',
+ tooltip: 'A password is required to create an account',
},
length: {
normal: 'Please enter a password of minimum 6 characters',
diff --git a/examples/cra-ts-kitchen-sink/.storybook/main.ts b/examples/cra-ts-kitchen-sink/.storybook/main.ts
index b225f343a8eb..65117687e404 100644
--- a/examples/cra-ts-kitchen-sink/.storybook/main.ts
+++ b/examples/cra-ts-kitchen-sink/.storybook/main.ts
@@ -28,6 +28,8 @@ module.exports = {
},
core: {
builder: 'webpack4',
+ channelOptions: { allowFunction: false, maxDepth: 10 },
+ disableTelemetry: true,
},
staticDirs: ['../public'],
features: {
diff --git a/examples/cra-ts-kitchen-sink/package.json b/examples/cra-ts-kitchen-sink/package.json
index 481ed4b8f7f2..4d581b919d74 100644
--- a/examples/cra-ts-kitchen-sink/package.json
+++ b/examples/cra-ts-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "cra-ts-kitchen-sink",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"private": true,
"scripts": {
"build": "react-scripts build",
@@ -34,15 +34,15 @@
"typescript": "^3.9.7"
},
"devDependencies": {
- "@storybook/addon-a11y": "6.5.0-beta.1",
- "@storybook/addon-actions": "6.5.0-beta.1",
- "@storybook/addon-docs": "6.5.0-beta.1",
+ "@storybook/addon-a11y": "6.5.0-rc.1",
+ "@storybook/addon-actions": "6.5.0-rc.1",
+ "@storybook/addon-docs": "6.5.0-rc.1",
"@storybook/addon-ie11": "0.0.7--canary.5e87b64.0",
- "@storybook/addon-links": "6.5.0-beta.1",
- "@storybook/addons": "6.5.0-beta.1",
- "@storybook/builder-webpack4": "6.5.0-beta.1",
+ "@storybook/addon-links": "6.5.0-rc.1",
+ "@storybook/addons": "6.5.0-rc.1",
+ "@storybook/builder-webpack4": "6.5.0-rc.1",
"@storybook/preset-create-react-app": "^3.1.6",
- "@storybook/react": "6.5.0-beta.1",
+ "@storybook/react": "6.5.0-rc.1",
"@types/enzyme": "^3.10.8",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.9.1",
diff --git a/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js b/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js
index 193a37ac82a2..ffc88c53c5ab 100644
--- a/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js
+++ b/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js
@@ -215,7 +215,7 @@ PropTypesProps.propTypes = {
oneOfComponents: PropTypes.oneOf([FunctionalComponent, ClassComponent]),
oneOfEval: PropTypes.oneOf((() => ['News', 'Photos'])()),
oneOfVar: PropTypes.oneOf(POSITIONS),
- oneOfNested: PropTypes.oneOf(['News', ['bottom-left', 'botton-center', 'bottom-right']]),
+ oneOfNested: PropTypes.oneOf(['News', ['bottom-left', 'bottom-center', 'bottom-right']]),
oneOfNestedSimpleInlineObject: PropTypes.oneOf(['News', [{ foo: PropTypes.string }]]),
oneOfNestedComplexInlineObject: PropTypes.oneOf([
'News',
diff --git a/examples/ember-cli/.storybook/main.js b/examples/ember-cli/.storybook/main.js
index c58025c3fd1c..4a0ed0dc8f63 100644
--- a/examples/ember-cli/.storybook/main.js
+++ b/examples/ember-cli/.storybook/main.js
@@ -28,6 +28,8 @@ module.exports = {
},
core: {
builder: 'webpack4',
+ channelOptions: { allowFunction: false, maxDepth: 10 },
+ disableTelemetry: true,
},
staticDirs: ['../ember-output'],
features: {
diff --git a/examples/ember-cli/package.json b/examples/ember-cli/package.json
index ad12a3022157..64f07ca76270 100644
--- a/examples/ember-cli/package.json
+++ b/examples/ember-cli/package.json
@@ -1,6 +1,6 @@
{
"name": "ember-example",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"private": true,
"scripts": {
"build": "ember build --output-path ember-output",
@@ -17,18 +17,18 @@
"devDependencies": {
"@babel/core": "^7.12.10",
"@ember/optional-features": "^2.0.0",
- "@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-links": "6.5.0-beta.1",
- "@storybook/addon-storysource": "6.5.0-beta.1",
- "@storybook/addon-viewport": "6.5.0-beta.1",
- "@storybook/addons": "6.5.0-beta.1",
- "@storybook/ember": "6.5.0-beta.1",
+ "@storybook/addon-a11y": "6.5.0-rc.1",
+ "@storybook/addon-actions": "6.5.0-rc.1",
+ "@storybook/addon-backgrounds": "6.5.0-rc.1",
+ "@storybook/addon-controls": "6.5.0-rc.1",
+ "@storybook/addon-docs": "6.5.0-rc.1",
+ "@storybook/addon-links": "6.5.0-rc.1",
+ "@storybook/addon-storysource": "6.5.0-rc.1",
+ "@storybook/addon-viewport": "6.5.0-rc.1",
+ "@storybook/addons": "6.5.0-rc.1",
+ "@storybook/ember": "6.5.0-rc.1",
"@storybook/ember-cli-storybook": "^0.2.1",
- "@storybook/source-loader": "6.5.0-beta.1",
+ "@storybook/source-loader": "6.5.0-rc.1",
"babel-loader": "^8.0.0",
"broccoli-asset-rev": "^3.0.0",
"cross-env": "^7.0.3",
diff --git a/examples/external-docs/README.md b/examples/external-docs/README.md
index 5fe025e663f0..3c5d68643a72 100644
--- a/examples/external-docs/README.md
+++ b/examples/external-docs/README.md
@@ -1,3 +1,3 @@
# Storybook External Docs Example
-This example demostrates using Stories in an app built outside of SB's build process.
+This example demonstrates using Stories in an app built outside of SB's build process.
diff --git a/examples/external-docs/package.json b/examples/external-docs/package.json
index 38be5ee3f443..756cb2ccd73d 100644
--- a/examples/external-docs/package.json
+++ b/examples/external-docs/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/external-docs",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"private": true,
"scripts": {
"build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./src/.storybook",
@@ -10,13 +10,13 @@
"storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 --no-manager-cache -c ./src/.storybook"
},
"dependencies": {
- "@storybook/addon-essentials": "6.5.0-beta.1",
- "@storybook/components": "6.5.0-beta.1",
+ "@storybook/addon-essentials": "6.5.0-rc.1",
+ "@storybook/components": "6.5.0-rc.1",
"@storybook/csf": "0.0.2--canary.87bc651.0",
- "@storybook/preview-web": "6.5.0-beta.1",
- "@storybook/react": "6.5.0-beta.1",
- "@storybook/store": "6.5.0-beta.1",
- "@storybook/theming": "6.5.0-beta.1",
+ "@storybook/preview-web": "6.5.0-rc.1",
+ "@storybook/react": "6.5.0-rc.1",
+ "@storybook/store": "6.5.0-rc.1",
+ "@storybook/theming": "6.5.0-rc.1",
"formik": "^2.2.9",
"prop-types": "15.7.2",
"react": "16.14.0",
diff --git a/examples/external-docs/src/components/AccountForm.tsx b/examples/external-docs/src/components/AccountForm.tsx
index d5e612931ac7..7872ce2e44d6 100644
--- a/examples/external-docs/src/components/AccountForm.tsx
+++ b/examples/external-docs/src/components/AccountForm.tsx
@@ -25,7 +25,7 @@ const errorMap = {
password: {
required: {
normal: 'Please enter a password',
- tooltip: 'A password is requried to create an account',
+ tooltip: 'A password is required to create an account',
},
length: {
normal: 'Please enter a password of minimum 6 characters',
diff --git a/examples/html-kitchen-sink/.storybook/main.js b/examples/html-kitchen-sink/.storybook/main.js
index 9a7f974f2c16..a5513336f60e 100644
--- a/examples/html-kitchen-sink/.storybook/main.js
+++ b/examples/html-kitchen-sink/.storybook/main.js
@@ -23,6 +23,8 @@ module.exports = {
],
core: {
builder: 'webpack4',
+ channelOptions: { allowFunction: false, maxDepth: 10 },
+ disableTelemetry: true,
},
features: {
buildStoriesJson: true,
diff --git a/examples/html-kitchen-sink/package.json b/examples/html-kitchen-sink/package.json
index a6fcaf8f7e57..6f1a8bbf02cf 100644
--- a/examples/html-kitchen-sink/package.json
+++ b/examples/html-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "html-kitchen-sink",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"private": true,
"description": "",
"keywords": [],
@@ -13,23 +13,23 @@
"storybook": "start-storybook -p 9006 --no-manager-cache"
},
"devDependencies": {
- "@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-jest": "6.5.0-beta.1",
- "@storybook/addon-links": "6.5.0-beta.1",
+ "@storybook/addon-a11y": "6.5.0-rc.1",
+ "@storybook/addon-actions": "6.5.0-rc.1",
+ "@storybook/addon-backgrounds": "6.5.0-rc.1",
+ "@storybook/addon-controls": "6.5.0-rc.1",
+ "@storybook/addon-docs": "6.5.0-rc.1",
+ "@storybook/addon-jest": "6.5.0-rc.1",
+ "@storybook/addon-links": "6.5.0-rc.1",
"@storybook/addon-postcss": "^2.0.0",
- "@storybook/addon-storyshots": "6.5.0-beta.1",
- "@storybook/addon-storysource": "6.5.0-beta.1",
- "@storybook/addon-viewport": "6.5.0-beta.1",
- "@storybook/addons": "6.5.0-beta.1",
- "@storybook/client-api": "6.5.0-beta.1",
- "@storybook/core": "6.5.0-beta.1",
- "@storybook/core-events": "6.5.0-beta.1",
- "@storybook/html": "6.5.0-beta.1",
- "@storybook/source-loader": "6.5.0-beta.1",
+ "@storybook/addon-storyshots": "6.5.0-rc.1",
+ "@storybook/addon-storysource": "6.5.0-rc.1",
+ "@storybook/addon-viewport": "6.5.0-rc.1",
+ "@storybook/addons": "6.5.0-rc.1",
+ "@storybook/client-api": "6.5.0-rc.1",
+ "@storybook/core": "6.5.0-rc.1",
+ "@storybook/core-events": "6.5.0-rc.1",
+ "@storybook/html": "6.5.0-rc.1",
+ "@storybook/source-loader": "6.5.0-rc.1",
"autoprefixer": "^10.0.1",
"eventemitter3": "^4.0.7",
"format-json": "^1.0.3",
diff --git a/examples/official-storybook/main.ts b/examples/official-storybook/main.ts
index 846261c69e77..4fe03c75fb8a 100644
--- a/examples/official-storybook/main.ts
+++ b/examples/official-storybook/main.ts
@@ -4,6 +4,10 @@ import type { StorybookConfig } from '@storybook/react/types';
const config: StorybookConfig = {
stories: [
+ {
+ directory: './stories/title',
+ titlePrefix: 'Custom Prefix',
+ },
// FIXME: Breaks e2e tests './intro.stories.mdx',
'../../lib/ui/src/**/*.stories.@(js|tsx|mdx)',
'../../lib/components/src/**/*.stories.@(js|tsx|mdx)',
@@ -34,6 +38,8 @@ const config: StorybookConfig = {
],
core: {
builder: 'webpack4',
+ channelOptions: { allowFunction: false, maxDepth: 10 },
+ disableTelemetry: true,
},
logLevel: 'debug',
features: {
diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json
index a45448e97784..35f2cb44eb4d 100644
--- a/examples/official-storybook/package.json
+++ b/examples/official-storybook/package.json
@@ -1,6 +1,6 @@
{
"name": "official-storybook",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"private": true,
"scripts": {
"build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./",
@@ -13,31 +13,31 @@
"devDependencies": {
"@emotion/jest": "^11.8.0",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
- "@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-storyshots-puppeteer": "6.5.0-beta.1",
- "@storybook/addon-storysource": "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/cli": "6.5.0-beta.1",
- "@storybook/components": "6.5.0-beta.1",
- "@storybook/core-events": "6.5.0-beta.1",
+ "@storybook/addon-a11y": "6.5.0-rc.1",
+ "@storybook/addon-actions": "6.5.0-rc.1",
+ "@storybook/addon-backgrounds": "6.5.0-rc.1",
+ "@storybook/addon-controls": "6.5.0-rc.1",
+ "@storybook/addon-docs": "6.5.0-rc.1",
+ "@storybook/addon-interactions": "6.5.0-rc.1",
+ "@storybook/addon-jest": "6.5.0-rc.1",
+ "@storybook/addon-links": "6.5.0-rc.1",
+ "@storybook/addon-storyshots": "6.5.0-rc.1",
+ "@storybook/addon-storyshots-puppeteer": "6.5.0-rc.1",
+ "@storybook/addon-storysource": "6.5.0-rc.1",
+ "@storybook/addon-toolbars": "6.5.0-rc.1",
+ "@storybook/addon-viewport": "6.5.0-rc.1",
+ "@storybook/addons": "6.5.0-rc.1",
+ "@storybook/cli": "6.5.0-rc.1",
+ "@storybook/components": "6.5.0-rc.1",
+ "@storybook/core-events": "6.5.0-rc.1",
"@storybook/design-system": "^5.4.7",
"@storybook/jest": "^0.0.5",
- "@storybook/node-logger": "6.5.0-beta.1",
- "@storybook/react": "6.5.0-beta.1",
- "@storybook/router": "6.5.0-beta.1",
- "@storybook/source-loader": "6.5.0-beta.1",
- "@storybook/testing-library": "^0.0.7",
- "@storybook/theming": "6.5.0-beta.1",
+ "@storybook/node-logger": "6.5.0-rc.1",
+ "@storybook/react": "6.5.0-rc.1",
+ "@storybook/router": "6.5.0-rc.1",
+ "@storybook/source-loader": "6.5.0-rc.1",
+ "@storybook/testing-library": "0.0.14-next.0",
+ "@storybook/theming": "6.5.0-rc.1",
"@testing-library/dom": "^7.31.2",
"@testing-library/user-event": "^13.1.9",
"chromatic": "^6.0.2",
diff --git a/examples/official-storybook/stories/addon-a11y/highlight.stories.js b/examples/official-storybook/stories/addon-a11y/highlight.stories.js
index 88af6f4086bc..49b395782285 100644
--- a/examples/official-storybook/stories/addon-a11y/highlight.stories.js
+++ b/examples/official-storybook/stories/addon-a11y/highlight.stories.js
@@ -15,9 +15,9 @@ export default {
decorators: [(storyFn) => {storyFn()}],
};
-const PassesHighlight = styled.div(highlightObject(convert(themes.normal).color.positive));
-const IncompleteHighlight = styled.div(highlightObject(convert(themes.normal).color.warning));
-const ViolationsHighlight = styled.div(highlightObject(convert(themes.normal).color.negative));
+const PassesHighlight = styled.div(highlightObject(convert(themes.light).color.positive));
+const IncompleteHighlight = styled.div(highlightObject(convert(themes.light).color.warning));
+const ViolationsHighlight = styled.div(highlightObject(convert(themes.light).color.negative));
export const Passes = () => {text} ;
export const Incomplete = () => {text} ;
diff --git a/examples/official-storybook/stories/addon-a11y/parameters.stories.js b/examples/official-storybook/stories/addon-a11y/parameters.stories.js
new file mode 100644
index 000000000000..77c2a22f57b6
--- /dev/null
+++ b/examples/official-storybook/stories/addon-a11y/parameters.stories.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import BaseButton from '../../components/BaseButton';
+
+export default {
+ title: 'Addons/A11y/Parameters',
+ component: BaseButton,
+ parameters: {
+ options: { selectedPanel: 'storybook/a11y/panel' },
+ },
+};
+
+export const ElementId = () => (
+ <>
+
+ The a11y.element parameter is set to the Insufficient contrast{' '}
+ section.{' '}
+
+
+
+ No discernable button text
+ This a11y violation should not be reported, as this section is not scanned.
+ This a11y issue (incomplete) should be reported.
+ {JSON.stringify(args.json, null, 2)}}
);
diff --git a/examples/official-storybook/stories/core/args.stories.js b/examples/official-storybook/stories/core/args.stories.tsx
similarity index 61%
rename from examples/official-storybook/stories/core/args.stories.js
rename to examples/official-storybook/stories/core/args.stories.tsx
index 1a1bb9ee72a1..2242a1d1f023 100644
--- a/examples/official-storybook/stories/core/args.stories.js
+++ b/examples/official-storybook/stories/core/args.stories.tsx
@@ -1,8 +1,20 @@
-import React, { useState } from 'react';
+import React, { FC, useState } from 'react';
import { useArgs } from '@storybook/client-api';
-// eslint-disable-next-line react/prop-types
-const ArgUpdater = ({ args, updateArgs, resetArgs }) => {
+interface CustomArgs {
+ first?: string;
+ last?: string;
+ foo?: string;
+}
+
+type UpdateArgs = ReturnType[1];
+type ResetArgs = ReturnType[2];
+
+const ArgUpdater: FC<{ args: CustomArgs; updateArgs: UpdateArgs; resetArgs: ResetArgs }> = ({
+ args,
+ updateArgs,
+ resetArgs,
+}) => {
const [argsInput, updateArgsInput] = useState(JSON.stringify(args));
return (
@@ -30,7 +42,7 @@ export default {
title: 'Core/Args',
decorators: [
(story) => {
- const [args, updateArgs, resetArgs] = useArgs();
+ const [args, updateArgs, resetArgs] = useArgs();
return (
<>
@@ -63,4 +75,24 @@ export const DifferentSet = Template.bind({});
DifferentSet.args = {
foo: 'bar',
bar: 2,
+} as CustomArgs;
+
+export const TestUndefinedArgs = Template.bind({});
+TestUndefinedArgs.args = {
+ first: 'Bob',
+ last: 'Miller',
+ foo: 'bar',
+} as CustomArgs;
+TestUndefinedArgs.argTypes = {
+ first: {
+ control: { type: 'select' },
+ options: ['Bob', 'Alice'],
+ },
+ last: {
+ control: { type: 'select' },
+ options: ['Miller', 'Meyer'],
+ },
+ foo: {
+ control: { type: 'text' },
+ },
};
diff --git a/examples/official-storybook/stories/title/AutoTitle.stories.js b/examples/official-storybook/stories/title/AutoTitle.stories.js
new file mode 100644
index 000000000000..125c1157c1c1
--- /dev/null
+++ b/examples/official-storybook/stories/title/AutoTitle.stories.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Form } from '@storybook/components';
+
+const { Button } = Form;
+
+export default {
+ // Title not needed due to CSF3 auto-title
+ // title: 'AutoTitle',
+ component: Button,
+};
+
+export const Basic = () => ;
diff --git a/examples/official-storybook/stories/title/CustomTitle.stories.js b/examples/official-storybook/stories/title/CustomTitle.stories.js
new file mode 100644
index 000000000000..1ff5710b11d1
--- /dev/null
+++ b/examples/official-storybook/stories/title/CustomTitle.stories.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Form } from '@storybook/components';
+
+const { Button } = Form;
+
+export default {
+ title: 'CustomTitle',
+ component: Button,
+};
+
+export const Basic = () => ;
diff --git a/examples/preact-kitchen-sink/.storybook/main.js b/examples/preact-kitchen-sink/.storybook/main.js
index 9ed640ccc25d..5dbcbe753cf8 100644
--- a/examples/preact-kitchen-sink/.storybook/main.js
+++ b/examples/preact-kitchen-sink/.storybook/main.js
@@ -23,6 +23,8 @@ module.exports = {
},
core: {
builder: 'webpack4',
+ channelOptions: { allowFunction: false, maxDepth: 10 },
+ disableTelemetry: true,
},
staticDirs: ['../public'],
features: {
diff --git a/examples/preact-kitchen-sink/package.json b/examples/preact-kitchen-sink/package.json
index da0c0fea3973..c23a373fb100 100644
--- a/examples/preact-kitchen-sink/package.json
+++ b/examples/preact-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "preact-example",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"private": true,
"scripts": {
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@@ -15,16 +15,16 @@
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/plugin-transform-runtime": "^7.12.10",
- "@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-links": "6.5.0-beta.1",
- "@storybook/addon-storyshots": "6.5.0-beta.1",
- "@storybook/addon-storysource": "6.5.0-beta.1",
- "@storybook/addon-viewport": "6.5.0-beta.1",
- "@storybook/addons": "6.5.0-beta.1",
- "@storybook/preact": "6.5.0-beta.1",
- "@storybook/source-loader": "6.5.0-beta.1",
+ "@storybook/addon-a11y": "6.5.0-rc.1",
+ "@storybook/addon-actions": "6.5.0-rc.1",
+ "@storybook/addon-backgrounds": "6.5.0-rc.1",
+ "@storybook/addon-links": "6.5.0-rc.1",
+ "@storybook/addon-storyshots": "6.5.0-rc.1",
+ "@storybook/addon-storysource": "6.5.0-rc.1",
+ "@storybook/addon-viewport": "6.5.0-rc.1",
+ "@storybook/addons": "6.5.0-rc.1",
+ "@storybook/preact": "6.5.0-rc.1",
+ "@storybook/source-loader": "6.5.0-rc.1",
"@types/prop-types": "^15.7.3",
"@types/react": "^17",
"@types/react-dom": "^17",
diff --git a/examples/react-ts-webpack4/main.ts b/examples/react-ts-webpack4/main.ts
index 9f01df4c63e7..c02cde327601 100644
--- a/examples/react-ts-webpack4/main.ts
+++ b/examples/react-ts-webpack4/main.ts
@@ -19,6 +19,7 @@ const config: StorybookConfig = {
],
core: {
builder: 'webpack4',
+ disableTelemetry: true,
},
typescript: {
check: true,
diff --git a/examples/react-ts-webpack4/package.json b/examples/react-ts-webpack4/package.json
index 2b671e0eadc6..ac5b2b5720ac 100644
--- a/examples/react-ts-webpack4/package.json
+++ b/examples/react-ts-webpack4/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/example-react-ts-webpack4",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"private": true,
"scripts": {
"build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./",
@@ -8,10 +8,10 @@
"storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ --no-manager-cache"
},
"dependencies": {
- "@storybook/addon-controls": "6.5.0-beta.1",
- "@storybook/addon-essentials": "6.5.0-beta.1",
- "@storybook/builder-webpack4": "6.5.0-beta.1",
- "@storybook/react": "6.5.0-beta.1",
+ "@storybook/addon-controls": "6.5.0-rc.1",
+ "@storybook/addon-essentials": "6.5.0-rc.1",
+ "@storybook/builder-webpack4": "6.5.0-rc.1",
+ "@storybook/react": "6.5.0-rc.1",
"@types/react": "^16.14.23",
"@types/react-dom": "^16.9.14",
"prop-types": "15.7.2",
diff --git a/examples/react-ts/.storybook/main.ts b/examples/react-ts/.storybook/main.ts
index 2e82165e7cea..33fb89ce230f 100644
--- a/examples/react-ts/.storybook/main.ts
+++ b/examples/react-ts/.storybook/main.ts
@@ -2,9 +2,18 @@ import type { StorybookConfig } from '@storybook/react/types';
const config: StorybookConfig = {
stories: [
+ {
+ directory: '../src/title',
+ titlePrefix: 'Custom Prefix',
+ },
{
directory: '../src',
titlePrefix: 'Demo',
+ files: '*.stories.(js|ts|tsx|mdx)',
+ },
+ {
+ directory: '../src/addon-docs',
+ files: '*.stories.mdx',
},
],
logLevel: 'debug',
@@ -24,10 +33,11 @@ const config: StorybookConfig = {
core: {
builder: { name: 'webpack4' },
channelOptions: { allowFunction: false, maxDepth: 10 },
+ disableTelemetry: true,
},
features: {
postcss: false,
- // modernInlineRender: true,
+ modernInlineRender: true,
storyStoreV7: !global.navigator?.userAgent?.match?.('jsdom'),
buildStoriesJson: true,
babelModeV7: true,
diff --git a/examples/react-ts/.storybook/manager.js b/examples/react-ts/.storybook/manager.js
new file mode 100644
index 000000000000..ece01ccdfaee
--- /dev/null
+++ b/examples/react-ts/.storybook/manager.js
@@ -0,0 +1,8 @@
+import { addons } from '@storybook/addons';
+import startCase from 'lodash/startCase';
+
+addons.setConfig({
+ sidebar: {
+ renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)),
+ },
+});
diff --git a/examples/react-ts/package.json b/examples/react-ts/package.json
index 7622afa3185a..b4b980c2e469 100644
--- a/examples/react-ts/package.json
+++ b/examples/react-ts/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/example-react-ts",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"private": true,
"scripts": {
"build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook",
@@ -18,13 +18,14 @@
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"@babel/preset-typescript": "^7.12.7",
- "@storybook/addon-essentials": "6.5.0-beta.1",
- "@storybook/addon-storyshots": "6.5.0-beta.1",
- "@storybook/addon-storysource": "6.5.0-beta.1",
- "@storybook/cli": "6.5.0-beta.1",
- "@storybook/components": "6.5.0-beta.1",
- "@storybook/react": "6.5.0-beta.1",
- "@storybook/theming": "6.5.0-beta.1",
+ "@storybook/addon-essentials": "6.5.0-rc.1",
+ "@storybook/addon-storyshots": "6.5.0-rc.1",
+ "@storybook/addon-storysource": "6.5.0-rc.1",
+ "@storybook/addons": "6.5.0-rc.1",
+ "@storybook/cli": "6.5.0-rc.1",
+ "@storybook/components": "6.5.0-rc.1",
+ "@storybook/react": "6.5.0-rc.1",
+ "@storybook/theming": "6.5.0-rc.1",
"@testing-library/dom": "^7.31.2",
"@testing-library/react": "12.1.2",
"@testing-library/user-event": "^13.1.9",
@@ -32,6 +33,7 @@
"@types/react": "^16.14.23",
"@types/react-dom": "^16.9.14",
"cross-env": "^7.0.3",
+ "lodash": "^4.17.21",
"typescript": "^3.9.7",
"webpack": "4"
}
diff --git a/examples/react-ts/src/AccountForm.tsx b/examples/react-ts/src/AccountForm.tsx
index d5e612931ac7..7872ce2e44d6 100644
--- a/examples/react-ts/src/AccountForm.tsx
+++ b/examples/react-ts/src/AccountForm.tsx
@@ -25,7 +25,7 @@ const errorMap = {
password: {
required: {
normal: 'Please enter a password',
- tooltip: 'A password is requried to create an account',
+ tooltip: 'A password is required to create an account',
},
length: {
normal: 'Please enter a password of minimum 6 characters',
diff --git a/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap b/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap
index c7c7e0bda05e..a3430706744a 100644
--- a/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap
+++ b/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap
@@ -1,5 +1,175 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`Storyshots Custom Prefix/AutoTitle Basic 1`] = `
+.emotion-0 {
+ border: 0;
+ border-radius: 3em;
+ cursor: pointer;
+ display: inline-block;
+ overflow: hidden;
+ padding: 8px 16px;
+ position: relative;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ -webkit-transition: all 150ms ease-out;
+ transition: all 150ms ease-out;
+ -webkit-transform: translate3d(0,0,0);
+ -moz-transform: translate3d(0,0,0);
+ -ms-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);
+ vertical-align: top;
+ white-space: nowrap;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ opacity: 1;
+ margin: 0;
+ background: transparent;
+ font-size: 12px;
+ font-weight: 700;
+ line-height: 1;
+ background: #fafafa;
+ color: #333333;
+ box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+ border-radius: 4px;
+ padding: 10px 16px;
+ display: inline;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ overflow: visible;
+ z-index: 2;
+}
+
+.emotion-0 svg {
+ display: inline-block;
+ height: 14px;
+ width: 14px;
+ vertical-align: top;
+ margin-right: 4px;
+ margin-top: -1px;
+ margin-bottom: -1px;
+ pointer-events: none;
+}
+
+.emotion-0 svg path {
+ fill: currentColor;
+}
+
+.emotion-0:hover {
+ background: #f2f2f2;
+}
+
+.emotion-0:active {
+ background: #FFFFFF;
+}
+
+.emotion-0:focus {
+ box-shadow: rgba(30,167,253,1) 0 0 0 1px inset;
+ outline: none;
+}
+
+.emotion-0:hover {
+ -webkit-transform: none;
+ -moz-transform: none;
+ -ms-transform: none;
+ transform: none;
+}
+
+
+`;
+
+exports[`Storyshots Custom Prefix/CustomTitle Basic 1`] = `
+.emotion-0 {
+ border: 0;
+ border-radius: 3em;
+ cursor: pointer;
+ display: inline-block;
+ overflow: hidden;
+ padding: 8px 16px;
+ position: relative;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ -webkit-transition: all 150ms ease-out;
+ transition: all 150ms ease-out;
+ -webkit-transform: translate3d(0,0,0);
+ -moz-transform: translate3d(0,0,0);
+ -ms-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);
+ vertical-align: top;
+ white-space: nowrap;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ opacity: 1;
+ margin: 0;
+ background: transparent;
+ font-size: 12px;
+ font-weight: 700;
+ line-height: 1;
+ background: #fafafa;
+ color: #333333;
+ box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+ border-radius: 4px;
+ padding: 10px 16px;
+ display: inline;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ overflow: visible;
+ z-index: 2;
+}
+
+.emotion-0 svg {
+ display: inline-block;
+ height: 14px;
+ width: 14px;
+ vertical-align: top;
+ margin-right: 4px;
+ margin-top: -1px;
+ margin-bottom: -1px;
+ pointer-events: none;
+}
+
+.emotion-0 svg path {
+ fill: currentColor;
+}
+
+.emotion-0:hover {
+ background: #f2f2f2;
+}
+
+.emotion-0:active {
+ background: #FFFFFF;
+}
+
+.emotion-0:focus {
+ box-shadow: rgba(30,167,253,1) 0 0 0 1px inset;
+ outline: none;
+}
+
+.emotion-0:hover {
+ -webkit-transform: none;
+ -moz-transform: none;
+ -ms-transform: none;
+ transform: none;
+}
+
+
+`;
+
exports[`Storyshots Demo/AccountForm Standard 1`] = `
.emotion-0 {
font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
@@ -3797,86 +3967,139 @@ exports[`Storyshots Demo/AccountForm Verification Success 1`] = `
`;
-exports[`Storyshots Docs/ButtonMdx Basic 1`] = `
+exports[`Storyshots Demo/Examples / Button Basic 1`] = `
`;
-exports[`Storyshots Docs/ButtonMdx Controls 1`] = `
+exports[`Storyshots Demo/Examples / Button CSF 2 Story With Play 1`] = `
`;
-exports[`Storyshots Examples / Button Basic 1`] = `
+exports[`Storyshots Demo/Examples / Button Process Env 1`] = `
+
+`;
+
+exports[`Storyshots Demo/Examples / Button Story No Render 1`] = `
+
+`;
+
+exports[`Storyshots Demo/Examples / Button Story Object 1`] = `"hahaha"`;
+
+exports[`Storyshots Demo/Examples / Button Story With Play 1`] = `
+
+`;
+
+exports[`Storyshots Demo/Examples / Button With Args 1`] = `
+`;
+
+exports[`Storyshots Demo/Examples / Emoji Button Basic 1`] = `
+
`;
-exports[`Storyshots Examples / Button CSF 2 Story With Play 1`] = `
+exports[`Storyshots Demo/Examples / Emoji Button With Args 1`] = `
`;
-exports[`Storyshots Examples / Button Process Env 1`] = `
+exports[`Storyshots Demo/button2 One 1`] = `
`;
-exports[`Storyshots Examples / Button Story No Render 1`] = `
+exports[`Storyshots Demo/button2 Three 1`] = `
`;
-exports[`Storyshots Examples / Button Story Object 1`] = `"hahaha"`;
+exports[`Storyshots Demo/button2 Two 1`] = `
+
+`;
-exports[`Storyshots Examples / Button Story With Play 1`] = `
+exports[`Storyshots Demo/button3 Five 1`] = `
`;
-exports[`Storyshots Examples / Button With Args 1`] = `
+exports[`Storyshots Demo/button3 Four 1`] = `
`;
-exports[`Storyshots Examples / Emoji Button Basic 1`] = `
+exports[`Storyshots Docs/ButtonMdx Basic 1`] = `
`;
-exports[`Storyshots Examples / Emoji Button With Args 1`] = `
+exports[`Storyshots Docs/ButtonMdx Controls 1`] = `
`;
diff --git a/examples/react-ts/src/button.stories.tsx b/examples/react-ts/src/button.stories.tsx
index 2c9d8151b200..9a6162285409 100644
--- a/examples/react-ts/src/button.stories.tsx
+++ b/examples/react-ts/src/button.stories.tsx
@@ -7,10 +7,23 @@ import { screen } from '@testing-library/dom';
import userEvent from '@testing-library/user-event';
import { Button } from './button';
+const icons = {
+ foo: () => <>Foo,
+ bar: () => <>Bar,
+};
+
export default {
component: Button,
title: 'Examples / Button',
- argTypes: { onClick: { action: 'click ' } },
+ argTypes: {
+ onClick: { action: 'click ' },
+ icon: {
+ description: 'An icon, displayed to the left of the title.',
+ control: { type: 'select' },
+ options: Object.keys(icons),
+ mapping: icons,
+ },
+ },
// render: () => <>hohoho,
} as Meta;
diff --git a/examples/react-ts/src/button.tsx b/examples/react-ts/src/button.tsx
index f3c9ee6b83ea..714b5db4e0f6 100644
--- a/examples/react-ts/src/button.tsx
+++ b/examples/react-ts/src/button.tsx
@@ -1,14 +1,26 @@
-import React, { ButtonHTMLAttributes } from 'react';
+import React, { ComponentType, ButtonHTMLAttributes, useEffect } from 'react';
export interface ButtonProps extends ButtonHTMLAttributes {
/**
* A label to show on the button
*/
label: string;
+
+ /**
+ * An icon to show on the left of the label
+ */
+ icon?: ComponentType;
}
-export const Button = ({ label = 'Hello', ...props }: ButtonProps) => (
-
-);
+export const Button = ({ label = 'Hello', icon: Icon, ...props }: ButtonProps) => {
+ useEffect(() => {
+ const fn = () => console.log(`click ${label}`);
+ global.window.document.querySelector('body')?.addEventListener('click', fn);
+ return () => global.window.document.querySelector('body')?.removeEventListener('click', fn);
+ });
+ return (
+
+ );
+};
diff --git a/examples/react-ts/src/button2.stories.tsx b/examples/react-ts/src/button2.stories.tsx
new file mode 100644
index 000000000000..cfaa6df924d4
--- /dev/null
+++ b/examples/react-ts/src/button2.stories.tsx
@@ -0,0 +1,10 @@
+import { Button } from './button';
+
+export default {
+ component: Button,
+ title: 'button2',
+};
+
+export const one = { args: { label: 'one' } };
+export const two = { args: { label: 'two' } };
+export const three = { args: { label: 'three' } };
diff --git a/examples/react-ts/src/button3.stories.tsx b/examples/react-ts/src/button3.stories.tsx
new file mode 100644
index 000000000000..941d8f436f3b
--- /dev/null
+++ b/examples/react-ts/src/button3.stories.tsx
@@ -0,0 +1,9 @@
+import { Button } from './button';
+
+export default {
+ component: Button,
+ title: 'button3',
+};
+
+export const four = { args: { label: 'four' } };
+export const five = { args: { label: 'five' } };
diff --git a/examples/react-ts/src/title/AutoTitle.stories.js b/examples/react-ts/src/title/AutoTitle.stories.js
new file mode 100644
index 000000000000..125c1157c1c1
--- /dev/null
+++ b/examples/react-ts/src/title/AutoTitle.stories.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Form } from '@storybook/components';
+
+const { Button } = Form;
+
+export default {
+ // Title not needed due to CSF3 auto-title
+ // title: 'AutoTitle',
+ component: Button,
+};
+
+export const Basic = () => ;
diff --git a/examples/react-ts/src/title/CustomTitle.stories.js b/examples/react-ts/src/title/CustomTitle.stories.js
new file mode 100644
index 000000000000..1ff5710b11d1
--- /dev/null
+++ b/examples/react-ts/src/title/CustomTitle.stories.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Form } from '@storybook/components';
+
+const { Button } = Form;
+
+export default {
+ title: 'CustomTitle',
+ component: Button,
+};
+
+export const Basic = () => ;
diff --git a/examples/server-kitchen-sink/package.json b/examples/server-kitchen-sink/package.json
index 33fbab934f06..735175983bd8 100644
--- a/examples/server-kitchen-sink/package.json
+++ b/examples/server-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "server-kitchen-sink",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"private": true,
"description": "",
"keywords": [],
@@ -14,13 +14,13 @@
"storybook": "SERVER_PORT=1137 start-storybook -p 9006 --quiet"
},
"devDependencies": {
- "@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-links": "6.5.0-beta.1",
- "@storybook/node-logger": "6.5.0-beta.1",
- "@storybook/server": "6.5.0-beta.1",
+ "@storybook/addon-a11y": "6.5.0-rc.1",
+ "@storybook/addon-actions": "6.5.0-rc.1",
+ "@storybook/addon-backgrounds": "6.5.0-rc.1",
+ "@storybook/addon-controls": "6.5.0-rc.1",
+ "@storybook/addon-links": "6.5.0-rc.1",
+ "@storybook/node-logger": "6.5.0-rc.1",
+ "@storybook/server": "6.5.0-rc.1",
"concurrently": "^5.3.0",
"cors": "^2.8.5",
"express": "~4.17.1",
diff --git a/examples/standalone-preview/package.json b/examples/standalone-preview/package.json
index fb038aa21a69..0a4a32474d05 100644
--- a/examples/standalone-preview/package.json
+++ b/examples/standalone-preview/package.json
@@ -1,15 +1,15 @@
{
"name": "standalone-preview",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"private": true,
"scripts": {
"storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ../official-storybook --no-manager-cache --preview-url=http://localhost:1337/external-iframe.html",
"storybook-preview": "cross-env PREVIEW_URL=external-iframe.html parcel ./storybook.html --port 1337"
},
"devDependencies": {
- "@storybook/addon-docs": "6.5.0-beta.1",
- "@storybook/cli": "6.5.0-beta.1",
- "@storybook/react": "6.5.0-beta.1",
+ "@storybook/addon-docs": "6.5.0-rc.1",
+ "@storybook/cli": "6.5.0-rc.1",
+ "@storybook/react": "6.5.0-rc.1",
"cross-env": "^7.0.3",
"parcel": "2.0.1",
"react": "16.14.0",
diff --git a/examples/svelte-kitchen-sink/.storybook/main.js b/examples/svelte-kitchen-sink/.storybook/main.js
index b916ff3157b5..757778fd3fcc 100644
--- a/examples/svelte-kitchen-sink/.storybook/main.js
+++ b/examples/svelte-kitchen-sink/.storybook/main.js
@@ -35,6 +35,8 @@ module.exports = {
},
core: {
builder: 'webpack4',
+ channelOptions: { allowFunction: false, maxDepth: 10 },
+ disableTelemetry: true,
},
staticDirs: ['../public'],
};
diff --git a/examples/svelte-kitchen-sink/package.json b/examples/svelte-kitchen-sink/package.json
index b73497ff6662..9d6edc94512f 100644
--- a/examples/svelte-kitchen-sink/package.json
+++ b/examples/svelte-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "svelte-example",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"private": true,
"scripts": {
"build-storybook": "build-storybook",
@@ -10,21 +10,21 @@
"global": "^4.4.0"
},
"devDependencies": {
- "@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-links": "6.5.0-beta.1",
- "@storybook/addon-storyshots": "6.5.0-beta.1",
- "@storybook/addon-storysource": "6.5.0-beta.1",
- "@storybook/addon-viewport": "6.5.0-beta.1",
- "@storybook/addons": "6.5.0-beta.1",
+ "@storybook/addon-a11y": "6.5.0-rc.1",
+ "@storybook/addon-actions": "6.5.0-rc.1",
+ "@storybook/addon-backgrounds": "6.5.0-rc.1",
+ "@storybook/addon-controls": "6.5.0-rc.1",
+ "@storybook/addon-docs": "6.5.0-rc.1",
+ "@storybook/addon-interactions": "6.5.0-rc.1",
+ "@storybook/addon-links": "6.5.0-rc.1",
+ "@storybook/addon-storyshots": "6.5.0-rc.1",
+ "@storybook/addon-storysource": "6.5.0-rc.1",
+ "@storybook/addon-viewport": "6.5.0-rc.1",
+ "@storybook/addons": "6.5.0-rc.1",
"@storybook/jest": "^0.0.5",
- "@storybook/source-loader": "6.5.0-beta.1",
- "@storybook/svelte": "6.5.0-beta.1",
- "@storybook/testing-library": "^0.0.7",
+ "@storybook/source-loader": "6.5.0-rc.1",
+ "@storybook/svelte": "6.5.0-rc.1",
+ "@storybook/testing-library": "0.0.14-next.0",
"svelte-jester": "1.3.0",
"svelte-preprocess": "4.6.8"
},
diff --git a/examples/vue-3-cli/.storybook/main.js b/examples/vue-3-cli/.storybook/main.js
index 5ac709c776c1..0699c40dfc40 100644
--- a/examples/vue-3-cli/.storybook/main.js
+++ b/examples/vue-3-cli/.storybook/main.js
@@ -7,8 +7,11 @@ module.exports = {
],
core: {
builder: 'webpack4',
+ disableTelemetry: true,
},
features: {
+ storyStoreV7: !global.navigator?.userAgent?.match?.('jsdom'),
buildStoriesJson: true,
+ channelOptions: { allowFunction: false, maxDepth: 10 },
},
};
diff --git a/examples/vue-3-cli/package.json b/examples/vue-3-cli/package.json
index b1a4379cc454..f87414b6d097 100644
--- a/examples/vue-3-cli/package.json
+++ b/examples/vue-3-cli/package.json
@@ -1,6 +1,6 @@
{
"name": "vue-3-cli-example",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"private": true,
"scripts": {
"build": "vue-cli-service build",
@@ -14,14 +14,14 @@
},
"devDependencies": {
"@babel/core": "^7.12.10",
- "@storybook/addon-actions": "6.5.0-beta.1",
- "@storybook/addon-essentials": "6.5.0-beta.1",
- "@storybook/addon-interactions": "6.5.0-beta.1",
- "@storybook/addon-links": "6.5.0-beta.1",
- "@storybook/addon-storyshots": "6.5.0-beta.1",
+ "@storybook/addon-actions": "6.5.0-rc.1",
+ "@storybook/addon-essentials": "6.5.0-rc.1",
+ "@storybook/addon-interactions": "6.5.0-rc.1",
+ "@storybook/addon-links": "6.5.0-rc.1",
+ "@storybook/addon-storyshots": "6.5.0-rc.1",
"@storybook/jest": "^0.0.5",
- "@storybook/testing-library": "^0.0.7",
- "@storybook/vue3": "6.5.0-beta.1",
+ "@storybook/testing-library": "0.0.14-next.0",
+ "@storybook/vue3": "6.5.0-rc.1",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-service": "~4.5.0",
diff --git a/examples/vue-cli/.storybook/main.js b/examples/vue-cli/.storybook/main.js
index 969e1ce0af60..e80616cd0d8f 100644
--- a/examples/vue-cli/.storybook/main.js
+++ b/examples/vue-cli/.storybook/main.js
@@ -9,8 +9,11 @@ module.exports = {
],
core: {
builder: 'webpack4',
+ channelOptions: { allowFunction: false, maxDepth: 10 },
+ disableTelemetry: true,
},
features: {
+ storyStoreV7: true,
buildStoriesJson: true,
},
};
diff --git a/examples/vue-cli/package.json b/examples/vue-cli/package.json
index fd674bd293a5..c8eb085ac268 100644
--- a/examples/vue-cli/package.json
+++ b/examples/vue-cli/package.json
@@ -1,6 +1,6 @@
{
"name": "vue-cli-example",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"private": true,
"scripts": {
"build": "vue-cli-service build",
@@ -15,11 +15,11 @@
"vue-property-decorator": "^9.1.2"
},
"devDependencies": {
- "@storybook/addon-controls": "6.5.0-beta.1",
- "@storybook/addon-essentials": "6.5.0-beta.1",
+ "@storybook/addon-controls": "6.5.0-rc.1",
+ "@storybook/addon-essentials": "6.5.0-rc.1",
"@storybook/preset-scss": "^1.0.3",
- "@storybook/source-loader": "6.5.0-beta.1",
- "@storybook/vue": "6.5.0-beta.1",
+ "@storybook/source-loader": "6.5.0-rc.1",
+ "@storybook/vue": "6.5.0-rc.1",
"@vue/cli-plugin-babel": "~4.3.1",
"@vue/cli-plugin-typescript": "~4.3.1",
"@vue/cli-service": "~4.3.1",
diff --git a/examples/vue-cli/src/button/Button.stories.ts b/examples/vue-cli/src/button/Button.stories.ts
index 99043e72bc33..f960365d25fa 100644
--- a/examples/vue-cli/src/button/Button.stories.ts
+++ b/examples/vue-cli/src/button/Button.stories.ts
@@ -19,3 +19,10 @@ export const ButtonWithProps: Story = (args, { argTypes }) => ({
ButtonWithProps.args = {
size: 'big',
};
+
+export const WithDefaultRender = {
+ args: {
+ size: 'small',
+ label: 'Button with default render',
+ },
+};
diff --git a/examples/vue-cli/src/button/Button.vue b/examples/vue-cli/src/button/Button.vue
index 88fb5c1596b8..9a8839f88ff4 100644
--- a/examples/vue-cli/src/button/Button.vue
+++ b/examples/vue-cli/src/button/Button.vue
@@ -1,7 +1,9 @@
@@ -21,6 +23,11 @@ export default class Button extends Vue {
* @values default,small,big
*/
@Prop({ type: String, default: 'default' }) readonly size!: ButtonSize;
+
+ /**
+ * Label of the button
+ */
+ @Prop({ type: String, default: '' }) readonly label!: string;
}
diff --git a/examples/vue-kitchen-sink/.storybook/main.js b/examples/vue-kitchen-sink/.storybook/main.js
index f28511d9d037..6068e3c04089 100644
--- a/examples/vue-kitchen-sink/.storybook/main.js
+++ b/examples/vue-kitchen-sink/.storybook/main.js
@@ -14,9 +14,12 @@ module.exports = {
],
core: {
builder: 'webpack4',
+ channelOptions: { allowFunction: false, maxDepth: 10 },
+ disableTelemetry: true,
},
staticDirs: ['../public'],
features: {
buildStoriesJson: true,
+ storyStoreV7: !global.navigator?.userAgent?.match?.('jsdom'),
},
};
diff --git a/examples/vue-kitchen-sink/.storybook/preview.js b/examples/vue-kitchen-sink/.storybook/preview.js
index 65ca5b85929d..9f879a2bad57 100644
--- a/examples/vue-kitchen-sink/.storybook/preview.js
+++ b/examples/vue-kitchen-sink/.storybook/preview.js
@@ -10,4 +10,5 @@ export const parameters = {
docs: {
iframeHeight: '60px',
},
+ globalParameter: 'globalParameter',
};
diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json
index e32e5ae5f799..091c11a6471a 100644
--- a/examples/vue-kitchen-sink/package.json
+++ b/examples/vue-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "vue-example",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"private": true,
"scripts": {
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@@ -14,21 +14,21 @@
},
"devDependencies": {
"@babel/core": "^7.12.10",
- "@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-links": "6.5.0-beta.1",
- "@storybook/addon-storyshots": "6.5.0-beta.1",
- "@storybook/addon-storysource": "6.5.0-beta.1",
- "@storybook/addon-viewport": "6.5.0-beta.1",
- "@storybook/addons": "6.5.0-beta.1",
+ "@storybook/addon-a11y": "6.5.0-rc.1",
+ "@storybook/addon-actions": "6.5.0-rc.1",
+ "@storybook/addon-backgrounds": "6.5.0-rc.1",
+ "@storybook/addon-controls": "6.5.0-rc.1",
+ "@storybook/addon-docs": "6.5.0-rc.1",
+ "@storybook/addon-interactions": "6.5.0-rc.1",
+ "@storybook/addon-links": "6.5.0-rc.1",
+ "@storybook/addon-storyshots": "6.5.0-rc.1",
+ "@storybook/addon-storysource": "6.5.0-rc.1",
+ "@storybook/addon-viewport": "6.5.0-rc.1",
+ "@storybook/addons": "6.5.0-rc.1",
"@storybook/jest": "^0.0.5",
- "@storybook/source-loader": "6.5.0-beta.1",
- "@storybook/testing-library": "^0.0.7",
- "@storybook/vue": "6.5.0-beta.1",
+ "@storybook/source-loader": "6.5.0-rc.1",
+ "@storybook/testing-library": "0.0.14-next.0",
+ "@storybook/vue": "6.5.0-rc.1",
"@vue/babel-preset-jsx": "^1.2.4",
"babel-loader": "^8.0.0",
"cross-env": "^7.0.3",
@@ -37,6 +37,7 @@
"svg-url-loader": "^7.1.1",
"vue-loader": "^15.9.6",
"vue-style-loader": "^4.1.2",
+ "vue-template-compiler": "^2.6.12",
"webpack": "4",
"webpack-dev-server": "^3.11.2"
},
diff --git a/examples/vue-kitchen-sink/src/App.vue b/examples/vue-kitchen-sink/src/App.vue
index 06f14e40a8ca..7695b522c011 100644
--- a/examples/vue-kitchen-sink/src/App.vue
+++ b/examples/vue-kitchen-sink/src/App.vue
@@ -30,7 +30,7 @@ export default {
}
-
+ `}
+
# Welcome to Storybook
@@ -120,7 +120,7 @@ Storybook helps you build UI components in isolation from your app's business lo
That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
Browse example stories now by navigating to them in the sidebar.
-View their code in the `src/stories` directory to learn how they work.
+View their code in the `stories` directory to learn how they work.
We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
Configure
@@ -207,5 +207,5 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
TipEdit the Markdown in{' '}
- src/stories/Introduction.stories.mdx
+ stories/Introduction.stories.mdx
diff --git a/lib/cli/src/frameworks/html/ts/Button.stories.ts b/lib/cli/src/frameworks/html/ts/Button.stories.ts
index e71e07a76b9c..cfbe58ebefdb 100644
--- a/lib/cli/src/frameworks/html/ts/Button.stories.ts
+++ b/lib/cli/src/frameworks/html/ts/Button.stories.ts
@@ -1,4 +1,4 @@
-import { Story, Meta } from '@storybook/html';
+import { StoryFn, Meta } from '@storybook/html';
import { createButton, ButtonProps } from './Button';
// More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
@@ -15,10 +15,10 @@ export default {
options: ['small', 'medium', 'large'],
},
},
-} as Meta;
+} as Meta;
// More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args
-const Template: Story = (args) => {
+const Template: StoryFn = (args) => {
// You can either use a function to create DOM elements or use a plain html string!
// return `${label}`;
return createButton(args);
diff --git a/lib/cli/src/frameworks/html/ts/Button.ts b/lib/cli/src/frameworks/html/ts/Button.ts
index e55ec3dd3b85..17f8c4c07cc2 100644
--- a/lib/cli/src/frameworks/html/ts/Button.ts
+++ b/lib/cli/src/frameworks/html/ts/Button.ts
@@ -36,12 +36,16 @@ export const createButton = ({
const btn = document.createElement('button');
btn.type = 'button';
btn.innerText = label;
- btn.addEventListener('click', onClick);
+ if (onClick) {
+ btn.addEventListener('click', onClick);
+ }
const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
btn.className = ['storybook-button', `storybook-button--${size}`, mode].join(' ');
- btn.style.backgroundColor = backgroundColor;
+ if (backgroundColor) {
+ btn.style.backgroundColor = backgroundColor;
+ }
return btn;
};
diff --git a/lib/cli/src/frameworks/html/ts/Header.stories.ts b/lib/cli/src/frameworks/html/ts/Header.stories.ts
index a727dffbee22..e9096212fecc 100644
--- a/lib/cli/src/frameworks/html/ts/Header.stories.ts
+++ b/lib/cli/src/frameworks/html/ts/Header.stories.ts
@@ -1,4 +1,4 @@
-import { Story, Meta } from '@storybook/html';
+import { StoryFn, Meta } from '@storybook/html';
import { createHeader, HeaderProps } from './Header';
export default {
@@ -13,9 +13,9 @@ export default {
onLogout: { action: 'onLogout' },
onCreateAccount: { action: 'onCreateAccount' },
},
-} as Meta;
+} as Meta;
-const Template: Story = (args) => createHeader(args);
+const Template: StoryFn = (args) => createHeader(args);
export const LoggedIn = Template.bind({});
LoggedIn.args = {
diff --git a/lib/cli/src/frameworks/html/ts/Page.stories.ts b/lib/cli/src/frameworks/html/ts/Page.stories.ts
index bc7b6cdbe0e4..bea5705b9eff 100644
--- a/lib/cli/src/frameworks/html/ts/Page.stories.ts
+++ b/lib/cli/src/frameworks/html/ts/Page.stories.ts
@@ -1,5 +1,5 @@
import { within, userEvent } from '@storybook/testing-library';
-import { Story, Meta } from '@storybook/html';
+import { StoryFn, Meta } from '@storybook/html';
import { createPage } from './Page';
export default {
@@ -10,7 +10,7 @@ export default {
},
} as Meta;
-const Template: Story = () => createPage();
+const Template: StoryFn = () => createPage();
export const LoggedOut = Template.bind({});
diff --git a/lib/cli/src/frameworks/html/ts/Page.ts b/lib/cli/src/frameworks/html/ts/Page.ts
index 5c66149c82b5..4c4028ff1d99 100644
--- a/lib/cli/src/frameworks/html/ts/Page.ts
+++ b/lib/cli/src/frameworks/html/ts/Page.ts
@@ -7,12 +7,12 @@ type User = {
export const createPage = () => {
const article = document.createElement('article');
- let user: User = null;
- let header = null;
+ let user: User | undefined;
+ let header: HTMLElement | null = null;
const rerenderHeader = () => {
const wrapper = document.getElementsByTagName('article')[0];
- wrapper.replaceChild(createHeaderElement(), wrapper.firstChild);
+ wrapper.replaceChild(createHeaderElement(), wrapper.firstChild as HTMLElement);
};
const onLogin = () => {
@@ -21,7 +21,7 @@ export const createPage = () => {
};
const onLogout = () => {
- user = null;
+ user = undefined;
rerenderHeader();
};
diff --git a/lib/cli/src/generate.ts b/lib/cli/src/generate.ts
index 83d7b613497c..f363572de6ce 100644
--- a/lib/cli/src/generate.ts
+++ b/lib/cli/src/generate.ts
@@ -18,6 +18,15 @@ const pkg = sync({ cwd: __dirname }).packageJson;
const logger = console;
+program.option(
+ '--disable-telemetry',
+ 'disable sending telemetry data',
+ // default value is false, but if the user sets STORYBOOK_DISABLE_TELEMETRY, it can be true
+ process.env.STORYBOOK_DISABLE_TELEMETRY && process.env.STORYBOOK_DISABLE_TELEMETRY !== 'false'
+);
+
+program.option('--enable-crash-reports', 'enable sending crash reports to telemetry data');
+
program
.command('init')
.description('Initialize Storybook into your project.')
diff --git a/lib/cli/src/generators/ANGULAR/angular-helpers.ts b/lib/cli/src/generators/ANGULAR/angular-helpers.ts
index bd9eecfa2bab..a1ab6d8f9221 100644
--- a/lib/cli/src/generators/ANGULAR/angular-helpers.ts
+++ b/lib/cli/src/generators/ANGULAR/angular-helpers.ts
@@ -10,7 +10,7 @@ type TsConfig = {
export function getAngularAppTsConfigPath() {
const angularJson = readFileAsJson('angular.json', true);
- const { defaultProject } = angularJson;
+ const defaultProject = getDefaultProjectName(angularJson);
const tsConfigPath = angularJson.projects[defaultProject].architect.build.options.tsConfig;
if (!tsConfigPath || !fs.existsSync(path.resolve(tsConfigPath))) {
@@ -50,9 +50,33 @@ export function editStorybookTsConfig(tsconfigPath: string) {
writeFileAsJson(tsconfigPath, tsConfigJson);
}
-export function isDefaultProjectSet() {
- const angularJson = readFileAsJson('angular.json', true);
- return angularJson && !!angularJson.defaultProject;
+export function getDefaultProjectName(angularJson: any): string | undefined {
+ const { defaultProject, projects } = angularJson;
+
+ if (projects?.storybook) {
+ return 'storybook';
+ }
+
+ if (defaultProject) {
+ return defaultProject;
+ }
+
+ const firstProjectName = projects ? Object.keys(projects)[0] : undefined;
+ if (firstProjectName) {
+ return firstProjectName;
+ }
+
+ return undefined;
+}
+
+export function checkForProjects() {
+ const { projects } = readFileAsJson('angular.json', true);
+
+ if (!projects || Object.keys(projects).length === 0) {
+ throw new Error(
+ 'Could not find a project in your Angular workspace. \nAdd a project and re-run the installation'
+ );
+ }
}
export async function getBaseTsConfigName() {
diff --git a/lib/cli/src/generators/ANGULAR/index.ts b/lib/cli/src/generators/ANGULAR/index.ts
index 934ceb6295d5..3ff3b1b4d852 100644
--- a/lib/cli/src/generators/ANGULAR/index.ts
+++ b/lib/cli/src/generators/ANGULAR/index.ts
@@ -1,7 +1,7 @@
import path from 'path';
import semver from '@storybook/semver';
import {
- isDefaultProjectSet,
+ checkForProjects,
editStorybookTsConfig,
getAngularAppTsConfigJson,
getAngularAppTsConfigPath,
@@ -28,11 +28,8 @@ function editAngularAppTsConfig() {
}
const generator: Generator = async (packageManager, npmOptions, options) => {
- if (!isDefaultProjectSet()) {
- throw new Error(
- 'Could not find a default project in your Angular workspace.\nSet a defaultProject in your angular.json and re-run the installation.'
- );
- }
+ checkForProjects();
+
const angularVersion = semver.coerce(
packageManager.retrievePackageJson().dependencies['@angular/core']
)?.version;
diff --git a/lib/cli/src/initiate.ts b/lib/cli/src/initiate.ts
index 50516c2e9788..2a41e4efdbc1 100644
--- a/lib/cli/src/initiate.ts
+++ b/lib/cli/src/initiate.ts
@@ -1,8 +1,9 @@
import { UpdateNotifier, Package } from 'update-notifier';
import chalk from 'chalk';
import prompts from 'prompts';
-import { detect, isStorybookInstalled, detectLanguage, detectBuilder } from './detect';
+import { telemetry } from '@storybook/telemetry';
import { installableProjectTypes, ProjectType, Builder } from './project_types';
+import { detect, isStorybookInstalled, detectLanguage, detectBuilder } from './detect';
import { commandLog, codeLog, paddedLog } from './helpers';
import angularGenerator from './generators/ANGULAR';
import aureliaGenerator from './generators/AURELIA';
@@ -26,7 +27,7 @@ import preactGenerator from './generators/PREACT';
import svelteGenerator from './generators/SVELTE';
import raxGenerator from './generators/RAX';
import serverGenerator from './generators/SERVER';
-import { JsPackageManagerFactory, readPackageJson } from './js-package-manager';
+import { JsPackageManagerFactory, JsPackageManager } from './js-package-manager';
import { NpmOptions } from './NpmOptions';
import { automigrate } from './automigrate';
@@ -43,11 +44,14 @@ type CommandOptions = {
builder?: Builder;
linkable?: boolean;
commonJs?: boolean;
+ disableTelemetry?: boolean;
};
-const installStorybook = (projectType: ProjectType, options: CommandOptions): Promise => {
- const packageManager = JsPackageManagerFactory.getPackageManager(options.useNpm);
-
+const installStorybook = (
+ projectType: ProjectType,
+ packageManager: JsPackageManager,
+ options: CommandOptions
+): Promise => {
const npmOptions: NpmOptions = {
installAsDevDependencies: true,
skipInstall: options.skipInstall,
@@ -62,21 +66,6 @@ const installStorybook = (projectType: ProjectType, options: CommandOptions): Pr
commonJs: options.commonJs,
};
- const end = () => {
- if (!options.skipInstall) {
- packageManager.installDependencies();
- }
-
- logger.log('\nTo run your Storybook, type:\n');
- codeLog([packageManager.getRunStorybookCommand()]);
- logger.log('\nFor more information visit:', chalk.cyan('https://storybook.js.org'));
-
- // Add a new line for the clear visibility.
- logger.log();
- };
-
- const REACT_NATIVE_REPO = 'https://github.com/storybookjs/react-native';
-
const runGenerator: () => Promise = () => {
switch (projectType) {
case ProjectType.ALREADY_HAS_STORYBOOK:
@@ -92,18 +81,17 @@ const installStorybook = (projectType: ProjectType, options: CommandOptions): Pr
case ProjectType.UPDATE_PACKAGE_ORGANIZATIONS:
return updateOrganisationsGenerator(packageManager, options.parser, npmOptions)
.then(() => null) // commandLog doesn't like to see output
- .then(commandLog('Upgrading your project to the new Storybook packages.\n'))
- .then(end);
+ .then(commandLog('Upgrading your project to the new Storybook packages.\n'));
case ProjectType.REACT_SCRIPTS:
- return reactScriptsGenerator(packageManager, npmOptions, generatorOptions)
- .then(commandLog('Adding Storybook support to your "Create React App" based project'))
- .then(end);
+ return reactScriptsGenerator(packageManager, npmOptions, generatorOptions).then(
+ commandLog('Adding Storybook support to your "Create React App" based project')
+ );
case ProjectType.REACT:
- return reactGenerator(packageManager, npmOptions, generatorOptions)
- .then(commandLog('Adding Storybook support to your "React" app\n'))
- .then(end);
+ return reactGenerator(packageManager, npmOptions, generatorOptions).then(
+ commandLog('Adding Storybook support to your "React" app\n')
+ );
case ProjectType.REACT_NATIVE: {
return (
@@ -120,112 +108,103 @@ const installStorybook = (projectType: ProjectType, options: CommandOptions): Pr
]) as Promise<{ server: boolean }>)
)
.then(({ server }) => reactNativeGenerator(packageManager, npmOptions, server))
- .then(commandLog('Adding Storybook support to your "React Native" app\n'))
- .then(end)
- .then(() => {
- logger.log(chalk.red('NOTE: installation is not 100% automated.'));
- logger.log(`To quickly run Storybook, replace contents of your app entry with:\n`);
- codeLog(["export {default} from './storybook';"]);
- logger.log('\n For more in information, see the github readme:\n');
- logger.log(chalk.cyan(REACT_NATIVE_REPO));
- logger.log();
- });
+ .then(commandLog('Adding Storybook support to your "React Native" app\n'));
}
case ProjectType.METEOR:
- return meteorGenerator(packageManager, npmOptions, generatorOptions)
- .then(commandLog('Adding Storybook support to your "Meteor" app\n'))
- .then(end);
+ return meteorGenerator(packageManager, npmOptions, generatorOptions).then(
+ commandLog('Adding Storybook support to your "Meteor" app\n')
+ );
case ProjectType.WEBPACK_REACT:
- return webpackReactGenerator(packageManager, npmOptions, generatorOptions)
- .then(commandLog('Adding Storybook support to your "Webpack React" app\n'))
- .then(end);
+ return webpackReactGenerator(packageManager, npmOptions, generatorOptions).then(
+ commandLog('Adding Storybook support to your "Webpack React" app\n')
+ );
case ProjectType.REACT_PROJECT:
- return reactGenerator(packageManager, npmOptions, generatorOptions)
- .then(commandLog('Adding Storybook support to your "React" library\n'))
- .then(end);
+ return reactGenerator(packageManager, npmOptions, generatorOptions).then(
+ commandLog('Adding Storybook support to your "React" library\n')
+ );
case ProjectType.SFC_VUE:
- return sfcVueGenerator(packageManager, npmOptions, generatorOptions)
- .then(commandLog('Adding Storybook support to your "Single File Components Vue" app\n'))
- .then(end);
+ return sfcVueGenerator(packageManager, npmOptions, generatorOptions).then(
+ commandLog('Adding Storybook support to your "Single File Components Vue" app\n')
+ );
case ProjectType.VUE:
- return vueGenerator(packageManager, npmOptions, generatorOptions)
- .then(commandLog('Adding Storybook support to your "Vue" app\n'))
- .then(end);
+ return vueGenerator(packageManager, npmOptions, generatorOptions).then(
+ commandLog('Adding Storybook support to your "Vue" app\n')
+ );
case ProjectType.VUE3:
- return vue3Generator(packageManager, npmOptions, generatorOptions)
- .then(commandLog('Adding Storybook support to your "Vue 3" app\n'))
- .then(end);
+ return vue3Generator(packageManager, npmOptions, generatorOptions).then(
+ commandLog('Adding Storybook support to your "Vue 3" app\n')
+ );
case ProjectType.ANGULAR:
- return angularGenerator(packageManager, npmOptions, generatorOptions)
- .then(commandLog('Adding Storybook support to your "Angular" app\n'))
- .then(end);
+ return angularGenerator(packageManager, npmOptions, generatorOptions).then(
+ commandLog('Adding Storybook support to your "Angular" app\n')
+ );
case ProjectType.EMBER:
- return emberGenerator(packageManager, npmOptions, generatorOptions)
- .then(commandLog('Adding Storybook support to your "Ember" app\n'))
- .then(end);
+ return emberGenerator(packageManager, npmOptions, generatorOptions).then(
+ commandLog('Adding Storybook support to your "Ember" app\n')
+ );
case ProjectType.MITHRIL:
- return mithrilGenerator(packageManager, npmOptions, generatorOptions)
- .then(commandLog('Adding Storybook support to your "Mithril" app\n'))
- .then(end);
+ return mithrilGenerator(packageManager, npmOptions, generatorOptions).then(
+ commandLog('Adding Storybook support to your "Mithril" app\n')
+ );
case ProjectType.MARIONETTE:
- return marionetteGenerator(packageManager, npmOptions, generatorOptions)
- .then(commandLog('Adding Storybook support to your "Marionette.js" app\n'))
- .then(end);
+ return marionetteGenerator(packageManager, npmOptions, generatorOptions).then(
+ commandLog('Adding Storybook support to your "Marionette.js" app\n')
+ );
case ProjectType.MARKO:
- return markoGenerator(packageManager, npmOptions, generatorOptions)
- .then(commandLog('Adding Storybook support to your "Marko" app\n'))
- .then(end);
+ return markoGenerator(packageManager, npmOptions, generatorOptions).then(
+ commandLog('Adding Storybook support to your "Marko" app\n')
+ );
case ProjectType.HTML:
- return htmlGenerator(packageManager, npmOptions, generatorOptions)
- .then(commandLog('Adding Storybook support to your "HTML" app\n'))
- .then(end);
+ return htmlGenerator(packageManager, npmOptions, generatorOptions).then(
+ commandLog('Adding Storybook support to your "HTML" app\n')
+ );
case ProjectType.WEB_COMPONENTS:
- return webComponentsGenerator(packageManager, npmOptions, generatorOptions)
- .then(commandLog('Adding Storybook support to your "web components" app\n'))
- .then(end);
+ return webComponentsGenerator(packageManager, npmOptions, generatorOptions).then(
+ commandLog('Adding Storybook support to your "web components" app\n')
+ );
case ProjectType.RIOT:
- return riotGenerator(packageManager, npmOptions, generatorOptions)
- .then(commandLog('Adding Storybook support to your "riot.js" app\n'))
- .then(end);
+ return riotGenerator(packageManager, npmOptions, generatorOptions).then(
+ commandLog('Adding Storybook support to your "riot.js" app\n')
+ );
case ProjectType.PREACT:
- return preactGenerator(packageManager, npmOptions, generatorOptions)
- .then(commandLog('Adding Storybook support to your "Preact" app\n'))
- .then(end);
+ return preactGenerator(packageManager, npmOptions, generatorOptions).then(
+ commandLog('Adding Storybook support to your "Preact" app\n')
+ );
case ProjectType.SVELTE:
- return svelteGenerator(packageManager, npmOptions, generatorOptions)
- .then(commandLog('Adding Storybook support to your "Svelte" app\n'))
- .then(end);
+ return svelteGenerator(packageManager, npmOptions, generatorOptions).then(
+ commandLog('Adding Storybook support to your "Svelte" app\n')
+ );
case ProjectType.RAX:
- return raxGenerator(packageManager, npmOptions, generatorOptions)
- .then(commandLog('Adding Storybook support to your "Rax" app\n'))
- .then(end);
+ return raxGenerator(packageManager, npmOptions, generatorOptions).then(
+ commandLog('Adding Storybook support to your "Rax" app\n')
+ );
case ProjectType.AURELIA:
- return aureliaGenerator(packageManager, npmOptions, generatorOptions)
- .then(commandLog('Adding Storybook support to your "Aurelia" app\n'))
- .then(end);
+ return aureliaGenerator(packageManager, npmOptions, generatorOptions).then(
+ commandLog('Adding Storybook support to your "Aurelia" app\n')
+ );
case ProjectType.SERVER:
- return serverGenerator(packageManager, npmOptions, generatorOptions)
- .then(commandLog('Adding Storybook support to your "Server" app\n'))
- .then(end);
+ return serverGenerator(packageManager, npmOptions, generatorOptions).then(
+ commandLog('Adding Storybook support to your "Server" app\n')
+ );
case ProjectType.UNSUPPORTED:
paddedLog(`We detected a project type that we don't support yet.`);
@@ -247,7 +226,7 @@ const installStorybook = (projectType: ProjectType, options: CommandOptions): Pr
// Add a new line for the clear visibility.
logger.log();
- return projectTypeInquirer(options);
+ return projectTypeInquirer(options, packageManager);
}
};
@@ -257,7 +236,10 @@ const installStorybook = (projectType: ProjectType, options: CommandOptions): Pr
});
};
-const projectTypeInquirer = async (options: { yes?: boolean }) => {
+const projectTypeInquirer = async (
+ options: { yes?: boolean },
+ packageManager: JsPackageManager
+) => {
const manualAnswer = options.yes
? true
: await prompts([
@@ -280,15 +262,20 @@ const projectTypeInquirer = async (options: { yes?: boolean }) => {
})),
},
]);
- return installStorybook(frameworkAnswer.manualFramework, options);
+ return installStorybook(frameworkAnswer.manualFramework, packageManager, options);
}
return Promise.resolve();
};
export async function initiate(options: CommandOptions, pkg: Package): Promise {
- const welcomeMessage = 'sb init - the simplest way to add a Storybook to your project.';
+ const packageManager = JsPackageManagerFactory.getPackageManager(options.useNpm);
+ const welcomeMessage = 'storybook init - the simplest way to add a Storybook to your project.';
logger.log(chalk.inverse(`\n ${welcomeMessage} \n`));
+ if (!options.disableTelemetry) {
+ telemetry('init');
+ }
+
// Update notify code.
new UpdateNotifier({
pkg,
@@ -302,7 +289,7 @@ export async function initiate(options: CommandOptions, pkg: Package): Promise;
- devDependencies?: Record;
- peerDependencies?: Record;
- scripts?: Record;
- eslintConfig?: any;
- type?: 'module';
-};
+import type { PackageJson } from '@storybook/core-common';
+export type { PackageJson } from '@storybook/core-common';
export type PackageJsonWithDepsAndDevDeps = PackageJson &
Required>;
diff --git a/lib/cli/src/js-package-manager/PackageJsonHelper.ts b/lib/cli/src/js-package-manager/PackageJsonHelper.ts
index 17fa72935f0e..e013783745e4 100644
--- a/lib/cli/src/js-package-manager/PackageJsonHelper.ts
+++ b/lib/cli/src/js-package-manager/PackageJsonHelper.ts
@@ -1,11 +1,11 @@
import path from 'path';
import fs from 'fs';
-import { PackageJson } from './PackageJson';
+import type { PackageJson } from '@storybook/core-common';
-export function readPackageJson(): PackageJson | false {
+export function readPackageJson(): PackageJson {
const packageJsonPath = path.resolve('package.json');
if (!fs.existsSync(packageJsonPath)) {
- return false;
+ throw new Error(`Could not read package.json file at ${packageJsonPath}`);
}
const jsonContent = fs.readFileSync(packageJsonPath, 'utf8');
diff --git a/lib/cli/src/repro-generators/configs.ts b/lib/cli/src/repro-generators/configs.ts
index c5f7b5e52739..f1b5b10fcb26 100644
--- a/lib/cli/src/repro-generators/configs.ts
+++ b/lib/cli/src/repro-generators/configs.ts
@@ -13,6 +13,11 @@ export interface Parameters {
autoDetect?: boolean;
/** Dependencies to add before building Storybook */
additionalDeps?: string[];
+ /** Files to add before installing Storybook */
+ additionalFiles?: {
+ path: string;
+ contents: string;
+ }[];
/** Add typescript dependency and creates a tsconfig.json file */
typescript?: boolean;
/** Merge configurations to main.js before running the tests */
@@ -119,7 +124,7 @@ const baseAngular: Parameters = {
framework: 'angular',
name: 'angular',
version: 'latest',
- generator: `npx -p @angular/cli@{{version}} ng new {{appName}} --routing=true --minimal=true --style=scss --skipInstall=true --strict`,
+ generator: `npx -p @angular/cli@{{version}} ng new {{appName}} --routing=true --minimal=true --style=scss --skip-install=true --strict`,
};
export const angular10: Parameters = {
@@ -155,7 +160,7 @@ export const angular13: Parameters = {
export const angular_modern_inline_rendering: Parameters = {
...baseAngular,
name: 'angular_modern_inline_rendering',
- additionalDeps: ['jest', '@storybook/test-runner'],
+ additionalDeps: ['jest@27', '@storybook/test-runner'],
mainOverrides: {
features: {
storyStoreV7: true,
diff --git a/lib/cli/src/repro-generators/scripts.ts b/lib/cli/src/repro-generators/scripts.ts
index 28efd6ce0d24..21a608f5fea1 100644
--- a/lib/cli/src/repro-generators/scripts.ts
+++ b/lib/cli/src/repro-generators/scripts.ts
@@ -1,5 +1,5 @@
import path from 'path';
-import { readJSON, writeJSON } from 'fs-extra';
+import { readJSON, writeJSON, outputFile } from 'fs-extra';
import shell, { ExecOptions } from 'shelljs';
import chalk from 'chalk';
import { cra, cra_typescript } from './configs';
@@ -22,6 +22,11 @@ export interface Parameters {
ensureDir?: boolean;
/** Dependencies to add before building Storybook */
additionalDeps?: string[];
+ /** Files to add before installing Storybook */
+ additionalFiles?: {
+ path: string;
+ contents: string;
+ }[];
/** Add typescript dependency and creates a tsconfig.json file */
typescript?: boolean;
}
@@ -136,6 +141,16 @@ const generate = async ({ cwd, name, appName, version, generator }: Options) =>
);
};
+const addAdditionalFiles = async ({ additionalFiles, cwd }: Options) => {
+ logger.info(`⤵️ Adding required files`);
+
+ await Promise.all(
+ additionalFiles.map(async (file) => {
+ await outputFile(path.resolve(cwd, file.path), file.contents, { encoding: 'UTF-8' });
+ })
+ );
+};
+
const initStorybook = async ({ cwd, autoDetect = true, name, e2e }: Options) => {
const type = autoDetect ? '' : `--type ${name}`;
const linkable = e2e ? '' : '--linkable';
@@ -228,6 +243,7 @@ export const createAndInit = async (
logger.log();
await doTask(generate, { ...options, cwd: options.creationPath });
+ await doTask(addAdditionalFiles, { ...options, cwd }, !!options.additionalFiles);
if (e2e) {
await doTask(addPackageResolutions, options);
}
diff --git a/lib/cli/src/upgrade.ts b/lib/cli/src/upgrade.ts
index 2d32d8a4c0cb..e656b994bdfb 100644
--- a/lib/cli/src/upgrade.ts
+++ b/lib/cli/src/upgrade.ts
@@ -1,4 +1,5 @@
import { sync as spawnSync } from 'cross-spawn';
+import { telemetry } from '@storybook/telemetry';
import semver from '@storybook/semver';
import { logger } from '@storybook/node-logger';
import {
@@ -139,12 +140,23 @@ interface UpgradeOptions {
useNpm: boolean;
dryRun: boolean;
yes: boolean;
+ disableTelemetry: boolean;
}
-export const upgrade = async ({ prerelease, skipCheck, useNpm, dryRun, yes }: UpgradeOptions) => {
+export const upgrade = async ({
+ prerelease,
+ skipCheck,
+ useNpm,
+ dryRun,
+ yes,
+ ...options
+}: UpgradeOptions) => {
const packageManager = JsPackageManagerFactory.getPackageManager(useNpm);
commandLog(`Checking for latest versions of '@storybook/*' packages`);
+ if (!options.disableTelemetry) {
+ telemetry('upgrade', { prerelease });
+ }
let flags = [];
if (!dryRun) flags.push('--upgrade');
diff --git a/lib/cli/src/versions.ts b/lib/cli/src/versions.ts
index d8c03acae07d..0f527a108569 100644
--- a/lib/cli/src/versions.ts
+++ b/lib/cli/src/versions.ts
@@ -1,59 +1,60 @@
// auto generated file, do not edit
export default {
- '@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-essentials': '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-measure': '6.5.0-beta.1',
- '@storybook/addon-outline': '6.5.0-beta.1',
- '@storybook/addon-storyshots': '6.5.0-beta.1',
- '@storybook/addon-storyshots-puppeteer': '6.5.0-beta.1',
- '@storybook/addon-storysource': '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/angular': '6.5.0-beta.1',
- '@storybook/api': '6.5.0-beta.1',
- '@storybook/builder-webpack4': '6.5.0-beta.1',
- '@storybook/builder-webpack5': '6.5.0-beta.1',
- '@storybook/channel-postmessage': '6.5.0-beta.1',
- '@storybook/channel-websocket': '6.5.0-beta.1',
- '@storybook/channels': '6.5.0-beta.1',
- '@storybook/cli': '6.5.0-beta.1',
- '@storybook/client-api': '6.5.0-beta.1',
- '@storybook/client-logger': '6.5.0-beta.1',
- '@storybook/codemod': '6.5.0-beta.1',
- '@storybook/components': '6.5.0-beta.1',
- '@storybook/core': '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/csf-tools': '6.5.0-beta.1',
- '@storybook/docs-tools': '6.5.0-beta.1',
- '@storybook/ember': '6.5.0-beta.1',
- '@storybook/html': '6.5.0-beta.1',
- '@storybook/instrumenter': '6.5.0-beta.1',
- '@storybook/manager-webpack4': '6.5.0-beta.1',
- '@storybook/manager-webpack5': '6.5.0-beta.1',
- '@storybook/node-logger': '6.5.0-beta.1',
- '@storybook/postinstall': '6.5.0-beta.1',
- '@storybook/preact': '6.5.0-beta.1',
- '@storybook/preview-web': '6.5.0-beta.1',
- '@storybook/react': '6.5.0-beta.1',
- '@storybook/router': '6.5.0-beta.1',
- '@storybook/server': '6.5.0-beta.1',
- '@storybook/source-loader': '6.5.0-beta.1',
- '@storybook/store': '6.5.0-beta.1',
- '@storybook/svelte': '6.5.0-beta.1',
- '@storybook/theming': '6.5.0-beta.1',
- '@storybook/ui': '6.5.0-beta.1',
- '@storybook/vue': '6.5.0-beta.1',
- '@storybook/vue3': '6.5.0-beta.1',
- '@storybook/web-components': '6.5.0-beta.1',
+ '@storybook/addon-a11y': '6.5.0-rc.1',
+ '@storybook/addon-actions': '6.5.0-rc.1',
+ '@storybook/addon-backgrounds': '6.5.0-rc.1',
+ '@storybook/addon-controls': '6.5.0-rc.1',
+ '@storybook/addon-docs': '6.5.0-rc.1',
+ '@storybook/addon-essentials': '6.5.0-rc.1',
+ '@storybook/addon-interactions': '6.5.0-rc.1',
+ '@storybook/addon-jest': '6.5.0-rc.1',
+ '@storybook/addon-links': '6.5.0-rc.1',
+ '@storybook/addon-measure': '6.5.0-rc.1',
+ '@storybook/addon-outline': '6.5.0-rc.1',
+ '@storybook/addon-storyshots': '6.5.0-rc.1',
+ '@storybook/addon-storyshots-puppeteer': '6.5.0-rc.1',
+ '@storybook/addon-storysource': '6.5.0-rc.1',
+ '@storybook/addon-toolbars': '6.5.0-rc.1',
+ '@storybook/addon-viewport': '6.5.0-rc.1',
+ '@storybook/addons': '6.5.0-rc.1',
+ '@storybook/angular': '6.5.0-rc.1',
+ '@storybook/api': '6.5.0-rc.1',
+ '@storybook/builder-webpack4': '6.5.0-rc.1',
+ '@storybook/builder-webpack5': '6.5.0-rc.1',
+ '@storybook/channel-postmessage': '6.5.0-rc.1',
+ '@storybook/channel-websocket': '6.5.0-rc.1',
+ '@storybook/channels': '6.5.0-rc.1',
+ '@storybook/cli': '6.5.0-rc.1',
+ '@storybook/client-api': '6.5.0-rc.1',
+ '@storybook/client-logger': '6.5.0-rc.1',
+ '@storybook/codemod': '6.5.0-rc.1',
+ '@storybook/components': '6.5.0-rc.1',
+ '@storybook/core': '6.5.0-rc.1',
+ '@storybook/core-client': '6.5.0-rc.1',
+ '@storybook/core-common': '6.5.0-rc.1',
+ '@storybook/core-events': '6.5.0-rc.1',
+ '@storybook/core-server': '6.5.0-rc.1',
+ '@storybook/csf-tools': '6.5.0-rc.1',
+ '@storybook/docs-tools': '6.5.0-rc.1',
+ '@storybook/ember': '6.5.0-rc.1',
+ '@storybook/html': '6.5.0-rc.1',
+ '@storybook/instrumenter': '6.5.0-rc.1',
+ '@storybook/manager-webpack4': '6.5.0-rc.1',
+ '@storybook/manager-webpack5': '6.5.0-rc.1',
+ '@storybook/node-logger': '6.5.0-rc.1',
+ '@storybook/postinstall': '6.5.0-rc.1',
+ '@storybook/preact': '6.5.0-rc.1',
+ '@storybook/preview-web': '6.5.0-rc.1',
+ '@storybook/react': '6.5.0-rc.1',
+ '@storybook/router': '6.5.0-rc.1',
+ '@storybook/server': '6.5.0-rc.1',
+ '@storybook/source-loader': '6.5.0-rc.1',
+ '@storybook/store': '6.5.0-rc.1',
+ '@storybook/svelte': '6.5.0-rc.1',
+ '@storybook/telemetry': '6.5.0-rc.1',
+ '@storybook/theming': '6.5.0-rc.1',
+ '@storybook/ui': '6.5.0-rc.1',
+ '@storybook/vue': '6.5.0-rc.1',
+ '@storybook/vue3': '6.5.0-rc.1',
+ '@storybook/web-components': '6.5.0-rc.1',
};
diff --git a/lib/client-api/package.json b/lib/client-api/package.json
index 73bb4bf46992..e229a260b7e3 100644
--- a/lib/client-api/package.json
+++ b/lib/client-api/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/client-api",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"description": "Storybook Client API",
"keywords": [
"storybook"
@@ -40,13 +40,13 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "6.5.0-beta.1",
- "@storybook/channel-postmessage": "6.5.0-beta.1",
- "@storybook/channels": "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-rc.1",
+ "@storybook/channel-postmessage": "6.5.0-rc.1",
+ "@storybook/channels": "6.5.0-rc.1",
+ "@storybook/client-logger": "6.5.0-rc.1",
+ "@storybook/core-events": "6.5.0-rc.1",
"@storybook/csf": "0.0.2--canary.4566f4d.1",
- "@storybook/store": "6.5.0-beta.1",
+ "@storybook/store": "6.5.0-rc.1",
"@types/qs": "^6.9.5",
"@types/webpack-env": "^1.16.0",
"core-js": "^3.8.2",
@@ -68,6 +68,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/client-api/src/StoryStoreFacade.ts b/lib/client-api/src/StoryStoreFacade.ts
index 60d3c7bb9516..828a45f880a5 100644
--- a/lib/client-api/src/StoryStoreFacade.ts
+++ b/lib/client-api/src/StoryStoreFacade.ts
@@ -3,7 +3,7 @@ import dedent from 'ts-dedent';
import { SynchronousPromise } from 'synchronous-promise';
import { toId, isExportStory, storyNameFromExport } from '@storybook/csf';
import type { StoryId, AnyFramework, Parameters, StoryFn } from '@storybook/csf';
-import { StoryStore, autoTitle, sortStoriesV6 } from '@storybook/store';
+import { StoryStore, userOrAutoTitle, sortStoriesV6 } from '@storybook/store';
import type {
NormalizedProjectAnnotations,
NormalizedStoriesSpecifier,
@@ -142,17 +142,15 @@ export class StoryStoreFacade {
// eslint-disable-next-line prefer-const
let { id: componentId, title } = defaultExport || {};
- title =
- title ||
- autoTitle(
- fileName,
- (global.STORIES || []).map(
- (specifier: NormalizedStoriesSpecifier & { importPathMatcher: string }) => ({
- ...specifier,
- importPathMatcher: new RegExp(specifier.importPathMatcher),
- })
- )
- );
+ const specifiers = (global.STORIES || []).map(
+ (specifier: NormalizedStoriesSpecifier & { importPathMatcher: string }) => ({
+ ...specifier,
+ importPathMatcher: new RegExp(specifier.importPathMatcher),
+ })
+ );
+
+ title = userOrAutoTitle(fileName, specifiers, title);
+
if (!title) {
logger.info(
`Unexpected default export without title in '${fileName}': ${JSON.stringify(
diff --git a/lib/client-logger/package.json b/lib/client-logger/package.json
index d628a5fc2d8c..f76ea2428cb7 100644
--- a/lib/client-logger/package.json
+++ b/lib/client-logger/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/client-logger",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"description": "",
"keywords": [
"storybook"
@@ -46,6 +46,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/codemod/package.json b/lib/codemod/package.json
index 6505a8dcfd70..9bc0c0718453 100644
--- a/lib/codemod/package.json
+++ b/lib/codemod/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/codemod",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"description": "A collection of codemod scripts written with JSCodeshift",
"keywords": [
"storybook"
@@ -44,8 +44,8 @@
"@babel/types": "^7.12.11",
"@mdx-js/mdx": "^1.6.22",
"@storybook/csf": "0.0.2--canary.4566f4d.1",
- "@storybook/csf-tools": "6.5.0-beta.1",
- "@storybook/node-logger": "6.5.0-beta.1",
+ "@storybook/csf-tools": "6.5.0-rc.1",
+ "@storybook/node-logger": "6.5.0-rc.1",
"core-js": "^3.8.2",
"cross-spawn": "^7.0.3",
"globby": "^11.0.2",
@@ -62,6 +62,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/codemod/src/transforms/csf-2-to-3.ts b/lib/codemod/src/transforms/csf-2-to-3.ts
index 8ca8fddbb20f..18e7e272171f 100644
--- a/lib/codemod/src/transforms/csf-2-to-3.ts
+++ b/lib/codemod/src/transforms/csf-2-to-3.ts
@@ -89,7 +89,10 @@ const isSimpleCSFStory = (init: t.Expression, annotations: t.ObjectProperty[]) =
annotations.length === 0 && t.isArrowFunctionExpression(init) && init.params.length === 0;
function transform({ source }: { source: string }, api: any, options: { parser?: string }) {
- const csf = loadCsf(source, { defaultTitle: 'FIXME' });
+ const makeTitle = (userTitle?: string) => {
+ return userTitle || 'FIXME';
+ };
+ const csf = loadCsf(source, { makeTitle });
try {
csf.parse();
diff --git a/lib/components/package.json b/lib/components/package.json
index 826b30b69ee4..9fbeddc3bc1f 100644
--- a/lib/components/package.json
+++ b/lib/components/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/components",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"description": "Core Storybook Components",
"keywords": [
"storybook"
@@ -37,20 +37,28 @@
"*.d.ts"
],
"scripts": {
+ "check": "tsc --noEmit",
"prepare": "ts-node ../../scripts/prebundle.ts"
},
"dependencies": {
- "@storybook/client-logger": "6.5.0-beta.1",
+ "@storybook/client-logger": "6.5.0-rc.1",
"@storybook/csf": "0.0.2--canary.4566f4d.1",
- "@storybook/theming": "6.5.0-beta.1",
+ "@storybook/theming": "6.5.0-rc.1",
"core-js": "^3.8.2",
- "regenerator-runtime": "^0.13.7"
+ "memoizerific": "^1.11.3",
+ "qs": "^6.10.0",
+ "regenerator-runtime": "^0.13.7",
+ "util-deprecate": "^1.0.2"
},
"devDependencies": {
"@popperjs/core": "^2.6.0",
+ "@testing-library/jest-dom": "^5.16.4",
"@types/color-convert": "^2.0.0",
+ "@types/lodash": "^4.14.182",
"@types/overlayscrollbars": "^1.12.0",
+ "@types/qs": "^6.9.7",
"@types/react-syntax-highlighter": "11.0.5",
+ "@types/util-deprecate": "^1.0.0",
"color-convert": "^2.0.1",
"css": "^3.0.0",
"fast-deep-equal": "^3.1.3",
@@ -58,19 +66,16 @@
"jest": "^26.6.3",
"lodash": "^4.17.21",
"markdown-to-jsx": "^7.1.3",
- "memoizerific": "^1.11.3",
"overlayscrollbars": "^1.13.1",
"polished": "^4.2.2",
"prettier": ">=2.2.1 <=2.3.0",
"prop-types": "^15.7.2",
- "qs": "^6.10.0",
"react-colorful": "^5.1.2",
"react-popper-tooltip": "^3.1.1",
"react-syntax-highlighter": "^15.4.5",
"react-textarea-autosize": "^8.3.0",
"ts-dedent": "^2.0.0",
- "ts-node": "^10.4.0",
- "util-deprecate": "^1.0.2"
+ "ts-node": "^10.4.0"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -80,6 +85,6 @@
"access": "public"
},
"bundlerEntrypoint": "./src/index.ts",
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/components/src/ScrollArea/ScrollArea.tsx b/lib/components/src/ScrollArea/ScrollArea.tsx
index 6c329b98eeb7..22df6d6b075a 100644
--- a/lib/components/src/ScrollArea/ScrollArea.tsx
+++ b/lib/components/src/ScrollArea/ScrollArea.tsx
@@ -12,6 +12,7 @@ const Scroller: FunctionComponent = ({ horizontal, vertical, ..
);
export interface ScrollAreaProps {
+ children?: React.ReactNode;
horizontal?: boolean;
vertical?: boolean;
className?: string;
diff --git a/lib/components/src/blocks/ArgsTable/ArgsTable.tsx b/lib/components/src/blocks/ArgsTable/ArgsTable.tsx
index 58fc17afeb3e..dd7bff89c924 100644
--- a/lib/components/src/blocks/ArgsTable/ArgsTable.tsx
+++ b/lib/components/src/blocks/ArgsTable/ArgsTable.tsx
@@ -1,8 +1,9 @@
import React, { FC } from 'react';
import pickBy from 'lodash/pickBy';
-import { styled, ignoreSsrWarning } from '@storybook/theming';
+import { styled } from '@storybook/theming';
import { opacify, transparentize, darken, lighten } from 'polished';
import { includeConditionalArg } from '@storybook/csf';
+import { once } from '@storybook/client-logger';
import { Icons } from '../../icon/icon';
import { ArgRow } from './ArgRow';
import { SectionRow } from './SectionRow';
@@ -110,20 +111,20 @@ export const TableWrapper = styled.table<{
marginLeft: inAddonPanel ? 0 : 1,
marginRight: inAddonPanel ? 0 : 1,
- [`tr:first-child${ignoreSsrWarning}`]: {
- [`td:first-child${ignoreSsrWarning}, th:first-child${ignoreSsrWarning}`]: {
+ [`tr:first-child`]: {
+ [`td:first-child, th:first-child`]: {
borderTopLeftRadius: inAddonPanel ? 0 : theme.appBorderRadius,
},
- [`td:last-child${ignoreSsrWarning}, th:last-child${ignoreSsrWarning}`]: {
+ [`td:last-child, th:last-child`]: {
borderTopRightRadius: inAddonPanel ? 0 : theme.appBorderRadius,
},
},
- [`tr:last-child${ignoreSsrWarning}`]: {
- [`td:first-child${ignoreSsrWarning}, th:first-child${ignoreSsrWarning}`]: {
+ [`tr:last-child`]: {
+ [`td:first-child, th:first-child`]: {
borderBottomLeftRadius: inAddonPanel ? 0 : theme.appBorderRadius,
},
- [`td:last-child${ignoreSsrWarning}, th:last-child${ignoreSsrWarning}`]: {
+ [`td:last-child, th:last-child`]: {
borderBottomRightRadius: inAddonPanel ? 0 : theme.appBorderRadius,
},
},
@@ -171,7 +172,7 @@ export const TableWrapper = styled.table<{
: lighten(0.05, theme.background.content),
}
: {
- [`&:not(:first-child${ignoreSsrWarning})`]: {
+ [`&:not(:first-child)`]: {
borderTopWidth: 1,
borderTopStyle: 'solid',
borderTopColor:
@@ -260,6 +261,7 @@ const sortFns: Record = {
};
export interface ArgsTableOptionProps {
+ children?: React.ReactNode;
updateArgs?: (args: Args) => void;
resetArgs?: (argNames?: string[]) => void;
compact?: boolean;
@@ -372,6 +374,22 @@ const groupRows = (rows: ArgType, sort: SortType) => {
return sorted;
};
+/**
+ * Wrap CSF's `includeConditionalArg` in a try catch so that invalid
+ * conditionals don't break the entire UI. We can safely swallow the
+ * error because `includeConditionalArg` is also called in the preview
+ * in `prepareStory`, and that exception will be bubbled up into the
+ * UI in a red screen. Nevertheless, we log the error here just in case.
+ */
+const safeIncludeConditionalArg = (row: ArgType, args: Args, globals: Globals) => {
+ try {
+ return includeConditionalArg(row, args, globals);
+ } catch (err) {
+ once.warn(err.message);
+ return false;
+ }
+};
+
/**
* Display the props for a component as a props table. Each row is a collection of
* ArgDefs, usually derived from docgen info for the component.
@@ -402,7 +420,7 @@ export const ArgsTable: FC = (props) => {
const groups = groupRows(
pickBy(
rows,
- (row) => !row?.table?.disable && includeConditionalArg(row, args || {}, globals || {})
+ (row) => !row?.table?.disable && safeIncludeConditionalArg(row, args || {}, globals || {})
),
sort
);
diff --git a/lib/components/src/blocks/ArgsTable/SectionRow.tsx b/lib/components/src/blocks/ArgsTable/SectionRow.tsx
index d92ab2985396..362449e71975 100644
--- a/lib/components/src/blocks/ArgsTable/SectionRow.tsx
+++ b/lib/components/src/blocks/ArgsTable/SectionRow.tsx
@@ -6,6 +6,7 @@ import { Icons } from '../../icon/icon';
type Level = 'section' | 'subsection';
export interface SectionRowProps {
+ children?: React.ReactNode;
label: string;
level: Level;
initialExpanded?: boolean;
diff --git a/lib/components/src/blocks/ArgsTable/TabbedArgsTable.tsx b/lib/components/src/blocks/ArgsTable/TabbedArgsTable.tsx
index e49baf7deb2f..58ff30b4a5e5 100644
--- a/lib/components/src/blocks/ArgsTable/TabbedArgsTable.tsx
+++ b/lib/components/src/blocks/ArgsTable/TabbedArgsTable.tsx
@@ -3,6 +3,7 @@ import { ArgsTable, ArgsTableProps, SortType } from './ArgsTable';
import { TabsState } from '../../tabs/tabs';
export interface TabbedArgsTableProps {
+ children?: React.ReactNode;
tabs: Record;
sort?: SortType;
}
@@ -19,12 +20,17 @@ export const TabbedArgsTable: FC = ({ tabs, ...props }) =>
{entries.map((entry) => {
const [label, table] = entry;
const id = `prop_table_div_${label}`;
+ const Component = 'div' as unknown as React.ElementType<
+ Omit & {
+ children: ({ active }: { active: boolean }) => React.ReactNode;
+ }
+ >;
return (
-
- {({ active }: { active: boolean }) =>
+
+ {({ active }) =>
active ?
+
);
})}
diff --git a/lib/components/src/blocks/ColorPalette.tsx b/lib/components/src/blocks/ColorPalette.tsx
index f35965c7c89b..51a9f0b67527 100644
--- a/lib/components/src/blocks/ColorPalette.tsx
+++ b/lib/components/src/blocks/ColorPalette.tsx
@@ -191,11 +191,15 @@ export const ColorItem: FunctionComponent = ({ title, subtitle,
);
};
+interface ColorPaletteProps {
+ children?: React.ReactNode;
+}
+
/**
* Styleguide documentation for colors, including names, captions, and color swatches,
* all specified as `ColorItem` children of this wrapper component.
*/
-export const ColorPalette: FunctionComponent = ({ children, ...props }) => (
+export const ColorPalette: FunctionComponent = ({ children, ...props }) => (
diff --git a/lib/components/src/blocks/DocsPage.tsx b/lib/components/src/blocks/DocsPage.tsx
index 24bf4503de20..d94a235ca9ed 100644
--- a/lib/components/src/blocks/DocsPage.tsx
+++ b/lib/components/src/blocks/DocsPage.tsx
@@ -56,7 +56,11 @@ export const DocsWrapper = styled.div<{}>(({ theme }) => ({
[`@media (min-width: ${breakpoint}px)`]: {},
}));
-export const DocsPageWrapper: FC = ({ children }) => (
+interface DocsPageWrapperProps {
+ children?: React.ReactNode;
+}
+
+export const DocsPageWrapper: FC = ({ children }) => (
{children}
diff --git a/lib/components/src/blocks/DocsPageExampleCaption.md b/lib/components/src/blocks/DocsPageExampleCaption.md
index 3425174f37ff..8cff56f3f4d3 100644
--- a/lib/components/src/blocks/DocsPageExampleCaption.md
+++ b/lib/components/src/blocks/DocsPageExampleCaption.md
@@ -76,12 +76,12 @@ A basic table:
Let's throw in a crazy table, because why not?
-| | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [HTML](app/html) | [Svelte](app/svelte) | [Ember](app/ember) | [Preact](app/preact) |
-| --------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------: | :------------------: | :----------------: | :------------------: |
-| [a11y](addons/a11y) | + | | + | + | + | | + | + |
-| [actions](addons/actions) | + | + | + | + | + | + | + | + |
-| [backgrounds](addons/backgrounds) | + | \* | + | + | + | + | + | + |
-| [centered](addons/centered) | + | | + | + | + | + | + | + |
+| | [React](../../../../app/react) | [React Native](https://github.com/storybookjs/react-native) | [Vue](../../../../app/vue) | [Angular](../../../../app/angular) | [HTML](../../../../app/html) | [Svelte](../../../../app/svelte) | [Ember](../../../../app/ember) | [Preact](../../../../app/preact) |
+|-----------------------------------------------|--------------------------------|----------------------------------|----------------------------|------------------------------------|------------------------------|----------------------------------|--------------------------------|----------------------------------|
+| [a11y](../../../../addons/a11y/) | + | | + | + | + | | + | + |
+| [actions](../../../../addons/actions) | + | + | + | + | + | + | + | + |
+| [backgrounds](../../../../addons/backgrounds) | + | \* | + | + | + | + | + | + |
+| [measure](../../../../addons/measure) | + | | + | + | + | + | + | + |
## Code
diff --git a/lib/components/src/blocks/IconGallery.tsx b/lib/components/src/blocks/IconGallery.tsx
index 7424eb235f72..045d5e5f3d02 100644
--- a/lib/components/src/blocks/IconGallery.tsx
+++ b/lib/components/src/blocks/IconGallery.tsx
@@ -45,6 +45,7 @@ const List = styled.div({
interface IconItemProps {
name: string;
+ children?: React.ReactNode;
}
/**
@@ -57,10 +58,14 @@ export const IconItem: FunctionComponent = ({ name, children }) =
);
+interface IconGalleryProps {
+ children?: React.ReactNode;
+}
+
/**
* Show a grid of icons, as specified by `IconItem`.
*/
-export const IconGallery: FunctionComponent = ({ children, ...props }) => (
+export const IconGallery: FunctionComponent = ({ children, ...props }) => (
{children}
diff --git a/lib/components/src/blocks/Preview.tsx b/lib/components/src/blocks/Preview.tsx
index 6750b49e0bda..77104f70189c 100644
--- a/lib/components/src/blocks/Preview.tsx
+++ b/lib/components/src/blocks/Preview.tsx
@@ -28,6 +28,7 @@ export interface PreviewProps {
withToolbar?: boolean;
className?: string;
additionalActions?: ActionItem[];
+ children?: ReactNode;
}
type layout = 'padded' | 'fullscreen' | 'centered';
diff --git a/lib/components/src/blocks/Source.tsx b/lib/components/src/blocks/Source.tsx
index c71429c020e5..6a46c2d3f791 100644
--- a/lib/components/src/blocks/Source.tsx
+++ b/lib/components/src/blocks/Source.tsx
@@ -1,10 +1,10 @@
import React, { ComponentProps, FunctionComponent } from 'react';
-import { styled, ThemeProvider, convert, themes, ignoreSsrWarning } from '@storybook/theming';
+import { styled, ThemeProvider, convert, themes } from '@storybook/theming';
import { EmptyBlock } from './EmptyBlock';
import { SyntaxHighlighter } from '../syntaxhighlighter/lazy-syntaxhighlighter';
-const StyledSyntaxHighlighter = styled(SyntaxHighlighter)<{}>(({ theme }) => ({
+const StyledSyntaxHighlighter = styled(SyntaxHighlighter)(({ theme }) => ({
// DocBlocks-specific styling and overrides
fontSize: `${theme.typography.size.s2 - 1}px`,
lineHeight: '19px',
@@ -52,7 +52,7 @@ const SourceSkeletonPlaceholder = styled.div<{}>(({ theme }) => ({
marginTop: 1,
width: '60%',
- [`&:first-child${ignoreSsrWarning}`]: {
+ [`&:first-child`]: {
margin: 0,
},
}));
diff --git a/lib/components/src/blocks/Story.tsx b/lib/components/src/blocks/Story.tsx
index bc466a54dd23..9fab0c9d81df 100644
--- a/lib/components/src/blocks/Story.tsx
+++ b/lib/components/src/blocks/Story.tsx
@@ -76,12 +76,9 @@ const IFrameStory: FunctionComponent = ({ id, title, height =
* A story element, either rendered inline or in an iframe,
* with configurable height.
*/
-const Story: FunctionComponent = ({
- children,
- error,
- inline,
- ...props
-}) => {
+const Story: FunctionComponent<
+ StoryProps & { inline?: boolean; error?: StoryError; children?: React.ReactNode }
+> = ({ children, error, inline, ...props }) => {
const { id, title, height } = props;
if (error) {
diff --git a/lib/components/src/controls/Color.tsx b/lib/components/src/controls/Color.tsx
index e6168506e8f0..09a868cc271e 100644
--- a/lib/components/src/controls/Color.tsx
+++ b/lib/components/src/controls/Color.tsx
@@ -285,7 +285,7 @@ const usePresets = (
return initialPresets.concat(selectedColors).filter(Boolean).slice(-27);
}, [presetColors, selectedColors]);
- const addPreset = useCallback(
+ const addPreset: (color: ParsedColor) => void = useCallback(
(color) => {
if (!color?.valid) return;
if (presets.some((preset) => id(preset[colorSpace]) === id(color[colorSpace]))) return;
@@ -307,9 +307,10 @@ export const ColorControl: FC = ({
presetColors,
startOpen,
}) => {
+ const throttledOnChange = useCallback(throttle(onChange, 200), [onChange]);
const { value, realValue, updateValue, color, colorSpace, cycleColorSpace } = useColorInput(
initialValue,
- throttle(onChange, 200)
+ throttledOnChange
);
const { presets, addPreset } = usePresets(presetColors, color, colorSpace);
const Picker = ColorPicker[colorSpace];
diff --git a/lib/components/src/controls/Object.tsx b/lib/components/src/controls/Object.tsx
index b8c18b0c0155..225b1962b09b 100644
--- a/lib/components/src/controls/Object.tsx
+++ b/lib/components/src/controls/Object.tsx
@@ -250,7 +250,7 @@ export const ObjectControl: FC = ({ name, value, onChange }) => {
const [showRaw, setShowRaw] = useState(!hasData);
const [parseError, setParseError] = useState(null);
- const updateRaw = useCallback(
+ const updateRaw: (raw: string) => void = useCallback(
(raw) => {
try {
if (raw) onChange(JSON.parse(raw));
diff --git a/lib/components/src/controls/Text.tsx b/lib/components/src/controls/Text.tsx
index bbf18c74b015..dc76b95b05ce 100644
--- a/lib/components/src/controls/Text.tsx
+++ b/lib/components/src/controls/Text.tsx
@@ -11,7 +11,22 @@ const Wrapper = styled.label({
display: 'flex',
});
-export const TextControl: FC = ({ name, value, onChange, onFocus, onBlur }) => {
+const MaxLength = styled.div<{ isMaxed: boolean }>(({ isMaxed }) => ({
+ marginLeft: '0.75rem',
+ paddingTop: '0.35rem',
+ color: isMaxed ? 'red' : undefined,
+}));
+
+const format = (value?: TextValue) => value || '';
+
+export const TextControl: FC = ({
+ name,
+ value,
+ onChange,
+ onFocus,
+ onBlur,
+ maxLength,
+}) => {
const handleChange = (event: ChangeEvent) => {
onChange(event.target.value);
};
@@ -34,6 +49,7 @@ export const TextControl: FC = ({ name, value, onChange, onFocus, onB
= ({ name, value, onChange, onFocus, onB
valid={isValid ? null : 'error'}
{...{ name, value: isValid ? value : '', onFocus, onBlur }}
/>
+ {maxLength && (
+
+ {value?.length ?? 0} / {maxLength}
+
+ )}
);
};
diff --git a/lib/components/src/controls/options/Options.tsx b/lib/components/src/controls/options/Options.tsx
index 26a86b4b09da..c085a5d1fdd0 100644
--- a/lib/components/src/controls/options/Options.tsx
+++ b/lib/components/src/controls/options/Options.tsx
@@ -28,14 +28,14 @@ const normalizeOptions = (options: Options, labels?: Record) => {
return options;
};
-const Controls: Record = {
+const Controls = {
check: CheckboxControl,
'inline-check': CheckboxControl,
radio: RadioControl,
'inline-radio': RadioControl,
select: SelectControl,
'multi-select': SelectControl,
-};
+} as const;
export type OptionsProps = ControlProps & OptionsConfig;
export const OptionsControl: FC = (props) => {
diff --git a/lib/components/src/controls/types.ts b/lib/components/src/controls/types.ts
index 668c366f8eef..aee13cc9f191 100644
--- a/lib/components/src/controls/types.ts
+++ b/lib/components/src/controls/types.ts
@@ -61,7 +61,9 @@ export interface NormalizedOptionsConfig {
}
export type TextValue = string;
-export interface TextConfig {}
+export interface TextConfig {
+ maxLength?: number;
+}
export type ControlType =
| 'array'
diff --git a/lib/components/src/form/field/field.tsx b/lib/components/src/form/field/field.tsx
index 10cf3507a93a..4aa7e0581ae4 100644
--- a/lib/components/src/form/field/field.tsx
+++ b/lib/components/src/form/field/field.tsx
@@ -23,6 +23,7 @@ const Label = styled.span<{}>(({ theme }) => ({
}));
export interface FieldProps {
+ children?: ReactNode;
label?: ReactNode;
}
diff --git a/lib/components/src/placeholder/placeholder.tsx b/lib/components/src/placeholder/placeholder.tsx
index 31e48adebb2b..fb9e0a1e142d 100644
--- a/lib/components/src/placeholder/placeholder.tsx
+++ b/lib/components/src/placeholder/placeholder.tsx
@@ -14,7 +14,11 @@ const Message = styled.div(({ theme }) => ({
fontSize: theme.typography.size.s2 - 1,
}));
-export const Placeholder: FunctionComponent = ({ children, ...props }) => {
+export interface PlaceholderProps {
+ children?: React.ReactNode;
+}
+
+export const Placeholder: FunctionComponent = ({ children, ...props }) => {
const [title, desc] = Children.toArray(children);
return (
diff --git a/lib/components/src/spaced/Spaced.tsx b/lib/components/src/spaced/Spaced.tsx
index 8ce2e6274b61..02c869827558 100644
--- a/lib/components/src/spaced/Spaced.tsx
+++ b/lib/components/src/spaced/Spaced.tsx
@@ -1,5 +1,5 @@
import React, { FunctionComponent } from 'react';
-import { styled, ignoreSsrWarning } from '@storybook/theming';
+import { styled } from '@storybook/theming';
const toNumber = (input: any) => (typeof input === 'number' ? input : Number(input));
@@ -19,7 +19,7 @@ const Container = styled.div(
marginLeft: col * theme.layoutMargin,
verticalAlign: 'inherit',
},
- [`& > *:first-child${ignoreSsrWarning}`]: {
+ [`& > *:first-child`]: {
marginLeft: 0,
},
}
@@ -27,7 +27,7 @@ const Container = styled.div(
'& > *': {
marginTop: row * theme.layoutMargin,
},
- [`& > *:first-child${ignoreSsrWarning}`]: {
+ [`& > *:first-child`]: {
marginTop: 0,
},
},
@@ -53,6 +53,7 @@ const Container = styled.div(
);
export interface SpacedProps {
+ children?: React.ReactNode;
col?: number;
row?: number;
outer?: number | boolean;
diff --git a/lib/components/src/syntaxhighlighter/syntaxhighlighter-types.ts b/lib/components/src/syntaxhighlighter/syntaxhighlighter-types.ts
index dfd948afb183..7548a537a72e 100644
--- a/lib/components/src/syntaxhighlighter/syntaxhighlighter-types.ts
+++ b/lib/components/src/syntaxhighlighter/syntaxhighlighter-types.ts
@@ -25,15 +25,16 @@ export type SyntaxHighlighterFormatTypes = boolean | 'dedent' | BuiltInParserNam
// which will not match one we've localized type-definitions
type lineTagPropsFunction = (lineNumber: number) => React.HTMLProps;
export interface SyntaxHighlighterBaseProps {
- language?: string;
- style?: any;
+ children?: React.ReactNode;
+ codeTagProps?: React.HTMLProps;
customStyle?: any;
+ language?: string;
+ lineNumberStyle?: any;
lineProps?: lineTagPropsFunction | React.HTMLProps;
- codeTagProps?: React.HTMLProps;
- useInlineStyles?: boolean;
showLineNumbers?: boolean;
startingLineNumber?: number;
- lineNumberStyle?: any;
+ style?: any;
+ useInlineStyles?: boolean;
}
export type SyntaxHighlighterProps = SyntaxHighlighterBaseProps & SyntaxHighlighterCustomProps;
diff --git a/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx b/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx
index 92bd3bf6517b..ba338868ca43 100644
--- a/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx
+++ b/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx
@@ -102,11 +102,6 @@ const Scroller = styled(({ children, className }) => (
{
position: 'relative',
},
- ({ theme }) => ({
- '& code': {
- paddingRight: theme.layoutMargin,
- },
- }),
({ theme }) => themedSyntax(theme)
);
@@ -121,11 +116,16 @@ const Pre = styled.pre(({ theme, padded }) => ({
padding: padded ? theme.layoutMargin : 0,
}));
-const Code = styled.code({
+/*
+We can't use `code` since PrismJS races for it.
+See https://github.com/storybookjs/storybook/issues/18090
+ */
+const Code = styled.div(({ theme }) => ({
flex: 1,
- paddingRight: 0,
+ paddingLeft: 2, // TODO: To match theming/global.ts for now
+ paddingRight: theme.layoutMargin,
opacity: 1,
-});
+}));
export interface SyntaxHighlighterState {
copied: boolean;
diff --git a/lib/components/src/tabs/tabs.tsx b/lib/components/src/tabs/tabs.tsx
index 8152a8837425..24be8ad2943d 100644
--- a/lib/components/src/tabs/tabs.tsx
+++ b/lib/components/src/tabs/tabs.tsx
@@ -15,9 +15,6 @@ import { Placeholder } from '../placeholder/placeholder';
import { FlexBar } from '../bar/bar';
import { TabButton } from '../bar/button';
-const ignoreSsrWarning =
- '/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */';
-
export interface WrapperProps {
bordered?: boolean;
absolute?: boolean;
@@ -87,7 +84,7 @@ const Content = styled.div(
bottom: 0 + (bordered ? 1 : 0),
top: 40 + (bordered ? 1 : 0),
overflow: 'auto',
- [`& > *:first-child${ignoreSsrWarning}`]: {
+ [`& > *:first-child`]: {
position: 'absolute',
left: 0 + (bordered ? 1 : 0),
right: 0 + (bordered ? 1 : 0),
@@ -142,6 +139,7 @@ const childrenToList = (children: any, selected: string) =>
);
export interface TabsProps {
+ children?: FuncChildren[] | ReactNode;
id?: string;
tools?: ReactNode;
selected?: string;
@@ -205,10 +203,10 @@ Tabs.displayName = 'Tabs';
bordered: false,
};
-type FuncChildren = () => void;
+type FuncChildren = ({ active }: { active: boolean }) => JSX.Element;
export interface TabsStateProps {
- children: (ReactNode | FuncChildren)[];
+ children: FuncChildren[] | ReactNode;
initial: string;
absolute: boolean;
bordered: boolean;
diff --git a/lib/components/src/tooltip/ListItem.tsx b/lib/components/src/tooltip/ListItem.tsx
index c732e4663664..eb7e25a2f13f 100644
--- a/lib/components/src/tooltip/ListItem.tsx
+++ b/lib/components/src/tooltip/ListItem.tsx
@@ -4,6 +4,7 @@ import memoize from 'memoizerific';
import { transparentize } from 'polished';
export interface TitleProps {
+ children?: ReactNode;
active?: boolean;
loading?: boolean;
disabled?: boolean;
diff --git a/lib/components/src/tooltip/Tooltip.tsx b/lib/components/src/tooltip/Tooltip.tsx
index 1d258b4d4e47..eeb094eb4137 100644
--- a/lib/components/src/tooltip/Tooltip.tsx
+++ b/lib/components/src/tooltip/Tooltip.tsx
@@ -116,6 +116,7 @@ const Wrapper = styled.div(
);
export interface TooltipProps {
+ children?: React.ReactNode;
arrowRef?: any;
tooltipRef?: any;
hasChrome?: boolean;
diff --git a/lib/components/src/tooltip/WithTooltip.tsx b/lib/components/src/tooltip/WithTooltip.tsx
index 55268dfeb189..71780fce842a 100644
--- a/lib/components/src/tooltip/WithTooltip.tsx
+++ b/lib/components/src/tooltip/WithTooltip.tsx
@@ -125,7 +125,7 @@ const WithToolTipState: FunctionComponent<
}
> = ({ startOpen, onVisibilityChange: onChange, ...rest }) => {
const [tooltipShown, setTooltipShown] = useState(startOpen || false);
- const onVisibilityChange = useCallback(
+ const onVisibilityChange: (visibility: boolean) => void = useCallback(
(visibility) => {
if (onChange && onChange(visibility) === false) return;
setTooltipShown(visibility);
diff --git a/lib/core-client/package.json b/lib/core-client/package.json
index e311b9df9878..42a78a1754c4 100644
--- a/lib/core-client/package.json
+++ b/lib/core-client/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/core-client",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
@@ -40,16 +40,16 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "6.5.0-beta.1",
- "@storybook/channel-postmessage": "6.5.0-beta.1",
- "@storybook/channel-websocket": "6.5.0-beta.1",
- "@storybook/client-api": "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-rc.1",
+ "@storybook/channel-postmessage": "6.5.0-rc.1",
+ "@storybook/channel-websocket": "6.5.0-rc.1",
+ "@storybook/client-api": "6.5.0-rc.1",
+ "@storybook/client-logger": "6.5.0-rc.1",
+ "@storybook/core-events": "6.5.0-rc.1",
"@storybook/csf": "0.0.2--canary.4566f4d.1",
- "@storybook/preview-web": "6.5.0-beta.1",
- "@storybook/store": "6.5.0-beta.1",
- "@storybook/ui": "6.5.0-beta.1",
+ "@storybook/preview-web": "6.5.0-rc.1",
+ "@storybook/store": "6.5.0-rc.1",
+ "@storybook/ui": "6.5.0-rc.1",
"airbnb-js-shims": "^2.2.1",
"ansi-to-html": "^0.6.11",
"core-js": "^3.8.2",
@@ -74,6 +74,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/core-client/src/preview/start.test.ts b/lib/core-client/src/preview/start.test.ts
index 7b6d60121091..442409921d37 100644
--- a/lib/core-client/src/preview/start.test.ts
+++ b/lib/core-client/src/preview/start.test.ts
@@ -40,7 +40,8 @@ jest.mock('@storybook/store', () => {
const actualStore = jest.requireActual('@storybook/store');
return {
...actualStore,
- autoTitle: () => 'auto-title',
+ userOrAutoTitle: (importPath: string, specifier: any, userTitle?: string) =>
+ userTitle || 'auto-title',
};
});
diff --git a/lib/core-client/src/typings.d.ts b/lib/core-client/src/typings.d.ts
index 0a7386c391b9..1ef570433a55 100644
--- a/lib/core-client/src/typings.d.ts
+++ b/lib/core-client/src/typings.d.ts
@@ -6,6 +6,6 @@ declare module 'pnp-webpack-plugin';
declare module '@storybook/ui/paths';
declare module 'better-opn';
declare module 'open';
-declare module 'x-default-browser';
+declare module '@aw-web-design/x-default-browser';
declare module '@storybook/ui';
diff --git a/lib/core-common/package.json b/lib/core-common/package.json
index c8e4369751ca..b18b7c14eef4 100644
--- a/lib/core-common/package.json
+++ b/lib/core-common/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/core-common",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
@@ -62,7 +62,7 @@
"@babel/preset-react": "^7.12.10",
"@babel/preset-typescript": "^7.12.7",
"@babel/register": "^7.12.1",
- "@storybook/node-logger": "6.5.0-beta.1",
+ "@storybook/node-logger": "6.5.0-rc.1",
"@storybook/semver": "^7.3.2",
"@types/node": "^14.0.10 || ^16.0.0",
"@types/pretty-hrtime": "^1.0.0",
@@ -72,7 +72,7 @@
"chalk": "^4.1.0",
"core-js": "^3.8.2",
"express": "^4.17.1",
- "file-system-cache": "^1.0.5",
+ "file-system-cache": "^2.0.0",
"find-up": "^5.0.0",
"fork-ts-checker-webpack-plugin": "^6.0.4",
"fs-extra": "^9.0.1",
@@ -86,7 +86,7 @@
"pretty-hrtime": "^1.0.3",
"resolve-from": "^5.0.0",
"slash": "^3.0.0",
- "telejson": "^5.3.3",
+ "telejson": "^6.0.8",
"ts-dedent": "^2.0.0",
"util-deprecate": "^1.0.2",
"webpack": "4"
@@ -111,6 +111,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/core-common/src/index.ts b/lib/core-common/src/index.ts
index ccdb8fbae13e..0414b1dd2d32 100644
--- a/lib/core-common/src/index.ts
+++ b/lib/core-common/src/index.ts
@@ -11,6 +11,9 @@ export * from './utils/interpret-require';
export * from './utils/load-custom-babel-config';
export * from './utils/load-custom-presets';
export * from './utils/load-custom-webpack-config';
+export * from './utils/load-main-config';
+export * from './utils/get-storybook-configuration';
+export * from './utils/get-storybook-info';
export * from './utils/load-manager-or-addons-file';
export * from './utils/load-preview-or-config-file';
export * from './utils/log-config';
diff --git a/lib/core-common/src/presets.ts b/lib/core-common/src/presets.ts
index 24093df15337..886108625bd5 100644
--- a/lib/core-common/src/presets.ts
+++ b/lib/core-common/src/presets.ts
@@ -97,7 +97,7 @@ export const resolveAddonName = (
const managerFile = safeResolve(`${path}/manager`);
const registerFile = safeResolve(`${path}/register`) || safeResolve(`${path}/register-panel`);
const previewFile = safeResolve(`${path}/preview`);
- const presetFile = safeResolve(`${path}/preset`);
+ const presetFile = r(`${path}/preset`);
if (!(managerFile || previewFile) && presetFile) {
return {
diff --git a/lib/core-common/src/types.ts b/lib/core-common/src/types.ts
index 07c666dea01a..2b8cd029f1b0 100644
--- a/lib/core-common/src/types.ts
+++ b/lib/core-common/src/types.ts
@@ -5,7 +5,7 @@ import type { Configuration, Stats } from 'webpack';
import type { TransformOptions } from '@babel/core';
import { Router } from 'express';
import { Server } from 'http';
-import { FileSystemCache } from './utils/file-cache';
+import type { FileSystemCache } from './utils/file-cache';
/**
* ⚠️ This file contains internal WIP types they MUST NOT be exported outside this package for now!
@@ -50,6 +50,20 @@ export interface CoreConfig {
builder: BuilderConfig;
disableWebpackDefaults?: boolean;
channelOptions?: Partial;
+ /**
+ * Disables the generation of project.json, a file containing Storybook metadata
+ */
+ disableProjectJson?: boolean;
+ /**
+ * Disables Storybook telemetry
+ * @see https://storybook.js.org/telemetry
+ */
+ disableTelemetry?: boolean;
+ /**
+ * Enable crash reports to be sent to Storybook telemetry
+ * @see https://storybook.js.org/telemetry
+ */
+ enableCrashReports?: boolean;
/**
* enable CORS headings to run document in a "secure context"
* see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer#security_requirements
@@ -141,6 +155,11 @@ export interface PackageJson {
version: string;
dependencies?: Record;
devDependencies?: Record;
+ peerDependencies?: Record;
+ scripts?: Record;
+ eslintConfig?: Record;
+ type?: 'module';
+ [key: string]: any;
}
// TODO: This could be exported to the outside world and used in `options.ts` file of each `@storybook/APP`
@@ -165,6 +184,8 @@ export interface CLIOptions {
ignorePreview?: boolean;
previewUrl?: string;
forceBuildPreview?: boolean;
+ disableTelemetry?: boolean;
+ enableCrashReports?: boolean;
host?: string;
/**
* @deprecated Use 'staticDirs' Storybook Configuration option instead
diff --git a/lib/core-common/src/utils/file-cache.ts b/lib/core-common/src/utils/file-cache.ts
index 2f810b927a34..cc62de6dac47 100644
--- a/lib/core-common/src/utils/file-cache.ts
+++ b/lib/core-common/src/utils/file-cache.ts
@@ -1,65 +1,8 @@
-// @ts-ignore - this package has no typings, so we wrap it and add typings that way, because we expose it
import Cache from 'file-system-cache';
-export interface Options {
- basePath?: string;
- ns?: string | string[];
- extension?: string;
-}
-
-export class FileSystemCache {
- constructor(options: Options) {
- this.internal = Cache(options) as any as FileSystemCache;
- }
-
- private internal: FileSystemCache;
-
- path(key: string): string {
- return this.internal.path(key);
- }
-
- fileExists(key: string): Promise {
- return this.internal.fileExists(key);
- }
-
- ensureBasePath(): Promise {
- return this.internal.ensureBasePath();
- }
-
- get(key: string, defaultValue?: any): Promise {
- return this.internal.get(key, defaultValue);
- }
-
- getSync(key: string, defaultValue?: any): any | typeof defaultValue {
- return this.internal.getSync(key, defaultValue);
- }
-
- set(key: string, value: any): Promise<{ path: string }> {
- return this.internal.set(key, value);
- }
-
- setSync(key: string, value: any): this {
- this.internal.setSync(key, value);
- return this;
- }
-
- remove(key: string): Promise {
- return this.internal.remove(key);
- }
-
- clear(): Promise {
- return this.internal.clear();
- }
-
- save(): Promise<{ paths: string[] }> {
- return this.internal.save();
- }
-
- load(): Promise<{ files: Array<{ path: string; value: any }> }> {
- return this.internal.load();
- }
-}
+export type Options = Parameters['0'];
+export type FileSystemCache = ReturnType;
export function createFileSystemCache(options: Options): FileSystemCache {
- return new FileSystemCache(options);
+ return Cache(options);
}
diff --git a/lib/cli/src/automigrate/helpers/getStorybookConfiguration.test.ts b/lib/core-common/src/utils/get-storybook-configuration.test.ts
similarity index 92%
rename from lib/cli/src/automigrate/helpers/getStorybookConfiguration.test.ts
rename to lib/core-common/src/utils/get-storybook-configuration.test.ts
index 47c57eeba423..e6a460acdf90 100644
--- a/lib/cli/src/automigrate/helpers/getStorybookConfiguration.test.ts
+++ b/lib/core-common/src/utils/get-storybook-configuration.test.ts
@@ -1,4 +1,4 @@
-import { getStorybookConfiguration } from './getStorybookConfiguration';
+import { getStorybookConfiguration } from './get-storybook-configuration';
describe('getStorybookConfiguration', () => {
it('handles short names', () => {
diff --git a/lib/cli/src/automigrate/helpers/getStorybookConfiguration.ts b/lib/core-common/src/utils/get-storybook-configuration.ts
similarity index 91%
rename from lib/cli/src/automigrate/helpers/getStorybookConfiguration.ts
rename to lib/core-common/src/utils/get-storybook-configuration.ts
index 98529af472b0..a1dd17c1ffc2 100644
--- a/lib/cli/src/automigrate/helpers/getStorybookConfiguration.ts
+++ b/lib/core-common/src/utils/get-storybook-configuration.ts
@@ -9,6 +9,10 @@ export function getStorybookConfiguration(
shortName: string,
longName: string
) {
+ if (!storybookScript) {
+ return null;
+ }
+
const parts = storybookScript.split(/[\s='"]+/);
let index = parts.indexOf(longName);
if (index === -1) {
diff --git a/lib/cli/src/automigrate/helpers/getStorybookInfo.ts b/lib/core-common/src/utils/get-storybook-info.ts
similarity index 86%
rename from lib/cli/src/automigrate/helpers/getStorybookInfo.ts
rename to lib/core-common/src/utils/get-storybook-info.ts
index ef6b3efd9d08..0729ac2ca9e3 100644
--- a/lib/cli/src/automigrate/helpers/getStorybookInfo.ts
+++ b/lib/core-common/src/utils/get-storybook-info.ts
@@ -1,11 +1,12 @@
import path from 'path';
import fse from 'fs-extra';
-import { PackageJsonWithDepsAndDevDeps } from '../../js-package-manager';
-import { getStorybookConfiguration } from './getStorybookConfiguration';
+import { getStorybookConfiguration } from './get-storybook-configuration';
+import { PackageJson } from '../types';
interface StorybookInfo {
framework: string;
version: string;
+ frameworkPackage: string;
configDir?: string;
mainConfig?: string;
previewConfig?: string;
@@ -32,7 +33,7 @@ const viewLayers: Record = {
const logger = console;
const findDependency = (
- { dependencies, devDependencies, peerDependencies }: PackageJsonWithDepsAndDevDeps,
+ { dependencies, devDependencies, peerDependencies }: PackageJson,
predicate: (entry: [string, string]) => string
) => [
Object.entries(dependencies || {}).find(predicate),
@@ -40,7 +41,7 @@ const findDependency = (
Object.entries(peerDependencies || {}).find(predicate),
];
-const getFrameworkInfo = (packageJson: PackageJsonWithDepsAndDevDeps) => {
+const getFrameworkInfo = (packageJson: PackageJson) => {
// Pull the viewlayer from dependencies in package.json
const [dep, devDep, peerDep] = findDependency(packageJson, ([key]) => viewLayers[key]);
const [pkg, version] = dep || devDep || peerDep || [];
@@ -57,7 +58,7 @@ const getFrameworkInfo = (packageJson: PackageJsonWithDepsAndDevDeps) => {
);
}
- return { framework, version };
+ return { framework, version, frameworkPackage: pkg };
};
const validConfigExtensions = ['ts', 'js', 'tsx', 'jsx', 'mjs', 'cjs'];
@@ -70,7 +71,7 @@ const findConfigFile = (prefix: string, configDir: string) => {
return extension ? `${filePrefix}.${extension}` : null;
};
-const getConfigInfo = (packageJson: PackageJsonWithDepsAndDevDeps) => {
+const getConfigInfo = (packageJson: PackageJson) => {
let configDir = '.storybook';
const storybookScript = packageJson.scripts?.storybook;
if (storybookScript) {
@@ -86,7 +87,7 @@ const getConfigInfo = (packageJson: PackageJsonWithDepsAndDevDeps) => {
};
};
-export const getStorybookInfo = (packageJson: PackageJsonWithDepsAndDevDeps) => {
+export const getStorybookInfo = (packageJson: PackageJson) => {
const frameworkInfo = getFrameworkInfo(packageJson);
const configInfo = getConfigInfo(packageJson);
diff --git a/lib/core-common/src/utils/load-main-config.ts b/lib/core-common/src/utils/load-main-config.ts
new file mode 100644
index 000000000000..67b294e33275
--- /dev/null
+++ b/lib/core-common/src/utils/load-main-config.ts
@@ -0,0 +1,10 @@
+import path from 'path';
+import { serverRequire } from './interpret-require';
+import { validateConfigurationFiles } from './validate-configuration-files';
+import { StorybookConfig } from '../types';
+
+export function loadMainConfig({ configDir }: { configDir: string }): StorybookConfig {
+ validateConfigurationFiles(configDir);
+
+ return serverRequire(path.resolve(configDir, 'main'));
+}
diff --git a/lib/core-common/src/utils/notify-telemetry.ts b/lib/core-common/src/utils/notify-telemetry.ts
new file mode 100644
index 000000000000..53b291b4b6a8
--- /dev/null
+++ b/lib/core-common/src/utils/notify-telemetry.ts
@@ -0,0 +1,31 @@
+import chalk from 'chalk';
+import { cache } from './cache';
+
+const TELEMETRY_KEY_NOTIFY_DATE = 'telemetry-notification-date';
+
+const logger = console;
+
+export const notifyTelemetry = async () => {
+ const telemetryNotifyDate = await cache.get(TELEMETRY_KEY_NOTIFY_DATE, null);
+ // The end-user has already been notified about our telemetry integration. We
+ // don't need to constantly annoy them about it.
+ // We will re-inform users about the telemetry if significant changes are
+ // ever made.
+ if (telemetryNotifyDate) {
+ return;
+ }
+
+ cache.set(TELEMETRY_KEY_NOTIFY_DATE, Date.now().toString());
+
+ logger.log(
+ `${chalk.magenta.bold(
+ 'Attention'
+ )}: Storybook now collects completely anonymous telemetry regarding usage.`
+ );
+ logger.log(`This information is used to shape Storybook's roadmap and prioritize features.`);
+ logger.log(
+ `You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:`
+ );
+ logger.log(chalk.cyan('https://storybook.js.org/telemetry'));
+ logger.log();
+};
diff --git a/lib/core-common/templates/base-preview-head.html b/lib/core-common/templates/base-preview-head.html
index 39baba09b3fb..45c0c3032dac 100644
--- a/lib/core-common/templates/base-preview-head.html
+++ b/lib/core-common/templates/base-preview-head.html
@@ -237,8 +237,8 @@
.sb-argstableBlock td:nth-of-type(3) {
width: 15%;
}
- .sb-argstableBlock th:laste-of-type,
- .sb-argstableBlock td:laste-of-type {
+ .sb-argstableBlock th:last-of-type,
+ .sb-argstableBlock td:last-of-type {
width: 25%;
padding-right: 20px;
}
diff --git a/lib/core-events/package.json b/lib/core-events/package.json
index 1cacfaa590ee..d0d867bb7792 100644
--- a/lib/core-events/package.json
+++ b/lib/core-events/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/core-events",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"description": "Event names used in storybook core",
"keywords": [
"storybook"
@@ -45,6 +45,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/core-server/package.json b/lib/core-server/package.json
index a30cc2a4a390..d38ddac7b6cf 100644
--- a/lib/core-server/package.json
+++ b/lib/core-server/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/core-server",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
@@ -12,7 +12,7 @@
"repository": {
"type": "git",
"url": "https://github.com/storybookjs/storybook.git",
- "directory": "lib/core"
+ "directory": "lib/core-server"
},
"funding": {
"type": "opencollective",
@@ -39,17 +39,19 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
+ "@aw-web-design/x-default-browser": "1.4.88",
"@discoveryjs/json-ext": "^0.5.3",
- "@storybook/builder-webpack4": "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/builder-webpack4": "6.5.0-rc.1",
+ "@storybook/core-client": "6.5.0-rc.1",
+ "@storybook/core-common": "6.5.0-rc.1",
+ "@storybook/core-events": "6.5.0-rc.1",
"@storybook/csf": "0.0.2--canary.4566f4d.1",
- "@storybook/csf-tools": "6.5.0-beta.1",
- "@storybook/manager-webpack4": "6.5.0-beta.1",
- "@storybook/node-logger": "6.5.0-beta.1",
+ "@storybook/csf-tools": "6.5.0-rc.1",
+ "@storybook/manager-webpack4": "6.5.0-rc.1",
+ "@storybook/node-logger": "6.5.0-rc.1",
"@storybook/semver": "^7.3.2",
- "@storybook/store": "6.5.0-beta.1",
+ "@storybook/store": "6.5.0-rc.1",
+ "@storybook/telemetry": "6.5.0-rc.1",
"@types/node": "^14.0.10 || ^16.0.0",
"@types/node-fetch": "^2.5.7",
"@types/pretty-hrtime": "^1.0.0",
@@ -61,13 +63,12 @@
"commander": "^6.2.1",
"compression": "^1.7.4",
"core-js": "^3.8.2",
- "cpy": "^8.1.2",
"detect-port": "^1.3.0",
"express": "^4.17.1",
"fs-extra": "^9.0.1",
"global": "^4.4.0",
"globby": "^11.0.2",
- "ip": "^1.1.5",
+ "ip": "^2.0.0",
"lodash": "^4.17.21",
"node-fetch": "^2.6.7",
"open": "^8.4.0",
@@ -76,16 +77,15 @@
"regenerator-runtime": "^0.13.7",
"serve-favicon": "^2.5.0",
"slash": "^3.0.0",
- "telejson": "^5.3.3",
+ "telejson": "^6.0.8",
"ts-dedent": "^2.0.0",
"util-deprecate": "^1.0.2",
"watchpack": "^2.2.0",
"webpack": "4",
- "ws": "^8.2.3",
- "x-default-browser": "^0.4.0"
+ "ws": "^8.2.3"
},
"devDependencies": {
- "@storybook/builder-webpack5": "6.5.0-beta.1",
+ "@storybook/builder-webpack5": "6.5.0-rc.1",
"@types/compression": "^1.7.0",
"@types/ip": "^1.1.0",
"@types/serve-favicon": "^2.5.2",
@@ -110,6 +110,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix
index 1937cd52a90a..13c335a8dc80 100644
--- a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix
+++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix
@@ -40,7 +40,7 @@ Object {
"include": Array [
"ROOT",
],
- "test": "/\\\\.(mjs|tsx?|jsx?)$/",
+ "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
"use": Array [
Object {
"loader": "NODE_MODULES/babel-loader/lib/index.js",
diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix
index 5327d847d2c6..7e21d5625a97 100644
--- a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix
+++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix
@@ -40,7 +40,7 @@ Object {
"include": Array [
"ROOT",
],
- "test": "/\\\\.(mjs|tsx?|jsx?)$/",
+ "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
"use": Array [
Object {
"loader": "NODE_MODULES/babel-loader/lib/index.js",
diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix
index 45f3199dcaa1..74d84b599459 100644
--- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix
+++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix
@@ -360,7 +360,7 @@ Object {
},
],
],
- "test": "/\\\\.(mjs|jsx?)$/",
+ "test": "/\\\\.(cjs|mjs|jsx?)$/",
},
],
"plugins": Array [
@@ -410,7 +410,7 @@ Object {
},
],
],
- "test": "/\\\\.(mjs|jsx?)$/",
+ "test": "/\\\\.(cjs|mjs|jsx?)$/",
},
],
"plugins": Array [
diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix
index 9eecd1ba125f..6e7e1b6c8ea4 100644
--- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix
+++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix
@@ -378,7 +378,7 @@ Object {
},
],
],
- "test": "/\\\\.(mjs|jsx?)$/",
+ "test": "/\\\\.(cjs|mjs|jsx?)$/",
},
],
"plugins": Array [
@@ -428,7 +428,7 @@ Object {
},
],
],
- "test": "/\\\\.(mjs|jsx?)$/",
+ "test": "/\\\\.(cjs|mjs|jsx?)$/",
},
],
"plugins": Array [
diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix
index 9fcbeaa6c249..e73793bb5a10 100644
--- a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix
+++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix
@@ -41,7 +41,7 @@ Object {
"include": Array [
"ROOT",
],
- "test": "/\\\\.(mjs|tsx?|jsx?)$/",
+ "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
"use": Array [
Object {
"loader": "NODE_MODULES/babel-loader/lib/index.js",
diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix
index 348d29de932a..88df4ac7b910 100644
--- a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix
+++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix
@@ -41,7 +41,7 @@ Object {
"include": Array [
"ROOT",
],
- "test": "/\\\\.(mjs|tsx?|jsx?)$/",
+ "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
"use": Array [
Object {
"loader": "NODE_MODULES/babel-loader/lib/index.js",
diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix
index fef4e5b1e09b..f05e53f9bf47 100644
--- a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix
+++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix
@@ -39,7 +39,7 @@ Object {
"include": Array [
"ROOT",
],
- "test": "/\\\\.(mjs|tsx?|jsx?)$/",
+ "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
"use": Array [
Object {
"loader": "NODE_MODULES/babel-loader/lib/index.js",
diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix
index d1c67aacb001..840cbdd0dc60 100644
--- a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix
+++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix
@@ -38,7 +38,7 @@ Object {
"include": Array [
"ROOT",
],
- "test": "/\\\\.(mjs|tsx?|jsx?)$/",
+ "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
"use": Array [
Object {
"loader": "NODE_MODULES/babel-loader/lib/index.js",
diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix b/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix
index ec8992f03346..01c529220ab8 100644
--- a/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix
+++ b/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix
@@ -42,7 +42,7 @@ Object {
"include": Array [
"ROOT",
],
- "test": "/\\\\.(mjs|tsx?|jsx?)$/",
+ "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
"use": Array [
Object {
"loader": "NODE_MODULES/babel-loader/lib/index.js",
diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix b/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix
index a686af760a22..a86a667481da 100644
--- a/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix
+++ b/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix
@@ -42,7 +42,7 @@ Object {
"include": Array [
"ROOT",
],
- "test": "/\\\\.(mjs|tsx?|jsx?)$/",
+ "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
"use": Array [
Object {
"loader": "NODE_MODULES/babel-loader/lib/index.js",
diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix
index 64e4d88c7a94..4cf2f80e4570 100644
--- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix
+++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix
@@ -41,7 +41,7 @@ Object {
"include": Array [
"ROOT",
],
- "test": "/\\\\.(mjs|tsx?|jsx?)$/",
+ "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
"use": Array [
Object {
"loader": "NODE_MODULES/babel-loader/lib/index.js",
@@ -208,7 +208,7 @@ Object {
"test": "/\\\\.vue$/",
},
Object {
- "test": "/\\\\.tsx?$/",
+ "test": "/\\\\.ts$/",
"use": Array [
Object {
"loader": "NODE_MODULES/ts-loader/index.js",
@@ -221,6 +221,20 @@ Object {
},
],
},
+ Object {
+ "test": "/\\\\.tsx$/",
+ "use": Array [
+ Object {
+ "loader": "NODE_MODULES/ts-loader/index.js",
+ "options": Object {
+ "appendTsxSuffixTo": Array [
+ "/\\\\.vue$/",
+ ],
+ "transpileOnly": true,
+ },
+ },
+ ],
+ },
Object {
"include": "NODE_MODULES\\\\/acorn-jsx/",
"test": "/\\\\.js$/",
diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix
index 9f1c9872be90..fe831e185d10 100644
--- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix
+++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix
@@ -40,7 +40,7 @@ Object {
"include": Array [
"ROOT",
],
- "test": "/\\\\.(mjs|tsx?|jsx?)$/",
+ "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
"use": Array [
Object {
"loader": "NODE_MODULES/babel-loader/lib/index.js",
@@ -207,7 +207,7 @@ Object {
"test": "/\\\\.vue$/",
},
Object {
- "test": "/\\\\.tsx?$/",
+ "test": "/\\\\.ts$/",
"use": Array [
Object {
"loader": "NODE_MODULES/ts-loader/index.js",
@@ -220,6 +220,20 @@ Object {
},
],
},
+ Object {
+ "test": "/\\\\.tsx$/",
+ "use": Array [
+ Object {
+ "loader": "NODE_MODULES/ts-loader/index.js",
+ "options": Object {
+ "appendTsxSuffixTo": Array [
+ "/\\\\.vue$/",
+ ],
+ "transpileOnly": true,
+ },
+ },
+ ],
+ },
Object {
"include": "NODE_MODULES\\\\/acorn-jsx/",
"test": "/\\\\.js$/",
diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix
index 0676e83166fe..f3dec4361294 100644
--- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix
+++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix
@@ -42,7 +42,7 @@ Object {
"include": Array [
"ROOT",
],
- "test": "/\\\\.(mjs|tsx?|jsx?)$/",
+ "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
"use": Array [
Object {
"loader": "NODE_MODULES/babel-loader/lib/index.js",
diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix
index 982723cbc1ac..be24c3d5e9fc 100644
--- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix
+++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix
@@ -42,7 +42,7 @@ Object {
"include": Array [
"ROOT",
],
- "test": "/\\\\.(mjs|tsx?|jsx?)$/",
+ "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
"use": Array [
Object {
"loader": "NODE_MODULES/babel-loader/lib/index.js",
diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix
index 12efbe2571e2..5ef8867718bb 100644
--- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix
+++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix
@@ -40,7 +40,7 @@ Object {
"include": Array [
"ROOT",
],
- "test": "/\\\\.(mjs|tsx?|jsx?)$/",
+ "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
"use": Array [
Object {
"loader": "NODE_MODULES/babel-loader/lib/index.js",
diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix
index 0a9453609940..51adf69ea33c 100644
--- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix
+++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix
@@ -39,7 +39,7 @@ Object {
"include": Array [
"ROOT",
],
- "test": "/\\\\.(mjs|tsx?|jsx?)$/",
+ "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
"use": Array [
Object {
"loader": "NODE_MODULES/babel-loader/lib/index.js",
diff --git a/lib/core-server/src/build-dev.ts b/lib/core-server/src/build-dev.ts
index 675b6c3c7361..98a7d3f48bd7 100644
--- a/lib/core-server/src/build-dev.ts
+++ b/lib/core-server/src/build-dev.ts
@@ -1,14 +1,18 @@
import { logger, instance as npmLog } from '@storybook/node-logger';
-import type {
+import prompts from 'prompts';
+import {
CLIOptions,
LoadOptions,
BuilderOptions,
Options,
StorybookConfig,
+ CoreConfig,
+ resolvePathInStorybookCache,
+ loadAllPresets,
+ cache,
} from '@storybook/core-common';
-import { resolvePathInStorybookCache, loadAllPresets, cache } from '@storybook/core-common';
+import { telemetry } from '@storybook/telemetry';
import dedent from 'ts-dedent';
-import prompts from 'prompts';
import global from 'global';
import path from 'path';
@@ -130,17 +134,18 @@ export async function buildDevStandalone(options: CLIOptions & LoadOptions & Bui
export async function buildDev(loadOptions: LoadOptions) {
const cliOptions = await getDevCli(loadOptions.packageJson);
+ const options: CLIOptions & LoadOptions & BuilderOptions = {
+ ...cliOptions,
+ ...loadOptions,
+ configDir: loadOptions.configDir || cliOptions.configDir || './.storybook',
+ configType: 'DEVELOPMENT',
+ ignorePreview: !!cliOptions.previewUrl && !cliOptions.forceBuildPreview,
+ docsMode: !!cliOptions.docs,
+ cache,
+ };
try {
- await buildDevStandalone({
- ...cliOptions,
- ...loadOptions,
- configDir: loadOptions.configDir || cliOptions.configDir || './.storybook',
- configType: 'DEVELOPMENT',
- ignorePreview: !!cliOptions.previewUrl && !cliOptions.forceBuildPreview,
- docsMode: !!cliOptions.docs,
- cache,
- });
+ await buildDevStandalone(options);
} catch (error) {
// this is a weird bugfix, somehow 'node-pre-gyp' is polluting the npmLog header
npmLog.heading = '';
@@ -171,6 +176,56 @@ export async function buildDev(loadOptions: LoadOptions) {
);
logger.line();
+ const presets = loadAllPresets({
+ corePresets: [require.resolve('./presets/common-preset')],
+ overridePresets: [],
+ ...options,
+ });
+
+ const core = await presets.apply('core');
+ if (!core?.disableTelemetry) {
+ let enableCrashReports;
+ if (core.enableCrashReports !== undefined) {
+ enableCrashReports = core.enableCrashReports;
+ } else {
+ const valueFromCache = await cache.get('enableCrashreports');
+ if (valueFromCache !== undefined) {
+ enableCrashReports = valueFromCache;
+ } else {
+ const valueFromPrompt = await promptCrashReports(options);
+ if (valueFromPrompt !== undefined) {
+ enableCrashReports = valueFromPrompt;
+ }
+ }
+ }
+
+ await telemetry(
+ 'error-dev',
+ { error },
+ {
+ immediate: true,
+ configDir: options.configDir,
+ enableCrashReports,
+ }
+ );
+ }
process.exit(1);
}
}
+
+const promptCrashReports = async ({ packageJson }: CLIOptions & LoadOptions & BuilderOptions) => {
+ if (process.env.CI) {
+ return undefined;
+ }
+
+ const { enableCrashReports } = await prompts({
+ type: 'confirm',
+ name: 'enableCrashReports',
+ message: `Would you like to send crash reports to Storybook?`,
+ initial: true,
+ });
+
+ await cache.set('enableCrashreports', enableCrashReports);
+
+ return enableCrashReports;
+};
diff --git a/lib/core-server/src/build-static.ts b/lib/core-server/src/build-static.ts
index c59532ecd660..402acb2dea05 100644
--- a/lib/core-server/src/build-static.ts
+++ b/lib/core-server/src/build-static.ts
@@ -1,12 +1,11 @@
import chalk from 'chalk';
-import cpy from 'cpy';
import fs from 'fs-extra';
import path from 'path';
import dedent from 'ts-dedent';
import global from 'global';
import { logger } from '@storybook/node-logger';
-
+import { telemetry } from '@storybook/telemetry';
import type {
LoadOptions,
CLIOptions,
@@ -16,7 +15,7 @@ import type {
StorybookConfig,
CoreConfig,
} from '@storybook/core-common';
-import { loadAllPresets, cache, normalizeStories, logConfig } from '@storybook/core-common';
+import { normalizeStories, loadAllPresets, cache, logConfig } from '@storybook/core-common';
import { getProdCli } from './cli';
import { outputStats } from './utils/output-stats';
@@ -27,6 +26,8 @@ import {
import { getPreviewBuilder } from './utils/get-preview-builder';
import { getManagerBuilder } from './utils/get-manager-builder';
import { extractStoriesJson } from './utils/stories-json';
+import { extractStorybookMetadata } from './utils/metadata';
+import { StoryIndexGenerator } from './utils/StoryIndexGenerator';
export async function buildStaticStandalone(options: CLIOptions & LoadOptions & BuilderOptions) {
/* eslint-disable no-param-reassign */
@@ -54,7 +55,7 @@ export async function buildStaticStandalone(options: CLIOptions & LoadOptions &
}
await fs.emptyDir(options.outputDir);
- await cpy(defaultFavIcon, options.outputDir);
+ await fs.copyFile(defaultFavIcon, path.join(options.outputDir, path.basename(defaultFavIcon)));
const previewBuilder: Builder = await getPreviewBuilder(options.configDir);
const managerBuilder: Builder = await getManagerBuilder(options.configDir);
@@ -92,17 +93,56 @@ export async function buildStaticStandalone(options: CLIOptions & LoadOptions &
const features = await presets.apply('features');
global.FEATURES = features;
+ const extractTasks = [];
+
+ let initializedStoryIndexGenerator: Promise = Promise.resolve(undefined);
if (features?.buildStoriesJson || features?.storyStoreV7) {
+ const workingDir = process.cwd();
const directories = {
configDir: options.configDir,
- workingDir: process.cwd(),
+ workingDir,
};
- const stories = normalizeStories(await presets.apply('stories'), directories);
- await extractStoriesJson(path.join(options.outputDir, 'stories.json'), stories, {
+ const normalizedStories = normalizeStories(await presets.apply('stories'), directories);
+
+ const generator = new StoryIndexGenerator(normalizedStories, {
...directories,
storiesV2Compatibility: !features?.breakingChangesV7 && !features?.storyStoreV7,
storyStoreV7: features?.storyStoreV7,
});
+
+ initializedStoryIndexGenerator = generator.initialize().then(() => generator);
+ extractTasks.push(
+ extractStoriesJson(
+ path.join(options.outputDir, 'stories.json'),
+ initializedStoryIndexGenerator
+ )
+ );
+ }
+
+ const core = await presets.apply('core');
+ if (!core?.disableTelemetry) {
+ initializedStoryIndexGenerator.then(async (generator) => {
+ if (!generator) {
+ return;
+ }
+
+ const storyIndex = await generator.getIndex();
+ const payload = storyIndex
+ ? {
+ storyIndex: {
+ storyCount: Object.keys(storyIndex.stories).length,
+ version: storyIndex.v,
+ },
+ }
+ : undefined;
+ telemetry('build', payload, { configDir: options.configDir });
+ });
+ }
+
+ if (!core?.disableProjectJson) {
+ extractTasks.push(
+ extractStorybookMetadata(path.join(options.outputDir, 'project.json'), options.configDir)
+ );
}
const fullOptions: Options = {
@@ -116,7 +156,6 @@ export async function buildStaticStandalone(options: CLIOptions & LoadOptions &
logConfig('Manager webpack config', await managerBuilder.getConfig(fullOptions));
}
- const core = await presets.apply('core');
const builderName = typeof core?.builder === 'string' ? core.builder : core?.builder?.name;
const { getPrebuiltDir } =
builderName === 'webpack5'
@@ -129,7 +168,7 @@ export async function buildStaticStandalone(options: CLIOptions & LoadOptions &
const startTime = process.hrtime();
// When using the prebuilt manager, we straight up copy it into the outputDir instead of building it
const manager = prebuiltDir
- ? cpy('**', options.outputDir, { cwd: prebuiltDir, parents: true }).then(() => {})
+ ? fs.copy(prebuiltDir, options.outputDir, { dereference: true }).then(() => {})
: managerBuilder.build({ startTime, options: fullOptions });
if (options.ignorePreview) {
@@ -152,6 +191,7 @@ export async function buildStaticStandalone(options: CLIOptions & LoadOptions &
await managerBuilder.bail();
throw err;
}),
+ ...extractTasks,
]);
if (options.webpackStatsJson) {
@@ -165,21 +205,45 @@ export async function buildStaticStandalone(options: CLIOptions & LoadOptions &
export async function buildStatic({ packageJson, ...loadOptions }: LoadOptions) {
const cliOptions = getProdCli(packageJson);
+ const options: CLIOptions & LoadOptions & BuilderOptions = {
+ ...cliOptions,
+ ...loadOptions,
+ packageJson,
+ configDir: loadOptions.configDir || cliOptions.configDir || './.storybook',
+ outputDir: loadOptions.outputDir || cliOptions.outputDir || './storybook-static',
+ ignorePreview:
+ (!!loadOptions.ignorePreview || !!cliOptions.previewUrl) && !cliOptions.forceBuildPreview,
+ docsMode: !!cliOptions.docs,
+ configType: 'PRODUCTION',
+ cache,
+ };
+
try {
- await buildStaticStandalone({
- ...cliOptions,
- ...loadOptions,
- packageJson,
- configDir: loadOptions.configDir || cliOptions.configDir || './.storybook',
- outputDir: loadOptions.outputDir || cliOptions.outputDir || './storybook-static',
- ignorePreview:
- (!!loadOptions.ignorePreview || !!cliOptions.previewUrl) && !cliOptions.forceBuildPreview,
- docsMode: !!cliOptions.docs,
- configType: 'PRODUCTION',
- cache,
+ await buildStaticStandalone(options);
+ } catch (error) {
+ if (error instanceof Error) {
+ logger.error(error.stack || error.message);
+ }
+
+ const presets = loadAllPresets({
+ corePresets: [require.resolve('./presets/common-preset')],
+ overridePresets: [],
+ ...options,
});
- } catch (e) {
- logger.error(e);
+
+ const core = await presets.apply('core');
+ if (!core?.disableTelemetry) {
+ await telemetry(
+ 'error-build',
+ { error },
+ {
+ immediate: true,
+ configDir: options.configDir,
+ enableCrashReports: options.enableCrashReports,
+ }
+ );
+ }
+
process.exit(1);
}
}
diff --git a/lib/core-server/src/cli/dev.ts b/lib/core-server/src/cli/dev.ts
index ddc45c670426..a79d01462df2 100644
--- a/lib/core-server/src/cli/dev.ts
+++ b/lib/core-server/src/cli/dev.ts
@@ -33,6 +33,13 @@ export async function getDevCli(packageJson: {
.option('--loglevel ', 'Control level of logging during build')
.option('--quiet', 'Suppress verbose build output')
.option('--no-version-updates', 'Suppress update check', true)
+ .option(
+ '--disable-telemetry',
+ 'Disable sending telemetry',
+ // default value is false, but if the user sets STORYBOOK_DISABLE_TELEMETRY, it can be true
+ process.env.STORYBOOK_DISABLE_TELEMETRY && process.env.STORYBOOK_DISABLE_TELEMETRY !== 'false'
+ )
+ .option('--enable-crash-reports', 'enable sending crash reports to telemetry data')
.option(
'--no-release-notes',
'Suppress automatic redirects to the release notes after upgrading',
diff --git a/lib/core-server/src/cli/prod.ts b/lib/core-server/src/cli/prod.ts
index ec7468eab9fd..a767530fdf25 100644
--- a/lib/core-server/src/cli/prod.ts
+++ b/lib/core-server/src/cli/prod.ts
@@ -47,6 +47,13 @@ export function getProdCli(packageJson: {
.option('--docs', 'Build a documentation-only site using addon-docs')
.option('--modern', 'Use modern browser modules')
.option('--no-manager-cache', 'Do not cache the manager UI')
+ .option(
+ '--disable-telemetry',
+ 'Disable sending telemetry',
+ // default value is false, but if the user sets STORYBOOK_DISABLE_TELEMETRY, it can be true
+ process.env.STORYBOOK_DISABLE_TELEMETRY && process.env.STORYBOOK_DISABLE_TELEMETRY !== 'false'
+ )
+ .option('--enable-crash-reports', 'enable sending crash reports to telemetry data')
.parse(process.argv);
logger.setLevel(program.loglevel);
diff --git a/lib/core-server/src/core-presets.test.ts b/lib/core-server/src/core-presets.test.ts
index e0fe1cbcd48a..0151dfe7febc 100644
--- a/lib/core-server/src/core-presets.test.ts
+++ b/lib/core-server/src/core-presets.test.ts
@@ -39,12 +39,31 @@ jest.mock('@storybook/builder-webpack4', () => {
return actualBuilder;
});
-jest.mock('./utils/stories-json', () => {
- const actualStoriesJson = jest.requireActual('./utils/stories-json');
- actualStoriesJson.extractStoriesJson = () => Promise.resolve();
- return actualStoriesJson;
+jest.mock('@storybook/telemetry', () => ({
+ getStorybookMetadata: jest.fn(() => ({})),
+ telemetry: jest.fn(() => ({})),
+}));
+
+jest.mock('./utils/StoryIndexGenerator', () => {
+ const { StoryIndexGenerator } = jest.requireActual('./utils/StoryIndexGenerator');
+ return {
+ StoryIndexGenerator: class extends StoryIndexGenerator {
+ initialize() {
+ return Promise.resolve(undefined);
+ }
+
+ getIndex() {
+ return { stories: {}, v: 3 };
+ }
+ },
+ };
});
+jest.mock('./utils/stories-json', () => ({
+ extractStoriesJson: () => Promise.resolve(),
+ useStoriesJson: () => {},
+}));
+
jest.mock('@storybook/manager-webpack4', () => {
const value = jest.fn();
const actualBuilder = jest.requireActual('@storybook/manager-webpack4');
@@ -64,7 +83,11 @@ jest.mock('@storybook/store', () => {
};
});
-jest.mock('cpy', () => () => Promise.resolve());
+jest.mock('fs-extra', () => ({
+ ...jest.requireActual('fs-extra'),
+ copyFile: jest.fn().mockResolvedValue(Promise.resolve()),
+ copy: jest.fn().mockResolvedValue(Promise.resolve()),
+}));
jest.mock('http', () => ({
...jest.requireActual('http'),
createServer: () => ({ listen: (_options, cb) => cb(), on: jest.fn() }),
@@ -159,6 +182,7 @@ describe.each([
['prod', buildStaticStandalone],
['dev', buildDevStandalone],
])('%s', async (mode, builder) => {
+ console.log('running for ', mode, builder);
const options = {
...baseOptions,
...frameworkOptions,
diff --git a/lib/core-server/src/dev-server.ts b/lib/core-server/src/dev-server.ts
index 4d82c1ff54f6..ca42b4558d2d 100644
--- a/lib/core-server/src/dev-server.ts
+++ b/lib/core-server/src/dev-server.ts
@@ -1,33 +1,103 @@
import express, { Router } from 'express';
import compression from 'compression';
-import type { Builder, Options, StorybookConfig } from '@storybook/core-common';
-import { logConfig } from '@storybook/core-common';
-
+import {
+ Builder,
+ CoreConfig,
+ normalizeStories,
+ Options,
+ StorybookConfig,
+ logConfig,
+} from '@storybook/core-common';
+
+import { telemetry } from '@storybook/telemetry';
import { getMiddleware } from './utils/middleware';
import { getServerAddresses } from './utils/server-address';
import { getServer } from './utils/server-init';
import { useStatics } from './utils/server-statics';
import { useStoriesJson } from './utils/stories-json';
+import { useStorybookMetadata } from './utils/metadata';
import { getServerChannel } from './utils/get-server-channel';
import { openInBrowser } from './utils/open-in-browser';
import { getPreviewBuilder } from './utils/get-preview-builder';
import { getManagerBuilder } from './utils/get-manager-builder';
+import { StoryIndexGenerator } from './utils/StoryIndexGenerator';
// @ts-ignore
export const router: Router = new Router();
+export const DEBOUNCE = 100;
+
export async function storybookDevServer(options: Options) {
const startTime = process.hrtime();
const app = express();
const server = await getServer(app, options);
const serverChannel = getServerChannel(server);
- app.use(compression({ level: 1 }));
-
const features = await options.presets.apply('features');
- const core = await options.presets.apply('core');
+ const core = await options.presets.apply('core');
+ // try get index generator, if failed, send telemetry without storyCount, then rethrow the error
+ let initializedStoryIndexGenerator: Promise = Promise.resolve(undefined);
+ if (features?.buildStoriesJson || features?.storyStoreV7) {
+ try {
+ const workingDir = process.cwd();
+ const directories = {
+ configDir: options.configDir,
+ workingDir,
+ };
+ const normalizedStories = normalizeStories(
+ await options.presets.apply('stories'),
+ directories
+ );
+ const generator = new StoryIndexGenerator(normalizedStories, {
+ ...directories,
+ workingDir,
+ storiesV2Compatibility: !features?.breakingChangesV7 && !features?.storyStoreV7,
+ storyStoreV7: features?.storyStoreV7,
+ });
+
+ initializedStoryIndexGenerator = generator.initialize().then(() => generator);
+
+ useStoriesJson({
+ router,
+ initializedStoryIndexGenerator,
+ normalizedStories,
+ serverChannel,
+ workingDir,
+ });
+ } catch (err) {
+ if (!core?.disableTelemetry) {
+ telemetry('start');
+ }
+ throw err;
+ }
+ }
+
+ if (!core?.disableTelemetry) {
+ initializedStoryIndexGenerator.then(async (generator) => {
+ if (!generator) {
+ return;
+ }
+
+ const storyIndex = await generator.getIndex();
+ const payload = storyIndex
+ ? {
+ storyIndex: {
+ storyCount: Object.keys(storyIndex.stories).length,
+ version: storyIndex.v,
+ },
+ }
+ : undefined;
+ telemetry('start', payload, { configDir: options.configDir });
+ });
+ }
+
+ if (!core?.disableProjectJson) {
+ useStorybookMetadata(router, options.configDir);
+ }
+
+ app.use(compression({ level: 1 }));
if (typeof options.extendServer === 'function') {
options.extendServer(server);
@@ -51,10 +121,6 @@ export async function storybookDevServer(options: Options) {
});
}
- if (features?.buildStoriesJson || features?.storyStoreV7) {
- await useStoriesJson(router, serverChannel, options);
- }
-
// User's own static files
await useStatics(router, options);
diff --git a/lib/core-server/src/presets/common-preset.ts b/lib/core-server/src/presets/common-preset.ts
index 1f22ff93b109..378c37d7a84e 100644
--- a/lib/core-server/src/presets/common-preset.ts
+++ b/lib/core-server/src/presets/common-preset.ts
@@ -6,6 +6,8 @@ import {
loadCustomBabelConfig,
getStorybookBabelConfig,
loadEnvs,
+ CoreConfig,
+ StorybookConfig,
} from '@storybook/core-common';
import type { Options } from '@storybook/core-common';
@@ -61,13 +63,52 @@ export const typescript = () => ({
},
});
+const optionalEnvToBoolean = (input: string | undefined): boolean | undefined => {
+ if (input === undefined) {
+ return undefined;
+ }
+ if (input.toUpperCase() === 'FALSE') {
+ return false;
+ }
+ if (input.toUpperCase() === 'TRUE') {
+ return true;
+ }
+ if (typeof input === 'string') {
+ return true;
+ }
+ return undefined;
+};
+
+/**
+ * If for some reason this config is not applied, the reason is that
+ * likely there is an addon that does `export core = () => ({ someConfig })`,
+ * instead of `export core = (existing) => ({ ...existing, someConfig })`,
+ * just overwriting everything and not merging with the existing values.
+ */
+export const core = async (existing: CoreConfig, options: Options): Promise => ({
+ ...existing,
+ disableTelemetry: options.disableTelemetry === true,
+ enableCrashReports:
+ options.enableCrashReports || optionalEnvToBoolean(process.env.STORYBOOK_ENABLE_CRASH_REPORTS),
+});
+
export const config = async (base: any, options: Options) => {
return [...(await options.presets.apply('previewAnnotations', [], options)), ...base];
};
-export const features = async (existing: Record) => ({
+export const features = async (
+ existing: StorybookConfig['features']
+): Promise => ({
...existing,
postcss: true,
emotionAlias: false, // TODO remove in 7.0, this no longer does anything
warnOnLegacyHierarchySeparator: true,
+ buildStoriesJson: false,
+ storyStoreV7: false,
+ modernInlineRender: false,
+ breakingChangesV7: false,
+ interactionsDebugger: false,
+ babelModeV7: false,
+ argTypeTargetsV7: false,
+ previewMdx2: false,
});
diff --git a/lib/core-server/src/utils/StoryIndexGenerator.ts b/lib/core-server/src/utils/StoryIndexGenerator.ts
index 5126e6155bba..80323b8cea62 100644
--- a/lib/core-server/src/utils/StoryIndexGenerator.ts
+++ b/lib/core-server/src/utils/StoryIndexGenerator.ts
@@ -4,7 +4,7 @@ import glob from 'globby';
import slash from 'slash';
import type { Path, StoryIndex, V2CompatIndexEntry, StoryId } from '@storybook/store';
-import { autoTitleFromSpecifier, sortStoriesV7 } from '@storybook/store';
+import { userOrAutoTitleFromSpecifier, sortStoriesV7 } from '@storybook/store';
import type { NormalizedStoriesSpecifier } from '@storybook/core-common';
import { normalizeStoryPath } from '@storybook/core-common';
import { logger } from '@storybook/node-logger';
@@ -86,8 +86,10 @@ export class StoryIndexGenerator {
const entry = this.storyIndexEntries.get(specifier);
try {
const importPath = slash(normalizeStoryPath(relativePath));
- const defaultTitle = autoTitleFromSpecifier(importPath, specifier);
- const csf = (await readCsfOrMdx(absolutePath, { defaultTitle })).parse();
+ const makeTitle = (userTitle?: string) => {
+ return userOrAutoTitleFromSpecifier(importPath, specifier, userTitle);
+ };
+ const csf = (await readCsfOrMdx(absolutePath, { makeTitle })).parse();
csf.stories.forEach(({ id, name }) => {
fileStories[id] = {
id,
diff --git a/lib/core-server/src/utils/get-preview-builder.ts b/lib/core-server/src/utils/get-preview-builder.ts
index 282d58f43248..d4825e5430d4 100644
--- a/lib/core-server/src/utils/get-preview-builder.ts
+++ b/lib/core-server/src/utils/get-preview-builder.ts
@@ -7,7 +7,7 @@ export async function getPreviewBuilder(configDir: Options['configDir']) {
const mainFile = getInterpretedFile(main);
const { core } = mainFile ? serverRequire(mainFile) : { core: null };
let builderPackage: string;
- if (core) {
+ if (core?.builder) {
const builderName = typeof core.builder === 'string' ? core.builder : core.builder?.name;
builderPackage = require.resolve(
['webpack4', 'webpack5'].includes(builderName)
diff --git a/lib/core-server/src/utils/metadata.ts b/lib/core-server/src/utils/metadata.ts
new file mode 100644
index 000000000000..9c0b377f7efd
--- /dev/null
+++ b/lib/core-server/src/utils/metadata.ts
@@ -0,0 +1,17 @@
+import fs from 'fs-extra';
+import { Request, Response, Router } from 'express';
+import { getStorybookMetadata } from '@storybook/telemetry';
+
+export async function extractStorybookMetadata(outputFile: string, configDir: string) {
+ const storybookMetadata = await getStorybookMetadata(configDir);
+
+ await fs.writeJson(outputFile, storybookMetadata);
+}
+
+export function useStorybookMetadata(router: Router, configDir?: string) {
+ router.use('/project.json', async (req: Request, res: Response) => {
+ const storybookMetadata = await getStorybookMetadata(configDir);
+ res.header('Content-Type', 'application/json');
+ res.send(JSON.stringify(storybookMetadata));
+ });
+}
diff --git a/lib/core-server/src/utils/open-in-browser.ts b/lib/core-server/src/utils/open-in-browser.ts
index daa5938b3f07..59f088f230aa 100644
--- a/lib/core-server/src/utils/open-in-browser.ts
+++ b/lib/core-server/src/utils/open-in-browser.ts
@@ -1,13 +1,13 @@
import { logger } from '@storybook/node-logger';
import betterOpn from 'better-opn'; // betterOpn alias used because also loading open
import open from 'open';
-import getDefaultBrowser from 'x-default-browser';
+import getDefaultBrowser from '@aw-web-design/x-default-browser';
import dedent from 'ts-dedent';
export function openInBrowser(address: string) {
getDefaultBrowser(async (err: any, res: any) => {
try {
- if (res.isChrome || res.isChromium) {
+ if (res && (res.isChrome || res.isChromium)) {
// We use betterOpn for Chrome because it is better at handling which chrome tab
// or window the preview loads in.
betterOpn(address);
diff --git a/lib/core-server/src/utils/stories-json.test.ts b/lib/core-server/src/utils/stories-json.test.ts
index d16a82ce9428..5464354563e1 100644
--- a/lib/core-server/src/utils/stories-json.test.ts
+++ b/lib/core-server/src/utils/stories-json.test.ts
@@ -6,16 +6,32 @@ import Events from '@storybook/core-events';
import { useStoriesJson, DEBOUNCE } from './stories-json';
import { ServerChannel } from './get-server-channel';
+import { StoryIndexGenerator } from './StoryIndexGenerator';
jest.mock('watchpack');
jest.mock('lodash/debounce');
-const options: Parameters[2] = {
- configDir: path.join(__dirname, '__mockdata__'),
- presets: {
- apply: async () => ['./src/**/*.stories.(ts|js|jsx)'] as any,
+const workingDir = path.join(__dirname, '__mockdata__');
+const normalizedStories = [
+ {
+ titlePrefix: '',
+ directory: './src',
+ files: '**/*.stories.@(ts|js|jsx)',
+ importPathMatcher:
+ /^\.[\\/](?:src(?:\/(?!\.)(?:(?:(?!(?:^|\/)\.).)*?)\/|\/|$)(?!\.)(?=.)[^/]*?\.stories\.(ts|js|jsx))$/,
},
-} as any;
+];
+
+const getInitializedStoryIndexGenerator = async () => {
+ const generator = new StoryIndexGenerator(normalizedStories, {
+ configDir: workingDir,
+ workingDir,
+ storiesV2Compatibility: true,
+ storyStoreV7: true,
+ });
+ await generator.initialize();
+ return generator;
+};
describe('useStoriesJson', () => {
const use = jest.fn();
@@ -34,7 +50,7 @@ describe('useStoriesJson', () => {
on: jest.fn(),
} as any;
- beforeEach(() => {
+ beforeEach(async () => {
use.mockClear();
send.mockClear();
write.mockClear();
@@ -48,7 +64,13 @@ describe('useStoriesJson', () => {
describe('JSON endpoint', () => {
it('scans and extracts stories', async () => {
const mockServerChannel = { emit: jest.fn() } as any as ServerChannel;
- await useStoriesJson(router, mockServerChannel, options, options.configDir);
+ useStoriesJson({
+ router,
+ serverChannel: mockServerChannel,
+ workingDir,
+ normalizedStories,
+ initializedStoryIndexGenerator: getInitializedStoryIndexGenerator(),
+ });
expect(use).toHaveBeenCalledTimes(1);
const route = use.mock.calls[0][1];
@@ -145,7 +167,14 @@ describe('useStoriesJson', () => {
it('can handle simultaneous access', async () => {
const mockServerChannel = { emit: jest.fn() } as any as ServerChannel;
- await useStoriesJson(router, mockServerChannel, options, options.configDir);
+
+ useStoriesJson({
+ router,
+ serverChannel: mockServerChannel,
+ workingDir,
+ normalizedStories,
+ initializedStoryIndexGenerator: getInitializedStoryIndexGenerator(),
+ });
expect(use).toHaveBeenCalledTimes(1);
const route = use.mock.calls[0][1];
@@ -171,7 +200,13 @@ describe('useStoriesJson', () => {
it('sends invalidate events', async () => {
const mockServerChannel = { emit: jest.fn() } as any as ServerChannel;
- await useStoriesJson(router, mockServerChannel, options, options.configDir);
+ useStoriesJson({
+ router,
+ serverChannel: mockServerChannel,
+ workingDir,
+ normalizedStories,
+ initializedStoryIndexGenerator: getInitializedStoryIndexGenerator(),
+ });
expect(use).toHaveBeenCalledTimes(1);
const route = use.mock.calls[0][1];
@@ -194,7 +229,13 @@ describe('useStoriesJson', () => {
it('only sends one invalidation when multiple event listeners are listening', async () => {
const mockServerChannel = { emit: jest.fn() } as any as ServerChannel;
- await useStoriesJson(router, mockServerChannel, options, options.configDir);
+ useStoriesJson({
+ router,
+ serverChannel: mockServerChannel,
+ workingDir,
+ normalizedStories,
+ initializedStoryIndexGenerator: getInitializedStoryIndexGenerator(),
+ });
expect(use).toHaveBeenCalledTimes(1);
const route = use.mock.calls[0][1];
@@ -223,7 +264,13 @@ describe('useStoriesJson', () => {
(debounce as jest.Mock).mockImplementation(jest.requireActual('lodash/debounce'));
const mockServerChannel = { emit: jest.fn() } as any as ServerChannel;
- await useStoriesJson(router, mockServerChannel, options, options.configDir);
+ useStoriesJson({
+ router,
+ serverChannel: mockServerChannel,
+ workingDir,
+ normalizedStories,
+ initializedStoryIndexGenerator: getInitializedStoryIndexGenerator(),
+ });
expect(use).toHaveBeenCalledTimes(1);
const route = use.mock.calls[0][1];
diff --git a/lib/core-server/src/utils/stories-json.ts b/lib/core-server/src/utils/stories-json.ts
index abf23b373a2c..35f08b8dafd9 100644
--- a/lib/core-server/src/utils/stories-json.ts
+++ b/lib/core-server/src/utils/stories-json.ts
@@ -1,10 +1,8 @@
import { Router, Request, Response } from 'express';
import fs from 'fs-extra';
-import type { Options, NormalizedStoriesSpecifier, StorybookConfig } from '@storybook/core-common';
-import { normalizeStories } from '@storybook/core-common';
-import Events from '@storybook/core-events';
-import debounce from 'lodash/debounce';
-
+import type { NormalizedStoriesSpecifier } from '@storybook/core-common';
+import { debounce } from 'lodash';
+import { STORY_INDEX_INVALIDATED } from '@storybook/core-events';
import { StoryIndexGenerator } from './StoryIndexGenerator';
import { watchStorySpecifiers } from './watch-story-specifiers';
import { ServerChannel } from './get-server-channel';
@@ -13,65 +11,38 @@ export const DEBOUNCE = 100;
export async function extractStoriesJson(
outputFile: string,
- normalizedStories: NormalizedStoriesSpecifier[],
- options: {
- configDir: string;
- workingDir: string;
- storiesV2Compatibility: boolean;
- storyStoreV7: boolean;
- }
+ initializedStoryIndexGenerator: Promise
) {
- const generator = new StoryIndexGenerator(normalizedStories, options);
- await generator.initialize();
-
- const index = await generator.getIndex();
- await fs.writeJson(outputFile, index);
+ const generator = await initializedStoryIndexGenerator;
+ const storyIndex = await generator.getIndex();
+ await fs.writeJson(outputFile, storyIndex);
}
-export async function useStoriesJson(
- router: Router,
- serverChannel: ServerChannel,
- options: Options,
- workingDir: string = process.cwd()
-) {
- const normalizedStories = normalizeStories(await options.presets.apply('stories'), {
- configDir: options.configDir,
- workingDir,
+export function useStoriesJson({
+ router,
+ initializedStoryIndexGenerator,
+ workingDir = process.cwd(),
+ serverChannel,
+ normalizedStories,
+}: {
+ router: Router;
+ initializedStoryIndexGenerator: Promise;
+ serverChannel: ServerChannel;
+ workingDir?: string;
+ normalizedStories: NormalizedStoriesSpecifier[];
+}) {
+ const maybeInvalidate = debounce(() => serverChannel.emit(STORY_INDEX_INVALIDATED), DEBOUNCE, {
+ leading: true,
});
- const features = await options.presets.apply('features');
- const generator = new StoryIndexGenerator(normalizedStories, {
- configDir: options.configDir,
- workingDir,
- storiesV2Compatibility: !features?.breakingChangesV7 && !features?.storyStoreV7,
- storyStoreV7: features?.storyStoreV7,
+ watchStorySpecifiers(normalizedStories, { workingDir }, async (specifier, path, removed) => {
+ const generator = await initializedStoryIndexGenerator;
+ generator.invalidate(specifier, path, removed);
+ maybeInvalidate();
});
- // Wait until someone actually requests `stories.json` before we start generating/watching.
- // This is mainly for testing purposes.
- const maybeInvalidate = debounce(
- () => serverChannel.emit(Events.STORY_INDEX_INVALIDATED),
- DEBOUNCE,
- { leading: true }
- );
- let startedPromise: Promise;
- async function ensureStarted() {
- if (!startedPromise) {
- startedPromise = (async () => {
- watchStorySpecifiers(normalizedStories, { workingDir }, (specifier, path, removed) => {
- generator.invalidate(specifier, path, removed);
- maybeInvalidate();
- });
-
- await generator.initialize();
- })();
- }
- return startedPromise;
- }
-
router.use('/stories.json', async (req: Request, res: Response) => {
- await ensureStarted();
-
try {
+ const generator = await initializedStoryIndexGenerator;
const index = await generator.getIndex();
res.header('Content-Type', 'application/json');
res.send(JSON.stringify(index));
diff --git a/lib/core-server/src/utils/update-check.ts b/lib/core-server/src/utils/update-check.ts
index 61dff0db5d8a..b90100927024 100644
--- a/lib/core-server/src/utils/update-check.ts
+++ b/lib/core-server/src/utils/update-check.ts
@@ -38,7 +38,7 @@ export function createUpdateMessage(updateInfo: VersionCheck, version: string):
try {
const suffix = semver.prerelease(updateInfo.data.latest.version) ? '--prerelease' : '';
- const upgradeCommand = `npx sb@latest upgrade ${suffix}`.trim();
+ const upgradeCommand = `npx storybook@latest upgrade ${suffix}`.trim();
updateMessage =
updateInfo.success && semver.lt(version, updateInfo.data.latest.version)
? dedent`
@@ -48,7 +48,9 @@ export function createUpdateMessage(updateInfo: VersionCheck, version: string):
${chalk.gray('Upgrade now:')} ${colors.green(upgradeCommand)}
- ${chalk.gray('Read full changelog:')} ${chalk.gray.underline('https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md')}
+ ${chalk.gray('Read full changelog:')} ${chalk.gray.underline(
+ 'https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md'
+ )}
`
: '';
} catch (e) {
diff --git a/lib/core-server/typings.d.ts b/lib/core-server/typings.d.ts
index eeb489a5e71a..b539c76578d5 100644
--- a/lib/core-server/typings.d.ts
+++ b/lib/core-server/typings.d.ts
@@ -7,7 +7,7 @@ declare module '@storybook/theming/paths';
declare module '@storybook/ui/paths';
declare module 'better-opn';
declare module 'open';
-declare module 'x-default-browser';
+declare module '@aw-web-design/x-default-browser';
declare module '@storybook/ui';
declare module '@discoveryjs/json-ext';
declare module 'watchpack';
diff --git a/lib/core/package.json b/lib/core/package.json
index 6fb4806d9676..982af9f01caf 100644
--- a/lib/core/package.json
+++ b/lib/core/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/core",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
@@ -40,8 +40,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/core-client": "6.5.0-beta.1",
- "@storybook/core-server": "6.5.0-beta.1"
+ "@storybook/core-client": "6.5.0-rc.1",
+ "@storybook/core-server": "6.5.0-rc.1"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -62,6 +62,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/csf-tools/package.json b/lib/csf-tools/package.json
index 05a21a042aa7..16b834cfa110 100644
--- a/lib/csf-tools/package.json
+++ b/lib/csf-tools/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/csf-tools",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"description": "",
"keywords": [
"storybook"
@@ -48,7 +48,7 @@
"@babel/traverse": "^7.12.11",
"@babel/types": "^7.12.11",
"@storybook/csf": "0.0.2--canary.4566f4d.1",
- "@storybook/mdx1-csf": "canary",
+ "@storybook/mdx1-csf": "^0.0.1",
"core-js": "^3.8.2",
"fs-extra": "^9.0.1",
"global": "^4.4.0",
@@ -56,12 +56,12 @@
"ts-dedent": "^2.0.0"
},
"devDependencies": {
- "@storybook/mdx2-csf": "canary",
+ "@storybook/mdx2-csf": "^0.0.3",
"@types/fs-extra": "^9.0.6",
"js-yaml": "^3.14.1"
},
"peerDependencies": {
- "@storybook/mdx2-csf": "*"
+ "@storybook/mdx2-csf": "^0.0.3"
},
"peerDependenciesMeta": {
"@storybook/mdx2-csf": {
@@ -71,6 +71,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/csf-tools/src/CsfFile.test.ts b/lib/csf-tools/src/CsfFile.test.ts
index 6ca412a5e52c..80d2bc2ca052 100644
--- a/lib/csf-tools/src/CsfFile.test.ts
+++ b/lib/csf-tools/src/CsfFile.test.ts
@@ -9,8 +9,12 @@ expect.addSnapshotSerializer({
test: (val) => typeof val !== 'string',
});
+const makeTitle = (userTitle?: string) => {
+ return userTitle || 'Default Title';
+};
+
const parse = (code: string, includeParameters?: boolean) => {
- const { stories, meta } = loadCsf(code, { defaultTitle: 'Default Title' }).parse();
+ const { stories, meta } = loadCsf(code, { makeTitle }).parse();
const filtered = includeParameters
? stories
: stories.map(({ id, name, parameters, ...rest }) => ({ id, name, ...rest }));
@@ -482,7 +486,7 @@ describe('CsfFile', () => {
const input = dedent`
export default { title: 'foo/bar', x: 1, y: 2 };
`;
- const csf = loadCsf(input, { defaultTitle: 'Default Title' }).parse();
+ const csf = loadCsf(input, { makeTitle }).parse();
expect(Object.keys(csf._metaAnnotations)).toEqual(['title', 'x', 'y']);
});
@@ -495,7 +499,7 @@ describe('CsfFile', () => {
export const B = () => {};
B.z = 3;
`;
- const csf = loadCsf(input, { defaultTitle: 'Default Title' }).parse();
+ const csf = loadCsf(input, { makeTitle }).parse();
expect(Object.keys(csf._storyAnnotations.A)).toEqual(['x', 'y']);
expect(Object.keys(csf._storyAnnotations.B)).toEqual(['z']);
});
@@ -513,7 +517,7 @@ describe('CsfFile', () => {
z: 3,
}
`;
- const csf = loadCsf(input, { defaultTitle: 'Default Title' }).parse();
+ const csf = loadCsf(input, { makeTitle }).parse();
expect(Object.keys(csf._storyAnnotations.A)).toEqual(['x', 'y']);
expect(Object.keys(csf._storyAnnotations.B)).toEqual(['z']);
});
@@ -609,5 +613,24 @@ describe('CsfFile', () => {
__id: foo-bar--a
`);
});
+
+ it('Object export with storyName', () => {
+ const consoleWarnMock = jest.spyOn(console, 'warn').mockImplementation();
+
+ parse(
+ dedent`
+ export default { title: 'foo/bar' };
+ export const A = {
+ storyName: 'Apple'
+ }
+ `,
+ true
+ );
+
+ expect(consoleWarnMock).toHaveBeenCalledWith(
+ 'Unexpected usage of "storyName" in "A". Please use "name" instead.'
+ );
+ consoleWarnMock.mockRestore();
+ });
});
});
diff --git a/lib/csf-tools/src/CsfFile.ts b/lib/csf-tools/src/CsfFile.ts
index d750cbd9ed97..88a8fbd5eec3 100644
--- a/lib/csf-tools/src/CsfFile.ts
+++ b/lib/csf-tools/src/CsfFile.ts
@@ -125,8 +125,8 @@ const sortExports = (exportByName: Record, order: string[]) => {
};
export interface CsfOptions {
- defaultTitle: string;
fileName?: string;
+ makeTitle: (userTitle: string) => string;
}
export class NoMetaError extends Error {
@@ -142,10 +142,10 @@ export class NoMetaError extends Error {
export class CsfFile {
_ast: t.File;
- _defaultTitle: string;
-
_fileName: string;
+ _makeTitle: (title: string) => string;
+
_meta?: Meta;
_stories: Record = {};
@@ -160,10 +160,10 @@ export class CsfFile {
_namedExportsOrder?: string[];
- constructor(ast: t.File, { defaultTitle, fileName }: CsfOptions) {
+ constructor(ast: t.File, { fileName, makeTitle }: CsfOptions) {
this._ast = ast;
- this._defaultTitle = defaultTitle;
this._fileName = fileName;
+ this._makeTitle = makeTitle;
}
_parseTitle(value: t.Node) {
@@ -268,6 +268,10 @@ export class CsfFile {
__isArgsStory = isArgsStory(p.value as t.Expression, parent, self);
} else if (p.key.name === 'name' && t.isStringLiteral(p.value)) {
name = p.value.value;
+ } else if (p.key.name === 'storyName' && t.isStringLiteral(p.value)) {
+ logger.warn(
+ `Unexpected usage of "storyName" in "${exportName}". Please use "name" instead.`
+ );
}
self._storyAnnotations[exportName][p.key.name] = p.value;
}
@@ -367,7 +371,7 @@ export class CsfFile {
// default export can come at any point in the file, so we do this post processing last
const entries = Object.entries(self._stories);
- self._meta.title = self._meta.title || this._defaultTitle;
+ self._meta.title = this._makeTitle(self._meta.title);
self._stories = entries.reduce((acc, [key, story]) => {
if (isExportStory(key, self._meta)) {
const id = toId(self._meta.id || self._meta.title, storyNameFromExport(key));
diff --git a/lib/docs-tools/package.json b/lib/docs-tools/package.json
index 0e37336050b0..d60973210e68 100644
--- a/lib/docs-tools/package.json
+++ b/lib/docs-tools/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/docs-tools",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"description": "Shared utility functions for frameworks to implement docs",
"keywords": [
"storybook"
@@ -42,7 +42,7 @@
"dependencies": {
"@babel/core": "^7.12.10",
"@storybook/csf": "0.0.2--canary.4566f4d.1",
- "@storybook/store": "6.5.0-beta.1",
+ "@storybook/store": "6.5.0-rc.1",
"core-js": "^3.8.2",
"doctrine": "^3.0.0",
"lodash": "^4.17.21",
@@ -55,6 +55,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/instrumenter/package.json b/lib/instrumenter/package.json
index af28a32a2550..a89866f7c19c 100644
--- a/lib/instrumenter/package.json
+++ b/lib/instrumenter/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/instrumenter",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"description": "",
"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-events": "6.5.0-beta.1",
+ "@storybook/addons": "6.5.0-rc.1",
+ "@storybook/client-logger": "6.5.0-rc.1",
+ "@storybook/core-events": "6.5.0-rc.1",
"core-js": "^3.8.2",
"global": "^4.4.0"
},
"publishConfig": {
"access": "public"
},
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/instrumenter/src/instrumenter.test.ts b/lib/instrumenter/src/instrumenter.test.ts
index 5f6064f5cbde..f0f97b573634 100644
--- a/lib/instrumenter/src/instrumenter.test.ts
+++ b/lib/instrumenter/src/instrumenter.test.ts
@@ -1,6 +1,7 @@
/* eslint-disable no-underscore-dangle */
import { addons, mockChannel } from '@storybook/addons';
+import { logger } from '@storybook/client-logger';
import {
FORCE_REMOUNT,
SET_CURRENT_STORY,
@@ -11,6 +12,8 @@ import global from 'global';
import { EVENTS, Instrumenter } from './instrumenter';
import type { Options } from './types';
+jest.mock('@storybook/client-logger');
+
const callSpy = jest.fn();
const syncSpy = jest.fn();
const forceRemountSpy = jest.fn();
@@ -39,6 +42,8 @@ let instrumenter: Instrumenter;
const instrument = >(obj: TObj, options: Options = {}) =>
instrumenter.instrument(obj, options);
+const tick = () => new Promise((resolve) => setTimeout(resolve, 0));
+
beforeEach(() => {
jest.useRealTimers();
callSpy.mockClear();
@@ -296,25 +301,40 @@ describe('Instrumenter', () => {
);
});
- it('catches thrown errors and returns the error', () => {
+ it('catches thrown errors and throws an ignoredException instead', () => {
const { fn } = instrument({
fn: () => {
throw new Error('Boom!');
},
});
- expect(fn()).toEqual(new Error('Boom!'));
- expect(() => setRenderPhase('played')).toThrow(new Error('Boom!'));
+ expect(fn).toThrow('ignoredException');
+ });
+
+ it('catches nested exceptions and throws an ignoredException instead', () => {
+ const { fn1, fn2 } = instrument({
+ fn1: (_: any) => {},
+ fn2: () => {
+ throw new Error('Boom!');
+ },
+ });
+ expect(() => fn1(fn2())).toThrow('ignoredException');
});
- it('forwards nested exceptions', () => {
+ it('bubbles child exceptions up to parent (in callback)', () => {
const { fn1, fn2 } = instrument({
- fn1: (...args: any) => {}, // doesn't forward args
+ fn1: jest.fn((callback: Function) => callback()),
fn2: () => {
throw new Error('Boom!');
},
});
- expect(fn1(fn2())).toEqual(new Error('Boom!'));
- expect(() => setRenderPhase('played')).toThrow(new Error('Boom!'));
+ expect(() =>
+ fn1(() => {
+ fn2();
+ })
+ ).toThrow('ignoredException');
+ expect(fn1).toHaveBeenCalled();
+ expect(logger.warn).toHaveBeenCalledWith(new Error('Boom!'));
+ expect((logger.warn as any).mock.calls[0][0].callId).toBe('kind--story [0] fn1 [0] fn2');
});
it("re-throws anything that isn't an error", () => {
@@ -357,6 +377,45 @@ describe('Instrumenter', () => {
describe('with intercept: true', () => {
const options = { intercept: true };
+ it('only includes intercepted calls in the log', async () => {
+ const fn = (callback?: Function) => callback && callback();
+ const { fn1, fn2 } = instrument({ fn1: fn, fn2: fn }, options);
+ const { fn3 } = instrument({ fn3: fn }, { intercept: false });
+ fn1();
+ fn2();
+ fn3();
+ await tick();
+ expect(syncSpy).toHaveBeenCalledWith(
+ expect.objectContaining({
+ logItems: [
+ { callId: 'kind--story [0] fn1', status: 'done' },
+ { callId: 'kind--story [1] fn2', status: 'done' },
+ ],
+ })
+ );
+ });
+
+ it('also includes child calls in the log', async () => {
+ const fn = (callback?: Function) => callback && callback();
+ const { fn1, fn2 } = instrument({ fn1: fn, fn2: fn }, options);
+ fn1(() => {
+ fn2();
+ });
+ await tick();
+ expect(syncSpy).toHaveBeenCalledWith(
+ expect.objectContaining({
+ logItems: [
+ { callId: 'kind--story [0] fn1', status: 'done' },
+ {
+ callId: 'kind--story [0] fn1 [0] fn2',
+ status: 'done',
+ parentId: 'kind--story [0] fn1',
+ },
+ ],
+ })
+ );
+ });
+
it('emits a call event with error data when the function throws', () => {
const { fn } = instrument(
{
@@ -374,35 +433,11 @@ describe('Instrumenter', () => {
name: 'Error',
message: 'Boom!',
stack: expect.stringContaining('Error: Boom!'),
+ callId: 'kind--story [0] fn',
},
})
);
});
-
- it('catches thrown errors and throws an ignoredException instead', () => {
- const { fn } = instrument(
- {
- fn: () => {
- throw new Error('Boom!');
- },
- },
- options
- );
- expect(fn).toThrow('ignoredException');
- });
-
- it('catches forwarded exceptions and throws an ignoredException instead', () => {
- const { fn1, fn2 } = instrument(
- {
- fn1: (_: any) => {},
- fn2: () => {
- throw new Error('Boom!');
- },
- },
- options
- );
- expect(() => fn1(fn2())).toThrow('ignoredException');
- });
});
describe('while debugging', () => {
@@ -443,12 +478,13 @@ describe('Instrumenter', () => {
});
it.skip('starts debugging at the first non-nested interceptable call', () => {
- const { fn } = instrument({ fn: jest.fn((...args: any) => args) }, { intercept: true });
- fn(fn(), fn()); // setup the dependencies
+ const fn = (...args) => args;
+ const { fn1, fn2, fn3 } = instrument({ fn1: fn, fn2: fn, fn3: fn }, { intercept: true });
+ fn3(fn1(), fn2()); // setup the dependencies
addons.getChannel().emit(EVENTS.START, { storyId });
- const a = fn('a');
- const b = fn('b');
- const c = fn(a, b);
+ const a = fn1('a');
+ const b = fn2('b');
+ const c = fn3(a, b);
expect(a).toEqual(['a']);
expect(b).toEqual(['b']);
expect(c).toEqual(expect.any(Promise));
@@ -476,13 +512,13 @@ describe('Instrumenter', () => {
expect(fn).toHaveBeenCalledTimes(0);
addons.getChannel().emit(EVENTS.NEXT, { storyId });
- await new Promise((resolve) => setTimeout(resolve, 0));
+ await tick();
expect(mockedInstrumentedFn).toHaveBeenCalledTimes(2);
expect(fn).toHaveBeenCalledTimes(1);
addons.getChannel().emit(EVENTS.END, { storyId });
- await new Promise((resolve) => setTimeout(resolve, 0));
+ await tick();
expect(mockedInstrumentedFn).toHaveBeenCalledTimes(3);
expect(fn).toHaveBeenCalledTimes(3);
diff --git a/lib/instrumenter/src/instrumenter.ts b/lib/instrumenter/src/instrumenter.ts
index 9e54071bab64..86b5f64cc4b1 100644
--- a/lib/instrumenter/src/instrumenter.ts
+++ b/lib/instrumenter/src/instrumenter.ts
@@ -1,7 +1,7 @@
/* eslint-disable no-underscore-dangle */
import { addons, Channel } from '@storybook/addons';
import type { StoryId } from '@storybook/addons';
-import { once } from '@storybook/client-logger';
+import { logger, once } from '@storybook/client-logger';
import {
FORCE_REMOUNT,
IGNORED_EXCEPTION,
@@ -10,7 +10,7 @@ import {
} from '@storybook/core-events';
import global from 'global';
-import { Call, CallRef, CallStates, State, Options, ControlStates, LogItem } from './types';
+import { Call, CallRef, CallStates, ControlStates, LogItem, Options, State } from './types';
export const EVENTS = {
CALL: 'instrumenter/call',
@@ -73,7 +73,6 @@ const getInitialState = (): State => ({
playUntil: undefined,
resolvers: {},
syncTimeout: undefined,
- forwardedException: undefined,
});
const getRetainedState = (state: State, isDebugging = false) => {
@@ -132,8 +131,11 @@ export class Instrumenter {
// Start with a clean slate before playing after a remount, and stop debugging when done.
this.channel.on(STORY_RENDER_PHASE_CHANGED, ({ storyId, newPhase }) => {
- const { isDebugging, forwardedException } = this.getState(storyId);
+ const { isDebugging } = this.getState(storyId);
this.setState(storyId, { renderPhase: newPhase });
+ if (newPhase === 'preparing' && isDebugging) {
+ resetState({ storyId });
+ }
if (newPhase === 'playing') {
resetState({ storyId, isDebugging });
}
@@ -142,10 +144,13 @@ export class Instrumenter {
isLocked: false,
isPlaying: false,
isDebugging: false,
- forwardedException: undefined,
});
- // Rethrow any unhandled forwarded exception so it doesn't go unnoticed.
- if (forwardedException) throw forwardedException;
+ }
+ if (newPhase === 'errored') {
+ this.setState(storyId, {
+ isLocked: false,
+ isPlaying: false,
+ });
}
});
@@ -172,7 +177,7 @@ export class Instrumenter {
playUntil ||
shadowCalls
.slice(0, firstRowIndex)
- .filter((call) => call.interceptable)
+ .filter((call) => call.interceptable && !call.parentId)
.slice(-1)[0]?.id,
};
});
@@ -182,12 +187,12 @@ export class Instrumenter {
};
const back = ({ storyId }: { storyId: string }) => {
- const { isDebugging } = this.getState(storyId);
- const log = this.getLog(storyId);
- const next = isDebugging
- ? log.findIndex(({ status }) => status === CallStates.WAITING)
- : log.length;
- start({ storyId, playUntil: log[next - 2]?.callId });
+ const log = this.getLog(storyId).filter((call) => !call.parentId);
+ const last = log.reduceRight((res, item, index) => {
+ if (res >= 0 || item.status === CallStates.WAITING) return res;
+ return index;
+ }, -1);
+ start({ storyId, playUntil: log[last - 1]?.callId });
};
const goto = ({ storyId, callId }: { storyId: string; callId: Call['id'] }) => {
@@ -269,8 +274,8 @@ export class Instrumenter {
seen.add((node as CallRef).__callId__);
}
});
- if (call.interceptable && !seen.has(call.id)) {
- acc.unshift({ callId: call.id, status: call.status });
+ if ((call.interceptable || call.exception) && !seen.has(call.id)) {
+ acc.unshift({ callId: call.id, status: call.status, parentId: call.parentId });
seen.add(call.id);
}
return acc;
@@ -333,7 +338,8 @@ export class Instrumenter {
const { path = [], intercept = false, retain = false } = options;
const interceptable = typeof intercept === 'function' ? intercept(method, path) : intercept;
const call: Call = { id, parentId, storyId, cursor, path, method, args, interceptable, retain };
- const result = (interceptable ? this.intercept : this.invoke).call(this, fn, call, options);
+ const interceptOrInvoke = interceptable && !parentId ? this.intercept : this.invoke;
+ const result = interceptOrInvoke.call(this, fn, call, options);
return this.instrument(result, { ...options, mutate: true, path: [{ __callId__: call.id }] });
}
@@ -370,25 +376,50 @@ export class Instrumenter {
// const { abortSignal } = global.window.__STORYBOOK_PREVIEW__ || {};
// if (abortSignal && abortSignal.aborted) throw IGNORED_EXCEPTION;
- const { callRefsByResult, forwardedException, renderPhase } = this.getState(call.storyId);
+ const { callRefsByResult, renderPhase } = this.getState(call.storyId);
- const info: Call = {
- ...call,
- // Map args that originate from a tracked function call to a call reference to enable nesting.
- // These values are often not fully serializable anyway (e.g. HTML elements).
- args: call.args.map((arg) => {
- if (callRefsByResult.has(arg)) {
- return callRefsByResult.get(arg);
- }
- if (arg instanceof global.window.HTMLElement) {
- const { prefix, localName, id, classList, innerText } = arg;
- const classNames = Array.from(classList);
- return { __element__: { prefix, localName, id, classNames, innerText } };
- }
- return arg;
- }),
+ // Map complex values to a JSON-serializable representation.
+ const serializeValues = (value: any): any => {
+ if (callRefsByResult.has(value)) {
+ return callRefsByResult.get(value);
+ }
+ if (value instanceof Array) {
+ return value.map(serializeValues);
+ }
+ if (value instanceof Date) {
+ return { __date__: { value: value.toISOString() } };
+ }
+ if (value instanceof Error) {
+ const { name, message, stack } = value;
+ return { __error__: { name, message, stack } };
+ }
+ if (value instanceof RegExp) {
+ const { flags, source } = value;
+ return { __regexp__: { flags, source } };
+ }
+ if (value instanceof global.window.HTMLElement) {
+ const { prefix, localName, id, classList, innerText } = value;
+ const classNames = Array.from(classList);
+ return { __element__: { prefix, localName, id, classNames, innerText } };
+ }
+ if (typeof value === 'function') {
+ return { __function__: { name: value.name } };
+ }
+ if (typeof value === 'symbol') {
+ return { __symbol__: { description: value.description } };
+ }
+ if (
+ typeof value === 'object' &&
+ value?.constructor?.name &&
+ value?.constructor?.name !== 'Object'
+ ) {
+ return { __class__: { name: value.constructor.name } };
+ }
+ return value;
};
+ const info: Call = { ...call, args: call.args.map(serializeValues) };
+
// Mark any ancestor calls as "chained upon" so we won't attempt to defer it later.
call.path.forEach((ref: any) => {
if (ref?.__callId__) {
@@ -398,10 +429,10 @@ export class Instrumenter {
}
});
- const handleException = (e: unknown) => {
+ const handleException = (e: any) => {
if (e instanceof Error) {
- const { name, message, stack } = e;
- const exception = { name, message, stack };
+ const { name, message, stack, callId = call.id } = e as Error & { callId: Call['id'] };
+ const exception = { name, message, stack, callId };
this.update({ ...info, status: CallStates.ERROR, exception });
// Always track errors to their originating call.
@@ -412,50 +443,56 @@ export class Instrumenter {
]),
}));
+ // Exceptions inside callbacks should bubble up to the parent call.
+ if (call.parentId) {
+ Object.defineProperty(e, 'callId', { value: call.id });
+ throw e;
+ }
+
// We need to throw to break out of the play function, but we don't want to trigger a redbox
// so we throw an ignoredException, which is caught and silently ignored by Storybook.
- if (call.interceptable && e !== alreadyCompletedException) {
+ if (e !== alreadyCompletedException) {
+ logger.warn(e);
throw IGNORED_EXCEPTION;
}
-
- // Non-interceptable calls need their exceptions forwarded to the next interceptable call.
- // In case no interceptable call picks it up, it'll get rethrown in the "completed" phase.
- this.setState(call.storyId, { forwardedException: e });
- return e;
}
throw e;
};
try {
- // An earlier, non-interceptable call might have forwarded an exception.
- if (forwardedException) {
- this.setState(call.storyId, { forwardedException: undefined });
- throw forwardedException;
- }
-
if (renderPhase === 'played' && !call.retain) {
throw alreadyCompletedException;
}
- const finalArgs = options.getArgs
+ // Some libraries override function args through the `getArgs` option.
+ const actualArgs = options.getArgs
? options.getArgs(call, this.getState(call.storyId))
: call.args;
- const result = fn(
- // Wrap any callback functions to provide a way to access their "parent" call.
- // This is picked up in the `track` function and used for call metadata.
- ...finalArgs.map((arg: any) => {
- if (typeof arg !== 'function' || Object.keys(arg).length) return arg;
- return (...args: any) => {
- const { cursor, parentId } = this.getState(call.storyId);
- this.setState(call.storyId, { cursor: 0, parentId: call.id });
- const restore = () => this.setState(call.storyId, { cursor, parentId });
- const res = arg(...args);
- if (res instanceof Promise) res.then(restore, restore);
- else restore();
- return res;
- };
- })
- );
+
+ // Wrap any callback functions to provide a way to access their "parent" call.
+ // This is picked up in the `track` function and used for call metadata.
+ const finalArgs = actualArgs.map((arg: any) => {
+ // We only want to wrap plain functions, not objects.
+ if (typeof arg !== 'function' || Object.keys(arg).length) return arg;
+
+ return (...args: any) => {
+ // Set the cursor and parentId for calls that happen inside the callback.
+ const { cursor, parentId } = this.getState(call.storyId);
+ this.setState(call.storyId, { cursor: 0, parentId: call.id });
+ const restore = () => this.setState(call.storyId, { cursor, parentId });
+
+ // Invoke the actual callback function.
+ const res = arg(...args);
+
+ // Reset cursor and parentId to their original values before we entered the callback.
+ if (res instanceof Promise) res.then(restore, restore);
+ else restore();
+
+ return res;
+ };
+ });
+
+ const result = fn(...finalArgs);
// Track the result so we can trace later uses of it back to the originating call.
// Primitive results (undefined, null, boolean, string, number, BigInt) are ignored.
@@ -510,6 +547,9 @@ export class Instrumenter {
sync(storyId: StoryId) {
const { isLocked, isPlaying } = this.getState(storyId);
const logItems: LogItem[] = this.getLog(storyId);
+ const pausedAt = logItems
+ .filter(({ parentId }) => !parentId)
+ .find((item) => item.status === CallStates.WAITING)?.callId;
const hasActive = logItems.some((item) => item.status === CallStates.ACTIVE);
if (debuggerDisabled || isLocked || hasActive || logItems.length === 0) {
@@ -528,7 +568,8 @@ export class Instrumenter {
next: isPlaying,
end: isPlaying,
};
- this.channel.emit(EVENTS.SYNC, { controlStates, logItems });
+
+ this.channel.emit(EVENTS.SYNC, { controlStates, logItems, pausedAt });
}
}
diff --git a/lib/instrumenter/src/types.ts b/lib/instrumenter/src/types.ts
index 48f17fdec0d1..e9cca7003547 100644
--- a/lib/instrumenter/src/types.ts
+++ b/lib/instrumenter/src/types.ts
@@ -11,7 +11,12 @@ export interface Call {
interceptable: boolean;
retain: boolean;
status?: CallStates.DONE | CallStates.ERROR | CallStates.ACTIVE | CallStates.WAITING;
- exception?: Error;
+ exception?: {
+ name: Error['name'];
+ message: Error['message'];
+ stack: Error['stack'];
+ callId: Call['id'];
+ };
}
export enum CallStates {
@@ -47,6 +52,7 @@ export interface ControlStates {
export interface LogItem {
callId: Call['id'];
status: Call['status'];
+ parentId?: Call['id'];
}
export interface Payload {
diff --git a/lib/manager-webpack4/package.json b/lib/manager-webpack4/package.json
index c778b625686b..e70f508ce3ec 100644
--- a/lib/manager-webpack4/package.json
+++ b/lib/manager-webpack4/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/manager-webpack4",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
@@ -45,12 +45,12 @@
"@babel/core": "^7.12.10",
"@babel/plugin-transform-template-literals": "^7.12.1",
"@babel/preset-react": "^7.12.10",
- "@storybook/addons": "6.5.0-beta.1",
- "@storybook/core-client": "6.5.0-beta.1",
- "@storybook/core-common": "6.5.0-beta.1",
- "@storybook/node-logger": "6.5.0-beta.1",
- "@storybook/theming": "6.5.0-beta.1",
- "@storybook/ui": "6.5.0-beta.1",
+ "@storybook/addons": "6.5.0-rc.1",
+ "@storybook/core-client": "6.5.0-rc.1",
+ "@storybook/core-common": "6.5.0-rc.1",
+ "@storybook/node-logger": "6.5.0-rc.1",
+ "@storybook/theming": "6.5.0-rc.1",
+ "@storybook/ui": "6.5.0-rc.1",
"@types/node": "^14.0.10 || ^16.0.0",
"@types/webpack": "^4.41.26",
"babel-loader": "^8.0.0",
@@ -69,7 +69,7 @@
"regenerator-runtime": "^0.13.7",
"resolve-from": "^5.0.0",
"style-loader": "^1.3.0",
- "telejson": "^5.3.3",
+ "telejson": "^6.0.8",
"terser-webpack-plugin": "^4.2.3",
"ts-dedent": "^2.0.0",
"url-loader": "^4.1.1",
@@ -96,6 +96,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/manager-webpack4/src/presets/babel-loader-manager.ts b/lib/manager-webpack4/src/presets/babel-loader-manager.ts
index 04ca8447de9d..72d68b591491 100644
--- a/lib/manager-webpack4/src/presets/babel-loader-manager.ts
+++ b/lib/manager-webpack4/src/presets/babel-loader-manager.ts
@@ -5,7 +5,7 @@ export const babelLoader = () => {
const { plugins, presets } = getStorybookBabelConfig();
return {
- test: /\.(mjs|tsx?|jsx?)$/,
+ test: /\.(cjs|mjs|tsx?|jsx?)$/,
use: [
{
loader: require.resolve('babel-loader'),
diff --git a/lib/manager-webpack4/src/presets/manager-preset.ts b/lib/manager-webpack4/src/presets/manager-preset.ts
index 69fd3620d3e6..b61203d48999 100644
--- a/lib/manager-webpack4/src/presets/manager-preset.ts
+++ b/lib/manager-webpack4/src/presets/manager-preset.ts
@@ -87,6 +87,7 @@ export async function managerWebpack(
}) as any as WebpackPluginInstance)
: null,
new HtmlWebpackPlugin({
+ title: 'Storybook loading…',
filename: `index.html`,
// FIXME: `none` isn't a known option
chunksSortMode: 'none' as any,
diff --git a/lib/manager-webpack4/typings.d.ts b/lib/manager-webpack4/typings.d.ts
index 894b889ada8f..6c5e278ef73f 100644
--- a/lib/manager-webpack4/typings.d.ts
+++ b/lib/manager-webpack4/typings.d.ts
@@ -7,5 +7,5 @@ declare module '@storybook/theming/paths';
declare module '@storybook/ui/paths';
declare module 'better-opn';
declare module 'open';
-declare module 'x-default-browser';
+declare module '@aw-web-design/x-default-browser';
declare module '@storybook/ui';
diff --git a/lib/manager-webpack5/package.json b/lib/manager-webpack5/package.json
index 870ba09335a0..d7265dbdbc28 100644
--- a/lib/manager-webpack5/package.json
+++ b/lib/manager-webpack5/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/manager-webpack5",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
@@ -45,12 +45,12 @@
"@babel/core": "^7.12.10",
"@babel/plugin-transform-template-literals": "^7.12.1",
"@babel/preset-react": "^7.12.10",
- "@storybook/addons": "6.5.0-beta.1",
- "@storybook/core-client": "6.5.0-beta.1",
- "@storybook/core-common": "6.5.0-beta.1",
- "@storybook/node-logger": "6.5.0-beta.1",
- "@storybook/theming": "6.5.0-beta.1",
- "@storybook/ui": "6.5.0-beta.1",
+ "@storybook/addons": "6.5.0-rc.1",
+ "@storybook/core-client": "6.5.0-rc.1",
+ "@storybook/core-common": "6.5.0-rc.1",
+ "@storybook/node-logger": "6.5.0-rc.1",
+ "@storybook/theming": "6.5.0-rc.1",
+ "@storybook/ui": "6.5.0-rc.1",
"@types/node": "^14.0.10 || ^16.0.0",
"babel-loader": "^8.0.0",
"case-sensitive-paths-webpack-plugin": "^2.3.0",
@@ -67,7 +67,7 @@
"regenerator-runtime": "^0.13.7",
"resolve-from": "^5.0.0",
"style-loader": "^2.0.0",
- "telejson": "^5.3.3",
+ "telejson": "^6.0.8",
"terser-webpack-plugin": "^5.0.3",
"ts-dedent": "^2.0.0",
"util-deprecate": "^1.0.2",
@@ -93,6 +93,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/manager-webpack5/src/presets/babel-loader-manager.ts b/lib/manager-webpack5/src/presets/babel-loader-manager.ts
index 04ca8447de9d..72d68b591491 100644
--- a/lib/manager-webpack5/src/presets/babel-loader-manager.ts
+++ b/lib/manager-webpack5/src/presets/babel-loader-manager.ts
@@ -5,7 +5,7 @@ export const babelLoader = () => {
const { plugins, presets } = getStorybookBabelConfig();
return {
- test: /\.(mjs|tsx?|jsx?)$/,
+ test: /\.(cjs|mjs|tsx?|jsx?)$/,
use: [
{
loader: require.resolve('babel-loader'),
diff --git a/lib/manager-webpack5/src/presets/manager-preset.ts b/lib/manager-webpack5/src/presets/manager-preset.ts
index 1a332ea42a65..130900c3cf68 100644
--- a/lib/manager-webpack5/src/presets/manager-preset.ts
+++ b/lib/manager-webpack5/src/presets/manager-preset.ts
@@ -86,6 +86,7 @@ export async function managerWebpack(
}) as any as WebpackPluginInstance)
: null,
new HtmlWebpackPlugin({
+ title: 'Storybook loading…',
filename: `index.html`,
// FIXME: `none` isn't a known option
chunksSortMode: 'none' as any,
diff --git a/lib/manager-webpack5/typings.d.ts b/lib/manager-webpack5/typings.d.ts
index 70fcabe6c3bb..febd3228fce6 100644
--- a/lib/manager-webpack5/typings.d.ts
+++ b/lib/manager-webpack5/typings.d.ts
@@ -6,5 +6,5 @@ declare module '@storybook/theming/paths';
declare module '@storybook/ui/paths';
declare module 'better-opn';
declare module 'open';
-declare module 'x-default-browser';
+declare module '@aw-web-design/x-default-browser';
declare module '@storybook/ui';
diff --git a/lib/node-logger/package.json b/lib/node-logger/package.json
index 8c3fc116d0ea..c4ce1ec96912 100644
--- a/lib/node-logger/package.json
+++ b/lib/node-logger/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/node-logger",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"description": "",
"keywords": [
"storybook"
@@ -52,6 +52,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/postinstall/package.json b/lib/postinstall/package.json
index b59f8f1ec4e9..ea45274e4a17 100644
--- a/lib/postinstall/package.json
+++ b/lib/postinstall/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/postinstall",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"description": "Storybook addons postinstall utilities",
"keywords": [
"api",
@@ -51,6 +51,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/preview-web/package.json b/lib/preview-web/package.json
index 80bea2b31ba7..41fc64a92ce7 100644
--- a/lib/preview-web/package.json
+++ b/lib/preview-web/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preview-web",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"description": "",
"keywords": [
"storybook"
@@ -40,12 +40,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "6.5.0-beta.1",
- "@storybook/channel-postmessage": "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-rc.1",
+ "@storybook/channel-postmessage": "6.5.0-rc.1",
+ "@storybook/client-logger": "6.5.0-rc.1",
+ "@storybook/core-events": "6.5.0-rc.1",
"@storybook/csf": "0.0.2--canary.4566f4d.1",
- "@storybook/store": "6.5.0-beta.1",
+ "@storybook/store": "6.5.0-rc.1",
"ansi-to-html": "^0.6.11",
"core-js": "^3.8.2",
"global": "^4.4.0",
@@ -64,6 +64,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/preview-web/src/Preview.tsx b/lib/preview-web/src/Preview.tsx
index fb57fc374a70..a206506774f8 100644
--- a/lib/preview-web/src/Preview.tsx
+++ b/lib/preview-web/src/Preview.tsx
@@ -1,7 +1,18 @@
import dedent from 'ts-dedent';
import global from 'global';
import { SynchronousPromise } from 'synchronous-promise';
-import Events from '@storybook/core-events';
+import {
+ CONFIG_ERROR,
+ FORCE_REMOUNT,
+ FORCE_RE_RENDER,
+ GLOBALS_UPDATED,
+ RESET_STORY_ARGS,
+ SET_GLOBALS,
+ STORY_ARGS_UPDATED,
+ STORY_INDEX_INVALIDATED,
+ UPDATE_GLOBALS,
+ UPDATE_STORY_ARGS,
+} from '@storybook/core-events';
import { logger } from '@storybook/client-logger';
import { addons, Channel } from '@storybook/addons';
import { AnyFramework, StoryId, ProjectAnnotations, Args, Globals } from '@storybook/csf';
@@ -12,6 +23,7 @@ import {
StoryIndex,
PromiseLike,
WebProjectAnnotations,
+ RenderToDOM,
} from '@storybook/store';
import { StoryRender } from './StoryRender';
@@ -34,7 +46,7 @@ export class Preview {
importFn?: ModuleImportFn;
- renderToDOM: WebProjectAnnotations['renderToDOM'];
+ renderToDOM: RenderToDOM;
storyRenders: StoryRender[] = [];
@@ -80,13 +92,13 @@ export class Preview {
}
setupListeners() {
- this.serverChannel?.on(Events.STORY_INDEX_INVALIDATED, this.onStoryIndexChanged.bind(this));
+ this.serverChannel?.on(STORY_INDEX_INVALIDATED, this.onStoryIndexChanged.bind(this));
- this.channel.on(Events.UPDATE_GLOBALS, this.onUpdateGlobals.bind(this));
- this.channel.on(Events.UPDATE_STORY_ARGS, this.onUpdateArgs.bind(this));
- this.channel.on(Events.RESET_STORY_ARGS, this.onResetArgs.bind(this));
- this.channel.on(Events.FORCE_RE_RENDER, this.onForceReRender.bind(this));
- this.channel.on(Events.FORCE_REMOUNT, this.onForceRemount.bind(this));
+ this.channel.on(UPDATE_GLOBALS, this.onUpdateGlobals.bind(this));
+ this.channel.on(UPDATE_STORY_ARGS, this.onUpdateArgs.bind(this));
+ this.channel.on(RESET_STORY_ARGS, this.onResetArgs.bind(this));
+ this.channel.on(FORCE_RE_RENDER, this.onForceReRender.bind(this));
+ this.channel.on(FORCE_REMOUNT, this.onForceRemount.bind(this));
}
getProjectAnnotationsOrRenderError(
@@ -144,7 +156,7 @@ export class Preview {
}
emitGlobals() {
- this.channel.emit(Events.SET_GLOBALS, {
+ this.channel.emit(SET_GLOBALS, {
globals: this.storyStore.globals.get() || {},
globalTypes: this.storyStore.projectAnnotations.globalTypes || {},
});
@@ -227,7 +239,7 @@ export class Preview {
await Promise.all(this.storyRenders.map((r) => r.rerender()));
- this.channel.emit(Events.GLOBALS_UPDATED, {
+ this.channel.emit(GLOBALS_UPDATED, {
globals: this.storyStore.globals.get(),
initialGlobals: this.storyStore.globals.initialGlobals,
});
@@ -238,7 +250,7 @@ export class Preview {
await Promise.all(this.storyRenders.filter((r) => r.id === storyId).map((r) => r.rerender()));
- this.channel.emit(Events.STORY_ARGS_UPDATED, {
+ this.channel.emit(STORY_ARGS_UPDATED, {
storyId,
args: this.storyStore.args.get(storyId),
});
@@ -252,7 +264,13 @@ export class Preview {
const render = this.storyRenders.find((r) => r.id === storyId);
const story = render?.story || (await this.storyStore.loadStory({ storyId }));
- const argNamesToReset = argNames || Object.keys(this.storyStore.args.get(storyId));
+ const argNamesToReset = argNames || [
+ ...new Set([
+ ...Object.keys(story.initialArgs),
+ ...Object.keys(this.storyStore.args.get(storyId)),
+ ]),
+ ];
+
const updatedArgs = argNamesToReset.reduce((acc, argName) => {
acc[argName] = story.initialArgs[argName];
return acc;
@@ -338,6 +356,6 @@ export class Preview {
this.previewEntryError = err;
logger.error(reason);
logger.error(err);
- this.channel.emit(Events.CONFIG_ERROR, err);
+ this.channel.emit(CONFIG_ERROR, err);
}
}
diff --git a/lib/preview-web/src/PreviewWeb.integration.test.ts b/lib/preview-web/src/PreviewWeb.integration.test.ts
index 2e452c167c45..34b7434b8b26 100644
--- a/lib/preview-web/src/PreviewWeb.integration.test.ts
+++ b/lib/preview-web/src/PreviewWeb.integration.test.ts
@@ -76,8 +76,9 @@ describe('PreviewWeb', () => {
const preview = new PreviewWeb();
const docsRoot = window.document.createElement('div');
- // @ts-ignore
- preview.view.prepareForDocs.mockReturnValue(docsRoot);
+ (
+ preview.view.prepareForDocs as any as jest.Mock
+ ).mockReturnValue(docsRoot);
componentOneExports.default.parameters.docs.container.mockImplementationOnce(() =>
React.createElement('div', {}, 'INSIDE')
);
diff --git a/lib/preview-web/src/PreviewWeb.mockdata.ts b/lib/preview-web/src/PreviewWeb.mockdata.ts
index d33563686c1c..2bca04fe2ac2 100644
--- a/lib/preview-web/src/PreviewWeb.mockdata.ts
+++ b/lib/preview-web/src/PreviewWeb.mockdata.ts
@@ -1,6 +1,13 @@
import { EventEmitter } from 'events';
-import Events from '@storybook/core-events';
-import { StoryIndex } from '@storybook/store';
+import {
+ DOCS_RENDERED,
+ STORY_ERRORED,
+ STORY_MISSING,
+ STORY_RENDERED,
+ STORY_RENDER_PHASE_CHANGED,
+ STORY_THREW_EXCEPTION,
+} from '@storybook/core-events';
+import { StoryIndex, TeardownRenderToDOM } from '@storybook/store';
import { RenderPhase } from './PreviewWeb';
export const componentOneExports = {
@@ -25,12 +32,13 @@ export const importFn = jest.fn(async (path) => {
return path === './src/ComponentOne.stories.js' ? componentOneExports : componentTwoExports;
});
+export const teardownRenderToDOM: jest.Mock = jest.fn();
export const projectAnnotations = {
globals: { a: 'b' },
globalTypes: {},
decorators: [jest.fn((s) => s())],
render: jest.fn(),
- renderToDOM: jest.fn(),
+ renderToDOM: jest.fn().mockReturnValue(teardownRenderToDOM),
};
export const getProjectAnnotations = () => projectAnnotations;
@@ -99,15 +107,15 @@ export const waitForEvents = (
// the async parts, so we need to listen for the "done" events
export const waitForRender = () =>
waitForEvents([
- Events.STORY_RENDERED,
- Events.DOCS_RENDERED,
- Events.STORY_THREW_EXCEPTION,
- Events.STORY_ERRORED,
- Events.STORY_MISSING,
+ STORY_RENDERED,
+ DOCS_RENDERED,
+ STORY_THREW_EXCEPTION,
+ STORY_ERRORED,
+ STORY_MISSING,
]);
export const waitForRenderPhase = (phase: RenderPhase) =>
- waitForEvents([Events.STORY_RENDER_PHASE_CHANGED], ({ newPhase }) => newPhase === phase);
+ waitForEvents([STORY_RENDER_PHASE_CHANGED], ({ newPhase }) => newPhase === phase);
// A little trick to ensure that we always call the real `setTimeout` even when timers are mocked
const realSetTimeout = setTimeout;
diff --git a/lib/preview-web/src/PreviewWeb.test.ts b/lib/preview-web/src/PreviewWeb.test.ts
index dcb051002edd..4620b661ebe5 100644
--- a/lib/preview-web/src/PreviewWeb.test.ts
+++ b/lib/preview-web/src/PreviewWeb.test.ts
@@ -1,7 +1,30 @@
import global from 'global';
import * as ReactDOM from 'react-dom';
import merge from 'lodash/merge';
-import Events, { IGNORED_EXCEPTION } from '@storybook/core-events';
+import {
+ CONFIG_ERROR,
+ CURRENT_STORY_WAS_SET,
+ DOCS_RENDERED,
+ FORCE_REMOUNT,
+ FORCE_RE_RENDER,
+ GLOBALS_UPDATED,
+ IGNORED_EXCEPTION,
+ PREVIEW_KEYDOWN,
+ RESET_STORY_ARGS,
+ SET_CURRENT_STORY,
+ SET_GLOBALS,
+ STORY_ARGS_UPDATED,
+ STORY_CHANGED,
+ STORY_ERRORED,
+ STORY_MISSING,
+ STORY_PREPARED,
+ STORY_RENDERED,
+ STORY_SPECIFIED,
+ STORY_THREW_EXCEPTION,
+ STORY_UNCHANGED,
+ UPDATE_GLOBALS,
+ UPDATE_STORY_ARGS,
+} from '@storybook/core-events';
import { logger } from '@storybook/client-logger';
import { addons, mockChannel as createMockChannel } from '@storybook/addons';
import type { AnyFramework } from '@storybook/csf';
@@ -21,6 +44,7 @@ import {
waitForRender,
waitForQuiescence,
waitForRenderPhase,
+ teardownRenderToDOM,
} from './PreviewWeb.mockdata';
jest.mock('./WebView');
@@ -97,13 +121,14 @@ beforeEach(() => {
componentOneExports.default.loaders[0].mockReset().mockImplementation(async () => ({ l: 7 }));
componentOneExports.default.parameters.docs.container.mockClear();
componentOneExports.a.play.mockReset();
- projectAnnotations.renderToDOM.mockReset();
+ teardownRenderToDOM.mockReset();
+ projectAnnotations.renderToDOM.mockReset().mockReturnValue(teardownRenderToDOM);
projectAnnotations.render.mockClear();
projectAnnotations.decorators[0].mockClear();
- // @ts-ignore
- ReactDOM.render.mockReset().mockImplementation((_: any, _2: any, cb: () => any) => cb());
- // @ts-ignore
- logger.warn.mockClear();
+ (ReactDOM.render as any as jest.Mock)
+ .mockReset()
+ .mockImplementation((_: any, _2: any, cb: () => any) => cb());
+ (logger.warn as jest.Mock).mockClear();
mockStoryIndex.mockReset().mockReturnValue(storyIndex);
addons.setChannel(mockChannel as any);
@@ -126,7 +151,7 @@ describe('PreviewWeb', () => {
).rejects.toThrow(err);
expect(preview.view.showErrorDisplay).toHaveBeenCalled();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.CONFIG_ERROR, err);
+ expect(mockChannel.emit).toHaveBeenCalledWith(CONFIG_ERROR, err);
});
it('shows an error if the stories.json endpoint 500s', async () => {
@@ -139,7 +164,7 @@ describe('PreviewWeb', () => {
);
expect(preview.view.showErrorDisplay).toHaveBeenCalled();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.CONFIG_ERROR, expect.any(Error));
+ expect(mockChannel.emit).toHaveBeenCalledWith(CONFIG_ERROR, expect.any(Error));
});
it('sets globals from the URL', async () => {
@@ -153,7 +178,7 @@ describe('PreviewWeb', () => {
it('emits the SET_GLOBALS event', async () => {
await createAndRenderPreview();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.SET_GLOBALS, {
+ expect(mockChannel.emit).toHaveBeenCalledWith(SET_GLOBALS, {
globals: { a: 'b' },
globalTypes: {},
});
@@ -162,7 +187,7 @@ describe('PreviewWeb', () => {
it('SET_GLOBALS sets globals and types even when undefined', async () => {
await createAndRenderPreview({ getProjectAnnotations: () => ({ renderToDOM: jest.fn() }) });
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.SET_GLOBALS, {
+ expect(mockChannel.emit).toHaveBeenCalledWith(SET_GLOBALS, {
globals: {},
globalTypes: {},
});
@@ -173,7 +198,7 @@ describe('PreviewWeb', () => {
await createAndRenderPreview();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.SET_GLOBALS, {
+ expect(mockChannel.emit).toHaveBeenCalledWith(SET_GLOBALS, {
globals: { a: 'c' },
globalTypes: {},
});
@@ -193,7 +218,7 @@ describe('PreviewWeb', () => {
await createAndRenderPreview();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_ARGS_UPDATED, {
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_ARGS_UPDATED, {
storyId: 'component-one--a',
args: { foo: 'url' },
});
@@ -234,7 +259,7 @@ describe('PreviewWeb', () => {
await createAndRenderPreview();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_SPECIFIED, {
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_SPECIFIED, {
storyId: 'component-one--a',
viewMode: 'story',
});
@@ -245,7 +270,7 @@ describe('PreviewWeb', () => {
await createAndRenderPreview();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.CURRENT_STORY_WAS_SET, {
+ expect(mockChannel.emit).toHaveBeenCalledWith(CURRENT_STORY_WAS_SET, {
storyId: 'component-one--a',
viewMode: 'story',
});
@@ -258,7 +283,7 @@ describe('PreviewWeb', () => {
const preview = await createAndRenderPreview();
expect(preview.view.showErrorDisplay).toHaveBeenCalled();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_MISSING, 'random');
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_MISSING, 'random');
});
it('tries again with a specifier if CSF file changes', async () => {
@@ -267,7 +292,7 @@ describe('PreviewWeb', () => {
const preview = await createAndRenderPreview();
expect(preview.view.showErrorDisplay).toHaveBeenCalled();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_MISSING, 'component-one--d');
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_MISSING, 'component-one--d');
mockChannel.emit.mockClear();
const newComponentOneExports = merge({}, componentOneExports, {
@@ -295,7 +320,7 @@ describe('PreviewWeb', () => {
});
await waitForRender();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_SPECIFIED, {
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_SPECIFIED, {
storyId: 'component-one--d',
viewMode: 'story',
});
@@ -311,9 +336,9 @@ describe('PreviewWeb', () => {
const preview = await createAndRenderPreview();
expect(preview.view.showErrorDisplay).toHaveBeenCalled();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_MISSING, 'component-one--d');
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_MISSING, 'component-one--d');
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--b',
viewMode: 'story',
});
@@ -343,7 +368,7 @@ describe('PreviewWeb', () => {
},
},
});
- expect(mockChannel.emit).not.toHaveBeenCalledWith(Events.STORY_SPECIFIED, {
+ expect(mockChannel.emit).not.toHaveBeenCalledWith(STORY_SPECIFIED, {
storyId: 'component-one--d',
viewMode: 'story',
});
@@ -355,7 +380,7 @@ describe('PreviewWeb', () => {
const preview = await createAndRenderPreview();
expect(preview.view.showNoPreview).toHaveBeenCalled();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_MISSING);
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_MISSING);
});
describe('in story viewMode', () => {
@@ -375,7 +400,7 @@ describe('PreviewWeb', () => {
document.location.search = '?id=component-one--a';
await createAndRenderPreview();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_PREPARED, {
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_PREPARED, {
id: 'component-one--a',
parameters: {
__isArgsStory: false,
@@ -441,20 +466,20 @@ describe('PreviewWeb', () => {
document.location.search = '?id=component-one--a';
const preview = await createAndRenderPreview();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_THREW_EXCEPTION, error);
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_THREW_EXCEPTION, error);
expect(preview.view.showErrorDisplay).toHaveBeenCalledWith(error);
});
it('renders exception if renderToDOM throws', async () => {
const error = new Error('error');
- projectAnnotations.renderToDOM.mockImplementationOnce(() => {
+ projectAnnotations.renderToDOM.mockImplementation(() => {
throw error;
});
document.location.search = '?id=component-one--a';
const preview = await createAndRenderPreview();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_THREW_EXCEPTION, error);
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_THREW_EXCEPTION, error);
expect(preview.view.showErrorDisplay).toHaveBeenCalledWith(error);
});
@@ -490,20 +515,18 @@ describe('PreviewWeb', () => {
document.location.search = '?id=component-one--a';
const preview = await createAndRenderPreview();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_THREW_EXCEPTION, error);
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_THREW_EXCEPTION, error);
expect(preview.view.showErrorDisplay).toHaveBeenCalledWith(error);
});
it('renders error if the story calls showError', async () => {
const error = { title: 'title', description: 'description' };
- projectAnnotations.renderToDOM.mockImplementationOnce((context) =>
- context.showError(error)
- );
+ projectAnnotations.renderToDOM.mockImplementation((context) => context.showError(error));
document.location.search = '?id=component-one--a';
const preview = await createAndRenderPreview();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_ERRORED, error);
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_ERRORED, error);
expect(preview.view.showErrorDisplay).toHaveBeenCalledWith({
message: error.title,
stack: error.description,
@@ -512,14 +535,14 @@ describe('PreviewWeb', () => {
it('renders exception if the story calls showException', async () => {
const error = new Error('error');
- projectAnnotations.renderToDOM.mockImplementationOnce((context) =>
+ projectAnnotations.renderToDOM.mockImplementation((context) =>
context.showException(error)
);
document.location.search = '?id=component-one--a';
const preview = await createAndRenderPreview();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_THREW_EXCEPTION, error);
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_THREW_EXCEPTION, error);
expect(preview.view.showErrorDisplay).toHaveBeenCalledWith(error);
});
@@ -534,12 +557,12 @@ describe('PreviewWeb', () => {
document.location.search = '?id=component-one--a';
await createAndRenderPreview();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-one--a');
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-one--a');
});
it('does not show error display if the render function throws IGNORED_EXCEPTION', async () => {
document.location.search = '?id=component-one--a';
- projectAnnotations.renderToDOM.mockImplementationOnce(() => {
+ projectAnnotations.renderToDOM.mockImplementation(() => {
throw IGNORED_EXCEPTION;
});
@@ -548,10 +571,7 @@ describe('PreviewWeb', () => {
await waitForRender();
- expect(mockChannel.emit).toHaveBeenCalledWith(
- Events.STORY_THREW_EXCEPTION,
- IGNORED_EXCEPTION
- );
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_THREW_EXCEPTION, IGNORED_EXCEPTION);
expect(preview.view.showErrorDisplay).not.toHaveBeenCalled();
});
});
@@ -568,7 +588,7 @@ describe('PreviewWeb', () => {
document.location.search = '?id=component-one--a&viewMode=docs';
await createAndRenderPreview();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_PREPARED, {
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_PREPARED, {
id: 'component-one--a',
parameters: {
__isArgsStory: false,
@@ -607,7 +627,7 @@ describe('PreviewWeb', () => {
await createAndRenderPreview();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.DOCS_RENDERED, 'component-one--a');
+ expect(mockChannel.emit).toHaveBeenCalledWith(DOCS_RENDERED, 'component-one--a');
});
});
});
@@ -617,10 +637,10 @@ describe('PreviewWeb', () => {
document.location.search = '?id=component-one--a';
await createAndRenderPreview();
- emitter.emit(Events.UPDATE_GLOBALS, { globals: { foo: 'bar' } });
+ emitter.emit(UPDATE_GLOBALS, { globals: { foo: 'bar' } });
- await waitForEvents([Events.GLOBALS_UPDATED]);
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.GLOBALS_UPDATED, {
+ await waitForEvents([GLOBALS_UPDATED]);
+ expect(mockChannel.emit).toHaveBeenCalledWith(GLOBALS_UPDATED, {
globals: { a: 'b', foo: 'bar' },
initialGlobals: { a: 'b' },
});
@@ -630,7 +650,7 @@ describe('PreviewWeb', () => {
document.location.search = '?id=component-one--a';
const preview = await createAndRenderPreview();
- emitter.emit(Events.UPDATE_GLOBALS, { globals: { foo: 'bar' } });
+ emitter.emit(UPDATE_GLOBALS, { globals: { foo: 'bar' } });
expect(preview.storyStore.globals.get()).toEqual({ a: 'b', foo: 'bar' });
});
@@ -641,7 +661,7 @@ describe('PreviewWeb', () => {
mockChannel.emit.mockClear();
projectAnnotations.renderToDOM.mockClear();
- emitter.emit(Events.UPDATE_GLOBALS, { globals: { foo: 'bar' } });
+ emitter.emit(UPDATE_GLOBALS, { globals: { foo: 'bar' } });
await waitForRender();
expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
@@ -660,10 +680,10 @@ describe('PreviewWeb', () => {
await createAndRenderPreview();
mockChannel.emit.mockClear();
- emitter.emit(Events.UPDATE_GLOBALS, { globals: { foo: 'bar' } });
+ emitter.emit(UPDATE_GLOBALS, { globals: { foo: 'bar' } });
await waitForRender();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-one--a');
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-one--a');
});
describe('in docs mode', () => {
@@ -673,7 +693,7 @@ describe('PreviewWeb', () => {
await createAndRenderPreview();
mockChannel.emit.mockClear();
- emitter.emit(Events.UPDATE_GLOBALS, { globals: { foo: 'bar' } });
+ emitter.emit(UPDATE_GLOBALS, { globals: { foo: 'bar' } });
await waitForRender();
expect(ReactDOM.render).toHaveBeenCalledTimes(2);
@@ -686,13 +706,13 @@ describe('PreviewWeb', () => {
document.location.search = '?id=component-one--a';
await createAndRenderPreview();
- emitter.emit(Events.UPDATE_STORY_ARGS, {
+ emitter.emit(UPDATE_STORY_ARGS, {
storyId: 'component-one--a',
updatedArgs: { new: 'arg' },
});
- await waitForEvents([Events.STORY_ARGS_UPDATED]);
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_ARGS_UPDATED, {
+ await waitForEvents([STORY_ARGS_UPDATED]);
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_ARGS_UPDATED, {
storyId: 'component-one--a',
args: { foo: 'a', new: 'arg' },
});
@@ -702,7 +722,7 @@ describe('PreviewWeb', () => {
document.location.search = '?id=component-one--a';
const preview = await createAndRenderPreview();
- emitter.emit(Events.UPDATE_STORY_ARGS, {
+ emitter.emit(UPDATE_STORY_ARGS, {
storyId: 'component-one--a',
updatedArgs: { new: 'arg' },
});
@@ -719,7 +739,7 @@ describe('PreviewWeb', () => {
mockChannel.emit.mockClear();
projectAnnotations.renderToDOM.mockClear();
- emitter.emit(Events.UPDATE_STORY_ARGS, {
+ emitter.emit(UPDATE_STORY_ARGS, {
storyId: 'component-one--a',
updatedArgs: { new: 'arg' },
});
@@ -742,13 +762,13 @@ describe('PreviewWeb', () => {
await createAndRenderPreview();
mockChannel.emit.mockClear();
- emitter.emit(Events.UPDATE_STORY_ARGS, {
+ emitter.emit(UPDATE_STORY_ARGS, {
storyId: 'component-one--a',
updatedArgs: { new: 'arg' },
});
await waitForRender();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-one--a');
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-one--a');
});
describe('while story is still rendering', () => {
@@ -768,7 +788,7 @@ describe('PreviewWeb', () => {
);
componentOneExports.default.loaders[0].mockClear();
- emitter.emit(Events.UPDATE_STORY_ARGS, {
+ emitter.emit(UPDATE_STORY_ARGS, {
storyId: 'component-one--a',
updatedArgs: { new: 'arg' },
});
@@ -817,12 +837,12 @@ describe('PreviewWeb', () => {
const [gate, openGate] = createGate();
document.location.search = '?id=component-one--a';
- projectAnnotations.renderToDOM.mockImplementationOnce(async () => gate);
+ projectAnnotations.renderToDOM.mockImplementation(async () => gate);
await new PreviewWeb().initialize({ importFn, getProjectAnnotations });
await waitForRenderPhase('rendering');
- emitter.emit(Events.UPDATE_STORY_ARGS, {
+ emitter.emit(UPDATE_STORY_ARGS, {
storyId: 'component-one--a',
updatedArgs: { new: 'arg' },
});
@@ -856,8 +876,8 @@ describe('PreviewWeb', () => {
it('works if it is called directly from inside non async renderToDOM', async () => {
document.location.search = '?id=component-one--a';
- projectAnnotations.renderToDOM.mockImplementationOnce(() => {
- emitter.emit(Events.UPDATE_STORY_ARGS, {
+ projectAnnotations.renderToDOM.mockImplementation(() => {
+ emitter.emit(UPDATE_STORY_ARGS, {
storyId: 'component-one--a',
updatedArgs: { new: 'arg' },
});
@@ -892,7 +912,7 @@ describe('PreviewWeb', () => {
componentOneExports.a.play.mockImplementationOnce(async () => gate);
const renderToDOMCalled = new Promise((resolve) => {
- projectAnnotations.renderToDOM.mockImplementationOnce(() => {
+ projectAnnotations.renderToDOM.mockImplementation(() => {
resolve(null);
});
});
@@ -914,7 +934,7 @@ describe('PreviewWeb', () => {
undefined // this is coming from view.prepareForStory, not super important
);
- emitter.emit(Events.UPDATE_STORY_ARGS, {
+ emitter.emit(UPDATE_STORY_ARGS, {
storyId: 'component-one--a',
updatedArgs: { new: 'arg' },
});
@@ -947,7 +967,7 @@ describe('PreviewWeb', () => {
(ReactDOM.render as jest.MockedFunction).mockClear();
mockChannel.emit.mockClear();
- emitter.emit(Events.UPDATE_STORY_ARGS, {
+ emitter.emit(UPDATE_STORY_ARGS, {
storyId: 'component-one--a',
updatedArgs: { new: 'arg' },
});
@@ -971,11 +991,11 @@ describe('PreviewWeb', () => {
(ReactDOM.render as jest.MockedFunction).mockClear();
mockChannel.emit.mockClear();
- emitter.emit(Events.UPDATE_STORY_ARGS, {
+ emitter.emit(UPDATE_STORY_ARGS, {
storyId: 'component-one--a',
updatedArgs: { new: 'arg' },
});
- await waitForEvents([Events.STORY_ARGS_UPDATED]);
+ await waitForEvents([STORY_ARGS_UPDATED]);
expect(ReactDOM.render).not.toHaveBeenCalled();
});
@@ -1003,7 +1023,7 @@ describe('PreviewWeb', () => {
(ReactDOM.render as jest.MockedFunction).mockClear();
mockChannel.emit.mockClear();
- emitter.emit(Events.UPDATE_STORY_ARGS, {
+ emitter.emit(UPDATE_STORY_ARGS, {
storyId: 'component-one--a',
updatedArgs: { new: 'arg' },
});
@@ -1040,26 +1060,26 @@ describe('PreviewWeb', () => {
await createAndRenderPreview();
mockChannel.emit.mockClear();
- emitter.emit(Events.UPDATE_STORY_ARGS, {
+ emitter.emit(UPDATE_STORY_ARGS, {
storyId: 'component-one--a',
updatedArgs: { foo: 'new' },
});
- await waitForEvents([Events.STORY_ARGS_UPDATED]);
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_ARGS_UPDATED, {
+ await waitForEvents([STORY_ARGS_UPDATED]);
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_ARGS_UPDATED, {
storyId: 'component-one--a',
args: { foo: 'new' },
});
mockChannel.emit.mockClear();
- emitter.emit(Events.RESET_STORY_ARGS, {
+ emitter.emit(RESET_STORY_ARGS, {
storyId: 'component-one--a',
argNames: ['foo'],
});
- await waitForEvents([Events.STORY_ARGS_UPDATED]);
+ await waitForEvents([STORY_ARGS_UPDATED]);
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_ARGS_UPDATED, {
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_ARGS_UPDATED, {
storyId: 'component-one--a',
args: { foo: 'a' },
});
@@ -1067,17 +1087,18 @@ describe('PreviewWeb', () => {
it('resets a single arg', async () => {
document.location.search = '?id=component-one--a';
- await createAndRenderPreview();
+ const preview = await createAndRenderPreview();
+ const onUpdateArgsSpy = jest.spyOn(preview, 'onUpdateArgs');
mockChannel.emit.mockClear();
- emitter.emit(Events.UPDATE_STORY_ARGS, {
+ emitter.emit(UPDATE_STORY_ARGS, {
storyId: 'component-one--a',
updatedArgs: { foo: 'new', new: 'value' },
});
- await waitForEvents([Events.STORY_ARGS_UPDATED]);
+ await waitForEvents([STORY_ARGS_UPDATED]);
mockChannel.emit.mockClear();
- emitter.emit(Events.RESET_STORY_ARGS, {
+ emitter.emit(RESET_STORY_ARGS, {
storyId: 'component-one--a',
argNames: ['foo'],
});
@@ -1095,25 +1116,72 @@ describe('PreviewWeb', () => {
undefined // this is coming from view.prepareForStory, not super important
);
- await waitForEvents([Events.STORY_ARGS_UPDATED]);
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_ARGS_UPDATED, {
+ await waitForEvents([STORY_ARGS_UPDATED]);
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_ARGS_UPDATED, {
storyId: 'component-one--a',
args: { foo: 'a', new: 'value' },
});
+
+ expect(onUpdateArgsSpy).toHaveBeenCalledWith({
+ storyId: 'component-one--a',
+ updatedArgs: { foo: 'a' },
+ });
+ });
+
+ it('resets all args after one is updated', async () => {
+ document.location.search = '?id=component-one--a';
+ const preview = await createAndRenderPreview();
+ const onUpdateArgsSpy = jest.spyOn(preview, 'onUpdateArgs');
+
+ emitter.emit(UPDATE_STORY_ARGS, {
+ storyId: 'component-one--a',
+ updatedArgs: { foo: 'new' },
+ });
+ await waitForEvents([STORY_ARGS_UPDATED]);
+
+ mockChannel.emit.mockClear();
+ emitter.emit(RESET_STORY_ARGS, {
+ storyId: 'component-one--a',
+ });
+
+ await waitForRender();
+
+ expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
+ expect.objectContaining({
+ forceRemount: false,
+ storyContext: expect.objectContaining({
+ initialArgs: { foo: 'a' },
+ args: { foo: 'a' },
+ }),
+ }),
+ undefined // this is coming from view.prepareForStory, not super important
+ );
+
+ await waitForEvents([STORY_ARGS_UPDATED]);
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_ARGS_UPDATED, {
+ storyId: 'component-one--a',
+ args: { foo: 'a' },
+ });
+
+ expect(onUpdateArgsSpy).toHaveBeenCalledWith({
+ storyId: 'component-one--a',
+ updatedArgs: { foo: 'a' },
+ });
});
it('resets all args', async () => {
document.location.search = '?id=component-one--a';
- await createAndRenderPreview();
+ const preview = await createAndRenderPreview();
+ const onUpdateArgsSpy = jest.spyOn(preview, 'onUpdateArgs');
- emitter.emit(Events.UPDATE_STORY_ARGS, {
+ emitter.emit(UPDATE_STORY_ARGS, {
storyId: 'component-one--a',
updatedArgs: { foo: 'new', new: 'value' },
});
- await waitForEvents([Events.STORY_ARGS_UPDATED]);
+ await waitForEvents([STORY_ARGS_UPDATED]);
mockChannel.emit.mockClear();
- emitter.emit(Events.RESET_STORY_ARGS, {
+ emitter.emit(RESET_STORY_ARGS, {
storyId: 'component-one--a',
});
@@ -1130,11 +1198,57 @@ describe('PreviewWeb', () => {
undefined // this is coming from view.prepareForStory, not super important
);
- await waitForEvents([Events.STORY_ARGS_UPDATED]);
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_ARGS_UPDATED, {
+ await waitForEvents([STORY_ARGS_UPDATED]);
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_ARGS_UPDATED, {
storyId: 'component-one--a',
args: { foo: 'a' },
});
+
+ expect(onUpdateArgsSpy).toHaveBeenCalledWith({
+ storyId: 'component-one--a',
+ updatedArgs: { foo: 'a', new: undefined },
+ });
+ });
+
+ it('resets all args when one arg is undefined', async () => {
+ document.location.search = '?id=component-one--a';
+ const preview = await createAndRenderPreview();
+ const onUpdateArgsSpy = jest.spyOn(preview, 'onUpdateArgs');
+
+ emitter.emit(UPDATE_STORY_ARGS, {
+ storyId: 'component-one--a',
+ updatedArgs: { foo: undefined },
+ });
+ await waitForEvents([STORY_ARGS_UPDATED]);
+
+ mockChannel.emit.mockClear();
+ emitter.emit(RESET_STORY_ARGS, {
+ storyId: 'component-one--a',
+ });
+
+ await waitForRender();
+
+ expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
+ expect.objectContaining({
+ forceRemount: false,
+ storyContext: expect.objectContaining({
+ initialArgs: { foo: 'a' },
+ args: { foo: 'a' },
+ }),
+ }),
+ undefined // this is coming from view.prepareForStory, not super important
+ );
+
+ await waitForEvents([STORY_ARGS_UPDATED]);
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_ARGS_UPDATED, {
+ storyId: 'component-one--a',
+ args: { foo: 'a' },
+ });
+
+ expect(onUpdateArgsSpy).toHaveBeenCalledWith({
+ storyId: 'component-one--a',
+ updatedArgs: { foo: 'a' },
+ });
});
});
@@ -1145,7 +1259,7 @@ describe('PreviewWeb', () => {
mockChannel.emit.mockClear();
projectAnnotations.renderToDOM.mockClear();
- emitter.emit(Events.FORCE_RE_RENDER);
+ emitter.emit(FORCE_RE_RENDER);
await waitForRender();
expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
@@ -1169,7 +1283,7 @@ describe('PreviewWeb', () => {
mockChannel.emit.mockClear();
projectAnnotations.renderToDOM.mockClear();
- emitter.emit(Events.FORCE_REMOUNT, { storyId: 'component-one--a' });
+ emitter.emit(FORCE_REMOUNT, { storyId: 'component-one--a' });
await waitForRender();
expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
@@ -1182,7 +1296,7 @@ describe('PreviewWeb', () => {
const [gate, openGate] = createGate();
document.location.search = '?id=component-one--a';
- projectAnnotations.renderToDOM.mockImplementationOnce(async () => gate);
+ projectAnnotations.renderToDOM.mockImplementation(async () => gate);
await new PreviewWeb().initialize({ importFn, getProjectAnnotations });
await waitForRenderPhase('rendering');
@@ -1198,7 +1312,7 @@ describe('PreviewWeb', () => {
);
mockChannel.emit.mockClear();
- emitter.emit(Events.FORCE_REMOUNT, { storyId: 'component-one--a' });
+ emitter.emit(FORCE_REMOUNT, { storyId: 'component-one--a' });
await waitForSetCurrentStory();
// Now let the renderToDOM call resolve
@@ -1213,7 +1327,7 @@ describe('PreviewWeb', () => {
expect(componentOneExports.a.play).toHaveBeenCalledTimes(1);
await waitForRenderPhase('completed');
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-one--a');
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-one--a');
await waitForQuiescence();
});
@@ -1231,7 +1345,7 @@ describe('PreviewWeb', () => {
document.location.search = '?id=component-one--a';
await createAndRenderPreview();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--b',
viewMode: 'story',
});
@@ -1248,13 +1362,13 @@ describe('PreviewWeb', () => {
document.location.search = '?id=component-one--a';
await createAndRenderPreview();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--b',
viewMode: 'story',
});
await waitForSetCurrentStory();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.CURRENT_STORY_WAS_SET, {
+ expect(mockChannel.emit).toHaveBeenCalledWith(CURRENT_STORY_WAS_SET, {
storyId: 'component-one--b',
viewMode: 'story',
});
@@ -1264,15 +1378,15 @@ describe('PreviewWeb', () => {
document.location.search = '?id=component-one--a';
const preview = await createAndRenderPreview();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'random',
viewMode: 'story',
});
await waitForSetCurrentStory();
- await waitForEvents([Events.STORY_MISSING]);
+ await waitForEvents([STORY_MISSING]);
expect(preview.view.showErrorDisplay).toHaveBeenCalled();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_MISSING, 'random');
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_MISSING, 'random');
});
describe('if called before the preview is initialized', () => {
@@ -1281,13 +1395,13 @@ describe('PreviewWeb', () => {
// We intentionally are *not* awaiting here
new PreviewWeb().initialize({ importFn, getProjectAnnotations });
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--b',
viewMode: 'story',
});
- await waitForEvents([Events.STORY_RENDERED]);
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.CURRENT_STORY_WAS_SET, {
+ await waitForEvents([STORY_RENDERED]);
+ expect(mockChannel.emit).toHaveBeenCalledWith(CURRENT_STORY_WAS_SET, {
storyId: 'component-one--b',
viewMode: 'story',
});
@@ -1296,8 +1410,25 @@ describe('PreviewWeb', () => {
'',
'pathname?id=component-one--b&viewMode=story'
);
- expect(mockChannel.emit).not.toHaveBeenCalledWith(Events.STORY_MISSING, 'component-one--b');
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-one--b');
+ expect(mockChannel.emit).not.toHaveBeenCalledWith(STORY_MISSING, 'component-one--b');
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-one--b');
+ });
+ });
+
+ describe('if called on a storybook without selection', () => {
+ it('sets viewMode to story by default', async () => {
+ await createAndRenderPreview();
+
+ emitter.emit(SET_CURRENT_STORY, {
+ storyId: 'component-one--b',
+ });
+ await waitForSetCurrentStory();
+
+ expect(history.replaceState).toHaveBeenCalledWith(
+ {},
+ '',
+ 'pathname?id=component-one--b&viewMode=story'
+ );
});
});
@@ -1306,14 +1437,14 @@ describe('PreviewWeb', () => {
document.location.search = '?id=component-one--a';
await createAndRenderPreview();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--a',
viewMode: 'story',
});
await waitForSetCurrentStory();
- await waitForEvents([Events.STORY_UNCHANGED]);
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_UNCHANGED, 'component-one--a');
+ await waitForEvents([STORY_UNCHANGED]);
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_UNCHANGED, 'component-one--a');
});
it('does NOT call renderToDOM', async () => {
@@ -1321,7 +1452,7 @@ describe('PreviewWeb', () => {
await createAndRenderPreview();
projectAnnotations.renderToDOM.mockClear();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--a',
viewMode: 'story',
});
@@ -1332,6 +1463,20 @@ describe('PreviewWeb', () => {
expect(projectAnnotations.renderToDOM).not.toHaveBeenCalled();
});
+ it('does NOT call renderToDOMs teardown', async () => {
+ document.location.search = '?id=component-one--a';
+ await createAndRenderPreview();
+
+ projectAnnotations.renderToDOM.mockClear();
+ emitter.emit(SET_CURRENT_STORY, {
+ storyId: 'component-one--a',
+ viewMode: 'story',
+ });
+ await waitForSetCurrentStory();
+
+ expect(teardownRenderToDOM).not.toHaveBeenCalled();
+ });
+
// For https://github.com/storybookjs/storybook/issues/17214
it('does NOT render a second time if preparing', async () => {
document.location.search = '?id=component-one--a';
@@ -1354,11 +1499,11 @@ describe('PreviewWeb', () => {
// We can't wait for the initialize function, as it waits for `renderSelection()`
// which prepares, but it does emit `CURRENT_STORY_WAS_SET` right before that
preview.initialize({ importFn, getProjectAnnotations });
- await waitForEvents([Events.CURRENT_STORY_WAS_SET]);
+ await waitForEvents([CURRENT_STORY_WAS_SET]);
mockChannel.emit.mockClear();
projectAnnotations.renderToDOM.mockClear();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--a',
viewMode: 'story',
});
@@ -1379,11 +1524,25 @@ describe('PreviewWeb', () => {
});
describe('when changing story in story viewMode', () => {
+ it('calls renderToDOMs teardown', async () => {
+ document.location.search = '?id=component-one--a';
+ await createAndRenderPreview();
+
+ projectAnnotations.renderToDOM.mockClear();
+ emitter.emit(SET_CURRENT_STORY, {
+ storyId: 'component-one--b',
+ viewMode: 'story',
+ });
+ await waitForSetCurrentStory();
+
+ expect(teardownRenderToDOM).toHaveBeenCalled();
+ });
+
it('updates URL', async () => {
document.location.search = '?id=component-one--a';
await createAndRenderPreview();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--b',
viewMode: 'story',
});
@@ -1400,7 +1559,7 @@ describe('PreviewWeb', () => {
document.location.search = '?id=component-one--a';
const preview = await createAndRenderPreview();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--b',
viewMode: 'story',
});
@@ -1414,14 +1573,14 @@ describe('PreviewWeb', () => {
await createAndRenderPreview();
mockChannel.emit.mockClear();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--b',
viewMode: 'story',
});
await waitForSetCurrentStory();
- await waitForEvents([Events.STORY_CHANGED]);
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_CHANGED, 'component-one--b');
+ await waitForEvents([STORY_CHANGED]);
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_CHANGED, 'component-one--b');
});
it('emits STORY_PREPARED', async () => {
@@ -1429,14 +1588,14 @@ describe('PreviewWeb', () => {
await createAndRenderPreview();
mockChannel.emit.mockClear();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--b',
viewMode: 'story',
});
await waitForSetCurrentStory();
- await waitForEvents([Events.STORY_PREPARED]);
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_PREPARED, {
+ await waitForEvents([STORY_PREPARED]);
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_PREPARED, {
id: 'component-one--b',
parameters: {
__isArgsStory: false,
@@ -1454,7 +1613,7 @@ describe('PreviewWeb', () => {
await createAndRenderPreview();
mockChannel.emit.mockClear();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--b',
viewMode: 'story',
});
@@ -1481,7 +1640,7 @@ describe('PreviewWeb', () => {
await createAndRenderPreview();
mockChannel.emit.mockClear();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--b',
viewMode: 'story',
});
@@ -1514,19 +1673,19 @@ describe('PreviewWeb', () => {
const preview = await createAndRenderPreview();
const error = new Error('error');
- projectAnnotations.renderToDOM.mockImplementationOnce(() => {
+ projectAnnotations.renderToDOM.mockImplementation(() => {
throw error;
});
mockChannel.emit.mockClear();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--b',
viewMode: 'story',
});
await waitForSetCurrentStory();
await waitForRender();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_THREW_EXCEPTION, error);
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_THREW_EXCEPTION, error);
expect(preview.view.showErrorDisplay).toHaveBeenCalledWith(error);
});
@@ -1535,19 +1694,17 @@ describe('PreviewWeb', () => {
const preview = await createAndRenderPreview();
const error = { title: 'title', description: 'description' };
- projectAnnotations.renderToDOM.mockImplementationOnce((context) =>
- context.showError(error)
- );
+ projectAnnotations.renderToDOM.mockImplementation((context) => context.showError(error));
mockChannel.emit.mockClear();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--b',
viewMode: 'story',
});
await waitForSetCurrentStory();
await waitForRender();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_ERRORED, error);
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_ERRORED, error);
expect(preview.view.showErrorDisplay).toHaveBeenCalledWith({
message: error.title,
stack: error.description,
@@ -1559,19 +1716,19 @@ describe('PreviewWeb', () => {
const preview = await createAndRenderPreview();
const error = new Error('error');
- projectAnnotations.renderToDOM.mockImplementationOnce((context) =>
+ projectAnnotations.renderToDOM.mockImplementation((context) =>
context.showException(error)
);
mockChannel.emit.mockClear();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--b',
viewMode: 'story',
});
await waitForSetCurrentStory();
await waitForRender();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_THREW_EXCEPTION, error);
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_THREW_EXCEPTION, error);
expect(preview.view.showErrorDisplay).toHaveBeenCalledWith(error);
});
@@ -1580,7 +1737,7 @@ describe('PreviewWeb', () => {
await createAndRenderPreview();
mockChannel.emit.mockClear();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--b',
viewMode: 'story',
});
@@ -1595,14 +1752,14 @@ describe('PreviewWeb', () => {
await createAndRenderPreview();
mockChannel.emit.mockClear();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--b',
viewMode: 'story',
});
await waitForSetCurrentStory();
await waitForRender();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-one--b');
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-one--b');
});
it('retains any arg changes', async () => {
@@ -1610,7 +1767,7 @@ describe('PreviewWeb', () => {
const preview = await createAndRenderPreview();
mockChannel.emit.mockClear();
- emitter.emit(Events.UPDATE_STORY_ARGS, {
+ emitter.emit(UPDATE_STORY_ARGS, {
storyId: 'component-one--a',
updatedArgs: { foo: 'updated' },
});
@@ -1620,7 +1777,7 @@ describe('PreviewWeb', () => {
});
mockChannel.emit.mockClear();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--b',
viewMode: 'story',
});
@@ -1631,7 +1788,7 @@ describe('PreviewWeb', () => {
});
mockChannel.emit.mockClear();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--a',
viewMode: 'story',
});
@@ -1651,7 +1808,7 @@ describe('PreviewWeb', () => {
await new PreviewWeb().initialize({ importFn, getProjectAnnotations });
await waitForRenderPhase('loading');
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--b',
viewMode: 'story',
});
@@ -1680,12 +1837,12 @@ describe('PreviewWeb', () => {
const [gate, openGate] = createGate();
document.location.search = '?id=component-one--a';
- projectAnnotations.renderToDOM.mockImplementationOnce(async () => gate);
+ projectAnnotations.renderToDOM.mockImplementation(async () => gate);
await new PreviewWeb().initialize({ importFn, getProjectAnnotations });
await waitForRenderPhase('rendering');
mockChannel.emit.mockClear();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--b',
viewMode: 'story',
});
@@ -1704,11 +1861,8 @@ describe('PreviewWeb', () => {
expect(componentOneExports.b.play).toHaveBeenCalled();
await waitForRenderPhase('completed');
- expect(mockChannel.emit).not.toHaveBeenCalledWith(
- Events.STORY_RENDERED,
- 'component-one--a'
- );
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-one--b');
+ expect(mockChannel.emit).not.toHaveBeenCalledWith(STORY_RENDERED, 'component-one--a');
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-one--b');
await waitForQuiescence();
});
@@ -1733,7 +1887,7 @@ describe('PreviewWeb', () => {
);
mockChannel.emit.mockClear();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--b',
viewMode: 'story',
});
@@ -1745,7 +1899,7 @@ describe('PreviewWeb', () => {
await waitForSetCurrentStory();
await waitForRenderPhase('rendering');
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_CHANGED, 'component-one--b');
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_CHANGED, 'component-one--b');
expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
expect.objectContaining({
forceRemount: true,
@@ -1759,14 +1913,11 @@ describe('PreviewWeb', () => {
await waitForRenderPhase('playing');
await waitForRenderPhase('completed');
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-one--b');
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-one--b');
// Final story rendered is not emitted for the first story
await waitForQuiescence();
- expect(mockChannel.emit).not.toHaveBeenCalledWith(
- Events.STORY_RENDERED,
- 'component-one--a'
- );
+ expect(mockChannel.emit).not.toHaveBeenCalledWith(STORY_RENDERED, 'component-one--a');
});
it('reloads page if playFunction fails to abort in time', async () => {
@@ -1789,7 +1940,7 @@ describe('PreviewWeb', () => {
);
mockChannel.emit.mockClear();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--b',
viewMode: 'story',
});
@@ -1800,10 +1951,7 @@ describe('PreviewWeb', () => {
await waitForSetCurrentStory();
expect(global.window.location.reload).toHaveBeenCalled();
- expect(mockChannel.emit).not.toHaveBeenCalledWith(
- Events.STORY_CHANGED,
- 'component-one--b'
- );
+ expect(mockChannel.emit).not.toHaveBeenCalledWith(STORY_CHANGED, 'component-one--b');
expect(projectAnnotations.renderToDOM).not.toHaveBeenCalledWith(
expect.objectContaining({
storyContext: expect.objectContaining({ id: 'component-one--b' }),
@@ -1815,11 +1963,24 @@ describe('PreviewWeb', () => {
});
describe('when changing from story viewMode to docs', () => {
+ it('calls renderToDOMs teardown', async () => {
+ document.location.search = '?id=component-one--a';
+ await createAndRenderPreview();
+
+ emitter.emit(SET_CURRENT_STORY, {
+ storyId: 'component-one--a',
+ viewMode: 'docs',
+ });
+ await waitForSetCurrentStory();
+
+ expect(teardownRenderToDOM).toHaveBeenCalled();
+ });
+
it('updates URL', async () => {
document.location.search = '?id=component-one--a';
await createAndRenderPreview();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--a',
viewMode: 'docs',
});
@@ -1836,7 +1997,7 @@ describe('PreviewWeb', () => {
document.location.search = '?id=component-one--a';
const preview = await createAndRenderPreview();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--a',
viewMode: 'docs',
});
@@ -1850,14 +2011,14 @@ describe('PreviewWeb', () => {
await createAndRenderPreview();
mockChannel.emit.mockClear();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--a',
viewMode: 'docs',
});
await waitForSetCurrentStory();
- await waitForEvents([Events.STORY_CHANGED]);
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_CHANGED, 'component-one--a');
+ await waitForEvents([STORY_CHANGED]);
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_CHANGED, 'component-one--a');
});
it('calls view.prepareForDocs', async () => {
@@ -1865,7 +2026,7 @@ describe('PreviewWeb', () => {
const preview = await createAndRenderPreview();
mockChannel.emit.mockClear();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--a',
viewMode: 'docs',
});
@@ -1880,7 +2041,7 @@ describe('PreviewWeb', () => {
await createAndRenderPreview();
mockChannel.emit.mockClear();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--a',
viewMode: 'docs',
});
@@ -1908,14 +2069,14 @@ describe('PreviewWeb', () => {
await createAndRenderPreview();
mockChannel.emit.mockClear();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--a',
viewMode: 'docs',
});
await waitForSetCurrentStory();
await waitForRender();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.DOCS_RENDERED, 'component-one--a');
+ expect(mockChannel.emit).toHaveBeenCalledWith(DOCS_RENDERED, 'component-one--a');
});
});
@@ -1924,7 +2085,7 @@ describe('PreviewWeb', () => {
document.location.search = '?id=component-one--a&viewMode=docs';
await createAndRenderPreview();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--a',
viewMode: 'story',
});
@@ -1942,7 +2103,7 @@ describe('PreviewWeb', () => {
await createAndRenderPreview();
mockChannel.emit.mockClear();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--a',
viewMode: 'story',
});
@@ -1958,14 +2119,14 @@ describe('PreviewWeb', () => {
await createAndRenderPreview();
mockChannel.emit.mockClear();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--a',
viewMode: 'story',
});
await waitForSetCurrentStory();
- await waitForEvents([Events.STORY_CHANGED]);
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_CHANGED, 'component-one--a');
+ await waitForEvents([STORY_CHANGED]);
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_CHANGED, 'component-one--a');
});
it('calls view.prepareForStory', async () => {
@@ -1973,7 +2134,7 @@ describe('PreviewWeb', () => {
const preview = await createAndRenderPreview();
mockChannel.emit.mockClear();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--a',
viewMode: 'story',
});
@@ -1992,14 +2153,14 @@ describe('PreviewWeb', () => {
await createAndRenderPreview();
mockChannel.emit.mockClear();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--a',
viewMode: 'story',
});
await waitForSetCurrentStory();
- await waitForEvents([Events.STORY_PREPARED]);
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_PREPARED, {
+ await waitForEvents([STORY_PREPARED]);
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_PREPARED, {
id: 'component-one--a',
parameters: {
__isArgsStory: false,
@@ -2017,7 +2178,7 @@ describe('PreviewWeb', () => {
await createAndRenderPreview();
mockChannel.emit.mockClear();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--a',
viewMode: 'story',
});
@@ -2044,7 +2205,7 @@ describe('PreviewWeb', () => {
await createAndRenderPreview();
mockChannel.emit.mockClear();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--a',
viewMode: 'story',
});
@@ -2077,40 +2238,38 @@ describe('PreviewWeb', () => {
const preview = await createAndRenderPreview();
const error = new Error('error');
- projectAnnotations.renderToDOM.mockImplementationOnce(() => {
+ projectAnnotations.renderToDOM.mockImplementation(() => {
throw error;
});
mockChannel.emit.mockClear();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--a',
viewMode: 'story',
});
await waitForSetCurrentStory();
await waitForRender();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_THREW_EXCEPTION, error);
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_THREW_EXCEPTION, error);
expect(preview.view.showErrorDisplay).toHaveBeenCalledWith(error);
});
it('renders error if the story calls showError', async () => {
const error = { title: 'title', description: 'description' };
- projectAnnotations.renderToDOM.mockImplementationOnce((context) =>
- context.showError(error)
- );
+ projectAnnotations.renderToDOM.mockImplementation((context) => context.showError(error));
document.location.search = '?id=component-one--a&viewMode=docs';
const preview = await createAndRenderPreview();
mockChannel.emit.mockClear();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--a',
viewMode: 'story',
});
await waitForSetCurrentStory();
await waitForRender();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_ERRORED, error);
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_ERRORED, error);
expect(preview.view.showErrorDisplay).toHaveBeenCalledWith({
message: error.title,
stack: error.description,
@@ -2119,7 +2278,7 @@ describe('PreviewWeb', () => {
it('renders exception if the story calls showException', async () => {
const error = new Error('error');
- projectAnnotations.renderToDOM.mockImplementationOnce((context) =>
+ projectAnnotations.renderToDOM.mockImplementation((context) =>
context.showException(error)
);
@@ -2127,14 +2286,14 @@ describe('PreviewWeb', () => {
const preview = await createAndRenderPreview();
mockChannel.emit.mockClear();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--a',
viewMode: 'story',
});
await waitForSetCurrentStory();
await waitForRender();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_THREW_EXCEPTION, error);
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_THREW_EXCEPTION, error);
expect(preview.view.showErrorDisplay).toHaveBeenCalledWith(error);
});
@@ -2143,7 +2302,7 @@ describe('PreviewWeb', () => {
await createAndRenderPreview();
mockChannel.emit.mockClear();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--a',
viewMode: 'story',
});
@@ -2158,14 +2317,14 @@ describe('PreviewWeb', () => {
await createAndRenderPreview();
mockChannel.emit.mockClear();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--a',
viewMode: 'story',
});
await waitForSetCurrentStory();
await waitForRender();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-one--a');
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-one--a');
});
});
});
@@ -2183,13 +2342,13 @@ describe('PreviewWeb', () => {
);
expect(preview.view.showErrorDisplay).toHaveBeenCalled();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.CONFIG_ERROR, expect.any(Error));
+ expect(mockChannel.emit).toHaveBeenCalledWith(CONFIG_ERROR, expect.any(Error));
mockChannel.emit.mockClear();
mockFetchResult = { status: 200, json: mockStoryIndex, text: () => 'error text' };
preview.onStoryIndexChanged();
await waitForRender();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-one--a');
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-one--a');
});
it('sets story args from the URL', async () => {
@@ -2203,7 +2362,7 @@ describe('PreviewWeb', () => {
);
expect(preview.view.showErrorDisplay).toHaveBeenCalled();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.CONFIG_ERROR, expect.any(Error));
+ expect(mockChannel.emit).toHaveBeenCalledWith(CONFIG_ERROR, expect.any(Error));
mockChannel.emit.mockClear();
mockFetchResult = { status: 200, json: mockStoryIndex, text: () => 'error text' };
@@ -2225,6 +2384,17 @@ describe('PreviewWeb', () => {
: componentTwoExports;
});
+ it('calls renderToDOMs teardown', async () => {
+ document.location.search = '?id=component-one--a';
+ const preview = await createAndRenderPreview();
+ mockChannel.emit.mockClear();
+
+ preview.onStoriesChanged({ importFn: newImportFn });
+ await waitForRender();
+
+ expect(teardownRenderToDOM).toHaveBeenCalled();
+ });
+
it('does not emit STORY_UNCHANGED', async () => {
document.location.search = '?id=component-one--a';
const preview = await createAndRenderPreview();
@@ -2233,10 +2403,7 @@ describe('PreviewWeb', () => {
preview.onStoriesChanged({ importFn: newImportFn });
await waitForRender();
- expect(mockChannel.emit).not.toHaveBeenCalledWith(
- Events.STORY_UNCHANGED,
- 'component-one--a'
- );
+ expect(mockChannel.emit).not.toHaveBeenCalledWith(STORY_UNCHANGED, 'component-one--a');
});
it('does not emit STORY_CHANGED', async () => {
@@ -2247,7 +2414,7 @@ describe('PreviewWeb', () => {
preview.onStoriesChanged({ importFn: newImportFn });
await waitForRender();
- expect(mockChannel.emit).not.toHaveBeenCalledWith(Events.STORY_CHANGED, 'component-one--a');
+ expect(mockChannel.emit).not.toHaveBeenCalledWith(STORY_CHANGED, 'component-one--a');
});
it('emits STORY_PREPARED with new annotations', async () => {
@@ -2258,7 +2425,7 @@ describe('PreviewWeb', () => {
preview.onStoriesChanged({ importFn: newImportFn });
await waitForRender();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_PREPARED, {
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_PREPARED, {
id: 'component-one--a',
parameters: {
__isArgsStory: false,
@@ -2279,7 +2446,7 @@ describe('PreviewWeb', () => {
preview.onStoriesChanged({ importFn: newImportFn });
await waitForRender();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_ARGS_UPDATED, {
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_ARGS_UPDATED, {
storyId: 'component-one--a',
args: { foo: 'edited' },
});
@@ -2344,7 +2511,7 @@ describe('PreviewWeb', () => {
const preview = await createAndRenderPreview();
mockChannel.emit.mockClear();
- emitter.emit(Events.UPDATE_STORY_ARGS, {
+ emitter.emit(UPDATE_STORY_ARGS, {
storyId: 'component-one--a',
updatedArgs: { foo: 'updated' },
});
@@ -2372,7 +2539,7 @@ describe('PreviewWeb', () => {
const preview = await createAndRenderPreview();
const error = new Error('error');
- projectAnnotations.renderToDOM.mockImplementationOnce(() => {
+ projectAnnotations.renderToDOM.mockImplementation(() => {
throw error;
});
@@ -2380,7 +2547,7 @@ describe('PreviewWeb', () => {
preview.onStoriesChanged({ importFn: newImportFn });
await waitForRender();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_THREW_EXCEPTION, error);
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_THREW_EXCEPTION, error);
expect(preview.view.showErrorDisplay).toHaveBeenCalledWith(error);
});
@@ -2389,15 +2556,13 @@ describe('PreviewWeb', () => {
const preview = await createAndRenderPreview();
const error = { title: 'title', description: 'description' };
- projectAnnotations.renderToDOM.mockImplementationOnce((context) =>
- context.showError(error)
- );
+ projectAnnotations.renderToDOM.mockImplementation((context) => context.showError(error));
mockChannel.emit.mockClear();
preview.onStoriesChanged({ importFn: newImportFn });
await waitForRender();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_ERRORED, error);
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_ERRORED, error);
expect(preview.view.showErrorDisplay).toHaveBeenCalledWith({
message: error.title,
stack: error.description,
@@ -2409,7 +2574,7 @@ describe('PreviewWeb', () => {
const preview = await createAndRenderPreview();
const error = new Error('error');
- projectAnnotations.renderToDOM.mockImplementationOnce((context) =>
+ projectAnnotations.renderToDOM.mockImplementation((context) =>
context.showException(error)
);
@@ -2417,7 +2582,7 @@ describe('PreviewWeb', () => {
preview.onStoriesChanged({ importFn: newImportFn });
await waitForRender();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_THREW_EXCEPTION, error);
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_THREW_EXCEPTION, error);
expect(preview.view.showErrorDisplay).toHaveBeenCalledWith(error);
});
@@ -2441,7 +2606,7 @@ describe('PreviewWeb', () => {
preview.onStoriesChanged({ importFn: newImportFn });
await waitForRender();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-one--a');
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-one--a');
});
});
@@ -2481,7 +2646,7 @@ describe('PreviewWeb', () => {
const preview = await createAndRenderPreview();
mockChannel.emit.mockClear();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--b',
viewMode: 'story',
});
@@ -2491,7 +2656,7 @@ describe('PreviewWeb', () => {
preview.onStoriesChanged({ importFn: newImportFn, storyIndex: newStoryIndex });
mockChannel.emit.mockClear();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--a',
viewMode: 'story',
});
@@ -2510,16 +2675,27 @@ describe('PreviewWeb', () => {
: newComponentTwoExports;
});
+ it('does NOT call renderToDOMs teardown', async () => {
+ document.location.search = '?id=component-one--a';
+ const preview = await createAndRenderPreview();
+
+ mockChannel.emit.mockClear();
+ preview.onStoriesChanged({ importFn: newImportFn });
+ await waitForEvents([STORY_UNCHANGED]);
+
+ expect(teardownRenderToDOM).not.toHaveBeenCalled();
+ });
+
it('emits STORY_UNCHANGED', async () => {
document.location.search = '?id=component-one--a';
const preview = await createAndRenderPreview();
mockChannel.emit.mockClear();
preview.onStoriesChanged({ importFn: newImportFn });
- await waitForEvents([Events.STORY_UNCHANGED]);
+ await waitForEvents([STORY_UNCHANGED]);
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_UNCHANGED, 'component-one--a');
- expect(mockChannel.emit).not.toHaveBeenCalledWith(Events.STORY_CHANGED, 'component-one--a');
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_UNCHANGED, 'component-one--a');
+ expect(mockChannel.emit).not.toHaveBeenCalledWith(STORY_CHANGED, 'component-one--a');
});
it('clears preparing state', async () => {
@@ -2529,7 +2705,7 @@ describe('PreviewWeb', () => {
(preview.view.showMain as jest.Mock).mockClear();
mockChannel.emit.mockClear();
preview.onStoriesChanged({ importFn: newImportFn });
- await waitForEvents([Events.STORY_UNCHANGED]);
+ await waitForEvents([STORY_UNCHANGED]);
expect(preview.view.showMain).toHaveBeenCalled();
});
@@ -2544,10 +2720,7 @@ describe('PreviewWeb', () => {
await waitForQuiescence();
expect(projectAnnotations.renderToDOM).not.toHaveBeenCalled();
- expect(mockChannel.emit).not.toHaveBeenCalledWith(
- Events.STORY_RENDERED,
- 'component-one--a'
- );
+ expect(mockChannel.emit).not.toHaveBeenCalledWith(STORY_RENDERED, 'component-one--a');
});
});
@@ -2573,7 +2746,7 @@ describe('PreviewWeb', () => {
// Change A's args
mockChannel.emit.mockClear();
- emitter.emit(Events.UPDATE_STORY_ARGS, {
+ emitter.emit(UPDATE_STORY_ARGS, {
storyId: 'component-one--a',
updatedArgs: { foo: 'updated' },
});
@@ -2581,7 +2754,7 @@ describe('PreviewWeb', () => {
// Change to story B
mockChannel.emit.mockClear();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--b',
viewMode: 'story',
});
@@ -2599,7 +2772,7 @@ describe('PreviewWeb', () => {
// Change back to Story A
mockChannel.emit.mockClear();
- emitter.emit(Events.SET_CURRENT_STORY, {
+ emitter.emit(SET_CURRENT_STORY, {
storyId: 'component-one--a',
viewMode: 'story',
});
@@ -2638,16 +2811,27 @@ describe('PreviewWeb', () => {
},
};
+ it('calls renderToDOMs teardown', async () => {
+ document.location.search = '?id=component-one--a';
+ const preview = await createAndRenderPreview();
+
+ mockChannel.emit.mockClear();
+ preview.onStoriesChanged({ importFn: newImportFn, storyIndex: newStoryIndex });
+ await waitForEvents([STORY_MISSING]);
+
+ expect(teardownRenderToDOM).toHaveBeenCalled();
+ });
+
it('renders loading error', async () => {
document.location.search = '?id=component-one--a';
const preview = await createAndRenderPreview();
mockChannel.emit.mockClear();
preview.onStoriesChanged({ importFn: newImportFn, storyIndex: newStoryIndex });
- await waitForEvents([Events.STORY_MISSING]);
+ await waitForEvents([STORY_MISSING]);
expect(preview.view.showErrorDisplay).toHaveBeenCalled();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_MISSING, 'component-one--a');
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_MISSING, 'component-one--a');
});
it('does not re-render the story', async () => {
@@ -2660,10 +2844,7 @@ describe('PreviewWeb', () => {
await waitForQuiescence();
expect(projectAnnotations.renderToDOM).not.toHaveBeenCalled();
- expect(mockChannel.emit).not.toHaveBeenCalledWith(
- Events.STORY_RENDERED,
- 'component-one--a'
- );
+ expect(mockChannel.emit).not.toHaveBeenCalledWith(STORY_RENDERED, 'component-one--a');
});
it('re-renders the story if it is readded', async () => {
@@ -2672,12 +2853,12 @@ describe('PreviewWeb', () => {
mockChannel.emit.mockClear();
preview.onStoriesChanged({ importFn: newImportFn, storyIndex: newStoryIndex });
- await waitForEvents([Events.STORY_MISSING]);
+ await waitForEvents([STORY_MISSING]);
mockChannel.emit.mockClear();
preview.onStoriesChanged({ importFn, storyIndex });
await waitForRender();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-one--a');
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-one--a');
});
});
});
@@ -2701,7 +2882,7 @@ describe('PreviewWeb', () => {
preview.onGetProjectAnnotationsChanged({ getProjectAnnotations });
await waitForRender();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-one--a');
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-one--a');
});
it('sets globals from the URL', async () => {
@@ -2740,7 +2921,7 @@ describe('PreviewWeb', () => {
).rejects.toThrow(err);
expect(preview.view.showErrorDisplay).toHaveBeenCalled();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.CONFIG_ERROR, err);
+ expect(mockChannel.emit).toHaveBeenCalledWith(CONFIG_ERROR, err);
});
const newGlobalDecorator = jest.fn((s) => s());
@@ -2772,8 +2953,8 @@ describe('PreviewWeb', () => {
preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations });
await waitForRender();
- await waitForEvents([Events.SET_GLOBALS]);
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.SET_GLOBALS, {
+ await waitForEvents([SET_GLOBALS]);
+ expect(mockChannel.emit).toHaveBeenCalledWith(SET_GLOBALS, {
globals: { a: 'edited' },
globalTypes: {},
});
@@ -2801,12 +2982,24 @@ describe('PreviewWeb', () => {
preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations });
await waitForRender();
- expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_ARGS_UPDATED, {
+ expect(mockChannel.emit).toHaveBeenCalledWith(STORY_ARGS_UPDATED, {
storyId: 'component-one--a',
args: { foo: 'a', global: 'added' },
});
});
+ it('calls renderToDOMs teardown', async () => {
+ document.location.search = '?id=component-one--a';
+ const preview = await createAndRenderPreview();
+
+ projectAnnotations.renderToDOM.mockClear();
+ mockChannel.emit.mockClear();
+ preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations });
+ await waitForRender();
+
+ expect(teardownRenderToDOM).toHaveBeenCalled();
+ });
+
it('rerenders the current story with new global meta-generated context', async () => {
document.location.search = '?id=component-one--a';
const preview = await createAndRenderPreview();
@@ -2837,10 +3030,7 @@ describe('PreviewWeb', () => {
target: { tagName: 'div', getAttribute: jest.fn().mockReturnValue(null) },
} as any);
- expect(mockChannel.emit).toHaveBeenCalledWith(
- Events.PREVIEW_KEYDOWN,
- expect.objectContaining({})
- );
+ expect(mockChannel.emit).toHaveBeenCalledWith(PREVIEW_KEYDOWN, expect.objectContaining({}));
});
it('does not emit PREVIEW_KEYDOWN for input elements', async () => {
@@ -2852,7 +3042,7 @@ describe('PreviewWeb', () => {
} as any);
expect(mockChannel.emit).not.toHaveBeenCalledWith(
- Events.PREVIEW_KEYDOWN,
+ PREVIEW_KEYDOWN,
expect.objectContaining({})
);
});
diff --git a/lib/preview-web/src/PreviewWeb.tsx b/lib/preview-web/src/PreviewWeb.tsx
index 417730034bd3..6c455bd2e93b 100644
--- a/lib/preview-web/src/PreviewWeb.tsx
+++ b/lib/preview-web/src/PreviewWeb.tsx
@@ -1,7 +1,24 @@
import deprecate from 'util-deprecate';
import dedent from 'ts-dedent';
import global from 'global';
-import Events, { IGNORED_EXCEPTION } from '@storybook/core-events';
+import {
+ CURRENT_STORY_WAS_SET,
+ IGNORED_EXCEPTION,
+ PRELOAD_STORIES,
+ PREVIEW_KEYDOWN,
+ SET_CURRENT_STORY,
+ SET_STORIES,
+ STORY_ARGS_UPDATED,
+ STORY_CHANGED,
+ STORY_ERRORED,
+ STORY_MISSING,
+ STORY_PREPARED,
+ STORY_RENDER_PHASE_CHANGED,
+ STORY_SPECIFIED,
+ STORY_THREW_EXCEPTION,
+ STORY_UNCHANGED,
+ UPDATE_QUERY_PARAMS,
+} from '@storybook/core-events';
import { logger } from '@storybook/client-logger';
import { AnyFramework, StoryId, ProjectAnnotations, Args, Globals } from '@storybook/csf';
import type {
@@ -64,9 +81,9 @@ export class PreviewWeb extends Preview) {
@@ -87,7 +104,7 @@ export class PreviewWeb extends Preview {
return super.initializeWithStoryIndex(storyIndex).then(() => {
if (!global.FEATURES?.storyStoreV7) {
- this.channel.emit(Events.SET_STORIES, this.storyStore.getSetStoriesPayload());
+ this.channel.emit(SET_STORIES, this.storyStore.getSetStoriesPayload());
}
return this.selectSpecifiedStory();
@@ -130,9 +147,9 @@ export class PreviewWeb extends Preview extends Preview extends Preview extends Preview extends Preview extends Preview extends Preview extends Preview implements Render {};
+
constructor(
public channel: Channel,
public store: StoryStore,
- private renderToScreen: (
- renderContext: RenderContext,
- canvasElement: HTMLElement
- ) => void | Promise,
+ private renderToScreen: RenderToDOM,
private callbacks: RenderContextCallbacks,
public id: StoryId,
public viewMode: ViewMode,
@@ -190,9 +195,10 @@ export class StoryRender implements Render
- this.renderToScreen(renderContext, this.canvasElement)
- );
+ await this.runPhase(abortSignal, 'rendering', async () => {
+ this.teardownRender =
+ (await this.renderToScreen(renderContext, this.canvasElement)) || (() => {});
+ });
this.notYetRendered = false;
if (abortSignal.aborted) return;
@@ -241,7 +247,11 @@ export class StoryRender implements Render setTimeout(resolve, 0));
}
diff --git a/lib/router/package.json b/lib/router/package.json
index 35e93b877086..5692236d313f 100644
--- a/lib/router/package.json
+++ b/lib/router/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/router",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"description": "Core Storybook Router",
"keywords": [
"storybook"
@@ -40,8 +40,10 @@
"prepare": "ts-node ../../scripts/prebundle.ts"
},
"dependencies": {
- "@storybook/client-logger": "6.5.0-beta.1",
+ "@storybook/client-logger": "6.5.0-rc.1",
"core-js": "^3.8.2",
+ "memoizerific": "^1.11.3",
+ "qs": "^6.10.0",
"regenerator-runtime": "^0.13.7"
},
"devDependencies": {
@@ -49,8 +51,6 @@
"global": "^4.4.0",
"history": "5.0.0",
"lodash": "^4.17.21",
- "memoizerific": "^1.11.3",
- "qs": "^6.10.0",
"react-router": "6.0.2",
"react-router-dom": "6.0.2",
"ts-dedent": "^2.0.0",
@@ -64,6 +64,6 @@
"access": "public"
},
"bundlerEntrypoint": "./src/index.ts",
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/router/src/utils.test.ts b/lib/router/src/utils.test.ts
index e7ae39173ade..adda7905ba85 100644
--- a/lib/router/src/utils.test.ts
+++ b/lib/router/src/utils.test.ts
@@ -34,6 +34,12 @@ describe('getMatch', () => {
expect(output).toBe(null);
});
+
+ it('returns null match if "startsWith" part is in the middle', () => {
+ const output = getMatch('/foo/bar', '/bar', true);
+
+ expect(output).toBe(null);
+ });
});
describe('parsePath', () => {
diff --git a/lib/router/src/utils.ts b/lib/router/src/utils.ts
index ed84228bfa98..7d3aeca0c786 100644
--- a/lib/router/src/utils.ts
+++ b/lib/router/src/utils.ts
@@ -148,11 +148,19 @@ type Match = { path: string };
export const getMatch = memoize(1000)(
(current: string, target: string, startsWith = true): Match | null => {
- const startsWithTarget = current && startsWith && current.startsWith(target);
+ if (startsWith) {
+ const startsWithTarget = current && current.startsWith(target);
+ if (startsWithTarget) {
+ return { path: current };
+ }
+
+ return null;
+ }
+
const currentIsTarget = typeof target === 'string' && current === target;
const matchTarget = current && target && current.match(target);
- if (startsWithTarget || currentIsTarget || matchTarget) {
+ if (currentIsTarget || matchTarget) {
return { path: current };
}
diff --git a/lib/source-loader/package.json b/lib/source-loader/package.json
index 449dd041ec9c..7730795b01b8 100644
--- a/lib/source-loader/package.json
+++ b/lib/source-loader/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/source-loader",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"description": "Source loader",
"keywords": [
"lib",
@@ -41,8 +41,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "6.5.0-beta.1",
- "@storybook/client-logger": "6.5.0-beta.1",
+ "@storybook/addons": "6.5.0-rc.1",
+ "@storybook/client-logger": "6.5.0-rc.1",
"@storybook/csf": "0.0.2--canary.4566f4d.1",
"core-js": "^3.8.2",
"estraverse": "^5.2.0",
@@ -59,6 +59,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/store/package.json b/lib/store/package.json
index 5a7ae73455a4..6c8f29f6e125 100644
--- a/lib/store/package.json
+++ b/lib/store/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/store",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"description": "",
"keywords": [
"storybook"
@@ -40,9 +40,9 @@
"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-rc.1",
+ "@storybook/client-logger": "6.5.0-rc.1",
+ "@storybook/core-events": "6.5.0-rc.1",
"@storybook/csf": "0.0.2--canary.4566f4d.1",
"core-js": "^3.8.2",
"fast-deep-equal": "^3.1.3",
@@ -63,6 +63,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/store/src/args.test.ts b/lib/store/src/args.test.ts
index f251fa3237f9..aafd94f6ee99 100644
--- a/lib/store/src/args.test.ts
+++ b/lib/store/src/args.test.ts
@@ -83,6 +83,25 @@ describe('mapArgsToTypes', () => {
expect(mapArgsToTypes({ a: 'something' }, { a: { type: functionType } })).toStrictEqual({});
});
+ it('includes functions if there is a mapping', () => {
+ expect(
+ mapArgsToTypes(
+ { a: 'something' },
+ { a: { type: functionType, mapping: { something: () => 'foo' } } }
+ )
+ ).toStrictEqual({
+ a: 'something',
+ });
+ });
+
+ it('skips default mapping if there is a user-specified mapping', () => {
+ expect(
+ mapArgsToTypes({ a: 'something' }, { a: { type: numberType, mapping: { something: 10 } } })
+ ).toStrictEqual({
+ a: 'something',
+ });
+ });
+
it('omits unknown keys', () => {
expect(mapArgsToTypes({ a: 'string' }, { b: { type: stringType } })).toStrictEqual({});
});
@@ -207,6 +226,11 @@ describe('validateOptions', () => {
expect(validateOptions({ a: 1 }, { a: { options: [1, 2] } })).toStrictEqual({ a: 1 });
});
+ // https://github.com/storybookjs/storybook/issues/17063
+ it('does not set args to `undefined` if they are unset and there are options', () => {
+ expect(validateOptions({}, { a: { options: [2, 3] } })).toStrictEqual({});
+ });
+
it('includes arg if value is undefined', () => {
expect(validateOptions({ a: undefined }, { a: { options: [1, 2] } })).toStrictEqual({
a: undefined,
diff --git a/lib/store/src/args.ts b/lib/store/src/args.ts
index e12acdff3b67..577c5587bcae 100644
--- a/lib/store/src/args.ts
+++ b/lib/store/src/args.ts
@@ -1,12 +1,16 @@
import deepEqual from 'fast-deep-equal';
-import type { SBType, Args, ArgTypes, StoryContext, AnyFramework } from '@storybook/csf';
+import type { SBType, Args, InputType, ArgTypes, StoryContext, AnyFramework } from '@storybook/csf';
import { once } from '@storybook/client-logger';
import isPlainObject from 'lodash/isPlainObject';
import dedent from 'ts-dedent';
const INCOMPATIBLE = Symbol('incompatible');
-const map = (arg: unknown, type: SBType): any => {
+const map = (arg: unknown, argType: InputType): any => {
+ const type = argType.type as SBType;
if (arg === undefined || arg === null || !type) return arg;
+ if (argType.mapping) {
+ return arg;
+ }
switch (type.name) {
case 'string':
return String(arg);
@@ -19,7 +23,7 @@ const map = (arg: unknown, type: SBType): any => {
case 'array':
if (!type.value || !Array.isArray(arg)) return INCOMPATIBLE;
return arg.reduce((acc, item, index) => {
- const mapped = map(item, type.value);
+ const mapped = map(item, { type: type.value });
if (mapped !== INCOMPATIBLE) acc[index] = mapped;
return acc;
}, new Array(arg.length));
@@ -27,7 +31,7 @@ const map = (arg: unknown, type: SBType): any => {
if (typeof arg === 'string' || typeof arg === 'number') return arg;
if (!type.value || typeof arg !== 'object') return INCOMPATIBLE;
return Object.entries(arg).reduce((acc, [key, val]) => {
- const mapped = map(val, type.value[key]);
+ const mapped = map(val, { type: type.value[key] });
return mapped === INCOMPATIBLE ? acc : Object.assign(acc, { [key]: mapped });
}, {} as Args);
default:
@@ -38,7 +42,7 @@ const map = (arg: unknown, type: SBType): any => {
export const mapArgsToTypes = (args: Args, argTypes: ArgTypes): Args => {
return Object.entries(args).reduce((acc, [key, value]) => {
if (!argTypes[key]) return acc;
- const mapped = map(value, argTypes[key].type as SBType);
+ const mapped = map(value, argTypes[key]);
return mapped === INCOMPATIBLE ? acc : Object.assign(acc, { [key]: mapped });
}, {});
};
@@ -69,21 +73,25 @@ export const combineArgs = (value: any, update: any): Args => {
export const validateOptions = (args: Args, argTypes: ArgTypes): Args => {
return Object.entries(argTypes).reduce((acc, [key, { options }]) => {
- if (!options) {
+ // Don't set args that are not defined in `args` (they can be undefined in there)
+ // see https://github.com/storybookjs/storybook/issues/15630 and
+ // https://github.com/storybookjs/storybook/issues/17063
+ function allowArg() {
if (key in args) {
acc[key] = args[key];
}
return acc;
}
+ if (!options) return allowArg();
+
if (!Array.isArray(options)) {
once.error(dedent`
Invalid argType: '${key}.options' should be an array.
More info: https://storybook.js.org/docs/react/api/argtypes
`);
- acc[key] = args[key];
- return acc;
+ return allowArg();
}
if (options.some((opt) => opt && ['object', 'function'].includes(typeof opt))) {
@@ -92,8 +100,7 @@ export const validateOptions = (args: Args, argTypes: ArgTypes): Args => {
More info: https://storybook.js.org/docs/react/writing-stories/args#mapping-to-complex-arg-values
`);
- acc[key] = args[key];
- return acc;
+ return allowArg();
}
const isArray = Array.isArray(args[key]);
@@ -101,8 +108,7 @@ export const validateOptions = (args: Args, argTypes: ArgTypes): Args => {
const isValidArray = isArray && invalidIndex === -1;
if (args[key] === undefined || options.includes(args[key]) || isValidArray) {
- acc[key] = args[key];
- return acc;
+ return allowArg();
}
const field = isArray ? `${key}[${invalidIndex}]` : key;
diff --git a/lib/store/src/autoTitle.test.ts b/lib/store/src/autoTitle.test.ts
index c2490e861bc9..b7e95b6e7268 100644
--- a/lib/store/src/autoTitle.test.ts
+++ b/lib/store/src/autoTitle.test.ts
@@ -1,6 +1,6 @@
import { normalizeStoriesEntry } from '@storybook/core-common';
-import { autoTitleFromSpecifier as auto } from './autoTitle';
+import { userOrAutoTitleFromSpecifier as userOrAuto } from './autoTitle';
expect.addSnapshotSerializer({
print: (val: any) => val,
@@ -17,125 +17,266 @@ const winOptions = {
workingDir: '\\path',
};
-describe('autoTitle', () => {
- it('no match', () => {
- expect(
- auto('./path/to/file.stories.js', normalizeStoriesEntry({ directory: './other' }, options))
- ).toBeFalsy();
- });
-
- describe('no trailing slash', () => {
- it('match with no titlePrefix', () => {
- expect(
- auto('./path/to/file.stories.js', normalizeStoriesEntry({ directory: './path' }, options))
- ).toMatchInlineSnapshot(`to/file`);
- });
-
- it('match with titlePrefix', () => {
+describe('userOrAutoTitleFromSpecifier', () => {
+ describe('user title', () => {
+ it('no match', () => {
expect(
- auto(
- './path/to/file.stories.js',
- normalizeStoriesEntry({ directory: './path', titlePrefix: 'atoms' }, options)
+ userOrAuto(
+ './ path / to / file.stories.js',
+ normalizeStoriesEntry({ directory: './ other' }, options),
+ 'title'
)
- ).toMatchInlineSnapshot(`atoms/to/file`);
+ ).toBeFalsy();
});
- it('match with trailing duplicate', () => {
- expect(
- auto(
- './path/to/button/button.stories.js',
- normalizeStoriesEntry({ directory: './path' }, options)
- )
- ).toMatchInlineSnapshot(`to/button`);
- });
+ describe('no trailing slash', () => {
+ it('match with no titlePrefix', () => {
+ expect(
+ userOrAuto(
+ './path/to/file.stories.js',
+ normalizeStoriesEntry({ directory: './path' }, options),
+ 'title'
+ )
+ ).toMatchInlineSnapshot(`title`);
+ });
- it('match with trailing index', () => {
- expect(
- auto(
- './path/to/button/index.stories.js',
- normalizeStoriesEntry({ directory: './path' }, options)
- )
- ).toMatchInlineSnapshot(`to/button`);
- });
+ it('match with titlePrefix', () => {
+ expect(
+ userOrAuto(
+ './path/to/file.stories.js',
+ normalizeStoriesEntry({ directory: './path', titlePrefix: 'atoms' }, options),
+ 'title'
+ )
+ ).toMatchInlineSnapshot(`atoms/title`);
+ });
- it('match with hyphen path', () => {
- expect(
- auto(
- './path/to-my/file.stories.js',
- normalizeStoriesEntry({ directory: './path' }, options)
- )
- ).toMatchInlineSnapshot(`to-my/file`);
- });
+ it('match with hyphen path', () => {
+ expect(
+ userOrAuto(
+ './path/to-my/file.stories.js',
+ normalizeStoriesEntry({ directory: './path', titlePrefix: 'atoms' }, options),
+ 'title'
+ )
+ ).toMatchInlineSnapshot(`atoms/title`);
+ });
- it('match with underscore path', () => {
- expect(
- auto(
- './path/to_my/file.stories.js',
- normalizeStoriesEntry({ directory: './path' }, options)
- )
- ).toMatchInlineSnapshot(`to_my/file`);
- });
+ it('match with underscore path', () => {
+ expect(
+ userOrAuto(
+ './path/to_my/file.stories.js',
+ normalizeStoriesEntry({ directory: './path', titlePrefix: 'atoms' }, options),
+ 'title'
+ )
+ ).toMatchInlineSnapshot(`atoms/title`);
+ });
- it('match with windows path', () => {
- expect(
- auto(
- './path/to_my/file.stories.js',
- normalizeStoriesEntry({ directory: '.\\path' }, winOptions)
- )
- ).toMatchInlineSnapshot(`to_my/file`);
+ it('match with windows path', () => {
+ expect(
+ userOrAuto(
+ './path/to_my/file.stories.js',
+ normalizeStoriesEntry({ directory: '.\\path', titlePrefix: 'atoms' }, winOptions),
+ 'title'
+ )
+ ).toMatchInlineSnapshot(`atoms/title`);
+ });
});
- });
- describe('trailing slash', () => {
- it('match with no titlePrefix', () => {
- expect(
- auto('./path/to/file.stories.js', normalizeStoriesEntry({ directory: './path/' }, options))
- ).toMatchInlineSnapshot(`to/file`);
- });
+ describe('trailing slash', () => {
+ it('match with no titlePrefix', () => {
+ expect(
+ userOrAuto(
+ './path/to/file.stories.js',
+ normalizeStoriesEntry({ directory: './path/' }, options),
+ 'title'
+ )
+ ).toMatchInlineSnapshot(`title`);
+ });
- it('match with titlePrefix', () => {
- expect(
- auto(
- './path/to/file.stories.js',
- normalizeStoriesEntry({ directory: './path/', titlePrefix: 'atoms' }, options)
- )
- ).toMatchInlineSnapshot(`atoms/to/file`);
- });
+ it('match with titlePrefix', () => {
+ expect(
+ userOrAuto(
+ './path/to/file.stories.js',
+ normalizeStoriesEntry({ directory: './path/', titlePrefix: 'atoms' }, options),
+ 'title'
+ )
+ ).toMatchInlineSnapshot(`atoms/title`);
+ });
- it('match with hyphen path', () => {
- expect(
- auto(
- './path/to-my/file.stories.js',
- normalizeStoriesEntry({ directory: './path/' }, options)
- )
- ).toMatchInlineSnapshot(`to-my/file`);
+ it('match with hyphen path', () => {
+ expect(
+ userOrAuto(
+ './path/to-my/file.stories.js',
+ normalizeStoriesEntry({ directory: './path/', titlePrefix: 'atoms' }, options),
+ 'title'
+ )
+ ).toMatchInlineSnapshot(`atoms/title`);
+ });
+
+ it('match with underscore path', () => {
+ expect(
+ userOrAuto(
+ './path/to_my/file.stories.js',
+ normalizeStoriesEntry({ directory: './path/', titlePrefix: 'atoms' }, options),
+ 'title'
+ )
+ ).toMatchInlineSnapshot(`atoms/title`);
+ });
+
+ it('match with windows path', () => {
+ expect(
+ userOrAuto(
+ './path/to_my/file.stories.js',
+ normalizeStoriesEntry({ directory: '.\\path\\', titlePrefix: 'atoms' }, winOptions),
+ 'title'
+ )
+ ).toMatchInlineSnapshot(`atoms/title`);
+ });
});
+ });
- it('match with underscore path', () => {
+ describe('auto title', () => {
+ it('no match', () => {
expect(
- auto(
- './path/to_my/file.stories.js',
- normalizeStoriesEntry({ directory: './path/' }, options)
+ userOrAuto(
+ './ path / to / file.stories.js',
+ normalizeStoriesEntry({ directory: './ other' }, options),
+ undefined
)
- ).toMatchInlineSnapshot(`to_my/file`);
+ ).toBeFalsy();
});
- it('match with windows path', () => {
- expect(
- auto(
- './path/to_my/file.stories.js',
- normalizeStoriesEntry({ directory: '.\\path\\' }, winOptions)
- )
- ).toMatchInlineSnapshot(`to_my/file`);
+ describe('no trailing slash', () => {
+ it('match with no titlePrefix', () => {
+ expect(
+ userOrAuto(
+ './path/to/file.stories.js',
+ normalizeStoriesEntry({ directory: './path' }, options),
+ undefined
+ )
+ ).toMatchInlineSnapshot(`to/file`);
+ });
+
+ it('match with titlePrefix', () => {
+ expect(
+ userOrAuto(
+ './path/to/file.stories.js',
+ normalizeStoriesEntry({ directory: './path', titlePrefix: 'atoms' }, options),
+ undefined
+ )
+ ).toMatchInlineSnapshot(`atoms/to/file`);
+ });
+
+ it('match with trailing duplicate', () => {
+ expect(
+ userOrAuto(
+ './path/to/button/button.stories.js',
+ normalizeStoriesEntry({ directory: './path' }, options),
+ undefined
+ )
+ ).toMatchInlineSnapshot(`to/button`);
+ });
+
+ it('match with trailing index', () => {
+ expect(
+ userOrAuto(
+ './path/to/button/index.stories.js',
+ normalizeStoriesEntry({ directory: './path' }, options),
+ undefined
+ )
+ ).toMatchInlineSnapshot(`to/button`);
+ });
+
+ it('match with hyphen path', () => {
+ expect(
+ userOrAuto(
+ './path/to-my/file.stories.js',
+ normalizeStoriesEntry({ directory: './path' }, options),
+ undefined
+ )
+ ).toMatchInlineSnapshot(`to-my/file`);
+ });
+
+ it('match with underscore path', () => {
+ expect(
+ userOrAuto(
+ './path/to_my/file.stories.js',
+ normalizeStoriesEntry({ directory: './path' }, options),
+ undefined
+ )
+ ).toMatchInlineSnapshot(`to_my/file`);
+ });
+
+ it('match with windows path', () => {
+ expect(
+ userOrAuto(
+ './path/to_my/file.stories.js',
+ normalizeStoriesEntry({ directory: '.\\path' }, winOptions),
+ undefined
+ )
+ ).toMatchInlineSnapshot(`to_my/file`);
+ });
});
- it('camel-case file', () => {
- expect(
- auto(
- './path/to_my/MyButton.stories.js',
- normalizeStoriesEntry({ directory: './path' }, options)
- )
- ).toMatchInlineSnapshot(`to_my/MyButton`);
+ describe('trailing slash', () => {
+ it('match with no titlePrefix', () => {
+ expect(
+ userOrAuto(
+ './path/to/file.stories.js',
+ normalizeStoriesEntry({ directory: './path/' }, options),
+ undefined
+ )
+ ).toMatchInlineSnapshot(`to/file`);
+ });
+
+ it('match with titlePrefix', () => {
+ expect(
+ userOrAuto(
+ './path/to/file.stories.js',
+ normalizeStoriesEntry({ directory: './path/', titlePrefix: 'atoms' }, options),
+ undefined
+ )
+ ).toMatchInlineSnapshot(`atoms/to/file`);
+ });
+
+ it('match with hyphen path', () => {
+ expect(
+ userOrAuto(
+ './path/to-my/file.stories.js',
+ normalizeStoriesEntry({ directory: './path/' }, options),
+ undefined
+ )
+ ).toMatchInlineSnapshot(`to-my/file`);
+ });
+
+ it('match with underscore path', () => {
+ expect(
+ userOrAuto(
+ './path/to_my/file.stories.js',
+ normalizeStoriesEntry({ directory: './path/' }, options),
+ undefined
+ )
+ ).toMatchInlineSnapshot(`to_my/file`);
+ });
+
+ it('match with windows path', () => {
+ expect(
+ userOrAuto(
+ './path/to_my/file.stories.js',
+ normalizeStoriesEntry({ directory: '.\\path\\' }, winOptions),
+ undefined
+ )
+ ).toMatchInlineSnapshot(`to_my/file`);
+ });
+
+ it('camel-case file', () => {
+ expect(
+ userOrAuto(
+ './path/to_my/MyButton.stories.js',
+ normalizeStoriesEntry({ directory: './path' }, options),
+ undefined
+ )
+ ).toMatchInlineSnapshot(`to_my/MyButton`);
+ });
});
});
});
diff --git a/lib/store/src/autoTitle.ts b/lib/store/src/autoTitle.ts
index ab5a571ad09f..2e98306b7c79 100644
--- a/lib/store/src/autoTitle.ts
+++ b/lib/store/src/autoTitle.ts
@@ -1,4 +1,6 @@
import slash from 'slash';
+import dedent from 'ts-dedent';
+import { once } from '@storybook/client-logger';
// FIXME: types duplicated type from `core-common', to be
// removed when we remove v6 back-compat.
@@ -48,27 +50,54 @@ function pathJoin(paths: string[]): string {
return paths.join('/').replace(slashes, '/');
}
-export const autoTitleFromSpecifier = (fileName: string, entry: NormalizedStoriesSpecifier) => {
+export const userOrAutoTitleFromSpecifier = (
+ fileName: string | number,
+ entry: NormalizedStoriesSpecifier,
+ userTitle?: string
+) => {
const { directory, importPathMatcher, titlePrefix = '' } = entry || {};
// On Windows, backslashes are used in paths, which can cause problems here
// slash makes sure we always handle paths with unix-style forward slash
- const normalizedFileName = slash(fileName);
+
+ if (typeof fileName === 'number') {
+ once.warn(dedent`
+ CSF Auto-title received a numeric fileName. This typically happens when
+ webpack is mis-configured in production mode. To force webpack to produce
+ filenames, set optimization.moduleIds = "named" in your webpack config.
+ `);
+ }
+
+ const normalizedFileName = slash(String(fileName));
if (importPathMatcher.exec(normalizedFileName)) {
- const suffix = normalizedFileName.replace(directory, '');
- const titleAndSuffix = slash(pathJoin([titlePrefix, suffix]));
- let path = titleAndSuffix.split('/');
- path = stripExtension(path);
- path = removeRedundantFilename(path);
- return path.join('/');
+ if (!userTitle) {
+ const suffix = normalizedFileName.replace(directory, '');
+ const titleAndSuffix = slash(pathJoin([titlePrefix, suffix]));
+ let path = titleAndSuffix.split('/');
+ path = stripExtension(path);
+ path = removeRedundantFilename(path);
+ return path.join('/');
+ }
+
+ if (!titlePrefix) {
+ return userTitle;
+ }
+
+ return slash(pathJoin([titlePrefix, userTitle]));
}
+
return undefined;
};
-export const autoTitle = (fileName: string, storiesEntries: NormalizedStoriesSpecifier[]) => {
+export const userOrAutoTitle = (
+ fileName: string,
+ storiesEntries: NormalizedStoriesSpecifier[],
+ userTitle?: string
+) => {
for (let i = 0; i < storiesEntries.length; i += 1) {
- const title = autoTitleFromSpecifier(fileName, storiesEntries[i]);
+ const title = userOrAutoTitleFromSpecifier(fileName, storiesEntries[i], userTitle);
if (title) return title;
}
- return undefined;
+
+ return userTitle || undefined;
};
diff --git a/lib/store/src/inferControls.ts b/lib/store/src/inferControls.ts
index 3dcbbbd1c30a..4d7526bbced0 100644
--- a/lib/store/src/inferControls.ts
+++ b/lib/store/src/inferControls.ts
@@ -23,9 +23,11 @@ const inferControl = (argType: StrictInputType, name: string, matchers: Controls
return { control: { type: 'color' } };
}
- logger.warn(
- `Addon controls: Control of type color only supports string, received "${controlType}" instead`
- );
+ if (controlType !== 'enum') {
+ logger.warn(
+ `Addon controls: Control of type color only supports string, received "${controlType}" instead`
+ );
+ }
}
// args that end with date e.g. purchaseDate
diff --git a/lib/store/src/storySort.test.ts b/lib/store/src/storySort.test.ts
index 50976f126bd5..8ffe07a3e2b9 100644
--- a/lib/store/src/storySort.test.ts
+++ b/lib/store/src/storySort.test.ts
@@ -124,4 +124,19 @@ describe('preview.storySort', () => {
expect(sortFn(fixture.a_c, fixture.a_b)).toBeLessThan(0);
expect(sortFn(fixture.a_b, fixture.a_c)).toBeGreaterThan(0);
});
+
+ it('sorts according to the nested order array with parent wildcard', () => {
+ const sortFn = storySort({
+ order: ['*', ['*', 'b', 'a']],
+ includeNames: true,
+ });
+
+ expect(sortFn(fixture.a_a, fixture.a_b)).toBeGreaterThan(0);
+ expect(sortFn(fixture.a_b, fixture.a_a)).toBeLessThan(0);
+ expect(sortFn(fixture.a_c, fixture.a_a)).toBeLessThan(0);
+ expect(sortFn(fixture.a_c, fixture.a_b)).toBeLessThan(0);
+ expect(sortFn(fixture.a_a, fixture.a_c)).toBeGreaterThan(0);
+ expect(sortFn(fixture.a_b, fixture.a_c)).toBeGreaterThan(0);
+ expect(sortFn(fixture.a_a, fixture.a_a)).toBe(0);
+ });
});
diff --git a/lib/store/src/storySort.ts b/lib/store/src/storySort.ts
index ec3d01e3040a..b1d49bfb2865 100644
--- a/lib/store/src/storySort.ts
+++ b/lib/store/src/storySort.ts
@@ -79,7 +79,8 @@ export const storySort =
}
// If a nested array is provided for a name, use it for ordering.
- const index = order.indexOf(nameA);
+ let index = order.indexOf(nameA);
+ if (index === -1) index = order.indexOf('*');
order = index !== -1 && Array.isArray(order[index + 1]) ? order[index + 1] : [];
// We'll need to look at the next part of the name.
diff --git a/lib/store/src/types.ts b/lib/store/src/types.ts
index d52a0f2588e6..6271fab4cb5c 100644
--- a/lib/store/src/types.ts
+++ b/lib/store/src/types.ts
@@ -29,9 +29,17 @@ export type ModuleExports = Record;
export type PromiseLike = Promise | SynchronousPromise;
export type ModuleImportFn = (path: Path) => PromiseLike;
+type MaybePromise = Promise | T;
+
+export type TeardownRenderToDOM = () => MaybePromise;
+export type RenderToDOM = (
+ context: RenderContext,
+ element: Element
+) => MaybePromise;
+
export type WebProjectAnnotations =
ProjectAnnotations & {
- renderToDOM?: (context: RenderContext, element: Element) => Promise | void;
+ renderToDOM?: RenderToDOM;
};
export type NormalizedProjectAnnotations =
diff --git a/lib/telemetry/README.md b/lib/telemetry/README.md
new file mode 100644
index 000000000000..7f84d318fc9e
--- /dev/null
+++ b/lib/telemetry/README.md
@@ -0,0 +1,5 @@
+# Storybook Telemetry
+
+Storybook collects completely anonymous telemetry data about general usage. Participation in this program is optional and it’s easy to opt-out.
+
+For more information visit: [storybook.js.org/telemetry](https://storybook.js.org/telemetry)
diff --git a/lib/telemetry/package.json b/lib/telemetry/package.json
new file mode 100644
index 000000000000..9399e1bc826c
--- /dev/null
+++ b/lib/telemetry/package.json
@@ -0,0 +1,61 @@
+{
+ "name": "@storybook/telemetry",
+ "version": "6.5.0-rc.1",
+ "description": "Telemetry logging for crash reports and usage statistics",
+ "keywords": [
+ "storybook"
+ ],
+ "homepage": "https://github.com/storybookjs/storybook/tree/main/lib/telemetry",
+ "bugs": {
+ "url": "https://github.com/storybookjs/storybook/issues"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/storybookjs/storybook.git",
+ "directory": "lib/telemetry"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/storybook"
+ },
+ "license": "MIT",
+ "sideEffects": false,
+ "main": "dist/cjs/index.js",
+ "module": "dist/esm/index.js",
+ "types": "dist/ts3.9/index.d.ts",
+ "typesVersions": {
+ "<3.8": {
+ "dist/ts3.9/*": [
+ "dist/ts3.4/*"
+ ]
+ }
+ },
+ "files": [
+ "dist/**/*",
+ "README.md",
+ "*.js",
+ "*.d.ts"
+ ],
+ "scripts": {
+ "prepare": "node ../../scripts/prepare.js"
+ },
+ "dependencies": {
+ "@storybook/client-logger": "6.5.0-rc.1",
+ "@storybook/core-common": "6.5.0-rc.1",
+ "chalk": "^4.1.0",
+ "core-js": "^3.8.2",
+ "detect-package-manager": "^2.0.1",
+ "fetch-retry": "^5.0.2",
+ "fs-extra": "^9.0.1",
+ "global": "^4.4.0",
+ "isomorphic-unfetch": "^3.1.0",
+ "nanoid": "^3.3.1",
+ "read-pkg-up": "^7.0.1",
+ "regenerator-runtime": "^0.13.7"
+ },
+ "publishConfig": {
+ "access": "public"
+ },
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
+ "sbmodern": "dist/modern/index.js"
+}
diff --git a/lib/telemetry/src/anonymous-id.ts b/lib/telemetry/src/anonymous-id.ts
new file mode 100644
index 000000000000..aa3c07cb318d
--- /dev/null
+++ b/lib/telemetry/src/anonymous-id.ts
@@ -0,0 +1,33 @@
+import path from 'path';
+import { execSync } from 'child_process';
+import { getProjectRoot } from '@storybook/core-common';
+import { oneWayHash } from './one-way-hash';
+
+let anonymousProjectId: string;
+export const getAnonymousProjectId = () => {
+ if (anonymousProjectId) {
+ return anonymousProjectId;
+ }
+
+ let unhashedProjectId;
+ try {
+ const projectRoot = getProjectRoot();
+
+ const projectRootPath = path.relative(projectRoot, process.cwd());
+
+ const originBuffer = execSync(`git config --local --get remote.origin.url`, {
+ timeout: 1000,
+ stdio: `pipe`,
+ });
+
+ // we use a combination of remoteUrl and working directory
+ // to separate multiple storybooks from the same project (e.g. monorepo)
+ unhashedProjectId = `${String(originBuffer).trim()}${projectRootPath}`;
+
+ anonymousProjectId = oneWayHash(unhashedProjectId);
+ } catch (_) {
+ //
+ }
+
+ return anonymousProjectId;
+};
diff --git a/lib/telemetry/src/get-monorepo-type.test.ts b/lib/telemetry/src/get-monorepo-type.test.ts
new file mode 100644
index 000000000000..0ddd8862bb0b
--- /dev/null
+++ b/lib/telemetry/src/get-monorepo-type.test.ts
@@ -0,0 +1,57 @@
+/* eslint-disable no-underscore-dangle */
+import path from 'path';
+
+import { getMonorepoType, monorepoConfigs } from './get-monorepo-type';
+
+// eslint-disable-next-line global-require, jest/no-mocks-import
+jest.mock('fs-extra', () => require('../../../__mocks__/fs-extra'));
+
+jest.mock('@storybook/core-common', () => {
+ const coreCommon = jest.requireActual('@storybook/core-common');
+ return {
+ ...coreCommon,
+ getProjectRoot: () => 'root',
+ };
+});
+
+const checkMonorepoType = ({ monorepoConfigFile, isYarnWorkspace = false }) => {
+ const mockFiles = {
+ [path.join('root', 'package.json')]: isYarnWorkspace ? '{ "workspaces": [] }' : '{}',
+ };
+
+ if (monorepoConfigFile) {
+ mockFiles[path.join('root', monorepoConfigFile)] = '{}';
+ }
+
+ // eslint-disable-next-line global-require
+ require('fs-extra').__setMockFiles(mockFiles);
+
+ return getMonorepoType();
+};
+
+describe('getMonorepoType', () => {
+ describe('Monorepos from json files', () => {
+ it.each(Object.entries(monorepoConfigs))(
+ 'should detect %p from %s file',
+ (monorepoName, monorepoConfigFile) => {
+ expect(checkMonorepoType({ monorepoConfigFile })).toEqual(monorepoName);
+ }
+ );
+ });
+
+ describe('Yarn|NPM workspaces', () => {
+ it('should detect Workspaces from package.json', () => {
+ expect(checkMonorepoType({ monorepoConfigFile: undefined, isYarnWorkspace: true })).toEqual(
+ 'Workspaces'
+ );
+ });
+ });
+
+ describe('Non-monorepos', () => {
+ it('should return undefined', () => {
+ expect(checkMonorepoType({ monorepoConfigFile: undefined, isYarnWorkspace: false })).toEqual(
+ undefined
+ );
+ });
+ });
+});
diff --git a/lib/telemetry/src/get-monorepo-type.ts b/lib/telemetry/src/get-monorepo-type.ts
new file mode 100644
index 000000000000..e9c628c521dd
--- /dev/null
+++ b/lib/telemetry/src/get-monorepo-type.ts
@@ -0,0 +1,40 @@
+import fs from 'fs-extra';
+import path from 'path';
+import type { PackageJson } from '@storybook/core-common';
+import { getProjectRoot } from '@storybook/core-common';
+
+export const monorepoConfigs = {
+ Nx: 'nx.json',
+ Turborepo: 'turbo.json',
+ Lerna: 'lerna.json',
+ Rush: 'rush.json',
+ Lage: 'lage.config.json',
+} as const;
+
+export type MonorepoType = keyof typeof monorepoConfigs | 'Workspaces' | undefined;
+
+export const getMonorepoType = (): MonorepoType => {
+ const projectRootPath = getProjectRoot();
+ if (!projectRootPath) return undefined;
+
+ const monorepoType = Object.keys(monorepoConfigs).find(
+ (monorepo: keyof typeof monorepoConfigs) => {
+ const configFile = path.join(projectRootPath, monorepoConfigs[monorepo]);
+ return fs.existsSync(configFile);
+ }
+ ) as MonorepoType;
+
+ if (monorepoType) {
+ return monorepoType;
+ }
+
+ if (!fs.existsSync(path.join(projectRootPath, 'package.json'))) return undefined;
+
+ const packageJson = fs.readJsonSync(path.join(projectRootPath, 'package.json')) as PackageJson;
+
+ if (packageJson?.workspaces) {
+ return 'Workspaces';
+ }
+
+ return undefined;
+};
diff --git a/lib/telemetry/src/index.ts b/lib/telemetry/src/index.ts
new file mode 100644
index 000000000000..864a66828577
--- /dev/null
+++ b/lib/telemetry/src/index.ts
@@ -0,0 +1,40 @@
+import { logger } from '@storybook/client-logger';
+import type { EventType, Payload, Options, TelemetryData } from './types';
+import { getStorybookMetadata } from './storybook-metadata';
+import { sendTelemetry } from './telemetry';
+import { notify } from './notify';
+import { sanitizeError } from './sanitize';
+
+export * from './storybook-metadata';
+
+export const telemetry = async (
+ eventType: EventType,
+ payload: Payload = {},
+ options?: Partial
+) => {
+ await notify();
+ const telemetryData: TelemetryData = {
+ eventType,
+ payload,
+ };
+ try {
+ telemetryData.metadata = await getStorybookMetadata(options.configDir);
+ } catch (error) {
+ if (!telemetryData.payload.error) telemetryData.payload.error = error;
+ } finally {
+ const { error } = telemetryData.payload;
+ if (error) {
+ // make sure to anonymise possible paths from error messages
+ telemetryData.payload.error = sanitizeError(error);
+ }
+
+ if (!telemetryData.payload.error || options?.enableCrashReports) {
+ if (process.env?.STORYBOOK_DEBUG_TELEMETRY) {
+ logger.info('\n[telemetry]');
+ logger.info(JSON.stringify(telemetryData, null, 2));
+ } else {
+ await sendTelemetry(telemetryData, options);
+ }
+ }
+ }
+};
diff --git a/lib/telemetry/src/notify.ts b/lib/telemetry/src/notify.ts
new file mode 100644
index 000000000000..dc57c7ff0003
--- /dev/null
+++ b/lib/telemetry/src/notify.ts
@@ -0,0 +1,32 @@
+import chalk from 'chalk';
+import { cache } from '@storybook/core-common';
+
+const TELEMETRY_KEY_NOTIFY_DATE = 'telemetry-notification-date';
+
+const logger = console;
+
+export const notify = async () => {
+ const telemetryNotifyDate = await cache.get(TELEMETRY_KEY_NOTIFY_DATE, null);
+ // The end-user has already been notified about our telemetry integration. We
+ // don't need to constantly annoy them about it.
+ // We will re-inform users about the telemetry if significant changes are
+ // ever made.
+ if (telemetryNotifyDate) {
+ return;
+ }
+
+ cache.set(TELEMETRY_KEY_NOTIFY_DATE, Date.now());
+
+ logger.log();
+ logger.log(
+ `${chalk.magenta.bold(
+ 'attention'
+ )} => Storybook now collects completely anonymous telemetry regarding usage.`
+ );
+ logger.log(`This information is used to shape Storybook's roadmap and prioritize features.`);
+ logger.log(
+ `You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:`
+ );
+ logger.log(chalk.cyan('https://storybook.js.org/telemetry'));
+ logger.log();
+};
diff --git a/lib/telemetry/src/one-way-hash.ts b/lib/telemetry/src/one-way-hash.ts
new file mode 100644
index 000000000000..039d0c714838
--- /dev/null
+++ b/lib/telemetry/src/one-way-hash.ts
@@ -0,0 +1,14 @@
+import { BinaryLike, createHash } from 'crypto';
+
+export const oneWayHash = (payload: BinaryLike): string => {
+ const hash = createHash('sha256');
+
+ // Always prepend the payload value with salt. This ensures the hash is truly
+ // one-way.
+ hash.update('storybook-telemetry-salt');
+
+ // Update is an append operation, not a replacement. The salt from the prior
+ // update is still present!
+ hash.update(payload);
+ return hash.digest('hex');
+};
diff --git a/lib/telemetry/src/package-versions.ts b/lib/telemetry/src/package-versions.ts
new file mode 100644
index 000000000000..daba180809d8
--- /dev/null
+++ b/lib/telemetry/src/package-versions.ts
@@ -0,0 +1,21 @@
+import path from 'path';
+
+import { Dependency } from './types';
+
+export const getActualPackageVersions = async (packages: Record>) => {
+ const packageNames = Object.keys(packages);
+ return Promise.all(packageNames.map(getActualPackageVersion));
+};
+
+export const getActualPackageVersion = async (packageName: string) => {
+ try {
+ // eslint-disable-next-line import/no-dynamic-require,global-require
+ const packageJson = require(path.join(packageName, 'package.json'));
+ return {
+ name: packageName,
+ version: packageJson.version,
+ };
+ } catch (err) {
+ return { name: packageName, version: null };
+ }
+};
diff --git a/lib/telemetry/src/sanitize.test.ts b/lib/telemetry/src/sanitize.test.ts
new file mode 100644
index 000000000000..89f27fcef23b
--- /dev/null
+++ b/lib/telemetry/src/sanitize.test.ts
@@ -0,0 +1,102 @@
+import { sanitizeError, cleanPaths } from './sanitize';
+
+describe(`Errors Helpers`, () => {
+ describe(`sanitizeError`, () => {
+ it(`Sanitizes current path from error stacktraces`, () => {
+ const errorMessage = `this is a test`;
+ let e;
+ try {
+ throw new Error(errorMessage);
+ } catch (error) {
+ e = error;
+ }
+ expect(e).toBeDefined();
+ expect(e.message).toEqual(errorMessage);
+ expect(e.stack).toEqual(expect.stringContaining(process.cwd()));
+
+ const sanitizedError = sanitizeError(e);
+
+ expect(sanitizedError.message).toEqual(expect.stringContaining(errorMessage));
+ expect(sanitizedError.message).toEqual(
+ expect.not.stringContaining(process.cwd().replaceAll(`\\`, `\\\\`))
+ );
+ });
+
+ it(`Sanitizes a section of the current path from error stacktrace`, () => {
+ const errorMessage = `this is a test`;
+
+ const e = {
+ message: errorMessage,
+ stack: `
+ Error: this is an error
+ at Object. (/Users/username/Code/storybook-app/storybook-config.js:1:32)
+ at Object. (/Users/username/Code/storybook-app/node_module/storybook-telemetry/blah.js:1:69)
+ at Object. (/Users/username/Code/storybook-app/node_module/fake-path/index.js:1:41)
+ at Object. (/Users/username/.fake-path/index.js:1:69)
+ at Module._compile (internal/modules/cjs/loader.js:736:30)
+ at Object.Module._extensions..js (internal/modules/cjs/loader.js:747:10)
+ at Module.load (internal/modules/cjs/loader.js:628:32)
+ at tryModuleLoad (internal/modules/cjs/loader.js:568:12)
+ at Function.Module._load (internal/modules/cjs/loader.js:560:3)
+ at Function.Module.runMain (internal/modules/cjs/loader.js:801:12)
+ at executeUserCode (internal/bootstrap/node.js:526:15)
+ at startMainThreadExecution (internal/bootstrap/node.js:439:3)
+ `,
+ };
+
+ expect(e).toBeDefined();
+ expect(e.message).toEqual(errorMessage);
+ expect(e.stack).toBeDefined();
+
+ const mockCwd = jest
+ .spyOn(process, `cwd`)
+ .mockImplementation(() => `/Users/username/Code/storybook-app`);
+
+ expect(e.stack).toEqual(expect.stringContaining(`username`));
+
+ const sanitizedError = sanitizeError(e as Error, `/`);
+
+ expect(sanitizedError.message.includes(errorMessage)).toBe(true);
+ expect(sanitizedError.stack).toEqual(expect.not.stringContaining(`username`));
+ const result = sanitizedError.stack.match(/\$SNIP/g) as Array;
+ expect(result.length).toBe(4);
+
+ mockCwd.mockRestore();
+ });
+ });
+ describe(`cleanPaths`, () => {
+ it.each([`storybook-config.js`, `src/pages/index.js`])(
+ `should clean path on unix: %s`,
+ (filePath) => {
+ const cwdMockPath = `/Users/username/storybook-app`;
+ const fullPath = `${cwdMockPath}/${filePath}`;
+
+ const mockCwd = jest.spyOn(process, `cwd`).mockImplementation(() => cwdMockPath);
+
+ const errorMessage = `This path ${fullPath} is a test ${fullPath}`;
+
+ expect(cleanPaths(errorMessage, `/`)).toBe(
+ `This path $SNIP/${filePath} is a test $SNIP/${filePath}`
+ );
+ mockCwd.mockRestore();
+ }
+ );
+
+ it.each([`storybook-config.js`, `src\\pages\\index.js`])(
+ `should clean path on windows: %s`,
+ (filePath) => {
+ const cwdMockPath = `C:\\Users\\username\\storybook-app`;
+ const fullPath = `${cwdMockPath}\\${filePath}`;
+
+ const mockCwd = jest.spyOn(process, `cwd`).mockImplementation(() => cwdMockPath);
+
+ const errorMessage = `This path ${fullPath} is a test ${fullPath}`;
+
+ expect(cleanPaths(errorMessage, `\\`)).toBe(
+ `This path $SNIP\\${filePath} is a test $SNIP\\${filePath}`
+ );
+ mockCwd.mockRestore();
+ }
+ );
+ });
+});
diff --git a/lib/telemetry/src/sanitize.ts b/lib/telemetry/src/sanitize.ts
new file mode 100644
index 000000000000..b2d9f10c8c4b
--- /dev/null
+++ b/lib/telemetry/src/sanitize.ts
@@ -0,0 +1,43 @@
+/* eslint-disable no-param-reassign */
+import { sep } from 'path';
+
+export interface IErrorWithStdErrAndStdOut {
+ stderr?: Buffer | string;
+ stdout?: Buffer | string;
+ [key: string]: unknown;
+}
+
+// Removes all user paths
+function regexpEscape(str: string): string {
+ return str.replace(/[-[/{}()*+?.\\^$|]/g, `\\$&`);
+}
+
+export function cleanPaths(str: string, separator: string = sep): string {
+ if (!str) return str;
+
+ const stack = process.cwd().split(separator);
+
+ while (stack.length > 1) {
+ const currentPath = stack.join(separator);
+ const currentRegex = new RegExp(regexpEscape(currentPath), `g`);
+ str = str.replace(currentRegex, `$SNIP`);
+
+ const currentPath2 = stack.join(separator + separator);
+ const currentRegex2 = new RegExp(regexpEscape(currentPath2), `g`);
+ str = str.replace(currentRegex2, `$SNIP`);
+
+ stack.pop();
+ }
+ return str;
+}
+
+// Takes an Error and returns a sanitized JSON String
+export function sanitizeError(error: Error, pathSeparator: string = sep): string {
+ // Hack because Node
+ error = JSON.parse(JSON.stringify(error, Object.getOwnPropertyNames(error)));
+
+ // Removes all user paths
+ const errorString = cleanPaths(JSON.stringify(error), pathSeparator);
+
+ return JSON.parse(errorString);
+}
diff --git a/lib/telemetry/src/storybook-metadata.test.ts b/lib/telemetry/src/storybook-metadata.test.ts
new file mode 100644
index 000000000000..d3366777160c
--- /dev/null
+++ b/lib/telemetry/src/storybook-metadata.test.ts
@@ -0,0 +1,209 @@
+import type { PackageJson, StorybookConfig } from '@storybook/core-common';
+
+import { computeStorybookMetadata, metaFrameworks } from './storybook-metadata';
+
+const packageJsonMock: PackageJson = {
+ name: 'some-user-project',
+ version: 'x.x.x',
+};
+
+const mainJsMock: StorybookConfig = {
+ stories: [],
+};
+
+jest.mock('./package-versions', () => {
+ const getActualPackageVersion = jest.fn((name) =>
+ Promise.resolve({
+ name,
+ version: 'x.x.x',
+ })
+ );
+
+ const getActualPackageVersions = jest.fn((packages) =>
+ Promise.all(Object.keys(packages).map(getActualPackageVersion))
+ );
+
+ return {
+ getActualPackageVersions,
+ getActualPackageVersion,
+ };
+});
+
+jest.mock('./get-monorepo-type', () => ({
+ getMonorepoType: () => 'Nx',
+}));
+
+jest.mock('detect-package-manager', () => ({
+ detect: () => 'Yarn',
+ getNpmVersion: () => '3.1.1',
+}));
+
+describe('await computeStorybookMetadata', () => {
+ test('should return frameworkOptions from mainjs', async () => {
+ const reactResult = await computeStorybookMetadata({
+ packageJson: {
+ ...packageJsonMock,
+ devDependencies: {
+ '@storybook/react': 'x.x.x',
+ },
+ },
+ mainConfig: {
+ ...mainJsMock,
+ reactOptions: {
+ fastRefresh: false,
+ },
+ },
+ });
+
+ expect(reactResult.framework).toEqual({ name: 'react', options: { fastRefresh: false } });
+
+ const angularResult = await computeStorybookMetadata({
+ packageJson: {
+ ...packageJsonMock,
+ devDependencies: {
+ '@storybook/angular': 'x.x.x',
+ },
+ },
+ mainConfig: {
+ ...mainJsMock,
+ angularOptions: {
+ enableIvy: true,
+ },
+ },
+ });
+
+ expect(angularResult.framework).toEqual({ name: 'angular', options: { enableIvy: true } });
+ });
+
+ test('should separate storybook packages and addons', async () => {
+ const result = await computeStorybookMetadata({
+ packageJson: {
+ ...packageJsonMock,
+ devDependencies: {
+ '@storybook/react': 'x.y.z',
+ '@storybook/addon-essentials': 'x.x.x',
+ '@storybook/addon-knobs': 'x.x.y',
+ 'storybook-addon-deprecated': 'x.x.z',
+ },
+ },
+ mainConfig: {
+ ...mainJsMock,
+ addons: [
+ '@storybook/addon-essentials',
+ 'storybook-addon-deprecated/register',
+ '@storybook/addon-knobs/preset',
+ ],
+ },
+ });
+
+ expect(result.addons).toMatchInlineSnapshot(`
+ Object {
+ "@storybook/addon-essentials": Object {
+ "options": undefined,
+ "version": "x.x.x",
+ },
+ "@storybook/addon-knobs": Object {
+ "options": undefined,
+ "version": "x.x.x",
+ },
+ "storybook-addon-deprecated": Object {
+ "options": undefined,
+ "version": "x.x.x",
+ },
+ }
+ `);
+ expect(result.storybookPackages).toMatchInlineSnapshot(`
+ Object {
+ "@storybook/react": Object {
+ "version": "x.x.x",
+ },
+ }
+ `);
+ });
+
+ test('should return user specified features', async () => {
+ const features = {
+ interactionsDebugger: true,
+ };
+
+ const result = await computeStorybookMetadata({
+ packageJson: packageJsonMock,
+ mainConfig: {
+ ...mainJsMock,
+ features,
+ },
+ });
+
+ expect(result.features).toEqual(features);
+ });
+
+ test('should handle different types of builders', async () => {
+ const simpleBuilder = 'webpack4';
+ const complexBuilder = {
+ name: 'webpack5',
+ options: {
+ lazyCompilation: true,
+ },
+ };
+ expect(
+ (
+ await computeStorybookMetadata({
+ packageJson: packageJsonMock,
+ mainConfig: {
+ ...mainJsMock,
+ core: {
+ builder: complexBuilder,
+ },
+ },
+ })
+ ).builder
+ ).toEqual(complexBuilder);
+ expect(
+ (
+ await computeStorybookMetadata({
+ packageJson: packageJsonMock,
+ mainConfig: {
+ ...mainJsMock,
+ core: {
+ builder: simpleBuilder,
+ },
+ },
+ })
+ ).builder
+ ).toEqual({ name: simpleBuilder });
+ });
+
+ test('should return the number of refs', async () => {
+ const res = await computeStorybookMetadata({
+ packageJson: packageJsonMock,
+ mainConfig: {
+ ...mainJsMock,
+ refs: {
+ a: { title: '', url: '' },
+ b: { title: '', url: '' },
+ },
+ },
+ });
+ expect(res.refCount).toEqual(2);
+ });
+
+ test.each(Object.entries(metaFrameworks))(
+ 'should detect the supported metaframework: %s',
+ async (metaFramework, name) => {
+ const res = await computeStorybookMetadata({
+ packageJson: {
+ ...packageJsonMock,
+ dependencies: {
+ [metaFramework]: 'x.x.x',
+ },
+ },
+ mainConfig: mainJsMock,
+ });
+ expect(res.metaFramework).toEqual({
+ name,
+ packageName: metaFramework,
+ version: 'x.x.x',
+ });
+ }
+ );
+});
diff --git a/lib/telemetry/src/storybook-metadata.ts b/lib/telemetry/src/storybook-metadata.ts
new file mode 100644
index 000000000000..562cb132e406
--- /dev/null
+++ b/lib/telemetry/src/storybook-metadata.ts
@@ -0,0 +1,206 @@
+import readPkgUp from 'read-pkg-up';
+import { detect, getNpmVersion } from 'detect-package-manager';
+import {
+ loadMainConfig,
+ getStorybookInfo,
+ getStorybookConfiguration,
+ getProjectRoot,
+} from '@storybook/core-common';
+import type { StorybookConfig, PackageJson } from '@storybook/core-common';
+
+import type { StorybookMetadata, Dependency, StorybookAddon } from './types';
+import { getActualPackageVersion, getActualPackageVersions } from './package-versions';
+import { getMonorepoType } from './get-monorepo-type';
+
+export const metaFrameworks = {
+ next: 'Next',
+ 'react-scripts': 'CRA',
+ gatsby: 'Gatsby',
+ '@nuxtjs/storybook': 'nuxt',
+ '@nrwl/storybook': 'nx',
+ '@vue/cli-service': 'vue-cli',
+ '@sveltejs/kit': 'svelte-kit',
+} as Record;
+
+// @TODO: This should be removed in 7.0 as the framework.options field in main.js will replace this
+const getFrameworkOptions = (mainConfig: any) => {
+ const possibleOptions = [
+ 'angular',
+ 'ember',
+ 'html',
+ 'preact',
+ 'react',
+ 'server',
+ 'svelte',
+ 'vue',
+ 'vue3',
+ 'webComponents',
+ ].map((opt) => `${opt}Options`);
+
+ // eslint-disable-next-line no-restricted-syntax
+ for (const opt of possibleOptions) {
+ if (opt in mainConfig) {
+ return mainConfig[opt] as any;
+ }
+ }
+
+ return undefined;
+};
+
+// Analyze a combination of information from main.js and package.json
+// to provide telemetry over a Storybook project
+export const computeStorybookMetadata = async ({
+ packageJson,
+ mainConfig,
+}: {
+ packageJson: PackageJson;
+ mainConfig: StorybookConfig & Record;
+}): Promise => {
+ const metadata: Partial = {
+ generatedAt: new Date().getTime(),
+ builder: { name: 'webpack4' },
+ hasCustomBabel: false,
+ hasCustomWebpack: false,
+ hasStaticDirs: false,
+ hasStorybookEslint: false,
+ refCount: 0,
+ };
+
+ const allDependencies = {
+ ...packageJson?.dependencies,
+ ...packageJson?.devDependencies,
+ ...packageJson?.peerDependencies,
+ };
+
+ const metaFramework = Object.keys(allDependencies).find((dep) => !!metaFrameworks[dep]);
+ if (metaFramework) {
+ const { version } = await getActualPackageVersion(metaFramework);
+ metadata.metaFramework = {
+ name: metaFrameworks[metaFramework],
+ packageName: metaFramework,
+ version,
+ };
+ }
+
+ const monorepoType = getMonorepoType();
+ if (monorepoType) {
+ metadata.monorepo = monorepoType;
+ }
+
+ try {
+ const packageManagerType = await detect({ cwd: getProjectRoot() });
+ const packageManagerVerson = await getNpmVersion(packageManagerType);
+
+ metadata.packageManager = {
+ type: packageManagerType,
+ version: packageManagerVerson,
+ };
+ // Better be safe than sorry, some codebases/paths might end up breaking with something like "spawn pnpm ENOENT"
+ // so we just set the package manager if the detection is successful
+ // eslint-disable-next-line no-empty
+ } catch (err) {}
+
+ metadata.hasCustomBabel = !!mainConfig.babel;
+ metadata.hasCustomWebpack = !!mainConfig.webpackFinal;
+ metadata.hasStaticDirs = !!mainConfig.staticDirs;
+
+ if (mainConfig.typescript) {
+ metadata.typescriptOptions = mainConfig.typescript;
+ }
+
+ if (mainConfig.core?.builder) {
+ const { builder } = mainConfig.core;
+
+ metadata.builder = {
+ name: typeof builder === 'string' ? builder : builder.name,
+ options: typeof builder === 'string' ? undefined : builder?.options ?? undefined,
+ };
+ }
+
+ if (mainConfig.refs) {
+ metadata.refCount = Object.keys(mainConfig.refs).length;
+ }
+
+ if (mainConfig.features) {
+ metadata.features = mainConfig.features;
+ }
+
+ const addons: Record = {};
+ if (mainConfig.addons) {
+ mainConfig.addons.forEach((addon) => {
+ let result;
+ let options;
+ if (typeof addon === 'string') {
+ result = addon.replace('/register', '').replace('/preset', '');
+ } else {
+ options = addon.options;
+ result = addon.name;
+ }
+
+ addons[result] = {
+ options,
+ version: undefined,
+ };
+ });
+ }
+
+ const addonVersions = await getActualPackageVersions(addons);
+ addonVersions.forEach(({ name, version }) => {
+ addons[name].version = version;
+ });
+
+ const addonNames = Object.keys(addons);
+
+ // all Storybook deps minus the addons
+ const storybookPackages = Object.keys(allDependencies)
+ .filter((dep) => dep.includes('storybook') && !addonNames.includes(dep))
+ .reduce((acc, dep) => {
+ return {
+ ...acc,
+ [dep]: { version: undefined },
+ };
+ }, {}) as Record;
+
+ const storybookPackageVersions = await getActualPackageVersions(storybookPackages);
+ storybookPackageVersions.forEach(({ name, version }) => {
+ storybookPackages[name].version = version;
+ });
+
+ const language = allDependencies.typescript ? 'typescript' : 'javascript';
+
+ const hasStorybookEslint = !!allDependencies['eslint-plugin-storybook'];
+
+ const storybookInfo = getStorybookInfo(packageJson);
+
+ const storybookVersion =
+ storybookPackages[storybookInfo.frameworkPackage]?.version || storybookInfo.version;
+
+ return {
+ ...metadata,
+ storybookVersion,
+ language,
+ storybookPackages,
+ framework: {
+ name: storybookInfo.framework,
+ options: getFrameworkOptions(mainConfig),
+ },
+ addons,
+ hasStorybookEslint,
+ };
+};
+
+let cachedMetadata: StorybookMetadata;
+export const getStorybookMetadata = async (_configDir: string) => {
+ if (cachedMetadata) {
+ return cachedMetadata;
+ }
+
+ const packageJson = readPkgUp.sync({ cwd: process.cwd() }).packageJson as PackageJson;
+ const configDir =
+ (_configDir ||
+ (getStorybookConfiguration(packageJson.scripts.storybook, '-c', '--config-dir') as string)) ??
+ '.storybook';
+ const mainConfig = loadMainConfig({ configDir });
+ cachedMetadata = await computeStorybookMetadata({ mainConfig, packageJson });
+ return cachedMetadata;
+};
diff --git a/lib/telemetry/src/telemetry.test.ts b/lib/telemetry/src/telemetry.test.ts
new file mode 100644
index 000000000000..66ed9a8ba6a3
--- /dev/null
+++ b/lib/telemetry/src/telemetry.test.ts
@@ -0,0 +1,85 @@
+/* eslint-disable no-plusplus */
+import fetch from 'isomorphic-unfetch';
+
+import { sendTelemetry } from './telemetry';
+
+jest.mock('isomorphic-unfetch');
+
+const fetchMock = fetch as jest.Mock;
+
+beforeEach(() => {
+ fetchMock.mockResolvedValue({ status: 200 });
+});
+
+it('makes a fetch request with name and data', async () => {
+ fetchMock.mockClear();
+ await sendTelemetry({ eventType: 'start', payload: { foo: 'bar' } });
+
+ expect(fetch).toHaveBeenCalledTimes(1);
+ const body = JSON.parse(fetchMock.mock.calls[0][1].body);
+ expect(body).toMatchObject({
+ eventType: 'start',
+ payload: { foo: 'bar' },
+ });
+});
+
+it('retries if fetch fails with a 503', async () => {
+ fetchMock.mockClear().mockResolvedValueOnce({ status: 503 });
+ await sendTelemetry(
+ {
+ eventType: 'start',
+ payload: { foo: 'bar' },
+ },
+ { retryDelay: 0 }
+ );
+
+ expect(fetch).toHaveBeenCalledTimes(2);
+});
+
+it('gives up if fetch repeatedly fails', async () => {
+ fetchMock.mockClear().mockResolvedValue({ status: 503 });
+ await sendTelemetry(
+ {
+ eventType: 'start',
+ payload: { foo: 'bar' },
+ },
+ { retryDelay: 0 }
+ );
+
+ expect(fetch).toHaveBeenCalledTimes(4);
+});
+
+it('await all pending telemetry when passing in immediate = true', async () => {
+ let numberOfResolvedTasks = 0;
+
+ // when we call sendTelemetry with immediate = true
+ // all pending tasks will be awaited
+ // to test this we add a few telemetry tasks that will be in the 'queue'
+ // we do NOT await these tasks!
+ sendTelemetry({
+ eventType: 'init',
+ payload: { foo: 'bar' },
+ }).then(() => {
+ numberOfResolvedTasks++;
+ });
+ sendTelemetry({
+ eventType: 'start',
+ payload: { foo: 'bar' },
+ }).then(() => {
+ numberOfResolvedTasks++;
+ });
+
+ // here we await
+ await sendTelemetry(
+ {
+ eventType: 'error-dev',
+ payload: { foo: 'bar' },
+ },
+ { retryDelay: 0, immediate: true }
+ ).then(() => {
+ numberOfResolvedTasks++;
+ });
+
+ expect(fetch).toHaveBeenCalledTimes(3);
+ expect(numberOfResolvedTasks).toBe(3);
+});
diff --git a/lib/telemetry/src/telemetry.ts b/lib/telemetry/src/telemetry.ts
new file mode 100644
index 000000000000..161794a4e703
--- /dev/null
+++ b/lib/telemetry/src/telemetry.ts
@@ -0,0 +1,57 @@
+import originalFetch from 'isomorphic-unfetch';
+import retry from 'fetch-retry';
+import { nanoid } from 'nanoid';
+import { Options, TelemetryData } from './types';
+import { getAnonymousProjectId } from './anonymous-id';
+
+const URL = 'https://storybook.js.org/event-log';
+
+const fetch = retry(originalFetch);
+
+let tasks: Promise[] = [];
+
+// getStorybookMetadata -> packagejson + Main.js
+// event specific data: sessionId, ip, etc..
+// send telemetry
+const sessionId = nanoid();
+
+export async function sendTelemetry(
+ data: TelemetryData,
+ options: Partial = { retryDelay: 1000, immediate: false }
+) {
+ // We use this id so we can de-dupe events that arrive at the index multiple times due to the
+ // use of retries. There are situations in which the request "5xx"s (or times-out), but
+ // the server actually gets the request and stores it anyway.
+
+ // flatten the data before we send it
+ const { payload, metadata, ...rest } = data;
+ const context = {
+ anonymousId: getAnonymousProjectId(),
+ inCI: process.env.CI === 'true',
+ };
+ const eventId = nanoid();
+ const body = { ...rest, eventId, sessionId, metadata, payload, context };
+ let request: Promise;
+
+ try {
+ request = fetch(URL, {
+ method: 'POST',
+ body: JSON.stringify(body),
+ headers: { 'Content-Type': 'application/json' },
+ retries: 3,
+ retryOn: [503, 504],
+ retryDelay: (attempt: number) => 2 ** attempt * options.retryDelay,
+ });
+ tasks.push(request);
+
+ if (options.immediate) {
+ await Promise.all(tasks);
+ } else {
+ await request;
+ }
+ } catch (err) {
+ //
+ } finally {
+ tasks = tasks.filter((task) => task !== request);
+ }
+}
diff --git a/lib/telemetry/src/types.ts b/lib/telemetry/src/types.ts
new file mode 100644
index 000000000000..60bc575f1631
--- /dev/null
+++ b/lib/telemetry/src/types.ts
@@ -0,0 +1,71 @@
+import type { StorybookConfig, TypescriptOptions } from '@storybook/core-common';
+import type { PM } from 'detect-package-manager';
+
+import type { MonorepoType } from './get-monorepo-type';
+
+export type EventType =
+ | 'start'
+ | 'build'
+ | 'upgrade'
+ | 'init'
+ | 'error-build'
+ | 'error-dev'
+ | 'error-metadata';
+
+export interface Dependency {
+ version: string;
+}
+
+export interface StorybookAddon extends Dependency {
+ options: any;
+}
+
+export type StorybookMetadata = {
+ storybookVersion: string;
+ generatedAt?: number;
+ language: 'typescript' | 'javascript';
+ framework: {
+ name: string;
+ options?: any;
+ };
+ builder?: {
+ name: string;
+ options?: Record;
+ };
+ monorepo?: MonorepoType;
+ packageManager?: {
+ type: PM;
+ version: string;
+ };
+ typescriptOptions?: Partial;
+ addons?: Record;
+ storybookPackages?: Record;
+ metaFramework?: {
+ name: string;
+ packageName: string;
+ version: string;
+ };
+ hasStorybookEslint?: boolean;
+ hasStaticDirs?: boolean;
+ hasCustomWebpack?: boolean;
+ hasCustomBabel?: boolean;
+ features?: StorybookConfig['features'];
+ refCount?: number;
+};
+
+export interface Payload {
+ [key: string]: any;
+}
+
+export interface Options {
+ retryDelay: number;
+ immediate: boolean;
+ configDir?: string;
+ enableCrashReports?: boolean;
+}
+
+export interface TelemetryData {
+ eventType: EventType;
+ payload: Payload;
+ metadata?: StorybookMetadata;
+}
diff --git a/lib/telemetry/src/typings.d.ts b/lib/telemetry/src/typings.d.ts
new file mode 100644
index 000000000000..2f4eb9cf4fd9
--- /dev/null
+++ b/lib/telemetry/src/typings.d.ts
@@ -0,0 +1 @@
+declare module 'global';
diff --git a/lib/telemetry/tsconfig.json b/lib/telemetry/tsconfig.json
new file mode 100644
index 000000000000..fb14222847dc
--- /dev/null
+++ b/lib/telemetry/tsconfig.json
@@ -0,0 +1,20 @@
+{
+ "extends": "../../tsconfig.json",
+ "compilerOptions": {
+ "rootDir": "./src",
+ "types": [
+ "node"
+ ]
+ },
+ "include": [
+ "src/**/*"
+ ],
+ "exclude": [
+ "src/**/*.test.*",
+ "src/**/tests/**/*",
+ "src/**/__tests__/**/*",
+ "src/**/*.stories.*",
+ "src/**/*.mockdata.*",
+ "src/**/__testfixtures__/**"
+ ]
+}
\ No newline at end of file
diff --git a/lib/theming/package.json b/lib/theming/package.json
index c7730d867304..44a904e1d05f 100644
--- a/lib/theming/package.json
+++ b/lib/theming/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/theming",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"description": "Core Storybook Components",
"keywords": [
"storybook"
@@ -40,8 +40,9 @@
"prepare": "ts-node ../../scripts/prebundle.ts"
},
"dependencies": {
- "@storybook/client-logger": "6.5.0-beta.1",
+ "@storybook/client-logger": "6.5.0-rc.1",
"core-js": "^3.8.2",
+ "memoizerific": "^1.11.3",
"regenerator-runtime": "^0.13.7"
},
"devDependencies": {
@@ -52,7 +53,6 @@
"@types/node": "^14.14.20 || ^16.0.0",
"deep-object-diff": "^1.1.0",
"global": "^4.4.0",
- "memoizerific": "^1.11.3",
"polished": "^4.2.2",
"ts-dedent": "^2.0.0",
"ts-node": "^10.4.0"
@@ -65,6 +65,6 @@
"access": "public"
},
"bundlerEntrypoint": "./src/index.ts",
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/ui/package.json b/lib/ui/package.json
index fcba0b5cbd8c..8f3566513981 100644
--- a/lib/ui/package.json
+++ b/lib/ui/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/ui",
- "version": "6.5.0-beta.1",
+ "version": "6.5.0-rc.1",
"description": "Core Storybook UI",
"keywords": [
"storybook"
@@ -40,16 +40,18 @@
"prepare": "ts-node ../../scripts/prebundle.ts"
},
"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/router": "6.5.0-beta.1",
+ "@storybook/addons": "6.5.0-rc.1",
+ "@storybook/api": "6.5.0-rc.1",
+ "@storybook/channels": "6.5.0-rc.1",
+ "@storybook/client-logger": "6.5.0-rc.1",
+ "@storybook/components": "6.5.0-rc.1",
+ "@storybook/core-events": "6.5.0-rc.1",
+ "@storybook/router": "6.5.0-rc.1",
"@storybook/semver": "^7.3.2",
- "@storybook/theming": "6.5.0-beta.1",
+ "@storybook/theming": "6.5.0-rc.1",
"core-js": "^3.8.2",
+ "memoizerific": "^1.11.3",
+ "qs": "^6.10.0",
"regenerator-runtime": "^0.13.7",
"resolve-from": "^5.0.0"
},
@@ -65,9 +67,7 @@
"global": "^4.4.0",
"lodash": "^4.17.21",
"markdown-to-jsx": "^7.1.3",
- "memoizerific": "^1.11.3",
"polished": "^4.2.2",
- "qs": "^6.10.0",
"react-draggable": "^4.4.3",
"react-helmet-async": "^1.0.7",
"react-sizeme": "^3.0.1",
@@ -83,6 +83,6 @@
"access": "public"
},
"bundlerEntrypoint": "./src/index.tsx",
- "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
+ "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/ui/src/app.stories.tsx b/lib/ui/src/app.stories.tsx
index 29cce7d842b4..bb6fdf669cbc 100644
--- a/lib/ui/src/app.stories.tsx
+++ b/lib/ui/src/app.stories.tsx
@@ -39,10 +39,11 @@ export const Default = () => (
layout={{
initialActive: 'addons',
isFullscreen: false,
- isToolshown: true,
+ showToolbar: true,
panelPosition: 'right',
showNav: true,
showPanel: true,
+ showTabs: true,
}}
panelCount={0}
docsOnly={false}
@@ -66,10 +67,11 @@ export const LoadingState = () => (
layout={{
initialActive: 'addons',
isFullscreen: false,
- isToolshown: true,
+ showToolbar: true,
panelPosition: 'right',
showNav: true,
showPanel: true,
+ showTabs: true,
}}
panelCount={0}
docsOnly={false}
diff --git a/lib/ui/src/components/layout/app.mockdata.tsx b/lib/ui/src/components/layout/app.mockdata.tsx
index 90b60171efc1..cc8d282d299f 100644
--- a/lib/ui/src/components/layout/app.mockdata.tsx
+++ b/lib/ui/src/components/layout/app.mockdata.tsx
@@ -152,8 +152,9 @@ export const mockProps: DesktopProps = {
showNav: true,
showPanel: true,
panelPosition: 'right',
- isToolshown: true,
+ showToolbar: true,
initialActive: 'canvas',
+ showTabs: true,
},
viewMode: 'story',
panelCount: 2,
@@ -182,8 +183,9 @@ export const realProps: DesktopProps = {
showNav: true,
showPanel: true,
panelPosition: 'right',
- isToolshown: true,
+ showToolbar: true,
initialActive: 'canvas',
+ showTabs: true,
},
viewMode: 'story',
panelCount: 2,
diff --git a/lib/ui/src/components/layout/container.tsx b/lib/ui/src/components/layout/container.tsx
index 6a1f8b1e4754..0628723a94af 100644
--- a/lib/ui/src/components/layout/container.tsx
+++ b/lib/ui/src/components/layout/container.tsx
@@ -300,7 +300,7 @@ export interface LayoutRenderProps {
mainProps: BasePanelRenderProps;
previewProps: BasePanelRenderProps & {
docsOnly: boolean;
- isToolshown: boolean;
+ showToolbar: boolean;
};
navProps: BasePanelRenderProps & {
hidden: boolean;
@@ -330,7 +330,7 @@ export interface LayoutProps {
showNav: boolean;
showPanel: boolean;
panelPosition: 'bottom' | 'right';
- isToolshown: boolean;
+ showToolbar: boolean;
};
viewMode: State['viewMode'];
docsOnly: boolean;
@@ -504,7 +504,7 @@ class Layout extends Component {
viewMode !== 'story' ||
panelCount === 0;
const isFullscreen = options.isFullscreen || (isNavHidden && isPanelHidden);
- const { isToolshown } = options;
+ const { showToolbar } = options;
const { panelPosition } = options;
const isPanelBottom = panelPosition === 'bottom';
@@ -569,10 +569,11 @@ class Layout extends Component {
marginTop: -margin,
}
: {
- marginLeft: -margin,
+ marginLeft: 1,
}
}
axis={isPanelBottom ? 'y' : 'x'}
+ reverse
/>
)}
@@ -590,7 +591,7 @@ class Layout extends Component {
docsOnly,
animate: !isDragging,
isFullscreen,
- isToolshown,
+ showToolbar,
position: getPreviewPosition({
isFullscreen,
isNavHidden,
diff --git a/lib/ui/src/components/layout/draggers.tsx b/lib/ui/src/components/layout/draggers.tsx
index 4424b084fdb0..6fe6dfed7a32 100644
--- a/lib/ui/src/components/layout/draggers.tsx
+++ b/lib/ui/src/components/layout/draggers.tsx
@@ -3,7 +3,7 @@ import { styled } from '@storybook/theming';
export type Axis = 'x' | 'y';
-const Handle = styled.div<{ isDragging: boolean; axis: Axis }>(
+const Handle = styled.div<{ isDragging: boolean; axis: Axis; reverse?: boolean }>(
({ theme, isDragging }) => ({
zIndex: 10,
position: 'absolute',
@@ -17,7 +17,7 @@ const Handle = styled.div<{ isDragging: boolean; axis: Axis }>(
overflow: 'hidden',
transition:
- 'color 0.2s linear, background-position 0.2s linear, background-size 0.2s linear, background 0.2s linear',
+ 'color 0.2s linear, background-size 0.2s linear, background 0.2s linear, background-position 0s linear',
'&:hover': {
color: theme.color.secondary,
},
@@ -37,7 +37,7 @@ const Handle = styled.div<{ isDragging: boolean; axis: Axis }>(
width: '100%',
marginTop: 0,
},
- ({ axis, isDragging }) => {
+ ({ axis, isDragging, reverse = false }) => {
if (axis === 'y') {
const style = {
backgroundImage: `radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%)`,
@@ -57,7 +57,7 @@ const Handle = styled.div<{ isDragging: boolean; axis: Axis }>(
const style = {
backgroundImage: `radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%)`,
backgroundSize: '50px 100%',
- backgroundPosition: '0 50%',
+ backgroundPosition: reverse ? '100% 50%' : '0 50%',
backgroundRepeat: 'no-repeat',
};
return isDragging
diff --git a/lib/ui/src/components/layout/mobile.tsx b/lib/ui/src/components/layout/mobile.tsx
index e04387bf3888..185d261e63a3 100644
--- a/lib/ui/src/components/layout/mobile.tsx
+++ b/lib/ui/src/components/layout/mobile.tsx
@@ -135,7 +135,7 @@ export interface Page {
export interface MobileProps {
options: {
initialActive: ActiveTabsType;
- isToolshown: boolean;
+ showToolbar: boolean;
isFullscreen: boolean;
};
Sidebar: ComponentType;
@@ -181,7 +181,7 @@ class Mobile extends Component {