Initial commit

troutowicz · Mar 10, 2016 · 0c07215 · 0c07215
commit 0c07215
Show file tree

Hide file tree

Showing 9 changed files with 137 additions and 0 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,10 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+public/*
+.DS_Store
diff --git a/components/button.js b/components/button.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default ({ disabled, onClick, value }) => (
+  <input
+    type='button'
+    disabled={disabled}
+    onClick={onClick}
+    value={value}
+  />
+)
diff --git a/components/container.js b/components/container.js
@@ -0,0 +1,29 @@
+import React from 'react';
+
+import Button from './button';
+import Text from './text';
+
+export default {
+  state: {
+    showText: false,
+    clickable: false
+  },
+
+  render () {
+    const { clickable, showText } = this.state;
+    const { text } = this.props;
+
+    return (
+      <div>
+        <Button
+          disabled={!clickable}
+          onClick={() => this.onClick && this.onClick()}
+          value='click me'
+        />
+        <Text
+          value={showText && text}
+        />
+      </div>
+    );
+  }
+};
diff --git a/components/text.js b/components/text.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default ({ value }) => (
+  <div>{value}</div>
+);
diff --git a/index.js b/index.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import reactStamp from 'react-stamp'
+
+import container from './components/container';
+import buttonBehavior from './mixins/buttonBehavior';
+
+const Component = reactStamp(React).compose(
+  container,
+  buttonBehavior
+);
+
+ReactDOM.render(
+  <Component text='behavior driven composition' />,
+  document.getElementById('root')
+);
diff --git a/mixins/buttonBehavior.js b/mixins/buttonBehavior.js
@@ -0,0 +1,11 @@
+export default {
+  componentWillMount () {
+    this.state.clickable = true;
+  },
+
+  onClick () {
+    this.setState({
+      showText: !this.state.showText
+    });
+  },
+};
diff --git a/package.json b/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "bdc-example",
+  "version": "0.1.0",
+  "description": "BDC example",
+  "main": "index.js",
+  "scripts": {
+    "build": "browserify -s bundle index.js -t [ babelify --presets [ es2015 react ] ] > public/bundle.js",
+    "start": "babel-node --presets es2015 server.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Tim Routowicz <troutowicz@gmail.com>",
+  "license": "MIT",
+  "dependencies": {
+    "express": "^4.13.4",
+    "react": "^0.14.7",
+    "react-dom": "^0.14.7",
+    "react-stamp": "^0.5.0"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.6.5",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "babelify": "^7.2.0",
+    "browserify": "^13.0.0"
+  }
+}
diff --git a/server.js b/server.js
@@ -0,0 +1,27 @@
+import express from 'express';
+
+const app = express(),
+  host = 'localhost',
+  port = '3000';
+
+app.use(express.static('public'));
+
+app.get('/', function (req, res) {
+  res.send(`
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <meta charset='UTF-8' />
+        <title>BDC example</title>
+      </head>
+      <body>
+        <div id='root'></div>
+        <script src='bundle.js'></script>
+      </body>
+    </html>
+  `);
+});
+
+app.listen(port, () => {
+  console.log('Listening at http://%s:%s', host, port);
+});