@meatech/payblend_app_ui_component 1.0.69

package/themes/colors.ts

@@ -0,0 +1,116 @@
+const colors = {
+  red: {
+    10: '#FCE9E9',
+    20: '#F5BCBC',
+    40: '#EF8F8F',
+    60: '#BF4040',
+    80: '#950404',
+    90: '#660000',
+    100: '#4D0000',
+  },
+  orange: {
+    10: '#FCF2E9',
+    20: '#F5D9BC',
+    40: '#EFBF8F',
+    60: '#BF8040',
+    80: '#954C04',
+    90: '#663300',
+    100: '#4D2600',
+  },
+  yellow: {
+    10: '#FCFCE9',
+    20: '#F5F5BC',
+    40: '#EFEF8F',
+    60: '#BFBF40',
+    80: '#959504',
+    90: '#666600',
+    100: '#4D4D00',
+  },
+  green: {
+    10: '#EBFAED',
+    20: '#D6F5DB',
+    40: '#77CA85',
+    60: '#43A854',
+    80: '#3F7D4A',
+    90: '#365E3D',
+    100: '#2E4832',
+  },
+  teal: {
+    10: '#E9F9FC',
+    20: '#BCECF5',
+    40: '#7DD6E8',
+    60: '#40AABF',
+    80: '#047D95',
+    90: '#005566',
+    100: '#00404D',
+  },
+  blue: {
+    10: '#E6EEFE',
+    20: '#B8CEF9',
+    40: '#7DA1E8',
+    60: '#406ABF',
+    80: '#043495',
+    90: '#002266',
+    100: '#00194D',
+  },
+  purple: {
+    10: '#FEE6FE',
+    20: '#F9B8F9',
+    40: '#E87DE8',
+    60: '#BF40BF',
+    80: '#950495',
+    90: '#660066',
+    100: '#4D004D',
+  },
+  pink: {
+    10: '#FEE6EE',
+    20: '#FBB6CD',
+    40: '#E87DA1',
+    60: '#BF406A',
+    80: '#950434',
+    90: '#660022',
+    100: '#4D001A',
+  },
+  neutral: {
+    10: '#FAFAFA',
+    20: '#EFF0F0',
+    40: '#DCDEE0',
+    60: '#89949F',
+    80: '#5C6670',
+    85: '#4C4948',
+    90: '#304050',
+    100: '#0D1A26',
+  },
+  white: {
+    10: '#FFFFFF',
+  },
+  black: {
+    10: '#000000',
+    100: '#000000',
+  },
+  primary: {
+    100: '#12C7BE',
+  },
+  primaryWeb: {
+    100: '#12ACC7',
+  },
+  secondary: {
+    100: '#1B74BC',
+  },
+  tertiary: {
+    100: '#BCE3B5',
+  },
+  error: {
+    100: '#BF4040',
+  },
+};
+
+const getColorOpacity = (color: string, opacity: number): string => {
+  if (opacity >= 0 && opacity <= 1 && color.includes('#')) {
+    const hexValue = Math.round(opacity * 255).toString(16);
+    return `${color.slice(0, 7)}${hexValue.padStart(2, '0').toUpperCase()}`;
+  }
+  return color;
+};
+
+export {colors, getColorOpacity};

package/themes/images.ts

