How to use @storybook/polymer - 10 common examples

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 { configure } from '@storybook/polymer';

// automatically import all files ending in *.stories.js
configure(require.context('../src/stories', true, /\.stories\.js$/), module);

import { setOptions } from '@storybook/addon-options';
import '@storybook/addon-console';

addDecorator(withKnobs);

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

setOptions({
    selectedAddonPanel: 'storybooks/storybook-addon-knobs',
});

configure(loadStories, module);

backgrounds: [
    { name: 'Default', value: '#f5f5f5' },
    { name: 'Dark', value: '#060826' },
    { name: 'Kawai', value: '#f8d3e0' },
    { name: 'Light', value: '#f7f7f7' },
  ],
  options: { theme },
});

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

configure(loadStories, module);

import { configure, addDecorator } from '@storybook/polymer';
import { withKnobs } from '@storybook/addon-knobs';
import { setOptions } from '@storybook/addon-options';
import '@storybook/addon-console';

addDecorator(withKnobs);

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

setOptions({
    selectedAddonPanel: 'storybooks/storybook-addon-knobs',
});

configure(loadStories, module);