@xetwa/design-system 1.0.2

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

@@ -0,0 +1,97 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+import { CountryCard } from './CountryCard';
+
+const meta = {
+  title: 'Components/Cards/CountryCard',
+  component: CountryCard,
+  parameters: { 
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'O **CountryCard** é usado na secção de Onboarding para selecionar um país (destino de aprendizagem).\n\n### Exemplo de Uso\n```tsx\n<CountryCard \n  name="Senegal"\n  isSelected={true}\n  onPress={() => selecionar("Senegal")}\n/>\n```',
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    countryName: { control: 'text' },
+    levelCode: { control: 'text' },
+    status: { control: { type: 'select', options: ['completed', 'active', 'locked'] } },
+    subtitle: { control: 'text' },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 24, maxWidth: 400, backgroundColor: '#f5f0eb' }}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+export const Completed: Story = {
+  name: "Concluído (Carimbado)",
+  args: {
+    countryName: 'França',
+    levelCode: 'A1',
+    status: 'completed',
+    subtitle: '6 módulos · carimbado',
+  },
+};
+
+export const Active: Story = {
+  name: "Em Curso (Active)",
+  args: {
+    countryName: 'Senegal',
+    levelCode: 'B2',
+    status: 'active',
+    subtitle: 'a decorrer · 2/4 módulos',
+  },
+};
+
+export const Locked: Story = {
+  name: "Bloqueado (Locked)",
+  args: {
+    countryName: 'Canadá',
+    levelCode: 'B1',
+    status: 'locked',
+    subtitle: 'Bloqueado',
+  },
+};
+
+export const Grid: Story = {
+  args: {
+    countryName: '',
+    levelCode: '',
+    status: 'completed',
+    subtitle: '',
+  },
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <CountryCard
+        countryName="França"
+        levelCode="A1"
+        status="completed"
+        subtitle="6 módulos · carimbado"
+        onPress={() => alert('Rever França')}
+      />
+      <CountryCard
+        countryName="Senegal"
+        levelCode="B2"
+        status="active"
+        subtitle="a decorrer · 2/4 módulos"
+        onPress={() => alert('Continuar Senegal')}
+      />
+      <CountryCard
+        countryName="Canadá"
+        levelCode="B1"
+        status="locked"
+        subtitle="Bloqueado"
+      />
+    </View>
+  ),
+};

package/src/components/Cards/CountryCard/CountryCard.tsx

