muscle-config 1.0.0

package/dist/generators/css-plain.generator.js

@@ -0,0 +1,215 @@
+// ─── Helpers ───
+const colorMap = {
+    indigo: "#6366f1",
+    emerald: "#10b981",
+    neutral: "#737373",
+};
+const fontMap = {
+    inter: "Inter, sans-serif",
+    poppins: "Poppins, sans-serif",
+    cairo: "Cairo, sans-serif",
+};
+const fontImportMap = {
+    inter: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap",
+    poppins: "https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap",
+    cairo: "https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;700&display=swap",
+};
+function getPrimaryColor(config) {
+    return config.colorPreset === "custom"
+        ? (config.customColor ?? "#6366f1")
+        : (colorMap[config.colorPreset] ?? "");
+}
+// ─── reset.css ───
+export function generateCssReset() {
+    return `
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  min-height: 100vh;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+
+input, button, textarea, select {
+  font: inherit;
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+`.trim();
+}
+// ─── variables.css ───
+export function generateCssVariables(config) {
+    const lines = [];
+    const primaryColor = getPrimaryColor(config);
+    if (config.font !== "none") {
+        lines.push(`@import url('${fontImportMap[config.font]}');`);
+        lines.push("");
+    }
+    lines.push(":root {");
+    if (primaryColor) {
+        lines.push(`  --color-primary: ${primaryColor};`);
+        lines.push(`  --color-primary-hover: ${primaryColor}cc;`);
+    }
+    if (config.font !== "none") {
+        lines.push(`  --font-base: ${fontMap[config.font]};`);
+    }
+    lines.push("  --radius: 0.5rem;");
+    lines.push("  --spacing: 1rem;");
+    lines.push("}");
+    if (config.darkMode === "class") {
+        lines.push("");
+        lines.push(".dark {");
+        if (primaryColor)
+            lines.push(`  --color-primary: ${primaryColor};`);
+        lines.push("  color-scheme: dark;");
+        lines.push("}");
+    }
+    if (config.darkMode === "media") {
+        lines.push("");
+        lines.push("@media (prefers-color-scheme: dark) {");
+        lines.push("  :root {");
+        lines.push("    color-scheme: dark;");
+        lines.push("  }");
+        lines.push("}");
+    }
+    return lines.join("\n");
+}
+// ─── typography.css ───
+export function generateCssTypography(config) {
+    const fontFamily = config.font !== "none"
+        ? `var(--font-base)`
+        : `system-ui, Avenir, Helvetica, Arial, sans-serif`;
+    return `
+body {
+  font-family: ${fontFamily};
+  font-size: 1rem;
+  font-weight: 400;
+  color: #171717;
+}
+
+h1 { font-size: 2.25rem; font-weight: 700; line-height: 1.2; }
+h2 { font-size: 1.875rem; font-weight: 600; line-height: 1.3; }
+h3 { font-size: 1.5rem; font-weight: 600; line-height: 1.4; }
+h4 { font-size: 1.25rem; font-weight: 500; }
+h5 { font-size: 1.125rem; font-weight: 500; }
+h6 { font-size: 1rem; font-weight: 500; }
+
+p { line-height: 1.7; }
+
+a {
+  color: var(--color-primary, #6366f1);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+`.trim();
+}
+// ─── index.css (single file mode) ───
+export function generateCssIndex(config) {
+    const lines = [];
+    const primaryColor = getPrimaryColor(config);
+    if (config.font !== "none") {
+        lines.push(`@import url('${fontImportMap[config.font]}');`);
+        lines.push("");
+    }
+    if (config.reset) {
+        lines.push("/* ─── Reset ─────────────────────────────── */");
+        lines.push(generateCssReset());
+        lines.push("");
+    }
+    lines.push("/* ─── Variables ─────────────────────────── */");
+    lines.push(":root {");
+    if (primaryColor) {
+        lines.push(`  --color-primary: ${primaryColor};`);
+        lines.push(`  --color-primary-hover: ${primaryColor}cc;`);
+    }
+    if (config.font !== "none") {
+        lines.push(`  --font-base: ${fontMap[config.font]};`);
+    }
+    lines.push("  --radius: 0.5rem;");
+    lines.push("  --spacing: 1rem;");
+    lines.push("}");
+    if (config.darkMode === "class") {
+        lines.push("");
+        lines.push(".dark {");
+        lines.push("  color-scheme: dark;");
+        lines.push("}");
+    }
+    if (config.darkMode === "media") {
+        lines.push("");
+        lines.push("@media (prefers-color-scheme: dark) {");
+        lines.push("  :root {");
+        lines.push("    color-scheme: dark;");
+        lines.push("  }");
+        lines.push("}");
+    }
+    lines.push("");
+    lines.push("/* ─── Typography ────────────────────────── */");
+    lines.push(`body {`);
+    lines.push(`  font-family: ${config.font !== "none" ? "var(--font-base)" : "system-ui, Avenir, Helvetica, Arial, sans-serif"};`);
+    lines.push(`  font-size: 1rem;`);
+    lines.push(`  color: #171717;`);
+    lines.push(`}`);
+    return lines.join("\n");
+}
+// ─── index.css (separate files mode) ───
+export function generateCssIndexWithImports(config) {
+    const lines = [];
+    if (config.reset)
+        lines.push(`@import "./styles/reset.css";`);
+    lines.push(`@import "./styles/variables.css";`);
+    lines.push(`@import "./styles/typography.css";`);
+    return lines.join("\n");
+}
+// ─── ThemeToggle.tsx / .jsx (plain CSS version) ───
+export function generateCssThemeToggle(isTypeScript) {
+    const stateType = isTypeScript ? "<boolean>" : "";
+    return `
+import { useState, useEffect } from "react";
+
+export default function ThemeToggle() {
+  const [dark, setDark] = useState${stateType}(() => {
+    return localStorage.getItem("theme") === "dark";
+  });
+
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", dark);
+    localStorage.setItem("theme", dark ? "dark" : "light");
+  }, [dark]);
+
+  return (
+    <button
+      onClick={() => setDark(!dark)}
+      style={{
+        padding: "0.4rem 0.8rem",
+        border: "1px solid currentColor",
+        borderRadius: "var(--radius, 0.5rem)",
+        cursor: "pointer",
+        background: "transparent",
+        fontSize: "1rem",
+      }}
+    >
+      {dark ? "🌙 Dark" : "☀️ Light"}
+    </button>
+  );
+}
+`.trim();
+}

