nx-react-native-cli 1.0.8 → 1.0.10

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

@@ -1,137 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

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

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

@@ -1,58 +0,0 @@
-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

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

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

@@ -1,28 +0,0 @@
-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

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

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

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

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

@@ -1,100 +0,0 @@
-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

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

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

@@ -1,71 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

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

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

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

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

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

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

@@ -1,13 +0,0 @@
-/* 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

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

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

@@ -1,17 +0,0 @@
-/* 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

@@ -1,9 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,11 +0,0 @@
-/* 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

@@ -1,27 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,32 +0,0 @@
-/* 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

@@ -1,12 +0,0 @@
-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

@@ -1,11 +0,0 @@
-/* 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), []);
-}