How to use @storybook/ember - 10 common examples

/* eslint-disable import/extensions */
import hbs from 'htmlbars-inline-precompile';
import { storiesOf } from '@storybook/ember';
import notes from './home-link.md';

storiesOf('HomeLink/', module)
  .addParameters({ options: { showPanel: false } })
  .add(
    'HomeLink',
    () => ({
      template: hbs`
        <h5 class="title is-5">HomeLink</h5>
        
        <br>
        <h5 class="title is-5">HomeLink with LogoEdition</h5>
        
          
        
    `,
    }),
    { notes }
  );

/* eslint-disable import/extensions */
import hbs from 'htmlbars-inline-precompile';
import { storiesOf } from '@storybook/ember';
import notes from './alert-banner.md';
import { MESSAGE_TYPES } from '../lib/core/addon/helpers/message-types.js';


storiesOf('Alerts/AlertBanner/', module)
  .addParameters({ options: { showPanel: false } })
  .add(
    'AlertBanner',
    () => ({
      template: hbs`
      {{#each types as |type|}}
        <h5 class="title is-5">{{humanize type}}</h5>
        
      {{/each}}
    `,
      context: {
        types: Object.keys(MESSAGE_TYPES),
        message: 'Here is a message.',
      },
    }),
    { notes }

import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
import theme from './theme.js';
import { assign } from '@ember/polyfills';

function loadStories() {
  // automatically import all files ending in *.stories.js
  const req = require.context('../stories/', true, /.stories.js$/);
  req.keys().forEach(filename => req(filename));
}

addParameters({
  viewport: { viewports: INITIAL_VIEWPORTS },
  options: { theme },
});

addDecorator(storyFn => {
  const { template, context } = storyFn();

  // This adds styling to the Canvas tab.
  const styles = {
    style: {
      margin: '20px',
    },
  };

  // Create a div to wrap the Canvas tab with the applied styles.
  const element = document.createElement('div');
  assign(element.style, styles.style);

  const innerElement = document.createElement('div');
  const wormhole = document.createElement('div');
  wormhole.setAttribute('id', 'ember-basic-dropdown-wormhole');

import { load, addParameters } from '@storybook/ember';

addParameters({
  options: {
    hierarchySeparator: /\/|\./,
    hierarchyRootSeparator: /\|/,
  },
});

// FIXME require('../stories/index.stories');
load(require.context('../stories', true, /\.stories\.js$/), module);

import hbs from 'htmlbars-inline-precompile';
import { storiesOf } from '@storybook/ember';
import { withKnobs, text, boolean } from '@storybook/addon-knobs';
import notes from './confirm-action.md';

storiesOf('Confirm/ConfirmAction', module)
  .addParameters({ options: { showPanel: true } })
  .addDecorator(
    withKnobs({
      escapeHTML: false,
    })
  )
  .add(
    `ConfirmAction`,
    () => ({
      template: hbs`
        <h5 class="title is-5">Confirm Action</h5>

import hbs from 'htmlbars-inline-precompile';
import { storiesOf } from '@storybook/ember';
import notes from './message-error.md';
import EmberObject from '@ember/object';

let model = EmberObject.create({
  adapterError: {
    message: 'This is an adapterError on the model',
  },
  isError: true,
});

storiesOf('MessageError', module)
  .addParameters({ options: { showPanel: true } })
  .add(
    `MessageError`,
    () => ({
      template: hbs`
      <h5 class="title is-5">Message Error</h5>
      
    `,
      context: {
        model,
      },
    }),
    { notes }
  );

import hbs from 'htmlbars-inline-precompile';
import { storiesOf } from '@storybook/ember';
import notes from './layout-loading.md';

storiesOf('LayoutLoading', module)
  .addParameters({ options: { showPanel: true } })
  .add(
    `LayoutLoading`,
    () => ({
      template: hbs`
        <h5 class="title is-5">Layout Loading</h5>
        
    `,
      context: {},
    }),
    { notes }
  );

const COUNTERS = [
  { start_time: '2017-04-01T00:00:00Z', total: 5500 },
  { start_time: '2018-06-01T00:00:00Z', total: 4500 },
  { start_time: '2018-07-01T00:00:00Z', total: 4500 },
  { start_time: '2018-08-01T00:00:00Z', total: 6500 },
  { start_time: '2018-09-01T00:00:00Z', total: 5500 },
  { start_time: '2018-10-01T00:00:00Z', total: 4500 },
  { start_time: '2018-11-01T00:00:00Z', total: 6500 },
  { start_time: '2018-12-01T00:00:00Z', total: 5500 },
  { start_time: '2019-01-01T00:00:00Z', total: 2500 },
  { start_time: '2019-02-01T00:00:00Z', total: 3500 },
  { start_time: '2019-03-01T00:00:00Z', total: 5000 },
];

storiesOf('HttpRequests/HttpRequestsContainer', module)
  .addParameters({ options: { showPanel: true } })
  .addDecorator(withKnobs())
  .add(
    `HttpRequestsContainer`,
    () => ({
      template: hbs`
        <h5 class="title is-5">Http Requests Container</h5>
        
    `,
      context: {
        counters: object('counters', COUNTERS),
      },
    }),
    { notes }
  );

import hbs from 'htmlbars-inline-precompile';
import { storiesOf } from '@storybook/ember';
import notes from './auth-form.md';

storiesOf('AuthForm', module)
  .addParameters({ options: { showPanel: false } })
  .add(
    `AuthForm`,
    () => ({
      template: hbs`
        <h5 class="title is-5">Auth Form</h5>
        
    `,
      context: {},
    }),
    { notes }
  );

import hbs from 'htmlbars-inline-precompile';
import { storiesOf } from '@storybook/ember';
import notes from './search-select.md';
import { withKnobs, text } from '@storybook/addon-knobs';

const onChange = value => alert(`New value is "${value}"`);
const models = ['identity/groups'];

storiesOf('SearchSelect', module)
  .addParameters({ options: { showPanel: true } })
  .addDecorator(withKnobs({ escapeHTML: false }))
  .add(
    `SearchSelect`,
    () => ({
      template: hbs`
      <h5 class="title is-5">Search Select</h5>
      
    `,