@xetwa/design-system 1.0.2

package/src/styles/countryThemes.ts

@@ -0,0 +1,79 @@
+export interface CountryThemeColors {
+  bg: string;
+  circle: string;
+  progressFill: string;
+  progressTrack: string;
+}
+
+const fallbackTheme: CountryThemeColors = {
+  bg: '#f2974b',
+  circle: '#f4a561',
+  progressFill: '#ffffff',
+  progressTrack: 'rgba(255,255,255,0.3)',
+};
+
+export const countryThemes: Record<string, CountryThemeColors> = {
+  // 1. Senegal
+  SN: { bg: '#16915a', circle: '#439c52', progressFill: '#fdef42', progressTrack: '#30a572' },
+  // 2. França
+  FR: { bg: '#00209F', circle: '#1a37a9', progressFill: '#E8001F', progressTrack: 'rgba(255, 255, 255, 0.3)' },
+  // 3. Bélgica
+  BE: { bg: '#1a1a1a', circle: '#2b2b2b', progressFill: '#FFE300', progressTrack: 'rgba(255, 255, 255, 0.2)' },
+  // 4. Suíça
+  CH: { bg: '#d52b1e', circle: '#e34034', progressFill: '#ffffff', progressTrack: 'rgba(255, 255, 255, 0.3)' },
+  // 5. Canadá
+  CA: { bg: '#d52b1e', circle: '#e34034', progressFill: '#ffffff', progressTrack: 'rgba(255, 255, 255, 0.3)' },
+  // 6. Côte d'Ivoire
+  CI: { bg: '#F77F00', circle: '#fa9020', progressFill: '#009E60', progressTrack: 'rgba(255, 255, 255, 0.3)' },
+  // 7. RD Congo
+  CD: { bg: '#00A3E0', circle: '#1bb0eb', progressFill: '#FFDC00', progressTrack: 'rgba(255, 255, 255, 0.3)' },
+  // 8. Luxemburgo
+  LU: { bg: '#00A1DE', circle: '#1bafee', progressFill: '#EF3340', progressTrack: 'rgba(255, 255, 255, 0.3)' },
+  // 9. Mónaco
+  MC: { bg: '#CE1126', circle: '#db2b3e', progressFill: '#ffffff', progressTrack: 'rgba(255, 255, 255, 0.3)' },
+  // 10. Camarões
+  CM: { bg: '#007A5E', circle: '#168a6f', progressFill: '#CE1126', progressTrack: 'rgba(255, 255, 255, 0.3)' },
+  // 11. Madagáscar
+  MG: { bg: '#007E3A', circle: '#188e4c', progressFill: '#FC3D32', progressTrack: 'rgba(255, 255, 255, 0.3)' },
+  // 12. Burquina Fasso
+  BF: { bg: '#EF2B2D', circle: '#f64042', progressFill: '#009E49', progressTrack: 'rgba(255, 255, 255, 0.3)' },
+  // 13. Níger
+  NE: { bg: '#E05206', circle: '#ec661f', progressFill: '#0DB02B', progressTrack: 'rgba(255, 255, 255, 0.3)' },
+  // 14. Mali
+  ML: { bg: '#14B53A', circle: '#2bc44e', progressFill: '#FCD116', progressTrack: 'rgba(255, 255, 255, 0.3)' },
+  // 15. Chade
+  TD: { bg: '#002664', circle: '#163a75', progressFill: '#FECB00', progressTrack: 'rgba(255, 255, 255, 0.3)' },
+  // 16. Guiné
+  GN: { bg: '#CE1126', circle: '#da293e', progressFill: '#FCD116', progressTrack: 'rgba(255, 255, 255, 0.3)' },
+  // 17. Ruanda
+  RW: { bg: '#00A1DE', circle: '#1dafee', progressFill: '#FAD201', progressTrack: 'rgba(255, 255, 255, 0.3)' },
+  // 18. Burundi
+  BI: { bg: '#CE1126', circle: '#da293e', progressFill: '#1EB53A', progressTrack: 'rgba(255, 255, 255, 0.3)' },
+  // 19. Benim
+  BJ: { bg: '#008751', circle: '#169661', progressFill: '#FCD116', progressTrack: 'rgba(255, 255, 255, 0.3)' },
+  // 20. Togo
+  TG: { bg: '#006A4E', circle: '#167b60', progressFill: '#FFCE00', progressTrack: 'rgba(255, 255, 255, 0.3)' },
+  // 21. República Centro-Africana
+  CF: { bg: '#003082', circle: '#184594', progressFill: '#289728', progressTrack: 'rgba(255, 255, 255, 0.3)' },
+  // 22. Congo
+  CG: { bg: '#009543', circle: '#18a356', progressFill: '#FBDE4A', progressTrack: 'rgba(255, 255, 255, 0.3)' },
+  // 23. Gabão
+  GA: { bg: '#009E60', circle: '#1aab70', progressFill: '#FCD116', progressTrack: 'rgba(255, 255, 255, 0.3)' },
+  // 24. Guiné Equatorial
+  GQ: { bg: '#3E9A00', circle: '#51a816', progressFill: '#E32118', progressTrack: 'rgba(255, 255, 255, 0.3)' },
+  // 25. Jibuti
+  DJ: { bg: '#6AB2E7', circle: '#7fbfef', progressFill: '#12AD2B', progressTrack: 'rgba(255, 255, 255, 0.3)' },
+  // 26. Comores
+  KM: { bg: '#3D8E33', circle: '#519e48', progressFill: '#FFC61E', progressTrack: 'rgba(255, 255, 255, 0.3)' },
+  // 27. Vanuatu
+  VU: { bg: '#D21034', circle: '#df2749', progressFill: '#FFCE00', progressTrack: 'rgba(255, 255, 255, 0.3)' },
+  // 28. Seicheles
+  SC: { bg: '#003D88', circle: '#18529b', progressFill: '#FCD856', progressTrack: 'rgba(255, 255, 255, 0.3)' },
+  // 29. Haiti
+  HT: { bg: '#00209F', circle: '#1a37a9', progressFill: '#D21034', progressTrack: 'rgba(255, 255, 255, 0.3)' },
+};
+
+export const getCountryTheme = (countryCode: string): CountryThemeColors => {
+  const normalized = countryCode.toUpperCase().trim();
+  return countryThemes[normalized] || fallbackTheme;
+};

