@meatech/payblend_app_ui_component 1.0.69

package/jsons/index.ts

@@ -0,0 +1,4 @@
+import CountryCode from "./CountryCode.json";
+import Postal from "./Postal.json";
+
+export { CountryCode, Postal };

package/lib/httpNetworkTracing.tsx

@@ -0,0 +1,199 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, {useCallback, useRef} from 'react';
+import {Keyboard, Pressable, StyleSheet, View} from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {
+  PanGestureHandler,
+  PanGestureHandlerGestureEvent,
+} from 'react-native-gesture-handler';
+import NetworkLogger from 'react-native-network-logger';
+import Animated, {
+  useAnimatedGestureHandler,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+import {
+  BottomSheetBackdrop,
+  BottomSheetBackdropProps,
+  BottomSheetModal,
+} from '@gorhom/bottom-sheet';
+import {Icon} from '@ui/components';
+import Text from '@ui/components/Text';
+import {
+  bottomTabBarHeight,
+  colors,
+  deviceHeight,
+  deviceWidth,
+  getColorOpacity,
+  isIOS,
+  metrics,
+  ph,
+  pw,
+} from '@/themes';
+
+const width = deviceWidth();
+const height = deviceHeight();
+const SIZE = ph(60);
+
+type ContextType = {
+  translateX: number;
+  translateY: number;
+};
+
+export const NetworkTracing = () => {
+  const networkTracingModalRef = useRef<BottomSheetModal>(null);
+  const insets = useSafeAreaInsets();
+  const top = insets.top;
+  const bottom = insets.bottom;
+  const translateX = useSharedValue(0);
+  const translateY = useSharedValue(top);
+  const animatedIndex = useSharedValue<number>(1);
+  const isTurnOnModal = useSharedValue<boolean>(false);
+
+  const panGestureEvent = useAnimatedGestureHandler<
+    PanGestureHandlerGestureEvent,
+    ContextType
+  >({
+    onStart: (_, context) => {
+      context.translateX = translateX.value;
+      context.translateY = translateY.value;
+    },
+    onActive: (event, context) => {
+      translateX.value = event.translationX + context.translateX;
+      translateY.value = event.translationY + context.translateY;
+    },
+    onEnd: () => {
+      if (translateX.value < width / 2) {
+        translateX.value = withSpring(0);
+      }
+      if (translateX.value > width / 2) {
+        translateX.value = withSpring(width - SIZE);
+      }
+      if (translateY.value < top) {
+        translateY.value = withSpring(top);
+      }
+      if (translateY.value > height - top - bottom - SIZE) {
+        translateY.value = withSpring(
+          height - top - bottom - SIZE - (isIOS ? 0 : bottomTabBarHeight),
+        );
+      }
+    },
+  });
+
+  const handleOpenPopup = () => {
+    isTurnOnModal.value = true;
+    networkTracingModalRef.current?.present();
+  };
+  const handleClosePopup = () => {
+    isTurnOnModal.value = false;
+    networkTracingModalRef.current?.dismiss();
+  };
+
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...props}
+        appearsOnIndex={1}
+        animatedIndex={animatedIndex}
+        onPress={() => {
+          isTurnOnModal.value = false;
+          Keyboard.dismiss();
+        }}
+      />
+    ),
+    [],
+  );
+
+  const networkStyle = useAnimatedStyle(() => ({
+    transform: [{translateX: translateX.value}, {translateY: translateY.value}],
+    zIndex: isTurnOnModal.value ? 0 : 9999999,
+  }));
+
+  return (
+    <>
+      <PanGestureHandler onGestureEvent={panGestureEvent}>
+        <Animated.View style={[styles.pointer, networkStyle]}>
+          <Pressable onPress={handleOpenPopup}>
+            <Icon name="ic_network" width={SIZE} height={SIZE} />
+          </Pressable>
+        </Animated.View>
+      </PanGestureHandler>
+      <BottomSheetModal
+        ref={networkTracingModalRef}
+        snapPoints={['90%']}
+        enableDynamicSizing={false}
+        enablePanDownToClose
+        backgroundStyle={styles.backgroundModal}
+        handleIndicatorStyle={styles.handleIndicatorModal}
+        containerStyle={styles.containerModal}
+        backdropComponent={renderBackdrop}>
+        <View style={styles.content}>
+          <View style={styles.header}>
+            <Text
+              fontWeight="700"
+              size="medium"
+              color="secondary"
+              numberOfLines={1}
+              style={styles.headerTitle}>
+              Network Tracing
+            </Text>
+            <Icon
+              name="ic_close"
+              width={metrics.iconMediumPlus}
+              height={metrics.iconMediumPlus}
+              onPress={handleClosePopup}
+              style={styles.close}
+            />
+          </View>
+          <NetworkLogger
+            sort="asc"
+            theme={{
+              colors: {
+                background: colors.white['10'],
+              },
+            }}
+          />
+        </View>
+      </BottomSheetModal>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  pointer: {
+    position: 'absolute',
+  },
+  content: {
+    flex: 1,
+    backgroundColor: colors.white['10'],
+    paddingHorizontal: metrics.width.spacingBase,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingBottom: metrics.width.spacingBase,
+  },
+  headerTitle: {
+    flex: 1,
+  },
+  close: {
+    padding: metrics.height.spacingExtraSmall,
+  },
+  tracing: {
+    justifyContent: 'flex-end',
+    margin: 0,
+    marginTop: 'auto',
+    maxHeight: '90%',
+  },
+  backgroundModal: {
+    backgroundColor: colors.white['10'],
+  },
+  handleIndicatorModal: {
+    backgroundColor: colors.neutral['60'],
+    width: pw(40),
+  },
+  containerModal: {
+    backgroundColor: getColorOpacity(colors.black['10'], 0.4),
+  },
+});

