@apps-in-toss/framework 0.0.14 → 0.0.15

package/dist/index.cjs

@@ -49,10 +49,49 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/core/registerApp.tsx
+var import_react_native2 = require("@toss-design-system/react-native");
 var import_react_native_bedrock = require("react-native-bedrock");
+
+// src/core/hooks/useAppsInTossBridge.ts
+var import_react_native = require("@toss-design-system/react-native");
+var import_react = require("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 = (0, import_react_native.useBridge)();
+  const appsInTossGlobals2 = getAppsInTossGlobals();
+  (0, import_react.useEffect)(() => {
+    const commonProps = {
+      serviceName: appsInTossGlobals2.brandDisplayName,
+      icon: toIcon(appsInTossGlobals2.brandIcon),
+      color: appsInTossGlobals2.brandPrimaryColor,
+      colorMode: appsInTossGlobals2.brandBridgeColorMode
+    };
+    controller.open({ ...commonProps });
+  }, []);
+}
+
+// src/core/registerApp.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function AppsInTossContainer(Container, { children, ...initialProps }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Container, { ...initialProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Container, { ...initialProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.TDSProvider, { colorPreference: "light", token: { color: { primary: getAppsInTossGlobals().brandPrimaryColor } }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TDSContainer, { ...initialProps, children }) }) });
+}
+function TDSContainer({ children }) {
+  useAppsInTossBridge();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
 }
 function registerApp(container, { context }) {
   return import_react_native_bedrock.Bedrock.registerApp(AppsInTossContainer.bind(null, container), {
@@ -81,8 +120,8 @@ var import_react_native_bedrock3 = require("react-native-bedrock");
 var import_react_native_bedrock2 = require("react-native-bedrock");
 
 // src/native-modules/AppsInTossModule.ts
-var import_react_native = require("react-native");
-var AppsInTossModuleInstance = import_react_native.NativeModules.AppsInTossModule;
+var import_react_native3 = require("react-native");
+var AppsInTossModuleInstance = import_react_native3.NativeModules.AppsInTossModule;
 var AppsInTossModule = AppsInTossModuleInstance;
 
 // src/native-modules/getPermission.ts
@@ -108,8 +147,8 @@ async function requestPermission(permission) {
 }
 
 // src/native-event-emitter/nativeEventEmitter.ts
-var import_react_native2 = require("react-native");
-var nativeEventEmitter = new import_react_native2.NativeEventEmitter(AppsInTossModuleInstance);
+var import_react_native4 = require("react-native");
+var nativeEventEmitter = new import_react_native4.NativeEventEmitter(AppsInTossModuleInstance);
 
 // src/native-event-emitter/event-plugins/UpdateLocationEvent.ts
 var UpdateLocationEvent = class extends import_react_native_bedrock2.BedrockEventDefinition {
@@ -250,12 +289,127 @@ var TossPay = {
 };
 
 // src/components/WebView.tsx
-var import_react_native_webview = require("@react-native-bedrock/native/react-native-webview");
-var import_react = require("react");
-var import_react_native_bedrock4 = require("react-native-bedrock");
+var import_react_native11 = require("@toss-design-system/react-native");
+var import_react3 = require("react");
+var import_react_native_bedrock5 = require("react-native-bedrock");
 var bedrockAsyncBridges = __toESM(require("react-native-bedrock/async-bridges"), 1);
 var bedrockConstantBridges = __toESM(require("react-native-bedrock/constant-bridges"), 1);
 
+// src/components/GameWebView.tsx
+var import_react_native_webview = require("@react-native-bedrock/native/react-native-webview");
+var import_react2 = require("react");
+var import_react_native10 = require("react-native");
+var import_react_native_bedrock4 = require("react-native-bedrock");
+
+// src/components/GameWebViewNavigationBar/GameNavigationBar.tsx
+var import_react_native_svg = require("@react-native-bedrock/native/react-native-svg");
+var import_react_native8 = require("@toss-design-system/react-native");
+var import_react_native9 = require("react-native");
+
+// src/components/GameWebViewNavigationBar/HeaderRight.tsx
+var import_react_native6 = require("react-native");
+
+// src/components/GameWebViewNavigationBar/byPlatform.ts
+var import_react_native5 = require("react-native");
+function byPlatform({
+  ...props
+}) {
+  return (props[import_react_native5.Platform.OS] ?? props.fallback)();
+}
+
+// src/components/GameWebViewNavigationBar/constants.ts
+var RIGHT_MARGIN = 24;
+var IOS_DEFAULT_MARGIN = 20;
+
+// src/components/GameWebViewNavigationBar/HeaderRight.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function IOSHeaderRight(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native6.View, { style: styles.ios, ...props });
+}
+function AndroidHeaderRight(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native6.View, { style: styles.android, ...props });
+}
+function HeaderRight(props) {
+  return byPlatform({
+    ios: () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IOSHeaderRight, { ...props }),
+    android: () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AndroidHeaderRight, { ...props }),
+    fallback: () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IOSHeaderRight, { ...props })
+  });
+}
+var styles = import_react_native6.StyleSheet.create({
+  ios: {
+    marginRight: -IOS_DEFAULT_MARGIN + RIGHT_MARGIN,
+    flexDirection: "row"
+  },
+  android: {
+    flexDirection: "row"
+  }
+});
+
+// src/components/GameWebViewNavigationBar/useSafeAreaTop.ts
+var import_react_native_safe_area_context = require("@react-native-bedrock/native/react-native-safe-area-context");
+var import_react_native7 = require("react-native");
+function useSafeAreaTop() {
+  const safeAreaInsets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
+  const hasDynamicIsland = import_react_native7.Platform.OS === "ios" && safeAreaInsets.top > 50;
+  const safeAreaTop = hasDynamicIsland ? safeAreaInsets.top - 5 : safeAreaInsets.top;
+  return safeAreaTop;
+}
+
+// src/components/GameWebViewNavigationBar/GameNavigationBar.tsx
+var import_jsx_runtime3 = require("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__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native8.PageNavbar, { preference: { type: "none" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_react_native9.View,
+      {
+        style: {
+          width: "100%",
+          height: import_react_native9.Platform.OS === "ios" ? 44 : 54,
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "flex-end",
+          position: "absolute",
+          zIndex: 9999,
+          marginTop: safeAreaTop,
+          paddingRight: import_react_native9.Platform.OS === "ios" ? 10 : 8
+        },
+        pointerEvents: "box-none",
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HeaderRight, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_react_native9.TouchableOpacity,
+          {
+            hitSlop: { left: 8, right: 8 },
+            style: {
+              padding: import_react_native9.Platform.OS === "ios" ? 7 : 9
+            },
+            onPress: onClose,
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_svg.SvgXml, { xml: originXML, width: 30, height: 30 })
+          }
+        ) })
+      }
+    )
+  ] });
+}
+
+// src/components/GameWebView.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var GameWebView = (0, import_react2.forwardRef)(function GameWebView2(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      GameNavigationBar,
+      {
+        onClose: () => {
+          (0, import_react_native_bedrock4.closeView)();
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native10.View, { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_webview.WebView, { ref, ...props }) })
+  ] });
+});
+
 // src/async-bridges.ts
 var async_bridges_exports = {};
 __export(async_bridges_exports, {
@@ -288,20 +442,38 @@ __export(event_bridges_exports, {
 });
 
 // src/components/WebView.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function WebView({ local, onMessage, ...props }) {
-  const uri = (0, import_react.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]);
-  const handler = (0, import_react_native_bedrock4.useBridgeHandler)({
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var appsInTossGlobals = getAppsInTossGlobals();
+var WEBVIEW_TYPES = {
+  partner: import_react_native11.PartnerWebViewScreen,
+  external: import_react_native11.ExternalWebViewScreen,
+  game: GameWebView
+};
+function mergeSchemeQueryParamsInto(url) {
+  const baseUrl = new URL(url);
+  const schemeUrl = new URL((0, import_react_native_bedrock5.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 }) {
+  const uri = (0, import_react3.useMemo)(() => getWebViewUri(local), [local]);
+  const handler = (0, import_react_native_bedrock5.useBridgeHandler)({
     onMessage,
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     eventListenerMap: event_bridges_exports,
@@ -318,14 +490,41 @@ function WebView({ local, onMessage, ...props }) {
       ...async_bridges_exports
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_react_native_webview.WebView,
+  const baseProps = (0, import_react3.useMemo)(() => {
+    switch (type) {
+      case "partner": {
+        return {
+          header: {
+            ...props.header,
+            icon: toIcon(appsInTossGlobals.brandIcon),
+            title: appsInTossGlobals.brandDisplayName,
+            rightButtons: void 0
+            // TODO: onClick 이벤트를 받아야 하기에 런타임에서 설정 받아야 함
+          }
+        };
+      }
+      case "external": {
+        return {
+          header: {
+            ...props.header,
+            icon: toIcon(appsInTossGlobals.brandIcon),
+            title: appsInTossGlobals.brandDisplayName
+          }
+        };
+      }
+      default: {
+        return {};
+      }
+    }
+  }, [type, props]);
+  const BaseWebView = WEBVIEW_TYPES[type];
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    BaseWebView,
     {
       ref: handler.ref,
+      ...baseProps,
       ...props,
-      source: {
-        uri
-      },
+      source: { uri },
       sharedCookiesEnabled: true,
       thirdPartyCookiesEnabled: true,
       cacheEnabled: false,
@@ -338,12 +537,12 @@ function WebView({ local, onMessage, ...props }) {
 }
 
 // src/hooks/useGeolocation.ts
-var import_react2 = require("react");
-var import_react_native_bedrock5 = require("react-native-bedrock");
+var import_react4 = require("react");
+var import_react_native_bedrock6 = require("react-native-bedrock");
 function useGeolocation({ accuracy, distanceInterval, timeInterval }) {
-  const isVisible = (0, import_react_native_bedrock5.useVisibility)();
-  const [location, setLocation] = (0, import_react2.useState)(null);
-  (0, import_react2.useEffect)(() => {
+  const isVisible = (0, import_react_native_bedrock6.useVisibility)();
+  const [location, setLocation] = (0, import_react4.useState)(null);
+  (0, import_react4.useEffect)(() => {
     if (!isVisible) {
       return;
     }

package/dist/index.d.cts

@@ -2,6 +2,7 @@ import { ComponentType, PropsWithChildren } from 'react';
 import { InitialProps, BedrockProps } from 'react-native-bedrock';
 import { EmitterSubscription } from 'react-native';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PartnerWebViewScreenProps, ExternalWebViewScreenProps } from '@toss-design-system/react-native';
 import { WebViewProps as WebViewProps$1 } from '@react-native-bedrock/native/react-native-webview';
 
 type AppsInTossProps = Pick<BedrockProps, 'context'>;
@@ -1039,13 +1040,27 @@ declare const TossPay: {
     executePayment: typeof executePayment;
 };
 
-interface WebViewProps extends Omit<WebViewProps$1, 'cacheEnabled' | 'source' | 'sharedCookiesEnabled' | 'thirdPartyCookiesEnabled' | 'injectedJavaScriptBeforeContentLoaded'> {
-    local: {
-        port: number;
-        host: number;
-    };
+type GameWebViewProps$1 = WebViewProps$1;
+
+type WebViewProps = PartnerWebViewProps | ExternalWebViewProps | GameWebViewProps;
+interface PartnerWebViewProps extends Omit<PartnerWebViewScreenProps, InternalProps> {
+    type: 'partner';
+    local: LocalNetwork;
+}
+interface ExternalWebViewProps extends Omit<ExternalWebViewScreenProps, InternalProps> {
+    type: 'external';
+    local: LocalNetwork;
+}
+interface GameWebViewProps extends Omit<GameWebViewProps$1, InternalProps> {
+    type: 'game';
+    local: LocalNetwork;
+}
+interface LocalNetwork {
+    port: number;
+    host: string;
 }
-declare function WebView({ local, onMessage, ...props }: WebViewProps): react_jsx_runtime.JSX.Element;
+type InternalProps = 'source' | 'cacheEnabled' | 'sharedCookiesEnabled' | 'thirdPartyCookiesEnabled' | 'injectedJavaScriptBeforeContentLoaded';
+declare function WebView({ type, local, onMessage, ...props }: WebViewProps): react_jsx_runtime.JSX.Element;
 
 type UseGeolocationOptions = Omit<StartUpdateLocationOptions, 'callback'>;
 /**
@@ -1097,4 +1112,4 @@ declare const env: {
     getDeploymentId: () => string | undefined;
 };
 
-export { Accuracy, AppsInToss, type ContactEntity, type FetchAlbumPhotosOptions, type GetCurrentLocationOptions, type ImageResponse, type Location, type LocationCoords, type OpenCameraOptions, type StartUpdateLocationOptions, type StartUpdateLocationSubscription, TossPay, type UpdateLocationEventEmitter, type UseGeolocationOptions, WebView, type WebViewProps, appLogin, env, fetchAlbumPhotos, fetchContacts, getClipboardText, getCurrentLocation, getOperationalEnvironment, openCamera, setClipboardText, startUpdateLocation, useGeolocation };
+export { Accuracy, AppsInToss, type ContactEntity, type ExternalWebViewProps, type FetchAlbumPhotosOptions, type GameWebViewProps, type GetCurrentLocationOptions, type ImageResponse, type Location, type LocationCoords, type OpenCameraOptions, type PartnerWebViewProps, type StartUpdateLocationOptions, type StartUpdateLocationSubscription, TossPay, type UpdateLocationEventEmitter, type UseGeolocationOptions, WebView, type WebViewProps, appLogin, env, fetchAlbumPhotos, fetchContacts, getClipboardText, getCurrentLocation, getOperationalEnvironment, openCamera, setClipboardText, startUpdateLocation, useGeolocation };

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import { ComponentType, PropsWithChildren } from 'react';
 import { InitialProps, BedrockProps } from 'react-native-bedrock';
 import { EmitterSubscription } from 'react-native';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PartnerWebViewScreenProps, ExternalWebViewScreenProps } from '@toss-design-system/react-native';
 import { WebViewProps as WebViewProps$1 } from '@react-native-bedrock/native/react-native-webview';
 
 type AppsInTossProps = Pick<BedrockProps, 'context'>;
@@ -1039,13 +1040,27 @@ declare const TossPay: {
     executePayment: typeof executePayment;
 };
 
-interface WebViewProps extends Omit<WebViewProps$1, 'cacheEnabled' | 'source' | 'sharedCookiesEnabled' | 'thirdPartyCookiesEnabled' | 'injectedJavaScriptBeforeContentLoaded'> {
-    local: {
-        port: number;
-        host: number;
-    };
+type GameWebViewProps$1 = WebViewProps$1;
+
+type WebViewProps = PartnerWebViewProps | ExternalWebViewProps | GameWebViewProps;
+interface PartnerWebViewProps extends Omit<PartnerWebViewScreenProps, InternalProps> {
+    type: 'partner';
+    local: LocalNetwork;
+}
+interface ExternalWebViewProps extends Omit<ExternalWebViewScreenProps, InternalProps> {
+    type: 'external';
+    local: LocalNetwork;
+}
+interface GameWebViewProps extends Omit<GameWebViewProps$1, InternalProps> {
+    type: 'game';
+    local: LocalNetwork;
+}
+interface LocalNetwork {
+    port: number;
+    host: string;
 }
-declare function WebView({ local, onMessage, ...props }: WebViewProps): react_jsx_runtime.JSX.Element;
+type InternalProps = 'source' | 'cacheEnabled' | 'sharedCookiesEnabled' | 'thirdPartyCookiesEnabled' | 'injectedJavaScriptBeforeContentLoaded';
+declare function WebView({ type, local, onMessage, ...props }: WebViewProps): react_jsx_runtime.JSX.Element;
 
 type UseGeolocationOptions = Omit<StartUpdateLocationOptions, 'callback'>;
 /**
@@ -1097,4 +1112,4 @@ declare const env: {
     getDeploymentId: () => string | undefined;
 };
 
-export { Accuracy, AppsInToss, type ContactEntity, type FetchAlbumPhotosOptions, type GetCurrentLocationOptions, type ImageResponse, type Location, type LocationCoords, type OpenCameraOptions, type StartUpdateLocationOptions, type StartUpdateLocationSubscription, TossPay, type UpdateLocationEventEmitter, type UseGeolocationOptions, WebView, type WebViewProps, appLogin, env, fetchAlbumPhotos, fetchContacts, getClipboardText, getCurrentLocation, getOperationalEnvironment, openCamera, setClipboardText, startUpdateLocation, useGeolocation };
+export { Accuracy, AppsInToss, type ContactEntity, type ExternalWebViewProps, type FetchAlbumPhotosOptions, type GameWebViewProps, type GetCurrentLocationOptions, type ImageResponse, type Location, type LocationCoords, type OpenCameraOptions, type PartnerWebViewProps, type StartUpdateLocationOptions, type StartUpdateLocationSubscription, TossPay, type UpdateLocationEventEmitter, type UseGeolocationOptions, WebView, type WebViewProps, appLogin, env, fetchAlbumPhotos, fetchContacts, getClipboardText, getCurrentLocation, getOperationalEnvironment, openCamera, setClipboardText, startUpdateLocation, useGeolocation };