@xetwa/design-system 1.0.37 → 1.0.39

package/package.json

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

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

@@ -75,6 +75,19 @@ export const ActiveDark: Story = {
     subtitle: 'Regatear, números, comida',
     subtext: '• 3/5',
     tagLabel: 'AULA MARCADA',
+    onSchedulePress: () => console.log('Agendar Aula'),
+    onReviewPress: () => console.log('Rever'),
+  },
+};
+
+export const ExamMode: Story = {
+  args: {
+    status: 'active-dark',
+    title: 'No mercado de Dakar',
+    subtitle: 'Exame de módulo',
+    subtext: '• 3/5',
+    tagLabel: 'POR FAZER',
+    onExamPress: () => console.log('Fazer Exame'),
   },
 };
 
@@ -129,6 +142,16 @@ export const Grid: Story = {
         subtitle="Conversação e prática" 
         subtext="• 4/4"
         tagLabel="AULA MARCADA"
+        onSchedulePress={() => {}}
+        onReviewPress={() => {}}
+      />
+      <ModuleCard 
+        status="active-dark" 
+        title="No mercado de Dakar" 
+        subtitle="Exame de módulo" 
+        subtext="• 3/5"
+        tagLabel="POR FAZER"
+        onExamPress={() => {}}
       />
     </View>
   ),

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

@@ -4,7 +4,7 @@ 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, RotateCcw, CalendarPlus } from 'lucide-react-native';
+import { Lock, Check, GraduationCap, RotateCcw, CalendarPlus, PenTool } from 'lucide-react-native';
 import { useResponsive } from '../../../hooks/useResponsive';
 import { Typography } from '../../Typography/Typography';
 import React, { useRef } from 'react';
@@ -16,7 +16,7 @@ export type ModuleCardStatus = 'active' | 'locked' | 'completed' | 'dark' | 'act
  * 
  * 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.
+ * - `active-dark`: O cartão é estático. Apenas os botões internos de "Agendar" (`onSchedulePress`), "Exame" (`onExamPress`) e "Rever" (`onReviewPress`) têm animação individual quando fornecidos.
  * - `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.
  */
@@ -47,6 +47,8 @@ export interface ModuleCardProps {
   style?: ViewStyle | ViewStyle[];
   /** Função de clique no botão de Agendar (modo active/dark). */
   onSchedulePress?: () => void;
+  /** Função de clique no botão principal de Exame (modo active/dark). */
+  onExamPress?: () => void;
   /** Função de clique no botão de Rever (modo completed/active/dark). */
   onReviewPress?: () => void;
 }
@@ -66,12 +68,14 @@ export const ModuleCard = ({
   onPress,
   style,
   onSchedulePress,
+  onExamPress,
   onReviewPress,
 }: ModuleCardProps) => {
   const { scale, scaleText, width } = useResponsive();
   const isMobileScreen = width < 400;
 
   const scheduleScale = useRef(new Animated.Value(1)).current;
+  const examScale = 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;
@@ -226,18 +230,7 @@ export const ModuleCard = ({
 
   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 (
     <Animated.View style={[{ transform: [{ scale: scaleAnim }] }, style]}>
@@ -276,7 +269,7 @@ export const ModuleCard = ({
             {title}
           </Typography>
 
-          {(subtitle || subtext || displaySubtext) && (
+          {(subtitle || subtext) && (
             <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: scale(2) }}>
               <Typography variant={subtitleVariant} style={[
                 styles.subtitle,
@@ -285,9 +278,9 @@ export const ModuleCard = ({
                   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>}
+                {subtitle}
+                {subtitle && subtext && ' '}
+                {subtext && <Typography variant={subtitleVariant} style={styles.subtext}>{subtext}</Typography>}
               </Typography>
               {tagLabel && (status === 'active-dark' || status === 'active') && (
                 <Tag
@@ -340,31 +333,52 @@ export const ModuleCard = ({
 
       {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>
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: scale(8) }}>
+            {onSchedulePress && (
+              <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>
+            {onExamPress && (
+              <Animated.View style={{ transform: [{ scale: examScale }] }}>
+                <Pressable 
+                  onPress={onExamPress}
+                  onPressIn={() => animateBtnIn(examScale)}
+                  onPressOut={() => animateBtnOut(examScale)}
+                  hitSlop={8}
+                  style={{ flexDirection: 'row', alignItems: 'center', backgroundColor: theme.colors.primary, paddingHorizontal: scale(14), paddingVertical: scale(6), borderRadius: 100 }}
+                >
+                  <PenTool 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) }}>Fazer Exame</Typography>
+                </Pressable>
+              </Animated.View>
+            )}
+          </View>
+
+          {onReviewPress && (
+            <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>
       )}