bsmnt 0.0.2 → 0.1.0

package/packages/create-basement-app/templates/default/lib/scripts/generate-component.ts

@@ -0,0 +1,322 @@
+#!/usr/bin/env bun
+/**
+ * Generate Component Module
+ *
+ * Generates new components with pre-configured templates through interactive prompts.
+ * Used by the unified generator: `bun run generate`
+ *
+ * Cross-platform compatible (Windows, macOS, Linux)
+ */
+
+import * as p from "@clack/prompts"
+import { createDir } from "./utils"
+
+interface ComponentOptions {
+  client?: boolean
+  category?: string
+}
+
+export interface ComponentConfig {
+  path: string
+  options: ComponentOptions
+}
+
+/**
+ * Interactive prompts for component configuration
+ */
+export const promptComponentConfig = async (): Promise<ComponentConfig> => {
+  const category = await p.select({
+    message: "Which category should this component belong to?",
+    options: [
+      {
+        value: "ui",
+        label: "UI Components",
+        hint: "Reusable primitives (buttons, inputs, etc.)",
+      },
+      {
+        value: "layout",
+        label: "Layout Components",
+        hint: "Site structure (navigation, footer, etc.)",
+      },
+      {
+        value: "magic",
+        label: "Magic Components",
+        hint: "Animations and visual enhancements",
+      },
+      {
+        value: "blocks",
+        label: "Block Components",
+        hint: "Pre-built page sections",
+      },
+    ],
+  })
+
+  if (p.isCancel(category)) {
+    p.cancel("Component generation cancelled")
+    process.exit(0)
+  }
+
+  const name = await p.text({
+    message: "What should the component be called?",
+    placeholder: "button, hero-section, animated-text",
+    validate: (value) => {
+      if (!value) return "Component name is required"
+      if (!/^[a-z][a-z0-9-]*$/.test(value)) {
+        return "Component name must be kebab-case (lowercase with hyphens)"
+      }
+      return undefined
+    },
+  })
+
+  if (p.isCancel(name)) {
+    p.cancel("Component generation cancelled")
+    process.exit(0)
+  }
+
+  const componentPath = `${category}/${name}`
+
+  const isClientComponent = await p.confirm({
+    message: "Should this be a client component ('use client')?",
+    initialValue: false,
+  })
+
+  if (p.isCancel(isClientComponent)) {
+    p.cancel("Component generation cancelled")
+    process.exit(0)
+  }
+
+  return {
+    path: componentPath,
+    options: {
+      client: isClientComponent,
+      category,
+    },
+  }
+}
+
+/**
+ * Convert kebab-case to PascalCase
+ */
+const toPascalCase = (str: string): string =>
+  str
+    .split("-")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join("")
+
+/**
+ * Convert kebab-case to camelCase
+ */
+const toCamelCase = (str: string): string =>
+  str
+    .split("-")
+    .map((word, index) =>
+      index === 0 ? word : word.charAt(0).toUpperCase() + word.slice(1)
+    )
+    .join("")
+
+/**
+ * Generate component index.tsx content
+ */
+const generateComponentContent = (
+  componentName: string,
+  options: ComponentOptions
+): string => {
+  const { client } = options
+  const pascalName = toPascalCase(componentName)
+  const camelCaseName = toCamelCase(componentName)
+  const directive = client ? `'use client'\n\n` : ""
+
+  return `${directive}import { cn } from '@/styles/cn'
+import type { HTMLAttributes, ReactNode } from 'react'
+import s from './${componentName}.module.css'
+
+interface ${pascalName}Props extends HTMLAttributes<HTMLDivElement> {
+  /** Component content */
+  children?: ReactNode
+}
+
+const ${camelCaseName}Variants = cva({
+  base: 'bg-primary text-white',
+  variants: {
+    variant: {
+      primary: 'bg-primary text-white',
+    },
+  },
+})
+
+/**
+ * ${pascalName} component.
+ *
+ * @example
+ * \`\`\`tsx
+ * import { ${pascalName} } from '@/components/${options.category}/${componentName}'
+ *
+ * <${pascalName}>
+ *   Content here
+ * </${pascalName}>
+ * \`\`\`
+ */
+export function ${pascalName}({
+  children,
+  className,
+  variant = 'primary',
+  ...props
+}: ${pascalName}Props) {
+  return (
+    <div className={cn(s.${camelCaseName}, className, ${pascalName}Variants({ variant: 'primary' }))} {...props}>
+      {children}
+    </div>
+  )
+}
+`
+}
+
+/**
+ * Generate CSS module content
+ */
+const generateCssContent = (componentName: string): string => {
+  const cssClassName = toCamelCase(componentName)
+
+  return `/* ${componentName}.module.css */
+
+.${cssClassName} {
+  /* Add your component styles here */
+}
+`
+}
+
+/**
+ * Update barrel export file
+ */
+const updateBarrelExport = async (
+  componentPath: string,
+  componentName: string
+): Promise<void> => {
+  const pathParts = componentPath.split("/")
+  const category = pathParts[0] ?? "components"
+  const barrelPath = `components/${category}/index.ts`
+  const pascalName = toPascalCase(componentName)
+
+  try {
+    // Check if barrel file exists
+    const file = Bun.file(barrelPath)
+    const exists = await file.exists()
+
+    if (!exists) {
+      // Create new barrel file with header comment based on category
+      const categoryTitles: Record<string, string> = {
+        ui: "UI Primitives - Reusable across any project",
+        layout: "Layout Components - Site chrome (customize per project)",
+        magic: "Magic Components - Animations and visual enhancements",
+        blocks: "Block Components - Pre-built page sections",
+      }
+
+      const header =
+        categoryTitles[category] || `${toPascalCase(category)} Components`
+      const content = `// ${header}
+// Import from '@/components/${category}' or '@/components/${category}/[component]'
+
+export { ${pascalName} } from './${componentName}'
+`
+      await Bun.write(barrelPath, content)
+      p.log.success(`Created barrel export: ${barrelPath}`)
+      return
+    }
+
+    // Update existing barrel file
+    const content = await file.text()
+
+    // Check if already exported
+    if (content.includes(`from './${componentName}'`)) {
+      p.log.warn(`Component already exported in ${barrelPath}`)
+      return
+    }
+
+    // Add export at the end, maintaining the file's style
+    const lines = content.split("\n")
+
+    // Find the last non-empty line to append after
+    let insertIndex = lines.length
+    for (let i = lines.length - 1; i >= 0; i--) {
+      if (lines[i]?.trim()) {
+        insertIndex = i + 1
+        break
+      }
+    }
+
+    // Insert the new export
+    lines.splice(
+      insertIndex,
+      0,
+      `export { ${pascalName} } from './${componentName}'`
+    )
+
+    await Bun.write(barrelPath, lines.join("\n"))
+    p.log.success(`Updated barrel export: ${barrelPath}`)
+  } catch (error) {
+    p.log.warn(
+      `Could not update barrel export: ${error instanceof Error ? error.message : String(error)}`
+    )
+  }
+}
+
+/**
+ * Generate component files and directories
+ */
+export const createComponent = async (
+  componentPath: string,
+  options: ComponentOptions
+): Promise<void> => {
+  const s = p.spinner()
+
+  try {
+    const pathParts = componentPath.split("/")
+    const componentName = pathParts[pathParts.length - 1] ?? ""
+
+    // Validate component name
+    if (!/^[a-z][a-z0-9-]*$/.test(componentName)) {
+      throw new Error(
+        "Component name must be kebab-case (lowercase with hyphens)"
+      )
+    }
+
+    // Create directory structure
+    const componentDir = `components/${componentPath}`
+
+    s.start(`Generating component "${componentPath}"`)
+
+    // Create component directory (cross-platform)
+    await createDir(componentDir)
+
+    // Generate and write files
+    const componentContent = generateComponentContent(componentName, options)
+    const cssContent = generateCssContent(componentName)
+
+    await Bun.write(`${componentDir}/index.tsx`, componentContent)
+    await Bun.write(`${componentDir}/${componentName}.module.css`, cssContent)
+
+    s.stop(`Component "${componentPath}" generated successfully!`)
+
+    // Show what was created
+    p.log.success(`Created files:`)
+    p.log.message(`  📄 ${componentDir}/index.tsx`)
+    p.log.message(`  🎨 ${componentDir}/${componentName}.module.css`)
+
+    // Try to update barrel exports
+    await updateBarrelExport(componentPath, componentName)
+
+    const pascalName = toPascalCase(componentName)
+
+    p.note(
+      `Next steps:\n` +
+        `  1. Customize ${componentDir}/index.tsx\n` +
+        `  2. Style in ${componentDir}/${componentName}.module.css\n` +
+        `  3. Import: \`import { ${pascalName} } from '@/components/${componentPath}'\``
+    )
+  } catch (error) {
+    s.stop(`Failed to create component "${componentPath}"`)
+    throw error instanceof Error ? error : new Error(String(error))
+  }
+}
+
+// Export functions for use by unified create script

