Skip to content

I
interface
Commit d762836e authored by Ian Lapham's avatar Ian Lapham Committed by GitHub
Browse files
Options

Merge pull request #2 from Uniswap/nuke-storybook 

fix(storybook): remove it for now
parents b630d594 88f8f804
Expand all Show whitespace changes
Inline Side-by-side
Showing with 31 additions and 20038 deletions
.eslintrc.json
View file @ d762836e
...@@ -24,6 +24,7 @@ ...@@ -24,6 +24,7 @@
"rules": { "rules": {
"@typescript-eslint/explicit-function-return-type": "off", "@typescript-eslint/explicit-function-return-type": "off",
"prettier/prettier": "error", "prettier/prettier": "error",
"@typescript-eslint/no-explicit-any": "off" "@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/ban-ts-comment": "off"
} }
} }
.storybook/main.ts deleted 100644 → 0
View file @ b630d594
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 deleted 100644 → 0
View file @ b630d594
import { addons } from '@storybook/addons'
import { light } from './theme'
addons.setConfig({ theme: light })
.storybook/preview.tsx deleted 100644 → 0
View file @ b630d594
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 deleted 100644 → 0
View file @ b630d594
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
View file @ d762836e
...@@ -9,15 +9,6 @@ ...@@ -9,15 +9,6 @@
"@reach/dialog": "^0.10.3", "@reach/dialog": "^0.10.3",
"@reach/portal": "^0.10.3", "@reach/portal": "^0.10.3",
"@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",
"@types/jest": "^25.2.1", "@types/jest": "^25.2.1",
"@types/lodash.flatmap": "^4.5.6", "@types/lodash.flatmap": "^4.5.6",
"@types/luxon": "^1.24.4", "@types/luxon": "^1.24.4",
...@@ -103,10 +94,9 @@ ...@@ -103,10 +94,9 @@
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",
"build": "react-scripts build", "build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject", "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": { "eslintConfig": {
"extends": "react-app", "extends": "react-app",
......
src/components/Button/Button.stories.tsx deleted 100644 → 0
View file @ b630d594
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 deleted 100644 → 0
View file @ b630d594
import { Story } from '@storybook/react/types-6-0'
import React from 'react'
import Component, { LineChartProps } from './'
import { dummyData } from './data'
// import Row, { RowFixed } from 'components/Row'
import styled from 'styled-components'
// 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 wrapperCss = styled.main`
font-size: 2em;
margin: 3em;
max-width: 300px;
`
export default {
title: 'Charts',
argTypes: {
disabled: { control: { type: 'boolean' } },
onClick: { action: 'clicked' },
},
decorators: [
(Component: Story) => (
<div css={wrapperCss}>
<Component />
</div>
),
],
}
const Template: Story<LineChartProps> = (args) => <Component {...args}>{args.children}</Component>
const Wrapper = styled.div`
margin: 1em 2em;
max-width: 500px;
& > * {
font-size: 1em;
}
`
export const Basic = Template.bind({})
Basic.args = { data: dummyData }
Basic.decorators = [
(Story: any) => {
return (
<Wrapper>
<Story />
</Wrapper>
)
},
]
// 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/components/LineChart/index.tsx
View file @ d762836e
...@@ -3,7 +3,6 @@ import { createChart, IChartApi } from 'lightweight-charts' ...@@ -3,7 +3,6 @@ import { createChart, IChartApi } from 'lightweight-charts'
import { darken } from 'polished' import { darken } from 'polished'
import { RowBetween } from 'components/Row' import { RowBetween } from 'components/Row'
import Card from '../Card' import Card from '../Card'
import styled from 'styled-components' import styled from 'styled-components'
import useTheme from 'hooks/useTheme' import useTheme from 'hooks/useTheme'
...@@ -18,8 +17,6 @@ const Wrapper = styled(Card)` ...@@ -18,8 +17,6 @@ const Wrapper = styled(Card)`
} }
` `
const ChartContent = styled.div``
const DEFAULT_HEIGHT = 300 const DEFAULT_HEIGHT = 300
export type LineChartProps = { export type LineChartProps = {
...@@ -46,27 +43,22 @@ const LineChart = ({ ...@@ -46,27 +43,22 @@ const LineChart = ({
}: LineChartProps) => { }: LineChartProps) => {
const theme = useTheme() const theme = useTheme()
// reference for DOM element to create with chart const chartRef = useRef<HTMLDivElement>(null)
const chartRef = useRef(null)
// pointer to the chart object
const [chartCreated, setChart] = useState<IChartApi | undefined>() const [chartCreated, setChart] = useState<IChartApi | undefined>()
/** // for reseting value on hover exit
* @todo respond to dark mode
*/
const textColor = '#565A69'
const currenValue = data[data.length - 1].value const currenValue = data[data.length - 1].value
const isClient = typeof window === 'object'
const handleResize = useCallback(() => { const handleResize = useCallback(() => {
chartCreated && chartCreated.resize(chartRef.current.parentNode.clientWidth - 32, height) if (chartCreated && chartRef?.current?.parentElement) {
chartCreated && chartCreated.timeScale().fitContent() chartCreated.resize(chartRef.current.parentElement.clientWidth - 32, height)
chartCreated && chartCreated.timeScale().scrollToPosition(0, 0) chartCreated.timeScale().fitContent()
}, [chartCreated, height]) chartCreated.timeScale().scrollToPosition(0, false)
}
}, [chartCreated, chartRef, height])
// add event listener for resize
const isClient = typeof window === 'object'
useEffect(() => { useEffect(() => {
if (!isClient) { if (!isClient) {
return return
...@@ -75,14 +67,18 @@ const LineChart = ({ ...@@ -75,14 +67,18 @@ const LineChart = ({
return () => window.removeEventListener('resize', handleResize) return () => window.removeEventListener('resize', handleResize)
}, [isClient, chartRef, handleResize]) // Empty array ensures that effect is only run on mount and unmount }, [isClient, chartRef, handleResize]) // Empty array ensures that effect is only run on mount and unmount
const textColor = theme.text2
// if chart not instantiated in canvas, create it
useEffect(() => { useEffect(() => {
if (!chartCreated && data && chartRef && chartRef.current) { if (!chartCreated && data && !!chartRef?.current?.parentElement) {
const chart = createChart(chartRef.current, { const chart = createChart(chartRef.current, {
height: height, height: height,
width: chartRef.current.parentNode.clientWidth - 32, width: chartRef.current.parentElement.clientWidth - 32,
layout: { layout: {
backgroundColor: 'transparent', backgroundColor: 'transparent',
textColor: textColor, textColor: textColor,
fontFamily: 'Inter',
}, },
rightPriceScale: { rightPriceScale: {
scaleMargins: { scaleMargins: {
...@@ -136,24 +132,24 @@ const LineChart = ({ ...@@ -136,24 +132,24 @@ const LineChart = ({
// update the title when hovering on the chart // update the title when hovering on the chart
chart.subscribeCrosshairMove(function (param) { chart.subscribeCrosshairMove(function (param) {
if ( if (
param === undefined || chartRef?.current &&
(param === undefined ||
param.time === undefined || param.time === undefined ||
(param && param.point && param.point.x < 0) || (param && param.point && param.point.x < 0) ||
(param && param.point && param.point.x > chartRef.current.clientWidth) || (param && param.point && param.point.x > chartRef.current.clientWidth) ||
(param && param.point && param.point.y < 0) || (param && param.point && param.point.y < 0) ||
(param && param.point && param.point.y > height) (param && param.point && param.point.y > height))
) { ) {
setValue && setValue(currenValue) setValue && setValue(currenValue)
} else { } else {
const price = param.seriesPrices.get(series) const price = parseFloat(param.seriesPrices.get(series)?.toString() ?? currenValue)
setValue && setValue(price) setValue && setValue(price)
} }
}) })
chart.timeScale().fitContent() chart.timeScale().fitContent()
setChart(chart) setChart(chart)
} }
}, [color, chartCreated, currenValue, data, height, setValue, textColor, theme.bg1]) }, [color, chartCreated, currenValue, data, height, setValue, textColor, theme])
return ( return (
<Wrapper> <Wrapper>
...@@ -161,7 +157,7 @@ const LineChart = ({ ...@@ -161,7 +157,7 @@ const LineChart = ({
{topLeft ?? null} {topLeft ?? null}
{topRight ?? null} {topRight ?? null}
</RowBetween> </RowBetween>
<ChartContent ref={chartRef} id={'test-id'} {...rest} /> <div ref={chartRef} id={'line-chart'} {...rest} />
<RowBetween> <RowBetween>
{bottomLeft ?? null} {bottomLeft ?? null}
{bottomRight ?? null} {bottomRight ?? null}
......
src/hooks/useAddTokenToMetamask.ts
View file @ d762836e
...@@ -19,7 +19,7 @@ export default function useAddTokenToMetamask( ...@@ -19,7 +19,7 @@ export default function useAddTokenToMetamask(
.request({ .request({
method: 'wallet_watchAsset', method: 'wallet_watchAsset',
params: { params: {
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore // eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore // need this for incorrect ethers provider type //@ts-ignore // need this for incorrect ethers provider type
type: 'ERC20', type: 'ERC20',
options: { options: {
......
src/pages/AppBody.tsx
View file @ d762836e
...@@ -9,7 +9,6 @@ export const BodyWrapper = styled.div` ...@@ -9,7 +9,6 @@ export const BodyWrapper = styled.div`
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
0px 24px 32px rgba(0, 0, 0, 0.01); 0px 24px 32px rgba(0, 0, 0, 0.01);
border-radius: 30px; border-radius: 30px;
/* padding: 1rem; */
` `
/** /**
......
yarn.lock deleted 100644 → 0
View file @ b630d594
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment