Proof of concept working

client/splatsheet/sheetRenderer/parts/box/box.jsx

@@ -0,0 +1,50 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+
+var Box = React.createClass({
+	getDefaultProps: function() {
+		return {
+			data : {},
+			onChange : function(){},
+			defaultValue : {},
+
+			id : 'box',
+		};
+	},
+
+	//Maybe remove
+	id : function(){
+		return _.snakeCase(this.props.label) || this.props.id;
+	},
+
+
+	data : function(){
+		return this.props.data[this.id()] || this.props.defaultValue;
+	},
+
+
+	handleChange : function(newData){
+		this.props.onChange({
+			[this.id()] : _.extend(this.data(), newData)
+		});
+	},
+
+	renderChildren : function(){
+		return React.Children.map(this.props.children, (child)=>{
+			if(!React.isValidElement(child)) return null;
+			return React.cloneElement(child, {
+				onChange : this.handleChange,
+				data : this.data()
+			})
+		})
+	},
+
+	render : function(){
+		return <div className={cx('box', this.props.className)}>
+			{this.renderChildren()}
+		</div>
+	}
+});
+
+module.exports = Box;

client/splatsheet/sheetRenderer/parts/box/box.less

@@ -0,0 +1,3 @@
+.COM{
+
+}

client/splatsheet/sheetRenderer/parts/index.js

@@ -0,0 +1,4 @@
+module.exports = {
+	TextInput : require('./textInput/textInput.jsx'),
+	PlayerInfo : require('./playerInfo/playerInfo.jsx'),
+}

client/splatsheet/sheetRenderer/parts/playerInfo/playerInfo.jsx

@@ -0,0 +1,67 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+
+var TextInput = require('../textInput/textInput.jsx');
+
+var Box = require('../box/box.jsx');
+
+var PlayerInfo = React.createClass({
+	getDefaultProps: function() {
+		return {
+			data : {},
+			onChange : function(){},
+
+			id : 'playerInfo',
+		};
+	},
+/*
+	id : function(){
+		return _.snakeCase(this.props.label) || this.props.id;
+	},
+	data : function(){
+		return this.props.data[this.id()] || this.props.defaultValue;
+	},
+
+
+	handleChange : function(newData){
+		this.props.onChange({
+			[this.id()] : _.extend(this.data(), newData)
+		});
+	},
+
+	renderChildren : function(){
+		return React.Children.map(this.props.children, (child)=>{
+			return React.cloneElement(child, {
+				onChange : this.handleChange,
+				data : this.data()
+			})
+		})
+	},
+*/
+	render : function(){
+		return <Box className='playerInfo' {...this.props}>
+			<TextInput id='name' label="Name" />
+			<TextInput id='class' label="Class" />
+			<TextInput id='race' label="Race" />
+
+			{this.props.children}
+		</Box>
+	}
+
+	/*{this.props.children}*/
+
+/*
+	render : function(){
+		return <div className='playerInfo'>
+			<TextInput id='name' label="Name" onChange={this.handleChange} data={this.data()} />
+			<TextInput id='class' label="Class" onChange={this.handleChange} data={this.data()} />
+			<TextInput id='race' label="Race" onChange={this.handleChange} data={this.data()} />
+
+			{this.renderChildren()}
+		</div>
+	}
+	*/
+});
+
+module.exports = PlayerInfo;

client/splatsheet/sheetRenderer/parts/playerInfo/playerInfo.less

@@ -0,0 +1,3 @@
+.playerInfo{
+	margin-bottom: 20px;
+}

client/splatsheet/sheetRenderer/parts/textInput/textInput.jsx

@@ -0,0 +1,45 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+
+var TextInput = React.createClass({
+	getDefaultProps: function() {
+		return {
+			data : {},
+			defaultValue : '',
+			onChange : function(){},
+
+
+			id : 'textInput',
+			label : '',
+
+		};
+	},
+
+	id : function(){
+		return _.snakeCase(this.props.label) || this.props.id;
+	},
+	data : function(){
+		return this.props.data[this.id()] || this.props.defaultValue;
+	},
+
+	handleChange : function(e){
+		this.props.onChange({
+			[this.id()] : e.target.value
+		});
+	},
+
+	renderLabel : function(){
+		if(!this.props.label) return;
+		return <label htmlFor={this.id()}>{this.props.label}</label>
+	},
+
+	render : function(){
+		return <div className='textInput'>
+			{this.renderLabel()}
+			<input id={this.id()} type='text' onChange={this.handleChange} value={this.data()} />
+		</div>
+	}
+});
+
+module.exports = TextInput;

client/splatsheet/sheetRenderer/parts/textInput/textInput.less

@@ -0,0 +1,6 @@
+.textInput{
+	label{
+		display: inline-block;
+		width : 50px;
+	}
+}

client/splatsheet/sheetRenderer/sheetRenderer.jsx

@@ -2,7 +2,10 @@ var React = require('react');
 var _ = require('lodash');
 var cx = require('classnames');
 
-var babel = require('babel-core')
+var jsx2json = require('jsx-parser');
+
+var Parts = require('./parts');
+
 
 var SheetRenderer = React.createClass({
 	getDefaultProps: function() {
@@ -13,29 +16,57 @@ var SheetRenderer = React.createClass({
 		};
 	},
 
-	componentWillReceiveProps: function(nextProps) {
-
+/*
+	augmentProps : function(props, key){
+		return _.extend({}, props, {
+			key : key,
+			data : this.props.characterData,
+			onChange :
+		})
 	},
+*/
+	renderElement : function(node, key){
+		return React.createElement(
+			(Parts[node.tag] ? Parts[node.tag] : node.tag),
 
+			{key : key, ...node.props},
 
+			//this.augmentProps(node.props, key),
+			...this.renderChildren(node.children))
+	},
+	renderChildren : function(nodes){
+		return _.map(nodes, (node, index)=>{
+			if(_.isString(node)) return node;
+			return this.renderElement(node, index);
+		})
+	},
 	renderSheet : function(){
-//		var render = jsx.transform(this.props.code);
+
+		try{
+			var nodes = jsx2json(this.props.code);
+
+			nodes = _.map(nodes, (node)=>{
+				node.props.data = this.props.characterData;
+				node.props.onChange = (newData)=>{
+					this.props.onChange(_.extend(this.props.characterData, newData));
+				}
+				return node
+			})
 
 
-
-
-
-//		return eval(render);
-
+			return this.renderChildren(nodes);
+		}catch(e){
+			return <div>Error bruh {e.toString()}</div>
+		}
 	},
 
+
+
+
 	render : function(){
+		return <div className='sheetRenderer'>
 
-		console.log(babel);
-
-
-		return <div className='SheetRenderer'>
-
+			<h2>Character Sheet</h2>
 
 			<div className='sheetContainer' ref='sheetContainer'>
 				{this.renderSheet()}
@@ -46,4 +77,15 @@ var SheetRenderer = React.createClass({
 	}
 });
 
+
 module.exports = SheetRenderer;
+
+
+/*
+
+<Temp text="cool">yo test  <a href="google.com">link</a> </Temp>
+
+
+
+
+*/

client/splatsheet/sheetRenderer/sheetRenderer.less

@@ -1,3 +1,11 @@
-.COM{
+.sheetRenderer{
+
+	padding-right : 10px;
+
+
+	.sheetContainer{
+		background-color: white;
+		padding : 20px;
+	}
 
 }