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

Merge branch 'next' into shilman/add-web-components-vite-framework-and-template

Browse Source
This commit is contained in:
Michael Shilman 2022-09-18 18:58:58 +08:00
commit 62b77cc7d4
322 changed files with 3272 additions and 11179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
.circleci/config.yml
View File

@ -151,7 +151,7 @@ jobs:
executor:
class: medium+
name: sb_node_14_browsers
parallelism: 15
parallelism: 14
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
@ -477,7 +477,7 @@ jobs:
executor:
class: medium+
name: sb_node_14_browsers
parallelism: 9
parallelism: 10
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
@ -497,7 +497,7 @@ jobs:
executor:
class: medium+
name: sb_node_14_browsers
parallelism: 9
parallelism: 10
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
@ -513,7 +513,7 @@ jobs:
executor:
class: medium+
name: sb_node_14_browsers
parallelism: 9
parallelism: 10
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
@ -533,7 +533,7 @@ jobs:
executor:
class: medium+
name: sb_node_14_browsers
parallelism: 9
parallelism: 10
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
@ -549,7 +549,7 @@ jobs:
executor:
class: medium+
name: sb_node_14_browsers
parallelism: 9
parallelism: 10
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
@ -565,7 +565,7 @@ jobs:
executor:
class: medium+
name: sb_playwright
parallelism: 9
parallelism: 10
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'

38
CHANGELOG.md
View File

