@xetwa/design-system 1.0.36 → 1.0.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xetwa/design-system",
-  "version": "1.0.36",
+  "version": "1.0.37",
   "type": "module",
   "publishConfig": {
     "access": "public"

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

@@ -10,13 +10,13 @@ const meta = {
     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```',
+        component: 'O **ModuleCard** exibe as lições no percurso principal do utilizador (a "Tree" de aprendizagem).\n\nPossui diferentes estados (`active`, `locked`, `completed`, `dark`, `active-dark`) e pode incluir barras de progresso fragmentadas.\n\n### Animações\n- **active**: O cartão inteiro é animado e reativo ao toque.\n- **active-dark**: O cartão é fixo, apenas os botões de ação ("Agendar Aula" e "Rever") são animados individualmente.\n- **completed**: O cartão é fixo, apenas o botão de revisão ("Rever Módulo" ou o ícone) tem animação individual.\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'] },
+    status: { control: 'radio', options: ['active', 'locked', 'completed', 'dark', 'active-dark'] },
     number: { control: 'number' },
     title: { control: 'text' },
     subtitle: { control: 'text' },
@@ -68,6 +68,26 @@ export const DarkLocked: Story = {
   },
 };
 
+export const ActiveDark: Story = {
+  args: {
+    status: 'active-dark',
+    title: 'No mercado de Dakar',
+    subtitle: 'Regatear, números, comida',
+    subtext: '• 3/5',
+    tagLabel: 'AULA MARCADA',
+  },
+};
+
+export const Completed: Story = {
+  args: {
+    status: 'completed',
+    number: 1,
+    title: 'Saudações & teranga',
+    subtitle: 'Concluído',
+    subtext: '• 5/5',
+  },
+};
+
 export const Grid: Story = {
   args: {
     status: 'active',
@@ -103,6 +123,13 @@ export const Grid: Story = {
         title="Aula ao vivo + Teste final" 
         subtitle="Acaba os 4 módulos para desbloquear" 
       />
+      <ModuleCard 
+        status="active-dark" 
+        title="Aula de revisão agendada" 
+        subtitle="Conversação e prática" 
+        subtext="• 4/4"
+        tagLabel="AULA MARCADA"
+      />
     </View>
   ),
 };

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

@@ -1,20 +1,27 @@
-import { View, StyleSheet, Pressable } from 'react-native';
+import { View, StyleSheet, Pressable, Animated } 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 { Lock, Check, GraduationCap, RotateCcw, CalendarPlus } from 'lucide-react-native';
 import { useResponsive } from '../../../hooks/useResponsive';
 import { Typography } from '../../Typography/Typography';
+import React, { useRef } from 'react';
 
-export type ModuleCardStatus = 'active' | 'locked' | 'completed' | 'dark';
+export type ModuleCardStatus = 'active' | 'locked' | 'completed' | 'dark' | 'active-dark';
 
 /**
  * Cartão que representa uma lição ou módulo no caminho de aprendizagem.
+ * 
+ * Regras de Animação e Clique:
+ * - `active`: O cartão como um todo tem animação de escala e é clicável via `onPress`.
+ * - `active-dark`: O cartão é estático. Apenas os botões internos de "Agendar" (`onSchedulePress`) e "Rever" (`onReviewPress`) têm animação individual.
+ * - `completed`: O cartão é estático. Apenas o ícone/botão superior direito de "Rever" (`onReviewPress`) tem animação individual.
+ * - `locked` / `dark`: O cartão não é interativo.
  */
 export interface ModuleCardProps {
-  /** Estado atual da lição (ativa, trancada, concluída, ou o módulo "dark" final). */
+  /** Estado atual da lição (ativa, trancada, concluída, etc). */
   status: ModuleCardStatus;
   /** Número da lição (ex: 1, 2, 3). */
   number?: number;
@@ -38,6 +45,10 @@ export interface ModuleCardProps {
   /** Cor customizada para o subtítulo. */
   subtitleColor?: string;
   style?: ViewStyle | ViewStyle[];
+  /** Função de clique no botão de Agendar (modo active/dark). */
+  onSchedulePress?: () => void;
+  /** Função de clique no botão de Rever (modo completed/active/dark). */
+  onReviewPress?: () => void;
 }
 
 export const ModuleCard = ({
@@ -54,11 +65,53 @@ export const ModuleCard = ({
   subtitleColor,
   onPress,
   style,
+  onSchedulePress,
+  onReviewPress,
 }: ModuleCardProps) => {
   const { scale, scaleText, width } = useResponsive();
-
   const isMobileScreen = width < 400;
 
+  const scheduleScale = useRef(new Animated.Value(1)).current;
+  const reviewScale = useRef(new Animated.Value(1)).current;
+  const completedReviewScale = useRef(new Animated.Value(1)).current;
+  const scaleAnim = useRef(new Animated.Value(1)).current;
+
+  const handlePressIn = () => {
+    if (status !== 'active') return;
+    Animated.timing(scaleAnim, {
+      toValue: 0.95,
+      duration: 100,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const handlePressOut = () => {
+    if (status !== 'active') return;
+    Animated.spring(scaleAnim, {
+      toValue: 1,
+      friction: 4,
+      tension: 40,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const animateBtnIn = (anim: Animated.Value) => {
+    Animated.timing(anim, {
+      toValue: 0.9,
+      duration: 100,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const animateBtnOut = (anim: Animated.Value) => {
+    Animated.spring(anim, {
+      toValue: 1,
+      friction: 4,
+      tension: 40,
+      useNativeDriver: true,
+    }).start();
+  };
+
   const getContainerStyle = () => {
     switch (status) {
       case 'active':
@@ -81,6 +134,7 @@ export const ModuleCard = ({
           ...theme.shadows.sm,
         };
       case 'dark':
+      case 'active-dark':
         return {
           borderColor: theme.colors.brown[800],
           borderWidth: 0,
@@ -96,6 +150,7 @@ export const ModuleCard = ({
       case 'locked':
         return theme.colors.brown[400];
       case 'dark':
+      case 'active-dark':
         return theme.colors.white;
       default:
         return theme.colors.brown[800];
@@ -104,7 +159,7 @@ export const ModuleCard = ({
 
   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 subtitleStyleColor = subtitleColor || (status === 'completed' ? theme.colors.success : status === 'locked' || status === 'dark' || status === 'active-dark' ? theme.colors.brown[300] : theme.colors.brown[500]);
 
   const activeShadow = status === 'active' ? {
     shadowColor: theme.colors.primary,
@@ -151,6 +206,8 @@ export const ModuleCard = ({
         </View>
       );
     }
+
+
     
     return (
       <Badge
@@ -166,62 +223,99 @@ export const ModuleCard = ({
   const cardPaddingH = size === 'xl' ? scale(20) : size === 'lg' ? scale(18) : isMobileScreen ? scale(12) : scale(15);
   
   const titleVariant = size === 'xl' ? 'h1' : size === 'lg' ? 'h2' : 'h3';
+
   const subtitleVariant = size === 'xl' ? 'bodyLg' : size === 'lg' ? 'bodyMd' : 'bodySm';
 
+  let displaySubtext = subtext;
+  if (status === 'active-dark') {
+    if (subtext) {
+      if (subtext.trim().startsWith('•')) {
+        displaySubtext = `Aula de revisão ${subtext.trim()}`;
+      } else {
+        displaySubtext = `Aula de revisão • ${subtext}`;
+      }
+    } else {
+      displaySubtext = 'Aula de revisão';
+    }
+  }
+
   return (
-    <Pressable
-      style={[
-        styles.container,
-        containerStyle,
-        status === 'active' && activeShadow,
-        {
-          paddingVertical: cardPaddingV,
-          paddingHorizontal: cardPaddingH,
-          borderRadius: scale(18),
-        },
-        style,
-      ]}
-      onPress={onPress}
-      disabled={!onPress || (status === 'locked' && !onPress)}
-    >
+    <Animated.View style={[{ transform: [{ scale: scaleAnim }] }, style]}>
+      <Pressable
+        style={[
+          styles.container,
+          containerStyle,
+          status === 'active' && activeShadow,
+          {
+            paddingVertical: cardPaddingV,
+            paddingHorizontal: cardPaddingH,
+            borderRadius: scale(18),
+          },
+        ]}
+        onPress={onPress}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        disabled={status === 'locked'}
+      >
       <View style={styles.topRow}>
         <View style={styles.leftCol}>
           {renderLeftIconBox()}
         </View>
 
         <View style={[styles.content, { marginLeft: colGap }]}>
-          <Typography variant={titleVariant} style={[
-            styles.title,
-            {
-              color: titleStyleColor,
-              marginBottom: scale(2),
-            }
-          ]}>
+          <Typography 
+            variant={titleVariant} 
+            style={[
+              styles.title,
+              {
+                color: titleStyleColor,
+                marginBottom: scale(2),
+              }
+            ]}
+          >
             {title}
           </Typography>
 
-          {(subtitle || subtext) && (
-            <Typography variant={subtitleVariant} style={[
-              styles.subtitle,
-              {
-                color: subtitleStyleColor,
-              }
-            ]}>
-              {subtitle}
-              {subtitle && subtext && ' '}
-              {subtext && <Typography variant={subtitleVariant} style={styles.subtext}>{subtext}</Typography>}
-            </Typography>
+          {(subtitle || subtext || displaySubtext) && (
+            <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: scale(2) }}>
+              <Typography variant={subtitleVariant} style={[
+                styles.subtitle,
+                {
+                  color: subtitleStyleColor,
+                  flexShrink: 1, // Para o texto encolher se a tag ocupar espaço
+                }
+              ]}>
+                {status !== 'active-dark' && subtitle}
+                {status !== 'active-dark' && subtitle && displaySubtext && ' '}
+                {displaySubtext && <Typography variant={subtitleVariant} style={styles.subtext}>{displaySubtext}</Typography>}
+              </Typography>
+              {tagLabel && (status === 'active-dark' || status === 'active') && (
+                <Tag
+                  label={tagLabel}
+                  variant="primary"
+                  size={isMobileScreen ? 'xs' : 'sm'}
+                  style={{ marginLeft: scale(8) }}
+                />
+              )}
+            </View>
           )}
         </View>
 
-        {(tagLabel || status === 'locked' || status === 'dark') && (
+        {(status === 'locked' || status === 'dark' || status === 'completed') && (
           <View style={[styles.rightContent, { marginLeft: colGap }]}>
-            {tagLabel && status === 'active' && (
-              <Tag
-                label={tagLabel}
-                variant="primary"
-                size={isMobileScreen ? 'xs' : 'sm'}
-              />
+            {status === 'completed' && (
+              <Animated.View style={{ transform: [{ scale: completedReviewScale }] }}>
+                <Pressable 
+                  style={styles.reviewIconButton} 
+                  onPress={onReviewPress || (() => {})}
+                  onPressIn={() => animateBtnIn(completedReviewScale)}
+                  onPressOut={() => animateBtnOut(completedReviewScale)}
+                  hitSlop={10}
+                >
+                  <RotateCcw stroke={theme.colors.primary} strokeWidth={2.5} size={isMobileScreen ? scale(20) : scale(24)} />
+                  <Typography variant="label" style={[styles.reviewIconText, { fontSize: scaleText(9) }]}>REVER</Typography>
+                </Pressable>
+              </Animated.View>
             )}
             {(status === 'locked' || status === 'dark') && (
               <Lock
@@ -243,7 +337,40 @@ export const ModuleCard = ({
           />
         </View>
       )}
+
+      {status === 'active-dark' && (
+        <View style={styles.compactDarkFooter}>
+          <Animated.View style={{ transform: [{ scale: scheduleScale }] }}>
+            <Pressable 
+              onPress={onSchedulePress || (() => {})}
+              onPressIn={() => animateBtnIn(scheduleScale)}
+              onPressOut={() => animateBtnOut(scheduleScale)}
+              hitSlop={8}
+              style={{ flexDirection: 'row', alignItems: 'center', backgroundColor: theme.colors.primary, paddingHorizontal: scale(14), paddingVertical: scale(6), borderRadius: 100 }}
+            >
+              <CalendarPlus stroke={theme.colors.white} strokeWidth={2.5} size={scale(14)} />
+              <Typography variant="label" style={{ color: theme.colors.white, fontSize: scaleText(12), fontWeight: 'bold', marginLeft: scale(6) }}>Agendar Aula</Typography>
+            </Pressable>
+          </Animated.View>
+
+          <Animated.View style={{ transform: [{ scale: reviewScale }] }}>
+            <Pressable 
+              style={styles.compactReviewBtn} 
+              onPress={onReviewPress || (() => {})}
+              onPressIn={() => animateBtnIn(reviewScale)}
+              onPressOut={() => animateBtnOut(reviewScale)}
+              hitSlop={8}
+            >
+              <RotateCcw stroke={theme.colors.primary} strokeWidth={2.5} size={scale(16)} />
+              <Typography variant="label" style={[styles.reviewIconText, { color: theme.colors.primary, fontSize: scaleText(10), marginLeft: scale(4), marginTop: 0 }]}>REVER</Typography>
+            </Pressable>
+          </Animated.View>
+        </View>
+      )}
+
+
     </Pressable>
+    </Animated.View>
   );
 };
 
@@ -304,4 +431,35 @@ const styles = StyleSheet.create({
     marginLeft: 12,
     flexShrink: 0,
   },
+  reviewIconButton: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 4,
+  },
+  reviewIconText: {
+    color: theme.colors.primary,
+    marginTop: 2,
+    textAlign: 'center',
+  },
+  compactDarkFooter: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginTop: 10,
+    paddingTop: 8,
+    borderTopWidth: 1,
+    borderTopColor: 'rgba(255,255,255,0.1)',
+  },
+  compactScheduleBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  compactReviewBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'rgba(255,255,255,0.05)',
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 8,
+  },
 });