@navegarti/rn-design-system 0.2.0

package/src/api/retry-strategy.ts

@@ -0,0 +1,86 @@
+import type { AxiosError } from 'axios';
+import type { RetryConfig } from './types';
+
+/**
+ * Calculates exponential backoff delay
+ * Formula: min(baseDelay * (2 ^ attempt), maxDelay)
+ */
+export function calculateBackoffDelay(
+  attempt: number,
+  baseDelay: number,
+  maxDelay: number,
+): number {
+  const exponentialDelay = baseDelay * 2 ** attempt;
+  return Math.min(exponentialDelay, maxDelay);
+}
+
+/**
+ * Determines if an error is retryable based on configuration
+ */
+export function isRetryableError(
+  error: AxiosError,
+  retryConfig: RetryConfig,
+): boolean {
+  // Network errors (no response) are always retryable
+  if (!error.response) {
+    return true;
+  }
+
+  const statusCode = error.response.status;
+
+  // Check if status code is in retryable list
+  return retryConfig.retryableStatusCodes.includes(statusCode);
+}
+
+/**
+ * Sleep utility for retry delays
+ */
+export function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}
+
+/**
+ * Executes a request with retry logic
+ * @template T - The expected response type
+ */
+export async function executeWithRetry<T>(
+  requestFn: () => Promise<T>,
+  retryConfig: RetryConfig,
+  onRetry?: (attempt: number, delay: number, error: AxiosError) => void,
+): Promise<T> {
+  let lastError: AxiosError | undefined;
+
+  for (let attempt = 0; attempt < retryConfig.maxAttempts; attempt++) {
+    try {
+      return await requestFn();
+    } catch (error) {
+      const axiosError = error as AxiosError;
+      lastError = axiosError;
+
+      // Don't retry if not retryable or if this was the last attempt
+      const isLastAttempt = attempt === retryConfig.maxAttempts - 1;
+      if (!isRetryableError(axiosError, retryConfig) || isLastAttempt) {
+        throw error;
+      }
+
+      // Calculate delay and wait before retrying
+      const delay = calculateBackoffDelay(
+        attempt,
+        retryConfig.baseDelay,
+        retryConfig.maxDelay,
+      );
+
+      // Notify callback if provided
+      if (onRetry) {
+        onRetry(attempt + 1, delay, axiosError);
+      }
+
+      await sleep(delay);
+    }
+  }
+
+  // This should never be reached, but TypeScript needs it
+  throw lastError;
+}

package/src/api/stores/auth-store.ts

@@ -0,0 +1,26 @@
+import { create } from 'zustand';
+
+/**
+ * Authentication store state
+ */
+interface AuthState {
+  token: string | null;
+  setToken: (token: string) => void;
+  clearToken: () => void;
+}
+
+/**
+ * Zustand store for managing authentication token
+ * Token is stored in memory and used for Authorization header
+ */
+export const useAuthStore = create<AuthState>((set) => ({
+  token: null,
+
+  setToken: (token: string) => {
+    set({ token });
+  },
+
+  clearToken: () => {
+    set({ token: null });
+  },
+}));

package/src/api/types.ts

