@xetwa/design-system 1.0.2

package/src/components/Inputs/TextInput/TextInput.stories.tsx

@@ -0,0 +1,103 @@
+
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+import { TextInput } from './TextInput';
+
+const meta = {
+  title: 'Components/Inputs/TextInput',
+  component: TextInput,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+    },
+    error: {
+      control: 'text',
+    },
+    helperText: {
+      control: 'text',
+    },
+    size: {
+      control: 'radio',
+      options: ['sm', 'md', 'lg'],
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 24, width: '100%', minWidth: 320, alignItems: 'center' }}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+// Default State
+export const Default: Story = {
+  args: {
+    label: 'Nome',
+    placeholder: 'Ex: Sofia',
+  },
+};
+
+// Filled State
+export const Filled: Story = {
+  args: {
+    label: 'Email',
+    value: 'sofia@xetwa.com',
+  },
+};
+
+// Error State
+export const Error: Story = {
+  args: {
+    label: 'Email',
+    value: 'sofia@',
+    error: 'Endereço de email inválido',
+  },
+};
+
+// Helper Text
+export const WithHelperText: Story = {
+  args: {
+    label: 'Password',
+    placeholder: 'A tua senha secreta',
+    secureTextEntry: true,
+    helperText: 'A password deve ter pelo menos 8 caracteres.',
+  },
+};
+
+// Disabled
+export const Disabled: Story = {
+  args: {
+    label: 'Nome de Utilizador',
+    value: 'sofia_xetwa',
+    disabled: true,
+  },
+};
+
+// Sizes
+export const Small: Story = {
+  args: {
+    label: 'Pesquisa',
+    placeholder: 'O que procuras?',
+    size: 'sm',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    label: 'Código de Convite',
+    placeholder: 'XET-1234',
+    size: 'lg',
+  },
+};

package/src/components/Inputs/TextInput/TextInput.tsx

@@ -0,0 +1,187 @@
+import { useState, forwardRef } from 'react';
+import { View, TextInput as RNTextInput, StyleSheet, Platform } from 'react-native';
+import type {
+  ViewStyle,
+  TextStyle,
+  TextInputProps as RNTextInputProps,
+} from 'react-native';
+import { theme } from '../../../styles/theme';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { Typography } from '../../Typography/Typography';
+
+export interface TextInputProps extends Omit<RNTextInputProps, 'style'> {
+  label?: string;
+  error?: string;
+  helperText?: string;
+  size?: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
+  style?: ViewStyle | ViewStyle[];
+  inputStyle?: TextStyle | TextStyle[];
+  containerStyle?: ViewStyle | ViewStyle[];
+}
+
+export const TextInput = forwardRef<RNTextInput, TextInputProps>(
+  (
+    {
+      label,
+      error,
+      helperText,
+      size = 'md',
+      disabled = false,
+      style,
+      inputStyle,
+      containerStyle,
+      onFocus,
+      onBlur,
+      ...props
+    },
+    ref
+  ) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const { scale, scaleText } = useResponsive();
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const handleFocus = (e: any) => {
+      setIsFocused(true);
+      if (onFocus) onFocus(e);
+    };
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const handleBlur = (e: any) => {
+      setIsFocused(false);
+      if (onBlur) onBlur(e);
+    };
+
+    // Calculate dynamic styles
+    const hasError = !!error;
+
+    const getWrapperStyles = (): ViewStyle => {
+      let borderColor = theme.colors.brown[100];
+      let backgroundColor = theme.colors.white;
+      let shadowStyle: ViewStyle = {};
+
+      if (disabled) {
+        backgroundColor = theme.colors.brown[50];
+      } else if (hasError) {
+        borderColor = theme.colors.error;
+        backgroundColor = '#fff9f8';
+        if (Platform.OS === 'web') {
+          shadowStyle = { boxShadow: `0 0 0 ${scale(3)}px rgba(207, 91, 72, 0.18)` } as unknown as ViewStyle;
+        } else {
+          shadowStyle = { ...theme.shadows.sm, shadowColor: theme.colors.error };
+        }
+      } else if (isFocused) {
+        borderColor = theme.colors.primary;
+        if (Platform.OS === 'web') {
+          shadowStyle = { boxShadow: `0 0 0 ${scale(3)}px rgba(242, 151, 75, 0.22)` } as unknown as ViewStyle;
+        } else {
+          shadowStyle = theme.shadows.focus;
+        }
+      }
+
+      const sizeHeight = {
+        sm: scale(42),
+        md: scale(50),
+        lg: scale(58),
+      }[size];
+
+      return {
+        borderWidth: 2,
+        borderColor,
+        backgroundColor,
+        height: sizeHeight,
+        ...shadowStyle,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ...(disabled && Platform.OS === 'web' ? { cursor: 'not-allowed' as any } : {}),
+      };
+    };
+
+    const messageText = error || helperText;
+    const messageColor = error ? theme.colors.error : theme.colors.brown[500];
+
+    return (
+      <View style={[styles.root, style]}>
+        {label && (
+          <Typography style={[
+            styles.label, 
+            { fontSize: scaleText(12), marginBottom: scale(6) },
+            disabled && { color: theme.colors.brown[400] }
+          ]}>
+            {label}
+          </Typography>
+        )}
+
+        <View style={[
+          styles.inputWrapper, 
+          getWrapperStyles(), 
+          {
+            borderRadius: scale(14),
+            paddingHorizontal: scale(16),
+          },
+          containerStyle
+        ]}>
+          <RNTextInput
+            ref={ref}
+            editable={!disabled}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            placeholderTextColor={theme.colors.brown[300]}
+            style={[
+              styles.input,
+              {
+                fontSize: scaleText(15),
+              },
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              Platform.OS === 'web' && ({ outlineStyle: 'none' } as any),
+              disabled && { color: theme.colors.brown[400] },
+              inputStyle,
+            ]}
+            {...props}
+          />
+        </View>
+
+        {messageText && (
+          <Typography style={[styles.message, { color: messageColor, fontSize: scaleText(12), marginTop: scale(5) }]}>
+            {messageText}
+          </Typography>
+        )}
+      </View>
+    );
+  }
+);
+
+TextInput.displayName = 'TextInput';
+
+const styles = StyleSheet.create({
+  root: {
+    width: '100%',
+    maxWidth: 480, // Default constraint for desktop
+  },
+  label: {
+
+    fontSize: 12,
+    color: theme.colors.brown[800],
+    marginBottom: 6,
+  },
+  inputWrapper: {
+    borderRadius: 14,
+    paddingHorizontal: 16,
+    justifyContent: 'center',
+    flexDirection: 'row',
+    alignItems: 'center',
+    overflow: 'hidden',
+  },
+  input: {
+    flex: 1,
+    height: '100%',
+
+    fontSize: 15,
+    color: theme.colors.brown[800],
+    padding: 0, // Reset RN default paddings
+  },
+  message: {
+
+    fontSize: 12,
+    marginTop: 5,
+  },
+});