@ -1,3 +1,41 @@
## 7.0.0-alpha.33 (September 13, 2022)
#### Features
- Core: Add a new `throwPlayFunctionExceptions` parameter [#19143](https://github.com/storybooks/storybook/pull/19143)
#### Bug Fixes
- Fix issue in instrumenter with `waitFor` [#19145](https://github.com/storybooks/storybook/pull/19145)
- Core: Fix static dirs targeting same destination [#19064](https://github.com/storybooks/storybook/pull/19064)
- React: Fix issue with react 18 implementation [#19125](https://github.com/storybooks/storybook/pull/19125)
- CLI: Fix spawning child processes on windows [#19019](https://github.com/storybooks/storybook/pull/19019)
- Vite: Ensure we set `DOCS_OPTIONS` in the vite builder [#19127](https://github.com/storybooks/storybook/pull/19127)
#### Maintenance
- Build: Bundle @storybook/cli with tsup [#19138](https://github.com/storybooks/storybook/pull/19138)
- Examples: Remove `cra-ts-essentials` [#19170](https://github.com/storybooks/storybook/pull/19170)
- Added some basic interactions stories [#19153](https://github.com/storybooks/storybook/pull/19153)
- Presets: Replace `config` with `previewAnnotations`, remove `previewEntries` [#19152](https://github.com/storybooks/storybook/pull/19152)
- Addon-links: Move stories into addon [#19124](https://github.com/storybooks/storybook/pull/19124)
- Addon-a11y: Move stories into addon [#19114](https://github.com/storybooks/storybook/pull/19114)
- Toolbars: Generic example stories [#19166](https://github.com/storybooks/storybook/pull/19166)
- TypeScript: Revert a few @ts-expect-errors [#19168](https://github.com/storybooks/storybook/pull/19168)
- Addon-docs: Generic stories for DocsPage [#19162](https://github.com/storybooks/storybook/pull/19162)
- Controls: Generic stories for sorting [#19161](https://github.com/storybooks/storybook/pull/19161)
- Build: Generic stories for addon-controls [#19149](https://github.com/storybooks/storybook/pull/19149)
- remove node12 from the matrix [#19147](https://github.com/storybooks/storybook/pull/19147)
- Build libs/router with ts-up [#19140](https://github.com/storybooks/storybook/pull/19140)
- Build: Bundle addon-interactions with tsup [#19139](https://github.com/storybooks/storybook/pull/19139)
- Generic stories for remaining core features [#19118](https://github.com/storybooks/storybook/pull/19118)
- Add parameter, loader and decorator stories to `lib/store` [#19105](https://github.com/storybooks/storybook/pull/19105)
- Convert @ts-ignore to @ts-expect-error [#19122](https://github.com/storybooks/storybook/pull/19122)
#### Dependency Upgrades
- Upgrade emotion deps again [#19054](https://github.com/storybooks/storybook/pull/19054)
## 7.0.0-alpha.31 (September 7, 2022)
#### Maintenance

4
CONTRIBUTING.old.md
View File

@ -147,7 +147,7 @@ Then run `yarn cypress open` if you want to see the tests run in the UI, or `yar
The best way to help figure out an issue you are having is to produce a minimal reproduction against the `main` branch.
A good way to do that is using the example `cra-kitchen-sink` app embedded in this repository:
A good way to do that is using the example `official-storybook` app embedded in this repository:
```sh
# Download and build this repository:
@ -157,7 +157,7 @@ yarn
yarn bootstrap --core
# make changes to try and reproduce the problem, such as adding components + stories
cd examples/cra-kitchen-sink
cd examples/official-storybook
yarn storybook
# see if you can see the problem, if so, commit it:

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

1
code/.gitignore vendored
View File

@ -21,7 +21,6 @@ package-lock.json
storybook-static
integration/__image_snapshots__/__diff_output__
.jest-test-results.json
/examples/cra-kitchen-sink/src/__image_snapshots__/__diff_output__/
lib/*.jar
lib/**/dll
/false

22
code/addons/a11y/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-a11y",
"version": "7.0.0-alpha.31",
"version": "7.0.0-alpha.33",
"description": "Test component compliance with web accessibility standards",
"keywords": [
"a11y",
@ -58,19 +58,19 @@
"*.d.ts"
],
"scripts": {
"check": "tsc --noEmit",
"check": "../../../scripts/node_modules/.bin/tsc --noEmit",
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/addon-highlight": "7.0.0-alpha.31",
"@storybook/addons": "7.0.0-alpha.31",
"@storybook/api": "7.0.0-alpha.31",
"@storybook/channels": "7.0.0-alpha.31",
"@storybook/client-logger": "7.0.0-alpha.31",
"@storybook/components": "7.0.0-alpha.31",
"@storybook/core-events": "7.0.0-alpha.31",
"@storybook/addon-highlight": "7.0.0-alpha.33",
"@storybook/addons": "7.0.0-alpha.33",
"@storybook/api": "7.0.0-alpha.33",
"@storybook/channels": "7.0.0-alpha.33",
"@storybook/client-logger": "7.0.0-alpha.33",
"@storybook/components": "7.0.0-alpha.33",
"@storybook/core-events": "7.0.0-alpha.33",
"@storybook/csf": "0.0.2--canary.0899bb7.0",
"@storybook/theming": "7.0.0-alpha.31",
"@storybook/theming": "7.0.0-alpha.33",
"axe-core": "^4.2.0",
"global": "^4.4.0",
"lodash": "^4.17.21",
@ -104,7 +104,7 @@
"./src/preview.tsx"
]
},
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
"gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
"storybook": {
"displayName": "Accessibility",
"icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",

4
code/addons/a11y/template/stories/parameters.stories.ts
View File

@ -3,7 +3,7 @@ import globalThis from 'global';
export default {
component: globalThis.Components.Html,
args: {
contents: '<button>Click Me!</button>',
content: '<button>Click Me!</button>',
},
parameters: {
chromatic: { disable: true },
@ -12,7 +12,7 @@ export default {
export const Options = {
args: {
contents:
content:
'<button style="color: rgb(255, 255, 255); background-color: rgb(76, 175, 80);">Click me!</button>',
},
parameters: {

6
code/addons/a11y/template/stories/tests.stories.ts
View File

@ -3,7 +3,7 @@ import globalThis from 'global';
export default {
component: globalThis.Components.Html,
args: {
contents: '',
content: '',
},
parameters: {
chromatic: { disable: true },
@ -12,7 +12,7 @@ export default {
export const Violations = {
args: {
contents: `
content: `
<div>
<p>empty heading</p>
<h1></h1>
@ -39,7 +39,7 @@ export const Violations = {
export const Passes = {
args: {
contents: `
content: `
<div>
<p>heading</p>
<h1>heading 1</h1>

18
code/addons/actions/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-actions",
"version": "7.0.0-alpha.31",
"version": "7.0.0-alpha.33",
"description": "Get UI feedback when an action is performed on an interactive element",
"keywords": [
"storybook",
@ -31,17 +31,17 @@
"*.d.ts"
],
"scripts": {
"check": "tsc --noEmit",
"check": "../../../scripts/node_modules/.bin/tsc --noEmit",
"prep": "node ../../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "7.0.0-alpha.31",
"@storybook/api": "7.0.0-alpha.31",
"@storybook/client-logger": "7.0.0-alpha.31",
"@storybook/components": "7.0.0-alpha.31",
"@storybook/core-events": "7.0.0-alpha.31",
"@storybook/addons": "7.0.0-alpha.33",
"@storybook/api": "7.0.0-alpha.33",
"@storybook/client-logger": "7.0.0-alpha.33",
"@storybook/components": "7.0.0-alpha.33",
"@storybook/core-events": "7.0.0-alpha.33",
"@storybook/csf": "0.0.2--canary.0899bb7.0",
"@storybook/theming": "7.0.0-alpha.31",
"@storybook/theming": "7.0.0-alpha.33",
"dequal": "^2.0.2",
"global": "^4.4.0",
"lodash": "^4.17.21",
@ -72,7 +72,7 @@
"publishConfig": {
"access": "public"
},
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
"gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
"storybook": {
"displayName": "Actions",
"unsupportedFrameworks": [

1
code/addons/actions/src/preview/action.ts
View File

@ -64,6 +64,7 @@ export function action(name: string, options: ActionOptions = {}): HandlerFuncti
};
channel.emit(EVENT_ID, actionDisplayToEmit);
};
handler.isAction = true;
return handler;
}

18
code/addons/backgrounds/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-backgrounds",
"version": "7.0.0-alpha.31",
"version": "7.0.0-alpha.33",
"description": "Switch backgrounds to view components in different settings",
"keywords": [
"addon",
@ -58,17 +58,17 @@
"*.d.ts"
],
"scripts": {
"check": "tsc --noEmit",
"check": "../../../scripts/node_modules/.bin/tsc --noEmit",
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/addons": "7.0.0-alpha.31",
"@storybook/api": "7.0.0-alpha.31",
"@storybook/client-logger": "7.0.0-alpha.31",
"@storybook/components": "7.0.0-alpha.31",
"@storybook/core-events": "7.0.0-alpha.31",
"@storybook/addons": "7.0.0-alpha.33",
"@storybook/api": "7.0.0-alpha.33",
"@storybook/client-logger": "7.0.0-alpha.33",
"@storybook/components": "7.0.0-alpha.33",
"@storybook/core-events": "7.0.0-alpha.33",
"@storybook/csf": "0.0.2--canary.0899bb7.0",
"@storybook/theming": "7.0.0-alpha.31",
"@storybook/theming": "7.0.0-alpha.33",
"global": "^4.4.0",
"memoizerific": "^1.11.3",
"ts-dedent": "^2.0.0",
@ -99,7 +99,7 @@
"./src/preview.tsx"
]
},
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
"gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
"storybook": {
"displayName": "Backgrounds",
"icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",

24
code/addons/controls/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-controls",
"version": "7.0.0-alpha.31",
"version": "7.0.0-alpha.33",
"description": "Interact with component inputs dynamically in the Storybook UI",
"keywords": [
"addon",
@ -53,20 +53,20 @@
"*.d.ts"
],
"scripts": {
"check": "tsc --noEmit",
"check": "../../../scripts/node_modules/.bin/tsc --noEmit",
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/addons": "7.0.0-alpha.31",
"@storybook/api": "7.0.0-alpha.31",
"@storybook/blocks": "7.0.0-alpha.31",
"@storybook/client-logger": "7.0.0-alpha.31",
"@storybook/components": "7.0.0-alpha.31",
"@storybook/core-common": "7.0.0-alpha.31",
"@storybook/addons": "7.0.0-alpha.33",
"@storybook/api": "7.0.0-alpha.33",
"@storybook/blocks": "7.0.0-alpha.33",
"@storybook/client-logger": "7.0.0-alpha.33",
"@storybook/components": "7.0.0-alpha.33",
"@storybook/core-common": "7.0.0-alpha.33",
"@storybook/csf": "0.0.2--canary.0899bb7.0",
"@storybook/node-logger": "7.0.0-alpha.31",
"@storybook/store": "7.0.0-alpha.31",
"@storybook/theming": "7.0.0-alpha.31",
"@storybook/node-logger": "7.0.0-alpha.33",
"@storybook/store": "7.0.0-alpha.33",
"@storybook/theming": "7.0.0-alpha.33",
"lodash": "^4.17.21",
"ts-dedent": "^2.0.0"
},
@ -92,7 +92,7 @@
],
"platform": "browser"
},
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
"gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
"storybook": {
"displayName": "Controls",
"icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",

34
code/addons/docs/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-docs",
"version": "7.0.0-alpha.31",
"version": "7.0.0-alpha.33",
"description": "Document component usage and properties in Markdown",
"keywords": [
"addon",
@ -45,7 +45,7 @@
"!__testfixtures__"
],
"scripts": {
"check": "tsc --noEmit",
"check": "../../../scripts/node_modules/.bin/tsc --noEmit",
"prep": "node ../../../scripts/prepare.js"
},
"dependencies": {
@ -53,22 +53,22 @@
"@babel/preset-env": "^7.12.11",
"@jest/transform": "^26.6.2",
"@mdx-js/react": "^1.6.22",
"@storybook/addons": "7.0.0-alpha.31",
"@storybook/api": "7.0.0-alpha.31",
"@storybook/blocks": "7.0.0-alpha.31",
"@storybook/components": "7.0.0-alpha.31",
"@storybook/core-common": "7.0.0-alpha.31",
"@storybook/core-events": "7.0.0-alpha.31",
"@storybook/addons": "7.0.0-alpha.33",
"@storybook/api": "7.0.0-alpha.33",
"@storybook/blocks": "7.0.0-alpha.33",
"@storybook/components": "7.0.0-alpha.33",
"@storybook/core-common": "7.0.0-alpha.33",
"@storybook/core-events": "7.0.0-alpha.33",
"@storybook/csf": "0.0.2--canary.0899bb7.0",
"@storybook/csf-tools": "7.0.0-alpha.31",
"@storybook/docs-tools": "7.0.0-alpha.31",
"@storybook/csf-tools": "7.0.0-alpha.33",
"@storybook/docs-tools": "7.0.0-alpha.33",
"@storybook/mdx1-csf": "0.0.5-canary.13.9ce928a.0",
"@storybook/node-logger": "7.0.0-alpha.31",
"@storybook/postinstall": "7.0.0-alpha.31",
"@storybook/preview-web": "7.0.0-alpha.31",
"@storybook/source-loader": "7.0.0-alpha.31",
"@storybook/store": "7.0.0-alpha.31",
"@storybook/theming": "7.0.0-alpha.31",
"@storybook/node-logger": "7.0.0-alpha.33",
"@storybook/postinstall": "7.0.0-alpha.33",
"@storybook/preview-web": "7.0.0-alpha.33",
"@storybook/source-loader": "7.0.0-alpha.33",
"@storybook/store": "7.0.0-alpha.33",
"@storybook/theming": "7.0.0-alpha.33",
"babel-loader": "^8.2.5",
"dequal": "^2.0.2",
"global": "^4.4.0",
@ -103,7 +103,7 @@
"publishConfig": {
"access": "public"
},
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
"gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
"storybook": {
"displayName": "Docs",
"icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",

34
code/addons/essentials/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-essentials",
"version": "7.0.0-alpha.31",
"version": "7.0.0-alpha.33",
"description": "Curated addons to bring out the best of Storybook",
"keywords": [
"addon",
@ -29,28 +29,28 @@
"README.md"
],
"scripts": {
"check": "tsc --noEmit",
"check": "../../../scripts/node_modules/.bin/tsc --noEmit",
"prep": "node ../../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addon-actions": "7.0.0-alpha.31",
"@storybook/addon-backgrounds": "7.0.0-alpha.31",
"@storybook/addon-controls": "7.0.0-alpha.31",
"@storybook/addon-docs": "7.0.0-alpha.31",
"@storybook/addon-highlight": "7.0.0-alpha.31",
"@storybook/addon-measure": "7.0.0-alpha.31",
"@storybook/addon-outline": "7.0.0-alpha.31",
"@storybook/addon-toolbars": "7.0.0-alpha.31",
"@storybook/addon-viewport": "7.0.0-alpha.31",
"@storybook/addons": "7.0.0-alpha.31",
"@storybook/api": "7.0.0-alpha.31",
"@storybook/core-common": "7.0.0-alpha.31",
"@storybook/node-logger": "7.0.0-alpha.31",
"@storybook/addon-actions": "7.0.0-alpha.33",
"@storybook/addon-backgrounds": "7.0.0-alpha.33",
"@storybook/addon-controls": "7.0.0-alpha.33",
"@storybook/addon-docs": "7.0.0-alpha.33",
"@storybook/addon-highlight": "7.0.0-alpha.33",
"@storybook/addon-measure": "7.0.0-alpha.33",
"@storybook/addon-outline": "7.0.0-alpha.33",
"@storybook/addon-toolbars": "7.0.0-alpha.33",
"@storybook/addon-viewport": "7.0.0-alpha.33",
"@storybook/addons": "7.0.0-alpha.33",
"@storybook/api": "7.0.0-alpha.33",
"@storybook/core-common": "7.0.0-alpha.33",
"@storybook/node-logger": "7.0.0-alpha.33",
"ts-dedent": "^2.0.0"
},
"devDependencies": {
"@babel/core": "^7.12.10",
"@storybook/vue": "7.0.0-alpha.31",
"@storybook/vue": "7.0.0-alpha.33",
"@types/jest": "^26.0.16",
"typescript": "~4.6.3"
},
@ -98,5 +98,5 @@
"publishConfig": {
"access": "public"
},
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f"
"gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a"
}

10
code/addons/highlight/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-highlight",
"version": "7.0.0-alpha.31",
"version": "7.0.0-alpha.33",
"description": "Highlight DOM nodes within your stories",
"keywords": [
"storybook-addons",
@ -33,12 +33,12 @@
"*.d.ts"
],
"scripts": {
"check": "tsc --noEmit",
"check": "../../../scripts/node_modules/.bin/tsc --noEmit",
"prep": "node ../../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "7.0.0-alpha.31",
"@storybook/core-events": "7.0.0-alpha.31",
"@storybook/addons": "7.0.0-alpha.33",
"@storybook/core-events": "7.0.0-alpha.33",
"global": "^4.4.0"
},
"devDependencies": {
@ -48,7 +48,7 @@
"publishConfig": {
"access": "public"
},
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
"gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
"sbmodern": "dist/modern/index.js",
"storybook": {
"displayName": "Highlight",

22
code/addons/interactions/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-interactions",
"version": "7.0.0-alpha.31",
"version": "7.0.0-alpha.33",
"description": "Automate, test and debug user interactions",
"keywords": [
"storybook-addons",
@ -54,20 +54,20 @@
"*.d.ts"
],
"scripts": {
"check": "tsc --noEmit",
"check": "../../../scripts/node_modules/.bin/tsc --noEmit",
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@devtools-ds/object-inspector": "^1.1.2",
"@storybook/addons": "7.0.0-alpha.31",
"@storybook/api": "7.0.0-alpha.31",
"@storybook/client-logger": "7.0.0-alpha.31",
"@storybook/components": "7.0.0-alpha.31",
"@storybook/core-common": "7.0.0-alpha.31",
"@storybook/core-events": "7.0.0-alpha.31",
"@storybook/addons": "7.0.0-alpha.33",
"@storybook/api": "7.0.0-alpha.33",
"@storybook/client-logger": "7.0.0-alpha.33",
"@storybook/components": "7.0.0-alpha.33",
"@storybook/core-common": "7.0.0-alpha.33",
"@storybook/core-events": "7.0.0-alpha.33",
"@storybook/csf": "0.0.2--canary.0899bb7.0",
"@storybook/instrumenter": "7.0.0-alpha.31",
"@storybook/theming": "7.0.0-alpha.31",
"@storybook/instrumenter": "7.0.0-alpha.33",
"@storybook/theming": "7.0.0-alpha.33",
"global": "^4.4.0",
"jest-mock": "^27.0.6",
"polished": "^4.2.2",
@ -101,7 +101,7 @@
"./src/preset/preview.ts"
]
},
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
"gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
"storybook": {
"displayName": "Interactions",
"unsupportedFrameworks": [

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 }),
])
);
});
});
};

2
code/addons/interactions/src/preset/preview.ts
View File

@ -37,7 +37,7 @@ const addSpies = (id: string, val: any, key?: string): any => {
if (Array.isArray(val)) {
return val.map((item, index) => addSpies(id, item, `${key}[${index}]`));
}
if (typeof val === 'function' && val.name === 'actionHandler') {
if (typeof val === 'function' && val.isAction) {
Object.defineProperty(val, 'name', { value: key, writable: false });
Object.defineProperty(val, '__storyId__', { value: id, writable: false });
const spy = action(val);

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();
},
};

18
code/addons/jest/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-jest",
"version": "7.0.0-alpha.31",
"version": "7.0.0-alpha.33",
"description": "React storybook addon that show component jest report",
"keywords": [
"addon",
@ -55,16 +55,16 @@
"*.d.ts"
],
"scripts": {
"check": "tsc --noEmit",
"check": "../../../scripts/node_modules/.bin/tsc --noEmit",
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/addons": "7.0.0-alpha.31",
"@storybook/api": "7.0.0-alpha.31",
"@storybook/client-logger": "7.0.0-alpha.31",
"@storybook/components": "7.0.0-alpha.31",
"@storybook/core-events": "7.0.0-alpha.31",
"@storybook/theming": "7.0.0-alpha.31",
"@storybook/addons": "7.0.0-alpha.33",
"@storybook/api": "7.0.0-alpha.33",
"@storybook/client-logger": "7.0.0-alpha.33",
"@storybook/components": "7.0.0-alpha.33",
"@storybook/core-events": "7.0.0-alpha.33",
"@storybook/theming": "7.0.0-alpha.33",
"global": "^4.4.0",
"react-sizeme": "^3.0.1",
"upath": "^1.2.0"
@ -94,7 +94,7 @@
],
"platform": "browser"
},
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
"gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
"storybook": {
"displayName": "Jest",
"icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg",

14
code/addons/links/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-links",
"version": "7.0.0-alpha.31",
"version": "7.0.0-alpha.33",
"description": "Link stories together to build demos and prototypes with your UI components",
"keywords": [
"addon",
@ -59,15 +59,15 @@
"*.d.ts"
],
"scripts": {
"check": "tsc --noEmit",
"check": "../../../scripts/node_modules/.bin/tsc --noEmit",
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/addons": "7.0.0-alpha.31",
"@storybook/client-logger": "7.0.0-alpha.31",
"@storybook/core-events": "7.0.0-alpha.31",
"@storybook/addons": "7.0.0-alpha.33",
"@storybook/client-logger": "7.0.0-alpha.33",
"@storybook/core-events": "7.0.0-alpha.33",
"@storybook/csf": "0.0.2--canary.0899bb7.0",
"@storybook/router": "7.0.0-alpha.31",
"@storybook/router": "7.0.0-alpha.33",
"global": "^4.4.0",
"prop-types": "^15.7.2",
"ts-dedent": "^2.0.0"
@ -98,7 +98,7 @@
"./src/react/index.ts"
]
},
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
"gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
"storybook": {
"displayName": "Links",
"icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png",

16
code/addons/measure/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-measure",
"version": "7.0.0-alpha.31",
"version": "7.0.0-alpha.33",
"description": "Inspect layouts by visualizing the box model",
"keywords": [
"storybook-addons",
@ -57,15 +57,15 @@
"*.d.ts"
],
"scripts": {
"check": "tsc --noEmit",
"check": "../../../scripts/node_modules/.bin/tsc --noEmit",
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/addons": "7.0.0-alpha.31",
"@storybook/api": "7.0.0-alpha.31",
"@storybook/client-logger": "7.0.0-alpha.31",
"@storybook/components": "7.0.0-alpha.31",
"@storybook/core-events": "7.0.0-alpha.31",
"@storybook/addons": "7.0.0-alpha.33",
"@storybook/api": "7.0.0-alpha.33",
"@storybook/client-logger": "7.0.0-alpha.33",
"@storybook/components": "7.0.0-alpha.33",
"@storybook/core-events": "7.0.0-alpha.33",
"@storybook/csf": "0.0.2--canary.0899bb7.0",
"global": "^4.4.0"
},
@ -94,7 +94,7 @@
"./src/preview.tsx"
]
},
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
"gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
"storybook": {
"displayName": "Measure",
"unsupportedFrameworks": [

16
code/addons/outline/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-outline",
"version": "7.0.0-alpha.31",
"version": "7.0.0-alpha.33",
"description": "Outline all elements with CSS to help with layout placement and alignment",
"keywords": [
"storybook-addons",
@ -60,15 +60,15 @@
"*.d.ts"
],
"scripts": {
"check": "tsc --noEmit",
"check": "../../../scripts/node_modules/.bin/tsc --noEmit",
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/addons": "7.0.0-alpha.31",
"@storybook/api": "7.0.0-alpha.31",
"@storybook/client-logger": "7.0.0-alpha.31",
"@storybook/components": "7.0.0-alpha.31",
"@storybook/core-events": "7.0.0-alpha.31",
"@storybook/addons": "7.0.0-alpha.33",
"@storybook/api": "7.0.0-alpha.33",
"@storybook/client-logger": "7.0.0-alpha.33",
"@storybook/components": "7.0.0-alpha.33",
"@storybook/core-events": "7.0.0-alpha.33",
"@storybook/csf": "0.0.2--canary.0899bb7.0",
"global": "^4.4.0",
"ts-dedent": "^2.0.0"
@ -98,7 +98,7 @@
"./src/preset/preview.tsx"
]
},
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
"gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
"storybook": {
"displayName": "Outline",
"unsupportedFrameworks": [

24
code/addons/storyshots/storyshots-core/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storyshots",
"version": "7.0.0-alpha.31",
"version": "7.0.0-alpha.33",
"description": "Take a code snapshot of every story automatically with Jest",
"keywords": [
"addon",
@ -38,12 +38,12 @@
},
"dependencies": {
"@jest/transform": "^26.6.2",
"@storybook/addons": "7.0.0-alpha.31",
"@storybook/addons": "7.0.0-alpha.33",
"@storybook/babel-plugin-require-context-hook": "1.0.1",
"@storybook/client-api": "7.0.0-alpha.31",
"@storybook/core-client": "7.0.0-alpha.31",
"@storybook/core-common": "7.0.0-alpha.31",
"@storybook/core-webpack": "7.0.0-alpha.31",
"@storybook/client-api": "7.0.0-alpha.33",
"@storybook/core-client": "7.0.0-alpha.33",
"@storybook/core-common": "7.0.0-alpha.33",
"@storybook/core-webpack": "7.0.0-alpha.33",
"@storybook/csf": "0.0.2--canary.0899bb7.0",
"@types/glob": "^7.1.3",
"@types/jest": "^26.0.16",
@ -62,11 +62,11 @@
"@angular/core": "^13.3.6",
"@angular/platform-browser-dynamic": "^13.3.6",
"@emotion/jest": "^11.8.0",
"@storybook/addon-docs": "7.0.0-alpha.31",
"@storybook/angular": "7.0.0-alpha.31",
"@storybook/react": "7.0.0-alpha.31",
"@storybook/vue": "7.0.0-alpha.31",
"@storybook/vue3": "7.0.0-alpha.31",
"@storybook/addon-docs": "7.0.0-alpha.33",
"@storybook/angular": "7.0.0-alpha.33",
"@storybook/react": "7.0.0-alpha.33",
"@storybook/vue": "7.0.0-alpha.33",
"@storybook/vue3": "7.0.0-alpha.33",
"babel-loader": "^8.2.5",
"enzyme": "^3.11.0",
"enzyme-to-json": "^3.6.1",
@ -144,7 +144,7 @@
"publishConfig": {
"access": "public"
},
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
"gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
"storybook": {
"displayName": "Storyshots",
"icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",

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

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storyshots-puppeteer",
"version": "7.0.0-alpha.31",
"version": "7.0.0-alpha.33",
"description": "Image snapshots addition to StoryShots based on puppeteer",
"keywords": [
"addon",
@ -35,7 +35,7 @@
"dependencies": {
"@axe-core/puppeteer": "^4.2.0",
"@storybook/csf": "0.0.2--canary.0899bb7.0",
"@storybook/node-logger": "7.0.0-alpha.31",
"@storybook/node-logger": "7.0.0-alpha.33",
"@types/jest-image-snapshot": "^4.1.3",
"jest-image-snapshot": "^4.3.0"
},
@ -44,7 +44,7 @@
"puppeteer": "^2.0.0 || ^3.0.0"
},
"peerDependencies": {
"@storybook/addon-storyshots": "7.0.0-alpha.31",
"@storybook/addon-storyshots": "7.0.0-alpha.33",
"puppeteer": ">=2.0.0"
},
"peerDependenciesMeta": {
@ -55,5 +55,5 @@
"publishConfig": {
"access": "public"
},
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f"
"gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a"
}

20
code/addons/storysource/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storysource",
"version": "7.0.0-alpha.31",
"version": "7.0.0-alpha.33",
"description": "View a story’s source code to see how it works and paste into your app",
"keywords": [
"addon",
@ -31,17 +31,17 @@
"*.d.ts"
],
"scripts": {
"check": "tsc --noEmit",
"check": "../../../scripts/node_modules/.bin/tsc --noEmit",
"prep": "node ../../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "7.0.0-alpha.31",
"@storybook/api": "7.0.0-alpha.31",
"@storybook/client-logger": "7.0.0-alpha.31",
"@storybook/components": "7.0.0-alpha.31",
"@storybook/router": "7.0.0-alpha.31",
"@storybook/source-loader": "7.0.0-alpha.31",
"@storybook/theming": "7.0.0-alpha.31",
"@storybook/addons": "7.0.0-alpha.33",
"@storybook/api": "7.0.0-alpha.33",
"@storybook/client-logger": "7.0.0-alpha.33",
"@storybook/components": "7.0.0-alpha.33",
"@storybook/router": "7.0.0-alpha.33",
"@storybook/source-loader": "7.0.0-alpha.33",
"@storybook/theming": "7.0.0-alpha.33",
"estraverse": "^5.2.0",
"prop-types": "^15.7.2",
"react-syntax-highlighter": "^15.5.0"
@ -66,7 +66,7 @@
"publishConfig": {
"access": "public"
},
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
"gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
"storybook": {
"displayName": "Storysource",
"icon": "https://user-images.githubusercontent.com/263385/101991675-48cdf300-3c7c-11eb-9400-58de5ac6daa7.png",

16
code/addons/toolbars/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-toolbars",
"version": "7.0.0-alpha.31",
"version": "7.0.0-alpha.33",
"description": "Create your own toolbar items that control story rendering",
"keywords": [
"addon",
@ -53,15 +53,15 @@
"*.d.ts"
],
"scripts": {
"check": "tsc --noEmit",
"check": "../../../scripts/node_modules/.bin/tsc --noEmit",
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/addons": "7.0.0-alpha.31",
"@storybook/api": "7.0.0-alpha.31",
"@storybook/client-logger": "7.0.0-alpha.31",
"@storybook/components": "7.0.0-alpha.31",
"@storybook/theming": "7.0.0-alpha.31"
"@storybook/addons": "7.0.0-alpha.33",
"@storybook/api": "7.0.0-alpha.33",
"@storybook/client-logger": "7.0.0-alpha.33",
"@storybook/components": "7.0.0-alpha.33",
"@storybook/theming": "7.0.0-alpha.33"
},
"devDependencies": {
"typescript": "~4.6.3"
@ -88,7 +88,7 @@
],
"platform": "browser"
},
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
"gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
"storybook": {
"displayName": "Toolbars",
"icon": "https://user-images.githubusercontent.com/263385/101991677-48cdf300-3c7c-11eb-93b4-19b0e3366959.png",

18
code/addons/viewport/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-viewport",
"version": "7.0.0-alpha.31",
"version": "7.0.0-alpha.33",
"description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
"keywords": [
"addon",
@ -55,16 +55,16 @@
"*.d.ts"
],
"scripts": {
"check": "tsc --noEmit",
"check": "../../../scripts/node_modules/.bin/tsc --noEmit",
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/addons": "7.0.0-alpha.31",
"@storybook/api": "7.0.0-alpha.31",
"@storybook/client-logger": "7.0.0-alpha.31",
"@storybook/components": "7.0.0-alpha.31",
"@storybook/core-events": "7.0.0-alpha.31",
"@storybook/theming": "7.0.0-alpha.31",
"@storybook/addons": "7.0.0-alpha.33",
"@storybook/api": "7.0.0-alpha.33",
"@storybook/client-logger": "7.0.0-alpha.33",
"@storybook/components": "7.0.0-alpha.33",
"@storybook/core-events": "7.0.0-alpha.33",
"@storybook/theming": "7.0.0-alpha.33",
"global": "^4.4.0",
"memoizerific": "^1.11.3",
"prop-types": "^15.7.2"
@ -95,7 +95,7 @@
"./src/preview.ts"
]
},
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
"gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
"storybook": {
"displayName": "Viewport",
"icon": "https://user-images.githubusercontent.com/263385/101991678-48cdf300-3c7c-11eb-9764-f8af293c1b28.png",

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', () => {

3
code/e2e-tests/addon-docs.spec.ts
View File

@ -14,8 +14,9 @@ test.describe('addon-docs', () => {
});
test('should provide source snippet', async ({ page }) => {
// templateName is e.g. 'Vue-CLI (Default JS)'
test.skip(
/^vue3/.test(templateName),
/^(vue3|vue-cli)/i.test(templateName),
`Skipping ${templateName}, which does not support dynamic source snippets`
);

32
code/examples/angular-cli/package.json
View File

@ -1,6 +1,6 @@
{
"name": "angular-cli",
"version": "7.0.0-alpha.31",
"version": "7.0.0-alpha.33",
"private": true,
"license": "MIT",
"workspaces": {
@ -43,22 +43,22 @@
"@angular/compiler-cli": "^13.3.6",
"@angular/elements": "^13.3.6",
"@compodoc/compodoc": "^1.1.18",
"@storybook/addon-a11y": "7.0.0-alpha.31",
"@storybook/addon-actions": "7.0.0-alpha.31",
"@storybook/addon-backgrounds": "7.0.0-alpha.31",
"@storybook/addon-controls": "7.0.0-alpha.31",
"@storybook/addon-docs": "7.0.0-alpha.31",
"@storybook/addon-highlight": "7.0.0-alpha.31",
"@storybook/addon-interactions": "7.0.0-alpha.31",
"@storybook/addon-jest": "7.0.0-alpha.31",
"@storybook/addon-links": "7.0.0-alpha.31",
"@storybook/addon-storyshots": "7.0.0-alpha.31",
"@storybook/addon-storysource": "7.0.0-alpha.31",
"@storybook/addons": "7.0.0-alpha.31",
"@storybook/angular": "7.0.0-alpha.31",
"@storybook/addon-a11y": "7.0.0-alpha.33",
"@storybook/addon-actions": "7.0.0-alpha.33",
"@storybook/addon-backgrounds": "7.0.0-alpha.33",
"@storybook/addon-controls": "7.0.0-alpha.33",
"@storybook/addon-docs": "7.0.0-alpha.33",
"@storybook/addon-highlight": "7.0.0-alpha.33",
"@storybook/addon-interactions": "7.0.0-alpha.33",
"@storybook/addon-jest": "7.0.0-alpha.33",
"@storybook/addon-links": "7.0.0-alpha.33",
"@storybook/addon-storyshots": "7.0.0-alpha.33",
"@storybook/addon-storysource": "7.0.0-alpha.33",
"@storybook/addons": "7.0.0-alpha.33",
"@storybook/angular": "7.0.0-alpha.33",
"@storybook/babel-plugin-require-context-hook": "1.0.1",
"@storybook/jest": "^0.0.10",
"@storybook/source-loader": "7.0.0-alpha.31",
"@storybook/source-loader": "7.0.0-alpha.33",
"@storybook/testing-library": "0.0.14-next.0",
"@types/jest": "^26.0.16",
"@types/node": "^14.14.20 || ^16.0.0",
@ -70,7 +70,7 @@
"jest": "^26.6.3",
"jest-preset-angular": "^8.3.2",
"protractor": "~7.0.0",
"storybook": "7.0.0-alpha.31",
"storybook": "7.0.0-alpha.33",
"storybook-addon-angular-ivy": "^0.0.1",
"ts-jest": "^26.4.4",
"ts-node": "^10.4.0",

55
code/examples/angular-cli/src/app/app.component.spec.ts
View File

@ -4,40 +4,29 @@ import { BrowserTestingModule } from '@angular/platform-browser/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(
waitForAsync(() => {
TestBed.configureTestingModule({
imports: [BrowserTestingModule],
declarations: [AppComponent],
}).compileComponents();
})
);
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [BrowserTestingModule],
declarations: [AppComponent],
}).compileComponents();
}));
it(
'should create the app',
waitForAsync(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
})
);
it('should create the app', waitForAsync(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));
it(
`should have as title 'app'`,
waitForAsync(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('app');
})
);
it(`should have as title 'app'`, waitForAsync(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('app');
}));
it(
'should render title in a h1 tag',
waitForAsync(() => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
})
);
it('should render title in a h1 tag', waitForAsync(() => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
}));
});

3
code/examples/cra-kitchen-sink/.env
View File

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

52
code/examples/cra-kitchen-sink/.storybook/main.ts
View File

@ -1,52 +0,0 @@
import type { StorybookConfig } from '@storybook/react-webpack5';
const path = require('path');
const mainConfig: StorybookConfig = {
stories: ['../src/stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
logLevel: 'debug',
addons: [
'@storybook/preset-create-react-app',
{
name: '@storybook/addon-docs/preset',
options: {
configureJSX: true,
},
},
'@storybook/addon-actions',
'@storybook/addon-links',
'@storybook/addon-backgrounds',
'@storybook/addon-a11y',
'@storybook/addon-jest',
'@storybook/addon-highlight',
],
// 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: {
disableTelemetry: true,
channelOptions: { allowFunction: false, maxDepth: 10 },
},
staticDirs: ['../public'],
features: {
buildStoriesJson: true,
breakingChangesV7: true,
},
framework: {
name: '@storybook/react-webpack5',
options: { fastRefresh: true },
},
};
module.exports = mainConfig;

14
code/examples/cra-kitchen-sink/.storybook/manager.js
View File

@ -1,14 +0,0 @@
import { create } from '@storybook/theming/create';
import { addons } from '@storybook/addons';
addons.setConfig({
isFullscreen: false,
showAddonsPanel: true,
panelPosition: 'right',
theme: create({
base: 'light',
brandTitle: 'CRA Kitchen Sink',
brandUrl: 'https://github.com/storybookjs/storybook/tree/master/examples/cra-kitchen-sink',
gridCellSize: 12,
}),
});

11
code/examples/cra-kitchen-sink/.storybook/preview.js
View File

@ -1,11 +0,0 @@
export const parameters = {
options: {
storySort: (a, b) =>
a.title === b.title ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true }),
},
docs: {
source: {
excludeDecorators: true,
},
},
};

46
code/examples/cra-kitchen-sink/package.json
View File

@ -1,46 +0,0 @@
{
"name": "cra-kitchen-sink",
"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 9010 --no-manager-cache",
"test": "react-scripts test --env=jsdom"
},
"dependencies": {
"@storybook/client-logger": "7.0.0-alpha.31",
"global": "^4.4.0",
"prop-types": "^15.7.2",
"react": "16.14.0",
"react-dom": "16.14.0",
"react-lifecycles-compat": "^3.0.4",
"react-scripts": "^5.0.1"
},
"devDependencies": {
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
"@storybook/addon-a11y": "7.0.0-alpha.31",
"@storybook/addon-actions": "7.0.0-alpha.31",
"@storybook/addon-backgrounds": "7.0.0-alpha.31",
"@storybook/addon-docs": "7.0.0-alpha.31",
"@storybook/addon-highlight": "7.0.0-alpha.31",
"@storybook/addon-jest": "7.0.0-alpha.31",
"@storybook/addon-links": "7.0.0-alpha.31",
"@storybook/addon-storyshots": "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/theming": "7.0.0-alpha.31",
"storybook": "7.0.0-alpha.31",
"webpack": "5"
},
"storybook": {
"chromatic": {
"projectToken": "tg55gajmdt"
}
}
}

BIN
code/examples/cra-kitchen-sink/public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 24 KiB

28
code/examples/cra-kitchen-sink/public/index.html
View File

@ -1,28 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<!--
Notice the use of %PUBLIC_URL% in the tag 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>
<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`.
To create a production bundle, use `npm run build`.
-->
</body>
</html>

30
code/examples/cra-kitchen-sink/src/App.css
View File

@ -1,30 +0,0 @@
@import './base.css';
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
.App-intro {
font-size: large;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

17
code/examples/cra-kitchen-sink/src/App.js
View File

@ -1,17 +0,0 @@
import React from 'react';
import logo from './logo.svg';
import './App.css';
const App = () => (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
export default App;

9
code/examples/cra-kitchen-sink/src/base.css
View File

@ -1,9 +0,0 @@
:root {
background: rgba(232, 232, 232, 1);
background: radial-gradient(
ellipse at center,
rgba(255, 255, 255, 1) 11%,
rgba(232, 232, 232, 1) 100%
);
height: 100%;
}

40
code/examples/cra-kitchen-sink/src/components/Container.js
View File

@ -1,40 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
const Container = ({ children, title, age, isAmazing }) => (
<div title={title}>
{children}
{isAmazing ? '!!!' : ''}
{age.isOld ? <div>age = {age.value}</div> : null}
</div>
);
Container.propTypes = {
/**
* The nodes to be rendered in the button
*
* Example value:
*
* ```
* <h1>Node 1</h1>
* <h2>Node 2</h2>
* ```
*/
children: PropTypes.node.isRequired,
/** Show exclamation marks */
isAmazing: PropTypes.bool,
/** Show age prop */
age: PropTypes.shape({
isOld: PropTypes.bool,
value: PropTypes.number,
}),
/** Main title */
title: PropTypes.string,
};
Container.defaultProps = {
isAmazing: false,
age: { isOld: false, value: 0 },
title: 'the best container ever',
};
export default Container;

12
code/examples/cra-kitchen-sink/src/components/FastRefreshExample.js
View File

@ -1,12 +0,0 @@
import React from 'react';
export const FastRefreshExample = () => {
const [value, setValue] = React.useState('abc');
return (
<>
<input value={value} onChange={(event) => setValue(event.target.value)} />
<p>Change the input value then this text in the component file.</p>
<p>The state of the input should be kept.</p>
</>
);
};

53
code/examples/cra-kitchen-sink/src/components/LifecycleLogger.js
View File

@ -1,53 +0,0 @@
import React, { Component } from 'react';
import { polyfill } from 'react-lifecycles-compat';
import { logger } from '@storybook/client-logger';
function log(name) {
logger.info(`LifecycleLogger: ${name}`);
}
// A component that logs its lifecycle so we can check that things happen
// the right number of times (i.e. we are using React properly)
class LifecycleLogger extends Component {
constructor() {
super();
log('constructor');
this.state = {};
}
componentDidMount() {
log('componentDidMount');
}
// deepscan-disable-next-line
getSnapshotBeforeUpdate() {
// deepscan-disable-next-line
log('getSnapshotBeforeUpdate');
}
componentDidUpdate() {
log('componentDidUpdate');
}
componentDidCatch() {
log('componentDidCatch');
}
componentWillUnmount() {
log('componentWillUnmount');
}
render() {
log('render');
return <div>Lifecycle methods are logged to the console</div>;
}
}
LifecycleLogger.getDerivedStateFromProps = () => {
log('getDerivedStateFromProps');
return null;
};
polyfill(LifecycleLogger);
export default LifecycleLogger;

34
code/examples/cra-kitchen-sink/src/components/react-demo.js vendored
View File

@ -1,34 +0,0 @@
import React from 'react';
const styles = {
border: '1px solid #eee',
borderRadius: 3,
backgroundColor: '#FFFFFF',
cursor: 'pointer',
fontSize: 15,
padding: '3px 10px',
margin: 10,
};
// eslint-disable-next-line react/prop-types
export const Button = ({ children, onClick }) => (
<button onClick={onClick} style={styles} type="button">
{children}
</button>
);
Button.displayName = 'Button';
Button.defaultProps = {
onClick: () => {},
};
// eslint-disable-next-line react/prop-types
export const Welcome = ({ showApp }) => (
<button type="button" onClick={showApp}>
Welcome
</button>
);
Welcome.displayName = 'Welcome';
Welcome.defaultProps = {
showApp: () => {},
};

5
code/examples/cra-kitchen-sink/src/index.css
View File

@ -1,5 +0,0 @@
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}

10
code/examples/cra-kitchen-sink/src/index.js
View File

@ -1,10 +0,0 @@
import React from 'react';
import ReactDOM from 'react-dom';
import global from 'global';
import App from './App';
import './index.css';
const { document } = global;
ReactDOM.render(<App />, document.getElementById('root'));

1
code/examples/cra-kitchen-sink/src/logo.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.6 KiB

16
code/examples/cra-kitchen-sink/src/stories/App.stories.js
View File

@ -1,16 +0,0 @@
// FIXME: svgr issue @igor-dv
import React from 'react';
import App from '../App';
export default {
title: 'App',
parameters: {
layout: 'fullscreen',
},
};
export const FullApp = () => <App />;
FullApp.storyName = 'full app';

8
code/examples/cra-kitchen-sink/src/stories/Lifecycle.stories.js
View File

@ -1,8 +0,0 @@
import React from 'react';
import LifecycleLogger from '../components/LifecycleLogger';
export default {
title: 'Lifecycle',
};
export const Logging = () => <LifecycleLogger />;

27
code/examples/cra-kitchen-sink/src/stories/button.stories.js
View File

@ -1,27 +0,0 @@
import React from 'react';
import { Button } from '../components/react-demo';
export default {
title: 'Button',
component: Button,
};
export const Story1 = () => <Button>Hello Button</Button>;
Story1.storyName = 'with text';
Story1.parameters = {
options: { selectedPanel: 'storybook/actions/panel' },
};
export const Story2 = () => (
<Button>
<span role="img" aria-label="yolo">
😀 😎 👍 💯
</span>
</Button>
);
Story2.storyName = 'with some emoji';
Story2.parameters = {
options: { selectedPanel: 'storybook/actions/panel' },
};

9
code/examples/cra-kitchen-sink/src/stories/fast-refresh.stories.js
View File

@ -1,9 +0,0 @@
import React from 'react';
import { FastRefreshExample } from '../components/FastRefreshExample';
export default {
title: 'React Fast Refresh',
component: FastRefreshExample,
};
export const Default = () => <FastRefreshExample />;

19
code/examples/cra-kitchen-sink/src/stories/force-rerender.stories.js
View File

@ -1,19 +0,0 @@
import React from 'react';
import { forceReRender } from '@storybook/react';
import { Button } from '../components/react-demo';
let count = 0;
const increment = () => {
count += 1;
forceReRender();
};
export default {
title: 'Force ReRender',
};
export const DefaultView = () => (
<Button type="button" onClick={increment}>
Click me to increment: {count}
</Button>
);

9
code/examples/cra-kitchen-sink/src/stories/long-description.stories.js
View File

@ -1,9 +0,0 @@
import React from 'react';
import { Button } from '../components/react-demo';
export default {
title: 'Some really long story kind description',
};
export const Story1 = () => <Button>Hello Button</Button>;
Story1.storyName = 'with text';

14
code/examples/cra-kitchen-sink/src/stories/test.stories.mdx
View File

@ -1,14 +0,0 @@
import { Story, Meta, ArgsTable } from '@storybook/addon-docs';
import Container from '../components/Container'
<Meta title="Docs/Test" component={Container} />
<Story name="NewStory123">
<Container>
<h1>Hello</h1>
</Container>
</Story>
## Arguments
<ArgsTable story="NewStory123" />

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

@ -1,10 +0,0 @@
import React from 'react';
import { Welcome } from '../components/react-demo';
export default {
title: 'Welcome',
component: Welcome,
};
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);

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

@ -1,12 +0,0 @@
import React from 'react';
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={() => {}} />;
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');
});

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"]
}

22
code/examples/cra-ts-kitchen-sink/package.json
View File

@ -1,6 +1,6 @@
{
"name": "cra-ts-kitchen-sink",
"version": "7.0.0-alpha.31",
"version": "7.0.0-alpha.33",
"private": true,
"scripts": {
"build": "react-scripts build",
@ -34,23 +34,23 @@
"typescript": "~4.6.3"
},
"devDependencies": {
"@storybook/addon-a11y": "7.0.0-alpha.31",
"@storybook/addon-actions": "7.0.0-alpha.31",
"@storybook/addon-docs": "7.0.0-alpha.31",
"@storybook/addon-highlight": "7.0.0-alpha.31",
"@storybook/addon-links": "7.0.0-alpha.31",
"@storybook/addons": "7.0.0-alpha.31",
"@storybook/builder-webpack5": "7.0.0-alpha.31",
"@storybook/addon-a11y": "7.0.0-alpha.33",
"@storybook/addon-actions": "7.0.0-alpha.33",
"@storybook/addon-docs": "7.0.0-alpha.33",
"@storybook/addon-highlight": "7.0.0-alpha.33",
"@storybook/addon-links": "7.0.0-alpha.33",
"@storybook/addons": "7.0.0-alpha.33",
"@storybook/builder-webpack5": "7.0.0-alpha.33",
"@storybook/preset-create-react-app": "^4.1.0",
"@storybook/react": "7.0.0-alpha.31",
"@storybook/react-webpack5": "7.0.0-alpha.31",
"@storybook/react": "7.0.0-alpha.33",
"@storybook/react-webpack5": "7.0.0-alpha.33",
"@types/enzyme": "^3.10.8",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.9.1",
"enzyme-to-json": "^3.6.1",
"fork-ts-checker-webpack-plugin": "^7.2.6",
"react-moment-proptypes": "^1.7.0",
"storybook": "7.0.0-alpha.31",
"storybook": "7.0.0-alpha.33",
"ts-node": "^10.4.0",
"webpack": "5"
},

20
code/examples/doc-blocks/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/example-doc-blocks",
"version": "7.0.0-alpha.31",
"version": "7.0.0-alpha.33",
"private": true,
"scripts": {
"build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true sb build",
@ -15,20 +15,20 @@
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"@babel/preset-typescript": "^7.12.7",
"@storybook/addon-essentials": "7.0.0-alpha.31",
"@storybook/addon-storyshots": "7.0.0-alpha.31",
"@storybook/addon-storysource": "7.0.0-alpha.31",
"@storybook/addons": "7.0.0-alpha.31",
"@storybook/cli": "7.0.0-alpha.31",
"@storybook/components": "7.0.0-alpha.31",
"@storybook/react-webpack5": "7.0.0-alpha.31",
"@storybook/theming": "7.0.0-alpha.31",
"@storybook/addon-essentials": "7.0.0-alpha.33",
"@storybook/addon-storyshots": "7.0.0-alpha.33",
"@storybook/addon-storysource": "7.0.0-alpha.33",
"@storybook/addons": "7.0.0-alpha.33",
"@storybook/cli": "7.0.0-alpha.33",
"@storybook/components": "7.0.0-alpha.33",
"@storybook/react-webpack5": "7.0.0-alpha.33",
"@storybook/theming": "7.0.0-alpha.33",
"@types/babel__preset-env": "^7",
"@types/react": "^16.14.23",
"@types/react-dom": "^16.9.14",
"cross-env": "^7.0.3",
"lodash": "^4.17.21",
"sb": "7.0.0-alpha.31",
"sb": "7.0.0-alpha.33",
"typescript": "~4.6.3",
"webpack": "5"
},

28
code/examples/ember-cli/package.json
View File

@ -1,6 +1,6 @@
{
"name": "ember-example",
"version": "7.0.0-alpha.31",
"version": "7.0.0-alpha.33",
"private": true,
"scripts": {
"--build-storybook": "yarn storybook-prebuild && storybook build",
@ -17,19 +17,19 @@
"devDependencies": {
"@babel/core": "^7.12.10",
"@ember/optional-features": "^2.0.0",
"@storybook/addon-a11y": "7.0.0-alpha.31",
"@storybook/addon-actions": "7.0.0-alpha.31",
"@storybook/addon-backgrounds": "7.0.0-alpha.31",
"@storybook/addon-controls": "7.0.0-alpha.31",
"@storybook/addon-docs": "7.0.0-alpha.31",
"@storybook/addon-highlight": "7.0.0-alpha.31",
"@storybook/addon-links": "7.0.0-alpha.31",
"@storybook/addon-storysource": "7.0.0-alpha.31",
"@storybook/addon-viewport": "7.0.0-alpha.31",
"@storybook/addons": "7.0.0-alpha.31",
"@storybook/ember": "7.0.0-alpha.31",
"@storybook/addon-a11y": "7.0.0-alpha.33",
"@storybook/addon-actions": "7.0.0-alpha.33",
"@storybook/addon-backgrounds": "7.0.0-alpha.33",
"@storybook/addon-controls": "7.0.0-alpha.33",
"@storybook/addon-docs": "7.0.0-alpha.33",
"@storybook/addon-highlight": "7.0.0-alpha.33",
"@storybook/addon-links": "7.0.0-alpha.33",
"@storybook/addon-storysource": "7.0.0-alpha.33",
"@storybook/addon-viewport": "7.0.0-alpha.33",
"@storybook/addons": "7.0.0-alpha.33",
"@storybook/ember": "7.0.0-alpha.33",
"@storybook/ember-cli-storybook": "^0.2.1",
"@storybook/source-loader": "7.0.0-alpha.31",
"@storybook/source-loader": "7.0.0-alpha.33",
"babel-loader": "^8.2.5",
"broccoli-asset-rev": "^3.0.0",
"browserify-zlib": "^0.2.0",
@ -49,7 +49,7 @@
"loader.js": "^4.7.0",
"os-browserify": "^0.3.0",
"shx": "^0.3.2",
"storybook": "7.0.0-alpha.31",
"storybook": "7.0.0-alpha.33",
"stream-browserify": "^3.0.0",
"vm-browserify": "^1.1.2",
"webpack": "5",

20
code/examples/external-docs/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/external-docs",
"version": "7.0.0-alpha.31",
"version": "7.0.0-alpha.33",
"private": true,
"scripts": {
"build": "next build",
@ -11,15 +11,15 @@
"storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true storybook dev -p 9011 --no-manager-cache -c .storybook"
},
"dependencies": {
"@storybook/addon-docs": "7.0.0-alpha.31",
"@storybook/addon-essentials": "7.0.0-alpha.31",
"@storybook/blocks": "7.0.0-alpha.31",
"@storybook/components": "7.0.0-alpha.31",
"@storybook/addon-docs": "7.0.0-alpha.33",
"@storybook/addon-essentials": "7.0.0-alpha.33",
"@storybook/blocks": "7.0.0-alpha.33",
"@storybook/components": "7.0.0-alpha.33",
"@storybook/csf": "0.0.2--canary.0899bb7.0",
"@storybook/preview-web": "7.0.0-alpha.31",
"@storybook/react": "7.0.0-alpha.31",
"@storybook/react-webpack5": "7.0.0-alpha.31",
"@storybook/theming": "7.0.0-alpha.31",
"@storybook/preview-web": "7.0.0-alpha.33",
"@storybook/react": "7.0.0-alpha.33",
"@storybook/react-webpack5": "7.0.0-alpha.33",
"@storybook/theming": "7.0.0-alpha.33",
"formik": "^2.2.9",
"next": "^12.1.0",
"nextra": "^1.1.0",
@ -38,7 +38,7 @@
"cross-env": "^7.0.3",
"eslint": "8.7.0",
"eslint-config-next": "12.0.8",
"storybook": "7.0.0-alpha.31",
"storybook": "7.0.0-alpha.33",
"typescript": "~4.6.3",
"webpack": "5"
}

38
code/examples/html-kitchen-sink/package.json
View File

@ -1,6 +1,6 @@
{
"name": "html-kitchen-sink",
"version": "7.0.0-alpha.31",
"version": "7.0.0-alpha.33",
"private": true,
"description": "",
"keywords": [],
@ -13,31 +13,31 @@
"storybook": "storybook dev -p 9006 --no-manager-cache"
},
"devDependencies": {
"@storybook/addon-a11y": "7.0.0-alpha.31",
"@storybook/addon-actions": "7.0.0-alpha.31",
"@storybook/addon-backgrounds": "7.0.0-alpha.31",
"@storybook/addon-controls": "7.0.0-alpha.31",
"@storybook/addon-docs": "7.0.0-alpha.31",
"@storybook/addon-highlight": "7.0.0-alpha.31",
"@storybook/addon-jest": "7.0.0-alpha.31",
"@storybook/addon-links": "7.0.0-alpha.31",
"@storybook/addon-a11y": "7.0.0-alpha.33",
"@storybook/addon-actions": "7.0.0-alpha.33",
"@storybook/addon-backgrounds": "7.0.0-alpha.33",
"@storybook/addon-controls": "7.0.0-alpha.33",
"@storybook/addon-docs": "7.0.0-alpha.33",
"@storybook/addon-highlight": "7.0.0-alpha.33",
"@storybook/addon-jest": "7.0.0-alpha.33",
"@storybook/addon-links": "7.0.0-alpha.33",
"@storybook/addon-postcss": "^2.0.0",
"@storybook/addon-storyshots": "7.0.0-alpha.31",
"@storybook/addon-storysource": "7.0.0-alpha.31",
"@storybook/addon-viewport": "7.0.0-alpha.31",
"@storybook/addons": "7.0.0-alpha.31",
"@storybook/client-api": "7.0.0-alpha.31",
"@storybook/core-events": "7.0.0-alpha.31",
"@storybook/html": "7.0.0-alpha.31",
"@storybook/html-webpack5": "7.0.0-alpha.31",
"@storybook/source-loader": "7.0.0-alpha.31",
"@storybook/addon-storyshots": "7.0.0-alpha.33",
"@storybook/addon-storysource": "7.0.0-alpha.33",
"@storybook/addon-viewport": "7.0.0-alpha.33",
"@storybook/addons": "7.0.0-alpha.33",
"@storybook/client-api": "7.0.0-alpha.33",
"@storybook/core-events": "7.0.0-alpha.33",
"@storybook/html": "7.0.0-alpha.33",
"@storybook/html-webpack5": "7.0.0-alpha.33",
"@storybook/source-loader": "7.0.0-alpha.33",
"autoprefixer": "^10.0.1",
"eventemitter3": "^4.0.7",
"format-json": "^1.0.3",
"global": "^4.4.0",
"postcss": "^8.2.4",
"postcss-color-rebeccapurple": "^6.0.0",
"storybook": "7.0.0-alpha.31"
"storybook": "7.0.0-alpha.33"
},
"storybook": {
"chromatic": {

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

@ -1,6 +1,6 @@
{
"name": "official-storybook",
"version": "7.0.0-alpha.31",
"version": "7.0.0-alpha.33",
"private": true,
"scripts": {
"build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true storybook build -c ./",
@ -10,36 +10,39 @@
"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",
"@storybook/addon-a11y": "7.0.0-alpha.31",
"@storybook/addon-actions": "7.0.0-alpha.31",
"@storybook/addon-backgrounds": "7.0.0-alpha.31",
"@storybook/addon-controls": "7.0.0-alpha.31",
"@storybook/addon-docs": "7.0.0-alpha.31",
"@storybook/addon-highlight": "7.0.0-alpha.31",
"@storybook/addon-interactions": "7.0.0-alpha.31",
"@storybook/addon-jest": "7.0.0-alpha.31",
"@storybook/addon-links": "7.0.0-alpha.31",
"@storybook/addon-storyshots": "7.0.0-alpha.31",
"@storybook/addon-storyshots-puppeteer": "7.0.0-alpha.31",
"@storybook/addon-storysource": "7.0.0-alpha.31",
"@storybook/addon-toolbars": "7.0.0-alpha.31",
"@storybook/addon-viewport": "7.0.0-alpha.31",
"@storybook/addons": "7.0.0-alpha.31",
"@storybook/cli": "7.0.0-alpha.31",
"@storybook/components": "7.0.0-alpha.31",
"@storybook/core-events": "7.0.0-alpha.31",
"@storybook/addon-a11y": "7.0.0-alpha.33",
"@storybook/addon-actions": "7.0.0-alpha.33",
"@storybook/addon-backgrounds": "7.0.0-alpha.33",
"@storybook/addon-controls": "7.0.0-alpha.33",
"@storybook/addon-docs": "7.0.0-alpha.33",
"@storybook/addon-highlight": "7.0.0-alpha.33",
"@storybook/addon-interactions": "7.0.0-alpha.33",
"@storybook/addon-jest": "7.0.0-alpha.33",
"@storybook/addon-links": "7.0.0-alpha.33",
"@storybook/addon-storyshots": "7.0.0-alpha.33",
"@storybook/addon-storyshots-puppeteer": "7.0.0-alpha.33",
"@storybook/addon-storysource": "7.0.0-alpha.33",
"@storybook/addon-toolbars": "7.0.0-alpha.33",
"@storybook/addon-viewport": "7.0.0-alpha.33",
"@storybook/addons": "7.0.0-alpha.33",
"@storybook/cli": "7.0.0-alpha.33",
"@storybook/components": "7.0.0-alpha.33",
"@storybook/core-events": "7.0.0-alpha.33",
"@storybook/design-system": "^5.4.7",
"@storybook/jest": "^0.0.10",
"@storybook/node-logger": "7.0.0-alpha.31",
"@storybook/react": "7.0.0-alpha.31",
"@storybook/react-webpack5": "7.0.0-alpha.31",
"@storybook/router": "7.0.0-alpha.31",
"@storybook/source-loader": "7.0.0-alpha.31",
"@storybook/node-logger": "7.0.0-alpha.33",
"@storybook/react": "7.0.0-alpha.33",
"@storybook/react-webpack5": "7.0.0-alpha.33",
"@storybook/router": "7.0.0-alpha.33",
"@storybook/source-loader": "7.0.0-alpha.33",
"@storybook/testing-library": "0.0.14-next.0",
"@storybook/theming": "7.0.0-alpha.31",
"@storybook/theming": "7.0.0-alpha.33",
"@testing-library/dom": "^7.31.2",
"@testing-library/user-event": "^13.1.9",
"chromatic": "^6.0.2",
@ -55,7 +58,7 @@
"prop-types": "^15.7.2",
"react": "16.14.0",
"react-dom": "16.14.0",
"storybook": "7.0.0-alpha.31",
"storybook": "7.0.0-alpha.33",
"terser-webpack-plugin": "^5.3.1",
"uuid-browser": "^3.1.0",
"webpack": "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

28
code/examples/preact-kitchen-sink/package.json
View File

@ -1,6 +1,6 @@
{
"name": "preact-example",
"version": "7.0.0-alpha.31",
"version": "7.0.0-alpha.33",
"private": true,
"scripts": {
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@ -14,18 +14,18 @@
},
"devDependencies": {
"@babel/core": "^7.12.10",
"@storybook/addon-a11y": "7.0.0-alpha.31",
"@storybook/addon-actions": "7.0.0-alpha.31",
"@storybook/addon-backgrounds": "7.0.0-alpha.31",
"@storybook/addon-highlight": "7.0.0-alpha.31",
"@storybook/addon-links": "7.0.0-alpha.31",
"@storybook/addon-storyshots": "7.0.0-alpha.31",
"@storybook/addon-storysource": "7.0.0-alpha.31",
"@storybook/addon-viewport": "7.0.0-alpha.31",
"@storybook/addons": "7.0.0-alpha.31",
"@storybook/preact": "7.0.0-alpha.31",
"@storybook/preact-webpack5": "7.0.0-alpha.31",
"@storybook/source-loader": "7.0.0-alpha.31",
"@storybook/addon-a11y": "7.0.0-alpha.33",
"@storybook/addon-actions": "7.0.0-alpha.33",
"@storybook/addon-backgrounds": "7.0.0-alpha.33",
"@storybook/addon-highlight": "7.0.0-alpha.33",
"@storybook/addon-links": "7.0.0-alpha.33",
"@storybook/addon-storyshots": "7.0.0-alpha.33",
"@storybook/addon-storysource": "7.0.0-alpha.33",
"@storybook/addon-viewport": "7.0.0-alpha.33",
"@storybook/addons": "7.0.0-alpha.33",
"@storybook/preact": "7.0.0-alpha.33",
"@storybook/preact-webpack5": "7.0.0-alpha.33",
"@storybook/source-loader": "7.0.0-alpha.33",
"@types/prop-types": "^15.7.3",
"@types/react": "^17",
"@types/react-dom": "^17",
@ -38,7 +38,7 @@
"raw-loader": "^4.0.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"storybook": "7.0.0-alpha.31",
"storybook": "7.0.0-alpha.33",
"svg-url-loader": "^7.1.1",
"webpack": "5",
"webpack-dev-server": "^4.8.1"

22
code/examples/react-ts/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/example-react-ts",
"version": "7.0.0-alpha.31",
"version": "7.0.0-alpha.33",
"private": true,
"scripts": {
"build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true storybook build",
@ -17,15 +17,15 @@
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"@babel/preset-typescript": "^7.12.7",
"@storybook/addon-essentials": "7.0.0-alpha.31",
"@storybook/addon-storyshots": "7.0.0-alpha.31",
"@storybook/addon-storysource": "7.0.0-alpha.31",
"@storybook/addons": "7.0.0-alpha.31",
"@storybook/cli": "7.0.0-alpha.31",
"@storybook/components": "7.0.0-alpha.31",
"@storybook/react": "7.0.0-alpha.31",
"@storybook/react-webpack5": "7.0.0-alpha.31",
"@storybook/theming": "7.0.0-alpha.31",
"@storybook/addon-essentials": "7.0.0-alpha.33",
"@storybook/addon-storyshots": "7.0.0-alpha.33",
"@storybook/addon-storysource": "7.0.0-alpha.33",
"@storybook/addons": "7.0.0-alpha.33",
"@storybook/cli": "7.0.0-alpha.33",
"@storybook/components": "7.0.0-alpha.33",
"@storybook/react": "7.0.0-alpha.33",
"@storybook/react-webpack5": "7.0.0-alpha.33",
"@storybook/theming": "7.0.0-alpha.33",
"@testing-library/dom": "^7.31.2",
"@testing-library/react": "12.1.2",
"@testing-library/user-event": "^13.1.9",
@ -34,7 +34,7 @@
"@types/react-dom": "^16.9.14",
"cross-env": "^7.0.3",
"lodash": "^4.17.21",
"storybook": "7.0.0-alpha.31",
"storybook": "7.0.0-alpha.33",
"typescript": "~4.6.3",
"webpack": "5"
}

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,
}));

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