@xetwa/design-system 1.0.2

package/src/components/Cards/ModuleCard/ModuleCard.tsx

@@ -0,0 +1,304 @@
+import { View, StyleSheet, Pressable } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { theme } from '../../../styles/theme';
+import { Tag } from '../../DataDisplay/Tag/Tag';
+import { ProgressBar } from '../../DataDisplay/ProgressBar/ProgressBar';
+import { Badge } from '../../DataDisplay/Badge/Badge';
+import { Lock, Check, GraduationCap } from 'lucide-react-native';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { Typography } from '../../Typography/Typography';
+
+export type ModuleCardStatus = 'active' | 'locked' | 'completed' | 'dark';
+
+/**
+ * Cartão que representa uma lição ou módulo no caminho de aprendizagem.
+ */
+export interface ModuleCardProps {
+  /** Estado atual da lição (ativa, trancada, concluída, ou o módulo "dark" final). */
+  status: ModuleCardStatus;
+  /** Número da lição (ex: 1, 2, 3). */
+  number?: number;
+  /** Título principal da lição. */
+  title: string;
+  /** Subtítulo descritivo. */
+  subtitle?: string;
+  /** Texto secundário menor que o subtítulo. */
+  subtext?: string;
+  /** Etiqueta superior (ex: 'EM CURSO'). */
+  tagLabel?: string;
+  /** Progresso (0 a 1). */
+  progress?: number;
+  /** Número de segmentos na barra de progresso. */
+  segments?: number;
+  onPress?: () => void;
+  /** Cor customizada para o título. */
+  titleColor?: string;
+  /** Cor customizada para o subtítulo. */
+  subtitleColor?: string;
+  style?: ViewStyle | ViewStyle[];
+}
+
+export const ModuleCard = ({
+  status,
+  number,
+  title,
+  subtitle,
+  subtext,
+  tagLabel,
+  progress,
+  segments,
+  titleColor,
+  subtitleColor,
+  onPress,
+  style,
+}: ModuleCardProps) => {
+  const { scale, scaleText, width } = useResponsive();
+
+  const isMobileScreen = width < 400;
+
+  const getContainerStyle = () => {
+    switch (status) {
+      case 'active':
+        return {
+          borderColor: theme.colors.primary,
+          borderWidth: 2,
+          backgroundColor: theme.colors.white,
+        };
+      case 'locked':
+        return {
+          borderColor: theme.colors.brown[100],
+          borderWidth: 1.5,
+          backgroundColor: 'rgba(255, 255, 255, 0.7)',
+        };
+      case 'completed':
+        return {
+          borderColor: theme.colors.brown[100],
+          borderWidth: 1.5,
+          backgroundColor: theme.colors.white,
+          ...theme.shadows.sm,
+        };
+      case 'dark':
+        return {
+          borderColor: theme.colors.brown[800],
+          borderWidth: 0,
+          backgroundColor: theme.colors.brown[800],
+          ...theme.shadows.sm,
+        };
+    }
+  };
+
+  const getTextColor = () => {
+    if (titleColor) return titleColor;
+    switch (status) {
+      case 'locked':
+        return theme.colors.brown[400];
+      case 'dark':
+        return theme.colors.white;
+      default:
+        return theme.colors.brown[800];
+    }
+  };
+
+  const containerStyle = getContainerStyle();
+  const titleStyleColor = getTextColor();
+  const subtitleStyleColor = subtitleColor || (status === 'completed' ? theme.colors.success : status === 'locked' || status === 'dark' ? theme.colors.brown[300] : theme.colors.brown[500]);
+
+  const activeShadow = status === 'active' ? {
+    shadowColor: theme.colors.primary,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.14,
+    shadowRadius: 14,
+    elevation: 4,
+  } : {};
+
+  const renderLeftIconBox = () => {
+    const bSize = isMobileScreen ? 'xl' : 'xxl';
+    if (status === 'locked') {
+      return (
+        <Badge
+          variant="disabled"
+          size={bSize}
+          content={number}
+        />
+      );
+    }
+    if (status === 'completed') {
+      const checkSize = isMobileScreen ? scale(16) : scale(22);
+      return (
+        <Badge
+          variant="success"
+          size={bSize}
+          content={<Check stroke={theme.colors.white} strokeWidth={2.4} size={checkSize} />}
+        />
+      );
+    }
+    if (status === 'dark') {
+      const boxSize = isMobileScreen ? scale(34) : scale(44);
+      const capSize = isMobileScreen ? scale(18) : scale(24);
+      return (
+        <View style={[
+          styles.darkIconBox,
+          {
+            width: boxSize,
+            height: boxSize,
+            borderRadius: isMobileScreen ? scale(9) : scale(12),
+          }
+        ]}>
+          <GraduationCap stroke={theme.colors.primary} strokeWidth={2.2} size={capSize} />
+        </View>
+      );
+    }
+    return (
+      <Badge
+        variant="primary"
+        size={bSize}
+        content={number}
+      />
+    );
+  };
+
+  const colGap = isMobileScreen ? scale(8) : scale(12);
+
+  return (
+    <Pressable
+      style={[
+        styles.container,
+        containerStyle,
+        status === 'active' && activeShadow,
+        {
+          paddingVertical: isMobileScreen ? scale(10) : scale(14),
+          paddingHorizontal: isMobileScreen ? scale(12) : scale(15),
+          borderRadius: scale(18),
+        },
+        style,
+      ]}
+      onPress={onPress}
+      disabled={!onPress || (status === 'locked' && !onPress)}
+    >
+      <View style={styles.topRow}>
+        <View style={styles.leftCol}>
+          {renderLeftIconBox()}
+        </View>
+
+        <View style={[styles.content, { marginLeft: colGap }]}>
+          <Typography style={[
+            styles.title,
+            {
+              color: titleStyleColor,
+              fontSize: isMobileScreen ? scaleText(14) : scaleText(16),
+              marginBottom: scale(2),
+            }
+          ]}>
+            {title}
+          </Typography>
+
+          {(subtitle || subtext) && (
+            <Typography style={[
+              styles.subtitle,
+              {
+                color: subtitleStyleColor,
+                fontSize: isMobileScreen ? scaleText(10) : scaleText(12),
+              }
+            ]}>
+              {subtitle}
+              {subtitle && subtext && ' '}
+              {subtext && <Typography style={styles.subtext}>{subtext}</Typography>}
+            </Typography>
+          )}
+        </View>
+
+        {(tagLabel || status === 'locked' || status === 'dark') && (
+          <View style={[styles.rightContent, { marginLeft: colGap }]}>
+            {tagLabel && status === 'active' && (
+              <Tag
+                label={tagLabel}
+                variant="primary"
+                size={isMobileScreen ? 'xs' : 'sm'}
+              />
+            )}
+            {(status === 'locked' || status === 'dark') && (
+              <Lock
+                stroke={status === 'dark' ? 'rgba(255,255,255,0.4)' : '#c3b1a4'}
+                strokeWidth={2.2}
+                size={isMobileScreen ? scale(20) : scale(24)}
+              />
+            )}
+          </View>
+        )}
+      </View>
+
+      {progress !== undefined && segments !== undefined && (
+        <View style={[styles.progressContainer, { marginTop: isMobileScreen ? scale(12) : scale(16) }]}>
+          <ProgressBar
+            progress={progress}
+            segments={segments}
+            size={isMobileScreen ? 'xs' : 'xs'}
+          />
+        </View>
+      )}
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    maxWidth: 450,
+    alignSelf: 'center',
+    flexDirection: 'column',
+    paddingVertical: 14,
+    paddingHorizontal: 15,
+    borderRadius: 18,
+    borderStyle: 'solid',
+  },
+  topRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+  },
+  leftCol: {
+    flexShrink: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  content: {
+    flex: 1,
+    flexShrink: 1,
+    flexBasis: 0,
+    minWidth: 0,
+    justifyContent: 'center',
+    marginLeft: 12,
+  },
+  darkIconBox: {
+    width: 44,
+    height: 44,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 2,
+    borderColor: theme.colors.primary,
+    borderStyle: 'dashed' as const,
+  },
+  title: {
+
+    fontSize: 16,
+    marginBottom: 4,
+  },
+  subtitle: {
+
+    fontSize: 12,
+  },
+  subtext: {
+    color: theme.colors.brown[400],
+  },
+  progressContainer: {
+    marginTop: 10,
+    width: '100%',
+  },
+  rightContent: {
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+    marginLeft: 12,
+    flexShrink: 0,
+  },
+});

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

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+import { ModuleCompletionCard } from './ModuleCompletionCard';
+
+const meta = {
+  title: 'Components/Cards/ModuleCompletionCard',
+  component: ModuleCompletionCard,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: `O **ModuleCompletionCard** funciona como um "passaporte carimbado" exibido ao utilizador sempre que ele conclui um módulo.
+A componente suporta a injeção da bandeira usando a nossa \`Flag\` através do \`countryCode\`, textos dinâmicos e um carimbo de "VALIDÉ" rotacionado com estilo autêntico de passaporte.
+
+### Exemplo de Uso
+\`\`\`tsx
+<ModuleCompletionCard
+  countryCode="SN"
+  title="Sénégal"
+  subtitle="Niveau A1 · complet"
+  showStamp={true}
+  stampTitle="VALIDÉ"
+  stampSubtitle="DAKAR · A1"
+/>
+\`\`\`
+`
+      }
+    }
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 0, alignItems: 'center', justifyContent: 'center', flex: 1 }}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+export const BoardingPassStamp: Story = {
+  name: "Cartão de Passaporte Carimbado",
+  args: {
+    countryCode: 'SN',
+    title: 'Sénégal',
+    subtitle: 'Niveau A1 · complet',
+    showStamp: true,
+    stampTitle: 'VALIDÉ',
+    stampSubtitle: 'DAKAR · A1',
+  },
+};

