Merge branch 'next' into fix-staticDirs-file-already-exists-16732

2025-03-18 05:02:24 +08:00 · 2022-09-08 16:37:54 +02:00 · 2022-09-08 16:37:54 +02:00 · f6fab68b0d
commit f6fab68b0d
parent ed495aa4d9 5b2a86d90d
534 changed files with 7658 additions and 6382 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@ -289,7 +289,7 @@ jobs:
  #         no_output_timeout: 5m
  cra-bench:
    executor:
-      class: medium
+      class: medium+
      name: sb_playwright
    working_directory: /tmp/storybook
    steps:
@ -317,7 +317,14 @@ jobs:
          name: Run @storybook/bench on repro
          command: |
            cd ./cra-bench
-            npx -p @storybook/bench@1.0.0--canary.12.f21510e.0 sb-bench '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
@ -470,7 +477,7 @@ jobs:
    executor:
      class: medium+
      name: sb_node_14_browsers
-    parallelism: 8
+    parallelism: 7
    steps:
      - git-shallow-clone/checkout_advanced:
          clone_options: '--depth 1 --verbose'
@ -490,7 +497,7 @@ jobs:
    executor:
      class: medium+
      name: sb_node_14_browsers
-    parallelism: 8
+    parallelism: 7
    steps:
      - git-shallow-clone/checkout_advanced:
          clone_options: '--depth 1 --verbose'
@ -506,7 +513,7 @@ jobs:
    executor:
      class: medium+
      name: sb_node_14_browsers
-    parallelism: 8
+    parallelism: 7
    steps:
      - git-shallow-clone/checkout_advanced:
          clone_options: '--depth 1 --verbose'
@ -526,7 +533,7 @@ jobs:
    executor:
      class: medium+
      name: sb_node_14_browsers
-    parallelism: 8
+    parallelism: 7
    steps:
      - git-shallow-clone/checkout_advanced:
          clone_options: '--depth 1 --verbose'
@ -542,7 +549,7 @@ jobs:
    executor:
      class: medium+
      name: sb_node_14_browsers
-    parallelism: 8
+    parallelism: 7
    steps:
      - git-shallow-clone/checkout_advanced:
          clone_options: '--depth 1 --verbose'
@ -558,7 +565,7 @@ jobs:
    executor:
      class: medium+
      name: sb_playwright
-    parallelism: 8
+    parallelism: 7
    steps:
      - git-shallow-clone/checkout_advanced:
          clone_options: '--depth 1 --verbose'
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,68 @@
+## 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
--- a/MIGRATION.md
+++ b/MIGRATION.md
@ -18,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)
@ -430,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).
@ -514,6 +518,12 @@ 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.
--- 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'
-    )(() => <DocgenButton onClick={action('clicked')} label="Docgen Button" />)
+    )(() => <DocgenButton label="Docgen Button" />)
  )
  .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'
-    )(() => <FlowTypeButton onClick={action('clicked')} label="Flow Typed Button" />)
+    )(() => <FlowTypeButton label="Flow Typed Button" />)
  )
  .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'
-    )(() => <BaseButton onClick={action('clicked')} label="Button" />)
+    )(() => <BaseButton label="Button" />)
  );

 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)(() => <BaseButton onClick={action('clicked')} label="Button" />)
+  withInfo(markdownDescription)(() => <BaseButton label="Button" />)
 );

 storiesOf('Addons|Info.Options.inline', module).add(
--- 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.27",
+  "version": "7.0.0-alpha.31",
  "description": "Test component compliance with web accessibility standards",
  "keywords": [
    "a11y",
@ -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.27",
-    "@storybook/addons": "7.0.0-alpha.27",
-    "@storybook/api": "7.0.0-alpha.27",
-    "@storybook/channels": "7.0.0-alpha.27",
-    "@storybook/client-logger": "7.0.0-alpha.27",
-    "@storybook/components": "7.0.0-alpha.27",
-    "@storybook/core-events": "7.0.0-alpha.27",
+    "@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.27",
+    "@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": "3e33f0709dd97151b7dfd86fd9858d13fd1c5738",
+  "gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
  "storybook": {
    "displayName": "Accessibility",
    "icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",
--- 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.27",
+  "version": "7.0.0-alpha.31",
  "description": "Get UI feedback when an action is performed on an interactive element",
  "keywords": [
    "storybook",
@ -32,23 +32,22 @@
  ],
  "scripts": {
    "check": "tsc --noEmit",
-    "prepare": "node ../../../scripts/prepare.js"
+    "prep": "node ../../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.27",
-    "@storybook/api": "7.0.0-alpha.27",
-    "@storybook/client-logger": "7.0.0-alpha.27",
-    "@storybook/components": "7.0.0-alpha.27",
-    "@storybook/core-events": "7.0.0-alpha.27",
+    "@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.27",
-    "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",
@ -73,7 +72,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "3e33f0709dd97151b7dfd86fd9858d13fd1c5738",
+  "gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
  "storybook": {
    "displayName": "Actions",
    "unsupportedFrameworks": [
--- 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) => (
-  <Inspector theme={theme.addonActionsTheme || 'chromeLight'} {...props} />
+  <Inspector theme={theme.addonActionsTheme || 'chromeLight'} table={false} {...props} />
 ));

 interface ActionLoggerProps {
--- a/code/addons/actions/src/preview/action.ts
+++ b/code/addons/actions/src/preview/action.ts
@ -20,7 +20,7 @@ const isReactSyntheticEvent = (e: unknown): e is SyntheticEvent =>
 const serializeArg = <T>(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)
    );
--- 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';
--- a/code/addons/actions/template/stories/argtype.stories.ts
+++ 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 },
+  },
+};
--- a/code/addons/actions/template/stories/basics.stories.ts
+++ 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<string, any> = {};
+          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,
+    },
+  },
+};
--- a/code/addons/actions/template/stories/basics.stories.tsx
+++ b/code/addons/actions/template/stories/basics.stories.tsx
@ -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') },
-};
--- a/code/addons/actions/template/stories/configs.stories.ts
+++ 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();
+    },
+  ],
+};
--- a/code/addons/actions/template/stories/parameters.stories.ts
+++ 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' }],
+  },
+};
--- 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.27",
+  "version": "7.0.0-alpha.31",
  "description": "Switch backgrounds to view components in different settings",
  "keywords": [
    "addon",
@ -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.27",
-    "@storybook/api": "7.0.0-alpha.27",
-    "@storybook/client-logger": "7.0.0-alpha.27",
-    "@storybook/components": "7.0.0-alpha.27",
-    "@storybook/core-events": "7.0.0-alpha.27",
+    "@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.27",
-    "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": "3e33f0709dd97151b7dfd86fd9858d13fd1c5738",
+  "gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
  "storybook": {
    "displayName": "Backgrounds",
    "icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",
--- a/code/addons/backgrounds/template/stories/grid.stories.ts
+++ 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,
+      },
+    },
+  },
+};
--- a/code/addons/backgrounds/template/stories/parameters.stories.ts
+++ b/code/addons/backgrounds/template/stories/parameters.stories.ts
--- 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.27",
+  "version": "7.0.0-alpha.31",
  "description": "Interact with component inputs dynamically in the Storybook UI",
  "keywords": [
    "addon",
@ -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.27",
-    "@storybook/api": "7.0.0-alpha.27",
-    "@storybook/blocks": "7.0.0-alpha.27",
-    "@storybook/client-logger": "7.0.0-alpha.27",
-    "@storybook/components": "7.0.0-alpha.27",
-    "@storybook/core-common": "7.0.0-alpha.27",
+    "@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.27",
-    "@storybook/store": "7.0.0-alpha.27",
-    "@storybook/theming": "7.0.0-alpha.27",
-    "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": "3e33f0709dd97151b7dfd86fd9858d13fd1c5738",
+  "gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
  "storybook": {
    "displayName": "Controls",
    "icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",
--- 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;
 };
--- 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.27",
+  "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.27",
-    "@storybook/api": "7.0.0-alpha.27",
-    "@storybook/blocks": "7.0.0-alpha.27",
-    "@storybook/components": "7.0.0-alpha.27",
-    "@storybook/core-common": "7.0.0-alpha.27",
-    "@storybook/core-events": "7.0.0-alpha.27",
+    "@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.27",
-    "@storybook/docs-tools": "7.0.0-alpha.27",
+    "@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.27",
-    "@storybook/postinstall": "7.0.0-alpha.27",
-    "@storybook/preview-web": "7.0.0-alpha.27",
-    "@storybook/source-loader": "7.0.0-alpha.27",
-    "@storybook/store": "7.0.0-alpha.27",
-    "@storybook/theming": "7.0.0-alpha.27",
+    "@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": "3e33f0709dd97151b7dfd86fd9858d13fd1c5738",
+  "gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
  "storybook": {
    "displayName": "Docs",
    "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",
--- 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');
--- 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.27",
+  "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.27",
-    "@storybook/addon-backgrounds": "7.0.0-alpha.27",
-    "@storybook/addon-controls": "7.0.0-alpha.27",
-    "@storybook/addon-docs": "7.0.0-alpha.27",
-    "@storybook/addon-highlight": "7.0.0-alpha.27",
-    "@storybook/addon-measure": "7.0.0-alpha.27",
-    "@storybook/addon-outline": "7.0.0-alpha.27",
-    "@storybook/addon-toolbars": "7.0.0-alpha.27",
-    "@storybook/addon-viewport": "7.0.0-alpha.27",
-    "@storybook/addons": "7.0.0-alpha.27",
-    "@storybook/api": "7.0.0-alpha.27",
-    "@storybook/core-common": "7.0.0-alpha.27",
-    "@storybook/node-logger": "7.0.0-alpha.27",
-    "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.27",
+    "@storybook/vue": "7.0.0-alpha.31",
    "@types/jest": "^26.0.16",
    "typescript": "~4.6.3"
  },
@ -99,5 +98,5 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "3e33f0709dd97151b7dfd86fd9858d13fd1c5738"
+  "gitHead": "02c013c33186479017098d532a18ff8654b91f1f"
 }
