From 6c0d31738062b113bd34b5438a2e3c8bfbfb385b Mon Sep 17 00:00:00 2001 From: Leonid Logvinov Date: Wed, 10 Oct 2018 14:44:50 +0200 Subject: Initial project scaffolding --- packages/dev-tools-pages/README.md | 59 +++++++++++++ packages/dev-tools-pages/less/all.less | 0 packages/dev-tools-pages/package.json | 54 ++++++++++++ .../public/images/favicon/favicon-2-16x16.png | Bin 0 -> 684 bytes .../public/images/favicon/favicon-2-32x32.png | Bin 0 -> 1567 bytes .../public/images/favicon/favicon.ico | Bin 0 -> 5430 bytes packages/dev-tools-pages/public/index.html | 22 +++++ .../dev-tools-pages/ts/components/meta_tags.tsx | 25 ++++++ packages/dev-tools-pages/ts/globals.d.ts | 9 ++ packages/dev-tools-pages/ts/index.tsx | 15 ++++ .../dev-tools-pages/ts/pages/landing/landing.tsx | 15 ++++ packages/dev-tools-pages/ts/utils/utils.ts | 32 +++++++ packages/dev-tools-pages/tsconfig.json | 21 +++++ packages/dev-tools-pages/tslint.json | 10 +++ packages/dev-tools-pages/webpack.config.js | 77 +++++++++++++++++ yarn.lock | 94 +-------------------- 16 files changed, 342 insertions(+), 91 deletions(-) create mode 100644 packages/dev-tools-pages/README.md create mode 100644 packages/dev-tools-pages/less/all.less create mode 100644 packages/dev-tools-pages/package.json create mode 100755 packages/dev-tools-pages/public/images/favicon/favicon-2-16x16.png create mode 100755 packages/dev-tools-pages/public/images/favicon/favicon-2-32x32.png create mode 100755 packages/dev-tools-pages/public/images/favicon/favicon.ico create mode 100644 packages/dev-tools-pages/public/index.html create mode 100644 packages/dev-tools-pages/ts/components/meta_tags.tsx create mode 100644 packages/dev-tools-pages/ts/globals.d.ts create mode 100644 packages/dev-tools-pages/ts/index.tsx create mode 100644 packages/dev-tools-pages/ts/pages/landing/landing.tsx create mode 100644 packages/dev-tools-pages/ts/utils/utils.ts create mode 100644 packages/dev-tools-pages/tsconfig.json create mode 100644 packages/dev-tools-pages/tslint.json create mode 100644 packages/dev-tools-pages/webpack.config.js diff --git a/packages/dev-tools-pages/README.md b/packages/dev-tools-pages/README.md new file mode 100644 index 000000000..ce8edc103 --- /dev/null +++ b/packages/dev-tools-pages/README.md @@ -0,0 +1,59 @@ +## Dev tools pages + +This repository contains our dev tools pages. + +## Contributing + +We strongly recommend that the community help us make improvements and determine the future direction of the protocol. To report bugs within this package, please create an issue in this repository. + +Please read our [contribution guidelines](../../CONTRIBUTING.md) before getting started. + +## Local Dev Setup + +Requires Node version 6.9.5 or higher + +### Install dependencies: + +```bash +yarn install +``` + +### Initial setup + +To build this package and all other monorepo packages that it depends on, run the following from the monorepo root directory: + +```bash +PKG=@0xproject/dev-tools-pages yarn build +``` + +### Run dev server + +```bash +PKG=@0xproject/dev-tools-pages yarn watch +``` + +Visit [http://localhost:3572/](http://localhost:3572/) in your browser. + +### Clean + +```bash +yarn clean +``` + +### Lint + +```bash +yarn lint +``` + +### Resources + +##### Toolkit + +* [Styled Components](https://www.styled-components.com/) +* [Rebass](https://rebassjs.org/) + +##### Recommended Atom packages: + +* [atom-typescript](https://atom.io/packages/atom-typescript) +* [linter-tslint](https://atom.io/packages/linter-tslint) diff --git a/packages/dev-tools-pages/less/all.less b/packages/dev-tools-pages/less/all.less new file mode 100644 index 000000000..e69de29bb diff --git a/packages/dev-tools-pages/package.json b/packages/dev-tools-pages/package.json new file mode 100644 index 000000000..436f2f5b1 --- /dev/null +++ b/packages/dev-tools-pages/package.json @@ -0,0 +1,54 @@ +{ + "name": "@0xproject/dev-tools-pages", + "version": "0.0.1", + "engines": { + "node": ">=6.12" + }, + "private": true, + "description": "0x Dev tools pages", + "scripts": { + "build": "node --max_old_space_size=8192 ../../node_modules/.bin/webpack --mode production", + "build:ci": "yarn build", + "build:dev": "../../node_modules/.bin/webpack --mode development", + "clean": "shx rm -f public/bundle*", + "lint": "tslint --project . 'ts/**/*.ts' 'ts/**/*.tsx'", + "dev": "webpack-dev-server --mode development --content-base public" + }, + "license": "Apache-2.0", + "dependencies": { + "basscss": "^8.0.3", + "less": "^2.7.2", + "lodash": "^4.17.5", + "react": "^16.4.2", + "react-document-title": "^2.0.3", + "react-dom": "^16.4.2", + "react-helmet": "^5.2.0", + "styled-components": "^3.3.0" + }, + "devDependencies": { + "@types/lodash": "4.14.104", + "@types/node": "*", + "@types/react": "^16.4.2", + "@types/react-dom": "^16.0.7", + "@types/react-helmet": "^5.0.6", + "@types/react-router-dom": "^4.0.4", + "@types/react-tap-event-plugin": "0.0.30", + "awesome-typescript-loader": "^5.2.1", + "copyfiles": "^2.0.0", + "css-loader": "0.23.x", + "less-loader": "^4.1.0", + "make-promises-safe": "^1.1.0", + "raw-loader": "^0.5.1", + "shx": "^0.2.2", + "source-map-loader": "^0.2.4", + "style-loader": "0.23.x", + "terser-webpack-plugin": "^1.1.0", + "tslint": "5.11.0", + "tslint-config-0xproject": "^0.0.2", + "typescript": "3.0.1", + "uglifyjs-webpack-plugin": "^2.0.1", + "webpack": "^4.20.2", + "webpack-cli": "3.1.2", + "webpack-dev-server": "^3.1.9" + } +} diff --git a/packages/dev-tools-pages/public/images/favicon/favicon-2-16x16.png b/packages/dev-tools-pages/public/images/favicon/favicon-2-16x16.png new file mode 100755 index 000000000..68c493c4f Binary files /dev/null and b/packages/dev-tools-pages/public/images/favicon/favicon-2-16x16.png differ diff --git a/packages/dev-tools-pages/public/images/favicon/favicon-2-32x32.png b/packages/dev-tools-pages/public/images/favicon/favicon-2-32x32.png new file mode 100755 index 000000000..a5abb0eb3 Binary files /dev/null and b/packages/dev-tools-pages/public/images/favicon/favicon-2-32x32.png differ diff --git a/packages/dev-tools-pages/public/images/favicon/favicon.ico b/packages/dev-tools-pages/public/images/favicon/favicon.ico new file mode 100755 index 000000000..b7ada2a1c Binary files /dev/null and b/packages/dev-tools-pages/public/images/favicon/favicon.ico differ diff --git a/packages/dev-tools-pages/public/index.html b/packages/dev-tools-pages/public/index.html new file mode 100644 index 000000000..5137eed95 --- /dev/null +++ b/packages/dev-tools-pages/public/index.html @@ -0,0 +1,22 @@ + + + + + + + + + + + + 0x: The Protocol for Trading Tokens + + + + + +
+ + + + \ No newline at end of file diff --git a/packages/dev-tools-pages/ts/components/meta_tags.tsx b/packages/dev-tools-pages/ts/components/meta_tags.tsx new file mode 100644 index 000000000..f6c43d23f --- /dev/null +++ b/packages/dev-tools-pages/ts/components/meta_tags.tsx @@ -0,0 +1,25 @@ +import * as React from 'react'; +import { Helmet } from 'react-helmet'; + +export interface MetaTagsProps { + title: string; + description: string; + imgSrc?: string; +} + +export const MetaTags: React.StatelessComponent = ({ title, description, imgSrc }) => ( + + {title} + + + + + + + + +); + +MetaTags.defaultProps = { + imgSrc: '/images/og_image.png', +}; diff --git a/packages/dev-tools-pages/ts/globals.d.ts b/packages/dev-tools-pages/ts/globals.d.ts new file mode 100644 index 000000000..d0890161c --- /dev/null +++ b/packages/dev-tools-pages/ts/globals.d.ts @@ -0,0 +1,9 @@ +declare module 'whatwg-fetch'; +declare module 'react-document-title'; + +declare module '*.json' { + const json: any; + /* tslint:disable */ + export default json; + /* tslint:enable */ +} diff --git a/packages/dev-tools-pages/ts/index.tsx b/packages/dev-tools-pages/ts/index.tsx new file mode 100644 index 000000000..f4db2ea3c --- /dev/null +++ b/packages/dev-tools-pages/ts/index.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; +import { render } from 'react-dom'; +import { MetaTags } from 'ts/components/meta_tags'; +import { Landing } from 'ts/pages/landing/landing'; + +const DOCUMENT_TITLE = ''; +const DOCUMENT_DESCRIPTION = ''; + +render( +
+ + +
, + document.getElementById('app'), +); diff --git a/packages/dev-tools-pages/ts/pages/landing/landing.tsx b/packages/dev-tools-pages/ts/pages/landing/landing.tsx new file mode 100644 index 000000000..a6cb89a7b --- /dev/null +++ b/packages/dev-tools-pages/ts/pages/landing/landing.tsx @@ -0,0 +1,15 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +interface LandingProps {} + +interface LandingState {} + +export class Landing extends React.Component { + constructor(props: LandingProps) { + super(props); + } + public render(): React.ReactNode { + return
; + } +} diff --git a/packages/dev-tools-pages/ts/utils/utils.ts b/packages/dev-tools-pages/ts/utils/utils.ts new file mode 100644 index 000000000..b274706a2 --- /dev/null +++ b/packages/dev-tools-pages/ts/utils/utils.ts @@ -0,0 +1,32 @@ +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((resolve, _reject) => { + if (document.readyState === 'complete') { + resolve(); + return; + } + window.onload = () => resolve(); + }), + openUrl(url: string): void { + window.open(url, '_blank'); + }, + isMobileOperatingSystem(): boolean { + return bowser.mobile; + }, +}; diff --git a/packages/dev-tools-pages/tsconfig.json b/packages/dev-tools-pages/tsconfig.json new file mode 100644 index 000000000..f5d4f62c2 --- /dev/null +++ b/packages/dev-tools-pages/tsconfig.json @@ -0,0 +1,21 @@ +{ + "extends": "../../tsconfig", + "compilerOptions": { + "allowSyntheticDefaultImports": true, + "outDir": "./transpiled/", + "jsx": "react", + "baseUrl": "./", + // tsconfig.json at the monorepo root contains some options required for + // project references which do not work for website. We override those + // options here. + "declaration": false, + "declarationMap": false, + "noUnusedLocals": true, + "noUnusedParameters": true, + "composite": false, + "paths": { + "*": ["node_modules/@types/*", "*"] + } + }, + "include": ["./ts/**/*"] +} diff --git a/packages/dev-tools-pages/tslint.json b/packages/dev-tools-pages/tslint.json new file mode 100644 index 000000000..b55ffe90f --- /dev/null +++ b/packages/dev-tools-pages/tslint.json @@ -0,0 +1,10 @@ +{ + "extends": ["@0xproject/tslint-config"], + "rules": { + "no-implicit-dependencies": false, + "no-object-literal-type-assertion": false, + "completed-docs": false, + "prefer-function-over-method": false, + "custom-no-magic-numbers": false + } +} diff --git a/packages/dev-tools-pages/webpack.config.js b/packages/dev-tools-pages/webpack.config.js new file mode 100644 index 000000000..1df41212f --- /dev/null +++ b/packages/dev-tools-pages/webpack.config.js @@ -0,0 +1,77 @@ +const path = require('path'); +const webpack = require('webpack'); +const TerserPlugin = require('terser-webpack-plugin'); +const childProcess = require('child_process'); + +const config = { + entry: ['./ts/index.tsx'], + output: { + path: path.join(__dirname, '/public'), + filename: 'bundle.js', + chunkFilename: 'bundle-[name].js', + publicPath: '/', + }, + devtool: 'source-map', + resolve: { + modules: [path.join(__dirname, '/ts'), 'node_modules'], + extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'], + alias: { + ts: path.join(__dirname, '/ts'), + less: path.join(__dirname, '/less'), + }, + }, + module: { + rules: [ + { + test: /\.js$/, + loader: 'source-map-loader', + exclude: [ + // instead of /\/node_modules\// + path.join(process.cwd(), 'node_modules'), + path.join(process.cwd(), '../..', 'node_modules'), + ], + }, + { + test: /\.tsx?$/, + loader: 'awesome-typescript-loader', + }, + { + test: /\.md$/, + use: 'raw-loader', + }, + ], + }, + optimization: { + minimizer: [ + new TerserPlugin({ + sourceMap: true, + }), + ], + }, + devServer: { + port: 3572, + disableHostCheck: true, + }, +}; + +module.exports = (_env, argv) => { + let plugins = []; + if (argv.mode === 'development') { + config.mode = 'development'; + } else { + config.mode = 'production'; + plugins = plugins.concat([ + new webpack.DefinePlugin({ + 'process.env': { + NODE_ENV: JSON.stringify(process.env.NODE_ENV), + }, + }), + ]); + } + console.log('i ｢atl｣: Mode: ', config.mode); + + config.plugins = plugins; + console.log('i ｢atl｣: Plugin Count: ', config.plugins.length); + + return config; +}; diff --git a/yarn.lock b/yarn.lock index dc0c1b14d..26e984b99 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1700,7 +1700,7 @@ ansi-styles@^2.2.1: version "2.2.1" resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe" -ansi-styles@^3.1.0, ansi-styles@^3.2.0, ansi-styles@^3.2.1: +ansi-styles@^3.2.0, ansi-styles@^3.2.1: version "3.2.1" resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d" dependencies: @@ -2027,19 +2027,6 @@ aws4@^1.8.0: version "1.8.0" resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f" -axios@0.15.3: - version "0.15.3" - resolved "http://registry.npmjs.org/axios/-/axios-0.15.3.tgz#2c9d638b2e191a08ea1d6cc988eadd6ba5bdc053" - dependencies: - follow-redirects "1.0.0" - -axios@^0.17.0: - version "0.17.1" - resolved "https://registry.yarnpkg.com/axios/-/axios-0.17.1.tgz#2d8e3e5d0bdbd7327f91bc814f5c57660f81824d" - dependencies: - follow-redirects "^1.2.5" - is-buffer "^1.1.5" - axios@^0.18.0: version "0.18.0" resolved "http://registry.npmjs.org/axios/-/axios-0.18.0.tgz#32d53e4851efdc0a11993b6cd000789d70c05102" @@ -2920,13 +2907,6 @@ brorand@^1.0.1: version "1.1.0" resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f" -brotli-size@0.0.1: - version "0.0.1" - resolved "https://registry.yarnpkg.com/brotli-size/-/brotli-size-0.0.1.tgz#8c1aeea01cd22f359b048951185bd539ff0c829f" - dependencies: - duplexer "^0.1.1" - iltorb "^1.0.9" - browser-process-hrtime@^0.1.2: version "0.1.3" resolved "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-0.1.3.tgz#616f00faef1df7ec1b5bf9cfe2bdc3170f26c7b4" @@ -3142,21 +3122,6 @@ builtins@^1.0.3: version "1.0.3" resolved "http://registry.yarnpkg.com/builtins/-/builtins-1.0.3.tgz#cb94faeb61c8696451db36534e1422f94f0aee88" -bundlesize@^0.17.0: - version "0.17.0" - resolved "https://registry.yarnpkg.com/bundlesize/-/bundlesize-0.17.0.tgz#212ae5731ab0554d2acd509d23e1de18640b2008" - dependencies: - axios "^0.17.0" - brotli-size "0.0.1" - bytes "^3.0.0" - ci-env "^1.4.0" - commander "^2.11.0" - github-build "^1.2.0" - glob "^7.1.2" - gzip-size "^4.0.0" - prettycli "^1.4.3" - read-pkg-up "^3.0.0" - bundlewatch@^0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/bundlewatch/-/bundlewatch-0.2.1.tgz#3bf5279f49c098c7b27c31f7c172397154eb2e65" @@ -3385,14 +3350,6 @@ chain-function@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/chain-function/-/chain-function-1.0.0.tgz#0d4ab37e7e18ead0bdc47b920764118ce58733dc" -chalk@2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.1.0.tgz#ac5becf14fa21b99c6c92ca7a7d7cfd5b17e743e" - dependencies: - ansi-styles "^3.1.0" - escape-string-regexp "^1.0.5" - supports-color "^4.0.0" - chalk@2.3.2: version "2.3.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.2.tgz#250dc96b07491bfd601e648d66ddf5f60c7a5c65" @@ -3549,10 +3506,6 @@ chrome-trace-event@^1.0.0: dependencies: tslib "^1.9.0" -ci-env@^1.4.0: - version "1.6.1" - resolved "https://registry.yarnpkg.com/ci-env/-/ci-env-1.6.1.tgz#3e3ef4fc528a2825397f912cfa30cde17ec364cc" - ci-info@^1.0.0: version "1.1.3" resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.1.3.tgz#710193264bb05c77b8c90d02f5aaf22216a667b2" @@ -3829,10 +3782,6 @@ commander@2.15.1, commander@^2.12.1, commander@^2.8.1: version "2.15.1" resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f" -commander@^2.11.0: - version "2.18.0" - resolved "https://registry.yarnpkg.com/commander/-/commander-2.18.0.tgz#2bf063ddee7c7891176981a2cc798e5754bc6970" - commander@^2.15.1: version "2.19.0" resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a" @@ -4762,10 +4711,6 @@ detect-indent@^5.0.0: version "5.0.0" resolved "http://registry.yarnpkg.com/detect-indent/-/detect-indent-5.0.0.tgz#3871cc0a6a002e8c3e5b3cf7f336264675f06b9d" -detect-libc@^0.2.0: - version "0.2.0" - resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-0.2.0.tgz#47fdf567348a17ec25fcbf0b9e446348a76f9fb5" - detect-libc@^1.0.2, detect-libc@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b" @@ -6238,13 +6183,7 @@ flush-write-stream@^1.0.0, flush-write-stream@^1.0.2: inherits "^2.0.1" readable-stream "^2.0.4" -follow-redirects@1.0.0: - version "1.0.0" - resolved "http://registry.npmjs.org/follow-redirects/-/follow-redirects-1.0.0.tgz#8e34298cbd2e176f254effec75a1c78cc849fd37" - dependencies: - debug "^2.2.0" - -follow-redirects@^1.2.5, follow-redirects@^1.3.0: +follow-redirects@^1.3.0: version "1.5.8" resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.8.tgz#1dbfe13e45ad969f813e86c00e5296f525c885a1" dependencies: @@ -6654,12 +6593,6 @@ gitconfiglocal@^1.0.0: dependencies: ini "^1.3.2" -github-build@^1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/github-build/-/github-build-1.2.0.tgz#b0bdb705ae4088218577e863c1a301030211051f" - dependencies: - axios "0.15.3" - github-from-package@0.0.0: version "0.0.0" resolved "https://registry.yarnpkg.com/github-from-package/-/github-from-package-0.0.0.tgz#97fb5d96bfde8973313f20e8288ef9a167fa64ce" @@ -7441,15 +7374,6 @@ ignore@^3.3.5: version "3.3.7" resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.7.tgz#612289bfb3c220e186a58118618d5be8c1bab021" -iltorb@^1.0.9: - version "1.3.10" - resolved "https://registry.yarnpkg.com/iltorb/-/iltorb-1.3.10.tgz#a0d9e4e7d52bf510741442236cbe0cc4230fc9f8" - dependencies: - detect-libc "^0.2.0" - nan "^2.6.2" - node-gyp "^3.6.2" - prebuild-install "^2.3.0" - image-size@~0.5.0: version "0.5.5" resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c" @@ -11668,7 +11592,7 @@ postman-url-encoder@1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/postman-url-encoder/-/postman-url-encoder-1.0.1.tgz#a094a42e9415ff0bbfdce0eaa8e6011d449ee83c" -prebuild-install@^2.2.2, prebuild-install@^2.3.0: +prebuild-install@^2.2.2: version "2.5.3" resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-2.5.3.tgz#9f65f242782d370296353710e9bc843490c19f69" dependencies: @@ -11739,12 +11663,6 @@ pretty-ms@3.1.0: parse-ms "^1.0.0" plur "^2.1.2" -prettycli@^1.4.3: - version "1.4.3" - resolved "https://registry.yarnpkg.com/prettycli/-/prettycli-1.4.3.tgz#b28ec2aad9de07ae1fd75ef294fb54cbdee07ed5" - dependencies: - chalk "2.1.0" - prismjs@^1.15.0: version "1.15.0" resolved "https://registry.npmjs.org/prismjs/-/prismjs-1.15.0.tgz#8801d332e472091ba8def94976c8877ad60398d9" @@ -14200,12 +14118,6 @@ supports-color@^3.1.0, supports-color@^3.1.2, supports-color@^3.2.3: dependencies: has-flag "^1.0.0" -supports-color@^4.0.0: - version "4.5.0" - resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.5.0.tgz#be7a0de484dec5c5cddf8b3d59125044912f635b" - dependencies: - has-flag "^2.0.0" - supports-color@^5.5.0: version "5.5.0" resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" -- cgit From fb882b0c7710151af7024c510d853f828a54f43a Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 10 Oct 2018 17:22:31 +0200 Subject: Add stuff --- packages/dev-tools-pages/package.json | 4 + .../public/css/basscss_responsive_custom.css | 85 ++++ .../public/css/basscss_responsive_margin.css | 453 +++++++++++++++++++++ .../public/css/basscss_responsive_padding.css | 134 ++++++ .../public/css/basscss_responsive_type_scale.css | 35 ++ packages/dev-tools-pages/public/index.html | 4 + .../dev-tools-pages/ts/components/ui/button.tsx | 60 +++ .../dev-tools-pages/ts/components/ui/container.tsx | 55 +++ packages/dev-tools-pages/ts/components/ui/text.tsx | 74 ++++ packages/dev-tools-pages/ts/index.tsx | 4 +- packages/dev-tools-pages/ts/pages/landing.tsx | 22 + .../dev-tools-pages/ts/pages/landing/landing.tsx | 15 - packages/dev-tools-pages/tsconfig.json | 5 +- packages/dev-tools-pages/webpack.config.js | 9 + yarn.lock | 48 +-- 15 files changed, 950 insertions(+), 57 deletions(-) create mode 100644 packages/dev-tools-pages/public/css/basscss_responsive_custom.css create mode 100644 packages/dev-tools-pages/public/css/basscss_responsive_margin.css create mode 100644 packages/dev-tools-pages/public/css/basscss_responsive_padding.css create mode 100644 packages/dev-tools-pages/public/css/basscss_responsive_type_scale.css create mode 100644 packages/dev-tools-pages/ts/components/ui/button.tsx create mode 100644 packages/dev-tools-pages/ts/components/ui/container.tsx create mode 100644 packages/dev-tools-pages/ts/components/ui/text.tsx create mode 100644 packages/dev-tools-pages/ts/pages/landing.tsx delete mode 100644 packages/dev-tools-pages/ts/pages/landing/landing.tsx diff --git a/packages/dev-tools-pages/package.json b/packages/dev-tools-pages/package.json index 436f2f5b1..f73260544 100644 --- a/packages/dev-tools-pages/package.json +++ b/packages/dev-tools-pages/package.json @@ -16,9 +16,12 @@ }, "license": "Apache-2.0", "dependencies": { + "@0xproject/react-shared": "^1.0.15", "basscss": "^8.0.3", + "bowser": "^1.9.3", "less": "^2.7.2", "lodash": "^4.17.5", + "polished": "^1.9.2", "react": "^16.4.2", "react-document-title": "^2.0.3", "react-dom": "^16.4.2", @@ -33,6 +36,7 @@ "@types/react-helmet": "^5.0.6", "@types/react-router-dom": "^4.0.4", "@types/react-tap-event-plugin": "0.0.30", + "@types/styled-components": "^4.0.0", "awesome-typescript-loader": "^5.2.1", "copyfiles": "^2.0.0", "css-loader": "0.23.x", diff --git a/packages/dev-tools-pages/public/css/basscss_responsive_custom.css b/packages/dev-tools-pages/public/css/basscss_responsive_custom.css new file mode 100644 index 000000000..5f8bd9117 --- /dev/null +++ b/packages/dev-tools-pages/public/css/basscss_responsive_custom.css @@ -0,0 +1,85 @@ +/* Custom Basscss Responsive Utilities */ + +@media (max-width: 52em) { + .sm-center { + text-align: center; + } + .sm-align-middle { + vertical-align: middle; + } + .sm-align-top { + vertical-align: top; + } + .sm-left-align { + text-align: left; + } + .sm-right-align { + text-align: right; + } + .sm-table-cell { + display: table-cell; + } + .sm-mx-auto { + margin-left: auto; + margin-right: auto; + } + .sm-right { + float: right; + } +} + +@media (min-width: 52em) { + .md-center { + text-align: center; + } + .md-align-middle { + vertical-align: middle; + } + .md-align-top { + vertical-align: top; + } + .md-left-align { + text-align: left; + } + .md-right-align { + text-align: right; + } + .md-table-cell { + display: table-cell; + } + .md-mx-auto { + margin-left: auto; + margin-right: auto; + } + .md-right { + float: right; + } +} + +@media (min-width: 64em) { + .lg-center { + text-align: center; + } + .lg-align-middle { + vertical-align: middle; + } + .lg-align-top { + vertical-align: top; + } + .lg-left-align { + text-align: left; + } + .lg-right-align { + text-align: right; + } + .lg-table-cell { + display: table-cell; + } + .lg-mx-auto { + margin-left: auto; + margin-right: auto; + } + .lg-right { + float: right; + } +} diff --git a/packages/dev-tools-pages/public/css/basscss_responsive_margin.css b/packages/dev-tools-pages/public/css/basscss_responsive_margin.css new file mode 100644 index 000000000..c9f3e855c --- /dev/null +++ b/packages/dev-tools-pages/public/css/basscss_responsive_margin.css @@ -0,0 +1,453 @@ +/* Basscss Responsive Margin */ + +@media (max-width: 52em) { + /* Modified by Fabio Berger to max-width from min-width */ + + .sm-m0 { + margin: 0; + } + .sm-mt0 { + margin-top: 0; + } + .sm-mr0 { + margin-right: 0; + } + .sm-mb0 { + margin-bottom: 0; + } + .sm-ml0 { + margin-left: 0; + } + .sm-mx0 { + margin-left: 0; + margin-right: 0; + } + .sm-my0 { + margin-top: 0; + margin-bottom: 0; + } + + .sm-m1 { + margin: 0.5rem; + } + .sm-mt1 { + margin-top: 0.5rem; + } + .sm-mr1 { + margin-right: 0.5rem; + } + .sm-mb1 { + margin-bottom: 0.5rem; + } + .sm-ml1 { + margin-left: 0.5rem; + } + .sm-mx1 { + margin-left: 0.5rem; + margin-right: 0.5rem; + } + .sm-my1 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + } + + .sm-m2 { + margin: 1rem; + } + .sm-mt2 { + margin-top: 1rem; + } + .sm-mr2 { + margin-right: 1rem; + } + .sm-mb2 { + margin-bottom: 1rem; + } + .sm-ml2 { + margin-left: 1rem; + } + .sm-mx2 { + margin-left: 1rem; + margin-right: 1rem; + } + .sm-my2 { + margin-top: 1rem; + margin-bottom: 1rem; + } + + .sm-m3 { + margin: 2rem; + } + .sm-mt3 { + margin-top: 2rem; + } + .sm-mr3 { + margin-right: 2rem; + } + .sm-mb3 { + margin-bottom: 2rem; + } + .sm-ml3 { + margin-left: 2rem; + } + .sm-mx3 { + margin-left: 2rem; + margin-right: 2rem; + } + .sm-my3 { + margin-top: 2rem; + margin-bottom: 2rem; + } + + .sm-m4 { + margin: 4rem; + } + .sm-mt4 { + margin-top: 4rem; + } + .sm-mr4 { + margin-right: 4rem; + } + .sm-mb4 { + margin-bottom: 4rem; + } + .sm-ml4 { + margin-left: 4rem; + } + .sm-mx4 { + margin-left: 4rem; + margin-right: 4rem; + } + .sm-my4 { + margin-top: 4rem; + margin-bottom: 4rem; + } + + .sm-mxn1 { + margin-left: -0.5rem; + margin-right: -0.5rem; + } + .sm-mxn2 { + margin-left: -1rem; + margin-right: -1rem; + } + .sm-mxn3 { + margin-left: -2rem; + margin-right: -2rem; + } + .sm-mxn4 { + margin-left: -4rem; + margin-right: -4rem; + } + + .sm-ml-auto { + margin-left: auto; + } + .sm-mr-auto { + margin-right: auto; + } + .sm-mx-auto { + margin-left: auto; + margin-right: auto; + } +} + +@media (min-width: 52em) { + .md-m0 { + margin: 0; + } + .md-mt0 { + margin-top: 0; + } + .md-mr0 { + margin-right: 0; + } + .md-mb0 { + margin-bottom: 0; + } + .md-ml0 { + margin-left: 0; + } + .md-mx0 { + margin-left: 0; + margin-right: 0; + } + .md-my0 { + margin-top: 0; + margin-bottom: 0; + } + + .md-m1 { + margin: 0.5rem; + } + .md-mt1 { + margin-top: 0.5rem; + } + .md-mr1 { + margin-right: 0.5rem; + } + .md-mb1 { + margin-bottom: 0.5rem; + } + .md-ml1 { + margin-left: 0.5rem; + } + .md-mx1 { + margin-left: 0.5rem; + margin-right: 0.5rem; + } + .md-my1 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + } + + .md-m2 { + margin: 1rem; + } + .md-mt2 { + margin-top: 1rem; + } + .md-mr2 { + margin-right: 1rem; + } + .md-mb2 { + margin-bottom: 1rem; + } + .md-ml2 { + margin-left: 1rem; + } + .md-mx2 { + margin-left: 1rem; + margin-right: 1rem; + } + .md-my2 { + margin-top: 1rem; + margin-bottom: 1rem; + } + + .md-m3 { + margin: 2rem; + } + .md-mt3 { + margin-top: 2rem; + } + .md-mr3 { + margin-right: 2rem; + } + .md-mb3 { + margin-bottom: 2rem; + } + .md-ml3 { + margin-left: 2rem; + } + .md-mx3 { + margin-left: 2rem; + margin-right: 2rem; + } + .md-my3 { + margin-top: 2rem; + margin-bottom: 2rem; + } + + .md-m4 { + margin: 4rem; + } + .md-mt4 { + margin-top: 4rem; + } + .md-mr4 { + margin-right: 4rem; + } + .md-mb4 { + margin-bottom: 4rem; + } + .md-ml4 { + margin-left: 4rem; + } + .md-mx4 { + margin-left: 4rem; + margin-right: 4rem; + } + .md-my4 { + margin-top: 4rem; + margin-bottom: 4rem; + } + + .md-mxn1 { + margin-left: -0.5rem; + margin-right: -0.5rem; + } + .md-mxn2 { + margin-left: -1rem; + margin-right: -1rem; + } + .md-mxn3 { + margin-left: -2rem; + margin-right: -2rem; + } + .md-mxn4 { + margin-left: -4rem; + margin-right: -4rem; + } + + .md-ml-auto { + margin-left: auto; + } + .md-mr-auto { + margin-right: auto; + } + .md-mx-auto { + margin-left: auto; + margin-right: auto; + } +} + +@media (min-width: 64em) { + .lg-m0 { + margin: 0; + } + .lg-mt0 { + margin-top: 0; + } + .lg-mr0 { + margin-right: 0; + } + .lg-mb0 { + margin-bottom: 0; + } + .lg-ml0 { + margin-left: 0; + } + .lg-mx0 { + margin-left: 0; + margin-right: 0; + } + .lg-my0 { + margin-top: 0; + margin-bottom: 0; + } + + .lg-m1 { + margin: 0.5rem; + } + .lg-mt1 { + margin-top: 0.5rem; + } + .lg-mr1 { + margin-right: 0.5rem; + } + .lg-mb1 { + margin-bottom: 0.5rem; + } + .lg-ml1 { + margin-left: 0.5rem; + } + .lg-mx1 { + margin-left: 0.5rem; + margin-right: 0.5rem; + } + .lg-my1 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + } + + .lg-m2 { + margin: 1rem; + } + .lg-mt2 { + margin-top: 1rem; + } + .lg-mr2 { + margin-right: 1rem; + } + .lg-mb2 { + margin-bottom: 1rem; + } + .lg-ml2 { + margin-left: 1rem; + } + .lg-mx2 { + margin-left: 1rem; + margin-right: 1rem; + } + .lg-my2 { + margin-top: 1rem; + margin-bottom: 1rem; + } + + .lg-m3 { + margin: 2rem; + } + .lg-mt3 { + margin-top: 2rem; + } + .lg-mr3 { + margin-right: 2rem; + } + .lg-mb3 { + margin-bottom: 2rem; + } + .lg-ml3 { + margin-left: 2rem; + } + .lg-mx3 { + margin-left: 2rem; + margin-right: 2rem; + } + .lg-my3 { + margin-top: 2rem; + margin-bottom: 2rem; + } + + .lg-m4 { + margin: 4rem; + } + .lg-mt4 { + margin-top: 4rem; + } + .lg-mr4 { + margin-right: 4rem; + } + .lg-mb4 { + margin-bottom: 4rem; + } + .lg-ml4 { + margin-left: 4rem; + } + .lg-mx4 { + margin-left: 4rem; + margin-right: 4rem; + } + .lg-my4 { + margin-top: 4rem; + margin-bottom: 4rem; + } + + .lg-mxn1 { + margin-left: -0.5rem; + margin-right: -0.5rem; + } + .lg-mxn2 { + margin-left: -1rem; + margin-right: -1rem; + } + .lg-mxn3 { + margin-left: -2rem; + margin-right: -2rem; + } + .lg-mxn4 { + margin-left: -4rem; + margin-right: -4rem; + } + + .lg-ml-auto { + margin-left: auto; + } + .lg-mr-auto { + margin-right: auto; + } + .lg-mx-auto { + margin-left: auto; + margin-right: auto; + } +} diff --git a/packages/dev-tools-pages/public/css/basscss_responsive_padding.css b/packages/dev-tools-pages/public/css/basscss_responsive_padding.css new file mode 100644 index 000000000..e027c2d65 --- /dev/null +++ b/packages/dev-tools-pages/public/css/basscss_responsive_padding.css @@ -0,0 +1,134 @@ +/* Basscss Responsive Padding */ +/* Modified by Fabio Berger to include xs prefix */ + +@media (max-width: 52em) { /* Modified by Fabio Berger to max-width from min-width */ + + .sm-p0 { padding: 0 } + .sm-pt0 { padding-top: 0 } + .sm-pr0 { padding-right: 0 } + .sm-pb0 { padding-bottom: 0 } + .sm-pl0 { padding-left: 0 } + .sm-px0 { padding-left: 0; padding-right: 0 } + .sm-py0 { padding-top: 0; padding-bottom: 0 } + + .sm-p1 { padding: .5rem } + .sm-pt1 { padding-top: .5rem } + .sm-pr1 { padding-right: .5rem } + .sm-pb1 { padding-bottom: .5rem } + .sm-pl1 { padding-left: .5rem } + .sm-px1 { padding-left: .5rem; padding-right: .5rem } + .sm-py1 { padding-top: .5rem; padding-bottom: .5rem } + + .sm-p2 { padding: 1rem } + .sm-pt2 { padding-top: 1rem } + .sm-pr2 { padding-right: 1rem } + .sm-pb2 { padding-bottom: 1rem } + .sm-pl2 { padding-left: 1rem } + .sm-px2 { padding-left: 1rem; padding-right: 1rem } + .sm-py2 { padding-top: 1rem; padding-bottom: 1rem } + + .sm-p3 { padding: 2rem } + .sm-pt3 { padding-top: 2rem } + .sm-pr3 { padding-right: 2rem } + .sm-pb3 { padding-bottom: 2rem } + .sm-pl3 { padding-left: 2rem } + .sm-px3 { padding-left: 2rem; padding-right: 2rem } + .sm-py3 { padding-top: 2rem; padding-bottom: 2rem } + + .sm-p4 { padding: 4rem } + .sm-pt4 { padding-top: 4rem } + .sm-pr4 { padding-right: 4rem } + .sm-pb4 { padding-bottom: 4rem } + .sm-pl4 { padding-left: 4rem } + .sm-px4 { padding-left: 4rem; padding-right: 4rem } + .sm-py4 { padding-top: 4rem; padding-bottom: 4rem } + +} + +@media (min-width: 52em) { + + .md-p0 { padding: 0 } + .md-pt0 { padding-top: 0 } + .md-pr0 { padding-right: 0 } + .md-pb0 { padding-bottom: 0 } + .md-pl0 { padding-left: 0 } + .md-px0 { padding-left: 0; padding-right: 0 } + .md-py0 { padding-top: 0; padding-bottom: 0 } + + .md-p1 { padding: .5rem } + .md-pt1 { padding-top: .5rem } + .md-pr1 { padding-right: .5rem } + .md-pb1 { padding-bottom: .5rem } + .md-pl1 { padding-left: .5rem } + .md-px1 { padding-left: .5rem; padding-right: .5rem } + .md-py1 { padding-top: .5rem; padding-bottom: .5rem } + + .md-p2 { padding: 1rem } + .md-pt2 { padding-top: 1rem } + .md-pr2 { padding-right: 1rem } + .md-pb2 { padding-bottom: 1rem } + .md-pl2 { padding-left: 1rem } + .md-px2 { padding-left: 1rem; padding-right: 1rem } + .md-py2 { padding-top: 1rem; padding-bottom: 1rem } + + .md-p3 { padding: 2rem } + .md-pt3 { padding-top: 2rem } + .md-pr3 { padding-right: 2rem } + .md-pb3 { padding-bottom: 2rem } + .md-pl3 { padding-left: 2rem } + .md-px3 { padding-left: 2rem; padding-right: 2rem } + .md-py3 { padding-top: 2rem; padding-bottom: 2rem } + + .md-p4 { padding: 4rem } + .md-pt4 { padding-top: 4rem } + .md-pr4 { padding-right: 4rem } + .md-pb4 { padding-bottom: 4rem } + .md-pl4 { padding-left: 4rem } + .md-px4 { padding-left: 4rem; padding-right: 4rem } + .md-py4 { padding-top: 4rem; padding-bottom: 4rem } + +} + +@media (min-width: 64em) { + + .lg-p0 { padding: 0 } + .lg-pt0 { padding-top: 0 } + .lg-pr0 { padding-right: 0 } + .lg-pb0 { padding-bottom: 0 } + .lg-pl0 { padding-left: 0 } + .lg-px0 { padding-left: 0; padding-right: 0 } + .lg-py0 { padding-top: 0; padding-bottom: 0 } + + .lg-p1 { padding: .5rem } + .lg-pt1 { padding-top: .5rem } + .lg-pr1 { padding-right: .5rem } + .lg-pb1 { padding-bottom: .5rem } + .lg-pl1 { padding-left: .5rem } + .lg-px1 { padding-left: .5rem; padding-right: .5rem } + .lg-py1 { padding-top: .5rem; padding-bottom: .5rem } + + .lg-p2 { padding: 1rem } + .lg-pt2 { padding-top: 1rem } + .lg-pr2 { padding-right: 1rem } + .lg-pb2 { padding-bottom: 1rem } + .lg-pl2 { padding-left: 1rem } + .lg-px2 { padding-left: 1rem; padding-right: 1rem } + .lg-py2 { padding-top: 1rem; padding-bottom: 1rem } + + .lg-p3 { padding: 2rem } + .lg-pt3 { padding-top: 2rem } + .lg-pr3 { padding-right: 2rem } + .lg-pb3 { padding-bottom: 2rem } + .lg-pl3 { padding-left: 2rem } + .lg-px3 { padding-left: 2rem; padding-right: 2rem } + .lg-py3 { padding-top: 2rem; padding-bottom: 2rem } + + .lg-p4 { padding: 4rem } + .lg-pt4 { padding-top: 4rem } + .lg-pr4 { padding-right: 4rem } + .lg-pb4 { padding-bottom: 4rem } + .lg-pl4 { padding-left: 4rem } + .lg-px4 { padding-left: 4rem; padding-right: 4rem } + .lg-py4 { padding-top: 4rem; padding-bottom: 4rem } + +} diff --git a/packages/dev-tools-pages/public/css/basscss_responsive_type_scale.css b/packages/dev-tools-pages/public/css/basscss_responsive_type_scale.css new file mode 100644 index 000000000..cae23b4e7 --- /dev/null +++ b/packages/dev-tools-pages/public/css/basscss_responsive_type_scale.css @@ -0,0 +1,35 @@ +/* Basscss Responsive Type Scale */ +/* Modified by Fabio Berger to include xs prefix */ + +@media (max-width: 52em) { /* Modified by Fabio Berger to max-width from min-width */ + .sm-h00 { font-size: 4rem } + .sm-h0 { font-size: 3rem } + .sm-h1 { font-size: 2rem } + .sm-h2 { font-size: 1.5rem } + .sm-h3 { font-size: 1.25rem } + .sm-h4 { font-size: 1rem } + .sm-h5 { font-size: .875rem } + .sm-h6 { font-size: .75rem } +} + +@media (min-width: 52em) { + .md-h00 { font-size: 4rem } + .md-h0 { font-size: 3rem } + .md-h1 { font-size: 2rem } + .md-h2 { font-size: 1.5rem } + .md-h3 { font-size: 1.25rem } + .md-h4 { font-size: 1rem } + .md-h5 { font-size: .875rem } + .md-h6 { font-size: .75rem } +} + +@media (min-width: 64em) { + .lg-h00 { font-size: 4rem } + .lg-h0 { font-size: 3rem } + .lg-h1 { font-size: 2rem } + .lg-h2 { font-size: 1.5rem } + .lg-h3 { font-size: 1.25rem } + .lg-h4 { font-size: 1rem } + .lg-h5 { font-size: .875rem } + .lg-h6 { font-size: .75rem } +} diff --git a/packages/dev-tools-pages/public/index.html b/packages/dev-tools-pages/public/index.html index 5137eed95..f62d7b255 100644 --- a/packages/dev-tools-pages/public/index.html +++ b/packages/dev-tools-pages/public/index.html @@ -12,6 +12,10 @@ 0x: The Protocol for Trading Tokens + + + + diff --git a/packages/dev-tools-pages/ts/components/ui/button.tsx b/packages/dev-tools-pages/ts/components/ui/button.tsx new file mode 100644 index 000000000..7b2e33141 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/ui/button.tsx @@ -0,0 +1,60 @@ +import { darken, saturate } from 'polished'; +import * as React from 'react'; +import styled from 'styled-components'; + +import { Container } from './container'; + +export interface ButtonProps { + backgroundColor?: string; + borderColor?: string; + width?: string; + padding?: string; + type?: string; + isDisabled?: boolean; + onClick?: (event: React.MouseEvent) => void; + className?: string; +} + +const PlainButton: React.StatelessComponent = ({ children, isDisabled, onClick, type, className }) => ( + +); + +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.theme[props.backgroundColor] : 'none')}; + border: ${props => (props.borderColor ? `1px solid ${props.theme[props.borderColor]}` : 'none')}; + &:hover { + background-color: ${props => + !props.isDisabled + ? darken(darkenOnHoverAmount, props.theme[props.backgroundColor || 'white']) + : ''} !important; + } + &:active { + background-color: ${props => + !props.isDisabled ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor || 'white']) : ''}; + } + &:disabled { + opacity: 0.5; + } + &:focus { + background-color: ${props => saturate(saturateOnFocusAmount, props.theme[props.backgroundColor || 'white'])}; + } +`; + +Button.defaultProps = { + backgroundColor: 'black', + 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 new file mode 100644 index 000000000..f2ae68b70 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/ui/container.tsx @@ -0,0 +1,55 @@ +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) => void; + overflowX?: 'scroll' | 'hidden' | 'auto' | 'visible'; +} + +export const Container: React.StatelessComponent = props => { + const { children, className, Tag, isHidden, id, onClick, ...style } = props; + const visibility = isHidden ? 'hidden' : undefined; + return ( + + {children} + + ); +}; + +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 new file mode 100644 index 000000000..8e314beae --- /dev/null +++ b/packages/dev-tools-pages/ts/components/ui/text.tsx @@ -0,0 +1,74 @@ +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) => void; + hoverColor?: string; + noWrap?: boolean; + display?: string; +} + +const PlainText: React.StatelessComponent = ({ children, className, onClick, Tag }) => ( + + {children} + +); + +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 = props => ; + +Title.defaultProps = { + Tag: 'h2', + fontSize: '20px', + fontWeight: 600, + fontColor: colors.black, +}; + +Title.displayName = 'Title'; diff --git a/packages/dev-tools-pages/ts/index.tsx b/packages/dev-tools-pages/ts/index.tsx index f4db2ea3c..4591c6d76 100644 --- a/packages/dev-tools-pages/ts/index.tsx +++ b/packages/dev-tools-pages/ts/index.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; import { render } from 'react-dom'; import { MetaTags } from 'ts/components/meta_tags'; -import { Landing } from 'ts/pages/landing/landing'; +import { Landing } from 'ts/pages/landing'; + +import 'basscss/css/basscss.css'; const DOCUMENT_TITLE = ''; const DOCUMENT_DESCRIPTION = ''; diff --git a/packages/dev-tools-pages/ts/pages/landing.tsx b/packages/dev-tools-pages/ts/pages/landing.tsx new file mode 100644 index 000000000..e89cfa665 --- /dev/null +++ b/packages/dev-tools-pages/ts/pages/landing.tsx @@ -0,0 +1,22 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +import { Button } from '../components/ui/button'; +import { Container } from '../components/ui/container'; + +interface LandingProps {} + +interface LandingState {} + +export class Landing extends React.Component { + constructor(props: LandingProps) { + super(props); + } + public render(): React.ReactNode { + return ( + + + + ); + } +} diff --git a/packages/dev-tools-pages/ts/pages/landing/landing.tsx b/packages/dev-tools-pages/ts/pages/landing/landing.tsx deleted file mode 100644 index a6cb89a7b..000000000 --- a/packages/dev-tools-pages/ts/pages/landing/landing.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; - -interface LandingProps {} - -interface LandingState {} - -export class Landing extends React.Component { - constructor(props: LandingProps) { - super(props); - } - public render(): React.ReactNode { - return
; - } -} diff --git a/packages/dev-tools-pages/tsconfig.json b/packages/dev-tools-pages/tsconfig.json index f5d4f62c2..6421cd459 100644 --- a/packages/dev-tools-pages/tsconfig.json +++ b/packages/dev-tools-pages/tsconfig.json @@ -5,13 +5,14 @@ "outDir": "./transpiled/", "jsx": "react", "baseUrl": "./", + "allowJs": true, + "strictNullChecks": false, + "noImplicitThis": false, // tsconfig.json at the monorepo root contains some options required for // project references which do not work for website. We override those // options here. "declaration": false, "declarationMap": false, - "noUnusedLocals": true, - "noUnusedParameters": true, "composite": false, "paths": { "*": ["node_modules/@types/*", "*"] diff --git a/packages/dev-tools-pages/webpack.config.js b/packages/dev-tools-pages/webpack.config.js index 1df41212f..6dfcf74e7 100644 --- a/packages/dev-tools-pages/webpack.config.js +++ b/packages/dev-tools-pages/webpack.config.js @@ -39,6 +39,15 @@ const config = { test: /\.md$/, use: 'raw-loader', }, + { + test: /\.less$/, + loader: 'style-loader!css-loader!less-loader', + exclude: /node_modules/, + }, + { + test: /\.css$/, + loaders: ['style-loader', 'css-loader'], + }, ], }, optimization: { diff --git a/yarn.lock b/yarn.lock index 26e984b99..67ec0cb45 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1316,6 +1316,13 @@ version "0.2.1" resolved "https://registry.npmjs.org/@types/solidity-parser-antlr/-/solidity-parser-antlr-0.2.1.tgz#29ff386773a72a06c8a9c40c666d2a1cea53c2ed" +"@types/styled-components@^4.0.0": + version "4.0.0" + resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.0.0.tgz#33b47071885003878a62689e0883aa2fc59f970a" + dependencies: + "@types/node" "*" + "@types/react" "*" + "@types/tmp@^0.0.33": version "0.0.33" resolved "https://registry.yarnpkg.com/@types/tmp/-/tmp-0.0.33.tgz#1073c4bc824754ae3d10cfab88ab0237ba964e4d" @@ -1599,10 +1606,6 @@ aes-js@^0.2.3: version "0.2.4" resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-0.2.4.tgz#94b881ab717286d015fa219e08fb66709dda5a3d" -aes-js@^3.1.1: - version "3.1.1" - resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-3.1.1.tgz#89fd1f94ae51b4c72d62466adc1a7323ff52f072" - ajv-errors@^1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.0.tgz#ecf021fa108fd17dfb5e6b383f2dd233e31ffc59" @@ -3003,7 +3006,7 @@ bs-logger@0.x: dependencies: fast-json-stable-stringify "^2.0.0" -bs58@=4.0.1, bs58@^4.0.0: +bs58@=4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/bs58/-/bs58-4.0.1.tgz#be161e76c354f6f788ae4071f63f34e8c4f0a42a" dependencies: @@ -3026,14 +3029,6 @@ bs58check@^1.0.8: bs58 "^3.1.0" create-hash "^1.1.0" -bs58check@^2.1.2: - version "2.1.2" - resolved "https://registry.yarnpkg.com/bs58check/-/bs58check-2.1.2.tgz#53b018291228d82a5aa08e7d796fdafda54aebfc" - dependencies: - bs58 "^4.0.0" - create-hash "^1.1.0" - safe-buffer "^5.1.2" - bser@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/bser/-/bser-2.0.0.tgz#9ac78d3ed5d915804fd87acb158bc797147a1719" @@ -5588,19 +5583,6 @@ ethereumjs-wallet@0.6.0: utf8 "^2.1.1" uuid "^2.0.1" -ethereumjs-wallet@~0.6.0: - version "0.6.2" - resolved "https://registry.yarnpkg.com/ethereumjs-wallet/-/ethereumjs-wallet-0.6.2.tgz#67244b6af3e8113b53d709124b25477b64aeccda" - dependencies: - aes-js "^3.1.1" - bs58check "^2.1.2" - ethereumjs-util "^5.2.0" - hdkey "^1.0.0" - safe-buffer "^5.1.2" - scrypt.js "^0.2.0" - utf8 "^3.0.0" - uuid "^3.3.2" - ethers@3.0.22: version "3.0.22" resolved "https://registry.yarnpkg.com/ethers/-/ethers-3.0.22.tgz#7fab1ea16521705837aa43c15831877b2716b436" @@ -6408,7 +6390,7 @@ ganache-core@0xProject/ganache-core#monorepo-dep: ethereumjs-tx "0xProject/ethereumjs-tx#fake-tx-include-signature-by-default" ethereumjs-util "^5.2.0" ethereumjs-vm "2.3.5" - ethereumjs-wallet "~0.6.0" + ethereumjs-wallet "0.6.0" fake-merkle-patricia-tree "~1.0.1" heap "~0.2.6" js-scrypt "^0.2.0" @@ -7095,14 +7077,6 @@ hdkey@^0.7.0, hdkey@^0.7.1: coinstring "^2.0.0" secp256k1 "^3.0.1" -hdkey@^1.0.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/hdkey/-/hdkey-1.1.0.tgz#e74e7b01d2c47f797fa65d1d839adb7a44639f29" - dependencies: - coinstring "^2.0.0" - safe-buffer "^5.1.1" - secp256k1 "^3.0.1" - he@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd" @@ -15197,10 +15171,6 @@ utf8@^2.1.1: version "2.1.2" resolved "https://registry.yarnpkg.com/utf8/-/utf8-2.1.2.tgz#1fa0d9270e9be850d9b05027f63519bf46457d96" -utf8@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/utf8/-/utf8-3.0.0.tgz#f052eed1364d696e769ef058b183df88c87f69d1" - util-deprecate@~1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" -- cgit From 7418932432de53300ba276da1ca9a33fb2f1d8b1 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 10 Oct 2018 22:31:18 +0200 Subject: Fix button and center --- packages/dev-tools-pages/ts/components/ui/button.tsx | 15 ++++++--------- packages/dev-tools-pages/ts/pages/landing.tsx | 7 ++++++- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/packages/dev-tools-pages/ts/components/ui/button.tsx b/packages/dev-tools-pages/ts/components/ui/button.tsx index 7b2e33141..9ffd87e91 100644 --- a/packages/dev-tools-pages/ts/components/ui/button.tsx +++ b/packages/dev-tools-pages/ts/components/ui/button.tsx @@ -31,28 +31,25 @@ export const Button = styled(PlainButton)` border-radius: 3px; outline: none; width: ${props => props.width}; - background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; - border: ${props => (props.borderColor ? `1px solid ${props.theme[props.borderColor]}` : 'none')}; + 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.theme[props.backgroundColor || 'white']) - : ''} !important; + !props.isDisabled ? darken(darkenOnHoverAmount, props.backgroundColor) : ''} !important; } &:active { - background-color: ${props => - !props.isDisabled ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor || 'white']) : ''}; + background-color: ${props => (!props.isDisabled ? darken(darkenOnActiveAmount, props.backgroundColor) : '')}; } &:disabled { opacity: 0.5; } &:focus { - background-color: ${props => saturate(saturateOnFocusAmount, props.theme[props.backgroundColor || 'white'])}; + background-color: ${props => saturate(saturateOnFocusAmount, props.backgroundColor)}; } `; Button.defaultProps = { - backgroundColor: 'black', + backgroundColor: 'red', width: 'auto', isDisabled: false, padding: '1em 2.2em', diff --git a/packages/dev-tools-pages/ts/pages/landing.tsx b/packages/dev-tools-pages/ts/pages/landing.tsx index e89cfa665..a70a9de46 100644 --- a/packages/dev-tools-pages/ts/pages/landing.tsx +++ b/packages/dev-tools-pages/ts/pages/landing.tsx @@ -3,6 +3,7 @@ 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 {} @@ -15,7 +16,11 @@ export class Landing extends React.Component { public render(): React.ReactNode { return ( - + + + ); } -- cgit From 19a657c38b9fbe49ad8f4605d238f113d384941a Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 10 Oct 2018 22:40:14 +0200 Subject: Improve README --- packages/dev-tools-pages/README.md | 39 ++++++++++++++++++++++++++------------ 1 file changed, 27 insertions(+), 12 deletions(-) diff --git a/packages/dev-tools-pages/README.md b/packages/dev-tools-pages/README.md index ce8edc103..b7bdf3bc3 100644 --- a/packages/dev-tools-pages/README.md +++ b/packages/dev-tools-pages/README.md @@ -2,23 +2,19 @@ This repository contains our dev tools pages. -## Contributing - -We strongly recommend that the community help us make improvements and determine the future direction of the protocol. To report bugs within this package, please create an issue in this repository. - -Please read our [contribution guidelines](../../CONTRIBUTING.md) before getting started. - ## Local Dev Setup -Requires Node version 6.9.5 or higher +Requires Node version 6.9.5 or higher & yarn v1.9.4 + +### 1. Install dependencies for monorepo: -### Install dependencies: +Make sure you install Yarn v1.9.4 (npm won't work!). We rely on our `yarn.lock` file and on Yarn's support for `workspaces` in our monorepo setup. ```bash yarn install ``` -### Initial setup +### 2. Initial setup To build this package and all other monorepo packages that it depends on, run the following from the monorepo root directory: @@ -26,14 +22,19 @@ To build this package and all other monorepo packages that it depends on, run th PKG=@0xproject/dev-tools-pages yarn build ``` -### Run dev server +Note: Ignore the `WARNING in asset size limit` and `WARNING in entrypoint size limit` warnings. + +### 3. Run dev server ```bash -PKG=@0xproject/dev-tools-pages yarn watch +cd packages/dev-tools-pages +yarn dev ``` Visit [http://localhost:3572/](http://localhost:3572/) in your browser. +The webpage will refresh when source code is changed. + ### Clean ```bash @@ -46,14 +47,28 @@ yarn clean yarn lint ``` +### Prettier + +Run from the monorepo root directory: + +``` +yarn prettier +``` + ### Resources ##### Toolkit * [Styled Components](https://www.styled-components.com/) -* [Rebass](https://rebassjs.org/) +* [BassCSS](http://basscss.com/) ##### Recommended Atom packages: * [atom-typescript](https://atom.io/packages/atom-typescript) * [linter-tslint](https://atom.io/packages/linter-tslint) + +## Contributing + +We strongly recommend that the community help us make improvements and determine the future direction of the protocol. To report bugs within this package, please create an issue in this repository. + +Please read our [contribution guidelines](../../CONTRIBUTING.md) before getting started. -- cgit From c8fd1ae05c3ad6f2dde78a7b0d0d23eadbcae6d1 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 10 Oct 2018 22:40:56 +0200 Subject: Add dev-tools-pages bundles to gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index dd022825d..1ae1b412d 100644 --- a/.gitignore +++ b/.gitignore @@ -72,6 +72,7 @@ TODO.md .vscode packages/website/public/bundle* +packages/dev-tools-pages/public/bundle* packages/react-docs/example/public/bundle* # server cli -- cgit From 2a95d3269d0df4afc777e2e97d3544f625f2f27c Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 10 Oct 2018 22:44:03 +0200 Subject: Add note about button --- packages/dev-tools-pages/ts/components/ui/button.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/dev-tools-pages/ts/components/ui/button.tsx b/packages/dev-tools-pages/ts/components/ui/button.tsx index 9ffd87e91..4fe1b3644 100644 --- a/packages/dev-tools-pages/ts/components/ui/button.tsx +++ b/packages/dev-tools-pages/ts/components/ui/button.tsx @@ -4,6 +4,10 @@ import styled from 'styled-components'; import { Container } from './container'; +/** + * 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; -- cgit From a300a451c85b664a9a5c9c813f1d516d1cd6ecba Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 10 Oct 2018 22:50:20 +0200 Subject: Explains tools we want them to use --- packages/dev-tools-pages/README.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/dev-tools-pages/README.md b/packages/dev-tools-pages/README.md index b7bdf3bc3..39fe70a25 100644 --- a/packages/dev-tools-pages/README.md +++ b/packages/dev-tools-pages/README.md @@ -35,6 +35,20 @@ Visit [http://localhost:3572/](http://localhost:3572/) in your browser. The webpage will refresh when source code is changed. +### 4. Code! + +There are some basic primitives we'd like you to use: + +1. `Stuff`: Use containers instead of divs,spans,etc... and use it's props instead of inline styles (e.g `style={{margin: 3}}` should be `margin="3px"` + +2. `Look ma, text!`: Use text components whenever rendering text. It has props for manipulating texts, so again no in-line styles. Use `fontColor="red"`, not `style={{color: 'red'}}`. + +3. Styled-components: See the `ui/button.tsx` file for an example of how to use these. + +4. BassCss: This library gives you access to a bunch of [classes](http://basscss.com/) that apply styles in a browser-compatible way, has affordances for responsiveness and alleviates the need for inline styles or LESS/CSS files. + +With the above 4 tools and following the React paradigm, you shouldn't need CSS/LESS files. IF there are special occasions where you do, these is a `all.less` file, but this is a solution of last resort. Use it sparingly. + ### Clean ```bash -- cgit From e4351789d20df12ab8d70021acb5674bb59cae0c Mon Sep 17 00:00:00 2001 From: Leonid Logvinov Date: Thu, 11 Oct 2018 12:23:19 +0200 Subject: Fix linter error --- packages/dev-tools-pages/ts/components/ui/button.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/dev-tools-pages/ts/components/ui/button.tsx b/packages/dev-tools-pages/ts/components/ui/button.tsx index 4fe1b3644..754eca40e 100644 --- a/packages/dev-tools-pages/ts/components/ui/button.tsx +++ b/packages/dev-tools-pages/ts/components/ui/button.tsx @@ -2,8 +2,6 @@ import { darken, saturate } from 'polished'; import * as React from 'react'; import styled from 'styled-components'; -import { Container } from './container'; - /** * AN EXAMPLE OF HOW TO CREATE A STYLED COMPONENT USING STYLED-COMPONENTS * SEE: https://www.styled-components.com/docs/basics#coming-from-css -- cgit