Revert "fix(storybook): remove it for now" (#9)

fix rebass types to work with storybook

.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

@@ -4,11 +4,22 @@
   "homepage": ".",
   "private": true,
   "devDependencies": {
+    "@emotion/core": "^11.0.0",
     "@ethersproject/experimental": "^5.0.1",
     "@popperjs/core": "^2.4.4",
     "@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",
+    "@styled-system/css": "^5.1.5",
     "@types/jest": "^25.2.1",
     "@types/lodash.flatmap": "^4.5.6",
     "@types/luxon": "^1.24.4",
@@ -21,7 +32,7 @@
     "@types/react-router-dom": "^5.0.0",
     "@types/react-virtualized-auto-sizer": "^1.0.0",
     "@types/react-window": "^1.8.2",
-    "@types/rebass": "^4.0.5",
+    "@types/rebass": "^4.0.7",
     "@types/styled-components": "^5.1.0",
     "@types/testing-library__cypress": "^5.0.5",
     "@types/wcag-contrast": "^3.0.0",
@@ -85,6 +96,7 @@
     "serve": "^11.3.0",
     "start-server-and-test": "^1.11.0",
     "styled-components": "^4.2.0",
+    "styled-system": "^5.1.5",
     "typescript": "^3.8.3",
     "use-count-up": "^2.2.5",
     "wcag-contrast": "^3.0.0"
@@ -95,9 +107,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>
+)

src/components/LineChart/LineChart.stories.tsx

+import { Story } from '@storybook/react/types-6-0'
+import React from 'react'
+// import Row, { RowFixed } from 'components/Row'
+import styled from 'styled-components'
+import Component, { LineChartProps } from './'
+import { dummyData } from './data'
+// import { AutoColumn } from 'components/Column'
+// import { TYPE } from 'theme'
+// import DoubleCurrencyLogo from 'components/DoubleLogo'
+// import { MKR } from 'constants'
+// import { ETHER } from '@uniswap/sdk'
+// import LineChart from '.'
+
+const Wrapper = styled.div`
+  margin: 1em 2em;
+  max-width: 500px;
+  & > * {
+    font-size: 1em;
+  }
+`
+
+export default {
+  title: 'Charts',
+  argTypes: {
+    disabled: { control: { type: 'boolean' } },
+    onClick: { action: 'clicked' },
+  },
+  decorators: [
+    (Component: Story) => (
+      <Wrapper>
+        <Component />
+      </Wrapper>
+    ),
+  ],
+}
+
+const Template: Story<LineChartProps> = (args) => <Component {...args}>{args.children}</Component>
+
+export const Basic = Template.bind({})
+Basic.args = { data: dummyData }
+
+// const Full = () => {
+//   const [value, setValue] = useState<number | undefined>(dummyData[dummyData.length - 1].value)
+
+//   const dummyUSDPrice = 410 // used for conversion
+
+//   const TopLeftContent = () => (
+//     <AutoColumn gap="md">
+//       <RowFixed align="center">
+//         <DoubleCurrencyLogo currency0={MKR} currency1={ETHER} size={20} />{' '}
+//         <TYPE.main fontSize="20px" color="white" ml="10px">
+//           ETH / MKR
+//         </TYPE.main>
+//       </RowFixed>
+//       <Row>
+//         <TYPE.main fontSize="20px" color="white">
+//           {value} MKR
+//         </TYPE.main>
+//         <TYPE.main color="#565A69" fontSize="20px" ml="10px">
+//           ($
+//           {value
+//             ? (value * dummyUSDPrice).toLocaleString('USD', {
+//                 currency: 'USD',
+//                 minimumFractionDigits: 2
+//               })
+//             : null}{' '}
+//           )
+//         </TYPE.main>
+//       </Row>
+//     </AutoColumn>
+//   )
+
+//   return (
+//     <Wrapper>
+//       <LineChart data={dummyData} setValue={setValue} topLeft={<TopLeftContent />} />
+//     </Wrapper>
+//   )
+// }
+
+// export const FullVersion = Template.bind(() => <LineChart data={dummyData} />)
+// Full.args = { data: dummyData }
+// Full.decorators = [
+//   (Story: any) => {
+//     return (
+//       <Wrapper>
+//         <LineChart data={dummyData} />
+//       </Wrapper>
+//     )
+//   }
+// ]

src/pages/Vote/index.tsx

@@ -6,7 +6,6 @@ import { RowBetween, RowFixed } from '../../components/Row'
 import { Link } from 'react-router-dom'
 import { ProposalStatus } from './styled'
 import { ButtonPrimary } from '../../components/Button'
-
 import { Button } from 'rebass/styled-components'
 import { darken } from 'polished'
 import { CardSection, DataCard, CardNoise, CardBGImage } from '../../components/earn/styled'

src/theme/rebass.d.ts

+import { InterpolationWithTheme } from '@emotion/core'
+import {
+  BoxProps as BoxP,
+  ButtonProps as ButtonP,
+  FlexProps as FlexP,
+  LinkProps as LinkP,
+  TextProps as TextP,
+} from 'rebass'
+
+declare module 'rebass' {
+  interface BoxProps extends BoxP {
+    css?: InterpolationWithTheme<any>
+  }
+  interface ButtonProps extends ButtonP {
+    css?: InterpolationWithTheme<any>
+  }
+  interface FlexProps extends FlexP {
+    css?: InterpolationWithTheme<any>
+  }
+  interface LinkProps extends LinkP {
+    css?: InterpolationWithTheme<any>
+  }
+  interface TextProps extends TextP {
+    css?: InterpolationWithTheme<any>
+  }
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicAttributes {
+      css?: InterpolationWithTheme<any>
+    }
+  }
+}