rl-core-front 0.1.0

package/src/components/breadcrumbs.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { ChevronRight, Home } from "lucide-react";
+import { usePathname, useRouter } from "next/navigation";
+import type { JSX } from "react";
+
+import { useI18n } from "#core/contexts";
+
+const SEGMENT_LABELS: Record<string, string> = {
+  dashboard: "nav.dashboard",
+  usuarios: "nav.users",
+  rbac: "nav.rbac",
+  logs: "nav.logs",
+  perfil: "nav.profile",
+};
+
+export function Breadcrumbs(): JSX.Element {
+  const pathname = usePathname();
+  const router = useRouter();
+  const { t } = useI18n();
+
+  const segments = pathname.split("/").filter(Boolean);
+  const crumbs = segments.map((seg, i) => ({
+    label: SEGMENT_LABELS[seg] ? t(SEGMENT_LABELS[seg]) : seg,
+    href: "/" + segments.slice(0, i + 1).join("/"),
+    isLast: i === segments.length - 1,
+  }));
+
+  return (
+    <nav className="mb-4 flex items-center gap-1.5 text-sm text-muted-foreground">
+      <button
+        onClick={() => router.push("/dashboard")}
+        className="flex items-center gap-1 transition-colors hover:text-foreground"
+      >
+        <Home className="h-4 w-4" />
+        {t("nav.home")}
+      </button>
+      {crumbs.map((c) => (
+        <span key={c.href} className="flex items-center gap-1.5">
+          <ChevronRight className="h-4 w-4 text-muted-foreground/50" />
+          {c.isLast ? (
+            <span className="font-semibold text-foreground">{c.label}</span>
+          ) : (
+            <button
+              onClick={() => router.push(c.href)}
+              className="transition-colors hover:text-foreground"
+            >
+              {c.label}
+            </button>
+          )}
+        </span>
+      ))}
+    </nav>
+  );
+}

package/src/components/index.ts

@@ -0,0 +1,7 @@
+// Barrel da pasta — importe daqui de fora; dentro da pasta use o caminho direto.
+export * from "./app-shell";
+export * from "./breadcrumbs";
+export * from "./language-selector";
+export * from "./password-field";
+export * from "./theme-toggle";
+export * from "./user-avatar";

package/src/components/language-selector.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { Check, Languages } from "lucide-react";
+import type { JSX } from "react";
+
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "#core/components/ui";
+import { Locale, useI18n } from "#core/contexts";
+import { cn } from "#core/lib/utils";
+
+const LANGS: { code: Locale; label: string }[] = [
+  { code: "pt", label: "Português" },
+  { code: "en", label: "English" },
+];
+
+export function LanguageSelector(): JSX.Element {
+  const { locale, setLocale, t } = useI18n();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label="language"
+          title={t("common.language")}
+        >
+          <Languages className="h-5 w-5" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {LANGS.map((l) => (
+          <DropdownMenuItem key={l.code} onClick={() => setLocale(l.code)}>
+            <Check
+              className={cn(
+                "h-4 w-4",
+                l.code === locale ? "opacity-100" : "opacity-0",
+              )}
+            />
+            {l.label}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/components/password-field.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { Eye, EyeOff } from "lucide-react";
+import { forwardRef, InputHTMLAttributes, useState } from "react";
+
+import { Input } from "#core/components/ui";
+import { cn } from "#core/lib/utils";
+
+interface PasswordFieldProps extends InputHTMLAttributes<HTMLInputElement> {
+  error?: boolean;
+}
+
+export const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
+  function PasswordField({ className, error, ...props }, ref) {
+    const [show, setShow] = useState(false);
+    return (
+      <div className="relative">
+        <Input
+          ref={ref}
+          type={show ? "text" : "password"}
+          className={cn(
+            "pr-10",
+            error && "border-destructive focus-visible:ring-destructive",
+            className,
+          )}
+          {...props}
+        />
+        <button
+          type="button"
+          tabIndex={-1}
+          onClick={() => setShow((s) => !s)}
+          className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground transition-colors hover:text-foreground"
+          aria-label={show ? "ocultar senha" : "mostrar senha"}
+        >
+          {show ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+        </button>
+      </div>
+    );
+  },
+);

package/src/components/theme-toggle.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import type { JSX } from "react";
+
+import { Button } from "#core/components/ui";
+import { useColorMode, useI18n } from "#core/contexts";
+
+export function ThemeToggle(): JSX.Element {
+  const { mode, toggle } = useColorMode();
+  const { t } = useI18n();
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={toggle}
+      aria-label="toggle theme"
+      title={t("common.theme")}
+    >
+      {mode === "light" ? (
+        <Moon className="h-5 w-5" />
+      ) : (
+        <Sun className="h-5 w-5" />
+      )}
+    </Button>
+  );
+}

package/src/components/ui/alert.tsx

@@ -0,0 +1,27 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "#core/lib/utils";
+
+const alertVariants = cva("rounded-md border px-3 py-2 text-sm", {
+  variants: {
+    variant: {
+      info: "border-primary/30 bg-primary/10 text-primary",
+      success: "border-success/30 bg-success/10 text-success",
+      warning: "border-warning/30 bg-warning/10 text-warning",
+      error: "border-destructive/30 bg-destructive/10 text-destructive",
+    },
+  },
+  defaultVariants: { variant: "info" },
+});
+
+export interface AlertProps
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof alertVariants> {}
+
+export function Alert({ variant, className, ...props }: AlertProps): React.JSX.Element {
+  return (
+    <div className={cn(alertVariants({ variant }), className)} {...props} />
+  );
+}

package/src/components/ui/avatar.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import * as React from "react";
+
+import { cn } from "#core/lib/utils";
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className,
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-primary text-sm font-semibold text-primary-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarFallback,AvatarImage };

package/src/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "#core/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary/10 text-primary",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        destructive: "border-transparent bg-destructive/10 text-destructive",
+        success: "border-transparent bg-success/15 text-success",
+        warning: "border-transparent bg-warning/15 text-warning",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps): React.JSX.Element {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

package/src/components/ui/button.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "#core/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+        // Ícone de ação dentro de linha de tabela: seis deles com 40px deixavam
+        // a coluna larga demais.
+        iconSm: "h-8 w-8",
+      },
+    },
+    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 };

