How to use the @kadira/storybook.setAddon function in @kadira/storybook

To help you get started, we’ve selected a few @kadira/storybook examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Drathal / react-playground / .storybook / config.js View on Github external
import React from 'react'
import { configure, setAddon, addDecorator } from '@kadira/storybook'
import infoAddon from '@kadira/react-storybook-addon-info'

import '../src/app/layout/layout-global.css'
import '../src/app/layout/fonts-global.css'
import '../src/app/layout/theme.css'
import './theme.css'

setAddon(infoAddon)

addDecorator((story) => (
  <div style="{{">
    {story()}
  </div>
))

const req = require.context('../src', true, /story\.js$/)

function loadStories() {
  req.keys().forEach(req)
}

configure(loadStories, module)
github zzarcon / skatepark.js / packages / demo / stories / tags.js View on Github external
import React from 'react';
import {
  storiesOf,
  setAddon
} from '@kadira/storybook';
import infoAddon from '@kadira/react-storybook-addon-info';
import 'skateparkjs-tags';
import Highlight from 'react-highlight';
import options from './defaultStoryOptions';

setAddon(infoAddon);

storiesOf('Tags', module)
  .addWithInfo('Enter a space-separated list of tags', () =&gt; (
    
  ), options)
  .addWithInfo('Custom delimiter', () =&gt; ( 
    
  ), options)
  .addWithInfo('Allow deletion', () =&gt; ( 
    
  ), options)
  .addWithInfo('Retrieving tags', () =&gt; {
    const onClick = () =&gt; {
      const skTags = document.getElementById('tags');

      alert(JSON.stringify(skTags.tags));
github CRUKorg / cruk-searchkit / .storybook / config.js View on Github external
import { configure, setAddon } from '@kadira/storybook';
import infoAddon from '@kadira/react-storybook-addon-info';

setAddon(infoAddon);

function loadStories() {
  require('../stories');
}

configure(loadStories, module);
github hackoregon / component-library / .storybook / config.js View on Github external
import { configure, setAddon } from '@kadira/storybook';
import infoAddon from '@kadira/react-storybook-addon-info';

setAddon(infoAddon);

function loadStories() {
  require('../stories');
}

configure(loadStories, module);
github eggheadio / egghead-ui / .storybook / config.js View on Github external
import 'tachyons-egghead'
import {configure, setAddon} from '@kadira/storybook'
import infoAddon from 'react-storybook-addon-info';
import withPropsCombinations, {setDefaults} from 'react-storybook-addon-props-combinations'

setAddon(infoAddon)
setAddon(withPropsCombinations)
setDefaults({
  showSource: false,
  mustProvideAllProps: true,
})

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

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

configure(loadStories, module)
github stipsan / uikit-react / .storybook / config.js View on Github external
import 'uikit/src/less/uikit.theme.less'

import infoAddon from '@kadira/react-storybook-addon-info'
import { configure, setAddon, addDecorator } from '@kadira/storybook'

import Logo from './Logo'

setAddon(infoAddon)

addDecorator((fn, { kind, story }) =&gt; <div>
  <nav>
    <div>
      <ul>
        <li>
          <a>
            <div>
              {kind}
              <div>{story}</div>
            </div>
          </a>
        </li>
      </ul>
    </div>
    <div></div></nav></div>
github Talend / ui / stories / CircularProgress.js View on Github external
import React from 'react';
import { storiesOf, setAddon } from '@kadira/storybook';
import infoAddon from '@kadira/react-storybook-addon-info';

import { CircularProgress } from '../src';

setAddon(infoAddon);

storiesOf('CircularProgress', module)
	.addWithInfo('default', () =&gt; (
		<div>
			<h1>CircularProgress</h1>
			<h2>Definition</h2>
			<p>Show a spinning progress indicator</p>
			<h2>Examples</h2>
			<p>By default :</p>
			
			<h3>Small</h3>
			
			<h3>Small on color</h3>
			<div style="{{">
				
			</div></div>
github scalable-react / scalable-react-typescript-boilerplate / config / .storybook / config.js View on Github external
import { configure, setAddon } from '@kadira/storybook';
import infoAddon from '@kadira/react-storybook-addon-info';
import withPropsCombinations, { setDefaults } from 'react-storybook-addon-props-combinations'

setAddon(withPropsCombinations)

setAddon(infoAddon);

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

configure(loadStories, module);
github Talend / ui / stories / Breadcrumbs.js View on Github external
import React from 'react';
import { storiesOf, setAddon, action } from '@kadira/storybook';
import infoAddon from '@kadira/react-storybook-addon-info';
import { Breadcrumbs } from '../src/index';

setAddon(infoAddon);

storiesOf('Breadcrumbs', module)
	.addWithInfo('default', () =&gt; {
		const items = [
			{ text: 'Text A', title: 'Text title A', onClick: action('Text A clicked') },
			{ text: 'Text B', title: 'Text title B', onClick: action('Text B clicked') },
			{ text: 'Text C', title: 'Text title C', onClick: action('Text C clicked') },
		];
		return (
			<div>
				
			</div>
		);
	})
	.addWithInfo('with max items reached', () =&gt; {
		const items = [
github eggheadio / egghead-ui / .storybook / config.js View on Github external
import 'tachyons-egghead'
import {configure, setAddon} from '@kadira/storybook'
import infoAddon from 'react-storybook-addon-info';
import withPropsCombinations, {setDefaults} from 'react-storybook-addon-props-combinations'

setAddon(infoAddon)
setAddon(withPropsCombinations)
setDefaults({
  showSource: false,
  mustProvideAllProps: true,
})

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

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

configure(loadStories, module)