Task/mob-3 Part 1

.github/workflows/test.yml

@@ -27,5 +27,8 @@ jobs:
       - name: Install dependencies
         run: cd payment_sdk && yarn install
 
+      - name: Run Lint Check
+        run: cd payment_sdk && yarn lint
+
       - name: Run Jest tests
         run: cd payment_sdk && yarn test

example/PaymentScreen.tsx

@@ -1,5 +1,6 @@
 import React, {useState} from 'react';
 import {
+  useColorScheme,
   View,
   Text,
   TextInput,
@@ -18,6 +19,7 @@ export enum CurrencyTypes {
 const PaymentScreen = () => {
   const [amount, setAmount] = useState('');
   const [currency, setCurrency] = useState(CurrencyTypes.JPY);
+  const colorScheme = useColorScheme(); // Detects the color scheme of the device
 
   // use createPayment method to invoke the payment screen
   const {createPayment} = KomojuSDK.useKomoju();
@@ -45,8 +47,21 @@ const PaymentScreen = () => {
     setCurrency(key);
   };
 
+  const dynamicStyles = StyleSheet.create({
+    container: {
+      backgroundColor: colorScheme === 'dark' ? '#333' : '#FFF',
+    },
+    text: {
+      color: colorScheme === 'dark' ? '#FFF' : '#000',
+    },
+    input: {
+      backgroundColor: colorScheme === 'dark' ? '#555' : '#FFF',
+      color: colorScheme === 'dark' ? '#FFF' : '#000',
+    },
+  });
+
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, dynamicStyles.container]}>
       <View style={styles.currencyRow}>
         {(Object.keys(CurrencyTypes) as Array<keyof typeof CurrencyTypes>).map(
           key => (
@@ -55,17 +70,21 @@ const PaymentScreen = () => {
                 style={[
                   styles.currencyText,
                   key === currency && styles.currencySelectedText,
+                  dynamicStyles.text,
                 ]}>
                 {key}
               </Text>
             </Pressable>
           ),
         )}
       </View>
-      <Text style={styles.title}>Enter Amount to Pay with Komoju</Text>
+      <Text style={[styles.title, dynamicStyles.text]}>
+        Enter Amount to Pay with Komoju
+      </Text>
       <TextInput
-        style={styles.input}
+        style={[styles.input, dynamicStyles.input]}
         placeholder="Enter amount"
+        placeholderTextColor={colorScheme === 'dark' ? '#CCC' : '#333'}
         keyboardType="numeric"
         value={amount}
         onChangeText={setAmount}
@@ -75,6 +94,7 @@ const PaymentScreen = () => {
           title="Checkout"
           onPress={handleSessionPay}
           disabled={!amount}
+          color={colorScheme === 'dark' ? '#888' : '#007AFF'}
         />
       </View>
     </View>

payment_sdk/assets.d.ts

@@ -0,0 +1,5 @@
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module '*.gif';
+declare module '*.json';

payment_sdk/babel.config.js

@@ -5,4 +5,20 @@ module.exports = {
     "@babel/preset-typescript",
     "module:@react-native/babel-preset",
   ],
+  plugins: [
+    [
+      'module-resolver',
+      {
+        root: ['./src'],
+        extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
+        alias: {
+          "@services": "./src/services",
+          "@assets": "./src/assets",
+          "@components": "./src/components",
+          "@util": "./src/util",
+          "@context": "./src/context"
+        }
+      }
+    ]
+  ]
 };

payment_sdk/eslint.config.mjs

@@ -1,12 +1,93 @@
-import globals from "globals";
+import { fixupConfigRules } from "@eslint/compat";
 import pluginJs from "@eslint/js";
-import tseslint from "typescript-eslint";
+import pluginImport from "eslint-plugin-import";
 import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
-import { fixupConfigRules } from "@eslint/compat";
+import globals from "globals";
+import tseslint from "typescript-eslint";
 
 export default [
-  { languageOptions: { globals: globals.browser } },
+  {
+    ignores: [
+      "node_modules/",
+      "dist/*",
+      "*.config.js",
+      "*.config.mjs",
+      "babel.config.js",
+      "setupTests.js",
+      "src/__tests__/*",
+    ]
+  },
+  {
+    files: ["**/*.ts", "**/*.tsx"],
+    languageOptions:
+      { globals: globals.browser }
+  },
   pluginJs.configs.recommended,
   ...tseslint.configs.recommended,
   ...fixupConfigRules(pluginReactConfig),
-];
+  {
+    plugins: {
+      import: pluginImport,
+    },
+    rules: {
+      "import/order": [
+        "error",
+        {
+          groups: [
+            ["builtin", "external", "internal"],
+            ["parent", "sibling", "index"],
+            []
+          ],
+          pathGroups: [
+            {
+              pattern: "react",
+              group: "external",
+              position: "before"
+            },
+            {
+              pattern: "react-native",
+              group: "external",
+              position: "before"
+            },
+            {
+              pattern: "react-native-*",
+              group: "external",
+              position: "before"
+            },
+            {
+              pattern: "@context/**",
+              group: "internal",
+              position: "after"
+            },
+            {
+              pattern: "@components/**",
+              group: "internal",
+              position: "after"
+            },
+            {
+              pattern: "@services/**",
+              group: "internal",
+              position: "after"
+            },
+            {
+              pattern: "@util/**",
+              group: "internal",
+              position: "after"
+            },
+            {
+              pattern: "@assets/**",
+              group: "internal",
+              position: "after"
+            }
+          ],
+          pathGroupsExcludedImportTypes: ["react", "react-native"],
+          "newlines-between": "always",
+          alphabetize: {
+            order: "asc",
+            caseInsensitive: true
+          }
+        }
+      ]
+    }
+  }
+];

payment_sdk/jest.config.js

@@ -1,8 +1,15 @@
+/* eslint-disable no-undef */
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { pathsToModuleNameMapper } = require("ts-jest");
+
+const { compilerOptions } = require("./tsconfig.json");
+
 module.exports = {
   preset: "react-native",
   testEnvironment: "node",
   modulePathIgnorePatterns: ["<rootDir>/node_modules"],
   setupFiles: ["<rootDir>/setupTests.js"],
   setupFilesAfterEnv: ["@testing-library/jest-native/extend-expect"],
   transformIgnorePatterns: [],
-};
+  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, { prefix: "<rootDir>/src/" }),
+};

