nx-react-native-cli 1.0.10 → 1.0.12

package/templates/apps/mobile/src/components/atoms/Modal/modal.component.tsx

@@ -0,0 +1,58 @@
+/* eslint-disable no-magic-numbers */
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+import React, { ReactNode, useCallback, useState } from 'react';
+import { Keyboard, ModalBaseProps, StyleProp, View, ViewStyle } from 'react-native';
+import RNModal from 'react-native-modal';
+
+import { tw } from '../../../tailwind';
+import { DefaultComponentProps } from '../../../types';
+
+export type ModalProps = DefaultComponentProps &
+  ModalBaseProps & {
+    children?: ReactNode;
+    containerStyle?: StyleProp<ViewStyle>;
+    isVisible: boolean;
+    onBackdropPress?: () => void;
+    onBackButtonPress?: () => void;
+  };
+
+const backdropColor = 'rgba(0, 0, 0, 0.6)';
+
+export function Modal(props: ModalProps) {
+  const { children, containerStyle, isVisible, onBackButtonPress, onBackdropPress, style } = props;
+
+  return (
+    <RNModal
+      backdropColor={backdropColor}
+      backdropTransitionOutTiming={0}
+      isVisible={isVisible}
+      style={[tw`m-0 w-full`, style]}
+      onBackButtonPress={onBackButtonPress}
+      onBackdropPress={onBackdropPress}
+    >
+      <BottomSheetModalProvider>
+        <View style={[tw`px-4`, containerStyle]}>{children}</View>
+      </BottomSheetModalProvider>
+    </RNModal>
+  );
+}
+
+export function useModal() {
+  const [isVisible, setVisible] = useState<boolean>(false);
+
+  const showModal = useCallback(() => {
+    Keyboard.dismiss();
+    setVisible(true);
+  }, []);
+
+  const hideModal = useCallback(() => {
+    Keyboard.dismiss();
+    setVisible(false);
+  }, []);
+
+  return {
+    hideModal,
+    isVisible,
+    showModal,
+  };
+}

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

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

package/templates/apps/mobile/src/components/atoms/ScreenLoader/screen-loader.component.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ActivityIndicator, View } from 'react-native';
+
+import { colors, tw } from '../../../tailwind';
+import { DefaultComponentProps } from '../../../types/component.type';
+
+type Props = DefaultComponentProps;
+
+export function ScreenLoader(props: Props): JSX.Element {
+  const { style } = props;
+
+  return (
+    <View style={[tw`h-full w-full items-center justify-center bg-gray-50 p-8`, style]}>
+      <ActivityIndicator color={colors.primary[400]} />
+    </View>
+  );
+}

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

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

package/templates/apps/mobile/src/components/atoms/Skeleton/skeleton.component.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { View } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { tw } from '../../../tailwind';
+
+interface Props {
+  children: React.ReactNode;
+  isLoading: boolean;
+}
+
+export function Skeleton(props: Props) {
+  const { children, isLoading } = props;
+  const opacity = useSharedValue(1);
+
+  const animatedStyle = useAnimatedStyle(
+    () => ({
+      opacity: withRepeat(withTiming(opacity.value, { duration: 500 }), -1, true),
+    }),
+    [],
+  );
+
+  React.useEffect(() => {
+    opacity.value = 0.5; // Start the animation
+  }, []);
+
+  if (!isLoading) {
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return <>{children}</>;
+  }
+
+  return (
+    <Animated.View style={[tw`rounded-lg bg-gray-200`, animatedStyle]}>
+      <View style={tw`opacity-0`}>{children}</View>
+    </Animated.View>
+  );
+}

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

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

