How to use @storybook/html - 10 common examples

/* 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)',

base: 'light',
      brandTitle: 'JetBrains Ring UI',
      ...theme
    })
  },
  a11y: {
    options: {
      rules: {
        // TODO enable when RG-2054 is fixed
        'color-contrast': {enabled: false}
      }
    }
  }
});

addDecorator(withA11y);
addDecorator(stylesDecorator());

const req = require.context('../components', true, /\.examples\.js$/);

function loadStories() {
  return [
    // Make welcome stories default
    require('../components/welcome.examples'),
    ...req.keys().map(filename => req(filename))
  ];
}

configure(loadStories, module);

import { configure, addDecorator } from "@storybook/html";
import { withOptions } from "@storybook/addon-options";

import "../src/main.scss";

addDecorator(
  withOptions({
    hierarchyRootSeparator: /\|/
  })
);

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

configure(loadStories, module);

import '../_spark.scss';
import '../../storybook-theming/_docs.scss';
import { configure, addParameters, addDecorator } from '@storybook/html';
import { withA11y } from '@storybook/addon-a11y';
import sparkTheme from '../../storybook-theming/storybook-spark-theme';
import 'iframe-resizer/js/iframeResizer.contentWindow.min';
import '!style-loader!css-loader!sass-loader!../../storybook-theming/font-loader.scss';
import '../../storybook-theming/icon-loader';

addDecorator(withA11y);

// Option defaults
addParameters({
  options: {
    theme: sparkTheme,
    showRoots: true,
    storySort: (a, b) =>
      a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, { numeric: true }),
  },
});

addParameters({
  docs: {
    extractComponentDescription: (component, { info }) => {
      if (info) {
        return typeof info === 'string' ? info : info.markdown || info.text;

import Twig from 'twig';
import twigDrupal from 'twig-drupal-filters';

// Add the filters to Drupal.
twigDrupal(Twig);

// Automatically import all files ending in *.stories.js
const twig = require.context('../twig', true, /\.stories\.(ts|js)$/);
const editor = require.context('../editor', true, /\.stories\.(ts|js)$/);
function loadStories() {
  twig.keys().forEach(filename => twig(filename));
  editor.keys().forEach(filename => editor(filename));
}

// Helps make UI components more accessible.
addDecorator(withA11y);

configure(loadStories, module);

brandTitle: 'JetBrains Ring UI',
      ...theme
    })
  },
  a11y: {
    options: {
      rules: {
        // TODO enable when RG-2054 is fixed
        'color-contrast': {enabled: false}
      }
    }
  }
});

addDecorator(withA11y);
addDecorator(stylesDecorator());

const req = require.context('../components', true, /\.examples\.js$/);

function loadStories() {
  return [
    // Make welcome stories default
    require('../components/welcome.examples'),
    ...req.keys().map(filename => req(filename))
  ];
}

configure(loadStories, module);

import { withA11y } from '@storybook/addon-a11y';
import { withKnobs } from '@storybook/addon-knobs';

import { withCenteredLayout } from '../src/vcentered-addon/index'

import 'angular';
import 'angular-aria';
import 'angular-sanitize';

// Load src for livereload
import '@ovh-ux/ui-kit-builder';
import '../src/index.less';

// Addons
addDecorator(withA11y);
addDecorator(withKnobs);
addDecorator(withCenteredLayout);

// Options
addParameters({
  options: {
    name: 'OVH UI Kit',
    panelPosition: 'bottom',
  },
});

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

addDecorator(
  withOptions({
    hierarchyRootSeparator: /\|/
  })
);

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

configure(loadStories, module);

});

addDecorator(withA11y);
addDecorator(stylesDecorator());

const req = require.context('../components', true, /\.examples\.js$/);

function loadStories() {
  return [
    // Make welcome stories default
    require('../components/welcome.examples'),
    ...req.keys().map(filename => req(filename))
  ];
}

configure(loadStories, module);