package/src/styles/theme.ts

@@ -0,0 +1,297 @@
+export const theme = {
+  colors: {
+    // Paleta primária
+    primary: '#f2974b',      // CTAs, botão primário, destaque, progresso
+    primaryDark: '#cf7a30',  // Sombra do botão primário, ícone selecionado, hover
+    primaryLight: '#fef6ee', // Fundo de item selecionado, chip ativo
+    
+    // Escala de castanho (neutros)
+    brown: {
+      900: '#15100d', // Cor máxima de contraste, textos ou superfícies em modo escuro
+      800: '#51332d', // Texto principal, cabeçalhos e botões na variante invertida
+      700: '#3f2620', // Bordas internas e sombras profundas
+      600: '#6e5a4f', // Texto de apoio escuro, iconografia
+      500: '#9a8478', // Texto secundário, labels, placeholders
+      400: '#b9a392', // Ícones desativados, texto terciário
+      300: '#c3b1a4', // Ícones de navegação não selecionada
+      100: '#efe2d6', // Bordas, separadores e sombra do botão secundário
+      50: '#fdf3ea',  // Fundo de cards, chips neutros, áreas de destaque leve
+    },
+    
+    cream: '#fbf6f0',  // Fundo de ecrãs secundários
+    canvas: '#e7e5df', // Fundo do arquivo de design no Figma (não usado na app)
+    
+    // Semânticas & Base
+    success: '#16915a', // Sucesso, acertos, módulos concluídos
+    error: '#cf5b48',   // Erro, campo inválido
+    info: '#2a6fc2',    // Informação, link
+    black: '#000000',   // Preto Xetwa
+    white: '#ffffff',   // Fundo principal de ecrãs, cards
+    
+    // Light Theme
+    light: {
+      bgApp: '#fbf6f0',         // cream
+      bgSurface: '#ffffff',     // white
+      bgSurfaceHover: '#fdf3ea', // brown-50
+      borderColor: '#efe2d6',    // brown-100
+      textPrimary: '#51332d',    // brown-800
+      textSecondary: '#9a8478',  // brown-500
+      textTertiary: '#b9a392',   // brown-400
+      glassBg: 'rgba(255, 255, 255, 0.65)',
+      glassBorder: 'rgba(255, 255, 255, 0.4)',
+      primaryLight: '#fef6ee',   // primaryLight
+    },
+    
+    // Dark Theme
+    dark: {
+      bgApp: '#15100d',         // brown-900
+      bgSurface: '#51332d',     // brown-800
+      bgSurfaceHover: '#3f2620', // brown-700
+      borderColor: '#3f2620',    // brown-700
+      textPrimary: '#efe2d6',    // brown-100
+      textSecondary: '#b9a392',  // brown-400
+      textTertiary: '#9a8478',   // brown-500
+      glassBg: 'rgba(81, 51, 45, 0.65)',
+      glassBorder: 'rgba(255, 255, 255, 0.08)',
+      primaryLight: 'rgba(242, 151, 75, 0.15)', // transparent primary
+    }
+  },
+  
+  spacing: {
+    // Relatório de espaçamento base 4px
+    space1: 4,
+    space2: 8,
+    space3: 12,
+    space4: 16,
+    space5: 20,
+    space6: 24,
+    space8: 32,
+    space10: 40,
+    space12: 48,
+    space16: 64,
+
+    // Aliases antigos para retrocompatibilidade
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 20,
+    xxl: 24,
+    xxxl: 32,
+  },
+  
+  radius: {
+    xs: 6,
+    sm: 10,
+    md: 12,
+    lg: 16,
+    xl: 20,
+    xxl: 24,
+    screen: 34,
+    phone: 42,
+    full: 9999,
+  },
+  
+  shadows: {
+    xs: {
+      shadowColor: '#51332d',
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.08,
+      shadowRadius: 3,
+      elevation: 1,
+    },
+    sm: {
+      shadowColor: '#51332d',
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.10,
+      shadowRadius: 8,
+      elevation: 2,
+    },
+    md: {
+      shadowColor: '#51332d',
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.13,
+      shadowRadius: 14,
+      elevation: 4,
+    },
+    lg: {
+      shadowColor: '#51332d',
+      shadowOffset: { width: 0, height: 8 },
+      shadowOpacity: 0.18,
+      shadowRadius: 26,
+      elevation: 8,
+    },
+    xl: {
+      shadowColor: '#51332d',
+      shadowOffset: { width: 0, height: 18 },
+      shadowOpacity: 0.28,
+      shadowRadius: 40,
+      elevation: 16,
+    },
+    btnPrimary: {
+      shadowColor: '#cf7a30',
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 1,
+      shadowRadius: 0,
+    },
+    btnSecondary: {
+      shadowColor: '#efe2d6',
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 1,
+      shadowRadius: 0,
+    },
+    btnDark: {
+      shadowColor: '#3a241f',
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 1,
+      shadowRadius: 0,
+    },
+    focus: {
+      shadowColor: '#f2974b',
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 0.22,
+      shadowRadius: 3,
+      elevation: 3,
+    }
+  },
+  
+  fonts: {
+    title: 'Fredoka', // Fredoka – títulos
+    body: 'Nunito',   // Nunito – corpo e botões
+  },
+  
+  typography: {
+    display1: {
+      fontFamily: 'Fredoka',
+      fontSize: 28,
+      fontWeight: '700' as const,
+      lineHeight: 30,
+    },
+    display2: {
+      fontFamily: 'Fredoka',
+      fontSize: 24,
+      fontWeight: '700' as const,
+      lineHeight: 27,
+    },
+    h1: {
+      fontFamily: 'Fredoka',
+      fontSize: 22,
+      fontWeight: '700' as const,
+      lineHeight: 25,
+    },
+    h2: {
+      fontFamily: 'Fredoka',
+      fontSize: 18,
+      fontWeight: '600' as const,
+      lineHeight: 22,
+    },
+    h3: {
+      fontFamily: 'Fredoka',
+      fontSize: 16,
+      fontWeight: '600' as const,
+      lineHeight: 20,
+    },
+    label: {
+      fontFamily: 'Nunito',
+      fontSize: 10,
+      fontWeight: '800' as const,
+      lineHeight: 10,
+      letterSpacing: 1.2,
+    },
+    bodyLg: {
+      fontFamily: 'Nunito',
+      fontSize: 15,
+      fontWeight: '600' as const,
+      lineHeight: 23,
+    },
+    bodyMd: {
+      fontFamily: 'Nunito',
+      fontSize: 13.5,
+      fontWeight: '600' as const,
+      lineHeight: 20,
+    },
+    bodySm: {
+      fontFamily: 'Nunito',
+      fontSize: 12,
+      fontWeight: '700' as const,
+      lineHeight: 17,
+    },
+    caption: {
+      fontFamily: 'Nunito',
+      fontSize: 10,
+      fontWeight: '700' as const,
+      lineHeight: 14,
+    },
+    btnLg: {
+      fontFamily: 'Nunito',
+      fontSize: 16,
+      fontWeight: '800' as const,
+      lineHeight: 16,
+      letterSpacing: 0.64,
+    },
+    btnMd: {
+      fontFamily: 'Nunito',
+      fontSize: 14,
+      fontWeight: '800' as const,
+      lineHeight: 14,
+      letterSpacing: 0.56,
+    },
+    btnSm: {
+      fontFamily: 'Nunito',
+      fontSize: 12,
+      fontWeight: '800' as const,
+      lineHeight: 12,
+      letterSpacing: 0.48,
+    },
+  },
+  
+  breakpoints: {
+    xs: 0,
+    sm: 375,
+    md: 430,
+    lg: 768,
+    xl: 1024,
+    xxl: 1280,
+    xxxl: 1440,
+  },
+  
+  animations: {
+    easings: {
+      bounce: [0.34, 1.56, 0.64, 1] as [number, number, number, number],
+      smooth: [0.4, 0, 0.2, 1] as [number, number, number, number],
+      out: [0, 0, 0.2, 1] as [number, number, number, number],
+    },
+    durations: {
+      fast: 120,
+      base: 200,
+      medium: 300,
+      slow: 500,
+    }
+  },
+  
+  layout: {
+    mobileHeaderHeight: 52,
+    mobileTabHeight: 56,
+    desktopSidebarWidth: 220,
+    tabletHeaderHeight: 64,
+    maxContentWidth: 1200,
+  }
+};
+
+export type Theme = typeof theme;
+export type ColorTheme = typeof theme.colors.light;
+export type FontsTheme = typeof theme.fonts;
+export type BrownScale = typeof theme.colors.brown;
+export type TypographyTheme = typeof theme.typography;
+export type TypographyVariant = keyof TypographyTheme;
+export type ShadowsTheme = typeof theme.shadows;
+export type BreakpointsTheme = typeof theme.breakpoints;
+export type AnimationsTheme = typeof theme.animations;
+export type LayoutTheme = typeof theme.layout;
+export type SemanticColors = {
+  success: string;
+  error: string;
+  info: string;
+  black: string;
+  white: string;
+};

