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/App.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {KomojuSDK} from 'react-native-komoju';
+import {KomojuSDK} from '@komoju/komoju-react-native';
 import {PUBLIC_KEY} from '@env';
 
 import PaymentScreen from './PaymentScreen';

example/PaymentScreen.tsx

@@ -1,13 +1,14 @@
 import React, {useState} from 'react';
 import {
+  useColorScheme,
   View,
   Text,
   TextInput,
   Button,
   StyleSheet,
   Pressable,
 } from 'react-native';
-import {KomojuSDK} from 'react-native-komoju';
+import {KomojuSDK} from '@komoju/komoju-react-native';
 import createSession from './services/sessionService';
 
 export enum CurrencyTypes {
@@ -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>

example/package.json

@@ -10,16 +10,13 @@
     "test": "jest"
   },
   "dependencies": {
+    "@komoju/komoju-react-native": "0.0.1",
     "i18next": "^23.11.5",
     "react": "18.2.0",
     "react-i18next": "^14.1.2",
     "react-native": "0.74.1",
-    "react-native-komoju": "../payment_sdk",
     "react-native-svg": "^15.3.0",
-    "react-native-vision-camera": "^4.3.2",
-    "react-native-vision-camera-text-recognition": "^3.0.4",
-    "react-native-webview": "^13.10.2",
-    "react-native-worklets-core": "^1.3.3"
+    "react-native-webview": "^13.10.2"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

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

@@ -1,13 +1,34 @@
 {
-  "name": "react-native-komoju",
-  "version": "1.0.0",
+  "name": "@komoju/komoju-react-native",
+  "version": "0.0.1",
+  "private": false,
   "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 && npm pack",
+    "build:js": "babel src --out-dir dist --extensions \".ts,.tsx\" --copy-files",
+    "build:types": "tsc --emitDeclarationOnly && tsc-alias",
     "test": "jest",
-    "lint": "eslint . --ignore-pattern babel.config.js --ignore-pattern jest.config.js --ignore-pattern setupTests.js"
+    "lint": "eslint ."
   },
-  "author": "",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/degica/mobile-sdk_react-native.git"
+  },
+  "keywords": [
+    "react-native",
+    "library",
+    "degica"
+  ],
+  "author": "[email protected]",
+  "bugs": {
+    "url": "https://github.com/degica/mobile-sdk_react-native.git/issues"
+  },
+  "homepage": "https://github.com/degica/mobile-sdk_react-native.git#readme",
   "license": "MIT",
   "devDependencies": {
     "@babel/cli": "^7.24.6",
@@ -23,35 +44,38 @@
     "@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",
     "react": "18.2.0",
     "react-native": "0.74.1",
     "react-native-gesture-handler": "^2.16.2",
     "react-native-reanimated": "^3.11.0",
-    "react-native-svg": "^15.3.0",
-    "react-native-webview": "^13.10.2",
     "react-test-renderer": "^18.2.0",
     "ts-jest": "^29.1.4",
     "typescript": "^5.4.5",
-    "typescript-eslint": "^7.12.0"
+    "typescript-eslint": "^7.12.0",
+    "react-native-vision-camera": "^4.3.2",
+    "react-native-vision-camera-text-recognition": "^3.0.4",
+    "react-native-worklets-core": "^1.3.3"
   },
   "dependencies": {
     "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-webview": "^13.10.2"
   },
   "resolutions": {
     "@types/react": "^18.2.44"
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-vision-camera": "^4.3.2",
+    "react-native-vision-camera-text-recognition": "^3.0.4",
+    "react-native-worklets-core": "^1.3.3"
   }
-}
+}

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';