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

Merge pull request #17807 from storybookjs/tech/docs-2-0

Browse Source
This commit is contained in:
Tom Coleman 2022-04-07 14:47:52 +10:00 committed by GitHub
commit a976122dd5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
36 changed files with 1672 additions and 324 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
examples/external-docs/.babelrc Normal file
View File

@ -0,0 +1,7 @@
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript"
]
}

3
examples/external-docs/README.md Normal file
View File

@ -0,0 +1,3 @@
# Storybook External Docs Example
This example demostrates using Stories in an app built outside of SB's build process.

39
examples/external-docs/package.json Normal file
View File

@ -0,0 +1,39 @@
{
"name": "@storybook/external-docs",
"version": "6.5.0-alpha.55",
"private": true,
"scripts": {
"build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./src/.storybook",
"debug": "cross-env NODE_OPTIONS=--inspect-brk STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011",
"sb": "node ../../lib/cli/bin/index.js",
"start": "SKIP_PREFLIGHT_CHECK=true react-scripts start",
"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-alpha.58",
"@storybook/components": "6.5.0-alpha.58",
"@storybook/csf": "0.0.2--canary.87bc651.0",
"@storybook/preview-web": "6.5.0-alpha.58",
"@storybook/react": "6.5.0-alpha.58",
"@storybook/store": "6.5.0-alpha.58",
"@storybook/theming": "6.5.0-alpha.58",
"formik": "^2.2.9",
"prop-types": "15.7.2",
"react": "16.14.0",
"react-dom": "16.14.0",
"react-scripts": "^4.0.2"
},
"devDependencies": {
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"@babel/preset-typescript": "^7.12.7",
"@testing-library/dom": "^7.31.2",
"@testing-library/user-event": "^13.1.9",
"@types/babel__preset-env": "^7",
"@types/react": "^16.14.23",
"@types/react-dom": "^16.9.14",
"cross-env": "^7.0.3",
"typescript": "^3.9.7",
"webpack": "4"
}
}

BIN
examples/external-docs/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

43
examples/external-docs/public/index.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

BIN
examples/external-docs/public/logo192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
examples/external-docs/public/logo512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

25
examples/external-docs/public/manifest.json Normal file
View File

@ -0,0 +1,25 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

2
examples/external-docs/public/robots.txt Normal file
View File

@ -0,0 +1,2 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *

34
examples/external-docs/src/.storybook/main.ts Normal file
View File

@ -0,0 +1,34 @@
import type { StorybookConfig } from '@storybook/react/types';
const config: StorybookConfig = {
stories: [
{
directory: '../components',
titlePrefix: 'Demo',
},
],
logLevel: 'debug',
addons: ['@storybook/addon-essentials'],
typescript: {
check: true,
checkOptions: {},
reactDocgenTypescriptOptions: {
propFilter: (prop) => ['label', 'disabled'].includes(prop.name),
},
},
core: {
builder: { name: 'webpack4' },
channelOptions: { allowFunction: false, maxDepth: 10 },
},
features: {
postcss: false,
// modernInlineRender: true,
storyStoreV7: !global.navigator?.userAgent?.match?.('jsdom'),
buildStoriesJson: true,
babelModeV7: true,
warnOnLegacyHierarchySeparator: false,
previewMdx2: true,
},
framework: '@storybook/react',
};
module.exports = config;

28
examples/external-docs/src/.storybook/preview.js Normal file
View File

@ -0,0 +1,28 @@
import React from 'react';
import { ThemeProvider, convert, themes } from '@storybook/theming';
export const parameters = {
options: {
// storySortV6: (a, b) => (
// a[1].kind === b[1].kind
// ? 0
// : a[1].id.localeCompare(b[1].id, undefined, { numeric: true });
// ),
// storySortV7: (a, b) => (
// a.title === b.title
// ? 0
// : a.id.localeCompare(b.id, undefined, { numeric: true });
// ),
storySort: {
order: ['Examples', 'Docs', 'Demo'],
},
},
};
export const decorators = [
(StoryFn) => (
<ThemeProvider theme={convert(themes.light)}>
<StoryFn />
</ThemeProvider>
),
];

14
examples/external-docs/src/SecondStoriesPage.tsx Normal file
View File

@ -0,0 +1,14 @@
import React from 'react';
import { DocsProvider, Meta, Story } from './blocks';
import meta, { Standard } from './components/AccountForm.stories';
export default () => (
<DocsProvider>
<div>
<Meta of={meta} />
<Story of={Standard} />
</div>
</DocsProvider>
);

18
examples/external-docs/src/StoriesPage.tsx Normal file
View File

@ -0,0 +1,18 @@
import React from 'react';
import { DocsProvider, Meta, Story } from './blocks';
import meta, { WithArgs, Basic } from './components/button.stories';
import EmojiMeta, { WithArgs as EmojiWithArgs } from './components/emoji-button.stories';
export default () => (
<DocsProvider>
<div>
<Meta of={meta} />
<Story of={WithArgs} />
<Story of={Basic} />
<Story of={EmojiWithArgs} meta={EmojiMeta} />
</div>
</DocsProvider>
);

171
examples/external-docs/src/blocks.tsx Normal file
View File

@ -0,0 +1,171 @@
import React, { createContext, useContext, useRef, useEffect } from 'react';
import { Preview } from '@storybook/preview-web';
import { Path, ModuleExports, StoryIndex } from '@storybook/store';
import { toId, AnyFramework, ComponentTitle, StoryId } from '@storybook/csf';
// @ts-ignore
import * as reactAnnotations from '@storybook/react/dist/esm/client/preview/config';
// @ts-ignore
import * as previewAnnotations from './.storybook/preview';
type StoryExport = any;
type MetaExport = any;
type ExportName = string;
const projectAnnotations = {
...reactAnnotations,
...previewAnnotations,
};
const DocsContext = createContext<{
setMeta: (meta: MetaExport) => void;
addStory: (story: StoryExport, storyMeta?: MetaExport) => void;
renderStory: (story: StoryExport, element: HTMLElement) => void;
}>({
setMeta: () => {},
addStory: () => {},
renderStory: () => {},
});
export const DocsProvider: React.FC = ({ children }) => {
let pageMeta: MetaExport;
const setMeta = (m: MetaExport) => {
pageMeta = m;
};
let nextImportPath = 0;
const importPaths = new Map<MetaExport, Path>();
const getImportPath = (meta: MetaExport) => {
if (!importPaths.has(meta)) {
importPaths.set(meta, `importPath-${nextImportPath}`);
nextImportPath += 1;
}
return importPaths.get(meta) as Path;
};
let nextTitle = 0;
const titles = new Map<MetaExport, ComponentTitle>();
const getTitle = (meta: MetaExport) => {
if (!titles.has(meta)) {
titles.set(meta, `title-${nextTitle}`);
nextTitle += 1;
}
return titles.get(meta);
};
let nextExportName = 0;
const exportNames = new Map<StoryExport, ExportName>();
const getExportName = (story: StoryExport) => {
if (!exportNames.has(story)) {
exportNames.set(story, `export-${nextExportName}`);
nextExportName += 1;
}
return exportNames.get(story) as ExportName;
};
const storyIds = new Map<StoryExport, StoryId>();
const storyIndex: StoryIndex = { v: 3, stories: {} };
const knownCsfFiles: Record<Path, ModuleExports> = {};
const addStory = (storyExport: StoryExport, storyMeta?: MetaExport) => {
const meta = storyMeta || pageMeta;
const importPath: Path = getImportPath(meta);
const title: ComponentTitle = meta.title || getTitle(meta);
const exportName = getExportName(storyExport);
const storyId = toId(title, exportName);
storyIds.set(storyExport, storyId);
if (!knownCsfFiles[importPath]) {
knownCsfFiles[importPath] = {
default: meta,
};
}
knownCsfFiles[importPath][exportName] = storyExport;
storyIndex.stories[storyId] = {
id: storyId,
importPath,
title,
name: 'Name',
};
};
let previewPromise: Promise<Preview<AnyFramework>>;
const getPreview = () => {
const importFn = (importPath: Path) => {
console.log(knownCsfFiles, importPath);
return Promise.resolve(knownCsfFiles[importPath]);
};
if (!previewPromise) {
previewPromise = (async () => {
// @ts-ignore
// eslint-disable-next-line no-undef
if (window.preview) {
// @ts-ignore
// eslint-disable-next-line no-undef
(window.preview as PreviewWeb<AnyFramework>).onStoriesChanged({
importFn,
storyIndex,
});
} else {
const preview = new Preview();
await preview.initialize({
getStoryIndex: () => storyIndex,
importFn,
getProjectAnnotations: () => projectAnnotations,
});
// @ts-ignore
// eslint-disable-next-line no-undef
window.preview = preview;
}
// @ts-ignore
// eslint-disable-next-line no-undef
return window.preview;
})();
}
return previewPromise;
};
const renderStory = async (storyExport: any, element: HTMLElement) => {
const preview = await getPreview();
const storyId = storyIds.get(storyExport);
if (!storyId) throw new Error(`Didn't find story id '${storyId}'`);
const story = await preview.storyStore.loadStory({ storyId });
console.log({ story });
preview.renderStoryToElement(story, element);
};
return (
<DocsContext.Provider value={{ setMeta, addStory, renderStory }}>
{children}
</DocsContext.Provider>
);
};
export function Meta({ of }: { of: any }) {
const { setMeta } = useContext(DocsContext);
setMeta(of);
return null;
}
export function Story({ of, meta }: { of: any; meta?: any }) {
const { addStory, renderStory } = useContext(DocsContext);
addStory(of, meta);
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
if (ref.current) renderStory(of, ref.current);
});
return <div ref={ref} />;
}

