nx-react-native-cli 2.7.0 → 3.0.0

package/templates/shared/apps/mobile/src/components/atoms/ThemeManager/theme-manager.component.tsx

@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+import { StatusBar } from 'react-native';
+import { useDeviceContext } from 'twrnc';
+
+import CONFIG from '@/config';
+import { useLocalStorageStore } from '@/stores';
+import { tw } from '@/tailwind';
+
+export function ThemeManager() {
+  const storedScheme = useLocalStorageStore((s) => s.colorScheme);
+  useDeviceContext(tw, {
+    initialColorScheme: storedScheme,
+    observeDeviceColorSchemeChanges: false,
+  });
+
+  const isDark = storedScheme === 'dark';
+
+  useEffect(() => {
+    StatusBar.setBarStyle(isDark ? 'light-content' : 'dark-content');
+    if (CONFIG.IS_ANDROID) {
+      StatusBar.setBackgroundColor('transparent');
+      StatusBar.setTranslucent(true);
+    }
+  }, [isDark]);
+
+  return null;
+}

package/templates/shared/apps/mobile/src/components/atoms/ToastManager/index.ts

@@ -0,0 +1,3 @@
+export * from './toast-manager.component';
+export * from './toast-manager.types';
+export * from './toast.service';

package/templates/shared/apps/mobile/src/components/atoms/ToastManager/toast-manager.component.tsx

@@ -0,0 +1,109 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Pressable, View } from 'react-native';
+import Animated, { SlideInDown, SlideOutDown } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { SvgProps } from 'react-native-svg';
+
+import { ToastManagerRef, ToastOptions, ToastVariant } from './toast-manager.types';
+import { Toast } from './toast.service';
+
+import { Typography } from '@/components/atoms/Typography';
+import { AlertTriangleIcon, CheckCircleIcon, InfoIcon, XCircleIcon } from '@/icons';
+import { colors, tw } from '@/tailwind';
+
+type QueuedToast = ToastOptions & {
+  variant: ToastVariant;
+};
+
+type VariantConfig = {
+  color: string;
+  icon: React.FC<SvgProps>;
+};
+
+const ANIMATION_DURATION = 300;
+const DEFAULT_DURATION = 3000;
+const ICON_SIZE = 20;
+const BOTTOM_PADDING_OFFSET = 16;
+
+const VARIANT_CONFIG: Record<ToastVariant, VariantConfig> = {
+  error: { color: colors.error, icon: XCircleIcon },
+  info: { color: colors.secondary[500], icon: InfoIcon },
+  success: { color: colors.success, icon: CheckCircleIcon },
+  warning: { color: colors.primary[500], icon: AlertTriangleIcon },
+};
+
+export function ToastManager() {
+  const [queue, setQueue] = useState<QueuedToast[]>([]);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const insets = useSafeAreaInsets();
+
+  const currentToast = queue[0];
+
+  const handleDismiss = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    setQueue((prev) => prev.slice(1));
+  }, []);
+
+  useEffect(() => {
+    const ref: ToastManagerRef = {
+      show: (variant: ToastVariant, options: ToastOptions) => {
+        setQueue((prev) => [...prev, { ...options, variant }]);
+      },
+    };
+    Toast.setRef(ref);
+  }, []);
+
+  useEffect(() => {
+    if (!currentToast) {
+      return;
+    }
+
+    const duration = currentToast.duration ?? DEFAULT_DURATION;
+    timerRef.current = setTimeout(() => {
+      setQueue((prev) => prev.slice(1));
+    }, duration);
+
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [currentToast]);
+
+  if (!currentToast) {
+    return null;
+  }
+
+  const config = VARIANT_CONFIG[currentToast.variant];
+  const IconComponent = config.icon;
+
+  return (
+    <View pointerEvents="box-none" style={tw`absolute bottom-10 left-6 right-6 z-50 items-center`}>
+      <Animated.View
+        key={`${currentToast.variant}-${currentToast.message}`}
+        entering={SlideInDown.duration(ANIMATION_DURATION)}
+        exiting={SlideOutDown.duration(ANIMATION_DURATION)}
+        style={[tw`mx-4 w-full max-w-sm`, { paddingBottom: insets.bottom + BOTTOM_PADDING_OFFSET }]}
+      >
+        <Pressable
+          style={tw`dark:border-divider dark:bg-sheet flex-row items-center rounded-xl border border-gray-200 bg-white px-4 py-3.5 shadow-sm`}
+          onPress={handleDismiss}
+        >
+          <View style={tw`mr-3`}>
+            <IconComponent color={config.color} height={ICON_SIZE} width={ICON_SIZE} />
+          </View>
+          <Typography
+            numberOfLines={2}
+            style={tw`dark:text-foreground flex-1 text-sm font-medium text-gray-800`}
+          >
+            {currentToast.message}
+          </Typography>
+        </Pressable>
+      </Animated.View>
+    </View>
+  );
+}

