@xetwa/design-system 1.0.2

package/src/components/Buttons/MainButton/MainButton.tsx

@@ -0,0 +1,258 @@
+import React, { useState } from 'react';
+import { Pressable, ActivityIndicator, StyleSheet, Platform } from 'react-native';
+import type { ViewStyle, TextStyle } from 'react-native';
+import { theme } from '../../../styles/theme';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { Typography } from '../../Typography/Typography';
+
+/**
+ * Botão principal do sistema, usado para ações primárias, secundárias e destrutivas.
+ */
+export interface MainButtonProps {
+  /** Texto a exibir no botão. */
+  children: React.ReactNode;
+  /** Variante visual do botão. */
+  variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
+  /** Tamanho do botão. */
+  size?: 'sm' | 'md' | 'lg';
+  /** Se true, o botão ocupa a largura total disponível. */
+  fullWidth?: boolean;
+  /** Se true, desativa a interação e aplica estilos de inativo. */
+  disabled?: boolean;
+  /** Se true, exibe um spinner de carregamento em vez do texto. */
+  loading?: boolean;
+  /** Callback para o evento de clique. */
+  onPress?: () => void;
+  /** Cor de fundo customizada (sobrepõe a cor da variante) */
+  bgColor?: string;
+  /** Cor do texto customizada (sobrepõe a cor da variante) */
+  textColor?: string;
+  /** Cor da sombra customizada (sobrepõe a cor da variante) */
+  shadowColor?: string;
+  /** Cor de fundo no hover (opcional) */
+  hoverColor?: string;
+  style?: ViewStyle | ViewStyle[];
+}
+
+export const MainButton = React.forwardRef<React.ElementRef<typeof Pressable>, MainButtonProps>(
+  (
+    {
+      style,
+      variant = 'primary',
+      size = 'md',
+      fullWidth = false,
+      loading = false,
+      children,
+      disabled,
+      onPress,
+      bgColor,
+      textColor,
+      shadowColor,
+      hoverColor,
+      ...props
+    },
+    ref
+  ) => {
+    const [isHovered, setIsHovered] = useState(false);
+    const { scale, scaleText } = useResponsive();
+
+    const getBgColor = () => {
+      if (disabled) {
+        if (variant === 'primary' || variant === 'secondary') return '#efe2d6';
+        return 'transparent';
+      }
+      if (bgColor) return isHovered ? (hoverColor || bgColor) : bgColor;
+      if (variant === 'primary') return isHovered ? '#e8883e' : theme.colors.primary;
+      if (variant === 'secondary') return theme.colors.white;
+      return 'transparent'; // ghost
+    };
+
+    const getTextColor = () => {
+      if (disabled) {
+        if (variant === 'primary' || variant === 'secondary') return '#b9a392';
+        return theme.colors.brown[500];
+      }
+      if (textColor) return textColor;
+      if (variant === 'primary') return '#ffffff';
+      if (variant === 'secondary') return isHovered ? '#cf7a30' : theme.colors.brown[800];
+      if (variant === 'ghost') return isHovered ? '#51332d' : theme.colors.brown[500];
+      return '#000000';
+    };
+
+    const getBorderStyles = (): ViewStyle => {
+      if (variant === 'secondary') {
+        const borderColor = disabled ? '#efe2d6' : isHovered ? '#f2974b' : theme.colors.brown[100];
+        return {
+          borderWidth: 2,
+          borderColor,
+        };
+      }
+      return { borderWidth: 0 };
+    };
+
+    const getShadowStyles = (): ViewStyle => {
+      if (disabled || variant === 'ghost') {
+        return {};
+      }
+
+      if (Platform.OS === 'web') {
+        // Web uses standard CSS box-shadow for better matching with design
+        const resolvedShadowColor = shadowColor || (variant === 'primary' ? theme.colors.primaryDark : theme.colors.brown[100]);
+        return {
+          boxShadow: `0px ${scale(4)}px 0px ${resolvedShadowColor}`
+        };
+      } else {
+        // Native shadow / elevation
+        if (shadowColor) {
+          return {
+            shadowColor,
+            shadowOffset: { width: 0, height: scale(4) },
+            shadowOpacity: 1,
+            shadowRadius: 0,
+            elevation: 4,
+          };
+        }
+        return variant === 'primary' ? theme.shadows.btnPrimary : theme.shadows.btnSecondary;
+      }
+    };
+
+    // Calculate dynamic height, padding and radius based on size and responsiveness
+    const sizeStyles = {
+      sm: { height: scale(36), paddingHorizontal: scale(16), borderRadius: scale(11) },
+      md: { height: scale(50), paddingHorizontal: scale(22), borderRadius: scale(16) },
+      lg: { height: scale(58), paddingHorizontal: scale(32), borderRadius: scale(18) },
+    }[size];
+
+    const buttonStyles: ViewStyle[] = [
+      styles.base,
+      sizeStyles,
+      { backgroundColor: getBgColor() },
+      getBorderStyles(),
+      getShadowStyles(),
+      fullWidth ? { width: '100%' } : { alignSelf: 'flex-start' },
+      disabled && variant === 'ghost' ? { opacity: 0.4 } : {},
+      style as ViewStyle,
+    ];
+
+    const textStyles: TextStyle[] = [
+      styles.textBase,
+      {
+        fontSize: {
+          sm: scaleText(12),
+          md: scaleText(16),
+          lg: scaleText(18),
+        }[size],
+        letterSpacing: {
+          sm: scale(0.48),
+          md: scale(0.64),
+          lg: scale(0.72),
+        }[size],
+      },
+      { color: getTextColor() },
+      loading ? styles.textHidden : {},
+    ];
+
+    // Handle React Native Web Hover (typing workaround)
+    const hoverProps = Platform.OS === 'web' ? {
+      onHoverIn: () => !disabled && setIsHovered(true),
+      onHoverOut: () => !disabled && setIsHovered(false),
+    } : {};
+
+    return (
+      <Pressable
+        ref={ref}
+        disabled={disabled || loading}
+        onPress={onPress}
+        style={({ pressed }) => {
+          const stateStyles: ViewStyle[] = [...buttonStyles];
+
+          if (disabled) {
+            // @ts-expect-error - web only style
+            if (Platform.OS === 'web') stateStyles.push({ cursor: 'not-allowed' });
+            return stateStyles;
+          }
+
+          if (pressed && !loading) {
+            if (variant === 'ghost') {
+              stateStyles.push({ opacity: 0.7 });
+            } else {
+              // 3D tactile pressing effect (translate Y)
+              stateStyles.push({
+                transform: [{ translateY: scale(4) }],
+              });
+              // Remove the shadow when pressed to mimic the physical push
+              if (Platform.OS === 'web') {
+                stateStyles.push({ boxShadow: 'none' });
+              } else {
+                stateStyles.push({
+                  shadowOpacity: 0,
+                  elevation: 0,
+                });
+              }
+            }
+          } else if (isHovered && variant === 'primary' && !loading) {
+            stateStyles.push({
+              transform: [{ translateY: scale(-1) }],
+            });
+          }
+
+          return stateStyles;
+        }}
+        {...hoverProps}
+        {...props}
+      >
+        {loading && (
+          <ActivityIndicator
+            size="small"
+            color={getTextColor()}
+            style={styles.spinner}
+          />
+        )}
+
+        <Typography style={textStyles}>
+          {children}
+        </Typography>
+      </Pressable>
+    );
+  }
+);
+
+MainButton.displayName = 'MainButton';
+
+const styles = StyleSheet.create({
+  base: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+
+  spinner: {
+    position: 'absolute',
+  },
+
+  // Text Sizes & Fonts
+  textBase: {
+
+    textAlign: 'center',
+    textTransform: 'uppercase',
+  },
+  text_sm: {
+    fontSize: 12,
+
+    letterSpacing: 12 * 0.04, // 0.48
+  },
+  text_md: {
+    fontSize: 16,
+
+    letterSpacing: 16 * 0.04, // 0.64
+  },
+  text_lg: {
+    fontSize: 18,
+
+    letterSpacing: 18 * 0.04, // 0.72
+  },
+
+  textHidden: {
+    color: 'transparent',
+  }
+});