package/src/utils/iconMap.ts

@@ -0,0 +1,23 @@
+import { Play, Volume2, Volume1, ArrowRight, X, Check, ChevronRight, ChevronLeft, Info, AlertTriangle, Book } from 'lucide-react-native';
+
+/**
+ * Para evitar que o Vite e o Metro (React Native) tentem empacotar os 1400+ ícones 
+ * da biblioteca (o que causa crash de memória e aumenta muito o tamanho final da app),
+ * mapeamos aqui explicitamente os ícones que usamos.
+ * 
+ * Se precisar de um novo ícone da \`lucide-react-native\`, basta importá-lo acima
+ * e adicioná-lo a este objeto.
+ */
+export const IconMap: Record<string, any> = {
+  Play,
+  Volume1,
+  Volume2,
+  ArrowRight,
+  ChevronRight,
+  ChevronLeft,
+  X,
+  Check,
+  Info,
+  AlertTriangle,
+  Book,
+};

package/tsconfig.app.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023", "DOM"],
+    "module": "esnext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "module": "esnext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,51 @@
+/// <reference types="vitest/config" />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+import tailwindcss from '@tailwindcss/vite';
+
+// https://vite.dev/config/
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+import { playwright } from '@vitest/browser-playwright';
+const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+
+// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    extensions: ['.web.tsx', '.web.ts', '.web.jsx', '.web.js', '.tsx', '.ts', '.jsx', '.js', '.json'],
+    alias: {
+      'lucide-react-native': 'lucide-react',
+      'react-native': 'react-native-web',
+    },
+  },
+  optimizeDeps: {
+    esbuildOptions: {
+      resolveExtensions: ['.web.tsx', '.web.ts', '.web.jsx', '.web.js', '.tsx', '.ts', '.jsx', '.js', '.json'],
+    },
+  },
+  test: {
+    projects: [{
+      extends: true,
+      plugins: [
+        // The plugin will run tests for the stories defined in your Storybook config
+        // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+        storybookTest({
+          configDir: path.join(dirname, '.storybook')
+        })],
+      test: {
+        name: 'storybook',
+        browser: {
+          enabled: true,
+          headless: true,
+          provider: playwright({}),
+          instances: [{
+            browser: 'chromium'
+          }]
+        }
+      }
+    }]
+  }
+});

package/vitest.shims.d.ts

@@ -0,0 +1 @@
+/// <reference types="@vitest/browser-playwright" />