@xetwa/design-system 1.0.39 → 1.0.41

package/src/components/Feedback/BottomSheet/BottomSheet.tsx

@@ -0,0 +1,124 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { View, StyleSheet, Animated, Modal, Pressable } from 'react-native';
+import { Typography } from '../../Typography/Typography';
+import { theme } from '../../../styles/theme';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { X } from 'lucide-react-native';
+
+export interface BottomSheetProps {
+  /** Se o painel está visível */
+  isVisible: boolean;
+  /** Callback para fechar o painel */
+  onClose: () => void;
+  /** Título do painel */
+  title?: string;
+  /** Conteúdo do painel */
+  children: React.ReactNode;
+}
+
+/**
+ * Componente BottomSheet
+ * 
+ * Um painel que desliza desde a parte inferior do ecrã para mostrar
+ * conteúdos adicionais, como seletores, opções extras ou formulários.
+ */
+export const BottomSheet: React.FC<BottomSheetProps> = ({
+  isVisible,
+  onClose,
+  title,
+  children,
+}) => {
+  const { scale } = useResponsive();
+  const [renderModal, setRenderModal] = useState(isVisible);
+  const translateY = useRef(new Animated.Value(1000)).current;
+
+  // Sincronizar montagem do Modal com a animação
+  useEffect(() => {
+    if (isVisible) {
+      setRenderModal(true);
+      Animated.timing(translateY, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true,
+        easing: (value) => 1 - Math.pow(1 - value, 3), // ease-out
+      }).start();
+    } else if (renderModal) {
+      Animated.timing(translateY, {
+        toValue: 1000,
+        duration: 250,
+        useNativeDriver: true,
+      }).start(() => {
+        setRenderModal(false);
+      });
+    }
+  }, [isVisible, translateY, renderModal]);
+
+  const handleClose = () => {
+    onClose();
+  };
+
+  if (!renderModal) return null;
+
+  return (
+    <Modal visible={renderModal} transparent animationType="fade" onRequestClose={handleClose}>
+      <View style={styles.overlay}>
+        <Pressable style={styles.backdrop} onPress={handleClose} />
+        <Animated.View style={[styles.sheet, { transform: [{ translateY }] }]}>
+          
+          <View style={[styles.header, { paddingVertical: scale(16), paddingHorizontal: scale(20) }]}>
+            {title ? (
+              <Typography variant="h2" style={styles.title}>{title}</Typography>
+            ) : <View />}
+            
+            <Pressable onPress={handleClose} style={({ pressed }) => [styles.closeBtn, pressed && { opacity: 0.5 }]}>
+              <X stroke="#9a8478" strokeWidth={2.5} size={scale(24)} />
+            </Pressable>
+          </View>
+          
+          <View style={[styles.content, { paddingHorizontal: scale(20), paddingBottom: scale(32) }]}>
+            {children}
+          </View>
+          
+        </Animated.View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    backgroundColor: 'rgba(0, 0, 0, 0.4)',
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  sheet: {
+    backgroundColor: theme.colors.white,
+    borderTopLeftRadius: theme.radius.xxl,
+    borderTopRightRadius: theme.radius.xxl,
+    width: '100%',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: -2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 10,
+    elevation: 10,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.brown[50], // #fbf6f0
+  },
+  title: {
+    color: theme.colors.brown[800],
+  },
+  closeBtn: {
+    padding: 4,
+  },
+  content: {
+    paddingTop: 16,
+  },
+});

package/src/components/Forms/CalendarPicker/CalendarPicker.stories.tsx

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { CalendarPicker } from './CalendarPicker';
+import { View } from 'react-native';
+
+const meta = {
+  title: 'Forms/CalendarPicker',
+  component: CalendarPicker,
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 20, backgroundColor: '#fbf6f0', flex: 1 }}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<typeof CalendarPicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [date, setDate] = useState<string | Date>(new Date());
+    return (
+      <CalendarPicker
+        selectedDate={date}
+        onSelectDate={(str) => setDate(str)}
+      />
+    );
+  }
+};

package/src/components/Forms/CalendarPicker/CalendarPicker.tsx

