@xetwa/design-system 1.0.2

package/src/components/Cards/BoardingPassCard/BoardingPassCard.stories.tsx

@@ -0,0 +1,205 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+import { BoardingPassCard } from './BoardingPassCard';
+
+const meta = {
+  title: 'Components/Cards/BoardingPassCard',
+  component: BoardingPassCard,
+  parameters: { 
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'O **BoardingPassCard** exibe o nível atual do utilizador como se fosse um cartão de embarque.\n\nA sua cor superior altera consoante o `countryName` (ex: azul para França, verde escuro para Senegal).\n\n### Exemplo de Uso\n```tsx\n<BoardingPassCard \n  originCode="DKR"\n  originName="Dakar"\n  destCode="ABJ"\n  destName="Abidjan"\n  countryName="Côte d\'Ivoire"\n  countrySubtitle="Abidjan · nível B2"\n  modulesCount={4}\n  focusText="Oralidade rápida"\n/>\n```',
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    originCode: { control: 'text' },
+    originName: { control: 'text' },
+    destCode: { control: 'text' },
+    destName: { control: 'text' },
+    countryName: {
+      control: 'select',
+      options: [
+        'França',
+        'Bélgica',
+        'Suíça',
+        'Luxemburgo',
+        'Mónaco',
+        'Canadá',
+        "Côte d'Ivoire",
+        'Senegal',
+        'Camarões',
+        'República Democrática do Congo',
+        'Madagascar',
+        'Burkina Faso',
+        'Níger',
+        'Mali',
+        'Chade',
+        'Guiné',
+        'Ruanda',
+        'Burundi',
+        'Benim',
+        'Togo',
+        'República Centro-Africana',
+        'Congo',
+        'Gabão',
+        'Guiné Equatorial',
+        'Djibouti',
+        'Comores',
+        'Vanuatu',
+        'Seychelles',
+        'Haiti',
+      ],
+    },
+    countrySubtitle: { control: 'text' },
+    modulesCount: { control: 'number' },
+    focusText: { control: 'text' },
+    headerColor: { control: 'color' },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 24, maxWidth: 400, backgroundColor: '#f5f0eb' }}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+export const CoteDIvoire: Story = {
+  name: "Côte d'Ivoire (Laranja)",
+  args: {
+    originCode: 'DKR',
+    originName: 'Dakar',
+    destCode: 'ABJ',
+    destName: 'Abidjan',
+    countryName: "Côte d'Ivoire",
+    countrySubtitle: 'Abidjan · nível B2',
+    modulesCount: 4,
+    focusText: 'Oralidade rápida',
+  },
+};
+
+export const France: Story = {
+  name: "França (Azul)",
+  args: {
+    originCode: 'LIS',
+    originName: 'Lisboa',
+    destCode: 'CDG',
+    destName: 'Paris',
+    countryName: 'França',
+    countrySubtitle: 'Paris · nível A1',
+    modulesCount: 5,
+    focusText: 'Saudações & básico',
+  },
+};
+
+export const Senegal: Story = {
+  name: "Senegal (Verde)",
+  args: {
+    originCode: 'CDG',
+    originName: 'Paris',
+    destCode: 'DKR',
+    destName: 'Dakar',
+    countryName: 'Senegal',
+    countrySubtitle: 'Dakar · nível A2',
+    modulesCount: 3,
+    focusText: 'Mercado & Números',
+  },
+};
+
+export const Canada: Story = {
+  name: "Canadá (Vermelho)",
+  args: {
+    originCode: 'CDG',
+    originName: 'Paris',
+    destCode: 'YQB',
+    destName: 'Quebec',
+    countryName: 'Canadá',
+    countrySubtitle: 'Quebec · nível C1',
+    modulesCount: 6,
+    focusText: 'Expressões locais',
+  },
+};
+
+export const Grid: Story = {
+  args: {
+    originCode: '',
+    originName: '',
+    destCode: '',
+    destName: '',
+    countryName: '',
+    countrySubtitle: '',
+    modulesCount: 0,
+    focusText: '',
+  },
+  render: () => (
+    <View style={{ gap: 24 }}>
+      <BoardingPassCard 
+        originCode="DKR"
+        originName="Dakar"
+        destCode="ABJ"
+        destName="Abidjan"
+        countryName="Côte d'Ivoire"
+        countrySubtitle="Abidjan · nível B2"
+        modulesCount={4}
+        focusText="Oralidade rápida"
+      />
+      <BoardingPassCard 
+        originCode="LIS"
+        originName="Lisboa"
+        destCode="CDG"
+        destName="Paris"
+        countryName="França"
+        countrySubtitle="Paris · nível A1"
+        modulesCount={5}
+        focusText="Saudações & básico"
+      />
+      <BoardingPassCard 
+        originCode="CDG"
+        originName="Paris"
+        destCode="YQB"
+        destName="Quebec"
+        countryName="Canadá"
+        countrySubtitle="Quebec · nível C1"
+        modulesCount={6}
+        focusText="Expressões locais"
+      />
+      <BoardingPassCard 
+        originCode="BRU"
+        originName="Bruxelas"
+        destCode="CDG"
+        destName="Paris"
+        countryName="Bélgica"
+        countrySubtitle="Bruxelas · nível B1"
+        modulesCount={8}
+        focusText="Gramática avançada"
+      />
+      <BoardingPassCard 
+        originCode="CDG"
+        originName="Paris"
+        destCode="KGL"
+        destName="Kigali"
+        countryName="Ruanda"
+        countrySubtitle="Kigali · nível A2"
+        modulesCount={3}
+        focusText="Conversa informal"
+      />
+      <BoardingPassCard 
+        originCode="CDG"
+        originName="Paris"
+        destCode="DKR"
+        destName="Dakar"
+        countryName="Senegal"
+        countrySubtitle="Dakar · nível A2"
+        modulesCount={3}
+        focusText="Vocabulário de viagem"
+      />
+    </View>
+  ),
+};