package/packages/create-basement-app/templates/default/lib/scripts/generate-page.ts

@@ -0,0 +1,193 @@
+#!/usr/bin/env bun
+/**
+ * Generate Page Module
+ *
+ * Generates new pages with pre-configured templates through interactive prompts.
+ * Used by the unified generator: `bun run generate`
+ *
+ * Cross-platform compatible (Windows, macOS, Linux)
+ */
+
+import * as p from "@clack/prompts"
+import { createDir } from "./utils"
+
+interface PageOptions {
+  theme?: string
+  css?: boolean
+}
+
+export interface PageConfig {
+  name: string
+  options: PageOptions
+}
+
+/**
+ * Interactive prompts for page configuration
+ */
+export const promptPageConfig = async (): Promise<PageConfig> => {
+  const name = await p.text({
+    message: "What should the page be called?",
+    placeholder: "about, contact, products",
+    validate: (value) => {
+      if (!value) return "Page name is required"
+      if (!/^[a-zA-Z][a-zA-Z0-9-_]*$/.test(value)) {
+        return "Page name must start with a letter and contain only letters, numbers, hyphens, and underscores"
+      }
+      return undefined
+    },
+  })
+
+  if (p.isCancel(name)) {
+    p.cancel("Page generation cancelled")
+    process.exit(0)
+  }
+
+  const theme = await p.select({
+    message: "Choose a theme for the page",
+    options: [
+      { value: "dark", label: "Dark (default)", hint: "Standard dark theme" },
+      { value: "light", label: "Light", hint: "Light theme" },
+      { value: "red", label: "Red", hint: "Red accent theme" },
+    ],
+    initialValue: "dark",
+  })
+
+  if (p.isCancel(theme)) {
+    p.cancel("Page generation cancelled")
+    process.exit(0)
+  }
+
+  const includeCss = await p.confirm({
+    message: "Include a CSS module file?",
+    initialValue: false,
+  })
+
+  if (p.isCancel(includeCss)) {
+    p.cancel("Page generation cancelled")
+    process.exit(0)
+  }
+
+  return {
+    name,
+    options: {
+      theme,
+      css: includeCss,
+    },
+  }
+}
+
+/**
+ * Generate page.tsx content
+ */
+const generatePageContent = (
+  pageName: string,
+  options: PageOptions
+): string => {
+  const { theme = "dark" } = options
+
+  // Capitalize first letter for title
+  const title = pageName.charAt(0).toUpperCase() + pageName.slice(1)
+
+  // Build imports
+  const imports: string[] = []
+  imports.push(`import type { Metadata } from 'next'`)
+  imports.push(`import { Wrapper } from '@/components/layout/wrapper'`)
+
+  // Build wrapper props
+  const wrapperProps: string[] = [`theme="${theme}"`]
+
+  const componentBody: string = `(
+    <Wrapper ${wrapperProps.join(" ")}>
+      <section className="py-44">
+        <div className="container">
+          <h1>${title}</h1>
+          {/* Your content here */}
+        </div>
+      </section>
+    </Wrapper>
+  )`
+
+  // Build metadata export
+  const metadataExport: string = `
+export const metadata: Metadata = {
+  title: '${title}',
+  description: '${title} page description',
+}`
+
+  return `${imports.join("\n")}
+${metadataExport}
+
+export default function ${title}Page() {
+  return ${componentBody}
+}
+`
+}
+
+/**
+ * Create page files and directories
+ */
+export const createPage = async (
+  pageName: string,
+  options: PageOptions
+): Promise<void> => {
+  const s = p.spinner()
+
+  try {
+    // Create directory structure
+    const pageDir = `app/${pageName}`
+    const componentsDir = `${pageDir}/_components`
+
+    s.start(`Creating page structure for "${pageName}"`)
+
+    // Create main page directory (cross-platform)
+    await createDir(pageDir)
+
+    // Create _components subdirectory (cross-platform)
+    await createDir(componentsDir)
+
+    // Create .gitkeep in _components
+    await Bun.write(`${componentsDir}/.gitkeep`, "")
+
+    // Generate and write page.tsx
+    const pageContent = generatePageContent(pageName, options)
+    await Bun.write(`${pageDir}/page.tsx`, pageContent)
+
+    // Create CSS module if requested
+    if (options.css) {
+      const cssContent = `/* ${pageName}.module.css */
+
+.container {
+  /* Add your styles here */
+}
+`
+      await Bun.write(`${pageDir}/${pageName}.module.css`, cssContent)
+    }
+
+    s.stop(`Page "${pageName}" generated successfully!`)
+
+    // Show what was created
+    p.log.success(`Generated files:`)
+    p.log.message(`  📄 ${pageDir}/page.tsx`)
+    p.log.message(`  📁 ${componentsDir}/`)
+    if (options.css) {
+      p.log.message(`  🎨 ${pageDir}/${pageName}.module.css`)
+    }
+
+    // Build next steps message
+    const nextSteps = [`1. Customize ${pageDir}/page.tsx`]
+
+    nextSteps.push(
+      `${nextSteps.length + 1}. Add components to ${componentsDir}/`
+    )
+    nextSteps.push(
+      `${nextSteps.length + 1}. Visit /${pageName} to see your page`
+    )
+
+    p.note(`Next steps:\n  ${nextSteps.join("\n  ")}`)
+  } catch (error) {
+    s.stop(`Failed to generate page "${pageName}"`)
+    throw error
+  }
+}
+
+// Export functions for use by unified generate script

