Add working development environment

.npmignore

@@ -3,6 +3,7 @@
 /.eslint*
 /.gitignore
 /.npmignore
+/.babelrc
 /docs/
 /examples/
 /example/

README.md

@@ -66,9 +66,11 @@ you can use `library.setValue(propName, newValue)` which take two arguments:
 ## Development of Component library
 ```
 npm install
-cd ./example_app
+cd ./example
 npm install
 gulp
+npm start
+open http://127.0.0.1:8001
 ```
 this will start development server and then you can play with Library components
 

example/.babelrc

@@ -1,3 +1,4 @@
 {
-  "presets": ["es2015", "stage-0", "react"]
+  "presets": ["es2015", "stage-0", "react"],
+  "plugins": ["transform-decorators-legacy"]
 }

example/gulpfile.js

@@ -0,0 +1,13 @@
+require('babel-register')
+const gulp = require('gulp')
+const path = require('path')
+const createBlueKit = require('../src/createBlueKit').default
+
+createBlueKit({
+  // base file of start - this is location where componentsIndex.js will be generated to
+  baseDir: path.join(__dirname, 'src'),
+  // relative paths from base dir where to look for components
+  paths: ['../../example_components'],
+})
+
+gulp.task('default', ['build-bluekit'])

example/package.json

@@ -31,6 +31,7 @@
     "babel-core": "^6.0.20",
     "babel-eslint": "^4.1.3",
     "babel-loader": "^6.0.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-preset-es2015": "^6.0.15",
     "babel-preset-react": "^6.0.15",
     "babel-preset-stage-0": "^6.0.15",
@@ -39,9 +40,5 @@
     "react-hot-loader": "^1.3.0",
     "webpack": "^1.12.2",
     "webpack-dev-server": "^1.12.1"
-  },
-  "dependencies": {
-    "react": "^0.14.6",
-    "react-dom": "^0.14.6"
   }
 }

example/server.js

@@ -6,10 +6,10 @@ new WebpackDevServer(webpack(config), {
   publicPath: config.output.publicPath,
   hot: true,
   historyApiFallback: true
-}).listen(3000, 'localhost', function (err, result) {
+}).listen(8001, 'localhost', function (err, result) {
   if (err) {
     return console.log(err);
   }
 
-  console.log('Listening at http://localhost:3000/');
+  console.log('Listening at http://localhost:8001/');
 });

example/src/App.js

@@ -1,9 +1,11 @@
-import React, { Component } from 'react';
+import React, {Component} from '../../node_modules/react';
+import BlueKit from '../../src/components/Library';
+import componentsIndex from './componentsIndex';
 
 export default class App extends Component {
   render() {
     return (
-      <h1>Hello, world.</h1>
+      <BlueKit componentsIndex={componentsIndex} />
     );
   }
 }

example/src/componentsIndex.js

