@visio-io/design-system 1.0.2 → 1.2.0

package/README.md

@@ -1,242 +1,151 @@
 # Visio Design System
 
-Sistema de design unificado da Visio com componentes React reutilizáveis.
+Biblioteca de componentes de design system baseada em React e Material-UI.
 
-## 📦 Instalação
+## Instalação
 
-### Usando Yalc (desenvolvimento local)
+### Como repositório privado (GitHub/GitLab)
 
-```bash
-# No diretório do design system
-pnpm build
-yalc push
-
-# No projeto que vai consumir
-yalc add @visio-io/design-system
-```
-
-### Usando npm/pnpm (produção)
+Para usar este repositório como biblioteca privada diretamente do Git:
 
 ```bash
-npm install @visio-io/design-system
-# ou
-pnpm add @visio-io/design-system
-```
-
-## 🚀 Uso básico
-
-### 1. Importar o CSS global
-
-No arquivo principal da aplicação (ex: `layout.tsx`, `_app.tsx`, `main.tsx`):
-
-```tsx
-import "@visio-io/design-system/style.css";
-```
-
-**⚠️ Importante:** Use `@visio-io/design-system/style.css` (sem `/dist`) porque o `package.json` já mapeia o caminho corretamente.
-
-### 2. Importar componentes
-
-```tsx
-import { Button, VideoPlayer, SearchBar } from "@visio-io/design-system";
-
-function App() {
-  return (
-    <div>
-      <Button>Click me</Button>
-      <VideoPlayer availableQualities={[...]} />
-    </div>
-  );
-}
-```
-
-### 3. Usar tokens de design (opcional)
-
-```tsx
-import { lightColors, darkColors, spacingTokens } from "@visio-io/design-system/tokens";
-
-// Use os tokens nos seus estilos customizados
-const myStyle = {
-  color: lightColors.primary,
-  padding: spacingTokens.md,
-};
-```
-
-## 📚 Componentes disponíveis
-
-- **Button** - Botão customizável com variantes
-- **VideoPlayer** - Player de vídeo com suporte a WebRTC, controles completos e responsivo
-- **SearchBar** - Barra de busca com autocomplete e filtros
-- **ModuleMenu** - Menu de módulos com estados expandido/colapsado
-- **SidebarMenu** - Menu lateral com subitens
-- **GoogleMap** - Integração com Google Maps
-- **MapSpot** - Marcadores customizados para mapas
-- **CountCard** - Cartão para exibir contadores
-- **FilterButton** - Botão com dropdown de filtros
-- **NotFoundContent** - Tela de conteúdo não encontrado
-- **ZoomControls** - Controles de zoom para mapas
+# Com pnpm
+pnpm add git+https://github.com/USUARIO/visio-design-system.git
+# ou com branch/tag específica
+pnpm add git+https://github.com/USUARIO/visio-design-system.git#main
 
-## 🎨 Tema e estilização
+# Com npm
+npm install git+https://github.com/USUARIO/visio-design-system.git
 
-O design system usa Material-UI como base. Para personalizar o tema:
-
-```tsx
-import { ThemeProvider, createTheme } from '@mui/material/styles';
-import { lightTheme, darkTheme } from '@visio-io/design-system';
-
-// Use o tema padrão
-<ThemeProvider theme={lightTheme}>
-  <App />
-</ThemeProvider>
-
-// Ou customize
-const customTheme = createTheme({
-  ...lightTheme,
-  palette: {
-    ...lightTheme.palette,
-    primary: {
-      main: '#your-color',
-    },
-  },
-});
+# Com yarn
+yarn add git+https://github.com/USUARIO/visio-design-system.git
 ```
 
-## 🔧 Desenvolvimento
-
-### Executar Storybook
+**Para repositórios privados**, você precisará configurar autenticação:
 
+1. **Usando SSH** (recomendado):
 ```bash
-pnpm dev
+pnpm add git+ssh://git@github.com/USUARIO/visio-design-system.git
 ```
 
-Acesse: http://localhost:6006
-
-### Build
-
+2. **Usando token de acesso pessoal**:
 ```bash
-pnpm build
+pnpm add git+https://SEU_TOKEN@github.com/USUARIO/visio-design-system.git
 ```
 
-### Publicar (yalc)
-
-```bash
-pnpm build && yalc push
+3. **Configurando no `.npmrc`** do projeto que vai usar a lib:
+```
+@visio-io:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=SEU_TOKEN
 ```
 
-## 📖 Documentação
+**Nota:** O script `prepare` executa automaticamente o build quando o pacote é instalado via Git.
 
-Acesse o Storybook para ver a documentação completa de cada componente com exemplos interativos:
+## Dependências Peer
 
-```bash
-pnpm dev
-```
+Este pacote requer as seguintes dependências no seu projeto:
 
-## 🐛 Troubleshooting
+- `react` ^19.0.0
+- `react-dom` ^19.0.0
+- `@mui/material` ^5.0.0
+- `@emotion/react` ^11.0.0
+- `@emotion/styled` ^11.0.0
 
-### Erro: "Module not found: Can't resolve '@visio-io/design-system/dist/style.css'"
+## Uso
 
-**Causa:** Import incorreto do CSS.
-
-**Solução:** Use `@visio-io/design-system/style.css` (sem `/dist`):
+### Importar componentes
 
 ```tsx
