ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: remove storybook

Browse Source
This commit is contained in:
Moody Salem 2021-06-01 17:04:14 -05:00
parent 71a490f2aa
commit 6bcbabec23
No known key found for this signature in database
GPG Key ID: 8CB5CD10385138DB
17 changed files with 119 additions and 3458 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env
View File

@ -1,4 +1,2 @@
REACT_APP_INFURA_KEY="4bf032f2d38a4ed6bb975b80d6340847" REACT_APP_INFURA_KEY="4bf032f2d38a4ed6bb975b80d6340847"
REACT_APP_WALLETCONNECT_BRIDGE_URL="https://uniswap.bridge.walletconnect.org" REACT_APP_WALLETCONNECT_BRIDGE_URL="https://uniswap.bridge.walletconnect.org"
# Because we use storybook which has its own babel-loader dependency @ 8.2.2, where react-scripts uses 8.1.0
SKIP_PREFLIGHT_CHECK=true

16
.storybook/main.ts
View File

@ -1,16 +0,0 @@
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),
},
},
}

4
.storybook/manager.ts
View File

@ -1,4 +0,0 @@
import { addons } from '@storybook/addons'
import { light } from './theme'
addons.setConfig({ theme: light })

90
.storybook/preview.tsx
View File

@ -1,90 +0,0 @@
import '../src/index.css'
import { Story } from '@storybook/react/types-6-0'
import { createWeb3ReactRoot, Web3ReactProvider } from '@web3-react/core'
import React from 'react'
import { Provider as StoreProvider } from 'react-redux'
import { ThemeProvider as SCThemeProvider } from 'styled-components'
import { NetworkContextName } from '../src/constants/misc'
import store from '../src/state'
import { theme, ThemedGlobalStyle } from '../src/theme'
import getLibrary from '../src/utils/getLibrary'
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 Web3ProviderNetwork = createWeb3ReactRoot(NetworkContextName)
const withProviders = (Component: Story, context: Record<string, any>) => {
const THEME = theme(context.globals.theme === 'dark')
return (
<>
<Web3ReactProvider getLibrary={getLibrary}>
<Web3ProviderNetwork getLibrary={getLibrary}>
<StoreProvider store={store}>
<SCThemeProvider theme={THEME}>
<ThemedGlobalStyle />
<main>
<Component />
</main>
</SCThemeProvider>
</StoreProvider>
</Web3ProviderNetwork>
</Web3ReactProvider>
</>
)
}
export const decorators = [withProviders]

17
.storybook/theme.ts
View File

@ -1,17 +0,0 @@
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,
// })

11
package.json
View File