@@ -0,0 +1,202 @@
+/* eslint-disable */
+// Generated by component library do not modify
+import ExampleComponentsABC from '../../example_components/ABC.js';
+import ExampleComponentsButton from '../../example_components/Button.react.js';
+import ExampleComponentsCheckbox from '../../example_components/Checkbox.react.js';
+import ExampleComponentsCheckboxOnChange from '../../example_components/CheckboxOnChange.js';
+import ExampleComponentsEmptyProps from '../../example_components/EmptyProps.react.js';
+import ExampleComponentsErrorMessage from '../../example_components/ErrorMessage.react.js';
+import ExampleComponentsIcon from '../../example_components/Icon.react.js';
+import ExampleComponentsNoProps from '../../example_components/NoProps.react.js';
+import ExampleComponentsOnChangeEvent from '../../example_components/OnChangeEvent.js';
+import ExampleComponentsOnChangeNameAndValue from '../../example_components/OnChangeNameAndValue.js';
+import ExampleComponentsRadioInput from '../../example_components/RadioInput.react.js';
+import ExampleComponentsWithExtendProps from '../../example_components/WithExtendProps.react.js';
+import ExampleComponentsWithShapePropsWithDefaults from '../../example_components/WithShapePropsWithDefaults.react.js';
+
+export default {
+  ExampleComponentsABC: {
+    name: 'ExampleComponentsABC',
+    menu: 'Example Components ABC',
+    file: '../../example_components/ABC.js',
+    component: ExampleComponentsABC,
+    componentName: 'ABC',
+    description: 'Example component description',
+    customProps: {},
+    propsDefinition: {foo:{type:{name:"bool"},required:false,description:"Example prop description",defaultValue:{value:"true",computed:false}},bar:{defaultValue:{value:"'String'",computed:false}}},
+    simpleProps: {foo:true,bar:"String"},
+    fullProps: {foo:true,bar:"String"}
+  },
+  ExampleComponentsButton: {
+    name: 'ExampleComponentsButton',
+    menu: 'Example Components Button',
+    file: '../../example_components/Button.react.js',
+    component: ExampleComponentsButton,
+    componentName: 'Button',
+    description: '',
+    customProps: {},
+    propsDefinition: {children:{type:{name:"any"},required:true,description:""},disabled:{type:{name:"bool"},required:false,description:""},fullWidth:{type:{name:"bool"},required:false,description:""},inheritedStyle:{type:{name:"object"},required:false,description:""},kind:{type:{name:"enum",value:[{value:"'primary'",computed:false},{value:"'secondary'",computed:false},{value:"'outlined'",computed:false}]},required:true,description:""},onClick:{type:{name:"func"},required:true,description:""},size:{type:{name:"enum",value:[{value:"'small'",computed:false},{value:"'large'",computed:false}]},required:false,description:""},type:{type:{name:"string"},required:false,description:""}},
+    simpleProps: {children:"Default ANY",kind:"primary",onClick:function () {
+        alert('called function');
+      }},
+    fullProps: {children:"Default ANY",disabled:true,fullWidth:true,inheritedStyle:null,kind:"primary",onClick:function () {
+        alert('called function');
+      },size:"small",type:"Default string type"}
+  },
+  ExampleComponentsCheckbox: {
+    name: 'ExampleComponentsCheckbox',
+    menu: 'Example Components Checkbox',
+    file: '../../example_components/Checkbox.react.js',
+    component: ExampleComponentsCheckbox,
+    componentName: 'Checkbox',
+    description: '',
+    customProps: {},
+    propsDefinition: {error:{type:{name:"string"},required:false,description:""},label:{type:{name:"string"},required:true,description:""},name:{type:{name:"string"},required:true,description:""},onChange:{type:{name:"func"},required:true,description:""},value:{type:{name:"bool"},required:false,description:""}},
+    simpleProps: {label:"Default string label",name:"Default string name",onChange:function () {
+        alert('called function');
+      }},
+    fullProps: {error:"Default string error",label:"Default string label",name:"Default string name",onChange:function () {
+        alert('called function');
+      },value:true}
+  },
+  ExampleComponentsCheckboxOnChange: {
+    name: 'ExampleComponentsCheckboxOnChange',
+    menu: 'Example Components CheckboxOnChange',
+    file: '../../example_components/CheckboxOnChange.js',
+    component: ExampleComponentsCheckboxOnChange,
+    componentName: 'CheckboxOnChange',
+    description: '',
+    customProps: {},
+    propsDefinition: {error:{type:{name:"string"},required:false,description:""},label:{type:{name:"string"},required:true,description:""},name:{type:{name:"string"},required:true,description:""},onChange:{type:{name:"func"},required:true,description:""},value:{type:{name:"bool"},required:false,description:""}},
+    simpleProps: {label:"Default string label",name:"Default string name",onChange:function () {
+        alert('called function');
+      }},
+    fullProps: {error:"Default string error",label:"Default string label",name:"Default string name",onChange:function () {
+        alert('called function');
+      },value:true}
+  },
+  ExampleComponentsEmptyProps: {
+    name: 'ExampleComponentsEmptyProps',
+    menu: 'Example Components EmptyProps',
+    file: '../../example_components/EmptyProps.react.js',
+    component: ExampleComponentsEmptyProps,
+    componentName: 'EmptyProps',
+    description: '',
+    customProps: {},
+    propsDefinition: {},
+    simpleProps: {},
+    fullProps: {}
+  },
+  ExampleComponentsErrorMessage: {
+    name: 'ExampleComponentsErrorMessage',
+    menu: 'Example Components ErrorMessage',
+    file: '../../example_components/ErrorMessage.react.js',
+    component: ExampleComponentsErrorMessage,
+    componentName: 'ErrorMessage',
+    description: '',
+    customProps: {},
+    propsDefinition: {children:{type:{name:"any"},required:true,description:""},type:{type:{name:"string"},required:false,description:""}},
+    simpleProps: {children:"Default ANY"},
+    fullProps: {children:"Default ANY",type:"Default string type"}
+  },
+  ExampleComponentsIcon: {
+    name: 'ExampleComponentsIcon',
+    menu: 'Example Components Icon',
+    file: '../../example_components/Icon.react.js',
+    component: ExampleComponentsIcon,
+    componentName: 'Icon',
+    description: '',
+    customProps: {},
+    propsDefinition: {color:{type:{name:"string"},required:false,description:""},display:{type:{name:"string"},required:false,description:""},inheritedStyle:{type:{name:"object"},required:false,description:""},kind:{type:{name:"enum",value:[{value:"'check'",computed:false},{value:"'star'",computed:false}]},required:true,description:""},size:{type:{name:"string"},required:false,description:""}},
+    simpleProps: {kind:"check"},
+    fullProps: {color:"Default string color",display:"Default string display",inheritedStyle:null,kind:"check",size:"Default string size"}
+  },
+  ExampleComponentsNoProps: {
+    name: 'ExampleComponentsNoProps',
+    menu: 'Example Components NoProps',
+    file: '../../example_components/NoProps.react.js',
+    component: ExampleComponentsNoProps,
+    componentName: 'NoProps',
+    description: '',
+    customProps: {},
+    propsDefinition: {},
+    simpleProps: {},
+    fullProps: {}
+  },
+  ExampleComponentsOnChangeEvent: {
+    name: 'ExampleComponentsOnChangeEvent',
+    menu: 'Example Components OnChangeEvent',
+    file: '../../example_components/OnChangeEvent.js',
+    component: ExampleComponentsOnChangeEvent,
+    componentName: 'OnChangeEvent',
+    description: '',
+    customProps: {},
+    propsDefinition: {children:{type:{name:"any"},required:false,description:""},error:{type:{name:"string"},required:false,description:""},icon:{type:{name:"enum",value:[{value:"'star'",computed:false},{value:"'check'",computed:false}]},required:false,description:""},iconSize:{type:{name:"string"},required:false,description:""},label:{type:{name:"string"},required:false,description:""},name:{type:{name:"string"},required:true,description:""},onChange:{type:{name:"func"},required:true,description:""},placeholder:{type:{name:"string"},required:true,description:""},tooltip:{type:{name:"string"},required:false,description:""},type:{type:{name:"string"},required:true,description:"",defaultValue:{value:"'text'",computed:false}},unit:{type:{name:"string"},required:false,description:""},value:{type:{name:"string"},required:false,description:""}},
+    simpleProps: {name:"Default string name",onChange:function () {
+        alert('called function');
+      },placeholder:"Default string placeholder",type:"text"},
+    fullProps: {tooltip:"Default string tooltip",unit:"Default string unit",error:"Default string error",name:"Default string name",onChange:function () {
+        alert('called function');
+      },value:"Default string value",placeholder:"Default string placeholder",label:"Default string label",icon:"star",iconSize:"Default string iconSize",type:"text",children:"Default ANY"}
+  },
+  ExampleComponentsOnChangeNameAndValue: {
+    name: 'ExampleComponentsOnChangeNameAndValue',
+    menu: 'Example Components OnChangeNameAndValue',
+    file: '../../example_components/OnChangeNameAndValue.js',
+    component: ExampleComponentsOnChangeNameAndValue,
+    componentName: 'OnChangeNameAndValue',
+    description: '',
+    customProps: {},
+    propsDefinition: {children:{type:{name:"any"},required:false,description:""},error:{type:{name:"string"},required:false,description:""},icon:{type:{name:"string"},required:false,description:""},iconSize:{type:{name:"string"},required:false,description:""},label:{type:{name:"string"},required:false,description:""},name:{type:{name:"string"},required:true,description:""},onChange:{type:{name:"func"},required:true,description:""},placeholder:{type:{name:"string"},required:true,description:""},tooltip:{type:{name:"string"},required:false,description:""},type:{type:{name:"string"},required:true,description:"",defaultValue:{value:"'text'",computed:false}},unit:{type:{name:"string"},required:false,description:""},value:{type:{name:"string"},required:false,description:""}},
+    simpleProps: {name:"Default string name",onChange:function () {
+        alert('called function');
+      },placeholder:"Default string placeholder",type:"text"},
+    fullProps: {tooltip:"Default string tooltip",unit:"Default string unit",error:"Default string error",name:"Default string name",onChange:function () {
+        alert('called function');
+      },value:"Default string value",placeholder:"Default string placeholder",label:"Default string label",icon:"Default string icon",iconSize:"Default string iconSize",type:"text",children:"Default ANY"}
+  },
+  ExampleComponentsRadioInput: {
+    name: 'ExampleComponentsRadioInput',
+    menu: 'Example Components RadioInput',
+    file: '../../example_components/RadioInput.react.js',
+    component: ExampleComponentsRadioInput,
+    componentName: 'RadioInput',
+    description: '',
+    customProps: {},
+    propsDefinition: {horizontal:{type:{name:"bool"},required:false,description:""},name:{type:{name:"string"},required:true,description:""},onChange:{type:{name:"func"},required:true,description:""},selected:{type:{name:"bool"},required:true,description:""},text:{type:{name:"string"},required:false,description:""},value:{type:{name:"string"},required:true,description:""}},
+    simpleProps: {name:"Default string name",onChange:function () {
+        alert('called function');
+      },selected:true,value:"Default string value"},
+    fullProps: {horizontal:true,name:"Default string name",onChange:function () {
+        alert('called function');
+      },selected:true,text:"Default string text",value:"Default string value"}
+  },
+  ExampleComponentsWithExtendProps: {
+    name: 'ExampleComponentsWithExtendProps',
+    menu: 'Example Components WithExtendProps',
+    file: '../../example_components/WithExtendProps.react.js',
+    component: ExampleComponentsWithExtendProps,
+    componentName: 'WithExtendProps',
+    description: '',
+    customProps: {},
+    propsDefinition: {children:{type:{name:"node"},required:true,description:"",defaultValue:{value:"'Editable field with value'",computed:false}},editing:{type:{name:"bool"},required:true,description:"",defaultValue:{value:"false",computed:false}},label:{type:{name:"string"},required:true,description:"",defaultValue:{value:"'Value to show'",computed:false}},onEditingModeChange:{type:{name:"func"},required:true,description:""}},
+    simpleProps: {children:"Editable field with value",editing:false,label:"Value to show",onEditingModeChange:function () {
+        alert('called function');
+      }},
+    fullProps: {children:"Editable field with value",editing:false,label:"Value to show",onEditingModeChange:function () {
+        alert('called function');
+      }}
+  },
+  ExampleComponentsWithShapePropsWithDefaults: {
+    name: 'ExampleComponentsWithShapePropsWithDefaults',
+    menu: 'Example Components WithShapePropsWithDefaults',
+    file: '../../example_components/WithShapePropsWithDefaults.react.js',
+    component: ExampleComponentsWithShapePropsWithDefaults,
+    componentName: 'WithShapePropsWithDefaults',
+    description: '',
+    customProps: {},
+    propsDefinition: {interval:{type:{name:"shape",value:{value:{name:"number",required:true},text:{name:"string",required:true}}},required:true,description:"",defaultValue:{value:"{\n  value: 123,\n  text: 'Foo'\n}",computed:false}}},
+    simpleProps: {interval:{value:123,text:"Foo"}},
+    fullProps: {interval:{value:123,text:"Foo"}}
+  },
+}

