@herowcode/cli 0.1.0 → 0.2.0

package/dist/index.js

@@ -8,8 +8,8 @@ import chalk5 from "chalk";
 import chalk2 from "chalk";
 import ora2 from "ora";
 import prompts from "prompts";
-import fs3 from "fs-extra";
-import path3 from "path";
+import fs4 from "fs-extra";
+import path4 from "path";
 
 // src/utils/detect-project.ts
 import fs from "fs-extra";
@@ -226,442 +226,92 @@ async function ensureShadcnForm(config, cwd) {
   await installShadcnComponent("form", config, cwd);
 }
 
-// src/registry/components/select-estado.ts
-var selectEstadoComponent = {
-  name: "select-estado",
-  description: "Combobox para sele\xE7\xE3o de estados brasileiros com fetch din\xE2mico da API do IBGE",
-  dependencies: [],
-  devDependencies: [],
-  shadcnDeps: ["command", "popover", "button"],
-  variants: {
-    withForm: {
-      dependencies: ["react-hook-form", "@hookform/resolvers", "zod"]
-    }
-  },
-  getCode: (config, options) => {
-    const isNextjs = config.type === "nextjs";
-    const useAlias = config.srcDir ? "@/" : "../";
-    if (isNextjs) {
-      return getNextjsCode(useAlias, config.isTypeScript);
-    } else {
-      return getViteCode(useAlias, config.isTypeScript);
-    }
-  },
-  getServerAction: (config) => {
-    return getServerActionCode(config.isTypeScript);
-  },
-  getFormWrapper: (config) => {
-    const useAlias = config.srcDir ? "@/" : "../";
-    return getFormWrapperCode(useAlias, config.isTypeScript);
-  },
-  usageExample: (withForm) => {
-    if (withForm) {
-      return `
-import { SelectEstadoField } from "@/components/ui/select-estado-field"
-
-// Dentro do seu FormProvider:
-<SelectEstadoField
-  name="estado"
-  label="Estado"
-  description="Selecione o estado"
-/>`;
+// src/registry/index.ts
+import fs3 from "fs-extra";
+import path3 from "path";
+import { fileURLToPath } from "url";
+var __filename = fileURLToPath(import.meta.url);
+var __dirname = path3.dirname(__filename);
+async function getRegistryPath() {
+  const possiblePaths = [
+    // Development: running from packages/cli/dist
+    path3.resolve(__dirname, "../../../registry"),
+    // Development: running from packages/cli/src
+    path3.resolve(__dirname, "../../registry"),
+    // Monorepo root
+    path3.resolve(__dirname, "../../../../packages/registry"),
+    // Installed via npm (registry bundled)
+    path3.resolve(__dirname, "../registry")
+  ];
+  for (const registryPath of possiblePaths) {
+    if (await fs3.pathExists(registryPath)) {
+      return registryPath;
     }
-    return `
-import { SelectEstado } from "@/components/ui/select-estado"
-
-<SelectEstado
-  value={estado}
-  onValueChange={setEstado}
-  placeholder="Selecione um estado"
-/>`;
   }
-};
-function getNextjsCode(aliasPrefix, isTypeScript) {
-  const ts = isTypeScript;
-  return `"use client";
-
-import * as React from "react";
-import { Check, ChevronsUpDown, Loader2 } from "lucide-react";
-import { cn } from "${aliasPrefix}lib/utils";
-import { Button } from "${aliasPrefix}components/ui/button";
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "${aliasPrefix}components/ui/command";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "${aliasPrefix}components/ui/popover";
-import { getEstados } from "${aliasPrefix}actions/select-estado";
-
-${ts ? `interface Estado {
-  id: number;
-  sigla: string;
-  nome: string;
-}
-
-interface SelectEstadoProps {
-  value?: string;
-  onValueChange?: (value: string) => void;
-  placeholder?: string;
-  disabled?: boolean;
-  className?: string;
-}` : ""}
-
-export function SelectEstado({
-  value,
-  onValueChange,
-  placeholder = "Selecione um estado...",
-  disabled = false,
-  className,
-}${ts ? ": SelectEstadoProps" : ""}) {
-  const [open, setOpen] = React.useState(false);
-  const [estados, setEstados] = React.useState${ts ? "<Estado[]>" : ""}([]);
-  const [loading, setLoading] = React.useState(true);
-  const [error, setError] = React.useState${ts ? "<string | null>" : ""}(null);
-
-  React.useEffect(() => {
-    async function fetchEstados() {
-      try {
-        setLoading(true);
-        setError(null);
-        const data = await getEstados();
-        setEstados(data);
-      } catch (err) {
-        setError("Erro ao carregar estados");
-        console.error(err);
-      } finally {
-        setLoading(false);
-      }
-    }
-
-    fetchEstados();
-  }, []);
-
-  const selectedEstado = estados.find((estado) => estado.sigla === value);
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          role="combobox"
-          aria-expanded={open}
-          disabled={disabled || loading}
-          className={cn("w-full justify-between", className)}
-        >
-          {loading ? (
-            <span className="flex items-center gap-2">
-              <Loader2 className="h-4 w-4 animate-spin" />
-              Carregando...
-            </span>
-          ) : error ? (
-            <span className="text-destructive">{error}</span>
-          ) : selectedEstado ? (
-            <span>{selectedEstado.nome} ({selectedEstado.sigla})</span>
-          ) : (
-            <span className="text-muted-foreground">{placeholder}</span>
-          )}
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-full p-0" align="start">
-        <Command>
-          <CommandInput placeholder="Buscar estado..." />
-          <CommandList>
-            <CommandEmpty>Nenhum estado encontrado.</CommandEmpty>
-            <CommandGroup>
-              {estados.map((estado) => (
-                <CommandItem
-                  key={estado.id}
-                  value={\`\${estado.nome} \${estado.sigla}\`}
-                  onSelect={() => {
-                    onValueChange?.(estado.sigla === value ? "" : estado.sigla);
-                    setOpen(false);
-                  }}
-                >
-                  <Check
-                    className={cn(
-                      "mr-2 h-4 w-4",
-                      value === estado.sigla ? "opacity-100" : "opacity-0"
-                    )}
-                  />
-                  {estado.nome} ({estado.sigla})
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
+  throw new Error(
+    `Registry n\xE3o encontrado. Paths tentados:
+${possiblePaths.map((p) => `  - ${p}`).join("\n")}`
   );
 }
-`;
-}
-function getViteCode(aliasPrefix, isTypeScript) {
-  const ts = isTypeScript;
-  return `import * as React from "react";
-import { Check, ChevronsUpDown, Loader2 } from "lucide-react";
-import { cn } from "${aliasPrefix}lib/utils";
-import { Button } from "${aliasPrefix}components/ui/button";
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "${aliasPrefix}components/ui/command";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "${aliasPrefix}components/ui/popover";
-
-const IBGE_API_URL = "https://servicodados.ibge.gov.br/api/v1/localidades/estados?orderBy=nome";
-
-${ts ? `interface Estado {
-  id: number;
-  sigla: string;
-  nome: string;
-}
-
-interface SelectEstadoProps {
-  value?: string;
-  onValueChange?: (value: string) => void;
-  placeholder?: string;
-  disabled?: boolean;
-  className?: string;
-}` : ""}
-
-export function SelectEstado({
-  value,
-  onValueChange,
-  placeholder = "Selecione um estado...",
-  disabled = false,
-  className,
-}${ts ? ": SelectEstadoProps" : ""}) {
-  const [open, setOpen] = React.useState(false);
-  const [estados, setEstados] = React.useState${ts ? "<Estado[]>" : ""}([]);
-  const [loading, setLoading] = React.useState(true);
-  const [error, setError] = React.useState${ts ? "<string | null>" : ""}(null);
-
-  React.useEffect(() => {
-    const controller = new AbortController();
-
-    async function fetchEstados() {
-      try {
-        setLoading(true);
-        setError(null);
-
-        const response = await fetch(IBGE_API_URL, {
-          signal: controller.signal,
-        });
-
-        if (!response.ok) {
-          throw new Error("Erro ao buscar estados");
-        }
-
-        const data${ts ? ": Estado[]" : ""} = await response.json();
-        setEstados(data);
-      } catch (err) {
-        if (err${ts ? " instanceof Error && " : " && "}err.name !== "AbortError") {
-          setError("Erro ao carregar estados");
-          console.error(err);
-        }
-      } finally {
-        setLoading(false);
-      }
+async function listComponents() {
+  const registryPath = await getRegistryPath();
+  const entries = await fs3.readdir(registryPath, { withFileTypes: true });
+  const components = [];
+  for (const entry of entries) {
+    if (!entry.isDirectory() || entry.name === "node_modules") continue;
+    const manifestPath = path3.join(registryPath, entry.name, "manifest.json");
+    if (await fs3.pathExists(manifestPath)) {
+      const manifest = await fs3.readJson(manifestPath);
+      components.push({
+        name: manifest.name,
+        description: manifest.description,
+        hasFormVariant: !!manifest.frameworks.nextjs?.withForm || !!manifest.frameworks.vite?.withForm
+      });
     }
-
-    fetchEstados();
-
-    return () => controller.abort();
-  }, []);
-
-  const selectedEstado = estados.find((estado) => estado.sigla === value);
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          role="combobox"
-          aria-expanded={open}
-          disabled={disabled || loading}
-          className={cn("w-full justify-between", className)}
-        >
-          {loading ? (
-            <span className="flex items-center gap-2">
-              <Loader2 className="h-4 w-4 animate-spin" />
-              Carregando...
-            </span>
-          ) : error ? (
-            <span className="text-destructive">{error}</span>
-          ) : selectedEstado ? (
-            <span>{selectedEstado.nome} ({selectedEstado.sigla})</span>
-          ) : (
-            <span className="text-muted-foreground">{placeholder}</span>
-          )}
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-full p-0" align="start">
-        <Command>
-          <CommandInput placeholder="Buscar estado..." />
-          <CommandList>
-            <CommandEmpty>Nenhum estado encontrado.</CommandEmpty>
-            <CommandGroup>
-              {estados.map((estado) => (
-                <CommandItem
-                  key={estado.id}
-                  value={\`\${estado.nome} \${estado.sigla}\`}
-                  onSelect={() => {
-                    onValueChange?.(estado.sigla === value ? "" : estado.sigla);
-                    setOpen(false);
-                  }}
-                >
-                  <Check
-                    className={cn(
-                      "mr-2 h-4 w-4",
-                      value === estado.sigla ? "opacity-100" : "opacity-0"
-                    )}
-                  />
-                  {estado.nome} ({estado.sigla})
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  );
-}
-`;
-}
-function getServerActionCode(isTypeScript) {
-  const ts = isTypeScript;
-  return `"use server";
-
-const IBGE_API_URL = "https://servicodados.ibge.gov.br/api/v1/localidades/estados?orderBy=nome";
-
-${ts ? `interface Estado {
-  id: number;
-  sigla: string;
-  nome: string;
-}` : ""}
-
-export async function getEstados()${ts ? ": Promise<Estado[]>" : ""} {
-  try {
-    const response = await fetch(IBGE_API_URL, {
-      next: { revalidate: 86400 }, // Cache por 24 horas
-    });
-
-    if (!response.ok) {
-      throw new Error("Erro ao buscar estados do IBGE");
-    }
-
-    const data${ts ? ": Estado[]" : ""} = await response.json();
-    return data;
-  } catch (error) {
-    console.error("Erro ao buscar estados:", error);
-    throw new Error("N\xE3o foi poss\xEDvel carregar a lista de estados");
   }
+  return components;
 }
-`;
+async function getComponentManifest(componentName) {
+  const registryPath = await getRegistryPath();
+  const manifestPath = path3.join(registryPath, componentName, "manifest.json");
+  if (!await fs3.pathExists(manifestPath)) {
+    return null;
+  }
+  return fs3.readJson(manifestPath);
 }
-function getFormWrapperCode(aliasPrefix, isTypeScript) {
-  const ts = isTypeScript;
-  return `"use client";
-
-import * as React from "react";
-import { useFormContext${ts ? ", FieldPath, FieldValues" : ""} } from "react-hook-form";
-import {
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "${aliasPrefix}components/ui/form";
-import { SelectEstado } from "./select-estado";
-
-${ts ? `interface SelectEstadoFieldProps<T extends FieldValues> {
-  name: FieldPath<T>;
-  label?: string;
-  description?: string;
-  placeholder?: string;
-  disabled?: boolean;
-  className?: string;
-}` : ""}
-
-export function SelectEstadoField${ts ? "<T extends FieldValues>" : ""}({
-  name,
-  label,
-  description,
-  placeholder,
-  disabled,
-  className,
-}${ts ? ": SelectEstadoFieldProps<T>" : ""}) {
-  const form = useFormContext${ts ? "<T>" : ""}();
-
-  return (
-    <FormField
-      control={form.control}
-      name={name}
-      render={({ field }) => (
-        <FormItem className={className}>
-          {label && <FormLabel>{label}</FormLabel>}
-          <FormControl>
-            <SelectEstado
-              value={field.value}
-              onValueChange={field.onChange}
-              placeholder={placeholder}
-              disabled={disabled}
-            />
-          </FormControl>
-          {description && <FormDescription>{description}</FormDescription>}
-          <FormMessage />
-        </FormItem>
-      )}
-    />
-  );
+async function readComponentFile(componentName, framework, fileName) {
+  const registryPath = await getRegistryPath();
+  const filePath = path3.join(registryPath, componentName, framework, fileName);
+  if (!await fs3.pathExists(filePath)) {
+    throw new Error(`Arquivo n\xE3o encontrado: ${filePath}`);
+  }
+  return fs3.readFile(filePath, "utf-8");
 }
-`;
+function transformAliases(content, aliasPrefix) {
+  return content.replace(/@\//g, aliasPrefix);
 }
 
-// src/registry/index.ts
-var COMPONENT_REGISTRY = {
-  "select-estado": selectEstadoComponent
-};
-
 // src/commands/add.ts
 async function addCommand(componentName, options) {
   const cwd = process.cwd();
   console.log(chalk2.cyan(`
 \u{1F4E6} Adicionando componente: ${componentName}
 `));
-  const component = COMPONENT_REGISTRY[componentName];
-  if (!component) {
+  const manifest = await getComponentManifest(componentName);
+  if (!manifest) {
     console.error(
       chalk2.red(`\u274C Componente "${componentName}" n\xE3o encontrado.`)
     );
     console.log(chalk2.dim("\nComponentes dispon\xEDveis:"));
-    Object.keys(COMPONENT_REGISTRY).forEach((name) => {
-      console.log(chalk2.dim(`  - ${name}`));
+    const components = await listComponents();
+    components.forEach((c) => {
+      console.log(chalk2.dim(`  - ${c.name}`));
     });
     process.exit(1);
   }
   const config = await getConfig(cwd);
   if (!config) {
-    console.error(
-      chalk2.red("\u274C herow.config.json n\xE3o encontrado.")
-    );
+    console.error(chalk2.red("\u274C herow.config.json n\xE3o encontrado."));
     console.log(chalk2.dim("Execute primeiro: herow init"));
     process.exit(1);
   }
@@ -669,15 +319,24 @@ async function addCommand(componentName, options) {
   let projectConfig;
   try {
     projectConfig = await detectProject(cwd);
-    spinner.succeed(
-      `Projeto detectado: ${projectConfig.type === "nextjs" ? "Next.js" : "Vite"}`
-    );
+    const projectLabel = projectConfig.type === "nextjs" ? "Next.js" : projectConfig.type === "vite" ? "Vite" : "Desconhecido";
+    spinner.succeed(`Projeto detectado: ${projectLabel}`);
   } catch (error) {
     spinner.fail("Erro ao detectar projeto");
     throw error;
   }
+  const framework = projectConfig.type === "nextjs" ? "nextjs" : "vite";
+  const frameworkConfig = manifest.frameworks[framework];
+  if (!frameworkConfig) {
+    console.error(
+      chalk2.red(
+        `\u274C Componente "${componentName}" n\xE3o suporta ${framework}.`
+      )
+    );
+    process.exit(1);
+  }
   let withForm = options.withForm ?? false;
-  if (component.variants?.withForm && !options.yes && !options.withForm) {
+  if (frameworkConfig.withForm && !options.yes && !options.withForm) {
     const response = await prompts({
       type: "confirm",
       name: "withForm",
@@ -690,17 +349,25 @@ async function addCommand(componentName, options) {
     }
     withForm = response.withForm;
   }
-  const allDeps = [...component.dependencies];
-  if (withForm && component.variants?.withForm) {
-    allDeps.push(...component.variants.withForm.dependencies);
+  const filesToInstall = [...frameworkConfig.files];
+  if (withForm && frameworkConfig.withForm) {
+    filesToInstall.push(...frameworkConfig.withForm.files);
+  }
+  const allDeps = [...manifest.dependencies];
+  const allRegistryDeps = [...manifest.registryDependencies];
+  if (withForm && frameworkConfig.withForm) {
+    allDeps.push(...frameworkConfig.withForm.dependencies);
+    allRegistryDeps.push(...frameworkConfig.withForm.registryDependencies);
   }
   console.log(chalk2.dim("\nSer\xE1 instalado:"));
   console.log(chalk2.dim(`  Componente: ${componentName}`));
+  console.log(chalk2.dim(`  Framework: ${framework}`));
+  console.log(chalk2.dim(`  Arquivos: ${filesToInstall.length}`));
   if (allDeps.length > 0) {
-    console.log(chalk2.dim(`  Depend\xEAncias: ${allDeps.join(", ")}`));
+    console.log(chalk2.dim(`  Depend\xEAncias npm: ${allDeps.join(", ")}`));
   }
-  if (withForm) {
-    console.log(chalk2.dim(`  Integra\xE7\xE3o: React Hook Form + Zod`));
+  if (allRegistryDeps.length > 0) {
+    console.log(chalk2.dim(`  Depend\xEAncias shadcn: ${allRegistryDeps.join(", ")}`));
   }
   if (!options.yes) {
     const { confirm } = await prompts({
@@ -714,8 +381,8 @@ async function addCommand(componentName, options) {
       process.exit(0);
     }
   }
-  if (component.shadcnDeps && component.shadcnDeps.length > 0) {
-    for (const dep of component.shadcnDeps) {
+  if (allRegistryDeps.length > 0) {
+    for (const dep of allRegistryDeps) {
       await installShadcnComponent(dep, projectConfig, cwd);
     }
   }
@@ -726,51 +393,82 @@ async function addCommand(componentName, options) {
     await installDependencies(allDeps, projectConfig, cwd);
   }
   const writeSpinner = ora2("Escrevendo arquivos...").start();
+  const writtenFiles = [];
+  const aliasPrefix = config.aliases.ui?.startsWith("@/") ? "@/" : "../";
   try {
-    const uiPath = resolveAlias(config.aliases.ui || config.aliases.components, cwd);
-    const mainFile = component.getCode(projectConfig, { withForm });
-    const mainFilePath = path3.join(
-      uiPath,
-      `${componentName}.${projectConfig.isTypeScript ? "tsx" : "jsx"}`
-    );
-    await fs3.ensureDir(path3.dirname(mainFilePath));
-    await fs3.writeFile(mainFilePath, mainFile, "utf-8");
-    if (projectConfig.type === "nextjs" && component.getServerAction) {
-      const actionCode = component.getServerAction(projectConfig);
-      const actionsPath = path3.join(
-        cwd,
-        projectConfig.actionsPath || (projectConfig.srcDir ? "src/actions" : "actions")
-      );
-      const actionFilePath = path3.join(
-        actionsPath,
-        `${componentName}.${projectConfig.isTypeScript ? "ts" : "js"}`
-      );
-      await fs3.ensureDir(path3.dirname(actionFilePath));
-      await fs3.writeFile(actionFilePath, actionCode, "utf-8");
-      writeSpinner.succeed(`Arquivos escritos!`);
-      console.log(chalk2.dim(`  ${mainFilePath}`));
-      console.log(chalk2.dim(`  ${actionFilePath}`));
-    } else {
-      writeSpinner.succeed(`Arquivo escrito: ${mainFilePath}`);
-    }
-    if (withForm && component.getFormWrapper) {
-      const formFile = component.getFormWrapper(projectConfig);
-      const formFilePath = path3.join(
-        uiPath,
-        `${componentName}-field.${projectConfig.isTypeScript ? "tsx" : "jsx"}`
-      );
-      await fs3.writeFile(formFilePath, formFile, "utf-8");
-      console.log(chalk2.dim(`  ${formFilePath}`));
+    for (const file of filesToInstall) {
+      const content = await readComponentFile(componentName, framework, file.name);
+      const transformedContent = transformAliases(content, aliasPrefix);
+      let targetDir;
+      let targetFileName = file.targetName || file.name;
+      switch (file.target) {
+        case "components":
+          targetDir = resolveAlias(
+            config.aliases.ui || config.aliases.components,
+            cwd
+          );
+          break;
+        case "actions":
+          targetDir = path4.join(
+            cwd,
+            projectConfig.actionsPath || (projectConfig.srcDir ? "src/actions" : "actions")
+          );
+          break;
+        case "hooks":
+          targetDir = path4.join(
+            cwd,
+            projectConfig.srcDir ? "src/hooks" : "hooks"
+          );
+          break;
+        case "lib":
+          targetDir = path4.join(cwd, projectConfig.srcDir ? "src/lib" : "lib");
+          break;
+        default:
+          targetDir = resolveAlias(config.aliases.components, cwd);
+      }
+      const targetPath = path4.join(targetDir, targetFileName);
+      await fs4.ensureDir(path4.dirname(targetPath));
+      await fs4.writeFile(targetPath, transformedContent, "utf-8");
+      writtenFiles.push(targetPath);
     }
+    writeSpinner.succeed("Arquivos escritos!");
+    writtenFiles.forEach((f) => console.log(chalk2.dim(`  ${f}`)));
   } catch (error) {
     writeSpinner.fail("Erro ao escrever arquivos");
     throw error;
   }
-  console.log(chalk2.green(`
-\u2705 Componente ${componentName} adicionado com sucesso!`));
-  if (component.usageExample) {
-    console.log(chalk2.dim("\nExemplo de uso:"));
-    console.log(chalk2.cyan(component.usageExample(withForm)));
+  console.log(
+    chalk2.green(`
+\u2705 Componente ${componentName} adicionado com sucesso!`)
+  );
+  console.log(chalk2.dim("\nExemplo de uso:"));
+  if (framework === "nextjs") {
+    console.log(
+      chalk2.cyan(`
+// Em um Server Component (page.tsx, layout.tsx):
+import { SelectEstado } from "${aliasPrefix}components/ui/select-estado"
+
+export default async function Page() {
+  return <SelectEstado />
+}
+
+// Em um Client Component:
+import { SelectEstadoClient } from "${aliasPrefix}components/ui/select-estado-client"
+// Passe os estados como prop
+`)
+    );
+  } else {
+    console.log(
+      chalk2.cyan(`
+import { SelectEstado } from "${aliasPrefix}components/ui/select-estado"
+
+<SelectEstado
+  value={estado}
+  onValueChange={setEstado}
+  placeholder="Selecione um estado"
+/>
+`)
+    );
   }
 }
 
@@ -778,8 +476,8 @@ async function addCommand(componentName, options) {
 import chalk3 from "chalk";
 import ora3 from "ora";
 import prompts2 from "prompts";
-import fs4 from "fs-extra";
-import path4 from "path";
+import fs5 from "fs-extra";
+import path5 from "path";
 async function initCommand(options) {
   const cwd = process.cwd();
   console.log(chalk3.cyan("\n\u{1F680} Inicializando Herow Components...\n"));
@@ -876,15 +574,15 @@ async function initCommand(options) {
     writeSpinner.fail("Erro ao salvar configura\xE7\xE3o");
     throw error;
   }
-  const uiDir = path4.join(cwd, projectConfig.componentsPath);
-  if (!await fs4.pathExists(uiDir)) {
-    await fs4.ensureDir(uiDir);
+  const uiDir = path5.join(cwd, projectConfig.componentsPath);
+  if (!await fs5.pathExists(uiDir)) {
+    await fs5.ensureDir(uiDir);
     console.log(chalk3.dim(`  Criado: ${projectConfig.componentsPath}`));
   }
   if (projectConfig.actionsPath) {
-    const actionsDir = path4.join(cwd, projectConfig.actionsPath);
-    if (!await fs4.pathExists(actionsDir)) {
-      await fs4.ensureDir(actionsDir);
+    const actionsDir = path5.join(cwd, projectConfig.actionsPath);
+    if (!await fs5.pathExists(actionsDir)) {
+      await fs5.ensureDir(actionsDir);
       console.log(chalk3.dim(`  Criado: ${projectConfig.actionsPath}`));
     }
   }
@@ -898,23 +596,32 @@ async function initCommand(options) {
 import chalk4 from "chalk";
 async function listCommand() {
   console.log(chalk4.cyan("\n\u{1F4E6} Componentes dispon\xEDveis:\n"));
-  for (const [name, component] of Object.entries(COMPONENT_REGISTRY)) {
-    console.log(
-      `  ${chalk4.green("\u25CF")} ${chalk4.bold(name)}`
-    );
-    console.log(chalk4.dim(`    ${component.description}`));
-    if (component.dependencies.length > 0) {
-      console.log(
-        chalk4.dim(`    Deps: ${component.dependencies.join(", ")}`)
-      );
+  try {
+    const components = await listComponents();
+    if (components.length === 0) {
+      console.log(chalk4.dim("  Nenhum componente encontrado no registry."));
+      return;
     }
-    if (component.variants?.withForm) {
-      console.log(chalk4.yellow(`    \u{1F4DD} Suporta integra\xE7\xE3o com React Hook Form`));
+    for (const component of components) {
+      console.log(`  ${chalk4.green("\u25CF")} ${chalk4.bold(component.name)}`);
+      console.log(chalk4.dim(`    ${component.description}`));
+      if (component.hasFormVariant) {
+        console.log(
+          chalk4.yellow(`    \u{1F4DD} Suporta integra\xE7\xE3o com React Hook Form`)
+        );
+      }
+      console.log();
     }
-    console.log();
+    console.log(chalk4.dim("Para adicionar um componente:"));
+    console.log(chalk4.cyan("  herow add <nome-do-componente>\n"));
+  } catch (error) {
+    console.error(
+      chalk4.red(
+        `\u274C Erro ao listar componentes: ${error instanceof Error ? error.message : "Erro desconhecido"}`
+      )
+    );
+    process.exit(1);
   }
-  console.log(chalk4.dim("Para adicionar um componente:"));
-  console.log(chalk4.cyan("  herow add <nome-do-componente>\n"));
 }
 
 // src/index.ts

package/package.json

@@ -1,35 +1,41 @@
 {
-  "name"           : "@herowcode/cli",
-  "version"        : "0.1.0",
-  "description"    : "CLI para instalar componentes Herow diretamente do GitHub",
-  "type"           : "module",
-  "bin"            : {"herow": "./dist/index.js"},
-  "main"           : "./dist/index.js",
-  "types"          : "./dist/index.d.ts",
-  "files"          : ["dist"],
-  "scripts"        : {
-    "dev"           : "tsup src/index.ts --format esm --watch",
-    "build"         : "tsup src/index.ts --format esm --dts --clean",
-    "start"         : "node dist/index.js",
-    "typecheck"     : "tsc --noEmit",
+  "name": "@herowcode/cli",
+  "version": "0.2.0",
+  "description": "CLI para instalar componentes Herow diretamente do GitHub",
+  "type": "module",
+  "bin": {
+    "herow": "./dist/index.js"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "tsup src/index.ts --format esm --watch",
+    "build": "tsup src/index.ts --format esm --dts --clean",
+    "start": "node dist/index.js",
+    "typecheck": "tsc --noEmit",
     "prepublishOnly": "pnpm build"
   },
-  "dependencies"   : {
-    "chalk"     : "^5.3.0",
-    "commander" : "^11.1.0",
-    "execa"     : "^8.0.1",
-    "fs-extra"  : "^11.2.0",
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "commander": "^11.1.0",
+    "execa": "^8.0.1",
+    "fs-extra": "^11.2.0",
     "node-fetch": "^3.3.2",
-    "ora"       : "^7.0.1",
-    "prompts"   : "^2.4.2",
-    "zod"       : "^3.22.4"
+    "ora": "^7.0.1",
+    "prompts": "^2.4.2",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",
-    "@types/node"    : "^20.10.0",
-    "@types/prompts" : "^2.4.9",
-    "tsup"           : "^8.0.1",
-    "typescript"     : "^5.3.0"
+    "@types/node": "^20.10.0",
+    "@types/prompts": "^2.4.9",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.0"
   },
-  "publishConfig"  : {"access": "public"}
+  "publishConfig": {
+    "access": "public"
+  }
 }