How to use the @storybook/react.storiesOf function in @storybook/react

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>

import Button from '@enact/moonstone/Button';
import React from 'react';
import Touchable from '@enact/ui/Touchable';
import {storiesOf} from '@storybook/react';
import {action} from '@storybook/addon-actions';

import {boolean, number} from '../../src/enact-knobs';

const TouchableDiv = Touchable('div');

storiesOf('Touchable', module)
	.add(
		'with default hold events',
		() => (
			<button disabled="{boolean('disabled',">
				Touchable
			</button>
		)
	)
	.add(
		'with a custom longpress event and 1 second frequency',
		() =&gt; (

import {
  Blockie,
  Avatar,
  Box,
  Heading,
  Text,
  Card,
  Pill,
  Flex,
  Image,
  Icon,
  Link,
} from 'rimble-ui';

storiesOf('Components/Blockie', module)
  .add(
    'Documentation',
    withDocs(Documentation, () => (

import React from 'react'

import { storiesOf } from '@storybook/react'
import { withKnobs, boolean, text } from '@storybook/addon-knobs'

import UneditableTextField from 'uneditableTextField'
import IconSearch from 'icon/searchIcon'

const stories = storiesOf('UneditableTextField', module)
stories.addDecorator(withKnobs)

stories.add('Basic', () => (
  
    {text('label', "I'm a very long text so I should be cut off at the end of the line")}
  
))

stories.add('With icon', () => (
  } ellipsis={boolean('ellipsis', true)}>
    {text('label', 'Label')}
  
))

stories.add('With simple link/anchor', () => (
  Simple anchor

import * as React from "react"
import { StorybookStory as Story, StorybookGroup as Group } from "../../../../.storybook/views"
import { storiesOf } from "@storybook/react"
import { SpinAnimation } from "./index"

storiesOf("SpinAnimation", module).add("default", () => (
  
    
      <span style="{{">
        I am going to spin.
      </span>
    
  
))