@mundogamernetwork/shared-ui

Nuxt 3 Layer compartilhado entre todos os frontends da Mundo Gamer Network.

O que inclui

Componentes

• MgHeaderComponent - Header unificado com notificações, chat, user menu, settings
• MgHeaderUIUser - Dropdown do usuário (login/register, avatar, logout)
• MgHeaderUIConfig - Dropdown de configurações (dark mode, idioma)
• MgLoginModal - Modal de login/registro
• MgNotificationsModal - Lista de notificações com infinite scroll
• MgNotificationCard - Card individual de notificação
• MgMessageModal - Interface completa de chat
• MgMessageCard - Card de conversa na lista de chats

Páginas institucionais (More)

about, faq, careers, team, press, partners, roadmap, status, blog, contact, magazine, health-check, icons

Todas filtram por systemId (platform_id) e compartilham a mesma estrutura visual.

Páginas de erro

• error.vue - Página de erro global (404, 500, etc.)

Páginas dinâmicas

• [slug]/index.vue - Páginas de documentos dinâmicos (termos, políticas, etc.)

Services

• httpService - Axios com interceptors (error handling, lang, timezone, bearer token)
• authService - Autenticação (authenticate, getUser, logout)
• notificationsService - CRUD de notificações
• chatService - CRUD de chat (endpoints configuráveis)
• institutionalService - APIs institucionais (FAQ, careers, team, press, etc.)
• contactService - Formulário de contato
• documentService - Documentos dinâmicos (termos, políticas)

Stores (Pinia)

• useAuthStore - Estado do usuário com persistência em localStorage
• useLoginStore - Estado do modal de login
• useIndexStore - Estado de sidebar e modais
• useNotificationsStore - Notificações com filtro por systemId
• useChatStore - Chat com WebSocket e polling fallback
• useInstitutionalStore - Cache de dados institucionais
• useContactStore - Estado do formulário de contato
• useDocumentStore - Documentos dinâmicos

Composables

• useLogout() - Logout unificado (API + cookies + localStorage + store reset + redirect)
• useUserNotifications() - Notificações reativas com filtro por systemId

Plugins

• echo.client - Laravel Echo / Pusher com auto-reconnect
• auth.client - Auto-fetch do usuário ao montar o app

Middleware

• auth.global - Proteção de rotas configurável via protectedRoutes

Instalação

1. Adicionar dependência

npm install git+ssh://[email protected]/Mundo-Gamer-Network/shared-ui.git#v1.0.0

Ou no package.json:

{
  "dependencies": {
    "@mundogamernetwork/shared-ui": "git+ssh://[email protected]/Mundo-Gamer-Network/shared-ui.git#v1.0.0"
  }
}

2. Configurar como Nuxt Layer

No nuxt.config.ts do app:

export default defineNuxtConfig({
  extends: ['@mundogamernetwork/shared-ui'],

  runtimeConfig: {
    public: {
      mgSharedUi: {
        platform: 'MGC',           // Identificador do app (MGC, MGTV, MGN, etc.)
        systemId: '1',             // VITE_SYSTEM_ID - filtra notificações, FAQ, careers, etc.
        apiBaseURL: 'https://api.mundogamer.network',
        accountsBaseUrl: 'https://accounts.mundogamer.network',
        networkBaseUrl: 'https://network.mundogamer.network',
        features: {
          chat: true,              // Habilita chat no header
          notifications: true,     // Habilita notificações no header
          wallet: false,           // Habilita sistema de moedas (futuro)
          darkMode: true,          // Habilita toggle de dark mode
          search: false,           // Habilita barra de busca no header
          statusOnline: true       // Habilita toggle de status online
        },
        languages: ['pt-BR', 'en', 'es', 'de', 'ro'],
        protectedRoutes: [         // Rotas que exigem autenticação
          '/profile',
          '/settings',
          '/dashboard'
        ]
      }
    }
  }
})

3. Peer dependencies

O app precisa ter instalado:

{
  "@pinia/nuxt": ">=0.5.0",
  "@pinia-plugin-persistedstate/nuxt": ">=1.0.0",
  "axios": ">=1.0.0",
  "laravel-echo": ">=1.15.0",
  "pinia": ">=2.1.0",
  "pusher-js": ">=8.0.0"
}

Configuração por App

Feature flags

