@mundogamernetwork/shared-ui 1.0.0

package/README.md

@@ -0,0 +1,283 @@
+# @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
+
+```bash
+npm install git+ssh://git@github.com/Mundo-Gamer-Network/shared-ui.git#v1.0.0
+```
+
+Ou no `package.json`:
+
+```json
+{
+  "dependencies": {
+    "@mundogamernetwork/shared-ui": "git+ssh://git@github.com/Mundo-Gamer-Network/shared-ui.git#v1.0.0"
+  }
+}
+```
+
+### 2. Configurar como Nuxt Layer
+
+No `nuxt.config.ts` do app:
+
+```ts
+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:
+
+```json
+{
+  "@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:
+
+```ts
+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`:
+
+```ts
+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:
+
+```bash
+# Se usa tag específica, mude a tag no package.json e reinstale:
+npm install git+ssh://git@github.com/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
+
+```env
+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
+```

package/components/PressKit/AssetGallery.vue

@@ -0,0 +1,349 @@
+<script setup lang="ts">
+interface Asset {
+	id: number;
+	type: string;
+	title?: string;
+	url: string;
+	thumbnail_url?: string;
+	file_size?: number;
+	mime_type?: string;
+	is_featured?: boolean;
+	sort_order?: number;
+}
+
+interface Props {
+	assets: Asset[];
+	allowDownload?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), { allowDownload: true });
+
+const { t } = useI18n();
+
+const selectedType = ref('all');
+const lightboxIndex = ref<number | null>(null);
+
+const assetTypes = computed(() => {
+	const types = new Set(props.assets.map(a => a.type));
+	return ['all', ...Array.from(types)];
+});
+
+const filteredAssets = computed(() => {
+	if (selectedType.value === 'all') return props.assets;
+	return props.assets.filter(a => a.type === selectedType.value);
+});
+
+const imageAssets = computed(() => filteredAssets.value.filter(a =>
+	['screenshot', 'artwork', 'logo', 'gif'].includes(a.type)
+));
+
+function openLightbox(idx: number) {
+	lightboxIndex.value = idx;
+}
+
+function closeLightbox() {
+	lightboxIndex.value = null;
+}
+
+function prevImage() {
+	if (lightboxIndex.value !== null && lightboxIndex.value > 0) {
+		lightboxIndex.value--;
+	}
+}
+
+function nextImage() {
+	if (lightboxIndex.value !== null && lightboxIndex.value < imageAssets.value.length - 1) {
+		lightboxIndex.value++;
+	}
+}
+
+function formatFileSize(bytes?: number) {
+	if (!bytes) return '';
+	if (bytes < 1024) return `${bytes} B`;
+	if (bytes < 1048576) return `${(bytes / 1024).toFixed(1)} KB`;
+	return `${(bytes / 1048576).toFixed(1)} MB`;
+}
+
+function downloadAsset(asset: Asset) {
+	window.open(asset.url, '_blank');
+}
+
+function downloadAll() {
+	props.assets.forEach(asset => {
+		window.open(asset.url, '_blank');
+	});
+}
+</script>
+
+<template>
+	<div class="asset-gallery">
+		<div class="gallery-header">
+			<h3 class="section-title">{{ $t('press_kit.assets') }}</h3>
+			<button v-if="allowDownload && assets.length" class="btn-download-all" @click="downloadAll">
+				<MGIcon icon="download" /> {{ $t('press_kit.download_all') }}
+			</button>
+		</div>
+
+		<div v-if="assetTypes.length > 2" class="type-filters">
+			<button
+				v-for="type in assetTypes"
+				:key="type"
+				:class="['filter-btn', { active: selectedType === type }]"
+				@click="selectedType = type"
+			>
+				{{ type === 'all' ? $t('press_kit.all') : type }}
+			</button>
+		</div>
+
+		<div class="gallery-grid">
+			<div
+				v-for="(asset, idx) in filteredAssets"
+				:key="asset.id"
+				class="asset-card"
+				@click="['screenshot', 'artwork', 'logo', 'gif'].includes(asset.type) ? openLightbox(imageAssets.indexOf(asset)) : downloadAsset(asset)"
+			>
+				<div class="asset-thumb">
+					<img
+						v-if="['screenshot', 'artwork', 'logo', 'gif'].includes(asset.type)"
+						:src="asset.thumbnail_url || asset.url"
+						:alt="asset.title || asset.type"
+						loading="lazy"
+					/>
+					<div v-else class="asset-icon">
+						<MGIcon :icon="asset.type === 'document' ? 'file' : 'film'" />
+					</div>
+					<span class="asset-type-badge">{{ asset.type }}</span>
+				</div>
+				<div class="asset-info">
+					<span class="asset-title">{{ asset.title || asset.type }}</span>
+					<span v-if="asset.file_size" class="asset-size">{{ formatFileSize(asset.file_size) }}</span>
+				</div>
+			</div>
+		</div>
+
+		<div v-if="!assets.length" class="empty-state">
+			{{ $t('press_kit.no_assets') }}
+		</div>
+
+		<!-- Lightbox -->
+		<div v-if="lightboxIndex !== null" class="lightbox" @click.self="closeLightbox">
+			<button class="lb-close" @click="closeLightbox">&times;</button>
+			<button v-if="lightboxIndex > 0" class="lb-nav lb-prev" @click="prevImage">&lsaquo;</button>
+			<img :src="imageAssets[lightboxIndex]?.url" :alt="imageAssets[lightboxIndex]?.title" />
+			<button v-if="lightboxIndex < imageAssets.length - 1" class="lb-nav lb-next" @click="nextImage">&rsaquo;</button>
+			<div class="lb-info">
+				<span>{{ imageAssets[lightboxIndex]?.title || imageAssets[lightboxIndex]?.type }}</span>
+				<button v-if="allowDownload" class="lb-download" @click="downloadAsset(imageAssets[lightboxIndex])">
+					<MGIcon icon="download" /> {{ $t('press_kit.download') }}
+				</button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.asset-gallery {
+	.gallery-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 16px;
+	}
+
+	.section-title {
+		font-size: 1.2rem;
+		font-weight: 700;
+		color: #fff;
+	}
+
+	.btn-download-all {
+		background: var(--color-primary, #FDB215);
+		color: #13161C;
+		border: none;
+		padding: 8px 16px;
+		font-weight: 600;
+		font-size: 0.85rem;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		transition: opacity 0.2s;
+
+		&:hover { opacity: 0.85; }
+	}
+
+	.type-filters {
+		display: flex;
+		gap: 8px;
+		margin-bottom: 16px;
+		flex-wrap: wrap;
+	}
+
+	.filter-btn {
+		background: #2a2d35;
+		color: #aaa;
+		border: 1px solid #3a3d45;
+		padding: 6px 14px;
+		font-size: 0.85rem;
+		cursor: pointer;
+		text-transform: capitalize;
+		transition: all 0.2s;
+
+		&.active {
+			background: var(--color-primary, #FDB215);
+			color: #13161C;
+			border-color: var(--color-primary, #FDB215);
+		}
+
+		&:hover:not(.active) {
+			background: #3a3d45;
+			color: #fff;
+		}
+	}
+
+	.gallery-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+		gap: 16px;
+	}
+
+	.asset-card {
+		background: #191B20;
+		border: 1px solid #1e2028;
+		overflow: hidden;
+		cursor: pointer;
+		transition: border-color 0.2s;
+
+		&:hover {
+			border-color: #3a3d45;
+		}
+	}
+
+	.asset-thumb {
+		position: relative;
+		aspect-ratio: 16 / 10;
+		background: #13161C;
+
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+	}
+
+	.asset-icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+		font-size: 2rem;
+		color: #555;
+	}
+
+	.asset-type-badge {
+		position: absolute;
+		top: 8px;
+		left: 8px;
+		background: rgba(0, 0, 0, 0.7);
+		color: #fff;
+		padding: 2px 8px;
+		font-size: 0.7rem;
+		text-transform: uppercase;
+	}
+
+	.asset-info {
+		padding: 10px 12px;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.asset-title {
+		font-size: 0.85rem;
+		color: #fff;
+		text-transform: capitalize;
+	}
+
+	.asset-size {
+		font-size: 0.75rem;
+		color: #888;
+	}
+
+	.empty-state {
+		text-align: center;
+		padding: 40px;
+		color: #666;
+	}
+
+	// Lightbox
+	.lightbox {
+		position: fixed;
+		inset: 0;
+		background: rgba(0, 0, 0, 0.95);
+		z-index: 9999;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		img {
+			max-width: 90vw;
+			max-height: 80vh;
+			object-fit: contain;
+		}
+	}
+
+	.lb-close {
+		position: absolute;
+		top: 20px;
+		right: 20px;
+		background: none;
+		border: none;
+		color: #fff;
+		font-size: 2.5rem;
+		cursor: pointer;
+		z-index: 1;
+	}
+
+	.lb-nav {
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		background: rgba(255, 255, 255, 0.1);
+		border: none;
+		color: #fff;
+		font-size: 3rem;
+		padding: 20px 12px;
+		cursor: pointer;
+		transition: background 0.2s;
+
+		&:hover { background: rgba(255, 255, 255, 0.2); }
+	}
+
+	.lb-prev { left: 20px; }
+	.lb-next { right: 20px; }
+
+	.lb-info {
+		position: absolute;
+		bottom: 20px;
+		left: 50%;
+		transform: translateX(-50%);
+		display: flex;
+		align-items: center;
+		gap: 16px;
+		color: #fff;
+	}
+
+	.lb-download {
+		background: var(--color-primary, #FDB215);
+		color: #13161C;
+		border: none;
+		padding: 6px 14px;
+		font-weight: 600;
+		font-size: 0.85rem;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		gap: 6px;
+	}
+}
+</style>