@meatech/payblend_app_ui_component 1.0.69

package/components/Modal/Modal.tsx

@@ -0,0 +1,166 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import * as React from 'react';
+import {
+  forwardRef,
+  memo,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react';
+import {Keyboard, Platform, StyleSheet, View} from 'react-native';
+import {useSharedValue} from 'react-native-reanimated';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {useBackHandler} from '@ui/hooks';
+import {colors, metrics, pw} from '@ui/themes';
+import {IModal, ModalRef} from './type';
+import {WebModal} from './WebModal';
+
+// Import bottom-sheet only for native platforms
+let BottomSheetModal: any;
+let BottomSheetBackdrop: any;
+let BottomSheetBackdropProps: any;
+
+if (Platform.OS !== 'web') {
+  const bottomSheetModule = require('@gorhom/bottom-sheet');
+  BottomSheetModal = bottomSheetModule.BottomSheetModal;
+  BottomSheetBackdrop = bottomSheetModule.BottomSheetBackdrop;
+  BottomSheetBackdropProps = bottomSheetModule.BottomSheetBackdropProps;
+}
+
+const NativeModal = forwardRef<ModalRef, IModal>((props, ref) => {
+  const {
+    type = 'BottomSheet',
+    children,
+    snapPoints,
+    handleIndicatorStyle,
+    backgroundStyle,
+    enablePanDownToClose = true,
+    popupStyle,
+    onClose,
+    ...rest
+  } = props;
+
+  const insets = useSafeAreaInsets();
+  const animatedIndex = useSharedValue<number>(1);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const bottomSheetRef = useRef<typeof BottomSheetModal>(null);
+
+  const open = useCallback(() => {
+    setIsOpen(true);
+    bottomSheetRef.current?.present();
+  }, []);
+  const close = useCallback(() => {
+    setIsOpen(false);
+    bottomSheetRef.current?.close();
+  }, []);
+
+  useBackHandler(() => {
+    if (isOpen) {
+      close();
+      return true;
+    }
+    return false;
+  });
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      open,
+      isOpen,
+      close,
+    }),
+    [close, open, isOpen],
+  );
+
+  const handleClose = useCallback(() => {
+    onClose?.();
+    close();
+  }, [onClose, close]);
+
+  const renderBackdrop = useCallback(
+    (backdropProps: typeof BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...backdropProps}
+        appearsOnIndex={1}
+        animatedIndex={animatedIndex}
+        onPress={() => Keyboard.dismiss()}
+      />
+    ),
+    [],
+  );
+
+  const options = useMemo(
+    () =>
+      type === 'Popup'
+        ? {
+            snapPoints: ['100%'],
+            enablePanDownToClose: false,
+            enableOverDrag: false,
+            backgroundStyle: styles.backgroundPopup,
+            handleComponent: () => null,
+          }
+        : {
+            snapPoints,
+            handleIndicatorStyle: [
+              styles.handleIndicator,
+              handleIndicatorStyle,
+            ],
+            enablePanDownToClose,
+            backgroundStyle: styles.backgroundBottomSheet,
+            topInset: insets.top,
+            onDismiss: handleClose,
+          },
+    [type, enablePanDownToClose, handleIndicatorStyle, insets.top],
+  );
+
+  return (
+    <BottomSheetModal
+      ref={bottomSheetRef}
+      {...rest}
+      {...options}
+      enableDynamicSizing={false}
+      backgroundStyle={[options.backgroundStyle, backgroundStyle]}
+      backdropComponent={renderBackdrop}>
+      {type === 'Popup' ? (
+        <View style={styles.popupContainer}>
+          <View style={[styles.popup, popupStyle]}>{children}</View>
+        </View>
+      ) : (
+        children
+      )}
+    </BottomSheetModal>
+  );
+});
+
+export const Modal = memo(
+  forwardRef<ModalRef, IModal>((props, ref) => {
+    if (Platform.OS === 'web') {
+      return <WebModal ref={ref} {...props} />;
+    }
+    return <NativeModal ref={ref} {...props} />;
+  }),
+);
+
+const styles = StyleSheet.create({
+  backgroundBottomSheet: {
+    backgroundColor: colors.white['10'],
+  },
+  backgroundPopup: {
+    backgroundColor: 'transparent',
+    borderRadius: 0,
+  },
+  handleIndicator: {
+    backgroundColor: colors.neutral['60'],
+    width: pw(40),
+  },
+  popupContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    marginHorizontal: metrics.width.spacingMedium,
+  },
+  popup: {
+    backgroundColor: colors.white['10'],
+    width: '100%',
+  },
+});