package/templates/apps/mobile/src/components/atoms/Text/text.component.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Text as RNText, TextProps } from 'react-native';
+
+import { tw } from '../../../tailwind';
+
+type Props = TextProps & {
+  numberOfLines?: number;
+};
+
+export function Text(props: Props): JSX.Element {
+  const { numberOfLines = 0, style, ...extraProps } = props;
+
+  const shouldTruncateTextProps: TextProps =
+    numberOfLines > 0 ? { ellipsizeMode: 'tail', numberOfLines } : {};
+
+  return (
+    <RNText
+      {...shouldTruncateTextProps}
+      style={[tw`text-black-950 font-sans text-base font-normal`, style]}
+      {...extraProps}
+    />
+  );
+}

package/templates/apps/mobile/src/components/atoms/TextInput/constants.ts

@@ -0,0 +1,43 @@
+import { TextInputProps } from 'react-native';
+
+export const DefaultPhonePadInputProps: TextInputProps = {
+  autoCapitalize: 'none',
+  autoCorrect: false,
+  keyboardType: 'phone-pad',
+  numberOfLines: 1,
+};
+
+export const DefaultNumberPadInputProps: TextInputProps = {
+  autoCapitalize: 'none',
+  autoCorrect: false,
+  keyboardType: 'number-pad',
+  numberOfLines: 1,
+};
+
+export const DefaultNumericInputProps: TextInputProps = {
+  autoCapitalize: 'none',
+  autoCorrect: false,
+  keyboardType: 'numeric',
+  numberOfLines: 1,
+};
+
+export const DefaultNameInputProps: TextInputProps = {
+  autoCapitalize: 'words',
+  autoCorrect: false,
+  keyboardType: 'default',
+  numberOfLines: 1,
+};
+
+export const DefaultEmailInputProps: TextInputProps = {
+  autoCapitalize: 'none',
+  autoCorrect: false,
+  keyboardType: 'email-address',
+  numberOfLines: 1,
+};
+
+export const DefaultTextAreaInputProps: TextInputProps = {
+  autoCapitalize: 'sentences',
+  autoCorrect: false,
+  keyboardType: 'default',
+  numberOfLines: 3,
+};

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

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

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

