@navegarti/rn-design-system 0.8.1 → 0.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navegarti/rn-design-system",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "description": "Components and functions to help navegar projects",
   "source": "./src/index.tsx",
   "main": "./lib/module/index.js",
@@ -71,6 +71,7 @@
     }
   },
   "files": [
+    "src",
     "lib",
     "components.js",
     "utils.js",

package/src/api/axios-adapter.ts

@@ -0,0 +1,239 @@
+import axios, {
+  type AxiosError,
+  type AxiosInstance,
+  type AxiosRequestConfig,
+  type AxiosResponse,
+} from 'axios';
+import {
+  AuthError,
+  NetworkError,
+  NotFoundError,
+  RateLimitError,
+  ServerError,
+  TimeoutError,
+  ValidationError,
+} from './errors';
+import { executeWithRetry } from './retry-strategy';
+import { useAuthStore } from './stores/auth-store';
+import type { ApiConfig, IHttpAdapter, RetryConfig } from './types';
+
+/**
+ * Axios-based HTTP adapter implementation
+ * Implements retry logic, error handling, and token management
+ */
+export class AxiosAdapter implements IHttpAdapter {
+  private readonly axiosInstance: AxiosInstance;
+  private readonly retryConfig: RetryConfig;
+
+  constructor(config: ApiConfig) {
+    // Initialize axios instance with configuration
+    this.axiosInstance = axios.create({
+      baseURL: config.baseURL,
+      timeout: config.timeout ?? 30000, // 30 seconds default
+      headers: {
+        'Content-Type': 'application/json',
+        ...config.headers,
+      },
+    });
+
+    // Configure retry behavior
+    this.retryConfig = {
+      maxAttempts: config.retryAttempts ?? 3,
+      baseDelay: 1000, // 1 second
+      maxDelay: 10000, // 10 seconds
+      retryableStatusCodes: [408, 429, 500, 502, 503, 504],
+    };
+
+    // Setup request interceptor to inject auth token
+    this.setupRequestInterceptor();
+  }
+
+  /**
+   * Sets up request interceptor to automatically add auth token
+   */
+  private setupRequestInterceptor(): void {
+    this.axiosInstance.interceptors.request.use(
+      (config) => {
+        const token = useAuthStore.getState().token;
+
+        if (token && config.headers) {
+          config.headers.Authorization = `Bearer ${token}`;
+        }
+
+        return config;
+      },
+      (error) => Promise.reject(error),
+    );
+  }
+
+  /**
+   * Maps axios error to appropriate custom error type
+   */
+  private mapError(error: AxiosError, url?: string, method?: string): Error {
+    // Network errors (no response received)
+    if (!error.response) {
+      if (error.code === 'ECONNABORTED' || error.message.includes('timeout')) {
+        return new TimeoutError(
+          'Request timeout - server took too long to respond',
+          url,
+          method,
+        );
+      }
+      return new NetworkError(
+        error.message || 'Network error - please check your connection',
+        url,
+        method,
+      );
+    }
+
+    const statusCode = error.response.status;
+    const responseData = error.response.data as {
+      message?: string;
+      errors?: Record<string, string[]>;
+    };
+    const message =
+      responseData?.message || error.message || 'An error occurred';
+
+    // Map status codes to error types
+    switch (true) {
+      case statusCode === 401 || statusCode === 403:
+        return new AuthError(message, statusCode, url, method);
+
+      case statusCode === 404:
+        return new NotFoundError(message, url, method);
+
+      case statusCode === 429:
+        return new RateLimitError(
+          message,
+          url,
+          method,
+          Number(error.response.headers['retry-after']),
+        );
+
+      case statusCode === 400 || statusCode === 422:
+        return new ValidationError(
+          message,
+          statusCode,
+          url,
+          method,
+          responseData?.errors,
+        );
+
+      case statusCode >= 500:
+        return new ServerError(message, statusCode, url, method);
+
+      default:
+        return new NetworkError(message, url, method);
+    }
+  }
+
+  /**
+   * Transforms axios response to standardized ApiResponse format
+   */
+  private transformResponse<T>(response: AxiosResponse<T>): T {
+    return response.data;
+  }
+
+  /**
+   * Executes HTTP request with retry logic and error handling
+   */
+  private async executeRequest<T>(
+    requestFn: () => Promise<AxiosResponse<T>>,
+    url?: string,
+    method?: string,
+  ): Promise<T> {
+    try {
+      const response = await executeWithRetry(
+        requestFn,
+        this.retryConfig,
+        (attempt, delay, error) => {
+          console.log(
+            `[API Retry] Attempt ${attempt} failed, retrying in ${delay}ms...`,
+            error.message,
+          );
+        },
+      );
+
+      return this.transformResponse(response);
+    } catch (error) {
+      throw this.mapError(error as AxiosError, url, method);
+    }
+  }
+
+  /**
+   * Performs GET request
+   */
+  async get<T = unknown>(url: string, config?: AxiosRequestConfig): Promise<T> {
+    return this.executeRequest(
+      () => this.axiosInstance.get<T>(url, config),
+      url,
+      'GET',
+    );
+  }
+
+  /**
+   * Performs POST request
+   */
+  async post<T = unknown>(
+    url: string,
+    data?: unknown,
+    config?: AxiosRequestConfig,
+  ): Promise<T> {
+    return this.executeRequest(
+      () => this.axiosInstance.post<T>(url, data, config),
+      url,
+      'POST',
+    );
+  }
+
+  /**
+   * Performs PUT request
+   */
+  async put<T = unknown>(
+    url: string,
+    data?: unknown,
+    config?: AxiosRequestConfig,
+  ): Promise<T> {
+    return this.executeRequest(
+      () => this.axiosInstance.put<T>(url, data, config),
+      url,
+      'PUT',
+    );
+  }
+
+  /**
+   * Performs DELETE request
+   */
+  async delete<T = unknown>(
+    url: string,
+    config?: AxiosRequestConfig,
+  ): Promise<T> {
+    return this.executeRequest(
+      () => this.axiosInstance.delete<T>(url, config),
+      url,
+      'DELETE',
+    );
+  }
+
+  /**
+   * Adds authentication token to store
+   * Token will be automatically included in all subsequent requests
+   */
+  addToken(token: string): void {
+    useAuthStore.getState().setToken(token);
+  }
+
+  /**
+   * Removes authentication token from store
+   */
+  removeToken(): void {
+    useAuthStore.getState().clearToken();
+  }
+
+  /**
+   * Get token from store
+   */
+  getToken(): string | null {
+    return useAuthStore.getState().token;
+  }
+}

package/src/api/errors.ts

@@ -0,0 +1,113 @@
+/**
+ * Base class for all API errors
+ * Provides common structure and debugging information
+ */
+export class ApiError extends Error {
+  public readonly statusCode: number;
+  public readonly url?: string;
+  public readonly method?: string;
+  public readonly timestamp: Date;
+
+  constructor(
+    message: string,
+    statusCode: number,
+    url?: string,
+    method?: string,
+  ) {
+    super(message);
+    this.name = this.constructor.name;
+    this.statusCode = statusCode;
+    this.url = url;
+    this.method = method;
+    this.timestamp = new Date();
+
+    // Maintains proper stack trace for where our error was thrown (only available on V8)
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, this.constructor);
+    }
+  }
+
+  /**
+   * Returns a formatted error message for debugging
+   */
+  toDebugString(): string {
+    return `[${this.name}] ${this.message}\nStatus: ${this.statusCode}\nURL: ${this.url}\nMethod: ${this.method}\nTime: ${this.timestamp.toISOString()}`;
+  }
+}
+
+/**
+ * Network-related errors (no internet, DNS failure, timeout)
+ * HTTP Status: N/A (network layer)
+ */
+export class NetworkError extends ApiError {
+  constructor(message: string, url?: string, method?: string) {
+    super(message, 0, url, method);
+  }
+}
+
+/**
+ * Authentication errors (401, 403)
+ * Client lacks valid credentials or permissions
+ */
+export class AuthError extends ApiError {}
+
+/**
+ * Client validation errors (400, 422)
+ * Request malformed or validation failed
+ */
+export class ValidationError extends ApiError {
+  public readonly validationErrors?: Record<string, string[]>;
+
+  constructor(
+    message: string,
+    statusCode: number,
+    url?: string,
+    method?: string,
+    validationErrors?: Record<string, string[]>,
+  ) {
+    super(message, statusCode, url, method);
+    this.validationErrors = validationErrors;
+  }
+}
+
+/**
+ * Server errors (500, 502, 503, 504)
+ * Something went wrong on the server
+ */
+export class ServerError extends ApiError {}
+
+/**
+ * Request timeout errors
+ * Request took too long to complete
+ */
+export class TimeoutError extends ApiError {
+  constructor(message: string, url?: string, method?: string) {
+    super(message, 408, url, method);
+  }
+}
+
+/**
+ * Resource not found errors (404)
+ */
+export class NotFoundError extends ApiError {
+  constructor(message: string, url?: string, method?: string) {
+    super(message, 404, url, method);
+  }
+}
+
+/**
+ * Rate limit errors (429)
+ */
+export class RateLimitError extends ApiError {
+  public readonly retryAfter?: number;
+
+  constructor(
+    message: string,
+    url?: string,
+    method?: string,
+    retryAfter?: number,
+  ) {
+    super(message, 429, url, method);
+    this.retryAfter = retryAfter;
+  }
+}