95
examples/external-docs/src/components/AccountForm.stories.tsx Normal file
View File

@ -0,0 +1,95 @@
/* eslint-disable storybook/await-interactions */
/* eslint-disable storybook/use-storybook-testing-library */
// @TODO: use addon-interactions and remove the rule disable above
import { ComponentStoryObj, ComponentMeta } from '@storybook/react';
import { screen } from '@testing-library/dom';
import userEvent from '@testing-library/user-event';
import { AccountForm } from './AccountForm';
export default {
// Title not needed due to CSF3 auto-title
// title: 'Demo/AccountForm',
component: AccountForm,
parameters: {
layout: 'centered',
},
} as ComponentMeta<typeof AccountForm>;
// export const Standard = (args: any) => <AccountForm {...args} />;
// Standard.args = { passwordVerification: false };
// Standard.play = () => userEvent.type(screen.getByTestId('email'), 'michael@chromatic.com');
export const Standard: ComponentStoryObj<typeof AccountForm> = {
// render: (args: AccountFormProps) => <AccountForm {...args} />,
args: { passwordVerification: false },
};
export const StandardEmailFilled = {
...Standard,
play: () => userEvent.type(screen.getByTestId('email'), 'michael@chromatic.com'),
};
export const StandardEmailFailed = {
...Standard,
play: async () => {
await userEvent.type(screen.getByTestId('email'), 'michael@chromatic.com.com@com');
await userEvent.type(screen.getByTestId('password1'), 'testpasswordthatwontfail');
await userEvent.click(screen.getByTestId('submit'));
},
};
export const StandardPasswordFailed = {
...Standard,
play: async () => {
await StandardEmailFilled.play();
await userEvent.type(screen.getByTestId('password1'), 'asdf');
await userEvent.click(screen.getByTestId('submit'));
},
};
const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
export const StandardFailHover = {
...StandardPasswordFailed,
play: async () => {
await StandardPasswordFailed.play();
await sleep(100);
await userEvent.hover(screen.getByTestId('password-error-info'));
},
};
export const Verification: ComponentStoryObj<typeof AccountForm> = {
args: { passwordVerification: true },
};
export const VerificationPasssword1 = {
...Verification,
play: async () => {
await StandardEmailFilled.play();
await userEvent.type(screen.getByTestId('password1'), 'asdfasdf');
await userEvent.click(screen.getByTestId('submit'));
},
};
export const VerificationPasswordMismatch = {
...Verification,
play: async () => {
await StandardEmailFilled.play();
await userEvent.type(screen.getByTestId('password1'), 'asdfasdf');
await userEvent.type(screen.getByTestId('password2'), 'asdf1234');
await userEvent.click(screen.getByTestId('submit'));
},
};
export const VerificationSuccess = {
...Verification,
play: async () => {
await StandardEmailFilled.play();
await sleep(1000);
await userEvent.type(screen.getByTestId('password1'), 'asdfasdf', { delay: 50 });
await sleep(1000);
await userEvent.type(screen.getByTestId('password2'), 'asdfasdf', { delay: 50 });
await sleep(1000);
await userEvent.click(screen.getByTestId('submit'));
},
};

552
examples/external-docs/src/components/AccountForm.tsx Normal file
View File

