rl-core-front 0.1.0

package/README.md

@@ -0,0 +1,129 @@
+# rl-core-front
+
+As telas do core, em Next.js. Par do [`rl-core-api`](https://www.npmjs.com/package/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.
+
+```bash
+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:
+
+```ts
+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:
+
+```ts
+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:
+
+```css
+@import "tailwindcss";
+@config "../../tailwind.config.ts";
+@import "rl-core-front/styles.css";
+```
+
+## Uso
+
+Cada rota fica com uma linha:
+
+```tsx
+// src/app/(app)/usuarios/page.tsx
+export { UsersScreen as default } from "rl-core-front";
+```
+
+O `layout.tsx` empilha os providers:
+
+```tsx
+import {
+  AuthProvider,
+  ColorModeProvider,
+  I18nProvider,
+  SocketProvider,
+  ToastProvider,
+} from "rl-core-front";
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <ColorModeProvider>
+      <I18nProvider>
+        <ToastProvider>
+          <AuthProvider>
+            <SocketProvider>{children}</SocketProvider>
+          </AuthProvider>
+        </ToastProvider>
+      </I18nProvider>
+    </ColorModeProvider>
+  );
+}
+```
+
+E o `middleware.ts` da raiz:
+
+```ts
+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:
+
+```tsx
+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:
+
+```ts
+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.
+
+## Licença
+
+MIT © Rodrigo Liberti

package/package.json

