Initial project scaffolding

15 files changed, 339 insertions, 0 deletions

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
--- /dev/null
+++ b/packages/dev-tools-pages/less/all.less
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
--- /dev/null
+++ b/packages/dev-tools-pages/public/images/favicon/favicon-2-16x16.png
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
--- /dev/null
+++ b/packages/dev-tools-pages/public/images/favicon/favicon-2-32x32.png
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
--- /dev/null
+++ b/packages/dev-tools-pages/public/images/favicon/favicon.ico
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 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="0x" />
+    <meta property="og:description" content="" />
+    <meta property="og:image" content="/images/og_image.png" />
+    <title>0x: The Protocol for Trading Tokens</title>
+    <link rel="icon" type="image/png" href="/images/favicon/favicon-2-32x32.png" sizes="32x32" />
+    <link rel="icon" type="image/png" href="/images/favicon/favicon-2-16x16.png" sizes="16x16" />
+</head>
+
+<body style="margin: 0px; min-width: 355px;">
+    <div id="app"></div>
+    <script type="text/javascript" crossorigin="anonymous" src="/bundle.js" charset="utf-8"></script>
+</body>
+
+</html>
\ 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<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/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(
+    <div>
+        <MetaTags title={DOCUMENT_TITLE} description={DOCUMENT_DESCRIPTION} />
+        <Landing />
+    </div>,
+    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<LandingProps, LandingState> {
+    constructor(props: LandingProps) {
+        super(props);
+    }
+    public render(): React.ReactNode {
+        return <div id="landing" className="clearfix" />;
+    }
+}
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<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;
+    },
+};
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;
+};