Merge branch 'latest-release'

CHANGELOG.md

@@ -1,3 +1,15 @@
+## 7.0.21
+
+- Angular: Fix 16.1 compatibility - [#23064](https://github.com/storybookjs/storybook/pull/23064), thanks [@ndelangen](https://github.com/ndelangen)!
+- Angular: Fix ivy preset - [#23070](https://github.com/storybookjs/storybook/pull/23070), 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: Skip builder selection for react native - [#23042](https://github.com/storybookjs/storybook/pull/23042), thanks [@dannyhw](https://github.com/dannyhw)!
+- Core: Fix `builder-manager` adding multiple dashes to relative path - [#22974](https://github.com/storybookjs/storybook/pull/22974), thanks [@MarioCadenas](https://github.com/MarioCadenas)!
+- Core: Improve `of={...}` DocBlock error in story index - [#22782](https://github.com/storybookjs/storybook/pull/22782), thanks [@shilman](https://github.com/shilman)!
+- Dependencies: Set vue-component-type-helpers to latest - [#23015](https://github.com/storybookjs/storybook/pull/23015), thanks [@ndelangen](https://github.com/ndelangen)!
+- Vue3: Fix source decorator to generate correct story code  - [#22518](https://github.com/storybookjs/storybook/pull/22518), thanks [@chakAs3](https://github.com/chakAs3)!
+- Web-components: Fix custom-elements order of property application - [#19183](https://github.com/storybookjs/storybook/pull/19183), thanks [@sonntag-philipp](https://github.com/sonntag-philipp)!
+
 ## 7.0.20 (June 8, 2023)
 
 #### Bug Fixes

MIGRATION.md

@@ -1247,6 +1247,111 @@ You can get the same result by setting [the parameter `parameters.docs.source.fo
 
 ### 7.0 Addon authors changes
 
+#### New Addons API
+
+Storybook 7 adds 2 new packages for addon authors to use: `@storybook/preview-api` and `@storybook/manager-api`.
+These 2 packages replace `@storybook/addons`.
+
+When adding addons to storybook, you can (for example) add panels:
+
+```js
+import { addons } from '@storybook/manager-api';
+
+addons.addPanel('my-panel', {
+  title: 'My Panel',
+  render: ({ active, key }) => <div>My Panel</div>,
+});
+```
+
+Note that this before would import `addons` from `@storybook/addons`, but now it imports `{ addons }` from `@storybook/manager-api`.
+The `addons` export is now a named export only, there's no default export anymore, so make sure to update this usage.
+
+The package `@storybook/addons` is still available, but it's only for backwards compatibility. It's not recommended to use it anymore.
+
+It's also been used by addon creators to gain access to a few APIs like `makeDecorator`.
+These APIs are now available in `@storybook/preview-api`.
+
+Storybook users have had access to a few storybook-lifecycle hooks such as `useChannel`, `useParameter`, `useStorybookState`;
+when these hooks are used in panels, they should be imported from `@storybook/manager-api`.
+When these hooks are used in decorators/stories, they should be imported from `@storybook/preview-api`.
+
+Storybook 7 includes `@storybook/addons` shim package that provides the old API and calls the new API under the hood.
+This backwards compatibility will be removed in a future release of storybook.
+
+Here's an example of using the new API:
+The `@storybook/preview-api` is used here, because the `useEffect` hook is used in a decorator.
+
+```js
+import { useEffect, makeDecorator } from '@storybook/preview-api';
+
+export const withMyAddon = makeDecorator({
+  name: 'withMyAddon',
+  parameterName: 'myAddon',
+  wrapper: (getStory) => {
+    useEffect(() => {
+      // do something with the options
+    }, []);
+    return getStory(context);
+  },
+});
+```
+
+##### Specific instructions for addon creators
+
+If you're an addon creator, you'll have to update your addon to use the new APIs.
+
+That means you'll have to release a breaking release of your addon to make it compatible with Storybook 7.
+It should no longer depend on `@storybook/addons`, but instead on `@storybook/preview-api` and/or `@storybook/manager-api`.
+
+You might also depend (and use) these packages in your addon's decorators: `@storybook/store`, `@storybook/preview-web`, `@storybook/core-client`, `@storybook/client-api`; these have all been consolidated into `@storybook/preview-api`.
+So if you use any of these packages, please import what you need from `@storybook/preview-api` instead.
+
+Storybook 7 will prepare manager-code for the browser using ESbuild (before it was using a combination of webpack + babel).
+This is a very important change, though it will not affect most addons.
+It means that when creating custom addons, particularly custom addons within the repo in which they are consumed,
+you will need to be aware that this code is not passed though babel, and thus will not use your babel config.
+This can result in errors if you are using experimental JS features in your addon code, not supported yet by ESbuild,
+or using babel dependent features such as Component selectors in Emotion.
+
+ESbuild also places some constraints on things you can import into your addon's manager code: only woff2 files are supported, and not all image file types are supported.
+Here's the [list](https://github.com/storybookjs/storybook/blob/next/code/builders/builder-manager/src/index.ts#L53-L70) of supported file types.
+
+This is not configurable.
+
+If this is a problem for your addon, you need to pre-compile your addon's manager code to ensure it works.
+
+If you addon also introduces preview code (such a decorators) it will be passed though whatever builder + config the user has configured for their project; this hasn't changed.
+
+In both the preview and manager code it's good to remember [Storybook now targets modern browser only](#modern-browser-support).
+
+The package `@storybook/components` contain a lot of components useful for building addons.
+Some of these addons have been moved to a new package `@storybook/blocks`.
+These components were moved: `ColorControl`, `ColorPalette`, `ArgsTable`, `ArgRow`, `TabbedArgsTable`, `SectionRow`, `Source`, `Code`.
+
+##### Specific instructions for addon users
+
+All of storybook's core addons have been updated and are ready to use with Storybook 7.
+
+We're working with the community to update the most popular addons.
+But if you're using an addon that hasn't been updated yet, it might not work.
+
+It's possible for example for older addons to use APIs that are no longer available in Storybook 7.
+Your addon might not show upside of the storybook (manager) UI, or storybook might fail to start entirely.
+
+When this happens to you please open an issue on the addon's repo, and ask the addon author to update their addon to be compatible with Storybook 7.
+It's also useful for the storybook team to know which addons are not yet compatible, so please open an issue on the storybook repo as well; particularly if the addon is popular and causes a critical failure.
+
+Here's a list of popular addons that are known not to be compatible with Storybook 7 yet:
+
+- [ ] [storybook-addon-jsx](https://github.com/storybookjs/addon-jsx)
+- [ ] [storybook-addon-dark-mode](https://github.com/hipstersmoothie/storybook-dark-mode)
+
+Though storybook should de-duplicate storybook packages, storybook CLI's `upgrade` command will warn you when you have multiple storybook-dependencies, because it is a possibility that this causes addons/storybook to not work, so when running into issues, please run this:
+
+```
+npx sb upgrade
+```
+
 #### register.js removed
 
 In SB 6.x and earlier, addons exported a `register.js` entry point by convention, and users would import this in `.storybook/manager.js`. This was [deprecated in SB 6.5](#deprecated-registerjs)

code/addons/a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",
@@ -63,16 +63,16 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addon-highlight": "7.0.20",
-    "@storybook/channels": "7.0.20",
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/components": "7.0.20",
-    "@storybook/core-events": "7.0.20",
+    "@storybook/addon-highlight": "7.0.21",
+    "@storybook/channels": "7.0.21",
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/components": "7.0.21",
+    "@storybook/core-events": "7.0.21",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.0.20",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/theming": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/manager-api": "7.0.21",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/theming": "7.0.21",
+    "@storybook/types": "7.0.21",
     "axe-core": "^4.2.0",
     "lodash": "^4.17.21",
     "react-resize-detector": "^7.1.2"

code/addons/actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "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.0.20",
-    "@storybook/components": "7.0.20",
-    "@storybook/core-events": "7.0.20",
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/components": "7.0.21",
+    "@storybook/core-events": "7.0.21",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.0.20",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/theming": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/manager-api": "7.0.21",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/theming": "7.0.21",
+    "@storybook/types": "7.0.21",
     "dequal": "^2.0.2",
     "lodash": "^4.17.21",
     "polished": "^4.2.2",

code/addons/backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "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.0.20",
-    "@storybook/components": "7.0.20",
-    "@storybook/core-events": "7.0.20",
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/components": "7.0.21",
+    "@storybook/core-events": "7.0.21",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.0.20",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/theming": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/manager-api": "7.0.21",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/theming": "7.0.21",
+    "@storybook/types": "7.0.21",
     "memoizerific": "^1.11.3",
     "ts-dedent": "^2.0.0"
   },

code/addons/controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "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.0.20",
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/components": "7.0.20",
-    "@storybook/core-common": "7.0.20",
-    "@storybook/manager-api": "7.0.20",
-    "@storybook/node-logger": "7.0.20",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/theming": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/blocks": "7.0.21",
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/components": "7.0.21",
+    "@storybook/core-common": "7.0.21",
+    "@storybook/manager-api": "7.0.21",
+    "@storybook/node-logger": "7.0.21",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/theming": "7.0.21",
+    "@storybook/types": "7.0.21",
     "lodash": "^4.17.21",
     "ts-dedent": "^2.0.0"
   },

code/addons/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
@@ -101,19 +101,19 @@
     "@babel/plugin-transform-react-jsx": "^7.19.0",
     "@jest/transform": "^29.3.1",
     "@mdx-js/react": "^2.1.5",
-    "@storybook/blocks": "7.0.20",
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/components": "7.0.20",
-    "@storybook/csf-plugin": "7.0.20",
-    "@storybook/csf-tools": "7.0.20",
+    "@storybook/blocks": "7.0.21",
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/components": "7.0.21",
+    "@storybook/csf-plugin": "7.0.21",
+    "@storybook/csf-tools": "7.0.21",
     "@storybook/global": "^5.0.0",
     "@storybook/mdx2-csf": "^1.0.0",
-    "@storybook/node-logger": "7.0.20",
-    "@storybook/postinstall": "7.0.20",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/react-dom-shim": "7.0.20",
-    "@storybook/theming": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/node-logger": "7.0.21",
+    "@storybook/postinstall": "7.0.21",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/react-dom-shim": "7.0.21",
+    "@storybook/theming": "7.0.21",
+    "@storybook/types": "7.0.21",
     "fs-extra": "^11.1.0",
     "remark-external-links": "^8.0.0",
     "remark-slug": "^6.0.0",

code/addons/essentials/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "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.0.20",
-    "@storybook/addon-backgrounds": "7.0.20",
-    "@storybook/addon-controls": "7.0.20",
-    "@storybook/addon-docs": "7.0.20",
-    "@storybook/addon-highlight": "7.0.20",
-    "@storybook/addon-measure": "7.0.20",
-    "@storybook/addon-outline": "7.0.20",
-    "@storybook/addon-toolbars": "7.0.20",
-    "@storybook/addon-viewport": "7.0.20",
-    "@storybook/core-common": "7.0.20",
-    "@storybook/manager-api": "7.0.20",
-    "@storybook/node-logger": "7.0.20",
-    "@storybook/preview-api": "7.0.20",
+    "@storybook/addon-actions": "7.0.21",
+    "@storybook/addon-backgrounds": "7.0.21",
+    "@storybook/addon-controls": "7.0.21",
+    "@storybook/addon-docs": "7.0.21",
+    "@storybook/addon-highlight": "7.0.21",
+    "@storybook/addon-measure": "7.0.21",
+    "@storybook/addon-outline": "7.0.21",
+    "@storybook/addon-toolbars": "7.0.21",
+    "@storybook/addon-viewport": "7.0.21",
+    "@storybook/core-common": "7.0.21",
+    "@storybook/manager-api": "7.0.21",
+    "@storybook/node-logger": "7.0.21",
+    "@storybook/preview-api": "7.0.21",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "@storybook/vue": "7.0.20",
+    "@storybook/vue": "7.0.21",
     "typescript": "^4.9.3"
   },
   "peerDependencies": {

code/addons/gfm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mdx-gfm",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "GitHub Flavored Markdown in Storybook",
   "keywords": [
     "addon",
@@ -51,7 +51,7 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/node-logger": "7.0.20",
+    "@storybook/node-logger": "7.0.21",
     "remark-gfm": "^3.0.1",
     "ts-dedent": "^2.0.0"
   },

code/addons/highlight/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Highlight DOM nodes within your stories",
   "keywords": [
     "storybook-addons",
@@ -61,9 +61,9 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/core-events": "7.0.20",
+    "@storybook/core-events": "7.0.21",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "7.0.20"
+    "@storybook/preview-api": "7.0.21"
   },
   "devDependencies": {
     "@types/webpack-env": "^1.16.0",