OMS UI Components

Uma biblioteca de componentes React com Tailwind CSS.

Instalação

npm install oms-ui-components

Uso

Importar o CSS

Primeiro, importe o CSS da biblioteca no arquivo principal do seu projeto (main.tsx, index.tsx, ou App.tsx):

import 'oms-ui-components/styles.css'

Nota para desenvolvimento local: Se você estiver trabalhando na biblioteca (no playground), use o caminho relativo: import '../../dist/index.css'

Usar os componentes

import { Button } from 'oms-ui-components'

function App() {
  return (
    <div>
      <Button 
        variant="primary" 
        size="md" 
        label="Click me" 
        onClick={() => console.log('Clicked!')}
      />
    </div>
  )
}

Componentes Disponíveis

Button

Um componente de botão versátil com múltiplas variantes e tamanhos.

Props

• label (string, required): Texto do botão
• variant (string, optional): Variante visual do botão
  • primary
  • secondary
  • tertiary
  • ghost
  • danger
  • success
• size (string, optional): Tamanho do botão
  • xxs
  • xs
  • sm
  • md
  • lg
• icon (JSX.Element, optional): Ícone a ser exibido no botão
• loading (boolean, optional): Estado de carregamento
• loadingIcon (JSX.Element, optional): Ícone customizado para o estado de carregamento
• dropdown (boolean, optional): Indica se o botão tem um dropdown
• Todas as props padrão do HTML <button> (onClick, disabled, etc.)

Exemplo

import { Button } from 'oms-ui-components'

<Button 
  variant="primary" 
  size="md" 
  label="Salvar"
  onClick={handleSave}
  disabled={isLoading}
/>

ButtonLink

Um componente de link estilizado como botão, compatível com qualquer biblioteca de roteamento.

Props

• label (string | JSX.Element, required): Texto ou conteúdo do link
• href (string, required): URL de destino
• as (ComponentType, optional): Componente de link customizado (Next.js Link, React Router Link, etc.). Por padrão usa <a>
• variant (string, optional): Variante visual (mesmas do Button)
• size (string, optional): Tamanho do link (mesmas do Button)
• icon (JSX.Element, optional): Ícone a ser exibido
• hotkey (string, optional): Atalho de teclado (ex: "Ctrl+S")
• hotkeyPosition (string, optional): Posição do label do hotkey
  • top
  • bottom (padrão)
  • left
  • right
• disabled (boolean, optional): Estado desabilitado
• target (string, optional): Atributo target do link
• Todas as props padrão do HTML <a>

Exemplos

Uso básico (usa <a> nativo):

import { ButtonLink } from 'oms-ui-components'

<ButtonLink 
  href="/path" 
  label="Click" 
  variant="primary"
/>

Com Next.js Link:

import { ButtonLink } from 'oms-ui-components'
import Link from 'next/link'

<ButtonLink 
  as={Link} 
  href="/dashboard" 
  label="Dashboard"
  variant="secondary"
/>

Com React Router:

import { ButtonLink } from 'oms-ui-components'
import { Link } from 'react-router-dom'

<ButtonLink 
  as={Link} 
  href="/about" 
  label="Sobre"
  variant="outline"
/>

Com hotkey:

<ButtonLink 
  href="/save" 
  label="Salvar"
  hotkey="Ctrl+S"
  hotkeyPosition="right"
/>

Desenvolvimento

Pré-requisitos

• Node.js 18+
• npm ou yarn

Instalação local

git clone <repository-url>
cd oms-ui-components
npm install

Build

npm run build

Desenvolvimento com watch mode

npm run dev

Playground

Para testar os componentes durante o desenvolvimento:

cd playground
npm install
npm run dev

Estrutura do projeto

oms-ui-components/
├── src/
│   ├── components/     # Componentes React
│   ├── styles/         # Estilos Tailwind
│   └── index.ts        # Exportações principais
├── dist/               # Build gerado
├── playground/         # App de teste local
└── package.json

Licença

ISC