Merge pull request #25168 from storybookjs/version-patch-from-7.6.4

Release: Patch 7.6.5

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 7.6.5
+
+- Angular: Update Angular cli templates - [#25152](https://github.com/storybookjs/storybook/pull/25152), thanks [@Marklb](https://github.com/Marklb)!
+- Blocks: Fix Subtitle block for unattached docs pages - [#25157](https://github.com/storybookjs/storybook/pull/25157), thanks [@kripod](https://github.com/kripod)!
+- SvelteKit: Fix missing `$app` modules - [#25132](https://github.com/storybookjs/storybook/pull/25132), thanks [@paoloricciuti](https://github.com/paoloricciuti)!
+
 ## 7.6.4
 
 - Angular: Fix CSF Plugin - [#25098](https://github.com/storybookjs/storybook/pull/25098), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!

code/addons/docs/template/stories/docs2/Title.mdx

@@ -1,7 +1,9 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta, Subtitle } from '@storybook/addon-docs';
 
 <Meta title="Yabbadabbadooo" />
 
 # Docs with title
 
+<Subtitle>Subtitle</Subtitle>
+
 hello docs

code/e2e-tests/json-files.spec.ts

@@ -23,7 +23,7 @@ test.describe('JSON files', () => {
       entries: expect.objectContaining({
         'example-button--primary': expect.objectContaining({
           id: 'example-button--primary',
-          importPath: expect.stringContaining('Button.stories'),
+          importPath: expect.stringMatching(/button\.stories/i),
           name: 'Primary',
           title: 'Example/Button',
           type: 'story',

code/frameworks/angular/template/cli/button.component.ts

@@ -3,6 +3,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
   selector: 'storybook-button',
+  standalone: true,
   imports: [CommonModule],
   template: ` <button
     type="button"
@@ -14,7 +15,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
   </button>`,
   styleUrls: ['./button.css'],
 })
-export default class ButtonComponent {
+export class ButtonComponent {
   /**
    * Is this the principal call to action on the page?
    */

code/frameworks/angular/template/cli/Button.stories.ts → code/frameworks/angular/template/cli/button.stories.ts

@@ -1,12 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/angular';
-import Button from './button.component';
+
+import { ButtonComponent } from './button.component';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const meta: Meta<Button> = {
+const meta: Meta<ButtonComponent> = {
   title: 'Example/Button',
-  component: Button,
+  component: ButtonComponent,
   tags: ['autodocs'],
-  render: (args: Button) => ({
+  render: (args: ButtonComponent) => ({
     props: {
       backgroundColor: null,
       ...args,
@@ -20,7 +21,7 @@ const meta: Meta<Button> = {
 };
 
 export default meta;
-type Story = StoryObj<Button>;
+type Story = StoryObj<ButtonComponent>;
 
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Primary: Story = {

code/frameworks/angular/template/cli/header.component.ts

@@ -1,8 +1,13 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
-import type { User } from './User';
+import { CommonModule } from '@angular/common';
+
+import { ButtonComponent } from './button.component';
+import type { User } from './user';
 
 @Component({
   selector: 'storybook-header',
+  standalone: true,
+  imports: [CommonModule, ButtonComponent],
   template: `<header>
     <div class="storybook-header">
       <div>
@@ -47,9 +52,8 @@ import type { User } from './User';
           ></storybook-button>
           <storybook-button
             *ngIf="!user"
-            primary
             size="small"
-            primary="true"
+            [primary]="true"
             class="margin-left"
             (onClick)="onCreateAccount.emit($event)"
             label="Sign up"
@@ -60,7 +64,7 @@ import type { User } from './User';
   </header>`,
   styleUrls: ['./header.css'],
 })
-export default class HeaderComponent {
+export class HeaderComponent {
   @Input()
   user: User | null = null;
 

code/frameworks/angular/template/cli/Header.stories.ts → code/frameworks/angular/template/cli/header.stories.ts

@@ -1,30 +1,20 @@
-import { moduleMetadata } from '@storybook/angular';
 import type { Meta, StoryObj } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
 
-import Button from './button.component';
-import Header from './header.component';
+import { HeaderComponent } from './header.component';
 
-const meta: Meta<Header> = {
+const meta: Meta<HeaderComponent> = {
   title: 'Example/Header',
-  component: Header,
+  component: HeaderComponent,
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
-  render: (args) => ({ props: args }),
-  decorators: [
-    moduleMetadata({
-      declarations: [Button],
-      imports: [CommonModule],
-    }),
-  ],
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
     layout: 'fullscreen',
   },
 };
 
 export default meta;
-type Story = StoryObj<Header>;
+type Story = StoryObj<HeaderComponent>;
 
 export const LoggedIn: Story = {
   args: {

code/frameworks/angular/template/cli/page.component.ts

@@ -1,8 +1,13 @@
 import { Component } from '@angular/core';
-import type { User } from './User';
+import { CommonModule } from '@angular/common';
+
+import { HeaderComponent } from './header.component';
+import type { User } from './user';
 
 @Component({
   selector: 'storybook-page',
+  standalone: true,
+  imports: [CommonModule, HeaderComponent],
   template: `<article>
     <storybook-header
       [user]="user"
@@ -60,7 +65,7 @@ import type { User } from './User';
   </article>`,
   styleUrls: ['./page.css'],
 })
-export default class PageComponent {
+export class PageComponent {
   user: User | null = null;
 
   doLogout() {

code/frameworks/angular/template/cli/Page.stories.ts → code/frameworks/angular/template/cli/page.stories.ts

@@ -1,41 +1,24 @@
 import type { Meta, StoryObj } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
 import { within, userEvent, expect } from '@storybook/test';
 
-import Button from './button.component';
-import Header from './header.component';
-import Page from './page.component';
+import { PageComponent } from './page.component';
 
-const meta: Meta<Page> = {
+const meta: Meta<PageComponent> = {
   title: 'Example/Page',
-  component: Page,
+  component: PageComponent,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
     layout: 'fullscreen',
   },
-  decorators: [
-    moduleMetadata({
-      declarations: [Button, Header],
-      imports: [CommonModule],
-    }),
-  ],
 };
 
 export default meta;
-type Story = StoryObj<Page>;
+type Story = StoryObj<PageComponent>;
 
-export const LoggedOut: Story = {
-  render: (args: Page) => ({
-    props: args,
-  }),
-};
+export const LoggedOut: Story = {};
 
 // More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
 export const LoggedIn: Story = {
-  render: (args: Page) => ({
-    props: args,
-  }),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const loginButton = canvas.getByRole('button', { name: /Log in/i });

code/frameworks/angular/template/cli/user.ts

@@ -0,0 +1,3 @@
+export interface User {
+  name: string;
+}

code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts

@@ -7,7 +7,9 @@ export function mockSveltekitStores() {
     config: () => ({
       resolve: {
         alias: {
-          $app: resolve(__dirname, '../src/mocks/app/'),
+          '$app/forms': resolve(__dirname, '../src/mocks/app/forms.ts'),
+          '$app/navigation': resolve(__dirname, '../src/mocks/app/navigation.ts'),
+          '$app/stores': resolve(__dirname, '../src/mocks/app/stores.ts'),
         },
       },
     }),

code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Environment.svelte

@@ -0,0 +1,8 @@
+<script>
+	import { browser, dev, building, version } from '$app/environment';
+</script>
+
+<div data-testid="browser">{browser}</div>
+<div data-testid="dev">{dev}</div>
+<div data-testid="building">{building}</div>
+<div data-testid="version">{version}</div>

code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Paths.svelte

@@ -0,0 +1,6 @@
+<script>
+	import { assets, base } from "$app/paths";
+</script>
+
+<div data-testid="assets">{assets}</div>
+<div data-testid="base">{base}</div>

code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/environment.stories.js

@@ -0,0 +1,10 @@
+import { expect, fn, within } from '@storybook/test';
+import Environment from './Environment.svelte';
+
+export default {
+  title: 'stories/sveltekit/modules/environment',
+  component: Environment,
+  tags: ['autodocs'],
+};
+
+export const Default = {};

code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/paths.stories.js

@@ -0,0 +1,10 @@
+import { expect, fn, within } from '@storybook/test';
+import Paths from './Paths.svelte';
+
+export default {
+  title: 'stories/sveltekit/modules/paths',
+  component: Paths,
+  tags: ['autodocs'],
+};
+
+export const Default = {};

code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Environment.svelte

@@ -0,0 +1,8 @@
+<script>
+	import { browser, dev, building, version } from '$app/environment';
+</script>
+
+<div data-testid="browser">{browser}</div>
+<div data-testid="dev">{dev}</div>
+<div data-testid="building">{building}</div>
+<div data-testid="version">{version}</div>

code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Paths.svelte

@@ -0,0 +1,6 @@
+<script>
+	import { assets, base } from "$app/paths";
+</script>
+
+<div data-testid="assets">{assets}</div>
+<div data-testid="base">{base}</div>

code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/environment.stories.js

@@ -0,0 +1,10 @@
+import { expect, fn, within } from '@storybook/test';
+import Environment from './Environment.svelte';
+
+export default {
+  title: 'stories/sveltekit/modules/environment',
+  component: Environment,
+  tags: ['autodocs'],
+};
+
+export const Default = {};

code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/paths.stories.js

@@ -0,0 +1,10 @@
+import { expect, fn, within } from '@storybook/test';
+import Paths from './Paths.svelte';
+
+export default {
+  title: 'stories/sveltekit/modules/paths',
+  component: Paths,
+  tags: ['autodocs'],
+};
+
+export const Default = {};

code/package.json

@@ -328,5 +328,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "7.6.5"
 }

code/ui/blocks/src/blocks/Subtitle.tsx

@@ -9,8 +9,7 @@ interface SubtitleProps {
 
 export const Subtitle: FunctionComponent<SubtitleProps> = ({ children }) => {
   const docsContext = useContext(DocsContext);
-  const { parameters } = docsContext.storyById();
-  const content = children || parameters?.componentSubtitle;
+  const content = children || docsContext.storyById().parameters?.componentSubtitle;
 
   return content ? (
     <PureSubtitle className="sbdocs-subtitle sb-unstyled">{content}</PureSubtitle>

docs/snippets/common/storybook-mdx-template-with-prop.mdx.mdx

@@ -1,7 +1,7 @@
 ```mdx
 {/* DocumentationTemplate.mdx */}
 
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks';
+import { Meta, Title, Primary, Controls, Stories } from '@storybook/blocks';
 
 {/* 
   * 👇 The isTemplate property is required to tell Storybook that this is a template

docs/versions/latest.json

@@ -1 +1 @@
-{"version":"7.6.4","info":{"plain":"- Angular: Fix CSF Plugin - [#25098](https://github.com/storybookjs/storybook/pull/25098), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Viewport: Fix viewport dts files - [#25107](https://github.com/storybookjs/storybook/pull/25107), thanks [@kasperpeulen](https://github.com/kasperpeulen)!"}}
+{"version":"7.6.5","info":{"plain":"- Angular: Update Angular cli templates - [#25152](https://github.com/storybookjs/storybook/pull/25152), thanks [@Marklb](https://github.com/Marklb)!\n- Blocks: Fix Subtitle block for unattached docs pages - [#25157](https://github.com/storybookjs/storybook/pull/25157), thanks [@kripod](https://github.com/kripod)!\n- SvelteKit: Fix missing `$app` modules - [#25132](https://github.com/storybookjs/storybook/pull/25132), thanks [@paoloricciuti](https://github.com/paoloricciuti)!"}}

docs/versions/next.json

@@ -1,6 +1 @@
-{
-  "version": "8.0.0-alpha.0",
-  "info": {
-    "plain": "- Addon Viewport: Expose types for user parameter validation - [#24896](https://github.com/storybookjs/storybook/pull/24896), thanks [@piratetaco](https://github.com/piratetaco)!\n- Build: Remove unused/deprecated packages - [#24528](https://github.com/storybookjs/storybook/pull/24528), thanks [@ndelangen](https://github.com/ndelangen)!\n- Builder-Vite: use user's build.target - [#23123](https://github.com/storybookjs/storybook/pull/23123), thanks [@Hoishin](https://github.com/Hoishin)!\n- CLI: Remove `sb extract` command - [#24653](https://github.com/storybookjs/storybook/pull/24653), thanks [@ndelangen](https://github.com/ndelangen)!\n- Core: Improve project root detection logic - [#20791](https://github.com/storybookjs/storybook/pull/20791), thanks [@dobesv](https://github.com/dobesv)!\n- Core: Prebundling globalize the core-event sub paths - [#24976](https://github.com/storybookjs/storybook/pull/24976), thanks [@ndelangen](https://github.com/ndelangen)!\n- Core: Remove `storiesOf`-API - [#24655](https://github.com/storybookjs/storybook/pull/24655), thanks [@ndelangen](https://github.com/ndelangen)!\n- Core: StorybookConfig `stories`-field support type async function - [#21555](https://github.com/storybookjs/storybook/pull/21555), thanks [@imccausl](https://github.com/imccausl)!\n- Dependencies: Update Typescript - [#24970](https://github.com/storybookjs/storybook/pull/24970), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Dependencies: Upgrade monorepo to TS5 - [#24440](https://github.com/storybookjs/storybook/pull/24440), thanks [@ndelangen](https://github.com/ndelangen)!\n- Maintenance: Migrate `@storybook/preset-create-react-app` to strict TS - [#22395](https://github.com/storybookjs/storybook/pull/22395), thanks [@kuriacka](https://github.com/kuriacka)!\n- Manager: Enable refs filtered via `experimental_setFilter` - [#24211](https://github.com/storybookjs/storybook/pull/24211), thanks [@ndelangen](https://github.com/ndelangen)!\n- Mdx : Theme `fontCode` not applied consistently when writing MDX - [#23110](https://github.com/storybookjs/storybook/pull/23110), thanks [@gitstart-storybook](https://github.com/gitstart-storybook)!\n- UI: Bring back role main - [#24411](https://github.com/storybookjs/storybook/pull/24411), thanks [@cdedreuille](https://github.com/cdedreuille)!\n- UI: Fix IconButton not being aligned correctly in blocks - [#24529](https://github.com/storybookjs/storybook/pull/24529), thanks [@cdedreuille](https://github.com/cdedreuille)!\n- UI: Fix button size on controls - [#24737](https://github.com/storybookjs/storybook/pull/24737), thanks [@cdedreuille](https://github.com/cdedreuille)!\n- UI: Fix layout height - [#24370](https://github.com/storybookjs/storybook/pull/24370), thanks [@cdedreuille](https://github.com/cdedreuille)!\n- UI: Fix theming not updating - [#24399](https://github.com/storybookjs/storybook/pull/24399), thanks [@cdedreuille](https://github.com/cdedreuille)!\n- UI: Improved Button and IconButton - [#24266](https://github.com/storybookjs/storybook/pull/24266), thanks [@cdedreuille](https://github.com/cdedreuille)!\n- UI: Keep mobile drawer open on component selection - [#24258](https://github.com/storybookjs/storybook/pull/24258), thanks [@cdedreuille](https://github.com/cdedreuille)!\n- UI: Mobile truncate story name - [#24372](https://github.com/storybookjs/storybook/pull/24372), thanks [@cdedreuille](https://github.com/cdedreuille)!\n- UI: New icon library - [#24433](https://github.com/storybookjs/storybook/pull/24433), thanks [@cdedreuille](https://github.com/cdedreuille)!\n- UI: Replace Form.Button with the new Button component - [#24360](https://github.com/storybookjs/storybook/pull/24360), thanks [@cdedreuille](https://github.com/cdedreuille)!\n- UI: Screen reader announcing changes for expand/collapse button - [#24984](https://github.com/storybookjs/storybook/pull/24984), thanks [@wjdtjdgns](https://github.com/wjdtjdgns)!\n- UI: Upgrade manager to react 18 - [#24514](https://github.com/storybookjs/storybook/pull/24514), thanks [@ndelangen](https://github.com/ndelangen)!\n- UI: sidebar UI updates - [#24707](https://github.com/storybookjs/storybook/pull/24707), thanks [@cdedreuille](https://github.com/cdedreuille)!"
-  }
-}
+{"version":"8.0.0-alpha.3","info":{"plain":"- Addon-docs: Fix storybook MDX check - [#24696](https://github.com/storybookjs/storybook/pull/24696), thanks [@shilman](https://github.com/shilman)!\n- Addons: Remove unused postinstall package - [#25150](https://github.com/storybookjs/storybook/pull/25150), thanks [@shilman](https://github.com/shilman)!\n- Angular: Update Angular cli templates - [#25152](https://github.com/storybookjs/storybook/pull/25152), thanks [@Marklb](https://github.com/Marklb)!\n- Blocks: Fix Subtitle block for unattached docs pages - [#25157](https://github.com/storybookjs/storybook/pull/25157), thanks [@kripod](https://github.com/kripod)!\n- Ember: Fix @storybook/ember - [#23435](https://github.com/storybookjs/storybook/pull/23435), thanks [@francois2metz](https://github.com/francois2metz)!\n- Maintenance: Set engines field to Node.js >= 18 for packages - [#25105](https://github.com/storybookjs/storybook/pull/25105), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!"}}