package/src/components/ui/card.tsx

@@ -0,0 +1,86 @@
+import * as React from "react";
+
+import { cn } from "#core/lib/utils";
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border border-border bg-card text-card-foreground shadow-sm",
+      className,
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+};

package/src/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "#core/lib/utils";
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded border border-primary shadow focus-visible:outline-none focus-visible:ring-2 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")}
+    >
+      <Check className="h-3.5 w-3.5" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

package/src/components/ui/column-visibility-modal.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import type { JSX } from "react";
+import { useEffect, useState } from "react";
+
+import { Button } from "#core/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "#core/components/ui/dialog";
+import { Separator } from "#core/components/ui/separator";
+import { Switch } from "#core/components/ui/switch";
+import { useI18n } from "#core/contexts";
+
+export interface ColumnVisibilityOption {
+  id: string;
+  label: string;
+}
+
+interface Props {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  columns: ColumnVisibilityOption[];
+  hiddenColumns: string[];
+  onSave: (hiddenColumns: string[]) => void;
+}
+
+export function ColumnVisibilityModal({
+  open,
+  onOpenChange,
+  columns,
+  hiddenColumns,
+  onSave,
+}: Props): JSX.Element {
+  const { t } = useI18n();
+  const [draftHidden, setDraftHidden] = useState<string[]>(hiddenColumns);
+
+  useEffect(() => {
+    if (open) {setDraftHidden(hiddenColumns);}
+  }, [open, hiddenColumns]);
+
+  const isVisible = (id: string): boolean => !draftHidden.includes(id);
+  const visibleCount = columns.length - draftHidden.length;
+  const isLastVisible = (id: string): boolean => visibleCount === 1 && isVisible(id);
+  const areAllVisible = draftHidden.length === 0;
+
+  const toggleColumn = (id: string): void => {
+    if (isLastVisible(id)) {return;}
+    setDraftHidden((cur) =>
+      cur.includes(id) ? cur.filter((c) => c !== id) : [...cur, id],
+    );
+  };
+
+  const toggleAll = (): void => {
+    if (!areAllVisible) {setDraftHidden([]);}
+    else {setDraftHidden(columns.slice(1).map((c) => c.id));}
+  };
+
+  const handleSave = (): void => {
+    onSave(draftHidden);
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t("table.columnsTitle")}</DialogTitle>
+        </DialogHeader>
+        <p className="text-sm text-muted-foreground">
+          {t("table.columnsHint")}
+        </p>
+
+        <div className="flex max-h-[55vh] flex-col divide-y divide-border overflow-y-auto">
+          <div className="flex items-center justify-between py-3">
+            <span className="text-sm font-semibold">{t("table.columns")}</span>
+            <Switch checked={areAllVisible} onCheckedChange={toggleAll} />
+          </div>
+          {columns.map((col) => (
+            <div
+              key={col.id}
+              className="flex items-center justify-between py-3"
+            >
+              <span className="text-sm">{col.label}</span>
+              <Switch
+                checked={isVisible(col.id)}
+                disabled={isLastVisible(col.id)}
+                title={
+                  isLastVisible(col.id) ? t("table.atLeastOne") : undefined
+                }
+                onCheckedChange={() => toggleColumn(col.id)}
+              />
+            </div>
+          ))}
+        </div>
+
+        <Separator />
+        <DialogFooter className="gap-2">
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {t("common.cancel")}
+          </Button>
+          <Button onClick={handleSave}>{t("common.save")}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/ui/confirm-dialog.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import * as React from "react";
+
+import { Button } from "#core/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogForm,
+  DialogHeader,
+  DialogTitle,
+} from "#core/components/ui/dialog";
+
+export interface ConfirmDialogProps {
+  open: boolean;
+  title: string;
+  description?: string;
+  confirmLabel: string;
+  cancelLabel: string;
+  /** Pinta o botão de confirmar como destrutivo (excluir, resetar). */
+  destructive?: boolean;
+  loading?: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+/**
+ * Substitui o `confirm()` do browser: respeita o tema, fecha no `Esc`/`X` e
+ * confirma no `Enter` (o botão de confirmar é o submit e recebe o foco).
+ */
+export function ConfirmDialog({
+  open,
+  title,
+  description,
+  confirmLabel,
+  cancelLabel,
+  destructive = false,
+  loading = false,
+  onConfirm,
+  onCancel,
+}: ConfirmDialogProps): React.JSX.Element {
+  return (
+    <Dialog open={open} onOpenChange={(o) => !o && onCancel()}>
+      <DialogContent className="max-w-sm">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          {description && <DialogDescription>{description}</DialogDescription>}
+        </DialogHeader>
+        <DialogForm onSubmit={onConfirm}>
+          <DialogFooter className="gap-2">
+            <Button type="button" variant="outline" onClick={onCancel}>
+              {cancelLabel}
+            </Button>
+            <Button
+              type="submit"
+              autoFocus
+              variant={destructive ? "destructive" : "default"}
+              disabled={loading}
+            >
+              {confirmLabel}
+            </Button>
+          </DialogFooter>
+        </DialogForm>
+      </DialogContent>
+    </Dialog>
+  );
+}