@@ -0,0 +1,137 @@
+import React, { useEffect, useState } from 'react';
+import {
+  TextInput as RNTextInput,
+  TextInputProps as RNTextInputProps,
+  StyleProp,
+  TextStyle,
+  View,
+} from 'react-native';
+
+import {
+  colors,
+  defaultInputContainerStyle,
+  defaultInputTextStyle,
+  disabledInputStyle,
+  focusedInputStyle,
+} from '../../../tailwind';
+import { DefaultInputComponentProps } from '../../../types';
+
+import { DefaultNameInputProps, DefaultTextAreaInputProps } from './constants';
+
+export const TEXT_INPUT_MIN_HEIGHT = 100;
+export const TEXT_INPUT_LINE_HEIGHT = 21;
+
+export function getTextInputHeightAdjustment(numberOfNewLines: number) {
+  if (numberOfNewLines < 2) {
+    return TEXT_INPUT_MIN_HEIGHT;
+  }
+
+  return TEXT_INPUT_MIN_HEIGHT + (numberOfNewLines - 2) * TEXT_INPUT_LINE_HEIGHT;
+}
+
+export type TextInputProps = DefaultInputComponentProps<string> &
+  RNTextInputProps & {
+    textInputRef?: React.RefObject<RNTextInput>;
+    textStyle?: StyleProp<TextStyle>;
+  };
+
+export function TextInput(props: TextInputProps) {
+  const {
+    isDisabled = false,
+    multiline = false,
+    onChangeText,
+    placeholder,
+    style,
+    textInputRef,
+    textStyle,
+    value,
+    ...extraProps
+  } = props;
+  const [isFocused, setFocused] = useState<boolean>(false);
+
+  function handleOnChangeText(text: string) {
+    onChangeText?.(text);
+  }
+
+  function handleOnFocus() {
+    setFocused(true);
+  }
+
+  function handleOnBlur() {
+    setFocused(false);
+  }
+
+  return (
+    <View
+      style={[
+        defaultInputContainerStyle,
+        focusedInputStyle(isFocused),
+        disabledInputStyle(isDisabled),
+        style,
+      ]}
+    >
+      <RNTextInput
+        {...DefaultNameInputProps}
+        ref={textInputRef}
+        editable={!isDisabled}
+        multiline={multiline}
+        placeholder={placeholder}
+        placeholderTextColor={colors.gray[600]}
+        selectionColor={colors.primary[400]}
+        style={[defaultInputTextStyle, textStyle]}
+        value={value}
+        onBlur={handleOnBlur}
+        onChangeText={handleOnChangeText}
+        onFocus={handleOnFocus}
+        {...extraProps}
+      />
+    </View>
+  );
+}
+
+export function TextInputArea(props: TextInputProps) {
+  const {
+    numberOfLines = DefaultTextAreaInputProps.numberOfLines as number,
+    onChangeText,
+    textStyle,
+    value,
+    ...extraProps
+  } = props;
+  const [numberOfNewLines, setNumberOfNewLines] = useState<number>(numberOfLines);
+
+  function handleOnChangeText(text: string) {
+    onChangeText?.(text);
+  }
+  useEffect(() => {
+    if (!value) {
+      return;
+    }
+
+    const newLines = value.split(/\r\n|\r|\n/).length;
+
+    if (numberOfNewLines !== newLines) {
+      setNumberOfNewLines(newLines);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
+  return (
+    <TextInput
+      {...DefaultTextAreaInputProps}
+      multiline
+      numberOfLines={numberOfLines}
+      textStyle={[
+        textStyle,
+        {
+          height: getTextInputHeightAdjustment(numberOfNewLines),
+          minHeight: TEXT_INPUT_MIN_HEIGHT,
+          textAlignVertical: 'top',
+        },
+      ]}
+      value={value}
+      onChangeText={handleOnChangeText}
+      {...extraProps}
+    />
+  );
+}

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

@@ -0,0 +1,10 @@
+export * from './BottomSheet';
+export * from './Button';
+export * from './Divider';
+export * from './InputLayout';
+export * from './ListLoadingItem';
+export * from './Modal';
+export * from './ScreenLoader';
+export * from './Skeleton';
+export * from './Text';
+export * from './TextInput';

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

@@ -0,0 +1,3 @@
+export * from './atoms';
+export * from './molecules';
+export * from './organisms';

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

@@ -0,0 +1,58 @@
+import { useBackHandler } from '@react-native-community/hooks';
+import { ParamListBase } from '@react-navigation/native';
+import React from 'react';
+import {
+  GestureResponderEvent,
+  PressableProps,
+  StyleProp,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+import { useNavigation } from '../../../hooks';
+import { ArrowLeftIcon } from '../../../icons';
+import { Screens } from '../../../routes';
+import { tw } from '../../../tailwind';
+import { DefaultComponentProps } from '../../../types/component.type';
+
+type Props = DefaultComponentProps &
+  PressableProps & {
+    fallbackRoute?: Screens;
+    onPress?: (event?: GestureResponderEvent) => void;
+    style?: StyleProp<ViewStyle>;
+  };
+
+const ACTIVE_OPACITY = 0.5;
+export function BackButton(props: Props): JSX.Element {
+  const { fallbackRoute, onPress, style } = props;
+  const navigation = useNavigation<ParamListBase>();
+
+  useBackHandler(() => {
+    handleOnPress();
+
+    return true;
+  });
+
+  const handleOnPress = (event?: GestureResponderEvent) => {
+    if (onPress) {
+      onPress(event);
+    } else if (navigation.canGoBack()) {
+      navigation.goBack();
+    } else if (fallbackRoute) {
+      navigation.replace(fallbackRoute);
+    }
+  };
+
+  return (
+    <TouchableOpacity
+      activeOpacity={ACTIVE_OPACITY}
+      style={[tw`h-[48px] w-[48px]`, style]}
+      onPress={handleOnPress}
+    >
+      <View style={[tw`flex-1 items-center justify-center rounded-full`, style]}>
+        <ArrowLeftIcon style={tw`text-gray-950`} />
+      </View>
+    </TouchableOpacity>
+  );
+}

package/templates/apps/mobile/src/components/molecules/BackButton/index.ts

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

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ViewProps } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { tw } from '../../../tailwind';
+import { DefaultComponentProps } from '../../../types';
+
+type Props = DefaultComponentProps &
+  ViewProps & {
+    children: React.ReactNode;
+  };
+
+export function BottomActionsContainer(props: Props) {
+  const { children, style, ...rest } = 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,
+      ]}
+      {...rest}
+    >
+      {children}
+    </SafeAreaView>
+  );
+}

