@ahnseungchan/webviewkit 1.0.8 → 1.2.0

package/dist/stack-router/stack-router-provider.js

@@ -0,0 +1,227 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StackRouterProvider = exports.useStackRouter = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const history_1 = require("../history");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const constants_1 = require("../constants");
+const stack_dev_roadmap_1 = require("../stack-dev/stack-dev-roadmap");
+const type_1 = require("../type");
+const StackRouterContext = (0, react_1.createContext)(null);
+const useStackRouter = () => {
+    const context = (0, react_1.useContext)(StackRouterContext);
+    if (!context) {
+        throw new Error("useStackRouter must be used within a StackRouterProvider");
+    }
+    return context;
+};
+exports.useStackRouter = useStackRouter;
+const StackRouterProvider = ({ maxWidth = "600px", Activities = [], initialActivity, enableDevTools, }) => {
+    const showDevTools = (0, react_1.useMemo)(() => {
+        var _a;
+        if (enableDevTools !== undefined)
+            return enableDevTools;
+        return typeof process !== "undefined" && ((_a = process.env) === null || _a === void 0 ? void 0 : _a.NODE_ENV) === "development";
+    }, [enableDevTools]);
+    const [currentPath, setCurrentPath] = (0, react_1.useState)(history_1.history.getCurrentState().path);
+    const [currentState, setCurrentState] = (0, react_1.useState)(history_1.history.getCurrentState());
+    const [isTransitioning, setIsTransitioning] = (0, react_1.useState)(false);
+    const [direction, setDirection] = (0, react_1.useState)(type_1.Direction.FORWARD);
+    const [visiblePages, setVisiblePages] = (0, react_1.useState)([]);
+    // initialize visible pages
+    (0, react_1.useEffect)(() => {
+        setVisiblePages([
+            {
+                path: initialActivity.path,
+                element: initialActivity.element,
+                isEntering: true,
+            },
+        ]);
+    }, [initialActivity]);
+    // listen to history changes
+    (0, react_1.useEffect)(() => {
+        const removeListener = history_1.history.addListener((state) => {
+            if (!isTransitioning || direction !== type_1.Direction.BACKWARD) {
+                setCurrentPath(state === null || state === void 0 ? void 0 : state.path);
+                setCurrentState(state);
+            }
+            setIsTransitioning(true);
+            setDirection((state === null || state === void 0 ? void 0 : state.action) === type_1.HistoryAction.POP
+                ? type_1.Direction.BACKWARD
+                : type_1.Direction.FORWARD);
+        });
+        return () => {
+            removeListener();
+        };
+    }, [isTransitioning, direction]);
+    // handle back
+    const handleBack = () => {
+        setIsTransitioning(true);
+        setDirection(type_1.Direction.BACKWARD);
+        setTimeout(() => {
+            setVisiblePages((prev) => prev.slice(0, -1));
+        }, constants_1.STACK_TRANSITION_MS);
+        history_1.history.back();
+    };
+    // update current path
+    (0, react_1.useEffect)(() => {
+        if (visiblePages.length > 0) {
+            setCurrentPath(visiblePages[visiblePages.length - 1].path);
+        }
+    }, [visiblePages]);
+    // handle push
+    const handlePush = (path, data) => {
+        setIsTransitioning(true);
+        setDirection(type_1.Direction.FORWARD);
+        const currentActivity = Activities.find((a) => a.path === path);
+        if (currentActivity) {
+            setVisiblePages((prev) => {
+                const existingIndex = prev.findIndex((a) => a.path === path);
+                if (existingIndex !== -1) {
+                    const newActivities = [...prev];
+                    const [removed] = newActivities.splice(existingIndex, 1);
+                    return [...newActivities, { ...removed, isExiting: true }];
+                }
+                return [
+                    ...prev,
+                    { path, element: currentActivity.element, isExiting: true },
+                ];
+            });
+            setTimeout(() => {
+                setCurrentPath(path);
+            }, constants_1.STACK_TRANSITION_MS);
+        }
+        history_1.history.push(path, data);
+    };
+    const value = {
+        currentPath,
+        currentState,
+        initialActivity,
+        Activities,
+        visiblePages,
+        push: handlePush,
+        replace: history_1.history.replace,
+        back: handleBack,
+        forward: history_1.history.forward,
+    };
+    return ((0, jsx_runtime_1.jsxs)(StackRouterContext.Provider, { value: value, children: [(0, jsx_runtime_1.jsx)(LayoutContainer, { children: (0, jsx_runtime_1.jsx)(Layout, { maxWidth: maxWidth, as: "div", "data-testid": "layout", children: (0, jsx_runtime_1.jsx)(PageContainer, { children: visiblePages.map((page, index) => ((0, jsx_runtime_1.jsx)(PageWrapper, { isTransitioning: isTransitioning, direction: direction, currentPage: index === visiblePages.length - 1, isEntering: page.isEntering, isExiting: page.isExiting, zIndex: index, children: page.element }, `${page.path}-${index}`))) }) }) }), (0, jsx_runtime_1.jsx)(stack_dev_roadmap_1.StackDevRoadmap, { visible: showDevTools, pages: visiblePages.map((p) => ({ path: p.path })), currentPath: currentPath })] }));
+};
+exports.StackRouterProvider = StackRouterProvider;
+exports.default = StackRouterProvider;
+/**styles */
+const LayoutContainer = styled_1.default.div `
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  background: white;
+`;
+const Layout = styled_1.default.div `
+  width: 100%;
+  max-width: ${({ maxWidth }) => maxWidth};
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+`;
+const PageContainer = styled_1.default.div `
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: white;
+`;
+const slideInRight = (0, react_2.keyframes) `
+  from {
+    transform: translateX(100%);
+    opacity: 0.2;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+`;
+const slideOutLeft = (0, react_2.keyframes) `
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(-30%);
+    opacity: 0.2;
+  }
+`;
+const slideInLeft = (0, react_2.keyframes) `
+  from {
+    transform: translateX(-30%);
+    opacity: 0.2;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+`;
+const slideOutRight = (0, react_2.keyframes) `
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(100%);
+    opacity: 0.2;
+  }
+`;
+const PageWrapper = styled_1.default.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: white;
+  cursor: grab;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent;
+  z-index: ${({ zIndex }) => zIndex};
+  will-change: transform, opacity;
+  transform: translate3d(0, 0, 0);
+  animation: ${({ isTransitioning, direction, currentPage, isEntering, isExiting, }) => {
+    if (!isTransitioning)
+        return "none";
+    if (direction === "forward") {
+        if (isExiting) {
+            return (0, react_2.css) `
+          ${slideInRight} ${constants_1.STACK_TRANSITION_MS}ms ease-in-out forwards
+        `;
+        }
+        if (isEntering) {
+            return (0, react_2.css) `
+          ${slideOutLeft} ${constants_1.STACK_TRANSITION_MS}ms ease-in-out forwards
+        `;
+        }
+    }
+    else {
+        if (isExiting) {
+            return (0, react_2.css) `
+          ${slideOutRight} ${constants_1.STACK_TRANSITION_MS}ms ease-in-out forwards
+        `;
+        }
+        if (isEntering) {
+            return (0, react_2.css) `
+          ${slideInLeft} ${constants_1.STACK_TRANSITION_MS}ms ease-in-out forwards
+        `;
+        }
+    }
+    return "none";
+}};
+  animation-fill-mode: forwards;
+
+  &:active {
+    cursor: grabbing;
+  }
+`;

package/dist/{packages/core/src/type.d.ts → type.d.ts}

@@ -9,11 +9,8 @@ export interface StackRouterProviderProps {
         path: string;
         element: React.ReactNode;
     };
-    ActivitysLayout?: React.ComponentType<{
-        children: React.ReactNode;
-    }>;
-    onNavigate?: (path: string) => void;
-    currentPath?: string;
+    /** 개발 시 스택 로드맵 오버레이 (기본: NODE_ENV === "development") */
+    enableDevTools?: boolean;
 }
 export interface VisiblePage {
     path: string;
@@ -37,3 +34,4 @@ export interface HistoryState {
     action?: HistoryAction.PUSH | HistoryAction.POP | HistoryAction.REPLACE;
 }
 export type HistoryListener = (state: HistoryState) => void;
+//# sourceMappingURL=type.d.ts.map

package/dist/type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../src/type.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,EAAE,CAAC;IAC1D,eAAe,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,CAAC;IAC5D,wDAAwD;IACxD,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,oBAAY,SAAS;IACnB,OAAO,YAAY;IACnB,QAAQ,aAAa;CACtB;AAED,MAAM,MAAM,aAAa,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,QAAQ,CAAC;AAEnE,oBAAY,aAAa;IACvB,IAAI,SAAS;IACb,GAAG,QAAQ;IACX,OAAO,YAAY;CACpB;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,MAAM,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,aAAa,CAAC,GAAG,GAAG,aAAa,CAAC,OAAO,CAAC;CACzE;AAED,MAAM,MAAM,eAAe,GAAG,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC"}

package/dist/type.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HistoryAction = exports.Direction = void 0;
+var Direction;
+(function (Direction) {
+    Direction["FORWARD"] = "forward";
+    Direction["BACKWARD"] = "backward";
+})(Direction || (exports.Direction = Direction = {}));
+var HistoryAction;
+(function (HistoryAction) {
+    HistoryAction["PUSH"] = "PUSH";
+    HistoryAction["POP"] = "POP";
+    HistoryAction["REPLACE"] = "REPLACE";
+})(HistoryAction || (exports.HistoryAction = HistoryAction = {}));

package/package.json

@@ -1,19 +1,14 @@
 {
   "name": "@ahnseungchan/webviewkit",
-  "version": "1.0.8",
-  "description": "Core WebView functionality for stack-based navigation",
+  "version": "1.2.0",
+  "description": "Stack-based navigation for React WebView apps with dev stack roadmap",
   "main": "dist/index.js",
-  "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
+  "files": ["dist", "README.md"],
+  "sideEffects": false,
   "scripts": {
-    "build": "tsc",
-    "test": "jest src/__tests__",
+    "build": "tsc -p tsconfig.build.json",
+    "test": "jest --config jest.config.js",
     "clean": "rimraf dist",
     "lint": "eslint src --ext .ts,.tsx",
     "prepublishOnly": "npm run clean && npm run build"
@@ -24,23 +19,27 @@
     "stack-router",
     "react",
     "mobile",
-    "router"
+    "router",
+    "react-native-webview"
   ],
-  "author": "Your Name",
+  "author": "Seungchan Ahn <omnipoo@naver.com>",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/Ahnseungc/webviewkit.git"
+    "url": "https://github.com/Ahnseungc/WebViewKit.git"
   },
   "bugs": {
-    "url": "https://github.com/Ahnseungc/webviewkit/issues"
+    "url": "https://github.com/Ahnseungc/WebViewKit/issues"
+  },
+  "homepage": "https://github.com/Ahnseungc/WebViewKit#readme",
+  "publishConfig": {
+    "access": "public"
   },
-  "homepage": "https://github.com/Ahnseungc/webviewkit#readme",
   "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
     "@emotion/react": ">=11.0.0",
-    "@emotion/styled": ">=11.0.0"
+    "@emotion/styled": ">=11.0.0",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
   },
   "devDependencies": {
     "@emotion/babel-plugin": "^11.11.0",
@@ -50,17 +49,14 @@
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
-    "@types/react": "^19.1.4",
-    "@types/react-dom": "^19.1.5",
+    "@types/react": "^18.3.21",
+    "@types/react-dom": "^18.3.7",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "rimraf": "^5.0.5",
     "ts-jest": "^29.1.2",
     "typescript": "^5.3.3"
-  },
-  "dependencies": {
-    "gsap": "^3.13.0"
   }
 }

package/dist/packages/core/src/__tests__/back-router.test.js

@@ -1,62 +0,0 @@
-"use strict";
-// import React from "react";
-// import { render, screen, fireEvent } from "@testing-library/react";
-// import BackRouter from "../stack-router/_components/back-router";
-// import userEvent from "@testing-library/user-event";
-// import { useStackRouter } from "../stack-router/stack-router-provider";
-// jest.mock("../stack-router/stack-router-provider", () => ({
-//   useStackRouter: jest.fn(),
-// }));
-// describe("BackRouter", () => {
-//   const mockBack = jest.fn();
-//   const user = userEvent.setup();
-//   beforeEach(() => {
-//     // Reset all mocks before each test
-//     jest.clearAllMocks();
-//     // Setup default mock implementation
-//     (useStackRouter as jest.Mock).mockReturnValue({
-//       back: mockBack,
-//     });
-//   });
-//   it("renders back button with icon", () => {
-//     render(<BackRouter />);
-//     // Check if button exists
-//     const button = screen.getByRole("button");
-//     expect(button).toBeInTheDocument();
-//     // Check if SVG icon exists
-//     const svg = button.querySelector("svg");
-//     expect(svg).toBeInTheDocument();
-//   });
-//   it("calls back function when clicked", () => {
-//     render(<BackRouter />);
-//     const button = screen.getByRole("button");
-//     fireEvent.click(button);
-//     expect(mockBack).toHaveBeenCalledTimes(1);
-//   });
-//   it("applies correct styles", () => {
-//     render(<BackRouter />);
-//     const button = screen.getByRole("button");
-//     // Check initial styles
-//     expect(button).toHaveStyle({
-//       width: "40px",
-//       height: "40px",
-//       padding: "8px",
-//       borderRadius: "50%",
-//     });
-//     // Check if SVG has correct attributes
-//     const svg = button.querySelector("svg");
-//     expect(svg).toHaveAttribute("width", "32");
-//     expect(svg).toHaveAttribute("height", "32");
-//     expect(svg).toHaveAttribute("viewBox", "0 0 24 24");
-//   });
-//   it("handles hover and active states", async () => {
-//     render(<BackRouter />);
-//     const button = screen.getByRole("button");
-//     // expect hover
-//     await user.hover(button);
-//     expect(button).toHaveStyle({ color: "#666666" });
-//     // expect active
-//     await user.pointer({ keys: "[MouseLeft]", target: button });
-//     expect(button).toHaveStyle({ color: "#999999" });
-//   });
-// });

package/dist/packages/core/src/__tests__/history.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/packages/core/src/__tests__/history.test.js

@@ -1,114 +0,0 @@
-import { history } from "../history";
-// mocking window.history
-const mockHistory = {
-    state: null,
-    pushState: jest.fn(),
-    replaceState: jest.fn(),
-    back: jest.fn(),
-    forward: jest.fn(),
-    go: jest.fn(),
-};
-// mocking window.location
-const mockLocation = {
-    pathname: "/",
-};
-// mocking global window
-Object.defineProperty(window, "history", {
-    value: mockHistory,
-    writable: true,
-});
-Object.defineProperty(window, "location", {
-    value: mockLocation,
-    writable: true,
-});
-describe("history", () => {
-    beforeEach(() => {
-        jest.clearAllMocks();
-        mockHistory.state = null;
-        mockLocation.pathname = "/";
-    });
-    describe("push", () => {
-        it("should push new history entry", () => {
-            const path = "/test";
-            const data = { title: "Test" };
-            history.push(path, data);
-            expect(mockHistory.pushState).toHaveBeenCalledWith({ path, data, action: "PUSH" }, "", path);
-        });
-    });
-    describe("replace", () => {
-        it("should replace current history entry", () => {
-            const path = "/test";
-            const data = { title: "Test" };
-            history.replace(path, data);
-            expect(mockHistory.replaceState).toHaveBeenCalledWith({ path, data, action: "REPLACE" }, "", path);
-        });
-    });
-    describe("navigation methods", () => {
-        it("should call history.back()", () => {
-            history.back();
-            expect(mockHistory.back).toHaveBeenCalled();
-        });
-        it("should call history.forward()", () => {
-            history.forward();
-            expect(mockHistory.forward).toHaveBeenCalled();
-        });
-        it("should call history.go()", () => {
-            const delta = 2;
-            history.go(delta);
-            expect(mockHistory.go).toHaveBeenCalledWith(delta);
-        });
-    });
-    describe("getCurrentState", () => {
-        it("should return current state", () => {
-            const mockState = {
-                path: "/test",
-                data: { title: "Test" },
-            };
-            mockHistory.state = mockState;
-            const state = history.getCurrentState();
-            expect(state).toEqual(mockState);
-        });
-        it("should return default state when history.state is null", () => {
-            mockHistory.state = null;
-            mockLocation.pathname = "/default";
-            const state = history.getCurrentState();
-            expect(state).toEqual({ path: "/default" });
-        });
-    });
-    describe("addListener", () => {
-        it("should add and remove listener", () => {
-            const listener = jest.fn();
-            const removeListener = history.addListener(listener);
-            const testState = {
-                path: "/test",
-            };
-            const popStateEvent = new PopStateEvent("popstate", {
-                state: testState,
-            });
-            window.dispatchEvent(popStateEvent);
-            expect(listener).toHaveBeenCalledWith(testState);
-            // Delete listener
-            removeListener();
-            // change state and dispatch event
-            const newState = { path: "/new" };
-            const newPopStateEvent = new PopStateEvent("popstate", {
-                state: newState,
-            });
-            window.dispatchEvent(newPopStateEvent);
-            // listener should not be called anymore
-            expect(listener).toHaveBeenCalledTimes(1);
-        });
-        it("should not add duplicate listener", () => {
-            const listener = jest.fn();
-            // add listener twice
-            history.addListener(listener);
-            history.addListener(listener);
-            // change state and dispatch event
-            const testState = { path: "/test" };
-            const popStateEvent = new PopStateEvent("popstate", { state: testState });
-            window.dispatchEvent(popStateEvent);
-            // listener should be called only once
-            expect(listener).toHaveBeenCalledTimes(1);
-        });
-    });
-});