How to use @storybook/theming - 10 common examples

it('should have no tabs when there are no groupIds', () => {
      // Unfortunately, a shallow render will not invoke the render() function of the groups --
      // it thinks they are unnamed function components (what they effectively are anyway).
      //
      // We have to do a full mount.

      const root = mount(
        
          
        
      );

      testChannel.on.mock.calls[0][1]({
        knobs: {
          foo: {
            name: 'foo',
            defaultValue: 'test',
            used: true,
            // no groupId
          },
          bar: {
            name: 'bar',
            defaultValue: 'test2',
            used: true,

import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import { styled } from '@storybook/theming';
import { Tabs, Icons, IconButton } from '@storybook/components';

const DesktopOnlyIconButton = styled(IconButton)({
  // Hides full screen icon at mobile breakpoint defined in app.js
  '@media (max-width: 599px)': {
    display: 'none',
  },
});

class SafeTab extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    this.setState({ hasError: true });
    // eslint-disable-next-line no-console
    console.error(error, info);

return input;
  }
  const text = String(input);
  const arrayOfText = text.split(/\r?\n|\r/g);
  const isSingleLine = arrayOfText.length < 2;
  return isSingleLine
    ? text
    : arrayOfText.map((lineOfText, i) => (
        // eslint-disable-next-line react/no-array-index-key
        <span>
          {i &gt; 0 &amp;&amp; <br>} {lineOfText}
        </span>
      ));
};

const Table = styled.table({
  width: '100%',
  textAlign: 'left',
  borderCollapse: 'collapse',
  borderLeft: '0px',
  borderRight: '0px',
});
const Thead = styled.thead(({ theme }) =&gt; ({
  textTransform: 'capitalize',
  color: '#ffffff', // theme.color.textInverseColor,
  backgroundColor: theme.color.darkest,
}));
const Tbody = styled.tbody();
const Th = styled.th({
  paddingTop: '.5rem',
  paddingBottom: '.5rem',
});

import React from 'react';
import { transparentize } from 'polished';
import { styled } from '@storybook/theming';

export type SubheadingProps = React.ComponentProps<'div'>;

const Subheading = styled.div(({ theme }) => ({
  letterSpacing: '0.35em',
  textTransform: 'uppercase',
  fontWeight: theme.typography.weight.black,
  fontSize: theme.typography.size.s1 - 1,
  lineHeight: '24px',
  color: transparentize(0.5, theme.color.defaultText),
}));

// issue #6098
Subheading.defaultProps = {
  className: 'sidebar-subheading',
};

export default Subheading;

import { addParameters, configure, addDecorator } from '@storybook/react';
import { create } from '@storybook/theming';
import IntlDecorator from './decorators/intl';

addParameters({
  options: {
    theme: create({
      base: 'light',
      brandTitle: 'Application Kit',
      // To control appearance:
      brandImage:
        'https://unpkg.com/@commercetools-frontend/assets/logos/commercetools_primary-logo_horizontal_RGB.png',
    }),
    isFullScreen: false,
    panelPosition: 'right',
    showNav: true,
    showPanel: true,
    sortStoriesByKind: false,
    hierarchySeparator: /\//,
    hierarchyRootSeparator: /\|/,
  },
});

import { addDecorator, addParameters, configure } from '@storybook/react'
import { create } from '@storybook/theming'
import { CanvasDecorator } from '../src/utils/tests/decorators/CanvasDecorator'
import { ThemeDecorator } from '../src/utils/tests/decorators/ThemeDecorator'
import requireContext from 'require-context.macro'

// Our own decorators
addDecorator(CanvasDecorator)
addDecorator(ThemeDecorator)

// Add options
addParameters({
  options: {
    theme: create({
      base: 'light',
      brandTitle: '@exivity/ui',
      brandUrl: 'https://exivity.github.io/ui/',
      brandImage: 'logo.svg',
    }),
    panelPosition: 'right',
    isFullscreen: false,
  },
});

// Automatically import all files ending in *.stories.js
const docs = requireContext('../docs', true, /.stories.(js|tsx)$/)
const src = requireContext('../src', true, /.stories.(js|tsx)$/)

function loadStories () {
  docs.keys().forEach(filename => docs(filename))

const css = require.context(
    '../../../../built_assets/css',
    true,
    /plugins\/(?=canvas).*light\.css/
  );
  css.keys().forEach(filename => css(filename));

  // Find all files ending in *.examples.ts
  const req = require.context('./..', true, /.examples.tsx$/);
  req.keys().forEach(filename => req(filename));
}

// Set up the Storybook environment with custom settings.
addParameters({
  options: {
    theme: create({
      base: 'light',
      brandTitle: 'Canvas Storybook',
      brandUrl: 'https://github.com/elastic/kibana/tree/master/x-pack/plugins/canvas',
    }),
    showPanel: true,
    isFullscreen: false,
    panelPosition: 'bottom',
    isToolshown: true,
  },
});

configure(loadStories, module);

import Vue from 'vue';
import { configure, addDecorator, addParameters } from '@storybook/vue';
import { addReadme } from 'storybook-readme/vue';
import { themes, create } from '@storybook/theming';

const basicTheme = create({
  base: 'light',
  brandTitle: 'README addon',
  brandUrl: 'https://github.com/tuchk4/storybook-readme',
  brandImage: null,
});

addParameters({
  options: {
    showPanel: true,
    panelPosition: 'right',
    theme: basicTheme,
    // theme: themes.dark,
  },
  readme: {
    // You can set the global code theme here.
    codeTheme: 'github',

import { addParameters, configure, addDecorator } from '@storybook/react';
import { withContexts } from '@storybook/addon-contexts/react';
import { addReadme } from 'storybook-readme';
import { withA11y } from '@storybook/addon-a11y';
import { create } from '@storybook/theming';
import { contexts } from './configs/contexts';

addParameters({
  readme: {
    // You can set a code theme globally.
    codeTheme: 'github',
  },
  options: {
    theme: create({
      base: 'light',
      brandTitle: 'UI Kit',
      brandUrl: 'https://uikit.commercetools.com',
      // To control appearance:
      brandImage:
        'https://unpkg.com/@commercetools-frontend/assets/logos/commercetools_primary-logo_horizontal_RGB.png',
    }),
    isFullScreen: false,
    panelPosition: 'right',
    showNav: true,
    showPanel: true,
    sortStoriesByKind: false,
    hierarchySeparator: /\//,
    hierarchyRootSeparator: /\|/,
  },
});

import path from 'path';
import { create } from '@storybook/theming';

// @ts-ignore
export const entries = [];
export const preview = {};
export const manager = {};
export const theme = create({ base: 'light', brandTitle: 'test' });

export const unused = (z: string) => path.join('base', z);

export type Foo = string | number;