@@ -0,0 +1,91 @@
+import type { AxiosRequestConfig } from 'axios';
+
+/**
+ * Standardized API response format
+ * @template T - The type of data returned on success
+ */
+export interface ApiResponse<T = unknown> {
+  success: boolean;
+  data: T | null;
+  statusCode: number;
+  error: string;
+}
+
+/**
+ * Configuration options for API adapter
+ */
+export interface ApiConfig {
+  baseURL: string;
+  timeout?: number;
+  retryAttempts?: number;
+  headers?: Record<string, string>;
+}
+
+/**
+ * Interface for HTTP client adapter
+ * Defines the contract all HTTP adapters must implement
+ */
+export interface IHttpAdapter {
+  /**
+   * Performs a GET request
+   * @template T - Expected response data type
+   */
+  get<T = unknown>(
+    url: string,
+    config?: AxiosRequestConfig,
+  ): Promise<ApiResponse<T>>;
+
+  /**
+   * Performs a POST request
+   * @template T - Expected response data type
+   */
+  post<T = unknown>(
+    url: string,
+    data?: unknown,
+    config?: AxiosRequestConfig,
+  ): Promise<ApiResponse<T>>;
+
+  /**
+   * Performs a PUT request
+   * @template T - Expected response data type
+   */
+  put<T = unknown>(
+    url: string,
+    data?: unknown,
+    config?: AxiosRequestConfig,
+  ): Promise<ApiResponse<T>>;
+
+  /**
+   * Performs a DELETE request
+   * @template T - Expected response data type
+   */
+  delete<T = unknown>(
+    url: string,
+    config?: AxiosRequestConfig,
+  ): Promise<ApiResponse<T>>;
+
+  /**
+   * Adds authentication token to all subsequent requests
+   */
+  addToken(token: string): void;
+
+  /**
+   * Removes authentication token from requests
+   */
+  removeToken(): void;
+
+  /**
+   * Get token from store
+   */
+  getToken(): string | null;
+}
+
+/**
+ * Retry configuration
+ */
+export interface RetryConfig {
+  maxAttempts: number;
+  baseDelay: number;
+  maxDelay: number;
+  retryableStatusCodes: number[];
+}

package/src/api.tsx

@@ -0,0 +1,17 @@
+/**
+ * API module entry point.
+ * Exports HTTP client, types, errors, and stores.
+ */
+
+export {
+  ApiError,
+  AuthError,
+  NetworkError,
+  NotFoundError,
+  RateLimitError,
+  ServerError,
+  TimeoutError,
+  ValidationError,
+} from './api/errors';
+export { AxiosAdapter, apiRequest, useAuthStore } from './api/index';
+export type { ApiConfig, ApiResponse, IHttpAdapter } from './api/types';

package/src/components/Button/index.tsx

@@ -0,0 +1,35 @@
+import styled from '@emotion/native';
+
+import { type ButtonProps, ButtonText, DefaultButtonStyle } from './styles';
+
+const DefaultButton = (props: ButtonProps) => (
+  <DefaultButtonStyle activeOpacity={0.5} {...props} />
+);
+
+const SquareButton = styled(DefaultButton)(() => ({
+  borderRadius: 0,
+}));
+
+const OutlineButton = styled(DefaultButton)(() => ({
+  borderWidth: 1,
+  borderColor: '#333',
+  backgroundColor: 'transparent',
+}));
+
+const RoundedButton = styled(DefaultButton)(() => ({
+  borderRadius: 8,
+}));
+
+const PillButton = styled(DefaultButton)(() => ({
+  borderRadius: 999,
+}));
+
+const Button = Object.assign(DefaultButton, {
+  Square: SquareButton,
+  Outline: OutlineButton,
+  Rounded: RoundedButton,
+  Pill: PillButton,
+  Text: ButtonText,
+});
+
+export { Button };

package/src/components/Button/styles.ts

@@ -0,0 +1,28 @@
+import styled from '@emotion/native';
+import type { DimensionValue, TouchableOpacityProps } from 'react-native';
+import { Text } from '../Text';
+
+export type ButtonProps = {
+  color?: string;
+  paddingVertical?: number;
+  paddingHorizontal?: number;
+  margin?: DimensionValue;
+} & TouchableOpacityProps;
+
+export const DefaultButtonStyle = styled.TouchableOpacity<ButtonProps>(
+  ({ paddingVertical, paddingHorizontal, color, margin }) => ({
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: paddingHorizontal ?? 20,
+    paddingVertical: paddingVertical ?? 14,
+    gap: 8,
+    backgroundColor: color ?? '#333',
+    margin,
+  }),
+);
+
+export const ButtonText = styled(Text)(({ color, size }) => ({
+  color: color ?? '#fff',
+  fontSize: size ?? 16,
+}));