@@ -0,0 +1,185 @@
+import { View, StyleSheet } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { BaseCard } from '../BaseCard/BaseCard';
+import { Flag } from '../../DataDisplay/Flag/Flag';
+import { RotateCcw, Lock } from 'lucide-react-native';
+import { Typography } from '../../Typography/Typography';
+
+export type CountryCardStatus = 'completed' | 'active' | 'locked';
+
+/**
+ * Cartão que exibe informações de progresso de um país no módulo de exploração.
+ */
+export interface CountryCardProps {
+  /** Nome do país (utilizado para carregar a bandeira correta). */
+  countryName: string;
+  /** Código identificador do nível (ex: 'L1'). */
+  levelCode: string;
+  /** Status atual de progresso do país. */
+  status: CountryCardStatus;
+  /** Texto descritivo do progresso atual. */
+  subtitle: string;
+  /** Função disparada ao clicar no cartão. */
+  onPress?: () => void;
+  /** Estilos adicionais para o componente. */
+  style?: ViewStyle | ViewStyle[];
+}
+
+export const CountryCard = ({
+  countryName,
+  levelCode,
+  status,
+  subtitle,
+  onPress,
+  style,
+}: CountryCardProps) => {
+  // Resolve configuration based on status
+  const getStatusStyles = () => {
+    switch (status) {
+      case 'completed':
+        return {
+          borderStyle: 'solid' as const,
+          borderColor: '#efe2d6',
+          opacity: 1.0,
+          flagBorderColor: '#f2974b',
+          subtitleColor: '#9a8478',
+        };
+      case 'active':
+        return {
+          borderStyle: 'dashed' as const,
+          borderColor: '#d8c7b8',
+          opacity: 0.85,
+          flagBorderColor: '#efe2d6',
+          subtitleColor: '#cf7a30',
+        };
+      case 'locked':
+        return {
+          borderStyle: 'solid' as const,
+          borderColor: '#efe2d6',
+          opacity: 0.5,
+          flagBorderColor: '#efe2d6',
+          subtitleColor: '#b9a392',
+        };
+    }
+  };
+
+  const statusStyles = getStatusStyles();
+
+  const renderAction = () => {
+    switch (status) {
+      case 'completed':
+        return (
+          <View style={styles.actionCol}>
+            <RotateCcw stroke="#f2974b" strokeWidth={2.4} size={16} />
+            <Typography style={styles.reverText}>REVER</Typography>
+          </View>
+        );
+      case 'active':
+        return (
+          <View style={styles.actionCol}>
+            <Typography style={styles.emCursoText}>EM</Typography>
+            <Typography style={styles.emCursoText}>CURSO</Typography>
+          </View>
+        );
+      case 'locked':
+        return (
+          <View style={styles.actionCol}>
+            <Lock stroke="#c3b1a4" strokeWidth={2.2} size={18} />
+          </View>
+        );
+    }
+  };
+
+  return (
+    <BaseCard
+      onPress={status !== 'locked' ? onPress : undefined}
+      disabled={status === 'locked'}
+      borderStyle={statusStyles.borderStyle}
+      borderColor={statusStyles.borderColor}
+      opacity={statusStyles.opacity}
+      paddingVertical={12}
+      paddingHorizontal={14}
+      style={style}
+    >
+      <View style={styles.container}>
+        {/* Left: Flag Avatar */}
+        <View style={[styles.flagWrapper, { borderColor: statusStyles.flagBorderColor }]}>
+          <Flag countryCode={countryName} size={38} />
+        </View>
+
+        {/* Center: Content Info */}
+        <View style={styles.infoCol}>
+          <Typography style={styles.titleText}>
+            {countryName} · {levelCode}
+          </Typography>
+          <Typography style={[styles.subtitleText, { color: statusStyles.subtitleColor }]}>
+            {subtitle}
+          </Typography>
+        </View>
+
+        {/* Right: Action Area */}
+        <View style={styles.actionWrapper}>
+          {renderAction()}
+        </View>
+      </View>
+    </BaseCard>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  flagWrapper: {
+    width: 42,
+    height: 42,
+    borderRadius: 21,
+    borderWidth: 2,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#fff',
+    overflow: 'hidden',
+  },
+  infoCol: {
+    flex: 1,
+    marginLeft: 12,
+    justifyContent: 'center',
+  },
+  titleText: {
+
+    fontSize: 16,
+    color: '#51332d',
+    lineHeight: 18,
+    marginBottom: 4,
+  },
+  subtitleText: {
+
+    fontSize: 11,
+    lineHeight: 13,
+  },
+  actionWrapper: {
+    marginLeft: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+    minWidth: 46,
+  },
+  actionCol: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 2,
+  },
+  reverText: {
+
+    fontSize: 10,
+    color: '#f2974b',
+    letterSpacing: 0.5,
+  },
+  emCursoText: {
+
+    fontSize: 10,
+    color: '#cf7a30',
+    lineHeight: 11,
+    textAlign: 'center',
+  },
+});

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

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+import { LevelProgressCard } from './LevelProgressCard';
+
+const meta = {
+  title: 'Components/Cards/LevelProgressCard',
+  component: LevelProgressCard,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'O **LevelProgressCard** é utilizado no ecrã de progresso para destacar o avanço atual do utilizador para a fluência, apresentando um gráfico circular, nível atual e texto motivacional, sobre um fundo castanho escuro.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    level: { control: 'text' },
+    progressPercent: { control: { type: 'range', min: 0, max: 100, step: 1 } },
+    subtitle: { control: 'text' },
+    description: { control: 'text' },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 24, backgroundColor: '#fbf6f0', width: 400 }}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+export const Default: Story = {
+  args: {
+    level: 'B2',
+    progressPercent: 45,
+    subtitle: '45% ATÉ AO C1',
+    description: 'Já dominas o intermédio. Faltam 3 países para a fluência.',
+  },
+};
+
+export const Beginner: Story = {
+  args: {
+    level: 'A1',
+    progressPercent: 12,
+    subtitle: '12% ATÉ AO A2',
+    description: 'O início de uma grande viagem. Continua a explorar novos destinos!',
+  },
+};
+
+export const AlmostFluent: Story = {
+  args: {
+    level: 'C1',
+    progressPercent: 88,
+    subtitle: '88% ATÉ À FLUÊNCIA',
+    description: 'Estás a um passo de dominar completamente a francofonia!',
+  },
+};