@ -0,0 +1,552 @@
import { keyframes, styled } from '@storybook/theming';
import {
ErrorMessage,
Field as FormikInput,
Form as FormikForm,
Formik,
FormikProps,
} from 'formik';
import React, { FC, HTMLAttributes, useCallback, useState } from 'react';
import { Icons, WithTooltip } from '@storybook/components';
const errorMap = {
email: {
required: {
normal: 'Please enter your email address',
tooltip:
'We do require an email address and a password as a minimum in order to be able to create an account for you to log in with',
},
format: {
normal: 'Please enter a correctly formatted email address',
tooltip:
'Your email address is formatted incorrectly and is not correct - please double check for misspelling',
},
},
password: {
required: {
normal: 'Please enter a password',
tooltip: 'A password is requried to create an account',
},
length: {
normal: 'Please enter a password of minimum 6 characters',
tooltip:
'For security reasons we enforce a password length of minimum 6 characters - but have no other requirements',
},
},
verifiedPassword: {
required: {
normal: 'Please verify your password',
tooltip:
'Verification of your password is required to ensure no errors in the spelling of the password',
},
match: {
normal: 'Your passwords do not match',
tooltip:
'Your verification password has to match your password to make sure you have not misspelled',
},
},
};
// https://emailregex.com/
const email99RegExp = new RegExp(
// eslint-disable-next-line no-useless-escape
/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
);
export interface AccountFormResponse {
success: boolean;
}
export interface AccountFormValues {
email: string;
password: string;
}
interface FormValues extends AccountFormValues {
verifiedPassword: string;
}
interface FormErrors {
email?: string;
emailTooltip?: string;
password?: string;
passwordTooltip?: string;
verifiedPassword?: string;
verifiedPasswordTooltip?: string;
}
export type AccountFormProps = {
passwordVerification?: boolean;
onSubmit?: (values: AccountFormValues) => void;
onTransactionStart?: (values: AccountFormValues) => void;
onTransactionEnd?: (values: AccountFormResponse) => void;
};
export const AccountForm: FC<AccountFormProps> = ({
passwordVerification,
onSubmit,
onTransactionStart,
onTransactionEnd,
}) => {
const [state, setState] = useState({
transacting: false,
transactionSuccess: false,
transactionFailure: false,
});
const handleFormSubmit = useCallback(
async ({ email, password }: FormValues, { setSubmitting, resetForm }) => {
if (onSubmit) {
onSubmit({ email, password });
}
if (onTransactionStart) {
onTransactionStart({ email, password });
}
setSubmitting(true);
setState({
...state,
transacting: true,
});
await new Promise((r) => setTimeout(r, 2100));
const success = Math.random() < 1;
if (onTransactionEnd) {
onTransactionEnd({ success });
}
setSubmitting(false);
resetForm({ values: { email: '', password: '', verifiedPassword: '' } });
setState({
...state,
transacting: false,
transactionSuccess: success === true,
transactionFailure: success === false,
});
},
[setState, onTransactionEnd, onTransactionStart]
);
return (
<Wrapper>
<Brand>
<Logo
aria-label="Storybook Logo"
viewBox="0 0 64 64"
transacting={state.transacting}
role="img"
>
<title>Storybook icon</title>
<g id="Artboard" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<path
d="M8.04798541,58.7875918 L6.07908839,6.32540407 C6.01406344,4.5927838 7.34257463,3.12440831 9.07303814,3.01625434 L53.6958037,0.227331489 C55.457209,0.117243658 56.974354,1.45590096 57.0844418,3.21730626 C57.0885895,3.28366922 57.0906648,3.35014546 57.0906648,3.41663791 L57.0906648,60.5834697 C57.0906648,62.3483119 55.6599776,63.7789992 53.8951354,63.7789992 C53.847325,63.7789992 53.7995207,63.7779262 53.7517585,63.775781 L11.0978899,61.8600599 C9.43669044,61.7854501 8.11034889,60.4492961 8.04798541,58.7875918 Z"
id="path-1"
fill="#FF4785"
fillRule="nonzero"
/>
<path
d="M35.9095005,24.1768792 C35.9095005,25.420127 44.2838488,24.8242707 45.4080313,23.9509748 C45.4080313,15.4847538 40.8652557,11.0358878 32.5466666,11.0358878 C24.2280775,11.0358878 19.5673077,15.553972 19.5673077,22.3311017 C19.5673077,34.1346028 35.4965208,34.3605071 35.4965208,40.7987804 C35.4965208,42.606015 34.6115646,43.6790606 32.6646607,43.6790606 C30.127786,43.6790606 29.1248356,42.3834613 29.2428298,37.9783269 C29.2428298,37.0226907 19.5673077,36.7247626 19.2723223,37.9783269 C18.5211693,48.6535354 25.1720308,51.7326752 32.7826549,51.7326752 C40.1572906,51.7326752 45.939005,47.8018145 45.939005,40.6858282 C45.939005,28.035186 29.7738035,28.3740425 29.7738035,22.1051974 C29.7738035,19.5637737 31.6617103,19.2249173 32.7826549,19.2249173 C33.9625966,19.2249173 36.0864917,19.4328883 35.9095005,24.1768792 Z"
id="path9_fill-path"
fill="#FFFFFF"
fillRule="nonzero"
/>
<path
d="M44.0461638,0.830433986 L50.1874092,0.446606143 L50.443532,7.7810017 C50.4527198,8.04410717 50.2468789,8.26484453 49.9837734,8.27403237 C49.871115,8.27796649 49.7607078,8.24184808 49.6721567,8.17209069 L47.3089847,6.3104681 L44.5110468,8.43287463 C44.3012992,8.591981 44.0022839,8.55092814 43.8431776,8.34118051 C43.7762017,8.25288717 43.742082,8.14401677 43.7466857,8.03329059 L44.0461638,0.830433986 Z"
id="Path"
fill="#FFFFFF"
/>
</g>
</Logo>
<Title aria-label="Storybook" viewBox="0 0 200 40" role="img">
<title>Storybook</title>
<g fill="none" fillRule="evenodd">
<path
d="M53.3 31.7c-1.7 0-3.4-.3-5-.7-1.5-.5-2.8-1.1-3.9-2l1.6-3.5c2.2 1.5 4.6 2.3 7.3 2.3 1.5 0 2.5-.2 3.3-.7.7-.5 1.1-1 1.1-1.9 0-.7-.3-1.3-1-1.7s-2-.8-3.7-1.2c-2-.4-3.6-.9-4.8-1.5-1.1-.5-2-1.2-2.6-2-.5-1-.8-2-.8-3.2 0-1.4.4-2.6 1.2-3.6.7-1.1 1.8-2 3.2-2.6 1.3-.6 2.9-.9 4.7-.9 1.6 0 3.1.3 4.6.7 1.5.5 2.7 1.1 3.5 2l-1.6 3.5c-2-1.5-4.2-2.3-6.5-2.3-1.3 0-2.3.2-3 .8-.8.5-1.2 1.1-1.2 2 0 .5.2 1 .5 1.3.2.3.7.6 1.4.9l2.9.8c2.9.6 5 1.4 6.2 2.4a5 5 0 0 1 2 4.2 6 6 0 0 1-2.5 5c-1.7 1.2-4 1.9-7 1.9zm21-3.6l1.4-.1-.2 3.5-1.9.1c-2.4 0-4.1-.5-5.2-1.5-1.1-1-1.6-2.7-1.6-4.8v-6h-3v-3.6h3V11h4.8v4.6h4v3.6h-4v6c0 1.8.9 2.8 2.6 2.8zm11.1 3.5c-1.6 0-3-.3-4.3-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.3-1 1.7 0 3.2.3 4.4 1a7 7 0 0 1 3 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.4 1zm0-3.6c2.4 0 3.6-1.6 3.6-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.6-1c-2.3 0-3.5 1.4-3.5 4.4 0 3 1.2 4.6 3.5 4.6zm21.7-8.8l-2.7.3c-1.3.2-2.3.5-2.8 1.2-.6.6-.9 1.4-.9 2.5v8.2H96V15.7h4.6v2.6c.8-1.8 2.5-2.8 5-3h1.3l.3 4zm14-3.5h4.8L116.4 37h-4.9l3-6.6-6.4-14.8h5l4 10 4-10zm16-.4c1.4 0 2.6.3 3.6 1 1 .6 1.9 1.6 2.5 2.8.6 1.2.9 2.7.9 4.3 0 1.6-.3 3-1 4.3a6.9 6.9 0 0 1-2.4 2.9c-1 .7-2.2 1-3.6 1-1 0-2-.2-3-.7-.8-.4-1.5-1-2-1.9v2.4h-4.7V8.8h4.8v9c.5-.8 1.2-1.4 2-1.9.9-.4 1.8-.6 3-.6zM135.7 28c1.1 0 2-.4 2.6-1.2.6-.8 1-2 1-3.4 0-1.5-.4-2.5-1-3.3s-1.5-1.1-2.6-1.1-2 .3-2.6 1.1c-.6.8-1 2-1 3.3 0 1.5.4 2.6 1 3.4.6.8 1.5 1.2 2.6 1.2zm18.9 3.6c-1.7 0-3.2-.3-4.4-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.4-1 1.6 0 3 .3 4.3 1a7 7 0 0 1 3 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.3 1zm0-3.6c2.3 0 3.5-1.6 3.5-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.5-1c-2.4 0-3.6 1.4-3.6 4.4 0 3 1.2 4.6 3.6 4.6zm18 3.6c-1.7 0-3.2-.3-4.4-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.4-1 1.6 0 3 .3 4.4 1a7 7 0 0 1 2.9 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.3 1zm0-3.6c2.3 0 3.5-1.6 3.5-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.5-1c-2.4 0-3.6 1.4-3.6 4.4 0 3 1.2 4.6 3.6 4.6zm27.4 3.4h-6l-6-7v7h-4.8V8.8h4.9v13.6l5.8-6.7h5.7l-6.6 7.5 7 8.2z"
fill="currentColor"
/>
</g>
</Title>
</Brand>
{!state.transactionSuccess && !state.transactionFailure && (
<Introduction>Create an account to join the Storybook community</Introduction>
)}
<Content>
{state.transactionSuccess && !state.transactionFailure && (
<Presentation>
<p>
Everything is perfect. Your account is ready and we should probably get you started!
</p>
<p>So why don't you get started then?</p>
<Submit
dirty
onClick={() => {
setState({
transacting: false,
transactionSuccess: false,
transactionFailure: false,
});
}}
>
Go back
</Submit>
</Presentation>
)}
{state.transactionFailure && !state.transactionSuccess && (
<Presentation>
<p>What a mess, this API is not working</p>
<p>
Someone should probably have a stern talking to about this, but it won't be me - coz
I'm gonna head out into the nice weather
</p>
<Submit
dirty
onClick={() => {
setState({
transacting: false,
transactionSuccess: false,
transactionFailure: false,
});
}}
>
Go back
</Submit>
</Presentation>
)}
{!state.transactionSuccess && !state.transactionFailure && (
<Formik
initialValues={{ email: '', password: '', verifiedPassword: '' }}
validateOnBlur={false}
validateOnChange={false}
onSubmit={handleFormSubmit}
validate={({ email, password, verifiedPassword }) => {
const errors: FormErrors = {};
if (!email) {
errors.email = errorMap.email.required.normal;
errors.emailTooltip = errorMap.email.required.tooltip;
} else {
const validEmail = email.match(email99RegExp);
if (validEmail === null) {
errors.email = errorMap.email.format.normal;
errors.emailTooltip = errorMap.email.format.tooltip;
}
}
if (!password) {
errors.password = errorMap.password.required.normal;
errors.passwordTooltip = errorMap.password.required.tooltip;
} else if (password.length < 6) {
errors.password = errorMap.password.length.normal;
errors.passwordTooltip = errorMap.password.length.tooltip;
}
if (passwordVerification && !verifiedPassword) {
errors.verifiedPassword = errorMap.verifiedPassword.required.normal;
errors.verifiedPasswordTooltip = errorMap.verifiedPassword.required.tooltip;
} else if (passwordVerification && password !== verifiedPassword) {
errors.verifiedPassword = errorMap.verifiedPassword.match.normal;
errors.verifiedPasswordTooltip = errorMap.verifiedPassword.match.tooltip;
}
return errors;
}}
>
{({ errors: _errors, isSubmitting, dirty }: FormikProps<FormValues>) => {
const errors = _errors as FormErrors;
return (
<Form noValidate aria-disabled={isSubmitting ? 'true' : 'false'}>
<FieldWrapper>
<Label htmlFor="email">Email</Label>
<FormikInput id="email" name="email">
{({ field }: { field: HTMLAttributes<HTMLInputElement> }) => (
<>
<Input
data-testid="email"
aria-required="true"
aria-disabled={isSubmitting ? 'true' : 'false'}
disabled={isSubmitting}
type="email"
aria-invalid={errors.email ? 'true' : 'false'}
{...field}
/>
{errors.email && (
<WithTooltip
tooltip={<ErrorTooltip>{errors.emailTooltip}</ErrorTooltip>}
>
<ErrorWrapper>
<ErrorIcon icon="question" height={14} />
<Error name="email" component="div" />
</ErrorWrapper>
</WithTooltip>
)}
</>
)}
</FormikInput>
</FieldWrapper>
<FieldWrapper>
<Label htmlFor="password">Password</Label>
<FormikInput id="password" name="password">
{({ field }: { field: HTMLAttributes<HTMLInputElement> }) => (
<Input
data-testid="password1"
aria-required="true"
aria-disabled={isSubmitting ? 'true' : 'false'}
aria-invalid={errors.password ? 'true' : 'false'}
type="password"
disabled={isSubmitting}
{...field}
/>
)}
</FormikInput>
{errors.password && (
<WithTooltip tooltip={<ErrorTooltip>{errors.passwordTooltip}</ErrorTooltip>}>
<ErrorWrapper data-testid="password-error-info">
<ErrorIcon icon="question" height={14} />
<Error name="password" component="div" />
</ErrorWrapper>
</WithTooltip>
)}
</FieldWrapper>
{passwordVerification && (
<FieldWrapper>
<Label htmlFor="verifiedPassword">Verify Password</Label>
<FormikInput id="verifiedPassword" name="verifiedPassword">
{({ field }: { field: HTMLAttributes<HTMLInputElement> }) => (
<Input
data-testid="password2"
aria-required="true"
aria-disabled={isSubmitting ? 'true' : 'false'}
aria-invalid={errors.verifiedPassword ? 'true' : 'false'}
type="password"
disabled={isSubmitting}
{...field}
/>
)}
</FormikInput>
{errors.verifiedPassword && (
<WithTooltip
tooltip={<ErrorTooltip>{errors.verifiedPasswordTooltip}</ErrorTooltip>}
>
<ErrorWrapper>
<ErrorIcon icon="question" height={14} />
<Error name="verifiedPassword" component="div" />
</ErrorWrapper>
</WithTooltip>
)}
</FieldWrapper>
)}
<Actions>
<Submit
data-testid="submit"
aria-disabled={isSubmitting || !dirty ? 'true' : 'false'}
disabled={isSubmitting || !dirty}
dirty={dirty}
type="submit"
>
Create Account
</Submit>
<Reset
aria-disabled={isSubmitting ? 'true' : 'false'}
disabled={isSubmitting}
type="reset"
>
Reset
</Reset>
</Actions>
</Form>
);
}}
</Formik>
)}
</Content>
</Wrapper>
);
};
const Wrapper = styled.section(({ theme }) => ({
fontFamily: theme.typography.fonts.base,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
width: 450,
padding: 32,
backgroundColor: theme.background.content,
borderRadius: 7,
}));
const Brand = styled.div({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
});
const Title = styled.svg({
height: 40,
zIndex: 1,
left: -32,
position: 'relative',
});
const logoAnimation = keyframes({
'0': {
transform: 'rotateY(0deg)',
transformOrigin: '50% 5% 0',
},
'100%': {
transform: 'rotateY(360deg)',
transformOrigin: '50% 5% 0',
},
});
interface LogoProps {
transacting: boolean;
}
const Logo = styled.svg<LogoProps>(
({ transacting }) =>
transacting && {
animation: `${logoAnimation} 1250ms both infinite`,
},
{ height: 40, zIndex: 10, marginLeft: 32 }
);
const Introduction = styled.p({
marginTop: 20,
textAlign: 'center',
});
const Content = styled.div({
display: 'flex',
alignItems: 'flex-start',
justifyContent: 'center',
width: 350,
minHeight: 189,
marginTop: 8,
});
const Presentation = styled.div({
textAlign: 'center',
});
const Form = styled(FormikForm)({
width: '100%',
alignSelf: 'flex-start',
'&[aria-disabled="true"]': {
opacity: 0.6,
},
});
const FieldWrapper = styled.div({
display: 'flex',
flexDirection: 'column',
justifyContent: 'stretch',
marginBottom: 10,
});
const Label = styled.label({
fontSize: 13,
fontWeight: 500,
marginBottom: 6,
});
const Input = styled.input(({ theme }) => ({
fontSize: 14,
color: theme.color.defaultText,
padding: '10px 15px',
borderRadius: 4,
appearance: 'none',
outline: 'none',
border: '0 none',
boxShadow: 'rgb(0 0 0 / 10%) 0px 0px 0px 1px inset',
'&:focus': {
boxShadow: 'rgb(30 167 253) 0px 0px 0px 1px inset',
},
'&:active': {
boxShadow: 'rgb(30 167 253) 0px 0px 0px 1px inset',
},
'&[aria-invalid="true"]': {
boxShadow: 'rgb(255 68 0) 0px 0px 0px 1px inset',
},
}));
const ErrorWrapper = styled.div({
display: 'flex',
alignItems: 'flex-start',
fontSize: 11,
marginTop: 6,
cursor: 'help',
});
const ErrorIcon = styled(Icons)(({ theme }) => ({
fill: theme.color.defaultText,
opacity: 0.8,
marginRight: 6,
marginLeft: 2,
marginTop: 1,
}));
const ErrorTooltip = styled.div(({ theme }) => ({
fontFamily: theme.typography.fonts.base,
fontSize: 13,
padding: 8,
maxWidth: 350,
}));
const Actions = styled.div({
alignSelf: 'stretch',
display: 'flex',
justifyContent: 'space-between',
marginTop: 24,
});
const Error = styled(ErrorMessage)({});
interface ButtonProps {
dirty?: boolean;
}
const Button = styled.button<ButtonProps>({
backgroundColor: 'transparent',
border: '0 none',
outline: 'none',
appearance: 'none',
fontWeight: 500,
fontSize: 12,
flexBasis: '50%',
cursor: 'pointer',
padding: '11px 16px',
borderRadius: 4,
textTransform: 'uppercase',
'&:focus': {
textDecoration: 'underline',
fontWeight: 700,
},
'&:active': {
textDecoration: 'underline',
fontWeight: 700,
},
'&[aria-disabled="true"]': {
cursor: 'default',
},
});
const Submit = styled(Button)(({ theme, dirty }) => ({
marginRight: 8,
backgroundColor: theme.color.secondary,
color: theme.color.inverseText,
opacity: dirty ? 1 : 0.6,
boxShadow: 'rgb(30 167 253 / 10%) 0 0 0 1px inset',
}));
const Reset = styled(Button)(({ theme }) => ({
marginLeft: 8,
boxShadow: 'rgb(30 167 253) 0 0 0 1px inset',
color: theme.color.secondary,
}));

