diff --git a/CHANGELOG.md b/CHANGELOG.md index 4eb326a3ddb2..d151d4c053b8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,37 @@ +## 6.2.0-rc.9 (March 25, 2021) + +### Features + +- Core: Support some special values in URL args ([#14293](https://github.com/storybookjs/storybook/pull/14293)) + +### Bug Fixes + +- Core: Fix `enum` args parsing from URL ([#14314](https://github.com/storybookjs/storybook/pull/14314)) +- Controls: Tweaks and fixes for color control ([#14316](https://github.com/storybookjs/storybook/pull/14316)) +- Components: Handle `null` when parsing input in color picker ([#14305](https://github.com/storybookjs/storybook/pull/14305)) + +## 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 diff --git a/addons/a11y/package.json b/addons/a11y/package.json index 6266b6b8258d..6aa5c0746de0 100644 --- a/addons/a11y/package.json +++ b/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "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-rc.6", - "@storybook/api": "6.2.0-rc.6", - "@storybook/channels": "6.2.0-rc.6", - "@storybook/client-api": "6.2.0-rc.6", - "@storybook/client-logger": "6.2.0-rc.6", - "@storybook/components": "6.2.0-rc.6", - "@storybook/core-events": "6.2.0-rc.6", - "@storybook/theming": "6.2.0-rc.6", + "@storybook/addons": "6.2.0-rc.9", + "@storybook/api": "6.2.0-rc.9", + "@storybook/channels": "6.2.0-rc.9", + "@storybook/client-api": "6.2.0-rc.9", + "@storybook/client-logger": "6.2.0-rc.9", + "@storybook/components": "6.2.0-rc.9", + "@storybook/core-events": "6.2.0-rc.9", + "@storybook/theming": "6.2.0-rc.9", "axe-core": "^4.1.1", "core-js": "^3.8.2", "global": "^4.4.0", @@ -77,7 +77,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "9140a2884503b405d457268fd9ffd8d2438013af", + "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 f8de2498094b..9957fd71c24d 100644 --- a/addons/actions/package.json +++ b/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "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-rc.6", - "@storybook/api": "6.2.0-rc.6", - "@storybook/client-api": "6.2.0-rc.6", - "@storybook/components": "6.2.0-rc.6", - "@storybook/core-events": "6.2.0-rc.6", - "@storybook/theming": "6.2.0-rc.6", + "@storybook/addons": "6.2.0-rc.9", + "@storybook/api": "6.2.0-rc.9", + "@storybook/client-api": "6.2.0-rc.9", + "@storybook/components": "6.2.0-rc.9", + "@storybook/core-events": "6.2.0-rc.9", + "@storybook/theming": "6.2.0-rc.9", "core-js": "^3.8.2", "fast-deep-equal": "^3.1.3", "global": "^4.4.0", @@ -74,7 +74,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "9140a2884503b405d457268fd9ffd8d2438013af", + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725", "storybook": { "displayName": "Actions", "unsupportedFrameworks": [ diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json index b54e60667a5a..dfef0329545f 100644 --- a/addons/backgrounds/package.json +++ b/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "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-rc.6", - "@storybook/api": "6.2.0-rc.6", - "@storybook/client-logger": "6.2.0-rc.6", - "@storybook/components": "6.2.0-rc.6", - "@storybook/core-events": "6.2.0-rc.6", - "@storybook/theming": "6.2.0-rc.6", + "@storybook/addons": "6.2.0-rc.9", + "@storybook/api": "6.2.0-rc.9", + "@storybook/client-logger": "6.2.0-rc.9", + "@storybook/components": "6.2.0-rc.9", + "@storybook/core-events": "6.2.0-rc.9", + "@storybook/theming": "6.2.0-rc.9", "core-js": "^3.8.2", "global": "^4.4.0", "memoizerific": "^1.11.3", @@ -72,7 +72,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "9140a2884503b405d457268fd9ffd8d2438013af", + "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 9ab364e07c2f..315c3b0816ec 100644 --- a/addons/controls/package.json +++ b/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "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-rc.6", - "@storybook/api": "6.2.0-rc.6", - "@storybook/client-api": "6.2.0-rc.6", - "@storybook/components": "6.2.0-rc.6", - "@storybook/node-logger": "6.2.0-rc.6", - "@storybook/theming": "6.2.0-rc.6", + "@storybook/addons": "6.2.0-rc.9", + "@storybook/api": "6.2.0-rc.9", + "@storybook/client-api": "6.2.0-rc.9", + "@storybook/components": "6.2.0-rc.9", + "@storybook/node-logger": "6.2.0-rc.9", + "@storybook/theming": "6.2.0-rc.9", "core-js": "^3.8.2", "ts-dedent": "^2.0.0" }, @@ -65,7 +65,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "9140a2884503b405d457268fd9ffd8d2438013af", + "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 4eed46c31e6e..9f50df117373 100644 --- a/addons/controls/src/ControlsPanel.tsx +++ b/addons/controls/src/ControlsPanel.tsx @@ -1,12 +1,13 @@ import React, { FC } from 'react'; -import { useArgs, useArgTypes, useParameter } from '@storybook/api'; -import { ArgsTable, NoControlsWarning, SortType } from '@storybook/components'; +import { ArgTypes, useArgs, useArgTypes, useParameter } from '@storybook/api'; +import { ArgsTable, NoControlsWarning, PresetColor, SortType } from '@storybook/components'; import { PARAM_KEY } from './constants'; interface ControlsParameters { sort?: SortType; expanded?: boolean; + presetColors?: PresetColor[]; hideNoControlsWarning?: boolean; } @@ -14,21 +15,29 @@ export const ControlsPanel: FC = () => { const [args, updateArgs, resetArgs] = useArgs(); const rows = useArgTypes(); const isArgsStory = useParameter('__isArgsStory', false); - const { expanded, sort, hideNoControlsWarning = false } = useParameter( - PARAM_KEY, - {} - ); + const { + expanded, + sort, + presetColors, + hideNoControlsWarning = false, + } = useParameter(PARAM_KEY, {}); const hasControls = Object.values(rows).some((arg) => arg?.control); const showWarning = !(hasControls && isArgsStory) && !hideNoControlsWarning; + const withPresetColors = Object.entries(rows).reduce((acc, [key, arg]) => { + if (arg?.control?.type !== 'color' || arg?.control?.presetColors) acc[key] = arg; + else acc[key] = { ...arg, control: { ...arg.control, presetColors } }; + return acc; + }, {} as ArgTypes); + return ( <> {showWarning && } ; +Hover.parameters = { pseudo: { hover: true } }; +``` + +## Channels + +Channels enable two-way communication between the manager and the preview pane, using a NodeJS [EventEmitter](https://nodejs.org/api/events.html) compatible API. Your addons can plug into specific channels and respond to these events. + +For example, the [Actions addon](https://storybook.js.org/addons/@storybook/addon-actions) captures user events and displays their data in a panel. + +Use the [`useChannel`](./addons-api#usechannel) hook to access the channel data within your addon. + +For a complete example, check out [storybookjs/addon-kit/withRoundTrip.js](https://github.com/storybookjs/addon-kit/blob/main/src/withRoundTrip.js) diff --git a/docs/addons/writing-addons.md b/docs/addons/writing-addons.md index cdccbd4998aa..79bbffe444f9 100644 --- a/docs/addons/writing-addons.md +++ b/docs/addons/writing-addons.md @@ -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: @@ -239,6 +239,6 @@ To dive deeper we recommend Storybook's [creating an addon](https://storybook.js [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. -### Dev kits +### Addon kit -To help you jumpstart the addon development, the Storybook maintainers created some [`dev-kits`](https://github.com/storybookjs/storybook/tree/next/dev-kits), use them as reference when building 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. diff --git a/docs/api/cli-options.md b/docs/api/cli-options.md index 81278e787626..bf2f64a4a292 100644 --- a/docs/api/cli-options.md +++ b/docs/api/cli-options.md @@ -34,7 +34,7 @@ Usage: start-storybook [options] | --no-manager-cache | Disables Storybook's manager caching mechanism. See note below. | `start-storybook --no-manager-cache` |
-💡 NOTE: Use the --no-manager-cache flag with caution. As it disables the internal caching mechanism and can severely impact your Storybook's loading time. +💡 NOTE: The flag --no-manager-cache disables the internal caching of Storybook and can serverely impact your Storybook loading time, so only use it when you need to refresh Storybook's UI, such as when editing themes.
## build-storybook diff --git a/docs/configure/theming.md b/docs/configure/theming.md index 7083ce5a1178..98165c5d7a0c 100644 --- a/docs/configure/theming.md +++ b/docs/configure/theming.md @@ -113,6 +113,8 @@ Now your custom theme will replace Storybook's default theme and you'll see a si ![Storybook starter theme](./storybook-starter-custom-theme.png) +**Note:** Once you're finished configuring the theme, remove the flag `--no-manager-cache` from the `storybook` script, otherwise loading times can be severely impacted. + Let's take a look at more complex example. Copy the code below and paste it in `.storybook/YourTheme.js`. @@ -239,4 +241,4 @@ Or with template literals: ]} /> - \ No newline at end of file + diff --git a/docs/essentials/controls.md b/docs/essentials/controls.md index 45058692aaae..69a4d7dce0b6 100644 --- a/docs/essentials/controls.md +++ b/docs/essentials/controls.md @@ -192,7 +192,7 @@ Here is the full list of available controls you can use: | | select | select dropdown input | - | | | multi-select | multi-select dropdown input | - | | **string** | text | simple text input | - | -| | color | color picker input that assumes strings are color values | - | +| | color | color picker input that assumes strings are color values | presetColors | | | date | date picker input | - | If you need to customize a control for a number data type in your story, you can do it like so: @@ -236,6 +236,26 @@ And here's what the resulting UI looks like: ![Controls addon expanded](./addon-controls-expanded.png) +### Specify initial preset color swatches + +For `color` controls, you can specify an array of `presetColors`, either on the `control` in `argTypes`, or as a parameter under the `controls` namespace: + +```js +// .storybook/preview.js + +export const parameters = { + controls: { + presetColors: [ + { color: '#ff4785', title: 'Coral' }, + 'rgba(0, 159, 183, 1)', + '#fe4a49', + ] + }, +}; +``` + +These will then be available as swatches in the color picker. Color presets can be defined as an object with `color` and `title`, or as a simple CSS color string. The `title` will be shown when you hover over the color swatch. In case no title is specified, the nearest CSS color name will be used instead. + ### Disable controls for specific properties Aside from the features already documented here, Controls can also be disabled for individual properties. diff --git a/docs/toc.js b/docs/toc.js index 73af68419293..c302b81ccb18 100644 --- a/docs/toc.js +++ b/docs/toc.js @@ -330,6 +330,11 @@ module.exports = { title: 'Write', type: 'link', }, + { + pathSegment: 'configure-addons', + title: 'Configure addons', + type: 'link', + }, { pathSegment: 'writing-presets', title: 'Write a preset', diff --git a/docs/versions/next.json b/docs/versions/next.json index 32bb98fa5988..8008be8dc033 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"6.2.0-rc.6","info":{"plain":"### Bug Fixes\n\n- Revert \"Webpack: Hash files only in production mode\" ([#14283](https://github.com/storybookjs/storybook/pull/14283))"}} \ No newline at end of file +{"version":"6.2.0-rc.8","info":{"plain":"**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.\n\n### Bug Fixes\n\n- Revert \"Addon-docs/Angular: Fix inline rendering setup\" ([#14310](https://github.com/storybookjs/storybook/pull/14310))\n- Core: Import `isPlainObject` directly from lodash ([#14307](https://github.com/storybookjs/storybook/pull/14307))\n- Addon-Links: Fix react.d.ts paths ([#14306](https://github.com/storybookjs/storybook/pull/14306))"}} \ No newline at end of file diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md index 80d534f17c35..944814b955a4 100644 --- a/docs/writing-stories/args.md +++ b/docs/writing-stories/args.md @@ -139,6 +139,8 @@ The `args` param is always a set of `key:value` pairs delimited with a semicolon } ``` +Similarly, special formats are available for dates and colors. Date objects will be encoded as `!date(value)` with value represented as an ISO date string. Colors are encoded as `!hex(value)`, `!rgba(value)` or `!hsla(value)`. Note that rgb(a) and hsl(a) should not contain spaces or percentage signs in the URL. + Args specified through the URL will extend and override any default values of args specified on the story. ## Mapping to complex arg values diff --git a/docs/writing-stories/decorators.md b/docs/writing-stories/decorators.md index ea9af43e422f..4da5d627feba 100644 --- a/docs/writing-stories/decorators.md +++ b/docs/writing-stories/decorators.md @@ -31,7 +31,7 @@ Some components require a “harness” to render in a useful way. For instance ## “Context” for mocking -Some libraries require components higher up in the component hierarchy to render properly. For example in Styled Components, a `ThemeProvider` is required if your components make use of themes. Add a single global decorator that add this context to to all stories in [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering): +Some libraries require components higher up in the component hierarchy to render properly. For example in Styled Components, a `ThemeProvider` is required if your components make use of themes. Add a single global decorator that adds this context to all stories in [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering): diff --git a/examples/angular-cli/.storybook/preview.ts b/examples/angular-cli/.storybook/preview.ts index 1f2220621e70..2920464a8cf4 100644 --- a/examples/angular-cli/.storybook/preview.ts +++ b/examples/angular-cli/.storybook/preview.ts @@ -1,4 +1,6 @@ +import { addParameters } from '@storybook/angular'; import { setCompodocJson } from '@storybook/addon-docs/angular'; +import { prepareForInline } from '@storybook/addon-docs/angular/inline'; import addCssWarning from '../src/cssWarning'; // @ts-ignore @@ -15,16 +17,17 @@ setCompodocJson(filtered); addCssWarning(); -export const parameters = { +addParameters({ docs: { inlineStories: true, + prepareForInline, }, options: { storySort: { order: ['Welcome', 'Core ', 'Addons ', 'Basics '], }, }, -}; +}); export const globalTypes = { theme: { diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json index 87bf07d610f2..e5e3fa334735 100644 --- a/examples/angular-cli/package.json +++ b/examples/angular-cli/package.json @@ -1,6 +1,6 @@ { "name": "angular-cli", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "private": true, "license": "MIT", "scripts": { @@ -38,19 +38,19 @@ "@angular/compiler-cli": "^11.2.0", "@angular/elements": "^11.2.0", "@compodoc/compodoc": "^1.1.11", - "@storybook/addon-a11y": "6.2.0-rc.6", - "@storybook/addon-actions": "6.2.0-rc.6", - "@storybook/addon-backgrounds": "6.2.0-rc.6", - "@storybook/addon-controls": "6.2.0-rc.6", - "@storybook/addon-docs": "6.2.0-rc.6", - "@storybook/addon-jest": "6.2.0-rc.6", - "@storybook/addon-knobs": "6.2.0-rc.6", - "@storybook/addon-links": "6.2.0-rc.6", - "@storybook/addon-storyshots": "6.2.0-rc.6", - "@storybook/addon-storysource": "6.2.0-rc.6", - "@storybook/addons": "6.2.0-rc.6", - "@storybook/angular": "6.2.0-rc.6", - "@storybook/source-loader": "6.2.0-rc.6", + "@storybook/addon-a11y": "6.2.0-rc.9", + "@storybook/addon-actions": "6.2.0-rc.9", + "@storybook/addon-backgrounds": "6.2.0-rc.9", + "@storybook/addon-controls": "6.2.0-rc.9", + "@storybook/addon-docs": "6.2.0-rc.9", + "@storybook/addon-jest": "6.2.0-rc.9", + "@storybook/addon-knobs": "6.2.0-rc.9", + "@storybook/addon-links": "6.2.0-rc.9", + "@storybook/addon-storyshots": "6.2.0-rc.9", + "@storybook/addon-storysource": "6.2.0-rc.9", + "@storybook/addons": "6.2.0-rc.9", + "@storybook/angular": "6.2.0-rc.9", + "@storybook/source-loader": "6.2.0-rc.9", "@types/core-js": "^2.5.4", "@types/jest": "^26.0.16", "@types/node": "^14.14.20", diff --git a/examples/angular-cli/src/stories/basics/component-with-complex-selectors/__snapshots__/multiple-selector.component.stories.storyshot b/examples/angular-cli/src/stories/basics/component-with-complex-selectors/__snapshots__/multiple-selector.component.stories.storyshot index b33394622764..b42e9f7f6128 100644 --- a/examples/angular-cli/src/stories/basics/component-with-complex-selectors/__snapshots__/multiple-selector.component.stories.storyshot +++ b/examples/angular-cli/src/stories/basics/component-with-complex-selectors/__snapshots__/multiple-selector.component.stories.storyshot @@ -1,13 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Storyshots Basics / Component / With Complex Selectors Input Selectors 1`] = ` - - - foo - - -`; - exports[`Storyshots Basics / Component / With Complex Selectors attribute selectors 1`] = ` `Subtitle: ${kind}`} />, }, + controls: { + presetColors: [ + { color: '#ff4785', title: 'Coral' }, + { color: '#1EA7FD', title: 'Ocean' }, + { color: 'rgb(252, 82, 31)', title: 'Orange' }, + { color: 'RGBA(255, 174, 0, 0.5)', title: 'Gold' }, + { color: 'hsl(101, 52%, 49%)', title: 'Green' }, + { color: 'HSLA(179,65%,53%,0.5)', title: 'Seafoam' }, + { color: '#6F2CAC', title: 'Purple' }, + { color: '#2A0481', title: 'Ultraviolet' }, + { color: 'black' }, + { color: '#333', title: 'Darkest' }, + { color: '#444', title: 'Darker' }, + { color: '#666', title: 'Dark' }, + { color: '#999', title: 'Mediumdark' }, + { color: '#ddd', title: 'Medium' }, + { color: '#EEE', title: 'Mediumlight' }, + { color: '#F3F3F3', title: 'Light' }, + { color: '#F8F8F8', title: 'Lighter' }, + { color: '#FFFFFF', title: 'Lightest' }, + '#fe4a49', + '#FED766', + 'rgba(0, 159, 183, 1)', + 'HSLA(240,11%,91%,0.5)', + 'slategray', + ], + }, }; export const globals = { diff --git a/examples/official-storybook/stories/addon-controls.stories.tsx b/examples/official-storybook/stories/addon-controls.stories.tsx index b2b39d2cd23f..93040bf0a443 100644 --- a/examples/official-storybook/stories/addon-controls.stories.tsx +++ b/examples/official-storybook/stories/addon-controls.stories.tsx @@ -20,24 +20,6 @@ export default { control: { type: 'color', presetColors: [ - { color: '#ff4785', title: 'Coral' }, - { color: '#1EA7FD', title: 'Ocean' }, - { color: 'rgb(252, 82, 31)', title: 'Orange' }, - { color: 'RGBA(255, 174, 0, 0.5)', title: 'Gold' }, - { color: 'hsl(101, 52%, 49%)', title: 'Green' }, - { color: 'HSLA(179,65%,53%,0.5)', title: 'Seafoam' }, - { color: '#6F2CAC', title: 'Purple' }, - { color: '#2A0481', title: 'Ultraviolet' }, - { color: 'black' }, - { color: '#333', title: 'Darkest' }, - { color: '#444', title: 'Darker' }, - { color: '#666', title: 'Dark' }, - { color: '#999', title: 'Mediumdark' }, - { color: '#ddd', title: 'Medium' }, - { color: '#EEE', title: 'Mediumlight' }, - { color: '#F3F3F3', title: 'Light' }, - { color: '#F8F8F8', title: 'Lighter' }, - { color: '#FFFFFF', title: 'Lightest' }, '#fe4a49', '#FED766', 'rgba(0, 159, 183, 1)', diff --git a/examples/preact-kitchen-sink/package.json b/examples/preact-kitchen-sink/package.json index 2ad5ea7f4668..04eb1099a955 100644 --- a/examples/preact-kitchen-sink/package.json +++ b/examples/preact-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "preact-example", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "private": true, "scripts": { "build": "cross-env NODE_ENV=production webpack --progress --hide-modules", @@ -15,17 +15,17 @@ "devDependencies": { "@babel/core": "^7.12.10", "@babel/plugin-transform-runtime": "^7.12.10", - "@storybook/addon-a11y": "6.2.0-rc.6", - "@storybook/addon-actions": "6.2.0-rc.6", - "@storybook/addon-backgrounds": "6.2.0-rc.6", - "@storybook/addon-knobs": "6.2.0-rc.6", - "@storybook/addon-links": "6.2.0-rc.6", - "@storybook/addon-storyshots": "6.2.0-rc.6", - "@storybook/addon-storysource": "6.2.0-rc.6", - "@storybook/addon-viewport": "6.2.0-rc.6", - "@storybook/addons": "6.2.0-rc.6", - "@storybook/preact": "6.2.0-rc.6", - "@storybook/source-loader": "6.2.0-rc.6", + "@storybook/addon-a11y": "6.2.0-rc.9", + "@storybook/addon-actions": "6.2.0-rc.9", + "@storybook/addon-backgrounds": "6.2.0-rc.9", + "@storybook/addon-knobs": "6.2.0-rc.9", + "@storybook/addon-links": "6.2.0-rc.9", + "@storybook/addon-storyshots": "6.2.0-rc.9", + "@storybook/addon-storysource": "6.2.0-rc.9", + "@storybook/addon-viewport": "6.2.0-rc.9", + "@storybook/addons": "6.2.0-rc.9", + "@storybook/preact": "6.2.0-rc.9", + "@storybook/source-loader": "6.2.0-rc.9", "babel-loader": "^8.2.2", "cross-env": "^7.0.3", "file-loader": "^6.2.0", diff --git a/examples/rax-kitchen-sink/package.json b/examples/rax-kitchen-sink/package.json index 8f3908ef2c70..6471e5363701 100644 --- a/examples/rax-kitchen-sink/package.json +++ b/examples/rax-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "rax-kitchen-sink", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "private": true, "scripts": { "build": "build-scripts build", @@ -20,20 +20,20 @@ "devDependencies": { "@alib/build-scripts": "^0.1.8", "@babel/preset-react": "^7.12.10", - "@storybook/addon-a11y": "6.2.0-rc.6", - "@storybook/addon-actions": "6.2.0-rc.6", - "@storybook/addon-backgrounds": "6.2.0-rc.6", - "@storybook/addon-events": "6.2.0-rc.6", - "@storybook/addon-jest": "6.2.0-rc.6", - "@storybook/addon-knobs": "6.2.0-rc.6", - "@storybook/addon-links": "6.2.0-rc.6", - "@storybook/addon-storyshots": "6.2.0-rc.6", - "@storybook/addon-storysource": "6.2.0-rc.6", - "@storybook/addon-viewport": "6.2.0-rc.6", - "@storybook/addons": "6.2.0-rc.6", - "@storybook/rax": "6.2.0-rc.6", - "@storybook/source-loader": "6.2.0-rc.6", - "@storybook/theming": "6.2.0-rc.6", + "@storybook/addon-a11y": "6.2.0-rc.9", + "@storybook/addon-actions": "6.2.0-rc.9", + "@storybook/addon-backgrounds": "6.2.0-rc.9", + "@storybook/addon-events": "6.2.0-rc.9", + "@storybook/addon-jest": "6.2.0-rc.9", + "@storybook/addon-knobs": "6.2.0-rc.9", + "@storybook/addon-links": "6.2.0-rc.9", + "@storybook/addon-storyshots": "6.2.0-rc.9", + "@storybook/addon-storysource": "6.2.0-rc.9", + "@storybook/addon-viewport": "6.2.0-rc.9", + "@storybook/addons": "6.2.0-rc.9", + "@storybook/rax": "6.2.0-rc.9", + "@storybook/source-loader": "6.2.0-rc.9", + "@storybook/theming": "6.2.0-rc.9", "babel-eslint": "^10.1.0", "build-plugin-rax-app": "^0.2.0", "stylesheet-loader": "^0.8.0" diff --git a/examples/react-ts-webpack4/package.json b/examples/react-ts-webpack4/package.json index db60f6cc6914..b6e0242cf116 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.2.0-rc.6", + "version": "6.2.0-rc.9", "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.2.0-rc.6", - "@storybook/addon-essentials": "6.2.0-rc.6", - "@storybook/builder-webpack4": "6.2.0-rc.6", - "@storybook/react": "6.2.0-rc.6", + "@storybook/addon-controls": "6.2.0-rc.9", + "@storybook/addon-essentials": "6.2.0-rc.9", + "@storybook/builder-webpack4": "6.2.0-rc.9", + "@storybook/react": "6.2.0-rc.9", "@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 a1f7e85b73be..db0cc66d6c54 100644 --- a/examples/react-ts/package.json +++ b/examples/react-ts/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/example-react-ts", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "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.2.0-rc.6", - "@storybook/addon-essentials": "6.2.0-rc.6", - "@storybook/react": "6.2.0-rc.6", + "@storybook/addon-controls": "6.2.0-rc.9", + "@storybook/addon-essentials": "6.2.0-rc.9", + "@storybook/react": "6.2.0-rc.9", "@types/react": "^16.14.2", "@types/react-dom": "^16.9.10", "prop-types": "15.7.2", diff --git a/examples/riot-kitchen-sink/package.json b/examples/riot-kitchen-sink/package.json index c8d1a6f7ae23..7684c92467ea 100644 --- a/examples/riot-kitchen-sink/package.json +++ b/examples/riot-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "riot-example", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "private": true, "scripts": { "build": "cross-env NODE_ENV=production webpack --progress --hide-modules", @@ -15,17 +15,17 @@ }, "devDependencies": { "@babel/core": "^7.12.10", - "@storybook/addon-a11y": "6.2.0-rc.6", - "@storybook/addon-actions": "6.2.0-rc.6", - "@storybook/addon-backgrounds": "6.2.0-rc.6", - "@storybook/addon-knobs": "6.2.0-rc.6", - "@storybook/addon-links": "6.2.0-rc.6", - "@storybook/addon-storyshots": "6.2.0-rc.6", - "@storybook/addon-storysource": "6.2.0-rc.6", - "@storybook/addon-viewport": "6.2.0-rc.6", - "@storybook/addons": "6.2.0-rc.6", - "@storybook/riot": "6.2.0-rc.6", - "@storybook/source-loader": "6.2.0-rc.6", + "@storybook/addon-a11y": "6.2.0-rc.9", + "@storybook/addon-actions": "6.2.0-rc.9", + "@storybook/addon-backgrounds": "6.2.0-rc.9", + "@storybook/addon-knobs": "6.2.0-rc.9", + "@storybook/addon-links": "6.2.0-rc.9", + "@storybook/addon-storyshots": "6.2.0-rc.9", + "@storybook/addon-storysource": "6.2.0-rc.9", + "@storybook/addon-viewport": "6.2.0-rc.9", + "@storybook/addons": "6.2.0-rc.9", + "@storybook/riot": "6.2.0-rc.9", + "@storybook/source-loader": "6.2.0-rc.9", "babel-loader": "^8.2.2", "cross-env": "^7.0.3", "file-loader": "^6.2.0", diff --git a/examples/server-kitchen-sink/package.json b/examples/server-kitchen-sink/package.json index 4e608041c658..e9c11af796d1 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.2.0-rc.6", + "version": "6.2.0-rc.9", "private": true, "description": "", "keywords": [], @@ -14,13 +14,13 @@ "storybook": "SERVER_PORT=1137 start-storybook -p 9006 --quiet" }, "devDependencies": { - "@storybook/addon-a11y": "6.2.0-rc.6", - "@storybook/addon-actions": "6.2.0-rc.6", - "@storybook/addon-backgrounds": "6.2.0-rc.6", - "@storybook/addon-controls": "6.2.0-rc.6", - "@storybook/addon-links": "6.2.0-rc.6", - "@storybook/node-logger": "6.2.0-rc.6", - "@storybook/server": "6.2.0-rc.6", + "@storybook/addon-a11y": "6.2.0-rc.9", + "@storybook/addon-actions": "6.2.0-rc.9", + "@storybook/addon-backgrounds": "6.2.0-rc.9", + "@storybook/addon-controls": "6.2.0-rc.9", + "@storybook/addon-links": "6.2.0-rc.9", + "@storybook/node-logger": "6.2.0-rc.9", + "@storybook/server": "6.2.0-rc.9", "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 f2eb930afeeb..420333198f98 100644 --- a/examples/standalone-preview/package.json +++ b/examples/standalone-preview/package.json @@ -1,12 +1,12 @@ { "name": "standalone-preview", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "private": true, "scripts": { "storybook": "parcel ./storybook.html --port 1337" }, "devDependencies": { - "@storybook/react": "6.2.0-rc.6", + "@storybook/react": "6.2.0-rc.9", "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 dbafdac295d1..9059f4d15fbc 100644 --- a/examples/svelte-kitchen-sink/package.json +++ b/examples/svelte-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "svelte-example", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "private": true, "scripts": { "build-storybook": "build-storybook -s public", @@ -10,19 +10,19 @@ "global": "^4.4.0" }, "devDependencies": { - "@storybook/addon-a11y": "6.2.0-rc.6", - "@storybook/addon-actions": "6.2.0-rc.6", - "@storybook/addon-backgrounds": "6.2.0-rc.6", - "@storybook/addon-controls": "6.2.0-rc.6", - "@storybook/addon-docs": "6.2.0-rc.6", - "@storybook/addon-knobs": "6.2.0-rc.6", - "@storybook/addon-links": "6.2.0-rc.6", - "@storybook/addon-storyshots": "6.2.0-rc.6", - "@storybook/addon-storysource": "6.2.0-rc.6", - "@storybook/addon-viewport": "6.2.0-rc.6", - "@storybook/addons": "6.2.0-rc.6", - "@storybook/source-loader": "6.2.0-rc.6", - "@storybook/svelte": "6.2.0-rc.6", + "@storybook/addon-a11y": "6.2.0-rc.9", + "@storybook/addon-actions": "6.2.0-rc.9", + "@storybook/addon-backgrounds": "6.2.0-rc.9", + "@storybook/addon-controls": "6.2.0-rc.9", + "@storybook/addon-docs": "6.2.0-rc.9", + "@storybook/addon-knobs": "6.2.0-rc.9", + "@storybook/addon-links": "6.2.0-rc.9", + "@storybook/addon-storyshots": "6.2.0-rc.9", + "@storybook/addon-storysource": "6.2.0-rc.9", + "@storybook/addon-viewport": "6.2.0-rc.9", + "@storybook/addons": "6.2.0-rc.9", + "@storybook/source-loader": "6.2.0-rc.9", + "@storybook/svelte": "6.2.0-rc.9", "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 f2eb4d35444a..9e02a4a0b6f2 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.2.0-rc.6", + "version": "6.2.0-rc.9", "private": true, "scripts": { "build": "vue-cli-service build", @@ -14,11 +14,11 @@ }, "devDependencies": { "@babel/core": "^7.12.10", - "@storybook/addon-actions": "6.2.0-rc.6", - "@storybook/addon-essentials": "6.2.0-rc.6", - "@storybook/addon-links": "6.2.0-rc.6", - "@storybook/addon-storyshots": "6.2.0-rc.6", - "@storybook/vue3": "6.2.0-rc.6", + "@storybook/addon-actions": "6.2.0-rc.9", + "@storybook/addon-essentials": "6.2.0-rc.9", + "@storybook/addon-links": "6.2.0-rc.9", + "@storybook/addon-storyshots": "6.2.0-rc.9", + "@storybook/vue3": "6.2.0-rc.9", "@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 a197b5017405..314f7e37a5df 100644 --- a/examples/vue-cli/package.json +++ b/examples/vue-cli/package.json @@ -1,6 +1,6 @@ { "name": "vue-cli-example", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "private": true, "scripts": { "build": "vue-cli-service build", @@ -15,11 +15,11 @@ "vue-property-decorator": "^9.1.2" }, "devDependencies": { - "@storybook/addon-controls": "6.2.0-rc.6", - "@storybook/addon-essentials": "6.2.0-rc.6", + "@storybook/addon-controls": "6.2.0-rc.9", + "@storybook/addon-essentials": "6.2.0-rc.9", "@storybook/preset-scss": "^1.0.3", - "@storybook/source-loader": "6.2.0-rc.6", - "@storybook/vue": "6.2.0-rc.6", + "@storybook/source-loader": "6.2.0-rc.9", + "@storybook/vue": "6.2.0-rc.9", "@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 b315833a721d..84fe04755d9c 100644 --- a/examples/vue-kitchen-sink/package.json +++ b/examples/vue-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "vue-example", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "private": true, "scripts": { "build": "cross-env NODE_ENV=production webpack --progress --hide-modules", @@ -14,19 +14,19 @@ }, "devDependencies": { "@babel/core": "^7.12.10", - "@storybook/addon-a11y": "6.2.0-rc.6", - "@storybook/addon-actions": "6.2.0-rc.6", - "@storybook/addon-backgrounds": "6.2.0-rc.6", - "@storybook/addon-controls": "6.2.0-rc.6", - "@storybook/addon-docs": "6.2.0-rc.6", - "@storybook/addon-knobs": "6.2.0-rc.6", - "@storybook/addon-links": "6.2.0-rc.6", - "@storybook/addon-storyshots": "6.2.0-rc.6", - "@storybook/addon-storysource": "6.2.0-rc.6", - "@storybook/addon-viewport": "6.2.0-rc.6", - "@storybook/addons": "6.2.0-rc.6", - "@storybook/source-loader": "6.2.0-rc.6", - "@storybook/vue": "6.2.0-rc.6", + "@storybook/addon-a11y": "6.2.0-rc.9", + "@storybook/addon-actions": "6.2.0-rc.9", + "@storybook/addon-backgrounds": "6.2.0-rc.9", + "@storybook/addon-controls": "6.2.0-rc.9", + "@storybook/addon-docs": "6.2.0-rc.9", + "@storybook/addon-knobs": "6.2.0-rc.9", + "@storybook/addon-links": "6.2.0-rc.9", + "@storybook/addon-storyshots": "6.2.0-rc.9", + "@storybook/addon-storysource": "6.2.0-rc.9", + "@storybook/addon-viewport": "6.2.0-rc.9", + "@storybook/addons": "6.2.0-rc.9", + "@storybook/source-loader": "6.2.0-rc.9", + "@storybook/vue": "6.2.0-rc.9", "@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 8c2ad6a8e23b..f0b1f3070db3 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.2.0-rc.6", + "version": "6.2.0-rc.9", "private": true, "description": "", "keywords": [], @@ -12,24 +12,24 @@ "storybook": "start-storybook -p 9006" }, "devDependencies": { - "@storybook/addon-a11y": "6.2.0-rc.6", - "@storybook/addon-actions": "6.2.0-rc.6", - "@storybook/addon-backgrounds": "6.2.0-rc.6", - "@storybook/addon-controls": "6.2.0-rc.6", - "@storybook/addon-docs": "6.2.0-rc.6", - "@storybook/addon-events": "6.2.0-rc.6", - "@storybook/addon-jest": "6.2.0-rc.6", - "@storybook/addon-knobs": "6.2.0-rc.6", - "@storybook/addon-links": "6.2.0-rc.6", - "@storybook/addon-storyshots": "6.2.0-rc.6", - "@storybook/addon-storysource": "6.2.0-rc.6", - "@storybook/addon-viewport": "6.2.0-rc.6", - "@storybook/addons": "6.2.0-rc.6", - "@storybook/client-api": "6.2.0-rc.6", - "@storybook/core": "6.2.0-rc.6", - "@storybook/core-events": "6.2.0-rc.6", - "@storybook/source-loader": "6.2.0-rc.6", - "@storybook/web-components": "6.2.0-rc.6", + "@storybook/addon-a11y": "6.2.0-rc.9", + "@storybook/addon-actions": "6.2.0-rc.9", + "@storybook/addon-backgrounds": "6.2.0-rc.9", + "@storybook/addon-controls": "6.2.0-rc.9", + "@storybook/addon-docs": "6.2.0-rc.9", + "@storybook/addon-events": "6.2.0-rc.9", + "@storybook/addon-jest": "6.2.0-rc.9", + "@storybook/addon-knobs": "6.2.0-rc.9", + "@storybook/addon-links": "6.2.0-rc.9", + "@storybook/addon-storyshots": "6.2.0-rc.9", + "@storybook/addon-storysource": "6.2.0-rc.9", + "@storybook/addon-viewport": "6.2.0-rc.9", + "@storybook/addons": "6.2.0-rc.9", + "@storybook/client-api": "6.2.0-rc.9", + "@storybook/core": "6.2.0-rc.9", + "@storybook/core-events": "6.2.0-rc.9", + "@storybook/source-loader": "6.2.0-rc.9", + "@storybook/web-components": "6.2.0-rc.9", "babel-loader": "^8.2.2", "eventemitter3": "^4.0.7", "format-json": "^1.0.3", diff --git a/lerna.json b/lerna.json index f232d32f5ce5..be9c3ae9ae6c 100644 --- a/lerna.json +++ b/lerna.json @@ -2,5 +2,5 @@ "npmClient": "yarn", "useWorkspaces": true, "registry": "https://registry.npmjs.org", - "version": "6.2.0-rc.6" + "version": "6.2.0-rc.9" } diff --git a/lib/addons/package.json b/lib/addons/package.json index d7bf8070b6f4..c3de4a2788cb 100644 --- a/lib/addons/package.json +++ b/lib/addons/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addons", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "description": "Storybook addons store", "keywords": [ "storybook" @@ -36,12 +36,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/api": "6.2.0-rc.6", - "@storybook/channels": "6.2.0-rc.6", - "@storybook/client-logger": "6.2.0-rc.6", - "@storybook/core-events": "6.2.0-rc.6", - "@storybook/router": "6.2.0-rc.6", - "@storybook/theming": "6.2.0-rc.6", + "@storybook/api": "6.2.0-rc.9", + "@storybook/channels": "6.2.0-rc.9", + "@storybook/client-logger": "6.2.0-rc.9", + "@storybook/core-events": "6.2.0-rc.9", + "@storybook/router": "6.2.0-rc.9", + "@storybook/theming": "6.2.0-rc.9", "core-js": "^3.8.2", "global": "^4.4.0", "regenerator-runtime": "^0.13.7" @@ -53,5 +53,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "9140a2884503b405d457268fd9ffd8d2438013af" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/lib/api/package.json b/lib/api/package.json index 147be9046ced..c9955b691204 100644 --- a/lib/api/package.json +++ b/lib/api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/api", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "description": "Core Storybook API & Context", "keywords": [ "storybook" @@ -35,20 +35,20 @@ }, "dependencies": { "@reach/router": "^1.3.4", - "@storybook/channels": "6.2.0-rc.6", - "@storybook/client-logger": "6.2.0-rc.6", - "@storybook/core-events": "6.2.0-rc.6", + "@storybook/channels": "6.2.0-rc.9", + "@storybook/client-logger": "6.2.0-rc.9", + "@storybook/core-events": "6.2.0-rc.9", "@storybook/csf": "0.0.1", - "@storybook/router": "6.2.0-rc.6", + "@storybook/router": "6.2.0-rc.9", "@storybook/semver": "^7.3.2", - "@storybook/theming": "6.2.0-rc.6", + "@storybook/theming": "6.2.0-rc.9", "@types/reach__router": "^1.3.7", "core-js": "^3.8.2", "fast-deep-equal": "^3.1.3", "global": "^4.4.0", "lodash": "^4.17.20", "memoizerific": "^1.11.3", - "qs": "^6.9.5", + "qs": "^6.10.0", "regenerator-runtime": "^0.13.7", "store2": "^2.12.0", "telejson": "^5.1.0", @@ -68,5 +68,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "9140a2884503b405d457268fd9ffd8d2438013af" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/lib/api/src/index.tsx b/lib/api/src/index.tsx index 7d87b0ea708f..98253b2aad0f 100644 --- a/lib/api/src/index.tsx +++ b/lib/api/src/index.tsx @@ -4,6 +4,7 @@ import React, { FunctionComponent, ReactElement, ReactNode, + useCallback, useContext, useEffect, useMemo, @@ -437,12 +438,16 @@ export function useArgs(): [Args, (newArgs: Args) => void, (argNames?: string[]) const data = getCurrentStoryData(); const args = isStory(data) ? data.args : {}; - - return [ - args, - (newArgs: Args) => updateStoryArgs(data as Story, newArgs), - (argNames?: string[]) => resetStoryArgs(data as Story, argNames), - ]; + const updateArgs = useCallback((newArgs: Args) => updateStoryArgs(data as Story, newArgs), [ + data, + updateStoryArgs, + ]); + const resetArgs = useCallback((argNames?: string[]) => resetStoryArgs(data as Story, argNames), [ + data, + resetStoryArgs, + ]); + + return [args, updateArgs, resetArgs]; } export function useGlobals(): [Args, (newGlobals: Args) => void] { diff --git a/lib/api/src/version.ts b/lib/api/src/version.ts index 3e6ca70dafe7..809b1856d92c 100644 --- a/lib/api/src/version.ts +++ b/lib/api/src/version.ts @@ -1 +1 @@ -export const version = '6.2.0-rc.6'; +export const version = '6.2.0-rc.9'; diff --git a/lib/builder-webpack4/package.json b/lib/builder-webpack4/package.json index 97249d652560..68d20750b696 100644 --- a/lib/builder-webpack4/package.json +++ b/lib/builder-webpack4/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack4", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -57,20 +57,20 @@ "@babel/preset-env": "^7.12.11", "@babel/preset-react": "^7.12.10", "@babel/preset-typescript": "^7.12.7", - "@storybook/addons": "6.2.0-rc.6", - "@storybook/api": "6.2.0-rc.6", - "@storybook/channel-postmessage": "6.2.0-rc.6", - "@storybook/channels": "6.2.0-rc.6", - "@storybook/client-api": "6.2.0-rc.6", - "@storybook/client-logger": "6.2.0-rc.6", - "@storybook/components": "6.2.0-rc.6", - "@storybook/core-common": "6.2.0-rc.6", - "@storybook/core-events": "6.2.0-rc.6", - "@storybook/node-logger": "6.2.0-rc.6", - "@storybook/router": "6.2.0-rc.6", + "@storybook/addons": "6.2.0-rc.9", + "@storybook/api": "6.2.0-rc.9", + "@storybook/channel-postmessage": "6.2.0-rc.9", + "@storybook/channels": "6.2.0-rc.9", + "@storybook/client-api": "6.2.0-rc.9", + "@storybook/client-logger": "6.2.0-rc.9", + "@storybook/components": "6.2.0-rc.9", + "@storybook/core-common": "6.2.0-rc.9", + "@storybook/core-events": "6.2.0-rc.9", + "@storybook/node-logger": "6.2.0-rc.9", + "@storybook/router": "6.2.0-rc.9", "@storybook/semver": "^7.3.2", - "@storybook/theming": "6.2.0-rc.6", - "@storybook/ui": "6.2.0-rc.6", + "@storybook/theming": "6.2.0-rc.9", + "@storybook/ui": "6.2.0-rc.9", "@types/node": "^14.0.10", "@types/webpack": "^4.41.26", "autoprefixer": "^9.8.6", @@ -128,5 +128,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "9140a2884503b405d457268fd9ffd8d2438013af" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/lib/builder-webpack4/src/preview/base-webpack.config.ts b/lib/builder-webpack4/src/preview/base-webpack.config.ts index 94ba8c331729..72be4d951194 100644 --- a/lib/builder-webpack4/src/preview/base-webpack.config.ts +++ b/lib/builder-webpack4/src/preview/base-webpack.config.ts @@ -4,6 +4,7 @@ import path from 'path'; import { logger } from '@storybook/node-logger'; import deprecate from 'util-deprecate'; import dedent from 'ts-dedent'; +import type { BuilderOptions } from '@storybook/core-common'; const warnImplicitPostcssPlugins = deprecate( () => ({ @@ -96,6 +97,8 @@ export async function createDefaultWebpackConfig( }; } + const isProd = storybookBaseConfig.mode !== 'development'; + return { ...storybookBaseConfig, module: { @@ -107,7 +110,9 @@ export async function createDefaultWebpackConfig( test: /\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/, loader: require.resolve('file-loader'), options: { - name: 'static/media/[name].[hash:8].[ext]', + name: isProd + ? 'static/media/[name].[contenthash:8].[ext]' + : 'static/media/[path][name].[ext]', }, }, { @@ -115,7 +120,9 @@ export async function createDefaultWebpackConfig( loader: require.resolve('url-loader'), options: { limit: 10000, - name: 'static/media/[name].[hash:8].[ext]', + name: isProd + ? 'static/media/[name].[contenthash:8].[ext]' + : 'static/media/[path][name].[ext]', }, }, ], diff --git a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts index d5ddd5a424fc..cc40f83915c5 100644 --- a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts +++ b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts @@ -124,13 +124,13 @@ export default async ({ // stats: 'errors-only', output: { path: path.resolve(process.cwd(), outputDir), - filename: '[name].[hash].bundle.js', + filename: isProd ? '[name].[contenthash:8].iframe.bundle.js' : '[name].iframe.bundle.js', publicPath: '', }, - // watchOptions: { - // aggregateTimeout: 10, - // ignored: /node_modules/, - // }, + watchOptions: { + aggregateTimeout: 10, + ignored: /node_modules/, + }, plugins: [ new FilterWarningsPlugin({ exclude: /export '\S+' was not found in 'global'/, diff --git a/lib/builder-webpack5/package.json b/lib/builder-webpack5/package.json index e3f4c5dd50ba..c1ea13a32d0c 100644 --- a/lib/builder-webpack5/package.json +++ b/lib/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -56,19 +56,19 @@ "@babel/preset-env": "^7.12.11", "@babel/preset-react": "^7.12.10", "@babel/preset-typescript": "^7.12.7", - "@storybook/addons": "6.2.0-rc.6", - "@storybook/api": "6.2.0-rc.6", - "@storybook/channel-postmessage": "6.2.0-rc.6", - "@storybook/channels": "6.2.0-rc.6", - "@storybook/client-api": "6.2.0-rc.6", - "@storybook/client-logger": "6.2.0-rc.6", - "@storybook/components": "6.2.0-rc.6", - "@storybook/core-common": "6.2.0-rc.6", - "@storybook/core-events": "6.2.0-rc.6", - "@storybook/node-logger": "6.2.0-rc.6", - "@storybook/router": "6.2.0-rc.6", + "@storybook/addons": "6.2.0-rc.9", + "@storybook/api": "6.2.0-rc.9", + "@storybook/channel-postmessage": "6.2.0-rc.9", + "@storybook/channels": "6.2.0-rc.9", + "@storybook/client-api": "6.2.0-rc.9", + "@storybook/client-logger": "6.2.0-rc.9", + "@storybook/components": "6.2.0-rc.9", + "@storybook/core-common": "6.2.0-rc.9", + "@storybook/core-events": "6.2.0-rc.9", + "@storybook/node-logger": "6.2.0-rc.9", + "@storybook/router": "6.2.0-rc.9", "@storybook/semver": "^7.3.2", - "@storybook/theming": "6.2.0-rc.6", + "@storybook/theming": "6.2.0-rc.9", "@types/node": "^14.0.10", "babel-loader": "^8.2.2", "babel-plugin-macros": "^3.0.1", @@ -94,7 +94,6 @@ "util-deprecate": "^1.0.2", "webpack": "^5.9.0", "webpack-dev-middleware": "^4.1.0", - "webpack-filter-warnings-plugin": "^1.2.1", "webpack-hot-middleware": "^2.25.0", "webpack-virtual-modules": "^0.4.1" }, @@ -119,5 +118,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "9140a2884503b405d457268fd9ffd8d2438013af" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/lib/builder-webpack5/src/preview/base-webpack.config.ts b/lib/builder-webpack5/src/preview/base-webpack.config.ts index 350a386c2fe4..dc03b52acfaf 100644 --- a/lib/builder-webpack5/src/preview/base-webpack.config.ts +++ b/lib/builder-webpack5/src/preview/base-webpack.config.ts @@ -1,5 +1,5 @@ import { logger } from '@storybook/node-logger'; -import type { Options } from '@storybook/core-common'; +import type { Options, BuilderOptions } from '@storybook/core-common'; import type { Configuration } from 'webpack'; export async function createDefaultWebpackConfig( @@ -42,6 +42,8 @@ export async function createDefaultWebpackConfig( }; } + const isProd = storybookBaseConfig.mode !== 'development'; + return { ...storybookBaseConfig, module: { @@ -53,7 +55,9 @@ export async function createDefaultWebpackConfig( test: /\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/, loader: require.resolve('file-loader'), options: { - name: 'static/media/[name].[contenthash:8].[ext]', + name: isProd + ? 'static/media/[name].[contenthash:8].[ext]' + : 'static/media/[path][name].[ext]', }, }, { @@ -61,7 +65,9 @@ export async function createDefaultWebpackConfig( loader: require.resolve('url-loader'), options: { limit: 10000, - name: 'static/media/[name].[contenthash:8].[ext]', + name: isProd + ? 'static/media/[name].[contenthash:8].[ext]' + : 'static/media/[path][name].[ext]', }, }, ], diff --git a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts index 97c55739f9f5..1d16ef2f7464 100644 --- a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -9,8 +9,6 @@ import TerserWebpackPlugin from 'terser-webpack-plugin'; import VirtualModulePlugin from 'webpack-virtual-modules'; import PnpWebpackPlugin from 'pnp-webpack-plugin'; import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; -// @ts-ignore -import FilterWarningsPlugin from 'webpack-filter-warnings-plugin'; import themingPaths from '@storybook/theming/paths'; @@ -121,7 +119,7 @@ export default async ({ entry: entries, output: { path: path.resolve(process.cwd(), outputDir), - filename: '[name].[hash].bundle.js', + filename: isProd ? '[name].[contenthash:8].iframe.bundle.js' : '[name].iframe.bundle.js', publicPath: '', }, stats: { @@ -132,13 +130,15 @@ export default async ({ aggregateTimeout: 10, ignored: /node_modules/, }, + ignoreWarnings: [ + { + message: /export '\S+' was not found in 'global'/, + }, + ], plugins: [ - new FilterWarningsPlugin({ - exclude: /export '\S+' was not found in 'global'/, - }), Object.keys(virtualModuleMapping).length > 0 ? new VirtualModulePlugin(virtualModuleMapping) - : null, + : (null as any), new HtmlWebpackPlugin({ filename: `iframe.html`, // FIXME: `none` isn't a known option diff --git a/lib/channel-postmessage/package.json b/lib/channel-postmessage/package.json index a9216ba92c8b..da8ae40adfb7 100644 --- a/lib/channel-postmessage/package.json +++ b/lib/channel-postmessage/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channel-postmessage", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "description": "", "keywords": [ "storybook" @@ -36,16 +36,16 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/channels": "6.2.0-rc.6", - "@storybook/client-logger": "6.2.0-rc.6", - "@storybook/core-events": "6.2.0-rc.6", + "@storybook/channels": "6.2.0-rc.9", + "@storybook/client-logger": "6.2.0-rc.9", + "@storybook/core-events": "6.2.0-rc.9", "core-js": "^3.8.2", "global": "^4.4.0", - "qs": "^6.9.5", + "qs": "^6.10.0", "telejson": "^5.1.0" }, "publishConfig": { "access": "public" }, - "gitHead": "9140a2884503b405d457268fd9ffd8d2438013af" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/lib/channel-websocket/package.json b/lib/channel-websocket/package.json index f092f1c2f9bf..1f29358b35c6 100644 --- a/lib/channel-websocket/package.json +++ b/lib/channel-websocket/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channel-websocket", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "description": "", "keywords": [ "storybook" @@ -36,7 +36,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/channels": "6.2.0-rc.6", + "@storybook/channels": "6.2.0-rc.9", "core-js": "^3.8.2", "global": "^4.4.0", "telejson": "^5.1.0" @@ -44,5 +44,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "9140a2884503b405d457268fd9ffd8d2438013af" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/lib/channels/package.json b/lib/channels/package.json index 02c3e87b3885..61a4b0194620 100644 --- a/lib/channels/package.json +++ b/lib/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "description": "", "keywords": [ "storybook" @@ -43,5 +43,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "9140a2884503b405d457268fd9ffd8d2438013af" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/lib/cli-sb/package.json b/lib/cli-sb/package.json index 5b40c0f94a8d..507e20bcda63 100644 --- a/lib/cli-sb/package.json +++ b/lib/cli-sb/package.json @@ -1,6 +1,6 @@ { "name": "sb", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "description": "Storybook CLI", "keywords": [ "storybook" @@ -22,10 +22,10 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/cli": "6.2.0-rc.6" + "@storybook/cli": "6.2.0-rc.9" }, "publishConfig": { "access": "public" }, - "gitHead": "9140a2884503b405d457268fd9ffd8d2438013af" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/lib/cli-storybook/package.json b/lib/cli-storybook/package.json index 0a3a7b2645ef..b53237a23720 100644 --- a/lib/cli-storybook/package.json +++ b/lib/cli-storybook/package.json @@ -1,6 +1,6 @@ { "name": "storybook", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "description": "Storybook CLI", "keywords": [ "storybook" @@ -23,10 +23,10 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/cli": "6.2.0-rc.6" + "@storybook/cli": "6.2.0-rc.9" }, "publishConfig": { "access": "public" }, - "gitHead": "9140a2884503b405d457268fd9ffd8d2438013af" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/lib/cli/package.json b/lib/cli/package.json index ab381bc79346..531fe4a570a9 100644 --- a/lib/cli/package.json +++ b/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "description": "Storybook's CLI - easiest method of adding storybook to your projects", "keywords": [ "cli", @@ -45,8 +45,8 @@ "dependencies": { "@babel/core": "^7.12.10", "@babel/preset-env": "^7.12.11", - "@storybook/codemod": "6.2.0-rc.6", - "@storybook/node-logger": "6.2.0-rc.6", + "@storybook/codemod": "6.2.0-rc.9", + "@storybook/node-logger": "6.2.0-rc.9", "@storybook/semver": "^7.3.2", "chalk": "^4.1.0", "commander": "^6.2.1", @@ -70,7 +70,7 @@ "update-notifier": "^5.0.1" }, "devDependencies": { - "@storybook/client-api": "6.2.0-rc.6", + "@storybook/client-api": "6.2.0-rc.9", "@types/cross-spawn": "^6.0.2", "@types/inquirer": "^7.3.1", "@types/prompts": "^2.0.9", @@ -87,5 +87,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "9140a2884503b405d457268fd9ffd8d2438013af" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/lib/cli/src/versions.json b/lib/cli/src/versions.json index 0bac5c0e3818..5e795f23ada5 100644 --- a/lib/cli/src/versions.json +++ b/lib/cli/src/versions.json @@ -1,61 +1,61 @@ { - "@storybook/addon-a11y": "6.2.0-rc.5", - "@storybook/addon-actions": "6.2.0-rc.5", - "@storybook/addon-backgrounds": "6.2.0-rc.5", - "@storybook/addon-controls": "6.2.0-rc.5", - "@storybook/addon-cssresources": "6.2.0-rc.5", - "@storybook/addon-design-assets": "6.2.0-rc.5", - "@storybook/addon-docs": "6.2.0-rc.5", - "@storybook/addon-essentials": "6.2.0-rc.5", - "@storybook/addon-events": "6.2.0-rc.5", - "@storybook/addon-google-analytics": "6.2.0-rc.5", - "@storybook/addon-graphql": "6.2.0-rc.5", - "@storybook/addon-jest": "6.2.0-rc.5", - "@storybook/addon-knobs": "6.2.0-rc.5", - "@storybook/addon-links": "6.2.0-rc.5", - "@storybook/addon-queryparams": "6.2.0-rc.5", - "@storybook/addon-storyshots": "6.2.0-rc.5", - "@storybook/addon-storyshots-puppeteer": "6.2.0-rc.5", - "@storybook/addon-storysource": "6.2.0-rc.5", - "@storybook/addon-toolbars": "6.2.0-rc.5", - "@storybook/addon-viewport": "6.2.0-rc.5", - "@storybook/addons": "6.2.0-rc.5", - "@storybook/angular": "6.2.0-rc.5", - "@storybook/api": "6.2.0-rc.5", - "@storybook/aurelia": "6.2.0-rc.5", - "@storybook/builder-webpack4": "6.2.0-rc.5", - "@storybook/builder-webpack5": "6.2.0-rc.5", - "@storybook/channel-postmessage": "6.2.0-rc.5", - "@storybook/channel-websocket": "6.2.0-rc.5", - "@storybook/channels": "6.2.0-rc.5", - "@storybook/cli": "6.2.0-rc.5", - "@storybook/client-api": "6.2.0-rc.5", - "@storybook/client-logger": "6.2.0-rc.5", - "@storybook/codemod": "6.2.0-rc.5", - "@storybook/components": "6.2.0-rc.5", - "@storybook/core": "6.2.0-rc.5", - "@storybook/core-client": "6.2.0-rc.5", - "@storybook/core-common": "6.2.0-rc.5", - "@storybook/core-events": "6.2.0-rc.5", - "@storybook/core-server": "6.2.0-rc.5", - "@storybook/ember": "6.2.0-rc.5", - "@storybook/html": "6.2.0-rc.5", - "@storybook/marionette": "6.2.0-rc.5", - "@storybook/marko": "6.2.0-rc.5", - "@storybook/mithril": "6.2.0-rc.5", - "@storybook/node-logger": "6.2.0-rc.5", - "@storybook/postinstall": "6.2.0-rc.5", - "@storybook/preact": "6.2.0-rc.5", - "@storybook/rax": "6.2.0-rc.5", - "@storybook/react": "6.2.0-rc.5", - "@storybook/riot": "6.2.0-rc.5", - "@storybook/router": "6.2.0-rc.5", - "@storybook/server": "6.2.0-rc.5", - "@storybook/source-loader": "6.2.0-rc.5", - "@storybook/svelte": "6.2.0-rc.5", - "@storybook/theming": "6.2.0-rc.5", - "@storybook/ui": "6.2.0-rc.5", - "@storybook/vue": "6.2.0-rc.5", - "@storybook/vue3": "6.2.0-rc.5", - "@storybook/web-components": "6.2.0-rc.5" + "@storybook/addon-a11y": "6.2.0-rc.8", + "@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-cssresources": "6.2.0-rc.8", + "@storybook/addon-design-assets": "6.2.0-rc.8", + "@storybook/addon-docs": "6.2.0-rc.8", + "@storybook/addon-essentials": "6.2.0-rc.8", + "@storybook/addon-events": "6.2.0-rc.8", + "@storybook/addon-google-analytics": "6.2.0-rc.8", + "@storybook/addon-graphql": "6.2.0-rc.8", + "@storybook/addon-jest": "6.2.0-rc.8", + "@storybook/addon-knobs": "6.2.0-rc.8", + "@storybook/addon-links": "6.2.0-rc.8", + "@storybook/addon-queryparams": "6.2.0-rc.8", + "@storybook/addon-storyshots": "6.2.0-rc.8", + "@storybook/addon-storyshots-puppeteer": "6.2.0-rc.8", + "@storybook/addon-storysource": "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/angular": "6.2.0-rc.8", + "@storybook/api": "6.2.0-rc.8", + "@storybook/aurelia": "6.2.0-rc.8", + "@storybook/builder-webpack4": "6.2.0-rc.8", + "@storybook/builder-webpack5": "6.2.0-rc.8", + "@storybook/channel-postmessage": "6.2.0-rc.8", + "@storybook/channel-websocket": "6.2.0-rc.8", + "@storybook/channels": "6.2.0-rc.8", + "@storybook/cli": "6.2.0-rc.8", + "@storybook/client-api": "6.2.0-rc.8", + "@storybook/client-logger": "6.2.0-rc.8", + "@storybook/codemod": "6.2.0-rc.8", + "@storybook/components": "6.2.0-rc.8", + "@storybook/core": "6.2.0-rc.8", + "@storybook/core-client": "6.2.0-rc.8", + "@storybook/core-common": "6.2.0-rc.8", + "@storybook/core-events": "6.2.0-rc.8", + "@storybook/core-server": "6.2.0-rc.8", + "@storybook/ember": "6.2.0-rc.8", + "@storybook/html": "6.2.0-rc.8", + "@storybook/marionette": "6.2.0-rc.8", + "@storybook/marko": "6.2.0-rc.8", + "@storybook/mithril": "6.2.0-rc.8", + "@storybook/node-logger": "6.2.0-rc.8", + "@storybook/postinstall": "6.2.0-rc.8", + "@storybook/preact": "6.2.0-rc.8", + "@storybook/rax": "6.2.0-rc.8", + "@storybook/react": "6.2.0-rc.8", + "@storybook/riot": "6.2.0-rc.8", + "@storybook/router": "6.2.0-rc.8", + "@storybook/server": "6.2.0-rc.8", + "@storybook/source-loader": "6.2.0-rc.8", + "@storybook/svelte": "6.2.0-rc.8", + "@storybook/theming": "6.2.0-rc.8", + "@storybook/ui": "6.2.0-rc.8", + "@storybook/vue": "6.2.0-rc.8", + "@storybook/vue3": "6.2.0-rc.8", + "@storybook/web-components": "6.2.0-rc.8" } diff --git a/lib/client-api/package.json b/lib/client-api/package.json index 87cf34d821f4..03c0d0d5a47f 100644 --- a/lib/client-api/package.json +++ b/lib/client-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-api", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "description": "Storybook Client API", "keywords": [ "storybook" @@ -36,11 +36,11 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.2.0-rc.6", - "@storybook/channel-postmessage": "6.2.0-rc.6", - "@storybook/channels": "6.2.0-rc.6", - "@storybook/client-logger": "6.2.0-rc.6", - "@storybook/core-events": "6.2.0-rc.6", + "@storybook/addons": "6.2.0-rc.9", + "@storybook/channel-postmessage": "6.2.0-rc.9", + "@storybook/channels": "6.2.0-rc.9", + "@storybook/client-logger": "6.2.0-rc.9", + "@storybook/core-events": "6.2.0-rc.9", "@storybook/csf": "0.0.1", "@types/qs": "^6.9.5", "@types/webpack-env": "^1.16.0", @@ -48,7 +48,7 @@ "global": "^4.4.0", "lodash": "^4.17.20", "memoizerific": "^1.11.3", - "qs": "^6.9.5", + "qs": "^6.10.0", "regenerator-runtime": "^0.13.7", "stable": "^0.1.8", "store2": "^2.12.0", @@ -62,5 +62,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "9140a2884503b405d457268fd9ffd8d2438013af" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/lib/client-api/src/args.test.ts b/lib/client-api/src/args.test.ts index f0831e630e92..559a8783d5a0 100644 --- a/lib/client-api/src/args.test.ts +++ b/lib/client-api/src/args.test.ts @@ -4,39 +4,86 @@ import { combineArgs, mapArgsToTypes, validateOptions } from './args'; const stringType = { name: 'string' }; const numberType = { name: 'number' }; const booleanType = { name: 'boolean' }; +const enumType = { name: 'enum' }; const functionType = { name: 'function' }; const numArrayType = { name: 'array', value: numberType }; const boolObjectType = { name: 'object', value: { bool: booleanType } }; jest.mock('@storybook/client-logger'); +enum ArgsMapTestEnumWithoutInitializer { + EnumValue, + EnumValue2, +} + +enum ArgsMapTestEnumWithStringInitializer { + EnumValue = 'EnumValue', +} + +enum ArgsMapTestEnumWithNumericInitializer { + EnumValue = 4, +} + describe('mapArgsToTypes', () => { it('maps strings', () => { - expect(mapArgsToTypes({ a: 'str' }, { a: { type: stringType } })).toEqual({ a: 'str' }); - expect(mapArgsToTypes({ a: 42 }, { a: { type: stringType } })).toEqual({ a: '42' }); + expect(mapArgsToTypes({ a: 'str' }, { a: { type: stringType } })).toStrictEqual({ a: 'str' }); + expect(mapArgsToTypes({ a: 42 }, { a: { type: stringType } })).toStrictEqual({ a: '42' }); + }); + + it('maps enums', () => { + expect( + mapArgsToTypes({ a: ArgsMapTestEnumWithoutInitializer.EnumValue }, { a: { type: enumType } }) + ).toEqual({ a: 0 }); + expect( + mapArgsToTypes({ a: ArgsMapTestEnumWithoutInitializer.EnumValue2 }, { a: { type: enumType } }) + ).toEqual({ a: 1 }); + expect( + mapArgsToTypes( + { a: ArgsMapTestEnumWithStringInitializer.EnumValue }, + { a: { type: enumType } } + ) + ).toEqual({ a: 'EnumValue' }); + expect( + mapArgsToTypes( + { a: ArgsMapTestEnumWithNumericInitializer.EnumValue }, + { a: { type: enumType } } + ) + ).toEqual({ a: 4 }); }); it('maps numbers', () => { - expect(mapArgsToTypes({ a: '42' }, { a: { type: numberType } })).toEqual({ a: 42 }); - expect(mapArgsToTypes({ a: 'a' }, { a: { type: numberType } })).toEqual({ a: NaN }); + expect(mapArgsToTypes({ a: '42' }, { a: { type: numberType } })).toStrictEqual({ a: 42 }); + expect(mapArgsToTypes({ a: 'a' }, { a: { type: numberType } })).toStrictEqual({ a: NaN }); }); it('maps booleans', () => { - expect(mapArgsToTypes({ a: 'true' }, { a: { type: booleanType } })).toEqual({ a: true }); - expect(mapArgsToTypes({ a: 'false' }, { a: { type: booleanType } })).toEqual({ a: false }); - expect(mapArgsToTypes({ a: 'yes' }, { a: { type: booleanType } })).toEqual({ a: false }); + expect(mapArgsToTypes({ a: 'true' }, { a: { type: booleanType } })).toStrictEqual({ a: true }); + expect(mapArgsToTypes({ a: 'false' }, { a: { type: booleanType } })).toStrictEqual({ + a: false, + }); + expect(mapArgsToTypes({ a: 'yes' }, { a: { type: booleanType } })).toStrictEqual({ a: false }); + }); + + it('maps sparse arrays', () => { + // eslint-disable-next-line no-sparse-arrays + expect(mapArgsToTypes({ a: [, '2', undefined] }, { a: { type: numArrayType } })).toStrictEqual({ + // eslint-disable-next-line no-sparse-arrays + a: [, 2, undefined], + }); }); it('omits functions', () => { - expect(mapArgsToTypes({ a: 'something' }, { a: { type: functionType } })).toEqual({}); + expect(mapArgsToTypes({ a: 'something' }, { a: { type: functionType } })).toStrictEqual({}); }); it('omits unknown keys', () => { - expect(mapArgsToTypes({ a: 'string' }, { b: { type: stringType } })).toEqual({}); + expect(mapArgsToTypes({ a: 'string' }, { b: { type: stringType } })).toStrictEqual({}); }); it('passes through unmodified if no type is specified', () => { - expect(mapArgsToTypes({ a: { b: 1 } }, { a: { type: undefined } })).toEqual({ a: { b: 1 } }); + expect(mapArgsToTypes({ a: { b: 1 } }, { a: { type: undefined } })).toStrictEqual({ + a: { b: 1 }, + }); }); it('deeply maps objects', () => { @@ -60,7 +107,7 @@ describe('mapArgsToTypes', () => { }, } ) - ).toEqual({ + ).toStrictEqual({ key: { arr: [1, 2], obj: { bool: true }, @@ -94,7 +141,7 @@ describe('mapArgsToTypes', () => { }, } ) - ).toEqual({ + ).toStrictEqual({ key: [ { arr: [1, 2], @@ -110,13 +157,16 @@ describe('combineArgs', () => { expect(combineArgs({ foo: 1 }, { bar: 2 })).toStrictEqual({ foo: 1, bar: 2 }); }); - it('replaces arrays', () => { - expect(combineArgs({ foo: [1, 2] }, { foo: [3] })).toStrictEqual({ foo: [3] }); + it('merges sparse arrays', () => { + // eslint-disable-next-line no-sparse-arrays + expect(combineArgs({ foo: [1, 2, 3] }, { foo: [, 4, undefined] })).toStrictEqual({ + foo: [1, 4], + }); }); it('deeply merges args', () => { expect(combineArgs({ foo: { bar: [1, 2], baz: true } }, { foo: { bar: [3] } })).toStrictEqual({ - foo: { bar: [3], baz: true }, + foo: { bar: [3, 2], baz: true }, }); }); diff --git a/lib/client-api/src/args.ts b/lib/client-api/src/args.ts index b44a52ee2673..f2816057fead 100644 --- a/lib/client-api/src/args.ts +++ b/lib/client-api/src/args.ts @@ -1,6 +1,6 @@ import { Args, ArgTypes } from '@storybook/addons'; import { once } from '@storybook/client-logger'; -import { isPlainObject } from 'lodash'; +import isPlainObject from 'lodash/isPlainObject'; import dedent from 'ts-dedent'; type ValueType = { name: string; value?: ObjectValueType | ValueType }; @@ -12,16 +12,19 @@ const map = (arg: unknown, type: ValueType): any => { switch (type.name) { case 'string': return String(arg); + case 'enum': + return arg; case 'number': return Number(arg); case 'boolean': return arg === 'true'; case 'array': if (!type.value || !Array.isArray(arg)) return INCOMPATIBLE; - return arg.reduce((acc, item) => { + return arg.reduce((acc, item, index) => { const mapped = map(item, type.value as ValueType); - return mapped === INCOMPATIBLE ? acc : acc.concat([mapped]); - }, []); + if (mapped !== INCOMPATIBLE) acc[index] = mapped; + return acc; + }, new Array(arg.length)); case 'object': if (!type.value || typeof arg !== 'object') return INCOMPATIBLE; return Object.entries(arg).reduce((acc, [key, val]) => { @@ -42,6 +45,17 @@ export const mapArgsToTypes = (args: Args, argTypes: ArgTypes): Args => { }; export const combineArgs = (value: any, update: any): Args => { + if (Array.isArray(value) && Array.isArray(update)) { + return update + .reduce( + (acc, upd, index) => { + acc[index] = combineArgs(value[index], update[index]); + return acc; + }, + [...value] + ) + .filter((v: any) => v !== undefined); + } if (!isPlainObject(value) || !isPlainObject(update)) return update; return Object.keys({ ...value, ...update }).reduce((acc, key) => { if (key in update) { diff --git a/lib/client-logger/package.json b/lib/client-logger/package.json index f0b6107913a4..ab4ec2a81787 100644 --- a/lib/client-logger/package.json +++ b/lib/client-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-logger", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "description": "", "keywords": [ "storybook" @@ -42,5 +42,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "9140a2884503b405d457268fd9ffd8d2438013af" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/lib/codemod/package.json b/lib/codemod/package.json index 4926ebf3f914..34ba3ba47007 100644 --- a/lib/codemod/package.json +++ b/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" @@ -39,7 +39,7 @@ "dependencies": { "@mdx-js/mdx": "^1.6.22", "@storybook/csf": "0.0.1", - "@storybook/node-logger": "6.2.0-rc.6", + "@storybook/node-logger": "6.2.0-rc.9", "core-js": "^3.8.2", "cross-spawn": "^7.0.3", "globby": "^11.0.2", @@ -56,5 +56,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "9140a2884503b405d457268fd9ffd8d2438013af" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/lib/components/package.json b/lib/components/package.json index 110812a5ebe1..a0dcf3605bfd 100644 --- a/lib/components/package.json +++ b/lib/components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/components", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "description": "Core Storybook Components", "keywords": [ "storybook" @@ -37,9 +37,9 @@ }, "dependencies": { "@popperjs/core": "^2.6.0", - "@storybook/client-logger": "6.2.0-rc.6", + "@storybook/client-logger": "6.2.0-rc.9", "@storybook/csf": "0.0.1", - "@storybook/theming": "6.2.0-rc.6", + "@storybook/theming": "6.2.0-rc.9", "@types/color-convert": "^2.0.0", "@types/overlayscrollbars": "^1.12.0", "@types/react-syntax-highlighter": "11.0.5", @@ -71,5 +71,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "9140a2884503b405d457268fd9ffd8d2438013af" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/lib/components/src/controls/Color.tsx b/lib/components/src/controls/Color.tsx index a940c56ee9b4..f07ab6a0fef1 100644 --- a/lib/components/src/controls/Color.tsx +++ b/lib/components/src/controls/Color.tsx @@ -1,15 +1,85 @@ -import React, { FC, useCallback, useEffect, useMemo, useState } from 'react'; +import React, { FC, useCallback, useMemo, useState } from 'react'; import { HexColorPicker, HslaStringColorPicker, RgbaStringColorPicker } from 'react-colorful'; import convert from 'color-convert'; import throttle from 'lodash/throttle'; import { styled } from '@storybook/theming'; -import { ControlProps, ColorValue, ColorConfig } from './types'; +import { ControlProps, ColorValue, ColorConfig, PresetColor } from './types'; import { TooltipNote } from '../tooltip/TooltipNote'; import { WithTooltip } from '../tooltip/lazy-WithTooltip'; import { Form } from '../form'; import { Icons } from '../icon/icon'; +const Wrapper = styled.div({ + position: 'relative', + maxWidth: 250, +}); + +const PickerTooltip = styled(WithTooltip)({ + position: 'absolute', + zIndex: 1, + top: 4, + left: 4, +}); + +const TooltipContent = styled.div({ + margin: 5, + + '.react-colorful__saturation': { + borderRadius: '4px 4px 0 0', + }, + '.react-colorful__hue': { + boxShadow: 'inset 0 0 0 1px rgb(0 0 0 / 5%)', + }, + '.react-colorful__last-control': { + borderRadius: '0 0 4px 4px', + }, +}); + +const Swatches = styled.div({ + display: 'grid', + gridTemplateColumns: 'repeat(9, 16px)', + gap: 6, + padding: 3, + marginTop: 5, + width: 200, +}); + +const SwatchColor = styled.div<{ active: boolean }>(({ theme, active }) => ({ + width: 16, + height: 16, + boxShadow: active + ? `${theme.appBorderColor} 0 0 0 1px inset, ${theme.color.mediumdark}50 0 0 0 4px` + : `${theme.appBorderColor} 0 0 0 1px inset`, + borderRadius: theme.appBorderRadius, +})); + +const swatchBackground = `url('data:image/svg+xml;charset=utf-8,')`; + +type SwatchProps = { value: string; active?: boolean; onClick?: () => void; style?: object }; +const Swatch = ({ value, active, onClick, style, ...props }: SwatchProps) => { + const backgroundImage = `linear-gradient(${value}, ${value}), ${swatchBackground}, linear-gradient(#fff, #fff)`; + return ; +}; + +const Input = styled(Form.Input)({ + width: '100%', + paddingLeft: 30, + paddingRight: 30, +}); + +const ToggleIcon = styled(Icons)(({ theme }) => ({ + position: 'absolute', + zIndex: 1, + top: 6, + right: 7, + width: 20, + height: 20, + padding: 4, + cursor: 'pointer', + color: theme.input.color, +})); + enum ColorSpace { RGB = 'rgb', HSL = 'hsl', @@ -25,13 +95,25 @@ const SHORTHEX_REGEXP = /^\s*#?([0-9a-f]{3})\s*$/i; type ParsedColor = { value: string; - title: string; + keyword: string; colorSpace: ColorSpace; [ColorSpace.RGB]: string; [ColorSpace.HSL]: string; [ColorSpace.HEX]: string; }; +const ColorPicker = { + [ColorSpace.HEX]: HexColorPicker, + [ColorSpace.RGB]: RgbaStringColorPicker, + [ColorSpace.HSL]: HslaStringColorPicker, +}; + +const fallbackColor = { + [ColorSpace.HEX]: 'transparent', + [ColorSpace.RGB]: 'rgba(0, 0, 0, 0)', + [ColorSpace.HSL]: 'hsla(0, 0%, 0%, 0)', +}; + const stringToArgs = (value: string) => { const match = value?.match(COLOR_REGEXP); if (!match) return [0, 0, 0, 1]; @@ -39,183 +121,146 @@ const stringToArgs = (value: string) => { return [x, y, z, a].map(Number); }; -const expandShorthand = (value: string) => { - if (!value) return '#000000'; - if (!value.startsWith('#')) { - try { - return `#${convert.keyword.hex(value as any)}`; - } catch (e) { - return value; - } - } - if (value.length > 4) return value; - const match = value.match(SHORTHEX_REGEXP); - if (!match) return value; - const [r, g, b] = match[1].split(''); - return `#${r}${r}${g}${g}${b}${b}`; -}; - -const parseValue = (input: string | { color: string; title?: string }): ParsedColor => { - const { color, title } = typeof input === 'object' ? input : { color: input, title: undefined }; - if (!color) return undefined; +const parseValue = (value: string): ParsedColor => { + if (!value) return undefined; - if (RGB_REGEXP.test(color)) { - const [r, g, b, a] = stringToArgs(color); + if (RGB_REGEXP.test(value)) { + const [r, g, b, a] = stringToArgs(value); const [h, s, l] = convert.rgb.hsl([r, g, b]) || [0, 0, 0]; return { - value: color, - title: title || convert.rgb.keyword([r, g, b]) || color, + value, + keyword: convert.rgb.keyword([r, g, b]), colorSpace: ColorSpace.RGB, - [ColorSpace.RGB]: color, + [ColorSpace.RGB]: value, [ColorSpace.HSL]: `hsla(${h}, ${s}%, ${l}%, ${a})`, - [ColorSpace.HEX]: `#${convert.rgb.hex([r, g, b])}`, + [ColorSpace.HEX]: `#${convert.rgb.hex([r, g, b]).toLowerCase()}`, }; } - if (HSL_REGEXP.test(color)) { - const [h, s, l, a] = stringToArgs(color); + if (HSL_REGEXP.test(value)) { + const [h, s, l, a] = stringToArgs(value); const [r, g, b] = convert.hsl.rgb([h, s, l]) || [0, 0, 0]; return { - value: color, - title: title || convert.rgb.keyword([r, g, b]) || color, + value, + keyword: convert.hsl.keyword([h, s, l]), colorSpace: ColorSpace.HSL, [ColorSpace.RGB]: `rgba(${r}, ${g}, ${b}, ${a})`, - [ColorSpace.HSL]: color, - [ColorSpace.HEX]: `#${convert.hsl.hex([h, s, l])}`, + [ColorSpace.HSL]: value, + [ColorSpace.HEX]: `#${convert.hsl.hex([h, s, l]).toLowerCase()}`, }; } - const plain = color.replace('#', ''); - const fromKeyword = convert.keyword.rgb(plain as any); - const rgb = fromKeyword || convert.hex.rgb(plain as any); + const plain = value.replace('#', ''); + const rgb = convert.keyword.rgb(plain as any) || convert.hex.rgb(plain); const hsl = convert.rgb.hsl(rgb); - let value = color; - if (fromKeyword || /[^#a-f0-9]/.test(color)) value = plain; - else if (HEX_REGEXP.test(color)) value = `#${plain}`; + let mapped = value; + if (/[^#a-f0-9]/i.test(value)) mapped = plain; + else if (HEX_REGEXP.test(value)) mapped = `#${plain}`; return { - value, - title: title || convert.rgb.keyword(rgb) || color, + value: mapped, + keyword: convert.rgb.keyword(rgb), colorSpace: ColorSpace.HEX, [ColorSpace.RGB]: `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 1)`, [ColorSpace.HSL]: `hsla(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%, 1)`, - [ColorSpace.HEX]: value, + [ColorSpace.HEX]: mapped, }; }; -const Wrapper = styled.div({ - position: 'relative', - maxWidth: 250, -}); +const getRealValue = (value: string, color: ParsedColor, colorSpace: ColorSpace) => { + if (!value) return fallbackColor[colorSpace]; + if (colorSpace !== ColorSpace.HEX) return color?.[colorSpace] || fallbackColor[colorSpace]; + if (!color.hex.startsWith('#')) { + try { + return `#${convert.keyword.hex(color.hex as any)}`; + } catch (e) { + return fallbackColor.hex; + } + } + const short = color.hex.match(SHORTHEX_REGEXP); + if (!short) return HEX_REGEXP.test(color.hex) ? color.hex : fallbackColor.hex; + const [r, g, b] = short[1].split(''); + return `#${r}${r}${g}${g}${b}${b}`; +}; -const PickerTooltip = styled(WithTooltip)({ - position: 'absolute', - zIndex: 1, - top: 4, - left: 4, -}); +const useColorInput = (initialValue: string, onChange: (value: string) => string | void) => { + const [value, setValue] = useState(initialValue || ''); + const [color, setColor] = useState(() => parseValue(value)); + const [colorSpace, setColorSpace] = useState(color?.colorSpace || ColorSpace.HEX); -const TooltipContent = styled.div({ - margin: 5, + const realValue = useMemo(() => getRealValue(value, color, colorSpace).toLowerCase(), [ + value, + color, + colorSpace, + ]); - '.react-colorful__saturation': { - borderRadius: '4px 4px 0 0', - }, - '.react-colorful__hue': { - boxShadow: 'inset 0 0 0 1px rgb(0 0 0 / 5%)', - }, - '.react-colorful__last-control': { - borderRadius: '0 0 4px 4px', - }, -}); + const updateValue = useCallback((update: string) => { + const parsed = parseValue(update); + setValue(parsed?.value || update || ''); + if (!parsed) return; + setColor(parsed); + setColorSpace(parsed.colorSpace); + onChange(parsed.value); + }, []); -const Swatches = styled.div({ - display: 'grid', - gridTemplateColumns: 'repeat(9, 15px)', - gap: 7, - padding: 3, - marginTop: 5, - width: 200, -}); + const cycleColorSpace = useCallback(() => { + let next = COLOR_SPACES.indexOf(colorSpace) + 1; + if (next >= COLOR_SPACES.length) next = 0; + setColorSpace(COLOR_SPACES[next]); + const update = color?.[COLOR_SPACES[next]] || ''; + setValue(update); + onChange(update); + }, [color, colorSpace]); -const Swatch = styled.div<{ active?: boolean; round?: boolean }>(({ theme, active, round }) => ({ - width: round ? 16 : 15, - height: round ? 16 : 15, - margin: round ? 4 : 0, - boxShadow: active - ? `${theme.appBorderColor} 0 0 0 1px inset, ${theme.color.mediumdark}55 0 0 0 4px` - : `${theme.appBorderColor} 0 0 0 1px inset`, - borderRadius: round ? 16 : theme.appBorderRadius, - cursor: 'pointer', -})); + return { value, realValue, updateValue, color, colorSpace, cycleColorSpace }; +}; -const Input = styled(Form.Input)({ - width: '100%', - paddingLeft: 30, - paddingRight: 30, -}); +const id = (value: string) => value.replace(/\s*/, '').toLowerCase(); -const ToggleIcon = styled(Icons)(({ theme }) => ({ - position: 'absolute', - zIndex: 1, - top: 6, - right: 7, - width: 20, - height: 20, - padding: 4, - cursor: 'pointer', - color: theme.input.color, -})); +const usePresets = ( + presetColors: PresetColor[], + currentColor: ParsedColor, + colorSpace: ColorSpace +) => { + const [selectedColors, setSelectedColors] = useState(currentColor ? [currentColor] : []); -const SmartPicker: FC<{ value: string; colorSpace: ColorSpace }> = React.memo( - ({ value, colorSpace, ...props }) => { - switch (colorSpace) { - case ColorSpace.RGB: - return ; - case ColorSpace.HSL: - return ; - default: - return ; - } - } -); + const presets = useMemo(() => { + const initialPresets = (presetColors || []).map((preset) => { + if (typeof preset === 'string') return parseValue(preset); + if (preset.title) return { ...parseValue(preset.color), keyword: preset.title }; + return parseValue(preset.color); + }); + return initialPresets.concat(selectedColors).filter(Boolean).slice(-27); + }, [presetColors, selectedColors]); + + const addPreset = useCallback( + (color) => { + if (!color?.[colorSpace]) return; + if (presets.some((preset) => id(preset[colorSpace]) === id(color[colorSpace]))) return; + setSelectedColors((arr) => arr.concat(color)); + }, + [colorSpace, presets] + ); + + return { presets, addPreset }; +}; export type ColorProps = ControlProps & ColorConfig; export const ColorControl: FC = ({ - name, - value, + value: initialValue, onChange, onFocus, onBlur, presetColors, startOpen, }) => { - const color = useMemo(() => parseValue(value), [value]); - const update = useMemo(() => throttle(onChange, 200), []); - const [colorSpace, setColorSpace] = useState(color?.colorSpace || ColorSpace.HEX); - const currentValue = color?.[colorSpace] || ''; - - useEffect(() => { - if (!currentValue) setColorSpace(ColorSpace.HEX); - }, [currentValue]); - - const cycleColorSpace = useCallback(() => { - let next = COLOR_SPACES.indexOf(colorSpace) + 1; - if (next >= COLOR_SPACES.length) next = 0; - setColorSpace(COLOR_SPACES[next]); - }, [colorSpace]); - - const [presets, setPresets] = useState(() => - (presetColors || []).map(parseValue).concat(color).filter(Boolean).slice(0, 27) + const { value, realValue, updateValue, color, colorSpace, cycleColorSpace } = useColorInput( + initialValue, + throttle(onChange, 200) ); - const addPreset = useCallback((preset) => { - setPresets((arr) => - preset?.rgb && arr.every((item) => item.rgb !== preset.rgb) - ? arr.concat(preset).slice(-27) - : arr - ); - }, []); + const { presets, addPreset } = usePresets(presetColors, color, colorSpace); + const Picker = ColorPicker[colorSpace]; return ( @@ -223,25 +268,22 @@ export const ColorControl: FC = ({ trigger="click" startOpen={startOpen} closeOnClick - onVisibilityChange={() => color && addPreset(color)} + onVisibilityChange={() => addPreset(color)} tooltip={ - + {presets.length > 0 && ( {presets.map((preset) => ( } + tooltip={} > onChange(preset[colorSpace])} + value={preset[colorSpace]} + active={color && id(preset[colorSpace]) === id(color[colorSpace])} + onClick={() => updateValue(preset.value)} /> ))} @@ -250,11 +292,11 @@ export const ColorControl: FC = ({ } > - + onChange(e.target.value)} + value={value} + onChange={(e: any) => updateValue(e.target.value)} onFocus={(e) => e.target.select()} placeholder="Choose color" /> diff --git a/lib/components/src/controls/types.ts b/lib/components/src/controls/types.ts index ee80ae69035f..952458266fa1 100644 --- a/lib/components/src/controls/types.ts +++ b/lib/components/src/controls/types.ts @@ -20,8 +20,9 @@ export type BooleanValue = boolean; export interface BooleanConfig {} export type ColorValue = string; +export type PresetColor = ColorValue | { color: ColorValue; title?: string }; export interface ColorConfig { - presetColors?: Array; + presetColors?: PresetColor[]; startOpen?: boolean; } diff --git a/lib/components/src/tooltip/WithTooltip.tsx b/lib/components/src/tooltip/WithTooltip.tsx index 43089780eec2..a3d7bc8a73f2 100644 --- a/lib/components/src/tooltip/WithTooltip.tsx +++ b/lib/components/src/tooltip/WithTooltip.tsx @@ -30,7 +30,7 @@ export interface WithTooltipPureProps { tooltip: ReactNode | ((p: WithHideFn) => ReactNode); children: ReactNode; tooltipShown?: boolean; - onVisibilityChange?: (visibility: boolean) => void; + onVisibilityChange?: (visibility: boolean) => void | boolean; onDoubleClick?: () => void; } @@ -125,8 +125,8 @@ const WithToolTipState: FunctionComponent< const [tooltipShown, setTooltipShown] = useState(startOpen || false); const onVisibilityChange = useCallback( (visibility) => { + if (onChange && onChange(visibility) === false) return; setTooltipShown(visibility); - if (onChange) onChange(visibility); }, [onChange] ); diff --git a/lib/components/src/typography/DocumentFormattingSample.md b/lib/components/src/typography/DocumentFormattingSample.md index fbf3e112bba6..f7706cff5181 100644 --- a/lib/components/src/typography/DocumentFormattingSample.md +++ b/lib/components/src/typography/DocumentFormattingSample.md @@ -32,6 +32,8 @@ _This is italic text_ _This is italic text_ +_**This is bold italic text**_ + ~~Strikethrough~~ ## Blockquotes diff --git a/lib/components/src/typography/DocumentWrapper.stories.tsx b/lib/components/src/typography/DocumentWrapper.stories.tsx index 71acca24008d..18e7b74c463b 100644 --- a/lib/components/src/typography/DocumentWrapper.stories.tsx +++ b/lib/components/src/typography/DocumentWrapper.stories.tsx @@ -42,6 +42,11 @@ export const withDOM = () => (