package/templates/apps/mobile/src/components/molecules/BottomActionsContainer/index.ts

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

package/templates/apps/mobile/src/components/molecules/ScreenContainer/index.ts

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

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

@@ -0,0 +1,100 @@
+import { useFocusEffect } from '@react-navigation/core';
+import React, { ReactElement, useEffect } from 'react';
+import {
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  Platform,
+  StatusBar,
+  StyleProp,
+  View,
+  ViewStyle,
+} from 'react-native';
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
+import Animated from 'react-native-reanimated';
+import { Edge, SafeAreaProviderProps, SafeAreaView } from 'react-native-safe-area-context';
+
+import CONFIG from '../../../config';
+import { tw } from '../../../tailwind';
+
+type Props = SafeAreaProviderProps & {
+  containerStyle?: StyleProp<ViewStyle>;
+  excludedEdges?: Edge[];
+  extraBottomPadding?: number;
+  hasScroll?: boolean;
+  refreshControl?: ReactElement;
+  shouldShowStatusBar?: boolean;
+  shouldBeTranslucent?: boolean;
+  statusBarColor?: string;
+  onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+};
+
+const defaultStyle = tw.style('grow', {
+  paddingTop: StatusBar.currentHeight ? StatusBar.currentHeight - 1 : 0,
+});
+
+const safeAreaViewEdges: Edge[] = Platform.select({
+  android: ['left', 'right', 'bottom'],
+  default: [],
+  ios: ['left', 'right', 'bottom', 'top'],
+});
+
+const AnimatedKeyboardAwareScrollView = Animated.createAnimatedComponent(KeyboardAwareScrollView);
+
+export function ScreenContainer(props: Props): JSX.Element {
+  const {
+    children,
+    containerStyle,
+    excludedEdges = [],
+    extraBottomPadding = 0,
+    hasScroll = true,
+    onScroll,
+    refreshControl,
+    shouldBeTranslucent = false,
+    shouldShowStatusBar = true,
+    statusBarColor = 'transparent',
+    style,
+  } = props;
+  const edges =
+    excludedEdges.length > 0
+      ? safeAreaViewEdges.filter((edge) => !excludedEdges.includes(edge))
+      : safeAreaViewEdges;
+
+  useEffect(() => {
+    if (CONFIG.IS_ANDROID) {
+      StatusBar.setBackgroundColor(statusBarColor);
+    }
+  }, [statusBarColor]);
+
+  useFocusEffect(() => {
+    StatusBar.setHidden(!shouldShowStatusBar);
+    if (CONFIG.IS_ANDROID) {
+      StatusBar.setBackgroundColor(statusBarColor);
+      StatusBar.setTranslucent(!shouldBeTranslucent);
+    }
+  });
+
+  const defaultContainerStyle = [
+    defaultStyle,
+    containerStyle,
+    // eslint-disable-next-line no-magic-numbers
+    extraBottomPadding && tw`pb-[${extraBottomPadding + 50}px]`,
+  ];
+
+  return (
+    <SafeAreaView edges={edges} style={[tw`flex-1 bg-gray-50`, style]}>
+      {hasScroll ? (
+        <AnimatedKeyboardAwareScrollView
+          contentContainerStyle={defaultContainerStyle}
+          keyboardShouldPersistTaps="handled"
+          refreshControl={refreshControl}
+          scrollEventThrottle={16}
+          onScroll={onScroll}
+        >
+          {children}
+        </AnimatedKeyboardAwareScrollView>
+      ) : (
+        <View style={defaultContainerStyle}>{children}</View>
+      )}
+    </SafeAreaView>
+  );
+}

