@storybook/angular 8.0.0-alpha.7 → 8.0.0-alpha.8

package/dist/client/public-types.d.ts

@@ -1,4 +1,5 @@
 import { AnnotatedStoryFn, Args, ComponentAnnotations, DecoratorFunction, LoaderFunction, StoryAnnotations, StoryContext as GenericStoryContext, StrictArgs, ProjectAnnotations } from '@storybook/types';
+import { EventEmitter } from '@angular/core';
 import { AngularRenderer } from './types';
 export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types';
 export type { Parameters as AngularParameters } from './types';
@@ -8,19 +9,19 @@ export type { AngularRenderer };
  *
  * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  */
-export type Meta<TArgs = Args> = ComponentAnnotations<AngularRenderer, TArgs>;
+export type Meta<TArgs = Args> = ComponentAnnotations<AngularRenderer, TransformEventType<TArgs>>;
 /**
  * Story function that represents a CSFv2 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type StoryFn<TArgs = Args> = AnnotatedStoryFn<AngularRenderer, TArgs>;
+export type StoryFn<TArgs = Args> = AnnotatedStoryFn<AngularRenderer, TransformEventType<TArgs>>;
 /**
  * Story function that represents a CSFv3 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type StoryObj<TArgs = Args> = StoryAnnotations<AngularRenderer, TArgs>;
+export type StoryObj<TArgs = Args> = StoryAnnotations<AngularRenderer, TransformEventType<TArgs>>;
 /**
  * @deprecated Use `StoryFn` instead.
  * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
@@ -35,3 +36,6 @@ export type Decorator<TArgs = StrictArgs> = DecoratorFunction<AngularRenderer, T
 export type Loader<TArgs = StrictArgs> = LoaderFunction<AngularRenderer, TArgs>;
 export type StoryContext<TArgs = StrictArgs> = GenericStoryContext<AngularRenderer, TArgs>;
 export type Preview = ProjectAnnotations<AngularRenderer>;
+type TransformEventType<T> = {
+    [K in keyof T]: T[K] extends EventEmitter<infer E> ? (e: E) => void : T[K];
+};

package/dist/client/types.d.ts

@@ -30,10 +30,6 @@ export interface StoryFnAngularReturnType {
     styles?: string[];
     userDefinedTemplate?: boolean;
 }
-/**
- * @deprecated Use `AngularRenderer` instead.
- */
-export type AngularFramework = AngularRenderer;
 export interface AngularRenderer extends WebRenderer {
     component: any;
     storyResult: StoryFnAngularReturnType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
@@ -37,19 +37,19 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/tsc.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "8.0.0-alpha.7",
-    "@storybook/cli": "8.0.0-alpha.7",
-    "@storybook/client-logger": "8.0.0-alpha.7",
-    "@storybook/core-common": "8.0.0-alpha.7",
-    "@storybook/core-events": "8.0.0-alpha.7",
-    "@storybook/core-server": "8.0.0-alpha.7",
-    "@storybook/core-webpack": "8.0.0-alpha.7",
-    "@storybook/docs-tools": "8.0.0-alpha.7",
+    "@storybook/builder-webpack5": "8.0.0-alpha.8",
+    "@storybook/cli": "8.0.0-alpha.8",
+    "@storybook/client-logger": "8.0.0-alpha.8",
+    "@storybook/core-common": "8.0.0-alpha.8",
+    "@storybook/core-events": "8.0.0-alpha.8",
+    "@storybook/core-server": "8.0.0-alpha.8",
+    "@storybook/core-webpack": "8.0.0-alpha.8",
+    "@storybook/docs-tools": "8.0.0-alpha.8",
     "@storybook/global": "^5.0.0",
-    "@storybook/node-logger": "8.0.0-alpha.7",
-    "@storybook/preview-api": "8.0.0-alpha.7",
-    "@storybook/telemetry": "8.0.0-alpha.7",
-    "@storybook/types": "8.0.0-alpha.7",
+    "@storybook/node-logger": "8.0.0-alpha.8",
+    "@storybook/preview-api": "8.0.0-alpha.8",
+    "@storybook/telemetry": "8.0.0-alpha.8",
+    "@storybook/types": "8.0.0-alpha.8",
     "@types/node": "^18.0.0",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",

package/template/cli/button.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/angular';
-
+import { fn } from '@storybook/test';
 import { ButtonComponent } from './button.component';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
@@ -7,17 +7,13 @@ const meta: Meta<ButtonComponent> = {
   title: 'Example/Button',
   component: ButtonComponent,
   tags: ['autodocs'],
-  render: (args: ButtonComponent) => ({
-    props: {
-      backgroundColor: null,
-      ...args,
-    },
-  }),
   argTypes: {
     backgroundColor: {
       control: 'color',
     },
   },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onClick: fn() },
 };
 
 export default meta;