@spaced-out/ui-design-system/.storybook/preview.js

Sense UI components library

/**
 * Read https://storybook.js.org/docs/react/configure/overview#configure-story-rendering
 * for more information about the purpose of this file.
 *
 * Use preview.js for global code (such as CSS imports or JavaScript mocks)
 * that applies to all stories. For example, `import thirdPartyCss.css`.
 *
 * This file can have three exports:
 * - decorators - an array of global decorators
 * - parameters - an object of global parameters
 * - globalTypes - definition of globalTypes
 */

/**
 * Decorators
 *
 * A decorator is a way to wrap a story in extra “rendering” functionality.
 *
 * Example:
 *
 * import React from 'react';
 * export const decorators = [(Story) => <div style={{ margin: '3em' }}><Story/></div>];
 *
 * Each story throughout the library will be wrapped in a div with a margin of 3
 */

/**
 * Parameters
 *
 * Most Storybook addons are configured via a parameter-based API.
 * You can set global parameters in this file
 **/

import {themes} from 'storybook/theming';
import {wd} from 'paths.macro';

export const parameters = {
  // Note(Nishant): This is a workaround to disable the a11y checks for the storybook.
  // This is because the storybook is not a web application and does not have a viewport.
  a11y: {
    config: {
      rules: [
        {
          id: 'landmark-one-main',
          enabled: false,
        },
        {
          id: 'meta-viewport',
          enabled: false,
        },
        {
          id: 'page-has-heading-one',
          enabled: false,
        },
      ],
    },
  },
  controls: {
    disableSaveFromUI: true,
  },
  backgrounds: {
    values: [
      {name: 'Dark', value: '#000'},
      {name: 'Light', value: '#fff'},
    ],
  },
  docs: {
    theme: themes.light,
    codePanel: true,
  },
  Canvas: {
    theme: themes.light,
  },
  storySource: {
    repository: 'https://github.com/Spaced-Out/ui-design-system',
    workingDir: wd,
    branch: 'master',
  },
  options: {
    storySort: {
      method: 'alphabetical',
      order: [
        'Introduction',
        'Changelog',
        'Usage',
        'Contribution',
        'Design Tokens',
        'Tokens',
        'Components',
        'Form Components',
        '*',
      ],
      locales: 'en-US',
    },
  },
};
/**
 * With backgrounds, you configure the list of backgrounds that every story can render in.
 */

/**
 * Global Types
 *
 * Global Types allow you to add your own toolbars by creating
 * globalTypes with a toolbar annotation:
 *
 * For example:
 **/
export const globalTypes = {
  theme: {
    name: 'Theme',
    description: 'Global theme for components',
    defaultValue: 'dark',
    toolbar: {
      icon: 'circlehollow',
      // array of plain string values or MenuItem shape
      items: ['light', 'dark'],
    },
  },
};
/**
 *
 * Will add a new dropdown in your toolbar with options light and dark.
 **/