nx-react-native-cli 2.7.1 → 3.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nx-react-native-cli",
-  "version": "2.7.1",
+  "version": "3.0.1",
   "description": "A react native starter (with NX) cli script",
   "type": "module",
   "files": [

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

@@ -5,29 +5,34 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import 'react-native-get-random-values';
 import { KeyboardProvider } from 'react-native-keyboard-controller';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
-import { useDeviceContext } from 'twrnc';
 
 import { persistOptions, queryClient } from './query-client';
 
-import { StorageManager } from '@/components';
+import { AlertManager, StorageManager, ThemeManager, ToastManager } from '@/components';
 import ApplicationRoutes from '@/routes';
 import { tw } from '@/tailwind';
 import 'react-native-url-polyfill/auto';
 
-LogBox.ignoreLogs(['VirtualizedLists', 'onAnimatedValueUpdate']);
+LogBox.ignoreLogs([
+  'VirtualizedLists',
+  'onAnimatedValueUpdate',
+  'InteractionManager',
+  'This method is deprecated (as well as all React Native Firebase namespaced API)',
+]);
 
 function Application() {
-  useDeviceContext(tw, {
-    initialColorScheme: 'light',
-  });
-
   return (
     <GestureHandlerRootView style={tw`flex-1`}>
       <SafeAreaProvider>
         <KeyboardProvider navigationBarTranslucent statusBarTranslucent>
           <PersistQueryClientProvider client={queryClient} persistOptions={persistOptions}>
             <StorageManager>
-              <ApplicationRoutes />
+              <>
+                <ThemeManager />
+                <ApplicationRoutes />
+                <AlertManager />
+                <ToastManager />
+              </>
             </StorageManager>
           </PersistQueryClientProvider>
         </KeyboardProvider>

package/templates/shared/apps/mobile/src/components/atoms/AlertManager/alert-manager.component.tsx

@@ -0,0 +1,134 @@
+import React, { useCallback, useImperativeHandle, useRef, useState } from 'react';
+import { Pressable, View } from 'react-native';
+import { SvgProps } from 'react-native-svg';
+
+import { AlertManagerRef, AlertOptions, AlertVariant } from './alert-manager.types';
+import { Alert } from './alert.service';
+
+import { Modal } from '@/components/atoms';
+import { Typography } from '@/components/atoms/Typography';
+import { AlertTriangleIcon, CheckCircleIcon, InfoIcon, XCircleIcon } from '@/icons';
+import { colors, tw } from '@/tailwind';
+
+type QueuedAlert = AlertOptions & {
+  variant: AlertVariant;
+};
+
+type VariantConfig = {
+  color: string;
+  icon: React.FC<SvgProps>;
+};
+
+const ICON_SIZE = 24;
+
+const VARIANT_CONFIG: Record<AlertVariant, 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 AlertManager() {
+  const [queue, setQueue] = useState<QueuedAlert[]>([]);
+  const ref = useRef<AlertManagerRef>(null);
+
+  const currentAlert = queue[0];
+  const isVisible = !!currentAlert;
+
+  const handleDismiss = useCallback(() => {
+    setQueue((prev) => prev.slice(1));
+  }, []);
+
+  const handleActionPress = useCallback(
+    (onPress?: () => void) => {
+      handleDismiss();
+      onPress?.();
+    },
+    [handleDismiss],
+  );
+
+  useImperativeHandle(ref, () => ({
+    show: (variant: AlertVariant, options: AlertOptions) => {
+      setQueue((prev) => [...prev, { ...options, variant }]);
+    },
+  }));
+
+  React.useEffect(() => {
+    Alert.setRef({
+      show: (variant: AlertVariant, options: AlertOptions) => {
+        setQueue((prev) => [...prev, { ...options, variant }]);
+      },
+    });
+  }, []);
+
+  if (!currentAlert) {
+    return null;
+  }
+
+  const config = VARIANT_CONFIG[currentAlert.variant];
+  const IconComponent = config.icon;
+  const showIcon = !currentAlert.hideIcon;
+  const actions = currentAlert.actions?.length
+    ? currentAlert.actions
+    : [{ label: 'Ok', variant: 'default' as const }];
+
+  return (
+    <Modal isVisible={isVisible} onBackButtonPress={handleDismiss} onBackdropPress={handleDismiss}>
+      <View pointerEvents="box-none" style={tw`flex-1 items-center justify-center`}>
+        <View
+          style={tw`dark:border-divider dark:bg-sheet mx-8 w-[85%] rounded-2xl border border-gray-200 bg-white p-6`}
+        >
+          {/* Icon */}
+          {showIcon && (
+            <View
+              style={tw`dark:bg-surface mb-4 h-10 w-10 items-center justify-center rounded-full bg-gray-100`}
+            >
+              <IconComponent color={config.color} height={ICON_SIZE} width={ICON_SIZE} />
+            </View>
+          )}
+
+          {/* Title */}
+          <Typography style={tw`dark:text-foreground text-lg font-semibold text-gray-900`}>
+            {currentAlert.title}
+          </Typography>
+
+          {/* Message */}
+          {currentAlert.message ? (
+            <Typography style={tw`dark:text-subtitle mt-4 text-sm leading-relaxed text-gray-500`}>
+              {currentAlert.message}
+            </Typography>
+          ) : null}
+
+          {/* Action buttons */}
+          <View style={tw`mt-6 gap-3`}>
+            {actions.map((action) =>
+              action.variant === 'cancel' ? (
+                <Pressable
+                  key={action.label}
+                  style={tw`dark:border-divider dark:bg-surface items-center rounded-xl border border-gray-200 bg-gray-50 py-3.5`}
+                  onPress={() => handleActionPress(action.onPress)}
+                >
+                  <Typography
+                    style={tw`dark:text-foreground text-base font-semibold text-gray-700`}
+                  >
+                    {action.label}
+                  </Typography>
+                </Pressable>
+              ) : (
+                <Pressable
+                  key={action.label}
+                  style={tw`bg-primary-500 items-center rounded-xl py-3.5`}
+                  onPress={() => handleActionPress(action.onPress)}
+                >
+                  <Typography style={tw`text-base font-semibold text-white`}>
+                    {action.label}
+                  </Typography>
+                </Pressable>
+              ),
+            )}
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+}

package/templates/shared/apps/mobile/src/components/atoms/AlertManager/alert-manager.types.ts

@@ -0,0 +1,18 @@
+export type AlertVariant = 'error' | 'info' | 'success' | 'warning';
+
+export type AlertAction = {
+  label: string;
+  onPress?: () => void;
+  variant?: 'cancel' | 'default';
+};
+
+export type AlertOptions = {
+  actions?: AlertAction[];
+  hideIcon?: boolean;
+  message?: string;
+  title: string;
+};
+
+export type AlertManagerRef = {
+  show: (variant: AlertVariant, options: AlertOptions) => void;
+};

package/templates/shared/apps/mobile/src/components/atoms/AlertManager/alert.service.ts

@@ -0,0 +1,27 @@
+import { AlertManagerRef, AlertOptions } from './alert-manager.types';
+
+class AlertService {
+  private static ref: AlertManagerRef | null = null;
+
+  static error(options: AlertOptions) {
+    AlertService.ref?.show('error', options);
+  }
+
+  static info(options: AlertOptions) {
+    AlertService.ref?.show('info', options);
+  }
+
+  static setRef(ref: AlertManagerRef) {
+    AlertService.ref = ref;
+  }
+
+  static success(options: AlertOptions) {
+    AlertService.ref?.show('success', options);
+  }
+
+  static warning(options: AlertOptions) {
+    AlertService.ref?.show('warning', options);
+  }
+}
+
+export { AlertService as Alert };

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

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

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

@@ -24,6 +24,7 @@ export type BottomSheetProps = DefaultComponentProps & {
   enableDynamicSizing?: boolean;
   enablePanDownToClose?: boolean;
   handleComponent?: FC<BottomSheetHandleProps> | null;
+  hasScrollView?: boolean;
   onExpand?: () => void;
   sheetRef: RefObject<BottomSheetModal>;
   snapPoints?: string[];
@@ -83,6 +84,7 @@ export function BottomSheet(props: BottomSheetProps) {
     enableDynamicSizing = false,
     enablePanDownToClose = true,
     handleComponent = BottomSheetHandle,
+    hasScrollView = true,
     sheetRef,
     snapPoints = DEFAULT_SNAP_POINTS,
     style,
@@ -104,11 +106,11 @@ export function BottomSheet(props: BottomSheetProps) {
       ref={sheetRef}
       android_keyboardInputMode="adjustResize"
       backdropComponent={renderBackdrop}
-      backgroundStyle={[tw`bg-gray-50`, backgroundStyle]}
+      backgroundStyle={[tw`dark:bg-sheet bg-white`, backgroundStyle]}
       enableDynamicSizing={enableDynamicSizing}
       enablePanDownToClose={enablePanDownToClose}
       handleComponent={handleComponent}
-      handleIndicatorStyle={tw`bg-gray-50`}
+      handleIndicatorStyle={tw`dark:bg-divider bg-gray-300`}
       handleStyle={tw`rounded-tl-xl rounded-tr-xl`}
       keyboardBehavior="interactive"
       snapPoints={points}
@@ -120,12 +122,16 @@ export function BottomSheet(props: BottomSheetProps) {
         style,
       ]}
     >
-      <BottomSheetScrollView
-        contentContainerStyle={contentContainerStyle}
-        keyboardShouldPersistTaps="handled"
-      >
-        {children}
-      </BottomSheetScrollView>
+      {hasScrollView ? (
+        <BottomSheetScrollView
+          contentContainerStyle={contentContainerStyle}
+          keyboardShouldPersistTaps="handled"
+        >
+          {children}
+        </BottomSheetScrollView>
+      ) : (
+        children
+      )}
     </BottomSheetModal>
   );
 }

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

@@ -64,7 +64,7 @@ export function OutlinedButton(props: Props) {
   return (
     <Button
       {...rest}
-      buttonStyle={tw`border-primary-500 border-2 bg-white`}
+      buttonStyle={tw`border-primary-500 border-2 bg-transparent`}
       textStyle={tw`text-primary-500`}
     />
   );

package/templates/shared/apps/mobile/src/components/atoms/DateModalInput/date-modal-input.component.tsx

@@ -0,0 +1,69 @@
+import dayjs from 'dayjs';
+import React, { ReactNode, useState } from 'react';
+import { StyleProp, TouchableOpacity, ViewStyle } from 'react-native';
+
+import { DatePicker } from '@/components/atoms/DatePicker';
+import { Typography } from '@/components/atoms/Typography';
+import { defaultInputContainerStyle, defaultInputTextStyle, tw } from '@/tailwind';
+
+const DEFAULT_FORMAT = 'MMMM D, YYYY';
+
+type Props = {
+  error?: string;
+  format?: string;
+  maximumDate?: Date;
+  minimumDate?: Date;
+  onChange: (date: Date) => void;
+  placeholder?: string;
+  renderRight?: (value: Date) => ReactNode;
+  value: Date | undefined;
+};
+
+export function DateModalInput(props: Props) {
+  const {
+    error,
+    format = DEFAULT_FORMAT,
+    maximumDate,
+    minimumDate,
+    onChange,
+    placeholder = 'Select a date',
+    renderRight,
+    value,
+  } = props;
+  const [showDatePicker, setShowDatePicker] = useState(false);
+
+  const containerStyle: StyleProp<ViewStyle> = [
+    defaultInputContainerStyle,
+    tw`dark:border-divider dark:bg-surface items-center`,
+    error && tw`border-red-500`,
+  ];
+
+  return (
+    <>
+      <TouchableOpacity
+        activeOpacity={0.7}
+        style={containerStyle}
+        onPress={() => setShowDatePicker(true)}
+      >
+        <Typography
+          style={[defaultInputTextStyle, tw`dark:text-foreground`, !value && tw`text-placeholder`]}
+        >
+          {value ? dayjs(value).format(format) : placeholder}
+        </Typography>
+        {value && renderRight?.(value)}
+      </TouchableOpacity>
+      <DatePicker
+        date={value || new Date()}
+        isVisible={showDatePicker}
+        maximumDate={maximumDate}
+        minimumDate={minimumDate}
+        mode="date"
+        onCancel={() => setShowDatePicker(false)}
+        onConfirm={(selectedDate) => {
+          setShowDatePicker(false);
+          onChange(selectedDate);
+        }}
+      />
+    </>
+  );
+}

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

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

package/templates/shared/apps/mobile/src/components/atoms/DatePicker/date-picker.component.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { TouchableHighlight } from 'react-native';
+import DateTimePickerModal, {
+  ReactNativeModalDateTimePickerProps,
+} from 'react-native-modal-datetime-picker';
+
+import { Typography } from '@/components/atoms/Typography';
+import { useLocalStorageStore } from '@/stores';
+import { colors, tw } from '@/tailwind';
+
+type Props = Omit<ReactNativeModalDateTimePickerProps, 'onCancel' | 'onConfirm'> & {
+  onCancel: () => void;
+  onConfirm: (date: Date) => void;
+};
+
+export function DatePicker(props: Props) {
+  const { onCancel, onConfirm, ...rest } = props;
+  const colorScheme = useLocalStorageStore((s) => s.colorScheme);
+  const isDark = colorScheme === 'dark';
+
+  return (
+    <DateTimePickerModal
+      backdropStyleIOS={tw`bg-black/40`}
+      buttonTextColorIOS={colors.primary[500]}
+      customCancelButtonIOS={({ onPress }) => (
+        <TouchableHighlight
+          style={tw`dark:bg-surface mt-2 items-center rounded-2xl bg-white py-4`}
+          underlayColor={isDark ? colors.background : colors.gray[100]}
+          onPress={onPress}
+        >
+          <Typography style={tw`dark:text-subtitle text-base font-semibold text-gray-500`}>
+            Cancel
+          </Typography>
+        </TouchableHighlight>
+      )}
+      isDarkModeEnabled={isDark}
+      modalStyleIOS={tw`rounded-2xl pb-4`}
+      pickerContainerStyleIOS={tw`dark:bg-sheet items-center justify-center bg-white`}
+      onCancel={onCancel}
+      onConfirm={onConfirm}
+      {...rest}
+    />
+  );
+}

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

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

package/templates/shared/apps/mobile/src/components/atoms/DateTextInput/date-text-input.component.tsx

@@ -0,0 +1,218 @@
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import React, { ReactNode, Ref, useCallback, useEffect, useRef, useState } from 'react';
+import { Pressable, StyleProp, TextInput, ViewStyle } from 'react-native';
+
+import { Typography } from '@/components/atoms/Typography';
+import CONFIG from '@/config';
+import {
+  defaultInputContainerStyle,
+  defaultInputTextStyle,
+  focusedInputStyle,
+  tw,
+} from '@/tailwind';
+
+dayjs.extend(customParseFormat);
+
+const DATE_FORMAT = 'MM/DD/YYYY';
+const GUIDE_TEMPLATE = 'MM/DD/YYYY';
+const MAX_DIGITS = 8;
+const MONTH_SEPARATOR_INDEX = 2;
+const DAY_SEPARATOR_INDEX = 4;
+
+const fontFamily = CONFIG.IS_IOS ? { fontFamily: 'Menlo' } : { fontFamily: 'monospace' };
+
+type Props = {
+  error?: string;
+  onChange: (date: Date | undefined) => void;
+  onValidationError?: (error: string | undefined) => void;
+  ref?: Ref<TextInput>;
+  renderRight?: (date: Date) => ReactNode;
+  value: Date | undefined;
+};
+
+const MONTH_FIRST_DIGIT_INDEX = 0;
+const MONTH_SECOND_DIGIT_INDEX = 1;
+const DAY_FIRST_DIGIT_INDEX = 2;
+const DAY_SECOND_DIGIT_INDEX = 3;
+const YEAR_FIRST_DIGIT_INDEX = 4;
+const MAX_MONTH_FIRST_DIGIT = 1;
+const MAX_DAY_FIRST_DIGIT = 3;
+
+function isDigitValid(digit: string, index: number, previous: string): boolean {
+  const d = Number(digit);
+
+  if (index === MONTH_FIRST_DIGIT_INDEX) {
+    return d <= MAX_MONTH_FIRST_DIGIT;
+  }
+
+  if (index === MONTH_SECOND_DIGIT_INDEX) {
+    return previous[0] === '0' ? d >= 1 : d <= MONTH_SEPARATOR_INDEX;
+  }
+
+  if (index === DAY_FIRST_DIGIT_INDEX) {
+    return d <= MAX_DAY_FIRST_DIGIT;
+  }
+
+  if (index === DAY_SECOND_DIGIT_INDEX) {
+    return previous[MONTH_SEPARATOR_INDEX] === '3' ? d <= 1 : d >= 0;
+  }
+
+  if (index === YEAR_FIRST_DIGIT_INDEX) {
+    return d === 1 || d === MONTH_SEPARATOR_INDEX;
+  }
+
+  return true;
+}
+
+function filterValidDigits(raw: string): string {
+  let result = '';
+
+  for (let i = 0; i < raw.length && result.length < MAX_DIGITS; i += 1) {
+    if (isDigitValid(raw[i], result.length, result)) {
+      result += raw[i];
+    }
+  }
+
+  return result;
+}
+
+function extractDigits(date: Date | undefined): string {
+  if (!date) {
+    return '';
+  }
+
+  return dayjs(date).format(DATE_FORMAT).replace(/\D/g, '');
+}
+
+function buildFilledPortion(digits: string): string {
+  let result = '';
+
+  for (let i = 0; i < digits.length && i < MAX_DIGITS; i += 1) {
+    if (i === MONTH_SEPARATOR_INDEX || i === DAY_SEPARATOR_INDEX) {
+      result += '/';
+    }
+    result += digits[i];
+  }
+
+  return result;
+}
+
+function buildGuideSuffix(digits: string): string {
+  const filled = buildFilledPortion(digits);
+
+  return GUIDE_TEMPLATE.slice(filled.length);
+}
+
+function parseDate(digits: string): Date | undefined {
+  if (digits.length !== MAX_DIGITS) {
+    return undefined;
+  }
+
+  const masked = buildFilledPortion(digits);
+  const parsed = dayjs(masked, DATE_FORMAT, true);
+
+  if (parsed.isValid()) {
+    return parsed.toDate();
+  }
+
+  return undefined;
+}
+
+export function DateTextInput(props: Props) {
+  const { error, onChange, onValidationError, ref, renderRight, value } = props;
+  const [digits, setDigits] = useState(() => extractDigits(value));
+  const [isFocused, setIsFocused] = useState(false);
+  const [invalidDateError, setInvalidDateError] = useState<string | undefined>();
+  const inputRef = useRef<TextInput>(null);
+
+  useEffect(() => {
+    if (!ref) {
+      return;
+    }
+
+    if (typeof ref === 'function') {
+      ref(inputRef.current);
+    } else {
+      (ref as React.MutableRefObject<TextInput | null>).current = inputRef.current;
+    }
+  }, [ref]);
+
+  const filledPortion = buildFilledPortion(digits);
+  const guideSuffix = buildGuideSuffix(digits);
+  const parsedDate = parseDate(digits);
+  const displayError = invalidDateError || error;
+
+  const containerStyle: StyleProp<ViewStyle> = [
+    defaultInputContainerStyle,
+    tw`dark:border-divider dark:bg-surface items-center`,
+    focusedInputStyle(isFocused),
+    displayError && tw`border-red-500`,
+  ];
+
+  const handleChangeText = useCallback(
+    (text: string) => {
+      const rawDigits = text.replace(/\D/g, '');
+      const newDigits = filterValidDigits(rawDigits);
+      setDigits(newDigits);
+
+      if (newDigits.length === MAX_DIGITS) {
+        const masked = buildFilledPortion(newDigits);
+        const parsed = dayjs(masked, DATE_FORMAT, true);
+
+        if (parsed.isValid()) {
+          setInvalidDateError(undefined);
+          onValidationError?.(undefined);
+          onChange(parsed.toDate());
+
+          return;
+        }
+
+        const errorMsg = 'Please enter a valid date';
+        setInvalidDateError(errorMsg);
+        onValidationError?.(errorMsg);
+      } else {
+        setInvalidDateError(undefined);
+        onValidationError?.(undefined);
+      }
+
+      onChange(undefined);
+    },
+    [onChange, onValidationError],
+  );
+
+  const handleBlur = useCallback(() => {
+    setIsFocused(false);
+  }, []);
+
+  const handleFocus = useCallback(() => {
+    setIsFocused(true);
+  }, []);
+
+  const handlePress = useCallback(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  return (
+    <Pressable style={containerStyle} onPress={handlePress}>
+      <TextInput
+        ref={inputRef}
+        keyboardType="number-pad"
+        style={[
+          defaultInputTextStyle,
+          tw`dark:text-foreground`,
+          { ...fontFamily, opacity: 0, position: 'absolute' },
+        ]}
+        value={digits}
+        onBlur={handleBlur}
+        onChangeText={handleChangeText}
+        onFocus={handleFocus}
+      />
+      <Typography style={[defaultInputTextStyle, tw`dark:text-foreground`, fontFamily]}>
+        {filledPortion}
+        <Typography style={[tw`text-placeholder`, { ...fontFamily }]}>{guideSuffix}</Typography>
+      </Typography>
+      {parsedDate && renderRight?.(parsedDate)}
+    </Pressable>
+  );
+}

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

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

package/templates/shared/apps/mobile/src/components/atoms/Divider/divider-component.tsx

@@ -9,5 +9,5 @@ type Props = DefaultComponentProps & {};
 export function Divider(props: Props) {
   const { style } = props;
 
-  return <View style={[tw`h-[1px] w-full bg-gray-200`, style]}></View>;
+  return <View style={[tw`dark:bg-divider h-[1px] w-full bg-gray-200`, style]}></View>;
 }