package/dist/generators/css.generator.js

@@ -0,0 +1,45 @@
+export function generateIndexCss(config) {
+    const lines = [];
+    lines.push('@import "tailwindcss";');
+    // Font imports
+    if (config.font === "inter") {
+        lines.push(`@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');`);
+    }
+    if (config.font === "poppins") {
+        lines.push(`@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');`);
+    }
+    if (config.font === "cairo") {
+        lines.push(`@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;700&display=swap');`);
+    }
+    if (config.darkMode === "class") {
+        lines.push(`@custom-variant dark (&:where(.dark, .dark *));`);
+    }
+    lines.push("");
+    lines.push(":root {");
+    // Font Application
+    const fontFamilies = {
+        inter: "Inter, sans-serif",
+        poppins: "Poppins, sans-serif",
+        cairo: "Cairo, sans-serif",
+    };
+    // Applying
+    if (config.font !== "none")
+        lines.push(`  font-family: ${fontFamilies[config.font]};`);
+    if (config.colorPreset !== "none") {
+        const colors = {
+            indigo: "#6366f1",
+            emerald: "#10b981",
+            neutral: "#737373",
+            custom: config.customColor ?? "#6366f1",
+        };
+        lines.push(`  --color-primary: ${colors[config.colorPreset]};`);
+    }
+    lines.push("}");
+    if (config.darkMode === "class") {
+        lines.push("");
+        lines.push(".dark {");
+        lines.push("  color-scheme: dark;");
+        lines.push("}");
+    }
+    return lines.join("\n");
+}

package/dist/generators/mui.generator.js

