diff options
author | August Skare <post@augustskare.no> | 2018-10-18 19:28:44 +0800 |
---|---|---|
committer | August Skare <post@augustskare.no> | 2018-10-18 19:28:44 +0800 |
commit | b158a6d7226fb50ecedcc07da8ef30e5e5690e46 (patch) | |
tree | 3cab0f55e7f8961be4f6ecc49f5a3f503cd21bc9 /packages/dev-tools-pages/ts | |
parent | c616b53c9c95edcc9da34aaaee3b91f5f1787636 (diff) | |
download | dexon-sol-tools-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar dexon-sol-tools-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar.gz dexon-sol-tools-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar.bz2 dexon-sol-tools-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar.lz dexon-sol-tools-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar.xz dexon-sol-tools-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar.zst dexon-sol-tools-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.zip |
initial commit
Diffstat (limited to 'packages/dev-tools-pages/ts')
38 files changed, 1033 insertions, 283 deletions
diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx new file mode 100644 index 000000000..e676961c8 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/Button.tsx @@ -0,0 +1,26 @@ +import styled from 'styled-components'; + +import { withContext, Props } from './withContext'; + +interface ButtonProps extends Props { + large?: boolean; +} + +const Button = + styled.button < + ButtonProps > + ` + font-family: inherit; + font-size: ${props => (props.large ? '1.125rem' : '.875rem')}; + font-weight: 500; + white-space: nowrap; + vertical-align: middle; + background-color: ${props => props.colors.secondary}; + color: #000; + border: 0; + border-radius: 5rem; + padding: ${props => (props.large ? '1.125rem 2.375rem' : '.5625rem 1.25rem')}; + display: inline-block; +`; + +export default withContext(Button); diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx new file mode 100644 index 000000000..42d4234f1 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/Code.tsx @@ -0,0 +1,114 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import BaseButton from './Button'; + +interface CodeProps { + children: React.ReactNode; + language?: string; +} + +interface CodeState { + hlCode?: string; + copied?: boolean; +} + +const Button = styled(BaseButton)` + opacity: 0; + position: absolute; + top: 1rem; + right: 1rem; + transition: opacity 0.2s; +`; + +const Base = + styled.div < + CodeProps > + ` + color: ${props => (props.language === undefined ? '#FFF' : 'inherit')}; + background-color: ${props => (props.language === undefined ? '#000' : '#F1F4F5')}; + white-space: ${props => (props.language === undefined ? 'nowrap' : '')}; + position: relative; + &:hover ${Button} { + opacity: 1; + } +`; + +const StyledCode = styled.code` + padding: 1.5rem; + display: block; + overflow-y: scroll; + -webkit-overflow-scrolling: touch; +`; + +const StyledPre = styled.pre` + margin: 0; +`; + +const StyledCopyInput = styled.textarea` + height: 0; + position: absolute; + top: 0; + right: 0; + z-index: -1; +`; + +const CopyInput = StyledCopyInput as any; + +class Code extends React.Component<CodeProps, CodeState> { + code = React.createRef<HTMLTextAreaElement>(); + + state: CodeState = {}; + + constructor(props: CodeProps) { + super(props); + } + + async componentDidMount() { + const { language, children } = this.props; + + if (language !== undefined) { + const { highlight } = await import(/* webpackChunkName: 'highlight.js' */ 'highlight.js'); + const { value: hlCode } = highlight(language, children as string); + this.setState({ hlCode }); + } + } + + handleCopy = async () => { + try { + if ('clipboard' in navigator) { + await (navigator as any).clipboard.writeText(this.props.children); + this.setState({ copied: true }); + } else { + this.code.current.focus(); + this.code.current.select(); + document.execCommand('copy'); + this.setState({ copied: true }); + } + } catch (error) { + this.setState({ copied: false }); + } + }; + + render() { + const { language, children } = this.props; + + return ( + <Base language={language}> + <StyledPre> + {this.state.hlCode !== undefined ? ( + <StyledCode dangerouslySetInnerHTML={{ __html: this.state.hlCode }} /> + ) : ( + <StyledCode>{this.props.children}</StyledCode> + )} + </StyledPre> + <Button onClick={this.handleCopy}>Copy</Button> + {!('clipboard' in navigator) ? ( + <CopyInput readOnly aria-hidden="true" ref={this.code} value={children} /> + ) : null} + </Base> + ); + } +} + +export default Code; diff --git a/packages/dev-tools-pages/ts/components/Container.tsx b/packages/dev-tools-pages/ts/components/Container.tsx new file mode 100644 index 000000000..d6df7a0b4 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/Container.tsx @@ -0,0 +1,9 @@ +import styled from 'styled-components'; + +const Container = styled.div` + max-width: 77.5rem; + width: calc(100% - 3.75rem); + margin: 0 auto; +`; + +export default Container; diff --git a/packages/dev-tools-pages/ts/components/ContentBlock.tsx b/packages/dev-tools-pages/ts/components/ContentBlock.tsx new file mode 100644 index 000000000..56d52a150 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/ContentBlock.tsx @@ -0,0 +1,47 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { Beta } from './Typography'; + +const Base = styled.div` + display: flex; + align-items: flex-start; + justify-content: space-between; + &:not(:last-of-type) { + margin-bottom: 6.25rem; + } +`; + +const Content = styled.div` + width: 66.693548387%; +`; + +const Item = styled.div` + p { + max-width: 31.25rem; + } + + &:not(:last-of-type) { + margin-bottom: 2.5rem; + } +`; + +interface ContentBlockProps { + title: string; + children: React.ReactNode; +} + +function ContentBlock(props: ContentBlockProps) { + const children = React.Children.map(props.children, child => { + return <Item>{child}</Item>; + }); + + return ( + <Base> + <Beta>{props.title}</Beta> + <Content>{children}</Content> + </Base> + ); +} + +export default ContentBlock; diff --git a/packages/dev-tools-pages/ts/components/Footer.tsx b/packages/dev-tools-pages/ts/components/Footer.tsx new file mode 100644 index 000000000..82b2de1a3 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/Footer.tsx @@ -0,0 +1,91 @@ +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 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'; + +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 as="li" key={title}> + <Icon as={icon} /> + <div> + <Beta>{title}</Beta> + <p>{subtitle}</p> + </div> + </ListItem> + ))} + </List> + </Top> + <Media as="aside"> + <Icon as={MainIcon} /> + <Small> + Built by 0x. 0x is an open, permissionless protocol allowing for ERC20 tokens to be traded on + the Ethereum blockchain. + </Small> + </Media> + </Container> + </StyledFooter> + ); +} + +const StyledFooter = styled.footer` + background-color: ${(props: { background: string }) => props.background}; + padding-top: 6.25rem; + padding-bottom: 5.4375rem; +`; + +const Top = styled.div` + display: flex; + justify-content: space-between; + margin-bottom: 9.375rem; +`; + +const Media = styled.div` + display: flex; + align-items: center; +`; + +const Icon = styled.div` + margin-right: 1.3125rem; +`; + +const List = styled.ul` + display: flex; + width: 66.693548387%; + flex-wrap: wrap; + flex-direction: row; + margin: 0; + padding: 0; +`; + +const ListItem = styled(Media)` + flex-basis: 50%; + margin-bottom: 3.3125rem; + :nth-last-of-type(-n + 2) { + margin-bottom: 0; + } +`; + +const Small = styled.small` + font-size: 1em; + max-width: 37.5rem; +`; + +export default withContext(Footer); diff --git a/packages/dev-tools-pages/ts/components/Header.tsx b/packages/dev-tools-pages/ts/components/Header.tsx new file mode 100644 index 000000000..46dce01eb --- /dev/null +++ b/packages/dev-tools-pages/ts/components/Header.tsx @@ -0,0 +1,59 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { withContext, Props } from './withContext'; +import Container from './Container'; +import { Small } from './Typography'; + +function Header(props: Props) { + const { icon, title, colors } = props; + + return ( + <Container> + <StyledHeader> + <LogoMark> + <Logo as={icon} color={colors.main} /> + <Title>{title}</Title> + </LogoMark> + + <Link as="a" href="#"> + Built by 0x + </Link> + </StyledHeader> + </Container> + ); +} + +const StyledHeader = styled.header` + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 3.75rem; + padding-bottom: 0.875rem; +`; + +const LogoMark = styled.div` + display: flex; + align-items: center; +`; + +const StyledLogo = styled.div` + color: ${props => props.color} + width: 1.75rem; + height: 1.75rem; +`; + +const Title = styled.h1` + font-size: 1.5rem; + margin: 0; + margin-left: 0.8125rem; +`; + +const StyledLink = styled(Small)` + color: inherit; +`; + +const Link = StyledLink as any; +const Logo = StyledLogo as any; + +export default withContext(Header); diff --git a/packages/dev-tools-pages/ts/components/Hero.tsx b/packages/dev-tools-pages/ts/components/Hero.tsx new file mode 100644 index 000000000..60f859a55 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/Hero.tsx @@ -0,0 +1,37 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { withContext, Props } from './withContext'; +import Button from './Button'; +import { Beta } from './Typography'; + +function Hero(props: Props) { + const { subtitle, tagline } = props; + return ( + <StyledHero> + <Subtitle>{subtitle}</Subtitle> + <Tagline as="p">{tagline}</Tagline> + <Button as="a" href="#" large> + Read the Docs + </Button> + </StyledHero> + ); +} + +const StyledHero = styled.section` + margin: 0 auto; + text-align: center; + max-width: 590px; +`; + +const Subtitle = styled.h2` + font-size: 3.75rem; + line-height: 1.16; + margin-bottom: 1.5rem; +`; + +const Tagline = styled(Beta)` + margin-bottom: 2rem; +`; + +export default withContext(Hero); diff --git a/packages/dev-tools-pages/ts/components/InlineCode.tsx b/packages/dev-tools-pages/ts/components/InlineCode.tsx new file mode 100644 index 000000000..037cfa675 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/InlineCode.tsx @@ -0,0 +1,8 @@ +import styled from 'styled-components'; + +const InlineCode = styled.code` + background-color: #eceff9; + padding: 0.1875rem; +`; + +export default InlineCode; diff --git a/packages/dev-tools-pages/ts/components/List.tsx b/packages/dev-tools-pages/ts/components/List.tsx new file mode 100644 index 000000000..df1fdc53b --- /dev/null +++ b/packages/dev-tools-pages/ts/components/List.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +const StyledList = styled.ul` + list-style-type: none; + margin: 0; + padding-inline-start: 0.2rem; +`; + +const StyledItem = styled.li` + :before { + content: ''; + border: 1px solid black; + width: 0.6875rem; + height: 0.6875rem; + display: inline-block; + transform: rotate(45deg); + margin-right: 1.09375rem; + } +`; + +interface ListProps { + items: Array<string>; +} + +function List(props: ListProps) { + const items = props.items; + const listItems = items.map((bullet, index) => <StyledItem key={index}>{bullet}</StyledItem>); + + return <StyledList>{listItems}</StyledList>; +} + +export default List; diff --git a/packages/dev-tools-pages/ts/components/Main.tsx b/packages/dev-tools-pages/ts/components/Main.tsx new file mode 100644 index 000000000..8046abc91 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/Main.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { withContext, Props } from './withContext'; + +import { Alpha } from './Typography'; + +const StyledMain = styled.div` + padding-top: 6.25rem; + padding-bottom: 6.25rem; +`; + +const Title = styled(Alpha)` + color: ${props => props.color}; + margin-bottom: 6.25rem; +`; + +interface MainProps extends Props { + children: React.ReactNode; +} + +function Main(props: MainProps) { + return ( + <StyledMain> + <Title as="h2" color={props.colors.main}> + Get started + </Title> + {props.children} + </StyledMain> + ); +} + +export default withContext(Main); diff --git a/packages/dev-tools-pages/ts/components/MetaTags.tsx b/packages/dev-tools-pages/ts/components/MetaTags.tsx new file mode 100644 index 000000000..9bb33f7ab --- /dev/null +++ b/packages/dev-tools-pages/ts/components/MetaTags.tsx @@ -0,0 +1,28 @@ +import * as React from 'react'; +import { Helmet } from 'react-helmet'; + +import { withContext, Props } from './withContext'; + +interface MetaTagsProps extends Props { + imgSrc?: string; +} + +function MetaTags(props: MetaTagsProps) { + const { title, imgSrc = '/images/og_image.png' } = props; + const description = props.tagline; + return ( + <Helmet> + <title>{props.title}</title> + <meta name="description" content={description} /> + <link rel="shortcut icon" href={`/favicons/${props.name}.ico`} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="og:type" content="website" /> + <meta property="og:image" content={imgSrc} /> + <meta name="twitter:site" content="@0xproject" /> + <meta name="twitter:image" content={imgSrc} /> + </Helmet> + ); +} + +export default withContext(MetaTags); diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx new file mode 100644 index 000000000..1efbe1f61 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/Tabs.tsx @@ -0,0 +1,79 @@ +import * as React from 'react'; +import styled from 'styled-components'; +import { Tabs as ReactTabs, Tab, TabList, TabPanel } from 'react-tabs' + +import {withContext, Props} from './withContext'; + +const StyledTabList = styled(TabList)` + text-transform: uppercase; + list-style: none; + margin: 0; + padding: 0; + overflow: hidden; +`; + +const StyledTab = styled(Tab)` + height: 2.5rem; + padding-left: 1rem; + padding-right: 1rem; + display: flex; + justify-content: space-around; + align-items: center; + float: left; + &:not(:first-of-type) { + margin-left: .25rem; + } + &:focus, &:hover { + color: red; + outline: 0; + } +`; + +const Root = styled.div<{primaryColor: string;}>` + ${StyledTab} { + background-color: ${props => props.primaryColor}; + } + ${StyledTab}[aria-selected="true"] { + background-color: #F1F2F7; + } +`; + +interface TabsProps extends Props { + children: React.ReactNode; +} + +function Tabs(props: TabsProps) { + return ( + <Root primaryColor={props.colors.secondary}> + <ReactTabs> + <StyledTabList> + { React.Children.map(props.children, child => { + const {props} = React.cloneElement(child as React.ReactElement<any>); + return <StyledTab>{props.title}</StyledTab> + }) } + </StyledTabList> + + { React.Children.map(props.children, child => ( + <TabPanel>{child}</TabPanel> + )) } + </ReactTabs> + </Root> + ) +} + +interface TabBlockProps { + title: string; + children: React.ReactNode; +} + +function TabBlock(props: TabBlockProps) { + return ( + <React.Fragment> + {props.children} + </React.Fragment> + ) +} + +const ContextTabs = withContext(Tabs); + +export {ContextTabs as Tabs, TabBlock};
\ No newline at end of file diff --git a/packages/dev-tools-pages/ts/components/Typography.tsx b/packages/dev-tools-pages/ts/components/Typography.tsx new file mode 100644 index 000000000..3ce18df3b --- /dev/null +++ b/packages/dev-tools-pages/ts/components/Typography.tsx @@ -0,0 +1,17 @@ +import styled from 'styled-components'; + +const Alpha = styled.h2` + font-size: 1.75rem; + line-height: 1; +`; + +const Beta = styled.h3` + font-size: 1.25rem; + line-height: 1.65; +`; + +const Small = styled.p` + font-size: 0.875rem; +`; + +export { Alpha, Beta, Small }; diff --git a/packages/dev-tools-pages/ts/components/meta_tags.tsx b/packages/dev-tools-pages/ts/components/meta_tags.tsx deleted file mode 100644 index f6c43d23f..000000000 --- a/packages/dev-tools-pages/ts/components/meta_tags.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import * as React from 'react'; -import { Helmet } from 'react-helmet'; - -export interface MetaTagsProps { - title: string; - description: string; - imgSrc?: string; -} - -export const MetaTags: React.StatelessComponent<MetaTagsProps> = ({ title, description, imgSrc }) => ( - <Helmet> - <title>{title}</title> - <meta name="description" content={description} /> - <meta property="og:title" content={title} /> - <meta property="og:description" content={description} /> - <meta property="og:type" content="website" /> - <meta property="og:image" content={imgSrc} /> - <meta name="twitter:site" content="@0xproject" /> - <meta name="twitter:image" content={imgSrc} /> - </Helmet> -); - -MetaTags.defaultProps = { - imgSrc: '/images/og_image.png', -}; diff --git a/packages/dev-tools-pages/ts/components/ui/button.tsx b/packages/dev-tools-pages/ts/components/ui/button.tsx deleted file mode 100644 index 754eca40e..000000000 --- a/packages/dev-tools-pages/ts/components/ui/button.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { darken, saturate } from 'polished'; -import * as React from 'react'; -import styled from 'styled-components'; - -/** - * AN EXAMPLE OF HOW TO CREATE A STYLED COMPONENT USING STYLED-COMPONENTS - * SEE: https://www.styled-components.com/docs/basics#coming-from-css - */ -export interface ButtonProps { - backgroundColor?: string; - borderColor?: string; - width?: string; - padding?: string; - type?: string; - isDisabled?: boolean; - onClick?: (event: React.MouseEvent<HTMLElement>) => void; - className?: string; -} - -const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => ( - <button type={type} className={className} onClick={isDisabled ? undefined : onClick} disabled={isDisabled}> - {children} - </button> -); - -const darkenOnHoverAmount = 0.1; -const darkenOnActiveAmount = 0.2; -const saturateOnFocusAmount = 0.2; -export const Button = styled(PlainButton)` - cursor: ${props => (props.isDisabled ? 'default' : 'pointer')}; - transition: background-color, opacity 0.5s ease; - padding: ${props => props.padding}; - border-radius: 3px; - outline: none; - width: ${props => props.width}; - background-color: ${props => (props.backgroundColor ? props.backgroundColor : 'none')}; - border: ${props => (props.borderColor ? `1px solid ${props.backgroundColor}` : 'none')}; - &:hover { - background-color: ${props => - !props.isDisabled ? darken(darkenOnHoverAmount, props.backgroundColor) : ''} !important; - } - &:active { - background-color: ${props => (!props.isDisabled ? darken(darkenOnActiveAmount, props.backgroundColor) : '')}; - } - &:disabled { - opacity: 0.5; - } - &:focus { - background-color: ${props => saturate(saturateOnFocusAmount, props.backgroundColor)}; - } -`; - -Button.defaultProps = { - backgroundColor: 'red', - width: 'auto', - isDisabled: false, - padding: '1em 2.2em', -}; -Button.displayName = 'Button'; diff --git a/packages/dev-tools-pages/ts/components/ui/container.tsx b/packages/dev-tools-pages/ts/components/ui/container.tsx deleted file mode 100644 index f2ae68b70..000000000 --- a/packages/dev-tools-pages/ts/components/ui/container.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import * as React from 'react'; - -type StringOrNum = string | number; - -export type ContainerTag = 'div' | 'span'; - -export interface ContainerProps { - marginTop?: StringOrNum; - marginBottom?: StringOrNum; - marginRight?: StringOrNum; - marginLeft?: StringOrNum; - padding?: StringOrNum; - paddingTop?: StringOrNum; - paddingBottom?: StringOrNum; - paddingRight?: StringOrNum; - paddingLeft?: StringOrNum; - backgroundColor?: string; - borderRadius?: StringOrNum; - maxWidth?: StringOrNum; - maxHeight?: StringOrNum; - width?: StringOrNum; - height?: StringOrNum; - minWidth?: StringOrNum; - minHeight?: StringOrNum; - isHidden?: boolean; - className?: string; - position?: 'absolute' | 'fixed' | 'relative' | 'unset'; - display?: 'inline-block' | 'block' | 'inline-flex' | 'inline'; - top?: string; - left?: string; - right?: string; - bottom?: string; - zIndex?: number; - Tag?: ContainerTag; - cursor?: string; - id?: string; - onClick?: (event: React.MouseEvent<HTMLElement>) => void; - overflowX?: 'scroll' | 'hidden' | 'auto' | 'visible'; -} - -export const Container: React.StatelessComponent<ContainerProps> = props => { - const { children, className, Tag, isHidden, id, onClick, ...style } = props; - const visibility = isHidden ? 'hidden' : undefined; - return ( - <Tag id={id} style={{ ...style, visibility }} className={className} onClick={onClick}> - {children} - </Tag> - ); -}; - -Container.defaultProps = { - Tag: 'div', -}; - -Container.displayName = 'Container'; diff --git a/packages/dev-tools-pages/ts/components/ui/text.tsx b/packages/dev-tools-pages/ts/components/ui/text.tsx deleted file mode 100644 index 8e314beae..000000000 --- a/packages/dev-tools-pages/ts/components/ui/text.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { colors } from '@0xproject/react-shared'; -import { darken } from 'polished'; -import * as React from 'react'; -import styled from 'styled-components'; - -export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'i'; - -export interface TextProps { - className?: string; - Tag?: TextTag; - fontSize?: string; - fontFamily?: string; - fontStyle?: string; - fontColor?: string; - lineHeight?: string; - minHeight?: string; - center?: boolean; - fontWeight?: number | string; - textDecorationLine?: string; - onClick?: (event: React.MouseEvent<HTMLElement>) => void; - hoverColor?: string; - noWrap?: boolean; - display?: string; -} - -const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick, Tag }) => ( - <Tag className={className} onClick={onClick}> - {children} - </Tag> -); - -export const Text = styled(PlainText)` - font-family: ${props => props.fontFamily}; - font-style: ${props => props.fontStyle}; - font-weight: ${props => props.fontWeight}; - font-size: ${props => props.fontSize}; - text-decoration-line: ${props => props.textDecorationLine}; - ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')}; - ${props => (props.center ? 'text-align: center' : '')}; - color: ${props => props.fontColor}; - ${props => (props.minHeight ? `min-height: ${props.minHeight}` : '')}; - ${props => (props.onClick ? 'cursor: pointer' : '')}; - transition: color 0.5s ease; - ${props => (props.noWrap ? 'white-space: nowrap' : '')}; - ${props => (props.display ? `display: ${props.display}` : '')}; - &:hover { - ${props => (props.onClick ? `color: ${props.hoverColor || darken(0.3, props.fontColor || 'black')}` : '')}; - } -`; - -Text.defaultProps = { - fontFamily: 'Roboto', - fontStyle: 'normal', - fontWeight: 400, - fontColor: colors.black, - fontSize: '15px', - lineHeight: '1.5em', - textDecorationLine: 'none', - Tag: 'div', - noWrap: false, -}; - -Text.displayName = 'Text'; - -export const Title: React.StatelessComponent<TextProps> = props => <Text {...props} />; - -Title.defaultProps = { - Tag: 'h2', - fontSize: '20px', - fontWeight: 600, - fontColor: colors.black, -}; - -Title.displayName = 'Title'; diff --git a/packages/dev-tools-pages/ts/components/withContext.tsx b/packages/dev-tools-pages/ts/components/withContext.tsx new file mode 100644 index 000000000..d38c0afe4 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/withContext.tsx @@ -0,0 +1,23 @@ +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 }; diff --git a/packages/dev-tools-pages/ts/context/compiler.tsx b/packages/dev-tools-pages/ts/context/compiler.tsx new file mode 100644 index 000000000..63a051481 --- /dev/null +++ b/packages/dev-tools-pages/ts/context/compiler.tsx @@ -0,0 +1,14 @@ +import Icon from 'ts/icons/logos/compiler.svg'; + +export default { + title: 'sol-compiler', + name: 'compiler', + subtitle: 'Solidity compilation that just works', + tagline: 'Seamlessly compile an entire solidity project and generate customisable artifacts', + icon: Icon, + colors: { + main: '#1EADCD', + secondary: '#D1F4FC', + link: '#D1F4FC', + }, +}; diff --git a/packages/dev-tools-pages/ts/context/cov.tsx b/packages/dev-tools-pages/ts/context/cov.tsx new file mode 100644 index 000000000..4bf2b6ba7 --- /dev/null +++ b/packages/dev-tools-pages/ts/context/cov.tsx @@ -0,0 +1,14 @@ +import Icon from 'ts/icons/logos/cov.svg'; + +export default { + title: 'sol-cov', + name: 'cov', + subtitle: 'Solidity code coverage', + tagline: "Don't get caught with your pants down", + icon: Icon, + colors: { + main: '#BB9200', + secondary: '#F1DB8D', + link: '#D7AE1B', + }, +}; diff --git a/packages/dev-tools-pages/ts/context/index.tsx b/packages/dev-tools-pages/ts/context/index.tsx new file mode 100644 index 000000000..54556a3fd --- /dev/null +++ b/packages/dev-tools-pages/ts/context/index.tsx @@ -0,0 +1,5 @@ +import { createContext } from 'react'; + +const ThemeContext = createContext({}); + +export default ThemeContext; diff --git a/packages/dev-tools-pages/ts/context/profiler.tsx b/packages/dev-tools-pages/ts/context/profiler.tsx new file mode 100644 index 000000000..d8982c56f --- /dev/null +++ b/packages/dev-tools-pages/ts/context/profiler.tsx @@ -0,0 +1,14 @@ +import Icon from 'ts/icons/logos/profiler.svg'; + +export default { + title: 'sol-profiler', + name: 'profiler', + subtitle: 'Gas profiling for Solidity', + tagline: "Implement data-guided optimizations by profiling your contrat's gas usage", + icon: Icon, + colors: { + main: '#FF7144', + secondary: '#FED7CB', + link: '#EB8666', + }, +}; diff --git a/packages/dev-tools-pages/ts/context/trace.tsx b/packages/dev-tools-pages/ts/context/trace.tsx new file mode 100644 index 000000000..22289091d --- /dev/null +++ b/packages/dev-tools-pages/ts/context/trace.tsx @@ -0,0 +1,14 @@ +import Icon from 'ts/icons/logos/trace.svg'; + +export default { + title: 'sol-trace', + name: 'trace', + subtitle: 'Human-readable stack traces', + tagline: 'Immediately locate Solidity errors and rapidly debug failed transactions', + icon: Icon, + colors: { + main: '#5C80FF', + secondary: '#CDD8FF', + link: '#557AFF', + }, +}; diff --git a/packages/dev-tools-pages/ts/globalStyles.tsx b/packages/dev-tools-pages/ts/globalStyles.tsx new file mode 100644 index 000000000..1a2a1769a --- /dev/null +++ b/packages/dev-tools-pages/ts/globalStyles.tsx @@ -0,0 +1,76 @@ +import { createGlobalStyle } from 'styled-components'; +import styledNormalize from 'styled-normalize'; +import hljsStyles from 'highlight.js/styles/github-gist.css'; + +import { withContext } from 'ts/components/withContext'; + +const BaseStyles = createGlobalStyle` + ${styledNormalize} + ${hljsStyles} + + @font-face { + font-family: "Maison Neue"; + src: url("/fonts/MaisonNeue-Book-subset.woff") format("woff"); + font-weight: 300; + font-display: swap; + unicode-range: U+20-7E; + } + @font-face { + font-family: "Maison Neue"; + src: url("/fonts/MaisonNeue-Bold-subset.woff") format("woff"); + font-weight: 500; + font-display: swap; + unicode-range: U+20-7E; + } + @font-face { + font-family: "Maison Neue Mono"; + src: url("/fonts/MaisonNeue-Mono-subset.woff") format("woff"); + font-weight: 300; + font-display: optional; + unicode-range: U+20-7E; + } + + html { + font-size: 100%; + box-sizing: border-box; + } + + *, *::before, *::after { + box-sizing: inherit; + } + + body { + font-family: "Maison Neue", system-ui, sans-serif; + font-weight: 300; + font-size: 1rem; + line-height: 1.8; + } + + a { + color: ${(props: any) => props.colors.link}; + text-decoration: none; + + &:hover { + color: red; //what should this be? + } + } + + h1, h2, h3, h4 { + font-weight: 500; + margin: 0; + } + + p { + margin-top: 0; + margin-bottom: 1em; + &:not([class]):last-of-type { + margin-bottom: 0; + } + } + + code { + font-family: "Maison Neue Mono", monospace; + } +`; + +export default withContext(BaseStyles); diff --git a/packages/dev-tools-pages/ts/globals.d.ts b/packages/dev-tools-pages/ts/globals.d.ts index d0890161c..da026a198 100644 --- a/packages/dev-tools-pages/ts/globals.d.ts +++ b/packages/dev-tools-pages/ts/globals.d.ts @@ -7,3 +7,13 @@ declare module '*.json' { export default json; /* tslint:enable */ } + +declare module '*.css' { + const css: any; + export default css; +} + +declare module '*.svg' { + const svg: any; + export default svg; +} diff --git a/packages/dev-tools-pages/ts/icons/logos/0x.svg b/packages/dev-tools-pages/ts/icons/logos/0x.svg new file mode 100644 index 000000000..1856389db --- /dev/null +++ b/packages/dev-tools-pages/ts/icons/logos/0x.svg @@ -0,0 +1 @@ +<svg width="37" height="37" viewBox="0 0 37 37" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M9.20465 34.4904c2.38415 1.3926 5.13725 2.2736 8.08905 2.4725 4.0871.2558 7.9188-.8242 11.1261-2.8704 1.5894-1.0232 3.0085-2.2737 4.229-3.7231-.9934-1.3926-2.0719-2.842-3.2072-4.3199-.3123-.3979-.6245-.7958-.9367-1.1937-1.1921 1.9042-2.9518 3.4389-4.9953 4.4052l-3.1789-3.0978-11.12605 8.3272zM2.44955 9.30988C1.08718 11.6972.235696 14.3971.0370167 17.3244-.218428 21.417.860116 25.2821 2.90368 28.4652c1.02177 1.5916 2.27062 3.0126 3.71814 4.2347 1.39075-.9947 2.83827-2.0747 4.31418-3.2115.3974-.3127.7947-.6253 1.1921-.9379-1.9017-1.2221-3.43434-2.9841-4.39936-5.0304l3.12206-3.1831L2.44955 9.30988zM27.7954 2.51741C25.4112 1.12481 22.6581.243776 19.7063.0448336 15.6192-.23937 11.7591.840605 8.55184 2.91529 6.96241 3.93843 5.54327 5.18893 4.32281 6.63837c.9934 1.3926 2.07194 2.84204 3.20725 4.31993.31221.3979.62442.7957.93663 1.1936 1.22046-1.9041 2.95181-3.43884 5.02371-4.40514l2.9802 2.87044 11.3248-8.09979zM34.5788 27.6126c1.334-2.3589 2.1855-5.0304 2.3842-7.9293.2554-4.0925-.8231-7.9293-2.8667-11.14077-1.0218-1.59154-2.2706-3.01256-3.7181-4.23464-1.3908.99472-2.8383 2.07469-4.3142 3.21151-.3974.31262-.7947.62525-1.1921.93787 1.9301 1.22208 3.4627 2.98413 4.4277 5.03043l.0284.0568-3.0085 3.1263 8.2593 10.9418z"/></svg>
\ No newline at end of file diff --git a/packages/dev-tools-pages/ts/icons/logos/compiler.svg b/packages/dev-tools-pages/ts/icons/logos/compiler.svg new file mode 100644 index 000000000..43c338f29 --- /dev/null +++ b/packages/dev-tools-pages/ts/icons/logos/compiler.svg @@ -0,0 +1,3 @@ +<svg width="28" height="28" viewBox="0 0 28 28" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M0 28V15V0H15H28V15V28H15H0ZM26 13V2H15V13H26ZM15 15H26V26H15V15ZM13 13V2H2V13H13ZM2 15H13V26H2V15Z" /> +</svg> diff --git a/packages/dev-tools-pages/ts/icons/logos/cov.svg b/packages/dev-tools-pages/ts/icons/logos/cov.svg new file mode 100644 index 000000000..2c4dffb83 --- /dev/null +++ b/packages/dev-tools-pages/ts/icons/logos/cov.svg @@ -0,0 +1,3 @@ +<svg width="28" height="28" viewBox="0 0 28 28" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H28V28H0V0ZM2 2V26H26V16H12V2H2ZM14 2V14H26V2H14Z"/> +</svg> diff --git a/packages/dev-tools-pages/ts/icons/logos/profiler.svg b/packages/dev-tools-pages/ts/icons/logos/profiler.svg new file mode 100644 index 000000000..c3ea61294 --- /dev/null +++ b/packages/dev-tools-pages/ts/icons/logos/profiler.svg @@ -0,0 +1,3 @@ +<svg width="28" height="28" viewBox="0 0 28 28" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M2 2H26V9H2V2ZM2 11V26H26V11H2ZM0 0H2H26H28V2V26V28H26H2H0V26V2V0Z" /> +</svg> diff --git a/packages/dev-tools-pages/ts/icons/logos/trace.svg b/packages/dev-tools-pages/ts/icons/logos/trace.svg new file mode 100644 index 000000000..c207b24cb --- /dev/null +++ b/packages/dev-tools-pages/ts/icons/logos/trace.svg @@ -0,0 +1 @@ +<svg width="28" height="28" viewBox="0 0 28 28" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 15H2V2h24v13H10zm0 2H2v9h8v-9zm2 9h14v-9H12v9zm-2 2H0V0h28v28H10z"/></svg>
\ No newline at end of file diff --git a/packages/dev-tools-pages/ts/index.tsx b/packages/dev-tools-pages/ts/index.tsx index 4591c6d76..b185e270a 100644 --- a/packages/dev-tools-pages/ts/index.tsx +++ b/packages/dev-tools-pages/ts/index.tsx @@ -1,17 +1,37 @@ import * as React from 'react'; import { render } from 'react-dom'; -import { MetaTags } from 'ts/components/meta_tags'; -import { Landing } from 'ts/pages/landing'; +import { Router, Link } from '@reach/router'; -import 'basscss/css/basscss.css'; +import Trace from 'ts/pages/Trace'; +import Compiler from 'ts/pages/Compiler'; +import Cov from 'ts/pages/Cov'; +import Profiler from 'ts/pages/Profiler'; -const DOCUMENT_TITLE = ''; -const DOCUMENT_DESCRIPTION = ''; +const Index = (props: any) => ( + <ul> + <li> + <Link to="/trace">sol-trace</Link> + </li> + <li> + <Link to="/compiler">sol-compiler</Link> + </li> + <li> + <Link to="/cov">sol-cov</Link> + </li> + <li> + <Link to="/profiler">sol-profiler</Link> + </li> + </ul> +); -render( - <div> - <MetaTags title={DOCUMENT_TITLE} description={DOCUMENT_DESCRIPTION} /> - <Landing /> - </div>, - document.getElementById('app'), +const App = () => ( + <Router> + <Trace path="/trace" /> + <Compiler path="/compiler" /> + <Cov path="/cov" /> + <Profiler path="/profiler" /> + <Index default /> + </Router> ); + +render(<App />, document.getElementById('app')); diff --git a/packages/dev-tools-pages/ts/pages/Base.tsx b/packages/dev-tools-pages/ts/pages/Base.tsx new file mode 100644 index 000000000..7bb578611 --- /dev/null +++ b/packages/dev-tools-pages/ts/pages/Base.tsx @@ -0,0 +1,28 @@ +import * as React from 'react'; + +import ThemeContext from 'ts/context'; +import GlobalStyles from 'ts/globalStyles'; +import MetaTags from 'ts/components/MetaTags'; +import Header from 'ts/components/Header'; +import Hero from 'ts/components/Hero'; +import Footer from 'ts/components/Footer'; + +interface BaseProps { + context: any; + children: React.ReactNode; +} + +function Base(props: BaseProps) { + return ( + <ThemeContext.Provider value={props.context}> + <MetaTags /> + <GlobalStyles /> + <Header /> + <Hero /> + {props.children} + <Footer /> + </ThemeContext.Provider> + ); +} + +export default Base; diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx new file mode 100644 index 000000000..2a91c465f --- /dev/null +++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx @@ -0,0 +1,53 @@ +import * as React from 'react'; + +import context from 'ts/context/compiler'; +import Base from './Base'; +import Container from 'ts/components/Container'; +import Main from 'ts/components/Main'; +import ContentBlock from 'ts/components/ContentBlock'; +import { Tabs, TabBlock } from 'ts/components/Tabs'; +import Code from 'ts/components/Code'; +import InlineCode from 'ts/components/InlineCode'; +import List from 'ts/components/List'; + +function Compiler(props: any) { + return ( + <Base context={context}> + <Container> + <Main> + <ContentBlock title="Required steps"> + <List items={['Step 1', 'Step 2']} /> + </ContentBlock> + <ContentBlock title="Prerequisites"> + <Code>npm install @0x/sol-trace --save</Code> + <p> + Sol-trace is a subprovider that needs to be prepended to your{' '} + <a href="#">provider engine</a>. Depending on your project setup, you will need to use a + specific ArtifactAdapter. Sol-trace ships with the{' '} + <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '} + <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can + also write your own and support any artifact format. + </p> + </ContentBlock> + + <ContentBlock title="Installation"> + <Tabs> + <TabBlock title="Sol-compiler"> + <Code language="js"> + {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace'; + +// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in +const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`} + </Code> + </TabBlock> + <TabBlock title="Truffle">Truffle</TabBlock> + <TabBlock title="Custom">Custom</TabBlock> + </Tabs> + </ContentBlock> + </Main> + </Container> + </Base> + ); +} + +export default Compiler; diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx new file mode 100644 index 000000000..a0acfb869 --- /dev/null +++ b/packages/dev-tools-pages/ts/pages/Cov.tsx @@ -0,0 +1,53 @@ +import * as React from 'react'; + +import context from 'ts/context/cov'; +import Base from './Base'; +import Container from 'ts/components/Container'; +import Main from 'ts/components/Main'; +import ContentBlock from 'ts/components/ContentBlock'; +import { Tabs, TabBlock } from 'ts/components/Tabs'; +import Code from 'ts/components/Code'; +import InlineCode from 'ts/components/InlineCode'; +import List from 'ts/components/List'; + +function Cov(props: any) { + return ( + <Base context={context}> + <Container> + <Main> + <ContentBlock title="Required steps"> + <List items={['Step 1', 'Step 2']} /> + </ContentBlock> + <ContentBlock title="Prerequisites"> + <Code>npm install @0x/sol-trace --save</Code> + <p> + Sol-trace is a subprovider that needs to be prepended to your{' '} + <a href="#">provider engine</a>. Depending on your project setup, you will need to use a + specific ArtifactAdapter. Sol-trace ships with the{' '} + <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '} + <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can + also write your own and support any artifact format. + </p> + </ContentBlock> + + <ContentBlock title="Installation"> + <Tabs> + <TabBlock title="Sol-compiler"> + <Code language="js"> + {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace'; + +// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in +const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`} + </Code> + </TabBlock> + <TabBlock title="Truffle">Truffle</TabBlock> + <TabBlock title="Custom">Custom</TabBlock> + </Tabs> + </ContentBlock> + </Main> + </Container> + </Base> + ); +} + +export default Cov; diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx new file mode 100644 index 000000000..ad2219c5e --- /dev/null +++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx @@ -0,0 +1,53 @@ +import * as React from 'react'; + +import context from 'ts/context/profiler'; +import Base from './Base'; +import Container from 'ts/components/Container'; +import Main from 'ts/components/Main'; +import ContentBlock from 'ts/components/ContentBlock'; +import { Tabs, TabBlock } from 'ts/components/Tabs'; +import Code from 'ts/components/Code'; +import InlineCode from 'ts/components/InlineCode'; +import List from 'ts/components/List'; + +function Profiler(props: any) { + return ( + <Base context={context}> + <Container> + <Main> + <ContentBlock title="Required steps"> + <List items={['Step 1', 'Step 2']} /> + </ContentBlock> + <ContentBlock title="Prerequisites"> + <Code>npm install @0x/sol-trace --save</Code> + <p> + Sol-trace is a subprovider that needs to be prepended to your{' '} + <a href="#">provider engine</a>. Depending on your project setup, you will need to use a + specific ArtifactAdapter. Sol-trace ships with the{' '} + <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '} + <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can + also write your own and support any artifact format. + </p> + </ContentBlock> + + <ContentBlock title="Installation"> + <Tabs> + <TabBlock title="Sol-compiler"> + <Code language="js"> + {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace'; + +// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in +const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`} + </Code> + </TabBlock> + <TabBlock title="Truffle">Truffle</TabBlock> + <TabBlock title="Custom">Custom</TabBlock> + </Tabs> + </ContentBlock> + </Main> + </Container> + </Base> + ); +} + +export default Profiler; diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx new file mode 100644 index 000000000..797ec6f49 --- /dev/null +++ b/packages/dev-tools-pages/ts/pages/Trace.tsx @@ -0,0 +1,53 @@ +import * as React from 'react'; + +import context from 'ts/context/trace'; +import Base from './Base'; +import Container from 'ts/components/Container'; +import Main from 'ts/components/Main'; +import ContentBlock from 'ts/components/ContentBlock'; +import { Tabs, TabBlock } from 'ts/components/Tabs'; +import Code from 'ts/components/Code'; +import InlineCode from 'ts/components/InlineCode'; +import List from 'ts/components/List'; + +function Trace(props: any) { + return ( + <Base context={context}> + <Container> + <Main> + <ContentBlock title="Required steps"> + <List items={['Step 1', 'Step 2']} /> + </ContentBlock> + <ContentBlock title="Prerequisites"> + <Code>npm install @0x/sol-trace --save</Code> + <p> + Sol-trace is a subprovider that needs to be prepended to your{' '} + <a href="#">provider engine</a>. Depending on your project setup, you will need to use a + specific ArtifactAdapter. Sol-trace ships with the{' '} + <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '} + <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can + also write your own and support any artifact format. + </p> + </ContentBlock> + + <ContentBlock title="Installation"> + <Tabs> + <TabBlock title="Sol-compiler"> + <Code language="js"> + {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace'; + +// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in +const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`} + </Code> + </TabBlock> + <TabBlock title="Truffle">Truffle</TabBlock> + <TabBlock title="Custom">Custom</TabBlock> + </Tabs> + </ContentBlock> + </Main> + </Container> + </Base> + ); +} + +export default Trace; diff --git a/packages/dev-tools-pages/ts/pages/landing.tsx b/packages/dev-tools-pages/ts/pages/landing.tsx deleted file mode 100644 index a70a9de46..000000000 --- a/packages/dev-tools-pages/ts/pages/landing.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; - -import { Button } from '../components/ui/button'; -import { Container } from '../components/ui/container'; -import { Text } from '../components/ui/text'; - -interface LandingProps {} - -interface LandingState {} - -export class Landing extends React.Component<LandingProps, LandingState> { - constructor(props: LandingProps) { - super(props); - } - public render(): React.ReactNode { - return ( - <Container id="landing" className="clearfix"> - <Container className="mx-auto p4" width="200px"> - <Button> - <Text fontColor="white">Click me!</Text> - </Button> - </Container> - </Container> - ); - } -} diff --git a/packages/dev-tools-pages/ts/utils/utils.ts b/packages/dev-tools-pages/ts/utils/utils.ts deleted file mode 100644 index b274706a2..000000000 --- a/packages/dev-tools-pages/ts/utils/utils.ts +++ /dev/null @@ -1,32 +0,0 @@ -import * as bowser from 'bowser'; -import * as _ from 'lodash'; - -export const utils = { - getColSize(items: number): number { - const bassCssGridSize = 12; // Source: http://basscss.com/#basscss-grid - const colSize = bassCssGridSize / items; - if (!_.isInteger(colSize)) { - throw new Error(`Number of cols must be divisible by ${bassCssGridSize}`); - } - return colSize; - }, - getCurrentBaseUrl(): string { - const port = window.location.port; - const hasPort = !_.isUndefined(port); - const baseUrl = `https://${window.location.hostname}${hasPort ? `:${port}` : ''}`; - return baseUrl; - }, - onPageLoadPromise: new Promise<void>((resolve, _reject) => { - if (document.readyState === 'complete') { - resolve(); - return; - } - window.onload = () => resolve(); - }), - openUrl(url: string): void { - window.open(url, '_blank'); - }, - isMobileOperatingSystem(): boolean { - return bowser.mobile; - }, -}; |