@intra-mart/smartlime 0.0.1-beta

package/lib/packages/WebView/IMWebViewError.js

@@ -0,0 +1,10 @@
+export const errorType = 'IMWebViewError';
+export class IMWebViewError extends Error {
+    constructor(message, options) {
+        super(message, options);
+        if (Error.captureStackTrace) {
+            Error.captureStackTrace(this, IMWebViewError);
+        }
+        this.name = errorType;
+    }
+}

package/lib/packages/WebView/hooks/index.d.ts

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

package/lib/packages/WebView/hooks/index.js

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

package/lib/packages/WebView/hooks/useHackSearchUI.d.ts

@@ -0,0 +1,8 @@
+import WebView, { WebViewMessageEvent } from 'react-native-webview';
+type ErrorCallBack = (error: unknown) => void;
+export declare const useHackSearchUI: (errorCallBack?: ErrorCallBack) => {
+    ref: import("react").RefObject<WebView<{}>>;
+    injectedJavaScriptBeforeContentLoaded: string;
+    onMessage: (event: WebViewMessageEvent) => Promise<void>;
+};
+export {};

package/lib/packages/WebView/hooks/useHackSearchUI.js

@@ -0,0 +1,49 @@
+import { useCallback, useRef } from 'react';
+import { useIMSearch } from '../../Search/hooks';
+const checkIapSearchMessage = (data) => {
+    return data.__SMARTLIME_ACM_SEARCH === true;
+};
+const messageParse = (data) => {
+    try {
+        return JSON.parse(data);
+    }
+    catch {
+        // parse is performed to determine if the message is a SearchMessage only so an empty object is returned if parse fails.
+        return {};
+    }
+};
+const injectedJavaScriptBeforeContentLoaded = `
+  window.__SMARTLIME = true;
+  true;
+`;
+export const useHackSearchUI = (errorCallBack) => {
+    const ref = useRef(null);
+    const { startSearch } = useIMSearch();
+    const onMessage = useCallback(async (event) => {
+        const data = messageParse(event.nativeEvent.data);
+        if (checkIapSearchMessage(data)) {
+            const dialogId = data.dialogId;
+            const target = data.param.target;
+            const type = data.param.type;
+            const paramString = data.paramString;
+            try {
+                const result = await startSearch({ target, type, paramString });
+                if (result.type === 'success') {
+                    ref.current?.postMessage(JSON.stringify({ dialogId, ...result }));
+                }
+                else {
+                    if (errorCallBack) {
+                        errorCallBack(result);
+                    }
+                }
+            }
+            catch (e) {
+                if (errorCallBack)
+                    errorCallBack(e);
+                else
+                    console.error('failed to execute search process.');
+            }
+        }
+    }, [errorCallBack]);
+    return { ref, injectedJavaScriptBeforeContentLoaded, onMessage };
+};

package/lib/packages/WebView/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { WebView, WebViewProps } from 'react-native-webview';
+import { WebViewSourceUri } from 'react-native-webview/lib/WebViewTypes';
+import { IMWebViewError } from './IMWebViewError';
+export type OnSessionCreationError = (error: IMWebViewError) => void;
+export interface IMWebViewProps extends Omit<WebViewProps, 'onShouldStartLoadWithRequest'> {
+    source: WebViewSourceUri;
+    onSessionCreationError?: OnSessionCreationError;
+    indicator?: JSX.Element | null;
+}
+export declare const IMWebView: React.ForwardRefExoticComponent<IMWebViewProps & React.RefAttributes<WebView<{}>>>;

package/lib/packages/WebView/index.js

