From bbd4a3a86c4971f8bd99745c84f81a17d1fa5bbb Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 4 Oct 2022 12:35:11 +0200 Subject: [PATCH 01/10] remove official example --- .vscode/launch.json | 51 +- README.md | 23 +- code/addons/docs/docs/docspage.md | 5 +- .../storyshots/storyshots-puppeteer/README.md | 2 + code/cypress/helper.ts | 1 - code/cypress/integration/navigation.spec.ts | 40 -- code/examples/README.md | 1 + .../stories/addon-jest.stories.js | 10 - .../stories/addon-jest.testresults.json | 105 ---- .../tests/addon-jest.config.json | 2 +- code/examples/official-storybook/.env | 1 - .../official-storybook/.env.development | 1 - code/examples/official-storybook/README.md | 14 - .../official-storybook/babel.config.js | 3 - .../components/BaseButton.js | 28 - .../components/ButtonGroup.js | 36 -- .../components/DelayedRender.js | 30 - .../components/DocgenButton.js | 176 ------ .../components/ForwardRefButton.js | 47 -- .../components/ImportedPropsButton.js | 15 - .../components/MemoButton.js | 5 - .../components/NamedExportButton.js | 24 - .../components/OptionalButton.tsx | 14 - .../components/TableComponent.js | 52 -- .../components/TsButton.tsx | 26 - .../components/addon-a11y/Button.js | 48 -- .../components/addon-a11y/Form/Input.js | 22 - .../components/addon-a11y/Form/Label.js | 23 - .../components/addon-a11y/Form/Row.js | 25 - .../components/addon-a11y/Form/index.js | 5 - .../components/addon-measure/ShadowRoot.js | 63 -- .../components/addon-measure/Visualization.js | 34 -- .../components/page/Button.js | 32 - .../components/page/Header.js | 52 -- .../components/page/Page.js | 74 --- .../components/page/button.css | 30 - .../components/page/header.css | 26 - .../components/page/page.css | 73 --- .../components/react-demo.tsx | 37 -- .../official-storybook/head-warning.js | 16 - .../official-storybook/intro.stories.mdx | 5 - code/examples/official-storybook/main.ts | 59 -- .../official-storybook/manager-head.html | 5 - code/examples/official-storybook/manager.js | 69 --- code/examples/official-storybook/package.json | 74 --- .../official-storybook/preview-head.html | 12 - code/examples/official-storybook/preview.js | 267 --------- .../statics/examples/example1/example1.txt | 1 - .../statics/examples/example2/example2.txt | 1 - .../statics/public/public.txt | 1 - .../addon-docs/addon-docs-mdx.stories.mdx | 217 ------- .../addon-docs/colorpalette.stories.mdx | 23 - .../addon-docs/container-override.stories.mdx | 38 -- .../addon-docs/csf-with-mdx-docs.stories.js | 23 - .../addon-docs/csf-with-mdx-docs.stories.mdx | 26 - .../stories/addon-docs/csf3.stories.mdx | 28 - .../stories/addon-docs/docs-only.stories.mdx | 80 --- .../forward-ref-inner-proptypes.stories.js | 15 - .../forward-ref-outer-proptypes.stories.js | 14 - .../stories/addon-docs/imported.stories.tsx | 6 - .../stories/addon-docs/markdown.stories.mdx | 175 ------ .../stories/addon-docs/mdx.stories.js | 46 -- .../meta-string-template.stories.mdx | 17 - .../addon-docs/meta-title-quotes.stories.mdx | 5 - .../props-include-exclude.stories.mdx | 24 - .../stories/addon-docs/props.stories.mdx | 166 ------ .../stories/addon-docs/ref.stories.mdx | 18 - .../stories/addon-docs/stories.mdx | 7 - .../stories/addon-docs/title-generators.ts | 1 - .../stories/addon-highlight.stories.js | 104 ---- .../AccountForm.stories.tsx | 119 ---- .../addon-interactions/AccountForm.tsx | 552 ------------------ .../stories/addon-jest.stories.js | 17 - .../stories/addon-jest.testresults.json | 140 ----- .../stories/addon-measure/BoxModel.stories.js | 118 ---- .../stories/addon-measure/Grid.stories.js | 46 -- .../addon-measure/ShadowRoot.stories.js | 26 - .../addon-measure/SmallNode.stories.js | 73 --- .../addon-measure/StackingLabels.stories.js | 67 --- .../stories/addon-outline.stories.js | 46 -- .../stories/addon-storyshots.stories.js | 41 -- .../stories/demo/button.stories.js | 44 -- .../stories/demo/button.stories.mdx | 37 -- .../stories/demo/csf-embedding.test.js | 11 - .../stories/demo/setup.stories.tsx | 22 - .../stories/demo/typed-button.stories.tsx | 32 - .../stories/demo/welcome.stories.js | 13 - .../official-storybook/stories/notes/notes.md | 11 - .../stories/notes/notes.mdx | 12 - ...s-addons-storyshots-block-story-1-snap.png | Bin 647 -> 0 bytes .../storyshots-puppeteer/axe-tests.runner.js | 19 - .../storyshots-puppeteer/getStorybookUrl.js | 18 - .../storyshots-puppeteer/jest.config.js | 11 - .../puppeteer-tests.runner.js | 19 - .../storyshots-image.runner.js | 25 - .../tests/addon-jest.config.json | 15 - .../tests/addon-jest.test.js | 46 -- code/examples/standalone-preview/package.json | 1 + code/lib/core-server/src/core-presets.test.ts | 1 + code/package.json | 2 - code/workspace.json | 5 - docs/contribute/code.md | 1 + docs/contribute/how-to-contribute.md | 7 +- scripts/build-storybooks.js | 2 +- scripts/smoketest-storybooks.js | 2 +- 105 files changed, 45 insertions(+), 4355 deletions(-) delete mode 100644 code/cypress/integration/navigation.spec.ts delete mode 100644 code/examples/html-kitchen-sink/stories/addon-jest.stories.js delete mode 100644 code/examples/html-kitchen-sink/stories/addon-jest.testresults.json delete mode 100644 code/examples/official-storybook/.env delete mode 100644 code/examples/official-storybook/.env.development delete mode 100644 code/examples/official-storybook/README.md delete mode 100644 code/examples/official-storybook/babel.config.js delete mode 100644 code/examples/official-storybook/components/BaseButton.js delete mode 100644 code/examples/official-storybook/components/ButtonGroup.js delete mode 100644 code/examples/official-storybook/components/DelayedRender.js delete mode 100644 code/examples/official-storybook/components/DocgenButton.js delete mode 100644 code/examples/official-storybook/components/ForwardRefButton.js delete mode 100644 code/examples/official-storybook/components/ImportedPropsButton.js delete mode 100644 code/examples/official-storybook/components/MemoButton.js delete mode 100644 code/examples/official-storybook/components/NamedExportButton.js delete mode 100644 code/examples/official-storybook/components/OptionalButton.tsx delete mode 100644 code/examples/official-storybook/components/TableComponent.js delete mode 100644 code/examples/official-storybook/components/TsButton.tsx delete mode 100644 code/examples/official-storybook/components/addon-a11y/Button.js delete mode 100644 code/examples/official-storybook/components/addon-a11y/Form/Input.js delete mode 100644 code/examples/official-storybook/components/addon-a11y/Form/Label.js delete mode 100644 code/examples/official-storybook/components/addon-a11y/Form/Row.js delete mode 100644 code/examples/official-storybook/components/addon-a11y/Form/index.js delete mode 100644 code/examples/official-storybook/components/addon-measure/ShadowRoot.js delete mode 100644 code/examples/official-storybook/components/addon-measure/Visualization.js delete mode 100644 code/examples/official-storybook/components/page/Button.js delete mode 100644 code/examples/official-storybook/components/page/Header.js delete mode 100644 code/examples/official-storybook/components/page/Page.js delete mode 100644 code/examples/official-storybook/components/page/button.css delete mode 100644 code/examples/official-storybook/components/page/header.css delete mode 100644 code/examples/official-storybook/components/page/page.css delete mode 100644 code/examples/official-storybook/components/react-demo.tsx delete mode 100644 code/examples/official-storybook/head-warning.js delete mode 100644 code/examples/official-storybook/intro.stories.mdx delete mode 100644 code/examples/official-storybook/main.ts delete mode 100644 code/examples/official-storybook/manager-head.html delete mode 100644 code/examples/official-storybook/manager.js delete mode 100644 code/examples/official-storybook/package.json delete mode 100644 code/examples/official-storybook/preview-head.html delete mode 100644 code/examples/official-storybook/preview.js delete mode 100644 code/examples/official-storybook/statics/examples/example1/example1.txt delete mode 100644 code/examples/official-storybook/statics/examples/example2/example2.txt delete mode 100644 code/examples/official-storybook/statics/public/public.txt delete mode 100644 code/examples/official-storybook/stories/addon-docs/addon-docs-mdx.stories.mdx delete mode 100644 code/examples/official-storybook/stories/addon-docs/colorpalette.stories.mdx delete mode 100644 code/examples/official-storybook/stories/addon-docs/container-override.stories.mdx delete mode 100644 code/examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.js delete mode 100644 code/examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.mdx delete mode 100644 code/examples/official-storybook/stories/addon-docs/csf3.stories.mdx delete mode 100644 code/examples/official-storybook/stories/addon-docs/docs-only.stories.mdx delete mode 100644 code/examples/official-storybook/stories/addon-docs/forward-ref-inner-proptypes.stories.js delete mode 100644 code/examples/official-storybook/stories/addon-docs/forward-ref-outer-proptypes.stories.js delete mode 100644 code/examples/official-storybook/stories/addon-docs/imported.stories.tsx delete mode 100644 code/examples/official-storybook/stories/addon-docs/markdown.stories.mdx delete mode 100644 code/examples/official-storybook/stories/addon-docs/mdx.stories.js delete mode 100644 code/examples/official-storybook/stories/addon-docs/meta-string-template.stories.mdx delete mode 100644 code/examples/official-storybook/stories/addon-docs/meta-title-quotes.stories.mdx delete mode 100644 code/examples/official-storybook/stories/addon-docs/props-include-exclude.stories.mdx delete mode 100644 code/examples/official-storybook/stories/addon-docs/props.stories.mdx delete mode 100644 code/examples/official-storybook/stories/addon-docs/ref.stories.mdx delete mode 100644 code/examples/official-storybook/stories/addon-docs/stories.mdx delete mode 100644 code/examples/official-storybook/stories/addon-docs/title-generators.ts delete mode 100644 code/examples/official-storybook/stories/addon-highlight.stories.js delete mode 100644 code/examples/official-storybook/stories/addon-interactions/AccountForm.stories.tsx delete mode 100644 code/examples/official-storybook/stories/addon-interactions/AccountForm.tsx delete mode 100644 code/examples/official-storybook/stories/addon-jest.stories.js delete mode 100644 code/examples/official-storybook/stories/addon-jest.testresults.json delete mode 100644 code/examples/official-storybook/stories/addon-measure/BoxModel.stories.js delete mode 100644 code/examples/official-storybook/stories/addon-measure/Grid.stories.js delete mode 100644 code/examples/official-storybook/stories/addon-measure/ShadowRoot.stories.js delete mode 100644 code/examples/official-storybook/stories/addon-measure/SmallNode.stories.js delete mode 100644 code/examples/official-storybook/stories/addon-measure/StackingLabels.stories.js delete mode 100644 code/examples/official-storybook/stories/addon-outline.stories.js delete mode 100644 code/examples/official-storybook/stories/addon-storyshots.stories.js delete mode 100644 code/examples/official-storybook/stories/demo/button.stories.js delete mode 100644 code/examples/official-storybook/stories/demo/button.stories.mdx delete mode 100644 code/examples/official-storybook/stories/demo/csf-embedding.test.js delete mode 100644 code/examples/official-storybook/stories/demo/setup.stories.tsx delete mode 100644 code/examples/official-storybook/stories/demo/typed-button.stories.tsx delete mode 100644 code/examples/official-storybook/stories/demo/welcome.stories.js delete mode 100644 code/examples/official-storybook/stories/notes/notes.md delete mode 100644 code/examples/official-storybook/stories/notes/notes.mdx delete mode 100644 code/examples/official-storybook/storyshots-puppeteer/__image_snapshots__/storyshots-image-runner-js-image-snapshots-addons-storyshots-block-story-1-snap.png delete mode 100644 code/examples/official-storybook/storyshots-puppeteer/axe-tests.runner.js delete mode 100644 code/examples/official-storybook/storyshots-puppeteer/getStorybookUrl.js delete mode 100644 code/examples/official-storybook/storyshots-puppeteer/jest.config.js delete mode 100644 code/examples/official-storybook/storyshots-puppeteer/puppeteer-tests.runner.js delete mode 100644 code/examples/official-storybook/storyshots-puppeteer/storyshots-image.runner.js delete mode 100644 code/examples/official-storybook/tests/addon-jest.config.json delete mode 100644 code/examples/official-storybook/tests/addon-jest.test.js diff --git a/.vscode/launch.json b/.vscode/launch.json index 0fcff3c6e02e..3b2c18a27cd6 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -3,36 +3,23 @@ // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", - "configurations": [{ - "type": "node", - "request": "launch", - "name": "official-storybook", - "runtimeExecutable": "npm", - "cwd": "${workspaceFolder}/code/examples/official-storybook", - "runtimeArgs": [ - "run-script", - "debug" - ], - "port": 9229, - "skipFiles": [ - "/**" - ] - }, { - "type": "node", - "request": "launch", - "name": "cli html", - "cwd": "${workspaceFolder}/code/lib/cli/stories", - "runtimeArgs": [ - "--inspect-brk", - "${workspaceFolder}/code/lib/cli/bin/index.js", - "init", - "--type", - "html" - ], - "port": 9229, - "skipFiles": [ - "/**" - ] - } + "configurations": [ + { + "type": "node", + "request": "launch", + "name": "cli html", + "cwd": "${workspaceFolder}/code/lib/cli/stories", + "runtimeArgs": [ + "--inspect-brk", + "${workspaceFolder}/code/lib/cli/bin/index.js", + "init", + "--type", + "html" + ], + "port": 9229, + "skipFiles": [ + "/**" + ] + } ] -} +} \ No newline at end of file diff --git a/README.md b/README.md index 208e9d42338f..74518d774a42 100644 --- a/README.md +++ b/README.md @@ -95,17 +95,18 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story | Renderer | Demo | | |----------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------| -| [React](code/renderers/react) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/react/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [![React](https://img.shields.io/npm/dm/@storybook/react?style=flat-square&color=eee)](code/renderers/react) | -| [Vue](code/renderers/vue) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/vue/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/vue-kitchen-sink/) | [![Vue](https://img.shields.io/npm/dm/@storybook/vue?style=flat-square&color=eee)](code/renderers/vue) | -| [Angular](code/frameworks/angular/) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/angular/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/angular-cli/) | [![Angular](https://img.shields.io/npm/dm/@storybook/angular?style=flat-square&color=eee)](code/frameworks/angular/) | -| [Web components](code/renderers/web-components) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/web-components/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/web-components-kitchen-sink/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/web-components?style=flat-square&color=eee)](code/renderers/web-components) | -| [React Native](https://github.com/storybookjs/react-native) | - | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native?style=flat-square&color=eee)](https://github.com/storybookjs/react-native) | -| [HTML](code/renderers/html) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/html/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/html-kitchen-sink/) | [![HTML](https://img.shields.io/npm/dm/@storybook/html?style=flat-square&color=eee)](code/renderers/html) | -| [Ember](code/frameworks/ember/) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/ember/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/ember-cli/) | [![Ember](https://img.shields.io/npm/dm/@storybook/ember?style=flat-square&color=eee)](code/frameworks/ember/) | -| [Svelte](code/renderers/svelte) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/svelte/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte?style=flat-square&color=eee)](code/renderers/svelte) | -| [Preact](code/renderers/preact) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/preact/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/preact-kitchen-sink/) | [![Preact](https://img.shields.io/npm/dm/@storybook/preact?style=flat-square&color=eee)](code/renderers/preact) | -| [Marionette.js](https://github.com/storybookjs/marionette) | - | [![Marionette.js](https://img.shields.io/npm/dm/@storybook/marionette?style=flat-square&color=eee)](https://github.com/storybookjs/marionette) | -| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/native/latest?style=flat-square&color=blue&label)](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [![Native](https://img.shields.io/npm/dm/@storybook/native?style=flat-square&color=eee)](https://github.com/storybookjs/native) | +| ? | TODO, the link below will break | [![React](https://img.shields.io/npm/dm/@storybook/react?style=flat-square&color=eee)](code/renderers/react) | +| [React](code/renderers/react) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/react/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [![React](https://img.shields.io/npm/dm/@storybook/react?style=flat-square&color=eee)](code/renderers/react) | +| [Vue](code/renderers/vue) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/vue/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/vue-kitchen-sink/) | [![Vue](https://img.shields.io/npm/dm/@storybook/vue?style=flat-square&color=eee)](code/renderers/vue) | +| [Angular](code/frameworks/angular/) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/angular/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/angular-cli/) | [![Angular](https://img.shields.io/npm/dm/@storybook/angular?style=flat-square&color=eee)](code/frameworks/angular/) | +| [Web components](code/renderers/web-components) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/web-components/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/web-components-kitchen-sink/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/web-components?style=flat-square&color=eee)](code/renderers/web-components) | +| [React Native](https://github.com/storybookjs/react-native) | - | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native?style=flat-square&color=eee)](https://github.com/storybookjs/react-native) | +| [HTML](code/renderers/html) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/html/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/html-kitchen-sink/) | [![HTML](https://img.shields.io/npm/dm/@storybook/html?style=flat-square&color=eee)](code/renderers/html) | +| [Ember](code/frameworks/ember/) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/ember/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/ember-cli/) | [![Ember](https://img.shields.io/npm/dm/@storybook/ember?style=flat-square&color=eee)](code/frameworks/ember/) | +| [Svelte](code/renderers/svelte) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/svelte/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte?style=flat-square&color=eee)](code/renderers/svelte) | +| [Preact](code/renderers/preact) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/preact/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/preact-kitchen-sink/) | [![Preact](https://img.shields.io/npm/dm/@storybook/preact?style=flat-square&color=eee)](code/renderers/preact) | +| [Marionette.js](https://github.com/storybookjs/marionette) | - | [![Marionette.js](https://img.shields.io/npm/dm/@storybook/marionette?style=flat-square&color=eee)](https://github.com/storybookjs/marionette) | +| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/native/latest?style=flat-square&color=blue&label)](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [![Native](https://img.shields.io/npm/dm/@storybook/native?style=flat-square&color=eee)](https://github.com/storybookjs/native) | ### Sub Projects diff --git a/code/addons/docs/docs/docspage.md b/code/addons/docs/docs/docspage.md index 7b62abace14e..4df75e06904f 100644 --- a/code/addons/docs/docs/docspage.md +++ b/code/addons/docs/docs/docspage.md @@ -145,7 +145,10 @@ export default { }; ``` -You can interleave your own components to customize the auto-generated contents of the page, or pass in different options to the blocks to customize their appearance. For more info see the examples in [official-storybook](https://github.com/storybookjs/storybook/blob/next/code/examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js). +You can interleave your own components to customize the auto-generated contents of the page, or pass in different options to the blocks to customize their appearance. + +TODO: the link below will break +For more info see the examples in [official-storybook](https://github.com/storybookjs/storybook/blob/next/code/examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js). ## Story file names diff --git a/code/addons/storyshots/storyshots-puppeteer/README.md b/code/addons/storyshots/storyshots-puppeteer/README.md index c3d9def10d9b..162133a1b751 100644 --- a/code/addons/storyshots/storyshots-puppeteer/README.md +++ b/code/addons/storyshots/storyshots-puppeteer/README.md @@ -199,6 +199,8 @@ Those can be customized with `setupTimeout` and `testTimeout` parameters. ### Integrate Puppeteer storyshots with regular app You may want to use another Jest project to run your Puppeteer storyshots as they require more resources: Chrome and Storybook built/served. + +TODO: the link below will break You can find a working example of this in the [official-storybook](https://github.com/storybookjs/storybook/tree/main/examples/official-storybook) example. ### Integrate Puppeteer storyshots with [Create React App](https://github.com/facebookincubator/create-react-app) diff --git a/code/cypress/helper.ts b/code/cypress/helper.ts index 9da3864a6cb8..be1f2fbf2c56 100644 --- a/code/cypress/helper.ts +++ b/code/cypress/helper.ts @@ -1,6 +1,5 @@ /* eslint-disable no-unused-expressions */ /* eslint-disable jest/valid-expect */ -type StorybookApps = 'official-storybook'; type Addons = 'Actions' | 'Knobs'; diff --git a/code/cypress/integration/navigation.spec.ts b/code/cypress/integration/navigation.spec.ts deleted file mode 100644 index 0db350ececee..000000000000 --- a/code/cypress/integration/navigation.spec.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { visit } from '../helper'; - -describe('Navigation', () => { - before(() => { - visit('official-storybook'); - }); - - it('should search navigation item', () => { - cy.get('#storybook-explorer-searchfield').click({ force: true }); - cy.get('#storybook-explorer-searchfield').clear(); - cy.get('#storybook-explorer-searchfield').type('syntax'); - - cy.get('#storybook-explorer-menu button') - .should('contain', 'SyntaxHighlighter') - .and('not.contain', 'a11y'); - }); - - it('should display no results after searching a non-existing navigation item', () => { - cy.get('#storybook-explorer-searchfield').click({ force: true }); - cy.get('#storybook-explorer-searchfield').clear(); - cy.get('#storybook-explorer-searchfield').type('zzzzzzzzzz'); - - cy.get('#storybook-explorer-menu button').should('be.hidden'); - }); -}); - -describe('Routing', () => { - it('should navigate to sibling story sibling', () => { - visit('official-storybook/?path=/story/basics-actionbar--single-item'); - - cy.get('#basics-actionbar--many-items').click({ force: true }); - cy.url().should('include', 'path=/story/basics-actionbar--many-items'); - }); - - it('should directly visit a certain story and render correctly', () => { - visit('official-storybook/?path=/story/basics-actionbar--single-item'); - - cy.getStoryElement().should('contain.text', 'Clear'); - }); -}); diff --git a/code/examples/README.md b/code/examples/README.md index 09321964d372..4e5919f59178 100644 --- a/code/examples/README.md +++ b/code/examples/README.md @@ -4,6 +4,7 @@ Live examples of these: ### Next release +TODO: official storybook is removed, what should happen to this file? - [React Official](https://next--storybookjs.netlify.com/official-storybook/) - [Vue](https://next--storybookjs.netlify.com/vue-kitchen-sink/) - [Angular](https://next--storybookjs.netlify.com/angular-cli/) diff --git a/code/examples/html-kitchen-sink/stories/addon-jest.stories.js b/code/examples/html-kitchen-sink/stories/addon-jest.stories.js deleted file mode 100644 index eb80009be86b..000000000000 --- a/code/examples/html-kitchen-sink/stories/addon-jest.stories.js +++ /dev/null @@ -1,10 +0,0 @@ -import { withTests as wt } from '@storybook/addon-jest'; -import results from './addon-jest.testresults.json'; - -export default { - title: 'Addons/Jest', - decorators: [wt({ results })], -}; - -export const WithTests = () => 'This story shows test results'; -WithTests.parameters = { jest: 'addon-jest' }; diff --git a/code/examples/html-kitchen-sink/stories/addon-jest.testresults.json b/code/examples/html-kitchen-sink/stories/addon-jest.testresults.json deleted file mode 100644 index 2d270c0f4f92..000000000000 --- a/code/examples/html-kitchen-sink/stories/addon-jest.testresults.json +++ /dev/null @@ -1,105 +0,0 @@ -{ - "numFailedTestSuites": 1, - "numFailedTests": 4, - "numPassedTestSuites": 0, - "numPassedTests": 3, - "numPendingTestSuites": 0, - "numPendingTests": 0, - "numRuntimeErrorTestSuites": 0, - "numTotalTestSuites": 1, - "numTotalTests": 7, - "snapshot": { - "added": 0, - "didUpdate": false, - "failure": false, - "filesAdded": 0, - "filesRemoved": 0, - "filesUnmatched": 0, - "filesUpdated": 0, - "matched": 0, - "total": 0, - "unchecked": 0, - "uncheckedKeys": [], - "unmatched": 0, - "updated": 0 - }, - "startTime": 1525471117521, - "success": false, - "testResults": [ - { - "assertionResults": [ - { - "ancestorTitles": [], - "failureMessages": [], - "fullName": "true should be true", - "location": null, - "status": "passed", - "title": "true should be true" - }, - { - "ancestorTitles": ["In a describe: "], - "failureMessages": [], - "fullName": "In a describe: true should still be true", - "location": null, - "status": "passed", - "title": "true should still be true" - }, - { - "ancestorTitles": ["In a describe: "], - "failureMessages": [], - "fullName": "In a describe: a list should contain 3 items", - "location": null, - "status": "passed", - "title": "a list should contain 3 items" - }, - { - "ancestorTitles": ["In a describe: "], - "failureMessages": [ - "Error: \u001b[2mexpect(\u001b[22m\u001b[31mreceived\u001b[39m\u001b[2m).toEqual(\u001b[22m\u001b[32mexpected\u001b[39m\u001b[2m)\u001b[22m\n\nExpected value to equal:\n \u001b[32m\"everything is awesome\"\u001b[39m\nReceived:\n \u001b[31m\"everything is all right\"\u001b[39m\n at Object. (/Users/jetbrains/IdeaProjects/storybook/examples/official-storybook/tests/addon-jest.test.js:16:39)\n at Object.asyncFn (/Users/jetbrains/IdeaProjects/storybook/node_modules/jest-jasmine2/build/jasmine_async.js:82:37)\n at resolve (/Users/jetbrains/IdeaProjects/storybook/node_modules/jest-jasmine2/build/queue_runner.js:52:12)\n at new Promise ()\n at mapper (/Users/jetbrains/IdeaProjects/storybook/node_modules/jest-jasmine2/build/queue_runner.js:39:19)\n at promise.then (/Users/jetbrains/IdeaProjects/storybook/node_modules/jest-jasmine2/build/queue_runner.js:73:82)\n at \n at process._tickCallback (internal/process/next_tick.js:188:7)" - ], - "fullName": "In a describe: everything is awesome", - "location": null, - "status": "failed", - "title": "everything is awesome" - }, - { - "ancestorTitles": ["A bunch of failing tests: "], - "failureMessages": [ - "Error: \u001b[2mexpect(\u001b[22m\u001b[31mreceived\u001b[39m\u001b[2m).toBe(\u001b[22m\u001b[32mexpected\u001b[39m\u001b[2m) // Object.is equality\u001b[22m\n\nExpected value to be:\n \u001b[32mfalse\u001b[39m\nReceived:\n \u001b[31mtrue\u001b[39m\n at Object. (/Users/jetbrains/IdeaProjects/storybook/examples/official-storybook/tests/addon-jest.test.js:22:18)\n at Object.asyncFn (/Users/jetbrains/IdeaProjects/storybook/node_modules/jest-jasmine2/build/jasmine_async.js:82:37)\n at resolve (/Users/jetbrains/IdeaProjects/storybook/node_modules/jest-jasmine2/build/queue_runner.js:52:12)\n at new Promise ()\n at mapper (/Users/jetbrains/IdeaProjects/storybook/node_modules/jest-jasmine2/build/queue_runner.js:39:19)\n at promise.then (/Users/jetbrains/IdeaProjects/storybook/node_modules/jest-jasmine2/build/queue_runner.js:73:82)\n at \n at process._tickCallback (internal/process/next_tick.js:188:7)" - ], - "fullName": "A bunch of failing tests: true should still be true", - "location": null, - "status": "failed", - "title": "true should still be true" - }, - { - "ancestorTitles": ["A bunch of failing tests: "], - "failureMessages": [ - "Error: \u001b[2mexpect(\u001b[22m\u001b[31marray\u001b[39m\u001b[2m).toContain(\u001b[22m\u001b[32mvalue\u001b[39m\u001b[2m)\u001b[22m\n\nExpected array:\n \u001b[31m[\"a\", \"b\", \"3\"]\u001b[39m\nTo contain value:\n \u001b[32m301\u001b[39m\n at Object. (/Users/jetbrains/IdeaProjects/storybook/examples/official-storybook/tests/addon-jest.test.js:26:29)\n at Object.asyncFn (/Users/jetbrains/IdeaProjects/storybook/node_modules/jest-jasmine2/build/jasmine_async.js:82:37)\n at resolve (/Users/jetbrains/IdeaProjects/storybook/node_modules/jest-jasmine2/build/queue_runner.js:52:12)\n at new Promise ()\n at mapper (/Users/jetbrains/IdeaProjects/storybook/node_modules/jest-jasmine2/build/queue_runner.js:39:19)\n at promise.then (/Users/jetbrains/IdeaProjects/storybook/node_modules/jest-jasmine2/build/queue_runner.js:73:82)\n at \n at process._tickCallback (internal/process/next_tick.js:188:7)" - ], - "fullName": "A bunch of failing tests: a list should contain 3 items", - "location": null, - "status": "failed", - "title": "a list should contain 3 items" - }, - { - "ancestorTitles": ["A bunch of failing tests: "], - "failureMessages": [ - "Error: \u001b[2mexpect(\u001b[22m\u001b[31mfunction\u001b[39m\u001b[2m).toThrow(\u001b[22m\u001b[32mundefined\u001b[39m\u001b[2m)\u001b[22m\n\nExpected the function to throw an error.\nBut it didn't throw anything.\n at Object. (/Users/jetbrains/IdeaProjects/storybook/examples/official-storybook/tests/addon-jest.test.js:30:28)\n at Object.asyncFn (/Users/jetbrains/IdeaProjects/storybook/node_modules/jest-jasmine2/build/jasmine_async.js:82:37)\n at resolve (/Users/jetbrains/IdeaProjects/storybook/node_modules/jest-jasmine2/build/queue_runner.js:52:12)\n at new Promise ()\n at mapper (/Users/jetbrains/IdeaProjects/storybook/node_modules/jest-jasmine2/build/queue_runner.js:39:19)\n at promise.then (/Users/jetbrains/IdeaProjects/storybook/node_modules/jest-jasmine2/build/queue_runner.js:73:82)\n at \n at process._tickCallback (internal/process/next_tick.js:188:7)" - ], - "fullName": "A bunch of failing tests: should work", - "location": null, - "status": "failed", - "title": "should work" - } - ], - "endTime": 1525471122009, - "message": "\u001b[1m\u001b[31m \u001b[1m● \u001b[1mIn a describe: › everything is awesome\u001b[39m\u001b[22m\n\n \u001b[2mexpect(\u001b[22m\u001b[31mreceived\u001b[39m\u001b[2m).toEqual(\u001b[22m\u001b[32mexpected\u001b[39m\u001b[2m)\u001b[22m\n \n Expected value to equal:\n \u001b[32m\"everything is awesome\"\u001b[39m\n Received:\n \u001b[31m\"everything is all right\"\u001b[39m\n\u001b[2m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 14 | \u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 15 | \u001b[39m test(\u001b[32m'everything is awesome'\u001b[39m\u001b[33m,\u001b[39m () \u001b[33m=>\u001b[39m {\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m\u001b[31m\u001b[1m>\u001b[2m\u001b[39m\u001b[90m 16 | \u001b[39m expect(\u001b[32m'everything is all right'\u001b[39m)\u001b[33m.\u001b[39mtoEqual(\u001b[32m'everything is awesome'\u001b[39m)\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 17 | \u001b[39m })\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 18 | \u001b[39m})\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 19 | \u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[22m\n\u001b[2m \u001b[2mat Object. (\u001b[2m\u001b[0m\u001b[36mexamples/official-storybook/tests/addon-jest.test.js\u001b[39m\u001b[0m\u001b[2m:16:39)\u001b[2m\u001b[22m\n\n\u001b[1m\u001b[31m \u001b[1m● \u001b[1mA bunch of failing tests: › true should still be true\u001b[39m\u001b[22m\n\n \u001b[2mexpect(\u001b[22m\u001b[31mreceived\u001b[39m\u001b[2m).toBe(\u001b[22m\u001b[32mexpected\u001b[39m\u001b[2m) // Object.is equality\u001b[22m\n \n Expected value to be:\n \u001b[32mfalse\u001b[39m\n Received:\n \u001b[31mtrue\u001b[39m\n\u001b[2m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 20 | \u001b[39mdescribe(\u001b[32m'A bunch of failing tests: '\u001b[39m\u001b[33m,\u001b[39m () \u001b[33m=>\u001b[39m {\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 21 | \u001b[39m test(\u001b[32m'true should still be true'\u001b[39m\u001b[33m,\u001b[39m () \u001b[33m=>\u001b[39m {\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m\u001b[31m\u001b[1m>\u001b[2m\u001b[39m\u001b[90m 22 | \u001b[39m expect(\u001b[36mtrue\u001b[39m)\u001b[33m.\u001b[39mtoBe(\u001b[36mfalse\u001b[39m)\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 23 | \u001b[39m })\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 24 | \u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 25 | \u001b[39m test(\u001b[32m'a list should contain 3 items'\u001b[39m\u001b[33m,\u001b[39m () \u001b[33m=>\u001b[39m {\u001b[0m\u001b[22m\n\u001b[2m \u001b[22m\n\u001b[2m \u001b[2mat Object. (\u001b[2m\u001b[0m\u001b[36mexamples/official-storybook/tests/addon-jest.test.js\u001b[39m\u001b[0m\u001b[2m:22:18)\u001b[2m\u001b[22m\n\n\u001b[1m\u001b[31m \u001b[1m● \u001b[1mA bunch of failing tests: › a list should contain 3 items\u001b[39m\u001b[22m\n\n \u001b[2mexpect(\u001b[22m\u001b[31marray\u001b[39m\u001b[2m).toContain(\u001b[22m\u001b[32mvalue\u001b[39m\u001b[2m)\u001b[22m\n \n Expected array:\n \u001b[31m[\"a\", \"b\", \"3\"]\u001b[39m\n To contain value:\n \u001b[32m301\u001b[39m\n\u001b[2m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 24 | \u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 25 | \u001b[39m test(\u001b[32m'a list should contain 3 items'\u001b[39m\u001b[33m,\u001b[39m () \u001b[33m=>\u001b[39m {\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m\u001b[31m\u001b[1m>\u001b[2m\u001b[39m\u001b[90m 26 | \u001b[39m expect([\u001b[32m'a'\u001b[39m\u001b[33m,\u001b[39m \u001b[32m'b'\u001b[39m\u001b[33m,\u001b[39m \u001b[32m'3'\u001b[39m])\u001b[33m.\u001b[39mtoContain(\u001b[35m301\u001b[39m)\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 27 | \u001b[39m })\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 28 | \u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 29 | \u001b[39m test(\u001b[32m'should work'\u001b[39m\u001b[33m,\u001b[39m () \u001b[33m=>\u001b[39m {\u001b[0m\u001b[22m\n\u001b[2m \u001b[22m\n\u001b[2m \u001b[2mat Object. (\u001b[2m\u001b[0m\u001b[36mexamples/official-storybook/tests/addon-jest.test.js\u001b[39m\u001b[0m\u001b[2m:26:29)\u001b[2m\u001b[22m\n\n\u001b[1m\u001b[31m \u001b[1m● \u001b[1mA bunch of failing tests: › should work\u001b[39m\u001b[22m\n\n \u001b[2mexpect(\u001b[22m\u001b[31mfunction\u001b[39m\u001b[2m).toThrow(\u001b[22m\u001b[32mundefined\u001b[39m\u001b[2m)\u001b[22m\n \n Expected the function to throw an error.\n But it didn't throw anything.\n\u001b[2m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 28 | \u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 29 | \u001b[39m test(\u001b[32m'should work'\u001b[39m\u001b[33m,\u001b[39m () \u001b[33m=>\u001b[39m {\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m\u001b[31m\u001b[1m>\u001b[2m\u001b[39m\u001b[90m 30 | \u001b[39m expect(() \u001b[33m=>\u001b[39m {})\u001b[33m.\u001b[39mtoThrow()\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 31 | \u001b[39m })\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 32 | \u001b[39m})\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 33 | \u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[22m\n\u001b[2m \u001b[2mat Object. (\u001b[2m\u001b[0m\u001b[36mexamples/official-storybook/tests/addon-jest.test.js\u001b[39m\u001b[0m\u001b[2m:30:28)\u001b[2m\u001b[22m\n", - "name": "/Users/jetbrains/IdeaProjects/storybook/examples/official-storybook/tests/addon-jest.test.js", - "startTime": 1525471118647, - "status": "failed", - "summary": "" - } - ], - "wasInterrupted": false -} diff --git a/code/examples/html-kitchen-sink/tests/addon-jest.config.json b/code/examples/html-kitchen-sink/tests/addon-jest.config.json index b550c2b11067..a0e2205cb206 100644 --- a/code/examples/html-kitchen-sink/tests/addon-jest.config.json +++ b/code/examples/html-kitchen-sink/tests/addon-jest.config.json @@ -6,5 +6,5 @@ ".*": "babel-jest" }, "setupFilesAfterEnv": ["/../scripts/jest.init.js"], - "testMatch": ["/examples/official-storybook/tests/addon-jest.test.js"] + "testMatch": [] } diff --git a/code/examples/official-storybook/.env b/code/examples/official-storybook/.env deleted file mode 100644 index 23af4d561fae..000000000000 --- a/code/examples/official-storybook/.env +++ /dev/null @@ -1 +0,0 @@ -DOTENV_DISPLAY_WARNING=none diff --git a/code/examples/official-storybook/.env.development b/code/examples/official-storybook/.env.development deleted file mode 100644 index 3746c482ab58..000000000000 --- a/code/examples/official-storybook/.env.development +++ /dev/null @@ -1 +0,0 @@ -DOTENV_DEVELOPMENT_DISPLAY_WARNING=true diff --git a/code/examples/official-storybook/README.md b/code/examples/official-storybook/README.md deleted file mode 100644 index 2ada0aa35033..000000000000 --- a/code/examples/official-storybook/README.md +++ /dev/null @@ -1,14 +0,0 @@ -# Official storybook - -This storybook includes stories for: - -- `@storybook/components` - reusable UI components for addon authors -- `@storybook/ui` - the UI of storybook itself -- `@storybook/addon-*` - various addons. -- `@storybook/other-*` - various examples. - -## How to make new `build-storybook`s: - -```sh -sudo ln -s ../../{new-example}/storybook-static /Users/{user}/{location-of-storybook-repo}/core/examples/official-storybook/built-storybookjs/{new-example} -``` diff --git a/code/examples/official-storybook/babel.config.js b/code/examples/official-storybook/babel.config.js deleted file mode 100644 index d8878bebe583..000000000000 --- a/code/examples/official-storybook/babel.config.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - presets: ['@babel/preset-react', '@babel/preset-typescript'], -}; diff --git a/code/examples/official-storybook/components/BaseButton.js b/code/examples/official-storybook/components/BaseButton.js deleted file mode 100644 index 17b2ce719fda..000000000000 --- a/code/examples/official-storybook/components/BaseButton.js +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -/** BaseButton component description imported from comments inside the component file */ -const BaseButton = ({ disabled, label, onClick, style }) => ( - -); - -BaseButton.defaultProps = { - disabled: false, - onClick: () => {}, - style: {}, -}; - -BaseButton.propTypes = { - /** Boolean indicating whether the button should render as disabled */ - disabled: PropTypes.bool, - /** button label. */ - label: PropTypes.string.isRequired, - /** onClick handler */ - onClick: PropTypes.func, - /** Custom styles */ - style: PropTypes.shape({}), -}; - -export default BaseButton; diff --git a/code/examples/official-storybook/components/ButtonGroup.js b/code/examples/official-storybook/components/ButtonGroup.js deleted file mode 100644 index 6b8187dac6bb..000000000000 --- a/code/examples/official-storybook/components/ButtonGroup.js +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -/** ButtonGroup component description from docgen */ -export const ButtonGroup = ({ background, children }) => ( -
{children}
-); - -ButtonGroup.defaultProps = { - background: '#ff0', - children: null, -}; - -ButtonGroup.propTypes = { - /** - * Background color for the group - */ - background: PropTypes.string, - children: PropTypes.arrayOf(PropTypes.element), -}; - -/** SubGroup component description from docgen */ -export const SubGroup = ({ background, children }) =>
{children}
; - -SubGroup.defaultProps = { - background: '#0f0', - children: null, -}; - -SubGroup.propTypes = { - /** - * Background color for the sub-group - */ - background: PropTypes.string, - children: PropTypes.arrayOf(PropTypes.element), -}; diff --git a/code/examples/official-storybook/components/DelayedRender.js b/code/examples/official-storybook/components/DelayedRender.js deleted file mode 100644 index 85ec79e1a6af..000000000000 --- a/code/examples/official-storybook/components/DelayedRender.js +++ /dev/null @@ -1,30 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; - -export default class DelayedRender extends Component { - static propTypes = { - children: PropTypes.node.isRequired, - }; - - state = { - show: false, - }; - - componentDidMount() { - this.showTO = setTimeout(() => { - this.setState({ - show: true, - }); - }, 1000); - } - - componentWillUnmount() { - clearTimeout(this.showTO); - } - - render() { - const { show } = this.state; - const { children } = this.props; - return show ? children :
; - } -} diff --git a/code/examples/official-storybook/components/DocgenButton.js b/code/examples/official-storybook/components/DocgenButton.js deleted file mode 100644 index 801605b18845..000000000000 --- a/code/examples/official-storybook/components/DocgenButton.js +++ /dev/null @@ -1,176 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -/** - * DocgenButton component description imported from comments inside the component file, - * - * *Important Note*: Unlike with normal `` elements, setting this will - * not validate the input contents. This is because in this project we use - * Formik and Yup to validate fields at the form-level, not at the individual - * input level. It is still very important to set this value properly for - * accessibility and user experience. - * - * Here's a list to test out formatting. - * - * * `"number"` Any number not represented by a more specific type. - * * `"password"` A password. - * * `"email"` An email address. - * * `"tel"` A phone or fax number. Shows the phone number keypad on - * mobile keyboards. - * - * Here is a test for code blocks - * - * ```jsx - * const Foo = () => ( - *
foo
- * ); - * ``` - */ -export const DocgenButton = ({ disabled, label, onClick }) => ( - -); - -DocgenButton.defaultProps = { - disabled: false, - onClick: () => {}, - optionalString: 'Default String', - one: { key: 1 }, - two: { - thing: { - id: 2, - func: () => {}, - arr: [], - }, - }, - obj: { - key: 'value', - }, - shape: { - id: 3, - func: () => {}, - arr: [], - shape: { - shape: { - foo: 'bar', - }, - }, - }, - arrayOf: [1, 2, 3], - msg: new Set(), - enm: 'News', - enmEval: 'Photos', - union: 'hello', -}; - -/* eslint-disable react/no-unused-prop-types */ - -DocgenButton.propTypes = { - /** Boolean indicating whether the button should render as disabled */ - disabled: PropTypes.bool, - /** button label. */ - label: PropTypes.string.isRequired, - /** onClick handler */ - onClick: PropTypes.func, - /** - * A simple `objectOf` propType. - */ - one: PropTypes.objectOf(PropTypes.number), - /** - * A very complex `objectOf` propType. - */ - two: PropTypes.objectOf( - PropTypes.shape({ - /** - * Just an internal propType for a shape. - * It's also required, and as you can see it supports multi-line comments! - */ - id: PropTypes.number.isRequired, - /** - * A simple non-required function - */ - func: PropTypes.func, - /** - * An `arrayOf` shape - */ - arr: PropTypes.arrayOf( - PropTypes.shape({ - /** - * 5-level deep propType definition and still works. - */ - index: PropTypes.number.isRequired, - }) - ), - }) - ), - - /** - * Plain object propType (use shape!!) - */ - obj: PropTypes.object, // eslint-disable-line react/forbid-prop-types - - /** - * propType for shape with nested arrayOf - * - * Also, multi-line description - */ - shape: PropTypes.shape({ - /** - * Just an internal propType for a shape. - * It's also required, and as you can see it supports multi-line comments! - */ - id: PropTypes.number.isRequired, - /** - * A simple non-required function - */ - func: PropTypes.func, - /** - * An `arrayOf` shape - */ - arr: PropTypes.arrayOf( - PropTypes.shape({ - /** - * 5-level deep propType definition and still works. - */ - index: PropTypes.number.isRequired, - }) - ), - - shape: PropTypes.shape({ - shape: PropTypes.shape({ - foo: PropTypes.string, - }), - }), - }), - - /** - * array of a certain type - */ - arrayOf: PropTypes.arrayOf(PropTypes.number), - - /** - * `instanceOf` is also supported and the custom type will be shown instead of `instanceOf` - */ - msg: PropTypes.instanceOf(Set), - /** - * `oneOf` is basically an Enum which is also supported but can be pretty big. - * - * Testing a list: - * - * - `News` first - * - `Photos` second - */ - enm: PropTypes.oneOf(['News', 'Photos']), - enmEval: PropTypes.oneOf((() => ['News', 'Photos'])()), - /** - * A multi-type prop is also valid and is displayed as `Union` - */ - union: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Set)]), - /** - * test string with a comment that has - * two identical lines - * two identical lines - */ - optionalString: PropTypes.string, -}; diff --git a/code/examples/official-storybook/components/ForwardRefButton.js b/code/examples/official-storybook/components/ForwardRefButton.js deleted file mode 100644 index 67e704dd8c26..000000000000 --- a/code/examples/official-storybook/components/ForwardRefButton.js +++ /dev/null @@ -1,47 +0,0 @@ -import React, { forwardRef } from 'react'; -import PropTypes from 'prop-types'; -import BaseButton from './BaseButton'; - -const ForwardRefButtonRender = ({ label, ...props }, ref) => ( - -); - -ForwardRefButtonRender.propTypes = { - /** Boolean indicating whether the button should render as disabled */ - disabled: PropTypes.bool, - /** button label. */ - label: PropTypes.string.isRequired, - /** onClick handler */ - onClick: PropTypes.func, - /** Custom styles */ - style: PropTypes.shape({}), -}; - -ForwardRefButtonRender.defaultProps = { - disabled: false, - onClick: () => {}, - style: {}, -}; - -export const ForwardRefButtonInnerPropTypes = forwardRef(ForwardRefButtonRender); - -export const ForwardRefButtonOuterPropTypes = forwardRef(({ label, ...props }, ref) => ( - -)); - -ForwardRefButtonOuterPropTypes.defaultProps = { - disabled: false, - onClick: () => {}, - style: {}, -}; - -ForwardRefButtonOuterPropTypes.propTypes = { - /** Boolean indicating whether the button should render as disabled */ - disabled: PropTypes.bool, - /** button label. */ - label: PropTypes.string.isRequired, - /** onClick handler */ - onClick: PropTypes.func, - /** Custom styles */ - style: PropTypes.shape({}), -}; diff --git a/code/examples/official-storybook/components/ImportedPropsButton.js b/code/examples/official-storybook/components/ImportedPropsButton.js deleted file mode 100644 index b8a1e7e88cd6..000000000000 --- a/code/examples/official-storybook/components/ImportedPropsButton.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { DocgenButton } from './DocgenButton'; - -/** Button component description */ -const ImportedPropsButton = ({ disabled, label, onClick }) => ( - -); - -ImportedPropsButton.defaultProps = DocgenButton.defaultProps; - -ImportedPropsButton.propTypes = DocgenButton.propTypes; - -export default ImportedPropsButton; diff --git a/code/examples/official-storybook/components/MemoButton.js b/code/examples/official-storybook/components/MemoButton.js deleted file mode 100644 index 8e8dc72a7d33..000000000000 --- a/code/examples/official-storybook/components/MemoButton.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; - -import BaseButton from './BaseButton'; - -export const MemoButton = React.memo(BaseButton); diff --git a/code/examples/official-storybook/components/NamedExportButton.js b/code/examples/official-storybook/components/NamedExportButton.js deleted file mode 100644 index 8a0491c24b77..000000000000 --- a/code/examples/official-storybook/components/NamedExportButton.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import BaseButton from './BaseButton'; - -const NamedExportButton = (props) => ; - -NamedExportButton.defaultProps = { - disabled: false, - onClick: () => {}, - style: {}, -}; - -NamedExportButton.propTypes = { - /** Boolean indicating whether the button should render as disabled */ - disabled: PropTypes.bool, - /** button label. */ - label: PropTypes.string.isRequired, - /** onClick handler */ - onClick: PropTypes.func, - /** Custom styles */ - style: PropTypes.shape({}), -}; - -export { NamedExportButton }; diff --git a/code/examples/official-storybook/components/OptionalButton.tsx b/code/examples/official-storybook/components/OptionalButton.tsx deleted file mode 100644 index dc10a20c4937..000000000000 --- a/code/examples/official-storybook/components/OptionalButton.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; - -// Repro #11019 -interface Props { - kind?: 'a' | 'b'; - disabled?: boolean; -} - -export const OptionalButton = ({ disabled = false, kind = 'a' }: Props) => ( - // eslint-disable-next-line react/button-has-type - -); - -export default OptionalButton; diff --git a/code/examples/official-storybook/components/TableComponent.js b/code/examples/official-storybook/components/TableComponent.js deleted file mode 100644 index 0a738c793be3..000000000000 --- a/code/examples/official-storybook/components/TableComponent.js +++ /dev/null @@ -1,52 +0,0 @@ -/* eslint-disable react/forbid-prop-types */ -import React from 'react'; -import PropTypes from 'prop-types'; - -const Red = (props) => ; -const TableComponent = ({ propDefinitions }) => { - const props = propDefinitions.map( - ({ property, propType, required, description, defaultValue }) => ( - - - {property} - {required ? * : null} - - {propType.name} - {JSON.stringify(defaultValue)} - {description} - - ) - ); - - return ( - - - - - - - - - - {props} -
nametypedefaultdescription
- ); -}; - -TableComponent.defaultProps = { - propDefinitions: [], -}; - -TableComponent.propTypes = { - propDefinitions: PropTypes.arrayOf( - PropTypes.shape({ - property: PropTypes.string.isRequired, - propType: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired, - required: PropTypes.bool.isRequired, - description: PropTypes.string, - defaultValue: PropTypes.any, - }) - ), -}; - -export default TableComponent; diff --git a/code/examples/official-storybook/components/TsButton.tsx b/code/examples/official-storybook/components/TsButton.tsx deleted file mode 100644 index d9ca92f59252..000000000000 --- a/code/examples/official-storybook/components/TsButton.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React, { FC } from 'react'; - -export type Type = 'default' | 'action'; - -interface Props { - /** - * Click event handler - * @default null - */ - onClick?: () => void; - - /** - * Button type yo - */ - type?: Type; -} - -const Button: FC = ({ children, type = 'default', onClick }) => { - return ( - - ); -}; - -export default Button; diff --git a/code/examples/official-storybook/components/addon-a11y/Button.js b/code/examples/official-storybook/components/addon-a11y/Button.js deleted file mode 100644 index 293f6ca97303..000000000000 --- a/code/examples/official-storybook/components/addon-a11y/Button.js +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -const styles = { - button: { - padding: '12px 6px', - fontSize: '12px', - lineHeight: '16px', - borderRadius: '5px', - }, - ok: { - backgroundColor: '#028402', - color: '#ffffff', - }, - wrong: { - color: '#ffffff', - backgroundColor: '#4caf50', - }, -}; - -function Button({ content, disabled, contrast }) { - return ( - - ); -} - -Button.propTypes = { - content: PropTypes.string, - disabled: PropTypes.bool, - contrast: PropTypes.oneOf(['ok', 'wrong']), -}; - -Button.defaultProps = { - content: 'null', - disabled: false, - contrast: 'ok', -}; - -export default Button; diff --git a/code/examples/official-storybook/components/addon-a11y/Form/Input.js b/code/examples/official-storybook/components/addon-a11y/Form/Input.js deleted file mode 100644 index f5fca29664d8..000000000000 --- a/code/examples/official-storybook/components/addon-a11y/Form/Input.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -function Input({ id, value, type, placeholder }) { - return ; -} - -Input.propTypes = { - type: PropTypes.oneOf(['text', 'password']), - id: PropTypes.string, - value: PropTypes.string, - placeholder: PropTypes.string, -}; - -Input.defaultProps = { - type: null, - id: null, - value: null, - placeholder: null, -}; - -export default Input; diff --git a/code/examples/official-storybook/components/addon-a11y/Form/Label.js b/code/examples/official-storybook/components/addon-a11y/Form/Label.js deleted file mode 100644 index 5f3799a6ac6c..000000000000 --- a/code/examples/official-storybook/components/addon-a11y/Form/Label.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -const styles = { - label: { - padding: '0 6px', - }, -}; - -function Label({ id, content }) { - return ( - - ); -} - -Label.propTypes = { - content: PropTypes.string.isRequired, - id: PropTypes.string.isRequired, -}; - -export default Label; diff --git a/code/examples/official-storybook/components/addon-a11y/Form/Row.js b/code/examples/official-storybook/components/addon-a11y/Form/Row.js deleted file mode 100644 index 51f87b040529..000000000000 --- a/code/examples/official-storybook/components/addon-a11y/Form/Row.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -import Label from './Label'; -import Input from './Input'; - -function Row({ label, input }) { - return ( -
- {label} - {input} -
- ); -} - -Row.propTypes = { - label: PropTypes.shape({ type: PropTypes.oneOf([Label]) }), - input: PropTypes.shape({ type: PropTypes.oneOf([Input]) }).isRequired, -}; - -Row.defaultProps = { - label: null, -}; - -export default Row; diff --git a/code/examples/official-storybook/components/addon-a11y/Form/index.js b/code/examples/official-storybook/components/addon-a11y/Form/index.js deleted file mode 100644 index c893c0a55dd6..000000000000 --- a/code/examples/official-storybook/components/addon-a11y/Form/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import Input from './Input'; -import Label from './Label'; -import Row from './Row'; - -export { Input, Label, Row }; diff --git a/code/examples/official-storybook/components/addon-measure/ShadowRoot.js b/code/examples/official-storybook/components/addon-measure/ShadowRoot.js deleted file mode 100644 index 161e357992c8..000000000000 --- a/code/examples/official-storybook/components/addon-measure/ShadowRoot.js +++ /dev/null @@ -1,63 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { drawSelectedElement } from '../../../../addons/measure/src/box-model/visualizer'; -import { init, destroy } from '../../../../addons/measure/src/box-model/canvas'; - -export const ShadowRoot = ({ label = 'Hello from shadow DOM', drawMode = 'ROOT' }) => { - const ref = React.useRef(); - - React.useEffect(() => { - if (!ref.current.attachShadow) return; - - ref.current.attachShadow({ mode: 'open' }); - - ref.current.shadowRoot.innerHTML = ` - - - `; - - init(); - drawSelectedElement(drawMode === 'ROOT' ? ref.current : ref.current.shadowRoot.children[1]); - - // eslint-disable-next-line consistent-return - return () => { - destroy(); - }; - }, []); - - return
; -}; - -ShadowRoot.propTypes = { - label: PropTypes.string, - drawMode: PropTypes.oneOf(['ROOT', 'NESTED']), -}; - -ShadowRoot.defaultProps = { - label: 'Hello from shadow DOM', - drawMode: 'ROOT', -}; diff --git a/code/examples/official-storybook/components/addon-measure/Visualization.js b/code/examples/official-storybook/components/addon-measure/Visualization.js deleted file mode 100644 index 6862e2073e19..000000000000 --- a/code/examples/official-storybook/components/addon-measure/Visualization.js +++ /dev/null @@ -1,34 +0,0 @@ -import React, { useEffect, useRef } from 'react'; -import PropTypes from 'prop-types'; -import { drawSelectedElement } from '../../../../addons/measure/src/box-model/visualizer'; -import { init, destroy } from '../../../../addons/measure/src/box-model/canvas'; - -export const Visualization = ({ render }) => { - const element = useRef(null); - - useEffect(() => { - if (element.current) { - init(); - drawSelectedElement(element.current); - } - - return () => { - destroy(); - }; - }, [element]); - - return ( -
- {render(element)} -
- ); -}; - -Visualization.propTypes = { - render: PropTypes.func.isRequired, -}; diff --git a/code/examples/official-storybook/components/page/Button.js b/code/examples/official-storybook/components/page/Button.js deleted file mode 100644 index cb9aad8c06cf..000000000000 --- a/code/examples/official-storybook/components/page/Button.js +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import './button.css'; - -/** - * Primary UI component for user interaction - */ -export const Button = ({ primary, size, label, ...props }) => { - const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; - return ( - - ); -}; - -Button.propTypes = { - primary: PropTypes.bool, - size: PropTypes.oneOf(['small', 'medium', 'large']), - label: PropTypes.string.isRequired, - onClick: PropTypes.func, -}; - -Button.defaultProps = { - primary: false, - size: 'medium', - onClick: undefined, -}; diff --git a/code/examples/official-storybook/components/page/Header.js b/code/examples/official-storybook/components/page/Header.js deleted file mode 100644 index e6eea8f07ee6..000000000000 --- a/code/examples/official-storybook/components/page/Header.js +++ /dev/null @@ -1,52 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -import { Button } from './Button'; -import './header.css'; - -export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => ( -
-
-
- - - - - - - -

Acme

-
-
- {user ? ( -
-
-
-); - -Header.propTypes = { - user: PropTypes.shape({}), - onLogin: PropTypes.func.isRequired, - onLogout: PropTypes.func.isRequired, - onCreateAccount: PropTypes.func.isRequired, -}; - -Header.defaultProps = { - user: null, -}; diff --git a/code/examples/official-storybook/components/page/Page.js b/code/examples/official-storybook/components/page/Page.js deleted file mode 100644 index b8abe417aac8..000000000000 --- a/code/examples/official-storybook/components/page/Page.js +++ /dev/null @@ -1,74 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -import { Header } from './Header'; -import './page.css'; - -export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => ( -
-
- -
-

Pages in Storybook

-

- We recommend building UIs with a{' '} - - component-driven - {' '} - process starting with atomic components and ending with pages. -

-

- Render pages with mock data. This makes it easy to build and review page states without - needing to navigate to them in your app. Here are some handy patterns for managing page data - in Storybook: -

-
    -
  • - Use a higher-level connected component. Storybook helps you compose such data from the - "args" of child component stories -
    • -
  • - Assemble data in the page component from your services. You can mock these services out - using Storybook. -
    • -
-

- Get a guided tutorial on component-driven development at{' '} - - Storybook tutorials - - . Read more in the{' '} - - docs - - . -

-
- Tip Adjust the width of the canvas with the{' '} - - - - - - Viewports addon in the toolbar -
-
-
-); -Page.propTypes = { - user: PropTypes.shape({}), - onLogin: PropTypes.func, - onLogout: PropTypes.func, - onCreateAccount: PropTypes.func, -}; - -Page.defaultProps = { - user: null, - onLogin: () => {}, - onLogout: () => {}, - onCreateAccount: () => {}, -}; diff --git a/code/examples/official-storybook/components/page/button.css b/code/examples/official-storybook/components/page/button.css deleted file mode 100644 index dc91dc76370b..000000000000 --- a/code/examples/official-storybook/components/page/button.css +++ /dev/null @@ -1,30 +0,0 @@ -.storybook-button { - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-weight: 700; - border: 0; - border-radius: 3em; - cursor: pointer; - display: inline-block; - line-height: 1; -} -.storybook-button--primary { - color: white; - background-color: #1ea7fd; -} -.storybook-button--secondary { - color: #333; - background-color: transparent; - box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; -} -.storybook-button--small { - font-size: 12px; - padding: 10px 16px; -} -.storybook-button--medium { - font-size: 14px; - padding: 11px 20px; -} -.storybook-button--large { - font-size: 16px; - padding: 12px 24px; -} diff --git a/code/examples/official-storybook/components/page/header.css b/code/examples/official-storybook/components/page/header.css deleted file mode 100644 index c1a97056ed44..000000000000 --- a/code/examples/official-storybook/components/page/header.css +++ /dev/null @@ -1,26 +0,0 @@ -.wrapper { - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); - padding: 15px 20px; - display: flex; - align-items: center; - justify-content: space-between; -} - -svg { - display: inline-block; - vertical-align: top; -} - -.title { - font-weight: 900; - font-size: 20px; - line-height: 1; - margin: 6px 0 6px 10px; - display: inline-block; - vertical-align: top; -} - -button + button { - margin-left: 10px; -} diff --git a/code/examples/official-storybook/components/page/page.css b/code/examples/official-storybook/components/page/page.css deleted file mode 100644 index b67e9d4d1ed5..000000000000 --- a/code/examples/official-storybook/components/page/page.css +++ /dev/null @@ -1,73 +0,0 @@ -article { - background-color: #fff; -} - -section { - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-size: 14px; - line-height: 24px; - padding: 48px 20px; - margin: 0 auto; - max-width: 600px; - color: #333; -} - -.page-title { - font-weight: 900; - font-size: 32px; - line-height: 1; - margin: 0 0 4px; - display: inline-block; - vertical-align: top; -} - -p { - margin: 1em 0; -} - -a { - text-decoration: none; - color: #1ea7fd; -} - -ul { - padding-left: 30px; - margin: 1em 0; -} - -li { - margin-bottom: 8px; -} - -.tip { - display: inline-block; - border-radius: 1em; - font-size: 11px; - line-height: 12px; - font-weight: 700; - background: #e7fdd8; - color: #66bf3c; - padding: 4px 12px; - margin-right: 10px; - vertical-align: top; -} - -.tip-wrapper { - font-size: 13px; - line-height: 20px; - margin-top: 40px; - margin-bottom: 40px; -} - -.tip-wrapper svg { - display: inline-block; - height: 12px; - width: 12px; - margin-right: 4px; - vertical-align: top; - margin-top: 3px; -} - -.tip-wrapper svg path { - fill: #1ea7fd; -} diff --git a/code/examples/official-storybook/components/react-demo.tsx b/code/examples/official-storybook/components/react-demo.tsx deleted file mode 100644 index d9761532fd34..000000000000 --- a/code/examples/official-storybook/components/react-demo.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React, { FC, HTMLAttributes } from 'react'; - -const styles = { - border: '1px solid #eee', - borderRadius: 3, - backgroundColor: '#FFFFFF', - cursor: 'pointer', - fontSize: 15, - padding: '3px 10px', - margin: 10, -}; - -type ButtonProps = Pick, 'onClick'>; -export const Button: FC = ({ children, onClick }) => ( - -); - -Button.displayName = 'Button'; -Button.defaultProps = { - onClick: () => {}, -}; - -interface WelcomeProps { - showApp: () => void; -} - -export const Welcome: FC = ({ showApp }) => ( - -); -Welcome.displayName = 'Welcome'; -Welcome.defaultProps = { - showApp: () => {}, -}; diff --git a/code/examples/official-storybook/head-warning.js b/code/examples/official-storybook/head-warning.js deleted file mode 100644 index 3020333992e0..000000000000 --- a/code/examples/official-storybook/head-warning.js +++ /dev/null @@ -1,16 +0,0 @@ -import global from 'global'; - -const { document } = global; - -// HMR will cause this code to be invoked multiple times, so each warning should have a unique ID -export default function addHeadWarning(id, text) { - if (!document.getElementById(id)) { - const warning = document.createElement('h1'); - warning.textContent = text; - warning.id = id; - warning.style.backgroundColor = 'tomato'; - warning.style.padding = '10px'; - - document.body.insertBefore(warning, document.body.firstChild); - } -} diff --git a/code/examples/official-storybook/intro.stories.mdx b/code/examples/official-storybook/intro.stories.mdx deleted file mode 100644 index b192db9fded5..000000000000 --- a/code/examples/official-storybook/intro.stories.mdx +++ /dev/null @@ -1,5 +0,0 @@ - - -# Official-storybook - -Welcome to `official-storybook`, a collection of test cases and demos for `@storybook/react` and all its addons. diff --git a/code/examples/official-storybook/main.ts b/code/examples/official-storybook/main.ts deleted file mode 100644 index ad4819c63a84..000000000000 --- a/code/examples/official-storybook/main.ts +++ /dev/null @@ -1,59 +0,0 @@ -/// -import type { StorybookConfig } from '@storybook/react-webpack5'; - -const config: StorybookConfig = { - stories: [ - // FIXME: Breaks e2e tests './intro.stories.mdx', - '../../lib/ui/src/**/*.stories.@(ts|tsx|js|jsx|mdx)', - '../../lib/components/src/**/*.stories.@(ts|tsx|js|jsx|mdx)', - './stories/**/*.stories.@(ts|tsx|js|jsx|mdx)', - './../../addons/docs/**/*.stories.@(ts|tsx|js|jsx|mdx)', - './../../addons/interactions/**/*.stories.@(ts|tsx|js|jsx|mdx)', - ], - addons: [ - { - name: '@storybook/addon-docs', - options: { - transcludeMarkdown: true, - // needed if you use addon-docs in conjunction - // with addon-storysource - sourceLoaderOptions: null, - }, - }, - '@storybook/addon-essentials', - '@storybook/addon-interactions', - '@storybook/addon-storysource', - '@storybook/addon-links', - '@storybook/addon-jest', - '@storybook/addon-a11y', - ], - core: { - channelOptions: { allowFunction: false, maxDepth: 10 }, - disableTelemetry: true, - }, - logLevel: 'debug', - features: { - interactionsDebugger: true, - breakingChangesV7: false, - storyStoreV7: false, - }, - staticDirs: [ - './statics/public', - { - from: './statics/examples/example1', - to: '/example1', - }, - { - from: './statics/examples/example2', - to: '/example2', - }, - ], - framework: { - name: '@storybook/react-webpack5', - options: { - fastRefresh: true, - strictMode: true, - }, - }, -}; -module.exports = config; diff --git a/code/examples/official-storybook/manager-head.html b/code/examples/official-storybook/manager-head.html deleted file mode 100644 index 7d058f58633b..000000000000 --- a/code/examples/official-storybook/manager-head.html +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/code/examples/official-storybook/manager.js b/code/examples/official-storybook/manager.js deleted file mode 100644 index 77104c4f6326..000000000000 --- a/code/examples/official-storybook/manager.js +++ /dev/null @@ -1,69 +0,0 @@ -import React from 'react'; -import { addons } from '@storybook/addons'; -import { themes, styled } from '@storybook/theming'; -import { Icons } from '@storybook/components'; - -import addHeadWarning from './head-warning'; - -addHeadWarning('manager-head-not-loaded', 'Manager head not loaded'); - -const PrefixIcon = styled(Icons)(({ theme }) => ({ - marginRight: 5, - fontSize: 'inherit', - height: 12, - width: 12, - paddingTop: 1, - display: 'inline', - alignSelf: 'center', -})); - -addons.setConfig({ - theme: themes.light, // { base: 'dark', brandTitle: 'Storybook!' }, - previewTabs: { - canvas: null, - 'storybook/docs/panel': null, - 'storybookjs/notes/panel': { title: 'Annotations', hidden: true }, - graphiql: { - hidden: true, - }, - toolbar: { - title: { hidden: false }, - zoom: { hidden: false }, - eject: { hidden: false }, - copy: { hidden: false }, - fullscreen: { hidden: false }, - }, - }, - sidebar: { - collapsedRoots: ['other'], - renderLabel: ({ id, name }) => { - const map = { - addons: ( - <> - - {name} - - ), - 'addons-a11y': ( - <> - - {name} - - ), - 'addons-a11y-basebutton': ( - <> - - {name} - - ), - 'addons-a11y-basebutton--default': ( - <> - - {name} - - ), - }; - return map[id]; - }, - }, -}); diff --git a/code/examples/official-storybook/package.json b/code/examples/official-storybook/package.json deleted file mode 100644 index b8d25ec2253e..000000000000 --- a/code/examples/official-storybook/package.json +++ /dev/null @@ -1,74 +0,0 @@ -{ - "name": "official-storybook", - "version": "7.0.0-alpha.34", - "private": true, - "scripts": { - "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true storybook build -c ./", - "debug": "cross-env NODE_OPTIONS=--inspect-brk STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true storybook dev -p 9011 -c ./", - "do-storyshots-puppeteer": "../../node_modules/.bin/jest --projects=./storyshots-puppeteer", - "generate-addon-jest-testresults": "jest --config=tests/addon-jest.config.json --json --outputFile=stories/addon-jest.testresults.json", - "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true storybook dev -p 9011 -c ./ --no-manager-cache", - "storyshots-puppeteer": "storybook build && yarn run do-storyshots-puppeteer" - }, - "dependencies": { - "formik": "^2.2.9" - }, - "devDependencies": { - "@emotion/jest": "^11.10.0", - "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5", - "@storybook/addon-a11y": "7.0.0-alpha.34", - "@storybook/addon-actions": "7.0.0-alpha.34", - "@storybook/addon-backgrounds": "7.0.0-alpha.34", - "@storybook/addon-controls": "7.0.0-alpha.34", - "@storybook/addon-docs": "7.0.0-alpha.34", - "@storybook/addon-highlight": "7.0.0-alpha.34", - "@storybook/addon-interactions": "7.0.0-alpha.34", - "@storybook/addon-jest": "7.0.0-alpha.34", - "@storybook/addon-links": "7.0.0-alpha.34", - "@storybook/addon-storyshots": "7.0.0-alpha.34", - "@storybook/addon-storyshots-puppeteer": "7.0.0-alpha.34", - "@storybook/addon-storysource": "7.0.0-alpha.34", - "@storybook/addon-toolbars": "7.0.0-alpha.34", - "@storybook/addon-viewport": "7.0.0-alpha.34", - "@storybook/addons": "7.0.0-alpha.34", - "@storybook/cli": "7.0.0-alpha.34", - "@storybook/components": "7.0.0-alpha.34", - "@storybook/core-events": "7.0.0-alpha.34", - "@storybook/design-system": "^5.4.7", - "@storybook/jest": "^0.0.10", - "@storybook/node-logger": "7.0.0-alpha.34", - "@storybook/react": "7.0.0-alpha.34", - "@storybook/react-webpack5": "7.0.0-alpha.34", - "@storybook/router": "7.0.0-alpha.34", - "@storybook/source-loader": "7.0.0-alpha.34", - "@storybook/testing-library": "0.0.14-next.0", - "@storybook/theming": "7.0.0-alpha.34", - "@testing-library/dom": "^7.31.2", - "@testing-library/user-event": "^13.1.9", - "chromatic": "^6.0.2", - "cors": "^2.8.5", - "cross-env": "^7.0.3", - "enzyme-to-json": "^3.6.1", - "eventemitter3": "^4.0.7", - "express": "^4.17.1", - "format-json": "^1.0.3", - "global": "^4.4.0", - "lodash": "^4.17.21", - "paths.macro": "^3.0.1", - "prop-types": "^15.7.2", - "react": "16.14.0", - "react-dom": "16.14.0", - "storybook": "7.0.0-alpha.34", - "terser-webpack-plugin": "^5.3.1", - "uuid-browser": "^3.1.0", - "webpack": "5" - }, - "peerDependencies": { - "puppeteer": "^2.0.0 || ^3.0.0" - }, - "storybook": { - "chromatic": { - "projectToken": "ab7m45tp9p" - } - } -} diff --git a/code/examples/official-storybook/preview-head.html b/code/examples/official-storybook/preview-head.html deleted file mode 100644 index 832d1d793982..000000000000 --- a/code/examples/official-storybook/preview-head.html +++ /dev/null @@ -1,12 +0,0 @@ - diff --git a/code/examples/official-storybook/preview.js b/code/examples/official-storybook/preview.js deleted file mode 100644 index d9a9ffa5ed45..000000000000 --- a/code/examples/official-storybook/preview.js +++ /dev/null @@ -1,267 +0,0 @@ -import global from 'global'; -import React, { Fragment, useEffect } from 'react'; -import isChromatic from 'chromatic/isChromatic'; -import { - Global, - ThemeProvider, - themes, - createReset, - convert, - styled, - useTheme, -} from '@storybook/theming'; -import { Symbols } from '@storybook/components'; - -import addHeadWarning from './head-warning'; - -const { document } = global; - -if (process.env.NODE_ENV === 'development') { - if (!process.env.DOTENV_DEVELOPMENT_DISPLAY_WARNING) { - addHeadWarning('dotenv-env', 'Dotenv development file not loaded'); - } - - if (!process.env.STORYBOOK_DISPLAY_WARNING) { - addHeadWarning('env-glob', 'Global storybook env var not loaded'); - } - - if (process.env.DISPLAY_WARNING) { - addHeadWarning('env-extra', 'Global non-storybook env var loaded'); - } -} - -addHeadWarning('preview-head-not-loaded', 'Preview head not loaded'); -addHeadWarning('dotenv-file-not-loaded', 'Dotenv file not loaded'); - -const ThemeBlock = styled.div( - { - position: 'absolute', - top: 0, - left: 0, - right: '50vw', - width: '50vw', - height: '100vh', - bottom: 0, - overflow: 'auto', - padding: 10, - }, - ({ theme }) => ({ - background: theme.background.app, - color: theme.color.defaultText, - }), - ({ side }) => - side === 'left' - ? { - left: 0, - right: '50vw', - } - : { - right: 0, - left: '50vw', - } -); - -const ThemeStack = styled.div( - { - position: 'relative', - minHeight: 'calc(50vh - 15px)', - }, - ({ theme }) => ({ - background: theme.background.app, - color: theme.color.defaultText, - }) -); - -const PlayFnNotice = styled.div( - { - position: 'absolute', - bottom: '1rem', - right: '1rem', - border: '1px solid #ccc', - borderRadius: '5px', - padding: '1rem', - fontSize: '12px', - '> *': { - display: 'block', - }, - }, - ({ theme }) => ({ - background: theme.background.app, - color: theme.color.defaultText, - }) -); - -const ThemedSetRoot = () => { - const theme = useTheme(); - - useEffect(() => { - document.body.style.background = theme.background.app; - document.body.style.color = theme.defaultText; - return () => { - // - }; - }); - - return null; -}; - -export const decorators = [ - (StoryFn, { globals, parameters, playFunction }) => { - const defaultTheme = isChromatic() && !playFunction ? 'stacked' : 'light'; - const theme = globals.theme || parameters.theme || defaultTheme; - - switch (theme) { - case 'side-by-side': { - return ( - - - - - - - - - - - - - - - - - ); - } - case 'stacked': { - return ( - - - - - - - - - - - - - - - - - ); - } - default: { - return ( - - - - - {!parameters.theme && isChromatic() && playFunction && ( - - Detected play function. - Rendering in a single theme - - )} - - - ); - } - } - }, -]; - -export const parameters = { - exportedParameter: 'exportedParameter', - actions: { argTypesRegex: '^on.*' }, - options: { - storySort: (a, b) => - a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }), - }, - docs: { - theme: themes.light, - }, - controls: { - presetColors: [ - { color: '#ff4785', title: 'Coral' }, - { color: '#1EA7FD', title: 'Ocean' }, - { color: 'rgb(252, 82, 31)', title: 'Orange' }, - { color: 'RGBA(255, 174, 0, 0.5)', title: 'Gold' }, - { color: 'hsl(101, 52%, 49%)', title: 'Green' }, - { color: 'HSLA(179,65%,53%,0.5)', title: 'Seafoam' }, - { color: '#6F2CAC', title: 'Purple' }, - { color: '#2A0481', title: 'Ultraviolet' }, - { color: 'black' }, - { color: '#333', title: 'Darkest' }, - { color: '#444', title: 'Darker' }, - { color: '#666', title: 'Dark' }, - { color: '#999', title: 'Mediumdark' }, - { color: '#ddd', title: 'Medium' }, - { color: '#EEE', title: 'Mediumlight' }, - { color: '#F3F3F3', title: 'Light' }, - { color: '#F8F8F8', title: 'Lighter' }, - { color: '#FFFFFF', title: 'Lightest' }, - '#fe4a49', - '#FED766', - 'rgba(0, 159, 183, 1)', - 'HSLA(240,11%,91%,0.5)', - 'slategray', - ], - }, -}; - -export const globals = { - foo: 'fooValue', -}; - -export const globalTypes = { - foo: { defaultValue: 'fooDefaultValue' }, - bar: { defaultValue: 'barDefaultValue' }, - 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: '한국어' }, - ], - }, - }, -}; - -export const loaders = [async () => ({ globalValue: 1 })]; - -export const argTypes = { color: { control: 'color' } }; -export const args = { color: 'red' }; diff --git a/code/examples/official-storybook/statics/examples/example1/example1.txt b/code/examples/official-storybook/statics/examples/example1/example1.txt deleted file mode 100644 index b01a2ca4d50e..000000000000 --- a/code/examples/official-storybook/statics/examples/example1/example1.txt +++ /dev/null @@ -1 +0,0 @@ -example1! \ No newline at end of file diff --git a/code/examples/official-storybook/statics/examples/example2/example2.txt b/code/examples/official-storybook/statics/examples/example2/example2.txt deleted file mode 100644 index 760014c6d2fb..000000000000 --- a/code/examples/official-storybook/statics/examples/example2/example2.txt +++ /dev/null @@ -1 +0,0 @@ -example2! \ No newline at end of file diff --git a/code/examples/official-storybook/statics/public/public.txt b/code/examples/official-storybook/statics/public/public.txt deleted file mode 100644 index e043990393f4..000000000000 --- a/code/examples/official-storybook/statics/public/public.txt +++ /dev/null @@ -1 +0,0 @@ -public! \ No newline at end of file diff --git a/code/examples/official-storybook/stories/addon-docs/addon-docs-mdx.stories.mdx b/code/examples/official-storybook/stories/addon-docs/addon-docs-mdx.stories.mdx deleted file mode 100644 index 44ebc1911a3d..000000000000 --- a/code/examples/official-storybook/stories/addon-docs/addon-docs-mdx.stories.mdx +++ /dev/null @@ -1,217 +0,0 @@ -import { - Story, - Canvas, - ArgsTable, - Source, - Description, - ColorPalette, - ColorItem, - Meta, -} from '@storybook/addon-docs'; -import styled from 'styled-components'; -import { Button } from '../../components/react-demo'; -import TsButton from '../../components/TsButton'; -import { DocgenButton } from '../../components/DocgenButton'; -import MdNotes from '../notes/notes.md'; -import MdxNotes from '../notes/notes.mdx'; - -
{storyFn()}
]} - parameters={{ notes: 'component notes' }} -/> - -# Selected - - - - - - - - - - - -## Transclusion - -### Markdown - - - -### MDX - - - -## A random color ColorPalette - - - - - - - - -## Getting into details - - - -export const nonStory1 = 'foo'; // a non-story export - -export const nonStory2 = () => ; // another one - - - - - - - - - - - - - - - Plain text - - - - - - - - <>This is an iframe! - - -
{storyFn()}
]} -> - <>Story decorators - - - -

Hello Hugh

- - - - {() => { - return
function result
; - }} - - - - - - - - -## Configurable height - - - - - -export const FixedLayoutExample = styled.div(({ theme }) => ({ - '&, header, aside, main, footer': { - position: 'fixed', - top: 0, - right: 0, - bottom: 0, - left: 0, - }, - header: { - height: '3rem', - background: 'red', - }, - 'aside, main': { - top: '3rem', - }, - aside: { - width: '10rem', - background: 'coral', - }, - main: { - left: '10rem', - background: 'yellow', - }, - footer: { - top: 'auto', - height: '3rem', - background: 'green', - }, -})); - -Fixed layout requires custom `height` since it can't be determined. - - - - -
-
- )} -/> - -# CSF3 Features - - - - ( -
-
- )} -/> - - console.log('story play')} /> diff --git a/code/examples/official-storybook/stories/addon-docs/docs-only.stories.mdx b/code/examples/official-storybook/stories/addon-docs/docs-only.stories.mdx deleted file mode 100644 index ce2bd7186767..000000000000 --- a/code/examples/official-storybook/stories/addon-docs/docs-only.stories.mdx +++ /dev/null @@ -1,80 +0,0 @@ -import { Meta, Canvas } from '@storybook/addon-docs'; - - - -# Documentation-only MDX - -# [Link](http://https://storybook.js.org/) in heading - -This file is a documentation-only MDX file, i.e. it doesn't contain any `` definitions. - -Therefore, it shows up in the [navigation](https://github.com/) UI as a document icon. - -It can, however, still contain a `` definition: - - -
-