example/src/index.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React from '../../node_modules/react';
+import ReactDOM from '../../node_modules/react-dom';
 import App from './App';
 
 ReactDOM.render(<App />, document.getElementById('root'));

example/webpack.config.js

@@ -20,7 +20,7 @@ module.exports = {
     loaders: [{
       test: /\.js$/,
       loaders: ['react-hot', 'babel'],
-      include: path.join(__dirname, 'src')
+      include: [path.join(__dirname, 'src'), path.join(__dirname, '..', 'src'), path.join(__dirname, '..', 'example_components')]
     }]
   }
 };

example_components/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["es2015", "stage-0", "react"],
+  "plugins": ["transform-decorators-legacy"]
+}

example_components/Checkbox.react.js

@@ -2,7 +2,7 @@ import {Component} from 'react';
 import ErrorMessage from './ErrorMessage.react';
 import Radium from 'radium';
 import React from 'react';
-import {form} from '../components/styleGlobals';
+import {form} from './styleGlobals';
 
 const styles = {
   wrapper: {

example_components/CheckboxOnChange.js

@@ -2,7 +2,7 @@ import {Component} from 'react';
 import ErrorMessage from './ErrorMessage.react';
 import Radium from 'radium';
 import React from 'react';
-import {form} from '../components/styleGlobals';
+import {form} from './styleGlobals';
 
 const styles = {
   wrapper: {

src/components/Header.js

@@ -1,32 +1,15 @@
 import Radium from 'radium';
 import React, {Component, PropTypes as RPT} from 'react';
-import {Link} from 'react-router';
-
-const RadiumLink = Link;
 
 @Radium
 export default class Header extends Component {
 
-  static propTypes = {
-    mountPoint: RPT.string.isRequired
-  }
-
   render() {
     const {mountPoint} = this.props
 
     return (
       <header style={styles.wrapper}>
-        <RadiumLink style={styles.link} to={`/${mountPoint}`}>
-          React Component Library
-        </RadiumLink>
-        {mountPoint &&
-          <RadiumLink style={[styles.link, {float: 'right'}]} to='/'>
-            <div style={styles.homeIcon.base}>
-              <div style={styles.homeIcon.before} />
-              <div style={styles.homeIcon.after} />
-            </div>
-          </RadiumLink>
-        }
+        BlueKit
       </header>
     );
   }

src/createBlueKit.js

@@ -63,7 +63,6 @@ function generateComponentData(config, file, directory) {
       .replace(/(?:^|[-_/])(\w)/g, (_, c) => c ? ` ${c.toUpperCase()}` : '')
       .replace(/\//g, '')
       .trim();
-
     const name = menu.replace(/\s/g, '');
 
     const importFile = getImportFile(directory, file)
@@ -83,7 +82,7 @@ function generateComponentData(config, file, directory) {
   }
   catch (error) {
     if (error.message !== 'No suitable component definition found.')
-      console.error(`\u001b[31mError parsing component ${file}: ${error.message}\u001b[0m`) // eslint-disable-line no-console
+      console.error(`\u001b[31mError parsing component ${file}: ${error.message}\u001b[0m`, error.stack) // eslint-disable-line no-console
     else
       console.warn(`\u001b[33m No suitable component definition found in ${file}\u001b[0m`) // eslint-disable-line no-console
     return null;

src/helpers/buildProps.js

@@ -1,4 +1,5 @@
 import {Map} from 'immutable';
+import toSource from 'tosource';
 
 export default function buildProps(propsDefinition, allProps = false) {
   const props = {}
@@ -22,7 +23,7 @@ function calculateProp(type, prop) {
     case 'string': return `Default string ${prop}`
     case 'bool':   return true
     case 'number': return 1
-    case 'func':   return eval(`() => { alert('called function: ${prop}') }`) // eslint-disable-line no-eval
+    case 'func':   return () => {alert('called function')} // eslint-disable-line no-eval
     case 'enum':   return type.value[0].value.replace(/'/g, '')
     case 'shape':  return Map(type.value)
       .map((subType, name) => calculateProp(subType, name))