@xetwa/design-system 1.0.2

package/src/components/Cards/Passport/PassportIDPage.tsx

@@ -0,0 +1,217 @@
+import { View, StyleSheet, Platform } from 'react-native';
+import Svg, { Line, Path } from 'react-native-svg';
+import { theme } from '../../../styles/theme';
+import { Typography } from '../../Typography/Typography';
+import { useResponsive } from '../../../hooks/useResponsive';
+
+export interface PassportUserData {
+  surname: string;
+  givenName: string;
+  nationality: string;
+  level: string;
+  birthDate: string;
+  birthPlace: string;
+  issueDate: string;
+  passportNo: string;
+  signature: string;
+  mrzLine1: string;
+  mrzLine2: string;
+}
+
+export interface PassportIDPageProps {
+  user: PassportUserData;
+}
+
+export const PassportIDPage = ({ user }: PassportIDPageProps) => {
+  const { scale, scaleText } = useResponsive();
+
+  // Simple barcode generator for visual effect
+  const Barcode = () => (
+    <Svg width="100%" height={scale(24)} viewBox="0 0 100 24" preserveAspectRatio="none">
+      {Array.from({ length: 30 }).map((_, i) => {
+        const x = i * 3.3 + (Math.random() * 1.5);
+        const w = 1 + Math.random() * 2;
+        return <Line key={i} x1={x} y1="0" x2={x} y2="24" stroke={theme.colors.brown[300]} strokeWidth={w} />;
+      })}
+    </Svg>
+  );
+
+  return (
+    <View style={styles.container}>
+      {/* Dark spine/binder on the left */}
+      <View style={[styles.spine, { width: scale(32) }]} />
+      
+      {/* Main page content */}
+      <View style={styles.pageContent}>
+        {/* Header */}
+        <View style={[styles.header, { padding: scale(12) }]}>
+          <Typography style={[styles.headerTitle, { fontSize: scaleText(14) }]}>PASSEPORT</Typography>
+          <Typography style={[styles.headerTitle, { fontSize: scaleText(10) }]}>XTW · TYPE P</Typography>
+        </View>
+
+        <View style={[styles.body, { padding: scale(16) }]}>
+          
+          <View style={[styles.row, { gap: scale(16) }]}>
+            {/* Left Column: Photo & Barcode */}
+            <View style={[styles.photoColumn, { width: scale(100) }]}>
+              <View style={[styles.photoPlaceholder, { height: scale(120), borderRadius: scale(8), marginBottom: scale(8) }]}>
+                {/* Smiley face SVG */}
+                <Svg width={scale(60)} height={scale(60)} viewBox="0 0 60 60" fill="none">
+                  <Path d="M30 60C46.5685 60 60 46.5685 60 30C60 13.4315 46.5685 0 30 0C13.4315 0 0 13.4315 0 30C0 46.5685 13.4315 60 30 60Z" fill={theme.colors.brown[800]} />
+                  <Path d="M16 24C18.2091 24 20 22.2091 20 20C20 17.7909 18.2091 16 16 16C13.7909 16 12 17.7909 12 20C12 22.2091 13.7909 24 16 24Z" fill="white" />
+                  <Path d="M44 24C46.2091 24 48 22.2091 48 20C48 17.7909 46.2091 16 44 16C41.7909 16 40 17.7909 40 20C40 22.2091 41.7909 24 44 24Z" fill="white" />
+                  <Path d="M14 36C14 36 22 46 30 46C38 46 46 36 46 36L46 42C46 42 38 52 30 52C22 52 14 42 14 42L14 36Z" fill={theme.colors.brown[100]} />
+                </Svg>
+              </View>
+              <Barcode />
+            </View>
+
+            {/* Right Column: User Data */}
+            <View style={styles.dataColumn}>
+              <View style={{ marginBottom: scale(12) }}>
+                <Typography style={[styles.label, { fontSize: scaleText(9) }]}>NOM / SURNAME</Typography>
+                <Typography style={[styles.value, { fontSize: scaleText(16) }]}>{user.surname}</Typography>
+              </View>
+
+              <View style={{ marginBottom: scale(12) }}>
+                <Typography style={[styles.label, { fontSize: scaleText(9) }]}>PRÉNOM / GIVEN NAME</Typography>
+                <Typography style={[styles.value, { fontSize: scaleText(16) }]}>{user.givenName}</Typography>
+              </View>
+
+              <View style={[styles.row, { justifyContent: 'space-between' }]}>
+                <View>
+                  <Typography style={[styles.label, { fontSize: scaleText(9) }]}>NATIONALITÉ</Typography>
+                  <Typography style={[styles.value, { fontSize: scaleText(12) }]}>{user.nationality}</Typography>
+                </View>
+                <View>
+                  <Typography style={[styles.label, { fontSize: scaleText(9) }]}>NIVEAU</Typography>
+                  <Typography style={[styles.value, { fontSize: scaleText(12), color: theme.colors.primary }]}>{user.level}</Typography>
+                </View>
+              </View>
+            </View>
+          </View>
+
+          {/* Lower Data Row */}
+          <View style={[styles.row, { marginTop: scale(24), justifyContent: 'space-between' }]}>
+            <View>
+              <Typography style={[styles.label, { fontSize: scaleText(9) }]}>DATE DE NAISS.</Typography>
+              <Typography style={[styles.value, { fontSize: scaleText(12) }]}>{user.birthDate}</Typography>
+            </View>
+            <View>
+              <Typography style={[styles.label, { fontSize: scaleText(9) }]}>LIEU</Typography>
+              <Typography style={[styles.value, { fontSize: scaleText(12) }]}>{user.birthPlace}</Typography>
+            </View>
+            <View>
+              <Typography style={[styles.label, { fontSize: scaleText(9) }]}>ÉMIS LE</Typography>
+              <Typography style={[styles.value, { fontSize: scaleText(12) }]}>{user.issueDate}</Typography>
+            </View>
+          </View>
+
+          {/* Passport Number and Signature */}
+          <View style={[styles.row, { marginTop: scale(24), alignItems: 'flex-end', justifyContent: 'space-between' }]}>
+            <View>
+              <Typography style={[styles.label, { fontSize: scaleText(9) }]}>PASSEPORT N°</Typography>
+              <Typography style={[styles.value, { fontSize: scaleText(18), color: theme.colors.primary }]}>{user.passportNo}</Typography>
+            </View>
+            <View>
+              <Typography style={[styles.signature, { fontSize: scaleText(24) }]}>{user.signature}</Typography>
+            </View>
+          </View>
+        </View>
+
+        {/* MRZ Zone at the bottom */}
+        <View style={[styles.mrzContainer, { padding: scale(16), paddingTop: scale(12) }]}>
+          <Typography style={[styles.mrzText, { fontSize: scaleText(11) }]}>{user.mrzLine1}</Typography>
+          <Typography style={[styles.mrzText, { fontSize: scaleText(11) }]}>{user.mrzLine2}</Typography>
+        </View>
+
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+    backgroundColor: '#efe2d6', // Cream page background
+    borderRadius: 16,
+    overflow: 'hidden',
+    shadowColor: '#51332d',
+    shadowOffset: { width: 0, height: 12 },
+    shadowOpacity: 0.15,
+    shadowRadius: 24,
+    elevation: 8,
+  },
+  spine: {
+    backgroundColor: '#4e3227', // Dark brown binding
+    height: '100%',
+    borderRightWidth: 1,
+    borderRightColor: 'rgba(0,0,0,0.2)',
+  },
+  pageContent: {
+    flex: 1,
+    flexDirection: 'column',
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    backgroundColor: '#4e3227', // Dark brown header
+    borderTopRightRadius: 16,
+  },
+  headerTitle: {
+
+    color: theme.colors.brown[100],
+    letterSpacing: 1,
+  },
+  body: {
+    flex: 1,
+  },
+  row: {
+    flexDirection: 'row',
+  },
+  photoColumn: {
+    flexDirection: 'column',
+  },
+  photoPlaceholder: {
+    backgroundColor: theme.colors.primary, // Orange background
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  dataColumn: {
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    paddingVertical: 4,
+  },
+  label: {
+
+    color: '#a48b7b', // Soft brown
+    letterSpacing: 0.5,
+    textTransform: 'uppercase',
+  },
+  value: {
+
+    color: theme.colors.brown[800],
+    textTransform: 'uppercase',
+  },
+  signature: {
+
+    color: theme.colors.brown[800],
+    ...Platform.select({
+      web: { fontStyle: 'italic' },
+      default: {},
+    }),
+  },
+  mrzContainer: {
+    backgroundColor: '#e6d6c8', // Slightly darker cream for MRZ background
+    borderBottomRightRadius: 16,
+  },
+  mrzText: {
+
+    color: theme.colors.brown[600],
+    letterSpacing: 1.5,
+    lineHeight: 18,
+  }
+});