This is a preview block within a documentation-only MDX file

-

- You may need to wrap certain documentation in a `Preview` in order to reset the styles for use - cases such as documenting a design system. -

-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -## Bottom - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc faucibus urna id nibh mollis, varius facilisis sapien scelerisque. Pellentesque lobortis convallis mi, at accumsan nisl sollicitudin id. Aliquam vitae elementum libero. Nulla blandit est turpis, a consectetur ante rhoncus a. Integer eu quam eu mauris pharetra elementum. Donec ex nisl, tincidunt ut tincidunt id, bibendum ut sem. Sed in congue tortor, a congue dolor. Fusce a magna vel nulla laoreet sagittis. - -# [Link](https://storybook.js.org/) in heading - -## [Link](https://storybook.js.org/) in heading - -### [Link](https://storybook.js.org/) in heading - -#### [Link](https://storybook.js.org/) in heading - -##### [Link](https://storybook.js.org/) in heading - -###### [Link](https://storybook.js.org/) in heading - -He stared at the clinic, [Molly](https://storybook.js.org/) took him to the _[Tank War](https://storybook.js.org/)_, mouth touched with hot gold as a gliding cursor struck sparks from the wall of a **[skyscraper](https://storybook.js.org/)** canyon. diff --git a/code/examples/official-storybook/stories/addon-docs/forward-ref-inner-proptypes.stories.js b/code/examples/official-storybook/stories/addon-docs/forward-ref-inner-proptypes.stories.js deleted file mode 100644 index fc6789af1dbb..000000000000 --- a/code/examples/official-storybook/stories/addon-docs/forward-ref-inner-proptypes.stories.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { ForwardRefButtonInnerPropTypes } from '../../components/ForwardRefButton'; - -export default { - title: 'Addons/Docs/ForwardRefInnerPropTypes', - component: ForwardRefButtonInnerPropTypes, - parameters: { - chromatic: { disable: true }, - docs: { source: { type: 'dynamic' } }, - }, -}; - -export const DisplaysCorrectly = () => ; -DisplaysCorrectly.storyName = - 'Displays forward ref component w/ inner propTypes correctly w/o args'; diff --git a/code/examples/official-storybook/stories/addon-docs/forward-ref-outer-proptypes.stories.js b/code/examples/official-storybook/stories/addon-docs/forward-ref-outer-proptypes.stories.js deleted file mode 100644 index 7feb23f4050d..000000000000 --- a/code/examples/official-storybook/stories/addon-docs/forward-ref-outer-proptypes.stories.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { ForwardRefButtonOuterPropTypes } from '../../components/ForwardRefButton'; - -export default { - title: 'Addons/Docs/ForwardRefOuterPropTypes', - component: ForwardRefButtonOuterPropTypes, - parameters: { - chromatic: { disable: true }, - docs: { source: { type: 'dynamic' } }, - }, -}; - -export const DisplaysCorrectly = () => ; -DisplaysCorrectly.storyName = 'Displays forward ref component w/ outer propTypes correctly'; diff --git a/code/examples/official-storybook/stories/addon-docs/imported.stories.tsx b/code/examples/official-storybook/stories/addon-docs/imported.stories.tsx deleted file mode 100644 index ce1e9937ef16..000000000000 --- a/code/examples/official-storybook/stories/addon-docs/imported.stories.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; -import { Button } from '../../components/react-demo'; - -export default { title: 'Addons/Docs/Imported', component: Button }; -export const Basic = (args: any) => - - ); - }} - diff --git a/code/examples/official-storybook/stories/addon-docs/stories.mdx b/code/examples/official-storybook/stories/addon-docs/stories.mdx deleted file mode 100644 index b14b7e13abc9..000000000000 --- a/code/examples/official-storybook/stories/addon-docs/stories.mdx +++ /dev/null @@ -1,7 +0,0 @@ -import { Meta } from '@storybook/addon-docs'; - - - -# Stories - -Addon-docs supports `story.mdx` and `stories.mdx` for people who group their components by folder, e.g. `Button/{index.tsx,stories.mdx}`. diff --git a/code/examples/official-storybook/stories/addon-docs/title-generators.ts b/code/examples/official-storybook/stories/addon-docs/title-generators.ts deleted file mode 100644 index f5b0f0abce45..000000000000 --- a/code/examples/official-storybook/stories/addon-docs/title-generators.ts +++ /dev/null @@ -1 +0,0 @@ -export const titleFunction = (title: string) => `Addons/Docs/${title}`; diff --git a/code/examples/official-storybook/stories/addon-highlight.stories.js b/code/examples/official-storybook/stories/addon-highlight.stories.js deleted file mode 100644 index 8f6dc6bfcb9e..000000000000 --- a/code/examples/official-storybook/stories/addon-highlight.stories.js +++ /dev/null @@ -1,104 +0,0 @@ -import React from 'react'; -import { useChannel } from '@storybook/addons'; -import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight'; -import { Page } from '../components/page/Page'; - -export default { - title: 'Addons/Highlight', - component: Page, -}; - -const Template = () => ; - -export const OneSelector = Template.bind({}); -OneSelector.decorators = [ - (storyFn) => { - const emit = useChannel({}); - - emit(HIGHLIGHT, { - elements: ['.page-title'], - }); - - return storyFn(); - }, -]; - -export const MultipleSelectors = Template.bind({}); -MultipleSelectors.decorators = [ - (storyFn) => { - const emit = useChannel({}); - - emit(HIGHLIGHT, { - elements: ['a', 'button'], - }); - - return storyFn(); - }, -]; - -export const CustomColor = Template.bind({}); -CustomColor.decorators = [ - (storyFn) => { - const emit = useChannel({}); - - emit(HIGHLIGHT, { - elements: ['.tip-wrapper'], - color: '#6c1d5c', - style: 'solid', - }); - - return storyFn(); - }, -]; - -export const OutlineStyle = Template.bind({}); -OutlineStyle.decorators = [ - (storyFn) => { - const emit = useChannel({}); - - emit(HIGHLIGHT, { - elements: ['.page-title'], - color: '#6c1d5c', - style: 'double', - }); - - return storyFn(); - }, -]; - -export const MultipleEvents = Template.bind({}); -MultipleEvents.decorators = [ - (storyFn) => { - const emit = useChannel({}); - - emit(HIGHLIGHT, { - elements: ['.tip-wrapper'], - color: '#6c1d5c', - style: 'solid', - }); - - emit(HIGHLIGHT, { - elements: ['ul'], - color: '#6c1d5c', - style: 'dotted', - }); - return storyFn(); - }, -]; - -export const Reset = Template.bind({}); -Reset.decorators = [ - (storyFn) => { - const emit = useChannel({}); - - emit(HIGHLIGHT, { - elements: ['ul'], - color: '#6c1d5c', - style: 'dotted', - }); - - emit(RESET_HIGHLIGHT); - - return storyFn(); - }, -]; diff --git a/code/examples/official-storybook/stories/addon-interactions/AccountForm.stories.tsx b/code/examples/official-storybook/stories/addon-interactions/AccountForm.stories.tsx deleted file mode 100644 index 04a715a86206..000000000000 --- a/code/examples/official-storybook/stories/addon-interactions/AccountForm.stories.tsx +++ /dev/null @@ -1,119 +0,0 @@ -/* eslint-disable @typescript-eslint/no-non-null-assertion */ -import React from 'react'; -import type { ComponentMeta, ComponentStoryObj } from '@storybook/react'; -import { userEvent, within } from '@storybook/testing-library'; - -import { AccountForm, AccountFormProps } from './AccountForm'; - -export default { - title: 'Addons/Interactions/AccountForm', - component: AccountForm, - parameters: { - layout: 'centered', - }, -} as ComponentMeta; - -type Story = ComponentStoryObj; - -const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms)); - -export const Standard: Story = { - args: { passwordVerification: false }, -}; - -export const StandardEmailFilled: Story = { - ...Standard, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - await userEvent.type(canvas.getByTestId('email'), 'michael@chromatic.com'); - }, -}; - -export const StandardEmailFailed: Story = { - ...Standard, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - await userEvent.type(canvas.getByTestId('email'), 'michael@chromatic.com.com@com'); - await userEvent.type(canvas.getByTestId('password1'), 'testpasswordthatwontfail'); - await userEvent.click(canvas.getByTestId('submit')); - }, -}; - -export const StandardPasswordFailed: Story = { - ...Standard, - play: async (context) => { - const canvas = within(context.canvasElement); - await StandardEmailFilled.play!(context); - await userEvent.type(canvas.getByTestId('password1'), 'asdf'); - await userEvent.click(canvas.getByTestId('submit')); - }, -}; - -export const StandardFailHover: Story = { - ...StandardPasswordFailed, - play: async (context) => { - const canvas = within(context.canvasElement); - await StandardPasswordFailed.play!(context); - await sleep(100); - await userEvent.hover(canvas.getByTestId('password-error-info')); - }, -}; -StandardFailHover.parameters = { - // IE fails with userEvent.hover - chromatic: { disableSnapshot: true }, -}; - -export const Verification: Story = { - args: { passwordVerification: true }, -}; - -export const VerificationPasssword1: Story = { - ...Verification, - play: async (context) => { - const canvas = within(context.canvasElement); - await StandardEmailFilled.play!(context); - await userEvent.type(canvas.getByTestId('password1'), 'asdfasdf'); - await userEvent.click(canvas.getByTestId('submit')); - }, -}; - -export const VerificationPasswordMismatch: Story = { - ...Verification, - play: async (context) => { - const canvas = within(context.canvasElement); - await StandardEmailFilled.play!(context); - await userEvent.type(canvas.getByTestId('password1'), 'asdfasdf'); - await userEvent.type(canvas.getByTestId('password2'), 'asdf1234'); - await userEvent.click(canvas.getByTestId('submit')); - }, -}; - -export const VerificationSuccess: Story = { - ...Verification, - play: async (context) => { - const canvas = within(context.canvasElement); - await StandardEmailFilled.play!(context); - await sleep(1000); - await userEvent.type(canvas.getByTestId('password1'), 'asdfasdf', { delay: 50 }); - await sleep(1000); - await userEvent.type(canvas.getByTestId('password2'), 'asdfasdf', { delay: 50 }); - await sleep(1000); - await userEvent.click(canvas.getByTestId('submit')); - }, -}; -// IE fails with this interaction -VerificationSuccess.parameters = { - chromatic: { - disableSnapshot: true, - }, -}; - -export const StandardWithRenderFunction: Story = { - ...Standard, - render: (args: AccountFormProps) => ( -
-

