@ahnseungchan/webviewkit 1.0.1 → 1.0.3

package/README.md

@@ -0,0 +1,149 @@
+# WebViewKit
+
+A modern React library for building stack-based navigation in WebView applications, providing smooth transitions and native-like navigation experience.
+
+## Features
+
+- 🚀 **Stack-based Navigation**: Native-like navigation with push/pop transitions
+- 🎨 **Smooth Animations**: GSAP-powered animations for fluid page transitions
+- 📱 **Mobile-First**: Designed specifically for WebView and mobile applications
+- 🔧 **TypeScript Support**: Full TypeScript support with comprehensive type definitions
+- 🎯 **Flexible**: Customizable animations, layouts, and navigation behavior
+
+## Installation
+
+```bash
+npm install @webviewkit
+# or
+yarn add @webviewkit
+# or
+pnpm add @webviewkit
+```
+
+## Quick Start
+
+```tsx
+import React from "react";
+import { StackRouterProvider } from "@webviewkit";
+
+function App() {
+  return (
+    <StackRouterProvider
+      maxWidth="600px"
+      Activities={[
+        {
+          path: "/",
+          element: <HomePage />,
+        },
+        {
+          path: "/about",
+          element: <AboutPage />,
+        },
+      ]}
+      initialActivity={{ path: "/", element: <HomePage /> }}
+    />
+  );
+}
+```
+
+## Usage
+
+### Basic Navigation
+
+```tsx
+import { useStackRouter } from "@webviewkit/core";
+
+function HomePage() {
+  const { push, back } = useStackRouter();
+
+  return (
+    <div>
+      <h1>Home</h1>
+      <button onClick={() => push("/about")}>Go to About</button>
+      <button onClick={back}>Back</button>
+    </div>
+  );
+}
+```
+
+### History Management
+
+```tsx
+import { history } from "@webviewkit";
+
+// Navigate to a new page
+await history.push("/new-page", { data: "some data" });
+
+// Replace current page
+await history.replace("/replacement-page", { data: "replacement data" });
+
+// Go back
+await history.back();
+
+// Go forward
+await history.forward();
+```
+
+## API Reference
+
+### StackRouterProvider Props
+
+| Prop              | Type                                              | Default   | Description                           |
+| ----------------- | ------------------------------------------------- | --------- | ------------------------------------- |
+| `maxWidth`        | `string`                                          | `"600px"` | Maximum width of the layout container |
+| `isShowHeader`    | `boolean`                                         | `true`    | Whether to show the header            |
+| `Activities`      | `Array<{path: string, element: React.ReactNode}>` | `[]`      | Array of available routes             |
+| `initialActivity` | `{path: string, element: React.ReactNode}`        | -         | Initial route to display              |
+
+### useStackRouter Hook
+
+Returns an object with navigation methods:
+
+- `currentPath`: Current active path
+- `currentState`: Current history state
+- `push(path, data?)`: Navigate to a new page
+- `replace(path, data?)`: Replace current page
+- `back()`: Go back to previous page
+- `forward()`: Go forward to next page
+
+### History API
+
+- `history.push(path, data?)`: Add new history entry
+- `history.replace(path, data?)`: Replace current history entry
+- `history.back()`: Go back to previous entry
+- `history.forward()`: Go forward to next entry
+- `history.go(delta)`: Go to specific history entry
+- `history.getCurrentState()`: Get current history state
+- `history.addListener(listener)`: Add history change listener
+
+## Examples
+
+See the `packages/browser` directory for complete examples.
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Build all packages
+pnpm build
+
+# Run tests
+pnpm test
+
+# Run linting
+pnpm lint
+```
+
+## Contributing
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

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

@@ -0,0 +1,62 @@
+"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

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

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

@@ -0,0 +1,114 @@
+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);
+        });
+    });
+});

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

@@ -0,0 +1,185 @@
+"use strict";
+// import React from "react";
+// import {
+//   render,
+//   screen,
+//   fireEvent,
+//   act,
+//   waitFor,
+// } from "@testing-library/react";
+// import StackRouter, {
+//   useStackRouter,
+// } from "../stack-router/stack-router-provider";
+// import { history } from "../history";
+// // Test component that uses useStackRouter
+// const MockPushComponent = ({ path }: { path: string }) => {
+//   const { push } = useStackRouter();
+//   return (
+//     <button
+//       onClick={() => push(path)}
+//       data-testid={`push-to-${path.replace("/", "")}`}
+//     >
+//       Navigate to {path}
+//     </button>
+//   );
+// };
+// const MockBackComponent = ({ path }: { path: string }) => {
+//   const { back } = useStackRouter();
+//   return (
+//     <button onClick={back} data-testid={`back-to-${path.replace("/", "")}`}>
+//       Back
+//     </button>
+//   );
+// };
+// // Mock components for testing
+// const MockPage1 = () => (
+//   <div data-testid="page1">
+//     <MockPushComponent path="/page2" />
+//     Page1
+//   </div>
+// );
+// const MockPage2 = () => (
+//   <div data-testid="page2">
+//     <MockPushComponent path="/page3" />
+//     <MockBackComponent path="/page1" />
+//     Page2
+//   </div>
+// );
+// const MockPage3 = () => (
+//   <div data-testid="page3">
+//     <MockBackComponent path="/page2" />
+//     Page3
+//   </div>
+// );
+// const mockActivities = [
+//   { path: "/page1", element: <MockPage1 /> },
+//   { path: "/page2", element: <MockPage2 /> },
+//   { path: "/page3", element: <MockPage3 /> },
+// ];
+// // Helper function to wait for animations and state updates
+// const waitForStateUpdate = async () => {
+//   await act(async () => {
+//     await new Promise((resolve) => setTimeout(resolve, 100));
+//   });
+// };
+// describe("StackRouter", () => {
+//   it("renders initial page correctly", () => {
+//     render(
+//       <StackRouter
+//         initialActivity={{ path: "/page1", element: <MockPage1 /> }}
+//         Activities={mockActivities}
+//       />
+//     );
+//     expect(screen.getByTestId("page1")).toBeInTheDocument();
+//   });
+//   it("navigates to new page when push is called", async () => {
+//     render(
+//       <StackRouter
+//         initialActivity={{ path: "/page1", element: <MockPage1 /> }}
+//         Activities={mockActivities}
+//       />
+//     );
+//     // Click the navigation button
+//     await act(async () => {
+//       fireEvent.click(screen.getByTestId("push-to-page2"));
+//       await waitForStateUpdate();
+//     });
+//     await waitFor(() => {
+//       expect(screen.getByText("Page2")).toBeInTheDocument();
+//     });
+//   });
+//   it("goes back when back is called", async () => {
+//     render(
+//       <StackRouter
+//         initialActivity={{ path: "/page1", element: <MockPage1 /> }}
+//         Activities={mockActivities}
+//       />
+//     );
+//     // First push to page2
+//     await act(async () => {
+//       fireEvent.click(screen.getByTestId("push-to-page2"));
+//       await waitForStateUpdate();
+//     });
+//     // Then go back
+//     await act(async () => {
+//       fireEvent.click(screen.getByTestId("back-to-page1"));
+//       await waitForStateUpdate();
+//     });
+//     await waitFor(() => {
+//       expect(screen.getByText("Page1")).toBeInTheDocument();
+//     });
+//   });
+//   it("handles multiple page transitions correctly", async () => {
+//     render(
+//       <StackRouter
+//         initialActivity={{ path: "/page1", element: <MockPage1 /> }}
+//         Activities={mockActivities}
+//       />
+//     );
+//     // Navigate through pages
+//     await act(async () => {
+//       fireEvent.click(screen.getByTestId("push-to-page2"));
+//       await waitForStateUpdate();
+//     });
+//     await waitFor(() => {
+//       expect(screen.getByText("Page2")).toBeInTheDocument();
+//     });
+//     await act(async () => {
+//       fireEvent.click(screen.getByTestId("push-to-page3"));
+//       await waitForStateUpdate();
+//     });
+//     await waitFor(() => {
+//       expect(screen.getByText("Page3")).toBeInTheDocument();
+//     });
+//     // Go back twice
+//     await act(async () => {
+//       fireEvent.click(screen.getByTestId("back-to-page2"));
+//       await waitForStateUpdate();
+//     });
+//     await waitFor(() => {
+//       expect(screen.getByText("Page2")).toBeInTheDocument();
+//     });
+//     await act(async () => {
+//       fireEvent.click(screen.getByTestId("back-to-page1"));
+//       await waitForStateUpdate();
+//     });
+//     await waitFor(() => {
+//       expect(screen.getByText("Page1")).toBeInTheDocument();
+//     });
+//   });
+//   it("maintains correct page order in stack", async () => {
+//     const { rerender } = render(
+//       <StackRouter
+//         initialActivity={{ path: "/page1", element: <MockPage1 /> }}
+//         Activities={mockActivities}
+//       />
+//     );
+//     // Navigate to page2
+//     await act(async () => {
+//       fireEvent.click(screen.getByTestId("push-to-page2"));
+//       await waitForStateUpdate();
+//     });
+//     await waitFor(() => {
+//       expect(screen.getByText("Page2")).toBeInTheDocument();
+//     });
+//     // Navigate to page3
+//     await act(async () => {
+//       fireEvent.click(screen.getByTestId("push-to-page3"));
+//       await waitForStateUpdate();
+//     });
+//     await waitFor(() => {
+//       expect(screen.getByText("Page3")).toBeInTheDocument();
+//     });
+//   });
+//   it("handles maxWidth prop correctly", () => {
+//     render(
+//       <StackRouter
+//         initialActivity={{ path: "/page1", element: <MockPage1 /> }}
+//         Activities={mockActivities}
+//         maxWidth="800px"
+//       />
+//     );
+//     const layout = screen.getByTestId("layout");
+//     expect(layout).toHaveStyle({ maxWidth: "800px" });
+//   });
+// });

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

@@ -0,0 +1,10 @@
+import { HistoryListener, HistoryState } from "./type";
+export declare const history: {
+    push: (path: string, data?: any) => Promise<void>;
+    replace: (path: string, data: any) => Promise<void>;
+    back: () => Promise<void>;
+    forward: () => Promise<void>;
+    go: (delta: number) => Promise<void>;
+    getCurrentState: () => HistoryState;
+    addListener: (listener: HistoryListener) => () => boolean;
+};

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

@@ -0,0 +1,82 @@
+import { HistoryAction } from "./type";
+const listeners = new Set();
+const handlePopState = (event) => {
+    const state = event.state;
+    notifyListeners(state);
+};
+// notify to listeners
+const notifyListeners = (state) => {
+    listeners.forEach((listener) => listener(state));
+};
+// initialize
+window.addEventListener("popstate", handlePopState);
+export const history = {
+    // add new history entry
+    push: async (path, data) => {
+        const state = {
+            path,
+            data,
+            action: HistoryAction.PUSH,
+        };
+        window.history.pushState(state, "", path);
+        // 애니메이션을 위한 지연
+        await new Promise((resolve) => setTimeout(resolve, 300));
+        notifyListeners(state);
+    },
+    // replace current history entry
+    replace: async (path, data) => {
+        const state = {
+            path,
+            data,
+            action: HistoryAction.REPLACE,
+        };
+        window.history.replaceState(state, "", path);
+        await new Promise((resolve) => setTimeout(resolve, 300));
+        notifyListeners(state);
+    },
+    // back to previous history entry
+    back: async () => {
+        window.history.back();
+        await new Promise((resolve) => {
+            const handlePopState = () => {
+                window.removeEventListener("popstate", handlePopState);
+                resolve();
+            };
+            window.addEventListener("popstate", handlePopState);
+        });
+        const state = {
+            path: window.location.pathname,
+            action: HistoryAction.POP,
+        };
+        notifyListeners(state);
+    },
+    // forward to next history entry
+    forward: async () => {
+        window.history.forward();
+        const state = {
+            path: window.location.pathname,
+            action: HistoryAction.PUSH,
+        };
+        await new Promise((resolve) => setTimeout(resolve, 300));
+        notifyListeners(state);
+    },
+    // go to specific history entry
+    go: async (delta) => {
+        window.history.go(delta);
+        const state = {
+            path: window.location.pathname,
+            action: HistoryAction.PUSH,
+        };
+        await new Promise((resolve) => setTimeout(resolve, 300));
+        notifyListeners(state);
+    },
+    // get current history entry
+    getCurrentState: () => window.history.state || {
+        path: window.location.pathname,
+    },
+    // change listener to history
+    addListener: (listener) => {
+        listeners.add(listener);
+        return () => listeners.delete(listener);
+    },
+};

package/dist/packages/core/src/index.d.ts

@@ -0,0 +1,5 @@
+export type { StackRouterProviderProps, VisiblePage, DirectionType, HistoryState, HistoryListener, } from "./type";
+export { Direction, HistoryAction } from "./type";
+export { history } from "./history";
+export { default as StackRouterProvider } from "./stack-router/stack-router-provider";
+export { useStackRouter } from "./stack-router/stack-router-provider";

package/dist/packages/core/src/index.js

@@ -0,0 +1,6 @@
+export { Direction, HistoryAction } from "./type";
+// Export history API
+export { history } from "./history";
+// Export stack router components
+export { default as StackRouterProvider } from "./stack-router/stack-router-provider";
+export { useStackRouter } from "./stack-router/stack-router-provider";

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

@@ -0,0 +1,153 @@
+"use strict";
+// import React from "react";
+// import { render, screen, fireEvent, act } from "@testing-library/react";
+// import StackRouter from "../stack-router-provider";
+// import { history } from "../../history";
+// // Mock components for testing
+// const MockPage1 = () => <div data-testid="page1">Page 1</div>;
+// const MockPage2 = () => <div data-testid="page2">Page 2</div>;
+// const MockPage3 = () => <div data-testid="page3">Page 3</div>;
+// const mockActivities = [
+//   { path: "/page1", element: <MockPage1 /> },
+//   { path: "/page2", element: <MockPage2 /> },
+//   { path: "/page3", element: <MockPage3 /> },
+// ];
+// // Helper function to wait for animations
+// const waitForAnimation = async () => {
+//   await act(async () => {
+//     await new Promise((resolve) => setTimeout(resolve, 700)); // 애니메이션 시간과 동일하게 설정
+//   });
+// };
+// describe("StackRouter", () => {
+//   beforeEach(() => {
+//     // Reset history before each test
+//     history.push("/page1");
+//   });
+//   it("renders initial page correctly", () => {
+//     render(
+//       <StackRouter
+//         initialActivity={{ path: "/page1", element: <MockPage1 /> }}
+//         Activities={mockActivities}
+//       />
+//     );
+//     expect(screen.getByTestId("page1")).toBeInTheDocument();
+//   });
+//   it("navigates to new page when push is called", async () => {
+//     const { rerender } = render(
+//       <StackRouter
+//         initialActivity={{ path: "/page1", element: <MockPage1 /> }}
+//         Activities={mockActivities}
+//       />
+//     );
+//     // Mock history.push
+//     history.push("/page2");
+//     // Wait for animation
+//     await waitForAnimation();
+//     rerender(
+//       <StackRouter
+//         initialActivity={{ path: "/page1", element: <MockPage1 /> }}
+//         Activities={mockActivities}
+//       />
+//     );
+//     // 페이지가 렌더링될 때까지 대기
+//     await screen.findByTestId("page2");
+//     expect(screen.getByTestId("page2")).toBeInTheDocument();
+//   });
+//   it("goes back when back is called", async () => {
+//     const { rerender } = render(
+//       <StackRouter
+//         initialActivity={{ path: "/page1", element: <MockPage1 /> }}
+//         Activities={mockActivities}
+//       />
+//     );
+//     // First push to page2
+//     history.push("/page2");
+//     await waitForAnimation();
+//     // Then go back
+//     history.back();
+//     await waitForAnimation();
+//     rerender(
+//       <StackRouter
+//         initialActivity={{ path: "/page1", element: <MockPage1 /> }}
+//         Activities={mockActivities}
+//       />
+//     );
+//     // 페이지가 렌더링될 때까지 대기
+//     await screen.findByTestId("page1");
+//     expect(screen.getByTestId("page1")).toBeInTheDocument();
+//   });
+//   it("handles multiple page transitions correctly", async () => {
+//     const { rerender } = render(
+//       <StackRouter
+//         initialActivity={{ path: "/page1", element: <MockPage1 /> }}
+//         Activities={mockActivities}
+//       />
+//     );
+//     // Navigate through pages
+//     history.push("/page2");
+//     await waitForAnimation();
+//     history.push("/page3");
+//     await waitForAnimation();
+//     rerender(
+//       <StackRouter
+//         initialActivity={{ path: "/page1", element: <MockPage1 /> }}
+//         Activities={mockActivities}
+//       />
+//     );
+//     // 페이지가 렌더링될 때까지 대기
+//     await screen.findByTestId("page3");
+//     expect(screen.getByTestId("page3")).toBeInTheDocument();
+//     // Go back twice
+//     history.back();
+//     await waitForAnimation();
+//     history.back();
+//     await waitForAnimation();
+//     rerender(
+//       <StackRouter
+//         initialActivity={{ path: "/page1", element: <MockPage1 /> }}
+//         Activities={mockActivities}
+//       />
+//     );
+//     // 페이지가 렌더링될 때까지 대기
+//     await screen.findByTestId("page1");
+//     expect(screen.getByTestId("page1")).toBeInTheDocument();
+//   });
+//   it("maintains correct page order in stack", async () => {
+//     const { rerender } = render(
+//       <StackRouter
+//         initialActivity={{ path: "/page1", element: <MockPage1 /> }}
+//         Activities={mockActivities}
+//       />
+//     );
+//     // Navigate to page2
+//     history.push("/page2");
+//     await waitForAnimation();
+//     // Navigate to page3
+//     history.push("/page3");
+//     await waitForAnimation();
+//     rerender(
+//       <StackRouter
+//         initialActivity={{ path: "/page1", element: <MockPage1 /> }}
+//         Activities={mockActivities}
+//       />
+//     );
+//     // 모든 페이지가 렌더링될 때까지 대기
+//     await screen.findByTestId("page3");
+//     // Check if all pages are in the correct order
+//     const pages = screen.getAllByTestId(/page[1-3]/);
+//     expect(pages[0]).toHaveTextContent("Page 1");
+//     expect(pages[1]).toHaveTextContent("Page 2");
+//     expect(pages[2]).toHaveTextContent("Page 3");
+//   });
+//   it("handles maxWidth prop correctly", () => {
+//     const { container } = render(
+//       <StackRouter
+//         initialActivity={{ path: "/page1", element: <MockPage1 /> }}
+//         Activities={mockActivities}
+//         maxWidth="800px"
+//       />
+//     );
+//     const layout = container.querySelector('div[style*="max-width: 800px"]');
+//     expect(layout).toBeInTheDocument();
+//   });
+// });

package/dist/packages/core/src/stack-router/_components/back-router.d.ts

@@ -0,0 +1,2 @@
+declare const BackRouter: () => import("react/jsx-runtime").JSX.Element;
+export default BackRouter;

package/dist/packages/core/src/stack-router/_components/back-router.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useStackRouter } from "../stack-router-provider";
+const BackRouter = () => {
+    const { back } = useStackRouter();
+    return (_jsx(BackButton, { onClick: back, children: _jsx(BackIcon, {}) }));
+};
+export default BackRouter;
+/**
+ styles
+ */
+const BackButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 50%;
+  transition: all 0.2s;
+  color: #000000;
+
+  &:hover {
+    color: #666666;
+  }
+
+  &:active {
+    color: #999999;
+  }
+`;
+const BackIcon = () => (_jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12 20L4 12L12 4", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));

package/dist/packages/core/src/stack-router/_components/header.d.ts

@@ -0,0 +1,2 @@
+declare const Header: () => import("react/jsx-runtime").JSX.Element;
+export default Header;

package/dist/packages/core/src/stack-router/_components/header.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import styled from "@emotion/styled";
+import BackRouter from "./back-router";
+import { useStackRouter } from "../stack-router-provider";
+const Header = () => {
+    const { currentPath, visiblePages } = useStackRouter();
+    const [displayPath, setDisplayPath] = useState(currentPath);
+    const [isVisible, setIsVisible] = useState(visiblePages.length > 1);
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setDisplayPath(currentPath);
+            setIsVisible(visiblePages.length > 1);
+        }, 500);
+        return () => clearTimeout(timer);
+    }, [currentPath, visiblePages]);
+    return (_jsxs(StyledHeader, { children: [isVisible && _jsx(BackRouter, {}), _jsx(StyledTitle, { children: displayPath })] }));
+};
+/**
+ styles
+ */
+const StyledHeader = styled.header `
+  width: 100%;
+  height: 64px;
+  background-color: white;
+  border-bottom: 1px solid #e5e7eb;
+  display: flex;
+  align-items: center;
+  padding: 0 1rem;
+`;
+const StyledTitle = styled.h1 `
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #111827;
+`;
+export default Header;

