nx-react-native-cli 1.0.10 → 1.0.12

package/templates/apps/mobile/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "mobile",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "android:connect": "adb reverse tcp:8081 tcp:8081",
+    "start": "npx nx start mobile --skip-nx-cache",
+    "run-ios": "npx nx run-ios mobile --skip-nx-cache --scheme=Dev --simulator='iPhone 13 (A96A9251-28D7-48B1-8F6A-20B6CCB8810B)'",
+    "run-android": "npx nx run-android mobile --skip-nx-cache",
+    "ensure-symlink": "npx nx ensure-symlink mobile",
+    "sync-deps": "npx nx sync-deps mobile",
+    "pod-install": "npx nx pod-install mobile",
+    "bundle:pod-install": "cd ios && bundle install && bundle exec pod install --repo-update",
+    "pre-build": "npm run ensure-symlink && npm run sync-deps && npm run pod-install",
+    "list:ios-configurations": "cd ios && xcodebuild -list",
+    "list:ios-devices": "xcrun xctrace list devices",
+    "xcode": "open ios/AppsMobile.xcworkspace",
+    "check-env:mobile": "cd ../.. && npm run check-env:mobile",
+    "setup-fastlane": "rbenv local && bundle install && bundle update",
+    "deploy-android:dev": "bundle exec fastlane android dev --env development",
+    "deploy-ios:dev": "bundle exec fastlane ios dev --env development",
+    "ios-certificates": "npm run setup-fastlane && bundle exec fastlane ios certificates --env development"
+  },
+  "dependencies": {
+    "@gorhom/bottom-sheet": "*",
+    "@hookform/resolvers": "*",
+    "@react-native-async-storage/async-storage": "*",
+    "@react-native-community/datetimepicker": "*",
+    "@react-native-community/hooks": "*",
+    "@react-native/metro-config": "*",
+    "@react-navigation/core": "*",
+    "@react-navigation/material-top-tabs": "*",
+    "@react-navigation/native-stack": "*",
+    "@react-navigation/native": "*",
+    "@react-navigation/routers": "*",
+    "@react-navigation/stack": "*",
+    "@tanstack/query-async-storage-persister": "*",
+    "@tanstack/query-core": "*",
+    "@tanstack/query-sync-storage-persister": "*",
+    "@tanstack/react-query-persist-client": "*",
+    "@tanstack/react-query": "*",
+    "@testing-library/jest-native": "*",
+    "@testing-library/react-native": "*",
+    "axios": "*",
+    "babel-plugin-module-resolver": "*",
+    "dayjs": "*",
+    "jotai-optics": "*",
+    "jotai": "*",
+    "lodash": "*",
+    "metro-config": "*",
+    "react-hook-form": "*",
+    "react-native-dotenv": "*",
+    "react-native-fast-image": "*",
+    "react-native-gesture-handler": "*",
+    "react-native-get-random-values": "*",
+    "react-native-keyboard-aware-scroll-view": "*",
+    "react-native-mmkv": "*",
+    "react-native-modal-datetime-picker": "*",
+    "react-native-modal": "*",
+    "react-native-pager-view": "*",
+    "react-native-reanimated": "*",
+    "react-native-safe-area-context": "*",
+    "react-native-screens": "*",
+    "react-native-simple-toast": "*",
+    "react-native-svg-transformer": "*",
+    "react-native-svg": "*",
+    "react-native-url-polyfill": "*",
+    "react-native": "*",
+    "react": "*",
+    "tailwindcss": "*",
+    "twrnc": "*",
+    "uuid": "*",
+    "zod-validation-error": "*",
+    "zod": "*",
+    "zustand": "*"
+  }
+}

package/templates/apps/mobile/project.json

