refactor(ui): simplify scripts with Bun native APIs

- Replace execa/globby with Bun.spawn and Bun.Glob
- Rename scripts to remove redundant ui- prefix
- Use import.meta.dirname instead of fileURLToPath
- Switch root scripts from --filter to --cwd for cleaner output

Author: koistya

bun.lock

@@ -217,8 +217,6 @@
       "devDependencies": {
         "@types/react": "^19.2.7",
         "@types/react-dom": "^19.2.3",
-        "execa": "^9.6.1",
-        "globby": "^16.0.0",
         "tailwindcss": "^4.1.17",
         "typescript": "~5.9.3",
       },

docs/ui-components.md

@@ -99,9 +99,9 @@ This installs 37 components including:
 
 Components are organized in the `packages/ui` workspace:
 
-```
+```bash
 packages/ui/
-├── components/           # Component files
+├── components/          # Component files
 │   ├── ui/              # shadcn/ui components
 │   │   ├── button.tsx
 │   │   ├── card.tsx
@@ -110,10 +110,10 @@ packages/ui/
 ├── lib/
 │   └── utils.ts         # Shared utilities (cn function)
 ├── scripts/             # Management scripts
-│   ├── ui-add.ts       # Add components
-│   ├── ui-list.ts      # List components
-│   ├── ui-update.ts    # Update components
-│   └── ui-essentials.ts # Install essentials
+│   ├── add.ts           # Add components
+│   ├── list.ts          # List components
+│   ├── update.ts        # Update components
+│   └── essentials.ts    # Install essentials
 └── package.json
 ```
 

package.json

@@ -39,10 +39,10 @@
     "api:build:docker": "docker build --tag api:latest -f ./apps/api/Dockerfile .",
     "api:test": "bun --filter @repo/api test",
     "api:deploy": "bun --filter @repo/api deploy",
-    "ui:add": "bun --filter @repo/ui ui:add",
-    "ui:list": "bun --filter @repo/ui ui:list",
-    "ui:update": "bun --filter @repo/ui ui:update",
-    "ui:essentials": "bun --filter @repo/ui ui:essentials",
+    "ui:add": "bun --cwd packages/ui add",
+    "ui:list": "bun --cwd packages/ui list",
+    "ui:update": "bun --cwd packages/ui update",
+    "ui:essentials": "bun --cwd packages/ui essentials",
     "email:dev": "bun --filter @repo/email dev",
     "email:build": "bun --filter @repo/email build",
     "email:export": "bun --filter @repo/email export"

packages/ui/README.md

@@ -175,25 +175,25 @@ Consuming apps **must** include UI package paths in their Tailwind CSS v4 config
 
 ```bash
 # From project root
-bun run ui:add button          # Add a single component
-bun run ui:add button card      # Add multiple components
-bun run ui:essentials           # Install curated essential components (37 components)
+bun ui:add button               # Add a single component
+bun ui:add button card          # Add multiple components
+bun ui:essentials               # Install curated essential components
 
 # From packages/ui directory
-bun run ui:add dialog
+bun run add dialog
 ```
 
 ### Listing Components
 
 ```bash
-bun run ui:list                 # Show all installed components with metadata
+bun ui:list                     # Show all installed components with metadata
 ```
 
 ### Updating Components
 
 ```bash
-bun run ui:update               # Update all components to latest versions
-bun run ui:update button        # Update specific component
+bun ui:update                   # Update all components to latest versions
+bun ui:update button            # Update specific component
 ```
 
 ### Essential Components
@@ -207,8 +207,8 @@ The `ui:essentials` script installs a curated set of 37 components perfect for m
 - **Data Display**: avatar, tooltip, popover
 
 ```bash