package/lib/index.ts

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

package/package.json

@@ -0,0 +1,100 @@
+{
+  "name": "@meatech/payblend_app_ui_component",
+  "version": "1.0.69",
+  "description": "UI Component Library for Payblend App",
+  "main": "./dist/components/index.js",
+  "module": "./dist/components/index.js",
+  "types": "./dist/components/index.d.ts",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "directories": {
+    "lib": "lib"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "prepare": "npm run build",
+    "prepublishOnly": "npm run build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/meatech/payblend_app_ui_component.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/meatech/payblend_app_ui_component/issues"
+  },
+  "homepage": "https://github.com/meatech/payblend_app_ui_component#readme",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-native": "^0.72.0",
+    "yup": "^1.3.0"
+  },
+  "dependencies": {
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-image": "^3.0.3",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@rollup/plugin-url": "^8.0.2",
+    "@svgr/rollup": "^8.1.0",
+    "autoprefixer": "^10.4.21",
+    "fast-glob": "^3.3.3",
+    "postcss": "^8.5.3",
+    "postcss-preset-env": "^10.1.6",
+    "rollup": "^4.41.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-dts": "^6.2.1",
+    "rollup-plugin-postcss": "^4.0.2",
+    "sass": "^1.87.0",
+    "tslib": "^2.6.2"
+  },
+  "devDependencies": {
+    "@rollup/plugin-alias": "^5.1.1",
+    "@rollup/plugin-multi-entry": "^6.0.1",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "rollup-plugin-alias": "^2.2.0",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "typescript": "^5.8.3"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.js",
+      "require": "./dist/components/index.js"
+    },
+    "./constants": {
+      "types": "./dist/constants/index.d.ts",
+      "import": "./dist/constants/index.js",
+      "require": "./dist/constants/index.js"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "import": "./dist/hooks/index.js",
+      "require": "./dist/hooks/index.js"
+    },
+    "./utils": {
+      "types": "./dist/utils/index.d.ts",
+      "import": "./dist/utils/index.js",
+      "require": "./dist/utils/index.js"
+    },
+    "./themes": {
+      "types": "./dist/themes/index.d.ts",
+      "import": "./dist/themes/index.js",
+      "require": "./dist/themes/index.js"
+    },
+    "./yup": {
+      "types": "./dist/yup/index.d.ts",
+      "import": "./dist/yup/index.js",
+      "require": "./dist/yup/index.js"
+    },
+    "./jsons": {
+      "types": "./dist/jsons/index.d.ts",
+      "import": "./dist/jsons/index.js",
+      "require": "./dist/jsons/index.js"
+    }
+  }
+}

package/patches/react-native-snap-carousel+3.9.1.patch

