@navegarti/rn-design-system 0.2.0

package/src/components/Text/styles.ts

@@ -0,0 +1,44 @@
+import styled from '@emotion/native';
+import type {
+  DimensionValue,
+  TextProps as RNTextProps,
+  TextProps,
+} from 'react-native';
+
+export type TextStyleProps = TextProps & {
+  flex?: number;
+  weight?: 'light' | 'regular' | 'medium' | 'bold';
+  size?: number;
+  margin?: DimensionValue | string;
+  width?: string;
+  color?: string;
+  textAlign?: 'left' | 'center' | 'right' | 'justify';
+  textTransform?: 'none' | 'uppercase' | 'capitalize' | 'lowercase';
+  textDecorationLine?: 'none' | 'underline' | 'line-through';
+};
+
+export interface TextComponentProps extends RNTextProps, TextStyleProps {}
+
+export const Text = styled.Text<TextStyleProps>(
+  ({
+    size,
+    weight,
+    color,
+    textAlign,
+    flex,
+    width,
+    textTransform,
+    textDecorationLine,
+    margin,
+  }) => ({
+    fontSize: size ? size : 14,
+    fontWeight: weight ?? 'semibold',
+    color: color ?? '#333',
+    textAlign,
+    flex,
+    width,
+    textTransform,
+    textDecorationLine,
+    margin,
+  }),
+);

package/src/components.tsx

@@ -0,0 +1,20 @@
+/**
+ * Components module entry point.
+ * Exports all UI components from the design system.
+ */
+
+export { Button } from './components/Button';
+export { Carousel } from './components/Carousel';
+export { Checkbox } from './components/Checkbox';
+export { FAB } from './components/FAB';
+export { Flex } from './components/Flex';
+export { FormLabel } from './components/FormLabel';
+export { Input } from './components/Input';
+export { Margin } from './components/Margin';
+export { OTPInput } from './components/OTPInput';
+export { Padding } from './components/Padding';
+export { Radio } from './components/Radio';
+export { Select } from './components/Select';
+export { Skeleton } from './components/Skeleton';
+export { Switch } from './components/Switch';
+export { Text } from './components/Text';

package/src/form.tsx

@@ -0,0 +1,7 @@
+/**
+ * Form module entry point.
+ * Exports form-related utilities, validators, and integrations.
+ */
+
+export { formValidators } from './formValidators';
+export { tanstackForm } from './libs/tanstack-form';

package/src/formValidators/ZodTypeValidator.ts

@@ -0,0 +1,58 @@
+import { isValid as isValidCnpj } from '@fnando/cnpj';
+import { isValid as isValidCpf } from '@fnando/cpf';
+import { type CountryCode, parsePhoneNumber } from 'libphonenumber-js/mobile';
+import { type ZodType, z } from 'zod';
+import type { ITypeValidator, ValidatorMessages } from './types';
+
+class ZodTypeValidator implements ITypeValidator {
+  cpfValidation(messages: ValidatorMessages): ZodType {
+    return z
+      .string()
+      .nonempty({
+        error: messages.emptyMessage,
+      })
+      .refine((val) => isValidCpf(val), {
+        error: messages.validationMessage,
+      });
+  }
+
+  cnpjValidation(messages: ValidatorMessages): ZodType {
+    return z
+      .string()
+      .nonempty({
+        error: messages.emptyMessage,
+      })
+      .refine((val) => isValidCnpj(val), {
+        error: messages.validationMessage,
+      });
+  }
+
+  emailValidation(messages: ValidatorMessages): ZodType {
+    return z
+      .email({
+        error: messages.validationMessage,
+      })
+      .nonempty({
+        error: messages.emptyMessage,
+      });
+  }
+
+  phoneNumberValidation(
+    messages: ValidatorMessages,
+    countryCodeValidation?: CountryCode,
+  ): ZodType {
+    return z
+      .string()
+      .nonempty({
+        error: messages.emptyMessage,
+      })
+      .refine(
+        (val) => parsePhoneNumber(val, countryCodeValidation ?? 'BR').isValid(),
+        {
+          error: messages.validationMessage,
+        },
+      );
+  }
+}
+
+export { ZodTypeValidator };

package/src/formValidators/index.ts

@@ -0,0 +1,8 @@
+import type { FormValidators } from './types';
+import { ZodTypeValidator } from './ZodTypeValidator';
+
+const formValidators: FormValidators = {
+  zod: new ZodTypeValidator(),
+};
+
+export { formValidators };

package/src/formValidators/types.ts