42
examples/external-docs/src/components/button.stories.tsx Normal file
View File

@ -0,0 +1,42 @@
/* eslint-disable storybook/await-interactions */
/* eslint-disable storybook/use-storybook-testing-library */
// @TODO: use addon-interactions and remove the rule disable above
import React from 'react';
import { Meta, ComponentStory } from '@storybook/react';
import { screen } from '@testing-library/dom';
import userEvent from '@testing-library/user-event';
import { Button } from './button';
export default {
component: Button,
title: 'Examples / Button',
argTypes: { onClick: { action: 'click ' } },
// render: () => <>hohoho</>,
} as Meta;
export const WithArgs: ComponentStory<typeof Button> = (args) => <Button {...args} />;
WithArgs.args = { label: 'With args' };
export const Basic = () => <Button label="Click me" />;
export const StoryObject = {
render: () => <>hahaha</>,
};
export const StoryNoRender = {
args: { label: 'magic!' },
};
export const StoryWithPlay = {
args: { label: 'play' },
play: () => {
console.log('play!!');
userEvent.click(screen.getByRole('button'));
},
};
export const CSF2StoryWithPlay = WithArgs.bind({});
CSF2StoryWithPlay.play = () => {
console.log('play!!');
userEvent.click(screen.getByRole('button'));
};

14
examples/external-docs/src/components/button.tsx Normal file
View File

@ -0,0 +1,14 @@
import React, { ButtonHTMLAttributes } from 'react';
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
/**
* A label to show on the button
*/
label: string;
}
export const Button = ({ label = 'Hello', ...props }: ButtonProps) => (
<button type="button" {...props}>
{label}
</button>
);

8
examples/external-docs/src/components/emoji-button.stories.tsx Normal file
View File

@ -0,0 +1,8 @@
import React from 'react';
import { EmojiButton } from './emoji-button';
export default { component: EmojiButton, title: 'Examples / Emoji Button' };
export const WithArgs = (args: any) => <EmojiButton {...args} />;
WithArgs.args = { label: 'With args' };
export const Basic = () => <EmojiButton label="Click me" />;

19
examples/external-docs/src/components/emoji-button.tsx Normal file
View File

@ -0,0 +1,19 @@
import React from 'react';
import PropTypes from 'prop-types';
export const EmojiButton = ({ label, ...props }: { label: string }) => (
<button type="button" {...props}>
⚠️ {label}
</button>
);
EmojiButton.propTypes = {
/**
* A label to show on the button
*/
label: PropTypes.string,
};
EmojiButton.defaultProps = {
label: 'Hello',
};

24
examples/external-docs/src/index.tsx Normal file
View File

@ -0,0 +1,24 @@
/* global document */
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import StoriesPage from './StoriesPage';
import SecondStoriesPage from './SecondStoriesPage';
const Router = ({ routes }: { routes: (() => JSX.Element)[] }) => {
const [routeNumber, setRoute] = useState(0);
const Route = routes[routeNumber];
console.log(routeNumber);
return (
<div>
<Route />
{/* eslint-disable-next-line react/button-has-type */}
<button onClick={() => setRoute((routeNumber + 1) % routes.length)}>Next Route</button>
</div>
);
};
const App = () => <Router routes={[StoriesPage, SecondStoriesPage]} />;
ReactDOM.render(<App />, document.getElementById('root'));

1
examples/external-docs/src/react-app-env.d.ts vendored Normal file
View File

@ -0,0 +1 @@
/// <reference types="react-scripts" />

24
examples/external-docs/tsconfig.json Normal file
View File

@ -0,0 +1,24 @@
{
"compilerOptions": {
"baseUrl": ".",
"esModuleInterop": true,
"jsx": "react",
"skipLibCheck": true,
"strict": true,
"target": "es5",
"lib": [
"dom",
"esnext"
],
"allowJs": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true
},
"include": [ "src/*"]
}

114
lib/cli/src/versions.ts
View File

