@mletras/mftools

Design system compartilhado para microfrontends do Multiverso das Letras.

Instalação

npm install @mletras/mftools
# ou
yarn add @mletras/mftools

Uso

1. Importar o CSS no seu global.css

@import '@mletras/mftools/theme.css';
@import 'tailwindcss';
@source '../node_modules/@mletras/mftools/dist';
@import '@mletras/mftools/style.css';

/* Seus estilos customizados abaixo */

2. Usar os componentes

import { Button, Modal, PageShell, Badge } from '@mletras/mftools';

export function MyPage() {
  return (
    <PageShell title="Minha Página" description="Descrição">
      <Button variant="primary">Clique aqui</Button>
    </PageShell>
  );
}

Componentes Disponíveis

Layout

• PageShell — Layout de página com header e conteúdo
• PageHeader — Cabeçalho da página com título, descrição e ações

UI

• Button — Botão com variantes (primary, secondary, danger, ghost, ghostDanger)
• Badge — Badge/etiqueta com cores por tone
• Modal — Modal/overlay com header, footer e conteúdo
• ConfirmDialog — Diálogo de confirmação (sim/não)
• Select — Select customizado com menu dropdown
• Field — Campo de formulário com label e hint
• PageLoader — Loader de página inteira
• EmptyState — Estado vazio com ícone, título e descrição
• DocumentTitle — Define o título do documento
• ErrorBoundary — Boundary de erro React
• ErrorFallback — Fallback amigável quando algo quebra

Context

• GlobalLoadingProvider — Provider de loading global (overlay)
• useGlobalLoading — Hook para controlar o loading

Lib

• inputClass — Classes CSS para inputs
• labelClass - Classes CSS para labels

Tokens de Tema

O theme.css define as seguintes variáveis CSS:

--color-mletras-black: #000000;
--color-mletras-red: #e03c2e;
--color-mletras-blue: #243f8c;
--color-mletras-blue-dark: #1c326f;
--color-mletras-gray: #8aa7af;
--color-mletras-dot: #c5d0d4;
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
--max-width-layout: 1380px;

Desenvolvimento

# Rodar dev server
yarn dev

# Build
yarn build

# Lint
yarn lint

Publicar

# Build antes de publicar (roda automaticamente via prepublishOnly)
npm publish