CLI command for initializing component boilerplate

CHANGELOG.md

@@ -6,6 +6,7 @@
 - Feature: GitHub source links for components via [@etchteam/storybook-addon-github-link](https://storybook.js.org/addons/@etchteam/storybook-addon-github-link) in storybook docs
 - Patch: Update method of declaring Storybook component descriptions and add import instructions to components
 - Patch: Remove description field from top level `meta` object in component `.stories.svelte` files (do not render)
+- Feature: CLI command to generate new component boilerplate (`npm run create-component`)
 
 ## v0.10.2
 

README.md

@@ -26,6 +26,14 @@ To build your library:
 npm run package
 ```
 
+### CLI-based command for creating new component boilerplate
+
+To create three boilerplate files for a new component (`ComponentName.svelte`, `ComponentName.stories.svelte`, and `ComponentName.docs.md`), run the following command:
+
+```bash
+npm run create-component
+```
+
 ## Contributing to this library
 
 When contributing to this library, keep the following guidelines in mind. The [pull request template](https://github.com/UrbanInstitute/dataviz-components/blob/main/.github/pull_request_template.md) requires explanation of changes and provides a checklist of tasks to ensure clean code and documentation. Please name all branches in `kebab-case`, beginning with "patch", "feature", or "bugfix", and provide insightful commit messages.

bin/createComponent/createComponent.js

@@ -0,0 +1,61 @@
+#!/usr/bin/env node
+import inquirer from "inquirer";
+import fs from "fs";
+import path from "path";
+import { createStory } from "./createStory.js";
+import { createDocs } from "./createDocs.js";
+
+// check if PascalCase https://www.w3resource.com/javascript-exercises/javascript-string-exercise-56.php
+function isPascalCase(str) {
+  return /^[A-Z][A-Za-z]*$/.test(str);
+}
+
+async function main() {
+  await inquirer
+    .prompt([
+      {
+        type: "input",
+        name: "componentName",
+        message: "What is the name of your component? (ie: MyComponent)",
+        validate: (componentName) => {
+          // if not present
+          if (!componentName) {
+            return "Please enter a component name";
+            // if not PascalCase
+          } else if (!isPascalCase(componentName)) {
+            return "Component name must be in PascalCase";
+          } else {
+            return true;
+          }
+        }
+      }
+    ])
+    .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");
+
+        // Confirmation text
+        console.log(`Boilerplate files created in ${dir}`);
+      } else {
+        console.error("Directory already exists");
+      }
+    });
+}
+
+main().catch(console.error);

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"
+/>`;
+}