Init

src/components/Color.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var React = require('react');
+var ReactCSS = require('reactcss');
+
+var SketchPicker = require('./Sketch/SketchPicker');
+
+class ColorPicker extends ReactCSS.Component {
+
+  classes() {
+    return {
+      'default': {
+
+      },
+    };
+  }
+
+  render() {
+    return (
+      <SketchPicker />
+    );
+  }
+
+}
+
+module.exports = ColorPicker;

src/components/Sketch/SketchPicker.jsx

@@ -0,0 +1,24 @@
+'use strict';
+
+var React = require('react');
+var ReactCSS = require('reactcss');
+
+class ColorPicker extends ReactCSS.Component {
+
+  classes() {
+    return {
+      'default': {
+
+      },
+    };
+  }
+
+  render() {
+    return (
+      <div>Sketch Picker</div>
+    );
+  }
+
+}
+
+module.exports = ColorPicker;

src/index.js

@@ -0,0 +1,2 @@
+
+module.exports = require('./components/ColorPicker');

src/specs/Color.spec.js

@@ -0,0 +1,38 @@
+
+var Harness = require('react-harness');
+var Color = require('./../components/Color');
+
+Color.propTypes = {
+  tabs: Harness.PropTypes.array.examples([
+    [{
+      label: 'cool',
+      callback: function() {
+        console.log('cool');
+      },
+    }, {
+      label: 'tabs',
+      callback: function() {
+        console.log('tabs');
+      },
+    },],
+    ['cool', 'tabs'], ['foo', 'bar', 'longer'], ['foo', 'bar', 'way longer', 'even', 'still'],
+  ]),
+  align: Harness.PropTypes.oneOf(['none', 'justify', 'left', 'center']),
+  color: Harness.PropTypes.string.examples(['#fff', '#FFEB3B']),
+  background: Harness.PropTypes.string.examples(['transparent', '#4A90E2']),
+};
+
+module.exports = {
+  label: 'Color',
+  desc: 'Lorem Ipsum',
+
+  component: Color,
+
+  instances: {
+    'default': {
+      tabs: ['foo', 'bar'],
+      color: '#333',
+      background: '#eee',
+    },
+  },
+};

src/specs/index.js

@@ -0,0 +1,4 @@
+
+module.exports = {
+  ColorPicker: require('./Color.spec'),
+};