package/src/api/index.ts

@@ -0,0 +1,27 @@
+import { AxiosAdapter } from './axios-adapter';
+
+/**
+ * Default API request instance
+ * Pre-configured with default settings
+ *
+ * Usage:
+ * ```typescript
+ * import { apiRequest } from '@navegarti/rn-design-system/api';
+ *
+ * const response = await apiRequest.get<User>('/users/123');
+ * if (response.success) {
+ *   console.log(response.data);
+ * }
+ * ```
+ */
+export const apiRequest = new AxiosAdapter({
+  baseURL: 'https://api.example.com', // Will be overridden by consumers
+  timeout: 30000,
+  retryAttempts: 3,
+});
+
+export { AxiosAdapter } from './axios-adapter';
+export * from './errors';
+export { useAuthStore } from './stores/auth-store';
+// Re-export types and classes for consumer use
+export * from './types';

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,74 @@
+import type { AxiosRequestConfig } from 'axios';
+
+/**
+ * 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<T>;
+
+  /**
+   * Performs a POST request
+   * @template T - Expected response data type
+   */
+  post<T = unknown>(
+    url: string,
+    data?: unknown,
+    config?: AxiosRequestConfig,
+  ): Promise<T>;
+
+  /**
+   * Performs a PUT request
+   * @template T - Expected response data type
+   */
+  put<T = unknown>(
+    url: string,
+    data?: unknown,
+    config?: AxiosRequestConfig,
+  ): Promise<T>;
+
+  /**
+   * Performs a DELETE request
+   * @template T - Expected response data type
+   */
+  delete<T = unknown>(url: string, config?: AxiosRequestConfig): Promise<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, IHttpAdapter } from './api/types';

package/src/components/Button/index.tsx

@@ -0,0 +1,37 @@
+import styled from '@emotion/native';
+
+import { type ButtonProps, ButtonText, DefaultButtonStyle } from './styles';
+
+export type { ButtonProps } 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/Card/index.tsx

@@ -0,0 +1,23 @@
+import {
+  CardContainer,
+  CardContent,
+  CardDescription,
+  CardImage,
+  CardTitle,
+} from './styles';
+import type { CardProps } from './types';
+
+export type { CardProps } from './types';
+
+const CardRoot = (props: CardProps) => (
+  <CardContainer activeOpacity={0.7} {...props} />
+);
+
+const Card = Object.assign(CardRoot, {
+  Image: CardImage,
+  Content: CardContent,
+  Title: CardTitle,
+  Description: CardDescription,
+});
+
+export { Card };