canx-ui 1.0.0 → 1.0.3

package/bin/cli.js

@@ -2,48 +2,82 @@
 
 /**
  * Canx UI CLI
- * Simulates 'npx canx-ui init'
+ * Supports: 
+ * - npx canx-ui init (Setup utils and basic css)
+ * - npx canx-ui add [component] (Add specific component)
  */
-import { existsSync, writeFileSync, mkdirSync } from "fs";
+import { existsSync, writeFileSync, mkdirSync, readFileSync } from "fs";
 import { join } from "path";
+import { registry } from "./registry.js";
 
 const args = process.argv.slice(2);
 const command = args[0];
+const componentName = args[1];
+
+const COMPONENTS_DIR = join(process.cwd(), "src", "components", "ui");
+const LIB_DIR = join(process.cwd(), "src", "lib");
+const UTILS_PATH = join(LIB_DIR, "utils.ts");
+
+// Helper to ensure directory exists
+function ensureDir(dir) {
+  if (!existsSync(dir)) {
+    mkdirSync(dir, { recursive: true });
+    // console.log(`   Created directory: ${dir}`);
+  }
+}
 
 if (command === "init") {
   console.log("🎨 Initializing Canx UI...");
 
-  // 1. Check/Create components directory
-  const componentsDir = join(process.cwd(), "src", "components", "ui");
-  if (!existsSync(componentsDir)) {
-    console.log("   Creating directory: src/components/ui");
-    mkdirSync(componentsDir, { recursive: true });
+  // 1. Create lib/utils.ts
+  ensureDir(LIB_DIR);
+  if (!existsSync(UTILS_PATH)) {
+    console.log("   Creating src/lib/utils.ts...");
+    writeFileSync(UTILS_PATH, registry.utils);
+  } else {
+    console.log("   src/lib/utils.ts already exists.");
   }
 
-  // 2. Create a theme config or necessary utils
-  const utilsPath = join(process.cwd(), "src", "lib", "utils.ts");
-  const libDir = join(process.cwd(), "src", "lib");
-  
-  if (!existsSync(utilsPath)) {
-    if (!existsSync(libDir)) mkdirSync(libDir, { recursive: true });
-    
-    console.log("   Creating utility: src/lib/utils.ts");
-    const utilsContent = `import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+  // 2. Hint about CSS
+  console.log("\n✅ Initialization complete!");
+  console.log("   \n⚠️  Requirement: Make sure you have the following in your global CSS (v4 compatible variables):");
+  console.log("   (We didn't overwrite your globals.css to be safe, but here is what you need)");
+  console.log(registry.cssVars);
+  console.log("\n   📦 Dependencies needed:");
+  console.log("   npm install clsx tailwind-merge class-variance-authority lucide-react @radix-ui/react-slot");
 
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-`;
-    writeFileSync(utilsPath, utilsContent);
-    // Note: We assume the user needs to install clsx and tailwind-merge
-    console.log("   ⚠️  Please install dependencies: npm install clsx tailwind-merge");
-  }
+} else if (command === "add") {
+    if (!componentName) {
+        console.error("❌ Please specify a component to add. Example: npx canx-ui add button");
+        process.exit(1);
+    }
+
+    const template = registry[componentName.toLowerCase()];
+    if (!template) {
+        console.error(`❌ Component '${componentName}' not found in registry.`);
+        console.log("   Available components: button, input, modal");
+        process.exit(1);
+    }
 
-  console.log("✅ Canx UI initialized successfully!");
-  console.log("   Run 'npm install canx-ui' to use the library components.");
-  console.log("   Or import them directly if you copied the source.");
+    console.log(`📦 Adding ${componentName}...`);
+    
+    // Check if initialized
+    if (!existsSync(UTILS_PATH)) {
+        console.warn("⚠️  src/lib/utils.ts not found. It is recommended to run 'npx canx-ui init' first.");
+    }
+
+    ensureDir(COMPONENTS_DIR);
+    const componentPath = join(COMPONENTS_DIR, `${componentName.toLowerCase()}.tsx`);
+    
+    if (existsSync(componentPath)) {
+        console.log(`   ⚠️  ${componentName} already exists at src/components/ui/${componentName.toLowerCase()}.tsx. Skipping.`);
+    } else {
+        writeFileSync(componentPath, template);
+        console.log(`   ✅ Created src/components/ui/${componentName.toLowerCase()}.tsx`);
+    }
 
 } else {
-  console.log("Unknown command. Try 'init'.");
+  console.log("Unknown command. Available commands:");
+  console.log("  npx canx-ui init          Initialize dependencies and utils");
+  console.log("  npx canx-ui add [name]    Add a component to your project");
 }

package/bin/registry.js

@@ -0,0 +1,221 @@
+
+export const registry = {
+  utils: `import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+`,
+  button: `"use client";
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
+`,
+input: `import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: string;
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, label, error, ...props }, ref) => {
+    return (
+      <div className="w-full space-y-2">
+         {label && <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">{label}</label>}
+            <input
+            type={type}
+            className={cn(
+                "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+                error && "border-red-500 focus-visible:ring-red-500",
+                className
+            )}
+            ref={ref}
+            {...props}
+            />
+            {error && <p className="text-xs text-red-500">{error}</p>}
+      </div>
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }
+`,
+modal: `"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { X } from "lucide-react";
+
+interface ModalProps {
+  id: string;
+  triggerLabel?: string;
+  title?: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function Modal({ id, triggerLabel, title, children, className }: ModalProps) {
+  const dialogRef = React.useRef<HTMLDialogElement>(null);
+
+  const openModal = () => {
+    dialogRef.current?.showModal();
+  };
+
+  const closeModal = () => {
+    dialogRef.current?.close();
+  };
+
+  // Close when clicking outside
+  const handleBackdropClick = (e: React.MouseEvent<HTMLDialogElement>) => {
+    if (e.target === dialogRef.current) {
+        closeModal();
+    }
+  }
+
+  return (
+    <>
+      {triggerLabel && (
+        <button
+          onClick={openModal}
+          className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors text-sm font-medium"
+        >
+          {triggerLabel}
+        </button>
+      )}
+
+      <dialog
+        id={id}
+        ref={dialogRef}
+        onClick={handleBackdropClick}
+        className={cn(
+            "backdrop:bg-black/50 backdrop:backdrop-blur-sm bg-background text-foreground p-6 rounded-lg shadow-xl w-full max-w-md border border-border m-auto open:animate-in open:fade-in-0 open:zoom-in-95 backdrop:animate-in backdrop:fade-in-0", 
+            className
+        )}
+      >
+        <div className="flex items-center justify-between mb-4">
+          {title && <h3 className="text-lg font-semibold">{title}</h3>}
+          <button
+            onClick={closeModal}
+            className="text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+        
+        <div className="mt-2">
+            {children}
+        </div>
+      </dialog>
+    </>
+  );
+}
+`,
+cssVars: `@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+}
+`
+};