@@ -0,0 +1,102 @@
+{
+  "name": "mobile",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/mobile/src",
+  "projectType": "application",
+  "targets": {
+    "check-env": {
+      "executor": "nx:run-script",
+      "options": {
+        "script": "check-env:mobile"
+      }
+    },
+    "start": {
+      "executor": "@nx/react-native:start",
+      "dependsOn": ["check-env", "ensure-symlink", "pod-install"],
+      "options": {
+        "port": 8081,
+        "resetCache": true
+      }
+    },
+    "serve": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "nx start mobile"
+      }
+    },
+    "run-ios": {
+      "executor": "@nx/react-native:run-ios",
+      "dependsOn": ["ensure-symlink", "pod-install"],
+      "options": {}
+    },
+    "bundle-ios": {
+      "executor": "@nx/react-native:bundle",
+      "dependsOn": ["ensure-symlink"],
+      "outputs": ["{options.bundleOutput}"],
+      "options": {
+        "entryFile": "src/main.tsx",
+        "platform": "ios",
+        "bundleOutput": "dist/apps/mobile/ios/main.jsbundle"
+      }
+    },
+    "run-android": {
+      "executor": "@nx/react-native:run-android",
+      "dependsOn": ["ensure-symlink"],
+      "options": {}
+    },
+    "build-android": {
+      "executor": "@nx/react-native:build-android",
+      "outputs": [
+        "{projectRoot}/android/app/build/outputs/bundle",
+        "{projectRoot}/android/app/build/outputs/apk"
+      ],
+      "dependsOn": ["ensure-symlink"],
+      "options": {}
+    },
+    "build-ios": {
+      "executor": "@nx/react-native:build-ios",
+      "outputs": ["{projectRoot}/ios/build/Build"],
+      "dependsOn": ["ensure-symlink", "pod-install"],
+      "options": {}
+    },
+    "pod-install": {
+      "executor": "nx:run-script",
+      "options": {
+        "script": "bundle:pod-install"
+      }
+    },
+    "bundle-android": {
+      "executor": "@nx/react-native:bundle",
+      "dependsOn": ["ensure-symlink"],
+      "outputs": ["{options.bundleOutput}"],
+      "options": {
+        "entryFile": "src/main.tsx",
+        "platform": "android",
+        "bundleOutput": "dist/apps/mobile/android/main.jsbundle"
+      }
+    },
+    "sync-deps": {
+      "executor": "@nx/react-native:sync-deps",
+      "options": {}
+    },
+    "ensure-symlink": {
+      "executor": "@nx/react-native:ensure-symlink",
+      "options": {}
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["apps/mobile/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "apps/mobile/jest.config.ts"
+      }
+    }
+  },
+  "tags": []
+}

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