package/src/components/Cards/BoardingPassCard/BoardingPassCard.tsx

@@ -0,0 +1,384 @@
+import { View, StyleSheet } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { theme } from '../../../styles/theme';
+import type { ReactNode } from 'react';
+import { Plane } from 'lucide-react-native';
+import { FlightIcon } from './FlightIcon';
+import { Flag } from '../../DataDisplay/Flag/Flag';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { Typography } from '../../Typography/Typography';
+
+/**
+ * Cartão de embarque (Boarding Pass) para exibir viagens entre países.
+ * Usado para a navegação de níveis/módulos baseada em destinos.
+ */
+export interface BoardingPassCardProps {
+  /** Código IATA ou sigla da origem (ex: LIS). */
+  originCode: string;
+  /** Nome da cidade de origem (ex: Lisboa). */
+  originName: string;
+  /** Código IATA ou sigla do destino (ex: CDG). */
+  destCode: string;
+  /** Nome da cidade de destino (ex: Paris). */
+  destName: string;
+  /** Nome do país de destino, usado também para determinar a cor principal do cartão e a bandeira se nenhuma for passada. */
+  countryName: string;
+  /** Subtítulo a exibir junto do nome do país (ex: 'Paris • nível A1'). */
+  countrySubtitle: string;
+  /** Nó opcional para substituir a bandeira nativa. */
+  flagIconNode?: ReactNode;
+  /** Número total de módulos desta viagem/nível. */
+  modulesCount: number;
+  /** O foco principal da aprendizagem (ex: 'Saudações & básico'). */
+  focusText: string;
+  /** Cor customizada para o cabeçalho (sobrepõe a cor deduzida do país). */
+  headerColor?: string;
+  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';
+};
+
+const COUNTRY_COLORS: Record<string, string> = {
+  FR: '#1E3A8A', // Deep Royal Blue (França)
+  BE: '#1A1A1A', // Velvet Charcoal (Bélgica)
+  CH: '#9B1B1B', // Rich Crimson (Suíça)
+  LU: '#0E7490', // Deep Teal / Slate Blue (Luxemburgo)
+  MC: '#BE123C', // Royal Scarlet (Mónaco)
+  CA: '#B91C1C', // Maple Crimson (Canadá)
+  CI: '#16915a', // Burnt Amber / Ochre (Côte d'Ivoire)
+  SN: '#0A5C36', // Deep Forest Pine (Senegal)
+  CM: '#0F5132', // Velvet Pine Green (Camarões)
+  CD: '#0284C7', // Vivid Cobalt (RD Congo)
+  MG: '#9F1239', // Roseate Crimson (Madagascar)
+  BF: '#0F766E', // Deep Spruce Teal (Burkina Faso)
+  NE: '#D97706', // Rich Gold Marigold (Níger)
+  ML: '#A16207', // Antique Brass / Ochre (Mali)
+  TD: '#172554', // Dark Midnight Navy (Chade)
+  GN: '#991B1B', // Carmine Red (Guiné)
+  RW: '#0891B2', // Clear Cerulean / Turquoise (Ruanda)
+  BI: '#14532D', // Imperial Emerald (Burundi)
+  BJ: '#15803D', // Saturated Basil (Benim)
+  TG: '#1B4332', // Jungle Spruce Green (Togo)
+  CF: '#1D4ED8', // Indigo Navy (República Centro-Africana)
+  CG: '#166534', // Saturated Emerald (Congo)
+  GA: '#0D9488', // Deep Tropical Teal (Gabão)
+  GQ: '#034F35', // Deep Jade Green (Guiné Equatorial)
+  DJ: '#0284C7', // Slate Blue (Djibouti)
+  KM: '#B45309', // Warm Ochre (Comores)
+  VU: '#7F1D1D', // Burgundy Maroon (Vanuatu)
+  SC: '#BE123C', // Deep Rose Scarlet (Seychelles)
+  HT: '#1E3A8A', // Deep Indigo (Haiti)
+};
+
+export const BoardingPassCard = ({
+  originCode,
+  originName,
+  destCode,
+  destName,
+  countryName,
+  countrySubtitle,
+  flagIconNode,
+  modulesCount,
+  focusText,
+  headerColor,
+  style,
+}: BoardingPassCardProps) => {
+  const { scale, scaleText } = useResponsive();
+
+  const getHeaderBgColor = () => {
+    if (headerColor) return headerColor;
+    const normalized = normalizeCountryCode(countryName);
+    return COUNTRY_COLORS[normalized] || '#0F766E'; // Fallback to premium Spruce Teal
+  };
+
+  const currentHeaderBg = getHeaderBgColor();
+
+  return (
+    <View style={[
+      styles.container,
+      {
+        borderRadius: scale(20),
+        minHeight: scale(210),
+      },
+      style
+    ]}>
+      {/* Top Section */}
+      <View style={[
+        styles.topSection, 
+        { 
+          backgroundColor: currentHeaderBg,
+          paddingTop: scale(16),
+          paddingBottom: scale(16),
+          paddingHorizontal: scale(18),
+        }
+      ]}>
+        <View style={[
+          styles.decorativeCircle,
+          {
+            width: scale(140),
+            height: scale(140),
+            borderRadius: scale(70),
+            top: scale(-40),
+            right: scale(-30),
+          }
+        ]} />
+
+        <View style={[styles.headerRow, { marginBottom: scale(16) }]}>
+          <Typography style={[styles.headerText, { fontSize: scaleText(10) }]}>CARTÃO DE EMBARQUE</Typography>
+          <View style={styles.headerPlaneContainer}>
+            <Plane stroke={theme.colors.white} strokeWidth={2.2} size={scale(22)} />
+          </View>
+        </View>
+
+        <View style={styles.routeRow}>
+          <View style={styles.cityCol}>
+            <Typography style={[styles.cityCode, { fontSize: scaleText(22) }]}>{originCode}</Typography>
+            <Typography style={[styles.cityName, { fontSize: scaleText(9) }]}>{originName}</Typography>
+          </View>
+
+          <View style={[styles.flightLineContainer, { height: scale(30), marginHorizontal: scale(12) }]}>
+            <View style={styles.dashedLine} />
+            <View style={styles.planeContainer}>
+              <FlightIcon color={theme.colors.white} size={scale(18)} />
+            </View>
+          </View>
+
+          <View style={[styles.cityCol, { alignItems: 'flex-end' }]}>
+            <Typography style={[styles.cityCode, { fontSize: scaleText(22) }]}>{destCode}</Typography>
+            <Typography style={[styles.cityName, { fontSize: scaleText(9) }]}>{destName}</Typography>
+          </View>
+        </View>
+      </View>
+
+      {/* Bottom Section */}
+      <View style={[
+        styles.bottomSection,
+        {
+          paddingVertical: scale(14),
+          paddingHorizontal: scale(18),
+        }
+      ]}>
+        <View style={styles.countryRow}>
+          <View style={[
+            styles.flagBox,
+            {
+              width: scale(40),
+              height: scale(40),
+              borderRadius: scale(20),
+              marginRight: scale(12),
+            }
+          ]}>
+            {flagIconNode ? flagIconNode : <Flag countryCode={countryName} size={scale(40)} />}
+          </View>
+          <View style={styles.countryContent}>
+            <Typography style={[styles.countryName, { fontSize: scaleText(17) }]}>{countryName}</Typography>
+            <Typography style={[styles.countrySubtitle, { fontSize: scaleText(11) }]}>{countrySubtitle}</Typography>
+          </View>
+        </View>
+
+        <View style={[
+          styles.divider,
+          {
+            marginTop: scale(12),
+            marginBottom: scale(12),
+          }
+        ]} />
+
+        <View style={[styles.footerRow, { gap: scale(14) }]}>
+          <View style={styles.footerCol}>
+            <Typography style={[styles.footerLabel, { fontSize: scaleText(9) }]}>MÓDULOS</Typography>
+            <Typography style={[styles.footerValue, { fontSize: scaleText(16) }]}>{modulesCount}</Typography>
+          </View>
+          <View style={styles.footerCol}>
+            <Typography style={[styles.footerLabel, { fontSize: scaleText(9) }]}>FOCO</Typography>
+            <Typography style={[styles.footerValue, { fontSize: scaleText(16) }]}>{focusText}</Typography>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 20,
+    backgroundColor: theme.colors.white,
+    overflow: 'hidden',
+    minHeight: 230,
+    ...theme.shadows.lg,
+  },
+  topSection: {
+    paddingTop: 16,
+    paddingBottom: 16,
+    paddingHorizontal: 18,
+    position: 'relative',
+    overflow: 'hidden',
+  },
+  decorativeCircle: {
+    position: 'absolute',
+    width: 140,
+    height: 140,
+    borderRadius: 70,
+    backgroundColor: 'rgba(255, 255, 255, 0.16)',
+    top: -40,
+    right: -30,
+  },
+  headerRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  headerPlaneContainer: {
+    transform: [{ rotate: '0deg' }],
+  },
+  headerText: {
+
+    fontSize: 10,
+    letterSpacing: 1.2,
+    textTransform: 'uppercase',
+    color: 'rgba(255, 255, 255, 0.75)',
+  },
+  routeRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  cityCol: {
+    alignItems: 'flex-start',
+  },
+  cityCode: {
+
+    fontSize: 22,
+    color: theme.colors.white,
+  },
+  cityName: {
+
+    fontSize: 9,
+    color: 'rgba(255, 255, 255, 0.75)',
+    marginTop: 2,
+  },
+  flightLineContainer: {
+    flexDirection: 'row',
+    flex: 1,
+    height: 30,
+    marginHorizontal: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+  },
+  dashedLine: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    borderTopWidth: 2,
+    borderStyle: 'dashed' as const,
+    borderColor: 'rgba(255, 255, 255, 0.5)',
+    height: 0,
+    alignSelf: 'center',
+  },
+  planeContainer: {
+    transform: [{ rotate: '135deg' }],
+    marginHorizontal: 8,
+    alignSelf: 'center',
+    backgroundColor: 'transparent',
+  },
+  bottomSection: {
+    paddingVertical: 14,
+    paddingHorizontal: 18,
+    backgroundColor: theme.colors.white,
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+  countryRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  flagBox: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    marginRight: 12,
+    borderWidth: 2.5,
+    borderColor: theme.colors.white,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: theme.colors.white,
+    overflow: 'hidden',
+    ...theme.shadows.sm,
+  },
+  countryContent: {
+    flex: 1,
+  },
+  countryName: {
+
+    fontSize: 17,
+    color: '#51332d',
+    marginBottom: 2,
+  },
+  countrySubtitle: {
+
+    fontSize: 11,
+    color: '#9a8478',
+  },
+  divider: {
+    borderTopWidth: 1.5,
+    borderColor: '#f3e7da',
+    marginTop: 12,
+    marginBottom: 12,
+  },
+  footerRow: {
+    flexDirection: 'row',
+    gap: 14,
+  },
+  footerCol: {
+    alignItems: 'flex-start',
+    flex: 1,
+  },
+  footerLabel: {
+
+    fontSize: 9,
+    textTransform: 'uppercase',
+    color: '#b9a392',
+    marginBottom: 4,
+  },
+  footerValue: {
+
+    fontSize: 16,
+    color: '#51332d',
+  },
+});

package/src/components/Cards/BoardingPassCard/FlightIcon.tsx

@@ -0,0 +1,21 @@
+import Svg, { Path } from 'react-native-svg';
+
+interface FlightIconProps {
+  color: string;
+  size: number;
+}
+
+export const FlightIcon = ({ color, size }: FlightIconProps) => {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+    >
+      <Path
+        fill={color}
+        d="M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z M2.5 19h19v2h-19z"
+      />
+    </Svg>
+  );
+};

package/src/components/Cards/BoardingPassCard/FlightIcon.web.tsx

@@ -0,0 +1,18 @@
+interface FlightIconProps {
+  color: string;
+  size: number;
+}
+
+export const FlightIcon = ({ color, size }: FlightIconProps) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill={color}
+      style={{ display: 'block' }}
+    >
+      <path d="M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z M2.5 19h19v2h-19z" />
+    </svg>
+  );
+};