@@ -0,0 +1,166 @@
+import React, { useRef, useState } from 'react';
+import { ActivityIndicator, StyleSheet } from 'react-native';
+import { WebView } from 'react-native-webview';
+import { useIMBaseUrl, useIMToken } from '../..';
+import { mergeRef } from '../../utils/mergeRef';
+import { join } from '../../utils/path';
+import { IMWebViewError } from './IMWebViewError';
+const IMAUTOLOGIN_SUCCESS = 'IMAUTOLOGIN_SUCCESS';
+const IMAUTOLOGIN_ERROR = 'IMAUTOLOGIN_ERROR';
+const useCheckSessionUrl = (baseUrl) => {
+    return join(baseUrl, '/api/smacolow/session');
+};
+const useGetSessionUrl = (baseUrl) => {
+    return join(baseUrl, '/api/bearer/smacolow/session');
+};
+const usLogoutUrl = (baseUrl) => {
+    return join(baseUrl, '/logout');
+};
+const useLogin = (props, webviewRef) => {
+    const baseUrl = useIMBaseUrl();
+    const token = useIMToken();
+    const targetUrl = props.source.uri;
+    const checkSessionUrl = useCheckSessionUrl(baseUrl);
+    const getSessionUrl = useGetSessionUrl(baseUrl);
+    const logoutUrl = usLogoutUrl(baseUrl);
+    const currentUrlRef = useRef(checkSessionUrl);
+    const isCheckSessionErrorRef = useRef(false);
+    const [isFailedLogin, setIsFailedLogin] = useState(false);
+    const [isLogin, setIsLogin] = useState(false);
+    const [isTargetUrl, setIsTargetUrl] = useState(false);
+    const onHttpError = (event) => {
+        if (currentUrlRef.current === checkSessionUrl &&
+            event.nativeEvent.statusCode === 401) {
+            isCheckSessionErrorRef.current = true;
+        }
+        else if (currentUrlRef.current === targetUrl) {
+            if (props.onHttpError)
+                props.onHttpError(event);
+        }
+        else {
+            setIsFailedLogin(true);
+            if (props.onSessionCreationError) {
+                props.onSessionCreationError(new IMWebViewError('http error occurred during auto login.'));
+            }
+        }
+    };
+    const onShouldStartLoadWithRequest = (request) => {
+        if (isLogin || isTargetUrl)
+            return true;
+        if (currentUrlRef.current === checkSessionUrl) {
+            if (request.url === logoutUrl || request.url === checkSessionUrl)
+                return true;
+        }
+        if (currentUrlRef.current === logoutUrl) {
+            if (request.url === targetUrl || request.url === logoutUrl)
+                return true;
+        }
+        if (currentUrlRef.current === targetUrl) {
+            if (request.url === targetUrl)
+                return true;
+        }
+        return false;
+    };
+    const onLoad = (event) => {
+        if (isLogin || isFailedLogin)
+            return;
+        if ((isCheckSessionErrorRef.current === false &&
+            currentUrlRef.current === checkSessionUrl) ||
+            currentUrlRef.current === getSessionUrl) {
+            setIsTargetUrl(true);
+            currentUrlRef.current = targetUrl;
+            webviewRef.current?.injectJavaScript(`
+        location.replace('${targetUrl}');
+        true;
+      `);
+        }
+        else if (isCheckSessionErrorRef.current === true &&
+            checkSessionUrl === currentUrlRef.current) {
+            currentUrlRef.current = logoutUrl;
+            webviewRef.current?.injectJavaScript(`
+        location.replace('${logoutUrl}');
+        true;
+      `);
+        }
+        else if (currentUrlRef.current === logoutUrl) {
+            webviewRef.current?.injectJavaScript(`
+        fetch('${getSessionUrl}', {
+          headers: {
+            'X-Intramart-Session': 'keep',
+            Authorization: 'Bearer ${token}',
+          },
+        }).then((state) => {
+            if(state.status === 200) window.ReactNativeWebView.postMessage('${IMAUTOLOGIN_SUCCESS}');
+            else window.ReactNativeWebView.postMessage('${IMAUTOLOGIN_ERROR}');
+          }).catch(() => {
+            window.ReactNativeWebView.postMessage('${IMAUTOLOGIN_ERROR}');
+          });
+        true;
+      `);
+        }
+        else if (currentUrlRef.current === targetUrl && !isLogin) {
+            setIsLogin(true);
+            if (props.onLoad)
+                props.onLoad(event);
+        }
+    };
+    const onMessage = (event) => {
+        if (currentUrlRef.current === targetUrl && props.onMessage)
+            props.onMessage(event);
+        if (event.nativeEvent.data === IMAUTOLOGIN_SUCCESS) {
+            setIsTargetUrl(true);
+            currentUrlRef.current = targetUrl;
+            webviewRef.current?.injectJavaScript(`
+        location.replace('${targetUrl}');
+      `);
+        }
+        if (event.nativeEvent.data === IMAUTOLOGIN_ERROR) {
+            setIsFailedLogin(true);
+            if (props.onSessionCreationError) {
+                props.onSessionCreationError(new IMWebViewError('http error occurred during auto login.'));
+            }
+        }
+    };
+    const autoLoginProps = {
+        source: {
+            uri: checkSessionUrl,
+        },
+        sharedCookiesEnabled: false,
+        onLoad,
+        onHttpError,
+        onMessage,
+        onShouldStartLoadWithRequest,
+    };
+    const webviewProps = isLogin
+        ? props
+        : isTargetUrl
+            ? { ...props, ...autoLoginProps }
+            : autoLoginProps;
+    return {
+        isLogin,
+        isFailedLogin,
+        webviewProps,
+    };
+};
+export const IMWebView = React.forwardRef((props, ref) => {
+    const webviewRef = useRef(null);
+    const margedRef = mergeRef(ref, webviewRef);
+    const { isLogin, isFailedLogin, webviewProps } = useLogin(props, webviewRef);
+    const indicator = isLogin && !isFailedLogin ? null : props.indicator !== void 0 ? (props.indicator) : (<ActivityIndicator style={styles.indicator}/>);
+    return (<>
+        <WebView ref={margedRef} {...webviewProps}/>
+        {indicator}
+      </>);
+});
+const styles = StyleSheet.create({
+    indicator: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'gray',
+    },
+});