package/src/components/Carousel/components/dot.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Animated, Pressable } from 'react-native';
+
+type DotProps = {
+  isActive: boolean;
+  onPress: () => void;
+};
+
+export function Dot({ isActive, onPress }: DotProps) {
+  const progress = React.useRef(new Animated.Value(isActive ? 1 : 0)).current;
+
+  React.useEffect(() => {
+    Animated.timing(progress, {
+      toValue: isActive ? 1 : 0,
+      duration: 150,
+      useNativeDriver: false, // color animation needs native driver off
+    }).start();
+  }, [isActive, progress]);
+
+  const backgroundColor = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['#00000055', '#000000'],
+  });
+
+  const scale = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [1, 1.2],
+  });
+
+  return (
+    <Pressable onPress={onPress} hitSlop={10}>
+      <Animated.View
+        style={{
+          height: 8,
+          width: 8,
+          borderRadius: 999,
+          backgroundColor,
+          transform: [{ scale }],
+        }}
+      />
+    </Pressable>
+  );
+}

package/src/components/Carousel/components/footer.tsx

@@ -0,0 +1,21 @@
+import type { ComponentProps, PropsWithChildren } from 'react';
+import { Flex } from '../../Flex';
+import { Padding } from '../../Padding';
+
+type CarouselFooterProps = PropsWithChildren<ComponentProps<typeof Flex>>;
+
+export const CarouselFooter = ({
+  children,
+  gap = 8,
+  ...flexProps
+}: CarouselFooterProps) => (
+  <Padding
+    insets={{
+      all: 20,
+    }}
+  >
+    <Flex flexDirection="row" alignItems="center" gap={gap} {...flexProps}>
+      {children}
+    </Flex>
+  </Padding>
+);

package/src/components/Carousel/components/list.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import {
+  FlatList,
+  type FlatListProps,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+import { useCarouselContext } from '../context';
+
+type CarouselListProps<T> = {
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  snapEnabled?: boolean;
+} & Omit<
+  FlatListProps<T>,
+  | 'CellRendererComponent'
+  | 'data'
+  | 'horizontal'
+  | 'renderItem'
+  | 'onScroll'
+  | 'onMomentumScrollEnd'
+  | 'snapToInterval'
+  | 'keyExtractor'
+>;
+
+const CarouselList = <T,>({
+  contentContainerStyle,
+  snapEnabled = true,
+  ...props
+}: CarouselListProps<T>) => {
+  const {
+    data,
+    gapBetweenItems,
+    pageWidth,
+    onMomentumScrollEnd,
+    listRef,
+    renderItem,
+    handleScrollBeginDrag,
+    calculateSnapOffset,
+    centerItems,
+  } = useCarouselContext<T>();
+
+  /**
+   * Calculate snap offsets to center items (except first and last).
+   * Only used when centerItems is true.
+   */
+  const snapToOffsets = React.useMemo(() => {
+    if (data.length === 0 || !snapEnabled || !centerItems) return undefined;
+
+    return data.map((_, index) => calculateSnapOffset(index));
+  }, [data, snapEnabled, calculateSnapOffset, centerItems]);
+
+  return (
+    <FlatList
+      ref={listRef}
+      data={data}
+      renderItem={renderItem}
+      keyExtractor={(_, index) => `carousel-item-${index}`}
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={[
+        {
+          paddingHorizontal: 20,
+          columnGap: gapBetweenItems,
+        },
+        contentContainerStyle,
+      ]}
+      snapToOffsets={centerItems ? snapToOffsets : undefined}
+      snapToInterval={!centerItems && snapEnabled ? pageWidth : undefined}
+      snapToAlignment="start"
+      decelerationRate={snapEnabled ? 'fast' : 'normal'}
+      bounces={false}
+      scrollEventThrottle={16}
+      onMomentumScrollEnd={onMomentumScrollEnd}
+      onScrollBeginDrag={handleScrollBeginDrag}
+      {...props}
+    />
+  );
+};
+
+export { CarouselList };

package/src/components/Carousel/components/pagination.tsx

@@ -0,0 +1,16 @@
+import { Flex } from '../../Flex';
+import { useCarouselContext } from '../context';
+import { Dot } from './dot';
+
+export const CarouselPagination = () => {
+  const { data, activeIndex, goTo } = useCarouselContext();
+
+  return (
+    <Flex flexDirection="row" gap={8} alignItems="center" flexWrap="wrap">
+      {Array.from({ length: data.length }).map((_, i) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: No need to use another key instead of index here
+        <Dot key={i} isActive={activeIndex === i} onPress={() => goTo(i)} />
+      ))}
+    </Flex>
+  );
+};

