Visio Design System

Sistema de design unificado da Visio com componentes React reutilizáveis.

📦 Instalação

Usando Yalc (desenvolvimento local)

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

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

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

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)

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:

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

pnpm dev

Acesse: http://localhost:6006

Build

pnpm build

Publicar (yalc)

pnpm build && yalc push

📖 Documentação

Acesse o Storybook para ver a documentação completa de cada componente com exemplos interativos:

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

// ❌ 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

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

{
  ".": "./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)

# 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

# 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