@xetwa/design-system 1.0.2

package/src/components/Buttons/IconButton/IconButton.tsx

@@ -0,0 +1,189 @@
+import React, { useState } from 'react';
+import { Pressable, StyleSheet, Platform } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { theme } from '../../../styles/theme';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { IconMap } from '../../../utils/iconMap';
+import { Typography } from '../../Typography/Typography';
+
+export interface IconButtonProps {
+  /** Nome exato do ícone da biblioteca lucide-react-native (ex: 'Play', 'Volume2') */
+  iconName: string;
+  /** Texto opcional que aparece por baixo do ícone (ex: 'LENTO') */
+  text?: string;
+  /** Variante do botão para predefinição de cores */
+  variant?: 'primary' | 'secondary';
+  /** Cor de fundo customizada (sobrepõe a cor da variante) */
+  bgColor?: string;
+  /** Cor do ícone customizada (sobrepõe a cor da variante) */
+  iconColor?: 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 (web) */
+  hoverColor?: string;
+  /** Tamanho do botão */
+  size?: 'sm' | 'md' | 'lg';
+  /** Se o botão está desativado */
+  disabled?: boolean;
+  /** Callback para o evento de clique */
+  onPress?: () => void;
+  /** Estilos customizados */
+  style?: ViewStyle | ViewStyle[];
+}
+
+export const IconButton = React.forwardRef<React.ElementRef<typeof Pressable>, IconButtonProps>(
+  (
+    {
+      iconName,
+      text,
+      variant = 'primary',
+      bgColor,
+      iconColor,
+      textColor,
+      shadowColor,
+      hoverColor,
+      size = 'md',
+      disabled = false,
+      onPress,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const [isHovered, setIsHovered] = useState(false);
+    const { scale, scaleText } = useResponsive();
+
+    const Icon = IconMap[iconName] as React.ElementType;
+
+    const getBgColor = () => {
+      if (disabled) return '#efe2d6';
+      if (bgColor) return isHovered && hoverColor ? hoverColor : bgColor;
+      if (variant === 'primary') return isHovered ? '#e8883e' : theme.colors.primary; // laranja
+      if (variant === 'secondary') return theme.colors.white;
+      return theme.colors.primary;
+    };
+
+    const getIconColor = () => {
+      if (disabled) return '#b9a392';
+      if (iconColor) return iconColor;
+      if (variant === 'primary') return '#ffffff';
+      if (variant === 'secondary') return theme.colors.brown[500];
+      return '#ffffff';
+    };
+
+    const getTextColor = () => {
+      if (disabled) return '#b9a392';
+      if (textColor) return textColor;
+      if (variant === 'primary') return '#ffffff';
+      if (variant === 'secondary') return theme.colors.brown[800];
+      return '#ffffff';
+    };
+
+    const getShadowStyles = (): ViewStyle => {
+      if (disabled) return {};
+
+      if (Platform.OS === 'web') {
+        const resolvedShadowColor = shadowColor || (variant === 'primary' ? theme.colors.primaryDark : theme.colors.brown[100]);
+        return {
+          boxShadow: `0px ${scale(4)}px 0px ${resolvedShadowColor}`
+        };
+      } else {
+        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;
+      }
+    };
+
+    const sizeStyles = {
+      sm: { width: scale(40), height: scale(40), borderRadius: scale(12) },
+      md: { width: scale(60), height: scale(60), borderRadius: scale(16) },
+      lg: { width: scale(72), height: scale(72), borderRadius: scale(20) },
+    }[size];
+
+    const iconSizes = {
+      sm: scale(20),
+      md: scale(text ? 20 : 32),
+      lg: scale(text ? 24 : 40),
+    }[size];
+
+    const buttonStyles: ViewStyle[] = [
+      styles.base,
+      sizeStyles,
+      { backgroundColor: getBgColor() },
+      getShadowStyles(),
+      style as ViewStyle,
+    ];
+
+    const hoverProps = Platform.OS === 'web' ? {
+      onHoverIn: () => !disabled && setIsHovered(true),
+      onHoverOut: () => !disabled && setIsHovered(false),
+    } : {};
+
+    return (
+      <Pressable
+        ref={ref}
+        disabled={disabled}
+        onPress={onPress}
+        style={({ pressed }) => {
+          const stateStyles: ViewStyle[] = [...buttonStyles];
+
+          if (disabled) {
+            if (Platform.OS === 'web') stateStyles.push({ cursor: 'not-allowed' } as any);
+            return stateStyles;
+          }
+
+          if (pressed) {
+            stateStyles.push({ transform: [{ translateY: scale(4) }] });
+            if (Platform.OS === 'web') {
+              stateStyles.push({ boxShadow: 'none' } as any);
+            } else {
+              stateStyles.push({ shadowOpacity: 0, elevation: 0 });
+            }
+          }
+          return stateStyles;
+        }}
+        {...hoverProps}
+        {...props}
+      >
+        {Icon ? (
+          <Icon
+            size={iconSizes}
+            color={getIconColor()}
+            strokeWidth={text ? 2.5 : 3}
+          />
+        ) : (
+          <Typography style={{ color: 'red', fontSize: 10 }}>Missing</Typography>
+        )}
+
+        {!!text && (
+          <Typography style={[styles.text, { color: getTextColor(), fontSize: scaleText(size === 'sm' ? 10 : 12), marginTop: scale(4) }]}>
+            {text}
+          </Typography>
+        )}
+      </Pressable>
+    );
+  }
+);
+
+IconButton.displayName = 'IconButton';
+
+const styles = StyleSheet.create({
+  base: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'visible',
+  },
+  text: {
+
+    textTransform: 'uppercase',
+  }
+});

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

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+import { JourneyButton } from './JourneyButton';
+
+const meta = {
+  title: 'Components/Buttons/JourneyButton',
+  component: JourneyButton,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: `O **JourneyButton** é o botão de ação principal (Card-style) usado para continuar ou iniciar uma unidade didática no mapa.
+        
+Siga a Brand Guideline usando \`iconName="Play"\` ou qualquer outro nome da biblioteca \`lucide-react-native\`.
+
+### Exemplo de Uso
+\`\`\`tsx
+<JourneyButton
+  iconName="Play"
+  title="Continuar a viagem"
+  subtitle="ESTÁS EM DAKAR - B2"
+  variant="primary"
+  onPress={() => console.log('Iniciar Lição')}
+/>
+\`\`\``
+      }
+    }
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 0, backgroundColor: '#f5f0eb', alignItems: 'center', justifyContent: 'center' }}>
+        <View style={{ width: '100%', maxWidth: 400 }}>
+          <Story />
+        </View>
+      </View>
+    )
+  ]
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+export const Default: Story = {
+  args: {
+    iconName: 'Play',
+    title: 'Continuar a viagem',
+    subtitle: 'ESTÁS EM DAKAR - B2',
+    variant: 'primary',
+  }
+};
+
+export const Disabled: Story = {
+  args: {
+    iconName: 'Play',
+    title: 'Bloqueado',
+    subtitle: 'COMPLETA A LIÇÃO 1',
+    disabled: true,
+  }
+};
+
+export const CustomCountryColor: Story = {
+  args: {
+    iconName: 'Play',
+    title: 'Continuar a viagem',
+    subtitle: 'ESTÁS EM LUANDA - B2',
+    bgColor: '#16915a',
+    shadowColor: '#0e6940',
+  }
+};
+
+export const InfoVariant: Story = {
+  args: {
+    iconName: 'Info',
+    title: 'Explorar secção',
+    subtitle: 'DICAS DE GRAMÁTICA',
+    bgColor: '#2a6fc2',
+    shadowColor: '#1d4f8f',
+  }
+};

