adds missing angular scripts

docs/configure/images-and-assets.md

@@ -15,7 +15,8 @@ Afterwards you can use any asset in your stories:
 <CodeSnippets
   paths={[
     'react/component-story-static-asset-with-import.js.mdx',
-    'vue/component-story-static-asset-with-import.js.mdx'
+    'vue/component-story-static-asset-with-import.js.mdx',
+    'angular/component-story-static-asset-with-import.ts.mdx'
   ]}
 />
 
@@ -43,6 +44,7 @@ Here `./public` is your static directory. Now use it in a component or story lik
   paths={[
     'react/component-story-static-asset-without-import.js.mdx',
     'vue/component-story-static-asset-without-import.js.mdx',
+    'angular/component-story-static-asset-without-import.ts.mdx'
   ]}
 />
 
@@ -68,6 +70,7 @@ Upload your files to an online CDN and reference them. In this example we’re u
   paths={[
     'react/component-story-static-asset-cdn.js.mdx',
     'vue/component-story-static-asset-cdn.js.mdx',
+    'angular/component-story-static-asset-cdn.ts.mdx'
   ]}
 />
 

docs/essentials/controls.md

@@ -93,6 +93,7 @@ Up until now, we only used auto-generated controls based on the component we're
     'react/table-story-fully-customize-controls.js.mdx',
     'react/table-story-fully-customize-controls.mdx.mdx',
     'vue/table-story-fully-customize-controls.js.mdx',
+    'angular/table-story-fully-customize-controls.ts.mdx'
   ]}
 />
 
@@ -116,6 +117,7 @@ As they can be complex cases:
     'react/component-story-custom-args-complex.ts.mdx',
     'react/component-story-custom-args-complex.mdx.mdx',
      'vue/component-story-custom-args-complex.js.mdx',
+     'angular/component-story-custom-args-complex.ts.mdx'
   ]}
 />
 
@@ -132,6 +134,7 @@ Or even with certain types of elements, such as icons:
     'react/component-story-custom-args-icons.ts.mdx',
     'react/component-story-custom-args-icons.mdx.mdx',
     'vue/component-story-custom-args-icons.js.mdx',
+    'angular/component-story-custom-args-icons.ts.mdx'
   ]}
 />
 

docs/essentials/viewport.md

@@ -122,6 +122,7 @@ You can change your story through [parameters](../writing-stories/parameters.md)
     'react/my-component-story-configure-viewports.js.mdx',
     'react/my-component-story-configure-viewports.mdx.mdx',
     'vue/my-component-story-configure-viewports.js.mdx',
+    'angular/my-component-story-configure-viewports.ts.mdx'
   ]}
 />
 

docs/get-started/whats-a-story.md

