init cli tool

bin/createComponent/createComponent.js

@@ -0,0 +1,55 @@
+#!/usr/bin/env node
+import inquirer from "inquirer";
+import fs from "fs";
+import path from "path";
+import { createStory } from "./createStory.js";
+
+async function main() {
+  const answers = await inquirer
+    .prompt([
+      {
+        type: "input",
+        name: "componentName",
+        message: "What is the name of your component? (ie: MyComponent)",
+        validate: (componentName) => {
+          if (componentName) {
+            return true;
+          } else {
+            console.log("Please enter a component name");
+            return false;
+          }
+        }
+      }
+      // TODO: subdir of src/lib
+      // TODO: ask about .docs.mdx
+      // TODO: check PascalCase
+    ])
+    .then((answers) => {
+      const { componentName } = answers;
+      const dir = path.join(process.cwd(), "src", "lib", componentName);
+      // if directory doesn't exist, create it
+      if (!fs.existsSync(dir)) {
+        // create directory
+        fs.mkdirSync(dir, { recursive: true });
+
+        // create Component.svelte (blank)
+        const svelteFilePath = path.join(dir, `${componentName}.svelte`);
+        fs.writeFileSync(svelteFilePath, "", "utf8");
+
+        // create Component.docs.md
+        const docsFilePath = path.join(dir, `${componentName}.docs.md`);
+        fs.writeFileSync(docsFilePath, createDocs(componentName), "utf8");
+
+        // create Component.stories.svelte
+        const storyFilePath = path.join(dir, `${componentName}.stories.svelte`);
+        fs.writeFileSync(storyFilePath, createStory(componentName), "utf8");
+      } else {
+        console.error("Directory already exists");
+      }
+    });
+}
+
+main().catch(() => {
+  console.error();
+  // process.exit();
+});

bin/createComponent/createDocs.js

@@ -0,0 +1,9 @@
+export function createDocs(componentName) {
+  return `
+Esse ipsum deserunt dolor minim dolore sunt cillum.
+
+\`\`\`js
+import { ${componentName} } from "@urbaninstitute/dataviz-components";
+\`\`\`
+`;
+}

bin/createComponent/createStory.js

@@ -0,0 +1,35 @@
+export function createStory(componentName) {
+  return `
+<script context="module">
+  import ${componentName} from "./${componentName}.svelte";
+  import docs from "./${componentName}.docs.md?raw";
+
+  export const meta = {
+    title: "Components/${componentName}",
+    component: ${componentName},
+    tags: ["autodocs"],
+    parameters: {
+      docs: {
+        description: {
+          component: docs
+        }
+      },
+      githubLink: {
+        url: "/${componentName}/${componentName}.svelte"
+      }
+    }
+  };
+</script>
+
+<script>
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+</script>
+
+<Template let:args>
+  <${componentName} {...args} />
+</Template>
+
+<Story
+  name="Default"
+/>`;
+}