@@ -0,0 +1,176 @@
+// ─── Helpers ───
+const colorMap = {
+    blue: "#1976d2",
+    purple: "#9c27b0",
+    green: "#2e7d32",
+};
+const fontImportMap = {
+    inter: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap",
+    poppins: "https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap",
+    cairo: "https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;700&display=swap",
+};
+const fontFamilyMap = {
+    inter: "Inter, sans-serif",
+    poppins: "Poppins, sans-serif",
+    cairo: "Cairo, sans-serif",
+};
+function getPrimaryColor(config) {
+    return config.colorPreset === "custom"
+        ? (config.customColor ?? "#1976d2")
+        : colorMap[config.colorPreset];
+}
+function getInitialMode(config) {
+    const systemMode = `window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"`;
+    return config.themeMode === "system"
+        ? `saved || (${systemMode})`
+        : `saved || "${config.themeMode}"`;
+}
+// ─── theme.ts ───
+export function generateMuiTheme(config, isTypeScript) {
+    const primaryColor = getPrimaryColor(config);
+    const tsImport = isTypeScript
+        ? `\nimport type { PaletteMode } from "@mui/material";`
+        : "";
+    const modeType = isTypeScript ? "mode: PaletteMode" : "mode";
+    return `
+import { createTheme } from "@mui/material/styles";${tsImport}
+
+export function createAppTheme(${modeType}) {
+  return createTheme({
+    palette: {
+      mode,
+      primary: {
+        main: "${primaryColor}",
+      },
+    },
+  });
+}
+`.trim();
+}
+// ─── ThemeToggle.tsx / .jsx ───
+export function generateMuiThemeToggle() {
+    return `
+import IconButton from "@mui/material/IconButton";
+import Brightness4Icon from "@mui/icons-material/Brightness4";
+import Brightness7Icon from "@mui/icons-material/Brightness7";
+import { useTheme } from "../context/ThemeContextProvider";
+
+export default function ThemeToggle() {
+  const { theme, toggleTheme } = useTheme();
+
+  return (
+    <IconButton onClick={toggleTheme} color="inherit">
+      {theme === "dark" ? <Brightness7Icon /> : <Brightness4Icon />}
+    </IconButton>
+  );
+}
+`.trim();
+}
+// ─── ThemeContextProvider.tsx / .jsx ───
+export function generateThemeContextProvider(config, isTypeScript) {
+    const initialMode = getInitialMode(config);
+    const tsBlock = isTypeScript
+        ? `
+type ThemeMode = "light" | "dark";
+
+interface ThemeContextType {
+  theme: ThemeMode;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextType>({} as ThemeContextType);`
+        : `
+const ThemeContext = createContext({});`;
+    const savedType = isTypeScript ? " as ThemeMode | null" : "";
+    const stateType = isTypeScript ? "<ThemeMode>" : "";
+    const returnType = isTypeScript ? ": ThemeContextType" : "";
+    const childrenType = isTypeScript
+        ? "({ children }: { children: React.ReactNode })"
+        : "({ children })";
+    return `
+import { createContext, useContext, useEffect, useState } from "react";
+
+const THEME_KEY = "theme";
+${tsBlock}
+
+export function ThemeContextProvider${childrenType} {
+  const [theme, setTheme] = useState${stateType}(() => {
+    const saved = localStorage.getItem(THEME_KEY)${savedType};
+    return ${initialMode};
+  });
+
+  useEffect(() => {
+    localStorage.setItem(THEME_KEY, theme);
+  }, [theme]);
+
+  const toggleTheme = () =>
+    setTheme((prev) => (prev === "light" ? "dark" : "light"));
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme()${returnType} {
+  return useContext(ThemeContext);
+}
+`.trim();
+}
+// ─── AppMuiThemeProvider.tsx / .jsx ───
+export function generateAppMuiThemeProvider(isTypeScript) {
+    const propsType = isTypeScript
+        ? "({ children }: { children: React.ReactNode })"
+        : "({ children })";
+    return `
+import { ThemeProvider as MuiThemeProvider } from "@mui/material/styles";
+import CssBaseline from "@mui/material/CssBaseline";
+import { useTheme } from "../context/ThemeContextProvider";
+import { createAppTheme } from "./theme";
+
+export default function AppMuiThemeProvider${propsType} {
+  const { theme } = useTheme();
+  const muiTheme = createAppTheme(theme);
+
+  return (
+    <MuiThemeProvider theme={muiTheme}>
+      <CssBaseline />
+      {children}
+    </MuiThemeProvider>
+  );
+}
+`.trim();
+}
+// ─── main.tsx / main.jsx ───
+export function generateMuiMain(isTypeScript) {
+    return `
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { ThemeContextProvider } from "./context/ThemeContextProvider";
+import AppMuiThemeProvider from "./themes/AppMuiThemeProvider";
+import App from "./App";
+
+createRoot(document.getElementById("root")${isTypeScript ? "!" : ""}).render(
+  <StrictMode>
+    <ThemeContextProvider>
+      <AppMuiThemeProvider>
+        <App />
+      </AppMuiThemeProvider>
+    </ThemeContextProvider>
+  </StrictMode>
+);
+`.trim();
+}
+// ─── index.css (MUI font setup) ───
+export function generateMuiIndexCss(config) {
+    if (config.font === "none")
+        return "";
+    return `
+@import url('${fontImportMap[config.font]}');
+
+body {
+  font-family: ${fontFamilyMap[config.font]};
+}
+`.trim();
+}

