How to use the @storybook/ember.storiesOf function in @storybook/ember

/* 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 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>
      
    `,

import hbs from 'htmlbars-inline-precompile';
import { storiesOf } from '@storybook/ember';

storiesOf('Welcome', module)
  .addParameters({ options: { showPanel: false } })
  .add('basic', () => ({
    template: hbs`
        {{welcome-page}}
      `,
  }));

AWS: 'aws/client',
  Azure: 'azure',
  Cert: 'cert',
  GCP: 'gcp',
  Github: 'github',
  JWT: 'jwt',
  Kubernetes: 'kubernetes',
  LDAP: 'ldap',
  OKTA: 'okta',
  Radius: 'radius',
  Userpass: 'userpass',
};

const DEFAULT_VALUE = 'aws/client';

storiesOf('AuthConfigForm/Options', module)
  .addParameters({ options: { showPanel: true } })
  .addDecorator(withKnobs())
  .add(
    `Options`,
    () => ({
      template: hbs`
        <h5 class="title is-5">Options</h5>
        {{auth-config-form/options (compute (action 'getModel' model))}}
    `,
      context: {
        actions: {
          getModel(modelType) {
            return Ember.getOwner(this)
              .lookup('service:store')
              .createRecord(`auth-config/${modelType}`);
          },