This uses a custom render

- -
- ), -}; diff --git a/code/examples/official-storybook/stories/addon-interactions/AccountForm.tsx b/code/examples/official-storybook/stories/addon-interactions/AccountForm.tsx deleted file mode 100644 index 22da93de5488..000000000000 --- a/code/examples/official-storybook/stories/addon-interactions/AccountForm.tsx +++ /dev/null @@ -1,552 +0,0 @@ -import React, { FC, HTMLAttributes, useCallback, useState } from 'react'; -import { keyframes, styled } from '@storybook/theming'; -import { - ErrorMessage, - Field as FormikInput, - Form as FormikForm, - Formik, - FormikProps, -} from 'formik'; -import { Icons, WithTooltip } from '@storybook/components'; - -const errorMap = { - email: { - required: { - normal: 'Please enter your email address', - tooltip: - 'We do require an email address and a password as a minimum in order to be able to create an account for you to log in with', - }, - format: { - normal: 'Please enter a correctly formatted email address', - tooltip: - 'Your email address is formatted incorrectly and is not correct - please double check for misspelling', - }, - }, - password: { - required: { - normal: 'Please enter a password', - tooltip: 'A password is required to create an account', - }, - length: { - normal: 'Please enter a password of minimum 6 characters', - tooltip: - 'For security reasons we enforce a password length of minimum 6 characters - but have no other requirements', - }, - }, - verifiedPassword: { - required: { - normal: 'Please verify your password', - tooltip: - 'Verification of your password is required to ensure no errors in the spelling of the password', - }, - match: { - normal: 'Your passwords do not match', - tooltip: - 'Your verification password has to match your password to make sure you have not misspelled', - }, - }, -}; - -// https://emailregex.com/ -const email99RegExp = new RegExp( - // eslint-disable-next-line no-useless-escape - /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ -); - -export interface AccountFormResponse { - success: boolean; -} - -export interface AccountFormValues { - email: string; - password: string; -} - -interface FormValues extends AccountFormValues { - verifiedPassword: string; -} - -interface FormErrors { - email?: string; - emailTooltip?: string; - password?: string; - passwordTooltip?: string; - verifiedPassword?: string; - verifiedPasswordTooltip?: string; -} - -export type AccountFormProps = { - passwordVerification?: boolean; - onSubmit?: (values: AccountFormValues) => void; - onTransactionStart?: (values: AccountFormValues) => void; - onTransactionEnd?: (values: AccountFormResponse) => void; -}; - -export const AccountForm: FC = ({ - 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 ( - - - - Storybook icon - - - - - - - - <title>Storybook - - - - - - {!state.transactionSuccess && !state.transactionFailure && ( - Create an account to join the Storybook community - )} - - {state.transactionSuccess && !state.transactionFailure && ( - -

