Merge pull request #11825 from storybookjs/cli/typesAngular

CLI: Add CSF types for Angular

app/angular/src/client/index.ts

@@ -9,6 +9,8 @@ export {
   raw,
 } from './preview';
 
+export * from './preview/types-6-0';
+
 export { StoryFnAngularReturnType as IStory } from './preview/types';
 
 export { moduleMetadata } from './preview/angular/decorators';

app/angular/src/client/preview/types-6-0.ts

@@ -0,0 +1,23 @@
+import { Args as DefaultArgs, Annotations, BaseMeta, BaseStory } from '@storybook/addons';
+import { StoryFnAngularReturnType } from './types';
+
+export { Args, ArgTypes, Parameters, StoryContext } from '@storybook/addons';
+
+type AngularComponent = any;
+type AngularReturnType = StoryFnAngularReturnType;
+
+/**
+ * Metadata to configure the stories for a component.
+ *
+ * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
+ */
+export type Meta<Args = DefaultArgs> = BaseMeta<AngularComponent> &
+  Annotations<Args, AngularReturnType>;
+
+/**
+ * Story function that represents a component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ */
+export type Story<Args = DefaultArgs> = BaseStory<Args, AngularReturnType> &
+  Annotations<Args, AngularReturnType>;

app/angular/types-6-0.d.ts

@@ -0,0 +1 @@
+export * from './dist/client/preview/types-6-0.d';

examples/angular-cli/src/stories/addon-controls.stories.ts

@@ -1,12 +1,13 @@
+import { Story, Meta } from '@storybook/angular/types-6-0';
 import { ButtonComponent } from './doc-button/doc-button.component';
 
 export default {
   title: 'Addon/Controls',
   component: ButtonComponent,
   parameters: { docs: { iframeHeight: 120 } },
-};
+} as Meta;
 
-const Template = (args) => ({
+const Template: Story = (args) => ({
   component: ButtonComponent,
   props: args,
 });

examples/angular-cli/src/stories/core.stories.ts

@@ -1,5 +1,6 @@
 import { addParameters } from '@storybook/angular';
 import { Button } from '@storybook/angular/demo';
+import { Story, Meta } from '@storybook/angular/types-6-0';
 
 const globalParameter = 'globalParameter';
 const chapterParameter = 'chapterParameter';
@@ -12,9 +13,9 @@ export default {
   parameters: {
     chapterParameter,
   },
-};
+} as Meta;
 
-export const PassedToStory = (_args, { parameters: { fileName, ...parameters } }) => ({
+export const PassedToStory: Story = (_args, { parameters: { fileName, ...parameters } }) => ({
   component: Button,
   props: {
     text: `Parameters are ${JSON.stringify(parameters, null, 2)}`,

lib/cli/src/frameworks/angular/Button.stories.ts

@@ -1,3 +1,5 @@
+// also exported from '@storybook/angular' if you can deal with breaking changes in 6.1
+import { Story, Meta } from '@storybook/angular/types-6-0';
 import Button from './button.component';
 
 export default {
@@ -6,9 +8,9 @@ export default {
   argTypes: {
     backgroundColor: { control: 'color' },
   },
-};
+} as Meta;
 
-const Template = (args: Button) => ({
+const Template: Story<Button> = (args: Button) => ({
   component: Button,
   props: args,
 });

lib/cli/src/frameworks/angular/Header.stories.ts

@@ -1,5 +1,7 @@
 import { moduleMetadata } from '@storybook/angular';
 import { CommonModule } from '@angular/common';
+// also exported from '@storybook/angular' if you can deal with breaking changes in 6.1
+import { Story, Meta } from '@storybook/angular/types-6-0';
 
 import Button from './button.component';
 import Header from './header.component';
@@ -13,9 +15,9 @@ export default {
       imports: [CommonModule],
     }),
   ],
-};
+} as Meta;
 
-const Template = (args: Header) => ({
+const Template: Story<Header> = (args: Header) => ({
   component: Header,
   props: args,
 });

lib/cli/src/frameworks/angular/Page.stories.ts

@@ -1,5 +1,7 @@
 import { moduleMetadata } from '@storybook/angular';
 import { CommonModule } from '@angular/common';
+// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
+import { Story, Meta } from '@storybook/angular/types-6-0';
 
 import Button from './button.component';
 import Header from './header.component';
@@ -16,9 +18,9 @@ export default {
       imports: [CommonModule],
     }),
   ],
-};
+} as Meta;
 
-const Template = (args: Page) => ({
+const Template: Story<Page> = (args: Page) => ({
   component: Page,
   props: args,
 });

scripts/run-e2e-config.ts

@@ -28,17 +28,18 @@ const baseAngular: Parameters = {
 //   additionalDeps: [...baseAngular.additionalDeps, 'core-js'],
 // };
 
-export const angularv7: Parameters = {
-  ...baseAngular,
-  version: 'v7-lts',
-  additionalDeps: [...baseAngular.additionalDeps, 'core-js'],
-};
+// TODO: enable back when typings issues are resolved
+// export const angularv7: Parameters = {
+//   ...baseAngular,
+//   version: 'v7-lts',
+//   additionalDeps: [...baseAngular.additionalDeps, 'core-js'],
+// };
 
-export const angularv8: Parameters = {
-  ...baseAngular,
-  version: 'v8-lts',
-  additionalDeps: [...baseAngular.additionalDeps, 'core-js'],
-};
+// export const angularv8: Parameters = {
+//   ...baseAngular,
+//   version: 'v8-lts',
+//   additionalDeps: [...baseAngular.additionalDeps, 'core-js'],
+// };
 
 export const angularv9: Parameters = {
   ...baseAngular,