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

boolean, number, text, withKnobs,
} from '@storybook/addon-knobs';

import readme from './README.md';

addDecorator(withKnobs);
addDecorator(withNotes);
addDecorator(
  withOptions({
    name: 'DEMO demo!!@@@',
    url: '#',
    // goFullScreen: true,
  }),
);
addDecorator((storyFn, context) => withConsole()(storyFn)(context));
addDecorator(withBackgrounds([
  { name: 'twitter', value: '#00aced' },
  { name: 'facebook', value: '#3b5998' },
]));

storiesOf('Button', module)

  .add('with text', () => (
    <div>
      <button> console.log(123)}
      &gt;
        console.log(123)
      </button>
      <button> console.log({
          some: { strong: [{ language: 123 }] },</button></div>

const createStoriesOf = ({ storybook, React, ...config }) => (...args) => {

  // if (DEBUG) console.log('storiesOf');
  const res = storybook.storiesOf(...args);

  if (config.notes) {
    res.addDecorator(require('@storybook/addon-notes').withNotes);
  }
  if (config.backgrounds) {
    res.addDecorator(require('@storybook/addon-backgrounds').default(config.backgrounds));
  }

  // if (config.info) {
  if (false) {
    res._add = res.add; // eslint-disable-line  no-underscore-dangle
    res.add = (...args2) => {
      if (DEBUG) console.log('res.add');

      if (res.inAdd) {
        return res._add(...args); // eslint-disable-line  no-underscore-dangle
      }
      res.inAdd = true;
      const result = res.addWithInfo ? res.addWithInfo(...args2) : res._add(...args2); // eslint-disable-line  no-underscore-dangle
      res.inAdd = false;
      return result;
    };

// @flow

import React from 'react';
import { storiesOf } from '@storybook/react';
import backgrounds from '@storybook/addon-backgrounds';
import { MemoryRouter } from 'react-router-dom';

import LanguageCard from './LanguageCard';

storiesOf('LanguageCard', module)
  .addDecorator(backgrounds([{ name: 'light', value: '#fcfafa', default: true }]))
  .add('default', () => (
    
      <div style="{{">
        
      </div>
    
  ))
  .add('with rank', () =&gt; (
    
      <div style="{{">
        </div>

// @flow

import React from 'react';
import { storiesOf } from '@storybook/react';
import backgrounds from '@storybook/addon-backgrounds';
import { MemoryRouter } from 'react-router-dom';
import { MockedProvider } from 'react-apollo/test-utils';

import Header from './Header';

storiesOf('Header', module)
  .addDecorator(backgrounds([{ name: 'dark', value: '#2d2e33', default: true }]))
  .add('default', () => (
    <div style="{{">
      
        
          <header>
        
      
    </header></div>
  ));

// @flow

import React from 'react';
import { storiesOf } from '@storybook/react';
import backgrounds from '@storybook/addon-backgrounds';
import { MemoryRouter } from 'react-router-dom';

import DeveloperCard from './DeveloperCard';

storiesOf('DeveloperCard', module)
  .addDecorator(backgrounds([{ name: 'light', value: '#fcfafa', default: true }]))
  .add('default', () => (
    
      <div style="{{">
        
      </div>
    
  ))

// @flow

import React from 'react';
import { storiesOf } from '@storybook/react';
import backgrounds from '@storybook/addon-backgrounds';
import { MemoryRouter } from 'react-router-dom';

import LocationCard from './LocationCard';

storiesOf('LocationCard', module)
  .addDecorator(backgrounds([{ name: 'light', value: '#fcfafa', default: true }]))
  .add('default', () => (
    
      <div style="{{">
        
      </div>
    
  ))
  .add('with rank', () =&gt; (
    
      <div style="{{"></div>

// @flow

import React from 'react';
import { storiesOf } from '@storybook/react';
import backgrounds from '@storybook/addon-backgrounds';
import { MemoryRouter } from 'react-router-dom';

import LinkBar from './LinkBar';
import Item from './Item';

storiesOf('LinkBar', module)
  .addDecorator(backgrounds([{ name: 'dark', value: '#2d2e33', default: true }]))
  .add('default', () => (
    <div style="{{">
      
        
           true}&gt;
            Link 1
          
          Link 2
          Link 3
        
      
    </div>
  ))
  .add('with outside link', () =&gt; (
    <div style="{{">
      </div>

// @flow

import React from 'react';
import { storiesOf } from '@storybook/react';
import backgrounds from '@storybook/addon-backgrounds';
import { MemoryRouter } from 'react-router-dom';

import RepoCard from './RepoCard';

storiesOf('RepoCard', module)
  .addDecorator(backgrounds([{ name: 'light', value: '#fcfafa', default: true }]))
  .add('default', () => (
    
      <div style="{{">
        
      </div>
    
  ))
  .add('with rank', () =&gt; (
    
      <div style="{{"></div>

import React from 'react';
import { configure } from '@storybook/react';
import { setOptions } from '@storybook/addon-options';
import { addDecorator } from '@storybook/react';
import { ThemeProvider } from 'styled-components';
import { withBackgrounds } from '@storybook/addon-backgrounds';
import { checkA11y } from '@storybook/addon-a11y';

import './index.css';
import theme from '../src/theme';

addDecorator(checkA11y);
addDecorator(
  withBackgrounds([
    { name: 'LCU', value: 'var(--lcu-bg)', default: true },
    { name: 'Universe', value: 'var(--universe-bg)' },
    { name: 'twitter', value: '#00aced' },
  ])
);
// addDecorator(
//   withCssResources({
//     cssresources: [
//       // {
//       //   name: 'LCU',
//       //   code: `<style> body {background-image: var(--lcu-bg); } </style>`,
//       //   picked: true,
//       // },
//       {
//         name: 'Universe',
//         code: `<style> body {background-image: url(${require('../src/assets/universe-bg.jpg')}); } </style>`,

],
  })
  .add('disabled via []', () => , {
    backgrounds: [],
  })
  .add(
    'skipped via disable:true',
    () => ,
    {
      backgrounds: { disable: true },
    }
  );

storiesOf('Addons|Backgrounds.deprecated', module)
  .addDecorator(
    backgrounds([
      { name: 'twitter', value: '#00aced' },
      { name: 'facebook', value: '#3b5998', default: true },
    ])
  )
  .add('story 1', () => (
    
  ))
  .add('story 2', () => )
  .add(
    'overriden',
    backgrounds([
      { name: 'red', value: '#F44336' },
      { name: 'blue', value: '#2196F3', default: true },
    ])(() => )
  );