@@ -0,0 +1,21 @@
+/** biome-ignore-all lint/suspicious/noExplicitAny: Allow any */
+import type { CountryCode } from 'libphonenumber-js/mobile';
+
+export type ValidatorMessages = {
+  emptyMessage: string;
+  validationMessage: string;
+};
+
+export interface ITypeValidator {
+  cpfValidation: (messages: ValidatorMessages) => any;
+  cnpjValidation: (messages: ValidatorMessages) => any;
+  emailValidation: (messages: ValidatorMessages) => any;
+  phoneNumberValidation: (
+    messages: ValidatorMessages,
+    countryCodeValidation?: CountryCode,
+  ) => any;
+}
+
+export type FormValidators = {
+  zod: ITypeValidator;
+};

package/src/hooks/useAppIsActive.ts

@@ -0,0 +1,28 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { AppState, type AppStateStatus } from 'react-native';
+
+export const useAppIsActive = (callback: () => void) => {
+  const appStateRef = useRef(AppState.currentState);
+
+  const handleAppStateChange = useCallback(
+    (nextAppState: AppStateStatus) => {
+      if (
+        appStateRef.current?.match(/inactive|background/) &&
+        nextAppState === 'active'
+      ) {
+        callback();
+      }
+
+      appStateRef.current = nextAppState;
+    },
+    [callback],
+  );
+
+  useEffect(() => {
+    const listener = AppState.addEventListener('change', handleAppStateChange);
+
+    return () => {
+      listener.remove();
+    };
+  }, [handleAppStateChange]);
+};

package/src/hooks/useAppSecurity.tsx

@@ -0,0 +1,35 @@
+import JailMonkey from 'jail-monkey';
+import { createContext, useContext } from 'react';
+
+type IAppSecurityContext = null;
+
+interface IAppSecurityProvider {
+  children: React.ReactNode;
+}
+
+const AppSecurityContext = createContext<IAppSecurityContext>(null);
+
+const AppSecurityProvider: React.FC<IAppSecurityProvider> = ({ children }) => {
+  if (JailMonkey.isJailBroken() && !__DEV__) {
+    return null;
+  }
+
+  return (
+    <AppSecurityContext.Provider value={null}>
+      {children}
+    </AppSecurityContext.Provider>
+  );
+};
+const useAppSecurity = (): IAppSecurityContext => {
+  const context = useContext(AppSecurityContext);
+
+  if (!context) {
+    throw new Error(
+      'useAppSecurity must be used within an AppSecurityProvider',
+    );
+  }
+
+  return context;
+};
+
+export { AppSecurityProvider, useAppSecurity };

package/src/hooks/useNetworkStatus.ts

@@ -0,0 +1,75 @@
+import NetInfo from '@react-native-community/netinfo';
+import { onlineManager } from '@tanstack/react-query';
+import { useEffect, useSyncExternalStore } from 'react';
+import { Alert } from 'react-native';
+
+export interface NetworkStatusSnapshot {
+  isConnected: boolean;
+  isInternetReachable: boolean | null;
+}
+
+let snapshot: NetworkStatusSnapshot = {
+  isConnected: true,
+  isInternetReachable: null,
+};
+
+const listeners = new Set<() => void>();
+let started = false;
+
+const emit = () => {
+  // biome-ignore lint/suspicious/useIterableCallbackReturn: .
+  listeners.forEach((listener) => listener());
+};
+
+const ensureStarted = () => {
+  if (started) {
+    return;
+  }
+
+  started = true;
+
+  NetInfo.addEventListener((state) => {
+    const next: NetworkStatusSnapshot = {
+      isConnected: Boolean(state.isConnected),
+      isInternetReachable: state.isInternetReachable ?? null,
+    };
+
+    onlineManager.setOnline(next.isConnected);
+
+    if (
+      snapshot.isConnected !== next.isConnected ||
+      snapshot.isInternetReachable !== next.isInternetReachable
+    ) {
+      snapshot = next;
+      emit();
+    }
+  });
+};
+
+const subscribe = (listener: () => void) => {
+  ensureStarted();
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+};
+
+const getSnapshot = () => snapshot;
+
+const getServerSnapshot = () => snapshot;
+
+export const useNetworkStatus = () =>
+  useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+
+export const useNetworkMonitor = () => {
+  const { isConnected, isInternetReachable } = useNetworkStatus();
+
+  useEffect(() => {
+    if (isConnected === false && isInternetReachable === false) {
+      Alert.alert(
+        'Sem conexão com a internet',
+        'Por favor, verifique sua conexão e tente novamente.',
+      );
+    }
+  }, [isConnected, isInternetReachable]);
+};

