@akanjs/cli 0.0.144 → 0.0.146

package/cjs/index.js

@@ -5562,26 +5562,32 @@ ${guideJson.update.rules.map((rule) => `- ${rule}`).join("\n")}
     const instruction = await Prompter.getInstruction(this.name);
     const pageContent = this.workspace.getLocalFile(writePath);
     const request = `
-\uB098\uB294 Akan.js \uD504\uB808\uC784\uC6CC\uD06C\uC5D0 \uB300\uD55C documentation \uC6F9\uC0AC\uC774\uD2B8\uB97C \uB9CC\uB4E4\uACE0 \uC788\uC5B4.
+I'm creating a documentation website for the Akan.js framework.
 
-1. Akan.js \uD504\uB808\uC784\uC6CC\uD06C\uC5D0 \uB300\uD55C \uAC1C\uC694
+1. Overview of the Akan.js framework
 ${await this.getDocumentation("framework")}
 
-\uB098\uB294 ${writePath}\uC5D0 \uC788\uB294 Next.js \uC11C\uBC84\uC0AC\uC774\uB4DC \uD398\uC774\uC9C0\uB97C \uC5C5\uB370\uC774\uD2B8\uD558\uB824\uACE0 \uD574.
-\uC544\uB798\uB294 \uD604\uC7AC \uC791\uC131\uB41C \uD398\uC774\uC9C0\uC758 \uB0B4\uC6A9\uC774\uC57C.
+2. Documentation page writing method
+${await this.getDocumentation("docPageRule")}
+
+3. CSS rule with TailwindCSS and DaisyUI
+${await this.getDocumentation("cssRule")}
+
+I want to update the Next.js server-side page located at ${writePath}.
+Below is the content of the currently written page.
 \`\`\`tsx
 // File: ${writePath}
 ${pageContent.content}
 \`\`\`
 
-\uD574\uB2F9 \uD398\uC774\uC9C0\uC5D0 \uC544\uB798 \uB0B4\uC6A9\uC744 \uCD5C\uC2E0\uD654 \uD574\uC11C \uC5C5\uB370\uC774\uD2B8\uD574\uC918. \uADFC\uC0AC\uD55C \uB514\uC790\uC778\uC73C\uB85C \uC801\uC6A9\uC774 \uD544\uC694\uD574.
+Please update this page with the latest content below. A great design application is needed.
 ${instruction}
 
-CSS\uADDC\uCE59\uC740 \uB2E4\uC74C\uC744 \uB530\uB77C\uC11C \uC791\uC131\uD574\uC918.
-- tailwindcss\uB97C \uC0AC\uC6A9\uD560 \uAC83
-- daisyui \uB77C\uC774\uBE0C\uB7EC\uB9AC\uC758 className\uC744 \uC0AC\uC6A9\uD560 \uAC83
+Please follow these CSS rules when writing:
+- Use tailwindcss
+- Use className from the daisyui library
 
-\uD30C\uC2F1\uD558\uAE30 \uC27D\uAC8C \uD30C\uC77C \uACB0\uACFC\uB9CC \uB2E4\uC74C\uACFC \uAC19\uC740 \uD615\uC2DD\uC73C\uB85C \uBC18\uD658\uD574\uC918.
+Please return only the file result in the following format for easy parsing.
 \`\`\`tsx
 // File: ${writePath}
 ...pageContent
@@ -5600,14 +5606,14 @@ var GuidelineRunner = class {
     const guidelineContent = await session.editMarkdown(request);
     workspace.writeFile(writePath, guidelineContent);
   }
-  async deployDocPages(workspace, guideName) {
+  async deployDocPage(workspace, guideName) {
     const session = new AiSession("deployDocPages", { workspace, cacheKey: guideName });
     const guideJson = await Prompter.getGuideJson(guideName);
     const prompt = new GuidelinePrompt(workspace, guideName);
-    const { request, writePath } = await prompt.requestUpdateDocumentPage(guideJson.page);
-    const guidelineContent = await session.editMarkdown(request);
-    workspace.writeFile(writePath, guidelineContent);
-    return Promise.resolve({});
+    if (!guideJson.page)
+      return Promise.resolve({});
+    const { request } = await prompt.requestUpdateDocumentPage(guideJson.page);
+    await session.writeTypescripts(request, workspace);
   }
 };
 
@@ -5618,9 +5624,9 @@ var GuidelineScript = class {
     const guideName = name ?? await Prompter.selectGuideline();
     await this.#runner.generateInstruction(workspace, guideName);
   }
-  async deployDocPages(workspace, name = null) {
+  async deployDocPage(workspace, name = null) {
     const guideName = name ?? await Prompter.selectGuideline();
-    await this.#runner.deployDocPages(workspace, guideName);
+    await this.#runner.deployDocPage(workspace, guideName);
   }
 };
 
@@ -5630,8 +5636,8 @@ var GuidelineCommand = class {
   async generateInstruction(name, workspace) {
     await this.guidelineScript.generateInstruction(workspace, name);
   }
-  async deployDocs(name, workspace) {
-    await this.guidelineScript.deployDocPages(workspace, name);
+  async deployDoc(name, workspace) {
+    await this.guidelineScript.deployDocPage(workspace, name);
   }
 };
 __decorateClass([
@@ -5643,7 +5649,7 @@ __decorateClass([
   Target.Public(),
   __decorateParam(0, Argument("name", { ask: "name of the instruction", nullable: true })),
   __decorateParam(1, Workspace())
-], GuidelineCommand.prototype, "deployDocs", 1);
+], GuidelineCommand.prototype, "deployDoc", 1);
 GuidelineCommand = __decorateClass([
   Commands()
 ], GuidelineCommand);

package/cjs/src/guidelines/componentRule/componentRule.instruction.md

@@ -5,10 +5,9 @@
 1. [Component Architecture](#component-architecture)
 2. [Component Types](#component-types)
 3. [File Naming Conventions](#file-naming-conventions)
-4. [CSS Rule with TailwindCSS and DaisyUI](#css-rule-with-tailwindcss-and-daisyui)
-5. [Utility Functions](#utility-functions)
-6. [Best Practices](#best-practices)
-7. [Complete Examples](#complete-examples)
+4. [Utility Functions](#utility-functions)
+5. [Best Practices](#best-practices)
+6. [Complete Examples](#complete-examples)
 
 ---
 
@@ -248,83 +247,6 @@ Akan.js uses a strict naming convention to maintain consistency:
 
 ---
 
-## CSS Rule with TailwindCSS and DaisyUI
-
-Akan.js uses TailwindCSS with DaisyUI for styling. Follow these guidelines:
-
-### 1. Class Management
-
-Always use `clsx` for conditional and composite classes:
-
-```tsx
-import { clsx } from "@akanjs/client";
-
-className={clsx(
-  "base-classes",
-  condition && "conditional-class",
-  variant === "primary" ? "primary-class" : "secondary-class",
-  className // Always include passed className for composition
-)}
-```
-
-### 2. Color System
-
-Use DaisyUI's theme colors instead of hardcoded values. This ensures theme consistency and dark/light mode compatibility:
-
-```tsx
-// Good - uses theme colors
-className = "bg-primary text-base-100";
-
-// Bad - uses hardcoded colors
-className = "bg-[#C33C32] text-[#FFFFFF]";
-```
-
-DaisyUI provides semantic colors:
-
-- `primary`, `secondary`, `accent` - Brand colors
-- `base-100` through `base-900` - Background/text variants
-- `info`, `success`, `warning`, `error` - Status colors
-
-### 3. Responsive Design
-
-Use Tailwind's responsive prefixes:
-
-```tsx
-<div className="flex-col md:flex-row">
-  <div className="w-full md:w-1/2 lg:w-1/3">Responsive width</div>
-  <div className="hidden lg:block">Only visible on large screens</div>
-</div>
-```
-
-### 4. Animation
-
-Use Tailwind animation classes with transitions:
-
-```tsx
-<div className="transition-all duration-300 hover:scale-105">
-  Hover effect
-</div>
-
-<div className="animate-pulse">Loading indicator</div>
-```
-
-### 5. Component Styling
-
-Use DaisyUI components for consistent UIs:
-
-```tsx
-<button className="btn btn-primary btn-sm">Primary Button</button>
-
-<div className="card bg-base-200 shadow-md">
-  <div className="card-body">
-    <h2 className="card-title">Card Title</h2>
-    <p>Card content</p>
-  </div>
-</div>
-```
-
----
-
 ## Utility Functions
 
 Akan.js provides several utility modules for common frontend tasks:

package/cjs/src/guidelines/cssRule/cssRule.instruction.md

@@ -0,0 +1,435 @@
+# CSS Styling Guidelines with TailwindCSS and DaisyUI in Akan.js
+
+## Introduction
+
+This document provides comprehensive styling guidelines for Akan.js components using TailwindCSS and DaisyUI. Following these standards ensures consistency, maintainability, and proper theming across all applications in the Akan.js ecosystem.
+
+## Core Principles
+
+1. **Utility-First Approach**: Use Tailwind's utility classes for styling instead of custom CSS
+2. **Component Composition**: Design with composition in mind, allowing styling overrides via `className` prop
+3. **Theme Consistency**: Use DaisyUI's theme variables for colors and maintain consistent spacing
+4. **Responsive Design**: Implement mobile-first responsive layouts using Tailwind's breakpoint prefixes
+5. **Accessibility**: Ensure proper contrast, focus states, and semantic markup
+
+## Class Management with `clsx`
+
+### Importing `clsx`
+
+Always import the `clsx` utility from the client package:
+
+```tsx
+import { clsx } from "@akanjs/client";
+```
+
+### Basic Usage
+
+Use `clsx` to combine class names conditionally:
+
+```tsx
+<div
+  className={clsx(
+    "base-classes", // Always applied
+    condition && "conditional-classes", // Applied when condition is true
+    className // Forward className from props
+  )}
+>
+  {/* Content */}
+</div>
+```
+
+### Object Syntax for Multiple Conditions
+
+```tsx
+<div
+  className={clsx(
+    "base-styles",
+    {
+      "bg-primary": isPrimary,
+      "bg-secondary": isSecondary,
+      "bg-success": isSuccess,
+      "bg-error": isError,
+    },
+    className
+  )}
+>
+  {/* Content */}
+</div>
+```
+
+## Component Structure Best Practices
+
+### 1. Accept and Forward `className` Prop
+
+Every component should accept a `className` prop to enable style composition:
+
+```tsx
+interface CardProps {
+  className?: string;
+  // Other props...
+}
+
+export const Card = ({ className, ...props }: CardProps) => {
+  return (
+    <div
+      className={clsx(
+        "card bg-base-100 shadow-md",
+        className // Always include at the end to allow overrides
+      )}
+    >
+      {/* Card content */}
+    </div>
+  );
+};
+```
+
+### 2. Use DaisyUI's Semantic Color System
+
+Avoid hardcoded color values. Use DaisyUI's theme variables instead for better theming support:
+
+✅ **Recommended:**
+
+```tsx
+<div className="bg-primary text-primary-content hover:bg-primary-focus">Themeable content</div>
+```
+
+❌ **Avoid:**
+
+```tsx
+<div className="bg-[#3b82f6] text-white hover:bg-[#2563eb]">Hardcoded colors</div>
+```
+
+**DaisyUI Color System:**
+
+| Base Color | Text Color        | Focus/Hover Variant |
+| ---------- | ----------------- | ------------------- |
+| primary    | primary-content   | primary-focus       |
+| secondary  | secondary-content | secondary-focus     |
+| accent     | accent-content    | accent-focus        |
+| neutral    | neutral-content   | neutral-focus       |
+| base-100   | base-content      | base-200/base-300   |
+| info       | info-content      | info-focus          |
+| success    | success-content   | success-focus       |
+| warning    | warning-content   | warning-focus       |
+| error      | error-content     | error-focus         |
+
+### 3. Implement Responsive Design
+
+Use Tailwind's responsive prefixes for mobile-first development:
+
+```tsx
+<div className="flex flex-col gap-4 md:flex-row">
+  <div className="w-full md:w-1/3">Sidebar</div>
+  <div className="w-full md:w-2/3">Main Content</div>
+</div>
+```
+
+**Breakpoint prefixes:**
+
+- `sm:` - 640px and above
+- `md:` - 768px and above
+- `lg:` - 1024px and above
+- `xl:` - 1280px and above
+- `2xl:` - 1536px and above
+
+### 4. Implement State and Interaction Variants
+
+Use Tailwind's state variants for interactive elements:
+
+```tsx
+<button className="bg-primary text-primary-content hover:bg-primary-focus focus:ring-primary focus:ring-2 focus:ring-offset-2 active:scale-95 disabled:pointer-events-none disabled:opacity-50">
+  Interactive Button
+</button>
+```
+
+**Common state variants:**
+
+- `hover:` - Mouse hover state
+- `focus:` - Focus state
+- `active:` - Active/pressed state
+- `disabled:` - Disabled state
+- `group-hover:` - Parent hover targeting child elements
+- `dark:` - Dark mode variant
+
+### 5. Use Consistent Spacing
+
+Maintain consistent spacing using Tailwind's scale:
+
+```tsx
+<div className="space-y-4">
+  <div className="p-4">Section 1</div>
+  <div className="p-4">Section 2</div>
+  <div className="p-4">Section 3</div>
+</div>
+```
+
+## Component Types in Akan.js
+
+Akan.js follows specific component naming conventions with distinct styling approaches:
+
+### 1. Unit Components (\*.Unit.tsx)
+
+List items or cards that display summarized data:
+
+```tsx
+// Example: Project.Unit.tsx
+export const Card = ({ className, project, href }: ModelProps<"project", cnst.LightProject>) => {
+  return (
+    <Link
+      href={href}
+      className={clsx(
+        "border-base-300 bg-base-100 flex flex-col gap-3 rounded-lg border-2 p-4",
+        "hover:border-primary transition-all hover:shadow-md",
+        "focus:ring-primary focus:outline-hidden focus:ring-2",
+        className
+      )}
+    >
+      <h3 className="text-base-content text-lg font-semibold">{project.name}</h3>
+      {/* Additional content */}
+    </Link>
+  );
+};
+```
+
+### 2. View Components (\*.View.tsx)
+
+Detailed displays of full data models:
+
+```tsx
+// Example: Project.View.tsx
+export const Detail = ({ className, project }: ModelProps<"project", cnst.FullProject>) => {
+  return (
+    <div className={clsx("bg-base-100 rounded-lg p-6 shadow-lg", className)}>
+      <div className="border-primary mb-6 border-l-4 pl-4">
+        <h1 className="text-primary text-2xl font-bold">{project.name}</h1>
+      </div>
+
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-2">{/* Project details */}</div>
+    </div>
+  );
+};
+```
+
+### 3. Edit Components (\*.Edit.tsx)
+
+Form components for creating or editing data:
+
+```tsx
+// Example: Project.Edit.tsx
+export const Form = ({ className }: { className?: string }) => {
+  const { project, setProject } = useProjectStore();
+
+  return (
+    <div className={clsx("card bg-base-100 p-6 shadow-lg", className)}>
+      <h2 className="card-title mb-4">Project Details</h2>
+
+      <div className="form-control w-full">
+        <label className="label">
+          <span className="label-text">Project Name</span>
+        </label>
+        <input
+          type="text"
+          className="input input-bordered w-full"
+          value={project.name}
+          onChange={(e) => setProject({ ...project, name: e.target.value })}
+        />
+      </div>
+
+      {/* Additional form fields */}
+    </div>
+  );
+};
+```
+
+### 4. Util Components (\*.Util.tsx)
+
+Special function components like buttons, toggles, and actions:
+
+```tsx
+// Example: Project.Util.tsx
+export const StatusBadge = ({ className, status }: { className?: string; status: ProjectStatus }) => {
+  return (
+    <span
+      className={clsx(
+        "badge font-medium",
+        status === "active" && "badge-success",
+        status === "pending" && "badge-warning",
+        status === "canceled" && "badge-error",
+        status === "completed" && "badge-info",
+        className
+      )}
+    >
+      {status}
+    </span>
+  );
+};
+```
+
+### 5. Zone Components (\*.Zone.tsx)
+
+Container components that combine multiple components:
+
+```tsx
+// Example: Project.Zone.tsx
+export const ProjectDashboard = ({ className }: { className?: string }) => {
+  return (
+    <div className={clsx("grid grid-cols-1 gap-6 lg:grid-cols-3", className)}>
+      <div className="lg:col-span-2">
+        <ProjectSummary />
+      </div>
+      <div>
+        <ProjectStats />
+      </div>
+      <div className="lg:col-span-3">
+        <ProjectTimeline />
+      </div>
+    </div>
+  );
+};
+```
+
+## Common UI Patterns
+
+### 1. Card Pattern
+
+```tsx
+<div className="card bg-base-100 shadow-md transition-shadow hover:shadow-lg">
+  <figure className="px-4 pt-4">
+    <img src={image.url} alt={title} className="h-48 w-full rounded-lg object-cover" />
+  </figure>
+  <div className="card-body">
+    <h2 className="card-title">{title}</h2>
+    <p className="text-base-content/70">{description}</p>
+    <div className="card-actions mt-4 justify-end">
+      <button className="btn btn-primary btn-sm">View Details</button>
+    </div>
+  </div>
+</div>
+```
+
+### 2. Form Pattern
+
+```tsx
+<div className="form-control w-full max-w-md">
+  <label className="label">
+    <span className="label-text">Email</span>
+  </label>
+  <input
+    type="email"
+    className="input input-bordered w-full"
+    value={email}
+    onChange={(e) => setEmail(e.target.value)}
+  />
+  <label className="label">
+    <span className="label-text-alt text-error">{error}</span>
+  </label>
+</div>
+```
+
+### 3. List Pattern
+
+```tsx
+<div className="bg-base-100 rounded-lg shadow">
+  <div className="border-base-200 border-b p-4 font-medium">Items List</div>
+  <ul>
+    {items.map((item) => (
+      <li key={item.id} className="border-base-200 border-b last:border-none">
+        <div className="hover:bg-base-200 p-4 transition-colors">
+          <div className="flex items-center justify-between">
+            <span>{item.name}</span>
+            <span className="badge badge-outline">{item.category}</span>
+          </div>
+        </div>
+      </li>
+    ))}
+  </ul>
+</div>
+```
+
+### 4. Dashboard Pattern
+
+```tsx
+<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+  <div className="stats bg-base-100 shadow">
+    <div className="stat">
+      <div className="stat-title">Total Users</div>
+      <div className="stat-value">{totalUsers}</div>
+      <div className="stat-desc">↗︎ 14% from last month</div>
+    </div>
+  </div>
+
+  {/* Additional stat cards */}
+</div>
+```
+
+## Best Practices
+
+### 1. Component Composition
+
+- Create small, focused components
+- Combine them to build complex UIs
+- Use props for variations
+- Accept and forward `className` for style overrides
+
+### 2. Consistent Layout
+
+- Use Flexbox and Grid for layouts
+- Maintain consistent spacing
+- Implement proper padding and margins
+- Design for all screen sizes
+
+### 3. Color Usage
+
+- Use DaisyUI theme colors
+- Maintain proper contrast ratios
+- Use opacity modifiers for variants (`bg-primary/80`)
+- Avoid hardcoded colors
+
+### 4. Performance Optimization
+
+- Group related classes
+- Use Tailwind's JIT mode
+- Purge unused styles in production
+- Prefer Tailwind classes over custom CSS
+
+### 5. Dark Mode Support
+
+```tsx
+<div className="bg-base-100 text-base-content">{/* Content automatically adapts to dark mode via DaisyUI */}</div>
+```
+
+## Common Mistakes to Avoid
+
+1. **Inconsistent Spacing**: Mixing arbitrary values instead of using Tailwind's scale
+2. **Hardcoded Colors**: Using hex codes or RGB values instead of theme variables
+3. **Missing `className` Prop**: Not forwarding the prop for composition
+4. **Direct Style Imports**: Importing component styles directly instead of using utility classes
+5. **Overriding Base Styles**: Applying too many custom styles that break theme consistency
+
+## Troubleshooting
+
+### 1. Styles Not Applying
+
+- Check for typos in class names
+- Ensure proper precedence (later classes override earlier ones)
+- Verify the correct Tailwind configuration
+
+### 2. DaisyUI Components Not Working
+
+- Check DaisyUI installation
+- Verify theme configuration
+- Ensure component classes are applied correctly
+
+### 3. Responsive Design Issues
+
+- Test at various breakpoints
+- Use the correct breakpoint prefixes
+- Implement mobile-first approach
+
+## Additional Resources
+
+1. [TailwindCSS Documentation](https://tailwindcss.com/docs)
+2. [DaisyUI Documentation](https://daisyui.com/)
+3. [Tailwind CSS Cheat Sheet](https://nerdcave.com/tailwind-cheat-sheet)
+
+By following these guidelines, you'll create consistent, maintainable, and themeable components that align with the Akan.js design system. Always prioritize composition over customization and leverage the power of TailwindCSS and DaisyUI utilities.