generator-madge-capture 1.0.4

package/.editorconfig

@@ -0,0 +1,11 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

package/.eslintignore

@@ -0,0 +1,3 @@
+node_modules
+coverage
+app/templates

package/README.md

@@ -0,0 +1,12 @@
+# generator-nextjs-orm-app
+A yeoman generator to scaffold a fully functioning Nextjs app with drizzle orm.
+
+This is my first attempt at a serious yeoman generator.
+I based the Next js code from the "Max Programming" Youtube channel which can be found [here](https://www.youtube.com/watch?v=SxuPB-04Tdw "Max Programming")
+
+The instructions for installing Yeoman can be found [here](https://yeoman.io/learning/) but basically it's as simple as 
+`npm install -g yo`
+
+You *should* end up with a simple Next JS app that uses drizzle as the intermediary between the front end and the server, storing the data in a small Sqlite database.
+
+

package/generators/app/index.js

@@ -0,0 +1,314 @@
+import Generator from "yeoman-generator";
+import chalk from "chalk";
+import yosay from "yosay";
+import commandExists from "command-exists";
+import os from "node:os";
+import madge from "madge";
+import path from "path";
+import fs, { rmSync } from "fs";
+
+import { saveMadgeReports } from "./lib/saveMadgeReports.js"; // Remember the .js!
+import {
+  openExplorer,
+  syncDependencies,
+  findCommonBase,
+  getSourceVersions,
+} from "./lib/extractComponents.js";
+import { getPrompts } from "./lib/prompts.js";
+import { component } from "0g";
+
+export default class extends Generator {
+  initializing() {}
+
+  welcome() {
+    this.log("MADGE CAPTURE  P R O J E C T");
+  }
+  async prompting() {
+    let msgText =
+      "This generator will run MADGE at a given location and save the output.\n\n";
+    msgText +=
+      "It will create a new folder with the name you specify, and populate it with the necessary madge files.\n";
+    this.log(
+      yosay(
+        chalk.red.bold("Welcome to the Madge Capture Project generator!\n\n") +
+          chalk.whiteBright(msgText),
+      ),
+    );
+    // Don't really need this as madge is added to
+    // dependencies in package.json.
+    if (commandExists("madge")) {
+      this.log("Madge already installed!");
+    } else {
+      this.log("Madge not found. Adding to dependencies...");
+    }
+    const homeDir = os.homedir(); // ← "C:\Users\<USERNAME>"
+    const defaultCaptureBase = path.join(homeDir, "madge-capture");
+
+    this.answers = await this.prompt(getPrompts(defaultCaptureBase));
+  }
+
+  async writing() {
+    const { sourcePath, mode } = this.answers;
+
+    // Validate existence
+    if (!fs.existsSync(sourcePath)) {
+      this.log.error(`File not found: ${sourcePath}`);
+      return;
+    }
+
+    const componentName = path.parse(sourcePath).name;
+    let finalTarget;
+
+    if (mode === "existing") {
+      finalTarget = path.join(
+        this.answers.existingProjectPath,
+        this.answers.componentSubDir,
+        componentName,
+      );
+    } else {
+      finalTarget = path.join(this.answers.outputPath, componentName);
+    }
+
+    // Clean up previous extraction...
+    if (fs.existsSync(finalTarget)) {
+      this.log(`🧹 Cleaning up old extraction at ${finalTarget}...`);
+      // Recursive delete to ensure a fresh start
+      rmSync(finalTarget, { recursive: true, force: true });
+    }
+
+    this.log(`🚀 Analyzing ${componentName}...`);
+    // =============================================
+    // Run Madge
+    // =============================================
+    try {
+      const res = await madge(sourcePath, {
+        baseDir: path.dirname(sourcePath),
+      });
+
+      const madgeObj = res.obj();
+      // 1. Get ALL absolute paths (including the entry file)
+      const absoluteList = [path.resolve(sourcePath)];
+      // 2. Resolve all unique absolute paths
+      const uniquePaths = new Set();
+      uniquePaths.add(path.resolve(sourcePath)); // Add the entry file itself
+
+      Object.entries(madgeObj).forEach(([file, deps]) => {
+        const dir = path.dirname(sourcePath);
+        absoluteList.push(path.resolve(dir, file));
+        deps.forEach((d) => absoluteList.push(path.resolve(dir, d)));
+      });
+
+      // 2. Find the Common Ancestor (The "New Horizon")
+      const commonBase = findCommonBase(absoluteList);
+      this.log(`📍 Common Base identified: ${commonBase}`);
+      let relativeComponentPath = path
+        .relative(commonBase, sourcePath)
+        .replace(/\\/g, "/");
+
+      // Check if the source was a .js file that we likely renamed to .jsx
+      if (relativeComponentPath.endsWith(".js")) {
+        const content = fs.readFileSync(sourcePath, "utf8");
+        if (/<[A-Z]/.test(content) || /import.*React/i.test(content)) {
+          relativeComponentPath = relativeComponentPath.replace(
+            /\.js$/,
+            ".jsx",
+          );
+        }
+      }
+
+      this.log(
+        `📍 Relative Component Path identified: ${relativeComponentPath}`,
+      );
+      const assetExtensions = [
+        ".css",
+        ".scss",
+        ".sass",
+        ".svg",
+        ".png",
+        ".jpg",
+      ];
+      const expandedList = new Set(absoluteList);
+
+      // Look for siblings of our JS dependencies
+      absoluteList.forEach((filePath) => {
+        const dir = path.dirname(filePath);
+        const siblings = fs.readdirSync(dir);
+
+        siblings.forEach((file) => {
+          const ext = path.extname(file).toLowerCase();
+          if (assetExtensions.includes(ext)) {
+            expandedList.add(path.resolve(dir, file));
+          }
+        });
+      });
+
+      const finalCopyList = Array.from(expandedList);
+      this.log(
+        `🎨 Added ${finalCopyList.length - absoluteList.length} assets (CSS/SVGs) to the queue.`,
+      );
+      // 3. Sync using the commonBase as the anchor
+      // This prevents the ../../ from ever leaving the finalTarget folder
+      syncDependencies(this, finalCopyList, commonBase, finalTarget);
+
+      await saveMadgeReports(res, finalTarget, componentName);
+
+      this.log(`✅ Reports saved to: ${finalTarget}`);
+      // =============================================
+      // Populate sandbox components
+      // =============================================
+      const shouldGenerateTemplates =
+        (mode === "new" && this.answers.createSandBox) || mode === "existing";
+
+      if (shouldGenerateTemplates) {
+        this.log(`✅ Copying templates: ${componentName}`);
+        const peerDepsToSync = [
+          "react",
+          "react-dom",
+          "react-datepicker",
+          "react-select",
+          "react-router",
+          "prop-types",
+          "date-fns",
+          "lucide-react",
+          "@mui/material",
+          "framer-motion",
+          "styled-components",
+          "lodash",
+          "react-hot-toast",
+        ];
+        // Grab the actual versions from your D: drive
+        const syncedVersions = getSourceVersions(
+          path.dirname(sourcePath),
+          peerDepsToSync,
+        );
+
+        // Merge with your defaults (fallback to 18.2.0 if not found)
+        const finalDeps = {
+          react: syncedVersions["react"] || "^18.2.0",
+          "react-dom": syncedVersions["react-dom"] || "^18.2.0",
+          ...syncedVersions,
+        };
+
+        this.log(
+          `📦 Synced ${Object.keys(syncedVersions).length} peer dependencies from source.`,
+        );
+
+        if (mode === "new") {
+          // Pass finalDeps to the Template
+          this.fs.copyTpl(
+            this.templatePath("sandbox/package.json"),
+            path.join(finalTarget, "package.json"),
+            {
+              componentName,
+              dependenciesJSON: JSON.stringify(finalDeps, null, 2).replace(
+                /\n/g,
+                "\n    ",
+              ),
+            },
+          );
+
+          this.fs.copyTpl(
+            this.templatePath("sandbox/vite.config.js"),
+            path.join(finalTarget, "vite.config.js"),
+          );
+
+          this.fs.copyTpl(
+            this.templatePath("sandbox/index.html"),
+            path.join(finalTarget, "index.html"),
+            { componentName, relativeComponentPath },
+          );
+
+          // Define the storybook config directory
+          const sbConfigDir = path.join(finalTarget, ".storybook");
+
+          // Copy main.js
+          this.fs.copyTpl(
+            this.templatePath("sandbox/.storybook/main.js"),
+            path.join(sbConfigDir, "main.js"),
+          );
+
+          // Copy preview.js
+          this.fs.copyTpl(
+            this.templatePath("sandbox/.storybook/preview.js"),
+            path.join(sbConfigDir, "preview.js"),
+          );
+
+          // Readme.md file
+          this.fs.copyTpl(
+            this.templatePath("sandbox/README.md"),
+            path.join(finalTarget, "README.md"),
+            {
+              componentName,
+              sourcePath: this.answers.sourcePath, // The D: drive path
+              commonBase, // The anchor point
+              relativeComponentPath,
+            },
+          );
+        }
+
+        this.fs.copyTpl(
+          this.templatePath("sandbox/Component.stories.jsx"),
+          path.join(finalTarget, `${componentName}.stories.jsx`),
+          {
+            componentName,
+            relativeComponentPath, // Point to the extracted location
+          },
+        );
+
+        await this.fs.commit(); // Forces Yeoman to write templates to disk NOW
+      }
+    } catch (err) {
+      this.log.error(`Failed to process reports: ${err.message}`);
+    }
+  }
+  async install() {
+    if (this.answers.mode === "new" && this.answers.createSandBox) {
+      console.log("Installing dependencies, please wait...");
+      const componentName = path.parse(this.answers.sourcePath).name;
+      const finalTarget = path.join(this.answers.outputPath, componentName);
+
+      this.log(`\n📦 Running npm install in ${finalTarget}...`);
+
+      // We use spawnSync to ensure it finishes before the 'end' phase
+      this.spawnSync("npm", ["install"], {
+        cwd: finalTarget,
+      });
+    }
+  }
+  async end() {
+    const componentName = path.parse(this.answers.sourcePath).name;
+    let finalPath;
+    if (this.answers.mode === "existing") {
+      finalPath = path.join(
+        this.answers.existingProjectPath,
+        this.answers.componentSubDir,
+        componentName,
+      );
+    } else {
+      finalPath = path.join(this.answers.outputPath, componentName);
+    }
+
+    this.log("\n" + "=".repeat(40));
+    this.log("🚀 EXTRACTION COMPLETE!");
+    this.log("=".repeat(40));
+    this.log(`📍 Location: ${finalPath}`);
+    this.log("=".repeat(40));
+
+    if (this.answers.mode === "new" && this.answers.createSandBox) {
+      this.log(`\nTo start your component, run:`);
+      this.log(`1. cd "${finalPath}"`);
+      this.log(`2. npm run storybook   <-- View component in isolation`);
+      this.log(`3. npm run dev         <-- View raw Vite app`);
+    } else if (this.answers.mode === "existing") {
+      this.log(`\nComponent added to existing project.`);
+      this.log(`You may need to install missing dependencies manually.`);
+    } else if (this.answers.mode === "dependency_only") {
+      this.log(`To view your component:`);
+      this.log(`→   cd "${finalPath}"`);
+      this.log(`You may need to install missing dependencies manually.`);
+    }
+
+    // open the folder for the user if requested
+    if (this.answers.openExplorer) openExplorer(finalPath);
+  }
+}

package/generators/app/lib/extractComponents.js

@@ -0,0 +1,201 @@
+import path from "path";
+import fs from "fs";
+import { exec } from "child_process";
+
+export const extractComponent = (
+  generator,
+  madgeObj,
+  sourceFile,
+  targetDir,
+) => {
+  const sourceRoot = path.dirname(sourceFile);
+
+  // 1. Get all unique file paths from Madge (keys and values)
+  const allFiles = new Set([sourceFile]);
+  Object.entries(madgeObj).forEach(([file, deps]) => {
+    // Madge paths are relative to the sourceFile directory
+    allFiles.add(path.resolve(sourceRoot, file));
+    deps.forEach((dep) => allFiles.add(path.resolve(sourceRoot, dep)));
+  });
+
+  generator.log(`Found ${allFiles.size} total files to extract.`);
+
+  // 2. Copy files and maintain structure
+  allFiles.forEach((absolutePath) => {
+    if (fs.existsSync(absolutePath) && fs.lstatSync(absolutePath).isFile()) {
+      // Calculate where it should go in the target
+      // We want to keep the relative relationship it had with the sourceRoot
+      const relativeToRoot = path.relative(sourceRoot, absolutePath);
+      const destination = path.join(targetDir, relativeToRoot);
+
+      // Use Yeoman's file system (standard fs works too for external paths)
+      fs.mkdirSync(path.dirname(destination), { recursive: true });
+      fs.copyFileSync(absolutePath, destination);
+    }
+  });
+};
+
+export const getAbsoluteFiles = (dependencyJson, sourceFile) => {
+  const sourceDir = path.dirname(sourceFile);
+  const uniquePaths = new Set();
+
+  Object.entries(dependencyJson).forEach(([key, deps]) => {
+    // 1. Resolve the 'key' (the file itself)
+    // path.resolve automatically handles those ../../ and gives a clean D:\ path
+    uniquePaths.add(path.resolve(sourceDir, key));
+
+    // 2. Resolve every dependency listed for that file
+    deps.forEach((dep) => {
+      uniquePaths.add(path.resolve(sourceDir, dep));
+    });
+  });
+
+  return Array.from(uniquePaths);
+};
+
+/**
+ * Copies dependency files while preserving folder structure.
+ * @param {Generator} gen - The Yeoman generator instance for logging
+ * @param {string[]} absolutePaths - Array of resolved absolute source paths
+ * @param {string} sourceRoot - The directory of the entry component (D:\...\Form)
+ * @param {string} targetDir - The destination root (C:\...\madge-capture\Form)
+ */
+export const syncDependencies = (gen, absolutePaths, sourceRoot, targetDir) => {
+  let copiedCount = 0;
+  let missingCount = 0;
+
+  absolutePaths.forEach((srcPath) => {
+    try {
+      // Check if file exists
+      if (!fs.existsSync(srcPath)) {
+        gen.log.error(`File missing (skipped): ${srcPath}`);
+        missingCount++;
+        return;
+      }
+
+      // Determine relative path from the source component
+      // e.g., if sourceRoot is .../Form and srcPath is .../utils/date.js
+      // relativePart will be "../../utils/date.js"
+      const relativePart = path.relative(sourceRoot, srcPath);
+
+      // Create the final destination path
+      let destPath = path.join(targetDir, relativePart);
+      let content = fs.readFileSync(srcPath, "utf8");
+      let isReactFile = false;
+
+      // --- Extension Logic ---
+      if (srcPath.endsWith(".js")) {
+        isReactFile =
+          /import.*React/i.test(content) ||
+          /<[A-Z]/.test(content) ||
+          /return\s*\(/.test(content);
+        if (isReactFile) {
+          destPath = destPath.replace(/\.js$/, ".jsx");
+        }
+      }
+      // The Regex Import Renamer
+      // This regex looks for:
+      // - Strings starting with 'from' or 'import'
+      // - Followed by a quote (' or ")
+      // - Followed by a relative path (./ or ../)
+      // - Ending with .js before the closing quote
+      const importRegex = /(from|import)\s+(['"])((\.\.?\/)+.*)\.js(['"])/g;
+      // We only perform the replacement on JS/JSX files
+      if (srcPath.match(/\.(js|jsx)$/)) {
+        content = content.replace(importRegex, (match, p1, p2, p3, p4, p5) => {
+          // We check if the file being imported is one of the ones we are extracting
+          // For simplicity, we assume if it's a relative import, it needs the .jsx swap
+          return `${p1} ${p2}${p3}.jsx${p5}`;
+        });
+      }
+      // Ensure destination folder exists
+      const destFolder = path.dirname(destPath);
+      if (!fs.existsSync(destFolder)) {
+        fs.mkdirSync(destFolder, { recursive: true });
+      }
+
+      // Perform the copy
+      // We use writeFileSync instead of copyFileSync to save our modified content
+      fs.writeFileSync(destPath, content);
+      copiedCount++;
+    } catch (err) {
+      gen.log.error(`Failed to copy ${srcPath}: ${err.message}`);
+    }
+  });
+
+  gen.log(`\nFinal Sync Report:`);
+  gen.log(`✅ Copied: ${copiedCount}`);
+  if (missingCount > 0) gen.log(`⚠️ Missing: ${missingCount}`);
+};
+/**
+ * Finds the shortest common parent directory for an array of absolute paths.
+ */
+export const findCommonBase = (files) => {
+  if (files.length === 0) return "";
+
+  // Split paths into segments
+  const splitPaths = files.map((f) => f.split(path.sep));
+  let common = splitPaths[0];
+
+  for (let i = 1; i < splitPaths.length; i++) {
+    let j = 0;
+    while (
+      j < common.length &&
+      j < splitPaths[i].length &&
+      common[j] === splitPaths[i][j]
+    ) {
+      j++;
+    }
+    common = common.slice(0, j);
+  }
+  return common.join(path.sep);
+};
+
+/**
+ * Finds the nearest package.json and extracts versions for requested deps
+ * @param {string} startPath - Directory to start searching from
+ * @param {string[]} depNames - Array of package names to find
+ * @returns {Object} - Key/Value pair of package names and versions
+ */
+export const getSourceVersions = (startPath, depNames) => {
+  let currentDir = startPath;
+  let foundPath = null;
+
+  // 1. Climb up the tree to find the nearest package.json
+  while (currentDir !== path.parse(currentDir).root) {
+    const checkPath = path.join(currentDir, "package.json");
+    if (fs.existsSync(checkPath)) {
+      foundPath = checkPath;
+      break;
+    }
+    currentDir = path.dirname(currentDir);
+  }
+
+  if (!foundPath) return {};
+
+  const pkg = JSON.parse(fs.readFileSync(foundPath, "utf8"));
+  const allAvailable = { ...pkg.devDependencies, ...pkg.dependencies };
+
+  const results = {};
+  depNames.forEach((name) => {
+    if (allAvailable[name]) {
+      results[name] = allAvailable[name];
+    }
+  });
+
+  return results;
+};
+
+/**
+ * Opens a folder in the native OS file explorer
+ * @param {string} folderPath
+ */
+export const openExplorer = (folderPath) => {
+  // On Windows, 'explorer' is the command.
+  // We wrap the path in quotes to handle spaces in folder names.
+  exec(`explorer "${folderPath}"`, (err) => {
+    if (err) {
+      console.error(`Could not open explorer: ${err.message}`);
+    }
+  });
+};

package/generators/app/lib/prompts.js

@@ -0,0 +1,63 @@
+export const getPrompts = (defaultCaptureBase) => [
+  {
+    type: "input",
+    name: "sourcePath",
+    message: "Enter the location of the component:",
+    default: "D:\\Web.Application\\React\\Components\\Form.js",
+    store: true,
+  },
+  {
+    type: "list",
+    name: "mode",
+    message: "How do you want to export this component?",
+    choices: [
+      { name: "Create a new Storybook Project", value: "new" },
+      { name: "Add to an existing Storybook Project", value: "existing" },
+      {
+        name: "Create component dependency folder and files only",
+        value: "dependency_only",
+      },
+    ],
+    default: "new",
+    store: true,
+  },
+  {
+    type: "input",
+    name: "outputPath",
+    message: "Where do you want to save the output files?",
+    default: defaultCaptureBase,
+    when: (answers) =>
+      answers.mode === "new" || answers.mode === "dependency_only",
+    store: true,
+  },
+  {
+    type: "input",
+    name: "existingProjectPath",
+    message: "Enter the root path of your existing project:",
+    when: (answers) => answers.mode === "existing",
+    store: true,
+  },
+  {
+    type: "input",
+    name: "componentSubDir",
+    message: "Sub-directory for the component (relative to project root):",
+    default: "src/components",
+    when: (answers) => answers.mode === "existing",
+    store: true,
+  },
+  {
+    type: "confirm",
+    name: "createSandBox",
+    message: "Create sandbox files to run in StoryBoard?",
+    default: true,
+    when: (answers) => answers.mode === "new",
+    store: true,
+  },
+  {
+    type: "confirm",
+    name: "openExplorer",
+    message: "Open explorer to show copied files?",
+    default: true,
+    store: true,
+  },
+];

package/generators/app/lib/saveMadgeReports.js

@@ -0,0 +1,43 @@
+import fs from "fs";
+import path from "path";
+
+/**
+ * Generates and saves both JSON and Markdown dependency reports.
+ * @param {Object} res - The result object from madge()
+ * @param {string} outputDir - Directory to save files
+ * @param {string} baseName - Filename without extension
+ */
+export const saveMadgeReports = async (res, outputDir, baseName) => {
+  // 1. Generate Markdown Content
+  const deps = res.obj();
+  const circular = res.circular();
+  const date = new Date().toLocaleDateString();
+
+  let markdown = `# Dependency Report: ${baseName}\n`;
+  markdown += `*Generated on ${date}*\n\n`;
+  markdown += `## Summary\n* **Total Files:** ${Object.keys(deps).length}\n`;
+  markdown += `* **Circular Dependencies:** ${circular.length > 0 ? `⚠️ ${circular.length}` : "✅ None"}\n\n`;
+
+  markdown += `## Dependency Details\n| File | Depends On |\n| :--- | :--- |\n`;
+  Object.entries(deps).forEach(([file, childDeps]) => {
+    const depList =
+      childDeps.length > 0
+        ? childDeps.map((d) => `\`${d}\``).join(", ")
+        : "_None_";
+    markdown += `| \`${file}\` | ${depList} |\n`;
+  });
+
+  // 2. Prepare Paths
+  if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true });
+  }
+
+  const jsonPath = path.join(outputDir, `${baseName}.json`);
+  const mdPath = path.join(outputDir, `${baseName}.md`);
+
+  // 3. Write Files
+  fs.writeFileSync(jsonPath, JSON.stringify(deps, null, 2));
+  fs.writeFileSync(mdPath, markdown);
+
+  return { jsonPath, mdPath };
+};

package/generators/app/templates/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/generators/app/templates/sandbox/.storybook/main.js

@@ -0,0 +1,13 @@
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+  stories: ["../**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: ["@storybook/addon-essentials"],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

package/generators/app/templates/sandbox/.storybook/preview.js

@@ -0,0 +1,18 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+// If you have a global CSS file you've extracted,
+// you would import it here:
+// import '../global.css';
+
+export default preview;

package/generators/app/templates/sandbox/Component.stories.jsx

@@ -0,0 +1,18 @@
+import Component from "./<%= relativeComponentPath %>";
+
+export default {
+  title: "Extracted/<%= componentName %>",
+  component: Component,
+  tags: ["autodocs"], // This tells Storybook to build the prop table automatically
+  argTypes: {
+    // You can manually override prop controls here if needed
+  },
+};
+
+export const Primary = {
+  args: {
+    // You can set default prop values here
+    // label: 'Click Me',
+    // primary: true,
+  },
+};

package/generators/app/templates/sandbox/README.md

@@ -0,0 +1,19 @@
+# 🧪 Sandbox: <%= componentName %>
+
+This is an isolated sandbox for the `<%= componentName %>` component, extracted from the main monorepo for testing and documentation.
+
+## 📍 Source Information
+- **Original Path:** `<%= sourcePath %>`
+- **Extracted On:** <%= new Date().toLocaleString() %>
+- **Common Base Anchor:** `<%= commonBase %>`
+
+## 🛠 Features
+- **Vite:** Fast HMR development environment.
+- **Storybook 8:** Interactive component documentation and testing.
+- **Automatic JSX Conversion:** Legacy `.js` files have been converted to `.jsx`.
+
+## 🚀 Getting Started
+
+To start the development server:
+```bash
+npm run dev

package/generators/app/templates/sandbox/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sandbox: <%= componentName %></title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module">
+      import React from 'react';
+      import ReactDOM from 'react-dom/client';
+      // We dynamically point this to the extracted component
+      import Component from './<%= relativeComponentPath %>';
+
+      ReactDOM.createRoot(document.getElementById('root')).render(
+        React.createElement(Component)
+      );
+    </script>
+  </body>
+</html>

package/generators/app/templates/sandbox/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "sandbox-<%= componentName %>",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": <%- dependenciesJSON %>,
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.0.0",
+    "vite": "^4.4.0",
+    "storybook": "^8.0.0",
+    "@storybook/react": "^8.0.0",
+    "@storybook/react-vite": "^8.0.0",
+    "@storybook/addon-essentials": "^8.0.0"
+  }
+}

package/generators/app/templates/sandbox/vite.config.js

@@ -0,0 +1,22 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import path from "path";
+
+export default defineConfig({
+  plugins: [react()],
+  optimizeDeps: {
+    // Force Vite to pre-bundle these even if it's confused by the imports
+    include: ["react-hot-toast", "prop-types"],
+  },
+  resolve: {
+    alias: {
+      // If your monorepo uses aliases (e.g. '@utils'),
+      // you can map them here to the folders you extracted.
+      // '@utils': path.resolve(__dirname, './utils'),
+    },
+  },
+  server: {
+    open: true, // Automatically open the browser
+    port: 3000,
+  },
+});

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "generator-madge-capture",
+  "version": "1.0.4",
+  "description": "Capture madge output for a given file",
+  "author": {
+    "name": "Tony Edwards",
+    "url": "https://github.com/vomoir/generator-madge-capture"
+  },
+  "main": "index.js",
+  "type": "module",
+  "module": "dist/react-lib.esm.js",
+  "jsnext:main": "dist/react-lib.esm.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "yeoman-generator",
+    "yeoman",
+    "generator",
+    "inception",
+    "init",
+    "create",
+    "boilerplate"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vomoir/generator-madge-capture.git"
+  },
+  "license": "ISC",
+  "dependencies": {
+    "chalk": "^4.0.0",
+    "command-exists": "^1.2.9",
+    "yeoman-generator": "^6.0.0",
+    "yosay": "^2.0.2",
+    "madge": "^8.0.0"
+  },
+  "eslintConfig": {
+    "extends": [
+      "xo-space/esnext",
+      "prettier"
+    ],
+    "env": {
+      "jest": true,
+      "node": true
+    },
+    "rules": {
+      "prettier/prettier": [
+        "error",
+        {
+          "singleQuote": true,
+          "printWidth": 90
+        }
+      ]
+    },
+    "plugins": [
+      "prettier"
+    ]
+  },
+  "bugs": {
+    "url": "https://github.com/vomoir/generator-madge-capture/issues"
+  },
+  "homepage": "https://github.com/vomoir/generator-madge-capture"
+}