rl-core-front 0.1.0

package/src/components/ui/sheet.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "#core/lib/utils";
+
+/**
+ * Painel que entra pela lateral direita, sobre o Radix Dialog — mesma mecânica
+ * de foco, ESC e overlay do `dialog.tsx`, só a posição muda. No mobile ocupa a
+ * largura toda, porque um painel de 28rem numa tela de 360px é um modal pior.
+ */
+const Sheet = DialogPrimitive.Root;
+const SheetTrigger = DialogPrimitive.Trigger;
+const SheetClose = DialogPrimitive.Close;
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+SheetOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPrimitive.Portal>
+    <SheetOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-y-0 right-0 z-50 flex h-full w-full flex-col gap-4 border-l border-border bg-card p-6 shadow-lg sm:max-w-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right data-[state=closed]:duration-200 data-[state=open]:duration-300",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Fechar</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPrimitive.Portal>
+));
+SheetContent.displayName = DialogPrimitive.Content.displayName;
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element => (
+  <div className={cn("flex flex-col space-y-1.5 text-left", className)} {...props} />
+);
+SheetHeader.displayName = "SheetHeader";
+
+const SheetBody = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element => (
+  <div className={cn("flex-1 overflow-y-auto", className)} {...props} />
+);
+SheetBody.displayName = "SheetBody";
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element => (
+  <div
+    className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+    {...props}
+  />
+);
+SheetFooter.displayName = "SheetFooter";
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+SheetTitle.displayName = DialogPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetBody,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetTitle,
+  SheetTrigger,
+};

package/src/components/ui/sonner.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import type { JSX } from "react";
+import { Toaster as SonnerToaster } from "sonner";
+
+import { useColorMode } from "#core/contexts";
+
+export function Toaster(): JSX.Element {
+  const { mode } = useColorMode();
+
+  return (
+    <SonnerToaster
+      position="top-right"
+      theme={mode}
+      richColors
+      toastOptions={{
+        classNames: {
+          toast: "group toast shadow-lg rounded-lg border",
+          description: "group-[.toast]:opacity-90",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+    />
+  );
+}

package/src/components/ui/spinner.tsx

@@ -0,0 +1,12 @@
+import { Loader2 } from "lucide-react";
+import type { JSX } from "react";
+
+import { cn } from "#core/lib/utils";
+
+export function Spinner({ className }: { className?: string }): JSX.Element {
+  return (
+    <Loader2
+      className={cn("h-5 w-5 animate-spin text-muted-foreground", className)}
+    />
+  );
+}

package/src/components/ui/switch.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as React from "react";
+
+import { cn } from "#core/lib/utils";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent 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:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };

package/src/components/ui/table.tsx

@@ -0,0 +1,84 @@
+import * as React from "react";
+
+import { cn } from "#core/lib/utils";
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-x-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+));
+TableBody.displayName = "TableBody";
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className,
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-11 px-4 text-left align-middle text-xs font-semibold uppercase tracking-wide text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      "px-4 py-3 align-middle [&:has([role=checkbox])]:pr-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
+
+export { Table, TableBody, TableCell,TableHead, TableHeader, TableRow };

package/src/components/ui/tabs.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+
+import { cn } from "#core/lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-card data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn("mt-4 focus-visible:outline-none", className)}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsContent,TabsList, TabsTrigger };

package/src/components/user-avatar.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import type { JSX } from "react";
+
+import { getInitials } from "#core/_utils/initials";
+import { Avatar, AvatarFallback, AvatarImage } from "#core/components/ui";
+import { cn } from "#core/lib/utils";
+
+/**
+ * A API guarda o avatar como caminho (`/uploads/avatars/<id>.webp`), servido
+ * pela origem da API — que não é a da interface. Daí a necessidade de compor a
+ * URL absoluta aqui, em um lugar só.
+ */
+const API_ORIGIN = (process.env.NEXT_PUBLIC_API_BASE_URL ?? "").replace(
+  /\/api\/v1\/?$/,
+  "",
+);
+
+/** Monta a URL absoluta do avatar; caminho vazio devolve `undefined`. */
+export function avatarUrlOf(path?: string | null): string | undefined {
+  if (!path) {
+    return undefined;
+  }
+  return path.startsWith("http") ? path : `${API_ORIGIN}${path}`;
+}
+
+export interface UserAvatarProps {
+  name?: string | null;
+  lastName?: string | null;
+  /** Caminho devolvido pela API, não a URL completa. */
+  avatar?: string | null;
+  className?: string;
+  /** Classe do texto das iniciais (tamanho da fonte acompanha o tamanho). */
+  fallbackClassName?: string;
+}
+
+/** Avatar do usuário com fallback nas iniciais — usado no header e no perfil. */
+export function UserAvatar({
+  name,
+  lastName,
+  avatar,
+  className,
+  fallbackClassName,
+}: UserAvatarProps): JSX.Element {
+  const url = avatarUrlOf(avatar);
+  return (
+    <Avatar className={className}>
+      {url && <AvatarImage src={url} alt="" />}
+      <AvatarFallback className={cn(fallbackClassName)}>
+        {getInitials(name, lastName)}
+      </AvatarFallback>
+    </Avatar>
+  );
+}

