@xetwa/design-system 1.0.2

package/src/components/DataDisplay/Flag/Flag.tsx

@@ -0,0 +1,347 @@
+import { View } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import Svg, { Path, Circle } from 'react-native-svg';
+
+/**
+ * Exibe a bandeira circular de um país através do seu código ou nome.
+ */
+export interface FlagProps {
+  /** Código ISO do país (ex: 'FR') ou nome em PT/EN. */
+  countryCode: string;
+  /** Tamanho da bandeira em píxeis. */
+  size?: number;
+  style?: ViewStyle | ViewStyle[];
+}
+
+const normalizeCountryCode = (input: string): string => {
+  const code = input.toLowerCase().trim();
+  
+  if (code === 'fr' || code === 'fra' || code === 'frança' || code === 'france') return 'FR';
+  if (code === 'be' || code === 'bel' || code === 'bélgica' || code === 'belgium') return 'BE';
+  if (code === 'ch' || code === 'che' || code === 'suíça' || code === 'switzerland') return 'CH';
+  if (code === 'lu' || code === 'lux' || code === 'luxemburgo' || code === 'luxembourg') return 'LU';
+  if (code === 'mc' || code === 'mco' || code === 'mónaco' || code === 'monaco') return 'MC';
+  if (code === 'ca' || code === 'can' || code === 'canadá' || code === 'canada') return 'CA';
+  if (code === 'ci' || code === 'civ' || code === "côte d'ivoire" || code === "cote d'ivoire" || code === 'marfim' || code === 'costa do marfim') return 'CI';
+  if (code === 'sn' || code === 'sen' || code === 'senegal') return 'SN';
+  if (code === 'cm' || code === 'cmr' || code === 'camarões' || code === 'cameroon') return 'CM';
+  if (code === 'cd' || code === 'cod' || code === 'rd congo' || code === 'republica democratica do congo' || code === 'república democrática do congo' || code === 'dr congo') return 'CD';
+  if (code === 'mg' || code === 'mdg' || code === 'madagascar') return 'MG';
+  if (code === 'bf' || code === 'bfa' || code === 'burkina faso') return 'BF';
+  if (code === 'ne' || code === 'ner' || code === 'níger' || code === 'niger') return 'NE';
+  if (code === 'ml' || code === 'mli' || code === 'mali') return 'ML';
+  if (code === 'td' || code === 'tcd' || code === 'chade' || code === 'chad') return 'TD';
+  if (code === 'gn' || code === 'gin' || code === 'guiné' || code === 'guinea') return 'GN';
+  if (code === 'rw' || code === 'rwa' || code === 'ruanda' || code === 'rwanda') return 'RW';
+  if (code === 'bi' || code === 'bdi' || code === 'burundi') return 'BI';
+  if (code === 'bj' || code === 'ben' || code === 'benim' || code === 'benin') return 'BJ';
+  if (code === 'tg' || code === 'tgo' || code === 'togo') return 'TG';
+  if (code === 'cf' || code === 'caf' || code === 'república centro-africana' || code === 'republica centro-africana' || code === 'central african republic') return 'CF';
+  if (code === 'cg' || code === 'cog' || code === 'congo' || code === 'república do congo' || code === 'republica do congo') return 'CG';
+  if (code === 'ga' || code === 'gab' || code === 'gabão' || code === 'gabon') return 'GA';
+  if (code === 'gq' || code === 'gnq' || code === 'guiné equatorial' || code === 'guine equatorial' || code === 'equatorial guinea') return 'GQ';
+  if (code === 'dj' || code === 'dji' || code === 'djibouti') return 'DJ';
+  if (code === 'km' || code === 'com' || code === 'comores' || code === 'comoros') return 'KM';
+  if (code === 'vu' || code === 'vut' || code === 'vanuatu') return 'VU';
+  if (code === 'sc' || code === 'syc' || code === 'seychelles') return 'SC';
+  if (code === 'ht' || code === 'hti' || code === 'haiti') return 'HT';
+
+  return 'UNKNOWN';
+};
+
+export const Flag = ({ countryCode, size = 40, style }: FlagProps) => {
+  const normalized = normalizeCountryCode(countryCode);
+
+  const renderFlagContent = () => {
+    switch (normalized) {
+      case 'FR': // França
+        return (
+          <>
+            <Path fill="#00209F" d="M0 0h170.7v512H0z"/>
+            <Path fill="#fff" d="M170.7 0h170.6v512H170.7z"/>
+            <Path fill="#E8001F" d="M341.3 0H512v512H341.3z"/>
+          </>
+        );
+      case 'BE': // Bélgica
+        return (
+          <>
+            <Path fill="#000" d="M0 0h170.7v512H0z"/>
+            <Path fill="#FFE300" d="M170.7 0h170.6v512H170.7z"/>
+            <Path fill="#E8001F" d="M341.3 0H512v512H341.3z"/>
+          </>
+        );
+      case 'CH': // Suíça
+        return (
+          <>
+            <Path fill="#d52b1e" d="M0 0h512v512H0z"/>
+            <Path fill="#fff" d="M236 116h40v280h-40zM116 236h280v-40H116z"/>
+          </>
+        );
+      case 'LU': // Luxemburgo
+        return (
+          <>
+            <Path fill="#E8001F" d="M0 0h512v170.7H0z"/>
+            <Path fill="#fff" d="M0 170.7h512v170.6H0z"/>
+            <Path fill="#419ad6" d="M0 341.3h512V512H0z"/>
+          </>
+        );
+      case 'MC': // Mónaco
+        return (
+          <>
+            <Path fill="#E8001F" d="M0 0h512v256H0z"/>
+            <Path fill="#fff" d="M0 256h512v256H0z"/>
+          </>
+        );
+      case 'CA': // Canadá
+        return (
+          <>
+            <Path fill="#fff" d="M128 0h256v512H128z"/>
+            <Path fill="#d52b1e" d="M0 0h128v512H0zm384 0h128v512H384z"/>
+            <Path fill="#d52b1e" d="M135.3 247.4l-14 4.8 65.4 57.5c5 14.8-1.7 19.1-6 26.9l71-9-1.8 71.5 14.8-.5-3.3-70.9 71.2 8.4c-4.4-9.3-8.3-14.2-4.3-29l65.4-54.5-11.4-4.1c-9.4-7.3 4-34.8 6-52.2 0 0-38.1 13.1-40.6 6.2l-9.9-18.5-34.6 38c-3.8 1-5.4-.6-6.3-3.8l16-79.7-25.4 14.3q-3.3 1.3-5.6-2.4l-24.5-49-25.2 50.9q-3 2.7-5.4.8l-24.2-13.6 14.5 79.2c-1.1 3-3.9 4-7.1 2.3l-33.3-37.8c-4.3 7-7.3 18.4-13 21-5.7 2.3-25-4.9-37.9-7.7 4.4 15.9 18.2 42.3 9.5 51z"/>
+          </>
+        );
+      case 'CI': // Côte d'Ivoire
+        return (
+          <>
+            <Path fill="#F77F00" d="M0 0h170.7v512H0z"/>
+            <Path fill="#fff" d="M170.7 0h170.6v512H170.7z"/>
+            <Path fill="#009E60" d="M341.3 0H512v512H341.3z"/>
+          </>
+        );
+      case 'SN': // Senegal
+        return (
+          <>
+            <Path fill="#00E070" d="M0 0h170.7v512H0z"/>
+            <Path fill="#FFDC00" d="M170.7 0h170.6v512H170.7z"/>
+            <Path fill="#E8001F" d="M341.3 0H512v512H341.3z"/>
+            <Path fill="#00E070" d="M256 180l16 48h50l-40 30 15 48-41-30-41 30 15-48-40-30h50z"/>
+          </>
+        );
+      case 'CM': // Camarões
+        return (
+          <>
+            <Path fill="#00E070" d="M0 0h170.7v512H0z"/>
+            <Path fill="#E8001F" d="M170.7 0h170.6v512H170.7z"/>
+            <Path fill="#FFE300" d="M341.3 0H512v512H341.3z"/>
+            <Path fill="#FFE300" d="M256 180l16 48h50l-40 30 15 48-41-30-41 30 15-48-40-30h50z"/>
+          </>
+        );
+      case 'CD': // RD Congo
+        return (
+          <>
+            <Path fill="#00A3E0" d="M0 0h512v512H0z"/>
+            <Path fill="#FFDC00" d="M0 400L400 0h70L0 470z"/>
+            <Path fill="#E8001F" d="M0 415L415 0h40L0 455z"/>
+            <Path fill="#FFDC00" d="M70 60l8 24h25l-20 15 8 24-21-15-21 15 8-24-20-15h25z"/>
+          </>
+        );
+      case 'MG': // Madagascar
+        return (
+          <>
+            <Path fill="#fff" d="M0 0h170.7v512H0z"/>
+            <Path fill="#E8001F" d="M170.7 0H512v256H170.7z"/>
+            <Path fill="#009E60" d="M170.7 256H512v256H170.7z"/>
+          </>
+        );
+      case 'BF': // Burkina Faso
+        return (
+          <>
+            <Path fill="#E8001F" d="M0 0h512v256H0z"/>
+            <Path fill="#009E60" d="M0 256h512v256H0z"/>
+            <Path fill="#FFDC00" d="M256 210l10 30h32l-26 18 10 30-26-18-26 18 10-30-26-18h32z"/>
+          </>
+        );
+      case 'NE': // Níger
+        return (
+          <>
+            <Path fill="#F77F00" d="M0 0h512v170.7H0z"/>
+            <Path fill="#fff" d="M0 170.7h512v170.6H0z"/>
+            <Path fill="#009E60" d="M0 341.3h512V512H0z"/>
+            <Circle cx="256" cy="256" r="50" fill="#F77F00"/>
+          </>
+        );
+      case 'ML': // Mali
+        return (
+          <>
+            <Path fill="#00E070" d="M0 0h170.7v512H0z"/>
+            <Path fill="#FFDC00" d="M170.7 0h170.6v512H170.7z"/>
+            <Path fill="#E8001F" d="M341.3 0H512v512H341.3z"/>
+          </>
+        );
+      case 'TD': // Chade
+        return (
+          <>
+            <Path fill="#00209F" d="M0 0h170.7v512H0z"/>
+            <Path fill="#FFDC00" d="M170.7 0h170.6v512H170.7z"/>
+            <Path fill="#E8001F" d="M341.3 0H512v512H341.3z"/>
+          </>
+        );
+      case 'GN': // Guiné
+        return (
+          <>
+            <Path fill="#E8001F" d="M0 0h170.7v512H0z"/>
+            <Path fill="#FFDC00" d="M170.7 0h170.6v512H170.7z"/>
+            <Path fill="#00E070" d="M341.3 0H512v512H341.3z"/>
+          </>
+        );
+      case 'RW': // Ruanda
+        return (
+          <>
+            <Path fill="#00A3E0" d="M0 0h512v256H0z"/>
+            <Path fill="#FFDC00" d="M0 256h512v128H0z"/>
+            <Path fill="#009E60" d="M0 384h512v128H0z"/>
+            <Circle cx="400" cy="80" r="30" fill="#FFDC00"/>
+          </>
+        );
+      case 'BI': // Burundi
+        return (
+          <>
+            <Path fill="#E8001F" d="M0 0h512v512H0z"/>
+            <Path fill="#009E60" d="M0 0l256 256L0 512zm512 0L256 256l256 256z"/>
+            <Path d="M0 0l512 512M0 512l512-512" stroke="#fff" strokeWidth="40"/>
+            <Circle cx="256" cy="256" r="80" fill="#fff"/>
+            <Circle cx="256" cy="225" r="10" fill="#e8001f" stroke="#009e60" strokeWidth="2"/>
+            <Circle cx="226" cy="275" r="10" fill="#e8001f" stroke="#009e60" strokeWidth="2"/>
+            <Circle cx="286" cy="275" r="10" fill="#e8001f" stroke="#009e60" strokeWidth="2"/>
+          </>
+        );
+      case 'BJ': // Benim
+        return (
+          <>
+            <Path fill="#00E070" d="M0 0h192v512H0z"/>
+            <Path fill="#FFDC00" d="M192 0h320v256H192z"/>
+            <Path fill="#E8001F" d="M192 256h320v256H192z"/>
+          </>
+        );
+      case 'TG': // Togo
+        return (
+          <>
+            <Path fill="#FFDC00" d="M0 0h512v512H0z"/>
+            <Path fill="#009E60" d="M0 0h512v102.4H0zm0 204.8h512v102.4H0zm0 204.8h512v102.4H0z"/>
+            <Path fill="#E8001F" d="M0 0h204.8v204.8H0z"/>
+            <Path fill="#fff" d="M102.4 75l10 30h32l-26 18 10 30-26-18-26 18 10-30-26-18h32z"/>
+          </>
+        );
+      case 'CF': // Rep. Centro-Africana
+        return (
+          <>
+            <Path fill="#00209F" d="M0 0h512v128H0z"/>
+            <Path fill="#fff" d="M0 128h512v128H0z"/>
+            <Path fill="#009E60" d="M0 256h512v128H0z"/>
+            <Path fill="#FFDC00" d="M0 384h512v128H0z"/>
+            <Path fill="#E8001F" d="M213.3 0h85.4v512h-85.4z"/>
+            <Path fill="#FFDC00" d="M60 25l6 18h19l-15 11 6 18-15-11-15 11 6-18-15-11h19z"/>
+          </>
+        );
+      case 'CG': // Congo
+        return (
+          <>
+            <Path fill="#FFDC00" d="M0 0h512v512H0z"/>
+            <Path fill="#009E60" d="M0 0h341.3L0 341.3z"/>
+            <Path fill="#E8001F" d="M512 512L170.7 512L512 170.7z"/>
+          </>
+        );
+      case 'GA': // Gabão
+        return (
+          <>
+            <Path fill="#00E070" d="M0 0h512v170.7H0z"/>
+            <Path fill="#FFDC00" d="M0 170.7h512v170.6H0z"/>
+            <Path fill="#00209F" d="M0 341.3h512V512H0z"/>
+          </>
+        );
+      case 'GQ': // Guiné Equatorial
+        return (
+          <>
+            <Path fill="#009E60" d="M0 0h512v170.7H0z"/>
+            <Path fill="#fff" d="M0 170.7h512v170.6H0z"/>
+            <Path fill="#E8001F" d="M0 341.3h512V512H0z"/>
+            <Path fill="#00A3E0" d="M0 0l170.7 256L0 512z"/>
+            <Path fill="#888" d="M246 236h20v40h-20z"/>
+            <Path fill="#009E60" d="M256 216c5 0 5 15 5 20h-10c0-5 0-20 5-20z"/>
+          </>
+        );
+      case 'DJ': // Djibouti
+        return (
+          <>
+            <Path fill="#00A3E0" d="M0 0h512v256H0z"/>
+            <Path fill="#009E60" d="M0 256h512v256H0z"/>
+            <Path fill="#fff" d="M0 0l216 256L0 512z"/>
+            <Path fill="#E8001F" d="M70 230l5 15h16l-13 9 5 15-13-9-13 9 5-15-13-9h16z"/>
+          </>
+        );
+      case 'KM': // Comores
+        return (
+          <>
+            <Path fill="#FFDC00" d="M0 0h512v128H0z"/>
+            <Path fill="#fff" d="M0 128h512v128H0z"/>
+            <Path fill="#E8001F" d="M0 256h512v128H0z"/>
+            <Path fill="#00209F" d="M0 384h512v128H0z"/>
+            <Path fill="#009E60" d="M0 0l216 256L0 512z"/>
+            <Path fill="#fff" d="M45 220c15 0 25 15 25 36s-10 36-25 36c20 0 30-15 30-36s-10-36-30-36z"/>
+            <Circle cx="76" cy="211" r="3" fill="#fff"/>
+            <Circle cx="79" cy="236" r="3" fill="#fff"/>
+            <Circle cx="79" cy="261" r="3" fill="#fff"/>
+            <Circle cx="76" cy="286" r="3" fill="#fff"/>
+          </>
+        );
+      case 'VU': // Vanuatu
+        return (
+          <>
+            <Path fill="#E8001F" d="M0 0h512v256H0z"/>
+            <Path fill="#009E60" d="M0 256h512v256H0z"/>
+            <Path fill="#FFDC00" d="M0 0l250 256L0 512z"/>
+            <Path fill="#000" d="M0 30l210 226L0 482z"/>
+            <Path fill="#FFDC00" d="M220 240h292v32H220z"/>
+            <Path fill="#000" d="M230 246h282v20H230z"/>
+            <Circle cx="65" cy="256" r="30" fill="none" stroke="#FFDC00" strokeWidth="6" strokeDasharray="140 50"/>
+          </>
+        );
+      case 'SC': // Seychelles
+        return (
+          <>
+            <Path fill="#00209F" d="M0 512L0 0h170.7z"/>
+            <Path fill="#FFDC00" d="M0 512L170.7 0h170.6z"/>
+            <Path fill="#E8001F" d="M0 512L341.3 0H512v170.7z"/>
+            <Path fill="#fff" d="M0 512L512 170.7v170.6z"/>
+            <Path fill="#009E60" d="M0 512L512 341.3V512z"/>
+          </>
+        );
+      case 'HT': // Haiti
+        return (
+          <>
+            <Path fill="#00209F" d="M0 0h512v256H0z"/>
+            <Path fill="#E8001F" d="M0 256h512v256H0z"/>
+            <Path fill="#fff" d="M220 220h72v72H220z"/>
+            <Path fill="#51332d" d="M253 235h6v20h-6z"/>
+            <Path fill="#009E60" d="M256 235c-8-6-15 4-15 4s7 3 15-4zm0 0c8-6 15 4 15 4s-7 3-15-4z"/>
+          </>
+        );
+      default: // Fallback gray
+        return (
+          <Path fill="#ccc" d="M0 0h512v512H0z"/>
+        );
+    }
+  };
+
+  return (
+    <View
+      style={[
+        {
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          overflow: 'hidden',
+        },
+        style,
+      ]}
+    >
+      <Svg
+        width={size}
+        height={size}
+        viewBox="0 0 512 512"
+      >
+        {renderFlagContent()}
+      </Svg>
+    </View>
+  );
+};