🔧 Move build deps and scripts to archetype

.babelrc

@@ -1,13 +1,3 @@
 {
-    "presets": ["es2015", "react"],
-    "env": {
-        "development": {
-            "presets": ["es2015-webpack", "react"],
-            "plugins": [
-                ["transform-es2015-modules-commonjs-simple", {
-                    "noMangle": true
-                }]
-            ]
-        }
-    }
+  "extends": "./node_modules/dash-components-archetype/config/babel/babelrc"
 }

.builderrc

@@ -0,0 +1,3 @@
+---
+archetypes:
+  - dash-components-archetype

.eslintrc

@@ -0,0 +1,2 @@
+---
+  extends: ./node_modules/dash-components-archetype/config/eslint/eslintrc-react.json

package.json

@@ -6,41 +6,22 @@
     "type": "git",
     "url": "git://github.com/plotly/dash-components-core.git"
   },
-  "main": "lib/basic/index.js",
+  "main": "lib/index.js",
   "scripts": {
-    "clean-lib": "mkdir -p lib && rm -rf lib/*",
-    "transpile-dev": "npm run clean-lib && npm run extract-metadata && babel --source-root ./src/ -d lib/ src/",
-    "transpile-dev-watch": "npm run clean-lib && npm run extract-metadata && babel --watch --source-root ./src/ -d lib/ src/",
-    "build-dev": "webpack --config=config/webpack/webpack.config.dev.js",
-    "extract-metadata": "mkdir -p lib && react-docgen --pretty -o lib/metadata.json src/basic/components",
-    "dev": "webpack-dev-server --config=config/webpack/webpack.config.dev.js",
-    "lint": "eslint --quiet --fix --ignore-path .gitignore .",
-    "prepublish": "npm test",
-    "start": "npm run transpile-dev-watch",
-    "test": "npm run lint"
+    "start": "builder run transpile-dev-watch",
+    "test": "builder run lint"
   },
   "author": "Per Nilsson <[email protected]>",
   "license": "MIT",
   "dependencies": {
-    "babel-cli": "^6.10.1",
-    "babel-core": "^6.9.0",
-    "babel-loader": "^6.2.4",
-    "babel-preset-es2015": "^6.6.0",
-    "babel-preset-react": "^6.5.0",
-    "clean-webpack-plugin": "^0.1.9",
+    "builder": "2.10.1",
+    "dash-components-archetype": "^0.1.0",
     "radium": "^0.17.1",
     "ramda": "^0.21.0",
-    "react-docgen": "^2.8.2",
-    "react-dom": "^15.1.0",
-    "webpack": "^1.13.1",
-    "webpack-partial": "^1.2.0"
+    "react": "^15.1.0",
+    "react-dom": "^15.1.0"
   },
   "devDependencies": {
-    "babel-plugin-transform-es2015-modules-commonjs-simple": "^6.7.4",
-    "babel-preset-es2015-webpack": "^6.4.1",
-    "eslint": "^2.8.0",
-    "eslint-plugin-import": "^1.8.1",
-    "eslint-plugin-react": "^5.1.1",
-    "react": "^15.1.0"
+    "dash-components-archetype-dev": "^0.1.0"
   }
 }

src/basic/Styles.js → src/Styles.js

@@ -9,4 +9,4 @@ const palette = {
 
 export default {
     colors: palette
-}
+};

src/basic/components/EditableDiv.react.js → src/components/EditableDiv.react.js

@@ -10,20 +10,20 @@ const baseStyles = {
     ':hover': {
         color: Styles.colors.baseHover
     }
-}
+};
 
 /**
  * A div for displaying text. The text is editable.
  */
 export default class EditableDiv extends Component {
 
     constructor(props) {
-        super(props);
-        this.state = {inEditMode: false};
+        super(props)
+        this.state = {inEditMode: false}
     }
 
     componentDidUpdate() {
-        if (this.state.inEditMode) ReactDOM.findDOMNode(this.refs.input).focus();
+        if (this.state.inEditMode) ReactDOM.findDOMNode(this.refs.input).focus()
     }
 
     render() {
@@ -43,18 +43,18 @@ export default class EditableDiv extends Component {
                         onBlur={() => this.setState({inEditMode: false})}
                     />
                 </div>
-            );
+            )
         }
         else {
             return (
                 <div style={R.merge(baseStyles, this.props.style)}
                      onClick={() => {
-                        if (this.props.editable) this.setState({inEditMode: true});
+                        if (this.props.editable) this.setState({inEditMode: true})
                     }}
                 >
                     {this.props.text}
                 </div>
-            );
+            )
         }
     }
 

src/basic/components/Header.react.js → src/components/Header.react.js

@@ -1,13 +1,11 @@
-'use strict';
-
 import React, {Component, PropTypes} from 'react';
 
 /**
  * A component that greets a person in a header
  */
 class Header extends Component {
     render() {
-        return <h2>Hello, {this.props.name}</h2>;
+        return <h2>Hello, {this.props.name}</h2>
     }
 }
 

src/basic/components/InputControl.react.js → src/components/InputControl.react.js

@@ -5,14 +5,14 @@ import React, {Component, PropTypes} from 'react';
  */
 export default class InputControl extends Component {
     constructor() {
-        super();
+        super()
         this.state = {
             value: ''
         }
     }
 
     handleChange(value) {
-        this.setState({value});
+        this.setState({value})
         /**
          * TODO (#22): Remove conditional. Always pass a callback function
          * to components that can change value.
@@ -29,7 +29,7 @@ export default class InputControl extends Component {
                 onChange={e => this.handleChange(e.target.value)}
                 {...this.props}
             />
-        );
+        )
     }
 }
 

src/basic/index.js → src/index.js

@@ -10,4 +10,4 @@ export {
     EditableDiv,
     Header,
     InputControl
-};
+};