- Everything is perfect. Your account is ready and we should probably get you started! -

-

So why don't you get started then?

- { - setState({ - transacting: false, - transactionSuccess: false, - transactionFailure: false, - }); - }} - > - Go back - - - )} - {state.transactionFailure && !state.transactionSuccess && ( - -

What a mess, this API is not working

-

- 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 -

- { - setState({ - transacting: false, - transactionSuccess: false, - transactionFailure: false, - }); - }} - > - Go back - - - )} - {!state.transactionSuccess && !state.transactionFailure && ( - { - 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) => { - const errors = _errors as FormErrors; - - return ( -
- - - - {({ field }: { field: HTMLAttributes }) => ( - <> - - {errors.email && ( - {errors.emailTooltip}} - > - - - - - - )} - - )} - - - - - - {({ field }: { field: HTMLAttributes }) => ( - - )} - - {errors.password && ( - {errors.passwordTooltip}}> - - - - - - )} - - {passwordVerification && ( - - - - {({ field }: { field: HTMLAttributes }) => ( - - )} - - {errors.verifiedPassword && ( - {errors.verifiedPasswordTooltip}} - > - - - - - - )} - - )} - - - Create Account - - - Reset - - -
- ); - }} - - )} - - - ); -}; - -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( - ({ transacting }) => - transacting && { - animation: `${logoAnimation} 1250ms both infinite`, - }, - { height: 40, zIndex: 10, marginLeft: 32 } -); - -const Introduction = styled.p({ - marginTop: 20, - textAlign: 'center', -}); - -const Content = styled.div({ - display: 'flex', - alignItems: 'flex-start', - justifyContent: 'center', - width: 350, - minHeight: 189, - marginTop: 8, -}); - -const Presentation = styled.div({ - textAlign: 'center', -}); - -const Form = styled(FormikForm)({ - width: '100%', - alignSelf: 'flex-start', - '&[aria-disabled="true"]': { - opacity: 0.6, - }, -}); - -const FieldWrapper = styled.div({ - display: 'flex', - flexDirection: 'column', - justifyContent: 'stretch', - marginBottom: 10, -}); - -const Label = styled.label({ - fontSize: 13, - fontWeight: 500, - marginBottom: 6, -}); - -const Input = styled.input(({ theme }) => ({ - fontSize: 14, - color: theme.color.defaultText, - padding: '10px 15px', - borderRadius: 4, - appearance: 'none', - outline: 'none', - border: '0 none', - boxShadow: 'rgb(0 0 0 / 10%) 0px 0px 0px 1px inset', - '&:focus': { - boxShadow: 'rgb(30 167 253) 0px 0px 0px 1px inset', - }, - '&:active': { - boxShadow: 'rgb(30 167 253) 0px 0px 0px 1px inset', - }, - '&[aria-invalid="true"]': { - boxShadow: 'rgb(255 68 0) 0px 0px 0px 1px inset', - }, -})); - -const ErrorWrapper = styled.div({ - display: 'flex', - alignItems: 'flex-start', - fontSize: 11, - marginTop: 6, - cursor: 'help', -}); - -const ErrorIcon = styled(Icons)(({ theme }) => ({ - fill: theme.color.defaultText, - opacity: 0.8, - marginRight: 6, - marginLeft: 2, - marginTop: 1, -})); - -const ErrorTooltip = styled.div(({ theme }) => ({ - fontFamily: theme.typography.fonts.base, - fontSize: 13, - padding: 8, - maxWidth: 350, -})); - -const Actions = styled.div({ - alignSelf: 'stretch', - display: 'flex', - justifyContent: 'space-between', - marginTop: 24, -}); - -const Error = styled(ErrorMessage)({}); - -interface ButtonProps { - dirty?: boolean; -} - -const Button = styled.button({ - 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, -})); diff --git a/code/examples/official-storybook/stories/addon-jest.stories.js b/code/examples/official-storybook/stories/addon-jest.stories.js deleted file mode 100644 index abb0aad1ae6d..000000000000 --- a/code/examples/official-storybook/stories/addon-jest.stories.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { withTests as withTestsHOC } from '@storybook/addon-jest'; - -import results from './addon-jest.testresults.json'; - -export default { - title: 'Addons/Jest', - decorators: [withTestsHOC({ results })], -}; - -export const WithTests = () =>

Hello

; -WithTests.parameters = { jest: 'addon-jest' }; - -export const WithInferredTests = () =>

Inferred Tests

; - -export const DisabledTests = () =>

Disabled Tests