@@ -38,7 +38,8 @@ The above story definition can be further improved to take advantage of [Storybo
   paths={[
     'react/button-story-with-args.js.mdx',
     'react/button-story-with-args.ts.mdx',
-    'vue/button-story-with-args.js.mdx'
+    'vue/button-story-with-args.js.mdx',
+    'angular/button-story-with-args.ts.mdx'
   ]}
 />
 

docs/snippets/angular/app-story-with-mock.ts.mdx

@@ -0,0 +1,34 @@
+```ts
+// App.stories.ts
+
+import { Story, Meta } from '@storybook/angular/types-6-0';
+import { AppComponent } from './app.component';
+
+export default {
+  component: AppComponent,
+  title: 'App',
+} as Meta;
+
+const Template: Story<AppComponent> = (args: AppComponent) => ({
+  component: AppComponent,
+  props: args,
+});
+
+export const Success = Template.bind({});
+Success.parameters = {
+  fetch: {
+    json: {
+      JavaScript: 3390991,
+      'C++': 44974,
+      TypeScript: 15530,
+      CoffeeScript: 12253,
+      Python: 9383,
+      C: 5341,
+      Shell: 5115,
+      HTML: 3420,
+      CSS: 3171,
+      Makefile: 189,
+    },
+  },
+};
+```

docs/snippets/angular/button-group-story.ts.mdx

@@ -14,18 +14,18 @@ export default {
   decorators: [
     moduleMetadata({
       declarations: [Button],
-      imports: [CommonModule],
-    }),
+      imports: [CommonModule]
+    })
   ],
 };
 
 const Template = (args: ButtonGroup) => ({
-  props: args,
+  props: args
 });
 
 export const Pair = Template.bind({});
 Pair.args = {
-  buttons: [...ButtonStories.Primary.args, ...ButtonStories.Secondary.args],
-  orientation: 'horizontal',
+  buttons:[{...ButtonStories.Primary.args},{...ButtonStories.Secondary.args}],
+  orientation: 'horizontal'
 };
 ```

docs/snippets/angular/button-story-default-docs-code.ts.mdx

@@ -0,0 +1,37 @@
+```ts
+// Button.stories.ts
+
+import { Story, Meta } from '@storybook/angular/types-6-0';
+import Button from './button.component';
+
+export default {
+  title: 'Button',
+  component: Button,
+  argTypes: {
+    backgroundColor: { control: 'color' }
+  }
+} as Meta;
+
+// some function to demonstrate the behavior
+const someFunction = (someValue: string) => {
+  return `i am a ${someValue}`;
+};
+
+export const ExampleStory: Story<ComplexCase> = (args: ComplexCase) => {
+  const { label } = args;
+  // assigns the function result to a variable and pass it as a prop into the component
+  const functionResult = someFunction(label);
+  return {
+    component: ComplexCase,
+    props: {
+      ...args,
+      label:functionResult
+    },
+  };
+};
+ExampleStory.args = {
+  primary: true,
+  size: 'small',
+  label: 'button',
+};
+```

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

@@ -2,7 +2,8 @@
 //Button.stories.ts
 
 const Template = (args: Button) => ({
-  props: args,
+  component: Button,
+  props: args
 });
 
 export const Primary = Template.bind({});

docs/snippets/angular/button-test.ts.mdx

@@ -0,0 +1,15 @@
+```ts
+// button.component.spec.ts
+
+import { render, screen } from '@testing-library/angular';
+import ButtonComponent from './button.component';
+
+import { Primary } from './Button.stories';
+
+test('renders the button in the primary state ', async () => {
+  await render(ButtonComponent, {
+    componentProperties: Primary.args,
+  });
+  expect(screen.getByRole('button').classList.contains('storybook-button--primary')).toBeTruthy();
+});
+```

docs/snippets/angular/component-story-custom-args-complex.ts.mdx

@@ -0,0 +1,46 @@
+```ts
+// YourComponent.stories.ts
+
+import { Story, Meta } from '@storybook/angular/types-6-0';
+import YourComponent from './your.component';
+
+// a function to apply some computations
+const someFunction = (valuePropertyA: string, valuePropertyB: string) => {
+  // makes some computations and returns something
+};
+
+export default {
+  component: YourComponent,
+  title: 'A complex case with a function',
+  // creates specific argTypes with options
+  argTypes: {
+    propertyA: {
+      control: {
+        type: 'select',
+        options: ['Item One', 'Item Two', 'Item Three']
+      },
+    },
+    propertyB: {
+      control: {
+        type: 'select',
+        options: ['Another Item One', 'Another Item Two', 'Another Item Three']
+      },
+    },
+  },
+} as Meta;
+
+const Template: Story<YourComponent> = (args: YourComponent) => {
+  const { propertyA, propertyB } = args;
+
+  const someFunctionResult = someFunction(propertyA, propertyB);
+
+  args.someProperty = someFunctionResult;
+  return {
+    component: YourComponent,
+    props: {
+      ...args,
+      someProperty:someFunctionResult
+    },
+  };
+};
+```

docs/snippets/angular/component-story-custom-args-icons.ts.mdx

@@ -0,0 +1,37 @@
+```ts
+// YourComponent.stories.ts
+
+import { Story, Meta } from '@storybook/angular/types-6-0';
+import Icon from './icon.component';
+
+import { IconA, IconB, IconC, IconD, IconE } from './icons';
+
+// Maps the icons to a JSON serializable object to be safely used with the argTypes
+const iconMap = { IconA, IconB, IconC, IconD, IconE };
+
+export default {
+  title: 'My Story with Icons',
+  component: YourComponent,
+  argTypes: {
+    icon: {
+      control: {
+        type: 'select',
+        options: Object.keys(iconMap),
+      },
+    },
+  },
+} as Meta;
+
+const Template: Story<Icon> = (args: Icon) => {
+  // retrieves the appropriate icon passes it as a component prop
+  const { icon } = args;
+  const selectedIcon = iconMap[icon];
+  return {
+    component: Icon,
+    props: {
+      ...args,
+      icon:selectedIcon
+    },
+  };
+};
+```

docs/snippets/angular/component-story-static-asset-cdn.ts.mdx

@@ -0,0 +1,13 @@
+```ts
+// MyComponent.stories.ts
+
+import { Meta } from '@storybook/angular/types-6-0';
+
+export default {
+  title: 'img',
+} as Meta;
+
+export const withAnImage = () => ({
+  template: `<img src="https://placehold.it/350x150" alt="My CDN placeholder" />`
+});
+```

docs/snippets/angular/component-story-static-asset-with-import.ts.mdx

@@ -0,0 +1,24 @@
+```ts
+// MyComponent.stories.ts
+
+import { Meta } from '@storybook/angular/types-6-0';
+
+import imageFile from './static/image.png';
+
+export default {
+  title: 'img',
+} as Meta;
+
+const image = {
+  src: imageFile,
+  alt: 'my image',
+};
+
+export const withAnImage = () => ({
+  template: `<img src="{{src}}" alt="{{alt}}" />`,
+  props: {
+    src: image.src,
+    alt: image.alt,
+  },
+});
+```

docs/snippets/angular/component-story-static-asset-without-import.ts.mdx

@@ -0,0 +1,13 @@
+```ts
+// MyComponent.stories.ts
+
+import { Meta } from '@storybook/angular/types-6-0';
+
+export default {
+  title: 'img',
+} as Meta;
+
+export const withAnImage = () => ({
+  template: `<img src="/image.png" alt="my image"/>`
+});
+```

docs/snippets/angular/list-story-reuse-data.ts.mdx

@@ -6,9 +6,9 @@ import * as ListItemStories from './ListItem.stories';
 export const ManyItems = Template.bind({});
 ManyItems.args = {
   items: [
-    ...ListItemStories.Selected.args,
-    ...ListItemStories.Unselected.args,
-    ...ListItemStoriesUnselected.args,
+    { ...ListItemStories.Selected.args },
+    { ...ListItemStories.Unselected.args },
+    { ...ListItemStories.Unselected.args },
   ],
 };
 ```

