diff --git a/CHANGELOG.md b/CHANGELOG.md index a8fb0e20ce4d..fedd0623cf8b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,100 @@ +## 6.2.0-rc.8 (March 23, 2021) + +**NOTE:** For Angular users using inline story rendering in addon-docs, this is a breaking prerelease change. See below and apologies for the back and forth. + +### Bug Fixes + +- Revert "Addon-docs/Angular: Fix inline rendering setup" ([#14310](https://github.com/storybookjs/storybook/pull/14310)) +- Core: Import `isPlainObject` directly from lodash ([#14307](https://github.com/storybookjs/storybook/pull/14307)) +- Addon-Links: Fix react.d.ts paths ([#14306](https://github.com/storybookjs/storybook/pull/14306)) + +## 6.2.0-rc.7 (March 23, 2021) + +### Bug Fixes + +- Core: Restore webpack4 watchOptions ([#14302](https://github.com/storybookjs/storybook/pull/14302)) +- Webpack: Hash files only in dev mode ([#14284](https://github.com/storybookjs/storybook/pull/14284)) +- UI: Element em should not make text content bold ([#14290](https://github.com/storybookjs/storybook/pull/14290)) + +### Dependency Upgrades + +- Webpack5: Remove deprecated webpack-filter-warnings-plugin ([#14303](https://github.com/storybookjs/storybook/pull/14303)) + +## 6.2.0-rc.6 (March 21, 2021) + +### Bug Fixes + +- Revert "Webpack: Hash files only in production mode" ([#14283](https://github.com/storybookjs/storybook/pull/14283)) + +## 6.2.0-rc.5 (March 20, 2021) + +### Bug Fixes + +- Webpack: Hash files only in production mode ([#14264](https://github.com/storybookjs/storybook/pull/14264)) +- Angular: Allow usage of all component valid selectors ([#14230](https://github.com/storybookjs/storybook/pull/14230)) + +### Maintenance + +- Addon-controls: Improve color picker UI and migrate to react-colorful ([#14249](https://github.com/storybookjs/storybook/pull/14249)) + +## 6.2.0-rc.4 (March 19, 2021) + +### Bug Fixes + +- Webpack: Fix missing `module` mainField ([#14271](https://github.com/storybookjs/storybook/pull/14271)) + +## 6.2.0-rc.3 (March 18, 2021) + +**NOTE:** For Angular users using inline story rendering in addon-docs, this is a breaking prerelease change. See below. + +### Bug Fixes + +- Addon-docs/Angular: Fix inline rendering setup ([#14270](https://github.com/storybookjs/storybook/pull/14270)) +- Addon-docs: Fix table dark mode ([#14251](https://github.com/storybookjs/storybook/pull/14251)) +- Webpack5: Replace fullhash with contenthash ([#14261](https://github.com/storybookjs/storybook/pull/14261)) + +### Maintenance + +- CLI: Don't allow root directory as static dir ([#14068](https://github.com/storybookjs/storybook/pull/14068)) +- WebComponents: Fix types and improve CLI detection ([#14258](https://github.com/storybookjs/storybook/pull/14258)) + +## 6.2.0-rc.2 (March 17, 2021) + +### Bug Fixes + +- Addon-docs/Vue,Vue3: Fix preset options for vue-docgen-api ([#14227](https://github.com/storybookjs/storybook/pull/14227)) +- Webpack5: Fix hash => fullhash ([#14255](https://github.com/storybookjs/storybook/pull/14255)) + +### Maintenance + +- Core: Check webpack version ([#14256](https://github.com/storybookjs/storybook/pull/14256)) + +## 6.2.0-rc.1 (March 16, 2021) + +### Features + +- CLI: Improve init for svelte ([#14161](https://github.com/storybookjs/storybook/pull/14161)) + +## 6.2.0-rc.0 (March 15, 2021) + +### Features + +- Svelte: Improve default webpack config ([#14235](https://github.com/storybookjs/storybook/pull/14235)) + +## 6.2.0-beta.15 (March 15, 2021) + +### Features + +- Controls: Add ArgsTable sorting ([#13125](https://github.com/storybookjs/storybook/pull/13125)) + +### Bug Fixes + +- Addon-docs: Fix source block error on dynamically-generated stories ([#14217](https://github.com/storybookjs/storybook/pull/14217)) + +### Dependency Upgrades + +- [Security] Bump react-dev-utils from 11.0.3 to 11.0.4 ([#14210](https://github.com/storybookjs/storybook/pull/14210)) + ## 6.2.0-beta.14 (March 11, 2021) ### Bug Fixes diff --git a/MIGRATION.md b/MIGRATION.md index d93a753c50d0..44f342dd0943 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -154,7 +154,7 @@ ### MDX pattern tweaked -In 6.2 files ending in `stories.mdx` or `story.mdx` are now processed with Storybook's MDX compiler. Previously it only applied to files ending in `.stories.mdx` or `.story.mdx`. See more here: [#13996](https://github.com/storybookjs/storybook/pull/13996) +In 6.2 files ending in `stories.mdx` or `story.mdx` are now processed with Storybook's MDX compiler. Previously it only applied to files ending in `.stories.mdx` or `.story.mdx`. See more here: [#13996](https://github.com/storybookjs/storybook/pull/13996). ### 6.2 Angular overhaul diff --git a/README.md b/README.md index 0c64ea9fc59f..d60e8e132125 100644 --- a/README.md +++ b/README.md @@ -86,7 +86,7 @@ Storybook comes with a lot of [addons](https://storybook.js.org/docs/react/confi ### Community -For additional help, join us [in our Discord](https://discord.gg/storybook) or [Slack (legacy)](https://now-examples-slackin-rrirkqohko.now.sh/). +For additional help, join us in the [Storybook Discord](https://discord.gg/storybook). ## Projects @@ -167,9 +167,8 @@ If you're looking for material to use in your presentation about storybook, like ## Community - Tweeting via [@storybookjs](https://twitter.com/storybookjs) -- Blogging at [Medium](https://medium.com/storybookjs) +- Blogging at [storybook.js.org](https://storybook.js.org/blog/) and [Medium](https://medium.com/storybookjs) - Chatting on [Discord](https://discord.gg/storybook) -- Chatting (legacy) on [Slack](https://now-examples-slackin-rrirkqohko.now.sh/) - Streaming saved at [Youtube](https://www.youtube.com/channel/UCr7Quur3eIyA_oe8FNYexfg) ## Contributing diff --git a/addons/a11y/package.json b/addons/a11y/package.json index bd47399c7666..a379d749e923 100644 --- a/addons/a11y/package.json +++ b/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", @@ -41,14 +41,14 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.2.0-beta.14", - "@storybook/api": "6.2.0-beta.14", - "@storybook/channels": "6.2.0-beta.14", - "@storybook/client-api": "6.2.0-beta.14", - "@storybook/client-logger": "6.2.0-beta.14", - "@storybook/components": "6.2.0-beta.14", - "@storybook/core-events": "6.2.0-beta.14", - "@storybook/theming": "6.2.0-beta.14", + "@storybook/addons": "6.2.0-rc.8", + "@storybook/api": "6.2.0-rc.8", + "@storybook/channels": "6.2.0-rc.8", + "@storybook/client-api": "6.2.0-rc.8", + "@storybook/client-logger": "6.2.0-rc.8", + "@storybook/components": "6.2.0-rc.8", + "@storybook/core-events": "6.2.0-rc.8", + "@storybook/theming": "6.2.0-rc.8", "axe-core": "^4.1.1", "core-js": "^3.8.2", "global": "^4.4.0", @@ -77,7 +77,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6", + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725", "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 a1ba0a1b085b..0f006190ff33 100644 --- a/addons/actions/package.json +++ b/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", @@ -37,12 +37,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.2.0-beta.14", - "@storybook/api": "6.2.0-beta.14", - "@storybook/client-api": "6.2.0-beta.14", - "@storybook/components": "6.2.0-beta.14", - "@storybook/core-events": "6.2.0-beta.14", - "@storybook/theming": "6.2.0-beta.14", + "@storybook/addons": "6.2.0-rc.8", + "@storybook/api": "6.2.0-rc.8", + "@storybook/client-api": "6.2.0-rc.8", + "@storybook/components": "6.2.0-rc.8", + "@storybook/core-events": "6.2.0-rc.8", + "@storybook/theming": "6.2.0-rc.8", "core-js": "^3.8.2", "fast-deep-equal": "^3.1.3", "global": "^4.4.0", @@ -74,7 +74,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6", + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725", "storybook": { "displayName": "Actions", "unsupportedFrameworks": [ diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json index 1e668974b89f..36647d3bb10a 100644 --- a/addons/backgrounds/package.json +++ b/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", @@ -41,12 +41,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.2.0-beta.14", - "@storybook/api": "6.2.0-beta.14", - "@storybook/client-logger": "6.2.0-beta.14", - "@storybook/components": "6.2.0-beta.14", - "@storybook/core-events": "6.2.0-beta.14", - "@storybook/theming": "6.2.0-beta.14", + "@storybook/addons": "6.2.0-rc.8", + "@storybook/api": "6.2.0-rc.8", + "@storybook/client-logger": "6.2.0-rc.8", + "@storybook/components": "6.2.0-rc.8", + "@storybook/core-events": "6.2.0-rc.8", + "@storybook/theming": "6.2.0-rc.8", "core-js": "^3.8.2", "global": "^4.4.0", "memoizerific": "^1.11.3", @@ -72,7 +72,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6", + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725", "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 c5cc2d0c6068..ac48f65ab559 100644 --- a/addons/controls/package.json +++ b/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", @@ -41,12 +41,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.2.0-beta.14", - "@storybook/api": "6.2.0-beta.14", - "@storybook/client-api": "6.2.0-beta.14", - "@storybook/components": "6.2.0-beta.14", - "@storybook/node-logger": "6.2.0-beta.14", - "@storybook/theming": "6.2.0-beta.14", + "@storybook/addons": "6.2.0-rc.8", + "@storybook/api": "6.2.0-rc.8", + "@storybook/client-api": "6.2.0-rc.8", + "@storybook/components": "6.2.0-rc.8", + "@storybook/node-logger": "6.2.0-rc.8", + "@storybook/theming": "6.2.0-rc.8", "core-js": "^3.8.2", "ts-dedent": "^2.0.0" }, @@ -65,7 +65,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6", + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725", "storybook": { "displayName": "Controls", "icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png", diff --git a/addons/controls/src/ControlsPanel.tsx b/addons/controls/src/ControlsPanel.tsx index c32e9f6b3091..4eed46c31e6e 100644 --- a/addons/controls/src/ControlsPanel.tsx +++ b/addons/controls/src/ControlsPanel.tsx @@ -1,10 +1,11 @@ import React, { FC } from 'react'; import { useArgs, useArgTypes, useParameter } from '@storybook/api'; -import { ArgsTable, NoControlsWarning } from '@storybook/components'; +import { ArgsTable, NoControlsWarning, SortType } from '@storybook/components'; import { PARAM_KEY } from './constants'; interface ControlsParameters { + sort?: SortType; expanded?: boolean; hideNoControlsWarning?: boolean; } @@ -13,7 +14,7 @@ export const ControlsPanel: FC = () => { const [args, updateArgs, resetArgs] = useArgs(); const rows = useArgTypes(); const isArgsStory = useParameter('__isArgsStory', false); - const { expanded, hideNoControlsWarning = false } = useParameter( + const { expanded, sort, hideNoControlsWarning = false } = useParameter( PARAM_KEY, {} ); @@ -32,6 +33,7 @@ export const ControlsPanel: FC = () => { updateArgs, resetArgs, inAddonPanel: true, + sort, }} /> diff --git a/addons/cssresources/package.json b/addons/cssresources/package.json index 6dcd07bb088e..4b6c48d43338 100644 --- a/addons/cssresources/package.json +++ b/addons/cssresources/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-cssresources", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "A storybook addon to switch between css resources at runtime for your story", "keywords": [ "addon", @@ -40,11 +40,11 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.2.0-beta.14", - "@storybook/api": "6.2.0-beta.14", - "@storybook/components": "6.2.0-beta.14", - "@storybook/core-events": "6.2.0-beta.14", - "@storybook/theming": "6.2.0-beta.14", + "@storybook/addons": "6.2.0-rc.8", + "@storybook/api": "6.2.0-rc.8", + "@storybook/components": "6.2.0-rc.8", + "@storybook/core-events": "6.2.0-rc.8", + "@storybook/theming": "6.2.0-rc.8", "core-js": "^3.8.2", "global": "^4.4.0", "regenerator-runtime": "^0.13.7" @@ -67,7 +67,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6", + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725", "storybook": { "displayName": "CSS Resources", "unsupportedFrameworks": [ diff --git a/addons/design-assets/package.json b/addons/design-assets/package.json index a594be86be12..8f3823965002 100644 --- a/addons/design-assets/package.json +++ b/addons/design-assets/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-design-assets", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "Design asset preview for storybook", "keywords": [ "addon", @@ -41,12 +41,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.2.0-beta.14", - "@storybook/api": "6.2.0-beta.14", - "@storybook/client-logger": "6.2.0-beta.14", - "@storybook/components": "6.2.0-beta.14", - "@storybook/core-events": "6.2.0-beta.14", - "@storybook/theming": "6.2.0-beta.14", + "@storybook/addons": "6.2.0-rc.8", + "@storybook/api": "6.2.0-rc.8", + "@storybook/client-logger": "6.2.0-rc.8", + "@storybook/components": "6.2.0-rc.8", + "@storybook/core-events": "6.2.0-rc.8", + "@storybook/theming": "6.2.0-rc.8", "core-js": "^3.8.2", "global": "^4.4.0", "regenerator-runtime": "^0.13.7", @@ -68,7 +68,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6", + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725", "storybook": { "displayName": "Design assets", "unsupportedFrameworks": [ diff --git a/addons/docs/package.json b/addons/docs/package.json index 117f720e89a6..705af9918239 100644 --- a/addons/docs/package.json +++ b/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", @@ -58,19 +58,19 @@ "@mdx-js/loader": "^1.6.22", "@mdx-js/mdx": "^1.6.22", "@mdx-js/react": "^1.6.22", - "@storybook/addons": "6.2.0-beta.14", - "@storybook/api": "6.2.0-beta.14", - "@storybook/builder-webpack4": "6.2.0-beta.14", - "@storybook/client-api": "6.2.0-beta.14", - "@storybook/client-logger": "6.2.0-beta.14", - "@storybook/components": "6.2.0-beta.14", - "@storybook/core": "6.2.0-beta.14", - "@storybook/core-events": "6.2.0-beta.14", + "@storybook/addons": "6.2.0-rc.8", + "@storybook/api": "6.2.0-rc.8", + "@storybook/builder-webpack4": "6.2.0-rc.8", + "@storybook/client-api": "6.2.0-rc.8", + "@storybook/client-logger": "6.2.0-rc.8", + "@storybook/components": "6.2.0-rc.8", + "@storybook/core": "6.2.0-rc.8", + "@storybook/core-events": "6.2.0-rc.8", "@storybook/csf": "0.0.1", - "@storybook/node-logger": "6.2.0-beta.14", - "@storybook/postinstall": "6.2.0-beta.14", - "@storybook/source-loader": "6.2.0-beta.14", - "@storybook/theming": "6.2.0-beta.14", + "@storybook/node-logger": "6.2.0-rc.8", + "@storybook/postinstall": "6.2.0-rc.8", + "@storybook/source-loader": "6.2.0-rc.8", + "@storybook/theming": "6.2.0-rc.8", "acorn": "^7.4.1", "acorn-jsx": "^5.3.1", "acorn-walk": "^7.2.0", @@ -97,10 +97,10 @@ "@babel/core": "^7.12.10", "@emotion/core": "^10.1.1", "@emotion/styled": "^10.0.27", - "@storybook/angular": "6.2.0-beta.14", - "@storybook/react": "6.2.0-beta.14", - "@storybook/vue": "6.2.0-beta.14", - "@storybook/web-components": "6.2.0-beta.14", + "@storybook/angular": "6.2.0-rc.8", + "@storybook/react": "6.2.0-rc.8", + "@storybook/vue": "6.2.0-rc.8", + "@storybook/web-components": "6.2.0-rc.8", "@types/cross-spawn": "^6.0.2", "@types/doctrine": "^0.0.3", "@types/enzyme": "^3.10.8", @@ -131,9 +131,9 @@ }, "peerDependencies": { "@babel/core": "^7.11.5", - "@storybook/angular": "6.2.0-beta.14", - "@storybook/vue": "6.2.0-beta.14", - "@storybook/vue3": "6.2.0-beta.14", + "@storybook/angular": "6.2.0-rc.8", + "@storybook/vue": "6.2.0-rc.8", + "@storybook/vue3": "6.2.0-rc.8", "babel-loader": "^8.0.0", "react": "^16.8.0 || ^17.0.0", "react-dom": "^16.8.0 || ^17.0.0", @@ -174,7 +174,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6", + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725", "storybook": { "displayName": "Docs", "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png", diff --git a/addons/docs/src/blocks/ArgsTable.tsx b/addons/docs/src/blocks/ArgsTable.tsx index 999cd20415be..a942488fa831 100644 --- a/addons/docs/src/blocks/ArgsTable.tsx +++ b/addons/docs/src/blocks/ArgsTable.tsx @@ -6,6 +6,7 @@ import { ArgsTableProps as PureArgsTableProps, ArgsTableError, ArgTypes, + SortType, TabbedArgsTable, } from '@storybook/components'; import { Args } from '@storybook/addons'; @@ -22,6 +23,7 @@ import { lookupStoryId } from './Story'; interface BaseProps { include?: PropDescriptor; exclude?: PropDescriptor; + sort?: SortType; } type OfProps = BaseProps & { @@ -111,11 +113,13 @@ const addComponentTabs = ( components: Record, context: DocsContextProps, include?: PropDescriptor, - exclude?: PropDescriptor + exclude?: PropDescriptor, + sort?: SortType ) => ({ ...tabs, ...mapValues(components, (comp) => ({ rows: extractComponentArgTypes(comp, context, include, exclude), + sort, })), }); @@ -199,14 +203,16 @@ export const ComponentsTable: FC = (props) => { export const ArgsTable: FC = (props) => { const context = useContext(DocsContext); - const { parameters: { subcomponents } = {} } = context; + const { parameters: { subcomponents, controls } = {} } = context; - const { include, exclude, components } = props as ComponentsProps; + const { include, exclude, components, sort: sortProp } = props as ComponentsProps; const { story } = props as StoryProps; + const sort = sortProp || controls?.sort; + const main = getComponent(props, context); if (story) { - return ; + return ; } if (!components && !subcomponents) { @@ -220,7 +226,7 @@ export const ArgsTable: FC = (props) => { } if (components) { - return ; + return ; } const mainLabel = getComponentName(main); @@ -228,6 +234,7 @@ export const ArgsTable: FC = (props) => { ); }; diff --git a/addons/docs/src/frameworks/vue/preset.ts b/addons/docs/src/frameworks/vue/preset.ts index 9613eaa38b62..5650c588cc67 100644 --- a/addons/docs/src/frameworks/vue/preset.ts +++ b/addons/docs/src/frameworks/vue/preset.ts @@ -1,4 +1,18 @@ -export function webpackFinal(webpackConfig: any = {}, options: any = {}) { +import type { Options } from '@storybook/core-common'; + +export function webpackFinal(webpackConfig: any = {}, options: Options) { + let vueDocgenOptions = {}; + + options.presetsList?.forEach((preset) => { + if (preset.name.includes('addon-docs') && preset.options.vueDocgenOptions) { + const appendableOptions = preset.options.vueDocgenOptions; + vueDocgenOptions = { + ...vueDocgenOptions, + ...appendableOptions, + }; + } + }); + webpackConfig.module.rules.push({ test: /\.vue$/, loader: require.resolve('vue-docgen-loader', { paths: [require.resolve('@storybook/vue')] }), @@ -6,7 +20,7 @@ export function webpackFinal(webpackConfig: any = {}, options: any = {}) { options: { docgenOptions: { alias: webpackConfig.resolve.alias, - ...options.vueDocgenOptions, + ...vueDocgenOptions, }, }, }); diff --git a/addons/docs/src/frameworks/vue3/preset.ts b/addons/docs/src/frameworks/vue3/preset.ts index dd03fb874d00..c8e044caf8e2 100644 --- a/addons/docs/src/frameworks/vue3/preset.ts +++ b/addons/docs/src/frameworks/vue3/preset.ts @@ -1,4 +1,18 @@ -export function webpackFinal(webpackConfig: any = {}, options: any = {}) { +import type { Options } from '@storybook/core-common'; + +export function webpackFinal(webpackConfig: any = {}, options: Options) { + let vueDocgenOptions = {}; + + options.presetsList?.forEach((preset) => { + if (preset.name.includes('addon-docs') && preset.options.vueDocgenOptions) { + const appendableOptions = preset.options.vueDocgenOptions; + vueDocgenOptions = { + ...vueDocgenOptions, + ...appendableOptions, + }; + } + }); + webpackConfig.module.rules.push({ test: /\.vue$/, loader: require.resolve('vue-docgen-loader', { paths: [require.resolve('@storybook/vue3')] }), @@ -6,7 +20,7 @@ export function webpackFinal(webpackConfig: any = {}, options: any = {}) { options: { docgenOptions: { alias: webpackConfig.resolve.alias, - ...options.vueDocgenOptions, + ...vueDocgenOptions, }, }, }); diff --git a/addons/essentials/package.json b/addons/essentials/package.json index da0d69bc0e71..6d503091dc9f 100644 --- a/addons/essentials/package.json +++ b/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", @@ -35,28 +35,28 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addon-actions": "6.2.0-beta.14", - "@storybook/addon-backgrounds": "6.2.0-beta.14", - "@storybook/addon-controls": "6.2.0-beta.14", - "@storybook/addon-docs": "6.2.0-beta.14", - "@storybook/addon-toolbars": "6.2.0-beta.14", - "@storybook/addon-viewport": "6.2.0-beta.14", - "@storybook/addons": "6.2.0-beta.14", - "@storybook/api": "6.2.0-beta.14", - "@storybook/node-logger": "6.2.0-beta.14", + "@storybook/addon-actions": "6.2.0-rc.8", + "@storybook/addon-backgrounds": "6.2.0-rc.8", + "@storybook/addon-controls": "6.2.0-rc.8", + "@storybook/addon-docs": "6.2.0-rc.8", + "@storybook/addon-toolbars": "6.2.0-rc.8", + "@storybook/addon-viewport": "6.2.0-rc.8", + "@storybook/addons": "6.2.0-rc.8", + "@storybook/api": "6.2.0-rc.8", + "@storybook/node-logger": "6.2.0-rc.8", "core-js": "^3.8.2", "regenerator-runtime": "^0.13.7", "ts-dedent": "^2.0.0" }, "devDependencies": { "@babel/core": "^7.12.10", - "@storybook/vue": "6.2.0-beta.14", + "@storybook/vue": "6.2.0-rc.8", "@types/jest": "^26.0.16", "@types/webpack-env": "^1.16.0" }, "peerDependencies": { "@babel/core": "^7.9.6", - "@storybook/vue": "6.2.0-beta.14", + "@storybook/vue": "6.2.0-rc.8", "babel-loader": "^8.0.0", "react": "^16.8.0 || ^17.0.0", "react-dom": "^16.8.0 || ^17.0.0", @@ -79,5 +79,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/addons/events/package.json b/addons/events/package.json index 061b487b49bb..b1ddcc289589 100644 --- a/addons/events/package.json +++ b/addons/events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-events", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "Add events to your Storybook stories.", "keywords": [ "addon", @@ -39,11 +39,11 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.2.0-beta.14", - "@storybook/api": "6.2.0-beta.14", - "@storybook/client-api": "6.2.0-beta.14", - "@storybook/core-events": "6.2.0-beta.14", - "@storybook/theming": "6.2.0-beta.14", + "@storybook/addons": "6.2.0-rc.8", + "@storybook/api": "6.2.0-rc.8", + "@storybook/client-api": "6.2.0-rc.8", + "@storybook/core-events": "6.2.0-rc.8", + "@storybook/theming": "6.2.0-rc.8", "core-js": "^3.8.2", "format-json": "^1.0.3", "lodash": "^4.17.20", @@ -70,7 +70,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6", + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725", "storybook": { "displayName": "Events", "unsupportedFrameworks": [ diff --git a/addons/google-analytics/package.json b/addons/google-analytics/package.json index 835177760715..fc867c4b218d 100644 --- a/addons/google-analytics/package.json +++ b/addons/google-analytics/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-google-analytics", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "Storybook addon for google analytics", "keywords": [ "addon", @@ -31,8 +31,8 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.2.0-beta.14", - "@storybook/core-events": "6.2.0-beta.14", + "@storybook/addons": "6.2.0-rc.8", + "@storybook/core-events": "6.2.0-rc.8", "core-js": "^3.8.2", "global": "^4.4.0", "react-ga": "^2.7.0", @@ -53,7 +53,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6", + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725", "storybook": { "displayName": "Google Analytics", "icon": "https://pbs.twimg.com/profile_images/1021848775885651968/cU74ahCn_400x400.jpg", diff --git a/addons/graphql/package.json b/addons/graphql/package.json index 4455a831f022..fc7f0a0b588b 100644 --- a/addons/graphql/package.json +++ b/addons/graphql/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-graphql", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "Storybook addon to display the GraphiQL IDE", "keywords": [ "addon", @@ -39,8 +39,8 @@ "dependencies": { "@babel/core": "^7.12.10", "@babel/plugin-transform-classes": "^7.12.1", - "@storybook/addons": "6.2.0-beta.14", - "@storybook/api": "6.2.0-beta.14", + "@storybook/addons": "6.2.0-rc.8", + "@storybook/api": "6.2.0-rc.8", "babel-loader": "^8.2.2", "core-js": "^3.8.2", "global": "^4.4.0", @@ -65,7 +65,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6", + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725", "storybook": { "displayName": "GraphiQL IDE", "icon": "https://pbs.twimg.com/profile_images/618131103509909504/VQLBJ0TR_400x400.png", diff --git a/addons/jest/package.json b/addons/jest/package.json index 3317ee5d754c..149f3963a109 100644 --- a/addons/jest/package.json +++ b/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "React storybook addon that show component jest report", "keywords": [ "addon", @@ -43,11 +43,11 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.2.0-beta.14", - "@storybook/api": "6.2.0-beta.14", - "@storybook/components": "6.2.0-beta.14", - "@storybook/core-events": "6.2.0-beta.14", - "@storybook/theming": "6.2.0-beta.14", + "@storybook/addons": "6.2.0-rc.8", + "@storybook/api": "6.2.0-rc.8", + "@storybook/components": "6.2.0-rc.8", + "@storybook/core-events": "6.2.0-rc.8", + "@storybook/theming": "6.2.0-rc.8", "core-js": "^3.8.2", "global": "^4.4.0", "react-sizeme": "^3.0.1", @@ -72,7 +72,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6", + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725", "storybook": { "displayName": "Jest", "icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg", diff --git a/addons/knobs/package.json b/addons/knobs/package.json index 282c4a90d2c3..57a03795c0c2 100644 --- a/addons/knobs/package.json +++ b/addons/knobs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-knobs", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "Storybook addon prop editor component", "keywords": [ "addon", @@ -37,13 +37,13 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.2.0-beta.14", - "@storybook/api": "6.2.0-beta.14", - "@storybook/channels": "6.2.0-beta.14", - "@storybook/client-api": "6.2.0-beta.14", - "@storybook/components": "6.2.0-beta.14", - "@storybook/core-events": "6.2.0-beta.14", - "@storybook/theming": "6.2.0-beta.14", + "@storybook/addons": "6.2.0-rc.8", + "@storybook/api": "6.2.0-rc.8", + "@storybook/channels": "6.2.0-rc.8", + "@storybook/client-api": "6.2.0-rc.8", + "@storybook/components": "6.2.0-rc.8", + "@storybook/core-events": "6.2.0-rc.8", + "@storybook/theming": "6.2.0-rc.8", "copy-to-clipboard": "^3.3.1", "core-js": "^3.8.2", "escape-html": "^1.0.3", @@ -52,7 +52,7 @@ "lodash": "^4.17.20", "prop-types": "^15.7.2", "qs": "^6.9.5", - "react-color": "^2.19.3", + "react-colorful": "^5.0.1", "react-lifecycles-compat": "^3.0.4", "react-select": "^3.2.0", "regenerator-runtime": "^0.13.7" @@ -60,7 +60,6 @@ "devDependencies": { "@types/enzyme": "^3.10.8", "@types/escape-html": "1.0.0", - "@types/react-color": "^3.0.4", "@types/react-lifecycles-compat": "^3.0.1", "@types/react-select": "^3.1.2", "@types/webpack-env": "^1.16.0", @@ -81,7 +80,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6", + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725", "storybook": { "displayName": "Knobs", "unsupportedFrameworks": [ diff --git a/addons/knobs/src/components/types/Color.tsx b/addons/knobs/src/components/types/Color.tsx index bd8bd7514392..a7869c95bba5 100644 --- a/addons/knobs/src/components/types/Color.tsx +++ b/addons/knobs/src/components/types/Color.tsx @@ -1,7 +1,7 @@ import { document } from 'global'; import PropTypes from 'prop-types'; import React, { Component, Validator } from 'react'; -import { SketchPicker, ColorResult } from 'react-color'; +import { RgbaStringColorPicker } from 'react-colorful'; import { styled } from '@storybook/theming'; import { Form } from '@storybook/components'; @@ -103,10 +103,10 @@ export default class ColorType extends Component }); }; - private handleChange = (color: ColorResult) => { + private handleChange = (color: string) => { const { onChange } = this.props; - onChange(`rgba(${color.rgb.r},${color.rgb.g},${color.rgb.b},${color.rgb.a})`); + onChange(color); }; popover!: HTMLDivElement; @@ -133,7 +133,7 @@ export default class ColorType extends Component if (e) this.popover = e; }} > - + ) : null} diff --git a/addons/links/package.json b/addons/links/package.json index c5333659bbe7..7bc394354622 100644 --- a/addons/links/package.json +++ b/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "addon", @@ -37,11 +37,11 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.2.0-beta.14", - "@storybook/client-logger": "6.2.0-beta.14", - "@storybook/core-events": "6.2.0-beta.14", + "@storybook/addons": "6.2.0-rc.8", + "@storybook/client-logger": "6.2.0-rc.8", + "@storybook/core-events": "6.2.0-rc.8", "@storybook/csf": "0.0.1", - "@storybook/router": "6.2.0-beta.14", + "@storybook/router": "6.2.0-rc.8", "@types/qs": "^6.9.5", "core-js": "^3.8.2", "global": "^4.4.0", @@ -68,7 +68,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6", + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725", "storybook": { "displayName": "Links", "icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png", diff --git a/addons/links/react.d.ts b/addons/links/react.d.ts index c53447fd0d37..1e0e42d007c9 100644 --- a/addons/links/react.d.ts +++ b/addons/links/react.d.ts @@ -1,2 +1,2 @@ -export * from './dist/react'; -export { default as LinkTo } from './dist/react'; +export * from './dist/ts3.9/react'; +export { default as LinkTo } from './dist/ts3.9/react'; diff --git a/addons/queryparams/package.json b/addons/queryparams/package.json index 40db4cf9b788..efc8a49ddca3 100644 --- a/addons/queryparams/package.json +++ b/addons/queryparams/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-queryparams", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "parameter addon for storybook", "keywords": [ "addon", @@ -38,12 +38,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.2.0-beta.14", - "@storybook/api": "6.2.0-beta.14", - "@storybook/client-logger": "6.2.0-beta.14", - "@storybook/components": "6.2.0-beta.14", - "@storybook/core-events": "6.2.0-beta.14", - "@storybook/theming": "6.2.0-beta.14", + "@storybook/addons": "6.2.0-rc.8", + "@storybook/api": "6.2.0-rc.8", + "@storybook/client-logger": "6.2.0-rc.8", + "@storybook/components": "6.2.0-rc.8", + "@storybook/core-events": "6.2.0-rc.8", + "@storybook/theming": "6.2.0-rc.8", "core-js": "^3.8.2", "global": "^4.4.0", "qs": "^6.9.5", @@ -68,7 +68,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6", + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725", "storybook": { "displayName": "Query params", "unsupportedFrameworks": [ diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json index 06dcda633667..2a8e2e9e9e9c 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.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "Take a code snapshot of every story automatically with Jest", "keywords": [ "addon", @@ -41,10 +41,10 @@ }, "dependencies": { "@jest/transform": "^26.6.2", - "@storybook/addons": "6.2.0-beta.14", - "@storybook/client-api": "6.2.0-beta.14", - "@storybook/core": "6.2.0-beta.14", - "@storybook/core-common": "6.2.0-beta.14", + "@storybook/addons": "6.2.0-rc.8", + "@storybook/client-api": "6.2.0-rc.8", + "@storybook/core": "6.2.0-rc.8", + "@storybook/core-common": "6.2.0-rc.8", "@types/glob": "^7.1.3", "@types/jest": "^26.0.16", "@types/jest-specific-snapshot": "^0.5.3", @@ -62,11 +62,11 @@ "devDependencies": { "@angular/core": "^11.2.0", "@angular/platform-browser-dynamic": "^11.2.0", - "@storybook/addon-docs": "6.2.0-beta.14", - "@storybook/angular": "6.2.0-beta.14", - "@storybook/react": "6.2.0-beta.14", - "@storybook/vue": "6.2.0-beta.14", - "@storybook/vue3": "6.2.0-beta.14", + "@storybook/addon-docs": "6.2.0-rc.8", + "@storybook/angular": "6.2.0-rc.8", + "@storybook/react": "6.2.0-rc.8", + "@storybook/vue": "6.2.0-rc.8", + "@storybook/vue3": "6.2.0-rc.8", "babel-loader": "^8.2.2", "enzyme": "^3.11.0", "enzyme-to-json": "^3.6.1", @@ -130,7 +130,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6", + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725", "storybook": { "displayName": "Storyshots", "icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png", diff --git a/addons/storyshots/storyshots-puppeteer/package.json b/addons/storyshots/storyshots-puppeteer/package.json index 23eef15afdcd..959248094f29 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.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "Image snapshots addition to StoryShots based on puppeteer", "keywords": [ "addon", @@ -37,7 +37,7 @@ }, "dependencies": { "@storybook/csf": "0.0.1", - "@storybook/node-logger": "6.2.0-beta.14", + "@storybook/node-logger": "6.2.0-rc.8", "@types/jest-image-snapshot": "^4.1.3", "@wordpress/jest-puppeteer-axe": "^1.10.0", "core-js": "^3.8.2", @@ -49,7 +49,7 @@ "@types/puppeteer": "^5.4.0" }, "peerDependencies": { - "@storybook/addon-storyshots": "6.2.0-beta.14", + "@storybook/addon-storyshots": "6.2.0-rc.8", "puppeteer": "^2.0.0 || ^3.0.0" }, "peerDependenciesMeta": { @@ -60,5 +60,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/addons/storysource/package.json b/addons/storysource/package.json index 0726b2d24462..1e87382ec55e 100644 --- a/addons/storysource/package.json +++ b/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "View a story’s source code to see how it works and paste into your app", "keywords": [ "addon", @@ -37,13 +37,13 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.2.0-beta.14", - "@storybook/api": "6.2.0-beta.14", - "@storybook/client-logger": "6.2.0-beta.14", - "@storybook/components": "6.2.0-beta.14", - "@storybook/router": "6.2.0-beta.14", - "@storybook/source-loader": "6.2.0-beta.14", - "@storybook/theming": "6.2.0-beta.14", + "@storybook/addons": "6.2.0-rc.8", + "@storybook/api": "6.2.0-rc.8", + "@storybook/client-logger": "6.2.0-rc.8", + "@storybook/components": "6.2.0-rc.8", + "@storybook/router": "6.2.0-rc.8", + "@storybook/source-loader": "6.2.0-rc.8", + "@storybook/theming": "6.2.0-rc.8", "core-js": "^3.8.2", "estraverse": "^5.2.0", "loader-utils": "^2.0.0", @@ -71,7 +71,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6", + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725", "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 696931122d86..2fed5984c235 100644 --- a/addons/toolbars/package.json +++ b/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", @@ -41,10 +41,10 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.2.0-beta.14", - "@storybook/api": "6.2.0-beta.14", - "@storybook/client-api": "6.2.0-beta.14", - "@storybook/components": "6.2.0-beta.14", + "@storybook/addons": "6.2.0-rc.8", + "@storybook/api": "6.2.0-rc.8", + "@storybook/client-api": "6.2.0-rc.8", + "@storybook/components": "6.2.0-rc.8", "core-js": "^3.8.2" }, "peerDependencies": { @@ -62,7 +62,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6", + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725", "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 18aa35e893a5..f57a8bb22859 100644 --- a/addons/viewport/package.json +++ b/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "Build responsive components by adjusting Storybook’s viewport size and orientation", "keywords": [ "addon", @@ -38,12 +38,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.2.0-beta.14", - "@storybook/api": "6.2.0-beta.14", - "@storybook/client-logger": "6.2.0-beta.14", - "@storybook/components": "6.2.0-beta.14", - "@storybook/core-events": "6.2.0-beta.14", - "@storybook/theming": "6.2.0-beta.14", + "@storybook/addons": "6.2.0-rc.8", + "@storybook/api": "6.2.0-rc.8", + "@storybook/client-logger": "6.2.0-rc.8", + "@storybook/components": "6.2.0-rc.8", + "@storybook/core-events": "6.2.0-rc.8", + "@storybook/theming": "6.2.0-rc.8", "core-js": "^3.8.2", "global": "^4.4.0", "memoizerific": "^1.11.3", @@ -65,7 +65,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6", + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725", "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 a30aacba7b2b..adec3528e9bc 100644 --- a/app/angular/package.json +++ b/app/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -41,11 +41,11 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.2.0-beta.14", - "@storybook/api": "6.2.0-beta.14", - "@storybook/core": "6.2.0-beta.14", - "@storybook/core-common": "6.2.0-beta.14", - "@storybook/node-logger": "6.2.0-beta.14", + "@storybook/addons": "6.2.0-rc.8", + "@storybook/api": "6.2.0-rc.8", + "@storybook/core": "6.2.0-rc.8", + "@storybook/core-common": "6.2.0-rc.8", + "@storybook/node-logger": "6.2.0-rc.8", "@types/webpack-env": "^1.16.0", "autoprefixer": "^9.8.6", "core-js": "^3.8.2", @@ -120,5 +120,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/app/angular/src/client/preview/angular-beta/ComputesTemplateFromComponent.test.ts b/app/angular/src/client/preview/angular-beta/ComputesTemplateFromComponent.test.ts index 27eab0b03bc2..4aaf6419a9b3 100644 --- a/app/angular/src/client/preview/angular-beta/ComputesTemplateFromComponent.test.ts +++ b/app/angular/src/client/preview/angular-beta/ComputesTemplateFromComponent.test.ts @@ -29,6 +29,102 @@ describe('angular source decorator', () => { }); }); + describe('with component with attribute selector', () => { + @Component({ + selector: 'doc-button[foo]', + template: '', + }) + class WithAttributeComponent {} + + it('should add attribute to template', async () => { + const component = WithAttributeComponent; + const props = {}; + const argTypes: ArgTypes = {}; + const source = computesTemplateSourceFromComponent(component, props, argTypes); + expect(source).toEqual(``); + }); + }); + + describe('with component with attribute and value selector', () => { + @Component({ + selector: 'doc-button[foo=bar]', + template: '', + }) + class WithAttributeValueComponent {} + + it('should add attribute to template', async () => { + const component = WithAttributeValueComponent; + const props = {}; + const argTypes: ArgTypes = {}; + const source = computesTemplateSourceFromComponent(component, props, argTypes); + expect(source).toEqual(``); + }); + }); + + describe('with component with attribute only selector', () => { + @Component({ + selector: '[foo]', + template: '', + }) + class WithAttributeOnlyComponent {} + + it('should create a div and add attribute to template', async () => { + const component = WithAttributeOnlyComponent; + const props = {}; + const argTypes: ArgTypes = {}; + const source = computesTemplateSourceFromComponent(component, props, argTypes); + expect(source).toEqual(`
`); + }); + }); + + describe('with component with class selector', () => { + @Component({ + selector: 'doc-button.foo', + template: '', + }) + class WithClassComponent {} + + it('should add class to template', async () => { + const component = WithClassComponent; + const props = {}; + const argTypes: ArgTypes = {}; + const source = computesTemplateSourceFromComponent(component, props, argTypes); + expect(source).toEqual(``); + }); + }); + + describe('with component with class only selector', () => { + @Component({ + selector: '.foo', + template: '', + }) + class WithClassComponent {} + + it('should create a div and add attribute to template', async () => { + const component = WithClassComponent; + const props = {}; + const argTypes: ArgTypes = {}; + const source = computesTemplateSourceFromComponent(component, props, argTypes); + expect(source).toEqual(`
`); + }); + }); + + describe('with component with multiple selectors', () => { + @Component({ + selector: 'doc-button, doc-button2', + template: '', + }) + class WithMultipleSelectorsComponent {} + + it('should use the first selector', async () => { + const component = WithMultipleSelectorsComponent; + const props = {}; + const argTypes: ArgTypes = {}; + const source = computesTemplateSourceFromComponent(component, props, argTypes); + expect(source).toEqual(``); + }); + }); + describe('no argTypes', () => { it('should generate tag-only template with no props', () => { const component = InputComponent; diff --git a/app/angular/src/client/preview/angular-beta/ComputesTemplateFromComponent.ts b/app/angular/src/client/preview/angular-beta/ComputesTemplateFromComponent.ts index d1379d402132..1e80cbdfb4f3 100644 --- a/app/angular/src/client/preview/angular-beta/ComputesTemplateFromComponent.ts +++ b/app/angular/src/client/preview/angular-beta/ComputesTemplateFromComponent.ts @@ -56,7 +56,8 @@ export const computesTemplateFromComponent = ( ? ` ${initialOutputs.map((i) => `(${i})="${i}($event)"`).join(' ')}` : ''; - return `<${ngComponentMetadata.selector}${templateInputs}${templateOutputs}>${innerTemplate}`; + const template = buildTemplate(ngComponentMetadata.selector); + return `<${template.openTag}${templateInputs}${templateOutputs}>${innerTemplate}`; }; const createAngularInputProperty = ({ @@ -127,5 +128,55 @@ export const computesTemplateSourceFromComponent = ( ? ` ${initialOutputs.map((i) => `(${i})="${i}($event)"`).join(' ')}` : ''; - return `<${ngComponentMetadata.selector}${templateInputs}${templateOutputs}>`; + const template = buildTemplate(ngComponentMetadata.selector); + return `<${template.openTag}${templateInputs}${templateOutputs}>`; +}; + +const buildTemplate = ( + selector: string +): { + openTag?: string; + closeTag?: string; +} => { + const templates = [ + { + // Match element selectors with optional chained attributes or classes + re: /^([\w\d-_]+)(?:(?:\[([\w\d-_]+)(?:=(.+))?\])|\.([\w\d-_]+))?/, + openTag: (matched: string[]) => { + let template = matched[1]; + if (matched[2]) { + template += ` ${matched[2]}`; + } + if (matched[3]) { + template += `="${matched[3]}"`; + } + if (matched[4]) { + template += ` class="${matched[4]}"`; + } + return template; + }, + closeTag: (matched: string[]) => `${matched[1]}`, + }, + { + re: /^\.(.+)/, + openTag: (matched: string[]) => `div class="${matched[1]}"`, + closeTag: (matched: string[]) => `div`, + }, + { + re: /^\[([\w\d-_]+)(?:=(.+))?\]/, + openTag: (matched: string[]) => `div ${matched[1]} ${matched[2] ? `="${matched[2]}"` : ''}`, + closeTag: (matched: string[]) => `div`, + }, + ]; + + return templates.reduce((acc, template) => { + const matched = selector.match(template.re); + if (matched) { + return { + openTag: template.openTag(matched).trim(), + closeTag: template.closeTag(matched), + }; + } + return acc; + }, {}); }; diff --git a/app/aurelia/package.json b/app/aurelia/package.json index 97a18e2b025f..74a0ce8c28a4 100644 --- a/app/aurelia/package.json +++ b/app/aurelia/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/aurelia", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "Storybook for Aurelia: Develop Aurelia Components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -35,11 +35,11 @@ }, "dependencies": { "@aurelia/webpack-loader": "^0.7.0", - "@storybook/addon-knobs": "6.2.0-beta.14", - "@storybook/addons": "6.2.0-beta.14", - "@storybook/core": "6.2.0-beta.14", - "@storybook/core-common": "6.2.0-beta.14", - "@storybook/node-logger": "6.2.0-beta.14", + "@storybook/addon-knobs": "6.2.0-rc.8", + "@storybook/addons": "6.2.0-rc.8", + "@storybook/core": "6.2.0-rc.8", + "@storybook/core-common": "6.2.0-rc.8", + "@storybook/node-logger": "6.2.0-rc.8", "fork-ts-checker-webpack-plugin": "^4.1.6", "global": "^4.4.0", "react": "16.14.0", @@ -70,5 +70,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/app/ember/package.json b/app/ember/package.json index 04f80d78c12a..1eb6c4474b78 100644 --- a/app/ember/package.json +++ b/app/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybookjs/storybook/tree/master/app/ember", "bugs": { @@ -39,8 +39,8 @@ }, "dependencies": { "@ember/test-helpers": "^2.1.4", - "@storybook/core": "6.2.0-beta.14", - "@storybook/core-common": "6.2.0-beta.14", + "@storybook/core": "6.2.0-rc.8", + "@storybook/core-common": "6.2.0-rc.8", "core-js": "^3.8.2", "global": "^4.4.0", "react": "16.14.0", @@ -61,5 +61,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/app/html/package.json b/app/html/package.json index c0b3be362538..52a8cc44d4e0 100644 --- a/app/html/package.json +++ b/app/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -41,10 +41,10 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.2.0-beta.14", - "@storybook/client-api": "6.2.0-beta.14", - "@storybook/core": "6.2.0-beta.14", - "@storybook/core-common": "6.2.0-beta.14", + "@storybook/addons": "6.2.0-rc.8", + "@storybook/client-api": "6.2.0-rc.8", + "@storybook/core": "6.2.0-rc.8", + "@storybook/core-common": "6.2.0-rc.8", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", "global": "^4.4.0", @@ -64,5 +64,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/app/marionette/package.json b/app/marionette/package.json index 0b716a7eefd0..26408d5d4cf0 100644 --- a/app/marionette/package.json +++ b/app/marionette/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/marionette", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "Storybook for Marionette: Develop Marionette.js component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -34,8 +34,8 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/core": "6.2.0-beta.14", - "@storybook/core-common": "6.2.0-beta.14", + "@storybook/core": "6.2.0-rc.8", + "@storybook/core-common": "6.2.0-rc.8", "common-tags": "^1.8.0", "core-js": "^3.8.2", "global": "^4.4.0", @@ -62,5 +62,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/app/marko/package.json b/app/marko/package.json index a2d128f6684c..3c8488a11893 100644 --- a/app/marko/package.json +++ b/app/marko/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/marko", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -42,9 +42,9 @@ }, "dependencies": { "@marko/webpack": "^6.2.10", - "@storybook/client-logger": "6.2.0-beta.14", - "@storybook/core": "6.2.0-beta.14", - "@storybook/core-common": "6.2.0-beta.14", + "@storybook/client-logger": "6.2.0-rc.8", + "@storybook/core": "6.2.0-rc.8", + "@storybook/core-common": "6.2.0-rc.8", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", "global": "^4.4.0", @@ -65,5 +65,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/app/mithril/package.json b/app/mithril/package.json index c9abe1d92a20..369917dcbb6d 100644 --- a/app/mithril/package.json +++ b/app/mithril/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/mithril", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "Storybook for Mithril: Develop Mithril Component in isolation.", "keywords": [ "storybook" @@ -43,9 +43,9 @@ "dependencies": { "@babel/core": "^7.12.10", "@babel/plugin-transform-react-jsx": "^7.12.12", - "@storybook/addons": "6.2.0-beta.14", - "@storybook/core": "6.2.0-beta.14", - "@storybook/core-common": "6.2.0-beta.14", + "@storybook/addons": "6.2.0-rc.8", + "@storybook/core": "6.2.0-rc.8", + "@storybook/core-common": "6.2.0-rc.8", "@types/mithril": "^2.0.6", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", @@ -69,5 +69,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/app/preact/package.json b/app/preact/package.json index e255c8ca6e80..0fbd6522dda7 100644 --- a/app/preact/package.json +++ b/app/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" @@ -42,9 +42,9 @@ }, "dependencies": { "@babel/plugin-transform-react-jsx": "^7.12.12", - "@storybook/addons": "6.2.0-beta.14", - "@storybook/core": "6.2.0-beta.14", - "@storybook/core-common": "6.2.0-beta.14", + "@storybook/addons": "6.2.0-rc.8", + "@storybook/core": "6.2.0-rc.8", + "@storybook/core-common": "6.2.0-rc.8", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", "global": "^4.4.0", @@ -67,5 +67,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/app/preact/src/client/preview/types-6-0.ts b/app/preact/src/client/preview/types-6-0.ts index b8ec95072248..efb4bc395a08 100644 --- a/app/preact/src/client/preview/types-6-0.ts +++ b/app/preact/src/client/preview/types-6-0.ts @@ -2,7 +2,7 @@ import { AnyComponent } from 'preact'; import { Args as DefaultArgs, Annotations, BaseMeta, BaseStory } from '@storybook/addons'; import { StoryFnPreactReturnType } from './types'; -export { Args, ArgTypes, Parameters, StoryContext } from '@storybook/addons'; +export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/addons'; type PreactComponent = AnyComponent; type PreactReturnType = StoryFnPreactReturnType; diff --git a/app/rax/package.json b/app/rax/package.json index 9253b8a7f21b..9bb2cdce8834 100644 --- a/app/rax/package.json +++ b/app/rax/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/rax", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "Storybook for Rax: Develop Rax Component in isolation.", "keywords": [ "rax", @@ -42,8 +42,8 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/core": "6.2.0-beta.14", - "@storybook/core-common": "6.2.0-beta.14", + "@storybook/core": "6.2.0-rc.8", + "@storybook/core-common": "6.2.0-rc.8", "babel-preset-rax": "^1.0.0-beta.0", "core-js": "^3.8.2", "driver-dom": "^2.2.0", @@ -65,5 +65,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/app/react/package.json b/app/react/package.json index 71807e4c00d2..078bef9acfdc 100644 --- a/app/react/package.json +++ b/app/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -45,10 +45,10 @@ "@babel/preset-flow": "^7.12.1", "@babel/preset-react": "^7.12.10", "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3", - "@storybook/addons": "6.2.0-beta.14", - "@storybook/core": "6.2.0-beta.14", - "@storybook/core-common": "6.2.0-beta.14", - "@storybook/node-logger": "6.2.0-beta.14", + "@storybook/addons": "6.2.0-rc.8", + "@storybook/core": "6.2.0-rc.8", + "@storybook/core-common": "6.2.0-rc.8", + "@storybook/node-logger": "6.2.0-rc.8", "@storybook/semver": "^7.3.2", "@types/webpack-env": "^1.16.0", "babel-plugin-add-react-displayname": "^0.0.5", @@ -67,7 +67,7 @@ "webpack": "4" }, "devDependencies": { - "@storybook/client-api": "6.2.0-beta.14", + "@storybook/client-api": "6.2.0-rc.8", "@types/node": "^14.14.20", "@types/prompts": "^2.0.9" }, @@ -90,5 +90,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/app/riot/package.json b/app/riot/package.json index 139d5c30e617..ac7fea41d5e2 100644 --- a/app/riot/package.json +++ b/app/riot/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/riot", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "Storybook for riot.js: View riot snippets in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -42,8 +42,8 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/core": "6.2.0-beta.14", - "@storybook/core-common": "6.2.0-beta.14", + "@storybook/core": "6.2.0-rc.8", + "@storybook/core-common": "6.2.0-rc.8", "core-js": "^3.8.2", "global": "^4.4.0", "raw-loader": "^4.0.2", @@ -74,5 +74,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/app/server/package.json b/app/server/package.json index ca9c93038213..c47962660a74 100644 --- a/app/server/package.json +++ b/app/server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -41,12 +41,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.2.0-beta.14", - "@storybook/api": "6.2.0-beta.14", - "@storybook/client-api": "6.2.0-beta.14", - "@storybook/core": "6.2.0-beta.14", - "@storybook/core-common": "6.2.0-beta.14", - "@storybook/node-logger": "6.2.0-beta.14", + "@storybook/addons": "6.2.0-rc.8", + "@storybook/api": "6.2.0-rc.8", + "@storybook/client-api": "6.2.0-rc.8", + "@storybook/core": "6.2.0-rc.8", + "@storybook/core-common": "6.2.0-rc.8", + "@storybook/node-logger": "6.2.0-rc.8", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", "global": "^4.4.0", @@ -66,5 +66,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/app/svelte/package.json b/app/svelte/package.json index d44e3a5fc442..a0e2205644ef 100644 --- a/app/svelte/package.json +++ b/app/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -41,9 +41,9 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.2.0-beta.14", - "@storybook/core": "6.2.0-beta.14", - "@storybook/core-common": "6.2.0-beta.14", + "@storybook/addons": "6.2.0-rc.8", + "@storybook/core": "6.2.0-rc.8", + "@storybook/core-common": "6.2.0-rc.8", "core-js": "^3.8.2", "global": "^4.4.0", "react": "16.14.0", @@ -69,5 +69,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/app/svelte/src/server/framework-preset-svelte.ts b/app/svelte/src/server/framework-preset-svelte.ts index bf17ac7a948a..5bfcee4cf031 100644 --- a/app/svelte/src/server/framework-preset-svelte.ts +++ b/app/svelte/src/server/framework-preset-svelte.ts @@ -9,6 +9,8 @@ export async function webpack(config: Configuration, options: Options): Promise< options ); + const mainFields = (config.resolve.mainFields as string[]) || ['browser', 'module', 'main']; + return { ...config, module: { @@ -26,6 +28,7 @@ export async function webpack(config: Configuration, options: Options): Promise< ...config.resolve, extensions: [...config.resolve.extensions, '.svelte'], alias: config.resolve.alias, + mainFields: ['svelte', ...mainFields], }, }; } diff --git a/app/vue/package.json b/app/vue/package.json index 3c4f5dd0108f..6e1e7de925cc 100644 --- a/app/vue/package.json +++ b/app/vue/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -41,9 +41,9 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.2.0-beta.14", - "@storybook/core": "6.2.0-beta.14", - "@storybook/core-common": "6.2.0-beta.14", + "@storybook/addons": "6.2.0-rc.8", + "@storybook/core": "6.2.0-rc.8", + "@storybook/core-common": "6.2.0-rc.8", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", "global": "^4.4.0", @@ -77,5 +77,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/app/vue3/package.json b/app/vue3/package.json index 5cf68b539806..d5dfe4531d98 100644 --- a/app/vue3/package.json +++ b/app/vue3/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -41,9 +41,9 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.2.0-beta.14", - "@storybook/core": "6.2.0-beta.14", - "@storybook/core-common": "6.2.0-beta.14", + "@storybook/addons": "6.2.0-rc.8", + "@storybook/core": "6.2.0-rc.8", + "@storybook/core-common": "6.2.0-rc.8", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", "global": "^4.4.0", @@ -76,5 +76,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/app/web-components/package.json b/app/web-components/package.json index f82fc02c0d94..f8fd5e5248b0 100644 --- a/app/web-components/package.json +++ b/app/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit-html", @@ -46,10 +46,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.2.0-beta.14", - "@storybook/client-api": "6.2.0-beta.14", - "@storybook/core": "6.2.0-beta.14", - "@storybook/core-common": "6.2.0-beta.14", + "@storybook/addons": "6.2.0-rc.8", + "@storybook/client-api": "6.2.0-rc.8", + "@storybook/core": "6.2.0-rc.8", + "@storybook/core-common": "6.2.0-rc.8", "@types/webpack-env": "^1.16.0", "babel-plugin-bundled-import-meta": "^0.3.1", "core-js": "^3.8.2", @@ -74,5 +74,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/app/web-components/src/client/preview/types.ts b/app/web-components/src/client/preview/types.ts index d3380b6686dd..8d52cc022233 100644 --- a/app/web-components/src/client/preview/types.ts +++ b/app/web-components/src/client/preview/types.ts @@ -1,5 +1,4 @@ -// eslint-disable-next-line import/no-extraneous-dependencies -import { TemplateResult, SVGTemplateResult } from 'lit-element'; +import { TemplateResult, SVGTemplateResult } from 'lit-html'; export type { RenderContext } from '@storybook/core'; export { Args, ArgTypes, Parameters, StoryContext } from '@storybook/addons'; diff --git a/dev-kits/addon-decorator/package.json b/dev-kits/addon-decorator/package.json index 1ea6ce4dfc56..6468c84a32ba 100644 --- a/dev-kits/addon-decorator/package.json +++ b/dev-kits/addon-decorator/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-decorator", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "decorator addon for storybook", "keywords": [ "addon", @@ -25,13 +25,13 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.2.0-beta.14", - "@storybook/client-api": "6.2.0-beta.14", + "@storybook/addons": "6.2.0-rc.8", + "@storybook/client-api": "6.2.0-rc.8", "core-js": "^3.8.2", "global": "^4.4.0" }, "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/dev-kits/addon-parameter/package.json b/dev-kits/addon-parameter/package.json index dfd5fbf18d35..865362c46a57 100644 --- a/dev-kits/addon-parameter/package.json +++ b/dev-kits/addon-parameter/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-parameter", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "parameter addon for storybook", "keywords": [ "addon", @@ -25,12 +25,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.2.0-beta.14", - "@storybook/api": "6.2.0-beta.14", - "@storybook/client-logger": "6.2.0-beta.14", - "@storybook/components": "6.2.0-beta.14", - "@storybook/core-events": "6.2.0-beta.14", - "@storybook/theming": "6.2.0-beta.14", + "@storybook/addons": "6.2.0-rc.8", + "@storybook/api": "6.2.0-rc.8", + "@storybook/client-logger": "6.2.0-rc.8", + "@storybook/components": "6.2.0-rc.8", + "@storybook/core-events": "6.2.0-rc.8", + "@storybook/theming": "6.2.0-rc.8", "core-js": "^3.8.2", "global": "^4.4.0", "react": "^16.8.0 || ^17.0.0", @@ -39,5 +39,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/dev-kits/addon-preview-wrapper/package.json b/dev-kits/addon-preview-wrapper/package.json index 5d422e69a77e..3754231ac53b 100644 --- a/dev-kits/addon-preview-wrapper/package.json +++ b/dev-kits/addon-preview-wrapper/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-preview-wrapper", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "preview wrapper addon for storybook", "keywords": [ "addon", @@ -25,11 +25,11 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.2.0-beta.14", + "@storybook/addons": "6.2.0-rc.8", "react": "^16.8.0 || ^17.0.0" }, "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/dev-kits/addon-roundtrip/package.json b/dev-kits/addon-roundtrip/package.json index 0eb594937650..5a415700df71 100644 --- a/dev-kits/addon-roundtrip/package.json +++ b/dev-kits/addon-roundtrip/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-roundtrip", - "version": "6.2.0-beta.14", + "version": "6.2.0-rc.8", "description": "roundtrip addon for storybook", "keywords": [ "addon", @@ -25,13 +25,13 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.2.0-beta.14", - "@storybook/api": "6.2.0-beta.14", - "@storybook/client-api": "6.2.0-beta.14", - "@storybook/client-logger": "6.2.0-beta.14", - "@storybook/components": "6.2.0-beta.14", - "@storybook/core-events": "6.2.0-beta.14", - "@storybook/theming": "6.2.0-beta.14", + "@storybook/addons": "6.2.0-rc.8", + "@storybook/api": "6.2.0-rc.8", + "@storybook/client-api": "6.2.0-rc.8", + "@storybook/client-logger": "6.2.0-rc.8", + "@storybook/components": "6.2.0-rc.8", + "@storybook/core-events": "6.2.0-rc.8", + "@storybook/theming": "6.2.0-rc.8", "core-js": "^3.8.2", "global": "^4.4.0", "react": "^16.8.0 || ^17.0.0", @@ -40,5 +40,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/docs/configure/environment-variables.md b/docs/configure/environment-variables.md index 2ffb5a1d9a33..370e013d4f7b 100644 --- a/docs/configure/environment-variables.md +++ b/docs/configure/environment-variables.md @@ -49,6 +49,7 @@ Then you can access this environment variable anywhere, even within your stories 'vue/my-component-with-env-variables.2.js.mdx', 'vue/my-component-with-env-variables.3.js.mdx', 'angular/my-component-with-env-variables.ts.mdx', + 'web-components/my-component-with-env-variables.js.mdx', ]} /> @@ -76,4 +77,4 @@ The table below lists the available options:
Note: By default Storybook will open a new Chrome window as part of its startup process. If you don't have Chrome installed, make sure to include one of the following options, or set your default browser accordingly. -
\ No newline at end of file + diff --git a/docs/essentials/controls.md b/docs/essentials/controls.md index 0bbc296af077..45058692aaae 100644 --- a/docs/essentials/controls.md +++ b/docs/essentials/controls.md @@ -61,7 +61,6 @@ By default, Storybook will render a free text input for the `variant` arg: ![Essential addon Controls using a string](addon-controls-args-variant-string.png) - This works as long as you type a valid string into the auto-generated text control, but it's not the best UI for our scenario, given that the component only accepts `primary` or `secondary` as variants. Let’s replace it with Storybook’s radio component. We can specify which controls get used by declaring a custom [argType](../api/argtypes.md) for the `variant` property. ArgTypes encode basic metadata for args, such as name, description, defaultValue for an arg. These get automatically filled in by Storybook Docs. @@ -87,13 +86,13 @@ This replaces the input with a radio group for a more intuitive experience. For a few types, Controls will automatically infer them by using [regex](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp). You can change the matchers for a regex that suits you better. -| Data type | Default regex | Description | -| :---------: | :-----------------------: | :-------------------------------------------------------: | -| **color** | `/(background\|color)$/i` | Will display a color picker UI for the args that match it | -| **date** | `/Date$/` | Will display a date picker UI for the args that match it | - +| Data type | Default regex | Description | +| :-------: | :-----------------------: | :-------------------------------------------------------: | +| **color** | `/(background\|color)$/i` | Will display a color picker UI for the args that match it | +| **date** | `/Date$/` | Will display a date picker UI for the args that match it | To do so, use the `matchers` property in `controls` parameter: + + + + +## Sorting controls + +By default, controls are unsorted and use whatever order the args data is processed in (`none`). It can also be configured to sort alphabetically by arg name (`alpha`) or alphabetically required args first (`requiredFirst`). + +Consider the following snippet to force required args first: + + + + diff --git a/docs/essentials/viewport.md b/docs/essentials/viewport.md index a2c017081337..f7f7a06c19ca 100644 --- a/docs/essentials/viewport.md +++ b/docs/essentials/viewport.md @@ -123,6 +123,7 @@ You can change your story through [parameters](../writing-stories/parameters.md) 'react/my-component-story-configure-viewports.mdx.mdx', 'vue/my-component-story-configure-viewports.js.mdx', 'angular/my-component-story-configure-viewports.ts.mdx', + 'web-components/my-component-story-configure-viewports.js.mdx', ]} /> diff --git a/docs/snippets/angular/app-story-with-mock.ts.mdx b/docs/snippets/angular/app-story-with-mock.ts.mdx index 62ebba012397..f08ccb4db776 100644 --- a/docs/snippets/angular/app-story-with-mock.ts.mdx +++ b/docs/snippets/angular/app-story-with-mock.ts.mdx @@ -10,7 +10,6 @@ export default { } as Meta; const Template: Story = (args) => ({ - component: AppComponent, props: args, }); diff --git a/docs/snippets/angular/button-group-story.ts.mdx b/docs/snippets/angular/button-group-story.ts.mdx index 98ad6269cfd8..ddebe9cc562c 100644 --- a/docs/snippets/angular/button-group-story.ts.mdx +++ b/docs/snippets/angular/button-group-story.ts.mdx @@ -8,6 +8,8 @@ import { CommonModule } from '@angular/common'; import ButtonGroup from './ButtonGroup.component'; import Button from './button.component'; + +//👇 Imports the Button stories import * as ButtonStories from './Button.stories'; export default { @@ -22,7 +24,6 @@ export default { } as Meta; const Template: Story = (args) => ({ - component: ButtonGroup, props: args, }); diff --git a/docs/snippets/angular/button-story-default-docs-code.ts.mdx b/docs/snippets/angular/button-story-default-docs-code.ts.mdx index 1183769151d1..b8e9d235ecfc 100644 --- a/docs/snippets/angular/button-story-default-docs-code.ts.mdx +++ b/docs/snippets/angular/button-story-default-docs-code.ts.mdx @@ -8,22 +8,24 @@ import Button from './button.component'; export default { title: 'Button', component: Button, + //👇 Creates specific argTypes argTypes: { backgroundColor: { control: 'color' } } } as Meta; -// some function to demonstrate the behavior +//👇 Some function to demonstrate the behavior const someFunction = (someValue: string) => { return `i am a ${someValue}`; }; export const ExampleStory: Story