package/src/hooks/useStatusBar.ts

@@ -0,0 +1,34 @@
+import { useCallback } from 'react';
+import { Platform, StatusBar } from 'react-native';
+
+interface IUseStatusBar {
+  setStatusBarLightTheme: () => void;
+  setStatusBarDarkTheme: () => void;
+}
+
+const useStatusBar = (): IUseStatusBar => {
+  const setStatusBarLightTheme = useCallback(() => {
+    StatusBar.setHidden(false);
+    StatusBar.setBarStyle('dark-content');
+
+    if (Platform.OS === 'android') {
+      StatusBar.setBackgroundColor('#fff');
+    }
+  }, []);
+
+  const setStatusBarDarkTheme = useCallback(() => {
+    StatusBar.setHidden(false);
+    StatusBar.setBarStyle('light-content');
+
+    if (Platform.OS === 'android') {
+      StatusBar.setBackgroundColor('#000');
+    }
+  }, []);
+
+  return {
+    setStatusBarLightTheme,
+    setStatusBarDarkTheme,
+  };
+};
+
+export { useStatusBar };

package/src/hooks.tsx

@@ -0,0 +1,9 @@
+/**
+ * Hooks module entry point.
+ * Exports all custom hooks from the design system.
+ */
+
+export { useAppIsActive } from './hooks/useAppIsActive';
+export { useAppSecurity } from './hooks/useAppSecurity';
+export { useNetworkMonitor, useNetworkStatus } from './hooks/useNetworkStatus';
+export { useStatusBar } from './hooks/useStatusBar';

package/src/index.tsx

@@ -0,0 +1,50 @@
+/**
+ * Main entry point for @navegarti/rn-design-system
+ * Re-exports all components, utilities, form helpers, and hooks
+ */
+
+// API
+export * from './api';
+// Components
+export { Button } from './components/Button';
+export { Carousel } from './components/Carousel';
+export { Checkbox } from './components/Checkbox';
+export { FAB } from './components/FAB';
+export { Flex } from './components/Flex';
+export { FormLabel } from './components/FormLabel';
+export { Input } from './components/Input';
+export { Margin } from './components/Margin';
+export { OTPInput } from './components/OTPInput';
+export { Padding } from './components/Padding';
+export { Radio } from './components/Radio';
+export { Select } from './components/Select';
+export { Skeleton } from './components/Skeleton';
+export { Switch } from './components/Switch';
+export { Text } from './components/Text';
+// Form & Validators
+export { formValidators } from './formValidators';
+// Hooks
+export { useAppIsActive } from './hooks/useAppIsActive';
+export { useAppSecurity } from './hooks/useAppSecurity';
+export { useNetworkMonitor, useNetworkStatus } from './hooks/useNetworkStatus';
+export { useStatusBar } from './hooks/useStatusBar';
+export { tanstackForm } from './libs/tanstack-form';
+// Utils
+export { camelCase } from './utils/camelCase';
+export { camelCaseJSONKeys } from './utils/camelCaseJSONKeys';
+export { capitalizeWord } from './utils/capitalizeWord';
+export { createLinkingPhoneNumberString } from './utils/createLinkingPhoneNumberString';
+export * from './utils/dateFormatters';
+export { debounce } from './utils/debounce';
+export { deepLinkParser } from './utils/deepLinkParser';
+export { getAge } from './utils/getAge';
+export { getOnlyNumbers } from './utils/getOnlyNumbers';
+export { isArray } from './utils/isArray';
+export { isObject } from './utils/isObject';
+export { Masks } from './utils/masks';
+export { priceFormatter } from './utils/priceFormatter';
+export { removeTextAccents } from './utils/removeTextAccents';
+export { shadowStyledIos } from './utils/shadowStyledIos';
+export { sortBy } from './utils/sortBy';
+export { uniqBy } from './utils/uniqBy';
+export { userFullnameInitialsExtractor } from './utils/userFullnameInitialsExtractor';

package/src/libs/tanstack-form.tsx

@@ -0,0 +1,3 @@
+import * as tanstackForm from '@tanstack/react-form';
+
+export { tanstackForm };

package/src/utils/camelCase.ts

@@ -0,0 +1,6 @@
+// Utility function to convert strings to camelCase
+export function camelCase(input: string): string {
+  return input
+    .replace(/[-_\s]+(.)?/g, (_, c) => (c ? c.toUpperCase() : ''))
+    .replace(/^(.)/, (_, c) => c.toLowerCase());
+}

