How to use storybook-addon-angularjs - 10 common examples

import { storiesOf } from '@storybook/html';
import { forModule } from 'storybook-addon-angularjs';

import { compileTemplate } from '../../src/utils';

// Create mock module for the stories
const moduleName = 'oui-modal-stories';
angular.module(moduleName, ['oui.modal', 'oui.field', 'oui.password']);

storiesOf('Templates/Modal', module)
  .add(
    'Open a modal',
    forModule(moduleName).createElement(() => compileTemplate(`
      
        <form name="serverAccessForm" novalidate="">
          
            </form>

forModule(moduleName).createElement(() => compileTemplate(`
    
    
    `, {
      $ctrl: {
        disabled: boolean('Disabled state', false),
      },
    })),
  )
  .add(
    'Drag & Drop with preview',
    forModule(moduleName).createElement(() => compileTemplate(`
    
    
    `, {
      $ctrl: {
        disabled: boolean('Disabled state', false),
      },
    })), {
      notes: 'Preview works only with `image/*` files.',
    },
  );

type="text"
      class="oui-input oui-input_inline"
      placeholder="Search country name"
      ng-model="$ctrl.model"
      oui-autocomplete="$ctrl.suggestions"
      oui-autocomplete-on-select="$ctrl.onAutocomplete(value)">
    `, {
      $ctrl: {
        suggestions: strings,
        onAutocomplete: action('onAutocomplete'),
      },
    })),
  )
  .add(
    'Array of objects',
    forModule(moduleName).createElement(() => compileTemplate(`
    <input placeholder="Search country name" class="oui-input oui-input_inline" type="text">
    `, {
      $ctrl: {
        suggestions: objects,
        onAutocomplete: action('onAutocomplete'),
      },
    })),
  );

<p>Duis egestas nulla at euismod semper. Nullam bibendum auctor viverra. Sed posuere neque nulla, id cursus nisi molestie vel. Nulla ornare elit sit amet congue faucibus. Aliquam eget lorem id justo ornare pretium in sit amet lectus. Sed maximus odio id porttitor rhoncus. Quisque pulvinar mauris ut sapien dictum, ultrices fermentum orci efficitur. Cras nec auctor ante. Aliquam ornare eleifend neque, at condimentum lacus aliquet elementum. Mauris mattis porttitor tortor vel vehicula. Phasellus venenatis nibh nec viverra sollicitudin. Ut lobortis mattis mauris, vel euismod nibh faucibus a.</p>
      
    
    `, {
      $ctrl: {
        checked1: boolean('Check mark for tab 1', true),
        checked2: boolean('Check mark for tab 2', false),
        checked3: boolean('Check mark for tab 3', false),
      },
    })),
  )
  .add(
    'Active tab',
    forModule(moduleName).createElement(() =&gt; compileTemplate(`
      
        
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet congue urna. Praesent ultricies id ex convallis dictum. Pellentesque malesuada faucibus consectetur. Quisque vehicula tincidunt leo, quis auctor nisi luctus quis. Etiam purus lectus, placerat vitae vehicula at, molestie nec erat. Duis enim odio, maximus at laoreet in, finibus nec mi. Nam ultrices, lacus vitae egestas volutpat, libero odio gravida turpis, vitae dapibus ex mi nec quam. Pellentesque a tempor nibh.</p>
        
        
          <p>Proin egestas fermentum lectus nec euismod. Vivamus eu congue dui. Pellentesque sit amet pellentesque quam. Morbi posuere sem nec rutrum placerat. Vestibulum porttitor arcu eu risus tempor consectetur. Fusce aliquam bibendum aliquet. Morbi semper egestas iaculis. Ut sit amet sem et neque porta cursus pellentesque nec augue. Nullam semper in metus et luctus. Nunc molestie non ipsum a consequat. Etiam pellentesque laoreet lectus ut luctus. Nulla maximus, leo a mattis gravida, ligula felis vulputate libero, vitae fringilla nibh mauris nec dui. Fusce sed massa at arcu euismod dictum id sit amet lorem. Aliquam sed viverra sem, quis vehicula ligula. Vivamus blandit varius condimentum.</p>
        
        
          <p>Duis egestas nulla at euismod semper. Nullam bibendum auctor viverra. Sed posuere neque nulla, id cursus nisi molestie vel. Nulla ornare elit sit amet congue faucibus. Aliquam eget lorem id justo ornare pretium in sit amet lectus. Sed maximus odio id porttitor rhoncus. Quisque pulvinar mauris ut sapien dictum, ultrices fermentum orci efficitur. Cras nec auctor ante. Aliquam ornare eleifend neque, at condimentum lacus aliquet elementum. Mauris mattis porttitor tortor vel vehicula. Phasellus venenatis nibh nec viverra sollicitudin. Ut lobortis mattis mauris, vel euismod nibh faucibus a.</p>
        
      
    `, {
      $ctrl: {
        activeTab: text('Text', 'basic2'),
      },
    })),

External link
        
      
    `,
    {
      $ctrl: {
        disabled: boolean('Disabled state', false),
        onActionClick: action('onActionClick'),
      },
    })),
  )
  .add(
    'Compact',
    forModule(moduleName).createElement(() => compileTemplate(`
      
        
          Action 1 (button)
        
        
          Action 2 (link)
        
        
          Action 3 (disabled)
        
        
        
          External link
        
      
    `,

return compile`
        Cancel
        Confirm
        Need help?
      `;
    }),
  )
  .add(
    'Arrow buttons',
    forModule(moduleName).createElement((compile) => {
      const disabled = boolean('Disabled state', false);
      return compile`
        Previous
        Next
      `;
    }),
  );

import { storiesOf } from "@storybook/html";

import { withKnobs, text, number, array } from "@storybook/addon-knobs";
import { action } from "@storybook/addon-actions";

import { forModule } from "storybook-addon-angularjs";

storiesOf("Demo Component", module)
  .addDecorator(withKnobs)
  .add(
    "default",
    forModule("myApp").createElement(compile => {
      const name = text("Name", "Jane");
      const someString = text("Some String", "It works too!");

      const foo = {
        bar: number("Value", 20, { range: true, min: 0, max: 30, step: 1 })
      };

      const things = array("Things", ["a", "b", "c"], ",");

      const onEvt = action("clicked");

      return compile``;
    })
  );

varius luctus. Proin id iaculis arcu. Fusce justo arcu,
      egestas vel nulla nec, dictum cursus lacus. Aenean
      elementum vel odio quis rutrum. In quis tellus in neque
      vulputate rhoncus vitae ut justo. Ut dignissim varius est
      in consequat. Donec nisi mauris, pellentesque condimentum
      congue in, blandit ut arcu. In et elit ipsum.
    
    `, {
      $ctrl: {
        onToggle: action('onToggle'),
      },
    })),
  )
  .add(
    'Loading',
    forModule(moduleName).createElement(() => compileTemplate(`
    
      <span></span>
    
    `, {
      $ctrl: new class {
        constructor() {
          this.delay = 1000;
          this.expanded = false;
        }

        getContent() {

match="country.name"
      model="$ctrl.model"
      name="country"
      placeholder="{{ $ctrl.placeholder }}">
    
    `, {
      $ctrl: {
        items: countries,
        groupByFirstLetter: item => item.country.name.substr(0, 1).toUpperCase(),
        placeholder: 'Select a country...',
      },
    })),
  )
  .add(
    'Custom option template',
    forModule(moduleName).createElement(() => compileTemplate(`
    
      <span></span><br>
      <small>
        Code: <span></span>
      </small>
    
    `, {
      $ctrl: {
        items: countries,
        groupByFirstLetter: item =&gt; item.country.name.substr(0, 1).toUpperCase(),

multiple>
    
    `, {
      $ctrl: {
        disabled: boolean('Disabled state', false),
        items: countries,
        placeholder: 'Select a country...',
        onBlur: action('onBlur'),
        onChange: action('onChange'),
        onFocus: action('onFocus'),
      },
    })),
  )
  .add(
    'Disable items',
    forModule(moduleName).createElement(() => compileTemplate(`
    
    
    `, {
      $ctrl: new class {
        constructor() {
          this.items = countries;
          this.placeholder = 'Select a country...';
        }

        disableItems($item) {