Introduce React Storybook

[Rokt33r]

FYI: how to apply theme

import styled from '../lib/styled'
import React, { FC, PropsWithChildren, ComponentType } from 'react'
import { ThemeProvider } from 'styled-components'
import { lightTheme, darkTheme } from '../lib/styled/themes'
import { Story } from '@storybook/react/types-6-0'

interface ThemedWrapperProps {
  theme?: 'light' | 'dark'
}

export const ThemedWrapper: FC<ThemedWrapperProps> = ({
  theme = 'light',
  children,
}) => {
  return (
    <ThemeProvider theme={theme === 'light' ? lightTheme : darkTheme}>
      <StyledBackground>{children}</StyledBackground>
    </ThemeProvider>
  )
}

const StyledBackground = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px;
  background-color: ${({ theme }) => theme.baseBackgroundColor};
  box-sizing: border-box;
`

export type ThemedStory<P> = Story<
  { theme: 'dark' | 'light' } & PropsWithChildren<P>
>

export function createThemedTemplate<P = {}>(
  Component: ComponentType<P>
): {
  Template: ThemedStory<P>
  themeArgType: {}
} {
  return {
    Template: ({ theme, ...args }: any) => {
      return (
        <ThemedWrapper theme={theme}>
          <Component {...args} />
        </ThemedWrapper>
      )
    },
    themeArgType: {
      defaultValue: 'light',
      control: {
        type: 'inline-radio',
        options: ['light', 'dark'],
      },
    },
  }
}