diff --git a/.babelrc.js b/.babelrc.js index eb5f1c0d96a..13e7b0a37c2 100644 --- a/.babelrc.js +++ b/.babelrc.js @@ -12,7 +12,13 @@ const withTests = { ], }; -const modules = process.env.BABEL_ESM === 'true' ? false : 'auto'; +// type BabelMode = 'cjs' | 'esm' | 'modern'; + +const modules = process.env.BABEL_MODE === 'cjs' ? 'auto' : false; + +// FIXME: optional chaining introduced in chrome 80, not supported by wepback4 +// https://github.com/webpack/webpack/issues/10227#issuecomment-642734920 +const targets = process.env.BABEL_MODE === 'modern' ? { chrome: '79' } : 'defaults'; module.exports = { ignore: [ @@ -26,7 +32,7 @@ module.exports = { shippedProposals: true, useBuiltIns: 'usage', corejs: '3', - targets: 'defaults', + targets, modules, }, ], @@ -70,7 +76,7 @@ module.exports = { useBuiltIns: 'usage', corejs: '3', modules, - targets: 'defaults', + targets, }, ], '@babel/preset-react', diff --git a/.circleci/config.yml b/.circleci/config.yml index c1ed132d7d9..f8c7bcd4152 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -78,7 +78,7 @@ commands: jobs: build: executor: - class: large + class: xlarge name: sb_node_12_classic steps: - git-shallow-clone/checkout_advanced: @@ -218,8 +218,8 @@ jobs: command: yarn wait-on http://localhost:6000 - run: name: Run E2E tests - # Do not test CRA here because it's done in PnP part and add `angular` as soon as SB will support Angular 12 - command: yarn test:e2e-framework vue3 angular11 web_components_typescript + # Do not test CRA here because it's done in PnP part + command: yarn test:e2e-framework vue3 angular angular11 web_components_typescript - store_artifacts: path: /tmp/storybook/cypress destination: cypress @@ -246,7 +246,7 @@ jobs: cd .. npx create-react-app cra-bench cd cra-bench - npx @storybook/bench 'npx sb init' --label cra + npx @storybook/bench 'npx sb init' --label cra --extra-flags "--modern" e2e-tests-pnp: executor: class: medium diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml index 17507443049..d7cb62f6095 100644 --- a/.github/ISSUE_TEMPLATE/config.yml +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -1,7 +1,7 @@ blank_issues_enabled: false contact_links: - name: Documentation 📚 - url: https://storbyook.js.org/docs/ + url: https://storybook.js.org/docs/ about: Check out the official docs for answers to common questions - name: Questions & discussions 🤔 url: https://github.com/storybookjs/storybook/discussions diff --git a/CHANGELOG.md b/CHANGELOG.md index d58fd945176..97a1a47bf7c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,52 @@ +## 6.3.0-alpha.33 (May 18, 2021) + +### Bug Fixes + +- Controls: Fix controls without options and add warning ([#14976](https://github.com/storybookjs/storybook/pull/14976)) +- Core: Add remaining sbmodern exports ([#14977](https://github.com/storybookjs/storybook/pull/14977)) + +## 6.3.0-alpha.32 (May 18, 2021) + +Failed NPM publish + +## 6.3.0-alpha.31 (May 18, 2021) + +### Features + +- Angular: Pass bootstrapOptions to angular ([#14852](https://github.com/storybookjs/storybook/pull/14852)) +- Controls: Update all controls to have explicit handling for `undefined` ([#14899](https://github.com/storybookjs/storybook/pull/14899)) +- Core: Add args enhancers + use in addon-actions ([#14901](https://github.com/storybookjs/storybook/pull/14901)) +- Addon-docs: Remove all defaultValue eval-ing ([#14900](https://github.com/storybookjs/storybook/pull/14900)) + +## 6.3.0-alpha.30 (May 18, 2021) + +### Features + +- Core: Built-in static `stories.json` support ([#14945](https://github.com/storybookjs/storybook/pull/14945)) + +### Maintenance + +- Core: Add modern build target to apps aka frameworks ([#14967](https://github.com/storybookjs/storybook/pull/14967)) +- Build: Increase CI `build` step to XL ([#14970](https://github.com/storybookjs/storybook/pull/14970)) + +## 6.3.0-alpha.29 (May 17, 2021) + +### Features + +- UI: Provide option to hide default toolbar tools ([#14897](https://github.com/storybookjs/storybook/pull/14897)) +- Core: Support modern browser target ([#14954](https://github.com/storybookjs/storybook/pull/14954)) + +### Maintenance + +- Core: Remove updateGlobals warning message ([#14949](https://github.com/storybookjs/storybook/pull/14949)) +- Controls: Tighten color control inference heuristic and test ([#14684](https://github.com/storybookjs/storybook/pull/14684)) + +## 6.3.0-alpha.28 (May 15, 2021) + +### Bug Fixes + +- CLI: Keep Webpack 4 builder for Angular lower than 12 ([#14942](https://github.com/storybookjs/storybook/pull/14942)) + ## 6.3.0-alpha.27 (May 14, 2021) ### Features diff --git a/MIGRATION.md b/MIGRATION.md index 2510c21a7b4..2ec595cc95a 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -4,6 +4,7 @@ - [Angular 12 upgrade](#angular-12-upgrade) - [6.3 deprecations](#63-deprecations) - [Deprecated scoped blocks imports](#deprecated-scoped-blocks-imports) + - [Deprecated argType.defaulValue](#deprecated-argtype-defaultValue) - [From version 6.1.x to 6.2.0](#from-version-61x-to-620) - [MDX pattern tweaked](#mdx-pattern-tweaked) - [6.2 Angular overhaul](#62-angular-overhaul) @@ -193,6 +194,21 @@ import { Meta, Story } from '@storybook/addon-docs/blocks'; import { Meta, Story } from '@storybook/addon-docs'; ``` +#### Deprecated `argType.defaultValue` + +Previously, unset `args` were set to the `argType.defaultValue` if set or inferred from the component's prop types (etc.). In 6.3 we no longer infer default values and instead set arg values to `undefined` when unset, allowing the framework to supply the default value. + +If you were using `argType.defaultValue` to fix issues with the above inference, it should no longer be necessary, you can remove that code. If you were using it to set a default value for an arg, there is a simpler way; simply set a value for the arg at the component level: + +```js +export default { + component: MyComponent, + args: { + argName: 'default-value', + }, +}; +``` + ## From version 6.1.x to 6.2.0 ### MDX pattern tweaked diff --git a/addons/a11y/package.json b/addons/a11y/package.json index 70faf2c1c90..2f00c3c6882 100644 --- a/addons/a11y/package.json +++ b/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", @@ -45,14 +45,14 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/api": "6.3.0-alpha.27", - "@storybook/channels": "6.3.0-alpha.27", - "@storybook/client-api": "6.3.0-alpha.27", - "@storybook/client-logger": "6.3.0-alpha.27", - "@storybook/components": "6.3.0-alpha.27", - "@storybook/core-events": "6.3.0-alpha.27", - "@storybook/theming": "6.3.0-alpha.27", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/api": "6.3.0-alpha.33", + "@storybook/channels": "6.3.0-alpha.33", + "@storybook/client-api": "6.3.0-alpha.33", + "@storybook/client-logger": "6.3.0-alpha.33", + "@storybook/components": "6.3.0-alpha.33", + "@storybook/core-events": "6.3.0-alpha.33", + "@storybook/theming": "6.3.0-alpha.33", "axe-core": "^4.2.0", "core-js": "^3.8.2", "global": "^4.4.0", @@ -81,7 +81,8 @@ "publishConfig": { "access": "public" }, - "gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a", + "gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7", + "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Accessibility", "icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png", diff --git a/addons/actions/package.json b/addons/actions/package.json index 456dcb96e6f..e660c7779e0 100644 --- a/addons/actions/package.json +++ b/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", @@ -41,12 +41,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/api": "6.3.0-alpha.27", - "@storybook/client-api": "6.3.0-alpha.27", - "@storybook/components": "6.3.0-alpha.27", - "@storybook/core-events": "6.3.0-alpha.27", - "@storybook/theming": "6.3.0-alpha.27", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/api": "6.3.0-alpha.33", + "@storybook/client-api": "6.3.0-alpha.33", + "@storybook/components": "6.3.0-alpha.33", + "@storybook/core-events": "6.3.0-alpha.33", + "@storybook/theming": "6.3.0-alpha.33", "core-js": "^3.8.2", "fast-deep-equal": "^3.1.3", "global": "^4.4.0", @@ -78,7 +78,8 @@ "publishConfig": { "access": "public" }, - "gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a", + "gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7", + "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Actions", "unsupportedFrameworks": [ diff --git a/addons/actions/src/preset/addArgs.ts b/addons/actions/src/preset/addArgs.ts index 6b65f3e3dd1..df078d72209 100644 --- a/addons/actions/src/preset/addArgs.ts +++ b/addons/actions/src/preset/addArgs.ts @@ -1,3 +1,3 @@ import { addActionsFromArgTypes, inferActionsFromArgTypesRegex } from './addArgsHelpers'; -export const argTypesEnhancers = [addActionsFromArgTypes, inferActionsFromArgTypesRegex]; +export const argsEnhancers = [addActionsFromArgTypes, inferActionsFromArgTypesRegex]; diff --git a/addons/actions/src/preset/addArgsHelpers.test.ts b/addons/actions/src/preset/addArgsHelpers.test.ts index 09593ec4a2f..6132e1a49b6 100644 --- a/addons/actions/src/preset/addArgsHelpers.test.ts +++ b/addons/actions/src/preset/addArgsHelpers.test.ts @@ -1,76 +1,67 @@ import { StoryContext } from '@storybook/addons'; import { inferActionsFromArgTypesRegex, addActionsFromArgTypes } from './addArgsHelpers'; -const withDefaultValue = (argTypes) => - Object.keys(argTypes).filter((key) => !!argTypes[key].defaultValue); - describe('actions parameter enhancers', () => { describe('actions.argTypesRegex parameter', () => { - const baseParameters = { - argTypes: { onClick: {}, onFocus: {}, somethingElse: {} }, - actions: { argTypesRegex: '^on.*' }, - }; + const parameters = { actions: { argTypesRegex: '^on.*' } }; + const argTypes = { onClick: {}, onFocus: {}, somethingElse: {} }; it('should add actions that match a pattern', () => { - const parameters = baseParameters; - const argTypes = inferActionsFromArgTypesRegex({ parameters } as StoryContext); - expect(withDefaultValue(argTypes)).toEqual(['onClick', 'onFocus']); + const args = inferActionsFromArgTypesRegex(({ + argTypes, + parameters, + } as unknown) as StoryContext); + expect(args).toEqual({ + onClick: expect.any(Function), + onFocus: expect.any(Function), + }); }); it('should override pre-existing argTypes', () => { - const parameters = { - ...baseParameters, + const args = inferActionsFromArgTypesRegex(({ + parameters, argTypes: { onClick: { defaultValue: 'pre-existing value' }, }, - }; - const argTypes = inferActionsFromArgTypesRegex({ parameters } as StoryContext); - expect(withDefaultValue(argTypes)).toEqual(['onClick']); - expect(argTypes.onClick.defaultValue).not.toBeNull(); - expect(argTypes.onClick.defaultValue).not.toEqual('pre-existing value'); + } as unknown) as StoryContext); + expect(args).toEqual({ + onClick: expect.any(Function), + }); }); it('should do nothing if actions are disabled', () => { - const parameters = { - ...baseParameters, - actions: { ...baseParameters.actions, disable: true }, - }; - const result = inferActionsFromArgTypesRegex({ parameters } as StoryContext); - expect(result).toEqual(parameters.argTypes); + const args = inferActionsFromArgTypesRegex(({ + parameters: { + ...parameters, + actions: { ...parameters.actions, disable: true }, + }, + argTypes, + } as unknown) as StoryContext); + expect(args).toEqual({}); }); }); describe('argTypes.action parameter', () => { - const baseParameters = { - argTypes: { - onClick: { action: 'clicked!' }, - onBlur: { action: 'blurred!' }, - }, + const argTypes = { + onClick: { action: 'clicked!' }, + onBlur: { action: 'blurred!' }, }; it('should add actions based on action.args', () => { - const parameters = baseParameters; - const argTypes = addActionsFromArgTypes({ parameters } as StoryContext); - expect(withDefaultValue(argTypes)).toEqual(['onClick', 'onBlur']); - }); - - it('should override pre-existing args', () => { - const parameters = { - ...baseParameters, - argTypes: { - onClick: { defaultValue: 'pre-existing value', action: 'onClick' }, - onBlur: { action: 'onBlur' }, - }, - }; - const argTypes = addActionsFromArgTypes({ parameters } as StoryContext); - expect(withDefaultValue(argTypes)).toEqual(['onClick', 'onBlur']); - expect(argTypes.onClick.defaultValue).not.toBeNull(); - expect(argTypes.onClick.defaultValue).not.toEqual('pre-existing value'); + expect( + addActionsFromArgTypes(({ argTypes, parameters: {} } as unknown) as StoryContext) + ).toEqual({ + onClick: expect.any(Function), + onBlur: expect.any(Function), + }); }); it('should do nothing if actions are disabled', () => { - const parameters = { ...baseParameters, actions: { disable: true } }; - const result = addActionsFromArgTypes({ parameters } as StoryContext); - expect(result).toEqual(parameters.argTypes); + expect( + addActionsFromArgTypes(({ + argTypes, + parameters: { actions: { disable: true } }, + } as unknown) as StoryContext) + ).toEqual({}); }); }); }); diff --git a/addons/actions/src/preset/addArgsHelpers.ts b/addons/actions/src/preset/addArgsHelpers.ts index 91cbf930a86..13e775042c3 100644 --- a/addons/actions/src/preset/addArgsHelpers.ts +++ b/addons/actions/src/preset/addArgsHelpers.ts @@ -1,5 +1,5 @@ -import mapValues from 'lodash/mapValues'; -import { ArgTypesEnhancer } from '@storybook/client-api'; +import { Args } from '@storybook/addons'; +import { ArgsEnhancer } from '@storybook/client-api'; import { action } from '../index'; // interface ActionsParameter { @@ -12,35 +12,42 @@ import { action } from '../index'; * matches a regex, such as `^on.*` for react-style `onClick` etc. */ -export const inferActionsFromArgTypesRegex: ArgTypesEnhancer = (context) => { - const { actions, argTypes } = context.parameters; +export const inferActionsFromArgTypesRegex: ArgsEnhancer = (context) => { + const { + parameters: { actions }, + argTypes, + } = context; if (!actions || actions.disable || !actions.argTypesRegex || !argTypes) { - return argTypes; + return {}; } const argTypesRegex = new RegExp(actions.argTypesRegex); - return mapValues(argTypes, (argType, name) => { - if (!argTypesRegex.test(name)) { - return argType; - } - return { ...argType, defaultValue: action(name) }; - }); + const argTypesMatchingRegex = Object.entries(argTypes).filter( + ([name]) => !!argTypesRegex.test(name) + ); + + return argTypesMatchingRegex.reduce((acc, [name, argType]) => { + acc[name] = action(name); + return acc; + }, {} as Args); }; + /** * Add action args for list of strings. */ - -export const addActionsFromArgTypes: ArgTypesEnhancer = (context) => { - const { argTypes, actions } = context.parameters; +export const addActionsFromArgTypes: ArgsEnhancer = (context) => { + const { + argTypes, + parameters: { actions }, + } = context; if (actions?.disable || !argTypes) { - return argTypes; + return {}; } - return mapValues(argTypes, (argType, name) => { - if (!argType.action) { - return argType; - } - const message = typeof argType.action === 'string' ? argType.action : name; - return { ...argType, defaultValue: action(message) }; - }); + const argTypesWithAction = Object.entries(argTypes).filter(([name, argType]) => !!argType.action); + + return argTypesWithAction.reduce((acc, [name, argType]) => { + acc[name] = action(typeof argType.action === 'string' ? argType.action : name); + return acc; + }, {} as Args); }; diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json index a59f527cee5..0c2a657dfbf 100644 --- a/addons/backgrounds/package.json +++ b/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", @@ -45,12 +45,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/api": "6.3.0-alpha.27", - "@storybook/client-logger": "6.3.0-alpha.27", - "@storybook/components": "6.3.0-alpha.27", - "@storybook/core-events": "6.3.0-alpha.27", - "@storybook/theming": "6.3.0-alpha.27", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/api": "6.3.0-alpha.33", + "@storybook/client-logger": "6.3.0-alpha.33", + "@storybook/components": "6.3.0-alpha.33", + "@storybook/core-events": "6.3.0-alpha.33", + "@storybook/theming": "6.3.0-alpha.33", "core-js": "^3.8.2", "global": "^4.4.0", "memoizerific": "^1.11.3", @@ -76,7 +76,8 @@ "publishConfig": { "access": "public" }, - "gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a", + "gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7", + "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Backgrounds", "icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png", diff --git a/addons/controls/package.json b/addons/controls/package.json index bb447458184..f3eef9b80d8 100644 --- a/addons/controls/package.json +++ b/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", @@ -45,12 +45,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/api": "6.3.0-alpha.27", - "@storybook/client-api": "6.3.0-alpha.27", - "@storybook/components": "6.3.0-alpha.27", - "@storybook/node-logger": "6.3.0-alpha.27", - "@storybook/theming": "6.3.0-alpha.27", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/api": "6.3.0-alpha.33", + "@storybook/client-api": "6.3.0-alpha.33", + "@storybook/components": "6.3.0-alpha.33", + "@storybook/node-logger": "6.3.0-alpha.33", + "@storybook/theming": "6.3.0-alpha.33", "core-js": "^3.8.2", "ts-dedent": "^2.0.0" }, @@ -69,7 +69,8 @@ "publishConfig": { "access": "public" }, - "gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a", + "gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7", + "sbmodern": "dist/modern/register.js", "storybook": { "displayName": "Controls", "icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png", diff --git a/addons/docs/docs/docspage.md b/addons/docs/docs/docspage.md index 81439aafbb9..e13371da95d 100644 --- a/addons/docs/docs/docspage.md +++ b/addons/docs/docs/docspage.md @@ -59,15 +59,15 @@ If you're coming from the `storiesOf` format, there's [a codemod that adds it fo ## Subcomponents parameter -Sometimes it's useful to document multiple components on the same page. For example, suppose your component library contains `List` and `ListItem` components that don't make sense without one another. `DocsPage` has the concept of a "primary" component with the [`component` parameter](#component-parameter), and can also accept one or more "subcomponents": +Sometimes it's useful to document multiple components on the same page. For example, suppose your component library contains `Button` and `ButtonGroup` components that don't make sense without one another. `DocsPage` has the concept of a "primary" component with the [`component` parameter](#component-parameter), and can also accept one or more "subcomponents": ```js -import { List, ListHeading, ListItem } from './List'; +import { Button, ButtonGroup } from '../ButtonGroup'; export default { - title: 'Path/to/List', - component: List, - subcomponents: { ListHeading, ListItem }, + title: 'Path/to/ButtonGroup', + component: ButtonGroup, + subcomponents: { Button }, }; ``` @@ -79,7 +79,7 @@ If you want organize your documentation differently for groups of components, we ## Replacing DocsPage -What if you don't want a `DocsPage` for your storybook, for a specific component, or even for a specific story? +What if you don't want a `DocsPage` for your Storybook, for a specific component, or even for a specific story? You can replace DocsPage at any level by overriding the `docs.page` parameter: diff --git a/addons/docs/docs/media/mdx-page.png b/addons/docs/docs/media/mdx-page.png index 195b39eefda..3ab2c5e8714 100644 Binary files a/addons/docs/docs/media/mdx-page.png and b/addons/docs/docs/media/mdx-page.png differ diff --git a/addons/docs/package.json b/addons/docs/package.json index 47c9e73c90b..0f8a9cf2e9c 100644 --- a/addons/docs/package.json +++ b/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", @@ -63,19 +63,19 @@ "@mdx-js/loader": "^1.6.22", "@mdx-js/mdx": "^1.6.22", "@mdx-js/react": "^1.6.22", - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/api": "6.3.0-alpha.27", - "@storybook/builder-webpack4": "6.3.0-alpha.27", - "@storybook/client-api": "6.3.0-alpha.27", - "@storybook/client-logger": "6.3.0-alpha.27", - "@storybook/components": "6.3.0-alpha.27", - "@storybook/core": "6.3.0-alpha.27", - "@storybook/core-events": "6.3.0-alpha.27", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/api": "6.3.0-alpha.33", + "@storybook/builder-webpack4": "6.3.0-alpha.33", + "@storybook/client-api": "6.3.0-alpha.33", + "@storybook/client-logger": "6.3.0-alpha.33", + "@storybook/components": "6.3.0-alpha.33", + "@storybook/core": "6.3.0-alpha.33", + "@storybook/core-events": "6.3.0-alpha.33", "@storybook/csf": "0.0.1", - "@storybook/node-logger": "6.3.0-alpha.27", - "@storybook/postinstall": "6.3.0-alpha.27", - "@storybook/source-loader": "6.3.0-alpha.27", - "@storybook/theming": "6.3.0-alpha.27", + "@storybook/node-logger": "6.3.0-alpha.33", + "@storybook/postinstall": "6.3.0-alpha.33", + "@storybook/source-loader": "6.3.0-alpha.33", + "@storybook/theming": "6.3.0-alpha.33", "acorn": "^7.4.1", "acorn-jsx": "^5.3.1", "acorn-walk": "^7.2.0", @@ -102,11 +102,11 @@ "@babel/core": "^7.12.10", "@emotion/core": "^10.1.1", "@emotion/styled": "^10.0.27", - "@storybook/angular": "6.3.0-alpha.27", - "@storybook/lit": "6.3.0-alpha.27", - "@storybook/react": "6.3.0-alpha.27", - "@storybook/vue": "6.3.0-alpha.27", - "@storybook/web-components": "6.3.0-alpha.27", + "@storybook/angular": "6.3.0-alpha.33", + "@storybook/lit": "6.3.0-alpha.33", + "@storybook/react": "6.3.0-alpha.33", + "@storybook/vue": "6.3.0-alpha.33", + "@storybook/web-components": "6.3.0-alpha.33", "@types/cross-spawn": "^6.0.2", "@types/doctrine": "^0.0.3", "@types/enzyme": "^3.10.8", @@ -136,11 +136,11 @@ "zone.js": "^0.11.3" }, "peerDependencies": { - "@storybook/angular": "6.3.0-alpha.27", - "@storybook/lit": "6.3.0-alpha.27", - "@storybook/vue": "6.3.0-alpha.27", - "@storybook/vue3": "6.3.0-alpha.27", - "@storybook/web-components": "6.3.0-alpha.27", + "@storybook/angular": "6.3.0-alpha.33", + "@storybook/lit": "6.3.0-alpha.33", + "@storybook/vue": "6.3.0-alpha.33", + "@storybook/vue3": "6.3.0-alpha.33", + "@storybook/web-components": "6.3.0-alpha.33", "lit": "^2.0.0-rc.1", "lit-html": "^1.0.0", "react": "^16.8.0 || ^17.0.0", @@ -194,7 +194,8 @@ "publishConfig": { "access": "public" }, - "gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a", + "gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7", + "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Docs", "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png", diff --git a/addons/docs/src/frameworks/react/__testfixtures__/10017-ts-union/argTypes.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/10017-ts-union/argTypes.snapshot new file mode 100644 index 00000000000..8dfe294d2dd --- /dev/null +++ b/addons/docs/src/frameworks/react/__testfixtures__/10017-ts-union/argTypes.snapshot @@ -0,0 +1,36 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`react component properties 10017-ts-union 1`] = ` +Object { + "icon": Object { + "control": Object { + "type": "object", + }, + "description": "specify icon=\\"search\\" or icon={IconComponent}", + "name": "icon", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "union", + }, + }, + "type": Object { + "name": "union", + "raw": "React.ReactNode | string", + "required": true, + "value": Array [ + Object { + "name": "other", + "raw": "React.ReactNode", + "value": "ReactReactNode", + }, + Object { + "name": "string", + }, + ], + }, + }, +} +`; diff --git a/addons/docs/src/frameworks/react/__testfixtures__/10278-ts-multiple-components/argTypes.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/10278-ts-multiple-components/argTypes.snapshot new file mode 100644 index 00000000000..1e0d7440b14 --- /dev/null +++ b/addons/docs/src/frameworks/react/__testfixtures__/10278-ts-multiple-components/argTypes.snapshot @@ -0,0 +1,26 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`react component properties 10278-ts-multiple-components 1`] = ` +Object { + "aProperty": Object { + "control": Object { + "type": "object", + }, + "description": "", + "name": "aProperty", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "any", + }, + }, + "type": Object { + "name": "other", + "required": true, + "value": "any", + }, + }, +} +`; diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8140-js-prop-types-oneof/argTypes.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/8140-js-prop-types-oneof/argTypes.snapshot new file mode 100644 index 00000000000..65599856eca --- /dev/null +++ b/addons/docs/src/frameworks/react/__testfixtures__/8140-js-prop-types-oneof/argTypes.snapshot @@ -0,0 +1,127 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`react component properties 8140-js-prop-types-oneof 1`] = ` +Object { + "blank": Object { + "control": Object { + "type": "boolean", + }, + "description": "No background or border if static alert", + "name": "blank", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "bool", + }, + }, + "type": Object { + "name": "boolean", + "required": false, + }, + }, + "icon": Object { + "control": Object { + "type": "text", + }, + "description": "Allows icon override, accepts material icon name", + "name": "icon", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string", + }, + }, + "type": Object { + "name": "string", + "required": false, + }, + }, + "message": Object { + "control": Object { + "type": "text", + }, + "description": "", + "name": "message", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string", + }, + }, + "type": Object { + "name": "string", + "required": true, + }, + }, + "mode": Object { + "control": Object { + "type": "radio", + }, + "description": "", + "name": "mode", + "options": Array [ + "static", + "timed", + ], + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "'static'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "'static' | 'timed'", + }, + }, + "type": Object { + "name": "enum", + "required": false, + "value": Array [ + "static", + "timed", + ], + }, + }, + "type": Object { + "control": Object { + "type": "radio", + }, + "description": "", + "name": "type", + "options": Array [ + "success", + "warning", + "error", + "primary", + ], + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "'warning'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "'success' | 'warning' | 'error' | 'primary'", + }, + }, + "type": Object { + "name": "enum", + "required": false, + "value": Array [ + "success", + "warning", + "error", + "primary", + ], + }, + }, +} +`; diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-imported-types/argTypes.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-imported-types/argTypes.snapshot new file mode 100644 index 00000000000..14b6b8cd4a6 --- /dev/null +++ b/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-imported-types/argTypes.snapshot @@ -0,0 +1,27 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`react component properties 8143-ts-imported-types 1`] = ` +Object { + "bar": Object { + "control": Object { + "type": "object", + }, + "description": "", + "name": "bar", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "Foo['bar']", + }, + }, + "type": Object { + "name": "other", + "raw": "Foo['bar']", + "required": true, + "value": "Foo['bar']", + }, + }, +} +`; diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-react-fc-generics/argTypes.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-react-fc-generics/argTypes.snapshot new file mode 100644 index 00000000000..f800e058bb2 --- /dev/null +++ b/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-react-fc-generics/argTypes.snapshot @@ -0,0 +1,27 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`react component properties 8143-ts-react-fc-generics 1`] = ` +Object { + "padding": Object { + "control": Object { + "type": "object", + }, + "description": undefined, + "name": "padding", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "'0'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "unknown", + }, + }, + "type": Object { + "required": false, + }, + }, +} +`; diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8279-js-styled-docgen/argTypes.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/8279-js-styled-docgen/argTypes.snapshot new file mode 100644 index 00000000000..bf6bf8c4a94 --- /dev/null +++ b/addons/docs/src/frameworks/react/__testfixtures__/8279-js-styled-docgen/argTypes.snapshot @@ -0,0 +1,3 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`react component properties 8279-js-styled-docgen 1`] = `Object {}`; diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8428-js-static-prop-types/argTypes.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/8428-js-static-prop-types/argTypes.snapshot new file mode 100644 index 00000000000..355a7c7f7b2 --- /dev/null +++ b/addons/docs/src/frameworks/react/__testfixtures__/8428-js-static-prop-types/argTypes.snapshot @@ -0,0 +1,25 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`react component properties 8428-js-static-prop-types 1`] = ` +Object { + "test": Object { + "control": Object { + "type": "text", + }, + "description": "Please work...", + "name": "test", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string", + }, + }, + "type": Object { + "name": "string", + "required": false, + }, + }, +} +`; diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8663-js-styled-components/argTypes.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/8663-js-styled-components/argTypes.snapshot new file mode 100644 index 00000000000..12f7441c6af --- /dev/null +++ b/addons/docs/src/frameworks/react/__testfixtures__/8663-js-styled-components/argTypes.snapshot @@ -0,0 +1,25 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`react component properties 8663-js-styled-components 1`] = ` +Object { + "bg": Object { + "control": Object { + "type": "text", + }, + "description": "", + "name": "bg", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string", + }, + }, + "type": Object { + "name": "string", + "required": false, + }, + }, +} +`; diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8740-ts-multi-props/argTypes.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/8740-ts-multi-props/argTypes.snapshot new file mode 100644 index 00000000000..54a62504184 --- /dev/null +++ b/addons/docs/src/frameworks/react/__testfixtures__/8740-ts-multi-props/argTypes.snapshot @@ -0,0 +1,27 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`react component properties 8740-ts-multi-props 1`] = ` +Object { + "size": Object { + "control": Object { + "type": "object", + }, + "description": undefined, + "name": "size", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "'a'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "unknown", + }, + }, + "type": Object { + "required": false, + }, + }, +} +`; diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8894-9511-ts-forward-ref/argTypes.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/8894-9511-ts-forward-ref/argTypes.snapshot new file mode 100644 index 00000000000..6a30b442bb0 --- /dev/null +++ b/addons/docs/src/frameworks/react/__testfixtures__/8894-9511-ts-forward-ref/argTypes.snapshot @@ -0,0 +1,48 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`react component properties 8894-9511-ts-forward-ref 1`] = ` +Object { + "disabled": Object { + "control": Object { + "type": "object", + }, + "description": undefined, + "name": "disabled", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "false", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "unknown", + }, + }, + "type": Object { + "required": false, + }, + }, + "variant": Object { + "control": Object { + "type": "object", + }, + "description": undefined, + "name": "variant", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "'small'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "unknown", + }, + }, + "type": Object { + "required": false, + }, + }, +} +`; diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9023-js-hoc/argTypes.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9023-js-hoc/argTypes.snapshot new file mode 100644 index 00000000000..24b3c5923d9 --- /dev/null +++ b/addons/docs/src/frameworks/react/__testfixtures__/9023-js-hoc/argTypes.snapshot @@ -0,0 +1,89 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`react component properties 9023-js-hoc 1`] = ` +Object { + "classes": Object { + "control": Object { + "type": "object", + }, + "description": "", + "name": "classes", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "object", + }, + }, + "type": Object { + "name": "object", + "required": true, + }, + }, + "dismissible": Object { + "control": Object { + "type": "boolean", + }, + "description": "", + "name": "dismissible", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "false", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "bool", + }, + }, + "type": Object { + "name": "boolean", + "required": false, + }, + }, + "icon": Object { + "control": Object { + "type": "object", + }, + "description": "", + "name": "icon", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "elementType", + }, + }, + "type": Object { + "name": "other", + "required": false, + "value": "elementType", + }, + }, + "variant": Object { + "control": Object { + "type": "text", + }, + "description": "", + "name": "variant", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "'primary'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string", + }, + }, + "type": Object { + "name": "string", + "required": false, + }, + }, +} +`; diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9399-js-proptypes-shape/argTypes.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9399-js-proptypes-shape/argTypes.snapshot new file mode 100644 index 00000000000..4457312cba9 --- /dev/null +++ b/addons/docs/src/frameworks/react/__testfixtures__/9399-js-proptypes-shape/argTypes.snapshot @@ -0,0 +1,39 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`react component properties 9399-js-proptypes-shape 1`] = ` +Object { + "areas": Object { + "control": Object { + "type": "object", + }, + "description": "", + "name": "areas", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": "[object]", + "summary": "object[]", + }, + }, + "type": Object { + "name": "array", + "required": true, + "value": Object { + "name": "object", + "value": Object { + "names": Object { + "name": "array", + "value": Object { + "name": "string", + }, + }, + "position": Object { + "name": "string", + }, + }, + }, + }, + }, +} +`; diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9465-ts-type-props/argTypes.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9465-ts-type-props/argTypes.snapshot new file mode 100644 index 00000000000..77f5d9770d9 --- /dev/null +++ b/addons/docs/src/frameworks/react/__testfixtures__/9465-ts-type-props/argTypes.snapshot @@ -0,0 +1,28 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`react component properties 9465-ts-type-props 1`] = ` +Object { + "disabled": Object { + "control": Object { + "type": "boolean", + }, + "description": "", + "name": "disabled", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "false", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "boolean", + }, + }, + "type": Object { + "name": "boolean", + "required": false, + }, + }, +} +`; diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9493-ts-display-name/argTypes.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9493-ts-display-name/argTypes.snapshot new file mode 100644 index 00000000000..dde0ac32a22 --- /dev/null +++ b/addons/docs/src/frameworks/react/__testfixtures__/9493-ts-display-name/argTypes.snapshot @@ -0,0 +1,62 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`react component properties 9493-ts-display-name 1`] = ` +Object { + "message": Object { + "control": Object { + "type": "text", + }, + "description": "A message alerting about Empire activities.", + "name": "message", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string", + }, + }, + "type": Object { + "name": "string", + "required": true, + }, + }, + "title": Object { + "control": Object { + "type": "object", + }, + "description": "A title that brings attention to the alert.", + "name": "title", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "'Code Yellow'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "union", + }, + }, + "type": Object { + "name": "union", + "raw": "'Code Red' | 'Code Yellow' | 'Code Green'", + "required": false, + "value": Array [ + Object { + "name": "other", + "value": "literal", + }, + Object { + "name": "other", + "value": "literal", + }, + Object { + "name": "other", + "value": "literal", + }, + ], + }, + }, +} +`; diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9556-ts-react-default-exports/argTypes.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9556-ts-react-default-exports/argTypes.snapshot new file mode 100644 index 00000000000..db138cf43a9 --- /dev/null +++ b/addons/docs/src/frameworks/react/__testfixtures__/9556-ts-react-default-exports/argTypes.snapshot @@ -0,0 +1,28 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`react component properties 9556-ts-react-default-exports 1`] = ` +Object { + "isDisabled": Object { + "control": Object { + "type": "boolean", + }, + "description": "", + "name": "isDisabled", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "false", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "boolean", + }, + }, + "type": Object { + "name": "boolean", + "required": false, + }, + }, +} +`; diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9575-ts-camel-case/argTypes.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9575-ts-camel-case/argTypes.snapshot new file mode 100644 index 00000000000..6dd3dbd2515 --- /dev/null +++ b/addons/docs/src/frameworks/react/__testfixtures__/9575-ts-camel-case/argTypes.snapshot @@ -0,0 +1,28 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`react component properties 9575-ts-camel-case 1`] = ` +Object { + "color": Object { + "control": Object { + "type": "text", + }, + "description": "", + "name": "color", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "'primary'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string", + }, + }, + "type": Object { + "name": "string", + "required": false, + }, + }, +} +`; diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9586-js-react-memo/argTypes.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9586-js-react-memo/argTypes.snapshot new file mode 100644 index 00000000000..55236eb5e23 --- /dev/null +++ b/addons/docs/src/frameworks/react/__testfixtures__/9586-js-react-memo/argTypes.snapshot @@ -0,0 +1,41 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`react component properties 9586-js-react-memo 1`] = ` +Object { + "label": Object { + "control": Object { + "type": "text", + }, + "description": "", + "name": "label", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string", + }, + }, + "type": Object { + "name": "string", + "required": true, + }, + }, + "onClick": Object { + "description": "", + "name": "onClick", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "func", + }, + }, + "type": Object { + "name": "function", + "required": true, + }, + }, +} +`; diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9591-ts-import-types/argTypes.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9591-ts-import-types/argTypes.snapshot new file mode 100644 index 00000000000..a5f97032e51 --- /dev/null +++ b/addons/docs/src/frameworks/react/__testfixtures__/9591-ts-import-types/argTypes.snapshot @@ -0,0 +1,25 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`react component properties 9591-ts-import-types 1`] = ` +Object { + "other": Object { + "control": Object { + "type": "number", + }, + "description": "", + "name": "other", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "number", + }, + }, + "type": Object { + "name": "number", + "required": false, + }, + }, +} +`; diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9592-ts-styled-props/argTypes.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9592-ts-styled-props/argTypes.snapshot new file mode 100644 index 00000000000..728ae0182ee --- /dev/null +++ b/addons/docs/src/frameworks/react/__testfixtures__/9592-ts-styled-props/argTypes.snapshot @@ -0,0 +1,25 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`react component properties 9592-ts-styled-props 1`] = ` +Object { + "title": Object { + "control": Object { + "type": "text", + }, + "description": "", + "name": "title", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string", + }, + }, + "type": Object { + "name": "string", + "required": true, + }, + }, +} +`; diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9626-js-default-values/argTypes.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9626-js-default-values/argTypes.snapshot new file mode 100644 index 00000000000..16fc2be1d40 --- /dev/null +++ b/addons/docs/src/frameworks/react/__testfixtures__/9626-js-default-values/argTypes.snapshot @@ -0,0 +1,27 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`react component properties 9626-js-default-values 1`] = ` +Object { + "title": Object { + "control": Object { + "type": "object", + }, + "description": undefined, + "name": "title", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "'Beta'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "unknown", + }, + }, + "type": Object { + "required": false, + }, + }, +} +`; diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9668-js-proptypes-no-jsdoc/argTypes.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9668-js-proptypes-no-jsdoc/argTypes.snapshot new file mode 100644 index 00000000000..76adb44ab6f --- /dev/null +++ b/addons/docs/src/frameworks/react/__testfixtures__/9668-js-proptypes-no-jsdoc/argTypes.snapshot @@ -0,0 +1,42 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`react component properties 9668-js-proptypes-no-jsdoc 1`] = ` +Object { + "heads": Object { + "control": Object { + "type": "object", + }, + "description": "", + "name": "heads", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "array", + }, + }, + "type": Object { + "name": "array", + "required": true, + "value": undefined, + }, + }, + "onAddClick": Object { + "description": "", + "name": "onAddClick", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "func", + }, + }, + "type": Object { + "name": "function", + "required": false, + }, + }, +} +`; diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9721-ts-deprecated-jsdoc/argTypes.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9721-ts-deprecated-jsdoc/argTypes.snapshot new file mode 100644 index 00000000000..2c17df14ac9 --- /dev/null +++ b/addons/docs/src/frameworks/react/__testfixtures__/9721-ts-deprecated-jsdoc/argTypes.snapshot @@ -0,0 +1,53 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`react component properties 9721-ts-deprecated-jsdoc 1`] = ` +Object { + "size": Object { + "control": Object { + "type": "object", + }, + "description": "The size (replaces width)", + "name": "size", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "signature", + }, + }, + "type": Object { + "name": "object", + "raw": "{ width: number; height: number }", + "required": true, + "value": Object { + "height": Object { + "name": "number", + }, + "width": Object { + "name": "number", + }, + }, + }, + }, + "width": Object { + "control": Object { + "type": "number", + }, + "description": "", + "name": "width", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "number", + }, + }, + "type": Object { + "name": "number", + "required": true, + }, + }, +} +`; diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9764-ts-extend-props/argTypes.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9764-ts-extend-props/argTypes.snapshot new file mode 100644 index 00000000000..8ed840f7630 --- /dev/null +++ b/addons/docs/src/frameworks/react/__testfixtures__/9764-ts-extend-props/argTypes.snapshot @@ -0,0 +1,72 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`react component properties 9764-ts-extend-props 1`] = ` +Object { + "checked": Object { + "control": Object { + "type": "boolean", + }, + "description": "", + "name": "checked", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "boolean", + }, + }, + "type": Object { + "name": "boolean", + "required": false, + }, + }, + "defaultChecked": Object { + "control": Object { + "type": "boolean", + }, + "description": "", + "name": "defaultChecked", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "boolean", + }, + }, + "type": Object { + "name": "boolean", + "required": false, + }, + }, + "value": Object { + "control": Object { + "type": "object", + }, + "description": "The input content value", + "name": "value", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "union", + }, + }, + "type": Object { + "name": "union", + "raw": "string | number", + "required": false, + "value": Array [ + Object { + "name": "string", + }, + Object { + "name": "number", + }, + ], + }, + }, +} +`; diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9827-ts-default-values/argTypes.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9827-ts-default-values/argTypes.snapshot new file mode 100644 index 00000000000..d37d679b5b9 --- /dev/null +++ b/addons/docs/src/frameworks/react/__testfixtures__/9827-ts-default-values/argTypes.snapshot @@ -0,0 +1,72 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`react component properties 9827-ts-default-values 1`] = ` +Object { + "bar": Object { + "control": Object { + "type": "object", + }, + "description": "", + "name": "bar", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "Array", + }, + }, + "type": Object { + "name": "array", + "raw": "string[]", + "required": false, + "value": Array [ + Object { + "name": "string", + }, + ], + }, + }, + "foo": Object { + "control": Object { + "type": "boolean", + }, + "description": "", + "name": "foo", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "boolean", + }, + }, + "type": Object { + "name": "boolean", + "required": true, + }, + }, + "title": Object { + "control": Object { + "type": "text", + }, + "description": "", + "name": "title", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "'this is the default :)'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string", + }, + }, + "type": Object { + "name": "string", + "required": false, + }, + }, +} +`; diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9832-ts-enum-export/argTypes.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9832-ts-enum-export/argTypes.snapshot new file mode 100644 index 00000000000..a959893681e --- /dev/null +++ b/addons/docs/src/frameworks/react/__testfixtures__/9832-ts-enum-export/argTypes.snapshot @@ -0,0 +1,3 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`react component properties 9832-ts-enum-export 1`] = `Object {}`; diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9922-ts-component-props/argTypes.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9922-ts-component-props/argTypes.snapshot new file mode 100644 index 00000000000..a7890c95fbd --- /dev/null +++ b/addons/docs/src/frameworks/react/__testfixtures__/9922-ts-component-props/argTypes.snapshot @@ -0,0 +1,25 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`react component properties 9922-ts-component-props 1`] = ` +Object { + "spacing": Object { + "control": Object { + "type": "number", + }, + "description": "", + "name": "spacing", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "number", + }, + }, + "type": Object { + "name": "number", + "required": true, + }, + }, +} +`; diff --git a/addons/docs/src/frameworks/react/__testfixtures__/js-class-component/argTypes.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/js-class-component/argTypes.snapshot new file mode 100644 index 00000000000..ac4980f71de --- /dev/null +++ b/addons/docs/src/frameworks/react/__testfixtures__/js-class-component/argTypes.snapshot @@ -0,0 +1,386 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`react component properties js-class-component 1`] = ` +Object { + "arrayOptional": Object { + "control": Object { + "type": "object", + }, + "description": "", + "name": "arrayOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "['array', 'optional']", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string[]", + }, + }, + "type": Object { + "name": "array", + "required": false, + "value": Object { + "name": "string", + }, + }, + }, + "arrayRequired": Object { + "control": Object { + "type": "object", + }, + "description": "", + "name": "arrayRequired", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string[]", + }, + }, + "type": Object { + "name": "array", + "required": true, + "value": Object { + "name": "string", + }, + }, + }, + "booleanOptional": Object { + "control": Object { + "type": "boolean", + }, + "description": "", + "name": "booleanOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "false", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "bool", + }, + }, + "type": Object { + "name": "boolean", + "required": false, + }, + }, + "booleanRequired": Object { + "control": Object { + "type": "boolean", + }, + "description": "", + "name": "booleanRequired", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "bool", + }, + }, + "type": Object { + "name": "boolean", + "required": true, + }, + }, + "dateOptional": Object { + "control": Object { + "type": "object", + }, + "description": "", + "name": "dateOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "new Date('20 Jan 1983')", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "Date", + }, + }, + "type": Object { + "name": "other", + "required": false, + "value": "instanceOf(Date)", + }, + }, + "dateRequired": Object { + "control": Object { + "type": "object", + }, + "description": "", + "name": "dateRequired", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "Date", + }, + }, + "type": Object { + "name": "other", + "required": true, + "value": "instanceOf(Date)", + }, + }, + "functionOptional": Object { + "description": "", + "name": "functionOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "() => 'foo'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "func", + }, + }, + "type": Object { + "name": "function", + "required": false, + }, + }, + "functionRequired": Object { + "description": "", + "name": "functionRequired", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "func", + }, + }, + "type": Object { + "name": "function", + "required": true, + }, + }, + "globalReference": Object { + "control": Object { + "type": "object", + }, + "description": "", + "name": "globalReference", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "Date", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "any", + }, + }, + "type": Object { + "name": "other", + "required": false, + "value": "any", + }, + }, + "importedReference": Object { + "control": Object { + "type": "text", + }, + "description": "", + "name": "importedReference", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "imported", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string", + }, + }, + "type": Object { + "name": "string", + "required": false, + }, + }, + "localReference": Object { + "control": Object { + "type": "text", + }, + "description": "", + "name": "localReference", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "'local-value'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string", + }, + }, + "type": Object { + "name": "string", + "required": false, + }, + }, + "numberOptional": Object { + "control": Object { + "type": "number", + }, + "description": "", + "name": "numberOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "1", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "number", + }, + }, + "type": Object { + "name": "number", + "required": false, + }, + }, + "numberRequired": Object { + "control": Object { + "type": "number", + }, + "description": "", + "name": "numberRequired", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "number", + }, + }, + "type": Object { + "name": "number", + "required": true, + }, + }, + "objectOptional": Object { + "control": Object { + "type": "object", + }, + "description": "", + "name": "objectOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "{ object: 'optional' }", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "{ }", + }, + }, + "type": Object { + "name": "object", + "required": false, + "value": Object {}, + }, + }, + "objectRequired": Object { + "control": Object { + "type": "object", + }, + "description": "", + "name": "objectRequired", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "{ }", + }, + }, + "type": Object { + "name": "object", + "required": true, + "value": Object {}, + }, + }, + "stringGlobalName": Object { + "control": Object { + "type": "text", + }, + "description": "", + "name": "stringGlobalName", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "'top'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string", + }, + }, + "type": Object { + "name": "string", + "required": false, + }, + }, + "stringOptional": Object { + "control": Object { + "type": "text", + }, + "description": "", + "name": "stringOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "'stringOptional'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string", + }, + }, + "type": Object { + "name": "string", + "required": false, + }, + }, + "stringRequired": Object { + "control": Object { + "type": "text", + }, + "description": "", + "name": "stringRequired", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string", + }, + }, + "type": Object { + "name": "string", + "required": true, + }, + }, +} +`; diff --git a/addons/docs/src/frameworks/react/__testfixtures__/js-function-component-inline-defaults-no-propTypes/argTypes.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/js-function-component-inline-defaults-no-propTypes/argTypes.snapshot new file mode 100644 index 00000000000..ccb9ae3a865 --- /dev/null +++ b/addons/docs/src/frameworks/react/__testfixtures__/js-function-component-inline-defaults-no-propTypes/argTypes.snapshot @@ -0,0 +1,237 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`react component properties js-function-component-inline-defaults-no-propTypes 1`] = ` +Object { + "arrayOptional": Object { + "control": Object { + "type": "object", + }, + "description": undefined, + "name": "arrayOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "['array', 'optional']", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "unknown", + }, + }, + "type": Object { + "required": false, + }, + }, + "booleanOptional": Object { + "control": Object { + "type": "object", + }, + "description": undefined, + "name": "booleanOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "false", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "unknown", + }, + }, + "type": Object { + "required": false, + }, + }, + "dateOptional": Object { + "control": Object { + "type": "object", + }, + "description": undefined, + "name": "dateOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "new Date('20 Jan 1983')", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "unknown", + }, + }, + "type": Object { + "required": false, + }, + }, + "functionOptional": Object { + "control": Object { + "type": "object", + }, + "description": undefined, + "name": "functionOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "() => 'foo'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "unknown", + }, + }, + "type": Object { + "required": false, + }, + }, + "globalReference": Object { + "control": Object { + "type": "object", + }, + "description": undefined, + "name": "globalReference", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "Date", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "unknown", + }, + }, + "type": Object { + "required": false, + }, + }, + "importedReference": Object { + "control": Object { + "type": "object", + }, + "description": undefined, + "name": "importedReference", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "imported", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "unknown", + }, + }, + "type": Object { + "required": false, + }, + }, + "localReference": Object { + "control": Object { + "type": "object", + }, + "description": undefined, + "name": "localReference", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "'local-value'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "unknown", + }, + }, + "type": Object { + "required": false, + }, + }, + "numberOptional": Object { + "control": Object { + "type": "object", + }, + "description": undefined, + "name": "numberOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "1", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "unknown", + }, + }, + "type": Object { + "required": false, + }, + }, + "objectOptional": Object { + "control": Object { + "type": "object", + }, + "description": undefined, + "name": "objectOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "{ object: 'optional' }", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "unknown", + }, + }, + "type": Object { + "required": false, + }, + }, + "stringGlobalName": Object { + "control": Object { + "type": "object", + }, + "description": undefined, + "name": "stringGlobalName", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "'top'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "unknown", + }, + }, + "type": Object { + "required": false, + }, + }, + "stringOptional": Object { + "control": Object { + "type": "object", + }, + "description": undefined, + "name": "stringOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "'stringOptional'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "unknown", + }, + }, + "type": Object { + "required": false, + }, + }, +} +`; diff --git a/addons/docs/src/frameworks/react/__testfixtures__/js-function-component-inline-defaults/argTypes.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/js-function-component-inline-defaults/argTypes.snapshot new file mode 100644 index 00000000000..c332541f78e --- /dev/null +++ b/addons/docs/src/frameworks/react/__testfixtures__/js-function-component-inline-defaults/argTypes.snapshot @@ -0,0 +1,386 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`react component properties js-function-component-inline-defaults 1`] = ` +Object { + "arrayOptional": Object { + "control": Object { + "type": "object", + }, + "description": "", + "name": "arrayOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "['array', 'optional']", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string[]", + }, + }, + "type": Object { + "name": "array", + "required": false, + "value": Object { + "name": "string", + }, + }, + }, + "arrayRequired": Object { + "control": Object { + "type": "object", + }, + "description": "", + "name": "arrayRequired", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string[]", + }, + }, + "type": Object { + "name": "array", + "required": true, + "value": Object { + "name": "string", + }, + }, + }, + "booleanOptional": Object { + "control": Object { + "type": "boolean", + }, + "description": "", + "name": "booleanOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "false", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "bool", + }, + }, + "type": Object { + "name": "boolean", + "required": false, + }, + }, + "booleanRequired": Object { + "control": Object { + "type": "boolean", + }, + "description": "", + "name": "booleanRequired", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "bool", + }, + }, + "type": Object { + "name": "boolean", + "required": true, + }, + }, + "dateOptional": Object { + "control": Object { + "type": "object", + }, + "description": "", + "name": "dateOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "new Date('20 Jan 1983')", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "Date", + }, + }, + "type": Object { + "name": "other", + "required": false, + "value": "instanceOf(Date)", + }, + }, + "dateRequired": Object { + "control": Object { + "type": "object", + }, + "description": "", + "name": "dateRequired", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "Date", + }, + }, + "type": Object { + "name": "other", + "required": true, + "value": "instanceOf(Date)", + }, + }, + "functionOptional": Object { + "description": "", + "name": "functionOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "() => 'foo'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "func", + }, + }, + "type": Object { + "name": "function", + "required": false, + }, + }, + "functionRequired": Object { + "description": "", + "name": "functionRequired", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "func", + }, + }, + "type": Object { + "name": "function", + "required": true, + }, + }, + "globalReference": Object { + "control": Object { + "type": "object", + }, + "description": "", + "name": "globalReference", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "Date", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "any", + }, + }, + "type": Object { + "name": "other", + "required": false, + "value": "any", + }, + }, + "importedReference": Object { + "control": Object { + "type": "text", + }, + "description": "", + "name": "importedReference", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "imported", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string", + }, + }, + "type": Object { + "name": "string", + "required": false, + }, + }, + "localReference": Object { + "control": Object { + "type": "text", + }, + "description": "", + "name": "localReference", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "'local-value'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string", + }, + }, + "type": Object { + "name": "string", + "required": false, + }, + }, + "numberOptional": Object { + "control": Object { + "type": "number", + }, + "description": "", + "name": "numberOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "1", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "number", + }, + }, + "type": Object { + "name": "number", + "required": false, + }, + }, + "numberRequired": Object { + "control": Object { + "type": "number", + }, + "description": "", + "name": "numberRequired", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "number", + }, + }, + "type": Object { + "name": "number", + "required": true, + }, + }, + "objectOptional": Object { + "control": Object { + "type": "object", + }, + "description": "", + "name": "objectOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "{ object: 'optional' }", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "{ }", + }, + }, + "type": Object { + "name": "object", + "required": false, + "value": Object {}, + }, + }, + "objectRequired": Object { + "control": Object { + "type": "object", + }, + "description": "", + "name": "objectRequired", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "{ }", + }, + }, + "type": Object { + "name": "object", + "required": true, + "value": Object {}, + }, + }, + "stringGlobalName": Object { + "control": Object { + "type": "text", + }, + "description": "", + "name": "stringGlobalName", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "'top'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string", + }, + }, + "type": Object { + "name": "string", + "required": false, + }, + }, + "stringOptional": Object { + "control": Object { + "type": "text", + }, + "description": "", + "name": "stringOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "'stringOptional'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string", + }, + }, + "type": Object { + "name": "string", + "required": false, + }, + }, + "stringRequired": Object { + "control": Object { + "type": "text", + }, + "description": "", + "name": "stringRequired", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string", + }, + }, + "type": Object { + "name": "string", + "required": true, + }, + }, +} +`; diff --git a/addons/docs/src/frameworks/react/__testfixtures__/js-function-component/argTypes.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/js-function-component/argTypes.snapshot new file mode 100644 index 00000000000..499ffc5e6db --- /dev/null +++ b/addons/docs/src/frameworks/react/__testfixtures__/js-function-component/argTypes.snapshot @@ -0,0 +1,386 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`react component properties js-function-component 1`] = ` +Object { + "arrayOptional": Object { + "control": Object { + "type": "object", + }, + "description": "", + "name": "arrayOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "['array', 'optional']", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string[]", + }, + }, + "type": Object { + "name": "array", + "required": false, + "value": Object { + "name": "string", + }, + }, + }, + "arrayRequired": Object { + "control": Object { + "type": "object", + }, + "description": "", + "name": "arrayRequired", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string[]", + }, + }, + "type": Object { + "name": "array", + "required": true, + "value": Object { + "name": "string", + }, + }, + }, + "booleanOptional": Object { + "control": Object { + "type": "boolean", + }, + "description": "", + "name": "booleanOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "false", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "bool", + }, + }, + "type": Object { + "name": "boolean", + "required": false, + }, + }, + "booleanRequired": Object { + "control": Object { + "type": "boolean", + }, + "description": "", + "name": "booleanRequired", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "bool", + }, + }, + "type": Object { + "name": "boolean", + "required": true, + }, + }, + "dateOptional": Object { + "control": Object { + "type": "object", + }, + "description": "", + "name": "dateOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "new Date('20 Jan 1983')", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "Date", + }, + }, + "type": Object { + "name": "other", + "required": false, + "value": "instanceOf(Date)", + }, + }, + "dateRequired": Object { + "control": Object { + "type": "object", + }, + "description": "", + "name": "dateRequired", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "Date", + }, + }, + "type": Object { + "name": "other", + "required": true, + "value": "instanceOf(Date)", + }, + }, + "functionOptional": Object { + "description": "", + "name": "functionOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "() => 'foo'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "func", + }, + }, + "type": Object { + "name": "function", + "required": false, + }, + }, + "functionRequired": Object { + "description": "", + "name": "functionRequired", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "func", + }, + }, + "type": Object { + "name": "function", + "required": true, + }, + }, + "globalReference": Object { + "control": Object { + "type": "object", + }, + "description": "", + "name": "globalReference", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "Date", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "any", + }, + }, + "type": Object { + "name": "other", + "required": false, + "value": "any", + }, + }, + "importedReference": Object { + "control": Object { + "type": "text", + }, + "description": "", + "name": "importedReference", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "imported", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string", + }, + }, + "type": Object { + "name": "string", + "required": false, + }, + }, + "localReference": Object { + "control": Object { + "type": "text", + }, + "description": "", + "name": "localReference", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "'local-value'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string", + }, + }, + "type": Object { + "name": "string", + "required": false, + }, + }, + "numberOptional": Object { + "control": Object { + "type": "number", + }, + "description": "", + "name": "numberOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "1", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "number", + }, + }, + "type": Object { + "name": "number", + "required": false, + }, + }, + "numberRequired": Object { + "control": Object { + "type": "number", + }, + "description": "", + "name": "numberRequired", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "number", + }, + }, + "type": Object { + "name": "number", + "required": true, + }, + }, + "objectOptional": Object { + "control": Object { + "type": "object", + }, + "description": "", + "name": "objectOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "{ object: 'optional' }", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "{ }", + }, + }, + "type": Object { + "name": "object", + "required": false, + "value": Object {}, + }, + }, + "objectRequired": Object { + "control": Object { + "type": "object", + }, + "description": "", + "name": "objectRequired", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "{ }", + }, + }, + "type": Object { + "name": "object", + "required": true, + "value": Object {}, + }, + }, + "stringGlobalName": Object { + "control": Object { + "type": "text", + }, + "description": "", + "name": "stringGlobalName", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "'top'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string", + }, + }, + "type": Object { + "name": "string", + "required": false, + }, + }, + "stringOptional": Object { + "control": Object { + "type": "text", + }, + "description": "", + "name": "stringOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "'stringOptional'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string", + }, + }, + "type": Object { + "name": "string", + "required": false, + }, + }, + "stringRequired": Object { + "control": Object { + "type": "text", + }, + "description": "", + "name": "stringRequired", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string", + }, + }, + "type": Object { + "name": "string", + "required": true, + }, + }, +} +`; diff --git a/addons/docs/src/frameworks/react/__testfixtures__/ts-function-component-inline-defaults/argTypes.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/ts-function-component-inline-defaults/argTypes.snapshot new file mode 100644 index 00000000000..99462ac260a --- /dev/null +++ b/addons/docs/src/frameworks/react/__testfixtures__/ts-function-component-inline-defaults/argTypes.snapshot @@ -0,0 +1,279 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`react component properties ts-function-component-inline-defaults 1`] = ` +Object { + "arrayOptional": Object { + "control": Object { + "type": "object", + }, + "description": undefined, + "name": "arrayOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "['array', 'optional']", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "unknown", + }, + }, + "type": Object { + "required": false, + }, + }, + "booleanOptional": Object { + "control": Object { + "type": "object", + }, + "description": undefined, + "name": "booleanOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "false", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "unknown", + }, + }, + "type": Object { + "required": false, + }, + }, + "dateOptional": Object { + "control": Object { + "type": "object", + }, + "description": undefined, + "name": "dateOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "new Date('20 Jan 1983')", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "unknown", + }, + }, + "type": Object { + "required": false, + }, + }, + "enumGlobalName": Object { + "control": Object { + "type": "object", + }, + "description": undefined, + "name": "enumGlobalName", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "'top'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "unknown", + }, + }, + "type": Object { + "required": false, + }, + }, + "functionOptional": Object { + "control": Object { + "type": "object", + }, + "description": undefined, + "name": "functionOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "() => 'foo'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "unknown", + }, + }, + "type": Object { + "required": false, + }, + }, + "globalReference": Object { + "control": Object { + "type": "object", + }, + "description": undefined, + "name": "globalReference", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "Date", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "unknown", + }, + }, + "type": Object { + "required": false, + }, + }, + "importedReference": Object { + "control": Object { + "type": "object", + }, + "description": undefined, + "name": "importedReference", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "imported", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "unknown", + }, + }, + "type": Object { + "required": false, + }, + }, + "localReference": Object { + "control": Object { + "type": "object", + }, + "description": undefined, + "name": "localReference", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "'local-value'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "unknown", + }, + }, + "type": Object { + "required": false, + }, + }, + "numberOptional": Object { + "control": Object { + "type": "object", + }, + "description": undefined, + "name": "numberOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "1", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "unknown", + }, + }, + "type": Object { + "required": false, + }, + }, + "objectOptional": Object { + "control": Object { + "type": "object", + }, + "description": undefined, + "name": "objectOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "{ object: 'optional' }", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "unknown", + }, + }, + "type": Object { + "required": false, + }, + }, + "stringGlobalName": Object { + "control": Object { + "type": "object", + }, + "description": undefined, + "name": "stringGlobalName", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "'top'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "unknown", + }, + }, + "type": Object { + "required": false, + }, + }, + "stringOptional": Object { + "control": Object { + "type": "object", + }, + "description": undefined, + "name": "stringOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "'stringOptional'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "unknown", + }, + }, + "type": Object { + "required": false, + }, + }, + "unionGlobalName": Object { + "control": Object { + "type": "object", + }, + "description": undefined, + "name": "unionGlobalName", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "'top'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "unknown", + }, + }, + "type": Object { + "required": false, + }, + }, +} +`; diff --git a/addons/docs/src/frameworks/react/__testfixtures__/ts-function-component/argTypes.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/ts-function-component/argTypes.snapshot new file mode 100644 index 00000000000..eba89c8d11d --- /dev/null +++ b/addons/docs/src/frameworks/react/__testfixtures__/ts-function-component/argTypes.snapshot @@ -0,0 +1,396 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`react component properties ts-function-component 1`] = ` +Object { + "arrayOptional": Object { + "control": Object { + "type": "object", + }, + "description": "", + "name": "arrayOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "['array', 'optional']", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "Array", + }, + }, + "type": Object { + "name": "array", + "raw": "string[]", + "required": false, + "value": Array [ + Object { + "name": "string", + }, + ], + }, + }, + "arrayRequired": Object { + "control": Object { + "type": "object", + }, + "description": "", + "name": "arrayRequired", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "Array", + }, + }, + "type": Object { + "name": "array", + "raw": "string[]", + "required": true, + "value": Array [ + Object { + "name": "string", + }, + ], + }, + }, + "booleanOptional": Object { + "control": Object { + "type": "boolean", + }, + "description": "", + "name": "booleanOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "false", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "boolean", + }, + }, + "type": Object { + "name": "boolean", + "required": false, + }, + }, + "booleanRequired": Object { + "control": Object { + "type": "boolean", + }, + "description": "", + "name": "booleanRequired", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "boolean", + }, + }, + "type": Object { + "name": "boolean", + "required": true, + }, + }, + "dateOptional": Object { + "control": Object { + "type": "object", + }, + "description": "", + "name": "dateOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "new Date('20 Jan 1983')", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "Date", + }, + }, + "type": Object { + "name": "other", + "required": false, + "value": "Date", + }, + }, + "dateRequired": Object { + "control": Object { + "type": "object", + }, + "description": "", + "name": "dateRequired", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "Date", + }, + }, + "type": Object { + "name": "other", + "required": true, + "value": "Date", + }, + }, + "functionOptional": Object { + "description": "", + "name": "functionOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "() => 'foo'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "signature", + }, + }, + "type": Object { + "name": "function", + "raw": "() => string", + "required": false, + }, + }, + "functionRequired": Object { + "description": "", + "name": "functionRequired", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "signature", + }, + }, + "type": Object { + "name": "function", + "raw": "() => string", + "required": true, + }, + }, + "globalReference": Object { + "control": Object { + "type": "object", + }, + "description": "", + "name": "globalReference", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "Date", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "any", + }, + }, + "type": Object { + "name": "other", + "required": false, + "value": "any", + }, + }, + "importedReference": Object { + "control": Object { + "type": "text", + }, + "description": "", + "name": "importedReference", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "imported", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string", + }, + }, + "type": Object { + "name": "string", + "required": false, + }, + }, + "localReference": Object { + "control": Object { + "type": "text", + }, + "description": "", + "name": "localReference", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "'local-value'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string", + }, + }, + "type": Object { + "name": "string", + "required": false, + }, + }, + "numberOptional": Object { + "control": Object { + "type": "number", + }, + "description": "", + "name": "numberOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "1", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "number", + }, + }, + "type": Object { + "name": "number", + "required": false, + }, + }, + "numberRequired": Object { + "control": Object { + "type": "number", + }, + "description": "Description", + "name": "numberRequired", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "number", + }, + }, + "type": Object { + "name": "number", + "required": true, + }, + }, + "objectOptional": Object { + "control": Object { + "type": "object", + }, + "description": "", + "name": "objectOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "{ object: 'optional' }", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "Record", + }, + }, + "type": Object { + "name": "other", + "raw": "Record", + "required": false, + "value": "Record", + }, + }, + "objectRequired": Object { + "control": Object { + "type": "object", + }, + "description": "", + "name": "objectRequired", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "Record", + }, + }, + "type": Object { + "name": "other", + "raw": "Record", + "required": true, + "value": "Record", + }, + }, + "stringGlobalName": Object { + "control": Object { + "type": "text", + }, + "description": "", + "name": "stringGlobalName", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "'top'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string", + }, + }, + "type": Object { + "name": "string", + "required": false, + }, + }, + "stringOptional": Object { + "control": Object { + "type": "text", + }, + "description": "", + "name": "stringOptional", + "table": Object { + "defaultValue": Object { + "detail": undefined, + "summary": "'stringOptional'", + }, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string", + }, + }, + "type": Object { + "name": "string", + "required": false, + }, + }, + "stringRequired": Object { + "control": Object { + "type": "text", + }, + "description": "", + "name": "stringRequired", + "table": Object { + "defaultValue": null, + "jsDocTags": undefined, + "type": Object { + "detail": undefined, + "summary": "string", + }, + }, + "type": Object { + "name": "string", + "required": true, + }, + }, +} +`; diff --git a/addons/docs/src/frameworks/react/extractArgTypes.ts b/addons/docs/src/frameworks/react/extractArgTypes.ts index 92ad351a8c7..76768f26843 100644 --- a/addons/docs/src/frameworks/react/extractArgTypes.ts +++ b/addons/docs/src/frameworks/react/extractArgTypes.ts @@ -7,26 +7,19 @@ export const extractArgTypes: ArgTypesExtractor = (component) => { const { rows } = extractProps(component); if (rows) { return rows.reduce((acc: ArgTypes, row: PropDef) => { - const { name, type, sbType, defaultValue: defaultSummary, jsDocTags, required } = row; + const { + name, + description, + type, + sbType, + defaultValue: defaultSummary, + jsDocTags, + required, + } = row; - let defaultValue; - if (component.defaultProps) { - defaultValue = component.defaultProps[name]; - } else { - const defaultValueString = - defaultSummary && (defaultSummary.detail || defaultSummary.summary); - try { - if (defaultValueString) { - // eslint-disable-next-line no-new-func - defaultValue = Function(`"use strict";return (${defaultValueString})`)(); - } - // eslint-disable-next-line no-empty - } catch {} - } - - acc[row.name] = { - ...row, - defaultValue, + acc[name] = { + name, + description, type: { required, ...sbType }, table: { type, diff --git a/addons/docs/src/frameworks/react/react-argtypes.stories.tsx b/addons/docs/src/frameworks/react/react-argtypes.stories.tsx index a352e441d7c..4006962f1fe 100644 --- a/addons/docs/src/frameworks/react/react-argtypes.stories.tsx +++ b/addons/docs/src/frameworks/react/react-argtypes.stories.tsx @@ -4,7 +4,6 @@ import { storiesOf, StoryContext } from '@storybook/react'; import { ArgsTable } from '@storybook/components'; import { Args } from '@storybook/api'; import { inferControls } from '@storybook/client-api'; -import { useTheme, Theme } from '@storybook/theming'; import { extractArgTypes } from './extractArgTypes'; import { Component } from '../../blocks'; @@ -16,23 +15,6 @@ const argsTableProps = (component: Component) => { return { rows }; }; -function FormatArg({ arg }) { - const theme = useTheme(); - const badgeStyle = { - background: theme.background.hoverable, - border: `1px solid ${theme.background.hoverable}`, - borderRadius: 2, - }; - if (typeof arg !== 'undefined') { - try { - return {JSON.stringify(arg, null, 2)}; - } catch (err) { - return {arg.toString()}; - } - } - return undefined; -} - const ArgsStory = ({ component }: any) => { const { rows } = argsTableProps(component); const initialArgs = mapValues(rows, (argType) => argType.defaultValue) as Args; @@ -40,11 +22,16 @@ const ArgsStory = ({ component }: any) => { const [args, setArgs] = useState(initialArgs); return ( <> +