@ -1,59 +1,59 @@
// auto generated file, do not edit
export default {
"@storybook/addon-a11y": "6.5.0-alpha.58",
"@storybook/addon-actions": "6.5.0-alpha.58",
"@storybook/addon-backgrounds": "6.5.0-alpha.58",
"@storybook/addon-controls": "6.5.0-alpha.58",
"@storybook/addon-docs": "6.5.0-alpha.58",
"@storybook/addon-essentials": "6.5.0-alpha.58",
"@storybook/addon-interactions": "6.5.0-alpha.58",
"@storybook/addon-jest": "6.5.0-alpha.58",
"@storybook/addon-links": "6.5.0-alpha.58",
"@storybook/addon-measure": "6.5.0-alpha.58",
"@storybook/addon-outline": "6.5.0-alpha.58",
"@storybook/addon-storyshots": "6.5.0-alpha.58",
"@storybook/addon-storyshots-puppeteer": "6.5.0-alpha.58",
"@storybook/addon-storysource": "6.5.0-alpha.58",
"@storybook/addon-toolbars": "6.5.0-alpha.58",
"@storybook/addon-viewport": "6.5.0-alpha.58",
"@storybook/addons": "6.5.0-alpha.58",
"@storybook/angular": "6.5.0-alpha.58",
"@storybook/api": "6.5.0-alpha.58",
"@storybook/builder-webpack4": "6.5.0-alpha.58",
"@storybook/builder-webpack5": "6.5.0-alpha.58",
"@storybook/channel-postmessage": "6.5.0-alpha.58",
"@storybook/channel-websocket": "6.5.0-alpha.58",
"@storybook/channels": "6.5.0-alpha.58",
"@storybook/cli": "6.5.0-alpha.58",
"@storybook/client-api": "6.5.0-alpha.58",
"@storybook/client-logger": "6.5.0-alpha.58",
"@storybook/codemod": "6.5.0-alpha.58",
"@storybook/components": "6.5.0-alpha.58",
"@storybook/core": "6.5.0-alpha.58",
"@storybook/core-client": "6.5.0-alpha.58",
"@storybook/core-common": "6.5.0-alpha.58",
"@storybook/core-events": "6.5.0-alpha.58",
"@storybook/core-server": "6.5.0-alpha.58",
"@storybook/csf-tools": "6.5.0-alpha.58",
"@storybook/docs-tools": "6.5.0-alpha.58",
"@storybook/ember": "6.5.0-alpha.58",
"@storybook/html": "6.5.0-alpha.58",
"@storybook/instrumenter": "6.5.0-alpha.58",
"@storybook/manager-webpack4": "6.5.0-alpha.58",
"@storybook/manager-webpack5": "6.5.0-alpha.58",
"@storybook/node-logger": "6.5.0-alpha.58",
"@storybook/postinstall": "6.5.0-alpha.58",
"@storybook/preact": "6.5.0-alpha.58",
"@storybook/preview-web": "6.5.0-alpha.58",
"@storybook/react": "6.5.0-alpha.58",
"@storybook/router": "6.5.0-alpha.58",
"@storybook/server": "6.5.0-alpha.58",
"@storybook/source-loader": "6.5.0-alpha.58",
"@storybook/store": "6.5.0-alpha.58",
"@storybook/svelte": "6.5.0-alpha.58",
"@storybook/theming": "6.5.0-alpha.58",
"@storybook/ui": "6.5.0-alpha.58",
"@storybook/vue": "6.5.0-alpha.58",
"@storybook/vue3": "6.5.0-alpha.58",
"@storybook/web-components": "6.5.0-alpha.58"
}
'@storybook/addon-a11y': '6.5.0-alpha.58',
'@storybook/addon-actions': '6.5.0-alpha.58',
'@storybook/addon-backgrounds': '6.5.0-alpha.58',
'@storybook/addon-controls': '6.5.0-alpha.58',
'@storybook/addon-docs': '6.5.0-alpha.58',
'@storybook/addon-essentials': '6.5.0-alpha.58',
'@storybook/addon-interactions': '6.5.0-alpha.58',
'@storybook/addon-jest': '6.5.0-alpha.58',
'@storybook/addon-links': '6.5.0-alpha.58',
'@storybook/addon-measure': '6.5.0-alpha.58',
'@storybook/addon-outline': '6.5.0-alpha.58',
'@storybook/addon-storyshots': '6.5.0-alpha.58',
'@storybook/addon-storyshots-puppeteer': '6.5.0-alpha.58',
'@storybook/addon-storysource': '6.5.0-alpha.58',
'@storybook/addon-toolbars': '6.5.0-alpha.58',
'@storybook/addon-viewport': '6.5.0-alpha.58',
'@storybook/addons': '6.5.0-alpha.58',
'@storybook/angular': '6.5.0-alpha.58',
'@storybook/api': '6.5.0-alpha.58',
'@storybook/builder-webpack4': '6.5.0-alpha.58',
'@storybook/builder-webpack5': '6.5.0-alpha.58',
'@storybook/channel-postmessage': '6.5.0-alpha.58',
'@storybook/channel-websocket': '6.5.0-alpha.58',
'@storybook/channels': '6.5.0-alpha.58',
'@storybook/cli': '6.5.0-alpha.58',
'@storybook/client-api': '6.5.0-alpha.58',
'@storybook/client-logger': '6.5.0-alpha.58',
'@storybook/codemod': '6.5.0-alpha.58',
'@storybook/components': '6.5.0-alpha.58',
'@storybook/core': '6.5.0-alpha.58',
'@storybook/core-client': '6.5.0-alpha.58',
'@storybook/core-common': '6.5.0-alpha.58',
'@storybook/core-events': '6.5.0-alpha.58',
'@storybook/core-server': '6.5.0-alpha.58',
'@storybook/csf-tools': '6.5.0-alpha.58',
'@storybook/docs-tools': '6.5.0-alpha.58',
'@storybook/ember': '6.5.0-alpha.58',
'@storybook/html': '6.5.0-alpha.58',
'@storybook/instrumenter': '6.5.0-alpha.58',
'@storybook/manager-webpack4': '6.5.0-alpha.58',
'@storybook/manager-webpack5': '6.5.0-alpha.58',
'@storybook/node-logger': '6.5.0-alpha.58',
'@storybook/postinstall': '6.5.0-alpha.58',
'@storybook/preact': '6.5.0-alpha.58',
'@storybook/preview-web': '6.5.0-alpha.58',
'@storybook/react': '6.5.0-alpha.58',
'@storybook/router': '6.5.0-alpha.58',
'@storybook/server': '6.5.0-alpha.58',
'@storybook/source-loader': '6.5.0-alpha.58',
'@storybook/store': '6.5.0-alpha.58',
'@storybook/svelte': '6.5.0-alpha.58',
'@storybook/theming': '6.5.0-alpha.58',
'@storybook/ui': '6.5.0-alpha.58',
'@storybook/vue': '6.5.0-alpha.58',
'@storybook/vue3': '6.5.0-alpha.58',
'@storybook/web-components': '6.5.0-alpha.58',
};

10
lib/preview-web/src/DocsRender.ts
View File