package/dist/generators/react.generator.js

@@ -0,0 +1,38 @@
+import { execa } from "execa";
+import { logger } from "../utils/logger.js";
+import { spinner } from "../utils/spinner.js";
+import path from "path";
+export async function generateReactProject(config) {
+    const template = config.framework === "react-ts" ? "react-ts" : "react";
+    const targetDir = config.directoryMode === "current" ? "." : config.projectName;
+    const projectPath = config.directoryMode === "current"
+        ? process.cwd()
+        : path.join(process.cwd(), config.projectName);
+    logger.info(`Creating project '${targetDir}' using template '${template}'...`);
+    try {
+        spinner.start("Scaffolding project with Vite...");
+        // Start Creating the project
+        await execa("npm", [
+            "create",
+            "vite@latest",
+            targetDir,
+            "--",
+            "--template",
+            template,
+            "--no-interactive",
+        ], { stdio: "ignore" });
+        spinner.succeed("Project scaffolded!");
+        // Installing dependencies
+        spinner.start("Installing dependencies — do not cancel this step...");
+        await execa("npm", ["install"], {
+            cwd: projectPath,
+            stdio: "ignore",
+        });
+        spinner.succeed("Dependencies installed!");
+        console.log("");
+    }
+    catch (error) {
+        spinner.fail("Failed to scaffold project.");
+        throw error;
+    }
+}

package/dist/generators/tailwind.config.generator.js

@@ -0,0 +1,17 @@
+export function generateTailwindConfig(config) {
+    const darkMode = config.darkMode ? `darkMode: "${config.darkMode}",` : "";
+    return `
+/** @type {import('tailwindcss').Config} */
+export default {
+  ${darkMode}
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+`.trim();
+}

package/dist/generators/toggle.generator.js

@@ -0,0 +1,26 @@
+export function generateThemeToggle(isTypeScript) {
+    const stateType = isTypeScript ? "<boolean>" : "";
+    return `
+import { useState, useEffect } from "react";
+
+export default function ThemeToggle() {
+  const [dark, setDark] = useState${stateType}(() => {
+    return localStorage.getItem("theme") === "dark";
+  });
+
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", dark);
+    localStorage.setItem("theme", dark ? "dark" : "light");
+  }, [dark]);
+
+  return (
+    <button
+      onClick={() => setDark(!dark)}
+      className="px-3 py-1 border rounded"
+    >
+      {dark ? "🌙 Dark" : "☀️ Light"}
+    </button>
+  );
+}
+`.trim();
+}

package/dist/index.js

@@ -0,0 +1,11 @@
+#!/usr/bin/env node
+import { createProject } from "./commands/create.command.js";
+import { welcome } from "./utils/welcome.js";
+const main = async () => {
+    await welcome();
+    await createProject();
+};
+main().catch((err) => {
+    console.error(err);
+    process.exit(1);
+});

