0x Instant Dev Environment

From a8b01fedb1cbe61daf20dc6e0b62ccd7b1bc9b92 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 4 Oct 2018 14:59:07 -0700 Subject: Improve utilities and try to use them in simple form component --- packages/instant/public/index.html | 6 ++++ packages/instant/src/components/ui/container.tsx | 10 +++++- packages/instant/src/components/ui/flex.tsx | 10 +++--- packages/instant/src/components/ui/index.ts | 4 +++ packages/instant/src/components/ui/text.tsx | 35 +++++++++++--------- .../instant/src/components/zero_ex_instant.tsx | 4 ++- .../src/components/zero_ex_instant_container.tsx | 38 ++++++++++++++++++++++ packages/instant/tslint.json | 5 ++- 8 files changed, 89 insertions(+), 23 deletions(-) create mode 100644 packages/instant/src/components/ui/index.ts create mode 100644 packages/instant/src/components/zero_ex_instant_container.tsx diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html index 45968a3c9..d673dafd8 100644 --- a/packages/instant/public/index.html +++ b/packages/instant/public/index.html @@ -6,6 +6,12 @@ 0x Instant Dev Environment + diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx index f928ed25b..8366d5748 100644 --- a/packages/instant/src/components/ui/container.tsx +++ b/packages/instant/src/components/ui/container.tsx @@ -10,13 +10,16 @@ export interface ContainerProps { right?: string; bottom?: string; left?: string; + width?: string; maxWidth?: string; - margin: string; + margin?: string; marginTop?: string; marginRight?: string; marginBottom?: string; marginLeft?: string; padding?: string; + boxShadow?: string; + borderRadius?: string; className?: string; backgroundColor?: ColorOption; } @@ -32,6 +35,7 @@ export const Container = styled(PlainContainer)` ${props => cssRuleIfExists(props, 'right')} ${props => cssRuleIfExists(props, 'bottom')} ${props => cssRuleIfExists(props, 'left')} + ${props => cssRuleIfExists(props, 'width')} ${props => cssRuleIfExists(props, 'max-width')} ${props => cssRuleIfExists(props, 'margin')} ${props => cssRuleIfExists(props, 'margin-top')} @@ -39,9 +43,13 @@ export const Container = styled(PlainContainer)` ${props => cssRuleIfExists(props, 'margin-bottom')} ${props => cssRuleIfExists(props, 'margin-left')} ${props => cssRuleIfExists(props, 'padding')} + ${props => cssRuleIfExists(props, 'box-shadow')} + ${props => cssRuleIfExists(props, 'border-radius')} background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; `; Container.defaultProps = { display: 'inline-block', }; + +Container.displayName = 'Container'; diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx index 544d9fe23..f55f5f8ba 100644 --- a/packages/instant/src/components/ui/flex.tsx +++ b/packages/instant/src/components/ui/flex.tsx @@ -3,10 +3,10 @@ import * as React from 'react'; import { ColorOption, styled } from '../../style/theme'; export interface FlexProps { - direction: 'row' | 'column'; - flexWrap: 'wrap' | 'nowrap'; - justify: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end'; - align: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end'; + direction?: 'row' | 'column'; + flexWrap?: 'wrap' | 'nowrap'; + justify?: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end'; + align?: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end'; backgroundColor?: ColorOption; className?: string; } @@ -17,7 +17,7 @@ const PlainFlex: React.StatelessComponent = ({ children, className }) export const Flex = styled(PlainFlex)` display: flex; - direction: ${props => props.direction}; + flex-direction: ${props => props.direction}; flex-wrap: ${props => props.flexWrap}; justify-content: ${props => props.justify}; align-items: ${props => props.align}; diff --git a/packages/instant/src/components/ui/index.ts b/packages/instant/src/components/ui/index.ts new file mode 100644 index 000000000..dca63b65c --- /dev/null +++ b/packages/instant/src/components/ui/index.ts @@ -0,0 +1,4 @@ +export { Text, Title } from './text'; +export { Button } from './button'; +export { Flex } from './flex'; +export { Container } from './container'; diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx index a4b9d60d7..0bc387644 100644 --- a/packages/instant/src/components/ui/text.tsx +++ b/packages/instant/src/components/ui/text.tsx @@ -3,16 +3,16 @@ import * as React from 'react'; import { ColorOption, styled } from '../../style/theme'; -export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'i'; - export interface TextProps { - fontColor: ColorOption; - fontFamily: string; - fontStyle: string; - fontSize: string; - lineHeight: string; + fontColor?: ColorOption; + fontFamily?: string; + fontStyle?: string; + fontSize?: string; + opacity?: number; + letterSpacing?: string; + textTransform?: string; + lineHeight?: string; className?: string; - Tag?: TextTag; minHeight?: string; center?: boolean; fontWeight?: number | string; @@ -23,10 +23,10 @@ export interface TextProps { display?: string; } -const PlainText: React.StatelessComponent = ({ children, className, onClick, Tag }) => ( - +const PlainText: React.StatelessComponent = ({ children, className, onClick }) => ( +

{children} - +

); const darkenOnHoverAmount = 0.3; @@ -35,17 +35,23 @@ export const Text = styled(PlainText)` font-style: ${props => props.fontStyle}; font-weight: ${props => props.fontWeight}; font-size: ${props => props.fontSize}; + opacity: ${props => props.opacity}; text-decoration-line: ${props => props.textDecorationLine}; ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')}; ${props => (props.center ? 'text-align: center' : '')}; - color: ${props => props.theme[props.fontColor]}; + color: ${props => props.fontColor && props.theme[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}` : '')}; + ${props => (props.letterSpacing ? `letter-spacing: ${props.letterSpacing}` : '')}; + ${props => (props.textTransform ? `text-transform: ${props.textTransform}` : '')}; &:hover { - ${props => (props.onClick ? `color: ${props.hoverColor || darken(darkenOnHoverAmount, props.fontColor)}` : '')}; + ${props => + props.onClick + ? `color: ${props.hoverColor || darken(darkenOnHoverAmount, props.theme[props.fontColor || 'white'])}` + : ''}; } `; @@ -57,7 +63,6 @@ Text.defaultProps = { fontSize: '15px', lineHeight: '1.5em', textDecorationLine: 'none', - Tag: 'div', noWrap: false, }; @@ -66,9 +71,9 @@ Text.displayName = 'Text'; export const Title: React.StatelessComponent = props => ; Title.defaultProps = { - Tag: 'h2', fontSize: '20px', fontWeight: 600, + opacity: 1, fontColor: ColorOption.primaryColor, }; diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx index 99f9bb3ba..0e6230d1b 100644 --- a/packages/instant/src/components/zero_ex_instant.tsx +++ b/packages/instant/src/components/zero_ex_instant.tsx @@ -5,6 +5,8 @@ import { store } from '../redux/store'; import { fonts } from '../style/fonts'; import { theme, ThemeProvider } from '../style/theme'; +import { ZeroExInstantContainer } from './zero_ex_instant_container'; + fonts.include(); export interface ZeroExInstantProps {} @@ -12,7 +14,7 @@ export interface ZeroExInstantProps {} export const ZeroExInstant: React.StatelessComponent = () => ( -

ZeroExInstant

+ ); diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx new file mode 100644 index 000000000..fc936c3f2 --- /dev/null +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -0,0 +1,38 @@ +import * as React from 'react'; + +import { ColorOption } from '../style/theme'; + +import { Container, Flex, Text } from './ui'; + +export interface ZeroExInstantContainerProps {} + +export const ZeroExInstantContainer: React.StatelessComponent = props => ( + + + + + I want to buy + + + + 0.00 + rep + + + 0 ETH + $0.00 + + + + + hey + + + +); diff --git a/packages/instant/tslint.json b/packages/instant/tslint.json index ffaefe83a..1ab924e47 100644 --- a/packages/instant/tslint.json +++ b/packages/instant/tslint.json @@ -1,3 +1,6 @@ { - "extends": ["@0xproject/tslint-config"] + "extends": ["@0xproject/tslint-config"], + "rules": { + "custom-no-magic-numbers": false + } } -- cgit