update component creation logic to handle command arguments, DRY

UrbanInstitute · Jul 25, 2024 · 18b2ce6 · 18b2ce6
1 parent ef6791b
commit 18b2ce6
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 77 deletions.
diff --git a/bin/createComponent/createComponent.js b/bin/createComponent/createComponent.js
@@ -1,7 +1,8 @@
 #!/usr/bin/env node
-import inquirer from "inquirer";
+import { input } from "@inquirer/prompts";
 import fs from "fs";
 import path from "path";
+import process from "process";
 import { createStory } from "./createStory.js";
 import { createDocs } from "./createDocs.js";
 
@@ -10,52 +11,62 @@ function isPascalCase(str) {
   return /^[A-Z][A-Za-z]*$/.test(str);
 }
 
+// check if name is valid
+function validateName(componentName) {
+  if (!componentName) {
+    return "Please enter a component name";
+  } else if (!isPascalCase(componentName)) {
+    return "Component name must be in PascalCase";
+  } else {
+    return true;
+  }
+}
+
+function createFiles(componentName) {
+  // validate file name
+  const validated = validateName(componentName);
+  if (validated !== true) {
+    return console.error(validated);
+  }
+
+  // declare dir
+  const dir = path.join(process.cwd(), "src", "lib", componentName);
+
+  // if directory exists show error, else create files
+  if (fs.existsSync(dir)) {
+    console.error("Directory already exists");
+  } else {
+    // 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}`);
+  }
+}
+
 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");
-      }
-    });
+  // if there's an argument in the command, use it (but no more)
+  if (process.argv[2] && !process.argv[3]) {
+    createFiles(process.argv[2]);
+  } else {
+    // show input
+    await input({
+      message: "What is the name of your component? (ie: MyComponent)",
+      validate: validateName
+    }).then(createFiles);
+  }
 }
 
 main().catch(console.error);
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
   },
   "devDependencies": {
     "@etchteam/storybook-addon-github-link": "^1.0.1",
+    "@inquirer/prompts": "^5.3.2",
     "@storybook/addon-a11y": "^8.0.5",
     "@storybook/addon-essentials": "^8.0.5",
     "@storybook/addon-interactions": "^8.0.5",
@@ -73,7 +74,6 @@
     "@sveltejs/package": "^2.3.0",
     "concurrently": "^8.2.2",
     "http-server": "^14.1.1",
-    "inquirer": "^10.1.2",
     "prettier": "^3.2.5",
     "prettier-plugin-svelte": "^3.2.2",
     "publint": "^0.1.9",