package/src/components/Cards/LevelProgressCard/LevelProgressCard.tsx

@@ -0,0 +1,143 @@
+import { useEffect, useRef } from 'react';
+import { View, StyleSheet, Animated, Easing, Platform } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+import { theme } from '../../../styles/theme';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { Typography } from '../../Typography/Typography';
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+export interface LevelProgressCardProps {
+  /** Nível atual a apresentar no centro do círculo (ex: "B2") */
+  level: string;
+  /** Percentagem de progresso de 0 a 100 */
+  progressPercent: number;
+  /** Texto destacado pequeno acima da descrição (ex: "45% ATÉ AO C1") */
+  subtitle: string;
+  /** Texto de descrição principal (ex: "Já dominas o intermédio...") */
+  description: string;
+  /** Estilos customizados para o container principal */
+  style?: ViewStyle | ViewStyle[];
+}
+
+export const LevelProgressCard = ({
+  level,
+  progressPercent,
+  subtitle,
+  description,
+  style,
+}: LevelProgressCardProps) => {
+  const { scale } = useResponsive();
+  const animatedValue = useRef(new Animated.Value(0)).current;
+
+  // Circle configs
+  const size = scale(90);
+  const strokeWidth = scale(8);
+  const radius = (size - strokeWidth) / 2;
+  const circumference = radius * 2 * Math.PI;
+
+  useEffect(() => {
+    animatedValue.setValue(0);
+    Animated.timing(animatedValue, {
+      toValue: progressPercent,
+      duration: 1200,
+      delay: 300,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: false,
+    }).start();
+  }, [progressPercent, animatedValue]);
+
+  const strokeDashoffset = animatedValue.interpolate({
+    inputRange: [0, 100],
+    outputRange: [circumference, 0],
+    extrapolate: 'clamp',
+  });
+
+  return (
+    <View style={[styles.cardContainer, { padding: scale(20), borderRadius: scale(24) }, style]}>
+      {/* Left side: Circular Progress */}
+      <View style={[styles.progressContainer, { width: size, height: size, marginRight: scale(20) }]}>
+        <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+          {/* Background Track */}
+          <Circle
+            stroke={theme.colors.brown[700]} // Dark brown track
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            strokeWidth={strokeWidth}
+            fill="none"
+          />
+          {/* Progress Circle */}
+          <AnimatedCircle
+            stroke={theme.colors.primary}
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            strokeWidth={strokeWidth}
+            strokeDasharray={circumference}
+            strokeDashoffset={strokeDashoffset}
+            strokeLinecap="round"
+            fill="none"
+            rotation="-90"
+            origin={`${size / 2}, ${size / 2}`}
+          />
+        </Svg>
+        {/* Inner Text */}
+        <View style={styles.innerTextContainer}>
+          <Typography variant="display2" style={{ color: theme.colors.white }}>{level}</Typography>
+          <Typography variant="caption" style={{ color: theme.colors.brown[300] }}>nível</Typography>
+        </View>
+      </View>
+
+      {/* Right side: Texts */}
+      <View style={styles.textContainer}>
+        <Typography variant="bodySm" style={[styles.subtitle, { marginBottom: scale(4) }]}>
+          {subtitle.toUpperCase()}
+        </Typography>
+        <Typography variant="bodyLg" style={styles.description}>
+          {description}
+        </Typography>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  cardContainer: {
+    backgroundColor: theme.colors.brown[800], // The dark brown color from the design
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+    ...Platform.select({
+      web: { boxShadow: `0px 6px 0px ${theme.colors.brown[900]}` },
+      default: {
+        shadowColor: theme.colors.brown[900],
+        shadowOffset: { width: 0, height: 6 },
+        shadowOpacity: 1,
+        shadowRadius: 0,
+        elevation: 0,
+      },
+    }),
+  },
+  progressContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+  },
+  innerTextContainer: {
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  textContainer: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  subtitle: {
+    color: theme.colors.primary,
+  },
+  description: {
+    color: theme.colors.brown[100],
+  },
+});

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