package/src/components/Buttons/WordChip/WordChip.stories.tsx

@@ -0,0 +1,84 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+import { WordChip } from './WordChip';
+import { theme } from '../../../styles/theme';
+
+const meta = {
+  title: 'Components/Buttons/WordChip',
+  component: WordChip,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'O **WordChip** é usado maioritariamente nos exercícios interativos (ex: organizar frases) ou como tags filtráveis.\n\n### Exemplo de Uso\n```tsx\n<WordChip \n  word="gato"\n  isSelected={false}\n  onPress={() => selecionar("gato")}\n/>\n```',
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    word: { control: 'text' },
+    state: {
+      control: 'radio',
+      options: ['default', 'selected', 'correct', 'wrong', 'used']
+    },
+    disabled: { control: 'boolean' },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 24, backgroundColor: theme.colors.cream }}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+export const Default: Story = {
+  args: {
+    word: 'de',
+    state: 'default',
+  },
+};
+
+export const Selected: Story = {
+  args: {
+    word: "l'eau",
+    state: 'selected',
+  },
+};
+
+export const Correct: Story = {
+  args: {
+    word: 'bois',
+    state: 'correct',
+  },
+};
+
+export const Wrong: Story = {
+  args: {
+    word: 'mange',
+    state: 'wrong',
+  },
+};
+
+export const Used: Story = {
+  args: {
+    word: 'Je',
+    state: 'used',
+  },
+};
+
+export const AllStates: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 12 }}>
+      <WordChip word="de" state="default" />
+      <WordChip word="l'eau" state="selected" />
+      <WordChip word="bois" state="correct" />
+      <WordChip word="mange" state="wrong" />
+      <WordChip word="Je" state="used" />
+    </View>
+  ),
+};