; -DisabledTests.parameters = { jest: { disabled: true } }; diff --git a/code/examples/official-storybook/stories/addon-jest.testresults.json b/code/examples/official-storybook/stories/addon-jest.testresults.json deleted file mode 100644 index f8cd25c7110d..000000000000 --- a/code/examples/official-storybook/stories/addon-jest.testresults.json +++ /dev/null @@ -1,140 +0,0 @@ -{ - "numFailedTestSuites": 1, - "numFailedTests": 4, - "numPassedTestSuites": 0, - "numPassedTests": 3, - "numPendingTestSuites": 0, - "numPendingTests": 2, - "numRuntimeErrorTestSuites": 0, - "numTodoTests": 2, - "numTotalTestSuites": 1, - "numTotalTests": 11, - "openHandles": [], - "snapshot": { - "added": 0, - "didUpdate": false, - "failure": true, - "filesAdded": 0, - "filesRemoved": 1, - "filesUnmatched": 0, - "filesUpdated": 0, - "matched": 0, - "total": 0, - "unchecked": 0, - "uncheckedKeysByFile": [], - "unmatched": 0, - "updated": 0 - }, - "startTime": 1564439110263, - "success": false, - "testResults": [ - { - "assertionResults": [ - { - "ancestorTitles": [], - "failureMessages": [], - "fullName": "true should be true", - "location": null, - "status": "passed", - "title": "true should be true" - }, - { - "ancestorTitles": ["In a describe: "], - "failureMessages": [], - "fullName": "In a describe: true should still be true", - "location": null, - "status": "passed", - "title": "true should still be true" - }, - { - "ancestorTitles": ["In a describe: "], - "failureMessages": [], - "fullName": "In a describe: a list should contain 3 items", - "location": null, - "status": "passed", - "title": "a list should contain 3 items" - }, - { - "ancestorTitles": ["In a describe: "], - "failureMessages": [ - "Error: \u001b[2mexpect(\u001b[22m\u001b[31mreceived\u001b[39m\u001b[2m).\u001b[22mtoEqual\u001b[2m(\u001b[22m\u001b[32mexpected\u001b[39m\u001b[2m) // deep equality\u001b[22m\n\nExpected: \u001b[32m\"everything is awesome\"\u001b[39m\nReceived: \u001b[31m\"everything is all right\"\u001b[39m\n at Object.toEqual (/Users/fabianrademacher/React/storybook/examples/official-storybook/tests/addon-jest.test.js:16:39)\n at Object.asyncJestTest (/Users/fabianrademacher/React/storybook/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:102:37)\n at resolve (/Users/fabianrademacher/React/storybook/node_modules/jest-jasmine2/build/queueRunner.js:43:12)\n at new Promise ()\n at mapper (/Users/fabianrademacher/React/storybook/node_modules/jest-jasmine2/build/queueRunner.js:26:19)\n at promise.then (/Users/fabianrademacher/React/storybook/node_modules/jest-jasmine2/build/queueRunner.js:73:41)\n at process._tickCallback (internal/process/next_tick.js:68:7)" - ], - "fullName": "In a describe: everything is awesome", - "location": null, - "status": "failed", - "title": "everything is awesome" - }, - { - "ancestorTitles": ["A bunch of failing tests: "], - "failureMessages": [ - "Error: \u001b[2mexpect(\u001b[22m\u001b[31mreceived\u001b[39m\u001b[2m).\u001b[22mtoBe\u001b[2m(\u001b[22m\u001b[32mexpected\u001b[39m\u001b[2m) // Object.is equality\u001b[22m\n\nExpected: \u001b[32mfalse\u001b[39m\nReceived: \u001b[31mtrue\u001b[39m\n at Object.toBe (/Users/fabianrademacher/React/storybook/examples/official-storybook/tests/addon-jest.test.js:22:18)\n at Object.asyncJestTest (/Users/fabianrademacher/React/storybook/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:102:37)\n at resolve (/Users/fabianrademacher/React/storybook/node_modules/jest-jasmine2/build/queueRunner.js:43:12)\n at new Promise ()\n at mapper (/Users/fabianrademacher/React/storybook/node_modules/jest-jasmine2/build/queueRunner.js:26:19)\n at promise.then (/Users/fabianrademacher/React/storybook/node_modules/jest-jasmine2/build/queueRunner.js:73:41)\n at process._tickCallback (internal/process/next_tick.js:68:7)" - ], - "fullName": "A bunch of failing tests: true should still be true", - "location": null, - "status": "failed", - "title": "true should still be true" - }, - { - "ancestorTitles": ["A bunch of failing tests: "], - "failureMessages": [ - "Error: \u001b[2mexpect(\u001b[22m\u001b[31mreceived\u001b[39m\u001b[2m).\u001b[22mtoContain\u001b[2m(\u001b[22m\u001b[32mexpected\u001b[39m\u001b[2m) // indexOf\u001b[22m\n\nExpected value: \u001b[32m301\u001b[39m\nReceived array: \u001b[31m[\"a\", \"b\", \"3\"]\u001b[39m\n at Object.toContain (/Users/fabianrademacher/React/storybook/examples/official-storybook/tests/addon-jest.test.js:26:29)\n at Object.asyncJestTest (/Users/fabianrademacher/React/storybook/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:102:37)\n at resolve (/Users/fabianrademacher/React/storybook/node_modules/jest-jasmine2/build/queueRunner.js:43:12)\n at new Promise ()\n at mapper (/Users/fabianrademacher/React/storybook/node_modules/jest-jasmine2/build/queueRunner.js:26:19)\n at promise.then (/Users/fabianrademacher/React/storybook/node_modules/jest-jasmine2/build/queueRunner.js:73:41)\n at process._tickCallback (internal/process/next_tick.js:68:7)" - ], - "fullName": "A bunch of failing tests: a list should contain 3 items", - "location": null, - "status": "failed", - "title": "a list should contain 3 items" - }, - { - "ancestorTitles": ["A bunch of failing tests: "], - "failureMessages": [ - "Error: \u001b[2mexpect(\u001b[22m\u001b[31mreceived\u001b[39m\u001b[2m).\u001b[22mtoThrow\u001b[2m()\u001b[22m\n\nReceived function did not throw\n at Object.toThrow (/Users/fabianrademacher/React/storybook/examples/official-storybook/tests/addon-jest.test.js:30:22)\n at Object.asyncJestTest (/Users/fabianrademacher/React/storybook/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:102:37)\n at resolve (/Users/fabianrademacher/React/storybook/node_modules/jest-jasmine2/build/queueRunner.js:43:12)\n at new Promise ()\n at mapper (/Users/fabianrademacher/React/storybook/node_modules/jest-jasmine2/build/queueRunner.js:26:19)\n at promise.then (/Users/fabianrademacher/React/storybook/node_modules/jest-jasmine2/build/queueRunner.js:73:41)\n at process._tickCallback (internal/process/next_tick.js:68:7)" - ], - "fullName": "A bunch of failing tests: should work", - "location": null, - "status": "failed", - "title": "should work" - }, - { - "ancestorTitles": ["A bunch of failing tests: "], - "failureMessages": [], - "fullName": "A bunch of failing tests: Test this Todo later", - "location": null, - "status": "todo", - "title": "Test this Todo later" - }, - { - "ancestorTitles": ["Skipped tests:"], - "failureMessages": [], - "fullName": "Skipped tests: Would be true if not skipped", - "location": null, - "status": "pending", - "title": "Would be true if not skipped" - }, - { - "ancestorTitles": ["Skipped tests:"], - "failureMessages": [], - "fullName": "Skipped tests: Could fail, if not skipped", - "location": null, - "status": "pending", - "title": "Could fail, if not skipped" - }, - { - "ancestorTitles": ["Skipped tests:"], - "failureMessages": [], - "fullName": "Skipped tests: Test Todo is not skipped", - "location": null, - "status": "todo", - "title": "Test Todo is not skipped" - } - ], - "endTime": 1564439111804, - "message": "\u001b[1m\u001b[31m \u001b[1m● \u001b[1mIn a describe: › everything is awesome\u001b[39m\u001b[22m\n\n \u001b[2mexpect(\u001b[22m\u001b[31mreceived\u001b[39m\u001b[2m).\u001b[22mtoEqual\u001b[2m(\u001b[22m\u001b[32mexpected\u001b[39m\u001b[2m) // deep equality\u001b[22m\n\n Expected: \u001b[32m\"everything is awesome\"\u001b[39m\n Received: \u001b[31m\"everything is all right\"\u001b[39m\n\u001b[2m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 14 | \u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 15 | \u001b[39m test(\u001b[32m'everything is awesome'\u001b[39m\u001b[33m,\u001b[39m () \u001b[33m=>\u001b[39m {\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m\u001b[31m\u001b[1m>\u001b[2m\u001b[39m\u001b[90m 16 | \u001b[39m expect(\u001b[32m'everything is all right'\u001b[39m)\u001b[33m.\u001b[39mtoEqual(\u001b[32m'everything is awesome'\u001b[39m)\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m | \u001b[39m \u001b[31m\u001b[1m^\u001b[2m\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 17 | \u001b[39m })\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 18 | \u001b[39m})\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 19 | \u001b[39m\u001b[0m\u001b[22m\n\u001b[2m\u001b[22m\n\u001b[2m \u001b[2mat Object.toEqual (\u001b[2m\u001b[0m\u001b[36mexamples/official-storybook/tests/addon-jest.test.js\u001b[39m\u001b[0m\u001b[2m:16:39)\u001b[2m\u001b[22m\n\n\u001b[1m\u001b[31m \u001b[1m● \u001b[1mA bunch of failing tests: › true should still be true\u001b[39m\u001b[22m\n\n \u001b[2mexpect(\u001b[22m\u001b[31mreceived\u001b[39m\u001b[2m).\u001b[22mtoBe\u001b[2m(\u001b[22m\u001b[32mexpected\u001b[39m\u001b[2m) // Object.is equality\u001b[22m\n\n Expected: \u001b[32mfalse\u001b[39m\n Received: \u001b[31mtrue\u001b[39m\n\u001b[2m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 20 | \u001b[39mdescribe(\u001b[32m'A bunch of failing tests: '\u001b[39m\u001b[33m,\u001b[39m () \u001b[33m=>\u001b[39m {\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 21 | \u001b[39m test(\u001b[32m'true should still be true'\u001b[39m\u001b[33m,\u001b[39m () \u001b[33m=>\u001b[39m {\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m\u001b[31m\u001b[1m>\u001b[2m\u001b[39m\u001b[90m 22 | \u001b[39m expect(\u001b[36mtrue\u001b[39m)\u001b[33m.\u001b[39mtoBe(\u001b[36mfalse\u001b[39m)\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m | \u001b[39m \u001b[31m\u001b[1m^\u001b[2m\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 23 | \u001b[39m })\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 24 | \u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 25 | \u001b[39m test(\u001b[32m'a list should contain 3 items'\u001b[39m\u001b[33m,\u001b[39m () \u001b[33m=>\u001b[39m {\u001b[0m\u001b[22m\n\u001b[2m\u001b[22m\n\u001b[2m \u001b[2mat Object.toBe (\u001b[2m\u001b[0m\u001b[36mexamples/official-storybook/tests/addon-jest.test.js\u001b[39m\u001b[0m\u001b[2m:22:18)\u001b[2m\u001b[22m\n\n\u001b[1m\u001b[31m \u001b[1m● \u001b[1mA bunch of failing tests: › a list should contain 3 items\u001b[39m\u001b[22m\n\n \u001b[2mexpect(\u001b[22m\u001b[31mreceived\u001b[39m\u001b[2m).\u001b[22mtoContain\u001b[2m(\u001b[22m\u001b[32mexpected\u001b[39m\u001b[2m) // indexOf\u001b[22m\n\n Expected value: \u001b[32m301\u001b[39m\n Received array: \u001b[31m[\"a\", \"b\", \"3\"]\u001b[39m\n\u001b[2m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 24 | \u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 25 | \u001b[39m test(\u001b[32m'a list should contain 3 items'\u001b[39m\u001b[33m,\u001b[39m () \u001b[33m=>\u001b[39m {\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m\u001b[31m\u001b[1m>\u001b[2m\u001b[39m\u001b[90m 26 | \u001b[39m expect([\u001b[32m'a'\u001b[39m\u001b[33m,\u001b[39m \u001b[32m'b'\u001b[39m\u001b[33m,\u001b[39m \u001b[32m'3'\u001b[39m])\u001b[33m.\u001b[39mtoContain(\u001b[35m301\u001b[39m)\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m | \u001b[39m \u001b[31m\u001b[1m^\u001b[2m\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 27 | \u001b[39m })\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 28 | \u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 29 | \u001b[39m test(\u001b[32m'should work'\u001b[39m\u001b[33m,\u001b[39m () \u001b[33m=>\u001b[39m {\u001b[0m\u001b[22m\n\u001b[2m\u001b[22m\n\u001b[2m \u001b[2mat Object.toContain (\u001b[2m\u001b[0m\u001b[36mexamples/official-storybook/tests/addon-jest.test.js\u001b[39m\u001b[0m\u001b[2m:26:29)\u001b[2m\u001b[22m\n\n\u001b[1m\u001b[31m \u001b[1m● \u001b[1mA bunch of failing tests: › should work\u001b[39m\u001b[22m\n\n \u001b[2mexpect(\u001b[22m\u001b[31mreceived\u001b[39m\u001b[2m).\u001b[22mtoThrow\u001b[2m()\u001b[22m\n\n Received function did not throw\n\u001b[2m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 28 | \u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 29 | \u001b[39m test(\u001b[32m'should work'\u001b[39m\u001b[33m,\u001b[39m () \u001b[33m=>\u001b[39m {\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m\u001b[31m\u001b[1m>\u001b[2m\u001b[39m\u001b[90m 30 | \u001b[39m expect(() \u001b[33m=>\u001b[39m {})\u001b[33m.\u001b[39mtoThrow()\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m | \u001b[39m \u001b[31m\u001b[1m^\u001b[2m\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 31 | \u001b[39m })\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 32 | \u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 33 | \u001b[39m test\u001b[33m.\u001b[39mtodo(\u001b[32m'Test this Todo later'\u001b[39m)\u001b[0m\u001b[22m\n\u001b[2m\u001b[22m\n\u001b[2m \u001b[2mat Object.toThrow (\u001b[2m\u001b[0m\u001b[36mexamples/official-storybook/tests/addon-jest.test.js\u001b[39m\u001b[0m\u001b[2m:30:22)\u001b[2m\u001b[22m\n", - "name": "/Users/fabianrademacher/React/storybook/examples/official-storybook/tests/addon-jest.test.js", - "startTime": 1564439111282, - "status": "failed", - "summary": "" - } - ], - "wasInterrupted": false, - "coverageMap": {} -} diff --git a/code/examples/official-storybook/stories/addon-measure/BoxModel.stories.js b/code/examples/official-storybook/stories/addon-measure/BoxModel.stories.js deleted file mode 100644 index 17876cde74b4..000000000000 --- a/code/examples/official-storybook/stories/addon-measure/BoxModel.stories.js +++ /dev/null @@ -1,118 +0,0 @@ -import React from 'react'; -import { Visualization } from '../../components/addon-measure/Visualization'; - -export default { - title: 'Addons/Measure/BoxModel', - parameters: { - layout: 'fullscreen', - }, -}; - -const Template = (args) => ; - -export const MarginUniform = Template.bind({}); -MarginUniform.args = { - render: (ref) => ( -
- ), -}; - -export const MarginAsymmetric = Template.bind({}); -MarginAsymmetric.args = { - render: (ref) => ( -
- ), -}; - -export const PaddingUniform = Template.bind({}); -PaddingUniform.args = { - render: (ref) => ( -
- ), -}; - -export const PaddingAsymmetric = Template.bind({}); -PaddingAsymmetric.args = { - render: (ref) => ( -
- ), -}; - -export const BorderUniform = Template.bind({}); -BorderUniform.args = { - render: (ref) => ( -
- ), -}; - -export const BorderAsymmetric = Template.bind({}); -BorderAsymmetric.args = { - render: (ref) => ( -
- ), -}; - -export const DecimalSizing = Template.bind({}); -DecimalSizing.args = { - render: (ref) => ( -
- ), -}; diff --git a/code/examples/official-storybook/stories/addon-measure/Grid.stories.js b/code/examples/official-storybook/stories/addon-measure/Grid.stories.js deleted file mode 100644 index f9849389bf6d..000000000000 --- a/code/examples/official-storybook/stories/addon-measure/Grid.stories.js +++ /dev/null @@ -1,46 +0,0 @@ -import React from 'react'; - -export default { - title: 'Addons/Measure/Grid', -}; - -const MeasureButton = () => ( - - - -); - -export const Basic = () => ( -
-
- {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((id) => ( -
- {id} -
- ))} -
-

- Click the measure button in the toolbar to enable the addon -

-
-); diff --git a/code/examples/official-storybook/stories/addon-measure/ShadowRoot.stories.js b/code/examples/official-storybook/stories/addon-measure/ShadowRoot.stories.js deleted file mode 100644 index eec397d9d8d7..000000000000 --- a/code/examples/official-storybook/stories/addon-measure/ShadowRoot.stories.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; - -import { ShadowRoot } from '../../components/addon-measure/ShadowRoot'; - -export default { - title: 'Addons/Measure/ShadowRoot', - component: ShadowRoot, -}; - -const Template = (args) => ( -
- -
-); - -export const Root = Template.bind({}); - -export const Nested = Template.bind({}); -Nested.args = { - drawMode: 'NESTED', -}; diff --git a/code/examples/official-storybook/stories/addon-measure/SmallNode.stories.js b/code/examples/official-storybook/stories/addon-measure/SmallNode.stories.js deleted file mode 100644 index 6a38904f5d21..000000000000 --- a/code/examples/official-storybook/stories/addon-measure/SmallNode.stories.js +++ /dev/null @@ -1,73 +0,0 @@ -import React from 'react'; -import { Visualization } from '../../components/addon-measure/Visualization'; - -export default { - title: 'Addons/Measure/SmallNode', - parameters: { - layout: 'fullscreen', - }, -}; - -const Template = (args) => ; - -export const Everything30px = Template.bind({}); -Everything30px.args = { - render: (ref) => ( -
- ), -}; - -export const Short = Template.bind({}); -Short.args = { - render: (ref) => ( -
- ), -}; - -export const Narrow = Template.bind({}); -Narrow.args = { - render: (ref) => ( -
- ), -}; - -export const Tiny = Template.bind({}); -Tiny.args = { - render: (ref) => ( -
- ), -}; diff --git a/code/examples/official-storybook/stories/addon-measure/StackingLabels.stories.js b/code/examples/official-storybook/stories/addon-measure/StackingLabels.stories.js deleted file mode 100644 index cd8197237dec..000000000000 --- a/code/examples/official-storybook/stories/addon-measure/StackingLabels.stories.js +++ /dev/null @@ -1,67 +0,0 @@ -import React from 'react'; -import { Visualization } from '../../components/addon-measure/Visualization'; - -export default { - title: 'Addons/Measure/StackingLabels', - parameters: { - layout: 'fullscreen', - }, -}; - -const Template = (args) => ; - -export const EverythingUniform = Template.bind({}); -EverythingUniform.args = { - render: (ref) => ( -
- ), -}; - -export const Asymmetric = Template.bind({}); -Asymmetric.args = { - render: (ref) => ( -
- ), -}; - -export const MoreAsymmetric = Template.bind({}); -MoreAsymmetric.args = { - render: (ref) => ( -
- ), -}; diff --git a/code/examples/official-storybook/stories/addon-outline.stories.js b/code/examples/official-storybook/stories/addon-outline.stories.js deleted file mode 100644 index 714616c6ea3e..000000000000 --- a/code/examples/official-storybook/stories/addon-outline.stories.js +++ /dev/null @@ -1,46 +0,0 @@ -import React from 'react'; - -export default { - title: 'Addons/Outline', -}; - -const OutlineButton = () => ( - - - -); - -export const Basic = () => ( -
-
- {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((id) => ( -
- {id} -
- ))} -
-

- Click the outline button in the toolbar to toggle outlines -

-
-); diff --git a/code/examples/official-storybook/stories/addon-storyshots.stories.js b/code/examples/official-storybook/stories/addon-storyshots.stories.js deleted file mode 100644 index 057b87c42b40..000000000000 --- a/code/examples/official-storybook/stories/addon-storyshots.stories.js +++ /dev/null @@ -1,41 +0,0 @@ -/* eslint-disable storybook/use-storybook-expect */ -/* eslint-disable storybook/await-interactions */ -import React, { useState } from 'react'; -import { styled } from '@storybook/theming'; - -const BlockDiv = styled.div({ - display: 'inline-block', - height: 400, - width: 400, - background: 'hotpink', -}); - -export default { - title: 'Addons/Storyshots', -}; - -export const Block = () => { - const [hover, setHover] = useState(false); - - return ( - setHover(true)} - onMouseLeave={() => setHover(false)} - > - {hover && 'I am hovered'} - - ); -}; -Block.storyName = 'Block story'; - -Block.parameters = { - async puppeteerTest(page) { - const element = await page.$('[data-test-block]'); - await element.hover(); - const textContent = await element.getProperty('textContent'); - const text = await textContent.jsonValue(); - // eslint-disable-next-line jest/no-standalone-expect - expect(text).toBe('I am hovered'); - }, -}; diff --git a/code/examples/official-storybook/stories/demo/button.stories.js b/code/examples/official-storybook/stories/demo/button.stories.js deleted file mode 100644 index 1eb7cd97d65a..000000000000 --- a/code/examples/official-storybook/stories/demo/button.stories.js +++ /dev/null @@ -1,44 +0,0 @@ -import React, { useState } from 'react'; -import { Button } from '../../components/react-demo'; - -export default { - title: 'Other/Demo/Button', - component: Button, - id: 'demo-button-id', - parameters: { - docs: { - inlineStories: false, - description: { - component: 'Component description **markdown** override', - }, - }, - }, -}; - -export const WithText = () => ; -WithText.storyName = 'with text'; - -export const WithSomeEmoji = () => ( - -); -WithSomeEmoji.storyName = 'with some emoji'; - -export const WithCounter = () => { - const [counter, setCounter] = useState(0); - const label = `Testing: ${counter}`; - return ; -}; - -WithCounter.storyName = 'with counter'; - -WithCounter.parameters = { - docs: { - description: { - story: 'This demonstrates react hooks working inside stories. **Go team!** 🚀', - }, - }, -}; diff --git a/code/examples/official-storybook/stories/demo/button.stories.mdx b/code/examples/official-storybook/stories/demo/button.stories.mdx deleted file mode 100644 index 2e58b5902939..000000000000 --- a/code/examples/official-storybook/stories/demo/button.stories.mdx +++ /dev/null @@ -1,37 +0,0 @@ -import { useState } from 'react'; -import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'; -import { Button } from '../../components/react-demo'; - - - -# Simple Button - - - -## Hello - - - - - -## Emoji - - - - - -## Counter w/ Code - - - - {() => { - const [counter, setCounter] = useState(0); - const label = `Testing: ${counter}`; - return ; - }} - - diff --git a/code/examples/official-storybook/stories/demo/csf-embedding.test.js b/code/examples/official-storybook/stories/demo/csf-embedding.test.js deleted file mode 100644 index a0fcc5b96301..000000000000 --- a/code/examples/official-storybook/stories/demo/csf-embedding.test.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import { render, fireEvent } from '@testing-library/react'; -import { WithCounter } from './button.stories'; - -describe('module story embedding', () => { - it('should test story state', () => { - const comp = render(); - fireEvent.click(comp.getByText('Testing: 0')); - expect(comp.getByText('Testing: 1')).toBeTruthy(); - }); -}); diff --git a/code/examples/official-storybook/stories/demo/setup.stories.tsx b/code/examples/official-storybook/stories/demo/setup.stories.tsx deleted file mode 100644 index 3c83fbbf341f..000000000000 --- a/code/examples/official-storybook/stories/demo/setup.stories.tsx +++ /dev/null @@ -1,22 +0,0 @@ -/* eslint-disable storybook/use-storybook-testing-library */ -// @TODO: use addon-interactions and remove the rule disable above -import React from 'react'; -import { screen } from '@testing-library/dom'; -import userEvent from '@testing-library/user-event'; - -const Input = () => ; - -export default { - title: 'Other/Demo/Setup', - component: Input, -}; - -export const WithPlay = { - play: async () => { - const inputs = screen.getAllByTestId('test-input'); - for (let i = 0; i < inputs.length; i += 1) { - // eslint-disable-next-line no-await-in-loop - await userEvent.type(inputs[i], 'asdfasdf', { delay: 10 }); - } - }, -}; diff --git a/code/examples/official-storybook/stories/demo/typed-button.stories.tsx b/code/examples/official-storybook/stories/demo/typed-button.stories.tsx deleted file mode 100644 index 2d8b11414e34..000000000000 --- a/code/examples/official-storybook/stories/demo/typed-button.stories.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import type { ComponentMeta, StoryFn, ComponentStoryFn } from '@storybook/react'; -import TsButton from '../../components/TsButton'; - -export default { - title: 'Other/Demo/TsButton', - component: TsButton, - decorators: [ - (StoryFn) => ( - <> - - - ), - ], -} as ComponentMeta; - -const Template: StoryFn = (args) => ; - -export const Basic = Template.bind({}); -Basic.args = { - type: 'default', - children: 'basic', -}; - -const TypedTemplate: ComponentStoryFn = (args) => ; - -export const Typed = TypedTemplate.bind({}); -Typed.args = { - type: 'action', - children: 'typed', - foo: 'bar', // should be a type error? -}; diff --git a/code/examples/official-storybook/stories/demo/welcome.stories.js b/code/examples/official-storybook/stories/demo/welcome.stories.js deleted file mode 100644 index 491b1b57e0c2..000000000000 --- a/code/examples/official-storybook/stories/demo/welcome.stories.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { Welcome } from '../../components/react-demo'; - -export default { - title: 'Other/Demo/Welcome', - component: Welcome, -}; - -// Some other valid values: -// - 'other-demo-buttonmdx--with-text' -// - 'Other/Demo/ButtonMdx' -export const ToStorybook = () => {}} />; -ToStorybook.storyName = 'to Storybook'; diff --git a/code/examples/official-storybook/stories/notes/notes.md b/code/examples/official-storybook/stories/notes/notes.md deleted file mode 100644 index 13744bcc6e1d..000000000000 --- a/code/examples/official-storybook/stories/notes/notes.md +++ /dev/null @@ -1,11 +0,0 @@ -# This is a Markdown File - -#### It is imported and compiled using a webpack markdown loader - ---- - -Supports code snippets too: - -```jsx -
Foo
-``` diff --git a/code/examples/official-storybook/stories/notes/notes.mdx b/code/examples/official-storybook/stories/notes/notes.mdx deleted file mode 100644 index 90213a7cc411..000000000000 --- a/code/examples/official-storybook/stories/notes/notes.mdx +++ /dev/null @@ -1,12 +0,0 @@ -import { ArgsTable, Story } from '@storybook/addon-docs'; -import Button from '../../components/TsButton'; - -# Welcome! - -Let's write markdown without stories - -But we can still use doc blocks in our stories - - - - diff --git a/code/examples/official-storybook/storyshots-puppeteer/__image_snapshots__/storyshots-image-runner-js-image-snapshots-addons-storyshots-block-story-1-snap.png b/code/examples/official-storybook/storyshots-puppeteer/__image_snapshots__/storyshots-image-runner-js-image-snapshots-addons-storyshots-block-story-1-snap.png deleted file mode 100644 index 0d37ca666cef340ec886e94138d1821f285a3399..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 647 zcmeAS@N?(olHy`uVBq!ia0y~yU{+vYV2WU328ukF$a)NJNMC9x#c zD!C{XNHG{07#ZpsSm+v>hZq@JnOayG8)_RESQ!||ox13Oq9HdwB{QuOw}$-bnO{JT N@pScbS?83{1OWa0q*4F? diff --git a/code/examples/official-storybook/storyshots-puppeteer/axe-tests.runner.js b/code/examples/official-storybook/storyshots-puppeteer/axe-tests.runner.js deleted file mode 100644 index 05dde656719d..000000000000 --- a/code/examples/official-storybook/storyshots-puppeteer/axe-tests.runner.js +++ /dev/null @@ -1,19 +0,0 @@ -/* This file is not suffixed by ".test.js" to not being run with all other test files. - * This test needs the static build of the storybook to run. - * `yarn run storyshots-puppeteer` generates the static build & uses storyshots-puppeteer. - * */ -import path from 'path'; -import initStoryshots from '@storybook/addon-storyshots'; -import { axeTest } from '@storybook/addon-storyshots-puppeteer'; -import getStorybookUrl from './getStorybookUrl'; - -const storybookUrl = getStorybookUrl(); -if (storybookUrl != null) { - initStoryshots({ - suite: 'Puppeteer tests', - storyKindRegex: /^Basics|UI/, - framework: 'react', - configPath: path.join(__dirname, '..'), - test: axeTest({ storybookUrl }), - }); -} diff --git a/code/examples/official-storybook/storyshots-puppeteer/getStorybookUrl.js b/code/examples/official-storybook/storyshots-puppeteer/getStorybookUrl.js deleted file mode 100644 index 913acc6c592c..000000000000 --- a/code/examples/official-storybook/storyshots-puppeteer/getStorybookUrl.js +++ /dev/null @@ -1,18 +0,0 @@ -import path from 'path'; -import fs from 'fs'; -import { logger } from '@storybook/node-logger'; - -export default function getStorybookUrl() { - if (process.env.USE_DEV_SERVER) { - return 'http://localhost:9011'; - } - - const pathToStorybookStatic = path.join(__dirname, '../', 'storybook-static'); - if (!fs.existsSync(pathToStorybookStatic)) { - logger.error( - 'You are running puppeteer tests without having the static build of storybook. Please run "yarn run build-storybook" before running tests.' - ); - return null; - } - return `file://${pathToStorybookStatic}`; -} diff --git a/code/examples/official-storybook/storyshots-puppeteer/jest.config.js b/code/examples/official-storybook/storyshots-puppeteer/jest.config.js deleted file mode 100644 index 427991f8b937..000000000000 --- a/code/examples/official-storybook/storyshots-puppeteer/jest.config.js +++ /dev/null @@ -1,11 +0,0 @@ -const path = require('path'); -const globalJestConfig = require('../../../jest.config'); - -const finalJestConfig = { ...globalJestConfig }; - -finalJestConfig.rootDir = path.join(__dirname, '../../..'); -finalJestConfig.testMatch = [ - '/examples/official-storybook/storyshots-puppeteer/*.runner.js', -]; - -module.exports = finalJestConfig; diff --git a/code/examples/official-storybook/storyshots-puppeteer/puppeteer-tests.runner.js b/code/examples/official-storybook/storyshots-puppeteer/puppeteer-tests.runner.js deleted file mode 100644 index df5db691816a..000000000000 --- a/code/examples/official-storybook/storyshots-puppeteer/puppeteer-tests.runner.js +++ /dev/null @@ -1,19 +0,0 @@ -/* This file is not suffixed by ".test.js" to not being run with all other test files. - * This test needs the static build of the storybook to run. - * `yarn run storyshots-puppeteer` generates the static build & uses storyshots-puppeteer. - * */ -import path from 'path'; -import initStoryshots from '@storybook/addon-storyshots'; -import { puppeteerTest } from '@storybook/addon-storyshots-puppeteer'; -import getStorybookUrl from './getStorybookUrl'; - -const storybookUrl = getStorybookUrl(); -if (storybookUrl != null) { - initStoryshots({ - suite: 'Puppeteer tests', - storyKindRegex: /^Addons\/Storyshots/, - framework: 'react', - configPath: path.join(__dirname, '..'), - test: puppeteerTest({ storybookUrl }), - }); -} diff --git a/code/examples/official-storybook/storyshots-puppeteer/storyshots-image.runner.js b/code/examples/official-storybook/storyshots-puppeteer/storyshots-image.runner.js deleted file mode 100644 index 8f69249353de..000000000000 --- a/code/examples/official-storybook/storyshots-puppeteer/storyshots-image.runner.js +++ /dev/null @@ -1,25 +0,0 @@ -/* This file is not suffixed by ".test.js" to not being run with all other test files. - * This test needs the static build of the storybook to run. - * `yarn run storyshots-puppeteer` generates the static build & uses storyshots-puppeteer. - * */ -import path from 'path'; -import initStoryshots from '@storybook/addon-storyshots'; -import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer'; -import getStorybookUrl from './getStorybookUrl'; - -const storybookUrl = getStorybookUrl(); -if (storybookUrl != null) { - initStoryshots({ - suite: 'Image snapshots', - storyKindRegex: /^Addons\/Storyshots/, - framework: 'react', - configPath: path.join(__dirname, '..'), - test: imageSnapshot({ - storybookUrl, - getMatchOptions: () => ({ - failureThreshold: 0.02, // 2% threshold, - failureThresholdType: 'percent', - }), - }), - }); -} diff --git a/code/examples/official-storybook/tests/addon-jest.config.json b/code/examples/official-storybook/tests/addon-jest.config.json deleted file mode 100644 index c4d98bd88eaf..000000000000 --- a/code/examples/official-storybook/tests/addon-jest.config.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "rootDir": "../../..", - "verbose": true, - "coverageDirectory": "coverage/", - "notify": true, - "collectCoverage": true, - "collectCoverageFrom": [ - "../stories/**/*.js", - "../stories/*.js", - "!.*", - "!../stories/__test__/*", - "!../stories/**/__test__/*" - ], - "testMatch": ["/examples/official-storybook/tests/addon-jest.test.js"] -} diff --git a/code/examples/official-storybook/tests/addon-jest.test.js b/code/examples/official-storybook/tests/addon-jest.test.js deleted file mode 100644 index b33b6c4fbc93..000000000000 --- a/code/examples/official-storybook/tests/addon-jest.test.js +++ /dev/null @@ -1,46 +0,0 @@ -// This file is excluded from the `/scripts/test.js` script. (see root `jest.config.js` file) -test('true should be true', () => { - expect(true).toBe(true); -}); - -describe('In a describe: ', () => { - test('true should still be true', () => { - expect(true).toBe(true); - }); - - test('a list should contain 3 items', () => { - expect(['a', 'b', '3']).toHaveLength(3); - }); - - test('everything is awesome', () => { - expect('everything is all right').toEqual('everything is awesome'); - }); -}); - -describe('A bunch of failing tests: ', () => { - test('true should still be true', () => { - expect(true).toBe(false); - }); - - test('a list should contain 3 items', () => { - expect(['a', 'b', '3']).toContain(301); - }); - - test('should work', () => { - expect(() => {}).toThrow(); - }); - - test.todo('Test this Todo later'); -}); - -describe('Skipped tests:', () => { - test('Would be true if not skipped', () => { - expect(true).toBe(true); - }); - - test('Could fail, if not skipped', () => { - expect(() => {}).toThrow(); - }); - - test.todo('Test Todo is not skipped'); -}); diff --git a/code/examples/standalone-preview/package.json b/code/examples/standalone-preview/package.json index a07286245962..0daf4581059d 100644 --- a/code/examples/standalone-preview/package.json +++ b/code/examples/standalone-preview/package.json @@ -3,6 +3,7 @@ "version": "7.0.0-alpha.34", "private": true, "scripts": { + "TODO": "the official-storybook is removed, can this example be removed?", "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true storybook dev -p 9011 -c ../official-storybook --no-manager-cache --preview-url=http://localhost:1337/external-iframe.html", "storybook-preview": "cross-env PREVIEW_URL=external-iframe.html parcel ./storybook.html --port 1337" }, diff --git a/code/lib/core-server/src/core-presets.test.ts b/code/lib/core-server/src/core-presets.test.ts index 73e196db891c..42bb5bc357a0 100644 --- a/code/lib/core-server/src/core-presets.test.ts +++ b/code/lib/core-server/src/core-presets.test.ts @@ -127,6 +127,7 @@ const baseOptions = { managerOnly, // production docsMode: false, cache, + // TODO: fix this configDir: path.resolve(`${__dirname}/../../../examples/official-storybook/`), ci: true, managerCache: false, diff --git a/code/package.json b/code/package.json index 986ffde67c5e..00b9c02a93f7 100644 --- a/code/package.json +++ b/code/package.json @@ -83,10 +83,8 @@ "sandbox": "ts-node ../scripts/sandbox.ts", "serve-storybooks": "http-server ./built-storybooks -p 8001", "smoketest-storybooks": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true node -r esm ../scripts/smoketest-storybooks.js", - "start": "yarn workspace official-storybook storybook --no-manager-cache", "task": "ts-node ../scripts/task.ts", "test": "NODE_OPTIONS=--max_old_space_size=4096 jest --config ./jest.config.js", - "test-puppeteer": "jest --projects examples/official-storybook/storyshots-puppeteer", "test:cli": "npm --prefix lib/cli run test", "test:e2e-examples": "cypress run", "test:e2e-examples-gui": "concurrently --success first --kill-others \"cypress open\" \"yarn serve-storybooks\"", diff --git a/code/workspace.json b/code/workspace.json index b47e3d676750..646ba091325d 100644 --- a/code/workspace.json +++ b/code/workspace.json @@ -431,11 +431,6 @@ "type": "library", "implicitDependencies": [] }, - "official-storybook": { - "root": "examples/official-storybook", - "type": "library", - "implicitDependencies": [] - }, "preact-example": { "root": "examples/preact-kitchen-sink", "type": "library", diff --git a/docs/contribute/code.md b/docs/contribute/code.md index 3d8a6691f2e1..4933b686e583 100644 --- a/docs/contribute/code.md +++ b/docs/contribute/code.md @@ -93,6 +93,7 @@ When you're done coding, add documentation and tests as appropriate. That simpli Adding a story or set of stories to our suite of example apps helps you test your work. +TODO: needs updated instructions, official-storybook is now removed If you're modifying part of Storybook's core, or one of the essential addons, there's probably an existing set of stories in the [`official-storybook`](../../examples/official-storybook) that documents how the feature is supposed to work. Add your stories there. If you're modifying something related to a specific framework, the framework will have its own examples in the monorepo. For instance, [`examples/vue-kitchen-sink`](../../examples/vue-kitchen-sink) is a natural place to add stories for `@storybook/vue` while [`examples/angular-cli`](../../examples/angular-cli) is the place for `@storybook/angular`. diff --git a/docs/contribute/how-to-contribute.md b/docs/contribute/how-to-contribute.md index 198f7f978d0a..a8b56d5c85cc 100644 --- a/docs/contribute/how-to-contribute.md +++ b/docs/contribute/how-to-contribute.md @@ -14,14 +14,9 @@ In the interest of fostering an open and welcoming environment, we as contributo - [**Docs**](./documentation-updates.md): Typos, clarifications - [**Integrations**](./../api/new-frameworks.md): Integrate Storybook with your favorite library - [**Addons**](./../addons/introduction.md): Build an addon and share it with the community -- [**Examples**](https://github.com/storybookjs/storybook/tree/next/code/examples/official-storybook): Add an example/test for a feature - +- TODO ## Not sure how to get started? - [Chat in Discord #contributing](https://discord.gg/storybook) - [Browse "good first issues" to fix](https://github.com/storybookjs/storybook/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) - [Submit a bug report or feature request](https://github.com/storybookjs/storybook/issues) - -## Additional resources - -- [**Official Storybook**](https://next--storybookjs.netlify.app/official-storybook/): The Storybook we use to build Storybook diff --git a/scripts/build-storybooks.js b/scripts/build-storybooks.js index afd982da97b9..5af2cd9a6ead 100755 --- a/scripts/build-storybooks.js +++ b/scripts/build-storybooks.js @@ -12,7 +12,7 @@ import { filterDataForCurrentCircleCINode } from './utils/concurrency'; program .option( '--skip ', - 'Skip an example, accepts multiple values like "--skip vue-kitchen-sink official-storybook"', + 'Skip an example, accepts multiple values like "--skip vue-kitchen-sink"', (value, previous) => previous.concat([value]), [] ) diff --git a/scripts/smoketest-storybooks.js b/scripts/smoketest-storybooks.js index 7d0a39aa4e9b..2c1b9dd8fb4a 100755 --- a/scripts/smoketest-storybooks.js +++ b/scripts/smoketest-storybooks.js @@ -12,7 +12,7 @@ import { filterDataForCurrentCircleCINode } from './utils/concurrency'; program .option( '--skip ', - 'Skip an example, accepts multiple values like "--skip vue-kitchen-sink official-storybook"', + 'Skip an example, accepts multiple values like "--skip vue-kitchen-sink"', (value, previous) => previous.concat([value]), [] ) From d326cf42d659b9ccbdecfb323cefc50fbd79beff Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 5 Oct 2022 12:49:33 +0200 Subject: [PATCH 02/10] fix parallelism --- .circleci/config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index e71e9d1919f5..58be23c9a009 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -136,7 +136,7 @@ jobs: executor: class: medium+ name: sb_node_14_browsers - parallelism: 12 + parallelism: 11 steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' From e8b3da89553caf2031a3000382ccd6abfc23e12a Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 5 Oct 2022 13:20:07 +0200 Subject: [PATCH 03/10] fix linting --- .../stories/docgen-components/8279-js-styled-docgen/input.jsx | 2 +- .../docgen-components/8663-js-styled-components/input.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/code/renderers/react/template/stories/docgen-components/8279-js-styled-docgen/input.jsx b/code/renderers/react/template/stories/docgen-components/8279-js-styled-docgen/input.jsx index 4b6b88180044..3895d5711206 100644 --- a/code/renderers/react/template/stories/docgen-components/8279-js-styled-docgen/input.jsx +++ b/code/renderers/react/template/stories/docgen-components/8279-js-styled-docgen/input.jsx @@ -1,4 +1,4 @@ -// eslint-disable-next-line import/no-extraneous-dependencies +/* eslint-disable import/no-unresolved */ import styled from 'styled-components'; import PropTypes from 'prop-types'; diff --git a/code/renderers/react/template/stories/docgen-components/8663-js-styled-components/input.jsx b/code/renderers/react/template/stories/docgen-components/8663-js-styled-components/input.jsx index c33048295c64..c2e8fb72e3bd 100644 --- a/code/renderers/react/template/stories/docgen-components/8663-js-styled-components/input.jsx +++ b/code/renderers/react/template/stories/docgen-components/8663-js-styled-components/input.jsx @@ -1,5 +1,5 @@ -/* eslint-disable import/no-extraneous-dependencies */ /* eslint-disable react/require-default-props */ +/* eslint-disable import/no-unresolved */ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; From dfd0c6085e75fa2cf5625fe7ec79ecfc0ff6fa74 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 5 Oct 2022 13:43:14 +0200 Subject: [PATCH 04/10] fix tests --- code/jest.config.js | 1 - .../core-server/src/__for-testing__/main.ts | 44 +++++++++++++++++++ code/lib/core-server/src/core-presets.test.ts | 3 +- .../8279-js-styled-docgen/docgen.snapshot | 2 +- .../argTypes.snapshot | 25 ----------- .../8663-js-styled-components/docgen.snapshot | 35 --------------- .../8663-js-styled-components/input.jsx | 21 --------- .../properties.snapshot | 21 --------- 8 files changed, 46 insertions(+), 106 deletions(-) create mode 100644 code/lib/core-server/src/__for-testing__/main.ts delete mode 100644 code/renderers/react/template/stories/docgen-components/8663-js-styled-components/argTypes.snapshot delete mode 100644 code/renderers/react/template/stories/docgen-components/8663-js-styled-components/docgen.snapshot delete mode 100644 code/renderers/react/template/stories/docgen-components/8663-js-styled-components/input.jsx delete mode 100644 code/renderers/react/template/stories/docgen-components/8663-js-styled-components/properties.snapshot diff --git a/code/jest.config.js b/code/jest.config.js index 7c119dbafd80..d86b813e0753 100644 --- a/code/jest.config.js +++ b/code/jest.config.js @@ -41,7 +41,6 @@ module.exports = { '/frameworks', '/lib', '/renderers', - '/examples/official-storybook', '/examples/react-ts', ], transform: { diff --git a/code/lib/core-server/src/__for-testing__/main.ts b/code/lib/core-server/src/__for-testing__/main.ts new file mode 100644 index 000000000000..fa51766e374f --- /dev/null +++ b/code/lib/core-server/src/__for-testing__/main.ts @@ -0,0 +1,44 @@ +/// +import type { StorybookConfig } from '@storybook/react-webpack5'; + +const config: StorybookConfig = { + stories: [ + '../../lib/ui/src/**/*.stories.@(ts|tsx|js|jsx|mdx)', + '../../lib/components/src/**/*.stories.@(ts|tsx|js|jsx|mdx)', + './../../addons/docs/**/*.stories.@(ts|tsx|js|jsx|mdx)', + './../../addons/interactions/**/*.stories.@(ts|tsx|js|jsx|mdx)', + ], + addons: [ + { + name: '@storybook/addon-docs', + options: { + transcludeMarkdown: true, + sourceLoaderOptions: null, + }, + }, + '@storybook/addon-essentials', + '@storybook/addon-interactions', + '@storybook/addon-storysource', + '@storybook/addon-links', + '@storybook/addon-jest', + '@storybook/addon-a11y', + ], + core: { + channelOptions: { allowFunction: false, maxDepth: 10 }, + disableTelemetry: true, + }, + logLevel: 'debug', + features: { + interactionsDebugger: true, + breakingChangesV7: false, + storyStoreV7: false, + }, + framework: { + name: '@storybook/react-webpack5', + options: { + fastRefresh: true, + strictMode: true, + }, + }, +}; +module.exports = config; diff --git a/code/lib/core-server/src/core-presets.test.ts b/code/lib/core-server/src/core-presets.test.ts index 42bb5bc357a0..1a31d8b2c394 100644 --- a/code/lib/core-server/src/core-presets.test.ts +++ b/code/lib/core-server/src/core-presets.test.ts @@ -127,8 +127,7 @@ const baseOptions = { managerOnly, // production docsMode: false, cache, - // TODO: fix this - configDir: path.resolve(`${__dirname}/../../../examples/official-storybook/`), + configDir: path.resolve(`${__dirname}/__for-testing__/`), ci: true, managerCache: false, }; diff --git a/code/renderers/react/template/stories/docgen-components/8279-js-styled-docgen/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/8279-js-styled-docgen/docgen.snapshot index 589ae55f4534..cd5069056a95 100644 --- a/code/renderers/react/template/stories/docgen-components/8279-js-styled-docgen/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/8279-js-styled-docgen/docgen.snapshot @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`react component properties 8279-js-styled-docgen 1`] = ` -"// eslint-disable-next-line import/no-extraneous-dependencies +"/* eslint-disable import/no-unresolved */ import styled from 'styled-components'; import PropTypes from 'prop-types'; /** diff --git a/code/renderers/react/template/stories/docgen-components/8663-js-styled-components/argTypes.snapshot b/code/renderers/react/template/stories/docgen-components/8663-js-styled-components/argTypes.snapshot deleted file mode 100644 index 12f7441c6af0..000000000000 --- a/code/renderers/react/template/stories/docgen-components/8663-js-styled-components/argTypes.snapshot +++ /dev/null @@ -1,25 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`react component properties 8663-js-styled-components 1`] = ` -Object { - "bg": Object { - "control": Object { - "type": "text", - }, - "description": "", - "name": "bg", - "table": Object { - "defaultValue": null, - "jsDocTags": undefined, - "type": Object { - "detail": undefined, - "summary": "string", - }, - }, - "type": Object { - "name": "string", - "required": false, - }, - }, -} -`; diff --git a/code/renderers/react/template/stories/docgen-components/8663-js-styled-components/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/8663-js-styled-components/docgen.snapshot deleted file mode 100644 index 53e86ec92ef5..000000000000 --- a/code/renderers/react/template/stories/docgen-components/8663-js-styled-components/docgen.snapshot +++ /dev/null @@ -1,35 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`react component properties 8663-js-styled-components 1`] = ` -"/* eslint-disable import/no-extraneous-dependencies */ - -/* eslint-disable react/require-default-props */ -import React from 'react'; -import PropTypes from 'prop-types'; -import styled from 'styled-components'; -const Box = styled.div\` - background-color: \${props => props.bg}; -\`; -Box.propTypes = { - bg: PropTypes.string -}; -export const MyBox = props => /*#__PURE__*/React.createElement(Box, props); -MyBox.propTypes = { - bg: PropTypes.string -}; -export const component = MyBox; -MyBox.__docgenInfo = { - \\"description\\": \\"\\", - \\"methods\\": [], - \\"displayName\\": \\"MyBox\\", - \\"props\\": { - \\"bg\\": { - \\"description\\": \\"\\", - \\"type\\": { - \\"name\\": \\"string\\" - }, - \\"required\\": false - } - } -};" -`; diff --git a/code/renderers/react/template/stories/docgen-components/8663-js-styled-components/input.jsx b/code/renderers/react/template/stories/docgen-components/8663-js-styled-components/input.jsx deleted file mode 100644 index c2e8fb72e3bd..000000000000 --- a/code/renderers/react/template/stories/docgen-components/8663-js-styled-components/input.jsx +++ /dev/null @@ -1,21 +0,0 @@ -/* eslint-disable react/require-default-props */ -/* eslint-disable import/no-unresolved */ -import React from 'react'; -import PropTypes from 'prop-types'; -import styled from 'styled-components'; - -const Box = styled.div` - background-color: ${(props) => props.bg}; -`; - -Box.propTypes = { - bg: PropTypes.string, -}; - -export const MyBox = (props) => ; - -MyBox.propTypes = { - bg: PropTypes.string, -}; - -export const component = MyBox; diff --git a/code/renderers/react/template/stories/docgen-components/8663-js-styled-components/properties.snapshot b/code/renderers/react/template/stories/docgen-components/8663-js-styled-components/properties.snapshot deleted file mode 100644 index e6923faff496..000000000000 --- a/code/renderers/react/template/stories/docgen-components/8663-js-styled-components/properties.snapshot +++ /dev/null @@ -1,21 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`react component properties 8663-js-styled-components 1`] = ` -Object { - "rows": Array [ - Object { - "defaultValue": null, - "description": "", - "name": "bg", - "required": false, - "sbType": Object { - "name": "string", - }, - "type": Object { - "detail": undefined, - "summary": "string", - }, - }, - ], -} -`; From d81841980e16128422ca610c0b72f331ee0d496c Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 5 Oct 2022 14:07:02 +0200 Subject: [PATCH 05/10] ignore --- code/lib/core-server/src/__for-testing__/main.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/code/lib/core-server/src/__for-testing__/main.ts b/code/lib/core-server/src/__for-testing__/main.ts index fa51766e374f..0be49d5c46b1 100644 --- a/code/lib/core-server/src/__for-testing__/main.ts +++ b/code/lib/core-server/src/__for-testing__/main.ts @@ -1,4 +1,6 @@ /// +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore import type { StorybookConfig } from '@storybook/react-webpack5'; const config: StorybookConfig = { From 6ba8ad35eac928a311b8717fdddc4d4553716335 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 5 Oct 2022 14:27:06 +0200 Subject: [PATCH 06/10] cleanup --- code/addons/docs/src/typings.d.ts | 1 - code/package.json | 3 --- .../8279-js-styled-docgen/argTypes.snapshot | 3 --- .../8279-js-styled-docgen/docgen.snapshot | 25 ------------------- .../8279-js-styled-docgen/input.jsx | 24 ------------------ .../8279-js-styled-docgen/properties.snapshot | 7 ------ code/yarn.lock | 2 -- 7 files changed, 65 deletions(-) delete mode 100644 code/renderers/react/template/stories/docgen-components/8279-js-styled-docgen/argTypes.snapshot delete mode 100644 code/renderers/react/template/stories/docgen-components/8279-js-styled-docgen/docgen.snapshot delete mode 100644 code/renderers/react/template/stories/docgen-components/8279-js-styled-docgen/input.jsx delete mode 100644 code/renderers/react/template/stories/docgen-components/8279-js-styled-docgen/properties.snapshot diff --git a/code/addons/docs/src/typings.d.ts b/code/addons/docs/src/typings.d.ts index 711442922516..94baba6cf528 100644 --- a/code/addons/docs/src/typings.d.ts +++ b/code/addons/docs/src/typings.d.ts @@ -4,7 +4,6 @@ declare module '@egoist/vue-to-react'; declare module 'remark-slug'; declare module 'remark-external-links'; declare module 'babel-plugin-react-docgen'; -declare module 'styled-components'; declare module 'acorn-jsx'; declare module 'vue/dist/vue'; diff --git a/code/package.json b/code/package.json index 7c3314181e7b..9f7c82de0def 100644 --- a/code/package.json +++ b/code/package.json @@ -367,9 +367,6 @@ "preact": { "built": false }, - "styled-components": { - "built": false - }, "yorkie": { "built": false } diff --git a/code/renderers/react/template/stories/docgen-components/8279-js-styled-docgen/argTypes.snapshot b/code/renderers/react/template/stories/docgen-components/8279-js-styled-docgen/argTypes.snapshot deleted file mode 100644 index bf6bf8c4a943..000000000000 --- a/code/renderers/react/template/stories/docgen-components/8279-js-styled-docgen/argTypes.snapshot +++ /dev/null @@ -1,3 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`react component properties 8279-js-styled-docgen 1`] = `Object {}`; diff --git a/code/renderers/react/template/stories/docgen-components/8279-js-styled-docgen/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/8279-js-styled-docgen/docgen.snapshot deleted file mode 100644 index cd5069056a95..000000000000 --- a/code/renderers/react/template/stories/docgen-components/8279-js-styled-docgen/docgen.snapshot +++ /dev/null @@ -1,25 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`react component properties 8279-js-styled-docgen 1`] = ` -"/* eslint-disable import/no-unresolved */ -import styled from 'styled-components'; -import PropTypes from 'prop-types'; -/** - * Use \`A\` to provide a regular link - */ - -const A = styled('a')({ - margin: '8px 0', - outline: 'none' -}); -A.displayName = 'Link'; -A.defaultProps = { - children: 'This is a link' -}; -A.propTypes = { - /** That should be the clickable element */ - children: PropTypes.node.isRequired -}; -export default A; -export const component = A;" -`; diff --git a/code/renderers/react/template/stories/docgen-components/8279-js-styled-docgen/input.jsx b/code/renderers/react/template/stories/docgen-components/8279-js-styled-docgen/input.jsx deleted file mode 100644 index 3895d5711206..000000000000 --- a/code/renderers/react/template/stories/docgen-components/8279-js-styled-docgen/input.jsx +++ /dev/null @@ -1,24 +0,0 @@ -/* eslint-disable import/no-unresolved */ -import styled from 'styled-components'; -import PropTypes from 'prop-types'; - -/** - * Use `A` to provide a regular link - */ -const A = styled('a')({ - margin: '8px 0', - outline: 'none', -}); - -A.displayName = 'Link'; -A.defaultProps = { - children: 'This is a link', -}; - -A.propTypes = { - /** That should be the clickable element */ - children: PropTypes.node.isRequired, -}; -export default A; - -export const component = A; diff --git a/code/renderers/react/template/stories/docgen-components/8279-js-styled-docgen/properties.snapshot b/code/renderers/react/template/stories/docgen-components/8279-js-styled-docgen/properties.snapshot deleted file mode 100644 index b429f083fcc0..000000000000 --- a/code/renderers/react/template/stories/docgen-components/8279-js-styled-docgen/properties.snapshot +++ /dev/null @@ -1,7 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`react component properties 8279-js-styled-docgen 1`] = ` -Object { - "rows": Array [], -} -`; diff --git a/code/yarn.lock b/code/yarn.lock index 89d9686f4def..cc0d7ada756c 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -8684,8 +8684,6 @@ __metadata: built: false puppeteer: optional: true - styled-components: - built: false ts-loader: optional: true verdaccio: From 810b6ef413d118d1fa6ff2108cac87721f643223 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 11 Oct 2022 10:12:50 +0200 Subject: [PATCH 07/10] regen lockfile --- code/yarn.lock | 299 ++++++++++++++++++++++++------------------------- 1 file changed, 149 insertions(+), 150 deletions(-) diff --git a/code/yarn.lock b/code/yarn.lock index 5be2da195c83..87fe75898ea1 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -399,10 +399,10 @@ __metadata: languageName: node linkType: hard -"@babel/compat-data@npm:^7.16.8, @babel/compat-data@npm:^7.17.7, @babel/compat-data@npm:^7.18.8, @babel/compat-data@npm:^7.19.3": - version: 7.19.3 - resolution: "@babel/compat-data@npm:7.19.3" - checksum: c23150ca0d39071dd35f1c0c380454c72c6518ae75e1095028a7a68cd5cc49d9061d8d58356cde8431dade28f594f5261777d2b6d8869ed794169a6971ca0098 +"@babel/compat-data@npm:^7.16.8, @babel/compat-data@npm:^7.17.7, @babel/compat-data@npm:^7.19.3, @babel/compat-data@npm:^7.19.4": + version: 7.19.4 + resolution: "@babel/compat-data@npm:7.19.4" + checksum: f6c3cec531e9c8ab2b0a7db64775f6f00e88ce1f727114cffb900c989ed3bcc42edee86cbe9c1d9f42ca2dbc490bcec91840cbe258dc7e0db82a4ea396ca1779 languageName: node linkType: hard @@ -510,14 +510,14 @@ __metadata: languageName: node linkType: hard -"@babel/generator@npm:^7.12.11, @babel/generator@npm:^7.12.5, @babel/generator@npm:^7.16.8, @babel/generator@npm:^7.19.3, @babel/generator@npm:^7.4.0, @babel/generator@npm:^7.7.2, @babel/generator@npm:^7.8.7": - version: 7.19.3 - resolution: "@babel/generator@npm:7.19.3" +"@babel/generator@npm:^7.12.11, @babel/generator@npm:^7.12.5, @babel/generator@npm:^7.16.8, @babel/generator@npm:^7.19.3, @babel/generator@npm:^7.19.4, @babel/generator@npm:^7.4.0, @babel/generator@npm:^7.7.2, @babel/generator@npm:^7.8.7": + version: 7.19.5 + resolution: "@babel/generator@npm:7.19.5" dependencies: - "@babel/types": ^7.19.3 + "@babel/types": ^7.19.4 "@jridgewell/gen-mapping": ^0.3.2 jsesc: ^2.5.1 - checksum: a9ef340a17eee394f9f7a79aaee1ee2a5db2f54414ccccb29fe1c889d9811b04547921235ff91ee0191fa215f63a3a86e6b267e2aa988f04776f07e134bf86d2 + checksum: e0308398b212bbe09648ede3838b9004362586195c5a476bd73adf16f5786253676345c80920aaf8491f1733214189e8b33e0de4969e3ee5b53a8cb2232107d6 languageName: node linkType: hard @@ -728,11 +728,11 @@ __metadata: linkType: hard "@babel/helper-simple-access@npm:^7.18.6": - version: 7.18.6 - resolution: "@babel/helper-simple-access@npm:7.18.6" + version: 7.19.4 + resolution: "@babel/helper-simple-access@npm:7.19.4" dependencies: - "@babel/types": ^7.18.6 - checksum: 5da522f4cec805389cc2710a33c87638dc8afce59f36af302f75827a834b7ad67b0f118e0417604a5a42817914ab161bee9dd7fdc7dbac8963b8a6afb0398152 + "@babel/types": ^7.19.4 + checksum: 23e36b7a5063200e8ec722746ac41baad70d4c192f3fff5a435e02f599cde5f2b20bb23ff15833fe8763ffebd7677be900f7f9286b848363a97adc9aab642016 languageName: node linkType: hard @@ -754,10 +754,10 @@ __metadata: languageName: node linkType: hard -"@babel/helper-string-parser@npm:^7.18.10": - version: 7.18.10 - resolution: "@babel/helper-string-parser@npm:7.18.10" - checksum: d32cba5466806e79a8e6242773619fd72dd504e5f432752811c143e7d721c18c5143322a583f18ea0e8ba579de8a5ea32552dc79ef14f76fb2990d5b71fa06ef +"@babel/helper-string-parser@npm:^7.19.4": + version: 7.19.4 + resolution: "@babel/helper-string-parser@npm:7.19.4" + checksum: e20c81582e75df2a020a1c547376668a6e1e1c2ca535a6b7abb25b83d5536c99c0d113184bbe87c1a26e923a9bb0c6e5279fca8db6bd609cd3499fafafc01598 languageName: node linkType: hard @@ -788,13 +788,13 @@ __metadata: linkType: hard "@babel/helpers@npm:^7.12.5, @babel/helpers@npm:^7.16.7, @babel/helpers@npm:^7.19.0, @babel/helpers@npm:^7.8.4": - version: 7.19.0 - resolution: "@babel/helpers@npm:7.19.0" + version: 7.19.4 + resolution: "@babel/helpers@npm:7.19.4" dependencies: "@babel/template": ^7.18.10 - "@babel/traverse": ^7.19.0 - "@babel/types": ^7.19.0 - checksum: 810d9b7927d56b2e2dad07b899d0503bf6d1fa9fa84df9dccb2283509033f1eb494c48ad1e67516293f6c40e16ae8c3528402e6c9060119bb987665396606a6e + "@babel/traverse": ^7.19.4 + "@babel/types": ^7.19.4 + checksum: e13cca08375f5fe816f01173f6cffc685c3b0605bf7fd94ac76495209f57d69e352fa93bf0ff87f63d705d53b5d5e75abd0b5c2e653776c744911140e5ae7c7e languageName: node linkType: hard @@ -809,12 +809,12 @@ __metadata: languageName: node linkType: hard -"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.11.5, @babel/parser@npm:^7.12.11, @babel/parser@npm:^7.12.7, @babel/parser@npm:^7.13.12, @babel/parser@npm:^7.13.16, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.16.12, @babel/parser@npm:^7.16.4, @babel/parser@npm:^7.16.7, @babel/parser@npm:^7.18.10, @babel/parser@npm:^7.18.4, @babel/parser@npm:^7.19.3, @babel/parser@npm:^7.4.3, @babel/parser@npm:^7.4.5, @babel/parser@npm:^7.6.0, @babel/parser@npm:^7.7.0, @babel/parser@npm:^7.8.6, @babel/parser@npm:^7.8.7, @babel/parser@npm:^7.9.6": - version: 7.19.3 - resolution: "@babel/parser@npm:7.19.3" +"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.11.5, @babel/parser@npm:^7.12.11, @babel/parser@npm:^7.12.7, @babel/parser@npm:^7.13.12, @babel/parser@npm:^7.13.16, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.16.12, @babel/parser@npm:^7.16.4, @babel/parser@npm:^7.16.7, @babel/parser@npm:^7.18.10, @babel/parser@npm:^7.18.4, @babel/parser@npm:^7.19.3, @babel/parser@npm:^7.19.4, @babel/parser@npm:^7.4.3, @babel/parser@npm:^7.4.5, @babel/parser@npm:^7.6.0, @babel/parser@npm:^7.7.0, @babel/parser@npm:^7.8.6, @babel/parser@npm:^7.8.7, @babel/parser@npm:^7.9.6": + version: 7.19.4 + resolution: "@babel/parser@npm:7.19.4" bin: parser: ./bin/babel-parser.js - checksum: 38f5869733576c55364eb926d81d5efd9cc604d9464f32beada4229af33f1a48e53bb167ad978f7565a9eed31a622c2ff85da891fe0083203d793a1d414f1e3b + checksum: 51a69ca46dcd4d303df3466bc0ac3da421fdbf3cc62c1cd59d4776561334fe048e2b2445356074fdba54905cad6389feea650c6cc69131c77e93faeae141bb78 languageName: node linkType: hard @@ -1006,18 +1006,18 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-proposal-object-rest-spread@npm:^7.16.7, @babel/plugin-proposal-object-rest-spread@npm:^7.17.3, @babel/plugin-proposal-object-rest-spread@npm:^7.18.9": - version: 7.18.9 - resolution: "@babel/plugin-proposal-object-rest-spread@npm:7.18.9" +"@babel/plugin-proposal-object-rest-spread@npm:^7.16.7, @babel/plugin-proposal-object-rest-spread@npm:^7.17.3, @babel/plugin-proposal-object-rest-spread@npm:^7.19.4": + version: 7.19.4 + resolution: "@babel/plugin-proposal-object-rest-spread@npm:7.19.4" dependencies: - "@babel/compat-data": ^7.18.8 - "@babel/helper-compilation-targets": ^7.18.9 - "@babel/helper-plugin-utils": ^7.18.9 + "@babel/compat-data": ^7.19.4 + "@babel/helper-compilation-targets": ^7.19.3 + "@babel/helper-plugin-utils": ^7.19.0 "@babel/plugin-syntax-object-rest-spread": ^7.8.3 "@babel/plugin-transform-parameters": ^7.18.8 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 8e58aa40511897256f98dc558003ce3dd41073e30a9a63045eae1d5f4d9a599f5931670e19f3be62099b92be9381ccfa698c261101180dab2c257f23bde89e48 + checksum: 0c51c3ef25890ee69bec275db6d4a79b475b809dcb473cd64d5afed96f60be51d928a59356beb69e40b1328c34715e400b48322c6af823ba3792bbe52d7cc7d9 languageName: node linkType: hard @@ -1385,14 +1385,14 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-block-scoping@npm:^7.16.7, @babel/plugin-transform-block-scoping@npm:^7.18.9, @babel/plugin-transform-block-scoping@npm:^7.8.3": - version: 7.18.9 - resolution: "@babel/plugin-transform-block-scoping@npm:7.18.9" +"@babel/plugin-transform-block-scoping@npm:^7.16.7, @babel/plugin-transform-block-scoping@npm:^7.19.4, @babel/plugin-transform-block-scoping@npm:^7.8.3": + version: 7.19.4 + resolution: "@babel/plugin-transform-block-scoping@npm:7.19.4" dependencies: - "@babel/helper-plugin-utils": ^7.18.9 + "@babel/helper-plugin-utils": ^7.19.0 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 1645188b7bd97ee10832607c9072af5184823cfd67cd319b7fb90544d27d45b222e85118dc07581913d14b1c6b36ba100c321ecdd311b107a2fb48427bff762e + checksum: 442e93711e3951d4f14e9ef1bc15220273a3d99cb5c1f1c785dac9e32f69eab9d9f3849c82fab8f9590116b0151ae5d2026029276448552e2201733aa394135d languageName: node linkType: hard @@ -1426,14 +1426,14 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-destructuring@npm:^7.16.7, @babel/plugin-transform-destructuring@npm:^7.17.3, @babel/plugin-transform-destructuring@npm:^7.18.13": - version: 7.18.13 - resolution: "@babel/plugin-transform-destructuring@npm:7.18.13" +"@babel/plugin-transform-destructuring@npm:^7.16.7, @babel/plugin-transform-destructuring@npm:^7.17.3, @babel/plugin-transform-destructuring@npm:^7.19.4": + version: 7.19.4 + resolution: "@babel/plugin-transform-destructuring@npm:7.19.4" dependencies: - "@babel/helper-plugin-utils": ^7.18.9 + "@babel/helper-plugin-utils": ^7.19.0 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: fd6ccf9242d9d12f3d42d0a274aa668608d8805675e72729e04b2fafa9a6613872d548847f8c9359629a0a00ab0a433385e173e99f00991161afb9c577c3bfe0 + checksum: 09f6e41b10e5c798bd9c2b09b7243b5c06088c220494aff699e604306797188698bb9f00f50963bb89707af11f979b888ff7ff0eb498a5200d64b759fc0ece34 languageName: node linkType: hard @@ -1977,10 +1977,10 @@ __metadata: linkType: hard "@babel/preset-env@npm:^7.12.11, @babel/preset-env@npm:^7.16.11, @babel/preset-env@npm:^7.16.5, @babel/preset-env@npm:^7.17.10": - version: 7.19.3 - resolution: "@babel/preset-env@npm:7.19.3" + version: 7.19.4 + resolution: "@babel/preset-env@npm:7.19.4" dependencies: - "@babel/compat-data": ^7.19.3 + "@babel/compat-data": ^7.19.4 "@babel/helper-compilation-targets": ^7.19.3 "@babel/helper-plugin-utils": ^7.19.0 "@babel/helper-validator-option": ^7.18.6 @@ -1995,7 +1995,7 @@ __metadata: "@babel/plugin-proposal-logical-assignment-operators": ^7.18.9 "@babel/plugin-proposal-nullish-coalescing-operator": ^7.18.6 "@babel/plugin-proposal-numeric-separator": ^7.18.6 - "@babel/plugin-proposal-object-rest-spread": ^7.18.9 + "@babel/plugin-proposal-object-rest-spread": ^7.19.4 "@babel/plugin-proposal-optional-catch-binding": ^7.18.6 "@babel/plugin-proposal-optional-chaining": ^7.18.9 "@babel/plugin-proposal-private-methods": ^7.18.6 @@ -2019,10 +2019,10 @@ __metadata: "@babel/plugin-transform-arrow-functions": ^7.18.6 "@babel/plugin-transform-async-to-generator": ^7.18.6 "@babel/plugin-transform-block-scoped-functions": ^7.18.6 - "@babel/plugin-transform-block-scoping": ^7.18.9 + "@babel/plugin-transform-block-scoping": ^7.19.4 "@babel/plugin-transform-classes": ^7.19.0 "@babel/plugin-transform-computed-properties": ^7.18.9 - "@babel/plugin-transform-destructuring": ^7.18.13 + "@babel/plugin-transform-destructuring": ^7.19.4 "@babel/plugin-transform-dotall-regex": ^7.18.6 "@babel/plugin-transform-duplicate-keys": ^7.18.9 "@babel/plugin-transform-exponentiation-operator": ^7.18.6 @@ -2049,7 +2049,7 @@ __metadata: "@babel/plugin-transform-unicode-escapes": ^7.18.10 "@babel/plugin-transform-unicode-regex": ^7.18.6 "@babel/preset-modules": ^0.1.5 - "@babel/types": ^7.19.3 + "@babel/types": ^7.19.4 babel-plugin-polyfill-corejs2: ^0.3.3 babel-plugin-polyfill-corejs3: ^0.6.0 babel-plugin-polyfill-regenerator: ^0.4.1 @@ -2057,7 +2057,7 @@ __metadata: semver: ^6.3.0 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: de30eb89873974f36721a22e4c1b9f7cc48931e607eabc00ef43b4c39f5459b6fdc55206bd1d2ad78db313b6543bfc81c6bbf0f6928861af4dfddb04c7476f6f + checksum: a0c1e9e575c497d71ccf84242276356abb6c4fede7c52733785e988131458433dd2329bd96921465c23b30d2cad19977c23617b657d986dac3d6fed544b45a29 languageName: node linkType: hard @@ -2134,12 +2134,12 @@ __metadata: linkType: hard "@babel/runtime-corejs3@npm:^7.10.2": - version: 7.19.1 - resolution: "@babel/runtime-corejs3@npm:7.19.1" + version: 7.19.4 + resolution: "@babel/runtime-corejs3@npm:7.19.4" dependencies: core-js-pure: ^3.25.1 regenerator-runtime: ^0.13.4 - checksum: 84c509499eed1c32ad280830fc1dccb6f1cc7858dc8946709a1776781cd80e6de12820d6108f0224d4fd4070fdec1b8a2090dfa62a6cc334182a6186ef7bf0ca + checksum: 01b55c54c4b649d4897f873982ee0097b1f9d597b62a97491c5ca4b0e659bf9576914d00b2cd6d140f19497a8f5ace6efdb958eff123ffa499c422f338946deb languageName: node linkType: hard @@ -2171,11 +2171,11 @@ __metadata: linkType: hard "@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.10.5, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.8, @babel/runtime@npm:^7.17.2, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.9, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2": - version: 7.19.0 - resolution: "@babel/runtime@npm:7.19.0" + version: 7.19.4 + resolution: "@babel/runtime@npm:7.19.4" dependencies: regenerator-runtime: ^0.13.4 - checksum: 42d4f11d6a5bfcf5a3d05346e7f1aef79a53b9e1968b4dc54a0682df60284300c97de3be63f4d5dd47b404d3a1022a8a57444b5d150822ec8974757de7233f6e + checksum: 3ad7f298262cf1f060a3bf2be9f65afa3c034c9c7a2e7c9d3ec41ab58c944c86756d0e0fdfc08d178f983f48d6b5613c15253d83216fbe02b6141c13d28f12e5 languageName: node linkType: hard @@ -2221,32 +2221,32 @@ __metadata: languageName: node linkType: hard -"@babel/traverse@npm:^7.1.0, @babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.12.11, @babel/traverse@npm:^7.12.9, @babel/traverse@npm:^7.16.10, @babel/traverse@npm:^7.19.0, @babel/traverse@npm:^7.19.1, @babel/traverse@npm:^7.19.3, @babel/traverse@npm:^7.4.3, @babel/traverse@npm:^7.4.5, @babel/traverse@npm:^7.7.0, @babel/traverse@npm:^7.7.2, @babel/traverse@npm:^7.8.6": - version: 7.19.3 - resolution: "@babel/traverse@npm:7.19.3" +"@babel/traverse@npm:^7.1.0, @babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.12.11, @babel/traverse@npm:^7.12.9, @babel/traverse@npm:^7.16.10, @babel/traverse@npm:^7.19.0, @babel/traverse@npm:^7.19.1, @babel/traverse@npm:^7.19.3, @babel/traverse@npm:^7.19.4, @babel/traverse@npm:^7.4.3, @babel/traverse@npm:^7.4.5, @babel/traverse@npm:^7.7.0, @babel/traverse@npm:^7.7.2, @babel/traverse@npm:^7.8.6": + version: 7.19.4 + resolution: "@babel/traverse@npm:7.19.4" dependencies: "@babel/code-frame": ^7.18.6 - "@babel/generator": ^7.19.3 + "@babel/generator": ^7.19.4 "@babel/helper-environment-visitor": ^7.18.9 "@babel/helper-function-name": ^7.19.0 "@babel/helper-hoist-variables": ^7.18.6 "@babel/helper-split-export-declaration": ^7.18.6 - "@babel/parser": ^7.19.3 - "@babel/types": ^7.19.3 + "@babel/parser": ^7.19.4 + "@babel/types": ^7.19.4 debug: ^4.1.0 globals: ^11.1.0 - checksum: fd0669353ea6346f77060ed8a49987e6747ce7f0b61581d110e6c5ed3cc3dd86032d7ff9e379b658131b2d421355d454a37c4222a620d221ada2b1196f95e74d + checksum: 592312804a5d4fe87a5c9c914e94c292055e67ba9fdba6b5b0b9ea1f93008a7bc3aed7e56cdd1550ca758dba8212cf96eb82990ee4c5697a3bd407203211c020 languageName: node linkType: hard -"@babel/types@npm:^7.0.0, @babel/types@npm:^7.11.5, @babel/types@npm:^7.12.11, @babel/types@npm:^7.12.7, @babel/types@npm:^7.16.7, @babel/types@npm:^7.16.8, @babel/types@npm:^7.18.10, @babel/types@npm:^7.18.6, @babel/types@npm:^7.18.8, @babel/types@npm:^7.18.9, @babel/types@npm:^7.19.0, @babel/types@npm:^7.19.3, @babel/types@npm:^7.2.0, @babel/types@npm:^7.3.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.0, @babel/types@npm:^7.4.4, @babel/types@npm:^7.6.1, @babel/types@npm:^7.7.0, @babel/types@npm:^7.7.2, @babel/types@npm:^7.8.3, @babel/types@npm:^7.8.6, @babel/types@npm:^7.8.7, @babel/types@npm:^7.9.6": - version: 7.19.3 - resolution: "@babel/types@npm:7.19.3" +"@babel/types@npm:^7.0.0, @babel/types@npm:^7.11.5, @babel/types@npm:^7.12.11, @babel/types@npm:^7.12.7, @babel/types@npm:^7.16.7, @babel/types@npm:^7.16.8, @babel/types@npm:^7.18.10, @babel/types@npm:^7.18.6, @babel/types@npm:^7.18.8, @babel/types@npm:^7.18.9, @babel/types@npm:^7.19.0, @babel/types@npm:^7.19.3, @babel/types@npm:^7.19.4, @babel/types@npm:^7.2.0, @babel/types@npm:^7.3.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.0, @babel/types@npm:^7.4.4, @babel/types@npm:^7.6.1, @babel/types@npm:^7.7.0, @babel/types@npm:^7.7.2, @babel/types@npm:^7.8.3, @babel/types@npm:^7.8.6, @babel/types@npm:^7.8.7, @babel/types@npm:^7.9.6": + version: 7.19.4 + resolution: "@babel/types@npm:7.19.4" dependencies: - "@babel/helper-string-parser": ^7.18.10 + "@babel/helper-string-parser": ^7.19.4 "@babel/helper-validator-identifier": ^7.19.1 to-fast-properties: ^2.0.0 - checksum: a31e612300c6f7e6bd79e19553c03da1f33ea01a3d08fb91f76b2f55422b5ebf9f30a5b8c5eedc80d27fe7812c43fa9f9ff01289a09751a64b800b89dd4ca6dc + checksum: 62d0d24fc87e36666874725b05bb0895a8834f09713ec76bf28eb2b615aa80287fd3f29801a923b9ff8a90d7f8ffd4b40bc7bc4840e4a530e165cdab3e6bfb78 languageName: node linkType: hard @@ -9913,16 +9913,16 @@ __metadata: linkType: hard "@types/node@npm:*, @types/node@npm:>= 8, @types/node@npm:>=10.0.0, @types/node@npm:^18.7.20": - version: 18.8.3 - resolution: "@types/node@npm:18.8.3" - checksum: 67d837c55ae33b290ec01d8adb75d695ac7e7beddda5b7646eb53382c9f29f98c3e5307b9a4ba122cbebbef4b84d18a12cff4e4312eb9d12e7acd747cc75239a + version: 18.8.4 + resolution: "@types/node@npm:18.8.4" + checksum: 2dab5a821edd12c2e435c14645dc396d568090c1703d65aef2f8a2b66abf24cce8cd925ce7c645a105c505a1457722159d6248e9f69f35c0d196fa85e0a52f3c languageName: node linkType: hard "@types/node@npm:^14.0.10 || ^16.0.0, @types/node@npm:^14.14.20 || ^16.0.0": - version: 16.11.64 - resolution: "@types/node@npm:16.11.64" - checksum: 4b5ee37e3d2dc3364abbffee7e9f4c27fc22b44305ff5920fcc1b7fe08343bf113fface6a565c2406f77f8818d5ddcfb31652df6a43e4ab971976256d176bf37 + version: 16.11.65 + resolution: "@types/node@npm:16.11.65" + checksum: 5d66c2e0119ff194b2e196b0016d5d083fd332a114cea04822fbc22a7733b2feba0db9de380a289f457312a24b2f313396084b682d670038f5b2ced2d14fc659 languageName: node linkType: hard @@ -10502,12 +10502,12 @@ __metadata: linkType: hard "@typescript-eslint/eslint-plugin@npm:^5.15.0": - version: 5.39.0 - resolution: "@typescript-eslint/eslint-plugin@npm:5.39.0" + version: 5.40.0 + resolution: "@typescript-eslint/eslint-plugin@npm:5.40.0" dependencies: - "@typescript-eslint/scope-manager": 5.39.0 - "@typescript-eslint/type-utils": 5.39.0 - "@typescript-eslint/utils": 5.39.0 + "@typescript-eslint/scope-manager": 5.40.0 + "@typescript-eslint/type-utils": 5.40.0 + "@typescript-eslint/utils": 5.40.0 debug: ^4.3.4 ignore: ^5.2.0 regexpp: ^3.2.0 @@ -10519,7 +10519,7 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 49e9ac59e06ac041bcc965dc6bd69f4e902b260a64fcf84e3193cf64f817d77abaf4e5b90baddadfc59ff303f5d54abadb62759cf4178451e34d35ab7d304bbb + checksum: 51e92fe54b6dcdc5a06fb355c0f33ba9d701fe9afed153e5fc07d0161273fa7aec5005d7c38da9cd59ba54019c8738e020716cd03c55527504ad596c4ffbbdb0 languageName: node linkType: hard @@ -10540,19 +10540,19 @@ __metadata: linkType: hard "@typescript-eslint/parser@npm:^5.15.0": - version: 5.39.0 - resolution: "@typescript-eslint/parser@npm:5.39.0" + version: 5.40.0 + resolution: "@typescript-eslint/parser@npm:5.40.0" dependencies: - "@typescript-eslint/scope-manager": 5.39.0 - "@typescript-eslint/types": 5.39.0 - "@typescript-eslint/typescript-estree": 5.39.0 + "@typescript-eslint/scope-manager": 5.40.0 + "@typescript-eslint/types": 5.40.0 + "@typescript-eslint/typescript-estree": 5.40.0 debug: ^4.3.4 peerDependencies: eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 peerDependenciesMeta: typescript: optional: true - checksum: 29070efbd1d0053f482cf97afbd25f91d6d65d7daa28afc2e95781a02b634c5f9f37489cb75f7ac29fc16d6bce5ed56efead28c495a039848b07645c2bf555b2 + checksum: aecb9ff21e17c3d940c9ede426d177ae0ef41ff133b5bb2b5b2c39a3773a35fcf7aa7729ef7081d31fce2c8cffa75c3615ebf49bc45042b69a1754c263315e03 languageName: node linkType: hard @@ -10566,22 +10566,22 @@ __metadata: languageName: node linkType: hard -"@typescript-eslint/scope-manager@npm:5.39.0": - version: 5.39.0 - resolution: "@typescript-eslint/scope-manager@npm:5.39.0" +"@typescript-eslint/scope-manager@npm:5.40.0": + version: 5.40.0 + resolution: "@typescript-eslint/scope-manager@npm:5.40.0" dependencies: - "@typescript-eslint/types": 5.39.0 - "@typescript-eslint/visitor-keys": 5.39.0 - checksum: 42b0b6094e100eade585e5e40e376ea392d556b6a65ea93d55824346b916c7481619e55ffda2cd8ab26ef17e7b1c9a37d740079c3b10584783dc0ce20b900ed7 + "@typescript-eslint/types": 5.40.0 + "@typescript-eslint/visitor-keys": 5.40.0 + checksum: 0a27270c7f8174b0173c3200b7019d07d1bb7d37dec7f94e417c25a994a0bd646160c204c2ce647f74df0ecdf33bacb73f9e0e41560777d3d51ddb422cdf3938 languageName: node linkType: hard -"@typescript-eslint/type-utils@npm:5.39.0": - version: 5.39.0 - resolution: "@typescript-eslint/type-utils@npm:5.39.0" +"@typescript-eslint/type-utils@npm:5.40.0": + version: 5.40.0 + resolution: "@typescript-eslint/type-utils@npm:5.40.0" dependencies: - "@typescript-eslint/typescript-estree": 5.39.0 - "@typescript-eslint/utils": 5.39.0 + "@typescript-eslint/typescript-estree": 5.40.0 + "@typescript-eslint/utils": 5.40.0 debug: ^4.3.4 tsutils: ^3.21.0 peerDependencies: @@ -10589,7 +10589,7 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 44d5de03056a6138684ef056c3cc787a12408839ba5e351834a72e7b60c0b8585a8a58e3fdf129de9c6a0b1909204cf9787a6fde4737e4bbd7268b3c35a4f998 + checksum: ec9350d7f2c55d7307e7f90de967ffe478c47e891f1d022173d2681b792f5a45f1f2f8cbb283a867c859a19f9c592b0ae764b46545b5d7865c78ce13d8782d38 languageName: node linkType: hard @@ -10600,10 +10600,10 @@ __metadata: languageName: node linkType: hard -"@typescript-eslint/types@npm:5.39.0": - version: 5.39.0 - resolution: "@typescript-eslint/types@npm:5.39.0" - checksum: 41f6a967f5f4d38c37fc143415e6d6cbb91f2653718e36a5d965b364bd42639f383e867374b7496fa53778150a39a99f335dbb372d947cd33052bc99e36e3927 +"@typescript-eslint/types@npm:5.40.0": + version: 5.40.0 + resolution: "@typescript-eslint/types@npm:5.40.0" + checksum: d9f328c559fe2b66c949ee0614a51b9be0d9afd688487cd712dc9f23b92aeb00dae5163336f3568b5e1e2644d539bd1586558bf8a08932dfd21cc169c6658d57 languageName: node linkType: hard @@ -10625,12 +10625,12 @@ __metadata: languageName: node linkType: hard -"@typescript-eslint/typescript-estree@npm:5.39.0": - version: 5.39.0 - resolution: "@typescript-eslint/typescript-estree@npm:5.39.0" +"@typescript-eslint/typescript-estree@npm:5.40.0": + version: 5.40.0 + resolution: "@typescript-eslint/typescript-estree@npm:5.40.0" dependencies: - "@typescript-eslint/types": 5.39.0 - "@typescript-eslint/visitor-keys": 5.39.0 + "@typescript-eslint/types": 5.40.0 + "@typescript-eslint/visitor-keys": 5.40.0 debug: ^4.3.4 globby: ^11.1.0 is-glob: ^4.0.3 @@ -10639,23 +10639,24 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 509abd51213a4eb6dcb24dab9ce82a354603d3cb57bba6feac9ef35a6794b37fad69ae0228a2ad20c11c5a8a80a1fee6c82312660e30efaab611fc1ed31fde37 + checksum: a89d168729146ea5d07f451ad95368299744fbc6c2e640ad23a7b8a55ab8acc8fda0c70b5cce808fecd566e93dc7ed0c14c103cfc2a471171cde6f9f9b9a38b2 languageName: node linkType: hard -"@typescript-eslint/utils@npm:5.39.0": - version: 5.39.0 - resolution: "@typescript-eslint/utils@npm:5.39.0" +"@typescript-eslint/utils@npm:5.40.0": + version: 5.40.0 + resolution: "@typescript-eslint/utils@npm:5.40.0" dependencies: "@types/json-schema": ^7.0.9 - "@typescript-eslint/scope-manager": 5.39.0 - "@typescript-eslint/types": 5.39.0 - "@typescript-eslint/typescript-estree": 5.39.0 + "@typescript-eslint/scope-manager": 5.40.0 + "@typescript-eslint/types": 5.40.0 + "@typescript-eslint/typescript-estree": 5.40.0 eslint-scope: ^5.1.1 eslint-utils: ^3.0.0 + semver: ^7.3.7 peerDependencies: eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 - checksum: ce48141ccea29cb9720be99c1cc93f6d4264c6706a29b6c9a69a01c8b9a55408f6aa053aa66c87f45e1a016be298dc4b8972d0119ef36daf8f60a4695a54f453 + checksum: ff374e26b4404ee962e85464c21040f6ebb52b650daf15f901b0ed3d9581b1611bb54b327d341faee11f07611ba6285425190fe2ad45d2764e44cbaffb96ac42 languageName: node linkType: hard @@ -10669,13 +10670,13 @@ __metadata: languageName: node linkType: hard -"@typescript-eslint/visitor-keys@npm:5.39.0": - version: 5.39.0 - resolution: "@typescript-eslint/visitor-keys@npm:5.39.0" +"@typescript-eslint/visitor-keys@npm:5.40.0": + version: 5.40.0 + resolution: "@typescript-eslint/visitor-keys@npm:5.40.0" dependencies: - "@typescript-eslint/types": 5.39.0 + "@typescript-eslint/types": 5.40.0 eslint-visitor-keys: ^3.3.0 - checksum: 3d90aad33d5f90d961a6a1cf88c2964a789d896eecbe1593361ab7107eda05feeb7dba56d921ba4adf340e5aad8c176e0996b4f545e1d25ef0d9c32957722b3f + checksum: c973fc9429fe2aeb375821645d2bb5439f80ed2e77ff89def205aba272343ed3c7b18ee0a4e718f5e753f972d0718c6c8facb3b177fdfb5b5f3be3998f9299d4 languageName: node linkType: hard @@ -11196,9 +11197,9 @@ __metadata: linkType: hard "@xmldom/xmldom@npm:^0.8.0": - version: 0.8.2 - resolution: "@xmldom/xmldom@npm:0.8.2" - checksum: f5aa52e955661df93c88f906f57e88ea650c0c823913f0892d2c2d574c8ae49a83ec491e8d9951349b4ccee08ae2c7f4aa8eae163cf543625b466cf4b4cbd820 + version: 0.8.3 + resolution: "@xmldom/xmldom@npm:0.8.3" + checksum: 26980d70907fe478e67f5c9a9ef48bc6de13cf13e24fd42f0088eb1f8d09cbb4bfb867e35ab7fcdbe4332a72cbf96e732b230844f8155e3097fc18219d556da0 languageName: node linkType: hard @@ -15735,11 +15736,9 @@ __metadata: linkType: hard "convert-source-map@npm:^1.1.0, convert-source-map@npm:^1.4.0, convert-source-map@npm:^1.5.0, convert-source-map@npm:^1.5.1, convert-source-map@npm:^1.6.0, convert-source-map@npm:^1.7.0": - version: 1.8.0 - resolution: "convert-source-map@npm:1.8.0" - dependencies: - safe-buffer: ~5.1.1 - checksum: da4649990b633c070c0dab1680b89a67b9315dd2b1168d143536f667214c97e4eb4a49e5b7ff912f0196fe303e31fc16a529457436d25b2b5a89613eaf4f27fa + version: 1.9.0 + resolution: "convert-source-map@npm:1.9.0" + checksum: 281da55454bf8126cbc6625385928c43479f2060984180c42f3a86c8b8c12720a24eac260624a7d1e090004028d2dee78602330578ceec1a08e27cb8bb0a8a5b languageName: node linkType: hard @@ -19186,8 +19185,8 @@ __metadata: linkType: hard "eslint-plugin-react@npm:^7.19.0, eslint-plugin-react@npm:^7.22.0, eslint-plugin-react@npm:^7.27.0": - version: 7.31.9 - resolution: "eslint-plugin-react@npm:7.31.9" + version: 7.31.10 + resolution: "eslint-plugin-react@npm:7.31.10" dependencies: array-includes: ^3.1.5 array.prototype.flatmap: ^1.3.0 @@ -19205,7 +19204,7 @@ __metadata: string.prototype.matchall: ^4.0.7 peerDependencies: eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 - checksum: 40a4224467441aca3fda2cbd3d0f47250f314e944a575ad006e2f976f927096ad00367cfd54d1449019f863cbaeb78b5a4986e46002bde6af1ad2ed5b844b33f + checksum: 0a3ed9547e337f7eac4364f45229a8094ea4ac5073f1c4b8662f84c75284703bfebdf5dfe2cb55bcaeedec43f0445ed76ca650388f642d5ad1c9fe530bf3f159 languageName: node linkType: hard @@ -27445,11 +27444,11 @@ __metadata: linkType: hard "lit-html@npm:^2.2.0, lit-html@npm:^2.3.0": - version: 2.3.1 - resolution: "lit-html@npm:2.3.1" + version: 2.4.0 + resolution: "lit-html@npm:2.4.0" dependencies: "@types/trusted-types": ^2.0.2 - checksum: 6f758828c8199923529d76c5af4a6d45b558bb25e317026fb243a18bc68205576c4ed94afda154cb556950b81909027229c2d4bf421bc97552587f584bbcb13a + checksum: ef7293f41ff6cbfed4e477a75720d866abe7cd88073bd6f623f5a58f42883475ff3c423bbd6bf6ead044c8ab71ef04606abfca2d4e0ffc885d8560bbab89ec68 languageName: node linkType: hard @@ -29690,9 +29689,9 @@ __metadata: linkType: hard "minimist@npm:^1.1.0, minimist@npm:^1.1.1, minimist@npm:^1.1.3, minimist@npm:^1.2.0, minimist@npm:^1.2.3, minimist@npm:^1.2.5, minimist@npm:^1.2.6": - version: 1.2.6 - resolution: "minimist@npm:1.2.6" - checksum: d0b566204044481c4401abbd24cc75814e753b37268e7fe7ccc78612bf3e37bf1e45a6c43fb0b119445ea1c413c000bde013f320b7211974f2f49bcbec1d0dbf + version: 1.2.7 + resolution: "minimist@npm:1.2.7" + checksum: 8808da67ca50ee19ab2d69051d77ee78572e67297fd8a1635ecc757a15106ccdfb5b8c4d11d84750120142f1684e5329a141295728c755e5d149eedd73cc6572 languageName: node linkType: hard @@ -30159,11 +30158,11 @@ __metadata: linkType: hard "nan@npm:^2.12.1, nan@npm:^2.14.0": - version: 2.16.0 - resolution: "nan@npm:2.16.0" + version: 2.17.0 + resolution: "nan@npm:2.17.0" dependencies: node-gyp: latest - checksum: 95204e4ed2970c0411735d866b0a71f30625e9ce598d2f7c2dfc2145dcd4e8e48dda26fda2587657f91e96973044353d300a9a6d259079b342fa4b30548aa8fa + checksum: 4a231a62dba025f4c4fa814c1e6ffeb450c5cd0852b780f19fe4ea22b86ba0f1f394406dfd628c67fb7f0987e982fa230da1fbd3632258f927b8defd7046c1ad languageName: node linkType: hard @@ -30587,8 +30586,8 @@ __metadata: linkType: hard "node-gyp@npm:latest": - version: 9.2.0 - resolution: "node-gyp@npm:9.2.0" + version: 9.3.0 + resolution: "node-gyp@npm:9.3.0" dependencies: env-paths: ^2.2.0 glob: ^7.1.4 @@ -30602,7 +30601,7 @@ __metadata: which: ^2.0.2 bin: node-gyp: bin/node-gyp.js - checksum: 281dc8cbb7d4ecdc179b903c1b25fe4d1d5b70984744564a13892a93f24323f29aa38649a3ac569614ecf55c2f0804dff489347564f2945be29f7ddd4bb85a9c + checksum: 3b326bc3accca849c62503820c13d9362d142dbe4189a5a3a2f2b6de4e872303f2d6cc2dd59e044bf4ca967bfd3eeb3d0c5d8d3b77e28e4e4f8d909697ff5a7e languageName: node linkType: hard @@ -38456,9 +38455,9 @@ __metadata: linkType: hard "svelte@npm:^3.0.0, svelte@npm:^3.31.2, svelte@npm:^3.48.0": - version: 3.50.1 - resolution: "svelte@npm:3.50.1" - checksum: 16d5c5b6aaf36f520f7ba77aa02361a8e7cd3ec79bedca8320dbf92a6701df56d7793a924a04a3d24820b66139e5a98330121ebce86109f0579946c0d9fe7b9a + version: 3.51.0 + resolution: "svelte@npm:3.51.0" + checksum: 303b14941e684f7cbc82593d7cdc0f988c6909166cfa600d7a2b57e94c49412f4629d17ce91fd6a33edabae81379517cc357d713562c8b68a19c690df0bb8a0c languageName: node linkType: hard @@ -40957,8 +40956,8 @@ __metadata: linkType: hard "vite@npm:^3.1.0, vite@npm:^3.1.3": - version: 3.1.6 - resolution: "vite@npm:3.1.6" + version: 3.1.7 + resolution: "vite@npm:3.1.7" dependencies: esbuild: ^0.15.9 fsevents: ~2.3.2 @@ -40984,7 +40983,7 @@ __metadata: optional: true bin: vite: bin/vite.js - checksum: 9e572716fda647a9dd8ec6618b51d9bae20453fa7cb136bf6db7d41c1879ae7234a5cf14404b05ccac8a84291cfe412743a4b0d6c3dd68281ac1e32682d582d2 + checksum: c2156ade7e4aa1ec17fe9df1011ea6a45dad39a3ee159ecde4036f3ea643bb5226fd5d227213acfe63c7dd1ebcbae119bccf295934559a09ffcf380a537ae140 languageName: node linkType: hard From 830ffca3500407308deab384c2a02e87988e0df6 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 11 Oct 2022 10:17:44 +0200 Subject: [PATCH 08/10] cleanup --- code/addons/docs/docs/docspage.md | 3 --- code/addons/storyshots/storyshots-puppeteer/README.md | 3 --- code/examples/README.md | 3 --- code/examples/standalone-preview/package.json | 1 - 4 files changed, 10 deletions(-) diff --git a/code/addons/docs/docs/docspage.md b/code/addons/docs/docs/docspage.md index 4df75e06904f..e59c6144a612 100644 --- a/code/addons/docs/docs/docspage.md +++ b/code/addons/docs/docs/docspage.md @@ -147,9 +147,6 @@ export default { You can interleave your own components to customize the auto-generated contents of the page, or pass in different options to the blocks to customize their appearance. -TODO: the link below will break -For more info see the examples in [official-storybook](https://github.com/storybookjs/storybook/blob/next/code/examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js). - ## Story file names Unless you use a custom webpack configuration, all of your story files should have the suffix `*.stories.@(j|t)sx?`, e.g. `"Badge.stories.js"`, `"Badge.stories.tsx"`, etc. diff --git a/code/addons/storyshots/storyshots-puppeteer/README.md b/code/addons/storyshots/storyshots-puppeteer/README.md index 162133a1b751..2175c1d436d4 100644 --- a/code/addons/storyshots/storyshots-puppeteer/README.md +++ b/code/addons/storyshots/storyshots-puppeteer/README.md @@ -200,9 +200,6 @@ Those can be customized with `setupTimeout` and `testTimeout` parameters. You may want to use another Jest project to run your Puppeteer storyshots as they require more resources: Chrome and Storybook built/served. -TODO: the link below will break -You can find a working example of this in the [official-storybook](https://github.com/storybookjs/storybook/tree/main/examples/official-storybook) example. - ### Integrate Puppeteer storyshots with [Create React App](https://github.com/facebookincubator/create-react-app) You have two options here, you can either: diff --git a/code/examples/README.md b/code/examples/README.md index 4e5919f59178..08d771ce3db0 100644 --- a/code/examples/README.md +++ b/code/examples/README.md @@ -4,8 +4,6 @@ Live examples of these: ### Next release -TODO: official storybook is removed, what should happen to this file? -- [React Official](https://next--storybookjs.netlify.com/official-storybook/) - [Vue](https://next--storybookjs.netlify.com/vue-kitchen-sink/) - [Angular](https://next--storybookjs.netlify.com/angular-cli/) - [HTML](https://next--storybookjs.netlify.com/html-kitchen-sink/) @@ -15,7 +13,6 @@ TODO: official storybook is removed, what should happen to this file? ### Current release -- [React Official](https://storybookjs.netlify.com/official-storybook/) - [Vue](https://storybookjs.netlify.com/vue-kitchen-sink/) - [Angular](https://storybookjs.netlify.com/angular-cli/) - [HTML](https://storybookjs.netlify.com/html-kitchen-sink/) diff --git a/code/examples/standalone-preview/package.json b/code/examples/standalone-preview/package.json index e007578d2dbd..c343bf4b3a36 100644 --- a/code/examples/standalone-preview/package.json +++ b/code/examples/standalone-preview/package.json @@ -3,7 +3,6 @@ "version": "7.0.0-alpha.35", "private": true, "scripts": { - "TODO": "the official-storybook is removed, can this example be removed?", "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true storybook dev -p 9011 -c ../official-storybook --no-manager-cache --preview-url=http://localhost:1337/external-iframe.html", "storybook-preview": "cross-env PREVIEW_URL=external-iframe.html parcel ./storybook.html --port 1337" }, From f98993446b67cb28003f451ca6eb84b5e608610e Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 11 Oct 2022 13:27:32 +0200 Subject: [PATCH 09/10] fix snapshots --- .../transforms/__tests__/csf-2-to-3.test.ts | 1 - .../10017-ts-union/docgen.snapshot | 2 - .../docgen.snapshot | 5 +-- .../8140-js-prop-types-oneof/docgen.snapshot | 5 --- .../8428-js-static-prop-types/docgen.snapshot | 8 +--- .../9023-js-hoc/docgen.snapshot | 9 +--- .../9399-js-proptypes-shape/docgen.snapshot | 3 +- .../9465-ts-type-props/docgen.snapshot | 2 - .../9493-ts-display-name/docgen.snapshot | 1 - .../docgen.snapshot | 1 - .../9575-ts-camel-case/docgen.snapshot | 2 - .../9586-js-react-memo/docgen.snapshot | 2 - .../9591-ts-import-types/docgen.snapshot | 2 - .../9626-js-default-values/docgen.snapshot | 3 +- .../docgen.snapshot | 4 -- .../9721-ts-deprecated-jsdoc/docgen.snapshot | 2 - .../9764-ts-extend-props/docgen.snapshot | 2 - .../9827-ts-default-values/docgen.snapshot | 2 - .../9832-ts-enum-export/docgen.snapshot | 2 - .../9922-ts-component-props/docgen.snapshot | 3 -- .../docgen-components/jsdoc/docgen.snapshot | 44 ------------------- .../ts-jsdoc/docgen.snapshot | 2 - .../ts-types/docgen.snapshot | 8 ---- 23 files changed, 9 insertions(+), 106 deletions(-) diff --git a/code/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts b/code/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts index 1d174e2e1304..277ca3d9ac6e 100644 --- a/code/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts +++ b/code/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts @@ -72,7 +72,6 @@ describe('csf-2-to-3', () => { render: (args) => , }; export const B = (args) => ; - const C = (args) => ; `); }); diff --git a/code/renderers/react/template/stories/docgen-components/10017-ts-union/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/10017-ts-union/docgen.snapshot index e702b18e4220..abb048595153 100644 --- a/code/renderers/react/template/stories/docgen-components/10017-ts-union/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/10017-ts-union/docgen.snapshot @@ -2,7 +2,6 @@ exports[`react component properties 10017-ts-union 1`] = ` "import React from 'react'; - const Avatar = ({ icon }) => { @@ -10,7 +9,6 @@ const Avatar = ({ className: \\"hello\\" }, \\"Hello Component \\", icon); }; - export const component = Avatar; Avatar.__docgenInfo = { \\"description\\": \\"\\", diff --git a/code/renderers/react/template/stories/docgen-components/10278-ts-multiple-components/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/10278-ts-multiple-components/docgen.snapshot index 3947ed35573d..e254ef1f2ad2 100644 --- a/code/renderers/react/template/stories/docgen-components/10278-ts-multiple-components/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/10278-ts-multiple-components/docgen.snapshot @@ -3,22 +3,19 @@ exports[`react component properties 10278-ts-multiple-components 1`] = ` "/* eslint-disable react/destructuring-assignment */ import React from 'react'; - /** * A component */ const A = props => { return /*#__PURE__*/React.createElement(React.Fragment, null, \\"Hi \\", props.aProperty); }; + /** * B component */ - - const B = props => { return /*#__PURE__*/React.createElement(React.Fragment, null, \\"Hi \\", props.bProperty); }; - A.__docgenInfo = { \\"description\\": \\"A component\\", \\"methods\\": [], diff --git a/code/renderers/react/template/stories/docgen-components/8140-js-prop-types-oneof/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/8140-js-prop-types-oneof/docgen.snapshot index 2b214f33aad2..cef5dd1255bc 100644 --- a/code/renderers/react/template/stories/docgen-components/8140-js-prop-types-oneof/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/8140-js-prop-types-oneof/docgen.snapshot @@ -2,13 +2,10 @@ exports[`react component properties 8140-js-prop-types-oneof 1`] = ` "/* eslint-disable react/require-default-props */ - /* eslint-disable react/no-unused-prop-types */ import React from 'react'; import PropTypes from 'prop-types'; - const Alert = props => /*#__PURE__*/React.createElement(React.Fragment, null, JSON.stringify(props)); - Alert.defaultProps = { mode: 'static', type: 'warning' @@ -17,12 +14,10 @@ Alert.propTypes = { mode: PropTypes.oneOf(['static', 'timed']), type: PropTypes.oneOf(['success', 'warning', 'error', 'primary']), message: PropTypes.string.isRequired, - /** * No background or border if static alert */ blank: PropTypes.bool, - /** * Allows icon override, accepts material icon name */ diff --git a/code/renderers/react/template/stories/docgen-components/8428-js-static-prop-types/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/8428-js-static-prop-types/docgen.snapshot index 67ca04a2157f..7c10a7346578 100644 --- a/code/renderers/react/template/stories/docgen-components/8428-js-static-prop-types/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/8428-js-static-prop-types/docgen.snapshot @@ -2,27 +2,23 @@ exports[`react component properties 8428-js-static-prop-types 1`] = ` "function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } - /* eslint-disable react/no-unused-prop-types */ - /* eslint-disable react/require-default-props */ import React from 'react'; -import PropTypes from 'prop-types'; // eslint-disable-next-line react/prefer-stateless-function +import PropTypes from 'prop-types'; +// eslint-disable-next-line react/prefer-stateless-function export default class Test extends React.Component { render() { return /*#__PURE__*/React.createElement(\\"div\\", null, \\"test\\"); } - } - _defineProperty(Test, \\"propTypes\\", { /** * Please work... */ test: PropTypes.string }); - export const component = Test; Test.__docgenInfo = { \\"description\\": \\"\\", diff --git a/code/renderers/react/template/stories/docgen-components/9023-js-hoc/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/9023-js-hoc/docgen.snapshot index a0d6b8d941a8..b525ea49f5e1 100644 --- a/code/renderers/react/template/stories/docgen-components/9023-js-hoc/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/9023-js-hoc/docgen.snapshot @@ -2,24 +2,19 @@ exports[`react component properties 9023-js-hoc 1`] = ` "/* eslint-disable react/require-default-props */ - /* eslint-disable react/forbid-prop-types */ - /* eslint-disable react/no-unused-prop-types */ - /* eslint-disable react/prefer-stateless-function */ import React from 'react'; -import PropTypes from 'prop-types'; // deepscan-disable-next-line +import PropTypes from 'prop-types'; +// deepscan-disable-next-line const withStyles = themeFn => Comp => Comp; - class Alert extends React.Component { render() { return /*#__PURE__*/React.createElement(React.Fragment, null, \\"Alert\\"); } - } - Alert.propTypes = { variant: PropTypes.string, dismissible: PropTypes.bool, diff --git a/code/renderers/react/template/stories/docgen-components/9399-js-proptypes-shape/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/9399-js-proptypes-shape/docgen.snapshot index 396775caa8ae..4858e5cb980e 100644 --- a/code/renderers/react/template/stories/docgen-components/9399-js-proptypes-shape/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/9399-js-proptypes-shape/docgen.snapshot @@ -5,8 +5,9 @@ exports[`react component properties 9399-js-proptypes-shape 1`] = ` import PropTypes from 'prop-types'; export const Credits = ({ areas -}) => /*#__PURE__*/React.createElement(React.Fragment, null, JSON.stringify(areas)); // https://github.com/storybookjs/storybook/issues/9399 +}) => /*#__PURE__*/React.createElement(React.Fragment, null, JSON.stringify(areas)); +// https://github.com/storybookjs/storybook/issues/9399 Credits.propTypes = { areas: PropTypes.arrayOf(PropTypes.shape({ position: PropTypes.string.isRequired, diff --git a/code/renderers/react/template/stories/docgen-components/9465-ts-type-props/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/9465-ts-type-props/docgen.snapshot index eed6ac7c10e2..bf337a2c9d41 100644 --- a/code/renderers/react/template/stories/docgen-components/9465-ts-type-props/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/9465-ts-type-props/docgen.snapshot @@ -2,7 +2,6 @@ exports[`react component properties 9465-ts-type-props 1`] = ` "import React from 'react'; - const Component = ({ disabled = false, children @@ -12,7 +11,6 @@ const Component = ({ React.createElement(\\"button\\", { disabled: disabled }, children); - export const component = Component; Component.__docgenInfo = { \\"description\\": \\"\\", diff --git a/code/renderers/react/template/stories/docgen-components/9493-ts-display-name/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/9493-ts-display-name/docgen.snapshot index 2803e7ec6689..6f1f52928c5a 100644 --- a/code/renderers/react/template/stories/docgen-components/9493-ts-display-name/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/9493-ts-display-name/docgen.snapshot @@ -2,7 +2,6 @@ exports[`react component properties 9493-ts-display-name 1`] = ` "import React from 'react'; - /** * This message should show up in the Docs panel if everything works fine. */ diff --git a/code/renderers/react/template/stories/docgen-components/9556-ts-react-default-exports/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/9556-ts-react-default-exports/docgen.snapshot index f859bb234989..e2793c8f420c 100644 --- a/code/renderers/react/template/stories/docgen-components/9556-ts-react-default-exports/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/9556-ts-react-default-exports/docgen.snapshot @@ -2,7 +2,6 @@ exports[`react component properties 9556-ts-react-default-exports 1`] = ` "function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } - /* eslint-disable react/button-has-type */ import React from 'react'; export const Button = ({ diff --git a/code/renderers/react/template/stories/docgen-components/9575-ts-camel-case/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/9575-ts-camel-case/docgen.snapshot index 488595ad2c91..db00f870fb31 100644 --- a/code/renderers/react/template/stories/docgen-components/9575-ts-camel-case/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/9575-ts-camel-case/docgen.snapshot @@ -3,13 +3,11 @@ exports[`react component properties 9575-ts-camel-case 1`] = ` "import PropTypes from 'prop-types'; import React from 'react'; - const iconButton = function IconButton(props) { return /*#__PURE__*/React.createElement(\\"div\\", { className: \\"icon-button\\" }, \\"icon-button\\"); }; - iconButton.propTypes = { // deepscan-disable-next-line color: PropTypes.string diff --git a/code/renderers/react/template/stories/docgen-components/9586-js-react-memo/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/9586-js-react-memo/docgen.snapshot index 9de1e177c96e..9734536f441f 100644 --- a/code/renderers/react/template/stories/docgen-components/9586-js-react-memo/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/9586-js-react-memo/docgen.snapshot @@ -3,7 +3,6 @@ exports[`react component properties 9586-js-react-memo 1`] = ` "import React from 'react'; import PropTypes from 'prop-types'; - function Button({ label, onClick @@ -13,7 +12,6 @@ function Button({ onClick: onClick }, label); } - Button.propTypes = { label: PropTypes.string.isRequired, onClick: PropTypes.func.isRequired diff --git a/code/renderers/react/template/stories/docgen-components/9591-ts-import-types/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/9591-ts-import-types/docgen.snapshot index a059bf1880b0..1925d38416de 100644 --- a/code/renderers/react/template/stories/docgen-components/9591-ts-import-types/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/9591-ts-import-types/docgen.snapshot @@ -2,9 +2,7 @@ exports[`react component properties 9591-ts-import-types 1`] = ` "import React from 'react'; - const Other = props => /*#__PURE__*/React.createElement(\\"span\\", props, \\"Other\\"); - export const component = Other; Other.__docgenInfo = { \\"description\\": \\"\\", diff --git a/code/renderers/react/template/stories/docgen-components/9626-js-default-values/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/9626-js-default-values/docgen.snapshot index 7b5b63c1440b..f65a30efed05 100644 --- a/code/renderers/react/template/stories/docgen-components/9626-js-default-values/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/9626-js-default-values/docgen.snapshot @@ -1,8 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`react component properties 9626-js-default-values 1`] = ` -"import React from 'react'; // eslint-disable-next-line react/prop-types +"import React from 'react'; +// eslint-disable-next-line react/prop-types export const Tag = ({ title = 'Beta' }) => /*#__PURE__*/React.createElement(\\"div\\", null, title); diff --git a/code/renderers/react/template/stories/docgen-components/9668-js-proptypes-no-jsdoc/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/9668-js-proptypes-no-jsdoc/docgen.snapshot index 83df2b79e995..51169517036b 100644 --- a/code/renderers/react/template/stories/docgen-components/9668-js-proptypes-no-jsdoc/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/9668-js-proptypes-no-jsdoc/docgen.snapshot @@ -2,15 +2,11 @@ exports[`react component properties 9668-js-proptypes-no-jsdoc 1`] = ` "/* eslint-disable react/forbid-prop-types */ - /* eslint-disable react/require-default-props */ - /* eslint-disable react/no-unused-prop-types */ import React from 'react'; import PropTypes from 'prop-types'; - const CCTable = props => /*#__PURE__*/React.createElement(React.Fragment, null, JSON.stringify(props)); - CCTable.propTypes = { heads: PropTypes.array.isRequired, onAddClick: PropTypes.func diff --git a/code/renderers/react/template/stories/docgen-components/9721-ts-deprecated-jsdoc/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/9721-ts-deprecated-jsdoc/docgen.snapshot index 69821e3c56b5..e7a005ad2511 100644 --- a/code/renderers/react/template/stories/docgen-components/9721-ts-deprecated-jsdoc/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/9721-ts-deprecated-jsdoc/docgen.snapshot @@ -2,9 +2,7 @@ exports[`react component properties 9721-ts-deprecated-jsdoc 1`] = ` "import React from 'react'; - const Foo = props => /*#__PURE__*/React.createElement(React.Fragment, null, JSON.stringify(props)); - export const component = Foo; Foo.__docgenInfo = { \\"description\\": \\"\\", diff --git a/code/renderers/react/template/stories/docgen-components/9764-ts-extend-props/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/9764-ts-extend-props/docgen.snapshot index af6e21ceac74..05cc2310ff40 100644 --- a/code/renderers/react/template/stories/docgen-components/9764-ts-extend-props/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/9764-ts-extend-props/docgen.snapshot @@ -2,9 +2,7 @@ exports[`react component properties 9764-ts-extend-props 1`] = ` "import React from 'react'; - const Radio = props => /*#__PURE__*/React.createElement(React.Fragment, null, JSON.stringify(props)); - export const component = Radio; Radio.__docgenInfo = { \\"description\\": \\"\\", diff --git a/code/renderers/react/template/stories/docgen-components/9827-ts-default-values/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/9827-ts-default-values/docgen.snapshot index e029b62e2a13..b6cd0e2e6929 100644 --- a/code/renderers/react/template/stories/docgen-components/9827-ts-default-values/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/9827-ts-default-values/docgen.snapshot @@ -2,7 +2,6 @@ exports[`react component properties 9827-ts-default-values 1`] = ` "import React from 'react'; - const Hello = ({ title }) => { @@ -10,7 +9,6 @@ const Hello = ({ className: \\"hello\\" }, \\"Hello Component \\", title); }; - Hello.defaultProps = { title: 'this is the default :)' }; diff --git a/code/renderers/react/template/stories/docgen-components/9832-ts-enum-export/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/9832-ts-enum-export/docgen.snapshot index 2af0f01d2944..e6eab8d40d58 100644 --- a/code/renderers/react/template/stories/docgen-components/9832-ts-enum-export/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/9832-ts-enum-export/docgen.snapshot @@ -3,12 +3,10 @@ exports[`react component properties 9832-ts-enum-export 1`] = ` "import React from 'react'; export let EnumWithExtraProps; - (function (EnumWithExtraProps) { EnumWithExtraProps[\\"key1\\"] = \\"key1\\"; EnumWithExtraProps[\\"key2\\"] = \\"key2\\"; })(EnumWithExtraProps || (EnumWithExtraProps = {})); - export const component = () => /*#__PURE__*/React.createElement(\\"div\\", null, \\"hello\\"); component.__docgenInfo = { \\"description\\": \\"\\", diff --git a/code/renderers/react/template/stories/docgen-components/9922-ts-component-props/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/9922-ts-component-props/docgen.snapshot index 82936b526eef..21af06c3d5b3 100644 --- a/code/renderers/react/template/stories/docgen-components/9922-ts-component-props/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/9922-ts-component-props/docgen.snapshot @@ -2,7 +2,6 @@ exports[`react component properties 9922-ts-component-props 1`] = ` "import React from 'react'; - const Button = ({ children, onClick @@ -10,7 +9,6 @@ const Button = ({ onClick: onClick, type: \\"button\\" }, children); - const WrappedButton = ({ spacing, ...buttonProps @@ -19,7 +17,6 @@ const WrappedButton = ({ padding: spacing } }, /*#__PURE__*/React.createElement(Button, buttonProps)); - export const component = WrappedButton; WrappedButton.__docgenInfo = { \\"description\\": \\"\\", diff --git a/code/renderers/react/template/stories/docgen-components/jsdoc/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/jsdoc/docgen.snapshot index 3a998ec095ed..8eda1b6eaeda 100644 --- a/code/renderers/react/template/stories/docgen-components/jsdoc/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/jsdoc/docgen.snapshot @@ -4,115 +4,95 @@ exports[`react component properties jsdoc 1`] = ` "/* eslint-disable react/require-default-props, react/no-unused-prop-types */ import React from 'react'; import PropTypes from 'prop-types'; - const JsDocProps = () => /*#__PURE__*/React.createElement(\\"div\\", null, \\"JSDoc with PropTypes!\\"); - JsDocProps.propTypes = { /** * should not be visible since it's ignored. * @ignore */ case0: PropTypes.string, - /** * simple description. */ case1: PropTypes.string, - /** * multi * lines * description */ case2: PropTypes.string, - /** * *description* **with** \`formatting\` */ case3: PropTypes.string, - /** * simple description and dummy JSDoc tag. * @param event */ case4: PropTypes.string, - /** * @param event */ case5: PropTypes.string, - /** * simple description with a @. */ case6: PropTypes.string, case7: PropTypes.func, - /** * func with a simple description. */ case8: PropTypes.func, - /** * @param event */ case9: PropTypes.func, - /** * param with name * @param event */ case10: PropTypes.func, - /** * param with name & type * @param {SyntheticEvent} event */ case11: PropTypes.func, - /** * param with name, type & description * @param {SyntheticEvent} event - React's original event */ case12: PropTypes.func, - /** * param with type * @param {SyntheticEvent} */ case13: PropTypes.func, - /** * param with type & description * @param {SyntheticEvent} - React's original event */ case14: PropTypes.func, - /** * param with name & description * @param event - React's original event */ case15: PropTypes.func, - /** * autofix event- * @param event- React's original event */ case16: PropTypes.func, - /** * autofix event. * @param event. * @returns {string} */ case17: PropTypes.func, - /** * with an empty param. * @param */ case18: PropTypes.func, - /** * with multiple empty params. * @param @@ -120,19 +100,16 @@ JsDocProps.propTypes = { * @param */ case19: PropTypes.func, - /** * with arg alias. * @arg event */ case20: PropTypes.func, - /** * with argument alias. * @argument event */ case21: PropTypes.func, - /** * with multiple params. * @param {SyntheticEvent} event @@ -140,32 +117,27 @@ JsDocProps.propTypes = { * @param {number} numberValue */ case22: PropTypes.func, - /** * with an empty returns * @returns */ case23: PropTypes.func, - /** * with a returns with a type * @returns {SyntheticEvent} */ case24: PropTypes.func, - /** * with a returns with a type & description * @returns {SyntheticEvent} - React's original event */ case25: PropTypes.func, - /** * single param and a returns * @param {string} stringValue * @returns {SyntheticEvent} - React's original event */ case26: PropTypes.func, - /** * multiple params and a returns * @param {string} stringValue @@ -173,14 +145,12 @@ JsDocProps.propTypes = { * @returns {SyntheticEvent} - React's original event */ case27: PropTypes.func, - /** * multiple returns * @returns {SyntheticEvent} - React's original event * @returns {string} - Second returns */ case28: PropTypes.func, - /** * param with unsupported JSDoc tags * @param {SyntheticEvent} event - React's original event @@ -188,85 +158,71 @@ JsDocProps.propTypes = { * @version 2 */ case29: PropTypes.func, - /** * param record type * @param {{a: number, b: string}} myType */ case30: PropTypes.func, - /** * param array type * @param {string[]} myType */ case31: PropTypes.func, - /** * param union type * @param {(number|boolean)} myType */ case32: PropTypes.func, - /** * param any type * @param {*} myType */ case33: PropTypes.func, - /** * param repeatable type * @param {...number} myType */ case34: PropTypes.func, - /** * optional param * @param {number} [myType] */ case35: PropTypes.func, - /** * optional param * @param {number} [myType] */ case36: PropTypes.func, - /** * dot in param name * @param {number} my.type */ case37: PropTypes.func, - /** * returns record type * @returns {{a: number, b: string}} */ case38: PropTypes.func, - /** * returns array type * @returns {string[]} */ case39: PropTypes.func, - /** * returns union type * @returns {(number|boolean)} */ case40: PropTypes.func, - /** * returns any type * @returns {*} */ case41: PropTypes.func, - /** * returns primitive * @returns {string} */ case42: PropTypes.func, - /** * returns void * @returns {void} diff --git a/code/renderers/react/template/stories/docgen-components/ts-jsdoc/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/ts-jsdoc/docgen.snapshot index c1d7f8a0bfaa..63457d8ac4c8 100644 --- a/code/renderers/react/template/stories/docgen-components/ts-jsdoc/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/ts-jsdoc/docgen.snapshot @@ -2,7 +2,6 @@ exports[`react component properties ts-jsdoc 1`] = ` "import React from 'react'; - /** * Button functional component (React.FC) */ @@ -13,7 +12,6 @@ const TypeScriptProps = ({ type: \\"button\\", onClick: case1 }, \\"JSDoc with TypeScript! \\", case2); - export const component = TypeScriptProps; TypeScriptProps.__docgenInfo = { \\"description\\": \\"Button functional component (React.FC)\\", diff --git a/code/renderers/react/template/stories/docgen-components/ts-types/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/ts-types/docgen.snapshot index f97ba72dc1e9..8bdd34cdee74 100644 --- a/code/renderers/react/template/stories/docgen-components/ts-types/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/ts-types/docgen.snapshot @@ -2,35 +2,27 @@ exports[`react component properties ts-types 1`] = ` "import React from 'react'; - function concat(a, b) { return a + b; } - var DefaultEnum; - (function (DefaultEnum) { DefaultEnum[DefaultEnum[\\"TopLeft\\"] = 0] = \\"TopLeft\\"; DefaultEnum[DefaultEnum[\\"TopRight\\"] = 1] = \\"TopRight\\"; DefaultEnum[DefaultEnum[\\"TopCenter\\"] = 2] = \\"TopCenter\\"; })(DefaultEnum || (DefaultEnum = {})); - var NumericEnum; - (function (NumericEnum) { NumericEnum[NumericEnum[\\"TopLeft\\"] = 0] = \\"TopLeft\\"; NumericEnum[NumericEnum[\\"TopRight\\"] = 1] = \\"TopRight\\"; NumericEnum[NumericEnum[\\"TopCenter\\"] = 2] = \\"TopCenter\\"; })(NumericEnum || (NumericEnum = {})); - var StringEnum; - (function (StringEnum) { StringEnum[\\"TopLeft\\"] = \\"top-left\\"; StringEnum[\\"TopRight\\"] = \\"top-right\\"; StringEnum[\\"TopCenter\\"] = \\"top-center\\"; })(StringEnum || (StringEnum = {})); - export const TypeScriptProps = () => /*#__PURE__*/React.createElement(\\"div\\", null, \\"TypeScript!\\"); TypeScriptProps.defaultProps = { any: 'Any value', From d8196683420f8a6ac6049fc16b87cdf765878ee1 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Tue, 11 Oct 2022 15:05:32 +0200 Subject: [PATCH 10/10] ignore a11y warnings from Svelte in svelte-kitchen-sink --- .../svelte-kitchen-sink/src/components/Button.svelte | 2 +- .../svelte-kitchen-sink/src/components/Context.svelte | 3 ++- .../svelte-kitchen-sink/src/components/Counter.svelte | 2 ++ .../src/stories/views/ActionLinkView.svelte | 1 + .../src/stories/views/ArgsTableView.svelte | 5 ++++- 5 files changed, 10 insertions(+), 3 deletions(-) diff --git a/code/examples/svelte-kitchen-sink/src/components/Button.svelte b/code/examples/svelte-kitchen-sink/src/components/Button.svelte index c444ce741385..37b084117fb2 100644 --- a/code/examples/svelte-kitchen-sink/src/components/Button.svelte +++ b/code/examples/svelte-kitchen-sink/src/components/Button.svelte @@ -35,7 +35,7 @@ } -
diff --git a/code/examples/svelte-kitchen-sink/src/components/Counter.svelte b/code/examples/svelte-kitchen-sink/src/components/Counter.svelte index 62e8bef5f3d0..a4a8f89c31e2 100644 --- a/code/examples/svelte-kitchen-sink/src/components/Counter.svelte +++ b/code/examples/svelte-kitchen-sink/src/components/Counter.svelte @@ -13,6 +13,8 @@

Svelte - Counter

You clicked {count} times

+ +
diff --git a/code/examples/svelte-kitchen-sink/src/stories/views/ActionLinkView.svelte b/code/examples/svelte-kitchen-sink/src/stories/views/ActionLinkView.svelte index 2d780e88e990..84752d893d56 100644 --- a/code/examples/svelte-kitchen-sink/src/stories/views/ActionLinkView.svelte +++ b/code/examples/svelte-kitchen-sink/src/stories/views/ActionLinkView.svelte @@ -10,6 +10,7 @@

Link Action

+ diff --git a/code/examples/svelte-kitchen-sink/src/stories/views/ArgsTableView.svelte b/code/examples/svelte-kitchen-sink/src/stories/views/ArgsTableView.svelte index c81fb0578f9f..2739ab2f0a86 100644 --- a/code/examples/svelte-kitchen-sink/src/stories/views/ArgsTableView.svelte +++ b/code/examples/svelte-kitchen-sink/src/stories/views/ArgsTableView.svelte @@ -51,17 +51,20 @@ + 
{JSON.stringify(preview, null, '  ')}
+
+
/** Close description */ dispatch('close')}/> - \ No newline at end of file +