@xetwa/design-system 1.0.2

package/src/components/Navigation/PaginationDots/PaginationDots.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useRef } from 'react';
+import { View, StyleSheet, Animated, Easing } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { theme } from '../../../styles/theme';
+import { useResponsive } from '../../../hooks/useResponsive';
+
+/**
+ * Componente de navegação em forma de pontos (Dots).
+ * Usado em carrosséis, onboarding ou para indicar a página atual.
+ */
+export interface PaginationDotsProps {
+  /** O número total de páginas/pontos. */
+  totalPages: number;
+  /** A página atual (base 0). */
+  currentPage: number;
+  /** Cor customizada dos pontos inativos (opcional). */
+  inactiveColor?: string;
+  /** Cor customizada do ponto ativo (opcional). */
+  activeColor?: string;
+  style?: ViewStyle | ViewStyle[];
+}
+
+interface DotProps {
+  isActive: boolean;
+}
+
+const Dot = ({ isActive }: DotProps) => {
+  const { scale } = useResponsive();
+
+  // Animação da largura: Inativo (6px) -> Ativo (20px)
+  const widthAnim = useRef(new Animated.Value(isActive ? scale(20) : scale(6))).current;
+
+  useEffect(() => {
+    Animated.timing(widthAnim, {
+      toValue: isActive ? scale(20) : scale(6),
+      duration: 250,
+      easing: Easing.bezier(0.175, 0.885, 0.32, 1.275), // Efeito "ease-bounce" semelhante ao CSS
+      useNativeDriver: false, // Animating width requires useNativeDriver: false
+    }).start();
+  }, [isActive, widthAnim, scale]);
+
+  return (
+    <Animated.View
+      style={[
+        styles.dot,
+        {
+          width: widthAnim,
+          height: scale(6),
+          borderRadius: scale(3),
+          backgroundColor: isActive ? theme.colors.primary : theme.colors.brown[100],
+        },
+      ]}
+    />
+  );
+};
+
+export const PaginationDots = ({ totalPages, currentPage, style }: PaginationDotsProps) => {
+  const { scale } = useResponsive();
+
+  // Garantir que não crasha caso passem steps negativos
+  const safeCurrentStep = Math.max(0, Math.min(currentPage, totalPages - 1));
+
+  return (
+    <View style={[styles.container, { gap: scale(7), marginBottom: scale(24) }, style]}>
+      {Array.from({ length: totalPages }).map((_, index) => (
+        <Dot key={index} isActive={index === safeCurrentStep} />
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  dot: {
+    // Definido via styles dinâmicos, mas as bases podem ficar aqui
+  },
+});

package/src/components/Navigation/PaginationDots/index.ts

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

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

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { View, Alert, Platform } from 'react-native';
+import { ProgressMap } from './ProgressMap';
+import type { MapStation } from './ProgressMap';
+
+const meta = {
+  title: 'Components/Navigation/ProgressMap',
+  component: ProgressMap,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'O **ProgressMap** é um componente premium para a Home Screen que renderiza um mapa de progresso interativo e rolável. Apresenta ilhas/continentes SVG, rotas pontilhadas, bandeiras circulares com indicador de paragem e um painel inferior de continuação.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    activeStationId: {
+      control: 'number',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ flex: 1, height: 750, backgroundColor: '#efe2d6', justifyContent: 'center', alignItems: 'center' }}>
+        <View style={{ width: '100%', height: '100%', maxWidth: 500, borderLeftWidth: 1, borderRightWidth: 1, borderColor: '#efe2d6' }}>
+          <Story />
+        </View>
+      </View>
+    ),
+  ],
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+// 8 Stops: Rota da Francofonia
+const baseStations: MapStation[] = [
+  { id: 1, label: 'Paris', levelCode: 'A1', countryCode: 'FR', status: 'visited' },
+  { id: 2, label: 'Bruxelles', levelCode: 'A2', countryCode: 'BE', status: 'visited' },
+  { id: 3, label: 'Genève', levelCode: 'A2', countryCode: 'CH', status: 'visited' },
+  { id: 4, label: 'Montréal', levelCode: 'B1', countryCode: 'CA', status: 'visited' },
+  { id: 5, label: 'Dakar', levelCode: 'B2', countryCode: 'SN', status: 'current' },
+  { id: 6, label: 'Abidjan', levelCode: 'B2', countryCode: 'CI', status: 'locked' },
+  { id: 7, label: 'Yaoundé', levelCode: 'C1', countryCode: 'CM', status: 'locked' },
+  { id: 8, label: 'Antananarivo', levelCode: 'C1', countryCode: 'MG', status: 'locked' },
+];
+
+export const Default: Story = {
+  name: 'Rota da Francofonia (8 Paragens)',
+  args: {
+    title: 'A ROTA DA FRANCOFONIA',
+    stations: baseStations,
+    activeStationId: 5,
+    size: 'md',
+    onStationPress: (station: any) => {
+      if (Platform.OS === 'web') {
+        console.log('Estação selecionada:', station.label);
+      } else {
+        Alert.alert('Estação selecionada', station.label);
+      }
+    },
+    onContinuePress: (station: any) => {
+      if (Platform.OS === 'web') {
+        console.log('A continuar viagem de:', station.label);
+      } else {
+        Alert.alert('Viagem', `A continuar de ${station.label}`);
+      }
+    },
+    onBackPress: () => {
+      console.log('Retroceder');
+    },
+    onFlightPress: () => {
+      console.log('Abrir Voo');
+    },
+  },
+};
+
+// Long winding route of 15 stops
+const longStations: MapStation[] = [
+  { id: 1, label: 'Paris', levelCode: 'A1', countryCode: 'FR', status: 'visited' },
+  { id: 2, label: 'Bruxelles', levelCode: 'A1', countryCode: 'BE', status: 'visited' },
+  { id: 3, label: 'Luxembourg', levelCode: 'A2', countryCode: 'LU', status: 'visited' },
+  { id: 4, label: 'Monaco', levelCode: 'A2', countryCode: 'MC', status: 'visited' },
+  { id: 5, label: 'Genève', levelCode: 'A2', countryCode: 'CH', status: 'visited' },
+  { id: 6, label: 'Montréal', levelCode: 'B1', countryCode: 'CA', status: 'visited' },
+  { id: 7, label: 'Aosta', levelCode: 'B1', countryCode: 'FR', status: 'visited' }, // Fallback flag FR
+  { id: 8, label: 'Bamako', levelCode: 'B1', countryCode: 'ML', status: 'visited' },
+  { id: 9, label: 'Dakar', levelCode: 'B2', countryCode: 'SN', status: 'current' },
+  { id: 10, label: 'Abidjan', levelCode: 'B2', countryCode: 'CI', status: 'locked' },
+  { id: 11, label: 'Ouagadougou', levelCode: 'B2', countryCode: 'BF', status: 'locked' },
+  { id: 12, label: 'Niamey', levelCode: 'C1', countryCode: 'NE', status: 'locked' },
+  { id: 13, label: 'N\'Djamena', levelCode: 'C1', countryCode: 'TD', status: 'locked' },
+  { id: 14, label: 'Libreville', levelCode: 'C1', countryCode: 'GA', status: 'locked' },
+  { id: 15, label: 'Antananarivo', levelCode: 'C1', countryCode: 'MG', status: 'locked' },
+];
+
+export const LongJourney: Story = {
+  name: 'Longa Viagem (15 Paragens)',
+  args: {
+    title: 'EXPEDIÇÃO TRANSAFRICANA',
+    subtitle: '15 paragens · A1 → C1',
+    stations: longStations,
+    activeStationId: 9,
+    size: 'md',
+    onStationPress: (station: any) => console.log('Station pressed:', station),
+    onContinuePress: (station: any) => console.log('Continue pressed from:', station),
+    onBackPress: () => console.log('Back pressed'),
+    onFlightPress: () => console.log('Flight pressed'),
+  },
+};