@xetwa/design-system 1.0.2

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

@@ -0,0 +1,201 @@
+import { View, StyleSheet, Pressable, Platform } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { theme } from '../../../styles/theme';
+import type { ReactNode } from 'react';
+import { Check, X } from 'lucide-react-native';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { Typography } from '../../Typography/Typography';
+
+export type AnswerOptionStatus = 'default' | 'selected' | 'correct' | 'wrong' | 'disabled';
+
+/**
+ * Cartão usado em exercícios e quizzes para representar uma opção de resposta.
+ */
+export interface AnswerOptionCardProps {
+  /** O estado atual da opção de resposta. Altera cores e ícones. */
+  status?: AnswerOptionStatus;
+  /** O texto principal da opção. */
+  label: string;
+  /** Nó renderizado à esquerda do texto (ex: letra 'A', 'B', 'C'). */
+  prefixNode?: ReactNode;
+  /** Nó renderizado à direita. Se omitido, renderiza automaticamente ícones de check/cross consoante o estado. */
+  suffixNode?: ReactNode;
+  /** Callback para o evento de clique. */
+  onPress?: () => void;
+  /** Estilos adicionais para o container. */
+  style?: ViewStyle | ViewStyle[];
+}
+
+export const AnswerOptionCard = ({
+  status = 'default',
+  label,
+  prefixNode,
+  suffixNode,
+  onPress,
+  style,
+}: AnswerOptionCardProps) => {
+  const { scale, scaleText } = useResponsive();
+
+  const getStyles = () => {
+    switch (status) {
+      case 'selected':
+        return {
+          borderColor: theme.colors.primary,
+          backgroundColor: theme.colors.primaryLight,
+          shadowColor: 'rgba(242,151,75,0.25)',
+          textColor: theme.colors.brown[800],
+        };
+      case 'correct':
+        return {
+          borderColor: theme.colors.success,
+          backgroundColor: '#eafaf2',
+          shadowColor: 'rgba(22,145,90,0.2)',
+          textColor: theme.colors.brown[800],
+        };
+      case 'wrong':
+        return {
+          borderColor: theme.colors.error,
+          backgroundColor: '#fdf0ee',
+          shadowColor: 'rgba(207,91,72,0.2)',
+          textColor: theme.colors.brown[800],
+        };
+      case 'disabled':
+        return {
+          borderColor: theme.colors.brown[100],
+          backgroundColor: theme.colors.white,
+          shadowColor: theme.colors.brown[100],
+          textColor: theme.colors.brown[300],
+        };
+      case 'default':
+      default:
+        return {
+          borderColor: theme.colors.brown[100],
+          backgroundColor: theme.colors.white,
+          shadowColor: theme.colors.brown[100],
+          textColor: theme.colors.brown[800],
+        };
+    }
+  };
+
+  const vStyles = getStyles();
+
+  const webShadow = Platform.OS === 'web' ? {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    boxShadow: `0 3px 0 ${vStyles.shadowColor}` as any,
+  } : {
+    borderBottomWidth: 5,
+    borderBottomColor: vStyles.shadowColor,
+  };
+
+  const renderSuffix = () => {
+    if (status === 'correct') {
+      return (
+        <View style={[
+          styles.suffixCircle,
+          {
+            width: scale(24),
+            height: scale(24),
+            borderRadius: scale(12),
+            marginLeft: scale(12),
+            backgroundColor: theme.colors.success,
+          }
+        ]}>
+          <Check stroke={theme.colors.white} strokeWidth={2.4} size={scale(14)} />
+        </View>
+      );
+    }
+    if (status === 'wrong') {
+      return (
+        <View style={[
+          styles.suffixCircle,
+          {
+            width: scale(24),
+            height: scale(24),
+            borderRadius: scale(12),
+            marginLeft: scale(12),
+            backgroundColor: theme.colors.error,
+          }
+        ]}>
+          <X stroke={theme.colors.white} strokeWidth={2.4} size={scale(14)} />
+        </View>
+      );
+    }
+    return suffixNode;
+  };
+
+  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>}
+          <Typography
+            style={[
+              styles.label,
+              {
+                color: status === 'disabled' ? theme.colors.brown[300] : vStyles.textColor,
+                fontSize: scaleText(15),
+              }
+            ]}
+          >
+            {label}
+          </Typography>
+        </View>
+        {renderSuffix()}
+      </View>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 10,
+    paddingHorizontal: 15,
+    borderRadius: 12,
+    borderWidth: 2,
+    borderStyle: 'solid',
+    justifyContent: 'center',
+    minHeight: 56,
+  },
+  contentRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+  },
+  leftSection: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+  },
+  prefixContainer: {
+    marginRight: 12,
+  },
+  label: {
+
+    fontSize: 15,
+  },
+  suffixCircle: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: 12,
+  },
+});

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

