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

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>

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>`,

function withGlobalStyles(storyFn) {
  return (
    <>
      
      
      {storyFn()}
    
  );
}

addDecorator(withGlobalStyles);
addDecorator(new StoryRouter());

addDecorator(
  withBackgrounds([
    { name: 'athens gray', value: colors.athensGray },
    { name: 'violet', value: colors.violet },
    { default: true, name: 'white', value: colors.white },
  ]),
);

configureViewport();

setOptions({
  addonPanelInRight: false,
  hierarchyRootSeparator: /\|/,
  name: '0x Tracker',
  sortStoriesByKind: true,
});

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

import { configure, addDecorator } from "@storybook/react";
import { withKnobs } from "@storybook/addon-knobs";
import { withBackgrounds } from "@storybook/addon-backgrounds";
import { withNotes } from "@storybook/addon-notes";
import React from "react";

addDecorator(withBackgrounds([{ name: "white", value: "#ffffff", default: true }, { name: "grey", value: "#C0C0C0" }, { name: "black", value: "#000000" }]));
addDecorator(withKnobs);
addDecorator(withNotes);
addDecorator(story => (
  <div style="{{">
    </div>

<div>
      <div>light</div>
      <div>fontWeightNormal</div>
      <div>bold</div>
      <div>bolder</div>
      <div>italic</div>
      <div>noDecoration</div>
      <div>underline</div>
      <div>m3</div>
    </div>
  ))

storiesOf('Full Page', module)
  .addDecorator(withKnobs)
  .addDecorator(
    withBackgrounds([
      { name: 'Gray', value: '#f2f2f2', default: true },
      { name: 'White', value: '#fff' },
    ]),
  )
  .addDecorator(muiTheme())
  .add('StoryHost', () =&gt; StoryHost)
  .add('StoryHost Border', () =&gt; StoryHost)
  .add('StoryHost Border/Dimensions', () =&gt; {
    const border = boolean('Border', true)
    const dimensions = boolean('Dimensions', true)
    const width = number('Width', 100)
    const height = number('height', 30)

    return (
      
        <div height="" style="{{">StoryHost</div>

}

addDecorator(
  withOptions({
    name: 'styled-minimal',
    url: 'https://github.com/gilbarbara/styled-minimal',
    theme: {
      ...themes.dark,
      mainBackground: '#27292a linear-gradient(to right, #27292a, #333)',
      brand: { background: '#f04' },
    },
  }),
);

addDecorator(
  withBackgrounds([
    { name: 'light', value: '#f7f7f7', default: true },
    { name: 'gray', value: '#999' },
    { name: 'dark', value: '#333' },
  ]),
);

addDecorator(
  withInfo({
    inline: true,
    source: false,
    TableComponent,
  }),
);

configure(loadStories, module);

const importAll = (context) =>
  context.keys().forEach(context);

const mainContext = require.context(
  '../src',
  true,
  /\.stories\.jsx?$/
);

function loadStories() {
  importAll(mainContext);
}

addDecorator(
  withBackgrounds([
    { name: 'main', value: '#59868a', default: true },
    { name: 'white', value: '#fff' },
    { name: 'black', value: '#000' },
  ])
);

configure(loadStories, module);

import { withBackgrounds } from '@storybook/addon-backgrounds';
import { colors, palette } from '../../src/utils/theme';

export const backgroundAddon = withBackgrounds([
  { name: 'light', value: '#f7f7f7', default: true },
  { name: 'gray', value: '#999' },
  { name: 'dark', value: '#333' },
]);

export const sizesOptions = ['sm', 'md', 'lg'];
export const sizesAllOptions = ['xs', 'sm', 'md', 'lg', 'xl'];
export const variantOptions = [...Object.keys(palette), ...Object.keys(colors)];

export const capitalize = string => string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();

import { storiesOf } from '@storybook/vue'
import { action } from '@storybook/addon-actions'
import { withBackgrounds } from '@storybook/addon-backgrounds'
import { wrapComponent } from './helpers/decorators'

import VBtnPlus from '@/components/common/VBtnPlus.vue'
import VStatsCard from '@/components/common/VStatsCard.vue'

export const methods = {
  onClicked: action('onClicked')
}

storiesOf('VBtnPlus', module)
  .addDecorator(story => wrapComponent(story, 'xl', 'xs2'))
  .addDecorator(
    withBackgrounds([{ name: 'twitter', value: '#00aced', default: true }, { name: 'facebook', value: '#3b5998' }])
  )
  .add('text with defaults', () => ({
    components: { VBtnPlus },
    template: `<div class="text-xs-center">
         
         
       </div>`,
    methods
  }))
  .add('icon with defaults', () =&gt; ({
    components: { VBtnPlus },
    template: `<div class="text-xs-center">
         
         
       </div>`,
    methods