@navinc/base-react-components/src/story.js

Nav's Pattern Library

import styled from 'styled-components'
import { storiesOf } from '@storybook/react'
import { Copy } from './copy.js'
import { theme } from './theme.js'

const Container = styled.div`
  display: flex;
  flex-wrap: wrap;
`

const Row = styled.div`
  display: flex;
  width: 100%;

  & > ${Copy} {
    margin-top: 8px;
    margin-right: 8px;
  }
`

const ColorItem = styled.div`
  flex: 1 1 160px;
  padding: 16px;
  & > * {
    text-align: center;
    margin: 0 auto;
  }
`

const ColorDot = styled.div`
  height: 32px;
  width: 32px;
  background-color: ${({ color }) => color};
  border-radius: 50%;
`

// TODO: Does not work.  Stories must match `stories` configuration in packages/base-react-components/storybook/main.js.  `storiesOf` is incompatible with storybook v7
storiesOf('2. Misc | Theme', module).add('theme', () => (
  <Container>
    {Object.entries(theme).map(([key, value]) => {
      if (typeof value === 'string' && (value.startsWith('#') || value.startsWith('rgba')))
        return (
          <ColorItem>
            <Copy bold>{key}</Copy>
            <Copy light>{value}</Copy>
            <ColorDot color={value} />
          </ColorItem>
        )
      else
        return (
          <Row>
            <Copy bold>{key}</Copy>
            <Copy>
              {typeof value === 'function' ? 'is function, see theme.js for details.' : JSON.stringify(value)}
            </Copy>
          </Row>
        )
    })}
  </Container>
))