diff options
Diffstat (limited to 'packages/dev-tools-pages/ts/components')
23 files changed, 440 insertions, 464 deletions
diff --git a/packages/dev-tools-pages/ts/components/Animations/Compiler/index.tsx b/packages/dev-tools-pages/ts/components/Animations/Compiler/index.tsx index dbd8a3799..db93ff8a4 100644 --- a/packages/dev-tools-pages/ts/components/Animations/Compiler/index.tsx +++ b/packages/dev-tools-pages/ts/components/Animations/Compiler/index.tsx @@ -1,10 +1,11 @@ import * as React from 'react'; -import Animation from '../index'; +import { BaseAnimation } from '../index'; + import * as animationData from './data.json'; -function AnimationCompiler() { - return <Animation animationData={animationData} width={2150} height={700} />; -} +const CompilerAnimation: React.StatelessComponent<{}> = () => ( + <BaseAnimation animationData={animationData} width={2150} height={700} /> +); -export default AnimationCompiler; +export { CompilerAnimation as Animation }; diff --git a/packages/dev-tools-pages/ts/components/Animations/Cov/index.tsx b/packages/dev-tools-pages/ts/components/Animations/Cov/index.tsx index c14c64ab9..445824717 100644 --- a/packages/dev-tools-pages/ts/components/Animations/Cov/index.tsx +++ b/packages/dev-tools-pages/ts/components/Animations/Cov/index.tsx @@ -1,10 +1,11 @@ import * as React from 'react'; -import Animation from '../index'; +import { BaseAnimation } from '../index'; + import * as animationData from './data.json'; -function AnimationCov() { - return <Animation animationData={animationData} width={1981} height={660} />; -} +const AnimationCov: React.StatelessComponent<{}> = () => ( + <BaseAnimation animationData={animationData} width={1981} height={660} /> +); -export default AnimationCov; +export { AnimationCov as Animation }; diff --git a/packages/dev-tools-pages/ts/components/Animations/Profiler/index.tsx b/packages/dev-tools-pages/ts/components/Animations/Profiler/index.tsx index e767a587f..73a4e9ad6 100644 --- a/packages/dev-tools-pages/ts/components/Animations/Profiler/index.tsx +++ b/packages/dev-tools-pages/ts/components/Animations/Profiler/index.tsx @@ -1,10 +1,11 @@ import * as React from 'react'; -import Animation from '../index'; +import { BaseAnimation } from '../index'; + import * as animationData from './data.json'; -function AnimationProfiler() { - return <Animation animationData={animationData} width={1985} height={657} />; -} +const AnimationProfiler: React.StatelessComponent<{}> = () => ( + <BaseAnimation animationData={animationData} width={1985} height={657} /> +); -export default AnimationProfiler; +export { AnimationProfiler as Animation }; diff --git a/packages/dev-tools-pages/ts/components/Animations/Trace/index.tsx b/packages/dev-tools-pages/ts/components/Animations/Trace/index.tsx index fa421a3bf..10a78ccb7 100644 --- a/packages/dev-tools-pages/ts/components/Animations/Trace/index.tsx +++ b/packages/dev-tools-pages/ts/components/Animations/Trace/index.tsx @@ -1,10 +1,11 @@ import * as React from 'react'; -import Animation from '../index'; +import { BaseAnimation } from '../index'; + import * as animationData from './data.json'; -function AnimationTrace() { - return <Animation animationData={animationData} width={2241} height={610} />; -} +const AnimationTrace: React.StatelessComponent<{}> = () => ( + <BaseAnimation animationData={animationData} width={2241} height={610} /> +); -export default AnimationTrace; +export { AnimationTrace as Animation }; diff --git a/packages/dev-tools-pages/ts/components/Animations/index.tsx b/packages/dev-tools-pages/ts/components/Animations/index.tsx index 3db501dc1..95af4448c 100644 --- a/packages/dev-tools-pages/ts/components/Animations/index.tsx +++ b/packages/dev-tools-pages/ts/components/Animations/index.tsx @@ -11,55 +11,28 @@ interface AnimationProps { } interface AnimationState { - width?: number; - height?: number; + width?: number | undefined; + height?: number | undefined; } -class Animation extends React.PureComponent<AnimationProps, AnimationState> { - timeout = null as any; - constructor(props: AnimationProps) { - super(props); +class BaseAnimation extends React.PureComponent<AnimationProps, AnimationState> { + public state: AnimationState = { + height: undefined, + width: undefined, + }; + private _timeout = null as any; - this.state = { - height: undefined, - width: undefined, - }; - - this.handleResize = this.handleResize.bind(this); - this.updateAnimationSize = this.updateAnimationSize.bind(this); - } - - componentDidMount() { - this.updateAnimationSize(); - window.addEventListener('resize', this.handleResize); - } - - componentWillUnmount() { - window.removeEventListener('resize', this.handleResize); + public componentDidMount(): void { + this._updateAnimationSize(); + window.addEventListener('resize', this._handleResize); } - handleResize() { - clearTimeout(this.timeout); - this.timeout = setTimeout(this.updateAnimationSize, 50); + public componentWillUnmount(): void { + window.removeEventListener('resize', this._handleResize); } - updateAnimationSize() { - const windowWidth = window.innerWidth; - let width = undefined; - let height = undefined; - if (windowWidth <= 1000) { - const maxWidth = windowWidth + 250; - const ratio = maxWidth / this.props.width; - - height = Math.round(this.props.height * ratio); - width = Math.round(this.props.width * ratio); - } - - this.setState({ width, height }); - } - - render() { - let { animationData } = this.props; + public render(): React.ReactNode { + const { animationData } = this.props; const height = this.state.height || this.props.height; const width = this.state.width || this.props.width; @@ -72,13 +45,33 @@ class Animation extends React.PureComponent<AnimationProps, AnimationState> { options={{ loop: true, autoplay: true, - animationData: animationData, + animationData, }} /> </InnerContainer> </Container> ); } + + private readonly _handleResize = () => { + clearTimeout(this._timeout); + this._timeout = setTimeout(this._updateAnimationSize, 50); + }; + + private readonly _updateAnimationSize = () => { + const windowWidth = window.innerWidth; + let width; + let height; + if (windowWidth <= 1000) { + const maxWidth = windowWidth + 250; + const ratio = maxWidth / this.props.width; + + height = Math.round(this.props.height * ratio); + width = Math.round(this.props.width * ratio); + } + + this.setState({ width, height }); + }; } const Container = styled.div` @@ -102,4 +95,4 @@ const InnerContainer = styled.div` transform: translateX(-50%); `; -export default Animation; +export { BaseAnimation }; diff --git a/packages/dev-tools-pages/ts/components/Base.tsx b/packages/dev-tools-pages/ts/components/Base.tsx index 54340c9de..a1b066d85 100644 --- a/packages/dev-tools-pages/ts/components/Base.tsx +++ b/packages/dev-tools-pages/ts/components/Base.tsx @@ -1,24 +1,27 @@ import * as React from 'react'; +import { ThemeProvider } from 'styled-components'; -import ThemeContext from 'ts/context'; -import GlobalStyles from 'ts/globalStyles'; -import Header from 'ts/components/Header'; -import Footer from 'ts/components/Footer'; +import { Footer } from 'ts/components/Footer'; +import { Header } from 'ts/components/Header'; +import { ThemeContext } from 'ts/context'; +import { GlobalStyles } from 'ts/globalStyles'; interface BaseProps { context: any; children: React.ReactNode; } -function Base(props: BaseProps) { - return ( - <ThemeContext.Provider value={props.context}> - <GlobalStyles /> - <Header /> - {props.children} - <Footer /> - </ThemeContext.Provider> - ); -} +const Base: React.StatelessComponent<BaseProps> = props => ( + <ThemeContext.Provider value={props.context}> + <ThemeProvider theme={props.context}> + <React.Fragment> + <GlobalStyles /> + <Header /> + {props.children} + <Footer /> + </React.Fragment> + </ThemeProvider> + </ThemeContext.Provider> +); -export default Base; +export { Base }; diff --git a/packages/dev-tools-pages/ts/components/Breakout.tsx b/packages/dev-tools-pages/ts/components/Breakout.tsx index 39998e9c7..505d8de41 100644 --- a/packages/dev-tools-pages/ts/components/Breakout.tsx +++ b/packages/dev-tools-pages/ts/components/Breakout.tsx @@ -9,4 +9,4 @@ const Breakout = styled.div` `}; `; -export default Breakout; +export { Breakout }; diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx index 2a968af28..d3b36ebfd 100644 --- a/packages/dev-tools-pages/ts/components/Button.tsx +++ b/packages/dev-tools-pages/ts/components/Button.tsx @@ -1,10 +1,8 @@ import styled from 'styled-components'; -import { colors } from '../variables'; -import { media } from 'ts/variables'; -import { withContext, Props } from './withContext'; +import { colors, media } from 'ts/variables'; -interface ButtonProps extends Props { +interface ButtonProps { large?: boolean; } @@ -17,7 +15,7 @@ const Button = font-weight: 500; white-space: nowrap; vertical-align: middle; - background-color: ${props => props.colors.secondary}; + background-color: ${props => props.theme.colors.secondary}; color: ${colors.black}; border: 0; border-radius: 5rem; @@ -37,10 +35,10 @@ const Button = `} :hover, :focus { - background-color: ${props => props.colors.secondary_alt}; + background-color: ${props => props.theme.colors.secondary_alt}; outline: 0; - } - + } + ${media.small` font-size: .875rem; padding: .5625rem 1.25rem; @@ -54,4 +52,4 @@ const Button = `} `; -export default withContext(Button); +export { Button }; diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx index f04d5aab8..da2bb83e6 100644 --- a/packages/dev-tools-pages/ts/components/Code.tsx +++ b/packages/dev-tools-pages/ts/components/Code.tsx @@ -1,10 +1,11 @@ import * as React from 'react'; import styled from 'styled-components'; -import { colors, media } from 'ts/variables'; -import BaseButton from './Button'; +import { colors } from 'ts/variables'; -const touch = Boolean( +import { Button as BaseButton } from './Button'; + +const isTouch = Boolean( 'ontouchstart' in window || (window as any).navigator.maxTouchPoints > 0 || (window as any).navigator.msMaxTouchPoints > 0, @@ -13,12 +14,12 @@ const touch = Boolean( interface CodeProps { children: React.ReactNode; language?: string; - light?: boolean; - diff?: boolean; - gutter?: Array<number>; + isLight?: boolean; + isDiff?: boolean; + gutter?: Array<number | undefined>; gutterLength?: number; - copy?: boolean; - etc?: boolean; + canCopy?: boolean; + isEtc?: boolean; } interface CodeState { @@ -27,7 +28,7 @@ interface CodeState { } const Button = styled(BaseButton)` - opacity: ${touch ? '1' : '0'}; + opacity: ${isTouch ? '1' : '0'}; position: absolute; top: 1rem; right: 1rem; @@ -51,12 +52,12 @@ const Base = font-size: .875rem; color: ${props => (props.language === undefined ? colors.white : 'inherit')}; background-color: ${props => - props.light ? 'rgba(255,255,255,.15)' : props.language === undefined ? colors.black : '#F1F4F5'}; + props.isLight ? 'rgba(255,255,255,.15)' : props.language === undefined ? colors.black : '#F1F4F5'}; white-space: ${props => (props.language === undefined ? 'nowrap' : '')}; position: relative; ${props => - props.diff + props.isDiff ? ` background-color: #E9ECED; display: flex; @@ -66,8 +67,6 @@ const Base = -webkit-overflow-scrolling: touch; ` : ``} - - `; const StyledCodeDiff = styled(({ gutterLength, children, ...props }: any) => <code {...props}>{children}</code>)` @@ -112,8 +111,8 @@ const StyledCodeDiff = styled(({ gutterLength, children, ...props }: any) => <co const StyledPre = styled.pre` margin: 0; - ${(props: { diff: boolean }) => - !props.diff + ${(props: { isDiff: boolean }) => + !props.isDiff ? ` padding: 1.5rem; overflow-x: auto; @@ -134,37 +133,78 @@ const StyledCopyInput = styled.textarea` const CopyInput = StyledCopyInput as any; class Code extends React.Component<CodeProps, CodeState> { - code = React.createRef<HTMLTextAreaElement>(); - - state: CodeState = {}; + public state: CodeState = {}; + private readonly _code = React.createRef<HTMLTextAreaElement>(); constructor(props: CodeProps) { super(props); } - async componentDidMount() { - const { language, children, diff, gutter, etc } = this.props; + public componentDidMount(): void { + /* + * _onMountAsync is only setting state, so no point in handling the promise + */ + /* tslint:disable:no-floating-promises */ + this._onMountAsync(); + /* tslint:enable:no-floating-promises */ + } + + public render(): React.ReactNode { + const { language, isLight, isDiff, children, gutterLength, canCopy } = this.props; + const { hlCode } = this.state; + + let CodeComponent = 'code'; + let codeProps = {}; + if (isDiff) { + codeProps = { gutterLength }; + CodeComponent = StyledCodeDiff as any; + } + + return ( + <Container> + <Base language={language} isDiff={isDiff} isLight={isLight}> + <StyledPre isDiff={isDiff}> + <CodeComponent + {...codeProps} + dangerouslySetInnerHTML={hlCode ? { __html: this.state.hlCode } : null} + > + {hlCode === undefined ? children : null} + </CodeComponent> + </StyledPre> + {!('clipboard' in navigator) ? ( + <CopyInput readOnly={true} aria-hidden="true" ref={this._code} value={children} /> + ) : null} + </Base> + {navigator.userAgent !== 'ReactSnap' && canCopy ? ( + <Button onClick={this._handleCopyAsync}>{this.state.copied ? 'Copied' : 'Copy'}</Button> + ) : null} + </Container> + ); + } + + private async _onMountAsync(): Promise<void> { + const { language, children, isDiff, gutter, isEtc } = this.props; const code = children as string; if (language !== undefined) { - const { default: highlight } = await System.import(/* webpackChunkName: 'highlightjs' */ 'ts/highlight'); + const { highlight } = await System.import(/* webpackChunkName: 'highlightjs' */ 'ts/highlight'); this.setState({ - hlCode: highlight({ language, code, diff, gutter, etc }), + hlCode: highlight({ language, code, isDiff, gutter, isEtc }), }); } } - handleCopy = async () => { + private readonly _handleCopyAsync = async () => { try { if ('clipboard' in navigator) { await (navigator as any).clipboard.writeText(this.props.children); this.setState({ copied: true }); } else { const lastActive = document.activeElement as HTMLElement; - this.code.current.focus(); - this.code.current.select(); + this._code.current.focus(); + this._code.current.select(); document.execCommand('copy'); lastActive.focus(); this.setState({ copied: true }); @@ -173,36 +213,6 @@ class Code extends React.Component<CodeProps, CodeState> { this.setState({ copied: false }); } }; - - render() { - const { language, light, diff, children, gutterLength, copy } = this.props; - const { hlCode } = this.state; - - let Code = 'code'; - let codeProps = {}; - if (diff) { - codeProps = { gutterLength }; - Code = StyledCodeDiff as any; - } - - return ( - <Container> - <Base language={language} diff={diff} light={light}> - <StyledPre diff={diff}> - <Code {...codeProps} dangerouslySetInnerHTML={hlCode ? { __html: this.state.hlCode } : null}> - {hlCode === undefined ? children : null} - </Code> - </StyledPre> - {!('clipboard' in navigator) ? ( - <CopyInput readOnly aria-hidden="true" ref={this.code} value={children} /> - ) : null} - </Base> - {navigator.userAgent !== 'ReactSnap' && copy ? ( - <Button onClick={this.handleCopy}>{this.state.copied ? 'Copied' : 'Copy'}</Button> - ) : null} - </Container> - ); - } } -export default Code; +export { Code }; diff --git a/packages/dev-tools-pages/ts/components/Compiler.tsx b/packages/dev-tools-pages/ts/components/Compiler.tsx index 37796e6cc..f16365fd0 100644 --- a/packages/dev-tools-pages/ts/components/Compiler.tsx +++ b/packages/dev-tools-pages/ts/components/Compiler.tsx @@ -1,10 +1,11 @@ import * as React from 'react'; import styled from 'styled-components'; -import { media, colors } from '../variables'; -import Container from './Container'; -import InlineCode from './InlineCode'; -import Breakout from './Breakout'; +import { colors, media } from 'ts/variables'; + +import { Breakout } from './Breakout'; +import { Container } from './Container'; +import { InlineCode } from './InlineCode'; const Cards = styled.dl` column-count: 3; @@ -12,7 +13,7 @@ const Cards = styled.dl` ${media.medium` column-count: 1; - `}: ; + `}; `; const Card = styled.div` @@ -46,7 +47,7 @@ const cards = [ title: 'A Project-centric', body: ( <React.Fragment> - Compiles an entire project instead of only individual <InlineCode alt>.sol</InlineCode> files. + Compiles an entire project instead of only individual <InlineCode isAlt={true}>.sol</InlineCode> files. </React.Fragment> ), }, @@ -70,21 +71,19 @@ const cards = [ }, ]; -function Compiler() { - return ( - <Container> - <Breakout> - <Cards> - {cards.map(card => ( - <Card key={card.title.split(' ').join('-')}> - <Dt>{card.title}</Dt> - <Dd>{card.body}</Dd> - </Card> - ))} - </Cards> - </Breakout> - </Container> - ); -} +const Compiler: React.StatelessComponent<{}> = () => ( + <Container> + <Breakout> + <Cards> + {cards.map(card => ( + <Card key={card.title.split(' ').join('-')}> + <Dt>{card.title}</Dt> + <Dd>{card.body}</Dd> + </Card> + ))} + </Cards> + </Breakout> + </Container> +); -export default Compiler; +export { Compiler }; diff --git a/packages/dev-tools-pages/ts/components/Container.tsx b/packages/dev-tools-pages/ts/components/Container.tsx index de2de383b..1b9212ed2 100644 --- a/packages/dev-tools-pages/ts/components/Container.tsx +++ b/packages/dev-tools-pages/ts/components/Container.tsx @@ -1,7 +1,5 @@ import styled from 'styled-components'; -import { media } from 'ts/variables'; - interface ContainerProps { wide?: boolean; } @@ -15,4 +13,4 @@ const Container = width: ${props => (props.wide ? '100%' : 'calc(100% - 5rem)')}; `; -export default Container; +export { Container }; diff --git a/packages/dev-tools-pages/ts/components/Content.tsx b/packages/dev-tools-pages/ts/components/Content.tsx index 3dcf50660..328ef0778 100644 --- a/packages/dev-tools-pages/ts/components/Content.tsx +++ b/packages/dev-tools-pages/ts/components/Content.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import styled from 'styled-components'; -import Container from './Container'; +import { Container } from './Container'; const StyledMain = styled.div < @@ -26,12 +26,10 @@ interface MainProps { children: React.ReactNode; } -function Main(props: MainProps) { - return ( - <StyledMain dark={props.dark}> - <Container>{props.children}</Container> - </StyledMain> - ); -} +const Content: React.StatelessComponent<MainProps> = props => ( + <StyledMain dark={props.dark}> + <Container>{props.children}</Container> + </StyledMain> +); -export default Main; +export { Content }; diff --git a/packages/dev-tools-pages/ts/components/ContentBlock.tsx b/packages/dev-tools-pages/ts/components/ContentBlock.tsx index c54930902..66e0331ab 100644 --- a/packages/dev-tools-pages/ts/components/ContentBlock.tsx +++ b/packages/dev-tools-pages/ts/components/ContentBlock.tsx @@ -1,10 +1,11 @@ import * as React from 'react'; import styled from 'styled-components'; -import { withContext, Props } from './withContext'; -import { Beta, Alpha } from './Typography'; +import { ContextInterface } from 'ts/context'; import { media } from 'ts/variables'; +import { Alpha, Beta } from './Typography'; + const Base = styled.div` display: flex; align-items: flex-start; @@ -52,13 +53,13 @@ const StyledTitle = styled(Alpha)` `}; `; -interface ContentBlockProps extends Props { +interface ContentBlockProps extends ContextInterface { title: string; main?: boolean; children?: React.ReactNode; } -function ContentBlock(props: ContentBlockProps) { +const ContentBlock: React.StatelessComponent<ContentBlockProps> = props => { const children = React.Children.map(props.children, child => { return <Item>{child}</Item>; }); @@ -67,10 +68,10 @@ function ContentBlock(props: ContentBlockProps) { return ( <Base> - <Title color={props.colors.type}>{props.title}</Title> + <Title color={props.colors}>{props.title}</Title> {children ? <Content>{children}</Content> : null} </Base> ); -} +}; -export default withContext(ContentBlock); +export { ContentBlock }; diff --git a/packages/dev-tools-pages/ts/components/Footer.tsx b/packages/dev-tools-pages/ts/components/Footer.tsx index 1a948fe08..d7ed6309a 100644 --- a/packages/dev-tools-pages/ts/components/Footer.tsx +++ b/packages/dev-tools-pages/ts/components/Footer.tsx @@ -1,54 +1,49 @@ import * as React from 'react'; import styled from 'styled-components'; -import { Alpha, Beta } from './Typography'; -import { withContext, Props } from './withContext'; -import Container from './Container'; -import { media } from '../variables'; - +import { context as compiler } from 'ts/context/compiler'; +import { context as cov } from 'ts/context/cov'; +import { context as profiler } from 'ts/context/profiler'; +import { context as trace } from 'ts/context/trace'; import MainIcon from 'ts/icons/logos/0x.svg'; -import compiler from 'ts/context/compiler'; -import cov from 'ts/context/cov'; -import profiler from 'ts/context/profiler'; -import trace from 'ts/context/trace'; +import { media } from 'ts/variables'; + +import { Container } from './Container'; +import { Alpha, Beta } from './Typography'; const tools = [trace, cov, compiler, profiler]; -function Footer(props: Props) { - const { colors } = props; - - return ( - <StyledFooter background={colors.secondary}> - <Container> - <Top> - <Alpha>Other tools by 0x</Alpha> - <List> - {tools.map(({ title, subtitle, icon }) => ( - <ListItem key={title}> - <ListLink hoverColor={colors.dark} href="#"> - <Icon as={icon} /> - <div> - <Beta>{title}</Beta> - <p>{subtitle}</p> - </div> - </ListLink> - </ListItem> - ))} - </List> - </Top> - <Media as="aside"> - <Icon as={MainIcon} /> - <Small> +const Footer: React.StatelessComponent<{}> = () => ( + <StyledFooter> + <Container> + <Top> + <Alpha>Other tools by 0x</Alpha> + <List> + {tools.map(({ title, subtitle, icon }) => ( + <ListItem key={title}> + <ListLink href="#"> + <Icon as={icon} /> + <div> + <Beta>{title}</Beta> + <p>{subtitle}</p> + </div> + </ListLink> + </ListItem> + ))} + </List> + </Top> + <Media as="aside"> + <Icon as={MainIcon} /> + <Small> 0x is an open, permissionless protocol allowing for tokens to be traded on the Ethereum blockchain. - </Small> - </Media> - </Container> - </StyledFooter> - ); -} + </Small> + </Media> + </Container> + </StyledFooter> +); const StyledFooter = styled.footer` - background-color: ${(props: { background: string }) => props.background}; + background-color: ${props => props.theme.colors.secondary}; padding-top: 6.25rem; padding-bottom: 5.4375rem; @@ -81,7 +76,7 @@ const Media = styled.div` align-items: center; ${Icon} { - margin-top: .5rem; + margin-top: 0.5rem; align-self: flex-start; } `; @@ -95,7 +90,7 @@ const List = styled.ul` flex-wrap: wrap; ${media.medium` - width: 100%; + width: 100%; `}; ${media.small` @@ -121,11 +116,14 @@ const ListItem = styled.li` `}; `; -const ListLink = styled.a<{hoverColor: string;}>` +const ListLink = + styled.a < + { hoverColor: string } > + ` display: flex; align-items: center; :hover { - color: ${props => props.hoverColor}; + color: ${props => props.theme.colors.dark}; } `; @@ -134,4 +132,4 @@ const Small = styled.small` max-width: 37.5rem; `; -export default withContext(Footer); +export { Footer }; diff --git a/packages/dev-tools-pages/ts/components/Header.tsx b/packages/dev-tools-pages/ts/components/Header.tsx index b561a5d91..8c7154623 100644 --- a/packages/dev-tools-pages/ts/components/Header.tsx +++ b/packages/dev-tools-pages/ts/components/Header.tsx @@ -1,30 +1,30 @@ import * as React from 'react'; import styled from 'styled-components'; -import { withContext, Props } from './withContext'; -import Container from './Container'; -import { Small } from './Typography'; - -import { media } from '../variables'; +import { ContextInterface, ThemeContext } from 'ts/context'; +import { media } from 'ts/variables'; -function Header(props: Props) { - const { icon, title, colors } = props; +import { Container } from './Container'; +import { Small } from './Typography'; - return ( - <StyledHeader> - <Container> - <LogoMark> - <Logo as={icon} color={colors.main} /> - <Title>{title}</Title> - </LogoMark> +const Header: React.StatelessComponent<{}> = () => ( + <ThemeContext.Consumer> + {({ icon, title, colors }: ContextInterface) => ( + <StyledHeader> + <Container> + <LogoMark> + <Logo as={icon} color={colors.main} /> + <Title>{title}</Title> + </LogoMark> - <Link as="a" href="https://0xproject.com/"> - Built by 0x - </Link> - </Container> - </StyledHeader> - ); -} + <Link as="a" href="https://0xproject.com/"> + Built by 0x + </Link> + </Container> + </StyledHeader> + )} + </ThemeContext.Consumer> +); const StyledHeader = styled.header` padding-top: 3.75rem; @@ -51,7 +51,7 @@ const LogoMark = styled.div` `; const StyledLogo = styled.div` - color: ${props => props.color} + color: ${props => props.color}; width: 1.75rem; height: 100%; `; @@ -76,4 +76,4 @@ const StyledLink = styled(Small)` const Link = StyledLink as any; const Logo = StyledLogo as any; -export default withContext(Header); +export { Header }; diff --git a/packages/dev-tools-pages/ts/components/Hero.tsx b/packages/dev-tools-pages/ts/components/Hero.tsx index 8b866c5aa..9db15cb36 100644 --- a/packages/dev-tools-pages/ts/components/Hero.tsx +++ b/packages/dev-tools-pages/ts/components/Hero.tsx @@ -1,33 +1,32 @@ import * as React from 'react'; import styled from 'styled-components'; +import { ContextInterface, ThemeContext } from 'ts/context'; import { media } from 'ts/variables'; -import { withContext, Props } from './withContext'; -import Button from './Button'; + +import { Button } from './Button'; import { Beta } from './Typography'; -interface HeroProps extends Props { +interface HeroProps extends ContextInterface { children: React.ReactNode; } -function Hero(props: HeroProps) { - const { subtitle, tagline } = props; - - return ( - <React.Fragment> +const Hero: React.StatelessComponent<HeroProps> = ({ children }) => ( + <ThemeContext.Consumer> + {({ subtitle, tagline }: ContextInterface) => ( <StyledHero> <HeroContainer> <Subtitle>{subtitle}</Subtitle> <Tagline as="p">{tagline}</Tagline> - <Button as="a" href="#" large> + <Button as="a" href="#" large={true}> Read the Docs </Button> </HeroContainer> - {navigator.userAgent !== 'ReactSnap' ? props.children : null} + {navigator.userAgent !== 'ReactSnap' ? children : null} </StyledHero> - </React.Fragment> - ); -} + )} + </ThemeContext.Consumer> +); const StyledHero = styled.section` text-align: center; @@ -65,4 +64,4 @@ const Tagline = styled(Beta)` `}; `; -export default withContext(Hero); +export { Hero }; diff --git a/packages/dev-tools-pages/ts/components/InlineCode.tsx b/packages/dev-tools-pages/ts/components/InlineCode.tsx index 9f25927cd..00e625d66 100644 --- a/packages/dev-tools-pages/ts/components/InlineCode.tsx +++ b/packages/dev-tools-pages/ts/components/InlineCode.tsx @@ -1,15 +1,16 @@ import * as React from 'react'; import styled from 'styled-components'; + import { colors } from '../variables'; interface InlineCodeProps { - alt?: boolean; + isAlt?: boolean; children: React.ReactNode; } -const InlineCode = styled(({ alt, children, ...props }: InlineCodeProps) => <code {...props}>{children}</code>)` - background-color: ${props => (props.alt ? '#E5E8E9' : colors.blueGray)}; +const InlineCode = styled(({ isAlt, children, ...props }: InlineCodeProps) => <code {...props}>{children}</code>)` + background-color: ${props => (props.isAlt ? '#E5E8E9' : colors.blueGray)}; padding: 0.3125rem; `; -export default InlineCode; +export { InlineCode }; diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx index 838493998..ecc926e3c 100644 --- a/packages/dev-tools-pages/ts/components/Intro.tsx +++ b/packages/dev-tools-pages/ts/components/Intro.tsx @@ -1,10 +1,11 @@ import * as React from 'react'; import styled from 'styled-components'; -import { media, colors } from '../variables'; +import { colors, media } from 'ts/variables'; + +import { Breakout } from './Breakout'; +import { Container } from './Container'; import { Alpha, Lead } from './Typography'; -import Container from './Container'; -import Breakout from './Breakout'; const Main = styled.div` background-color: ${colors.lightGray}; @@ -16,7 +17,7 @@ const Main = styled.div` padding: 2.5rem; `}; ${media.medium` - display: block; + display: block; `}; `; @@ -52,30 +53,23 @@ interface IntroLeadProps { children?: React.ReactNode; } -function IntroLead(props: IntroLeadProps) { - return ( - <StyledIntroLead as="div"> - <Title>{props.title}</Title> - {props.children} - </StyledIntroLead> - ); -} +const IntroLead: React.StatelessComponent<IntroLeadProps> = props => ( + <StyledIntroLead as="div"> + <Title>{props.title}</Title> + {props.children} + </StyledIntroLead> +); -function IntroAside(props: IntroProps) { - return ( - <Breakout> - <StyledIntroAside>{props.children}</StyledIntroAside> - </Breakout> - ); -} +const IntroAside: React.StatelessComponent<IntroProps> = props => ( + <Breakout> + <StyledIntroAside>{props.children}</StyledIntroAside> + </Breakout> +); -function Intro(props: IntroProps) { - return ( - <Container wide> - <Main>{props.children}</Main> - </Container> - ); -} +const Intro: React.StatelessComponent<IntroProps> = props => ( + <Container wide={true}> + <Main>{props.children}</Main> + </Container> +); -export default Intro; export { IntroLead, IntroAside, Intro }; diff --git a/packages/dev-tools-pages/ts/components/List.tsx b/packages/dev-tools-pages/ts/components/List.tsx index 5bf6a9a6b..39e80de13 100644 --- a/packages/dev-tools-pages/ts/components/List.tsx +++ b/packages/dev-tools-pages/ts/components/List.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import styled from 'styled-components'; -import { media } from '../variables'; + +import { media } from 'ts/variables'; const StyledList = styled.ul` list-style-type: none; @@ -27,25 +28,23 @@ const StyledItem = styled.li` } :not(:last-child) { margin-bottom: 0.5625rem; - - ${media.small`margin-bottom: 0.375rem`}; + ${media.small` + margin-bottom: 0.375rem + `}; } `; interface ListProps { - items?: Array<string>; + items?: []; children?: React.ReactNode; } -function List(props: ListProps) { - return ( - <StyledList> - {props.children !== undefined - ? props.children - : props.items.map((bullet, index) => <StyledItem key={index}>{bullet}</StyledItem>)} - </StyledList> - ); -} +const List: React.StatelessComponent<ListProps> = props => ( + <StyledList> + {props.children !== undefined + ? props.children + : props.items.map((bullet, index) => <StyledItem key={index}>{bullet}</StyledItem>)} + </StyledList> +); -export default List; export { List, StyledItem as ListItem }; diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx index 36c707b06..c1d5f6b7f 100644 --- a/packages/dev-tools-pages/ts/components/Tabs.tsx +++ b/packages/dev-tools-pages/ts/components/Tabs.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; +import { Tab, TabList, TabPanel, Tabs as ReactTabs } from 'react-tabs'; import styled from 'styled-components'; + import { colors } from 'ts/variables'; -import { Tabs as ReactTabs, Tab, TabList, TabPanel } from 'react-tabs'; -import Breakout from './Breakout'; -import { withContext, Props } from './withContext'; + +import { Breakout } from './Breakout'; const StyledTabList = styled(TabList)` text-transform: uppercase; @@ -31,7 +32,7 @@ const Root = { colors: any } > ` ${StyledTab} { - background-color: ${props => props.colors.secondary}; + background-color: ${props => props.theme.colors.secondary}; &[aria-selected="true"] { background-color: ${colors.gray}; @@ -39,44 +40,40 @@ const Root = &[aria-selected="false"]:focus, &[aria-selected="false"]:hover { - background-color: ${props => props.colors.secondary_alt}; + background-color: ${props => props.theme.colors.secondary_alt}; cursor: pointer; } } `; -interface TabsProps extends Props { +interface TabsProps { children: React.ReactNode; } -function Tabs(props: TabsProps) { - return ( - <Breakout> - <Root colors={props.colors}> - <ReactTabs> - <StyledTabList> - {React.Children.map(props.children, child => { - const { props } = React.cloneElement(child as React.ReactElement<any>); - return <StyledTab>{props.title}</StyledTab>; - })} - </StyledTabList> +const Tabs: React.StatelessComponent<TabsProps> = props => ( + <Breakout> + <Root> + <ReactTabs> + <StyledTabList> + {React.Children.map(props.children, child => { + const { title } = React.cloneElement(child as React.ReactElement<any>).props; + return <StyledTab>{title}</StyledTab>; + })} + </StyledTabList> - {React.Children.map(props.children, child => <TabPanel>{child}</TabPanel>)} - </ReactTabs> - </Root> - </Breakout> - ); -} + {React.Children.map(props.children, child => <TabPanel>{child}</TabPanel>)} + </ReactTabs> + </Root> + </Breakout> +); interface TabBlockProps { title: string; children: React.ReactNode; } -function TabBlock(props: TabBlockProps) { - return <React.Fragment>{props.children}</React.Fragment>; -} +const TabBlock: React.StatelessComponent<TabBlockProps> = props => <React.Fragment>{props.children}</React.Fragment>; -const ContextTabs = withContext(Tabs); +const ContextTabs = Tabs; export { ContextTabs as Tabs, TabBlock }; diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx index 2e00ab9e9..0cee4c1a2 100644 --- a/packages/dev-tools-pages/ts/components/Trace.tsx +++ b/packages/dev-tools-pages/ts/components/Trace.tsx @@ -1,72 +1,67 @@ import * as React from 'react'; import styled from 'styled-components'; -import { colors, media } from '../variables'; - -import { withContext, Props } from './withContext'; -import { Alpha, Lead, Gamma } from './Typography'; -import Container from './Container'; -import Code from './Code'; -import Breakout from './Breakout'; +import { ContextInterface, ThemeContext } from 'ts/context'; import ExactLocation from 'ts/icons/exact-location.svg'; import NoLocation from 'ts/icons/no-location.svg'; import TimeConsuming from 'ts/icons/time-consuming.svg'; import TimeSaving from 'ts/icons/time-saving.svg'; - -interface TraceProps { - background?: string; -} - -function Trace(props: Props) { - const { colors } = props; - - return ( - <StyledSection background={colors.secondary}> - <Wrapper> - <Block> - <Alpha>The Issue</Alpha> - <MainCopy> - Every time an Ethereum transaction fails, it's extremely hard to trace down the troublemaking - line of code. The only hint you'll get is a generic error. - </MainCopy> - <Breakout> - <Code light>Error: VM Exception while processing transaction: rever</Code> - </Breakout> - - <List> - <Item> - <Copy dark> - <Gamma as="h3">No location</Gamma> - <p> - The error basically says "anything could have gone wrong here", which keeps you - completely in the dark about its exact location. - </p> - </Copy> - <Icon as={NoLocation} /> - </Item> - - <Item> - <Copy dark> - <Gamma as="h3">Time-consuming</Gamma> - <p> - Working with a large code-base that contains hundreds of smart contracts, finding - the failing line of code quickly becomes a daunting task. - </p> - </Copy> - <Icon as={TimeConsuming} /> - </Item> - </List> - </Block> - - <Block background={colors.secondary}> - <Alpha>The Fix</Alpha> - <MainCopy> - Sol-trace will give you full stack traces, including contract names, line numbers and code - snippets, every time you encounter an error. - </MainCopy> - <Breakout> - <Code light language="javascript"> - {`contracts/src/2.0.0/protocol/Exchange/MixinSignatureValidator.sol:51:8 +import { colors, media } from 'ts/variables'; + +import { Breakout } from './Breakout'; +import { Code } from './Code'; +import { Container } from './Container'; +import { Alpha, Gamma, Lead } from './Typography'; + +const Trace: React.StatelessComponent<{}> = () => ( + <ThemeContext.Consumer> + {(props: ContextInterface) => ( + <StyledSection background={props.colors.secondary}> + <Wrapper> + <Block> + <Alpha>The Issue</Alpha> + <MainCopy> + Every time an Ethereum transaction fails, it's extremely hard to trace down the + troublemaking line of code. The only hint you'll get is a generic error. + </MainCopy> + <Breakout> + <Code isLight={true}>Error: VM Exception while processing transaction: rever</Code> + </Breakout> + + <List> + <Item> + <Copy dark={true}> + <Gamma as="h3">No location</Gamma> + <p> + The error basically says "anything could have gone wrong here", which keeps you + completely in the dark about its exact location. + </p> + </Copy> + <Icon as={NoLocation} /> + </Item> + + <Item> + <Copy dark={true}> + <Gamma as="h3">Time-consuming</Gamma> + <p> + Working with a large code-base that contains hundreds of smart contracts, + finding the failing line of code quickly becomes a daunting task. + </p> + </Copy> + <Icon as={TimeConsuming} /> + </Item> + </List> + </Block> + + <Block background={props.colors.secondary}> + <Alpha>The Fix</Alpha> + <MainCopy> + Sol-trace will give you full stack traces, including contract names, line numbers and code + snippets, every time you encounter an error. + </MainCopy> + <Breakout> + <Code isLight={true} language="javascript"> + {`contracts/src/2.0.0/protocol/Exchange/MixinSignatureValidator.sol:51:8 require( isValidSignature( hash, @@ -75,42 +70,48 @@ function Trace(props: Props) { ), "INVALID_SIGNATURE" )`} - </Code> - </Breakout> - - <List> - <Item> - <Copy> - <Gamma as="h3">Exact location</Gamma> - <p> - It shows you the exact location of the specific code linen and where it was called - from. - </p> - </Copy> - <Icon as={ExactLocation} /> - </Item> - - <Item> - <Copy> - <Gamma as="h3">Time-saving</Gamma> - <p> - Turning "Your code failed somewhere, good luck debugging it" into "Your code failed - on line X of contract Y", it drastically improves the developer experience. - </p> - </Copy> - <Icon as={TimeSaving} /> - </Item> - </List> - </Block> - </Wrapper> - </StyledSection> - ); + </Code> + </Breakout> + + <List> + <Item> + <Copy> + <Gamma as="h3">Exact location</Gamma> + <p> + It shows you the exact location of the specific code linen and where it was + called from. + </p> + </Copy> + <Icon as={ExactLocation} /> + </Item> + + <Item> + <Copy> + <Gamma as="h3">Time-saving</Gamma> + <p> + Turning "Your code failed somewhere, good luck debugging it" into "Your code + failed on line X of contract Y", it drastically improves the developer + experience. + </p> + </Copy> + <Icon as={TimeSaving} /> + </Item> + </List> + </Block> + </Wrapper> + </StyledSection> + )} + </ThemeContext.Consumer> +); + +interface TraceProps { + background?: string; } const StyledSection = styled.section < - TraceProps > - ` + TraceProps > + ` max-width: 90rem; margin: 0 auto; background: linear-gradient(to right, ${colors.black} 50%, ${props => props.background} 50%); @@ -139,8 +140,8 @@ const Wrapper = styled(Container)` const Block = styled.div < - TraceProps > - ` + TraceProps > + ` width: 50%; background: ${props => (props.background ? props.background : colors.black)}; color: ${props => (props.background ? 'inherit' : colors.white)}; @@ -199,9 +200,14 @@ const Item = styled.li` } `; -const Copy = styled.div<{ dark?: boolean; }>` +const Copy = + styled.div < + { dark: boolean } > + ` margin-right: 5.875rem; - ${props => props.dark && ` + ${props => + props.dark && + ` p { color: #ccc; } @@ -214,4 +220,4 @@ const Icon = styled.div` flex-shrink: 0; `; -export default withContext(Trace); +export { Trace }; diff --git a/packages/dev-tools-pages/ts/components/Typography.tsx b/packages/dev-tools-pages/ts/components/Typography.tsx index b3ed1b95c..e4b13163a 100644 --- a/packages/dev-tools-pages/ts/components/Typography.tsx +++ b/packages/dev-tools-pages/ts/components/Typography.tsx @@ -1,4 +1,5 @@ import styled from 'styled-components'; + import { media } from '../variables'; const Alpha = styled.h2` diff --git a/packages/dev-tools-pages/ts/components/withContext.tsx b/packages/dev-tools-pages/ts/components/withContext.tsx deleted file mode 100644 index d38c0afe4..000000000 --- a/packages/dev-tools-pages/ts/components/withContext.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from 'react'; - -import ThemeContext from '../context'; - -interface Props { - title?: string; - name?: string; - subtitle?: string; - tagline?: string; - icon?: React.ReactNode; - colors?: any; -} - -function withContext(WrappedComponent: any) { - function ComponentWithContext(props: any) { - return <ThemeContext.Consumer>{data => <WrappedComponent {...data} {...props} />}</ThemeContext.Consumer>; - } - - return ComponentWithContext; -} - -export default withContext; -export { withContext, Props }; |