@visio-io/design-system 1.7.0 → 1.8.1

package/README.md

@@ -0,0 +1,242 @@
+# Visio Design System
+
+Sistema de design unificado da Visio com componentes React reutilizáveis.
+
+## 📦 Instalação
+
+### Usando Yalc (desenvolvimento local)
+
+```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)
+
+```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
+
+## 🎨 Tema e estilização
+
+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',
+    },
+  },
+});
+```
+
+## 🔧 Desenvolvimento
+
+### Executar Storybook
+
+```bash
+pnpm dev
+```
+
+Acesse: http://localhost:6006
+
+### Build
+
+```bash
+pnpm build
+```
+
+### Publicar (yalc)
+
+```bash
+pnpm build && yalc push
+```
+
+## 📖 Documentação
+
+Acesse o Storybook para ver a documentação completa de cada componente com exemplos interativos:
+
+```bash
+pnpm dev
+```
+
+## 🐛 Troubleshooting
+
+### Erro: "Module not found: Can't resolve '@visio-io/design-system/dist/style.css'"
+
+**Causa:** Import incorreto do CSS.
+
+**Solução:** Use `@visio-io/design-system/style.css` (sem `/dist`):
+
+```tsx
+// ❌ Errado
+import "@visio-io/design-system/dist/style.css";
+
+// ✅ Correto
+import "@visio-io/design-system/style.css";
+```
+
+### Erro: "Cannot find module '@visio-io/design-system'"
+
+**Causa:** Pacote não instalado.
+
+**Solução:** Execute `yalc add @visio-io/design-system` no projeto receptor.
+
+### Estilos não aplicados
+
+**Causa:** CSS não importado ou ordem de importação incorreta.
+
+**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
+
+```tsx
+// ✅ Ordem correta
+import "@/app/styles/globals.css";
+import "@visio-io/design-system/style.css";
+import { Button } from "@visio-io/design-system";
+```
+
+## 📝 Estrutura de exports
+
+O `package.json` exporta:
+
+```json
+{
+  ".": "./dist/index.es.js",           // Componentes
+  "./style.css": "./dist/style.css",   // Estilos
+  "./tokens": "./src/styles/tokens"    // Tokens de design
+}
+```
+
+## 🤝 Contribuindo
+
+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`
+
+## 📦 Publicando nova versão
+
+### Usando Changesets (recomendado)
+
+```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
+```
+
+### Publicação manual
+
+```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
+
+# 2. Build
+pnpm build
+
+# 3. Publicar no npm
+npm publish --access public
+
+# 4. Push das tags
+git push --follow-tags
+```
+
+### Versionamento semântico
+
+- **PATCH** (1.0.x): Correções de bugs, pequenas melhorias
+- **MINOR** (1.x.0): Novas funcionalidades, backward compatible
+- **MAJOR** (x.0.0): Breaking changes
+
+### ⚠️ Antes de publicar
+
+- ✅ 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
+
+Proprietary - Visio.io