package/src/components/Carousel/components/see-all-button.tsx

@@ -0,0 +1,25 @@
+import { ChevronRightIcon } from 'lucide-react-native';
+import type { TouchableOpacityProps } from 'react-native';
+import { Text } from '../../Text';
+import { SeeAllButton } from '../styles';
+
+type CarouselSeeAllButtonProps = {
+  color?: string;
+} & TouchableOpacityProps;
+
+const CarouselSeeAllButton = ({
+  color,
+  ...props
+}: CarouselSeeAllButtonProps) => {
+  return (
+    <SeeAllButton {...props}>
+      <Text weight="bold" color={color ?? '#014661'}>
+        Ver todos
+      </Text>
+      {/* @ts-expect-error - lucide-react-native types issue */}
+      <ChevronRightIcon size={12} color={color ?? '#014661'} />
+    </SeeAllButton>
+  );
+};
+
+export { CarouselSeeAllButton };

package/src/components/Carousel/context.tsx

@@ -0,0 +1,19 @@
+import { createContext, useContext } from 'react';
+
+import type { CarouselContextValue } from './types';
+
+export const CarouselContext =
+  // biome-ignore lint/suspicious/noExplicitAny: No need to specify generic type here
+  createContext<CarouselContextValue<any> | null>(null);
+
+export const useCarouselContext = <T,>() => {
+  const context = useContext(CarouselContext);
+
+  if (!context) {
+    throw new Error(
+      'Carousel compound components must be used inside Carousel.',
+    );
+  }
+
+  return context as CarouselContextValue<T>;
+};

package/src/components/Carousel/index.tsx

