Package NPM | Leonardo Firme

Biblioteca de componentes UI de alto padrão e utilitários de infraestrutura para ERP/SaaS. Desenvolvida exclusivamente para o ecossistema React 19, NextJS 16+ e Tailwind CSS v4.

🚀 Instalação

Adicione o pacote ao seu projeto via NPM:

npm install @leonardofirme/package-npm

🎨 Integração com Tailwind CSS v4

Para que o motor do Tailwind identifique e processe as classes utilitárias e o dark:mode dentro dos componentes do pacote, adicione a diretiva @source no seu arquivo CSS principal (ex: globals.css):

@import "tailwindcss";

/* Mapeia os componentes do pacote para o compilador do Tailwind */
@source "../../node_modules/@leonardofirme/package-npm/dist";

📦 Core de Dependências

O pacote gerencia e integra dependências modernas para garantir performance em aplicações complexas:

• Interface: framer-motion, lucide-react, sonner.
• Utilitários: clsx, tailwind-merge.
• Segurança: Estruturas preparadas para integração com next-auth e jsonwebtoken.

🛠️ Guia de Uso Profissional

Componentes UI (Minimalist & Responsive)

Os componentes seguem o layout minimalista: text-gray-800 (Light) e text-gray-50 (Dark), prontos para dashboards ERP.

import { Button, Input } from '@leonardofirme/package-npm';

export default function LoginForm() {
  return (
    <div className="space-y-4">
      <Input label="E-mail" type="email" placeholder="[email protected]" />
      <Button
        label="Acessar Sistema"
        className="w-full"
        onClick={() => {}}
      />
    </div>
  );
}

Hooks de Infraestrutura

Controle de tema e estados globais de forma otimizada.

import { useTheme } from '@leonardofirme/package-npm';

export function ThemeSwitcher() {
  const { theme, toggleTheme } = useTheme();
  return (
    <button onClick={toggleTheme}>
      Tema atual: {theme === 'dark' ? 'Escuro' : 'Claro'}
    </button>
  );
}

⚙️ Pipeline de CI/CD

Garantimos a integridade do código através de builds automatizados. Cada versão passa por uma validação rigorosa de tipagem estática antes de ser disponibilizada.

Workflow: .github/workflows/publish.yml

• Build: tsup (CJS, ESM, DTS).
• Validation: tsc --noEmit.
• Registry: Publicação automática via GitHub Actions para o registro oficial do NPM.

👨‍💻 Autor e Mantenedor

Desenvolvido por Leonardo Firme. Focado em entregar estruturas escaláveis para o mercado de plataformas SaaS e sistemas de gestão.

• GitHub Pessoal: LeonardoFirme
• NPM Profile: @leonardofirme

📄 Licença

Uso disponível para a comunidade sob os termos de desenvolvimento de plataformas do ecossistema Leonardo Firme.