--- 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.27",
+  "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.27",
-    "@storybook/core-events": "7.0.0-alpha.27",
-    "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": "3e33f0709dd97151b7dfd86fd9858d13fd1c5738",
+  "gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
  "sbmodern": "dist/modern/index.js",
  "storybook": {
    "displayName": "Highlight",
--- a/code/addons/interactions/manager.js
+++ b/code/addons/interactions/manager.js
@ -1 +1 @@
-import './dist/esm/manager';
+import './dist/manager';
--- 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.27",
+  "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.27",
-    "@storybook/api": "7.0.0-alpha.27",
-    "@storybook/client-logger": "7.0.0-alpha.27",
-    "@storybook/components": "7.0.0-alpha.27",
-    "@storybook/core-common": "7.0.0-alpha.27",
-    "@storybook/core-events": "7.0.0-alpha.27",
+    "@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.27",
-    "@storybook/theming": "7.0.0-alpha.27",
-    "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": "3e33f0709dd97151b7dfd86fd9858d13fd1c5738",
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/manager.tsx",
+      "./src/preset/preview.ts"
+    ]
+  },
+  "gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
  "storybook": {
    "displayName": "Interactions",
    "unsupportedFrameworks": [
--- 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';
--- 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,
--- 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.27",
+  "version": "7.0.0-alpha.31",
  "description": "React storybook addon that show component jest report",
  "keywords": [
    "addon",
@ -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.27",
-    "@storybook/api": "7.0.0-alpha.27",
-    "@storybook/client-logger": "7.0.0-alpha.27",
-    "@storybook/components": "7.0.0-alpha.27",
-    "@storybook/core-events": "7.0.0-alpha.27",
-    "@storybook/theming": "7.0.0-alpha.27",
-    "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": "3e33f0709dd97151b7dfd86fd9858d13fd1c5738",
+  "gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
  "storybook": {
    "displayName": "Jest",
    "icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg",
--- 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();
  });
 });
--- 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.27",
+  "version": "7.0.0-alpha.31",
  "description": "Link stories together to build demos and prototypes with your UI components",
  "keywords": [
    "addon",
@ -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.27",
-    "@storybook/client-logger": "7.0.0-alpha.27",
-    "@storybook/core-events": "7.0.0-alpha.27",
+    "@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.27",
-    "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": "3e33f0709dd97151b7dfd86fd9858d13fd1c5738",
+  "gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
  "storybook": {
    "displayName": "Links",
    "icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png",
--- 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 })),
--- 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,
 }));

--- 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<string>
  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 })
