nx-react-native-cli 1.0.17 → 1.0.18

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

@@ -1,4 +1,5 @@
 export * from './BottomSheet';
+export * from './Box';
 export * from './Button';
 export * from './Divider';
 export * from './InputLayout';
@@ -6,5 +7,5 @@ export * from './ListLoadingItem';
 export * from './Modal';
 export * from './ScreenLoader';
 export * from './Skeleton';
-export * from './Text';
 export * from './TextInput';
+export * from './Typography';

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

@@ -6,7 +6,6 @@ import {
   PressableProps,
   StyleProp,
   TouchableOpacity,
-  View,
   ViewStyle,
 } from 'react-native';
 
@@ -15,6 +14,7 @@ import { ArrowLeftIcon } from '../../../icons';
 import { Screens } from '../../../routes';
 import { tw } from '../../../tailwind';
 import { DefaultComponentProps } from '../../../types/component.type';
+import { Box } from '../../atoms';
 
 type Props = DefaultComponentProps &
   PressableProps & {
@@ -24,7 +24,7 @@ type Props = DefaultComponentProps &
   };
 
 const ACTIVE_OPACITY = 0.5;
-export function BackButton(props: Props): JSX.Element {
+export function BackButton(props: Props) {
   const { fallbackRoute, onPress, style } = props;
   const navigation = useNavigation<ParamListBase>();
 
@@ -50,9 +50,9 @@ export function BackButton(props: Props): JSX.Element {
       style={[tw`h-[48px] w-[48px]`, style]}
       onPress={handleOnPress}
     >
-      <View style={[tw`flex-1 items-center justify-center rounded-full`, style]}>
+      <Box style={[tw`flex-1 items-center justify-center rounded-full`, style]}>
         <ArrowLeftIcon style={tw`text-gray-950`} />
-      </View>
+      </Box>
     </TouchableOpacity>
   );
 }

package/templates/apps/mobile/src/components/molecules/BottomActionsContainer/BottomActionsContainer.component.tsx

@@ -16,10 +16,7 @@ export function BottomActionsContainer(props: Props) {
   return (
     <SafeAreaView
       edges={['left', 'right', 'bottom']}
-      style={[
-        tw`border-geyser-200 absolute bottom-0 left-0 right-0 flex flex-col gap-y-2 border-b-0 border-t bg-gray-50 p-4`,
-        style,
-      ]}
+      style={[tw`absolute bottom-0 left-0 right-0`, style]}
       {...rest}
     >
       {children}

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

@@ -6,7 +6,6 @@ import {
   Platform,
   StatusBar,
   StyleProp,
-  View,
   ViewStyle,
 } from 'react-native';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
@@ -15,8 +14,10 @@ import { Edge, SafeAreaProviderProps, SafeAreaView } from 'react-native-safe-are
 
 import CONFIG from '../../../config';
 import { tw } from '../../../tailwind';
+import { Box } from '../../atoms';
 
 type Props = SafeAreaProviderProps & {
+  scrollViewRef?: React.RefObject<KeyboardAwareScrollView>;
   containerStyle?: StyleProp<ViewStyle>;
   excludedEdges?: Edge[];
   extraBottomPadding?: number;
@@ -28,21 +29,20 @@ type Props = SafeAreaProviderProps & {
   onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
 };
 
-const defaultStyle = tw.style('grow', {
-  paddingTop: StatusBar.currentHeight ? StatusBar.currentHeight - 1 : 0,
-});
+const defaultStyle = tw`grow`;
 
 const safeAreaViewEdges: Edge[] = Platform.select({
-  android: ['left', 'right', 'bottom'],
+  android: ['top', 'left', 'right', 'bottom'],
   default: [],
-  ios: ['left', 'right', 'bottom', 'top'],
+  ios: ['top', 'left', 'right', 'bottom'],
 });
 
 const AnimatedKeyboardAwareScrollView = Animated.createAnimatedComponent(KeyboardAwareScrollView);
 
-export function ScreenContainer(props: Props): JSX.Element {
+export function ScreenContainer(props: Props) {
   const {
     children,
+    scrollViewRef,
     containerStyle,
     excludedEdges = [],
     extraBottomPadding = 0,
@@ -81,10 +81,12 @@ export function ScreenContainer(props: Props): JSX.Element {
   ];
 
   return (
-    <SafeAreaView edges={edges} style={[tw`flex-1 bg-gray-50`, style]}>
+    <SafeAreaView edges={edges} style={[tw`flex-1 bg-gray-50 dark:bg-gray-900`, style]}>
       {hasScroll ? (
         <AnimatedKeyboardAwareScrollView
+        scrollViewRef={scrollViewRef}
           contentContainerStyle={defaultContainerStyle}
+          enableResetScrollToCoords={false}
           keyboardShouldPersistTaps="handled"
           refreshControl={refreshControl}
           scrollEventThrottle={16}
@@ -93,7 +95,7 @@ export function ScreenContainer(props: Props): JSX.Element {
           {children}
         </AnimatedKeyboardAwareScrollView>
       ) : (
-        <View style={defaultContainerStyle}>{children}</View>
+        <Box style={defaultContainerStyle}>{children}</Box>
       )}
     </SafeAreaView>
   );

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

@@ -1,16 +1,16 @@
-import React, { ReactNode } from 'react';
-import { StyleProp, TouchableOpacity, View, ViewStyle } from 'react-native';
+import React from 'react';
+import { StyleProp, TouchableOpacity, ViewStyle } from 'react-native';
 
 import { GearIcon } from '../../../icons';
 import { tw } from '../../../tailwind';
 import { DefaultComponentProps } from '../../../types/component.type';
-import { Text } from '../../atoms/Text';
+import { Box } from '../../atoms';
+import { Typography } from '../../atoms/Typography';
 import { BackButton } from '../BackButton';
 
 type Props = DefaultComponentProps & {
   hasBackButton?: boolean;
-  extraActionComponent?: ReactNode;
-  shouldShowBorder?: boolean;
+  extraActionComponent?: React.ReactNode;
   title: string;
   titleStyle?: StyleProp<ViewStyle>;
   onBackPress?: () => void;
@@ -24,7 +24,6 @@ export function ScreenHeader(props: Props) {
     hasBackButton = true,
     onBackPress,
     onExtraActionPress,
-    shouldShowBorder = false,
     style,
     title,
     titleStyle,
@@ -37,35 +36,30 @@ export function ScreenHeader(props: Props) {
       style={tw`z-10 h-[48px] w-[48px]`}
       onPress={onExtraActionPress}
     >
-      <View style={[tw`flex-1 items-center justify-center rounded-full`, style]}>
+      <Box style={[tw`flex-1 items-center justify-center rounded-full`, style]}>
         {extraActionComponent ? (
           extraActionComponent
         ) : (
           <GearIcon height={25} style={tw`text-black-950`} width={25} />
         )}
-      </View>
+      </Box>
     </TouchableOpacity>
   );
 
   return (
-    <View style={[tw`h-[64px] border border-transparent bg-gray-50`, style]}>
-      <View
-        style={[
-          tw`flex-row items-center justify-between border border-transparent p-4 pt-2`,
-          shouldShowBorder && tw`elevation-2 -m-[5px]`,
-        ]}
-      >
+    <Box style={[tw`h-[64px] border border-transparent`, style]}>
+      <Box style={[tw`flex-row items-center justify-between border border-transparent p-4 pt-2`]}>
         {hasBackButton && <BackButton style={tw`z-10`} onPress={onBackPress} />}
-        <Text
+        <Typography
           style={[
             tw`text-primary-700 absolute inset-x-0 top-4 text-center text-xl font-medium`,
             titleStyle,
           ]}
         >
           {title}
-        </Text>
+        </Typography>
         {extraActionComponentDisplay}
-      </View>
-    </View>
+      </Box>
+    </Box>
   );
 }

package/templates/apps/mobile/src/components/molecules/StorageManager/StorageManager.component.tsx

@@ -1,9 +1,7 @@
-import { ReactNode } from 'react';
-
 import { useLocalStorageState } from '../../../stores';
 
 type Props = {
-  children: ReactNode;
+  children: JSX.Element;
 };
 
 export function StorageManager(props: Props) {

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

@@ -1,5 +1,5 @@
-export * from './useAppState.hook';
 export * from './useApplicationDimensions.hook';
+export * from './useAppState.hook';
 export * from './useDebounce.hook';
 export * from './useGetLayoutHeight.hook';
 export * from './useGetLayoutWidth.hook';
@@ -7,3 +7,4 @@ export * from './useNavigation.hook';
 export * from './useShakeAnimation.hook';
 export * from './useTextInputChangeFocus.hook';
 export * from './useThrottle.hook';
+export * from './useToggleDarkMode.hook';

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

@@ -0,0 +1,9 @@
+import { useAppColorScheme } from 'twrnc';
+
+import { tw } from '../tailwind';
+
+export function useToggleDarkMode() {
+  const [, toggleColorScheme] = useAppColorScheme(tw);
+
+  return toggleColorScheme;
+}

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

@@ -1,5 +1,5 @@
 import { DefaultTheme, NavigationContainer, Theme } from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React, { useEffect } from 'react';
 import { StatusBar } from 'react-native';
 
@@ -11,7 +11,7 @@ import PublicRoutes from './publicRoutes';
 import { Routes } from './routes.enum';
 import { screenOptions } from './screen-options';
 
-const RootStack = createStackNavigator();
+const RootStack = createNativeStackNavigator();
 
 export const noAnimation = {
   animationEnabled: false,
@@ -25,7 +25,7 @@ const navigationTheme: Theme = {
   },
 };
 
-export default function ApplicationRoutes(): JSX.Element {
+export default function ApplicationRoutes() {
   // const { isLoading } = useAuth();
   // const isUserAuthenticated = useLocalStorageState((state) => !!state.accessToken);
   const isUserAuthenticated = false;

package/templates/apps/mobile/src/routes/privateRoutes.tsx

@@ -1,5 +1,6 @@
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 import { MaterialTopTabScreenProps } from '@react-navigation/material-top-tabs';
-import { createStackNavigator, StackScreenProps } from '@react-navigation/stack';
+import { createNativeStackNavigator, NativeStackScreenProps } from '@react-navigation/native-stack';
 import React from 'react';
 
 import { HomeScreen } from '../screens/HomeScreen/home.screen';
@@ -7,13 +8,13 @@ import { HomeScreen } from '../screens/HomeScreen/home.screen';
 import { screenOptions } from './screen-options';
 import { Screens } from './screens.enum';
 
-const PrivateStack = createStackNavigator<PrivateStackParams>();
+const PrivateStack = createNativeStackNavigator<PrivateStackParams>();
 
 export type PrivateStackParams = {
   [Screens.HOME]: undefined;
 };
 
-export type PrivateScreenProps<T extends keyof PrivateStackParams> = StackScreenProps<
+export type PrivateScreenProps<T extends keyof PrivateStackParams> = NativeStackScreenProps<
   PrivateStackParams,
   T
 >;
@@ -23,10 +24,12 @@ export type PrivateTabScreenProps<T extends keyof PrivateStackParams> = Material
   T
 >;
 
-export default function PrivateRoutes(): JSX.Element {
+export default function PrivateRoutes() {
   return (
-    <PrivateStack.Navigator initialRouteName={Screens.HOME} screenOptions={screenOptions}>
-      <PrivateStack.Screen component={HomeScreen} name={Screens.HOME} />
-    </PrivateStack.Navigator>
+    <BottomSheetModalProvider>
+      <PrivateStack.Navigator initialRouteName={Screens.HOME} screenOptions={screenOptions}>
+        <PrivateStack.Screen component={HomeScreen} name={Screens.HOME} />
+      </PrivateStack.Navigator>
+    </BottomSheetModalProvider>
   );
 }

package/templates/apps/mobile/src/routes/publicRoutes.tsx

@@ -1,26 +1,29 @@
-import { createStackNavigator, StackScreenProps } from '@react-navigation/stack';
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+import { createNativeStackNavigator, NativeStackScreenProps } from '@react-navigation/native-stack';
 import React from 'react';
 
-import { LoginScreen } from '../screens/LoginScreen/login.screen';
+import { LandingScreen } from '../screens/LandingScreen/landing.screen';
 
 import { screenOptions } from './screen-options';
 import { Screens } from './screens.enum';
 
-const PublicStack = createStackNavigator<PublicStackParams>();
+const PublicStack = createNativeStackNavigator<PublicStackParams>();
 
 export type PublicStackParams = {
-  [Screens.LOGIN]: undefined;
+  [Screens.LANDING]: undefined;
 };
 
-export type PublicScreenProps<T extends keyof PublicStackParams> = StackScreenProps<
+export type PublicScreenProps<T extends keyof PublicStackParams> = NativeStackScreenProps<
   PublicStackParams,
   T
 >;
 
-export default function PublicRoutes(): JSX.Element {
+export default function PublicRoutes() {
   return (
-    <PublicStack.Navigator initialRouteName={Screens.LOGIN} screenOptions={screenOptions}>
-      <PublicStack.Screen component={LoginScreen} name={Screens.LOGIN} />
-    </PublicStack.Navigator>
+    <BottomSheetModalProvider>
+      <PublicStack.Navigator initialRouteName={Screens.LANDING} screenOptions={screenOptions}>
+        <PublicStack.Screen component={LandingScreen} name={Screens.LANDING} />
+      </PublicStack.Navigator>
+    </BottomSheetModalProvider>
   );
 }

package/templates/apps/mobile/src/routes/screen-options.ts

@@ -1,4 +1,3 @@
-
 export const screenOptions = {
   gestureEnabled: true,
   headerShown: false,

package/templates/apps/mobile/src/routes/screens.enum.ts

@@ -1,4 +1,4 @@
 export enum Screens {
   HOME = '/home',
-  LOGIN = '/login',
+  LANDING = '/landing',
 }

package/templates/apps/mobile/src/screens/HomeScreen/home.screen.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-import { ScreenContainer, Text } from '../../components';
+import { ScreenContainer, Typography } from '../../components';
 import { PrivateScreenProps, Screens } from '../../routes';
 
 export function HomeScreen(props: PrivateScreenProps<Screens.HOME>) {
   return (
     <ScreenContainer>
-      <Text>Home</Text>
+      <Typography>Home</Typography>
     </ScreenContainer>
   );
 }

package/templates/apps/mobile/src/screens/LandingScreen/landing.screen.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import {
+  BottomSheet,
+  Box,
+  Button,
+  OutlinedButton,
+  ScreenContainer,
+  ScreenHeader,
+  Typography,
+  useBottomSheet,
+} from '../../components';
+import { useToggleDarkMode } from '../../hooks';
+import { PublicScreenProps, Screens } from '../../routes';
+import { tw } from '../../tailwind';
+
+export function LandingScreen(props: PublicScreenProps<Screens.LANDING>) {
+  const toggleDarkMode = useToggleDarkMode();
+  const { expandSheet, sheetRef } = useBottomSheet();
+
+  return (
+    <ScreenContainer>
+      <ScreenHeader title="Landing" onExtraActionPress={toggleDarkMode} />
+      <Box style={tw`mx-4`}>
+        <Box row style={tw`gap-2`}>
+          <Button title="Show Bottom Sheet" onPress={expandSheet} />
+          <OutlinedButton title="Login" />
+        </Box>
+      </Box>
+      <BottomSheet sheetRef={sheetRef}>
+        <Box>
+          <Typography>Bottom Sheet</Typography>
+        </Box>
+      </BottomSheet>
+    </ScreenContainer>
+  );
+}

package/templates/apps/mobile/src/types/component.type.ts

@@ -1,13 +1,8 @@
-import { Atom, SetStateAction, WritableAtom } from 'jotai';
 import { StyleProp, ViewStyle } from 'react-native';
 
 export type DefaultComponentProps = {
   error?: string;
   isDisabled?: boolean;
-  style?: StyleProp<ViewStyle>;
-};
-
-export type DefaultInputComponentProps<T> = DefaultComponentProps & {
-  atom?: WritableAtom<T, [SetStateAction<T>], void> | Atom<T>;
   isLoading?: boolean;
+  style?: StyleProp<ViewStyle>;
 };

package/templates/apps/mobile/src/utils/axios.util.ts

@@ -0,0 +1,10 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import axios, { HttpStatusCode } from 'axios';
+
+export function isNetworkError(error: any) {
+  return axios.isAxiosError(error) && !error.response;
+}
+
+export function isUnauthorizedError(error: any) {
+  return axios.isAxiosError(error) && error.response?.status === HttpStatusCode.Unauthorized;
+}

package/templates/apps/mobile/src/utils/index.ts

@@ -0,0 +1,4 @@
+export * from './axios.util';
+export * from './log.util';
+export * from './route.util';
+

package/templates/apps/mobile/src/utils/log.util.ts

@@ -0,0 +1,40 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable no-console */
+/* global __DEV__ */
+import SimpleToast from 'react-native-simple-toast';
+
+export const devLog = (message?: any, ...optionalParams: any[]) => {
+  if (__DEV__) {
+    console.log(message, ...optionalParams);
+  }
+};
+
+export const logToast = (message?: any, ...optionalParams: any[]) => {
+  if (__DEV__) {
+    devLog(message, ...optionalParams);
+    SimpleToast.show(message, SimpleToast.SHORT);
+  }
+};
+
+export const toast = (message: string) => {
+  SimpleToast.show(message, SimpleToast.SHORT);
+};
+
+export function comingSoon() {
+  toast('Feature coming soon');
+}
+
+export const prettyJSON = (obj: any) => JSON.stringify(obj, null, 2);
+
+export const startTimer = () => Date.now();
+
+export const endTimer = (startTime: number, label = 'total duration', enableDebug = false) => {
+  const endTime = Date.now();
+  const duration = endTime - startTime;
+
+  if (enableDebug) {
+    devLog(`${label}: ${duration}ms`);
+  }
+
+  return duration;
+};

package/templates/apps/mobile/src/utils/route.util.ts

@@ -0,0 +1,48 @@
+/* eslint-disable max-params */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { CommonActions, NavigationState, ParamListBase, Route } from '@react-navigation/native';
+
+export function getPreviousRouteName(navigationState: NavigationState<ParamListBase>) {
+  const routes = navigationState.routes;
+  const currentIndex = navigationState.index;
+
+  if (currentIndex > 0) {
+    return routes[currentIndex - 1].name;
+  }
+
+  return null;
+}
+
+export function getCurrentRouteName(navigation: any) {
+  return navigation.getState().routes[navigation.getState().index].name;
+}
+
+export function navigationPop(navigation: any, frequency = 2) {
+  navigation.dispatch((state: any) => {
+    const routes = state.routes.slice(0, -frequency);
+
+    return CommonActions.reset({
+      ...state,
+      index: routes.length - 1,
+      routes,
+    });
+  });
+}
+
+export function navigationNavigateAndReset(
+  navigation: any,
+  routeName: string,
+  frequency = 1,
+  params?: any,
+) {
+  navigation.dispatch((state: any) => {
+    const routes = state.routes.slice(0, -frequency);
+    routes.push({ name: routeName, params });
+
+    return CommonActions.reset({
+      ...state,
+      index: routes.length - 1,
+      routes,
+    });
+  });
+}

package/templates/apps/mobile/src/components/atoms/Button/outlined-button.component.tsx

@@ -1,59 +0,0 @@
-import React from 'react';
-import {
-  ActivityIndicator,
-  StyleProp,
-  TextStyle,
-  TouchableOpacity,
-  TouchableOpacityProps,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import { colors, disabledInputStyle, tw } from '../../../tailwind';
-import { DefaultComponentProps } from '../../../types/component.type';
-import { Text } from '../Text';
-
-type Props = DefaultComponentProps &
-  TouchableOpacityProps & {
-    buttonStyle?: StyleProp<ViewStyle>;
-    children?: React.ReactNode;
-    isLoading?: boolean;
-    textStyle?: StyleProp<TextStyle>;
-    title?: string;
-  };
-
-const ACTIVE_OPACITY = 0.5;
-
-export function OutlinedButton(props: Props): JSX.Element {
-  const {
-    activeOpacity = ACTIVE_OPACITY,
-    buttonStyle,
-    children,
-    isDisabled = false,
-    isLoading = false,
-    style,
-    textStyle,
-    title = 'Button',
-    ...rest
-  } = props;
-  const disabled = isDisabled || isLoading;
-  const display = children ? (
-    children
-  ) : (
-    <Text style={[tw`text-primary-700 font-medium`, textStyle]}>{title}</Text>
-  );
-
-  return (
-    <TouchableOpacity activeOpacity={activeOpacity} disabled={disabled} style={[style]} {...rest}>
-      <View
-        style={[
-          tw`border-primary-700 items-center justify-center rounded-md border-2 bg-white p-4`,
-          buttonStyle,
-          disabledInputStyle(disabled),
-        ]}
-      >
-        {isLoading ? <ActivityIndicator color={colors.primary[100]} /> : display}
-      </View>
-    </TouchableOpacity>
-  );
-}

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

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

package/templates/apps/mobile/src/screens/LoginScreen/login.screen.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-
-import { ScreenContainer, Text } from '../../components';
-import { PublicScreenProps, Screens } from '../../routes';
-import { tw } from '../../tailwind';
-
-export function LoginScreen(props: PublicScreenProps<Screens.LOGIN>) {
-  return (
-    <ScreenContainer style={tw`bg-gray-50`}>
-      <Text>Login</Text>
-    </ScreenContainer>
-  );
-}