@@ -0,0 +1,148 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+import { BaseCard } from './BaseCard';
+import { theme } from '../../../styles/theme';
+import { Typography } from '../../Typography/Typography';
+
+const meta = {
+  title: 'Components/Cards/BaseCard',
+  component: BaseCard,
+  parameters: { 
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'O **BaseCard** encapsula os estados nativos (hover, pressed, disabled) e estilos (bordas, sombras).\n\n### Exemplo de Uso\n```tsx\n<BaseCard \n  onPress={() => console.log("Clicado!")}\n  isSelected={true}\n  paddingHorizontal={20}\n  paddingVertical={16}\n>\n  <Typography>Conteúdo dentro do cartão</Typography>\n</BaseCard>\n```',
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    backgroundColor: { control: 'color' },
+    borderColor: { control: 'color' },
+    borderWidth: { control: 'number' },
+    borderRadius: { control: 'number' },
+    borderStyle: { control: { type: 'select', options: ['solid', 'dashed'] } },
+    shadow: { control: { type: 'select', options: ['none', 'sm', 'md', 'lg'] } },
+    isSelected: { control: 'boolean' },
+    opacity: { control: { type: 'number', min: 0, max: 1, step: 0.1 } },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 24, maxWidth: 400, backgroundColor: '#f5f0eb' }}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+export const Default: Story = {
+  args: {
+    shadow: 'none',
+    children: (
+      <View style={{ gap: 4 }}>
+        <Typography style={{ fontFamily: theme.fonts.title, fontWeight: '700', fontSize: 16, color: '#51332d' }}>
+          Card Content Title
+        </Typography>
+        <Typography style={{ fontFamily: theme.fonts.body, fontWeight: '500', fontSize: 12, color: '#9a8478' }}>
+          This is a simple BaseCard container. It holds any children React elements and inherits standard typography.
+        </Typography>
+      </View>
+    ),
+  },
+};
+
+export const Dashed: Story = {
+  args: {
+    borderStyle: 'dashed',
+    borderColor: '#d8c7b8',
+    children: (
+      <View>
+        <Typography style={{ fontFamily: theme.fonts.body, fontWeight: '700', fontSize: 13, color: '#cf7a30' }}>
+          EM CURSO
+        </Typography>
+      </View>
+    ),
+  },
+};
+
+export const Interactive: Story = {
+  args: {
+    shadow: 'sm',
+    onPress: () => alert('Card clicked!'),
+    children: (
+      <View style={{ gap: 4 }}>
+        <Typography style={{ fontFamily: theme.fonts.title, fontWeight: '700', fontSize: 16, color: '#51332d' }}>
+          Clickable Card
+        </Typography>
+        <Typography style={{ fontFamily: theme.fonts.body, fontWeight: '500', fontSize: 12, color: '#9a8478' }}>
+          Tap on this card to trigger an alert and show selection animations.
+        </Typography>
+      </View>
+    ),
+  },
+};
+
+export const WithDivider: Story = {
+  name: "Com Divisor (Divider)",
+  args: {
+    children: (
+      <View>
+        {/* Header Area */}
+        <View style={{ gap: 4 }}>
+          <Typography style={{ fontFamily: theme.fonts.title, fontWeight: '700', fontSize: 16, color: '#51332d' }}>
+            Prof. Camille
+          </Typography>
+          <Typography style={{ fontFamily: theme.fonts.body, fontSize: 12, color: '#9a8478' }}>
+            Conversação A1
+          </Typography>
+        </View>
+
+        {/* Divider */}
+        <BaseCard.Divider />
+
+        {/* Footer Area */}
+        <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+          <Typography style={{ fontFamily: theme.fonts.body, fontWeight: '700', fontSize: 13, color: '#51332d' }}>
+            Ter, 24 Mar
+          </Typography>
+          <Typography style={{ fontFamily: theme.fonts.body, fontWeight: '700', fontSize: 13, color: '#51332d' }}>
+            17:30
+          </Typography>
+        </View>
+      </View>
+    ),
+  },
+};
+
+export const SoftVariant: Story = {
+  args: {
+    variant: 'soft',
+    children: (
+      <View style={{ gap: 8 }}>
+        <Typography variant="h3">Je m'appelle So|</Typography>
+        <Typography variant="bodyMd" color={theme.colors.brown[500]}>
+          /ʒə m a.pɛl/ · "chamo-me"
+        </Typography>
+      </View>
+    ),
+  },
+};
+
+export const SoftVariantNoBorder: Story = {
+  args: {
+    variant: 'soft',
+    borderWidth: 0,
+    children: (
+      <View style={{ gap: 8 }}>
+        <Typography variant="h3">Bonjour !</Typography>
+        <Typography variant="bodyMd" color={theme.colors.brown[500]}>
+          /bɔ̃.ʒuʁ/ · "bom dia"
+        </Typography>
+      </View>
+    ),
+  },
+};