package/components/Modal/WebModal.tsx

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import {forwardRef, memo, useCallback, useImperativeHandle} from 'react';
+import {StyleSheet, View, Modal as ModalRN, Pressable} from 'react-native';
+import {useBackHandler} from '@ui/hooks';
+import {colors, deviceWidth, getColorOpacity, metrics, pw} from '@ui/themes';
+import {IModal, ModalRef} from './type';
+
+export const WebModal = memo(
+  forwardRef<ModalRef, IModal>(
+    (
+      {
+        type = 'BottomSheet',
+        children,
+        hideHandle = false,
+        disableBackdropPress,
+        containerStyle,
+        onClose,
+      },
+      ref,
+    ) => {
+      const [visible, setVisible] = React.useState(false);
+
+      const open = useCallback(() => setVisible(true), []);
+      const close = useCallback(() => setVisible(false), []);
+
+      useBackHandler(() => {
+        if (visible) {
+          close();
+          return true;
+        }
+        return false;
+      });
+
+      useImperativeHandle(ref, () => ({open, close, isOpen: visible}), [close, open, visible]);
+
+      const handleClose = useCallback(() => {
+        onClose?.();
+        close();
+      }, [onClose, close]);
+
+      return (
+        <ModalRN visible={visible} animationType="slide" transparent>
+          {type === 'Popup' ? (
+            <View style={styles.popupContainer}>
+              <View style={[styles.popup, containerStyle]}>{children}</View>
+            </View>
+          ) : (
+            <View style={styles.bottomSheetContainer}>
+              <Pressable
+                disabled={disableBackdropPress}
+                style={styles.backdrop}
+                onPress={handleClose}
+              />
+              <View style={[styles.bottomSheet, containerStyle]}>
+                {!hideHandle && <View style={styles.dashed} />}
+                {children}
+              </View>
+            </View>
+          )}
+        </ModalRN>
+      );
+    },
+  ),
+);
+
+const styles = StyleSheet.create({
+  backgroundBottomSheet: {
+    backgroundColor: colors.white['10'],
+  },
+  backgroundPopup: {
+    backgroundColor: 'transparent',
+    borderRadius: 0,
+  },
+  handleIndicator: {
+    backgroundColor: colors.neutral['60'],
+    width: pw(40),
+  },
+  popupContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: metrics.width.spacingMedium,
+    backgroundColor: getColorOpacity(colors.black['10'], 0.3),
+  },
+  popup: {
+    backgroundColor: colors.white['10'],
+    width: '100%',
+    borderRadius: metrics.borderRadiusSemiLarge,
+    padding: metrics.width.spacingLarge,
+  },
+  bottomSheetContainer: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    backgroundColor: getColorOpacity(colors.black['10'], 0.3),
+  },
+  backdrop: {
+    flex: 1,
+  },
+  bottomSheet: {
+    backgroundColor: colors.white['10'],
+    borderTopLeftRadius: metrics.borderRadiusSemiLarge,
+    borderTopRightRadius: metrics.borderRadiusSemiLarge,
+    paddingHorizontal: metrics.width.spacingMedium,
+  },
+  dashed: {
+    width: deviceWidth() * 0.35,
+    height: metrics.height.spacingTiny,
+    backgroundColor: colors.neutral['60'],
+    borderRadius: metrics.borderRadiusSemiLarge,
+    alignSelf: 'center',
+    marginVertical: metrics.height.spacingSlightlySmall,
+  },
+});

package/components/Modal/index.ts

@@ -0,0 +1,2 @@
+export * from './Modal';
+export * from './type';

package/components/Modal/type.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import {StyleProp, ViewStyle} from 'react-native';
+import {BottomSheetModalProps} from '@gorhom/bottom-sheet';
+
+export interface IModal
+  extends Omit<
+    BottomSheetModalProps,
+    'onDismiss' | 'backdropComponent' | 'children'
+  > {
+  children: React.ReactNode;
+  type?: 'Popup' | 'BottomSheet';
+  popupStyle?: StyleProp<ViewStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
+  hideHandle?: boolean;
+  disableBackdropPress?: boolean;
+  onClose?: () => void;
+}
+
+export type ModalRef = {
+  open: () => void;
+  close: () => void;
+  isOpen: boolean;
+};
+

package/components/NotificationModal/NotificationModal.tsx