docs/snippets/angular/list-story-template.ts.mdx

@@ -0,0 +1,31 @@
+```ts
+// List.stories.ts
+
+import { Story } from '@storybook/angular/types-6-0';
+
+import ListComponent from './List.component';
+import ListItemComponent from './ListItem.component';
+
+import { Unchecked } from './ListItem.stories';
+
+const ListTemplate: Story<ListComponent> = (args: ListComponent) => ({
+  component: ListComponent,
+  moduleMetadata: {
+    declarations: [ListComponent, ListItemComponent],
+  },
+  props: args,
+  template: `
+    <list-component>
+        <div *ngFor="let item of items">
+            <listitem-component [item]="item"></listitem-component>
+        </div>
+    </list-component>`,
+});
+
+export const EmptyWithTemplate = ListTemplate.bind({});
+Empty.args = { items: [] };
+
+
+export const OneItemWithTemplate = ListTemplate.bind({});
+OneItemWithTemplate.args = { items: [Unchecked.args.item] };
+```

docs/snippets/angular/list-story-unchecked.ts.mdx

@@ -0,0 +1,26 @@
+```ts
+// List.stories.ts
+
+import { Story } from '@storybook/angular/types-6-0';
+
+import ListComponent from './List.component';
+import ListItemComponent from './ListItem.component';
+import { Unchecked } from './ListItem.stories';
+
+export const OneItem: Story<ListComponent> = (args: ListComponent) => ({
+  component: ListComponent,
+  moduleMetadata: {
+    declarations: [ListComponent, ListItemComponent],
+  },
+  props: args,
+  template: `
+    <list-component>
+        <listitem-component [item]="item"></listitem-component>
+    </list-component>
+   `,
+});
+
+OneItem.args = {
+  ...Unchecked.args,
+};
+```

