@ahnseungchan/webviewkit 1.2.0 → 2.0.0

package/dist/stack-router/_components/header.js

@@ -1,42 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
-const styled_1 = __importDefault(require("@emotion/styled"));
-const back_router_1 = __importDefault(require("./back-router"));
-const stack_router_provider_1 = require("../stack-router-provider");
-const constants_1 = require("../../constants");
-const Header = () => {
-    const { currentPath, visiblePages } = (0, stack_router_provider_1.useStackRouter)();
-    const [displayPath, setDisplayPath] = (0, react_1.useState)(currentPath);
-    const [isVisible, setIsVisible] = (0, react_1.useState)(visiblePages.length > 1);
-    (0, react_1.useEffect)(() => {
-        const timer = setTimeout(() => {
-            setDisplayPath(currentPath);
-            setIsVisible(visiblePages.length > 1);
-        }, constants_1.STACK_TRANSITION_MS);
-        return () => clearTimeout(timer);
-    }, [currentPath, visiblePages]);
-    return ((0, jsx_runtime_1.jsxs)(StyledHeader, { children: [isVisible && (0, jsx_runtime_1.jsx)(back_router_1.default, {}), (0, jsx_runtime_1.jsx)(StyledTitle, { children: displayPath })] }));
-};
-/**
- styles
- */
-const StyledHeader = styled_1.default.header `
-  width: 100%;
-  height: 64px;
-  background-color: white;
-  border-bottom: 1px solid #e5e7eb;
-  display: flex;
-  align-items: center;
-  padding: 0 1rem;
-`;
-const StyledTitle = styled_1.default.h1 `
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #111827;
-`;
-exports.default = Header;

package/dist/stack-router/stack-router-provider.d.ts

@@ -1,27 +0,0 @@
-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 StackRouterProvider: ({ maxWidth, Activities, initialActivity, enableDevTools, }: StackRouterProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export default StackRouterProvider;
-export { StackRouterProvider };
-//# sourceMappingURL=stack-router-provider.d.ts.map

package/dist/stack-router/stack-router-provider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"stack-router-provider.d.ts","sourceRoot":"","sources":["../../src/stack-router/stack-router-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAMvF,OAAO,EAEL,YAAY,EAGZ,wBAAwB,EAEzB,MAAM,SAAS,CAAC;AAEjB,UAAU,uBAAuB;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,YAAY,CAAC;IAC3B,UAAU,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,EAAE,CAAC;IACzD,eAAe,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,CAAC;IAC5D,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC5C,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,EAAE,CAAC;CAC5D;AAID,eAAO,MAAM,cAAc,+BAM1B,CAAC;AAEF,QAAA,MAAM,mBAAmB,GAAI,4DAK1B,wBAAwB,qDAiI1B,CAAC;AAEF,eAAe,mBAAmB,CAAC;AACnC,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

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

@@ -1,227 +0,0 @@
-"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/type.d.ts

@@ -1,37 +0,0 @@
-export interface StackRouterProviderProps {
-    maxWidth?: string;
-    isShowHeader?: boolean;
-    Activities?: {
-        path: string;
-        element: React.ReactNode;
-    }[];
-    initialActivity: {
-        path: string;
-        element: React.ReactNode;
-    };
-    /** 개발 시 스택 로드맵 오버레이 (기본: NODE_ENV === "development") */
-    enableDevTools?: boolean;
-}
-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;
-//# sourceMappingURL=type.d.ts.map

package/dist/type.d.ts.map

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

@@ -1,14 +0,0 @@
-"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 = {}));