rl-core-front 0.1.0 → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Rodrigo Liberti
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -61,6 +61,7 @@ O `layout.tsx` empilha os providers:
 ```tsx
 import {
   AuthProvider,
+  BrandProvider,
   ColorModeProvider,
   I18nProvider,
   SocketProvider,
@@ -71,17 +72,40 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <ColorModeProvider>
       <I18nProvider>
-        <ToastProvider>
-          <AuthProvider>
-            <SocketProvider>{children}</SocketProvider>
-          </AuthProvider>
-        </ToastProvider>
+        <BrandProvider brand={{ name: "ControlX", mark: <Logo /> }}>
+          <ToastProvider>
+            <AuthProvider>
+              <SocketProvider>{children}</SocketProvider>
+            </AuthProvider>
+          </ToastProvider>
+        </BrandProvider>
       </I18nProvider>
     </ColorModeProvider>
   );
 }
 ```
 
+## Identidade do sistema
+
+O `BrandProvider` é o que troca o "Core App" pelo nome do projeto. Ele alimenta
+o cabeçalho, o drawer e as telas de login, primeiro acesso e recuperação de
+senha:
+
+| Campo | O que é | Sem declarar |
+|---|---|---|
+| `name` | Nome do sistema | a chave `app.name` das traduções |
+| `mark` | Marca compacta do cabeçalho (~24px) | o escudo do core |
+| `logo` | Versão maior, para as telas de login | cai na `mark` |
+| `tagline` | Frase curta sob a marca no login | não aparece |
+
+`mark` e `logo` são `ReactNode`, não URL — use SVG inline, `next/image` ou um
+ícone, o que o projeto preferir. O provider inteiro é opcional: sem ele, o
+sistema segue com o padrão do core.
+
+As cores continuam vindo do `tailwind-preset` e do `styles.css`, e o backend tem
+a identidade dele no `.env` (`APP_NAME`, `APP_LOGO_URL`, `APP_BRAND_COLOR`) — é
+de lá que sai a marca dos emails e o nome no app autenticador.
+
 E o `middleware.ts` da raiz:
 
 ```ts
@@ -124,6 +148,11 @@ export const messages = {
 `next`, `react`, `react-dom` e `tailwindcss` — precisam ser uma instância só.
 O npm 7+ instala sozinho.
 
+## Changelog
+
+As três versões andam juntas e saem de uma tag só — o que mudou em cada uma
+está em [CHANGELOG.md](https://github.com/liberti1991/aplication-core/blob/main/CHANGELOG.md).
+
 ## Licença
 
 MIT © Rodrigo Liberti

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Telas e componentes Next.js do core: login com 2FA, usu\u00e1rios, RBAC, auditoria, logs e listagens com filtro din\u00e2mico",
   "author": "Rodrigo Liberti",
   "license": "MIT",

package/src/components/app-shell.tsx

@@ -9,7 +9,6 @@ import {
   Menu,
   ScrollText,
   Settings,
-  Shield,
   ShieldCheck,
   User,
   Users,
@@ -33,7 +32,7 @@ import {
   Spinner,
 } from "#core/components/ui";
 import { UserAvatar } from "#core/components/user-avatar";
-import { useAuth, useI18n } from "#core/contexts";
+import { useAuth, useBrand, useI18n } from "#core/contexts";
 import { NotificationsCenter } from "#core/features/notifications/notifications-center";
 import { ForcePasswordChange } from "#core/features/profile/force-password-change";
 import { cn } from "#core/lib/utils";
@@ -75,6 +74,7 @@ const ADMIN_CHILDREN: NavItem[] = [
 export function AppShell({ children }: { children: React.ReactNode }): JSX.Element {
   const { user, loading, logout, hasPermission } = useAuth();
   const { t } = useI18n();
+  const brand = useBrand();
   const router = useRouter();
   const pathname = usePathname();
 
@@ -221,9 +221,9 @@ export function AppShell({ children }: { children: React.ReactNode }): JSX.Eleme
         </Button>
 
         <div className="flex items-center gap-2">
-          <Shield className="h-6 w-6 text-primary" />
+          {brand.mark}
           <span className="hidden text-lg font-extrabold sm:block">
-            {t("app.name")}
+            {brand.name}
           </span>
         </div>
 
@@ -289,8 +289,8 @@ export function AppShell({ children }: { children: React.ReactNode }): JSX.Eleme
           />
           <aside className="absolute left-0 top-0 flex h-full w-64 flex-col border-r border-border bg-card">
             <div className="flex h-16 items-center gap-2 border-b border-border px-4">
-              <Shield className="h-6 w-6 text-primary" />
-              <span className="text-lg font-extrabold">{t("app.name")}</span>
+              {brand.mark}
+              <span className="text-lg font-extrabold">{brand.name}</span>
             </div>
             <NavContent mini={false} />
           </aside>

package/src/components/brand-header.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import type { JSX } from "react";
+
+import { useBrand } from "#core/contexts";
+
+export interface BrandHeaderProps {
+  /** Título do passo ou da tela, exibido sob a marca. */
+  title: string;
+}
+
+/**
+ * Cabeçalho das telas de autenticação: logo, nome do sistema e o título da vez.
+ *
+ * Existe porque login, primeiro acesso e recuperação de senha são as três telas
+ * que uma pessoa vê antes de entrar — e as três precisam dizer em que sistema
+ * ela está. O conteúdo vem do `BrandProvider` do projeto; sem ele, do padrão do
+ * core.
+ */
+export function BrandHeader({ title }: BrandHeaderProps): JSX.Element {
+  const brand = useBrand();
+
+  return (
+    <div className="mb-6 flex flex-col items-center gap-1">
+      <div className="mb-2 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
+        {brand.logo}
+      </div>
+      <span className="text-lg font-extrabold">{brand.name}</span>
+      {brand.tagline && (
+        <p className="text-sm text-muted-foreground">{brand.tagline}</p>
+      )}
+      <h1 className="mt-2 text-xl font-semibold">{title}</h1>
+    </div>
+  );
+}

package/src/components/index.ts

@@ -1,5 +1,6 @@
 // Barrel da pasta — importe daqui de fora; dentro da pasta use o caminho direto.
 export * from "./app-shell";
+export * from "./brand-header";
 export * from "./breadcrumbs";
 export * from "./language-selector";
 export * from "./password-field";

package/src/components/ui/data-table.tsx

@@ -227,16 +227,8 @@ export function DataTable<T extends RowData>({
       <div className="mb-3 flex items-center justify-between gap-2">
         <div className="flex items-center gap-2">{toolbar}</div>
         <div className="flex items-center gap-2">
-          {storageKey && hideable.length > 0 && (
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => setColsOpen(true)}
-            >
-              <SlidersHorizontal className="h-4 w-4" />
-              {t("table.columnsButton")}
-            </Button>
-          )}
+          {/* Filtro antes de colunas: filtrar é a ação do dia a dia, escolher
+              coluna se faz uma vez e a tela guarda. */}
           {filtersEnabled && (
             <Button
               variant="outline"
@@ -252,6 +244,16 @@ export function DataTable<T extends RowData>({
               )}
             </Button>
           )}
+          {storageKey && hideable.length > 0 && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setColsOpen(true)}
+            >
+              <SlidersHorizontal className="h-4 w-4" />
+              {t("table.columnsButton")}
+            </Button>
+          )}
         </div>
       </div>
 

package/src/contexts/brand-context.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { Shield } from "lucide-react";
+import type { JSX, ReactNode } from "react";
+import { createContext, useContext, useMemo } from "react";
+
+import { useI18n } from "#core/contexts/i18n-context";
+
+/**
+ * Identidade visual do sistema.
+ *
+ * O core não tem nome nem logo próprios: quem se chama de alguma coisa é o
+ * projeto que o consome. Declarar é opcional — sem `BrandProvider`, o shell e o
+ * login seguem com o escudo e o `app.name` das traduções, que é o que já
+ * acontecia antes desta configuração existir.
+ *
+ * A logo entra como `ReactNode` e não como URL de propósito: assim o projeto
+ * usa o que quiser (SVG inline, `next/image`, um ícone da lucide) sem que o
+ * core precise saber de onde o arquivo vem.
+ */
+export interface Brand {
+  /** Nome do sistema. Sem isto vale a chave `app.name` das traduções. */
+  name?: string;
+  /**
+   * Marca compacta, exibida ao lado do nome no cabeçalho e no drawer.
+   * Deve caber num quadrado de ~24px. Sem isto vale o escudo do core.
+   */
+  mark?: ReactNode;
+  /**
+   * Versão maior, para as telas de login, primeiro acesso e recuperação de
+   * senha. Sem isto a `mark` é usada nos dois lugares.
+   */
+  logo?: ReactNode;
+  /** Frase curta sob a logo na tela de login. Opcional. */
+  tagline?: string;
+}
+
+/** O que os componentes do core consomem: sem opcionais, tudo já resolvido. */
+export interface BrandContextType {
+  name: string;
+  mark: ReactNode;
+  logo: ReactNode;
+  tagline: string | null;
+}
+
+const BrandContext = createContext<BrandContextType | undefined>(undefined);
+
+/** Marca do core: é o que aparece enquanto o projeto não declara a dele. */
+const defaultMark = <Shield className="h-6 w-6 text-primary" />;
+
+export function BrandProvider({
+  brand,
+  children,
+}: {
+  brand?: Brand;
+  children: ReactNode;
+}): JSX.Element {
+  const { t } = useI18n();
+
+  const value = useMemo<BrandContextType>(() => {
+    const mark = brand?.mark ?? defaultMark;
+    return {
+      name: brand?.name ?? t("app.name"),
+      mark,
+      logo: brand?.logo ?? mark,
+      tagline: brand?.tagline ?? null,
+    };
+  }, [brand, t]);
+
+  return (
+    <BrandContext.Provider value={value}>{children}</BrandContext.Provider>
+  );
+}
+
+/**
+ * Identidade em vigor.
+ *
+ * Funciona mesmo sem `BrandProvider` no topo: cai no padrão do core em vez de
+ * quebrar, para que um projeto que ainda não declarou marca continue subindo.
+ */
+export function useBrand(): BrandContextType {
+  const ctx = useContext(BrandContext);
+  const { t } = useI18n();
+
+  return (
+    ctx ?? {
+      name: t("app.name"),
+      mark: defaultMark,
+      logo: defaultMark,
+      tagline: null,
+    }
+  );
+}

package/src/contexts/index.ts

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

package/src/features/login/login-screen.tsx

@@ -1,10 +1,9 @@
 "use client";
 
-import { Lock } from "lucide-react";
 import type { JSX } from "react";
 import { useEffect } from "react";
 
-import { LanguageSelector, ThemeToggle } from "#core/components";
+import { BrandHeader, LanguageSelector, ThemeToggle } from "#core/components";
 import { Card } from "#core/components/ui";
 import { useI18n } from "#core/contexts";
 import {
@@ -39,12 +38,9 @@ export function LoginScreen(): JSX.Element {
       </div>
 
       <Card className="w-full max-w-md p-8">
-        <div className="mb-6 flex flex-col items-center">
-          <div className="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground">
-            <Lock className="h-6 w-6" />
-          </div>
-          <h1 className="text-xl font-semibold">{titles[flow.step]}</h1>
-        </div>
+        {/* A marca vem antes do título do passo: é a primeira tela do sistema,
+            e quem chega aqui precisa reconhecer onde está antes de logar. */}
+        <BrandHeader title={titles[flow.step]} />
 
         {flow.error && (
           <div className="mb-4 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">

package/src/features/recovery/forgot-password-screen.tsx

@@ -8,6 +8,7 @@ import { useForm } from "react-hook-form";
 import * as yup from "yup";
 
 import { authService } from "#core/_services/auth";
+import { BrandHeader } from "#core/components";
 import { Alert, Button, Card, Field, Input } from "#core/components/ui";
 import { useI18n } from "#core/contexts";
 import { useRequest } from "#core/hooks/use-request";
@@ -36,9 +37,7 @@ export function ForgotPasswordScreen(): JSX.Element {
   return (
     <div className="flex min-h-screen items-center justify-center bg-background p-4">
       <Card className="w-full max-w-md p-8">
-        <h1 className="mb-4 text-xl font-semibold">
-          {t("recovery.forgotTitle")}
-        </h1>
+        <BrandHeader title={t("recovery.forgotTitle")} />
         {sent ? (
           <Alert variant="success">{t("recovery.forgotSuccess")}</Alert>
         ) : (

package/src/features/recovery/reset-password-screen.tsx

@@ -13,7 +13,7 @@ import {
   PasswordTokenStatus,
 } from "#core/_services/auth";
 import { STRONG_PASSWORD_REGEX } from "#core/_utils/password";
-import { PasswordField } from "#core/components";
+import { BrandHeader, PasswordField } from "#core/components";
 import { Alert, Button, Card, Field, Spinner } from "#core/components/ui";
 import { useI18n } from "#core/contexts";
 import { useRequest } from "#core/hooks/use-request";
@@ -92,7 +92,7 @@ export function ResetPasswordScreen(): JSX.Element {
   return (
     <div className="flex min-h-screen items-center justify-center bg-background p-4">
       <Card className="w-full max-w-md p-8">
-        <h1 className="mb-4 text-xl font-semibold">{title}</h1>
+        <BrandHeader title={title} />
 
         {checking && (
           <div className="flex items-center gap-2 text-sm text-muted-foreground">