package/src/components/Mascots/Vava/Vava.stories.tsx

@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Vava } from './Vava';
+
+const meta = {
+  title: 'Mascots/Vava',
+  component: Vava,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: [
+        'original',
+        'com-autocolantes',
+        'acenar',
+        'feliz',
+        'neutra',
+        'surpresa',
+        'pensar',
+        'errou',
+        'acertou',
+        'dormir',
+        'celebrar',
+      ],
+      description: 'A expressão ou estado da mascote Vava.',
+    },
+    size: {
+      control: { type: 'range', min: 50, max: 500, step: 10 },
+      description: 'O tamanho do componente (largura e altura em pixels).',
+    },
+  },
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+export const Default: Story = {
+  args: {
+    variant: 'original',
+    size: 200,
+  },
+};
+
+export const ComAutocolantes: Story = {
+  args: {
+    variant: 'com-autocolantes',
+    size: 200,
+  },
+};
+
+export const Acenar: Story = {
+  args: {
+    variant: 'acenar',
+    size: 200,
+  },
+};
+
+export const Feliz: Story = {
+  args: {
+    variant: 'feliz',
+    size: 200,
+  },
+};
+
+export const Neutra: Story = {
+  args: {
+    variant: 'neutra',
+    size: 200,
+  },
+};
+
+export const Surpresa: Story = {
+  args: {
+    variant: 'surpresa',
+    size: 200,
+  },
+};
+
+export const Pensar: Story = {
+  args: {
+    variant: 'pensar',
+    size: 200,
+  },
+};
+
+export const Errou: Story = {
+  args: {
+    variant: 'errou',
+    size: 200,
+  },
+};
+
+export const Acertou: Story = {
+  args: {
+    variant: 'acertou',
+    size: 200,
+  },
+};
+
+export const Dormir: Story = {
+  args: {
+    variant: 'dormir',
+    size: 200,
+  },
+};
+
+export const Celebrar: Story = {
+  args: {
+    variant: 'celebrar',
+    size: 200,
+  },
+};

package/src/components/Mascots/Vava/Vava.tsx