package/templates/shared/apps/mobile/src/components/atoms/ToastManager/toast-manager.types.ts

@@ -0,0 +1,10 @@
+export type ToastVariant = 'error' | 'info' | 'success' | 'warning';
+
+export type ToastOptions = {
+  duration?: number;
+  message: string;
+};
+
+export type ToastManagerRef = {
+  show: (variant: ToastVariant, options: ToastOptions) => void;
+};

package/templates/shared/apps/mobile/src/components/atoms/ToastManager/toast.service.ts

@@ -0,0 +1,27 @@
+import { ToastManagerRef, ToastOptions } from './toast-manager.types';
+
+class ToastService {
+  private static ref: ToastManagerRef | null = null;
+
+  static error(message: string, options?: Omit<ToastOptions, 'message'>) {
+    ToastService.ref?.show('error', { message, ...options });
+  }
+
+  static info(message: string, options?: Omit<ToastOptions, 'message'>) {
+    ToastService.ref?.show('info', { message, ...options });
+  }
+
+  static setRef(ref: ToastManagerRef) {
+    ToastService.ref = ref;
+  }
+
+  static success(message: string, options?: Omit<ToastOptions, 'message'>) {
+    ToastService.ref?.show('success', { message, ...options });
+  }
+
+  static warning(message: string, options?: Omit<ToastOptions, 'message'>) {
+    ToastService.ref?.show('warning', { message, ...options });
+  }
+}
+
+export { ToastService as Toast };

package/templates/shared/apps/mobile/src/components/atoms/Typography/typography.component.tsx