Cada app habilita apenas o que usa:

| App | chat | notifications | wallet | darkMode | search | statusOnline | |-----|------|--------------|--------|----------|--------|-------------| | community-frontend | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | | tv-frontend | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | | jobs-frontend | ✅ | ✅ | ❌ | ❌ | ✅ | ❌ | | academy-frontend | ❌ | ✅ | ❌ | ✅ | ❌ | ❌ | | token-frontend | ❌ | ✅ | ✅ | ❌ | ❌ | ❌ | | club-frontend | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | | agency-frontend | ❌ | ✅ | ❌ | ❌ | ❌ | ❌ | | network-site | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | | network-accounts | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |

Chat endpoints customizados (jobs-frontend)

O jobs-frontend usa endpoints diferentes para o chat. Configure assim:

mgSharedUi: {
  chatEndpoints: {
    list: '/public/vacancy-application/chats',
    send: '/public/vacancy-application/chats/messages/',
    show: '/public/vacancy-application/chats/{chatId}',
    unread: '/public/vacancy-application/chats/messages/unread/count',
    delete: '/public/vacancy-application/chats/{chatId}',
    deleteMessage: '/public/vacancy-application/chats/messages/{messageId}'
  }
}

Rotas protegidas

Defina as rotas que exigem login. O middleware redireciona para accounts com redirect_to:

mgSharedUi: {
  protectedRoutes: ['/profile', '/settings', '/dashboard']
}

Sobrescrita (Override)

Por ser um Nuxt Layer, qualquer arquivo pode ser sobrescrito no app consumidor. Basta criar o arquivo com o mesmo caminho:

# Sobrescrever a página about
app/pages/about.vue          → substitui shared-ui/pages/about.vue

# Sobrescrever um componente
app/components/ui/MgHeaderComponent.vue → substitui o header padrão

# Adicionar um store extra
app/stores/custom.ts          → adiciona sem conflito

Atualização

Para atualizar para uma nova versão:

# Se usa tag específica, mude a tag no package.json e reinstale:
npm install git+ssh://[email protected]/Mundo-Gamer-Network/shared-ui.git#v1.1.0

# Se aponta para main (sem tag):
npm update @mundogamernetwork/shared-ui

Variáveis de ambiente necessárias no app

VITE_API_BASE_URL=https://api.mundogamer.network
VITE_BASE_ACCOUNTS_URL=https://accounts.mundogamer.network
VITE_BASE_URL_NETWORK=https://network.mundogamer.network
VITE_SYSTEM_ID=1
VITE_PUSHER_APP_KEY=your_pusher_key
VITE_PUSHER_APP_CLUSTER=mt1

Estrutura

shared-ui/
├── components/ui/
│   ├── Header/
│   │   ├── MgMessageCard.vue
│   │   ├── MgMessageModal.vue
│   │   ├── MgNotificationCard.vue
│   │   └── MgNotificationsModal.vue
│   ├── MgHeaderComponent.vue
│   ├── MgHeaderUIConfig.vue
│   ├── MgHeaderUIUser.vue
│   └── MgLoginModal.vue
├── composables/
│   ├── useLogout.ts
│   └── useUserNotifications.ts
├── middleware/
│   └── auth.global.ts
├── pages/
│   ├── [slug]/index.vue
│   ├── magazine/
│   │   ├── index.vue
│   │   └── [slug].vue
│   ├── about.vue
│   ├── blog.vue
│   ├── careers.vue
│   ├── contact.vue
│   ├── faq.vue
│   ├── health-check.vue
│   ├── icons.vue
│   ├── partners.vue
│   ├── press.vue
│   ├── roadmap.vue
│   ├── status.vue
│   └── team.vue
├── plugins/
│   ├── auth.client.ts
│   └── echo.client.ts
├── services/
│   ├── authService.ts
│   ├── chatService.ts
│   ├── contactService.ts
│   ├── documentService.ts
│   ├── httpService.ts
│   ├── institutionalService.ts
│   └── notificationsService.ts
├── stores/
│   ├── auth.ts
│   ├── chat.ts
│   ├── contact.ts
│   ├── document.ts
│   ├── index.ts
│   ├── institutional.ts
│   ├── login.ts
│   └── notifications.ts
├── types/index.ts
├── utils/serialize.ts
├── error.vue
├── nuxt.config.ts
└── package.json