@xetwa/design-system 1.0.2

package/src/components/DataDisplay/LevelBadge/LevelBadge.tsx

@@ -0,0 +1,118 @@
+import { View, StyleSheet } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { Flag } from '../Flag/Flag';
+import { Typography } from '../../Typography/Typography';
+
+export type CEFRLevel = 'A1' | 'A2' | 'B1' | 'B2' | 'C1';
+
+/**
+ * Badge específico para exibir o nível de proficiência linguística (A1, A2, B1, etc).
+ */
+export interface LevelBadgeProps {
+  levelCode: CEFRLevel;
+  size?: 'lg' | 'sm';
+  countryFlagName?: string;
+  style?: ViewStyle | ViewStyle[];
+}
+
+interface LevelConfig {
+  label: string;
+  color: string;
+}
+
+const LEVEL_CONFIGS: Record<CEFRLevel, LevelConfig> = {
+  A1: { label: 'Iniciante', color: '#cf7a30' },
+  A2: { label: 'Elementar', color: '#cf7a30' },
+  B1: { label: 'Intermédio', color: '#16915a' },
+  B2: { label: 'Independente', color: '#16915a' },
+  C1: { label: 'Avançado', color: '#2a6fc2' },
+};
+
+export const LevelBadge = ({
+  levelCode,
+  size = 'lg',
+  countryFlagName = 'França',
+  style,
+}: LevelBadgeProps) => {
+  const config = LEVEL_CONFIGS[levelCode] || { label: 'Iniciante', color: '#cf7a30' };
+  const isLarge = size === 'lg';
+
+  // Container style configurations based on spec
+  const containerStyle: ViewStyle = isLarge
+    ? {
+        paddingVertical: 10,
+        paddingHorizontal: 18,
+        borderRadius: 16,
+        borderWidth: 2,
+        borderColor: '#f2974b', // Custom orange highlight border for large badge
+        backgroundColor: '#fdf3ea', // Warm light cream/orange highlight background
+      }
+    : {
+        paddingVertical: 5,
+        paddingHorizontal: 12,
+        borderRadius: 12,
+        borderWidth: 1.5,
+        borderColor: '#efe2d6',
+        backgroundColor: '#fdf3ea',
+      };
+
+  // Flag box dimensions based on size
+  const flagWidth = isLarge ? 26 : 18;
+  const flagHeight = isLarge ? 18 : 12;
+  const flagRadius = isLarge ? 4 : 2;
+
+  return (
+    <View style={[styles.container, containerStyle, style]}>
+      {/* Rectangular flag mapping */}
+      <Flag
+        countryCode={countryFlagName}
+        size={flagWidth}
+        style={{
+          width: flagWidth,
+          height: flagHeight,
+          borderRadius: flagRadius,
+        }}
+      />
+
+      {/* Level Code */}
+      <Typography style={[styles.levelText, isLarge ? styles.levelTextLg : styles.levelTextSm]}>
+        {levelCode}
+      </Typography>
+
+      {/* Optional Descriptive Label for Large Badge */}
+      {isLarge && (
+        <Typography style={[styles.labelText, { color: config.color }]}>
+          {config.label}
+        </Typography>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+    alignSelf: 'flex-start',
+  },
+  levelText: {
+
+    color: '#51332d',
+    lineHeight: 28, // Matches large font alignment
+  },
+  levelTextLg: {
+    fontSize: 28,
+    lineHeight: 30,
+  },
+  levelTextSm: {
+    fontSize: 14,
+    lineHeight: 16,
+  },
+  labelText: {
+
+    fontSize: 14,
+    lineHeight: 16,
+  },
+});

package/src/components/DataDisplay/ProgressBar/ProgressBar.stories.tsx

@@ -0,0 +1,95 @@
+import { useState } from 'react';
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/react';
+import { View, Button } from 'react-native';
+import { ProgressBar } from './ProgressBar';
+
+const meta = {
+  title: 'Components/DataDisplay/ProgressBar',
+  component: ProgressBar,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'O **ProgressBar** é utilizado para mostrar o progresso ao longo de um curso ou lição.\n\n### Exemplo de Uso\n```tsx\n<ProgressBar \n  progress={0.5}\n  segments={4}\n  size="md"\n/>\n```',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    progress: {
+      control: { type: 'range', min: 0, max: 1, step: 0.05 },
+    },
+    size: {
+      control: 'radio',
+      options: ['xs', 'sm', 'md'],
+    },
+    variant: {
+      control: 'radio',
+      options: ['default', 'success'],
+    },
+    segments: {
+      control: { type: 'number', min: 1 },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 24, width: '100%', maxWidth: 600 }}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+export const Default: Story = {
+  args: {
+    progress: 0.45,
+    size: 'sm',
+  },
+};
+
+export const Success: Story = {
+  args: {
+    progress: 1,
+    variant: 'success',
+  },
+};
+
+export const Sizes: Story = {
+  args: { progress: 0 },
+  render: () => (
+    <View style={{ gap: 20 }}>
+      <ProgressBar progress={0.3} size="xs" />
+      <ProgressBar progress={0.5} size="sm" />
+      <ProgressBar progress={0.8} size="md" />
+    </View>
+  ),
+};
+
+export const Segmented: Story = {
+  args: {
+    progress: 0.6,
+    segments: 5,
+  },
+};
+
+export const Interactive: Story = {
+  args: { progress: 0 },
+  render: () => {
+    const [progress, setProgress] = useState(0);
+    return (
+      <View style={{ gap: 20 }}>
+        <ProgressBar progress={progress} segments={3} />
+        <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 20 }}>
+          <Button title="0%" onPress={() => setProgress(0)} />
+          <Button title="33%" onPress={() => setProgress(0.333)} />
+          <Button title="66%" onPress={() => setProgress(0.666)} />
+          <Button title="100%" onPress={() => setProgress(1)} />
+        </View>
+      </View>
+    );
+  },
+};

