@greatapps/greatagents-ui 0.3.3 → 0.3.4

package/src/components/capabilities/integrations-tab.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import type { GagentsHookConfig } from "../../hooks/types";
+import { useIntegrationState, type IntegrationCardData } from "../../hooks/use-integrations";
+import { IntegrationCard } from "./integration-card";
+import { Plug, Loader2 } from "lucide-react";
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface IntegrationsTabProps {
+  config: GagentsHookConfig;
+  agentId: number | null;
+  /** Called when user clicks a card action (connect / configure / reconnect).
+   *  The consuming app wires this to the wizard (Story 18.9). */
+  onConnect: (card: IntegrationCardData) => void;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function IntegrationsTab({
+  config,
+  agentId,
+  onConnect,
+}: IntegrationsTabProps) {
+  const { cards, isLoading } = useIntegrationState(config, agentId);
+
+  // Loading state
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-16">
+        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  // Empty state
+  if (cards.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-3 py-16 text-muted-foreground">
+        <Plug className="h-10 w-10" />
+        <p className="text-sm">Nenhuma integração disponível</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      {cards.map((card) => (
+        <IntegrationCard
+          key={card.definition.slug}
+          card={card}
+          onConnect={onConnect}
+        />
+      ))}
+    </div>
+  );
+}

package/src/components/capabilities/types.ts

@@ -0,0 +1,48 @@
+/**
+ * Types for the Integration Wizard flow.
+ *
+ * The wizard uses the base IntegrationDefinition from the integrations registry
+ * and extends it with wizard-specific metadata via WizardIntegrationMeta.
+ */
+
+import type { IntegrationDefinition } from "../../data/integrations-registry";
+
+// Re-export for convenience
+export type { IntegrationDefinition };
+
+// ---------------------------------------------------------------------------
+// Wizard-specific metadata (passed alongside the registry definition)
+// ---------------------------------------------------------------------------
+
+export interface IntegrationCapability {
+  label: string;
+  description?: string;
+}
+
+export interface WizardIntegrationMeta {
+  /** Icon as React node for the wizard header */
+  icon?: React.ReactNode;
+  /** Provider label for OAuth button (e.g. "Google") */
+  providerLabel?: string;
+  /** What this integration can do */
+  capabilities: IntegrationCapability[];
+  /** Required permissions / prerequisites */
+  requirements: string[];
+  /** Whether this integration has a config step */
+  hasConfigStep: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// Wizard state types
+// ---------------------------------------------------------------------------
+
+export type WizardStep = "info" | "credentials" | "config" | "confirm";
+
+export type OAuthStatus = "idle" | "waiting" | "success" | "error";
+
+export interface OAuthResult {
+  success: boolean;
+  email?: string;
+  error?: string;
+  credentialId?: number;
+}

package/src/components/capabilities/wizard-steps/config-step.tsx

@@ -0,0 +1,117 @@
+'use client';
+
+import { Loader2 } from "lucide-react";
+import {
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@greatapps/greatauth-ui/ui";
+import type { IntegrationDefinition } from "../../../data/integrations-registry";
+
+export interface ConfigOption {
+  id: string;
+  label: string;
+  description?: string;
+}
+
+interface ConfigStepProps {
+  integration: IntegrationDefinition;
+  /** Available options loaded from backend (e.g. calendars) */
+  options: ConfigOption[];
+  isLoading: boolean;
+  selectedValue: string;
+  onValueChange: (value: string) => void;
+  /** Custom label for the select dropdown */
+  selectLabel?: string;
+  /** Custom placeholder */
+  selectPlaceholder?: string;
+}
+
+export function ConfigStep({
+  integration,
+  options,
+  isLoading,
+  selectedValue,
+  onValueChange,
+  selectLabel,
+  selectPlaceholder,
+}: ConfigStepProps) {
+  const label = selectLabel || getDefaultLabel(integration.slug);
+  const placeholder =
+    selectPlaceholder || getDefaultPlaceholder(integration.slug);
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2">
+        <h3 className="text-lg font-semibold">Configuração</h3>
+        <p className="text-sm text-muted-foreground">
+          Configure as opções específicas da integração.
+        </p>
+      </div>
+
+      {isLoading ? (
+        <div className="flex flex-col items-center gap-3 py-8">
+          <Loader2
+            aria-hidden="true"
+            className="h-6 w-6 animate-spin text-muted-foreground"
+          />
+          <p className="text-sm text-muted-foreground">
+            Carregando opções...
+          </p>
+        </div>
+      ) : options.length === 0 ? (
+        <div className="rounded-lg border border-dashed p-6 text-center">
+          <p className="text-sm text-muted-foreground">
+            Nenhuma opção disponível. A configuração padrão será usada.
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          <Label htmlFor="integration-config-select">{label}</Label>
+          <Select value={selectedValue} onValueChange={onValueChange}>
+            <SelectTrigger id="integration-config-select">
+              <SelectValue placeholder={placeholder} />
+            </SelectTrigger>
+            <SelectContent>
+              {options.map((opt) => (
+                <SelectItem key={opt.id} value={opt.id}>
+                  <span>{opt.label}</span>
+                  {opt.description && (
+                    <span className="ml-2 text-xs text-muted-foreground">
+                      ({opt.description})
+                    </span>
+                  )}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function getDefaultLabel(slug: string): string {
+  switch (slug) {
+    case "google_calendar":
+      return "Calendário";
+    default:
+      return "Opção";
+  }
+}
+
+function getDefaultPlaceholder(slug: string): string {
+  switch (slug) {
+    case "google_calendar":
+      return "Selecione o calendário...";
+    default:
+      return "Selecione uma opção...";
+  }
+}

package/src/components/capabilities/wizard-steps/confirm-step.tsx

@@ -0,0 +1,123 @@
+'use client';
+
+import { CheckCircle2 } from "lucide-react";
+import { Label } from "@greatapps/greatauth-ui/ui";
+import type { IntegrationDefinition } from "../../../data/integrations-registry";
+import type { OAuthResult } from "../types";
+import type { ConfigOption } from "./config-step";
+
+interface ConfirmStepProps {
+  integration: IntegrationDefinition;
+  oauthResult: OAuthResult | null;
+  selectedConfigOption: ConfigOption | null;
+  enableOnComplete: boolean;
+  onEnableChange: (enabled: boolean) => void;
+}
+
+export function ConfirmStep({
+  integration,
+  oauthResult,
+  selectedConfigOption,
+  enableOnComplete,
+  onEnableChange,
+}: ConfirmStepProps) {
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2">
+        <h3 className="text-lg font-semibold">Confirmação</h3>
+        <p className="text-sm text-muted-foreground">
+          Revise as configurações antes de concluir.
+        </p>
+      </div>
+
+      {/* Summary */}
+      <div className="space-y-3 rounded-lg border p-4">
+        <SummaryRow label="Integração" value={integration.name} />
+
+        {oauthResult?.email && (
+          <SummaryRow label="Conta conectada" value={oauthResult.email} />
+        )}
+
+        {selectedConfigOption && (
+          <SummaryRow
+            label={getConfigLabel(integration.slug)}
+            value={selectedConfigOption.label}
+          />
+        )}
+
+        <SummaryRow
+          label="Tipo de autenticação"
+          value={integration.authType === "oauth2" ? "OAuth 2.0" : "API Key"}
+        />
+      </div>
+
+      {/* Enable toggle */}
+      <div className="flex items-center justify-between rounded-lg border p-4">
+        <div className="space-y-0.5">
+          <Label htmlFor="enable-on-complete" className="text-sm font-medium">
+            Ativar imediatamente
+          </Label>
+          <p className="text-xs text-muted-foreground">
+            A integração ficará ativa assim que concluir o assistente.
+          </p>
+        </div>
+        <button
+          id="enable-on-complete"
+          role="switch"
+          type="button"
+          aria-checked={enableOnComplete}
+          onClick={() => onEnableChange(!enableOnComplete)}
+          className={`
+            relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent
+            transition-colors duration-200 ease-in-out focus-visible:outline-none focus-visible:ring-2
+            focus-visible:ring-ring focus-visible:ring-offset-2
+            ${enableOnComplete ? "bg-primary" : "bg-muted"}
+          `}
+        >
+          <span
+            aria-hidden="true"
+            className={`
+              pointer-events-none inline-block h-5 w-5 transform rounded-full bg-background shadow-lg
+              ring-0 transition duration-200 ease-in-out
+              ${enableOnComplete ? "translate-x-5" : "translate-x-0"}
+            `}
+          />
+        </button>
+      </div>
+
+      {/* Success indicator */}
+      <div className="flex items-center gap-2 rounded-md bg-green-50 p-3 dark:bg-green-950/20">
+        <CheckCircle2
+          aria-hidden="true"
+          className="h-4 w-4 shrink-0 text-green-600"
+        />
+        <p className="text-xs text-green-700 dark:text-green-400">
+          Tudo pronto! Clique em &quot;Concluir&quot; para finalizar a
+          configuração.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function SummaryRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex items-center justify-between text-sm">
+      <span className="text-muted-foreground">{label}</span>
+      <span className="font-medium">{value}</span>
+    </div>
+  );
+}
+
+function getConfigLabel(slug: string): string {
+  switch (slug) {
+    case "google_calendar":
+      return "Calendário";
+    default:
+      return "Configuração";
+  }
+}

package/src/components/capabilities/wizard-steps/credentials-step.tsx

@@ -0,0 +1,205 @@
+'use client';
+
+import { CheckCircle2, Loader2, AlertCircle, Shield } from "lucide-react";
+import { Button, Input, Label } from "@greatapps/greatauth-ui/ui";
+import type { IntegrationDefinition } from "../../../data/integrations-registry";
+import type { WizardIntegrationMeta, OAuthStatus, OAuthResult } from "../types";
+
+interface CredentialsStepProps {
+  integration: IntegrationDefinition;
+  meta: WizardIntegrationMeta;
+  oauthStatus: OAuthStatus;
+  oauthResult: OAuthResult | null;
+  apiKey: string;
+  onApiKeyChange: (value: string) => void;
+  onStartOAuth: () => void;
+  isReconnect?: boolean;
+}
+
+export function CredentialsStep({
+  integration,
+  meta,
+  oauthStatus,
+  oauthResult,
+  apiKey,
+  onApiKeyChange,
+  onStartOAuth,
+  isReconnect = false,
+}: CredentialsStepProps) {
+  if (integration.authType === "oauth2") {
+    return (
+      <OAuthCredentials
+        integration={integration}
+        meta={meta}
+        oauthStatus={oauthStatus}
+        oauthResult={oauthResult}
+        onStartOAuth={onStartOAuth}
+        isReconnect={isReconnect}
+      />
+    );
+  }
+
+  return <ApiKeyCredentials apiKey={apiKey} onApiKeyChange={onApiKeyChange} />;
+}
+
+// ---------------------------------------------------------------------------
+// OAuth flow UI
+// ---------------------------------------------------------------------------
+
+function OAuthCredentials({
+  integration,
+  meta,
+  oauthStatus,
+  oauthResult,
+  onStartOAuth,
+  isReconnect,
+}: {
+  integration: IntegrationDefinition;
+  meta: WizardIntegrationMeta;
+  oauthStatus: OAuthStatus;
+  oauthResult: OAuthResult | null;
+  onStartOAuth: () => void;
+  isReconnect: boolean;
+}) {
+  const providerLabel = meta.providerLabel || integration.name;
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2">
+        <h3 className="text-lg font-semibold">Autenticação</h3>
+        <p className="text-sm text-muted-foreground">
+          {isReconnect
+            ? `Reconecte sua conta ${providerLabel} para renovar a autorização.`
+            : `Conecte sua conta ${providerLabel} para permitir o acesso.`}
+        </p>
+      </div>
+
+      {/* OAuth status area */}
+      <div className="flex flex-col items-center gap-4 rounded-lg border p-6">
+        {oauthStatus === "idle" && (
+          <Button onClick={onStartOAuth} size="lg" className="gap-2">
+            {meta.icon}
+            {isReconnect
+              ? `Reconectar com ${providerLabel}`
+              : `Conectar com ${providerLabel}`}
+          </Button>
+        )}
+
+        {oauthStatus === "waiting" && (
+          <div className="flex flex-col items-center gap-3 text-center">
+            <Loader2
+              aria-hidden="true"
+              className="h-8 w-8 animate-spin text-muted-foreground"
+            />
+            <div>
+              <p className="text-sm font-medium">Aguardando autorização...</p>
+              <p className="text-xs text-muted-foreground">
+                Complete o login na janela que foi aberta.
+              </p>
+            </div>
+          </div>
+        )}
+
+        {oauthStatus === "success" && oauthResult && (
+          <div className="flex flex-col items-center gap-3 text-center">
+            <CheckCircle2
+              aria-hidden="true"
+              className="h-8 w-8 text-green-600"
+            />
+            <div>
+              <p className="text-sm font-medium text-green-700">
+                Conectado com sucesso!
+              </p>
+              {oauthResult.email && (
+                <p className="text-xs text-muted-foreground">
+                  {oauthResult.email}
+                </p>
+              )}
+            </div>
+          </div>
+        )}
+
+        {oauthStatus === "error" && (
+          <div className="flex flex-col items-center gap-3 text-center">
+            <AlertCircle
+              aria-hidden="true"
+              className="h-8 w-8 text-destructive"
+            />
+            <div>
+              <p className="text-sm font-medium text-destructive">
+                Falha na conexão
+              </p>
+              {oauthResult?.error && (
+                <p className="text-xs text-muted-foreground">
+                  {oauthResult.error}
+                </p>
+              )}
+            </div>
+            <Button variant="outline" onClick={onStartOAuth} size="sm">
+              Tentar novamente
+            </Button>
+          </div>
+        )}
+      </div>
+
+      {/* Security note */}
+      <div className="flex items-start gap-2 rounded-md bg-muted/50 p-3">
+        <Shield
+          aria-hidden="true"
+          className="mt-0.5 h-4 w-4 shrink-0 text-green-600"
+        />
+        <p className="text-xs text-muted-foreground">
+          Seus dados estão seguros. Usamos OAuth 2.0 para autenticação — nunca
+          armazenamos sua senha. Você pode revogar o acesso a qualquer momento
+          nas configurações da sua conta {providerLabel}.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// API Key flow UI
+// ---------------------------------------------------------------------------
+
+function ApiKeyCredentials({
+  apiKey,
+  onApiKeyChange,
+}: {
+  apiKey: string;
+  onApiKeyChange: (value: string) => void;
+}) {
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2">
+        <h3 className="text-lg font-semibold">Autenticação</h3>
+        <p className="text-sm text-muted-foreground">
+          Insira a chave de API para conectar a integração.
+        </p>
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="integration-api-key">Chave de API</Label>
+        <Input
+          id="integration-api-key"
+          type="password"
+          autoComplete="off"
+          placeholder="Insira sua chave de API..."
+          value={apiKey}
+          onChange={(e) => onApiKeyChange(e.target.value)}
+        />
+      </div>
+
+      <div className="flex items-start gap-2 rounded-md bg-muted/50 p-3">
+        <Shield
+          aria-hidden="true"
+          className="mt-0.5 h-4 w-4 shrink-0 text-green-600"
+        />
+        <p className="text-xs text-muted-foreground">
+          Sua chave de API é armazenada de forma segura e encriptada. Nunca é
+          exposta no frontend.
+        </p>
+      </div>
+    </div>
+  );
+}

package/src/components/capabilities/wizard-steps/info-step.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { Check, Info } from "lucide-react";
+import type { IntegrationDefinition } from "../../../data/integrations-registry";
+import type { WizardIntegrationMeta } from "../types";
+
+interface InfoStepProps {
+  integration: IntegrationDefinition;
+  meta: WizardIntegrationMeta;
+}
+
+export function InfoStep({ integration, meta }: InfoStepProps) {
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-start gap-4">
+        {meta.icon && (
+          <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-muted">
+            {meta.icon}
+          </div>
+        )}
+        <div className="space-y-1">
+          <h3 className="text-lg font-semibold">{integration.name}</h3>
+          <p className="text-sm text-muted-foreground">
+            {integration.description}
+          </p>
+        </div>
+      </div>
+
+      {/* Capabilities */}
+      {meta.capabilities.length > 0 && (
+        <div className="space-y-3">
+          <h4 className="text-sm font-medium">O que esta integração permite:</h4>
+          <ul className="space-y-2">
+            {meta.capabilities.map((cap, i) => (
+              <li key={i} className="flex items-start gap-2 text-sm">
+                <Check
+                  aria-hidden="true"
+                  className="mt-0.5 h-4 w-4 shrink-0 text-green-600"
+                />
+                <div>
+                  <span className="font-medium">{cap.label}</span>
+                  {cap.description && (
+                    <span className="text-muted-foreground">
+                      {" "}
+                      — {cap.description}
+                    </span>
+                  )}
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {/* Requirements */}
+      {meta.requirements.length > 0 && (
+        <div className="space-y-3">
+          <h4 className="text-sm font-medium">Requisitos:</h4>
+          <ul className="space-y-2">
+            {meta.requirements.map((req, i) => (
+              <li
+                key={i}
+                className="flex items-start gap-2 text-sm text-muted-foreground"
+              >
+                <Info
+                  aria-hidden="true"
+                  className="mt-0.5 h-4 w-4 shrink-0 text-blue-500"
+                />
+                <span>{req}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/data/integrations-registry.ts

@@ -0,0 +1,23 @@
+export type IntegrationAuthType = "oauth2" | "api_key" | "none";
+export type IntegrationStatus = "available" | "coming_soon";
+
+export interface IntegrationDefinition {
+  slug: string;
+  name: string;
+  description: string;
+  icon: string; // Lucide icon name
+  authType: IntegrationAuthType;
+  status: IntegrationStatus;
+}
+
+export const INTEGRATIONS_REGISTRY: IntegrationDefinition[] = [
+  {
+    slug: "google_calendar",
+    name: "Google Agenda",
+    description: "Sincronize agendamentos com o Google Calendar",
+    icon: "CalendarSync",
+    authType: "oauth2",
+    status: "available",
+  },
+  // Future integrations — add entries here without code changes
+];

package/src/hooks/index.ts

@@ -28,3 +28,13 @@ export {
 
 // Contacts
 export { useGagentsContacts } from "./use-contacts";
+
+// Capabilities
+export { useCapabilities, useAgentCapabilities, useUpdateAgentCapabilities } from "./use-capabilities";
+
+// Integrations
+export {
+  useIntegrationState,
+  type IntegrationCardState,
+  type IntegrationCardData,
+} from "./use-integrations";