@@ -0,0 +1,276 @@
+import React from 'react';
+import Svg, { Path, Rect, Circle, Ellipse, G, Text as SvgText } from 'react-native-svg';
+
+export type VavaVariant =
+  | 'original'
+  | 'com-autocolantes'
+  | 'acenar'
+  | 'feliz'
+  | 'neutra'
+  | 'surpresa'
+  | 'pensar'
+  | 'errou'
+  | 'acertou'
+  | 'dormir'
+  | 'celebrar';
+
+export interface VavaProps {
+  /**
+   * A expressão ou estado da mascote Vava.
+   * @default 'original'
+   */
+  variant?: VavaVariant;
+  /**
+   * O tamanho do componente (largura e altura em pixels).
+   * @default 200
+   */
+  size?: number;
+  /**
+   * Se verdadeiro, renderiza apenas o rosto/cabeça da mascote em formato Avatar.
+   * @default false
+   */
+  avatarOnly?: boolean;
+}
+
+/**
+ * Componente Vava - A mascote oficial do Xetlingo.
+ * 
+ * Este componente renderiza de forma estática, vetorial e performática as diferentes expressões da Vava.
+ * É compatível tanto com React Native (iOS/Android) quanto com React Native Web.
+ * 
+ * @example
+ * ```tsx
+ * // Vava neutra com tamanho padrão (200px)
+ * <Vava variant="neutra" />
+ * 
+ * // Vava celebrando com 150px de tamanho
+ * <Vava variant="celebrar" size={150} />
+ * ```
+ */
+export const Vava: React.FC<VavaProps> = ({ variant = 'original', size = 200, avatarOnly = false }) => {
+  // Normalizar variantes equivalentes nos ficheiros de assets
+  const normalizedVariant = variant === 'com-autocolantes' ? 'original' : variant === 'acenar' ? 'feliz' : variant;
+
+  const renderFace = () => {
+    switch (normalizedVariant) {
+      case 'feliz':
+        return (
+          <>
+            {/* Olhos felizes fechados */}
+            <Path d="M73 95 Q80 86 87 95" stroke="#15100d" strokeWidth={3.2} fill="none" strokeLinecap="round" />
+            <Path d="M113 95 Q120 86 127 95" stroke="#15100d" strokeWidth={3.2} fill="none" strokeLinecap="round" />
+            {/* Boca feliz aberta */}
+            <Path d="M90 100 Q100 111 110 100 Z" fill="#fbe6cf" />
+          </>
+        );
+
+      case 'neutra':
+        return (
+          <>
+            {/* Olhos abertos com pupilas e brilho */}
+            <Ellipse cx={80} cy={92} rx={8} ry={10} fill="#fff" />
+            <Ellipse cx={120} cy={92} rx={8} ry={10} fill="#fff" />
+            <Circle cx={81} cy={94} r={4.2} fill="#15100d" />
+            <Circle cx={121} cy={94} r={4.2} fill="#15100d" />
+            <Circle cx={79} cy={90} r={1.6} fill="#fff" />
+            <Circle cx={119} cy={90} r={1.6} fill="#fff" />
+            {/* Boca sorridente fechada */}
+            <Path d="M92 102 Q100 109 108 102" fill="none" stroke="#fbe6cf" strokeWidth={3} strokeLinecap="round" />
+          </>
+        );
+
+      case 'surpresa':
+        return (
+          <>
+            {/* Olhos bem abertos e redondos */}
+            <Circle cx={80} cy={92} r={10} fill="#fff" />
+            <Circle cx={120} cy={92} r={10} fill="#fff" />
+            <Circle cx={80} cy={93} r={5} fill="#15100d" />
+            <Circle cx={120} cy={93} r={5} fill="#15100d" />
+            <Circle cx={78} cy={90} r={2} fill="#fff" />
+            <Circle cx={118} cy={90} r={2} fill="#fff" />
+            {/* Boca redonda aberta de surpresa */}
+            <Ellipse cx={100} cy={105} rx={6} ry={7} fill="#fbe6cf" />
+          </>
+        );
+
+      case 'pensar':
+        return (
+          <>
+            {/* Olhos a olhar para cima e para a direita */}
+            <Ellipse cx={80} cy={92} rx={8} ry={10} fill="#fff" />
+            <Ellipse cx={120} cy={92} rx={8} ry={10} fill="#fff" />
+            <Circle cx={82} cy={88} r={4} fill="#15100d" />
+            <Circle cx={122} cy={88} r={4} fill="#15100d" />
+            {/* Boca de dúvida (traço reto ligeiramente inclinado) */}
+            <Path d="M93 105 L105 103" stroke="#fbe6cf" strokeWidth={3} fill="none" strokeLinecap="round" />
+            {/* Ponto de interrogação flutuante */}
+            <SvgText x="50" y="50" fontFamily="sans-serif" fontWeight="700" fontSize={30} fill="#f2974b">?</SvgText>
+          </>
+        );
+
+      case 'errou':
+        return (
+          <>
+            {/* Sobrancelhas de preocupação */}
+            <Path d="M70 84 l11 4" stroke="#15100d" strokeWidth={2.4} strokeLinecap="round" />
+            <Path d="M130 84 l-11 4" stroke="#15100d" strokeWidth={2.4} strokeLinecap="round" />
+            {/* Olhos tensos a olhar para baixo */}
+            <Ellipse cx={80} cy={95} rx={7.5} ry={9} fill="#fff" />
+            <Ellipse cx={120} cy={95} rx={7.5} ry={9} fill="#fff" />
+            <Circle cx={81} cy={97} r={4} fill="#15100d" />
+            <Circle cx={121} cy={97} r={4} fill="#15100d" />
+            {/* Boca triste para baixo */}
+            <Path d="M94 107 Q100 102 106 107" stroke="#fbe6cf" strokeWidth={3} fill="none" strokeLinecap="round" />
+            {/* Gota de suor fria na bochecha */}
+            <Path d="M134 84 q3.6 5 0 9 q-3.6 -4 0 -9 Z" fill="#7ab8e0" />
+            {/* Ícone flutuante de Erro (Círculo Vermelho com X) */}
+            {!avatarOnly && (
+              <G transform="translate(150, 58)">
+                <Circle r={16} fill="#cf5b48" />
+                <Path d="M-6 -6 l12 12 M6 -6 l-12 12" stroke="#fff" strokeWidth={3.5} strokeLinecap="round" />
+              </G>
+            )}
+          </>
+        );
+
+      case 'acertou':
+        return (
+          <>
+            {/* Olhos felizes fechados */}
+            <Path d="M73 95 Q80 86 87 95" stroke="#15100d" strokeWidth={3.2} fill="none" strokeLinecap="round" />
+            <Path d="M113 95 Q120 86 127 95" stroke="#15100d" strokeWidth={3.2} fill="none" strokeLinecap="round" />
+            {/* Boca feliz aberta */}
+            <Path d="M90 100 Q100 112 110 100 Z" fill="#fbe6cf" />
+            {/* Ícone flutuante de Sucesso (Círculo Verde com Checkmark) */}
+            {!avatarOnly && (
+              <G transform="translate(150, 58)">
+                <Circle r={16} fill="#16915a" />
+                <Path d="M-7 0 l4 5 9 -10" stroke="#fff" strokeWidth={3.5} fill="none" strokeLinecap="round" strokeLinejoin="round" />
+              </G>
+            )}
+          </>
+        );
+
+      case 'dormir':
+        return (
+          <>
+            {/* Olhos fechados em curva suave de sono */}
+            <Path d="M72 93 Q80 99 88 93" stroke="#15100d" strokeWidth={3} fill="none" strokeLinecap="round" />
+            <Path d="M112 93 Q120 99 128 93" stroke="#15100d" strokeWidth={3} fill="none" strokeLinecap="round" />
+            {/* Boca em pequeno círculo aberto de sono */}
+            <Circle cx={100} cy={105} r={3} fill="none" stroke="#fbe6cf" strokeWidth={2.5} />
+            {/* Letras de sono flutuantes (z Z) */}
+            <SvgText x="50" y="50" fontFamily="sans-serif" fontWeight="700" fontSize={15} fill="#9a8478">z</SvgText>
+            <SvgText x="50" y="50" fontFamily="sans-serif" fontWeight="700" fontSize={20} fill="#9a8478">Z</SvgText>
+          </>
+        );
+
+      case 'celebrar':
+        return (
+          <>
+            {/* Olhos felizes fechados */}
+            <Path d="M73 95 Q80 86 87 95" stroke="#15100d" strokeWidth={3.2} fill="none" strokeLinecap="round" />
+            <Path d="M113 95 Q120 86 127 95" stroke="#15100d" strokeWidth={3.2} fill="none" strokeLinecap="round" />
+            {/* Boca aberta de celebração sorrindo com interior à mostra */}
+            <Path d="M87 99 Q100 116 113 99 Q100 106 87 99 Z" fill="#fff" />
+            <Path d="M89 100 Q100 113 111 100" fill="#fbe6cf" />
+          </>
+        );
+
+      case 'original':
+      default:
+        return (
+          <>
+            {/* Olhos felizes fechados (padrão) */}
+            <Path d="M73 95 Q80 86 87 95" stroke="#15100d" strokeWidth={3.2} fill="none" strokeLinecap="round" />
+            <Path d="M113 95 Q120 86 127 95" stroke="#15100d" strokeWidth={3.2} fill="none" strokeLinecap="round" />
+            {/* Boca feliz aberta */}
+            <Path d="M90 100 Q100 111 110 100 Z" fill="#fbe6cf" />
+
+            {/* Autocolantes/Stickers de Bandeiras espalhados pelo corpo */}
+            {/* Bandeira de Portugal (inferior esquerda) */}
+            <G transform="translate(60, 148) rotate(-10)">
+              <Rect x={-12} y={-9} width={24} height={18} rx={3} fill="#fff" />
+              <Rect x={-10} y={-7} width={6.5} height={14} fill="#2a4b9b" />
+              <Rect x={-3.5} y={-7} width={6.5} height={14} fill="#fff" />
+              <Rect x={3} y={-7} width={6.5} height={14} fill="#d34b3e" />
+            </G>
+            {/* Bandeira do Brasil (inferior direita) */}
+            <G transform="translate(140, 150) rotate(9)">
+              <Rect x={-12} y={-9} width={24} height={18} rx={3} fill="#fff" />
+              <Rect x={-10} y={-7} width={6.5} height={14} fill="#16915a" />
+              <Rect x={-3.5} y={-7} width={6.5} height={14} fill="#fcd116" />
+              <Rect x={3} y={-7} width={6.5} height={14} fill="#d12e2e" />
+              <SvgText x={-0.2} y={2} textAnchor="middle" fontSize={8} fill="#16915a">★</SvgText>
+            </G>
+            {/* Bandeira de Espanha (bochecha direita) */}
+            <G transform="translate(142, 82) rotate(8)">
+              <Rect x={-12} y={-9} width={24} height={18} rx={3} fill="#fff" />
+              <Rect x={-10} y={-7} width={6.5} height={14} fill="#15100d" />
+              <Rect x={-3.5} y={-7} width={6.5} height={14} fill="#f6c343" />
+              <Rect x={3} y={-7} width={6.5} height={14} fill="#d34b3e" />
+            </G>
+            {/* Bandeira de França (bochecha esquerda) */}
+            <G transform="translate(58, 82) rotate(-8)">
+              <Rect x={-11} y={-9} width={22} height={18} rx={3} fill="#fff" />
+              <Rect x={-9} y={-7} width={5} height={14} fill="#0050a4" />
+              <Rect x={-4} y={-7} width={8} height={14} fill="#fff" />
+              <Rect x={4} y={-7} width={5} height={14} fill="#d52b1e" />
+              <Path d="M0 -3 l2 3 -2 3 -2 -3 Z" fill="#d52b1e" />
+            </G>
+          </>
+        );
+    }
+  };
+
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox={avatarOnly ? "35 45 130 130" : "0 0 200 200"}
+      role="img"
+      aria-label={`Mascote Vava: ${variant}`}
+    >
+      {/* 1. Antena Superior */}
+      <Path
+        d="M84 64 q0 -20 16 -20 q16 0 16 20"
+        fill="none"
+        stroke="#3f2620"
+        strokeWidth={7}
+        strokeLinecap="round"
+      />
+      {/* Bases da Antena */}
+      <Rect x={84} y={58} width={12} height={10} rx={2} fill="#cf7a30" />
+      <Rect x={104} y={58} width={12} height={10} rx={2} fill="#cf7a30" />
+
+      {/* 2. Corpo do Tablet (Chassis) */}
+      <Rect x={44} y={64} width={112} height={104} rx={16} fill="#51332d" />
+
+      {/* 3. Moldura Interna do Ecrã */}
+      <Rect
+        x={50}
+        y={70}
+        width={100}
+        height={92}
+        rx={12}
+        fill="none"
+        stroke="#6b4a33"
+        strokeWidth={2.5}
+      />
+
+      {/* 4. Faixa Inferior Laranja do Tablet */}
+      <Rect x={44} y={116} width={112} height={15} fill="#f2974b" />
+
+      {/* 5. Botão Home Central */}
+      <Rect x={92} y={112} width={16} height={23} rx={3} fill="#cf7a30" />
+
+      {/* 6. Bochechas Coradas */}
+      <Circle cx={66} cy={106} r={6} fill="#f2974b" opacity={0.4} />
+      <Circle cx={134} cy={106} r={6} fill="#f2974b" opacity={0.4} />
+
+      {/* 7. Expressão Facial & Elementos de Expressão (Diferentes de acordo com a Variante) */}
+      {renderFace()}
+    </Svg>
+  );
+};