@@ -0,0 +1,220 @@
+import React, { useState, useMemo } from 'react';
+import { View, StyleSheet, Pressable } from 'react-native';
+import { Typography } from '../../Typography/Typography';
+import { theme } from '../../../styles/theme';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { ChevronLeft, ChevronRight } from 'lucide-react-native';
+
+export interface CalendarPickerProps {
+  /** Data atualmente selecionada (ex: '2024-03-24' ou Date object) */
+  selectedDate?: string | Date;
+  /** Callback quando uma data é escolhida */
+  onSelectDate: (dateString: string, date: Date) => void;
+}
+
+const WEEKDAYS = ['DOM', 'SEG', 'TER', 'QUA', 'QUI', 'SEX', 'SÁB'];
+const MONTHS = [
+  'JANEIRO', 'FEVEREIRO', 'MARÇO', 'ABRIL', 'MAIO', 'JUNHO',
+  'JULHO', 'AGOSTO', 'SETEMBRO', 'OUTUBRO', 'NOVEMBRO', 'DEZEMBRO'
+];
+
+/**
+ * Componente CalendarPicker
+ * Permite a seleção de uma data num calendário nativo customizado.
+ */
+export const CalendarPicker: React.FC<CalendarPickerProps> = ({
+  selectedDate,
+  onSelectDate,
+}) => {
+  const { scale } = useResponsive();
+
+  // Normalize selected date
+  const parsedSelectedDate = selectedDate
+    ? (typeof selectedDate === 'string' ? new Date(selectedDate) : selectedDate)
+    : null;
+
+  // Estado para o mês e ano visualizados
+  const [currentViewDate, setCurrentViewDate] = useState(
+    parsedSelectedDate || new Date()
+  );
+
+  const viewMonth = currentViewDate.getMonth();
+  const viewYear = currentViewDate.getFullYear();
+
+  const handlePrevMonth = () => {
+    setCurrentViewDate(new Date(viewYear, viewMonth - 1, 1));
+  };
+
+  const handleNextMonth = () => {
+    setCurrentViewDate(new Date(viewYear, viewMonth + 1, 1));
+  };
+
+  // Gerar dias do calendário
+  const daysInMonth = useMemo(() => {
+    const year = viewYear;
+    const month = viewMonth;
+    const date = new Date(year, month, 1);
+    const days: (Date | null)[] = [];
+
+    // Preencher dias vazios antes do dia 1 (para alinhar com o dia da semana correto)
+    const firstDayOfWeek = date.getDay(); // 0 = Sunday, 1 = Monday, etc.
+    for (let i = 0; i < firstDayOfWeek; i++) {
+      days.push(null);
+    }
+
+    // Preencher dias do mês
+    while (date.getMonth() === month) {
+      days.push(new Date(date));
+      date.setDate(date.getDate() + 1);
+    }
+
+    return days;
+  }, [viewYear, viewMonth]);
+
+  const isSameDay = (d1: Date, d2: Date) => {
+    return d1.getFullYear() === d2.getFullYear() &&
+           d1.getMonth() === d2.getMonth() &&
+           d1.getDate() === d2.getDate();
+  };
+
+  // Função para garantir formato YYYY-MM-DD local sem problema de fuso horário
+  const formatDateString = (date: Date) => {
+    const y = date.getFullYear();
+    const m = String(date.getMonth() + 1).padStart(2, '0');
+    const d = String(date.getDate()).padStart(2, '0');
+    return `${y}-${m}-${d}`;
+  };
+
+  return (
+    <View style={styles.container}>
+      {/* Header do Mês */}
+      <View style={styles.header}>
+        <Pressable onPress={handlePrevMonth} style={({ pressed }) => [styles.arrowBtn, pressed && { opacity: 0.5 }]}>
+          <ChevronLeft stroke={theme.colors.brown[800]} strokeWidth={2.5} size={scale(24)} />
+        </Pressable>
+        <Typography variant="h2" style={styles.monthText}>
+          {MONTHS[viewMonth]} {viewYear}
+        </Typography>
+        <Pressable onPress={handleNextMonth} style={({ pressed }) => [styles.arrowBtn, pressed && { opacity: 0.5 }]}>
+          <ChevronRight stroke={theme.colors.brown[800]} strokeWidth={2.5} size={scale(24)} />
+        </Pressable>
+      </View>
+
+      {/* Dias da Semana (D S T Q Q S S) */}
+      <View style={styles.weekdaysRow}>
+        {WEEKDAYS.map((day, index) => (
+          <View key={index} style={styles.weekdayCell}>
+            <Typography variant="label" style={styles.weekdayText}>
+              {day[0]}
+            </Typography>
+          </View>
+        ))}
+      </View>
+
+      {/* Grelha de Dias */}
+      <View style={styles.daysGrid}>
+        {daysInMonth.map((date, index) => {
+          if (!date) {
+            return <View key={`empty-${index}`} style={styles.dayCell} />;
+          }
+
+          const isSelected = parsedSelectedDate ? isSameDay(date, parsedSelectedDate) : false;
+          const isToday = isSameDay(date, new Date());
+          const isPast = date < new Date(new Date().setHours(0,0,0,0));
+
+          return (
+            <Pressable
+              key={index}
+              disabled={isPast}
+              onPress={() => onSelectDate(formatDateString(date), date)}
+              style={({ pressed }) => [
+                styles.dayCell,
+                pressed && !isPast && { opacity: 0.7 },
+                isPast && { opacity: 0.3 }
+              ]}
+            >
+              <View style={[
+                styles.dayCircle,
+                isSelected && styles.dayCircleSelected
+              ]}>
+                <Typography
+                  variant="bodyLg"
+                  weight={isSelected ? 'bold' : 'normal'}
+                  style={[
+                    styles.dayText,
+                    isSelected && styles.dayTextSelected,
+                    isToday && !isSelected && styles.dayTextToday
+                  ]}
+                >
+                  {date.getDate()}
+                </Typography>
+              </View>
+            </Pressable>
+          );
+        })}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 20,
+    paddingHorizontal: 8,
+  },
+  monthText: {
+    color: theme.colors.brown[800],
+    textTransform: 'uppercase',
+  },
+  arrowBtn: {
+    padding: 4,
+  },
+  weekdaysRow: {
+    flexDirection: 'row',
+    marginBottom: 8,
+  },
+  weekdayCell: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  weekdayText: {
+    color: theme.colors.brown[400],
+  },
+  daysGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  dayCell: {
+    width: `${100 / 7}%`,
+    height: 44, // Altura fixa para garantir que o círculo interior fique centrado
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  dayCircle: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  dayCircleSelected: {
+    backgroundColor: theme.colors.primary,
+  },
+  dayText: {
+    color: theme.colors.brown[700],
+  },
+  dayTextSelected: {
+    color: theme.colors.white,
+  },
+  dayTextToday: {
+    color: theme.colors.primary,
+    fontWeight: 'bold',
+  },
+});