@@ -0,0 +1,113 @@
+{
+  "name": "rl-core-front",
+  "version": "0.1.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",
+  "keywords": [
+    "nextjs",
+    "react",
+    "tailwind",
+    "auth",
+    "2fa",
+    "rbac",
+    "data-table",
+    "boilerplate"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/liberti1991/aplication-core.git",
+    "directory": "packages/front"
+  },
+  "homepage": "https://github.com/liberti1991/aplication-core#readme",
+  "bugs": "https://github.com/liberti1991/aplication-core/issues",
+  "imports": {
+    "#core/*": "./src/*"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./middleware": "./src/middleware.ts",
+    "./styles.css": "./src/styles/core.css",
+    "./tailwind-preset": "./tailwind-preset.ts",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "!src/app",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx",
+    "tailwind-preset.ts",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "next dev -p 4000",
+    "build": "next build",
+    "prepublishOnly": "npm run lint && npx tsc --noEmit && npm test && npm run build",
+    "start": "next start -p 4000",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "openapi:types": "openapi-typescript ../../openapi.json -o src/_services/api/schema.d.ts",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "peerDependencies": {
+    "next": "^16.3.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "tailwindcss": "^4.3.3"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.7.1",
+    "@radix-ui/react-avatar": "^1.2.6",
+    "@radix-ui/react-checkbox": "^1.3.11",
+    "@radix-ui/react-dialog": "^1.1.23",
+    "@radix-ui/react-dropdown-menu": "^2.1.24",
+    "@radix-ui/react-label": "^2.1.15",
+    "@radix-ui/react-select": "^2.3.7",
+    "@radix-ui/react-separator": "^1.1.15",
+    "@radix-ui/react-slot": "^1.3.3",
+    "@radix-ui/react-switch": "^1.3.7",
+    "@radix-ui/react-tabs": "^1.1.21",
+    "@tanstack/react-table": "^9.1.0",
+    "axios": "^1.19.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.30.0",
+    "react-easy-crop": "^6.2.3",
+    "react-hook-form": "^7.85.0",
+    "socket.io-client": "^4.8.3",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss-animate": "^1.0.7",
+    "yup": "^1.7.1"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3.3.6",
+    "@tailwindcss/postcss": "^4.3.3",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^26.2.0",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "@vitejs/plugin-react": "^6.0.5",
+    "autoprefixer": "^10.5.4",
+    "eslint": "^10.8.1",
+    "eslint-config-next": "^16.3.1",
+    "eslint-plugin-simple-import-sort": "^14.0.0",
+    "jsdom": "^30.0.1",
+    "next": "^16.3.1",
+    "openapi-typescript": "^7.13.0",
+    "postcss": "^8.5.26",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "tailwindcss": "^4.3.3",
+    "typescript": "~6.0.3",
+    "vitest": "^4.1.10"
+  },
+  "engines": {
+    "node": ">=20"
+  }
+}

package/src/_services/api/axios.factory.ts

@@ -0,0 +1,97 @@
+import axios, {
+  AxiosError,
+  AxiosInstance,
+  InternalAxiosRequestConfig,
+} from "axios";
+
+const BASE_URL =
+  process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:3108/api/v1";
+
+const PUBLIC_PATHS = ["/login", "/forgot-password", "/reset-password"];
+
+function isPublicPath(pathname: string): boolean {
+  return PUBLIC_PATHS.some((p) => pathname.startsWith(p));
+}
+
+/**
+ * Cria uma instância axios com:
+ * - withCredentials (envia/recebe cookies httpOnly de auth);
+ * - refresh automático e único em caso de 401 (rotaciona o refresh token).
+ */
+export class AxiosFactory {
+  private isRefreshing = false;
+  private queue: Array<(ok: boolean) => void> = [];
+
+  make(): AxiosInstance {
+    const api = axios.create({
+      baseURL: BASE_URL,
+      withCredentials: true,
+      headers: { "Content-Type": "application/json" },
+    });
+
+    api.interceptors.response.use(
+      (res) => res,
+      async (error: AxiosError) => {
+        const original = error.config as InternalAxiosRequestConfig & {
+          _retry?: boolean;
+        };
+        const status = error.response?.status;
+        const url = original?.url ?? "";
+
+        const isAuthRoute =
+          url.includes("/auth/login") ||
+          url.includes("/auth/refresh") ||
+          url.includes("/auth/2fa");
+
+        if (status === 401 && !original?._retry && !isAuthRoute) {
+          original._retry = true;
+          const refreshed = await this.refresh(api);
+          if (refreshed) {
+            return api(original);
+          }
+          if (
+            typeof window !== "undefined" &&
+            !isPublicPath(window.location.pathname)
+          ) {
+            // Limpa os cookies httpOnly no servidor antes de redirecionar — sem isso o
+            // middleware ainda vê os cookies (inválidos, mas presentes) e manda de volta
+            // pro dashboard, gerando loop entre /dashboard e /login?reason=expired.
+            await api.post("/auth/logout").catch(() => {});
+            window.location.href = "/login?reason=expired";
+          }
+        }
+        return Promise.reject(error);
+      },
+    );
+
+    return api;
+  }
+
+  private refresh(api: AxiosInstance): Promise<boolean> {
+    if (this.isRefreshing) {
+      return new Promise((resolve) => this.queue.push(resolve));
+    }
+    this.isRefreshing = true;
+    return api
+      .post("/auth/refresh")
+      .then(() => {
+        this.flush(true);
+        return true;
+      })
+      .catch(() => {
+        this.flush(false);
+        return false;
+      })
+      .finally(() => {
+        this.isRefreshing = false;
+      });
+  }
+
+  private flush(ok: boolean): void {
+    this.queue.forEach((cb) => cb(ok));
+    this.queue = [];
+  }
+}
+
+/** Instância única reutilizável da API. */
+export const api = new AxiosFactory().make();

package/src/_services/api/list-query.ts

@@ -0,0 +1,26 @@
+/**
+ * Query de uma listagem paginada, como a tabela a enxerga.
+ *
+ * Existe para os `.service.ts` pararem de crescer em parâmetros posicionais —
+ * eram cinco e o filtro seria o sexto.
+ */
+export interface ListQuery {
+  /** Base 0, como o `PaginationState` da tabela. */
+  page: number;
+  limit: number;
+  search?: string;
+  sortBy?: string;
+  sortDir?: "ASC" | "DESC";
+  /** JSON do filtro dinâmico, montado pelo `useFilters`. */
+  filter?: string;
+}
+
+/** `ListQuery` → params do axios. A API pagina a partir de 1. */
+export const toListParams = (query: ListQuery): Record<string, unknown> => ({
+  page: query.page + 1,
+  limit: query.limit,
+  search: query.search || undefined,
+  sortBy: query.sortBy,
+  sortDir: query.sortDir,
+  filter: query.filter,
+});