npm package: @jaisonschmidt/ui-kit
Description: UI Kit com componentes React reutilizáveis
Author: Jaison Schmidt
Latest version: 1.0.1

# MCP UI - UI Kit com Componentes React

[![npm version](https://badge.fury.io/js/%40jaisonschmidt%2Fmcp-ui.svg)](https://badge.fury.io/js/%40jaisonschmidt%2Fmcp-ui)

## 🚀 Características

- **TypeScript** - Tipagem completa para melhor experiência de desenvolvimento
- **Styled Components** - CSS-in-JS para estilização component-based
- **Storybook** - Documentação interativa dos componentes
- **Rollup** - Bundle otimizado para distribuição
- **Jest** - Testes unitários
- **ESLint** - Qualidade de código

## 📦 Instalação

### Via GitHub Packages

```bash
# Configure o registry para pacotes do seu namespace
npm config set @jaisonschmidt:registry https://npm.pkg.github.com/

# Instale o pacote
npm install @jaisonschmidt/mcp-ui
```

### Configuração de Autenticação

Para instalar de GitHub Packages, você precisa de um token de acesso pessoal:

1. Vá para GitHub > Settings > Developer settings > Personal access tokens
2. Gere um novo token com permissão `read:packages`
3. Configure localmente:

```bash
# Crie/edite o arquivo ~/.npmrc
echo "@jaisonschmidt:registry=https://npm.pkg.github.com/" >> ~/.npmrc
echo "//npm.pkg.github.com/:_authToken=SEU_TOKEN_AQUI" >> ~/.npmrc
```

## 🎯 Uso

```tsx
import { Button, Card, Input, ThemeProvider } from '@jaisonschmidt/mcp-ui';

function App() {
  return (
    <ThemeProvider>
      <Card>
        <Input placeholder="Digite algo..." />
        <Button variant="primary">Clique aqui</Button>
      </Card>
    </ThemeProvider>
  );
}
```

## 🧩 Componentes Disponíveis

- **Button**: Botão customizável com variantes
- **Card**: Container com sombra e bordas arredondadas
- **Input**: Campo de entrada estilizado
- **ThemeProvider**: Provider para sistema de temas

### Button

```tsx
<Button variant="primary" size="medium" onClick={() => console.log('Clicado!')}>
  Clique aqui
</Button>
```

**Props:**
- `variant`: 'primary' | 'secondary' | 'outline' | 'ghost'
- `size`: 'small' | 'medium' | 'large'
- `disabled`: boolean
- `loading`: boolean

### Input

```tsx
<Input 
  label="Email" 
  type="email" 
  placeholder="seu@email.com"
  error="Email inválido"
  required
/>
```

**Props:**
- `label`: string
- `type`: 'text' | 'email' | 'password' | 'number'
- `placeholder`: string
- `error`: string
- `required`: boolean
- `disabled`: boolean

### Card

```tsx
<Card padding="large" shadow="medium" rounded>
  <h3>Título do Card</h3>
  <p>Conteúdo do card...</p>
</Card>
```

**Props:**
- `padding`: 'small' | 'medium' | 'large'
- `shadow`: 'none' | 'small' | 'medium' | 'large'
- `rounded`: boolean

## 🎨 Temas

O UI Kit inclui um sistema de temas customizável:

```tsx
import { defaultTheme } from '@jaisonschmidt/mcp-ui';

// Acesse tokens de design
const primaryColor = defaultTheme.colors.primary;
const spacing = defaultTheme.spacing.md;
```

## 🛠 Desenvolvimento

### Pré-requisitos

- Node.js >= 16
- npm ou yarn

### Instalação das dependências

```bash
npm install
```

### Scripts disponíveis

```bash
# Executar Storybook para desenvolvimento
npm run storybook

# Build da biblioteca
npm run build

# Executar testes
npm run test

# Lint do código
npm run lint

# Type checking
npm run type-check
```

### Estrutura do projeto

```
src/
├── components/          # Componentes React
│   ├── Button/
│   ├── Input/
│   └── Card/
├── styles/             # Temas e estilos globais
├── types/              # Definições TypeScript
├── hooks/              # Custom hooks (futuro)
├── utils/              # Funções utilitárias (futuro)
└── index.ts           # Exports principais
```

## 📖 Documentação

Execute o Storybook para ver a documentação completa e interativa:

```bash
npm run storybook
```

## 🧪 Testes

```bash
# Executar todos os testes
npm run test

# Executar testes em modo watch
npm run test:watch
```

## 📝 Publicação

Para publicar no GitHub Packages:

1. Configure o registry no `.npmrc`:
```
@jaisonschmidt:registry=https://npm.pkg.github.com
```

2. Faça login no GitHub Packages:
```bash
npm login --scope=@jaisonschmidt --registry=https://npm.pkg.github.com
```

3. Publique:
```bash
npm publish
```

## 🤝 Contribuição

1. Fork o projeto
2. Crie uma branch para sua feature (`git checkout -b feature/nova-feature`)
3. Commit suas mudanças (`git commit -m 'Adiciona nova feature'`)
4. Push para a branch (`git push origin feature/nova-feature`)
5. Abra um Pull Request

## 📄 Licença

MIT © [Seu Nome]