package/src/components/DataDisplay/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,117 @@
+import { useEffect, useState } from 'react';
+import { View, StyleSheet, Animated, Easing } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { theme } from '../../../styles/theme';
+
+/**
+ * Barra de progresso para exibir a percentagem de conclusão de uma tarefa ou módulo.
+ */
+export interface ProgressBarProps {
+  /** Progresso atual de 0.0 a 1.0 */
+  progress: number;
+  /** Se passado, a barra de progresso será dividida no número de segmentos indicados. */
+  segments?: number;
+  /** Tamanho da barra. */
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+  /** Cor da barra (opcional, assume a cor primária por defeito). */
+  color?: string;
+  /** Variantes nativas */
+  variant?: 'default' | 'success';
+  /** Cor customizada forçada (sobrepõe a variante) da barra cheia */
+  fillColor?: string;
+  /** Cor customizada forçada do trilho vazio */
+  trackColor?: string;
+  style?: ViewStyle | ViewStyle[];
+}
+
+export const ProgressBar = ({
+  progress = 0,
+  size = 'sm',
+  variant = 'default',
+  segments = 1,
+  fillColor,
+  trackColor,
+  style,
+}: ProgressBarProps) => {
+  const [animatedProgress] = useState(() => new Animated.Value(0));
+
+  useEffect(() => {
+    // Easing smooth: [0.4, 0, 0.2, 1] as defined in design specs
+    Animated.timing(animatedProgress, {
+      toValue: Math.max(0, Math.min(progress, 1)),
+      duration: 600,
+      easing: Easing.bezier(0.4, 0, 0.2, 1),
+      useNativeDriver: false, // width animation does not support native driver
+    }).start();
+  }, [progress, animatedProgress]);
+
+  const sizeStyles = {
+    xs: { height: 8, borderRadius: 5 },
+    sm: { height: 12, borderRadius: 7 },
+    md: { height: 16, borderRadius: 9 },
+  }[size === 'lg' ? 'md' : size] || { height: 16, borderRadius: 9 };
+
+  const defaultFillColor = variant === 'success' ? theme.colors.success : theme.colors.primary;
+  const activeFillColor = fillColor || defaultFillColor;
+  const activeTrackColor = trackColor || '#f3e7da';
+
+  const safeSegments = Math.max(1, Math.floor(segments));
+  const segmentsArray = Array.from({ length: safeSegments });
+  const segmentRange = 1 / safeSegments;
+
+  return (
+    <View style={[styles.container, style]}>
+      {segmentsArray.map((_, index) => {
+        const start = index * segmentRange;
+        const end = (index + 1) * segmentRange;
+
+        // Interpolate this specific segment's fill percentage based on global progress
+        const widthInterpolation = animatedProgress.interpolate({
+          inputRange: [start, end],
+          outputRange: ['0%', '100%'],
+          extrapolate: 'clamp',
+        });
+
+        return (
+          <View
+            key={index}
+            style={[
+              styles.track,
+              { backgroundColor: activeTrackColor },
+              sizeStyles,
+              index < safeSegments - 1 && { marginRight: 3 },
+            ]}
+          >
+            <Animated.View
+              style={[
+                styles.fill,
+                { borderRadius: sizeStyles.borderRadius },
+                { backgroundColor: activeFillColor, width: widthInterpolation },
+              ]}
+            />
+          </View>
+        );
+      })}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    width: '100%',
+    alignItems: 'center',
+  },
+  track: {
+    flex: 1,
+    backgroundColor: '#f3e7da',
+    overflow: 'hidden',
+  },
+  fill: {
+    height: '100%',
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    bottom: 0,
+  },
+});

