How to use @storybook/components - 10 common examples

import {withKnobs} from '@storybook/addon-knobs';
import {Provider as StyletronProvider} from 'styletron-react';
import {Client as Styletron} from 'styletron-engine-atomic';

import loadStories from '../.storybook-base/loadStories.js';
import {ThemeProvider} from '../src/styles';
import {LightThemeMove} from '../src/themes';

withOptions({
  name: 'baseui',
  url: 'https://github.com/uber-web/baseui',
});

setOptions({
  theme: {
    ...themes.normal,
    highlightColor: LightThemeMove.colors.primary,
    successColor: LightThemeMove.colors.positive,
    warningColor: LightThemeMove.colors.warning,
    failColor: LightThemeMove.colors.negative,
  },
});

const engine = new Styletron();

// this should be first decorator to avoid extra code to be parsed here
addDecorator(withInfo);

addDecorator(withKnobs);
addDecorator(checkA11y);

// Add providers for theme and styletron

import React from 'react';
import ThemeProvider from '@emotion/provider';
import { configure, addDecorator } from '@storybook/react';
import { themes } from '@storybook/components';
import { withOptions } from '@storybook/addon-options';
import { setConsoleOptions } from '../src';

import 'react-chromatic/storybook-addon';

const theme = {...themes.normal,
  // mainBackground: '#4c4c4c',
  // mainFill: '#ababab',
  // barFill: '#4c4c4c',
  // barSelectedColor: 'white',
  // highlightColor: 'red'
  // mainTextColor: 'white'
  brand: {
    background: '#F1618C',
    color: 'white'
  }
}

addDecorator(
  withOptions({
    name: 'Addon Console',
    url: 'https://github.com/storybooks/storybook-addon-console',

const storybookIframe = 'storybook-preview-iframe';
const addedElAttr = 'addedbycssresourcesaddon';

// Taken from StoryPanel.js
const highlighterTheme = {
  ...darcula,
  'pre[class*="language-"]': {
    ...darcula['pre[class*="language-"]'],
    margin: 'auto',
    width: 'auto',
    height: 'auto',
    minHeight: '100%',
    overflow: 'hidden',
    boxSizing: 'border-box',
    display: 'flex',
    fontFamily: monoFonts.fontFamily,
    fontSize: 'inherit',
  },
  'code[class*="language-"]': {
    ...darcula['code[class*="language-"]'],
    margin: 0,
    fontFamily: 'inherit',
  },
};

const PanelWrapper = styled.div({
  position: 'absolute',
  top: '10px',
  left: '10px',
  fontFamily: monoFonts.fontFamily,
});

import {withKnobs} from '@storybook/addon-knobs';
import {Provider as StyletronProvider} from 'styletron-react';
import {Client as Styletron} from 'styletron-engine-atomic';

import loadStories from '../.storybook-base/loadStories.js';
import {ThemeProvider} from '../src/styles';
import {DarkTheme} from '../src/themes';

withOptions({
  name: 'baseui',
  url: 'https://github.com/uber-web/baseui',
});

setOptions({
  theme: {
    ...themes.dark,
    mainFill: DarkTheme.colors.mono800,
    mainBackground: DarkTheme.colors.mono700,
    mainTextColor: DarkTheme.colors.mono100,
    dimmedTextColor: DarkTheme.colors.mono100,
    highlightColor: DarkTheme.colors.primary,
    successColor: DarkTheme.colors.positive,
    warningColor: DarkTheme.colors.warning,
    failColor: DarkTheme.colors.negative,
  },
});

const engine = new Styletron();

// this should be first decorator to avoid extra code to be parsed here
addDecorator(withInfo);

import TableComponent from './TableComponent';

// automatically import all files ending in *.stories.js
const req = require.context('../stories', true, /.stories.js$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

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({

export const getSourceProps = (
  { language, code, id }: SourceProps,
  { id: currentId, storyStore }: DocsContextProps
): PureSourceProps => {
  let source = code; // prefer user-specified code
  if (!source) {
    const targetId = id || currentId; // prefer user-specified story id
    const { parameters } = storyStore.fromId(targetId);
    if (parameters) {
      const { mdxSource, storySource } = parameters;
      source = mdxSource || (storySource && extract(targetId, storySource));
    }
  }
  return source
    ? { code: source, language: language || 'jsx' }
    : { error: SourceError.SOURCE_UNAVAILABLE };
};

{
      stories: [],
      storiesHash: {},
      selectedId: null,
      shortcutOptions: {
        full: false,
        nav: true,
        panel: 'right',
        enableShortcuts: true,
      },
      uiOptions: {
        name: 'STORYBOOK',
        url: 'https://github.com/storybooks/storybook',
        sortStoriesByKind: false,
        sidebarAnimations: true,
        theme: themes.normal,
      },
      customQueryParams: {},
      notifications: [
        {
          id: 'update',
          level: 2,
          link: '/settings/about',
          icon: '🎉',
          content: `There's a new version available: 4.0.0`,
        },
      ],

      selectedPanelValue: null,

      get selectedPanel() {
        return ensurePanel(this.panels, this.selectedPanelValue, this.selectedPanelValue);

import { Form } from '@storybook/components';

type DateTypeKnobValue = string[];

export interface FileTypeKnob {
  name: string;
  accept: string;
  value: DateTypeKnobValue;
}

export interface FilesTypeProps {
  knob: FileTypeKnob;
  onChange: (value: DateTypeKnobValue) => DateTypeKnobValue;
}

const FileInput = styled(Form.Input)({
  paddingTop: 4,
});

function fileReaderPromise(file: File) {
  return new Promise(resolve => {
    const fileReader = new FileReader();
    fileReader.onload = (e: Event) => resolve((e.currentTarget as FileReader).result as string);
    fileReader.readAsDataURL(file);
  });
}

const serialize = (): undefined => undefined;
const deserialize = (): undefined => undefined;

const FilesType: FunctionComponent & {
  serialize: typeof serialize;

interface DateTypeState {
  valid: boolean | undefined;
}

const FlexSpaced = styled.div({
  flex: 1,
  display: 'flex',
  '&& > *': {
    marginLeft: 10,
  },
  '&& > *:first-of-type': {
    marginLeft: 0,
  },
});
const FlexInput = styled(Form.Input)({ flex: 1 });

const formatDate = (date: Date) => {
  const year = `000${date.getFullYear()}`.slice(-4);
  const month = `0${date.getMonth() + 1}`.slice(-2);
  const day = `0${date.getDate()}`.slice(-2);

  return `${year}-${month}-${day}`;
};

const formatTime = (date: Date) => {
  const hours = `0${date.getHours()}`.slice(-2);
  const minutes = `0${date.getMinutes()}`.slice(-2);

  return `${hours}:${minutes}`;
};

display: 'flex',
    fontFamily: monoFonts.fontFamily,
    fontSize: 'inherit',
  },
  'code[class*="language-"]': {
    ...darcula['code[class*="language-"]'],
    margin: 0,
    fontFamily: 'inherit',
  },
};

const PanelWrapper = styled.div({
  position: 'absolute',
  top: '10px',
  left: '10px',
  fontFamily: monoFonts.fontFamily,
});

export default class CssResourcePanel extends Component {
  constructor(props) {
    super(props);
    this.state = { cssresources: `` };
    this.onAddCssresources = this.onAddCssresources.bind(this);
    this.parser = new DOMParser();
  }

  componentDidMount() {
    const { channel } = this.props;
    this.iframe = document.getElementById(storybookIframe);
    if (!this.iframe) {
      throw new Error('Cannot find Storybook iframe');
    }