@@ -0,0 +1,72 @@
+export const Images = {
+  payblend_logo: require('../assets/images/payblend_logo.png'),
+  ic_alert: require('../assets/images/ic_alert.png'),
+  ic_arrow_right_visa_card: require('../assets/images/ic_arrow_right_visa_card.png'),
+  ic_arrow_right: require('../assets/images/ic_arrow_right.png'),
+  ic_back: require('../assets/images/ic_back.png'),
+  ic_bank_building: require('../assets/images/ic_bank_building.png'),
+  ic_bell: require('../assets/images/ic_bell.png'),
+  ic_check: require('../assets/images/ic_check.png'),
+  ic_checkmark_circle: require('../assets/images/ic_checkmark_circle.png'),
+  ic_checkmark_white: require('../assets/images/ic_checkmark_white.png'),
+  ic_circle_alert_outline: require('../assets/images/ic_circle_alert_outline.png'),
+  ic_circle_question: require('../assets/images/ic_circle_question.png'),
+  ic_circle_user: require('../assets/images/ic_circle_user.png'),
+  ic_clipboard: require('../assets/images/ic_clipboard.png'),
+  ic_close: require('../assets/images/ic_close.png'),
+  ic_copy: require('../assets/images/ic_copy.png'),
+  ic_file: require('../assets/images/ic_file.png'),
+  ic_fingerprint: require('../assets/images/ic_fingerprint.png'),
+  ic_fire: require('../assets/images/ic_fire.png'),
+  ic_home: require('../assets/images/ic_home.png'),
+  ic_info: require('../assets/images/ic_info.png'),
+  ic_message_lines: require('../assets/images/ic_message_lines.png'),
+  ic_more_horizontal: require('../assets/images/ic_more_horizontal.png'),
+  ic_network: require('../assets/images/ic_network.png'),
+  ic_point_p: require('../assets/images/ic_point_p.png'),
+  ic_refresh_cw: require('../assets/images/ic_refresh_cw.png'),
+  ic_refresh: require('../assets/images/ic_refresh.png'),
+  ic_salary: require('../assets/images/ic_salary.png'),
+  ic_sliders: require('../assets/images/ic_sliders.png'),
+  ic_store_24_hour: require('../assets/images/ic_store_24_hour.png'),
+  ic_un_check_circle: require('../assets/images/ic_un_check_circle.png'),
+  ic_un_square_check: require('../assets/images/ic_un_square_check.png'),
+  ic_verdigris_check_circle: require('../assets/images/ic_verdigris_check_circle.png'),
+  ic_verdigris_chevron_right: require('../assets/images/ic_verdigris_chevron_right.png'),
+  ic_verdigris_square_check: require('../assets/images/ic_verdigris_square_check.png'),
+  ic_visa_card: require('../assets/images/ic_visa_card.png'),
+  ic_wallet: require('../assets/images/ic_wallet.png'),
+  ic_warning: require('../assets/images/ic_warning.png'),
+  ic_eye_off: require('../assets/images/ic_eye_off.png'),
+  ic_eye: require('../assets/images/ic_eye.png'),
+  app_logo: require('../assets/images/app_logo.png'),
+  ic_white_plus: require('../assets/images/ic_white_plus.png'),
+  ic_white_rotate_right: require('../assets/images/ic_white_rotate_right.png'),
+  ic_chevron_down: require('../assets/images/ic_chevron_down.png'),
+  ic_chevron_right: require('../assets/images/ic_chevron_right.png'),
+  ic_search: require('../assets/images/ic_search.png'),
+  ic_card_image: require('../assets/images/card_image.png'),
+  qr_code: require('../assets/images/qr_code.png'),
+  tap_box: require('../assets/images/tap_box.png'),
+  ic_noti: require('../assets/images/ic_noti.png'),
+  ic_reload: require('../assets/images/ic_reload.png'),
+  ic_warning_red: require('../assets/images/ic_warning_red.png'),
+  ic_edit: require('../assets/images/ic_edit.png'),
+  ic_tap_box: require('../assets/images/tap_box.png'),
+  ic_pay_success: require('../assets/images/ic_pay_success.png'),
+
+  // Banners
+  banner1: require('../assets/images/banners/banner_1.png'),
+  banner2: require('../assets/images/banners/banner_2.png'),
+  banner3: require('../assets/images/banners/banner_3.png'),
+  banner4: require('../assets/images/banners/banner_4.png'),
+  banner5: require('../assets/images/banners/banner_5.png'),
+  banner6: require('../assets/images/banners/banner_6.png'),
+  banner7: require('../assets/images/banners/banner_7.png'),
+  banner8: require('../assets/images/banners/banner_8.png'),
+  banner9: require('../assets/images/banners/banner_9.png'),
+  couponList1: require('../assets/images/banners/coupon_list_1.png'),
+  couponList2: require('../assets/images/banners/coupon_list_2.png'),
+  couponList3: require('../assets/images/banners/coupon_list_3.png'),
+  couponList4: require('../assets/images/banners/coupon_list_4.png'),
+};