package/packages/create-basement-app/templates/default/lib/scripts/generate.ts

@@ -0,0 +1,79 @@
+#!/usr/bin/env bun
+/**
+ * Satūs Generator CLI
+ *
+ * Interactive scaffolding for new pages and components.
+ * Generates pre-configured templates following project conventions.
+ *
+ * Usage:
+ *   bun run generate
+ *
+ * Options:
+ *   - Page: Creates route with layout, metadata, and optional integrations
+ *   - Component: Creates UI component with CSS module and barrel export
+ */
+
+import * as p from "@clack/prompts"
+import { createComponent, promptComponentConfig } from "./generate-component"
+// Import the existing generators
+import { createPage, promptPageConfig } from "./generate-page"
+
+/**
+ * Main CLI function
+ */
+const main = async (): Promise<void> => {
+  console.clear()
+
+  p.intro("Satūs Generator")
+
+  // Ask what to create
+  const createType = await p.select({
+    message: "What would you like to generate?",
+    options: [
+      {
+        value: "page",
+        label: "Page",
+        hint: "New route/page with layout and components",
+      },
+      {
+        value: "component",
+        label: "Component",
+        hint: "New reusable UI component",
+      },
+    ],
+  })
+
+  if (p.isCancel(createType)) {
+    p.cancel("Generation cancelled")
+    process.exit(0)
+  }
+
+  try {
+    if (createType === "page") {
+      // Get page configuration through interactive prompts
+      const { name: pageName, options } = await promptPageConfig()
+
+      // Create the page
+      await createPage(pageName, options)
+    } else if (createType === "component") {
+      // Get component configuration through interactive prompts
+      const { path: componentPath, options } = await promptComponentConfig()
+
+      // Create the component
+      await createComponent(componentPath, options)
+    }
+
+    p.outro("Generation completed successfully! 🚀")
+  } catch (error) {
+    p.log.error(
+      `Generation failed: ${error instanceof Error ? error.message : String(error)}`
+    )
+    process.exit(1)
+  }
+}
+
+// Run the CLI
+main().catch((err) => {
+  p.log.error(`Unexpected error: ${err.message}`)
+  process.exit(1)
+})