package/src/components/Cards/BaseCard/BaseCard.tsx

@@ -0,0 +1,181 @@
+import type { ReactNode } from 'react';
+import { View, Pressable } from 'react-native';
+import type { ViewStyle, DimensionValue } from 'react-native';
+import { theme } from '../../../styles/theme';
+import { useResponsive } from '../../../hooks/useResponsive';
+
+/**
+ * Cartão base e fundacional do Design System.
+ * Fornece a estrutura comum de bordas, fundos, sombras e estados interativos
+ * (hover, selected, pressed, disabled) sobre a qual outros cartões (ex: TeacherCard) são construídos.
+ */
+export interface BaseCardProps {
+  /** O conteúdo a ser renderizado dentro do cartão. */
+  children?: ReactNode;
+  
+  /** Variante de estilo do cartão */
+  variant?: 'default' | 'soft';
+  
+  // Container styling
+  backgroundColor?: string;
+  borderRadius?: number;
+  borderWidth?: number;
+  borderColor?: string;
+  borderStyle?: 'solid' | 'dashed';
+  
+  // Padding & Layout
+  padding?: number;
+  paddingVertical?: number;
+  paddingHorizontal?: number;
+  
+  // Sizing
+  width?: DimensionValue;
+  height?: DimensionValue;
+  minHeight?: DimensionValue;
+  
+  // Shadow presets: 'none' | 'sm' | 'md' | 'lg'
+  shadow?: 'none' | 'sm' | 'md' | 'lg';
+  shadowColor?: string;
+  
+  // Interactive / Pressable behavior
+  onPress?: () => void;
+  disabled?: boolean;
+  
+  // Selection state
+  isSelected?: boolean;
+  selectedBorderColor?: string;
+  selectedBackgroundColor?: string;
+  selectedShadowColor?: string;
+  
+  // Opacity & other styles
+  opacity?: number;
+  overflow?: 'visible' | 'hidden';
+  style?: ViewStyle | ViewStyle[];
+}
+
+export const BaseCard = ({
+  children,
+  variant = 'default',
+  backgroundColor,
+  borderRadius = 16,
+  borderWidth = 1.5,
+  borderColor,
+  borderStyle = 'solid',
+  padding,
+  paddingVertical = 12,
+  paddingHorizontal = 14,
+  width,
+  height,
+  minHeight,
+  shadow = 'none',
+  shadowColor,
+  onPress,
+  disabled = false,
+  isSelected = false,
+  selectedBorderColor = '#f2974b',
+  selectedBackgroundColor = '#fef6ee',
+  selectedShadowColor,
+  opacity = 1.0,
+  overflow = 'hidden',
+  style,
+}: BaseCardProps) => {
+  const { scale } = useResponsive();
+
+  // Define fallback colors based on variant if not explicitly provided
+  const resolvedBackgroundColor = backgroundColor || (variant === 'soft' ? theme.colors.brown[50] : theme.colors.white);
+  const resolvedBorderColor = borderColor || theme.colors.brown[100]; // #efe2d6
+
+  // Resolve shadow styles based on theme
+  const getShadowStyle = () => {
+    if (shadow === 'none') return {};
+    const baseShadow = theme.shadows[shadow];
+    if (shadowColor && baseShadow) {
+      return {
+        ...baseShadow,
+        shadowColor,
+      };
+    }
+    return baseShadow || {};
+  };
+
+  // Determine active styles based on selection state
+  const activeBg = isSelected ? selectedBackgroundColor : resolvedBackgroundColor;
+  const activeBorderColor = isSelected ? selectedBorderColor : resolvedBorderColor;
+  const activeBorderWidth = isSelected ? 2 : borderWidth;
+  const activeShadow = isSelected
+    ? {
+        shadowColor: selectedShadowColor || '#f2974b',
+        shadowOffset: { width: 0, height: scale(4) },
+        shadowOpacity: 0.14,
+        shadowRadius: scale(14),
+        elevation: 4,
+      }
+    : getShadowStyle();
+
+  // Consolidate card styles with responsive scaling
+  const cardStyle: ViewStyle = {
+    backgroundColor: activeBg,
+    borderRadius: scale(borderRadius),
+    borderWidth: borderWidth === 0 && !isSelected ? 0 : activeBorderWidth,
+    borderColor: activeBorderColor,
+    borderStyle,
+    padding: padding !== undefined ? scale(padding) : undefined,
+    paddingVertical: padding === undefined ? scale(paddingVertical) : undefined,
+    paddingHorizontal: padding === undefined ? scale(paddingHorizontal) : undefined,
+    width: width !== undefined ? width : '100%',
+    height,
+    minHeight,
+    opacity,
+    overflow,
+    ...activeShadow,
+  };
+
+  if (onPress) {
+    return (
+      <Pressable
+        onPress={onPress}
+        disabled={disabled}
+        style={({ pressed }) => [
+          cardStyle,
+          pressed && !disabled && { opacity: 0.9 },
+          ...(Array.isArray(style) ? style : [style].filter(Boolean) as ViewStyle[]),
+        ]}
+      >
+        {children}
+      </Pressable>
+    );
+  }
+
+  return (
+    <View style={[cardStyle, style]}>
+      {children}
+    </View>
+  );
+};
+
+// Divider subcomponent
+BaseCard.Divider = ({
+  color = '#efe2d6',
+  thickness = 1.5,
+  verticalMargin = 12,
+  style,
+}: {
+  color?: string;
+  thickness?: number;
+  verticalMargin?: number;
+  style?: ViewStyle | ViewStyle[];
+}) => {
+  return (
+    <View
+      style={[
+        {
+          height: thickness,
+          backgroundColor: color,
+          marginVertical: verticalMargin,
+          width: '100%',
+        },
+        style,
+      ]}
+    />
+  );
+};