package/themes/index.ts

@@ -0,0 +1,5 @@
+export * from './base';
+export * from './colors';
+export * from './images';
+export * from './metrics';
+export * from './stats';

package/themes/metrics.ts

@@ -0,0 +1,151 @@
+import {Dimensions, Platform} from 'react-native';
+
+const {width, height} = Dimensions.get('window');
+
+const responsiveWidth = <T extends number>(value: T) =>
+  (width * (value / width)) as T;
+const responsiveHeight = <T extends number>(value: T) =>
+  (height * (value / height)) as T;
+const responsiveFont = <T extends number>(value: T) =>
+  (width * (value / width)) as T;
+
+const deviceWidth = (): number => width;
+const deviceHeight = (): number => height;
+
+const isIOS: boolean = Platform.OS === 'ios';
+const isWeb: boolean = Platform.OS === 'web';
+
+const metrics = {
+  // Icon size
+  iconMicro: responsiveHeight(10),
+  iconExtraTiny: responsiveHeight(12),
+  iconTiny: responsiveHeight(14),
+  iconExtraSmall: responsiveHeight(16),
+  iconSmall: responsiveHeight(18),
+  iconMedium: responsiveHeight(20),
+  iconMediumPlus: responsiveHeight(24),
+  iconLarge: responsiveHeight(30),
+  iconExtraLarge: responsiveHeight(32),
+  iconSemiLarge: responsiveHeight(40),
+  iconHuge: responsiveHeight(48),
+  iconExtraHuge: responsiveHeight(56),
+  iconMassive: responsiveHeight(64),
+  iconSuperMassive: responsiveHeight(70),
+  iconExtraSuperMassive: responsiveHeight(80),
+
+  height: {
+    spacingMinimal: responsiveHeight(0.5),
+    spacingMicro: responsiveHeight(1),
+    spacingNano: responsiveHeight(2),
+    spacingTiny: responsiveHeight(4),
+    spacingSmall: responsiveHeight(6),
+    spacingExtraSmall: responsiveHeight(8),
+    spacingSlightlySmall: responsiveHeight(12),
+    spacingBase: responsiveHeight(16),
+    spacingSlightlyMedium: responsiveHeight(18),
+    spacingMedium: responsiveHeight(20),
+    spacingLarge: responsiveHeight(24),
+    spacingExtraLarge: responsiveHeight(28),
+    spacingXXLarge: responsiveHeight(32),
+    spacingXXXLarge: responsiveHeight(36),
+    spacingHuge: responsiveHeight(48),
+    spacingMassive: responsiveHeight(64),
+    spacingImmense: responsiveHeight(66),
+    spacingEnormous: responsiveHeight(72),
+    spacingGargantuan: responsiveHeight(74),
+  },
+  width: {
+    spacingMinimal: responsiveWidth(0.5),
+    spacingMicro: responsiveWidth(1),
+    spacingNano: responsiveWidth(2),
+    spacingXTiny: responsiveWidth(3),
+    spacingTiny: responsiveWidth(4),
+    spacingSmall: responsiveWidth(6),
+    spacingExtraSmall: responsiveWidth(8),
+    spacingSlightlySmall: responsiveWidth(12),
+    spacingBase: responsiveWidth(16),
+    spacingSlightlyMedium: responsiveWidth(18),
+    spacingMedium: responsiveWidth(20),
+    spacingLarge: responsiveWidth(24),
+    spacingExtraLarge: responsiveWidth(28),
+    spacingXXLarge: responsiveWidth(32),
+    spacingXXXLarge: responsiveWidth(36),
+    spacingHuge: responsiveWidth(48),
+    spacingMassive: responsiveWidth(64),
+    spacingImmense: responsiveWidth(66),
+    spacingEnormous: responsiveWidth(72),
+    spacingGargantuan: responsiveWidth(74),
+  },
+
+  // Border width
+  borderWidthNone: 0,
+  borderWidthThin: responsiveHeight(0.5),
+  borderWidthMedium: responsiveHeight(1),
+  borderWidthTiny: responsiveHeight(2),
+
+  // Border radius
+  borderRadiusTiny: responsiveHeight(2),
+  borderRadiusSmall: responsiveHeight(3),
+  borderRadiusBase: responsiveHeight(4),
+  borderRadiusMediumPlus: responsiveHeight(6),
+  borderRadiusSemiLarge: responsiveHeight(8),
+  borderRadiusLarge: responsiveHeight(10),
+  borderRadiusExtraLarge: responsiveHeight(12),
+  borderRadiusHuge: responsiveHeight(20),
+  borderRadiusMassive: responsiveHeight(50),
+} as const;
+
+const FontSizes = {
+  font3XS: responsiveFont(6),
+  fontXXS: responsiveFont(8),
+  fontXS: responsiveFont(12),
+  fontSmall: responsiveFont(14),
+  fontMedium: responsiveFont(16),
+  fontLarge: responsiveFont(20),
+  fontXL: responsiveFont(24),
+  fontXXL: responsiveFont(32),
+  fontXXXL: responsiveFont(40),
+  font4XL: responsiveFont(48),
+} as const;
+
+const FontFamily = {
+  Thin: 'NotoSansJP-Thin',
+  ExtraLight: 'NotoSansJP-ExtraLight',
+  Light: 'NotoSansJP-Light',
+  Regular: 'NotoSansJP-Regular',
+  Medium: 'NotoSansJP-Medium',
+  SemiBold: 'NotoSansJP-SemiBold',
+  Bold: 'NotoSansJP-Bold',
+  ExtraBold: 'NotoSansJP-ExtraBold',
+  Black: 'NotoSansJP-Black',
+} as const;
+
+const Space = {
+  xxxxs: responsiveWidth(2),
+  xxxs: responsiveWidth(4),
+  xxs: responsiveWidth(6),
+  xs: responsiveWidth(8),
+  small: responsiveWidth(12),
+  medium: responsiveWidth(16),
+  large: responsiveWidth(24),
+  xl: responsiveWidth(32),
+  xxl: responsiveWidth(48),
+  xxxl: responsiveWidth(72),
+} as const;
+
+const bottomTabBarHeight = isIOS ? responsiveHeight(88) : responsiveHeight(66);
+
+export {
+  bottomTabBarHeight,
+  metrics,
+  FontSizes,
+  FontFamily,
+  isIOS,
+  isWeb,
+  Space,
+  responsiveFont as pf,
+  responsiveHeight as ph,
+  responsiveWidth as pw,
+  deviceWidth,
+  deviceHeight,
+};