+ NOTE: these stories are to help visualise the snapshot tests in{' '} + ./react-properties.test.js. +

+ setArgs({ ...args, ...val })} /> - - + + @@ -54,13 +41,12 @@ const ArgsStory = ({ component }: any) => { {key} ))}
keyvalarg nameargType
- + 
{JSON.stringify(rows[key])}
- setArgs({ ...args, ...val })} /> ); }; @@ -132,5 +118,7 @@ issuesFixtures.forEach((fixture) => { // eslint-disable-next-line import/no-dynamic-require, global-require const { component } = require(`./__testfixtures__/${fixture}/input`); - issuesStories.add(fixture, () => ); + issuesStories.add(fixture, () => , { + chromatic: { disable: true }, + }); }); diff --git a/addons/docs/src/frameworks/react/react-properties.test.ts b/addons/docs/src/frameworks/react/react-properties.test.ts index 74bbe655509..1417a82b5ab 100644 --- a/addons/docs/src/frameworks/react/react-properties.test.ts +++ b/addons/docs/src/frameworks/react/react-properties.test.ts @@ -3,9 +3,12 @@ import path from 'path'; import fs from 'fs'; import { transformFileSync, transformSync } from '@babel/core'; +import { inferControls } from '@storybook/client-api'; +import { StoryContext } from '@storybook/react'; import requireFromString from 'require-from-string'; import { extractProps } from './extractProps'; +import { extractArgTypes } from './extractArgTypes'; import { normalizeNewlines } from '../../lib/utils'; // jest.mock('../imported', () => () => ({ imported: 'imported-value' }), { virtual: true }); @@ -63,6 +66,12 @@ describe('react component properties', () => { const { component } = requireFromString(docgenModule, inputPath); const properties = extractProps(component); expect(properties).toMatchSpecificSnapshot(path.join(testDir, 'properties.snapshot')); + + // snapshot the output of `extractArgTypes` + const argTypes = extractArgTypes(component); + const parameters = { __isArgsStory: true, argTypes }; + const rows = inferControls(({ parameters } as unknown) as StoryContext); + expect(rows).toMatchSpecificSnapshot(path.join(testDir, 'argTypes.snapshot')); }); } } diff --git a/addons/docs/src/frameworks/svelte/extractArgTypes.test.ts b/addons/docs/src/frameworks/svelte/extractArgTypes.test.ts index 0af98b44bf6..6ed62599a2e 100644 --- a/addons/docs/src/frameworks/svelte/extractArgTypes.test.ts +++ b/addons/docs/src/frameworks/svelte/extractArgTypes.test.ts @@ -90,7 +90,6 @@ describe('Extracting Arguments', () => { "control": Object { "type": "boolean", }, - "defaultValue": true, "description": null, "name": "rounded", "table": Object { @@ -123,7 +122,6 @@ describe('Extracting Arguments', () => { "control": Object { "type": "text", }, - "defaultValue": "", "description": null, "name": "text", "table": Object { diff --git a/addons/docs/src/frameworks/svelte/extractArgTypes.ts b/addons/docs/src/frameworks/svelte/extractArgTypes.ts index 09ea906f1f8..bf81d28bfbb 100644 --- a/addons/docs/src/frameworks/svelte/extractArgTypes.ts +++ b/addons/docs/src/frameworks/svelte/extractArgTypes.ts @@ -41,7 +41,6 @@ export const createArgTypes = (docgen: SvelteComponentDoc) => { required: hasKeyword('required', item.keywords), summary: item.type?.text, }, - defaultValue: item.defaultValue, table: { type: { summary: item.type?.text, diff --git a/addons/docs/src/frameworks/vue/extractArgTypes.ts b/addons/docs/src/frameworks/vue/extractArgTypes.ts index ca65e50f1e3..fbd1f85fc20 100644 --- a/addons/docs/src/frameworks/vue/extractArgTypes.ts +++ b/addons/docs/src/frameworks/vue/extractArgTypes.ts @@ -1,12 +1,9 @@ import { ArgTypes } from '@storybook/api'; import { ArgTypesExtractor, hasDocgen, extractComponentProps } from '../../lib/docgen'; import { convert } from '../../lib/convert'; -import { trimQuotes } from '../../lib/convert/utils'; const SECTIONS = ['props', 'events', 'slots']; -const trim = (val: any) => (val && typeof val === 'string' ? trimQuotes(val) : val); - export const extractArgTypes: ArgTypesExtractor = (component) => { if (!hasDocgen(component)) { return null; @@ -17,18 +14,10 @@ export const extractArgTypes: ArgTypesExtractor = (component) => { props.forEach(({ propDef, docgenInfo, jsDocTags }) => { const { name, type, description, defaultValue: defaultSummary, required } = propDef; const sbType = section === 'props' ? convert(docgenInfo) : { name: 'void' }; - let defaultValue = defaultSummary && (defaultSummary.detail || defaultSummary.summary); - try { - // eslint-disable-next-line no-eval - defaultValue = eval(defaultValue); - // eslint-disable-next-line no-empty - } catch {} - results[name] = { name, description, type: { required, ...sbType }, - defaultValue, table: { type, jsDocTags, diff --git a/addons/docs/src/frameworks/vue3/extractArgTypes.ts b/addons/docs/src/frameworks/vue3/extractArgTypes.ts index 6a264ad6f6d..1555b6d6acc 100644 --- a/addons/docs/src/frameworks/vue3/extractArgTypes.ts +++ b/addons/docs/src/frameworks/vue3/extractArgTypes.ts @@ -14,18 +14,11 @@ export const extractArgTypes: ArgTypesExtractor = (component) => { props.forEach(({ propDef, docgenInfo, jsDocTags }) => { const { name, type, description, defaultValue: defaultSummary, required } = propDef; const sbType = section === 'props' ? convert(docgenInfo) : { name: 'void' }; - let defaultValue = defaultSummary && (defaultSummary.detail || defaultSummary.summary); - try { - // eslint-disable-next-line no-eval - defaultValue = eval(defaultValue); - // eslint-disable-next-line no-empty - } catch {} results[name] = { name, description, type: { required, ...sbType }, - defaultValue, table: { type, jsDocTags, diff --git a/addons/essentials/package.json b/addons/essentials/package.json index 294fab13e4c..49a91a25ed7 100644 --- a/addons/essentials/package.json +++ b/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", @@ -39,29 +39,29 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addon-actions": "6.3.0-alpha.27", - "@storybook/addon-backgrounds": "6.3.0-alpha.27", - "@storybook/addon-controls": "6.3.0-alpha.27", - "@storybook/addon-docs": "6.3.0-alpha.27", - "@storybook/addon-toolbars": "6.3.0-alpha.27", - "@storybook/addon-viewport": "6.3.0-alpha.27", - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/api": "6.3.0-alpha.27", - "@storybook/node-logger": "6.3.0-alpha.27", + "@storybook/addon-actions": "6.3.0-alpha.33", + "@storybook/addon-backgrounds": "6.3.0-alpha.33", + "@storybook/addon-controls": "6.3.0-alpha.33", + "@storybook/addon-docs": "6.3.0-alpha.33", + "@storybook/addon-toolbars": "6.3.0-alpha.33", + "@storybook/addon-viewport": "6.3.0-alpha.33", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/api": "6.3.0-alpha.33", + "@storybook/node-logger": "6.3.0-alpha.33", "core-js": "^3.8.2", "regenerator-runtime": "^0.13.7", "ts-dedent": "^2.0.0" }, "devDependencies": { "@babel/core": "^7.12.10", - "@storybook/vue": "6.3.0-alpha.27", + "@storybook/vue": "6.3.0-alpha.33", "@types/jest": "^26.0.16", "@types/webpack-env": "^1.16.0" }, "peerDependencies": { "@babel/core": "^7.9.6", - "@storybook/vue": "6.3.0-alpha.27", - "@storybook/web-components": "6.3.0-alpha.27", + "@storybook/vue": "6.3.0-alpha.33", + "@storybook/web-components": "6.3.0-alpha.33", "babel-loader": "^8.0.0", "lit-html": "^1.0.0", "react": "^16.8.0 || ^17.0.0", @@ -91,5 +91,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a" + "gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7", + "sbmodern": "dist/modern/index.js" } diff --git a/addons/jest/package.json b/addons/jest/package.json index f62685d9c6d..d8d8740caa7 100644 --- a/addons/jest/package.json +++ b/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "description": "React storybook addon that show component jest report", "keywords": [ "addon", @@ -47,11 +47,11 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/api": "6.3.0-alpha.27", - "@storybook/components": "6.3.0-alpha.27", - "@storybook/core-events": "6.3.0-alpha.27", - "@storybook/theming": "6.3.0-alpha.27", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/api": "6.3.0-alpha.33", + "@storybook/components": "6.3.0-alpha.33", + "@storybook/core-events": "6.3.0-alpha.33", + "@storybook/theming": "6.3.0-alpha.33", "core-js": "^3.8.2", "global": "^4.4.0", "react-sizeme": "^3.0.1", @@ -76,7 +76,8 @@ "publishConfig": { "access": "public" }, - "gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a", + "gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7", + "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Jest", "icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg", diff --git a/addons/links/package.json b/addons/links/package.json index d7e75fb2d72..2582504be5e 100644 --- a/addons/links/package.json +++ b/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "addon", @@ -41,11 +41,11 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/client-logger": "6.3.0-alpha.27", - "@storybook/core-events": "6.3.0-alpha.27", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/client-logger": "6.3.0-alpha.33", + "@storybook/core-events": "6.3.0-alpha.33", "@storybook/csf": "0.0.1", - "@storybook/router": "6.3.0-alpha.27", + "@storybook/router": "6.3.0-alpha.33", "@types/qs": "^6.9.5", "core-js": "^3.8.2", "global": "^4.4.0", @@ -72,7 +72,8 @@ "publishConfig": { "access": "public" }, - "gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a", + "gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7", + "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Links", "icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png", diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json index bd8a8c39815..5a16cc176d3 100644 --- a/addons/storyshots/storyshots-core/package.json +++ b/addons/storyshots/storyshots-core/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storyshots", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "description": "Take a code snapshot of every story automatically with Jest", "keywords": [ "addon", @@ -45,10 +45,10 @@ }, "dependencies": { "@jest/transform": "^26.6.2", - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/client-api": "6.3.0-alpha.27", - "@storybook/core": "6.3.0-alpha.27", - "@storybook/core-common": "6.3.0-alpha.27", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/client-api": "6.3.0-alpha.33", + "@storybook/core": "6.3.0-alpha.33", + "@storybook/core-common": "6.3.0-alpha.33", "@types/glob": "^7.1.3", "@types/jest": "^26.0.16", "@types/jest-specific-snapshot": "^0.5.3", @@ -67,11 +67,11 @@ "devDependencies": { "@angular/core": "^11.2.0", "@angular/platform-browser-dynamic": "^11.2.0", - "@storybook/addon-docs": "6.3.0-alpha.27", - "@storybook/angular": "6.3.0-alpha.27", - "@storybook/react": "6.3.0-alpha.27", - "@storybook/vue": "6.3.0-alpha.27", - "@storybook/vue3": "6.3.0-alpha.27", + "@storybook/addon-docs": "6.3.0-alpha.33", + "@storybook/angular": "6.3.0-alpha.33", + "@storybook/react": "6.3.0-alpha.33", + "@storybook/vue": "6.3.0-alpha.33", + "@storybook/vue3": "6.3.0-alpha.33", "babel-loader": "^8.2.2", "enzyme": "^3.11.0", "enzyme-to-json": "^3.6.1", @@ -148,7 +148,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a", + "gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7", "storybook": { "displayName": "Storyshots", "icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png", diff --git a/addons/storyshots/storyshots-core/src/frameworks/Loader.ts b/addons/storyshots/storyshots-core/src/frameworks/Loader.ts index a257e0e0e8b..e62a43b399d 100644 --- a/addons/storyshots/storyshots-core/src/frameworks/Loader.ts +++ b/addons/storyshots/storyshots-core/src/frameworks/Loader.ts @@ -12,6 +12,7 @@ export interface ClientApi extends ClientStoryApi { getStorybook: ClientApiThing['getStorybook']; setAddon: ClientApiThing['setAddon']; raw: ClientApiThing['raw']; + addArgsEnhancer: ClientApiThing['addArgsEnhancer']; addArgTypesEnhancer: ClientApiThing['addArgTypesEnhancer']; } diff --git a/addons/storyshots/storyshots-core/src/frameworks/configure.ts b/addons/storyshots/storyshots-core/src/frameworks/configure.ts index e80b4f2d678..4c456d3c174 100644 --- a/addons/storyshots/storyshots-core/src/frameworks/configure.ts +++ b/addons/storyshots/storyshots-core/src/frameworks/configure.ts @@ -3,7 +3,7 @@ import path from 'path'; import { toRequireContext } from '@storybook/core-common'; import registerRequireContextHook from 'babel-plugin-require-context-hook/register'; import global from 'global'; -import { ArgTypesEnhancer, DecoratorFunction } from '@storybook/client-api'; +import { ArgsEnhancer, ArgTypesEnhancer, DecoratorFunction } from '@storybook/client-api'; import { ClientApi } from './Loader'; import { StoryshotsOptions } from '../api/StoryshotsOptions'; @@ -85,9 +85,14 @@ function configure( if (preview) { // This is essentially the same code as lib/core/src/server/preview/virtualModuleEntry.template - const { parameters, decorators, globals, globalTypes, argTypesEnhancers } = jest.requireActual( - preview - ); + const { + parameters, + decorators, + globals, + globalTypes, + argsEnhancers, + argTypesEnhancers, + } = jest.requireActual(preview); if (decorators) { decorators.forEach((decorator: DecoratorFunction) => storybook.addDecorator(decorator)); @@ -95,6 +100,9 @@ function configure( if (parameters || globals || globalTypes) { storybook.addParameters({ ...parameters, globals, globalTypes }); } + if (argsEnhancers) { + argsEnhancers.forEach((enhancer: ArgsEnhancer) => storybook.addArgsEnhancer(enhancer)); + } if (argTypesEnhancers) { argTypesEnhancers.forEach((enhancer: ArgTypesEnhancer) => storybook.addArgTypesEnhancer(enhancer) diff --git a/addons/storyshots/storyshots-puppeteer/package.json b/addons/storyshots/storyshots-puppeteer/package.json index e610bd14574..6bef4d0006a 100644 --- a/addons/storyshots/storyshots-puppeteer/package.json +++ b/addons/storyshots/storyshots-puppeteer/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storyshots-puppeteer", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "description": "Image snapshots addition to StoryShots based on puppeteer", "keywords": [ "addon", @@ -41,7 +41,7 @@ }, "dependencies": { "@storybook/csf": "0.0.1", - "@storybook/node-logger": "6.3.0-alpha.27", + "@storybook/node-logger": "6.3.0-alpha.33", "@types/jest-image-snapshot": "^4.1.3", "@wordpress/jest-puppeteer-axe": "^3.0.3", "core-js": "^3.8.2", @@ -53,7 +53,7 @@ "@types/puppeteer": "^5.4.0" }, "peerDependencies": { - "@storybook/addon-storyshots": "6.3.0-alpha.27", + "@storybook/addon-storyshots": "6.3.0-alpha.33", "puppeteer": "^2.0.0 || ^3.0.0" }, "peerDependenciesMeta": { @@ -64,5 +64,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a" + "gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7" } diff --git a/addons/storysource/package.json b/addons/storysource/package.json index cc1f13983d6..4191bb0cc20 100644 --- a/addons/storysource/package.json +++ b/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "description": "View a story’s source code to see how it works and paste into your app", "keywords": [ "addon", @@ -41,13 +41,13 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/api": "6.3.0-alpha.27", - "@storybook/client-logger": "6.3.0-alpha.27", - "@storybook/components": "6.3.0-alpha.27", - "@storybook/router": "6.3.0-alpha.27", - "@storybook/source-loader": "6.3.0-alpha.27", - "@storybook/theming": "6.3.0-alpha.27", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/api": "6.3.0-alpha.33", + "@storybook/client-logger": "6.3.0-alpha.33", + "@storybook/components": "6.3.0-alpha.33", + "@storybook/router": "6.3.0-alpha.33", + "@storybook/source-loader": "6.3.0-alpha.33", + "@storybook/theming": "6.3.0-alpha.33", "core-js": "^3.8.2", "estraverse": "^5.2.0", "loader-utils": "^2.0.0", @@ -75,7 +75,8 @@ "publishConfig": { "access": "public" }, - "gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a", + "gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7", + "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Storysource", "icon": "https://user-images.githubusercontent.com/263385/101991675-48cdf300-3c7c-11eb-9400-58de5ac6daa7.png", diff --git a/addons/toolbars/package.json b/addons/toolbars/package.json index 311a1e598b5..3e97a873c99 100644 --- a/addons/toolbars/package.json +++ b/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", @@ -45,10 +45,10 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/api": "6.3.0-alpha.27", - "@storybook/client-api": "6.3.0-alpha.27", - "@storybook/components": "6.3.0-alpha.27", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/api": "6.3.0-alpha.33", + "@storybook/client-api": "6.3.0-alpha.33", + "@storybook/components": "6.3.0-alpha.33", "core-js": "^3.8.2" }, "peerDependencies": { @@ -66,7 +66,8 @@ "publishConfig": { "access": "public" }, - "gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a", + "gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7", + "sbmodern": "dist/modern/register.js", "storybook": { "displayName": "Toolbars", "icon": "https://user-images.githubusercontent.com/263385/101991677-48cdf300-3c7c-11eb-93b4-19b0e3366959.png", diff --git a/addons/viewport/package.json b/addons/viewport/package.json index 1b61f0f06ee..204ceba801e 100644 --- a/addons/viewport/package.json +++ b/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "description": "Build responsive components by adjusting Storybook’s viewport size and orientation", "keywords": [ "addon", @@ -42,12 +42,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/api": "6.3.0-alpha.27", - "@storybook/client-logger": "6.3.0-alpha.27", - "@storybook/components": "6.3.0-alpha.27", - "@storybook/core-events": "6.3.0-alpha.27", - "@storybook/theming": "6.3.0-alpha.27", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/api": "6.3.0-alpha.33", + "@storybook/client-logger": "6.3.0-alpha.33", + "@storybook/components": "6.3.0-alpha.33", + "@storybook/core-events": "6.3.0-alpha.33", + "@storybook/theming": "6.3.0-alpha.33", "core-js": "^3.8.2", "global": "^4.4.0", "memoizerific": "^1.11.3", @@ -69,7 +69,8 @@ "publishConfig": { "access": "public" }, - "gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a", + "gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7", + "sbmodern": "dist/modern/preview.js", "storybook": { "displayName": "Viewport", "icon": "https://user-images.githubusercontent.com/263385/101991678-48cdf300-3c7c-11eb-9764-f8af293c1b28.png", diff --git a/app/angular/package.json b/app/angular/package.json index cdc0c3e1f2c..5630b51417a 100644 --- a/app/angular/package.json +++ b/app/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -45,11 +45,11 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/api": "6.3.0-alpha.27", - "@storybook/core": "6.3.0-alpha.27", - "@storybook/core-common": "6.3.0-alpha.27", - "@storybook/node-logger": "6.3.0-alpha.27", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/api": "6.3.0-alpha.33", + "@storybook/core": "6.3.0-alpha.33", + "@storybook/core-common": "6.3.0-alpha.33", + "@storybook/node-logger": "6.3.0-alpha.33", "@types/webpack-env": "^1.16.0", "autoprefixer": "^9.8.6", "core-js": "^3.8.2", @@ -124,5 +124,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a" + "gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7" } diff --git a/app/angular/src/client/preview/angular-beta/ElementRendererService.ts b/app/angular/src/client/preview/angular-beta/ElementRendererService.ts index 7a79c9fd06e..53280bdee19 100644 --- a/app/angular/src/client/preview/angular-beta/ElementRendererService.ts +++ b/app/angular/src/client/preview/angular-beta/ElementRendererService.ts @@ -38,7 +38,10 @@ export class ElementRendererService { return this.rendererService .newPlatformBrowserDynamic() - .bootstrapModule(createElementsModule(ngModule)) + .bootstrapModule( + createElementsModule(ngModule), + parameters.bootstrapModuleOptions ?? undefined + ) .then((m) => m.instance.ngEl); } } diff --git a/app/angular/src/client/preview/angular-beta/RendererService.test.ts b/app/angular/src/client/preview/angular-beta/RendererService.test.ts index 3e1767beb27..802ac603938 100644 --- a/app/angular/src/client/preview/angular-beta/RendererService.test.ts +++ b/app/angular/src/client/preview/angular-beta/RendererService.test.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; import { platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - +import { Parameters } from '../types-6-0'; import { RendererService } from './RendererService'; jest.mock('@angular/platform-browser-dynamic'); @@ -182,5 +182,34 @@ describe('RendererService', () => { expect(countDestroy).toEqual(1); }); + + describe('bootstrap module options', () => { + async function setupComponentWithWhitespace(bootstrapModuleOptions: unknown) { + await rendererService.render({ + storyFnAngular: { + template: '
', + props: {}, + }, + forced: false, + parameters: { + bootstrapModuleOptions, + } as Parameters, + }); + } + + it('should preserve whitespaces', async () => { + await setupComponentWithWhitespace({ preserveWhitespaces: true }); + expect(document.body.getElementsByTagName('storybook-wrapper')[0].innerHTML).toBe( + '
' + ); + }); + + it('should remove whitespaces', async () => { + await setupComponentWithWhitespace({ preserveWhitespaces: false }); + expect(document.body.getElementsByTagName('storybook-wrapper')[0].innerHTML).toBe( + '
' + ); + }); + }); }); }); diff --git a/app/angular/src/client/preview/angular-beta/RendererService.ts b/app/angular/src/client/preview/angular-beta/RendererService.ts index d45c5929ad6..213c461a454 100644 --- a/app/angular/src/client/preview/angular-beta/RendererService.ts +++ b/app/angular/src/client/preview/angular-beta/RendererService.ts @@ -105,7 +105,10 @@ export class RendererService { } this.storyProps$ = storyProps$; - await this.newPlatformBrowserDynamic().bootstrapModule(createStorybookModule(moduleMetadata)); + await this.newPlatformBrowserDynamic().bootstrapModule( + createStorybookModule(moduleMetadata), + parameters.bootstrapModuleOptions ?? undefined + ); } public newPlatformBrowserDynamic() { diff --git a/app/angular/src/client/preview/types-6-0.ts b/app/angular/src/client/preview/types-6-0.ts index c2b0514ddf3..2f3bd73b2d2 100644 --- a/app/angular/src/client/preview/types-6-0.ts +++ b/app/angular/src/client/preview/types-6-0.ts @@ -33,6 +33,7 @@ export type Parameters = DefaultParameters & { /** Uses legacy angular rendering engine that use dynamic component */ angularLegacyRendering?: boolean; component: unknown; + bootstrapModuleOptions?: unknown; }; export type StoryContext = DefaultStoryContext & { parameters: Parameters }; diff --git a/app/ember/package.json b/app/ember/package.json index 446312b5398..d1978818d67 100644 --- a/app/ember/package.json +++ b/app/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybookjs/storybook/tree/master/app/ember", "bugs": { @@ -43,8 +43,8 @@ }, "dependencies": { "@ember/test-helpers": "^2.1.4", - "@storybook/core": "6.3.0-alpha.27", - "@storybook/core-common": "6.3.0-alpha.27", + "@storybook/core": "6.3.0-alpha.33", + "@storybook/core-common": "6.3.0-alpha.33", "core-js": "^3.8.2", "global": "^4.4.0", "react": "16.14.0", @@ -65,5 +65,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a" + "gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7", + "sbmodern": "dist/modern/client/index.js" } diff --git a/app/html/package.json b/app/html/package.json index 090cbee1f01..a2f6a31f9b0 100644 --- a/app/html/package.json +++ b/app/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -45,10 +45,10 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/client-api": "6.3.0-alpha.27", - "@storybook/core": "6.3.0-alpha.27", - "@storybook/core-common": "6.3.0-alpha.27", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/client-api": "6.3.0-alpha.33", + "@storybook/core": "6.3.0-alpha.33", + "@storybook/core-common": "6.3.0-alpha.33", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", "global": "^4.4.0", @@ -68,5 +68,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a" + "gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7", + "sbmodern": "dist/modern/client/index.js" } diff --git a/app/lit/package.json b/app/lit/package.json index 0c88c789957..7ce2911399b 100644 --- a/app/lit/package.json +++ b/app/lit/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/lit", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "description": "Storybook for lit: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit", @@ -45,10 +45,10 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/client-api": "6.3.0-alpha.27", - "@storybook/core": "6.3.0-alpha.27", - "@storybook/core-common": "6.3.0-alpha.27", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/client-api": "6.3.0-alpha.33", + "@storybook/core": "6.3.0-alpha.33", + "@storybook/core-common": "6.3.0-alpha.33", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", "global": "^4.4.0", @@ -70,5 +70,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a" + "gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7", + "sbmodern": "dist/modern/client/index.js" } diff --git a/app/lit/src/client/index.ts b/app/lit/src/client/index.ts index 96079eccf73..b257c530085 100644 --- a/app/lit/src/client/index.ts +++ b/app/lit/src/client/index.ts @@ -11,7 +11,7 @@ export { raw, } from './preview'; -export * from './preview/types'; +export * from './preview/types-6-0'; // TODO: disable HMR and do full page loads because of customElements.define if (module && module.hot && module.hot.decline) { diff --git a/app/lit/src/client/preview/types-6-0.ts b/app/lit/src/client/preview/types-6-0.ts new file mode 100644 index 00000000000..36755bbc4ad --- /dev/null +++ b/app/lit/src/client/preview/types-6-0.ts @@ -0,0 +1,19 @@ +import { Args as DefaultArgs, Annotations, BaseMeta, BaseStory } from '@storybook/addons'; +import { StoryFnLitReturnType } from './types'; + +export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/addons'; + +/** + * Metadata to configure the stories for a component. + * + * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export) + */ +export type Meta = BaseMeta & Annotations; + +/** + * Story function that represents a component example. + * + * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports) + */ +export type Story = BaseStory & + Annotations; diff --git a/app/preact/package.json b/app/preact/package.json index 01b812bda39..88eee9824e7 100644 --- a/app/preact/package.json +++ b/app/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" @@ -46,9 +46,9 @@ }, "dependencies": { "@babel/plugin-transform-react-jsx": "^7.12.12", - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/core": "6.3.0-alpha.27", - "@storybook/core-common": "6.3.0-alpha.27", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/core": "6.3.0-alpha.33", + "@storybook/core-common": "6.3.0-alpha.33", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", "global": "^4.4.0", @@ -72,5 +72,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a" + "gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7", + "sbmodern": "dist/modern/client/index.js" } diff --git a/app/react/package.json b/app/react/package.json index 7b4f947b047..1cd55e2f8a8 100644 --- a/app/react/package.json +++ b/app/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -49,10 +49,10 @@ "@babel/preset-flow": "^7.12.1", "@babel/preset-react": "^7.12.10", "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3", - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/core": "6.3.0-alpha.27", - "@storybook/core-common": "6.3.0-alpha.27", - "@storybook/node-logger": "6.3.0-alpha.27", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/core": "6.3.0-alpha.33", + "@storybook/core-common": "6.3.0-alpha.33", + "@storybook/node-logger": "6.3.0-alpha.33", "@storybook/semver": "^7.3.2", "@types/webpack-env": "^1.16.0", "babel-plugin-add-react-displayname": "^0.0.5", @@ -71,7 +71,7 @@ "webpack": "4" }, "devDependencies": { - "@storybook/client-api": "6.3.0-alpha.27", + "@storybook/client-api": "6.3.0-alpha.33", "@types/node": "^14.14.20", "@types/prompts": "^2.0.9" }, @@ -94,5 +94,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a" + "gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7", + "sbmodern": "dist/modern/client/index.js" } diff --git a/app/server/package.json b/app/server/package.json index d8adcb79581..57c4db2b743 100644 --- a/app/server/package.json +++ b/app/server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -45,12 +45,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/api": "6.3.0-alpha.27", - "@storybook/client-api": "6.3.0-alpha.27", - "@storybook/core": "6.3.0-alpha.27", - "@storybook/core-common": "6.3.0-alpha.27", - "@storybook/node-logger": "6.3.0-alpha.27", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/api": "6.3.0-alpha.33", + "@storybook/client-api": "6.3.0-alpha.33", + "@storybook/core": "6.3.0-alpha.33", + "@storybook/core-common": "6.3.0-alpha.33", + "@storybook/node-logger": "6.3.0-alpha.33", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", "global": "^4.4.0", @@ -70,5 +70,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a" + "gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7", + "sbmodern": "dist/modern/client/index.js" } diff --git a/app/svelte/package.json b/app/svelte/package.json index ab4c0ccbb05..1af30a2350b 100644 --- a/app/svelte/package.json +++ b/app/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -45,9 +45,9 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/core": "6.3.0-alpha.27", - "@storybook/core-common": "6.3.0-alpha.27", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/core": "6.3.0-alpha.33", + "@storybook/core-common": "6.3.0-alpha.33", "core-js": "^3.8.2", "global": "^4.4.0", "react": "16.14.0", @@ -73,5 +73,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a" + "gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7", + "sbmodern": "dist/modern/client/index.js" } diff --git a/app/vue/package.json b/app/vue/package.json index 0c9431e48fe..c14288796c9 100644 --- a/app/vue/package.json +++ b/app/vue/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -45,9 +45,9 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/core": "6.3.0-alpha.27", - "@storybook/core-common": "6.3.0-alpha.27", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/core": "6.3.0-alpha.33", + "@storybook/core-common": "6.3.0-alpha.33", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", "global": "^4.4.0", @@ -81,5 +81,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a" + "gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7", + "sbmodern": "dist/modern/client/index.js" } diff --git a/app/vue3/package.json b/app/vue3/package.json index ca33c9981bc..ba8cc95a739 100644 --- a/app/vue3/package.json +++ b/app/vue3/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -45,9 +45,9 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/core": "6.3.0-alpha.27", - "@storybook/core-common": "6.3.0-alpha.27", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/core": "6.3.0-alpha.33", + "@storybook/core-common": "6.3.0-alpha.33", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", "global": "^4.4.0", @@ -80,5 +80,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a" + "gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7", + "sbmodern": "dist/modern/client/index.js" } diff --git a/app/web-components/package.json b/app/web-components/package.json index 7539120a751..ed23f2a36e5 100644 --- a/app/web-components/package.json +++ b/app/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit-html", @@ -50,10 +50,10 @@ "@babel/plugin-syntax-dynamic-import": "^7.8.3", "@babel/plugin-syntax-import-meta": "^7.10.4", "@babel/preset-env": "^7.12.11", - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/client-api": "6.3.0-alpha.27", - "@storybook/core": "6.3.0-alpha.27", - "@storybook/core-common": "6.3.0-alpha.27", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/client-api": "6.3.0-alpha.33", + "@storybook/core": "6.3.0-alpha.33", + "@storybook/core-common": "6.3.0-alpha.33", "@types/webpack-env": "^1.16.0", "babel-plugin-bundled-import-meta": "^0.3.1", "core-js": "^3.8.2", @@ -78,5 +78,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a" + "gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7", + "sbmodern": "dist/modern/client/index.js" } diff --git a/cypress/generated/addon-controls.spec.ts b/cypress/generated/addon-controls.spec.ts new file mode 100644 index 00000000000..6f4665c6a8c --- /dev/null +++ b/cypress/generated/addon-controls.spec.ts @@ -0,0 +1,49 @@ +describe('addon-controls', () => { + it('should change component when changing controls', () => { + cy.visitStorybook(); + + cy.navigateToStory('example-button', 'Primary'); + + cy.viewAddonPanel('Controls'); + + // Text input: Label + cy.getStoryElement().find('button').should('contain.text', 'Button'); + cy.get('#label').clear().type('Hello world'); + cy.getStoryElement().find('button').should('contain.text', 'Hello world'); + + // Args in URL + cy.url().should('include', 'args=label:Hello+world'); + + // Boolean toggle: Primary/secondary + cy.getStoryElement().find('button').should('have.css', 'background-color', 'rgb(30, 167, 253)'); + cy.get('#primary').click(); + cy.getStoryElement().find('button').should('have.css', 'background-color', 'rgba(0, 0, 0, 0)'); + + // Color picker: Background color + cy.get('input[placeholder="Choose color"]').type('red'); + cy.getStoryElement().find('button').should('have.css', 'background-color', 'rgb(255, 0, 0)'); + + // TODO: enable this once the controls for size are aligned in all CLI templates. + // Radio buttons: Size + // cy.getStoryElement().find('button').should('have.css', 'font-size', '14px'); + // cy.get('label[for="size-large"]').click(); + // cy.getStoryElement().find('button').should('have.css', 'font-size', '16px'); + + // Reset controls: assert that the component is back to original state + cy.get('button[title="Reset controls"]').click(); + cy.getStoryElement().find('button').should('have.css', 'font-size', '14px'); + cy.getStoryElement().find('button').should('have.css', 'background-color', 'rgb(30, 167, 253)'); + cy.getStoryElement().find('button').should('contain.text', 'Button'); + }); + + it('should apply controls automatically when passed via url', () => { + cy.visit('/', { + qs: { + path: '/story/example-button--primary', + args: 'label:Hello world', + }, + }); + + cy.getStoryElement().find('button').should('contain.text', 'Hello world'); + }); +}); diff --git a/docs/addons/writing-addons.md b/docs/addons/writing-addons.md index 17647e8d1bb..45223d34e1e 100644 --- a/docs/addons/writing-addons.md +++ b/docs/addons/writing-addons.md @@ -6,7 +6,7 @@ One of Storybook's main features is its robust addon ecosystem. Use addons to en ## What we're building -For this example we're going to build a bare-bones addon which: +For this example, we're going to build a bare-bones addon which: - Adds a new panel in Storybook. - Retrieves a custom parameter from the stories. @@ -27,9 +27,9 @@ We recommend a common addon file and directory structure for consistency. ### Get started -Open a new terminal and create a new directory called `my-addon`. Inside it run `npm init` to initialize a new node project. For your project's name choose `my-addon` and for entry point `dist/preset.js`. +Open a new terminal and create a new directory called `my-addon`. Inside it, run `npm init` to initialize a new node project. For your project's name, choose `my-addon` and for entry point `dist/preset.js`. -Once you've gone through the prompts your `package.json` should look like: +Once you've gone through the prompts, your `package.json` should look like: ```json { @@ -57,7 +57,7 @@ npx sb init ```
-Initializing Storybook adds the building blocks for our addon. If you're building a standalone Storybook addon, set the React and Storybook packages as peer dependencies. This prevents the addon from breaking Storybook when there are different versions available. +💡 Initializing Storybook adds the building blocks for our addon. If you're building a standalone Storybook addon, set the React and Storybook packages as peer dependencies. It prevents the addon from breaking Storybook when there are different versions available.
Next, create a `.babelrc.js` file in the root directory with the following: @@ -87,7 +87,7 @@ Change your `package.json` and add the following script to build the addon: ```
-Running yarn build at this stage will output the code into the dist directory, transpiled into a ES5 module ready to be installed into any Storybook. +💡 Running yarn build at this stage will output the code into the dist directory, transpiled into a ES5 module ready to be installed into any Storybook.
Finally, create a new directory called `src` and inside a new file called `preset.js` with the following: @@ -108,7 +108,7 @@ Presets are the way addons hook into Storybook. Among other tasks they allow you - Add to the [preview iframe](./writing-presets.md#preview-entries) - Modify [babel](./writing-presets.md#babel) and [webpack settings](./writing-presets.md#webpack) -For this example, we'll just modify Storybook's UI. +For this example, we'll modify Storybook's UI. ### Add a panel @@ -125,7 +125,7 @@ Now let’s add a panel to Storybook. Inside the `src` directory, create a new f
-Make sure to include the key when you register the addon. This will prevent any issues when the addon renders. +💡 Make sure to include the key when you register the addon. It will prevent any issues when the addon renders.
Going over the code snippet in more detail. When Storybook starts up: @@ -149,7 +149,7 @@ Finally, let’s hook it all up. Change `.storybook/main.js` to the following:
-When you register a Storybook addon, it will look for either register.js or preset.js as the entry points. +💡 When you register a Storybook addon, it will look for either register.js or preset.js as the entry points.
Run `yarn storybook` and you should see something similar to: @@ -172,11 +172,11 @@ Next, let’s replace the `MyPanel` component from above to show the parameter. The new version is made smarter by [`useParameter`](./addons-api.md#useparameter), which is a [React hook](https://reactjs.org/docs/hooks-intro.html) that updates the parameter value and re-renders the panel every time the story changes. -The [addon API](./addons-api.md) provides hooks like this so all of that communication can happen behind the scenes. That means you can focus on your addon's functionality. +The [addon API](./addons-api.md) provides hooks like this, so all of that communication can happen behind the scenes. That means you can focus on your addon's functionality. ### Using the addon with a story -When Storybook was initialized it provided a small set of examples stories. Change your `Button.stories.js` to the following: +When Storybook was initialized, it provided a small set of example stories. Change your `Button.stories.js` to the following: @@ -203,7 +203,7 @@ After applying the changes to the story, the Storybook UI will show the followin ### Root level preset.js -Before publishing the addon, we'll need to make one final change. In the root directory of the addon create a new file called `preset.js` and add the following: +Before publishing the addon, we'll need to make one last change. In the root directory of the addon, create a new file called `preset.js` and add the following: @@ -219,7 +219,7 @@ This auto-registers the addon without any additional configuration from the user ### Packaging and publishing -Now that you've seen how to create a bare-bones addon, let's see how to share it with the community. Before we begin, make sure your addon meets the following requirements: +Now that you've seen how to create a bare-bones addon let's see how to share it with the community. Before we begin, make sure your addon meets the following requirements: - `package.json` file with metadata about the addon - Peer dependencies of `react` and `@storybook/addons` @@ -235,12 +235,10 @@ Learn how to [add to the addon catalog](./addon-catalog.md). ### More guides and tutorials -In the previous example, we introduced the structure of an addon, but barely scratched the surface of what addons can do. +In the previous example, we introduced the structure of an addon but barely scratched the surface of what addons can do. -To dive deeper we recommend Storybook's [creating an addon](https://storybook.js.org/tutorials/create-an-addon/) tutorial. It’s an excellent walkthrough that covers the same ground as the above introduction, but goes further and leads you through the full process of creating a realistic addon. - -[How to build a Storybook addon](https://www.chromatic.com/blog/how-to-build-a-storybook-addon/) shows you how to create a standalone addon in great detail. +To dive deeper, we recommend Storybook's [creating an addon](https://storybook.js.org/tutorials/create-an-addon/) tutorial. It’s an excellent walkthrough covering the same ground as the above introduction but goes further and leads you through the entire process of creating a realistic addon. ### Addon kit -To help you jumpstart the addon development, the Storybook maintainers created an [`addon-kit`](https://github.com/storybookjs/addon-kit), use it to bootstrap your next addon. +To help you jumpstart the addon development, the Storybook maintainers created an [`addon-kit`](https://github.com/storybookjs/addon-kit), use it to bootstrap your next addon. \ No newline at end of file diff --git a/docs/configure/features-and-behavior.md b/docs/configure/features-and-behavior.md index b6b0596f7c5..65e9c8677d0 100644 --- a/docs/configure/features-and-behavior.md +++ b/docs/configure/features-and-behavior.md @@ -28,6 +28,7 @@ The following table details how to use the API values: | **selectedPanel** | String |Id to select an addon panel |`my-panel` | | **initialActive** | String |Select the default active tab on Mobile |`sidebar` or `canvas` or `addons` | | **sidebar** | Object |Sidebar options, see below |`{ showRoots: false }` | +| **toolbar** | Object |Modify the tools in the toolbar using the addon id |`{ fullscreen: { hidden: false } } }` | The following options are configurable under the `sidebar` namespace: @@ -36,3 +37,9 @@ The following options are configurable under the `sidebar` namespace: | **showRoots** | Boolean |Display the top-level nodes as a "root" in the sidebar |`false` | | **collapsedRoots** | Array |Set of root node IDs to visually collapse by default |`['misc', 'other']` | | **renderLabel** | Function |Create a custom label for tree nodes; must return a ReactNode |`(item) => {item.name}`| + +The following options are configurable under the `toolbar` namespace: + +| Name | Type | Description | Example Value | +| ----------------------|:-------------:|:-------------------------------------------------------------:|:----------------------------------------------:| +| **id** | String |Toggle visibility for toolbar item |`{ hidden: false }` | diff --git a/docs/snippets/angular/button-story-with-args.ts.mdx b/docs/snippets/angular/button-story-with-args.ts.mdx index 835d9681307..617347af6a4 100644 --- a/docs/snippets/angular/button-story-with-args.ts.mdx +++ b/docs/snippets/angular/button-story-with-args.ts.mdx @@ -13,6 +13,6 @@ export const Primary = Template.bind({}); Primary.args = { primary: true, - label: 'Primary', + label: 'Button', }; ``` diff --git a/docs/snippets/common/badge-story.mdx.mdx b/docs/snippets/common/badge-story.mdx.mdx index 9aca20b0c52..4c0f5670492 100644 --- a/docs/snippets/common/badge-story.mdx.mdx +++ b/docs/snippets/common/badge-story.mdx.mdx @@ -40,7 +40,7 @@ with unique URLs, which is great for review and testing. {Template.bind({})} @@ -58,7 +58,7 @@ with unique URLs, which is great for review and testing. {Template.bind({})} with icon) )}}> {Template.bind({})} diff --git a/docs/snippets/common/storybook-config-layout.js.mdx b/docs/snippets/common/storybook-config-layout.js.mdx index 30d412a0314..6445b4f12fe 100644 --- a/docs/snippets/common/storybook-config-layout.js.mdx +++ b/docs/snippets/common/storybook-config-layout.js.mdx @@ -17,5 +17,12 @@ addons.setConfig({ showRoots: false, collapsedRoots: ['other'], }, + toolbar: { + title: { hidden: false, }, + zoom: { hidden: false, }, + eject: { hidden: false, }, + copy: { hidden: false, }, + fullscreen: { hidden: false, }, + }, }); -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-preview-body-font-size.html.mdx b/docs/snippets/common/storybook-preview-body-font-size.html.mdx index 8c6aad2bb96..b79a5465099 100644 --- a/docs/snippets/common/storybook-preview-body-font-size.html.mdx +++ b/docs/snippets/common/storybook-preview-body-font-size.html.mdx @@ -2,8 +2,8 @@ -``` \ No newline at end of file +``` diff --git a/docs/snippets/react/button-story-with-args.js.mdx b/docs/snippets/react/button-story-with-args.js.mdx index f32a9efc16c..becadf279e0 100644 --- a/docs/snippets/react/button-story-with-args.js.mdx +++ b/docs/snippets/react/button-story-with-args.js.mdx @@ -11,6 +11,6 @@ export const Primary = Template.bind({}); Primary.args = { primary: true, - label: 'Primary', + label: 'Button', }; ``` \ No newline at end of file diff --git a/docs/snippets/react/button-story-with-args.ts.mdx b/docs/snippets/react/button-story-with-args.ts.mdx index 4baeb0e6781..8568fcf274f 100644 --- a/docs/snippets/react/button-story-with-args.ts.mdx +++ b/docs/snippets/react/button-story-with-args.ts.mdx @@ -12,6 +12,6 @@ export const Primary = Template.bind({}); Primary.args = { primary: true, - label: 'Primary', + label: 'Button', }; ``` \ No newline at end of file diff --git a/docs/snippets/svelte/button-story-with-args.js.mdx b/docs/snippets/svelte/button-story-with-args.js.mdx index 28a8c0da54f..c19ce121a0c 100644 --- a/docs/snippets/svelte/button-story-with-args.js.mdx +++ b/docs/snippets/svelte/button-story-with-args.js.mdx @@ -9,6 +9,6 @@ export const Primary = Template.bind({}); Primary.args = { primary: true, - label: 'Primary', + label: 'Button', }; ``` \ No newline at end of file diff --git a/docs/snippets/vue/button-story-with-args.2.js.mdx b/docs/snippets/vue/button-story-with-args.2.js.mdx index a64f0ec5bc9..cd3769bd0e2 100644 --- a/docs/snippets/vue/button-story-with-args.2.js.mdx +++ b/docs/snippets/vue/button-story-with-args.2.js.mdx @@ -21,6 +21,6 @@ const Template = (args, { argTypes }) => ({ export const Primary = Template.bind({}); Primary.args = { primary: true, - label: 'Primary', + label: 'Button', }; ``` \ No newline at end of file diff --git a/docs/snippets/vue/button-story-with-args.3.js.mdx b/docs/snippets/vue/button-story-with-args.3.js.mdx index f3f0fd7b08d..dcee2f2c84d 100644 --- a/docs/snippets/vue/button-story-with-args.3.js.mdx +++ b/docs/snippets/vue/button-story-with-args.3.js.mdx @@ -22,6 +22,6 @@ const Template = (args) => ({ export const Primary = Template.bind({}); Primary.args = { primary: true, - label: 'Primary', + label: 'Button', }; ``` \ No newline at end of file diff --git a/docs/snippets/web-components/button-story-with-args.js.mdx b/docs/snippets/web-components/button-story-with-args.js.mdx index fd3dc3b13db..1de6455be3d 100644 --- a/docs/snippets/web-components/button-story-with-args.js.mdx +++ b/docs/snippets/web-components/button-story-with-args.js.mdx @@ -14,6 +14,6 @@ export const Primary = Template.bind({}); Primary.args = { primary: true, - label: 'Primary', + label: 'Button', }; ``` diff --git a/docs/versions/next.json b/docs/versions/next.json index 6e56301784c..72dad7d50c7 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"6.3.0-alpha.27","info":{"plain":"### Features\n\n- CLI: Add Angular 12 + docs inline rendering support ([#14928](https://github.com/storybookjs/storybook/pull/14928))"}} \ No newline at end of file +{"version":"6.3.0-alpha.33","info":{"plain":"### Bug Fixes\n\n- Controls: Fix controls without options and add warning ([#14976](https://github.com/storybookjs/storybook/pull/14976))\n- Core: Add remaining sbmodern exports ([#14977](https://github.com/storybookjs/storybook/pull/14977))"}} \ No newline at end of file diff --git a/docs/writing-docs/mdx-page.png b/docs/writing-docs/mdx-page.png index ee65b50c921..3ab2c5e8714 100644 Binary files a/docs/writing-docs/mdx-page.png and b/docs/writing-docs/mdx-page.png differ diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json index 5aeb815f31a..5605a56b18c 100644 --- a/examples/angular-cli/package.json +++ b/examples/angular-cli/package.json @@ -1,6 +1,6 @@ { "name": "angular-cli", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "private": true, "license": "MIT", "scripts": { @@ -37,18 +37,18 @@ "@angular/compiler-cli": "^11.2.0", "@angular/elements": "^11.2.0", "@compodoc/compodoc": "^1.1.11", - "@storybook/addon-a11y": "6.3.0-alpha.27", - "@storybook/addon-actions": "6.3.0-alpha.27", - "@storybook/addon-backgrounds": "6.3.0-alpha.27", - "@storybook/addon-controls": "6.3.0-alpha.27", - "@storybook/addon-docs": "6.3.0-alpha.27", - "@storybook/addon-jest": "6.3.0-alpha.27", - "@storybook/addon-links": "6.3.0-alpha.27", - "@storybook/addon-storyshots": "6.3.0-alpha.27", - "@storybook/addon-storysource": "6.3.0-alpha.27", - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/angular": "6.3.0-alpha.27", - "@storybook/source-loader": "6.3.0-alpha.27", + "@storybook/addon-a11y": "6.3.0-alpha.33", + "@storybook/addon-actions": "6.3.0-alpha.33", + "@storybook/addon-backgrounds": "6.3.0-alpha.33", + "@storybook/addon-controls": "6.3.0-alpha.33", + "@storybook/addon-docs": "6.3.0-alpha.33", + "@storybook/addon-jest": "6.3.0-alpha.33", + "@storybook/addon-links": "6.3.0-alpha.33", + "@storybook/addon-storyshots": "6.3.0-alpha.33", + "@storybook/addon-storysource": "6.3.0-alpha.33", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/angular": "6.3.0-alpha.33", + "@storybook/source-loader": "6.3.0-alpha.33", "@types/core-js": "^2.5.4", "@types/jest": "^26.0.16", "@types/node": "^14.14.20", diff --git a/examples/angular-cli/src/stories/core/parameters/__snapshots__/bootstrap-options.stories.storyshot b/examples/angular-cli/src/stories/core/parameters/__snapshots__/bootstrap-options.stories.storyshot new file mode 100644 index 00000000000..0930ead62cd --- /dev/null +++ b/examples/angular-cli/src/stories/core/parameters/__snapshots__/bootstrap-options.stories.storyshot @@ -0,0 +1,13 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Core / Parameters / With Bootstrap Options With Preserve Whitespaces 1`] = ` + + +
+

+ Some content +

+
+ + +`; diff --git a/examples/angular-cli/src/stories/core/parameters/bootstrap-options.stories.ts b/examples/angular-cli/src/stories/core/parameters/bootstrap-options.stories.ts new file mode 100644 index 00000000000..ba03de07131 --- /dev/null +++ b/examples/angular-cli/src/stories/core/parameters/bootstrap-options.stories.ts @@ -0,0 +1,24 @@ +import { Meta, Story } from '@storybook/angular/types-6-0'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'component-with-whitespace', + template: `
+

Some content

+
`, +}) +class ComponentWithWhitespace {} + +export default { + title: 'Core / Parameters / With Bootstrap Options', + parameters: { + bootstrapOptions: { + preserveWhitespaces: true, + }, + }, + component: ComponentWithWhitespace, +} as Meta; + +export const WithPreserveWhitespaces: Story = (_args) => ({}); + +WithPreserveWhitespaces.storyName = 'With Preserve Whitespaces'; diff --git a/examples/cra-kitchen-sink/package.json b/examples/cra-kitchen-sink/package.json index f0cf3b45de0..0e553bbb136 100644 --- a/examples/cra-kitchen-sink/package.json +++ b/examples/cra-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "cra-kitchen-sink", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "private": true, "scripts": { "build": "react-scripts build", @@ -11,7 +11,7 @@ "test": "react-scripts test --env=jsdom" }, "dependencies": { - "@storybook/client-logger": "6.3.0-alpha.27", + "@storybook/client-logger": "6.3.0-alpha.33", "global": "^4.4.0", "prop-types": "^15.7.2", "react": "16.14.0", @@ -21,18 +21,18 @@ }, "devDependencies": { "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3", - "@storybook/addon-a11y": "6.3.0-alpha.27", - "@storybook/addon-actions": "6.3.0-alpha.27", - "@storybook/addon-backgrounds": "6.3.0-alpha.27", - "@storybook/addon-docs": "6.3.0-alpha.27", - "@storybook/addon-jest": "6.3.0-alpha.27", - "@storybook/addon-links": "6.3.0-alpha.27", - "@storybook/addon-storyshots": "6.3.0-alpha.27", - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/builder-webpack4": "6.3.0-alpha.27", + "@storybook/addon-a11y": "6.3.0-alpha.33", + "@storybook/addon-actions": "6.3.0-alpha.33", + "@storybook/addon-backgrounds": "6.3.0-alpha.33", + "@storybook/addon-docs": "6.3.0-alpha.33", + "@storybook/addon-jest": "6.3.0-alpha.33", + "@storybook/addon-links": "6.3.0-alpha.33", + "@storybook/addon-storyshots": "6.3.0-alpha.33", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/builder-webpack4": "6.3.0-alpha.33", "@storybook/preset-create-react-app": "^3.1.6", - "@storybook/react": "6.3.0-alpha.27", - "@storybook/theming": "6.3.0-alpha.27", + "@storybook/react": "6.3.0-alpha.33", + "@storybook/theming": "6.3.0-alpha.33", "webpack": "4" }, "storybook": { diff --git a/examples/cra-react15/package.json b/examples/cra-react15/package.json index 419ab41c1de..74797ee0c57 100644 --- a/examples/cra-react15/package.json +++ b/examples/cra-react15/package.json @@ -1,6 +1,6 @@ { "name": "cra-react15", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "private": true, "scripts": { "build": "react-scripts build", @@ -18,13 +18,13 @@ "react-scripts": "3.4.4" }, "devDependencies": { - "@storybook/addon-actions": "6.3.0-alpha.27", - "@storybook/addon-links": "6.3.0-alpha.27", - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/builder-webpack4": "6.3.0-alpha.27", + "@storybook/addon-actions": "6.3.0-alpha.33", + "@storybook/addon-links": "6.3.0-alpha.33", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/builder-webpack4": "6.3.0-alpha.33", "@storybook/preset-create-react-app": "^3.1.6", - "@storybook/react": "6.3.0-alpha.27", - "@storybook/theming": "6.3.0-alpha.27", + "@storybook/react": "6.3.0-alpha.33", + "@storybook/theming": "6.3.0-alpha.33", "babel-core": "6", "babel-runtime": "6", "webpack": "4" diff --git a/examples/cra-ts-essentials/package.json b/examples/cra-ts-essentials/package.json index 9d583da11ee..1a5184b7d99 100644 --- a/examples/cra-ts-essentials/package.json +++ b/examples/cra-ts-essentials/package.json @@ -1,6 +1,6 @@ { "name": "cra-ts-essentials", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "private": true, "scripts": { "build": "react-scripts build", @@ -34,11 +34,11 @@ "typescript": "^3.9.7" }, "devDependencies": { - "@storybook/addon-essentials": "6.3.0-alpha.27", - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/builder-webpack4": "6.3.0-alpha.27", + "@storybook/addon-essentials": "6.3.0-alpha.33", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/builder-webpack4": "6.3.0-alpha.33", "@storybook/preset-create-react-app": "^3.1.6", - "@storybook/react": "6.3.0-alpha.27", + "@storybook/react": "6.3.0-alpha.33", "webpack": "4" }, "storybook": { diff --git a/examples/cra-ts-kitchen-sink/package.json b/examples/cra-ts-kitchen-sink/package.json index 586dd3dfb4f..b32f82bfb89 100644 --- a/examples/cra-ts-kitchen-sink/package.json +++ b/examples/cra-ts-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "cra-ts-kitchen-sink", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "private": true, "scripts": { "build": "react-scripts build", @@ -34,14 +34,14 @@ "typescript": "^3.9.7" }, "devDependencies": { - "@storybook/addon-a11y": "6.3.0-alpha.27", - "@storybook/addon-actions": "6.3.0-alpha.27", - "@storybook/addon-docs": "6.3.0-alpha.27", - "@storybook/addon-links": "6.3.0-alpha.27", - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/builder-webpack4": "6.3.0-alpha.27", + "@storybook/addon-a11y": "6.3.0-alpha.33", + "@storybook/addon-actions": "6.3.0-alpha.33", + "@storybook/addon-docs": "6.3.0-alpha.33", + "@storybook/addon-links": "6.3.0-alpha.33", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/builder-webpack4": "6.3.0-alpha.33", "@storybook/preset-create-react-app": "^3.1.6", - "@storybook/react": "6.3.0-alpha.27", + "@storybook/react": "6.3.0-alpha.33", "@types/enzyme": "^3.10.8", "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.9.1", diff --git a/examples/ember-cli/package.json b/examples/ember-cli/package.json index f9f5a32e4ee..8d4049b5d82 100644 --- a/examples/ember-cli/package.json +++ b/examples/ember-cli/package.json @@ -1,6 +1,6 @@ { "name": "ember-example", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "private": true, "scripts": { "build": "ember build --output-path ember-output", @@ -17,18 +17,18 @@ "devDependencies": { "@babel/core": "^7.12.10", "@ember/optional-features": "^2.0.0", - "@storybook/addon-a11y": "6.3.0-alpha.27", - "@storybook/addon-actions": "6.3.0-alpha.27", - "@storybook/addon-backgrounds": "6.3.0-alpha.27", - "@storybook/addon-controls": "6.3.0-alpha.27", - "@storybook/addon-docs": "6.3.0-alpha.27", - "@storybook/addon-links": "6.3.0-alpha.27", - "@storybook/addon-storysource": "6.3.0-alpha.27", - "@storybook/addon-viewport": "6.3.0-alpha.27", - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/ember": "6.3.0-alpha.27", + "@storybook/addon-a11y": "6.3.0-alpha.33", + "@storybook/addon-actions": "6.3.0-alpha.33", + "@storybook/addon-backgrounds": "6.3.0-alpha.33", + "@storybook/addon-controls": "6.3.0-alpha.33", + "@storybook/addon-docs": "6.3.0-alpha.33", + "@storybook/addon-links": "6.3.0-alpha.33", + "@storybook/addon-storysource": "6.3.0-alpha.33", + "@storybook/addon-viewport": "6.3.0-alpha.33", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/ember": "6.3.0-alpha.33", "@storybook/ember-cli-storybook": "^0.2.1", - "@storybook/source-loader": "6.3.0-alpha.27", + "@storybook/source-loader": "6.3.0-alpha.33", "babel-loader": "^8", "broccoli-asset-rev": "^3.0.0", "cross-env": "^7.0.3", diff --git a/examples/html-kitchen-sink/.storybook/main.js b/examples/html-kitchen-sink/.storybook/main.js index f544634137d..dbdf6dddd55 100644 --- a/examples/html-kitchen-sink/.storybook/main.js +++ b/examples/html-kitchen-sink/.storybook/main.js @@ -24,4 +24,15 @@ module.exports = { core: { builder: 'webpack4', }, + // Test code for built-in stories.json extraction + // + // refs: { + // 'react-ts': { + // title: 'React TS', + // // development + // url: 'http://localhost:9011', + // // production + // // url: 'http://localhost:8080', + // }, + // }, }; diff --git a/examples/html-kitchen-sink/package.json b/examples/html-kitchen-sink/package.json index 711dba1efc4..b7bd25d3096 100644 --- a/examples/html-kitchen-sink/package.json +++ b/examples/html-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "html-kitchen-sink", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "private": true, "description": "", "keywords": [], @@ -13,23 +13,23 @@ "storybook": "start-storybook -p 9006" }, "devDependencies": { - "@storybook/addon-a11y": "6.3.0-alpha.27", - "@storybook/addon-actions": "6.3.0-alpha.27", - "@storybook/addon-backgrounds": "6.3.0-alpha.27", - "@storybook/addon-controls": "6.3.0-alpha.27", - "@storybook/addon-docs": "6.3.0-alpha.27", - "@storybook/addon-jest": "6.3.0-alpha.27", - "@storybook/addon-links": "6.3.0-alpha.27", + "@storybook/addon-a11y": "6.3.0-alpha.33", + "@storybook/addon-actions": "6.3.0-alpha.33", + "@storybook/addon-backgrounds": "6.3.0-alpha.33", + "@storybook/addon-controls": "6.3.0-alpha.33", + "@storybook/addon-docs": "6.3.0-alpha.33", + "@storybook/addon-jest": "6.3.0-alpha.33", + "@storybook/addon-links": "6.3.0-alpha.33", "@storybook/addon-postcss": "^2.0.0", - "@storybook/addon-storyshots": "6.3.0-alpha.27", - "@storybook/addon-storysource": "6.3.0-alpha.27", - "@storybook/addon-viewport": "6.3.0-alpha.27", - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/client-api": "6.3.0-alpha.27", - "@storybook/core": "6.3.0-alpha.27", - "@storybook/core-events": "6.3.0-alpha.27", - "@storybook/html": "6.3.0-alpha.27", - "@storybook/source-loader": "6.3.0-alpha.27", + "@storybook/addon-storyshots": "6.3.0-alpha.33", + "@storybook/addon-storysource": "6.3.0-alpha.33", + "@storybook/addon-viewport": "6.3.0-alpha.33", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/client-api": "6.3.0-alpha.33", + "@storybook/core": "6.3.0-alpha.33", + "@storybook/core-events": "6.3.0-alpha.33", + "@storybook/html": "6.3.0-alpha.33", + "@storybook/source-loader": "6.3.0-alpha.33", "autoprefixer": "^10.0.1", "eventemitter3": "^4.0.7", "format-json": "^1.0.3", diff --git a/examples/lit-kitchen-sink/package.json b/examples/lit-kitchen-sink/package.json index 1cce2369758..841207483e2 100644 --- a/examples/lit-kitchen-sink/package.json +++ b/examples/lit-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "lit-kitchen-sink", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "private": true, "description": "", "keywords": [], diff --git a/examples/lit-kitchen-sink/src/components/SbButton.stories.ts b/examples/lit-kitchen-sink/src/components/SbButton.stories.ts index 15488590ff3..85cf8e85a61 100644 --- a/examples/lit-kitchen-sink/src/components/SbButton.stories.ts +++ b/examples/lit-kitchen-sink/src/components/SbButton.stories.ts @@ -1,5 +1,5 @@ import { html } from 'lit'; -import './SbButton'; +import { Story, Meta } from '@storybook/lit'; export default { title: 'Examples / Button', @@ -9,9 +9,9 @@ export default { handles: ['click', 'sb-button:click'], }, }, -}; +} as Meta; -const Template = ({ primary, backgroundColor, size, label, sbButtonClickHandler }: any) => +const Template: Story = ({ primary, backgroundColor, size, label, sbButtonClickHandler }) => html` html``; +const Template: Story = () => html``; export const Story1 = Template.bind({}); Story1.storyName = 'Simple `click` handler'; diff --git a/examples/lit-kitchen-sink/src/stories/addons/background/addon-background.stories.ts b/examples/lit-kitchen-sink/src/stories/addons/background/addon-background.stories.ts index 1f3a243dd6e..28617e83007 100644 --- a/examples/lit-kitchen-sink/src/stories/addons/background/addon-background.stories.ts +++ b/examples/lit-kitchen-sink/src/stories/addons/background/addon-background.stories.ts @@ -1,4 +1,5 @@ import { html } from 'lit'; +import { Story, Meta } from '@storybook/lit'; export default { title: 'Addons / Backgrounds', @@ -11,9 +12,9 @@ export default { ], }, }, -}; +} as Meta; -const Template = () => html``; +const Template: Story = () => html``; export const Default = Template.bind({}); diff --git a/examples/lit-kitchen-sink/src/stories/addons/controls/addon-controls.stories.ts b/examples/lit-kitchen-sink/src/stories/addons/controls/addon-controls.stories.ts index 007aadac273..6c6c7b837fa 100644 --- a/examples/lit-kitchen-sink/src/stories/addons/controls/addon-controls.stories.ts +++ b/examples/lit-kitchen-sink/src/stories/addons/controls/addon-controls.stories.ts @@ -1,4 +1,5 @@ import { html } from 'lit'; +import { Story, Meta } from '@storybook/lit'; import '../../../components/SbButton'; export default { @@ -12,9 +13,9 @@ export default { }, }, }, -}; +} as Meta; -const Template = ({ primary, backgroundColor, size, label, sbButtonClickHandler }: any) => +const Template: Story = ({ primary, backgroundColor, size, label, sbButtonClickHandler }) => html` html`
Click docs tab to see basic docs
`; +export const Basic: Story = () => html`
Click docs tab to see basic docs
`; -export const NoDocs = () => html`
Click docs tab to see no docs error
`; +export const NoDocs: Story = () => html`
Click docs tab to see no docs error
`; NoDocs.parameters = { docs: { page: null } }; -export const LargerThanPreview = () => +export const LargerThanPreview: Story = () => html`
HUGE
`; -export const MdxOverride = () => html`
Click docs tab to see MDX-overridden docs
`; +export const MdxOverride: Story = () => html`
Click docs tab to see MDX-overridden docs
`; MdxOverride.parameters = { docs: { page: mdxNotes }, }; -export const InlineOverride = () => html`
Click docs tab to see JSX-overridden docs
`; +export const InlineOverride: Story = () => + html`
Click docs tab to see JSX-overridden docs
`; InlineOverride.parameters = { docs: { page: () => html`
Hello docs
` }, }; -export const DocsDisable = () => html`
This story shouldn't show up in DocsPage
`; +export const DocsDisable: Story = () => html`
This story shouldn't show up in DocsPage
`; DocsDisable.parameters = { docs: { disable: true }, }; diff --git a/examples/lit-kitchen-sink/src/stories/addons/toolbars/addon-toolbars.stories.ts b/examples/lit-kitchen-sink/src/stories/addons/toolbars/addon-toolbars.stories.ts index 460ce7e4b8d..93383510d72 100644 --- a/examples/lit-kitchen-sink/src/stories/addons/toolbars/addon-toolbars.stories.ts +++ b/examples/lit-kitchen-sink/src/stories/addons/toolbars/addon-toolbars.stories.ts @@ -1,8 +1,9 @@ import { html } from 'lit'; +import { Story, Meta } from '@storybook/lit'; export default { title: 'Addons / Toolbars', -}; +} as Meta; const getCaptionForLocale = (locale: string) => { switch (locale) { @@ -20,6 +21,6 @@ const getCaptionForLocale = (locale: string) => { } }; -export const Locale = (args: unknown, { globals: { locale } }: { globals: { locale: string } }) => { +export const Locale: Story = (args, { globals: { locale } }) => { return html`
Your locale is '${locale}', so I say: ${getCaptionForLocale(locale)}
`; }; diff --git a/examples/lit-kitchen-sink/src/stories/addons/viewport/addon-viewport.stories.ts b/examples/lit-kitchen-sink/src/stories/addons/viewport/addon-viewport.stories.ts index 4903da41c36..3cc31e043db 100644 --- a/examples/lit-kitchen-sink/src/stories/addons/viewport/addon-viewport.stories.ts +++ b/examples/lit-kitchen-sink/src/stories/addons/viewport/addon-viewport.stories.ts @@ -1,4 +1,5 @@ import { html } from 'lit'; +import { Story, Meta } from '@storybook/lit'; import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; export default { @@ -8,9 +9,9 @@ export default { viewports: INITIAL_VIEWPORTS, }, }, -}; +} as Meta; -const Template = (args: { title: string }) => html`