@@ -0,0 +1,68 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
+import { QueryClient } from '@tanstack/react-query';
+import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
+import React from 'react';
+import { LogBox } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import 'react-native-get-random-values';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { enableFreeze } from 'react-native-screens';
+import 'react-native-url-polyfill/auto';
+
+import { StorageManager } from '../components';
+import ApplicationRoutes from '../routes';
+import { tw } from '../tailwind';
+
+LogBox.ignoreLogs(['VirtualizedLists', 'onAnimatedValueUpdate']);
+
+enableFreeze(true);
+
+const MS_IN_S = 1000;
+const S_IN_A_MIN = 60;
+const MIN_IN_AN_HOUR = 60;
+const HOURS_IN_A_DAY = 24;
+const MS_IN_DAYS = MS_IN_S * S_IN_A_MIN * MIN_IN_AN_HOUR * HOURS_IN_A_DAY;
+
+const CACHE_TIME = MS_IN_DAYS * 1;
+const STALE_TIME = MS_IN_S * S_IN_A_MIN * MIN_IN_AN_HOUR; // 5 minutes
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: STALE_TIME,
+    },
+  },
+});
+
+const persister = createAsyncStoragePersister({
+  storage: AsyncStorage,
+});
+
+const persistOptions = { maxAge: CACHE_TIME, persister };
+
+function Application(): JSX.Element {
+  return (
+    <GestureHandlerRootView style={tw`flex-1`}>
+      <SafeAreaProvider>
+        <PersistQueryClientProvider client={queryClient} persistOptions={persistOptions}>
+          <StorageManager>
+            <ApplicationRoutes />
+          </StorageManager>
+        </PersistQueryClientProvider>
+      </SafeAreaProvider>
+    </GestureHandlerRootView>
+  );
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function HeadlessCheck({ isHeadless }: any) {
+  if (isHeadless) {
+    // App has been launched in the background by iOS, ignore
+    return null;
+  }
+
+  return <Application />;
+}
+
+export default HeadlessCheck;

package/templates/apps/mobile/src/components/atoms/BottomSheet/bottom-sheet.component.tsx

@@ -0,0 +1,145 @@
+/* eslint-disable no-magic-numbers */
+import {
+  BottomSheetBackdropProps,
+  BottomSheetHandle,
+  BottomSheetHandleProps,
+  BottomSheetModal,
+  BottomSheetScrollView,
+} from '@gorhom/bottom-sheet';
+import React, { FC, ReactNode, RefObject, useCallback, useMemo, useRef } from 'react';
+import { Keyboard, StyleProp, ViewStyle } from 'react-native';
+import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
+import Animated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
+
+import { tw } from '../../../tailwind';
+import { DefaultComponentProps } from '../../../types';
+
+export type BottomSheetProps = DefaultComponentProps & {
+  backgroundStyle?: StyleProp<Omit<ViewStyle, 'left' | 'right' | 'position' | 'top' | 'bottom'>>;
+  children?: ReactNode;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  enableDismissOnPressBackdrop?: boolean;
+  enableDynamicSizing?: boolean;
+  enablePanDownToClose?: boolean;
+  handleComponent?: FC<BottomSheetHandleProps> | null;
+  onExpand?: () => void;
+  sheetRef: RefObject<BottomSheetModal>;
+  snapPoints?: string[];
+};
+
+const DEFAULT_SNAP_POINTS = ['25%', '50%', '100%'];
+
+const CustomBackdrop = ({
+  animatedIndex,
+  enableDismissOnPressBackdrop = true,
+  sheetRef,
+  style,
+}: BottomSheetBackdropProps & {
+  enableDismissOnPressBackdrop?: boolean;
+  sheetRef: RefObject<BottomSheetModal>;
+}) => {
+  function handleDismiss() {
+    if (enableDismissOnPressBackdrop) {
+      sheetRef.current?.close();
+    }
+  }
+
+  const containerAnimatedStyle = useAnimatedStyle(() => {
+    const opacity = interpolate(
+      animatedIndex.value,
+      [-1, 0, 1],
+      [0, 0.5, 0.75],
+      Extrapolation.CLAMP,
+    );
+    const pointerEvents = opacity > 0.25 ? 'auto' : 'none';
+
+    return {
+      opacity,
+      pointerEvents,
+    };
+  });
+
+  // styles
+  const containerStyle = useMemo(
+    () => [style, tw`bg-black-950/60`, containerAnimatedStyle],
+    [style, containerAnimatedStyle],
+  );
+
+  return (
+    <Animated.View style={containerStyle}>
+      <TouchableWithoutFeedback style={tw`h-full w-full`} onPress={handleDismiss} />
+    </Animated.View>
+  );
+};
+
+export function BottomSheet(props: BottomSheetProps) {
+  const {
+    backgroundStyle,
+    children,
+    contentContainerStyle,
+    enableDismissOnPressBackdrop = true,
+    enableDynamicSizing = false,
+    enablePanDownToClose = true,
+    handleComponent = BottomSheetHandle,
+    sheetRef,
+    snapPoints = DEFAULT_SNAP_POINTS,
+    style,
+  } = props;
+  const points = enableDynamicSizing ? undefined : snapPoints;
+
+  function renderBackdrop(backdropProps: BottomSheetBackdropProps) {
+    return (
+      <CustomBackdrop
+        {...backdropProps}
+        enableDismissOnPressBackdrop={enableDismissOnPressBackdrop}
+        sheetRef={sheetRef}
+      />
+    );
+  }
+
+  return (
+    <BottomSheetModal
+      ref={sheetRef}
+      backdropComponent={renderBackdrop}
+      backgroundStyle={[tw`bg-gray-50`, backgroundStyle]}
+      enableDynamicSizing={enableDynamicSizing}
+      enablePanDownToClose={enablePanDownToClose}
+      handleComponent={handleComponent}
+      handleIndicatorStyle={tw`bg-gray-50`}
+      handleStyle={tw`rounded-tl-xl rounded-tr-xl`}
+      keyboardBehavior="interactive"
+      snapPoints={points}
+      style={[
+        tw`rounded-md`,
+        {
+          elevation: 10,
+        },
+        style,
+      ]}
+    >
+      <BottomSheetScrollView contentContainerStyle={contentContainerStyle}>
+        {children}
+      </BottomSheetScrollView>
+    </BottomSheetModal>
+  );
+}
+
+export function useBottomSheet() {
+  const sheetRef = useRef<BottomSheetModal>(null);
+
+  const expandSheet = useCallback(() => {
+    Keyboard.dismiss();
+    sheetRef.current?.present();
+  }, []);
+
+  const closeSheet = useCallback(() => {
+    Keyboard.dismiss();
+    sheetRef.current?.close();
+  }, []);
+
+  return {
+    closeSheet,
+    expandSheet,
+    sheetRef,
+  };
+}

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

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

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

@@ -0,0 +1,55 @@
+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 Button(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 ?? <Text style={[tw`font-medium text-white`, textStyle]}>{title}</Text>;
+
+  return (
+    <TouchableOpacity activeOpacity={activeOpacity} disabled={disabled} style={[style]} {...rest}>
+      <View
+        style={[
+          tw`bg-primary-700 items-center justify-center rounded-xl p-4`,
+          buttonStyle,
+          disabledInputStyle(disabled),
+        ]}
+      >
+        {isLoading ? <ActivityIndicator color={colors.white} /> : display}
+      </View>
+    </TouchableOpacity>
+  );
+}

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

@@ -0,0 +1,2 @@
+export * from './button.component';
+export * from './outlined-button.component';

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

@@ -0,0 +1,59 @@
+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/Divider/divider-component.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { tw } from '../../../tailwind';
+import { DefaultComponentProps } from '../../../types';
+
+type Props = DefaultComponentProps & {};
+
+export function Divider(props: Props) {
+  const { style } = props;
+
+  return <View style={[tw`h-[1px] w-full bg-gray-200`, style]}></View>;
+}

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

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

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

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

package/templates/apps/mobile/src/components/atoms/InputLayout/input-layout.component.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { StyleProp, TextStyle, View } from 'react-native';
+
+import { tw } from '../../../tailwind';
+import { DefaultComponentProps } from '../../../types';
+import { Text } from '../Text';
+
+type Props = DefaultComponentProps & {
+  children: React.ReactNode;
+  isRequired?: boolean;
+  label?: string;
+  textStyle?: StyleProp<TextStyle>;
+};
+
+export function InputLayout(props: Props) {
+  const { children, error, isRequired, label, style, textStyle } = props;
+
+  return (
+    <View style={[style]}>
+      {label && (
+        <Text style={[tw`mb-2 text-gray-600`, textStyle]}>
+          {label}
+          {isRequired && <Text style={tw`text-red-600`}>{isRequired && '*'}</Text>}
+        </Text>
+      )}
+      {children}
+      {!!error && (
+        <View style={tw`items-end`}>
+          <Text style={tw`text-right text-red-500`}>{error}</Text>
+        </View>
+      )}
+    </View>
+  );
+}

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

@@ -0,0 +1 @@
+export * from './list-loading-item.component';

package/templates/apps/mobile/src/components/atoms/ListLoadingItem/list-loading-item.component.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { tw } from '../../../tailwind';
+import { DefaultComponentProps } from '../../../types';
+import { Skeleton } from '../Skeleton';
+
+type Props = DefaultComponentProps & {
+  isLoading: boolean;
+};
+
+export function ListLoadingItemComponent(props: Props) {
+  const { isLoading, style } = props;
+
+  return (
+    <View style={[style]}>
+      <View style={[tw`gap-2`, style]}>
+        <Skeleton isLoading={isLoading}>
+          {isLoading && <View style={tw`h-[100px] w-full`} />}
+        </Skeleton>
+        <Skeleton isLoading={isLoading}>
+          {isLoading && <View style={tw`h-[100px] w-full`} />}
+        </Skeleton>
+        <Skeleton isLoading={isLoading}>
+          {isLoading && <View style={tw`h-[100px] w-full`} />}
+        </Skeleton>
+      </View>
+    </View>
+  );
+}
+
+export function ListLoadingHorizontalItemComponent(props: Props) {
+  const { isLoading, style } = props;
+
+  return (
+    <View style={[style]}>
+      <View style={[tw`flex-row gap-2`, style]}>
+        <Skeleton isLoading={isLoading}>
+          {isLoading && <View style={tw`h-[200px] w-[100px]`} />}
+        </Skeleton>
+        <Skeleton isLoading={isLoading}>
+          {isLoading && <View style={tw`h-[200px] w-[100px]`} />}
+        </Skeleton>
+        <Skeleton isLoading={isLoading}>
+          {isLoading && <View style={tw`h-[200px] w-[100px]`} />}
+        </Skeleton>
+        <Skeleton isLoading={isLoading}>
+          {isLoading && <View style={tw`h-[200px] w-[100px]`} />}
+        </Skeleton>
+        <Skeleton isLoading={isLoading}>
+          {isLoading && <View style={tw`h-[200px] w-[100px]`} />}
+        </Skeleton>
+      </View>
+    </View>
+  );
+}

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

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