How to use @storybook/addon-options - 10 common examples

try {
  releases = require('../dist/releases.json');
} catch (error) {
  // console.log(error);
}

// Loads all components
defineCustomElements('all');
// Load individual components:
// defineCustomElements(['c-header','c-footer','c-navigation','user-repos','c-card','c-theme']);

addTheme(scania);

addDecorator(
  withOptions({
    name,
    showAddonPanel: false,
    url: releases ? JSON.stringify(releases) : '/',
  }),
);

configure(() => require('./stories'), module);

import "./polyfills.js";

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

addDecorator(
	withOptions({
		name: "carbon components angular",
		url: "https://github.com/IBM/carbon-components-angular",
	})
);

// load global styles
require("!style-loader!css-loader!postcss-loader!sass-loader!./preview.scss");

require("../src/index.stories");
// automatically import all files ending in *.stories.ts
const req = require.context("../src", true, /.stories.ts$/);

function loadStories() {
	req.keys()
	.sort((path1, path2) => path1.split("/").slice(-1)[0] > path2.split("/").slice(-1)[0] ? 1 : -1)
	.forEach(filename => {

const theme = {...themes.normal,
  // mainBackground: '#4c4c4c',
  // mainFill: '#ababab',
  // barFill: '#4c4c4c',
  // barSelectedColor: 'white',
  // highlightColor: 'red'
  // mainTextColor: 'white'
  brand: {
    background: '#F1618C',
    color: 'white'
  }
}

addDecorator(
  withOptions({
    name: 'Addon Console',
    url: 'https://github.com/storybooks/storybook-addon-console',
    theme,
  })
  );
  console.log('TCL: themes.dark', theme);

addDecorator(
  (story, { kind }) =>
    kind === 'Core|Errors' ? (
      story()
    ) : (
      {story()}
    )
);

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);

}

chaptersAddonSetDefaults({
    sectionOptions: {
        useTheme: true, // TODO: Make own distinct theme
        showSource: false,
        allowSourceToggling: true,
        showPropTables: false,
        allowPropTablesToggling: true,
    },
});
setAddon(chaptersAddon);

addDecorator(withKnobs);

setOptions(addonOptions);

configure(loadStories, module);

import { addDecorator, configure } from '@storybook/react';
import { withOptions } from '@storybook/addon-options';

import '@babel/polyfill';

addDecorator(
  withOptions({
    name: 'Shared Components',
    url: 'https://github.com/shared-components/shared-components',
    sortStoriesByKind: true,
  })
);

configure(loadStories, module);

function importAll(req) {
  req.keys().forEach(filename => req(filename));
}

function loadStories() {
  let req;

  req = require.context(`.`, true, /.stories.js$/);

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

addDecorator(
  withOptions({
    name: "Teddy",
    showAddonPanel: false
  })
);

function loadStories() {
  require("./stories/index.js");
}

configure(loadStories, module);

import { addDecorator, configure } from '@storybook/react';
import { withOptions } from '@storybook/addon-options';

const req = require.context(
  '../src/js',
  true,
  /\.stories\.js$|\/stories\/.*\.js$/,
);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

addDecorator(
  withOptions({
    name: 'Grommet Storybook',
    url: 'https://v2.grommet.io',
  }),
);

configure(loadStories, module);

"../packages/folo-layout/stories",
  true,
  /.stories.js$/
);

const foloForms = require.context(
  "../packages/folo-forms/stories",
  true,
  /.stories.js$/
);

requests.push(foloValues);
requests.push(foloLayout);
requests.push(foloForms);

const opts = withOptions({
  name: "Folo",
  url: "https://jalal246.github.io/folo/"
});

function loadStories() {
  addDecorator(withKnobs);
  addDecorator(withInfo);
  addDecorator(opts);

  requests.forEach(req => {
    req.keys().forEach(fname => req(fname));
  });
}

configure(loadStories, module);

import { configure, addDecorator } from "@storybook/react"
import { withOptions } from "@storybook/addon-options"
import { withInfo } from "@storybook/addon-info"

import "../src/index.css"

addDecorator(withInfo)
addDecorator(
  withOptions({
    name: "Sequencer — Components",
    url: "https://glimberger.github.io/react-redux-sequencer/"
  })
)

const req = require.context("../src/components", true, /\.stories\.tsx$/)

function loadStories() {
  req.keys().forEach(filename => req(filename))
}

configure(loadStories, module)