rl-core-front

As telas do core, em Next.js. Par do rl-core-api.

Login com 2FA, usuários, RBAC, auditoria, logs e perfil — mais os primitivos de UI e a DataTable com paginação, ordenação e filtro dinâmico.

npm install rl-core-front

Instalação

O pacote é publicado em código-fonte, não compilado — são 72 arquivos com 'use client', e compilar quebraria as diretivas. São três ajustes de configuração, uma vez só.

1. next.config.ts — opta o pacote para dentro do compilador:

const nextConfig: NextConfig = {
  transpilePackages: ["rl-core-front"],
};

2. tailwind.config.ts — o preset traz o tema; o content precisa varrer o pacote, senão as classes usadas por ele são descartadas e a interface sai sem estilo:

import corePreset from "rl-core-front/tailwind-preset";

export default {
  ...corePreset,
  content: [
    "./src/**/*.{ts,tsx}",
    "./node_modules/rl-core-front/src/**/*.{ts,tsx}",
  ],
} satisfies Config;

3. globals.css — os tokens de cor:

@import "tailwindcss";
@config "../../tailwind.config.ts";
@import "rl-core-front/styles.css";

Uso

Cada rota fica com uma linha:

// src/app/(app)/usuarios/page.tsx
export { UsersScreen as default } from "rl-core-front";

O layout.tsx empilha os providers:

import {
  AuthProvider,
  BrandProvider,
  ColorModeProvider,
  I18nProvider,
  SocketProvider,
  ToastProvider,
} from "rl-core-front";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ColorModeProvider>
      <I18nProvider>
        <BrandProvider brand={{ name: "ControlX", mark: <Logo /> }}>
          <ToastProvider>
            <AuthProvider>
              <SocketProvider>{children}</SocketProvider>
            </AuthProvider>
          </ToastProvider>
        </BrandProvider>
      </I18nProvider>
    </ColorModeProvider>
  );
}

Telas prontas

LoginScreen, DashboardScreen, UsersScreen, RbacScreen, LogsScreen, AuditScreen, ProfileScreen, QueuesScreen, mais as de recuperação de senha e as de erro (ForbiddenScreen, NotFoundScreen). Cada uma é uma linha no page.tsx da rota — a de filas em /filas, e ela some do menu sozinha para quem não tem queues:read:any.

Acompanhar um job em segundo plano

const job = useJobProgress<ImportSummary>(jobId);

<JobProgress {...job} successMessage={`${job.summary?.total} linhas importadas`} />;

O hook usa a conexão de socket que o SocketProvider já mantém — não abre uma segunda — e relê GET /jobs/:id na montagem e a cada reconexão, para o caso de o job ter terminado antes de a tela assinar.

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:

export { config, middleware } from "rl-core-front/middleware";

Nas suas telas

Os primitivos e hooks são os mesmos que as telas do core usam:

import { Button, DataTable, useListQuery } from "rl-core-front";

export function ContasScreen() {
  const query = useListQuery("/contas/filter-schema");
  return <DataTable columns={columns} {...query} />;
}

useListQuery cuida de paginação, ordenação e filtro — inclusive o painel lateral, os chips e a querystring, que sobrevive ao F5 e deixa o link compartilhável. O catálogo de campos vem do backend; você não monta formulário de filtro à mão.

Traduções

As mensagens do core saem prontas e você mescla as suas:

import { en as coreEn, pt as corePt } from "rl-core-front";

export const messages = {
  pt: { ...corePt, ...appPt },
  en: { ...coreEn, ...appEn },
};

Peer dependencies

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.

Licença

MIT © Rodrigo Liberti