docs/snippets/angular/my-component-story-configure-viewports.ts.mdx

@@ -0,0 +1,31 @@
+```ts
+// MyComponent.stories.ts
+
+import { Story, Meta } from '@storybook/angular/types-6-0';
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+import MyComponent from './MyComponent.component';
+
+export default {
+  title: 'Stories',
+  component: MyComponent, 
+  parameters: {
+    // the viewports object from the Essentials addon
+    viewport: {
+      // the viewports you want to use
+      viewports: INITIAL_VIEWPORTS,
+      // your own default viewport
+      defaultViewport: 'iphone6',
+    }
+  },
+} as Meta;
+
+export const myStory: Story<MyComponent> = () => ({
+  component: MyComponent,
+  template: '<div></div>'
+});
+myStory.parameters = {
+  viewport: {
+    defaultViewport: 'iphonex'
+  }
+};
+```

docs/snippets/angular/page-story-with-args-composition.ts.mdx

@@ -0,0 +1,42 @@
+```ts
+// YourPage.stories.ts
+
+import { moduleMetadata } from '@storybook/angular'
+import { Story, Meta } from '@storybook/angular/types-6-0';
+
+import { CommonModule } from '@angular/common';
+
+import DocumentScreen from './YourPage.component';
+import DocumentList from './DocumentList.component';
+import DocumentHeader from './DocumentHeader.component';
+import PageLayout from './PageLayout.component';
+
+
+import * as PageLayoutStories from './PageLayout.stories';
+import * as DocumentHeaderStories from './DocumentHeader.stories';
+import * as DocumentListStories from './DocumentList.stories';
+
+export default {
+  component: DocumentScreen,
+  title: 'DocumentScreen',
+  decorators: [
+    moduleMetadata({
+      // imports components to allow component composition with Storybook
+      declarations: [DocumentList, DocumentHeader,PageLayout],
+      imports: [CommonModule],
+    }),
+  ],
+} as Meta;
+
+const Template: Story<DocumentScreen> = (args: DocumentScreen) => ({
+  component: DocumentScreen,
+  props: args,
+});
+
+export const Simple = Template.bind({});
+Simple.args = {
+  user: PageLayoutStories.PageLayoutSimple.args.user,
+  document: DocumentHeaderStories.DocumentHeaderSimple.args.document,
+  subdocuments: DocumentListStories.DocumentListSimple.args.documents
+};
+```

docs/snippets/angular/simple-page-implementation.ts.mdx

@@ -0,0 +1,26 @@
+```ts
+// YourPage.component.ts
+
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'document-screen',
+  template: `
+    <page-layout [user]="user">
+      <document-header [document]="document"></document-header>
+      <document-list [documents]="subdocuments"></document-list>
+    </page-layout>
+  `,
+})
+export default class DocumentScreen {
+  @Input()
+  user: any = { id: 0, name: 'Some User' };
+
+  @Input()
+  document: any = { id: 0, title: 'Some Title' };
+
+  @Input()
+  subdocuments: any = [];
+}
+
+```

docs/snippets/angular/table-story-fully-customize-controls.ts.mdx

