@meatech/payblend_app_ui_component 1.0.69

package/types/toast.ts

@@ -0,0 +1,213 @@
+import React from 'react';
+import {
+  StyleProp,
+  TextProps,
+  TextStyle,
+  TouchableOpacityProps,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
+
+export type ReactChildren = React.ReactNode;
+
+export enum ToastTypeE {
+  default = 'default',
+  success = 'success',
+  error = 'error',
+  info = 'info',
+  warning = 'warning',
+  photo = 'photo',
+}
+
+export type ToastType =
+  | ToastTypeE.default
+  | ToastTypeE.success
+  | ToastTypeE.error
+  | ToastTypeE.info
+  | ToastTypeE.warning
+  | ToastTypeE.photo
+  | (string & object);
+export type ToastPosition = 'top' | 'bottom';
+
+export type ToastOptions = {
+  /**
+   * Toast type.
+   * Default value: `success`
+   */
+  type?: ToastType;
+  /**
+   * Style for the header text in the Toast (title).
+   */
+  titleStyle?: StyleProp<TextStyle>;
+  /**
+   * Style for the inner message text in the Toast (subTitle).
+   */
+  subTitleStyle?: StyleProp<TextStyle>;
+  /**
+   * Toast position.
+   * Default value: `top`
+   */
+  position?: ToastPosition;
+  /**
+   * When `true`, the visible Toast automatically hides after a certain number of milliseconds,
+   * specified by the `visibilityTime` prop.
+   * Default value: `true`
+   */
+  autoHide?: boolean;
+  /**
+   * Number of milliseconds after which Toast automatically hides.
+   * Has effect only in conjunction with `autoHide` prop set to `true`.
+   * Default value: `4000`
+   */
+  visibilityTime?: number;
+  /**
+   * When `true`, the Toast can be dismissed by a swipe gesture, specified by the `swipeable` prop.
+   * Default value: `true`
+   */
+  swipeable?: boolean;
+  /**
+   * Offset from the top of the screen (in px).
+   * Has effect only when `position` is `top`
+   * Default value: `40`
+   */
+  topOffset?: number;
+  /**
+   * Offset from the bottom of the screen (in px)
+   * Has effect only when `position` is `bottom`
+   * Default value: `40`
+   */
+  bottomOffset?: number;
+  /**
+   * Called when Toast is shown
+   */
+  onShow?: () => void;
+  /**
+   * Called when Toast hides
+   */
+  onHide?: () => void;
+  /**
+   * Called on Toast press
+   */
+  onPress?: () => void;
+  /**
+   * Any custom props passed to the specified Toast type.
+   * Has effect only when there is a custom Toast type (configured via the `config` prop
+   * on the Toast instance) that uses the `props` parameter
+   */
+  props?: any;
+
+  isShowLeftIcon?: boolean;
+  isShowRightIcon?: boolean;
+};
+
+export type ToastData = {
+  title?: string;
+  subTitle?: string;
+};
+
+export type ToastShowParams = ToastData & ToastOptions;
+
+export type ToastHideParams = void;
+
+export type BaseToastProps = {
+  title?: string;
+  subTitle?: string;
+  type: ToastType;
+  hide?: () => void;
+  onPress?: () => void;
+  activeOpacity?: number;
+  style?: StyleProp<ViewStyle>;
+  touchableContainerProps?: TouchableOpacityProps;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  contentContainerProps?: ViewProps;
+  titleStyle?: StyleProp<TextStyle>;
+  titleNumberOfLines?: number;
+  titleProps?: TextProps;
+  subTitleStyle?: StyleProp<TextStyle>;
+  subTitleNumberOfLines?: number;
+  subTitleProps?: TextProps;
+  isShowLeftIcon?: boolean;
+  isShowRightIcon?: boolean;
+};
+
+export type ToastConfigParams<Props> = {
+  position: ToastPosition;
+  type: ToastType;
+  isVisible: boolean;
+  title?: string;
+  subTitle?: string;
+  titleStyle?: StyleProp<TextStyle>;
+  subTitleStyle?: StyleProp<TextStyle>;
+  show: (params: ToastShowParams) => void;
+  hide: (params: ToastHideParams) => void;
+  onPress: () => void;
+  props: Props;
+  isShowLeftIcon?: boolean;
+  isShowRightIcon?: boolean;
+};
+
+export type ToastConfig = {
+  [key: string]: (params: ToastConfigParams<any>) => React.ReactNode;
+};
+
+export type ToastRef = {
+  show: (params: ToastShowParams) => void;
+  hide: (params: ToastHideParams) => void;
+};
+
+/**
+ * `props` that can be set on the Toast instance.
+ * They act as defaults for all Toasts that are shown.
+ */
+export type ToastProps = {
+  /**
+   * Layout configuration for custom Toast types
+   */
+  config?: ToastConfig;
+  /**
+   * Toast type.
+   * Default value: `success`
+   */
+  type?: ToastType;
+  /**
+   * Toast position.
+   * Default value: `top`
+   */
+  position?: ToastPosition;
+  /**
+   * Number of milliseconds after which Toast automatically hides.
+   * Has effect only in conjunction with `autoHide` prop set to `true`.
+   * Default value: `4000`
+   */
+  visibilityTime?: number;
+  /**
+   * When `true`, the visible Toast automatically hides after a certain number of milliseconds,
+   * specified by the `visibilityTime` prop.
+   * Default value: `true`
+   */
+  autoHide?: boolean;
+  /**
+   * Offset from the top of the screen (in px).
+   * Has effect only when `position` is `top`
+   * Default value: `40`
+   */
+  topOffset?: number;
+  /**
+   * Offset from the bottom of the screen (in px)
+   * Has effect only when `position` is `bottom`
+   * Default value: `40`
+   */
+  bottomOffset?: number;
+  /**
+   * Called when any Toast is shown
+   */
+  onShow?: () => void;
+  /**
+   * Called when any Toast hides
+   */
+  onHide?: () => void;
+  /**
+   * Called on any Toast press
+   */
+  onPress?: () => void;
+};

package/utils/array.ts

@@ -0,0 +1,5 @@
+function additiveInverseArray(arr: number[]) {
+  return arr.map(i => -i);
+}
+
+export {additiveInverseArray};

package/utils/dayjs.ts

@@ -0,0 +1,41 @@
+import isYesterday from 'dayjs/plugin/isYesterday';
+import dayjs from 'dayjs';
+import isToday from 'dayjs/plugin/isToday';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import 'dayjs/locale/ja';
+
+dayjs.extend(isToday);
+dayjs.extend(isYesterday);
+dayjs.extend(relativeTime);
+dayjs.locale('ja');
+
+const FORMAT_TIME = {
+  HOUR: 'HH:mm',
+  PAST: 'past',
+  DATE: 'YYYY/MM/DD',
+};
+
+export const HOUR_FORMAT = 'HH:mm';
+export const DAY_FORMAT = 'YYYY/MM/DD';
+export const YESTERDAY_TEXT = 'Yesterday';
+
+export const checkIsToday = (date: string) => dayjs(date).isToday();
+export const checkIsYesterDay = (date: string) => dayjs(date).isYesterday();
+export const formatTimeFromNow = (time: string) => dayjs(time).fromNow();
+export const formatDate = (date: string | Date) =>
+  dayjs(date).format(FORMAT_TIME.DATE);
+  export const formatDateToJapanese = (date: string): string => 
+  dayjs(date).format('YYYY年M月D日');
+export const formatHour = (time: string) =>
+  dayjs(time).format(FORMAT_TIME.HOUR);
+export default dayjs;
+
+export const resolveDateTimeDisplay = (dateTime: string) => {
+  const time = checkIsToday(dateTime)
+    ? formatHour(dateTime)
+    : checkIsYesterDay(dateTime)
+    ? `${YESTERDAY_TEXT} ${formatHour(dateTime)}`
+    : formatDate(dateTime);
+
+  return time;
+};

package/utils/error.ts

@@ -0,0 +1,30 @@
+import {AxiosResponse} from 'axios';
+import {Toast} from '@ui/components';
+import {RESPONSE_CODE} from '@ui/constants';
+import {ToastPosition} from '@ui/types';
+import {ToastTypeE} from '@ui/types';
+import {ToastTitle} from '@ui/constants';
+
+export const handleError = (error: AxiosResponse, position?: ToastPosition) => {
+  if (error.status === 404) {
+    return;
+  }
+
+  if (RESPONSE_CODE.badRequest.includes(error.status)) {
+    Toast.show({
+      position: position || 'bottom',
+      type: ToastTypeE.error,
+      title: 'エラー',
+      subTitle: error.data.message,
+      visibilityTime: 1500,
+    });
+  } else {
+    Toast.show({
+      position: position || 'bottom',
+      type: ToastTypeE.error,
+      title: ToastTitle.errorTitle,
+      subTitle: '何かがうまくいかなかった',
+      visibilityTime: 1500,
+    });
+  }
+};

package/utils/imageUtils.ts

@@ -0,0 +1,11 @@
+import { Platform } from 'react-native';
+
+export const getImageSource = (image: any): string => {
+  if (Platform.OS === 'web') {
+    // For web, we can directly use the image path
+    return image;
+  }
+  // For native, use resolveAssetSource
+  const Image = require('react-native').Image;
+  return Image.resolveAssetSource(image).uri;
+}; 

package/utils/index.ts

@@ -0,0 +1,7 @@
+export * from './storage';
+export * from './obj';
+export * from './array';
+export * from './number';
+export * from './dayjs';
+export * from './imageUtils';
+export * from './utils';

package/utils/number.ts

@@ -0,0 +1,11 @@
+export function upperBound(n: number, max: number) {
+  return n > max ? max : n;
+}
+
+export function lowerBound(n: number, min: number) {
+  return n < min ? min : n;
+}
+
+export function bound(n: number, min: number, max: number) {
+  return upperBound(lowerBound(n, min), max);
+}

package/utils/obj.ts

@@ -0,0 +1,14 @@
+export function mergeIfDefined(
+  obj1: Record<string, unknown>,
+  obj2: Record<string, unknown>,
+) {
+  const newObj = {
+    ...obj1,
+  };
+  Object.entries(obj2).forEach(([key, value]) => {
+    if (value !== null && value !== undefined) {
+      newObj[key] = value;
+    }
+  });
+  return newObj;
+}

package/utils/storage.ts

@@ -0,0 +1,129 @@
+import { Platform } from 'react-native';
+import React from 'react';
+
+// Type definitions for web storage
+interface WebStorage {
+  getItem(key: string): string | null;
+  setItem(key: string, value: string): void;
+  removeItem(key: string): void;
+}
+
+// Type definition for window
+declare const global: {
+  window?: {
+    localStorage: WebStorage;
+  };
+};
+
+// Import MMKV only for native platforms
+let MMKV: any;
+let useMMKVString: any;
+
+if (Platform.OS !== 'web') {
+  const mmkvModule = require('react-native-mmkv');
+  MMKV = mmkvModule.MMKV;
+  useMMKVString = mmkvModule.useMMKVString;
+}
+
+// Create MMKV instance for native platforms
+const nativeStorage = Platform.OS !== 'web' ? new MMKV() : null;
+
+// Web storage implementation using localStorage
+const webStorage: WebStorage = {
+  getItem: (key: string) => {
+    if (Platform.OS === 'web' && global.window?.localStorage) {
+      return global.window.localStorage.getItem(key);
+    }
+    return null;
+  },
+  setItem: (key: string, value: string) => {
+    if (Platform.OS === 'web' && global.window?.localStorage) {
+      global.window.localStorage.setItem(key, value);
+    }
+  },
+  removeItem: (key: string) => {
+    if (Platform.OS === 'web' && global.window?.localStorage) {
+      global.window.localStorage.removeItem(key);
+    }
+  },
+};
+
+// Unified storage interface
+export const storage = Platform.OS === 'web' ? webStorage : nativeStorage;
+
+// Create platform-specific hooks
+const createStorageHook = () => {
+  if (Platform.OS === 'web') {
+    return <T>(key: string, initialValue?: T) => {
+      const [value, setValue] = React.useState(() => {
+        if (global.window?.localStorage) {
+          const stored = global.window.localStorage.getItem(key);
+          return stored ? JSON.parse(stored) : initialValue;
+        }
+        return initialValue;
+      });
+
+      React.useEffect(() => {
+        if (global.window?.localStorage) {
+          global.window.localStorage.setItem(key, JSON.stringify(value));
+        }
+      }, [key, value]);
+
+      return [value, setValue] as const;
+    };
+  }
+
+  return <T>(key: string, initialValue?: T) => {
+    const [value, setValue] = useMMKVString(key);
+    return [value ?? initialValue, setValue] as const;
+  };
+};
+
+// Create the storage hook
+const useStorage = createStorageHook();
+
+// Hooks for React components
+export function useStoredString(key: string, initialValue?: string) {
+  return useStorage<string>(key, initialValue);
+}
+
+export function useStoredObject<T>(key: string, initialValue?: T) {
+  return useStorage<T>(key, initialValue);
+}
+
+export function useStoredNumber(key: string, initialValue?: number) {
+  return useStorage<number>(key, initialValue);
+}
+
+// Utility functions
+export function getSecureDataString(key: string): string | null {
+  if (Platform.OS === 'web' && global.window?.localStorage) {
+    const stored = global.window.localStorage.getItem(key);
+    return stored ? JSON.parse(stored) : null;
+  }
+  if (nativeStorage) {
+    const jsonString = nativeStorage.getString(key);
+    return jsonString ? JSON.parse(jsonString) : null;
+  }
+  return null;
+}
+
+export function setSecureDataString(key: string, data: string): void {
+  if (Platform.OS === 'web' && global.window?.localStorage) {
+    global.window.localStorage.setItem(key, JSON.stringify(data));
+    return;
+  }
+  if (nativeStorage) {
+    nativeStorage.set(key, JSON.stringify(data));
+  }
+}
+
+export function removeSecureDataString(key: string): void {
+  if (Platform.OS === 'web' && global.window?.localStorage) {
+    global.window.localStorage.removeItem(key);
+    return;
+  }
+  if (nativeStorage) {
+    nativeStorage.delete(key);
+  }
+}

package/utils/utils.ts

@@ -0,0 +1,92 @@
+import { MIN_AGE_LIMIT } from '@ui/constants';
+
+export const keyExtractor = (item: unknown, index: number) => index.toString();
+/* eslint-disable curly */
+export function formatNumber(value: string) {
+  return value?.replace?.(/\B(?=(\d{3})+(?!\d))/g, ',');
+}
+
+export function formatDateToJapaneseStyle(
+  dateString: string,
+  type: '1' | '2' | '3' = '1'
+) {
+  if (!dateString) return '';
+  let day,
+    month,
+    year,
+    hour = 0,
+    minute = 0,
+    second = 0;
+  if (dateString.length === 8) {
+    year = parseInt(dateString.slice(0, 4), 10);
+    month = parseInt(dateString.slice(4, 6), 10);
+    day = parseInt(dateString.slice(6, 8), 10);
+  } else {
+    const date = new Date(dateString);
+    year = date.getFullYear();
+    month = date.getMonth() + 1;
+    day = date.getDate();
+    hour = date.getHours();
+    minute = date.getMinutes();
+    second = date.getSeconds();
+  }
+  if (type === '2') {
+    return `${year}年 ${month}月 ${day}日 ${hour}:${minute}:${second}`;
+  } else if (type === '3') {
+    return `${year}/${month}/${day} ${hour}:${minute}まで`;
+  } else {
+    return `${month}月 ${day}日 ${hour}:${minute}:${second} 時点`;
+  }
+}
+
+export function encryptData(value: string) {
+  if (!value) return '';
+  return value?.replace?.(/,/g, '')?.replace?.(/[a-zA-Z0-9]/g, '*');
+}
+
+export function checkMetAge(
+  dateString: string,
+  isParentalConsentObtained: boolean
+) {
+  if (isParentalConsentObtained) {
+    return true;
+  }
+  const today = new Date();
+  const birthDate = new Date(
+    parseInt(dateString.substring(0, 4)),
+    parseInt(dateString.substring(4, 6)) - 1,
+    parseInt(dateString.substring(6, 8))
+  );
+  const age = today.getFullYear() - birthDate.getFullYear();
+  const monthDifference = today.getMonth() - birthDate.getMonth();
+  const dayDifference = today.getDate() - birthDate.getDate();
+  if (
+    age > MIN_AGE_LIMIT ||
+    (age === MIN_AGE_LIMIT &&
+      (monthDifference > 0 || (monthDifference === 0 && dayDifference >= 0)))
+  ) {
+    return true;
+  }
+
+  return false;
+}
+export const formatPhoneNumber = (phone: string | number): string => {
+  const digits = phone.toString().replace(/\D/g, '');
+
+  if (digits.length <= 3) return digits;
+
+  let formatted = digits.slice(0, 3);
+  let remainder = digits.slice(3);
+
+  for (let i = 0; i < remainder.length; i += 4) {
+    formatted += `-${remainder.slice(i, i + 4)}`;
+  }
+
+  return formatted;
+};
+
+export const formatNumberWithCommas = (value: string) => {
+  const cleaned = value.replace(/,/g, '');
+  if (!cleaned) return '';
+  return parseInt(cleaned, 10).toLocaleString('en-US');
+};