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

import { storiesOf } from "@storybook/polymer";
import * as storybookBridge from "@storybook/addon-knobs/polymer";
import { HaxEditable } from "./hax-editable.js";

// need to account for polymer goofiness when webpack rolls this up
var template = require("raw-loader!./demo/index.html");
let pattern = /]*>((.|[\n\r])*)<\/body>/im;
var array_matches = pattern.exec(template);
// now template is just the body contents
template = array_matches[1];
const stories = storiesOf("Editable", module);
stories.addDecorator(storybookBridge.withKnobs);
stories.add("hax-editable", () => {
  var binding = {};
  // start of tag for demo
  let elementDemo = `

import { storiesOf } from "@storybook/polymer";
import * as storybookBridge from "@storybook/addon-knobs/polymer";
import { H5PElement } from "./h5p-element.js";
import "@polymer/iron-demo-helpers/demo-snippet.js";
// need to account for polymer goofiness when webpack rolls this up
var template = require("raw-loader!./demo/index.html");
let pattern = /]*>((.|[\n\r])*)<\/body>/im;
var array_matches = pattern.exec(template);
// now template is just the body contents
template = array_matches[1];
const stories = storiesOf("5", module);
stories.addDecorator(storybookBridge.withKnobs);
stories.add("h5p-element", () => {
  var binding = {};
  // start of tag for demo
  let elementDemo = `

import { storiesOf } from "@storybook/polymer";
import { withKnobs, text } from "@storybook/addon-knobs";
import { html } from "lit-html";
import "../../packages/rice-ball-dessert/src/chameleon-rice-ball-dessert";

const stories = storiesOf("Rice Ball Dessert", module);

// Typecasting this as "any" is a quick workaround. Please come back
// to this and make these types compatible.
stories.addDecorator(withKnobs as any);

stories.add(
  "Basic",
  () => {
    const ballColor = text("Ball Color", "");
    return html`
      
    `;
  },
  { info: { inline: true } }

import { storiesOf } from "@storybook/polymer";
import * as storybookBridge from "@storybook/addon-knobs/polymer";
import { WysiwygRedux } from "./wysiwyg-redux.js";

// need to account for polymer goofiness when webpack rolls this up
var template = require("raw-loader!./demo/index.html");
let pattern = /]*>((.|[\n\r])*)<\/body>/im;
var array_matches = pattern.exec(template);
// now template is just the body contents
template = array_matches[1];
const stories = storiesOf("Redux", module);
stories.addDecorator(storybookBridge.withKnobs);
stories.add("wysiwyg-redux", () => {
  var binding = {};
  // start of tag for demo
  let elementDemo = `

import { storiesOf } from "@storybook/polymer";
import * as storybookBridge from "@storybook/addon-knobs/polymer";
import { HaxEditbar } from "./hax-editbar.js";

// need to account for polymer goofiness when webpack rolls this up
var template = require("raw-loader!./demo/index.html");
let pattern = /]*>((.|[\n\r])*)<\/body>/im;
var array_matches = pattern.exec(template);
// now template is just the body contents
template = array_matches[1];
const stories = storiesOf("Editbar", module);
stories.addDecorator(storybookBridge.withKnobs);
stories.add("hax-editbar", () => {
  var binding = {};
  // start of tag for demo
  let elementDemo = `

import { storiesOf } from "@storybook/polymer";
import { withKnobs, text } from "@storybook/addon-knobs";
import { html } from "lit-html";
import "../../packages/skeleton/src/chameleon-skeleton";

const stories = storiesOf("Skeleton", module);

// Typecasting this as "any" is a quick workaround. Please come back
// to this and make these types compatible.
stories.addDecorator(withKnobs as any);

stories.add(
  "Skeleton",
  () => {
    const height = text("Height", "100%");
    const width = text("Width", "100%");

    return html`
      
      
    `;
  },

import { storiesOf } from "@storybook/polymer";
import { withKnobs, text } from "@storybook/addon-knobs";
import { eventDetails } from "../utils";
import { html } from "lit-html";
import "@chameleon-ds/date/src/chameleon-date";

const stories = storiesOf("Date", module);

stories.addDecorator(withKnobs);

stories.add(
  "Date",
  () => {
    const placeholder = text("Placeholder", "Select Date");
    const label = text("Label", "Date *");
    const minValue = text("Min Value (YYYY-MM-DD)", "");
    const maxValue = text("Max Value (YYYY-MM-DD)", "");

    return html`

import { storiesOf } from "@storybook/polymer";
import { withKnobs, boolean, text } from "@storybook/addon-knobs";
import { html } from "lit-html";
import "@chameleon-ds/card/src/chameleon-card";
import "@chameleon-ds/card-header/src/chameleon-card-header";
import "@chameleon-ds/card-image/src/chameleon-card-image";
import "@chameleon-ds/card-footer/src/chameleon-card-footer";
import "@chameleon-ds/button/src/chameleon-button";

const stories = storiesOf("Card", module);

stories.addDecorator(withKnobs);

stories.addParameters({
  backgrounds: [
    { name: "gray", value: "#f5f5f8", default: true },
    { name: "black", value: "#252a33" }
  ]
});

stories.add(
  "Basic",
  () => {
    const subtitleText = text("Subtitle", "Destination");
    const titleText = text("Title", "St. Louis, MO");

import { storiesOf } from "@storybook/polymer";
import { withKnobs, text } from "@storybook/addon-knobs/polymer";
import "./rh-number";

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

stories.add("rh-number", () => {
  const ordinal = text("Ordinal", "1");
  const bytes = text("Bytes", "2017");
  const abbreviation = text("Abbreviation", "12345");
  const percent = text("Percent", "0.5678");
  const e = text("e", "2000000");
  const thousands = text("Thousands", "987654321.123456789");

  return `
    <style>
      #rhNumberTable thead th {
        text-align: left;
      }
</style>

import { storiesOf } from "@storybook/polymer";
import { withKnobs } from "@storybook/addon-knobs";
import { eventDetails } from "../utils";
import { html } from "lit-html";
import "@chameleon-ds/accordion/src/chameleon-accordion";

const stories = storiesOf("Accordion", module);

stories.addDecorator(withKnobs);

const storyAccordionItems = [
  {
    header: "What is love?",
    panel: "Baby don't hurt me"
  },
  {
    header: "Who are you?",
    panel: "Who who"
  },
  {
    header: "Why do birds suddenly appear every time you are near?",
    panel: "Just like me, they long to be close to you"
  }