package/src/components/Buttons/JourneyButton/JourneyButton.tsx

@@ -0,0 +1,194 @@
+import React, { useState } from 'react';
+import { Pressable, StyleSheet, Platform, View } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { theme } from '../../../styles/theme';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { IconMap } from '../../../utils/iconMap';
+import { Typography } from '../../Typography/Typography';
+
+export interface JourneyButtonProps {
+  /** Título de ação (ex: 'Continuar a viagem') */
+  title: string;
+  /** Subtítulo do percurso (ex: 'ESTÁS EM DAKAR - B2') */
+  subtitle: string;
+  /** Nome exato do ícone da esquerda (ex: 'Play') */
+  iconName?: string;
+  /** Variante do botão para predefinição de cores */
+  variant?: 'primary' | 'secondary';
+  /** Cor de fundo customizada */
+  bgColor?: string;
+  /** Cor da sombra customizada */
+  shadowColor?: string;
+  /** Cor do texto e ícones */
+  textColor?: string;
+  /** Cor de fundo no hover (web) */
+  hoverColor?: string;
+  /** Se o botão está desativado */
+  disabled?: boolean;
+  /** Callback para o evento de clique */
+  onPress?: () => void;
+  /** Estilos customizados */
+  style?: ViewStyle | ViewStyle[];
+}
+
+export const JourneyButton = React.forwardRef<React.ElementRef<typeof Pressable>, JourneyButtonProps>(
+  (
+    {
+      title,
+      subtitle,
+      iconName = 'Play',
+      variant = 'primary',
+      bgColor,
+      shadowColor,
+      textColor,
+      hoverColor,
+      disabled = false,
+      onPress,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const [isHovered, setIsHovered] = useState(false);
+    const { scale, scaleText } = useResponsive();
+
+    const LeftIcon = IconMap[iconName] as React.ElementType;
+    const RightIcon = IconMap['ArrowRight'] as React.ElementType;
+
+    const getBgColor = () => {
+      if (disabled) return '#efe2d6';
+      if (bgColor) return isHovered && hoverColor ? hoverColor : bgColor;
+      if (variant === 'primary') return isHovered ? '#e8883e' : theme.colors.primary;
+      return theme.colors.white;
+    };
+
+    const getTextColor = () => {
+      if (disabled) return '#b9a392';
+      if (textColor) return textColor;
+      if (variant === 'primary') return '#ffffff';
+      return theme.colors.brown[800];
+    };
+
+    const getShadowStyles = (): ViewStyle => {
+      if (disabled) return {};
+      
+      if (Platform.OS === 'web') {
+        const resolvedShadowColor = shadowColor || (variant === 'primary' ? theme.colors.primaryDark : theme.colors.brown[100]);
+        return {
+          boxShadow: `0px ${scale(4)}px 0px ${resolvedShadowColor}`
+        };
+      } else {
+        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;
+      }
+    };
+
+    const buttonStyles: ViewStyle[] = [
+      styles.container,
+      { backgroundColor: getBgColor(), borderRadius: scale(20), padding: scale(16) },
+      getShadowStyles(),
+      style as ViewStyle,
+    ];
+
+    const hoverProps = Platform.OS === 'web' ? {
+      onHoverIn: () => !disabled && setIsHovered(true),
+      onHoverOut: () => !disabled && setIsHovered(false),
+    } : {};
+
+    return (
+      <Pressable
+        ref={ref}
+        disabled={disabled}
+        onPress={onPress}
+        style={({ pressed }) => {
+          const stateStyles: ViewStyle[] = [...buttonStyles];
+          
+          if (disabled) {
+            if (Platform.OS === 'web') stateStyles.push({ cursor: 'not-allowed' } as any);
+            return stateStyles;
+          }
+
+          if (pressed) {
+            stateStyles.push({ transform: [{ translateY: scale(4) }] });
+            if (Platform.OS === 'web') {
+              stateStyles.push({ boxShadow: 'none' } as any);
+            } else {
+              stateStyles.push({ shadowOpacity: 0, elevation: 0 });
+            }
+          }
+          return stateStyles;
+        }}
+        {...hoverProps}
+        {...props}
+      >
+        <View style={styles.content}>
+          <View style={[styles.iconBox, { borderRadius: scale(14), width: scale(56), height: scale(56), marginRight: scale(16) }]}>
+            {LeftIcon ? (
+              <LeftIcon size={scale(24)} color={getTextColor()} strokeWidth={3} fill={getTextColor()} />
+            ) : null}
+          </View>
+          
+          <View style={styles.textContainer}>
+            <Typography 
+              numberOfLines={1} 
+              adjustsFontSizeToFit 
+              style={[styles.subtitle, { color: getTextColor(), fontSize: scaleText(10), marginBottom: scale(4) }]}
+            >
+              {subtitle}
+            </Typography>
+            <Typography style={[styles.title, { color: getTextColor(), fontSize: scaleText(20) }]}>
+              {title}
+            </Typography>
+          </View>
+
+          <View style={[styles.rightIconBox, { marginLeft: scale(16) }]}>
+             <RightIcon size={scale(24)} color={getTextColor()} strokeWidth={3} />
+          </View>
+        </View>
+      </Pressable>
+    );
+  }
+);
+
+JourneyButton.displayName = 'JourneyButton';
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    overflow: 'visible',
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  iconBox: {
+    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  textContainer: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  subtitle: {
+
+    letterSpacing: 0.8,
+    textTransform: 'uppercase',
+    opacity: 0.9,
+  },
+  title: {
+
+  },
+  rightIconBox: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  }
+});

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

