create-kofi-stack 1.2.4 → 1.2.6

package/dist/index.js

@@ -1720,7 +1720,7 @@ async function generateGlobalsCss(config, appDir) {
 }
 
 /* Dark mode */
-@variant dark (&:where(.dark, .dark *)) {
+.dark {
   --color-background: ${darkBase.background};
   --color-foreground: ${darkBase.foreground};
   --color-card: ${darkBase.card};
@@ -3279,6 +3279,7 @@ async function generatePayloadPackageJson(marketingDir) {
 }
 async function generatePayloadConfig(config, marketingDir) {
   const content = `import path from 'path'
+import { fileURLToPath } from 'url'
 import { buildConfig } from 'payload'
 import { postgresAdapter } from '@payloadcms/db-postgres'
 import { lexicalEditor } from '@payloadcms/richtext-lexical'
@@ -3292,11 +3293,14 @@ import { Posts } from './collections/Posts'
 import { SiteSettings } from './globals/SiteSettings'
 import { Navigation } from './globals/Navigation'
 
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
 export default buildConfig({
   admin: {
     user: Users.slug,
     importMap: {
-      baseDir: path.resolve(import.meta.dirname),
+      baseDir: path.resolve(__dirname),
     },
   },
   db: postgresAdapter({
@@ -3332,7 +3336,7 @@ export default buildConfig({
   ],
   secret: process.env.PAYLOAD_SECRET!,
   typescript: {
-    outputFile: path.resolve(import.meta.dirname, 'payload-types.ts'),
+    outputFile: path.resolve(__dirname, 'payload-types.ts'),
   },
 })
 `;
@@ -4220,18 +4224,12 @@ async function generateFumadocsTsConfig(docsDir) {
   await writeJSON(path16.join(docsDir, "tsconfig.json"), tsConfig);
 }
 async function generateFumadocsSource(docsDir) {
-  const content = `import { docs, meta } from '@/.source'
+  const content = `import { docs } from 'fumadocs-mdx:collections/server'
 import { loader } from 'fumadocs-core/source'
 
 export const source = loader({
   baseUrl: '/docs',
-  source: {
-    files: docs.map((doc) => ({
-      type: 'page',
-      path: doc.slugs.join('/'),
-      data: doc,
-    })),
-  },
+  source: docs.toFumadocsSource(),
 })
 `;
   await writeFile(path16.join(docsDir, "src/lib/source.ts"), content);
@@ -4352,12 +4350,10 @@ export default function HomePage() {
 @source '../node_modules/fumadocs-ui/dist/**/*.js';
 `;
   await writeFile(path16.join(docsDir, "src/app/global.css"), globalCssContent);
-  const sourceConfigContent = `import { defineCollections, defineConfig } from 'fumadocs-mdx/config'
+  const sourceConfigContent = `import { defineDocs, defineConfig } from 'fumadocs-mdx/config'
 
-export const { docs, meta } = defineCollections({
-  docs: {
-    dir: 'content/docs',
-  },
+export const docs = defineDocs({
+  dir: 'content/docs',
 })
 
 export default defineConfig()
@@ -4590,10 +4586,10 @@ Update the theme colors in the CSS:
 
 ### Dark Mode
 
-Dark mode is supported out of the box. Toggle with:
+Dark mode is supported out of the box. Define dark mode styles with:
 
 \`\`\`css
-@variant dark (&:where(.dark, .dark *)) {
+.dark {
   --color-background: oklch(0.145 0 0);
 }
 \`\`\`
@@ -4715,6 +4711,7 @@ async function generateDesignSystemApp(config, targetDir) {
   await ensureDir(path17.join(appDir, "src/app/brand"));
   await ensureDir(path17.join(appDir, "src/app/blocks"));
   await ensureDir(path17.join(appDir, "src/app/components"));
+  await ensureDir(path17.join(appDir, "src/app/components/[slug]"));
   await ensureDir(path17.join(appDir, "src/lib"));
   await ensureDir(path17.join(appDir, "public/brand"));
   await generatePackageJson2(config, appDir);
@@ -4730,6 +4727,7 @@ async function generateDesignSystemApp(config, targetDir) {
   await generateBrandPage(config, appDir);
   await generateBlocksPage(appDir);
   await generateComponentsPage(appDir);
+  await generateComponentSlugPage(appDir);
   await generateUtils(appDir);
 }
 async function generatePackageJson2(config, appDir) {
@@ -6170,6 +6168,110 @@ function CategoryCard({
 `;
   await writeFile(path17.join(appDir, "src/app/components/page.tsx"), content);
 }
+async function generateComponentSlugPage(appDir) {
+  const content = `import { notFound } from 'next/navigation'
+
+const components = [
+  'accordion', 'alert', 'alert-dialog', 'aspect-ratio', 'avatar', 'badge',
+  'breadcrumb', 'button', 'calendar', 'card', 'carousel', 'chart', 'checkbox',
+  'collapsible', 'command', 'context-menu', 'dialog', 'drawer', 'dropdown-menu',
+  'form', 'hover-card', 'input', 'input-otp', 'label', 'menubar', 'navigation-menu',
+  'pagination', 'popover', 'progress', 'radio-group', 'resizable', 'scroll-area',
+  'select', 'separator', 'sheet', 'sidebar', 'skeleton', 'slider', 'sonner',
+  'switch', 'table', 'tabs', 'textarea', 'toast', 'toggle', 'toggle-group', 'tooltip',
+]
+
+function slugToTitle(slug: string): string {
+  return slug
+    .split('-')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ')
+}
+
+export default async function ComponentPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>
+}) {
+  const { slug } = await params
+
+  if (!components.includes(slug)) {
+    notFound()
+  }
+
+  const title = slugToTitle(slug)
+
+  return (
+    <div className="p-8 max-w-5xl">
+      <header className="mb-12">
+        <h1 className="text-display-01 text-foreground mb-4">{title}</h1>
+        <p className="text-body-lg text-muted-foreground max-w-2xl">
+          Documentation and examples for the {title} component.
+        </p>
+      </header>
+
+      <section className="mb-12">
+        <h2 className="text-h2 text-foreground mb-6">Installation</h2>
+        <div className="bg-muted rounded-lg p-4 overflow-x-auto">
+          <pre className="text-sm text-foreground">
+{\`npx shadcn@latest add \${slug}\`}
+          </pre>
+        </div>
+      </section>
+
+      <section className="mb-12">
+        <h2 className="text-h2 text-foreground mb-6">Usage</h2>
+        <div className="bg-muted rounded-lg p-4 overflow-x-auto">
+          <pre className="text-sm text-foreground">
+{\`import { \${title.replace(/\\s+/g, '')} } from '@repo/ui/\${slug}'
+
+export default function Example() {
+  return <\${title.replace(/\\s+/g, '')} />
+}\`}
+          </pre>
+        </div>
+      </section>
+
+      <section className="mb-12">
+        <h2 className="text-h2 text-foreground mb-6">Preview</h2>
+        <div className="rounded-xl border border-border p-8 bg-card">
+          <p className="text-muted-foreground text-center">
+            Component preview coming soon. Add your own examples here.
+          </p>
+        </div>
+      </section>
+
+      <section>
+        <h2 className="text-h2 text-foreground mb-6">API Reference</h2>
+        <div className="rounded-lg border border-border overflow-hidden">
+          <table className="w-full text-sm">
+            <thead className="bg-muted">
+              <tr>
+                <th className="text-left p-3 font-medium text-foreground">Prop</th>
+                <th className="text-left p-3 font-medium text-foreground">Type</th>
+                <th className="text-left p-3 font-medium text-foreground">Default</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr className="border-t border-border">
+                <td className="p-3 text-muted-foreground" colSpan={3}>
+                  See shadcn/ui documentation for full API reference.
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </div>
+  )
+}
+
+export function generateStaticParams() {
+  return components.map((slug) => ({ slug }))
+}
+`;
+  await writeFile(path17.join(appDir, "src/app/components/[slug]/page.tsx"), content);
+}
 async function generateUtils(appDir) {
   const content = `import { clsx, type ClassValue } from 'clsx'
 import { twMerge } from 'tailwind-merge'
@@ -6261,15 +6363,40 @@ async function setupConvex(config, envValues) {
   }
   if (convexChoice === "new") {
     p6.log.info(`
-${pc2.bold("To create a new Convex project:")}
-
-1. Run ${pc2.cyan("pnpm convex dev")} in your project directory
-2. It will open your browser to create a new project
-3. Follow the prompts to set up your Convex project
-4. The CLI will automatically add the deployment URL to .env.local
+${pc2.bold("Creating a new Convex project...")}
 
+This will open your browser to create a new project on Convex.
 ${pc2.dim("Note: Make sure you have a Convex account at https://convex.dev")}
 `);
+    try {
+      const convexDir = config.structure === "monorepo" ? path18.join(config.targetDir, "packages/backend") : config.targetDir;
+      p6.log.info(`Running ${pc2.cyan("npx convex dev --once")} in ${pc2.dim(convexDir)}...`);
+      const { spawn } = await import("child_process");
+      await new Promise((resolve) => {
+        const child = spawn("npx", ["convex", "dev", "--once"], {
+          cwd: convexDir,
+          stdio: "inherit",
+          shell: true
+        });
+        child.on("close", (code) => {
+          if (code === 0) {
+            p6.log.success("Convex project created successfully!");
+            resolve();
+          } else {
+            p6.log.warn(`Convex setup exited with code ${code}. You can run 'pnpm convex dev' manually later.`);
+            resolve();
+          }
+        });
+        child.on("error", (error) => {
+          p6.log.warn(`Could not run Convex setup: ${error.message}`);
+          p6.log.info(`Run ${pc2.cyan("pnpm convex dev")} manually in your project directory.`);
+          resolve();
+        });
+      });
+    } catch (error) {
+      p6.log.warn("Could not run Convex setup automatically.");
+      p6.log.info(`Run ${pc2.cyan("pnpm convex dev")} manually in your project directory.`);
+    }
   } else if (convexChoice === "existing") {
     const deploymentName = await p6.text({
       message: "Enter your Convex deployment name (e.g., my-app-123):",

package/package.json

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