@x-via/intranet-shell

Chrome + componentes estruturais da intranet X-VIA e o provider de autenticação que tira o auth das mãos dos apps. O mesmo código roda em dev (usuário simulado, papel por seletor) e em produção (Keycloak, papel vindo do claim app_roles).

Instalação (npm público)

npm install @x-via/intranet-shell

Peer deps: react >=18, react-dom >=18, @supabase/supabase-js >=2. Requer o @x-via/tailwind-preset (tema/tokens) no app.

Autenticação

Envolva o app com o XviaAuthProvider (ele recebe o client do Supabase, não cria):

import { XviaAuthProvider, RequireAuth, PageLayout, useXviaAuth } from "@x-via/intranet-shell";
import { createClient } from "@supabase/supabase-js";

const supabase = createClient(import.meta.env.VITE_SUPABASE_URL, import.meta.env.VITE_SUPABASE_ANON_KEY);

export default function App() {
  return (
    <XviaAuthProvider client={supabase} slug="financeiro">
      <RequireAuth>
        <PageLayout appName="Financeiro" title="Lançamentos">
          <Conteudo />
        </PageLayout>
      </RequireAuth>
    </XviaAuthProvider>
  );
}

function Conteudo() {
  const { user, role, roles } = useXviaAuth();  // role = papel NESTE app
  return <p>{user?.email} — {role}</p>;
}

Variáveis de ambiente

| Variável | Valores | Default | Efeito | |---|---|---|---| | VITE_XVIA_AUTH_MODE | dev | keycloak | keycloak | Escolhe o modo | | VITE_APP_SLUG | ex.: financeiro | (usa a prop slug) | Slug; a prop tem precedência |

Travas de segurança: o default é sempre keycloak — ausência de variável nunca vira dev. Se VITE_XVIA_AUTH_MODE=dev e o build for de produção (import.meta.env.PROD), o provider lança erro na inicialização ("Modo dev de autenticação não é permitido em build de produção"). Em dev há um console.warn visível e o seletor de papel aparece no Header.

useXviaAuth()

{ loading, isAuthenticated, user, role, roles, signIn, signOut, mode }

role: 'viewer' | 'editor' | 'admin' | null (papel neste app, pelo slug). roles: Record<string,string> (claim app_roles completo).

Componentes estruturais

PageLayout (Header fixo + container), PageHeader (título/descrição/ações), DataTable (cabeçalho, zebra, densidade, loading, paginação), EmptyState (ícone/título/texto/ação), Header (logo, app, avatar, Sair, seletor de papel em dev). Todos consomem os tokens do @x-via/tailwind-preset (nenhuma cor literal) e aceitam className.

import { DataTable, EmptyState } from "@x-via/intranet-shell";

<DataTable
  columns={[{ key: "nome", header: "Nome" }, { key: "valor", header: "Valor", align: "right" }]}
  rows={rows}
  empty={<EmptyState title="Nada por aqui" description="Cadastre o primeiro item." />}
/>