@@ -0,0 +1,144 @@
+
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+import { MainButton } from './MainButton';
+
+const meta = {
+  title: 'Components/Buttons/MainButton',
+  component: MainButton,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'O **MainButton** é o botão de ação principal (CTA) da aplicação.\n\n### Exemplo de Uso\n```tsx\n<MainButton \n  variant="primary"\n  size="md"\n  onPress={() => console.log("Clicado!")}\n>\n  Confirmar\n</MainButton>\n```',
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'radio',
+      options: ['primary', 'secondary', 'ghost'],
+    },
+    size: {
+      control: 'radio',
+      options: ['sm', 'md', 'lg'],
+    },
+    fullWidth: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    loading: {
+      control: 'boolean',
+    },
+    children: {
+      control: 'text',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 0, width: '100%', alignItems: 'center' }}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+// Basic Variants
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+    children: 'Confirmar',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+    children: 'Cancelar',
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    variant: 'ghost',
+    children: 'Ver detalhes',
+  },
+};
+
+// Sizes
+export const Small: Story = {
+  args: {
+    size: 'sm',
+    children: 'Ação Pequena',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'lg',
+    children: 'Começar Agora',
+  },
+};
+
+// States
+export const Loading: Story = {
+  args: {
+    loading: true,
+    children: 'A Carregar...',
+  },
+};
+
+export const DisabledPrimary: Story = {
+  args: {
+    variant: 'primary',
+    disabled: true,
+    children: 'Indisponível',
+  },
+};
+
+export const DisabledSecondary: Story = {
+  args: {
+    variant: 'secondary',
+    disabled: true,
+    children: 'Indisponível',
+  },
+};
+
+export const DisabledGhost: Story = {
+  args: {
+    variant: 'ghost',
+    disabled: true,
+    children: 'Indisponível',
+  },
+};
+
+export const FullWidth: Story = {
+  decorators: [
+    (Story) => (
+      <View style={{ width: 300 }}>
+        <Story />
+      </View>
+    ),
+  ],
+  args: {
+    fullWidth: true,
+    children: 'Largura Total',
+  },
+};
+
+// Custom Colors
+export const CustomGreen: Story = {
+  args: {
+    variant: 'primary',
+    children: 'Sucesso',
+    bgColor: '#16915a', // var(--color-success)
+    shadowColor: '#0e6940',
+  },
+};