@ -4,15 +4,21 @@ import { Story, StoryStore, CSFFile } from '@storybook/store';
import { Channel } from '@storybook/addons';
import { DOCS_RENDERED } from '@storybook/core-events';
import { DocsContextProps } from './types';
import { Render, StoryRender } from './StoryRender';
import type { DocsContextProps } from './types';
export class DocsRender<TFramework extends AnyFramework> {
export class DocsRender<TFramework extends AnyFramework> implements Render<TFramework> {
private canvasElement?: HTMLElement;
private context?: DocsContextProps;
public disableKeyListeners = false;
static fromStoryRender<TFramework extends AnyFramework>(storyRender: StoryRender<TFramework>) {
const { channel, store, id, story } = storyRender;
return new DocsRender<TFramework>(channel, store, id, story);
}
// eslint-disable-next-line no-useless-constructor
constructor(
private channel: Channel,

343
lib/preview-web/src/Preview.tsx Normal file
View File

@ -0,0 +1,343 @@
import dedent from 'ts-dedent';
import global from 'global';
import { SynchronousPromise } from 'synchronous-promise';
import Events 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';
import {
ModuleImportFn,
Story,
StoryStore,
StoryIndex,
PromiseLike,
WebProjectAnnotations,
} from '@storybook/store';
import { StoryRender } from './StoryRender';
import { DocsRender } from './DocsRender';
const { fetch } = global;
type MaybePromise<T> = Promise<T> | T;
const STORY_INDEX_PATH = './stories.json';
export class Preview<TFramework extends AnyFramework> {
channel: Channel;
serverChannel?: Channel;
storyStore: StoryStore<TFramework>;
getStoryIndex?: () => StoryIndex;
importFn?: ModuleImportFn;
renderToDOM: WebProjectAnnotations<TFramework>['renderToDOM'];
storyRenders: StoryRender<TFramework>[] = [];
previewEntryError?: Error;
constructor() {
this.channel = addons.getChannel();
if (global.FEATURES?.storyStoreV7 && addons.hasServerChannel()) {
this.serverChannel = addons.getServerChannel();
}
this.storyStore = new StoryStore();
}
// INITIALIZATION
// NOTE: the reason that the preview and store's initialization code is written in a promise
// style and not `async-await`, and the use of `SynchronousPromise`s is in order to allow
// storyshots to immediately call `raw()` on the store without waiting for a later tick.
// (Even simple things like `Promise.resolve()` and `await` involve the callback happening
// in the next promise "tick").
// See the comment in `storyshots-core/src/api/index.ts` for more detail.
initialize({
getStoryIndex,
importFn,
getProjectAnnotations,
}: {
// In the case of the v6 store, we can only get the index from the facade *after*
// getProjectAnnotations has been run, thus this slightly awkward approach
getStoryIndex?: () => StoryIndex;
importFn: ModuleImportFn;
getProjectAnnotations: () => MaybePromise<WebProjectAnnotations<TFramework>>;
}) {
// We save these two on initialization in case `getProjectAnnotations` errors,
// in which case we may need them later when we recover.
this.getStoryIndex = getStoryIndex;
this.importFn = importFn;
this.setupListeners();
return this.getProjectAnnotationsOrRenderError(getProjectAnnotations).then(
(projectAnnotations) => this.initializeWithProjectAnnotations(projectAnnotations)
);
}
setupListeners() {
this.serverChannel?.on(Events.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));
}
getProjectAnnotationsOrRenderError(
getProjectAnnotations: () => MaybePromise<WebProjectAnnotations<TFramework>>
): PromiseLike<ProjectAnnotations<TFramework>> {
return SynchronousPromise.resolve()
.then(getProjectAnnotations)
.then((projectAnnotations) => {
this.renderToDOM = projectAnnotations.renderToDOM;
if (!this.renderToDOM) {
throw new Error(dedent`
Expected your framework's preset to export a \`renderToDOM\` field.
Perhaps it needs to be upgraded for Storybook 6.4?
More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mainjs-framework-field
`);
}
return projectAnnotations;
})
.catch((err) => {
// This is an error extracting the projectAnnotations (i.e. evaluating the previewEntries) and
// needs to be show to the user as a simple error
this.renderPreviewEntryError('Error reading preview.js:', err);
throw err;
});
}
// If initialization gets as far as project annotations, this function runs.
initializeWithProjectAnnotations(projectAnnotations: WebProjectAnnotations<TFramework>) {
this.storyStore.setProjectAnnotations(projectAnnotations);
this.setInitialGlobals();
let storyIndexPromise: PromiseLike<StoryIndex>;
if (global.FEATURES?.storyStoreV7) {
storyIndexPromise = this.getStoryIndexFromServer();
} else {
if (!this.getStoryIndex) {
throw new Error('No `getStoryIndex` passed defined in v6 mode');
}
storyIndexPromise = SynchronousPromise.resolve().then(this.getStoryIndex);
}
return storyIndexPromise
.then((storyIndex: StoryIndex) => this.initializeWithStoryIndex(storyIndex))
.catch((err) => {
this.renderPreviewEntryError('Error loading story index:', err);
throw err;
});
}
async setInitialGlobals() {
this.emitGlobals();
}
emitGlobals() {
this.channel.emit(Events.SET_GLOBALS, {
globals: this.storyStore.globals.get() || {},
globalTypes: this.storyStore.projectAnnotations.globalTypes || {},
});
}
async getStoryIndexFromServer() {
const result = await fetch(STORY_INDEX_PATH);
if (result.status === 200) return result.json() as StoryIndex;
throw new Error(await result.text());
}
// If initialization gets as far as the story index, this function runs.
initializeWithStoryIndex(storyIndex: StoryIndex): PromiseLike<void> {
return this.storyStore.initialize({
storyIndex,
importFn: this.importFn,
cache: !global.FEATURES?.storyStoreV7,
});
}
// EVENT HANDLERS
// This happens when a config file gets reloaded
async onGetProjectAnnotationsChanged({
getProjectAnnotations,
}: {
getProjectAnnotations: () => MaybePromise<ProjectAnnotations<TFramework>>;
}) {
delete this.previewEntryError;
const projectAnnotations = await this.getProjectAnnotationsOrRenderError(getProjectAnnotations);
if (!this.storyStore.projectAnnotations) {
await this.initializeWithProjectAnnotations(projectAnnotations);
return;
}
await this.storyStore.setProjectAnnotations(projectAnnotations);
this.emitGlobals();
}
async onStoryIndexChanged() {
delete this.previewEntryError;
if (!this.storyStore.projectAnnotations) {
// We haven't successfully set project annotations yet,
// we need to do that before we can do anything else.
return;
}
try {
const storyIndex = await this.getStoryIndexFromServer();
// This is the first time the story index worked, let's load it into the store
if (!this.storyStore.storyIndex) {
await this.initializeWithStoryIndex(storyIndex);
}
// Update the store with the new stories.
await this.onStoriesChanged({ storyIndex });
} catch (err) {
this.renderPreviewEntryError('Error loading story index:', err);
throw err;
}
}
// This happens when a glob gets HMR-ed
async onStoriesChanged({
importFn,
storyIndex,
}: {
importFn?: ModuleImportFn;
storyIndex?: StoryIndex;
}) {
await this.storyStore.onStoriesChanged({ importFn, storyIndex });
}
async onUpdateGlobals({ globals }: { globals: Globals }) {
this.storyStore.globals.update(globals);
await Promise.all(this.storyRenders.map((r) => r.rerender()));
this.channel.emit(Events.GLOBALS_UPDATED, {
globals: this.storyStore.globals.get(),
initialGlobals: this.storyStore.globals.initialGlobals,
});
}
async onUpdateArgs({ storyId, updatedArgs }: { storyId: StoryId; updatedArgs: Args }) {
this.storyStore.args.update(storyId, updatedArgs);
await Promise.all(this.storyRenders.filter((r) => r.id === storyId).map((r) => r.rerender()));
this.channel.emit(Events.STORY_ARGS_UPDATED, {
storyId,
args: this.storyStore.args.get(storyId),
});
}
async onResetArgs({ storyId, argNames }: { storyId: string; argNames?: string[] }) {
// NOTE: we have to be careful here and avoid await-ing when updating a rendered's args.
// That's because below in `renderStoryToElement` we have also bound to this event and will
// render the story in the same tick.
// However, we can do that safely as the current story is available in `this.storyRenders`
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 updatedArgs = argNamesToReset.reduce((acc, argName) => {
acc[argName] = story.initialArgs[argName];
return acc;
}, {} as Partial<Args>);
await this.onUpdateArgs({ storyId, updatedArgs });
}
// ForceReRender does not include a story id, so we simply must
// re-render all stories in case they are relevant
async onForceReRender() {
await Promise.all(this.storyRenders.map((r) => r.rerender()));
}
async onForceRemount({ storyId }: { storyId: StoryId }) {
await Promise.all(this.storyRenders.filter((r) => r.id === storyId).map((r) => r.remount()));
}
// Used by docs' modernInlineRender to render a story to a given element
// Note this short-circuits the `prepare()` phase of the StoryRender,
// main to be consistent with the previous behaviour. In the future,
// we will change it to go ahead and load the story, which will end up being
// "instant", although async.
renderStoryToElement(story: Story<TFramework>, element: HTMLElement) {
const render = new StoryRender<TFramework>(
this.channel,
this.storyStore,
this.renderToDOM,
this.inlineStoryCallbacks(story.id),
story.id,
'docs',
story
);
render.renderToElement(element);
this.storyRenders.push(render);
return async () => {
await this.teardownRender(render);
};
}
async teardownRender(
render: StoryRender<TFramework> | DocsRender<TFramework>,
{ viewModeChanged }: { viewModeChanged?: boolean } = {}
) {
this.storyRenders = this.storyRenders.filter((r) => r !== render);
await render?.teardown({ viewModeChanged });
}
// API
async extract(options?: { includeDocsOnly: boolean }) {
if (this.previewEntryError) {
throw this.previewEntryError;
}
if (!this.storyStore.projectAnnotations) {
// In v6 mode, if your preview.js throws, we never get a chance to initialize the preview
// or store, and the error is simply logged to the browser console. This is the best we can do
throw new Error(dedent`Failed to initialize Storybook.
Do you have an error in your \`preview.js\`? Check your Storybook's browser console for errors.`);
}
if (global.FEATURES?.storyStoreV7) {
await this.storyStore.cacheAllCSFFiles();
}
return this.storyStore.extract(options);
}
// UTILITIES
inlineStoryCallbacks(storyId: StoryId) {
return {
showMain: () => {},
showError: (err: { title: string; description: string }) =>
logger.error(`Error rendering docs story (${storyId})`, err),
showException: (err: Error) => logger.error(`Error rendering docs story (${storyId})`, err),
};
}
renderPreviewEntryError(reason: string, err: Error) {
this.previewEntryError = err;
logger.error(reason);
logger.error(err);
this.channel.emit(Events.CONFIG_ERROR, err);
}
}

260
lib/preview-web/src/PreviewWeb.tsx
View File

@ -1,77 +1,52 @@
import deprecate from 'util-deprecate';
import dedent from 'ts-dedent';
import global from 'global';
import { SynchronousPromise } from 'synchronous-promise';
import Events, { IGNORED_EXCEPTION } 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';
import {
ModuleImportFn,
Selection,
Story,
StoryStore,
StorySpecifier,
StoryIndex,
PromiseLike,
WebProjectAnnotations,
} from '@storybook/store';
import { Preview } from './Preview';
import { UrlStore } from './UrlStore';
import { WebView } from './WebView';
import { PREPARE_ABORTED, StoryRender } from './StoryRender';
import { PREPARE_ABORTED, Render, StoryRender } from './StoryRender';
import { DocsRender } from './DocsRender';
const { window: globalWindow, fetch } = global;
const { window: globalWindow } = global;
function focusInInput(event: Event) {
const target = event.target as Element;
return /input|textarea/i.test(target.tagName) || target.getAttribute('contenteditable') !== null;
}
type PromiseLike<T> = Promise<T> | SynchronousPromise<T>;
type MaybePromise<T> = Promise<T> | T;
type StoryCleanupFn = () => MaybePromise<void>;
const STORY_INDEX_PATH = './stories.json';
type HTMLStoryRender<TFramework extends AnyFramework> = StoryRender<HTMLElement, TFramework>;
export class PreviewWeb<TFramework extends AnyFramework> {
channel: Channel;
serverChannel?: Channel;
export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramework> {
urlStore: UrlStore;
storyStore: StoryStore<TFramework>;
view: WebView;
getStoryIndex?: () => StoryIndex;
importFn?: ModuleImportFn;
renderToDOM: WebProjectAnnotations<TFramework>['renderToDOM'];
previewEntryError?: Error;
currentSelection: Selection;
currentRender: HTMLStoryRender<TFramework> | DocsRender<TFramework>;
storyRenders: HTMLStoryRender<TFramework>[] = [];
previousCleanup: StoryCleanupFn;
currentRender: Render<TFramework>;
constructor() {
this.channel = addons.getChannel();
if (global.FEATURES?.storyStoreV7 && addons.hasServerChannel()) {
this.serverChannel = addons.getServerChannel();
}
this.view = new WebView();
super();
this.view = new WebView();
this.urlStore = new UrlStore();
this.storyStore = new StoryStore();
// Add deprecated APIs for back-compat
// @ts-ignore
this.storyStore.getSelection = deprecate(
@ -84,99 +59,19 @@ export class PreviewWeb<TFramework extends AnyFramework> {
);
}
// INITIALIZATION
// NOTE: the reason that the preview and store's initialization code is written in a promise
// style and not `async-await`, and the use of `SynchronousPromise`s is in order to allow
// storyshots to immediately call `raw()` on the store without waiting for a later tick.
// (Even simple things like `Promise.resolve()` and `await` involve the callback happening
// in the next promise "tick").
// See the comment in `storyshots-core/src/api/index.ts` for more detail.
initialize({
getStoryIndex,
importFn,
getProjectAnnotations,
}: {
// In the case of the v6 store, we can only get the index from the facade *after*
// getProjectAnnotations has been run, thus this slightly awkward approach
getStoryIndex?: () => StoryIndex;
importFn: ModuleImportFn;
getProjectAnnotations: () => MaybePromise<WebProjectAnnotations<TFramework>>;
}) {
// We save these two on initialization in case `getProjectAnnotations` errors,
// in which case we may need them later when we recover.
this.getStoryIndex = getStoryIndex;
this.importFn = importFn;
this.setupListeners();
return this.getProjectAnnotationsOrRenderError(getProjectAnnotations).then(
(projectAnnotations) => this.initializeWithProjectAnnotations(projectAnnotations)
);
}
setupListeners() {
globalWindow.onkeydown = this.onKeydown.bind(this);
super.setupListeners();
this.serverChannel?.on(Events.STORY_INDEX_INVALIDATED, this.onStoryIndexChanged.bind(this));
globalWindow.onkeydown = this.onKeydown.bind(this);
this.channel.on(Events.SET_CURRENT_STORY, this.onSetCurrentStory.bind(this));
this.channel.on(Events.UPDATE_QUERY_PARAMS, this.onUpdateQueryParams.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));
}
getProjectAnnotationsOrRenderError(
getProjectAnnotations: () => MaybePromise<WebProjectAnnotations<TFramework>>
): PromiseLike<ProjectAnnotations<TFramework>> {
return SynchronousPromise.resolve()
.then(getProjectAnnotations)
.then((projectAnnotations) => {
this.renderToDOM = projectAnnotations.renderToDOM;
if (!this.renderToDOM) {
throw new Error(dedent`
Expected your framework's preset to export a \`renderToDOM\` field.
Perhaps it needs to be upgraded for Storybook 6.4?
More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mainjs-framework-field
`);
}
return projectAnnotations;
})
.catch((err) => {
// This is an error extracting the projectAnnotations (i.e. evaluating the previewEntries) and
// needs to be show to the user as a simple error
this.renderPreviewEntryError('Error reading preview.js:', err);
throw err;
});
}
// If initialization gets as far as project annotations, this function runs.
initializeWithProjectAnnotations(projectAnnotations: WebProjectAnnotations<TFramework>) {
this.storyStore.setProjectAnnotations(projectAnnotations);
this.setInitialGlobals();
let storyIndexPromise: PromiseLike<StoryIndex>;
if (global.FEATURES?.storyStoreV7) {
storyIndexPromise = this.getStoryIndexFromServer();
} else {
if (!this.getStoryIndex) {
throw new Error('No `getStoryIndex` passed defined in v6 mode');
}
storyIndexPromise = SynchronousPromise.resolve().then(this.getStoryIndex);
}
return storyIndexPromise
.then((storyIndex: StoryIndex) => this.initializeWithStoryIndex(storyIndex))
.catch((err) => {
this.renderPreviewEntryError('Error loading story index:', err);
throw err;
});
return super
.initializeWithProjectAnnotations(projectAnnotations)
.then(() => this.setInitialGlobals());
}
async setInitialGlobals() {
@ -187,29 +82,9 @@ export class PreviewWeb<TFramework extends AnyFramework> {
this.emitGlobals();
}
emitGlobals() {
this.channel.emit(Events.SET_GLOBALS, {
globals: this.storyStore.globals.get() || {},
globalTypes: this.storyStore.projectAnnotations.globalTypes || {},
});
}
async getStoryIndexFromServer() {
const result = await fetch(STORY_INDEX_PATH);
if (result.status === 200) return result.json() as StoryIndex;
throw new Error(await result.text());
}
// If initialization gets as far as the story index, this function runs.
initializeWithStoryIndex(storyIndex: StoryIndex) {
return this.storyStore
.initialize({
storyIndex,
importFn: this.importFn,
cache: !global.FEATURES?.storyStoreV7,
})
.then(() => {
initializeWithStoryIndex(storyIndex: StoryIndex): PromiseLike<void> {
return super.initializeWithStoryIndex(storyIndex).then(() => {
if (!global.FEATURES?.storyStoreV7) {
this.channel.emit(Events.SET_STORIES, this.storyStore.getSetStoriesPayload());
}
@ -269,44 +144,11 @@ export class PreviewWeb<TFramework extends AnyFramework> {
}: {
getProjectAnnotations: () => MaybePromise<ProjectAnnotations<TFramework>>;
}) {
delete this.previewEntryError;
await super.onGetProjectAnnotationsChanged({ getProjectAnnotations });
const projectAnnotations = await this.getProjectAnnotationsOrRenderError(getProjectAnnotations);
if (!this.storyStore.projectAnnotations) {
await this.initializeWithProjectAnnotations(projectAnnotations);
return;
}
await this.storyStore.setProjectAnnotations(projectAnnotations);
this.emitGlobals();
this.renderSelection();
}
async onStoryIndexChanged() {
delete this.previewEntryError;
if (!this.storyStore.projectAnnotations) {
// We haven't successfully set project annotations yet,
// we need to do that before we can do anything else.
return;
}
try {
const storyIndex = await this.getStoryIndexFromServer();
// This is the first time the story index worked, let's load it into the store
if (!this.storyStore.storyIndex) {
await this.initializeWithStoryIndex(storyIndex);
}
// Update the store with the new stories.
await this.onStoriesChanged({ storyIndex });
} catch (err) {
this.renderPreviewEntryError('Error loading story index:', err);
throw err;
}
}
// This happens when a glob gets HMR-ed
async onStoriesChanged({
importFn,
@ -315,7 +157,8 @@ export class PreviewWeb<TFramework extends AnyFramework> {
importFn?: ModuleImportFn;
storyIndex?: StoryIndex;
}) {
await this.storyStore.onStoriesChanged({ importFn, storyIndex });
super.onStoriesChanged({ importFn, storyIndex });
if (!global.FEATURES?.storyStoreV7) {
this.channel.emit(Events.SET_STORIES, await this.storyStore.getSetStoriesPayload());
}
@ -349,22 +192,13 @@ export class PreviewWeb<TFramework extends AnyFramework> {
}
async onUpdateGlobals({ globals }: { globals: Globals }) {
this.storyStore.globals.update(globals);
await Promise.all(this.storyRenders.map((r) => r.rerender()));
super.onUpdateGlobals({ globals });
if (this.currentRender instanceof DocsRender) await this.currentRender.rerender();
this.channel.emit(Events.GLOBALS_UPDATED, {
globals: this.storyStore.globals.get(),
initialGlobals: this.storyStore.globals.initialGlobals,
});
}
async onUpdateArgs({ storyId, updatedArgs }: { storyId: StoryId; updatedArgs: Args }) {
this.storyStore.args.update(storyId, updatedArgs);
await Promise.all(this.storyRenders.filter((r) => r.id === storyId).map((r) => r.rerender()));
super.onUpdateArgs({ storyId, updatedArgs });
// NOTE: we aren't checking to see the story args are targetted at the "right" story.
// This is because we may render >1 story on the page and there is no easy way to keep track
@ -372,40 +206,6 @@ export class PreviewWeb<TFramework extends AnyFramework> {
// However, in `modernInlineRender`, the individual stories track their own events as they
// each call `renderStoryToElement` below.
if (this.currentRender instanceof DocsRender) await this.currentRender.rerender();
this.channel.emit(Events.STORY_ARGS_UPDATED, {
storyId,
args: this.storyStore.args.get(storyId),
});
}
async onResetArgs({ storyId, argNames }: { storyId: string; argNames?: string[] }) {
// NOTE: we have to be careful here and avoid await-ing when updating the current story's args.
// That's because below in `renderStoryToElement` we have also bound to this event and will
// render the story in the same tick.
// However, we can do that safely as the current story is available in `this.currentRender.story`
const { initialArgs } =
storyId === this.currentRender?.id
? this.currentRender.story
: await this.storyStore.loadStory({ storyId });
const argNamesToReset = argNames || Object.keys(this.storyStore.args.get(storyId));
const updatedArgs = argNamesToReset.reduce((acc, argName) => {
acc[argName] = initialArgs[argName];
return acc;
}, {} as Partial<Args>);
await this.onUpdateArgs({ storyId, updatedArgs });
}
// ForceReRender does not include a story id, so we simply must
// re-render all stories in case they are relevant
async onForceReRender() {
await Promise.all(this.storyRenders.map((r) => r.rerender()));
}
async onForceRemount({ storyId }: { storyId: StoryId }) {
await Promise.all(this.storyRenders.filter((r) => r.id === storyId).map((r) => r.remount()));
}
// RENDERING
@ -447,10 +247,7 @@ export class PreviewWeb<TFramework extends AnyFramework> {
lastRender = null;
}
const storyRender: PreviewWeb<TFramework>['currentRender'] = new StoryRender<
HTMLElement,
TFramework
>(
const storyRender = new StoryRender<TFramework>(
this.channel,
this.storyStore,
(...args) => {
@ -520,7 +317,7 @@ export class PreviewWeb<TFramework extends AnyFramework> {
}
if (selection.viewMode === 'docs' || parameters.docsOnly) {
this.currentRender = storyRender.toDocsRender();
this.currentRender = DocsRender.fromStoryRender<TFramework>(storyRender);
this.currentRender.renderToElement(
this.view.prepareForDocs(),
this.renderStoryToElement.bind(this)
@ -537,7 +334,7 @@ export class PreviewWeb<TFramework extends AnyFramework> {
// we will change it to go ahead and load the story, which will end up being
// "instant", although async.
renderStoryToElement(story: Story<TFramework>, element: HTMLElement) {
const render = new StoryRender<HTMLElement, TFramework>(
const render = new StoryRender<TFramework>(
this.channel,
this.storyStore,
this.renderToDOM,
@ -556,7 +353,7 @@ export class PreviewWeb<TFramework extends AnyFramework> {
}
async teardownRender(
render: HTMLStoryRender<TFramework> | DocsRender<TFramework>,
render: Render<TFramework>,
{ viewModeChanged }: { viewModeChanged?: boolean } = {}
) {
this.storyRenders = this.storyRenders.filter((r) => r !== render);
@ -603,11 +400,8 @@ export class PreviewWeb<TFramework extends AnyFramework> {
}
renderPreviewEntryError(reason: string, err: Error) {
this.previewEntryError = err;
logger.error(reason);
logger.error(err);
super.renderPreviewEntryError(reason, err);
this.view.showErrorDisplay(err);
this.channel.emit(Events.CONFIG_ERROR, err);
}
renderMissingStory() {

31
lib/preview-web/src/StoryRender.ts
View File

@ -9,7 +9,6 @@ import {
import { Story, RenderContext, StoryStore } from '@storybook/store';
import { Channel } from '@storybook/addons';
import { STORY_RENDER_PHASE_CHANGED, STORY_RENDERED } from '@storybook/core-events';
import { DocsRender } from './DocsRender';
const { AbortController } = global;
@ -41,28 +40,34 @@ export type RenderContextCallbacks<TFramework extends AnyFramework> = Pick<
export const PREPARE_ABORTED = new Error('prepareAborted');
export class StoryRender<
CanvasElement extends HTMLElement | void,
TFramework extends AnyFramework
> {
export interface Render<TFramework extends AnyFramework> {
id: StoryId;
story?: Story<TFramework>;
isPreparing: () => boolean;
disableKeyListeners: boolean;
teardown: (options: { viewModeChanged: boolean }) => Promise<void>;
renderToElement: (canvasElement: HTMLElement, renderStoryToElement?: any) => Promise<void>;
}
export class StoryRender<TFramework extends AnyFramework> implements Render<TFramework> {
public story?: Story<TFramework>;
public phase?: RenderPhase;
private abortController?: AbortController;
private canvasElement?: CanvasElement;
private canvasElement?: HTMLElement;
private notYetRendered = true;
public disableKeyListeners = false;
constructor(
private channel: Channel,
private store: StoryStore<TFramework>,
public channel: Channel,
public store: StoryStore<TFramework>,
private renderToScreen: (
renderContext: RenderContext<TFramework>,
canvasElement: CanvasElement
canvasElement: HTMLElement
) => void | Promise<void>,
private callbacks: RenderContextCallbacks<TFramework>,
public id: StoryId,
@ -104,7 +109,7 @@ export class StoryRender<
}
// The two story "renders" are equal and have both loaded the same story
isEqual(other?: StoryRender<CanvasElement, TFramework> | DocsRender<TFramework>) {
isEqual(other?: Render<TFramework>) {
return other && this.id === other.id && this.story && this.story === other.story;
}
@ -116,15 +121,11 @@ export class StoryRender<
return ['rendering', 'playing'].includes(this.phase);
}
toDocsRender() {
return new DocsRender<TFramework>(this.channel, this.store, this.id, this.story);
}
context() {
return this.store.getStoryContext(this.story);
}
async renderToElement(canvasElement: CanvasElement) {
async renderToElement(canvasElement: HTMLElement) {
this.canvasElement = canvasElement;
// FIXME: this comment

1
lib/preview-web/src/index.ts
View File

@ -1,6 +1,7 @@
// FIXME: breaks builder-vite, remove this in 7.0
export { composeConfigs } from '@storybook/store';
export { Preview } from './Preview';
export { PreviewWeb } from './PreviewWeb';
export { simulatePageLoad, simulateDOMContentLoaded } from './simulate-pageload';

1
lib/store/src/StoryStore.ts
View File

@ -26,6 +26,7 @@ import type {
Path,
ExtractOptions,
BoundStory,
PromiseLike,
StoryIndex,
StoryIndexEntry,
V2CompatIndexEntry,

2
lib/store/src/types.ts
View File

@ -26,7 +26,7 @@ import type {
export type { StoryId, Parameters };
export type Path = string;
export type ModuleExports = Record<string, any>;
type PromiseLike<T> = Promise<T> | SynchronousPromise<T>;
export type PromiseLike<T> = Promise<T> | SynchronousPromise<T>;
export type ModuleImportFn = (path: Path) => PromiseLike<ModuleExports>;
export type WebProjectAnnotations<TFramework extends AnyFramework> =

8
lib/ui/src/app.tsx
View File

@ -61,13 +61,7 @@ const App = React.memo<AppProps>(
if (!width || !height) {
content = <div />;
} else if (width < 600) {
content =
<Mobile
{...props}
viewMode={viewMode}
options={layout}
docsOnly={docsOnly}
/>;
content = <Mobile {...props} viewMode={viewMode} options={layout} docsOnly={docsOnly} />;
} else {
content = (
<Desktop

15
lib/ui/src/components/layout/mobile.tsx
View File

@ -92,7 +92,7 @@ const Panels = React.memo((({ children, active, isFullscreen }) => (
</Pane>
))}
</PanelsContainer>
)) as FunctionComponent<{ active: ActiveTabsType; children: ReactNode, isFullscreen: boolean }>);
)) as FunctionComponent<{ active: ActiveTabsType; children: ReactNode; isFullscreen: boolean }>);
Panels.displayName = 'Panels';
const PanelsContainer = styled.div<{ isFullscreen: boolean }>(
@ -101,7 +101,8 @@ const PanelsContainer = styled.div<{ isFullscreen: boolean }>(
top: 0,
left: 0,
width: '100vw',
}, ({ isFullscreen }) => ({
},
({ isFullscreen }) => ({
height: isFullscreen ? '100vh' : 'calc(100% - 40px)',
})
);
@ -192,7 +193,10 @@ class Mobile extends Component<MobileProps, MobileState> {
</Panels>
{!options.isFullscreen && (
<Bar>
<TabButton onClick={() => this.setState({ active: SIDEBAR })} active={active === SIDEBAR}>
<TabButton
onClick={() => this.setState({ active: SIDEBAR })}
active={active === SIDEBAR}
>
Sidebar
</TabButton>
<TabButton onClick={() => this.setState({ active: CANVAS })} active={active === CANVAS}>
@ -202,7 +206,10 @@ class Mobile extends Component<MobileProps, MobileState> {
))}
</TabButton>
{viewMode && !docsOnly ? (
<TabButton onClick={() => this.setState({ active: ADDONS })} active={active === ADDONS}>
<TabButton
onClick={() => this.setState({ active: ADDONS })}
active={active === ADDONS}
>
Addons
</TabButton>
) : null}

4
nx.json
View File

@ -139,6 +139,10 @@
"@storybook/example-react-ts-webpack4": {
"implicitDependencies": []
},
"@storybook/external-docs": {
"implicitDependencies": []
},
"server-kitchen-sink": {
"implicitDependencies": []
},

4
workspace.json
View File

@ -161,6 +161,10 @@
"root": "examples/react-ts-webpack4",
"type": "library"
},
"@storybook/external-docs": {
"root": "examples/external-docs",
"type": "library"
},
"server-kitchen-sink": {
"root": "examples/server-kitchen-sink",
"type": "library"

30
yarn.lock
View File

@ -7735,6 +7735,36 @@ __metadata:
languageName: node
linkType: hard
"@storybook/external-docs@workspace:examples/external-docs":
version: 0.0.0-use.local
resolution: "@storybook/external-docs@workspace:examples/external-docs"
dependencies:
"@babel/preset-env": ^7.12.11
"@babel/preset-react": ^7.12.10
"@babel/preset-typescript": ^7.12.7
"@storybook/addon-essentials": 6.5.0-alpha.58
"@storybook/components": 6.5.0-alpha.58
"@storybook/csf": 0.0.2--canary.87bc651.0
"@storybook/preview-web": 6.5.0-alpha.58
"@storybook/react": 6.5.0-alpha.58
"@storybook/store": 6.5.0-alpha.58
"@storybook/theming": 6.5.0-alpha.58
"@testing-library/dom": ^7.31.2
"@testing-library/user-event": ^13.1.9
"@types/babel__preset-env": ^7
"@types/react": ^16.14.23
"@types/react-dom": ^16.9.14
cross-env: ^7.0.3
formik: ^2.2.9
prop-types: 15.7.2
react: 16.14.0
react-dom: 16.14.0
react-scripts: ^4.0.2
typescript: ^3.9.7
webpack: 4
languageName: unknown
linkType: soft
"@storybook/html@6.5.0-alpha.58, @storybook/html@workspace:*, @storybook/html@workspace:app/html":
version: 0.0.0-use.local
resolution: "@storybook/html@workspace:app/html"