diff --git a/.circleci/config.yml b/.circleci/config.yml index 18ad245f250..aa88ad7d972 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -42,6 +42,19 @@ executors: environment: NODE_OPTIONS: --max_old_space_size=3076 resource_class: <> + sb_playwright: + parameters: + class: + description: The Resource class + type: enum + enum: ['small', 'medium', 'medium+', 'large', 'xlarge'] + default: 'medium' + working_directory: /tmp/storybook + docker: + - image: mcr.microsoft.com/playwright:v1.25.1-focal + environment: + NODE_OPTIONS: --max_old_space_size=3076 + resource_class: <> orbs: git-shallow-clone: guitarrapc/git-shallow-clone@2.0.3 @@ -257,7 +270,7 @@ jobs: # executor: # class: large # name: sb_cypress_8_node_14 - # parallelism: 2 + # parallelism: 8 # steps: # - git-shallow-clone/checkout_advanced: # clone_options: '--depth 1 --verbose' @@ -276,19 +289,14 @@ jobs: # no_output_timeout: 5m cra-bench: executor: - class: medium - name: sb_cypress_8_node_14 + class: medium+ + name: sb_playwright working_directory: /tmp/storybook steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' - attach_workspace: at: . - - run: - name: install playright - command: | - cd code - npx playwright install - run: name: Running local registry command: | @@ -309,7 +317,14 @@ jobs: name: Run @storybook/bench on repro command: | cd ./cra-bench - npx @storybook/bench@1.0.0--canary.11.52d1ee7.1 'echo noop' --label cra + npx -p @storybook/bench@1.0.0--canary.12.7cccdee.0 sb-bench 'echo noop' --label cra + - run: + name: prep artifacts + when: always + command: tar cvzf /tmp/sb-bench.tar.gz ./cra-bench + - store_artifacts: + path: /tmp/sb-bench.tar.gz + destination: sb-bench.tar.gz e2e-tests-pnp: executor: class: medium @@ -462,7 +477,7 @@ jobs: executor: class: medium+ name: sb_node_14_browsers - parallelism: 2 + parallelism: 7 steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' @@ -482,7 +497,7 @@ jobs: executor: class: medium+ name: sb_node_14_browsers - parallelism: 2 + parallelism: 7 steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' @@ -498,7 +513,7 @@ jobs: executor: class: medium+ name: sb_node_14_browsers - parallelism: 2 + parallelism: 7 steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' @@ -518,7 +533,7 @@ jobs: executor: class: medium+ name: sb_node_14_browsers - parallelism: 2 + parallelism: 7 steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' @@ -534,7 +549,7 @@ jobs: executor: class: medium+ name: sb_node_14_browsers - parallelism: 2 + parallelism: 7 steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' @@ -547,9 +562,10 @@ jobs: - store_test_results: path: code/test-results e2e-sandboxes: - docker: - - image: mcr.microsoft.com/playwright:v1.24.0-focal - parallelism: 2 + executor: + class: medium+ + name: sb_playwright + parallelism: 7 steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' diff --git a/.github/workflows/generate-repros-next.yml b/.github/workflows/generate-repros-next.yml index a1774867b6c..43da2e6f871 100644 --- a/.github/workflows/generate-repros-next.yml +++ b/.github/workflows/generate-repros-next.yml @@ -7,7 +7,7 @@ on: # To remove when the branch will be merged push: branches: - - shilman/add-angular-repro-template + - vite-frameworks-xyz jobs: generate: @@ -15,6 +15,9 @@ jobs: env: YARN_ENABLE_IMMUTABLE_INSTALLS: false steps: + - uses: actions/setup-node@v2 + with: + node-version: 14 - uses: actions/checkout@v2 - name: Setup git user run: | diff --git a/.github/workflows/tests-unit.yml b/.github/workflows/tests-unit.yml index ec0bba4fa6e..45675827580 100644 --- a/.github/workflows/tests-unit.yml +++ b/.github/workflows/tests-unit.yml @@ -15,7 +15,7 @@ jobs: fail-fast: false matrix: os: [ubuntu-latest] - node_version: [12, 14, 16] + node_version: [14, 16] include: - os: macos-latest node_version: 16 diff --git a/.gitignore b/.gitignore index c58cf821130..540895b90ed 100644 --- a/.gitignore +++ b/.gitignore @@ -9,7 +9,6 @@ dist junit.xml /repros /sandbox -/built-sandboxes .verdaccio-cache # Yarn stuff diff --git a/.gitpod.yml b/.gitpod.yml index a71599a7f7a..c76052a6390 100644 --- a/.gitpod.yml +++ b/.gitpod.yml @@ -3,5 +3,15 @@ # and commit this file to your remote git repository to share the goodness with others. tasks: - - init: yarn - command: yarn bootstrap --core + - name: Scripts + init: | + cd scripts + yarn install + gp sync-done scripts + + - name: Code + init: | + gp sync-await scripts # wait for the above 'init' to finish + cd code + yarn install + yarn bootstrap --core diff --git a/.ignore b/.ignore new file mode 100644 index 00000000000..df5f841665c --- /dev/null +++ b/.ignore @@ -0,0 +1 @@ +!/sandbox \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index 4089eebcf3a..376ca6e835a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,148 @@ +## 7.0.0-alpha.31 (September 7, 2022) + +#### Maintenance + +- Doc blocks: Update ArgTable Reset button to use IconButton [#19052](https://github.com/storybooks/storybook/pull/19052) +- UI: Update a handful of icons [#19084](https://github.com/storybooks/storybook/pull/19084) +- Build: Update to latest nx [#19078](https://github.com/storybooks/storybook/pull/19078) +- Vite: Fix plugin types [#19095](https://github.com/storybooks/storybook/pull/19095) + +#### Dependency Upgrades + +- Chore: Remove unused dependencies in /lib [#19100](https://github.com/storybooks/storybook/pull/19100) + +## 7.0.0-alpha.30 (September 6, 2022) + +#### Bug Fixes + +- CLI: Fix include rendererAssets in npm bundle [#19115](https://github.com/storybooks/storybook/pull/19115) + +#### Maintenance + +- CLI: remove outdated comment in Angular starter [#19097](https://github.com/storybooks/storybook/pull/19097) + +#### Dependency Upgrades + +- Remove deprecated `stable` dependency [#19103](https://github.com/storybooks/storybook/pull/19103) +- Svelte: Update sveltedoc dependencies [#19111](https://github.com/storybooks/storybook/pull/19111) +- Deps: Remove core-js from most packages [#19098](https://github.com/storybooks/storybook/pull/19098) +- Deps: Upgrade react-element-to-jsx-string and react-inspector for React 18 [#19104](https://github.com/storybooks/storybook/pull/19104) + +## 7.0.0-alpha.29 (September 2, 2022) + +#### Bug Fixes + +- CLI/Vite: Don't add babel dependencies during init [#19088](https://github.com/storybooks/storybook/pull/19088) +- CLI: Fix sb init to use renderer assets instead of frameworks [#19091](https://github.com/storybooks/storybook/pull/19091) +- Core: Ensure if a docs render is torndown during preparation, it throws [#19071](https://github.com/storybooks/storybook/pull/19071) + +#### Maintenance + +- Addon-viewport: Move stories into addon [#19086](https://github.com/storybooks/storybook/pull/19086) +- Addon-backgrounds: Move stories into addon [#19085](https://github.com/storybooks/storybook/pull/19085) +- Addon-actions: Move stories into addon [#19082](https://github.com/storybooks/storybook/pull/19082) +- Build: Exit yarn bootstrap with nonzero code if failed [#19089](https://github.com/storybooks/storybook/pull/19089) +- Vite: cleanup custom plugins [#19087](https://github.com/storybooks/storybook/pull/19087) +- Build: Prefix generic addon stories in sandbox storybooks [#19092](https://github.com/storybooks/storybook/pull/19092) + +## 7.0.0-alpha.28 (September 2, 2022) + +#### Features + +- Vite: Automatically use vite.config.js [#19026](https://github.com/storybooks/storybook/pull/19026) + +#### Bug Fixes + +- CLI: Fix race condition in sb init [#19083](https://github.com/storybooks/storybook/pull/19083) +- Vite: Fix framework option checks, and SSv6 [#19062](https://github.com/storybooks/storybook/pull/19062) +- Core: Fix WebProjectAnnotations export in preview-web for back-compat [#19048](https://github.com/storybooks/storybook/pull/19048) + +#### Maintenance + +- Update to new TS reference format (?) [#19072](https://github.com/storybooks/storybook/pull/19072) +- Build: Conditionally force vite rebuilds in sandbox [#19063](https://github.com/storybooks/storybook/pull/19063) +- Build: Fix CRA bench [#19066](https://github.com/storybooks/storybook/pull/19066) + +## 7.0.0-alpha.27 (August 31, 2022) + +#### Features + +- Vite: Set `resolve.preserveSymlinks` based on env vars [#19039](https://github.com/storybooks/storybook/pull/19039) + +#### Bug Fixes + +- Core: Restore `/preview` etc package exports; return unresolved path from presets. [#19045](https://github.com/storybooks/storybook/pull/19045) + +#### Maintenance + +- Core: Add previewHead and previewBody to StorybookConfig interface [#19047](https://github.com/storybooks/storybook/pull/19047) +- Build: Fix the sb-bench CI step [#19029](https://github.com/storybooks/storybook/pull/19029) +- Remove sandbox from `.ignore` [#19040](https://github.com/storybooks/storybook/pull/19040) +- Build: Use new test runner with builtin junit [#19028](https://github.com/storybooks/storybook/pull/19028) + +#### Dependency Upgrades + +- Vite: Clean up framework dependencies / unused files [#19035](https://github.com/storybooks/storybook/pull/19035) + +## 7.0.0-alpha.26 (August 26, 2022) + +#### Features + +- CLI: Add react, vue3, and svelte vite to new-frameworks automigration [#19016](https://github.com/storybooks/storybook/pull/19016) +- Svelte: Add svelte-vite framework [#18978](https://github.com/storybooks/storybook/pull/18978) + +#### Bug Fixes + +- Core: Fix default story glob [#19018](https://github.com/storybooks/storybook/pull/19018) + +#### Dependency Upgrades + +- React-vite: update/cleanup dependencies [#19025](https://github.com/storybooks/storybook/pull/19025) +- Remove babel-loader from core-common [#19022](https://github.com/storybooks/storybook/pull/19022) + +## 7.0.0-alpha.25 (August 25, 2022) + +#### Features + +- Vite: Add builder-vite, react-vite, and vue3-vite [#19007](https://github.com/storybooks/storybook/pull/19007) + +#### Maintenance + +- CI: use runner with playwright installed for cra_bench [#18951](https://github.com/storybooks/storybook/pull/18951) +- Replace rollup-plugin-node-polyfills to analogs [#18975](https://github.com/storybooks/storybook/pull/18975) + +## 7.0.0-alpha.24 (August 24, 2022) + +#### Breaking changes + +- Preview: Rename Storybook DOM root IDs [#10638](https://github.com/storybooks/storybook/pull/10638) + +#### Features + +- Interactions: Add `step` function and support multiple levels of nesting [#18555](https://github.com/storybooks/storybook/pull/18555) + +#### Bug Fixes + +- Addon-docs: Fix canvas support expand code for non-story [#18808](https://github.com/storybooks/storybook/pull/18808) +- Components: Avoid including line numbers when copying the code [#18725](https://github.com/storybooks/storybook/pull/18725) +- Vue: Fix enum check in extractArgTypes [#18959](https://github.com/storybooks/storybook/pull/18959) +- Core: Fix frameworkOptions preset [#18979](https://github.com/storybooks/storybook/pull/18979) + +#### Maintenance + +- Addon-a11y: Remove achromatomaly color filter [#18852](https://github.com/storybooks/storybook/pull/18852) +- Build: Use ts-up to build core-webpack [#18912](https://github.com/storybooks/storybook/pull/18912) +- Build: Use ts-up to build addon-viewport [#18943](https://github.com/storybooks/storybook/pull/18943) +- Build: Improve generate-repros-next [#19001](https://github.com/storybooks/storybook/pull/19001) +- Examples: Remove refs in angular example [#18986](https://github.com/storybooks/storybook/pull/18986) +- Build: Use ts-up to build client-logger [#18893](https://github.com/storybooks/storybook/pull/18893) +- Generate-repros: Run local registry on `--local-registry` option [#18997](https://github.com/storybooks/storybook/pull/18997) +- Build: Remove unused bootstrap --cleanup [#18981](https://github.com/storybooks/storybook/pull/18981) +- CLI: Fix local repro publishing [#18977](https://github.com/storybooks/storybook/pull/18977) +- Build: Run verdaccio on 6001 to enable web UI [#18983](https://github.com/storybooks/storybook/pull/18983) +- CLI: determine whether to add interactive stories from `renderer` rather than `framework` [#18968](https://github.com/storybooks/storybook/pull/18968) +- CLI: Auto-accept migrations when running `generate-repros-next` [#18969](https://github.com/storybooks/storybook/pull/18969) + ## 7.0.0-alpha.23 (August 18, 2022) #### Features diff --git a/MIGRATION.md b/MIGRATION.md index 1f6e3c9c440..c655a4a38ac 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -3,6 +3,8 @@ - [From version 6.5.x to 7.0.0](#from-version-65x-to-700) - [Alpha release notes](#alpha-release-notes) - [Breaking changes](#breaking-changes) + - [`Story` type change to `StoryFn`, and the new `Story` type now refers to `StoryObj`](#story-type-change-to-storyfn-and-the-new-story-type-now-refers-to-storyobj) + - [Change of root html IDs](#change-of-root-html-ids) - [No more default export from `@storybook/addons`](#no-more-default-export-from-storybookaddons) - [Modern browser support](#modern-browser-support) - [No more configuration for manager](#no-more-configuration-for-manager) @@ -16,6 +18,7 @@ - [Docs modern inline rendering by default](#docs-modern-inline-rendering-by-default) - [Babel mode v7 by default](#babel-mode-v7-by-default) - [7.0 feature flags removed](#70-feature-flags-removed) + - [Vite builder uses vite config automatically](#vite-builder-uses-vite-config-automatically) - [Removed docs.getContainer and getPage parameters](#removed-docsgetcontainer-and-getpage-parameters) - [Icons API changed](#icons-api-changed) - [Docs Changes](#docs-changes) @@ -235,6 +238,50 @@ In the meantime, these migration notes are the best available documentation on t ### Breaking changes +#### `Story` type change to `StoryFn`, and the new `Story` type now refers to `StoryObj` + +In 6.x you were able to do this: + +```js +import type { Story } from '@storybook/react'; + +export const MyStory: Story = () =>
; +``` + +But this will produce an error in 7.0 because `Story` is now a type that refers to the `StoryObj` type. +You must now use the new `StoryFn` type: + +```js +import type { StoryFn } from '@storybook/react'; + +export const MyStory: StoryFn = () =>
; +``` + +This change was done to improve the experience of writing CSF3 stories, which is the recommended way of writing stories in 7.0: + +```js +import type { Story } from '@storybook/react'; +import { Button, ButtonProps } from './Button'; + +export default { + component: Button, +}; + +export const Primary: Story = { + variant: 'primary', +}; +``` + +If you want to be explicit, you can also import `StoryObj` instead of `Story`, they are the same type. + +For Storybook for react users: We also changed `ComponentStory` to refer to `ComponentStoryObj` instead of `ComponentStoryFn`, so if you were using `ComponentStory` you should now import/use `ComponentStoryFn` instead. + +You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/ + +#### Change of root html IDs + +The root ID unto which storybook renders stories is renamed from `root` to `#storybook-root` to avoid conflicts with user's code. + #### No more default export from `@storybook/addons` The default export from `@storybook/addons` has been removed. Please use the named exports instead: @@ -384,10 +431,13 @@ In 7.0, frameworks also specify the builder to be used. For example, The current - `@storybook/html-webpack5` - `@storybook/preact-webpack5` - `@storybook/react-webpack5` +- `@storybook/react-vite` - `@storybook/server-webpack5` - `@storybook/svelte-webpack5` +- `@storybook/svelte-vite` - `@storybook/vue-webpack5` - `@storybook/vue3-webpack5` +- `@storybook/vue3-vite` - `@storybook/web-components-webpack5` We will be expanding this list over the course of the 7.0 development cycle. More info on the rationale here: [Frameworks RFC](https://www.notion.so/chromatic-ui/Frameworks-RFC-89f8aafe3f0941ceb4c24683859ed65c). @@ -468,13 +518,19 @@ In 7.0 we've removed the following feature flags: | `emotionAlias` | This flag is no longer needed and should be deleted. | | `breakingChangesV7` | This flag is no longer needed and should be deleted. | +#### Vite builder uses vite config automatically + +When using a [Vite-based framework](#framework-field-mandatory), Storybook will automatically use your `vite.config.(ctm)js` config file starting in 7.0. +Some settings will be overridden by storybook so that it can function properly, and the merged settings can be modified using `viteFinal` in `.storybook/main.js` (see the [Storybook Vite configuration docs](https://storybook.js.org/docs/react/builders/vite#configuration)). +If you were using `viteFinal` in 6.5 to simply merge in your project's standard vite config, you can now remove it. + #### Removed docs.getContainer and getPage parameters It is no longer possible to set `parameters.docs.getContainer()` and `getPage()`. Instead use `parameters.docs.container` or `parameters.docs.page` directly. #### Icons API changed -For addon authors who use the `Icons` component, its API has been udpated in Storybook 7. +For addon authors who use the `Icons` component, its API has been updated in Storybook 7. ```diff export interface IconsProps extends ComponentProps { @@ -2152,7 +2208,7 @@ To configure a11y now, you have to specify configuration using story parameters, ```js export const parameters = { a11y: { - element: '#root', + element: "#storybook-root", config: {}, options: {}, manual: true, diff --git a/README.md b/README.md index ffd1395b161..208e9d42338 100644 --- a/README.md +++ b/README.md @@ -73,7 +73,7 @@ It allows you to browse a component library, view the different states of each c ## Getting Started -Visit [Storybook's website](https://storybook.js.org) to learn more about Storybook, and to get started. +Visit [Storybook's website](https://storybook.js.org) to learn more about Storybook and to get started. ### Documentation @@ -127,12 +127,12 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story | [graphql](https://github.com/storybookjs/addon-graphql) | Query a GraphQL server within Storybook stories | | [jest](code/addons/jest/) | View the results of components' unit tests in Storybook | | [links](code/addons/links/) | Create links between stories | +| [measure](code/addons/measure/) | Visually inspect the layout and box model within the Storybook UI | +| [outline](code/addons/outline/) | Visuallly debug the CSS layout and alignment within the Storybook UI | | [query params](https://github.com/storybookjs/addon-queryparams) | Mock query params | | [storyshots](code/addons/storyshots/) | Snapshot testing for components in Storybook | | [storysource](code/addons/storysource/) | View the code of your stories within the Storybook UI | | [viewport](code/addons/viewport/) | Change display sizes and layouts for responsive components using Storybook | -| [outline](code/addons/outline/) | Visuallly debug the CSS layout and alignment within the Storybook UI | -| [measure](code/addons/measure/) | Visually inspect the layout and box model within the Storybook UI | See [Addon / Framework Support Table](https://storybook.js.org/docs/react/api/frameworks-feature-support) @@ -140,11 +140,11 @@ See [Addon / Framework Support Table](https://storybook.js.org/docs/react/api/fr | Addons | | | ---------------------------------------------------------------------------------- | ---------------------------------------------------------- | -| [info](https://github.com/storybookjs/deprecated-addons/tree/master/addons/info) | Annotate stories with extra component usage information | -| [notes](https://github.com/storybookjs/deprecated-addons/tree/master/addons/notes) | Annotate Storybook stories with notes | | [contexts](https://storybook.js.org/addons/@storybook/addon-contexts/) | Addon for driving your components under dynamic contexts | -| [options](https://www.npmjs.com/package/@storybook/addon-options) | Customize the Storybook UI in code | +| [info](https://github.com/storybookjs/deprecated-addons/tree/master/addons/info) | Annotate stories with extra component usage information | | [knobs](https://github.com/storybookjs/addon-knobs) | Interactively edit component prop data in the Storybook UI | +| [notes](https://github.com/storybookjs/deprecated-addons/tree/master/addons/notes) | Annotate Storybook stories with notes | +| [options](https://www.npmjs.com/package/@storybook/addon-options) | Customize the Storybook UI in code | In order to continue improving your experience, we have to eventually deprecate certain addons in favor of new, better tools. @@ -177,7 +177,7 @@ We welcome contributions to Storybook! - 📥 Pull requests and 🌟 Stars are always welcome. - Read our [contributing guide](CONTRIBUTING.md) to get started, - or find us on [Discord](https://discord.gg/storybook), we will take the time to guide you + or find us on [Discord](https://discord.gg/storybook), we will take the time to guide you. Looking for a first issue to tackle? diff --git a/code/.eslintrc.js b/code/.eslintrc.js index 1129908e7eb..0e590a38080 100644 --- a/code/.eslintrc.js +++ b/code/.eslintrc.js @@ -101,5 +101,11 @@ module.exports = { 'jest/no-test-callback': 'off', // These aren't jest tests }, }, + { + files: ['**/builder-vite/input/iframe.html'], + rules: { + 'no-undef': 'off', // ignore "window" undef errors + }, + }, ], }; diff --git a/code/.vscode/settings.json b/code/.vscode/settings.json new file mode 100644 index 00000000000..25fa6215fdd --- /dev/null +++ b/code/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "typescript.tsdk": "node_modules/typescript/lib" +} diff --git a/code/__mocks__/inject-decorator.stories.txt b/code/__mocks__/inject-decorator.stories.txt index a8eb61d2f22..0b3ba7747b1 100644 --- a/code/__mocks__/inject-decorator.stories.txt +++ b/code/__mocks__/inject-decorator.stories.txt @@ -1,7 +1,6 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import { withInfo } from '@storybook/addon-info'; -import { action } from '@storybook/addon-actions'; import { DocgenButton } from '../components/DocgenButton'; import FlowTypeButton from '../components/FlowTypeButton'; @@ -13,19 +12,19 @@ storiesOf('Addons|Info.React Docgen', module) 'Comments from PropType declarations', withInfo( 'Comments above the PropType declarations should be extracted from the React component file itself and rendered in the Info Addon prop table' - )(() => ) + )(() => ) ) .add( 'Comments from Flow declarations', withInfo( 'Comments above the Flow declarations should be extracted from the React component file itself and rendered in the Info Addon prop table' - )(() => ) + )(() => ) ) .add( 'Comments from component declaration', withInfo( 'Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading' - )(() => ) + )(() => ) ); const markdownDescription = ` @@ -41,7 +40,7 @@ Maybe include a [link](http://storybook.js.org) to your project as well. storiesOf('Addons|Info.Markdown', module).add( 'Displays Markdown in description', - withInfo(markdownDescription)(() => ) + withInfo(markdownDescription)(() => ) ); storiesOf('Addons|Info.Options.inline', module).add( diff --git a/code/addons/a11y/README.md b/code/addons/a11y/README.md index 699c3ec15f7..a5c0375ba85 100755 --- a/code/addons/a11y/README.md +++ b/code/addons/a11y/README.md @@ -175,7 +175,7 @@ export default { parameters: { a11y: { // optional selector which element to inspect - element: '#root', + element: '#storybook-root', // axe-core configurationOptions (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#parameters-1) config: {}, // axe-core optionsParameter (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter) diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index a2c3e076e0b..a4690ee11c3 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "7.0.0-alpha.23", + "version": "7.0.0-alpha.31", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", @@ -41,7 +41,7 @@ "import": "./dist/preview.mjs", "types": "./dist/preview.d.ts" }, - "./register.js": { + "./register": { "require": "./dist/manager.js", "import": "./dist/manager.mjs", "types": "./dist/manager.d.ts" @@ -59,20 +59,19 @@ ], "scripts": { "check": "tsc --noEmit", - "prepare": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addon-highlight": "7.0.0-alpha.23", - "@storybook/addons": "7.0.0-alpha.23", - "@storybook/api": "7.0.0-alpha.23", - "@storybook/channels": "7.0.0-alpha.23", - "@storybook/client-logger": "7.0.0-alpha.23", - "@storybook/components": "7.0.0-alpha.23", - "@storybook/core-events": "7.0.0-alpha.23", + "@storybook/addon-highlight": "7.0.0-alpha.31", + "@storybook/addons": "7.0.0-alpha.31", + "@storybook/api": "7.0.0-alpha.31", + "@storybook/channels": "7.0.0-alpha.31", + "@storybook/client-logger": "7.0.0-alpha.31", + "@storybook/components": "7.0.0-alpha.31", + "@storybook/core-events": "7.0.0-alpha.31", "@storybook/csf": "0.0.2--canary.0899bb7.0", - "@storybook/theming": "7.0.0-alpha.23", + "@storybook/theming": "7.0.0-alpha.31", "axe-core": "^4.2.0", - "core-js": "^3.8.2", "global": "^4.4.0", "lodash": "^4.17.21", "react-sizeme": "^3.0.1", @@ -105,7 +104,7 @@ "./src/preview.tsx" ] }, - "gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a", + "gitHead": "02c013c33186479017098d532a18ff8654b91f1f", "storybook": { "displayName": "Accessibility", "icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png", diff --git a/code/addons/a11y/src/a11yRunner.ts b/code/addons/a11y/src/a11yRunner.ts index 1f4fd7ddeab..1d6bd8b2f14 100644 --- a/code/addons/a11y/src/a11yRunner.ts +++ b/code/addons/a11y/src/a11yRunner.ts @@ -36,7 +36,7 @@ const run = async (storyId: string) => { channel.emit(EVENTS.RUNNING); const axe = (await import('axe-core')).default; - const { element = '#root', config, options = {} } = input; + const { element = '#storybook-root', config, options = {} } = input; const htmlElement = document.querySelector(element); axe.reset(); if (config) { diff --git a/code/addons/a11y/src/components/ColorFilters.tsx b/code/addons/a11y/src/components/ColorFilters.tsx index 04c34088b7f..24c82e9f95c 100644 --- a/code/addons/a11y/src/components/ColorFilters.tsx +++ b/code/addons/a11y/src/components/ColorFilters.tsx @@ -52,13 +52,6 @@ export const Filters: React.FC> = (props) => ( values="0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0, 0, 0, 1, 0" /> - - - ); diff --git a/code/addons/a11y/src/components/Report/HighlightToggle.test.tsx b/code/addons/a11y/src/components/Report/HighlightToggle.test.tsx index cbfc33297db..e488c33bc1b 100644 --- a/code/addons/a11y/src/components/Report/HighlightToggle.test.tsx +++ b/code/addons/a11y/src/components/Report/HighlightToggle.test.tsx @@ -28,7 +28,9 @@ const defaultProviderValue = { describe('', () => { it('should render', () => { - const { container } = render(); + const { container } = render( + + ); expect(container.firstChild).toBeTruthy(); }); @@ -37,10 +39,10 @@ describe('', () => { - + ); const checkbox = getByRole('checkbox') as HTMLInputElement; @@ -52,10 +54,12 @@ describe('', () => { - + ); const checkbox = getByRole('checkbox') as HTMLInputElement; @@ -64,10 +68,10 @@ describe('', () => { describe('toggleHighlight', () => { it.each` - highlighted | elementsToHighlight | expected - ${[]} | ${['#root']} | ${true} - ${['#root']} | ${['#root']} | ${false} - ${['#root']} | ${['#root', '#root1']} | ${true} + highlighted | elementsToHighlight | expected + ${[]} | ${['#storybook-root']} | ${true} + ${['#storybook-root']} | ${['#storybook-root']} | ${false} + ${['#storybook-root']} | ${['#storybook-root', '#storybook-root1']} | ${true} `( 'should be triggered with $expected when highlighted is $highlighted and elementsToHighlight is $elementsToHighlight', ({ highlighted, elementsToHighlight, expected }) => { diff --git a/code/addons/a11y/src/components/VisionSimulator.tsx b/code/addons/a11y/src/components/VisionSimulator.tsx index 050c9392eca..fe7899a5c30 100644 --- a/code/addons/a11y/src/components/VisionSimulator.tsx +++ b/code/addons/a11y/src/components/VisionSimulator.tsx @@ -19,7 +19,6 @@ export const baseList = [ { name: 'protanopia', percentage: 0.59 }, { name: 'tritanomaly', percentage: 0.01 }, { name: 'tritanopia', percentage: 0.016 }, - { name: 'achromatomaly', percentage: 0.00001 }, { name: 'achromatopsia', percentage: 0.0001 }, { name: 'grayscale' }, ] as Option[]; diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index 1bc4cb5a163..500bb21aa3d 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "7.0.0-alpha.23", + "version": "7.0.0-alpha.31", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", @@ -55,23 +55,22 @@ ], "scripts": { "check": "tsc --noEmit", - "prepare": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.23", - "@storybook/api": "7.0.0-alpha.23", - "@storybook/client-logger": "7.0.0-alpha.23", - "@storybook/components": "7.0.0-alpha.23", - "@storybook/core-events": "7.0.0-alpha.23", + "@storybook/addons": "7.0.0-alpha.31", + "@storybook/api": "7.0.0-alpha.31", + "@storybook/client-logger": "7.0.0-alpha.31", + "@storybook/components": "7.0.0-alpha.31", + "@storybook/core-events": "7.0.0-alpha.31", "@storybook/csf": "0.0.2--canary.0899bb7.0", - "@storybook/theming": "7.0.0-alpha.23", - "core-js": "^3.8.2", + "@storybook/theming": "7.0.0-alpha.31", "dequal": "^2.0.2", "global": "^4.4.0", "lodash": "^4.17.21", "polished": "^4.2.2", "prop-types": "^15.7.2", - "react-inspector": "^5.1.0", + "react-inspector": "^6.0.0", "telejson": "^6.0.8", "ts-dedent": "^2.0.0", "util-deprecate": "^1.0.2", @@ -103,7 +102,7 @@ "./src/preview.ts" ] }, - "gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a", + "gitHead": "02c013c33186479017098d532a18ff8654b91f1f", "storybook": { "displayName": "Actions", "unsupportedFrameworks": [ diff --git a/code/addons/actions/src/components/ActionLogger/index.tsx b/code/addons/actions/src/components/ActionLogger/index.tsx index 9511b1f07d5..762c4b6d1d3 100644 --- a/code/addons/actions/src/components/ActionLogger/index.tsx +++ b/code/addons/actions/src/components/ActionLogger/index.tsx @@ -2,7 +2,7 @@ import React, { FC, Fragment } from 'react'; import { styled, withTheme } from '@storybook/theming'; import type { Theme } from '@storybook/theming'; -import Inspector from 'react-inspector'; +import { Inspector } from 'react-inspector'; import { ActionBar, ScrollArea } from '@storybook/components'; import { Action, InspectorContainer, Counter } from './style'; @@ -27,7 +27,7 @@ interface InspectorProps { } const ThemedInspector = withTheme(({ theme, ...props }: InspectorProps) => ( - + )); interface ActionLoggerProps { diff --git a/code/addons/actions/src/runtime/action.ts b/code/addons/actions/src/runtime/action.ts index 05c1f7bb589..b0c874e41cb 100644 --- a/code/addons/actions/src/runtime/action.ts +++ b/code/addons/actions/src/runtime/action.ts @@ -20,7 +20,7 @@ const isReactSyntheticEvent = (e: unknown): e is SyntheticEvent => const serializeArg = (a: T) => { if (isReactSyntheticEvent(a)) { const e: SyntheticEvent = Object.create( - // @ts-ignore + // @ts-expect-error (Converted from ts-ignore) a.constructor.prototype, Object.getOwnPropertyDescriptors(a) ); diff --git a/code/addons/actions/src/runtime/withActions.ts b/code/addons/actions/src/runtime/withActions.ts index c6e2c265a91..5aa7b60a3f2 100644 --- a/code/addons/actions/src/runtime/withActions.ts +++ b/code/addons/actions/src/runtime/withActions.ts @@ -43,7 +43,7 @@ const createHandlers = (actionsFn: (...arg: any[]) => object, ...handles: any[]) const applyEventHandlers = deprecate( (actionsFn: any, ...handles: any[]) => { - const root = document && document.getElementById('root'); + const root = document && document.getElementById('storybook-root'); useEffect(() => { if (root != null) { const handlers = createHandlers(actionsFn, ...handles); diff --git a/code/addons/actions/src/typings.d.ts b/code/addons/actions/src/typings.d.ts index 7361d8d2103..74f6623d478 100644 --- a/code/addons/actions/src/typings.d.ts +++ b/code/addons/actions/src/typings.d.ts @@ -1,4 +1,3 @@ // TODO: following packages need definition files or a TS migration declare module 'global'; -declare module 'react-inspector'; declare module 'uuid-browser/v4'; diff --git a/code/addons/actions/template/stories/argtype.stories.ts b/code/addons/actions/template/stories/argtype.stories.ts new file mode 100644 index 00000000000..bc1311bafdf --- /dev/null +++ b/code/addons/actions/template/stories/argtype.stories.ts @@ -0,0 +1,26 @@ +import globalThis from 'global'; + +export default { + component: globalThis.Components.Button, + args: { + children: 'Click Me!', + }, + argTypes: { + onClick: {}, + }, + parameters: { + chromatic: { disable: true }, + actions: { argTypesRegex: '^on.*' }, + }, +}; + +export const String = { + argTypes: { + onClick: { action: 'clicked!' }, + }, +}; +export const Boolean = { + argTypes: { + onClick: { action: true }, + }, +}; diff --git a/code/addons/actions/template/stories/basics.stories.ts b/code/addons/actions/template/stories/basics.stories.ts new file mode 100644 index 00000000000..08e2fa74307 --- /dev/null +++ b/code/addons/actions/template/stories/basics.stories.ts @@ -0,0 +1,99 @@ +import globalThis from 'global'; + +import { action } from '@storybook/addon-actions'; + +export default { + component: globalThis.Components.Button, + args: { + children: 'Click Me!', + }, + parameters: { + chromatic: { disable: true }, + }, +}; + +export const Basic = { + args: { onClick: action('onClick') }, +}; + +export const TypeString = { + args: { onClick: () => action('onClick')('string') }, +}; +export const TypeBoolean = { + args: { onClick: () => action('onClick')(false) }, +}; +export const TypeObject = { + args: { onClick: () => action('onClick')({}) }, +}; +export const TypeNull = { + args: { onClick: () => action('onClick')(null) }, +}; +export const TypeUndefined = { + args: { onClick: () => action('onClick')(undefined) }, +}; +export const TypeNaN = { + args: { onClick: () => action('onClick')(NaN) }, +}; +export const TypeInfinity = { + args: { onClick: () => action('onClick')(Infinity) }, +}; +export const TypeMinusInfinity = { + args: { onClick: () => action('onClick')(-Infinity) }, +}; +export const TypeNumber = { + args: { onClick: () => action('onClick')(10000) }, +}; +export const TypeGlobal = { + args: { onClick: () => action('onClick')(globalThis) }, +}; +export const TypeSymbol = { + args: { onClick: () => action('onClick')(Symbol('MySymbol')) }, +}; +export const TypeRegExp = { + args: { onClick: () => action('onClick')(new RegExp('MyRegExp')) }, +}; +export const TypeArray = { + args: { onClick: () => action('onClick')(['a', 'b', 'c']) }, +}; +export const TypeClass = { + args: { onClick: () => action('onClick')(class MyClass {}) }, +}; +export const TypeFunction = { + args: { onClick: () => action('onClick')(function MyFunction() {}) }, +}; +export const TypeMultiple = { + args: { onClick: () => action('onClick')('string', true, false, null, undefined, [], {}) }, +}; + +export const Cyclical = { + args: { + onClick: () => + action('onClick')( + (() => { + const cyclical: Record = {}; + cyclical.cyclical = cyclical; + return cyclical; + })() + ), + }, +}; + +export const Reserved = { + args: { onClick: action('delete') }, +}; + +export const OptionPersist = { + args: { onClick: action('onClick', { clearOnStoryChange: false }) }, +}; +export const OptionDepth = { + args: { onClick: action('onClick', { depth: 2 }) }, +}; + +export const Disabled = { + args: { onClick: action('onCLick') }, + parameters: { + actions: { + disabled: true, + }, + }, +}; diff --git a/code/addons/actions/template/stories/basics.stories.tsx b/code/addons/actions/template/stories/basics.stories.tsx deleted file mode 100644 index 98cd1ee4952..00000000000 --- a/code/addons/actions/template/stories/basics.stories.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import globalThis from 'global'; - -import { action } from '@storybook/addon-actions'; - -export default { - component: globalThis.Components.Button, - args: { - children: 'Click Me!', - }, -}; - -export const BasicExample = { - args: { onClick: action('hello-world') }, -}; diff --git a/code/addons/actions/template/stories/configs.stories.ts b/code/addons/actions/template/stories/configs.stories.ts new file mode 100644 index 00000000000..b9ae404d4d3 --- /dev/null +++ b/code/addons/actions/template/stories/configs.stories.ts @@ -0,0 +1,36 @@ +import globalThis from 'global'; + +import { actions, configureActions } from '@storybook/addon-actions'; + +const configs = actions('actionA', 'actionB', 'actionC'); + +export default { + component: globalThis.Components.Button, + args: { + children: 'Click Me!', + }, + parameters: { + chromatic: { disable: true }, + }, +}; + +export const ActionA = { + args: { onClick: configs.actionA }, +}; +export const ActionB = { + args: { onClick: configs.actionB }, +}; +export const ActionC = { + args: { onClick: configs.actionC }, +}; + +export const ConfigureActions = { + args: { onClick: configs.actionA }, + decorators: [ + (storyFn: any) => { + configureActions({ depth: 2 }); + + return storyFn(); + }, + ], +}; diff --git a/code/addons/actions/template/stories/parameters.stories.ts b/code/addons/actions/template/stories/parameters.stories.ts new file mode 100644 index 00000000000..8ec8cb37186 --- /dev/null +++ b/code/addons/actions/template/stories/parameters.stories.ts @@ -0,0 +1,17 @@ +import globalThis from 'global'; + +export default { + component: globalThis.Components.Button, + args: { + children: 'Click Me!', + }, + parameters: { + chromatic: { disable: true }, + }, +}; + +export const Basic = { + parameters: { + handles: [{ click: 'clicked', contextmenu: 'right clicked' }], + }, +}; diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 40ea81c4563..1e1617b66c4 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "7.0.0-alpha.23", + "version": "7.0.0-alpha.31", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", @@ -41,7 +41,7 @@ "import": "./dist/preview.mjs", "types": "./dist/preview.d.ts" }, - "./register.js": { + "./register": { "require": "./dist/manager.js", "import": "./dist/manager.mjs", "types": "./dist/manager.d.ts" @@ -59,17 +59,16 @@ ], "scripts": { "check": "tsc --noEmit", - "prepare": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.23", - "@storybook/api": "7.0.0-alpha.23", - "@storybook/client-logger": "7.0.0-alpha.23", - "@storybook/components": "7.0.0-alpha.23", - "@storybook/core-events": "7.0.0-alpha.23", + "@storybook/addons": "7.0.0-alpha.31", + "@storybook/api": "7.0.0-alpha.31", + "@storybook/client-logger": "7.0.0-alpha.31", + "@storybook/components": "7.0.0-alpha.31", + "@storybook/core-events": "7.0.0-alpha.31", "@storybook/csf": "0.0.2--canary.0899bb7.0", - "@storybook/theming": "7.0.0-alpha.23", - "core-js": "^3.8.2", + "@storybook/theming": "7.0.0-alpha.31", "global": "^4.4.0", "memoizerific": "^1.11.3", "ts-dedent": "^2.0.0", @@ -100,7 +99,7 @@ "./src/preview.tsx" ] }, - "gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a", + "gitHead": "02c013c33186479017098d532a18ff8654b91f1f", "storybook": { "displayName": "Backgrounds", "icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png", diff --git a/code/addons/backgrounds/template/stories/grid.stories.ts b/code/addons/backgrounds/template/stories/grid.stories.ts new file mode 100644 index 00000000000..f69be73bbfd --- /dev/null +++ b/code/addons/backgrounds/template/stories/grid.stories.ts @@ -0,0 +1,51 @@ +import globalThis from 'global'; + +export default { + component: globalThis.Components.Button, + args: { + children: 'Click Me!', + }, + parameters: { + backgrounds: { + grid: { + cellSize: 10, + cellAmount: 4, + opacity: 0.2, + }, + }, + chromatic: { disable: true }, + }, +}; + +export const Basic = { + parameters: {}, +}; + +export const Custom = { + parameters: { + backgrounds: { + grid: { + cellSize: 100, + cellAmount: 10, + opacity: 0.8, + }, + }, + }, +}; + +// Grid should have an offset of 0 when in fullscreen +export const Fullscreen = { + parameters: { + layout: 'fullscreen', + }, +}; + +export const Disabled = { + parameters: { + backgrounds: { + grid: { + disable: true, + }, + }, + }, +}; diff --git a/code/addons/backgrounds/template/stories/parameters.stories.ts b/code/addons/backgrounds/template/stories/parameters.stories.ts new file mode 100644 index 00000000000..06af6455ff2 --- /dev/null +++ b/code/addons/backgrounds/template/stories/parameters.stories.ts @@ -0,0 +1,87 @@ +import globalThis from 'global'; + +const COLORS = [ + { name: 'red', value: '#FB001D' }, + { name: 'orange', value: '#FB8118' }, + { name: 'yellow', value: '#FCFF0C' }, + { name: 'green', value: '#1AB408' }, + { name: 'blue', value: '#0F0084' }, + { name: 'purple', value: '#620073' }, +]; + +export default { + component: globalThis.Components.Button, + args: { + children: 'Click Me!', + }, + parameters: { + backgrounds: { + values: COLORS, + }, + chromatic: { disable: true }, + }, +}; + +export const Basic = { + parameters: {}, +}; + +export const Default = { + parameters: { + backgrounds: { + default: COLORS[0].name, + }, + }, +}; + +export const StorySpecific = { + parameters: { + backgrounds: { + default: 'white', + values: [ + { name: 'white', value: '#F9F5F1' }, + { name: 'pink', value: '#F99CB4' }, + { name: 'teal', value: '#67CDE8' }, + { name: 'brown', value: '#4D2C10' }, + { name: 'black', value: '#000400' }, + ], + }, + }, +}; + +export const Gradient = { + parameters: { + backgrounds: { + default: 'gradient', + values: [ + { + name: 'gradient', + value: 'linear-gradient(90deg, #CA005E 0%, #863783 50%, #112396)', + }, + ], + }, + }, +}; + +const img = + 'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTkwIDQ3NSIgZmlsbD0ibm9uZSI+CiAgPGcgaWQ9ImNvbXBvbmVudC1jb21wb3NpdGlvbiI+CiAgICA8bWFzayBpZD0iY29tcG9uZW50cyIgd2lkdGg9IjcxMSIgaGVpZ2h0PSI2NjciIHg9Ii01MiIgeT0iLTg2IiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTY1OC4wMiAxODEuNDAzbC00NC4zMTItLjAwMS0uMDAxIDEzMi4xODVoNDQuMzEzdjQ1LjA2NmgtNDQuMzEybC0uMDAxIDEzMi45MzktODguNjI1LS4wMDEtLjAwMSA4OC42MjZoLTQ1LjA2NnYtNDQuMzEybC00NC4zMTItLjAwMXYtNDQuMzEzaC04Ny44NzJsLS4wMDEgNDQuMzEzLTQ0LjMxMi4wMDF2NDQuMzEyaC00NS4wNjZ2LTQ0LjMxM2gtNDQuMzEzdi00NC4zMTJsLTQzLjU1OC0uMDAxLS4wMDIgNDQuMzEzaC00NS4wNjZsLjAwMS00NC4zMTMtNDMuNTYuMDAxdjQ0LjMxMkgzNi44ODh2LTQ0LjMxM2wtNDMuNTYuMDAxdjg4LjYyNWgtNDUuMDY2VjM1Ny45aDQ0LjMxNHYtNDMuNTU5aC00NC4zMTN2LTQ1LjA2Nmg0NC4zMTNWMTM3LjA5aC00NC4zMTNWOTIuMDI0bDQ0LjMxMy0uMDAxVjQuMTUyaC00NC4zMTN2LTQ1LjA2NkgzNy42NFYzLjM5OEgyMTQuMTRsLS4wMDEtNDQuMzEyaDQ1LjA2NlYzLjM5OGgyMjAuODExbC0uMDAxLTg4LjYyNWg0NS4wNjZsLjAwMSA0NC4zMTNoNDQuMzEybC4wMDEgNDQuMzEyaDQ0LjMxMmwuMDAxIDg4LjYyNWg0NC4zMTJ2ODkuMzh6TTM2Ljg4OCAzNTcuOVYyMjUuNzE2aC00My41NnY0NC4zMTJoLTQ0LjMxMnY0My41Nmw0NC4zMTMtLjAwMVYzNTcuOWg0My41NnptMCA4OC42MjV2LTg3Ljg3MmgtODcuODcydjg3Ljg3Mmg4Ny44NzJ6bTAtMjIxLjU2M1Y5Mi43NzdoLTg3Ljg3MnY0My41Nmw0NC4zMTMtLjAwMXY4OC42MjZoNDMuNTU5ek04MS4yIDQ3LjcxMVY0LjE1SDM2Ljg4OFYtNDAuMTZoLTg3Ljg3MnY0My41Nmg0NC4zMTNWNDcuNzFIODEuMnpNMzYuODg4IDQ5MC44Mzl2LTQzLjU2aC04Ny44NzJ2MTMyLjE4NWg0My41NnYtODguNjI2bDQ0LjMxMi4wMDF6bTg4LjYyNi0zOTguMDYySDgxLjIwMVY0OC40NjRILTYuNjcxdjQzLjU2SDM3LjY0djQ0LjMxMmg4Ny44NzN2LTQzLjU2em0tLjAwMSAxMzIuMTg1di00My41NmwtNDQuMzEyLjAwMVYxMzcuMDlIMzcuNjR2MTMyLjE4NGg0My41NnYtNDQuMzEyaDQ0LjMxMnptMCAyNjUuODc2di00My41NTlIODEuMjAxdi00NC4zMTNIMzcuNjR2MTMyLjE4NWg0My41NnYtNDQuMzEzaDQ0LjMxMnptLjAwMS0xNzcuMjUxdi00My41NTlIMzcuNjQydjEzMi4xODVIODEuMnYtODguNjI2aDQ0LjMxM3ptODguNjI1LTEzMi45MzhsLjAwMS00My41NTlIODEuOTU1bC0uMDAxIDQzLjU1OWg0NC4zMTN2NDQuMzEzaDQzLjU1OXYtNDQuMzEzaDQ0LjMxM3ptMC04OC42MjVWNC4xNTJIODEuOTU0djQzLjU2bDg4LjYyNS0uMDAxLjAwMSA0NC4zMTJoNDMuNTU5em0wIDE3Ny4yNXYtNDMuNTU5SDgxLjk1NHY0My41NTlIMjE0LjE0em0wLTEzMi45Mzh2LTQzLjU2bC00NC4zMTMuMDAxVjQ4LjQ2NEg4MS45NTR2NDMuNTZoNDQuMzEzdjQ0LjMxMmg4Ny44NzJ6bS00NC4zMTMgMjY1Ljg3N3YtNDMuNTZoLTQ0LjMxM2wuMDAxLTQ0LjMxMmgtNDMuNTZ2MTMyLjE4NGw0My41NTkuMDAxdi00NC4zMTNoNDQuMzEzem00NC4zMTMtNDQuMzEzdi04Ny44NzJoLTg3Ljg3MlYzNTcuOWg4Ny44NzJ6bTAgODguNjI2di00My41NmgtODcuODcydjEzMi4xODVoNDMuNTU5di04OC42MjVoNDQuMzEzem04OC42MjYtMjY1Ljg3N2wtLjAwMS00My41NTloLTg3Ljg3MnY0NC4zMTNIMTcwLjU4djQzLjU1OWg4Ny44NzJ2LTQ0LjMxM2g0NC4zMTN6bTAgMzEwLjE4OXYtNDMuNTU5SDE3MC41OHY0My41NTloNDQuMzEybC4wMDEgNDQuMzEzaDQzLjU1OXYtNDQuMzEzaDQ0LjMxM3ptMC04Ny44NzJoLTQ0LjMxM3YtNDQuMzEzSDE3MC41OHY0My41Nmg0NC4zMTJsLjAwMSA0NC4zMTJoODcuODcydi00My41NTl6bTQ0LjMxMi0yMjIuMzE3bC4wMDEtODcuODcySDIxNC44OTJ2NDMuNTZsODguNjI2LS4wMDEuMDAxIDQ0LjMxM2g0My41NTh6TTMwMi43NjQgNDcuNzExVjQuMTVoLTQ0LjMxMmwtLjAwMS00NC4zMTJoLTQzLjU1OVY5Mi4wMjRsNDMuNTYtLjAwMVY0Ny43MWg0NC4zMTJ6bS00NC4zMTMgMjIxLjU2NGwuMDAxLTQzLjU2aC00My41NTl2NDMuNTU5bDQzLjU1OC4wMDF6bTg4LjYyNyA4OC42MjVsLS4wMDEtNDMuNTU5SDIxNC44OTNWMzU3LjloMTMyLjE4NXptLTg3Ljg3My04Ny44NzJoLTQ0LjMxM3Y0My41NTloODcuODcyVjE4MS40MDJsLTQzLjU1OS4wMDF2ODguNjI1ek0zOTEuMzkgNDcuNzExVjQuMTUxaC04Ny44NzJ2NDQuMzEzaC00NC4zMTN2NDMuNTZoODcuODcyVjQ3LjcxaDQ0LjMxM3ptLTg4LjYyNSAzNTQuNTAydi00My41NmgtNDMuNTZ2NDMuNTZoNDMuNTZ6bTQ0LjMxMiAxMzIuOTM4di04Ny44NzJoLTQzLjU1OXY0NC4zMTNoLTQ0LjMxM3Y4Ny44NzJoNDMuNTZsLS4wMDEtNDQuMzEzaDQ0LjMxM3ptNDQuMzEyLTEzMi45MzhsLjAwMS00My41NmgtODcuODcydjg3Ljg3Mmg0My41NTl2LTQ0LjMxMmg0NC4zMTJ6bTAtNDQuMzEzdi04Ny44NzJoLTQ0LjMxMnYtNDQuMzEzaC00My41NTh2ODcuODcyaDQ0LjMxMVYzNTcuOWg0My41NTl6bTQ0LjMxNC0xMzIuOTM4di00My41NkgzMDMuNTE4djQzLjU2aDQ0LjMxMmwuMDAxIDQ0LjMxMmg0My41NTl2LTQ0LjMxMmg0NC4zMTN6bTAgMjIxLjU2M1YzMTQuMzQxaC00My41NTlsLS4wMDEgODguNjI1aC00NC4zMTJsLS4wMDEgNDMuNTU5aDg3Ljg3M3ptNDQuMzEyIDQ0LjMxM3YtODcuODcyaC00My41NTl2NDQuMzEzSDM0Ny44M3Y0My41NTloMTMyLjE4NXptMC0zMTAuMTg5VjEzNy4wOUgzOTEuMzlWOTIuNzc3aC00My41NTl2ODcuODcyaDEzMi4xODR6bTAtODguNjI2VjQ4LjQ2NEgzNDcuODMxdjQzLjU2aDQ0LjMxMnY0NC4zMTJoNDMuNTZWOTIuMDI0aDQ0LjMxMnptLjAwMSAxNzcuMjUxbC0uMDAxLTg3Ljg3MWgtNDMuNTU5djQ0LjMxMmgtNDQuMzEydjg3Ljg3M2w0My41NTktLjAwMXYtNDQuMzEybDQ0LjMxMy0uMDAxem00NC4zMTItMTc3LjI1VjQuMTUySDM5Mi4xNDN2NDMuNTZsODguNjI2LS4wMDF2NDQuMzEzaDQzLjU1OXptNDQuMzEzIDg4LjYyNWwuMDAxLTQzLjU1OWgtNDQuMzE0VjkyLjc3N2gtODcuODcydjQzLjU1OWg0NC4zMTN2NDQuMzEzaDg3Ljg3MnpNNTI0LjMyOCAzNTcuOWwuMDAxLTQzLjU1OWgtNDQuMzE0bC4wMDEtNDQuMzEzaC00My41NmwuMDAxIDEzMi4xODQgNDMuNTU4LjAwMVYzNTcuOWg0NC4zMTN6bTAgMjIxLjU2NFY0NDcuMjc5aC00My41NTl2NDQuMzEzaC00NC4zMTN2NDMuNTU5aDQ0LjMxM3Y0NC4zMTNoNDMuNTU5em00NC4zMTMtODguNjI2di04Ny44NzJoLTQ0LjMxM3YtNDQuMzEybC00My41Ni0uMDAxLjAwMiA4Ny44NzIgNDQuMzExLjAwMXY0NC4zMTJoNDMuNTZ6bTAtNDQzLjEyN3YtODcuODcyaC00NC4zMTN2LTQ0LjMxM2gtNDMuNTU5VjMuMzk4aDQ0LjMxMmwuMDAxIDQ0LjMxM2g0My41NTl6bTAgMTc3LjI1MXYtNDMuNTU5aC04Ny44NzJ2MTMyLjE4NGg0My41NTl2LTg4LjYyNWg0NC4zMTN6bTQ0LjMxMy0xMzIuOTM4VjQuMTUyaC00My41NnY0NC4zMTJoLTQ0LjMxM3Y4Ny44NzJoNDMuNTZWOTIuMDI0aDQ0LjMxM3ptLS4wMDEgMzk4LjgxNFYzNTguNjU0aC04Ny44NzJ2NDMuNTU5aDQ0LjMxM3Y4OC42MjVoNDMuNTU5em0wLTIyMS41NjN2LTg3Ljg3MmgtNDMuNTU5djQ0LjMxMmwtNDQuMzEyLjAwMXY4Ny44NzFoNDMuNTU5di00NC4zMTJoNDQuMzEyem00NC4zMTMgODguNjI1di00My41NTloLTQ0LjMxM3YtNDQuMzEzaC00My41NTl2NDQuMzEzaC00NC4zMTJWMzU3LjloMTMyLjE4NHptMC0xNzcuMjUxVjkyLjc3N2gtODcuODcydjg3Ljg3Mmg4Ny44NzJ6Ij4KICAgICAgPC9wYXRoPgogICAgPC9tYXNrPgogICAgPGcgbWFzaz0idXJsKCNjb21wb25lbnRzKSI+CiAgICAgIDxyZWN0IHdpZHRoPSI1OTAiIGhlaWdodD0iNDc1IiBmaWxsPSJ1cmwoI2dyYWRpZW50LWZpbGwpIiBvcGFjaXR5PSIwLjc1Ij4KICAgICAgPC9yZWN0PgogICAgPC9nPgogIDwvZz4KICA8ZGVmcz4KICAgIDxjbGlwUGF0aCBpZD0id2luZG93LWNsaXAiPgogICAgICA8cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwSDU4OFY0NTNIMHoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMjEpIj4KICAgICAgPC9wYXRoPgogICAgPC9jbGlwUGF0aD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQtZmlsbCIgeDE9Ijc2IiB4Mj0iNTUzLjUiIHkxPSIyNjkiIHkyPSI0MTUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0EyNEZCRCI+CiAgICAgIDwvc3RvcD4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjQ3NyIgc3RvcC1jb2xvcj0iIzM2N0VENiI+CiAgICAgIDwvc3RvcD4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjk4MiIgc3RvcC1jb2xvcj0iI0UxMjY0RCI+CiAgICAgIDwvc3RvcD4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgo8L3N2Zz4K'; + +export const Image = { + parameters: { + backgrounds: { + default: 'component-driven', + values: [ + { + name: 'component-driven', + value: `#000 center / cover no-repeat url(data:image/svg+xml;base64,${img})`, + }, + ], + }, + }, +}; + +export const Disabled = { + parameters: { + backgrounds: { disable: true }, + }, +}; diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index 65207a7489c..df83911f1d1 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "7.0.0-alpha.23", + "version": "7.0.0-alpha.31", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", @@ -36,7 +36,7 @@ "import": "./dist/manager.mjs", "types": "./dist/manager.d.ts" }, - "./register.js": { + "./register": { "require": "./dist/manager.js", "import": "./dist/manager.mjs", "types": "./dist/manager.d.ts" @@ -54,20 +54,19 @@ ], "scripts": { "check": "tsc --noEmit", - "prepare": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.23", - "@storybook/api": "7.0.0-alpha.23", - "@storybook/blocks": "7.0.0-alpha.23", - "@storybook/client-logger": "7.0.0-alpha.23", - "@storybook/components": "7.0.0-alpha.23", - "@storybook/core-common": "7.0.0-alpha.23", + "@storybook/addons": "7.0.0-alpha.31", + "@storybook/api": "7.0.0-alpha.31", + "@storybook/blocks": "7.0.0-alpha.31", + "@storybook/client-logger": "7.0.0-alpha.31", + "@storybook/components": "7.0.0-alpha.31", + "@storybook/core-common": "7.0.0-alpha.31", "@storybook/csf": "0.0.2--canary.0899bb7.0", - "@storybook/node-logger": "7.0.0-alpha.23", - "@storybook/store": "7.0.0-alpha.23", - "@storybook/theming": "7.0.0-alpha.23", - "core-js": "^3.8.2", + "@storybook/node-logger": "7.0.0-alpha.31", + "@storybook/store": "7.0.0-alpha.31", + "@storybook/theming": "7.0.0-alpha.31", "lodash": "^4.17.21", "ts-dedent": "^2.0.0" }, @@ -93,7 +92,7 @@ ], "platform": "browser" }, - "gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a", + "gitHead": "02c013c33186479017098d532a18ff8654b91f1f", "storybook": { "displayName": "Controls", "icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png", diff --git a/code/addons/docs/angular/index.js b/code/addons/docs/angular/index.js index 3fd4c7ea527..0236c45fec3 100644 --- a/code/addons/docs/angular/index.js +++ b/code/addons/docs/angular/index.js @@ -2,6 +2,6 @@ /* global window */ export const setCompodocJson = (compodocJson) => { - // @ts-ignore + // @ts-expect-error (Converted from ts-ignore) window.__STORYBOOK_COMPODOC_JSON__ = compodocJson; }; diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 16800c0d752..bd761d121c5 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "7.0.0-alpha.23", + "version": "7.0.0-alpha.31", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", @@ -46,31 +46,30 @@ ], "scripts": { "check": "tsc --noEmit", - "prepare": "node ../../../scripts/prepare.js" + "prep": "node ../../../scripts/prepare.js" }, "dependencies": { "@babel/plugin-transform-react-jsx": "^7.12.12", "@babel/preset-env": "^7.12.11", "@jest/transform": "^26.6.2", "@mdx-js/react": "^1.6.22", - "@storybook/addons": "7.0.0-alpha.23", - "@storybook/api": "7.0.0-alpha.23", - "@storybook/blocks": "7.0.0-alpha.23", - "@storybook/components": "7.0.0-alpha.23", - "@storybook/core-common": "7.0.0-alpha.23", - "@storybook/core-events": "7.0.0-alpha.23", + "@storybook/addons": "7.0.0-alpha.31", + "@storybook/api": "7.0.0-alpha.31", + "@storybook/blocks": "7.0.0-alpha.31", + "@storybook/components": "7.0.0-alpha.31", + "@storybook/core-common": "7.0.0-alpha.31", + "@storybook/core-events": "7.0.0-alpha.31", "@storybook/csf": "0.0.2--canary.0899bb7.0", - "@storybook/csf-tools": "7.0.0-alpha.23", - "@storybook/docs-tools": "7.0.0-alpha.23", + "@storybook/csf-tools": "7.0.0-alpha.31", + "@storybook/docs-tools": "7.0.0-alpha.31", "@storybook/mdx1-csf": "0.0.5-canary.13.9ce928a.0", - "@storybook/node-logger": "7.0.0-alpha.23", - "@storybook/postinstall": "7.0.0-alpha.23", - "@storybook/preview-web": "7.0.0-alpha.23", - "@storybook/source-loader": "7.0.0-alpha.23", - "@storybook/store": "7.0.0-alpha.23", - "@storybook/theming": "7.0.0-alpha.23", + "@storybook/node-logger": "7.0.0-alpha.31", + "@storybook/postinstall": "7.0.0-alpha.31", + "@storybook/preview-web": "7.0.0-alpha.31", + "@storybook/source-loader": "7.0.0-alpha.31", + "@storybook/store": "7.0.0-alpha.31", + "@storybook/theming": "7.0.0-alpha.31", "babel-loader": "^8.2.5", - "core-js": "^3.8.2", "dequal": "^2.0.2", "global": "^4.4.0", "lodash": "^4.17.21", @@ -104,7 +103,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a", + "gitHead": "02c013c33186479017098d532a18ff8654b91f1f", "storybook": { "displayName": "Docs", "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png", diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts index 7a7ae8b2d97..9516671597c 100644 --- a/code/addons/docs/src/preset.ts +++ b/code/addons/docs/src/preset.ts @@ -145,7 +145,7 @@ export async function webpack( export const storyIndexers = async (indexers: StoryIndexer[] | null) => { const mdxIndexer = async (fileName: string, opts: IndexerOptions) => { let code = (await fs.readFile(fileName, 'utf-8')).toString(); - // @ts-ignore + // @ts-expect-error (Converted from ts-ignore) const { compile } = global.FEATURES?.previewMdx2 ? await import('@storybook/mdx2-csf') : await import('@storybook/mdx1-csf'); diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index 73167de5b5b..7fc695f34dd 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "7.0.0-alpha.23", + "version": "7.0.0-alpha.31", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", @@ -30,28 +30,27 @@ ], "scripts": { "check": "tsc --noEmit", - "prepare": "node ../../../scripts/prepare.js" + "prep": "node ../../../scripts/prepare.js" }, "dependencies": { - "@storybook/addon-actions": "7.0.0-alpha.23", - "@storybook/addon-backgrounds": "7.0.0-alpha.23", - "@storybook/addon-controls": "7.0.0-alpha.23", - "@storybook/addon-docs": "7.0.0-alpha.23", - "@storybook/addon-highlight": "7.0.0-alpha.23", - "@storybook/addon-measure": "7.0.0-alpha.23", - "@storybook/addon-outline": "7.0.0-alpha.23", - "@storybook/addon-toolbars": "7.0.0-alpha.23", - "@storybook/addon-viewport": "7.0.0-alpha.23", - "@storybook/addons": "7.0.0-alpha.23", - "@storybook/api": "7.0.0-alpha.23", - "@storybook/core-common": "7.0.0-alpha.23", - "@storybook/node-logger": "7.0.0-alpha.23", - "core-js": "^3.8.2", + "@storybook/addon-actions": "7.0.0-alpha.31", + "@storybook/addon-backgrounds": "7.0.0-alpha.31", + "@storybook/addon-controls": "7.0.0-alpha.31", + "@storybook/addon-docs": "7.0.0-alpha.31", + "@storybook/addon-highlight": "7.0.0-alpha.31", + "@storybook/addon-measure": "7.0.0-alpha.31", + "@storybook/addon-outline": "7.0.0-alpha.31", + "@storybook/addon-toolbars": "7.0.0-alpha.31", + "@storybook/addon-viewport": "7.0.0-alpha.31", + "@storybook/addons": "7.0.0-alpha.31", + "@storybook/api": "7.0.0-alpha.31", + "@storybook/core-common": "7.0.0-alpha.31", + "@storybook/node-logger": "7.0.0-alpha.31", "ts-dedent": "^2.0.0" }, "devDependencies": { "@babel/core": "^7.12.10", - "@storybook/vue": "7.0.0-alpha.23", + "@storybook/vue": "7.0.0-alpha.31", "@types/jest": "^26.0.16", "typescript": "~4.6.3" }, @@ -99,5 +98,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a" + "gitHead": "02c013c33186479017098d532a18ff8654b91f1f" } diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index 0a9290701a2..d0df2b389a6 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "7.0.0-alpha.23", + "version": "7.0.0-alpha.31", "description": "Highlight DOM nodes within your stories", "keywords": [ "storybook-addons", @@ -34,12 +34,11 @@ ], "scripts": { "check": "tsc --noEmit", - "prepare": "node ../../../scripts/prepare.js" + "prep": "node ../../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.23", - "@storybook/core-events": "7.0.0-alpha.23", - "core-js": "^3.8.2", + "@storybook/addons": "7.0.0-alpha.31", + "@storybook/core-events": "7.0.0-alpha.31", "global": "^4.4.0" }, "devDependencies": { @@ -49,7 +48,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a", + "gitHead": "02c013c33186479017098d532a18ff8654b91f1f", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Highlight", diff --git a/code/addons/interactions/manager.js b/code/addons/interactions/manager.js index 4e287d25b15..8a2eae4ffce 100644 --- a/code/addons/interactions/manager.js +++ b/code/addons/interactions/manager.js @@ -1 +1 @@ -import './dist/esm/manager'; +import './dist/manager'; diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index 785d41066ad..c34b86f6ee1 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "7.0.0-alpha.23", + "version": "7.0.0-alpha.31", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", @@ -21,9 +21,32 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", - "main": "dist/cjs/index.js", - "module": "dist/esm/index.js", - "types": "dist/types/index.d.ts", + "exports": { + ".": { + "require": "./dist/index.js", + "import": "./dist/index.mjs", + "types": "./dist/index.d.ts" + }, + "./manager": { + "require": "./dist/manager.js", + "import": "./dist/manager.mjs", + "types": "./dist/manager.d.ts" + }, + "./preview": { + "require": "./dist/preset/preview.js", + "import": "./dist/preset/preview.mjs", + "types": "./dist/preset/preview.d.ts" + }, + "./register.js": { + "require": "./dist/manager.js", + "import": "./dist/manager.mjs", + "types": "./dist/manager.d.ts" + }, + "./package.json": "./package.json" + }, + "main": "dist/index.js", + "module": "dist/index.mjs", + "types": "dist/index.d.ts", "files": [ "dist/**/*", "README.md", @@ -32,20 +55,19 @@ ], "scripts": { "check": "tsc --noEmit", - "prepare": "node ../../../scripts/prepare.js" + "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { "@devtools-ds/object-inspector": "^1.1.2", - "@storybook/addons": "7.0.0-alpha.23", - "@storybook/api": "7.0.0-alpha.23", - "@storybook/client-logger": "7.0.0-alpha.23", - "@storybook/components": "7.0.0-alpha.23", - "@storybook/core-common": "7.0.0-alpha.23", - "@storybook/core-events": "7.0.0-alpha.23", + "@storybook/addons": "7.0.0-alpha.31", + "@storybook/api": "7.0.0-alpha.31", + "@storybook/client-logger": "7.0.0-alpha.31", + "@storybook/components": "7.0.0-alpha.31", + "@storybook/core-common": "7.0.0-alpha.31", + "@storybook/core-events": "7.0.0-alpha.31", "@storybook/csf": "0.0.2--canary.0899bb7.0", - "@storybook/instrumenter": "7.0.0-alpha.23", - "@storybook/theming": "7.0.0-alpha.23", - "core-js": "^3.8.2", + "@storybook/instrumenter": "7.0.0-alpha.31", + "@storybook/theming": "7.0.0-alpha.31", "global": "^4.4.0", "jest-mock": "^27.0.6", "polished": "^4.2.2", @@ -72,7 +94,14 @@ "publishConfig": { "access": "public" }, - "gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a", + "bundler": { + "entries": [ + "./src/index.ts", + "./src/manager.tsx", + "./src/preset/preview.ts" + ] + }, + "gitHead": "02c013c33186479017098d532a18ff8654b91f1f", "storybook": { "displayName": "Interactions", "unsupportedFrameworks": [ diff --git a/code/addons/interactions/preview.js b/code/addons/interactions/preview.js index 7817e1d278d..48714cc6fba 100644 --- a/code/addons/interactions/preview.js +++ b/code/addons/interactions/preview.js @@ -1 +1 @@ -export * from './dist/esm/preset/preview'; +export * from './dist/preset/preview'; diff --git a/code/addons/interactions/src/components/InteractionsPanel.stories.tsx b/code/addons/interactions/src/components/InteractionsPanel.stories.tsx index 3c618898578..e71744d38be 100644 --- a/code/addons/interactions/src/components/InteractionsPanel.stories.tsx +++ b/code/addons/interactions/src/components/InteractionsPanel.stories.tsx @@ -1,6 +1,5 @@ /* eslint-disable jest/no-standalone-expect */ import React from 'react'; -import { action } from '@storybook/addon-actions'; import type { ComponentStoryObj, ComponentMeta } from '@storybook/react'; import { CallStates } from '@storybook/instrumenter'; import { styled } from '@storybook/theming'; @@ -48,7 +47,7 @@ export default { fileName: 'addon-interactions.stories.tsx', hasException: false, isPlaying: false, - onScrollToEnd: action('onScrollToEnd'), + onScrollToEnd: () => {}, endRef: null, // prop for the AddonPanel used as wrapper of Panel active: true, diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index df0006d8a35..0c97d98fffd 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "7.0.0-alpha.23", + "version": "7.0.0-alpha.31", "description": "React storybook addon that show component jest report", "keywords": [ "addon", @@ -38,7 +38,7 @@ "import": "./dist/manager.mjs", "types": "./dist/manager.d.ts" }, - "./register.js": { + "./register": { "require": "./dist/manager.js", "import": "./dist/manager.mjs", "types": "./dist/manager.d.ts" @@ -56,16 +56,15 @@ ], "scripts": { "check": "tsc --noEmit", - "prepare": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.23", - "@storybook/api": "7.0.0-alpha.23", - "@storybook/client-logger": "7.0.0-alpha.23", - "@storybook/components": "7.0.0-alpha.23", - "@storybook/core-events": "7.0.0-alpha.23", - "@storybook/theming": "7.0.0-alpha.23", - "core-js": "^3.8.2", + "@storybook/addons": "7.0.0-alpha.31", + "@storybook/api": "7.0.0-alpha.31", + "@storybook/client-logger": "7.0.0-alpha.31", + "@storybook/components": "7.0.0-alpha.31", + "@storybook/core-events": "7.0.0-alpha.31", + "@storybook/theming": "7.0.0-alpha.31", "global": "^4.4.0", "react-sizeme": "^3.0.1", "upath": "^1.2.0" @@ -95,7 +94,7 @@ ], "platform": "browser" }, - "gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a", + "gitHead": "02c013c33186479017098d532a18ff8654b91f1f", "storybook": { "displayName": "Jest", "icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg", diff --git a/code/addons/jest/src/shared.test.ts b/code/addons/jest/src/shared.test.ts index db9ab09050c..e051f4563f6 100644 --- a/code/addons/jest/src/shared.test.ts +++ b/code/addons/jest/src/shared.test.ts @@ -27,7 +27,7 @@ describe('defineJestParameter', () => { }); test('returns null if filename is a module ID that cannot be inferred from', () => { - // @ts-ignore + // @ts-expect-error (Converted from ts-ignore) expect(defineJestParameter({ fileName: 1234 })).toBeNull(); }); }); diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 8ef24d9900a..beb804d1ca0 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "7.0.0-alpha.23", + "version": "7.0.0-alpha.31", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "addon", @@ -42,7 +42,7 @@ "import": "./dist/react/index.mjs", "types": "./dist/react.d.ts" }, - "./register.js": { + "./register": { "require": "./dist/manager.js", "import": "./dist/manager.mjs", "types": "./dist/manager.d.ts" @@ -60,15 +60,14 @@ ], "scripts": { "check": "tsc --noEmit", - "prepare": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.23", - "@storybook/client-logger": "7.0.0-alpha.23", - "@storybook/core-events": "7.0.0-alpha.23", + "@storybook/addons": "7.0.0-alpha.31", + "@storybook/client-logger": "7.0.0-alpha.31", + "@storybook/core-events": "7.0.0-alpha.31", "@storybook/csf": "0.0.2--canary.0899bb7.0", - "@storybook/router": "7.0.0-alpha.23", - "core-js": "^3.8.2", + "@storybook/router": "7.0.0-alpha.31", "global": "^4.4.0", "prop-types": "^15.7.2", "ts-dedent": "^2.0.0" @@ -99,7 +98,7 @@ "./src/react/index.ts" ] }, - "gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a", + "gitHead": "02c013c33186479017098d532a18ff8654b91f1f", "storybook": { "displayName": "Links", "icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png", diff --git a/code/addons/links/src/react/components/link.test.tsx b/code/addons/links/src/react/components/link.test.tsx index b2e75887549..4d79589adbd 100644 --- a/code/addons/links/src/react/components/link.test.tsx +++ b/code/addons/links/src/react/components/link.test.tsx @@ -14,7 +14,7 @@ jest.mock('global', () => ({ search: 'search', }, }, - // @ts-ignore + // @ts-expect-error (Converted from ts-ignore) window: global, __STORYBOOK_STORY_STORE__: { getSelection: jest.fn(() => ({ id: 1 })), diff --git a/code/addons/links/src/utils.test.ts b/code/addons/links/src/utils.test.ts index fb2126018bf..26bdb4b2a83 100644 --- a/code/addons/links/src/utils.test.ts +++ b/code/addons/links/src/utils.test.ts @@ -5,9 +5,9 @@ import { linkTo, hrefTo } from './utils'; jest.mock('@storybook/addons'); jest.mock('global', () => ({ - // @ts-ignore + // @ts-expect-error (Converted from ts-ignore) document: global.document, - // @ts-ignore + // @ts-expect-error (Converted from ts-ignore) window: global, })); diff --git a/code/addons/links/src/utils.ts b/code/addons/links/src/utils.ts index 8b4adef0bf3..be551a89645 100644 --- a/code/addons/links/src/utils.ts +++ b/code/addons/links/src/utils.ts @@ -36,9 +36,9 @@ export const hrefTo = (title: ComponentTitle, name: StoryName): Promise return new Promise((resolve) => { const { location } = document; const query = parseQuery(location.search); - // @ts-ignore + // @ts-expect-error (Converted from ts-ignore) const existingId = [].concat(query.id)[0]; - // @ts-ignore + // @ts-expect-error (Converted from ts-ignore) const titleToLink = title || existingId.split('--', 2)[0]; const id = toId(titleToLink, name); const url = `${location.origin + location.pathname}?${Object.entries({ ...query, id }) diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index d282049ee85..8bb45d78a85 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "7.0.0-alpha.23", + "version": "7.0.0-alpha.31", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", @@ -40,7 +40,7 @@ "import": "./dist/preview.mjs", "types": "./dist/preview.d.ts" }, - "./register.js": { + "./register": { "require": "./dist/manager.js", "import": "./dist/manager.mjs", "types": "./dist/manager.d.ts" @@ -58,16 +58,15 @@ ], "scripts": { "check": "tsc --noEmit", - "prepare": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.23", - "@storybook/api": "7.0.0-alpha.23", - "@storybook/client-logger": "7.0.0-alpha.23", - "@storybook/components": "7.0.0-alpha.23", - "@storybook/core-events": "7.0.0-alpha.23", + "@storybook/addons": "7.0.0-alpha.31", + "@storybook/api": "7.0.0-alpha.31", + "@storybook/client-logger": "7.0.0-alpha.31", + "@storybook/components": "7.0.0-alpha.31", + "@storybook/core-events": "7.0.0-alpha.31", "@storybook/csf": "0.0.2--canary.0899bb7.0", - "core-js": "^3.8.2", "global": "^4.4.0" }, "devDependencies": { @@ -95,7 +94,7 @@ "./src/preview.tsx" ] }, - "gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a", + "gitHead": "02c013c33186479017098d532a18ff8654b91f1f", "storybook": { "displayName": "Measure", "unsupportedFrameworks": [ diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index 252956864af..42c951e590e 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "7.0.0-alpha.23", + "version": "7.0.0-alpha.31", "description": "Outline all elements with CSS to help with layout placement and alignment", "keywords": [ "storybook-addons", @@ -43,7 +43,7 @@ "import": "./dist/preset/preview.mjs", "types": "./dist/preview.d.ts" }, - "./register.js": { + "./register": { "require": "./dist/manager.js", "import": "./dist/manager.mjs", "types": "./dist/manager.d.ts" @@ -61,16 +61,15 @@ ], "scripts": { "check": "tsc --noEmit", - "prepare": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.23", - "@storybook/api": "7.0.0-alpha.23", - "@storybook/client-logger": "7.0.0-alpha.23", - "@storybook/components": "7.0.0-alpha.23", - "@storybook/core-events": "7.0.0-alpha.23", + "@storybook/addons": "7.0.0-alpha.31", + "@storybook/api": "7.0.0-alpha.31", + "@storybook/client-logger": "7.0.0-alpha.31", + "@storybook/components": "7.0.0-alpha.31", + "@storybook/core-events": "7.0.0-alpha.31", "@storybook/csf": "0.0.2--canary.0899bb7.0", - "core-js": "^3.8.2", "global": "^4.4.0", "ts-dedent": "^2.0.0" }, @@ -99,7 +98,7 @@ "./src/preset/preview.tsx" ] }, - "gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a", + "gitHead": "02c013c33186479017098d532a18ff8654b91f1f", "storybook": { "displayName": "Outline", "unsupportedFrameworks": [ diff --git a/code/addons/storyshots/storyshots-core/package.json b/code/addons/storyshots/storyshots-core/package.json index af13f0ae8f0..2ff27afe426 100644 --- a/code/addons/storyshots/storyshots-core/package.json +++ b/code/addons/storyshots/storyshots-core/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storyshots", - "version": "7.0.0-alpha.23", + "version": "7.0.0-alpha.31", "description": "Take a code snapshot of every story automatically with Jest", "keywords": [ "addon", @@ -33,17 +33,17 @@ "scripts": { "build-storybook": "sb build", "example": "jest storyshot.test", - "prepare": "node ../../../../scripts/prepare.js", + "prep": "node ../../../../scripts/prepare.js", "storybook": "yarn sb dev -p 6006" }, "dependencies": { "@jest/transform": "^26.6.2", - "@storybook/addons": "7.0.0-alpha.23", + "@storybook/addons": "7.0.0-alpha.31", "@storybook/babel-plugin-require-context-hook": "1.0.1", - "@storybook/client-api": "7.0.0-alpha.23", - "@storybook/core-client": "7.0.0-alpha.23", - "@storybook/core-common": "7.0.0-alpha.23", - "@storybook/core-webpack": "7.0.0-alpha.23", + "@storybook/client-api": "7.0.0-alpha.31", + "@storybook/core-client": "7.0.0-alpha.31", + "@storybook/core-common": "7.0.0-alpha.31", + "@storybook/core-webpack": "7.0.0-alpha.31", "@storybook/csf": "0.0.2--canary.0899bb7.0", "@types/glob": "^7.1.3", "@types/jest": "^26.0.16", @@ -62,11 +62,11 @@ "@angular/core": "^13.3.6", "@angular/platform-browser-dynamic": "^13.3.6", "@emotion/jest": "^11.8.0", - "@storybook/addon-docs": "7.0.0-alpha.23", - "@storybook/angular": "7.0.0-alpha.23", - "@storybook/react": "7.0.0-alpha.23", - "@storybook/vue": "7.0.0-alpha.23", - "@storybook/vue3": "7.0.0-alpha.23", + "@storybook/addon-docs": "7.0.0-alpha.31", + "@storybook/angular": "7.0.0-alpha.31", + "@storybook/react": "7.0.0-alpha.31", + "@storybook/vue": "7.0.0-alpha.31", + "@storybook/vue3": "7.0.0-alpha.31", "babel-loader": "^8.2.5", "enzyme": "^3.11.0", "enzyme-to-json": "^3.6.1", @@ -144,7 +144,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a", + "gitHead": "02c013c33186479017098d532a18ff8654b91f1f", "storybook": { "displayName": "Storyshots", "icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png", diff --git a/code/addons/storyshots/storyshots-core/src/api/ensureOptionsDefaults.ts b/code/addons/storyshots/storyshots-core/src/api/ensureOptionsDefaults.ts index 25adf62c834..c5e01ed7afe 100644 --- a/code/addons/storyshots/storyshots-core/src/api/ensureOptionsDefaults.ts +++ b/code/addons/storyshots/storyshots-core/src/api/ensureOptionsDefaults.ts @@ -25,7 +25,6 @@ function getIntegrityOptions({ integrityOptions }: StoryshotsOptions) { }; } -// @ts-ignore function ensureOptionsDefaults(options: StoryshotsOptions) { const { suite = 'Storyshots', diff --git a/code/addons/storyshots/storyshots-core/src/api/integrityTestTemplate.ts b/code/addons/storyshots/storyshots-core/src/api/integrityTestTemplate.ts index d2b13d5e958..b4fb63b582f 100644 --- a/code/addons/storyshots/storyshots-core/src/api/integrityTestTemplate.ts +++ b/code/addons/storyshots/storyshots-core/src/api/integrityTestTemplate.ts @@ -52,7 +52,7 @@ function integrityTest(integrityOptions: any, stories2snapsConverter: any) { const snapshotExtension = stories2snapsConverter.getSnapshotExtension(); const storyshots = glob.sync(`**/*${snapshotExtension}`, integrityOptions); - // @ts-ignore + // @ts-expect-error (Converted from ts-ignore) expect(storyshots).notToBeAbandoned(stories2snapsConverter); }); }); diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/riot/renderTree.ts b/code/addons/storyshots/storyshots-core/src/frameworks/riot/renderTree.ts index e44e181e241..c4f1ce24419 100644 --- a/code/addons/storyshots/storyshots-core/src/frameworks/riot/renderTree.ts +++ b/code/addons/storyshots/storyshots-core/src/frameworks/riot/renderTree.ts @@ -6,7 +6,7 @@ const riotForStorybook = jest.requireActual('@storybook/riot'); function bootstrapADocumentAndReturnANode() { const rootElement = document.createElement('div'); - rootElement.id = 'root'; + rootElement.id = 'storybook-root'; document.body = document.createElement('body'); document.body.appendChild(rootElement); return rootElement; diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/svelte/renderTree.ts b/code/addons/storyshots/storyshots-core/src/frameworks/svelte/renderTree.ts index cb073cd8287..f1bfb62a379 100644 --- a/code/addons/storyshots/storyshots-core/src/frameworks/svelte/renderTree.ts +++ b/code/addons/storyshots/storyshots-core/src/frameworks/svelte/renderTree.ts @@ -1,6 +1,5 @@ /* eslint-disable camelcase */ import global from 'global'; -// @ts-ignore import { set_current_component } from 'svelte/internal'; const { document } = global; diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/vue/renderTree.ts b/code/addons/storyshots/storyshots-core/src/frameworks/vue/renderTree.ts index edc7fe643ee..ac1f225ad7f 100644 --- a/code/addons/storyshots/storyshots-core/src/frameworks/vue/renderTree.ts +++ b/code/addons/storyshots/storyshots-core/src/frameworks/vue/renderTree.ts @@ -1,4 +1,3 @@ -// @ts-ignore import Vue from 'vue'; // this is defined in @storybook/vue but not exported, @@ -14,7 +13,7 @@ function getRenderedTree(story: any) { }, }); - // @ts-ignore + // @ts-expect-error (Converted from ts-ignore) vm[VALUES] = story.initialArgs; return vm.$mount().$el; diff --git a/code/addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js b/code/addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js index 222fac0b19c..5544d92516f 100644 --- a/code/addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js +++ b/code/addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js @@ -1,6 +1,5 @@ import React from 'react'; -import { action } from '@storybook/addon-actions'; import { Button } from '../react-demo'; export default { @@ -11,10 +10,10 @@ export default { }, }; -export const WithText = () => ; +export const WithText = () => ; export const WithSomeEmoji = () => ( - - - -`; - -exports[`Storyshots Addons/Actions Component Output with EventEmitter 1`] = ` - - - - - -`; - -exports[`Storyshots Addons/Actions Story with template 1`] = ` - - - -`; - -exports[`Storyshots Addons/Actions Use action in method 1`] = ` - - - - - -`; diff --git a/code/examples/angular-cli/src/stories/addons/actions/addon-actions.stories.ts b/code/examples/angular-cli/src/stories/addons/actions/addon-actions.stories.ts deleted file mode 100644 index e262e4d1f05..00000000000 --- a/code/examples/angular-cli/src/stories/addons/actions/addon-actions.stories.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { action } from '@storybook/addon-actions'; -import { Meta, StoryFn } from '@storybook/angular'; -import { Button } from '../../angular-demo'; - -export default { - component: Button, - title: 'Addons/Actions', -} as Meta; - -export const ComponentOutputWithEventEmitter: StoryFn = () => ({ - props: { - text: 'Button 🥁', - onClick: action('On click'), - }, -}); -ComponentOutputWithEventEmitter.storyName = 'Component Output with EventEmitter'; - -export const UseActionInMethod: StoryFn = () => ({ - props: { - text: 'Button 🥁', - onClick: (e) => { - console.log(e); - e.preventDefault(); - action('Action name')(e.target, 'Another arg'); - }, - }, -}); -UseActionInMethod.storyName = 'Use action in method'; - -export const StoryTemplate: StoryFn = () => ({ - template: ``, - props: { - onClick: action('On click'), - onOver: action('On over'), - }, -}); -StoryTemplate.storyName = 'Story with template'; - -export const ComponentOutputWithArgsTypes: StoryFn = (args) => ({ - props: { - text: 'Button 🥁', - ...args, - }, -}); -ComponentOutputWithArgsTypes.storyName = 'Component Output with ArgsTypes'; -ComponentOutputWithArgsTypes.argTypes = { onClick: { action: 'On click' } }; diff --git a/code/examples/angular-cli/src/stories/addons/backgrounds/__snapshots__/addon-background.stories.storyshot b/code/examples/angular-cli/src/stories/addons/backgrounds/__snapshots__/addon-background.stories.storyshot deleted file mode 100644 index 3a5cd4bec6f..00000000000 --- a/code/examples/angular-cli/src/stories/addons/backgrounds/__snapshots__/addon-background.stories.storyshot +++ /dev/null @@ -1,37 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Addons / Backgrounds Overridden 1`] = ` - - - - - -`; - -exports[`Storyshots Addons / Backgrounds With Component 1`] = ` - - - - - -`; - -exports[`Storyshots Addons / Backgrounds With Template 1`] = ` - - - - - -`; diff --git a/code/examples/angular-cli/src/stories/addons/backgrounds/addon-background.stories.ts b/code/examples/angular-cli/src/stories/addons/backgrounds/addon-background.stories.ts deleted file mode 100644 index fcf5527877d..00000000000 --- a/code/examples/angular-cli/src/stories/addons/backgrounds/addon-background.stories.ts +++ /dev/null @@ -1,38 +0,0 @@ -import type { Meta, StoryFn } from '@storybook/angular'; -import { Button } from '../../angular-demo'; - -export default { - title: 'Addons / Backgrounds', - component: Button, - parameters: { - backgrounds: { - default: 'twitter', - values: [ - { name: 'twitter', value: '#00aced' }, - { name: 'facebook', value: '#3b5998' }, - ], - }, - }, -} as Meta; - -export const WithComponent: StoryFn = () => ({ - props: { text: 'Button' }, -}); - -export const WithTemplate: StoryFn = () => ({ - template: ``, - props: { text: 'Button' }, -}); - -export const Overridden = () => ({ - props: { text: 'This one should have different backgrounds' }, -}); -Overridden.parameters = { - backgrounds: { - default: 'pink', - values: [ - { name: 'pink', value: 'hotpink' }, - { name: 'blue', value: 'deepskyblue' }, - ], - }, -}; diff --git a/code/examples/angular-cli/src/stories/addons/docs/simple.stories.mdx b/code/examples/angular-cli/src/stories/addons/docs/simple.stories.mdx index e5ff203bcbd..d60148f46b2 100644 --- a/code/examples/angular-cli/src/stories/addons/docs/simple.stories.mdx +++ b/code/examples/angular-cli/src/stories/addons/docs/simple.stories.mdx @@ -1,6 +1,5 @@ import { Story, Meta, ArgsTable, Source } from '@storybook/addon-docs'; import { Button } from '../.././angular-demo'; -import { action } from '@storybook/addon-actions'; @@ -21,7 +20,7 @@ import { action } from '@storybook/addon-actions'; {(args) => ({ props: { text: args.text, - onClick: action('clicked'), + onClick: () => {}, }, })} diff --git a/code/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts b/code/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts index d438e2cc08a..c23f4f49f1b 100644 --- a/code/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts +++ b/code/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts @@ -1,5 +1,4 @@ import { FormsModule } from '@angular/forms'; -import { action } from '@storybook/addon-actions'; import { moduleMetadata, Meta, StoryFn } from '@storybook/angular'; import { CustomCvaComponent } from './custom-cva.component'; @@ -21,7 +20,7 @@ export default { export const SimpleInput: StoryFn = () => ({ props: { ngModel: 'Type anything', - ngModelChange: action('ngModelChange'), + ngModelChange: () => {}, }, }); diff --git a/code/examples/angular-cli/src/stories/core/parameters/all-parameters.stories.ts b/code/examples/angular-cli/src/stories/core/parameters/all-parameters.stories.ts deleted file mode 100644 index 40f34ceafcd..00000000000 --- a/code/examples/angular-cli/src/stories/core/parameters/all-parameters.stories.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { addParameters } from '@storybook/angular'; -import type { Meta, StoryFn } from '@storybook/angular'; -import { Button } from '../../angular-demo'; - -const globalParameter = 'globalParameter'; -const chapterParameter = 'chapterParameter'; -const storyParameter = 'storyParameter'; - -addParameters({ globalParameter }); - -export default { - title: 'Core / Parameters / All parameters', - parameters: { - chapterParameter, - }, -} as Meta; - -export const PassedToStory: StoryFn = (_args, { parameters: { fileName, ...parameters } }) => ({ - component: Button, - props: { - text: `Parameters are ${JSON.stringify(parameters, null, 2)}`, - onClick: () => 0, - }, -}); - -PassedToStory.storyName = 'All parameters passed to story'; -PassedToStory.parameters = { storyParameter }; diff --git a/code/examples/angular-cli/src/stories/core/styles/story-styles.stories.ts b/code/examples/angular-cli/src/stories/core/styles/story-styles.stories.ts index 2d3d7f08737..a8fb561efc9 100644 --- a/code/examples/angular-cli/src/stories/core/styles/story-styles.stories.ts +++ b/code/examples/angular-cli/src/stories/core/styles/story-styles.stories.ts @@ -1,5 +1,4 @@ import { Meta, moduleMetadata, StoryFn } from '@storybook/angular'; -import { action } from '@storybook/addon-actions'; import { Button } from '../../angular-demo'; export default { @@ -15,7 +14,7 @@ export const TemplateStory: StoryFn = () => ({ template: ``, props: { text: 'Button with custom styles', - onClick: action('log'), + onClick: () => {}, }, styles: [ ` diff --git a/code/examples/cra-kitchen-sink/.storybook/main.ts b/code/examples/cra-kitchen-sink/.storybook/main.ts index 85ff96ef9f2..1d5e852f231 100644 --- a/code/examples/cra-kitchen-sink/.storybook/main.ts +++ b/code/examples/cra-kitchen-sink/.storybook/main.ts @@ -25,7 +25,7 @@ const mainConfig: StorybookConfig = { const resolvePlugins = config.resolve?.plugins; if (Array.isArray(resolvePlugins)) { resolvePlugins.forEach((p) => { - // @ts-ignore + // @ts-expect-error (Converted from ts-ignore) const appSrcs = p.appSrcs as unknown as string[]; if (Array.isArray(appSrcs)) { appSrcs.push(path.join(__dirname, '..', '..', '..')); diff --git a/code/examples/cra-kitchen-sink/package.json b/code/examples/cra-kitchen-sink/package.json index 303f8400475..f14d706a1d7 100644 --- a/code/examples/cra-kitchen-sink/package.json +++ b/code/examples/cra-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "cra-kitchen-sink", - "version": "7.0.0-alpha.23", + "version": "7.0.0-alpha.31", "private": true, "scripts": { "build": "react-scripts build", @@ -11,7 +11,7 @@ "test": "react-scripts test --env=jsdom" }, "dependencies": { - "@storybook/client-logger": "7.0.0-alpha.23", + "@storybook/client-logger": "7.0.0-alpha.31", "global": "^4.4.0", "prop-types": "^15.7.2", "react": "16.14.0", @@ -21,21 +21,21 @@ }, "devDependencies": { "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5", - "@storybook/addon-a11y": "7.0.0-alpha.23", - "@storybook/addon-actions": "7.0.0-alpha.23", - "@storybook/addon-backgrounds": "7.0.0-alpha.23", - "@storybook/addon-docs": "7.0.0-alpha.23", - "@storybook/addon-highlight": "7.0.0-alpha.23", - "@storybook/addon-jest": "7.0.0-alpha.23", - "@storybook/addon-links": "7.0.0-alpha.23", - "@storybook/addon-storyshots": "7.0.0-alpha.23", - "@storybook/addons": "7.0.0-alpha.23", - "@storybook/builder-webpack5": "7.0.0-alpha.23", + "@storybook/addon-a11y": "7.0.0-alpha.31", + "@storybook/addon-actions": "7.0.0-alpha.31", + "@storybook/addon-backgrounds": "7.0.0-alpha.31", + "@storybook/addon-docs": "7.0.0-alpha.31", + "@storybook/addon-highlight": "7.0.0-alpha.31", + "@storybook/addon-jest": "7.0.0-alpha.31", + "@storybook/addon-links": "7.0.0-alpha.31", + "@storybook/addon-storyshots": "7.0.0-alpha.31", + "@storybook/addons": "7.0.0-alpha.31", + "@storybook/builder-webpack5": "7.0.0-alpha.31", "@storybook/preset-create-react-app": "^4.1.0", - "@storybook/react": "7.0.0-alpha.23", - "@storybook/react-webpack5": "7.0.0-alpha.23", - "@storybook/theming": "7.0.0-alpha.23", - "storybook": "7.0.0-alpha.23", + "@storybook/react": "7.0.0-alpha.31", + "@storybook/react-webpack5": "7.0.0-alpha.31", + "@storybook/theming": "7.0.0-alpha.31", + "storybook": "7.0.0-alpha.31", "webpack": "5" }, "storybook": { diff --git a/code/examples/cra-kitchen-sink/src/stories/button.stories.js b/code/examples/cra-kitchen-sink/src/stories/button.stories.js index 030fcde029c..20d13f8770c 100644 --- a/code/examples/cra-kitchen-sink/src/stories/button.stories.js +++ b/code/examples/cra-kitchen-sink/src/stories/button.stories.js @@ -1,5 +1,4 @@ import React from 'react'; -import { action } from '@storybook/addon-actions'; import { Button } from '../components/react-demo'; export default { @@ -7,7 +6,7 @@ export default { component: Button, }; -export const Story1 = () => ; +export const Story1 = () => ; Story1.storyName = 'with text'; Story1.parameters = { @@ -15,7 +14,7 @@ Story1.parameters = { }; export const Story2 = () => ( - ; - -export const Nested = (args) => ( - -); -Nested.args = { onClick: action('clicked', { depth: 1 }) }; diff --git a/code/examples/cra-kitchen-sink/src/stories/long-description.stories.js b/code/examples/cra-kitchen-sink/src/stories/long-description.stories.js index 7f3d794c7f3..7fd35cd5122 100644 --- a/code/examples/cra-kitchen-sink/src/stories/long-description.stories.js +++ b/code/examples/cra-kitchen-sink/src/stories/long-description.stories.js @@ -1,10 +1,9 @@ import React from 'react'; -import { action } from '@storybook/addon-actions'; import { Button } from '../components/react-demo'; export default { title: 'Some really long story kind description', }; -export const Story1 = () => ; +export const Story1 = () => ; Story1.storyName = 'with text'; diff --git a/code/examples/cra-ts-essentials/.storybook/main.ts b/code/examples/cra-ts-essentials/.storybook/main.ts index 8a4882ff3aa..77cba3e12bc 100644 --- a/code/examples/cra-ts-essentials/.storybook/main.ts +++ b/code/examples/cra-ts-essentials/.storybook/main.ts @@ -20,7 +20,7 @@ const mainConfig: StorybookConfig = { const resolvePlugins = config.resolve?.plugins; if (Array.isArray(resolvePlugins)) { resolvePlugins.forEach((p) => { - // @ts-ignore + // @ts-expect-error (Converted from ts-ignore) const appSrcs = p.appSrcs as unknown as string[]; if (Array.isArray(appSrcs)) { appSrcs.push(path.join(__dirname, '..', '..', '..')); diff --git a/code/examples/cra-ts-essentials/package.json b/code/examples/cra-ts-essentials/package.json index 3895ad5c3c5..df090383e69 100644 --- a/code/examples/cra-ts-essentials/package.json +++ b/code/examples/cra-ts-essentials/package.json @@ -1,6 +1,6 @@ { "name": "cra-ts-essentials", - "version": "7.0.0-alpha.23", + "version": "7.0.0-alpha.31", "private": true, "scripts": { "build": "react-scripts build", @@ -23,8 +23,8 @@ ] }, "dependencies": { - "@storybook/components": "7.0.0-alpha.23", - "@storybook/theming": "7.0.0-alpha.23", + "@storybook/components": "7.0.0-alpha.31", + "@storybook/theming": "7.0.0-alpha.31", "@types/jest": "^26.0.16", "@types/node": "^14.14.20 || ^16.0.0", "@types/react": "^16.14.23", @@ -37,15 +37,15 @@ "typescript": "~4.6.3" }, "devDependencies": { - "@storybook/addon-essentials": "7.0.0-alpha.23", - "@storybook/addon-interactions": "7.0.0-alpha.23", - "@storybook/addons": "7.0.0-alpha.23", - "@storybook/builder-webpack5": "7.0.0-alpha.23", + "@storybook/addon-essentials": "7.0.0-alpha.31", + "@storybook/addon-interactions": "7.0.0-alpha.31", + "@storybook/addons": "7.0.0-alpha.31", + "@storybook/builder-webpack5": "7.0.0-alpha.31", "@storybook/preset-create-react-app": "^4.1.0", - "@storybook/react": "7.0.0-alpha.23", - "@storybook/react-webpack5": "7.0.0-alpha.23", + "@storybook/react": "7.0.0-alpha.31", + "@storybook/react-webpack5": "7.0.0-alpha.31", "@storybook/testing-library": "^0.0.9", - "storybook": "7.0.0-alpha.23", + "storybook": "7.0.0-alpha.31", "ts-node": "^10.4.0", "webpack": "5" }, diff --git a/code/examples/cra-ts-kitchen-sink/.storybook/main.ts b/code/examples/cra-ts-kitchen-sink/.storybook/main.ts index 471226181de..aace39ecad7 100644 --- a/code/examples/cra-ts-kitchen-sink/.storybook/main.ts +++ b/code/examples/cra-ts-kitchen-sink/.storybook/main.ts @@ -20,7 +20,7 @@ const mainConfig: StorybookConfig = { const resolvePlugins = config.resolve?.plugins; if (Array.isArray(resolvePlugins)) { resolvePlugins.forEach((p) => { - // @ts-ignore + // @ts-expect-error (Converted from ts-ignore) const appSrcs = p.appSrcs as unknown as string[]; if (Array.isArray(appSrcs)) { appSrcs.push(path.join(__dirname, '..', '..', '..')); diff --git a/code/examples/cra-ts-kitchen-sink/package.json b/code/examples/cra-ts-kitchen-sink/package.json index 3a8ba5bc97d..50acf5d07ea 100644 --- a/code/examples/cra-ts-kitchen-sink/package.json +++ b/code/examples/cra-ts-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "cra-ts-kitchen-sink", - "version": "7.0.0-alpha.23", + "version": "7.0.0-alpha.31", "private": true, "scripts": { "build": "react-scripts build", @@ -34,23 +34,23 @@ "typescript": "~4.6.3" }, "devDependencies": { - "@storybook/addon-a11y": "7.0.0-alpha.23", - "@storybook/addon-actions": "7.0.0-alpha.23", - "@storybook/addon-docs": "7.0.0-alpha.23", - "@storybook/addon-highlight": "7.0.0-alpha.23", - "@storybook/addon-links": "7.0.0-alpha.23", - "@storybook/addons": "7.0.0-alpha.23", - "@storybook/builder-webpack5": "7.0.0-alpha.23", + "@storybook/addon-a11y": "7.0.0-alpha.31", + "@storybook/addon-actions": "7.0.0-alpha.31", + "@storybook/addon-docs": "7.0.0-alpha.31", + "@storybook/addon-highlight": "7.0.0-alpha.31", + "@storybook/addon-links": "7.0.0-alpha.31", + "@storybook/addons": "7.0.0-alpha.31", + "@storybook/builder-webpack5": "7.0.0-alpha.31", "@storybook/preset-create-react-app": "^4.1.0", - "@storybook/react": "7.0.0-alpha.23", - "@storybook/react-webpack5": "7.0.0-alpha.23", + "@storybook/react": "7.0.0-alpha.31", + "@storybook/react-webpack5": "7.0.0-alpha.31", "@types/enzyme": "^3.10.8", "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.9.1", "enzyme-to-json": "^3.6.1", "fork-ts-checker-webpack-plugin": "^7.2.6", "react-moment-proptypes": "^1.7.0", - "storybook": "7.0.0-alpha.23", + "storybook": "7.0.0-alpha.31", "ts-node": "^10.4.0", "webpack": "5" }, diff --git a/code/examples/cra-ts-kitchen-sink/src/components/Button.stories.tsx b/code/examples/cra-ts-kitchen-sink/src/components/Button.stories.tsx index a13b3e24399..677c00b7721 100644 --- a/code/examples/cra-ts-kitchen-sink/src/components/Button.stories.tsx +++ b/code/examples/cra-ts-kitchen-sink/src/components/Button.stories.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import { action } from '@storybook/addon-actions'; import Button, { Type } from './Button'; export default { @@ -9,7 +8,7 @@ export default { export const SimpleButton = () => { const x = 0; - return ; + return ; }; const typeOptions = { diff --git a/code/examples/cra-ts-kitchen-sink/src/stories/1-Button.stories.tsx b/code/examples/cra-ts-kitchen-sink/src/stories/1-Button.stories.tsx index 6b9a2d25e80..df60c8e704a 100644 --- a/code/examples/cra-ts-kitchen-sink/src/stories/1-Button.stories.tsx +++ b/code/examples/cra-ts-kitchen-sink/src/stories/1-Button.stories.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import { action } from '@storybook/addon-actions'; import { Button } from './Button'; export default { @@ -7,10 +6,10 @@ export default { component: Button, }; -export const Text = () => ; +export const Text = () => ; export const Emoji = () => ( - ); ButtonReactFC.defaultProps = { - // @ts-ignore onClick: null, }; @@ -26,7 +25,6 @@ export const ButtonFC: FC = ({ onClick, children }) => ( ); ButtonFC.defaultProps = { - // @ts-ignore onClick: null, }; @@ -37,6 +35,5 @@ export const ButtonFunctionComponent: FC = ({ onClick, children }) ); ButtonFunctionComponent.defaultProps = { - // @ts-ignore onClick: null, }; diff --git a/code/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/ext.js b/code/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/ext.js index 047b6b362bd..11d0ad4810b 100644 --- a/code/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/ext.js +++ b/code/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/ext.js @@ -1,4 +1,4 @@ -// @ts-ignore +// @ts-expect-error (Converted from ts-ignore) import PropTypes from 'prop-types'; export const PRESET_SHAPE = { diff --git a/code/examples/doc-blocks/.storybook/main.ts b/code/examples/doc-blocks/.storybook/main.ts index 4f50d98e6f6..0e8ffacb423 100644 --- a/code/examples/doc-blocks/.storybook/main.ts +++ b/code/examples/doc-blocks/.storybook/main.ts @@ -8,10 +8,6 @@ const config: StorybookConfig = { channelOptions: { allowFunction: false, maxDepth: 10 }, disableTelemetry: true, }, - typescript: { - check: true, - checkOptions: {}, - }, features: { postcss: false, storyStoreV7: true, diff --git a/code/examples/doc-blocks/package.json b/code/examples/doc-blocks/package.json index 492169197a8..b5d18781a75 100644 --- a/code/examples/doc-blocks/package.json +++ b/code/examples/doc-blocks/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/example-doc-blocks", - "version": "7.0.0-alpha.23", + "version": "7.0.0-alpha.31", "private": true, "scripts": { "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true sb build", @@ -15,20 +15,20 @@ "@babel/preset-env": "^7.12.11", "@babel/preset-react": "^7.12.10", "@babel/preset-typescript": "^7.12.7", - "@storybook/addon-essentials": "7.0.0-alpha.23", - "@storybook/addon-storyshots": "7.0.0-alpha.23", - "@storybook/addon-storysource": "7.0.0-alpha.23", - "@storybook/addons": "7.0.0-alpha.23", - "@storybook/cli": "7.0.0-alpha.23", - "@storybook/components": "7.0.0-alpha.23", - "@storybook/react-webpack5": "7.0.0-alpha.23", - "@storybook/theming": "7.0.0-alpha.23", + "@storybook/addon-essentials": "7.0.0-alpha.31", + "@storybook/addon-storyshots": "7.0.0-alpha.31", + "@storybook/addon-storysource": "7.0.0-alpha.31", + "@storybook/addons": "7.0.0-alpha.31", + "@storybook/cli": "7.0.0-alpha.31", + "@storybook/components": "7.0.0-alpha.31", + "@storybook/react-webpack5": "7.0.0-alpha.31", + "@storybook/theming": "7.0.0-alpha.31", "@types/babel__preset-env": "^7", "@types/react": "^16.14.23", "@types/react-dom": "^16.9.14", "cross-env": "^7.0.3", "lodash": "^4.17.21", - "sb": "7.0.0-alpha.23", + "sb": "7.0.0-alpha.31", "typescript": "~4.6.3", "webpack": "5" }, diff --git a/code/examples/ember-cli/package.json b/code/examples/ember-cli/package.json index c99dbe99691..476b80a0ab2 100644 --- a/code/examples/ember-cli/package.json +++ b/code/examples/ember-cli/package.json @@ -1,6 +1,6 @@ { "name": "ember-example", - "version": "7.0.0-alpha.23", + "version": "7.0.0-alpha.31", "private": true, "scripts": { "--build-storybook": "yarn storybook-prebuild && storybook build", @@ -17,19 +17,19 @@ "devDependencies": { "@babel/core": "^7.12.10", "@ember/optional-features": "^2.0.0", - "@storybook/addon-a11y": "7.0.0-alpha.23", - "@storybook/addon-actions": "7.0.0-alpha.23", - "@storybook/addon-backgrounds": "7.0.0-alpha.23", - "@storybook/addon-controls": "7.0.0-alpha.23", - "@storybook/addon-docs": "7.0.0-alpha.23", - "@storybook/addon-highlight": "7.0.0-alpha.23", - "@storybook/addon-links": "7.0.0-alpha.23", - "@storybook/addon-storysource": "7.0.0-alpha.23", - "@storybook/addon-viewport": "7.0.0-alpha.23", - "@storybook/addons": "7.0.0-alpha.23", - "@storybook/ember": "7.0.0-alpha.23", + "@storybook/addon-a11y": "7.0.0-alpha.31", + "@storybook/addon-actions": "7.0.0-alpha.31", + "@storybook/addon-backgrounds": "7.0.0-alpha.31", + "@storybook/addon-controls": "7.0.0-alpha.31", + "@storybook/addon-docs": "7.0.0-alpha.31", + "@storybook/addon-highlight": "7.0.0-alpha.31", + "@storybook/addon-links": "7.0.0-alpha.31", + "@storybook/addon-storysource": "7.0.0-alpha.31", + "@storybook/addon-viewport": "7.0.0-alpha.31", + "@storybook/addons": "7.0.0-alpha.31", + "@storybook/ember": "7.0.0-alpha.31", "@storybook/ember-cli-storybook": "^0.2.1", - "@storybook/source-loader": "7.0.0-alpha.23", + "@storybook/source-loader": "7.0.0-alpha.31", "babel-loader": "^8.2.5", "broccoli-asset-rev": "^3.0.0", "browserify-zlib": "^0.2.0", @@ -49,7 +49,7 @@ "loader.js": "^4.7.0", "os-browserify": "^0.3.0", "shx": "^0.3.2", - "storybook": "7.0.0-alpha.23", + "storybook": "7.0.0-alpha.31", "stream-browserify": "^3.0.0", "vm-browserify": "^1.1.2", "webpack": "5", diff --git a/code/examples/ember-cli/stories/addon-actions.stories.js b/code/examples/ember-cli/stories/addon-actions.stories.js deleted file mode 100644 index ce4b67a59ee..00000000000 --- a/code/examples/ember-cli/stories/addon-actions.stories.js +++ /dev/null @@ -1,18 +0,0 @@ -import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; - -export default { - title: 'Addon/Actions', - parameters: { - options: { - selectedPanel: 'storybook/actions/panel', - }, - }, -}; - -export const Button = () => ({ - template: hbs``, - context: { - onClick: action('clicked'), - }, -}); diff --git a/code/examples/ember-cli/stories/addon-backgrounds.stories.js b/code/examples/ember-cli/stories/addon-backgrounds.stories.js deleted file mode 100644 index 39d5848ce98..00000000000 --- a/code/examples/ember-cli/stories/addon-backgrounds.stories.js +++ /dev/null @@ -1,26 +0,0 @@ -import { hbs } from 'ember-cli-htmlbars'; - -export default { - title: 'Addon/Backgrounds', - parameters: { - backgrounds: { - default: 'dark', - values: [ - { name: 'light', value: '#eeeeee' }, - { name: 'dark', value: '#222222' }, - ], - }, - }, -}; - -export const Story1 = () => ({ - template: hbs``, -}); - -Story1.storyName = 'story 1'; - -export const Story2 = () => ({ - template: hbs``, -}); - -Story2.storyName = 'story 2'; diff --git a/code/examples/ember-cli/stories/welcome-banner.stories.js b/code/examples/ember-cli/stories/welcome-banner.stories.js index 1128476813e..516c90cb4af 100644 --- a/code/examples/ember-cli/stories/welcome-banner.stories.js +++ b/code/examples/ember-cli/stories/welcome-banner.stories.js @@ -1,5 +1,4 @@ import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; export default { title: 'welcome-banner', @@ -23,7 +22,6 @@ export const Basic = (args) => ({ subTitleColor=subTitleColor title=title subtitle=subtitle - click=(action onClick) }} `, context: args, @@ -34,5 +32,4 @@ Basic.args = { subTitleColor: '#B8854F', title: 'Welcome to storybook', subtitle: 'This environment is completely editable', - onClick: action('clicked'), }; diff --git a/code/examples/external-docs/package.json b/code/examples/external-docs/package.json index 414fc2fbf0e..df74f80233c 100644 --- a/code/examples/external-docs/package.json +++ b/code/examples/external-docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/external-docs", - "version": "7.0.0-alpha.23", + "version": "7.0.0-alpha.31", "private": true, "scripts": { "build": "next build", @@ -11,15 +11,15 @@ "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true storybook dev -p 9011 --no-manager-cache -c .storybook" }, "dependencies": { - "@storybook/addon-docs": "7.0.0-alpha.23", - "@storybook/addon-essentials": "7.0.0-alpha.23", - "@storybook/blocks": "7.0.0-alpha.23", - "@storybook/components": "7.0.0-alpha.23", + "@storybook/addon-docs": "7.0.0-alpha.31", + "@storybook/addon-essentials": "7.0.0-alpha.31", + "@storybook/blocks": "7.0.0-alpha.31", + "@storybook/components": "7.0.0-alpha.31", "@storybook/csf": "0.0.2--canary.0899bb7.0", - "@storybook/preview-web": "7.0.0-alpha.23", - "@storybook/react": "7.0.0-alpha.23", - "@storybook/react-webpack5": "7.0.0-alpha.23", - "@storybook/theming": "7.0.0-alpha.23", + "@storybook/preview-web": "7.0.0-alpha.31", + "@storybook/react": "7.0.0-alpha.31", + "@storybook/react-webpack5": "7.0.0-alpha.31", + "@storybook/theming": "7.0.0-alpha.31", "formik": "^2.2.9", "next": "^12.1.0", "nextra": "^1.1.0", @@ -38,7 +38,7 @@ "cross-env": "^7.0.3", "eslint": "8.7.0", "eslint-config-next": "12.0.8", - "storybook": "7.0.0-alpha.23", + "storybook": "7.0.0-alpha.31", "typescript": "~4.6.3", "webpack": "5" } diff --git a/code/examples/html-kitchen-sink/package.json b/code/examples/html-kitchen-sink/package.json index 260b27d95dc..f63521ed91a 100644 --- a/code/examples/html-kitchen-sink/package.json +++ b/code/examples/html-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "html-kitchen-sink", - "version": "7.0.0-alpha.23", + "version": "7.0.0-alpha.31", "private": true, "description": "", "keywords": [], @@ -13,31 +13,31 @@ "storybook": "storybook dev -p 9006 --no-manager-cache" }, "devDependencies": { - "@storybook/addon-a11y": "7.0.0-alpha.23", - "@storybook/addon-actions": "7.0.0-alpha.23", - "@storybook/addon-backgrounds": "7.0.0-alpha.23", - "@storybook/addon-controls": "7.0.0-alpha.23", - "@storybook/addon-docs": "7.0.0-alpha.23", - "@storybook/addon-highlight": "7.0.0-alpha.23", - "@storybook/addon-jest": "7.0.0-alpha.23", - "@storybook/addon-links": "7.0.0-alpha.23", + "@storybook/addon-a11y": "7.0.0-alpha.31", + "@storybook/addon-actions": "7.0.0-alpha.31", + "@storybook/addon-backgrounds": "7.0.0-alpha.31", + "@storybook/addon-controls": "7.0.0-alpha.31", + "@storybook/addon-docs": "7.0.0-alpha.31", + "@storybook/addon-highlight": "7.0.0-alpha.31", + "@storybook/addon-jest": "7.0.0-alpha.31", + "@storybook/addon-links": "7.0.0-alpha.31", "@storybook/addon-postcss": "^2.0.0", - "@storybook/addon-storyshots": "7.0.0-alpha.23", - "@storybook/addon-storysource": "7.0.0-alpha.23", - "@storybook/addon-viewport": "7.0.0-alpha.23", - "@storybook/addons": "7.0.0-alpha.23", - "@storybook/client-api": "7.0.0-alpha.23", - "@storybook/core-events": "7.0.0-alpha.23", - "@storybook/html": "7.0.0-alpha.23", - "@storybook/html-webpack5": "7.0.0-alpha.23", - "@storybook/source-loader": "7.0.0-alpha.23", + "@storybook/addon-storyshots": "7.0.0-alpha.31", + "@storybook/addon-storysource": "7.0.0-alpha.31", + "@storybook/addon-viewport": "7.0.0-alpha.31", + "@storybook/addons": "7.0.0-alpha.31", + "@storybook/client-api": "7.0.0-alpha.31", + "@storybook/core-events": "7.0.0-alpha.31", + "@storybook/html": "7.0.0-alpha.31", + "@storybook/html-webpack5": "7.0.0-alpha.31", + "@storybook/source-loader": "7.0.0-alpha.31", "autoprefixer": "^10.0.1", "eventemitter3": "^4.0.7", "format-json": "^1.0.3", "global": "^4.4.0", "postcss": "^8.2.4", "postcss-color-rebeccapurple": "^6.0.0", - "storybook": "7.0.0-alpha.23" + "storybook": "7.0.0-alpha.31" }, "storybook": { "chromatic": { diff --git a/code/examples/html-kitchen-sink/stories/addon-actions.stories.js b/code/examples/html-kitchen-sink/stories/addon-actions.stories.js deleted file mode 100644 index 1ed26062f38..00000000000 --- a/code/examples/html-kitchen-sink/stories/addon-actions.stories.js +++ /dev/null @@ -1,85 +0,0 @@ -import { withActions } from '@storybook/addon-actions'; - -const buttonStory = () => () => ``; - -export default { - title: 'Addons/Actions', -}; - -export const Story1 = buttonStory(); -Story1.storyName = 'Hello World'; - -Story1.parameters = { - actions: { - handles: ['click'], - }, -}; - -export const Story2 = buttonStory(); -Story2.storyName = 'Multiple actions'; - -Story2.parameters = { - actions: { - handles: ['click', 'contextmenu'], - }, -}; - -export const Story3 = buttonStory(); -Story3.storyName = 'Multiple actions + config'; - -Story3.parameters = { - actions: { - handles: ['click', 'contextmenu', { clearOnStoryChange: false }], - }, -}; - -export const Story4 = buttonStory(); -Story4.storyName = 'Multiple actions, object'; - -Story4.parameters = { - actions: { - handles: [{ click: 'clicked', contextmenu: 'right clicked' }], - }, -}; - -export const Story5 = () => ` -
- Clicks on this button will be logged: -
- `; -Story5.storyName = 'Multiple actions, selector'; - -Story5.parameters = { - actions: { - handles: [{ 'click .btn': 'clicked', contextmenu: 'right clicked' }], - }, -}; - -export const Story6 = buttonStory(); -Story6.storyName = 'Multiple actions, object + config'; - -Story6.parameters = { - actions: { - handles: [{ click: 'clicked', contextmenu: 'right clicked' }, { clearOnStoryChange: false }], - }, -}; - -export const DeprecatedDecoratorsStory1 = buttonStory(); -DeprecatedDecoratorsStory1.storyName = 'Deprecated decorators - Single action'; -DeprecatedDecoratorsStory1.decorators = [withActions('click')]; - -export const DeprecatedDecoratorsStory2 = buttonStory(); -DeprecatedDecoratorsStory2.storyName = 'Deprecated decorators - Multiple actions'; -DeprecatedDecoratorsStory2.decorators = [withActions('click', 'contextmenu')]; - -export const DeprecatedDecoratorsStory3 = buttonStory(); -DeprecatedDecoratorsStory3.storyName = 'Deprecated decorators - Multiple actions + config'; -DeprecatedDecoratorsStory3.decorators = [ - withActions('click', 'contextmenu', { clearOnStoryChange: false }), -]; - -export const DeprecatedDecoratorsStory4 = buttonStory(); -DeprecatedDecoratorsStory4.storyName = 'Deprecated decorators - Multiple actions, object'; -DeprecatedDecoratorsStory4.decorators = [ - withActions({ click: 'clicked', contextmenu: 'right clicked' }), -]; diff --git a/code/examples/html-kitchen-sink/stories/addon-backgrounds.stories.js b/code/examples/html-kitchen-sink/stories/addon-backgrounds.stories.js deleted file mode 100644 index 91b21d9d6c1..00000000000 --- a/code/examples/html-kitchen-sink/stories/addon-backgrounds.stories.js +++ /dev/null @@ -1,19 +0,0 @@ -export default { - title: 'Addons/Backgrounds', - parameters: { - backgrounds: { - default: 'dark', - values: [ - { name: 'light', value: '#eeeeee' }, - { name: 'dark', value: '#222222' }, - ], - }, - }, -}; - -export const Story1 = () => - 'You should be able to switch backgrounds for this story'; -Story1.storyName = 'story 1'; - -export const Story2 = () => 'This one too!'; -Story2.storyName = 'story 2'; diff --git a/code/examples/html-kitchen-sink/stories/addon-docs.stories.mdx b/code/examples/html-kitchen-sink/stories/addon-docs.stories.mdx index b844dc5e346..8ac0ce1377d 100644 --- a/code/examples/html-kitchen-sink/stories/addon-docs.stories.mdx +++ b/code/examples/html-kitchen-sink/stories/addon-docs.stories.mdx @@ -1,5 +1,4 @@ import { Story, Canvas, Meta } from '@storybook/addon-docs'; -import { action } from '@storybook/addon-actions'; # Storybook Docs for HTML @@ -20,7 +19,6 @@ How you like them apples?! {() => { const btn = document.createElement('button'); btn.innerHTML = 'Hello Button'; - btn.addEventListener('click', action('Click')); return btn; }} diff --git a/code/examples/html-kitchen-sink/stories/button.stories.js b/code/examples/html-kitchen-sink/stories/button.stories.js index 11aef877733..a8f079cafe0 100644 --- a/code/examples/html-kitchen-sink/stories/button.stories.js +++ b/code/examples/html-kitchen-sink/stories/button.stories.js @@ -1,5 +1,4 @@ import global from 'global'; -import { action } from '@storybook/addon-actions'; import { useEffect } from '@storybook/client-api'; const { document } = global; @@ -15,7 +14,6 @@ export const Headings = () => export const Button = () => { const btn = document.createElement('button'); btn.innerHTML = 'Hello Button'; - btn.addEventListener('click', action('Click')); return btn; }; diff --git a/code/examples/html-kitchen-sink/stories/loaders.stories.js b/code/examples/html-kitchen-sink/stories/loaders.stories.js deleted file mode 100644 index ae8b4616195..00000000000 --- a/code/examples/html-kitchen-sink/stories/loaders.stories.js +++ /dev/null @@ -1,7 +0,0 @@ -export default { - title: 'Core/Loaders', - loaders: [async () => new Promise((r) => setTimeout(() => r({ kindValue: 7 }), 3000))], -}; - -export const Story = (args, { loaded }) => - `
Loaded Value is ${JSON.stringify(loaded, null, 2)}
`; diff --git a/code/examples/official-storybook/main.ts b/code/examples/official-storybook/main.ts index 1634bf3e886..ad4819c63a8 100644 --- a/code/examples/official-storybook/main.ts +++ b/code/examples/official-storybook/main.ts @@ -3,10 +3,6 @@ import type { StorybookConfig } from '@storybook/react-webpack5'; const config: StorybookConfig = { stories: [ - { - directory: './stories/title', - titlePrefix: 'Custom Prefix', - }, // 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)', diff --git a/code/examples/official-storybook/package.json b/code/examples/official-storybook/package.json index 41e0c8a5b32..32bd8aeddc0 100644 --- a/code/examples/official-storybook/package.json +++ b/code/examples/official-storybook/package.json @@ -1,6 +1,6 @@ { "name": "official-storybook", - "version": "7.0.0-alpha.23", + "version": "7.0.0-alpha.31", "private": true, "scripts": { "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true storybook build -c ./", @@ -13,33 +13,33 @@ "devDependencies": { "@emotion/jest": "^11.8.0", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5", - "@storybook/addon-a11y": "7.0.0-alpha.23", - "@storybook/addon-actions": "7.0.0-alpha.23", - "@storybook/addon-backgrounds": "7.0.0-alpha.23", - "@storybook/addon-controls": "7.0.0-alpha.23", - "@storybook/addon-docs": "7.0.0-alpha.23", - "@storybook/addon-highlight": "7.0.0-alpha.23", - "@storybook/addon-interactions": "7.0.0-alpha.23", - "@storybook/addon-jest": "7.0.0-alpha.23", - "@storybook/addon-links": "7.0.0-alpha.23", - "@storybook/addon-storyshots": "7.0.0-alpha.23", - "@storybook/addon-storyshots-puppeteer": "7.0.0-alpha.23", - "@storybook/addon-storysource": "7.0.0-alpha.23", - "@storybook/addon-toolbars": "7.0.0-alpha.23", - "@storybook/addon-viewport": "7.0.0-alpha.23", - "@storybook/addons": "7.0.0-alpha.23", - "@storybook/cli": "7.0.0-alpha.23", - "@storybook/components": "7.0.0-alpha.23", - "@storybook/core-events": "7.0.0-alpha.23", + "@storybook/addon-a11y": "7.0.0-alpha.31", + "@storybook/addon-actions": "7.0.0-alpha.31", + "@storybook/addon-backgrounds": "7.0.0-alpha.31", + "@storybook/addon-controls": "7.0.0-alpha.31", + "@storybook/addon-docs": "7.0.0-alpha.31", + "@storybook/addon-highlight": "7.0.0-alpha.31", + "@storybook/addon-interactions": "7.0.0-alpha.31", + "@storybook/addon-jest": "7.0.0-alpha.31", + "@storybook/addon-links": "7.0.0-alpha.31", + "@storybook/addon-storyshots": "7.0.0-alpha.31", + "@storybook/addon-storyshots-puppeteer": "7.0.0-alpha.31", + "@storybook/addon-storysource": "7.0.0-alpha.31", + "@storybook/addon-toolbars": "7.0.0-alpha.31", + "@storybook/addon-viewport": "7.0.0-alpha.31", + "@storybook/addons": "7.0.0-alpha.31", + "@storybook/cli": "7.0.0-alpha.31", + "@storybook/components": "7.0.0-alpha.31", + "@storybook/core-events": "7.0.0-alpha.31", "@storybook/design-system": "^5.4.7", "@storybook/jest": "^0.0.10", - "@storybook/node-logger": "7.0.0-alpha.23", - "@storybook/react": "7.0.0-alpha.23", - "@storybook/react-webpack5": "7.0.0-alpha.23", - "@storybook/router": "7.0.0-alpha.23", - "@storybook/source-loader": "7.0.0-alpha.23", + "@storybook/node-logger": "7.0.0-alpha.31", + "@storybook/react": "7.0.0-alpha.31", + "@storybook/react-webpack5": "7.0.0-alpha.31", + "@storybook/router": "7.0.0-alpha.31", + "@storybook/source-loader": "7.0.0-alpha.31", "@storybook/testing-library": "0.0.14-next.0", - "@storybook/theming": "7.0.0-alpha.23", + "@storybook/theming": "7.0.0-alpha.31", "@testing-library/dom": "^7.31.2", "@testing-library/user-event": "^13.1.9", "chromatic": "^6.0.2", @@ -55,7 +55,7 @@ "prop-types": "^15.7.2", "react": "16.14.0", "react-dom": "16.14.0", - "storybook": "7.0.0-alpha.23", + "storybook": "7.0.0-alpha.31", "terser-webpack-plugin": "^5.3.1", "uuid-browser": "^3.1.0", "webpack": "5" diff --git a/code/examples/official-storybook/stories/addon-actions.stories.js b/code/examples/official-storybook/stories/addon-actions.stories.js deleted file mode 100644 index ae7ad1de5b3..00000000000 --- a/code/examples/official-storybook/stories/addon-actions.stories.js +++ /dev/null @@ -1,196 +0,0 @@ -/* eslint-disable react/prop-types */ -import global from 'global'; -import React, { Fragment } from 'react'; -import { action, actions, configureActions } from '@storybook/addon-actions'; -import { Form } from '@storybook/components'; - -const { window: globalWindow, File } = global; -const { Button } = Form; - -export default { - title: 'Addons/Actions', - parameters: { - options: { - selectedPanel: 'storybook/actions/panel', - }, - }, -}; - -export const ArgTypesExample = ({ onClick, onFocus }) => ( - -); - -ArgTypesExample.argTypes = { - onClick: { action: 'clicked!' }, - onFocus: { action: true }, -}; - -export const ArgTypesRegexExample = (args, context) => { - const { someFunction, onClick, onFocus } = args; - return ( - - ); -}; - -ArgTypesRegexExample.parameters = { actions: { argTypesRegex: '^on.*' } }; -ArgTypesRegexExample.argTypes = { someFunction: {}, onClick: {}, onFocus: {} }; - -export const BasicExample = () => ; - -BasicExample.storyName = 'Basic example'; - -export const MultipleActions = () => ( - -); - -MultipleActions.storyName = 'Multiple actions'; - -export const MultipleActionsConfig = () => ( - -); - -MultipleActionsConfig.storyName = 'Multiple actions + config'; - -export const MultipleActionsAsObject = () => ( - -); - -MultipleActionsAsObject.storyName = 'Multiple actions as object'; - -export const MultipleActionsObjectConfig = () => ( - -); - -MultipleActionsObjectConfig.storyName = 'Multiple actions, object + config'; - -export const CircularPayload = () => { - const circular = { foo: {} }; - circular.foo.circular = circular; - return ; -}; - -export const ReservedKeywordAsName = () => ; - -ReservedKeywordAsName.storyName = 'Reserved keyword as name'; - -export const AllTypes = () => { - function A() {} - function B() {} - - const bound = B.bind({}); - - let file; - try { - file = new File([''], 'filename.txt', { type: 'text/plain', lastModified: new Date() }); - } catch (error) { - file = error; - } - const reg = /fooBar/g; - - return ( - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -AllTypes.storyName = 'All types'; - -export const ConfigureActionsDepth = () => { - configureActions({ - depth: 2, - }); - - return ( - - ); -}; - -export const PersistingTheActionLogger = () => ( - -

Moving away from this story will persist the action logger

- - -); - -PersistingTheActionLogger.storyName = 'Persisting the action logger'; - -export const LimitActionOutput = () => { - configureActions({ - limit: 2, - }); - - return ( - - - - - ); -}; - -export const SkippedViaDisableTrue = () => ( - -); - -SkippedViaDisableTrue.storyName = 'skipped via disable:true'; - -SkippedViaDisableTrue.parameters = { - actions: { disable: true }, -}; diff --git a/code/examples/official-storybook/stories/addon-backgrounds.stories.js b/code/examples/official-storybook/stories/addon-backgrounds.stories.js deleted file mode 100644 index 3ad15dc5a00..00000000000 --- a/code/examples/official-storybook/stories/addon-backgrounds.stories.js +++ /dev/null @@ -1,117 +0,0 @@ -import React from 'react'; - -import BaseButton from '../components/BaseButton'; - -export default { - title: 'Addons/Backgrounds', - parameters: { - backgrounds: { - default: 'dark', - values: [ - { name: 'white', value: '#ffffff' }, - { name: 'light', value: '#eeeeee' }, - { name: 'gray', value: '#cccccc' }, - { name: 'dark', value: '#222222' }, - { name: 'black', value: '#000000' }, - ], - }, - }, -}; - -const Template = (args) => ; - -export const Story1 = Template.bind({}); -Story1.args = { - label: 'You should be able to switch backgrounds for this story', -}; - -export const Story2 = Template.bind({}); -Story2.args = { - label: 'This one too!', -}; - -export const Overridden = Template.bind({}); -Overridden.args = { - label: 'This one should have different backgrounds', -}; -Overridden.parameters = { - backgrounds: { - default: 'blue', - values: [ - { name: 'pink', value: 'hotpink' }, - { name: 'blue', value: 'deepskyblue' }, - ], - }, -}; - -export const WithGradient = Template.bind({}); -WithGradient.args = { - label: 'This one should have a nice gradient', -}; -WithGradient.parameters = { - backgrounds: { - default: 'gradient', - values: [ - { - name: 'gradient', - value: - 'linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)', - }, - ], - }, -}; - -export const WithImage = Template.bind({}); -WithImage.args = { - label: 'This one should have an image background', -}; -WithImage.parameters = { - backgrounds: { - default: 'space', - values: [ - { - name: 'space', - value: 'url(https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg)', - }, - ], - }, -}; - -export const DisabledBackgrounds = Template.bind({}); -DisabledBackgrounds.args = { - label: 'This one should not use backgrounds', -}; -DisabledBackgrounds.parameters = { - backgrounds: { disable: true }, -}; - -export const DisabledGrid = Template.bind({}); -DisabledGrid.args = { - label: 'This one should not use grid', -}; -DisabledGrid.parameters = { - backgrounds: { - grid: { disable: true }, - }, -}; -export const GridCellProperties = Template.bind({}); -GridCellProperties.args = { - label: 'This one should have different grid properties', -}; -GridCellProperties.parameters = { - backgrounds: { - grid: { - cellSize: 10, - cellAmount: 4, - opacity: 0.2, - }, - }, -}; - -export const AlignedGridWhenFullScreen = Template.bind({}); -AlignedGridWhenFullScreen.args = { - label: 'Grid should have an offset of 0 when in fullscreen', -}; -AlignedGridWhenFullScreen.parameters = { - layout: 'fullscreen', -}; 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 index 2538ddc4d9c..44ebc1911a3 100644 --- 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 @@ -8,7 +8,6 @@ import { ColorItem, Meta, } from '@storybook/addon-docs'; -import { action } from '@storybook/addon-actions'; import styled from 'styled-components'; import { Button } from '../../components/react-demo'; import TsButton from '../../components/TsButton'; @@ -78,22 +77,22 @@ export const nonStory2 = () => ; // another one - + - + - + - + Plain text - + @@ -120,7 +119,7 @@ export const nonStory2 = () => ; // another one - + ## Configurable height @@ -192,7 +191,7 @@ Fixed layout requires custom `height` since it can't be determined. - + diff --git a/code/examples/official-storybook/stories/addon-docs/ts-button.stories.tsx b/code/examples/official-storybook/stories/addon-docs/ts-button.stories.tsx index 2e0e5636527..e0a2b613a1a 100644 --- a/code/examples/official-storybook/stories/addon-docs/ts-button.stories.tsx +++ b/code/examples/official-storybook/stories/addon-docs/ts-button.stories.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { action } from '@storybook/addon-actions'; import Button, { Type } from '../../components/TsButton'; export default { @@ -14,7 +13,7 @@ type Story = () => any; export const SimpleButton: Story = () => { const x = 0; - return ; + return ; }; const typeOptions = { diff --git a/code/examples/official-storybook/stories/addon-links/href.stories.js b/code/examples/official-storybook/stories/addon-links/href.stories.js index 64a912762d4..3f5e86ed470 100644 --- a/code/examples/official-storybook/stories/addon-links/href.stories.js +++ b/code/examples/official-storybook/stories/addon-links/href.stories.js @@ -1,13 +1,12 @@ import React from 'react'; import { hrefTo } from '@storybook/addon-links'; -import { action } from '@storybook/addon-actions'; export default { title: 'Addons/Links/Href', }; export const Log = () => { - hrefTo('Addons/Links/Href', 'log').then((href) => action('URL of this story')(href)); + hrefTo('Addons/Links/Href', 'log'); return See action logger; }; diff --git a/code/examples/official-storybook/stories/addon-viewport/custom-default.stories.js b/code/examples/official-storybook/stories/addon-viewport/custom-default.stories.js deleted file mode 100644 index 8b6700546a2..00000000000 --- a/code/examples/official-storybook/stories/addon-viewport/custom-default.stories.js +++ /dev/null @@ -1,46 +0,0 @@ -import React from 'react'; -import { styled } from '@storybook/theming'; -import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; - -const Panel = styled.div(); - -export default { - title: 'Addons/Viewport/Custom Default (Kindle Fire 2)', - parameters: { - viewport: { - viewports: { - ...INITIAL_VIEWPORTS, - kindleFire2: { - name: 'Kindle Fire 2', - styles: { - width: '600px', - height: '963px', - }, - }, - }, - }, - }, -}; - -export const Inherited = () => ( - - I've inherited Kindle Fire 2 viewport from my parent. - -); - -export const OverriddenViaWithViewportParameterizedDecorator = () => ( - - I respect my parents but I should be looking good on iPad. - -); -OverriddenViaWithViewportParameterizedDecorator.storyName = - 'Overridden via "withViewport" parameterized decorator'; -OverriddenViaWithViewportParameterizedDecorator.parameters = { - viewport: { defaultViewport: 'ipad' }, -}; - -export const Disabled = () => There should be no viewport selector in the toolbar; - -Disabled.parameters = { - viewport: { disable: true }, -}; diff --git a/code/examples/official-storybook/stories/addon-viewport/default.stories.js b/code/examples/official-storybook/stories/addon-viewport/default.stories.js deleted file mode 100644 index bdd2ee5ed7f..00000000000 --- a/code/examples/official-storybook/stories/addon-viewport/default.stories.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { styled } from '@storybook/theming'; -import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; - -const Panel = styled.div(); - -export default { - title: 'Addons/Viewport', - parameters: { - viewport: { - viewports: INITIAL_VIEWPORTS, - }, - }, -}; -export const DefaultFn = () => ( - I don't have problems being rendered using the default viewport. -); -DefaultFn.storyName = 'default'; diff --git a/code/examples/official-storybook/stories/core/args.stories.tsx b/code/examples/official-storybook/stories/core/args.stories.tsx deleted file mode 100644 index 2242a1d1f02..00000000000 --- a/code/examples/official-storybook/stories/core/args.stories.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import React, { FC, useState } from 'react'; -import { useArgs } from '@storybook/client-api'; - -interface CustomArgs { - first?: string; - last?: string; - foo?: string; -} - -type UpdateArgs = ReturnType[1]; -type ResetArgs = ReturnType[2]; - -const ArgUpdater: FC<{ args: CustomArgs; updateArgs: UpdateArgs; resetArgs: ResetArgs }> = ({ - args, - updateArgs, - resetArgs, -}) => { - const [argsInput, updateArgsInput] = useState(JSON.stringify(args)); - - return ( -
-

Hooks args:

- 
{JSON.stringify(args)}
-
{ - e.preventDefault(); - updateArgs(JSON.parse(argsInput)); - }} - > -