-// ❌ Errado
-import "@visio-io/design-system/dist/style.css";
+import { Button } from "@visio-io/design-system";
 
-// ✅ Correto
-import "@visio-io/design-system/style.css";
+function App() {
+  return <Button variant="contained">Clique aqui</Button>;
+}
 ```
 
-### Erro: "Cannot find module '@visio-io/design-system'"
-
-**Causa:** Pacote não instalado.
+**Nota:** Os estilos CSS são incluídos automaticamente quando você importa qualquer componente. Não é necessário importar o CSS manualmente.
 
-**Solução:** Execute `yalc add @visio-io/design-system` no projeto receptor.
+### Importar temas
 
-### Estilos não aplicados
+```tsx
+import { ThemeProvider } from "@mui/material/styles";
+import { lightTheme, darkTheme } from "@visio-io/design-system";
 
-**Causa:** CSS não importado ou ordem de importação incorreta.
+function App() {
+  return (
+    <ThemeProvider theme={lightTheme}>
+      {/* Seus componentes aqui */}
+    </ThemeProvider>
+  );
+}
+```
 
-**Solução:** 
-1. Certifique-se de importar o CSS antes dos componentes
-2. Verifique se o CSS está sendo importado no arquivo raiz da aplicação
+### Importar tokens
 
 ```tsx
-// ✅ Ordem correta
-import "@/app/styles/globals.css";
-import "@visio-io/design-system/style.css";
-import { Button } from "@visio-io/design-system";
+import { spacingTokens, colorsTokens } from "@visio-io/design-system/tokens";
 ```
 
-## 📝 Estrutura de exports
+## Desenvolvimento
 
-O `package.json` exporta:
+```bash
+# Instalar dependências
+pnpm install
 
-```json
-{
-  ".": "./dist/index.es.js",           // Componentes
-  "./style.css": "./dist/style.css",   // Estilos
-  "./tokens": "./src/styles/tokens"    // Tokens de design
-}
+# Executar Storybook
+pnpm dev
+
+# Build da biblioteca
+pnpm build
+
+# Verificar tipos
+pnpm type-check
 ```
 
-## 🤝 Contribuindo
+## Publicação
 
-1. Clone o repositório
-2. Instale as dependências: `pnpm install`
-3. Faça suas alterações
-4. Execute o Storybook: `pnpm dev`
-5. Build: `pnpm build`
-6. Teste localmente com yalc: `yalc push`
+O projeto usa [Changesets](https://github.com/changesets/changesets) para gerenciamento de versões e é publicado no GitHub Packages.
 
-## 📦 Publicando nova versão
+### Publicação Automática (Recomendado)
 
-### Usando Changesets (recomendado)
+O projeto possui um workflow do GitHub Actions que publica automaticamente quando há changesets no branch `main` ou `master`.
 
+1. Crie um changeset:
 ```bash
-# 1. Criar um changeset documentando as mudanças
 pnpm changeset
+```
 
-# 2. Atualizar versão e CHANGELOG
-pnpm changeset version
-
-# 3. Build e publicar
-pnpm release
+2. Commit e push:
+```bash
+git add .
+git commit -m "feat: nova funcionalidade"
+git push
 ```
 
-### Publicação manual
+3. O workflow irá:
+   - Detectar o changeset
+   - Criar um PR com a atualização de versão
+   - Após merge, publicar automaticamente no GitHub Packages
 
-```bash
-# 1. Atualizar versão no package.json
-# Edite manualmente ou use:
-npm version patch  # 1.0.1 -> 1.0.2
-npm version minor  # 1.0.1 -> 1.1.0
-npm version major  # 1.0.1 -> 2.0.0
+### Publicação Manual
 
-# 2. Build
+```bash
+# Build do projeto
 pnpm build
 
-# 3. Publicar no npm
-npm publish --access public
-
-# 4. Push das tags
-git push --follow-tags
+# Publicar no GitHub Packages
+pnpm publish
 ```
 
-### Versionamento semântico
+**Nota:** Você precisará configurar autenticação. Veja o arquivo `TUTORIAL_GITHUB_PACKAGES.md` para instruções completas.
 
-- **PATCH** (1.0.x): Correções de bugs, pequenas melhorias
-- **MINOR** (1.x.0): Novas funcionalidades, backward compatible
-- **MAJOR** (x.0.0): Breaking changes
+### Instalação do Pacote Publicado
 
-### ⚠️ Antes de publicar
+Para instalar o pacote publicado no GitHub Packages:
 
-- ✅ Certifique-se de estar autenticado no npm: `npm login`
-- ✅ Verifique se tem permissões no package `@visio-io/design-system`
-- ✅ Atualize o CHANGELOG.md com as mudanças
-- ✅ Teste a build localmente: `pnpm build`
-- ✅ Verifique os arquivos que serão publicados: `npm pack --dry-run`
-
-## 📄 Licença
+1. Configure autenticação (veja `TUTORIAL_GITHUB_PACKAGES.md`)
+2. Instale o pacote:
+```bash
+pnpm add @visio-io/design-system
+```
 
-Proprietary - Visio.io