package/src/components/Buttons/WordChip/WordChip.tsx

@@ -0,0 +1,157 @@
+import { useState, useEffect, useRef } from 'react';
+import { View, StyleSheet, Pressable, Animated } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { theme } from '../../../styles/theme';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { Typography } from '../../Typography/Typography';
+
+export type WordChipState = 'default' | 'selected' | 'correct' | 'wrong' | 'used';
+
+/**
+ * Componente WordChip usado em exercícios de ordenação de palavras ou tags interativas.
+ */
+export interface WordChipProps {
+  /** A palavra ou texto a apresentar. */
+  word: string;
+  /** Estado atual do chip. */
+  state?: WordChipState;
+  /** Função disparada ao clicar. */
+  onPress?: () => void;
+  /** Estilos adicionais para o container. */
+  style?: ViewStyle | ViewStyle[];
+  /** Impede cliques. */
+  disabled?: boolean;
+}
+
+export const WordChip = ({
+  word,
+  state = 'default',
+  onPress,
+  style,
+  disabled = false,
+}: WordChipProps) => {
+  const { scale, scaleText } = useResponsive();
+  const [isPressed, setIsPressed] = useState(false);
+  const scaleAnim = useRef(new Animated.Value(state === 'selected' ? 0.96 : 1)).current;
+
+  // Animação ao entrar na resposta (bounce) quando o estado passa a 'selected'
+  useEffect(() => {
+    if (state === 'selected') {
+      scaleAnim.setValue(0.96);
+      Animated.spring(scaleAnim, {
+        toValue: 1,
+        friction: 4,
+        tension: 100,
+        useNativeDriver: true, // we can use true here because it's just a simple spring scale
+      }).start();
+    } else {
+      scaleAnim.setValue(1);
+    }
+  }, [state, scaleAnim]);
+
+  const getStateStyles = () => {
+    switch (state) {
+      case 'selected':
+        return {
+          bg: theme.colors.primaryLight,
+          border: theme.colors.primary,
+          shadow: 'rgba(242, 151, 75, 0.25)',
+          text: theme.colors.brown[800],
+        };
+      case 'correct':
+        return {
+          bg: '#eafaf2',
+          border: theme.colors.success,
+          shadow: 'rgba(22, 145, 90, 0.2)',
+          text: theme.colors.success,
+        };
+      case 'wrong':
+        return {
+          bg: '#fdf0ee',
+          border: theme.colors.error,
+          shadow: 'rgba(207, 91, 72, 0.2)',
+          text: theme.colors.error,
+        };
+      case 'used':
+        return {
+          bg: theme.colors.white,
+          border: theme.colors.brown[100],
+          shadow: theme.colors.brown[100],
+          text: theme.colors.brown[300],
+        };
+      case 'default':
+      default:
+        return {
+          bg: theme.colors.white,
+          border: theme.colors.brown[100],
+          shadow: theme.colors.brown[100],
+          text: theme.colors.brown[800],
+        };
+    }
+  };
+
+  const currentStyles = getStateStyles();
+  const isDisabled = disabled || state === 'used';
+  
+  // Press state visual adjustments
+  const showPressed = isPressed && !isDisabled;
+
+  return (
+    <Animated.View style={[{ transform: [{ scale: scaleAnim }] }, style]}>
+      <Pressable
+        onPressIn={() => setIsPressed(true)}
+        onPressOut={() => setIsPressed(false)}
+        onPress={onPress}
+        disabled={isDisabled}
+        style={{ alignSelf: 'flex-start' }}
+      >
+        <View style={[
+          styles.shadowContainer,
+          { 
+            backgroundColor: currentStyles.shadow,
+            borderRadius: scale(12),
+            paddingBottom: showPressed ? 0 : scale(3),
+            marginTop: showPressed ? scale(3) : 0,
+          }
+        ]}>
+          <View style={[
+            styles.innerContainer,
+            {
+              backgroundColor: currentStyles.bg,
+              borderColor: currentStyles.border,
+              borderRadius: scale(12),
+              paddingVertical: scale(9),
+              paddingHorizontal: scale(14),
+              minHeight: scale(44),
+            }
+          ]}>
+            <Typography style={[
+              styles.text,
+              { 
+                color: currentStyles.text,
+                fontSize: scaleText(15),
+              }
+            ]}>
+              {word}
+            </Typography>
+          </View>
+        </View>
+      </Pressable>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  shadowContainer: {
+    alignSelf: 'flex-start',
+  },
+  innerContainer: {
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+
+    textAlign: 'center',
+  },
+});