package/src/components/Cards/Passport/PassportStampPage.tsx

@@ -0,0 +1,253 @@
+
+import { View, StyleSheet } from 'react-native';
+import Svg, { Circle, Text as SvgText, Path, Defs, TextPath, G } from 'react-native-svg';
+import { theme } from '../../../styles/theme';
+import { Typography } from '../../Typography/Typography';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { Flag } from '../../DataDisplay/Flag/Flag';
+import { Check } from 'lucide-react-native';
+
+export interface PassportModule {
+  id: string;
+  title: string;
+}
+
+export interface PassportStampPageProps {
+  countryCode: string;
+  countryName: string;
+  capital: string;
+  level: string;
+  date: string;
+  modules: PassportModule[];
+  // Allows rotating the stamp slightly for realism
+  stampRotation?: number;
+}
+
+export const PassportStampPage = ({
+  countryCode,
+  countryName,
+  capital,
+  level,
+  date,
+  modules,
+  stampRotation = -5 // Default slight rotation
+}: PassportStampPageProps) => {
+  const { scale, scaleText } = useResponsive();
+
+  // Background pattern for passport page (faint horizontal lines)
+  const BackgroundPattern = () => (
+    <View style={StyleSheet.absoluteFill} pointerEvents="none">
+      <Svg width="100%" height="100%">
+        {Array.from({ length: 40 }).map((_, i) => (
+          <Path
+            key={i}
+            d={`M0 ${i * scale(14)} Q 150 ${i * scale(14) - 2} 300 ${i * scale(14)}`}
+            stroke="rgba(164, 139, 123, 0.15)"
+            strokeWidth="1"
+            fill="none"
+          />
+        ))}
+      </Svg>
+    </View>
+  );
+
+  // Circular stamp SVG
+  const Stamp = () => (
+    <View style={{ width: scale(80), height: scale(80), alignItems: 'center', justifyContent: 'center' }}>
+      <Svg width="100%" height="100%" viewBox="0 0 160 160" style={{ transform: [{ rotate: `${stampRotation}deg` }] }}>
+      <Defs>
+        <Path id="topCurve" d="M 30,80 A 50,50 0 0,1 130,80" fill="none" />
+        <Path id="bottomCurve" d="M 130,80 A 50,50 0 0,1 30,80" fill="none" />
+      </Defs>
+
+      {/* Outer Rings */}
+      <Circle cx="80" cy="80" r="70" stroke={theme.colors.brown[500]} strokeWidth="2" fill="none" />
+      <Circle cx="80" cy="80" r="62" stroke={theme.colors.brown[500]} strokeWidth="1" fill="none" />
+
+      {/* Curved Text - Top */}
+      <SvgText fill={theme.colors.brown[600]} fontSize="12" fontWeight="800" letterSpacing="2">
+        <TextPath href="#topCurve" startOffset="50%" textAnchor="middle">
+          RÉPUBLIQUE DE LA XETWA
+        </TextPath>
+      </SvgText>
+
+      {/* Curved Text - Bottom */}
+      <SvgText fill={theme.colors.brown[600]} fontSize="12" fontWeight="800" letterSpacing="1">
+        <TextPath href="#bottomCurve" startOffset="50%" textAnchor="middle">
+          * {date.toUpperCase()} *
+        </TextPath>
+      </SvgText>
+
+      {/* Inner Elements */}
+      <G x="80" y="80">
+        {/* City Name */}
+        <SvgText fill={theme.colors.brown[800]} fontSize="18" fontWeight="900" textAnchor="middle" y="-10">
+          {capital}
+        </SvgText>
+        {/* Validation text */}
+        <SvgText fill={theme.colors.brown[600]} fontSize="10" fontWeight="800" textAnchor="middle" y="10" letterSpacing="1">
+          VALIDÉ · {level}
+        </SvgText>
+        {/* Arrow */}
+        <Path d="M -15,18 L 15,18 M 10,14 L 16,18 L 10,22" stroke={theme.colors.brown[600]} strokeWidth="1.5" fill="none" />
+      </G>
+    </Svg>
+    </View>
+  );
+
+  return (
+    <View style={styles.container}>
+      <BackgroundPattern />
+
+      {/* Spine on the left */}
+      <View style={[styles.spine, { width: scale(32) }]} />
+
+      <View style={[styles.pageContent, { padding: scale(16) }]}>
+
+        {/* Header: Flag and Country Info */}
+        <View style={[styles.header, { paddingHorizontal: scale(16), paddingTop: scale(12), marginBottom: scale(8) }]}>
+          <View style={[styles.flagContainer, { width: scale(40), height: scale(40), borderRadius: scale(20), marginRight: scale(12) }]}>
+            <Flag countryCode={countryCode} size={scale(40)} />
+          </View>
+          <View style={styles.titleGroup}>
+            <Typography style={[styles.countryName, { fontSize: scaleText(20) }]}>{countryName}</Typography>
+            <Typography style={[styles.subtitle, { fontSize: scaleText(12) }]}>{capital} · Niveau {level}</Typography>
+          </View>
+        </View>
+
+        {/* Central Stamp Area */}
+        <View style={[styles.stampContainer, { marginVertical: scale(8) }]}>
+          <Stamp />
+        </View>
+
+        {/* Modules Section Header */}
+        <View style={[styles.modulesHeader, { marginBottom: scale(8) }]}>
+          <Typography style={[styles.modulesTitle, { fontSize: scaleText(10) }]}>MODULES</Typography>
+          <View style={[styles.badge, { paddingHorizontal: scale(8), paddingVertical: scale(4), borderRadius: scale(4) }]}>
+            <Typography style={[styles.badgeText, { fontSize: scaleText(9) }]}>PAÍS CARIMBADO</Typography>
+          </View>
+        </View>
+
+        {/* Separator line */}
+        <View style={[styles.separator, { marginBottom: scale(12) }]} />
+
+        {/* Modules Checklist */}
+        <View style={[styles.checklist, { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between' }]}>
+          <Typography style={{ color: 'red' }}>Debug: {JSON.stringify(modules)}</Typography>
+          {modules.map((mod) => (
+            <View key={mod.id} style={[styles.checkItem, { width: '48%', marginBottom: scale(8) }]}>
+              <View style={[styles.checkCircle, { width: scale(16), height: scale(16), borderRadius: scale(8) }]}>
+                <Check size={scale(10)} color="#fff" strokeWidth={3} />
+              </View>
+              <Typography style={[styles.moduleText, { fontSize: scaleText(11), marginLeft: scale(8) }]}>
+                {mod.title}
+              </Typography>
+            </View>
+          ))}
+        </View>
+
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+    backgroundColor: '#f6eedf', // Slightly lighter cream than ID page
+    borderRadius: 16,
+    overflow: 'hidden',
+    shadowColor: '#51332d',
+    shadowOffset: { width: 0, height: 12 },
+    shadowOpacity: 0.15,
+    shadowRadius: 24,
+    elevation: 8,
+  },
+  spine: {
+    backgroundColor: '#efe2d6',
+    borderRightWidth: 1,
+    borderRightColor: 'rgba(0,0,0,0.05)',
+    shadowColor: '#000',
+    shadowOffset: { width: 2, height: 0 },
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    zIndex: 2,
+  },
+  pageContent: {
+    flex: 1,
+    zIndex: 1,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  flagContainer: {
+    backgroundColor: '#efe2d6',
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  titleGroup: {
+    flex: 1,
+  },
+  countryName: {
+
+    color: theme.colors.brown[800],
+  },
+  subtitle: {
+
+    color: theme.colors.brown[500],
+  },
+  stampContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  modulesHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  modulesTitle: {
+
+    color: theme.colors.brown[400],
+    letterSpacing: 1,
+  },
+  badge: {
+    backgroundColor: 'rgba(15, 142, 102, 0.1)', // Light green bg
+    borderWidth: 1,
+    borderColor: 'rgba(15, 142, 102, 0.3)',
+  },
+  badgeText: {
+
+    color: theme.colors.success,
+    letterSpacing: 0.5,
+  },
+  separator: {
+    height: 1,
+    borderStyle: 'dashed',
+    borderWidth: 1,
+    borderColor: "#c3b1a4",
+    borderRadius: 1,
+  },
+  checklist: {
+    width: '100%',
+  },
+  checkItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  checkCircle: {
+    backgroundColor: theme.colors.success,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  moduleText: {
+    color: theme.colors.brown[700],
+    flexShrink: 1,
+  }
+});

package/src/components/Cards/Passport/PassportViewer.stories.tsx

@@ -0,0 +1,95 @@
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+import { PassportViewer } from './PassportViewer';
+import type { PassportUserData } from './PassportIDPage';
+import type { PassportStampPageProps } from './PassportStampPage';
+
+const meta = {
+  title: 'Cards/Passport',
+  component: PassportViewer,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'O **PassportViewer** é uma caderneta interativa que guarda o progresso global do utilizador. Ele suporta _swipe gestures_ nativas e animações 3D de dobragem para simular um passaporte real. Contém a página de Identidade e múltiplas páginas de carimbos dos países.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <View style={{ flex: 1, height: '100%', width: '100%', maxWidth: 600, marginHorizontal: 'auto', overflow: 'hidden' }}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+const mockUser: PassportUserData = {
+  surname: 'MARQUES',
+  givenName: 'Sofia',
+  nationality: 'FRANCOPHONE',
+  level: 'B2',
+  birthDate: '14 MARS 2001',
+  birthPlace: 'LISBONNE',
+  issueDate: '02 JUIN 2026',
+  passportNo: 'XT 042 6726',
+  signature: 'Sofia M.',
+  mrzLine1: 'P<XTWMARQUES<<SOFIA<<<<<<<<<<<<',
+  mrzLine2: 'XT0426726<9XTW0103148F<<<<<<<<<02'
+};
+
+const mockCountries: Omit<PassportStampPageProps, 'stampRotation'>[] = [
+  {
+    countryName: 'France',
+    capital: 'Paris',
+    level: 'A1',
+    date: 'MAI 2026',
+    countryCode: 'FR',
+    modules: [
+      { id: '1', title: 'Salutations & présentations' },
+      { id: '2', title: "Les nombres et l'heure" },
+      { id: '3', title: 'Au café' },
+      { id: '4', title: 'Demander son chemin' },
+      { id: '5', title: 'Ma famille' },
+    ]
+  },
+  {
+    countryName: 'Belgique',
+    capital: 'Bruxelles',
+    level: 'A2',
+    date: 'JUIN 2026',
+    countryCode: 'BE',
+    modules: [
+      { id: '1', title: 'Ma routine' },
+      { id: '2', title: 'Les courses & vêtements' },
+      { id: '3', title: 'Le passé composé' },
+      { id: '4', title: 'La santé' },
+    ]
+  },
+  {
+    countryName: 'Suisse',
+    capital: 'Genève',
+    level: 'A2',
+    date: 'JUIN 2026',
+    countryCode: 'CH',
+    modules: [
+      { id: '1', title: 'La maison & la ville' },
+      { id: '2', title: 'Le temps libre' },
+      { id: '3', title: 'Les projets' },
+      { id: '4', title: 'Septante & nonante' },
+    ]
+  }
+];
+
+export const Default: Story = {
+  args: {
+    user: mockUser,
+    countries: mockCountries,
+    onBack: () => console.log('Back pressed')
+  },
+};