feature(storybook): first pass at storybook integration

.nvmrc

+lts/*

.storybook/main.ts

+const { dirname, join, parse, resolve } = require('path')
+const { existsSync } = require('fs')
+
+module.exports = {
+  stories: ['../src/**/*.stories.@(ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/preset-create-react-app'],
+  typescript: {
+    check: true,
+    checkOptions: {},
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: prop => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true)
+    }
+  }
+}

.storybook/manager.ts

+import { addons } from '@storybook/addons'
+import { light } from './theme'
+
+addons.setConfig({ theme: light })

.storybook/preview.tsx

+import { ThemeProvider as SCThemeProvider } from 'styled-components'
+import { Story } from '@storybook/react/types-6-0'
+import React from 'react'
+import { FixedGlobalStyle, theme, ThemedGlobalStyle } from '../src/theme'
+import * as storybookThemes from './theme'
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  dependencies: {
+    withStoriesOnly: true,
+    hideEmpty: true
+  },
+  docs: {
+    theme: storybookThemes.light
+  },
+  viewport: {
+    viewports: {
+      mobile: {
+        name: 'iPhone X',
+        styles: {
+          width: '375px',
+          height: '812px'
+        }
+      },
+      tablet: {
+        name: 'iPad',
+        styles: {
+          width: '768px',
+          height: '1024px'
+        }
+      },
+      laptop: {
+        name: 'Laptop',
+        styles: {
+          width: '1024px',
+          height: '768px'
+        }
+      },
+      desktop: {
+        name: 'Desktop',
+        styles: {
+          width: '1440px',
+          height: '1024px'
+        }
+      }
+    }
+  }
+}
+
+export const globalTypes = {
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    defaultValue: 'light',
+    toolbar: {
+      icon: 'circlehollow',
+      items: ['light', 'dark']
+    }
+  }
+}
+
+const withProviders = (Component: Story, context: Record<string, any>) => {
+  const THEME = theme(context.globals.theme === 'dark')
+  return (
+    <>
+      <FixedGlobalStyle />
+      <SCThemeProvider theme={THEME}>
+        <ThemedGlobalStyle />
+        <main>
+          <Component />
+        </main>
+      </SCThemeProvider>
+    </>
+  )
+}
+
+export const decorators = [withProviders]

.storybook/theme.ts

+import { create } from '@storybook/theming'
+
+// this themes the storybook UI
+const uniswapBaseTheme = {
+  brandTitle: 'Uniswap Design',
+  brandUrl: 'https://uniswap.org',
+  brandImage: 'https://ipfs.io/ipfs/QmNa8mQkrNKp1WEEeGjFezDmDeodkWRevGFN8JCV7b4Xir'
+}
+export const light = create({
+  base: 'light',
+  ...uniswapBaseTheme
+})
+
+// export const dark = create({
+//   base: 'dark',
+//   ...uniswapBaseTheme,
+// })

package.json

@@ -9,6 +9,15 @@
     "@reach/dialog": "^0.10.3",
     "@reach/portal": "^0.10.3",
     "@reduxjs/toolkit": "^1.3.5",
+    "@storybook/addon-actions": "^6.1.17",
+    "@storybook/addon-essentials": "^6.1.17",
+    "@storybook/addon-links": "^6.1.17",
+    "@storybook/addons": "^6.1.17",
+    "@storybook/components": "^6.1.17",
+    "@storybook/preset-create-react-app": "^3.1.5",
+    "@storybook/preset-typescript": "^3.0.0",
+    "@storybook/react": "^6.1.17",
+    "@storybook/theming": "^6.1.17",
     "@types/jest": "^25.2.1",
     "@types/lodash.flatmap": "^4.5.6",
     "@types/luxon": "^1.24.4",
