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

/* global document */
import {storiesOf} from '@storybook/html';
import {withKnobs, text, boolean, select} from '@storybook/addon-knobs/react';

const stories = storiesOf('UIkit', module);

const values = window.parent._storyBookUIkit;

function getStyleSheet() {
    const suffix = values.current && values.current.isRTL ? '-rtl' : '';
    return {
        UIkit: `https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.6/css/uikit${suffix}.min.css`,
        Theme: `https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.6/css/uikit-core${suffix}.min.css`
    };
}

const opts = Object.keys(getStyleSheet()).reduce((last, curr) => {
    last[curr] = curr;
    return last;
}, {});

/* eslint-disable react/no-danger */
/* global document */
import { storiesOf } from '@storybook/html';
import { text, withKnobs } from '@storybook/addon-knobs';
import React from 'react';
import ReactDOM from 'react-dom';
import AXACookieDisclaimerReact from './AXACookieDisclaimerReact';
import withNoBorder from '../../../../../.storybook/addons/no-border';
import AXALinkReact from './AXALinkReact';
import Readme from '../README.md';

storiesOf('Molecules/Cookie disclaimer/React', module)
  .addDecorator(withNoBorder)
  .addDecorator(withKnobs)
  .addParameters({
    readme: {
      sidebar: Readme,
    },
  })
  .add('Cookie disclaimer - default', () => {
    const buttonname = text('buttonname', 'Accept');
    const title = text('text', 'This website uses cookies');
    const description = text(
      'Description (not an attribute)',
      'Any Description for the cookie disclaimer'
    );
    const dataProtection = text(
      'Link text (not an attribute)',

import { storiesOf } from "@storybook/html";
import { withKnobs, text } from "@storybook/addon-knobs";

const stories = storiesOf("Section", module).addDecorator(withKnobs);

stories.add(
  "In-line Content",
  () =>
    `${text(
      "In-line Content",
      "This shows in line content"
    )}`
);

stories.add(
  "Header Slot",
  () =>
    `<h1 slot="header">${text(
      "Header Text",
      "Header"</h1>

import { storiesOf } from '@storybook/html';
import notes from './readme.md';
import { withKnobs, text, select, radios } from "@storybook/addon-knobs";

storiesOf('Buttons', module)
  .addDecorator(withKnobs)
  .add('Normal', () => {
      const theme = select(
        'theme',
        ['primary', 'secondary', 'white', 'info', 'success', 'warning', 'alert', 'light', 'black'],
        'white'
      );
      const innerText = text('innerText', 'Normal');
      const fill = radios('fill', ['flat', 'solid', 'clear'], 'solid');
      const size = radios('size', ['small', 'big', 'normal'], 'normal');

      return `
        
          ${innerText}
        
      `;

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

storiesOf('Styles/Sidebar', module)
  .add(
    'Simple',
    () => `
    <nav style="width: 300px;" class="oui-sidebar">
      <div class="oui-sidebar-menu">
        <ul class="oui-sidebar-list">
          <li class="oui-sidebar-list__item">
            <a href="#" class="oui-sidebar-link oui-sidebar-link_active">
              Service 1
            </a>
          </li>
          <li class="oui-sidebar-list__item">
            <a href="#" class="oui-sidebar-link">
              Service 2
            </a>
          </li></ul></div></nav>

"topLine": "30% student discount",
      "link": {
        "_meta": {
          "schema": "https://dev-solutions.s3.amazonaws.com/DynamicContentTypes/Accelerators/link.json"
        },
        "value": "http://dev-solutions.s3.amazonaws.com/dc-demo-site/dist/productlist/index.html?c=f49907fd-99df-4446-85b7-4c3235aac82a&s=e6bdb253-db3c-4458-b5cc-0d90aa02e114"
      },
      "backgroundColour": "d3d3d3",
      "bottomLine": "excludes sale. t&c's apply",
      "toplineColour": "000000"
    }
  ],
  "@type": "https://dev-solutions.s3.amazonaws.com/DynamicContentTypes/Accelerators/promobanner.json"
};

storiesOf('Promo', module)
  .add('Single Promo', () => renderContent('acc-template-promo', sampleContent))
  .add('Promo List', () => renderContent('acc-template-promoList', samplePromoListContent));

[
      { html: '<span>18</span>' },
      { html: '<span>Maria</span>' },
      { html: '<span>Frauenfeld</span>' },
      { html: 'E' },
    ],
    [
      { html: '<span>29</span>' },
      { html: '<span>David</span>' },
      { html: '<span>Frauenfeld</span>' },
      { html: 'F' },
    ],
  ],
};

storiesOf('Organisms/Table Sortable', module)
  .addDecorator(withKnobs)
  .addParameters({
    readme: {
      sidebar: Readme,
    },
  })
  .add(
    'Table Sortable',
    () =&gt; {
      const wrapper = document.createElement('div');

      const innerscroll = text('innerscroll', '');
      const maxheight = text('maxheight', '');

      const template = html`

.map(entry => {
      const [file, module] = entry;
      const name = basename(file, '.js');
      const doc = docs.components.find(item => item.tag === name);
      const item = {
        ...module.default,
        name,
        doc,
        kind: story.kind,
      };

      storiesOf(story.kind, module)
        .addDecorator(withLinks)
        .add(
          item.title,
          () => (item.method || renderItems)(item),
        );
    });
}

import notes from './readme.md';
import { storiesOf } from '@storybook/html';
import { select, text } from '@storybook/addon-knobs';

const orientations = {
  'horizontal': 'is-horizontal',
  'vertical': 'is-vertical',
};


storiesOf('Layout|Divider', module)
  .addParameters({
    notes: {
      markdown: notes,
    },
  })

  .add('Example', () => {
    return `