diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index bab1fe4d1711..99430703d760 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,12 @@ +## 7.1.0-alpha.33 + +- Bug: Fix for angular 16.1 compatibility - [#23064](https://github.com/storybookjs/storybook/pull/23064), thanks [@ndelangen](https://github.com/ndelangen)! +- Builder-vite: Fix lib/channels dependency - [#23049](https://github.com/storybookjs/storybook/pull/23049), thanks [@ndelangen](https://github.com/ndelangen)! +- CLI: Improve steps in storybook init - [#22502](https://github.com/storybookjs/storybook/pull/22502), thanks [@yannbf](https://github.com/yannbf)! +- CLI: Run `storybook dev` as part of `storybook init` - [#22928](https://github.com/storybookjs/storybook/pull/22928), thanks [@yannbf](https://github.com/yannbf)! +- Core: Merge channels into a single package - [#23032](https://github.com/storybookjs/storybook/pull/23032), thanks [@ndelangen](https://github.com/ndelangen)! +- Core: Unify cache location configurability - [#22079](https://github.com/storybookjs/storybook/pull/22079), thanks [@kubijo](https://github.com/kubijo)! + ## 7.1.0-alpha.32 - Build: Remove `babel-core` & upgrade `esbuild` - [#23017](https://github.com/storybookjs/storybook/pull/23017), thanks [@ndelangen](https://github.com/ndelangen)! diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 402615db39ae..a730cc537aa4 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", @@ -63,16 +63,16 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addon-highlight": "7.1.0-alpha.32", - "@storybook/channels": "7.1.0-alpha.32", - "@storybook/client-logger": "7.1.0-alpha.32", - "@storybook/components": "7.1.0-alpha.32", - "@storybook/core-events": "7.1.0-alpha.32", + "@storybook/addon-highlight": "7.1.0-alpha.33", + "@storybook/channels": "7.1.0-alpha.33", + "@storybook/client-logger": "7.1.0-alpha.33", + "@storybook/components": "7.1.0-alpha.33", + "@storybook/core-events": "7.1.0-alpha.33", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.1.0-alpha.32", - "@storybook/preview-api": "7.1.0-alpha.32", - "@storybook/theming": "7.1.0-alpha.32", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/manager-api": "7.1.0-alpha.33", + "@storybook/preview-api": "7.1.0-alpha.33", + "@storybook/theming": "7.1.0-alpha.33", + "@storybook/types": "7.1.0-alpha.33", "axe-core": "^4.2.0", "lodash": "^4.17.21", "react-resize-detector": "^7.1.2" diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index b43b7f0a1cd1..347eec1fb28a 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", @@ -80,14 +80,14 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.32", - "@storybook/components": "7.1.0-alpha.32", - "@storybook/core-events": "7.1.0-alpha.32", + "@storybook/client-logger": "7.1.0-alpha.33", + "@storybook/components": "7.1.0-alpha.33", + "@storybook/core-events": "7.1.0-alpha.33", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.1.0-alpha.32", - "@storybook/preview-api": "7.1.0-alpha.32", - "@storybook/theming": "7.1.0-alpha.32", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/manager-api": "7.1.0-alpha.33", + "@storybook/preview-api": "7.1.0-alpha.33", + "@storybook/theming": "7.1.0-alpha.33", + "@storybook/types": "7.1.0-alpha.33", "dequal": "^2.0.2", "lodash": "^4.17.21", "polished": "^4.2.2", diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index ebf0c725a3f1..71fc106d2093 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", @@ -76,14 +76,14 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.32", - "@storybook/components": "7.1.0-alpha.32", - "@storybook/core-events": "7.1.0-alpha.32", + "@storybook/client-logger": "7.1.0-alpha.33", + "@storybook/components": "7.1.0-alpha.33", + "@storybook/core-events": "7.1.0-alpha.33", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.1.0-alpha.32", - "@storybook/preview-api": "7.1.0-alpha.32", - "@storybook/theming": "7.1.0-alpha.32", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/manager-api": "7.1.0-alpha.33", + "@storybook/preview-api": "7.1.0-alpha.33", + "@storybook/theming": "7.1.0-alpha.33", + "@storybook/types": "7.1.0-alpha.33", "memoizerific": "^1.11.3", "ts-dedent": "^2.0.0" }, diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index f336c0cab83b..b189d512e80e 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", @@ -68,15 +68,15 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/blocks": "7.1.0-alpha.32", - "@storybook/client-logger": "7.1.0-alpha.32", - "@storybook/components": "7.1.0-alpha.32", - "@storybook/core-common": "7.1.0-alpha.32", - "@storybook/manager-api": "7.1.0-alpha.32", - "@storybook/node-logger": "7.1.0-alpha.32", - "@storybook/preview-api": "7.1.0-alpha.32", - "@storybook/theming": "7.1.0-alpha.32", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/blocks": "7.1.0-alpha.33", + "@storybook/client-logger": "7.1.0-alpha.33", + "@storybook/components": "7.1.0-alpha.33", + "@storybook/core-common": "7.1.0-alpha.33", + "@storybook/manager-api": "7.1.0-alpha.33", + "@storybook/node-logger": "7.1.0-alpha.33", + "@storybook/preview-api": "7.1.0-alpha.33", + "@storybook/theming": "7.1.0-alpha.33", + "@storybook/types": "7.1.0-alpha.33", "lodash": "^4.17.21", "ts-dedent": "^2.0.0" }, diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index f1f664b3e630..39b66cd49693 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", @@ -99,19 +99,19 @@ "dependencies": { "@jest/transform": "^29.3.1", "@mdx-js/react": "^2.1.5", - "@storybook/blocks": "7.1.0-alpha.32", - "@storybook/client-logger": "7.1.0-alpha.32", - "@storybook/components": "7.1.0-alpha.32", - "@storybook/csf-plugin": "7.1.0-alpha.32", - "@storybook/csf-tools": "7.1.0-alpha.32", + "@storybook/blocks": "7.1.0-alpha.33", + "@storybook/client-logger": "7.1.0-alpha.33", + "@storybook/components": "7.1.0-alpha.33", + "@storybook/csf-plugin": "7.1.0-alpha.33", + "@storybook/csf-tools": "7.1.0-alpha.33", "@storybook/global": "^5.0.0", "@storybook/mdx2-csf": "^1.0.0", - "@storybook/node-logger": "7.1.0-alpha.32", - "@storybook/postinstall": "7.1.0-alpha.32", - "@storybook/preview-api": "7.1.0-alpha.32", - "@storybook/react-dom-shim": "7.1.0-alpha.32", - "@storybook/theming": "7.1.0-alpha.32", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/node-logger": "7.1.0-alpha.33", + "@storybook/postinstall": "7.1.0-alpha.33", + "@storybook/preview-api": "7.1.0-alpha.33", + "@storybook/react-dom-shim": "7.1.0-alpha.33", + "@storybook/theming": "7.1.0-alpha.33", + "@storybook/types": "7.1.0-alpha.33", "fs-extra": "^11.1.0", "remark-external-links": "^8.0.0", "remark-slug": "^6.0.0", diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index 494961f21b43..02300c454d02 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", @@ -119,23 +119,23 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addon-actions": "7.1.0-alpha.32", - "@storybook/addon-backgrounds": "7.1.0-alpha.32", - "@storybook/addon-controls": "7.1.0-alpha.32", - "@storybook/addon-docs": "7.1.0-alpha.32", - "@storybook/addon-highlight": "7.1.0-alpha.32", - "@storybook/addon-measure": "7.1.0-alpha.32", - "@storybook/addon-outline": "7.1.0-alpha.32", - "@storybook/addon-toolbars": "7.1.0-alpha.32", - "@storybook/addon-viewport": "7.1.0-alpha.32", - "@storybook/core-common": "7.1.0-alpha.32", - "@storybook/manager-api": "7.1.0-alpha.32", - "@storybook/node-logger": "7.1.0-alpha.32", - "@storybook/preview-api": "7.1.0-alpha.32", + "@storybook/addon-actions": "7.1.0-alpha.33", + "@storybook/addon-backgrounds": "7.1.0-alpha.33", + "@storybook/addon-controls": "7.1.0-alpha.33", + "@storybook/addon-docs": "7.1.0-alpha.33", + "@storybook/addon-highlight": "7.1.0-alpha.33", + "@storybook/addon-measure": "7.1.0-alpha.33", + "@storybook/addon-outline": "7.1.0-alpha.33", + "@storybook/addon-toolbars": "7.1.0-alpha.33", + "@storybook/addon-viewport": "7.1.0-alpha.33", + "@storybook/core-common": "7.1.0-alpha.33", + "@storybook/manager-api": "7.1.0-alpha.33", + "@storybook/node-logger": "7.1.0-alpha.33", + "@storybook/preview-api": "7.1.0-alpha.33", "ts-dedent": "^2.0.0" }, "devDependencies": { - "@storybook/vue": "7.1.0-alpha.32", + "@storybook/vue": "7.1.0-alpha.33", "typescript": "^4.9.3" }, "peerDependencies": { diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index 9d03566f3529..3348562bf892 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-mdx-gfm", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "GitHub Flavored Markdown in Storybook", "keywords": [ "addon", @@ -51,7 +51,7 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/node-logger": "7.1.0-alpha.32", + "@storybook/node-logger": "7.1.0-alpha.33", "remark-gfm": "^3.0.1", "ts-dedent": "^2.0.0" }, diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index 90f36c8a15bd..8494a7337a80 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Highlight DOM nodes within your stories", "keywords": [ "storybook-addons", @@ -61,9 +61,9 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-events": "7.1.0-alpha.32", + "@storybook/core-events": "7.1.0-alpha.33", "@storybook/global": "^5.0.0", - "@storybook/preview-api": "7.1.0-alpha.32" + "@storybook/preview-api": "7.1.0-alpha.33" }, "devDependencies": { "@types/webpack-env": "^1.16.0", diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index ecbdf74b9e84..3a82fab3b985 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", @@ -72,16 +72,16 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.32", - "@storybook/components": "7.1.0-alpha.32", - "@storybook/core-common": "7.1.0-alpha.32", - "@storybook/core-events": "7.1.0-alpha.32", + "@storybook/client-logger": "7.1.0-alpha.33", + "@storybook/components": "7.1.0-alpha.33", + "@storybook/core-common": "7.1.0-alpha.33", + "@storybook/core-events": "7.1.0-alpha.33", "@storybook/global": "^5.0.0", - "@storybook/instrumenter": "7.1.0-alpha.32", - "@storybook/manager-api": "7.1.0-alpha.32", - "@storybook/preview-api": "7.1.0-alpha.32", - "@storybook/theming": "7.1.0-alpha.32", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/instrumenter": "7.1.0-alpha.33", + "@storybook/manager-api": "7.1.0-alpha.33", + "@storybook/preview-api": "7.1.0-alpha.33", + "@storybook/theming": "7.1.0-alpha.33", + "@storybook/types": "7.1.0-alpha.33", "jest-mock": "^29.5.0", "polished": "^4.2.2", "ts-dedent": "^2.2.0" diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index bd6fe1365d4e..546aeb6f15fd 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "React storybook addon that show component jest report", "keywords": [ "addon", @@ -70,13 +70,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.32", - "@storybook/components": "7.1.0-alpha.32", - "@storybook/core-events": "7.1.0-alpha.32", + "@storybook/client-logger": "7.1.0-alpha.33", + "@storybook/components": "7.1.0-alpha.33", + "@storybook/core-events": "7.1.0-alpha.33", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.1.0-alpha.32", - "@storybook/preview-api": "7.1.0-alpha.32", - "@storybook/theming": "7.1.0-alpha.32", + "@storybook/manager-api": "7.1.0-alpha.33", + "@storybook/preview-api": "7.1.0-alpha.33", + "@storybook/theming": "7.1.0-alpha.33", "react-resize-detector": "^7.1.2", "tiny-invariant": "^1.3.1", "upath": "^2.0.1" diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 0d0546c4e50f..f334043893fd 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "addon", @@ -80,14 +80,14 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.32", - "@storybook/core-events": "7.1.0-alpha.32", + "@storybook/client-logger": "7.1.0-alpha.33", + "@storybook/core-events": "7.1.0-alpha.33", "@storybook/csf": "^0.1.0", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.1.0-alpha.32", - "@storybook/preview-api": "7.1.0-alpha.32", - "@storybook/router": "7.1.0-alpha.32", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/manager-api": "7.1.0-alpha.33", + "@storybook/preview-api": "7.1.0-alpha.33", + "@storybook/router": "7.1.0-alpha.33", + "@storybook/types": "7.1.0-alpha.33", "prop-types": "^15.7.2", "ts-dedent": "^2.0.0" }, diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index 4f4a7c4b4ee7..48533055c8ef 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", @@ -75,13 +75,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.32", - "@storybook/components": "7.1.0-alpha.32", - "@storybook/core-events": "7.1.0-alpha.32", + "@storybook/client-logger": "7.1.0-alpha.33", + "@storybook/components": "7.1.0-alpha.33", + "@storybook/core-events": "7.1.0-alpha.33", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.1.0-alpha.32", - "@storybook/preview-api": "7.1.0-alpha.32", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/manager-api": "7.1.0-alpha.33", + "@storybook/preview-api": "7.1.0-alpha.33", + "@storybook/types": "7.1.0-alpha.33", "tiny-invariant": "^1.3.1" }, "devDependencies": { diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index 8f0f95d4bc2a..d8ccad908e8e 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Outline all elements with CSS to help with layout placement and alignment", "keywords": [ "storybook-addons", @@ -78,13 +78,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.32", - "@storybook/components": "7.1.0-alpha.32", - "@storybook/core-events": "7.1.0-alpha.32", + "@storybook/client-logger": "7.1.0-alpha.33", + "@storybook/components": "7.1.0-alpha.33", + "@storybook/core-events": "7.1.0-alpha.33", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.1.0-alpha.32", - "@storybook/preview-api": "7.1.0-alpha.32", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/manager-api": "7.1.0-alpha.33", + "@storybook/preview-api": "7.1.0-alpha.33", + "@storybook/types": "7.1.0-alpha.33", "ts-dedent": "^2.0.0" }, "devDependencies": { diff --git a/code/addons/storyshots-core/package.json b/code/addons/storyshots-core/package.json index 0390a72420b3..78411782120d 100644 --- a/code/addons/storyshots-core/package.json +++ b/code/addons/storyshots-core/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storyshots", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Take a code snapshot of every story automatically with Jest", "keywords": [ "addon", @@ -38,12 +38,12 @@ "dependencies": { "@jest/transform": "^29.3.1", "@storybook/babel-plugin-require-context-hook": "1.0.1", - "@storybook/client-api": "7.1.0-alpha.32", - "@storybook/core-common": "7.1.0-alpha.32", - "@storybook/core-webpack": "7.1.0-alpha.32", + "@storybook/client-api": "7.1.0-alpha.33", + "@storybook/core-common": "7.1.0-alpha.33", + "@storybook/core-webpack": "7.1.0-alpha.33", "@storybook/global": "^5.0.0", - "@storybook/preview-api": "7.1.0-alpha.32", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/preview-api": "7.1.0-alpha.33", + "@storybook/types": "7.1.0-alpha.33", "@types/jest-specific-snapshot": "^0.5.6", "glob": "^10.0.0", "jest-specific-snapshot": "^8.0.0", @@ -57,11 +57,11 @@ "@angular/core": "^16.0.0-rc.4", "@angular/platform-browser-dynamic": "^16.0.0-rc.4", "@emotion/jest": "^11.8.0", - "@storybook/addon-docs": "7.1.0-alpha.32", - "@storybook/angular": "7.1.0-alpha.32", - "@storybook/react": "7.1.0-alpha.32", - "@storybook/vue": "7.1.0-alpha.32", - "@storybook/vue3": "7.1.0-alpha.32", + "@storybook/addon-docs": "7.1.0-alpha.33", + "@storybook/angular": "7.1.0-alpha.33", + "@storybook/react": "7.1.0-alpha.33", + "@storybook/vue": "7.1.0-alpha.33", + "@storybook/vue3": "7.1.0-alpha.33", "babel-loader": "^9.1.2", "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.15.5", diff --git a/code/addons/storyshots-core/src/frameworks/configure.ts b/code/addons/storyshots-core/src/frameworks/configure.ts index c7b4f5f7b65f..5532a2dfea8c 100644 --- a/code/addons/storyshots-core/src/frameworks/configure.ts +++ b/code/addons/storyshots-core/src/frameworks/configure.ts @@ -108,6 +108,7 @@ function configure( } = getConfigPathParts(configPath); global.FEATURES = features; + global.CONFIG_TYPE = 'DEVELOPMENT'; global.STORIES = stories.map((specifier) => ({ ...specifier, importPathMatcher: specifier.importPathMatcher.source, diff --git a/code/addons/storyshots-core/src/typings.d.ts b/code/addons/storyshots-core/src/typings.d.ts index 1c68913a502c..02634df94986 100644 --- a/code/addons/storyshots-core/src/typings.d.ts +++ b/code/addons/storyshots-core/src/typings.d.ts @@ -9,6 +9,7 @@ declare module '@storybook/babel-plugin-require-context-hook/register'; declare var STORYBOOK_ENV: any; declare var STORIES: any; +declare var CONFIG_TYPE: 'DEVELOPMENT' | 'PRODUCTION'; declare var FEATURES: | { storyStoreV7?: boolean; diff --git a/code/addons/storyshots-puppeteer/package.json b/code/addons/storyshots-puppeteer/package.json index 17204f8cc628..9978c38fd95b 100644 --- a/code/addons/storyshots-puppeteer/package.json +++ b/code/addons/storyshots-puppeteer/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storyshots-puppeteer", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Image snapshots addition to StoryShots based on puppeteer", "keywords": [ "addon", @@ -37,8 +37,8 @@ "dependencies": { "@axe-core/puppeteer": "^4.2.0", "@storybook/csf": "^0.1.0", - "@storybook/node-logger": "7.1.0-alpha.32", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/node-logger": "7.1.0-alpha.33", + "@storybook/types": "7.1.0-alpha.33", "@types/jest-image-snapshot": "^6.0.0", "jest-image-snapshot": "^6.0.0" }, @@ -49,7 +49,7 @@ "puppeteer": "^2.0.0 || ^3.0.0" }, "peerDependencies": { - "@storybook/addon-storyshots": "7.1.0-alpha.32", + "@storybook/addon-storyshots": "7.1.0-alpha.33", "puppeteer": ">=2.0.0" }, "peerDependenciesMeta": { diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index 2433b3239359..a0a48d3eefda 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "View a story’s source code to see how it works and paste into your app", "keywords": [ "addon", @@ -53,13 +53,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.32", - "@storybook/components": "7.1.0-alpha.32", - "@storybook/manager-api": "7.1.0-alpha.32", - "@storybook/preview-api": "7.1.0-alpha.32", - "@storybook/router": "7.1.0-alpha.32", - "@storybook/source-loader": "7.1.0-alpha.32", - "@storybook/theming": "7.1.0-alpha.32", + "@storybook/client-logger": "7.1.0-alpha.33", + "@storybook/components": "7.1.0-alpha.33", + "@storybook/manager-api": "7.1.0-alpha.33", + "@storybook/preview-api": "7.1.0-alpha.33", + "@storybook/router": "7.1.0-alpha.33", + "@storybook/source-loader": "7.1.0-alpha.33", + "@storybook/theming": "7.1.0-alpha.33", "estraverse": "^5.2.0", "prop-types": "^15.7.2", "react-syntax-highlighter": "^15.5.0", diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index 962960bdf12d..76821e0a1bc0 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", @@ -68,11 +68,11 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.32", - "@storybook/components": "7.1.0-alpha.32", - "@storybook/manager-api": "7.1.0-alpha.32", - "@storybook/preview-api": "7.1.0-alpha.32", - "@storybook/theming": "7.1.0-alpha.32" + "@storybook/client-logger": "7.1.0-alpha.33", + "@storybook/components": "7.1.0-alpha.33", + "@storybook/manager-api": "7.1.0-alpha.33", + "@storybook/preview-api": "7.1.0-alpha.33", + "@storybook/theming": "7.1.0-alpha.33" }, "devDependencies": { "typescript": "~4.9.3" diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index b65862ec2252..269a97a031cd 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Build responsive components by adjusting Storybook’s viewport size and orientation", "keywords": [ "addon", @@ -73,13 +73,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.32", - "@storybook/components": "7.1.0-alpha.32", - "@storybook/core-events": "7.1.0-alpha.32", + "@storybook/client-logger": "7.1.0-alpha.33", + "@storybook/components": "7.1.0-alpha.33", + "@storybook/core-events": "7.1.0-alpha.33", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.1.0-alpha.32", - "@storybook/preview-api": "7.1.0-alpha.32", - "@storybook/theming": "7.1.0-alpha.32", + "@storybook/manager-api": "7.1.0-alpha.33", + "@storybook/preview-api": "7.1.0-alpha.33", + "@storybook/theming": "7.1.0-alpha.33", "memoizerific": "^1.11.3", "prop-types": "^15.7.2" }, diff --git a/code/builders/builder-manager/package.json b/code/builders/builder-manager/package.json index 3c79f6976361..9ccceab101dd 100644 --- a/code/builders/builder-manager/package.json +++ b/code/builders/builder-manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-manager", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook manager builder", "keywords": [ "storybook" @@ -44,9 +44,9 @@ }, "dependencies": { "@fal-works/esbuild-plugin-global-externals": "^2.1.2", - "@storybook/core-common": "7.1.0-alpha.32", - "@storybook/manager": "7.1.0-alpha.32", - "@storybook/node-logger": "7.1.0-alpha.32", + "@storybook/core-common": "7.1.0-alpha.33", + "@storybook/manager": "7.1.0-alpha.33", + "@storybook/node-logger": "7.1.0-alpha.33", "@types/ejs": "^3.1.1", "@types/find-cache-dir": "^3.2.1", "@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.10", diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 3734a141fd02..66d29935aa46 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-vite", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "A plugin to run and build Storybooks with Vite", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme", "bugs": { @@ -42,18 +42,20 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/channel-postmessage": "7.1.0-alpha.32", - "@storybook/client-logger": "7.1.0-alpha.32", - "@storybook/core-common": "7.1.0-alpha.32", - "@storybook/csf-plugin": "7.1.0-alpha.32", + "@storybook/channels": "7.1.0-alpha.33", + "@storybook/client-logger": "7.1.0-alpha.33", + "@storybook/core-common": "7.1.0-alpha.33", + "@storybook/csf-plugin": "7.1.0-alpha.33", "@storybook/mdx2-csf": "^1.0.0", - "@storybook/node-logger": "7.1.0-alpha.32", - "@storybook/preview": "7.1.0-alpha.32", - "@storybook/preview-api": "7.1.0-alpha.32", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/node-logger": "7.1.0-alpha.33", + "@storybook/preview": "7.1.0-alpha.33", + "@storybook/preview-api": "7.1.0-alpha.33", + "@storybook/types": "7.1.0-alpha.33", + "@types/find-cache-dir": "^3.2.1", "browser-assert": "^1.2.1", "es-module-lexer": "^0.9.3", "express": "^4.17.3", + "find-cache-dir": "^3.0.0", "fs-extra": "^11.1.0", "magic-string": "^0.30.0", "remark-external-links": "^8.0.0", diff --git a/code/builders/builder-vite/src/codegen-set-addon-channel.ts b/code/builders/builder-vite/src/codegen-set-addon-channel.ts index 6548d64c67c1..f5dc708f58b8 100644 --- a/code/builders/builder-vite/src/codegen-set-addon-channel.ts +++ b/code/builders/builder-vite/src/codegen-set-addon-channel.ts @@ -1,9 +1,9 @@ export async function generateAddonSetupCode() { return ` - import { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage'; + import { createBrowserChannel } from '@storybook/channels'; import { addons } from '@storybook/preview-api'; - const channel = createPostMessageChannel({ page: 'preview' }); + const channel = createBrowserChannel({ page: 'preview' }); addons.setChannel(channel); window.__STORYBOOK_ADDONS_CHANNEL__ = channel; diff --git a/code/builders/builder-vite/src/optimizeDeps.ts b/code/builders/builder-vite/src/optimizeDeps.ts index 20fe4259ef37..e9639782547d 100644 --- a/code/builders/builder-vite/src/optimizeDeps.ts +++ b/code/builders/builder-vite/src/optimizeDeps.ts @@ -13,6 +13,7 @@ const INCLUDE_CANDIDATES = [ '@storybook/addon-docs > acorn-jsx', '@storybook/addon-docs', '@storybook/addon-essentials/docs/mdx-react-shim', + '@storybook/channels', '@storybook/channel-postmessage', '@storybook/channel-websocket', '@storybook/client-api', diff --git a/code/builders/builder-vite/src/plugins/external-globals-plugin.ts b/code/builders/builder-vite/src/plugins/external-globals-plugin.ts index fe5efe1bce4a..dd53ab4a4e56 100644 --- a/code/builders/builder-vite/src/plugins/external-globals-plugin.ts +++ b/code/builders/builder-vite/src/plugins/external-globals-plugin.ts @@ -1,7 +1,8 @@ import { join } from 'node:path'; +import findCacheDirectory from 'find-cache-dir'; import { init, parse } from 'es-module-lexer'; import MagicString from 'magic-string'; -import { emptyDir, ensureDir, ensureFile, writeFile } from 'fs-extra'; +import { ensureFile, writeFile } from 'fs-extra'; import { mergeAlias } from 'vite'; import type { Alias, Plugin } from 'vite'; @@ -47,9 +48,10 @@ export async function externalGlobalsPlugin(externals: Record) { } const newAlias = mergeAlias([], config.resolve?.alias) as Alias[]; - const cachePath = join(process.cwd(), 'node_modules', '.cache', 'vite-plugin-externals'); - await ensureDir(cachePath); - await emptyDir(cachePath); + const cachePath = findCacheDirectory({ + name: 'sb-vite-plugin-externals', + create: true, + }) as string; await Promise.all( (Object.keys(externals) as Array).map(async (externalKey) => { const externalCachePath = join(cachePath, `${externalKey}.js`); diff --git a/code/builders/builder-vite/src/vite-config.ts b/code/builders/builder-vite/src/vite-config.ts index e9ce254809b3..c7b363622bcc 100644 --- a/code/builders/builder-vite/src/vite-config.ts +++ b/code/builders/builder-vite/src/vite-config.ts @@ -1,5 +1,6 @@ import * as path from 'path'; import { loadConfigFromFile, mergeConfig } from 'vite'; +import findCacheDirectory from 'find-cache-dir'; import type { ConfigEnv, InlineConfig as ViteInlineConfig, @@ -51,7 +52,7 @@ export async function commonConfig( const sbConfig: InlineConfig = { configFile: false, - cacheDir: 'node_modules/.cache/.vite-storybook', + cacheDir: findCacheDirectory({ name: 'sb-vite' }), root: path.resolve(options.configDir, '..'), // Allow storybook deployed as subfolder. See https://github.com/storybookjs/builder-vite/issues/238 base: './', diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index 0664f53e3075..763baee21bb2 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -56,24 +56,24 @@ }, "dependencies": { "@babel/core": "^7.22.0", - "@storybook/addons": "7.1.0-alpha.32", - "@storybook/api": "7.1.0-alpha.32", - "@storybook/channel-postmessage": "7.1.0-alpha.32", - "@storybook/channels": "7.1.0-alpha.32", - "@storybook/client-api": "7.1.0-alpha.32", - "@storybook/client-logger": "7.1.0-alpha.32", - "@storybook/components": "7.1.0-alpha.32", - "@storybook/core-common": "7.1.0-alpha.32", - "@storybook/core-events": "7.1.0-alpha.32", - "@storybook/core-webpack": "7.1.0-alpha.32", + "@storybook/addons": "7.1.0-alpha.33", + "@storybook/api": "7.1.0-alpha.33", + "@storybook/channel-postmessage": "7.1.0-alpha.33", + "@storybook/channels": "7.1.0-alpha.33", + "@storybook/client-api": "7.1.0-alpha.33", + "@storybook/client-logger": "7.1.0-alpha.33", + "@storybook/components": "7.1.0-alpha.33", + "@storybook/core-common": "7.1.0-alpha.33", + "@storybook/core-events": "7.1.0-alpha.33", + "@storybook/core-webpack": "7.1.0-alpha.33", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.1.0-alpha.32", - "@storybook/node-logger": "7.1.0-alpha.32", - "@storybook/preview": "7.1.0-alpha.32", - "@storybook/preview-api": "7.1.0-alpha.32", - "@storybook/router": "7.1.0-alpha.32", - "@storybook/store": "7.1.0-alpha.32", - "@storybook/theming": "7.1.0-alpha.32", + "@storybook/manager-api": "7.1.0-alpha.33", + "@storybook/node-logger": "7.1.0-alpha.33", + "@storybook/preview": "7.1.0-alpha.33", + "@storybook/preview-api": "7.1.0-alpha.33", + "@storybook/router": "7.1.0-alpha.33", + "@storybook/store": "7.1.0-alpha.33", + "@storybook/theming": "7.1.0-alpha.33", "@swc/core": "^1.3.49", "@types/node": "^16.0.0", "@types/semver": "^7.3.4", diff --git a/code/builders/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars b/code/builders/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars index ec9848e1e121..0507ca9fbbd1 100644 --- a/code/builders/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars +++ b/code/builders/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars @@ -1,14 +1,14 @@ import { global } from '@storybook/global'; import { ClientApi, PreviewWeb, addons, composeConfigs } from '@storybook/preview-api'; -import { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage'; +import { createBrowserChannel } from '@storybook/channels'; import { importFn } from './{{storiesFilename}}'; const getProjectAnnotations = () => composeConfigs([{{#each previewAnnotations}}require('{{this}}'),{{/each}}]); -const channel = createPostMessageChannel({ page: 'preview' }); +const channel = createBrowserChannel({ page: 'preview' }); addons.setChannel(channel); if (global.CONFIG_TYPE === 'DEVELOPMENT'){ diff --git a/code/deprecated/addons/package.json b/code/deprecated/addons/package.json index 1a0a2293a92d..60c659a2efc2 100644 --- a/code/deprecated/addons/package.json +++ b/code/deprecated/addons/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addons", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook addons store", "keywords": [ "storybook" @@ -44,9 +44,9 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/manager-api": "7.1.0-alpha.32", - "@storybook/preview-api": "7.1.0-alpha.32", - "@storybook/types": "7.1.0-alpha.32" + "@storybook/manager-api": "7.1.0-alpha.33", + "@storybook/preview-api": "7.1.0-alpha.33", + "@storybook/types": "7.1.0-alpha.33" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", diff --git a/code/lib/channel-postmessage/README.md b/code/deprecated/channel-postmessage/README.md similarity index 100% rename from code/lib/channel-postmessage/README.md rename to code/deprecated/channel-postmessage/README.md diff --git a/code/lib/channel-postmessage/jest.config.js b/code/deprecated/channel-postmessage/jest.config.js similarity index 100% rename from code/lib/channel-postmessage/jest.config.js rename to code/deprecated/channel-postmessage/jest.config.js diff --git a/code/lib/channel-postmessage/package.json b/code/deprecated/channel-postmessage/package.json similarity index 64% rename from code/lib/channel-postmessage/package.json rename to code/deprecated/channel-postmessage/package.json index 8f8ce8ac1110..cdbff7d4ab4c 100644 --- a/code/lib/channel-postmessage/package.json +++ b/code/deprecated/channel-postmessage/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channel-postmessage", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "", "keywords": [ "storybook" @@ -22,16 +22,16 @@ "sideEffects": false, "exports": { ".": { - "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "require": "./dist/index.js", - "import": "./dist/index.mjs" + "types": "./dist/entry.d.ts", + "node": "./dist/entry.js", + "require": "./dist/entry.js", + "import": "./dist/entry.mjs" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", - "types": "dist/index.d.ts", + "main": "dist/entry.js", + "module": "dist/entry.mjs", + "types": "dist/entry.d.ts", "files": [ "dist/**/*", "README.md", @@ -43,14 +43,8 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/channel-websocket": "7.1.0-alpha.32", - "@storybook/channels": "7.1.0-alpha.32", - "@storybook/client-logger": "7.1.0-alpha.32", - "@storybook/core-events": "7.1.0-alpha.32", - "@storybook/global": "^5.0.0", - "qs": "^6.10.0", - "telejson": "^7.0.3", - "tiny-invariant": "^1.3.1" + "@storybook/channels": "7.1.0-alpha.33", + "@storybook/client-logger": "7.1.0-alpha.33" }, "devDependencies": { "typescript": "~4.9.3" @@ -60,8 +54,9 @@ }, "bundler": { "entries": [ - "./src/index.ts" - ] + "./src/entry.ts" + ], + "shim": "@storybook/channels/dist/postmessage/index" }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" } diff --git a/code/lib/channel-postmessage/project.json b/code/deprecated/channel-postmessage/project.json similarity index 100% rename from code/lib/channel-postmessage/project.json rename to code/deprecated/channel-postmessage/project.json diff --git a/code/deprecated/channel-postmessage/src/entry.ts b/code/deprecated/channel-postmessage/src/entry.ts new file mode 100644 index 000000000000..2190b9f5382e --- /dev/null +++ b/code/deprecated/channel-postmessage/src/entry.ts @@ -0,0 +1,7 @@ +import { deprecate } from '@storybook/client-logger'; + +deprecate( + 'importing from @storybook/channel-postmessage is deprecated and will be removed in 8.0, please import createPostmessageChannel from @storybook/channels' +); + +export * from '@storybook/channels/dist/postmessage/index'; diff --git a/code/lib/channel-postmessage/tsconfig.json b/code/deprecated/channel-postmessage/tsconfig.json similarity index 100% rename from code/lib/channel-postmessage/tsconfig.json rename to code/deprecated/channel-postmessage/tsconfig.json diff --git a/code/lib/channel-websocket/README.md b/code/deprecated/channel-websocket/README.md similarity index 100% rename from code/lib/channel-websocket/README.md rename to code/deprecated/channel-websocket/README.md diff --git a/code/lib/channel-websocket/jest.config.js b/code/deprecated/channel-websocket/jest.config.js similarity index 100% rename from code/lib/channel-websocket/jest.config.js rename to code/deprecated/channel-websocket/jest.config.js diff --git a/code/lib/channel-websocket/package.json b/code/deprecated/channel-websocket/package.json similarity index 66% rename from code/lib/channel-websocket/package.json rename to code/deprecated/channel-websocket/package.json index dbd481c40cb2..6610bc16f60e 100644 --- a/code/lib/channel-websocket/package.json +++ b/code/deprecated/channel-websocket/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channel-websocket", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "", "keywords": [ "storybook" @@ -22,16 +22,16 @@ "sideEffects": false, "exports": { ".": { - "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "require": "./dist/index.js", - "import": "./dist/index.mjs" + "types": "./dist/entry.d.ts", + "node": "./dist/entry.js", + "require": "./dist/entry.js", + "import": "./dist/entry.mjs" }, "./package.json": "./package.json" }, - "main": "dist/index.js", - "module": "dist/index.mjs", - "types": "dist/index.d.ts", + "main": "dist/entry.js", + "module": "dist/entry.mjs", + "types": "dist/entry.d.ts", "files": [ "dist/**/*", "README.md", @@ -40,14 +40,11 @@ ], "scripts": { "check": "../../../scripts/node_modules/.bin/tsc --noEmit", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "../../../scripts/prepare/facade.ts" }, "dependencies": { - "@storybook/channels": "7.1.0-alpha.32", - "@storybook/client-logger": "7.1.0-alpha.32", - "@storybook/global": "^5.0.0", - "telejson": "^7.0.3", - "tiny-invariant": "^1.3.1" + "@storybook/channels": "7.1.0-alpha.33", + "@storybook/client-logger": "7.1.0-alpha.33" }, "devDependencies": { "typescript": "~4.9.3" @@ -57,8 +54,9 @@ }, "bundler": { "entries": [ - "./src/index.ts" - ] + "./src/entry.ts" + ], + "shim": "@storybook/channels/dist/websocket/index" }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" } diff --git a/code/lib/channel-websocket/project.json b/code/deprecated/channel-websocket/project.json similarity index 100% rename from code/lib/channel-websocket/project.json rename to code/deprecated/channel-websocket/project.json diff --git a/code/deprecated/channel-websocket/src/entry.ts b/code/deprecated/channel-websocket/src/entry.ts new file mode 100644 index 000000000000..e5b6602e6120 --- /dev/null +++ b/code/deprecated/channel-websocket/src/entry.ts @@ -0,0 +1,7 @@ +import { deprecate } from '@storybook/client-logger'; + +deprecate( + 'importing from @storybook/channel-websocket is deprecated and will be removed in 8.0, please import createWebsocketChannel from @storybook/channels' +); + +export * from '@storybook/channels/dist/websocket/index'; diff --git a/code/lib/channel-websocket/tsconfig.json b/code/deprecated/channel-websocket/tsconfig.json similarity index 100% rename from code/lib/channel-websocket/tsconfig.json rename to code/deprecated/channel-websocket/tsconfig.json diff --git a/code/deprecated/client-api/package.json b/code/deprecated/client-api/package.json index 4a574910fad7..bf7db51fed7c 100644 --- a/code/deprecated/client-api/package.json +++ b/code/deprecated/client-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-api", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook Client API", "keywords": [ "storybook" @@ -42,8 +42,8 @@ "prep": "../../../scripts/prepare/facade.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.32", - "@storybook/preview-api": "7.1.0-alpha.32" + "@storybook/client-logger": "7.1.0-alpha.33", + "@storybook/preview-api": "7.1.0-alpha.33" }, "publishConfig": { "access": "public" diff --git a/code/deprecated/core-client/package.json b/code/deprecated/core-client/package.json index be258559c602..717213bbb930 100644 --- a/code/deprecated/core-client/package.json +++ b/code/deprecated/core-client/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-client", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -35,8 +35,8 @@ "prep": "../../../scripts/prepare/facade.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.32", - "@storybook/preview-api": "7.1.0-alpha.32" + "@storybook/client-logger": "7.1.0-alpha.33", + "@storybook/preview-api": "7.1.0-alpha.33" }, "publishConfig": { "access": "public" diff --git a/code/deprecated/manager-api-shim/package.json b/code/deprecated/manager-api-shim/package.json index 29e8eba89fa7..22f2f73ec334 100644 --- a/code/deprecated/manager-api-shim/package.json +++ b/code/deprecated/manager-api-shim/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/api", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook Manager API (facade)", "keywords": [ "storybook" @@ -42,8 +42,8 @@ "prep": "../../../scripts/prepare/facade.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.32", - "@storybook/manager-api": "7.1.0-alpha.32" + "@storybook/client-logger": "7.1.0-alpha.33", + "@storybook/manager-api": "7.1.0-alpha.33" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", diff --git a/code/deprecated/preview-web/package.json b/code/deprecated/preview-web/package.json index ed5f07673010..8f8b0c70d85e 100644 --- a/code/deprecated/preview-web/package.json +++ b/code/deprecated/preview-web/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview-web", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "", "keywords": [ "storybook" @@ -42,8 +42,8 @@ "prep": "../../../scripts/prepare/facade.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.32", - "@storybook/preview-api": "7.1.0-alpha.32" + "@storybook/client-logger": "7.1.0-alpha.33", + "@storybook/preview-api": "7.1.0-alpha.33" }, "publishConfig": { "access": "public" diff --git a/code/deprecated/store/package.json b/code/deprecated/store/package.json index b873a35ad5bd..d628903347e2 100644 --- a/code/deprecated/store/package.json +++ b/code/deprecated/store/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/store", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "", "keywords": [ "storybook" @@ -42,8 +42,8 @@ "prep": "../../../scripts/prepare/facade.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.32", - "@storybook/preview-api": "7.1.0-alpha.32" + "@storybook/client-logger": "7.1.0-alpha.33", + "@storybook/preview-api": "7.1.0-alpha.33" }, "publishConfig": { "access": "public" diff --git a/code/e2e-tests/addon-viewport.spec.ts b/code/e2e-tests/addon-viewport.spec.ts index da66778a3708..ec96a3bd93ea 100644 --- a/code/e2e-tests/addon-viewport.spec.ts +++ b/code/e2e-tests/addon-viewport.spec.ts @@ -28,13 +28,13 @@ test.describe('addon-viewport', () => { await sbPage.navigateToStory('example/button', 'primary'); // Measure the original dimensions of previewRoot - const originalDimensions = await sbPage.previewRoot().boundingBox(); + const originalDimensions = await sbPage.getCanvasBodyElement().boundingBox(); await expect(originalDimensions?.width).toBeDefined(); await sbPage.selectToolbar('[title="Change the size of the preview"]', '#list-item-mobile1'); // Measure the adjusted dimensions of previewRoot after clicking the mobile item. - const adjustedDimensions = await sbPage.previewRoot().boundingBox(); + const adjustedDimensions = await sbPage.getCanvasBodyElement().boundingBox(); await expect(adjustedDimensions?.width).toBeDefined(); // Compare the two widths diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 6fd34c279140..d777ec7f15c4 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", @@ -36,20 +36,20 @@ "prep": "../../../scripts/prepare/tsc.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.1.0-alpha.32", - "@storybook/cli": "7.1.0-alpha.32", - "@storybook/client-logger": "7.1.0-alpha.32", - "@storybook/core-common": "7.1.0-alpha.32", - "@storybook/core-events": "7.1.0-alpha.32", - "@storybook/core-server": "7.1.0-alpha.32", - "@storybook/core-webpack": "7.1.0-alpha.32", - "@storybook/docs-tools": "7.1.0-alpha.32", + "@storybook/builder-webpack5": "7.1.0-alpha.33", + "@storybook/cli": "7.1.0-alpha.33", + "@storybook/client-logger": "7.1.0-alpha.33", + "@storybook/core-common": "7.1.0-alpha.33", + "@storybook/core-events": "7.1.0-alpha.33", + "@storybook/core-server": "7.1.0-alpha.33", + "@storybook/core-webpack": "7.1.0-alpha.33", + "@storybook/docs-tools": "7.1.0-alpha.33", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.1.0-alpha.32", - "@storybook/node-logger": "7.1.0-alpha.32", - "@storybook/preview-api": "7.1.0-alpha.32", - "@storybook/telemetry": "7.1.0-alpha.32", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/manager-api": "7.1.0-alpha.33", + "@storybook/node-logger": "7.1.0-alpha.33", + "@storybook/preview-api": "7.1.0-alpha.33", + "@storybook/telemetry": "7.1.0-alpha.33", + "@storybook/types": "7.1.0-alpha.33", "@types/node": "^16.0.0", "@types/react": "^16.14.34", "@types/react-dom": "^16.9.14", diff --git a/code/frameworks/angular/src/builders/start-storybook/index.ts b/code/frameworks/angular/src/builders/start-storybook/index.ts index 3b44e0dea51f..642953dc4366 100644 --- a/code/frameworks/angular/src/builders/start-storybook/index.ts +++ b/code/frameworks/angular/src/builders/start-storybook/index.ts @@ -49,6 +49,7 @@ export type StorybookBuilderOptions = JsonObject & { | 'ci' | 'quiet' | 'disableTelemetry' + | 'initialPath' | 'open' | 'docs' >; @@ -98,6 +99,7 @@ const commandBuilder: BuilderHandlerFn = (options, cont sslKey, disableTelemetry, assets, + initialPath, open, } = options; @@ -123,6 +125,7 @@ const commandBuilder: BuilderHandlerFn = (options, cont ...(assets ? { assets } : {}), }, tsConfig, + initialPath, open, }; diff --git a/code/frameworks/angular/src/builders/start-storybook/schema.json b/code/frameworks/angular/src/builders/start-storybook/schema.json index 764143407b2d..d10d07d95d5d 100644 --- a/code/frameworks/angular/src/builders/start-storybook/schema.json +++ b/code/frameworks/angular/src/builders/start-storybook/schema.json @@ -114,6 +114,10 @@ "items": { "$ref": "#/definitions/assetPattern" } + }, + "initialPath": { + "type": "string", + "description": "URL path to be appended when visiting Storybook for the first time" } }, "additionalProperties": false, diff --git a/code/frameworks/angular/src/server/angular-cli-webpack.js b/code/frameworks/angular/src/server/angular-cli-webpack.js index feb510df501f..76d05ff55e72 100644 --- a/code/frameworks/angular/src/server/angular-cli-webpack.js +++ b/code/frameworks/angular/src/server/angular-cli-webpack.js @@ -1,19 +1,48 @@ +/* eslint-disable global-require */ // Private angular devkit stuff const { generateI18nBrowserWebpackConfigFromContext, } = require('@angular-devkit/build-angular/src/utils/webpack-browser-config'); -const { - getCommonConfig, - getStylesConfig, - getDevServerConfig, - getTypeScriptConfig, -} = require('@angular-devkit/build-angular/src/webpack/configs'); const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); const { filterOutStylingRules } = require('./utils/filter-out-styling-rules'); const { default: StorybookNormalizeAngularEntryPlugin, } = require('./plugins/storybook-normalize-angular-entry-plugin'); +const getAngularWebpackUtils = () => { + try { + // Angular < 16.1.0 + const { + getCommonConfig, + getStylesConfig, + getDevServerConfig, + getTypeScriptConfig, + } = require('@angular-devkit/build-angular/src/webpack/configs'); + + return { + getCommonConfig, + getStylesConfig, + getDevServerConfig, + getTypeScriptConfig, + }; + } catch (e) { + // Angular > 16.1.0 + const { + getCommonConfig, + getStylesConfig, + getDevServerConfig, + getTypeScriptConfig, + } = require('@angular-devkit/build-angular/src/tools/webpack/configs'); + + return { + getCommonConfig, + getStylesConfig, + getDevServerConfig, + getTypeScriptConfig, + }; + } +}; + /** * Extract webpack config from angular-cli 13.x.x * ⚠️ This file is in JavaScript to not use TypeScript. Because current storybook TypeScript version is not compatible with Angular CLI. @@ -26,6 +55,8 @@ exports.getWebpackConfig = async (baseConfig, { builderOptions, builderContext } /** * Get angular-cli Webpack config */ + const { getCommonConfig, getStylesConfig, getDevServerConfig, getTypeScriptConfig } = + getAngularWebpackUtils(); const { config: cliConfig } = await generateI18nBrowserWebpackConfigFromContext( { // Default options diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index 31baa2ee7a34..974988cf2103 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember", "bugs": { @@ -31,12 +31,12 @@ "prep": "../../../scripts/prepare/tsc.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.1.0-alpha.32", - "@storybook/core-common": "7.1.0-alpha.32", - "@storybook/docs-tools": "7.1.0-alpha.32", + "@storybook/builder-webpack5": "7.1.0-alpha.33", + "@storybook/core-common": "7.1.0-alpha.33", + "@storybook/docs-tools": "7.1.0-alpha.33", "@storybook/global": "^5.0.0", - "@storybook/preview-api": "7.1.0-alpha.32", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/preview-api": "7.1.0-alpha.33", + "@storybook/types": "7.1.0-alpha.33", "ts-dedent": "^2.0.0" }, "devDependencies": { diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index 7285415914ea..b29931511949 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-vite", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -47,14 +47,14 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.1.0-alpha.32", - "@storybook/builder-vite": "7.1.0-alpha.32", - "@storybook/channel-postmessage": "7.1.0-alpha.32", - "@storybook/client-api": "7.1.0-alpha.32", - "@storybook/core-server": "7.1.0-alpha.32", - "@storybook/html": "7.1.0-alpha.32", - "@storybook/node-logger": "7.1.0-alpha.32", - "@storybook/preview-web": "7.1.0-alpha.32", + "@storybook/addons": "7.1.0-alpha.33", + "@storybook/builder-vite": "7.1.0-alpha.33", + "@storybook/channel-postmessage": "7.1.0-alpha.33", + "@storybook/client-api": "7.1.0-alpha.33", + "@storybook/core-server": "7.1.0-alpha.33", + "@storybook/html": "7.1.0-alpha.33", + "@storybook/node-logger": "7.1.0-alpha.33", + "@storybook/preview-web": "7.1.0-alpha.33", "magic-string": "^0.30.0" }, "devDependencies": { diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index 3904a0975107..a58d8193fcef 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-webpack5", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -47,11 +47,11 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.1.0-alpha.32", - "@storybook/core-common": "7.1.0-alpha.32", + "@storybook/builder-webpack5": "7.1.0-alpha.33", + "@storybook/core-common": "7.1.0-alpha.33", "@storybook/global": "^5.0.0", - "@storybook/html": "7.1.0-alpha.32", - "@storybook/preset-html-webpack": "7.1.0-alpha.32", + "@storybook/html": "7.1.0-alpha.33", + "@storybook/preset-html-webpack": "7.1.0-alpha.33", "@types/node": "^16.0.0" }, "devDependencies": { diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index fecb8f4b2037..34366c20ed1a 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/nextjs", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook for Next.js", "keywords": [ "storybook", @@ -70,13 +70,13 @@ "@babel/preset-react": "^7.22.0", "@babel/preset-typescript": "^7.21.0", "@babel/runtime": "^7.22.0", - "@storybook/addon-actions": "7.1.0-alpha.32", - "@storybook/builder-webpack5": "7.1.0-alpha.32", - "@storybook/core-common": "7.1.0-alpha.32", - "@storybook/node-logger": "7.1.0-alpha.32", - "@storybook/preset-react-webpack": "7.1.0-alpha.32", - "@storybook/preview-api": "7.1.0-alpha.32", - "@storybook/react": "7.1.0-alpha.32", + "@storybook/addon-actions": "7.1.0-alpha.33", + "@storybook/builder-webpack5": "7.1.0-alpha.33", + "@storybook/core-common": "7.1.0-alpha.33", + "@storybook/node-logger": "7.1.0-alpha.33", + "@storybook/preset-react-webpack": "7.1.0-alpha.33", + "@storybook/preview-api": "7.1.0-alpha.33", + "@storybook/react": "7.1.0-alpha.33", "@types/node": "^16.0.0", "css-loader": "^6.7.3", "find-up": "^5.0.0", diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index 0ebda5a40542..4c3b2e49ba9d 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-vite", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -47,8 +47,8 @@ }, "dependencies": { "@preact/preset-vite": "^2.0.0", - "@storybook/builder-vite": "7.1.0-alpha.32", - "@storybook/preact": "7.1.0-alpha.32" + "@storybook/builder-vite": "7.1.0-alpha.33", + "@storybook/preact": "7.1.0-alpha.33" }, "devDependencies": { "@types/node": "^16.0.0", diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index 5aec47a278c9..81f10e0895f7 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-webpack5", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" @@ -47,10 +47,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.1.0-alpha.32", - "@storybook/core-common": "7.1.0-alpha.32", - "@storybook/preact": "7.1.0-alpha.32", - "@storybook/preset-preact-webpack": "7.1.0-alpha.32", + "@storybook/builder-webpack5": "7.1.0-alpha.33", + "@storybook/core-common": "7.1.0-alpha.33", + "@storybook/preact": "7.1.0-alpha.33", + "@storybook/preset-preact-webpack": "7.1.0-alpha.33", "@types/node": "^16.0.0" }, "devDependencies": { diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index 20e4ae97f708..b8797cadc60f 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-vite", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -49,8 +49,8 @@ "dependencies": { "@joshwooding/vite-plugin-react-docgen-typescript": "0.2.1", "@rollup/pluginutils": "^5.0.2", - "@storybook/builder-vite": "7.1.0-alpha.32", - "@storybook/react": "7.1.0-alpha.32", + "@storybook/builder-vite": "7.1.0-alpha.33", + "@storybook/react": "7.1.0-alpha.33", "@vitejs/plugin-react": "^3.0.1", "ast-types": "^0.14.2", "magic-string": "^0.30.0", diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index e430f8eb59d9..c0dd708404da 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-webpack5", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -47,9 +47,9 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.1.0-alpha.32", - "@storybook/preset-react-webpack": "7.1.0-alpha.32", - "@storybook/react": "7.1.0-alpha.32", + "@storybook/builder-webpack5": "7.1.0-alpha.33", + "@storybook/preset-react-webpack": "7.1.0-alpha.33", + "@storybook/react": "7.1.0-alpha.33", "@types/node": "^16.0.0" }, "devDependencies": { diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index 11cb64405b21..224f60400902 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server-webpack5", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -47,10 +47,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.1.0-alpha.32", - "@storybook/core-common": "7.1.0-alpha.32", - "@storybook/preset-server-webpack": "7.1.0-alpha.32", - "@storybook/server": "7.1.0-alpha.32", + "@storybook/builder-webpack5": "7.1.0-alpha.33", + "@storybook/core-common": "7.1.0-alpha.33", + "@storybook/preset-server-webpack": "7.1.0-alpha.33", + "@storybook/server": "7.1.0-alpha.33", "@types/node": "^16.0.0" }, "devDependencies": { diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index d86876246d34..afdfdfa97206 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-vite", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -47,9 +47,9 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-vite": "7.1.0-alpha.32", - "@storybook/node-logger": "7.1.0-alpha.32", - "@storybook/svelte": "7.1.0-alpha.32", + "@storybook/builder-vite": "7.1.0-alpha.33", + "@storybook/node-logger": "7.1.0-alpha.33", + "@storybook/svelte": "7.1.0-alpha.33", "@sveltejs/vite-plugin-svelte": "^2.0.0", "magic-string": "^0.30.0", "svelte": "^3.0.0", diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index b9af4d66bba7..274038a28c48 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-webpack5", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -47,10 +47,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.1.0-alpha.32", - "@storybook/core-common": "7.1.0-alpha.32", - "@storybook/preset-svelte-webpack": "7.1.0-alpha.32", - "@storybook/svelte": "7.1.0-alpha.32" + "@storybook/builder-webpack5": "7.1.0-alpha.33", + "@storybook/core-common": "7.1.0-alpha.33", + "@storybook/preset-svelte-webpack": "7.1.0-alpha.33", + "@storybook/svelte": "7.1.0-alpha.33" }, "devDependencies": { "svelte": "^3.48.0", diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index 50c10ac73b60..dc8d812e5719 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/sveltekit", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook for SvelteKit", "keywords": [ "storybook", @@ -50,9 +50,9 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-vite": "7.1.0-alpha.32", - "@storybook/svelte": "7.1.0-alpha.32", - "@storybook/svelte-vite": "7.1.0-alpha.32" + "@storybook/builder-vite": "7.1.0-alpha.33", + "@storybook/svelte": "7.1.0-alpha.33", + "@storybook/svelte-vite": "7.1.0-alpha.33" }, "devDependencies": { "@types/node": "^16.0.0", diff --git a/code/frameworks/vue-vite/package.json b/code/frameworks/vue-vite/package.json index dd6dee646445..728b8c68d9f2 100644 --- a/code/frameworks/vue-vite/package.json +++ b/code/frameworks/vue-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue-vite", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook for Vue2 and Vite: Develop Vue2 Components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -47,10 +47,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-vite": "7.1.0-alpha.32", - "@storybook/core-common": "7.1.0-alpha.32", - "@storybook/core-server": "7.1.0-alpha.32", - "@storybook/vue": "7.1.0-alpha.32", + "@storybook/builder-vite": "7.1.0-alpha.33", + "@storybook/core-common": "7.1.0-alpha.33", + "@storybook/core-server": "7.1.0-alpha.33", + "@storybook/vue": "7.1.0-alpha.33", "magic-string": "^0.30.0", "vue-docgen-api": "^4.40.0" }, diff --git a/code/frameworks/vue-webpack5/package.json b/code/frameworks/vue-webpack5/package.json index ca47eb84c563..3e7c9ec9f9a9 100644 --- a/code/frameworks/vue-webpack5/package.json +++ b/code/frameworks/vue-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue-webpack5", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -47,10 +47,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.1.0-alpha.32", - "@storybook/core-common": "7.1.0-alpha.32", - "@storybook/preset-vue-webpack": "7.1.0-alpha.32", - "@storybook/vue": "7.1.0-alpha.32", + "@storybook/builder-webpack5": "7.1.0-alpha.33", + "@storybook/core-common": "7.1.0-alpha.33", + "@storybook/preset-vue-webpack": "7.1.0-alpha.33", + "@storybook/vue": "7.1.0-alpha.33", "@types/node": "^16.0.0" }, "devDependencies": { diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index b03771634d0e..fda1ca272a26 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-vite", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -47,9 +47,9 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-vite": "7.1.0-alpha.32", - "@storybook/core-server": "7.1.0-alpha.32", - "@storybook/vue3": "7.1.0-alpha.32", + "@storybook/builder-vite": "7.1.0-alpha.33", + "@storybook/core-server": "7.1.0-alpha.33", + "@storybook/vue3": "7.1.0-alpha.33", "@vitejs/plugin-vue": "^4.0.0", "magic-string": "^0.30.0", "vue-docgen-api": "^4.40.0" diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index 67b182cf392d..4ec91ab62272 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-webpack5", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -47,10 +47,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.1.0-alpha.32", - "@storybook/core-common": "7.1.0-alpha.32", - "@storybook/preset-vue3-webpack": "7.1.0-alpha.32", - "@storybook/vue3": "7.1.0-alpha.32", + "@storybook/builder-webpack5": "7.1.0-alpha.33", + "@storybook/core-common": "7.1.0-alpha.33", + "@storybook/preset-vue3-webpack": "7.1.0-alpha.33", + "@storybook/vue3": "7.1.0-alpha.33", "@types/node": "^16.0.0" }, "devDependencies": { diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index 0dbb21aed8f6..c1ea86810b00 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-vite", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -47,10 +47,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-vite": "7.1.0-alpha.32", - "@storybook/core-server": "7.1.0-alpha.32", - "@storybook/node-logger": "7.1.0-alpha.32", - "@storybook/web-components": "7.1.0-alpha.32", + "@storybook/builder-vite": "7.1.0-alpha.33", + "@storybook/core-server": "7.1.0-alpha.33", + "@storybook/node-logger": "7.1.0-alpha.33", + "@storybook/web-components": "7.1.0-alpha.33", "magic-string": "^0.30.0" }, "devDependencies": { diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index 88b887b3331d..f1d7e5a9f7f1 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-webpack5", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit", @@ -51,10 +51,10 @@ }, "dependencies": { "@babel/preset-env": "^7.22.0", - "@storybook/builder-webpack5": "7.1.0-alpha.32", - "@storybook/core-common": "7.1.0-alpha.32", - "@storybook/preset-web-components-webpack": "7.1.0-alpha.32", - "@storybook/web-components": "7.1.0-alpha.32", + "@storybook/builder-webpack5": "7.1.0-alpha.33", + "@storybook/core-common": "7.1.0-alpha.33", + "@storybook/preset-web-components-webpack": "7.1.0-alpha.33", + "@storybook/web-components": "7.1.0-alpha.33", "@types/node": "^16.0.0" }, "devDependencies": { diff --git a/code/lib/channel-websocket/src/typings.d.ts b/code/lib/channel-websocket/src/typings.d.ts deleted file mode 100644 index 14231067a5c9..000000000000 --- a/code/lib/channel-websocket/src/typings.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare module 'json-fn'; -declare var CONFIG_TYPE: 'DEVELOPMENT' | 'PRODUCTION'; diff --git a/code/lib/channels/package.json b/code/lib/channels/package.json index c65224e2cac6..3dce9985283e 100644 --- a/code/lib/channels/package.json +++ b/code/lib/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "", "keywords": [ "storybook" @@ -27,11 +27,36 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, + "./dist/postmessage/index": { + "types": "./dist/postmessage/index.d.ts", + "node": "./dist/postmessage/index.js", + "require": "./dist/postmessage/index.js", + "import": "./dist/postmessage/index.mjs" + }, + "./dist/websocket/index": { + "types": "./dist/websocket/index.d.ts", + "node": "./dist/websocket/index.js", + "require": "./dist/websocket/index.js", + "import": "./dist/websocket/index.mjs" + }, "./package.json": "./package.json" }, "main": "dist/index.js", "module": "dist/index.mjs", "types": "dist/index.d.ts", + "typesVersions": { + "*": { + "*": [ + "dist/index.d.ts" + ], + "dist/postmessage/index": [ + "dist/postmessage/index.d.ts" + ], + "dist/websocket/index": [ + "dist/websocket/index.d.ts" + ] + } + }, "files": [ "dist/**/*", "README.md", @@ -42,6 +67,15 @@ "check": "../../../scripts/node_modules/.bin/tsc --noEmit", "prep": "../../../scripts/prepare/bundle.ts" }, + "dependencies": { + "@storybook/channels": "7.1.0-alpha.33", + "@storybook/client-logger": "7.1.0-alpha.33", + "@storybook/core-events": "7.1.0-alpha.33", + "@storybook/global": "^5.0.0", + "qs": "^6.10.0", + "telejson": "^7.0.3", + "tiny-invariant": "^1.3.1" + }, "devDependencies": { "typescript": "~4.9.3" }, @@ -50,7 +84,9 @@ }, "bundler": { "entries": [ - "./src/index.ts" + "./src/index.ts", + "./src/postmessage/index.ts", + "./src/websocket/index.ts" ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" diff --git a/code/lib/channels/src/index.ts b/code/lib/channels/src/index.ts index d12cda556b73..fff392082cdd 100644 --- a/code/lib/channels/src/index.ts +++ b/code/lib/channels/src/index.ts @@ -1,171 +1,44 @@ -/// +/* eslint-disable @typescript-eslint/triple-slash-reference */ +/// -export type ChannelHandler = (event: ChannelEvent) => void; +import { global } from '@storybook/global'; +import { Channel } from './main'; +import { PostMessageTransport } from './postmessage'; +import type { ChannelTransport, Config } from './types'; +import { WebsocketTransport } from './websocket'; -export interface ChannelTransport { - send(event: ChannelEvent, options?: any): void; - setHandler(handler: ChannelHandler): void; -} - -export interface ChannelEvent { - type: string; // eventName - from: string; - args: any[]; -} +const { CONFIG_TYPE } = global; -export interface Listener { - (...args: any[]): void; -} - -interface EventsKeyValue { - [key: string]: Listener[]; -} +export * from './main'; -type ChannelArgs = ChannelArgsSingle | ChannelArgsMulti; -interface ChannelArgsSingle { - transport?: ChannelTransport; - async?: boolean; -} -interface ChannelArgsMulti { - transports: ChannelTransport[]; - async?: boolean; -} +export default Channel; -const isMulti = (args: ChannelArgs): args is ChannelArgsMulti => { - // @ts-expect-error (we guard against this right here) - return args.transports !== undefined; -}; +export { createChannel as createPostMessageChannel, PostMessageTransport } from './postmessage'; +export { createChannel as createWebSocketChannel, WebsocketTransport } from './websocket'; -const generateRandomId = () => { - // generates a random 13 character string - return Math.random().toString(16).slice(2); +type Options = Config & { + extraTransports?: ChannelTransport[]; }; -export class Channel { - readonly isAsync: boolean; - - private sender = generateRandomId(); - - private events: EventsKeyValue = {}; - - private data: Record = {}; - - private readonly transports: ChannelTransport[] = []; - - constructor(input: ChannelArgsMulti); - constructor(input: ChannelArgsSingle); - constructor(input: ChannelArgs = {}) { - this.isAsync = input.async || false; - - if (isMulti(input)) { - this.transports = input.transports || []; - - this.transports.forEach((t) => { - t.setHandler((event) => this.handleEvent(event)); - }); - } else { - this.transports = input.transport ? [input.transport] : []; - } - - this.transports.forEach((t) => { - t.setHandler((event) => this.handleEvent(event)); - }); - } - - get hasTransport() { - return this.transports.length > 0; - } - - addListener(eventName: string, listener: Listener) { - this.events[eventName] = this.events[eventName] || []; - this.events[eventName].push(listener); - } - - emit(eventName: string, ...args: any) { - const event: ChannelEvent = { type: eventName, args, from: this.sender }; - let options = {}; - if (args.length >= 1 && args[0] && args[0].options) { - options = args[0].options; - } - - const handler = () => { - this.transports.forEach((t) => { - t.send(event, options); - }); - this.handleEvent(event); - }; - - if (this.isAsync) { - // todo I'm not sure how to test this - setImmediate(handler); - } else { - handler(); - } - } - - last(eventName: string) { - return this.data[eventName]; - } - - eventNames() { - return Object.keys(this.events); - } - - listenerCount(eventName: string) { - const listeners = this.listeners(eventName); - return listeners ? listeners.length : 0; - } +/** + * Creates a new browser channel instance. + * @param {Options} options - The options object. + * @param {Page} options.page - The puppeteer page instance. + * @param {ChannelTransport[]} [options.extraTransports=[]] - An optional array of extra channel transports. + * @returns {Channel} - The new channel instance. + */ +export function createBrowserChannel({ page, extraTransports = [] }: Options): Channel { + const transports: ChannelTransport[] = [new PostMessageTransport({ page }), ...extraTransports]; - listeners(eventName: string): Listener[] | undefined { - const listeners = this.events[eventName]; - return listeners || undefined; - } + if (CONFIG_TYPE === 'DEVELOPMENT') { + const protocol = window.location.protocol === 'http:' ? 'ws' : 'wss'; + const { hostname, port } = window.location; + const channelUrl = `${protocol}://${hostname}:${port}/storybook-server-channel`; - once(eventName: string, listener: Listener) { - const onceListener: Listener = this.onceListener(eventName, listener); - this.addListener(eventName, onceListener); + transports.push(new WebsocketTransport({ url: channelUrl, onError: () => {} })); } - removeAllListeners(eventName?: string) { - if (!eventName) { - this.events = {}; - } else if (this.events[eventName]) { - delete this.events[eventName]; - } - } - - removeListener(eventName: string, listener: Listener) { - const listeners = this.listeners(eventName); - if (listeners) { - this.events[eventName] = listeners.filter((l) => l !== listener); - } - } - - on(eventName: string, listener: Listener) { - this.addListener(eventName, listener); - } - - off(eventName: string, listener: Listener) { - this.removeListener(eventName, listener); - } - - private handleEvent(event: ChannelEvent) { - const listeners = this.listeners(event.type); - if (listeners && listeners.length) { - listeners.forEach((fn) => { - fn.apply(event, event.args); - }); - } - this.data[event.type] = event.args; - } - - private onceListener(eventName: string, listener: Listener) { - const onceListener: Listener = (...args: any[]) => { - this.removeListener(eventName, onceListener); - return listener(...args); - }; - return onceListener; - } + return new Channel({ transports }); } -export default Channel; +export type { Listener, ChannelEvent, ChannelTransport, ChannelHandler } from './types'; diff --git a/code/lib/channels/src/main.ts b/code/lib/channels/src/main.ts new file mode 100644 index 000000000000..ae8c2220529d --- /dev/null +++ b/code/lib/channels/src/main.ts @@ -0,0 +1,148 @@ +/// + +import type { + ChannelArgs, + ChannelArgsMulti, + EventsKeyValue, + ChannelTransport, + ChannelArgsSingle, + Listener, + ChannelEvent, +} from './types'; + +const isMulti = (args: ChannelArgs): args is ChannelArgsMulti => { + // @ts-expect-error (we guard against this right here) + return args.transports !== undefined; +}; + +const generateRandomId = () => { + // generates a random 13 character string + return Math.random().toString(16).slice(2); +}; + +export class Channel { + readonly isAsync: boolean; + + private sender = generateRandomId(); + + private events: EventsKeyValue = {}; + + private data: Record = {}; + + private readonly transports: ChannelTransport[] = []; + + constructor(input: ChannelArgsMulti); + constructor(input: ChannelArgsSingle); + constructor(input: ChannelArgs = {}) { + this.isAsync = input.async || false; + + if (isMulti(input)) { + this.transports = input.transports || []; + + this.transports.forEach((t) => { + t.setHandler((event) => this.handleEvent(event)); + }); + } else { + this.transports = input.transport ? [input.transport] : []; + } + + this.transports.forEach((t) => { + t.setHandler((event) => this.handleEvent(event)); + }); + } + + get hasTransport() { + return this.transports.length > 0; + } + + addListener(eventName: string, listener: Listener) { + this.events[eventName] = this.events[eventName] || []; + this.events[eventName].push(listener); + } + + emit(eventName: string, ...args: any) { + const event: ChannelEvent = { type: eventName, args, from: this.sender }; + let options = {}; + if (args.length >= 1 && args[0] && args[0].options) { + options = args[0].options; + } + + const handler = () => { + this.transports.forEach((t) => { + t.send(event, options); + }); + this.handleEvent(event); + }; + + if (this.isAsync) { + // todo I'm not sure how to test this + setImmediate(handler); + } else { + handler(); + } + } + + last(eventName: string) { + return this.data[eventName]; + } + + eventNames() { + return Object.keys(this.events); + } + + listenerCount(eventName: string) { + const listeners = this.listeners(eventName); + return listeners ? listeners.length : 0; + } + + listeners(eventName: string): Listener[] | undefined { + const listeners = this.events[eventName]; + return listeners || undefined; + } + + once(eventName: string, listener: Listener) { + const onceListener: Listener = this.onceListener(eventName, listener); + this.addListener(eventName, onceListener); + } + + removeAllListeners(eventName?: string) { + if (!eventName) { + this.events = {}; + } else if (this.events[eventName]) { + delete this.events[eventName]; + } + } + + removeListener(eventName: string, listener: Listener) { + const listeners = this.listeners(eventName); + if (listeners) { + this.events[eventName] = listeners.filter((l) => l !== listener); + } + } + + on(eventName: string, listener: Listener) { + this.addListener(eventName, listener); + } + + off(eventName: string, listener: Listener) { + this.removeListener(eventName, listener); + } + + private handleEvent(event: ChannelEvent) { + const listeners = this.listeners(event.type); + if (listeners && listeners.length) { + listeners.forEach((fn) => { + fn.apply(event, event.args); + }); + } + this.data[event.type] = event.args; + } + + private onceListener(eventName: string, listener: Listener) { + const onceListener: Listener = (...args: any[]) => { + this.removeListener(eventName, onceListener); + return listener(...args); + }; + return onceListener; + } +} diff --git a/code/lib/channels/src/postmessage/getEventSourceUrl.ts b/code/lib/channels/src/postmessage/getEventSourceUrl.ts new file mode 100644 index 000000000000..da3f4ec4d2f6 --- /dev/null +++ b/code/lib/channels/src/postmessage/getEventSourceUrl.ts @@ -0,0 +1,44 @@ +import { logger } from '@storybook/client-logger'; + +export const getEventSourceUrl = (event: MessageEvent) => { + const frames: HTMLIFrameElement[] = Array.from( + document.querySelectorAll('iframe[data-is-storybook]') + ); + // try to find the originating iframe by matching it's contentWindow + // This might not be cross-origin safe + const [frame, ...remainder] = frames.filter((element) => { + try { + return element.contentWindow === event.source; + } catch (err) { + // continue + } + + const src = element.getAttribute('src'); + let origin; + + try { + if (!src) { + return false; + } + + ({ origin } = new URL(src, document.location.toString())); + } catch (err) { + return false; + } + return origin === event.origin; + }); + + const src = frame?.getAttribute('src'); + if (src && remainder.length === 0) { + const { protocol, host, pathname } = new URL(src, document.location.toString()); + return `${protocol}//${host}${pathname}`; + } + + if (remainder.length > 0) { + // If we found multiple matches, there's going to be trouble + logger.error('found multiple candidates for event source'); + } + + // If we found no frames of matches + return null; +}; diff --git a/code/lib/channel-postmessage/src/index.ts b/code/lib/channels/src/postmessage/index.ts similarity index 74% rename from code/lib/channel-postmessage/src/index.ts rename to code/lib/channels/src/postmessage/index.ts index 7a6b428c2a1e..2de550dbce38 100644 --- a/code/lib/channel-postmessage/src/index.ts +++ b/code/lib/channels/src/postmessage/index.ts @@ -1,24 +1,23 @@ +/* eslint-disable @typescript-eslint/triple-slash-reference */ +/// + import { global } from '@storybook/global'; import * as EVENTS from '@storybook/core-events'; -import { Channel } from '@storybook/channels'; -import type { ChannelHandler, ChannelEvent, ChannelTransport } from '@storybook/channels'; -import { WebsocketTransport } from '@storybook/channel-websocket'; import { logger, pretty } from '@storybook/client-logger'; import { isJSON, parse, stringify } from 'telejson'; import qs from 'qs'; import invariant from 'tiny-invariant'; - -const { document, location, CONFIG_TYPE } = global; - -interface Config { - page: 'manager' | 'preview'; -} - -interface BufferedEvent { - event: ChannelEvent; - resolve: (value?: any) => void; - reject: (reason?: any) => void; -} +import { Channel } from '../main'; +import type { + ChannelTransport, + BufferedEvent, + ChannelHandler, + Config, + ChannelEvent, +} from '../types'; +import { getEventSourceUrl } from './getEventSourceUrl'; + +const { document, location } = global; export const KEY = 'storybook-channel'; @@ -28,7 +27,7 @@ const defaultEventOptions = { allowFunction: true, maxDepth: 25 }; // that way we can send postMessage to child windows as well, not just iframe // https://stackoverflow.com/questions/6340160/how-to-get-the-references-of-all-already-opened-child-windows -export class PostmsgTransport implements ChannelTransport { +export class PostMessageTransport implements ChannelTransport { private buffer: BufferedEvent[]; private handler?: ChannelHandler; @@ -243,65 +242,24 @@ export class PostmsgTransport implements ChannelTransport { } } -const getEventSourceUrl = (event: MessageEvent) => { - const frames: HTMLIFrameElement[] = Array.from( - document.querySelectorAll('iframe[data-is-storybook]') - ); - // try to find the originating iframe by matching it's contentWindow - // This might not be cross-origin safe - const [frame, ...remainder] = frames.filter((element) => { - try { - return element.contentWindow === event.source; - } catch (err) { - // continue - } - - const src = element.getAttribute('src'); - let origin; - - try { - if (!src) { - return false; - } - - ({ origin } = new URL(src, document.location.toString())); - } catch (err) { - return false; - } - return origin === event.origin; - }); - - const src = frame?.getAttribute('src'); - if (src && remainder.length === 0) { - const { protocol, host, pathname } = new URL(src, document.location.toString()); - return `${protocol}//${host}${pathname}`; - } - - if (remainder.length > 0) { - // If we found multiple matches, there's going to be trouble - logger.error('found multiple candidates for event source'); - } - - // If we found no frames of matches - return null; -}; +/** + * @deprecated This export is deprecated. Use `PostMessageTransport` instead. This API will be removed in 8.0. + */ +export const PostmsgTransport = PostMessageTransport; /** - * Creates a channel which communicates with an iframe or child window. + * @deprecated This function is deprecated. Use the `createBrowserChannel` factory function from `@storybook/channels` instead. This API will be removed in 8.0. + * @param {Config} config - The configuration object. + * @returns {Channel} The channel instance. */ export function createChannel({ page }: Config): Channel { - const transports: ChannelTransport[] = [new PostmsgTransport({ page })]; - - if (CONFIG_TYPE === 'DEVELOPMENT') { - const protocol = window.location.protocol === 'http:' ? 'ws' : 'wss'; - const { hostname, port } = window.location; - const channelUrl = `${protocol}://${hostname}:${port}/storybook-server-channel`; - - transports.push(new WebsocketTransport({ url: channelUrl, onError: () => {} })); - } - - return new Channel({ transports }); + const transport = new PostmsgTransport({ page }); + return new Channel({ transport }); } -// backwards compat with builder-vite +/** + * @deprecated This function is deprecated. Use the `createBrowserChannel` factory function from `@storybook/channels` instead. This API will be removed in 8.0. + * @param {Config} config - The configuration object. + * @returns {Channel} The channel instance. + */ export default createChannel; diff --git a/code/lib/channels/src/types.ts b/code/lib/channels/src/types.ts new file mode 100644 index 000000000000..f2904700cf1d --- /dev/null +++ b/code/lib/channels/src/types.ts @@ -0,0 +1,40 @@ +export interface Config { + page: 'manager' | 'preview'; +} + +export interface BufferedEvent { + event: ChannelEvent; + resolve: (value?: any) => void; + reject: (reason?: any) => void; +} + +export type ChannelHandler = (event: ChannelEvent) => void; + +export interface ChannelTransport { + send(event: ChannelEvent, options?: any): void; + setHandler(handler: ChannelHandler): void; +} + +export interface ChannelEvent { + type: string; // eventName + from: string; + args: any[]; +} + +export interface Listener { + (...args: any[]): void; +} + +export interface EventsKeyValue { + [key: string]: Listener[]; +} + +export type ChannelArgs = ChannelArgsSingle | ChannelArgsMulti; +export interface ChannelArgsSingle { + transport?: ChannelTransport; + async?: boolean; +} +export interface ChannelArgsMulti { + transports: ChannelTransport[]; + async?: boolean; +} diff --git a/code/lib/channel-postmessage/src/typings.d.ts b/code/lib/channels/src/typings.d.ts similarity index 100% rename from code/lib/channel-postmessage/src/typings.d.ts rename to code/lib/channels/src/typings.d.ts diff --git a/code/lib/channel-websocket/src/index.ts b/code/lib/channels/src/websocket/index.ts similarity index 63% rename from code/lib/channel-websocket/src/index.ts rename to code/lib/channels/src/websocket/index.ts index 64fa26e74b2c..c07a96ffd71e 100644 --- a/code/lib/channel-websocket/src/index.ts +++ b/code/lib/channels/src/websocket/index.ts @@ -1,11 +1,12 @@ +/* eslint-disable @typescript-eslint/triple-slash-reference */ +/// + import { global } from '@storybook/global'; -import { Channel } from '@storybook/channels'; -import type { ChannelHandler, ChannelTransport } from '@storybook/channels'; import { logger } from '@storybook/client-logger'; import { isJSON, parse, stringify } from 'telejson'; import invariant from 'tiny-invariant'; - -const { CONFIG_TYPE } = global; +import { Channel } from '../main'; +import type { ChannelTransport, ChannelHandler } from '../types'; const { WebSocket } = global; @@ -22,12 +23,12 @@ interface CreateChannelArgs { onError?: OnError; } -export class WebsocketTransport { - private socket: WebSocket; +export class WebsocketTransport implements ChannelTransport { + private buffer: string[] = []; private handler?: ChannelHandler; - private buffer: string[] = []; + private socket: WebSocket; private isReady = false; @@ -77,28 +78,28 @@ export class WebsocketTransport { } } +/** + * @deprecated This function is deprecated. Use the `createBrowserChannel` factory function from `@storybook/channels` instead. This API will be removed in 8.0. + * @param {CreateChannelArgs} options - The options for creating the channel. + * @param {string} [options.url] - The URL of the WebSocket server to connect to. + * @param {boolean} [options.async=false] - Whether the channel should be asynchronous. + * @param {OnError} [options.onError] - A function to handle errors that occur during the channel's lifetime. + * @returns {Channel} - The newly created channel. + */ export function createChannel({ url, async = false, onError = (err) => logger.warn(err), }: CreateChannelArgs) { - const transports: ChannelTransport[] = []; - - if (url) { - transports.push(new WebsocketTransport({ url, onError })); - } - - const isUrlServerChannel = !!url?.includes('storybook-server-channel'); - - if (CONFIG_TYPE === 'DEVELOPMENT' && isUrlServerChannel === false) { + let channelUrl = url; + if (!channelUrl) { const protocol = window.location.protocol === 'http:' ? 'ws' : 'wss'; const { hostname, port } = window.location; - const channelUrl = `${protocol}://${hostname}:${port}/storybook-server-channel`; - - transports.push(new WebsocketTransport({ url: channelUrl, onError: () => {} })); + channelUrl = `${protocol}://${hostname}:${port}/storybook-server-channel`; } - return new Channel({ transports, async }); + const transport = new WebsocketTransport({ url: channelUrl, onError }); + return new Channel({ transport, async }); } // backwards compat with builder-vite diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json index dab5477f2e6d..f6a69c16e4a3 100644 --- a/code/lib/cli-sb/package.json +++ b/code/lib/cli-sb/package.json @@ -1,6 +1,6 @@ { "name": "sb", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook CLI", "keywords": [ "storybook" @@ -21,7 +21,7 @@ "license": "MIT", "bin": "./index.js", "dependencies": { - "@storybook/cli": "7.1.0-alpha.32" + "@storybook/cli": "7.1.0-alpha.33" }, "publishConfig": { "access": "public" diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json index d724b6b6f9d0..e25cdcf701ec 100644 --- a/code/lib/cli-storybook/package.json +++ b/code/lib/cli-storybook/package.json @@ -1,6 +1,6 @@ { "name": "storybook", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook CLI", "keywords": [ "storybook" @@ -24,7 +24,7 @@ "storybook": "./index.js" }, "dependencies": { - "@storybook/cli": "7.1.0-alpha.32" + "@storybook/cli": "7.1.0-alpha.33" }, "publishConfig": { "access": "public" diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index 9c62f6380f5d..a12f051ceffb 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook's CLI - easiest method of adding storybook to your projects", "keywords": [ "cli", @@ -57,13 +57,13 @@ "@babel/core": "^7.22.0", "@babel/preset-env": "^7.22.0", "@ndelangen/get-tarball": "^3.0.7", - "@storybook/codemod": "7.1.0-alpha.32", - "@storybook/core-common": "7.1.0-alpha.32", - "@storybook/core-server": "7.1.0-alpha.32", - "@storybook/csf-tools": "7.1.0-alpha.32", - "@storybook/node-logger": "7.1.0-alpha.32", - "@storybook/telemetry": "7.1.0-alpha.32", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/codemod": "7.1.0-alpha.33", + "@storybook/core-common": "7.1.0-alpha.33", + "@storybook/core-server": "7.1.0-alpha.33", + "@storybook/csf-tools": "7.1.0-alpha.33", + "@storybook/node-logger": "7.1.0-alpha.33", + "@storybook/telemetry": "7.1.0-alpha.33", + "@storybook/types": "7.1.0-alpha.33", "@types/semver": "^7.3.4", "boxen": "^5.1.2", "chalk": "^4.1.0", @@ -94,7 +94,7 @@ "util-deprecate": "^1.0.2" }, "devDependencies": { - "@storybook/client-api": "7.1.0-alpha.32", + "@storybook/client-api": "7.1.0-alpha.33", "@types/cross-spawn": "^6.0.2", "@types/prompts": "^2.0.9", "@types/puppeteer-core": "^2.1.0", diff --git a/code/lib/cli/src/dev.ts b/code/lib/cli/src/dev.ts index be90c298d68d..216a15595a73 100644 --- a/code/lib/cli/src/dev.ts +++ b/code/lib/cli/src/dev.ts @@ -3,6 +3,7 @@ import { sync as readUpSync } from 'read-pkg-up'; import { logger, instance as npmLog } from '@storybook/node-logger'; import { buildDevStandalone, withTelemetry } from '@storybook/core-server'; import { cache } from '@storybook/core-common'; +import type { CLIOptions } from '@storybook/types'; function printError(error: any) { // this is a weird bugfix, somehow 'node-pre-gyp' is polluting the npmLog header @@ -35,7 +36,7 @@ function printError(error: any) { logger.line(); } -export const dev = async (cliOptions: any) => { +export const dev = async (cliOptions: CLIOptions) => { process.env.NODE_ENV = process.env.NODE_ENV || 'development'; const options = { @@ -45,8 +46,15 @@ export const dev = async (cliOptions: any) => { ignorePreview: !!cliOptions.previewUrl && !cliOptions.forceBuildPreview, cache, packageJson: readUpSync({ cwd: __dirname }).packageJson, - }; - await withTelemetry('dev', { cliOptions, presetOptions: options, printError }, () => - buildDevStandalone(options) + } as Parameters[0]; + + await withTelemetry( + 'dev', + { + cliOptions, + presetOptions: options as Parameters[1]['presetOptions'], + printError, + }, + () => buildDevStandalone(options) ); }; diff --git a/code/lib/cli/src/generate.ts b/code/lib/cli/src/generate.ts index 6b71d0d0464f..0a3ea06f54c5 100644 --- a/code/lib/cli/src/generate.ts +++ b/code/lib/cli/src/generate.ts @@ -216,6 +216,10 @@ command('dev') ) .option('--force-build-preview', 'Build the preview iframe even if you are using --preview-url') .option('--docs', 'Build a documentation-only site using addon-docs') + .option( + '--initial-path [path]', + 'URL path to be appended when visiting Storybook for the first time' + ) .action(async (options) => { logger.setLevel(program.loglevel); consoleLogger.log(chalk.bold(`${pkg.name} v${pkg.version}`) + chalk.reset('\n')); diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts index 999c533f0025..512e6dca5c9b 100644 --- a/code/lib/cli/src/generators/baseGenerator.ts +++ b/code/lib/cli/src/generators/baseGenerator.ts @@ -277,17 +277,17 @@ export async function baseGenerator( ); } - const packages = [ + const allPackages = [ 'storybook', getExternalFramework(rendererId) ? undefined : `@storybook/${rendererId}`, ...frameworkPackages, ...addonPackages, ...extraPackages, - ] - .filter(Boolean) - .filter( - (packageToInstall) => !installedDependencies.has(getPackageDetails(packageToInstall)[0]) - ); + ].filter(Boolean); + + const packages = [...new Set(allPackages)].filter( + (packageToInstall) => !installedDependencies.has(getPackageDetails(packageToInstall)[0]) + ); logger.log(); const versionedPackagesSpinner = ora({ @@ -299,30 +299,6 @@ export async function baseGenerator( ); versionedPackagesSpinner.succeed(); - await fse.ensureDir(`./${storybookConfigFolder}`); - - if (addMainFile) { - await configureMain({ - framework: { name: frameworkInclude, options: options.framework || {} }, - storybookConfigFolder, - docs: { autodocs: 'tag' }, - addons: pnp ? addons.map(wrapForPnp) : addons, - extensions, - language, - ...(staticDir ? { staticDirs: [path.join('..', staticDir)] } : null), - ...extraMain, - ...(type !== 'framework' - ? { - core: { - builder: builderInclude, - }, - } - : {}), - }); - } - - await configurePreview({ frameworkPreviewParts, storybookConfigFolder, language, rendererId }); - const depsToInstall = [...versionedPackages]; // Add basic babel config for a select few frameworks that need it, if they do not have a babel config file already @@ -385,6 +361,30 @@ export async function baseGenerator( addDependenciesSpinner.succeed(); } + await fse.ensureDir(`./${storybookConfigFolder}`); + + if (addMainFile) { + await configureMain({ + framework: { name: frameworkInclude, options: options.framework || {} }, + storybookConfigFolder, + docs: { autodocs: 'tag' }, + addons: pnp ? addons.map(wrapForPnp) : addons, + extensions, + language, + ...(staticDir ? { staticDirs: [path.join('..', staticDir)] } : null), + ...extraMain, + ...(type !== 'framework' + ? { + core: { + builder: builderInclude, + }, + } + : {}), + }); + } + + await configurePreview({ frameworkPreviewParts, storybookConfigFolder, language, rendererId }); + if (addScripts) { await stopIfExiting(async () => packageManager.addStorybookCommandInScripts({ diff --git a/code/lib/cli/src/initiate.ts b/code/lib/cli/src/initiate.ts index 6d62f6061ca7..0f74d3c21609 100644 --- a/code/lib/cli/src/initiate.ts +++ b/code/lib/cli/src/initiate.ts @@ -5,6 +5,7 @@ import { telemetry } from '@storybook/telemetry'; import { withTelemetry } from '@storybook/core-server'; import dedent from 'ts-dedent'; +import boxen from 'boxen'; import { installableProjectTypes, ProjectType } from './project_types'; import { detect, @@ -37,6 +38,7 @@ import { JsPackageManagerFactory, useNpmWarning } from './js-package-manager'; import type { NpmOptions } from './NpmOptions'; import type { CommandOptions } from './generators/types'; import { HandledError } from './HandledError'; +import { dev } from './dev'; const logger = console; @@ -256,7 +258,7 @@ async function doInitiate(options: CommandOptions, pkg: PackageJson): Promise { diff --git a/code/lib/cli/src/versions.ts b/code/lib/cli/src/versions.ts index c2a07d6bd517..025617f654fe 100644 --- a/code/lib/cli/src/versions.ts +++ b/code/lib/cli/src/versions.ts @@ -1,96 +1,96 @@ // auto generated file, do not edit export default { - '@storybook/addon-a11y': '7.1.0-alpha.32', - '@storybook/addon-actions': '7.1.0-alpha.32', - '@storybook/addon-backgrounds': '7.1.0-alpha.32', - '@storybook/addon-controls': '7.1.0-alpha.32', - '@storybook/addon-docs': '7.1.0-alpha.32', - '@storybook/addon-essentials': '7.1.0-alpha.32', - '@storybook/addon-highlight': '7.1.0-alpha.32', - '@storybook/addon-interactions': '7.1.0-alpha.32', - '@storybook/addon-jest': '7.1.0-alpha.32', - '@storybook/addon-links': '7.1.0-alpha.32', - '@storybook/addon-mdx-gfm': '7.1.0-alpha.32', - '@storybook/addon-measure': '7.1.0-alpha.32', - '@storybook/addon-outline': '7.1.0-alpha.32', - '@storybook/addon-storyshots': '7.1.0-alpha.32', - '@storybook/addon-storyshots-puppeteer': '7.1.0-alpha.32', - '@storybook/addon-storysource': '7.1.0-alpha.32', - '@storybook/addon-toolbars': '7.1.0-alpha.32', - '@storybook/addon-viewport': '7.1.0-alpha.32', - '@storybook/addons': '7.1.0-alpha.32', - '@storybook/angular': '7.1.0-alpha.32', - '@storybook/api': '7.1.0-alpha.32', - '@storybook/blocks': '7.1.0-alpha.32', - '@storybook/builder-manager': '7.1.0-alpha.32', - '@storybook/builder-vite': '7.1.0-alpha.32', - '@storybook/builder-webpack5': '7.1.0-alpha.32', - '@storybook/channel-postmessage': '7.1.0-alpha.32', - '@storybook/channel-websocket': '7.1.0-alpha.32', - '@storybook/channels': '7.1.0-alpha.32', - '@storybook/cli': '7.1.0-alpha.32', - '@storybook/client-api': '7.1.0-alpha.32', - '@storybook/client-logger': '7.1.0-alpha.32', - '@storybook/codemod': '7.1.0-alpha.32', - '@storybook/components': '7.1.0-alpha.32', - '@storybook/core-client': '7.1.0-alpha.32', - '@storybook/core-common': '7.1.0-alpha.32', - '@storybook/core-events': '7.1.0-alpha.32', - '@storybook/core-server': '7.1.0-alpha.32', - '@storybook/core-webpack': '7.1.0-alpha.32', - '@storybook/csf-plugin': '7.1.0-alpha.32', - '@storybook/csf-tools': '7.1.0-alpha.32', - '@storybook/docs-tools': '7.1.0-alpha.32', - '@storybook/ember': '7.1.0-alpha.32', - '@storybook/html': '7.1.0-alpha.32', - '@storybook/html-vite': '7.1.0-alpha.32', - '@storybook/html-webpack5': '7.1.0-alpha.32', - '@storybook/instrumenter': '7.1.0-alpha.32', - '@storybook/manager': '7.1.0-alpha.32', - '@storybook/manager-api': '7.1.0-alpha.32', - '@storybook/nextjs': '7.1.0-alpha.32', - '@storybook/node-logger': '7.1.0-alpha.32', - '@storybook/postinstall': '7.1.0-alpha.32', - '@storybook/preact': '7.1.0-alpha.32', - '@storybook/preact-vite': '7.1.0-alpha.32', - '@storybook/preact-webpack5': '7.1.0-alpha.32', - '@storybook/preset-create-react-app': '7.1.0-alpha.32', - '@storybook/preset-html-webpack': '7.1.0-alpha.32', - '@storybook/preset-preact-webpack': '7.1.0-alpha.32', - '@storybook/preset-react-webpack': '7.1.0-alpha.32', - '@storybook/preset-server-webpack': '7.1.0-alpha.32', - '@storybook/preset-svelte-webpack': '7.1.0-alpha.32', - '@storybook/preset-vue-webpack': '7.1.0-alpha.32', - '@storybook/preset-vue3-webpack': '7.1.0-alpha.32', - '@storybook/preset-web-components-webpack': '7.1.0-alpha.32', - '@storybook/preview': '7.1.0-alpha.32', - '@storybook/preview-api': '7.1.0-alpha.32', - '@storybook/preview-web': '7.1.0-alpha.32', - '@storybook/react': '7.1.0-alpha.32', - '@storybook/react-dom-shim': '7.1.0-alpha.32', - '@storybook/react-vite': '7.1.0-alpha.32', - '@storybook/react-webpack5': '7.1.0-alpha.32', - '@storybook/router': '7.1.0-alpha.32', - '@storybook/server': '7.1.0-alpha.32', - '@storybook/server-webpack5': '7.1.0-alpha.32', - '@storybook/source-loader': '7.1.0-alpha.32', - '@storybook/store': '7.1.0-alpha.32', - '@storybook/svelte': '7.1.0-alpha.32', - '@storybook/svelte-vite': '7.1.0-alpha.32', - '@storybook/svelte-webpack5': '7.1.0-alpha.32', - '@storybook/sveltekit': '7.1.0-alpha.32', - '@storybook/telemetry': '7.1.0-alpha.32', - '@storybook/theming': '7.1.0-alpha.32', - '@storybook/types': '7.1.0-alpha.32', - '@storybook/vue': '7.1.0-alpha.32', - '@storybook/vue-vite': '7.1.0-alpha.32', - '@storybook/vue-webpack5': '7.1.0-alpha.32', - '@storybook/vue3': '7.1.0-alpha.32', - '@storybook/vue3-vite': '7.1.0-alpha.32', - '@storybook/vue3-webpack5': '7.1.0-alpha.32', - '@storybook/web-components': '7.1.0-alpha.32', - '@storybook/web-components-vite': '7.1.0-alpha.32', - '@storybook/web-components-webpack5': '7.1.0-alpha.32', - sb: '7.1.0-alpha.32', - storybook: '7.1.0-alpha.32', + '@storybook/addon-a11y': '7.1.0-alpha.33', + '@storybook/addon-actions': '7.1.0-alpha.33', + '@storybook/addon-backgrounds': '7.1.0-alpha.33', + '@storybook/addon-controls': '7.1.0-alpha.33', + '@storybook/addon-docs': '7.1.0-alpha.33', + '@storybook/addon-essentials': '7.1.0-alpha.33', + '@storybook/addon-highlight': '7.1.0-alpha.33', + '@storybook/addon-interactions': '7.1.0-alpha.33', + '@storybook/addon-jest': '7.1.0-alpha.33', + '@storybook/addon-links': '7.1.0-alpha.33', + '@storybook/addon-mdx-gfm': '7.1.0-alpha.33', + '@storybook/addon-measure': '7.1.0-alpha.33', + '@storybook/addon-outline': '7.1.0-alpha.33', + '@storybook/addon-storyshots': '7.1.0-alpha.33', + '@storybook/addon-storyshots-puppeteer': '7.1.0-alpha.33', + '@storybook/addon-storysource': '7.1.0-alpha.33', + '@storybook/addon-toolbars': '7.1.0-alpha.33', + '@storybook/addon-viewport': '7.1.0-alpha.33', + '@storybook/addons': '7.1.0-alpha.33', + '@storybook/angular': '7.1.0-alpha.33', + '@storybook/api': '7.1.0-alpha.33', + '@storybook/blocks': '7.1.0-alpha.33', + '@storybook/builder-manager': '7.1.0-alpha.33', + '@storybook/builder-vite': '7.1.0-alpha.33', + '@storybook/builder-webpack5': '7.1.0-alpha.33', + '@storybook/channel-postmessage': '7.1.0-alpha.33', + '@storybook/channel-websocket': '7.1.0-alpha.33', + '@storybook/channels': '7.1.0-alpha.33', + '@storybook/cli': '7.1.0-alpha.33', + '@storybook/client-api': '7.1.0-alpha.33', + '@storybook/client-logger': '7.1.0-alpha.33', + '@storybook/codemod': '7.1.0-alpha.33', + '@storybook/components': '7.1.0-alpha.33', + '@storybook/core-client': '7.1.0-alpha.33', + '@storybook/core-common': '7.1.0-alpha.33', + '@storybook/core-events': '7.1.0-alpha.33', + '@storybook/core-server': '7.1.0-alpha.33', + '@storybook/core-webpack': '7.1.0-alpha.33', + '@storybook/csf-plugin': '7.1.0-alpha.33', + '@storybook/csf-tools': '7.1.0-alpha.33', + '@storybook/docs-tools': '7.1.0-alpha.33', + '@storybook/ember': '7.1.0-alpha.33', + '@storybook/html': '7.1.0-alpha.33', + '@storybook/html-vite': '7.1.0-alpha.33', + '@storybook/html-webpack5': '7.1.0-alpha.33', + '@storybook/instrumenter': '7.1.0-alpha.33', + '@storybook/manager': '7.1.0-alpha.33', + '@storybook/manager-api': '7.1.0-alpha.33', + '@storybook/nextjs': '7.1.0-alpha.33', + '@storybook/node-logger': '7.1.0-alpha.33', + '@storybook/postinstall': '7.1.0-alpha.33', + '@storybook/preact': '7.1.0-alpha.33', + '@storybook/preact-vite': '7.1.0-alpha.33', + '@storybook/preact-webpack5': '7.1.0-alpha.33', + '@storybook/preset-create-react-app': '7.1.0-alpha.33', + '@storybook/preset-html-webpack': '7.1.0-alpha.33', + '@storybook/preset-preact-webpack': '7.1.0-alpha.33', + '@storybook/preset-react-webpack': '7.1.0-alpha.33', + '@storybook/preset-server-webpack': '7.1.0-alpha.33', + '@storybook/preset-svelte-webpack': '7.1.0-alpha.33', + '@storybook/preset-vue-webpack': '7.1.0-alpha.33', + '@storybook/preset-vue3-webpack': '7.1.0-alpha.33', + '@storybook/preset-web-components-webpack': '7.1.0-alpha.33', + '@storybook/preview': '7.1.0-alpha.33', + '@storybook/preview-api': '7.1.0-alpha.33', + '@storybook/preview-web': '7.1.0-alpha.33', + '@storybook/react': '7.1.0-alpha.33', + '@storybook/react-dom-shim': '7.1.0-alpha.33', + '@storybook/react-vite': '7.1.0-alpha.33', + '@storybook/react-webpack5': '7.1.0-alpha.33', + '@storybook/router': '7.1.0-alpha.33', + '@storybook/server': '7.1.0-alpha.33', + '@storybook/server-webpack5': '7.1.0-alpha.33', + '@storybook/source-loader': '7.1.0-alpha.33', + '@storybook/store': '7.1.0-alpha.33', + '@storybook/svelte': '7.1.0-alpha.33', + '@storybook/svelte-vite': '7.1.0-alpha.33', + '@storybook/svelte-webpack5': '7.1.0-alpha.33', + '@storybook/sveltekit': '7.1.0-alpha.33', + '@storybook/telemetry': '7.1.0-alpha.33', + '@storybook/theming': '7.1.0-alpha.33', + '@storybook/types': '7.1.0-alpha.33', + '@storybook/vue': '7.1.0-alpha.33', + '@storybook/vue-vite': '7.1.0-alpha.33', + '@storybook/vue-webpack5': '7.1.0-alpha.33', + '@storybook/vue3': '7.1.0-alpha.33', + '@storybook/vue3-vite': '7.1.0-alpha.33', + '@storybook/vue3-webpack5': '7.1.0-alpha.33', + '@storybook/web-components': '7.1.0-alpha.33', + '@storybook/web-components-vite': '7.1.0-alpha.33', + '@storybook/web-components-webpack5': '7.1.0-alpha.33', + sb: '7.1.0-alpha.33', + storybook: '7.1.0-alpha.33', }; diff --git a/code/lib/client-logger/package.json b/code/lib/client-logger/package.json index 9ee90ad79f35..5907f3a3f0f7 100644 --- a/code/lib/client-logger/package.json +++ b/code/lib/client-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-logger", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "", "keywords": [ "storybook" diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 6e68e5e82673..88fcba76ca90 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" @@ -49,9 +49,9 @@ "@babel/preset-env": "^7.22.0", "@babel/types": "^7.22.0", "@storybook/csf": "^0.1.0", - "@storybook/csf-tools": "7.1.0-alpha.32", - "@storybook/node-logger": "7.1.0-alpha.32", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/csf-tools": "7.1.0-alpha.33", + "@storybook/node-logger": "7.1.0-alpha.33", + "@storybook/types": "7.1.0-alpha.33", "@types/cross-spawn": "^6.0.2", "cross-spawn": "^7.0.3", "globby": "^11.0.2", diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json index 1eb3923b3320..18c46aafc1b4 100644 --- a/code/lib/core-common/package.json +++ b/code/lib/core-common/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-common", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -43,14 +43,16 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/node-logger": "7.1.0-alpha.32", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/node-logger": "7.1.0-alpha.33", + "@storybook/types": "7.1.0-alpha.33", + "@types/find-cache-dir": "^3.2.1", "@types/node": "^16.0.0", "@types/pretty-hrtime": "^1.0.0", "chalk": "^4.1.0", "esbuild": "^0.18.0", "esbuild-register": "^3.4.0", "file-system-cache": "^2.0.0", + "find-cache-dir": "^3.0.0", "find-up": "^5.0.0", "fs-extra": "^11.1.0", "glob": "^10.0.0", diff --git a/code/lib/core-common/src/utils/resolve-path-in-sb-cache.ts b/code/lib/core-common/src/utils/resolve-path-in-sb-cache.ts index 7157abdc0257..de88c2e2c00b 100644 --- a/code/lib/core-common/src/utils/resolve-path-in-sb-cache.ts +++ b/code/lib/core-common/src/utils/resolve-path-in-sb-cache.ts @@ -1,5 +1,5 @@ import path from 'path'; -import pkgDir from 'pkg-dir'; +import findCacheDirectory from 'find-cache-dir'; /** * Get the path of the file or directory with input name inside the Storybook cache directory: @@ -10,16 +10,8 @@ import pkgDir from 'pkg-dir'; * @return {string} Absolute path to the file or directory */ export function resolvePathInStorybookCache(fileOrDirectoryName: string): string { - const cwd = process.cwd(); - const projectDir = pkgDir.sync(cwd); - - let cacheDirectory; - - if (!projectDir) { - cacheDirectory = path.resolve(cwd, '.cache/storybook'); - } else { - cacheDirectory = path.resolve(projectDir, 'node_modules/.cache/storybook'); - } + let cacheDirectory = findCacheDirectory({ name: 'storybook' }); + cacheDirectory ||= path.join(process.cwd(), '.cache/storybook'); return path.join(cacheDirectory, fileOrDirectoryName); } diff --git a/code/lib/core-events/package.json b/code/lib/core-events/package.json index 02dd1eeccec8..069d7be79367 100644 --- a/code/lib/core-events/package.json +++ b/code/lib/core-events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-events", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Event names used in storybook core", "keywords": [ "storybook" diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index c83822138171..c656193c4401 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-server", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -56,19 +56,19 @@ "dependencies": { "@aw-web-design/x-default-browser": "1.4.126", "@discoveryjs/json-ext": "^0.5.3", - "@storybook/builder-manager": "7.1.0-alpha.32", - "@storybook/channels": "7.1.0-alpha.32", - "@storybook/core-common": "7.1.0-alpha.32", - "@storybook/core-events": "7.1.0-alpha.32", + "@storybook/builder-manager": "7.1.0-alpha.33", + "@storybook/channels": "7.1.0-alpha.33", + "@storybook/core-common": "7.1.0-alpha.33", + "@storybook/core-events": "7.1.0-alpha.33", "@storybook/csf": "^0.1.0", - "@storybook/csf-tools": "7.1.0-alpha.32", + "@storybook/csf-tools": "7.1.0-alpha.33", "@storybook/docs-mdx": "^0.1.0", "@storybook/global": "^5.0.0", - "@storybook/manager": "7.1.0-alpha.32", - "@storybook/node-logger": "7.1.0-alpha.32", - "@storybook/preview-api": "7.1.0-alpha.32", - "@storybook/telemetry": "7.1.0-alpha.32", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/manager": "7.1.0-alpha.33", + "@storybook/node-logger": "7.1.0-alpha.33", + "@storybook/preview-api": "7.1.0-alpha.33", + "@storybook/telemetry": "7.1.0-alpha.33", + "@storybook/types": "7.1.0-alpha.33", "@types/detect-port": "^1.3.0", "@types/node": "^16.0.0", "@types/pretty-hrtime": "^1.0.0", diff --git a/code/lib/core-server/src/dev-server.ts b/code/lib/core-server/src/dev-server.ts index 27979118a088..6843c194e180 100644 --- a/code/lib/core-server/src/dev-server.ts +++ b/code/lib/core-server/src/dev-server.ts @@ -58,9 +58,9 @@ export async function storybookDevServer(options: Options) { app.use(router); - const { port, host } = options; + const { port, host, initialPath } = options; const proto = options.https ? 'https' : 'http'; - const { address, networkAddress } = getServerAddresses(port, host, proto); + const { address, networkAddress } = getServerAddresses(port, host, proto, initialPath); const listening = new Promise((resolve, reject) => { // @ts-expect-error (Following line doesn't match TypeScript signature at all 🤔) diff --git a/code/lib/core-server/src/utils/server-address.test.ts b/code/lib/core-server/src/utils/server-address.test.ts new file mode 100644 index 000000000000..bf7dbd194fcf --- /dev/null +++ b/code/lib/core-server/src/utils/server-address.test.ts @@ -0,0 +1,81 @@ +import detectPort from 'detect-port'; +import { getServerAddresses, getServerPort, getServerChannelUrl } from './server-address'; + +jest.mock('ip'); +jest.mock('detect-port'); +jest.mock('@storybook/node-logger'); + +describe('getServerAddresses', () => { + const port = 3000; + const host = 'localhost'; + const proto = 'http'; + + it('should return server addresses without initial path by default', () => { + const expectedAddress = `${proto}://localhost:${port}/`; + const expectedNetworkAddress = `${proto}://${host}:${port}/`; + + const result = getServerAddresses(port, host, proto); + + expect(result.address).toBe(expectedAddress); + expect(result.networkAddress).toBe(expectedNetworkAddress); + }); + + it('should return server addresses with initial path', () => { + const initialPath = '/foo/bar'; + + const expectedAddress = `${proto}://localhost:${port}/?path=/foo/bar`; + const expectedNetworkAddress = `${proto}://${host}:${port}/?path=/foo/bar`; + + const result = getServerAddresses(port, host, proto, initialPath); + + expect(result.address).toBe(expectedAddress); + expect(result.networkAddress).toBe(expectedNetworkAddress); + }); + + it('should return server addresses with initial path and add slash if missing', () => { + const initialPath = 'foo/bar'; + + const expectedAddress = `${proto}://localhost:${port}/?path=/foo/bar`; + const expectedNetworkAddress = `${proto}://${host}:${port}/?path=/foo/bar`; + + const result = getServerAddresses(port, host, proto, initialPath); + + expect(result.address).toBe(expectedAddress); + expect(result.networkAddress).toBe(expectedNetworkAddress); + }); +}); + +describe('getServerPort', () => { + const port = 3000; + + it('should resolve with a free port', async () => { + const expectedFreePort = 4000; + + (detectPort as jest.Mock).mockResolvedValue(expectedFreePort); + + const result = await getServerPort(port); + + expect(result).toBe(expectedFreePort); + }); +}); + +describe('getServerChannelUrl', () => { + const port = 3000; + it('should return WebSocket URL with HTTP', () => { + const options = { https: false }; + const expectedUrl = `ws://localhost:${port}/storybook-server-channel`; + + const result = getServerChannelUrl(port, options); + + expect(result).toBe(expectedUrl); + }); + + it('should return WebSocket URL with HTTPS', () => { + const options = { https: true }; + const expectedUrl = `wss://localhost:${port}/storybook-server-channel`; + + const result = getServerChannelUrl(port, options); + + expect(result).toBe(expectedUrl); + }); +}); diff --git a/code/lib/core-server/src/utils/server-address.ts b/code/lib/core-server/src/utils/server-address.ts index 54b57b09202d..3332fa53b0d3 100644 --- a/code/lib/core-server/src/utils/server-address.ts +++ b/code/lib/core-server/src/utils/server-address.ts @@ -3,10 +3,26 @@ import ip from 'ip'; import { logger } from '@storybook/node-logger'; import detectFreePort from 'detect-port'; -export function getServerAddresses(port: number, host: string, proto: string) { +export function getServerAddresses( + port: number, + host: string, + proto: string, + initialPath?: string +) { + const address = new URL(`${proto}://localhost:${port}/`); + const networkAddress = new URL(`${proto}://${host || ip.address()}:${port}/`); + + if (initialPath) { + const searchParams = `?path=${decodeURIComponent( + initialPath.startsWith('/') ? initialPath : `/${initialPath}` + )}`; + address.search = searchParams; + networkAddress.search = searchParams; + } + return { - address: `${proto}://localhost:${port}/`, - networkAddress: `${proto}://${host || ip.address()}:${port}/`, + address: address.href, + networkAddress: networkAddress.href, }; } diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index c33877fdb5d4..0b4b7c8c435f 100644 --- a/code/lib/core-webpack/package.json +++ b/code/lib/core-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-webpack", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -43,9 +43,9 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-common": "7.1.0-alpha.32", - "@storybook/node-logger": "7.1.0-alpha.32", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/core-common": "7.1.0-alpha.33", + "@storybook/node-logger": "7.1.0-alpha.33", + "@storybook/types": "7.1.0-alpha.33", "@types/node": "^16.0.0", "ts-dedent": "^2.0.0" }, diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json index 7a8025e68b03..f6ac7974f6fc 100644 --- a/code/lib/csf-plugin/package.json +++ b/code/lib/csf-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-plugin", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Enrich CSF files via static analysis", "keywords": [ "storybook" @@ -43,7 +43,7 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf-tools": "7.1.0-alpha.32", + "@storybook/csf-tools": "7.1.0-alpha.33", "unplugin": "^1.3.1" }, "devDependencies": { diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index ad0fc223e7b9..7a8d764baabc 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-tools", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Parse and manipulate CSF and Storybook config files", "keywords": [ "storybook" @@ -46,7 +46,7 @@ "@babel/traverse": "^7.22.0", "@babel/types": "^7.22.0", "@storybook/csf": "^0.1.0", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/types": "7.1.0-alpha.33", "fs-extra": "^11.1.0", "recast": "^0.23.1", "ts-dedent": "^2.0.0" diff --git a/code/lib/docs-tools/package.json b/code/lib/docs-tools/package.json index e5e6ccf73532..c071e75f36bd 100644 --- a/code/lib/docs-tools/package.json +++ b/code/lib/docs-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/docs-tools", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Shared utility functions for frameworks to implement docs", "keywords": [ "storybook" @@ -43,9 +43,9 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-common": "7.1.0-alpha.32", - "@storybook/preview-api": "7.1.0-alpha.32", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/core-common": "7.1.0-alpha.33", + "@storybook/preview-api": "7.1.0-alpha.33", + "@storybook/types": "7.1.0-alpha.33", "@types/doctrine": "^0.0.3", "doctrine": "^3.0.0", "lodash": "^4.17.21" diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json index d855635b7088..6c2007b6ce09 100644 --- a/code/lib/instrumenter/package.json +++ b/code/lib/instrumenter/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/instrumenter", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "", "keywords": [ "storybook" @@ -43,11 +43,11 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/channels": "7.1.0-alpha.32", - "@storybook/client-logger": "7.1.0-alpha.32", - "@storybook/core-events": "7.1.0-alpha.32", + "@storybook/channels": "7.1.0-alpha.33", + "@storybook/client-logger": "7.1.0-alpha.33", + "@storybook/core-events": "7.1.0-alpha.33", "@storybook/global": "^5.0.0", - "@storybook/preview-api": "7.1.0-alpha.32" + "@storybook/preview-api": "7.1.0-alpha.33" }, "devDependencies": { "typescript": "~4.9.3" diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index b664a0cf1836..e0ddbedbc443 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager-api", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Core Storybook Manager API & Context", "keywords": [ "storybook" @@ -42,14 +42,14 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/channels": "7.1.0-alpha.32", - "@storybook/client-logger": "7.1.0-alpha.32", - "@storybook/core-events": "7.1.0-alpha.32", + "@storybook/channels": "7.1.0-alpha.33", + "@storybook/client-logger": "7.1.0-alpha.33", + "@storybook/core-events": "7.1.0-alpha.33", "@storybook/csf": "^0.1.0", "@storybook/global": "^5.0.0", - "@storybook/router": "7.1.0-alpha.32", - "@storybook/theming": "7.1.0-alpha.32", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/router": "7.1.0-alpha.33", + "@storybook/theming": "7.1.0-alpha.33", + "@storybook/types": "7.1.0-alpha.33", "dequal": "^2.0.2", "lodash": "^4.17.21", "memoizerific": "^1.11.3", diff --git a/code/lib/manager-api/src/version.ts b/code/lib/manager-api/src/version.ts index bccfac138667..082eb7fd7c87 100644 --- a/code/lib/manager-api/src/version.ts +++ b/code/lib/manager-api/src/version.ts @@ -1 +1 @@ -export const version = '7.1.0-alpha.32'; +export const version = '7.1.0-alpha.33'; diff --git a/code/lib/node-logger/package.json b/code/lib/node-logger/package.json index 57e5230819ef..ea69b4950a8a 100644 --- a/code/lib/node-logger/package.json +++ b/code/lib/node-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/node-logger", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "", "keywords": [ "storybook" diff --git a/code/lib/postinstall/package.json b/code/lib/postinstall/package.json index 5e1375920d4f..bd933cf73134 100644 --- a/code/lib/postinstall/package.json +++ b/code/lib/postinstall/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/postinstall", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook addons postinstall utilities", "keywords": [ "api", diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index 889e23d5e38d..31868f62c453 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview-api", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "", "keywords": [ "storybook" @@ -67,13 +67,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/channel-postmessage": "7.1.0-alpha.32", - "@storybook/channels": "7.1.0-alpha.32", - "@storybook/client-logger": "7.1.0-alpha.32", - "@storybook/core-events": "7.1.0-alpha.32", + "@storybook/channel-postmessage": "7.1.0-alpha.33", + "@storybook/channels": "7.1.0-alpha.33", + "@storybook/client-logger": "7.1.0-alpha.33", + "@storybook/core-events": "7.1.0-alpha.33", "@storybook/csf": "^0.1.0", "@storybook/global": "^5.0.0", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/types": "7.1.0-alpha.33", "@types/qs": "^6.9.5", "dequal": "^2.0.2", "lodash": "^4.17.21", @@ -85,7 +85,7 @@ }, "devDependencies": { "@jest/globals": "^29.5.0", - "@storybook/core-common": "7.1.0-alpha.32", + "@storybook/core-common": "7.1.0-alpha.33", "ansi-to-html": "^0.6.11", "react": "^16.14.0", "slash": "^5.0.0" diff --git a/code/lib/preview-api/src/modules/core-client/start.test.ts b/code/lib/preview-api/src/modules/core-client/start.test.ts index 21fe956a7ad2..b114e640f50a 100644 --- a/code/lib/preview-api/src/modules/core-client/start.test.ts +++ b/code/lib/preview-api/src/modules/core-client/start.test.ts @@ -37,7 +37,9 @@ jest.mock('@storybook/global', () => ({ // console.log(global); -jest.mock('@storybook/channel-postmessage', () => ({ createChannel: () => mockChannel })); +jest.mock('@storybook/channels', () => ({ + createBrowserChannel: () => mockChannel, +})); jest.mock('@storybook/client-logger'); jest.mock('react-dom'); diff --git a/code/lib/preview-api/src/modules/core-client/start.ts b/code/lib/preview-api/src/modules/core-client/start.ts index b27f64e48799..f9c389f71e8f 100644 --- a/code/lib/preview-api/src/modules/core-client/start.ts +++ b/code/lib/preview-api/src/modules/core-client/start.ts @@ -1,7 +1,7 @@ /* eslint-disable no-underscore-dangle, @typescript-eslint/naming-convention */ import { global } from '@storybook/global'; import type { Renderer, ArgsStoryFn, Path, ProjectAnnotations } from '@storybook/types'; -import { createChannel } from '@storybook/channel-postmessage'; +import { createBrowserChannel } from '@storybook/channels'; import { FORCE_RE_RENDER } from '@storybook/core-events'; import { addons } from '../../addons'; import { PreviewWeb } from '../../preview-web'; @@ -94,7 +94,7 @@ export function start( }; } - const channel = createChannel({ page: 'preview' }); + const channel = createBrowserChannel({ page: 'preview' }); addons.setChannel(channel); const clientApi = global?.__STORYBOOK_CLIENT_API__ || new ClientApi(); diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts index 926f5a544733..805c5e7cb1b6 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts @@ -24,7 +24,10 @@ import { // - ie. from`renderToCanvas()` (stories) or`ReactDOM.render()` (docs) in. // This file lets them rip. -jest.mock('@storybook/channel-postmessage', () => ({ createChannel: () => mockChannel })); +jest.mock('@storybook/channels', () => ({ + ...jest.requireActual('@storybook/channels'), + createBrowserChannel: () => mockChannel, +})); jest.mock('@storybook/client-logger'); jest.mock('./WebView'); diff --git a/code/lib/preview/package.json b/code/lib/preview/package.json index a1e18f99ade8..fb5aacb8671b 100644 --- a/code/lib/preview/package.json +++ b/code/lib/preview/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "", "keywords": [ "storybook" @@ -55,12 +55,10 @@ "prep": "../../../scripts/prepare/esm-bundle.ts" }, "devDependencies": { - "@storybook/channel-postmessage": "7.1.0-alpha.32", - "@storybook/channel-websocket": "7.1.0-alpha.32", - "@storybook/channels": "7.1.0-alpha.32", - "@storybook/client-logger": "7.1.0-alpha.32", - "@storybook/core-events": "7.1.0-alpha.32", - "@storybook/preview-api": "7.1.0-alpha.32", + "@storybook/channels": "7.1.0-alpha.33", + "@storybook/client-logger": "7.1.0-alpha.33", + "@storybook/core-events": "7.1.0-alpha.33", + "@storybook/preview-api": "7.1.0-alpha.33", "typescript": "~4.9.3" }, "publishConfig": { diff --git a/code/lib/preview/src/globals/runtime.ts b/code/lib/preview/src/globals/runtime.ts index 2be746a12f15..b299eea8f693 100644 --- a/code/lib/preview/src/globals/runtime.ts +++ b/code/lib/preview/src/globals/runtime.ts @@ -1,5 +1,5 @@ -import * as CHANNEL_POSTMESSAGE from '@storybook/channel-postmessage'; -import * as CHANNEL_WEBSOCKET from '@storybook/channel-websocket'; +import * as CHANNEL_POSTMESSAGE from '@storybook/channels/dist/postmessage/index'; +import * as CHANNEL_WEBSOCKET from '@storybook/channels/dist/websocket/index'; import * as CHANNELS from '@storybook/channels'; import * as CLIENT_LOGGER from '@storybook/client-logger'; import * as CORE_EVENTS from '@storybook/core-events'; diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json index 4d593fcdd985..9b1d53e413e0 100644 --- a/code/lib/react-dom-shim/package.json +++ b/code/lib/react-dom-shim/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-dom-shim", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "", "keywords": [ "storybook" @@ -53,7 +53,7 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "devDependencies": { - "@storybook/types": "7.1.0-alpha.32", + "@storybook/types": "7.1.0-alpha.33", "typescript": "~4.9.3" }, "peerDependencies": { diff --git a/code/lib/router/package.json b/code/lib/router/package.json index dbb006bd9d6d..263c05377a22 100644 --- a/code/lib/router/package.json +++ b/code/lib/router/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/router", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Core Storybook Router", "keywords": [ "storybook" @@ -48,7 +48,7 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.32", + "@storybook/client-logger": "7.1.0-alpha.33", "memoizerific": "^1.11.3", "qs": "^6.10.0" }, diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 93cbbf5bedb0..b659e1f72acf 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/source-loader", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Source loader", "keywords": [ "lib", @@ -45,7 +45,7 @@ }, "dependencies": { "@storybook/csf": "^0.1.0", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/types": "7.1.0-alpha.33", "estraverse": "^5.2.0", "lodash": "^4.17.21", "prettier": "^2.8.0" diff --git a/code/lib/telemetry/package.json b/code/lib/telemetry/package.json index a097dfc0aa8a..3d944a6210d5 100644 --- a/code/lib/telemetry/package.json +++ b/code/lib/telemetry/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/telemetry", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Telemetry logging for crash reports and usage statistics", "keywords": [ "storybook" @@ -43,8 +43,8 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.32", - "@storybook/core-common": "7.1.0-alpha.32", + "@storybook/client-logger": "7.1.0-alpha.33", + "@storybook/core-common": "7.1.0-alpha.33", "chalk": "^4.1.0", "detect-package-manager": "^2.0.1", "fetch-retry": "^5.0.2", diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json index 1a2376b9ca45..605f97c0657e 100644 --- a/code/lib/theming/package.json +++ b/code/lib/theming/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/theming", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Core Storybook Components", "keywords": [ "storybook" @@ -49,7 +49,7 @@ }, "dependencies": { "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0", - "@storybook/client-logger": "7.1.0-alpha.32", + "@storybook/client-logger": "7.1.0-alpha.33", "@storybook/global": "^5.0.0", "memoizerific": "^1.11.3" }, diff --git a/code/lib/types/package.json b/code/lib/types/package.json index ebb42f53f570..a8dfdd9e6d7a 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/types", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Core Storybook TS Types", "keywords": [ "storybook" @@ -43,7 +43,7 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/channels": "7.1.0-alpha.32", + "@storybook/channels": "7.1.0-alpha.33", "@types/babel__core": "^7.0.0", "@types/express": "^4.7.0", "file-system-cache": "^2.0.0" diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts index caaa96db041c..275f1422347d 100644 --- a/code/lib/types/src/modules/core-common.ts +++ b/code/lib/types/src/modules/core-common.ts @@ -139,6 +139,7 @@ export interface CLIOptions { disableTelemetry?: boolean; enableCrashReports?: boolean; host?: string; + initialPath?: string; /** * @deprecated Use 'staticDirs' Storybook Configuration option instead */ diff --git a/code/package.json b/code/package.json index 7fb724506347..6fae8d98ad43 100644 --- a/code/package.json +++ b/code/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "private": true, "description": "Storybook root", "homepage": "https://storybook.js.org/", diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index 07f4d76c3769..dccc31d7d5ce 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-create-react-app", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook for Create React App preset", "keywords": [ "storybook" @@ -50,14 +50,14 @@ "dependencies": { "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1", "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/types": "7.1.0-alpha.33", "@types/babel__core": "^7.1.7", "babel-plugin-react-docgen": "^4.1.0", "pnp-webpack-plugin": "^1.7.0", "semver": "^7.3.5" }, "devDependencies": { - "@storybook/node-logger": "7.1.0-alpha.32", + "@storybook/node-logger": "7.1.0-alpha.33", "@types/node": "^16.0.0", "typescript": "~4.9.3" }, diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json index 1019fbc8cb49..7db70f25f8ee 100644 --- a/code/presets/html-webpack/package.json +++ b/code/presets/html-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-html-webpack", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -48,7 +48,7 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-webpack": "7.1.0-alpha.32", + "@storybook/core-webpack": "7.1.0-alpha.33", "@types/node": "^16.0.0", "html-loader": "^3.1.0", "webpack": "5" diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json index 23e84bd0ffc4..0068f4874f89 100644 --- a/code/presets/preact-webpack/package.json +++ b/code/presets/preact-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-preact-webpack", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" @@ -50,7 +50,7 @@ "dependencies": { "@babel/plugin-transform-react-jsx": "^7.21.0", "@babel/preset-typescript": "^7.21.0", - "@storybook/core-webpack": "7.1.0-alpha.32", + "@storybook/core-webpack": "7.1.0-alpha.33", "@types/node": "^16.0.0" }, "devDependencies": { diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index 4b3a2e504202..1fef085ed169 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-react-webpack", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading", "keywords": [ "storybook" @@ -66,10 +66,10 @@ "@babel/preset-flow": "^7.21.0", "@babel/preset-react": "^7.22.0", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5", - "@storybook/core-webpack": "7.1.0-alpha.32", - "@storybook/docs-tools": "7.1.0-alpha.32", - "@storybook/node-logger": "7.1.0-alpha.32", - "@storybook/react": "7.1.0-alpha.32", + "@storybook/core-webpack": "7.1.0-alpha.33", + "@storybook/docs-tools": "7.1.0-alpha.33", + "@storybook/node-logger": "7.1.0-alpha.33", + "@storybook/react": "7.1.0-alpha.33", "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0", "@types/node": "^16.0.0", "@types/semver": "^7.3.4", diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json index 222c1caf0da3..41c91fd70962 100644 --- a/code/presets/server-webpack/package.json +++ b/code/presets/server-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-server-webpack", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -53,10 +53,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-server": "7.1.0-alpha.32", - "@storybook/core-webpack": "7.1.0-alpha.32", + "@storybook/core-server": "7.1.0-alpha.33", + "@storybook/core-webpack": "7.1.0-alpha.33", "@storybook/global": "^5.0.0", - "@storybook/server": "7.1.0-alpha.32", + "@storybook/server": "7.1.0-alpha.33", "@types/node": "^16.0.0", "safe-identifier": "^0.4.1", "ts-dedent": "^2.0.0", diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json index db58b850703e..4948c969611c 100644 --- a/code/presets/svelte-webpack/package.json +++ b/code/presets/svelte-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-svelte-webpack", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -63,8 +63,8 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-webpack": "7.1.0-alpha.32", - "@storybook/node-logger": "7.1.0-alpha.32", + "@storybook/core-webpack": "7.1.0-alpha.33", + "@storybook/node-logger": "7.1.0-alpha.33", "sveltedoc-parser": "^4.2.1", "ts-dedent": "^2.0.0" }, diff --git a/code/presets/vue-webpack/package.json b/code/presets/vue-webpack/package.json index 1cf7c7ae2960..d04e58cee8fe 100644 --- a/code/presets/vue-webpack/package.json +++ b/code/presets/vue-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-vue-webpack", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -58,8 +58,8 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-webpack": "7.1.0-alpha.32", - "@storybook/docs-tools": "7.1.0-alpha.32", + "@storybook/core-webpack": "7.1.0-alpha.33", + "@storybook/docs-tools": "7.1.0-alpha.33", "@types/node": "^16.0.0", "ts-loader": "^9.2.8", "vue-docgen-api": "^4.44.23", diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json index 1ac607095230..532d3a775d86 100644 --- a/code/presets/vue3-webpack/package.json +++ b/code/presets/vue3-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-vue3-webpack", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -58,8 +58,8 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-webpack": "7.1.0-alpha.32", - "@storybook/docs-tools": "7.1.0-alpha.32", + "@storybook/core-webpack": "7.1.0-alpha.33", + "@storybook/docs-tools": "7.1.0-alpha.33", "@types/node": "^16.0.0", "ts-loader": "^9.2.8", "vue-docgen-api": "^4.46.0", diff --git a/code/presets/web-components-webpack/package.json b/code/presets/web-components-webpack/package.json index 2c87293369e9..672743bdfd66 100644 --- a/code/presets/web-components-webpack/package.json +++ b/code/presets/web-components-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-web-components-webpack", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit", @@ -54,7 +54,7 @@ "@babel/plugin-syntax-dynamic-import": "^7.8.3", "@babel/plugin-syntax-import-meta": "^7.10.4", "@babel/preset-env": "^7.22.0", - "@storybook/core-webpack": "7.1.0-alpha.32", + "@storybook/core-webpack": "7.1.0-alpha.33", "@types/node": "^16.0.0", "babel-loader": "^7.0.0 || ^8.0.0 || ^9.0.0", "babel-plugin-bundled-import-meta": "^0.3.1" diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json index 5dd13cd178c4..2a1a0585957e 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook HTML renderer", "keywords": [ "storybook" @@ -48,11 +48,11 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-client": "7.1.0-alpha.32", - "@storybook/docs-tools": "7.1.0-alpha.32", + "@storybook/core-client": "7.1.0-alpha.33", + "@storybook/docs-tools": "7.1.0-alpha.33", "@storybook/global": "^5.0.0", - "@storybook/preview-api": "7.1.0-alpha.32", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/preview-api": "7.1.0-alpha.33", + "@storybook/types": "7.1.0-alpha.33", "ts-dedent": "^2.0.0" }, "devDependencies": { diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index 6a37bc9124c6..f64ae6f06594 100644 --- a/code/renderers/preact/package.json +++ b/code/renderers/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook Preact renderer", "keywords": [ "storybook" @@ -48,10 +48,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-client": "7.1.0-alpha.32", + "@storybook/core-client": "7.1.0-alpha.33", "@storybook/global": "^5.0.0", - "@storybook/preview-api": "7.1.0-alpha.32", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/preview-api": "7.1.0-alpha.33", + "@storybook/types": "7.1.0-alpha.33", "ts-dedent": "^2.0.0" }, "devDependencies": { diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index 8e1ce7f4e900..6663b8dbb7e6 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook React renderer", "keywords": [ "storybook" @@ -52,13 +52,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.32", - "@storybook/core-client": "7.1.0-alpha.32", - "@storybook/docs-tools": "7.1.0-alpha.32", + "@storybook/client-logger": "7.1.0-alpha.33", + "@storybook/core-client": "7.1.0-alpha.33", + "@storybook/docs-tools": "7.1.0-alpha.33", "@storybook/global": "^5.0.0", - "@storybook/preview-api": "7.1.0-alpha.32", - "@storybook/react-dom-shim": "7.1.0-alpha.32", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/preview-api": "7.1.0-alpha.33", + "@storybook/react-dom-shim": "7.1.0-alpha.33", + "@storybook/types": "7.1.0-alpha.33", "@types/escodegen": "^0.0.6", "@types/estree": "^0.0.51", "@types/node": "^16.0.0", diff --git a/code/renderers/react/template/stories/ts-argtypes.stories.tsx b/code/renderers/react/template/stories/ts-argtypes.stories.tsx index 21eb492d30e7..f2b29752c276 100644 --- a/code/renderers/react/template/stories/ts-argtypes.stories.tsx +++ b/code/renderers/react/template/stories/ts-argtypes.stories.tsx @@ -1,10 +1,12 @@ import React, { useState } from 'react'; import mapValues from 'lodash/mapValues.js'; import { PureArgsTable as ArgsTable } from '@storybook/blocks'; +import type { StoryObj } from '@storybook/react'; import type { Args, Parameters, StoryContext } from '@storybook/types'; import { inferControls } from '@storybook/preview-api'; import { ThemeProvider, themes, convert } from '@storybook/theming'; +import { within } from '@storybook/testing-library'; import { component as TsFunctionComponentComponent } from './docgen-components/ts-function-component/input'; import { component as TsFunctionComponentInlineDefaultsComponent } from './docgen-components/ts-function-component-inline-defaults/input'; import { component as TsReactFcGenericsComponent } from './docgen-components/8143-ts-react-fc-generics/input'; @@ -76,6 +78,27 @@ export const TsComponentProps = { parameters: { component: TsComponentPropsCompo export const TsJsdoc = { parameters: { component: TsJsdocComponent } }; -export const TsTypes = { parameters: { component: TsTypesComponent } }; +const addChromaticIgnore = async (element: HTMLElement) => { + const row = element.parentElement?.parentElement; + if (row?.nodeName === 'TR') { + row.setAttribute('data-chromatic', 'ignore'); + } else { + throw new Error('the DOM structure changed, please update this test'); + } +}; + +export const TsTypes: StoryObj = { + parameters: { component: TsTypesComponent }, + play: async ({ canvasElement }) => { + // This play function's sole purpose is to add a "chromatic ignore" region to flaky rows. + const canvas = within(canvasElement); + const funcCell = await canvas.findByText('funcWithArgsAndReturns'); + addChromaticIgnore(funcCell); + const namedNumericCell = await canvas.findByText('namedNumericLiteralUnion'); + addChromaticIgnore(namedNumericCell); + const inlinedNumericCell = await canvas.findByText('inlinedNumericLiteralUnion'); + addChromaticIgnore(inlinedNumericCell); + }, +}; export const TsHtml = { parameters: { component: TsHtmlComponent } }; diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index f4e4a65dd743..894311e1161d 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook Server renderer", "keywords": [ "storybook" @@ -53,12 +53,12 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-client": "7.1.0-alpha.32", + "@storybook/core-client": "7.1.0-alpha.33", "@storybook/csf": "^0.1.0", - "@storybook/csf-tools": "7.1.0-alpha.32", + "@storybook/csf-tools": "7.1.0-alpha.33", "@storybook/global": "^5.0.0", - "@storybook/preview-api": "7.1.0-alpha.32", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/preview-api": "7.1.0-alpha.33", + "@storybook/types": "7.1.0-alpha.33", "@types/fs-extra": "^11.0.1", "fs-extra": "^11.1.0", "ts-dedent": "^2.0.0", diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index 4dd084260e00..b1baf3f26367 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook Svelte renderer", "keywords": [ "storybook" @@ -52,13 +52,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.32", - "@storybook/core-client": "7.1.0-alpha.32", - "@storybook/core-events": "7.1.0-alpha.32", - "@storybook/docs-tools": "7.1.0-alpha.32", + "@storybook/client-logger": "7.1.0-alpha.33", + "@storybook/core-client": "7.1.0-alpha.33", + "@storybook/core-events": "7.1.0-alpha.33", + "@storybook/docs-tools": "7.1.0-alpha.33", "@storybook/global": "^5.0.0", - "@storybook/preview-api": "7.1.0-alpha.32", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/preview-api": "7.1.0-alpha.33", + "@storybook/types": "7.1.0-alpha.33", "sveltedoc-parser": "^4.2.1", "type-fest": "^3.11.0" }, diff --git a/code/renderers/vue/package.json b/code/renderers/vue/package.json index bbf86ba6516b..7f1e2122c063 100644 --- a/code/renderers/vue/package.json +++ b/code/renderers/vue/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook Vue renderer", "keywords": [ "storybook" @@ -48,12 +48,12 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.32", - "@storybook/core-client": "7.1.0-alpha.32", - "@storybook/docs-tools": "7.1.0-alpha.32", + "@storybook/client-logger": "7.1.0-alpha.33", + "@storybook/core-client": "7.1.0-alpha.33", + "@storybook/docs-tools": "7.1.0-alpha.33", "@storybook/global": "^5.0.0", - "@storybook/preview-api": "7.1.0-alpha.32", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/preview-api": "7.1.0-alpha.33", + "@storybook/types": "7.1.0-alpha.33", "ts-dedent": "^2.0.0", "type-fest": "^3.11.0" }, diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index 7b709df3e125..b270fc0b43e4 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook Vue 3 renderer", "keywords": [ "storybook" @@ -48,11 +48,11 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-client": "7.1.0-alpha.32", - "@storybook/docs-tools": "7.1.0-alpha.32", + "@storybook/core-client": "7.1.0-alpha.33", + "@storybook/docs-tools": "7.1.0-alpha.33", "@storybook/global": "^5.0.0", - "@storybook/preview-api": "7.1.0-alpha.32", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/preview-api": "7.1.0-alpha.33", + "@storybook/types": "7.1.0-alpha.33", "lodash": "^4.17.21", "ts-dedent": "^2.0.0", "type-fest": "^3.11.0", diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index 9546c6e6280a..a643aeeb3084 100644 --- a/code/renderers/web-components/package.json +++ b/code/renderers/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook web-components renderer", "keywords": [ "lit", @@ -51,13 +51,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.32", - "@storybook/core-client": "7.1.0-alpha.32", - "@storybook/docs-tools": "7.1.0-alpha.32", + "@storybook/client-logger": "7.1.0-alpha.33", + "@storybook/core-client": "7.1.0-alpha.33", + "@storybook/docs-tools": "7.1.0-alpha.33", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.1.0-alpha.32", - "@storybook/preview-api": "7.1.0-alpha.32", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/manager-api": "7.1.0-alpha.33", + "@storybook/preview-api": "7.1.0-alpha.33", + "@storybook/types": "7.1.0-alpha.33", "tiny-invariant": "^1.3.1", "ts-dedent": "^2.0.0" }, diff --git a/code/ui/.storybook/preview.tsx b/code/ui/.storybook/preview.tsx index ed08e0fd9886..7c52ad023776 100644 --- a/code/ui/.storybook/preview.tsx +++ b/code/ui/.storybook/preview.tsx @@ -64,18 +64,19 @@ const ThemeStack = styled.div( const PlayFnNotice = styled.div( { position: 'absolute', - bottom: '1rem', - right: '1rem', - border: '1px solid #ccc', - borderRadius: '5px', - padding: '1rem', - fontSize: '12px', + top: 0, + left: 0, + width: '100%', + borderBottom: '1px solid #ccc', + padding: '3px 8px', + fontSize: '10px', + fontWeight: 'bold', '> *': { display: 'block', }, }, ({ theme }) => ({ - background: theme.background.content, + background: '#fffbd9', color: theme.color.defaultText, }) ); @@ -219,10 +220,15 @@ export const decorators = [ {!parameters.theme && isChromatic() && playFunction && ( - - Detected play function. - Rendering in a single theme - + <> + + + Detected play function in Chromatic. Rendering only light theme to avoid + multiple play functions in the same story. + + +
+ )} diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index 26bf5ed18469..56f22daca72d 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/blocks", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Storybook Doc Blocks", "keywords": [ "storybook" @@ -43,17 +43,17 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/channels": "7.1.0-alpha.32", - "@storybook/client-logger": "7.1.0-alpha.32", - "@storybook/components": "7.1.0-alpha.32", - "@storybook/core-events": "7.1.0-alpha.32", + "@storybook/channels": "7.1.0-alpha.33", + "@storybook/client-logger": "7.1.0-alpha.33", + "@storybook/components": "7.1.0-alpha.33", + "@storybook/core-events": "7.1.0-alpha.33", "@storybook/csf": "^0.1.0", - "@storybook/docs-tools": "7.1.0-alpha.32", + "@storybook/docs-tools": "7.1.0-alpha.33", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.1.0-alpha.32", - "@storybook/preview-api": "7.1.0-alpha.32", - "@storybook/theming": "7.1.0-alpha.32", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/manager-api": "7.1.0-alpha.33", + "@storybook/preview-api": "7.1.0-alpha.33", + "@storybook/theming": "7.1.0-alpha.33", + "@storybook/types": "7.1.0-alpha.33", "@types/lodash": "^4.14.167", "color-convert": "^2.0.1", "dequal": "^2.0.2", @@ -67,7 +67,7 @@ "util-deprecate": "^1.0.2" }, "devDependencies": { - "@storybook/addon-actions": "7.1.0-alpha.32", + "@storybook/addon-actions": "7.1.0-alpha.33", "@types/color-convert": "^2.0.0" }, "peerDependencies": { diff --git a/code/ui/blocks/src/blocks/DocsPage.stories.tsx b/code/ui/blocks/src/blocks/DocsPage.stories.tsx index b65768ef1f3d..e0e0daf53722 100644 --- a/code/ui/blocks/src/blocks/DocsPage.stories.tsx +++ b/code/ui/blocks/src/blocks/DocsPage.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; +import { within } from '@storybook/testing-library'; import { DocsPage } from './DocsPage'; const meta = { @@ -16,8 +17,20 @@ export const Default: Story = { parameters: { relativeCsfPaths: ['../examples/Button.stories'], }, + play: async ({ canvasElement }) => { + // This play function's sole purpose is to add a "chromatic ignore" region to a flaky row. + const canvas = within(canvasElement); + const sizeCell = await canvas.findByText('How large should the button be?'); + const sizeRow = sizeCell.parentElement?.parentElement?.parentElement; + if (sizeRow?.nodeName === 'TR') { + sizeRow.setAttribute('data-chromatic', 'ignore'); + } else { + throw new Error('the DOM structure changed, please update this test'); + } + }, }; export const SingleStory: Story = { + ...Default, parameters: { relativeCsfPaths: ['../examples/DocsPageParameters.stories'], }, diff --git a/code/ui/components/package.json b/code/ui/components/package.json index f4d10f1cd2d5..b7219afdd934 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/components", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Core Storybook Components", "keywords": [ "storybook" @@ -48,11 +48,11 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.32", + "@storybook/client-logger": "7.1.0-alpha.33", "@storybook/csf": "^0.1.0", "@storybook/global": "^5.0.0", - "@storybook/theming": "7.1.0-alpha.32", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/theming": "7.1.0-alpha.33", + "@storybook/types": "7.1.0-alpha.33", "memoizerific": "^1.11.3", "use-resize-observer": "^9.1.0", "util-deprecate": "^1.0.2" diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json index 4ace9b69af72..ec3cae905b60 100644 --- a/code/ui/manager/package.json +++ b/code/ui/manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager", - "version": "7.1.0-alpha.32", + "version": "7.1.0-alpha.33", "description": "Core Storybook UI", "keywords": [ "storybook" @@ -51,18 +51,18 @@ }, "devDependencies": { "@fal-works/esbuild-plugin-global-externals": "^2.1.2", - "@storybook/addons": "7.1.0-alpha.32", - "@storybook/api": "7.1.0-alpha.32", - "@storybook/channel-postmessage": "7.1.0-alpha.32", - "@storybook/channels": "7.1.0-alpha.32", - "@storybook/client-logger": "7.1.0-alpha.32", - "@storybook/components": "7.1.0-alpha.32", - "@storybook/core-events": "7.1.0-alpha.32", + "@storybook/addons": "7.1.0-alpha.33", + "@storybook/api": "7.1.0-alpha.33", + "@storybook/channel-postmessage": "7.1.0-alpha.33", + "@storybook/channels": "7.1.0-alpha.33", + "@storybook/client-logger": "7.1.0-alpha.33", + "@storybook/components": "7.1.0-alpha.33", + "@storybook/core-events": "7.1.0-alpha.33", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.1.0-alpha.32", - "@storybook/router": "7.1.0-alpha.32", - "@storybook/theming": "7.1.0-alpha.32", - "@storybook/types": "7.1.0-alpha.32", + "@storybook/manager-api": "7.1.0-alpha.33", + "@storybook/router": "7.1.0-alpha.33", + "@storybook/theming": "7.1.0-alpha.33", + "@storybook/types": "7.1.0-alpha.33", "@testing-library/react": "^11.2.2", "@types/semver": "^7.3.4", "copy-to-clipboard": "^3.3.1", diff --git a/code/ui/manager/src/components/layout/app.mockdata.tsx b/code/ui/manager/src/components/layout/app.mockdata.tsx index fc87fd64d17e..48e2696d3306 100644 --- a/code/ui/manager/src/components/layout/app.mockdata.tsx +++ b/code/ui/manager/src/components/layout/app.mockdata.tsx @@ -105,6 +105,7 @@ class PlaceholderClock extends Component<{ color: string }, { count: number }> { return (

=2.0.0" peerDependenciesMeta: puppeteer: @@ -5484,18 +5484,18 @@ __metadata: "@angular/platform-browser-dynamic": ^16.0.0-rc.4 "@emotion/jest": ^11.8.0 "@jest/transform": ^29.3.1 - "@storybook/addon-docs": 7.1.0-alpha.32 - "@storybook/angular": 7.1.0-alpha.32 + "@storybook/addon-docs": 7.1.0-alpha.33 + "@storybook/angular": 7.1.0-alpha.33 "@storybook/babel-plugin-require-context-hook": 1.0.1 - "@storybook/client-api": 7.1.0-alpha.32 - "@storybook/core-common": 7.1.0-alpha.32 - "@storybook/core-webpack": 7.1.0-alpha.32 + "@storybook/client-api": 7.1.0-alpha.33 + "@storybook/core-common": 7.1.0-alpha.33 + "@storybook/core-webpack": 7.1.0-alpha.33 "@storybook/global": ^5.0.0 - "@storybook/preview-api": 7.1.0-alpha.32 - "@storybook/react": 7.1.0-alpha.32 - "@storybook/types": 7.1.0-alpha.32 - "@storybook/vue": 7.1.0-alpha.32 - "@storybook/vue3": 7.1.0-alpha.32 + "@storybook/preview-api": 7.1.0-alpha.33 + "@storybook/react": 7.1.0-alpha.33 + "@storybook/types": 7.1.0-alpha.33 + "@storybook/vue": 7.1.0-alpha.33 + "@storybook/vue3": 7.1.0-alpha.33 "@types/jest-specific-snapshot": ^0.5.6 babel-loader: ^9.1.2 enzyme: ^3.11.0 @@ -5567,13 +5567,13 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-storysource@workspace:addons/storysource" dependencies: - "@storybook/client-logger": 7.1.0-alpha.32 - "@storybook/components": 7.1.0-alpha.32 - "@storybook/manager-api": 7.1.0-alpha.32 - "@storybook/preview-api": 7.1.0-alpha.32 - "@storybook/router": 7.1.0-alpha.32 - "@storybook/source-loader": 7.1.0-alpha.32 - "@storybook/theming": 7.1.0-alpha.32 + "@storybook/client-logger": 7.1.0-alpha.33 + "@storybook/components": 7.1.0-alpha.33 + "@storybook/manager-api": 7.1.0-alpha.33 + "@storybook/preview-api": 7.1.0-alpha.33 + "@storybook/router": 7.1.0-alpha.33 + "@storybook/source-loader": 7.1.0-alpha.33 + "@storybook/theming": 7.1.0-alpha.33 "@types/react": ^16.14.34 "@types/react-syntax-highlighter": 11.0.5 estraverse: ^5.2.0 @@ -5592,15 +5592,15 @@ __metadata: languageName: unknown linkType: soft -"@storybook/addon-toolbars@7.1.0-alpha.32, @storybook/addon-toolbars@workspace:*, @storybook/addon-toolbars@workspace:addons/toolbars": +"@storybook/addon-toolbars@7.1.0-alpha.33, @storybook/addon-toolbars@workspace:*, @storybook/addon-toolbars@workspace:addons/toolbars": version: 0.0.0-use.local resolution: "@storybook/addon-toolbars@workspace:addons/toolbars" dependencies: - "@storybook/client-logger": 7.1.0-alpha.32 - "@storybook/components": 7.1.0-alpha.32 - "@storybook/manager-api": 7.1.0-alpha.32 - "@storybook/preview-api": 7.1.0-alpha.32 - "@storybook/theming": 7.1.0-alpha.32 + "@storybook/client-logger": 7.1.0-alpha.33 + "@storybook/components": 7.1.0-alpha.33 + "@storybook/manager-api": 7.1.0-alpha.33 + "@storybook/preview-api": 7.1.0-alpha.33 + "@storybook/theming": 7.1.0-alpha.33 typescript: ~4.9.3 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -5613,17 +5613,17 @@ __metadata: languageName: unknown linkType: soft -"@storybook/addon-viewport@7.1.0-alpha.32, @storybook/addon-viewport@workspace:*, @storybook/addon-viewport@workspace:addons/viewport": +"@storybook/addon-viewport@7.1.0-alpha.33, @storybook/addon-viewport@workspace:*, @storybook/addon-viewport@workspace:addons/viewport": version: 0.0.0-use.local resolution: "@storybook/addon-viewport@workspace:addons/viewport" dependencies: - "@storybook/client-logger": 7.1.0-alpha.32 - "@storybook/components": 7.1.0-alpha.32 - "@storybook/core-events": 7.1.0-alpha.32 + "@storybook/client-logger": 7.1.0-alpha.33 + "@storybook/components": 7.1.0-alpha.33 + "@storybook/core-events": 7.1.0-alpha.33 "@storybook/global": ^5.0.0 - "@storybook/manager-api": 7.1.0-alpha.32 - "@storybook/preview-api": 7.1.0-alpha.32 - "@storybook/theming": 7.1.0-alpha.32 + "@storybook/manager-api": 7.1.0-alpha.33 + "@storybook/preview-api": 7.1.0-alpha.33 + "@storybook/theming": 7.1.0-alpha.33 memoizerific: ^1.11.3 prop-types: ^15.7.2 typescript: ~4.9.3 @@ -5638,20 +5638,20 @@ __metadata: languageName: unknown linkType: soft -"@storybook/addons@7.1.0-alpha.32, @storybook/addons@workspace:*, @storybook/addons@workspace:deprecated/addons": +"@storybook/addons@7.1.0-alpha.33, @storybook/addons@workspace:*, @storybook/addons@workspace:deprecated/addons": version: 0.0.0-use.local resolution: "@storybook/addons@workspace:deprecated/addons" dependencies: - "@storybook/manager-api": 7.1.0-alpha.32 - "@storybook/preview-api": 7.1.0-alpha.32 - "@storybook/types": 7.1.0-alpha.32 + "@storybook/manager-api": 7.1.0-alpha.33 + "@storybook/preview-api": 7.1.0-alpha.33 + "@storybook/types": 7.1.0-alpha.33 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 languageName: unknown linkType: soft -"@storybook/angular@7.1.0-alpha.32, @storybook/angular@workspace:*, @storybook/angular@workspace:frameworks/angular": +"@storybook/angular@7.1.0-alpha.33, @storybook/angular@workspace:*, @storybook/angular@workspace:frameworks/angular": version: 0.0.0-use.local resolution: "@storybook/angular@workspace:frameworks/angular" dependencies: @@ -5667,20 +5667,20 @@ __metadata: "@angular/forms": ^16.0.0-rc.4 "@angular/platform-browser": ^16.0.0-rc.4 "@angular/platform-browser-dynamic": ^16.0.0-rc.4 - "@storybook/builder-webpack5": 7.1.0-alpha.32 - "@storybook/cli": 7.1.0-alpha.32 - "@storybook/client-logger": 7.1.0-alpha.32 - "@storybook/core-common": 7.1.0-alpha.32 - "@storybook/core-events": 7.1.0-alpha.32 - "@storybook/core-server": 7.1.0-alpha.32 - "@storybook/core-webpack": 7.1.0-alpha.32 - "@storybook/docs-tools": 7.1.0-alpha.32 + "@storybook/builder-webpack5": 7.1.0-alpha.33 + "@storybook/cli": 7.1.0-alpha.33 + "@storybook/client-logger": 7.1.0-alpha.33 + "@storybook/core-common": 7.1.0-alpha.33 + "@storybook/core-events": 7.1.0-alpha.33 + "@storybook/core-server": 7.1.0-alpha.33 + "@storybook/core-webpack": 7.1.0-alpha.33 + "@storybook/docs-tools": 7.1.0-alpha.33 "@storybook/global": ^5.0.0 - "@storybook/manager-api": 7.1.0-alpha.32 - "@storybook/node-logger": 7.1.0-alpha.32 - "@storybook/preview-api": 7.1.0-alpha.32 - "@storybook/telemetry": 7.1.0-alpha.32 - "@storybook/types": 7.1.0-alpha.32 + "@storybook/manager-api": 7.1.0-alpha.33 + "@storybook/node-logger": 7.1.0-alpha.33 + "@storybook/preview-api": 7.1.0-alpha.33 + "@storybook/telemetry": 7.1.0-alpha.33 + "@storybook/types": 7.1.0-alpha.33 "@types/cross-spawn": ^6.0.2 "@types/node": ^16.0.0 "@types/react": ^16.14.34 @@ -5727,12 +5727,12 @@ __metadata: languageName: unknown linkType: soft -"@storybook/api@7.1.0-alpha.32, @storybook/api@workspace:*, @storybook/api@workspace:deprecated/manager-api-shim": +"@storybook/api@7.1.0-alpha.33, @storybook/api@workspace:*, @storybook/api@workspace:deprecated/manager-api-shim": version: 0.0.0-use.local resolution: "@storybook/api@workspace:deprecated/manager-api-shim" dependencies: - "@storybook/client-logger": 7.1.0-alpha.32 - "@storybook/manager-api": 7.1.0-alpha.32 + "@storybook/client-logger": 7.1.0-alpha.33 + "@storybook/manager-api": 7.1.0-alpha.33 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -5776,22 +5776,22 @@ __metadata: languageName: node linkType: hard -"@storybook/blocks@7.1.0-alpha.32, @storybook/blocks@workspace:*, @storybook/blocks@workspace:ui/blocks": +"@storybook/blocks@7.1.0-alpha.33, @storybook/blocks@workspace:*, @storybook/blocks@workspace:ui/blocks": version: 0.0.0-use.local resolution: "@storybook/blocks@workspace:ui/blocks" dependencies: - "@storybook/addon-actions": 7.1.0-alpha.32 - "@storybook/channels": 7.1.0-alpha.32 - "@storybook/client-logger": 7.1.0-alpha.32 - "@storybook/components": 7.1.0-alpha.32 - "@storybook/core-events": 7.1.0-alpha.32 + "@storybook/addon-actions": 7.1.0-alpha.33 + "@storybook/channels": 7.1.0-alpha.33 + "@storybook/client-logger": 7.1.0-alpha.33 + "@storybook/components": 7.1.0-alpha.33 + "@storybook/core-events": 7.1.0-alpha.33 "@storybook/csf": ^0.1.0 - "@storybook/docs-tools": 7.1.0-alpha.32 + "@storybook/docs-tools": 7.1.0-alpha.33 "@storybook/global": ^5.0.0 - "@storybook/manager-api": 7.1.0-alpha.32 - "@storybook/preview-api": 7.1.0-alpha.32 - "@storybook/theming": 7.1.0-alpha.32 - "@storybook/types": 7.1.0-alpha.32 + "@storybook/manager-api": 7.1.0-alpha.33 + "@storybook/preview-api": 7.1.0-alpha.33 + "@storybook/theming": 7.1.0-alpha.33 + "@storybook/types": 7.1.0-alpha.33 "@types/color-convert": ^2.0.0 "@types/lodash": ^4.14.167 color-convert: ^2.0.1 @@ -5810,14 +5810,14 @@ __metadata: languageName: unknown linkType: soft -"@storybook/builder-manager@7.1.0-alpha.32, @storybook/builder-manager@workspace:*, @storybook/builder-manager@workspace:builders/builder-manager": +"@storybook/builder-manager@7.1.0-alpha.33, @storybook/builder-manager@workspace:*, @storybook/builder-manager@workspace:builders/builder-manager": version: 0.0.0-use.local resolution: "@storybook/builder-manager@workspace:builders/builder-manager" dependencies: "@fal-works/esbuild-plugin-global-externals": ^2.1.2 - "@storybook/core-common": 7.1.0-alpha.32 - "@storybook/manager": 7.1.0-alpha.32 - "@storybook/node-logger": 7.1.0-alpha.32 + "@storybook/core-common": 7.1.0-alpha.33 + "@storybook/manager": 7.1.0-alpha.33 + "@storybook/node-logger": 7.1.0-alpha.33 "@types/ejs": ^3.1.1 "@types/find-cache-dir": ^3.2.1 "@yarnpkg/esbuild-plugin-pnp": ^3.0.0-rc.10 @@ -5835,24 +5835,26 @@ __metadata: languageName: unknown linkType: soft -"@storybook/builder-vite@7.1.0-alpha.32, @storybook/builder-vite@workspace:*, @storybook/builder-vite@workspace:builders/builder-vite": +"@storybook/builder-vite@7.1.0-alpha.33, @storybook/builder-vite@workspace:*, @storybook/builder-vite@workspace:builders/builder-vite": version: 0.0.0-use.local resolution: "@storybook/builder-vite@workspace:builders/builder-vite" dependencies: - "@storybook/channel-postmessage": 7.1.0-alpha.32 - "@storybook/client-logger": 7.1.0-alpha.32 - "@storybook/core-common": 7.1.0-alpha.32 - "@storybook/csf-plugin": 7.1.0-alpha.32 + "@storybook/channels": 7.1.0-alpha.33 + "@storybook/client-logger": 7.1.0-alpha.33 + "@storybook/core-common": 7.1.0-alpha.33 + "@storybook/csf-plugin": 7.1.0-alpha.33 "@storybook/mdx2-csf": ^1.0.0 - "@storybook/node-logger": 7.1.0-alpha.32 - "@storybook/preview": 7.1.0-alpha.32 - "@storybook/preview-api": 7.1.0-alpha.32 - "@storybook/types": 7.1.0-alpha.32 + "@storybook/node-logger": 7.1.0-alpha.33 + "@storybook/preview": 7.1.0-alpha.33 + "@storybook/preview-api": 7.1.0-alpha.33 + "@storybook/types": 7.1.0-alpha.33 "@types/express": ^4.17.13 + "@types/find-cache-dir": ^3.2.1 "@types/node": ^16.0.0 browser-assert: ^1.2.1 es-module-lexer: ^0.9.3 express: ^4.17.3 + find-cache-dir: ^3.0.0 fs-extra: ^11.1.0 glob: ^10.0.0 magic-string: ^0.30.0 @@ -5877,29 +5879,29 @@ __metadata: languageName: unknown linkType: soft -"@storybook/builder-webpack5@7.1.0-alpha.32, @storybook/builder-webpack5@workspace:*, @storybook/builder-webpack5@workspace:builders/builder-webpack5": +"@storybook/builder-webpack5@7.1.0-alpha.33, @storybook/builder-webpack5@workspace:*, @storybook/builder-webpack5@workspace:builders/builder-webpack5": version: 0.0.0-use.local resolution: "@storybook/builder-webpack5@workspace:builders/builder-webpack5" dependencies: "@babel/core": ^7.22.0 - "@storybook/addons": 7.1.0-alpha.32 - "@storybook/api": 7.1.0-alpha.32 - "@storybook/channel-postmessage": 7.1.0-alpha.32 - "@storybook/channels": 7.1.0-alpha.32 - "@storybook/client-api": 7.1.0-alpha.32 - "@storybook/client-logger": 7.1.0-alpha.32 - "@storybook/components": 7.1.0-alpha.32 - "@storybook/core-common": 7.1.0-alpha.32 - "@storybook/core-events": 7.1.0-alpha.32 - "@storybook/core-webpack": 7.1.0-alpha.32 + "@storybook/addons": 7.1.0-alpha.33 + "@storybook/api": 7.1.0-alpha.33 + "@storybook/channel-postmessage": 7.1.0-alpha.33 + "@storybook/channels": 7.1.0-alpha.33 + "@storybook/client-api": 7.1.0-alpha.33 + "@storybook/client-logger": 7.1.0-alpha.33 + "@storybook/components": 7.1.0-alpha.33 + "@storybook/core-common": 7.1.0-alpha.33 + "@storybook/core-events": 7.1.0-alpha.33 + "@storybook/core-webpack": 7.1.0-alpha.33 "@storybook/global": ^5.0.0 - "@storybook/manager-api": 7.1.0-alpha.32 - "@storybook/node-logger": 7.1.0-alpha.32 - "@storybook/preview": 7.1.0-alpha.32 - "@storybook/preview-api": 7.1.0-alpha.32 - "@storybook/router": 7.1.0-alpha.32 - "@storybook/store": 7.1.0-alpha.32 - "@storybook/theming": 7.1.0-alpha.32 + "@storybook/manager-api": 7.1.0-alpha.33 + "@storybook/node-logger": 7.1.0-alpha.33 + "@storybook/preview": 7.1.0-alpha.33 + "@storybook/preview-api": 7.1.0-alpha.33 + "@storybook/router": 7.1.0-alpha.33 + "@storybook/store": 7.1.0-alpha.33 + "@storybook/theming": 7.1.0-alpha.33 "@swc/core": ^1.3.49 "@types/node": ^16.0.0 "@types/pretty-hrtime": ^1.0.0 @@ -5943,18 +5945,12 @@ __metadata: languageName: unknown linkType: soft -"@storybook/channel-postmessage@7.1.0-alpha.32, @storybook/channel-postmessage@workspace:*, @storybook/channel-postmessage@workspace:lib/channel-postmessage": +"@storybook/channel-postmessage@7.1.0-alpha.33, @storybook/channel-postmessage@workspace:*, @storybook/channel-postmessage@workspace:deprecated/channel-postmessage": version: 0.0.0-use.local - resolution: "@storybook/channel-postmessage@workspace:lib/channel-postmessage" + resolution: "@storybook/channel-postmessage@workspace:deprecated/channel-postmessage" dependencies: - "@storybook/channel-websocket": 7.1.0-alpha.32 - "@storybook/channels": 7.1.0-alpha.32 - "@storybook/client-logger": 7.1.0-alpha.32 - "@storybook/core-events": 7.1.0-alpha.32 - "@storybook/global": ^5.0.0 - qs: ^6.10.0 - telejson: ^7.0.3 - tiny-invariant: ^1.3.1 + "@storybook/channels": 7.1.0-alpha.33 + "@storybook/client-logger": 7.1.0-alpha.33 typescript: ~4.9.3 languageName: unknown linkType: soft @@ -5974,23 +5970,27 @@ __metadata: languageName: node linkType: hard -"@storybook/channel-websocket@7.1.0-alpha.32, @storybook/channel-websocket@workspace:*, @storybook/channel-websocket@workspace:lib/channel-websocket": +"@storybook/channel-websocket@workspace:*, @storybook/channel-websocket@workspace:deprecated/channel-websocket": version: 0.0.0-use.local - resolution: "@storybook/channel-websocket@workspace:lib/channel-websocket" + resolution: "@storybook/channel-websocket@workspace:deprecated/channel-websocket" dependencies: - "@storybook/channels": 7.1.0-alpha.32 - "@storybook/client-logger": 7.1.0-alpha.32 - "@storybook/global": ^5.0.0 - telejson: ^7.0.3 - tiny-invariant: ^1.3.1 + "@storybook/channels": 7.1.0-alpha.33 + "@storybook/client-logger": 7.1.0-alpha.33 typescript: ~4.9.3 languageName: unknown linkType: soft -"@storybook/channels@7.1.0-alpha.32, @storybook/channels@workspace:*, @storybook/channels@workspace:lib/channels": +"@storybook/channels@7.1.0-alpha.33, @storybook/channels@workspace:*, @storybook/channels@workspace:lib/channels": version: 0.0.0-use.local resolution: "@storybook/channels@workspace:lib/channels" dependencies: + "@storybook/channels": 7.1.0-alpha.33 + "@storybook/client-logger": 7.1.0-alpha.33 + "@storybook/core-events": 7.1.0-alpha.33 + "@storybook/global": ^5.0.0 + qs: ^6.10.0 + telejson: ^7.0.3 + tiny-invariant: ^1.3.1 typescript: ~4.9.3 languageName: unknown linkType: soft @@ -6002,21 +6002,21 @@ __metadata: languageName: node linkType: hard -"@storybook/cli@7.1.0-alpha.32, @storybook/cli@workspace:*, @storybook/cli@workspace:lib/cli": +"@storybook/cli@7.1.0-alpha.33, @storybook/cli@workspace:*, @storybook/cli@workspace:lib/cli": version: 0.0.0-use.local resolution: "@storybook/cli@workspace:lib/cli" dependencies: "@babel/core": ^7.22.0 "@babel/preset-env": ^7.22.0 "@ndelangen/get-tarball": ^3.0.7 - "@storybook/client-api": 7.1.0-alpha.32 - "@storybook/codemod": 7.1.0-alpha.32 - "@storybook/core-common": 7.1.0-alpha.32 - "@storybook/core-server": 7.1.0-alpha.32 - "@storybook/csf-tools": 7.1.0-alpha.32 - "@storybook/node-logger": 7.1.0-alpha.32 - "@storybook/telemetry": 7.1.0-alpha.32 - "@storybook/types": 7.1.0-alpha.32 + "@storybook/client-api": 7.1.0-alpha.33 + "@storybook/codemod": 7.1.0-alpha.33 + "@storybook/core-common": 7.1.0-alpha.33 + "@storybook/core-server": 7.1.0-alpha.33 + "@storybook/csf-tools": 7.1.0-alpha.33 + "@storybook/node-logger": 7.1.0-alpha.33 + "@storybook/telemetry": 7.1.0-alpha.33 + "@storybook/types": 7.1.0-alpha.33 "@types/cross-spawn": ^6.0.2 "@types/prompts": ^2.0.9 "@types/puppeteer-core": ^2.1.0 @@ -6057,16 +6057,16 @@ __metadata: languageName: unknown linkType: soft -"@storybook/client-api@7.1.0-alpha.32, @storybook/client-api@workspace:*, @storybook/client-api@workspace:deprecated/client-api": +"@storybook/client-api@7.1.0-alpha.33, @storybook/client-api@workspace:*, @storybook/client-api@workspace:deprecated/client-api": version: 0.0.0-use.local resolution: "@storybook/client-api@workspace:deprecated/client-api" dependencies: - "@storybook/client-logger": 7.1.0-alpha.32 - "@storybook/preview-api": 7.1.0-alpha.32 + "@storybook/client-logger": 7.1.0-alpha.33 + "@storybook/preview-api": 7.1.0-alpha.33 languageName: unknown linkType: soft -"@storybook/client-logger@7.1.0-alpha.32, @storybook/client-logger@workspace:*, @storybook/client-logger@workspace:lib/client-logger": +"@storybook/client-logger@7.1.0-alpha.33, @storybook/client-logger@workspace:*, @storybook/client-logger@workspace:lib/client-logger": version: 0.0.0-use.local resolution: "@storybook/client-logger@workspace:lib/client-logger" dependencies: @@ -6084,7 +6084,7 @@ __metadata: languageName: node linkType: hard -"@storybook/codemod@7.1.0-alpha.32, @storybook/codemod@workspace:*, @storybook/codemod@workspace:lib/codemod": +"@storybook/codemod@7.1.0-alpha.33, @storybook/codemod@workspace:*, @storybook/codemod@workspace:lib/codemod": version: 0.0.0-use.local resolution: "@storybook/codemod@workspace:lib/codemod" dependencies: @@ -6092,9 +6092,9 @@ __metadata: "@babel/preset-env": ^7.22.0 "@babel/types": ^7.22.0 "@storybook/csf": ^0.1.0 - "@storybook/csf-tools": 7.1.0-alpha.32 - "@storybook/node-logger": 7.1.0-alpha.32 - "@storybook/types": 7.1.0-alpha.32 + "@storybook/csf-tools": 7.1.0-alpha.33 + "@storybook/node-logger": 7.1.0-alpha.33 + "@storybook/types": 7.1.0-alpha.33 "@types/cross-spawn": ^6.0.2 "@types/jscodeshift": ^0.11.6 ansi-regex: ^5.0.1 @@ -6120,16 +6120,16 @@ __metadata: languageName: unknown linkType: soft -"@storybook/components@7.1.0-alpha.32, @storybook/components@workspace:*, @storybook/components@workspace:ui/components": +"@storybook/components@7.1.0-alpha.33, @storybook/components@workspace:*, @storybook/components@workspace:ui/components": version: 0.0.0-use.local resolution: "@storybook/components@workspace:ui/components" dependencies: "@popperjs/core": ^2.6.0 - "@storybook/client-logger": 7.1.0-alpha.32 + "@storybook/client-logger": 7.1.0-alpha.33 "@storybook/csf": ^0.1.0 "@storybook/global": ^5.0.0 - "@storybook/theming": 7.1.0-alpha.32 - "@storybook/types": 7.1.0-alpha.32 + "@storybook/theming": 7.1.0-alpha.33 + "@storybook/types": 7.1.0-alpha.33 "@types/react-syntax-highlighter": 11.0.5 "@types/util-deprecate": ^1.0.0 css: ^3.0.0 @@ -6151,21 +6151,22 @@ __metadata: languageName: unknown linkType: soft -"@storybook/core-client@7.1.0-alpha.32, @storybook/core-client@workspace:*, @storybook/core-client@workspace:deprecated/core-client": +"@storybook/core-client@7.1.0-alpha.33, @storybook/core-client@workspace:*, @storybook/core-client@workspace:deprecated/core-client": version: 0.0.0-use.local resolution: "@storybook/core-client@workspace:deprecated/core-client" dependencies: - "@storybook/client-logger": 7.1.0-alpha.32 - "@storybook/preview-api": 7.1.0-alpha.32 + "@storybook/client-logger": 7.1.0-alpha.33 + "@storybook/preview-api": 7.1.0-alpha.33 languageName: unknown linkType: soft -"@storybook/core-common@7.1.0-alpha.32, @storybook/core-common@workspace:*, @storybook/core-common@workspace:lib/core-common": +"@storybook/core-common@7.1.0-alpha.33, @storybook/core-common@workspace:*, @storybook/core-common@workspace:lib/core-common": version: 0.0.0-use.local resolution: "@storybook/core-common@workspace:lib/core-common" dependencies: - "@storybook/node-logger": 7.1.0-alpha.32 - "@storybook/types": 7.1.0-alpha.32 + "@storybook/node-logger": 7.1.0-alpha.33 + "@storybook/types": 7.1.0-alpha.33 + "@types/find-cache-dir": ^3.2.1 "@types/mock-fs": ^4.13.1 "@types/node": ^16.0.0 "@types/picomatch": ^2.3.0 @@ -6174,6 +6175,7 @@ __metadata: esbuild: ^0.18.0 esbuild-register: ^3.4.0 file-system-cache: ^2.0.0 + find-cache-dir: ^3.0.0 find-up: ^5.0.0 fs-extra: ^11.1.0 glob: ^10.0.0 @@ -6191,7 +6193,7 @@ __metadata: languageName: unknown linkType: soft -"@storybook/core-events@7.1.0-alpha.32, @storybook/core-events@workspace:*, @storybook/core-events@workspace:lib/core-events": +"@storybook/core-events@7.1.0-alpha.33, @storybook/core-events@workspace:*, @storybook/core-events@workspace:lib/core-events": version: 0.0.0-use.local resolution: "@storybook/core-events@workspace:lib/core-events" dependencies: @@ -6206,25 +6208,25 @@ __metadata: languageName: node linkType: hard -"@storybook/core-server@7.1.0-alpha.32, @storybook/core-server@workspace:*, @storybook/core-server@workspace:lib/core-server": +"@storybook/core-server@7.1.0-alpha.33, @storybook/core-server@workspace:*, @storybook/core-server@workspace:lib/core-server": version: 0.0.0-use.local resolution: "@storybook/core-server@workspace:lib/core-server" dependencies: "@aw-web-design/x-default-browser": 1.4.126 "@discoveryjs/json-ext": ^0.5.3 - "@storybook/builder-manager": 7.1.0-alpha.32 - "@storybook/channels": 7.1.0-alpha.32 - "@storybook/core-common": 7.1.0-alpha.32 - "@storybook/core-events": 7.1.0-alpha.32 + "@storybook/builder-manager": 7.1.0-alpha.33 + "@storybook/channels": 7.1.0-alpha.33 + "@storybook/core-common": 7.1.0-alpha.33 + "@storybook/core-events": 7.1.0-alpha.33 "@storybook/csf": ^0.1.0 - "@storybook/csf-tools": 7.1.0-alpha.32 + "@storybook/csf-tools": 7.1.0-alpha.33 "@storybook/docs-mdx": ^0.1.0 "@storybook/global": ^5.0.0 - "@storybook/manager": 7.1.0-alpha.32 - "@storybook/node-logger": 7.1.0-alpha.32 - "@storybook/preview-api": 7.1.0-alpha.32 - "@storybook/telemetry": 7.1.0-alpha.32 - "@storybook/types": 7.1.0-alpha.32 + "@storybook/manager": 7.1.0-alpha.33 + "@storybook/node-logger": 7.1.0-alpha.33 + "@storybook/preview-api": 7.1.0-alpha.33 + "@storybook/telemetry": 7.1.0-alpha.33 + "@storybook/types": 7.1.0-alpha.33 "@types/compression": ^1.7.0 "@types/detect-port": ^1.3.0 "@types/ip": ^1.1.0 @@ -6266,13 +6268,13 @@ __metadata: languageName: unknown linkType: soft -"@storybook/core-webpack@7.1.0-alpha.32, @storybook/core-webpack@workspace:*, @storybook/core-webpack@workspace:lib/core-webpack": +"@storybook/core-webpack@7.1.0-alpha.33, @storybook/core-webpack@workspace:*, @storybook/core-webpack@workspace:lib/core-webpack": version: 0.0.0-use.local resolution: "@storybook/core-webpack@workspace:lib/core-webpack" dependencies: - "@storybook/core-common": 7.1.0-alpha.32 - "@storybook/node-logger": 7.1.0-alpha.32 - "@storybook/types": 7.1.0-alpha.32 + "@storybook/core-common": 7.1.0-alpha.33 + "@storybook/node-logger": 7.1.0-alpha.33 + "@storybook/types": 7.1.0-alpha.33 "@types/node": ^16.0.0 ts-dedent: ^2.0.0 typescript: ~4.9.3 @@ -6280,17 +6282,17 @@ __metadata: languageName: unknown linkType: soft -"@storybook/csf-plugin@7.1.0-alpha.32, @storybook/csf-plugin@workspace:*, @storybook/csf-plugin@workspace:lib/csf-plugin": +"@storybook/csf-plugin@7.1.0-alpha.33, @storybook/csf-plugin@workspace:*, @storybook/csf-plugin@workspace:lib/csf-plugin": version: 0.0.0-use.local resolution: "@storybook/csf-plugin@workspace:lib/csf-plugin" dependencies: - "@storybook/csf-tools": 7.1.0-alpha.32 + "@storybook/csf-tools": 7.1.0-alpha.33 typescript: ~4.9.3 unplugin: ^1.3.1 languageName: unknown linkType: soft -"@storybook/csf-tools@7.1.0-alpha.32, @storybook/csf-tools@workspace:*, @storybook/csf-tools@workspace:lib/csf-tools": +"@storybook/csf-tools@7.1.0-alpha.33, @storybook/csf-tools@workspace:*, @storybook/csf-tools@workspace:lib/csf-tools": version: 0.0.0-use.local resolution: "@storybook/csf-tools@workspace:lib/csf-tools" dependencies: @@ -6299,7 +6301,7 @@ __metadata: "@babel/traverse": ^7.22.0 "@babel/types": ^7.22.0 "@storybook/csf": ^0.1.0 - "@storybook/types": 7.1.0-alpha.32 + "@storybook/types": 7.1.0-alpha.33 "@types/fs-extra": ^11.0.1 "@types/js-yaml": ^4.0.5 fs-extra: ^11.1.0 @@ -6335,14 +6337,14 @@ __metadata: languageName: node linkType: hard -"@storybook/docs-tools@7.1.0-alpha.32, @storybook/docs-tools@workspace:*, @storybook/docs-tools@workspace:lib/docs-tools": +"@storybook/docs-tools@7.1.0-alpha.33, @storybook/docs-tools@workspace:*, @storybook/docs-tools@workspace:lib/docs-tools": version: 0.0.0-use.local resolution: "@storybook/docs-tools@workspace:lib/docs-tools" dependencies: "@babel/core": ^7.22.0 - "@storybook/core-common": 7.1.0-alpha.32 - "@storybook/preview-api": 7.1.0-alpha.32 - "@storybook/types": 7.1.0-alpha.32 + "@storybook/core-common": 7.1.0-alpha.33 + "@storybook/preview-api": 7.1.0-alpha.33 + "@storybook/types": 7.1.0-alpha.33 "@types/doctrine": ^0.0.3 doctrine: ^3.0.0 jest-specific-snapshot: ^8.0.0 @@ -6356,12 +6358,12 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/ember@workspace:frameworks/ember" dependencies: - "@storybook/builder-webpack5": 7.1.0-alpha.32 - "@storybook/core-common": 7.1.0-alpha.32 - "@storybook/docs-tools": 7.1.0-alpha.32 + "@storybook/builder-webpack5": 7.1.0-alpha.33 + "@storybook/core-common": 7.1.0-alpha.33 + "@storybook/docs-tools": 7.1.0-alpha.33 "@storybook/global": ^5.0.0 - "@storybook/preview-api": 7.1.0-alpha.32 - "@storybook/types": 7.1.0-alpha.32 + "@storybook/preview-api": 7.1.0-alpha.33 + "@storybook/types": 7.1.0-alpha.33 ember-source: ~3.28.1 ts-dedent: ^2.0.0 typescript: ~4.9.3 @@ -6405,14 +6407,14 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/html-vite@workspace:frameworks/html-vite" dependencies: - "@storybook/addons": 7.1.0-alpha.32 - "@storybook/builder-vite": 7.1.0-alpha.32 - "@storybook/channel-postmessage": 7.1.0-alpha.32 - "@storybook/client-api": 7.1.0-alpha.32 - "@storybook/core-server": 7.1.0-alpha.32 - "@storybook/html": 7.1.0-alpha.32 - "@storybook/node-logger": 7.1.0-alpha.32 - "@storybook/preview-web": 7.1.0-alpha.32 + "@storybook/addons": 7.1.0-alpha.33 + "@storybook/builder-vite": 7.1.0-alpha.33 + "@storybook/channel-postmessage": 7.1.0-alpha.33 + "@storybook/client-api": 7.1.0-alpha.33 + "@storybook/core-server": 7.1.0-alpha.33 + "@storybook/html": 7.1.0-alpha.33 + "@storybook/node-logger": 7.1.0-alpha.33 + "@storybook/preview-web": 7.1.0-alpha.33 "@types/node": ^16.0.0 magic-string: ^0.30.0 typescript: ~4.9.3 @@ -6423,11 +6425,11 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/html-webpack5@workspace:frameworks/html-webpack5" dependencies: - "@storybook/builder-webpack5": 7.1.0-alpha.32 - "@storybook/core-common": 7.1.0-alpha.32 + "@storybook/builder-webpack5": 7.1.0-alpha.33 + "@storybook/core-common": 7.1.0-alpha.33 "@storybook/global": ^5.0.0 - "@storybook/html": 7.1.0-alpha.32 - "@storybook/preset-html-webpack": 7.1.0-alpha.32 + "@storybook/html": 7.1.0-alpha.33 + "@storybook/preset-html-webpack": 7.1.0-alpha.33 "@types/node": ^16.0.0 typescript: ~4.9.3 peerDependencies: @@ -6437,15 +6439,15 @@ __metadata: languageName: unknown linkType: soft -"@storybook/html@7.1.0-alpha.32, @storybook/html@workspace:*, @storybook/html@workspace:renderers/html": +"@storybook/html@7.1.0-alpha.33, @storybook/html@workspace:*, @storybook/html@workspace:renderers/html": version: 0.0.0-use.local resolution: "@storybook/html@workspace:renderers/html" dependencies: - "@storybook/core-client": 7.1.0-alpha.32 - "@storybook/docs-tools": 7.1.0-alpha.32 + "@storybook/core-client": 7.1.0-alpha.33 + "@storybook/docs-tools": 7.1.0-alpha.33 "@storybook/global": ^5.0.0 - "@storybook/preview-api": 7.1.0-alpha.32 - "@storybook/types": 7.1.0-alpha.32 + "@storybook/preview-api": 7.1.0-alpha.33 + "@storybook/types": 7.1.0-alpha.33 ts-dedent: ^2.0.0 typescript: ~4.9.3 peerDependencies: @@ -6453,15 +6455,15 @@ __metadata: languageName: unknown linkType: soft -"@storybook/instrumenter@7.1.0-alpha.32, @storybook/instrumenter@workspace:*, @storybook/instrumenter@workspace:lib/instrumenter": +"@storybook/instrumenter@7.1.0-alpha.33, @storybook/instrumenter@workspace:*, @storybook/instrumenter@workspace:lib/instrumenter": version: 0.0.0-use.local resolution: "@storybook/instrumenter@workspace:lib/instrumenter" dependencies: - "@storybook/channels": 7.1.0-alpha.32 - "@storybook/client-logger": 7.1.0-alpha.32 - "@storybook/core-events": 7.1.0-alpha.32 + "@storybook/channels": 7.1.0-alpha.33 + "@storybook/client-logger": 7.1.0-alpha.33 + "@storybook/core-events": 7.1.0-alpha.33 "@storybook/global": ^5.0.0 - "@storybook/preview-api": 7.1.0-alpha.32 + "@storybook/preview-api": 7.1.0-alpha.33 typescript: ~4.9.3 languageName: unknown linkType: soft @@ -6518,19 +6520,19 @@ __metadata: languageName: node linkType: hard -"@storybook/manager-api@7.1.0-alpha.32, @storybook/manager-api@workspace:*, @storybook/manager-api@workspace:lib/manager-api": +"@storybook/manager-api@7.1.0-alpha.33, @storybook/manager-api@workspace:*, @storybook/manager-api@workspace:lib/manager-api": version: 0.0.0-use.local resolution: "@storybook/manager-api@workspace:lib/manager-api" dependencies: "@jest/globals": ^29.3.1 - "@storybook/channels": 7.1.0-alpha.32 - "@storybook/client-logger": 7.1.0-alpha.32 - "@storybook/core-events": 7.1.0-alpha.32 + "@storybook/channels": 7.1.0-alpha.33 + "@storybook/client-logger": 7.1.0-alpha.33 + "@storybook/core-events": 7.1.0-alpha.33 "@storybook/csf": ^0.1.0 "@storybook/global": ^5.0.0 - "@storybook/router": 7.1.0-alpha.32 - "@storybook/theming": 7.1.0-alpha.32 - "@storybook/types": 7.1.0-alpha.32 + "@storybook/router": 7.1.0-alpha.33 + "@storybook/theming": 7.1.0-alpha.33 + "@storybook/types": 7.1.0-alpha.33 "@types/lodash": ^4.14.167 "@types/qs": ^6 dequal: ^2.0.2 @@ -6549,23 +6551,23 @@ __metadata: languageName: unknown linkType: soft -"@storybook/manager@7.1.0-alpha.32, @storybook/manager@workspace:*, @storybook/manager@workspace:ui/manager": +"@storybook/manager@7.1.0-alpha.33, @storybook/manager@workspace:*, @storybook/manager@workspace:ui/manager": version: 0.0.0-use.local resolution: "@storybook/manager@workspace:ui/manager" dependencies: "@fal-works/esbuild-plugin-global-externals": ^2.1.2 - "@storybook/addons": 7.1.0-alpha.32 - "@storybook/api": 7.1.0-alpha.32 - "@storybook/channel-postmessage": 7.1.0-alpha.32 - "@storybook/channels": 7.1.0-alpha.32 - "@storybook/client-logger": 7.1.0-alpha.32 - "@storybook/components": 7.1.0-alpha.32 - "@storybook/core-events": 7.1.0-alpha.32 + "@storybook/addons": 7.1.0-alpha.33 + "@storybook/api": 7.1.0-alpha.33 + "@storybook/channel-postmessage": 7.1.0-alpha.33 + "@storybook/channels": 7.1.0-alpha.33 + "@storybook/client-logger": 7.1.0-alpha.33 + "@storybook/components": 7.1.0-alpha.33 + "@storybook/core-events": 7.1.0-alpha.33 "@storybook/global": ^5.0.0 - "@storybook/manager-api": 7.1.0-alpha.32 - "@storybook/router": 7.1.0-alpha.32 - "@storybook/theming": 7.1.0-alpha.32 - "@storybook/types": 7.1.0-alpha.32 + "@storybook/manager-api": 7.1.0-alpha.33 + "@storybook/router": 7.1.0-alpha.33 + "@storybook/theming": 7.1.0-alpha.33 + "@storybook/types": 7.1.0-alpha.33 "@testing-library/react": ^11.2.2 "@types/semver": ^7.3.4 copy-to-clipboard: ^3.3.1 @@ -6615,13 +6617,13 @@ __metadata: "@babel/preset-typescript": ^7.21.0 "@babel/runtime": ^7.22.0 "@babel/types": ^7.22.0 - "@storybook/addon-actions": 7.1.0-alpha.32 - "@storybook/builder-webpack5": 7.1.0-alpha.32 - "@storybook/core-common": 7.1.0-alpha.32 - "@storybook/node-logger": 7.1.0-alpha.32 - "@storybook/preset-react-webpack": 7.1.0-alpha.32 - "@storybook/preview-api": 7.1.0-alpha.32 - "@storybook/react": 7.1.0-alpha.32 + "@storybook/addon-actions": 7.1.0-alpha.33 + "@storybook/builder-webpack5": 7.1.0-alpha.33 + "@storybook/core-common": 7.1.0-alpha.33 + "@storybook/node-logger": 7.1.0-alpha.33 + "@storybook/preset-react-webpack": 7.1.0-alpha.33 + "@storybook/preview-api": 7.1.0-alpha.33 + "@storybook/react": 7.1.0-alpha.33 "@types/babel__core": ^7 "@types/babel__plugin-transform-runtime": ^7 "@types/babel__preset-env": ^7 @@ -6667,7 +6669,7 @@ __metadata: languageName: unknown linkType: soft -"@storybook/node-logger@7.1.0-alpha.32, @storybook/node-logger@workspace:*, @storybook/node-logger@workspace:lib/node-logger": +"@storybook/node-logger@7.1.0-alpha.33, @storybook/node-logger@workspace:*, @storybook/node-logger@workspace:lib/node-logger": version: 0.0.0-use.local resolution: "@storybook/node-logger@workspace:lib/node-logger" dependencies: @@ -6680,7 +6682,7 @@ __metadata: languageName: unknown linkType: soft -"@storybook/postinstall@7.1.0-alpha.32, @storybook/postinstall@workspace:*, @storybook/postinstall@workspace:lib/postinstall": +"@storybook/postinstall@7.1.0-alpha.33, @storybook/postinstall@workspace:*, @storybook/postinstall@workspace:lib/postinstall": version: 0.0.0-use.local resolution: "@storybook/postinstall@workspace:lib/postinstall" dependencies: @@ -6696,8 +6698,8 @@ __metadata: resolution: "@storybook/preact-vite@workspace:frameworks/preact-vite" dependencies: "@preact/preset-vite": ^2.0.0 - "@storybook/builder-vite": 7.1.0-alpha.32 - "@storybook/preact": 7.1.0-alpha.32 + "@storybook/builder-vite": 7.1.0-alpha.33 + "@storybook/preact": 7.1.0-alpha.33 "@types/node": ^16.0.0 typescript: ~4.9.3 vite: ^4.0.0 @@ -6711,10 +6713,10 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/preact-webpack5@workspace:frameworks/preact-webpack5" dependencies: - "@storybook/builder-webpack5": 7.1.0-alpha.32 - "@storybook/core-common": 7.1.0-alpha.32 - "@storybook/preact": 7.1.0-alpha.32 - "@storybook/preset-preact-webpack": 7.1.0-alpha.32 + "@storybook/builder-webpack5": 7.1.0-alpha.33 + "@storybook/core-common": 7.1.0-alpha.33 + "@storybook/preact": 7.1.0-alpha.33 + "@storybook/preset-preact-webpack": 7.1.0-alpha.33 "@types/node": ^16.0.0 preact: ^10.5.13 typescript: ~4.9.3 @@ -6726,14 +6728,14 @@ __metadata: languageName: unknown linkType: soft -"@storybook/preact@7.1.0-alpha.32, @storybook/preact@workspace:*, @storybook/preact@workspace:renderers/preact": +"@storybook/preact@7.1.0-alpha.33, @storybook/preact@workspace:*, @storybook/preact@workspace:renderers/preact": version: 0.0.0-use.local resolution: "@storybook/preact@workspace:renderers/preact" dependencies: - "@storybook/core-client": 7.1.0-alpha.32 + "@storybook/core-client": 7.1.0-alpha.33 "@storybook/global": ^5.0.0 - "@storybook/preview-api": 7.1.0-alpha.32 - "@storybook/types": 7.1.0-alpha.32 + "@storybook/preview-api": 7.1.0-alpha.33 + "@storybook/types": 7.1.0-alpha.33 preact: ^10.5.13 ts-dedent: ^2.0.0 typescript: ~4.9.3 @@ -6747,9 +6749,9 @@ __metadata: resolution: "@storybook/preset-create-react-app@workspace:presets/create-react-app" dependencies: "@pmmmwh/react-refresh-webpack-plugin": ^0.5.1 - "@storybook/node-logger": 7.1.0-alpha.32 + "@storybook/node-logger": 7.1.0-alpha.33 "@storybook/react-docgen-typescript-plugin": 1.0.6--canary.9.0c3f3b7.0 - "@storybook/types": 7.1.0-alpha.32 + "@storybook/types": 7.1.0-alpha.33 "@types/babel__core": ^7.1.7 "@types/node": ^16.0.0 babel-plugin-react-docgen: ^4.1.0 @@ -6762,11 +6764,11 @@ __metadata: languageName: unknown linkType: soft -"@storybook/preset-html-webpack@7.1.0-alpha.32, @storybook/preset-html-webpack@workspace:*, @storybook/preset-html-webpack@workspace:presets/html-webpack": +"@storybook/preset-html-webpack@7.1.0-alpha.33, @storybook/preset-html-webpack@workspace:*, @storybook/preset-html-webpack@workspace:presets/html-webpack": version: 0.0.0-use.local resolution: "@storybook/preset-html-webpack@workspace:presets/html-webpack" dependencies: - "@storybook/core-webpack": 7.1.0-alpha.32 + "@storybook/core-webpack": 7.1.0-alpha.33 "@types/node": ^16.0.0 html-loader: ^3.1.0 typescript: ~4.9.3 @@ -6776,13 +6778,13 @@ __metadata: languageName: unknown linkType: soft -"@storybook/preset-preact-webpack@7.1.0-alpha.32, @storybook/preset-preact-webpack@workspace:*, @storybook/preset-preact-webpack@workspace:presets/preact-webpack": +"@storybook/preset-preact-webpack@7.1.0-alpha.33, @storybook/preset-preact-webpack@workspace:*, @storybook/preset-preact-webpack@workspace:presets/preact-webpack": version: 0.0.0-use.local resolution: "@storybook/preset-preact-webpack@workspace:presets/preact-webpack" dependencies: "@babel/plugin-transform-react-jsx": ^7.21.0 "@babel/preset-typescript": ^7.21.0 - "@storybook/core-webpack": 7.1.0-alpha.32 + "@storybook/core-webpack": 7.1.0-alpha.33 "@types/node": ^16.0.0 preact: ^10.5.13 typescript: ~4.9.3 @@ -6792,17 +6794,17 @@ __metadata: languageName: unknown linkType: soft -"@storybook/preset-react-webpack@7.1.0-alpha.32, @storybook/preset-react-webpack@workspace:*, @storybook/preset-react-webpack@workspace:presets/react-webpack": +"@storybook/preset-react-webpack@7.1.0-alpha.33, @storybook/preset-react-webpack@workspace:*, @storybook/preset-react-webpack@workspace:presets/react-webpack": version: 0.0.0-use.local resolution: "@storybook/preset-react-webpack@workspace:presets/react-webpack" dependencies: "@babel/preset-flow": ^7.21.0 "@babel/preset-react": ^7.22.0 "@pmmmwh/react-refresh-webpack-plugin": ^0.5.5 - "@storybook/core-webpack": 7.1.0-alpha.32 - "@storybook/docs-tools": 7.1.0-alpha.32 - "@storybook/node-logger": 7.1.0-alpha.32 - "@storybook/react": 7.1.0-alpha.32 + "@storybook/core-webpack": 7.1.0-alpha.33 + "@storybook/docs-tools": 7.1.0-alpha.33 + "@storybook/node-logger": 7.1.0-alpha.33 + "@storybook/react": 7.1.0-alpha.33 "@storybook/react-docgen-typescript-plugin": 1.0.6--canary.9.0c3f3b7.0 "@types/node": ^16.0.0 "@types/semver": ^7.3.4 @@ -6825,14 +6827,14 @@ __metadata: languageName: unknown linkType: soft -"@storybook/preset-server-webpack@7.1.0-alpha.32, @storybook/preset-server-webpack@workspace:*, @storybook/preset-server-webpack@workspace:presets/server-webpack": +"@storybook/preset-server-webpack@7.1.0-alpha.33, @storybook/preset-server-webpack@workspace:*, @storybook/preset-server-webpack@workspace:presets/server-webpack": version: 0.0.0-use.local resolution: "@storybook/preset-server-webpack@workspace:presets/server-webpack" dependencies: - "@storybook/core-server": 7.1.0-alpha.32 - "@storybook/core-webpack": 7.1.0-alpha.32 + "@storybook/core-server": 7.1.0-alpha.33 + "@storybook/core-webpack": 7.1.0-alpha.33 "@storybook/global": ^5.0.0 - "@storybook/server": 7.1.0-alpha.32 + "@storybook/server": 7.1.0-alpha.33 "@types/node": ^16.0.0 fs-extra: ^11.1.0 jest-specific-snapshot: ^8.0.0 @@ -6844,12 +6846,12 @@ __metadata: languageName: unknown linkType: soft -"@storybook/preset-svelte-webpack@7.1.0-alpha.32, @storybook/preset-svelte-webpack@workspace:*, @storybook/preset-svelte-webpack@workspace:presets/svelte-webpack": +"@storybook/preset-svelte-webpack@7.1.0-alpha.33, @storybook/preset-svelte-webpack@workspace:*, @storybook/preset-svelte-webpack@workspace:presets/svelte-webpack": version: 0.0.0-use.local resolution: "@storybook/preset-svelte-webpack@workspace:presets/svelte-webpack" dependencies: - "@storybook/core-webpack": 7.1.0-alpha.32 - "@storybook/node-logger": 7.1.0-alpha.32 + "@storybook/core-webpack": 7.1.0-alpha.33 + "@storybook/node-logger": 7.1.0-alpha.33 svelte: ^3.31.2 svelte-loader: ^3.1.2 sveltedoc-parser: ^4.2.1 @@ -6862,12 +6864,12 @@ __metadata: languageName: unknown linkType: soft -"@storybook/preset-vue-webpack@7.1.0-alpha.32, @storybook/preset-vue-webpack@workspace:*, @storybook/preset-vue-webpack@workspace:presets/vue-webpack": +"@storybook/preset-vue-webpack@7.1.0-alpha.33, @storybook/preset-vue-webpack@workspace:*, @storybook/preset-vue-webpack@workspace:presets/vue-webpack": version: 0.0.0-use.local resolution: "@storybook/preset-vue-webpack@workspace:presets/vue-webpack" dependencies: - "@storybook/core-webpack": 7.1.0-alpha.32 - "@storybook/docs-tools": 7.1.0-alpha.32 + "@storybook/core-webpack": 7.1.0-alpha.33 + "@storybook/docs-tools": 7.1.0-alpha.33 "@types/node": ^16.0.0 ts-loader: ^9.2.8 typescript: ~4.9.3 @@ -6887,12 +6889,12 @@ __metadata: languageName: unknown linkType: soft -"@storybook/preset-vue3-webpack@7.1.0-alpha.32, @storybook/preset-vue3-webpack@workspace:*, @storybook/preset-vue3-webpack@workspace:presets/vue3-webpack": +"@storybook/preset-vue3-webpack@7.1.0-alpha.33, @storybook/preset-vue3-webpack@workspace:*, @storybook/preset-vue3-webpack@workspace:presets/vue3-webpack": version: 0.0.0-use.local resolution: "@storybook/preset-vue3-webpack@workspace:presets/vue3-webpack" dependencies: - "@storybook/core-webpack": 7.1.0-alpha.32 - "@storybook/docs-tools": 7.1.0-alpha.32 + "@storybook/core-webpack": 7.1.0-alpha.33 + "@storybook/docs-tools": 7.1.0-alpha.33 "@types/node": ^16.0.0 "@vue/compiler-sfc": ^3.2.33 ts-loader: ^9.2.8 @@ -6910,14 +6912,14 @@ __metadata: languageName: unknown linkType: soft -"@storybook/preset-web-components-webpack@7.1.0-alpha.32, @storybook/preset-web-components-webpack@workspace:*, @storybook/preset-web-components-webpack@workspace:presets/web-components-webpack": +"@storybook/preset-web-components-webpack@7.1.0-alpha.33, @storybook/preset-web-components-webpack@workspace:*, @storybook/preset-web-components-webpack@workspace:presets/web-components-webpack": version: 0.0.0-use.local resolution: "@storybook/preset-web-components-webpack@workspace:presets/web-components-webpack" dependencies: "@babel/plugin-syntax-dynamic-import": ^7.8.3 "@babel/plugin-syntax-import-meta": ^7.10.4 "@babel/preset-env": ^7.22.0 - "@storybook/core-webpack": 7.1.0-alpha.32 + "@storybook/core-webpack": 7.1.0-alpha.33 "@types/node": ^16.0.0 babel-loader: ^7.0.0 || ^8.0.0 || ^9.0.0 babel-plugin-bundled-import-meta: ^0.3.1 @@ -6928,19 +6930,19 @@ __metadata: languageName: unknown linkType: soft -"@storybook/preview-api@7.1.0-alpha.32, @storybook/preview-api@workspace:*, @storybook/preview-api@workspace:lib/preview-api": +"@storybook/preview-api@7.1.0-alpha.33, @storybook/preview-api@workspace:*, @storybook/preview-api@workspace:lib/preview-api": version: 0.0.0-use.local resolution: "@storybook/preview-api@workspace:lib/preview-api" dependencies: "@jest/globals": ^29.5.0 - "@storybook/channel-postmessage": 7.1.0-alpha.32 - "@storybook/channels": 7.1.0-alpha.32 - "@storybook/client-logger": 7.1.0-alpha.32 - "@storybook/core-common": 7.1.0-alpha.32 - "@storybook/core-events": 7.1.0-alpha.32 + "@storybook/channel-postmessage": 7.1.0-alpha.33 + "@storybook/channels": 7.1.0-alpha.33 + "@storybook/client-logger": 7.1.0-alpha.33 + "@storybook/core-common": 7.1.0-alpha.33 + "@storybook/core-events": 7.1.0-alpha.33 "@storybook/csf": ^0.1.0 "@storybook/global": ^5.0.0 - "@storybook/types": 7.1.0-alpha.32 + "@storybook/types": 7.1.0-alpha.33 "@types/qs": ^6.9.5 ansi-to-html: ^0.6.11 dequal: ^2.0.2 @@ -6978,25 +6980,23 @@ __metadata: languageName: node linkType: hard -"@storybook/preview-web@7.1.0-alpha.32, @storybook/preview-web@workspace:*, @storybook/preview-web@workspace:deprecated/preview-web": +"@storybook/preview-web@7.1.0-alpha.33, @storybook/preview-web@workspace:*, @storybook/preview-web@workspace:deprecated/preview-web": version: 0.0.0-use.local resolution: "@storybook/preview-web@workspace:deprecated/preview-web" dependencies: - "@storybook/client-logger": 7.1.0-alpha.32 - "@storybook/preview-api": 7.1.0-alpha.32 + "@storybook/client-logger": 7.1.0-alpha.33 + "@storybook/preview-api": 7.1.0-alpha.33 languageName: unknown linkType: soft -"@storybook/preview@7.1.0-alpha.32, @storybook/preview@workspace:*, @storybook/preview@workspace:lib/preview": +"@storybook/preview@7.1.0-alpha.33, @storybook/preview@workspace:*, @storybook/preview@workspace:lib/preview": version: 0.0.0-use.local resolution: "@storybook/preview@workspace:lib/preview" dependencies: - "@storybook/channel-postmessage": 7.1.0-alpha.32 - "@storybook/channel-websocket": 7.1.0-alpha.32 - "@storybook/channels": 7.1.0-alpha.32 - "@storybook/client-logger": 7.1.0-alpha.32 - "@storybook/core-events": 7.1.0-alpha.32 - "@storybook/preview-api": 7.1.0-alpha.32 + "@storybook/channels": 7.1.0-alpha.33 + "@storybook/client-logger": 7.1.0-alpha.33 + "@storybook/core-events": 7.1.0-alpha.33 + "@storybook/preview-api": 7.1.0-alpha.33 typescript: ~4.9.3 languageName: unknown linkType: soft @@ -7019,11 +7019,11 @@ __metadata: languageName: node linkType: hard -"@storybook/react-dom-shim@7.1.0-alpha.32, @storybook/react-dom-shim@workspace:lib/react-dom-shim": +"@storybook/react-dom-shim@7.1.0-alpha.33, @storybook/react-dom-shim@workspace:lib/react-dom-shim": version: 0.0.0-use.local resolution: "@storybook/react-dom-shim@workspace:lib/react-dom-shim" dependencies: - "@storybook/types": 7.1.0-alpha.32 + "@storybook/types": 7.1.0-alpha.33 typescript: ~4.9.3 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -7037,8 +7037,8 @@ __metadata: dependencies: "@joshwooding/vite-plugin-react-docgen-typescript": 0.2.1 "@rollup/pluginutils": ^5.0.2 - "@storybook/builder-vite": 7.1.0-alpha.32 - "@storybook/react": 7.1.0-alpha.32 + "@storybook/builder-vite": 7.1.0-alpha.33 + "@storybook/react": 7.1.0-alpha.33 "@types/node": ^16.0.0 "@vitejs/plugin-react": ^3.0.1 ast-types: ^0.14.2 @@ -7057,9 +7057,9 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/react-webpack5@workspace:frameworks/react-webpack5" dependencies: - "@storybook/builder-webpack5": 7.1.0-alpha.32 - "@storybook/preset-react-webpack": 7.1.0-alpha.32 - "@storybook/react": 7.1.0-alpha.32 + "@storybook/builder-webpack5": 7.1.0-alpha.33 + "@storybook/preset-react-webpack": 7.1.0-alpha.33 + "@storybook/react": 7.1.0-alpha.33 "@types/node": ^16.0.0 jest-specific-snapshot: ^8.0.0 typescript: ~4.9.3 @@ -7075,18 +7075,18 @@ __metadata: languageName: unknown linkType: soft -"@storybook/react@7.1.0-alpha.32, @storybook/react@workspace:*, @storybook/react@workspace:renderers/react": +"@storybook/react@7.1.0-alpha.33, @storybook/react@workspace:*, @storybook/react@workspace:renderers/react": version: 0.0.0-use.local resolution: "@storybook/react@workspace:renderers/react" dependencies: "@babel/core": ^7.22.0 - "@storybook/client-logger": 7.1.0-alpha.32 - "@storybook/core-client": 7.1.0-alpha.32 - "@storybook/docs-tools": 7.1.0-alpha.32 + "@storybook/client-logger": 7.1.0-alpha.33 + "@storybook/core-client": 7.1.0-alpha.33 + "@storybook/docs-tools": 7.1.0-alpha.33 "@storybook/global": ^5.0.0 - "@storybook/preview-api": 7.1.0-alpha.32 - "@storybook/react-dom-shim": 7.1.0-alpha.32 - "@storybook/types": 7.1.0-alpha.32 + "@storybook/preview-api": 7.1.0-alpha.33 + "@storybook/react-dom-shim": 7.1.0-alpha.33 + "@storybook/types": 7.1.0-alpha.33 "@types/escodegen": ^0.0.6 "@types/estree": ^0.0.51 "@types/node": ^16.0.0 @@ -7306,11 +7306,11 @@ __metadata: languageName: unknown linkType: soft -"@storybook/router@7.1.0-alpha.32, @storybook/router@workspace:*, @storybook/router@workspace:lib/router": +"@storybook/router@7.1.0-alpha.33, @storybook/router@workspace:*, @storybook/router@workspace:lib/router": version: 0.0.0-use.local resolution: "@storybook/router@workspace:lib/router" dependencies: - "@storybook/client-logger": 7.1.0-alpha.32 + "@storybook/client-logger": 7.1.0-alpha.33 "@storybook/global": ^5.0.0 dequal: ^2.0.2 lodash: ^4.17.21 @@ -7329,10 +7329,10 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/server-webpack5@workspace:frameworks/server-webpack5" dependencies: - "@storybook/builder-webpack5": 7.1.0-alpha.32 - "@storybook/core-common": 7.1.0-alpha.32 - "@storybook/preset-server-webpack": 7.1.0-alpha.32 - "@storybook/server": 7.1.0-alpha.32 + "@storybook/builder-webpack5": 7.1.0-alpha.33 + "@storybook/core-common": 7.1.0-alpha.33 + "@storybook/preset-server-webpack": 7.1.0-alpha.33 + "@storybook/server": 7.1.0-alpha.33 "@types/node": ^16.0.0 typescript: ~4.9.3 peerDependencies: @@ -7341,16 +7341,16 @@ __metadata: languageName: unknown linkType: soft -"@storybook/server@7.1.0-alpha.32, @storybook/server@workspace:*, @storybook/server@workspace:renderers/server": +"@storybook/server@7.1.0-alpha.33, @storybook/server@workspace:*, @storybook/server@workspace:renderers/server": version: 0.0.0-use.local resolution: "@storybook/server@workspace:renderers/server" dependencies: - "@storybook/core-client": 7.1.0-alpha.32 + "@storybook/core-client": 7.1.0-alpha.33 "@storybook/csf": ^0.1.0 - "@storybook/csf-tools": 7.1.0-alpha.32 + "@storybook/csf-tools": 7.1.0-alpha.33 "@storybook/global": ^5.0.0 - "@storybook/preview-api": 7.1.0-alpha.32 - "@storybook/types": 7.1.0-alpha.32 + "@storybook/preview-api": 7.1.0-alpha.33 + "@storybook/types": 7.1.0-alpha.33 "@types/fs-extra": ^11.0.1 fs-extra: ^11.1.0 ts-dedent: ^2.0.0 @@ -7359,12 +7359,12 @@ __metadata: languageName: unknown linkType: soft -"@storybook/source-loader@7.1.0-alpha.32, @storybook/source-loader@workspace:*, @storybook/source-loader@workspace:lib/source-loader": +"@storybook/source-loader@7.1.0-alpha.33, @storybook/source-loader@workspace:*, @storybook/source-loader@workspace:lib/source-loader": version: 0.0.0-use.local resolution: "@storybook/source-loader@workspace:lib/source-loader" dependencies: "@storybook/csf": ^0.1.0 - "@storybook/types": 7.1.0-alpha.32 + "@storybook/types": 7.1.0-alpha.33 estraverse: ^5.2.0 jest-specific-snapshot: ^8.0.0 lodash: ^4.17.21 @@ -7376,22 +7376,22 @@ __metadata: languageName: unknown linkType: soft -"@storybook/store@7.1.0-alpha.32, @storybook/store@workspace:*, @storybook/store@workspace:deprecated/store": +"@storybook/store@7.1.0-alpha.33, @storybook/store@workspace:*, @storybook/store@workspace:deprecated/store": version: 0.0.0-use.local resolution: "@storybook/store@workspace:deprecated/store" dependencies: - "@storybook/client-logger": 7.1.0-alpha.32 - "@storybook/preview-api": 7.1.0-alpha.32 + "@storybook/client-logger": 7.1.0-alpha.33 + "@storybook/preview-api": 7.1.0-alpha.33 languageName: unknown linkType: soft -"@storybook/svelte-vite@7.1.0-alpha.32, @storybook/svelte-vite@workspace:frameworks/svelte-vite": +"@storybook/svelte-vite@7.1.0-alpha.33, @storybook/svelte-vite@workspace:frameworks/svelte-vite": version: 0.0.0-use.local resolution: "@storybook/svelte-vite@workspace:frameworks/svelte-vite" dependencies: - "@storybook/builder-vite": 7.1.0-alpha.32 - "@storybook/node-logger": 7.1.0-alpha.32 - "@storybook/svelte": 7.1.0-alpha.32 + "@storybook/builder-vite": 7.1.0-alpha.33 + "@storybook/node-logger": 7.1.0-alpha.33 + "@storybook/svelte": 7.1.0-alpha.33 "@sveltejs/vite-plugin-svelte": ^2.0.0 "@types/node": ^16.0.0 magic-string: ^0.30.0 @@ -7411,10 +7411,10 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/svelte-webpack5@workspace:frameworks/svelte-webpack5" dependencies: - "@storybook/builder-webpack5": 7.1.0-alpha.32 - "@storybook/core-common": 7.1.0-alpha.32 - "@storybook/preset-svelte-webpack": 7.1.0-alpha.32 - "@storybook/svelte": 7.1.0-alpha.32 + "@storybook/builder-webpack5": 7.1.0-alpha.33 + "@storybook/core-common": 7.1.0-alpha.33 + "@storybook/preset-svelte-webpack": 7.1.0-alpha.33 + "@storybook/svelte": 7.1.0-alpha.33 svelte: ^3.48.0 svelte-loader: ^3.1.2 typescript: ~4.9.3 @@ -7427,17 +7427,17 @@ __metadata: languageName: unknown linkType: soft -"@storybook/svelte@7.1.0-alpha.32, @storybook/svelte@workspace:*, @storybook/svelte@workspace:renderers/svelte": +"@storybook/svelte@7.1.0-alpha.33, @storybook/svelte@workspace:*, @storybook/svelte@workspace:renderers/svelte": version: 0.0.0-use.local resolution: "@storybook/svelte@workspace:renderers/svelte" dependencies: - "@storybook/client-logger": 7.1.0-alpha.32 - "@storybook/core-client": 7.1.0-alpha.32 - "@storybook/core-events": 7.1.0-alpha.32 - "@storybook/docs-tools": 7.1.0-alpha.32 + "@storybook/client-logger": 7.1.0-alpha.33 + "@storybook/core-client": 7.1.0-alpha.33 + "@storybook/core-events": 7.1.0-alpha.33 + "@storybook/docs-tools": 7.1.0-alpha.33 "@storybook/global": ^5.0.0 - "@storybook/preview-api": 7.1.0-alpha.32 - "@storybook/types": 7.1.0-alpha.32 + "@storybook/preview-api": 7.1.0-alpha.33 + "@storybook/types": 7.1.0-alpha.33 expect-type: ^0.15.0 svelte: ^3.59.1 svelte-check: ^3.4.3 @@ -7453,9 +7453,9 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/sveltekit@workspace:frameworks/sveltekit" dependencies: - "@storybook/builder-vite": 7.1.0-alpha.32 - "@storybook/svelte": 7.1.0-alpha.32 - "@storybook/svelte-vite": 7.1.0-alpha.32 + "@storybook/builder-vite": 7.1.0-alpha.33 + "@storybook/svelte": 7.1.0-alpha.33 + "@storybook/svelte-vite": 7.1.0-alpha.33 "@types/node": ^16.0.0 typescript: ^4.9.3 vite: ^4.0.0 @@ -7464,12 +7464,12 @@ __metadata: languageName: unknown linkType: soft -"@storybook/telemetry@7.1.0-alpha.32, @storybook/telemetry@workspace:*, @storybook/telemetry@workspace:lib/telemetry": +"@storybook/telemetry@7.1.0-alpha.33, @storybook/telemetry@workspace:*, @storybook/telemetry@workspace:lib/telemetry": version: 0.0.0-use.local resolution: "@storybook/telemetry@workspace:lib/telemetry" dependencies: - "@storybook/client-logger": 7.1.0-alpha.32 - "@storybook/core-common": 7.1.0-alpha.32 + "@storybook/client-logger": 7.1.0-alpha.33 + "@storybook/core-common": 7.1.0-alpha.33 chalk: ^4.1.0 detect-package-manager: ^2.0.1 fetch-retry: ^5.0.2 @@ -7492,7 +7492,7 @@ __metadata: languageName: node linkType: hard -"@storybook/theming@7.1.0-alpha.32, @storybook/theming@workspace:*, @storybook/theming@workspace:lib/theming": +"@storybook/theming@7.1.0-alpha.33, @storybook/theming@workspace:*, @storybook/theming@workspace:lib/theming": version: 0.0.0-use.local resolution: "@storybook/theming@workspace:lib/theming" dependencies: @@ -7501,7 +7501,7 @@ __metadata: "@emotion/react": ^11.10.4 "@emotion/styled": ^11.10.4 "@emotion/use-insertion-effect-with-fallbacks": ^1.0.0 - "@storybook/client-logger": 7.1.0-alpha.32 + "@storybook/client-logger": 7.1.0-alpha.33 "@storybook/global": ^5.0.0 "@types/fs-extra": ^11.0.1 "@types/node": ^16.0.0 @@ -7517,11 +7517,11 @@ __metadata: languageName: unknown linkType: soft -"@storybook/types@7.1.0-alpha.32, @storybook/types@workspace:*, @storybook/types@workspace:lib/types": +"@storybook/types@7.1.0-alpha.33, @storybook/types@workspace:*, @storybook/types@workspace:lib/types": version: 0.0.0-use.local resolution: "@storybook/types@workspace:lib/types" dependencies: - "@storybook/channels": 7.1.0-alpha.32 + "@storybook/channels": 7.1.0-alpha.33 "@storybook/csf": ^0.1.0 "@types/babel__core": ^7.0.0 "@types/express": ^4.7.0 @@ -7547,10 +7547,10 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/vue-vite@workspace:frameworks/vue-vite" dependencies: - "@storybook/builder-vite": 7.1.0-alpha.32 - "@storybook/core-common": 7.1.0-alpha.32 - "@storybook/core-server": 7.1.0-alpha.32 - "@storybook/vue": 7.1.0-alpha.32 + "@storybook/builder-vite": 7.1.0-alpha.33 + "@storybook/core-common": 7.1.0-alpha.33 + "@storybook/core-server": 7.1.0-alpha.33 + "@storybook/vue": 7.1.0-alpha.33 magic-string: ^0.30.0 typescript: ~4.9.3 vite: ^4.0.0 @@ -7568,10 +7568,10 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/vue-webpack5@workspace:frameworks/vue-webpack5" dependencies: - "@storybook/builder-webpack5": 7.1.0-alpha.32 - "@storybook/core-common": 7.1.0-alpha.32 - "@storybook/preset-vue-webpack": 7.1.0-alpha.32 - "@storybook/vue": 7.1.0-alpha.32 + "@storybook/builder-webpack5": 7.1.0-alpha.33 + "@storybook/core-common": 7.1.0-alpha.33 + "@storybook/preset-vue-webpack": 7.1.0-alpha.33 + "@storybook/vue": 7.1.0-alpha.33 "@types/node": ^16.0.0 typescript: ~4.9.3 vue: ^2.6.12 @@ -7593,9 +7593,9 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/vue3-vite@workspace:frameworks/vue3-vite" dependencies: - "@storybook/builder-vite": 7.1.0-alpha.32 - "@storybook/core-server": 7.1.0-alpha.32 - "@storybook/vue3": 7.1.0-alpha.32 + "@storybook/builder-vite": 7.1.0-alpha.33 + "@storybook/core-server": 7.1.0-alpha.33 + "@storybook/vue3": 7.1.0-alpha.33 "@types/node": ^16.0.0 "@vitejs/plugin-vue": ^4.0.0 magic-string: ^0.30.0 @@ -7613,10 +7613,10 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/vue3-webpack5@workspace:frameworks/vue3-webpack5" dependencies: - "@storybook/builder-webpack5": 7.1.0-alpha.32 - "@storybook/core-common": 7.1.0-alpha.32 - "@storybook/preset-vue3-webpack": 7.1.0-alpha.32 - "@storybook/vue3": 7.1.0-alpha.32 + "@storybook/builder-webpack5": 7.1.0-alpha.33 + "@storybook/core-common": 7.1.0-alpha.33 + "@storybook/preset-vue3-webpack": 7.1.0-alpha.33 + "@storybook/vue3": 7.1.0-alpha.33 "@types/node": ^16.0.0 "@vue/compiler-sfc": 3.0.0 typescript: ~4.9.3 @@ -7631,16 +7631,16 @@ __metadata: languageName: unknown linkType: soft -"@storybook/vue3@7.1.0-alpha.32, @storybook/vue3@workspace:*, @storybook/vue3@workspace:renderers/vue3": +"@storybook/vue3@7.1.0-alpha.33, @storybook/vue3@workspace:*, @storybook/vue3@workspace:renderers/vue3": version: 0.0.0-use.local resolution: "@storybook/vue3@workspace:renderers/vue3" dependencies: "@digitak/esrun": ^3.2.2 - "@storybook/core-client": 7.1.0-alpha.32 - "@storybook/docs-tools": 7.1.0-alpha.32 + "@storybook/core-client": 7.1.0-alpha.33 + "@storybook/docs-tools": 7.1.0-alpha.33 "@storybook/global": ^5.0.0 - "@storybook/preview-api": 7.1.0-alpha.32 - "@storybook/types": 7.1.0-alpha.32 + "@storybook/preview-api": 7.1.0-alpha.33 + "@storybook/types": 7.1.0-alpha.33 "@types/prettier": 2.7.2 "@vue/compiler-core": ^3.3.4 "@vue/vue3-jest": 29 @@ -7657,16 +7657,16 @@ __metadata: languageName: unknown linkType: soft -"@storybook/vue@7.1.0-alpha.32, @storybook/vue@workspace:*, @storybook/vue@workspace:renderers/vue": +"@storybook/vue@7.1.0-alpha.33, @storybook/vue@workspace:*, @storybook/vue@workspace:renderers/vue": version: 0.0.0-use.local resolution: "@storybook/vue@workspace:renderers/vue" dependencies: - "@storybook/client-logger": 7.1.0-alpha.32 - "@storybook/core-client": 7.1.0-alpha.32 - "@storybook/docs-tools": 7.1.0-alpha.32 + "@storybook/client-logger": 7.1.0-alpha.33 + "@storybook/core-client": 7.1.0-alpha.33 + "@storybook/docs-tools": 7.1.0-alpha.33 "@storybook/global": ^5.0.0 - "@storybook/preview-api": 7.1.0-alpha.32 - "@storybook/types": 7.1.0-alpha.32 + "@storybook/preview-api": 7.1.0-alpha.33 + "@storybook/types": 7.1.0-alpha.33 ts-dedent: ^2.0.0 type-fest: ^3.11.0 typescript: ~4.9.3 @@ -7687,10 +7687,10 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/web-components-vite@workspace:frameworks/web-components-vite" dependencies: - "@storybook/builder-vite": 7.1.0-alpha.32 - "@storybook/core-server": 7.1.0-alpha.32 - "@storybook/node-logger": 7.1.0-alpha.32 - "@storybook/web-components": 7.1.0-alpha.32 + "@storybook/builder-vite": 7.1.0-alpha.33 + "@storybook/core-server": 7.1.0-alpha.33 + "@storybook/node-logger": 7.1.0-alpha.33 + "@storybook/web-components": 7.1.0-alpha.33 "@types/node": ^16.0.0 magic-string: ^0.30.0 typescript: ~4.9.3 @@ -7705,10 +7705,10 @@ __metadata: resolution: "@storybook/web-components-webpack5@workspace:frameworks/web-components-webpack5" dependencies: "@babel/preset-env": ^7.22.0 - "@storybook/builder-webpack5": 7.1.0-alpha.32 - "@storybook/core-common": 7.1.0-alpha.32 - "@storybook/preset-web-components-webpack": 7.1.0-alpha.32 - "@storybook/web-components": 7.1.0-alpha.32 + "@storybook/builder-webpack5": 7.1.0-alpha.33 + "@storybook/core-common": 7.1.0-alpha.33 + "@storybook/preset-web-components-webpack": 7.1.0-alpha.33 + "@storybook/web-components": 7.1.0-alpha.33 "@types/node": ^16.0.0 lit: 2.3.1 typescript: ~4.9.3 @@ -7719,17 +7719,17 @@ __metadata: languageName: unknown linkType: soft -"@storybook/web-components@7.1.0-alpha.32, @storybook/web-components@workspace:*, @storybook/web-components@workspace:renderers/web-components": +"@storybook/web-components@7.1.0-alpha.33, @storybook/web-components@workspace:*, @storybook/web-components@workspace:renderers/web-components": version: 0.0.0-use.local resolution: "@storybook/web-components@workspace:renderers/web-components" dependencies: - "@storybook/client-logger": 7.1.0-alpha.32 - "@storybook/core-client": 7.1.0-alpha.32 - "@storybook/docs-tools": 7.1.0-alpha.32 + "@storybook/client-logger": 7.1.0-alpha.33 + "@storybook/core-client": 7.1.0-alpha.33 + "@storybook/docs-tools": 7.1.0-alpha.33 "@storybook/global": ^5.0.0 - "@storybook/manager-api": 7.1.0-alpha.32 - "@storybook/preview-api": 7.1.0-alpha.32 - "@storybook/types": 7.1.0-alpha.32 + "@storybook/manager-api": 7.1.0-alpha.33 + "@storybook/preview-api": 7.1.0-alpha.33 + "@storybook/types": 7.1.0-alpha.33 "@types/cross-spawn": ^6.0.2 "@types/node": ^16.0.0 cross-spawn: ^7.0.3 @@ -27273,7 +27273,7 @@ __metadata: version: 0.0.0-use.local resolution: "sb@workspace:lib/cli-sb" dependencies: - "@storybook/cli": 7.1.0-alpha.32 + "@storybook/cli": 7.1.0-alpha.33 bin: sb: ./index.js languageName: unknown @@ -28215,7 +28215,7 @@ __metadata: version: 0.0.0-use.local resolution: "storybook@workspace:lib/cli-storybook" dependencies: - "@storybook/cli": 7.1.0-alpha.32 + "@storybook/cli": 7.1.0-alpha.33 bin: sb: ./index.js storybook: ./index.js diff --git a/docs/api/arg-types.md b/docs/api/arg-types.md new file mode 100644 index 000000000000..cff029e9fc32 --- /dev/null +++ b/docs/api/arg-types.md @@ -0,0 +1,500 @@ +--- +title: 'ArgTypes' +--- + +ArgTypes specify the behavior of [args](../writing-stories/args.md). By specifying the type of an arg, you constrain the values that it can accept and provide information about args that are not explicitly set (i.e., [description](#description)). + +You can also use argTypes to “annotate” args with information used by addons that make use of those args. For instance, to instruct the [controls addon](../essentials/controls.md) to render a color picker, you could specify the `'color'` [control type](#control). + +The most concrete realization of argTypes is the [`ArgTypes` doc block](./doc-block-argtypes.md) ([`Controls`](./doc-block-controls.md) is similar). Each row in the table corresponds to a single argType and the current value of that arg. + +![ArgTypes table](./doc-block-argtypes.png) + +## Automatic argType inference + +If you are using the Storybook [docs](../writing-docs/introduction.md) addon (installed by default as part of [essentials](../essentials/introduction.md)), then Storybook will infer a set of argTypes for each story based on the `component` specified in the [default export](../writing-stories/introduction#default-export) of the CSF file. + +To do so, Storybook uses various static analysis tools depending on your framework. + +| Framework | Static analysis tool | +| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | +| React | [react-docgen](https://github.com/reactjs/react-docgen) or [react-docgen-typescript](https://github.com/styleguidist/react-docgen-typescript) | +| Vue | [vue-docgen-api](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api) | +| Angular | [compodoc](https://compodoc.app/) | +| WebComponents | [custom-element.json](https://github.com/webcomponents/custom-elements-json) | +| Ember | [YUI doc](https://github.com/ember-learn/ember-cli-addon-docs-yuidoc#documenting-components) | + +The data structure of `argTypes` is designed to match the output of the these tools. Properties specified manually will override what is inferred. + +## Manually specifying argTypes + +For most Storybook projects, argTypes are [automatically inferred](#automatic-argtype-inference) from your components. Any argTypes specified manually will override the inferred values. + +ArgTypes are most often specified at the meta (component) level, in the [default export](../writing-stories/introduction#default-export) of the CSF file: + + + + + + + +They can apply to all stories when specified at the project (global) level, in the `preview.js|ts` configuration file: + + + + + + + +Or they can apply only to a [specific story](../writing-stories/introduction#defining-stories): + + + + + + + +## `argTypes` + +Type: + +```ts +{ + [key: string]: { + control?: ControlType | { type: ControlType; /* See below for more */ }; + description?: string; + if?: Conditional; + mapping?: { [key: string]: { [option: string]: any } }; + name?: string; + options?: string[]; + table?: { + category?: string; + defaultValue?: { summary: string; detail?: string }; + subcategory?: string; + type?: { summary?: string; detail?: string }; + }, + type?: SBType | SBScalarType['name']; + } +} +``` + +You configure argTypes using an object with keys matching the name of args. The value of each key is an object with the following properties: + +### `control` + +Type: + +```ts +| ControlType +| { + type: ControlType, + accept?: string; + labels?: { [option: string]: string }; + max?: number; + min?: number; + presetColors?: string[]; + step?: number; + } +``` + +Default: + +1. `'select'`, if [`options`](#options) are specified +2. Else, inferred from [`type`](#type) +3. Else, `'object'` + +Specify the behavior of the [controls addon](../essentials/controls.md) for the arg. If you specify a string, it's used as the [`type`](#controltype) of the control. If you specify an object, you can provide additional configuration. + + + + + + + +#### `control.type` + +Type: `ControlType | null` + +Default: [Inferred](#automatic-argtype-inference); `'select'`, if [`options`](#options) are specified; falling back to `'object'` + +Specifies the type of control used to change the arg value with the [controls addon](../essentials/controls.md). Here are the available types, `ControlType`, grouped by the type of data they handle: + +| Data type | ControlType | Description | +| -------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **array** | `'object'` | Provides a JSON-based editor to handle the values of the array. Also allows editing in raw mode.
`{ control: 'object' }` | +| **boolean** | `'boolean'` | Provides a toggle for switching between possible states.
`{ control: 'boolean' }` | +| **enum** | `'check'` | Provides a set of stacked checkboxes for selecting multiple options.
`{ control: 'check', options: ['email', 'phone', 'mail'] }` | +| | `'inline-check'` | Provides a set of inlined checkboxes for selecting multiple options.
`{ control: 'inline-check', options: ['email', 'phone', 'mail'] }` | +| | `'radio'` | Provides a set of stacked radio buttons based on the available options.
`{ control: 'radio', options: ['email', 'phone', 'mail'] }` | +| | `'inline-radio'` | Provides a set of inlined radio buttons based on the available options.
`{ control: 'inline-radio', options: ['email', 'phone', 'mail'] }` | +| | `'select'` | Provides a select to choose a single value from the options.
`{ control: 'select', options: [20, 30, 40, 50] }` | +| | `'multi-select'` | Provides a select to choose multiple values from the options.
`{ control: 'multi-select', options: ['USA', 'Canada', 'Mexico'] }` | +| **number** | `'number'` | Provides a numeric input to include the range of all possible values.
`{ control: { type: 'number', min:1, max:30, step: 2 } }` | +| | `'range'` | Provides a range slider to include all possible values.
`{ control: { type: 'range', min: 1, max: 30, step: 3 } }` | +| **object** | `'file'` | Provides a file input that returns an array of URLs. Can be further customized to accept specific file types.
`{ control: { type: 'file', accept: '.png' } }` | +| | `'object'` | Provides a JSON-based editor to handle the object's values. Also allows editing in raw mode.
`{ control: 'object' }` | +| **string** | `'color'` | Provides a color picker to choose color values. Can be additionally configured to include a set of color presets.
`{ control: { type: 'color', presetColors: ['red', 'green']} }` | +| | `'date'` | Provides a datepicker to choose a date.
`{ control: 'date' }` | +| | `'text'` | Provides a freeform text input.
`{ control: 'text' }` | + +
+ +💡 The `date` control will convert the date into a UNIX timestamp when the value changes. It's a known limitation that will be fixed in a future release. If you need to represent the actual date, you'll need to update the story's implementation and convert the value into a date object. + +
+ +#### `control.accept` + +Type: `string` + +When `type` is `'file'`, you can specify the file types that are accepted. The value should be a string of comma-separated MIME types. + +#### `control.labels` + +Type: `{ [option: string]: string }` + +Map [`options`](#options) to labels. `labels` doesn't have to be exhaustive. If an option is not in the object's keys, it's used verbatim. + +#### `control.max` + +Type: `number` + +When `type` is `'number'` or `'range'`, sets the maximum allowed value. + +#### `control.min` + +Type: `number` + +When `type` is `'number'` or `'range'`, sets the minimum allowed value. + +#### `control.presetColors` + +Type: `string[]` + +When `type` is `'color'`, defines the set of colors that are available in addition to the general color picker. The values in the array should be valid CSS color values. + +#### `control.step` + +Type: `number` + +When `type` is `'number'` or `'range'`, sets the granularity allowed when incrementing/decrementing the value. + +### `description` + +Type: `string` + +Default: [Inferred](#automatic-argtype-inference) + +Describe the arg. (If you intend to describe the type of the arg, you should use [`table.type`](#tabletype), instead.) + + + + + + + +### `if` + +Type: + +```ts +{ + [predicateType: 'arg' | 'global']: string; + eq?: any; + exists?: boolean; + neq?: any; + truthy?: boolean; +} +``` + +Conditionally render an argType based on the value of another [arg](../writing-stories/args.md) or [global](../essentials/toolbars-and-globals.md). + + + + + + + +### `mapping` + +Type: `{ [key: string]: { [option: string]: any } }` + +Map [`options`](#options) to values. + +When dealing with non-primitive values, you'll notice that you'll run into some limitations. The most obvious issue is that not every value can be represented as part of the `args` param in the URL, losing the ability to share and deeplink to such a state. Beyond that, complex values such as JSX cannot be synchronized between the manager (e.g., Controls addon) and the preview (your story). + +`mapping` doesn't have to be exhaustive. If the currently selected option is not listed, it's used verbatim. Can be used with [`control.labels`](#labels). + + + + + + + +### `name` + +Type: `string` + +The `argTypes` object uses the name of the arg as the key. By default, that key is used when displaying the argType in Storybook. You can override the displayed name by specifying a `name` property. + + + + + + + +
+ +💡 Be careful renaming args in this way. Users of the component you're documenting will not be able to use the documented name as a property of your component and the actual name will not displayed. + +For this reason, the `name` property is best used when defining an `argType` that is only used for documentation purposes and not an actual property of the component. For example, when [providing argTypes for each property of an object](https://stackblitz.com/edit/github-uplqzp?file=src/stories/Button.stories.tsx). + +
+ +### `options` + +Type: `string[]` + +Default: [Inferred](#automatic-argtype-inference) + +If the arg accepts a finite set of values, you can specify them with `options`. If those values are [complex](../essentials/controls#dealing-with-complex-values), like JSX elements, you can use [`mapping`](#mapping) to map them to string values. You can use [`control.labels`](#labels) to provide custom labels for the options. + + + + + + + +### `table` + +Type: + +```ts +{ + category?: string; + defaultValue?: { + detail?: string; + summary: string; + }; + subcategory?: string; + type?: { + detail?: string; + summary: string; + }; +} +``` + +Default: [Inferred](#automatic-argtype-inference) + +Specify how the arg is documented in the [`ArgTypes` doc block](./doc-block-argtypes.md), [`Controls` doc block](./doc-block-controls.md), and [Controls addon panel](../essentials/controls.md). + + + + + + + +#### `table.category` + +Type: `string` + +Default: [Inferred](#automatic-argtype-inference), in some frameworks + +Display the argType under a category heading, with the label specified by `category`. + +#### `table.defaultValue` + +Type: `{ detail?: string; summary: string }` + +Default: [Inferred](#automatic-argtype-inference) + +The documented default value of the argType. `summary` is typically used for the value itself, while `detail` is used for additional information. + +#### `table.subcategory` + +Type: `string` + +Display the argType under a subcategory heading (which displays under the [`category`] heading), with the label specified by `subcategory`. + +#### `table.type` + +Type: `{ detail?: string; summary: string }` + +Default: Inferred from [`type`](#type) + +The documented type of the argType. `summary` is typically used for the type itself, while `detail` is used for additional information. + +If you need to specify the actual, semantic type, you should use [`type`](#type), instead. + +### `type` + +Type: `'boolean' | 'function' | 'number' | 'string' | 'symbol' | SBType` + +The full type of `SBType` is: + +
+SBType + +```ts +interface SBBaseType { + required?: boolean; + raw?: string; +} + +type SBScalarType = SBBaseType & { + name: 'boolean' | 'string' | 'number' | 'function' | 'symbol'; +}; + +type SBArrayType = SBBaseType & { + name: 'array'; + value: SBType; +}; +type SBObjectType = SBBaseType & { + name: 'object'; + value: Record; +}; +type SBEnumType = SBBaseType & { + name: 'enum'; + value: (string | number)[]; +}; +type SBIntersectionType = SBBaseType & { + name: 'intersection'; + value: SBType[]; +}; +type SBUnionType = SBBaseType & { + name: 'union'; + value: SBType[]; +}; +type SBOtherType = SBBaseType & { + name: 'other'; + value: string; +}; + +type SBType = + | SBScalarType + | SBEnumType + | SBArrayType + | SBObjectType + | SBIntersectionType + | SBUnionType + | SBOtherType; +``` + +
+ +Default: [Inferred](#automatic-argtype-inference) + +Specifies the semantic type of the argType. When an argType is [inferred](#automatic-argtype-inference), the information from the various tools is summarized in this property, which is then used to infer other properties, like [`control`](#control) and [`table.type`](#tabletype). + +If you only need to specify the documented type, you should use [`table.type`](#tabletype), instead. + + + + + + + +### `defaultValue` (deprecated) + +Type: `any` + +Define the default value of the argType. Deprecated in favor of defining the [`arg`](../writing-stories/args.md) value directly. + + + + + + diff --git a/docs/api/argtypes.md b/docs/api/argtypes.md deleted file mode 100644 index da1c1927e683..000000000000 --- a/docs/api/argtypes.md +++ /dev/null @@ -1,216 +0,0 @@ ---- -title: 'ArgTypes' ---- - -ArgTypes are a first-class feature in Storybook for specifying the behaviour of [Args](../writing-stories/args.md). By specifying the type of an arg, you constrain the values that it can take and provide information about args that are not explicitly set (i.e., not required). - -You can also use argTypes to “annotate” args with information used by addons that make use of those args. For instance, to instruct the controls addon to render a color, you could choose a string-valued arg. - -The most concrete realization of argTypes is the [`ArgTypes` doc block](./doc-block-argtypes.md) ([`Controls`](./doc-block-controls.md) is similar). Each row in the table corresponds to a single argType and the current value of that arg. - -![Storybook inferring automatically the argType](./doc-block-argtypes.png) - -## Automatic argType inference - -If you are using the Storybook [docs](../writing-docs/introduction.md) addon (installed by default as part of [essentials](../essentials/introduction.md)), then Storybook will infer a set of argTypes for each story based on the `component` specified in the [default export](./csf.md#default-export) of the CSF file. - -To do so, Storybook uses various static analysis tools depending on your framework. - -- React - - [react-docgen](https://github.com/reactjs/react-docgen) - - [react-docgen-typescript](https://github.com/styleguidist/react-docgen-typescript) -- Vue - - [vue-docgen-api](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api) -- Angular - - [compodoc](https://compodoc.app/) -- WebComponents - - [custom-element.json](https://github.com/webcomponents/custom-elements-json) -- Ember - - [YUI doc](https://github.com/ember-learn/ember-cli-addon-docs-yuidoc#documenting-components) - -The format of the generated argType will look something like this: - - - - - - - -This ArgTypes data structure, name, type, defaultValue, and description are standard fields in all ArgTypes (analogous to PropTypes in React). The table and control fields are addon-specific annotations. So, for example, the table annotation provides extra information to customize how the label gets rendered, and the control annotation includes additional information for the control editing the property. - -## Manual specification - -If you want more control over the args table or any other aspect of using argTypes, you can overwrite the generated argTypes for your component on a per-arg basis. For instance, with the above-inferred argTypes and the following default export: - -
-💡 As with other Storybook properties (e.g., args, decorators), you can also override ArgTypes per story basis. -
- - - - - - - -The `values.description`, `table.type`, and `controls.type` are merged into the defaults extracted by Storybook. The final merged values would be: - - - - - - - -In particular, this would render a row with a modified description, a type display with a dropdown that shows the detail, and no control. - -### Available properties - -Here's an explanation of each available property: - -| Property | Description | -| ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `name` | The name of the property.
`argTypes: { label: { name: 'Something' } }` | -| `type.name` | Sets a type for the property.
`argTypes: { label: { type: { name: 'number' } } }` | -| `type.required` | Sets the property as optional or required.
`argTypes: { label: { type: { required: true } }` | -| `description` | Sets a Markdown description for the property.
`argTypes: { label: { description: 'Something' } }` | -| `table.type.summary` | Provide a short version of the type.
`argTypes: { label: { table: { type: { summary: 'a short summary' } }}}` | -| `table.type.detail` | Provides an extended version of the type.
`argTypes: { label: { table: { type: { detail: 'something' } }}}` | -| `table.defaultValue.summary` | Provide a short version of the default value.
`argTypes: { label: { table: { defaultValue: { summary: 'Hello World' } }}}` | -| `table.defaultValue.detail` | Provides a longer version of the default value.
`argTypes: { label: { table: { defaultValue: { detail: 'Something' } }}}` | -| `control` | Associates a control for the property.
`argTypes: { label: { control: { type: 'text'} } }`
Read the [Essentials documentation](../essentials/controls.md) to learn more about controls. | - -#### Shorthands - -
- -💡 The `@storybook/addon-docs` provide a shorthand for common tasks: - -- `type: 'number'` is shorthand for type: { name: 'number' } -- `control: 'radio'` is shorthand for control: { type: 'radio' } - -
- -### Grouping - -You can also manually specify groups to organize related `argTypes` into categories or even subcategories. Based on the following component implementation: - - - - - - - -You could group similar properties for better organization and structure. Using the table below as a reference: - -| Field | Category | -| :------------------ | :------: | -| **backgroundColor** | Colors | -| **primary** | Colors | -| **label** | Text | -| **onClick** | Events | -| **size** | Sizes | - -Results in the following change into your story and UI. - - - - - - - -![button story with args grouped into categories](./button-args-grouped-categories.png) - -You can also extend the formula above and introduce subcategories, allowing better structuring and organization. Using the table below as a reference leads to the following change to your story and UI: - -| Field | Category | Subcategory | -| :------------------ | :------: | :-------------: | -| **backgroundColor** | Colors | Button colors | -| **primary** | Colors | Button style | -| **label** | Text | Button contents | -| **onClick** | Events | Button Events | -| **size** | Sizes | | - - - - - - - -![button story with args grouped into categories](./button-args-grouped-subcategories.png) - -#### Global `argTypes` - -You can also define arg types at the global level; they will apply to every component's stories unless you overwrite them. To do so, export the `argTypes` key in your `preview.js`: - - - - - - - -
-💡 If you define a global arg type for a story that does not have that arg (e.g. if there is no corresponding global arg definition), then the arg type will have no effect. -
- -#### Using argTypes in addons - -If you want to access the argTypes of the current component inside an addon, you can use the `useArgTypes` hook from the `@storybook/manager-api` package: - - - - - - diff --git a/docs/api/doc-block-controls.md b/docs/api/doc-block-controls.md index e9824ee7e9d8..133ceed32c1c 100644 --- a/docs/api/doc-block-controls.md +++ b/docs/api/doc-block-controls.md @@ -10,6 +10,12 @@ The `Controls` block can be used to show a dynamic table of args for a given sto

+
+ +⚠️ The Controls doc block will only have functioning UI controls if you have also installed and registered [`@storybook/addon-controls`](../essentials/controls.md) (included in [`@storybook/addon-essentials`](../essentials/introduction.md)). + +
+ ![Screenshot of Controls block](./doc-block-controls.png) @@ -66,6 +72,12 @@ The example above applied the parameter at the [component](../writing-stories/pa +
+ +💡 This API configures Controls blocks used within docs pages. To configure the Controls addon panel, see the [Controls addon docs](../essentials/controls.md). To configure individual controls, you can specify [argTypes](./arg-types.md#control) for each. + +
+ ### `exclude` Type: `string[] | RegExp` diff --git a/docs/migration-guide.md b/docs/migration-guide.md index 2f617dc6a87f..a66b94b7ac67 100644 --- a/docs/migration-guide.md +++ b/docs/migration-guide.md @@ -6,19 +6,16 @@ Storybook 7 is our first major release in over 2 years. A lot has changed during ## Major breaking changes -The rest of this guide will help you upgrade successfully, either automatically or manually. But first, we’ve accumulated a lot of breaking changes in Storybook 7. Here are the most impactful changes you should know about before you go further: +The rest of this guide will help you upgrade successfully, either automatically or manually. But first, we’ve accumulated a lot of [breaking changes](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#70-breaking-changes) in Storybook 7. Here are the most impactful changes you should know about before you go further: - [Webpack4 support discontinued](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#webpack4-support-discontinued) - [IE11 support discontinued](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#modern-browser-support) - [Minimum supported version of node is 16](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#dropped-support-for-node-15-and-below) - [Babel mode v7 exclusively](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#babel-mode-v7-exclusively) +- [Start and build CLI binaries removed](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#start-storybook--build-storybook-binaries-removed) - [Some community addons might not work yet](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#specific-instructions-for-addon-users) -- Storybook CLI changes: - - [Start and build binaries removed](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#start-storybook--build-storybook-binaries-removed) - - [`DLL` flags removed](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#removed-dll-flags) - - [`use-npm` flag deprecated](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#cli-option---use-npm-deprecated) -If any of these apply to your project, please read through the [full migration notes](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-65x-to-700) before continuing. If these are hard requirements, you should probably stick with Storybook 6.x. +If any of these apply to your project, please read through the [full migration notes](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-65x-to-700) before continuing. If any of these new requirements or changes do not fit your project, you should probably stick with Storybook 6.x. ## Automatic upgrade diff --git a/docs/snippets/angular/arg-types-control.ts.mdx b/docs/snippets/angular/arg-types-control.ts.mdx new file mode 100644 index 000000000000..94f8365e086e --- /dev/null +++ b/docs/snippets/angular/arg-types-control.ts.mdx @@ -0,0 +1,23 @@ +```ts +// Example.stories.ts + +import type { Meta } from '@storybook/angular'; + +import { Example } from './Example'; + +const meta: Meta = { + component: Example, + argTypes: { + value: { + control: { + type: 'number', + min: 0, + max: 100, + step: 10, + }, + }, + }, +}; + +export default meta; +``` diff --git a/docs/snippets/angular/arg-types-default-value.ts.mdx b/docs/snippets/angular/arg-types-default-value.ts.mdx new file mode 100644 index 000000000000..41e3d3987501 --- /dev/null +++ b/docs/snippets/angular/arg-types-default-value.ts.mdx @@ -0,0 +1,23 @@ +```ts +// Example.stories.ts + +import type { Meta } from '@storybook/angular'; + +import { Example } from './Example'; + +const meta: Meta = { + component: Example, + argTypes: { + value: { + // ❌ Deprecated + defaultValue: 0, + }, + }, + // ✅ Do this instead + args: { + value: 0, + }, +}; + +export default meta; +``` diff --git a/docs/snippets/angular/arg-types-description.ts.mdx b/docs/snippets/angular/arg-types-description.ts.mdx new file mode 100644 index 000000000000..154c1b1f4a6b --- /dev/null +++ b/docs/snippets/angular/arg-types-description.ts.mdx @@ -0,0 +1,18 @@ +```ts +// Example.stories.ts + +import type { Meta } from '@storybook/angular'; + +import { Example } from './Example'; + +const meta: Meta = { + component: Example, + argTypes: { + value: { + description: 'The value of the slider', + }, + }, +}; + +export default meta; +``` diff --git a/docs/snippets/angular/arg-types-if.ts.mdx b/docs/snippets/angular/arg-types-if.ts.mdx new file mode 100644 index 000000000000..d1887b8bfbcd --- /dev/null +++ b/docs/snippets/angular/arg-types-if.ts.mdx @@ -0,0 +1,40 @@ +```ts +// Example.stories.ts + +import type { Meta } from '@storybook/angular'; + +import { Example } from './Example'; + +const meta: Meta = { + component: Example, + argTypes: { + parent: { control: 'select', options: ['one', 'two', 'three'] }, + + // 👇 Only shown when `parent` arg exists + parentExists: { if: { arg: 'parent', exists: true } }, + + // 👇 Only shown when `parent` arg does not exist + parentDoesNotExist: { if: { arg: 'parent', exists: false } }, + + // 👇 Only shown when `parent` arg value is truthy + parentIsTruthy: { if: { arg: 'parent' } }, + parentIsTruthyVerbose: { if: { arg: 'parent', truthy: true } }, + + // 👇 Only shown when `parent` arg value is not truthy + parentIsNotTruthy: { if: { arg: 'parent', truthy: false } }, + + // 👇 Only shown when `parent` arg value is 'three' + parentIsEqToValue: { if: { arg: 'parent', eq: 'three' } }, + + // 👇 Only shown when `parent` arg value is not 'three' + parentIsNotEqToValue: { if: { arg: 'parent', neq: 'three' } }, + + // Each of the above can also be conditional on the value of a globalType, e.g.: + + // 👇 Only shown when `theme` global exists + parentExists: { if: { global: 'theme', exists: true } }, + }, +}; + +export default meta; +``` diff --git a/docs/snippets/angular/arg-types-in-meta.ts.mdx b/docs/snippets/angular/arg-types-in-meta.ts.mdx new file mode 100644 index 000000000000..1cc7933b518a --- /dev/null +++ b/docs/snippets/angular/arg-types-in-meta.ts.mdx @@ -0,0 +1,20 @@ +```ts +// Button.stories.ts + +import type { Meta } from '@storybook/angular'; + +import { Button } from './button.component'; + +const meta: Meta