@@ -95,9 +104,10 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
-    "integration-test": "start-server-and-test 'serve build -l 3000' http://localhost:3000 'cypress run'"
+    "integration-test": "start-server-and-test 'serve build -l 3000' http://localhost:3000 'cypress run'",
+    "storybook": "start-storybook -p 6006",
+    "test": "react-scripts test --env=jsdom"
   },
   "eslintConfig": {
     "extends": "react-app",

src/components/Button/Button.stories.tsx

+import { Story } from '@storybook/react/types-6-0'
+import styled from 'styled-components'
+import React from 'react'
+import {
+  ButtonConfirmed,
+  ButtonDropdown,
+  ButtonDropdownGrey,
+  ButtonDropdownLight,
+  ButtonEmpty,
+  ButtonError,
+  ButtonGray,
+  ButtonLight,
+  ButtonOutlined,
+  ButtonPink,
+  ButtonPrimary,
+  ButtonRadio,
+  ButtonSecondary,
+  ButtonUNIGradient,
+  ButtonWhite
+} from './index'
+
+const wrapperCss = styled.main`
+  font-size: 2em;
+  margin: 3em;
+  max-width: 300px;
+`
+
+export default {
+  title: 'Buttons',
+  argTypes: {
+    disabled: { control: { type: 'boolean' } },
+    onClick: { action: 'clicked' }
+  },
+  decorators: [
+    (Component: Story) => (
+      <div css={wrapperCss}>
+        <Component />
+      </div>
+    )
+  ]
+}
+
+const Unicorn = () => (
+  <span role="img" aria-label="unicorn">
+    🦄
+  </span>
+)
+
+export const Radio = () => (
+  <ButtonRadio>
+    <Unicorn />
+    &nbsp;UNISWAP&nbsp;
+    <Unicorn />
+  </ButtonRadio>
+)
+export const DropdownLight = () => (
+  <ButtonDropdownLight>
+    <Unicorn />
+    &nbsp;UNISWAP&nbsp;
+    <Unicorn />
+  </ButtonDropdownLight>
+)
+export const DropdownGrey = () => (
+  <ButtonDropdownGrey>
+    <Unicorn />
+    &nbsp;UNISWAP&nbsp;
+    <Unicorn />
+  </ButtonDropdownGrey>
+)
+export const Dropdown = () => (
+  <ButtonDropdown>
+    <Unicorn />
+    &nbsp;UNISWAP&nbsp;
+    <Unicorn />
+  </ButtonDropdown>
+)
+export const Error = () => (
+  <ButtonError>
+    <Unicorn />
+    &nbsp;UNISWAP&nbsp;
+    <Unicorn />
+  </ButtonError>
+)
+export const Confirmed = () => (
+  <ButtonConfirmed>
+    <Unicorn />
+    &nbsp;UNISWAP&nbsp;
+    <Unicorn />
+  </ButtonConfirmed>
+)
+export const White = () => (
+  <ButtonWhite>
+    <Unicorn />
+    &nbsp;UNISWAP&nbsp;
+    <Unicorn />
+  </ButtonWhite>
+)
+export const Empty = () => (
+  <ButtonEmpty>
+    <Unicorn />
+    &nbsp;UNISWAP&nbsp;
+    <Unicorn />
+  </ButtonEmpty>
+)
+export const Outlined = () => (
+  <ButtonOutlined>
+    <Unicorn />
+    &nbsp;UNISWAP&nbsp;
+    <Unicorn />
+  </ButtonOutlined>
+)
+export const UNIGradient = () => (
+  <ButtonUNIGradient>
+    <Unicorn />
+    &nbsp;UNISWAP&nbsp;
+    <Unicorn />
+  </ButtonUNIGradient>
+)
+export const Pink = () => (
+  <ButtonPink>
+    <Unicorn />
+    &nbsp;UNISWAP&nbsp;
+    <Unicorn />
+  </ButtonPink>
+)
+export const Secondary = () => (
+  <ButtonSecondary>
+    <Unicorn />
+    &nbsp;UNISWAP&nbsp;
+    <Unicorn />
+  </ButtonSecondary>
+)
+export const Gray = () => (
+  <ButtonGray>
+    <Unicorn />
+    &nbsp;UNISWAP&nbsp;
+    <Unicorn />
+  </ButtonGray>
+)
+export const Light = () => (
+  <ButtonLight>
+    <Unicorn />
+    &nbsp;UNISWAP&nbsp;
+    <Unicorn />
+  </ButtonLight>
+)
+export const Primary = () => (
+  <ButtonPrimary>
+    <Unicorn />
+    &nbsp;UNISWAP&nbsp;
+    <Unicorn />
+  </ButtonPrimary>
+)