package/dist/prompts/architecture.prompt.js

@@ -0,0 +1,131 @@
+import inquirer from "inquirer";
+const allFolderChoices = [
+    { name: "components", value: "components" },
+    { name: "hooks", value: "hooks" },
+    { name: "pages", value: "pages" },
+    { name: "layouts", value: "layouts" },
+    { name: "services", value: "services" },
+    { name: "utils", value: "utils" },
+    { name: "types", value: "types" },
+    { name: "assets", value: "assets" },
+    { name: "api", value: "api" },
+    { name: "validators", value: "validators" },
+    { name: "templates", value: "templates" },
+    { name: "themes", value: "themes" },
+    { name: "lib", value: "lib" },
+];
+const featurePresets = [
+    { name: "auth", value: "auth" },
+    { name: "dashboard", value: "dashboard" },
+    { name: "profile", value: "profile" },
+    { name: "settings", value: "settings" },
+    { name: "home", value: "home" },
+    { name: "products", value: "products" },
+    { name: "cart", value: "cart" },
+    { name: "checkout", value: "checkout" },
+];
+export async function askArchitecture() {
+    const { style } = await inquirer.prompt([
+        {
+            type: "list",
+            name: "style",
+            message: "Choose architecture style:",
+            choices: [
+                { name: "Layered        (recommended for small/mid apps) - more popular", value: "layered" },
+                { name: "Feature-based  (recommended for large apps)", value: "feature-based" },
+                { name: "Skip", value: "skip" },
+            ],
+        },
+    ]);
+    if (style === "skip") {
+        return {
+            style,
+            features: [],
+            featureFolders: [],
+            sharedFolders: [],
+            indexFiles: [],
+        };
+    }
+    if (style === "feature-based") {
+        const { features } = await inquirer.prompt([
+            {
+                type: "checkbox",
+                name: "features",
+                message: "Select features to generate:",
+                choices: featurePresets,
+            },
+        ]);
+        const { featureFolders } = await inquirer.prompt([
+            {
+                type: "checkbox",
+                name: "featureFolders",
+                message: "Select folders to generate inside each feature:",
+                choices: [
+                    { name: "components", value: "components", checked: true },
+                    { name: "hooks", value: "hooks", checked: true },
+                    { name: "services", value: "services", checked: true },
+                    { name: "utils", value: "utils" },
+                    { name: "types", value: "types" },
+                    { name: "validators", value: "validators" },
+                    { name: "api", value: "api" },
+                ],
+            },
+        ]);
+        const { sharedFolders } = await inquirer.prompt([
+            {
+                type: "checkbox",
+                name: "sharedFolders",
+                message: "Select shared folders to generate in src/:",
+                choices: allFolderChoices.map((f) => ({
+                    ...f,
+                    checked: ["components", "hooks", "layouts", "pages"].includes(f.value),
+                })),
+            },
+        ]);
+        const allSelected = [
+            ...new Set([...featureFolders, ...sharedFolders]),
+        ];
+        const { indexFiles } = await inquirer.prompt([
+            {
+                type: "checkbox",
+                name: "indexFiles",
+                message: "Select folders to add an index file to:",
+                choices: allSelected.map((f) => ({ name: f, value: f })),
+            },
+        ]);
+        return {
+            style,
+            features,
+            featureFolders,
+            sharedFolders,
+            indexFiles,
+        };
+    }
+    // Layered
+    const { sharedFolders } = await inquirer.prompt([
+        {
+            type: "checkbox",
+            name: "sharedFolders",
+            message: "Select folders to generate in src/:",
+            choices: allFolderChoices.map((f) => ({
+                ...f,
+                checked: ["components", "hooks", "pages", "layouts"].includes(f.value),
+            })),
+        },
+    ]);
+    const { indexFiles } = await inquirer.prompt([
+        {
+            type: "checkbox",
+            name: "indexFiles",
+            message: "Select folders to add an index file to:",
+            choices: sharedFolders.map((f) => ({ name: f, value: f })),
+        },
+    ]);
+    return {
+        style,
+        features: [],
+        featureFolders: [],
+        sharedFolders,
+        indexFiles,
+    };
+}