mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-06 05:31:06 +08:00
Merge branch 'next' into tech/do-not-remove-old-framewokr-automigrate
This commit is contained in:
Norbert de Langen
commit
028f327e2e
2
.github/workflows/tests-unit.yml
vendored
2
.github/workflows/tests-unit.yml
vendored
@ -15,7 +15,7 @@ jobs:
|
|||||||
fail-fast: false
|
fail-fast: false
|
||||||
matrix:
|
matrix:
|
||||||
os: [ubuntu-latest]
|
os: [ubuntu-latest]
|
||||||
node_version: [12, 14, 16]
|
node_version: [14, 16]
|
||||||
include:
|
include:
|
||||||
- os: macos-latest
|
- os: macos-latest
|
||||||
node_version: 16
|
node_version: 16
|
||||||
|
|||||||
14
.gitpod.yml
14
.gitpod.yml
@ -3,5 +3,15 @@
|
|||||||
# and commit this file to your remote git repository to share the goodness with others.
|
# and commit this file to your remote git repository to share the goodness with others.
|
||||||
|
|
||||||
tasks:
|
tasks:
|
||||||
- init: yarn
|
- name: Scripts
|
||||||
command: yarn bootstrap --core
|
init: |
|
||||||
|
cd scripts
|
||||||
|
yarn install
|
||||||
|
gp sync-done scripts
|
||||||
|
|
||||||
|
- name: Code
|
||||||
|
init: |
|
||||||
|
gp sync-await scripts # wait for the above 'init' to finish
|
||||||
|
cd code
|
||||||
|
yarn install
|
||||||
|
yarn bootstrap --core
|
||||||
|
|||||||
38
CHANGELOG.md
38
CHANGELOG.md
@ -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)
|
## 7.0.0-alpha.31 (September 7, 2022)
|
||||||
|
|
||||||
#### Maintenance
|
#### Maintenance
|
||||||
|
|||||||
38
MIGRATION.md
38
MIGRATION.md
@ -21,6 +21,7 @@
|
|||||||
- [Vite builder uses vite config automatically](#vite-builder-uses-vite-config-automatically)
|
- [Vite builder uses vite config automatically](#vite-builder-uses-vite-config-automatically)
|
||||||
- [Removed docs.getContainer and getPage parameters](#removed-docsgetcontainer-and-getpage-parameters)
|
- [Removed docs.getContainer and getPage parameters](#removed-docsgetcontainer-and-getpage-parameters)
|
||||||
- [Icons API changed](#icons-api-changed)
|
- [Icons API changed](#icons-api-changed)
|
||||||
|
- ['config' preset entry replaced with 'previewAnnotations'](#config-preset-entry-replaced-with-preview-annotations)
|
||||||
- [Docs Changes](#docs-changes)
|
- [Docs Changes](#docs-changes)
|
||||||
- [Standalone docs files](#standalone-docs-files)
|
- [Standalone docs files](#standalone-docs-files)
|
||||||
- [Referencing stories in docs files](#referencing-stories-in-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
|
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
|
### 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.
|
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 }) {
|
export default function App({ Component, pageProps }) {
|
||||||
return (
|
return (
|
||||||
<ExternalDocs
|
<ExternalDocs projectAnnotationsList={[reactAnnotations, previewAnnotations]}>
|
||||||
projectAnnotationsList={[reactAnnotations, previewAnnotations]}
|
|
||||||
>
|
|
||||||
<Component {...pageProps} />
|
<Component {...pageProps} />
|
||||||
</ExternalDocs>
|
</ExternalDocs>
|
||||||
);
|
);
|
||||||
@ -798,8 +803,7 @@ import startCase from 'lodash/startCase';
|
|||||||
|
|
||||||
addons.setConfig({
|
addons.setConfig({
|
||||||
sidebar: {
|
sidebar: {
|
||||||
renderLabel: ({ name, type }) =>
|
renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)),
|
||||||
type === 'story' ? name : startCase(name),
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
@ -1226,11 +1230,7 @@ After:
|
|||||||
```js
|
```js
|
||||||
// .storybook/main.js
|
// .storybook/main.js
|
||||||
module.exports = {
|
module.exports = {
|
||||||
staticDirs: [
|
staticDirs: ['../public', '../static', { from: '../foo/assets', to: '/assets' }],
|
||||||
'../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:
|
Consider the following story that uses the context:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
export const Dummy = ({ parameters }) => (
|
export const Dummy = ({ parameters }) => <div>{JSON.stringify(parameters)}</div>;
|
||||||
<div>{JSON.stringify(parameters)}</div>
|
|
||||||
);
|
|
||||||
```
|
```
|
||||||
|
|
||||||
Here's an updated story for 6.0 that ignores the args object:
|
Here's an updated story for 6.0 that ignores the args object:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
export const Dummy = (_args, { parameters }) => (
|
export const Dummy = (_args, { parameters }) => <div>{JSON.stringify(parameters)}</div>;
|
||||||
<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:
|
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
|
```js
|
||||||
export const parameters = {
|
export const parameters = {
|
||||||
a11y: {
|
a11y: {
|
||||||
element: "#storybook-root",
|
element: '#storybook-root',
|
||||||
config: {},
|
config: {},
|
||||||
options: {},
|
options: {},
|
||||||
manual: true,
|
manual: true,
|
||||||
@ -2578,9 +2574,7 @@ For example, here's how to sort by story ID using `storySort`:
|
|||||||
addParameters({
|
addParameters({
|
||||||
options: {
|
options: {
|
||||||
storySort: (a, b) =>
|
storySort: (a, b) =>
|
||||||
a[1].kind === b[1].kind
|
a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
|
||||||
? 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": {
|
"compilerOptions": {
|
||||||
"paths": {
|
"paths": {
|
||||||
"core-js/es7/reflect": [
|
"core-js/es7/reflect": ["node_modules/core-js/proposals/reflect-metadata"],
|
||||||
"node_modules/core-js/proposals/reflect-metadata"
|
|
||||||
],
|
|
||||||
"core-js/es6/*": ["node_modules/core-js/es"]
|
"core-js/es6/*": ["node_modules/core-js/es"]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -17,8 +17,6 @@ examples/ember-cli/.storybook/preview-head.html
|
|||||||
examples/official-storybook/tests/addon-jest.test.js
|
examples/official-storybook/tests/addon-jest.test.js
|
||||||
examples/cra-ts-kitchen-sink/*.json
|
examples/cra-ts-kitchen-sink/*.json
|
||||||
examples/cra-ts-kitchen-sink/public/*
|
examples/cra-ts-kitchen-sink/public/*
|
||||||
examples/cra-ts-essentials/*.json
|
|
||||||
examples/cra-ts-essentials/public/*
|
|
||||||
ember-output
|
ember-output
|
||||||
.yarn
|
.yarn
|
||||||
!.remarkrc.js
|
!.remarkrc.js
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@storybook/addon-a11y",
|
"name": "@storybook/addon-a11y",
|
||||||
"version": "7.0.0-alpha.31",
|
"version": "7.0.0-alpha.33",
|
||||||
"description": "Test component compliance with web accessibility standards",
|
"description": "Test component compliance with web accessibility standards",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"a11y",
|
"a11y",
|
||||||
@ -62,15 +62,15 @@
|
|||||||
"prep": "../../../scripts/prepare/bundle.ts"
|
"prep": "../../../scripts/prepare/bundle.ts"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@storybook/addon-highlight": "7.0.0-alpha.31",
|
"@storybook/addon-highlight": "7.0.0-alpha.33",
|
||||||
"@storybook/addons": "7.0.0-alpha.31",
|
"@storybook/addons": "7.0.0-alpha.33",
|
||||||
"@storybook/api": "7.0.0-alpha.31",
|
"@storybook/api": "7.0.0-alpha.33",
|
||||||
"@storybook/channels": "7.0.0-alpha.31",
|
"@storybook/channels": "7.0.0-alpha.33",
|
||||||
"@storybook/client-logger": "7.0.0-alpha.31",
|
"@storybook/client-logger": "7.0.0-alpha.33",
|
||||||
"@storybook/components": "7.0.0-alpha.31",
|
"@storybook/components": "7.0.0-alpha.33",
|
||||||
"@storybook/core-events": "7.0.0-alpha.31",
|
"@storybook/core-events": "7.0.0-alpha.33",
|
||||||
"@storybook/csf": "0.0.2--canary.0899bb7.0",
|
"@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",
|
"axe-core": "^4.2.0",
|
||||||
"global": "^4.4.0",
|
"global": "^4.4.0",
|
||||||
"lodash": "^4.17.21",
|
"lodash": "^4.17.21",
|
||||||
@ -104,7 +104,7 @@
|
|||||||
"./src/preview.tsx"
|
"./src/preview.tsx"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
|
"gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
|
||||||
"storybook": {
|
"storybook": {
|
||||||
"displayName": "Accessibility",
|
"displayName": "Accessibility",
|
||||||
"icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",
|
"icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",
|
||||||
|
|||||||
@ -69,9 +69,7 @@ const getParams = async (storyId: string): Promise<A11yParameters> => {
|
|||||||
return (
|
return (
|
||||||
parameters.a11y || {
|
parameters.a11y || {
|
||||||
config: {},
|
config: {},
|
||||||
options: {
|
options: {},
|
||||||
restoreScroll: true,
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
63
code/addons/a11y/template/stories/parameters.stories.ts
Normal file
63
code/addons/a11y/template/stories/parameters.stories.ts
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
import globalThis from 'global';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
component: globalThis.Components.Html,
|
||||||
|
args: {
|
||||||
|
contents: '<button>Click Me!</button>',
|
||||||
|
},
|
||||||
|
parameters: {
|
||||||
|
chromatic: { disable: true },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Options = {
|
||||||
|
args: {
|
||||||
|
contents:
|
||||||
|
'<button style="color: rgb(255, 255, 255); background-color: rgb(76, 175, 80);">Click me!</button>',
|
||||||
|
},
|
||||||
|
parameters: {
|
||||||
|
a11y: {
|
||||||
|
config: {},
|
||||||
|
options: {
|
||||||
|
checks: {
|
||||||
|
'color-contrast': { enabled: false },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Config = {
|
||||||
|
args: {
|
||||||
|
contents:
|
||||||
|
'<button style="color: rgb(255, 255, 255); background-color: rgb(76, 175, 80);">Click me!</button>',
|
||||||
|
},
|
||||||
|
parameters: {
|
||||||
|
a11y: {
|
||||||
|
config: {
|
||||||
|
rules: [{ id: 'avoid-inline-spacing', options: {} }],
|
||||||
|
disableOtherRules: true,
|
||||||
|
},
|
||||||
|
options: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Targetted = {
|
||||||
|
args: {
|
||||||
|
contents: '<button class="custom-target">Click Me!</button>',
|
||||||
|
},
|
||||||
|
parameters: {
|
||||||
|
a11y: {
|
||||||
|
element: '.custom-target',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Disabled = {
|
||||||
|
parameters: {
|
||||||
|
a11y: {
|
||||||
|
disable: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
65
code/addons/a11y/template/stories/tests.stories.ts
Normal file
65
code/addons/a11y/template/stories/tests.stories.ts
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
import globalThis from 'global';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
component: globalThis.Components.Html,
|
||||||
|
args: {
|
||||||
|
contents: '',
|
||||||
|
},
|
||||||
|
parameters: {
|
||||||
|
chromatic: { disable: true },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Violations = {
|
||||||
|
args: {
|
||||||
|
contents: `
|
||||||
|
<div>
|
||||||
|
<p>empty heading</p>
|
||||||
|
<h1></h1>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>empty button</p>
|
||||||
|
<button></button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>low contrast</p>
|
||||||
|
<button style="color: rgb(255, 255, 255); background-color: rgb(76, 175, 80);">Click me!</button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>missing label</p>
|
||||||
|
<label><input /></label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>missing alt</p>
|
||||||
|
<img src="https://storybook.js.org/images/placeholders/350x150.png" />
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Passes = {
|
||||||
|
args: {
|
||||||
|
contents: `
|
||||||
|
<div>
|
||||||
|
<p>heading</p>
|
||||||
|
<h1>heading 1</h1>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>button</p>
|
||||||
|
<button>Click me!</button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>contrast</p>
|
||||||
|
<button style="color: rgb(255, 255, 255); background-color: rgb(0, 0, 0);">Click me!</button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>label</p>
|
||||||
|
<label><span>label</span><input /></label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>alt</p>
|
||||||
|
<img src="https://storybook.js.org/images/placeholders/350x150.png" alt="placeholder" />
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@storybook/addon-actions",
|
"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",
|
"description": "Get UI feedback when an action is performed on an interactive element",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"storybook",
|
"storybook",
|
||||||
@ -35,13 +35,13 @@
|
|||||||
"prep": "node ../../../scripts/prepare.js"
|
"prep": "node ../../../scripts/prepare.js"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@storybook/addons": "7.0.0-alpha.31",
|
"@storybook/addons": "7.0.0-alpha.33",
|
||||||
"@storybook/api": "7.0.0-alpha.31",
|
"@storybook/api": "7.0.0-alpha.33",
|
||||||
"@storybook/client-logger": "7.0.0-alpha.31",
|
"@storybook/client-logger": "7.0.0-alpha.33",
|
||||||
"@storybook/components": "7.0.0-alpha.31",
|
"@storybook/components": "7.0.0-alpha.33",
|
||||||
"@storybook/core-events": "7.0.0-alpha.31",
|
"@storybook/core-events": "7.0.0-alpha.33",
|
||||||
"@storybook/csf": "0.0.2--canary.0899bb7.0",
|
"@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",
|
"dequal": "^2.0.2",
|
||||||
"global": "^4.4.0",
|
"global": "^4.4.0",
|
||||||
"lodash": "^4.17.21",
|
"lodash": "^4.17.21",
|
||||||
@ -72,7 +72,7 @@
|
|||||||
"publishConfig": {
|
"publishConfig": {
|
||||||
"access": "public"
|
"access": "public"
|
||||||
},
|
},
|
||||||
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
|
"gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
|
||||||
"storybook": {
|
"storybook": {
|
||||||
"displayName": "Actions",
|
"displayName": "Actions",
|
||||||
"unsupportedFrameworks": [
|
"unsupportedFrameworks": [
|
||||||
|
|||||||
@ -20,7 +20,7 @@ const isReactSyntheticEvent = (e: unknown): e is SyntheticEvent =>
|
|||||||
const serializeArg = <T>(a: T) => {
|
const serializeArg = <T>(a: T) => {
|
||||||
if (isReactSyntheticEvent(a)) {
|
if (isReactSyntheticEvent(a)) {
|
||||||
const e: SyntheticEvent = Object.create(
|
const e: SyntheticEvent = Object.create(
|
||||||
// @ts-ignore
|
// @ts-expect-error (Converted from ts-ignore)
|
||||||
a.constructor.prototype,
|
a.constructor.prototype,
|
||||||
Object.getOwnPropertyDescriptors(a)
|
Object.getOwnPropertyDescriptors(a)
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@storybook/addon-backgrounds",
|
"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",
|
"description": "Switch backgrounds to view components in different settings",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"addon",
|
"addon",
|
||||||
@ -62,13 +62,13 @@
|
|||||||
"prep": "../../../scripts/prepare/bundle.ts"
|
"prep": "../../../scripts/prepare/bundle.ts"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@storybook/addons": "7.0.0-alpha.31",
|
"@storybook/addons": "7.0.0-alpha.33",
|
||||||
"@storybook/api": "7.0.0-alpha.31",
|
"@storybook/api": "7.0.0-alpha.33",
|
||||||
"@storybook/client-logger": "7.0.0-alpha.31",
|
"@storybook/client-logger": "7.0.0-alpha.33",
|
||||||
"@storybook/components": "7.0.0-alpha.31",
|
"@storybook/components": "7.0.0-alpha.33",
|
||||||
"@storybook/core-events": "7.0.0-alpha.31",
|
"@storybook/core-events": "7.0.0-alpha.33",
|
||||||
"@storybook/csf": "0.0.2--canary.0899bb7.0",
|
"@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",
|
"global": "^4.4.0",
|
||||||
"memoizerific": "^1.11.3",
|
"memoizerific": "^1.11.3",
|
||||||
"ts-dedent": "^2.0.0",
|
"ts-dedent": "^2.0.0",
|
||||||
@ -99,7 +99,7 @@
|
|||||||
"./src/preview.tsx"
|
"./src/preview.tsx"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
|
"gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
|
||||||
"storybook": {
|
"storybook": {
|
||||||
"displayName": "Backgrounds",
|
"displayName": "Backgrounds",
|
||||||
"icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",
|
"icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@storybook/addon-controls",
|
"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",
|
"description": "Interact with component inputs dynamically in the Storybook UI",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"addon",
|
"addon",
|
||||||
@ -57,16 +57,16 @@
|
|||||||
"prep": "../../../scripts/prepare/bundle.ts"
|
"prep": "../../../scripts/prepare/bundle.ts"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@storybook/addons": "7.0.0-alpha.31",
|
"@storybook/addons": "7.0.0-alpha.33",
|
||||||
"@storybook/api": "7.0.0-alpha.31",
|
"@storybook/api": "7.0.0-alpha.33",
|
||||||
"@storybook/blocks": "7.0.0-alpha.31",
|
"@storybook/blocks": "7.0.0-alpha.33",
|
||||||
"@storybook/client-logger": "7.0.0-alpha.31",
|
"@storybook/client-logger": "7.0.0-alpha.33",
|
||||||
"@storybook/components": "7.0.0-alpha.31",
|
"@storybook/components": "7.0.0-alpha.33",
|
||||||
"@storybook/core-common": "7.0.0-alpha.31",
|
"@storybook/core-common": "7.0.0-alpha.33",
|
||||||
"@storybook/csf": "0.0.2--canary.0899bb7.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",
|
||||||
"@storybook/store": "7.0.0-alpha.31",
|
"@storybook/store": "7.0.0-alpha.33",
|
||||||
"@storybook/theming": "7.0.0-alpha.31",
|
"@storybook/theming": "7.0.0-alpha.33",
|
||||||
"lodash": "^4.17.21",
|
"lodash": "^4.17.21",
|
||||||
"ts-dedent": "^2.0.0"
|
"ts-dedent": "^2.0.0"
|
||||||
},
|
},
|
||||||
@ -92,7 +92,7 @@
|
|||||||
],
|
],
|
||||||
"platform": "browser"
|
"platform": "browser"
|
||||||
},
|
},
|
||||||
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
|
"gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
|
||||||
"storybook": {
|
"storybook": {
|
||||||
"displayName": "Controls",
|
"displayName": "Controls",
|
||||||
"icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",
|
"icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",
|
||||||
|
|||||||
83
code/addons/controls/template/stories/basics.stories.ts
Normal file
83
code/addons/controls/template/stories/basics.stories.ts
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
import globalThis from 'global';
|
||||||
|
import { PartialStoryFn, StoryContext } from '@storybook/csf';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
component: null,
|
||||||
|
decorators: [
|
||||||
|
(storyFn: PartialStoryFn, context: StoryContext) =>
|
||||||
|
storyFn({ component: globalThis.Components.Pre, args: { object: context.args } }),
|
||||||
|
],
|
||||||
|
argTypes: {
|
||||||
|
boolean: { control: 'boolean' },
|
||||||
|
color: { control: 'color' },
|
||||||
|
colorWithPresets: {
|
||||||
|
control: {
|
||||||
|
type: 'color',
|
||||||
|
presetColors: ['#ff0', 'pink', { color: '#00f', title: 'mystery' }],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
colorStartOpen: { control: { type: 'color', startOpen: true } },
|
||||||
|
date: { control: 'date' },
|
||||||
|
file: { control: { type: 'file', accept: '.png' }, name: 'Image Urls' },
|
||||||
|
number: { control: 'number' },
|
||||||
|
object: { control: 'object' },
|
||||||
|
radio: { control: { type: 'radio', options: ['a', 'b', 'c'] } },
|
||||||
|
radioWithLabels: {
|
||||||
|
control: { type: 'radio', options: ['a', 'b', 'c'], labels: ['alpha', 'beta', 'gamma'] },
|
||||||
|
},
|
||||||
|
inlineRadio: { control: { type: 'inline-radio', options: ['a', 'b', 'c'] } },
|
||||||
|
select: { control: { type: 'select', options: ['a', 'b', 'c'] } },
|
||||||
|
multiSelect: { control: { type: 'multi-select', options: ['a', 'b', 'c'] } },
|
||||||
|
range: { control: 'range' },
|
||||||
|
rangeCustom: { control: { type: 'range', min: 0, max: 1000, step: 100 } },
|
||||||
|
text: { control: 'text' },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Undefined = {
|
||||||
|
args: {},
|
||||||
|
};
|
||||||
|
|
||||||
|
const DEFAULT_NESTED_OBJECT = {
|
||||||
|
text: 'Hello world',
|
||||||
|
boolean: true,
|
||||||
|
array: ['One', 'Two', 'Three'],
|
||||||
|
object: { a: 1, b: 2, c: 3 },
|
||||||
|
};
|
||||||
|
export const Defined = {
|
||||||
|
args: {
|
||||||
|
boolean: true,
|
||||||
|
color: '#ff0',
|
||||||
|
colorWithPresets: 'pink',
|
||||||
|
colorStartOpen: 'orange',
|
||||||
|
date: new Date(2010, 1, 1),
|
||||||
|
file: ['https://storybook.js.org/images/placeholders/350x150.png'],
|
||||||
|
number: 10,
|
||||||
|
object: DEFAULT_NESTED_OBJECT,
|
||||||
|
radio: 'a',
|
||||||
|
radioWithLabels: 'b',
|
||||||
|
inlineRadio: 'c',
|
||||||
|
select: 'b',
|
||||||
|
multiSelect: ['a'],
|
||||||
|
range: 15,
|
||||||
|
rangeCustom: 10,
|
||||||
|
text: 'hello',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// export const ImageFileControl = (args) => <img src={args.imageUrls[0]} alt="Your Example Story" />;
|
||||||
|
// ImageFileControl.args = {
|
||||||
|
// imageUrls: ['https://storybook.js.org/images/placeholders/350x150.png'],
|
||||||
|
// };
|
||||||
|
|
||||||
|
// const hasCycle: any = {};
|
||||||
|
// hasCycle.cycle = hasCycle;
|
||||||
|
|
||||||
|
// export const CyclicArgs = {
|
||||||
|
// args: process.env.NODE_ENV !== 'test' ? { object: hasCycle } : {},
|
||||||
|
// parameters: {
|
||||||
|
// docs: { disable: true },
|
||||||
|
// chromatic: { disable: true },
|
||||||
|
// storyshots: { disable: true },
|
||||||
|
// },
|
||||||
|
// };
|
||||||
62
code/addons/controls/template/stories/conditional.stories.ts
Normal file
62
code/addons/controls/template/stories/conditional.stories.ts
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
import globalThis from 'global';
|
||||||
|
import { PartialStoryFn, StoryContext } from '@storybook/csf';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
component: null,
|
||||||
|
decorators: [
|
||||||
|
(storyFn: PartialStoryFn, context: StoryContext) =>
|
||||||
|
storyFn({ component: globalThis.Components.Pre, args: { object: context.args } }),
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
export const MutuallyExclusiveModes = {
|
||||||
|
argTypes: {
|
||||||
|
mutuallyExclusiveA: { control: 'text', if: { arg: 'mutuallyExclusiveB', truthy: false } },
|
||||||
|
mutuallyExclusiveB: { control: 'text', if: { arg: 'mutuallyExclusiveA', truthy: false } },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ToggleControl = {
|
||||||
|
argTypes: {
|
||||||
|
colorMode: {
|
||||||
|
control: 'boolean',
|
||||||
|
},
|
||||||
|
dynamicText: {
|
||||||
|
if: { arg: 'colorMode', truthy: false },
|
||||||
|
control: 'text',
|
||||||
|
},
|
||||||
|
dynamicColor: {
|
||||||
|
if: { arg: 'colorMode' },
|
||||||
|
control: 'color',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ToggleExpandCollapse = {
|
||||||
|
argTypes: {
|
||||||
|
advanced: {
|
||||||
|
control: 'boolean',
|
||||||
|
},
|
||||||
|
margin: {
|
||||||
|
control: 'number',
|
||||||
|
if: { arg: 'advanced' },
|
||||||
|
},
|
||||||
|
padding: {
|
||||||
|
control: 'number',
|
||||||
|
if: { arg: 'advanced' },
|
||||||
|
},
|
||||||
|
cornerRadius: {
|
||||||
|
control: 'number',
|
||||||
|
if: { arg: 'advanced' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const GlobalBased = {
|
||||||
|
argTypes: {
|
||||||
|
ifThemeExists: { control: 'text', if: { global: 'theme' } },
|
||||||
|
ifThemeNotExists: { control: 'text', if: { global: 'theme', exists: false } },
|
||||||
|
ifLightTheme: { control: 'text', if: { global: 'theme', eq: 'light' } },
|
||||||
|
ifNotLightTheme: { control: 'text', if: { global: 'theme', neq: 'light' } },
|
||||||
|
},
|
||||||
|
};
|
||||||
22
code/addons/controls/template/stories/disable.stories.ts
Normal file
22
code/addons/controls/template/stories/disable.stories.ts
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
import globalThis from 'global';
|
||||||
|
import { PartialStoryFn, StoryContext } from '@storybook/csf';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
component: null,
|
||||||
|
decorators: [
|
||||||
|
(storyFn: PartialStoryFn, context: StoryContext) =>
|
||||||
|
storyFn({ component: globalThis.Components.Pre, args: { object: context.args } }),
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
export const DisableTable = {
|
||||||
|
args: { a: 'a', b: 'b' },
|
||||||
|
argTypes: {
|
||||||
|
b: { table: { disable: true } },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const DisableControl = {
|
||||||
|
args: { a: 'a', b: 'b' },
|
||||||
|
b: { control: { disable: true } },
|
||||||
|
};
|
||||||
47
code/addons/controls/template/stories/filters.stories.ts
Normal file
47
code/addons/controls/template/stories/filters.stories.ts
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
import globalThis from 'global';
|
||||||
|
import { PartialStoryFn, StoryContext } from '@storybook/csf';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
component: null,
|
||||||
|
decorators: [
|
||||||
|
(storyFn: PartialStoryFn, context: StoryContext) =>
|
||||||
|
storyFn({ component: globalThis.Components.Pre, args: { object: context.args } }),
|
||||||
|
],
|
||||||
|
args: {
|
||||||
|
helloWorld: 1,
|
||||||
|
helloPlanet: 1,
|
||||||
|
byeWorld: 1,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const IncludeList = {
|
||||||
|
parameters: {
|
||||||
|
controls: {
|
||||||
|
include: ['helloWorld'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const IncludeRegex = {
|
||||||
|
parameters: {
|
||||||
|
controls: {
|
||||||
|
include: /hello*/,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ExcludeList = {
|
||||||
|
parameters: {
|
||||||
|
controls: {
|
||||||
|
exclude: ['helloPlanet', 'helloWorld'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ExcludeRegex = {
|
||||||
|
parameters: {
|
||||||
|
controls: {
|
||||||
|
exclude: /hello*/,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
16
code/addons/controls/template/stories/issues.stories.ts
Normal file
16
code/addons/controls/template/stories/issues.stories.ts
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import globalThis from 'global';
|
||||||
|
import { PartialStoryFn, StoryContext } from '@storybook/csf';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
component: null,
|
||||||
|
decorators: [
|
||||||
|
(storyFn: PartialStoryFn, context: StoryContext) =>
|
||||||
|
storyFn({ component: globalThis.Components.Pre, args: { object: context.args } }),
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
// https://github.com/storybookjs/storybook/issues/14752
|
||||||
|
export const MissingRadioOptions = {
|
||||||
|
argTypes: { invalidRadio: { control: 'radio' } },
|
||||||
|
args: { invalidRadio: 'someValue' },
|
||||||
|
};
|
||||||
39
code/addons/controls/template/stories/matchers.stories.ts
Normal file
39
code/addons/controls/template/stories/matchers.stories.ts
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
import globalThis from 'global';
|
||||||
|
import { PartialStoryFn, StoryContext } from '@storybook/csf';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
component: null,
|
||||||
|
decorators: [
|
||||||
|
(storyFn: PartialStoryFn, context: StoryContext) =>
|
||||||
|
storyFn({ component: globalThis.Components.Pre, args: { object: context.args } }),
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
export const CustomMatchers = {
|
||||||
|
parameters: {
|
||||||
|
controls: {
|
||||||
|
matchers: {
|
||||||
|
date: /whateverIwant/,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
docs: { source: { state: 'open' } },
|
||||||
|
},
|
||||||
|
args: {
|
||||||
|
whateverIwant: '10/10/2020',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const DisabledMatchers = {
|
||||||
|
parameters: {
|
||||||
|
controls: {
|
||||||
|
matchers: {
|
||||||
|
date: null,
|
||||||
|
color: null,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
args: {
|
||||||
|
purchaseDate: '10/10/2020',
|
||||||
|
backgroundColor: '#BADA55',
|
||||||
|
},
|
||||||
|
};
|
||||||
33
code/addons/controls/template/stories/sorting.stories.ts
Normal file
33
code/addons/controls/template/stories/sorting.stories.ts
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
import globalThis from 'global';
|
||||||
|
import { PartialStoryFn, StoryContext } from '@storybook/csf';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
component: null,
|
||||||
|
decorators: [
|
||||||
|
(storyFn: PartialStoryFn, context: StoryContext) =>
|
||||||
|
storyFn({ component: globalThis.Components.Pre, args: { object: context.args } }),
|
||||||
|
],
|
||||||
|
argTypes: {
|
||||||
|
x: { type: { required: true } },
|
||||||
|
y: { type: { required: true }, table: { category: 'foo' } },
|
||||||
|
z: {},
|
||||||
|
a: { type: { required: true } },
|
||||||
|
b: { table: { category: 'foo' } },
|
||||||
|
c: {},
|
||||||
|
},
|
||||||
|
args: {
|
||||||
|
x: 'x',
|
||||||
|
y: 'y',
|
||||||
|
z: 'z',
|
||||||
|
a: 'a',
|
||||||
|
b: 'b',
|
||||||
|
c: 'c',
|
||||||
|
},
|
||||||
|
parameters: { chromatic: { disable: true } },
|
||||||
|
};
|
||||||
|
|
||||||
|
export const None = { parameters: { controls: { sort: 'none' } } };
|
||||||
|
|
||||||
|
export const Alpha = { parameters: { controls: { sort: 'alpha' } } };
|
||||||
|
|
||||||
|
export const RequiredFirst = { parameters: { controls: { sort: 'requiredFirst' } } };
|
||||||
2
code/addons/docs/angular/index.js
vendored
2
code/addons/docs/angular/index.js
vendored
@ -2,6 +2,6 @@
|
|||||||
/* global window */
|
/* global window */
|
||||||
|
|
||||||
export const setCompodocJson = (compodocJson) => {
|
export const setCompodocJson = (compodocJson) => {
|
||||||
// @ts-ignore
|
// @ts-expect-error (Converted from ts-ignore)
|
||||||
window.__STORYBOOK_COMPODOC_JSON__ = compodocJson;
|
window.__STORYBOOK_COMPODOC_JSON__ = compodocJson;
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@storybook/addon-docs",
|
"name": "@storybook/addon-docs",
|
||||||
"version": "7.0.0-alpha.31",
|
"version": "7.0.0-alpha.33",
|
||||||
"description": "Document component usage and properties in Markdown",
|
"description": "Document component usage and properties in Markdown",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"addon",
|
"addon",
|
||||||
@ -53,22 +53,22 @@
|
|||||||
"@babel/preset-env": "^7.12.11",
|
"@babel/preset-env": "^7.12.11",
|
||||||
"@jest/transform": "^26.6.2",
|
"@jest/transform": "^26.6.2",
|
||||||
"@mdx-js/react": "^1.6.22",
|
"@mdx-js/react": "^1.6.22",
|
||||||
"@storybook/addons": "7.0.0-alpha.31",
|
"@storybook/addons": "7.0.0-alpha.33",
|
||||||
"@storybook/api": "7.0.0-alpha.31",
|
"@storybook/api": "7.0.0-alpha.33",
|
||||||
"@storybook/blocks": "7.0.0-alpha.31",
|
"@storybook/blocks": "7.0.0-alpha.33",
|
||||||
"@storybook/components": "7.0.0-alpha.31",
|
"@storybook/components": "7.0.0-alpha.33",
|
||||||
"@storybook/core-common": "7.0.0-alpha.31",
|
"@storybook/core-common": "7.0.0-alpha.33",
|
||||||
"@storybook/core-events": "7.0.0-alpha.31",
|
"@storybook/core-events": "7.0.0-alpha.33",
|
||||||
"@storybook/csf": "0.0.2--canary.0899bb7.0",
|
"@storybook/csf": "0.0.2--canary.0899bb7.0",
|
||||||
"@storybook/csf-tools": "7.0.0-alpha.31",
|
"@storybook/csf-tools": "7.0.0-alpha.33",
|
||||||
"@storybook/docs-tools": "7.0.0-alpha.31",
|
"@storybook/docs-tools": "7.0.0-alpha.33",
|
||||||
"@storybook/mdx1-csf": "0.0.5-canary.13.9ce928a.0",
|
"@storybook/mdx1-csf": "0.0.5-canary.13.9ce928a.0",
|
||||||
"@storybook/node-logger": "7.0.0-alpha.31",
|
"@storybook/node-logger": "7.0.0-alpha.33",
|
||||||
"@storybook/postinstall": "7.0.0-alpha.31",
|
"@storybook/postinstall": "7.0.0-alpha.33",
|
||||||
"@storybook/preview-web": "7.0.0-alpha.31",
|
"@storybook/preview-web": "7.0.0-alpha.33",
|
||||||
"@storybook/source-loader": "7.0.0-alpha.31",
|
"@storybook/source-loader": "7.0.0-alpha.33",
|
||||||
"@storybook/store": "7.0.0-alpha.31",
|
"@storybook/store": "7.0.0-alpha.33",
|
||||||
"@storybook/theming": "7.0.0-alpha.31",
|
"@storybook/theming": "7.0.0-alpha.33",
|
||||||
"babel-loader": "^8.2.5",
|
"babel-loader": "^8.2.5",
|
||||||
"dequal": "^2.0.2",
|
"dequal": "^2.0.2",
|
||||||
"global": "^4.4.0",
|
"global": "^4.4.0",
|
||||||
@ -103,7 +103,7 @@
|
|||||||
"publishConfig": {
|
"publishConfig": {
|
||||||
"access": "public"
|
"access": "public"
|
||||||
},
|
},
|
||||||
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
|
"gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
|
||||||
"storybook": {
|
"storybook": {
|
||||||
"displayName": "Docs",
|
"displayName": "Docs",
|
||||||
"icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",
|
"icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",
|
||||||
|
|||||||
@ -145,7 +145,7 @@ export async function webpack(
|
|||||||
export const storyIndexers = async (indexers: StoryIndexer[] | null) => {
|
export const storyIndexers = async (indexers: StoryIndexer[] | null) => {
|
||||||
const mdxIndexer = async (fileName: string, opts: IndexerOptions) => {
|
const mdxIndexer = async (fileName: string, opts: IndexerOptions) => {
|
||||||
let code = (await fs.readFile(fileName, 'utf-8')).toString();
|
let code = (await fs.readFile(fileName, 'utf-8')).toString();
|
||||||
// @ts-ignore
|
// @ts-expect-error (Converted from ts-ignore)
|
||||||
const { compile } = global.FEATURES?.previewMdx2
|
const { compile } = global.FEATURES?.previewMdx2
|
||||||
? await import('@storybook/mdx2-csf')
|
? await import('@storybook/mdx2-csf')
|
||||||
: await import('@storybook/mdx1-csf');
|
: await import('@storybook/mdx1-csf');
|
||||||
|
|||||||
20
code/addons/docs/template/stories/docspage/basic.stories.ts
vendored
Normal file
20
code/addons/docs/template/stories/docspage/basic.stories.ts
vendored
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
import globalThis from 'global';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
component: globalThis.Components.Button,
|
||||||
|
args: { children: 'Click Me!' },
|
||||||
|
parameters: { chromatic: { disable: true } },
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Basic = {
|
||||||
|
args: { children: 'Basic' },
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Disabled = {
|
||||||
|
args: { children: 'Disabled in DocsPage' },
|
||||||
|
parameters: { docs: { disable: true } },
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Another = {
|
||||||
|
args: { children: 'Another' },
|
||||||
|
};
|
||||||
30
code/addons/docs/template/stories/docspage/description.stories.ts
vendored
Normal file
30
code/addons/docs/template/stories/docspage/description.stories.ts
vendored
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import globalThis from 'global';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
component: globalThis.Components.Button,
|
||||||
|
// FIXME: remove array subcomponents in 7.0?
|
||||||
|
subcomponents: {
|
||||||
|
Pre: globalThis.Components.Pre,
|
||||||
|
},
|
||||||
|
args: { children: 'Click Me!' },
|
||||||
|
parameters: {
|
||||||
|
docs: {
|
||||||
|
description: {
|
||||||
|
component: '**Component** description',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
chromatic: { disable: true },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Basic = {};
|
||||||
|
|
||||||
|
export const CustomDescription = {
|
||||||
|
parameters: {
|
||||||
|
docs: {
|
||||||
|
description: {
|
||||||
|
story: '**Story** description',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
17
code/addons/docs/template/stories/docspage/extract-description.stories.ts
vendored
Normal file
17
code/addons/docs/template/stories/docspage/extract-description.stories.ts
vendored
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import globalThis from 'global';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
component: globalThis.Components.Button,
|
||||||
|
args: { children: 'Click Me!' },
|
||||||
|
parameters: {
|
||||||
|
docs: {
|
||||||
|
// FIXME: this is typically provided by the renderer preset to extract
|
||||||
|
// the description automatically based on docgen info. including here
|
||||||
|
// for documentation purposes only.
|
||||||
|
extractComponentDescription: () => 'component description',
|
||||||
|
},
|
||||||
|
chromatic: { disable: true },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Basic = {};
|
||||||
12
code/addons/docs/template/stories/docspage/overflow.stories.ts
vendored
Normal file
12
code/addons/docs/template/stories/docspage/overflow.stories.ts
vendored
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import globalThis from 'global';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
component: globalThis.Components.Pre,
|
||||||
|
args: {
|
||||||
|
text: 'Demonstrates overflow',
|
||||||
|
style: { width: 2000, height: 500, background: 'hotpink' },
|
||||||
|
},
|
||||||
|
parameters: { chromatic: { disable: true } },
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Basic = {};
|
||||||
25
code/addons/docs/template/stories/docspage/override.stories.ts
vendored
Normal file
25
code/addons/docs/template/stories/docspage/override.stories.ts
vendored
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import globalThis from 'global';
|
||||||
|
|
||||||
|
// FIXME: do this using basic React functions for multi-framework
|
||||||
|
// once sandbox linking is working
|
||||||
|
//
|
||||||
|
// import { createElement } from 'react';
|
||||||
|
// import { Title, Primary } from '@storybook/addon-docs';
|
||||||
|
//
|
||||||
|
// const Override = () =>
|
||||||
|
// createElement('div', { style: { border: '10px solid green', padding: '100px' } }, [
|
||||||
|
// createElement(Title),
|
||||||
|
// createElement(Primary),
|
||||||
|
// ]);
|
||||||
|
const Override = () => 'overridden';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
component: globalThis.Components.Button,
|
||||||
|
args: { children: 'Click Me!' },
|
||||||
|
parameters: {
|
||||||
|
chromatic: { disable: true },
|
||||||
|
docs: { page: Override },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Basic = {};
|
||||||
43
code/addons/docs/template/stories/docspage/source.stories.ts
vendored
Normal file
43
code/addons/docs/template/stories/docspage/source.stories.ts
vendored
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
import globalThis from 'global';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
component: globalThis.Components.Button,
|
||||||
|
args: { children: 'Click Me!' },
|
||||||
|
parameters: { chromatic: { disable: true } },
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Auto = {};
|
||||||
|
|
||||||
|
export const Disabled = {
|
||||||
|
parameters: {
|
||||||
|
docs: {
|
||||||
|
source: { code: null },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Code = {
|
||||||
|
parameters: {
|
||||||
|
docs: {
|
||||||
|
source: { type: 'code' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Custom = {
|
||||||
|
parameters: {
|
||||||
|
docs: {
|
||||||
|
source: { code: 'custom source' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Transform = {
|
||||||
|
parameters: {
|
||||||
|
docs: {
|
||||||
|
transformSource(src: string) {
|
||||||
|
return `// We transformed this!\nconst example = (\n${src}\n);`;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@storybook/addon-essentials",
|
"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",
|
"description": "Curated addons to bring out the best of Storybook",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"addon",
|
"addon",
|
||||||
@ -33,24 +33,24 @@
|
|||||||
"prep": "node ../../../scripts/prepare.js"
|
"prep": "node ../../../scripts/prepare.js"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@storybook/addon-actions": "7.0.0-alpha.31",
|
"@storybook/addon-actions": "7.0.0-alpha.33",
|
||||||
"@storybook/addon-backgrounds": "7.0.0-alpha.31",
|
"@storybook/addon-backgrounds": "7.0.0-alpha.33",
|
||||||
"@storybook/addon-controls": "7.0.0-alpha.31",
|
"@storybook/addon-controls": "7.0.0-alpha.33",
|
||||||
"@storybook/addon-docs": "7.0.0-alpha.31",
|
"@storybook/addon-docs": "7.0.0-alpha.33",
|
||||||
"@storybook/addon-highlight": "7.0.0-alpha.31",
|
"@storybook/addon-highlight": "7.0.0-alpha.33",
|
||||||
"@storybook/addon-measure": "7.0.0-alpha.31",
|
"@storybook/addon-measure": "7.0.0-alpha.33",
|
||||||
"@storybook/addon-outline": "7.0.0-alpha.31",
|
"@storybook/addon-outline": "7.0.0-alpha.33",
|
||||||
"@storybook/addon-toolbars": "7.0.0-alpha.31",
|
"@storybook/addon-toolbars": "7.0.0-alpha.33",
|
||||||
"@storybook/addon-viewport": "7.0.0-alpha.31",
|
"@storybook/addon-viewport": "7.0.0-alpha.33",
|
||||||
"@storybook/addons": "7.0.0-alpha.31",
|
"@storybook/addons": "7.0.0-alpha.33",
|
||||||
"@storybook/api": "7.0.0-alpha.31",
|
"@storybook/api": "7.0.0-alpha.33",
|
||||||
"@storybook/core-common": "7.0.0-alpha.31",
|
"@storybook/core-common": "7.0.0-alpha.33",
|
||||||
"@storybook/node-logger": "7.0.0-alpha.31",
|
"@storybook/node-logger": "7.0.0-alpha.33",
|
||||||
"ts-dedent": "^2.0.0"
|
"ts-dedent": "^2.0.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.12.10",
|
"@babel/core": "^7.12.10",
|
||||||
"@storybook/vue": "7.0.0-alpha.31",
|
"@storybook/vue": "7.0.0-alpha.33",
|
||||||
"@types/jest": "^26.0.16",
|
"@types/jest": "^26.0.16",
|
||||||
"typescript": "~4.6.3"
|
"typescript": "~4.6.3"
|
||||||
},
|
},
|
||||||
@ -98,5 +98,5 @@
|
|||||||
"publishConfig": {
|
"publishConfig": {
|
||||||
"access": "public"
|
"access": "public"
|
||||||
},
|
},
|
||||||
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f"
|
"gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@storybook/addon-highlight",
|
"name": "@storybook/addon-highlight",
|
||||||
"version": "7.0.0-alpha.31",
|
"version": "7.0.0-alpha.33",
|
||||||
"description": "Highlight DOM nodes within your stories",
|
"description": "Highlight DOM nodes within your stories",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"storybook-addons",
|
"storybook-addons",
|
||||||
@ -37,8 +37,8 @@
|
|||||||
"prep": "node ../../../scripts/prepare.js"
|
"prep": "node ../../../scripts/prepare.js"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@storybook/addons": "7.0.0-alpha.31",
|
"@storybook/addons": "7.0.0-alpha.33",
|
||||||
"@storybook/core-events": "7.0.0-alpha.31",
|
"@storybook/core-events": "7.0.0-alpha.33",
|
||||||
"global": "^4.4.0"
|
"global": "^4.4.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
@ -48,7 +48,7 @@
|
|||||||
"publishConfig": {
|
"publishConfig": {
|
||||||
"access": "public"
|
"access": "public"
|
||||||
},
|
},
|
||||||
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
|
"gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
|
||||||
"sbmodern": "dist/modern/index.js",
|
"sbmodern": "dist/modern/index.js",
|
||||||
"storybook": {
|
"storybook": {
|
||||||
"displayName": "Highlight",
|
"displayName": "Highlight",
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
import './dist/esm/manager';
|
import './dist/manager';
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@storybook/addon-interactions",
|
"name": "@storybook/addon-interactions",
|
||||||
"version": "7.0.0-alpha.31",
|
"version": "7.0.0-alpha.33",
|
||||||
"description": "Automate, test and debug user interactions",
|
"description": "Automate, test and debug user interactions",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"storybook-addons",
|
"storybook-addons",
|
||||||
@ -21,9 +21,32 @@
|
|||||||
"url": "https://opencollective.com/storybook"
|
"url": "https://opencollective.com/storybook"
|
||||||
},
|
},
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"main": "dist/cjs/index.js",
|
"exports": {
|
||||||
"module": "dist/esm/index.js",
|
".": {
|
||||||
"types": "dist/types/index.d.ts",
|
"require": "./dist/index.js",
|
||||||
|
"import": "./dist/index.mjs",
|
||||||
|
"types": "./dist/index.d.ts"
|
||||||
|
},
|
||||||
|
"./manager": {
|
||||||
|
"require": "./dist/manager.js",
|
||||||
|
"import": "./dist/manager.mjs",
|
||||||
|
"types": "./dist/manager.d.ts"
|
||||||
|
},
|
||||||
|
"./preview": {
|
||||||
|
"require": "./dist/preset/preview.js",
|
||||||
|
"import": "./dist/preset/preview.mjs",
|
||||||
|
"types": "./dist/preset/preview.d.ts"
|
||||||
|
},
|
||||||
|
"./register.js": {
|
||||||
|
"require": "./dist/manager.js",
|
||||||
|
"import": "./dist/manager.mjs",
|
||||||
|
"types": "./dist/manager.d.ts"
|
||||||
|
},
|
||||||
|
"./package.json": "./package.json"
|
||||||
|
},
|
||||||
|
"main": "dist/index.js",
|
||||||
|
"module": "dist/index.mjs",
|
||||||
|
"types": "dist/index.d.ts",
|
||||||
"files": [
|
"files": [
|
||||||
"dist/**/*",
|
"dist/**/*",
|
||||||
"README.md",
|
"README.md",
|
||||||
@ -32,20 +55,19 @@
|
|||||||
],
|
],
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"check": "tsc --noEmit",
|
"check": "tsc --noEmit",
|
||||||
"prep": "node ../../../scripts/prepare.js"
|
"prep": "../../../scripts/prepare/bundle.ts"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@devtools-ds/object-inspector": "^1.1.2",
|
"@devtools-ds/object-inspector": "^1.1.2",
|
||||||
"@storybook/addons": "7.0.0-alpha.31",
|
"@storybook/addons": "7.0.0-alpha.33",
|
||||||
"@storybook/api": "7.0.0-alpha.31",
|
"@storybook/api": "7.0.0-alpha.33",
|
||||||
"@storybook/client-logger": "7.0.0-alpha.31",
|
"@storybook/client-logger": "7.0.0-alpha.33",
|
||||||
"@storybook/components": "7.0.0-alpha.31",
|
"@storybook/components": "7.0.0-alpha.33",
|
||||||
"@storybook/core-common": "7.0.0-alpha.31",
|
"@storybook/core-common": "7.0.0-alpha.33",
|
||||||
"@storybook/core-events": "7.0.0-alpha.31",
|
"@storybook/core-events": "7.0.0-alpha.33",
|
||||||
"@storybook/csf": "0.0.2--canary.0899bb7.0",
|
"@storybook/csf": "0.0.2--canary.0899bb7.0",
|
||||||
"@storybook/instrumenter": "7.0.0-alpha.31",
|
"@storybook/instrumenter": "7.0.0-alpha.33",
|
||||||
"@storybook/theming": "7.0.0-alpha.31",
|
"@storybook/theming": "7.0.0-alpha.33",
|
||||||
"core-js": "^3.8.2",
|
|
||||||
"global": "^4.4.0",
|
"global": "^4.4.0",
|
||||||
"jest-mock": "^27.0.6",
|
"jest-mock": "^27.0.6",
|
||||||
"polished": "^4.2.2",
|
"polished": "^4.2.2",
|
||||||
@ -72,7 +94,14 @@
|
|||||||
"publishConfig": {
|
"publishConfig": {
|
||||||
"access": "public"
|
"access": "public"
|
||||||
},
|
},
|
||||||
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
|
"bundler": {
|
||||||
|
"entries": [
|
||||||
|
"./src/index.ts",
|
||||||
|
"./src/manager.tsx",
|
||||||
|
"./src/preset/preview.ts"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
|
||||||
"storybook": {
|
"storybook": {
|
||||||
"displayName": "Interactions",
|
"displayName": "Interactions",
|
||||||
"unsupportedFrameworks": [
|
"unsupportedFrameworks": [
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
export * from './dist/esm/preset/preview';
|
export * from './dist/preset/preview';
|
||||||
|
|||||||
@ -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>
|
|
||||||
@ -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'));
|
|
||||||
});
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@ -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,
|
|
||||||
}));
|
|
||||||
@ -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 }),
|
|
||||||
])
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
@ -59,3 +59,7 @@ export const { step: runStep } = instrument(
|
|||||||
{ step: (label: StepLabel, play: PlayFunction, context: PlayFunctionContext) => play(context) },
|
{ step: (label: StepLabel, play: PlayFunction, context: PlayFunctionContext) => play(context) },
|
||||||
{ intercept: true }
|
{ intercept: true }
|
||||||
);
|
);
|
||||||
|
|
||||||
|
export const parameters = {
|
||||||
|
throwPlayFunctionExceptions: false,
|
||||||
|
};
|
||||||
|
|||||||
89
code/addons/interactions/template/stories/basics.stories.ts
Normal file
89
code/addons/interactions/template/stories/basics.stories.ts
Normal 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();
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@storybook/addon-jest",
|
"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",
|
"description": "React storybook addon that show component jest report",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"addon",
|
"addon",
|
||||||
@ -59,12 +59,12 @@
|
|||||||
"prep": "../../../scripts/prepare/bundle.ts"
|
"prep": "../../../scripts/prepare/bundle.ts"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@storybook/addons": "7.0.0-alpha.31",
|
"@storybook/addons": "7.0.0-alpha.33",
|
||||||
"@storybook/api": "7.0.0-alpha.31",
|
"@storybook/api": "7.0.0-alpha.33",
|
||||||
"@storybook/client-logger": "7.0.0-alpha.31",
|
"@storybook/client-logger": "7.0.0-alpha.33",
|
||||||
"@storybook/components": "7.0.0-alpha.31",
|
"@storybook/components": "7.0.0-alpha.33",
|
||||||
"@storybook/core-events": "7.0.0-alpha.31",
|
"@storybook/core-events": "7.0.0-alpha.33",
|
||||||
"@storybook/theming": "7.0.0-alpha.31",
|
"@storybook/theming": "7.0.0-alpha.33",
|
||||||
"global": "^4.4.0",
|
"global": "^4.4.0",
|
||||||
"react-sizeme": "^3.0.1",
|
"react-sizeme": "^3.0.1",
|
||||||
"upath": "^1.2.0"
|
"upath": "^1.2.0"
|
||||||
@ -94,7 +94,7 @@
|
|||||||
],
|
],
|
||||||
"platform": "browser"
|
"platform": "browser"
|
||||||
},
|
},
|
||||||
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
|
"gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
|
||||||
"storybook": {
|
"storybook": {
|
||||||
"displayName": "Jest",
|
"displayName": "Jest",
|
||||||
"icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg",
|
"icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg",
|
||||||
|
|||||||
@ -27,7 +27,7 @@ describe('defineJestParameter', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
test('returns null if filename is a module ID that cannot be inferred from', () => {
|
test('returns null if filename is a module ID that cannot be inferred from', () => {
|
||||||
// @ts-ignore
|
// @ts-expect-error (Converted from ts-ignore)
|
||||||
expect(defineJestParameter({ fileName: 1234 })).toBeNull();
|
expect(defineJestParameter({ fileName: 1234 })).toBeNull();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@storybook/addon-links",
|
"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",
|
"description": "Link stories together to build demos and prototypes with your UI components",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"addon",
|
"addon",
|
||||||
@ -63,11 +63,11 @@
|
|||||||
"prep": "../../../scripts/prepare/bundle.ts"
|
"prep": "../../../scripts/prepare/bundle.ts"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@storybook/addons": "7.0.0-alpha.31",
|
"@storybook/addons": "7.0.0-alpha.33",
|
||||||
"@storybook/client-logger": "7.0.0-alpha.31",
|
"@storybook/client-logger": "7.0.0-alpha.33",
|
||||||
"@storybook/core-events": "7.0.0-alpha.31",
|
"@storybook/core-events": "7.0.0-alpha.33",
|
||||||
"@storybook/csf": "0.0.2--canary.0899bb7.0",
|
"@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",
|
"global": "^4.4.0",
|
||||||
"prop-types": "^15.7.2",
|
"prop-types": "^15.7.2",
|
||||||
"ts-dedent": "^2.0.0"
|
"ts-dedent": "^2.0.0"
|
||||||
@ -98,7 +98,7 @@
|
|||||||
"./src/react/index.ts"
|
"./src/react/index.ts"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
|
"gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
|
||||||
"storybook": {
|
"storybook": {
|
||||||
"displayName": "Links",
|
"displayName": "Links",
|
||||||
"icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png",
|
"icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png",
|
||||||
|
|||||||
@ -14,7 +14,7 @@ jest.mock('global', () => ({
|
|||||||
search: 'search',
|
search: 'search',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// @ts-ignore
|
// @ts-expect-error (Converted from ts-ignore)
|
||||||
window: global,
|
window: global,
|
||||||
__STORYBOOK_STORY_STORE__: {
|
__STORYBOOK_STORY_STORE__: {
|
||||||
getSelection: jest.fn(() => ({ id: 1 })),
|
getSelection: jest.fn(() => ({ id: 1 })),
|
||||||
|
|||||||
@ -5,9 +5,9 @@ import { linkTo, hrefTo } from './utils';
|
|||||||
|
|
||||||
jest.mock('@storybook/addons');
|
jest.mock('@storybook/addons');
|
||||||
jest.mock('global', () => ({
|
jest.mock('global', () => ({
|
||||||
// @ts-ignore
|
// @ts-expect-error (Converted from ts-ignore)
|
||||||
document: global.document,
|
document: global.document,
|
||||||
// @ts-ignore
|
// @ts-expect-error (Converted from ts-ignore)
|
||||||
window: global,
|
window: global,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
|||||||
@ -36,9 +36,9 @@ export const hrefTo = (title: ComponentTitle, name: StoryName): Promise<string>
|
|||||||
return new Promise((resolve) => {
|
return new Promise((resolve) => {
|
||||||
const { location } = document;
|
const { location } = document;
|
||||||
const query = parseQuery(location.search);
|
const query = parseQuery(location.search);
|
||||||
// @ts-ignore
|
// @ts-expect-error (Converted from ts-ignore)
|
||||||
const existingId = [].concat(query.id)[0];
|
const existingId = [].concat(query.id)[0];
|
||||||
// @ts-ignore
|
// @ts-expect-error (Converted from ts-ignore)
|
||||||
const titleToLink = title || existingId.split('--', 2)[0];
|
const titleToLink = title || existingId.split('--', 2)[0];
|
||||||
const id = toId(titleToLink, name);
|
const id = toId(titleToLink, name);
|
||||||
const url = `${location.origin + location.pathname}?${Object.entries({ ...query, id })
|
const url = `${location.origin + location.pathname}?${Object.entries({ ...query, id })
|
||||||
|
|||||||
38
code/addons/links/template/stories/decorator.stories.ts
Normal file
38
code/addons/links/template/stories/decorator.stories.ts
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
import globalThis from 'global';
|
||||||
|
import { withLinks } from '@storybook/addon-links';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
component: globalThis.Components.Html,
|
||||||
|
parameters: {
|
||||||
|
chromatic: { disable: true },
|
||||||
|
},
|
||||||
|
decorators: [withLinks],
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Basic = {
|
||||||
|
args: {
|
||||||
|
content: `
|
||||||
|
<div>
|
||||||
|
<a class="link" href="#" data-sb-story="basic">go to basic</a>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
export const Other = {
|
||||||
|
args: {
|
||||||
|
content: `
|
||||||
|
<div>
|
||||||
|
<a class="link" href="#" data-sb-story="basic">to to basic</a>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
export const Third = {
|
||||||
|
args: {
|
||||||
|
content: `
|
||||||
|
<div>
|
||||||
|
<a class="link" href="#" data-sb-story="other">go to other</a>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
},
|
||||||
|
};
|
||||||
44
code/addons/links/template/stories/linkto.stories.ts
Normal file
44
code/addons/links/template/stories/linkto.stories.ts
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
import globalThis from 'global';
|
||||||
|
import { linkTo } from '@storybook/addon-links';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
component: globalThis.Components.Button,
|
||||||
|
args: {
|
||||||
|
children: 'Click Me!',
|
||||||
|
},
|
||||||
|
parameters: {
|
||||||
|
chromatic: { disable: true },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ID = {
|
||||||
|
args: {
|
||||||
|
onClick: linkTo('addons-links-parameters--basic'),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
export const Title = {
|
||||||
|
args: {
|
||||||
|
onClick: linkTo('addons-links-parameters'),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
export const Basic = {
|
||||||
|
args: {
|
||||||
|
onClick: linkTo('addons-links-parameters', 'basic'),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
export const Other = {
|
||||||
|
args: {
|
||||||
|
onClick: linkTo('addons-links-parameters', 'basic'),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
export const Third = {
|
||||||
|
args: {
|
||||||
|
onClick: linkTo('addons-links-parameters', 'other'),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Callback = {
|
||||||
|
args: {
|
||||||
|
onClick: linkTo('addons-links-parameters', (event: Event) => 'basic'),
|
||||||
|
},
|
||||||
|
};
|
||||||
41
code/addons/links/template/stories/scroll.stories.ts
Normal file
41
code/addons/links/template/stories/scroll.stories.ts
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
import globalThis from 'global';
|
||||||
|
import { withLinks } from '@storybook/addon-links';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
component: globalThis.Components.Html,
|
||||||
|
parameters: {
|
||||||
|
chromatic: { disable: true },
|
||||||
|
},
|
||||||
|
decorators: [withLinks],
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Basic = {
|
||||||
|
args: {
|
||||||
|
content: `
|
||||||
|
<div>
|
||||||
|
<div style="marginBottom:100vh"></div>
|
||||||
|
<a class="link" href="#" data-sb-story="basic">go to basic</a>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
export const Other = {
|
||||||
|
args: {
|
||||||
|
content: `
|
||||||
|
<div>
|
||||||
|
<div style="marginBottom:100vh"></div>
|
||||||
|
<a class="link" href="#" data-sb-story="basic">to to basic</a>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
export const Third = {
|
||||||
|
args: {
|
||||||
|
content: `
|
||||||
|
<div>
|
||||||
|
<div style="marginBottom:100vh"></div>
|
||||||
|
<a class="link" href="#" data-sb-story="other">go to other</a>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@storybook/addon-measure",
|
"name": "@storybook/addon-measure",
|
||||||
"version": "7.0.0-alpha.31",
|
"version": "7.0.0-alpha.33",
|
||||||
"description": "Inspect layouts by visualizing the box model",
|
"description": "Inspect layouts by visualizing the box model",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"storybook-addons",
|
"storybook-addons",
|
||||||
@ -61,11 +61,11 @@
|
|||||||
"prep": "../../../scripts/prepare/bundle.ts"
|
"prep": "../../../scripts/prepare/bundle.ts"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@storybook/addons": "7.0.0-alpha.31",
|
"@storybook/addons": "7.0.0-alpha.33",
|
||||||
"@storybook/api": "7.0.0-alpha.31",
|
"@storybook/api": "7.0.0-alpha.33",
|
||||||
"@storybook/client-logger": "7.0.0-alpha.31",
|
"@storybook/client-logger": "7.0.0-alpha.33",
|
||||||
"@storybook/components": "7.0.0-alpha.31",
|
"@storybook/components": "7.0.0-alpha.33",
|
||||||
"@storybook/core-events": "7.0.0-alpha.31",
|
"@storybook/core-events": "7.0.0-alpha.33",
|
||||||
"@storybook/csf": "0.0.2--canary.0899bb7.0",
|
"@storybook/csf": "0.0.2--canary.0899bb7.0",
|
||||||
"global": "^4.4.0"
|
"global": "^4.4.0"
|
||||||
},
|
},
|
||||||
@ -94,7 +94,7 @@
|
|||||||
"./src/preview.tsx"
|
"./src/preview.tsx"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
|
"gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
|
||||||
"storybook": {
|
"storybook": {
|
||||||
"displayName": "Measure",
|
"displayName": "Measure",
|
||||||
"unsupportedFrameworks": [
|
"unsupportedFrameworks": [
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@storybook/addon-outline",
|
"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",
|
"description": "Outline all elements with CSS to help with layout placement and alignment",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"storybook-addons",
|
"storybook-addons",
|
||||||
@ -64,11 +64,11 @@
|
|||||||
"prep": "../../../scripts/prepare/bundle.ts"
|
"prep": "../../../scripts/prepare/bundle.ts"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@storybook/addons": "7.0.0-alpha.31",
|
"@storybook/addons": "7.0.0-alpha.33",
|
||||||
"@storybook/api": "7.0.0-alpha.31",
|
"@storybook/api": "7.0.0-alpha.33",
|
||||||
"@storybook/client-logger": "7.0.0-alpha.31",
|
"@storybook/client-logger": "7.0.0-alpha.33",
|
||||||
"@storybook/components": "7.0.0-alpha.31",
|
"@storybook/components": "7.0.0-alpha.33",
|
||||||
"@storybook/core-events": "7.0.0-alpha.31",
|
"@storybook/core-events": "7.0.0-alpha.33",
|
||||||
"@storybook/csf": "0.0.2--canary.0899bb7.0",
|
"@storybook/csf": "0.0.2--canary.0899bb7.0",
|
||||||
"global": "^4.4.0",
|
"global": "^4.4.0",
|
||||||
"ts-dedent": "^2.0.0"
|
"ts-dedent": "^2.0.0"
|
||||||
@ -98,7 +98,7 @@
|
|||||||
"./src/preset/preview.tsx"
|
"./src/preset/preview.tsx"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
|
"gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
|
||||||
"storybook": {
|
"storybook": {
|
||||||
"displayName": "Outline",
|
"displayName": "Outline",
|
||||||
"unsupportedFrameworks": [
|
"unsupportedFrameworks": [
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@storybook/addon-storyshots",
|
"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",
|
"description": "Take a code snapshot of every story automatically with Jest",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"addon",
|
"addon",
|
||||||
@ -38,12 +38,12 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@jest/transform": "^26.6.2",
|
"@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/babel-plugin-require-context-hook": "1.0.1",
|
||||||
"@storybook/client-api": "7.0.0-alpha.31",
|
"@storybook/client-api": "7.0.0-alpha.33",
|
||||||
"@storybook/core-client": "7.0.0-alpha.31",
|
"@storybook/core-client": "7.0.0-alpha.33",
|
||||||
"@storybook/core-common": "7.0.0-alpha.31",
|
"@storybook/core-common": "7.0.0-alpha.33",
|
||||||
"@storybook/core-webpack": "7.0.0-alpha.31",
|
"@storybook/core-webpack": "7.0.0-alpha.33",
|
||||||
"@storybook/csf": "0.0.2--canary.0899bb7.0",
|
"@storybook/csf": "0.0.2--canary.0899bb7.0",
|
||||||
"@types/glob": "^7.1.3",
|
"@types/glob": "^7.1.3",
|
||||||
"@types/jest": "^26.0.16",
|
"@types/jest": "^26.0.16",
|
||||||
@ -62,11 +62,11 @@
|
|||||||
"@angular/core": "^13.3.6",
|
"@angular/core": "^13.3.6",
|
||||||
"@angular/platform-browser-dynamic": "^13.3.6",
|
"@angular/platform-browser-dynamic": "^13.3.6",
|
||||||
"@emotion/jest": "^11.8.0",
|
"@emotion/jest": "^11.8.0",
|
||||||
"@storybook/addon-docs": "7.0.0-alpha.31",
|
"@storybook/addon-docs": "7.0.0-alpha.33",
|
||||||
"@storybook/angular": "7.0.0-alpha.31",
|
"@storybook/angular": "7.0.0-alpha.33",
|
||||||
"@storybook/react": "7.0.0-alpha.31",
|
"@storybook/react": "7.0.0-alpha.33",
|
||||||
"@storybook/vue": "7.0.0-alpha.31",
|
"@storybook/vue": "7.0.0-alpha.33",
|
||||||
"@storybook/vue3": "7.0.0-alpha.31",
|
"@storybook/vue3": "7.0.0-alpha.33",
|
||||||
"babel-loader": "^8.2.5",
|
"babel-loader": "^8.2.5",
|
||||||
"enzyme": "^3.11.0",
|
"enzyme": "^3.11.0",
|
||||||
"enzyme-to-json": "^3.6.1",
|
"enzyme-to-json": "^3.6.1",
|
||||||
@ -144,7 +144,7 @@
|
|||||||
"publishConfig": {
|
"publishConfig": {
|
||||||
"access": "public"
|
"access": "public"
|
||||||
},
|
},
|
||||||
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
|
"gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
|
||||||
"storybook": {
|
"storybook": {
|
||||||
"displayName": "Storyshots",
|
"displayName": "Storyshots",
|
||||||
"icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",
|
"icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",
|
||||||
|
|||||||
@ -25,7 +25,6 @@ function getIntegrityOptions({ integrityOptions }: StoryshotsOptions) {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
function ensureOptionsDefaults(options: StoryshotsOptions) {
|
function ensureOptionsDefaults(options: StoryshotsOptions) {
|
||||||
const {
|
const {
|
||||||
suite = 'Storyshots',
|
suite = 'Storyshots',
|
||||||
|
|||||||
@ -52,7 +52,7 @@ function integrityTest(integrityOptions: any, stories2snapsConverter: any) {
|
|||||||
const snapshotExtension = stories2snapsConverter.getSnapshotExtension();
|
const snapshotExtension = stories2snapsConverter.getSnapshotExtension();
|
||||||
const storyshots = glob.sync(`**/*${snapshotExtension}`, integrityOptions);
|
const storyshots = glob.sync(`**/*${snapshotExtension}`, integrityOptions);
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-expect-error (Converted from ts-ignore)
|
||||||
expect(storyshots).notToBeAbandoned(stories2snapsConverter);
|
expect(storyshots).notToBeAbandoned(stories2snapsConverter);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
/* eslint-disable camelcase */
|
/* eslint-disable camelcase */
|
||||||
import global from 'global';
|
import global from 'global';
|
||||||
// @ts-ignore
|
|
||||||
import { set_current_component } from 'svelte/internal';
|
import { set_current_component } from 'svelte/internal';
|
||||||
|
|
||||||
const { document } = global;
|
const { document } = global;
|
||||||
|
|||||||
@ -1,4 +1,3 @@
|
|||||||
// @ts-ignore
|
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
|
|
||||||
// this is defined in @storybook/vue but not exported,
|
// this is defined in @storybook/vue but not exported,
|
||||||
@ -14,7 +13,7 @@ function getRenderedTree(story: any) {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-expect-error (Converted from ts-ignore)
|
||||||
vm[VALUES] = story.initialArgs;
|
vm[VALUES] = story.initialArgs;
|
||||||
|
|
||||||
return vm.$mount().$el;
|
return vm.$mount().$el;
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import { linkTo } from '@storybook/addon-links';
|
|
||||||
import { Welcome } from '../react-demo';
|
import { Welcome } from '../react-demo';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -11,6 +10,6 @@ export default {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
|
export const ToStorybook = () => <Welcome showApp={() => {}} />;
|
||||||
|
|
||||||
ToStorybook.storyName = 'to Storybook';
|
ToStorybook.storyName = 'to Storybook';
|
||||||
|
|||||||
@ -1,4 +1,3 @@
|
|||||||
import { linkTo } from '@storybook/addon-links';
|
|
||||||
import { Welcome } from '../react-demo';
|
import { Welcome } from '../react-demo';
|
||||||
import { Meta, Story } from '@storybook/addon-docs';
|
import { Meta, Story } from '@storybook/addon-docs';
|
||||||
|
|
||||||
@ -10,5 +9,5 @@ import { Meta, Story } from '@storybook/addon-docs';
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<Story name="to Storybook">
|
<Story name="to Storybook">
|
||||||
<Welcome showApp={linkTo('Button')} />
|
<Welcome showApp={() => {}} />
|
||||||
</Story>
|
</Story>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@storybook/addon-storyshots-puppeteer",
|
"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",
|
"description": "Image snapshots addition to StoryShots based on puppeteer",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"addon",
|
"addon",
|
||||||
@ -35,7 +35,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@axe-core/puppeteer": "^4.2.0",
|
"@axe-core/puppeteer": "^4.2.0",
|
||||||
"@storybook/csf": "0.0.2--canary.0899bb7.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",
|
"@types/jest-image-snapshot": "^4.1.3",
|
||||||
"jest-image-snapshot": "^4.3.0"
|
"jest-image-snapshot": "^4.3.0"
|
||||||
},
|
},
|
||||||
@ -44,7 +44,7 @@
|
|||||||
"puppeteer": "^2.0.0 || ^3.0.0"
|
"puppeteer": "^2.0.0 || ^3.0.0"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"@storybook/addon-storyshots": "7.0.0-alpha.31",
|
"@storybook/addon-storyshots": "7.0.0-alpha.33",
|
||||||
"puppeteer": ">=2.0.0"
|
"puppeteer": ">=2.0.0"
|
||||||
},
|
},
|
||||||
"peerDependenciesMeta": {
|
"peerDependenciesMeta": {
|
||||||
@ -55,5 +55,5 @@
|
|||||||
"publishConfig": {
|
"publishConfig": {
|
||||||
"access": "public"
|
"access": "public"
|
||||||
},
|
},
|
||||||
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f"
|
"gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@storybook/addon-storysource",
|
"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",
|
"description": "View a story’s source code to see how it works and paste into your app",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"addon",
|
"addon",
|
||||||
@ -35,13 +35,13 @@
|
|||||||
"prep": "node ../../../scripts/prepare.js"
|
"prep": "node ../../../scripts/prepare.js"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@storybook/addons": "7.0.0-alpha.31",
|
"@storybook/addons": "7.0.0-alpha.33",
|
||||||
"@storybook/api": "7.0.0-alpha.31",
|
"@storybook/api": "7.0.0-alpha.33",
|
||||||
"@storybook/client-logger": "7.0.0-alpha.31",
|
"@storybook/client-logger": "7.0.0-alpha.33",
|
||||||
"@storybook/components": "7.0.0-alpha.31",
|
"@storybook/components": "7.0.0-alpha.33",
|
||||||
"@storybook/router": "7.0.0-alpha.31",
|
"@storybook/router": "7.0.0-alpha.33",
|
||||||
"@storybook/source-loader": "7.0.0-alpha.31",
|
"@storybook/source-loader": "7.0.0-alpha.33",
|
||||||
"@storybook/theming": "7.0.0-alpha.31",
|
"@storybook/theming": "7.0.0-alpha.33",
|
||||||
"estraverse": "^5.2.0",
|
"estraverse": "^5.2.0",
|
||||||
"prop-types": "^15.7.2",
|
"prop-types": "^15.7.2",
|
||||||
"react-syntax-highlighter": "^15.5.0"
|
"react-syntax-highlighter": "^15.5.0"
|
||||||
@ -66,7 +66,7 @@
|
|||||||
"publishConfig": {
|
"publishConfig": {
|
||||||
"access": "public"
|
"access": "public"
|
||||||
},
|
},
|
||||||
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
|
"gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
|
||||||
"storybook": {
|
"storybook": {
|
||||||
"displayName": "Storysource",
|
"displayName": "Storysource",
|
||||||
"icon": "https://user-images.githubusercontent.com/263385/101991675-48cdf300-3c7c-11eb-9400-58de5ac6daa7.png",
|
"icon": "https://user-images.githubusercontent.com/263385/101991675-48cdf300-3c7c-11eb-9400-58de5ac6daa7.png",
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@storybook/addon-toolbars",
|
"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",
|
"description": "Create your own toolbar items that control story rendering",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"addon",
|
"addon",
|
||||||
@ -57,11 +57,11 @@
|
|||||||
"prep": "../../../scripts/prepare/bundle.ts"
|
"prep": "../../../scripts/prepare/bundle.ts"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@storybook/addons": "7.0.0-alpha.31",
|
"@storybook/addons": "7.0.0-alpha.33",
|
||||||
"@storybook/api": "7.0.0-alpha.31",
|
"@storybook/api": "7.0.0-alpha.33",
|
||||||
"@storybook/client-logger": "7.0.0-alpha.31",
|
"@storybook/client-logger": "7.0.0-alpha.33",
|
||||||
"@storybook/components": "7.0.0-alpha.31",
|
"@storybook/components": "7.0.0-alpha.33",
|
||||||
"@storybook/theming": "7.0.0-alpha.31"
|
"@storybook/theming": "7.0.0-alpha.33"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"typescript": "~4.6.3"
|
"typescript": "~4.6.3"
|
||||||
@ -88,7 +88,7 @@
|
|||||||
],
|
],
|
||||||
"platform": "browser"
|
"platform": "browser"
|
||||||
},
|
},
|
||||||
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
|
"gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
|
||||||
"storybook": {
|
"storybook": {
|
||||||
"displayName": "Toolbars",
|
"displayName": "Toolbars",
|
||||||
"icon": "https://user-images.githubusercontent.com/263385/101991677-48cdf300-3c7c-11eb-93b4-19b0e3366959.png",
|
"icon": "https://user-images.githubusercontent.com/263385/101991677-48cdf300-3c7c-11eb-93b4-19b0e3366959.png",
|
||||||
|
|||||||
33
code/addons/toolbars/template/stories/globals.stories.ts
Normal file
33
code/addons/toolbars/template/stories/globals.stories.ts
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
import globalThis from 'global';
|
||||||
|
import { PartialStoryFn, StoryContext } from '@storybook/csf';
|
||||||
|
|
||||||
|
const greetingForLocale = (locale: string) => {
|
||||||
|
switch (locale) {
|
||||||
|
case 'es':
|
||||||
|
return 'Hola!';
|
||||||
|
case 'fr':
|
||||||
|
return 'Bonjour !';
|
||||||
|
case 'zh':
|
||||||
|
return '你好!';
|
||||||
|
case 'kr':
|
||||||
|
return '안녕하세요!';
|
||||||
|
case 'en':
|
||||||
|
default:
|
||||||
|
return 'Hello';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
component: globalThis.Components.Pre,
|
||||||
|
decorators: [
|
||||||
|
(storyFn: PartialStoryFn, { globals }: StoryContext) => {
|
||||||
|
const object = {
|
||||||
|
...globals,
|
||||||
|
caption: `Locale is '${globals.locale}', so I say: ${greetingForLocale(globals.locale)}`,
|
||||||
|
};
|
||||||
|
return storyFn({ args: { object } });
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Basic = {};
|
||||||
44
code/addons/toolbars/template/stories/preview.ts
Normal file
44
code/addons/toolbars/template/stories/preview.ts
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
export const globalTypes = {
|
||||||
|
theme: {
|
||||||
|
name: 'Theme',
|
||||||
|
description: 'Global theme for components',
|
||||||
|
toolbar: {
|
||||||
|
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' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
locale: {
|
||||||
|
name: 'Locale',
|
||||||
|
description: 'Internationalization locale',
|
||||||
|
toolbar: {
|
||||||
|
icon: 'globe',
|
||||||
|
shortcuts: {
|
||||||
|
next: {
|
||||||
|
label: 'Go to next language',
|
||||||
|
keys: ['L'],
|
||||||
|
},
|
||||||
|
previous: {
|
||||||
|
label: 'Go to previous language',
|
||||||
|
keys: ['K'],
|
||||||
|
},
|
||||||
|
reset: {
|
||||||
|
label: 'Reset language',
|
||||||
|
keys: ['meta', 'shift', 'L'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
items: [
|
||||||
|
{ title: 'Reset locale', type: 'reset' },
|
||||||
|
{ value: 'en', right: '🇺🇸', title: 'English' },
|
||||||
|
{ value: 'es', right: '🇪🇸', title: 'Español' },
|
||||||
|
{ value: 'zh', right: '🇨🇳', title: '中文' },
|
||||||
|
{ value: 'kr', right: '🇰🇷', title: '한국어' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@storybook/addon-viewport",
|
"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",
|
"description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"addon",
|
"addon",
|
||||||
@ -59,12 +59,12 @@
|
|||||||
"prep": "../../../scripts/prepare/bundle.ts"
|
"prep": "../../../scripts/prepare/bundle.ts"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@storybook/addons": "7.0.0-alpha.31",
|
"@storybook/addons": "7.0.0-alpha.33",
|
||||||
"@storybook/api": "7.0.0-alpha.31",
|
"@storybook/api": "7.0.0-alpha.33",
|
||||||
"@storybook/client-logger": "7.0.0-alpha.31",
|
"@storybook/client-logger": "7.0.0-alpha.33",
|
||||||
"@storybook/components": "7.0.0-alpha.31",
|
"@storybook/components": "7.0.0-alpha.33",
|
||||||
"@storybook/core-events": "7.0.0-alpha.31",
|
"@storybook/core-events": "7.0.0-alpha.33",
|
||||||
"@storybook/theming": "7.0.0-alpha.31",
|
"@storybook/theming": "7.0.0-alpha.33",
|
||||||
"global": "^4.4.0",
|
"global": "^4.4.0",
|
||||||
"memoizerific": "^1.11.3",
|
"memoizerific": "^1.11.3",
|
||||||
"prop-types": "^15.7.2"
|
"prop-types": "^15.7.2"
|
||||||
@ -95,7 +95,7 @@
|
|||||||
"./src/preview.ts"
|
"./src/preview.ts"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
|
"gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
|
||||||
"storybook": {
|
"storybook": {
|
||||||
"displayName": "Viewport",
|
"displayName": "Viewport",
|
||||||
"icon": "https://user-images.githubusercontent.com/263385/101991678-48cdf300-3c7c-11eb-9764-f8af293c1b28.png",
|
"icon": "https://user-images.githubusercontent.com/263385/101991678-48cdf300-3c7c-11eb-9764-f8af293c1b28.png",
|
||||||
|
|||||||
@ -1,17 +0,0 @@
|
|||||||
import { visit } from '../helper';
|
|
||||||
|
|
||||||
describe('addon-links', () => {
|
|
||||||
before(() => {
|
|
||||||
visit('official-storybook?path=/story/addons-links-button--first');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should navigate on link', () => {
|
|
||||||
cy.getStoryElement().find('button').should('contain.text', 'Go to "Second"').click();
|
|
||||||
|
|
||||||
cy.url().should('include', 'path=/story/addons-links-button--second');
|
|
||||||
|
|
||||||
cy.getStoryElement().find('button').should('contain.text', 'Go to "First"').click();
|
|
||||||
|
|
||||||
cy.url().should('include', 'path=/story/addons-links-button--first');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -25,16 +25,16 @@ describe('Navigation', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
describe('Routing', () => {
|
describe('Routing', () => {
|
||||||
it('should navigate to story addons-a11y-basebutton--default', () => {
|
it('should navigate to sibling story sibling', () => {
|
||||||
visit('official-storybook');
|
visit('official-storybook/?path=/story/basics-actionbar--single-item');
|
||||||
|
|
||||||
cy.get('#addons-a11y-basebutton--label').click({ force: true });
|
cy.get('#basics-actionbar--many-items').click({ force: true });
|
||||||
cy.url().should('include', 'path=/story/addons-a11y-basebutton--label');
|
cy.url().should('include', 'path=/story/basics-actionbar--many-items');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should directly visit a certain story and render correctly', () => {
|
it('should directly visit a certain story and render correctly', () => {
|
||||||
visit('official-storybook/?path=/story/addons-a11y-basebutton--label');
|
visit('official-storybook/?path=/story/basics-actionbar--single-item');
|
||||||
|
|
||||||
cy.getStoryElement().should('contain.text', 'Testing the a11y addon');
|
cy.getStoryElement().should('contain.text', 'Clear');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -19,7 +19,12 @@ const mainConfig: import('@storybook/angular').StorybookConfig = {
|
|||||||
channelOptions: { allowFunction: false, maxDepth: 10 },
|
channelOptions: { allowFunction: false, maxDepth: 10 },
|
||||||
disableTelemetry: true,
|
disableTelemetry: true,
|
||||||
},
|
},
|
||||||
staticDirs: ['../src/assets'],
|
staticDirs: [
|
||||||
|
'../src/assets',
|
||||||
|
// reproduction of https://github.com/storybookjs/storybook/issues/16732
|
||||||
|
{ from: '../src/assets/a', to: 'assets' },
|
||||||
|
{ from: '../src/assets/b', to: 'assets/b' },
|
||||||
|
],
|
||||||
features: {
|
features: {
|
||||||
buildStoriesJson: false,
|
buildStoriesJson: false,
|
||||||
breakingChangesV7: false,
|
breakingChangesV7: false,
|
||||||
|
|||||||
@ -2,7 +2,6 @@
|
|||||||
import { setCompodocJson } from '@storybook/addon-docs/angular';
|
import { setCompodocJson } from '@storybook/addon-docs/angular';
|
||||||
import addCssWarning from '../src/cssWarning';
|
import addCssWarning from '../src/cssWarning';
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
import docJson from '../documentation.json';
|
import docJson from '../documentation.json';
|
||||||
// remove ButtonComponent to test #12009
|
// remove ButtonComponent to test #12009
|
||||||
const filtered = !docJson?.components
|
const filtered = !docJson?.components
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "angular-cli",
|
"name": "angular-cli",
|
||||||
"version": "7.0.0-alpha.31",
|
"version": "7.0.0-alpha.33",
|
||||||
"private": true,
|
"private": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"workspaces": {
|
"workspaces": {
|
||||||
@ -43,22 +43,22 @@
|
|||||||
"@angular/compiler-cli": "^13.3.6",
|
"@angular/compiler-cli": "^13.3.6",
|
||||||
"@angular/elements": "^13.3.6",
|
"@angular/elements": "^13.3.6",
|
||||||
"@compodoc/compodoc": "^1.1.18",
|
"@compodoc/compodoc": "^1.1.18",
|
||||||
"@storybook/addon-a11y": "7.0.0-alpha.31",
|
"@storybook/addon-a11y": "7.0.0-alpha.33",
|
||||||
"@storybook/addon-actions": "7.0.0-alpha.31",
|
"@storybook/addon-actions": "7.0.0-alpha.33",
|
||||||
"@storybook/addon-backgrounds": "7.0.0-alpha.31",
|
"@storybook/addon-backgrounds": "7.0.0-alpha.33",
|
||||||
"@storybook/addon-controls": "7.0.0-alpha.31",
|
"@storybook/addon-controls": "7.0.0-alpha.33",
|
||||||
"@storybook/addon-docs": "7.0.0-alpha.31",
|
"@storybook/addon-docs": "7.0.0-alpha.33",
|
||||||
"@storybook/addon-highlight": "7.0.0-alpha.31",
|
"@storybook/addon-highlight": "7.0.0-alpha.33",
|
||||||
"@storybook/addon-interactions": "7.0.0-alpha.31",
|
"@storybook/addon-interactions": "7.0.0-alpha.33",
|
||||||
"@storybook/addon-jest": "7.0.0-alpha.31",
|
"@storybook/addon-jest": "7.0.0-alpha.33",
|
||||||
"@storybook/addon-links": "7.0.0-alpha.31",
|
"@storybook/addon-links": "7.0.0-alpha.33",
|
||||||
"@storybook/addon-storyshots": "7.0.0-alpha.31",
|
"@storybook/addon-storyshots": "7.0.0-alpha.33",
|
||||||
"@storybook/addon-storysource": "7.0.0-alpha.31",
|
"@storybook/addon-storysource": "7.0.0-alpha.33",
|
||||||
"@storybook/addons": "7.0.0-alpha.31",
|
"@storybook/addons": "7.0.0-alpha.33",
|
||||||
"@storybook/angular": "7.0.0-alpha.31",
|
"@storybook/angular": "7.0.0-alpha.33",
|
||||||
"@storybook/babel-plugin-require-context-hook": "1.0.1",
|
"@storybook/babel-plugin-require-context-hook": "1.0.1",
|
||||||
"@storybook/jest": "^0.0.10",
|
"@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",
|
"@storybook/testing-library": "0.0.14-next.0",
|
||||||
"@types/jest": "^26.0.16",
|
"@types/jest": "^26.0.16",
|
||||||
"@types/node": "^14.14.20 || ^16.0.0",
|
"@types/node": "^14.14.20 || ^16.0.0",
|
||||||
@ -70,7 +70,7 @@
|
|||||||
"jest": "^26.6.3",
|
"jest": "^26.6.3",
|
||||||
"jest-preset-angular": "^8.3.2",
|
"jest-preset-angular": "^8.3.2",
|
||||||
"protractor": "~7.0.0",
|
"protractor": "~7.0.0",
|
||||||
"storybook": "7.0.0-alpha.31",
|
"storybook": "7.0.0-alpha.33",
|
||||||
"storybook-addon-angular-ivy": "^0.0.1",
|
"storybook-addon-angular-ivy": "^0.0.1",
|
||||||
"ts-jest": "^26.4.4",
|
"ts-jest": "^26.4.4",
|
||||||
"ts-node": "^10.4.0",
|
"ts-node": "^10.4.0",
|
||||||
|
|||||||
0
code/examples/angular-cli/src/assets/a/a.json
Normal file
0
code/examples/angular-cli/src/assets/a/a.json
Normal file
0
code/examples/angular-cli/src/assets/b/b.json
Normal file
0
code/examples/angular-cli/src/assets/b/b.json
Normal file
@ -1,66 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`Storyshots Addons/Controls Basic 1`] = `
|
|
||||||
<storybook-wrapper>
|
|
||||||
<my-button
|
|
||||||
ng-reflect-is-disabled="false"
|
|
||||||
ng-reflect-label="Args test"
|
|
||||||
ng-reflect-some-data-object="[object Object]"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="btn-secondary btn-medium"
|
|
||||||
ng-reflect-ng-class="btn-secondary,btn-medium"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
|
|
||||||
width="100"
|
|
||||||
/>
|
|
||||||
Args test
|
|
||||||
|
|
||||||
</button>
|
|
||||||
</my-button>
|
|
||||||
</storybook-wrapper>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`Storyshots Addons/Controls Disabled 1`] = `
|
|
||||||
<storybook-wrapper>
|
|
||||||
<my-button
|
|
||||||
ng-reflect-is-disabled="true"
|
|
||||||
ng-reflect-label="Disabled"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="btn-secondary btn-medium"
|
|
||||||
disabled=""
|
|
||||||
ng-reflect-ng-class="btn-secondary,btn-medium"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
|
|
||||||
width="100"
|
|
||||||
/>
|
|
||||||
Disabled
|
|
||||||
|
|
||||||
</button>
|
|
||||||
</my-button>
|
|
||||||
</storybook-wrapper>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`Storyshots Addons/Controls No Template 1`] = `
|
|
||||||
<storybook-wrapper>
|
|
||||||
<my-button
|
|
||||||
ng-reflect-is-disabled="false"
|
|
||||||
ng-reflect-label="No template"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="btn-secondary btn-medium"
|
|
||||||
ng-reflect-ng-class="btn-secondary,btn-medium"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
|
|
||||||
width="100"
|
|
||||||
/>
|
|
||||||
No template
|
|
||||||
|
|
||||||
</button>
|
|
||||||
</my-button>
|
|
||||||
</storybook-wrapper>
|
|
||||||
`;
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
import type { Meta, StoryFn } from '@storybook/angular';
|
|
||||||
import { DocButtonComponent, ISomeInterface } from '../docs/doc-button/doc-button.component';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: 'Addons/Controls',
|
|
||||||
component: DocButtonComponent,
|
|
||||||
} as Meta;
|
|
||||||
|
|
||||||
const Template: StoryFn = (args) => ({
|
|
||||||
props: args,
|
|
||||||
});
|
|
||||||
|
|
||||||
const someDataObject: ISomeInterface = {
|
|
||||||
one: 'Hello world',
|
|
||||||
two: true,
|
|
||||||
three: ['One', 'Two', 'Three'],
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Basic = Template.bind({});
|
|
||||||
Basic.args = { label: 'Args test', isDisabled: false, someDataObject };
|
|
||||||
|
|
||||||
export const Disabled = Template.bind({});
|
|
||||||
Disabled.args = { label: 'Disabled', isDisabled: true };
|
|
||||||
|
|
||||||
export const NoTemplate = () => ({
|
|
||||||
props: { label: 'No template', isDisabled: false },
|
|
||||||
});
|
|
||||||
@ -1,7 +1,6 @@
|
|||||||
import { moduleMetadata } from '@storybook/angular';
|
import { moduleMetadata } from '@storybook/angular';
|
||||||
import { Story, Meta, ArgsTable } from '@storybook/addon-docs';
|
import { Story, Meta, ArgsTable } from '@storybook/addon-docs';
|
||||||
import { Welcome, Button } from '../.././angular-demo';
|
import { Welcome, Button } from '../.././angular-demo';
|
||||||
import { linkTo } from '@storybook/addon-links';
|
|
||||||
import { DocButtonComponent } from './doc-button/doc-button.component';
|
import { DocButtonComponent } from './doc-button/doc-button.component';
|
||||||
|
|
||||||
# Storybook Docs for Angular
|
# Storybook Docs for Angular
|
||||||
|
|||||||
@ -66,16 +66,19 @@ Submitted.play = async (context) => {
|
|||||||
const canvas = within(context.canvasElement);
|
const canvas = within(context.canvasElement);
|
||||||
await userEvent.click(canvas.getByText('Submit'));
|
await userEvent.click(canvas.getByText('Submit'));
|
||||||
|
|
||||||
await waitFor(async () => {
|
await waitFor(
|
||||||
await expect(
|
async () => {
|
||||||
canvas.getByRole('heading', {
|
await expect(
|
||||||
name: /you submitted the following:/i,
|
canvas.getByRole('heading', {
|
||||||
})
|
name: /you submitted the following:/i,
|
||||||
).toBeInTheDocument();
|
})
|
||||||
await expect(canvas.getByTestId('hero-name').textContent).toEqual('Storm');
|
).toBeInTheDocument();
|
||||||
await expect(canvas.getByTestId('hero-alterego').textContent).toEqual('Ororo Munroe');
|
await expect(canvas.getByTestId('hero-name').textContent).toEqual('Storm');
|
||||||
await expect(canvas.getByTestId('hero-power').textContent).toEqual('Weather Changer');
|
await expect(canvas.getByTestId('hero-alterego').textContent).toEqual('Ororo Munroe');
|
||||||
});
|
await expect(canvas.getByTestId('hero-power').textContent).toEqual('Weather Changer');
|
||||||
|
},
|
||||||
|
{ timeout: 2000 }
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const SubmittedAndEditedAfter: StoryFn<HeroForm> = Template.bind({});
|
export const SubmittedAndEditedAfter: StoryFn<HeroForm> = Template.bind({});
|
||||||
|
|||||||
@ -1,4 +1,3 @@
|
|||||||
import { linkTo } from '@storybook/addon-links';
|
|
||||||
import { Button } from '../../angular-demo';
|
import { Button } from '../../angular-demo';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -9,7 +8,7 @@ export default {
|
|||||||
export const ButtonWithLinkToAnotherStory = () => ({
|
export const ButtonWithLinkToAnotherStory = () => ({
|
||||||
props: {
|
props: {
|
||||||
text: 'Go to Welcome Story',
|
text: 'Go to Welcome Story',
|
||||||
onClick: linkTo('Welcome'),
|
onClick: () => {},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -1,7 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`Storyshots Addons / Toolbars / Locales With Angular Service 1`] = `
|
|
||||||
<storybook-wrapper>
|
|
||||||
Your locale is en<br /> I say: Hello
|
|
||||||
</storybook-wrapper>
|
|
||||||
`;
|
|
||||||
@ -1,48 +0,0 @@
|
|||||||
import type { DecoratorFunction } from '@storybook/addons';
|
|
||||||
import { moduleMetadata } from '@storybook/angular';
|
|
||||||
import type { Meta, StoryFn } from '@storybook/angular';
|
|
||||||
|
|
||||||
import { TranslatePipe } from './translate.pipe';
|
|
||||||
import { DEFAULT_LOCALE } from './translate.service';
|
|
||||||
|
|
||||||
const withLocaleProvider: DecoratorFunction<unknown> = (storyFunc, context) => {
|
|
||||||
const { locale } = context.globals;
|
|
||||||
|
|
||||||
// uses `moduleMetadata` decorator to cleanly add locale provider into module metadata
|
|
||||||
|
|
||||||
// It is also possible to do it directly in story with
|
|
||||||
// ```
|
|
||||||
// const sotry = storyFunc();
|
|
||||||
// sotry.moduleMetadata = {
|
|
||||||
// ...sotry.moduleMetadata,
|
|
||||||
// providers: [
|
|
||||||
// ...(sotry.moduleMetadata?.providers ?? []),
|
|
||||||
// { provide: DEFAULT_LOCALE, useValue: locale },
|
|
||||||
// ],
|
|
||||||
// };
|
|
||||||
// return sotry;
|
|
||||||
// ```
|
|
||||||
// but more verbose
|
|
||||||
|
|
||||||
return moduleMetadata({ providers: [{ provide: DEFAULT_LOCALE, useValue: locale }] })(
|
|
||||||
storyFunc,
|
|
||||||
context
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: 'Addons / Toolbars / Locales',
|
|
||||||
decorators: [withLocaleProvider, moduleMetadata({ declarations: [TranslatePipe] })],
|
|
||||||
} as Meta;
|
|
||||||
|
|
||||||
export const WithAngularService: StoryFn = (_args, { globals: { locale } }) => {
|
|
||||||
return {
|
|
||||||
template: `
|
|
||||||
Your locale is {{ locale }}<br>
|
|
||||||
I say: {{ 'hello' | translate }}
|
|
||||||
`,
|
|
||||||
props: {
|
|
||||||
locale,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
};
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
import { Pipe, PipeTransform } from '@angular/core';
|
|
||||||
import { TranslateService } from './translate.service';
|
|
||||||
|
|
||||||
@Pipe({
|
|
||||||
name: 'translate',
|
|
||||||
})
|
|
||||||
export class TranslatePipe implements PipeTransform {
|
|
||||||
// eslint-disable-next-line no-useless-constructor
|
|
||||||
constructor(private readonly translateService: TranslateService) {}
|
|
||||||
|
|
||||||
transform(value: string): string {
|
|
||||||
return `${this.translateService.getTranslation(value)}`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,30 +0,0 @@
|
|||||||
import { Inject, Injectable, InjectionToken } from '@angular/core';
|
|
||||||
|
|
||||||
export const DEFAULT_LOCALE = new InjectionToken<string>('test');
|
|
||||||
|
|
||||||
@Injectable({ providedIn: 'root' })
|
|
||||||
export class TranslateService {
|
|
||||||
private locale = 'en';
|
|
||||||
|
|
||||||
private translation = {
|
|
||||||
en: { hello: 'Hello' },
|
|
||||||
es: { hello: 'Hola!' },
|
|
||||||
fr: { hello: 'Bonjour!' },
|
|
||||||
kr: { hello: '안녕하세요!' },
|
|
||||||
zh: { hello: '你好!' },
|
|
||||||
};
|
|
||||||
|
|
||||||
constructor(@Inject(DEFAULT_LOCALE) defaultLocale: string | null) {
|
|
||||||
if (defaultLocale) {
|
|
||||||
this.setLocale(defaultLocale);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setLocale(locale) {
|
|
||||||
this.locale = locale;
|
|
||||||
}
|
|
||||||
|
|
||||||
getTranslation(key: string) {
|
|
||||||
return this.translation[this.locale][key] ?? key;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
import { addParameters } from '@storybook/angular';
|
|
||||||
import type { Meta, StoryFn } from '@storybook/angular';
|
|
||||||
import { Button } from '../../angular-demo';
|
|
||||||
|
|
||||||
const globalParameter = 'globalParameter';
|
|
||||||
const chapterParameter = 'chapterParameter';
|
|
||||||
const storyParameter = 'storyParameter';
|
|
||||||
|
|
||||||
addParameters({ globalParameter });
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: 'Core / Parameters / All parameters',
|
|
||||||
parameters: {
|
|
||||||
chapterParameter,
|
|
||||||
},
|
|
||||||
} as Meta;
|
|
||||||
|
|
||||||
export const PassedToStory: StoryFn = (_args, { parameters: { fileName, ...parameters } }) => ({
|
|
||||||
component: Button,
|
|
||||||
props: {
|
|
||||||
text: `Parameters are ${JSON.stringify(parameters, null, 2)}`,
|
|
||||||
onClick: () => 0,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
PassedToStory.storyName = 'All parameters passed to story';
|
|
||||||
PassedToStory.parameters = { storyParameter };
|
|
||||||
@ -1,5 +1,4 @@
|
|||||||
import type { Meta, StoryFn } from '@storybook/angular';
|
import type { Meta, StoryFn } from '@storybook/angular';
|
||||||
import { linkTo } from '@storybook/addon-links';
|
|
||||||
import { AppComponent } from '../app/app.component';
|
import { AppComponent } from '../app/app.component';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -9,6 +8,6 @@ export default {
|
|||||||
export const ToAngular: StoryFn = () => ({
|
export const ToAngular: StoryFn = () => ({
|
||||||
component: AppComponent,
|
component: AppComponent,
|
||||||
props: {
|
props: {
|
||||||
showApp: linkTo('Button'),
|
showApp: () => {},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
import type { Meta, StoryFn } from '@storybook/angular';
|
import type { Meta, StoryFn } from '@storybook/angular';
|
||||||
import { linkTo } from '@storybook/addon-links';
|
|
||||||
import { Welcome } from './angular-demo';
|
import { Welcome } from './angular-demo';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -9,6 +8,6 @@ export default {
|
|||||||
export const ToStorybook: StoryFn = () => ({
|
export const ToStorybook: StoryFn = () => ({
|
||||||
component: Welcome,
|
component: Welcome,
|
||||||
props: {
|
props: {
|
||||||
showApp: linkTo('Button'),
|
showApp: () => {},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@ -25,7 +25,7 @@ const mainConfig: StorybookConfig = {
|
|||||||
const resolvePlugins = config.resolve?.plugins;
|
const resolvePlugins = config.resolve?.plugins;
|
||||||
if (Array.isArray(resolvePlugins)) {
|
if (Array.isArray(resolvePlugins)) {
|
||||||
resolvePlugins.forEach((p) => {
|
resolvePlugins.forEach((p) => {
|
||||||
// @ts-ignore
|
// @ts-expect-error (Converted from ts-ignore)
|
||||||
const appSrcs = p.appSrcs as unknown as string[];
|
const appSrcs = p.appSrcs as unknown as string[];
|
||||||
if (Array.isArray(appSrcs)) {
|
if (Array.isArray(appSrcs)) {
|
||||||
appSrcs.push(path.join(__dirname, '..', '..', '..'));
|
appSrcs.push(path.join(__dirname, '..', '..', '..'));
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "cra-kitchen-sink",
|
"name": "cra-kitchen-sink",
|
||||||
"version": "7.0.0-alpha.31",
|
"version": "7.0.0-alpha.33",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "react-scripts build",
|
"build": "react-scripts build",
|
||||||
@ -11,7 +11,7 @@
|
|||||||
"test": "react-scripts test --env=jsdom"
|
"test": "react-scripts test --env=jsdom"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@storybook/client-logger": "7.0.0-alpha.31",
|
"@storybook/client-logger": "7.0.0-alpha.33",
|
||||||
"global": "^4.4.0",
|
"global": "^4.4.0",
|
||||||
"prop-types": "^15.7.2",
|
"prop-types": "^15.7.2",
|
||||||
"react": "16.14.0",
|
"react": "16.14.0",
|
||||||
@ -21,21 +21,21 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
|
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
|
||||||
"@storybook/addon-a11y": "7.0.0-alpha.31",
|
"@storybook/addon-a11y": "7.0.0-alpha.33",
|
||||||
"@storybook/addon-actions": "7.0.0-alpha.31",
|
"@storybook/addon-actions": "7.0.0-alpha.33",
|
||||||
"@storybook/addon-backgrounds": "7.0.0-alpha.31",
|
"@storybook/addon-backgrounds": "7.0.0-alpha.33",
|
||||||
"@storybook/addon-docs": "7.0.0-alpha.31",
|
"@storybook/addon-docs": "7.0.0-alpha.33",
|
||||||
"@storybook/addon-highlight": "7.0.0-alpha.31",
|
"@storybook/addon-highlight": "7.0.0-alpha.33",
|
||||||
"@storybook/addon-jest": "7.0.0-alpha.31",
|
"@storybook/addon-jest": "7.0.0-alpha.33",
|
||||||
"@storybook/addon-links": "7.0.0-alpha.31",
|
"@storybook/addon-links": "7.0.0-alpha.33",
|
||||||
"@storybook/addon-storyshots": "7.0.0-alpha.31",
|
"@storybook/addon-storyshots": "7.0.0-alpha.33",
|
||||||
"@storybook/addons": "7.0.0-alpha.31",
|
"@storybook/addons": "7.0.0-alpha.33",
|
||||||
"@storybook/builder-webpack5": "7.0.0-alpha.31",
|
"@storybook/builder-webpack5": "7.0.0-alpha.33",
|
||||||
"@storybook/preset-create-react-app": "^4.1.0",
|
"@storybook/preset-create-react-app": "^4.1.0",
|
||||||
"@storybook/react": "7.0.0-alpha.31",
|
"@storybook/react": "7.0.0-alpha.33",
|
||||||
"@storybook/react-webpack5": "7.0.0-alpha.31",
|
"@storybook/react-webpack5": "7.0.0-alpha.33",
|
||||||
"@storybook/theming": "7.0.0-alpha.31",
|
"@storybook/theming": "7.0.0-alpha.33",
|
||||||
"storybook": "7.0.0-alpha.31",
|
"storybook": "7.0.0-alpha.33",
|
||||||
"webpack": "5"
|
"webpack": "5"
|
||||||
},
|
},
|
||||||
"storybook": {
|
"storybook": {
|
||||||
|
|||||||
@ -1,34 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import { Button } from '../components/react-demo';
|
|
||||||
|
|
||||||
const Bold = ({ children }) => {
|
|
||||||
return <b>{children}</b>;
|
|
||||||
};
|
|
||||||
|
|
||||||
Bold.propTypes = {
|
|
||||||
children: PropTypes.string.isRequired,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: 'Decorators',
|
|
||||||
component: Button,
|
|
||||||
decorators: [
|
|
||||||
(Story) => (
|
|
||||||
<div style={{ padding: 25, border: '3px solid red' }}>
|
|
||||||
<Story />
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
export const WithArgs = (args) => <Button {...args} />;
|
|
||||||
WithArgs.args = { children: 'With args' };
|
|
||||||
|
|
||||||
export const Basic = () => <Button>Basic</Button>;
|
|
||||||
|
|
||||||
export const Nested = () => (
|
|
||||||
<Button>
|
|
||||||
<Bold>Hello</Bold>
|
|
||||||
</Button>
|
|
||||||
);
|
|
||||||
@ -1,5 +1,4 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { linkTo } from '@storybook/addon-links';
|
|
||||||
import { Welcome } from '../components/react-demo';
|
import { Welcome } from '../components/react-demo';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -7,5 +6,5 @@ export default {
|
|||||||
component: Welcome,
|
component: Welcome,
|
||||||
};
|
};
|
||||||
|
|
||||||
export const Story1 = () => <Welcome showApp={linkTo('Button')} />;
|
export const Story1 = () => <Welcome showApp={() => {}} />;
|
||||||
Story1.title = 'to Storybook';
|
Story1.title = 'to Storybook';
|
||||||
|
|||||||
@ -1,3 +0,0 @@
|
|||||||
DISABLE_ESLINT_PLUGIN=true
|
|
||||||
SKIP_PREFLIGHT_CHECK=true
|
|
||||||
NODE_PATH=src
|
|
||||||
@ -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-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;
|
|
||||||
@ -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 +0,0 @@
|
|||||||
Demonstrate `@storybook/addon-essentials` default configuration with CRA / Typescript.
|
|
||||||
@ -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"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
@ -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>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
@ -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"
|
|
||||||
}
|
|
||||||
@ -1,2 +0,0 @@
|
|||||||
# https://www.robotstxt.org/robotstxt.html
|
|
||||||
User-agent: *
|
|
||||||
@ -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;
|
|
||||||
}
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user