@apps-in-toss/framework 0.0.14 → 0.0.16

package/dist/index.js

@@ -5,10 +5,49 @@ var __export = (target, all) => {
 };
 
 // src/core/registerApp.tsx
+import { TDSProvider } from "@toss-design-system/react-native";
 import { Bedrock } from "react-native-bedrock";
-import { jsx } from "react/jsx-runtime";
+
+// src/core/hooks/useAppsInTossBridge.ts
+import { useBridge } from "@toss-design-system/react-native";
+import { useEffect } from "react";
+
+// src/core/utils/getAppsInTossGlobals.ts
+function getAppsInTossGlobals() {
+  if (global.__appsInToss == null) {
+    throw new Error("invalid apps-in-toss globals");
+  }
+  return global.__appsInToss;
+}
+
+// src/core/utils/toIcon.ts
+function toIcon(source) {
+  return source.startsWith("http") ? { source: { uri: source } } : { name: source };
+}
+
+// src/core/hooks/useAppsInTossBridge.ts
+function useAppsInTossBridge() {
+  const controller = useBridge();
+  const appsInTossGlobals2 = getAppsInTossGlobals();
+  useEffect(() => {
+    const commonProps = {
+      serviceName: appsInTossGlobals2.brandDisplayName,
+      icon: toIcon(appsInTossGlobals2.brandIcon),
+      color: appsInTossGlobals2.brandPrimaryColor,
+      colorMode: appsInTossGlobals2.brandBridgeColorMode
+    };
+    controller.open({ ...commonProps });
+  }, []);
+}
+
+// src/core/registerApp.tsx
+import { Fragment, jsx } from "react/jsx-runtime";
 function AppsInTossContainer(Container, { children, ...initialProps }) {
-  return /* @__PURE__ */ jsx(Container, { ...initialProps, children });
+  return /* @__PURE__ */ jsx(Container, { ...initialProps, children: /* @__PURE__ */ jsx(TDSProvider, { colorPreference: "light", token: { color: { primary: getAppsInTossGlobals().brandPrimaryColor } }, children: /* @__PURE__ */ jsx(TDSContainer, { ...initialProps, children }) }) });
+}
+function TDSContainer({ children }) {
+  useAppsInTossBridge();
+  return /* @__PURE__ */ jsx(Fragment, { children });
 }
 function registerApp(container, { context }) {
   return Bedrock.registerApp(AppsInTossContainer.bind(null, container), {
@@ -207,13 +246,131 @@ var TossPay = {
 
 // src/components/WebView.tsx
 import {
-  WebView as OriginalWebView
-} from "@react-native-bedrock/native/react-native-webview";
+  PartnerWebViewScreen,
+  ExternalWebViewScreen
+} from "@toss-design-system/react-native";
 import { useMemo } from "react";
-import { useBridgeHandler } from "react-native-bedrock";
+import { getSchemeUri, useBridgeHandler } from "react-native-bedrock";
 import * as bedrockAsyncBridges from "react-native-bedrock/async-bridges";
 import * as bedrockConstantBridges from "react-native-bedrock/constant-bridges";
 
+// src/components/GameWebView.tsx
+import {
+  WebView as PlainWebView
+} from "@react-native-bedrock/native/react-native-webview";
+import { forwardRef } from "react";
+import { View as View3 } from "react-native";
+import { closeView } from "react-native-bedrock";
+
+// src/components/GameWebViewNavigationBar/GameNavigationBar.tsx
+import { SvgXml } from "@react-native-bedrock/native/react-native-svg";
+import { PageNavbar } from "@toss-design-system/react-native";
+import { Platform as Platform3, TouchableOpacity, View as View2 } from "react-native";
+
+// src/components/GameWebViewNavigationBar/HeaderRight.tsx
+import { StyleSheet, View } from "react-native";
+
+// src/components/GameWebViewNavigationBar/byPlatform.ts
+import { Platform } from "react-native";
+function byPlatform({
+  ...props
+}) {
+  return (props[Platform.OS] ?? props.fallback)();
+}
+
+// src/components/GameWebViewNavigationBar/constants.ts
+var RIGHT_MARGIN = 24;
+var IOS_DEFAULT_MARGIN = 20;
+
+// src/components/GameWebViewNavigationBar/HeaderRight.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function IOSHeaderRight(props) {
+  return /* @__PURE__ */ jsx2(View, { style: styles.ios, ...props });
+}
+function AndroidHeaderRight(props) {
+  return /* @__PURE__ */ jsx2(View, { style: styles.android, ...props });
+}
+function HeaderRight(props) {
+  return byPlatform({
+    ios: () => /* @__PURE__ */ jsx2(IOSHeaderRight, { ...props }),
+    android: () => /* @__PURE__ */ jsx2(AndroidHeaderRight, { ...props }),
+    fallback: () => /* @__PURE__ */ jsx2(IOSHeaderRight, { ...props })
+  });
+}
+var styles = StyleSheet.create({
+  ios: {
+    marginRight: -IOS_DEFAULT_MARGIN + RIGHT_MARGIN,
+    flexDirection: "row"
+  },
+  android: {
+    flexDirection: "row"
+  }
+});
+
+// src/components/GameWebViewNavigationBar/useSafeAreaTop.ts
+import { useSafeAreaInsets } from "@react-native-bedrock/native/react-native-safe-area-context";
+import { Platform as Platform2 } from "react-native";
+function useSafeAreaTop() {
+  const safeAreaInsets = useSafeAreaInsets();
+  const hasDynamicIsland = Platform2.OS === "ios" && safeAreaInsets.top > 50;
+  const safeAreaTop = hasDynamicIsland ? safeAreaInsets.top - 5 : safeAreaInsets.top;
+  return safeAreaTop;
+}
+
+// src/components/GameWebViewNavigationBar/GameNavigationBar.tsx
+import { Fragment as Fragment2, jsx as jsx3, jsxs } from "react/jsx-runtime";
+var originXML = '<svg fill="none" height="30" viewBox="0 0 30 30" width="30" xmlns="https://www.w3.org/2000/svg"><rect fill="#031832" fill-opacity=".46" height="30" rx="15" width="30"/><rect height="29.5" rx="14.75" stroke="#d9d9ff" stroke-opacity=".11" stroke-width=".5" width="29.5" x=".25" y=".25"/><path clip-rule="evenodd" d="m16.5119 15.0014 4.7092-4.7092c.0929-.0928.1666-.2031.2169-.32441.0503-.12134.0762-.25141.0762-.38276.0001-.13136-.0258-.26144-.076-.38281s-.1239-.23166-.2167-.32457c-.0929-.09291-.2031-.16662-.3245-.21692-.1213-.05031-.2514-.07622-.3827-.07626-.1314-.00004-.2615.0258-.3828.07603-.1214.05023-.2317.12388-.3246.21673l-4.7092 4.70997-4.71-4.70997c-.1897-.17718-.4408-.27373-.70034-.26927s-.5072.10959-.69069.2932c-.1835.1836-.28848.43132-.29279.69087-.00432.25954.09238.51057.26968.70017l4.71004 4.7092-4.71004 4.7092c-.1392.1401-.23385.3183-.27204.5121-.0382.1939-.01823.3946.05739.5771s.20351.3386.36759.4486.35702.169.55456.1697c.25583 0 .51164-.0975.70664-.2925l4.71-4.71 4.7092 4.71c.0927.093.2029.1668.3243.2172.1213.0504.2514.0763.3828.0763s.2614-.0259.3828-.0763c.1213-.0504.2315-.1242.3243-.2172.0929-.0929.1667-.2032.217-.3246s.0762-.2515.0762-.3829-.0259-.2616-.0762-.383-.1241-.2317-.217-.3245z" fill="#fdfdfe" fill-opacity=".89" fill-rule="evenodd"/></svg>';
+function GameNavigationBar({ onClose }) {
+  const safeAreaTop = useSafeAreaTop();
+  return /* @__PURE__ */ jsxs(Fragment2, { children: [
+    /* @__PURE__ */ jsx3(PageNavbar, { preference: { type: "none" } }),
+    /* @__PURE__ */ jsx3(
+      View2,
+      {
+        style: {
+          width: "100%",
+          height: Platform3.OS === "ios" ? 44 : 54,
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "flex-end",
+          position: "absolute",
+          zIndex: 9999,
+          marginTop: safeAreaTop,
+          paddingRight: Platform3.OS === "ios" ? 10 : 8
+        },
+        pointerEvents: "box-none",
+        children: /* @__PURE__ */ jsx3(HeaderRight, { children: /* @__PURE__ */ jsx3(
+          TouchableOpacity,
+          {
+            hitSlop: { left: 8, right: 8 },
+            style: {
+              padding: Platform3.OS === "ios" ? 7 : 9
+            },
+            onPress: onClose,
+            children: /* @__PURE__ */ jsx3(SvgXml, { xml: originXML, width: 30, height: 30 })
+          }
+        ) })
+      }
+    )
+  ] });
+}
+
+// src/components/GameWebView.tsx
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var GameWebView = forwardRef(function GameWebView2(props, ref) {
+  return /* @__PURE__ */ jsxs2(Fragment3, { children: [
+    /* @__PURE__ */ jsx4(
+      GameNavigationBar,
+      {
+        onClose: () => {
+          closeView();
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx4(View3, { style: { flex: 1 }, children: /* @__PURE__ */ jsx4(PlainWebView, { ref, ...props }) })
+  ] });
+});
+
 // src/async-bridges.ts
 var async_bridges_exports = {};
 __export(async_bridges_exports, {
@@ -246,19 +403,41 @@ __export(event_bridges_exports, {
 });
 
 // src/components/WebView.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-function WebView({ local, onMessage, ...props }) {
-  const uri = useMemo(() => {
-    if (__DEV__) {
-      return `http://${local.host}:${local.port}`;
-    }
-    const url = new URL(AppsInTossModule.getWebBundleURL({}).url);
-    const deploymentId = env.getDeploymentId();
-    if (deploymentId) {
-      url.searchParams.set("_deploymentId", deploymentId);
-    }
-    return url.toString();
-  }, [local]);
+import { jsx as jsx5 } from "react/jsx-runtime";
+var appsInTossGlobals = getAppsInTossGlobals();
+var TYPES = ["partner", "external", "game"];
+var WEBVIEW_TYPES = {
+  partner: PartnerWebViewScreen,
+  external: ExternalWebViewScreen,
+  game: GameWebView
+};
+function mergeSchemeQueryParamsInto(url) {
+  const baseUrl = new URL(url);
+  const schemeUrl = new URL(getSchemeUri());
+  baseUrl.pathname = schemeUrl.pathname;
+  for (const [key, value] of schemeUrl.searchParams.entries()) {
+    baseUrl.searchParams.set(key, value);
+  }
+  return baseUrl;
+}
+function getWebViewUri(local) {
+  if (__DEV__) {
+    const devUrl = `http://${local.host}:${local.port}`;
+    return mergeSchemeQueryParamsInto(devUrl).toString();
+  }
+  const { url: rawUrl } = AppsInTossModule.getWebBundleURL({});
+  const url = mergeSchemeQueryParamsInto(rawUrl);
+  const deploymentId = env.getDeploymentId();
+  if (deploymentId) {
+    url.searchParams.set("_deploymentId", deploymentId);
+  }
+  return url.toString();
+}
+function WebView({ type, local, onMessage, ...props }) {
+  if (!TYPES.includes(type)) {
+    throw new Error(`Invalid WebView type: '${type}'`);
+  }
+  const uri = useMemo(() => getWebViewUri(local), [local]);
   const handler = useBridgeHandler({
     onMessage,
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -276,14 +455,43 @@ function WebView({ local, onMessage, ...props }) {
       ...async_bridges_exports
     }
   });
-  return /* @__PURE__ */ jsx2(
-    OriginalWebView,
+  const baseProps = useMemo(() => {
+    switch (type) {
+      case "partner": {
+        const headerOnlyProp = {
+          header: {
+            ..."header" in props ? props.header : {},
+            icon: toIcon(ensureValue(appsInTossGlobals.brandIcon, "icon")),
+            title: ensureValue(appsInTossGlobals.brandDisplayName, "displayName"),
+            rightButtons: void 0
+            // TODO: onClick 이벤트를 받아야 하기에 런타임에서 설정 받아야 함
+          }
+        };
+        return headerOnlyProp;
+      }
+      case "external": {
+        const headerOnlyProp = {
+          header: {
+            ..."header" in props ? props.header : {},
+            icon: toIcon(ensureValue(appsInTossGlobals.brandIcon, "icon")),
+            title: ensureValue(appsInTossGlobals.brandDisplayName, "displayName")
+          }
+        };
+        return headerOnlyProp;
+      }
+      default: {
+        return {};
+      }
+    }
+  }, [type, props]);
+  const BaseWebView = WEBVIEW_TYPES[type];
+  return /* @__PURE__ */ jsx5(
+    BaseWebView,
     {
       ref: handler.ref,
       ...props,
-      source: {
-        uri
-      },
+      ...baseProps,
+      source: { uri },
       sharedCookiesEnabled: true,
       thirdPartyCookiesEnabled: true,
       cacheEnabled: false,
@@ -294,14 +502,20 @@ function WebView({ local, onMessage, ...props }) {
     }
   );
 }
+function ensureValue(value, name) {
+  if (value === void 0) {
+    throw new Error(`${name} is required`);
+  }
+  return value;
+}
 
 // src/hooks/useGeolocation.ts
-import { useState, useEffect } from "react";
+import { useState, useEffect as useEffect2 } from "react";
 import { useVisibility } from "react-native-bedrock";
 function useGeolocation({ accuracy, distanceInterval, timeInterval }) {
   const isVisible = useVisibility();
   const [location, setLocation] = useState(null);
-  useEffect(() => {
+  useEffect2(() => {
     if (!isVisible) {
       return;
     }