This is italic text

+

+ + This is bold italic text + +

Strikethrough

diff --git a/lib/core-client/package.json b/lib/core-client/package.json index 6b98f2e8d525..ad4cf7b07b4a 100644 --- a/lib/core-client/package.json +++ b/lib/core-client/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-client", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -36,18 +36,18 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.2.0-rc.6", - "@storybook/channel-postmessage": "6.2.0-rc.6", - "@storybook/client-api": "6.2.0-rc.6", - "@storybook/client-logger": "6.2.0-rc.6", - "@storybook/core-events": "6.2.0-rc.6", + "@storybook/addons": "6.2.0-rc.9", + "@storybook/channel-postmessage": "6.2.0-rc.9", + "@storybook/client-api": "6.2.0-rc.9", + "@storybook/client-logger": "6.2.0-rc.9", + "@storybook/core-events": "6.2.0-rc.9", "@storybook/csf": "0.0.1", - "@storybook/ui": "6.2.0-rc.6", + "@storybook/ui": "6.2.0-rc.9", "ansi-to-html": "^0.6.11", "core-js": "^3.8.2", "global": "^4.4.0", "lodash": "^4.17.20", - "qs": "^6.9.5", + "qs": "^6.10.0", "regenerator-runtime": "^0.13.7", "ts-dedent": "^2.0.0", "unfetch": "^4.2.0", @@ -66,5 +66,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "9140a2884503b405d457268fd9ffd8d2438013af" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/lib/core-client/src/preview/parseArgsParam.test.ts b/lib/core-client/src/preview/parseArgsParam.test.ts index fc4695115741..4208791b7138 100644 --- a/lib/core-client/src/preview/parseArgsParam.test.ts +++ b/lib/core-client/src/preview/parseArgsParam.test.ts @@ -7,188 +7,241 @@ jest.mock('@storybook/client-logger', () => ({ describe('parseArgsParam', () => { it('parses a simple key-value pair', () => { const args = parseArgsParam('key:val'); - expect(args).toEqual({ key: 'val' }); + expect(args).toStrictEqual({ key: 'val' }); }); it('parses spaces', () => { const args = parseArgsParam('key:one+two+three'); - expect(args).toEqual({ key: 'one two three' }); + expect(args).toStrictEqual({ key: 'one two three' }); }); it('parses null', () => { const args = parseArgsParam('key:!null'); - expect(args).toEqual({ key: null }); + expect(args).toStrictEqual({ key: null }); }); it('parses undefined', () => { const args = parseArgsParam('key:!undefined'); - expect(args).toEqual({ key: undefined }); + expect(args).toStrictEqual({ key: undefined }); + }); + + it('parses hex color values', () => { + const args = parseArgsParam('key:!hex(ff4785)'); + expect(args).toStrictEqual({ key: '#ff4785' }); + }); + + it('parses rgba color values', () => { + const args = parseArgsParam('rgb:!rgb(255,71,133);rgba:!rgba(255,71,133,0.5)'); + expect(args).toStrictEqual({ rgb: 'rgb(255, 71, 133)', rgba: 'rgba(255, 71, 133, 0.5)' }); + }); + + it('parses hsla color values', () => { + const args = parseArgsParam('hsl:!hsl(45,99,70);hsla:!hsla(45,99,70,0.5)'); + expect(args).toStrictEqual({ hsl: 'hsl(45, 99%, 70%)', hsla: 'hsla(45, 99%, 70%, 0.5)' }); + }); + + it('parses Date', () => { + const args = parseArgsParam('key:!date(2001-02-03T04:05:06.789Z)'); + expect(args).toStrictEqual({ key: new Date('2001-02-03T04:05:06.789Z') }); + }); + + it('parses Date with timezone offset', () => { + const args = parseArgsParam('key:!date(2001-02-03T04:05:06.789+09:00)'); + expect(args).toStrictEqual({ key: new Date('2001-02-03T04:05:06.789+09:00') }); + }); + + it('parses Date without timezone', () => { + const args = parseArgsParam('key:!date(2001-02-03T04:05:06.789)'); + expect(args).toStrictEqual({ key: expect.any(Date) }); // depends on local timezone + }); + + it('parses Date without second fraction', () => { + const args = parseArgsParam('key:!date(2001-02-03T04:05:06Z)'); + expect(args).toStrictEqual({ key: new Date('2001-02-03T04:05:06.000Z') }); + }); + + it('parses Date without time', () => { + const args = parseArgsParam('key:!date(2001-02-03)'); + expect(args).toStrictEqual({ key: expect.any(Date) }); // depends on local timezone + }); + + it('does not parse Date without prefix', () => { + const args = parseArgsParam('key:2001-02-03T04:05:06.789Z'); + expect(args).toStrictEqual({}); }); it('parses multiple values', () => { const args = parseArgsParam('one:1;two:2;three:3'); - expect(args).toEqual({ one: '1', two: '2', three: '3' }); + expect(args).toStrictEqual({ one: '1', two: '2', three: '3' }); }); it('parses arrays', () => { const args = parseArgsParam('arr[]:1;arr[]:2;arr[]:3'); - expect(args).toEqual({ arr: ['1', '2', '3'] }); + expect(args).toStrictEqual({ arr: ['1', '2', '3'] }); }); it('parses arrays with indices', () => { const args = parseArgsParam('arr[0]:1;arr[1]:2;arr[2]:3'); - expect(args).toEqual({ arr: ['1', '2', '3'] }); + expect(args).toStrictEqual({ arr: ['1', '2', '3'] }); + }); + + it('parses sparse arrays', () => { + const args = parseArgsParam('arr[0]:1;arr[2]:3'); + // eslint-disable-next-line no-sparse-arrays + expect(args).toStrictEqual({ arr: ['1', , '3'] }); }); it('parses repeated values as arrays', () => { const args = parseArgsParam('arr:1;arr:2;arr:3'); - expect(args).toEqual({ arr: ['1', '2', '3'] }); + expect(args).toStrictEqual({ arr: ['1', '2', '3'] }); }); it('parses simple objects', () => { const args = parseArgsParam('obj.one:1;obj.two:2'); - expect(args).toEqual({ obj: { one: '1', two: '2' } }); + expect(args).toStrictEqual({ obj: { one: '1', two: '2' } }); }); it('parses nested objects', () => { const args = parseArgsParam('obj.foo.one:1;obj.foo.two:2;obj.bar.one:1'); - expect(args).toEqual({ obj: { foo: { one: '1', two: '2' }, bar: { one: '1' } } }); + expect(args).toStrictEqual({ obj: { foo: { one: '1', two: '2' }, bar: { one: '1' } } }); }); it('parses arrays in objects', () => { - expect(parseArgsParam('obj.foo[]:1;obj.foo[]:2')).toEqual({ obj: { foo: ['1', '2'] } }); - expect(parseArgsParam('obj.foo[0]:1;obj.foo[1]:2')).toEqual({ obj: { foo: ['1', '2'] } }); - expect(parseArgsParam('obj.foo:1;obj.foo:2')).toEqual({ obj: { foo: ['1', '2'] } }); + expect(parseArgsParam('obj.foo[]:1;obj.foo[]:2')).toStrictEqual({ obj: { foo: ['1', '2'] } }); + expect(parseArgsParam('obj.foo[0]:1;obj.foo[1]:2')).toStrictEqual({ obj: { foo: ['1', '2'] } }); + // eslint-disable-next-line no-sparse-arrays + expect(parseArgsParam('obj.foo[1]:2')).toStrictEqual({ obj: { foo: [, '2'] } }); + expect(parseArgsParam('obj.foo:1;obj.foo:2')).toStrictEqual({ obj: { foo: ['1', '2'] } }); }); it('parses single object in array', () => { const args = parseArgsParam('arr[].one:1;arr[].two:2'); - expect(args).toEqual({ arr: [{ one: '1', two: '2' }] }); + expect(args).toStrictEqual({ arr: [{ one: '1', two: '2' }] }); }); it('parses multiple objects in array', () => { - expect(parseArgsParam('arr[0].key:1;arr[1].key:2')).toEqual({ + expect(parseArgsParam('arr[0].key:1;arr[1].key:2')).toStrictEqual({ arr: [{ key: '1' }, { key: '2' }], }); - expect(parseArgsParam('arr[0][key]:1;arr[1][key]:2')).toEqual({ + expect(parseArgsParam('arr[0][key]:1;arr[1][key]:2')).toStrictEqual({ arr: [{ key: '1' }, { key: '2' }], }); }); it('parses nested object in array', () => { - expect(parseArgsParam('arr[].foo.bar:val')).toEqual({ arr: [{ foo: { bar: 'val' } }] }); - expect(parseArgsParam('arr[][foo][bar]:val')).toEqual({ arr: [{ foo: { bar: 'val' } }] }); + expect(parseArgsParam('arr[].foo.bar:val')).toStrictEqual({ arr: [{ foo: { bar: 'val' } }] }); + expect(parseArgsParam('arr[][foo][bar]:val')).toStrictEqual({ arr: [{ foo: { bar: 'val' } }] }); }); describe('key sanitization', () => { it("omits keys that aren't in the extended alphanumeric set", () => { - expect(parseArgsParam('a`b:val')).toEqual({}); - expect(parseArgsParam('a~b:val')).toEqual({}); - expect(parseArgsParam('a!b:val')).toEqual({}); - expect(parseArgsParam('a@b:val')).toEqual({}); - expect(parseArgsParam('a#b:val')).toEqual({}); - expect(parseArgsParam('a$b:val')).toEqual({}); - expect(parseArgsParam('a%b:val')).toEqual({}); - expect(parseArgsParam('a^b:val')).toEqual({}); - expect(parseArgsParam('a&b:val')).toEqual({}); - expect(parseArgsParam('a*b:val')).toEqual({}); - expect(parseArgsParam('a(b:val')).toEqual({}); - expect(parseArgsParam('a)b:val')).toEqual({}); - expect(parseArgsParam('a=b:val')).toEqual({}); - expect(parseArgsParam('"b":val')).toEqual({}); - expect(parseArgsParam('a/b:val')).toEqual({}); - expect(parseArgsParam('a\\b:val')).toEqual({}); - expect(parseArgsParam('a|b:val')).toEqual({}); - expect(parseArgsParam('a[b:val')).toEqual({}); - expect(parseArgsParam('a]b:val')).toEqual({}); - expect(parseArgsParam('a{b:val')).toEqual({}); - expect(parseArgsParam('a}b:val')).toEqual({}); - expect(parseArgsParam('a?b:val')).toEqual({}); - expect(parseArgsParam('ab:val')).toEqual({}); - expect(parseArgsParam('a,b:val')).toEqual({}); + expect(parseArgsParam('a`b:val')).toStrictEqual({}); + expect(parseArgsParam('a~b:val')).toStrictEqual({}); + expect(parseArgsParam('a!b:val')).toStrictEqual({}); + expect(parseArgsParam('a@b:val')).toStrictEqual({}); + expect(parseArgsParam('a#b:val')).toStrictEqual({}); + expect(parseArgsParam('a$b:val')).toStrictEqual({}); + expect(parseArgsParam('a%b:val')).toStrictEqual({}); + expect(parseArgsParam('a^b:val')).toStrictEqual({}); + expect(parseArgsParam('a&b:val')).toStrictEqual({}); + expect(parseArgsParam('a*b:val')).toStrictEqual({}); + expect(parseArgsParam('a(b:val')).toStrictEqual({}); + expect(parseArgsParam('a)b:val')).toStrictEqual({}); + expect(parseArgsParam('a=b:val')).toStrictEqual({}); + expect(parseArgsParam('"b":val')).toStrictEqual({}); + expect(parseArgsParam('a/b:val')).toStrictEqual({}); + expect(parseArgsParam('a\\b:val')).toStrictEqual({}); + expect(parseArgsParam('a|b:val')).toStrictEqual({}); + expect(parseArgsParam('a[b:val')).toStrictEqual({}); + expect(parseArgsParam('a]b:val')).toStrictEqual({}); + expect(parseArgsParam('a{b:val')).toStrictEqual({}); + expect(parseArgsParam('a}b:val')).toStrictEqual({}); + expect(parseArgsParam('a?b:val')).toStrictEqual({}); + expect(parseArgsParam('ab:val')).toStrictEqual({}); + expect(parseArgsParam('a,b:val')).toStrictEqual({}); }); it('allows keys that are in the extended alphanumeric set', () => { - expect(parseArgsParam(' key :val')).toEqual({ ' key ': 'val' }); - expect(parseArgsParam('+key+:val')).toEqual({ ' key ': 'val' }); - expect(parseArgsParam('-key-:val')).toEqual({ '-key-': 'val' }); - expect(parseArgsParam('_key_:val')).toEqual({ _key_: 'val' }); - expect(parseArgsParam('KEY123:val')).toEqual({ KEY123: 'val' }); - expect(parseArgsParam('1:val')).toEqual({ '1': 'val' }); + expect(parseArgsParam(' key :val')).toStrictEqual({ ' key ': 'val' }); + expect(parseArgsParam('+key+:val')).toStrictEqual({ ' key ': 'val' }); + expect(parseArgsParam('-key-:val')).toStrictEqual({ '-key-': 'val' }); + expect(parseArgsParam('_key_:val')).toStrictEqual({ _key_: 'val' }); + expect(parseArgsParam('KEY123:val')).toStrictEqual({ KEY123: 'val' }); + expect(parseArgsParam('1:val')).toStrictEqual({ '1': 'val' }); }); it('also applies to nested object keys', () => { - expect(parseArgsParam('obj.a!b:val')).toEqual({}); - expect(parseArgsParam('obj[a!b]:val')).toEqual({}); - expect(parseArgsParam('arr[][a!b]:val')).toEqual({}); - expect(parseArgsParam('arr[0][a!b]:val')).toEqual({}); + expect(parseArgsParam('obj.a!b:val')).toStrictEqual({}); + expect(parseArgsParam('obj[a!b]:val')).toStrictEqual({}); + expect(parseArgsParam('arr[][a!b]:val')).toStrictEqual({}); + expect(parseArgsParam('arr[0][a!b]:val')).toStrictEqual({}); }); it('completely omits an arg when a (deeply) nested key is invalid', () => { - expect(parseArgsParam('obj.foo.a!b:val;obj.foo.bar:val;obj.baz:val')).toEqual({}); - expect(parseArgsParam('obj.foo[][a!b]:val;obj.foo.bar:val;obj.baz:val')).toEqual({}); - expect(parseArgsParam('obj.foo.a!b:val;key:val')).toEqual({ key: 'val' }); + expect(parseArgsParam('obj.foo.a!b:val;obj.foo.bar:val;obj.baz:val')).toStrictEqual({}); + expect(parseArgsParam('obj.foo[][a!b]:val;obj.foo.bar:val;obj.baz:val')).toStrictEqual({}); + expect(parseArgsParam('obj.foo.a!b:val;key:val')).toStrictEqual({ key: 'val' }); }); }); describe('value sanitization', () => { it("omits values that aren't in the extended alphanumeric set", () => { - expect(parseArgsParam('key:a`b')).toEqual({}); - expect(parseArgsParam('key:a~b')).toEqual({}); - expect(parseArgsParam('key:a!b')).toEqual({}); - expect(parseArgsParam('key:a@b')).toEqual({}); - expect(parseArgsParam('key:a#b')).toEqual({}); - expect(parseArgsParam('key:a$b')).toEqual({}); - expect(parseArgsParam('key:a%b')).toEqual({}); - expect(parseArgsParam('key:a^b')).toEqual({}); - expect(parseArgsParam('key:a&b')).toEqual({}); - expect(parseArgsParam('key:a*b')).toEqual({}); - expect(parseArgsParam('key:a(b')).toEqual({}); - expect(parseArgsParam('key:a)b')).toEqual({}); - expect(parseArgsParam('key:a=b')).toEqual({}); - expect(parseArgsParam('key:a[b')).toEqual({}); - expect(parseArgsParam('key:a]b')).toEqual({}); - expect(parseArgsParam('key:a{b')).toEqual({}); - expect(parseArgsParam('key:a}b')).toEqual({}); - expect(parseArgsParam('key:a\\b')).toEqual({}); - expect(parseArgsParam('key:a|b')).toEqual({}); - expect(parseArgsParam("key:a'b")).toEqual({}); - expect(parseArgsParam('key:a"b')).toEqual({}); - expect(parseArgsParam('key:a,b')).toEqual({}); - expect(parseArgsParam('key:a.b')).toEqual({}); - expect(parseArgsParam('key:ab')).toEqual({}); - expect(parseArgsParam('key:a/b')).toEqual({}); - expect(parseArgsParam('key:a?b')).toEqual({}); + expect(parseArgsParam('key:a`b')).toStrictEqual({}); + expect(parseArgsParam('key:a~b')).toStrictEqual({}); + expect(parseArgsParam('key:a!b')).toStrictEqual({}); + expect(parseArgsParam('key:a@b')).toStrictEqual({}); + expect(parseArgsParam('key:a#b')).toStrictEqual({}); + expect(parseArgsParam('key:a$b')).toStrictEqual({}); + expect(parseArgsParam('key:a%b')).toStrictEqual({}); + expect(parseArgsParam('key:a^b')).toStrictEqual({}); + expect(parseArgsParam('key:a&b')).toStrictEqual({}); + expect(parseArgsParam('key:a*b')).toStrictEqual({}); + expect(parseArgsParam('key:a(b')).toStrictEqual({}); + expect(parseArgsParam('key:a)b')).toStrictEqual({}); + expect(parseArgsParam('key:a=b')).toStrictEqual({}); + expect(parseArgsParam('key:a[b')).toStrictEqual({}); + expect(parseArgsParam('key:a]b')).toStrictEqual({}); + expect(parseArgsParam('key:a{b')).toStrictEqual({}); + expect(parseArgsParam('key:a}b')).toStrictEqual({}); + expect(parseArgsParam('key:a\\b')).toStrictEqual({}); + expect(parseArgsParam('key:a|b')).toStrictEqual({}); + expect(parseArgsParam("key:a'b")).toStrictEqual({}); + expect(parseArgsParam('key:a"b')).toStrictEqual({}); + expect(parseArgsParam('key:a,b')).toStrictEqual({}); + expect(parseArgsParam('key:a.b')).toStrictEqual({}); + expect(parseArgsParam('key:ab')).toStrictEqual({}); + expect(parseArgsParam('key:a/b')).toStrictEqual({}); + expect(parseArgsParam('key:a?b')).toStrictEqual({}); }); it('allows values that are in the extended alphanumeric set', () => { - expect(parseArgsParam('key: val ')).toEqual({ key: ' val ' }); - expect(parseArgsParam('key:+val+')).toEqual({ key: ' val ' }); - expect(parseArgsParam('key:_val_')).toEqual({ key: '_val_' }); - expect(parseArgsParam('key:-val-')).toEqual({ key: '-val-' }); - expect(parseArgsParam('key:VAL123')).toEqual({ key: 'VAL123' }); - expect(parseArgsParam('key:1')).toEqual({ key: '1' }); + expect(parseArgsParam('key: val ')).toStrictEqual({ key: ' val ' }); + expect(parseArgsParam('key:+val+')).toStrictEqual({ key: ' val ' }); + expect(parseArgsParam('key:_val_')).toStrictEqual({ key: '_val_' }); + expect(parseArgsParam('key:-val-')).toStrictEqual({ key: '-val-' }); + expect(parseArgsParam('key:VAL123')).toStrictEqual({ key: 'VAL123' }); + expect(parseArgsParam('key:1')).toStrictEqual({ key: '1' }); }); it('also applies to nested object and array values', () => { - expect(parseArgsParam('obj.key:a!b')).toEqual({}); - expect(parseArgsParam('obj[key]:a!b')).toEqual({}); - expect(parseArgsParam('arr[][key]:a!b')).toEqual({}); - expect(parseArgsParam('arr[0][key]:a!b')).toEqual({}); - expect(parseArgsParam('arr[]:a!b')).toEqual({}); - expect(parseArgsParam('arr[0]:a!b')).toEqual({}); + expect(parseArgsParam('obj.key:a!b')).toStrictEqual({}); + expect(parseArgsParam('obj[key]:a!b')).toStrictEqual({}); + expect(parseArgsParam('arr[][key]:a!b')).toStrictEqual({}); + expect(parseArgsParam('arr[0][key]:a!b')).toStrictEqual({}); + expect(parseArgsParam('arr[]:a!b')).toStrictEqual({}); + expect(parseArgsParam('arr[0]:a!b')).toStrictEqual({}); }); it('completely omits an arg when a (deeply) nested value is invalid', () => { - expect(parseArgsParam('obj.key:a!b;obj.foo:val;obj.bar.baz:val')).toEqual({}); - expect(parseArgsParam('obj.arr[]:a!b;obj.foo:val;obj.bar.baz:val')).toEqual({}); - expect(parseArgsParam('obj.arr[0]:val;obj.arr[1]:a!b;obj.foo:val')).toEqual({}); - expect(parseArgsParam('obj.arr[][one]:a!b;obj.arr[][two]:val')).toEqual({}); - expect(parseArgsParam('arr[]:val;arr[]:a!b;key:val')).toEqual({ key: 'val' }); - expect(parseArgsParam('arr[0]:val;arr[1]:a!1;key:val')).toEqual({ key: 'val' }); - expect(parseArgsParam('arr[0]:val;arr[2]:a!1;key:val')).toEqual({ key: 'val' }); + expect(parseArgsParam('obj.key:a!b;obj.foo:val;obj.bar.baz:val')).toStrictEqual({}); + expect(parseArgsParam('obj.arr[]:a!b;obj.foo:val;obj.bar.baz:val')).toStrictEqual({}); + expect(parseArgsParam('obj.arr[0]:val;obj.arr[1]:a!b;obj.foo:val')).toStrictEqual({}); + expect(parseArgsParam('obj.arr[][one]:a!b;obj.arr[][two]:val')).toStrictEqual({}); + expect(parseArgsParam('arr[]:val;arr[]:a!b;key:val')).toStrictEqual({ key: 'val' }); + expect(parseArgsParam('arr[0]:val;arr[1]:a!1;key:val')).toStrictEqual({ key: 'val' }); + expect(parseArgsParam('arr[0]:val;arr[2]:a!1;key:val')).toStrictEqual({ key: 'val' }); }); }); }); diff --git a/lib/core-client/src/preview/parseArgsParam.ts b/lib/core-client/src/preview/parseArgsParam.ts index 67f88c8b1559..b0e79f9aa054 100644 --- a/lib/core-client/src/preview/parseArgsParam.ts +++ b/lib/core-client/src/preview/parseArgsParam.ts @@ -4,14 +4,18 @@ import { Args } from '@storybook/addons'; import { once } from '@storybook/client-logger'; import isPlainObject from 'lodash/isPlainObject'; -// Keep this in sync with validateArgs in @storybook/core +// Keep this in sync with validateArgs in router/src/utils.ts const VALIDATION_REGEXP = /^[a-zA-Z0-9 _-]*$/; +const HEX_REGEXP = /^#([a-f0-9]{3,4}|[a-f0-9]{6}|[a-f0-9]{8})$/i; +const COLOR_REGEXP = /^(rgba?|hsla?)\(([0-9]{1,3}),\s?([0-9]{1,3})%?,\s?([0-9]{1,3})%?,?\s?([0-9](\.[0-9]{1,2})?)?\)$/i; const validateArgs = (key = '', value: unknown): boolean => { - if (value === null || value === undefined) return true; // encoded as `!null` or `!undefined` if (key === null) return false; if (key === '' || !VALIDATION_REGEXP.test(key)) return false; + if (value === null || value === undefined) return true; // encoded as `!null` or `!undefined` + if (value instanceof Date) return true; // encoded as modified ISO string if (typeof value === 'number' || typeof value === 'boolean') return true; - if (typeof value === 'string') return VALIDATION_REGEXP.test(value); + if (typeof value === 'string') + return VALIDATION_REGEXP.test(value) || HEX_REGEXP.test(value) || COLOR_REGEXP.test(value); if (Array.isArray(value)) return value.every((v) => validateArgs(key, v)); if (isPlainObject(value)) return Object.entries(value).every(([k, v]) => validateArgs(k, v)); return false; @@ -20,14 +24,30 @@ const validateArgs = (key = '', value: unknown): boolean => { const QS_OPTIONS = { delimiter: ';', // we're parsing a single query param allowDots: true, // objects are encoded using dot notation + allowSparse: true, // arrays will be merged on top of their initial value decoder( str: string, defaultDecoder: (str: string, decoder?: any, charset?: string) => string, charset: string, type: 'key' | 'value' ) { - if (type === 'value' && str === '!undefined') return undefined; - if (type === 'value' && str === '!null') return null; + if (type === 'value' && str.startsWith('!')) { + if (str === '!undefined') return undefined; + if (str === '!null') return null; + if (str.startsWith('!date(') && str.endsWith(')')) return new Date(str.slice(6, -1)); + if (str.startsWith('!hex(') && str.endsWith(')')) return `#${str.slice(5, -1)}`; + + const color = str.slice(1).match(COLOR_REGEXP); + if (color) { + if (str.startsWith('!rgba')) + return `${color[1]}(${color[2]}, ${color[3]}, ${color[4]}, ${color[5]})`; + if (str.startsWith('!hsla')) + return `${color[1]}(${color[2]}, ${color[3]}%, ${color[4]}%, ${color[5]})`; + return str.startsWith('!rgb') + ? `${color[1]}(${color[2]}, ${color[3]}, ${color[4]})` + : `${color[1]}(${color[2]}, ${color[3]}%, ${color[4]}%)`; + } + } return defaultDecoder(str, defaultDecoder, charset); }, }; diff --git a/lib/core-common/package.json b/lib/core-common/package.json index 2a68a7c3a21d..7d58aecfe7e5 100644 --- a/lib/core-common/package.json +++ b/lib/core-common/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-common", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -57,7 +57,7 @@ "@babel/preset-react": "^7.12.10", "@babel/preset-typescript": "^7.12.7", "@babel/register": "^7.12.1", - "@storybook/node-logger": "6.2.0-rc.6", + "@storybook/node-logger": "6.2.0-rc.9", "@storybook/semver": "^7.3.2", "@types/glob-base": "^0.3.0", "@types/micromatch": "^4.0.1", @@ -103,5 +103,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "9140a2884503b405d457268fd9ffd8d2438013af" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/lib/core-events/package.json b/lib/core-events/package.json index eeebb0afa732..42fce079e816 100644 --- a/lib/core-events/package.json +++ b/lib/core-events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-events", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "description": "Event names used in storybook core", "keywords": [ "storybook" @@ -41,5 +41,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "9140a2884503b405d457268fd9ffd8d2438013af" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/lib/core-server/package.json b/lib/core-server/package.json index 80dfc4492d8c..227546362c53 100644 --- a/lib/core-server/package.json +++ b/lib/core-server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-server", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -41,14 +41,14 @@ "@babel/core": "^7.12.10", "@babel/plugin-transform-template-literals": "^7.12.1", "@babel/preset-react": "^7.12.10", - "@storybook/addons": "6.2.0-rc.6", - "@storybook/builder-webpack4": "6.2.0-rc.6", - "@storybook/core-client": "6.2.0-rc.6", - "@storybook/core-common": "6.2.0-rc.6", - "@storybook/node-logger": "6.2.0-rc.6", + "@storybook/addons": "6.2.0-rc.9", + "@storybook/builder-webpack4": "6.2.0-rc.9", + "@storybook/core-client": "6.2.0-rc.9", + "@storybook/core-common": "6.2.0-rc.9", + "@storybook/node-logger": "6.2.0-rc.9", "@storybook/semver": "^7.3.2", - "@storybook/theming": "6.2.0-rc.6", - "@storybook/ui": "6.2.0-rc.6", + "@storybook/theming": "6.2.0-rc.9", + "@storybook/ui": "6.2.0-rc.9", "@types/node": "^14.0.10", "@types/node-fetch": "^2.5.7", "@types/pretty-hrtime": "^1.0.0", @@ -93,7 +93,7 @@ "webpack-virtual-modules": "^0.2.2" }, "devDependencies": { - "@storybook/builder-webpack5": "6.2.0-rc.6", + "@storybook/builder-webpack5": "6.2.0-rc.9", "@types/case-sensitive-paths-webpack-plugin": "^2.1.4", "@types/cpy": "^7.1.3", "@types/dotenv-webpack": "^3.0.0", @@ -105,7 +105,7 @@ "jest-specific-snapshot": "^4.0.0" }, "peerDependencies": { - "@storybook/builder-webpack5": "6.2.0-rc.6", + "@storybook/builder-webpack5": "6.2.0-rc.9", "react": "^16.8.0 || ^17.0.0", "react-dom": "^16.8.0 || ^17.0.0" }, @@ -120,5 +120,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "9140a2884503b405d457268fd9ffd8d2438013af" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev index b77892fcf430..cf5bf2f46f79 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev @@ -193,7 +193,7 @@ Object { Object { "loader": "NODE_MODULES/file-loader/dist/cjs.js", "options": Object { - "name": "static/media/[name].[hash:8].[ext]", + "name": "static/media/[path][name].[ext]", }, "test": "/\\\\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\\\\?.*)?$/", }, @@ -201,7 +201,7 @@ Object { "loader": "NODE_MODULES/url-loader/dist/cjs.js", "options": Object { "limit": 10000, - "name": "static/media/[name].[hash:8].[ext]", + "name": "static/media/[path][name].[ext]", }, "test": "/\\\\.(mp4|webm|wav|mp3|m4a|aac|oga)(\\\\?.*)?$/", }, diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod index cf52d75de5a3..859cd50c56b6 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod @@ -193,7 +193,7 @@ Object { Object { "loader": "NODE_MODULES/file-loader/dist/cjs.js", "options": Object { - "name": "static/media/[name].[hash:8].[ext]", + "name": "static/media/[name].[contenthash:8].[ext]", }, "test": "/\\\\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\\\\?.*)?$/", }, @@ -201,7 +201,7 @@ Object { "loader": "NODE_MODULES/url-loader/dist/cjs.js", "options": Object { "limit": 10000, - "name": "static/media/[name].[hash:8].[ext]", + "name": "static/media/[name].[contenthash:8].[ext]", }, "test": "/\\\\.(mp4|webm|wav|mp3|m4a|aac|oga)(\\\\?.*)?$/", }, diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev index 8a6f40d4c5ea..10c152707467 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev @@ -23,6 +23,7 @@ Object { "devtool", "entry", "output", + "watchOptions", "plugins", "module", "resolve", diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod index 81d388b72c60..45e3985451a9 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod @@ -22,6 +22,7 @@ Object { "devtool", "entry", "output", + "watchOptions", "plugins", "module", "resolve", diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev index 28ba712acd44..b2de2e9886f7 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev @@ -199,7 +199,7 @@ Object { Object { "loader": "NODE_MODULES/file-loader/dist/cjs.js", "options": Object { - "name": "static/media/[name].[hash:8].[ext]", + "name": "static/media/[path][name].[ext]", }, "test": "/\\\\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\\\\?.*)?$/", }, @@ -207,7 +207,7 @@ Object { "loader": "NODE_MODULES/url-loader/dist/cjs.js", "options": Object { "limit": 10000, - "name": "static/media/[name].[hash:8].[ext]", + "name": "static/media/[path][name].[ext]", }, "test": "/\\\\.(mp4|webm|wav|mp3|m4a|aac|oga)(\\\\?.*)?$/", }, diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod index aaeaa1a5c7cb..6d453d4947b8 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod @@ -199,7 +199,7 @@ Object { Object { "loader": "NODE_MODULES/file-loader/dist/cjs.js", "options": Object { - "name": "static/media/[name].[hash:8].[ext]", + "name": "static/media/[name].[contenthash:8].[ext]", }, "test": "/\\\\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\\\\?.*)?$/", }, @@ -207,7 +207,7 @@ Object { "loader": "NODE_MODULES/url-loader/dist/cjs.js", "options": Object { "limit": 10000, - "name": "static/media/[name].[hash:8].[ext]", + "name": "static/media/[name].[contenthash:8].[ext]", }, "test": "/\\\\.(mp4|webm|wav|mp3|m4a|aac|oga)(\\\\?.*)?$/", }, diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev index 6ec4c663d890..2b073eb9c895 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev @@ -27,6 +27,7 @@ Object { "devtool", "entry", "output", + "watchOptions", "plugins", "module", "resolve", @@ -434,7 +435,7 @@ Object { Object { "loader": "NODE_MODULES/file-loader/dist/cjs.js", "options": Object { - "name": "static/media/[name].[hash:8].[ext]", + "name": "static/media/[path][name].[ext]", }, "test": "/\\\\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\\\\?.*)?$/", }, @@ -442,7 +443,7 @@ Object { "loader": "NODE_MODULES/url-loader/dist/cjs.js", "options": Object { "limit": 10000, - "name": "static/media/[name].[hash:8].[ext]", + "name": "static/media/[path][name].[ext]", }, "test": "/\\\\.(mp4|webm|wav|mp3|m4a|aac|oga)(\\\\?.*)?$/", }, diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod index 8ec85c178082..b40d07f3d670 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod @@ -26,6 +26,7 @@ Object { "devtool", "entry", "output", + "watchOptions", "plugins", "module", "resolve", @@ -433,7 +434,7 @@ Object { Object { "loader": "NODE_MODULES/file-loader/dist/cjs.js", "options": Object { - "name": "static/media/[name].[hash:8].[ext]", + "name": "static/media/[name].[contenthash:8].[ext]", }, "test": "/\\\\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\\\\?.*)?$/", }, @@ -441,7 +442,7 @@ Object { "loader": "NODE_MODULES/url-loader/dist/cjs.js", "options": Object { "limit": 10000, - "name": "static/media/[name].[hash:8].[ext]", + "name": "static/media/[name].[contenthash:8].[ext]", }, "test": "/\\\\.(mp4|webm|wav|mp3|m4a|aac|oga)(\\\\?.*)?$/", }, diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev b/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev index 32f3f31fa307..d1f03ab069e4 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev +++ b/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev @@ -195,7 +195,7 @@ Object { Object { "loader": "NODE_MODULES/file-loader/dist/cjs.js", "options": Object { - "name": "static/media/[name].[hash:8].[ext]", + "name": "static/media/[path][name].[ext]", }, "test": "/\\\\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\\\\?.*)?$/", }, @@ -203,7 +203,7 @@ Object { "loader": "NODE_MODULES/url-loader/dist/cjs.js", "options": Object { "limit": 10000, - "name": "static/media/[name].[hash:8].[ext]", + "name": "static/media/[path][name].[ext]", }, "test": "/\\\\.(mp4|webm|wav|mp3|m4a|aac|oga)(\\\\?.*)?$/", }, diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod b/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod index 41bbe0605d67..12a989f3291e 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod +++ b/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod @@ -195,7 +195,7 @@ Object { Object { "loader": "NODE_MODULES/file-loader/dist/cjs.js", "options": Object { - "name": "static/media/[name].[hash:8].[ext]", + "name": "static/media/[name].[contenthash:8].[ext]", }, "test": "/\\\\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\\\\?.*)?$/", }, @@ -203,7 +203,7 @@ Object { "loader": "NODE_MODULES/url-loader/dist/cjs.js", "options": Object { "limit": 10000, - "name": "static/media/[name].[hash:8].[ext]", + "name": "static/media/[name].[contenthash:8].[ext]", }, "test": "/\\\\.(mp4|webm|wav|mp3|m4a|aac|oga)(\\\\?.*)?$/", }, diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev index ffbabb3d5705..0d160837f83e 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev +++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev @@ -24,6 +24,7 @@ Object { "devtool", "entry", "output", + "watchOptions", "plugins", "module", "resolve", @@ -432,7 +433,7 @@ Object { Object { "loader": "NODE_MODULES/file-loader/dist/cjs.js", "options": Object { - "name": "static/media/[name].[hash:8].[ext]", + "name": "static/media/[path][name].[ext]", }, "test": "/\\\\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\\\\?.*)?$/", }, @@ -440,7 +441,7 @@ Object { "loader": "NODE_MODULES/url-loader/dist/cjs.js", "options": Object { "limit": 10000, - "name": "static/media/[name].[hash:8].[ext]", + "name": "static/media/[path][name].[ext]", }, "test": "/\\\\.(mp4|webm|wav|mp3|m4a|aac|oga)(\\\\?.*)?$/", }, diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod index ad4be7cf910a..f31c305f1b0f 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod +++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod @@ -23,6 +23,7 @@ Object { "devtool", "entry", "output", + "watchOptions", "plugins", "module", "resolve", @@ -431,7 +432,7 @@ Object { Object { "loader": "NODE_MODULES/file-loader/dist/cjs.js", "options": Object { - "name": "static/media/[name].[hash:8].[ext]", + "name": "static/media/[name].[contenthash:8].[ext]", }, "test": "/\\\\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\\\\?.*)?$/", }, @@ -439,7 +440,7 @@ Object { "loader": "NODE_MODULES/url-loader/dist/cjs.js", "options": Object { "limit": 10000, - "name": "static/media/[name].[hash:8].[ext]", + "name": "static/media/[name].[contenthash:8].[ext]", }, "test": "/\\\\.(mp4|webm|wav|mp3|m4a|aac|oga)(\\\\?.*)?$/", }, diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev index 1270f96656a9..f0ad29fdbedb 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev @@ -197,7 +197,7 @@ Object { Object { "loader": "NODE_MODULES/file-loader/dist/cjs.js", "options": Object { - "name": "static/media/[name].[hash:8].[ext]", + "name": "static/media/[path][name].[ext]", }, "test": "/\\\\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\\\\?.*)?$/", }, @@ -205,7 +205,7 @@ Object { "loader": "NODE_MODULES/url-loader/dist/cjs.js", "options": Object { "limit": 10000, - "name": "static/media/[name].[hash:8].[ext]", + "name": "static/media/[path][name].[ext]", }, "test": "/\\\\.(mp4|webm|wav|mp3|m4a|aac|oga)(\\\\?.*)?$/", }, diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod index 1432858f6bda..539dcebbf28e 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod @@ -197,7 +197,7 @@ Object { Object { "loader": "NODE_MODULES/file-loader/dist/cjs.js", "options": Object { - "name": "static/media/[name].[hash:8].[ext]", + "name": "static/media/[name].[contenthash:8].[ext]", }, "test": "/\\\\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\\\\?.*)?$/", }, @@ -205,7 +205,7 @@ Object { "loader": "NODE_MODULES/url-loader/dist/cjs.js", "options": Object { "limit": 10000, - "name": "static/media/[name].[hash:8].[ext]", + "name": "static/media/[name].[contenthash:8].[ext]", }, "test": "/\\\\.(mp4|webm|wav|mp3|m4a|aac|oga)(\\\\?.*)?$/", }, diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev index d44d287596f9..1770ad27b183 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev @@ -26,6 +26,7 @@ Object { "devtool", "entry", "output", + "watchOptions", "plugins", "module", "resolve", @@ -463,7 +464,7 @@ Object { Object { "loader": "NODE_MODULES/file-loader/dist/cjs.js", "options": Object { - "name": "static/media/[name].[hash:8].[ext]", + "name": "static/media/[path][name].[ext]", }, "test": "/\\\\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\\\\?.*)?$/", }, @@ -471,7 +472,7 @@ Object { "loader": "NODE_MODULES/url-loader/dist/cjs.js", "options": Object { "limit": 10000, - "name": "static/media/[name].[hash:8].[ext]", + "name": "static/media/[path][name].[ext]", }, "test": "/\\\\.(mp4|webm|wav|mp3|m4a|aac|oga)(\\\\?.*)?$/", }, diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod index d51667c06cdf..113c43c2e08d 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod @@ -25,6 +25,7 @@ Object { "devtool", "entry", "output", + "watchOptions", "plugins", "module", "resolve", @@ -462,7 +463,7 @@ Object { Object { "loader": "NODE_MODULES/file-loader/dist/cjs.js", "options": Object { - "name": "static/media/[name].[hash:8].[ext]", + "name": "static/media/[name].[contenthash:8].[ext]", }, "test": "/\\\\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\\\\?.*)?$/", }, @@ -470,7 +471,7 @@ Object { "loader": "NODE_MODULES/url-loader/dist/cjs.js", "options": Object { "limit": 10000, - "name": "static/media/[name].[hash:8].[ext]", + "name": "static/media/[name].[contenthash:8].[ext]", }, "test": "/\\\\.(mp4|webm|wav|mp3|m4a|aac|oga)(\\\\?.*)?$/", }, diff --git a/lib/core-server/src/manager/manager-webpack.config.ts b/lib/core-server/src/manager/manager-webpack.config.ts index 5c5d16ca9b44..7e30ac15aa5b 100644 --- a/lib/core-server/src/manager/manager-webpack.config.ts +++ b/lib/core-server/src/manager/manager-webpack.config.ts @@ -63,7 +63,7 @@ export default async ({ entry: entries, output: { path: outputDir, - filename: '[name].[chunkhash].bundle.js', + filename: isProd ? '[name].[contenthash].manager.bundle.js' : '[name].manager.bundle.js', publicPath: '', }, watchOptions: { @@ -133,7 +133,9 @@ export default async ({ test: /\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/, loader: require.resolve('file-loader'), options: { - name: 'static/media/[name].[hash:8].[ext]', + name: isProd + ? 'static/media/[name].[contenthash:8].[ext]' + : 'static/media/[path][name].[ext]', }, }, { @@ -141,7 +143,9 @@ export default async ({ loader: require.resolve('url-loader'), options: { limit: 10000, - name: 'static/media/[name].[hash:8].[ext]', + name: isProd + ? 'static/media/[name].[contenthash:8].[ext]' + : 'static/media/[path][name].[ext]', }, }, ], diff --git a/lib/core/package.json b/lib/core/package.json index 7a62cc55d20e..294afbaf337c 100644 --- a/lib/core/package.json +++ b/lib/core/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -36,11 +36,11 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/core-client": "6.2.0-rc.6", - "@storybook/core-server": "6.2.0-rc.6" + "@storybook/core-client": "6.2.0-rc.9", + "@storybook/core-server": "6.2.0-rc.9" }, "peerDependencies": { - "@storybook/builder-webpack5": "6.2.0-rc.6", + "@storybook/builder-webpack5": "6.2.0-rc.9", "react": "^16.8.0 || ^17.0.0", "react-dom": "^16.8.0 || ^17.0.0" }, @@ -55,5 +55,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "9140a2884503b405d457268fd9ffd8d2438013af" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/lib/node-logger/package.json b/lib/node-logger/package.json index 3bafdb073753..be125f0a03e4 100644 --- a/lib/node-logger/package.json +++ b/lib/node-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/node-logger", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "description": "", "keywords": [ "storybook" @@ -48,5 +48,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "9140a2884503b405d457268fd9ffd8d2438013af" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/lib/postinstall/package.json b/lib/postinstall/package.json index 7ba57732bb80..33d1607304bb 100644 --- a/lib/postinstall/package.json +++ b/lib/postinstall/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/postinstall", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "description": "Storybook addons postinstall utilities", "keywords": [ "api", @@ -47,5 +47,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "9140a2884503b405d457268fd9ffd8d2438013af" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/lib/router/package.json b/lib/router/package.json index e0e19157fd9b..0b85011c15c4 100644 --- a/lib/router/package.json +++ b/lib/router/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/router", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "description": "Core Storybook Router", "keywords": [ "storybook" @@ -37,14 +37,14 @@ }, "dependencies": { "@reach/router": "^1.3.4", - "@storybook/client-logger": "6.2.0-rc.6", + "@storybook/client-logger": "6.2.0-rc.9", "@types/reach__router": "^1.3.7", "core-js": "^3.8.2", "fast-deep-equal": "^3.1.3", "global": "^4.4.0", "lodash": "^4.17.20", "memoizerific": "^1.11.3", - "qs": "^6.9.5", + "qs": "^6.10.0", "ts-dedent": "^2.0.0" }, "peerDependencies": { @@ -54,5 +54,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "9140a2884503b405d457268fd9ffd8d2438013af" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/lib/router/src/utils.test.ts b/lib/router/src/utils.test.ts index 4c073109b51b..e7ae39173ade 100644 --- a/lib/router/src/utils.test.ts +++ b/lib/router/src/utils.test.ts @@ -85,16 +85,19 @@ describe('deepDiff', () => { expect(deepDiff(true, 1)).toBe(1); }); - it('returns the full array when updating an array', () => { - expect(deepDiff([1, 2], [3, 4])).toStrictEqual([3, 4]); + it('returns a sparse array when updating an array', () => { + // eslint-disable-next-line no-sparse-arrays + expect(deepDiff([1, 2], [1, 3])).toStrictEqual([, 3]); }); - it('returns undefined for omitted array values', () => { - expect(deepDiff([1, 2], [3])).toStrictEqual([3, undefined]); + it('returns undefined for removed array values', () => { + // eslint-disable-next-line no-sparse-arrays + expect(deepDiff([1, 2], [1])).toStrictEqual([, undefined]); }); it('returns a longer array when adding to an array', () => { - expect(deepDiff([1, 2], [3, 4, 5])).toStrictEqual([3, 4, 5]); + // eslint-disable-next-line no-sparse-arrays + expect(deepDiff([1, 2], [1, 2, 3])).toStrictEqual([, , 3]); }); it('returns a partial when updating an object', () => { @@ -133,6 +136,12 @@ describe('buildArgsParam', () => { expect(param).toEqual('arr[0]:1;arr[1]:2;arr[2]:3'); }); + it('builds sparse arrays', () => { + // eslint-disable-next-line no-sparse-arrays + const param = buildArgsParam({}, { arr: ['1', , '3'] }); + expect(param).toEqual('arr[0]:1;arr[2]:3'); + }); + it('builds simple objects', () => { const param = buildArgsParam({}, { obj: { one: '1', two: '2' } }); expect(param).toEqual('obj.one:1;obj.two:2'); @@ -144,8 +153,9 @@ describe('buildArgsParam', () => { }); it('builds arrays in objects', () => { - const param = buildArgsParam({}, { obj: { foo: ['1', '2'] } }); - expect(param).toEqual('obj.foo[0]:1;obj.foo[1]:2'); + // eslint-disable-next-line no-sparse-arrays + const param = buildArgsParam({}, { obj: { foo: ['1', , '3'] } }); + expect(param).toEqual('obj.foo[0]:1;obj.foo[2]:3'); }); it('builds single object in array', () => { @@ -168,16 +178,36 @@ describe('buildArgsParam', () => { expect(param).toEqual('key:foo+bar+baz'); }); - it('encodes null values as `!null`', () => { + it('encodes null values as !null', () => { const param = buildArgsParam({}, { key: null }); expect(param).toEqual('key:!null'); }); - it('encodes nested null values as `!null`', () => { + it('encodes nested null values as !null', () => { const param = buildArgsParam({}, { foo: { bar: [{ key: null }], baz: null } }); expect(param).toEqual('foo.bar[0].key:!null;foo.baz:!null'); }); + it('encodes hex color values as !hex(value)', () => { + const param = buildArgsParam({}, { key: '#ff4785' }); + expect(param).toEqual('key:!hex(ff4785)'); + }); + + it('encodes rgba color values by prefixing and compacting', () => { + const param = buildArgsParam({}, { rgb: 'rgb(255, 71, 133)', rgba: 'rgba(255, 71, 133, 0.5)' }); + expect(param).toEqual('rgb:!rgb(255,71,133);rgba:!rgba(255,71,133,0.5)'); + }); + + it('encodes hsla color values by prefixing and compacting', () => { + const param = buildArgsParam({}, { hsl: 'hsl(45, 99%, 70%)', hsla: 'hsla(45, 99%, 70%, 0.5)' }); + expect(param).toEqual('hsl:!hsl(45,99,70);hsla:!hsla(45,99,70,0.5)'); + }); + + it('encodes Date objects as !date(ISO string)', () => { + const param = buildArgsParam({}, { key: new Date('2001-02-03T04:05:06.789Z') }); + expect(param).toEqual('key:!date(2001-02-03T04:05:06.789Z)'); + }); + describe('with initial state', () => { it('omits unchanged values', () => { const param = buildArgsParam({ one: 1 }, { one: 1, two: 2 }); @@ -199,19 +229,17 @@ describe('buildArgsParam', () => { expect(param).toEqual('obj.one:!undefined'); }); - // TODO reintroduce sparse arrays when a new version of `qs` is released - // @see https://github.com/ljharb/qs/issues/396 - // it('omits unchanged array values (yielding sparse arrays)', () => { - // const param = buildArgsParam({ arr: [1, 2, 3] }, { arr: [1, 3, 4] }); - // expect(param).toEqual('arr[1]:3;arr[2]:4'); - // }); - - // it('omits nested unchanged object properties and array values', () => { - // const param = buildArgsParam( - // { obj: { nested: [{ one: 1 }, { two: 2 }] } }, - // { obj: { nested: [{ one: 1 }, { two: 2, three: 3 }] } } - // ); - // expect(param).toEqual('obj.nested[1].three:3'); - // }); + it('omits unchanged array values (yielding sparse arrays)', () => { + const param = buildArgsParam({ arr: [1, 2, 3] }, { arr: [1, 3, 4] }); + expect(param).toEqual('arr[1]:3;arr[2]:4'); + }); + + it('omits nested unchanged object properties and array values', () => { + const param = buildArgsParam( + { obj: { nested: [{ one: 1 }, { two: 2 }] } }, + { obj: { nested: [{ one: 1 }, { two: 2, three: 3 }] } } + ); + expect(param).toEqual('obj.nested[1].three:3'); + }); }); }); diff --git a/lib/router/src/utils.ts b/lib/router/src/utils.ts index ce7bcb839e49..20743e00e3a4 100644 --- a/lib/router/src/utils.ts +++ b/lib/router/src/utils.ts @@ -44,8 +44,13 @@ export const deepDiff = (value: any, update: any): any => { if (typeof value !== typeof update) return update; if (deepEqual(value, update)) return DEEPLY_EQUAL; if (Array.isArray(value) && Array.isArray(update)) { - if (update.length >= value.length) return update; - return [...update, ...new Array(value.length - update.length)]; + const res = update.reduce((acc, upd, index) => { + const diff = deepDiff(value[index], upd); + if (diff !== DEEPLY_EQUAL) acc[index] = diff; + return acc; + }, new Array(update.length)); + if (update.length >= value.length) return res; + return res.concat(new Array(value.length - update.length).fill(undefined)); } if (isPlainObject(value) && isPlainObject(update)) { return Object.keys({ ...value, ...update }).reduce((acc, key) => { @@ -56,37 +61,47 @@ export const deepDiff = (value: any, update: any): any => { return update; }; -const encodeNullish = (value: unknown): any => { - if (value === undefined) return '!undefined'; - if (value === null) return '!null'; - if (Array.isArray(value)) return value.map(encodeNullish); - if (isPlainObject(value)) { - return Object.entries(value).reduce( - (acc, [key, val]) => Object.assign(acc, { [key]: encodeNullish(val) }), - {} - ); - } - return value; -}; - -// Keep this in sync with validateArgs in @storybook/core +// Keep this in sync with validateArgs in core-client/src/preview/parseArgsParam.ts const VALIDATION_REGEXP = /^[a-zA-Z0-9 _-]*$/; +const HEX_REGEXP = /^#([a-f0-9]{3,4}|[a-f0-9]{6}|[a-f0-9]{8})$/i; +const COLOR_REGEXP = /^(rgba?|hsla?)\(([0-9]{1,3}),\s?([0-9]{1,3})%?,\s?([0-9]{1,3})%?,?\s?([0-9](\.[0-9]{1,2})?)?\)$/i; const validateArgs = (key = '', value: unknown): boolean => { - if (value === null || value === undefined) return true; // encoded as `!null` or `!undefined` if (key === null) return false; if (key === '' || !VALIDATION_REGEXP.test(key)) return false; + if (value === null || value === undefined) return true; // encoded as `!null` or `!undefined` + if (value instanceof Date) return true; // encoded as modified ISO string if (typeof value === 'number' || typeof value === 'boolean') return true; - if (typeof value === 'string') return VALIDATION_REGEXP.test(value); + if (typeof value === 'string') + return VALIDATION_REGEXP.test(value) || HEX_REGEXP.test(value) || COLOR_REGEXP.test(value); if (Array.isArray(value)) return value.every((v) => validateArgs(key, v)); if (isPlainObject(value)) return Object.entries(value).every(([k, v]) => validateArgs(k, v)); return false; }; +const encodeSpecialValues = (value: unknown): any => { + if (value === undefined) return '!undefined'; + if (value === null) return '!null'; + if (typeof value === 'string') { + if (HEX_REGEXP.test(value)) return `!hex(${value.slice(1)})`; + if (COLOR_REGEXP.test(value)) return `!${value.replace(/[\s%]/g, '')}`; + return value; + } + if (Array.isArray(value)) return value.map(encodeSpecialValues); + if (isPlainObject(value)) { + return Object.entries(value).reduce( + (acc, [key, val]) => Object.assign(acc, { [key]: encodeSpecialValues(val) }), + {} + ); + } + return value; +}; + const QS_OPTIONS = { encode: false, // we handle URL encoding ourselves delimiter: ';', // we don't actually create multiple query params allowDots: true, // encode objects using dot notation: obj.key=val format: 'RFC1738', // encode spaces using the + sign + serializeDate: (date: Date) => `!date(${date.toISOString()})`, }; export const buildArgsParam = (initialArgs: Args, args: Args): string => { const update = deepDiff(initialArgs, args); @@ -103,7 +118,7 @@ export const buildArgsParam = (initialArgs: Args, args: Args): string => { }, {} as Args); return qs - .stringify(encodeNullish(object), QS_OPTIONS) + .stringify(encodeSpecialValues(object), QS_OPTIONS) .replace(/ /g, '+') .split(';') .map((part: string) => part.replace('=', ':')) diff --git a/lib/source-loader/package.json b/lib/source-loader/package.json index befd947ae521..aeea7c4f10ce 100644 --- a/lib/source-loader/package.json +++ b/lib/source-loader/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/source-loader", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "description": "Source loader", "keywords": [ "lib", @@ -37,8 +37,8 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.2.0-rc.6", - "@storybook/client-logger": "6.2.0-rc.6", + "@storybook/addons": "6.2.0-rc.9", + "@storybook/client-logger": "6.2.0-rc.9", "@storybook/csf": "0.0.1", "core-js": "^3.8.2", "estraverse": "^5.2.0", @@ -55,5 +55,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "9140a2884503b405d457268fd9ffd8d2438013af" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/lib/theming/package.json b/lib/theming/package.json index 04b5540d7606..1e27c9c15192 100644 --- a/lib/theming/package.json +++ b/lib/theming/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/theming", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "description": "Core Storybook Components", "keywords": [ "storybook" @@ -39,7 +39,7 @@ "@emotion/core": "^10.1.1", "@emotion/is-prop-valid": "^0.8.6", "@emotion/styled": "^10.0.27", - "@storybook/client-logger": "6.2.0-rc.6", + "@storybook/client-logger": "6.2.0-rc.9", "core-js": "^3.8.2", "deep-object-diff": "^1.1.0", "emotion-theming": "^10.0.27", @@ -56,5 +56,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "9140a2884503b405d457268fd9ffd8d2438013af" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/lib/theming/src/global.ts b/lib/theming/src/global.ts index 55a82dbd75e8..0afd3df63503 100644 --- a/lib/theming/src/global.ts +++ b/lib/theming/src/global.ts @@ -46,8 +46,7 @@ export const createReset = memoize(1)( fontSize: '0.8em', top: '-0.2em', }, - - 'b, em': { + 'b, strong': { fontWeight: typography.weight.bold, }, diff --git a/lib/ui/package.json b/lib/ui/package.json index 792ff377c21d..b6b5f7e52777 100644 --- a/lib/ui/package.json +++ b/lib/ui/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ui", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "description": "Core Storybook UI", "keywords": [ "storybook" @@ -37,15 +37,15 @@ }, "dependencies": { "@emotion/core": "^10.1.1", - "@storybook/addons": "6.2.0-rc.6", - "@storybook/api": "6.2.0-rc.6", - "@storybook/channels": "6.2.0-rc.6", - "@storybook/client-logger": "6.2.0-rc.6", - "@storybook/components": "6.2.0-rc.6", - "@storybook/core-events": "6.2.0-rc.6", - "@storybook/router": "6.2.0-rc.6", + "@storybook/addons": "6.2.0-rc.9", + "@storybook/api": "6.2.0-rc.9", + "@storybook/channels": "6.2.0-rc.9", + "@storybook/client-logger": "6.2.0-rc.9", + "@storybook/components": "6.2.0-rc.9", + "@storybook/core-events": "6.2.0-rc.9", + "@storybook/router": "6.2.0-rc.9", "@storybook/semver": "^7.3.2", - "@storybook/theming": "6.2.0-rc.6", + "@storybook/theming": "6.2.0-rc.9", "@types/markdown-to-jsx": "^6.11.3", "copy-to-clipboard": "^3.3.1", "core-js": "^3.8.2", @@ -58,7 +58,7 @@ "markdown-to-jsx": "^6.11.4", "memoizerific": "^1.11.3", "polished": "^4.0.5", - "qs": "^6.9.5", + "qs": "^6.10.0", "react-draggable": "^4.4.3", "react-helmet-async": "^1.0.7", "react-sizeme": "^3.0.1", @@ -83,5 +83,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "9140a2884503b405d457268fd9ffd8d2438013af" + "gitHead": "229ae2956bdb1e49a5dee26d3b6ada991a38c725" } diff --git a/package.json b/package.json index 678150c9c391..d9c1e293ee6e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "6.2.0-rc.6", + "version": "6.2.0-rc.9", "private": true, "description": "Storybook is an open source tool for developing UI components in isolation for React, Vue and Angular. It makes building stunning UIs organized and efficient.", "keywords": [ diff --git a/yarn.lock b/yarn.lock index d913409d97d6..c7a9d97e66b4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -27168,7 +27168,14 @@ qs@6.7.0: resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc" integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ== -qs@^6.2.0, qs@^6.4.0, qs@^6.9.4, qs@^6.9.5: +qs@^6.10.0: + version "6.10.0" + resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.0.tgz#8b6519121ab291c316a3e4d49cecf6d13d8c7fe5" + integrity sha512-yjACOWijC6L/kmPZZAsVBNY2zfHSIbpdpL977quseu56/8BZ2LoF5axK2bGhbzhVKt7V9xgWTtpyLbxwIoER0Q== + dependencies: + side-channel "^1.0.4" + +qs@^6.2.0, qs@^6.4.0, qs@^6.9.4: version "6.9.6" resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.6.tgz#26ed3c8243a431b2924aca84cc90471f35d5a0ee" integrity sha512-TIRk4aqYLNoJUbd+g2lEdz5kLWIuTMRagAXxl78Q0RiVjAOugHmeKNGdd3cwo/ktpf9aL9epCfFqWDEKysUlLQ==