Merge 0e2eb1f into 8ff2ea0

FormidableLabs · Mar 15, 2016 · 56fab92 · 56fab92
2 parents 8ff2ea0 + 0e2eb1f
commit 56fab92
Show file tree

Hide file tree

Showing 22 changed files with 1,443 additions and 8 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1,3 +1,10 @@
 {
-  "extends": "./node_modules/builder-radium-component/config/eslint/.eslintrc-client"
+  "extends": "./node_modules/builder-radium-component/config/eslint/.eslintrc-client-test",
+  "plugins": [
+   "flow-vars"
+  ],
+  "rules": {
+    "flow-vars/define-flow-type": 1,
+    "flow-vars/use-flow-type": 1
+  }
 }
diff --git a/.flowconfig b/.flowconfig
@@ -0,0 +1,33 @@
+[ignore]
+.*/dist/.*
+.*/lib/.*
+.*/node_modules/.*/node_modules/.*
+.*/node_modules/babel-core/.*
+.*/node_modules/babel-register/.*
+.*/node_modules/babel-loader/.*
+.*/node_modules/builder-radium-component/.*
+.*/node_modules/config-chain/.*
+.*/node_modules/flow-bin/.*
+.*/node_modules/inline-style-prefixer/.*
+.*/node_modules/mkdirp/.*
+.*/node_modules/nodemon/.*
+.*/node_modules/npmconf/.*
+.*/node_modules/radium/modules/.*
+.*/node_modules/react-hot-loader/.*
+.*/node_modules/rimraf/.*
+.*/node_modules/watchify/.*
+.*/node_modules/webpack-dev-server/.*
+.*/node_modules/webpack/.*
+.*/node_modules/y18n/.*
+
+[include]
+src
+node_modules/autolayout/src
+
+[libs]
+interfaces
+
+[options]
+esproposal.class_static_fields=enable
+esproposal.class_instance_fields=enable
+suppress_comment= \\(.\\|\n\\)*\\$FlowIssue
diff --git a/demo/app.jsx b/demo/app.jsx
@@ -0,0 +1,69 @@
+/* eslint-env browser */
+/* eslint-disable new-cap,no-magic-numbers */
+import React, { Component, PropTypes } from "react";
+import ReactDOM from "react-dom";
+import AutoLayout, { View, Subview, AutoDOM, constrain } from "../src/index.js";
+
+class Rectangle extends Component {
+  static propTypes = {
+    layout: PropTypes.shape({
+      top: PropTypes.number,
+      right: PropTypes.number,
+      bottom: PropTypes.number,
+      left: PropTypes.number
+    })
+  };
+
+  render() {
+    return (
+      <div style={{
+        position: "absolute",
+        top: this.props.layout.top || 0,
+        right: this.props.layout.right || 0,
+        bottom: this.props.layout.bottom || 0,
+        left: this.props.layout.left || 0
+      }}
+      >
+        <p>What time is it?</p>
+      </div>
+    );
+  }
+}
+const SubRectangle = Subview(Rectangle);
+
+class App extends Component {
+  render() {
+    return (
+      <AutoLayout>
+        <View
+          name="main"
+          container="div"
+          width={400}
+          height={250}
+        >
+          <AutoDOM.div
+            name="autobot"
+            intrinsicWidth={100}
+            intrinsicHeight={100}
+            constraints = {[
+              constrain().subview("autobot").centerX.to.equal.superview.centerX
+            ]}
+          >
+            <p>demo</p>
+            <p>time!</p>
+          </AutoDOM.div>
+          <SubRectangle
+            name="rectangle"
+            intrinsicWidth={20}
+            intrinsicHeight={20}
+            constraints={[
+              constrain().subview("rectangle").centerX.to.equal.superview.centerX
+            ]}
+          />
+        </View>
+      </AutoLayout>
+    );
+  }
+}
+
+ReactDOM.render(<App />, document.getElementById("content"));
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html>
+<head>
+  <!--[if lt IE 9]>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.js"></script>
+  <![endif]-->
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <title>Demo</title>
+  <meta name="description" content="">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <link rel="stylesheet" type="text/css"
+       href="//cloud.typography.com/6367052/709306/css/fonts.css"/>
+  <style type="text/css">
+    * {
+      box-sizing: border-box;
+    }
+    .tile {
+      display: block;
+      float: left;
+      width: 100px;
+      height: 100px;
+      margin: 20px;
+    }
+    .tile img {
+      display: block;
+      width: 100px;
+      height: 100px;
+    }
+    .demo {
+      width: 80%;
+      margin: auto;
+      position: relative;
+    }
+  </style>
+</head>
+<body>
+  <!--[if lt IE 8]>
+    <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
+  <![endif]-->
+  <div id="content"></div>
+  <!--[if lt IE 9]>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.15/es5-shim.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.15/es5-sham.min.js"></script>
+  <![endif]-->
+  <script src="http://localhost:3000/webpack-dev-server.js"></script>
+  <script src="assets/main.js"></script>
+  <script>
+    // Sanity-check the component loaded...
+    setTimeout(function () {
+      var content = document.querySelector("#content");
+      content.innerHTML = content.innerHTML ||
+        "If you can see this, something is broken (or JS is not enabled)!";
+    }, 500);
+  </script>
+</body>
+</html>
diff --git a/interfaces/autolayout.js b/interfaces/autolayout.js
@@ -0,0 +1,60 @@
+declare module "autolayout" {
+  declare type Relation =
+    | "equ"
+    | "leq"
+    | "geq"
+
+  declare type Priority =
+    | 1000
+    | 750
+    | 250
+
+  declare type Constraint = {
+    view1?: ?string,
+    attr1?: ?string,
+    relation?: ?Relation,
+    view2?: ?string,
+    attr2?: ?string,
+    constant?: ?number,
+    multiplier?: ?number,
+    priority?: ?Priority
+  };
+
+  declare class SubView {
+    name: string;
+    left: number;
+    right: number;
+    width: number;
+    height: number;
+    intrinsicWidth: number;
+    intrinsicHeight: number;
+    top: number;
+    bottom: number;
+    centerX: number;
+    centerY: number;
+    zIndex: number;
+    type: string;
+
+    getValue(attr: string): number;
+  }
+
+  declare class View {
+    width: number;
+    height: number;
+    fittingWidth: number;
+    fittingHeight: number;
+    subViews: { [key: string]: SubView };
+
+    constructor(options: ?{
+      width?: number,
+      height?: number,
+      spacing?: number | Array<number>,
+      constraints?: Array<Constraint>
+    }): void;
+
+    setSize(width: number, height: number): View;
+    setSpacing(spacing: number | Array<number>): View;
+    addConstraint(constraint: Constraint): View;
+    addConstraints(constraints: Array<Constraint>): View;
+  }
+}
diff --git a/interfaces/worker.js b/interfaces/worker.js
@@ -0,0 +1,16 @@
+type Cloneable = Object | number | string | Array<Cloneable>;
+
+declare class WorkerEvent extends Event {
+  data: Cloneable;
+}
+
+type WorkerEventHandler = (event: WorkerEvent) => mixed;
+
+declare class Worker {
+  constructor(URL: ?string): void;
+  onmessage: WorkerEventHandler;
+  postMessage(messsage: Cloneable): void;
+  terminate(): void;
+}
+
+declare function postMessage(message: Object): void;
diff --git a/package.json b/package.json
@@ -16,15 +16,20 @@
     "postinstall": "cd lib || builder run npm:postinstall || (echo 'POSTINSTALL FAILED: If using npm v2, please upgrade to npm v3. See bug https://github.com/FormidableLabs/builder/issues/35' && exit 1)",
     "preversion": "builder run npm:preversion",
     "version": "builder run npm:version",
