Convert to es5 lib + es6&jsx example

.eslintignore

@@ -0,0 +1,2 @@
+node_modules/
+example/

.eslintrc

@@ -0,0 +1,78 @@
+{
+    "extends": "eslint:recommended",
+    "env": {
+       "node": true
+    },
+    "rules": {
+        "no-alert": 2,
+        "no-array-constructor": 2,
+        "no-caller": 2,
+        "no-catch-shadow": 2,
+        "no-console": 0,
+        "no-empty-label": 2,
+        "no-eval": 2,
+        "no-extend-native": 2,
+        "no-extra-bind": 2,
+        "no-implied-eval": 2,
+        "no-iterator": 2,
+        "no-label-var": 2,
+        "no-labels": 2,
+        "no-lone-blocks": 2,
+        "no-loop-func": 2,
+        "no-multi-spaces": 2,
+        "no-multi-str": 2,
+        "no-native-reassign": 2,
+        "no-new": 2,
+        "no-new-func": 2,
+        "no-new-object": 2,
+        "no-new-wrappers": 2,
+        "no-octal-escape": 2,
+        "no-process-exit": 2,
+        "no-proto": 2,
+        "no-return-assign": 2,
+        "no-script-url": 2,
+        "no-sequences": 2,
+        "no-shadow": 2,
+        "no-shadow-restricted-names": 2,
+        "no-spaced-func": 2,
+        "no-trailing-spaces": 2,
+        "no-undef-init": 2,
+        "no-underscore-dangle": 2,
+        "no-unused-expressions": 2,
+        "no-with": 2,
+        "comma-spacing": 2,
+        "consistent-return": 2,
+        "dot-notation": [2, { "allowKeywords": true }],
+        "eol-last": 2,
+        "no-extra-parens": [2, "functions"],
+        "one-var": [2, "never"],
+        "eqeqeq": 2,
+        "key-spacing": [2, { "beforeColon": false, "afterColon": true }],
+        "new-cap": 2,
+        "new-parens": 2,
+        "quotes": [2, "double"],
+        "semi": 2,
+        "semi-spacing": [2, {"before": false, "after": true}],
+        "space-infix-ops": 2,
+        "space-return-throw-case": 2,
+        "space-unary-ops": [2, { "words": true, "nonwords": false }],
+        "strict": [2, "function"],
+        "yoda": [2, "never"],
+        "strict": 0,
+        "quotes": 0,
+        "curly": [2, "multi-line"],
+        "no-use-before-define": [1, "nofunc"],
+        "no-unused-vars": [2, "all"],
+        "no-mixed-requires": [1, true],
+        "max-depth": [1, 5],
+        "max-len": [1, 80, 4],
+        "eqeqeq": 0,
+        "new-cap": 0,
+        "no-else-return": 2,
+        "no-eq-null": 2,
+        "no-lonely-if": 2,
+        "no-path-concat": 0,
+        "comma-dangle": 0,
+        "camelcase": 0,
+    }
+}

README.md

@@ -1 +1,9 @@
 # devcards-js
+
+## Example
+
+```sh
+cd example
+npm install
+npm start
+```

devcards.js

@@ -0,0 +1,46 @@
+var React = require('react');
+var ReactDOM = require('react-dom');
+
+var $ = React.createElement;
+
+var DevCards = require('./lib/components/DevCards');
+
+exports = module.exports = devcard;
+exports.run = run;
+
+/**
+ * Cards
+ */
+
+// Main card
+function devcard(name, doc, body) {
+  devcard.current.push({name: name, doc: doc, body: body});
+}
+
+// Noop card
+devcard.off = Function.prototype;
+
+
+/**
+ * Runtime
+ */
+
+// Rendering the cards
+function render(catalog, rootId) {
+  /* eslint-env browser */
+  var root = document.getElementById(rootId);
+  ReactDOM.render($(DevCards, { catalog: catalog }), root);
+}
+
+// Running the cards
+function run(modules, require, opts) {
+  opts = opts || {};
+
+  var catalog = {};
+  modules.forEach(function(m) {
+    devcard.current = catalog[m] = [];
+    require(m);
+  });
+
+  render(catalog, opts.rootId || 'DEVCARDS');
+}

