How to use @storybook/addon-contexts - 9 common examples

{
    title: 'CSS Themes',
    params: [
      {
        name: 'Forest',
        props: {
          style: { color: 'teal', background: '#00b894', height: '100vh', padding: '10px' },
        },
      },
    ],
  },
];

const stories = storiesOf('React|Contexts', module)
  .addParameters({ framework: 'react' })
  .addDecorator(withContexts(topLevelContexts));

stories.add(
  'Simple CSS Theming',
  () => <>I'm a children of the injected 'div' (where provides a theming context).,
  {
    contexts: storyLevelContexts,
  }
);

// Example B: Language (React Contexts API)
const NaiveIntlContext = React.createContext({
  locale: 'unknown',
  greeting: 'NULL',
});

stories.add(

{
    title: 'CSS Themes',
    params: [
      {
        name: 'Forest',
        props: {
          style: { color: 'teal', background: '#00b894', height: '100vh', padding: '10px' },
        },
      },
    ],
  },
];

export default {
  title: 'Addons/Contexts',
  decorators: [withContexts(topLevelContexts)],
};

export const simpleCssTheming = () => (
  <>I'm a children of the injected 'div' (where provides a theming context).
);
simpleCssTheming.story = {
  name: 'Simple CSS Theming',
  parameters: {
    contexts: storyLevelContexts,
  },
};

// Example B: Language (React Contexts API)
const NaiveIntlContext = React.createContext({
  locale: 'unknown',
  greeting: 'NULL',

propTableHead: {
        ...styles.propTableHead,
        margin: 0
      },
      h1: {
        display: 'none'
      }
    })
  },
  jsx: {
    functionValue: (fn: Function) => `${fn.name}()`
  }
})

// place after the info addon so that wrappers get removed
addDecorator(withContexts(i18nContexts) as StoryDecorator)

function loadStories() {
  const req = require.context('../src', true, /\.stories\.tsx$/)
  req.keys().forEach(filename => req(filename))
}

configure(loadStories, module)

import { configure } from '@storybook/react';
import { addDecorator, addParameters } from '@storybook/react';
import { withContexts } from '@storybook/addon-contexts/react';
import { withTests } from '@storybook/addon-jest';
import { withKnobs } from '@storybook/addon-knobs';

import contexts from './contexts';
import viewports from './viewports';
import results from './jest-test-results.json';
import theme from './theme';
import 'index.scss';

addDecorator(withContexts(contexts));
addDecorator(withTests({ results }));
addDecorator(withKnobs);
addParameters({
  viewport: {
    viewports: viewports
  }
});
addParameters({
  options: {
    theme
  },
});

// Gatsby's Link overrides:
// Gatsby defines a global called ___loader to prevent its method calls from creating console errors you override it here
global.___loader = {

{
    title: 'CSS Themes',
    params: [
      {
        name: 'Forest',
        props: {
          style: { color: 'teal', background: '#00b894', height: '100vh', padding: '10px' },
        },
      },
    ],
  },
];

export default {
  title: 'Addon/Contexts',
  decorators: [withContexts(topLevelContexts)],
};

export const simpleCssTheming = () => ({
  template: "<span>I'm a children of the injected 'div' (where provides a theming context).</span>",
});

simpleCssTheming.story = {
  name: 'Simple CSS Theming',
  parameters: {
    contexts: storyLevelContexts,
  },
};

// Example B: Language (Vue provide/inject API)
const createContext = initialValue =&gt; {
  const uid = `_${Date.now()}${Math.random()}`;

setDefaultDelay(100);

addDecorator(story => (
  <div style="{{">
    {story()}
  </div>
));
addDecorator(withA11y);
addDecorator(withProps);
addDecorator(withStory);
addDecorator(withContexts(contexts));

configure(require.context('../packages', true, /\/([A-Za-z0-9]+\.)?story\.tsx?$/), module);

function loadStories() {
  require('./welcome.story');
  philosophyStories.keys().forEach(filename => philosophyStories(filename));
  materialsStories.keys().forEach(filename => materialsStories(filename));
  srcStories.keys().forEach(filename => srcStories(filename));
  packagesStories.keys().forEach(filename => packagesStories(filename));
  exampleStories.keys().forEach(filename => exampleStories(filename));
  srcExampleStories.keys().forEach(filename => srcExampleStories(filename));
  packagesExampleStories
    .keys()
    .forEach(filename => packagesExampleStories(filename));
}

addDecorator(addReadme);
addDecorator(withContexts(contexts));
addDecorator(withA11y);

configure(loadStories, module);

skip: true,
    widths: [375, 1280],
  },
});

addDecorator(function PaddingDecorator(story) {
  return <div style="{{padding:">{story()}</div>;
});

function StrictModeToggle({isStrict = false, children}) {
  const Wrapper = isStrict ? React.StrictMode : React.Fragment;
  return {children};
}

addDecorator(
  withContexts([
    {
      title: 'Strict Mode',
      components: [StrictModeToggle],
      params: [
        {name: 'Disabled', props: {isStrict: false}},
        {name: 'Enabled', default: true, props: {isStrict: true}},
      ],
    },
    {
      title: 'Global Theming',
      components: [AppProvider],
      params: [
        {
          name: 'Disabled',
          default: true,
          props: {i18n: enTranslations},

{
    title: 'CSS Themes',
    params: [
      {
        name: 'Forest',
        props: {
          style: { color: 'teal', background: '#00b894', height: '100vh', padding: '10px' },
        },
      },
    ],
  },
];

export default {
  title: 'Addons/Contexts',
  decorators: [withContexts(topLevelContexts)],
};

export const simpleCssTheming = () => (
  <div>I'm a children of the injected 'div' (where provides a theming context).</div>
);

simpleCssTheming.story = {
  name: 'Simple CSS Theming',

  parameters: {
    contexts: storyLevelContexts,
  },
};