--- 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.27",
+  "version": "7.0.0-alpha.31",
  "description": "Inspect layouts by visualizing the box model",
  "keywords": [
    "storybook-addons",
@ -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.27",
-    "@storybook/api": "7.0.0-alpha.27",
-    "@storybook/client-logger": "7.0.0-alpha.27",
-    "@storybook/components": "7.0.0-alpha.27",
-    "@storybook/core-events": "7.0.0-alpha.27",
+    "@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": "3e33f0709dd97151b7dfd86fd9858d13fd1c5738",
+  "gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
  "storybook": {
    "displayName": "Measure",
    "unsupportedFrameworks": [
--- 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.27",
+  "version": "7.0.0-alpha.31",
  "description": "Outline all elements with CSS to help with layout placement and alignment",
  "keywords": [
    "storybook-addons",
@ -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.27",
-    "@storybook/api": "7.0.0-alpha.27",
-    "@storybook/client-logger": "7.0.0-alpha.27",
-    "@storybook/components": "7.0.0-alpha.27",
-    "@storybook/core-events": "7.0.0-alpha.27",
+    "@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": "3e33f0709dd97151b7dfd86fd9858d13fd1c5738",
+  "gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
  "storybook": {
    "displayName": "Outline",
    "unsupportedFrameworks": [
--- 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.27",
+  "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.27",
+    "@storybook/addons": "7.0.0-alpha.31",
    "@storybook/babel-plugin-require-context-hook": "1.0.1",
-    "@storybook/client-api": "7.0.0-alpha.27",
-    "@storybook/core-client": "7.0.0-alpha.27",
-    "@storybook/core-common": "7.0.0-alpha.27",
-    "@storybook/core-webpack": "7.0.0-alpha.27",
+    "@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.27",
-    "@storybook/angular": "7.0.0-alpha.27",
-    "@storybook/react": "7.0.0-alpha.27",
-    "@storybook/vue": "7.0.0-alpha.27",
-    "@storybook/vue3": "7.0.0-alpha.27",
+    "@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": "3e33f0709dd97151b7dfd86fd9858d13fd1c5738",
+  "gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
  "storybook": {
    "displayName": "Storyshots",
    "icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",
--- 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',
--- 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);
    });
  });
--- 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;
--- 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;
--- 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 = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+export const WithText = () => <Button>Hello Button</Button>;

 export const WithSomeEmoji = () => (
-  <Button onClick={action('clicked')}>
+  <Button>
    <span role="img" aria-label="so cool">
      😀 😎 👍 💯
    </span>
--- a/code/addons/storyshots/storyshots-puppeteer/package.json
+++ b/code/addons/storyshots/storyshots-puppeteer/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-storyshots-puppeteer",
-  "version": "7.0.0-alpha.27",
+  "version": "7.0.0-alpha.31",
  "description": "Image snapshots addition to StoryShots based on puppeteer",
  "keywords": [
    "addon",
@ -30,14 +30,13 @@
    "*.d.ts"
  ],
  "scripts": {
-    "prepare": "node ../../../../scripts/prepare.js"
+    "prep": "node ../../../../scripts/prepare.js"
  },
  "dependencies": {
    "@axe-core/puppeteer": "^4.2.0",
    "@storybook/csf": "0.0.2--canary.0899bb7.0",
-    "@storybook/node-logger": "7.0.0-alpha.27",
+    "@storybook/node-logger": "7.0.0-alpha.31",
    "@types/jest-image-snapshot": "^4.1.3",
-    "core-js": "^3.8.2",
    "jest-image-snapshot": "^4.3.0"
  },
  "devDependencies": {
@ -45,7 +44,7 @@
    "puppeteer": "^2.0.0 || ^3.0.0"
  },
  "peerDependencies": {
-    "@storybook/addon-storyshots": "7.0.0-alpha.27",
+    "@storybook/addon-storyshots": "7.0.0-alpha.31",
    "puppeteer": ">=2.0.0"
  },
  "peerDependenciesMeta": {
@ -56,5 +55,5 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "3e33f0709dd97151b7dfd86fd9858d13fd1c5738"
+  "gitHead": "02c013c33186479017098d532a18ff8654b91f1f"
 }
--- a/code/addons/storysource/package.json
+++ b/code/addons/storysource/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-storysource",
-  "version": "7.0.0-alpha.27",
+  "version": "7.0.0-alpha.31",
  "description": "View a story’s source code to see how it works and paste into your app",
  "keywords": [
    "addon",
@ -32,17 +32,16 @@
  ],
  "scripts": {
    "check": "tsc --noEmit",
-    "prepare": "node ../../../scripts/prepare.js"
+    "prep": "node ../../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.27",
-    "@storybook/api": "7.0.0-alpha.27",
-    "@storybook/client-logger": "7.0.0-alpha.27",
-    "@storybook/components": "7.0.0-alpha.27",
-    "@storybook/router": "7.0.0-alpha.27",
-    "@storybook/source-loader": "7.0.0-alpha.27",
-    "@storybook/theming": "7.0.0-alpha.27",
-    "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/router": "7.0.0-alpha.31",
+    "@storybook/source-loader": "7.0.0-alpha.31",
+    "@storybook/theming": "7.0.0-alpha.31",
    "estraverse": "^5.2.0",
    "prop-types": "^15.7.2",
    "react-syntax-highlighter": "^15.5.0"
@ -67,7 +66,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "3e33f0709dd97151b7dfd86fd9858d13fd1c5738",
+  "gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
  "storybook": {
    "displayName": "Storysource",
    "icon": "https://user-images.githubusercontent.com/263385/101991675-48cdf300-3c7c-11eb-9400-58de5ac6daa7.png",
--- a/code/addons/toolbars/package.json
+++ b/code/addons/toolbars/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-toolbars",
-  "version": "7.0.0-alpha.27",
+  "version": "7.0.0-alpha.31",
  "description": "Create your own toolbar items that control story rendering",
  "keywords": [
    "addon",
@ -54,15 +54,14 @@
  ],
  "scripts": {
    "check": "tsc --noEmit",
-    "prepare": "../../../scripts/prepare/bundle.ts"
+    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.27",
-    "@storybook/api": "7.0.0-alpha.27",
-    "@storybook/client-logger": "7.0.0-alpha.27",
-    "@storybook/components": "7.0.0-alpha.27",
-    "@storybook/theming": "7.0.0-alpha.27",
-    "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/theming": "7.0.0-alpha.31"
  },
  "devDependencies": {
    "typescript": "~4.6.3"
@ -89,7 +88,7 @@
    ],
    "platform": "browser"
  },
-  "gitHead": "3e33f0709dd97151b7dfd86fd9858d13fd1c5738",
+  "gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
  "storybook": {
    "displayName": "Toolbars",
    "icon": "https://user-images.githubusercontent.com/263385/101991677-48cdf300-3c7c-11eb-93b4-19b0e3366959.png",
--- a/code/addons/viewport/package.json
+++ b/code/addons/viewport/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-viewport",
-  "version": "7.0.0-alpha.27",
+  "version": "7.0.0-alpha.31",
  "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
  "keywords": [
    "addon",
@ -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.27",
-    "@storybook/api": "7.0.0-alpha.27",
-    "@storybook/client-logger": "7.0.0-alpha.27",
-    "@storybook/components": "7.0.0-alpha.27",
-    "@storybook/core-events": "7.0.0-alpha.27",
-    "@storybook/theming": "7.0.0-alpha.27",
-    "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",
    "memoizerific": "^1.11.3",
    "prop-types": "^15.7.2"
@ -96,7 +95,7 @@
      "./src/preview.ts"
    ]
  },
-  "gitHead": "3e33f0709dd97151b7dfd86fd9858d13fd1c5738",
+  "gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
  "storybook": {
    "displayName": "Viewport",
    "icon": "https://user-images.githubusercontent.com/263385/101991678-48cdf300-3c7c-11eb-9764-f8af293c1b28.png",
--- a/code/addons/viewport/template/stories/parameters.stories.ts
+++ b/code/addons/viewport/template/stories/parameters.stories.ts
@ -0,0 +1,50 @@
+import globalThis from 'global';
+import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+export default {
+  component: globalThis.Components.Button,
+  args: {
+    children: 'Click Me!',
+  },
+  parameters: {
+    viewport: {
+      viewports: MINIMAL_VIEWPORTS,
+    },
+    chromatic: { disable: true },
+  },
+};
+
+export const Basic = {
+  parameters: {},
+};
+
+export const Selected = {
+  parameters: {
+    viewport: {
+      defaultViewport: Object.keys(MINIMAL_VIEWPORTS)[0],
+    },
+  },
+};
+
+export const Custom = {
+  parameters: {
+    viewport: {
+      viewports: {
+        phone: {
+          name: 'Phone Width',
+          styles: {
+            height: '600px',
+            width: '100vh',
+          },
+          type: 'mobile',
+        },
+      },
+    },
+  },
+};
+
+export const Disabled = {
+  parameters: {
+    viewport: { disable: true },
+  },
+};
--- a/code/examples/angular-cli/.storybook/preview.ts
+++ b/code/examples/angular-cli/.storybook/preview.ts
@ -2,7 +2,6 @@
 import { setCompodocJson } from '@storybook/addon-docs/angular';
 import addCssWarning from '../src/cssWarning';

-// @ts-ignore
 import docJson from '../documentation.json';
 // remove ButtonComponent to test #12009
 const filtered = !docJson?.components
--- a/code/examples/angular-cli/package.json
+++ b/code/examples/angular-cli/package.json
@ -1,6 +1,6 @@
 {
  "name": "angular-cli",
-  "version": "7.0.0-alpha.27",
+  "version": "7.0.0-alpha.31",
  "private": true,
  "license": "MIT",
  "workspaces": {
@ -31,7 +31,6 @@
    "@angular/platform-browser": "^13.3.6",
    "@angular/platform-browser-dynamic": "^13.3.6",
    "@ngrx/store": "^13.2.0",
-    "core-js": "^3.8.2",
    "rxjs": "^6.6.7",
    "sass": "^1.43.4",
    "telejson": "^6.0.8",
@ -44,24 +43,23 @@
    "@angular/compiler-cli": "^13.3.6",
    "@angular/elements": "^13.3.6",
    "@compodoc/compodoc": "^1.1.18",
-    "@storybook/addon-a11y": "7.0.0-alpha.27",
-    "@storybook/addon-actions": "7.0.0-alpha.27",
-    "@storybook/addon-backgrounds": "7.0.0-alpha.27",
-    "@storybook/addon-controls": "7.0.0-alpha.27",
-    "@storybook/addon-docs": "7.0.0-alpha.27",
-    "@storybook/addon-highlight": "7.0.0-alpha.27",
-    "@storybook/addon-interactions": "7.0.0-alpha.27",
-    "@storybook/addon-jest": "7.0.0-alpha.27",
-    "@storybook/addon-links": "7.0.0-alpha.27",
-    "@storybook/addon-storyshots": "7.0.0-alpha.27",
-    "@storybook/addon-storysource": "7.0.0-alpha.27",
-    "@storybook/addons": "7.0.0-alpha.27",
-    "@storybook/angular": "7.0.0-alpha.27",
+    "@storybook/addon-a11y": "7.0.0-alpha.31",
+    "@storybook/addon-actions": "7.0.0-alpha.31",
+    "@storybook/addon-backgrounds": "7.0.0-alpha.31",
+    "@storybook/addon-controls": "7.0.0-alpha.31",
+    "@storybook/addon-docs": "7.0.0-alpha.31",
+    "@storybook/addon-highlight": "7.0.0-alpha.31",
+    "@storybook/addon-interactions": "7.0.0-alpha.31",
+    "@storybook/addon-jest": "7.0.0-alpha.31",
+    "@storybook/addon-links": "7.0.0-alpha.31",
+    "@storybook/addon-storyshots": "7.0.0-alpha.31",
+    "@storybook/addon-storysource": "7.0.0-alpha.31",
+    "@storybook/addons": "7.0.0-alpha.31",
+    "@storybook/angular": "7.0.0-alpha.31",
    "@storybook/babel-plugin-require-context-hook": "1.0.1",
    "@storybook/jest": "^0.0.10",
-    "@storybook/source-loader": "7.0.0-alpha.27",
+    "@storybook/source-loader": "7.0.0-alpha.31",
    "@storybook/testing-library": "0.0.14-next.0",
-    "@types/core-js": "^2.5.4",
    "@types/jest": "^26.0.16",
    "@types/node": "^14.14.20 || ^16.0.0",
    "@types/sass": "^1",
@ -72,7 +70,7 @@
    "jest": "^26.6.3",
    "jest-preset-angular": "^8.3.2",
    "protractor": "~7.0.0",
-    "storybook": "7.0.0-alpha.27",
+    "storybook": "7.0.0-alpha.31",
    "storybook-addon-angular-ivy": "^0.0.1",
    "ts-jest": "^26.4.4",
    "ts-node": "^10.4.0",
--- a/code/examples/angular-cli/src/stories/addons/actions/snapshots/addon-actions.stories.storyshot
+++ b/code/examples/angular-cli/src/stories/addons/actions/snapshots/addon-actions.stories.storyshot
@ -1,45 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons/Actions Component Output with ArgsTypes 1`] = `
-<storybook-wrapper>
-  <storybook-button-component
-    ng-reflect-text="Button 🥁"
-  >
-    <button>
-      Button 🥁
-    </button>
-  </storybook-button-component>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Addons/Actions Component Output with EventEmitter 1`] = `
-<storybook-wrapper>
-  <storybook-button-component
-    ng-reflect-text="Button 🥁"
-  >
-    <button>
-      Button 🥁
-    </button>
-  </storybook-button-component>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Addons/Actions Story with template 1`] = `
-<storybook-wrapper>
-  <button>
-    Button
-  </button>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Addons/Actions Use action in method 1`] = `
-<storybook-wrapper>
-  <storybook-button-component
-    ng-reflect-text="Button 🥁"
-  >
-    <button>
-      Button 🥁
-    </button>
-  </storybook-button-component>
-</storybook-wrapper>
-`;
--- 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
@ -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: `<button (click)="onClick($event)" (mouseover)="onOver()">Button</button>`,
-  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' } };
--- 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
@ -1,37 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons / Backgrounds Overridden 1`] = `
-<storybook-wrapper>
-  <storybook-button-component
-    ng-reflect-text="This one should have different"
-  >
-    <button>
-      This one should have different backgrounds
-    </button>
-  </storybook-button-component>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Addons / Backgrounds With Component 1`] = `
-<storybook-wrapper>
-  <storybook-button-component
-    ng-reflect-text="Button"
-  >
-    <button>
-      Button
-    </button>
-  </storybook-button-component>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Addons / Backgrounds With Template 1`] = `
-<storybook-wrapper>
-  <storybook-button-component
-    ng-reflect-text="Button"
-  >
-    <button>
-      Button
-    </button>
-  </storybook-button-component>
-</storybook-wrapper>
-`;
--- 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
@ -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: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
-  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' },
-    ],
-  },
-};
--- 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';

 <Meta title="Addons/Docs/SimpleButton" component={Button} />

@ -21,7 +20,7 @@ import { action } from '@storybook/addon-actions';
  {(args) => ({
    props: {
      text: args.text,
-      onClick: action('clicked'),
+      onClick: () => {},
    },
  })}
 </Story>
--- 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: () => {},
  },
 });