example/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "react", "react-hmre"]
+}

example/.eslintrc

@@ -0,0 +1,111 @@
+{
+    "extends": "eslint:recommended",
+    "env": {
+       "node": true,
+       "es6": true
+    },
+    "parser": "babel-eslint",
+    "plugins": [
+        "no-class",
+        "react"
+    ],
+    "rules": {
+        "no-alert": 2,
+        "no-array-constructor": 2,
+        "no-caller": 2,
+        "no-catch-shadow": 2,
+        "no-console": 0,
+        "no-empty-label": 2,
+        "no-eval": 2,
+        "no-extend-native": 2,
+        "no-extra-bind": 2,
+        "no-implied-eval": 2,
+        "no-iterator": 2,
+        "no-label-var": 2,
+        "no-labels": 2,
+        "no-lone-blocks": 2,
+        "no-loop-func": 2,
+        "no-multi-spaces": 2,
+        "no-multi-str": 2,
+        "no-native-reassign": 2,
+        "no-new": 2,
+        "no-new-func": 2,
+        "no-new-object": 2,
+        "no-new-wrappers": 2,
+        "no-octal-escape": 2,
+        "no-process-exit": 2,
+        "no-proto": 2,
+        "no-return-assign": 2,
+        "no-script-url": 2,
+        "no-sequences": 2,
+        "no-shadow": 2,
+        "no-shadow-restricted-names": 2,
+        "no-spaced-func": 2,
+        "no-trailing-spaces": 2,
+        "no-undef-init": 2,
+        "no-underscore-dangle": 2,
+        "no-unused-expressions": 2,
+        "no-with": 2,
+        "comma-spacing": 2,
+        "consistent-return": 2,
+        "dot-notation": [2, { "allowKeywords": true }],
+        "eol-last": 2,
+        "no-extra-parens": [2, "functions"],
+        "eqeqeq": 2,
+        "key-spacing": [2, { "beforeColon": false, "afterColon": true }],
+        "new-cap": 2,
+        "new-parens": 2,
+        "quotes": [2, "double"],
+        "semi": 2,
+        "semi-spacing": [2, {"before": false, "after": true}],
+        "space-infix-ops": 2,
+        "space-return-throw-case": 2,
+        "space-unary-ops": [2, { "words": true, "nonwords": false }],
+        "strict": [2, "function"],
+        "yoda": [2, "never"],
+        "strict": 0,
+        "quotes": 0,
+        "indent": [2, 2],
+        "curly": [2, "multi-line"],
+        "no-use-before-define": [2, "nofunc"],
+        "no-unused-vars": [2, "all"],
+        "no-mixed-requires": [1, true],
+        "max-depth": [1, 5],
+        "max-len": [1, 80, 4],
+        "max-params": [1, 6],
+        "max-statements": [1, 20],
+        "eqeqeq": 0,
+        "new-cap": 0,
+        "no-else-return": 1,
+        "no-eq-null": 1,
+        "no-lonely-if": 1,
+        "no-path-concat": 0,
+        "comma-dangle": 0,
+        "complexity": [1, 20],
+        "no-floating-decimal": 1,
+        "no-void": 1,
+        "no-sync": 1,
+        "consistent-this": [1, "nope-dont-capture-this"],
+        "max-nested-callbacks": [2, 3],
+        "no-nested-ternary": 1,
+        "space-after-keywords": [1, "always"],
+        "space-before-function-paren": [1, "never"],
+        "spaced-comment": [1, "always"],
+        "no-class/no-class": 2,
+        "react/jsx-boolean-value": 1,
+        "react/jsx-quotes": 0,
+        "react/jsx-no-undef": 1,
+        "react/jsx-sort-props": 0,
+        "react/jsx-sort-prop-types": 0,
+        "react/jsx-uses-react": 1,
+        "react/jsx-uses-vars": 1,
+        "react/no-did-mount-set-state": 1,
+        "react/no-did-update-set-state": 1,
+        "react/no-multi-comp": 0,
+        "react/no-unknown-property": 1,
+        "react/prop-types": 1,
+        "react/react-in-jsx-scope": 1,
+        "react/self-closing-comp": 0,
+        "react/wrap-multilines": 1
+    }
+}