payment_sdk/package.json

@@ -2,10 +2,15 @@
   "name": "react-native-komoju",
   "version": "1.0.0",
   "description": "degica payment SDK",
-  "main": "src/index.ts",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": ["dist"],
   "scripts": {
+    "build": "npm run build:js && npm run build:types",
+    "build:js": "babel src --out-dir dist --extensions \".ts,.tsx\" --copy-files",
+    "build:types": "tsc --emitDeclarationOnly --outDir dist",
     "test": "jest",
-    "lint": "eslint . --ignore-pattern babel.config.js --ignore-pattern jest.config.js --ignore-pattern setupTests.js"
+    "lint": "eslint ."
   },
   "author": "",
   "license": "MIT",
@@ -23,7 +28,9 @@
     "@types/react": "^18.3.3",
     "@typescript-eslint/parser": "^7.12.0",
     "babel-jest": "^29.7.0",
+    "babel-plugin-module-resolver": "^5.0.2",
     "eslint": "9.x",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-react": "^7.34.2",
     "globals": "^15.3.0",
     "jest": "^29.7.0",
@@ -42,10 +49,10 @@
     "i18next": "^23.11.5",
     "react-i18next": "^14.1.2",
     "react-native-svg": "^15.3.0",
-    "react-native-webview": "^13.10.2",
-    "react-native-worklets-core": "^1.3.3",
     "react-native-vision-camera": "^4.3.2",
-    "react-native-vision-camera-text-recognition": "^3.0.4"
+    "react-native-vision-camera-text-recognition": "^3.0.4",
+    "react-native-webview": "^13.10.2",
+    "react-native-worklets-core": "^1.3.3"
   },
   "resolutions": {
     "@types/react": "^18.2.44"
@@ -54,4 +61,4 @@
     "react": "*",
     "react-native": "*"
   }
-}
+}

payment_sdk/src/__tests__/CardInputGroup.test.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode } from "react";
 import { render, fireEvent } from "@testing-library/react-native";
 
 import { determineCardType, formatCreditCardNumber, formatExpiry } from "../util/helpers";