package/src/components/Cards/ModuleCompletionCard/ModuleCompletionCard.tsx

@@ -0,0 +1,167 @@
+import { useEffect, useRef } from 'react';
+import { View, StyleSheet, Animated } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { theme } from '../../../styles/theme';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { Flag } from '../../DataDisplay/Flag/Flag';
+import { Typography } from '../../Typography/Typography';
+
+export interface ModuleCompletionCardProps {
+  /** Código ISO ou nome do país para renderizar a bandeira (ex: 'SN' ou 'Sénégal') */
+  countryCode: string;
+  /** Nome do país ou cidade */
+  title: string;
+  /** Nível e estado (ex: "Niveau A1 · complet") */
+  subtitle: string;
+  /** Se true, o carimbo é exibido */
+  showStamp?: boolean;
+  /** Título do carimbo (ex: "VALIDÉ") */
+  stampTitle?: string;
+  /** Subtítulo do carimbo (ex: "DAKAR · A1") */
+  stampSubtitle?: string;
+  /** Estilos customizados */
+  style?: ViewStyle | ViewStyle[];
+}
+
+export const ModuleCompletionCard = ({
+  countryCode,
+  title,
+  subtitle,
+  showStamp = true,
+  stampTitle = 'VALIDÉ',
+  stampSubtitle,
+  style,
+}: ModuleCompletionCardProps) => {
+  const { scale, scaleText } = useResponsive();
+
+  const stampScaleAnim = useRef(new Animated.Value(3)).current;
+  const stampOpacityAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    if (showStamp) {
+      Animated.parallel([
+        Animated.spring(stampScaleAnim, {
+          toValue: 1,
+          friction: 6,
+          tension: 150,
+          useNativeDriver: true,
+        }),
+        Animated.timing(stampOpacityAnim, {
+          toValue: 1,
+          duration: 250,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    } else {
+      // Reset instantâneo se for escondido
+      stampScaleAnim.setValue(3);
+      stampOpacityAnim.setValue(0);
+    }
+  }, [showStamp, stampScaleAnim, stampOpacityAnim]);
+
+  return (
+    <View style={[styles.container, { paddingTop: scale(56), paddingBottom: scale(64), paddingHorizontal: scale(24), borderRadius: scale(24) }, style]}>
+      {/* Container da Bandeira */}
+      <View style={[styles.flagWrapper, { width: scale(84), height: scale(84), borderRadius: scale(42), borderWidth: scale(3), marginBottom: scale(16) }]}>
+        <View style={[styles.flagInner, { borderRadius: scale(40) }]}>
+          <Flag countryCode={countryCode} size={scale(84)} />
+        </View>
+      </View>
+
+      {/* Título e Subtítulo */}
+      <Typography style={[styles.title, { fontSize: scaleText(24), lineHeight: scaleText(28), marginBottom: scale(4) }]}>
+        {title}
+      </Typography>
+      <Typography style={[styles.subtitle, { fontSize: scaleText(13) }]}>
+        {subtitle}
+      </Typography>
+
+      {/* Carimbo */}
+      {showStamp && (
+        <Animated.View style={[
+          styles.stampContainer,
+          {
+            right: scale(18),
+            bottom: scale(25),
+            borderWidth: scale(2.5),
+            borderRadius: scale(8),
+            paddingVertical: scale(6),
+            paddingHorizontal: scale(12),
+            opacity: stampOpacityAnim,
+            transform: [
+              { rotate: '-15deg' },
+              { scale: stampScaleAnim },
+            ]
+          }
+        ]}>
+          <Typography style={[styles.stampTitle, { fontSize: scaleText(18), lineHeight: scaleText(20) }]}>
+            {stampTitle}
+          </Typography>
+          {stampSubtitle && (
+            <Typography style={[styles.stampSubtitle, { fontSize: scaleText(10) }]}>
+              {stampSubtitle}
+            </Typography>
+          )}
+        </Animated.View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#ffffff',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    maxWidth: 280,
+    maxHeight: 380,
+    alignSelf: 'center',
+    position: 'relative',
+    overflow: 'visible',
+    ...theme.shadows.lg, // Stronger shadow for the green background contrast
+  },
+  flagWrapper: {
+    borderColor: '#e8883e', // Orange border a bit darker/thinner
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+  },
+  flagInner: {
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+
+    color: '#3f2620',
+    textAlign: 'center',
+  },
+  subtitle: {
+
+    color: '#9a8478',
+    textAlign: 'center',
+  },
+  stampContainer: {
+    position: 'absolute',
+    borderColor: '#d94141', // Red stamp border
+    transform: [{ rotate: '-15deg' }],
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'transparent',
+  },
+  stampTitle: {
+
+    color: '#d94141', // Red stamp text
+    textTransform: 'uppercase',
+  },
+  stampSubtitle: {
+
+    color: '#d94141',
+    textTransform: 'uppercase',
+    marginTop: 2,
+    letterSpacing: 0.5,
+  },
+});

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

@@ -0,0 +1,114 @@
+
+import { View, StyleSheet } from 'react-native';
+import Svg, { Circle, Rect, Path, Ellipse, Line } from 'react-native-svg';
+import { theme } from '../../../styles/theme';
+import { Typography } from '../../Typography/Typography';
+import { useResponsive } from '../../../hooks/useResponsive';
+
+export const PassportCover = () => {
+  const { scale, scaleText } = useResponsive();
+
+  // Biometric chip logo standard
+  const ChipLogo = () => (
+    <Svg width={scale(32)} height={scale(24)} viewBox="0 0 32 24" fill="none">
+      <Rect x="1" y="1" width="30" height="22" rx="4" stroke={"#c3b1a4"} strokeWidth="1.5" />
+      <Rect x="8" y="6" width="16" height="12" rx="2" stroke={"#c3b1a4"} strokeWidth="1.5" />
+      <Line x1="1" y1="12" x2="8" y2="12" stroke={"#c3b1a4"} strokeWidth="1.5" />
+      <Line x1="24" y1="12" x2="31" y2="12" stroke={"#c3b1a4"} strokeWidth="1.5" />
+    </Svg>
+  );
+
+  return (
+    <View style={styles.container}>
+      <View style={[styles.innerBorder, {
+        margin: scale(16),
+        padding: scale(24),
+        borderWidth: scale(1.5),
+        borderRadius: scale(8)
+      }]}>
+
+        <Typography style={[styles.republique, { fontSize: scaleText(12), marginBottom: scale(48) }]}>
+          RÉPUBLIQUE DE LA XETWA
+        </Typography>
+
+        {/* Central Logo placeholder - Minimalist Globe */}
+        <View style={styles.logoContainer}>
+          <Svg width={scale(120)} height={scale(120)} viewBox="0 0 120 120" fill="none">
+            {/* Outer ring */}
+            <Circle cx="60" cy="60" r="48" stroke={theme.colors.primary} strokeWidth="2.5" />
+            {/* Vertical ellipse */}
+            <Ellipse cx="60" cy="60" rx="20" ry="48" stroke={theme.colors.primary} strokeWidth="2.5" />
+            {/* Horizontal line */}
+            <Line x1="12" y1="60" x2="108" y2="60" stroke={theme.colors.primary} strokeWidth="2.5" />
+            {/* Shapes / Continents */}
+            <Path d="M40 30 Q50 20 60 40 Q40 50 40 30 Z" fill={theme.colors.primary} />
+            <Path d="M70 65 Q90 50 85 80 Q60 90 70 65 Z" fill={theme.colors.primary} />
+            <Circle cx="80" cy="40" r="4" fill={theme.colors.primary} />
+          </Svg>
+        </View>
+
+        <View style={styles.titleContainer}>
+          <Typography style={[styles.title, { fontSize: scaleText(32) }]}>
+            PASSEPORT
+          </Typography>
+          <Typography style={[styles.subtitle, { fontSize: scaleText(10), marginTop: scale(8) }]}>
+            FRANCOPHONIE · MONDE
+          </Typography>
+        </View>
+
+        <View style={[styles.chipContainer, { marginTop: scale(32) }]}>
+          <ChipLogo />
+        </View>
+
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#4e3227', // Dark brown from the design
+    borderRadius: 16,
+    overflow: 'hidden',
+    shadowColor: '#301c14',
+    shadowOffset: { width: 0, height: 12 },
+    shadowOpacity: 0.4,
+    shadowRadius: 24,
+    elevation: 8,
+  },
+  innerBorder: {
+    flex: 1,
+    borderColor: '#7a5b4a',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  republique: {
+
+    color: theme.colors.brown[100],
+    letterSpacing: 2,
+    textAlign: 'center',
+  },
+  logoContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    flex: 1,
+  },
+  titleContainer: {
+    alignItems: 'center',
+  },
+  title: {
+
+    color: theme.colors.brown[100],
+    letterSpacing: 1,
+  },
+  subtitle: {
+
+    color: '#7a5b4a',
+    letterSpacing: 3,
+  },
+  chipContainer: {
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+  }
+});