package/themes/stats.ts

@@ -0,0 +1,41 @@
+// TODO: Waiting for StyleGuide from design
+import {Edges} from 'react-native-safe-area-context';
+import {FontSizes, metrics, pw} from './metrics';
+
+export const ANGLE_CENTER = {x: 0.5, y: 0.5};
+export const DEFAULT_ANGLE = 135;
+export const DEFAULT_DISABLED_OPACITY = 0.6;
+export const DEFAULT_POSITION_TEXT =
+  (metrics.width.spacingHuge + FontSizes.fontSmall / 2) / 2;
+export const START_GRADIENT_TEXT = {x: 0, y: 0};
+export const END_GRADIENT_TEXT = {x: 1.9, y: 1.1};
+export const OPACITY_VALUE_GRADIENT_TEXT = 0;
+export const MAXIMUM_PERCENT = 100;
+export const ACTIVE_OPACITY = 0.6;
+export const ASPECT_RATIO = 1;
+export const BORDER_WIDTH_05 = 0.5;
+export const BORDER_WIDTH_07 = 0.7;
+export const BORDER_WIDTH = 1;
+export const END_REACHED_THRESHOLD = 0.7;
+export const Z_INDEX = 1;
+export const ELEVATION = 1;
+export const NUMBER_OF_LINES = {
+  ONE_LINE: 1,
+  TWO_LINE: 2,
+  THREE_LINE: 3,
+};
+export const REFERRAL_CARD = {
+  RATING_DEFAULT: 0,
+  NUMBER_OF_COMMENT: 0,
+};
+export const SHORT_CARD = {
+  NUMBER_OF_FAVORITE: 0,
+  NUMBER_OF_COMMENT: 0,
+  RATING_DEFAULT: 0,
+  INTERACT_BUTTON_WIDTH: '40%',
+};
+export const EDGES: Edges = ['top', 'left', 'right'];
+export const BADGE = {
+  SIZE_ICON_DEFAULT: pw(32),
+  DISPLAY_DISTANCE: (size: number) => pw(size / 4),
+};

