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

import {
  ArtworkWithClassification,
  ArtworkWithoutClassification,
} from "Apps/__tests__/Fixtures/Artwork/ArtworkSidebar/ArtworkSidebarClassification"
import { ArtworkSidebarClassification as Classification } from "Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarClassification"
import React from "react"
import { storiesOf } from "storybook/storiesOf"
import { Section } from "Utils/Section"

storiesOf("Apps/Artwork/Components/Sidebar", module).add(
  "Classification",
  () => {
    return (
      
        <section title="Artwork with Classification">
          
        </section>
        <section title="Artwork without Classification">
          
        </section>
      
    )
  }
)

import { EntityHeader } from "Components/v2/EntityHeader"
import { RelayStubProvider } from "DevTools/RelayStubProvider"
import React from "react"
import { storiesOf } from "storybook/storiesOf"
import { Section } from "Utils/Section"

const props = {
  href: "/artist/francesca-dimattio",
  imageUrl: "https://picsum.photos/110/110/?random",
  name: "Francesca DiMattio",
  meta: "American, b. 1979",
}

storiesOf("Styleguide/Components", module)
  .addDecorator(story => {story()})
  .add("EntityHeader", () => {
    return (
      <>
        <section title="Default">
          
        </section>
        <section title="No image, initials">
          
        </section>
        <section title="No image, overflow initials"></section>

import { Box, Theme } from "@artsy/palette"
import React from "react"
import { storiesOf } from "storybook/storiesOf"
import styled from "styled-components"

import { CollectionsRailContent } from "../CollectionsRail"

const RailsContainer = styled(Box)`
  max-width: 1250px;
`

storiesOf("Components/CollectionsRail", module).add(
  "Collections Rail Content",
  () => (
    
      
        
      
    
  )
)

LiveAuctionInProgress,
  OpenAuctionNoReserveNoBids,
  OpenAuctionNoReserveWithBids,
  OpenAuctionReserveMetWithBids,
  OpenAuctionReserveMetWithMyLosingBid,
  OpenAuctionReserveMetWithMyWinningBid,
  OpenAuctionReserveNoBids,
  OpenAuctionReserveNotMetIncreasingOwnBid,
  OpenAuctionReserveNotMetWithBids,
} from "Apps/__tests__/Fixtures/Artwork/ArtworkSidebar/ArtworkSidebarCurrentBidInfo"
import { ArtworkSidebarCurrentBidInfo as CurrentBidInfo } from "Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarCurrentBidInfo"
import React from "react"
import { storiesOf } from "storybook/storiesOf"
import { Section } from "Utils/Section"

storiesOf("Apps/Artwork/Components/Sidebar", module).add(
  "CurrentBidInfo",
  () => {
    return (
      
        <section title="Closed auction">
          
        </section>
        <section title="Open auction no reserve no bids">
          
        </section>
        <section title="Open auction no reserve with bids">
          
        </section>
        <section title="Open auction with reserve and no bids">
          
        </section>

/>
  ))
  .add("canceled (pickup)", () => (
    
  ))
  .add("refunded", () => (
    
  ))

storiesOf("Apps/Order/Make Offer/Offer", module).add("Empty", () => (
  
))

storiesOf("Apps/Order/Make Offer/Shipping", module)
  .add("Shipping - Pre-filled", () => (
    
  ))

import { Box, Image } from "@artsy/palette"
import { artworkBricks, images } from "Apps/__tests__/Fixtures/Carousel"
import { FillwidthItem } from "Components/Artwork/FillwidthItem"
import {
  Carousel,
  CarouselServer,
  LargeCarousel,
  SmallCarousel,
} from "Components/v2/CarouselV2"
import { RelayStubProvider } from "DevTools/RelayStubProvider"
import React from "react"
import { storiesOf } from "storybook/storiesOf"
import { Section } from "Utils/Section"

storiesOf("Styleguide/Components", module).add("CarouselV2", () => {
  return (
    
      <section title="Responsive Carousel">
        
           {
              return (
                <img height="{props.resized.height}" width="{props.resized.width}" src="{props.resized.url}">
              )
            }}</section>

import { paginationProps } from "Apps/__test__/Fixtures/Pagination"
import React from "react"
import { storiesOf } from "storybook/storiesOf"
import { Section } from "Styleguide/Utils/Section"
import { LargePagination, Pagination, SmallPagination } from "../Pagination"

storiesOf("Legacy/Styleguide/Components", module).add("Pagination", () => {
  const { cursor, callbacks } = paginationProps

  return (
    
      <section title="Responsive">
        
      </section>
      <section title="Large Pagination">
        
      </section>
      <section title="Small Pagination">
        
      </section>
    
  )
})

import React from "react"
import { storiesOf } from "storybook/storiesOf"
import { Section } from "Styleguide/Utils/Section"
import { BorderBox } from "../Box"
import { Image, ResponsiveImage } from "../Image"

storiesOf("Legacy/Styleguide/Elements", module).add("Image", () => {
  return (
    
      <section title="Default Image">
        <img src="https://picsum.photos/110/110/?random">
      </section>
      <section title="Custom size">
        <img src="https://picsum.photos/300/300/?random" height="200px" width="300px">
      </section>
      <section title="Responsive Image">
        
          
        </section>

}
`

const render = (extraOrderProps?: Partial) => {
  return (
    
  )
}
storiesOf("Apps/Order/Components", module)
  .add("ArtworkSummaryItem", () => {
    return (
      <section title="Artwork Summary">
        
          {render()}
        
      </section>
    )
  })
  .add("ArtworkSummaryItem (with long titles)", () =&gt; (
    <section title="Artwork Summary">
      
        {render({
          lineItems: makeLineItems({
            artistName: "Francesca DiMattio and Orta Theroxicus",
            artworkTitle: "Some quite long title you know how artists can be",</section>

initialRoute="/orders/123/shipping"
    />
  ))

storiesOf("Apps/Order/Buy Now/Review", module).add("Review", () => (
  
))

storiesOf("Apps/Order/Buy Now/Payment", module)
  .add("With 'Ship'", () => (
    
  ))
  .add("With 'Pickup'", () => (
    
  ))

storiesOf("Apps/Order/Buy Now/Status", module)
  .add("submitted (ship)", () => (