package/src/components/Buttons/WordChip/index.ts

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

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

@@ -0,0 +1,181 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/react';
+import { View, Pressable } from 'react-native';
+import { AnswerOptionCard } from './AnswerOptionCard';
+import type { AnswerOptionStatus } from './AnswerOptionCard';
+import { theme } from '../../../styles/theme';
+import { useState } from 'react';
+import { Typography } from '../../Typography/Typography';
+
+const meta = {
+  title: 'Components/Cards/AnswerOptionCard',
+  component: AnswerOptionCard,
+  parameters: { 
+    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```',
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    status: { control: 'radio', options: ['default', 'selected', 'correct', 'wrong', 'disabled'] },
+    label: { control: 'text' },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 24, maxWidth: 350 }}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<any>;
+
+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" />,
+  },
+};
+
+export const InteractiveDemo: Story = {
+  args: {
+    label: '',
+  },
+  render: () => {
+    const [selected, setSelected] = useState<string | null>(null);
+    const [statusMap, setStatusMap] = useState<Record<string, AnswerOptionStatus>>({
+      A: 'default',
+      B: 'default',
+      C: 'default',
+    });
+
+    const handlePress = (letter: string) => {
+      setSelected(letter);
+    };
+
+    const checkAnswer = () => {
+      if (!selected) return;
+      setStatusMap({
+        A: selected === 'A' ? 'wrong' : 'default',
+        B: selected === 'B' ? 'correct' : 'default',
+        C: selected === 'C' ? 'wrong' : 'default',
+      });
+    };
+
+    const reset = () => {
+      setSelected(null);
+      setStatusMap({ A: 'default', B: 'default', C: 'default' });
+    };
+
+    const getStatus = (letter: string) => {
+      if (statusMap[letter] !== 'default') {
+        return statusMap[letter];
+      }
+      return selected === letter ? 'selected' : 'default';
+    };
+
+    return (
+      <View style={{ gap: 16 }}>
+        <AnswerOptionCard
+          status={getStatus('A')}
+          label="Boa noite"
+          prefixNode={<CircleLetter letter="A" selected={selected === 'A'} correct={statusMap.A === 'correct'} />}
+          onPress={() => handlePress('A')}
+        />
+        <AnswerOptionCard
+          status={getStatus('B')}
+          label="Bom dia / Olá"
+          prefixNode={<CircleLetter letter="B" selected={selected === 'B'} correct={statusMap.B === 'correct'} />}
+          onPress={() => handlePress('B')}
+        />
+        <AnswerOptionCard
+          status={getStatus('C')}
+          label="Obrigado"
+          prefixNode={<CircleLetter letter="C" selected={selected === 'C'} correct={statusMap.C === 'correct'} />}
+          onPress={() => handlePress('C')}
+        />
+
+        <View style={{ marginTop: 16, flexDirection: 'row', gap: 12 }}>
+          <Pressable
+            style={{
+              flex: 2,
+              backgroundColor: theme.colors.primary,
+              padding: 12,
+              borderRadius: 12,
+              alignItems: 'center',
+            }}
+            onPress={checkAnswer}
+          >
+            <Typography style={{ color: 'white', fontWeight: 'bold' }}>Verificar Resposta</Typography>
+          </Pressable>
+          
+          <Pressable
+            style={{
+              flex: 1,
+              backgroundColor: theme.colors.brown[100],
+              padding: 12,
+              borderRadius: 12,
+              alignItems: 'center',
+            }}
+            onPress={reset}
+          >
+            <Typography style={{ color: theme.colors.brown[800], fontWeight: 'bold' }}>Reset</Typography>
+          </Pressable>
+        </View>
+      </View>
+    );
+  },
+};
+
+export const Grid: Story = {
+  args: {
+    label: '',
+  },
+  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" />} />
+    </View>
+  ),
+};