@@ -0,0 +1,183 @@
+import * as React from 'react';
+import {forwardRef} from 'react';
+import {StyleSheet, View} from 'react-native';
+import Text from '@ui/components/Text';
+import {Icon} from '@ui/components';
+import Button from '@ui/components/Button';
+import {colors, metrics, pf} from '@ui/themes';
+import {Props} from './interface';
+import {Modal} from '@ui/components';
+import {ModalRef} from '@ui/components/Modal/type';
+
+const MODAL_TYPE = {
+  WARNING: 'WARNING',
+  ERROR: 'ERROR',
+} as const;
+
+const BUTTON_TEXT = {
+  CANCEL: 'キャンセル',
+  RETURN_TO_ACCOUNT: '口座Topに戻る',
+} as const;
+
+const DEFAULT_CONFIRM_TEXT = '確定する';
+
+/**
+ * Button component for the modal actions
+ */
+const ModalButton: React.FC<{
+  onPress?: () => void;
+  disabled?: boolean;
+  type?: 'outline' | 'fill';
+  color?: 'error' | 'primary' | 'disabled';
+  textSize?: 'large';
+  children: React.ReactNode;
+  style?: object;
+}> = ({onPress, disabled, type, color, textSize, children, style}) => (
+  <Button
+    disabled={disabled}
+    type={type}
+    color={color}
+    textSize={textSize}
+    onPress={onPress}
+    style={style}>
+    {typeof children === 'string' ? (
+      <Text size="large" fontWeight="700" color={type === 'outline' ? 'disabled' : 'white'}>
+        {children}
+      </Text>
+    ) : (
+      children
+    )}
+  </Button>
+);
+
+/**
+ * Modal header component with icon and title
+ */
+const ModalHeader: React.FC<{
+  isError: boolean;
+  title: string;
+}> = ({isError, title}) => (
+  <View style={styles.header}>
+    <Icon
+      name="ic_alert"
+      width={metrics.iconExtraLarge}
+      height={metrics.iconExtraLarge}
+      tintColor={isError ? colors.red['80'] : colors.secondary[100]}
+    />
+    <Text
+      numberOfLines={2}
+      fontWeight="700"
+      size="large"
+      color={isError ? 'error' : 'interactive'}
+      style={styles.title}>
+      {title}
+    </Text>
+  </View>
+);
+
+/**
+ * NotificationModal component for displaying warnings and errors
+ * 
+ * @component
+ * @example
+ * ```tsx
+ * <NotificationModal
+ *   ref={modalRef}
+ *   type="WARNING"
+ *   title="Warning Title"
+ *   onConfirm={() => {}}
+ * >
+ *   <Text>Modal content</Text>
+ * </NotificationModal>
+ * ```
+ */
+export const NotificationModal = forwardRef<ModalRef, Props>(
+  ({
+    type = MODAL_TYPE.WARNING,
+    title,
+    children,
+    confirmButtonText = DEFAULT_CONFIRM_TEXT,
+    disableCancelButton,
+    disableConfirmButton,
+    disableErrorButton,
+    onCancel,
+    onConfirm,
+    onError,
+  }, ref) => {
+    const isError = type === MODAL_TYPE.ERROR;
+
+    return (
+      <Modal ref={ref} type="Popup" popupStyle={styles.container}>
+        <ModalHeader isError={isError} title={title} />
+        
+        {children}
+        
+        <View style={styles.containerButton}>
+          {onConfirm && (
+            <ModalButton
+              disabled={disableConfirmButton}
+              textSize="large"
+              color={isError ? 'error' : 'primary'}
+              onPress={onConfirm}>
+              {confirmButtonText}
+            </ModalButton>
+          )}
+          
+          {onCancel && (
+            <ModalButton
+              disabled={disableCancelButton}
+              type="outline"
+              onPress={onCancel}
+              style={styles.btnCancel}>
+              {BUTTON_TEXT.CANCEL}
+            </ModalButton>
+          )}
+          
+          {onError && (
+            <ModalButton
+              disabled={disableErrorButton}
+              type="fill"
+              color="error"
+              onPress={onError}
+              style={styles.btnCancel}>
+              {BUTTON_TEXT.RETURN_TO_ACCOUNT}
+            </ModalButton>
+          )}
+        </View>
+      </Modal>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: colors.white['10'],
+    padding: metrics.width.spacingLarge,
+    borderRadius: metrics.borderRadiusSemiLarge,
+    shadowColor: colors.neutral['100'],
+    shadowOffset: {width: 0, height: metrics.height.spacingTiny},
+    shadowOpacity: 0.25,
+    shadowRadius: metrics.borderRadiusExtraLarge,
+    elevation: 4,
+    gap: metrics.height.spacingBase,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: metrics.width.spacingExtraSmall,
+    borderBottomWidth: metrics.borderWidthMedium,
+    borderBottomColor: colors.neutral['40'],
+    paddingBottom: metrics.height.spacingSlightlySmall,
+    marginBottom: metrics.height.spacingBase,
+  },
+  title: {
+    flex: 1,
+    lineHeight: pf(25),
+  },
+  btnCancel: {
+    borderColor: colors.neutral[60],
+  },
+  containerButton: {
+    gap: metrics.height.spacingExtraSmall,
+  },
+});

