feat: simple constraint resolver

public/index.html

@@ -10,6 +10,10 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto+Mono:300&display=swap"
+      rel="stylesheet"
+    />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/App.tsx

@@ -1,26 +1,39 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import "./App.css";
+import { simpleBlock } from "./constraints/example";
+import { createLayoutComponent } from "./constraints/generator";
+
+const codeStyle: React.CSSProperties = {
+  width: "50vw",
+  height: "100vh",
+  padding: "10px",
+  boxSizing: "border-box",
+  position: "absolute",
+  whiteSpace: "pre-wrap"
+};
+
+const viewStyle: React.CSSProperties = {
+  width: "50vw",
+  height: "100vh",
+  padding: "10px",
+  boxSizing: "border-box",
+  position: "absolute",
+  left: "50%"
+};
+
+const Comp = createLayoutComponent(simpleBlock);
 
 const App: React.FC = () => {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <>
+      <div style={codeStyle} contentEditable>
+        {JSON.stringify(simpleBlock, null, 2)}
+      </div>
+      <div style={viewStyle}>
+        <Comp width={400} height={400} Block={<p>Hola</p>} />
+      </div>
+    </>
   );
-}
+};
 
 export default App;

src/constraints/definition.ts

@@ -0,0 +1,19 @@
+export type ConstraintSize = number;
+
+export type ConstraintSide = "top" | "right" | "bottom" | "left";
+
+export interface ConstraintDefinition {
+  component: string;
+  side: ConstraintSide;
+  distance: ConstraintSize;
+}
+
+export interface ConstraintComponent {
+  constraints: ConstraintDefinition[];
+  width?: ConstraintSize;
+  height?: ConstraintSize;
+}
+
+export interface ConstraintLayout {
+  [key: string]: ConstraintComponent;
+}

src/constraints/example.ts

@@ -0,0 +1,28 @@
+import { ConstraintLayout } from "./definition";
+
+export const simpleBlock: ConstraintLayout = {
+  Block: {
+    constraints: [
+      {
+        component: "parent",
+        side: "top",
+        distance: 32
+      },
+      {
+        component: "parent",
+        side: "right",
+        distance: 32
+      },
+      {
+        component: "parent",
+        side: "bottom",
+        distance: 32
+      },
+      {
+        component: "parent",
+        side: "left",
+        distance: 32
+      }
+    ]
+  }
+};

src/constraints/generator.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import { ConstraintLayout, ConstraintComponent } from "./definition";
+
+export interface LayoutComponent {
+  width: number;
+  height: number;
+  [key: string]: React.ReactNode;
+}
+
+enum Side {
+  top = "top",
+  right = "right",
+  bottom = "bottom",
+  left = "left"
+}
+
+class LayoutInstance {
+  private layoutInstanceList: LayoutInstance[];
+  private name: string;
+  private constraint: ConstraintComponent;
+  private resolvedPositions: { [key in Side]?: number } = {};
+
+  constructor(
+    layoutInstanceList: LayoutInstance[],
+    name: string,
+    constraint: ConstraintComponent
+  ) {
+    this.layoutInstanceList = layoutInstanceList;
+    this.name = name;
+    this.constraint = constraint;
+  }
+
+  isThis = (name: string) => name === this.name;
+
+  resolve = (side: Side, position: number) =>
+    (this.resolvedPositions[side] = position);
+
+  isResolved = () => false;
+
+  toNode = () => (
+    <div
+      style={{
+        position: "absolute",
+        background: "#fafafa33",
+        width: this.constraint.width,
+        height: this.constraint.height,
+        ...this.resolvedPositions
+      }}
+    />
+  );
+}
+
+export const createLayoutComponent = (
+  options: ConstraintLayout
+): React.FunctionComponent<LayoutComponent> => ({
+  width,
+  height,
+  ...components
+}) => {
+  const layoutInstanceList: LayoutInstance[] = [];
+  const parent = new LayoutInstance(layoutInstanceList, "parent", {
+    height,
+    width,
+    constraints: []
+  });
+
+  parent.resolve(Side.top, 0);
+  parent.resolve(Side.right, width);
+  parent.resolve(Side.bottom, height);
+  parent.resolve(Side.left, 0);
+
+  layoutInstanceList.push(parent);
+
+  for (const [name, constraint] of Object.entries(options)) {
+    layoutInstanceList.push(
+      new LayoutInstance(layoutInstanceList, name, constraint)
+    );
+  }
+
+  return <div>{layoutInstanceList.map(instance => instance.toNode())}</div>;
+};

src/index.css

@@ -1,13 +1,11 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: "Roboto Mono", monospace;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: darkviolet;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+* {
+  color: white;
 }

src/index.tsx

@@ -1,12 +1,6 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
 
-ReactDOM.render(<App />, document.getElementById('root'));
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+ReactDOM.render(<App />, document.getElementById("root"));