@ -15,16 +15,6 @@
"@reach/portal": "^0.10.3", "@reach/portal": "^0.10.3",
"@react-hook/window-scroll": "^1.3.0", "@react-hook/window-scroll": "^1.3.0",
"@reduxjs/toolkit": "^1.3.5", "@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",
"@typechain/ethers-v5": "^7.0.0", "@typechain/ethers-v5": "^7.0.0",
"@types/jest": "^25.2.1", "@types/jest": "^25.2.1",
"@types/lingui__core": "^2.7.1", "@types/lingui__core": "^2.7.1",
@ -131,7 +121,6 @@
"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'",
"postinstall": "yarn compile-contract-types", "postinstall": "yarn compile-contract-types",
"start": "yarn compile-contract-types && react-scripts start", "start": "yarn compile-contract-types && react-scripts start",
"storybook": "start-storybook -p 6006",
"test": "react-scripts test --env=jsdom" "test": "react-scripts test --env=jsdom"
}, },
"eslintConfig": { "eslintConfig": {

44
src/components/Badge/Badge.stories.tsx
View File

@ -1,44 +0,0 @@
import { Story } from '@storybook/react/types-6-0'
import React, { PropsWithChildren } from 'react'
import Component, { BadgeProps, BadgeVariant } from './index'
export default {
title: 'Badge',
argTypes: {
variant: {
name: 'variant',
type: { name: 'string', require: false },
defaultValue: BadgeVariant.DEFAULT,
description: 'badge variant',
control: {
type: 'select',
options: Object.values(BadgeVariant),
},
},
},
args: {
children: '🦄 UNISWAP 🦄',
},
}
const Template: Story<PropsWithChildren<BadgeProps>> = (args) => <Component {...args}>{args.children}</Component>
export const DefaultBadge = Template.bind({})
DefaultBadge.args = {
variant: BadgeVariant.DEFAULT,
}
export const WarningBadge = Template.bind({})
WarningBadge.args = {
variant: BadgeVariant.WARNING,
}
export const NegativeBadge = Template.bind({})
NegativeBadge.args = {
variant: BadgeVariant.NEGATIVE,
}
export const PositiveBadge = Template.bind({})
PositiveBadge.args = {
variant: BadgeVariant.POSITIVE,
}

153
src/components/Button/Button.stories.tsx
View File

@ -1,153 +0,0 @@
import { Story } from '@storybook/react/types-6-0'
import styled from 'styled-components/macro'
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>
)

18
src/components/DoubleLogo/DoubleCurrencyLogo.stories.tsx
View File

@ -1,18 +0,0 @@
import { Story } from '@storybook/react/types-6-0'
import React from 'react'
import { DAI, WBTC } from '../../constants/tokens'
import Component, { DoubleCurrencyLogoProps } from './index'
export default {
title: 'DoubleCurrencyLogo',
decorators: [],
}
const Template: Story<DoubleCurrencyLogoProps> = (args) => <Component {...args} />
export const DoubleCurrencyLogo = Template.bind({})
DoubleCurrencyLogo.args = {
currency0: DAI,
currency1: WBTC,
size: 220,
}

90
src/components/LineChart/LineChart.stories.tsx
View File

@ -1,90 +0,0 @@
import { Story } from '@storybook/react/types-6-0'
import React from 'react'
// import Row, { RowFixed } from 'components/Row'
import styled from 'styled-components/macro'
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>
// )
// }
// ]

23
src/components/Menu/Menu.stories.tsx
View File

@ -1,23 +0,0 @@
import { Story } from '@storybook/react/types-6-0'
import React from 'react'
import styled from 'styled-components/macro'
import Component from './index'
const Wrapper = styled.div`
max-width: 150px;
`
export default {
title: 'Menu',
decorators: [
() => (
<Wrapper>
<Component />
</Wrapper>
),
],
}
const Template: Story<any> = (args) => <Component {...args} />
export const Menu = Template.bind({})
Menu.args = {}

53
src/components/PositionList/PositionList.stories.tsx
View File

@ -1,53 +0,0 @@
// import { Story } from '@storybook/react/types-6-0'
// import React from 'react'
// import { Position } from 'types/position'
// import { basisPointsToPercent } from 'utils'
// import { DAI, WBTC } from '../../constants'
// import Component, { PositionListProps } from './index'
// import { CurrencyAmount } from '@uniswap/sdk-core'
// import JSBI from 'jsbi'
// const FEE_BIPS = {
// FIVE: basisPointsToPercent(5),
// THIRTY: basisPointsToPercent(30),
// ONE_HUNDRED: basisPointsToPercent(100),
// }
// const daiAmount = CurrencyAmount.fromRawAmount(DAI, JSBI.BigInt(500 * 10 ** 18))
// const wbtcAmount = CurrencyAmount.fromRawAmount(WBTC, JSBI.BigInt(10 ** 7))
// const positions = [
// {
// feesEarned: {
// DAI: 1000,
// WBTC: 0.005,
// },
// feeLevel: FEE_BIPS.FIVE,
// tokenAmount0: daiAmount,
// tokenAmount1: wbtcAmount,
// tickLower: 40000,
// tickUpper: 60000,
// },
// {
// feesEarned: {
// DAI: 1000,
// WBTC: 0.005,
// },
// feeLevel: FEE_BIPS.THIRTY,
// tokenAmount0: daiAmount,
// tokenAmount1: wbtcAmount,
// tickLower: 45000,
// tickUpper: 55000,
// },
// ]
// const positions: Position[] = []
export default {
title: 'PositionList',
}
// const Template: Story<PositionListProps> = (args) => <Component {...args} />
// export const PositionList = Template.bind({})
// PositionList.args = {
// positions,
// showUnwrapped: true,
// }

31
src/components/PositionListItem/PositionListItem.stories.tsx
View File

@ -1,31 +0,0 @@
// import { Story } from '@storybook/react/types-6-0'
// import { FeeAmount, MAX_TICK, MIN_TICK, TICK_SPACINGS } from '@uniswap/v3-sdk'
// import { BigNumber } from 'ethers'
// import React from 'react'
// import { Position } from 'types/position'
// import Component, { PositionListItemProps } from './index'
// const position: Position = {
// nonce: BigNumber.from(0),
// operator: '',
// token0: '',
// token1: '',
// fee: FeeAmount.LOW,
// tickLower: MIN_TICK(TICK_SPACINGS[FeeAmount.LOW]),
// tickUpper: MAX_TICK(TICK_SPACINGS[FeeAmount.LOW]),
// liquidity,
// feeGrowthInside0LastX128fee
// feeGrowthInside0LastX128
// feeGrowthInside1LastX128
// tokensOwed0
// tokensOwed1
// }
export default {
title: 'PositionListItem',
}
// const Template: Story<PositionListItemProps> = (args) => <Component {...args} />
// export const PositionListItem = Template.bind({})
// PositionListItem.args = {position}

14
src/components/ThemeColorPalette/ThemeColorPalette.stories.tsx
View File

@ -1,14 +0,0 @@
import { Story } from '@storybook/react/types-6-0'
import React from 'react'
import Component from './index'
export default {
title: 'ThemeColorPalette',
}
const Template: Story<any> = (_args: any, context: Record<string, any>) => {
const isDarkMode = context.globals.theme === 'dark'
return <Component isDarkMode={isDarkMode} />
}
export const Palette = Template.bind({})

35
src/components/Toggle/MultiToggle.stories.tsx
View File

@ -1,35 +0,0 @@
import { Story } from '@storybook/react/types-6-0'
import styled from 'styled-components/macro'
import React, { useState } from 'react'
import MultiToggle from './MultiToggle'
const wrapperCss = styled.main`
font-size: 2em;
margin: 3em;
max-width: 300px;
`
export default {
title: 'Toggles',
argTypes: {
width: { control: { type: 'string' } },
},
decorators: [
(Component: Story) => (
<div css={wrapperCss}>
<Component />
</div>
),
],
}
export const MultiToggleExample = () => {
const [active, setActive] = useState(0)
function doSomethingWithIndex(index: number) {
// here's where youd update state based on index choice
// switch(index){} ...
setActive(index)
}
return <MultiToggle toggle={doSomethingWithIndex} activeIndex={active} options={['option1', 'option2', 'option3']} />
}

30
src/components/Toggle/MultiToggle.tsx
View File

@ -1,4 +1,3 @@
import React from 'react'
import styled from 'styled-components/macro' import styled from 'styled-components/macro'
export const ToggleWrapper = styled.button<{ width?: string }>` export const ToggleWrapper = styled.button<{ width?: string }>`
@ -31,32 +30,3 @@ export const ToggleElement = styled.span<{ isActive?: boolean; fontSize?: string
color: ${({ theme, isActive }) => (isActive ? theme.text2 : theme.text3)}; color: ${({ theme, isActive }) => (isActive ? theme.text2 : theme.text3)};
} }
` `
export const ToggleText = styled.div`
color: ${({ theme }) => theme.text3};
font-size: 12px;
margin-right: 0.5rem;
width: 100%;
white-space: nowrap;
padding: 0 0 0 4px;
`
export interface ToggleProps {
options: string[]
activeIndex: number
toggle: (index: number) => void
id?: string
width?: string
}
export default function MultiToggle({ id, options, activeIndex, toggle, width }: ToggleProps) {
return (
<ToggleWrapper id={id} width={width}>
{options.map((option, index) => (
<ToggleElement key={id + '-' + index} isActive={index === activeIndex} onClick={() => toggle(index)}>
{option}
</ToggleElement>
))}
</ToggleWrapper>
)
}

2946
yarn.lock
View File

File diff suppressed because it is too large Load Diff