nx-react-native-cli 1.0.7 → 1.0.8

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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