MCP UI - UI Kit com Componentes React

🚀 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

# 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:

# 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

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

<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

<Input 
  label="Email" 
  type="email" 
  placeholder="[email protected]"
  error="Email inválido"
  required
/>

Props:

• label: string
• type: 'text' | 'email' | 'password' | 'number'
• placeholder: string
• error: string
• required: boolean
• disabled: boolean

Card

<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:

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

npm install

Scripts disponíveis

# 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:

npm run storybook

🧪 Testes

# 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:

npm login --scope=@jaisonschmidt --registry=https://npm.pkg.github.com

3. Publique:

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]