package/src/components/Forms/DaySelector/DaySelector.tsx

@@ -4,6 +4,7 @@ import type { ViewStyle } from 'react-native';
 import { theme } from '../../../styles/theme';
 import { useResponsive } from '../../../hooks/useResponsive';
 import { Typography } from '../../Typography/Typography';
+import { Calendar } from 'lucide-react-native';
 
 /**
  * Interface para os dados de um dia disponível no DaySelector.
@@ -36,6 +37,8 @@ export interface DaySelectorProps {
   onSelectDay: (id: string, date: Date) => void;
   /** Estilo para o container exterior */
   style?: ViewStyle | ViewStyle[];
+  /** Callback chamado quando o utilizador clica no ícone de calendário (para ver mais datas) */
+  onCalendarPress?: () => void;
 }
 
 export const DaySelector = ({
@@ -43,6 +46,7 @@ export const DaySelector = ({
   selectedId,
   onSelectDay,
   style,
+  onCalendarPress,
 }: DaySelectorProps) => {
   const { scale, scaleText } = useResponsive();
 
@@ -110,6 +114,30 @@ export const DaySelector = ({
             </Pressable>
           );
         })}
+        
+        {onCalendarPress && (
+          <Pressable
+            onPress={onCalendarPress}
+            style={({ pressed }) => [
+              styles.item,
+              transitionStyle,
+              {
+                minWidth: scale(48),
+                paddingVertical: scale(8),
+                borderRadius: scale(13),
+                backgroundColor: '#fff',
+                borderWidth: scale(1.5),
+                borderColor: '#efe2d6',
+                borderStyle: 'dashed',
+              },
+              pressed && {
+                opacity: 0.7
+              }
+            ]}
+          >
+            <Calendar stroke="#9a8478" strokeWidth={2} size={scale(20)} />
+          </Pressable>
+        )}
       </ScrollView>
     </View>
   );