test/app/Button.card.js → example/Button.card.js

@@ -1,6 +1,6 @@
-import devcard from '../../src/devcards';
+import devcard from 'devards';
 import React from 'react';
-import Button from './Button.jsx';
+import Button from './Button';
 
 devcard(
   'Buttons',

test/app/Label.card.jsx → example/Label.card.js

@@ -1,6 +1,6 @@
-import devcard from '../../src/devcards';
+import devcard from 'devcards';
 import React from 'react';
-import Label from './Label.jsx';
+import Label from './Label';
 
 devcard(
   'Labels',

test/app/index.html → example/index.html

@@ -3,7 +3,7 @@
 <head>
   <title>Devcards</title>
   <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
+  <link rel="stylesheet" href="/bootstrap.min.css">
 </head>
 <body>
   <div id="DEVCARDS"></div>

example/main.js

@@ -0,0 +1,6 @@
+var run = require('devcards').run;
+
+var context = require.context('./', true, /\.card\.js$/);
+run(context.keys(), context);
+
+module.hot.accept();

example/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "devcards-js-example",
+  "version": "1.0.0",
+  "description": "Example for devcards",
+  "private": true,
+  "scripts": {
+    "start": "kotatsu serve -c config.js --index index.html --progress --source-maps --jsx main.js"
+  },
+  "author": "Glen Mailer <[email protected]>",
+  "license": "MIT",
+  "dependencies": {
+    "babel-preset-react": "^6.3.13",
+    "babel-preset-react-hmre": "^1.0.1",
+    "json-loader": "^0.5.4",
+    "kotatsu": "^0.3.3",
+    "react": "^0.14.6",
+    "react-dom": "^0.14.6"
+  },
+  "devDependencies": {
+    "babel-eslint": "^4.1.6",
+    "eslint-plugin-react": "^3.15.0"
+  }
+}

lib/components/DevCard.js

@@ -0,0 +1,54 @@
+var React = require('react');
+
+var $ = React.createElement;
+
+var markdown2react = require('../markdown2react');
+
+var style = {
+  card: {
+    border: '1px solid #ddd',
+    margin: '10px',
+    backgroundColor: '#fff'
+  },
+  heading: {
+    margin: 0,
+    padding: '5px',
+    fontSize: '18px',
+    fontWeight: 'bold',
+    backgroundColor: '#ddd',
+    color: '#666'
+  },
+  doc: {
+    backgroundColor: '#fff'
+  },
+  body: {
+    padding: '10px',
+  }
+};
+
+var DevCard = React.createClass({
+  displayName: 'DevCard',
+  propTypes: {
+    name: React.PropTypes.string.isRequired,
+    doc: React.PropTypes.string.isRequired,
+    body: React.PropTypes.oneOfType([
+      React.PropTypes.func,
+      React.PropTypes.node,
+    ]).isRequired
+  },
+  render: function() {
+    var body = this.props.body;
+
+    return (
+      $('div', { style: style.cardStyle },
+        $('h3', { style: style.headingStyle }, this.props.name),
+        $('div', { style: style.docStyle }, markdown2react(this.props.doc)),
+        $('div', { style: style.bodyStyle },
+          typeof body === 'function' ? body() : body
+        )
+      )
+    );
+  }
+});
+
+module.exports = DevCard;