-import { Actions, DispatchContext, StateContext } from "../state";
+import { Actions, DispatchContext, StateContext } from "../context/state";
 import CardInputGroup from "../components/CardInputGroup";
 import { isCardNumberValid, validateCardExpiry } from "../util/validator";
 

payment_sdk/src/__tests__/CardSection.test.tsx

@@ -4,7 +4,7 @@ import { fireEvent, render, waitFor } from "@testing-library/react-native";
 import CardSection from "../components/sections/CardSection";
 
 import StateProvider from "../components/paymentState/stateProvider";
-import { DispatchContext, StateContext } from "../state";
+import { DispatchContext, StateContext } from "../context/state";
 import { PaymentType } from "../util/types";
 
 export const mockState = {

payment_sdk/src/assets/languages/i18n.js

@@ -1,5 +1,6 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
+
 import en from './en.json';
 import ja from './ja.json';
 

payment_sdk/src/components/CardInputGroup.tsx

@@ -1,30 +1,34 @@
-import { StyleSheet, View } from "react-native";
 import React, {
   memo,
   useContext,
   useEffect,
   useState,
   useCallback,
 } from "react";
+
+import { StyleSheet, View } from "react-native";
+
 import { SvgCssUri } from "react-native-svg/css";
 
-import Input from "./Input";
-import ScanCardButton from "./ScanCardButton";
-import { Actions, DispatchContext, StateContext } from "../state";
-import { isCardNumberValid, validateCardExpiry } from "../util/validator";
-import {
-  determineCardType,
-  formatCreditCardNumber,
-  formatExpiry,
-} from "../util/helpers";
-import KomojuText from "./KomojuText";
+import { Actions, DispatchContext, StateContext } from "@context/state";
+
 import {
   BASE_URL,
   STATIC_CREDIT_CARD_CVC_SVG,
   STATIC_CREDIT_CARD_SVG,
-} from "../util/constants";
-import { PaymentType, sessionShowPaymentMethodType } from "../util/types";
+} from "@util/constants";
+import {
+  determineCardType,
+  formatCreditCardNumber,
+  formatExpiry,
+} from "@util/helpers";
+import { PaymentType, sessionShowPaymentMethodType } from "@util/types";
+import { isCardNumberValid, validateCardExpiry } from "@util/validator";
+
 import CardScanner from "./CardScanner";
+import Input from "./Input";
+import KomojuText from "./KomojuText";
+import ScanCardButton from "./ScanCardButton";
 
 type Props = {
   inputErrors: {
@@ -38,7 +42,7 @@ type Props = {
 const CARD_WIDTH = 26;
 const CARD_HEIGHT = 30;
 
-const CardInputGroup = memo(({ inputErrors, resetError }: Props) => {
+const CardInputGroup = ({ inputErrors, resetError }: Props) => {
   const dispatch = useContext(DispatchContext);
   const [cardType, setCardType] = useState<string | null>(null);
   const [toggleScanCard, setToggleScanCard] = useState<boolean>(false);
@@ -51,7 +55,7 @@ const CardInputGroup = memo(({ inputErrors, resetError }: Props) => {
       const type = determineCardType(cardNumber);
       setCardType(type);
     }
-  }, []);
+  }, [cardNumber]);
 
   const renderSvg = (uri: string, widthMultiplier = 1) => (
     <SvgCssUri
@@ -149,7 +153,7 @@ const CardInputGroup = memo(({ inputErrors, resetError }: Props) => {
           <View style={styles.splitRow}>
             <View style={styles.itemRow}>
               <Input
-                value={cardExpiredDate}
+                value={cardExpiredDate as string}
                 keyboardType="number-pad"
                 testID="cardExpiryInput"
                 placeholder="MM / YY"
@@ -168,7 +172,7 @@ const CardInputGroup = memo(({ inputErrors, resetError }: Props) => {
             </View>
             <View style={styles.itemRow}>
               <Input
-                value={cardCVV}
+                value={cardCVV as string}
                 testID="cardCVVInput"
                 keyboardType="number-pad"
                 placeholder="CVV"
@@ -190,9 +194,9 @@ const CardInputGroup = memo(({ inputErrors, resetError }: Props) => {
       )}
     </View>
   );
-});
+};
 
-export default CardInputGroup;
+export default memo(CardInputGroup);
 
 const styles = StyleSheet.create({
   parentContainer: {