package/tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "ESNext",
+    "lib": ["dom", "esnext"],
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "./dist",
+    "strict": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react",
+    "baseUrl": ".",
+    "paths": {
+      "@ui/*": ["./*"]
+    }
+  },
+  "include": [
+    "components/**/*",
+    "hooks/**/*",
+    "utils/**/*",
+    "themes/**/*",
+    "assets/**/*",
+    "constants/**/*",
+    "types/**/*",
+    "data/**/*",
+    "yup/**/*",
+    "jsons/**/*"
+  ],
+  "exclude": ["node_modules", "dist"]
+}

package/types/data.ts

@@ -0,0 +1,11 @@
+export interface PostalI {
+    code: string;
+    name: string;
+    kana: string;
+    pref: {
+      code: string;
+      name: string;
+      kana: string;
+    };
+  }
+  

package/types/index.ts

@@ -0,0 +1,3 @@
+export * from './toast';
+export * from './metrics';
+export * from './data';

package/types/metrics.ts

@@ -0,0 +1,36 @@
+export interface IHitSlop {
+  top: number;
+  bottom: number;
+  right: number;
+  left: number;
+}
+
+export interface IColor {
+  [color: string]: string;
+}
+
+export interface IShadow {
+  shadowColor?: string;
+  shadowRadius?: number;
+  elevation?: number;
+  shadowOpacity?: number;
+  shadowOffset?: {width: number; height: number};
+}
+
+export interface IFontSize {
+  small: number;
+  span: number;
+  body: number;
+  large: number;
+  title: number;
+}
+
+export interface ISvgProps {
+  size: number;
+  color?: string;
+}
+
+export interface ITabRegister {
+  id: number;
+  title: string;
+}

package/types/react-native-config.d.ts

@@ -0,0 +1,30 @@
+declare module 'react-native-config' {
+  export interface NativeConfig {
+    APP_ENV?: string;
+    API_HOST?: string;
+    API_DEVTOOL_HOST?: string;
+    APP_NAME?: string;
+    DOMAIN_DEEP_LINK: string;
+    URL_TERM?: string;
+    URL_POLICY?: string;
+
+    OUTPUT_NAME?: string;
+
+    ANDROID_APP_ID: string;
+    ANDROID_APP_VERSION_CODE: string;
+    ANDROID_APP_VERSION_NAME: string;
+
+    IOS_APP_ID: string;
+    IOS_APP_SCHEME?: string;
+    IOS_EXPORT_METHOD: string;
+    IOS_RELEASE_CONFIGURATION?: string;
+    IOS_APP_VERSION_BUILD: number;
+    IOS_APP_VERSION: string;
+
+    DEPLOYGATE_API_TOKEN?: string;
+    DEPLOYGATE_USER?: string;
+  }
+
+  export const Config: NativeConfig;
+  export default Config;
+}