nx-react-native-cli 1.0.8 → 1.0.10

package/contents/apps/mobile/src/components/atoms/BottomSheet/bottom-sheet.component.tsx

@@ -1,145 +0,0 @@
-/* eslint-disable no-magic-numbers */
-import {
-  BottomSheetBackdropProps,
-  BottomSheetHandle,
-  BottomSheetHandleProps,
-  BottomSheetModal,
-  BottomSheetScrollView,
-} from '@gorhom/bottom-sheet';
-import React, { FC, ReactNode, RefObject, useCallback, useMemo, useRef } from 'react';
-import { Keyboard, StyleProp, ViewStyle } from 'react-native';
-import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
-import Animated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
-
-import { tw } from '../../../tailwind';
-import { DefaultComponentProps } from '../../../types';
-
-export type BottomSheetProps = DefaultComponentProps & {
-  backgroundStyle?: StyleProp<Omit<ViewStyle, 'left' | 'right' | 'position' | 'top' | 'bottom'>>;
-  children?: ReactNode;
-  contentContainerStyle?: StyleProp<ViewStyle>;
-  enableDismissOnPressBackdrop?: boolean;
-  enableDynamicSizing?: boolean;
-  enablePanDownToClose?: boolean;
-  handleComponent?: FC<BottomSheetHandleProps> | null;
-  onExpand?: () => void;
-  sheetRef: RefObject<BottomSheetModal>;
-  snapPoints?: string[];
-};
-
-const DEFAULT_SNAP_POINTS = ['25%', '50%', '100%'];
-
-const CustomBackdrop = ({
-  animatedIndex,
-  enableDismissOnPressBackdrop = true,
-  sheetRef,
-  style,
-}: BottomSheetBackdropProps & {
-  enableDismissOnPressBackdrop?: boolean;
-  sheetRef: RefObject<BottomSheetModal>;
-}) => {
-  function handleDismiss() {
-    if (enableDismissOnPressBackdrop) {
-      sheetRef.current?.close();
-    }
-  }
-
-  const containerAnimatedStyle = useAnimatedStyle(() => {
-    const opacity = interpolate(
-      animatedIndex.value,
-      [-1, 0, 1],
-      [0, 0.5, 0.75],
-      Extrapolation.CLAMP,
-    );
-    const pointerEvents = opacity > 0.25 ? 'auto' : 'none';
-
-    return {
-      opacity,
-      pointerEvents,
-    };
-  });
-
-  // styles
-  const containerStyle = useMemo(
-    () => [style, tw`bg-black-950/60`, containerAnimatedStyle],
-    [style, containerAnimatedStyle],
-  );
-
-  return (
-    <Animated.View style={containerStyle}>
-      <TouchableWithoutFeedback style={tw`h-full w-full`} onPress={handleDismiss} />
-    </Animated.View>
-  );
-};
-
-export function BottomSheet(props: BottomSheetProps) {
-  const {
-    backgroundStyle,
-    children,
-    contentContainerStyle,
-    enableDismissOnPressBackdrop = true,
-    enableDynamicSizing = false,
-    enablePanDownToClose = true,
-    handleComponent = BottomSheetHandle,
-    sheetRef,
-    snapPoints = DEFAULT_SNAP_POINTS,
-    style,
-  } = props;
-  const points = enableDynamicSizing ? undefined : snapPoints;
-
-  function renderBackdrop(backdropProps: BottomSheetBackdropProps) {
-    return (
-      <CustomBackdrop
-        {...backdropProps}
-        enableDismissOnPressBackdrop={enableDismissOnPressBackdrop}
-        sheetRef={sheetRef}
-      />
-    );
-  }
-
-  return (
-    <BottomSheetModal
-      ref={sheetRef}
-      backdropComponent={renderBackdrop}
-      backgroundStyle={[tw`bg-gray-50`, backgroundStyle]}
-      enableDynamicSizing={enableDynamicSizing}
-      enablePanDownToClose={enablePanDownToClose}
-      handleComponent={handleComponent}
-      handleIndicatorStyle={tw`bg-gray-50`}
-      handleStyle={tw`rounded-tl-xl rounded-tr-xl`}
-      keyboardBehavior="interactive"
-      snapPoints={points}
-      style={[
-        tw`rounded-md`,
-        {
-          elevation: 10,
-        },
-        style,
-      ]}
-    >
-      <BottomSheetScrollView contentContainerStyle={contentContainerStyle}>
-        {children}
-      </BottomSheetScrollView>
-    </BottomSheetModal>
-  );
-}
-
-export function useBottomSheet() {
-  const sheetRef = useRef<BottomSheetModal>(null);
-
-  const expandSheet = useCallback(() => {
-    Keyboard.dismiss();
-    sheetRef.current?.present();
-  }, []);
-
-  const closeSheet = useCallback(() => {
-    Keyboard.dismiss();
-    sheetRef.current?.close();
-  }, []);
-
-  return {
-    closeSheet,
-    expandSheet,
-    sheetRef,
-  };
-}

