diff --git a/.circleci/config.yml b/.circleci/config.yml index b1180e8f12c..aa88ad7d972 100644 --- 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' diff --git a/CHANGELOG.md b/CHANGELOG.md index f7141bd54d3..376ca6e835a 100644 --- 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 diff --git a/MIGRATION.md b/MIGRATION.md index 9db98fc45d9..c655a4a38ac 100644 --- 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. diff --git a/code/__mocks__/inject-decorator.stories.txt b/code/__mocks__/inject-decorator.stories.txt index a8eb61d2f22..0b3ba7747b1 100644 --- a/code/__mocks__/inject-decorator.stories.txt +++ b/code/__mocks__/inject-decorator.stories.txt @@ -1,7 +1,6 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import { withInfo } from '@storybook/addon-info'; -import { action } from '@storybook/addon-actions'; import { DocgenButton } from '../components/DocgenButton'; import FlowTypeButton from '../components/FlowTypeButton'; @@ -13,19 +12,19 @@ storiesOf('Addons|Info.React Docgen', module) 'Comments from PropType declarations', withInfo( 'Comments above the PropType declarations should be extracted from the React component file itself and rendered in the Info Addon prop table' - )(() => ) + )(() => ) ) .add( 'Comments from Flow declarations', withInfo( 'Comments above the Flow declarations should be extracted from the React component file itself and rendered in the Info Addon prop table' - )(() => ) + )(() => ) ) .add( 'Comments from component declaration', withInfo( 'Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading' - )(() => ) + )(() => ) ); const markdownDescription = ` @@ -41,7 +40,7 @@ Maybe include a [link](http://storybook.js.org) to your project as well. storiesOf('Addons|Info.Markdown', module).add( 'Displays Markdown in description', - withInfo(markdownDescription)(() => ) + withInfo(markdownDescription)(() => ) ); storiesOf('Addons|Info.Options.inline', module).add( diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index d8dbc2dc6a4..a4690ee11c3 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "7.0.0-alpha.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", diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index d8814c06f7b..bab58fb04ad 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "7.0.0-alpha.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": [ diff --git a/code/addons/actions/src/components/ActionLogger/index.tsx b/code/addons/actions/src/components/ActionLogger/index.tsx index 9511b1f07d5..762c4b6d1d3 100644 --- a/code/addons/actions/src/components/ActionLogger/index.tsx +++ b/code/addons/actions/src/components/ActionLogger/index.tsx @@ -2,7 +2,7 @@ import React, { FC, Fragment } from 'react'; import { styled, withTheme } from '@storybook/theming'; import type { Theme } from '@storybook/theming'; -import Inspector from 'react-inspector'; +import { Inspector } from 'react-inspector'; import { ActionBar, ScrollArea } from '@storybook/components'; import { Action, InspectorContainer, Counter } from './style'; @@ -27,7 +27,7 @@ interface InspectorProps { } const ThemedInspector = withTheme(({ theme, ...props }: InspectorProps) => ( - + )); interface ActionLoggerProps { diff --git a/code/addons/actions/src/preview/action.ts b/code/addons/actions/src/preview/action.ts index 05c1f7bb589..b0c874e41cb 100644 --- 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 = (a: T) => { if (isReactSyntheticEvent(a)) { const e: SyntheticEvent = Object.create( - // @ts-ignore + // @ts-expect-error (Converted from ts-ignore) a.constructor.prototype, Object.getOwnPropertyDescriptors(a) ); diff --git a/code/addons/actions/src/typings.d.ts b/code/addons/actions/src/typings.d.ts index 7361d8d2103..74f6623d478 100644 --- a/code/addons/actions/src/typings.d.ts +++ b/code/addons/actions/src/typings.d.ts @@ -1,4 +1,3 @@ // TODO: following packages need definition files or a TS migration declare module 'global'; -declare module 'react-inspector'; declare module 'uuid-browser/v4'; diff --git a/code/addons/actions/template/stories/argtype.stories.ts b/code/addons/actions/template/stories/argtype.stories.ts new file mode 100644 index 00000000000..bc1311bafdf --- /dev/null +++ b/code/addons/actions/template/stories/argtype.stories.ts @@ -0,0 +1,26 @@ +import globalThis from 'global'; + +export default { + component: globalThis.Components.Button, + args: { + children: 'Click Me!', + }, + argTypes: { + onClick: {}, + }, + parameters: { + chromatic: { disable: true }, + actions: { argTypesRegex: '^on.*' }, + }, +}; + +export const String = { + argTypes: { + onClick: { action: 'clicked!' }, + }, +}; +export const Boolean = { + argTypes: { + onClick: { action: true }, + }, +}; diff --git a/code/addons/actions/template/stories/basics.stories.ts b/code/addons/actions/template/stories/basics.stories.ts new file mode 100644 index 00000000000..08e2fa74307 --- /dev/null +++ b/code/addons/actions/template/stories/basics.stories.ts @@ -0,0 +1,99 @@ +import globalThis from 'global'; + +import { action } from '@storybook/addon-actions'; + +export default { + component: globalThis.Components.Button, + args: { + children: 'Click Me!', + }, + parameters: { + chromatic: { disable: true }, + }, +}; + +export const Basic = { + args: { onClick: action('onClick') }, +}; + +export const TypeString = { + args: { onClick: () => action('onClick')('string') }, +}; +export const TypeBoolean = { + args: { onClick: () => action('onClick')(false) }, +}; +export const TypeObject = { + args: { onClick: () => action('onClick')({}) }, +}; +export const TypeNull = { + args: { onClick: () => action('onClick')(null) }, +}; +export const TypeUndefined = { + args: { onClick: () => action('onClick')(undefined) }, +}; +export const TypeNaN = { + args: { onClick: () => action('onClick')(NaN) }, +}; +export const TypeInfinity = { + args: { onClick: () => action('onClick')(Infinity) }, +}; +export const TypeMinusInfinity = { + args: { onClick: () => action('onClick')(-Infinity) }, +}; +export const TypeNumber = { + args: { onClick: () => action('onClick')(10000) }, +}; +export const TypeGlobal = { + args: { onClick: () => action('onClick')(globalThis) }, +}; +export const TypeSymbol = { + args: { onClick: () => action('onClick')(Symbol('MySymbol')) }, +}; +export const TypeRegExp = { + args: { onClick: () => action('onClick')(new RegExp('MyRegExp')) }, +}; +export const TypeArray = { + args: { onClick: () => action('onClick')(['a', 'b', 'c']) }, +}; +export const TypeClass = { + args: { onClick: () => action('onClick')(class MyClass {}) }, +}; +export const TypeFunction = { + args: { onClick: () => action('onClick')(function MyFunction() {}) }, +}; +export const TypeMultiple = { + args: { onClick: () => action('onClick')('string', true, false, null, undefined, [], {}) }, +}; + +export const Cyclical = { + args: { + onClick: () => + action('onClick')( + (() => { + const cyclical: Record = {}; + cyclical.cyclical = cyclical; + return cyclical; + })() + ), + }, +}; + +export const Reserved = { + args: { onClick: action('delete') }, +}; + +export const OptionPersist = { + args: { onClick: action('onClick', { clearOnStoryChange: false }) }, +}; +export const OptionDepth = { + args: { onClick: action('onClick', { depth: 2 }) }, +}; + +export const Disabled = { + args: { onClick: action('onCLick') }, + parameters: { + actions: { + disabled: true, + }, + }, +}; diff --git a/code/addons/actions/template/stories/basics.stories.tsx b/code/addons/actions/template/stories/basics.stories.tsx deleted file mode 100644 index 98cd1ee4952..00000000000 --- a/code/addons/actions/template/stories/basics.stories.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import globalThis from 'global'; - -import { action } from '@storybook/addon-actions'; - -export default { - component: globalThis.Components.Button, - args: { - children: 'Click Me!', - }, -}; - -export const BasicExample = { - args: { onClick: action('hello-world') }, -}; diff --git a/code/addons/actions/template/stories/configs.stories.ts b/code/addons/actions/template/stories/configs.stories.ts new file mode 100644 index 00000000000..b9ae404d4d3 --- /dev/null +++ b/code/addons/actions/template/stories/configs.stories.ts @@ -0,0 +1,36 @@ +import globalThis from 'global'; + +import { actions, configureActions } from '@storybook/addon-actions'; + +const configs = actions('actionA', 'actionB', 'actionC'); + +export default { + component: globalThis.Components.Button, + args: { + children: 'Click Me!', + }, + parameters: { + chromatic: { disable: true }, + }, +}; + +export const ActionA = { + args: { onClick: configs.actionA }, +}; +export const ActionB = { + args: { onClick: configs.actionB }, +}; +export const ActionC = { + args: { onClick: configs.actionC }, +}; + +export const ConfigureActions = { + args: { onClick: configs.actionA }, + decorators: [ + (storyFn: any) => { + configureActions({ depth: 2 }); + + return storyFn(); + }, + ], +}; diff --git a/code/addons/actions/template/stories/parameters.stories.ts b/code/addons/actions/template/stories/parameters.stories.ts new file mode 100644 index 00000000000..8ec8cb37186 --- /dev/null +++ b/code/addons/actions/template/stories/parameters.stories.ts @@ -0,0 +1,17 @@ +import globalThis from 'global'; + +export default { + component: globalThis.Components.Button, + args: { + children: 'Click Me!', + }, + parameters: { + chromatic: { disable: true }, + }, +}; + +export const Basic = { + parameters: { + handles: [{ click: 'clicked', contextmenu: 'right clicked' }], + }, +}; diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 2d9ee102650..1e1617b66c4 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "7.0.0-alpha.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", diff --git a/code/addons/backgrounds/template/stories/grid.stories.ts b/code/addons/backgrounds/template/stories/grid.stories.ts new file mode 100644 index 00000000000..f69be73bbfd --- /dev/null +++ b/code/addons/backgrounds/template/stories/grid.stories.ts @@ -0,0 +1,51 @@ +import globalThis from 'global'; + +export default { + component: globalThis.Components.Button, + args: { + children: 'Click Me!', + }, + parameters: { + backgrounds: { + grid: { + cellSize: 10, + cellAmount: 4, + opacity: 0.2, + }, + }, + chromatic: { disable: true }, + }, +}; + +export const Basic = { + parameters: {}, +}; + +export const Custom = { + parameters: { + backgrounds: { + grid: { + cellSize: 100, + cellAmount: 10, + opacity: 0.8, + }, + }, + }, +}; + +// Grid should have an offset of 0 when in fullscreen +export const Fullscreen = { + parameters: { + layout: 'fullscreen', + }, +}; + +export const Disabled = { + parameters: { + backgrounds: { + grid: { + disable: true, + }, + }, + }, +}; diff --git a/code/addons/backgrounds/template/stories/parameters.stories.ts b/code/addons/backgrounds/template/stories/parameters.stories.ts new file mode 100644 index 00000000000..06af6455ff2 --- /dev/null +++ b/code/addons/backgrounds/template/stories/parameters.stories.ts @@ -0,0 +1,87 @@ +import globalThis from 'global'; + +const COLORS = [ + { name: 'red', value: '#FB001D' }, + { name: 'orange', value: '#FB8118' }, + { name: 'yellow', value: '#FCFF0C' }, + { name: 'green', value: '#1AB408' }, + { name: 'blue', value: '#0F0084' }, + { name: 'purple', value: '#620073' }, +]; + +export default { + component: globalThis.Components.Button, + args: { + children: 'Click Me!', + }, + parameters: { + backgrounds: { + values: COLORS, + }, + chromatic: { disable: true }, + }, +}; + +export const Basic = { + parameters: {}, +}; + +export const Default = { + parameters: { + backgrounds: { + default: COLORS[0].name, + }, + }, +}; + +export const StorySpecific = { + parameters: { + backgrounds: { + default: 'white', + values: [ + { name: 'white', value: '#F9F5F1' }, + { name: 'pink', value: '#F99CB4' }, + { name: 'teal', value: '#67CDE8' }, + { name: 'brown', value: '#4D2C10' }, + { name: 'black', value: '#000400' }, + ], + }, + }, +}; + +export const Gradient = { + parameters: { + backgrounds: { + default: 'gradient', + values: [ + { + name: 'gradient', + value: 'linear-gradient(90deg, #CA005E 0%, #863783 50%, #112396)', + }, + ], + }, + }, +}; + +const img = + 'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTkwIDQ3NSIgZmlsbD0ibm9uZSI+CiAgPGcgaWQ9ImNvbXBvbmVudC1jb21wb3NpdGlvbiI+CiAgICA8bWFzayBpZD0iY29tcG9uZW50cyIgd2lkdGg9IjcxMSIgaGVpZ2h0PSI2NjciIHg9Ii01MiIgeT0iLTg2IiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTY1OC4wMiAxODEuNDAzbC00NC4zMTItLjAwMS0uMDAxIDEzMi4xODVoNDQuMzEzdjQ1LjA2NmgtNDQuMzEybC0uMDAxIDEzMi45MzktODguNjI1LS4wMDEtLjAwMSA4OC42MjZoLTQ1LjA2NnYtNDQuMzEybC00NC4zMTItLjAwMXYtNDQuMzEzaC04Ny44NzJsLS4wMDEgNDQuMzEzLTQ0LjMxMi4wMDF2NDQuMzEyaC00NS4wNjZ2LTQ0LjMxM2gtNDQuMzEzdi00NC4zMTJsLTQzLjU1OC0uMDAxLS4wMDIgNDQuMzEzaC00NS4wNjZsLjAwMS00NC4zMTMtNDMuNTYuMDAxdjQ0LjMxMkgzNi44ODh2LTQ0LjMxM2wtNDMuNTYuMDAxdjg4LjYyNWgtNDUuMDY2VjM1Ny45aDQ0LjMxNHYtNDMuNTU5aC00NC4zMTN2LTQ1LjA2Nmg0NC4zMTNWMTM3LjA5aC00NC4zMTNWOTIuMDI0bDQ0LjMxMy0uMDAxVjQuMTUyaC00NC4zMTN2LTQ1LjA2NkgzNy42NFYzLjM5OEgyMTQuMTRsLS4wMDEtNDQuMzEyaDQ1LjA2NlYzLjM5OGgyMjAuODExbC0uMDAxLTg4LjYyNWg0NS4wNjZsLjAwMSA0NC4zMTNoNDQuMzEybC4wMDEgNDQuMzEyaDQ0LjMxMmwuMDAxIDg4LjYyNWg0NC4zMTJ2ODkuMzh6TTM2Ljg4OCAzNTcuOVYyMjUuNzE2aC00My41NnY0NC4zMTJoLTQ0LjMxMnY0My41Nmw0NC4zMTMtLjAwMVYzNTcuOWg0My41NnptMCA4OC42MjV2LTg3Ljg3MmgtODcuODcydjg3Ljg3Mmg4Ny44NzJ6bTAtMjIxLjU2M1Y5Mi43NzdoLTg3Ljg3MnY0My41Nmw0NC4zMTMtLjAwMXY4OC42MjZoNDMuNTU5ek04MS4yIDQ3LjcxMVY0LjE1SDM2Ljg4OFYtNDAuMTZoLTg3Ljg3MnY0My41Nmg0NC4zMTNWNDcuNzFIODEuMnpNMzYuODg4IDQ5MC44Mzl2LTQzLjU2aC04Ny44NzJ2MTMyLjE4NWg0My41NnYtODguNjI2bDQ0LjMxMi4wMDF6bTg4LjYyNi0zOTguMDYySDgxLjIwMVY0OC40NjRILTYuNjcxdjQzLjU2SDM3LjY0djQ0LjMxMmg4Ny44NzN2LTQzLjU2em0tLjAwMSAxMzIuMTg1di00My41NmwtNDQuMzEyLjAwMVYxMzcuMDlIMzcuNjR2MTMyLjE4NGg0My41NnYtNDQuMzEyaDQ0LjMxMnptMCAyNjUuODc2di00My41NTlIODEuMjAxdi00NC4zMTNIMzcuNjR2MTMyLjE4NWg0My41NnYtNDQuMzEzaDQ0LjMxMnptLjAwMS0xNzcuMjUxdi00My41NTlIMzcuNjQydjEzMi4xODVIODEuMnYtODguNjI2aDQ0LjMxM3ptODguNjI1LTEzMi45MzhsLjAwMS00My41NTlIODEuOTU1bC0uMDAxIDQzLjU1OWg0NC4zMTN2NDQuMzEzaDQzLjU1OXYtNDQuMzEzaDQ0LjMxM3ptMC04OC42MjVWNC4xNTJIODEuOTU0djQzLjU2bDg4LjYyNS0uMDAxLjAwMSA0NC4zMTJoNDMuNTU5em0wIDE3Ny4yNXYtNDMuNTU5SDgxLjk1NHY0My41NTlIMjE0LjE0em0wLTEzMi45Mzh2LTQzLjU2bC00NC4zMTMuMDAxVjQ4LjQ2NEg4MS45NTR2NDMuNTZoNDQuMzEzdjQ0LjMxMmg4Ny44NzJ6bS00NC4zMTMgMjY1Ljg3N3YtNDMuNTZoLTQ0LjMxM2wuMDAxLTQ0LjMxMmgtNDMuNTZ2MTMyLjE4NGw0My41NTkuMDAxdi00NC4zMTNoNDQuMzEzem00NC4zMTMtNDQuMzEzdi04Ny44NzJoLTg3Ljg3MlYzNTcuOWg4Ny44NzJ6bTAgODguNjI2di00My41NmgtODcuODcydjEzMi4xODVoNDMuNTU5di04OC42MjVoNDQuMzEzem04OC42MjYtMjY1Ljg3N2wtLjAwMS00My41NTloLTg3Ljg3MnY0NC4zMTNIMTcwLjU4djQzLjU1OWg4Ny44NzJ2LTQ0LjMxM2g0NC4zMTN6bTAgMzEwLjE4OXYtNDMuNTU5SDE3MC41OHY0My41NTloNDQuMzEybC4wMDEgNDQuMzEzaDQzLjU1OXYtNDQuMzEzaDQ0LjMxM3ptMC04Ny44NzJoLTQ0LjMxM3YtNDQuMzEzSDE3MC41OHY0My41Nmg0NC4zMTJsLjAwMSA0NC4zMTJoODcuODcydi00My41NTl6bTQ0LjMxMi0yMjIuMzE3bC4wMDEtODcuODcySDIxNC44OTJ2NDMuNTZsODguNjI2LS4wMDEuMDAxIDQ0LjMxM2g0My41NTh6TTMwMi43NjQgNDcuNzExVjQuMTVoLTQ0LjMxMmwtLjAwMS00NC4zMTJoLTQzLjU1OVY5Mi4wMjRsNDMuNTYtLjAwMVY0Ny43MWg0NC4zMTJ6bS00NC4zMTMgMjIxLjU2NGwuMDAxLTQzLjU2aC00My41NTl2NDMuNTU5bDQzLjU1OC4wMDF6bTg4LjYyNyA4OC42MjVsLS4wMDEtNDMuNTU5SDIxNC44OTNWMzU3LjloMTMyLjE4NXptLTg3Ljg3My04Ny44NzJoLTQ0LjMxM3Y0My41NTloODcuODcyVjE4MS40MDJsLTQzLjU1OS4wMDF2ODguNjI1ek0zOTEuMzkgNDcuNzExVjQuMTUxaC04Ny44NzJ2NDQuMzEzaC00NC4zMTN2NDMuNTZoODcuODcyVjQ3LjcxaDQ0LjMxM3ptLTg4LjYyNSAzNTQuNTAydi00My41NmgtNDMuNTZ2NDMuNTZoNDMuNTZ6bTQ0LjMxMiAxMzIuOTM4di04Ny44NzJoLTQzLjU1OXY0NC4zMTNoLTQ0LjMxM3Y4Ny44NzJoNDMuNTZsLS4wMDEtNDQuMzEzaDQ0LjMxM3ptNDQuMzEyLTEzMi45MzhsLjAwMS00My41NmgtODcuODcydjg3Ljg3Mmg0My41NTl2LTQ0LjMxMmg0NC4zMTJ6bTAtNDQuMzEzdi04Ny44NzJoLTQ0LjMxMnYtNDQuMzEzaC00My41NTh2ODcuODcyaDQ0LjMxMVYzNTcuOWg0My41NTl6bTQ0LjMxNC0xMzIuOTM4di00My41NkgzMDMuNTE4djQzLjU2aDQ0LjMxMmwuMDAxIDQ0LjMxMmg0My41NTl2LTQ0LjMxMmg0NC4zMTN6bTAgMjIxLjU2M1YzMTQuMzQxaC00My41NTlsLS4wMDEgODguNjI1aC00NC4zMTJsLS4wMDEgNDMuNTU5aDg3Ljg3M3ptNDQuMzEyIDQ0LjMxM3YtODcuODcyaC00My41NTl2NDQuMzEzSDM0Ny44M3Y0My41NTloMTMyLjE4NXptMC0zMTAuMTg5VjEzNy4wOUgzOTEuMzlWOTIuNzc3aC00My41NTl2ODcuODcyaDEzMi4xODR6bTAtODguNjI2VjQ4LjQ2NEgzNDcuODMxdjQzLjU2aDQ0LjMxMnY0NC4zMTJoNDMuNTZWOTIuMDI0aDQ0LjMxMnptLjAwMSAxNzcuMjUxbC0uMDAxLTg3Ljg3MWgtNDMuNTU5djQ0LjMxMmgtNDQuMzEydjg3Ljg3M2w0My41NTktLjAwMXYtNDQuMzEybDQ0LjMxMy0uMDAxem00NC4zMTItMTc3LjI1VjQuMTUySDM5Mi4xNDN2NDMuNTZsODguNjI2LS4wMDF2NDQuMzEzaDQzLjU1OXptNDQuMzEzIDg4LjYyNWwuMDAxLTQzLjU1OWgtNDQuMzE0VjkyLjc3N2gtODcuODcydjQzLjU1OWg0NC4zMTN2NDQuMzEzaDg3Ljg3MnpNNTI0LjMyOCAzNTcuOWwuMDAxLTQzLjU1OWgtNDQuMzE0bC4wMDEtNDQuMzEzaC00My41NmwuMDAxIDEzMi4xODQgNDMuNTU4LjAwMVYzNTcuOWg0NC4zMTN6bTAgMjIxLjU2NFY0NDcuMjc5aC00My41NTl2NDQuMzEzaC00NC4zMTN2NDMuNTU5aDQ0LjMxM3Y0NC4zMTNoNDMuNTU5em00NC4zMTMtODguNjI2di04Ny44NzJoLTQ0LjMxM3YtNDQuMzEybC00My41Ni0uMDAxLjAwMiA4Ny44NzIgNDQuMzExLjAwMXY0NC4zMTJoNDMuNTZ6bTAtNDQzLjEyN3YtODcuODcyaC00NC4zMTN2LTQ0LjMxM2gtNDMuNTU5VjMuMzk4aDQ0LjMxMmwuMDAxIDQ0LjMxM2g0My41NTl6bTAgMTc3LjI1MXYtNDMuNTU5aC04Ny44NzJ2MTMyLjE4NGg0My41NTl2LTg4LjYyNWg0NC4zMTN6bTQ0LjMxMy0xMzIuOTM4VjQuMTUyaC00My41NnY0NC4zMTJoLTQ0LjMxM3Y4Ny44NzJoNDMuNTZWOTIuMDI0aDQ0LjMxM3ptLS4wMDEgMzk4LjgxNFYzNTguNjU0aC04Ny44NzJ2NDMuNTU5aDQ0LjMxM3Y4OC42MjVoNDMuNTU5em0wLTIyMS41NjN2LTg3Ljg3MmgtNDMuNTU5djQ0LjMxMmwtNDQuMzEyLjAwMXY4Ny44NzFoNDMuNTU5di00NC4zMTJoNDQuMzEyem00NC4zMTMgODguNjI1di00My41NTloLTQ0LjMxM3YtNDQuMzEzaC00My41NTl2NDQuMzEzaC00NC4zMTJWMzU3LjloMTMyLjE4NHptMC0xNzcuMjUxVjkyLjc3N2gtODcuODcydjg3Ljg3Mmg4Ny44NzJ6Ij4KICAgICAgPC9wYXRoPgogICAgPC9tYXNrPgogICAgPGcgbWFzaz0idXJsKCNjb21wb25lbnRzKSI+CiAgICAgIDxyZWN0IHdpZHRoPSI1OTAiIGhlaWdodD0iNDc1IiBmaWxsPSJ1cmwoI2dyYWRpZW50LWZpbGwpIiBvcGFjaXR5PSIwLjc1Ij4KICAgICAgPC9yZWN0PgogICAgPC9nPgogIDwvZz4KICA8ZGVmcz4KICAgIDxjbGlwUGF0aCBpZD0id2luZG93LWNsaXAiPgogICAgICA8cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwSDU4OFY0NTNIMHoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMjEpIj4KICAgICAgPC9wYXRoPgogICAgPC9jbGlwUGF0aD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQtZmlsbCIgeDE9Ijc2IiB4Mj0iNTUzLjUiIHkxPSIyNjkiIHkyPSI0MTUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0EyNEZCRCI+CiAgICAgIDwvc3RvcD4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjQ3NyIgc3RvcC1jb2xvcj0iIzM2N0VENiI+CiAgICAgIDwvc3RvcD4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjk4MiIgc3RvcC1jb2xvcj0iI0UxMjY0RCI+CiAgICAgIDwvc3RvcD4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgo8L3N2Zz4K'; + +export const Image = { + parameters: { + backgrounds: { + default: 'component-driven', + values: [ + { + name: 'component-driven', + value: `#000 center / cover no-repeat url(data:image/svg+xml;base64,${img})`, + }, + ], + }, + }, +}; + +export const Disabled = { + parameters: { + backgrounds: { disable: true }, + }, +}; diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index 4ab1ca1167e..df83911f1d1 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "7.0.0-alpha.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", diff --git a/code/addons/docs/angular/index.js b/code/addons/docs/angular/index.js index 3fd4c7ea527..0236c45fec3 100644 --- a/code/addons/docs/angular/index.js +++ b/code/addons/docs/angular/index.js @@ -2,6 +2,6 @@ /* global window */ export const setCompodocJson = (compodocJson) => { - // @ts-ignore + // @ts-expect-error (Converted from ts-ignore) window.__STORYBOOK_COMPODOC_JSON__ = compodocJson; }; diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index e9ea177c09e..bd761d121c5 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "7.0.0-alpha.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", diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts index 7a7ae8b2d97..9516671597c 100644 --- a/code/addons/docs/src/preset.ts +++ b/code/addons/docs/src/preset.ts @@ -145,7 +145,7 @@ export async function webpack( export const storyIndexers = async (indexers: StoryIndexer[] | null) => { const mdxIndexer = async (fileName: string, opts: IndexerOptions) => { let code = (await fs.readFile(fileName, 'utf-8')).toString(); - // @ts-ignore + // @ts-expect-error (Converted from ts-ignore) const { compile } = global.FEATURES?.previewMdx2 ? await import('@storybook/mdx2-csf') : await import('@storybook/mdx1-csf'); diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index e460b48345c..7fc695f34dd 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "7.0.0-alpha.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" } diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index 149b443556c..d0df2b389a6 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "7.0.0-alpha.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", diff --git a/code/addons/interactions/manager.js b/code/addons/interactions/manager.js index 4e287d25b15..8a2eae4ffce 100644 --- a/code/addons/interactions/manager.js +++ b/code/addons/interactions/manager.js @@ -1 +1 @@ -import './dist/esm/manager'; +import './dist/manager'; diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index a3959e483fc..c34b86f6ee1 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "7.0.0-alpha.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": [ diff --git a/code/addons/interactions/preview.js b/code/addons/interactions/preview.js index 7817e1d278d..48714cc6fba 100644 --- a/code/addons/interactions/preview.js +++ b/code/addons/interactions/preview.js @@ -1 +1 @@ -export * from './dist/esm/preset/preview'; +export * from './dist/preset/preview'; diff --git a/code/addons/interactions/src/components/InteractionsPanel.stories.tsx b/code/addons/interactions/src/components/InteractionsPanel.stories.tsx index 3c618898578..e71744d38be 100644 --- a/code/addons/interactions/src/components/InteractionsPanel.stories.tsx +++ b/code/addons/interactions/src/components/InteractionsPanel.stories.tsx @@ -1,6 +1,5 @@ /* eslint-disable jest/no-standalone-expect */ import React from 'react'; -import { action } from '@storybook/addon-actions'; import type { ComponentStoryObj, ComponentMeta } from '@storybook/react'; import { CallStates } from '@storybook/instrumenter'; import { styled } from '@storybook/theming'; @@ -48,7 +47,7 @@ export default { fileName: 'addon-interactions.stories.tsx', hasException: false, isPlaying: false, - onScrollToEnd: action('onScrollToEnd'), + onScrollToEnd: () => {}, endRef: null, // prop for the AddonPanel used as wrapper of Panel active: true, diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index 3eebff72208..0c97d98fffd 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "7.0.0-alpha.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", diff --git a/code/addons/jest/src/shared.test.ts b/code/addons/jest/src/shared.test.ts index db9ab09050c..e051f4563f6 100644 --- a/code/addons/jest/src/shared.test.ts +++ b/code/addons/jest/src/shared.test.ts @@ -27,7 +27,7 @@ describe('defineJestParameter', () => { }); test('returns null if filename is a module ID that cannot be inferred from', () => { - // @ts-ignore + // @ts-expect-error (Converted from ts-ignore) expect(defineJestParameter({ fileName: 1234 })).toBeNull(); }); }); diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 10815060c44..beb804d1ca0 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "7.0.0-alpha.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", diff --git a/code/addons/links/src/react/components/link.test.tsx b/code/addons/links/src/react/components/link.test.tsx index b2e75887549..4d79589adbd 100644 --- a/code/addons/links/src/react/components/link.test.tsx +++ b/code/addons/links/src/react/components/link.test.tsx @@ -14,7 +14,7 @@ jest.mock('global', () => ({ search: 'search', }, }, - // @ts-ignore + // @ts-expect-error (Converted from ts-ignore) window: global, __STORYBOOK_STORY_STORE__: { getSelection: jest.fn(() => ({ id: 1 })), diff --git a/code/addons/links/src/utils.test.ts b/code/addons/links/src/utils.test.ts index fb2126018bf..26bdb4b2a83 100644 --- a/code/addons/links/src/utils.test.ts +++ b/code/addons/links/src/utils.test.ts @@ -5,9 +5,9 @@ import { linkTo, hrefTo } from './utils'; jest.mock('@storybook/addons'); jest.mock('global', () => ({ - // @ts-ignore + // @ts-expect-error (Converted from ts-ignore) document: global.document, - // @ts-ignore + // @ts-expect-error (Converted from ts-ignore) window: global, })); diff --git a/code/addons/links/src/utils.ts b/code/addons/links/src/utils.ts index 8b4adef0bf3..be551a89645 100644 --- a/code/addons/links/src/utils.ts +++ b/code/addons/links/src/utils.ts @@ -36,9 +36,9 @@ export const hrefTo = (title: ComponentTitle, name: StoryName): Promise return new Promise((resolve) => { const { location } = document; const query = parseQuery(location.search); - // @ts-ignore + // @ts-expect-error (Converted from ts-ignore) const existingId = [].concat(query.id)[0]; - // @ts-ignore + // @ts-expect-error (Converted from ts-ignore) const titleToLink = title || existingId.split('--', 2)[0]; const id = toId(titleToLink, name); const url = `${location.origin + location.pathname}?${Object.entries({ ...query, id }) diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index 9e1d7401299..8bb45d78a85 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "7.0.0-alpha.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": [ diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index 7813bbf4227..42c951e590e 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "7.0.0-alpha.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": [ diff --git a/code/addons/storyshots/storyshots-core/package.json b/code/addons/storyshots/storyshots-core/package.json index e17a5610a6a..2ff27afe426 100644 --- a/code/addons/storyshots/storyshots-core/package.json +++ b/code/addons/storyshots/storyshots-core/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storyshots", - "version": "7.0.0-alpha.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", diff --git a/code/addons/storyshots/storyshots-core/src/api/ensureOptionsDefaults.ts b/code/addons/storyshots/storyshots-core/src/api/ensureOptionsDefaults.ts index 25adf62c834..c5e01ed7afe 100644 --- a/code/addons/storyshots/storyshots-core/src/api/ensureOptionsDefaults.ts +++ b/code/addons/storyshots/storyshots-core/src/api/ensureOptionsDefaults.ts @@ -25,7 +25,6 @@ function getIntegrityOptions({ integrityOptions }: StoryshotsOptions) { }; } -// @ts-ignore function ensureOptionsDefaults(options: StoryshotsOptions) { const { suite = 'Storyshots', diff --git a/code/addons/storyshots/storyshots-core/src/api/integrityTestTemplate.ts b/code/addons/storyshots/storyshots-core/src/api/integrityTestTemplate.ts index d2b13d5e958..b4fb63b582f 100644 --- a/code/addons/storyshots/storyshots-core/src/api/integrityTestTemplate.ts +++ b/code/addons/storyshots/storyshots-core/src/api/integrityTestTemplate.ts @@ -52,7 +52,7 @@ function integrityTest(integrityOptions: any, stories2snapsConverter: any) { const snapshotExtension = stories2snapsConverter.getSnapshotExtension(); const storyshots = glob.sync(`**/*${snapshotExtension}`, integrityOptions); - // @ts-ignore + // @ts-expect-error (Converted from ts-ignore) expect(storyshots).notToBeAbandoned(stories2snapsConverter); }); }); diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/svelte/renderTree.ts b/code/addons/storyshots/storyshots-core/src/frameworks/svelte/renderTree.ts index cb073cd8287..f1bfb62a379 100644 --- a/code/addons/storyshots/storyshots-core/src/frameworks/svelte/renderTree.ts +++ b/code/addons/storyshots/storyshots-core/src/frameworks/svelte/renderTree.ts @@ -1,6 +1,5 @@ /* eslint-disable camelcase */ import global from 'global'; -// @ts-ignore import { set_current_component } from 'svelte/internal'; const { document } = global; diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/vue/renderTree.ts b/code/addons/storyshots/storyshots-core/src/frameworks/vue/renderTree.ts index edc7fe643ee..ac1f225ad7f 100644 --- a/code/addons/storyshots/storyshots-core/src/frameworks/vue/renderTree.ts +++ b/code/addons/storyshots/storyshots-core/src/frameworks/vue/renderTree.ts @@ -1,4 +1,3 @@ -// @ts-ignore import Vue from 'vue'; // this is defined in @storybook/vue but not exported, @@ -14,7 +13,7 @@ function getRenderedTree(story: any) { }, }); - // @ts-ignore + // @ts-expect-error (Converted from ts-ignore) vm[VALUES] = story.initialArgs; return vm.$mount().$el; diff --git a/code/addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js b/code/addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js index 222fac0b19c..5544d92516f 100644 --- a/code/addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js +++ b/code/addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js @@ -1,6 +1,5 @@ import React from 'react'; -import { action } from '@storybook/addon-actions'; import { Button } from '../react-demo'; export default { @@ -11,10 +10,10 @@ export default { }, }; -export const WithText = () => ; +export const WithText = () => ; export const WithSomeEmoji = () => ( - - - -`; - -exports[`Storyshots Addons/Actions Component Output with EventEmitter 1`] = ` - - - - - -`; - -exports[`Storyshots Addons/Actions Story with template 1`] = ` - - - -`; - -exports[`Storyshots Addons/Actions Use action in method 1`] = ` - - - - - -`; diff --git a/code/examples/angular-cli/src/stories/addons/actions/addon-actions.stories.ts b/code/examples/angular-cli/src/stories/addons/actions/addon-actions.stories.ts deleted file mode 100644 index e262e4d1f05..00000000000 --- a/code/examples/angular-cli/src/stories/addons/actions/addon-actions.stories.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { action } from '@storybook/addon-actions'; -import { Meta, StoryFn } from '@storybook/angular'; -import { Button } from '../../angular-demo'; - -export default { - component: Button, - title: 'Addons/Actions', -} as Meta; - -export const ComponentOutputWithEventEmitter: StoryFn = () => ({ - props: { - text: 'Button πŸ₯', - onClick: action('On click'), - }, -}); -ComponentOutputWithEventEmitter.storyName = 'Component Output with EventEmitter'; - -export const UseActionInMethod: StoryFn = () => ({ - props: { - text: 'Button πŸ₯', - onClick: (e) => { - console.log(e); - e.preventDefault(); - action('Action name')(e.target, 'Another arg'); - }, - }, -}); -UseActionInMethod.storyName = 'Use action in method'; - -export const StoryTemplate: StoryFn = () => ({ - template: ``, - props: { - onClick: action('On click'), - onOver: action('On over'), - }, -}); -StoryTemplate.storyName = 'Story with template'; - -export const ComponentOutputWithArgsTypes: StoryFn = (args) => ({ - props: { - text: 'Button πŸ₯', - ...args, - }, -}); -ComponentOutputWithArgsTypes.storyName = 'Component Output with ArgsTypes'; -ComponentOutputWithArgsTypes.argTypes = { onClick: { action: 'On click' } }; diff --git a/code/examples/angular-cli/src/stories/addons/backgrounds/__snapshots__/addon-background.stories.storyshot b/code/examples/angular-cli/src/stories/addons/backgrounds/__snapshots__/addon-background.stories.storyshot deleted file mode 100644 index 3a5cd4bec6f..00000000000 --- a/code/examples/angular-cli/src/stories/addons/backgrounds/__snapshots__/addon-background.stories.storyshot +++ /dev/null @@ -1,37 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Addons / Backgrounds Overridden 1`] = ` - - - - - -`; - -exports[`Storyshots Addons / Backgrounds With Component 1`] = ` - - - - - -`; - -exports[`Storyshots Addons / Backgrounds With Template 1`] = ` - - - - - -`; diff --git a/code/examples/angular-cli/src/stories/addons/backgrounds/addon-background.stories.ts b/code/examples/angular-cli/src/stories/addons/backgrounds/addon-background.stories.ts deleted file mode 100644 index fcf5527877d..00000000000 --- a/code/examples/angular-cli/src/stories/addons/backgrounds/addon-background.stories.ts +++ /dev/null @@ -1,38 +0,0 @@ -import type { Meta, StoryFn } from '@storybook/angular'; -import { Button } from '../../angular-demo'; - -export default { - title: 'Addons / Backgrounds', - component: Button, - parameters: { - backgrounds: { - default: 'twitter', - values: [ - { name: 'twitter', value: '#00aced' }, - { name: 'facebook', value: '#3b5998' }, - ], - }, - }, -} as Meta; - -export const WithComponent: StoryFn = () => ({ - props: { text: 'Button' }, -}); - -export const WithTemplate: StoryFn = () => ({ - template: ``, - props: { text: 'Button' }, -}); - -export const Overridden = () => ({ - props: { text: 'This one should have different backgrounds' }, -}); -Overridden.parameters = { - backgrounds: { - default: 'pink', - values: [ - { name: 'pink', value: 'hotpink' }, - { name: 'blue', value: 'deepskyblue' }, - ], - }, -}; diff --git a/code/examples/angular-cli/src/stories/addons/docs/simple.stories.mdx b/code/examples/angular-cli/src/stories/addons/docs/simple.stories.mdx index e5ff203bcbd..d60148f46b2 100644 --- a/code/examples/angular-cli/src/stories/addons/docs/simple.stories.mdx +++ b/code/examples/angular-cli/src/stories/addons/docs/simple.stories.mdx @@ -1,6 +1,5 @@ import { Story, Meta, ArgsTable, Source } from '@storybook/addon-docs'; import { Button } from '../.././angular-demo'; -import { action } from '@storybook/addon-actions'; @@ -21,7 +20,7 @@ import { action } from '@storybook/addon-actions'; {(args) => ({ props: { text: args.text, - onClick: action('clicked'), + onClick: () => {}, }, })} diff --git a/code/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts b/code/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts index d438e2cc08a..c23f4f49f1b 100644 --- a/code/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts +++ b/code/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts @@ -1,5 +1,4 @@ import { FormsModule } from '@angular/forms'; -import { action } from '@storybook/addon-actions'; import { moduleMetadata, Meta, StoryFn } from '@storybook/angular'; import { CustomCvaComponent } from './custom-cva.component'; @@ -21,7 +20,7 @@ export default { export const SimpleInput: StoryFn = () => ({ props: { ngModel: 'Type anything', - ngModelChange: action('ngModelChange'), + ngModelChange: () => {}, }, }); diff --git a/code/examples/angular-cli/src/stories/core/parameters/all-parameters.stories.ts b/code/examples/angular-cli/src/stories/core/parameters/all-parameters.stories.ts deleted file mode 100644 index 40f34ceafcd..00000000000 --- a/code/examples/angular-cli/src/stories/core/parameters/all-parameters.stories.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { addParameters } from '@storybook/angular'; -import type { Meta, StoryFn } from '@storybook/angular'; -import { Button } from '../../angular-demo'; - -const globalParameter = 'globalParameter'; -const chapterParameter = 'chapterParameter'; -const storyParameter = 'storyParameter'; - -addParameters({ globalParameter }); - -export default { - title: 'Core / Parameters / All parameters', - parameters: { - chapterParameter, - }, -} as Meta; - -export const PassedToStory: StoryFn = (_args, { parameters: { fileName, ...parameters } }) => ({ - component: Button, - props: { - text: `Parameters are ${JSON.stringify(parameters, null, 2)}`, - onClick: () => 0, - }, -}); - -PassedToStory.storyName = 'All parameters passed to story'; -PassedToStory.parameters = { storyParameter }; diff --git a/code/examples/angular-cli/src/stories/core/styles/story-styles.stories.ts b/code/examples/angular-cli/src/stories/core/styles/story-styles.stories.ts index 2d3d7f08737..a8fb561efc9 100644 --- a/code/examples/angular-cli/src/stories/core/styles/story-styles.stories.ts +++ b/code/examples/angular-cli/src/stories/core/styles/story-styles.stories.ts @@ -1,5 +1,4 @@ import { Meta, moduleMetadata, StoryFn } from '@storybook/angular'; -import { action } from '@storybook/addon-actions'; import { Button } from '../../angular-demo'; export default { @@ -15,7 +14,7 @@ export const TemplateStory: StoryFn = () => ({ template: ``, props: { text: 'Button with custom styles', - onClick: action('log'), + onClick: () => {}, }, styles: [ ` diff --git a/code/examples/cra-kitchen-sink/.storybook/main.ts b/code/examples/cra-kitchen-sink/.storybook/main.ts index 85ff96ef9f2..1d5e852f231 100644 --- a/code/examples/cra-kitchen-sink/.storybook/main.ts +++ b/code/examples/cra-kitchen-sink/.storybook/main.ts @@ -25,7 +25,7 @@ const mainConfig: StorybookConfig = { const resolvePlugins = config.resolve?.plugins; if (Array.isArray(resolvePlugins)) { resolvePlugins.forEach((p) => { - // @ts-ignore + // @ts-expect-error (Converted from ts-ignore) const appSrcs = p.appSrcs as unknown as string[]; if (Array.isArray(appSrcs)) { appSrcs.push(path.join(__dirname, '..', '..', '..')); diff --git a/code/examples/cra-kitchen-sink/package.json b/code/examples/cra-kitchen-sink/package.json index 8bf9b0bd527..f14d706a1d7 100644 --- a/code/examples/cra-kitchen-sink/package.json +++ b/code/examples/cra-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "cra-kitchen-sink", - "version": "7.0.0-alpha.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": { diff --git a/code/examples/cra-kitchen-sink/src/stories/button.stories.js b/code/examples/cra-kitchen-sink/src/stories/button.stories.js index 030fcde029c..20d13f8770c 100644 --- a/code/examples/cra-kitchen-sink/src/stories/button.stories.js +++ b/code/examples/cra-kitchen-sink/src/stories/button.stories.js @@ -1,5 +1,4 @@ import React from 'react'; -import { action } from '@storybook/addon-actions'; import { Button } from '../components/react-demo'; export default { @@ -7,7 +6,7 @@ export default { component: Button, }; -export const Story1 = () => ; +export const Story1 = () => ; Story1.storyName = 'with text'; Story1.parameters = { @@ -15,7 +14,7 @@ Story1.parameters = { }; export const Story2 = () => ( - ; - -export const Nested = (args) => ( - -); -Nested.args = { onClick: action('clicked', { depth: 1 }) }; diff --git a/code/examples/cra-kitchen-sink/src/stories/long-description.stories.js b/code/examples/cra-kitchen-sink/src/stories/long-description.stories.js index 7f3d794c7f3..7fd35cd5122 100644 --- a/code/examples/cra-kitchen-sink/src/stories/long-description.stories.js +++ b/code/examples/cra-kitchen-sink/src/stories/long-description.stories.js @@ -1,10 +1,9 @@ import React from 'react'; -import { action } from '@storybook/addon-actions'; import { Button } from '../components/react-demo'; export default { title: 'Some really long story kind description', }; -export const Story1 = () => ; +export const Story1 = () => ; Story1.storyName = 'with text'; diff --git a/code/examples/cra-ts-essentials/.storybook/main.ts b/code/examples/cra-ts-essentials/.storybook/main.ts index 8a4882ff3aa..77cba3e12bc 100644 --- a/code/examples/cra-ts-essentials/.storybook/main.ts +++ b/code/examples/cra-ts-essentials/.storybook/main.ts @@ -20,7 +20,7 @@ const mainConfig: StorybookConfig = { const resolvePlugins = config.resolve?.plugins; if (Array.isArray(resolvePlugins)) { resolvePlugins.forEach((p) => { - // @ts-ignore + // @ts-expect-error (Converted from ts-ignore) const appSrcs = p.appSrcs as unknown as string[]; if (Array.isArray(appSrcs)) { appSrcs.push(path.join(__dirname, '..', '..', '..')); diff --git a/code/examples/cra-ts-essentials/package.json b/code/examples/cra-ts-essentials/package.json index 3956890be47..df090383e69 100644 --- a/code/examples/cra-ts-essentials/package.json +++ b/code/examples/cra-ts-essentials/package.json @@ -1,6 +1,6 @@ { "name": "cra-ts-essentials", - "version": "7.0.0-alpha.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" }, diff --git a/code/examples/cra-ts-kitchen-sink/.storybook/main.ts b/code/examples/cra-ts-kitchen-sink/.storybook/main.ts index 471226181de..aace39ecad7 100644 --- a/code/examples/cra-ts-kitchen-sink/.storybook/main.ts +++ b/code/examples/cra-ts-kitchen-sink/.storybook/main.ts @@ -20,7 +20,7 @@ const mainConfig: StorybookConfig = { const resolvePlugins = config.resolve?.plugins; if (Array.isArray(resolvePlugins)) { resolvePlugins.forEach((p) => { - // @ts-ignore + // @ts-expect-error (Converted from ts-ignore) const appSrcs = p.appSrcs as unknown as string[]; if (Array.isArray(appSrcs)) { appSrcs.push(path.join(__dirname, '..', '..', '..')); diff --git a/code/examples/cra-ts-kitchen-sink/package.json b/code/examples/cra-ts-kitchen-sink/package.json index f9ec9e0b126..50acf5d07ea 100644 --- a/code/examples/cra-ts-kitchen-sink/package.json +++ b/code/examples/cra-ts-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "cra-ts-kitchen-sink", - "version": "7.0.0-alpha.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" }, diff --git a/code/examples/cra-ts-kitchen-sink/src/components/Button.stories.tsx b/code/examples/cra-ts-kitchen-sink/src/components/Button.stories.tsx index a13b3e24399..677c00b7721 100644 --- a/code/examples/cra-ts-kitchen-sink/src/components/Button.stories.tsx +++ b/code/examples/cra-ts-kitchen-sink/src/components/Button.stories.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import { action } from '@storybook/addon-actions'; import Button, { Type } from './Button'; export default { @@ -9,7 +8,7 @@ export default { export const SimpleButton = () => { const x = 0; - return ; + return ; }; const typeOptions = { diff --git a/code/examples/cra-ts-kitchen-sink/src/stories/1-Button.stories.tsx b/code/examples/cra-ts-kitchen-sink/src/stories/1-Button.stories.tsx index 6b9a2d25e80..df60c8e704a 100644 --- a/code/examples/cra-ts-kitchen-sink/src/stories/1-Button.stories.tsx +++ b/code/examples/cra-ts-kitchen-sink/src/stories/1-Button.stories.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import { action } from '@storybook/addon-actions'; import { Button } from './Button'; export default { @@ -7,10 +6,10 @@ export default { component: Button, }; -export const Text = () => ; +export const Text = () => ; export const Emoji = () => ( - ); ButtonReactFC.defaultProps = { - // @ts-ignore onClick: null, }; @@ -26,7 +25,6 @@ export const ButtonFC: FC = ({ onClick, children }) => ( ); ButtonFC.defaultProps = { - // @ts-ignore onClick: null, }; @@ -37,6 +35,5 @@ export const ButtonFunctionComponent: FC = ({ onClick, children }) ); ButtonFunctionComponent.defaultProps = { - // @ts-ignore onClick: null, }; diff --git a/code/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/ext.js b/code/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/ext.js index 047b6b362bd..11d0ad4810b 100644 --- a/code/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/ext.js +++ b/code/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/ext.js @@ -1,4 +1,4 @@ -// @ts-ignore +// @ts-expect-error (Converted from ts-ignore) import PropTypes from 'prop-types'; export const PRESET_SHAPE = { diff --git a/code/examples/doc-blocks/.storybook/main.ts b/code/examples/doc-blocks/.storybook/main.ts index 4f50d98e6f6..0e8ffacb423 100644 --- a/code/examples/doc-blocks/.storybook/main.ts +++ b/code/examples/doc-blocks/.storybook/main.ts @@ -8,10 +8,6 @@ const config: StorybookConfig = { channelOptions: { allowFunction: false, maxDepth: 10 }, disableTelemetry: true, }, - typescript: { - check: true, - checkOptions: {}, - }, features: { postcss: false, storyStoreV7: true, diff --git a/code/examples/doc-blocks/package.json b/code/examples/doc-blocks/package.json index 15631537741..b5d18781a75 100644 --- a/code/examples/doc-blocks/package.json +++ b/code/examples/doc-blocks/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/example-doc-blocks", - "version": "7.0.0-alpha.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" }, diff --git a/code/examples/ember-cli/package.json b/code/examples/ember-cli/package.json index 99bf7ad2c0f..476b80a0ab2 100644 --- a/code/examples/ember-cli/package.json +++ b/code/examples/ember-cli/package.json @@ -1,6 +1,6 @@ { "name": "ember-example", - "version": "7.0.0-alpha.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", diff --git a/code/examples/ember-cli/stories/addon-actions.stories.js b/code/examples/ember-cli/stories/addon-actions.stories.js deleted file mode 100644 index ce4b67a59ee..00000000000 --- a/code/examples/ember-cli/stories/addon-actions.stories.js +++ /dev/null @@ -1,18 +0,0 @@ -import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; - -export default { - title: 'Addon/Actions', - parameters: { - options: { - selectedPanel: 'storybook/actions/panel', - }, - }, -}; - -export const Button = () => ({ - template: hbs``, - context: { - onClick: action('clicked'), - }, -}); diff --git a/code/examples/ember-cli/stories/addon-backgrounds.stories.js b/code/examples/ember-cli/stories/addon-backgrounds.stories.js deleted file mode 100644 index 39d5848ce98..00000000000 --- a/code/examples/ember-cli/stories/addon-backgrounds.stories.js +++ /dev/null @@ -1,26 +0,0 @@ -import { hbs } from 'ember-cli-htmlbars'; - -export default { - title: 'Addon/Backgrounds', - parameters: { - backgrounds: { - default: 'dark', - values: [ - { name: 'light', value: '#eeeeee' }, - { name: 'dark', value: '#222222' }, - ], - }, - }, -}; - -export const Story1 = () => ({ - template: hbs``, -}); - -Story1.storyName = 'story 1'; - -export const Story2 = () => ({ - template: hbs``, -}); - -Story2.storyName = 'story 2'; diff --git a/code/examples/ember-cli/stories/welcome-banner.stories.js b/code/examples/ember-cli/stories/welcome-banner.stories.js index 1128476813e..516c90cb4af 100644 --- a/code/examples/ember-cli/stories/welcome-banner.stories.js +++ b/code/examples/ember-cli/stories/welcome-banner.stories.js @@ -1,5 +1,4 @@ import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; export default { title: 'welcome-banner', @@ -23,7 +22,6 @@ export const Basic = (args) => ({ subTitleColor=subTitleColor title=title subtitle=subtitle - click=(action onClick) }} `, context: args, @@ -34,5 +32,4 @@ Basic.args = { subTitleColor: '#B8854F', title: 'Welcome to storybook', subtitle: 'This environment is completely editable', - onClick: action('clicked'), }; diff --git a/code/examples/external-docs/package.json b/code/examples/external-docs/package.json index cef243736f8..df74f80233c 100644 --- a/code/examples/external-docs/package.json +++ b/code/examples/external-docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/external-docs", - "version": "7.0.0-alpha.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" } diff --git a/code/examples/html-kitchen-sink/package.json b/code/examples/html-kitchen-sink/package.json index 9f723440697..f63521ed91a 100644 --- a/code/examples/html-kitchen-sink/package.json +++ b/code/examples/html-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "html-kitchen-sink", - "version": "7.0.0-alpha.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": { diff --git a/code/examples/html-kitchen-sink/stories/addon-actions.stories.js b/code/examples/html-kitchen-sink/stories/addon-actions.stories.js deleted file mode 100644 index 1ed26062f38..00000000000 --- a/code/examples/html-kitchen-sink/stories/addon-actions.stories.js +++ /dev/null @@ -1,85 +0,0 @@ -import { withActions } from '@storybook/addon-actions'; - -const buttonStory = () => () => ``; - -export default { - title: 'Addons/Actions', -}; - -export const Story1 = buttonStory(); -Story1.storyName = 'Hello World'; - -Story1.parameters = { - actions: { - handles: ['click'], - }, -}; - -export const Story2 = buttonStory(); -Story2.storyName = 'Multiple actions'; - -Story2.parameters = { - actions: { - handles: ['click', 'contextmenu'], - }, -}; - -export const Story3 = buttonStory(); -Story3.storyName = 'Multiple actions + config'; - -Story3.parameters = { - actions: { - handles: ['click', 'contextmenu', { clearOnStoryChange: false }], - }, -}; - -export const Story4 = buttonStory(); -Story4.storyName = 'Multiple actions, object'; - -Story4.parameters = { - actions: { - handles: [{ click: 'clicked', contextmenu: 'right clicked' }], - }, -}; - -export const Story5 = () => ` -
- Clicks on this button will be logged: -
- `; -Story5.storyName = 'Multiple actions, selector'; - -Story5.parameters = { - actions: { - handles: [{ 'click .btn': 'clicked', contextmenu: 'right clicked' }], - }, -}; - -export const Story6 = buttonStory(); -Story6.storyName = 'Multiple actions, object + config'; - -Story6.parameters = { - actions: { - handles: [{ click: 'clicked', contextmenu: 'right clicked' }, { clearOnStoryChange: false }], - }, -}; - -export const DeprecatedDecoratorsStory1 = buttonStory(); -DeprecatedDecoratorsStory1.storyName = 'Deprecated decorators - Single action'; -DeprecatedDecoratorsStory1.decorators = [withActions('click')]; - -export const DeprecatedDecoratorsStory2 = buttonStory(); -DeprecatedDecoratorsStory2.storyName = 'Deprecated decorators - Multiple actions'; -DeprecatedDecoratorsStory2.decorators = [withActions('click', 'contextmenu')]; - -export const DeprecatedDecoratorsStory3 = buttonStory(); -DeprecatedDecoratorsStory3.storyName = 'Deprecated decorators - Multiple actions + config'; -DeprecatedDecoratorsStory3.decorators = [ - withActions('click', 'contextmenu', { clearOnStoryChange: false }), -]; - -export const DeprecatedDecoratorsStory4 = buttonStory(); -DeprecatedDecoratorsStory4.storyName = 'Deprecated decorators - Multiple actions, object'; -DeprecatedDecoratorsStory4.decorators = [ - withActions({ click: 'clicked', contextmenu: 'right clicked' }), -]; diff --git a/code/examples/html-kitchen-sink/stories/addon-backgrounds.stories.js b/code/examples/html-kitchen-sink/stories/addon-backgrounds.stories.js deleted file mode 100644 index 91b21d9d6c1..00000000000 --- a/code/examples/html-kitchen-sink/stories/addon-backgrounds.stories.js +++ /dev/null @@ -1,19 +0,0 @@ -export default { - title: 'Addons/Backgrounds', - parameters: { - backgrounds: { - default: 'dark', - values: [ - { name: 'light', value: '#eeeeee' }, - { name: 'dark', value: '#222222' }, - ], - }, - }, -}; - -export const Story1 = () => - 'You should be able to switch backgrounds for this story'; -Story1.storyName = 'story 1'; - -export const Story2 = () => 'This one too!'; -Story2.storyName = 'story 2'; diff --git a/code/examples/html-kitchen-sink/stories/addon-docs.stories.mdx b/code/examples/html-kitchen-sink/stories/addon-docs.stories.mdx index b844dc5e346..8ac0ce1377d 100644 --- a/code/examples/html-kitchen-sink/stories/addon-docs.stories.mdx +++ b/code/examples/html-kitchen-sink/stories/addon-docs.stories.mdx @@ -1,5 +1,4 @@ import { Story, Canvas, Meta } from '@storybook/addon-docs'; -import { action } from '@storybook/addon-actions'; # Storybook Docs for HTML @@ -20,7 +19,6 @@ How you like them apples?! {() => { const btn = document.createElement('button'); btn.innerHTML = 'Hello Button'; - btn.addEventListener('click', action('Click')); return btn; }} diff --git a/code/examples/html-kitchen-sink/stories/button.stories.js b/code/examples/html-kitchen-sink/stories/button.stories.js index 11aef877733..a8f079cafe0 100644 --- a/code/examples/html-kitchen-sink/stories/button.stories.js +++ b/code/examples/html-kitchen-sink/stories/button.stories.js @@ -1,5 +1,4 @@ import global from 'global'; -import { action } from '@storybook/addon-actions'; import { useEffect } from '@storybook/client-api'; const { document } = global; @@ -15,7 +14,6 @@ export const Headings = () => export const Button = () => { const btn = document.createElement('button'); btn.innerHTML = 'Hello Button'; - btn.addEventListener('click', action('Click')); return btn; }; diff --git a/code/examples/html-kitchen-sink/stories/loaders.stories.js b/code/examples/html-kitchen-sink/stories/loaders.stories.js deleted file mode 100644 index ae8b4616195..00000000000 --- a/code/examples/html-kitchen-sink/stories/loaders.stories.js +++ /dev/null @@ -1,7 +0,0 @@ -export default { - title: 'Core/Loaders', - loaders: [async () => new Promise((r) => setTimeout(() => r({ kindValue: 7 }), 3000))], -}; - -export const Story = (args, { loaded }) => - `
Loaded Value is ${JSON.stringify(loaded, null, 2)}
`; diff --git a/code/examples/official-storybook/main.ts b/code/examples/official-storybook/main.ts index 1634bf3e886..ad4819c63a8 100644 --- a/code/examples/official-storybook/main.ts +++ b/code/examples/official-storybook/main.ts @@ -3,10 +3,6 @@ import type { StorybookConfig } from '@storybook/react-webpack5'; const config: StorybookConfig = { stories: [ - { - directory: './stories/title', - titlePrefix: 'Custom Prefix', - }, // FIXME: Breaks e2e tests './intro.stories.mdx', '../../lib/ui/src/**/*.stories.@(ts|tsx|js|jsx|mdx)', '../../lib/components/src/**/*.stories.@(ts|tsx|js|jsx|mdx)', diff --git a/code/examples/official-storybook/package.json b/code/examples/official-storybook/package.json index c80283e7f34..32bd8aeddc0 100644 --- a/code/examples/official-storybook/package.json +++ b/code/examples/official-storybook/package.json @@ -1,6 +1,6 @@ { "name": "official-storybook", - "version": "7.0.0-alpha.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" diff --git a/code/examples/official-storybook/stories/addon-actions.stories.js b/code/examples/official-storybook/stories/addon-actions.stories.js deleted file mode 100644 index ae7ad1de5b3..00000000000 --- a/code/examples/official-storybook/stories/addon-actions.stories.js +++ /dev/null @@ -1,196 +0,0 @@ -/* eslint-disable react/prop-types */ -import global from 'global'; -import React, { Fragment } from 'react'; -import { action, actions, configureActions } from '@storybook/addon-actions'; -import { Form } from '@storybook/components'; - -const { window: globalWindow, File } = global; -const { Button } = Form; - -export default { - title: 'Addons/Actions', - parameters: { - options: { - selectedPanel: 'storybook/actions/panel', - }, - }, -}; - -export const ArgTypesExample = ({ onClick, onFocus }) => ( - -); - -ArgTypesExample.argTypes = { - onClick: { action: 'clicked!' }, - onFocus: { action: true }, -}; - -export const ArgTypesRegexExample = (args, context) => { - const { someFunction, onClick, onFocus } = args; - return ( - - ); -}; - -ArgTypesRegexExample.parameters = { actions: { argTypesRegex: '^on.*' } }; -ArgTypesRegexExample.argTypes = { someFunction: {}, onClick: {}, onFocus: {} }; - -export const BasicExample = () => ; - -BasicExample.storyName = 'Basic example'; - -export const MultipleActions = () => ( - -); - -MultipleActions.storyName = 'Multiple actions'; - -export const MultipleActionsConfig = () => ( - -); - -MultipleActionsConfig.storyName = 'Multiple actions + config'; - -export const MultipleActionsAsObject = () => ( - -); - -MultipleActionsAsObject.storyName = 'Multiple actions as object'; - -export const MultipleActionsObjectConfig = () => ( - -); - -MultipleActionsObjectConfig.storyName = 'Multiple actions, object + config'; - -export const CircularPayload = () => { - const circular = { foo: {} }; - circular.foo.circular = circular; - return ; -}; - -export const ReservedKeywordAsName = () => ; - -ReservedKeywordAsName.storyName = 'Reserved keyword as name'; - -export const AllTypes = () => { - function A() {} - function B() {} - - const bound = B.bind({}); - - let file; - try { - file = new File([''], 'filename.txt', { type: 'text/plain', lastModified: new Date() }); - } catch (error) { - file = error; - } - const reg = /fooBar/g; - - return ( - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -AllTypes.storyName = 'All types'; - -export const ConfigureActionsDepth = () => { - configureActions({ - depth: 2, - }); - - return ( - - ); -}; - -export const PersistingTheActionLogger = () => ( - -

Moving away from this story will persist the action logger

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

Hooks args:

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