@@ -0,0 +1,30 @@
+```ts
+// Table.stories.ts
+
+const TableStory: Story<TableComponent> = (args: TableComponent) => ({
+  component: TableComponent,
+  props: args,
+  template: `
+    <table>
+        <tbody>
+            <tr *ngFor="let row of data; let i=index">
+                <td *ngFor="let col of row; let j=index">
+                    {{data[i][j]}}
+                </td>
+            </tr>
+        </tbody>
+    </table>
+    `
+});
+
+export const Numeric = TableStory.bind({});
+Numeric.args = {
+  // This arg is for the story component
+  data: [
+    [1, 2, 3],
+    [4, 5, 6],
+  ],
+  // The remaining args get passed to the `Table` component
+  size: 'large',
+};
+```

docs/snippets/angular/your-component.ts.mdx

@@ -1,6 +1,7 @@
 ```ts
-// YourComponent.stories.tsx
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
+// YourComponent.stories.ts
+
+import { Meta, Story } from '@storybook/angular';
 
 import { YourComponent } from './your.component';
 
@@ -10,7 +11,8 @@ export default {
   component: YourComponent,
 } as Meta;
 
-const Template: Story<YourComponent> = (args) => ({
+const Template: Story<YourComponent> = (args:YourComponent) => ({
+  component:YourComponent,
   props: args,
 });
 

docs/workflows/build-pages-with-storybook.md

@@ -38,7 +38,8 @@ When you are building screens in this way, it is typical that the inputs of a co
   paths={[
     'react/simple-page-implementation.js.mdx',
     'react/simple-page-implementation.ts.mdx',
-    'vue/simple-page-implementation.vue.mdx'
+    'vue/simple-page-implementation.vue.mdx',
+    'angular/simple-page-implementation.ts.mdx'
   ]}
 />
 
@@ -52,7 +53,8 @@ In such cases it is natural to use [args composition](../writing-stories/args.md
   paths={[
     'react/page-story-with-args-composition.js.mdx',
     'react/page-story-with-args-composition.ts.mdx',
-    'vue/page-story-with-args-composition.js.mdx'
+    'vue/page-story-with-args-composition.js.mdx',
+    'angular/page-story-with-args-composition.ts.mdx'
   ]}
 />
 
@@ -131,7 +133,8 @@ Once that configuration is complete, we can set the mock values in a specific st
 <CodeSnippets
   paths={[
     'react/app-story-with-mock.js.mdx',
-    'vue/app-story-with-mock.js.mdx'
+    'vue/app-story-with-mock.js.mdx',
+    'angular/app-story-with-mock.ts.mdx'
   ]}
 />
 

docs/workflows/stories-for-multiple-components.md

@@ -38,7 +38,8 @@ The simplest change we can make to the above is to reuse the stories of the `Lis
   paths={[
     'react/list-story-unchecked.js.mdx',
     'react/list-story-unchecked.ts.mdx',
-    'vue/list-story-unchecked.js.mdx'
+    'vue/list-story-unchecked.js.mdx',
+    'angular/list-story-unchecked.ts.mdx'
   ]}
 />
 
@@ -81,7 +82,8 @@ Another option that is more “data”-based is to create a special “story-gen
   paths={[
     'react/list-story-template.js.mdx',
     'react/list-story-template.ts.mdx',
-    'vue/list-story-template.js.mdx'
+    'vue/list-story-template.js.mdx',
+    'angular/list-story-template.ts.mdx'
   ]}
 />
 

docs/workflows/unit-testing.md

@@ -15,7 +15,8 @@ Here is an example of how you can use it in a testing library:
 <CodeSnippets
   paths={[
     'react/button-test.js.mdx',
-    'vue/button-test.js.mdx'
+    'vue/button-test.js.mdx',
+    'angular/button-test.ts.mdx'
   ]}
 />
 

docs/writing-docs/doc-blocks.md

@@ -242,7 +242,8 @@ As an example, if you had the following story:
   paths={[
     'react/button-story-default-docs-code.js.mdx',
     'react/button-story-default-docs-code.ts.mdx',
-    'vue/button-story-default-docs-code.js.mdx'
+    'vue/button-story-default-docs-code.js.mdx',
+    'angular/button-story-default-docs-code.ts.mdx'
   ]}
 />