How to use the @storybook/addon-backgrounds function in @storybook/addon-backgrounds

// @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>

],
  })
  .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 },
    ])(() => )
  );

import addonBackgrounds from '@storybook/addon-backgrounds';
import { brandColorsObject } from 'common/styles/styleExports';
import { capitalizeFirstLetter } from 'common/utils/string-utils';

const backgroundsPaletteArray = Object.keys(brandColorsObject).map(name => ({
  name: capitalizeFirstLetter(name),
  value: brandColorsObject[name],
  default: name === 'white',
}));

const brandingBackgrounds = addonBackgrounds(backgroundsPaletteArray);

export default brandingBackgrounds;

import { configure } from '@storybook/react';
import { createStories } from './createStories';
import { withKnobs } from '@storybook/addon-knobs';
import { checkA11y } from '@storybook/addon-a11y';
import { setOptions } from '@storybook/addon-options';
import withBackgrounds from '@storybook/addon-backgrounds';
import { addDecorator } from '@storybook/react';

addDecorator(withKnobs);
addDecorator(checkA11y);
addDecorator(withBackgrounds());
setOptions({
  name: 'OpenAPI Platform',
});
configure(() => {
  const tsxModuleContext = require.context(
    '../packages/frontend-dist/src/view',
    true,
    /\.tsx$/,
  );
  const moduleInfo = tsxModuleContext
    .keys()
    .map(path => ({ path, requiredModule: tsxModuleContext(path) }));
  createStories(moduleInfo);
}, module);