package/src/contexts/auth-context.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import type { JSX } from "react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+
+import { authService, Profile } from "#core/_services/auth";
+
+export interface AuthContextType {
+  user: Profile | null;
+  loading: boolean;
+  refreshProfile: () => Promise<void>;
+  logout: () => Promise<void>;
+  hasPermission: (code: string) => boolean;
+  hasAnyPermission: (...codes: string[]) => boolean;
+  hasAllPermissions: (...codes: string[]) => boolean;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export function AuthProvider({ children }: { children: React.ReactNode }): JSX.Element {
+  const [user, setUser] = useState<Profile | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const refreshProfile = useCallback(async () => {
+    try {
+      const profile = await authService.profile();
+      setUser(profile);
+    } catch {
+      setUser(null);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const logout = useCallback(async () => {
+    try {
+      await authService.logout();
+    } finally {
+      setUser(null);
+      if (typeof window !== "undefined") {window.location.href = "/login";}
+    }
+  }, []);
+
+  const hasPermission = useCallback(
+    (code: string) => !!user?.permissions?.includes(code),
+    [user],
+  );
+
+  const hasAnyPermission = useCallback(
+    (...codes: string[]) => codes.some((c) => user?.permissions?.includes(c)),
+    [user],
+  );
+
+  const hasAllPermissions = useCallback(
+    (...codes: string[]) => codes.every((c) => user?.permissions?.includes(c)),
+    [user],
+  );
+
+  useEffect(() => {
+    void refreshProfile();
+  }, [refreshProfile]);
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        loading,
+        refreshProfile,
+        logout,
+        hasPermission,
+        hasAnyPermission,
+        hasAllPermissions,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth(): AuthContextType {
+  const ctx = useContext(AuthContext);
+  if (!ctx) {throw new Error("useAuth deve ser usado dentro de AuthProvider");}
+  return ctx;
+}

package/src/contexts/color-mode-context.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import type { JSX } from "react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+
+export const STORAGE_KEY = "color-mode";
+
+export type ColorPreference = "light" | "dark" | "system";
+type Mode = "light" | "dark";
+
+/** Preferência padrão: seguir o sistema operacional, nunca escuro fixo. */
+const DEFAULT_PREFERENCE: ColorPreference = "system";
+
+function isPreference(value: string | null): value is ColorPreference {
+  return value === "light" || value === "dark" || value === "system";
+}
+
+function systemMode(): Mode {
+  if (typeof window === "undefined" || !window.matchMedia) {return "light";}
+  return window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
+}
+
+function applyClass(mode: Mode): void {
+  document.documentElement.classList.toggle("dark", mode === "dark");
+}
+
+export interface ColorModeContextType {
+  mode: Mode;
+  preference: ColorPreference;
+  setPreference: (p: ColorPreference) => void;
+  toggle: () => void;
+}
+
+const ColorModeContext = createContext<ColorModeContextType | undefined>(
+  undefined,
+);
+
+export function ColorModeProvider({ children }: { children: React.ReactNode }): JSX.Element {
+  const [preference, setPreferenceState] =
+    useState<ColorPreference>(DEFAULT_PREFERENCE);
+  const [sysMode, setSysMode] = useState<Mode>("light");
+  // Antes de ler o localStorage não se sabe o tema real. O script anti-flash do
+  // layout já pôs a classe certa no <html>; aplicar classe antes disso só
+  // desfaria o trabalho dele e causava piscada de claro→escuro.
+  const [resolved, setResolved] = useState(false);
+
+  useEffect(() => {
+    const saved = localStorage.getItem(STORAGE_KEY);
+    if (isPreference(saved)) {
+      setPreferenceState(saved);
+    }
+    setSysMode(systemMode());
+    setResolved(true);
+
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const onChange = (): void => setSysMode(systemMode());
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, []);
+
+  const mode: Mode = preference === "system" ? sysMode : preference;
+
+  useEffect(() => {
+    if (resolved) {
+      applyClass(mode);
+    }
+  }, [mode, resolved]);
+
+  const setPreference = useCallback((p: ColorPreference) => {
+    setPreferenceState(p);
+    localStorage.setItem(STORAGE_KEY, p);
+  }, []);
+
+  const toggle = useCallback(
+    () => setPreference(mode === "light" ? "dark" : "light"),
+    [mode, setPreference],
+  );
+
+  const value = useMemo(
+    () => ({ mode, preference, setPreference, toggle }),
+    [mode, preference, setPreference, toggle],
+  );
+
+  return (
+    <ColorModeContext.Provider value={value}>
+      {children}
+    </ColorModeContext.Provider>
+  );
+}
+
+export function useColorMode(): ColorModeContextType {
+  const ctx = useContext(ColorModeContext);
+  if (!ctx)
+    {throw new Error("useColorMode deve ser usado dentro de ColorModeProvider");}
+  return ctx;
+}

package/src/contexts/i18n-context.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import type { JSX } from "react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+
+import { en } from "#core/i18n/messages/en";
+import { pt } from "#core/i18n/messages/pt";
+
+export type Locale = "pt" | "en";
+const MESSAGES = { pt, en } as const;
+const STORAGE_KEY = "locale";
+
+export interface I18nContextType {
+  locale: Locale;
+  setLocale: (l: Locale) => void;
+  /** Traduz uma chave em dot-path (ex.: 'auth.loginTitle') com interpolação {param}. */
+  t: (key: string, params?: Record<string, string | number>) => string;
+}
+
+const I18nContext = createContext<I18nContextType | undefined>(undefined);
+
+function resolve(obj: unknown, path: string): string | undefined {
+  return path.split(".").reduce<unknown>((acc, part) => {
+    if (acc && typeof acc === "object")
+      {return (acc as Record<string, unknown>)[part];}
+    return undefined;
+  }, obj) as string | undefined;
+}
+
+export function I18nProvider({ children }: { children: React.ReactNode }): JSX.Element {
+  const [locale, setLocaleState] = useState<Locale>("pt");
+
+  useEffect(() => {
+    const saved = (localStorage.getItem(STORAGE_KEY) as Locale) || null;
+    if (saved === "pt" || saved === "en") {setLocaleState(saved);}
+  }, []);
+
+  const setLocale = useCallback((l: Locale) => {
+    setLocaleState(l);
+    localStorage.setItem(STORAGE_KEY, l);
+    document.cookie = `${STORAGE_KEY}=${l}; path=/; max-age=31536000`;
+  }, []);
+
+  const t = useCallback(
+    (key: string, params?: Record<string, string | number>) => {
+      const raw =
+        resolve(MESSAGES[locale], key) ?? resolve(MESSAGES.pt, key) ?? key;
+      if (!params) {return raw;}
+      return Object.entries(params).reduce(
+        (str, [k, v]) => str.replace(new RegExp(`\\{${k}\\}`, "g"), String(v)),
+        raw,
+      );
+    },
+    [locale],
+  );
+
+  const value = useMemo(
+    () => ({ locale, setLocale, t }),
+    [locale, setLocale, t],
+  );
+
+  return <I18nContext.Provider value={value}>{children}</I18nContext.Provider>;
+}
+
+export function useI18n(): I18nContextType {
+  const ctx = useContext(I18nContext);
+  if (!ctx) {throw new Error("useI18n deve ser usado dentro de I18nProvider");}
+  return ctx;
+}

package/src/contexts/index.ts

@@ -0,0 +1,6 @@
+// Barrel da pasta — importe daqui de fora; dentro da pasta use o caminho direto.
+export * from "./auth-context";
+export * from "./color-mode-context";
+export * from "./i18n-context";
+export * from "./socket-context";
+export * from "./toast-context";