package/src/components/DataDisplay/StatBadge/StatBadge.stories.tsx

@@ -0,0 +1,82 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+import { StatBadge } from './StatBadge';
+import { theme } from '../../../styles/theme';
+
+const meta = {
+  title: 'Components/DataDisplay/StatBadge',
+  component: StatBadge,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'O **StatBadge** fica normalmente na `TopNavigationBar` para exibir as vidas, fogos e gemas do utilizador.\n\n### Exemplo de Uso\n```tsx\n<StatBadge \n  value={5}\n  variant="lives"\n  onPress={() => abrirLojaVidas()}\n/>\n```',
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: { control: 'radio', options: ['streak', 'xp', 'lives'] },
+    value: { control: 'text' },
+    status: { control: 'radio', options: ['active', 'inactive', 'at-risk'] },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 24, backgroundColor: theme.colors.cream }}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+export const Streak: Story = {
+  args: {
+    variant: 'streak',
+    value: 12,
+    status: 'active',
+  },
+};
+
+export const StreakAtRisk: Story = {
+  args: {
+    variant: 'streak',
+    value: 12,
+    status: 'at-risk',
+  },
+};
+
+export const StreakInactive: Story = {
+  args: {
+    variant: 'streak',
+    value: 0,
+    status: 'inactive',
+  },
+};
+
+export const XP: Story = {
+  args: {
+    variant: 'xp',
+    value: 240,
+  },
+};
+
+export const Lives: Story = {
+  args: {
+    variant: 'lives',
+    value: 5,
+  },
+};
+
+export const HeaderExample: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 12 }}>
+      <StatBadge variant="streak" value={12} />
+      <StatBadge variant="xp" value={240} />
+      <StatBadge variant="lives" value={5} />
+    </View>
+  ),
+};

package/src/components/DataDisplay/StatBadge/StatBadge.tsx

