Angular: Convert angular-cli stories to CSF

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

@@ -1,23 +1,34 @@
-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);
-      },
+export default {
+  title: 'Addon|Actions',
+};
+
+export const actionOnly = () => ({
+  component: Button,
+  props: {
+    text: 'Action only',
+    onClick: action('log 1'),
+  },
+});
+
+actionOnly.story = {
+  name: 'Action only',
+};
+
+export const actionAndMethod = () => ({
+  component: Button,
+  props: {
+    text: 'Action and Method',
+    onClick: e => {
+      console.log(e);
+      e.preventDefault();
+      action('log2')(e.target);
     },
-  }));
+  },
+});
+
+actionAndMethod.story = {
+  name: 'Action and method',
+};

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

@@ -1,24 +1,28 @@
-import { storiesOf } from '@storybook/angular';
 import { withTests } from '@storybook/addon-jest';
 
 import { AppComponent } from '../app/app.component';
 // eslint-disable-next-line import/no-unresolved
 import * as results from '../../addon-jest.testresults.json';
 
-storiesOf('Addon|Jest', module)
-  .addDecorator(
+export default {
+  title: 'Addon|Jest',
+  decorators: [
     withTests({
       results,
       filesExt: '((\\.specs?)|(\\.tests?))?(\\.ts)?$',
-    })
-  )
-  .add(
-    'app.component with jest tests',
-    () => ({
-      component: AppComponent,
-      props: {},
     }),
-    {
-      jest: 'app.component',
-    }
-  );
+  ],
+};
+
+export const appComponentWithJestTests = () => ({
+  component: AppComponent,
+  props: {},
+});
+
+appComponentWithJestTests.story = {
+  name: 'app.component with jest tests',
+
+  parameters: {
+    jest: 'app.component',
+  },
+};

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

