@elogroup-sereduc/ser-front-bo-ui

Biblioteca de UI compartilhada para backoffices Ser Educacional.

Instalação

npm install @elogroup-sereduc/ser-front-bo-ui lucide-react

Peer dependencies: react, react-dom, lucide-react.

Estrutura do pacote

src/
├── components/login/   # peças reutilizáveis (form, layout, painel, defaults)
├── screens/login/      # telas compostas (BoLoginPage)
└── lib/                # utilitários (cn)

• screens — telas prontas para uso em rotas
• components — blocos e formulários para composição customizada

Tela de login

Export principal: BoLoginPage — layout split (painel de marca + formulário), com textos e links padrão iguais ao Gestão de Usuários.

Uso básico

import { BoLoginPage } from '@elogroup-sereduc/ser-front-bo-ui'

export function LoginRoute() {
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  return (
    <BoLoginPage
      assetsBasePath="/gestao-usuarios" // prefixo do basePath do app
      onMicrosoftLogin={async () => {
        setLoading(true)
        setError(null)
        try {
          await loginWithMicrosoft()
        } catch (e) {
          setError(e instanceof Error ? e.message : 'Erro ao fazer login.')
        } finally {
          setLoading(false)
        }
      }}
      loading={loading}
      error={error}
      links={{ passwordChangeUrl: 'https://...' }}
    />
  )
}

Assets

Coloque na pasta public/ do app consumidor:

• ser.svg
• ser-login-bo-bg.png

Ou sobrescreva via prop assets:

<BoLoginPage assets={{ logo: '/meu-logo.svg', backgroundImage: '/bg.jpg' }} />

Customização

Todas as strings são configuráveis via copy:

<BoLoginPage copy={{ cardTitle: 'Acessar', headlineLine1: 'Bem-vindo' }} />

Links via links (policyUrl, passwordChangeUrl).

Composição

Para integrar com roteadores (ex.: TanStack Router Outlet):

• BoLoginLayout — grid com slot do painel e coluna do formulário
• BoLoginBrandPanel — painel esquerdo (desktop)
• BoLoginForm — card de login + política

import {
  BoLoginLayout,
  BoLoginBrandPanel,
  BoLoginForm,
} from '@elogroup-sereduc/ser-front-bo-ui'

<BoLoginLayout brandPanel={<BoLoginBrandPanel assetsBasePath={base} />}>
  <div className="w-full max-w-[420px]">
    <BoLoginForm onMicrosoftLogin={handleLogin} />
  </div>
</BoLoginLayout>

Tailwind CSS

Os componentes usam classes Tailwind (text-primary, bg-primary, etc.). O app consumidor precisa:

1. Ter Tailwind configurado com as variáveis de tema (shadcn ou equivalente).
2. Incluir o pacote no scan de conteúdo:

// tailwind.config.js
content: [
  './src/**/*.{ts,tsx}',
  './node_modules/@elogroup-sereduc/ser-front-bo-ui/dist/**/*.js',
]

Tailwind v4 (@source):

@source "../node_modules/@elogroup-sereduc/ser-front-bo-ui/dist/**/*.js";

Exports

| Export | Descrição | |--------|-----------| | BoLoginPage | Tela completa | | BoLoginLayout | Layout split | | BoLoginBrandPanel | Painel de marca | | BoLoginForm | Formulário | | DEFAULT_LOGIN_COPY | Textos padrão | | DEFAULT_LOGIN_LINKS | Links padrão | | DEFAULT_LOGIN_ASSETS | Caminhos dos assets | | resolveAssetUrl | Helper basePath + asset |

Publicação

npm run build
npm publish --access public