Merge pull request #2592 from storybooks/angular-cli-stories-separation

Separate stories in angular-cli example

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

@@ -0,0 +1,23 @@
+import { storiesOf } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+import { Button } from '@storybook/angular/demo';
+
+storiesOf('Addon Actions', module)
+  .add('Action only', () => ({
+    component: Button,
+    props: {
+      text: 'Action only',
+      onClick: action('log 1')
+    }
+  }))
+  .add('Action and method', () => ({
+    component: Button,
+    props: {
+      text: 'Action and Method',
+      onClick: e => {
+        console.log(e);
+        e.preventDefault();
+        action('log2')(e.target);
+      }
+    }
+  }));

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

@@ -0,0 +1,69 @@
+import { storiesOf } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+
+import {
+  withKnobs,
+  text,
+  number,
+  boolean,
+  array,
+  select,
+  color,
+  date,
+  button,
+} from '@storybook/addon-knobs/angular';
+
+import { SimpleKnobsComponent } from './knobs.component';
+import { AllKnobsComponent } from './all-knobs.component';
+
+storiesOf('Addon Knobs', module)
+  .addDecorator(withKnobs)
+  .add('Simple', () => {
+    const name = text('Name', 'John Doe');
+    const age = number('Age', 44);
+
+    return {
+      component: SimpleKnobsComponent,
+      props: {
+        name,
+        age
+      }
+    };
+  })
+  .add('All knobs', () => {
+    const name = text('Name', 'Jane');
+    const stock = number('Stock', 20, {
+      range: true,
+      min: 0,
+      max: 30,
+      step: 5,
+    });
+    const fruits = {
+      apples: 'Apple',
+      bananas: 'Banana',
+      cherries: 'Cherry',
+    };
+    const fruit = select('Fruit', fruits, 'apple');
+    const price = number('Price', 2.25);
+
+    const border = color('Border', 'deeppink');
+    const today = date('Today', new Date('Jan 20 2017'));
+    const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
+    const nice = boolean('Nice', true);
+    button('Arbitrary action', action('You clicked it!'));
+
+    return {
+      component: AllKnobsComponent,
+      props: {
+        name,
+        stock,
+        fruits,
+        fruit,
+        price,
+        border,
+        today,
+        items,
+        nice
+      }
+    };
+  });

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

@@ -0,0 +1,33 @@
+import { storiesOf } from '@storybook/angular';
+import { withNotes } from '@storybook/addon-notes';
+import { Button } from '@storybook/angular/demo';
+
+storiesOf('Addon Notes', module)
+  .add(
+    'Simple note',
+    withNotes({ text: 'My notes on some button' })(() => ({
+      component: Button,
+      props: {
+        text: 'Notes on some Button',
+        onClick: () => {},
+      }
+    }))
+  )
+  .add(
+    'Note with HTML',
+    withNotes({
+      text: `
+      <h2>My notes on emojis</h2>
+
+      <em>It's not all that important to be honest, but..</em>
+
+      Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
+    `,
+    })(() => ({
+      component: Button,
+      props: {
+        text: 'Notes with HTML',
+        onClick: () => {},
+      }
+    }))
+  );

examples/angular-cli/src/stories/custom-metadata.stories.ts

@@ -0,0 +1,67 @@
+import { storiesOf } from '@storybook/angular';
+import { withKnobs, text } from '@storybook/addon-knobs/angular';
+
+import { NameComponent } from './name.component';
+import { CustomPipePipe } from './custom.pipe';
+import { DummyService } from './moduleMetadata/dummy.service';
+import { ServiceComponent } from './moduleMetadata/service.component'
+
+storiesOf('Custom Pipe', module)
+  .add('Default', () => ({
+    component: NameComponent,
+    props: {
+      field: 'foobar',
+    },
+    moduleMetadata: {
+      imports: [],
+      schemas: [],
+      declarations: [CustomPipePipe],
+      providers: []
+    }
+  }));
+
+storiesOf('Custom Pipe/With Knobs', module)
+  .addDecorator(withKnobs)
+  .add('NameComponent', () => ({
+    component: NameComponent,
+    props: {
+      field: text('field', 'foobar'),
+    },
+    moduleMetadata: {
+      imports: [],
+      schemas: [],
+      declarations: [CustomPipePipe],
+      providers: []
+    }
+  }));
+
+storiesOf('Custom ngModule metadata', module)
+  .add('simple', () => ({
+    component: ServiceComponent,
+    props: {
+      name: 'Static name'
+    },
+    moduleMetadata: {
+      imports: [],
+      schemas: [],
+      declarations: [],
+      providers: [DummyService]
+    }
+  }))
+  .addDecorator(withKnobs)
+  .add('with knobs', () => {
+    const name = text('Name', 'Dynamic knob');
+
+    return {
+      component: ServiceComponent,
+      props: {
+        name
+      },
+      moduleMetadata: {
+        imports: [],
+        schemas: [],
+        declarations: [],
+        providers: [DummyService]
+      }
+    };
+  });