${args.title}

`; +const Template: Story<{ title: string }> = (args) => html`

${args.title}

`; export const Default = Template.bind({}); Default.args = { diff --git a/examples/official-storybook/manager.js b/examples/official-storybook/manager.js index b46efbc338c..642d6e7bfb2 100644 --- a/examples/official-storybook/manager.js +++ b/examples/official-storybook/manager.js @@ -25,6 +25,13 @@ addons.setConfig({ graphiql: { hidden: true, }, + toolbar: { + title: { hidden: false }, + zoom: { hidden: false }, + eject: { hidden: false }, + copy: { hidden: false }, + fullscreen: { hidden: false }, + }, }, sidebar: { collapsedRoots: ['other'], diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json index 1c7f9d96410..478c7f635ab 100644 --- a/examples/official-storybook/package.json +++ b/examples/official-storybook/package.json @@ -1,6 +1,6 @@ { "name": "official-storybook", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "private": true, "scripts": { "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./", @@ -14,27 +14,27 @@ "devDependencies": { "@packtracker/webpack-plugin": "^2.3.0", "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3", - "@storybook/addon-a11y": "6.3.0-alpha.27", - "@storybook/addon-actions": "6.3.0-alpha.27", - "@storybook/addon-backgrounds": "6.3.0-alpha.27", - "@storybook/addon-controls": "6.3.0-alpha.27", - "@storybook/addon-docs": "6.3.0-alpha.27", - "@storybook/addon-jest": "6.3.0-alpha.27", - "@storybook/addon-links": "6.3.0-alpha.27", - "@storybook/addon-storyshots": "6.3.0-alpha.27", - "@storybook/addon-storyshots-puppeteer": "6.3.0-alpha.27", - "@storybook/addon-storysource": "6.3.0-alpha.27", - "@storybook/addon-toolbars": "6.3.0-alpha.27", - "@storybook/addon-viewport": "6.3.0-alpha.27", - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/cli": "6.3.0-alpha.27", - "@storybook/components": "6.3.0-alpha.27", - "@storybook/core-events": "6.3.0-alpha.27", + "@storybook/addon-a11y": "6.3.0-alpha.33", + "@storybook/addon-actions": "6.3.0-alpha.33", + "@storybook/addon-backgrounds": "6.3.0-alpha.33", + "@storybook/addon-controls": "6.3.0-alpha.33", + "@storybook/addon-docs": "6.3.0-alpha.33", + "@storybook/addon-jest": "6.3.0-alpha.33", + "@storybook/addon-links": "6.3.0-alpha.33", + "@storybook/addon-storyshots": "6.3.0-alpha.33", + "@storybook/addon-storyshots-puppeteer": "6.3.0-alpha.33", + "@storybook/addon-storysource": "6.3.0-alpha.33", + "@storybook/addon-toolbars": "6.3.0-alpha.33", + "@storybook/addon-viewport": "6.3.0-alpha.33", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/cli": "6.3.0-alpha.33", + "@storybook/components": "6.3.0-alpha.33", + "@storybook/core-events": "6.3.0-alpha.33", "@storybook/design-system": "^5.4.7", - "@storybook/node-logger": "6.3.0-alpha.27", - "@storybook/react": "6.3.0-alpha.27", - "@storybook/source-loader": "6.3.0-alpha.27", - "@storybook/theming": "6.3.0-alpha.27", + "@storybook/node-logger": "6.3.0-alpha.33", + "@storybook/react": "6.3.0-alpha.33", + "@storybook/source-loader": "6.3.0-alpha.33", + "@storybook/theming": "6.3.0-alpha.33", "chromatic": "^5.6.0", "cors": "^2.8.5", "cross-env": "^7.0.3", diff --git a/examples/official-storybook/stories/addon-controls.stories.tsx b/examples/official-storybook/stories/addon-controls.stories.tsx index 0d28d6936e0..b7bf329109b 100644 --- a/examples/official-storybook/stories/addon-controls.stories.tsx +++ b/examples/official-storybook/stories/addon-controls.stories.tsx @@ -161,3 +161,8 @@ FilteredWithExcludeRegex.parameters = { exclude: /hello*/, }, }; + +// https://github.com/storybookjs/storybook/issues/14752 +export const MissingRadioOptions = Template.bind({}); +MissingRadioOptions.argTypes = { invalidRadio: { control: 'radio' } }; +MissingRadioOptions.args = { invalidRadio: 'someValue' }; diff --git a/examples/preact-kitchen-sink/package.json b/examples/preact-kitchen-sink/package.json index b2de67ac5d8..40b968e1763 100644 --- a/examples/preact-kitchen-sink/package.json +++ b/examples/preact-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "preact-example", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "private": true, "scripts": { "build": "cross-env NODE_ENV=production webpack --progress --hide-modules", @@ -15,16 +15,16 @@ "devDependencies": { "@babel/core": "^7.12.10", "@babel/plugin-transform-runtime": "^7.12.10", - "@storybook/addon-a11y": "6.3.0-alpha.27", - "@storybook/addon-actions": "6.3.0-alpha.27", - "@storybook/addon-backgrounds": "6.3.0-alpha.27", - "@storybook/addon-links": "6.3.0-alpha.27", - "@storybook/addon-storyshots": "6.3.0-alpha.27", - "@storybook/addon-storysource": "6.3.0-alpha.27", - "@storybook/addon-viewport": "6.3.0-alpha.27", - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/preact": "6.3.0-alpha.27", - "@storybook/source-loader": "6.3.0-alpha.27", + "@storybook/addon-a11y": "6.3.0-alpha.33", + "@storybook/addon-actions": "6.3.0-alpha.33", + "@storybook/addon-backgrounds": "6.3.0-alpha.33", + "@storybook/addon-links": "6.3.0-alpha.33", + "@storybook/addon-storyshots": "6.3.0-alpha.33", + "@storybook/addon-storysource": "6.3.0-alpha.33", + "@storybook/addon-viewport": "6.3.0-alpha.33", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/preact": "6.3.0-alpha.33", + "@storybook/source-loader": "6.3.0-alpha.33", "@types/prop-types": "^15.7.3", "@types/react": "^17", "@types/react-dom": "^17", diff --git a/examples/react-ts-webpack4/package.json b/examples/react-ts-webpack4/package.json index b18a15c1625..23488a6bc22 100644 --- a/examples/react-ts-webpack4/package.json +++ b/examples/react-ts-webpack4/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/example-react-ts-webpack4", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "private": true, "scripts": { "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./", @@ -8,10 +8,10 @@ "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./" }, "dependencies": { - "@storybook/addon-controls": "6.3.0-alpha.27", - "@storybook/addon-essentials": "6.3.0-alpha.27", - "@storybook/builder-webpack4": "6.3.0-alpha.27", - "@storybook/react": "6.3.0-alpha.27", + "@storybook/addon-controls": "6.3.0-alpha.33", + "@storybook/addon-essentials": "6.3.0-alpha.33", + "@storybook/builder-webpack4": "6.3.0-alpha.33", + "@storybook/react": "6.3.0-alpha.33", "@types/react": "^16.14.2", "@types/react-dom": "^16.9.10", "prop-types": "15.7.2", diff --git a/examples/react-ts/package.json b/examples/react-ts/package.json index 6cdc39a6bf2..9598b48ad6a 100644 --- a/examples/react-ts/package.json +++ b/examples/react-ts/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/example-react-ts", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "private": true, "scripts": { "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./", @@ -8,9 +8,9 @@ "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./" }, "dependencies": { - "@storybook/addon-controls": "6.3.0-alpha.27", - "@storybook/addon-essentials": "6.3.0-alpha.27", - "@storybook/react": "6.3.0-alpha.27", + "@storybook/addon-controls": "6.3.0-alpha.33", + "@storybook/addon-essentials": "6.3.0-alpha.33", + "@storybook/react": "6.3.0-alpha.33", "@types/react": "^16.14.2", "@types/react-dom": "^16.9.10", "prop-types": "15.7.2", @@ -18,5 +18,8 @@ "react-dom": "16.14.0", "typescript": "^3.9.7", "webpack": "4" + }, + "devDependencies": { + "cross-env": "^7.0.3" } } diff --git a/examples/server-kitchen-sink/package.json b/examples/server-kitchen-sink/package.json index 29f6272bbab..c4d495a806f 100644 --- a/examples/server-kitchen-sink/package.json +++ b/examples/server-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "server-kitchen-sink", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "private": true, "description": "", "keywords": [], @@ -14,13 +14,13 @@ "storybook": "SERVER_PORT=1137 start-storybook -p 9006 --quiet" }, "devDependencies": { - "@storybook/addon-a11y": "6.3.0-alpha.27", - "@storybook/addon-actions": "6.3.0-alpha.27", - "@storybook/addon-backgrounds": "6.3.0-alpha.27", - "@storybook/addon-controls": "6.3.0-alpha.27", - "@storybook/addon-links": "6.3.0-alpha.27", - "@storybook/node-logger": "6.3.0-alpha.27", - "@storybook/server": "6.3.0-alpha.27", + "@storybook/addon-a11y": "6.3.0-alpha.33", + "@storybook/addon-actions": "6.3.0-alpha.33", + "@storybook/addon-backgrounds": "6.3.0-alpha.33", + "@storybook/addon-controls": "6.3.0-alpha.33", + "@storybook/addon-links": "6.3.0-alpha.33", + "@storybook/node-logger": "6.3.0-alpha.33", + "@storybook/server": "6.3.0-alpha.33", "concurrently": "^5.3.0", "cors": "^2.8.5", "express": "~4.17.1", diff --git a/examples/standalone-preview/package.json b/examples/standalone-preview/package.json index 84e76aaaf49..223d0aec42b 100644 --- a/examples/standalone-preview/package.json +++ b/examples/standalone-preview/package.json @@ -1,12 +1,12 @@ { "name": "standalone-preview", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "private": true, "scripts": { "storybook": "parcel ./storybook.html --port 1337" }, "devDependencies": { - "@storybook/react": "6.3.0-alpha.27", + "@storybook/react": "6.3.0-alpha.33", "parcel": "^1.12.4", "react": "16.14.0", "react-dom": "16.14.0" diff --git a/examples/svelte-kitchen-sink/package.json b/examples/svelte-kitchen-sink/package.json index b13f143d492..c9d82caae5f 100644 --- a/examples/svelte-kitchen-sink/package.json +++ b/examples/svelte-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "svelte-example", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "private": true, "scripts": { "build-storybook": "build-storybook -s public", @@ -10,18 +10,18 @@ "global": "^4.4.0" }, "devDependencies": { - "@storybook/addon-a11y": "6.3.0-alpha.27", - "@storybook/addon-actions": "6.3.0-alpha.27", - "@storybook/addon-backgrounds": "6.3.0-alpha.27", - "@storybook/addon-controls": "6.3.0-alpha.27", - "@storybook/addon-docs": "6.3.0-alpha.27", - "@storybook/addon-links": "6.3.0-alpha.27", - "@storybook/addon-storyshots": "6.3.0-alpha.27", - "@storybook/addon-storysource": "6.3.0-alpha.27", - "@storybook/addon-viewport": "6.3.0-alpha.27", - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/source-loader": "6.3.0-alpha.27", - "@storybook/svelte": "6.3.0-alpha.27", + "@storybook/addon-a11y": "6.3.0-alpha.33", + "@storybook/addon-actions": "6.3.0-alpha.33", + "@storybook/addon-backgrounds": "6.3.0-alpha.33", + "@storybook/addon-controls": "6.3.0-alpha.33", + "@storybook/addon-docs": "6.3.0-alpha.33", + "@storybook/addon-links": "6.3.0-alpha.33", + "@storybook/addon-storyshots": "6.3.0-alpha.33", + "@storybook/addon-storysource": "6.3.0-alpha.33", + "@storybook/addon-viewport": "6.3.0-alpha.33", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/source-loader": "6.3.0-alpha.33", + "@storybook/svelte": "6.3.0-alpha.33", "svelte-jester": "1.3.0", "svelte-preprocess": "4.6.8" }, diff --git a/examples/vue-3-cli/package.json b/examples/vue-3-cli/package.json index a9731ee87c6..e719bdf5790 100644 --- a/examples/vue-3-cli/package.json +++ b/examples/vue-3-cli/package.json @@ -1,6 +1,6 @@ { "name": "vue-3-cli-example", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "private": true, "scripts": { "build": "vue-cli-service build", @@ -14,11 +14,11 @@ }, "devDependencies": { "@babel/core": "^7.12.10", - "@storybook/addon-actions": "6.3.0-alpha.27", - "@storybook/addon-essentials": "6.3.0-alpha.27", - "@storybook/addon-links": "6.3.0-alpha.27", - "@storybook/addon-storyshots": "6.3.0-alpha.27", - "@storybook/vue3": "6.3.0-alpha.27", + "@storybook/addon-actions": "6.3.0-alpha.33", + "@storybook/addon-essentials": "6.3.0-alpha.33", + "@storybook/addon-links": "6.3.0-alpha.33", + "@storybook/addon-storyshots": "6.3.0-alpha.33", + "@storybook/vue3": "6.3.0-alpha.33", "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-typescript": "~4.5.0", "@vue/cli-service": "~4.5.0", diff --git a/examples/vue-cli/package.json b/examples/vue-cli/package.json index 81388dd5901..27bf72320f4 100644 --- a/examples/vue-cli/package.json +++ b/examples/vue-cli/package.json @@ -1,6 +1,6 @@ { "name": "vue-cli-example", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "private": true, "scripts": { "build": "vue-cli-service build", @@ -15,11 +15,11 @@ "vue-property-decorator": "^9.1.2" }, "devDependencies": { - "@storybook/addon-controls": "6.3.0-alpha.27", - "@storybook/addon-essentials": "6.3.0-alpha.27", + "@storybook/addon-controls": "6.3.0-alpha.33", + "@storybook/addon-essentials": "6.3.0-alpha.33", "@storybook/preset-scss": "^1.0.3", - "@storybook/source-loader": "6.3.0-alpha.27", - "@storybook/vue": "6.3.0-alpha.27", + "@storybook/source-loader": "6.3.0-alpha.33", + "@storybook/vue": "6.3.0-alpha.33", "@vue/cli-plugin-babel": "~4.3.1", "@vue/cli-plugin-typescript": "~4.3.1", "@vue/cli-service": "~4.3.1", diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json index 9984466dc32..732428ab75c 100644 --- a/examples/vue-kitchen-sink/package.json +++ b/examples/vue-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "vue-example", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "private": true, "scripts": { "build": "cross-env NODE_ENV=production webpack --progress --hide-modules", @@ -14,18 +14,18 @@ }, "devDependencies": { "@babel/core": "^7.12.10", - "@storybook/addon-a11y": "6.3.0-alpha.27", - "@storybook/addon-actions": "6.3.0-alpha.27", - "@storybook/addon-backgrounds": "6.3.0-alpha.27", - "@storybook/addon-controls": "6.3.0-alpha.27", - "@storybook/addon-docs": "6.3.0-alpha.27", - "@storybook/addon-links": "6.3.0-alpha.27", - "@storybook/addon-storyshots": "6.3.0-alpha.27", - "@storybook/addon-storysource": "6.3.0-alpha.27", - "@storybook/addon-viewport": "6.3.0-alpha.27", - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/source-loader": "6.3.0-alpha.27", - "@storybook/vue": "6.3.0-alpha.27", + "@storybook/addon-a11y": "6.3.0-alpha.33", + "@storybook/addon-actions": "6.3.0-alpha.33", + "@storybook/addon-backgrounds": "6.3.0-alpha.33", + "@storybook/addon-controls": "6.3.0-alpha.33", + "@storybook/addon-docs": "6.3.0-alpha.33", + "@storybook/addon-links": "6.3.0-alpha.33", + "@storybook/addon-storyshots": "6.3.0-alpha.33", + "@storybook/addon-storysource": "6.3.0-alpha.33", + "@storybook/addon-viewport": "6.3.0-alpha.33", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/source-loader": "6.3.0-alpha.33", + "@storybook/vue": "6.3.0-alpha.33", "@vue/babel-preset-jsx": "^1.2.4", "babel-loader": "^8.2.2", "cross-env": "^7.0.3", diff --git a/examples/web-components-kitchen-sink/package.json b/examples/web-components-kitchen-sink/package.json index 01976fdede1..b6b56970275 100644 --- a/examples/web-components-kitchen-sink/package.json +++ b/examples/web-components-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "web-components-kitchen-sink", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "private": true, "description": "", "keywords": [], @@ -12,22 +12,22 @@ "storybook": "start-storybook -p 9006" }, "devDependencies": { - "@storybook/addon-a11y": "6.3.0-alpha.27", - "@storybook/addon-actions": "6.3.0-alpha.27", - "@storybook/addon-backgrounds": "6.3.0-alpha.27", - "@storybook/addon-controls": "6.3.0-alpha.27", - "@storybook/addon-docs": "6.3.0-alpha.27", - "@storybook/addon-jest": "6.3.0-alpha.27", - "@storybook/addon-links": "6.3.0-alpha.27", - "@storybook/addon-storyshots": "6.3.0-alpha.27", - "@storybook/addon-storysource": "6.3.0-alpha.27", - "@storybook/addon-viewport": "6.3.0-alpha.27", - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/client-api": "6.3.0-alpha.27", - "@storybook/core": "6.3.0-alpha.27", - "@storybook/core-events": "6.3.0-alpha.27", - "@storybook/source-loader": "6.3.0-alpha.27", - "@storybook/web-components": "6.3.0-alpha.27", + "@storybook/addon-a11y": "6.3.0-alpha.33", + "@storybook/addon-actions": "6.3.0-alpha.33", + "@storybook/addon-backgrounds": "6.3.0-alpha.33", + "@storybook/addon-controls": "6.3.0-alpha.33", + "@storybook/addon-docs": "6.3.0-alpha.33", + "@storybook/addon-jest": "6.3.0-alpha.33", + "@storybook/addon-links": "6.3.0-alpha.33", + "@storybook/addon-storyshots": "6.3.0-alpha.33", + "@storybook/addon-storysource": "6.3.0-alpha.33", + "@storybook/addon-viewport": "6.3.0-alpha.33", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/client-api": "6.3.0-alpha.33", + "@storybook/core": "6.3.0-alpha.33", + "@storybook/core-events": "6.3.0-alpha.33", + "@storybook/source-loader": "6.3.0-alpha.33", + "@storybook/web-components": "6.3.0-alpha.33", "babel-loader": "^8.2.2", "eventemitter3": "^4.0.7", "format-json": "^1.0.3", diff --git a/lerna.json b/lerna.json index 6ae35ac6077..5afd0901521 100644 --- a/lerna.json +++ b/lerna.json @@ -2,5 +2,5 @@ "npmClient": "yarn", "useWorkspaces": true, "registry": "https://registry.npmjs.org", - "version": "6.3.0-alpha.27" + "version": "6.3.0-alpha.33" } diff --git a/lib/addons/package.json b/lib/addons/package.json index 053bbcae335..f27fbbcf08d 100644 --- a/lib/addons/package.json +++ b/lib/addons/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addons", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "description": "Storybook addons store", "keywords": [ "storybook" @@ -40,12 +40,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/api": "6.3.0-alpha.27", - "@storybook/channels": "6.3.0-alpha.27", - "@storybook/client-logger": "6.3.0-alpha.27", - "@storybook/core-events": "6.3.0-alpha.27", - "@storybook/router": "6.3.0-alpha.27", - "@storybook/theming": "6.3.0-alpha.27", + "@storybook/api": "6.3.0-alpha.33", + "@storybook/channels": "6.3.0-alpha.33", + "@storybook/client-logger": "6.3.0-alpha.33", + "@storybook/core-events": "6.3.0-alpha.33", + "@storybook/router": "6.3.0-alpha.33", + "@storybook/theming": "6.3.0-alpha.33", "core-js": "^3.8.2", "global": "^4.4.0", "regenerator-runtime": "^0.13.7" @@ -57,5 +57,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a" + "gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7", + "sbmodern": "dist/modern/public_api.js" } diff --git a/lib/addons/src/index.ts b/lib/addons/src/index.ts index c3729163fed..8c5b2b69879 100644 --- a/lib/addons/src/index.ts +++ b/lib/addons/src/index.ts @@ -37,9 +37,14 @@ export interface Collection { interface Elements { [key: string]: Collection; } - +interface ToolbarConfig { + hidden?: boolean; +} export interface Config { theme?: ThemeVars; + toolbar?: { + [id: string]: ToolbarConfig; + }; [key: string]: any; } diff --git a/lib/api/package.json b/lib/api/package.json index cf4661fdca3..c82bb46d004 100644 --- a/lib/api/package.json +++ b/lib/api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/api", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "description": "Core Storybook API & Context", "keywords": [ "storybook" @@ -39,13 +39,13 @@ }, "dependencies": { "@reach/router": "^1.3.4", - "@storybook/channels": "6.3.0-alpha.27", - "@storybook/client-logger": "6.3.0-alpha.27", - "@storybook/core-events": "6.3.0-alpha.27", + "@storybook/channels": "6.3.0-alpha.33", + "@storybook/client-logger": "6.3.0-alpha.33", + "@storybook/core-events": "6.3.0-alpha.33", "@storybook/csf": "0.0.1", - "@storybook/router": "6.3.0-alpha.27", + "@storybook/router": "6.3.0-alpha.33", "@storybook/semver": "^7.3.2", - "@storybook/theming": "6.3.0-alpha.27", + "@storybook/theming": "6.3.0-alpha.33", "@types/reach__router": "^1.3.7", "core-js": "^3.8.2", "fast-deep-equal": "^3.1.3", @@ -72,5 +72,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a" + "gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7", + "sbmodern": "dist/modern/index.js" } diff --git a/lib/api/src/modules/globals.ts b/lib/api/src/modules/globals.ts index 172aaafa093..e40f2cc7772 100644 --- a/lib/api/src/modules/globals.ts +++ b/lib/api/src/modules/globals.ts @@ -37,8 +37,6 @@ export const init: ModuleFn = ({ store, fullAPI }) => { const currentGlobals = store.getState()?.globals; if (!deepEqual(globals, currentGlobals)) { store.setState({ globals }); - } else { - logger.info('Tried to update globals but the old and new values are equal.'); } }; diff --git a/lib/api/src/version.ts b/lib/api/src/version.ts index 6ea48c971f6..352f3fb0281 100644 --- a/lib/api/src/version.ts +++ b/lib/api/src/version.ts @@ -1 +1 @@ -export const version = '6.3.0-alpha.27'; +export const version = '6.3.0-alpha.33'; diff --git a/lib/builder-webpack4/package.json b/lib/builder-webpack4/package.json index 96e6454448d..36c858cf213 100644 --- a/lib/builder-webpack4/package.json +++ b/lib/builder-webpack4/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack4", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -61,20 +61,20 @@ "@babel/preset-env": "^7.12.11", "@babel/preset-react": "^7.12.10", "@babel/preset-typescript": "^7.12.7", - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/api": "6.3.0-alpha.27", - "@storybook/channel-postmessage": "6.3.0-alpha.27", - "@storybook/channels": "6.3.0-alpha.27", - "@storybook/client-api": "6.3.0-alpha.27", - "@storybook/client-logger": "6.3.0-alpha.27", - "@storybook/components": "6.3.0-alpha.27", - "@storybook/core-common": "6.3.0-alpha.27", - "@storybook/core-events": "6.3.0-alpha.27", - "@storybook/node-logger": "6.3.0-alpha.27", - "@storybook/router": "6.3.0-alpha.27", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/api": "6.3.0-alpha.33", + "@storybook/channel-postmessage": "6.3.0-alpha.33", + "@storybook/channels": "6.3.0-alpha.33", + "@storybook/client-api": "6.3.0-alpha.33", + "@storybook/client-logger": "6.3.0-alpha.33", + "@storybook/components": "6.3.0-alpha.33", + "@storybook/core-common": "6.3.0-alpha.33", + "@storybook/core-events": "6.3.0-alpha.33", + "@storybook/node-logger": "6.3.0-alpha.33", + "@storybook/router": "6.3.0-alpha.33", "@storybook/semver": "^7.3.2", - "@storybook/theming": "6.3.0-alpha.27", - "@storybook/ui": "6.3.0-alpha.27", + "@storybook/theming": "6.3.0-alpha.33", + "@storybook/ui": "6.3.0-alpha.33", "@types/node": "^14.0.10", "@types/webpack": "^4.41.26", "autoprefixer": "^9.8.6", @@ -132,5 +132,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a" + "gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7", + "sbmodern": "dist/modern/index.js" } diff --git a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts index 929593fecb7..a5146e91955 100644 --- a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts +++ b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts @@ -63,6 +63,7 @@ export default async ({ frameworkPath, presets, typescriptOptions, + modern, }: Options & Record): Promise => { const logLevel = await presets.apply('logLevel', undefined); const frameworkOptions = await presets.apply(`${framework}Options`, {}); @@ -194,7 +195,7 @@ export default async ({ resolve: { extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json', '.cjs'], modules: ['node_modules'].concat(envs.NODE_PATH || []), - mainFields: ['browser', 'module', 'main'], + mainFields: [modern ? 'sbmodern' : null, 'browser', 'module', 'main'].filter(Boolean), alias: { ...themingPaths, ...storybookPaths, diff --git a/lib/builder-webpack4/src/preview/virtualModuleEntry.template.js b/lib/builder-webpack4/src/preview/virtualModuleEntry.template.js index 214d3fe8a16..fa6d2b0ccb9 100644 --- a/lib/builder-webpack4/src/preview/virtualModuleEntry.template.js +++ b/lib/builder-webpack4/src/preview/virtualModuleEntry.template.js @@ -1,5 +1,11 @@ /* eslint-disable import/no-unresolved */ -import { addDecorator, addParameters, addLoader, addArgTypesEnhancer } from '{{clientApi}}'; +import { + addDecorator, + addParameters, + addLoader, + addArgsEnhancer, + addArgTypesEnhancer, +} from '{{clientApi}}'; import { logger } from '{{clientLogger}}'; import * as config from '{{configFilename}}'; @@ -22,6 +28,9 @@ Object.keys(config).forEach((key) => { case 'argTypesEnhancers': { return value.forEach((enhancer) => addArgTypesEnhancer(enhancer)); } + case 'argsEnhancers': { + return value.forEach((enhancer) => addArgsEnhancer(enhancer)); + } case 'globals': case 'globalTypes': { const v = {}; diff --git a/lib/builder-webpack5/package.json b/lib/builder-webpack5/package.json index cf8f2c0df0c..1e261968136 100644 --- a/lib/builder-webpack5/package.json +++ b/lib/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -60,19 +60,19 @@ "@babel/preset-env": "^7.12.11", "@babel/preset-react": "^7.12.10", "@babel/preset-typescript": "^7.12.7", - "@storybook/addons": "6.3.0-alpha.27", - "@storybook/api": "6.3.0-alpha.27", - "@storybook/channel-postmessage": "6.3.0-alpha.27", - "@storybook/channels": "6.3.0-alpha.27", - "@storybook/client-api": "6.3.0-alpha.27", - "@storybook/client-logger": "6.3.0-alpha.27", - "@storybook/components": "6.3.0-alpha.27", - "@storybook/core-common": "6.3.0-alpha.27", - "@storybook/core-events": "6.3.0-alpha.27", - "@storybook/node-logger": "6.3.0-alpha.27", - "@storybook/router": "6.3.0-alpha.27", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/api": "6.3.0-alpha.33", + "@storybook/channel-postmessage": "6.3.0-alpha.33", + "@storybook/channels": "6.3.0-alpha.33", + "@storybook/client-api": "6.3.0-alpha.33", + "@storybook/client-logger": "6.3.0-alpha.33", + "@storybook/components": "6.3.0-alpha.33", + "@storybook/core-common": "6.3.0-alpha.33", + "@storybook/core-events": "6.3.0-alpha.33", + "@storybook/node-logger": "6.3.0-alpha.33", + "@storybook/router": "6.3.0-alpha.33", "@storybook/semver": "^7.3.2", - "@storybook/theming": "6.3.0-alpha.27", + "@storybook/theming": "6.3.0-alpha.33", "@types/node": "^14.0.10", "babel-loader": "^8.2.2", "babel-plugin-macros": "^3.0.1", @@ -118,5 +118,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a" + "gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7", + "sbmodern": "dist/modern/index.js" } diff --git a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts index b630a731535..15e22f7e272 100644 --- a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -58,6 +58,7 @@ export default async ({ frameworkPath, presets, typescriptOptions, + modern, }: Options & Record): Promise => { const envs = await presets.apply>('env'); const logLevel = await presets.apply('logLevel', undefined); @@ -190,7 +191,7 @@ export default async ({ resolve: { extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json', '.cjs'], modules: ['node_modules'].concat(envs.NODE_PATH || []), - mainFields: ['browser', 'module', 'main'], + mainFields: [modern ? 'sbmodern' : null, 'browser', 'module', 'main'].filter(Boolean), alias: { ...themingPaths, ...storybookPaths, diff --git a/lib/builder-webpack5/src/preview/virtualModuleEntry.template.js b/lib/builder-webpack5/src/preview/virtualModuleEntry.template.js index 214d3fe8a16..fa6d2b0ccb9 100644 --- a/lib/builder-webpack5/src/preview/virtualModuleEntry.template.js +++ b/lib/builder-webpack5/src/preview/virtualModuleEntry.template.js @@ -1,5 +1,11 @@ /* eslint-disable import/no-unresolved */ -import { addDecorator, addParameters, addLoader, addArgTypesEnhancer } from '{{clientApi}}'; +import { + addDecorator, + addParameters, + addLoader, + addArgsEnhancer, + addArgTypesEnhancer, +} from '{{clientApi}}'; import { logger } from '{{clientLogger}}'; import * as config from '{{configFilename}}'; @@ -22,6 +28,9 @@ Object.keys(config).forEach((key) => { case 'argTypesEnhancers': { return value.forEach((enhancer) => addArgTypesEnhancer(enhancer)); } + case 'argsEnhancers': { + return value.forEach((enhancer) => addArgsEnhancer(enhancer)); + } case 'globals': case 'globalTypes': { const v = {}; diff --git a/lib/channel-postmessage/package.json b/lib/channel-postmessage/package.json index b8a5ddc7638..671d2456519 100644 --- a/lib/channel-postmessage/package.json +++ b/lib/channel-postmessage/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channel-postmessage", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "description": "", "keywords": [ "storybook" @@ -40,9 +40,9 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/channels": "6.3.0-alpha.27", - "@storybook/client-logger": "6.3.0-alpha.27", - "@storybook/core-events": "6.3.0-alpha.27", + "@storybook/channels": "6.3.0-alpha.33", + "@storybook/client-logger": "6.3.0-alpha.33", + "@storybook/core-events": "6.3.0-alpha.33", "core-js": "^3.8.2", "global": "^4.4.0", "qs": "^6.10.0", @@ -51,5 +51,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a" + "gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7", + "sbmodern": "dist/modern/index.js" } diff --git a/lib/channel-websocket/package.json b/lib/channel-websocket/package.json index 70d4589521d..7a92f429929 100644 --- a/lib/channel-websocket/package.json +++ b/lib/channel-websocket/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channel-websocket", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "description": "", "keywords": [ "storybook" @@ -40,7 +40,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/channels": "6.3.0-alpha.27", + "@storybook/channels": "6.3.0-alpha.33", "core-js": "^3.8.2", "global": "^4.4.0", "telejson": "^5.2.0" @@ -48,5 +48,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a" + "gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7", + "sbmodern": "dist/modern/index.js" } diff --git a/lib/channels/package.json b/lib/channels/package.json index 831309c0e7f..2c960756316 100644 --- a/lib/channels/package.json +++ b/lib/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "description": "", "keywords": [ "storybook" @@ -47,5 +47,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a" + "gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7", + "sbmodern": "dist/modern/index.js" } diff --git a/lib/cli-sb/package.json b/lib/cli-sb/package.json index 25437a20342..a8642c5fffb 100644 --- a/lib/cli-sb/package.json +++ b/lib/cli-sb/package.json @@ -1,6 +1,6 @@ { "name": "sb", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "description": "Storybook CLI", "keywords": [ "storybook" @@ -24,10 +24,10 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/cli": "6.3.0-alpha.27" + "@storybook/cli": "6.3.0-alpha.33" }, "publishConfig": { "access": "public" }, - "gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a" + "gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7" } diff --git a/lib/cli-storybook/package.json b/lib/cli-storybook/package.json index fe3192a1c38..1c2f416fd4a 100644 --- a/lib/cli-storybook/package.json +++ b/lib/cli-storybook/package.json @@ -1,6 +1,6 @@ { "name": "storybook", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "description": "Storybook CLI", "keywords": [ "storybook" @@ -27,10 +27,10 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/cli": "6.3.0-alpha.27" + "@storybook/cli": "6.3.0-alpha.33" }, "publishConfig": { "access": "public" }, - "gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a" + "gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7" } diff --git a/lib/cli/package.json b/lib/cli/package.json index e760a2aa7af..324f727b959 100644 --- a/lib/cli/package.json +++ b/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "6.3.0-alpha.27", + "version": "6.3.0-alpha.33", "description": "Storybook's CLI - easiest method of adding storybook to your projects", "keywords": [ "cli", @@ -48,8 +48,8 @@ "dependencies": { "@babel/core": "^7.12.10", "@babel/preset-env": "^7.12.11", - "@storybook/codemod": "6.3.0-alpha.27", - "@storybook/node-logger": "6.3.0-alpha.27", + "@storybook/codemod": "6.3.0-alpha.33", + "@storybook/node-logger": "6.3.0-alpha.33", "@storybook/semver": "^7.3.2", "boxen": "^4.2.0", "chalk": "^4.1.0", @@ -74,7 +74,7 @@ "update-notifier": "^5.0.1" }, "devDependencies": { - "@storybook/client-api": "6.3.0-alpha.27", + "@storybook/client-api": "6.3.0-alpha.33", "@types/cross-spawn": "^6.0.2", "@types/prompts": "^2.0.9", "@types/puppeteer-core": "^2.1.0", @@ -90,5 +90,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a" + "gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7" } diff --git a/lib/cli/src/frameworks/web-components/js/Button.js b/lib/cli/src/frameworks/web-components/js/Button.js index 3cc631f9e91..8d3bc41a166 100644 --- a/lib/cli/src/frameworks/web-components/js/Button.js +++ b/lib/cli/src/frameworks/web-components/js/Button.js @@ -1,17 +1,18 @@ import { html } from 'lit-html'; +import { styleMap } from 'lit-html/directives/style-map'; import './button.css'; /** * Primary UI component for user interaction */ -export const Button = ({ primary, backgroundColor, size, label, onClick }) => { +export const Button = ({ primary, backgroundColor = null, size, label, onClick }) => { const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; return html`