package/src/utils/camelCaseJSONKeys.ts

@@ -0,0 +1,31 @@
+import { camelCase } from './camelCase';
+import { isArray } from './isArray';
+import { isObject } from './isObject';
+
+const camelCaseJSONKeys = <T>(obj: T): unknown => {
+  // Handle primitive types (null, string, number, boolean)
+  if (obj === null || typeof obj !== 'object') {
+    return obj;
+  }
+
+  // Handle arrays
+  if (isArray(obj)) {
+    return obj.map((item) => camelCaseJSONKeys(item));
+  }
+
+  // Handle objects
+  if (isObject(obj)) {
+    return Object.entries(obj).reduce(
+      (acc, [key, val]) => {
+        acc[camelCase(key)] = camelCaseJSONKeys(val);
+        return acc;
+      },
+      {} as Record<string, unknown>,
+    );
+  }
+
+  // Fallback for other object types (Date, etc.)
+  return obj;
+};
+
+export { camelCaseJSONKeys };

package/src/utils/capitalizeWord.ts

@@ -0,0 +1,4 @@
+const capitalizeWord = (str: string): string =>
+  str.toLowerCase().replace(/(^|\s)\S/g, (l) => l.toUpperCase());
+
+export { capitalizeWord };

package/src/utils/createLinkingPhoneNumberString.ts

@@ -0,0 +1,13 @@
+const createLinkingPhoneNumberString = (phoneNumber: string) => {
+  if (
+    phoneNumber.startsWith('0800') ||
+    phoneNumber.startsWith('+55') ||
+    phoneNumber.length === 3
+  ) {
+    return `tel://${phoneNumber}`;
+  }
+
+  return `tel://+55${phoneNumber}`;
+};
+
+export { createLinkingPhoneNumberString };

package/src/utils/dateFormatters.ts

@@ -0,0 +1,48 @@
+import {
+  format as fDate,
+  formatRelative as fRelative,
+  parse,
+  parseISO,
+} from 'date-fns';
+import { ptBR } from 'date-fns/locale';
+
+export const parseDateWithoutSlashs = (
+  date: string,
+  format = 'ddMMyyyy',
+): Date => {
+  const parsedDate = parse(date, format, new Date());
+  return parsedDate;
+};
+
+export const parseDate = (date: string, format = 'dd/MM/yyyy'): Date => {
+  const parsedDate = parse(date, format, new Date());
+  return parsedDate;
+};
+
+export const format = (date: string, dateFormat?: string): string => {
+  try {
+    return fDate(parseISO(date), dateFormat || 'dd/MM/yyyy', {
+      locale: ptBR,
+    });
+  } catch {
+    return new Date().toLocaleDateString();
+  }
+};
+
+export const formatWithoutParse = (date: Date, dateFormat?: string): string =>
+  fDate(date, dateFormat || 'dd/MM/yyyy', {
+    locale: ptBR,
+  });
+
+export const formatRelative = (date: string): string => {
+  const parsedDate = fRelative(parseISO(date), new Date(), {
+    locale: ptBR,
+  });
+
+  return parsedDate;
+};
+
+export const formatDateTime = (date: Date): string =>
+  fDate(date, 'dd/MM/yyyy HH:mm', {
+    locale: ptBR,
+  });

package/src/utils/debounce.ts

@@ -0,0 +1,15 @@
+// Utility debounce function using ES features
+export function debounce<F extends (...args: unknown[]) => unknown>(
+  fn: F,
+  wait = 0,
+): F {
+  let timeoutId: ReturnType<typeof setTimeout>;
+
+  const debounced = (...args: Parameters<F>) => {
+    clearTimeout(timeoutId);
+
+    timeoutId = setTimeout(() => fn(...args), wait);
+  };
+
+  return debounced as F;
+}

package/src/utils/deepLinkParser.ts

