@umain-works/ui 0.0.1 → 0.0.2

package/README.md

@@ -1,202 +1,83 @@
-# @umain.works/ui — Umain Design System
+# @umain-works/ui
 
-Biblioteca de componentes React partilhada pela Umain. Publicada no [npmjs.com](https://www.npmjs.com/package/@umain.works/ui) como pacote público.
+Biblioteca de componentes React do **Umain Design System**. Publicada no [npmjs.com](https://www.npmjs.com/package/@umain-works/ui) como pacote público.
 
 ---
 
-## Desenvolvimento de componentes
-
-O Storybook é o ambiente de desenvolvimento principal — desenvolves e vês os componentes em isolamento, sem precisar de levantar nenhum projecto React.
+## Instalação
 
 ```bash
-npm run storybook
-# → http://localhost:6006
-```
-
-Só precisas de instalar o `@umain.works/ui` num projecto quando quiseres testar a **integração real** numa aplicação.
-
----
-
-## Como funciona (GitLab + npmjs.com)
-
-São duas coisas independentes:
-
+npm install @umain-works/ui
 ```
-GITLAB (código-fonte)          →   git push
-  src/, .storybook/, etc.          para a equipa trabalhar
-
-NPMJS.COM (pacote compilado)   ←   npm publish
-  dist/index.js                    só o dist/ é publicado
-  dist/index.mjs                   (o código-fonte não aparece no npm)
-  dist/index.d.ts
-```
-
-- O **GitLab** tem o código-fonte — commits, pull requests, Storybook, tudo.
-- O **npmjs.com** tem apenas o resultado compilado (`dist/`) para os projectos instalarem.
-
----
-
-## Setup inicial
-
-```bash
-# Clonar o repo
-git clone https://gitlab.umain.works/umain/tools/design-system-umain/design-system.git
-cd design-system
 
-# Instalar dependências
-npm install
-
-# Iniciar Storybook (ambiente de desenvolvimento)
-npm run storybook
-
-# Build do pacote
-npm run build
-
-# Build em modo watch (útil ao desenvolver)
-npm run dev
-```
+> **Requisitos:** React 18 ou superior.
 
 ---
 
-## Publicar no npmjs.com
-
-### Pré-requisitos (apenas 1 vez)
-
-1. **Criar conta** em [npmjs.com](https://npmjs.com) se não tens
-2. **Organização `umain.works`** já criada em npmjs.com
-3. **Gerar um Access Token com bypass 2FA:**  
-   `npmjs.com` → Avatar → **Access Tokens** → **Generate New Token** → **Granular Access Token**  
-   - Packages and scopes: **Read and write**  
-   - Activa **"Bypass 2FA"** ✅  
-   Copia o token (começa com `npm_...`)
-
-### Publicar
-
-```bash
-# Exportar o token como variável de ambiente
-export NPM_TOKEN=npm_xxxxxxxxxxxxxxxxxxxx
-
-# Publicar (o build corre automaticamente antes)
-npm publish
-```
-
-### Verificar
+## Utilização
 
-Após publicar, o pacote aparece em:  
-**`https://www.npmjs.com/package/@umain.works/ui`**
-
-### Apagar (para demos)
-
-```bash
-# Podes apagar nas primeiras 72 horas sem restrições
-npm unpublish @umain.works/ui@0.0.1
-
-# Ou apagar o pacote inteiro
-npm unpublish @umain.works/ui --force
-```
-
----
-
-## Instalar num projecto consumidor
-
-Como é um pacote público no npmjs.com, **não precisas de nenhum `.npmrc` especial** — funciona como qualquer outro pacote:
-
-```bash
-npm install @umain.works/ui
-```
-
-### Usar nos componentes
+### Button
 
 ```tsx
-import { Button } from '@umain.works/ui';
+import { Button } from '@umain-works/ui';
 
-export function LoginPage() {
+export function Example() {
   return (
-    <Button color="Primary" size="base" onClick={handleLogin}>
+    <Button color="Primary" size="base" onClick={() => console.log('clicado')}>
       Entrar
     </Button>
   );
 }
 ```
 
----
-
-## Componentes disponíveis
+#### Props
 
-| Componente | Versão | Descrição |
-|---|---|---|
-| `Button` | 0.0.1 | Botão com 7 variantes de cor, 5 tamanhos, estados loading/disabled/active |
+| Prop | Tipo | Default | Descrição |
+|---|---|---|---|
+| `color` | `ButtonColor` | `"Primary"` | Variante de cor do botão |
+| `size` | `ButtonSize` | `"base"` | Tamanho do botão |
+| `loading` | `boolean` | `false` | Mostra spinner e desactiva o botão |
+| `loadingIcon` | `ReactNode` | — | Ícone personalizado para o estado de loading |
+| `disabled` | `boolean` | — | Desactiva o botão |
+| `iconOnly` | `boolean` | `false` | Modo icon-only (padding quadrado, sem gap) |
+| `responsiveSize` | `boolean` | `false` | Padding responsivo automático |
+| `active` | `boolean` | `false` | Estado activo (ex: botão toggle pressionado) |
+| `squarePadding` | `boolean` | `false` | Padding igual em todos os lados |
 
----
+Aceita também todos os atributos nativos de `<button>` (`onClick`, `type`, `aria-*`, etc.).
 
-## Estrutura do projecto
+#### Variantes de cor (`ButtonColor`)
 
-```
-design-system/
-├── src/
-│   ├── components/
-│   │   └── Button/
-│   │       ├── Button.tsx          ← implementação
-│   │       ├── Button.types.ts     ← tipos TypeScript
-│   │       ├── Button.stories.tsx  ← documentação Storybook
-│   │       └── index.ts            ← re-exports
-│   └── index.ts                    ← export central do pacote
-├── .storybook/
-│   ├── main.ts                     ← config Storybook (Vite + React)
-│   └── preview.ts                  ← globals e decorators
-├── dist/                           ← gerado pelo build (não commitar)
-├── .npmrc                          ← token do npmjs.com (não commitar o token!)
-├── package.json
-├── tsconfig.json
-└── tsup.config.ts                  ← config do builder (ESM + CJS + types)
-```
-
----
-
-## Adicionar um novo componente
-
-1. Cria a pasta `src/components/NomeComponente/`
-2. Segue o padrão do Button:
-   - `NomeComponente.tsx` — implementação
-   - `NomeComponente.types.ts` — tipos
-   - `NomeComponente.stories.tsx` — stories do Storybook
-   - `index.ts` — re-exports
-3. Exporta em `src/index.ts`:
-   ```ts
-   export { NomeComponente } from "./components/NomeComponente";
-   export type { NomeComponenteProps } from "./components/NomeComponente";
-   ```
-4. Testa no Storybook: `npm run storybook`
-5. Faz build: `npm run build`
-6. Bumpa a versão e publica: `npm version minor && npm publish`
-
----
+| Valor | Descrição |
+|---|---|
+| `Primary` | Fundo azul primário, texto branco |
+| `PrimaryWhite` | Fundo branco, texto azul primário |
+| `PrimaryTertiary` | Fundo transparente, texto azul primário |
+| `BlackWhite` | Fundo transparente, texto escuro |
+| `Black` | Fundo preto, texto branco |
+| `WhiteBordered` | Fundo branco com borda |
+| `BlackTertiary` | Fundo transparente, texto escuro com hover azul |
 
-## Scripts
+#### Tamanhos (`ButtonSize`)
 
-| Script | Descrição |
+| Valor | Descrição |
 |---|---|
-| `npm run build` | Build do pacote para `dist/` (ESM + CJS + types) |
-| `npm run dev` | Build em modo watch |
-| `npm run storybook` | Storybook em modo desenvolvimento (porta 6006) |
-| `npm run build-storybook` | Build estático do Storybook |
-| `npm run lint` | Verificação de tipos TypeScript |
-| `npm publish` | Publica no npmjs.com (build automático antes) |
+| `xxs` | Extra extra pequeno |
+| `xs` | Extra pequeno |
+| `sm` | Pequeno |
+| `base` | Base (default) |
+| `l` | Grande |
 
 ---
 
-## Versionamento
+## Componentes disponíveis
 
-Usamos [Semantic Versioning](https://semver.org/):
+| Componente | Versão | Descrição |
+|---|---|---|
+| `Button` | 0.0.1 | Botão com 7 variantes de cor, 5 tamanhos, estados loading/disabled/active |
 
-- `PATCH` (0.0.x) — bug fixes
-- `MINOR` (0.x.0) — novos componentes ou funcionalidades (não breaking)
-- `MAJOR` (x.0.0) — breaking changes na API
+---
 
-```bash
-npm version patch   # 0.0.1 → 0.0.2
-npm version minor   # 0.0.1 → 0.1.0
-npm version major   # 0.0.1 → 1.0.0
+## Licença
 
-npm publish         # build automático + publish no npmjs.com
-```
+MIT © [Umain](https://umain.works)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umain-works/ui",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Umain Design System — componentes React partilhados",
   "keywords": [
     "design-system",