Merge branch 'next' into shilman/27352-fix-tags-composition

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 8.1.3
+
+- Angular: Support v18 - [#27237](https://github.com/storybookjs/storybook/pull/27237), thanks @valentinpalkovic!
+- Telemetry: Add test packages - [#27226](https://github.com/storybookjs/storybook/pull/27226), thanks @shilman!
+
 ## 8.1.2
 
 - Angular: Fix filtering of workspace config styles - [#27108](https://github.com/storybookjs/storybook/pull/27108), thanks @valentinpalkovic!

code/builders/builder-vite/src/codegen-modern-iframe-script.ts

@@ -21,9 +21,13 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
   // and the HMR handler.  We don't use the hot.accept callback params because only the changed
   // modules are provided, the rest are null.  We can just re-import everything again in that case.
   const getPreviewAnnotationsFunction = `
-  const getProjectAnnotations = async () => {
+  const getProjectAnnotations = async (hmrPreviewAnnotationModules = []) => {
     const configs = await Promise.all([${previewAnnotationURLs
-      .map((previewAnnotation) => `import('${previewAnnotation}')`)
+      .map(
+        (previewAnnotation, index) =>
+          // Prefer the updated module from an HMR update, otherwise import the original module
+          `hmrPreviewAnnotationModules.at(${index}) ?? import('${previewAnnotation}')`
+      )
       .join(',\n')}])
     return composeConfigs(configs);
   }`;
@@ -45,10 +49,10 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
       window.__STORYBOOK_PREVIEW__.onStoriesChanged({ importFn: newModule.importFn });
       });
 
-    import.meta.hot.accept(${JSON.stringify(previewAnnotationURLs)}, () => {
+    import.meta.hot.accept(${JSON.stringify(previewAnnotationURLs)}, (previewAnnotationModules) => {
       ${getPreviewAnnotationsFunction}
       // getProjectAnnotations has changed so we need to patch the new one in
-      window.__STORYBOOK_PREVIEW__.onGetProjectAnnotationsChanged({ getProjectAnnotations });
+      window.__STORYBOOK_PREVIEW__.onGetProjectAnnotationsChanged({ getProjectAnnotations: () => getProjectAnnotations(previewAnnotationModules) });
     });
   }`.trim();
   };

code/frameworks/angular/package.json

@@ -87,17 +87,17 @@
     "zone.js": "^0.14.2"
   },
   "peerDependencies": {
-    "@angular-devkit/architect": ">=0.1500.0 < 0.1800.0",
-    "@angular-devkit/build-angular": ">=15.0.0 < 18.0.0",
-    "@angular-devkit/core": ">=15.0.0 < 18.0.0",
-    "@angular/cli": ">=15.0.0 < 18.0.0",
-    "@angular/common": ">=15.0.0 < 18.0.0",
-    "@angular/compiler": ">=15.0.0 < 18.0.0",
-    "@angular/compiler-cli": ">=15.0.0 < 18.0.0",
-    "@angular/core": ">=15.0.0 < 18.0.0",
-    "@angular/forms": ">=15.0.0 < 18.0.0",
-    "@angular/platform-browser": ">=15.0.0 < 18.0.0",
-    "@angular/platform-browser-dynamic": ">=15.0.0 < 18.0.0",
+    "@angular-devkit/architect": ">=0.1500.0 < 0.1900.0",
+    "@angular-devkit/build-angular": ">=15.0.0 < 19.0.0",
+    "@angular-devkit/core": ">=15.0.0 < 19.0.0",
+    "@angular/cli": ">=15.0.0 < 19.0.0",
+    "@angular/common": ">=15.0.0 < 19.0.0",
+    "@angular/compiler": ">=15.0.0 < 19.0.0",
+    "@angular/compiler-cli": ">=15.0.0 < 19.0.0",
+    "@angular/core": ">=15.0.0 < 19.0.0",
+    "@angular/forms": ">=15.0.0 < 19.0.0",
+    "@angular/platform-browser": ">=15.0.0 < 19.0.0",
+    "@angular/platform-browser-dynamic": ">=15.0.0 < 19.0.0",
     "rxjs": "^6.0.0 || ^7.4.0",
     "typescript": "^4.0.0 || ^5.0.0",
     "zone.js": ">= 0.11.1 < 1.0.0"

code/yarn.lock

@@ -5537,17 +5537,17 @@ __metadata:
     webpack: "npm:5"
     zone.js: "npm:^0.14.2"
   peerDependencies:
-    "@angular-devkit/architect": ">=0.1500.0 < 0.1800.0"
-    "@angular-devkit/build-angular": ">=15.0.0 < 18.0.0"
-    "@angular-devkit/core": ">=15.0.0 < 18.0.0"
-    "@angular/cli": ">=15.0.0 < 18.0.0"
-    "@angular/common": ">=15.0.0 < 18.0.0"
-    "@angular/compiler": ">=15.0.0 < 18.0.0"
-    "@angular/compiler-cli": ">=15.0.0 < 18.0.0"
-    "@angular/core": ">=15.0.0 < 18.0.0"
-    "@angular/forms": ">=15.0.0 < 18.0.0"
-    "@angular/platform-browser": ">=15.0.0 < 18.0.0"
-    "@angular/platform-browser-dynamic": ">=15.0.0 < 18.0.0"
+    "@angular-devkit/architect": ">=0.1500.0 < 0.1900.0"
+    "@angular-devkit/build-angular": ">=15.0.0 < 19.0.0"
+    "@angular-devkit/core": ">=15.0.0 < 19.0.0"
+    "@angular/cli": ">=15.0.0 < 19.0.0"
+    "@angular/common": ">=15.0.0 < 19.0.0"
+    "@angular/compiler": ">=15.0.0 < 19.0.0"
+    "@angular/compiler-cli": ">=15.0.0 < 19.0.0"
+    "@angular/core": ">=15.0.0 < 19.0.0"
+    "@angular/forms": ">=15.0.0 < 19.0.0"
+    "@angular/platform-browser": ">=15.0.0 < 19.0.0"
+    "@angular/platform-browser-dynamic": ">=15.0.0 < 19.0.0"
     rxjs: ^6.0.0 || ^7.4.0
     typescript: ^4.0.0 || ^5.0.0
     zone.js: ">= 0.11.1 < 1.0.0"

docs/snippets/common/ghp-github-action.yml.mdx

@@ -30,7 +30,7 @@ jobs:
           node-version: '16.x'
 
       #👇 Add Storybook build and deploy to GitHub Pages as a step in the workflow
-      - uses: bitovi/github-actions-storybook-to-github-pages@v1.0.1
+      - uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3
         with:
           install_command: yarn install # default: npm ci
           build_command: yarn build-storybook # default: npm run build-storybook

docs/snippets/react/button-story-with-args.ts-4-9.mdx

@@ -3,7 +3,7 @@
 
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Button, ButtonProps } from './Button';
+import { Button } from './Button';
 
 const meta = {
   component: Button,

docs/snippets/react/button-story-with-args.ts.mdx

@@ -3,7 +3,7 @@
 
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Button, ButtonProps } from './Button';
+import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
   component: Button,

docs/snippets/vue/storybook-preview-use-global-type.3.js.mdx

@@ -15,7 +15,7 @@ setup((app) => {
 const preview = {
   decorators: [
     (story, context) => {
-      const theme = context.globals.theme || 'light'';
+      const theme = context.globals.theme || 'light';
       return {
         components: { story, VApp },
         template: `

docs/snippets/vue/storybook-preview-use-global-type.3.ts.mdx

@@ -16,7 +16,7 @@ setup((app) => {
 const preview: Preview = {
   decorators: [
     (story, context) => {
-      const theme = context.globals.theme || 'light'';
+      const theme = context.globals.theme || 'light';
       return {
         components: { story, VApp },
         template: `

docs/snippets/vue/storybook-preview-use-global-type.ts-4-9.mdx

@@ -16,7 +16,7 @@ setup((app) => {
 const preview: Preview = {
   decorators: [
     (story, context) => {
-      const theme = context.globals.theme || 'light'';
+      const theme = context.globals.theme || 'light';
       return {
         components: { story, VApp },
         template: `