nx-react-native-cli 1.0.9 → 1.0.10

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

@@ -1,58 +0,0 @@
-/* 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/contents/apps/mobile/src/components/atoms/ScreenLoader/index.ts

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

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

@@ -1,17 +0,0 @@
-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/contents/apps/mobile/src/components/atoms/Skeleton/index.ts

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

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

@@ -1,42 +0,0 @@
-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/contents/apps/mobile/src/components/atoms/Text/index.ts

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

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

@@ -1,23 +0,0 @@
-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/contents/apps/mobile/src/components/atoms/TextInput/constants.ts

@@ -1,43 +0,0 @@
-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/contents/apps/mobile/src/components/atoms/TextInput/index.ts

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

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;