nx-react-native-cli 1.0.7 → 1.0.8

package/contents/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/contents/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/contents/apps/mobile/src/components/index.ts

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

package/contents/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/contents/apps/mobile/src/components/molecules/BackButton/index.ts

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

package/contents/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/contents/apps/mobile/src/components/molecules/BottomActionsContainer/index.ts

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

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

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

package/contents/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/contents/apps/mobile/src/components/molecules/ScreenHeader/index.ts

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

package/contents/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/contents/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/contents/apps/mobile/src/components/molecules/StorageManager/index.ts

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

package/contents/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/contents/apps/mobile/src/components/organisms/index.ts

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

package/contents/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/contents/apps/mobile/src/dimens/index.ts

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

package/contents/apps/mobile/src/env.d.ts

@@ -0,0 +1,17 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+declare module '@env' {
+  export const IS_LIVE: any;
+  export const STORAGE_KEY: any;
+  export const API_BASE_URL: any;
+}
+declare module '*.svg' {
+  import React from 'react';
+  import { SvgProps } from 'react-native-svg';
+  const content: React.FC<SvgProps>;
+  export default content;
+}
+
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.config';
+declare module 'twrnc';

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

@@ -0,0 +1,9 @@
+export * from './useAppState.hook';
+export * from './useApplicationDimensions.hook';
+export * from './useDebounce.hook';
+export * from './useGetLayoutHeight.hook';
+export * from './useGetLayoutWidth.hook';
+export * from './useNavigation.hook';
+export * from './useShakeAnimation.hook';
+export * from './useTextInputChangeFocus.hook';
+export * from './useThrottle.hook';

package/contents/apps/mobile/src/hooks/useAppState.hook.tsx

@@ -0,0 +1,20 @@
+import { useEffect, useRef, useState } from 'react';
+import { AppState } from 'react-native';
+
+export function useAppState() {
+  const appState = useRef(AppState.currentState);
+  const [appStateVisible, setAppStateVisible] = useState<boolean>(appState.current === 'active');
+
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', (nextAppState) => {
+      appState.current = nextAppState;
+      setAppStateVisible(appState.current === 'active');
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  return appStateVisible;
+}

package/contents/apps/mobile/src/hooks/useApplicationDimensions.hook.tsx

@@ -0,0 +1,10 @@
+import { StatusBar, useWindowDimensions } from 'react-native';
+
+export function useApplicationDimensions() {
+  const { height, width } = useWindowDimensions();
+
+  return {
+    height: height + (StatusBar?.currentHeight || 0),
+    width,
+  };
+}

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

@@ -0,0 +1,11 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { debounce, DebouncedFunc } from 'lodash';
+import { useCallback } from 'react';
+
+export function useDebounce<T extends (...args: any[]) => any>(
+  func: T,
+  delay: number,
+): DebouncedFunc<T> {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return useCallback(debounce<T>(func, delay), []);
+}

package/contents/apps/mobile/src/hooks/useGetLayoutHeight.hook.tsx

@@ -0,0 +1,27 @@
+import { useState } from 'react';
+import { LayoutChangeEvent } from 'react-native';
+
+import { useDebounce } from './useDebounce.hook';
+
+export function useGetLayoutHeight(
+  initialHeight = 0,
+): [number, (event: LayoutChangeEvent) => void, number] {
+  const [actualHeight, setLayoutActualHeight] = useState<number>(0);
+  const debouncedOnSetActualHeight = useDebounce(setLayoutActualHeight, 1);
+
+  const [layoutHeight, setLayoutHeight] = useState<number>(initialHeight);
+  const debouncedOnSetHeight = useDebounce(setLayoutHeight, 1);
+
+  function onLayout(event: LayoutChangeEvent) {
+    const { height } = event.nativeEvent.layout;
+
+    if (height === 0 && height <= initialHeight) {
+      return;
+    }
+
+    debouncedOnSetActualHeight(Math.round(height));
+    debouncedOnSetHeight(Math.round(height));
+  }
+
+  return [layoutHeight, onLayout, actualHeight];
+}

package/contents/apps/mobile/src/hooks/useGetLayoutWidth.hook.tsx

@@ -0,0 +1,27 @@
+import { useState } from 'react';
+import { LayoutChangeEvent } from 'react-native';
+
+import { useDebounce } from './useDebounce.hook';
+
+export function useGetLayoutWidth(
+  initialWidth = 0,
+): [number, (event: LayoutChangeEvent) => void, number] {
+  const [actualWidth, setLayoutActualWidth] = useState<number>(0);
+  const debouncedOnSetActualWidth = useDebounce(setLayoutActualWidth, 1);
+
+  const [layoutWidth, setLayoutWidth] = useState<number>(initialWidth);
+  const debouncedOnSetWidth = useDebounce(setLayoutWidth, 1);
+
+  function onLayout(event: LayoutChangeEvent) {
+    const { width } = event.nativeEvent.layout;
+
+    if (width === 0 && width <= initialWidth) {
+      return;
+    }
+
+    debouncedOnSetActualWidth(Math.round(width));
+    debouncedOnSetWidth(Math.round(width));
+  }
+
+  return [layoutWidth, onLayout, actualWidth];
+}

package/contents/apps/mobile/src/hooks/useNavigation.hook.tsx

@@ -0,0 +1,8 @@
+import { ParamListBase, useNavigation as RNUseNavigation } from '@react-navigation/native';
+import { StackNavigationProp } from '@react-navigation/stack';
+
+import { PrivateStackParams, PublicStackParams } from '../routes';
+
+export function useNavigation<T extends PublicStackParams | PrivateStackParams | ParamListBase>() {
+  return RNUseNavigation<StackNavigationProp<T, keyof T>>();
+}

package/contents/apps/mobile/src/hooks/useShakeAnimation.hook.tsx

@@ -0,0 +1,32 @@
+/* eslint-disable no-magic-numbers */
+import {
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+
+export function useShakeAnimation() {
+  const shake = useSharedValue(0);
+
+  const startAnimation = () => {
+    shake.value = withRepeat(
+      withSequence(
+        withTiming(-10, { duration: 50 }),
+        withTiming(10, { duration: 50 }),
+        withTiming(-10, { duration: 50 }),
+        withTiming(10, { duration: 50 }),
+        withTiming(0, { duration: 50 }),
+      ),
+      1,
+      false,
+    );
+  };
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: shake.value }],
+  }));
+
+  return { animatedStyle, startAnimation };
+}

package/contents/apps/mobile/src/hooks/useTextInputChangeFocus.hook.tsx

@@ -0,0 +1,12 @@
+import React, { useRef } from 'react';
+import { TextInput } from 'react-native';
+
+export function useTextInputChangeFocus(): [React.MutableRefObject<TextInput>, () => void] {
+  const ref = useRef() as React.MutableRefObject<TextInput>;
+
+  function changeFocus() {
+    ref?.current?.focus();
+  }
+
+  return [ref, changeFocus];
+}

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

@@ -0,0 +1,11 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { throttle, DebouncedFunc } from 'lodash';
+import { useCallback } from 'react';
+
+export function useThrottle<T extends (...args: any[]) => any>(
+  func: T,
+  delay: number,
+): DebouncedFunc<T> {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return useCallback(throttle<T>(func, delay), []);
+}