@@ -0,0 +1,114 @@
+diff --git a/node_modules/react-native-snap-carousel/src/carousel/Carousel.js b/node_modules/react-native-snap-carousel/src/carousel/Carousel.js
+index dae71a3..edfdc41 100644
+--- a/node_modules/react-native-snap-carousel/src/carousel/Carousel.js
++++ b/node_modules/react-native-snap-carousel/src/carousel/Carousel.js
+@@ -43,8 +43,8 @@ export default class Carousel extends Component {
+         autoplayDelay: PropTypes.number,
+         autoplayInterval: PropTypes.number,
+         callbackOffsetMargin: PropTypes.number,
+-        containerCustomStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style,
+-        contentContainerCustomStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style,
++        containerCustomStyle: PropTypes.object,
++        contentContainerCustomStyle: PropTypes.object,
+         enableMomentum: PropTypes.bool,
+         enableSnap: PropTypes.bool,
+         firstItem: PropTypes.number,
+@@ -61,7 +61,7 @@ export default class Carousel extends Component {
+         scrollEnabled: PropTypes.bool,
+         scrollInterpolator: PropTypes.func,
+         slideInterpolatedStyle: PropTypes.func,
+-        slideStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style,
++        slideStyle: PropTypes.object,
+         shouldOptimizeUpdates: PropTypes.bool,
+         swipeThreshold: PropTypes.number,
+         useScrollView: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+@@ -151,9 +151,6 @@ export default class Carousel extends Component {
+         this._ignoreNextMomentum = false;
+ 
+         // Warnings
+-        if (!ViewPropTypes) {
+-            console.warn('react-native-snap-carousel: It is recommended to use at least version 0.44 of React Native with the plugin');
+-        }
+         if (!props.vertical && (!props.sliderWidth || !props.itemWidth)) {
+             console.error('react-native-snap-carousel: You need to specify both `sliderWidth` and `itemWidth` for horizontal carousels');
+         }
+diff --git a/node_modules/react-native-snap-carousel/src/pagination/Pagination.js b/node_modules/react-native-snap-carousel/src/pagination/Pagination.js
+index 5c021cf..a28f1f8 100644
+--- a/node_modules/react-native-snap-carousel/src/pagination/Pagination.js
++++ b/node_modules/react-native-snap-carousel/src/pagination/Pagination.js
+@@ -1,5 +1,5 @@
+ import React, { PureComponent } from 'react';
+-import { I18nManager, Platform, View, ViewPropTypes } from 'react-native';
++import { I18nManager, Platform, View } from 'react-native';
+ import PropTypes from 'prop-types';
+ import PaginationDot from './PaginationDot';
+ import styles from './Pagination.style';
+@@ -14,16 +14,16 @@ export default class Pagination extends PureComponent {
+         dotsLength: PropTypes.number.isRequired,
+         activeOpacity: PropTypes.number,
+         carouselRef: PropTypes.object,
+-        containerStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style,
++        containerStyle: PropTypes.object,
+         dotColor: PropTypes.string,
+-        dotContainerStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style,
++        dotContainerStyle: PropTypes.object,
+         dotElement: PropTypes.element,
+-        dotStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style,
++        dotStyle: PropTypes.object,
+         inactiveDotColor: PropTypes.string,
+         inactiveDotElement: PropTypes.element,
+         inactiveDotOpacity: PropTypes.number,
+         inactiveDotScale: PropTypes.number,
+-        inactiveDotStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style,
++        inactiveDotStyle: PropTypes.object,
+         renderDots: PropTypes.func,
+         tappableDots: PropTypes.bool,
+         vertical: PropTypes.bool,
+diff --git a/node_modules/react-native-snap-carousel/src/pagination/PaginationDot.js b/node_modules/react-native-snap-carousel/src/pagination/PaginationDot.js
+index e59d196..9fe0fb9 100644
+--- a/node_modules/react-native-snap-carousel/src/pagination/PaginationDot.js
++++ b/node_modules/react-native-snap-carousel/src/pagination/PaginationDot.js
+@@ -1,5 +1,5 @@
+ import React, { PureComponent } from 'react';
+-import { View, Animated, Easing, TouchableOpacity, ViewPropTypes } from 'react-native';
++import { View, Animated, Easing, TouchableOpacity } from 'react-native';
+ import PropTypes from 'prop-types';
+ import styles from './Pagination.style';
+ 
+@@ -12,11 +12,11 @@ export default class PaginationDot extends PureComponent {
+         activeOpacity: PropTypes.number,
+         carouselRef: PropTypes.object,
+         color: PropTypes.string,
+-        containerStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style,
++        containerStyle: PropTypes.object,
+         inactiveColor: PropTypes.string,
+-        inactiveStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style,
++        inactiveStyle: PropTypes.object,
+         index: PropTypes.number,
+-        style: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style,
++        style: PropTypes.object,
+         tappable: PropTypes.bool
+     };
+ 
+diff --git a/node_modules/react-native-snap-carousel/src/parallaximage/ParallaxImage.js b/node_modules/react-native-snap-carousel/src/parallaximage/ParallaxImage.js
+index 8bc774a..aa0bded 100644
+--- a/node_modules/react-native-snap-carousel/src/parallaximage/ParallaxImage.js
++++ b/node_modules/react-native-snap-carousel/src/parallaximage/ParallaxImage.js
+@@ -1,7 +1,7 @@
+ // Parallax effect inspired by https://github.com/oblador/react-native-parallax/
+ 
+ import React, { Component } from 'react';
+-import { View, ViewPropTypes, Image, Animated, Easing, ActivityIndicator, findNodeHandle } from 'react-native';
++import { View, Image, Animated, Easing, ActivityIndicator, findNodeHandle } from 'react-native';
+ import PropTypes from 'prop-types';
+ import styles from './ParallaxImage.style';
+ 
+@@ -16,7 +16,7 @@ export default class ParallaxImage extends Component {
+         sliderHeight: PropTypes.number, // passed from <Carousel />
+         sliderWidth: PropTypes.number, // passed from <Carousel />
+         vertical: PropTypes.bool, // passed from <Carousel />
+-        containerStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style,
++        containerStyle: PropTypes.object,
+         dimensions: PropTypes.shape({
+             width: PropTypes.number,
+             height: PropTypes.number

package/rollup.config.mjs

@@ -0,0 +1,142 @@
+import typescript from "@rollup/plugin-typescript";
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import dts from "rollup-plugin-dts";
+import json from "@rollup/plugin-json";
+import glob from "fast-glob";
+import image from '@rollup/plugin-image';
+import url from '@rollup/plugin-url';
+import svgr from '@svgr/rollup';
+import postcss from 'rollup-plugin-postcss';
+import copy from 'rollup-plugin-copy';
+import alias from '@rollup/plugin-alias';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const entries = await glob([
+  "./components/index.ts",
+  "./hooks/index.ts",
+  "./utils/index.ts",
+  "./themes/index.ts",
+  "./assets/index.ts",
+  "./constants/index.ts",
+  "./types/index.ts",
+  "./data/index.ts",
+  "./yup/index.ts",
+  "./jsons/index.ts",
+]);
+
+if (entries.length === 0) {
+  throw new Error(
+    "No entry files found. Please check your glob patterns and file structure."
+  );
+}
+
+const external = [
+  'react',
+  'react-dom',
+  'react-native',
+  'tslib',
+  'yup',
+  /^@babel\/runtime/,
+  /^@rollup\/.*/,
+  /^rollup-plugin-.*/
+];
+
+const config = [
+  {
+    input: entries,
+    output: {
+      dir: "dist",
+      format: "esm",
+      sourcemap: true,
+      preserveModules: true,
+      preserveModulesRoot: ".",
+    },
+    external,
+    plugins: [
+      alias({
+        entries: [
+          { find: '@ui', replacement: path.resolve(__dirname, '.') }
+        ]
+      }),
+      resolve({
+        preferBuiltins: true,
+        mainFields: ['module', 'main'],
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.json']
+      }),
+      commonjs({
+        include: /node_modules/,
+        transformMixedEsModules: true,
+        requireReturnsDefault: 'auto'
+      }),
+      typescript({
+        tsconfig: './tsconfig.json',
+        sourceMap: true,
+        inlineSources: true,
+        compilerOptions: {
+          module: 'ESNext',
+          declaration: true,
+          declarationDir: './dist',
+          allowJs: true
+        }
+      }),
+      json(),
+      image(),
+      url({
+        include: [
+          '**/*.woff', 
+          '**/*.woff2', 
+          '**/*.ttf', 
+          '**/*.eot',
+          '**/*.png',
+          '**/*.jpg',
+          '**/*.jpeg',
+          '**/*.gif',
+          '**/*.svg'
+        ],
+        limit: 0,
+        fileName: '[name][extname]',
+        publicPath: 'assets/'
+      }),
+      svgr(),
+      postcss({
+        extensions: ['.css', '.scss', '.sass'],
+        minimize: true,
+        extract: true,
+        modules: true,
+        use: ['sass']
+      }),
+      copy({
+        targets: [
+          { 
+            src: 'assets/images/**/*', 
+            dest: 'dist/assets/images',
+            flatten: false
+          },
+          { 
+            src: 'assets/fonts/**/*', 
+            dest: 'dist/assets/fonts',
+            flatten: false
+          }
+        ],
+        verbose: true
+      })
+    ],
+  },
+  {
+    input: entries,
+    output: {
+      dir: "dist",
+      format: "esm",
+      preserveModules: true,
+      preserveModulesRoot: ".",
+    },
+    external,
+    plugins: [dts()],
+  },
+];
+
+export default config;

package/themes/base/index.ts

@@ -0,0 +1,3 @@
+import {BaseStyles} from './styles';
+
+export {BaseStyles};

package/themes/base/styles.ts

@@ -0,0 +1,22 @@
+import {StyleSheet} from 'react-native';
+
+export const BaseStyles = StyleSheet.create({
+  flex0: {
+    flex: 0,
+  },
+  flex1: {
+    flex: 1,
+  },
+  flexGrow1: {
+    flexGrow: 1,
+  },
+  textCenter: {
+    textAlign: 'center',
+  },
+  black04: {
+    backgroundColor: 'rgba(0, 0, 0, 0.4)',
+  },
+  hideIndicator: {
+    display: 'none',
+  },
+});