-    "test": "builder run npm:test"
+    "test": "builder run npm:test",
+    "lint": "builder concurrent lint-server lint-client lint-client-test flow",
+    "flow": "node -e \"process.exit(process.platform === 'win32' ? 0 : 1)\" || flow check"
   },
   "dependencies": {
+    "autolayout": "^0.5.3",
     "builder": "^2.8.0",
     "builder-radium-component": "^1.0.1",
     "coveralls": "^2.11.8",
+    "lodash.isplainobject": "^4.0.3",
     "operative": "^0.4.4",
     "react": "^0.14.7",
-    "react-dom": "^0.14.7"
+    "react-dom": "^0.14.7",
+    "worker-loader": "^0.7.0"
   },
   "devDependencies": {
     "babel-polyfill": "^6.6.1",
@@ -33,6 +38,10 @@
     "builder": "^2.8.0",
     "builder-radium-component-dev": "^1.0.1",
     "chai": "^3.2.0",
+    "enzyme": "^2.1.0",
+    "eslint-plugin-flow-vars": "^0.2.1",
+    "exports-loader": "^0.6.3",
+    "flow-bin": "^0.22.1",
     "mocha": "^2.3.3",
     "react": "^0.14.6",
     "react-addons-test-utils": "^0.14.7",

diff --git a/src/autodom.js b/src/autodom.js
@@ -0,0 +1,8 @@
+/* eslint-disable new-cap */
+import { DOM as DOMFactories } from "react";
+import Subview from "./subview.js";
+
+export default Object.keys(DOMFactories)
+  .reduce((acc, key) => {
+    return {...acc, [key]: Subview(key)};
+  }, {});
diff --git a/src/autolayout.js b/src/autolayout.js
@@ -0,0 +1,32 @@
+import React, { Component, PropTypes } from "react";
+import LayoutClient from "./layout-client";
+
+export default class AutoLayout extends Component {
+  constructor(props) {
+    super(props);
+    this.client = new LayoutClient();
+  }
+
+  componentWillUnmount() {
+    this.client.terminate();
+  }
+
+  render() {
+    return <div>{this.props.children}</div>;
+  }
+
+  getChildContext() {
+    return {
+      client: this.client
+    };
+  }
+
+  static childContextTypes = {
+    client: PropTypes.instanceOf(LayoutClient)
+  };
+
+  static propTypes = {
+    children: PropTypes.node
+  };
+}
+