@@ -0,0 +1,191 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type {
+  FlatList,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+} from 'react-native';
+import { Dimensions } from 'react-native';
+
+import { CarouselFooter } from './components/footer';
+import { CarouselList } from './components/list';
+import { CarouselPagination } from './components/pagination';
+import { CarouselSeeAllButton } from './components/see-all-button';
+import { CarouselContext } from './context';
+import type { CarouselRootProps } from './types';
+
+const CarouselRoot = <T,>({
+  children,
+  data,
+  itemWidth = Dimensions.get('screen').width * 0.8,
+  gapBetweenItems = 10,
+  renderItem,
+  onSnapToItem,
+  defaultIndex,
+  autoPlay = false,
+  autoPlaySeconds = 3,
+  centerItems = false,
+}: CarouselRootProps<T>) => {
+  const pageWidth = useMemo(
+    () => itemWidth + gapBetweenItems,
+    [gapBetweenItems, itemWidth],
+  );
+
+  const listRef = useRef<FlatList<T> | null>(null);
+  const activeIndexRef = useRef(defaultIndex ?? 0);
+  const autoPlayTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const isUserInteracting = useRef(false);
+
+  const [activeIndex, setActiveIndex] = useState(() => defaultIndex ?? 0);
+
+  /**
+   * Calculate the scroll offset for a given index with proper centering.
+   * First and last items are not centered, middle items are centered.
+   */
+  const calculateSnapOffset = useCallback(
+    (index: number) => {
+      const basePosition = index * pageWidth;
+
+      // If centerItems is disabled, use default behavior
+      if (!centerItems) {
+        return basePosition;
+      }
+
+      const screenWidth = Dimensions.get('window').width;
+      const centerOfScreen = screenWidth / 2;
+      const centerOfItem = itemWidth / 2;
+      const offsetToCenter = centerOfScreen - centerOfItem - 20;
+
+      // First item: keep default alignment (left edge with padding)
+      if (index === 0) {
+        return 0;
+      }
+
+      // Last item: keep default alignment
+      if (index === data.length - 1) {
+        return basePosition;
+      }
+
+      // Middle items: center them
+      return basePosition - offsetToCenter;
+    },
+    [itemWidth, pageWidth, data.length, centerItems],
+  );
+
+  const goTo = useCallback(
+    (index: number) => {
+      const targetIndex = Math.max(0, Math.min(index, data.length - 1));
+
+      if (activeIndexRef.current !== targetIndex) {
+        activeIndexRef.current = targetIndex;
+        setActiveIndex(targetIndex);
+      }
+
+      listRef.current?.scrollToOffset({
+        offset: calculateSnapOffset(targetIndex),
+        animated: true,
+      });
+    },
+    [data.length, calculateSnapOffset],
+  );
+
+  const startAutoPlay = useCallback(() => {
+    if (autoPlayTimerRef.current) {
+      clearInterval(autoPlayTimerRef.current);
+    }
+
+    autoPlayTimerRef.current = setInterval(() => {
+      if (!isUserInteracting.current) {
+        const nextIndex = (activeIndexRef.current + 1) % data.length;
+        goTo(nextIndex);
+      }
+    }, autoPlaySeconds * 1000);
+  }, [autoPlaySeconds, data.length, goTo]);
+
+  const onMomentumScrollEnd = useCallback(
+    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const { x } = e.nativeEvent.contentOffset;
+      const currentIndex = Math.round(x / pageWidth);
+
+      // Update active index if changed
+      if (activeIndexRef.current !== currentIndex) {
+        activeIndexRef.current = currentIndex;
+        setActiveIndex(currentIndex);
+      }
+
+      isUserInteracting.current = false;
+
+      // Restart autoPlay after user interaction ends
+      if (autoPlay && autoPlayTimerRef.current) {
+        startAutoPlay();
+      }
+
+      if (onSnapToItem) {
+        onSnapToItem(activeIndexRef.current);
+      }
+    },
+    [pageWidth, autoPlay, startAutoPlay, onSnapToItem],
+  );
+
+  useEffect(() => {
+    if (!autoPlay) return;
+
+    startAutoPlay();
+
+    return () => {
+      if (autoPlayTimerRef.current) {
+        clearInterval(autoPlayTimerRef.current);
+      }
+    };
+  }, [autoPlay, startAutoPlay]);
+
+  const handleScrollBeginDrag = useCallback(() => {
+    isUserInteracting.current = true;
+
+    if (autoPlayTimerRef.current) {
+      clearInterval(autoPlayTimerRef.current);
+    }
+  }, []);
+
+  const value = useMemo(
+    () => ({
+      data,
+      pageWidth,
+      gapBetweenItems,
+      activeIndex,
+      goTo,
+      onMomentumScrollEnd,
+      listRef,
+      renderItem,
+      itemWidth,
+      handleScrollBeginDrag,
+      calculateSnapOffset,
+      centerItems,
+    }),
+    [
+      data,
+      pageWidth,
+      gapBetweenItems,
+      activeIndex,
+      goTo,
+      onMomentumScrollEnd,
+      renderItem,
+      itemWidth,
+      handleScrollBeginDrag,
+      calculateSnapOffset,
+      centerItems,
+    ],
+  );
+
+  return (
+    <CarouselContext.Provider value={value}>
+      {children}
+    </CarouselContext.Provider>
+  );
+};
+
+export const Carousel = Object.assign(CarouselRoot, {
+  List: CarouselList,
+  Footer: CarouselFooter,
+  Pagination: CarouselPagination,
+  SeeAllButton: CarouselSeeAllButton,
+});

package/src/components/Carousel/styles.ts

@@ -0,0 +1,8 @@
+import styled from '@emotion/native';
+
+export const SeeAllButton = styled.TouchableOpacity(() => ({
+  flexDirection: 'row',
+  gap: 5,
+  alignItems: 'center',
+  marginLeft: 'auto',
+}));