package/dist/packages/core/src/stack-router/stack-router-provider.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { HistoryState, StackRouterProviderProps } from "../type";
+interface StackRouterContextProps {
+    currentPath: string;
+    currentState: HistoryState;
+    Activities: {
+        path: string;
+        element: React.ReactNode;
+    }[];
+    initialActivity: {
+        path: string;
+        element: React.ReactNode;
+    };
+    push: (path: string, data?: any) => void;
+    replace: (path: string, data?: any) => void;
+    back: () => void;
+    forward: () => void;
+    visiblePages: {
+        path: string;
+        element: React.ReactNode;
+    }[];
+}
+export declare const useStackRouter: () => StackRouterContextProps;
+declare const StackRouter: ({ maxWidth, Activities, initialActivity, }: StackRouterProviderProps) => import("react/jsx-runtime").JSX.Element;
+export default StackRouter;

package/dist/packages/core/src/stack-router/stack-router-provider.js

@@ -0,0 +1,211 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState } from "react";
+import { history } from "../history";
+import styled from "@emotion/styled";
+import { keyframes, css } from "@emotion/react";
+import { HistoryAction, Direction, } from "../type";
+const StackRouterContext = createContext(null);
+export const useStackRouter = () => {
+    const context = useContext(StackRouterContext);
+    if (!context) {
+        throw new Error("useStackRouter must be used within a StackRouterProvider");
+    }
+    return context;
+};
+const StackRouter = ({ maxWidth = "600px", Activities = [], initialActivity, }) => {
+    const [currentPath, setCurrentPath] = useState(history.getCurrentState().path);
+    const [currentState, setCurrentState] = useState(history.getCurrentState());
+    const [isTransitioning, setIsTransitioning] = useState(false);
+    const [direction, setDirection] = useState(Direction.FORWARD);
+    const [visiblePages, setVisiblePages] = useState([]);
+    // initialize visible pages
+    useEffect(() => {
+        setVisiblePages([
+            {
+                path: initialActivity.path,
+                element: initialActivity.element,
+                isEntering: true,
+            },
+        ]);
+    }, [initialActivity]);
+    // listen to history changes
+    useEffect(() => {
+        const removeListener = history.addListener((state) => {
+            if (!isTransitioning || direction !== Direction.BACKWARD) {
+                setCurrentPath(state?.path);
+                setCurrentState(state);
+            }
+            setIsTransitioning(true);
+            setDirection(state?.action === HistoryAction.POP
+                ? Direction.BACKWARD
+                : Direction.FORWARD);
+        });
+        return () => {
+            removeListener();
+        };
+    }, [isTransitioning, direction]);
+    // handle back
+    const handleBack = () => {
+        setIsTransitioning(true);
+        setDirection(Direction.BACKWARD);
+        setTimeout(() => {
+            setVisiblePages((prev) => prev.slice(0, -1));
+        }, 500);
+        history.back();
+    };
+    // update current path
+    useEffect(() => {
+        if (visiblePages.length > 0) {
+            setCurrentPath(visiblePages[visiblePages.length - 1].path);
+        }
+    }, [visiblePages]);
+    // handle push
+    const handlePush = (path, data) => {
+        setIsTransitioning(true);
+        setDirection(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);
+            }, 500);
+        }
+        history.push(path, data);
+    };
+    const value = {
+        currentPath,
+        currentState,
+        initialActivity,
+        Activities,
+        visiblePages,
+        push: handlePush,
+        replace: history.replace,
+        back: handleBack,
+        forward: history.forward,
+    };
+    return (_jsx(StackRouterContext.Provider, { value: value, children: _jsx(LayoutContainer, { children: _jsx(Layout, { maxWidth: maxWidth, as: "div", "data-testid": "layout", children: _jsx(PageContainer, { children: visiblePages.map((page, index) => (_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}`))) }) }) }) }));
+};
+export default StackRouter;
+/**styles */
+const LayoutContainer = styled.div `
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  background: white;
+`;
+const Layout = styled.div `
+  width: 100%;
+  max-width: ${({ maxWidth }) => maxWidth};
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+`;
+const PageContainer = styled.div `
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: white;
+`;
+const slideInRight = keyframes `
+  from {
+    transform: translateX(100%);
+    opacity: 0.2;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+`;
+const slideOutLeft = keyframes `
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(-30%);
+    opacity: 0.2;
+  }
+`;
+const slideInLeft = keyframes `
+  from {
+    transform: translateX(-30%);
+    opacity: 0.2;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+`;
+const slideOutRight = keyframes `
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(100%);
+    opacity: 0.2;
+  }
+`;
+const PageWrapper = styled.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 css `
+          ${slideInRight} 0.7s ease-in-out forwards
+        `;
+        }
+        if (isEntering) {
+            return css `
+          ${slideOutLeft} 0.7s ease-in-out forwards
+        `;
+        }
+    }
+    else {
+        if (isExiting) {
+            return css `
+          ${slideOutRight} 0.7s ease-in-out forwards
+        `;
+        }
+        if (isEntering) {
+            return css `
+          ${slideInLeft} 0.7s ease-in-out forwards
+        `;
+        }
+    }
+    return "none";
+}};
+  animation-fill-mode: forwards;
+
+  &:active {
+    cursor: grabbing;
+  }
+`;

package/dist/packages/core/src/type.d.ts

@@ -0,0 +1,34 @@
+export interface StackRouterProviderProps {
+    maxWidth?: string;
+    isShowHeader?: boolean;
+    Activities?: {
+        path: string;
+        element: React.ReactNode;
+    }[];
+    initialActivity: {
+        path: string;
+        element: React.ReactNode;
+    };
+}
+export interface VisiblePage {
+    path: string;
+    element: React.ReactNode;
+    isEntering?: boolean;
+    isExiting?: boolean;
+}
+export declare enum Direction {
+    FORWARD = "forward",
+    BACKWARD = "backward"
+}
+export type DirectionType = Direction.FORWARD | Direction.BACKWARD;
+export declare enum HistoryAction {
+    PUSH = "PUSH",
+    POP = "POP",
+    REPLACE = "REPLACE"
+}
+export interface HistoryState {
+    path: string;
+    data?: any;
+    action?: HistoryAction.PUSH | HistoryAction.POP | HistoryAction.REPLACE;
+}
+export type HistoryListener = (state: HistoryState) => void;

package/dist/packages/core/src/type.js

@@ -0,0 +1,11 @@
+export var Direction;
+(function (Direction) {
+    Direction["FORWARD"] = "forward";
+    Direction["BACKWARD"] = "backward";
+})(Direction || (Direction = {}));
+export var HistoryAction;
+(function (HistoryAction) {
+    HistoryAction["PUSH"] = "PUSH";
+    HistoryAction["POP"] = "POP";
+    HistoryAction["REPLACE"] = "REPLACE";
+})(HistoryAction || (HistoryAction = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ahnseungchan/webviewkit",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Core WebView functionality for stack-based navigation",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",