create-kofi-stack 2.0.23 → 2.1.1

package/dist/index.js

@@ -85,76 +85,185 @@ async function runPrompts(projectNameArg, options) {
   if (p.isCancel(structure)) throw new Error("cancelled");
   let marketingSite = "none";
   if (structure === "monorepo") {
+    const marketingOptions = [
+      { value: "none", label: "None", hint: "Skip marketing site" },
+      { value: "nextjs", label: "Next.js", hint: "Simple marketing pages" },
+      { value: "payload", label: "Payload CMS", hint: "Full CMS for content" }
+    ];
     marketingSite = await p.select({
       message: "Add a marketing site?",
-      options: [
-        { value: "none", label: "None", hint: "Skip marketing site" },
-        { value: "nextjs", label: "Next.js", hint: "Simple marketing pages" },
-        { value: "payload", label: "Payload CMS", hint: "Full CMS for content" }
-      ],
+      options: marketingOptions,
       initialValue: "none"
     });
     if (p.isCancel(marketingSite)) throw new Error("cancelled");
   }
+  const componentLibraryOptions = [
+    { value: "base", label: "Base UI", hint: "Recommended - Headless, unstyled primitives" },
+    { value: "radix", label: "Radix UI", hint: "Full-featured accessible primitives" }
+  ];
+  const componentLibrary = await p.select({
+    message: "Select a component library",
+    options: componentLibraryOptions,
+    initialValue: "base"
+  });
+  if (p.isCancel(componentLibrary)) throw new Error("cancelled");
+  const styleOptions = [
+    { value: "nova", label: "Nova", hint: "Modern, clean design" },
+    { value: "vega", label: "Vega", hint: "Bold, vibrant" },
+    { value: "maia", label: "Maia", hint: "Soft, organic" },
+    { value: "lyra", label: "Lyra", hint: "Minimal, refined" },
+    { value: "mira", label: "Mira", hint: "Elegant, classic" }
+  ];
+  const style = await p.select({
+    message: "What style do you want?",
+    options: styleOptions,
+    initialValue: "nova"
+  });
+  if (p.isCancel(style)) throw new Error("cancelled");
+  const baseColorOptions = [
+    { value: "neutral", label: "Neutral" },
+    { value: "stone", label: "Stone" },
+    { value: "zinc", label: "Zinc" },
+    { value: "gray", label: "Gray" }
+  ];
   const baseColor = await p.select({
-    message: "Base color for theme?",
-    options: [
-      { value: "neutral", label: "Neutral" },
-      { value: "slate", label: "Slate" },
-      { value: "zinc", label: "Zinc" },
-      { value: "stone", label: "Stone" },
-      { value: "gray", label: "Gray" }
-    ],
+    message: "Choose your base color",
+    options: baseColorOptions,
     initialValue: "neutral"
   });
   if (p.isCancel(baseColor)) throw new Error("cancelled");
+  const themeColorOptions = [
+    { value: "neutral", label: "Neutral" },
+    { value: "blue", label: "Blue" },
+    { value: "green", label: "Green" },
+    { value: "purple", label: "Purple" },
+    { value: "red", label: "Red" },
+    { value: "orange", label: "Orange" },
+    { value: "amber", label: "Amber" },
+    { value: "cyan", label: "Cyan" },
+    { value: "emerald", label: "Emerald" },
+    { value: "fuchsia", label: "Fuchsia" },
+    { value: "indigo", label: "Indigo" },
+    { value: "lime", label: "Lime" },
+    { value: "pink", label: "Pink" },
+    { value: "rose", label: "Rose" },
+    { value: "sky", label: "Sky" },
+    { value: "teal", label: "Teal" },
+    { value: "violet", label: "Violet" },
+    { value: "yellow", label: "Yellow" }
+  ];
+  const themeColor = await p.select({
+    message: "Choose your theme color",
+    options: themeColorOptions,
+    initialValue: "neutral"
+  });
+  if (p.isCancel(themeColor)) throw new Error("cancelled");
+  const iconLibraryOptions = [
+    { value: "hugeicons", label: "HugeIcons", hint: "Recommended - 4000+ icons" },
+    { value: "lucide", label: "Lucide", hint: "Popular, lightweight" },
+    { value: "tabler", label: "Tabler Icons", hint: "Free, open source" },
+    { value: "phosphor", label: "Phosphor Icons", hint: "Flexible, consistent" }
+  ];
+  const iconLibrary = await p.select({
+    message: "Choose your icon library",
+    options: iconLibraryOptions,
+    initialValue: "hugeicons"
+  });
+  if (p.isCancel(iconLibrary)) throw new Error("cancelled");
+  const fontOptions = [
+    { value: "inter", label: "Inter", hint: "Recommended - Clean, modern" },
+    { value: "dm-sans", label: "DM Sans", hint: "Geometric, friendly" },
+    { value: "figtree", label: "Figtree", hint: "Playful, readable" },
+    { value: "outfit", label: "Outfit", hint: "Modern, versatile" },
+    { value: "public-sans", label: "Public Sans", hint: "Neutral, accessible" },
+    { value: "roboto", label: "Roboto", hint: "Classic, reliable" },
+    { value: "raleway", label: "Raleway", hint: "Elegant, stylish" },
+    { value: "noto-sans", label: "Noto Sans", hint: "Global, inclusive" },
+    { value: "nunito-sans", label: "Nunito Sans", hint: "Rounded, friendly" },
+    { value: "jetbrains-mono", label: "JetBrains Mono", hint: "Code-focused" }
+  ];
+  const font = await p.select({
+    message: "Select your font",
+    options: fontOptions,
+    initialValue: "inter"
+  });
+  if (p.isCancel(font)) throw new Error("cancelled");
+  const menuAccentOptions = [
+    { value: "subtle", label: "Subtle", hint: "Muted accent colors" },
+    { value: "bold", label: "Bold", hint: "Strong accent colors" }
+  ];
+  const menuAccent = await p.select({
+    message: "Menu accent",
+    options: menuAccentOptions,
+    initialValue: "subtle"
+  });
+  if (p.isCancel(menuAccent)) throw new Error("cancelled");
+  const menuColorOptions = [
+    { value: "default", label: "Default", hint: "Standard colors" },
+    { value: "inverted", label: "Inverted", hint: "Dark sidebar" }
+  ];
+  const menuColor = await p.select({
+    message: "Menu color",
+    options: menuColorOptions,
+    initialValue: "default"
+  });
+  if (p.isCancel(menuColor)) throw new Error("cancelled");
+  const radiusOptions = [
+    { value: "default", label: "Default" },
+    { value: "none", label: "None", hint: "Sharp corners" },
+    { value: "small", label: "Small" },
+    { value: "medium", label: "Medium" },
+    { value: "large", label: "Large", hint: "Rounded corners" }
+  ];
+  const radius = await p.select({
+    message: "Border radius",
+    options: radiusOptions,
+    initialValue: "default"
+  });
+  if (p.isCancel(radius)) throw new Error("cancelled");
+  const analyticsOptions = [
+    { value: "none", label: "None", hint: "Skip analytics" },
+    { value: "posthog", label: "PostHog", hint: "Product analytics" },
+    { value: "vercel", label: "Vercel Analytics", hint: "Simple analytics" }
+  ];
   const analytics = await p.select({
     message: "Analytics provider?",
-    options: [
-      { value: "none", label: "None", hint: "Skip analytics" },
-      { value: "posthog", label: "PostHog", hint: "Product analytics" },
-      { value: "vercel", label: "Vercel Analytics", hint: "Simple analytics" }
-    ],
+    options: analyticsOptions,
     initialValue: "none"
   });
   if (p.isCancel(analytics)) throw new Error("cancelled");
+  const uploadsOptions = [
+    { value: "convex-fs", label: "Convex FS", hint: "Built-in Convex storage (Recommended)" },
+    { value: "r2", label: "Cloudflare R2", hint: "S3-compatible edge storage" },
+    { value: "uploadthing", label: "UploadThing", hint: "Easy file uploads" },
+    { value: "s3", label: "AWS S3", hint: "S3-compatible storage" },
+    { value: "vercel-blob", label: "Vercel Blob", hint: "Vercel storage" },
+    { value: "none", label: "None", hint: "Skip file storage" }
+  ];
   const uploads = await p.select({
     message: "File storage provider?",
-    options: [
-      { value: "convex-fs", label: "Convex FS", hint: "Built-in Convex storage (Recommended)" },
-      { value: "r2", label: "Cloudflare R2", hint: "S3-compatible edge storage" },
-      { value: "uploadthing", label: "UploadThing", hint: "Easy file uploads" },
-      { value: "s3", label: "AWS S3", hint: "S3-compatible storage" },
-      { value: "vercel-blob", label: "Vercel Blob", hint: "Vercel storage" },
-      { value: "none", label: "None", hint: "Skip file storage" }
-    ],
+    options: uploadsOptions,
     initialValue: "convex-fs"
   });
   if (p.isCancel(uploads)) throw new Error("cancelled");
+  const paymentsOptions = [
+    { value: "none", label: "None", hint: "Skip payments" },
+    { value: "stripe", label: "Stripe", hint: "Full payment platform" },
+    { value: "polar", label: "Polar", hint: "Open source monetization" }
+  ];
   const payments = await p.select({
     message: "Payment provider?",
-    options: [
-      { value: "none", label: "None", hint: "Skip payments" },
-      { value: "stripe", label: "Stripe", hint: "Full payment platform" },
-      { value: "polar", label: "Polar", hint: "Open source monetization" }
-    ],
+    options: paymentsOptions,
     initialValue: "none"
   });
   if (p.isCancel(payments)) throw new Error("cancelled");
+  const addonsOptions = [
+    { value: "rate-limiting", label: "Rate Limiting", hint: "Convex Rate Limiter (Recommended)" },
+    { value: "monitoring", label: "Error Monitoring", hint: "Sentry integration" }
+  ];
   const addonsSelected = await p.multiselect({
     message: "Additional features?",
-    options: [
-      {
-        value: "rate-limiting",
-        label: "Rate Limiting",
-        hint: "Convex Rate Limiter (Recommended)"
-      },
-      {
-        value: "monitoring",
-        label: "Error Monitoring",
-        hint: "Sentry integration"
-      }
-    ],
+    options: addonsOptions,
     required: false
   });
   if (p.isCancel(addonsSelected)) throw new Error("cancelled");
@@ -164,7 +273,17 @@ async function runPrompts(projectNameArg, options) {
       `${pc.cyan("Project:")} ${name}`,
       `${pc.cyan("Structure:")} ${structure}`,
       structure === "monorepo" ? `${pc.cyan("Marketing:")} ${marketingSite}` : null,
+      "",
+      pc.dim("\u2500\u2500\u2500 Design System \u2500\u2500\u2500"),
+      `${pc.cyan("Component Library:")} ${componentLibrary}`,
+      `${pc.cyan("Style:")} ${style}`,
       `${pc.cyan("Base Color:")} ${baseColor}`,
+      `${pc.cyan("Theme Color:")} ${themeColor}`,
+      `${pc.cyan("Icon Library:")} ${iconLibrary}`,
+      `${pc.cyan("Font:")} ${font}`,
+      `${pc.cyan("Radius:")} ${radius}`,
+      "",
+      pc.dim("\u2500\u2500\u2500 Integrations \u2500\u2500\u2500"),
       `${pc.cyan("Analytics:")} ${analytics}`,
       `${pc.cyan("Storage:")} ${uploads}`,
       `${pc.cyan("Payments:")} ${payments}`,
@@ -187,14 +306,15 @@ async function runPrompts(projectNameArg, options) {
       organizations: false
     },
     shadcn: {
+      componentLibrary,
+      style,
       baseColor,
-      themeColor: "zinc",
-      menuAccent: "muted",
-      iconLibrary: "lucide",
-      headingFont: "geist",
-      bodyFont: "geist",
-      borderRadius: "0.5",
-      spacingScale: "default"
+      themeColor,
+      iconLibrary,
+      font,
+      menuAccent,
+      menuColor,
+      radius
     },
     integrations: {
       analytics,
@@ -251,6 +371,22 @@ function generateSecret() {
     return crypto.randomBytes(32).toString("base64");
   }
 }
+function buildShadcnPresetUrl(config) {
+  const { shadcn } = config;
+  const params = new URLSearchParams({
+    base: shadcn.componentLibrary,
+    style: shadcn.style,
+    baseColor: shadcn.baseColor,
+    theme: shadcn.themeColor,
+    iconLibrary: shadcn.iconLibrary,
+    font: shadcn.font,
+    menuAccent: shadcn.menuAccent,
+    menuColor: shadcn.menuColor,
+    radius: shadcn.radius,
+    template: "next"
+  });
+  return `https://ui.shadcn.com/init?${params.toString()}`;
+}
 async function updateEnvWithSecrets(envPath, secrets) {
   if (!await fs.pathExists(envPath)) {
     return;
@@ -314,15 +450,27 @@ async function generateProject(config, options = {}) {
       spinner.warn("Failed to install dependencies. Run pnpm install manually.");
     }
     const shadcnDir = config.structure === "monorepo" ? path2.join(config.targetDir, "apps/web") : config.targetDir;
+    const presetUrl = buildShadcnPresetUrl(config);
+    spinner.start("Initializing shadcn/ui...");
+    try {
+      await execa("pnpm", ["dlx", "shadcn@latest", "init", "--yes", "--preset", presetUrl], {
+        cwd: shadcnDir,
+        stdio: "pipe"
+      });
+      spinner.succeed("shadcn/ui initialized");
+    } catch {
+      spinner.warn(`Failed to initialize shadcn. Run manually:
+pnpm dlx shadcn@latest init --preset "${presetUrl}"`);
+    }
     spinner.start("Installing shadcn/ui components...");
     try {
-      await execa("pnpm", ["dlx", "shadcn@latest", "add", "--all", "-y"], {
+      await execa("pnpm", ["dlx", "shadcn@latest", "add", "--all", "--yes"], {
         cwd: shadcnDir,
         stdio: "pipe"
       });
       spinner.succeed("shadcn/ui components installed");
     } catch {
-      spinner.warn("Failed to install shadcn/ui components. Run pnpm dlx shadcn@latest add --all manually.");
+      spinner.warn("Failed to install shadcn/ui components. Run: pnpm dlx shadcn@latest add --all");
     }
     if (!skipPrompts) {
       console.log();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-kofi-stack",
-  "version": "2.0.23",
+  "version": "2.1.1",
   "description": "Scaffold opinionated full-stack projects with Next.js, Convex, Better-Auth, and more",
   "type": "module",
   "bin": {
@@ -17,8 +17,8 @@
     "gradient-string": "^2.0.2",
     "ora": "^8.0.0",
     "picocolors": "^1.0.0",
-    "kofi-stack-types": "^2.0.23",
-    "kofi-stack-template-generator": "^2.0.23"
+    "kofi-stack-template-generator": "^2.1.0",
+    "kofi-stack-types": "^2.1.0"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",