package/templates/apps/mobile/src/components/molecules/ScreenHeader/index.ts

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

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

@@ -0,0 +1,71 @@
+import React, { ReactNode } from 'react';
+import { StyleProp, TouchableOpacity, View, ViewStyle } from 'react-native';
+
+import { GearIcon } from '../../../icons';
+import { tw } from '../../../tailwind';
+import { DefaultComponentProps } from '../../../types/component.type';
+import { Text } from '../../atoms/Text';
+import { BackButton } from '../BackButton';
+
+type Props = DefaultComponentProps & {
+  hasBackButton?: boolean;
+  extraActionComponent?: ReactNode;
+  shouldShowBorder?: boolean;
+  title: string;
+  titleStyle?: StyleProp<ViewStyle>;
+  onBackPress?: () => void;
+  onExtraActionPress?: () => void;
+};
+
+const ACTIVE_OPACITY = 0.5;
+export function ScreenHeader(props: Props) {
+  const {
+    extraActionComponent,
+    hasBackButton = true,
+    onBackPress,
+    onExtraActionPress,
+    shouldShowBorder = false,
+    style,
+    title,
+    titleStyle,
+  } = props;
+
+  const hasExtraActionComponent = onExtraActionPress;
+  const extraActionComponentDisplay = hasExtraActionComponent && (
+    <TouchableOpacity
+      activeOpacity={ACTIVE_OPACITY}
+      style={tw`z-10 h-[48px] w-[48px]`}
+      onPress={onExtraActionPress}
+    >
+      <View style={[tw`flex-1 items-center justify-center rounded-full`, style]}>
+        {extraActionComponent ? (
+          extraActionComponent
+        ) : (
+          <GearIcon height={25} style={tw`text-black-950`} width={25} />
+        )}
+      </View>
+    </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]`,
+        ]}
+      >
+        {hasBackButton && <BackButton style={tw`z-10`} onPress={onBackPress} />}
+        <Text
+          style={[
+            tw`text-primary-700 absolute inset-x-0 top-4 text-center text-xl font-medium`,
+            titleStyle,
+          ]}
+        >
+          {title}
+        </Text>
+        {extraActionComponentDisplay}
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+
+import { useLocalStorageState } from '../../../stores';
+
+type Props = {
+  children: ReactNode;
+};
+
+export function StorageManager(props: Props) {
+  const { children } = props;
+  const hasHydrated = useLocalStorageState((state) => state._hasHydrated);
+
+  if (!hasHydrated) {
+    return null;
+  }
+
+  return children;
+}

package/templates/apps/mobile/src/components/molecules/StorageManager/index.ts

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

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

@@ -0,0 +1,5 @@
+export * from './BackButton';
+export * from './BottomActionsContainer';
+export * from './ScreenContainer';
+export * from './ScreenHeader';
+export * from './StorageManager';

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

@@ -0,0 +1 @@
+export default {};

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

@@ -0,0 +1,13 @@
+/* eslint-disable import/no-unresolved */
+import { API_BASE_URL, IS_LIVE, STORAGE_KEY } from '@env';
+import { Platform } from 'react-native';
+
+const CONFIG = {
+  API_BASE_URL: API_BASE_URL,
+  IS_ANDROID: Platform.OS === 'android',
+  IS_IOS: Platform.OS === 'ios',
+  IS_LIVE: IS_LIVE,
+  STORAGE_KEY: STORAGE_KEY,
+};
+
+export default CONFIG;

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

@@ -0,0 +1 @@
+export const HEADER_HEIGHT = 110;