@@ -1,4 +1,3 @@
-import { storiesOf } from '@storybook/angular';
 import { action } from '@storybook/addon-actions';
 
 import {
@@ -17,24 +16,27 @@ import {
 import { SimpleKnobsComponent } from './knobs.component';
 import { AllKnobsComponent } from './all-knobs.component';
 
-storiesOf('Addon|Knobs', module)
-  .addParameters({
+export default {
+  title: 'Addon|Knobs',
+  decorators: [withKnobs],
+  parameters: {
     knobs: {
       disableDebounce: true,
     },
-  })
-  .addDecorator(withKnobs)
-  .add('Simple', () => {
-    const name = text('name', 'John Doe');
-    const age = number('age', 0);
-    const phoneNumber = text('phoneNumber', '555-55-55');
+  },
+};
 
-    return {
-      moduleMetadata: {
-        entryComponents: [SimpleKnobsComponent],
-        declarations: [SimpleKnobsComponent],
-      },
-      template: `
+export const simple = () => {
+  const name = text('name', 'John Doe');
+  const age = number('age', 0);
+  const phoneNumber = text('phoneNumber', '555-55-55');
+
+  return {
+    moduleMetadata: {
+      entryComponents: [SimpleKnobsComponent],
+      declarations: [SimpleKnobsComponent],
+    },
+    template: `
         <h1> This is a template </h1>
         <storybook-simple-knobs-component
           [age]="age"
@@ -43,56 +45,70 @@ storiesOf('Addon|Knobs', module)
         >
         </storybook-simple-knobs-component>
       `,
-      props: {
-        name,
-        age,
-        phoneNumber,
-      },
-    };
-  })
-  .add('All knobs', () => {
-    const name = text('name', 'Jane');
-    const stock = number('stock', 20, {
-      range: true,
-      min: 0,
-      max: 30,
-      step: 5,
-    });
-    const fruits = {
-      Apple: 'apples',
-      Banana: 'bananas',
-      Cherry: 'cherries',
-    };
-    const fruit = select('fruit', fruits, 'apples');
-    const otherFruits = {
-      Kiwi: 'kiwi',
-      Guava: 'guava',
-      Watermelon: 'watermelon',
-    };
-    const otherFruit = radios('Other Fruit', otherFruits, 'watermelon');
-    const price = number('price', 2.25);
+    props: {
+      name,
+      age,
+      phoneNumber,
+    },
+  };
+};
+
+simple.story = {
+  name: 'Simple',
+};
+
+export const allKnobs = () => {
+  const name = text('name', 'Jane');
+  const stock = number('stock', 20, {
+    range: true,
+    min: 0,
+    max: 30,
+    step: 5,
+  });
+  const fruits = {
+    Apple: 'apples',
+    Banana: 'bananas',
+    Cherry: 'cherries',
+  };
+  const fruit = select('fruit', fruits, 'apples');
+  const otherFruits = {
+    Kiwi: 'kiwi',
+    Guava: 'guava',
+    Watermelon: 'watermelon',
+  };
+  const otherFruit = radios('Other Fruit', otherFruits, 'watermelon');
+  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,
+      fruit,
+      otherFruit,
+      price,
+      border,
+      today,
+      items,
+      nice,
+    },
+  };
+};
+
+allKnobs.story = {
+  name: 'All knobs',
+};
 
-    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!'));
+export const xssSafety = () => ({
+  template: text('Rendered string', '<img src=x onerror="alert(\'XSS Attack\')" >'),
+});
 
-    return {
-      component: AllKnobsComponent,
-      props: {
-        name,
-        stock,
-        fruit,
-        otherFruit,
-        price,
-        border,
-        today,
-        items,
-        nice,
-      },
-    };
-  })
-  .add('XSS safety', () => ({
-    template: text('Rendered string', '<img src=x onerror="alert(\'XSS Attack\')" >'),
-  }));
+xssSafety.story = {
+  name: 'XSS safety',
+};

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

@@ -1,11 +1,18 @@
 import { linkTo } from '@storybook/addon-links';
-import { storiesOf } from '@storybook/angular';
 import { Button } from '@storybook/angular/demo';
 
-storiesOf('Addon|Links', module).add('button with link to another story', () => ({
+export default {
+  title: 'Addon|Links',
+};
+
+export const buttonWithLinkToAnotherStory = () => ({
   component: Button,
   props: {
     text: 'Go to Welcome Story',
     onClick: linkTo('Welcome'),
   },
-}));
+});
+
+buttonWithLinkToAnotherStory.story = {
+  name: 'button with link to another story',
+};

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

@@ -1,34 +1,39 @@
-import { storiesOf } from '@storybook/angular';
 import { Button } from '@storybook/angular/demo';
 
-storiesOf('Addon|Notes', module)
-  .add(
-    'Simple note',
-    () => ({
-      component: Button,
-      props: {
-        text: 'Notes on some Button',
-        onClick: () => {},
-      },
-    }),
-    { notes: 'My notes on some button' }
-  )
-  .add(
-    'Note with HTML',
-    () => ({
-      component: Button,
-      props: {
-        text: 'Notes with HTML',
-        onClick: () => {},
-      },
-    }),
-    {
-      notes: `
-      <h2>My notes on emojis</h2>
+export default {
+  title: 'Addon|Notes',
+};
 
-      <em>It's not all that important to be honest, but..</em>
+export const simpleNote = () => ({
+  component: Button,
+  props: {
+    text: 'Notes on some Button',
+    onClick: () => {},
+  },
+});
 
-      Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
-    `,
-    }
-  );
+simpleNote.story = {
+  name: 'Simple note',
+  parameters: { notes: 'My notes on some button' },
+};
+
+export const noteWithHtml = () => ({
+  component: Button,
+  props: {
+    text: 'Notes with HTML',
+    onClick: () => {},
+  },
+});
+
+noteWithHtml.story = {
+  name: 'Note with HTML',
+  parameters: {
+    notes: `
+    <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! 😇
+  `,
+  },
+};

examples/angular-cli/src/stories/app.component.stories.ts

@@ -1,7 +1,14 @@
-import { storiesOf } from '@storybook/angular';
 import { AppComponent } from '../app/app.component';
 
-storiesOf('App Component', module).add('Component with separate template', () => ({
+export default {
+  title: 'App Component',
+};
+
+export const componentWithSeparateTemplate = () => ({
   component: AppComponent,
   props: {},
-}));
+});
+
+componentWithSeparateTemplate.story = {
+  name: 'Component with separate template',
+};