--- 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
@ -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 };
--- 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: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
  props: {
    text: 'Button with custom styles',
-    onClick: action('log'),
+    onClick: () => {},
  },
  styles: [
    `
--- 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, '..', '..', '..'));
--- 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.27",
+  "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.27",
+    "@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.27",
-    "@storybook/addon-actions": "7.0.0-alpha.27",
-    "@storybook/addon-backgrounds": "7.0.0-alpha.27",
-    "@storybook/addon-docs": "7.0.0-alpha.27",
-    "@storybook/addon-highlight": "7.0.0-alpha.27",
-    "@storybook/addon-jest": "7.0.0-alpha.27",
-    "@storybook/addon-links": "7.0.0-alpha.27",
-    "@storybook/addon-storyshots": "7.0.0-alpha.27",
-    "@storybook/addons": "7.0.0-alpha.27",
-    "@storybook/builder-webpack5": "7.0.0-alpha.27",
+    "@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.27",
-    "@storybook/react-webpack5": "7.0.0-alpha.27",
-    "@storybook/theming": "7.0.0-alpha.27",
-    "storybook": "7.0.0-alpha.27",
+    "@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": {
--- 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 = () => <Button onClick={action('clicked', { depth: 1 })}>Hello Button</Button>;
+export const Story1 = () => <Button>Hello Button</Button>;
 Story1.storyName = 'with text';

 Story1.parameters = {
@ -15,7 +14,7 @@ Story1.parameters = {
 };

 export const Story2 = () => (
-  <Button onClick={action('clicked')}>
+  <Button>
    <span role="img" aria-label="yolo">
      😀 😎 👍 💯
    </span>
--- a/code/examples/cra-kitchen-sink/src/stories/decorators.stories.js
+++ b/code/examples/cra-kitchen-sink/src/stories/decorators.stories.js
@ -1,36 +0,0 @@
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-import PropTypes from 'prop-types';
-import { Button } from '../components/react-demo';
-
-const Bold = ({ children }) => {
-  return <b>{children}</b>;
-};
-
-Bold.propTypes = {
-  children: PropTypes.string.isRequired,
-};
-
-export default {
-  title: 'Decorators',
-  component: Button,
-  decorators: [
-    (Story) => (
-      <div style={{ padding: 25, border: '3px solid red' }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export const WithArgs = (args) => <Button {...args} />;
-WithArgs.args = { onClick: action('clicked', { depth: 1 }), children: 'With args' };
-
-export const Basic = () => <Button onClick={action('clicked', { depth: 1 })}>Basic</Button>;
-
-export const Nested = (args) => (
-  <Button {...args}>
-    <Bold>Hello</Bold>
-  </Button>
-);
-Nested.args = { onClick: action('clicked', { depth: 1 }) };
--- 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 = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+export const Story1 = () => <Button>Hello Button</Button>;
 Story1.storyName = 'with text';
--- 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, '..', '..', '..'));
--- 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.27",
+  "version": "7.0.0-alpha.31",
  "private": true,
  "scripts": {
    "build": "react-scripts build",
@ -23,8 +23,8 @@
    ]
  },
  "dependencies": {
-    "@storybook/components": "7.0.0-alpha.27",
-    "@storybook/theming": "7.0.0-alpha.27",
+    "@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.27",
-    "@storybook/addon-interactions": "7.0.0-alpha.27",
-    "@storybook/addons": "7.0.0-alpha.27",
-    "@storybook/builder-webpack5": "7.0.0-alpha.27",
+    "@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.27",
-    "@storybook/react-webpack5": "7.0.0-alpha.27",
+    "@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.27",
+    "storybook": "7.0.0-alpha.31",
    "ts-node": "^10.4.0",
    "webpack": "5"
  },
--- 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, '..', '..', '..'));
--- 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.27",
+  "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.27",
-    "@storybook/addon-actions": "7.0.0-alpha.27",
-    "@storybook/addon-docs": "7.0.0-alpha.27",
-    "@storybook/addon-highlight": "7.0.0-alpha.27",
-    "@storybook/addon-links": "7.0.0-alpha.27",
-    "@storybook/addons": "7.0.0-alpha.27",
-    "@storybook/builder-webpack5": "7.0.0-alpha.27",
+    "@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.27",
-    "@storybook/react-webpack5": "7.0.0-alpha.27",
+    "@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.27",
+    "storybook": "7.0.0-alpha.31",
    "ts-node": "^10.4.0",
    "webpack": "5"
  },
--- 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 <Button onClick={action('button clicked')}>OK {x}</Button>;
+  return <Button>OK {x}</Button>;
 };

 const typeOptions = {
--- 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 = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+export const Text = () => <Button>Hello Button</Button>;

 export const Emoji = () => (
-  <Button onClick={action('clicked')}>
+  <Button>
    <span role="img" aria-label="so cool">
      😀 😎 👍 💯
    </span>
--- a/code/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/DocgenTS.tsx
+++ b/code/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/DocgenTS.tsx
@ -15,7 +15,6 @@ export const ButtonReactFC: React.FC<ButtonProps> = ({ onClick, children }) => (
  <button onClick={onClick}>{children}</button>
 );
 ButtonReactFC.defaultProps = {
-  // @ts-ignore
  onClick: null,
 };

@ -26,7 +25,6 @@ export const ButtonFC: FC<ButtonProps> = ({ onClick, children }) => (
  <button onClick={onClick}>{children}</button>
 );
 ButtonFC.defaultProps = {
-  // @ts-ignore
  onClick: null,
 };

@ -37,6 +35,5 @@ export const ButtonFunctionComponent: FC<ButtonProps> = ({ onClick, children })
  <button onClick={onClick}>{children}</button>
 );
 ButtonFunctionComponent.defaultProps = {
-  // @ts-ignore
  onClick: null,
 };
--- 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 = {
--- 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,
--- 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.27",
+  "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.27",
-    "@storybook/addon-storyshots": "7.0.0-alpha.27",
-    "@storybook/addon-storysource": "7.0.0-alpha.27",
-    "@storybook/addons": "7.0.0-alpha.27",
-    "@storybook/cli": "7.0.0-alpha.27",
-    "@storybook/components": "7.0.0-alpha.27",
-    "@storybook/react-webpack5": "7.0.0-alpha.27",
-    "@storybook/theming": "7.0.0-alpha.27",
+    "@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.27",
+    "sb": "7.0.0-alpha.31",
    "typescript": "~4.6.3",
    "webpack": "5"
  },
--- 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.27",
+  "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.27",
-    "@storybook/addon-actions": "7.0.0-alpha.27",
-    "@storybook/addon-backgrounds": "7.0.0-alpha.27",
-    "@storybook/addon-controls": "7.0.0-alpha.27",
-    "@storybook/addon-docs": "7.0.0-alpha.27",
-    "@storybook/addon-highlight": "7.0.0-alpha.27",
-    "@storybook/addon-links": "7.0.0-alpha.27",
-    "@storybook/addon-storysource": "7.0.0-alpha.27",
-    "@storybook/addon-viewport": "7.0.0-alpha.27",
-    "@storybook/addons": "7.0.0-alpha.27",
-    "@storybook/ember": "7.0.0-alpha.27",
+    "@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.27",
+    "@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.27",
+    "storybook": "7.0.0-alpha.31",
    "stream-browserify": "^3.0.0",
    "vm-browserify": "^1.1.2",
    "webpack": "5",
--- a/code/examples/ember-cli/stories/addon-actions.stories.js
+++ b/code/examples/ember-cli/stories/addon-actions.stories.js
@ -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`<button {{action onClick}}>Click Me</button>`,
-  context: {
-    onClick: action('clicked'),
-  },
-});
--- a/code/examples/ember-cli/stories/addon-backgrounds.stories.js
+++ b/code/examples/ember-cli/stories/addon-backgrounds.stories.js
@ -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`<button>You should be able to switch backgrounds for this story</button>`,
-});
-
-Story1.storyName = 'story 1';
-
-export const Story2 = () => ({
-  template: hbs`<button>This one too!</button>`,
-});
-
-Story2.storyName = 'story 2';
--- 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'),
 };
--- 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.27",
+  "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.27",
-    "@storybook/addon-essentials": "7.0.0-alpha.27",
-    "@storybook/blocks": "7.0.0-alpha.27",
-    "@storybook/components": "7.0.0-alpha.27",
+    "@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.27",
-    "@storybook/react": "7.0.0-alpha.27",
-    "@storybook/react-webpack5": "7.0.0-alpha.27",
-    "@storybook/theming": "7.0.0-alpha.27",
+    "@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.27",
+    "storybook": "7.0.0-alpha.31",
    "typescript": "~4.6.3",
    "webpack": "5"
  }
--- 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.27",
+  "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.27",
-    "@storybook/addon-actions": "7.0.0-alpha.27",
-    "@storybook/addon-backgrounds": "7.0.0-alpha.27",
-    "@storybook/addon-controls": "7.0.0-alpha.27",
-    "@storybook/addon-docs": "7.0.0-alpha.27",
-    "@storybook/addon-highlight": "7.0.0-alpha.27",
-    "@storybook/addon-jest": "7.0.0-alpha.27",
-    "@storybook/addon-links": "7.0.0-alpha.27",
+    "@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.27",
-    "@storybook/addon-storysource": "7.0.0-alpha.27",
-    "@storybook/addon-viewport": "7.0.0-alpha.27",
-    "@storybook/addons": "7.0.0-alpha.27",
-    "@storybook/client-api": "7.0.0-alpha.27",
-    "@storybook/core-events": "7.0.0-alpha.27",
-    "@storybook/html": "7.0.0-alpha.27",
-    "@storybook/html-webpack5": "7.0.0-alpha.27",
-    "@storybook/source-loader": "7.0.0-alpha.27",
+    "@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.27"
+    "storybook": "7.0.0-alpha.31"
  },
  "storybook": {
    "chromatic": {
--- a/code/examples/html-kitchen-sink/stories/addon-actions.stories.js
+++ b/code/examples/html-kitchen-sink/stories/addon-actions.stories.js
@ -1,85 +0,0 @@
-import { withActions } from '@storybook/addon-actions';
-
-const buttonStory = () => () => `<button type="button">Hello World</button>`;
-
-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 = () => `
-        <div>
-          Clicks on this button will be logged: <button class="btn" type="button">Button</button>
-        </div>
-      `;
-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' }),
-];
--- a/code/examples/html-kitchen-sink/stories/addon-backgrounds.stories.js
+++ b/code/examples/html-kitchen-sink/stories/addon-backgrounds.stories.js
@ -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 = () =>
-  '<span style="color: white">You should be able to switch backgrounds for this story</span>';
-Story1.storyName = 'story 1';
-
-export const Story2 = () => '<span style="color: white">This one too!</span>';
-Story2.storyName = 'story 2';
--- 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;
  }}
 </Story>
--- 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;
 };

--- a/code/examples/html-kitchen-sink/stories/loaders.stories.js
+++ b/code/examples/html-kitchen-sink/stories/loaders.stories.js
@ -1,7 +0,0 @@
-export default {
-  title: 'Core/Loaders',
-  loaders: [async () => new Promise((r) => setTimeout(() => r({ kindValue: 7 }), 3000))],
-};
-
-export const Story = (args, { loaded }) =>
-  `<div>Loaded Value is ${JSON.stringify(loaded, null, 2)}</div>`;
--- 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)',
--- 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.27",
+  "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.27",
-    "@storybook/addon-actions": "7.0.0-alpha.27",
-    "@storybook/addon-backgrounds": "7.0.0-alpha.27",
-    "@storybook/addon-controls": "7.0.0-alpha.27",
-    "@storybook/addon-docs": "7.0.0-alpha.27",
-    "@storybook/addon-highlight": "7.0.0-alpha.27",
-    "@storybook/addon-interactions": "7.0.0-alpha.27",
-    "@storybook/addon-jest": "7.0.0-alpha.27",
-    "@storybook/addon-links": "7.0.0-alpha.27",
-    "@storybook/addon-storyshots": "7.0.0-alpha.27",
-    "@storybook/addon-storyshots-puppeteer": "7.0.0-alpha.27",
-    "@storybook/addon-storysource": "7.0.0-alpha.27",
-    "@storybook/addon-toolbars": "7.0.0-alpha.27",
-    "@storybook/addon-viewport": "7.0.0-alpha.27",
-    "@storybook/addons": "7.0.0-alpha.27",
-    "@storybook/cli": "7.0.0-alpha.27",
-    "@storybook/components": "7.0.0-alpha.27",
-    "@storybook/core-events": "7.0.0-alpha.27",
+    "@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.27",
-    "@storybook/react": "7.0.0-alpha.27",
-    "@storybook/react-webpack5": "7.0.0-alpha.27",
-    "@storybook/router": "7.0.0-alpha.27",
-    "@storybook/source-loader": "7.0.0-alpha.27",
+    "@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.27",
+    "@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.27",
+    "storybook": "7.0.0-alpha.31",
    "terser-webpack-plugin": "^5.3.1",
    "uuid-browser": "^3.1.0",
    "webpack": "5"
--- a/code/examples/official-storybook/stories/addon-actions.stories.js
+++ b/code/examples/official-storybook/stories/addon-actions.stories.js
@ -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 }) => (
-  <Button {...{ onClick, onFocus }}>Hello World</Button>
-);
-
-ArgTypesExample.argTypes = {
-  onClick: { action: 'clicked!' },
-  onFocus: { action: true },
-};
-
-export const ArgTypesRegexExample = (args, context) => {
-  const { someFunction, onClick, onFocus } = args;
-  return (
-    <Button onMouseOver={someFunction} {...{ onClick, onFocus }}>
-      Hello World
-    </Button>
-  );
-};
-
-ArgTypesRegexExample.parameters = { actions: { argTypesRegex: '^on.*' } };
-ArgTypesRegexExample.argTypes = { someFunction: {}, onClick: {}, onFocus: {} };
-
-export const BasicExample = () => <Button onClick={action('hello-world')}>Hello World</Button>;
-
-BasicExample.storyName = 'Basic example';
-
-export const MultipleActions = () => (
-  <Button {...actions('onClick', 'onMouseOver')}>Hello World</Button>
-);
-
-MultipleActions.storyName = 'Multiple actions';
-
-export const MultipleActionsConfig = () => (
-  <Button {...actions('onClick', 'onMouseOver', { clearOnStoryChange: false })}>
-    Moving away from this story will persist the action logger
-  </Button>
-);
-
-MultipleActionsConfig.storyName = 'Multiple actions + config';
-
-export const MultipleActionsAsObject = () => (
-  <Button {...actions({ onClick: 'clicked', onMouseOver: 'hovered' })}>Hello World</Button>
-);
-
-MultipleActionsAsObject.storyName = 'Multiple actions as object';
-
-export const MultipleActionsObjectConfig = () => (
-  <Button
-    {...actions({ onClick: 'clicked', onMouseOver: 'hovered' }, { clearOnStoryChange: false })}
-  >
-    Moving away from this story will persist the action logger
-  </Button>
-);
-
-MultipleActionsObjectConfig.storyName = 'Multiple actions, object + config';
-
-export const CircularPayload = () => {
-  const circular = { foo: {} };
-  circular.foo.circular = circular;
-  return <Button onClick={() => action('circular')(circular)}>Circular Payload</Button>;
-};
-
-export const ReservedKeywordAsName = () => <Button onClick={action('delete')}>Delete</Button>;
-
-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 (
-    <Fragment>
-      <Button onClick={() => action('Array')(['foo', 'bar', { foo: 'bar' }])}>Array</Button>
-      <Button onClick={() => action('Boolean')(false)}>Boolean</Button>
-      <Button onClick={() => action('Empty Object')({})}>Empty Object</Button>
-      <Button onClick={() => action('File')(file)}>File</Button>
-      <Button onClick={() => action('Function', { allowFunction: true })(A)}>Function A</Button>
-      <Button onClick={() => action('Function (bound)', { allowFunction: true })(bound)}>
-        Bound Function B
-      </Button>
-      <Button onClick={() => action('Infinity')(Infinity)}>Infinity</Button>
-      <Button onClick={() => action('-Infinity')(-Infinity)}>-Infinity</Button>
-      <Button onClick={() => action('NaN')(NaN)}>NaN</Button>
-      <Button onClick={() => action('null')(null)}>null</Button>
-      <Button onClick={() => action('Number')(10000)}>Number</Button>
-      <Button
-        onClick={() =>
-          action('Multiple')(
-            'foo',
-            1000,
-            true,
-            false,
-            [1, 2, 3],
-            null,
-            undefined,
-            { foo: 'bar' },
-            globalWindow
-          )
-        }
-      >
-        Multiple
-      </Button>
-      <Button onClick={() => action('Plain Object')({ foo: { bar: { baz: { bar: 'foo' } } } })}>
-        Plain Object
-      </Button>
-      <Button
-        onClick={() =>
-          action('ObjectDepth2', { depth: 2 })({ root: { one: { two: { three: 'foo' } } } })
-        }
-      >
-        Object (depth: 2)
-      </Button>
-      <Button onClick={() => action('RegExp')(reg)}>RegExp</Button>
-      <Button onClick={() => action('String')('foo')}>String</Button>
-      <Button onClick={() => action('Symbol')(Symbol('A_SYMBOL'))}>Symbol</Button>
-      <Button onClick={action('SyntheticMouseEvent')}>SyntheticEvent</Button>
-      <Button onClick={() => action('undefined')(undefined)}>undefined</Button>
-      <Button onClick={() => action('window')(globalWindow)}>Window</Button>
-    </Fragment>
-  );
-};
-
-AllTypes.storyName = 'All types';
-
-export const ConfigureActionsDepth = () => {
-  configureActions({
-    depth: 2,
-  });
-
-  return (
-    <Button onClick={() => action('ConfiguredDepth')({ root: { one: { two: { three: 'foo' } } } })}>
-      Object (configured depth: 2)
-    </Button>
-  );
-};
-
-export const PersistingTheActionLogger = () => (
-  <Fragment>
-    <p>Moving away from this story will persist the action logger</p>
-    <Button onClick={action('clear-action-logger', { clearOnStoryChange: false })}>
-      Object (configured clearOnStoryChange: false)
-    </Button>
-  </Fragment>
-);
-
-PersistingTheActionLogger.storyName = 'Persisting the action logger';
-
-export const LimitActionOutput = () => {
-  configureActions({
-    limit: 2,
-  });
-
-  return (
-    <Fragment>
-      <Button onClick={() => action('False')(false)}>False</Button>
-      <Button onClick={() => action('True')(true)}>True</Button>
-    </Fragment>
-  );
-};
-
-export const SkippedViaDisableTrue = () => (
-  <Button onClick={action('hello-world')}>Hello World</Button>
-);
-
-SkippedViaDisableTrue.storyName = 'skipped via disable:true';
-
-SkippedViaDisableTrue.parameters = {
-  actions: { disable: true },
-};
--- a/code/examples/official-storybook/stories/addon-backgrounds.stories.js
+++ b/code/examples/official-storybook/stories/addon-backgrounds.stories.js
@ -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) => <BaseButton {...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',
-};
--- 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 = () => <Button>Not a story</Button>; // another one

 <Canvas>
  <Story name="hello story">
-    <Button onClick={action('clicked')}>hello world</Button>
+    <Button>hello world</Button>
  </Story>
  <Story name="goodbye">
-    <Button onClick={action('clicked')}>goodbye world</Button>
+    <Button>goodbye world</Button>
  </Story>
  <Story name="with icons">
-    <Button onClick={action('clicked')}>🤘🚀💯</Button>
+    <Button>🤘🚀💯</Button>
  </Story>
  <Story name="notes" parameters={{ notes: 'story notes' }}>
-    <Button onClick={action('clicked')}>goodbye world</Button>
+    <Button>goodbye world</Button>
  </Story>
  <Story name="plaintext">Plain text</Story>
 </Canvas>

 <Story name="solo story">
-  <Button onClick={action('clicked')}>solo</Button>
+  <Button>solo</Button>
 </Story>

 <Story name="iframe story" inline={false} height="100px">
@ -120,7 +119,7 @@ export const nonStory2 = () => <Button>Not a story</Button>; // another one
 <Source name="hello story" />

 <Canvas>
-  <Button onClick={action('clicked')}>view source in Canvas</Button>
+  <Button>view source in Canvas</Button>
 </Canvas>

 ## Configurable height
@ -192,7 +191,7 @@ Fixed layout requires custom `height` since it can't be determined.

 <Canvas withSource="none">
  <Story name="no source Canvas">
-    <Button onClick={action('clicked')}>solo</Button>
+    <Button>solo</Button>
  </Story>
 </Canvas>

--- 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 <Button onClick={action('button clicked')}>OK {x}</Button>;
+  return <Button>OK {x}</Button>;
 };

 const typeOptions = {
--- 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 <span>See action logger</span>;
 };
--- a/code/examples/official-storybook/stories/addon-viewport/custom-default.stories.js
+++ b/code/examples/official-storybook/stories/addon-viewport/custom-default.stories.js
@ -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 = () => (
-  <Panel>
-    I've inherited <b>Kindle Fire 2</b> viewport from my parent.
-  </Panel>
-);
-
-export const OverriddenViaWithViewportParameterizedDecorator = () => (
-  <Panel>
-    I respect my parents but I should be looking good on <b>iPad</b>.
-  </Panel>
-);
-OverriddenViaWithViewportParameterizedDecorator.storyName =
-  'Overridden via "withViewport" parameterized decorator';
-OverriddenViaWithViewportParameterizedDecorator.parameters = {
-  viewport: { defaultViewport: 'ipad' },
-};
-
-export const Disabled = () => <Panel>There should be no viewport selector in the toolbar</Panel>;
-
-Disabled.parameters = {
-  viewport: { disable: true },
-};
--- a/code/examples/official-storybook/stories/addon-viewport/default.stories.js
+++ b/code/examples/official-storybook/stories/addon-viewport/default.stories.js
@ -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 = () => (
-  <Panel>I don't have problems being rendered using the default viewport.</Panel>
-);
-DefaultFn.storyName = 'default';
--- a/code/examples/official-storybook/stories/core/args.stories.tsx
+++ b/code/examples/official-storybook/stories/core/args.stories.tsx
@ -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<typeof useArgs>[1];
-type ResetArgs = ReturnType<typeof useArgs>[2];
-
-const ArgUpdater: FC<{ args: CustomArgs; updateArgs: UpdateArgs; resetArgs: ResetArgs }> = ({
-  args,
-  updateArgs,
-  resetArgs,
-}) => {
-  const [argsInput, updateArgsInput] = useState(JSON.stringify(args));
-
-  return (
-    <div>
-      <h3>Hooks args:</h3>
-      <pre>{JSON.stringify(args)}</pre>
-      <form
-        onSubmit={(e) => {
-          e.preventDefault();
-          updateArgs(JSON.parse(argsInput));
-        }}
-      >
-        <textarea value={argsInput} onChange={(e) => updateArgsInput(e.target.value)} />
-        <br />
-        <button type="submit">Change</button>
-        <button type="button" onClick={() => resetArgs()}>
-          Reset all
-        </button>
-      </form>
-    </div>
-  );
-};
-
-export default {
-  title: 'Core/Args',
-  decorators: [
-    (story) => {
-      const [args, updateArgs, resetArgs] = useArgs<CustomArgs>();
-
-      return (
-        <>
-          {story()}
-          <ArgUpdater args={args} updateArgs={updateArgs} resetArgs={resetArgs} />
-        </>
-      );
-    },
-  ],
-};
-
-const Template = (args) => {
-  return (
-    <div>
-      <h3>Input args:</h3>
-      <pre>{JSON.stringify(args)}</pre>
-    </div>
-  );
-};
-
-export const PassedToStory = Template.bind({});
-
-PassedToStory.argTypes = { name: { defaultValue: 'initial', control: 'text' } };
-
-export const OtherValues = Template.bind({});
-
-OtherValues.argTypes = { name: { control: 'text' } };
-
-export const DifferentSet = Template.bind({});
-DifferentSet.args = {
-  foo: 'bar',
-  bar: 2,
-} as CustomArgs;
-
-export const TestUndefinedArgs = Template.bind({});
-TestUndefinedArgs.args = {
-  first: 'Bob',
-  last: 'Miller',
-  foo: 'bar',
-} as CustomArgs;
-TestUndefinedArgs.argTypes = {
-  first: {
-    control: { type: 'select' },
-    options: ['Bob', 'Alice'],
-  },
-  last: {
-    control: { type: 'select' },
-    options: ['Miller', 'Meyer'],
-  },
-  foo: {
-    control: { type: 'text' },
-  },
-};
--- a/code/examples/official-storybook/stories/core/async.stories.inactive.js
+++ b/code/examples/official-storybook/stories/core/async.stories.inactive.js
@ -1,31 +0,0 @@
-// storiesOf('Core|Async', module).add('storyFn returns a Promise', () =>
-//   Promise.resolve(<div>I Promise!</div>)
-// );
-
-// const AsyncStories = storiesOf('Core|Async', module);
-
-// setTimeout(() => {
-//   AsyncStories.add('.add called in setTimeout', () => <div>Added late</div>);
-// });
-
-// import('fast-deep-equal').then(m => {
-//   storiesOf('Core|Async', module).add('storyOf is added async', () => (
-//     <div>{m.default('foo', 'foo') ? 'TRUE' : 'FALSE'}</div>
-//   ));
-// });
-
-// storiesOf('Core|Async', module).add('storyFn returns a Promise', () =>
-//   Promise.resolve(<div>I Promise!</div>)
-// );
-
-// const AsyncStories = storiesOf('Core|Async', module);
-
-// setTimeout(() => {
-//   AsyncStories.add('.add called in setTimeout', () => <div>Added late</div>);
-// });
-
-// import('fast-deep-equal').then(m => {
-//   storiesOf('Core|Async', module).add('storyOf is added async', () => (
-//     <div>{m.default('foo', 'foo') ? 'TRUE' : 'FALSE'}</div>
-//   ));
-// });
--- a/code/examples/official-storybook/stories/core/decorators.stories.js
+++ b/code/examples/official-storybook/stories/core/decorators.stories.js
@ -1,57 +0,0 @@
-import React from 'react';
-
-// We would need to add this in config.js idiomatically however that would make this file a bit confusing
-import { addDecorator } from '@storybook/react';
-
-addDecorator((s, { kind }) =>
-  kind === 'Core/Decorators' ? (
-    <>
-      <p>Global Decorator</p>
-      {s()}
-    </>
-  ) : (
-    s()
-  )
-);
-
-export default {
-  title: 'Core/Decorators',
-  decorators: [
-    (s) => (
-      <>
-        <p>Kind Decorator</p>
-        {s()}
-      </>
-    ),
-  ],
-};
-
-export const All = () => <p>Story</p>;
-All.decorators = [
-  (s) => (
-    <>
-      <p>Local Decorator</p>
-      {s()}
-    </>
-  ),
-];
-
-export const PropOverride = (args, { prop1, prop2 }) => (
-  <p>
-    Story prop: <pre>{JSON.stringify({ prop1, prop2 })}</pre>
-  </p>
-);
-PropOverride.decorators = [
-  (Story) => (
-    <>
-      <p>First local Decorator</p>
-      <Story prop1="prop1" />
-    </>
-  ),
-  (Story) => (
-    <>
-      <p>Second Local Decorator</p>
-      <Story prop2="prop2" />
-    </>
-  ),
-];
--- a/code/examples/official-storybook/stories/core/errors.stories.js
+++ b/code/examples/official-storybook/stories/core/errors.stories.js
@ -1,39 +0,0 @@
-import React, { Fragment } from 'react';
-
-const badOutput = { renderable: 'no, react can not render objects' };
-const BadComponent = () => badOutput;
-
-export default {
-  title: 'Core/Errors',
-};
-
-export const Exception = () => {
-  throw new Error('storyFn threw an error! WHOOPS');
-};
-Exception.storyName = 'story throws exception';
-
-Exception.parameters = {
-  storyshots: { disable: true },
-  chromatic: { disable: true },
-};
-
-export const BadComponentStory = () => (
-  <Fragment>
-    <div>Hello world</div>
-    <BadComponent />
-  </Fragment>
-);
-BadComponentStory.storyName = 'story errors - invariant error';
-
-BadComponentStory.parameters = {
-  storyshots: { disable: true },
-  chromatic: { disable: true },
-};
-
-export const BadStory = () => badOutput;
-BadStory.storyName = 'story errors - story un-renderable type';
-
-BadStory.parameters = {
-  storyshots: { disable: true },
-  chromatic: { disable: true },
-};
--- a/code/examples/official-storybook/stories/core/events.stories.js
+++ b/code/examples/official-storybook/stories/core/events.stories.js
@ -1,17 +0,0 @@
-import React from 'react';
-import { addons } from '@storybook/addons';
-import { FORCE_RE_RENDER } from '@storybook/core-events';
-import { Button } from '@storybook/components';
-
-let timesClicked = 0;
-const increment = () => {
-  timesClicked += 1;
-  addons.getChannel().emit(FORCE_RE_RENDER);
-};
-
-export default {
-  title: 'Core/Events',
-};
-
-export const Force = () => <Button onClick={increment}>Clicked: {timesClicked}</Button>;
-Force.storyName = 'Force re-render';
--- a/code/examples/official-storybook/stories/core/globals.stories.js
+++ b/code/examples/official-storybook/stories/core/globals.stories.js
@ -1,69 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-
-import { useGlobals } from '@storybook/client-api';
-
-// eslint-disable-next-line react/prop-types
-const ArgUpdater = ({ args, updateArgs }) => {
-  const [argsInput, updateArgsInput] = useState(JSON.stringify(args));
-
-  return (
-    <div>
-      <h3>Hooks args:</h3>
-      <pre>{JSON.stringify(args)}</pre>
-      <form
-        onSubmit={(e) => {
-          e.preventDefault();
-          updateArgs(JSON.parse(argsInput));
-        }}
-      >
-        <textarea value={argsInput} onChange={(e) => updateArgsInput(e.target.value)} />
-        <br />
-        <button type="submit">Change</button>
-      </form>
-    </div>
-  );
-};
-
-export default {
-  title: 'Core/Global Args',
-  parameters: { passArgsFirst: false },
-  decorators: [
-    (story) => {
-      const [globals, updateGlobals] = useGlobals();
-
-      return (
-        <>
-          {story()}
-          <ArgUpdater args={globals} updateArgs={updateGlobals} />
-        </>
-      );
-    },
-  ],
-};
-
-export const PassedToStory = ({ globals }) => {
-  return (
-    <div>
-      <h3>Global args:</h3>
-      <pre>{JSON.stringify(globals)}</pre>
-    </div>
-  );
-};
-
-PassedToStory.propTypes = {
-  globals: PropTypes.shape({}).isRequired,
-};
-
-export const SecondStory = ({ globals }) => {
-  return (
-    <div>
-      <h3>Global args (2):</h3>
-      <pre>{JSON.stringify(globals)}</pre>
-    </div>
-  );
-};
-
-SecondStory.propTypes = {
-  globals: PropTypes.shape({}).isRequired,
-};
--- a/code/examples/official-storybook/stories/core/interleaved-exports.stories.js
+++ b/code/examples/official-storybook/stories/core/interleaved-exports.stories.js
@ -1,16 +0,0 @@
-/* eslint-disable import/first,import/no-duplicates */
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Core/Interleaved exports',
-  parameters: { chromatic: { disable: true } },
-};
-
-import { Welcome } from '../../components/react-demo';
-
-export const First = () => <Welcome showApp={action('show')} />;
-
-import { Button } from '../../components/react-demo';
-
-export const Second = () => <Button onClick={action('click')}>Second</Button>;
--- a/code/examples/official-storybook/stories/core/layout.stories.js
+++ b/code/examples/official-storybook/stories/core/layout.stories.js
@ -1,48 +0,0 @@
-import React from 'react';
-
-// eslint-disable-next-line react/prop-types
-const Box = ({ children, display = 'block', width, height }) => (
-  <div style={{ display, border: '2px solid #FF4785', padding: 10, width, height }}>{children}</div>
-);
-
-export default {
-  title: 'Core/Layout',
-  parameters: {
-    layout: 'centered',
-  },
-};
-
-export const Default = () => <Box>padded by default</Box>;
-
-export const PaddedBlock = () => <Box>padded</Box>;
-PaddedBlock.parameters = { layout: 'padded' };
-
-export const PaddedInline = () => <Box display="inline-block">padded</Box>;
-PaddedInline.parameters = { layout: 'padded' };
-
-export const FullscreenBlock = () => <Box>fullscreen</Box>;
-FullscreenBlock.parameters = { layout: 'fullscreen' };
-
-export const FullscreenInline = () => <Box display="inline-block">fullscreen</Box>;
-FullscreenInline.parameters = { layout: 'fullscreen' };
-
-export const CenteredBlock = () => <Box>centered</Box>;
-CenteredBlock.parameters = { layout: 'centered' };
-
-export const CenteredInline = () => <Box display="inline-block">centered</Box>;
-CenteredInline.parameters = { layout: 'centered' };
-
-export const CenteredTall = () => <Box height="120vh">centered tall</Box>;
-CenteredTall.parameters = { layout: 'centered' };
-
-export const CenteredWide = () => <Box width="120vw">centered wide</Box>;
-CenteredWide.parameters = { layout: 'centered' };
-
-export const None = () => <Box>none</Box>;
-None.parameters = { layout: 'none' };
-
-export const Inherited = () => <Box>none</Box>;
-Inherited.parameters = {};
-
-export const Invalid = () => <Box>invalid layout value</Box>;
-Invalid.parameters = { layout: '!invalid!' };
--- a/code/examples/official-storybook/stories/core/layout.stories.mdx
+++ b/code/examples/official-storybook/stories/core/layout.stories.mdx
@ -1,45 +0,0 @@
-import { Meta, Canvas, Story } from '@storybook/addon-docs';
-import { Button } from '../../components/react-demo';
-
-<Meta
-  title="Core/Layout MDX"
-  component={Button}
-  id="core-layout-mdx"
-  decorators={[(storyFn) => <div style={{ backgroundColor: 'yellow' }}>{storyFn()}</div>]}
-/>
-
-# Layout parameter
-
-This tests Storybook's built-in `layout` parameter, both as its applied in the canvas, and also how it's handled by the `Canvas` block in `addon-docs`.
-
-## Default
-
-<Canvas withToolbar>
-  <Story name="defaultValue">
-    <Button>Hello world</Button>
-  </Story>
-</Canvas>
-
-## Padded
-
-<Canvas withToolbar>
-  <Story name="padded" parameters={{ layout: 'padded' }}>
-    <Button>Hello world</Button>
-  </Story>
-</Canvas>
-
-## Fullscreen
-
-<Canvas withToolbar>
-  <Story name="fullscreen" parameters={{ layout: 'fullscreen' }}>
-    <Button>Hello world</Button>
-  </Story>
-</Canvas>
-
-## Centered
-
-<Canvas withToolbar>
-  <Story name="centered" parameters={{ layout: 'centered' }}>
-    <Button>Hello world</Button>
-  </Story>
-</Canvas>
--- a/Show More
+++ b/Show More