diff --git a/.circleci/config.yml b/.circleci/config.yml index 8d4a9accd90..372652ee426 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -92,7 +92,7 @@ jobs: command: yarn install --immutable - run: name: Bootstrap - command: yarn bootstrap --core + command: yarn bootstrap --build --manager - save_cache: name: Save Yarn cache key: build-yarn-2-cache-v3--{{ checksum "yarn.lock" }} diff --git a/CHANGELOG.md b/CHANGELOG.md index f2f4a0e663a..8b25a56b0d7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,84 @@ +## 6.5.0-alpha.64 (April 18, 2022) + +### Features + +- CLI/Preact: add interactions to cli template ([#17984](https://github.com/storybookjs/storybook/pull/17984)) + +### Bug Fixes + +- Interactions: Fix show length of object value on MethodCall ([#17649](https://github.com/storybookjs/storybook/pull/17649)) +- React: Fix React 18 react-dom/client dynamic import syntax ([#17987](https://github.com/storybookjs/storybook/pull/17987)) +- Svelte: Fix webpack5/babelModeV7 ([#17939](https://github.com/storybookjs/storybook/pull/17939)) + +### Maintenance + +- Examples: Remove stories from deprecated `options`/`queryparams` addons ([#17977](https://github.com/storybookjs/storybook/pull/17977)) +- Chore: Format versions.ts file using repo config ([#17963](https://github.com/storybookjs/storybook/pull/17963)) + +## 6.5.0-alpha.63 (April 14, 2022) + +### Bug Fixes + +- Theming: Re-export correct bundled file ([#17956](https://github.com/storybookjs/storybook/pull/17956)) +- Core: Support react-dom/client dom hack on Windows machines ([#17946](https://github.com/storybookjs/storybook/pull/17946)) + +### Maintenance + +- CI: set parallelism of nx to 2 ([#17878](https://github.com/storybookjs/storybook/pull/17878)) + +### Dependency Upgrades + +- Run `prebundle` script without `browser: true` in Rollup config ([#17947](https://github.com/storybookjs/storybook/pull/17947)) + +## 6.4.22 (April 14, 2022) + +### Maintenance + +- Core: Avoid framework imports from core/client ([#17875](https://github.com/storybookjs/storybook/pull/17875)) + +## 6.5.0-alpha.62 (April 13, 2022) + +Test publish with npm 2FA enabled for addon-jest + +## 6.5.0-alpha.61 (April 11, 2022) + +### Features + +- UI: Add URL parameters to SB to tweak visible UI ([#17891](https://github.com/storybookjs/storybook/pull/17891)) + +### Maintenance + +- Core: Followup changing CJS entrypoints to ESM ([#17927](https://github.com/storybookjs/storybook/pull/17927)) + +### Dependency Upgrades + +- Export `createCache` from `@storybook/theming` ([#17929](https://github.com/storybookjs/storybook/pull/17929)) + +## 6.4.21 (April 9, 2022) + +### Bug Fixes + +- Angular: Do not use default for includePaths ([#17876](https://github.com/storybookjs/storybook/pull/17876)) +- Controls: Fix date control width in addons panel ([#17780](https://github.com/storybookjs/storybook/pull/17780)) +- CLI: Preserve quote style in automigrate ([#17858](https://github.com/storybookjs/storybook/pull/17858)) +- CLI: Update the exclude list for upgrade warnings ([#17909](https://github.com/storybookjs/storybook/pull/17909)) + +## 6.5.0-alpha.60 (April 9, 2022) + +### Features + +- Core: Add story preloading to optimize lazy compilation ([#17903](https://github.com/storybookjs/storybook/pull/17903)) + +### Bug Fixes + +- UI: Fix pseudo class potential unsafe warning ([#17911](https://github.com/storybookjs/storybook/pull/17911)) +- Core: Fix user-supplied project-level `render` in v6 store ([#17885](https://github.com/storybookjs/storybook/pull/17885)) + +### Dependency Upgrades + +- Upgrade polished to 4.2.2 ([#17913](https://github.com/storybookjs/storybook/pull/17913)) +- Bump min vue-loader dependency version ([#17912](https://github.com/storybookjs/storybook/pull/17912)) + ## 6.5.0-alpha.59 (April 7, 2022) ### Maintenance @@ -74,6 +155,21 @@ - Core: Restore preview-web composeConfigs export ([#17861](https://github.com/storybookjs/storybook/pull/17861)) - CLI: Preserve quote style in automigrate ([#17858](https://github.com/storybookjs/storybook/pull/17858)) +## 6.4.20 (April 1, 2022) + +### Bug Fixes + +- CLI: Fix vite/jest issue with mocked global ([#17830](https://github.com/storybookjs/storybook/pull/17830)) +- Angular: Fix multiple calls of Input setter ([#17633](https://github.com/storybookjs/storybook/pull/17633)) +- Web-components: Fix CSS class usage in CLI template ([#17702](https://github.com/storybookjs/storybook/pull/17702)) +- UI: Fix composition support in safari ([#17679](https://github.com/storybookjs/storybook/pull/17679)) +- Addon-docs: DocsPage story order should match the index ([#17669](https://github.com/storybookjs/storybook/pull/17669)) +- Core: Fix core.builder check ([#17606](https://github.com/storybookjs/storybook/pull/17606)) + +### Maintenance + +- CLI: Add automigration to `@storybook/builder-vite` ([#17829](https://github.com/storybookjs/storybook/pull/17829)) + ## 6.5.0-alpha.54 (April 1, 2022) ### Dependency Upgrades @@ -258,6 +354,21 @@ - Build: Fix CRA repro generator and e2e test in PnP mode ([#17375](https://github.com/storybookjs/storybook/pull/17375)) - UI: Add a custom title story for heading component ([#17487](https://github.com/storybookjs/storybook/pull/17487)) +## 6.4.19 (February 12, 2022) + +### Features + +- CLI/React: Add interactions to cli template ([#17345](https://github.com/storybookjs/storybook/pull/17345)) +- CLI/Angular: Add interactions to cli template ([#17437](https://github.com/storybookjs/storybook/pull/17437)) + +### Bug Fixes + +- Core/CLI: Add `extract` function to `PreviewWeb` and use it in `sb extract` if available ([#17447](https://github.com/storybookjs/storybook/pull/17447)) +- Core: Ensure we show an error when `configure()` throws ([#17435](https://github.com/storybookjs/storybook/pull/17435)) +- Core: Fix `useParameter` with nullish coalescing ([#17327](https://github.com/storybookjs/storybook/pull/17327)) +- Addon-links: Fix export statement in react.d.ts ([#17434](https://github.com/storybookjs/storybook/pull/17434)) +- Addon-docs: Fix typo in ArgsTable tooltip ([#17404](https://github.com/storybookjs/storybook/pull/17404)) + ## 6.5.0-alpha.39 (February 11, 2022) ### Features diff --git a/addons/a11y/package.json b/addons/a11y/package.json index e4caccc7c71..528f49965ee 100644 --- a/addons/a11y/package.json +++ b/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", @@ -45,14 +45,14 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.59", - "@storybook/api": "6.5.0-alpha.59", - "@storybook/channels": "6.5.0-alpha.59", - "@storybook/client-logger": "6.5.0-alpha.59", - "@storybook/components": "6.5.0-alpha.59", - "@storybook/core-events": "6.5.0-alpha.59", + "@storybook/addons": "6.5.0-alpha.64", + "@storybook/api": "6.5.0-alpha.64", + "@storybook/channels": "6.5.0-alpha.64", + "@storybook/client-logger": "6.5.0-alpha.64", + "@storybook/components": "6.5.0-alpha.64", + "@storybook/core-events": "6.5.0-alpha.64", "@storybook/csf": "0.0.2--canary.7c6c115.0", - "@storybook/theming": "6.5.0-alpha.59", + "@storybook/theming": "6.5.0-alpha.64", "axe-core": "^4.2.0", "core-js": "^3.8.2", "global": "^4.4.0", @@ -81,7 +81,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0", + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Accessibility", diff --git a/addons/actions/package.json b/addons/actions/package.json index a206ea3082e..51615f0e1c6 100644 --- a/addons/actions/package.json +++ b/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", @@ -41,18 +41,18 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.59", - "@storybook/api": "6.5.0-alpha.59", - "@storybook/client-logger": "6.5.0-alpha.59", - "@storybook/components": "6.5.0-alpha.59", - "@storybook/core-events": "6.5.0-alpha.59", + "@storybook/addons": "6.5.0-alpha.64", + "@storybook/api": "6.5.0-alpha.64", + "@storybook/client-logger": "6.5.0-alpha.64", + "@storybook/components": "6.5.0-alpha.64", + "@storybook/core-events": "6.5.0-alpha.64", "@storybook/csf": "0.0.2--canary.7c6c115.0", - "@storybook/theming": "6.5.0-alpha.59", + "@storybook/theming": "6.5.0-alpha.64", "core-js": "^3.8.2", "fast-deep-equal": "^3.1.3", "global": "^4.4.0", "lodash": "^4.17.21", - "polished": "^4.0.5", + "polished": "^4.2.2", "prop-types": "^15.7.2", "react-inspector": "^5.1.0", "regenerator-runtime": "^0.13.7", @@ -80,7 +80,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0", + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Actions", diff --git a/addons/actions/src/preview/action.ts b/addons/actions/src/preview/action.ts index 53a5c397157..c8af13de05d 100644 --- a/addons/actions/src/preview/action.ts +++ b/addons/actions/src/preview/action.ts @@ -25,7 +25,7 @@ const serializeArg = (a: T) => { ); e.persist(); const viewDescriptor = Object.getOwnPropertyDescriptor(e, 'view'); - // dont send the entire window object over. + // don't send the entire window object over. const view: unknown = viewDescriptor?.value; if (typeof view === 'object' && view?.constructor.name === 'Window') { Object.defineProperty(e, 'view', { diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json index d7af4301ab9..d8c92fb7349 100644 --- a/addons/backgrounds/package.json +++ b/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", @@ -45,13 +45,13 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.59", - "@storybook/api": "6.5.0-alpha.59", - "@storybook/client-logger": "6.5.0-alpha.59", - "@storybook/components": "6.5.0-alpha.59", - "@storybook/core-events": "6.5.0-alpha.59", + "@storybook/addons": "6.5.0-alpha.64", + "@storybook/api": "6.5.0-alpha.64", + "@storybook/client-logger": "6.5.0-alpha.64", + "@storybook/components": "6.5.0-alpha.64", + "@storybook/core-events": "6.5.0-alpha.64", "@storybook/csf": "0.0.2--canary.7c6c115.0", - "@storybook/theming": "6.5.0-alpha.59", + "@storybook/theming": "6.5.0-alpha.64", "core-js": "^3.8.2", "global": "^4.4.0", "memoizerific": "^1.11.3", @@ -77,7 +77,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0", + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Backgrounds", diff --git a/addons/controls/package.json b/addons/controls/package.json index e16c6d1c155..c52df78341d 100644 --- a/addons/controls/package.json +++ b/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", @@ -45,15 +45,15 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.59", - "@storybook/api": "6.5.0-alpha.59", - "@storybook/client-logger": "6.5.0-alpha.59", - "@storybook/components": "6.5.0-alpha.59", - "@storybook/core-common": "6.5.0-alpha.59", + "@storybook/addons": "6.5.0-alpha.64", + "@storybook/api": "6.5.0-alpha.64", + "@storybook/client-logger": "6.5.0-alpha.64", + "@storybook/components": "6.5.0-alpha.64", + "@storybook/core-common": "6.5.0-alpha.64", "@storybook/csf": "0.0.2--canary.7c6c115.0", - "@storybook/node-logger": "6.5.0-alpha.59", - "@storybook/store": "6.5.0-alpha.59", - "@storybook/theming": "6.5.0-alpha.59", + "@storybook/node-logger": "6.5.0-alpha.64", + "@storybook/store": "6.5.0-alpha.64", + "@storybook/theming": "6.5.0-alpha.64", "core-js": "^3.8.2", "lodash": "^4.17.21", "ts-dedent": "^2.0.0" @@ -73,7 +73,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0", + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", "sbmodern": "dist/modern/manager.js", "storybook": { "displayName": "Controls", diff --git a/addons/docs/package.json b/addons/docs/package.json index c4b53e3becf..71474d40352 100644 --- a/addons/docs/package.json +++ b/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", @@ -59,20 +59,20 @@ "@babel/preset-env": "^7.12.11", "@jest/transform": "^26.6.2", "@mdx-js/react": "^1.6.22", - "@storybook/addons": "6.5.0-alpha.59", - "@storybook/api": "6.5.0-alpha.59", - "@storybook/components": "6.5.0-alpha.59", - "@storybook/core-common": "6.5.0-alpha.59", - "@storybook/core-events": "6.5.0-alpha.59", + "@storybook/addons": "6.5.0-alpha.64", + "@storybook/api": "6.5.0-alpha.64", + "@storybook/components": "6.5.0-alpha.64", + "@storybook/core-common": "6.5.0-alpha.64", + "@storybook/core-events": "6.5.0-alpha.64", "@storybook/csf": "0.0.2--canary.7c6c115.0", - "@storybook/docs-tools": "6.5.0-alpha.59", + "@storybook/docs-tools": "6.5.0-alpha.64", "@storybook/mdx1-csf": "canary", - "@storybook/node-logger": "6.5.0-alpha.59", - "@storybook/postinstall": "6.5.0-alpha.59", - "@storybook/preview-web": "6.5.0-alpha.59", - "@storybook/source-loader": "6.5.0-alpha.59", - "@storybook/store": "6.5.0-alpha.59", - "@storybook/theming": "6.5.0-alpha.59", + "@storybook/node-logger": "6.5.0-alpha.64", + "@storybook/postinstall": "6.5.0-alpha.64", + "@storybook/preview-web": "6.5.0-alpha.64", + "@storybook/source-loader": "6.5.0-alpha.64", + "@storybook/store": "6.5.0-alpha.64", + "@storybook/theming": "6.5.0-alpha.64", "babel-loader": "^8.0.0", "core-js": "^3.8.2", "fast-deep-equal": "^3.1.3", @@ -108,7 +108,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0", + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Docs", diff --git a/addons/essentials/package.json b/addons/essentials/package.json index 14e03981fea..6b16393004d 100644 --- a/addons/essentials/package.json +++ b/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", @@ -39,25 +39,25 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addon-actions": "6.5.0-alpha.59", - "@storybook/addon-backgrounds": "6.5.0-alpha.59", - "@storybook/addon-controls": "6.5.0-alpha.59", - "@storybook/addon-docs": "6.5.0-alpha.59", - "@storybook/addon-measure": "6.5.0-alpha.59", - "@storybook/addon-outline": "6.5.0-alpha.59", - "@storybook/addon-toolbars": "6.5.0-alpha.59", - "@storybook/addon-viewport": "6.5.0-alpha.59", - "@storybook/addons": "6.5.0-alpha.59", - "@storybook/api": "6.5.0-alpha.59", - "@storybook/core-common": "6.5.0-alpha.59", - "@storybook/node-logger": "6.5.0-alpha.59", + "@storybook/addon-actions": "6.5.0-alpha.64", + "@storybook/addon-backgrounds": "6.5.0-alpha.64", + "@storybook/addon-controls": "6.5.0-alpha.64", + "@storybook/addon-docs": "6.5.0-alpha.64", + "@storybook/addon-measure": "6.5.0-alpha.64", + "@storybook/addon-outline": "6.5.0-alpha.64", + "@storybook/addon-toolbars": "6.5.0-alpha.64", + "@storybook/addon-viewport": "6.5.0-alpha.64", + "@storybook/addons": "6.5.0-alpha.64", + "@storybook/api": "6.5.0-alpha.64", + "@storybook/core-common": "6.5.0-alpha.64", + "@storybook/node-logger": "6.5.0-alpha.64", "core-js": "^3.8.2", "regenerator-runtime": "^0.13.7", "ts-dedent": "^2.0.0" }, "devDependencies": { "@babel/core": "^7.12.10", - "@storybook/vue": "6.5.0-alpha.59", + "@storybook/vue": "6.5.0-alpha.64", "@types/jest": "^26.0.16", "@types/webpack-env": "^1.16.0" }, @@ -120,6 +120,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0", + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", "sbmodern": "dist/modern/index.js" } diff --git a/addons/interactions/package.json b/addons/interactions/package.json index c44b7dfb2d7..1d8b0ae2290 100644 --- a/addons/interactions/package.json +++ b/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", @@ -41,19 +41,20 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.59", - "@storybook/api": "6.5.0-alpha.59", - "@storybook/client-logger": "6.5.0-alpha.59", - "@storybook/components": "6.5.0-alpha.59", - "@storybook/core-common": "6.5.0-alpha.59", - "@storybook/core-events": "6.5.0-alpha.59", + "@devtools-ds/object-inspector": "^1.1.2", + "@storybook/addons": "6.5.0-alpha.64", + "@storybook/api": "6.5.0-alpha.64", + "@storybook/client-logger": "6.5.0-alpha.64", + "@storybook/components": "6.5.0-alpha.64", + "@storybook/core-common": "6.5.0-alpha.64", + "@storybook/core-events": "6.5.0-alpha.64", "@storybook/csf": "0.0.2--canary.7c6c115.0", - "@storybook/instrumenter": "6.5.0-alpha.59", - "@storybook/theming": "6.5.0-alpha.59", + "@storybook/instrumenter": "6.5.0-alpha.64", + "@storybook/theming": "6.5.0-alpha.64", "core-js": "^3.8.2", "global": "^4.4.0", "jest-mock": "^27.0.6", - "polished": "^4.0.5", + "polished": "^4.2.2", "ts-dedent": "^2.2.0" }, "devDependencies": { @@ -76,7 +77,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0", + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Interactions", diff --git a/addons/interactions/src/components/MatcherResult.tsx b/addons/interactions/src/components/MatcherResult.tsx index ba75519f627..cf52a920ae4 100644 --- a/addons/interactions/src/components/MatcherResult.tsx +++ b/addons/interactions/src/components/MatcherResult.tsx @@ -29,15 +29,17 @@ const StyledReceived = styled.span(({ theme }) => ({ export const Received = ({ value, parsed }: { value: any; parsed?: boolean }) => parsed ? ( - + ) : ( {value} ); export const Expected = ({ value, parsed }: { value: any; parsed?: boolean }) => { if (parsed) { - if (typeof value === 'string' && value.startsWith('called with')) return <>{value}; - return ; + if (typeof value === 'string' && value.startsWith('called with')) { + return <>{value}; + } + return ; } return {value}; }; diff --git a/addons/interactions/src/components/MethodCall.stories.tsx b/addons/interactions/src/components/MethodCall.stories.tsx index a2d09b71d6c..feda43c8ff5 100644 --- a/addons/interactions/src/components/MethodCall.stories.tsx +++ b/addons/interactions/src/components/MethodCall.stories.tsx @@ -42,7 +42,20 @@ export const Args = () => ( i)} /> - + + + 123, + asyncFn: async () => 'hello', + }} + showObjectInspector + /> diff --git a/addons/interactions/src/components/MethodCall.tsx b/addons/interactions/src/components/MethodCall.tsx index 724bf3963e2..10a3bf2c0f4 100644 --- a/addons/interactions/src/components/MethodCall.tsx +++ b/addons/interactions/src/components/MethodCall.tsx @@ -1,3 +1,4 @@ +import { ObjectInspector } from '@devtools-ds/object-inspector'; import { Call, CallRef, ElementRef } from '@storybook/instrumenter'; import { useTheme } from '@storybook/theming'; import React, { Fragment, ReactElement } from 'react'; @@ -91,11 +92,17 @@ const interleave = (nodes: ReactElement[], separator: ReactElement) => export const Node = ({ value, nested, + showObjectInspector, callsById, ...props }: { value: any; nested?: boolean; + /** + * Shows an object inspector instead of just printing the object. + * Only available for Objects + */ + showObjectInspector?: boolean; callsById?: Map; [props: string]: any; }) => { @@ -131,7 +138,7 @@ export const Node = ({ value.constructor?.name !== 'Object': return ; case Object.prototype.toString.call(value) === '[object Object]': - return ; + return ; default: return ; } @@ -199,14 +206,37 @@ export const ArrayNode = ({ value, nested = false }: { value: any[]; nested?: bo ); }; -export const ObjectNode = ({ value, nested = false }: { value: object; nested?: boolean }) => { +export const ObjectNode = ({ + showInspector, + value, + nested = false, +}: { + showInspector?: boolean; + value: object; + nested?: boolean; +}) => { + const isDarkMode = useTheme().base === 'dark'; const colors = useThemeColors(); + + if (showInspector) { + return ( + <> + + + ); + } + if (nested) { return {'{…}'}; } const nodelist = interleave( Object.entries(value) - .slice(0, 1) + .slice(0, 2) .map(([k, v]) => ( {k}: diff --git a/addons/jest/package.json b/addons/jest/package.json index 9380589d223..318f61b9ecb 100644 --- a/addons/jest/package.json +++ b/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "React storybook addon that show component jest report", "keywords": [ "addon", @@ -47,12 +47,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.59", - "@storybook/api": "6.5.0-alpha.59", - "@storybook/client-logger": "6.5.0-alpha.59", - "@storybook/components": "6.5.0-alpha.59", - "@storybook/core-events": "6.5.0-alpha.59", - "@storybook/theming": "6.5.0-alpha.59", + "@storybook/addons": "6.5.0-alpha.64", + "@storybook/api": "6.5.0-alpha.64", + "@storybook/client-logger": "6.5.0-alpha.64", + "@storybook/components": "6.5.0-alpha.64", + "@storybook/core-events": "6.5.0-alpha.64", + "@storybook/theming": "6.5.0-alpha.64", "core-js": "^3.8.2", "global": "^4.4.0", "react-sizeme": "^3.0.1", @@ -77,7 +77,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0", + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Jest", diff --git a/addons/links/README.md b/addons/links/README.md index 4fa4c342921..b8e1d7e4e5e 100644 --- a/addons/links/README.md +++ b/addons/links/README.md @@ -55,7 +55,8 @@ With that, you can link an event in a component to any story in the Storybook. You can also pass a function instead for any of above parameter. That function accepts arguments emitted by the event and it should return a string: ```js -import { LinkTo, linkTo } from '@storybook/addon-links'; +import { linkTo } from '@storybook/addon-links'; +import LinkTo from '@storybook/addon-links/react'; export default { title: 'Select', diff --git a/addons/links/package.json b/addons/links/package.json index fc42dd3af5a..dbeb442d109 100644 --- a/addons/links/package.json +++ b/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "addon", @@ -41,11 +41,11 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.59", - "@storybook/client-logger": "6.5.0-alpha.59", - "@storybook/core-events": "6.5.0-alpha.59", + "@storybook/addons": "6.5.0-alpha.64", + "@storybook/client-logger": "6.5.0-alpha.64", + "@storybook/core-events": "6.5.0-alpha.64", "@storybook/csf": "0.0.2--canary.7c6c115.0", - "@storybook/router": "6.5.0-alpha.59", + "@storybook/router": "6.5.0-alpha.64", "@types/qs": "^6.9.5", "core-js": "^3.8.2", "global": "^4.4.0", @@ -72,7 +72,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0", + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Links", diff --git a/addons/links/react.js b/addons/links/react.js index 9afbe539022..d0e3270119d 100644 --- a/addons/links/react.js +++ b/addons/links/react.js @@ -1 +1,3 @@ -module.exports = require('./dist/esm/react'); +import LinkTo from './dist/esm/react'; + +export default LinkTo; diff --git a/addons/measure/package.json b/addons/measure/package.json index a6ab5af5135..887df4229b7 100644 --- a/addons/measure/package.json +++ b/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", @@ -44,11 +44,11 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.59", - "@storybook/api": "6.5.0-alpha.59", - "@storybook/client-logger": "6.5.0-alpha.59", - "@storybook/components": "6.5.0-alpha.59", - "@storybook/core-events": "6.5.0-alpha.59", + "@storybook/addons": "6.5.0-alpha.64", + "@storybook/api": "6.5.0-alpha.64", + "@storybook/client-logger": "6.5.0-alpha.64", + "@storybook/components": "6.5.0-alpha.64", + "@storybook/core-events": "6.5.0-alpha.64", "@storybook/csf": "0.0.2--canary.7c6c115.0", "core-js": "^3.8.2", "global": "^4.4.0" @@ -71,7 +71,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0", + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Measure", diff --git a/addons/outline/package.json b/addons/outline/package.json index ebe85237e37..12177733a47 100644 --- a/addons/outline/package.json +++ b/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "Outline all elements with CSS to help with layout placement and alignment", "keywords": [ "storybook-addons", @@ -47,11 +47,11 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.59", - "@storybook/api": "6.5.0-alpha.59", - "@storybook/client-logger": "6.5.0-alpha.59", - "@storybook/components": "6.5.0-alpha.59", - "@storybook/core-events": "6.5.0-alpha.59", + "@storybook/addons": "6.5.0-alpha.64", + "@storybook/api": "6.5.0-alpha.64", + "@storybook/client-logger": "6.5.0-alpha.64", + "@storybook/components": "6.5.0-alpha.64", + "@storybook/core-events": "6.5.0-alpha.64", "@storybook/csf": "0.0.2--canary.7c6c115.0", "core-js": "^3.8.2", "global": "^4.4.0", @@ -76,7 +76,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0", + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Outline", diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json index d907d8276c1..c20c889168a 100644 --- a/addons/storyshots/storyshots-core/package.json +++ b/addons/storyshots/storyshots-core/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storyshots", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "Take a code snapshot of every story automatically with Jest", "keywords": [ "addon", @@ -45,12 +45,12 @@ }, "dependencies": { "@jest/transform": "^26.6.2", - "@storybook/addons": "6.5.0-alpha.59", + "@storybook/addons": "6.5.0-alpha.64", "@storybook/babel-plugin-require-context-hook": "1.0.1", - "@storybook/client-api": "6.5.0-alpha.59", - "@storybook/core": "6.5.0-alpha.59", - "@storybook/core-client": "6.5.0-alpha.59", - "@storybook/core-common": "6.5.0-alpha.59", + "@storybook/client-api": "6.5.0-alpha.64", + "@storybook/core": "6.5.0-alpha.64", + "@storybook/core-client": "6.5.0-alpha.64", + "@storybook/core-common": "6.5.0-alpha.64", "@storybook/csf": "0.0.2--canary.7c6c115.0", "@types/glob": "^7.1.3", "@types/jest": "^26.0.16", @@ -70,11 +70,11 @@ "@angular/core": "^11.2.0", "@angular/platform-browser-dynamic": "^11.2.0", "@emotion/jest": "^11.8.0", - "@storybook/addon-docs": "6.5.0-alpha.59", - "@storybook/angular": "6.5.0-alpha.59", - "@storybook/react": "6.5.0-alpha.59", - "@storybook/vue": "6.5.0-alpha.59", - "@storybook/vue3": "6.5.0-alpha.59", + "@storybook/addon-docs": "6.5.0-alpha.64", + "@storybook/angular": "6.5.0-alpha.64", + "@storybook/react": "6.5.0-alpha.64", + "@storybook/vue": "6.5.0-alpha.64", + "@storybook/vue3": "6.5.0-alpha.64", "babel-loader": "^8.0.0", "enzyme": "^3.11.0", "enzyme-to-json": "^3.6.1", @@ -151,7 +151,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0", + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", "storybook": { "displayName": "Storyshots", "icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png", diff --git a/addons/storyshots/storyshots-puppeteer/package.json b/addons/storyshots/storyshots-puppeteer/package.json index bc0b2dcb9ab..3fc82cc79fa 100644 --- a/addons/storyshots/storyshots-puppeteer/package.json +++ b/addons/storyshots/storyshots-puppeteer/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storyshots-puppeteer", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "Image snapshots addition to StoryShots based on puppeteer", "keywords": [ "addon", @@ -42,7 +42,7 @@ "dependencies": { "@axe-core/puppeteer": "^4.2.0", "@storybook/csf": "0.0.2--canary.7c6c115.0", - "@storybook/node-logger": "6.5.0-alpha.59", + "@storybook/node-logger": "6.5.0-alpha.64", "@types/jest-image-snapshot": "^4.1.3", "core-js": "^3.8.2", "jest-image-snapshot": "^4.3.0", @@ -53,7 +53,7 @@ "@types/puppeteer": "^5.4.0" }, "peerDependencies": { - "@storybook/addon-storyshots": "6.5.0-alpha.59", + "@storybook/addon-storyshots": "6.5.0-alpha.64", "puppeteer": "^2.0.0 || ^3.0.0" }, "peerDependenciesMeta": { @@ -64,5 +64,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0" + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5" } diff --git a/addons/storysource/package.json b/addons/storysource/package.json index 951cd108716..7228a2b57c3 100644 --- a/addons/storysource/package.json +++ b/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "View a story’s source code to see how it works and paste into your app", "keywords": [ "addon", @@ -41,13 +41,13 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.59", - "@storybook/api": "6.5.0-alpha.59", - "@storybook/client-logger": "6.5.0-alpha.59", - "@storybook/components": "6.5.0-alpha.59", - "@storybook/router": "6.5.0-alpha.59", - "@storybook/source-loader": "6.5.0-alpha.59", - "@storybook/theming": "6.5.0-alpha.59", + "@storybook/addons": "6.5.0-alpha.64", + "@storybook/api": "6.5.0-alpha.64", + "@storybook/client-logger": "6.5.0-alpha.64", + "@storybook/components": "6.5.0-alpha.64", + "@storybook/router": "6.5.0-alpha.64", + "@storybook/source-loader": "6.5.0-alpha.64", + "@storybook/theming": "6.5.0-alpha.64", "core-js": "^3.8.2", "estraverse": "^5.2.0", "loader-utils": "^2.0.0", @@ -74,7 +74,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0", + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Storysource", diff --git a/addons/toolbars/package.json b/addons/toolbars/package.json index 17193519643..8bfd0271065 100644 --- a/addons/toolbars/package.json +++ b/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", @@ -45,11 +45,11 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.59", - "@storybook/api": "6.5.0-alpha.59", - "@storybook/client-logger": "6.5.0-alpha.59", - "@storybook/components": "6.5.0-alpha.59", - "@storybook/theming": "6.5.0-alpha.59", + "@storybook/addons": "6.5.0-alpha.64", + "@storybook/api": "6.5.0-alpha.64", + "@storybook/client-logger": "6.5.0-alpha.64", + "@storybook/components": "6.5.0-alpha.64", + "@storybook/theming": "6.5.0-alpha.64", "core-js": "^3.8.2", "regenerator-runtime": "^0.13.7" }, @@ -68,7 +68,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0", + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", "sbmodern": "dist/modern/manager.js", "storybook": { "displayName": "Toolbars", diff --git a/addons/viewport/package.json b/addons/viewport/package.json index c9a4ec2146d..a58c00f1f97 100644 --- a/addons/viewport/package.json +++ b/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "Build responsive components by adjusting Storybook’s viewport size and orientation", "keywords": [ "addon", @@ -42,12 +42,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.59", - "@storybook/api": "6.5.0-alpha.59", - "@storybook/client-logger": "6.5.0-alpha.59", - "@storybook/components": "6.5.0-alpha.59", - "@storybook/core-events": "6.5.0-alpha.59", - "@storybook/theming": "6.5.0-alpha.59", + "@storybook/addons": "6.5.0-alpha.64", + "@storybook/api": "6.5.0-alpha.64", + "@storybook/client-logger": "6.5.0-alpha.64", + "@storybook/components": "6.5.0-alpha.64", + "@storybook/core-events": "6.5.0-alpha.64", + "@storybook/theming": "6.5.0-alpha.64", "core-js": "^3.8.2", "global": "^4.4.0", "memoizerific": "^1.11.3", @@ -69,7 +69,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0", + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", "sbmodern": "dist/modern/preview.js", "storybook": { "displayName": "Viewport", diff --git a/app/angular/package.json b/app/angular/package.json index 817af334bbb..17b4f13caf9 100644 --- a/app/angular/package.json +++ b/app/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -45,17 +45,17 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.59", - "@storybook/api": "6.5.0-alpha.59", - "@storybook/client-logger": "6.5.0-alpha.59", - "@storybook/core": "6.5.0-alpha.59", - "@storybook/core-common": "6.5.0-alpha.59", - "@storybook/core-events": "6.5.0-alpha.59", + "@storybook/addons": "6.5.0-alpha.64", + "@storybook/api": "6.5.0-alpha.64", + "@storybook/client-logger": "6.5.0-alpha.64", + "@storybook/core": "6.5.0-alpha.64", + "@storybook/core-common": "6.5.0-alpha.64", + "@storybook/core-events": "6.5.0-alpha.64", "@storybook/csf": "0.0.2--canary.7c6c115.0", - "@storybook/docs-tools": "6.5.0-alpha.59", - "@storybook/node-logger": "6.5.0-alpha.59", + "@storybook/docs-tools": "6.5.0-alpha.64", + "@storybook/node-logger": "6.5.0-alpha.64", "@storybook/semver": "^7.3.2", - "@storybook/store": "6.5.0-alpha.59", + "@storybook/store": "6.5.0-alpha.64", "@types/node": "^14.14.20 || ^16.0.0", "@types/react": "^16.14.23", "@types/react-dom": "^16.9.14", @@ -137,5 +137,5 @@ "access": "public" }, "builders": "dist/ts3.9/builders/builders.json", - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0" + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5" } diff --git a/app/ember/package.json b/app/ember/package.json index b59bf3e8d3c..00c18768e79 100644 --- a/app/ember/package.json +++ b/app/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybookjs/storybook/tree/main/app/ember", "bugs": { @@ -42,10 +42,10 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/core": "6.5.0-alpha.59", - "@storybook/core-common": "6.5.0-alpha.59", - "@storybook/docs-tools": "6.5.0-alpha.59", - "@storybook/store": "6.5.0-alpha.59", + "@storybook/core": "6.5.0-alpha.64", + "@storybook/core-common": "6.5.0-alpha.64", + "@storybook/docs-tools": "6.5.0-alpha.64", + "@storybook/store": "6.5.0-alpha.64", "core-js": "^3.8.2", "global": "^4.4.0", "react": "16.14.0", @@ -66,6 +66,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0", + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", "sbmodern": "dist/modern/client/index.js" } diff --git a/app/html/package.json b/app/html/package.json index f7256ac4dee..163d0f4a02f 100644 --- a/app/html/package.json +++ b/app/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -45,13 +45,13 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.59", - "@storybook/core": "6.5.0-alpha.59", - "@storybook/core-common": "6.5.0-alpha.59", + "@storybook/addons": "6.5.0-alpha.64", + "@storybook/core": "6.5.0-alpha.64", + "@storybook/core-common": "6.5.0-alpha.64", "@storybook/csf": "0.0.2--canary.7c6c115.0", - "@storybook/docs-tools": "6.5.0-alpha.59", - "@storybook/preview-web": "6.5.0-alpha.59", - "@storybook/store": "6.5.0-alpha.59", + "@storybook/docs-tools": "6.5.0-alpha.64", + "@storybook/preview-web": "6.5.0-alpha.64", + "@storybook/store": "6.5.0-alpha.64", "@types/node": "^14.14.20 || ^16.0.0", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", @@ -76,6 +76,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0", + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", "sbmodern": "dist/modern/client/index.js" } diff --git a/app/preact/package.json b/app/preact/package.json index c974bf8a27e..eea12fb8c39 100644 --- a/app/preact/package.json +++ b/app/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" @@ -46,11 +46,11 @@ }, "dependencies": { "@babel/plugin-transform-react-jsx": "^7.12.12", - "@storybook/addons": "6.5.0-alpha.59", - "@storybook/core": "6.5.0-alpha.59", - "@storybook/core-common": "6.5.0-alpha.59", + "@storybook/addons": "6.5.0-alpha.64", + "@storybook/core": "6.5.0-alpha.64", + "@storybook/core-common": "6.5.0-alpha.64", "@storybook/csf": "0.0.2--canary.7c6c115.0", - "@storybook/store": "6.5.0-alpha.59", + "@storybook/store": "6.5.0-alpha.64", "@types/node": "^14.14.20 || ^16.0.0", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", @@ -76,6 +76,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0", + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", "sbmodern": "dist/modern/client/index.js" } diff --git a/app/react/package.json b/app/react/package.json index 60a975aabbc..cb1b2a8ad0f 100644 --- a/app/react/package.json +++ b/app/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -49,16 +49,16 @@ "@babel/preset-flow": "^7.12.1", "@babel/preset-react": "^7.12.10", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3", - "@storybook/addons": "6.5.0-alpha.59", - "@storybook/client-logger": "6.5.0-alpha.59", - "@storybook/core": "6.5.0-alpha.59", - "@storybook/core-common": "6.5.0-alpha.59", + "@storybook/addons": "6.5.0-alpha.64", + "@storybook/client-logger": "6.5.0-alpha.64", + "@storybook/core": "6.5.0-alpha.64", + "@storybook/core-common": "6.5.0-alpha.64", "@storybook/csf": "0.0.2--canary.7c6c115.0", - "@storybook/docs-tools": "6.5.0-alpha.59", - "@storybook/node-logger": "6.5.0-alpha.59", + "@storybook/docs-tools": "6.5.0-alpha.64", + "@storybook/node-logger": "6.5.0-alpha.64", "@storybook/react-docgen-typescript-plugin": "1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0", "@storybook/semver": "^7.3.2", - "@storybook/store": "6.5.0-alpha.59", + "@storybook/store": "6.5.0-alpha.64", "@types/estree": "^0.0.51", "@types/node": "^14.14.20 || ^16.0.0", "@types/webpack-env": "^1.16.0", @@ -119,6 +119,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0", + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", "sbmodern": "dist/modern/client/index.js" } diff --git a/app/react/src/client/preview/render.tsx b/app/react/src/client/preview/render.tsx index 6ed1326be02..08238aed678 100644 --- a/app/react/src/client/preview/render.tsx +++ b/app/react/src/client/preview/render.tsx @@ -72,9 +72,8 @@ const getReactRoot = async (el: Element): Promise => { let root = nodes.get(el); if (!root) { - // Skipping webpack's static analysis of import paths by defining the path value outside the import statement. // eslint-disable-next-line import/no-unresolved - const reactDomClient = await import('react-dom/client'); + const reactDomClient = (await import('react-dom/client')).default; root = reactDomClient.createRoot(el); nodes.set(el, root); diff --git a/app/react/src/server/framework-preset-react-dom-hack.ts b/app/react/src/server/framework-preset-react-dom-hack.ts index 6746dd5d871..f9893d37c85 100644 --- a/app/react/src/server/framework-preset-react-dom-hack.ts +++ b/app/react/src/server/framework-preset-react-dom-hack.ts @@ -15,7 +15,7 @@ export async function webpackFinal(config: Configuration) { ? null : new IgnorePlugin({ resourceRegExp: /react-dom\/client$/, - contextRegExp: /(app\/react|@storybook\/react)/, // TODO this needs to work for both in our MONOREPO and in the user's NODE_MODULES + contextRegExp: /(app\/react|app\\react|@storybook\/react|@storybook\\react)/, // TODO this needs to work for both in our MONOREPO and in the user's NODE_MODULES }), ].filter(Boolean), }; diff --git a/app/server/package.json b/app/server/package.json index 595f36994e2..d9686d521f1 100644 --- a/app/server/package.json +++ b/app/server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -45,15 +45,15 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.59", - "@storybook/api": "6.5.0-alpha.59", - "@storybook/client-api": "6.5.0-alpha.59", - "@storybook/core": "6.5.0-alpha.59", - "@storybook/core-common": "6.5.0-alpha.59", + "@storybook/addons": "6.5.0-alpha.64", + "@storybook/api": "6.5.0-alpha.64", + "@storybook/client-api": "6.5.0-alpha.64", + "@storybook/core": "6.5.0-alpha.64", + "@storybook/core-common": "6.5.0-alpha.64", "@storybook/csf": "0.0.2--canary.7c6c115.0", - "@storybook/node-logger": "6.5.0-alpha.59", - "@storybook/preview-web": "6.5.0-alpha.59", - "@storybook/store": "6.5.0-alpha.59", + "@storybook/node-logger": "6.5.0-alpha.64", + "@storybook/preview-web": "6.5.0-alpha.64", + "@storybook/store": "6.5.0-alpha.64", "@types/node": "^14.14.20 || ^16.0.0", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", @@ -76,6 +76,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0", + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", "sbmodern": "dist/modern/client/index.js" } diff --git a/app/svelte/package.json b/app/svelte/package.json index d949e69bef9..8eb7ac45658 100644 --- a/app/svelte/package.json +++ b/app/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -46,14 +46,14 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.59", - "@storybook/client-logger": "6.5.0-alpha.59", - "@storybook/core": "6.5.0-alpha.59", - "@storybook/core-common": "6.5.0-alpha.59", + "@storybook/addons": "6.5.0-alpha.64", + "@storybook/client-logger": "6.5.0-alpha.64", + "@storybook/core": "6.5.0-alpha.64", + "@storybook/core-common": "6.5.0-alpha.64", "@storybook/csf": "0.0.2--canary.7c6c115.0", - "@storybook/docs-tools": "6.5.0-alpha.59", - "@storybook/node-logger": "6.5.0-alpha.59", - "@storybook/store": "6.5.0-alpha.59", + "@storybook/docs-tools": "6.5.0-alpha.64", + "@storybook/node-logger": "6.5.0-alpha.64", + "@storybook/store": "6.5.0-alpha.64", "core-js": "^3.8.2", "global": "^4.4.0", "loader-utils": "^2.0.0", @@ -83,6 +83,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0", + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", "sbmodern": "dist/modern/client/index.js" } diff --git a/app/svelte/src/server/framework-preset-svelte.ts b/app/svelte/src/server/framework-preset-svelte.ts index d3e10fbf749..c3cf144bc72 100644 --- a/app/svelte/src/server/framework-preset-svelte.ts +++ b/app/svelte/src/server/framework-preset-svelte.ts @@ -1,6 +1,7 @@ import { findDistEsm } from '@storybook/core-common'; import type { Options, StorybookConfig } from '@storybook/core-common'; import type { Configuration } from 'webpack'; +import type { TransformOptions } from '@babel/core'; export async function webpack(config: Configuration, options: Options): Promise { const { preprocess = undefined, loader = {} } = await options.presets.apply( @@ -33,6 +34,14 @@ export async function webpack(config: Configuration, options: Options): Promise< }; } +export async function babelDefault(config: TransformOptions): Promise { + return { + ...config, + presets: [...(config?.presets || [])], + plugins: [...(config?.plugins || [])], + }; +} + export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => { return [...entry, findDistEsm(__dirname, 'client/preview/config')]; }; diff --git a/app/vue/package.json b/app/vue/package.json index 5560b976001..d65acfff27d 100644 --- a/app/vue/package.json +++ b/app/vue/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -45,13 +45,13 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.59", - "@storybook/client-logger": "6.5.0-alpha.59", - "@storybook/core": "6.5.0-alpha.59", - "@storybook/core-common": "6.5.0-alpha.59", + "@storybook/addons": "6.5.0-alpha.64", + "@storybook/client-logger": "6.5.0-alpha.64", + "@storybook/core": "6.5.0-alpha.64", + "@storybook/core-common": "6.5.0-alpha.64", "@storybook/csf": "0.0.2--canary.7c6c115.0", - "@storybook/docs-tools": "6.5.0-alpha.59", - "@storybook/store": "6.5.0-alpha.59", + "@storybook/docs-tools": "6.5.0-alpha.64", + "@storybook/store": "6.5.0-alpha.64", "@types/node": "^14.14.20 || ^16.0.0", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", @@ -86,6 +86,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0", + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", "sbmodern": "dist/modern/client/index.js" } diff --git a/app/vue3/package.json b/app/vue3/package.json index d3928e691ad..bc344a477f3 100644 --- a/app/vue3/package.json +++ b/app/vue3/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -45,12 +45,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.59", - "@storybook/core": "6.5.0-alpha.59", - "@storybook/core-common": "6.5.0-alpha.59", + "@storybook/addons": "6.5.0-alpha.64", + "@storybook/core": "6.5.0-alpha.64", + "@storybook/core-common": "6.5.0-alpha.64", "@storybook/csf": "0.0.2--canary.7c6c115.0", - "@storybook/docs-tools": "6.5.0-alpha.59", - "@storybook/store": "6.5.0-alpha.59", + "@storybook/docs-tools": "6.5.0-alpha.64", + "@storybook/store": "6.5.0-alpha.64", "@types/node": "^14.14.20 || ^16.0.0", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", @@ -63,7 +63,7 @@ "ts-loader": "^8.0.14", "vue-docgen-api": "^4.44.15", "vue-docgen-loader": "^1.5.0", - "vue-loader": "^16.0.0", + "vue-loader": "^16.4.1", "webpack": ">=4.0.0 <6.0.0" }, "devDependencies": { @@ -83,6 +83,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0", + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", "sbmodern": "dist/modern/client/index.js" } diff --git a/app/web-components/package.json b/app/web-components/package.json index e71ba04834d..1e135bf38ba 100644 --- a/app/web-components/package.json +++ b/app/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit-html", @@ -50,15 +50,15 @@ "@babel/plugin-syntax-dynamic-import": "^7.8.3", "@babel/plugin-syntax-import-meta": "^7.10.4", "@babel/preset-env": "^7.12.11", - "@storybook/addons": "6.5.0-alpha.59", - "@storybook/client-api": "6.5.0-alpha.59", - "@storybook/client-logger": "6.5.0-alpha.59", - "@storybook/core": "6.5.0-alpha.59", - "@storybook/core-common": "6.5.0-alpha.59", + "@storybook/addons": "6.5.0-alpha.64", + "@storybook/client-api": "6.5.0-alpha.64", + "@storybook/client-logger": "6.5.0-alpha.64", + "@storybook/core": "6.5.0-alpha.64", + "@storybook/core-common": "6.5.0-alpha.64", "@storybook/csf": "0.0.2--canary.7c6c115.0", - "@storybook/docs-tools": "6.5.0-alpha.59", - "@storybook/preview-web": "6.5.0-alpha.59", - "@storybook/store": "6.5.0-alpha.59", + "@storybook/docs-tools": "6.5.0-alpha.64", + "@storybook/preview-web": "6.5.0-alpha.64", + "@storybook/store": "6.5.0-alpha.64", "@types/node": "^14.14.20 || ^16.0.0", "@types/webpack-env": "^1.16.0", "babel-plugin-bundled-import-meta": "^0.3.1", @@ -82,6 +82,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0", + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", "sbmodern": "dist/modern/client/index.js" } diff --git a/cypress/generated/addon-interactions.spec.ts b/cypress/generated/addon-interactions.spec.ts index a0eb03697f3..1d2ff7b81f1 100644 --- a/cypress/generated/addon-interactions.spec.ts +++ b/cypress/generated/addon-interactions.spec.ts @@ -34,4 +34,8 @@ describe('addon-interactions', () => { onlyOn('vite_react', () => { it('should have interactions', test); }); + + onlyOn('preact', () => { + it('should have interactions', test); + }); }); diff --git a/docs/addons/addon-catalog.md b/docs/addons/addon-catalog.md index 62b4b1f39b0..ae5b9a0c721 100644 --- a/docs/addons/addon-catalog.md +++ b/docs/addons/addon-catalog.md @@ -4,7 +4,7 @@ title: 'Add to the addon catalog' Storybook addons are listed in the [catalog](/addons) and distributed via npm. The catalog is populated by querying npm's registry for Storybook-specific metadata in `package.json`. -Add your addon to the catalog by publishing an npm package that follows these requirements: +Add your addon to the catalog by publishing a npm package that follows these requirements: - `package.json` with [module information](./writing-addons.md#get-started) and [addon metadata](#addon-metadata) - `README.md` file with installation and configuration instructions diff --git a/docs/addons/introduction.md b/docs/addons/introduction.md index f043fc24299..8b5594f03fe 100644 --- a/docs/addons/introduction.md +++ b/docs/addons/introduction.md @@ -22,7 +22,7 @@ The **Preview** area is an `iframe` where your stories are rendered. ![Storybook detailed window](./manager-preview.jpg) -Because both elements run in their own separate `iframes`, they use a communication channel to keep in synch. For example when you select a story in the Manager a event is dispatched across the channel notifying the Preview to render the story. +Because both elements run in their own separate `iframes`, they use a communication channel to keep in sync. For example when you select a story in the Manager an event is dispatched across the channel notifying the Preview to render the story. ## Anatomy of an addon diff --git a/docs/configure/webpack.md b/docs/configure/webpack.md index d86127a6ae2..b338c9e6edb 100644 --- a/docs/configure/webpack.md +++ b/docs/configure/webpack.md @@ -69,7 +69,7 @@ When you start your Storybook, you'll see an improvement in loading times. Read ### Webpack 5 -Storybook builds your project with Webpack 4 by default. If your project uses Webpack 5, you can opt into the Webpack 5 builder by installing the `@storybook/builder-webpack5` package, and opting in in your `main.js`: +Storybook builds your project with Webpack 4 by default. If your project uses Webpack 5, you can opt into the Webpack 5 builder by installing the required dependencies (i.e., `@storybook/builder-webpack5`, `@storybook/manager-webpack5`) and update your Storybook configuration as follows: diff --git a/docs/contribute/new-snippets.md b/docs/contribute/new-snippets.md index c6b51f6dcde..84e4a91439b 100644 --- a/docs/contribute/new-snippets.md +++ b/docs/contribute/new-snippets.md @@ -110,7 +110,7 @@ yarn start:skip-addons ```
-💡 During the start process if there's an issue with the the documentation, the process will stop and you'll get a notification. +💡 During the start process if there's an issue with the documentation, the process will stop and you'll get a notification.
Open a browser window to `http://localhost:8000`, click the Docs link, and select your framework from the dropdown. diff --git a/docs/essentials/controls.md b/docs/essentials/controls.md index 6d1d241ae0e..8daf3cede4a 100644 --- a/docs/essentials/controls.md +++ b/docs/essentials/controls.md @@ -11,7 +11,7 @@ Storybook Controls gives you a graphical UI to interact with a component's argum /> -Controls does not require any modification to your components. Stories for controls are: +Controls do not require any modification to your components. Stories for controls are: - Convenient. Auto-generate controls based on React/Vue/Angular/etc. components. - Portable. Reuse your interactive stories in documentation, tests, and even in designs. @@ -197,7 +197,7 @@ As shown above, you can configure individual controls with the “control" annot | | `select` | Provides a drop-down list component to handle single value selection. `argTypes: { age: { control: 'select', options: [20, 30, 40, 50] }}` | | | `multi-select` | Provides a drop-down list that allows multiple selected values. `argTypes: { countries: { control: 'multi-select', options: ['USA', 'Canada', 'Mexico'] }}` | | **string** | `text` | Provides a freeform text input.
`argTypes: { label: { control: 'text' }}` | -| | `color` | Provides a color picker component to handle color values.
Can be additionally configured to include a set of color presets.
`argTypes: { color: { control: { type: 'color', presetsColors: ['red', 'green']} }}` | +| | `color` | Provides a color picker component to handle color values.
Can be additionally configured to include a set of color presets.
`argTypes: { color: { control: { type: 'color', presetColors: ['red', 'green']} }}` | | | `date` | Provides a datepicker component to handle date selection. `argTypes: { startDate: { control: 'date' }}` |
diff --git a/docs/essentials/introduction.md b/docs/essentials/introduction.md index db59851a041..4d84463a8e9 100644 --- a/docs/essentials/introduction.md +++ b/docs/essentials/introduction.md @@ -32,7 +32,7 @@ Update your Storybook configuration (in [`.storybook/main.js`](../configure/over diff --git a/docs/snippets/angular/my-component-play-function-with-delay.mdx.mdx b/docs/snippets/angular/my-component-play-function-with-delay.mdx.mdx index cd28004a98a..6ed819ac2e7 100644 --- a/docs/snippets/angular/my-component-play-function-with-delay.mdx.mdx +++ b/docs/snippets/angular/my-component-play-function-with-delay.mdx.mdx @@ -28,4 +28,4 @@ export const Template = (args) => ({ props: args }); }} > {Template.bind({})} -``` \ No newline at end of file +``` diff --git a/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx b/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx index 8df09b4367a..084f43dd360 100644 --- a/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx +++ b/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx @@ -33,4 +33,4 @@ DelayedStory.play = () => { delay: 100, }); }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-register-essentials-addon.js.mdx b/docs/snippets/common/storybook-main-register-essentials-addon.js.mdx new file mode 100644 index 00000000000..8c20f79bb8e --- /dev/null +++ b/docs/snippets/common/storybook-main-register-essentials-addon.js.mdx @@ -0,0 +1,8 @@ +```js +// .storybook/main.js + +module.exports = { + stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], + addons: ['@storybook/addon-links', '@storybook/addon-essentials'], +}; +``` diff --git a/docs/snippets/common/storybook-main-webpack5-fsCache.mdx b/docs/snippets/common/storybook-main-webpack5-fsCache.js.mdx similarity index 97% rename from docs/snippets/common/storybook-main-webpack5-fsCache.mdx rename to docs/snippets/common/storybook-main-webpack5-fsCache.js.mdx index 622152ccfc4..9ea2077caa9 100644 --- a/docs/snippets/common/storybook-main-webpack5-fsCache.mdx +++ b/docs/snippets/common/storybook-main-webpack5-fsCache.js.mdx @@ -11,4 +11,4 @@ module.exports = { }, }, }; -``` +``` \ No newline at end of file diff --git a/docs/snippets/react/accessibility-testing-with-jest-axe.js.mdx b/docs/snippets/react/accessibility-testing-with-jest-axe.js.mdx index 73946a456b3..0e2e2814715 100644 --- a/docs/snippets/react/accessibility-testing-with-jest-axe.js.mdx +++ b/docs/snippets/react/accessibility-testing-with-jest-axe.js.mdx @@ -13,11 +13,11 @@ const { Accessible } = composeStories(MyComponentStories); expect.extend(toHaveNoViolations); -test('Example accessiblity test', async () => { +test('Example accessibility test', async () => { const { container } = render(); const AxeResults = await axe(container); expect(AxeResults).toHaveNoViolations(); }); -``` \ No newline at end of file +``` diff --git a/docs/snippets/react/my-component-play-function-with-delay.js.mdx b/docs/snippets/react/my-component-play-function-with-delay.js.mdx index 327268a8187..ffda0d5edec 100644 --- a/docs/snippets/react/my-component-play-function-with-delay.js.mdx +++ b/docs/snippets/react/my-component-play-function-with-delay.js.mdx @@ -32,4 +32,4 @@ DelayedStory.play = async () => { delay: 100, }); }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/react/my-component-play-function-with-delay.mdx.mdx b/docs/snippets/react/my-component-play-function-with-delay.mdx.mdx index 6f75e352c88..56ab5df2ebc 100644 --- a/docs/snippets/react/my-component-play-function-with-delay.mdx.mdx +++ b/docs/snippets/react/my-component-play-function-with-delay.mdx.mdx @@ -28,4 +28,4 @@ export const Template = (args) => ; }}> {Template.bind({})} -``` \ No newline at end of file +``` diff --git a/docs/snippets/react/my-component-play-function-with-delay.ts.mdx b/docs/snippets/react/my-component-play-function-with-delay.ts.mdx index 6c825f89a95..0d806f32d21 100644 --- a/docs/snippets/react/my-component-play-function-with-delay.ts.mdx +++ b/docs/snippets/react/my-component-play-function-with-delay.ts.mdx @@ -34,4 +34,4 @@ DelayedStory.play = async () => { delay: 100, }); }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/svelte/button-story-with-blue-args.mdx.mdx b/docs/snippets/svelte/button-story-with-blue-args.mdx.mdx index 41319b1a8b0..c6d410ddc63 100644 --- a/docs/snippets/svelte/button-story-with-blue-args.mdx.mdx +++ b/docs/snippets/svelte/button-story-with-blue-args.mdx.mdx @@ -3,7 +3,7 @@ import { Meta } from '@storybook/addon-docs'; -import Button from './Button.svelte'; +import Button from './Button.svelte'; { delay: 100, }); }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/svelte/my-component-play-function-with-delay.mdx.mdx b/docs/snippets/svelte/my-component-play-function-with-delay.mdx.mdx index 21ee812dd57..2706786d711 100644 --- a/docs/snippets/svelte/my-component-play-function-with-delay.mdx.mdx +++ b/docs/snippets/svelte/my-component-play-function-with-delay.mdx.mdx @@ -31,4 +31,4 @@ export const Template = (args) => ({ }}> {Template.bind({})} -``` \ No newline at end of file +``` diff --git a/docs/snippets/vue/accessibility-testing-with-jest-axe.js.mdx b/docs/snippets/vue/accessibility-testing-with-jest-axe.js.mdx index bb64b820159..aa6830b702e 100644 --- a/docs/snippets/vue/accessibility-testing-with-jest-axe.js.mdx +++ b/docs/snippets/vue/accessibility-testing-with-jest-axe.js.mdx @@ -13,11 +13,11 @@ const { Accessible } = composeStories(MyComponentStories); expect.extend(toHaveNoViolations); -test('Example accessiblity test', async () => { +test('Example accessibility test', async () => { const { container } = render(Accessible()); const AxeResults = await axe(container); expect(AxeResults).toHaveNoViolations(); }); -``` \ No newline at end of file +``` diff --git a/docs/snippets/vue/my-component-play-function-with-delay.js.mdx b/docs/snippets/vue/my-component-play-function-with-delay.js.mdx index 2d1c49c9ac7..841f51e3d62 100644 --- a/docs/snippets/vue/my-component-play-function-with-delay.js.mdx +++ b/docs/snippets/vue/my-component-play-function-with-delay.js.mdx @@ -33,4 +33,4 @@ DelayedStory.play = async () => { delay: 100, }); }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/vue/my-component-play-function-with-delay.mdx.mdx b/docs/snippets/vue/my-component-play-function-with-delay.mdx.mdx index 162a4e51884..15b16cd5525 100644 --- a/docs/snippets/vue/my-component-play-function-with-delay.mdx.mdx +++ b/docs/snippets/vue/my-component-play-function-with-delay.mdx.mdx @@ -31,4 +31,4 @@ const Template = (args) => ({ }}> {Template.bind({})} -``` \ No newline at end of file +``` diff --git a/docs/versions/next.json b/docs/versions/next.json index 7b6beec781a..7dc47de4765 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"6.5.0-alpha.59","info":{"plain":"### Maintenance\n\n- CLI: Update the exclude list for upgrade warnings ([#17909](https://github.com/storybookjs/storybook/pull/17909))\n- Examples: Added an external-docs example to show the basic use case ([#17807](https://github.com/storybookjs/storybook/pull/17807))\n\n### Dependency Upgrades\n\n- Migration to Emotion 11 ([#17640](https://github.com/storybookjs/storybook/pull/17640))"}} \ No newline at end of file +{"version":"6.5.0-alpha.64","info":{"plain":"### Features\n\n- CLI/Preact: add interactions to cli template ([#17984](https://github.com/storybookjs/storybook/pull/17984))\n\n### Bug Fixes\n\n- Interactions: Fix show length of object value on MethodCall ([#17649](https://github.com/storybookjs/storybook/pull/17649))\n- React: Fix React 18 react-dom/client dynamic import syntax ([#17987](https://github.com/storybookjs/storybook/pull/17987))\n- Svelte: Fix webpack5/babelModeV7 ([#17939](https://github.com/storybookjs/storybook/pull/17939))\n\n### Maintenance\n\n- Examples: Remove stories from deprecated `options`/`queryparams` addons ([#17977](https://github.com/storybookjs/storybook/pull/17977))\n- Chore: Format versions.ts file using repo config ([#17963](https://github.com/storybookjs/storybook/pull/17963))"}} \ No newline at end of file diff --git a/docs/writing-docs/docs-page.md b/docs/writing-docs/docs-page.md index beddd395d82..36c590e6546 100644 --- a/docs/writing-docs/docs-page.md +++ b/docs/writing-docs/docs-page.md @@ -119,7 +119,7 @@ Then, update your `tsconfig.json` to include the following: } ``` -Finally write your custom React component and and update the `docs.page` [parameter](../writing-stories/parameters.md) to render the custom documentation. +Finally write your custom React component and update the `docs.page` [parameter](../writing-stories/parameters.md) to render the custom documentation. @@ -202,4 +202,4 @@ Here’s an example of how to render Vue stories inline. The following docs conf With this function, anyone using the docs addon for [@storybook/vue](https://github.com/storybookjs/storybook/tree/master/app/vue) can make their stories render inline, either globally with the inlineStories docs parameter, or on a per-story-basis using the inline prop on the `` doc block. -If you come up with an elegant and flexible implementation for the `prepareForInline` function for your framework, let us know. We'd love to make it the default configuration to make inline stories more accessible for a larger variety of frameworks! \ No newline at end of file +If you come up with an elegant and flexible implementation for the `prepareForInline` function for your framework, let us know. We'd love to make it the default configuration to make inline stories more accessible for a larger variety of frameworks! diff --git a/docs/writing-tests/accessibility-testing.md b/docs/writing-tests/accessibility-testing.md index cc14cd06abe..088b4a22790 100644 --- a/docs/writing-tests/accessibility-testing.md +++ b/docs/writing-tests/accessibility-testing.md @@ -150,7 +150,7 @@ Disable accessibility testing for stories or components by adding the following ## Automate accessibility tests with Jest -Accessibility testing with Storybook shortens the feedback loop which means you fix issues faster. Reuse stories in a Jest test and run an accessibility audit on them using the the [jest-axe integration](https://github.com/nickcolley/jest-axe). That also unlocks the ability to integrate accessibility tests into your functional testing pipeline. +Accessibility testing with Storybook shortens the feedback loop which means you fix issues faster. Reuse stories in a Jest test and run an accessibility audit on them using the [jest-axe integration](https://github.com/nickcolley/jest-axe). That also unlocks the ability to integrate accessibility tests into your functional testing pipeline. For example, include the following test file to run an accessibility test on a story: diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json index 29a6423eea3..efa18450e7e 100644 --- a/examples/angular-cli/package.json +++ b/examples/angular-cli/package.json @@ -1,6 +1,6 @@ { "name": "angular-cli", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "private": true, "license": "MIT", "scripts": { @@ -39,21 +39,21 @@ "@angular/compiler-cli": "^11.2.14", "@angular/elements": "^11.2.14", "@compodoc/compodoc": "^1.1.18", - "@storybook/addon-a11y": "6.5.0-alpha.59", - "@storybook/addon-actions": "6.5.0-alpha.59", - "@storybook/addon-backgrounds": "6.5.0-alpha.59", - "@storybook/addon-controls": "6.5.0-alpha.59", - "@storybook/addon-docs": "6.5.0-alpha.59", - "@storybook/addon-interactions": "6.5.0-alpha.59", - "@storybook/addon-jest": "6.5.0-alpha.59", - "@storybook/addon-links": "6.5.0-alpha.59", - "@storybook/addon-storyshots": "6.5.0-alpha.59", - "@storybook/addon-storysource": "6.5.0-alpha.59", - "@storybook/addons": "6.5.0-alpha.59", - "@storybook/angular": "6.5.0-alpha.59", + "@storybook/addon-a11y": "6.5.0-alpha.64", + "@storybook/addon-actions": "6.5.0-alpha.64", + "@storybook/addon-backgrounds": "6.5.0-alpha.64", + "@storybook/addon-controls": "6.5.0-alpha.64", + "@storybook/addon-docs": "6.5.0-alpha.64", + "@storybook/addon-interactions": "6.5.0-alpha.64", + "@storybook/addon-jest": "6.5.0-alpha.64", + "@storybook/addon-links": "6.5.0-alpha.64", + "@storybook/addon-storyshots": "6.5.0-alpha.64", + "@storybook/addon-storysource": "6.5.0-alpha.64", + "@storybook/addons": "6.5.0-alpha.64", + "@storybook/angular": "6.5.0-alpha.64", "@storybook/babel-plugin-require-context-hook": "1.0.1", "@storybook/jest": "^0.0.5", - "@storybook/source-loader": "6.5.0-alpha.59", + "@storybook/source-loader": "6.5.0-alpha.64", "@storybook/testing-library": "^0.0.7", "@types/core-js": "^2.5.4", "@types/jest": "^26.0.16", diff --git a/examples/cra-kitchen-sink/package.json b/examples/cra-kitchen-sink/package.json index e17ba4f3893..9df7588f4ac 100644 --- a/examples/cra-kitchen-sink/package.json +++ b/examples/cra-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "cra-kitchen-sink", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "private": true, "scripts": { "build": "react-scripts build", @@ -11,7 +11,7 @@ "test": "react-scripts test --env=jsdom" }, "dependencies": { - "@storybook/client-logger": "6.5.0-alpha.59", + "@storybook/client-logger": "6.5.0-alpha.64", "global": "^4.4.0", "prop-types": "^15.7.2", "react": "16.14.0", @@ -21,19 +21,19 @@ }, "devDependencies": { "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3", - "@storybook/addon-a11y": "6.5.0-alpha.59", - "@storybook/addon-actions": "6.5.0-alpha.59", - "@storybook/addon-backgrounds": "6.5.0-alpha.59", - "@storybook/addon-docs": "6.5.0-alpha.59", + "@storybook/addon-a11y": "6.5.0-alpha.64", + "@storybook/addon-actions": "6.5.0-alpha.64", + "@storybook/addon-backgrounds": "6.5.0-alpha.64", + "@storybook/addon-docs": "6.5.0-alpha.64", "@storybook/addon-ie11": "0.0.7--canary.5e87b64.0", - "@storybook/addon-jest": "6.5.0-alpha.59", - "@storybook/addon-links": "6.5.0-alpha.59", - "@storybook/addon-storyshots": "6.5.0-alpha.59", - "@storybook/addons": "6.5.0-alpha.59", - "@storybook/builder-webpack4": "6.5.0-alpha.59", + "@storybook/addon-jest": "6.5.0-alpha.64", + "@storybook/addon-links": "6.5.0-alpha.64", + "@storybook/addon-storyshots": "6.5.0-alpha.64", + "@storybook/addons": "6.5.0-alpha.64", + "@storybook/builder-webpack4": "6.5.0-alpha.64", "@storybook/preset-create-react-app": "^3.1.6", - "@storybook/react": "6.5.0-alpha.59", - "@storybook/theming": "6.5.0-alpha.59", + "@storybook/react": "6.5.0-alpha.64", + "@storybook/theming": "6.5.0-alpha.64", "webpack": "4" }, "storybook": { diff --git a/examples/cra-react15/package.json b/examples/cra-react15/package.json index 147b40513dc..3f13c278bd3 100644 --- a/examples/cra-react15/package.json +++ b/examples/cra-react15/package.json @@ -1,6 +1,6 @@ { "name": "cra-react15", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "private": true, "scripts": { "build": "react-scripts build", @@ -19,14 +19,14 @@ "react-scripts": "3.4.4" }, "devDependencies": { - "@storybook/addon-actions": "6.5.0-alpha.59", + "@storybook/addon-actions": "6.5.0-alpha.64", "@storybook/addon-ie11": "0.0.7--canary.5e87b64.0", - "@storybook/addon-links": "6.5.0-alpha.59", - "@storybook/addons": "6.5.0-alpha.59", - "@storybook/builder-webpack4": "6.5.0-alpha.59", + "@storybook/addon-links": "6.5.0-alpha.64", + "@storybook/addons": "6.5.0-alpha.64", + "@storybook/builder-webpack4": "6.5.0-alpha.64", "@storybook/preset-create-react-app": "^3.1.6", - "@storybook/react": "6.5.0-alpha.59", - "@storybook/theming": "6.5.0-alpha.59", + "@storybook/react": "6.5.0-alpha.64", + "@storybook/theming": "6.5.0-alpha.64", "babel-core": "6", "babel-runtime": "6", "webpack": "4" diff --git a/examples/cra-ts-essentials/package.json b/examples/cra-ts-essentials/package.json index 7b4303918e9..a1c58da5073 100644 --- a/examples/cra-ts-essentials/package.json +++ b/examples/cra-ts-essentials/package.json @@ -1,6 +1,6 @@ { "name": "cra-ts-essentials", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "private": true, "scripts": { "build": "react-scripts build", @@ -23,8 +23,8 @@ ] }, "dependencies": { - "@storybook/components": "6.5.0-alpha.59", - "@storybook/theming": "6.5.0-alpha.59", + "@storybook/components": "6.5.0-alpha.64", + "@storybook/theming": "6.5.0-alpha.64", "@types/jest": "^26.0.16", "@types/node": "^14.14.20 || ^16.0.0", "@types/react": "^16.14.23", @@ -37,12 +37,12 @@ "typescript": "^3.9.7" }, "devDependencies": { - "@storybook/addon-essentials": "6.5.0-alpha.59", + "@storybook/addon-essentials": "6.5.0-alpha.64", "@storybook/addon-ie11": "0.0.7--canary.5e87b64.0", - "@storybook/addons": "6.5.0-alpha.59", - "@storybook/builder-webpack4": "6.5.0-alpha.59", + "@storybook/addons": "6.5.0-alpha.64", + "@storybook/builder-webpack4": "6.5.0-alpha.64", "@storybook/preset-create-react-app": "^3.1.6", - "@storybook/react": "6.5.0-alpha.59", + "@storybook/react": "6.5.0-alpha.64", "@storybook/testing-library": "^0.0.9", "webpack": "4" }, diff --git a/examples/cra-ts-kitchen-sink/package.json b/examples/cra-ts-kitchen-sink/package.json index d10936cb8e9..42d5a102580 100644 --- a/examples/cra-ts-kitchen-sink/package.json +++ b/examples/cra-ts-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "cra-ts-kitchen-sink", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "private": true, "scripts": { "build": "react-scripts build", @@ -34,15 +34,15 @@ "typescript": "^3.9.7" }, "devDependencies": { - "@storybook/addon-a11y": "6.5.0-alpha.59", - "@storybook/addon-actions": "6.5.0-alpha.59", - "@storybook/addon-docs": "6.5.0-alpha.59", + "@storybook/addon-a11y": "6.5.0-alpha.64", + "@storybook/addon-actions": "6.5.0-alpha.64", + "@storybook/addon-docs": "6.5.0-alpha.64", "@storybook/addon-ie11": "0.0.7--canary.5e87b64.0", - "@storybook/addon-links": "6.5.0-alpha.59", - "@storybook/addons": "6.5.0-alpha.59", - "@storybook/builder-webpack4": "6.5.0-alpha.59", + "@storybook/addon-links": "6.5.0-alpha.64", + "@storybook/addons": "6.5.0-alpha.64", + "@storybook/builder-webpack4": "6.5.0-alpha.64", "@storybook/preset-create-react-app": "^3.1.6", - "@storybook/react": "6.5.0-alpha.59", + "@storybook/react": "6.5.0-alpha.64", "@types/enzyme": "^3.10.8", "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.9.1", diff --git a/examples/ember-cli/package.json b/examples/ember-cli/package.json index 2c3d5a1372c..c614af211a9 100644 --- a/examples/ember-cli/package.json +++ b/examples/ember-cli/package.json @@ -1,6 +1,6 @@ { "name": "ember-example", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "private": true, "scripts": { "build": "ember build --output-path ember-output", @@ -17,18 +17,18 @@ "devDependencies": { "@babel/core": "^7.12.10", "@ember/optional-features": "^2.0.0", - "@storybook/addon-a11y": "6.5.0-alpha.59", - "@storybook/addon-actions": "6.5.0-alpha.59", - "@storybook/addon-backgrounds": "6.5.0-alpha.59", - "@storybook/addon-controls": "6.5.0-alpha.59", - "@storybook/addon-docs": "6.5.0-alpha.59", - "@storybook/addon-links": "6.5.0-alpha.59", - "@storybook/addon-storysource": "6.5.0-alpha.59", - "@storybook/addon-viewport": "6.5.0-alpha.59", - "@storybook/addons": "6.5.0-alpha.59", - "@storybook/ember": "6.5.0-alpha.59", + "@storybook/addon-a11y": "6.5.0-alpha.64", + "@storybook/addon-actions": "6.5.0-alpha.64", + "@storybook/addon-backgrounds": "6.5.0-alpha.64", + "@storybook/addon-controls": "6.5.0-alpha.64", + "@storybook/addon-docs": "6.5.0-alpha.64", + "@storybook/addon-links": "6.5.0-alpha.64", + "@storybook/addon-storysource": "6.5.0-alpha.64", + "@storybook/addon-viewport": "6.5.0-alpha.64", + "@storybook/addons": "6.5.0-alpha.64", + "@storybook/ember": "6.5.0-alpha.64", "@storybook/ember-cli-storybook": "^0.2.1", - "@storybook/source-loader": "6.5.0-alpha.59", + "@storybook/source-loader": "6.5.0-alpha.64", "babel-loader": "^8.0.0", "broccoli-asset-rev": "^3.0.0", "cross-env": "^7.0.3", diff --git a/examples/external-docs/package.json b/examples/external-docs/package.json index f65acfefded..f5cd3375fcd 100644 --- a/examples/external-docs/package.json +++ b/examples/external-docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/external-docs", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "private": true, "scripts": { "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./src/.storybook", @@ -10,13 +10,13 @@ "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 --no-manager-cache -c ./src/.storybook" }, "dependencies": { - "@storybook/addon-essentials": "6.5.0-alpha.59", - "@storybook/components": "6.5.0-alpha.59", + "@storybook/addon-essentials": "6.5.0-alpha.64", + "@storybook/components": "6.5.0-alpha.64", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/preview-web": "6.5.0-alpha.59", - "@storybook/react": "6.5.0-alpha.59", - "@storybook/store": "6.5.0-alpha.59", - "@storybook/theming": "6.5.0-alpha.59", + "@storybook/preview-web": "6.5.0-alpha.64", + "@storybook/react": "6.5.0-alpha.64", + "@storybook/store": "6.5.0-alpha.64", + "@storybook/theming": "6.5.0-alpha.64", "formik": "^2.2.9", "prop-types": "15.7.2", "react": "16.14.0", diff --git a/examples/html-kitchen-sink/package.json b/examples/html-kitchen-sink/package.json index 7d54f302fa4..f14e2418f48 100644 --- a/examples/html-kitchen-sink/package.json +++ b/examples/html-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "html-kitchen-sink", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "private": true, "description": "", "keywords": [], @@ -13,23 +13,23 @@ "storybook": "start-storybook -p 9006 --no-manager-cache" }, "devDependencies": { - "@storybook/addon-a11y": "6.5.0-alpha.59", - "@storybook/addon-actions": "6.5.0-alpha.59", - "@storybook/addon-backgrounds": "6.5.0-alpha.59", - "@storybook/addon-controls": "6.5.0-alpha.59", - "@storybook/addon-docs": "6.5.0-alpha.59", - "@storybook/addon-jest": "6.5.0-alpha.59", - "@storybook/addon-links": "6.5.0-alpha.59", + "@storybook/addon-a11y": "6.5.0-alpha.64", + "@storybook/addon-actions": "6.5.0-alpha.64", + "@storybook/addon-backgrounds": "6.5.0-alpha.64", + "@storybook/addon-controls": "6.5.0-alpha.64", + "@storybook/addon-docs": "6.5.0-alpha.64", + "@storybook/addon-jest": "6.5.0-alpha.64", + "@storybook/addon-links": "6.5.0-alpha.64", "@storybook/addon-postcss": "^2.0.0", - "@storybook/addon-storyshots": "6.5.0-alpha.59", - "@storybook/addon-storysource": "6.5.0-alpha.59", - "@storybook/addon-viewport": "6.5.0-alpha.59", - "@storybook/addons": "6.5.0-alpha.59", - "@storybook/client-api": "6.5.0-alpha.59", - "@storybook/core": "6.5.0-alpha.59", - "@storybook/core-events": "6.5.0-alpha.59", - "@storybook/html": "6.5.0-alpha.59", - "@storybook/source-loader": "6.5.0-alpha.59", + "@storybook/addon-storyshots": "6.5.0-alpha.64", + "@storybook/addon-storysource": "6.5.0-alpha.64", + "@storybook/addon-viewport": "6.5.0-alpha.64", + "@storybook/addons": "6.5.0-alpha.64", + "@storybook/client-api": "6.5.0-alpha.64", + "@storybook/core": "6.5.0-alpha.64", + "@storybook/core-events": "6.5.0-alpha.64", + "@storybook/html": "6.5.0-alpha.64", + "@storybook/source-loader": "6.5.0-alpha.64", "autoprefixer": "^10.0.1", "eventemitter3": "^4.0.7", "format-json": "^1.0.3", diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json index 8f6e1da1778..930b8ffec02 100644 --- a/examples/official-storybook/package.json +++ b/examples/official-storybook/package.json @@ -1,6 +1,6 @@ { "name": "official-storybook", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "private": true, "scripts": { "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./", @@ -13,31 +13,31 @@ "devDependencies": { "@emotion/jest": "^11.8.0", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3", - "@storybook/addon-a11y": "6.5.0-alpha.59", - "@storybook/addon-actions": "6.5.0-alpha.59", - "@storybook/addon-backgrounds": "6.5.0-alpha.59", - "@storybook/addon-controls": "6.5.0-alpha.59", - "@storybook/addon-docs": "6.5.0-alpha.59", - "@storybook/addon-interactions": "6.5.0-alpha.59", - "@storybook/addon-jest": "6.5.0-alpha.59", - "@storybook/addon-links": "6.5.0-alpha.59", - "@storybook/addon-storyshots": "6.5.0-alpha.59", - "@storybook/addon-storyshots-puppeteer": "6.5.0-alpha.59", - "@storybook/addon-storysource": "6.5.0-alpha.59", - "@storybook/addon-toolbars": "6.5.0-alpha.59", - "@storybook/addon-viewport": "6.5.0-alpha.59", - "@storybook/addons": "6.5.0-alpha.59", - "@storybook/cli": "6.5.0-alpha.59", - "@storybook/components": "6.5.0-alpha.59", - "@storybook/core-events": "6.5.0-alpha.59", + "@storybook/addon-a11y": "6.5.0-alpha.64", + "@storybook/addon-actions": "6.5.0-alpha.64", + "@storybook/addon-backgrounds": "6.5.0-alpha.64", + "@storybook/addon-controls": "6.5.0-alpha.64", + "@storybook/addon-docs": "6.5.0-alpha.64", + "@storybook/addon-interactions": "6.5.0-alpha.64", + "@storybook/addon-jest": "6.5.0-alpha.64", + "@storybook/addon-links": "6.5.0-alpha.64", + "@storybook/addon-storyshots": "6.5.0-alpha.64", + "@storybook/addon-storyshots-puppeteer": "6.5.0-alpha.64", + "@storybook/addon-storysource": "6.5.0-alpha.64", + "@storybook/addon-toolbars": "6.5.0-alpha.64", + "@storybook/addon-viewport": "6.5.0-alpha.64", + "@storybook/addons": "6.5.0-alpha.64", + "@storybook/cli": "6.5.0-alpha.64", + "@storybook/components": "6.5.0-alpha.64", + "@storybook/core-events": "6.5.0-alpha.64", "@storybook/design-system": "^5.4.7", "@storybook/jest": "^0.0.5", - "@storybook/node-logger": "6.5.0-alpha.59", - "@storybook/react": "6.5.0-alpha.59", - "@storybook/router": "6.5.0-alpha.59", - "@storybook/source-loader": "6.5.0-alpha.59", + "@storybook/node-logger": "6.5.0-alpha.64", + "@storybook/react": "6.5.0-alpha.64", + "@storybook/router": "6.5.0-alpha.64", + "@storybook/source-loader": "6.5.0-alpha.64", "@storybook/testing-library": "^0.0.7", - "@storybook/theming": "6.5.0-alpha.59", + "@storybook/theming": "6.5.0-alpha.64", "@testing-library/dom": "^7.31.2", "@testing-library/user-event": "^13.1.9", "chromatic": "^6.0.2", diff --git a/examples/official-storybook/stories/addon-options.stories.js b/examples/official-storybook/stories/addon-options.stories.js deleted file mode 100644 index 0ee37459418..00000000000 --- a/examples/official-storybook/stories/addon-options.stories.js +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; - -export default { - title: 'Addons/Options', -}; - -export const SettingName = () => ( -
This story should have changed the name of the storybook
-); - -SettingName.storyName = 'setting name'; - -SettingName.parameters = { - options: { - name: 'Custom Storybook', - }, -}; - -export const HidingAddonPanel = () => ( -
This story should have changed hidden the addons panel
-); - -HidingAddonPanel.storyName = 'hiding addon panel'; - -HidingAddonPanel.parameters = { - options: { - showPanel: false, - }, -}; diff --git a/examples/official-storybook/stories/addon-queryparams.stories.js b/examples/official-storybook/stories/addon-queryparams.stories.js deleted file mode 100644 index 4b0cd74f7b0..00000000000 --- a/examples/official-storybook/stories/addon-queryparams.stories.js +++ /dev/null @@ -1,27 +0,0 @@ -import global from 'global'; -import React from 'react'; - -const { document } = global; - -export default { - title: 'Addons/QueryParams', - - parameters: { - query: { - mock: true, - }, - }, -}; - -export const MockIsTrue = () => ( -
This story should have an extra url query param: {document.location.search}
-); - -MockIsTrue.storyName = 'mock is true'; - -export const MockIs4 = () => ( -
This story should have an extra url query param: {document.location.search}
-); - -MockIs4.storyName = 'mock is 4'; -MockIs4.parameters = { query: { mock: 4 } }; diff --git a/examples/preact-kitchen-sink/package.json b/examples/preact-kitchen-sink/package.json index 64479806af7..d416833a67f 100644 --- a/examples/preact-kitchen-sink/package.json +++ b/examples/preact-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "preact-example", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "private": true, "scripts": { "build": "cross-env NODE_ENV=production webpack --progress --hide-modules", @@ -15,16 +15,16 @@ "devDependencies": { "@babel/core": "^7.12.10", "@babel/plugin-transform-runtime": "^7.12.10", - "@storybook/addon-a11y": "6.5.0-alpha.59", - "@storybook/addon-actions": "6.5.0-alpha.59", - "@storybook/addon-backgrounds": "6.5.0-alpha.59", - "@storybook/addon-links": "6.5.0-alpha.59", - "@storybook/addon-storyshots": "6.5.0-alpha.59", - "@storybook/addon-storysource": "6.5.0-alpha.59", - "@storybook/addon-viewport": "6.5.0-alpha.59", - "@storybook/addons": "6.5.0-alpha.59", - "@storybook/preact": "6.5.0-alpha.59", - "@storybook/source-loader": "6.5.0-alpha.59", + "@storybook/addon-a11y": "6.5.0-alpha.64", + "@storybook/addon-actions": "6.5.0-alpha.64", + "@storybook/addon-backgrounds": "6.5.0-alpha.64", + "@storybook/addon-links": "6.5.0-alpha.64", + "@storybook/addon-storyshots": "6.5.0-alpha.64", + "@storybook/addon-storysource": "6.5.0-alpha.64", + "@storybook/addon-viewport": "6.5.0-alpha.64", + "@storybook/addons": "6.5.0-alpha.64", + "@storybook/preact": "6.5.0-alpha.64", + "@storybook/source-loader": "6.5.0-alpha.64", "@types/prop-types": "^15.7.3", "@types/react": "^17", "@types/react-dom": "^17", diff --git a/examples/react-ts-webpack4/package.json b/examples/react-ts-webpack4/package.json index 0a986433536..d14d8dcc2e9 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.5.0-alpha.59", + "version": "6.5.0-alpha.64", "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 ./ --no-manager-cache" }, "dependencies": { - "@storybook/addon-controls": "6.5.0-alpha.59", - "@storybook/addon-essentials": "6.5.0-alpha.59", - "@storybook/builder-webpack4": "6.5.0-alpha.59", - "@storybook/react": "6.5.0-alpha.59", + "@storybook/addon-controls": "6.5.0-alpha.64", + "@storybook/addon-essentials": "6.5.0-alpha.64", + "@storybook/builder-webpack4": "6.5.0-alpha.64", + "@storybook/react": "6.5.0-alpha.64", "@types/react": "^16.14.23", "@types/react-dom": "^16.9.14", "prop-types": "15.7.2", diff --git a/examples/react-ts/package.json b/examples/react-ts/package.json index 688443f7974..b4ffe9495ba 100644 --- a/examples/react-ts/package.json +++ b/examples/react-ts/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/example-react-ts", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "private": true, "scripts": { "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook", @@ -18,13 +18,13 @@ "@babel/preset-env": "^7.12.11", "@babel/preset-react": "^7.12.10", "@babel/preset-typescript": "^7.12.7", - "@storybook/addon-essentials": "6.5.0-alpha.59", - "@storybook/addon-storyshots": "6.5.0-alpha.59", - "@storybook/addon-storysource": "6.5.0-alpha.59", - "@storybook/cli": "6.5.0-alpha.59", - "@storybook/components": "6.5.0-alpha.59", - "@storybook/react": "6.5.0-alpha.59", - "@storybook/theming": "6.5.0-alpha.59", + "@storybook/addon-essentials": "6.5.0-alpha.64", + "@storybook/addon-storyshots": "6.5.0-alpha.64", + "@storybook/addon-storysource": "6.5.0-alpha.64", + "@storybook/cli": "6.5.0-alpha.64", + "@storybook/components": "6.5.0-alpha.64", + "@storybook/react": "6.5.0-alpha.64", + "@storybook/theming": "6.5.0-alpha.64", "@testing-library/dom": "^7.31.2", "@testing-library/react": "12.1.2", "@testing-library/user-event": "^13.1.9", diff --git a/examples/server-kitchen-sink/package.json b/examples/server-kitchen-sink/package.json index af38513f472..9d9ecc7217b 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.5.0-alpha.59", + "version": "6.5.0-alpha.64", "private": true, "description": "", "keywords": [], @@ -14,13 +14,13 @@ "storybook": "SERVER_PORT=1137 start-storybook -p 9006 --quiet" }, "devDependencies": { - "@storybook/addon-a11y": "6.5.0-alpha.59", - "@storybook/addon-actions": "6.5.0-alpha.59", - "@storybook/addon-backgrounds": "6.5.0-alpha.59", - "@storybook/addon-controls": "6.5.0-alpha.59", - "@storybook/addon-links": "6.5.0-alpha.59", - "@storybook/node-logger": "6.5.0-alpha.59", - "@storybook/server": "6.5.0-alpha.59", + "@storybook/addon-a11y": "6.5.0-alpha.64", + "@storybook/addon-actions": "6.5.0-alpha.64", + "@storybook/addon-backgrounds": "6.5.0-alpha.64", + "@storybook/addon-controls": "6.5.0-alpha.64", + "@storybook/addon-links": "6.5.0-alpha.64", + "@storybook/node-logger": "6.5.0-alpha.64", + "@storybook/server": "6.5.0-alpha.64", "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 4ecf7759ad2..5e437ebfdb8 100644 --- a/examples/standalone-preview/package.json +++ b/examples/standalone-preview/package.json @@ -1,15 +1,15 @@ { "name": "standalone-preview", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "private": true, "scripts": { "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ../official-storybook --no-manager-cache --preview-url=http://localhost:1337/external-iframe.html", "storybook-preview": "cross-env PREVIEW_URL=external-iframe.html parcel ./storybook.html --port 1337" }, "devDependencies": { - "@storybook/addon-docs": "6.5.0-alpha.59", - "@storybook/cli": "6.5.0-alpha.59", - "@storybook/react": "6.5.0-alpha.59", + "@storybook/addon-docs": "6.5.0-alpha.64", + "@storybook/cli": "6.5.0-alpha.64", + "@storybook/react": "6.5.0-alpha.64", "cross-env": "^7.0.3", "parcel": "2.0.1", "react": "16.14.0", diff --git a/examples/svelte-kitchen-sink/package.json b/examples/svelte-kitchen-sink/package.json index c8d95f7529b..2bbc33283ef 100644 --- a/examples/svelte-kitchen-sink/package.json +++ b/examples/svelte-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "svelte-example", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "private": true, "scripts": { "build-storybook": "build-storybook", @@ -10,20 +10,20 @@ "global": "^4.4.0" }, "devDependencies": { - "@storybook/addon-a11y": "6.5.0-alpha.59", - "@storybook/addon-actions": "6.5.0-alpha.59", - "@storybook/addon-backgrounds": "6.5.0-alpha.59", - "@storybook/addon-controls": "6.5.0-alpha.59", - "@storybook/addon-docs": "6.5.0-alpha.59", - "@storybook/addon-interactions": "6.5.0-alpha.59", - "@storybook/addon-links": "6.5.0-alpha.59", - "@storybook/addon-storyshots": "6.5.0-alpha.59", - "@storybook/addon-storysource": "6.5.0-alpha.59", - "@storybook/addon-viewport": "6.5.0-alpha.59", - "@storybook/addons": "6.5.0-alpha.59", + "@storybook/addon-a11y": "6.5.0-alpha.64", + "@storybook/addon-actions": "6.5.0-alpha.64", + "@storybook/addon-backgrounds": "6.5.0-alpha.64", + "@storybook/addon-controls": "6.5.0-alpha.64", + "@storybook/addon-docs": "6.5.0-alpha.64", + "@storybook/addon-interactions": "6.5.0-alpha.64", + "@storybook/addon-links": "6.5.0-alpha.64", + "@storybook/addon-storyshots": "6.5.0-alpha.64", + "@storybook/addon-storysource": "6.5.0-alpha.64", + "@storybook/addon-viewport": "6.5.0-alpha.64", + "@storybook/addons": "6.5.0-alpha.64", "@storybook/jest": "^0.0.5", - "@storybook/source-loader": "6.5.0-alpha.59", - "@storybook/svelte": "6.5.0-alpha.59", + "@storybook/source-loader": "6.5.0-alpha.64", + "@storybook/svelte": "6.5.0-alpha.64", "@storybook/testing-library": "^0.0.7", "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 8bb53f7890e..7ea09512fa3 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.5.0-alpha.59", + "version": "6.5.0-alpha.64", "private": true, "scripts": { "build": "vue-cli-service build", @@ -14,14 +14,14 @@ }, "devDependencies": { "@babel/core": "^7.12.10", - "@storybook/addon-actions": "6.5.0-alpha.59", - "@storybook/addon-essentials": "6.5.0-alpha.59", - "@storybook/addon-interactions": "6.5.0-alpha.59", - "@storybook/addon-links": "6.5.0-alpha.59", - "@storybook/addon-storyshots": "6.5.0-alpha.59", + "@storybook/addon-actions": "6.5.0-alpha.64", + "@storybook/addon-essentials": "6.5.0-alpha.64", + "@storybook/addon-interactions": "6.5.0-alpha.64", + "@storybook/addon-links": "6.5.0-alpha.64", + "@storybook/addon-storyshots": "6.5.0-alpha.64", "@storybook/jest": "^0.0.5", "@storybook/testing-library": "^0.0.7", - "@storybook/vue3": "6.5.0-alpha.59", + "@storybook/vue3": "6.5.0-alpha.64", "@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 df055e80b53..56a41fb21bf 100644 --- a/examples/vue-cli/package.json +++ b/examples/vue-cli/package.json @@ -1,6 +1,6 @@ { "name": "vue-cli-example", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "private": true, "scripts": { "build": "vue-cli-service build", @@ -15,11 +15,11 @@ "vue-property-decorator": "^9.1.2" }, "devDependencies": { - "@storybook/addon-controls": "6.5.0-alpha.59", - "@storybook/addon-essentials": "6.5.0-alpha.59", + "@storybook/addon-controls": "6.5.0-alpha.64", + "@storybook/addon-essentials": "6.5.0-alpha.64", "@storybook/preset-scss": "^1.0.3", - "@storybook/source-loader": "6.5.0-alpha.59", - "@storybook/vue": "6.5.0-alpha.59", + "@storybook/source-loader": "6.5.0-alpha.64", + "@storybook/vue": "6.5.0-alpha.64", "@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 389b8e36503..e639de7cbd7 100644 --- a/examples/vue-kitchen-sink/package.json +++ b/examples/vue-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "vue-example", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "private": true, "scripts": { "build": "cross-env NODE_ENV=production webpack --progress --hide-modules", @@ -14,21 +14,21 @@ }, "devDependencies": { "@babel/core": "^7.12.10", - "@storybook/addon-a11y": "6.5.0-alpha.59", - "@storybook/addon-actions": "6.5.0-alpha.59", - "@storybook/addon-backgrounds": "6.5.0-alpha.59", - "@storybook/addon-controls": "6.5.0-alpha.59", - "@storybook/addon-docs": "6.5.0-alpha.59", - "@storybook/addon-interactions": "6.5.0-alpha.59", - "@storybook/addon-links": "6.5.0-alpha.59", - "@storybook/addon-storyshots": "6.5.0-alpha.59", - "@storybook/addon-storysource": "6.5.0-alpha.59", - "@storybook/addon-viewport": "6.5.0-alpha.59", - "@storybook/addons": "6.5.0-alpha.59", + "@storybook/addon-a11y": "6.5.0-alpha.64", + "@storybook/addon-actions": "6.5.0-alpha.64", + "@storybook/addon-backgrounds": "6.5.0-alpha.64", + "@storybook/addon-controls": "6.5.0-alpha.64", + "@storybook/addon-docs": "6.5.0-alpha.64", + "@storybook/addon-interactions": "6.5.0-alpha.64", + "@storybook/addon-links": "6.5.0-alpha.64", + "@storybook/addon-storyshots": "6.5.0-alpha.64", + "@storybook/addon-storysource": "6.5.0-alpha.64", + "@storybook/addon-viewport": "6.5.0-alpha.64", + "@storybook/addons": "6.5.0-alpha.64", "@storybook/jest": "^0.0.5", - "@storybook/source-loader": "6.5.0-alpha.59", + "@storybook/source-loader": "6.5.0-alpha.64", "@storybook/testing-library": "^0.0.7", - "@storybook/vue": "6.5.0-alpha.59", + "@storybook/vue": "6.5.0-alpha.64", "@vue/babel-preset-jsx": "^1.2.4", "babel-loader": "^8.0.0", "cross-env": "^7.0.3", diff --git a/examples/web-components-kitchen-sink/package.json b/examples/web-components-kitchen-sink/package.json index 6901bdfee72..dfe6ae69286 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.5.0-alpha.59", + "version": "6.5.0-alpha.64", "private": true, "description": "", "keywords": [], diff --git a/lerna.json b/lerna.json index 89fd1b2b2ab..874148c38c7 100644 --- a/lerna.json +++ b/lerna.json @@ -2,5 +2,5 @@ "npmClient": "yarn", "useWorkspaces": true, "registry": "https://registry.npmjs.org", - "version": "6.5.0-alpha.59" + "version": "6.5.0-alpha.64" } diff --git a/lib/addons/package.json b/lib/addons/package.json index 8470295c02c..e9187b209cf 100644 --- a/lib/addons/package.json +++ b/lib/addons/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addons", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "Storybook addons store", "keywords": [ "storybook" @@ -40,13 +40,13 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/api": "6.5.0-alpha.59", - "@storybook/channels": "6.5.0-alpha.59", - "@storybook/client-logger": "6.5.0-alpha.59", - "@storybook/core-events": "6.5.0-alpha.59", + "@storybook/api": "6.5.0-alpha.64", + "@storybook/channels": "6.5.0-alpha.64", + "@storybook/client-logger": "6.5.0-alpha.64", + "@storybook/core-events": "6.5.0-alpha.64", "@storybook/csf": "0.0.2--canary.7c6c115.0", - "@storybook/router": "6.5.0-alpha.59", - "@storybook/theming": "6.5.0-alpha.59", + "@storybook/router": "6.5.0-alpha.64", + "@storybook/theming": "6.5.0-alpha.64", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", "global": "^4.4.0", @@ -59,6 +59,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0", + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", "sbmodern": "dist/modern/public_api.js" } diff --git a/lib/api/package.json b/lib/api/package.json index d6dc70f32f0..783d17315c9 100644 --- a/lib/api/package.json +++ b/lib/api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/api", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "Core Storybook API & Context", "keywords": [ "storybook" @@ -38,13 +38,13 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/channels": "6.5.0-alpha.59", - "@storybook/client-logger": "6.5.0-alpha.59", - "@storybook/core-events": "6.5.0-alpha.59", + "@storybook/channels": "6.5.0-alpha.64", + "@storybook/client-logger": "6.5.0-alpha.64", + "@storybook/core-events": "6.5.0-alpha.64", "@storybook/csf": "0.0.2--canary.7c6c115.0", - "@storybook/router": "6.5.0-alpha.59", + "@storybook/router": "6.5.0-alpha.64", "@storybook/semver": "^7.3.2", - "@storybook/theming": "6.5.0-alpha.59", + "@storybook/theming": "6.5.0-alpha.64", "core-js": "^3.8.2", "fast-deep-equal": "^3.1.3", "global": "^4.4.0", @@ -71,6 +71,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0", + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", "sbmodern": "dist/modern/index.js" } diff --git a/lib/api/src/lib/stories.ts b/lib/api/src/lib/stories.ts index f59305e130a..dd6f3169792 100644 --- a/lib/api/src/lib/stories.ts +++ b/lib/api/src/lib/stories.ts @@ -1,3 +1,4 @@ +import memoize from 'memoizerific'; import React from 'react'; import deprecate from 'util-deprecate'; import dedent from 'ts-dedent'; @@ -327,3 +328,17 @@ export function isStory(item: Item): item is Story { } return false; } + +export const getComponentLookupList = memoize(1)((hash: StoriesHash) => { + return Object.entries(hash).reduce((acc, i) => { + const value = i[1]; + if (value.isComponent) { + acc.push([...i[1].children]); + } + return acc; + }, [] as StoryId[][]); +}); + +export const getStoriesLookupList = memoize(1)((hash: StoriesHash) => { + return Object.keys(hash).filter((k) => !(hash[k].children || Array.isArray(hash[k]))); +}); diff --git a/lib/api/src/modules/stories.ts b/lib/api/src/modules/stories.ts index 62b1bf358de..70b3c5ba880 100644 --- a/lib/api/src/modules/stories.ts +++ b/lib/api/src/modules/stories.ts @@ -1,6 +1,7 @@ import global from 'global'; import { toId, sanitize } from '@storybook/csf'; import { + PRELOAD_STORIES, STORY_PREPARED, UPDATE_STORY_ARGS, RESET_STORY_ARGS, @@ -22,7 +23,10 @@ import { isStory, isRoot, transformStoryIndexToStoriesHash, + getComponentLookupList, + getStoriesLookupList, } from '../lib/stories'; + import type { StoriesHash, Story, @@ -77,6 +81,12 @@ export interface SubAPI { updateStoryArgs(story: Story, newArgs: Args): void; resetStoryArgs: (story: Story, argNames?: string[]) => void; findLeafStoryId(StoriesHash: StoriesHash, storyId: StoryId): StoryId; + findSiblingStoryId( + storyId: StoryId, + hash: StoriesHash, + direction: Direction, + toSiblingGroup: boolean // when true, skip over leafs within the same group + ): StoryId; fetchStoryList: () => Promise; setStoryList: (storyList: StoryIndex) => Promise; updateStory: (storyId: StoryId, update: StoryUpdate, ref?: ComposedRef) => Promise; @@ -187,26 +197,7 @@ export const init: ModuleFn = ({ } const hash = refId ? refs[refId].stories || {} : storiesHash; - - const lookupList = Object.entries(hash).reduce((acc, i) => { - const value = i[1]; - if (value.isComponent) { - acc.push([...i[1].children]); - } - return acc; - }, []); - - const index = lookupList.findIndex((i) => i.includes(storyId)); - - // cannot navigate beyond fist or last - if (index === lookupList.length - 1 && direction > 0) { - return; - } - if (index === 0 && direction < 0) { - return; - } - - const result = lookupList[index + direction][0]; + const result = api.findSiblingStoryId(storyId, hash, direction, true); if (result) { api.selectStory(result, undefined, { ref: refId }); @@ -227,21 +218,7 @@ export const init: ModuleFn = ({ } const hash = story.refId ? refs[story.refId].stories : storiesHash; - - const lookupList = Object.keys(hash).filter( - (k) => !(hash[k].children || Array.isArray(hash[k])) - ); - const index = lookupList.indexOf(storyId); - - // cannot navigate beyond fist or last - if (index === lookupList.length - 1 && direction > 0) { - return; - } - if (index === 0 && direction < 0) { - return; - } - - const result = lookupList[index + direction]; + const result = api.findSiblingStoryId(storyId, hash, direction, false); if (result) { api.selectStory(result, undefined, { ref: refId }); @@ -332,6 +309,39 @@ export const init: ModuleFn = ({ const childStoryId = storiesHash[storyId].children[0]; return api.findLeafStoryId(storiesHash, childStoryId); }, + findSiblingStoryId(storyId, hash, direction, toSiblingGroup) { + if (toSiblingGroup) { + const lookupList = getComponentLookupList(hash); + const index = lookupList.findIndex((i) => i.includes(storyId)); + + // cannot navigate beyond fist or last + if (index === lookupList.length - 1 && direction > 0) { + return; + } + if (index === 0 && direction < 0) { + return; + } + + if (lookupList[index + direction]) { + // eslint-disable-next-line consistent-return + return lookupList[index + direction][0]; + } + return; + } + const lookupList = getStoriesLookupList(hash); + const index = lookupList.indexOf(storyId); + + // cannot navigate beyond fist or last + if (index === lookupList.length - 1 && direction > 0) { + return; + } + if (index === 0 && direction < 0) { + return; + } + + // eslint-disable-next-line consistent-return + return lookupList[index + direction]; + }, updateStoryArgs: (story, updatedArgs) => { const { id: storyId, refId } = story; fullAPI.emit(UPDATE_STORY_ARGS, { @@ -448,6 +458,36 @@ export const init: ModuleFn = ({ } }); + fullAPI.on(STORY_PREPARED, function handler({ id, ...update }) { + const { ref, sourceType } = getEventMetadata(this, fullAPI); + fullAPI.updateStory(id, { ...update, prepared: true }, ref); + + if (!ref) { + if (!store.getState().hasCalledSetOptions) { + const { options } = update.parameters; + checkDeprecatedOptionParameters(options); + fullAPI.setOptions(options); + store.setState({ hasCalledSetOptions: true }); + } + } else { + fullAPI.updateRef(ref.id, { ready: true }); + } + + if (sourceType === 'local') { + const { storyId, storiesHash } = store.getState(); + + // create a list of related stories to be preloaded + const toBePreloaded = Array.from( + new Set([ + api.findSiblingStoryId(storyId, storiesHash, 1, true), + api.findSiblingStoryId(storyId, storiesHash, -1, true), + ]) + ).filter(Boolean); + + fullAPI.emit(PRELOAD_STORIES, toBePreloaded); + } + }); + fullAPI.on(SET_STORIES, function handler(data: SetStoriesPayload) { const { ref } = getEventMetadata(this, fullAPI); const stories = data.v ? denormalizeStoryParameters(data) : data.stories; @@ -489,22 +529,6 @@ export const init: ModuleFn = ({ } ); - fullAPI.on(STORY_PREPARED, function handler({ id, ...update }) { - const { ref } = getEventMetadata(this, fullAPI); - fullAPI.updateStory(id, { ...update, prepared: true }, ref); - - if (!ref) { - if (!store.getState().hasCalledSetOptions) { - const { options } = update.parameters; - checkDeprecatedOptionParameters(options); - fullAPI.setOptions(options); - store.setState({ hasCalledSetOptions: true }); - } - } else { - fullAPI.updateRef(ref.id, { ready: true }); - } - }); - fullAPI.on( STORY_ARGS_UPDATED, function handleStoryArgsUpdated({ storyId, args }: { storyId: StoryId; args: Args }) { diff --git a/lib/api/src/tests/stories.test.js b/lib/api/src/tests/stories.test.js index a6158410708..e8eecac18cd 100644 --- a/lib/api/src/tests/stories.test.js +++ b/lib/api/src/tests/stories.test.js @@ -85,8 +85,22 @@ describe('stories API', () => { }); const parameters = {}; const storiesHash = { - 'a--1': { kind: 'a', name: '1', parameters, path: 'a--1', id: 'a--1', args: {} }, - 'a--2': { kind: 'a', name: '2', parameters, path: 'a--2', id: 'a--2', args: {} }, + 'a--1': { + kind: 'a', + name: '1', + parameters, + path: 'a--1', + id: 'a--1', + args: {}, + }, + 'a--2': { + kind: 'a', + name: '2', + parameters, + path: 'a--2', + id: 'a--2', + args: {}, + }, 'b-c--1': { kind: 'b/c', name: '1', @@ -703,6 +717,38 @@ describe('stories API', () => { }); }); + describe('findSiblingStoryId', () => { + it('works forward', () => { + const navigate = jest.fn(); + const store = createMockStore(); + + const storyId = 'a--1'; + const { + api: { setStories, findSiblingStoryId }, + state, + } = initStories({ store, navigate, storyId, viewMode: 'story', provider }); + store.setState(state); + setStories(storiesHash); + + const result = findSiblingStoryId(storyId, storiesHash, 1, false); + expect(result).toBe('a--2'); + }); + it('works forward toSiblingGroup', () => { + const navigate = jest.fn(); + const store = createMockStore(); + + const storyId = 'a--1'; + const { + api: { setStories, findSiblingStoryId }, + state, + } = initStories({ store, navigate, storyId, viewMode: 'story', provider }); + store.setState(state); + setStories(storiesHash); + + const result = findSiblingStoryId(storyId, store.getState().storiesHash, 1, true); + expect(result).toBe('b-c--1'); + }); + }); describe('jumpToComponent', () => { it('works forward', () => { const navigate = jest.fn(); diff --git a/lib/api/src/version.ts b/lib/api/src/version.ts index 13deae29c63..12d1c1f4c41 100644 --- a/lib/api/src/version.ts +++ b/lib/api/src/version.ts @@ -1 +1 @@ -export const version = '6.5.0-alpha.59'; +export const version = '6.5.0-alpha.64'; diff --git a/lib/builder-webpack4/package.json b/lib/builder-webpack4/package.json index ea1af41451c..a7c87eab08a 100644 --- a/lib/builder-webpack4/package.json +++ b/lib/builder-webpack4/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack4", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -40,22 +40,22 @@ }, "dependencies": { "@babel/core": "^7.12.10", - "@storybook/addons": "6.5.0-alpha.59", - "@storybook/api": "6.5.0-alpha.59", - "@storybook/channel-postmessage": "6.5.0-alpha.59", - "@storybook/channels": "6.5.0-alpha.59", - "@storybook/client-api": "6.5.0-alpha.59", - "@storybook/client-logger": "6.5.0-alpha.59", - "@storybook/components": "6.5.0-alpha.59", - "@storybook/core-common": "6.5.0-alpha.59", - "@storybook/core-events": "6.5.0-alpha.59", - "@storybook/node-logger": "6.5.0-alpha.59", - "@storybook/preview-web": "6.5.0-alpha.59", - "@storybook/router": "6.5.0-alpha.59", + "@storybook/addons": "6.5.0-alpha.64", + "@storybook/api": "6.5.0-alpha.64", + "@storybook/channel-postmessage": "6.5.0-alpha.64", + "@storybook/channels": "6.5.0-alpha.64", + "@storybook/client-api": "6.5.0-alpha.64", + "@storybook/client-logger": "6.5.0-alpha.64", + "@storybook/components": "6.5.0-alpha.64", + "@storybook/core-common": "6.5.0-alpha.64", + "@storybook/core-events": "6.5.0-alpha.64", + "@storybook/node-logger": "6.5.0-alpha.64", + "@storybook/preview-web": "6.5.0-alpha.64", + "@storybook/router": "6.5.0-alpha.64", "@storybook/semver": "^7.3.2", - "@storybook/store": "6.5.0-alpha.59", - "@storybook/theming": "6.5.0-alpha.59", - "@storybook/ui": "6.5.0-alpha.59", + "@storybook/store": "6.5.0-alpha.64", + "@storybook/theming": "6.5.0-alpha.64", + "@storybook/ui": "6.5.0-alpha.64", "@types/node": "^14.0.10 || ^16.0.0", "@types/webpack": "^4.41.26", "autoprefixer": "^9.8.6", @@ -106,6 +106,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0", + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", "sbmodern": "dist/modern/index.js" } diff --git a/lib/builder-webpack5/package.json b/lib/builder-webpack5/package.json index 9522b7b6245..54391154fd8 100644 --- a/lib/builder-webpack5/package.json +++ b/lib/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -40,21 +40,21 @@ }, "dependencies": { "@babel/core": "^7.12.10", - "@storybook/addons": "6.5.0-alpha.59", - "@storybook/api": "6.5.0-alpha.59", - "@storybook/channel-postmessage": "6.5.0-alpha.59", - "@storybook/channels": "6.5.0-alpha.59", - "@storybook/client-api": "6.5.0-alpha.59", - "@storybook/client-logger": "6.5.0-alpha.59", - "@storybook/components": "6.5.0-alpha.59", - "@storybook/core-common": "6.5.0-alpha.59", - "@storybook/core-events": "6.5.0-alpha.59", - "@storybook/node-logger": "6.5.0-alpha.59", - "@storybook/preview-web": "6.5.0-alpha.59", - "@storybook/router": "6.5.0-alpha.59", + "@storybook/addons": "6.5.0-alpha.64", + "@storybook/api": "6.5.0-alpha.64", + "@storybook/channel-postmessage": "6.5.0-alpha.64", + "@storybook/channels": "6.5.0-alpha.64", + "@storybook/client-api": "6.5.0-alpha.64", + "@storybook/client-logger": "6.5.0-alpha.64", + "@storybook/components": "6.5.0-alpha.64", + "@storybook/core-common": "6.5.0-alpha.64", + "@storybook/core-events": "6.5.0-alpha.64", + "@storybook/node-logger": "6.5.0-alpha.64", + "@storybook/preview-web": "6.5.0-alpha.64", + "@storybook/router": "6.5.0-alpha.64", "@storybook/semver": "^7.3.2", - "@storybook/store": "6.5.0-alpha.59", - "@storybook/theming": "6.5.0-alpha.59", + "@storybook/store": "6.5.0-alpha.64", + "@storybook/theming": "6.5.0-alpha.64", "@types/node": "^14.0.10 || ^16.0.0", "babel-loader": "^8.0.0", "babel-plugin-named-exports-order": "^0.0.2", @@ -97,6 +97,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0", + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", "sbmodern": "dist/modern/index.js" } diff --git a/lib/channel-postmessage/package.json b/lib/channel-postmessage/package.json index 33fbb81661f..e94af1399ae 100644 --- a/lib/channel-postmessage/package.json +++ b/lib/channel-postmessage/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channel-postmessage", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "", "keywords": [ "storybook" @@ -40,9 +40,9 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/channels": "6.5.0-alpha.59", - "@storybook/client-logger": "6.5.0-alpha.59", - "@storybook/core-events": "6.5.0-alpha.59", + "@storybook/channels": "6.5.0-alpha.64", + "@storybook/client-logger": "6.5.0-alpha.64", + "@storybook/core-events": "6.5.0-alpha.64", "core-js": "^3.8.2", "global": "^4.4.0", "qs": "^6.10.0", @@ -51,6 +51,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0", + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", "sbmodern": "dist/modern/index.js" } diff --git a/lib/channel-websocket/package.json b/lib/channel-websocket/package.json index ae50d9238b3..38777e23430 100644 --- a/lib/channel-websocket/package.json +++ b/lib/channel-websocket/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channel-websocket", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "", "keywords": [ "storybook" @@ -40,8 +40,8 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/channels": "6.5.0-alpha.59", - "@storybook/client-logger": "6.5.0-alpha.59", + "@storybook/channels": "6.5.0-alpha.64", + "@storybook/client-logger": "6.5.0-alpha.64", "core-js": "^3.8.2", "global": "^4.4.0", "telejson": "^5.3.3" @@ -49,6 +49,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0", + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", "sbmodern": "dist/modern/index.js" } diff --git a/lib/channels/package.json b/lib/channels/package.json index 727a268243f..d5382803f0a 100644 --- a/lib/channels/package.json +++ b/lib/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "", "keywords": [ "storybook" @@ -47,6 +47,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0", + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", "sbmodern": "dist/modern/index.js" } diff --git a/lib/cli-sb/package.json b/lib/cli-sb/package.json index 67ab23061f1..04d0858d574 100644 --- a/lib/cli-sb/package.json +++ b/lib/cli-sb/package.json @@ -1,6 +1,6 @@ { "name": "sb", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "Storybook CLI", "keywords": [ "storybook" @@ -24,10 +24,10 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/cli": "6.5.0-alpha.59" + "@storybook/cli": "6.5.0-alpha.64" }, "publishConfig": { "access": "public" }, - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0" + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5" } diff --git a/lib/cli-storybook/package.json b/lib/cli-storybook/package.json index b1020645e0d..cf0d292f2f5 100644 --- a/lib/cli-storybook/package.json +++ b/lib/cli-storybook/package.json @@ -1,6 +1,6 @@ { "name": "storybook", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "Storybook CLI", "keywords": [ "storybook" @@ -27,10 +27,10 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/cli": "6.5.0-alpha.59" + "@storybook/cli": "6.5.0-alpha.64" }, "publishConfig": { "access": "public" }, - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0" + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5" } diff --git a/lib/cli/package.json b/lib/cli/package.json index 3f7786de2c3..a9685f02cd0 100644 --- a/lib/cli/package.json +++ b/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "6.5.0-alpha.59", + "version": "6.5.0-alpha.64", "description": "Storybook's CLI - easiest method of adding storybook to your projects", "keywords": [ "cli", @@ -47,10 +47,10 @@ "dependencies": { "@babel/core": "^7.12.10", "@babel/preset-env": "^7.12.11", - "@storybook/codemod": "6.5.0-alpha.59", - "@storybook/core-common": "6.5.0-alpha.59", - "@storybook/csf-tools": "6.5.0-alpha.59", - "@storybook/node-logger": "6.5.0-alpha.59", + "@storybook/codemod": "6.5.0-alpha.64", + "@storybook/core-common": "6.5.0-alpha.64", + "@storybook/csf-tools": "6.5.0-alpha.64", + "@storybook/node-logger": "6.5.0-alpha.64", "@storybook/semver": "^7.3.2", "boxen": "^5.1.2", "chalk": "^4.1.0", @@ -75,7 +75,7 @@ "update-notifier": "^5.0.1" }, "devDependencies": { - "@storybook/client-api": "6.5.0-alpha.59", + "@storybook/client-api": "6.5.0-alpha.64", "@types/cross-spawn": "^6.0.2", "@types/prompts": "^2.0.9", "@types/puppeteer-core": "^2.1.0", @@ -91,5 +91,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "5c572a448ca6dee4e486944b7e1e3cb17b09d9a0" + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5" } diff --git a/lib/cli/scripts/generate-sb-packages-versions.js b/lib/cli/scripts/generate-sb-packages-versions.js index 0f181d64e0a..aab6c42ccb0 100755 --- a/lib/cli/scripts/generate-sb-packages-versions.js +++ b/lib/cli/scripts/generate-sb-packages-versions.js @@ -1,6 +1,7 @@ #!/usr/bin/env node const { readJson, writeFile } = require('fs-extra'); +const { exec } = require('child_process'); const path = require('path'); const globby = require('globby'); const semver = require('@storybook/semver'); @@ -47,6 +48,10 @@ const run = async () => { export default ${JSON.stringify(packageToVersionMap, null, 2)} ` ); + + exec(`yarn lint:js:cmd --fix ${path.join(__dirname, '..', 'src', 'versions.ts')}`, { + cwd: path.join(__dirname, '..', '..', '..'), + }); }; run().catch((e) => { diff --git a/lib/cli/src/frameworks/preact/Header.jsx b/lib/cli/src/frameworks/preact/Header.jsx index f425ec15286..06580039741 100644 --- a/lib/cli/src/frameworks/preact/Header.jsx +++ b/lib/cli/src/frameworks/preact/Header.jsx @@ -29,7 +29,12 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
{user ? ( -