-bun run ui:essentials --list    # Preview components without installing
-bun run ui:essentials           # Install all essential components
+bun ui:essentials --list        # Preview components without installing
+bun ui:essentials               # Install all essential components
 ```
 
 All scripts include:

packages/ui/components/checkbox.tsx

@@ -11,13 +11,13 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      "grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
       className,
     )}
     {...props}
   >
     <CheckboxPrimitive.Indicator
-      className={cn("flex items-center justify-center text-current")}
+      className={cn("grid place-content-center text-current")}
     >
       <Check className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>

packages/ui/package.json

@@ -24,10 +24,10 @@
     "dev": "tsc --watch",
     "lint": "eslint . --max-warnings 0",
     "type-check": "tsc --noEmit",
-    "ui:list": "bun scripts/ui-list.ts",
-    "ui:update": "bun scripts/ui-update.ts",
-    "ui:add": "bun scripts/ui-add.ts",
-    "ui:essentials": "bun scripts/ui-essentials.ts"
+    "add": "bun scripts/add.ts",
+    "list": "bun scripts/list.ts",
+    "update": "bun scripts/update.ts",
+    "essentials": "bun scripts/essentials.ts"
   },
   "peerDependencies": {
     "react": ">=19.2.1",
@@ -52,8 +52,6 @@
   "devDependencies": {
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "execa": "^9.6.1",
-    "globby": "^16.0.0",
     "tailwindcss": "^4.1.17",
     "typescript": "~5.9.3"
   },

packages/ui/scripts/ui-add.ts renamed to packages/ui/scripts/add.ts

@@ -1,26 +1,22 @@
 #!/usr/bin/env bun
 
-import { dirname, join } from "node:path";
-import { fileURLToPath } from "node:url";
-import { execa } from "execa";
-import { globby } from "globby";
+import { join } from "node:path";
+import { Glob } from "bun";
 
 /**
- * Execute a command using execa with proper error handling
+ * Execute a command with inherited stdio
  */
 export async function execCommand(
   command: string,
   args: string[],
 ): Promise<void> {
-  try {
-    await execa(command, args, {
-      stdio: "inherit",
-    });
-  } catch (error) {
-    const message = error instanceof Error ? error.message : String(error);
-    throw new Error(
-      `Command failed: ${command} ${args.join(" ")} - ${message}`,
-    );
+  const proc = Bun.spawn([command, ...args], {
+    stdio: ["inherit", "inherit", "inherit"],
+  });
+
+  const exitCode = await proc.exited;
+  if (exitCode !== 0) {
+    throw new Error(`Command failed: ${command} ${args.join(" ")}`);
   }
 }
 
@@ -29,23 +25,25 @@ export async function execCommand(
  */
 export async function formatGeneratedFiles(): Promise<void> {
   try {
-    const __dirname = dirname(fileURLToPath(import.meta.url));
-    const componentFiles = await globby(
-      join(__dirname, "../components/**/*.{ts,tsx}"),
-      {
-        absolute: true,
-      },
-    );
+    const componentsDir = join(import.meta.dirname, "../components");
+
+    const glob = new Glob("**/*.{ts,tsx}");
+    const componentFiles: string[] = [];
+
+    for await (const file of glob.scan({
+      cwd: componentsDir,
+      absolute: true,
+    })) {
+      componentFiles.push(file);
+    }
 
     if (componentFiles.length === 0) {
       return;
     }
 
     console.log("🎨 Formatting generated files with Prettier...");
 
-    await execa("bunx", ["prettier", "--write", ...componentFiles], {
-      stdio: "inherit",
-    });
+    await execCommand("bunx", ["prettier", "--write", ...componentFiles]);
 
     console.log("✨ Files formatted successfully");
   } catch (error) {

packages/ui/scripts/ui-essentials.ts renamed to packages/ui/scripts/essentials.ts

@@ -2,8 +2,7 @@
 
 import { existsSync } from "node:fs";
 import { readdir, stat } from "node:fs/promises";
-import { basename, dirname, join } from "node:path";
-import { fileURLToPath } from "node:url";
+import { basename, join } from "node:path";
 
 interface ComponentInfo {
   name: string;
@@ -26,8 +25,7 @@ async function listComponents(): Promise<void> {
   console.log("📋 shadcn/ui Component Inventory");
   console.log("=============================\n");
 
-  const __dirname = dirname(fileURLToPath(import.meta.url));
-  const componentsDir = join(__dirname, "../components");
+  const componentsDir = join(import.meta.dirname, "../components");
 
   if (!existsSync(componentsDir)) {
     console.log(`❌ Components directory not found: ${componentsDir}`);