How to use @storybook/react - 10 common examples

it('should error on invalid usage (global)', () => {
    // $ExpectError
    addParameters();
    // $ExpectError
    addParameters('');
  });
});

it('should error on invalid usage (global)', () => {
    // $ExpectError
    addParameters();
    // $ExpectError
    addParameters('');
  });
});

it('should error on invalid usage (global)', () => {
    // $ExpectError
    clearDecorators(true);
    // $ExpectError
    clearDecorators(parameters);
  });
});

it('should error on invalid usage (global)', () => {
    // $ExpectError
    clearDecorators(true);
    // $ExpectError
    clearDecorators(parameters);
  });
});

it('should error on invalid usage (global)', () => {
    // $ExpectError
    clearDecorators(true);
    // $ExpectError
    clearDecorators(parameters);
  });
});

it('should error on invalid usage (global)', () => {
    // $ExpectError
    clearDecorators(true);
    // $ExpectError
    clearDecorators(parameters);
  });
});

function normalize(string) {
  return string.replace(/[ -/]/g, '_');
}

// Remove the GeoSearch stories from the
// tests because they are too brittle
const stories = require.context(
  '../../stories',
  true,
  /^((?!GeoSearch).)*\.stories\.js$/
);

// loadStories
stories.keys().forEach(filename => stories(filename));
const tests = getStorybook().reduce((acc, book) => {
  book.stories.forEach(story => {
    acc.push({
      suite: normalize(book.kind),
      name: normalize(story.name),
      case: story.render,
      context: {
        kind: book.kind,
        story: story.name,
      },
    });
  });

  return acc;
}, []);

let interval;

import {SquareButton} from '../../Button/Composed/SquareButton'
import {EmptyState} from '../../EmptyState'

// Types
import {IconFont, ComponentColor, Alignment, Sort} from '../../../Types'

// Notes
import IndexListReadme from './IndexList.md'
import IndexListHeaderReadme from './IndexListHeader.md'
import IndexListHeaderCellReadme from './IndexListHeaderCell.md'
import IndexListBodyReadme from './IndexListBody.md'
import IndexListRowReadme from './IndexListRow.md'
import IndexListRowCellReadme from './IndexListRowCell.md'
import IndexListExampleReadme from './IndexListExample.md'

const indexListStories = storiesOf(
  'Components|IndexList/Family',
  module
).addDecorator(withKnobs)

const indexListExampleStories = storiesOf(
  'Components|IndexList/Examples',
  module
).addDecorator(withKnobs)

indexListStories.add(
  'IndexList',
  () => {
    const indexListRef = createRef()

    const logRef = (): void => {
      /* eslint-disable */

import React from 'react';
import { storiesOf } from '@storybook/react';
import { inputProvider } from '@bbc/psammead-storybook-helpers';
import { withKnobs } from '@storybook/addon-knobs';
import services from '#server/utilities/serviceConfigs';
import { ServiceContextProvider } from '#contexts/ServiceContext';
import BrandContainer from '.';

storiesOf('Containers|Brand', module)
  .addParameters({ chromatic: { disable: true } })
  .addDecorator(withKnobs)
  .add(
    'default',
    inputProvider({
      // eslint-disable-next-line react/prop-types
      componentFunction: ({ service }) => {
        // eslint-disable-next-line import/no-dynamic-require,global-require
        const serviceConfig = require(`../../lib/config/services/${service}`)
          .service;
        const configVariant = serviceConfig.default;

        return (

/* eslint-disable import/no-extraneous-dependencies */
import React from 'react'
import { storiesOf } from '@storybook/react'
import { Delete, Image, Content } from '../../elements/'
import { Card } from '../'

storiesOf('Components', module)
  .add('Card', () => {
    const Card1 = Card.extend`
      max-width: 500px;
    `
    return (
      <div>
        
          
            
              Header
            
            
              
            
          
          </div>