add plop for new components

Author: ChristopherBiscardi

package.json

@@ -34,6 +34,7 @@
     "husky": "^0.13.4",
     "lerna": "^2.0.0-rc.5",
     "lint-staged": "^3.6.1",
+    "plop": "^1.8.0",
     "preact": "^8.1.0",
     "preact-compat": "^3.16.0",
     "prettier": "^1.4.4",

packages/plop-pack-ocode/index.js

@@ -0,0 +1,64 @@
+const fs = require("fs");
+
+/**
+ * Ensures package names are namespaced into @ocode
+ */
+function normalizePackageName(str) {
+  if (str.startsWith("@ocode")) {
+    return str;
+  } else {
+    return `@ocode/${str}`;
+  }
+}
+
+module.exports = function(plop) {
+  // create your generators here
+  plop.setGenerator("new-component", {
+    description: "scaffold a new preact component with @ocode constants",
+    prompts: [
+      {
+        type: "input",
+        name: "name",
+        message: "What is the naem of this component?",
+        validate: function(value) {
+          const desiredPackageName = value;
+          if (/.+/.test(desiredPackageName)) {
+            const packages = fs.readdirSync("./packages");
+            if (packages.includes(desiredPackageName)) {
+              return "name conflicts with existing package";
+            }
+            return true;
+          }
+          return "name is required";
+        }
+      }, {
+        type: "input",
+        name: "description",
+        message: "What does this component do?",
+        validate: function(value) {
+          if (/.+/.test(value)) {
+            return true;
+          }
+          return "description is required";
+        }
+      }
+    ],
+    actions: [
+      {
+        type: "add",
+        path: "packages/{{dashCase name}}/package.json",
+        templateFile: "templates/package.json.tpl"
+      },
+      {
+        type: "add",
+        path: "packages/{{dashCase name}}/src/index.js",
+        templateFile: "templates/index.js.tpl"
+      },
+      {
+        type: "add",
+        path: "packages/{{dashCase name}}/stories.js",
+        templateFile: "templates/stories.js.tpl"
+      }
+    ]
+  });
+};

packages/plop-pack-ocode/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@ocode/plop-pack-ocode",
+  "version": "1.0.0",
+  "description": "Scaffolding for new packages in this repo",
+  "main": "index.js",
+  "author": "Chris Biscardi <[email protected]",
+  "license": "MIT"
+}

packages/plop-pack-ocode/templates/index.js.tpl

@@ -0,0 +1,17 @@
+import { css } from "fam";
+import { h, Component } from "preact";
+// import { buttons, sizes } from "@ocode/constants/lib/buttons";
+
+const CSS = css({
+  fontFamily: "system"
+});
+
+export default class {{pascalCase name}} extends Component {
+  render(props) {
+    return (
+      <div class={CSS} {...props}>
+        {children}
+      </div>
+    );
+  }
+}

packages/plop-pack-ocode/templates/package.json.tpl

@@ -0,0 +1,14 @@
+{
+  "name": "@ocode/{{name}}",
+  "version": "1.0.0",
+  "description": "{{description}}",
+  "main": "lib/index.js",
+  "author": "Chris Biscardi <[email protected]",
+  "license": "MIT",
+  "scripts": {
+    "build": "babel src --out-dir lib --source-maps"
+  },
+  "dependencies": {
+    "@ocode/constants": "*"
+  }
+}

packages/plop-pack-ocode/templates/stories.js.tpl

@@ -0,0 +1,16 @@
+import { h, render, Component } from "preact";
+
+// Tell Babel to transform JSX into h() calls:
+/** @jsx h */
+
+import { storiesOf } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+import {{pascalCase name}} from ".";
+import { css } from "fam";
+
+storiesOf("{{pascalCase name}}", module).add("usage", () =>
+  <div>
+    <h1>Variants</h1>
+    <{{pascalCase name}}>Stuff?</{{pascalCase name}}>
+  </div>
+);

plopfile.js

@@ -0,0 +1,3 @@
+module.exports = function(plop) {
+  plop.load('./packages/plop-pack-ocode');
+}