@xetwa/design-system 1.0.23 → 1.0.25

package/package.json

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

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

@@ -15,7 +15,7 @@ const meta = {
     layout: 'padded',
     docs: {
       description: {
-        component: 'O **AnswerOptionCard** é utilizado nos ecrãs de Lição/Quiz para exibir as múltiplas escolhas de um exercício.\n\n### Exemplo de Uso\n```tsx\n<AnswerOptionCard \n  status="default"\n  label="Boa noite"\n  prefixNode={<CircleLetter letter="A" />}\n  onPress={() => selecionar("A")}\n/>\n```',
+        component: 'O **AnswerOptionCard** é utilizado nos ecrãs de Lição/Quiz para exibir as múltiplas escolhas de um exercício.\n\n### Exemplo de Uso\n```tsx\n<AnswerOptionCard \n  status="default"\n  label="Boa noite"\n  prefix="A"\n  onPress={() => selecionar("A")}\n/>\n```',
       }
     }
   },
@@ -36,43 +36,13 @@ const meta = {
 export default meta;
 type Story = StoryObj<any>;
 
-const CircleLetter = ({ letter, selected = false, correct = false }: { letter: string; selected?: boolean; correct?: boolean }) => {
-  let bgColor = theme.colors.brown[100];
-  let textColor = theme.colors.brown[500];
 
-  if (selected) {
-    bgColor = theme.colors.primary;
-    textColor = theme.colors.white;
-  } else if (correct) {
-    bgColor = theme.colors.success;
-    textColor = theme.colors.white;
-  }
-
-  return (
-    <View style={{
-      width: 28,
-      height: 28,
-      borderRadius: 14,
-      backgroundColor: bgColor,
-      alignItems: 'center',
-      justifyContent: 'center',
-    }}>
-      <Typography style={{
-
-        fontSize: 14,
-        color: textColor,
-      }}>
-        {letter}
-      </Typography>
-    </View>
-  );
-};
 
 export const Default: Story = {
   args: {
     status: 'default',
     label: 'Boa noite',
-    prefixNode: <CircleLetter letter="A" />,
+    prefix: 'A',
   },
 };
 
@@ -118,19 +88,19 @@ export const InteractiveDemo: Story = {
         <AnswerOptionCard
           status={getStatus('A')}
           label="Boa noite"
-          prefixNode={<CircleLetter letter="A" selected={selected === 'A'} correct={statusMap.A === 'correct'} />}
+          prefix="A"
           onPress={() => handlePress('A')}
         />
         <AnswerOptionCard
           status={getStatus('B')}
           label="Bom dia / Olá"
-          prefixNode={<CircleLetter letter="B" selected={selected === 'B'} correct={statusMap.B === 'correct'} />}
+          prefix="B"
           onPress={() => handlePress('B')}
         />
         <AnswerOptionCard
           status={getStatus('C')}
           label="Obrigado"
-          prefixNode={<CircleLetter letter="C" selected={selected === 'C'} correct={statusMap.C === 'correct'} />}
+          prefix="C"
           onPress={() => handlePress('C')}
         />
 
@@ -172,11 +142,11 @@ export const Grid: Story = {
   },
   render: () => (
     <View style={{ gap: 16 }}>
-      <AnswerOptionCard status="default" label="Boa noite" prefixNode={<CircleLetter letter="A" />} />
-      <AnswerOptionCard status="selected" label="Bom dia / Olá" prefixNode={<CircleLetter letter="B" selected />} />
-      <AnswerOptionCard status="correct" label="Bom dia / Olá" prefixNode={<CircleLetter letter="B" correct />} />
-      <AnswerOptionCard status="wrong" label="Obrigado" prefixNode={<CircleLetter letter="C" />} />
-      <AnswerOptionCard status="disabled" label="Por favor" prefixNode={<CircleLetter letter="D" />} />
+      <AnswerOptionCard status="default" label="Boa noite" prefix="A" />
+      <AnswerOptionCard status="selected" label="Bom dia / Olá" prefix="B" />
+      <AnswerOptionCard status="correct" label="Bom dia / Olá" prefix="B" />
+      <AnswerOptionCard status="wrong" label="Obrigado" prefix="C" />
+      <AnswerOptionCard status="disabled" label="Por favor" prefix="D" />
     </View>
   ),
 };

package/src/components/Cards/AnswerOptionCard/AnswerOptionCard.tsx

@@ -1,4 +1,5 @@
-import { View, StyleSheet, Pressable, Platform } from 'react-native';
+import { View, StyleSheet, Pressable, Platform, Animated } from 'react-native';
+import React from 'react';
 import type { ViewStyle } from 'react-native';
 import { theme } from '../../../styles/theme';
 import type { ReactNode } from 'react';
@@ -20,10 +21,10 @@ export interface AnswerOptionCardProps {
   prefixNode?: ReactNode;
   /** Letra ou número a exibir automaticamente do lado esquerdo. */
   prefix?: string | number;
-  /** Nó renderizado à direita. Se omitido, renderiza automaticamente ícones de check/cross consoante o estado. */
-  suffixNode?: ReactNode;
   /** Callback para o evento de clique. */
   onPress?: () => void;
+  /** Define o tamanho do componente. */
+  size?: 'sm' | 'md' | 'lg';
   /** Estilos adicionais para o container. */
   style?: ViewStyle | ViewStyle[];
 }
@@ -33,11 +34,30 @@ export const AnswerOptionCard = ({
   label,
   prefixNode,
   prefix,
-  suffixNode,
   onPress,
+  size = 'md',
   style,
 }: AnswerOptionCardProps) => {
   const { scale, scaleText } = useResponsive();
+  const scaleAnim = React.useRef(new Animated.Value(1)).current;
+
+  React.useEffect(() => {
+    if (status !== 'default' && status !== 'disabled') {
+      Animated.sequence([
+        Animated.timing(scaleAnim, {
+          toValue: 0.95,
+          duration: 100,
+          useNativeDriver: true,
+        }),
+        Animated.spring(scaleAnim, {
+          toValue: 1,
+          friction: 4,
+          tension: 40,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    }
+  }, [status, scaleAnim]);
 
   const getStyles = () => {
     switch (status) {
@@ -123,36 +143,88 @@ export const AnswerOptionCard = ({
         </View>
       );
     }
-    return suffixNode;
+    return null;
+  };
+
+  const getPaddingVertical = () => {
+    switch (size) {
+      case 'lg': return scale(14);
+      case 'sm': return scale(8);
+      default: return scale(10);
+    }
+  };
+
+  const getPaddingHorizontal = () => {
+    switch (size) {
+      case 'lg': return scale(20);
+      case 'sm': return scale(12);
+      default: return scale(15);
+    }
+  };
+
+  const getMinHeight = () => {
+    switch (size) {
+      case 'lg': return scale(64);
+      case 'sm': return scale(48);
+      default: return scale(56);
+    }
+  };
+
+  const getBorderRadius = () => {
+    switch (size) {
+      case 'lg': return scale(16);
+      case 'sm': return scale(10);
+      default: return scale(12);
+    }
+  };
+
+  const getFontSize = () => {
+    switch (size) {
+      case 'lg': return scaleText(18);
+      case 'sm': return scaleText(14);
+      default: return scaleText(16);
+    }
   };
 
   return (
-    <Pressable
-      style={[
-        styles.container,
-        {
-          borderColor: vStyles.borderColor,
-          backgroundColor: vStyles.backgroundColor,
-          paddingVertical: scale(10),
-          paddingHorizontal: scale(15),
-          borderRadius: scale(12),
-          minHeight: scale(56),
-        },
-        webShadow,
-        style,
-      ]}
-      onPress={status !== 'disabled' ? onPress : undefined}
-      disabled={status === 'disabled' || !onPress}
-    >
-      <View style={styles.contentRow}>
-        <View style={styles.leftSection}>
-          {prefixNode && <View style={[styles.prefixContainer, { marginRight: scale(12) }]}>{prefixNode}</View>}
-          {prefix && !prefixNode && (
-            <View style={[styles.prefixContainer, { marginRight: scale(12) }]}>
+    <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
+      <Pressable
+        style={[
+          styles.container,
+          {
+            borderColor: vStyles.borderColor,
+            backgroundColor: vStyles.backgroundColor,
+            paddingVertical: getPaddingVertical(),
+            paddingHorizontal: getPaddingHorizontal(),
+            borderRadius: getBorderRadius(),
+            minHeight: getMinHeight(),
+          },
+          webShadow,
+          style,
+        ]}
+        onPress={status !== 'disabled' ? onPress : undefined}
+        disabled={status === 'disabled' || !onPress}
+      >
+        <View style={styles.contentRow}>
+          <View style={styles.leftSection}>
+            {prefixNode && <View style={[styles.prefixContainer, { marginRight: scale(12) }]}>{prefixNode}</View>}
+            {prefix && !prefixNode && (
+              <View style={[
+                styles.prefixContainer, 
+                { 
+                  marginRight: scale(12),
+                  width: scale(28),
+                  height: scale(28),
+                  borderRadius: scale(14),
+                backgroundColor: status === 'correct' ? theme.colors.success : status === 'wrong' ? theme.colors.error : theme.colors.brown[100],
+                alignItems: 'center',
+                justifyContent: 'center'
+              }
+            ]}>
               <Typography style={{ 
-                color: status === 'selected' || status === 'correct' ? theme.colors.primary : theme.colors.brown[400],
+                color: status === 'correct' || status === 'wrong' ? theme.colors.white : theme.colors.brown[500],
                 fontWeight: 'bold',
-                fontSize: scaleText(16)
+                fontSize: scaleText(14)
               }}>
                 {prefix}
               </Typography>
@@ -163,7 +235,7 @@ export const AnswerOptionCard = ({
               styles.label,
               {
                 color: status === 'disabled' ? theme.colors.brown[300] : vStyles.textColor,
-                fontSize: scaleText(15),
+                fontSize: getFontSize(),
               }
             ]}
           >
@@ -173,6 +245,7 @@ export const AnswerOptionCard = ({
         {renderSuffix()}
       </View>
     </Pressable>
+    </Animated.View>
   );
 };