Initial commit

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": ["es2015", "stage-0", "react"],
+  "plugins": [
+  		["css-modules-transform", { "generateScopedName": "[name]__[local]___[hash:base64:5]" }]
+  ]
+}

.eslintrc

@@ -0,0 +1,21 @@
+{
+  "ecmaFeatures": {
+    "jsx": true,
+    "modules": true
+  },
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "parser": "babel-eslint",
+  "rules": {
+    "quotes": [2, "single"],
+    "strict": [2, "never"],
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "react/react-in-jsx-scope": 2
+  },
+  "plugins": [
+    "react"
+  ]
+}

.gitignore

@@ -0,0 +1,6 @@
+node_modules
+npm-debug.log
+.DS_Store
+dist
+.idea
+lib

.jshintrc

@@ -0,0 +1,6 @@
+{
+  "node": true,
+  "browser": true,
+  "esnext": true,
+  "newcap": false
+}

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Fatih Erikli
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,3 @@
+react-designer
+=====================
+

examples/App.js

@@ -0,0 +1,161 @@
+import React, {Component} from 'react';
+import ReactDOM from 'react-dom';
+import ReactDOMServer from 'react-dom/server';
+import {Rect, Vector, Text} from '../src/objects';
+import classes from './App.module'
+
+import MondrianExample from './components/Mondrian';
+import MalevichExample from './components/Malevich';
+import SwissStyleExample from './components/SwissStyle';
+import MockupDesignerExample from './components/MockupDesigner';
+import TshirtDesignerExample from './components/TshirtDesigner';
+
+
+export default class App extends Component {
+  render() {
+    return (
+      <div className={classes.container}>
+        <div className={classes.landing}>
+          <h1>react-designer</h1>
+          <h2>Configurable design component for react</h2>
+          <ul className={classes.nav}>
+            <li className={classes.current}><a href="#">usage</a></li>
+            <li><a href="#">examples</a></li>
+            <li><a href="#">docs</a></li>
+            <li><a href="#">show on github</a></li>
+          </ul>
+        </div>
+        <div className={classes.usage}>
+          <h4 className={classes.mainTitle}>Usage</h4>
+          <p>Give your objects and object types, then listen the changes. We used builtin 
+          object types in this example.</p>
+          <pre className={classes.code}>{`
+import Designer, {Text, Rectangle} from 'react-designer';
+
+class App() {
+  state = {
+    objects: [
+      {type: "text", x: 10, y: 20, text: "Hello!", fill: "red"},
+      {type: "rect", x: 50, y: 70, fill: "red"}
+    ]
+  }
+
+  render() {
+    return (
+      <Designer width={250} height={350}
+        objectTypes={{
+          'text': Text,
+          'rect': Rect
+        }}
+        onUpdate={(objects) => this.setState({objects})}
+        objects={this.state.objects} />
+    )
+  }
+}
+          `}</pre>
+        </div>
+        <h4 className={classes.mainTitle}>Examples</h4>
+        <div className={classes.example}>
+          <div className={classes.info}>
+            <h3>Mondrian</h3>
+            <p>Default configuration with initial rectangle objects set on the internal state of
+            container component.</p>
+            <p>Enabled all default drawing tool set and panels.</p>
+            <p>
+              <a href="#">Show example on github</a>
+            </p>
+          </div>
+          <div className={classes.preview}>
+            <MondrianExample />
+          </div>
+        </div>
+
+        <div className={classes.example}>
+          <div className={classes.info}>
+            <h3>Malevich</h3>
+            <p>Default configuration with initial shapes (bezier curves) set on the internal state of
+              container component.</p>
+
+            <p>You can double-click to edit shapes.</p>
+            <p>
+              <a href="#">Show example on github</a>
+            </p>
+          </div>
+          <div className={classes.preview}>
+            <MalevichExample />
+          </div>
+        </div>
+
+        <div className={classes.example}>
+          <div className={classes.info}>
+            <h3>The Swiss Style</h3>
+            <p>Default configuration with initial text and shapes with blending modes on the internal state of
+              container component.</p>
+
+            <p>
+              <a href="#">Show example on github</a>
+            </p>
+          </div>
+          <div className={classes.preview}>
+            <SwissStyleExample />
+          </div>
+        </div>
+
+        <div className={classes.example}>
+          <div className={classes.info}>
+            <h3>Mockup Designer</h3>
+            <p>An extended toolset for very simple mockup designing tool. All of the toolset are
+              pure react components.</p>
+
+            <p>Custom components on this demo:</p>
+            <ul>
+              <li><a href="#">Button</a></li>
+              <li><a href="#">Input</a></li>
+              <li><a href="#">H1</a></li>
+              <li><a href="#">Link</a></li>
+              <li><a href="#">Fieldset</a></li>
+            </ul>
+
+            <p>You can extend builtin components, or write entirely different objects</p>
+
+            <p>
+              <a href="#">Show example on github</a>
+            </p>
+          </div>
+          <div className={classes.preview}>
+            <MockupDesignerExample />
+          </div>
+        </div>
+
+        <div className={classes.example}>
+          <div className={classes.info}>
+            <h3>Tshirt Designer</h3>
+            <p>Default toolset with customized designer canvas for building simple tshirt design tool.</p>
+
+            <p>Price calculation is a simple pure function that receives object list and returns total price.</p>
+
+            <p>In this demo, price is relative to covered areas of objects on the canvas.
+              For example price is instantly changing while you resizing objects or typing a text.</p>
+
+            <p>
+              <a href="#">Show example on github</a> <br />
+              <a href="#">Show calculatePrice() function</a>
+            </p>
+          </div>
+          <div className={classes.preview}>
+            <TshirtDesignerExample />
+          </div>
+        </div>
+        <div className={classes.footer}>
+          <div className={classes.footerLeft}>
+            <a href="http://fatiherikli.com">Fatih Erikli</a>, 2016 <br />
+            MIT Licensed
+          </div>
+          <div className={classes.footerRight}>
+            Ask me anything: <a href="https://twitter.com/fthrkl">@fthrkl</a>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

examples/App.module.css

@@ -0,0 +1,144 @@
+@import url(https://fonts.googleapis.com/css?family=Lora:400,400italic,700);
+
+.example {
+	margin-bottom: 80px;
+	border-bottom: 1px solid black;
+	overflow: hidden;
+}
+
+.example h3 {
+	color: gray;
+	margin: 10px 0 15px;
+	font-weight: normal;
+	float: left;
+	font-size: 2.5em;
+}
+
+.example h3 + p {
+	clear: both;
+}
+
+.example h3 span {
+	color: #c1c1c1;
+}
+
+.example a {
+	color: #39393a;
+}
+
+.info {
+	width: 650px;
+	padding: 20px;
+	color: gray;
+	font-size: 0.9em;
+	line-height: 1.7em;
+}
+
+.preview {
+	float: left;
+	margin-left: 50px;
+	margin-top: 20px;
+	margin-bottom: 110px;
+}
+
+.container {
+	margin: 50px auto auto;
+	width: 650px;
+	font-family: "Lora", helvetica, arial, sans-serif;
+}
+
+.landing {
+	margin: 150px 0 70px;
+	font-family: "Lora", helvetica, arial, sans-serif;
+}
+
+.landing h1, .landing h2 {
+	font-weight: 300;
+	text-align: center;
+}
+
+.landing h1 {
+	font-size: 4em;
+	font-weight: bold;
+	color: black;
+	font-style: italic;
+}
+
+.landing h2 {
+	margin-top: -40px;
+	color: #bababa;
+	font-style: italic;
+	font-size: 1.6em;
+}
+
+.nav {
+	border-top: 1px solid black;
+	border-bottom: 1px solid black;
+	text-align: center;
+	margin-top: 80px;
+	padding-bottom: 5px;
+}
+
+.nav li {
+	margin-top: 5px;
+	display: inline-block;
+	padding: 5px;
+}
+
+.nav li a {
+	display: inline-block;
+	padding: 5px;
+	color: black;
+	font-size: 1.2em;
+	text-decoration: none;
+	margin-left: 10px;
+	margin-right: 10px;
+}
+
+.code {
+	font-family: Monaco;
+	display: block;
+	padding: 40px;
+	background: #f6f6f6;
+	color: #434746;
+	line-height: 1.5em;
+	font-size: 0.9em;
+}
+
+.current a {
+	border-bottom: 2px solid #e1e1e1;
+	line-height: 0.3em;
+}
+
+.footer {
+	padding: 0 50px 120px;
+	margin-top: -30px;
+	font-size: 1.3em;
+	line-height: 1.5em;
+	overflow: hidden;
+	color: #424242;
+}
+
+.footer a {
+	color: #424242;
+	text-decoration: none;
+}
+
+.footerLeft {
+	float: left;
+}
+
+.footerRight {
+	float: right;
+}
+
+.mainTitle {
+	text-align: center;
+	font-size: 1.4em;
+}
+
+.usage {
+	margin-top: -20px;
+	margin-bottom: 50px;
+	line-height: 1.6em;
+}