@@ -0,0 +1,108 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+import { ModuleCard } from './ModuleCard';
+
+const meta = {
+  title: 'Components/Cards/ModuleCard',
+  component: ModuleCard,
+  parameters: { 
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'O **ModuleCard** exibe as lições no percurso principal do utilizador (a "Tree" de aprendizagem).\n\nPossui diferentes estados (`active`, `locked`, `completed`, `dark`) e pode incluir barras de progresso fragmentadas.\n\n### Exemplo de Uso\n```tsx\n<ModuleCard \n  status="active"\n  number={2}\n  title="No mercado de Dakar"\n  subtitle="Regatear, números, comida"\n  progress={0.6}\n  segments={5}\n  tagLabel="EM CURSO"\n/>\n```',
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    status: { control: 'radio', options: ['active', 'locked', 'completed', 'dark'] },
+    number: { control: 'number' },
+    title: { control: 'text' },
+    subtitle: { control: 'text' },
+    subtext: { control: 'text' },
+    tagLabel: { control: 'text' },
+    progress: { control: 'number' },
+    segments: { control: 'number' },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ width: '100%', backgroundColor: '#f5f0eb' }}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+export const Active: Story = {
+  args: {
+    status: 'active',
+    number: 1,
+    title: 'No mercado de Dakar',
+    subtitle: 'Regatear, números, comida',
+    subtext: '• 3/5',
+    tagLabel: 'EM CURSO',
+    progress: 0.6,
+    segments: 5,
+  },
+};
+
+export const Locked: Story = {
+  args: {
+    status: 'locked',
+    number: 3,
+    title: 'A minha família',
+    subtitle: '5 lições',
+  },
+};
+
+export const DarkLocked: Story = {
+  args: {
+    status: 'dark',
+    title: 'Aula ao vivo + Teste final',
+    subtitle: 'Acaba os 4 módulos para desbloquear',
+  },
+};
+
+export const Grid: Story = {
+  args: {
+    status: 'active',
+    number: 1,
+    title: '',
+  },
+  render: () => (
+    <View style={{ gap: 16, width: '100%' }}>
+      <ModuleCard 
+        status="completed" 
+        number={1} 
+        title="Saudações & teranga" 
+        subtitle="Concluído" 
+        subtext="• 5/5" 
+      />
+      <ModuleCard 
+        status="active" 
+        number={2} 
+        title="No mercado de Dakar" 
+        subtitle="Regatear, números, comida" 
+        subtext="• 3/5" 
+        tagLabel="EM CURSO" 
+        progress={0.6} 
+        segments={5} 
+      />
+      <ModuleCard 
+        status="locked" 
+        number={3} 
+        title="A minha família" 
+        subtitle="5 lições" 
+      />
+      <ModuleCard 
+        status="dark" 
+        title="Aula ao vivo + Teste final" 
+        subtitle="Acaba os 4 módulos para desbloquear" 
+      />
+    </View>
+  ),
+};