nx-react-native-cli 2.2.0 → 2.3.0

package/templates/apps/mobile/src/components/atoms/TextInput/text-input.component.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import {
+  Pressable,
   TextInput as RNTextInput,
   TextInputProps as RNTextInputProps,
   StyleProp,
@@ -7,20 +8,25 @@ import {
   View,
 } from 'react-native';
 
-import { DefaultNameInputProps } from '@/components/atoms/TextInput/constants';
+import { DefaultNameInputProps } from './constants';
+
 import {
   colors,
   defaultInputContainerStyle,
   defaultInputTextStyle,
   disabledInputStyle,
   focusedInputStyle,
+  tw,
 } from '@/tailwind';
-import { DefaultComponentProps } from '@/types';
+import { DefaultComponentProps } from '@/types/component.type';
+import { CrossIcon } from '@/icons';
 
 export type TextInputProps = DefaultComponentProps &
   RNTextInputProps & {
     textInputRef?: React.RefObject<RNTextInput>;
     textStyle?: StyleProp<TextStyle>;
+    showClearButton?: boolean;
+    onClearButtonPress?: () => void;
   };
 
 export function TextInput(props: TextInputProps) {
@@ -28,25 +34,47 @@ export function TextInput(props: TextInputProps) {
     isDisabled = false,
     multiline = false,
     onChangeText,
+    onClearButtonPress,
     placeholder,
+    showClearButton = true,
     style,
     textInputRef,
     textStyle,
     value,
     ...extraProps
   } = props;
+  const [isClearButtonVisible, setIsClearButtonVisible] = useState<boolean>(false);
   const [isFocused, setFocused] = useState<boolean>(false);
 
   function handleOnChangeText(text: string) {
     onChangeText?.(text);
+
+    if (showClearButton) {
+      setIsClearButtonVisible(text.length > 0);
+    }
+  }
+
+  function handleOnClearPress() {
+    handleOnChangeText?.('');
+    onClearButtonPress?.();
   }
 
   function handleOnFocus() {
     setFocused(true);
+
+    const shouldShowClearButton = showClearButton && value?.length;
+    if (shouldShowClearButton) {
+      setIsClearButtonVisible(true);
+    }
   }
 
   function handleOnBlur() {
     setFocused(false);
+
+    const shouldShowClearButton = showClearButton && value?.length;
+    if (shouldShowClearButton) {
+      setIsClearButtonVisible(false);
+    }
   }
 
   return (
@@ -64,8 +92,8 @@ export function TextInput(props: TextInputProps) {
         editable={!isDisabled}
         multiline={multiline}
         placeholder={placeholder}
-        placeholderTextColor={colors.gray[600]}
-        selectionColor={colors.primary[400]}
+        placeholderTextColor={colors.gray[500]}
+        selectionColor={colors.primary}
         style={[defaultInputTextStyle, textStyle]}
         value={value}
         onBlur={handleOnBlur}
@@ -73,6 +101,16 @@ export function TextInput(props: TextInputProps) {
         onFocus={handleOnFocus}
         {...extraProps}
       />
+      {isClearButtonVisible && (
+        <Pressable
+          hitSlop={30}
+          style={tw`items-center justify-center`}
+          testID="clear-button"
+          onPress={handleOnClearPress}
+        >
+          <CrossIcon style={tw`text-gray-400`} />
+        </Pressable>
+      )}
     </View>
   );
 }

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

@@ -3,6 +3,7 @@ export * from './Button';
 export * from './Divider';
 export * from './ExcludedEdges';
 export * from './InputLayout';
+export * from './KeyboardAccessory';
 export * from './KeyboardAwareScrollView';
 export * from './ListLoadingItem';
 export * from './Modal';

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

@@ -1,4 +1,4 @@
-import { useFocusEffect } from '@react-navigation/core';
+import { useFocusEffect } from '@react-navigation/native';
 import React, { ReactElement } from 'react';
 import {
   NativeScrollEvent,
@@ -11,7 +11,7 @@ import {
   View,
   ViewStyle,
 } from 'react-native';
-import { KeyboardAwareScrollView as RNKeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
+import { ScrollView as RNScrollView } from 'react-native-gesture-handler';
 import { Edge, SafeAreaProviderProps, SafeAreaView } from 'react-native-safe-area-context';
 
 import { KeyboardAwareScrollView } from '@/components';
@@ -20,7 +20,7 @@ import { tw } from '@/tailwind';
 
 type Props = SafeAreaProviderProps & {
   barStyle?: StatusBarStyle;
-  scrollViewRef?: React.RefObject<RNKeyboardAwareScrollView | null>;
+  scrollViewRef?: React.RefObject<RNScrollView | null>;
   containerStyle?: StyleProp<ViewStyle>;
   excludedEdges?: Edge[];
   extraBottomPadding?: number;

package/templates/apps/mobile/src/hooks/useDebounce.hook.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { debounce, DebouncedFunc } from 'lodash';
+import { debounce, DebouncedFunc } from 'lodash-es';
 import { useCallback } from 'react';
 
 export function useDebounce<T extends (...args: any[]) => any>(

package/templates/apps/mobile/src/hooks/useThrottle.hook.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { throttle, DebouncedFunc } from 'lodash';
+import { throttle, DebouncedFunc } from 'lodash-es';
 import { useCallback } from 'react';
 
 export function useThrottle<T extends (...args: any[]) => any>(

package/templates/apps/mobile/src/icons/cross.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 0.875C3.84231 0.875 0.875 3.84231 0.875 7.5C0.875 11.1577 3.84231 14.125 7.5 14.125C11.1577 14.125 14.125 11.1577 14.125 7.5C14.125 3.84231 11.1577 0.875 7.5 0.875ZM5.85355 5.14645C5.65829 4.95118 5.34171 4.95118 5.14645 5.14645C4.95118 5.34171 4.95118 5.65829 5.14645 5.85355L6.79289 7.5L5.14645 9.14645C4.95118 9.34171 4.95118 9.65829 5.14645 9.85355C5.34171 10.0488 5.65829 10.0488 5.85355 9.85355L7.5 8.20711L9.14645 9.85355C9.34171 10.0488 9.65829 10.0488 9.85355 9.85355C10.0488 9.65829 10.0488 9.34171 9.85355 9.14645L8.20711 7.5L9.85355 5.85355C10.0488 5.65829 10.0488 5.34171 9.85355 5.14645C9.65829 4.95118 9.34171 4.95118 9.14645 5.14645L7.5 6.79289L5.85355 5.14645Z" fill="currentColor"/>
+</svg>

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

@@ -1,4 +1,6 @@
 import ArrowLeftIcon from './arrow-left.svg';
+import CrossIcon from './cross.svg';
 import GearIcon from './gear.svg';
+import KeyboardHideIcon from './keyboard-hide.svg';
 
-export { ArrowLeftIcon, GearIcon };
+export { ArrowLeftIcon, CrossIcon, GearIcon, KeyboardHideIcon };

package/templates/apps/mobile/src/icons/keyboard-hide.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -960 960 960"><path d="M480-40 320-200h320zM160-280q-33 0-56.5-23.5T80-360v-400q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v400q0 33-23.5 56.5T800-280zm0-80h640v-400H160zm160-40h320v-80H320zM200-520h80v-80h-80zm120 0h80v-80h-80zm120 0h80v-80h-80zm120 0h80v-80h-80zm120 0h80v-80h-80zM200-640h80v-80h-80zm120 0h80v-80h-80zm120 0h80v-80h-80zm120 0h80v-80h-80zm120 0h80v-80h-80zM160-360v-400z" fill="currentColor"/></svg>

package/templates/apps/mobile/src/stores/mmkvStorage.ts

@@ -1,9 +1,9 @@
-import { MMKV } from 'react-native-mmkv';
+import { createMMKV } from 'react-native-mmkv';
 import { StateStorage } from 'zustand/middleware';
 
 import CONFIG from '@/config';
 
-const storage = new MMKV({
+const storage = createMMKV({
   encryptionKey: CONFIG.STORAGE_KEY,
   id: 'mmkv',
 });
@@ -14,6 +14,6 @@ export const MmkvStorage: StateStorage = {
 
     return value ?? null;
   },
-  removeItem: (name) => storage.delete(name),
+  removeItem: (name) => storage.remove(name),
   setItem: (name, value) => storage.set(name, value),
 };

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

@@ -58,14 +58,14 @@ export const tw = create({
 
 export const errorContainerStyle = (err: boolean) => err && tw`border-red-600`;
 
-export const disabledInputStyle = (isDisabled: boolean) => isDisabled && tw`opacity-20`;
+export const disabledInputStyle = (isDisabled: boolean) => isDisabled && tw`opacity-50`;
 
-export const focusedInputStyle = (isFocused: boolean) => isFocused && tw`border-primary-400`;
+export const focusedInputStyle = (isFocused: boolean) => isFocused && tw``;
 
 export const errorTextStyle = (err: boolean) => err && tw`text-red-600`;
 
-export const defaultInputContainerStyle = tw`rounded-xl border border-gray-900 px-3`;
-export const defaultInputTextStyle = tw`py-2 font-normal text-gray-950`;
+export const defaultInputContainerStyle = tw`flex-row rounded-xl border border-gray-900 p-3`;
+export const defaultInputTextStyle = tw`flex-1 font-normal text-gray-950`;
 
 export const colors = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/templates/apps/mobile/tsconfig.app.json

@@ -3,13 +3,13 @@
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "strict": true,
-    "types": ["node"],
+    "types": ["node", "jest"],
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"]
     }
   },
   "files": ["../../node_modules/@nx/react-native/typings/svg.d.ts"],
-  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.spec.tsx", "test-setup.ts"],
+  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.spec.tsx", "**/testHelpers", "**/__mocks__", "**/__fixtures__", "**/node_modules", "**/Pods", "test-setup.ts"],
   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx"]
 }

package/templates/clean-generated-outputs.sh

@@ -3,18 +3,31 @@
 # Clean generated outputs
 echo "Cleaning generated outputs..."
 
-
 root_node_modules_path="node_modules"
 app_rn_name="mobile"
-app_rn_android_path="apps/$app_rn_name/android"
-app_rn_android_gradle_path="$app_rn_android_path/.gradle"
-app_rn_node_modules_path="apps/$app_rn_name/node_modules"
+app_rn_android_gradle_path="apps/$app_rn_name/android/.gradle"
+app_rn_android_build_path="apps/$app_rn_name/android/build"
+app_rn_android_cxx_path="apps/$app_rn_name/android/app/.cxx"
+app_rn_android_cxx_build_path="apps/$app_rn_name/android/app/build"
+app_rn_node_modules_path="node_modules"
 app_rn_ios_pods_path="apps/$app_rn_name/ios/Pods"
 app_rn_ios_build_path="apps/$app_rn_name/ios/build"
 
+echo "Deleting root $root_build_path..."
+rm -rf "$root_build_path"
+
 echo "Deleting root $root_node_modules_path..."
 rm -rf "$root_node_modules_path"
 
+echo "Deleting $app_rn_android_build_path..."
+rm -rf "$app_rn_android_build_path"
+
+echo "Deleting $app_rn_android_cxx_path..."
+rm -rf "$app_rn_android_cxx_path"
+
+echo "Deleting $app_rn_android_cxx_build_path..."
+rm -rf "$app_rn_android_cxx_build_path"
+
 echo "Deleting $app_rn_node_modules_path..."
 rm -rf "$app_rn_node_modules_path"
 
@@ -27,6 +40,10 @@ rm -rf "$app_rn_ios_build_path"
 echo "Deleting $app_rn_android_gradle_path..."
 rm -rf "$app_rn_android_gradle_path"
 
+echo "Installing dependencies..."
 yarn install
 
-echo "Done!"
+echo "Installing pods..."
+yarn run pod-install
+
+echo "Done!"