create-kofi-stack 1.0.0 → 1.0.2

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 theodenanyoh
+Copyright (c) 2026 Theo Denanyoh
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/index.js

@@ -97,6 +97,18 @@ async function promptIncludeDocs(defaultValue) {
 
 // src/prompts/shadcn.ts
 import * as p2 from "@clack/prompts";
+var colorPresets = {
+  blue: { primary: "221.2 83.2% 53.3%", secondary: "210 40% 96.1%", accent: "210 40% 96.1%" },
+  green: { primary: "142.1 76.2% 36.3%", secondary: "138 76% 97%", accent: "142.1 70.6% 45.3%" },
+  orange: { primary: "24.6 95% 53.1%", secondary: "30 80% 96%", accent: "20.5 90.2% 48.2%" },
+  red: { primary: "0 72.2% 50.6%", secondary: "0 85% 97%", accent: "0 84.2% 60.2%" },
+  violet: { primary: "262.1 83.3% 57.8%", secondary: "260 60% 96%", accent: "263.4 70% 50.4%" },
+  yellow: { primary: "47.9 95.8% 53.1%", secondary: "48 100% 96%", accent: "45.4 93.4% 47.5%" },
+  teal: { primary: "173 80% 40%", secondary: "166 76% 97%", accent: "172 66% 50.4%" },
+  rose: { primary: "346.8 77.2% 49.8%", secondary: "340 80% 97%", accent: "346.8 77.2% 49.8%" },
+  indigo: { primary: "238.7 83.5% 66.7%", secondary: "226 70% 97%", accent: "243.4 75.4% 58.6%" },
+  cyan: { primary: "189 94% 43%", secondary: "185 96% 97%", accent: "188 94.5% 42.7%" }
+};
 async function promptComponentLibrary(defaultValue) {
   const library = await p2.select({
     message: "Component library:",
@@ -194,6 +206,96 @@ async function promptIconLibrary(defaultValue) {
   }
   return iconLibrary;
 }
+async function promptPrimaryColor(defaultValue) {
+  const color = await p2.select({
+    message: "Primary brand color:",
+    options: [
+      { value: "blue", label: "Blue", hint: "Professional, trustworthy" },
+      { value: "green", label: "Green", hint: "Growth, success" },
+      { value: "violet", label: "Violet", hint: "Creative, premium" },
+      { value: "orange", label: "Orange", hint: "Energetic, friendly" },
+      { value: "red", label: "Red", hint: "Bold, urgent" },
+      { value: "teal", label: "Teal", hint: "Calm, modern" },
+      { value: "rose", label: "Rose", hint: "Warm, approachable" },
+      { value: "indigo", label: "Indigo", hint: "Deep, sophisticated" },
+      { value: "cyan", label: "Cyan", hint: "Fresh, tech-forward" }
+    ],
+    initialValue: defaultValue ?? "blue"
+  });
+  if (p2.isCancel(color)) {
+    throw new Error("Operation cancelled");
+  }
+  return colorPresets[color].primary;
+}
+async function promptHeadingFont(defaultValue) {
+  const font = await p2.select({
+    message: "Heading font:",
+    options: [
+      { value: "dm-sans", label: "DM Sans", hint: "Modern, geometric" },
+      { value: "inter", label: "Inter", hint: "Clean, versatile" },
+      { value: "geist", label: "Geist", hint: "Vercel's modern font" },
+      { value: "plus-jakarta", label: "Plus Jakarta Sans", hint: "Friendly, readable" },
+      { value: "outfit", label: "Outfit", hint: "Contemporary, rounded" },
+      { value: "space-grotesk", label: "Space Grotesk", hint: "Technical, distinctive" }
+    ],
+    initialValue: defaultValue ?? "dm-sans"
+  });
+  if (p2.isCancel(font)) {
+    throw new Error("Operation cancelled");
+  }
+  return font;
+}
+async function promptBodyFont(defaultValue) {
+  const font = await p2.select({
+    message: "Body font:",
+    options: [
+      { value: "inter", label: "Inter", hint: "Optimized for screens" },
+      { value: "dm-sans", label: "DM Sans", hint: "Modern, geometric" },
+      { value: "geist", label: "Geist", hint: "Vercel's modern font" },
+      { value: "plus-jakarta", label: "Plus Jakarta Sans", hint: "Friendly, readable" },
+      { value: "outfit", label: "Outfit", hint: "Contemporary, rounded" },
+      { value: "space-grotesk", label: "Space Grotesk", hint: "Technical, distinctive" }
+    ],
+    initialValue: defaultValue ?? "inter"
+  });
+  if (p2.isCancel(font)) {
+    throw new Error("Operation cancelled");
+  }
+  return font;
+}
+async function promptBorderRadius(defaultValue) {
+  const radius = await p2.select({
+    message: "Border radius:",
+    options: [
+      { value: "none", label: "None", hint: "0px - Sharp edges" },
+      { value: "sm", label: "Small", hint: "4px - Subtle rounding" },
+      { value: "md", label: "Medium", hint: "8px - Balanced (default)" },
+      { value: "lg", label: "Large", hint: "12px - More rounded" },
+      { value: "xl", label: "Extra Large", hint: "16px - Very rounded" },
+      { value: "full", label: "Full", hint: "Pill-shaped buttons" }
+    ],
+    initialValue: defaultValue ?? "md"
+  });
+  if (p2.isCancel(radius)) {
+    throw new Error("Operation cancelled");
+  }
+  return radius;
+}
+async function promptSpacingScale(defaultValue) {
+  const spacing = await p2.select({
+    message: "Spacing scale:",
+    options: [
+      { value: "compact", label: "Compact", hint: "Tighter spacing, denser UI" },
+      { value: "default", label: "Default", hint: "Standard spacing" },
+      { value: "relaxed", label: "Relaxed", hint: "More breathing room" }
+    ],
+    initialValue: defaultValue ?? "default"
+  });
+  if (p2.isCancel(spacing)) {
+    throw new Error("Operation cancelled");
+  }
+  return spacing;
+}
 async function promptShadcnConfig(defaults) {
   if (defaults?.componentLibrary && defaults?.styleVariant && defaults?.baseColor && defaults?.themeColor && defaults?.menuAccent && defaults?.iconLibrary) {
     return {
@@ -213,6 +315,38 @@ async function promptShadcnConfig(defaults) {
   const iconLibrary = defaults?.iconLibrary ?? await promptIconLibrary();
   return { componentLibrary, styleVariant, baseColor, themeColor, menuAccent, iconLibrary };
 }
+async function promptDesignSystemConfig(defaults, themeColor) {
+  if (defaults?.primaryColor && defaults?.secondaryColor && defaults?.accentColor && defaults?.headingFont && defaults?.bodyFont && defaults?.borderRadius && defaults?.spacingScale) {
+    return {
+      primaryColor: defaults.primaryColor,
+      secondaryColor: defaults.secondaryColor,
+      accentColor: defaults.accentColor,
+      headingFont: defaults.headingFont,
+      bodyFont: defaults.bodyFont,
+      borderRadius: defaults.borderRadius,
+      spacingScale: defaults.spacingScale
+    };
+  }
+  const defaultColorKey = themeColor ?? "blue";
+  const primaryColor = defaults?.primaryColor ?? await promptPrimaryColor(defaultColorKey);
+  const colorKey = Object.entries(colorPresets).find(([_, v]) => v.primary === primaryColor)?.[0] ?? "blue";
+  const colors = colorPresets[colorKey];
+  const secondaryColor = defaults?.secondaryColor ?? colors.secondary;
+  const accentColor = defaults?.accentColor ?? colors.accent;
+  const headingFont = defaults?.headingFont ?? await promptHeadingFont();
+  const bodyFont = defaults?.bodyFont ?? await promptBodyFont();
+  const borderRadius = defaults?.borderRadius ?? await promptBorderRadius();
+  const spacingScale = defaults?.spacingScale ?? await promptSpacingScale();
+  return {
+    primaryColor,
+    secondaryColor,
+    accentColor,
+    headingFont,
+    bodyFont,
+    borderRadius,
+    spacingScale
+  };
+}
 
 // src/prompts/auth.ts
 import * as p3 from "@clack/prompts";
@@ -348,6 +482,11 @@ function parseOptions(options) {
     themeColor: options.themeColor,
     accent: options.accent,
     iconLibrary: options.iconLibrary,
+    primaryColor: options.primaryColor,
+    headingFont: options.headingFont,
+    bodyFont: options.bodyFont,
+    borderRadius: options.borderRadius,
+    spacingScale: options.spacingScale,
     authProviders: options.authProviders,
     organizations: options.organizations,
     yes: options.yes,
@@ -391,6 +530,34 @@ async function runPrompts(projectName, rawOptions) {
     menuAccent: options.accent,
     iconLibrary: options.iconLibrary
   });
+  let designSystem;
+  if (structure === "monorepo") {
+    let primaryColorHsl = options.primaryColor;
+    if (primaryColorHsl && colorPresets[primaryColorHsl]) {
+      primaryColorHsl = colorPresets[primaryColorHsl].primary;
+    }
+    designSystem = await promptDesignSystemConfig(
+      {
+        primaryColor: primaryColorHsl,
+        headingFont: options.headingFont,
+        bodyFont: options.bodyFont,
+        borderRadius: options.borderRadius,
+        spacingScale: options.spacingScale
+      },
+      shadcn.themeColor
+    );
+  } else {
+    const colors = colorPresets[shadcn.themeColor] || colorPresets.blue;
+    designSystem = {
+      primaryColor: colors.primary,
+      secondaryColor: colors.secondary,
+      accentColor: colors.accent,
+      headingFont: "dm-sans",
+      bodyFont: "inter",
+      borderRadius: "md",
+      spacingScale: "default"
+    };
+  }
   const auth = await promptAuthConfig({
     providers: options.authProviders !== void 0 ? options.authProviders ? options.authProviders.split(",") : [] : void 0,
     organizations: options.organizations
@@ -408,6 +575,7 @@ async function runPrompts(projectName, rawOptions) {
     marketingSite,
     includeDocs,
     shadcn,
+    designSystem,
     auth,
     integrations,
     targetDir
@@ -433,8 +601,19 @@ function getIconLibraryDisplayName(iconLibrary) {
   };
   return names[iconLibrary];
 }
+function getFontDisplayName(font) {
+  const names = {
+    "inter": "Inter",
+    "dm-sans": "DM Sans",
+    "geist": "Geist",
+    "plus-jakarta": "Plus Jakarta Sans",
+    "outfit": "Outfit",
+    "space-grotesk": "Space Grotesk"
+  };
+  return names[font];
+}
 function showConfigSummary(config) {
-  const apps = ["web"];
+  const apps = ["web", "design-system"];
   if (config.structure === "monorepo") {
     if (config.marketingSite !== "none") {
       apps.push(`marketing (${config.marketingSite})`);
@@ -474,12 +653,13 @@ ${config.structure === "monorepo" ? `${pc.bold("Apps:")} ${apps.join(", ")}
 ` : ""}${pc.bold("Auth:")} ${authProviders.join(", ")}${config.auth.organizations ? " + Organizations" : ""}
 ${pc.bold("UI:")} ${getStyleDisplayName(config)} / ${config.shadcn.themeColor} / ${config.shadcn.menuAccent}
 ${pc.bold("Icons:")} ${getIconLibraryDisplayName(config.shadcn.iconLibrary)}
+${pc.bold("Typography:")} ${getFontDisplayName(config.designSystem.headingFont)} / ${getFontDisplayName(config.designSystem.bodyFont)}
 ${extras.length > 0 ? `${pc.bold("Extras:")} ${extras.join(", ")}` : ""}`,
     "Scaffolding project:"
   );
 }
 async function showConfirmation(config) {
-  const apps = ["web"];
+  const apps = ["web", "design-system"];
   if (config.structure === "monorepo") {
     if (config.marketingSite !== "none") {
       apps.push(`marketing (${config.marketingSite})`);
@@ -519,6 +699,7 @@ ${config.structure === "monorepo" ? `${pc.bold("Apps:")} ${apps.join(", ")}
 ` : ""}${pc.bold("Auth:")} ${authProviders.join(", ")}${config.auth.organizations ? " + Organizations" : ""}
 ${pc.bold("UI:")} ${getStyleDisplayName(config)} / ${config.shadcn.themeColor} / ${config.shadcn.menuAccent}
 ${pc.bold("Icons:")} ${getIconLibraryDisplayName(config.shadcn.iconLibrary)}
+${pc.bold("Typography:")} ${getFontDisplayName(config.designSystem.headingFont)} / ${getFontDisplayName(config.designSystem.bodyFont)}
 ${extras.length > 0 ? `${pc.bold("Extras:")} ${extras.join(", ")}` : ""}`,
     "Ready to scaffold your project:"
   );
@@ -1812,7 +1993,7 @@ async function generateConvexPackageJson(convexDir) {
     types: "./convex/index.ts",
     dependencies: {
       convex: "^1.17.0",
-      "@convex-dev/better-auth": "^0.1.0"
+      "@convex-dev/better-auth": "^0.10.0"
     },
     devDependencies: {
       typescript: "^5.0.0"
@@ -2929,33 +3110,6 @@ async function generateSharedConfigs(targetDir) {
     path14.join(targetDir, "packages/config-typescript/package.json"),
     tsConfigPackage
   );
-  await ensureDir(path14.join(targetDir, "packages/config-tailwind"));
-  const tailwindConfig = `import type { Config } from 'tailwindcss'
-
-export default {
-  content: [
-    './src/**/*.{js,ts,jsx,tsx,mdx}',
-    '../../packages/ui/src/**/*.{js,ts,jsx,tsx}',
-  ],
-} satisfies Config
-`;
-  const tailwindPackage = {
-    name: "@repo/config-tailwind",
-    version: "0.1.0",
-    private: true,
-    main: "tailwind.config.ts",
-    devDependencies: {
-      tailwindcss: "^4.0.0"
-    }
-  };
-  await writeFile(
-    path14.join(targetDir, "packages/config-tailwind/tailwind.config.ts"),
-    tailwindConfig
-  );
-  await writeJSON(
-    path14.join(targetDir, "packages/config-tailwind/package.json"),
-    tailwindPackage
-  );
   await ensureDir(path14.join(targetDir, "packages/config-biome"));
   const biomeConfigPackage = {
     name: "@repo/config-biome",
@@ -3027,9 +3181,10 @@ async function generateUIPackage(config, targetDir) {
     include: ["src/**/*"]
   };
   await writeJSON(path14.join(uiDir, "tsconfig.json"), tsConfig);
+  const style = `${config.shadcn.componentLibrary}-${config.shadcn.styleVariant}`;
   const componentsJson = {
     $schema: "https://ui.shadcn.com/schema.json",
-    style: config.shadcn.style,
+    style,
     rsc: false,
     tsx: true,
     tailwind: {
@@ -3038,7 +3193,7 @@ async function generateUIPackage(config, targetDir) {
       baseColor: config.shadcn.baseColor,
       cssVariables: true
     },
-    iconLibrary: "hugeicons",
+    iconLibrary: config.shadcn.iconLibrary,
     aliases: {
       components: "@/components",
       utils: "@/lib/utils",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-kofi-stack",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Scaffold opinionated full-stack projects with Next.js, Convex, Better-Auth, and more",
   "type": "module",
   "bin": {