@@ -0,0 +1,135 @@
+import { useEffect, useRef } from 'react';
+import { View, StyleSheet, Animated } from 'react-native';
+import { theme } from '../../../styles/theme';
+import { Flame, Heart } from 'lucide-react-native';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { Typography } from '../../Typography/Typography';
+
+export type StatBadgeVariant = 'streak' | 'xp' | 'lives';
+export type StatBadgeStatus = 'active' | 'inactive' | 'at-risk';
+
+/**
+ * Badge estatístico usado no topo do ecrã para mostrar "fogo" (streak), corações ou gemas.
+ */
+export interface StatBadgeProps {
+  /** Valor numérico a apresentar. */
+  value: number | string;
+  /** Variante do ícone e cor associada. */
+  variant: StatBadgeVariant;
+  /** Estado da badge. */
+  status?: StatBadgeStatus;
+}
+
+export const StatBadge = ({
+  variant,
+  value,
+  status = 'active',
+}: StatBadgeProps) => {
+  const { scaleText } = useResponsive();
+  const pulseAnim = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    let anim: Animated.CompositeAnimation | null = null;
+
+    if (variant === 'streak' && status === 'at-risk') {
+      anim = Animated.loop(
+        Animated.sequence([
+          Animated.timing(pulseAnim, {
+            toValue: 1.3,
+            duration: 900,
+            useNativeDriver: false,
+          }),
+          Animated.timing(pulseAnim, {
+            toValue: 1,
+            duration: 900,
+            useNativeDriver: false,
+          }),
+        ])
+      );
+      anim.start();
+    } else {
+      pulseAnim.setValue(1);
+    }
+
+    return () => {
+      if (anim) {
+        anim.stop();
+      }
+    };
+  }, [variant, status, pulseAnim]);
+
+  const renderIcon = () => {
+    if (variant === 'streak') {
+      const color = status === 'inactive' || Number(value) === 0 ? theme.colors.brown[300] : theme.colors.primary;
+      const IconComp = (
+        <Flame size={16} fill={color} color={color} strokeWidth={2} />
+      );
+
+      if (status === 'at-risk') {
+        return (
+          <Animated.View style={{ transform: [{ scale: pulseAnim }] }}>
+            {IconComp}
+          </Animated.View>
+        );
+      }
+      return IconComp;
+    }
+
+    if (variant === 'xp') {
+      return (
+        <View
+          style={{
+            width: 11,
+            height: 11,
+            backgroundColor: theme.colors.primary,
+            transform: [{ rotate: '45deg' }],
+            borderRadius: 2,
+            marginHorizontal: 2, // to account for rotation bounds
+          }}
+        />
+      );
+    }
+
+    if (variant === 'lives') {
+      return (
+        <Heart size={18} fill={theme.colors.primary} color={theme.colors.primary} />
+      );
+    }
+    return null;
+  };
+
+  return (
+    <View style={styles.boxContainer}>
+      <View style={styles.iconContainer}>
+        {renderIcon()}
+      </View>
+      <Typography style={[styles.text, { fontSize: scaleText(16) }]}>
+        {value}
+      </Typography>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  boxContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: theme.colors.white,
+    borderColor: theme.colors.brown[100],
+    borderWidth: 1.5,
+    borderRadius: 12,
+    paddingVertical: 5,
+    paddingHorizontal: 10,
+    alignSelf: 'flex-start',
+  },
+  iconContainer: {
+    marginRight: 6,
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 18, // Fixed width to align nicely
+  },
+  text: {
+
+    color: theme.colors.brown[800],
+  },
+});

package/src/components/DataDisplay/StatBadge/index.ts

@@ -0,0 +1 @@
+export * from './StatBadge';

package/src/components/DataDisplay/Tag/Tag.stories.tsx

@@ -0,0 +1,63 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+import { Tag } from './Tag';
+
+const meta = {
+  title: 'Components/DataDisplay/Tag',
+  component: Tag,
+  parameters: { 
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'O componente **Tag** é uma pequena pílula de texto para dar contexto aos cartões, por exemplo "EM CURSO", "NOVO" ou "ESGOTADO".\n\n### Exemplo de Uso\n```tsx\n<Tag \n  label="NOVO"\n  variant="success"\n  size="sm"\n/>\n```',
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: { control: 'radio', options: ['neutro', 'primary', 'success', 'error', 'dark'] },
+    size: { control: 'radio', options: ['xs', 'sm', 'md', 'lg'] },
+    label: { control: 'text' },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 24 }}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+export const Default: Story = {
+  args: { label: 'Em Curso', variant: 'primary', size: 'sm' },
+};
+
+export const Variants: Story = {
+  args: { label: 'Variantes' },
+  render: () => (
+    <View style={{ gap: 10, flexDirection: 'row', flexWrap: 'wrap' }}>
+      <Tag label="A1" variant="neutro" />
+      <Tag label="Em Curso" variant="primary" />
+      <Tag label="Concluído" variant="success" />
+      <Tag label="Bloqueado" variant="error" />
+      <Tag label="30 min" variant="neutro" />
+      <Tag label="Dark Mode" variant="dark" />
+    </View>
+  ),
+};
+
+export const Sizes: Story = {
+  args: { label: 'Tamanhos' },
+  render: () => (
+    <View style={{ gap: 10, flexDirection: 'row', alignItems: 'center' }}>
+      <Tag label="Extra Small" size="xs" />
+      <Tag label="Small Tag" size="sm" />
+      <Tag label="Medium Tag" size="md" />
+      <Tag label="Large Tag" size="lg" />
+    </View>
+  ),
+};