@@ -0,0 +1,88 @@
+export type ParsedDeepLink = {
+  screen: string;
+  // biome-ignore lint/suspicious/noExplicitAny: .
+  params?: Record<string, any>;
+} | null;
+
+export const parseDeepLink = (url?: string): ParsedDeepLink => {
+  if (!url) return null;
+
+  // Remove scheme and leading slashes
+  const withoutScheme = url.replace(/^[^:]+:\/\//, '').replace(/^\/+/, '');
+  const parts = withoutScheme.split('/').filter(Boolean);
+
+  // Helper to safely pull a value and strip query string
+  const part = (index: number) =>
+    parts[index]
+      ? decodeURIComponent(String(parts[index]).split('?')[0] ?? '')
+      : undefined;
+
+  // news links: myriviera://news/:newsType?/:newsId or myriviera://news/:newsId
+  if (parts[0] === 'news') {
+    if (parts.length === 2) {
+      return { screen: 'NewsDetail', params: { newsId: part(1) } };
+    }
+
+    if (parts.length >= 3) {
+      const newsType = part(1);
+      const newsId = part(2);
+      return { screen: 'NewsDetail', params: { newsType, newsId } };
+    }
+  }
+
+  // Loyalty detail: myriviera://loyalty/:storeId/:id
+  if (parts[0] === 'loyalty' && parts.length >= 3) {
+    return {
+      screen: 'LoyaltyDetail',
+      params: { storeId: part(1), id: part(2) },
+    };
+  }
+
+  // Coupon detail: myriviera://coupon/:storeId/:id
+  if (parts[0] === 'coupon' && parts.length >= 3) {
+    return {
+      screen: 'CouponDetail',
+      params: { storeId: part(1), id: part(2) },
+    };
+  }
+
+  // Newsletter list
+  if (parts[0] === 'newsletter') {
+    return { screen: 'NewsLetterList' };
+  }
+
+  // Establishment list by group: myriviera://groupList/:groupId
+  if (parts[0] === 'groupList' && parts.length >= 2) {
+    return { screen: 'EstablishmentList', params: { groupId: part(1) } };
+  }
+
+  // Establishment detail: myriviera://group/:id
+  if (parts[0] === 'group' && parts.length >= 2) {
+    return { screen: 'EstablishmentDetail', params: { id: part(1) } };
+  }
+
+  // Sports / golf / easter notices
+  if (parts[0] === 'sport_event') {
+    return { screen: 'SportsEventNotice' };
+  }
+
+  if (parts[0] === 'golf_event') {
+    return { screen: 'GolfEventNotice' };
+  }
+
+  if (parts[0] === 'easter_registration') {
+    return { screen: 'EasterRegistrationNotice' };
+  }
+
+  // Tab navigator deep links (e.g. myriviera://tabnavigator/benefits)
+  if (parts[0] === 'tabnavigator') {
+    // sub-screen mapping (only benefits currently configured)
+    if (parts[1] === 'benefits') {
+      return { screen: 'TabNavigator', params: { screen: 'Benefits' } };
+    }
+  }
+
+  return null;
+};
+
+export const deepLinkParser = parseDeepLink;

package/src/utils/getAge.ts

@@ -0,0 +1,12 @@
+import { differenceInYears, parse } from 'date-fns';
+
+/* birthDate->  10/01/2000 */
+export const getAge = (birthDate?: string) => {
+  if (!birthDate) {
+    return 0;
+  }
+
+  const parsedDate = parse(birthDate, 'dd/MM/yyyy', new Date());
+
+  return differenceInYears(new Date(), parsedDate);
+};

package/src/utils/getOnlyNumbers.ts

@@ -0,0 +1 @@
+export const getOnlyNumbers = (value: string) => value.replace(/\D/g, '');

package/src/utils/isArray.ts

@@ -0,0 +1,4 @@
+// Utility function to check for arrays
+export function isArray(value: unknown): value is unknown[] {
+  return Array.isArray(value);
+}

package/src/utils/isObject.ts

@@ -0,0 +1,4 @@
+// Utility function to check for plain objects (excluding arrays)
+export function isObject(value: unknown): value is Record<string, unknown> {
+  return value !== null && typeof value === 'object' && !Array.isArray(value);
+}

package/src/utils/masks.ts

@@ -0,0 +1,3 @@
+import { Masks } from 'react-native-mask-input';
+
+export { Masks };

package/src/utils/priceFormatter.ts

@@ -0,0 +1,11 @@
+export const priceFormatter = (price: number, fractionDigits?: number) =>
+  new Intl.NumberFormat('pt-BR', {
+    style: 'currency',
+    currency: 'BRL',
+    minimumFractionDigits: Number.isInteger(fractionDigits)
+      ? fractionDigits
+      : 2,
+    maximumFractionDigits: Number.isInteger(fractionDigits)
+      ? fractionDigits
+      : 2,
+  }).format(price);

package/src/utils/removeTextAccents.ts

@@ -0,0 +1,4 @@
+const removeTextAccents = (text: string = '') =>
+  text.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+
+export { removeTextAccents };