package/lib/utils/mergeRef.d.ts

@@ -0,0 +1 @@
+export declare const mergeRef: <T>(...refs: (string | import("react").MutableRefObject<T> | ((instance: T | null) => void) | import("react").MutableRefObject<T | null> | ((instance: T | null) => void) | import("react").RefObject<T> | null)[]) => (instance: T | null) => void;

package/lib/utils/mergeRef.js

@@ -0,0 +1,14 @@
+export const mergeRef = (...refs) => {
+    const refCallback = (instance) => {
+        for (let i = 0; i < refs.length; i++) {
+            const ref = refs[i];
+            if (typeof ref === 'function') {
+                ref(instance);
+            }
+            else if (ref != null) {
+                ref.current = instance;
+            }
+        }
+    };
+    return refCallback;
+};

package/lib/utils/path.d.ts

@@ -0,0 +1 @@
+export declare const join: (...args: string[]) => string;

package/lib/utils/path.js

@@ -0,0 +1,16 @@
+// NOTE:
+// 下記のようなpackageの採用が正しいが現状必要なのがシンプルな結合だけなので暫定の実装で様子見
+// https://www.npmjs.com/package/path
+// https://www.npmjs.com/package/react-native-url-polyfill
+// 必要が出てきたら再検討
+export const join = (...args) => {
+    return args.reduce((prev, current) => {
+        if (prev === '')
+            return current;
+        if (prev.endsWith('/') && current.startsWith('/'))
+            return `${prev}${current.slice(1)}`;
+        if (!prev.endsWith('/') && !current.startsWith('/'))
+            return `${prev}/${current}`;
+        return `${prev}${current}`;
+    }, '');
+};

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@intra-mart/smartlime",
+  "description": "expoで使用できるintra mart accelplatform SDK",
+  "version": "0.0.1-beta",
+  "keywords": [
+    "intra-mart",
+    "AccelPlatform",
+    "iAP",
+    "react",
+    "react-native",
+    "expo"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/accelplatform/smartlime.git"
+  },
+  "bugs": {
+    "url": "https://github.com/accelplatform/smartlime/issues"
+  },
+  "homepage": "http://oss.intra-mart.org",
+  "author": "NTT DATA INTRAMART",
+  "type": "module",
+  "exports": {
+    ".": {
+      "default": "./lib/index.js"
+    }
+  },
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "build-watch": "tsc --watch",
+    "lint": "eslint ./src/**/*.{ts,tsx}",
+    "lint-fix": "eslint --fix ./src/**/*.{ts,tsx} && prettier --write ./src/**/*.{ts,tsx}",
+    "test": "jest",
+    "test-watch": "jest --watch --coverage=false --changedSince=origin/main",
+    "emit-declaration": "tsc --emitDeclarationOnly",
+    "type": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "expo": "^47.0.13",
+    "react": "18.1.0"
+  },
+  "dependencies": {
+    "@react-native-async-storage/async-storage": "~1.17.11",
+    "expo-auth-session": "~3.8.0",
+    "expo-crypto": "~12.0.0",
+    "expo-random": "~13.0.0",
+    "react-native-webview": "11.23.1",
+    "set-cookie-parser": "^2.5.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.12",
+    "@babel/preset-env": "^7.20.2",
+    "@types/jest": "^27.5.2",
+    "@types/react": "~18.0.27",
+    "@types/react-native": "~0.70.6",
+    "@types/react-test-renderer": "18.0.0",
+    "@types/set-cookie-parser": "^2.4.2",
+    "@typescript-eslint/eslint-plugin": "^5.51.0",
+    "@typescript-eslint/parser": "^5.51.0",
+    "eslint": "^8.33.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-react": "^7.32.2",
+    "expo": "^47.0.13",
+    "jest": "^27.5.1",
+    "jest-expo": "^47.0.1",
+    "prettier": "^2.8.3",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
+    "react-native": "0.70.5",
+    "react-test-renderer": "18.1.0",
+    "ts-jest": "^27.1.5",
+    "typescript": "^4.9.5"
+  },
+  "resolutions": {
+    "@types/react": "^18.0.24"
+  },
+  "packageManager": "yarn@1.22.10",
+  "engines": {
+    "node": ">= 16.9.0"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "jsx": "react-native",
+    "lib": ["dom", "esnext"],
+    "moduleResolution": "node",
+    "module": "esnext",
+    "target": "esnext",
+    "outDir": "./lib",
+    "declarationDir": "./lib",
+    "declaration": true,
+    "noEmitOnError": true,
+    "removeComments": false,
+
+    "allowJs": false,
+    "checkJs": false,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true
+  },
+  "include": ["src", "test", "**/*.test.ts", "**/*.test.tsx"],
+  "exclude": ["node_modules"],
+  "newLine": "CRLF"
+}