package/src/components/Forms/TimeSlot/TimeSlot.tsx

@@ -3,6 +3,7 @@ import type { ViewStyle } from 'react-native';
 import { theme } from '../../../styles/theme';
 import { useResponsive } from '../../../hooks/useResponsive';
 import { Typography } from '../../Typography/Typography';
+import { Plus } from 'lucide-react-native';
 
 /**
  * Interface para os dados de um horário disponível no TimeSlot.
@@ -31,6 +32,8 @@ export interface TimeSlotProps {
   onSelectTime: (id: string, time: string) => void;
   /** Estilo para o container exterior */
   style?: ViewStyle | ViewStyle[];
+  /** Callback chamado quando o utilizador clica em "Ver mais" */
+  onShowMorePress?: () => void;
 }
 
 export const TimeSlot = ({
@@ -38,6 +41,7 @@ export const TimeSlot = ({
   selectedId,
   onSelectTime,
   style,
+  onShowMorePress,
 }: TimeSlotProps) => {
   const { scale, scaleText } = useResponsive();
 
@@ -96,6 +100,31 @@ export const TimeSlot = ({
             </Pressable>
           );
         })}
+        {onShowMorePress && (
+          <Pressable
+            onPress={onShowMorePress}
+            style={({ pressed }) => [
+              styles.item,
+              transitionStyle,
+              {
+                paddingVertical: scale(9),
+                paddingHorizontal: scale(14),
+                borderRadius: scale(11),
+                backgroundColor: '#fff',
+                borderWidth: scale(1.5),
+                borderColor: '#efe2d6',
+                borderStyle: 'dashed',
+                minHeight: scale(44),
+                minWidth: scale(44),
+              },
+              pressed && {
+                opacity: 0.7
+              }
+            ]}
+          >
+            <Plus stroke="#9a8478" strokeWidth={2.5} size={scale(18)} />
+          </Pressable>
+        )}
       </View>
     </View>
   );

package/src/components/Navigation/TabBar/TabBar.stories.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { TabBar } from './TabBar';
+
+const meta = {
+  title: 'Components/Navigation/TabBar',
+  component: TabBar,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'TabBar component with 3 variants (A: Pill, B: Top Bar, C: Dot below) and notification badges.',
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: { control: 'radio', options: ['A', 'B', 'C'] },
+    safeAreaBottom: { control: 'number' },
+    activeItemId: { control: 'text' },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ flex: 1, justifyContent: 'flex-end', backgroundColor: '#f5f0eb' }}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<typeof TabBar>;
+
+export default meta;
+type Story = StoryObj<typeof TabBar>;
+
+const defaultItems = [
+  { id: 'inicio', label: 'Início', icon: 'Home' },
+  { id: 'percurso', label: 'Percurso', icon: 'Compass' },
+  { id: 'aulas', label: 'Aulas', icon: 'GraduationCap' },
+  { id: 'dossier', label: 'Dossier', hasBadge: true, icon: 'FolderOpen' },
+  { id: 'perfil', label: 'Perfil', icon: 'User' },
+];
+
+export const VariantB: Story = {
+  args: {
+    items: defaultItems,
+    activeItemId: 'inicio',
+    variant: 'B',
+    safeAreaBottom: 20,
+  },
+  render: function Render(args) {
+    const [activeId, setActiveId] = useState(args.activeItemId);
+    return <TabBar {...args} activeItemId={activeId} onItemPress={setActiveId} />;
+  }
+};
+
+export const VariantA: Story = {
+  args: {
+    items: defaultItems,
+    activeItemId: 'inicio',
+    variant: 'A',
+    safeAreaBottom: 20,
+  },
+  render: function Render(args) {
+    const [activeId, setActiveId] = useState(args.activeItemId);
+    return <TabBar {...args} activeItemId={activeId} onItemPress={setActiveId} />;
+  }
+};
+
+export const VariantC: Story = {
+  args: {
+    items: defaultItems,
+    activeItemId: 'inicio',
+    variant: 'C',
+    safeAreaBottom: 20,
+  },
+  render: function Render(args) {
+    const [activeId, setActiveId] = useState(args.activeItemId);
+    return <TabBar {...args} activeItemId={activeId} onItemPress={setActiveId} />;
+  }
+};