package/contents/apps/mobile/src/components/atoms/BottomSheet/index.ts

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

package/contents/apps/mobile/src/components/atoms/Button/button.component.tsx

@@ -1,55 +0,0 @@
-import React from 'react';
-import {
-  ActivityIndicator,
-  StyleProp,
-  TextStyle,
-  TouchableOpacity,
-  TouchableOpacityProps,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import { colors, disabledInputStyle, tw } from '../../../tailwind';
-import { DefaultComponentProps } from '../../../types/component.type';
-import { Text } from '../Text';
-
-type Props = DefaultComponentProps &
-  TouchableOpacityProps & {
-    buttonStyle?: StyleProp<ViewStyle>;
-    children?: React.ReactNode;
-    isLoading?: boolean;
-    textStyle?: StyleProp<TextStyle>;
-    title?: string;
-  };
-
-const ACTIVE_OPACITY = 0.5;
-
-export function Button(props: Props): JSX.Element {
-  const {
-    activeOpacity = ACTIVE_OPACITY,
-    buttonStyle,
-    children,
-    isDisabled = false,
-    isLoading = false,
-    style,
-    textStyle,
-    title = 'Button',
-    ...rest
-  } = props;
-  const disabled = isDisabled || isLoading;
-  const display = children ?? <Text style={[tw`font-medium text-white`, textStyle]}>{title}</Text>;
-
-  return (
-    <TouchableOpacity activeOpacity={activeOpacity} disabled={disabled} style={[style]} {...rest}>
-      <View
-        style={[
-          tw`bg-primary-700 items-center justify-center rounded-xl p-4`,
-          buttonStyle,
-          disabledInputStyle(disabled),
-        ]}
-      >
-        {isLoading ? <ActivityIndicator color={colors.white} /> : display}
-      </View>
-    </TouchableOpacity>
-  );
-}

package/contents/apps/mobile/src/components/atoms/Button/index.ts

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

package/contents/apps/mobile/src/components/atoms/Button/outlined-button.component.tsx

@@ -1,59 +0,0 @@
-import React from 'react';
-import {
-  ActivityIndicator,
-  StyleProp,
-  TextStyle,
-  TouchableOpacity,
-  TouchableOpacityProps,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import { colors, disabledInputStyle, tw } from '../../../tailwind';
-import { DefaultComponentProps } from '../../../types/component.type';
-import { Text } from '../Text';
-
-type Props = DefaultComponentProps &
-  TouchableOpacityProps & {
-    buttonStyle?: StyleProp<ViewStyle>;
-    children?: React.ReactNode;
-    isLoading?: boolean;
-    textStyle?: StyleProp<TextStyle>;
-    title?: string;
-  };
-
-const ACTIVE_OPACITY = 0.5;
-
-export function OutlinedButton(props: Props): JSX.Element {
-  const {
-    activeOpacity = ACTIVE_OPACITY,
-    buttonStyle,
-    children,
-    isDisabled = false,
-    isLoading = false,
-    style,
-    textStyle,
-    title = 'Button',
-    ...rest
-  } = props;
-  const disabled = isDisabled || isLoading;
-  const display = children ? (
-    children
-  ) : (
-    <Text style={[tw`text-primary-700 font-medium`, textStyle]}>{title}</Text>
-  );
-
-  return (
-    <TouchableOpacity activeOpacity={activeOpacity} disabled={disabled} style={[style]} {...rest}>
-      <View
-        style={[
-          tw`border-primary-700 items-center justify-center rounded-md border-2 bg-white p-4`,
-          buttonStyle,
-          disabledInputStyle(disabled),
-        ]}
-      >
-        {isLoading ? <ActivityIndicator color={colors.primary[100]} /> : display}
-      </View>
-    </TouchableOpacity>
-  );
-}

package/contents/apps/mobile/src/components/atoms/Divider/divider-component.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-
-import { tw } from '../../../tailwind';
-import { DefaultComponentProps } from '../../../types';
-
-type Props = DefaultComponentProps & {};
-
-export function Divider(props: Props) {
-  const { style } = props;
-
-  return <View style={[tw`h-[1px] w-full bg-gray-200`, style]}></View>;
-}

package/contents/apps/mobile/src/components/atoms/Divider/index.ts

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

package/contents/apps/mobile/src/components/atoms/InputLayout/index.ts

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

package/contents/apps/mobile/src/components/atoms/InputLayout/input-layout.component.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import { StyleProp, TextStyle, View } from 'react-native';
-
-import { tw } from '../../../tailwind';
-import { DefaultComponentProps } from '../../../types';
-import { Text } from '../Text';
-
-type Props = DefaultComponentProps & {
-  children: React.ReactNode;
-  isRequired?: boolean;
-  label?: string;
-  textStyle?: StyleProp<TextStyle>;
-};
-
-export function InputLayout(props: Props) {
-  const { children, error, isRequired, label, style, textStyle } = props;
-
-  return (
-    <View style={[style]}>
-      {label && (
-        <Text style={[tw`mb-2 text-gray-600`, textStyle]}>
-          {label}
-          {isRequired && <Text style={tw`text-red-600`}>{isRequired && '*'}</Text>}
-        </Text>
-      )}
-      {children}
-      {!!error && (
-        <View style={tw`items-end`}>
-          <Text style={tw`text-right text-red-500`}>{error}</Text>
-        </View>
-      )}
-    </View>
-  );
-}

package/contents/apps/mobile/src/components/atoms/ListLoadingItem/index.ts

@@ -1 +0,0 @@
-export * from './list-loading-item.component';

package/contents/apps/mobile/src/components/atoms/ListLoadingItem/list-loading-item.component.tsx

@@ -1,56 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-
-import { tw } from '../../../tailwind';
-import { DefaultComponentProps } from '../../../types';
-import { Skeleton } from '../Skeleton';
-
-type Props = DefaultComponentProps & {
-  isLoading: boolean;
-};
-
-export function ListLoadingItemComponent(props: Props) {
-  const { isLoading, style } = props;
-
-  return (
-    <View style={[style]}>
-      <View style={[tw`gap-2`, style]}>
-        <Skeleton isLoading={isLoading}>
-          {isLoading && <View style={tw`h-[100px] w-full`} />}
-        </Skeleton>
-        <Skeleton isLoading={isLoading}>
-          {isLoading && <View style={tw`h-[100px] w-full`} />}
-        </Skeleton>
-        <Skeleton isLoading={isLoading}>
-          {isLoading && <View style={tw`h-[100px] w-full`} />}
-        </Skeleton>
-      </View>
-    </View>
-  );
-}
-
-export function ListLoadingHorizontalItemComponent(props: Props) {
-  const { isLoading, style } = props;
-
-  return (
-    <View style={[style]}>
-      <View style={[tw`flex-row gap-2`, style]}>
-        <Skeleton isLoading={isLoading}>
-          {isLoading && <View style={tw`h-[200px] w-[100px]`} />}
-        </Skeleton>
-        <Skeleton isLoading={isLoading}>
-          {isLoading && <View style={tw`h-[200px] w-[100px]`} />}
-        </Skeleton>
-        <Skeleton isLoading={isLoading}>
-          {isLoading && <View style={tw`h-[200px] w-[100px]`} />}
-        </Skeleton>
-        <Skeleton isLoading={isLoading}>
-          {isLoading && <View style={tw`h-[200px] w-[100px]`} />}
-        </Skeleton>
-        <Skeleton isLoading={isLoading}>
-          {isLoading && <View style={tw`h-[200px] w-[100px]`} />}
-        </Skeleton>
-      </View>
-    </View>
-  );
-}

package/contents/apps/mobile/src/components/atoms/Modal/index.ts

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

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';