Merge pull request #5 from SigNoz/feat/custom-generator-empty-compone…

…nt-support feat: add support for generating non-shadcn component in the components library
SigNoz · Oct 1, 2024 · c761037 · c761037
2 parents db08ebc + 3413dc3
commit c761037
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -58,10 +58,11 @@ To create a new package:
    pnpm turbo gen new-package
    ```
 
-   When creating a new package, you'll be prompted to provide a name and description for it. Enter these details as requested. For example:
+   During the package creation process, you'll be asked to input a name, description, and choose between creating a component from scratch or importing one from shadcn. Provide the requested information as prompted. Here's an example:
 
-   - Package name: Enter a name that corresponds to a shadcn component (e.g., "dropdown-menu")
+   - Package name: component/package name (if you want to get the component from shadcn, Enter a name that corresponds to a shadcn component e.g. dropdown-menu)
    - Description: Provide a brief explanation of the package's purpose
+   - You can choose to either import a pre-built component from shadcn or create a new component from scratch
 
    e.g.
 
@@ -74,6 +75,9 @@ To create a new package:
 
    ? What is the name of the new package? dropdown-menu
    ? Provide a brief description of the package: dropdown menu package
+   ? Do you want to import a shadcn component or create a component from scratch? (Use arrow keys)
+   ❯ shadcn
+   from_scratch
    ```
 
    Executing this generator will automatically set up and configure the new package with the necessary files and structure.

diff --git a/turbo/generators/config.ts b/turbo/generators/config.ts
@@ -136,41 +136,76 @@ export default function generator(plop: PlopTypes.NodePlopAPI): void {
         template: `    "@signozhq/{{ name }}": "workspace:*",`,
       },
 
-      // add component from shadcn
-      (answers) => {
+      // Prompt for component type and create accordingly
+      async (answers) => {
         const { execSync } = require("child_process");
         const packagePath = path.resolve(
           PROJECT_ROOT,
           `packages/${(answers as { name: string }).name}`
         );
 
-        console.log(
-          `Running shadcn command for ${(answers as { name: string }).name}`
-        );
-        try {
-          execSync(
-            `pnpm dlx shadcn@latest add ${(answers as { name: string }).name}`,
-            {
-              cwd: packagePath,
-              stdio: "inherit",
-            }
+        const { componentType } = await inquirer.prompt([
+          {
+            type: "list",
+            name: "componentType",
+            message:
+              "Do you want to import a shadcn component or create a component from scratch?",
+            choices: ["shadcn", "from_scratch"],
+          },
+        ]);
+
+        if (componentType === "shadcn") {
+          console.log(
+            `Running shadcn command for ${(answers as { name: string }).name}`
           );
+          try {
+            execSync(
+              `pnpm dlx shadcn@latest add ${(answers as { name: string }).name}`,
+              {
+                cwd: packagePath,
+                stdio: "inherit",
+              }
+            );
 
-          // Append import statement to the newly generated component
+            // Append import statement to the newly generated component
+            const componentPath = path.join(
+              packagePath,
+              `src/${(answers as { name: string }).name}.tsx`
+            );
+            const componentContent = fs.readFileSync(componentPath, "utf8");
+            const updatedContent = `import "./index.css"\n${componentContent}`;
+            fs.writeFileSync(componentPath, updatedContent);
+
+            return `Shadcn ${(answers as { name: string }).name} added successfully and import statement appended`;
+          } catch (error) {
+            console.error("Error running shadcn command:", error);
+            return `Failed to add shadcn ${(answers as { name: string }).name}`;
+          }
+        } else {
+          // Create a component from scratch
           const componentPath = path.join(
             packagePath,
             `src/${(answers as { name: string }).name}.tsx`
           );
-          const componentContent = fs.readFileSync(componentPath, "utf8");
-          const updatedContent = `import "./index.css"\n${componentContent}`;
-          fs.writeFileSync(componentPath, updatedContent);
+          const componentName =
+            (answers as { name: string }).name.charAt(0).toUpperCase() +
+            (answers as { name: string }).name.slice(1);
+          const componentContent = `
 
-          return `Shadcn ${(answers as { name: string }).name} added successfully and import statement appended`;
-        } catch (error) {
-          console.error("Error running shadcn command:", error);
-          return `Failed to add shadcn ${(answers as { name: string }).name}`;
+  const ${componentName} = () => {
+    return (
+      <div>${(answers as { name: string }).name}</div>
+    );
+  };
+
+  export default ${componentName};
+
+`;
+          fs.writeFileSync(componentPath, componentContent);
+          return `component  ${(answers as { name: string }).name} created from scratch successfully`;
         }
       },
+
       // Create a generic story file
       (answers) => {
         const storyPath = path.resolve(