package/components/NotificationModal/index.ts

@@ -0,0 +1,2 @@
+export * from './interface';
+export * from './NotificationModal';

package/components/NotificationModal/interface.ts

@@ -0,0 +1,12 @@
+export interface Props {
+  type?: 'WARNING' | 'ERROR';
+  title: string;
+  children: React.ReactNode;
+  confirmButtonText?: string;
+  disableConfirmButton?: boolean;
+  disableCancelButton?: boolean;
+  disableErrorButton?: boolean;
+  onConfirm?: () => void;
+  onCancel?: () => void;
+  onError?: () => void;
+}

package/components/OptionalUtilities/OptionalUtilities.tsx

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { Icon, Text } from '@ui/components';
+import {
+  ACTIVE_OPACITY,
+  colors,
+  deviceWidth,
+  metrics,
+  pf,
+  ph,
+} from '@ui/themes';
+import { OptionalUtilitiesI, OptionalUtilitiesProps } from './types';
+
+export const OptionalUtilities: React.FC<OptionalUtilitiesProps> = ({
+  data,
+  itemStyle,
+  style,
+  disableAll,
+}) => {
+  const renderItem = ({
+    label,
+    icon,
+    disabled,
+    showCircleBg,
+    iconStyle,
+    onPress,
+  }: OptionalUtilitiesI) => {
+    return (
+      <TouchableOpacity
+        disabled={disableAll || disabled}
+        key={label}
+        style={[
+          styles.utility,
+          {
+            width: (deviceWidth() - metrics.width.spacingMassive) / data.length,
+          },
+          itemStyle,
+          (disableAll || disabled) && styles.disable,
+        ]}
+        activeOpacity={ACTIVE_OPACITY}
+        onPress={onPress}
+      >
+        <View style={styles.icon}>
+          <Icon
+            name={icon}
+            width={metrics.iconMediumPlus}
+            height={metrics.iconMediumPlus}
+            style={[
+              (icon === 'ic_white_plus' || showCircleBg) && styles.circle,
+              iconStyle,
+            ]}
+          />
+        </View>
+        <Text
+          style={styles.label}
+          lineHeight={pf(15)}
+          color="tertiary"
+          numberOfLines={1}
+        >
+          {label}
+        </Text>
+      </TouchableOpacity>
+    );
+  };
+
+  return <View style={[styles.container, style]}>{data.map(renderItem)}</View>;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    backgroundColor: colors.white['10'],
+    marginHorizontal: metrics.width.spacingBase,
+    marginBottom: metrics.width.spacingBase,
+    paddingHorizontal: metrics.width.spacingBase,
+    paddingVertical: metrics.height.spacingTiny,
+  },
+  utility: {
+    height: ph(60),
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  icon: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  label: {
+    fontSize: pf(10),
+  },
+  circle: {
+    width: metrics.iconSemiLarge,
+    height: metrics.iconSemiLarge,
+    backgroundColor: colors.neutral['90'],
+    borderRadius: metrics.borderRadiusHuge,
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: colors.neutral['100'],
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.25,
+    shadowRadius: 12,
+    elevation: 12,
+  },
+  disable: {
+    opacity: 0.32,
+  },
+});

package/components/OptionalUtilities/index.ts

@@ -0,0 +1,2 @@
+export * from './OptionalUtilities';
+export * from './types';

package/components/OptionalUtilities/types.ts

@@ -0,0 +1,17 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import { Images } from '@ui/themes';
+export interface OptionalUtilitiesI {
+  label: string;
+  icon: keyof typeof Images;
+  iconStyle?: StyleProp<ViewStyle>;
+  disabled?: boolean;
+  showCircleBg?: boolean;
+  onPress?: () => void;
+}
+
+export interface OptionalUtilitiesProps {
+  data: OptionalUtilitiesI[];
+  itemStyle?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle>;
+  disableAll?: boolean;
+}