@@ -16,7 +16,7 @@ export function Typography(props: Props): JSX.Element {
   return (
     <RNText
       {...shouldTruncateTextProps}
-      style={[tw`font-sans text-base font-normal text-black`, style]}
+      style={[tw`dark:text-foreground font-sans text-base font-normal text-gray-900`, style]}
       {...extraProps}
     />
   );

package/templates/shared/apps/mobile/src/components/atoms/index.ts

@@ -1,13 +1,21 @@
+export * from './AlertManager';
 export * from './BottomSheet';
 export * from './Button';
+export * from './DateModalInput';
+export * from './DatePicker';
+export * from './DateTextInput';
 export * from './Divider';
 export * from './ExcludedEdges';
+export * from './GradientBackground';
 export * from './InputLayout';
 export * from './KeyboardAccessory';
 export * from './KeyboardAwareScrollView';
 export * from './ListLoadingItem';
 export * from './Modal';
 export * from './ScreenLoader';
+export * from './SelectDropdown';
 export * from './Skeleton';
 export * from './TextInput';
+export * from './ThemeManager';
+export * from './ToastManager';
 export * from './Typography';

package/templates/shared/apps/mobile/src/components/molecules/BackButton/back-button.component.tsx

@@ -51,7 +51,7 @@ export function BackButton(props: Props) {
       onPress={handleOnPress}
     >
       <View style={[tw`flex-1 items-center justify-center rounded-full`, style]}>
-        <ArrowLeftIcon style={tw`text-gray-950`} />
+        <ArrowLeftIcon style={tw`dark:text-foreground text-gray-900`} />
       </View>
     </TouchableOpacity>
   );

package/templates/shared/apps/mobile/src/components/molecules/ScreenContainer/screen-container.component.tsx

@@ -1,12 +1,9 @@
-import { useFocusEffect } from '@react-navigation/native';
 import React, { ReactElement } from 'react';
 import {
   NativeScrollEvent,
   NativeSyntheticEvent,
   Platform,
   RefreshControlProps,
-  StatusBar,
-  StatusBarStyle,
   StyleProp,
   View,
   ViewStyle,
@@ -15,20 +12,15 @@ import { ScrollView as RNScrollView } from 'react-native-gesture-handler';
 import { Edge, SafeAreaProviderProps, SafeAreaView } from 'react-native-safe-area-context';
 
 import { KeyboardAwareScrollView } from '@/components';
-import CONFIG from '@/config';
 import { tw } from '@/tailwind';
 
 type Props = SafeAreaProviderProps & {
-  barStyle?: StatusBarStyle;
   scrollViewRef?: React.RefObject<RNScrollView | null>;
   containerStyle?: StyleProp<ViewStyle>;
   excludedEdges?: Edge[];
   extraBottomPadding?: number;
   hasScroll?: boolean;
   refreshControl?: ReactElement;
-  shouldShowStatusBar?: boolean;
-  shouldBeTranslucent?: boolean;
-  statusBarColor?: string;
   useSafeAreaView?: boolean;
   onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
 };
@@ -43,7 +35,6 @@ const safeAreaViewEdges: Edge[] = Platform.select({
 
 export function ScreenContainer(props: Props) {
   const {
-    barStyle = 'dark-content',
     children,
     containerStyle,
     excludedEdges = [],
@@ -52,20 +43,9 @@ export function ScreenContainer(props: Props) {
     onScroll,
     refreshControl,
     scrollViewRef,
-    shouldBeTranslucent = false,
-    shouldShowStatusBar = true,
-    statusBarColor = 'transparent',
     style,
     useSafeAreaView = true,
   } = props;
-  useFocusEffect(() => {
-    StatusBar.setHidden(!shouldShowStatusBar);
-    if (CONFIG.IS_ANDROID) {
-      StatusBar.setBackgroundColor(statusBarColor);
-      StatusBar.setTranslucent(!shouldBeTranslucent);
-      StatusBar.setBarStyle(barStyle);
-    }
-  });
 
   const defaultContainerStyle = [
     defaultStyle,
@@ -76,12 +56,12 @@ export function ScreenContainer(props: Props) {
 
   if (!useSafeAreaView) {
     return (
-      <View style={[tw`flex-1 bg-white`, style]}>
+      <View style={[tw`dark:bg-background flex-1 bg-white`, style]}>
         {hasScroll ? (
           <KeyboardAwareScrollView
             containerStyle={defaultContainerStyle}
             refreshControl={refreshControl as ReactElement<RefreshControlProps>}
-            scrollViewRef={scrollViewRef}
+            scrollViewRef={scrollViewRef as React.RefObject<RNScrollView>}
             onScroll={onScroll}
           >
             {children}
@@ -99,12 +79,12 @@ export function ScreenContainer(props: Props) {
       : safeAreaViewEdges;
 
   return (
-    <SafeAreaView edges={edges} style={[tw`flex-1 bg-white`, style]}>
+    <SafeAreaView edges={edges} style={[tw`dark:bg-background flex-1 bg-white`, style]}>
       {hasScroll ? (
         <KeyboardAwareScrollView
           containerStyle={defaultContainerStyle}
           refreshControl={refreshControl as ReactElement<RefreshControlProps>}
-          scrollViewRef={scrollViewRef}
+          scrollViewRef={scrollViewRef as React.RefObject<RNScrollView>}
           onScroll={onScroll}
         >
           {children}

package/templates/shared/apps/mobile/src/components/molecules/ScreenHeader/screen-header.component.tsx

@@ -39,7 +39,7 @@ export function ScreenHeader(props: Props) {
         {extraActionComponent ? (
           extraActionComponent
         ) : (
-          <GearIcon height={25} style={tw`text-black`} width={25} />
+          <GearIcon height={25} style={tw`dark:text-foreground text-gray-900`} width={25} />
         )}
       </View>
     </TouchableOpacity>
@@ -51,7 +51,7 @@ export function ScreenHeader(props: Props) {
         {hasBackButton && <BackButton style={tw`z-10`} onPress={onBackPress} />}
         <Typography
           style={[
-            tw`text-primary-700 absolute inset-x-0 top-4 text-center text-xl font-medium`,
+            tw`dark:text-foreground absolute inset-x-0 top-4 text-center text-xl font-medium text-gray-900`,
             titleStyle,
           ]}
         >

package/templates/shared/apps/mobile/src/hooks/index.ts

@@ -4,6 +4,7 @@ export * from './useDebounce.hook';
 export * from './useGetLayoutHeight.hook';
 export * from './useGetLayoutWidth.hook';
 export * from './useNavigation.hook';
+export * from './usePushNotifications.hook';
 export * from './useShakeAnimation.hook';
 export * from './useTextInputChangeFocus.hook';
 export * from './useThrottle.hook';

package/templates/shared/apps/mobile/src/hooks/usePushNotifications.hook.ts

@@ -0,0 +1,104 @@
+import { useEffect } from 'react';
+import { AppState, AppStateStatus, Linking } from 'react-native';
+import { checkNotifications, requestNotifications, RESULTS } from 'react-native-permissions';
+
+import { Alert } from '@/components/atoms';
+import { useLocalStorageStore } from '@/stores/local-storage.store';
+import { devLog } from '@/utils/log.util';
+
+function showEnableNotificationsAlert() {
+  Alert.info({
+    actions: [
+      { label: 'Later', variant: 'cancel' },
+      { label: 'Open Settings', onPress: () => Linking.openSettings() },
+    ],
+    message: 'Enable notifications to stay updated with important alerts and messages.',
+    title: 'Notifications Disabled',
+  });
+}
+
+function isGranted(status: string): boolean {
+  return status === RESULTS.GRANTED || status === RESULTS.LIMITED;
+}
+
+// TODO: Implement once @react-native-firebase/messaging is installed
+async function registerFcmToken() {
+  devLog('registerFcmToken: Firebase messaging not configured yet');
+}
+
+// TODO: Implement once @react-native-firebase/messaging is installed
+async function removeFcmToken() {
+  devLog('removeFcmToken: Firebase messaging not configured yet');
+}
+
+function syncPushNotificationState(status: string) {
+  useLocalStorageStore.getState().setPushNotificationsEnabled(isGranted(status));
+}
+
+export async function requestPushNotification() {
+  const { status } = await checkNotifications();
+  syncPushNotificationState(status);
+
+  if (isGranted(status)) {
+    await registerFcmToken();
+
+    return;
+  }
+
+  const { status: requestStatus } = await requestNotifications([]);
+
+  if (isGranted(requestStatus)) {
+    syncPushNotificationState(requestStatus);
+    await registerFcmToken();
+
+    return;
+  }
+
+  const isBlocked = status === RESULTS.BLOCKED || requestStatus === RESULTS.BLOCKED;
+  if (isBlocked) {
+    showEnableNotificationsAlert();
+  }
+}
+
+async function handleAppForeground() {
+  const { status } = await checkNotifications();
+  syncPushNotificationState(status);
+
+  if (!isGranted(status)) {
+    return;
+  }
+
+  await registerFcmToken();
+}
+
+export async function removeCurrentFcmToken(): Promise<void> {
+  try {
+    await removeFcmToken();
+  } catch (error) {
+    devLog('Failed to remove FCM token:', error);
+  }
+}
+
+export function usePushNotifications(isAuthenticated: boolean) {
+  useEffect(() => {
+    if (!isAuthenticated) {
+      return;
+    }
+
+    const handleAppStateChange = (nextState: AppStateStatus) => {
+      if (nextState !== 'active') {
+        return;
+      }
+
+      handleAppForeground().catch((error) => {
+        devLog('Failed to check notification permission on foreground:', error);
+      });
+    };
+
+    const subscription = AppState.addEventListener('change', handleAppStateChange);
+
+    return () => {
+      subscription.remove();
+    };
+  }, [isAuthenticated]);
+}

package/templates/shared/apps/mobile/src/hooks/useToggleDarkMode.hook.tsx

@@ -1,9 +1,31 @@
+import { useCallback } from 'react';
 import { useAppColorScheme } from 'twrnc';
 
+import { useLocalStorageStore } from '@/stores';
+import { ColorScheme } from '@/stores/theme.slice';
 import { tw } from '@/tailwind';
 
 export function useToggleDarkMode() {
-  const [, toggleColorScheme] = useAppColorScheme(tw);
+  const [colorScheme, , setTwColorScheme] = useAppColorScheme(tw);
+  const setStoredColorScheme = useLocalStorageStore((s) => s.setColorScheme);
 
-  return toggleColorScheme;
+  const toggleColorScheme = useCallback(() => {
+    const next: ColorScheme = colorScheme === 'dark' ? 'light' : 'dark';
+    setTwColorScheme(next);
+    setStoredColorScheme(next);
+  }, [colorScheme, setTwColorScheme, setStoredColorScheme]);
+
+  const setColorScheme = useCallback(
+    (scheme: ColorScheme) => {
+      setTwColorScheme(scheme);
+      setStoredColorScheme(scheme);
+    },
+    [setTwColorScheme, setStoredColorScheme],
+  );
+
+  return {
+    colorScheme: (colorScheme ?? 'light') as ColorScheme,
+    setColorScheme,
+    toggleColorScheme,
+  };
 }

package/templates/shared/apps/mobile/src/icons/alert-triangle.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/>
+  <path d="M12 9v4"/>
+  <path d="M12 17h.01"/>
+</svg>

package/templates/shared/apps/mobile/src/icons/check-circle.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
+  <path d="m9 11 3 3L22 4"/>
+</svg>

package/templates/shared/apps/mobile/src/icons/chevron-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>

package/templates/shared/apps/mobile/src/icons/chevron-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>

package/templates/shared/apps/mobile/src/icons/index.ts

@@ -1,6 +1,23 @@
+import AlertTriangleIcon from './alert-triangle.svg';
 import ArrowLeftIcon from './arrow-left.svg';
+import CheckCircleIcon from './check-circle.svg';
+import ChevronDownIcon from './chevron-down.svg';
+import ChevronRightIcon from './chevron-right.svg';
 import CrossIcon from './cross.svg';
 import GearIcon from './gear.svg';
+import InfoIcon from './info.svg';
 import KeyboardHideIcon from './keyboard-hide.svg';
+import XCircleIcon from './x-circle.svg';
 
-export { ArrowLeftIcon, CrossIcon, GearIcon, KeyboardHideIcon };
+export {
+  AlertTriangleIcon,
+  ArrowLeftIcon,
+  CheckCircleIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  CrossIcon,
+  GearIcon,
+  InfoIcon,
+  KeyboardHideIcon,
+  XCircleIcon,
+};

package/templates/shared/apps/mobile/src/icons/info.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="12" cy="12" r="10"/>
+  <path d="M12 16v-4"/>
+  <path d="M12 8h.01"/>
+</svg>

package/templates/shared/apps/mobile/src/icons/x-circle.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="12" cy="12" r="10"/>
+  <path d="m15 9-6 6"/>
+  <path d="m9 9 6 6"/>
+</svg>

package/templates/shared/apps/mobile/src/routes/index.tsx

@@ -1,13 +1,13 @@
-import { DefaultTheme, NavigationContainer, Theme } from '@react-navigation/native';
+import { DarkTheme, DefaultTheme, NavigationContainer, Theme } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import React, { useEffect } from 'react';
-import { StatusBar } from 'react-native';
+import React, { useMemo } from 'react';
+import BootSplash from 'react-native-bootsplash';
 
-import CONFIG from '@/config';
 import { Routes } from '@/routes';
 import PrivateRoutes from '@/routes/privateRoutes';
 import PublicRoutes from '@/routes/publicRoutes';
 import { screenOptions } from '@/routes/screen-options';
+import { useLocalStorageStore } from '@/stores';
 import { colors } from '@/tailwind';
 
 const RootStack = createNativeStackNavigator();
@@ -16,11 +16,19 @@ export const noAnimation = {
   animationEnabled: false,
 };
 
-const navigationTheme: Theme = {
+const lightNavigationTheme: Theme = {
   ...DefaultTheme,
   colors: {
     ...DefaultTheme.colors,
-    background: colors.gray[50],
+    background: colors.white,
+  },
+};
+
+const darkNavigationTheme: Theme = {
+  ...DarkTheme,
+  colors: {
+    ...DarkTheme.colors,
+    background: colors.background,
   },
 };
 
@@ -29,15 +37,13 @@ export default function ApplicationRoutes() {
   // const isUserAuthenticated = useLocalStorageState((state) => !!state.accessToken);
   const isUserAuthenticated = false;
   const initialRouteName = isUserAuthenticated ? Routes.PRIVATE : Routes.PUBLIC;
+  const colorScheme = useLocalStorageStore((s) => s.colorScheme);
+  const isDark = colorScheme === 'dark';
 
-  useEffect(() => {
-    StatusBar.setHidden(false);
-    if (CONFIG.IS_ANDROID) {
-      StatusBar.setBackgroundColor('transparent');
-      StatusBar.setTranslucent(true);
-      StatusBar.setBarStyle('dark-content');
-    }
-  }, []);
+  const navigationTheme = useMemo(
+    () => (isDark ? darkNavigationTheme : lightNavigationTheme),
+    [isDark],
+  );
 
   // if (isLoading) {
   //   return <ScreenLoader />;
@@ -50,7 +56,12 @@ export default function ApplicationRoutes() {
   );
 
   return (
-    <NavigationContainer theme={navigationTheme}>
+    <NavigationContainer
+      theme={navigationTheme}
+      onReady={() => {
+        BootSplash.hide();
+      }}
+    >
       <RootStack.Navigator initialRouteName={initialRouteName} screenOptions={screenOptions}>
         {screens}
       </RootStack.Navigator>