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

Merge branch 'next' into tsup/cli

Browse Source
This commit is contained in:
Norbert de Langen 2022-09-13 12:38:31 +03:00
commit 882e0fcdb4
No known key found for this signature in database
GPG Key ID: FD0E78AF9A837762
128 changed files with 628 additions and 9129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
MIGRATION.md
View File

@ -21,6 +21,7 @@
- [Vite builder uses vite config automatically](#vite-builder-uses-vite-config-automatically)
- [Removed docs.getContainer and getPage parameters](#removed-docsgetcontainer-and-getpage-parameters)
- [Icons API changed](#icons-api-changed)
- ['config' preset entry replaced with 'previewAnnotations'](#config-preset-entry-replaced-with-preview-annotations)
- [Docs Changes](#docs-changes)
- [Standalone docs files](#standalone-docs-files)
- [Referencing stories in docs files](#referencing-stories-in-docs-files)
@ -543,6 +544,12 @@ export interface IconsProps extends ComponentProps<typeof Svg> {
Full change here: https://github.com/storybookjs/storybook/pull/18809
#### 'config' preset entry replaced with 'previewAnnotations'
The preset field `'config'` has been replaced with `'previewAnnotations'`. `'config'` is now deprecated and will be removed in Storybook 8.0.
Additionally, the internal field `'previewEntries'` has been removed. If you need a preview entry, just use a `'previewAnnotations'` file and don't export anything.
### Docs Changes
The information hierarchy of docs in Storybook has changed in 7.0. The main difference is that each docs is listed in the sidebar as a separate entry, rather than attached to individual stories.
@ -672,9 +679,7 @@ import * as previewAnnotations from '../.storybook/preview';
export default function App({ Component, pageProps }) {
return (
<ExternalDocs
projectAnnotationsList={[reactAnnotations, previewAnnotations]}
>
<ExternalDocs projectAnnotationsList={[reactAnnotations, previewAnnotations]}>
<Component {...pageProps} />
</ExternalDocs>
);
@ -798,8 +803,7 @@ import startCase from 'lodash/startCase';
addons.setConfig({
sidebar: {
renderLabel: ({ name, type }) =>
type === 'story' ? name : startCase(name),
renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)),
},
});
```
@ -1226,11 +1230,7 @@ After:
```js
// .storybook/main.js
module.exports = {
staticDirs: [
'../public',
'../static',
{ from: '../foo/assets', to: '/assets' },
],
staticDirs: ['../public', '../static', { from: '../foo/assets', to: '/assets' }],
};
```
@ -1778,17 +1778,13 @@ This breaking change only affects you if your stories actually use the context,
Consider the following story that uses the context:
```js
export const Dummy = ({ parameters }) => (
<div>{JSON.stringify(parameters)}</div>
);
export const Dummy = ({ parameters }) => <div>{JSON.stringify(parameters)}</div>;
```
Here's an updated story for 6.0 that ignores the args object:
```js
export const Dummy = (_args, { parameters }) => (
<div>{JSON.stringify(parameters)}</div>
);
export const Dummy = (_args, { parameters }) => <div>{JSON.stringify(parameters)}</div>;
```
Alternatively, if you want to opt out of the new behavior, you can add the following to your `.storybook/preview.js` config:
@ -2208,7 +2204,7 @@ To configure a11y now, you have to specify configuration using story parameters,
```js
export const parameters = {
a11y: {
element: "#storybook-root",
element: '#storybook-root',
config: {},
options: {},
manual: true,
@ -2578,9 +2574,7 @@ For example, here's how to sort by story ID using `storySort`:
addParameters({
options: {
storySort: (a, b) =>
a[1].kind === b[1].kind
? 0
: a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
},
});
```
@ -2626,9 +2620,7 @@ Storybook 5.1 relies on `core-js@^3.0.0` and therefore causes a conflict with An
{
"compilerOptions": {
"paths": {
"core-js/es7/reflect": [
"node_modules/core-js/proposals/reflect-metadata"
],
"core-js/es7/reflect": ["node_modules/core-js/proposals/reflect-metadata"],
"core-js/es6/*": ["node_modules/core-js/es"]
}
}

2
code/.eslintignore
View File

@ -17,8 +17,6 @@ examples/ember-cli/.storybook/preview-head.html
examples/official-storybook/tests/addon-jest.test.js
examples/cra-ts-kitchen-sink/*.json
examples/cra-ts-kitchen-sink/public/*
examples/cra-ts-essentials/*.json
examples/cra-ts-essentials/public/*
ember-output
.yarn
!.remarkrc.js

31
code/addons/interactions/src/examples/AccountFormInteractions/AccountFormInteractions.stories.mdx
View File

@ -1,31 +0,0 @@
import { Meta, Canvas, Story } from '@storybook/addon-docs';
import { expect } from '@storybook/jest';
import { within, waitFor, fireEvent, userEvent, screen } from '@storybook/testing-library';
import { AccountForm } from './AccountFormInteractions';
<Meta
title="Addons/Interactions/Examples/AccountForm MDX"
component={AccountForm}
parameters={{ layout: 'centered', theme: 'light' }}
argTypes={{
onSubmit: { action: true },
}}
/>
## AccountForm
<Canvas>
<Story
name="StandardEmailFilled"
args={{
passwordVerification: false,
}}
play={async ({ args }) => {
await userEvent.type(screen.getByTestId('email'), 'username@email.com');
await userEvent.type(screen.getByTestId('password1'), 'thepassword');
await userEvent.click(screen.getByRole('button', { name: /create account/i }));
await expect(args.onSubmit).not.toHaveBeenCalled();
}}
/>
</Canvas>

162
code/addons/interactions/src/examples/AccountFormInteractions/AccountFormInteractions.stories.tsx
View File

@ -1,162 +0,0 @@
/* eslint-disable jest/no-standalone-expect */
import { Meta, ComponentStoryObj } from '@storybook/react';
import { expect } from '@storybook/jest';
import { within, waitFor, fireEvent, userEvent } from '@storybook/testing-library';
import { AccountForm } from './AccountFormInteractions';
export default {
title: 'Addons/Interactions/Examples/AccountForm',
component: AccountForm,
parameters: {
layout: 'centered',
theme: 'light',
options: { selectedPanel: 'storybook/interactions/panel' },
},
argTypes: {
onSubmit: { action: true },
},
} as Meta;
type CSF3Story = ComponentStoryObj<typeof AccountForm>;
export const Standard: CSF3Story = {
args: { passwordVerification: false },
};
export const StandardEmailFilled = {
...Standard,
play: async ({ canvasElement, step }) => {
const canvas = within(canvasElement);
await step('Enter email', async () => {
await fireEvent.change(canvas.getByTestId('email'), {
target: { value: 'michael@chromatic.com' },
});
});
},
};
export const StandardEmailFailed = {
...Standard,
play: async ({ args, canvasElement, step }) => {
const canvas = within(canvasElement);
await step('Enter email and password', async () => {
await userEvent.type(canvas.getByTestId('email'), 'gert@chromatic');
await userEvent.type(canvas.getByTestId('password1'), 'supersecret');
});
await step('Submit form', async () => {
await userEvent.click(canvas.getByRole('button', { name: /create account/i }));
});
await canvas.findByText('Please enter a correctly formatted email address');
await expect(args.onSubmit).not.toHaveBeenCalled();
},
};
export const StandardEmailSuccess = {
...Standard,
play: async ({ args, canvasElement, step }) => {
const canvas = within(canvasElement);
await step('Enter email and password', async () => {
await userEvent.type(canvas.getByTestId('email'), 'michael@chromatic.com');
await userEvent.type(canvas.getByTestId('password1'), 'testpasswordthatwontfail');
});
await step('Submit form', async () => {
await userEvent.click(canvas.getByTestId('submit'));
});
await waitFor(async () => {
await expect(args.onSubmit).toHaveBeenCalledTimes(1);
await expect(args.onSubmit).toHaveBeenCalledWith({
email: 'michael@chromatic.com',
password: 'testpasswordthatwontfail',
});
});
},
};
export const StandardPasswordFailed = {
...Standard,
play: async (context) => {
const canvas = within(context.canvasElement);
await StandardEmailFilled.play(context);
await context.step('Enter password', async () => {
await userEvent.type(canvas.getByTestId('password1'), 'asdf');
});
await context.step('Submit form', async () => {
await userEvent.click(canvas.getByTestId('submit'));
});
},
};
export const StandardFailHover = {
...StandardPasswordFailed,
play: async (context) => {
const canvas = within(context.canvasElement);
await StandardPasswordFailed.play(context);
await waitFor(async () => {
await userEvent.hover(canvas.getByTestId('password-error-info'));
});
},
};
export const Verification = {
args: { passwordVerification: true },
argTypes: { onSubmit: { action: 'clicked' } },
};
export const VerificationPassword = {
...Verification,
play: async (context) => {
const canvas = within(context.canvasElement);
await StandardEmailFilled.play(context);
await context.step('Enter password', async () => {
await userEvent.type(canvas.getByTestId('password1'), 'asdfasdf');
});
await context.step('Submit form', async () => {
await userEvent.click(canvas.getByTestId('submit'));
});
},
};
export const VerificationPasswordMismatch = {
...Verification,
play: async (context) => {
const canvas = within(context.canvasElement);
await StandardEmailFilled.play(context);
await context.step('Enter passwords', async () => {
await userEvent.type(canvas.getByTestId('password1'), 'asdfasdf');
await userEvent.type(canvas.getByTestId('password2'), 'asdf1234');
});
await context.step('Submit form', async () => {
await userEvent.click(canvas.getByTestId('submit'));
});
},
};
export const VerificationSuccess = {
...Verification,
play: async (context) => {
const canvas = within(context.canvasElement);
await StandardEmailFilled.play(context);
await context.step('Enter passwords', async () => {
await new Promise((resolve) => setTimeout(resolve, 1000));
await userEvent.type(canvas.getByTestId('password1'), 'helloyou', { delay: 50 });
await new Promise((resolve) => setTimeout(resolve, 1000));
await userEvent.type(canvas.getByTestId('password2'), 'helloyou', { delay: 50 });
});
await context.step('Submit form', async () => {
await new Promise((resolve) => setTimeout(resolve, 1000));
await userEvent.click(canvas.getByTestId('submit'));
});
},
};

553
code/addons/interactions/src/examples/AccountFormInteractions/AccountFormInteractions.tsx
View File

@ -1,553 +0,0 @@
/* eslint-disable import/no-extraneous-dependencies */
import { Icons, WithTooltip } from '@storybook/components';
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';
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: 4,
}));
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,
}));

126
code/addons/interactions/src/examples/Examples.stories.tsx
View File

@ -1,126 +0,0 @@
/* eslint-disable jest/no-standalone-expect */
import { Story, Meta } from '@storybook/react';
import { expect } from '@storybook/jest';
import { within, waitFor, userEvent, waitForElementToBeRemoved } from '@storybook/testing-library';
import React from 'react';
export default {
title: 'Addons/Interactions/Examples',
parameters: {
layout: 'centered',
theme: 'light',
options: { selectedPanel: 'storybook/interactions/panel' },
},
argTypes: {
onSubmit: { action: true },
},
} as Meta;
export const Assertions: Story = ({ onSubmit }) => (
<button type="button" onClick={() => onSubmit('clicked')}>
Click
</button>
);
Assertions.play = async ({ args, canvasElement }) => {
await userEvent.click(within(canvasElement).getByRole('button'));
await expect(args.onSubmit).toHaveBeenCalledWith(expect.stringMatching(/([A-Z])\w+/gi));
await expect([{ name: 'John', age: 42 }]).toEqual(
expect.arrayContaining([
expect.objectContaining({ name: 'John' }),
expect.objectContaining({ age: 42 }),
])
);
};
export const FindBy: Story = () => {
const [isLoading, setIsLoading] = React.useState(true);
React.useEffect(() => {
setTimeout(() => setIsLoading(false), 500);
}, []);
return isLoading ? <div>Loading...</div> : <button type="button">Loaded!</button>;
};
FindBy.play = async ({ canvasElement }) => {
const canvas = within(canvasElement);
await canvas.findByRole('button');
await expect(true).toBe(true);
};
export const WaitFor: Story = ({ onSubmit }) => (
<button type="button" onClick={() => setTimeout(() => onSubmit('clicked'), 100)}>
Click
</button>
);
WaitFor.play = async ({ args, canvasElement }) => {
await userEvent.click(await within(canvasElement).findByText('Click'));
await waitFor(async () => {
await expect(args.onSubmit).toHaveBeenCalledWith(expect.stringMatching(/([A-Z])\w+/gi));
await expect(true).toBe(true);
});
};
export const WaitForElementToBeRemoved: Story = () => {
const [isLoading, setIsLoading] = React.useState(true);
React.useEffect(() => {
setTimeout(() => setIsLoading(false), 1500);
}, []);
return isLoading ? <div>Loading...</div> : <button type="button">Loaded!</button>;
};
WaitForElementToBeRemoved.play = async ({ canvasElement }) => {
const canvas = within(canvasElement);
await waitForElementToBeRemoved(await canvas.findByText('Loading...'), { timeout: 2000 });
const button = await canvas.findByText('Loaded!');
await expect(button).not.toBeNull();
};
export const WithLoaders: Story = ({ onSubmit }, { loaded: { todo } }) => {
return (
<button type="button" onClick={onSubmit(todo.title)}>
Todo: {todo.title}
</button>
);
};
WithLoaders.loaders = [
async () => {
// long fake timeout
await new Promise((resolve) => setTimeout(resolve, 2000));
return {
todo: {
userId: 1,
id: 1,
title: 'delectus aut autem',
completed: false,
},
};
},
];
WithLoaders.play = async ({ args, canvasElement }) => {
const canvas = within(canvasElement);
const todoItem = await canvas.findByText('Todo: delectus aut autem');
await userEvent.click(todoItem);
await expect(args.onSubmit).toHaveBeenCalledWith('delectus aut autem');
};
export const WithSteps: Story = ({ onSubmit }) => (
<button type="button" onClick={() => onSubmit('clicked')}>
Click
</button>
);
WithSteps.play = async ({ args, canvasElement, step }) => {
await step('Click button', async () => {
await userEvent.click(within(canvasElement).getByRole('button'));
await step('Verify submit', async () => {
await expect(args.onSubmit).toHaveBeenCalledWith(expect.stringMatching(/([A-Z])\w+/gi));
});
await step('Verify result', async () => {
await expect([{ name: 'John', age: 42 }]).toEqual(
expect.arrayContaining([
expect.objectContaining({ name: 'John' }),
expect.objectContaining({ age: 42 }),
])
);
});
});
};

89
code/addons/interactions/template/stories/basics.stories.ts Normal file
View File

@ -0,0 +1,89 @@
/* eslint-disable jest/no-standalone-expect */
import globalThis from 'global';
import {
within,
waitFor,
fireEvent,
userEvent,
waitForElementToBeRemoved,
} from '@storybook/testing-library';
import { expect } from '@storybook/jest';
export default {
component: globalThis.Components.Form,
argTypes: {
onSuccess: { type: 'function' },
},
};
export const Type = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await userEvent.type(canvas.getByTestId('value'), 'test');
},
};
export const Step = {
play: async ({ step }) => {
await step('Enter value', Type.play);
},
};
export const Callback = {
play: async ({ args, canvasElement, step }) => {
const canvas = within(canvasElement);
await step('Enter value', Type.play);
await step('Submit', async () => {
await fireEvent.click(canvas.getByRole('button'));
});
await expect(args.onSuccess).toHaveBeenCalled();
},
};
// NOTE: of course you can use `findByText()` to implicitly waitFor, but we want
// an explicit test here
export const SyncWaitFor = {
play: async ({ canvasElement, step }) => {
const canvas = within(canvasElement);
await step('Setup', Callback.play);
await waitFor(() => canvas.getByText('Completed!!'));
},
};
export const AsyncWaitFor = {
play: async ({ canvasElement, step }) => {
const canvas = within(canvasElement);
await step('Setup', Callback.play);
await waitFor(async () => canvas.getByText('Completed!!'));
},
};
export const WaitForElementToBeRemoved = {
play: async ({ canvasElement, step }) => {
const canvas = within(canvasElement);
await step('Setup', SyncWaitFor.play);
await waitForElementToBeRemoved(() => canvas.queryByText('Completed!!'), {
timeout: 2000,
});
},
};
export const WithLoaders = {
loaders: [async () => new Promise((resolve) => setTimeout(resolve, 2000))],
play: async ({ step }) => {
await step('Setup', Callback.play);
},
};
export const Validation = {
play: async (context) => {
const { args, canvasElement, step } = context;
const canvas = within(canvasElement);
await step('Submit', async () => fireEvent.click(canvas.getByRole('button')));
await expect(args.onSuccess).not.toHaveBeenCalled();
},
};

38
code/addons/links/template/stories/decorator.stories.ts Normal file
View File

@ -0,0 +1,38 @@
import globalThis from 'global';
import { withLinks } from '@storybook/addon-links';
export default {
component: globalThis.Components.Html,
parameters: {
chromatic: { disable: true },
},
decorators: [withLinks],
};
export const Basic = {
args: {
content: `
<div>
<a class="link" href="#" data-sb-story="basic">go to basic</a>
</div>
`,
},
};
export const Other = {
args: {
content: `
<div>
<a class="link" href="#" data-sb-story="basic">to to basic</a>
</div>
`,
},
};
export const Third = {
args: {
content: `
<div>
<a class="link" href="#" data-sb-story="other">go to other</a>
</div>
`,
},
};

44
code/addons/links/template/stories/linkto.stories.ts Normal file
View File

@ -0,0 +1,44 @@
import globalThis from 'global';
import { linkTo } from '@storybook/addon-links';
export default {
component: globalThis.Components.Button,
args: {
children: 'Click Me!',
},
parameters: {
chromatic: { disable: true },
},
};
export const ID = {
args: {
onClick: linkTo('addons-links-parameters--basic'),
},
};
export const Title = {
args: {
onClick: linkTo('addons-links-parameters'),
},
};
export const Basic = {
args: {
onClick: linkTo('addons-links-parameters', 'basic'),
},
};
export const Other = {
args: {
onClick: linkTo('addons-links-parameters', 'basic'),
},
};
export const Third = {
args: {
onClick: linkTo('addons-links-parameters', 'other'),
},
};
export const Callback = {
args: {
onClick: linkTo('addons-links-parameters', (event: Event) => 'basic'),
},
};

41
code/addons/links/template/stories/scroll.stories.ts Normal file
View File

@ -0,0 +1,41 @@
import globalThis from 'global';
import { withLinks } from '@storybook/addon-links';
export default {
component: globalThis.Components.Html,
parameters: {
chromatic: { disable: true },
},
decorators: [withLinks],
};
export const Basic = {
args: {
content: `
<div>
<div style="marginBottom:100vh"></div>
<a class="link" href="#" data-sb-story="basic">go to basic</a>
</div>
`,
},
};
export const Other = {
args: {
content: `
<div>
<div style="marginBottom:100vh"></div>
<a class="link" href="#" data-sb-story="basic">to to basic</a>
</div>
`,
},
};
export const Third = {
args: {
content: `
<div>
<div style="marginBottom:100vh"></div>
<a class="link" href="#" data-sb-story="other">go to other</a>
</div>
`,
},
};

3
code/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import { linkTo } from '@storybook/addon-links';
import { Welcome } from '../react-demo';
export default {
@ -11,6 +10,6 @@ export default {
},
};
export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
export const ToStorybook = () => <Welcome showApp={() => {}} />;
ToStorybook.storyName = 'to Storybook';

3
code/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.mdx
View File

@ -1,4 +1,3 @@
import { linkTo } from '@storybook/addon-links';
import { Welcome } from '../react-demo';
import { Meta, Story } from '@storybook/addon-docs';
@ -10,5 +9,5 @@ import { Meta, Story } from '@storybook/addon-docs';
/>
<Story name="to Storybook">
<Welcome showApp={linkTo('Button')} />
<Welcome showApp={() => {}} />
</Story>

17
code/cypress/integration/addon-links.spec.ts
View File

@ -1,17 +0,0 @@
import { visit } from '../helper';
describe('addon-links', () => {
before(() => {
visit('official-storybook?path=/story/addons-links-button--first');
});
it('should navigate on link', () => {
cy.getStoryElement().find('button').should('contain.text', 'Go to "Second"').click();
cy.url().should('include', 'path=/story/addons-links-button--second');
cy.getStoryElement().find('button').should('contain.text', 'Go to "First"').click();
cy.url().should('include', 'path=/story/addons-links-button--first');
});
});

8
code/cypress/integration/navigation.spec.ts
View File

@ -25,11 +25,11 @@ describe('Navigation', () => {
});
describe('Routing', () => {
it('should navigate to story addons-a11y-basebutton--default', () => {
visit('official-storybook');
it('should navigate to sibling story sibling', () => {
visit('official-storybook/?path=/story/basics-actionbar--single-item');
cy.get('#addons-controls--basic').click({ force: true });
cy.url().should('include', 'path=/story/addons-controls--basic');
cy.get('#basics-actionbar--many-items').click({ force: true });
cy.url().should('include', 'path=/story/basics-actionbar--many-items');
});
it('should directly visit a certain story and render correctly', () => {

1
code/examples/angular-cli/src/stories/addons/docs/addon-docs.stories.mdx
View File

@ -1,7 +1,6 @@
import { moduleMetadata } from '@storybook/angular';
import { Story, Meta, ArgsTable } from '@storybook/addon-docs';
import { Welcome, Button } from '../.././angular-demo';
import { linkTo } from '@storybook/addon-links';
import { DocButtonComponent } from './doc-button/doc-button.component';
# Storybook Docs for Angular

3
code/examples/angular-cli/src/stories/addons/links/addon-links.stories.ts
View File

@ -1,4 +1,3 @@
import { linkTo } from '@storybook/addon-links';
import { Button } from '../../angular-demo';
export default {
@ -9,7 +8,7 @@ export default {
export const ButtonWithLinkToAnotherStory = () => ({
props: {
text: 'Go to Welcome Story',
onClick: linkTo('Welcome'),
onClick: () => {},
},
});

3
code/examples/angular-cli/src/stories/welcome-angular.stories.ts
View File

@ -1,5 +1,4 @@
import type { Meta, StoryFn } from '@storybook/angular';
import { linkTo } from '@storybook/addon-links';
import { AppComponent } from '../app/app.component';
export default {
@ -9,6 +8,6 @@ export default {
export const ToAngular: StoryFn = () => ({
component: AppComponent,
props: {
showApp: linkTo('Button'),
showApp: () => {},
},
});

3
code/examples/angular-cli/src/stories/welcome-storybook.stories.ts
View File

@ -1,5 +1,4 @@
import type { Meta, StoryFn } from '@storybook/angular';
import { linkTo } from '@storybook/addon-links';
import { Welcome } from './angular-demo';
export default {
@ -9,6 +8,6 @@ export default {
export const ToStorybook: StoryFn = () => ({
component: Welcome,
props: {
showApp: linkTo('Button'),
showApp: () => {},
},
});

3
code/examples/cra-kitchen-sink/src/stories/welcome.stories.js
View File

@ -1,5 +1,4 @@
import React from 'react';
import { linkTo } from '@storybook/addon-links';
import { Welcome } from '../components/react-demo';
export default {
@ -7,5 +6,5 @@ export default {
component: Welcome,
};
export const Story1 = () => <Welcome showApp={linkTo('Button')} />;
export const Story1 = () => <Welcome showApp={() => {}} />;
Story1.title = 'to Storybook';

3
code/examples/cra-ts-essentials/.env
View File

@ -1,3 +0,0 @@
DISABLE_ESLINT_PLUGIN=true
SKIP_PREFLIGHT_CHECK=true
NODE_PATH=src

44
code/examples/cra-ts-essentials/.storybook/main.ts
View File

@ -1,44 +0,0 @@
import type { StorybookConfig } from '@storybook/react-webpack5';
const path = require('path');
const mainConfig: StorybookConfig = {
stories: ['../src/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
addons: [
'@storybook/preset-create-react-app',
{
name: '@storybook/addon-essentials',
options: {
viewport: false,
},
},
'@storybook/addon-interactions',
],
logLevel: 'debug',
// add monorepo root as a valid directory to import modules from
webpackFinal: (config) => {
const resolvePlugins = config.resolve?.plugins;
if (Array.isArray(resolvePlugins)) {
resolvePlugins.forEach((p) => {
// @ts-expect-error (Converted from ts-ignore)
const appSrcs = p.appSrcs as unknown as string[];
if (Array.isArray(appSrcs)) {
appSrcs.push(path.join(__dirname, '..', '..', '..'));
}
});
}
return config;
},
core: {
channelOptions: { allowFunction: false, maxDepth: 10 },
disableTelemetry: true,
},
staticDirs: ['../public'],
features: {
buildStoriesJson: true,
breakingChangesV7: true,
},
framework: '@storybook/react-webpack5',
};
module.exports = mainConfig;

54
code/examples/cra-ts-essentials/.storybook/preview.tsx
View File

@ -1,54 +0,0 @@
import React from 'react';
import type { DecoratorFn } from '@storybook/react';
import { ThemeProvider, convert, themes } from '@storybook/theming';
export const decorators: DecoratorFn[] = [
(StoryFn, { globals: { locale } }) => (
<>
<div>Locale: {locale}</div>
<StoryFn />
</>
),
(StoryFn) => (
<ThemeProvider theme={convert(themes.light)}>
<StoryFn />
</ThemeProvider>
),
];
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
};
export const globalTypes = {
locale: {
name: 'Locale',
description: 'Internationalization locale',
defaultValue: 'en',
toolbar: {
dynamicTitle: true,
icon: 'globe',
items: [
{ value: 'en', right: '🇺🇸', title: 'English' },
{ value: 'es', right: '🇪🇸', title: 'Español' },
{ value: 'zh', right: '🇨🇳', title: '中文' },
{ value: 'kr', right: '🇰🇷', title: '한국어' },
],
},
},
theme: {
name: 'Theme',
description: 'Global theme for components',
toolbar: {
dynamicTitle: true,
icon: 'circlehollow',
title: 'Theme',
items: [
{ value: 'light', icon: 'circlehollow', title: 'Light' },
{ value: 'dark', icon: 'circle', title: 'Dark' },
{ value: 'side-by-side', icon: 'sidebar', title: 'Side by side' },
{ value: 'stacked', icon: 'bottombar', title: 'Stacked' },
],
},
},
};

1
code/examples/cra-ts-essentials/README.md
View File

@ -1 +0,0 @@
Demonstrate `@storybook/addon-essentials` default configuration with CRA / Typescript.

57
code/examples/cra-ts-essentials/package.json
View File

@ -1,57 +0,0 @@
{
"name": "cra-ts-essentials",
"version": "7.0.0-alpha.31",
"private": true,
"scripts": {
"build": "react-scripts build",
"build-storybook": "storybook build",
"eject": "react-scripts eject",
"start": "react-scripts start",
"storybook": "storybook dev -p 9009 --no-manager-cache",
"test": "SKIP_PREFLIGHT_CHECK=true react-scripts test"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"dependencies": {
"@storybook/components": "7.0.0-alpha.31",
"@storybook/theming": "7.0.0-alpha.31",
"@types/jest": "^26.0.16",
"@types/node": "^14.14.20 || ^16.0.0",
"@types/react": "^16.14.23",
"@types/react-dom": "16.9.14",
"formik": "2.2.9",
"global": "^4.4.0",
"react": "16.14.0",
"react-dom": "16.14.0",
"react-scripts": "^5.0.1",
"typescript": "~4.6.3"
},
"devDependencies": {
"@storybook/addon-essentials": "7.0.0-alpha.31",
"@storybook/addon-interactions": "7.0.0-alpha.31",
"@storybook/addons": "7.0.0-alpha.31",
"@storybook/builder-webpack5": "7.0.0-alpha.31",
"@storybook/preset-create-react-app": "^4.1.0",
"@storybook/react": "7.0.0-alpha.31",
"@storybook/react-webpack5": "7.0.0-alpha.31",
"@storybook/testing-library": "^0.0.9",
"storybook": "7.0.0-alpha.31",
"ts-node": "^10.4.0",
"webpack": "5"
},
"storybook": {
"chromatic": {
"projectToken": "b311ypk6of"
}
}
}

BIN
code/examples/cra-ts-essentials/public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 22 KiB

40
code/examples/cra-ts-essentials/public/index.html
View File

@ -1,40 +0,0 @@
<!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
code/examples/cra-ts-essentials/public/logo192.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.1 KiB

BIN
code/examples/cra-ts-essentials/public/logo512.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 14 KiB

25
code/examples/cra-ts-essentials/public/manifest.json
View File

@ -1,25 +0,0 @@
{
"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
code/examples/cra-ts-essentials/public/robots.txt
View File

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

22
code/examples/cra-ts-essentials/src/App.css
View File

@ -1,22 +0,0 @@
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #09d3ac;
}

10
code/examples/cra-ts-essentials/src/App.test.tsx
View File

@ -1,10 +0,0 @@
/* eslint-disable jest/expect-expect */
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});

26
code/examples/cra-ts-essentials/src/App.tsx
View File

@ -1,26 +0,0 @@
import React, { FC } from 'react';
import logo from './logo.svg';
import './App.css';
const App: FC = () => {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
};
export default App;

11
code/examples/cra-ts-essentials/src/index.css
View File

@ -1,11 +0,0 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

14
code/examples/cra-ts-essentials/src/index.tsx
View File

@ -1,14 +0,0 @@
/* global document */
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

1
code/examples/cra-ts-essentials/src/logo.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 8.0 KiB

1
code/examples/cra-ts-essentials/src/react-app-env.d.ts vendored
View File

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

142
code/examples/cra-ts-essentials/src/serviceWorker.ts
View File

@ -1,142 +0,0 @@
/* global window, fetch, navigator */
// This optional code is used to register a service worker.
// register() is not called by default.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on subsequent visits to a page, after all the
// existing tabs open on the page have been closed, since previously cached
// resources are updated in the background.
// To learn more about the benefits of this model and instructions on how to
// opt-in, read https://bit.ly/CRA-PWA
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
);
interface Config {
onSuccess?: (registration: ServiceWorkerRegistration) => void;
onUpdate?: (registration: ServiceWorkerRegistration) => void;
}
export function register(config?: Config) {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(
(process as { env: { [key: string]: string } }).env.PUBLIC_URL,
window.location.href
);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
return;
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
// This is running on localhost. Let's check if a service worker still exists or not.
checkValidServiceWorker(swUrl, config);
// Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => {
console.log(
'This web app is being served cache-first by a service ' +
'worker. To learn more, visit https://bit.ly/CRA-PWA'
);
});
} else {
// Is not localhost. Just register service worker
registerValidSW(swUrl, config);
}
});
}
}
function registerValidSW(swUrl: string, config?: Config) {
(navigator as Navigator).serviceWorker
.register(swUrl)
.then((registration) => {
// eslint-disable-next-line no-param-reassign
registration.onupdatefound = () => {
const installingWorker = registration.installing;
if (installingWorker == null) {
return;
}
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the updated precached content has been fetched,
// but the previous service worker will still serve the older
// content until all client tabs are closed.
console.log(
'New content is available and will be used when all ' +
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
);
// Execute callback
if (config && config.onUpdate) {
config.onUpdate(registration);
}
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.');
// Execute callback
if (config && config.onSuccess) {
config.onSuccess(registration);
}
}
}
};
};
})
.catch((error) => {
console.error('Error during service worker registration:', error);
});
}
function checkValidServiceWorker(swUrl: string, config?: Config) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl)
.then((response) => {
// Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get('content-type');
if (
response.status === 404 ||
(contentType != null && contentType.indexOf('javascript') === -1)
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then((registration) => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl, config);
}
})
.catch(() => {
console.log('No internet connection found. App is running in offline mode.');
});
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then((registration) => {
registration.unregister();
});
}
}

4
code/examples/cra-ts-essentials/src/setupTests.ts
View File

@ -1,4 +0,0 @@
import { setProjectAnnotations } from '@storybook/react';
import * as projectAnnotations from '../.storybook/preview';
setProjectAnnotations(projectAnnotations);

15
code/examples/cra-ts-essentials/src/stories/0-Welcome.stories.tsx
View File

@ -1,15 +0,0 @@
import React from 'react';
import { linkTo } from '@storybook/addon-links';
import type { ComponentMeta, ComponentStoryFn } from '@storybook/react';
import { Welcome } from './react-demo';
export default {
title: 'Welcome',
component: Welcome,
} as ComponentMeta<typeof Welcome>;
export const ToStorybook: ComponentStoryFn<typeof Welcome> = () => (
<Welcome showApp={linkTo('Button')} />
);
ToStorybook.storyName = 'to Storybook';

21
code/examples/cra-ts-essentials/src/stories/1-Button.stories.tsx
View File

@ -1,21 +0,0 @@
import React from 'react';
import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
import { Button } from './react-demo';
export default {
title: 'Button',
component: Button,
argTypes: { onClick: { action: 'clicked' } },
} as ComponentMeta<typeof Button>;
const Template: ComponentStoryFn<typeof Button> = (args) => <Button {...args} />;
export const Text = Template.bind({});
Text.args = {
children: 'Hello button',
};
export const Emoji = Template.bind({});
Emoji.args = {
children: '😀 😎 👍 💯',
};

24
code/examples/cra-ts-essentials/src/stories/Button.stories.tsx
View File

@ -1,24 +0,0 @@
import React from 'react';
import type { Meta, StoryFn } from '@storybook/react';
import { Button, ButtonProps } from './Button';
export default {
title: 'Example/Button',
component: Button,
argTypes: {
backgroundColor: { control: 'color' },
label: { defaultValue: 'Button' },
},
} as Meta;
const Template: StoryFn<ButtonProps> = (args) => <Button {...args} />;
export const Primary = Template.bind({});
Primary.args = {
label: 'foo',
size: 'large',
};
// export const Secondary = Template.bind({});

48
code/examples/cra-ts-essentials/src/stories/Button.tsx
View File

@ -1,48 +0,0 @@
import React from 'react';
import './button.css';
export interface ButtonProps {
/**
* Is this the principal call to action on the page?
*/
primary?: boolean;
/**
* What background color to use
*/
backgroundColor?: string;
/**
* How large should the button be?
*/
size?: 'small' | 'medium' | 'large';
/**
* Button contents
*/
label: string;
/**
* Optional click handler
*/
onClick?: () => void;
}
/**
* Primary UI component for user interaction
*/
export const Button: React.FC<ButtonProps> = ({
primary = false,
size = 'medium',
backgroundColor,
label,
...props
}) => {
const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
return (
<button
type="button"
className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
style={{ backgroundColor }}
{...props}
>
{label}
</button>
);
};

37
code/examples/cra-ts-essentials/src/stories/react-demo.tsx
View File

@ -1,37 +0,0 @@
import React, { FC, HTMLAttributes } from 'react';
const styles = {
border: '1px solid #eee',
borderRadius: 3,
backgroundColor: '#FFFFFF',
cursor: 'pointer',
fontSize: 15,
padding: '3px 10px',
margin: 10,
};
type ButtonProps = Pick<HTMLAttributes<HTMLButtonElement>, 'onClick'>;
export const Button: FC<ButtonProps> = ({ children, onClick }) => (
<button onClick={onClick} style={styles} type="button">
{children}
</button>
);
Button.displayName = 'Button';
Button.defaultProps = {
onClick: () => {},
};
interface WelcomeProps {
showApp: () => void;
}
export const Welcome: FC<WelcomeProps> = ({ showApp }) => (
<button type="button" onClick={showApp}>
Welcome
</button>
);
Welcome.displayName = 'Welcome';
Welcome.defaultProps = {
showApp: () => {},
};

23
code/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.test.tsx
View File

@ -1,23 +0,0 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import { composeStories, composeStory } from '@storybook/react';
import * as stories from './AccountForm.stories';
const { Standard } = composeStories(stories);
test('renders form', async () => {
await render(<Standard />);
expect(screen.getByTestId('email')).not.toBe(null);
});
test('fills input from play function', async () => {
const StandardEmailFilled = composeStory(stories.StandardEmailFilled, stories.default);
const { container } = await render(<StandardEmailFilled />);
await StandardEmailFilled.play({ canvasElement: container });
const emailInput = screen.getByTestId('email') as HTMLInputElement;
expect(emailInput.value).toBe('michael@chromatic.com');
});

30
code/examples/cra-ts-essentials/src/stories/testing-react/components/button.css
View File

@ -1,30 +0,0 @@
.storybook-button {
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 700;
border: 0;
border-radius: 3em;
cursor: pointer;
display: inline-block;
line-height: 1;
}
.storybook-button--primary {
color: white;
background-color: #1ea7fd;
}
.storybook-button--secondary {
color: #333;
background-color: transparent;
box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
}
.storybook-button--small {
font-size: 12px;
padding: 10px 16px;
}
.storybook-button--medium {
font-size: 14px;
padding: 11px 20px;
}
.storybook-button--large {
font-size: 16px;
padding: 12px 24px;
}

26
code/examples/cra-ts-essentials/tsconfig.json
View File

@ -1,26 +0,0 @@
{
"compilerOptions": {
"baseUrl": ".",
"incremental": false,
"noImplicitAny": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"jsx": "react",
"target": "ES2020",
"module": "CommonJS",
"skipLibCheck": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"types": ["jest", "node"],
"lib": ["es2017", "dom"],
"allowJs": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true
},
"include": ["src"]
}

3
code/examples/cra-ts-kitchen-sink/src/stories/0-Welcome.stories.tsx
View File

@ -1,5 +1,4 @@
import React from 'react';
import { linkTo } from '@storybook/addon-links';
import { Welcome } from '../components/react-demo';
export default {
@ -7,6 +6,6 @@ export default {
component: Welcome,
};
export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
export const ToStorybook = () => <Welcome showApp={() => {}} />;
ToStorybook.storyName = 'to Storybook';

15
code/examples/ember-cli/stories/addon-links.stories.js
View File

@ -1,15 +0,0 @@
import { hbs } from 'ember-cli-htmlbars';
import { linkTo } from '@storybook/addon-links';
export default {
title: 'Addon/Links',
};
export const GoToWelcome = () => ({
template: hbs`<button {{action onClick}}>This button brings you to welcome</button>`,
context: {
onClick: linkTo('Welcome'),
},
});
GoToWelcome.storyName = 'Go to welcome';

3
code/examples/html-kitchen-sink/stories/welcome.stories.js
View File

@ -1,11 +1,8 @@
import { withLinks } from '@storybook/addon-links';
import './welcome.css';
import welcome from './welcome.html';
export default {
title: 'Welcome',
decorators: [withLinks],
};
export const Welcome = () => welcome;

3
code/examples/official-storybook/package.json
View File

@ -10,6 +10,9 @@
"storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true storybook dev -p 9011 -c ./ --no-manager-cache",
"storyshots-puppeteer": "storybook build && yarn run do-storyshots-puppeteer"
},
"dependencies": {
"formik": "^2.2.9"
},
"devDependencies": {
"@emotion/jest": "^11.10.0",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",

2
code/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.stories.tsx → code/examples/official-storybook/stories/addon-interactions/AccountForm.stories.tsx
View File

@ -6,7 +6,7 @@ import { userEvent, within } from '@storybook/testing-library';
import { AccountForm, AccountFormProps } from './AccountForm';
export default {
title: 'CSF3/AccountForm',
title: 'Addons/Interactions/AccountForm',
component: AccountForm,
parameters: {
layout: 'centered',

0
code/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.tsx → code/examples/official-storybook/stories/addon-interactions/AccountForm.tsx
View File

18
code/examples/official-storybook/stories/addon-links/button.stories.tsx
View File

@ -1,18 +0,0 @@
import React from 'react';
import { linkTo } from '@storybook/addon-links';
export default {
title: 'Addons/Links/Button',
};
export const First = () => (
<button type="button" onClick={linkTo('Addons/Links/Button', 'Second')}>
Go to "Second"
</button>
);
export const Second = () => (
<button type="button" onClick={linkTo('Addons/Links/Button', 'First')}>
Go to "First"
</button>
);

17
code/examples/official-storybook/stories/addon-links/href.stories.js
View File

@ -1,17 +0,0 @@
import React from 'react';
import { hrefTo } from '@storybook/addon-links';
export default {
title: 'Addons/Links/Href',
};
export const Log = () => {
hrefTo('Addons/Links/Href', 'log');
return <span>See action logger</span>;
};
Log.parameters = {
options: {
panel: 'storybook/actions/panel',
},
};

9
code/examples/official-storybook/stories/addon-links/link.stories.js
View File

@ -1,9 +0,0 @@
import React from 'react';
import LinkTo from '@storybook/addon-links/react';
export default {
title: 'Addons/Links/Link',
};
export const First = () => <LinkTo story="Second">Go to Second</LinkTo>;
export const Second = () => <LinkTo story="First">Go to First</LinkTo>;

17
code/examples/official-storybook/stories/addon-links/scroll.stories.js
View File

@ -1,17 +0,0 @@
import React, { Fragment } from 'react';
import LinkTo from '@storybook/addon-links/react';
export default {
title: 'Addons/Links/Scroll position',
decorators: [
(storyFn) => (
<Fragment>
<div style={{ marginBottom: '100vh' }}>Scroll down to see the link</div>
{storyFn()}
</Fragment>
),
],
};
export const First = () => <LinkTo story="Second">Go to Second</LinkTo>;
export const Second = () => <LinkTo story="First">Go to First</LinkTo>;

20
code/examples/official-storybook/stories/addon-links/select.stories.js
View File

@ -1,20 +0,0 @@
import React from 'react';
import { linkTo } from '@storybook/addon-links';
import LinkTo from '@storybook/addon-links/react';
export default {
title: 'Addons/Links/Select',
};
export const Index = () => (
<select value="Index" onChange={linkTo('Addons/Links/Select', (e) => e.currentTarget.value)}>
<option>Index</option>
<option>First</option>
<option>Second</option>
<option>Third</option>
</select>
);
export const First = () => <LinkTo story="Index">Go back</LinkTo>;
export const Second = () => <LinkTo story="Index">Go back</LinkTo>;
export const Third = () => <LinkTo story="Index">Go back</LinkTo>;

3
code/examples/official-storybook/stories/demo/welcome.stories.js
View File

@ -1,5 +1,4 @@
import React from 'react';
import { linkTo } from '@storybook/addon-links';
import { Welcome } from '../../components/react-demo';
export default {
@ -10,5 +9,5 @@ export default {
// Some other valid values:
// - 'other-demo-buttonmdx--with-text'
// - 'Other/Demo/ButtonMdx'
export const ToStorybook = () => <Welcome showApp={linkTo('Other/Demo/Button')} />;
export const ToStorybook = () => <Welcome showApp={() => {}} />;
ToStorybook.storyName = 'to Storybook';

12
code/examples/preact-kitchen-sink/src/stories/addon-links.stories.js
View File

@ -1,12 +0,0 @@
import { linkTo } from '@storybook/addon-links';
import Button from '../Button';
export default {
title: 'Addons/Links',
};
export const GoToWelcome = () => (
<Button onclick={linkTo('Welcome')}>This button links to Welcome</Button>
);
GoToWelcome.storyName = 'Go to welcome';

3
code/examples/preact-kitchen-sink/src/stories/welcome.stories.js
View File

@ -1,4 +1,3 @@
import { linkTo } from '@storybook/addon-links';
import Welcome from '../Welcome';
export default {
@ -8,6 +7,6 @@ export default {
},
};
export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
export const ToStorybook = () => <Welcome showApp={() => {}} />;
ToStorybook.storyName = 'to Storybook';

109
code/examples/react-ts/src/AccountForm.stories.tsx
View File

@ -1,109 +0,0 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion */
/* 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 { ComponentStoryObj, ComponentMeta } from '@storybook/react';
import { screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { AccountForm, AccountFormProps } 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');
type Story = ComponentStoryObj<typeof AccountForm>;
export const Standard: Story = {
// render: (args: AccountFormProps) => <AccountForm {...args} />,
args: { passwordVerification: false },
};
export const StandardEmailFilled: Story = {
...Standard,
play: () => userEvent.type(screen.getByTestId('email'), 'michael@chromatic.com'),
};
export const StandardEmailFailed: Story = {
...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: Story = {
...Standard,
play: async (context) => {
await StandardEmailFilled.play!(context);
await userEvent.type(screen.getByTestId('password1'), 'asdf');
await userEvent.click(screen.getByTestId('submit'));
},
};
export const StandardFailHover: Story = {
...StandardPasswordFailed,
play: async (context) => {
await StandardPasswordFailed.play!(context);
await sleep(100);
await userEvent.hover(screen.getByTestId('password-error-info'));
},
};
export const Verification: Story = {
args: { passwordVerification: true },
};
export const VerificationPasssword1: Story = {
...Verification,
play: async (context) => {
await StandardEmailFilled.play!(context);
await userEvent.type(screen.getByTestId('password1'), 'asdfasdf');
await userEvent.click(screen.getByTestId('submit'));
},
};
export const VerificationPasswordMismatch: Story = {
...Verification,
play: async (context) => {
await StandardEmailFilled.play!(context);
await userEvent.type(screen.getByTestId('password1'), 'asdfasdf');
await userEvent.type(screen.getByTestId('password2'), 'asdf1234');
await userEvent.click(screen.getByTestId('submit'));
},
};
const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
export const VerificationSuccess: Story = {
...Verification,
play: async (context) => {
await StandardEmailFilled.play!(context);
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'));
},
};
export const StandardWithRenderFunction: Story = {
...Standard,
render: (args: AccountFormProps) => (
<div>
<p>This uses a custom render</p>
<AccountForm {...args} />
</div>
),
};

552
code/examples/react-ts/src/AccountForm.tsx
View File

@ -1,552 +0,0 @@
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 required 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,
}));

3797
code/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap
View File

File diff suppressed because it is too large Load Diff

16
code/examples/svelte-kitchen-sink/src/stories/addon-links.stories.js
View File

@ -1,16 +0,0 @@
import { linkTo } from '@storybook/addon-links';
import ActionLinkView from './views/ActionLinkView.svelte';
export default {
title: 'Addon/Links',
};
export const GoToWelcomeView = () => ({
Component: ActionLinkView,
on: {
click: linkTo('Welcome'),
},
});
GoToWelcomeView.storyName = 'Go to welcome view';

14
code/examples/vue-kitchen-sink/src/stories/addon-links.stories.js
View File

@ -1,14 +0,0 @@
import { linkTo } from '@storybook/addon-links';
export default {
title: 'Addon/Links',
};
export const GoToWelcome = () => ({
template: '<my-button :rounded="true" @click="click" >This buttons links to Welcome</my-button>',
methods: {
click: linkTo('Welcome'),
},
});
GoToWelcome.storyName = 'Go to welcome';

4
code/examples/vue-kitchen-sink/src/stories/components/welcome.stories.js
View File

@ -1,5 +1,3 @@
import { linkTo } from '@storybook/addon-links';
import Welcome from '../Welcome.vue';
export default {
@ -9,7 +7,7 @@ export default {
export const WelcomeStory = () => {
return {
render: (h) => h(Welcome, { listeners: { buttonRequested: linkTo('Button') } }),
render: (h) => h(Welcome, { listeners: { buttonRequested: () => {} } }),
};
};
WelcomeStory.storyName = 'Welcome';

4
code/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js
View File

@ -1,5 +1,3 @@
import { linkTo } from '@storybook/addon-links';
import MyButton from './Button.vue';
export default {
@ -41,7 +39,7 @@ export const TemplateMethods = () => ({
<my-button :rounded="true" @click="action">MyButton rendered in a template + props & methods</my-button>
</p>`,
methods: {
action: linkTo('Button'),
action: () => {},
},
});

1
code/jest.config.js
View File

@ -42,6 +42,7 @@ module.exports = {
'<rootDir>/addons',
'<rootDir>/frameworks',
'<rootDir>/lib',
'<rootDir>/renderers',
'<rootDir>/examples/official-storybook',
'<rootDir>/examples/react-ts',
],

7
code/lib/builder-vite/src/codegen-iframe-script.ts
View File

@ -7,12 +7,11 @@ import type { ExtendedOptions } from './types';
export async function generateIframeScriptCode(options: ExtendedOptions) {
const { presets } = options;
const frameworkName = await getFrameworkName(options);
const presetEntries = await presets.apply('config', [], options);
const previewEntries = await presets.apply('previewEntries', [], options);
const absolutePreviewEntries = previewEntries.map((entry) =>
const previewAnnotations = await presets.apply('previewAnnotations', [], options);
const resolvedPreviewAnnotations = previewAnnotations.map((entry) =>
isAbsolute(entry) ? entry : resolve(entry)
);
const configEntries = [...presetEntries, ...absolutePreviewEntries].filter(Boolean);
const configEntries = [...resolvedPreviewAnnotations].filter(Boolean);
const absoluteFilesToImport = (files: string[], name: string) =>
files

15
code/lib/builder-vite/src/codegen-modern-iframe-script.ts
View File

@ -9,12 +9,11 @@ export async function generateModernIframeScriptCode(options: ExtendedOptions) {
const frameworkName = await getFrameworkName(options);
const previewOrConfigFile = loadPreviewOrConfigFile({ configDir });
const presetEntries = await presets.apply('config', [], options);
const previewEntries = await presets.apply('previewEntries', [], options);
const absolutePreviewEntries = [...presetEntries, ...previewEntries].map((entry) =>
const previewAnnotations = await presets.apply('previewAnnotations', [], options);
const resolvedPreviewAnnotations = [...previewAnnotations].map((entry) =>
isAbsolute(entry) ? entry : resolve(entry)
);
const configEntries = [...absolutePreviewEntries, previewOrConfigFile]
const relativePreviewAnnotations = [...resolvedPreviewAnnotations, previewOrConfigFile]
.filter(Boolean)
.map((configEntry) => transformAbsPath(configEntry as string));
@ -34,7 +33,9 @@ export async function generateModernIframeScriptCode(options: ExtendedOptions) {
preview.onStoriesChanged({ importFn: newModule.importFn });
});
import.meta.hot.accept(${JSON.stringify(configEntries)}, ([...newConfigEntries]) => {
import.meta.hot.accept(${JSON.stringify(
relativePreviewAnnotations
)}, ([...newConfigEntries]) => {
const newGetProjectAnnotations = () => composeConfigs(newConfigEntries);
// getProjectAnnotations has changed so we need to patch the new one in
@ -56,8 +57,8 @@ export async function generateModernIframeScriptCode(options: ExtendedOptions) {
import { importFn } from '${virtualStoriesFile}';
const getProjectAnnotations = async () => {
const configs = await Promise.all([${configEntries
.map((configEntry) => `import('${configEntry}')`)
const configs = await Promise.all([${relativePreviewAnnotations
.map((previewAnnotation) => `import('${previewAnnotation}')`)
.join(',\n')}])
return composeConfigs(configs);
}

2
code/lib/builder-webpack5/src/presets/preview-preset.ts
View File

@ -5,8 +5,6 @@ export const webpack = async (_: unknown, options: any) => webpackConfig(options
export const entries = async (_: unknown, options: any) => {
let result: string[] = [];
result = result.concat(await options.presets.apply('previewEntries', [], options));
if (options.configType === 'DEVELOPMENT') {
// Suppress informational messages when --quiet is specified. webpack-hot-middleware's quiet
// parameter would also suppress warnings.

14
code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
View File

@ -82,8 +82,8 @@ export default async (
typeof coreOptions.builder === 'string' ? {} : coreOptions.builder?.options || {};
const docsOptions = await presets.apply<DocsOptions>('docs');
const configs = [
...(await presets.apply('config', [], options)),
const previewAnnotations = [
...(await presets.apply('previewAnnotations', [], options)),
loadPreviewOrConfigFile(options),
].filter(Boolean);
const entries = (await presets.apply('entries', [], options)) as string[];
@ -109,7 +109,7 @@ export default async (
),
{
storiesFilename,
configs,
previewAnnotations,
}
// We need to double escape `\` for webpack. We may have some in windows paths
).replace(/\\/g, '\\\\');
@ -125,21 +125,21 @@ export default async (
path.join(__dirname, 'virtualModuleEntry.template.js')
);
configs.forEach((configFilename: any) => {
previewAnnotations.forEach((previewAnnotationFilename: any) => {
const clientApi = storybookPaths['@storybook/client-api'];
const clientLogger = storybookPaths['@storybook/client-logger'];
// NOTE: although this file is also from the `dist/cjs` directory, it is actually a ESM
// file, see https://github.com/storybookjs/storybook/pull/16727#issuecomment-986485173
virtualModuleMapping[`${configFilename}-generated-config-entry.js`] = interpolate(
virtualModuleMapping[`${previewAnnotationFilename}-generated-config-entry.js`] = interpolate(
entryTemplate,
{
configFilename,
previewAnnotationFilename,
clientApi,
clientLogger,
}
);
entries.push(`${configFilename}-generated-config-entry.js`);
entries.push(`${previewAnnotationFilename}-generated-config-entry.js`);
});
if (stories.length > 0) {
const storyTemplate = await readTemplate(

11
code/lib/builder-webpack5/src/preview/virtualModuleEntry.template.js
View File

@ -10,10 +10,10 @@ import {
addArgTypesEnhancer,
setGlobalRender,
} from '{{clientApi}}';
import * as config from '{{configFilename}}';
import * as previewAnnotations from '{{previewAnnotationFilename}}';
Object.keys(config).forEach((key) => {
const value = config[key];
Object.keys(previewAnnotations).forEach((key) => {
const value = previewAnnotations[key];
switch (key) {
case 'args': {
return addArgs(value);
@ -54,8 +54,9 @@ Object.keys(config).forEach((key) => {
return addStepRunner(value);
}
default: {
// eslint-disable-next-line prefer-template
return console.log(key + ' was not supported :( !');
return console.log(
`Unknown key '${key}' exported by preview annotation file '{{previewAnnotationFilename}}'`
);
}
}
});

4
code/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars
View File

@ -12,7 +12,7 @@ import { importFn } from './{{storiesFilename}}';
const { SERVER_CHANNEL_URL } = global;
const getProjectAnnotations = () =>
composeConfigs([{{#each configs}}require('{{this}}'),{{/each}}]);
composeConfigs([{{#each previewAnnotations}}require('{{this}}'),{{/each}}]);
const channel = createPostMessageChannel({ page: 'preview' });
addons.setChannel(channel);
@ -38,7 +38,7 @@ if (module.hot) {
preview.onStoriesChanged({ importFn });
});
import.meta.webpackHot.accept([{{#each configs}}'{{this}}',{{/each}}], () => {
import.meta.webpackHot.accept([{{#each previewAnnotations}}'{{this}}',{{/each}}], () => {
// getProjectAnnotations has changed so we need to patch the new one in
preview.onGetProjectAnnotationsChanged({ getProjectAnnotations });
});

1
code/lib/core-server/package.json
View File

@ -70,6 +70,7 @@
"slash": "^3.0.0",
"telejson": "^6.0.8",
"ts-dedent": "^2.0.0",
"util-deprecate": "^1.0.2",
"watchpack": "^2.2.0",
"ws": "^8.2.3"
},

3
code/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix
View File

@ -1,3 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`cra-ts-essentials manager dev 1`] = `null`;

246
code/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-windows
View File

@ -1,246 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`cra-ts-essentials manager dev 1`] = `
Object {
"entry": Array [
"NODE_MODULES\\\\@storybook\\\\addon-ie11\\\\dist\\\\event-source-polyfill.js",
"ROOT\\\\lib\\\\core-client\\\\dist\\\\esm\\\\globals\\\\polyfills.js",
"ROOT\\\\lib\\\\core-client\\\\dist\\\\esm\\\\manager\\\\index.js",
"ROOT\\\\addons\\\\docs\\\\dist\\\\esm\\\\register.js",
"ROOT\\\\addons\\\\controls\\\\dist\\\\esm\\\\register.js",
"ROOT\\\\addons\\\\actions\\\\dist\\\\esm\\\\register.js",
"ROOT\\\\addons\\\\backgrounds\\\\dist\\\\esm\\\\register.js",
"ROOT\\\\addons\\\\toolbars\\\\dist\\\\esm\\\\register.js",
"ROOT\\\\addons\\\\measure\\\\dist\\\\esm\\\\register.js",
"ROOT\\\\addons\\\\outline\\\\dist\\\\esm\\\\register.js",
],
"keys": Array [
"name",
"mode",
"bail",
"devtool",
"entry",
"output",
"watchOptions",
"plugins",
"module",
"resolve",
"resolveLoader",
"recordsPath",
"performance",
"optimization",
],
"module": Object {
"rules": Array [
Object {
"exclude": Array [
"NODE_MODULES/",
"/dist/",
],
"include": Array [
"ROOT",
],
"test": "/\\\\.(mjs|tsx?|jsx?)$/",
"use": Array [
Object {
"loader": "NODE_MODULES\\\\babel-loader\\\\lib\\\\index.js",
"options": Object {
"babelrc": false,
"configFile": false,
"plugins": Array [
"NODE_MODULES\\\\@babel\\\\plugin-transform-shorthand-properties\\\\lib\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-transform-block-scoping\\\\lib\\\\index.js",
Array [
"NODE_MODULES\\\\@babel\\\\plugin-proposal-decorators\\\\lib\\\\index.js",
Object {
"legacy": true,
},
],
Array [
"NODE_MODULES\\\\@babel\\\\plugin-proposal-class-properties\\\\lib\\\\index.js",
Object {
"loose": true,
},
],
Array [
"NODE_MODULES\\\\@babel\\\\plugin-proposal-private-methods\\\\lib\\\\index.js",
Object {
"loose": true,
},
],
"NODE_MODULES\\\\@babel\\\\plugin-proposal-export-default-from\\\\lib\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-syntax-dynamic-import\\\\lib\\\\index.js",
Array [
"NODE_MODULES\\\\@babel\\\\plugin-proposal-object-rest-spread\\\\lib\\\\index.js",
Object {
"loose": true,
"useBuiltIns": true,
},
],
"NODE_MODULES\\\\@babel\\\\plugin-transform-classes\\\\lib\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-transform-arrow-functions\\\\lib\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-transform-parameters\\\\lib\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-transform-destructuring\\\\lib\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-transform-spread\\\\lib\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-transform-for-of\\\\lib\\\\index.js",
"NODE_MODULES\\\\babel-plugin-macros\\\\dist\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-proposal-optional-chaining\\\\lib\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-proposal-nullish-coalescing-operator\\\\lib\\\\index.js",
Array [
"NODE_MODULES\\\\babel-plugin-polyfill-corejs3\\\\lib\\\\index.js",
Object {
"absoluteImports": "NODE_MODULES\\\\core-js\\\\index.js",
"method": "usage-global",
"version": "*",
},
],
"NODE_MODULES\\\\@babel\\\\plugin-transform-template-literals\\\\lib\\\\index.js",
],
"presets": Array [
Array [
"NODE_MODULES\\\\@babel\\\\preset-env\\\\lib\\\\index.js",
Object {
"loose": true,
"shippedProposals": true,
},
],
"NODE_MODULES\\\\@babel\\\\preset-typescript\\\\lib\\\\index.js",
"NODE_MODULES\\\\@babel\\\\preset-react\\\\lib\\\\index.js",
],
"sourceType": "unambiguous",
},
},
],
},
Object {
"include": [Function],
"test": "/\\\\.js$/",
"use": Array [
Object {
"loader": "NODE_MODULES\\\\babel-loader\\\\lib\\\\index.js",
"options": Object {
"plugins": Array [
"NODE_MODULES\\\\@babel\\\\plugin-transform-shorthand-properties\\\\lib\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-transform-block-scoping\\\\lib\\\\index.js",
Array [
"NODE_MODULES\\\\@babel\\\\plugin-proposal-decorators\\\\lib\\\\index.js",
Object {
"legacy": true,
},
],
Array [
"NODE_MODULES\\\\@babel\\\\plugin-proposal-class-properties\\\\lib\\\\index.js",
Object {
"loose": true,
},
],
Array [
"NODE_MODULES\\\\@babel\\\\plugin-proposal-private-methods\\\\lib\\\\index.js",
Object {
"loose": true,
},
],
"NODE_MODULES\\\\@babel\\\\plugin-proposal-export-default-from\\\\lib\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-syntax-dynamic-import\\\\lib\\\\index.js",
Array [
"NODE_MODULES\\\\@babel\\\\plugin-proposal-object-rest-spread\\\\lib\\\\index.js",
Object {
"loose": true,
"useBuiltIns": true,
},
],
"NODE_MODULES\\\\@babel\\\\plugin-transform-classes\\\\lib\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-transform-arrow-functions\\\\lib\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-transform-parameters\\\\lib\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-transform-destructuring\\\\lib\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-transform-spread\\\\lib\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-transform-for-of\\\\lib\\\\index.js",
"NODE_MODULES\\\\babel-plugin-macros\\\\dist\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-proposal-optional-chaining\\\\lib\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-proposal-nullish-coalescing-operator\\\\lib\\\\index.js",
Array [
"NODE_MODULES\\\\babel-plugin-polyfill-corejs3\\\\lib\\\\index.js",
Object {
"absoluteImports": "NODE_MODULES\\\\core-js\\\\index.js",
"method": "usage-global",
"version": "*",
},
],
],
"presets": Array [
Array [
"NODE_MODULES\\\\@babel\\\\preset-env\\\\lib\\\\index.js",
Object {
"loose": true,
"modules": false,
"shippedProposals": true,
"targets": "defaults",
},
],
"NODE_MODULES\\\\@babel\\\\preset-react\\\\lib\\\\index.js",
],
"sourceType": "unambiguous",
},
},
],
},
Object {
"test": "/\\\\.css$/",
"use": Array [
"NODE_MODULES\\\\style-loader\\\\dist\\\\cjs.js",
Object {
"loader": "NODE_MODULES\\\\css-loader\\\\dist\\\\cjs.js",
"options": Object {
"importLoaders": 1,
},
},
],
},
Object {
"loader": "NODE_MODULES\\\\file-loader\\\\dist\\\\cjs.js",
"options": Object {
"name": "static/media/[path][name].[ext]",
},
"test": "/\\\\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\\\\?.*)?$/",
},
Object {
"loader": "NODE_MODULES\\\\url-loader\\\\dist\\\\cjs.js",
"options": Object {
"limit": 10000,
"name": "static/media/[path][name].[ext]",
},
"test": "/\\\\.(mp4|webm|wav|mp3|m4a|aac|oga)(\\\\?.*)?$/",
},
Object {
"include": "NODE_MODULES[\\\\\\\\/](@storybook[\\\\\\\\/]node_logger|@testing-library[\\\\\\\\/]dom|@testing-library[\\\\\\\\/]user-event|acorn-jsx|ansi-align|ansi-colors|ansi-escapes|ansi-regex|ansi-styles|better-opn|boxen|camelcase|chalk|color-convert|commander|find-cache-dir|find-up|fs-extra|highlight.js|json5|node-fetch|pkg-dir|prettier|pretty-format|react-dev-utils|resolve-from|semver|slash|strip-ansi|uuid)/",
"test": "/\\\\.js$/",
"use": Array [
Object {
"loader": "NODE_MODULES\\\\babel-loader\\\\lib\\\\index.js",
"options": Object {
"presets": Array [
Array [
"@babel/preset-env",
Object {
"targets": Object {
"ie": "11",
},
},
"storybook-addon-ie11",
],
],
"sourceType": "unambiguous",
},
},
],
},
],
},
"plugins": Array [
"VirtualModulesPlugin",
"HtmlWebpackPlugin",
"CaseSensitivePathsPlugin",
"DefinePlugin",
],
}
`;

3
code/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix
View File

@ -1,3 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`cra-ts-essentials manager prod 1`] = `null`;

246
code/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-windows
View File

@ -1,246 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`cra-ts-essentials manager prod 1`] = `
Object {
"entry": Array [
"NODE_MODULES\\\\@storybook\\\\addon-ie11\\\\dist\\\\event-source-polyfill.js",
"ROOT\\\\lib\\\\core-client\\\\dist\\\\esm\\\\globals\\\\polyfills.js",
"ROOT\\\\lib\\\\core-client\\\\dist\\\\esm\\\\manager\\\\index.js",
"ROOT\\\\addons\\\\docs\\\\dist\\\\esm\\\\register.js",
"ROOT\\\\addons\\\\controls\\\\dist\\\\esm\\\\register.js",
"ROOT\\\\addons\\\\actions\\\\dist\\\\esm\\\\register.js",
"ROOT\\\\addons\\\\backgrounds\\\\dist\\\\esm\\\\register.js",
"ROOT\\\\addons\\\\toolbars\\\\dist\\\\esm\\\\register.js",
"ROOT\\\\addons\\\\measure\\\\dist\\\\esm\\\\register.js",
"ROOT\\\\addons\\\\outline\\\\dist\\\\esm\\\\register.js",
],
"keys": Array [
"name",
"mode",
"bail",
"devtool",
"entry",
"output",
"watchOptions",
"plugins",
"module",
"resolve",
"resolveLoader",
"recordsPath",
"performance",
"optimization",
],
"module": Object {
"rules": Array [
Object {
"exclude": Array [
"NODE_MODULES/",
"/dist/",
],
"include": Array [
"ROOT",
],
"test": "/\\\\.(mjs|tsx?|jsx?)$/",
"use": Array [
Object {
"loader": "NODE_MODULES\\\\babel-loader\\\\lib\\\\index.js",
"options": Object {
"babelrc": false,
"configFile": false,
"plugins": Array [
"NODE_MODULES\\\\@babel\\\\plugin-transform-shorthand-properties\\\\lib\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-transform-block-scoping\\\\lib\\\\index.js",
Array [
"NODE_MODULES\\\\@babel\\\\plugin-proposal-decorators\\\\lib\\\\index.js",
Object {
"legacy": true,
},
],
Array [
"NODE_MODULES\\\\@babel\\\\plugin-proposal-class-properties\\\\lib\\\\index.js",
Object {
"loose": true,
},
],
Array [
"NODE_MODULES\\\\@babel\\\\plugin-proposal-private-methods\\\\lib\\\\index.js",
Object {
"loose": true,
},
],
"NODE_MODULES\\\\@babel\\\\plugin-proposal-export-default-from\\\\lib\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-syntax-dynamic-import\\\\lib\\\\index.js",
Array [
"NODE_MODULES\\\\@babel\\\\plugin-proposal-object-rest-spread\\\\lib\\\\index.js",
Object {
"loose": true,
"useBuiltIns": true,
},
],
"NODE_MODULES\\\\@babel\\\\plugin-transform-classes\\\\lib\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-transform-arrow-functions\\\\lib\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-transform-parameters\\\\lib\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-transform-destructuring\\\\lib\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-transform-spread\\\\lib\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-transform-for-of\\\\lib\\\\index.js",
"NODE_MODULES\\\\babel-plugin-macros\\\\dist\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-proposal-optional-chaining\\\\lib\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-proposal-nullish-coalescing-operator\\\\lib\\\\index.js",
Array [
"NODE_MODULES\\\\babel-plugin-polyfill-corejs3\\\\lib\\\\index.js",
Object {
"absoluteImports": "NODE_MODULES\\\\core-js\\\\index.js",
"method": "usage-global",
"version": "*",
},
],
"NODE_MODULES\\\\@babel\\\\plugin-transform-template-literals\\\\lib\\\\index.js",
],
"presets": Array [
Array [
"NODE_MODULES\\\\@babel\\\\preset-env\\\\lib\\\\index.js",
Object {
"loose": true,
"shippedProposals": true,
},
],
"NODE_MODULES\\\\@babel\\\\preset-typescript\\\\lib\\\\index.js",
"NODE_MODULES\\\\@babel\\\\preset-react\\\\lib\\\\index.js",
],
"sourceType": "unambiguous",
},
},
],
},
Object {
"include": [Function],
"test": "/\\\\.js$/",
"use": Array [
Object {
"loader": "NODE_MODULES\\\\babel-loader\\\\lib\\\\index.js",
"options": Object {
"plugins": Array [
"NODE_MODULES\\\\@babel\\\\plugin-transform-shorthand-properties\\\\lib\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-transform-block-scoping\\\\lib\\\\index.js",
Array [
"NODE_MODULES\\\\@babel\\\\plugin-proposal-decorators\\\\lib\\\\index.js",
Object {
"legacy": true,
},
],
Array [
"NODE_MODULES\\\\@babel\\\\plugin-proposal-class-properties\\\\lib\\\\index.js",
Object {
"loose": true,
},
],
Array [
"NODE_MODULES\\\\@babel\\\\plugin-proposal-private-methods\\\\lib\\\\index.js",
Object {
"loose": true,
},
],
"NODE_MODULES\\\\@babel\\\\plugin-proposal-export-default-from\\\\lib\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-syntax-dynamic-import\\\\lib\\\\index.js",
Array [
"NODE_MODULES\\\\@babel\\\\plugin-proposal-object-rest-spread\\\\lib\\\\index.js",
Object {
"loose": true,
"useBuiltIns": true,
},
],
"NODE_MODULES\\\\@babel\\\\plugin-transform-classes\\\\lib\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-transform-arrow-functions\\\\lib\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-transform-parameters\\\\lib\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-transform-destructuring\\\\lib\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-transform-spread\\\\lib\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-transform-for-of\\\\lib\\\\index.js",
"NODE_MODULES\\\\babel-plugin-macros\\\\dist\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-proposal-optional-chaining\\\\lib\\\\index.js",
"NODE_MODULES\\\\@babel\\\\plugin-proposal-nullish-coalescing-operator\\\\lib\\\\index.js",
Array [
"NODE_MODULES\\\\babel-plugin-polyfill-corejs3\\\\lib\\\\index.js",
Object {
"absoluteImports": "NODE_MODULES\\\\core-js\\\\index.js",
"method": "usage-global",
"version": "*",
},
],
],
"presets": Array [
Array [
"NODE_MODULES\\\\@babel\\\\preset-env\\\\lib\\\\index.js",
Object {
"loose": true,
"modules": false,
"shippedProposals": true,
"targets": "defaults",
},
],
"NODE_MODULES\\\\@babel\\\\preset-react\\\\lib\\\\index.js",
],
"sourceType": "unambiguous",
},
},
],
},
Object {
"test": "/\\\\.css$/",
"use": Array [
"NODE_MODULES\\\\style-loader\\\\dist\\\\cjs.js",
Object {
"loader": "NODE_MODULES\\\\css-loader\\\\dist\\\\cjs.js",
"options": Object {
"importLoaders": 1,
},
},
],
},
Object {
"loader": "NODE_MODULES\\\\file-loader\\\\dist\\\\cjs.js",
"options": Object {
"name": "static/media/[name].[contenthash:8].[ext]",
},
"test": "/\\\\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\\\\?.*)?$/",
},
Object {
"loader": "NODE_MODULES\\\\url-loader\\\\dist\\\\cjs.js",
"options": Object {
"limit": 10000,
"name": "static/media/[name].[contenthash:8].[ext]",
},
"test": "/\\\\.(mp4|webm|wav|mp3|m4a|aac|oga)(\\\\?.*)?$/",
},
Object {
"include": "NODE_MODULES[\\\\\\\\/](@storybook[\\\\\\\\/]node_logger|@testing-library[\\\\\\\\/]dom|@testing-library[\\\\\\\\/]user-event|acorn-jsx|ansi-align|ansi-colors|ansi-escapes|ansi-regex|ansi-styles|better-opn|boxen|camelcase|chalk|color-convert|commander|find-cache-dir|find-up|fs-extra|highlight.js|json5|node-fetch|pkg-dir|prettier|pretty-format|react-dev-utils|resolve-from|semver|slash|strip-ansi|uuid)/",
"test": "/\\\\.js$/",
"use": Array [
Object {
"loader": "NODE_MODULES\\\\babel-loader\\\\lib\\\\index.js",
"options": Object {
"presets": Array [
Array [
"@babel/preset-env",
Object {
"targets": Object {
"ie": "11",
},
},
"storybook-addon-ie11",
],
],
"sourceType": "unambiguous",
},
},
],
},
],
},
"plugins": Array [
"VirtualModulesPlugin",
"HtmlWebpackPlugin",
"CaseSensitivePathsPlugin",
"DefinePlugin",
],
}
`;

524
code/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix
View File

@ -1,524 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`cra-ts-essentials preview dev 1`] = `
Object {
"entry": Array [
"CWD/lib/core-client/dist/esm/globals/globals.js",
"NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined",
"CWD/storybook-config-entry.js",
],
"keys": Array [
"name",
"mode",
"bail",
"devtool",
"entry",
"output",
"stats",
"watchOptions",
"ignoreWarnings",
"plugins",
"module",
"resolve",
"optimization",
"performance",
"resolveLoader",
],
"module": Object {
"rules": Array [
Object {
"test": "/\\\\.md$/",
"type": "asset/source",
},
Object {
"enforce": "pre",
"exclude": "/@babel(?:\\\\/|\\\\\\\\{1,2})runtime/",
"include": Array [
"CWD/examples/cra-ts-essentials/.storybook",
],
"loader": "NODE_MODULES/source-map-loader/dist/cjs.js",
"test": "/\\\\.(js|mjs|jsx|ts|tsx|css)$/",
},
Object {
"oneOf": Array [
Object {
"mimetype": "image/avif",
"parser": Object {
"dataUrlCondition": Object {
"maxSize": 10000,
},
},
"test": Array [
"/\\\\.avif$/",
],
"type": "asset",
},
Object {
"parser": Object {
"dataUrlCondition": Object {
"maxSize": 10000,
},
},
"test": Array [
"/\\\\.bmp$/",
"/\\\\.gif$/",
"/\\\\.jpe?g$/",
"/\\\\.png$/",
],
"type": "asset",
},
Object {
"issuer": Object {
"and": Array [
"/\\\\.(ts|tsx|js|jsx|md|mdx)$/",
],
},
"test": "/\\\\.svg$/",
"use": Array [
Object {
"loader": "NODE_MODULES/@svgr/webpack/lib/index.js",
"options": Object {
"prettier": false,
"ref": true,
"svgo": false,
"svgoConfig": Object {
"plugins": Array [
Object {
"removeViewBox": false,
},
],
},
"titleProp": true,
},
},
Object {
"loader": "NODE_MODULES/file-loader/dist/cjs.js",
"options": Object {
"name": "static/media/[name].[hash].[ext]",
},
},
],
},
Object {
"include": Array [
"CWD/src",
"CWD/examples/cra-ts-essentials/.storybook",
],
"loader": "NODE_MODULES/babel-loader/lib/index.js",
"options": Object {
"babelrc": false,
"cacheCompression": false,
"cacheDirectory": true,
"cacheIdentifier": "development:babel-plugin-named-asset-import@0.3.8:babel-preset-react-app@10.0.1:react-dev-utils@12.0.1:react-scripts@5.0.1",
"compact": false,
"configFile": false,
"customize": "NODE_MODULES/babel-preset-react-app/webpack-overrides.js",
"extends": undefined,
"overrides": Array [
Object {
"plugins": Array [
"NODE_MODULES/babel-plugin-named-exports-order/index.js",
],
"test": "/\\\\.(story|stories).*$/",
},
Object {
"plugins": Array [
Array [
"NODE_MODULES/babel-plugin-react-docgen/lib/index.js",
Object {
"DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES",
},
],
],
"test": "/\\\\.(cjs|mjs|jsx?)$/",
},
],
"plugins": Array [
"NODE_MODULES/react-refresh/babel.js",
],
"presets": Array [
Array [
"NODE_MODULES/babel-preset-react-app/index.js",
Object {
"runtime": "automatic",
},
],
],
},
"test": "/\\\\.(js|mjs|jsx|ts|tsx)$/",
},
Object {
"exclude": "/@babel(?:\\\\/|\\\\\\\\{1,2})runtime/",
"include": Array [
"CWD/examples/cra-ts-essentials/.storybook",
],
"loader": "NODE_MODULES/babel-loader/lib/index.js",
"options": Object {
"babelrc": false,
"cacheCompression": false,
"cacheDirectory": true,
"cacheIdentifier": "development:babel-plugin-named-asset-import@0.3.8:babel-preset-react-app@10.0.1:react-dev-utils@12.0.1:react-scripts@5.0.1",
"compact": false,
"configFile": false,
"inputSourceMap": true,
"presets": Array [
Array [
"NODE_MODULES/babel-preset-react-app/dependencies.js",
Object {
"helpers": true,
},
],
],
"sourceMaps": true,
},
"test": "/\\\\.(js|mjs)$/",
},
Object {
"exclude": Array [
"/\\\\.module\\\\.css$/",
"/@storybook/",
],
"include": undefined,
"sideEffects": true,
"test": "/\\\\.css$/",
"use": Array [
"NODE_MODULES/style-loader/dist/cjs.js",
Object {
"loader": "NODE_MODULES/css-loader/dist/cjs.js",
"options": Object {
"importLoaders": 1,
"modules": Object {
"mode": "icss",
},
"sourceMap": true,
},
},
Object {
"loader": "NODE_MODULES/postcss-loader/dist/cjs.js",
"options": Object {
"postcssOptions": Object {
"config": false,
"ident": "postcss",
"plugins": Array [
"postcss-flexbugs-fixes",
Array [
"postcss-preset-env",
Object {
"autoprefixer": Object {
"flexbox": "no-2009",
},
"stage": 3,
},
],
"postcss-normalize",
],
},
"sourceMap": true,
},
},
],
},
Object {
"test": "/\\\\.module\\\\.css$/",
"use": Array [
"NODE_MODULES/style-loader/dist/cjs.js",
Object {
"loader": "NODE_MODULES/css-loader/dist/cjs.js",
"options": Object {
"importLoaders": 1,
"modules": Object {
"getLocalIdent": [Function],
"mode": "local",
},
"sourceMap": true,
},
},
Object {
"loader": "NODE_MODULES/postcss-loader/dist/cjs.js",
"options": Object {
"postcssOptions": Object {
"config": false,
"ident": "postcss",
"plugins": Array [
"postcss-flexbugs-fixes",
Array [
"postcss-preset-env",
Object {
"autoprefixer": Object {
"flexbox": "no-2009",
},
"stage": 3,
},
],
"postcss-normalize",
],
},
"sourceMap": true,
},
},
],
},
Object {
"exclude": "/\\\\.module\\\\.(scss|sass)$/",
"sideEffects": true,
"test": "/\\\\.(scss|sass)$/",
"use": Array [
"NODE_MODULES/style-loader/dist/cjs.js",
Object {
"loader": "NODE_MODULES/css-loader/dist/cjs.js",
"options": Object {
"importLoaders": 3,
"modules": Object {
"mode": "icss",
},
"sourceMap": true,
},
},
Object {
"loader": "NODE_MODULES/postcss-loader/dist/cjs.js",
"options": Object {
"postcssOptions": Object {
"config": false,
"ident": "postcss",
"plugins": Array [
"postcss-flexbugs-fixes",
Array [
"postcss-preset-env",
Object {
"autoprefixer": Object {
"flexbox": "no-2009",
},
"stage": 3,
},
],
"postcss-normalize",
],
},
"sourceMap": true,
},
},
Object {
"loader": "NODE_MODULES/resolve-url-loader/index.js",
"options": Object {
"root": "CWD/src",
"sourceMap": true,
},
},
Object {
"loader": "NODE_MODULES/sass-loader/dist/cjs.js",
"options": Object {
"sourceMap": true,
},
},
],
},
Object {
"test": "/\\\\.module\\\\.(scss|sass)$/",
"use": Array [
"NODE_MODULES/style-loader/dist/cjs.js",
Object {
"loader": "NODE_MODULES/css-loader/dist/cjs.js",
"options": Object {
"importLoaders": 3,
"modules": Object {
"getLocalIdent": [Function],
"mode": "local",
},
"sourceMap": true,
},
},
Object {
"loader": "NODE_MODULES/postcss-loader/dist/cjs.js",
"options": Object {
"postcssOptions": Object {
"config": false,
"ident": "postcss",
"plugins": Array [
"postcss-flexbugs-fixes",
Array [
"postcss-preset-env",
Object {
"autoprefixer": Object {
"flexbox": "no-2009",
},
"stage": 3,
},
],
"postcss-normalize",
],
},
"sourceMap": true,
},
},
Object {
"loader": "NODE_MODULES/resolve-url-loader/index.js",
"options": Object {
"root": "CWD/src",
"sourceMap": true,
},
},
Object {
"loader": "NODE_MODULES/sass-loader/dist/cjs.js",
"options": Object {
"sourceMap": true,
},
},
],
},
Object {
"exclude": Array [
"/^$/",
"/\\\\.(js|mjs|jsx|ts|tsx)$/",
"/\\\\.html$/",
"/\\\\.json$/",
"/\\\\.(ejs|md|mdx|cjs)$/",
],
"type": "asset/resource",
},
],
},
Object {
"test": "/(stories|story)\\\\.mdx$/",
"use": Array [
Object {
"loader": "NODE_MODULES/babel-loader/lib/index.js",
"options": Object {
"babelrc": false,
"cacheDirectory": "NODE_MODULES/.cache/storybook/babel",
"configFile": false,
"overrides": Array [
Object {
"plugins": Array [
"NODE_MODULES/babel-plugin-named-exports-order/index.js",
],
"test": "/\\\\.(story|stories).*$/",
},
Object {
"plugins": Array [
Array [
"NODE_MODULES/babel-plugin-react-docgen/lib/index.js",
Object {
"DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES",
},
],
],
"test": "/\\\\.(cjs|mjs|jsx?)$/",
},
],
"plugins": Array [
Array [
"NODE_MODULES/@babel/plugin-transform-react-jsx/lib/index.js",
Object {
"pragma": "React.createElement",
"pragmaFrag": "React.Fragment",
},
],
],
"presets": Array [],
},
},
Object {
"loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js",
"options": Object {
"remarkPlugins": Array [
[Function],
[Function],
],
"skipCsf": false,
},
},
],
},
Object {
"exclude": "/(stories|story)\\\\.mdx$/",
"test": "/\\\\.mdx$/",
"use": Array [
Object {
"loader": "NODE_MODULES/babel-loader/lib/index.js",
"options": Object {
"babelrc": false,
"cacheDirectory": "NODE_MODULES/.cache/storybook/babel",
"configFile": false,
"overrides": Array [
Object {
"plugins": Array [
"NODE_MODULES/babel-plugin-named-exports-order/index.js",
],
"test": "/\\\\.(story|stories).*$/",
},
Object {
"plugins": Array [
Array [
"NODE_MODULES/babel-plugin-react-docgen/lib/index.js",
Object {
"DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES",
},
],
],
"test": "/\\\\.(cjs|mjs|jsx?)$/",
},
],
"plugins": Array [
Array [
"NODE_MODULES/@babel/plugin-transform-react-jsx/lib/index.js",
Object {
"pragma": "React.createElement",
"pragmaFrag": "React.Fragment",
},
],
],
"presets": Array [],
},
},
Object {
"loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js",
"options": Object {
"remarkPlugins": Array [
[Function],
[Function],
],
"skipCsf": true,
},
},
],
},
Object {
"enforce": "pre",
"loader": "CWD/lib/source-loader/dist/cjs/index.js",
"options": Object {
"injectStoryParameters": true,
"inspectLocalDependencies": true,
},
"test": "/\\\\.(stories|story)\\\\.[tj]sx?$/",
},
Object {
"test": "/\\\\.m?js$/",
"type": "javascript/auto",
},
Object {
"resolve": Object {
"fullySpecified": false,
},
"test": "/\\\\.m?js$/",
},
],
},
"plugins": Array [
"VirtualModulesPlugin",
"HtmlWebpackPlugin",
"DefinePlugin",
"ProvidePlugin",
"HotModuleReplacementPlugin",
"CaseSensitivePathsPlugin",
"ProgressPlugin",
"InterpolateHtmlPlugin",
"ModuleNotFoundPlugin",
"ReactRefreshPlugin",
"IgnorePlugin",
"ForkTsCheckerWebpackPlugin",
"ESLintWebpackPlugin",
"IgnorePlugin",
"DocgenPlugin",
],
}
`;

490
code/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-windows
View File

@ -1,490 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`cra-ts-essentials preview dev 1`] = `
Object {
"entry": Array [
"ROOT\\\\lib\\\\core-client\\\\dist\\\\esm\\\\globals\\\\polyfills.js",
"ROOT\\\\lib\\\\core-client\\\\dist\\\\esm\\\\globals\\\\globals.js",
"NODE_MODULES\\\\webpack-hot-middleware\\\\client.js?reload=true&quiet=false&noInfo=undefined",
"NODE_MODULES\\\\@storybook\\\\addon-ie11\\\\dist\\\\event-source-polyfill.js",
"ROOT\\\\storybook-init-framework-entry.js",
"ROOT\\\\addons\\\\docs\\\\dist\\\\esm\\\\frameworks\\\\common\\\\config.js-generated-config-entry.js",
"ROOT\\\\addons\\\\docs\\\\dist\\\\esm\\\\frameworks\\\\react\\\\config.js-generated-config-entry.js",
"ROOT\\\\app\\\\react\\\\dist\\\\esm\\\\client\\\\preview\\\\config-generated-config-entry.js",
"ROOT\\\\addons\\\\actions\\\\dist\\\\esm\\\\preset\\\\addDecorator.js-generated-config-entry.js",
"ROOT\\\\addons\\\\actions\\\\dist\\\\esm\\\\preset\\\\addArgs.js-generated-config-entry.js",
"ROOT\\\\addons\\\\backgrounds\\\\dist\\\\esm\\\\preset\\\\addDecorator.js-generated-config-entry.js",
"ROOT\\\\addons\\\\backgrounds\\\\dist\\\\esm\\\\preset\\\\addParameter.js-generated-config-entry.js",
"ROOT\\\\addons\\\\measure\\\\dist\\\\esm\\\\preset\\\\addDecorator.js-generated-config-entry.js",
"ROOT\\\\addons\\\\outline\\\\dist\\\\esm\\\\preset\\\\addDecorator.js-generated-config-entry.js",
"ROOT\\\\examples\\\\cra-ts-essentials\\\\.storybook\\\\preview.js-generated-config-entry.js",
"ROOT\\\\generated-stories-entry.js",
],
"keys": Array [
"name",
"mode",
"bail",
"devtool",
"entry",
"output",
"watchOptions",
"plugins",
"module",
"resolve",
"resolveLoader",
"optimization",
"performance",
],
"module": Object {
"rules": Array [
Object {
"test": "/\\\\.md$/",
"use": Array [
Object {
"loader": "NODE_MODULES\\\\raw-loader\\\\dist\\\\cjs.js",
},
],
},
Object {
"parser": Object {
"requireEnsure": false,
},
},
Object {
"oneOf": Array [
Object {
"loader": "NODE_MODULES\\\\url-loader\\\\dist\\\\cjs.js",
"options": Object {
"limit": 10000,
"mimetype": "image/avif",
"name": "static/media/[name].[hash:8].[ext]",
},
"test": Array [
"/\\\\.avif$/",
],
},
Object {
"loader": "NODE_MODULES\\\\url-loader\\\\dist\\\\cjs.js",
"options": Object {
"limit": 10000,
"name": "static/media/[name].[hash:8].[ext]",
},
"test": Array [
"/\\\\.bmp$/",
"/\\\\.gif$/",
"/\\\\.jpe?g$/",
"/\\\\.png$/",
],
},
Object {
"include": Array [
"ROOT\\\\src",
"ROOT\\\\examples\\\\cra-ts-essentials\\\\.storybook",
],
"loader": "NODE_MODULES\\\\babel-loader\\\\lib\\\\index.js",
"options": Object {
"babelrc": false,
"cacheCompression": false,
"cacheDirectory": true,
"cacheIdentifier": "development:babel-plugin-named-asset-import@0.3.7:babel-preset-react-app@10.0.0:react-dev-utils@11.0.3:react-scripts@4.0.3",
"compact": false,
"configFile": false,
"customize": "NODE_MODULES\\\\babel-preset-react-app\\\\webpack-overrides.js",
"extends": undefined,
"overrides": Array [
Object {
"plugins": Array [
Array [
"NODE_MODULES\\\\babel-plugin-react-docgen\\\\lib\\\\index.js",
Object {
"DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES",
},
],
],
"test": "/\\\\.(mjs|jsx?)$/",
},
],
"plugins": Array [
Array [
"NODE_MODULES\\\\babel-plugin-named-asset-import\\\\index.js",
Object {
"loaderMap": Object {
"svg": Object {
"ReactComponent": "@svgr/webpack?-svgo,+titleProp,+ref![path]",
},
},
},
],
"NODE_MODULES\\\\react-refresh\\\\babel.js",
],
"presets": Array [
Array [
"@babel/preset-env",
Object {
"targets": Object {
"ie": "11",
},
},
"storybook-addon-ie11",
],
Array [
"NODE_MODULES\\\\babel-preset-react-app\\\\index.js",
Object {
"runtime": "automatic",
},
],
],
},
"test": "/\\\\.(js|mjs|jsx|ts|tsx)$/",
},
Object {
"exclude": "/@babel(?:\\\\/|\\\\\\\\{1,2})runtime/",
"include": Array [
"ROOT\\\\examples\\\\cra-ts-essentials\\\\.storybook",
],
"loader": "NODE_MODULES\\\\babel-loader\\\\lib\\\\index.js",
"options": Object {
"babelrc": false,
"cacheCompression": false,
"cacheDirectory": true,
"cacheIdentifier": "development:babel-plugin-named-asset-import@0.3.7:babel-preset-react-app@10.0.0:react-dev-utils@11.0.3:react-scripts@4.0.3",
"compact": false,
"configFile": false,
"inputSourceMap": true,
"presets": Array [
Array [
"NODE_MODULES\\\\babel-preset-react-app\\\\dependencies.js",
Object {
"helpers": true,
},
],
],
"sourceMaps": true,
},
"test": "/\\\\.(js|mjs)$/",
},
Object {
"exclude": Array [
"/\\\\.module\\\\.css$/",
"/@storybook/",
],
"include": undefined,
"sideEffects": true,
"test": "/\\\\.css$/",
"use": Array [
"NODE_MODULES\\\\style-loader\\\\dist\\\\cjs.js",
Object {
"loader": "NODE_MODULES\\\\css-loader\\\\dist\\\\cjs.js",
"options": Object {
"importLoaders": 1,
"sourceMap": true,
},
},
Object {
"loader": "NODE_MODULES\\\\postcss-loader\\\\src\\\\index.js",
"options": Object {
"ident": "postcss",
"plugins": [Function],
"sourceMap": true,
},
},
],
},
Object {
"test": "/\\\\.module\\\\.css$/",
"use": Array [
"NODE_MODULES\\\\style-loader\\\\dist\\\\cjs.js",
Object {
"loader": "NODE_MODULES\\\\css-loader\\\\dist\\\\cjs.js",
"options": Object {
"importLoaders": 1,
"modules": Object {
"getLocalIdent": [Function],
},
"sourceMap": true,
},
},
Object {
"loader": "NODE_MODULES\\\\postcss-loader\\\\src\\\\index.js",
"options": Object {
"ident": "postcss",
"plugins": [Function],
"sourceMap": true,
},
},
],
},
Object {
"exclude": "/\\\\.module\\\\.(scss|sass)$/",
"sideEffects": true,
"test": "/\\\\.(scss|sass)$/",
"use": Array [
"NODE_MODULES\\\\style-loader\\\\dist\\\\cjs.js",
Object {
"loader": "NODE_MODULES\\\\css-loader\\\\dist\\\\cjs.js",
"options": Object {
"importLoaders": 3,
"sourceMap": true,
},
},
Object {
"loader": "NODE_MODULES\\\\postcss-loader\\\\src\\\\index.js",
"options": Object {
"ident": "postcss",
"plugins": [Function],
"sourceMap": true,
},
},
Object {
"loader": "NODE_MODULES\\\\resolve-url-loader\\\\index.js",
"options": Object {
"root": "ROOT\\\\src",
"sourceMap": true,
},
},
Object {
"loader": "NODE_MODULES\\\\sass-loader\\\\dist\\\\cjs.js",
"options": Object {
"sourceMap": true,
},
},
],
},
Object {
"test": "/\\\\.module\\\\.(scss|sass)$/",
"use": Array [
"NODE_MODULES\\\\style-loader\\\\dist\\\\cjs.js",
Object {
"loader": "NODE_MODULES\\\\css-loader\\\\dist\\\\cjs.js",
"options": Object {
"importLoaders": 3,
"modules": Object {
"getLocalIdent": [Function],
},
"sourceMap": true,
},
},
Object {
"loader": "NODE_MODULES\\\\postcss-loader\\\\src\\\\index.js",
"options": Object {
"ident": "postcss",
"plugins": [Function],
"sourceMap": true,
},
},
Object {
"loader": "NODE_MODULES\\\\resolve-url-loader\\\\index.js",
"options": Object {
"root": "ROOT\\\\src",
"sourceMap": true,
},
},
Object {
"loader": "NODE_MODULES\\\\sass-loader\\\\dist\\\\cjs.js",
"options": Object {
"sourceMap": true,
},
},
],
},
Object {
"exclude": Array [
"/\\\\.(js|mjs|jsx|ts|tsx)$/",
"/\\\\.html$/",
"/\\\\.json$/",
"/\\\\.(ejs|md|mdx)$/",
],
"loader": "NODE_MODULES\\\\file-loader\\\\dist\\\\cjs.js",
"options": Object {
"name": "static/media/[name].[hash:8].[ext]",
},
},
],
},
Object {
"include": "NODE_MODULES[\\\\\\\\/](@storybook[\\\\\\\\/]node_logger|@testing-library[\\\\\\\\/]dom|@testing-library[\\\\\\\\/]user-event|acorn-jsx|ansi-align|ansi-colors|ansi-escapes|ansi-regex|ansi-styles|better-opn|boxen|camelcase|chalk|color-convert|commander|find-cache-dir|find-up|fs-extra|highlight.js|json5|node-fetch|pkg-dir|prettier|pretty-format|react-dev-utils|resolve-from|semver|slash|strip-ansi|uuid)/",
"test": "/\\\\.js$/",
"use": Array [
Object {
"loader": "NODE_MODULES\\\\babel-loader\\\\lib\\\\index.js",
"options": Object {
"presets": Array [
Array [
"@babel/preset-env",
Object {
"targets": Object {
"ie": "11",
},
},
"storybook-addon-ie11",
],
],
"sourceType": "unambiguous",
},
},
],
},
Object {
"include": "NODE_MODULES\\\\\\\\acorn-jsx/",
"test": "/\\\\.js$/",
"use": Array [
Object {
"loader": "NODE_MODULES\\\\babel-loader\\\\lib\\\\index.js",
"options": Object {
"presets": Array [
Array [
"NODE_MODULES\\\\@babel\\\\preset-env\\\\lib\\\\index.js",
Object {
"modules": "commonjs",
},
],
],
},
},
],
},
Object {
"test": "/(stories|story)\\\\.mdx$/",
"use": Array [
Object {
"loader": "NODE_MODULES\\\\babel-loader\\\\lib\\\\index.js",
"options": Object {
"babelrc": false,
"cacheDirectory": "NODE_MODULES\\\\.cache\\\\storybook\\\\babel",
"configFile": false,
"overrides": Array [
Object {
"plugins": Array [
Array [
"NODE_MODULES\\\\babel-plugin-react-docgen\\\\lib\\\\index.js",
Object {
"DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES",
},
],
],
"test": "/\\\\.(mjs|jsx?)$/",
},
],
"plugins": Array [
Array [
"NODE_MODULES\\\\@babel\\\\plugin-transform-react-jsx\\\\lib\\\\index.js",
Object {
"pragma": "React.createElement",
"pragmaFrag": "React.Fragment",
},
],
],
"presets": Array [
Array [
"@babel/preset-env",
Object {
"targets": Object {
"ie": "11",
},
},
"storybook-addon-ie11",
],
],
},
},
Object {
"loader": "NODE_MODULES\\\\@mdx-js\\\\loader\\\\index.js",
"options": Object {
"compilers": Array [
[Function],
],
"remarkPlugins": Array [
[Function],
[Function],
],
},
},
],
},
Object {
"exclude": "/(stories|story)\\\\.mdx$/",
"test": "/\\\\.mdx$/",
"use": Array [
Object {
"loader": "NODE_MODULES\\\\babel-loader\\\\lib\\\\index.js",
"options": Object {
"babelrc": false,
"cacheDirectory": "NODE_MODULES\\\\.cache\\\\storybook\\\\babel",
"configFile": false,
"overrides": Array [
Object {
"plugins": Array [
Array [
"NODE_MODULES\\\\babel-plugin-react-docgen\\\\lib\\\\index.js",
Object {
"DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES",
},
],
],
"test": "/\\\\.(mjs|jsx?)$/",
},
],
"plugins": Array [
Array [
"NODE_MODULES\\\\@babel\\\\plugin-transform-react-jsx\\\\lib\\\\index.js",
Object {
"pragma": "React.createElement",
"pragmaFrag": "React.Fragment",
},
],
],
"presets": Array [
Array [
"@babel/preset-env",
Object {
"targets": Object {
"ie": "11",
},
},
"storybook-addon-ie11",
],
],
},
},
Object {
"loader": "NODE_MODULES\\\\@mdx-js\\\\loader\\\\index.js",
"options": Object {
"remarkPlugins": Array [
[Function],
[Function],
],
},
},
],
},
Object {
"enforce": "pre",
"loader": "ROOT\\\\lib\\\\source-loader\\\\dist\\\\cjs\\\\index.js",
"options": Object {
"injectStoryParameters": true,
"inspectLocalDependencies": true,
},
"test": "/\\\\.(stories|story)\\\\.[tj]sx?$/",
},
],
},
"plugins": Array [
"FilterWarningsPlugin",
"VirtualModulesPlugin",
"HtmlWebpackPlugin",
"DefinePlugin",
"WatchMissingNodeModulesPlugin",
"HotModuleReplacementPlugin",
"CaseSensitivePathsPlugin",
"ProgressPlugin",
"InterpolateHtmlPlugin",
"ModuleNotFoundPlugin",
"ReactRefreshPlugin",
"ManifestPlugin",
"IgnorePlugin",
"ForkTsCheckerWebpackPlugin",
"ESLintWebpackPlugin",
"DocgenPlugin",
],
}
`;

541
code/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix
View File

@ -1,541 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`cra-ts-essentials preview prod 1`] = `
Object {
"entry": Array [
"CWD/lib/core-client/dist/esm/globals/globals.js",
"CWD/storybook-config-entry.js",
],
"keys": Array [
"name",
"mode",
"bail",
"devtool",
"entry",
"output",
"stats",
"watchOptions",
"ignoreWarnings",
"plugins",
"module",
"resolve",
"optimization",
"performance",
"resolveLoader",
],
"module": Object {
"rules": Array [
Object {
"test": "/\\\\.md$/",
"type": "asset/source",
},
Object {
"enforce": "pre",
"exclude": "/@babel(?:\\\\/|\\\\\\\\{1,2})runtime/",
"include": Array [
"CWD/examples/cra-ts-essentials/.storybook",
],
"loader": "NODE_MODULES/source-map-loader/dist/cjs.js",
"test": "/\\\\.(js|mjs|jsx|ts|tsx|css)$/",
},
Object {
"oneOf": Array [
Object {
"mimetype": "image/avif",
"parser": Object {
"dataUrlCondition": Object {
"maxSize": 10000,
},
},
"test": Array [
"/\\\\.avif$/",
],
"type": "asset",
},
Object {
"parser": Object {
"dataUrlCondition": Object {
"maxSize": 10000,
},
},
"test": Array [
"/\\\\.bmp$/",
"/\\\\.gif$/",
"/\\\\.jpe?g$/",
"/\\\\.png$/",
],
"type": "asset",
},
Object {
"issuer": Object {
"and": Array [
"/\\\\.(ts|tsx|js|jsx|md|mdx)$/",
],
},
"test": "/\\\\.svg$/",
"use": Array [
Object {
"loader": "NODE_MODULES/@svgr/webpack/lib/index.js",
"options": Object {
"prettier": false,
"ref": true,
"svgo": false,
"svgoConfig": Object {
"plugins": Array [
Object {
"removeViewBox": false,
},
],
},
"titleProp": true,
},
},
Object {
"loader": "NODE_MODULES/file-loader/dist/cjs.js",
"options": Object {
"name": "static/media/[name].[hash].[ext]",
},
},
],
},
Object {
"include": Array [
"CWD/src",
"CWD/examples/cra-ts-essentials/.storybook",
],
"loader": "NODE_MODULES/babel-loader/lib/index.js",
"options": Object {
"babelrc": false,
"cacheCompression": false,
"cacheDirectory": true,
"cacheIdentifier": "production:babel-plugin-named-asset-import@0.3.8:babel-preset-react-app@10.0.1:react-dev-utils@12.0.1:react-scripts@5.0.1",
"compact": true,
"configFile": false,
"customize": "NODE_MODULES/babel-preset-react-app/webpack-overrides.js",
"extends": undefined,
"overrides": Array [
Object {
"plugins": Array [
"NODE_MODULES/babel-plugin-named-exports-order/index.js",
],
"test": "/\\\\.(story|stories).*$/",
},
Object {
"plugins": Array [
Array [
"NODE_MODULES/babel-plugin-react-docgen/lib/index.js",
Object {
"DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES",
},
],
],
"test": "/\\\\.(cjs|mjs|jsx?)$/",
},
],
"plugins": Array [],
"presets": Array [
Array [
"NODE_MODULES/babel-preset-react-app/index.js",
Object {
"runtime": "automatic",
},
],
],
},
"test": "/\\\\.(js|mjs|jsx|ts|tsx)$/",
},
Object {
"exclude": "/@babel(?:\\\\/|\\\\\\\\{1,2})runtime/",
"include": Array [
"CWD/examples/cra-ts-essentials/.storybook",
],
"loader": "NODE_MODULES/babel-loader/lib/index.js",
"options": Object {
"babelrc": false,
"cacheCompression": false,
"cacheDirectory": true,
"cacheIdentifier": "production:babel-plugin-named-asset-import@0.3.8:babel-preset-react-app@10.0.1:react-dev-utils@12.0.1:react-scripts@5.0.1",
"compact": false,
"configFile": false,
"inputSourceMap": true,
"presets": Array [
Array [
"NODE_MODULES/babel-preset-react-app/dependencies.js",
Object {
"helpers": true,
},
],
],
"sourceMaps": true,
},
"test": "/\\\\.(js|mjs)$/",
},
Object {
"exclude": Array [
"/\\\\.module\\\\.css$/",
"/@storybook/",
],
"include": undefined,
"sideEffects": true,
"test": "/\\\\.css$/",
"use": Array [
Object {
"loader": "NODE_MODULES/mini-css-extract-plugin/dist/loader.js",
"options": Object {
"publicPath": "../../",
},
},
Object {
"loader": "NODE_MODULES/css-loader/dist/cjs.js",
"options": Object {
"importLoaders": 1,
"modules": Object {
"mode": "icss",
},
"sourceMap": true,
},
},
Object {
"loader": "NODE_MODULES/postcss-loader/dist/cjs.js",
"options": Object {
"postcssOptions": Object {
"config": false,
"ident": "postcss",
"plugins": Array [
"postcss-flexbugs-fixes",
Array [
"postcss-preset-env",
Object {
"autoprefixer": Object {
"flexbox": "no-2009",
},
"stage": 3,
},
],
"postcss-normalize",
],
},
"sourceMap": true,
},
},
],
},
Object {
"test": "/\\\\.module\\\\.css$/",
"use": Array [
Object {
"loader": "NODE_MODULES/mini-css-extract-plugin/dist/loader.js",
"options": Object {
"publicPath": "../../",
},
},
Object {
"loader": "NODE_MODULES/css-loader/dist/cjs.js",
"options": Object {
"importLoaders": 1,
"modules": Object {
"getLocalIdent": [Function],
"mode": "local",
},
"sourceMap": true,
},
},
Object {
"loader": "NODE_MODULES/postcss-loader/dist/cjs.js",
"options": Object {
"postcssOptions": Object {
"config": false,
"ident": "postcss",
"plugins": Array [
"postcss-flexbugs-fixes",
Array [
"postcss-preset-env",
Object {
"autoprefixer": Object {
"flexbox": "no-2009",
},
"stage": 3,
},
],
"postcss-normalize",
],
},
"sourceMap": true,
},
},
],
},
Object {
"exclude": "/\\\\.module\\\\.(scss|sass)$/",
"sideEffects": true,
"test": "/\\\\.(scss|sass)$/",
"use": Array [
Object {
"loader": "NODE_MODULES/mini-css-extract-plugin/dist/loader.js",
"options": Object {
"publicPath": "../../",
},
},
Object {
"loader": "NODE_MODULES/css-loader/dist/cjs.js",
"options": Object {
"importLoaders": 3,
"modules": Object {
"mode": "icss",
},
"sourceMap": true,
},
},
Object {
"loader": "NODE_MODULES/postcss-loader/dist/cjs.js",
"options": Object {
"postcssOptions": Object {
"config": false,
"ident": "postcss",
"plugins": Array [
"postcss-flexbugs-fixes",
Array [
"postcss-preset-env",
Object {
"autoprefixer": Object {
"flexbox": "no-2009",
},
"stage": 3,
},
],
"postcss-normalize",
],
},
"sourceMap": true,
},
},
Object {
"loader": "NODE_MODULES/resolve-url-loader/index.js",
"options": Object {
"root": "CWD/src",
"sourceMap": true,
},
},
Object {
"loader": "NODE_MODULES/sass-loader/dist/cjs.js",
"options": Object {
"sourceMap": true,
},
},
],
},
Object {
"test": "/\\\\.module\\\\.(scss|sass)$/",
"use": Array [
Object {
"loader": "NODE_MODULES/mini-css-extract-plugin/dist/loader.js",
"options": Object {
"publicPath": "../../",
},
},
Object {
"loader": "NODE_MODULES/css-loader/dist/cjs.js",
"options": Object {
"importLoaders": 3,
"modules": Object {
"getLocalIdent": [Function],
"mode": "local",
},
"sourceMap": true,
},
},
Object {
"loader": "NODE_MODULES/postcss-loader/dist/cjs.js",
"options": Object {
"postcssOptions": Object {
"config": false,
"ident": "postcss",
"plugins": Array [
"postcss-flexbugs-fixes",
Array [
"postcss-preset-env",
Object {
"autoprefixer": Object {
"flexbox": "no-2009",
},
"stage": 3,
},
],
"postcss-normalize",
],
},
"sourceMap": true,
},
},
Object {
"loader": "NODE_MODULES/resolve-url-loader/index.js",
"options": Object {
"root": "CWD/src",
"sourceMap": true,
},
},
Object {
"loader": "NODE_MODULES/sass-loader/dist/cjs.js",
"options": Object {
"sourceMap": true,
},
},
],
},
Object {
"exclude": Array [
"/^$/",
"/\\\\.(js|mjs|jsx|ts|tsx)$/",
"/\\\\.html$/",
"/\\\\.json$/",
"/\\\\.(ejs|md|mdx|cjs)$/",
],
"type": "asset/resource",
},
],
},
Object {
"test": "/(stories|story)\\\\.mdx$/",
"use": Array [
Object {
"loader": "NODE_MODULES/babel-loader/lib/index.js",
"options": Object {
"babelrc": false,
"cacheDirectory": "NODE_MODULES/.cache/storybook/babel",
"configFile": false,
"overrides": Array [
Object {
"plugins": Array [
"NODE_MODULES/babel-plugin-named-exports-order/index.js",
],
"test": "/\\\\.(story|stories).*$/",
},
Object {
"plugins": Array [
Array [
"NODE_MODULES/babel-plugin-react-docgen/lib/index.js",
Object {
"DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES",
},
],
],
"test": "/\\\\.(cjs|mjs|jsx?)$/",
},
],
"plugins": Array [
Array [
"NODE_MODULES/@babel/plugin-transform-react-jsx/lib/index.js",
Object {
"pragma": "React.createElement",
"pragmaFrag": "React.Fragment",
},
],
],
"presets": Array [],
},
},
Object {
"loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js",
"options": Object {
"remarkPlugins": Array [
[Function],
[Function],
],
"skipCsf": false,
},
},
],
},
Object {
"exclude": "/(stories|story)\\\\.mdx$/",
"test": "/\\\\.mdx$/",
"use": Array [
Object {
"loader": "NODE_MODULES/babel-loader/lib/index.js",
"options": Object {
"babelrc": false,
"cacheDirectory": "NODE_MODULES/.cache/storybook/babel",
"configFile": false,
"overrides": Array [
Object {
"plugins": Array [
"NODE_MODULES/babel-plugin-named-exports-order/index.js",
],
"test": "/\\\\.(story|stories).*$/",
},
Object {
"plugins": Array [
Array [
"NODE_MODULES/babel-plugin-react-docgen/lib/index.js",
Object {
"DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES",
},
],
],
"test": "/\\\\.(cjs|mjs|jsx?)$/",
},
],
"plugins": Array [
Array [
"NODE_MODULES/@babel/plugin-transform-react-jsx/lib/index.js",
Object {
"pragma": "React.createElement",
"pragmaFrag": "React.Fragment",
},
],
],
"presets": Array [],
},
},
Object {
"loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js",
"options": Object {
"remarkPlugins": Array [
[Function],
[Function],
],
"skipCsf": true,
},
},
],
},
Object {
"enforce": "pre",
"loader": "CWD/lib/source-loader/dist/cjs/index.js",
"options": Object {
"injectStoryParameters": true,
"inspectLocalDependencies": true,
},
"test": "/\\\\.(stories|story)\\\\.[tj]sx?$/",
},
Object {
"test": "/\\\\.m?js$/",
"type": "javascript/auto",
},
Object {
"resolve": Object {
"fullySpecified": false,
},
"test": "/\\\\.m?js$/",
},
],
},
"plugins": Array [
"VirtualModulesPlugin",
"HtmlWebpackPlugin",
"DefinePlugin",
"ProvidePlugin",
"CaseSensitivePathsPlugin",
"ProgressPlugin",
"InlineChunkHtmlPlugin",
"InterpolateHtmlPlugin",
"ModuleNotFoundPlugin",
"MiniCssExtractPlugin",
"IgnorePlugin",
"ForkTsCheckerWebpackPlugin",
"ESLintWebpackPlugin",
"IgnorePlugin",
"DocgenPlugin",
],
}
`;

507
code/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-windows
View File

@ -1,507 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`cra-ts-essentials preview prod 1`] = `
Object {
"entry": Array [
"ROOT\\\\lib\\\\core-client\\\\dist\\\\esm\\\\globals\\\\polyfills.js",
"ROOT\\\\lib\\\\core-client\\\\dist\\\\esm\\\\globals\\\\globals.js",
"NODE_MODULES\\\\@storybook\\\\addon-ie11\\\\dist\\\\event-source-polyfill.js",
"ROOT\\\\storybook-init-framework-entry.js",
"ROOT\\\\addons\\\\docs\\\\dist\\\\esm\\\\frameworks\\\\common\\\\config.js-generated-config-entry.js",
"ROOT\\\\addons\\\\docs\\\\dist\\\\esm\\\\frameworks\\\\react\\\\config.js-generated-config-entry.js",
"ROOT\\\\app\\\\react\\\\dist\\\\esm\\\\client\\\\preview\\\\config-generated-config-entry.js",
"ROOT\\\\addons\\\\actions\\\\dist\\\\esm\\\\preset\\\\addDecorator.js-generated-config-entry.js",
"ROOT\\\\addons\\\\actions\\\\dist\\\\esm\\\\preset\\\\addArgs.js-generated-config-entry.js",
"ROOT\\\\addons\\\\backgrounds\\\\dist\\\\esm\\\\preset\\\\addDecorator.js-generated-config-entry.js",
"ROOT\\\\addons\\\\backgrounds\\\\dist\\\\esm\\\\preset\\\\addParameter.js-generated-config-entry.js",
"ROOT\\\\addons\\\\measure\\\\dist\\\\esm\\\\preset\\\\addDecorator.js-generated-config-entry.js",
"ROOT\\\\addons\\\\outline\\\\dist\\\\esm\\\\preset\\\\addDecorator.js-generated-config-entry.js",
"ROOT\\\\examples\\\\cra-ts-essentials\\\\.storybook\\\\preview.js-generated-config-entry.js",
"ROOT\\\\generated-stories-entry.js",
],
"keys": Array [
"name",
"mode",
"bail",
"devtool",
"entry",
"output",
"watchOptions",
"plugins",
"module",
"resolve",
"resolveLoader",
"optimization",
"performance",
],
"module": Object {
"rules": Array [
Object {
"test": "/\\\\.md$/",
"use": Array [
Object {
"loader": "NODE_MODULES\\\\raw-loader\\\\dist\\\\cjs.js",
},
],
},
Object {
"parser": Object {
"requireEnsure": false,
},
},
Object {
"oneOf": Array [
Object {
"loader": "NODE_MODULES\\\\url-loader\\\\dist\\\\cjs.js",
"options": Object {
"limit": 10000,
"mimetype": "image/avif",
"name": "static/media/[name].[hash:8].[ext]",
},
"test": Array [
"/\\\\.avif$/",
],
},
Object {
"loader": "NODE_MODULES\\\\url-loader\\\\dist\\\\cjs.js",
"options": Object {
"limit": 10000,
"name": "static/media/[name].[hash:8].[ext]",
},
"test": Array [
"/\\\\.bmp$/",
"/\\\\.gif$/",
"/\\\\.jpe?g$/",
"/\\\\.png$/",
],
},
Object {
"include": Array [
"ROOT\\\\src",
"ROOT\\\\examples\\\\cra-ts-essentials\\\\.storybook",
],
"loader": "NODE_MODULES\\\\babel-loader\\\\lib\\\\index.js",
"options": Object {
"babelrc": false,
"cacheCompression": false,
"cacheDirectory": true,
"cacheIdentifier": "production:babel-plugin-named-asset-import@0.3.7:babel-preset-react-app@10.0.0:react-dev-utils@11.0.3:react-scripts@4.0.3",
"compact": true,
"configFile": false,
"customize": "NODE_MODULES\\\\babel-preset-react-app\\\\webpack-overrides.js",
"extends": undefined,
"overrides": Array [
Object {
"plugins": Array [
Array [
"NODE_MODULES\\\\babel-plugin-react-docgen\\\\lib\\\\index.js",
Object {
"DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES",
},
],
],
"test": "/\\\\.(mjs|jsx?)$/",
},
],
"plugins": Array [
Array [
"NODE_MODULES\\\\babel-plugin-named-asset-import\\\\index.js",
Object {
"loaderMap": Object {
"svg": Object {
"ReactComponent": "@svgr/webpack?-svgo,+titleProp,+ref![path]",
},
},
},
],
],
"presets": Array [
Array [
"@babel/preset-env",
Object {
"targets": Object {
"ie": "11",
},
},
"storybook-addon-ie11",
],
Array [
"NODE_MODULES\\\\babel-preset-react-app\\\\index.js",
Object {
"runtime": "automatic",
},
],
],
},
"test": "/\\\\.(js|mjs|jsx|ts|tsx)$/",
},
Object {
"exclude": "/@babel(?:\\\\/|\\\\\\\\{1,2})runtime/",
"include": Array [
"ROOT\\\\examples\\\\cra-ts-essentials\\\\.storybook",
],
"loader": "NODE_MODULES\\\\babel-loader\\\\lib\\\\index.js",
"options": Object {
"babelrc": false,
"cacheCompression": false,
"cacheDirectory": true,
"cacheIdentifier": "production:babel-plugin-named-asset-import@0.3.7:babel-preset-react-app@10.0.0:react-dev-utils@11.0.3:react-scripts@4.0.3",
"compact": false,
"configFile": false,
"inputSourceMap": true,
"presets": Array [
Array [
"NODE_MODULES\\\\babel-preset-react-app\\\\dependencies.js",
Object {
"helpers": true,
},
],
],
"sourceMaps": true,
},
"test": "/\\\\.(js|mjs)$/",
},
Object {
"exclude": Array [
"/\\\\.module\\\\.css$/",
"/@storybook/",
],
"include": undefined,
"sideEffects": true,
"test": "/\\\\.css$/",
"use": Array [
Object {
"loader": "NODE_MODULES\\\\mini-css-extract-plugin\\\\dist\\\\loader.js",
"options": Object {
"publicPath": "../../",
},
},
Object {
"loader": "NODE_MODULES\\\\css-loader\\\\dist\\\\cjs.js",
"options": Object {
"importLoaders": 1,
"sourceMap": true,
},
},
Object {
"loader": "NODE_MODULES\\\\postcss-loader\\\\src\\\\index.js",
"options": Object {
"ident": "postcss",
"plugins": [Function],
"sourceMap": true,
},
},
],
},
Object {
"test": "/\\\\.module\\\\.css$/",
"use": Array [
Object {
"loader": "NODE_MODULES\\\\mini-css-extract-plugin\\\\dist\\\\loader.js",
"options": Object {
"publicPath": "../../",
},
},
Object {
"loader": "NODE_MODULES\\\\css-loader\\\\dist\\\\cjs.js",
"options": Object {
"importLoaders": 1,
"modules": Object {
"getLocalIdent": [Function],
},
"sourceMap": true,
},
},
Object {
"loader": "NODE_MODULES\\\\postcss-loader\\\\src\\\\index.js",
"options": Object {
"ident": "postcss",
"plugins": [Function],
"sourceMap": true,
},
},
],
},
Object {
"exclude": "/\\\\.module\\\\.(scss|sass)$/",
"sideEffects": true,
"test": "/\\\\.(scss|sass)$/",
"use": Array [
Object {
"loader": "NODE_MODULES\\\\mini-css-extract-plugin\\\\dist\\\\loader.js",
"options": Object {
"publicPath": "../../",
},
},
Object {
"loader": "NODE_MODULES\\\\css-loader\\\\dist\\\\cjs.js",
"options": Object {
"importLoaders": 3,
"sourceMap": true,
},
},
Object {
"loader": "NODE_MODULES\\\\postcss-loader\\\\src\\\\index.js",
"options": Object {
"ident": "postcss",
"plugins": [Function],
"sourceMap": true,
},
},
Object {
"loader": "NODE_MODULES\\\\resolve-url-loader\\\\index.js",
"options": Object {
"root": "ROOT\\\\src",
"sourceMap": true,
},
},
Object {
"loader": "NODE_MODULES\\\\sass-loader\\\\dist\\\\cjs.js",
"options": Object {
"sourceMap": true,
},
},
],
},
Object {
"test": "/\\\\.module\\\\.(scss|sass)$/",
"use": Array [
Object {
"loader": "NODE_MODULES\\\\mini-css-extract-plugin\\\\dist\\\\loader.js",
"options": Object {
"publicPath": "../../",
},
},
Object {
"loader": "NODE_MODULES\\\\css-loader\\\\dist\\\\cjs.js",
"options": Object {
"importLoaders": 3,
"modules": Object {
"getLocalIdent": [Function],
},
"sourceMap": true,
},
},
Object {
"loader": "NODE_MODULES\\\\postcss-loader\\\\src\\\\index.js",
"options": Object {
"ident": "postcss",
"plugins": [Function],
"sourceMap": true,
},
},
Object {
"loader": "NODE_MODULES\\\\resolve-url-loader\\\\index.js",
"options": Object {
"root": "ROOT\\\\src",
"sourceMap": true,
},
},
Object {
"loader": "NODE_MODULES\\\\sass-loader\\\\dist\\\\cjs.js",
"options": Object {
"sourceMap": true,
},
},
],
},
Object {
"exclude": Array [
"/\\\\.(js|mjs|jsx|ts|tsx)$/",
"/\\\\.html$/",
"/\\\\.json$/",
"/\\\\.(ejs|md|mdx)$/",
],
"loader": "NODE_MODULES\\\\file-loader\\\\dist\\\\cjs.js",
"options": Object {
"name": "static/media/[name].[hash:8].[ext]",
},
},
],
},
Object {
"include": "NODE_MODULES[\\\\\\\\/](@storybook[\\\\\\\\/]node_logger|@testing-library[\\\\\\\\/]dom|@testing-library[\\\\\\\\/]user-event|acorn-jsx|ansi-align|ansi-colors|ansi-escapes|ansi-regex|ansi-styles|better-opn|boxen|camelcase|chalk|color-convert|commander|find-cache-dir|find-up|fs-extra|highlight.js|json5|node-fetch|pkg-dir|prettier|pretty-format|react-dev-utils|resolve-from|semver|slash|strip-ansi|uuid)/",
"test": "/\\\\.js$/",
"use": Array [
Object {
"loader": "NODE_MODULES\\\\babel-loader\\\\lib\\\\index.js",
"options": Object {
"presets": Array [
Array [
"@babel/preset-env",
Object {
"targets": Object {
"ie": "11",
},
},
"storybook-addon-ie11",
],
],
"sourceType": "unambiguous",
},
},
],
},
Object {
"include": "NODE_MODULES\\\\\\\\acorn-jsx/",
"test": "/\\\\.js$/",
"use": Array [
Object {
"loader": "NODE_MODULES\\\\babel-loader\\\\lib\\\\index.js",
"options": Object {
"presets": Array [
Array [
"NODE_MODULES\\\\@babel\\\\preset-env\\\\lib\\\\index.js",
Object {
"modules": "commonjs",
},
],
],
},
},
],
},
Object {
"test": "/(stories|story)\\\\.mdx$/",
"use": Array [
Object {
"loader": "NODE_MODULES\\\\babel-loader\\\\lib\\\\index.js",
"options": Object {
"babelrc": false,
"cacheDirectory": "NODE_MODULES\\\\.cache\\\\storybook\\\\babel",
"configFile": false,
"overrides": Array [
Object {
"plugins": Array [
Array [
"NODE_MODULES\\\\babel-plugin-react-docgen\\\\lib\\\\index.js",
Object {
"DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES",
},
],
],
"test": "/\\\\.(mjs|jsx?)$/",
},
],
"plugins": Array [
Array [
"NODE_MODULES\\\\@babel\\\\plugin-transform-react-jsx\\\\lib\\\\index.js",
Object {
"pragma": "React.createElement",
"pragmaFrag": "React.Fragment",
},
],
],
"presets": Array [
Array [
"@babel/preset-env",
Object {
"targets": Object {
"ie": "11",
},
},
"storybook-addon-ie11",
],
],
},
},
Object {
"loader": "NODE_MODULES\\\\@mdx-js\\\\loader\\\\index.js",
"options": Object {
"compilers": Array [
[Function],
],
"remarkPlugins": Array [
[Function],
[Function],
],
},
},
],
},
Object {
"exclude": "/(stories|story)\\\\.mdx$/",
"test": "/\\\\.mdx$/",
"use": Array [
Object {
"loader": "NODE_MODULES\\\\babel-loader\\\\lib\\\\index.js",
"options": Object {
"babelrc": false,
"cacheDirectory": "NODE_MODULES\\\\.cache\\\\storybook\\\\babel",
"configFile": false,
"overrides": Array [
Object {
"plugins": Array [
Array [
"NODE_MODULES\\\\babel-plugin-react-docgen\\\\lib\\\\index.js",
Object {
"DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES",
},
],
],
"test": "/\\\\.(mjs|jsx?)$/",
},
],
"plugins": Array [
Array [
"NODE_MODULES\\\\@babel\\\\plugin-transform-react-jsx\\\\lib\\\\index.js",
Object {
"pragma": "React.createElement",
"pragmaFrag": "React.Fragment",
},
],
],
"presets": Array [
Array [
"@babel/preset-env",
Object {
"targets": Object {
"ie": "11",
},
},
"storybook-addon-ie11",
],
],
},
},
Object {
"loader": "NODE_MODULES\\\\@mdx-js\\\\loader\\\\index.js",
"options": Object {
"remarkPlugins": Array [
[Function],
[Function],
],
},
},
],
},
Object {
"enforce": "pre",
"loader": "ROOT\\\\lib\\\\source-loader\\\\dist\\\\cjs\\\\index.js",
"options": Object {
"injectStoryParameters": true,
"inspectLocalDependencies": true,
},
"test": "/\\\\.(stories|story)\\\\.[tj]sx?$/",
},
],
},
"plugins": Array [
"FilterWarningsPlugin",
"VirtualModulesPlugin",
"HtmlWebpackPlugin",
"DefinePlugin",
"CaseSensitivePathsPlugin",
"ProgressPlugin",
"InlineChunkHtmlPlugin",
"InterpolateHtmlPlugin",
"ModuleNotFoundPlugin",
"MiniCssExtractPlugin",
"ManifestPlugin",
"IgnorePlugin",
"ForkTsCheckerWebpackPlugin",
"ESLintWebpackPlugin",
"DocgenPlugin",
],
}
`;

1
code/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix
View File

@ -3,7 +3,6 @@
exports[`html-kitchen-sink preview dev 1`] = `
Object {
"entry": Array [
"CWD/lib/core-client/dist/esm/globals/globals.js",
"NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined",
"CWD/storybook-config-entry.js",
],

1
code/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix
View File

@ -3,7 +3,6 @@
exports[`html-kitchen-sink preview prod 1`] = `
Object {
"entry": Array [
"CWD/lib/core-client/dist/esm/globals/globals.js",
"CWD/storybook-config-entry.js",
],
"keys": Array [

1
code/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix
View File

@ -3,7 +3,6 @@
exports[`vue-3-cli preview dev 1`] = `
Object {
"entry": Array [
"CWD/lib/core-client/dist/esm/globals/globals.js",
"NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined",
"CWD/storybook-config-entry.js",
],

1
code/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix
View File

@ -3,7 +3,6 @@
exports[`vue-3-cli preview prod 1`] = `
Object {
"entry": Array [
"CWD/lib/core-client/dist/esm/globals/globals.js",
"CWD/storybook-config-entry.js",
],
"keys": Array [

1
code/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix
View File

@ -3,7 +3,6 @@
exports[`web-components-kitchen-sink preview dev 1`] = `
Object {
"entry": Array [
"CWD/lib/core-client/dist/esm/globals/globals.js",
"NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined",
"CWD/storybook-config-entry.js",
],

1
code/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix
View File

@ -3,7 +3,6 @@
exports[`web-components-kitchen-sink preview prod 1`] = `
Object {
"entry": Array [
"CWD/lib/core-client/dist/esm/globals/globals.js",
"CWD/storybook-config-entry.js",
],
"keys": Array [

18
code/lib/core-server/src/core-presets.test.ts
View File

@ -127,7 +127,7 @@ const baseOptions = {
managerOnly, // production
docsMode: false,
cache,
configDir: path.resolve(`${__dirname}/../../../examples/cra-ts-essentials/.storybook`),
configDir: path.resolve(`${__dirname}/../../../examples/official-storybook/`),
ci: true,
managerCache: false,
};
@ -176,12 +176,9 @@ const prepareSnap = (get: any, name): Pick<Configuration, 'module' | 'entry' | '
const snap = (name: string) => `__snapshots__/${name}`;
describe.each([
['cra-ts-essentials'],
['vue-3-cli'],
['web-components-kitchen-sink'],
['html-kitchen-sink'],
])('%s', (example) => {
describe.each([['vue-3-cli'], ['web-components-kitchen-sink'], ['html-kitchen-sink']])(
'%s',
(example) => {
describe.each([
['manager', managerExecutor],
['preview', previewExecutor],
@ -200,7 +197,9 @@ describe.each([
configDir: path.resolve(`${__dirname}/../../../examples/${example}/.storybook`),
// Only add an outputDir in production mode.
outputDir:
mode === 'prod' ? await mkdtemp(path.join(os.tmpdir(), 'storybook-static-')) : undefined,
mode === 'prod'
? await mkdtemp(path.join(os.tmpdir(), 'storybook-static-'))
: undefined,
ignorePreview: component === 'manager',
managerCache: component === 'preview',
packageJson,
@ -212,7 +211,8 @@ describe.each([
);
});
});
});
}
);
const progressPlugin = (config) =>
config.plugins.find((p) => p.constructor.name === 'ProgressPlugin');

17
code/lib/core-server/src/presets/common-preset.ts
View File

@ -1,4 +1,5 @@
import fs from 'fs-extra';
import deprecate from 'util-deprecate';
import {
CLIOptions,
getPreviewBodyTemplate,
@ -15,6 +16,9 @@ import type {
} from '@storybook/core-common';
import { loadCsf } from '@storybook/csf-tools';
const warnConfigField = deprecate(() => {},
`You (or an addon) are using the 'config' preset field. This has been replaced by 'previewAnnotations' and will be removed in 8.0`);
export const babel = async (_: unknown, options: Options) => {
const { presets } = options;
@ -42,11 +46,6 @@ export const previewBody = async (base: any, { configDir, presets }: Options) =>
export const previewMainTemplate = () => getPreviewMainTemplate();
export const previewEntries = (entries: any[] = []) => {
entries.push(require.resolve('@storybook/core-client/dist/esm/globals/globals'));
return entries;
};
export const typescript = () => ({
check: false,
// 'react-docgen' faster but produces lower quality typescript results
@ -89,8 +88,12 @@ export const core = async (existing: CoreConfig, options: Options): Promise<Core
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 previewAnnotations = async (base: any, options: Options) => {
const config = await options.presets.apply('config', [], options);
if (config.length > 0) warnConfigField();
return [...config, require.resolve('@storybook/core-client/dist/esm/globals/globals'), ...base];
};
export const features = async (

2
code/lib/store/src/csf/testing-utils/index.test.ts
View File

@ -1,6 +1,6 @@
import { composeStory, composeStories } from './index';
// Most integration tests for this functionality are located under examples/cra-ts-essentials
// Most integration tests for this functionality are located under renderers/react
describe('composeStory', () => {
const meta = {
title: 'Button',

0
code/examples/cra-ts-essentials/src/stories/testing-react/components/Button.stories.tsx → code/renderers/react/src/__test__/Button.stories.tsx
View File

5
code/examples/cra-ts-essentials/src/stories/testing-react/components/Button.test.tsx → code/renderers/react/src/__test__/Button.test.tsx
View File

@ -1,10 +1,13 @@
/// <reference types="@types/jest" />;
import React from 'react';
import { render, screen } from '@testing-library/react';
import { composeStories, composeStory } from '@storybook/react';
import { setProjectAnnotations, composeStories, composeStory } from '@storybook/react';
import * as stories from './Button.stories';
setProjectAnnotations([]);
// example with composeStories, returns an object with all stories composed with args/decorators
const { CSF3Primary } = composeStories(stories);

0
code/examples/cra-ts-essentials/src/stories/testing-react/components/Button.tsx → code/renderers/react/src/__test__/Button.tsx
View File

3
code/renderers/react/src/__test__/README.md Normal file
View File

@ -0,0 +1,3 @@
## Integration tests for @storybook/react.
As these tests are implemented as stories, we may consider moving them inside the `template/stories` folder.

32
code/examples/cra-ts-essentials/src/stories/testing-react/components/__snapshots__/internals.test.tsx.snap → code/renderers/react/src/__test__/__snapshots__/internals.test.tsx.snap
View File

@ -3,10 +3,6 @@
exports[`Renders CSF2Secondary story 1`] = `
<body>
<div>
<div>
Locale:
en
</div>
<button
class="storybook-button storybook-button--medium storybook-button--secondary"
label="Button"
@ -21,10 +17,6 @@ exports[`Renders CSF2Secondary story 1`] = `
exports[`Renders CSF2StoryWithLocale story 1`] = `
<body>
<div>
<div>
Locale:
en
</div>
<button
class="storybook-button storybook-button--medium storybook-button--secondary"
type="button"
@ -38,10 +30,6 @@ exports[`Renders CSF2StoryWithLocale story 1`] = `
exports[`Renders CSF2StoryWithParamsAndDecorator story 1`] = `
<body>
<div>
<div>
Locale:
en
</div>
<button
class="storybook-button storybook-button--medium storybook-button--secondary"
label="Button"
@ -56,10 +44,6 @@ exports[`Renders CSF2StoryWithParamsAndDecorator story 1`] = `
exports[`Renders CSF3Button story 1`] = `
<body>
<div>
<div>
Locale:
en
</div>
<button
class="storybook-button storybook-button--medium storybook-button--secondary"
label="Button"
@ -74,10 +58,6 @@ exports[`Renders CSF3Button story 1`] = `
exports[`Renders CSF3ButtonWithRender story 1`] = `
<body>
<div>
<div>
Locale:
en
</div>
<div>
<p
data-testid="custom-render"
@ -99,11 +79,9 @@ exports[`Renders CSF3ButtonWithRender story 1`] = `
exports[`Renders CSF3InputFieldFilled story 1`] = `
<body>
<div>
<div>
Locale:
en
</div>
<input />
<input
data-testid="input"
/>
</div>
</body>
`;
@ -111,10 +89,6 @@ exports[`Renders CSF3InputFieldFilled story 1`] = `
exports[`Renders CSF3Primary story 1`] = `
<body>
<div>
<div>
Locale:
en
</div>
<button
class="storybook-button storybook-button--large storybook-button--primary"
label="Button"

0
code/examples/cra-ts-essentials/src/stories/button.css → code/renderers/react/src/__test__/button.css
View File

4
code/examples/cra-ts-essentials/src/stories/testing-react/components/internals.test.tsx → code/renderers/react/src/__test__/internals.test.tsx
View File

@ -1,3 +1,4 @@
/// <reference types="@types/jest" />;
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import React from 'react';
import { addons } from '@storybook/addons';
@ -7,8 +8,6 @@ import { composeStories, composeStory } from '@storybook/react';
import * as stories from './Button.stories';
import * as globalConfig from '../../../../.storybook/preview';
const { CSF2StoryWithParamsAndDecorator } = composeStories(stories);
test('returns composed args including default values from argtypes', () => {
@ -22,7 +21,6 @@ test('returns composed parameters from story', () => {
expect(CSF2StoryWithParamsAndDecorator.parameters).toEqual(
expect.objectContaining({
...stories.CSF2StoryWithParamsAndDecorator.parameters,
...globalConfig.parameters,
})
);
});

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