Merge branch 'release-8-0' into norbert/remove-storyshots

CHANGELOG.prerelease.md

@@ -1,3 +1,11 @@
+## 7.5.0-alpha.6
+
+- Angular: Introduce argsToTemplate for property and event Bindings - [#24434](https://github.com/storybookjs/storybook/pull/24434), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- Controls: Fix select / multiselect when value contains multiple spaces - [#22334](https://github.com/storybookjs/storybook/pull/22334), thanks [@oxcened](https://github.com/oxcened)!
+- Next.js: Support rename font import - [#24406](https://github.com/storybookjs/storybook/pull/24406), thanks [@yoshi2no](https://github.com/yoshi2no)!
+- UI: Update ScrollArea with radix - [#24413](https://github.com/storybookjs/storybook/pull/24413), thanks [@cdedreuille](https://github.com/cdedreuille)!
+- Web-components: Add Lit3 support - [#24437](https://github.com/storybookjs/storybook/pull/24437), thanks [@shilman](https://github.com/shilman)!
+
 ## 7.5.0-alpha.5
 
 - Angular: Add CLI options (debugWebpack, webpackStatsJson, and more) - [#24388](https://github.com/storybookjs/storybook/pull/24388), thanks [@yannbf](https://github.com/yannbf)!

code/addons/a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",

code/addons/actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",

code/addons/backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",

code/addons/controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",

code/addons/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",

code/addons/essentials/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",

code/addons/gfm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mdx-gfm",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "GitHub Flavored Markdown in Storybook",
   "keywords": [
     "addon",

code/addons/highlight/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Highlight DOM nodes within your stories",
   "keywords": [
     "storybook-addons",

code/addons/interactions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-interactions",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",

code/addons/jest/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",

code/addons/links/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "addon",

code/addons/measure/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-measure",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Inspect layouts by visualizing the box model",
   "keywords": [
     "storybook-addons",

code/addons/outline/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-outline",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
   "keywords": [
     "storybook-addons",

code/addons/storysource/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "View a story’s source code to see how it works and paste into your app",
   "keywords": [
     "addon",

code/addons/themes/README.md

@@ -2,7 +2,7 @@
 
 Storybook Addon Themes can be used which between multiple themes for components inside the preview in [Storybook](https://storybook.js.org).
 
-![React Storybook Screenshot](https://user-images.githubusercontent.com/42671/98158421-dada2300-1ea8-11eb-8619-af1e7018e1ec.png)
+![React Storybook Screenshot](https://user-images.githubusercontent.com/18172605/274302488-77a39112-cdbe-4d16-9966-0d8e9e7e3399.gif)
 
 ## Usage
 

code/addons/themes/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-themes",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Switch between multiple themes for you components in Storybook",
   "keywords": [
     "css",
@@ -114,6 +114,6 @@
     "unsupportedFrameworks": [
       "react-native"
     ],
-    "icon": ""
+    "icon": "https://user-images.githubusercontent.com/18172605/264114587-e4b32190-a9b7-4afa-b739-c873fc0498a6.png"
   }
 }

code/addons/toolbars/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-toolbars",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Create your own toolbar items that control story rendering",
   "keywords": [
     "addon",

code/addons/viewport/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-viewport",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
   "keywords": [
     "addon",

code/builders/builder-manager/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-manager",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Storybook manager builder",
   "keywords": [
     "storybook"

code/builders/builder-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-vite",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "A plugin to run and build Storybooks with Vite",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme",
   "bugs": {

code/builders/builder-webpack5/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-webpack5",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"

code/deprecated/addons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addons",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Storybook addons store",
   "keywords": [
     "storybook"

code/deprecated/channel-postmessage/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channel-postmessage",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "",
   "keywords": [
     "storybook"

code/deprecated/channel-websocket/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channel-websocket",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "",
   "keywords": [
     "storybook"

code/deprecated/client-api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/client-api",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Storybook Client API",
   "keywords": [
     "storybook"

code/deprecated/core-client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-client",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"

code/deprecated/manager-api-shim/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/api",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Storybook Manager API (facade)",
   "keywords": [
     "storybook"

code/deprecated/preview-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preview-web",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "",
   "keywords": [
     "storybook"

code/deprecated/store/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/store",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "",
   "keywords": [
     "storybook"

code/frameworks/angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",

code/frameworks/angular/src/client/argsToTemplate.test.ts

@@ -0,0 +1,102 @@
+import { argsToTemplate, ArgsToTemplateOptions } from './argsToTemplate'; // adjust path
+
+describe('argsToTemplate', () => {
+  it('should correctly convert args to template string and exclude undefined values', () => {
+    const args: Record<string, any> = {
+      prop1: 'value1',
+      prop2: undefined,
+      prop3: 'value3',
+    };
+    const options: ArgsToTemplateOptions<keyof typeof args> = {};
+    const result = argsToTemplate(args, options);
+    expect(result).toBe('[prop1]="prop1" [prop3]="prop3"');
+  });
+
+  it('should include properties from include option', () => {
+    const args = {
+      prop1: 'value1',
+      prop2: 'value2',
+      prop3: 'value3',
+    };
+    const options: ArgsToTemplateOptions<keyof typeof args> = {
+      include: ['prop1', 'prop3'],
+    };
+    const result = argsToTemplate(args, options);
+    expect(result).toBe('[prop1]="prop1" [prop3]="prop3"');
+  });
+
+  it('should include non-undefined properties from include option', () => {
+    const args: Record<string, any> = {
+      prop1: 'value1',
+      prop2: 'value2',
+      prop3: undefined,
+    };
+    const options: ArgsToTemplateOptions<keyof typeof args> = {
+      include: ['prop1', 'prop3'],
+    };
+    const result = argsToTemplate(args, options);
+    expect(result).toBe('[prop1]="prop1"');
+  });
+
+  it('should exclude properties from exclude option', () => {
+    const args = {
+      prop1: 'value1',
+      prop2: 'value2',
+      prop3: 'value3',
+    };
+    const options: ArgsToTemplateOptions<keyof typeof args> = {
+      exclude: ['prop2'],
+    };
+    const result = argsToTemplate(args, options);
+    expect(result).toBe('[prop1]="prop1" [prop3]="prop3"');
+  });
+
+  it('should exclude properties from exclude option and undefined properties', () => {
+    const args: Record<string, any> = {
+      prop1: 'value1',
+      prop2: 'value2',
+      prop3: undefined,
+    };
+    const options: ArgsToTemplateOptions<keyof typeof args> = {
+      exclude: ['prop2'],
+    };
+    const result = argsToTemplate(args, options);
+    expect(result).toBe('[prop1]="prop1"');
+  });
+
+  it('should prioritize include over exclude when both options are given', () => {
+    const args = {
+      prop1: 'value1',
+      prop2: 'value2',
+      prop3: 'value3',
+    };
+    const options: ArgsToTemplateOptions<keyof typeof args> = {
+      include: ['prop1', 'prop2'],
+      exclude: ['prop2', 'prop3'],
+    };
+    const result = argsToTemplate(args, options);
+    expect(result).toBe('[prop1]="prop1" [prop2]="prop2"');
+  });
+
+  it('should work when neither include nor exclude options are given', () => {
+    const args = {
+      prop1: 'value1',
+      prop2: 'value2',
+    };
+    const options: ArgsToTemplateOptions<keyof typeof args> = {};
+    const result = argsToTemplate(args, options);
+    expect(result).toBe('[prop1]="prop1" [prop2]="prop2"');
+  });
+
+  it('should bind events correctly when value is a function', () => {
+    const args = { event1: () => {}, event2: () => {} };
+    const result = argsToTemplate(args, {});
+    expect(result).toEqual('(event1)="event1($event)" (event2)="event2($event)"');
+  });
+
+  it('should mix properties and events correctly', () => {
+    const args = { input: 'Value1', event1: () => {} };
+    const result = argsToTemplate(args, {});
+    expect(result).toEqual('[input]="input" (event1)="event1($event)"');
+  });
+});

code/frameworks/angular/src/client/argsToTemplate.ts

@@ -0,0 +1,74 @@
+/**
+ * Options for controlling the behavior of the argsToTemplate function.
+ *
+ * @template T The type of the keys in the target object.
+ */
+export interface ArgsToTemplateOptions<T> {
+  /**
+   * An array of keys to specifically include in the output.
+   * If provided, only the keys from this array will be included in the output,
+   * irrespective of the `exclude` option. Undefined values will still be excluded from the output.
+   */
+  include?: Array<T>;
+  /**
+   * An array of keys to specifically exclude from the output.
+   * If provided, these keys will be omitted from the output. This option is
+   * ignored if the `include` option is also provided
+   */
+  exclude?: Array<T>;
+}
+
+/**
+ * Converts an object of arguments to a string of property and event bindings and excludes undefined values.
+ * Why? Because Angular treats undefined values in property bindings as an actual value
+ * and does not apply the default value of the property as soon as the binding is set.
+ * This feels counter-intuitive and is a common source of bugs in stories.
+ * @example
+ * ```ts
+ * // component.ts
+ *ㅤ@Component({ selector: 'example' })
+ *  export class ExampleComponent {
+ *   ㅤ@Input() input1: string = 'Default Input1';
+ *   ㅤ@Input() input2: string = 'Default Input2';
+ *   ㅤ@Output() click = new EventEmitter();
+ *  }
+ *
+ * // component.stories.ts
+ * import { argsToTemplate } from '@storybook/angular';
+ * export const Input1: Story = {
+ *  render: (args) => ({
+ *    props: args,
+ *    // Problem1: <example [input1]="input1" [input2]="input2" (click)="click($event)"></example>
+ *    // This will set input2 to undefined and the internal default value will not be used.
+ *    // Problem2: <example [input1]="input1" (click)="click($event)"></example>
+ *    // The default value of input2 will be used, but it is not overridable by the user via controls.
+ *    // Solution: Now the controls will be applicable to both input1 and input2, and the default values will be used if the user does not override them.
+ *    template: `<example ${argsToTemplate(args)}"></example>`,
+ *  }),
+ *  args: {
+ *    // In this Story, we want to set the input1 property, and the internal default property of input2 should be used.
+ *    input1: 'Input 1',
+ *    click: { action: 'clicked' },
+ *  },
+ *};
+ * ```
+ */
+export function argsToTemplate<A extends Record<string, any>>(
+  args: A,
+  options: ArgsToTemplateOptions<keyof A> = {}
+) {
+  const includeSet = options.include ? new Set(options.include) : null;
+  const excludeSet = options.exclude ? new Set(options.exclude) : null;
+
+  return Object.entries(args)
+    .filter(([key]) => args[key] !== undefined)
+    .filter(([key]) => {
+      if (includeSet) return includeSet.has(key);
+      if (excludeSet) return !excludeSet.has(key);
+      return true;
+    })
+    .map(([key, value]) =>
+      typeof value === 'function' ? `(${key})="${key}($event)"` : `[${key}]="${key}"`
+    )
+    .join(' ');
+}

code/frameworks/angular/src/client/index.ts

@@ -10,6 +10,7 @@ export * from './public-types';
 export type { StoryFnAngularReturnType as IStory } from './types';
 
 export { moduleMetadata, componentWrapperDecorator, applicationConfig } from './decorators';
+export { argsToTemplate } from './argsToTemplate';
 
 // optimization: stop HMR propagation in webpack
 if (typeof module !== 'undefined') module?.hot?.decline();

code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.stories.ts

@@ -1,24 +1,29 @@
-import { Args } from '@storybook/angular';
+import { Meta, StoryObj, argsToTemplate } from '@storybook/angular';
 import { DocButtonComponent } from './doc-button.component';
 
-export default {
+const meta: Meta<DocButtonComponent<any>> = {
   component: DocButtonComponent,
 };
 
-export const Basic = (args: Args) => ({
-  props: args,
-});
-Basic.args = { label: 'Args test', isDisabled: false };
-Basic.ArgTypes = {
-  theDefaultValue: {
-    table: {
-      defaultValue: { summary: 'Basic default value' },
+export default meta;
+
+type Story = StoryObj<DocButtonComponent<any>>;
+
+export const Basic: Story = {
+  args: { label: 'Args test', isDisabled: false },
+  argTypes: {
+    theDefaultValue: {
+      table: {
+        defaultValue: { summary: 'Basic default value' },
+      },
     },
   },
 };
 
-export const WithTemplate = (args: Args) => ({
-  props: args,
-  template: '<my-button [label]="label" [appearance]="appearance"></my-button>',
-});
-WithTemplate.args = { label: 'Template test', appearance: 'primary' };
+export const WithTemplate: Story = {
+  args: { label: 'Template test', appearance: 'primary' },
+  render: (args) => ({
+    props: args,
+    template: `<my-button ${argsToTemplate(args)}></my-button>`,
+  }),
+};

code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.stories.ts

@@ -1,14 +1,19 @@
+import { Meta, StoryObj } from '@storybook/angular';
 import { DocDirective } from './doc-directive.directive';
 
-export default {
+const meta: Meta<DocDirective> = {
   component: DocDirective,
 };
 
-const modules = {
-  declarations: [DocDirective],
-};
+export default meta;
 
-export const Basic = () => ({
-  moduleMetadata: modules,
-  template: '<div docDirective [hasGrayBackground]="true"><h1>DocDirective</h1></div>',
-});
+type Story = StoryObj<DocDirective>;
+
+export const Basic: Story = {
+  render: () => ({
+    moduleMetadata: {
+      declarations: [DocDirective],
+    },
+    template: '<div docDirective [hasGrayBackground]="true"><h1>DocDirective</h1></div>',
+  }),
+};

code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.stories.ts

@@ -1,14 +1,19 @@
+import { Meta, StoryObj } from '@storybook/angular';
 import { DocInjectableService } from './doc-injectable.service';
 
-export default {
+const meta: Meta<DocInjectableService> = {
   component: DocInjectableService,
 };
 
-const modules = {
-  provider: [DocInjectableService],
-};
+export default meta;
 
-export const Basic = () => ({
-  moduleMetadata: modules,
-  template: '<div><h1>DocInjectable</h1></div>',
-});
+type Story = StoryObj<DocInjectableService>;
+
+export const Basic: Story = {
+  render: () => ({
+    moduleMetadata: {
+      providers: [DocInjectableService],
+    },
+    template: '<div><h1>DocInjectable</h1></div>',
+  }),
+};

code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.stories.ts

@@ -1,14 +1,19 @@
+import { Meta, StoryObj } from '@storybook/angular';
 import { DocPipe } from './doc-pipe.pipe';
 
-export default {
+const meta: Meta<DocPipe> = {
   component: DocPipe,
 };
 
-const modules = {
-  declarations: [DocPipe],
-};
+export default meta;
 
-export const Basic = () => ({
-  moduleMetadata: modules,
-  template: `<div><h1>{{ 'DocPipe' | docPipe }}</h1></div>`,
-});
+type Story = StoryObj<DocPipe>;
+
+export const Basic: Story = {
+  render: () => ({
+    moduleMetadata: {
+      declarations: [DocPipe],
+    },
+    template: `<div><h1>{{ 'DocPipe' | docPipe }}</h1></div>`,
+  }),
+};

code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts

@@ -1,8 +1,8 @@
 import { FormsModule } from '@angular/forms';
-import { Meta, StoryFn, moduleMetadata } from '@storybook/angular';
+import { Meta, StoryFn, StoryObj, moduleMetadata } from '@storybook/angular';
 import { CustomCvaComponent } from './custom-cva.component';
 
-export default {
+const meta: Meta<CustomCvaComponent> = {
   // title: 'Basics / Angular forms / ControlValueAccessor',
   component: CustomCvaComponent,
   decorators: [
@@ -17,11 +17,16 @@ export default {
   ],
 } as Meta;
 
-export const SimpleInput: StoryFn = () => ({
-  props: {
-    ngModel: 'Type anything',
-    ngModelChange: () => {},
-  },
-});
+export default meta;
 
-SimpleInput.storyName = 'Simple input';
+type Story = StoryObj<CustomCvaComponent>;
+
+export const SimpleInput: Story = {
+  name: 'Simple input',
+  render: () => ({
+    props: {
+      ngModel: 'Type anything',
+      ngModelChange: () => {},
+    },
+  }),
+};

code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selectors.component.stories.ts

@@ -1,8 +1,13 @@
+import { Meta, StoryObj } from '@storybook/angular';
 import { AttributeSelectorComponent } from './attribute-selector.component';
 
-export default {
+const meta: Meta<AttributeSelectorComponent> = {
   // title: 'Basics / Component / With Complex Selectors',
   component: AttributeSelectorComponent,
 };
 
-export const AttributeSelectors = {};
+export default meta;
+
+type Story = StoryObj<AttributeSelectorComponent>;
+
+export const AttributeSelectors: Story = {};

code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/angular';
+import { Meta, StoryObj } from '@storybook/angular';
 import {
   EnumsComponent,
   EnumNumeric,
@@ -6,19 +6,22 @@ import {
   EnumStringValues,
 } from './enums.component';
 
-export default {
+const meta: Meta<EnumsComponent> = {
   // title: 'Basics / Component / With Enum Types',
   component: EnumsComponent,
-} as Meta;
-
-export const Basic: StoryFn = (args) => ({
-  props: args,
-});
-Basic.args = {
-  unionType: 'union a',
-  aliasedUnionType: 'Type Alias 1',
-  enumNumeric: EnumNumeric.FIRST,
-  enumNumericInitial: EnumNumericInitial.UNO,
-  enumStrings: EnumStringValues.PRIMARY,
-  enumAlias: EnumNumeric.FIRST,
+};
+
+export default meta;
+
+type Story = StoryObj<EnumsComponent>;
+
+export const Basic: Story = {
+  args: {
+    unionType: 'Union A',
+    aliasedUnionType: 'Type Alias 1',
+    enumNumeric: EnumNumeric.FIRST,
+    enumNumericInitial: EnumNumericInitial.UNO,
+    enumStrings: EnumStringValues.PRIMARY,
+    enumAlias: EnumNumeric.FIRST,
+  },
 };

code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.stories.ts

@@ -1,12 +1,15 @@
+import { Meta, StoryObj } from '@storybook/angular';
 import { BaseButtonComponent } from './base-button.component';
 
-export default {
+const meta: Meta<BaseButtonComponent> = {
   // title: 'Basics / Component / With Inheritance',
   component: BaseButtonComponent,
 };
 
-export const BaseButton = () => ({
-  props: {
+export default meta;
+
+export const BaseButton: StoryObj<BaseButtonComponent> = {
+  args: {
     label: 'this is label',
   },
-});
+};

code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.stories.ts

@@ -1,13 +1,18 @@
+import { Meta, StoryObj } from '@storybook/angular';
 import { IconButtonComponent } from './icon-button.component';
 
-export default {
+const meta: Meta<IconButtonComponent> = {
   // title: 'Basics / Component / With Inheritance',
   component: IconButtonComponent,
 };
 
-export const IconButton = () => ({
-  props: {
+export default meta;
+
+type Story = StoryObj<IconButtonComponent>;
+
+export const IconButton: Story = {
+  args: {
     icon: 'this is icon',
     label: 'this is label',
   },
-});
+};

code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts

@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { componentWrapperDecorator, Meta, StoryFn } from '@storybook/angular';
+import { componentWrapperDecorator, Meta, StoryObj } from '@storybook/angular';
 
 @Component({
   selector: 'sb-button',
@@ -17,7 +17,7 @@ class SbButtonComponent {
   color = '#5eadf5';
 }
 
-export default {
+const meta: Meta<SbButtonComponent> = {
   // title: 'Basics / Component / With ng-content / Button with different contents',
   // Implicitly declares the component to Angular
   // This will be the component described by the addon docs
@@ -35,24 +35,24 @@ export default {
   },
 } as Meta;
 
+export default meta;
+
+type Story = StoryObj<SbButtonComponent>;
+
 // By default storybook uses the default export component if no template or component is defined in the story
 // So Storybook nests the component twice because it is first added by the componentWrapperDecorator.
-export const AlwaysDefineTemplateOrComponent: StoryFn = () => ({});
+export const AlwaysDefineTemplateOrComponent: Story = {};
 
-export const EmptyButton: StoryFn = () => ({
-  template: '',
-});
-
-export const WithDynamicContentAndArgs: StoryFn = (args) => ({
-  template: `${args['content']}`,
-});
-WithDynamicContentAndArgs.argTypes = {
-  content: { control: 'text' },
+export const EmptyButton: Story = {
+  render: () => ({
+    template: '',
+  }),
 };
-WithDynamicContentAndArgs.args = { content: 'My button text' };
 
-export const InH1: StoryFn = () => ({
-  template: 'My button in h1',
-});
-InH1.decorators = [componentWrapperDecorator((story) => `<h1>${story}</h1>`)];
-InH1.storyName = 'In <h1>';
+export const InH1: Story = {
+  render: () => ({
+    template: 'My button in h1',
+  }),
+  decorators: [componentWrapperDecorator((story) => `<h1>${story}</h1>`)],
+  name: 'In <h1>',
+};

code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 
-import { Meta, StoryFn } from '@storybook/angular/';
+import { Meta, StoryObj } from '@storybook/angular';
 
 @Component({
   selector: 'storybook-with-ng-content',
@@ -9,21 +9,29 @@ import { Meta, StoryFn } from '@storybook/angular/';
 })
 class WithNgContentComponent {}
 
-export default {
+const meta: Meta<WithNgContentComponent> = {
   // title: 'Basics / Component / With ng-content / Simple',
   component: WithNgContentComponent,
 } as Meta;
 
-export const OnlyComponent: StoryFn = () => ({});
+export default meta;
 
-export const Default: StoryFn = () => ({
-  template: `<storybook-with-ng-content><h1>This is rendered in ng-content</h1></storybook-with-ng-content>`,
-});
+type Story = StoryObj<WithNgContentComponent & { content: string }>;
 
-export const WithDynamicContentAndArgs: StoryFn = (args) => ({
-  template: `<storybook-with-ng-content><h1>${args['content']}</h1></storybook-with-ng-content>`,
-});
-WithDynamicContentAndArgs.argTypes = {
-  content: { control: 'text' },
+export const OnlyComponent: Story = {};
+
+export const Default: Story = {
+  render: () => ({
+    template: `<storybook-with-ng-content><h1>This is rendered in ng-content</h1></storybook-with-ng-content>`,
+  }),
+};
+
+export const WithDynamicContentAndArgs: Story = {
+  render: (args) => ({
+    template: `<storybook-with-ng-content><h1>${args['content']}</h1></storybook-with-ng-content>`,
+  }),
+  args: { content: 'Default content' },
+  argTypes: {
+    content: { control: 'text' },
+  },
 };
-WithDynamicContentAndArgs.args = { content: 'Default content' };

code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts

@@ -27,7 +27,7 @@ class OnDestroyComponent implements OnInit, OnDestroy {
   }
 }
 
-export default {
+const meta: Meta<OnDestroyComponent> = {
   // title: 'Basics / Component / with ngOnDestroy',
   component: OnDestroyComponent,
   parameters: {
@@ -36,4 +36,8 @@ export default {
   },
 } as Meta;
 
-export const SimpleComponent: StoryObj = {};
+export default meta;
+
+type Story = StoryObj<OnDestroyComponent>;
+
+export const SimpleComponent: Story = {};

code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts

@@ -1,7 +1,7 @@
-import { Meta, StoryFn } from '@storybook/angular';
+import { Meta, StoryObj } from '@storybook/angular';
 import { OnPushBoxComponent } from './on-push-box.component';
 
-export default {
+const meta: Meta<OnPushBoxComponent> = {
   // title: 'Basics / Component / With OnPush strategy',
   component: OnPushBoxComponent,
   argTypes: {
@@ -12,10 +12,12 @@ export default {
     word: 'The text',
     bgColor: '#FFF000',
   },
-} as Meta;
+};
 
-export const ClassSpecifiedComponentWithOnPushAndArgs: StoryFn = (args) => ({
-  props: args,
-});
-ClassSpecifiedComponentWithOnPushAndArgs.storyName =
-  'Class-specified component with OnPush and Args';
+export default meta;
+
+type Story = StoryObj<OnPushBoxComponent>;
+
+export const ClassSpecifiedComponentWithOnPushAndArgs: Story = {
+  name: 'Class-specified component with OnPush and Args',
+};

code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts

@@ -1,9 +1,9 @@
-import { Meta, StoryFn, moduleMetadata } from '@storybook/angular';
+import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
 
 import { CustomPipePipe } from './custom.pipe';
 import { WithPipeComponent } from './with-pipe.component';
 
-export default {
+const meta: Meta<WithPipeComponent> = {
   // title: 'Basics / Component / With Pipes',
   component: WithPipeComponent,
   decorators: [
@@ -11,21 +11,26 @@ export default {
       declarations: [CustomPipePipe],
     }),
   ],
-} as Meta;
+};
 
-export const Simple: StoryFn = () => ({
-  props: {
-    field: 'foobar',
+export default meta;
+
+type Story = StoryObj<WithPipeComponent>;
+
+export const Simple: Story = {
+  render: () => ({
+    props: {
+      field: 'foobar',
+    },
+  }),
+};
+
+export const WithArgsStory: Story = {
+  name: 'With args',
+  argTypes: {
+    field: { control: 'text' },
+  },
+  args: {
+    field: 'Foo Bar',
   },
-});
-
-export const WithArgsStory: StoryFn = (args) => ({
-  props: args,
-});
-WithArgsStory.storyName = 'With args';
-WithArgsStory.argTypes = {
-  field: { control: 'text' },
-};
-WithArgsStory.args = {
-  field: 'Foo Bar',
 };

code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts

@@ -1,26 +1,30 @@
-import { Args } from '@storybook/angular';
+import { Args, Meta, StoryObj } from '@storybook/angular';
 import { DiComponent } from './di.component';
 
-export default {
+const meta: Meta<DiComponent> = {
   // title: 'Basics / Component / With Provider',
   component: DiComponent,
 };
 
-export const InputsAndInjectDependencies = () => ({
-  props: {
+export default meta;
+
+type Story = StoryObj<DiComponent>;
+
+export const InputsAndInjectDependencies: Story = {
+  render: () => ({
+    props: {
+      title: 'Component dependencies',
+    },
+  }),
+  name: 'inputs and inject dependencies',
+};
+
+export const InputsAndInjectDependenciesWithArgs: Story = {
+  name: 'inputs and inject dependencies with args',
+  argTypes: {
+    title: { control: 'text' },
+  },
+  args: {
     title: 'Component dependencies',
   },
-});
-
-InputsAndInjectDependencies.storyName = 'inputs and inject dependencies';
-
-export const InputsAndInjectDependenciesWithArgs = (args: Args) => ({
-  props: args,
-});
-InputsAndInjectDependenciesWithArgs.storyName = 'inputs and inject dependencies with args';
-InputsAndInjectDependenciesWithArgs.argTypes = {
-  title: { control: 'text' },
-};
-InputsAndInjectDependenciesWithArgs.args = {
-  title: 'Component dependencies',
 };

code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts

@@ -1,10 +1,15 @@
+import { Meta, StoryObj } from '@storybook/angular';
 import { StyledComponent } from './styled.component';
 
-export default {
+const meta: Meta = {
   // title: 'Basics / Component / With StyleUrls',
   component: StyledComponent,
 };
 
-export const ComponentWithStyles = () => ({});
+export default meta;
 
-ComponentWithStyles.storyName = 'Component with styles';
+type Story = StoryObj<StyledComponent>;
+
+export const ComponentWithStyles: Story = {
+  name: 'Component with styles',
+};

code/frameworks/angular/template/stories/basics/component-with-template/template.component.ts

@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-template',
+  imports: [CommonModule],
+  template: `<div (click)="event($event)">
+    Label: {{ label }}
+    <br />
+    Label2: {{ label2 }}
+    <br />
+    <button (click)="inc()">+</button>
+  </div>`,
+  styles: [],
+  standalone: true,
+})
+export class Template {
+  @Input() label = 'default label';
+
+  @Input() label2 = 'default label2';
+
+  @Output() changed = new EventEmitter<string>();
+
+  inc() {
+    this.changed.emit('Increase');
+  }
+}

code/frameworks/angular/template/stories/basics/component-with-template/template.stories.ts

@@ -0,0 +1,24 @@
+import { Meta, StoryObj, argsToTemplate } from '@storybook/angular';
+import { Template } from './template.component';
+
+const meta: Meta<Template> = {
+  component: Template,
+};
+
+export default meta;
+
+type Story = StoryObj<Template>;
+
+export const Default: Story = {
+  render: (args) => ({
+    props: args,
+    template: `<app-template ${argsToTemplate(args)}></app-template>`,
+  }),
+};
+
+export const SetOneInput: Story = {
+  ...Default,
+  args: {
+    label: 'Label Example 1',
+  },
+};

code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts

@@ -1,8 +1,8 @@
 import { OnInit, Type, Component, Injector, Input } from '@angular/core';
-import { StoryFn, Meta, componentWrapperDecorator, moduleMetadata } from '@storybook/angular';
+import { Meta, componentWrapperDecorator, moduleMetadata, StoryObj } from '@storybook/angular';
 import { WithoutSelectorComponent, WITHOUT_SELECTOR_DATA } from './without-selector.component';
 
-export default {
+const meta: Meta<WithoutSelectorComponent> = {
   // title: 'Basics / Component / without selector / Custom wrapper *NgComponentOutlet',
   component: WithoutSelectorComponent,
   decorators: [
@@ -12,6 +12,10 @@ export default {
   ],
 } as Meta;
 
+export default meta;
+
+type Story = StoryObj<WithoutSelectorComponent>;
+
 // Advanced example with custom *ngComponentOutlet
 
 @Component({
@@ -51,23 +55,22 @@ class NgComponentOutletWrapperComponent implements OnInit {
 
 // Live changing of args by controls does not work at the moment. When changing args storybook does not fully
 // reload and therefore does not take into account the change of provider.
-export const WithCustomNgComponentOutletWrapper: StoryFn = (args) => ({
-  props: args,
-});
-WithCustomNgComponentOutletWrapper.storyName = 'Custom wrapper *NgComponentOutlet';
-WithCustomNgComponentOutletWrapper.argTypes = {
-  name: { control: 'text' },
-  color: { control: 'color' },
-};
-WithCustomNgComponentOutletWrapper.args = { name: 'Color', color: 'green' };
-WithCustomNgComponentOutletWrapper.decorators = [
-  moduleMetadata({
-    declarations: [NgComponentOutletWrapperComponent],
-  }),
-  componentWrapperDecorator(NgComponentOutletWrapperComponent, (args) => ({
-    name: args.name,
+export const WithCustomNgComponentOutletWrapper: Story = {
+  name: 'Custom wrapper *NgComponentOutlet',
+  argTypes: {
+    name: { control: 'text' },
+    color: { control: 'color' },
+  },
+  args: { name: 'Color', color: 'green' },
+  decorators: [
+    moduleMetadata({
+      declarations: [NgComponentOutletWrapperComponent],
+    }),
+    componentWrapperDecorator(NgComponentOutletWrapperComponent, (args) => ({
+      name: args.name,
 
-    color: args['color'],
-    componentOutlet: WithoutSelectorComponent,
-  })),
-];
+      color: args['color'],
+      componentOutlet: WithoutSelectorComponent,
+    })),
+  ],
+};

code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts

@@ -1,71 +0,0 @@
-import {
-  AfterViewInit,
-  ComponentFactoryResolver,
-  Type,
-  Component,
-  Input,
-  ViewChild,
-  ViewContainerRef,
-} from '@angular/core';
-import { StoryFn, Meta, componentWrapperDecorator, moduleMetadata } from '@storybook/angular';
-
-import { WithoutSelectorComponent } from './without-selector.component';
-
-export default {
-  // title: 'Basics / Component / without selector / Custom wrapper ComponentFactoryResolver',
-  component: WithoutSelectorComponent,
-  decorators: [
-    moduleMetadata({
-      entryComponents: [WithoutSelectorComponent],
-    }),
-  ],
-} as Meta;
-
-// Advanced example with custom ComponentFactoryResolver
-
-@Component({ selector: 'component-factory-wrapper', template: '' })
-class ComponentFactoryWrapperComponent implements AfterViewInit {
-  @ViewChild('dynamicInsert', { read: ViewContainerRef }) dynamicInsert: any;
-
-  @Input()
-  componentOutlet?: Type<unknown>;
-
-  @Input()
-  args: any;
-
-  constructor(
-    private viewContainerRef: ViewContainerRef,
-    private componentFactoryResolver: ComponentFactoryResolver
-  ) {}
-
-  ngAfterViewInit() {
-    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
-      this.componentOutlet!
-    );
-    const containerRef = this.viewContainerRef;
-    containerRef.clear();
-    const dynamicComponent = containerRef.createComponent(componentFactory);
-    Object.assign(dynamicComponent.instance as any, this.args);
-  }
-}
-
-// Live changing of args by controls does not work at the moment. When changing args storybook does not fully
-// reload and therefore does not take into account the change of provider.
-export const WithComponentFactoryResolver: StoryFn = (args) => ({
-  props: args,
-});
-WithComponentFactoryResolver.storyName = 'Custom wrapper ComponentFactoryResolver';
-WithComponentFactoryResolver.argTypes = {
-  name: { control: 'text' },
-  color: { control: 'color' },
-};
-WithComponentFactoryResolver.args = { name: 'Color', color: 'chartreuse' };
-WithComponentFactoryResolver.decorators = [
-  moduleMetadata({
-    declarations: [ComponentFactoryWrapperComponent],
-  }),
-  componentWrapperDecorator(ComponentFactoryWrapperComponent, ({ args }) => ({
-    args,
-    componentOutlet: WithoutSelectorComponent,
-  })),
-];

code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.stories.ts

@@ -1,7 +1,7 @@
-import { StoryFn, Meta, moduleMetadata } from '@storybook/angular';
+import { StoryObj, Meta, moduleMetadata } from '@storybook/angular';
 import { WithoutSelectorComponent, WITHOUT_SELECTOR_DATA } from './without-selector.component';
 
-export default {
+const meta: Meta<WithoutSelectorComponent> = {
   // title: 'Basics / Component / without selector',
   component: WithoutSelectorComponent,
   decorators: [
@@ -11,20 +11,26 @@ export default {
   ],
 } as Meta;
 
-export const SimpleComponent: StoryFn = () => ({});
+export default meta;
+
+type Story = StoryObj<WithoutSelectorComponent>;
+
+export const SimpleComponent: Story = {};
 
 // Live changing of args by controls does not work for now. When changing args storybook does not fully
 // reload and therefore does not take into account the change of provider.
-export const WithInjectionTokenAndArgs: StoryFn = (args) => ({
-  props: args,
-  moduleMetadata: {
-    providers: [
-      { provide: WITHOUT_SELECTOR_DATA, useValue: { color: args['color'], name: args['name'] } },
-    ],
+export const WithInjectionTokenAndArgs: StoryObj = {
+  render: (args) => ({
+    props: args,
+    moduleMetadata: {
+      providers: [
+        { provide: WITHOUT_SELECTOR_DATA, useValue: { color: args['color'], name: args['name'] } },
+      ],
+    },
+  }),
+  argTypes: {
+    name: { control: 'text' },
+    color: { control: 'color' },
   },
-});
-WithInjectionTokenAndArgs.argTypes = {
-  name: { control: 'text' },
-  color: { control: 'color' },
+  args: { name: 'Color', color: 'red' },
 };
-WithInjectionTokenAndArgs.args = { name: 'Color', color: 'red' };

code/frameworks/angular/template/stories/basics/ng-module/import-module-chip.stories.ts

@@ -1,23 +1,25 @@
-import { StoryFn, Meta, moduleMetadata } from '@storybook/angular';
+import { StoryFn, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { ChipsModule } from './angular-src/chips.module';
 import { ChipComponent } from './angular-src/chip.component';
 
-export default {
+const meta: Meta<ChipComponent> = {
   component: ChipComponent,
   decorators: [
     moduleMetadata({
       imports: [ChipsModule],
     }),
   ],
-} as Meta;
-
-export const Chip: StoryFn = (args) => ({
-  props: args,
-});
-
-Chip.args = {
-  displayText: 'Chip',
 };
-Chip.argTypes = {
-  removeClicked: { action: 'Remove icon clicked' },
+
+export default meta;
+
+type Story = StoryObj<ChipComponent>;
+
+export const Chip: Story = {
+  args: {
+    displayText: 'Chip',
+  },
+  argTypes: {
+    removeClicked: { action: 'Remove icon clicked' },
+  },
 };

code/frameworks/angular/template/stories/basics/ng-module/import-module-for-root.stories.ts

@@ -1,9 +1,9 @@
-import { StoryFn, Meta, moduleMetadata } from '@storybook/angular';
+import { StoryFn, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { ChipsModule } from './angular-src/chips.module';
 import { ChipsGroupComponent } from './angular-src/chips-group.component';
 import { CHIP_COLOR } from './angular-src/chip-color.token';
 
-export default {
+const meta: Meta<ChipsGroupComponent> = {
   // title: 'Basics / NgModule / forRoot() pattern',
   component: ChipsGroupComponent,
   decorators: [
@@ -27,24 +27,26 @@ export default {
     removeChipClick: { action: 'Remove chip' },
     removeAllChipsClick: { action: 'Remove all chips clicked' },
   },
-} as Meta;
+};
 
-const Template = (): StoryFn => (args) => ({
-  props: args,
-});
+export default meta;
 
-export const Base = Template();
-Base.storyName = 'Chips group';
+type Story = StoryObj<ChipsGroupComponent>;
 
-export const WithCustomProvider = Template();
-WithCustomProvider.decorators = [
-  moduleMetadata({
-    providers: [
-      {
-        provide: CHIP_COLOR,
-        useValue: 'yellow',
-      },
-    ],
-  }),
-];
-WithCustomProvider.storyName = 'Chips group with overridden provider';
+export const Base: Story = {
+  name: 'Chips group',
+};
+
+export const WithCustomProvider: Story = {
+  decorators: [
+    moduleMetadata({
+      providers: [
+        {
+          provide: CHIP_COLOR,
+          useValue: 'yellow',
+        },
+      ],
+    }),
+  ],
+  name: 'Chips group with overridden provider',
+};

code/frameworks/angular/template/stories/basics/ng-module/import-module.stories.ts

@@ -1,8 +1,8 @@
-import { StoryFn, Meta, moduleMetadata } from '@storybook/angular';
+import { StoryFn, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { ChipsModule } from './angular-src/chips.module';
 import { ChipsGroupComponent } from './angular-src/chips-group.component';
 
-export default {
+const meta: Meta<ChipsGroupComponent> = {
   // title: 'Basics / NgModule / Module with multiple component',
   component: ChipsGroupComponent,
   decorators: [
@@ -10,26 +10,27 @@ export default {
       imports: [ChipsModule],
     }),
   ],
-} as Meta;
-
-export const ChipsGroup: StoryFn = (args) => ({
-  props: args,
-});
-
-ChipsGroup.args = {
-  chips: [
-    {
-      id: 1,
-      text: 'Chip 1',
-    },
-    {
-      id: 2,
-      text: 'Chip 2',
-    },
-  ],
 };
 
-ChipsGroup.argTypes = {
-  removeChipClick: { action: 'Remove chip' },
-  removeAllChipsClick: { action: 'Remove all chips clicked' },
+export default meta;
+
+type Story = StoryObj<ChipsGroupComponent>;
+
+export const ChipsGroup: Story = {
+  args: {
+    chips: [
+      {
+        id: 1,
+        text: 'Chip 1',
+      },
+      {
+        id: 2,
+        text: 'Chip 2',
+      },
+    ],
+  },
+  argTypes: {
+    removeChipClick: { action: 'Remove chip' },
+    removeAllChipsClick: { action: 'Remove all chips clicked' },
+  },
 };

code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts

@@ -1,10 +1,16 @@
 // your-component.stories.ts
 
-import { Args, Meta, Story, componentWrapperDecorator, moduleMetadata } from '@storybook/angular';
+import {
+  Args,
+  Meta,
+  StoryObj,
+  componentWrapperDecorator,
+  moduleMetadata,
+} from '@storybook/angular';
 import ChildComponent from './child.component';
 import ParentComponent from './parent.component';
 
-export default {
+const meta: Meta<ChildComponent> = {
   // title: 'Core / Decorators / ComponentWrapperDecorator',
   component: ChildComponent,
   decorators: [
@@ -14,72 +20,79 @@ export default {
   ],
   args: { childText: 'Child text', childPrivateText: 'Child private text' },
   argTypes: { onClickChild: { action: 'onClickChild' } },
-} as Meta;
+};
 
-export const WithTemplate = (args: Args) => ({
-  template: `Child Template`,
-  props: {
-    ...args,
-  },
-});
+export default meta;
 
-export const WithComponent = (args: Args) => ({
-  props: {
-    ...args,
-  },
-});
+type Story = StoryObj<ChildComponent>;
 
-export const WithLegacyComponent = (args: Args) => ({
-  component: ChildComponent,
-  props: {
-    ...args,
-  },
-});
+export const WithTemplate: Story = {
+  render: (args: Args) => ({
+    template: `Child Template`,
+    props: args,
+  }),
+};
 
-export const WithComponentWrapperDecorator = (args: Args) => ({
-  component: ChildComponent,
-  props: {
-    ...args,
-  },
-});
-WithComponentWrapperDecorator.decorators = [
-  moduleMetadata({ declarations: [ParentComponent] }),
-  componentWrapperDecorator(ParentComponent),
-];
+export const WithComponent: Story = {};
 
-export const WithComponentWrapperDecoratorAndProps = (args: Args) => ({
-  component: ChildComponent,
-  props: {
-    ...args,
-  },
-});
-WithComponentWrapperDecoratorAndProps.decorators = [
-  moduleMetadata({ declarations: [ParentComponent] }),
-  componentWrapperDecorator(ParentComponent, {
-    parentText: 'Parent text',
-    onClickParent: () => {
-      console.log('onClickParent');
+export const WithLegacyComponent: Story = {
+  render: (args: Args) => ({
+    component: ChildComponent,
+    props: args,
+  }),
+};
+
+export const WithComponentWrapperDecorator: Story = {
+  render: (args: Args) => ({
+    component: ChildComponent,
+    props: args,
+  }),
+  decorators: [
+    moduleMetadata({ declarations: [ParentComponent] }),
+    componentWrapperDecorator(ParentComponent),
+  ],
+};
+
+export const WithComponentWrapperDecoratorAndProps: Story = {
+  render: (args: Args) => ({
+    component: ChildComponent,
+    props: {
+      ...args,
     },
   }),
-];
-
-export const WithComponentWrapperDecoratorAndArgs = (args: Args) => ({
-  component: ChildComponent,
-  props: {
-    ...args,
-  },
-});
-WithComponentWrapperDecoratorAndArgs.argTypes = {
-  parentText: { control: { type: 'text' } },
-  onClickParent: { action: 'onClickParent' },
+  decorators: [
+    moduleMetadata({ declarations: [ParentComponent] }),
+    componentWrapperDecorator(ParentComponent, {
+      parentText: 'Parent text',
+      onClickParent: () => {
+        console.log('onClickParent');
+      },
+    }),
+  ],
+};
+
+export const WithComponentWrapperDecoratorAndArgs: StoryObj<{
+  parentText: string;
+  onClickParent: () => void;
+}> = {
+  render: (args: Args) => ({
+    component: ChildComponent,
+    props: {
+      ...args,
+    },
+  }),
+  argTypes: {
+    parentText: { control: { type: 'text' } },
+    onClickParent: { action: 'onClickParent' },
+  },
+  decorators: [
+    moduleMetadata({ declarations: [ParentComponent] }),
+    componentWrapperDecorator(ParentComponent, ({ args }) => ({
+      parentText: args.parentText,
+      onClickParent: args.onClickParent,
+    })),
+  ],
 };
-WithComponentWrapperDecoratorAndArgs.decorators = [
-  moduleMetadata({ declarations: [ParentComponent] }),
-  componentWrapperDecorator(ParentComponent, ({ args }) => ({
-    parentText: args.parentText,
-    onClickParent: args.onClickParent,
-  })),
-];
 
 export const WithCustomDecorator = (args: Args) => ({
   template: `Child Template`,

code/frameworks/angular/template/stories/core/parameters/bootstrap-options.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/angular';
+import { Meta, StoryObj } from '@storybook/angular';
 import { Component } from '@angular/core';
 
 @Component({
@@ -10,9 +10,13 @@ import { Component } from '@angular/core';
 })
 class ComponentWithWhitespace {}
 
-export default {
+const meta: Meta<ComponentWithWhitespace> = {
   // title: 'Core / Parameters / With Bootstrap Options',
   component: ComponentWithWhitespace,
-} as Meta;
+};
 
-export const WithPreserveWhitespaces: StoryFn = (_args) => ({});
+export default meta;
+
+type Story = StoryObj<ComponentWithWhitespace>;
+
+export const WithPreserveWhitespaces: Story = {};

code/frameworks/angular/template/stories/others/app-initializer-use-factory/app-initializer-use-factory.stories.ts

@@ -1,4 +1,4 @@
-import { moduleMetadata, Meta } from '@storybook/angular';
+import { moduleMetadata, Meta, StoryObj } from '@storybook/angular';
 import { APP_INITIALIZER } from '@angular/core';
 import { action } from '@storybook/addon-actions';
 import Button from '../../button.component';
@@ -27,7 +27,9 @@ const meta: Meta<Button> = {
 
 export default meta;
 
-export const Default = {
+type Story = StoryObj<Button>;
+
+export const Default: Story = {
   args: {
     text: 'Button',
   },

code/frameworks/angular/template/stories/others/issues/12009-unknown-component.stories.ts

@@ -1,14 +1,15 @@
-import { Meta, StoryFn } from '@storybook/angular';
+import { Meta, StoryObj } from '@storybook/angular';
 import Button from '../../button.component';
 
-export default {
+const meta: Meta<Button> = {
   // title: 'Others / Issues / 12009 unknown component',
   component: Button,
-} as Meta;
+};
 
-const Template: StoryFn = (args) => ({
-  props: args,
-});
+export default meta;
 
-export const Basic = Template.bind({});
-Basic.args = { text: 'Unknown component' };
+type Story = StoryObj<Button>;
+
+export const Basic: Story = {
+  args: { text: 'Unknown component' },
+};

code/frameworks/ember/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/ember",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember",
   "bugs": {

code/frameworks/html-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html-vite",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

code/frameworks/html-webpack5/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html-webpack5",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

code/frameworks/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/nextjs",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Storybook for Next.js",
   "keywords": [
     "storybook",

code/frameworks/preact-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact-vite",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

code/frameworks/preact-webpack5/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact-webpack5",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Storybook for Preact: Develop Preact Component in isolation.",
   "keywords": [
     "storybook"

code/frameworks/react-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-vite",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

code/frameworks/react-webpack5/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-webpack5",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

code/frameworks/server-webpack5/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/server-webpack5",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

code/frameworks/svelte-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte-vite",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

code/frameworks/svelte-webpack5/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte-webpack5",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

code/frameworks/sveltekit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/sveltekit",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Storybook for SvelteKit",
   "keywords": [
     "storybook",

code/frameworks/vue-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue-vite",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Storybook for Vue2 and Vite: Develop Vue2 Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

code/frameworks/vue-webpack5/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue-webpack5",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

code/frameworks/vue3-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3-vite",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

code/frameworks/vue3-webpack5/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3-webpack5",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

code/frameworks/web-components-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components-vite",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

code/frameworks/web-components-webpack5/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components-webpack5",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
   "keywords": [
     "lit",
@@ -62,7 +62,7 @@
     "typescript": "~4.9.3"
   },
   "peerDependencies": {
-    "lit": "^2.0.0",
+    "lit": "^2.0.0 || ^3.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },

code/lib/channels/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channels",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "",
   "keywords": [
     "storybook"

code/lib/cli-sb/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sb",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Storybook CLI",
   "keywords": [
     "storybook"

code/lib/cli-storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Storybook CLI",
   "keywords": [
     "storybook"

code/lib/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/cli",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Storybook's CLI - easiest method of adding storybook to your projects",
   "keywords": [
     "cli",

code/lib/cli/src/versions.ts

@@ -1,95 +1,95 @@
 // auto generated file, do not edit
 export default {
-  '@storybook/addon-a11y': '7.5.0-alpha.5',
-  '@storybook/addon-actions': '7.5.0-alpha.5',
-  '@storybook/addon-backgrounds': '7.5.0-alpha.5',
-  '@storybook/addon-controls': '7.5.0-alpha.5',
-  '@storybook/addon-docs': '7.5.0-alpha.5',
-  '@storybook/addon-essentials': '7.5.0-alpha.5',
-  '@storybook/addon-highlight': '7.5.0-alpha.5',
-  '@storybook/addon-interactions': '7.5.0-alpha.5',
-  '@storybook/addon-jest': '7.5.0-alpha.5',
-  '@storybook/addon-links': '7.5.0-alpha.5',
-  '@storybook/addon-mdx-gfm': '7.5.0-alpha.5',
-  '@storybook/addon-measure': '7.5.0-alpha.5',
-  '@storybook/addon-outline': '7.5.0-alpha.5',
-  '@storybook/addon-themes': '7.5.0-alpha.5',
-  '@storybook/addon-storysource': '7.5.0-alpha.5',
-  '@storybook/addon-toolbars': '7.5.0-alpha.5',
-  '@storybook/addon-viewport': '7.5.0-alpha.5',
-  '@storybook/addons': '7.5.0-alpha.5',
-  '@storybook/angular': '7.5.0-alpha.5',
-  '@storybook/api': '7.5.0-alpha.5',
-  '@storybook/blocks': '7.5.0-alpha.5',
-  '@storybook/builder-manager': '7.5.0-alpha.5',
-  '@storybook/builder-vite': '7.5.0-alpha.5',
-  '@storybook/builder-webpack5': '7.5.0-alpha.5',
-  '@storybook/channel-postmessage': '7.5.0-alpha.5',
-  '@storybook/channel-websocket': '7.5.0-alpha.5',
-  '@storybook/channels': '7.5.0-alpha.5',
-  '@storybook/cli': '7.5.0-alpha.5',
-  '@storybook/client-api': '7.5.0-alpha.5',
-  '@storybook/client-logger': '7.5.0-alpha.5',
-  '@storybook/codemod': '7.5.0-alpha.5',
-  '@storybook/components': '7.5.0-alpha.5',
-  '@storybook/core-client': '7.5.0-alpha.5',
-  '@storybook/core-common': '7.5.0-alpha.5',
-  '@storybook/core-events': '7.5.0-alpha.5',
-  '@storybook/core-server': '7.5.0-alpha.5',
-  '@storybook/core-webpack': '7.5.0-alpha.5',
-  '@storybook/csf-plugin': '7.5.0-alpha.5',
-  '@storybook/csf-tools': '7.5.0-alpha.5',
-  '@storybook/docs-tools': '7.5.0-alpha.5',
-  '@storybook/ember': '7.5.0-alpha.5',
-  '@storybook/html': '7.5.0-alpha.5',
-  '@storybook/html-vite': '7.5.0-alpha.5',
-  '@storybook/html-webpack5': '7.5.0-alpha.5',
-  '@storybook/instrumenter': '7.5.0-alpha.5',
-  '@storybook/manager': '7.5.0-alpha.5',
-  '@storybook/manager-api': '7.5.0-alpha.5',
-  '@storybook/nextjs': '7.5.0-alpha.5',
-  '@storybook/node-logger': '7.5.0-alpha.5',
-  '@storybook/postinstall': '7.5.0-alpha.5',
-  '@storybook/preact': '7.5.0-alpha.5',
-  '@storybook/preact-vite': '7.5.0-alpha.5',
-  '@storybook/preact-webpack5': '7.5.0-alpha.5',
-  '@storybook/preset-create-react-app': '7.5.0-alpha.5',
-  '@storybook/preset-html-webpack': '7.5.0-alpha.5',
-  '@storybook/preset-preact-webpack': '7.5.0-alpha.5',
-  '@storybook/preset-react-webpack': '7.5.0-alpha.5',
-  '@storybook/preset-server-webpack': '7.5.0-alpha.5',
-  '@storybook/preset-svelte-webpack': '7.5.0-alpha.5',
-  '@storybook/preset-vue-webpack': '7.5.0-alpha.5',
-  '@storybook/preset-vue3-webpack': '7.5.0-alpha.5',
-  '@storybook/preset-web-components-webpack': '7.5.0-alpha.5',
-  '@storybook/preview': '7.5.0-alpha.5',
-  '@storybook/preview-api': '7.5.0-alpha.5',
-  '@storybook/preview-web': '7.5.0-alpha.5',
-  '@storybook/react': '7.5.0-alpha.5',
-  '@storybook/react-dom-shim': '7.5.0-alpha.5',
-  '@storybook/react-vite': '7.5.0-alpha.5',
-  '@storybook/react-webpack5': '7.5.0-alpha.5',
-  '@storybook/router': '7.5.0-alpha.5',
-  '@storybook/server': '7.5.0-alpha.5',
-  '@storybook/server-webpack5': '7.5.0-alpha.5',
-  '@storybook/source-loader': '7.5.0-alpha.5',
-  '@storybook/store': '7.5.0-alpha.5',
-  '@storybook/svelte': '7.5.0-alpha.5',
-  '@storybook/svelte-vite': '7.5.0-alpha.5',
-  '@storybook/svelte-webpack5': '7.5.0-alpha.5',
-  '@storybook/sveltekit': '7.5.0-alpha.5',
-  '@storybook/telemetry': '7.5.0-alpha.5',
-  '@storybook/theming': '7.5.0-alpha.5',
-  '@storybook/types': '7.5.0-alpha.5',
-  '@storybook/vue': '7.5.0-alpha.5',
-  '@storybook/vue-vite': '7.5.0-alpha.5',
-  '@storybook/vue-webpack5': '7.5.0-alpha.5',
-  '@storybook/vue3': '7.5.0-alpha.5',
-  '@storybook/vue3-vite': '7.5.0-alpha.5',
-  '@storybook/vue3-webpack5': '7.5.0-alpha.5',
-  '@storybook/web-components': '7.5.0-alpha.5',
-  '@storybook/web-components-vite': '7.5.0-alpha.5',
-  '@storybook/web-components-webpack5': '7.5.0-alpha.5',
-  sb: '7.5.0-alpha.5',
-  storybook: '7.5.0-alpha.5',
+  '@storybook/addon-a11y': '7.5.0-alpha.6',
+  '@storybook/addon-actions': '7.5.0-alpha.6',
+  '@storybook/addon-backgrounds': '7.5.0-alpha.6',
+  '@storybook/addon-controls': '7.5.0-alpha.6',
+  '@storybook/addon-docs': '7.5.0-alpha.6',
+  '@storybook/addon-essentials': '7.5.0-alpha.6',
+  '@storybook/addon-highlight': '7.5.0-alpha.6',
+  '@storybook/addon-interactions': '7.5.0-alpha.6',
+  '@storybook/addon-jest': '7.5.0-alpha.6',
+  '@storybook/addon-links': '7.5.0-alpha.6',
+  '@storybook/addon-mdx-gfm': '7.5.0-alpha.6',
+  '@storybook/addon-measure': '7.5.0-alpha.6',
+  '@storybook/addon-outline': '7.5.0-alpha.6',
+  '@storybook/addon-themes': '7.5.0-alpha.6',
+  '@storybook/addon-storysource': '7.5.0-alpha.6',
+  '@storybook/addon-toolbars': '7.5.0-alpha.6',
+  '@storybook/addon-viewport': '7.5.0-alpha.6',
+  '@storybook/addons': '7.5.0-alpha.6',
+  '@storybook/angular': '7.5.0-alpha.6',
+  '@storybook/api': '7.5.0-alpha.6',
+  '@storybook/blocks': '7.5.0-alpha.6',
+  '@storybook/builder-manager': '7.5.0-alpha.6',
+  '@storybook/builder-vite': '7.5.0-alpha.6',
+  '@storybook/builder-webpack5': '7.5.0-alpha.6',
+  '@storybook/channel-postmessage': '7.5.0-alpha.6',
+  '@storybook/channel-websocket': '7.5.0-alpha.6',
+  '@storybook/channels': '7.5.0-alpha.6',
+  '@storybook/cli': '7.5.0-alpha.6',
+  '@storybook/client-api': '7.5.0-alpha.6',
+  '@storybook/client-logger': '7.5.0-alpha.6',
+  '@storybook/codemod': '7.5.0-alpha.6',
+  '@storybook/components': '7.5.0-alpha.6',
+  '@storybook/core-client': '7.5.0-alpha.6',
+  '@storybook/core-common': '7.5.0-alpha.6',
+  '@storybook/core-events': '7.5.0-alpha.6',
+  '@storybook/core-server': '7.5.0-alpha.6',
+  '@storybook/core-webpack': '7.5.0-alpha.6',
+  '@storybook/csf-plugin': '7.5.0-alpha.6',
+  '@storybook/csf-tools': '7.5.0-alpha.6',
+  '@storybook/docs-tools': '7.5.0-alpha.6',
+  '@storybook/ember': '7.5.0-alpha.6',
+  '@storybook/html': '7.5.0-alpha.6',
+  '@storybook/html-vite': '7.5.0-alpha.6',
+  '@storybook/html-webpack5': '7.5.0-alpha.6',
+  '@storybook/instrumenter': '7.5.0-alpha.6',
+  '@storybook/manager': '7.5.0-alpha.6',
+  '@storybook/manager-api': '7.5.0-alpha.6',
+  '@storybook/nextjs': '7.5.0-alpha.6',
+  '@storybook/node-logger': '7.5.0-alpha.6',
+  '@storybook/postinstall': '7.5.0-alpha.6',
+  '@storybook/preact': '7.5.0-alpha.6',
+  '@storybook/preact-vite': '7.5.0-alpha.6',
+  '@storybook/preact-webpack5': '7.5.0-alpha.6',
+  '@storybook/preset-create-react-app': '7.5.0-alpha.6',
+  '@storybook/preset-html-webpack': '7.5.0-alpha.6',
+  '@storybook/preset-preact-webpack': '7.5.0-alpha.6',
+  '@storybook/preset-react-webpack': '7.5.0-alpha.6',
+  '@storybook/preset-server-webpack': '7.5.0-alpha.6',
+  '@storybook/preset-svelte-webpack': '7.5.0-alpha.6',
+  '@storybook/preset-vue-webpack': '7.5.0-alpha.6',
+  '@storybook/preset-vue3-webpack': '7.5.0-alpha.6',
+  '@storybook/preset-web-components-webpack': '7.5.0-alpha.6',
+  '@storybook/preview': '7.5.0-alpha.6',
+  '@storybook/preview-api': '7.5.0-alpha.6',
+  '@storybook/preview-web': '7.5.0-alpha.6',
+  '@storybook/react': '7.5.0-alpha.6',
+  '@storybook/react-dom-shim': '7.5.0-alpha.6',
+  '@storybook/react-vite': '7.5.0-alpha.6',
+  '@storybook/react-webpack5': '7.5.0-alpha.6',
+  '@storybook/router': '7.5.0-alpha.6',
+  '@storybook/server': '7.5.0-alpha.6',
+  '@storybook/server-webpack5': '7.5.0-alpha.6',
+  '@storybook/source-loader': '7.5.0-alpha.6',
+  '@storybook/store': '7.5.0-alpha.6',
+  '@storybook/svelte': '7.5.0-alpha.6',
+  '@storybook/svelte-vite': '7.5.0-alpha.6',
+  '@storybook/svelte-webpack5': '7.5.0-alpha.6',
+  '@storybook/sveltekit': '7.5.0-alpha.6',
+  '@storybook/telemetry': '7.5.0-alpha.6',
+  '@storybook/theming': '7.5.0-alpha.6',
+  '@storybook/types': '7.5.0-alpha.6',
+  '@storybook/vue': '7.5.0-alpha.6',
+  '@storybook/vue-vite': '7.5.0-alpha.6',
+  '@storybook/vue-webpack5': '7.5.0-alpha.6',
+  '@storybook/vue3': '7.5.0-alpha.6',
+  '@storybook/vue3-vite': '7.5.0-alpha.6',
+  '@storybook/vue3-webpack5': '7.5.0-alpha.6',
+  '@storybook/web-components': '7.5.0-alpha.6',
+  '@storybook/web-components-vite': '7.5.0-alpha.6',
+  '@storybook/web-components-webpack5': '7.5.0-alpha.6',
+  sb: '7.5.0-alpha.6',
+  storybook: '7.5.0-alpha.6',
 };

code/lib/client-logger/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/client-logger",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "",
   "keywords": [
     "storybook"

code/lib/codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/codemod",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "A collection of codemod scripts written with JSCodeshift",
   "keywords": [
     "storybook"

code/lib/core-common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-common",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"

code/lib/core-events/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-events",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Event names used in storybook core",
   "keywords": [
     "storybook"

code/lib/core-server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-server",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"

code/lib/core-webpack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-webpack",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"

code/lib/csf-plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/csf-plugin",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Enrich CSF files via static analysis",
   "keywords": [
     "storybook"

code/lib/csf-tools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/csf-tools",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Parse and manipulate CSF and Storybook config files",
   "keywords": [
     "storybook"

code/lib/docs-tools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/docs-tools",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Shared utility functions for frameworks to implement docs",
   "keywords": [
     "storybook"

code/lib/instrumenter/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/instrumenter",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "",
   "keywords": [
     "storybook"

code/lib/manager-api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/manager-api",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Core Storybook Manager API & Context",
   "keywords": [
     "storybook"

code/lib/manager-api/src/version.ts

@@ -1 +1 @@
-export const version = '7.5.0-alpha.5';
+export const version = '7.5.0-alpha.6';

code/lib/node-logger/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/node-logger",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "",
   "keywords": [
     "storybook"

code/lib/postinstall/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/postinstall",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "Storybook addons postinstall utilities",
   "keywords": [
     "api",

code/lib/preview-api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preview-api",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.6",
   "description": "",
   "keywords": [
     "storybook"