updates

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kacker/ui",
-    "version": "1.1.1",
+    "version": "1.2.0",
     "main": "./dist/cjs",
     "module": "./dist/esm",
     "types": "./dist/cjs/index.d.ts",

src/css/page.css

@@ -9,4 +9,5 @@
     opacity: 1;
     visibility: visible;
     transform: translateX(0);
+    transition: 0.1s ease-in-out;
 }

src/index.css

@@ -3,7 +3,6 @@
 @tailwind utilities;
 
 body {
-    font-family: var(--kui-font);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     -webkit-tap-highlight-color: transparent;
 }

src/index.ts

@@ -1,7 +1,6 @@
 import './index.css';
 import './css/fallback.css'
 import './css/page.css'
-import './assets/fonts/manrope-variable.ttf'
 import Input from './interactive/Input';
 import ThemeProvider from './providers/ThemeProvider';
 import { InputProps } from './interactive/Input';
@@ -37,6 +36,10 @@ import Drawer from './layout/Drawer';
 import { DrawerProps, WarningDrawer, WarningDrawerProps } from './layout/Drawer';
 import Button from './interactive/buttons/Button';
 import { ButtonProps } from './interactive/buttons/Button';
+import { RawPage, RawPageProps } from './layout/Page';
+import Router from './providers/RouterProvider'
+import { RouterProps } from './providers/RouterProvider';
+import * as raviger from 'raviger';
 export {
     Input,
     ThemeProvider,
@@ -56,7 +59,10 @@ export {
     Menu,
     Drawer,
     Button,
-    WarningDrawer
+    WarningDrawer,
+    RawPage,
+    Router,
+    raviger
 };
 export type {
     InputProps,
@@ -78,5 +84,7 @@ export type {
     MenuOption,
     DrawerProps,
     ButtonProps,
-    WarningDrawerProps
+    WarningDrawerProps,
+    RawPageProps,
+    RouterProps
 };

src/layout/Activity.tsx

@@ -1,21 +1,36 @@
 import { twMerge } from "tailwind-merge";
+import { RouteTree } from "../providers/RouterProvider";
+import { useEffect } from "react";
 
 export type ActivityProps = {
     activityIndex: number;
     className?: string;
-    children: React.ReactNode;
+    routeTree: RouteTree[];
+    setRouteTree: React.Dispatch<React.SetStateAction<RouteTree[]>>;
 }
 
 export default function Activity(props: ActivityProps) {
 
-    const { activityIndex, className, children } = props;
+    const { activityIndex, className, routeTree, setRouteTree } = props;
+
+    useEffect(() => {
+        setRouteTree((prev) => [
+            ...prev.slice(0, activityIndex),
+            {
+                ...prev[activityIndex],
+                status: "ready",
+            },
+            ...prev.slice(activityIndex + 1),
+        ]);
+    }, []);
 
     return (
         <div
             style={{ zIndex: 100 + activityIndex }}
             className={twMerge("w-screen-handler-screen h-screen w-screen fixed inset-y-0", className)}
+            data-route-index={activityIndex}
         >
-            {children}
+            {routeTree[activityIndex].node}
         </div>
     )
 }

src/layout/Page.tsx

@@ -1,6 +1,11 @@
 import { twMerge } from "tailwind-merge";
 import PageHeader, { PageHeaderProps } from "./PrimaryPageHeader";
 
+export type RawPageProps = {
+    children: React.ReactNode;
+    className?: string;
+}
+
 export type PageProps = {
     children: React.ReactNode;
     type?: "sticky" | "fixed";
@@ -37,3 +42,13 @@ export default function Page(props: PageProps) {
         </div>
     );
 }
+
+export function RawPage(props: RawPageProps) {
+
+    const { className, children } = props;
+    return (
+        <div className={twMerge("h-screen bg-primary text-primaryFont pt-[var(--status-bar-height,0)] pb-[var(--safe-area-inset-bottom)]", className)}>
+            {children}
+        </div>
+    )
+}

src/providers/RouterProvider.tsx

@@ -0,0 +1,130 @@
+import { Routes, usePath, useRoutes } from "raviger";
+import AppContainer, { AppContainerProps } from "../layout/AppContainer";
+import { RawPage } from "../layout/Page";
+import React, { useEffect, useState } from "react";
+import Activity from "../layout/Activity";
+
+export type RouterProps = {
+    routes: Routes<string>
+    notFound?: React.ReactNode,
+    routeTree: RouteTree[],
+    setRouteTree: React.Dispatch<React.SetStateAction<RouteTree[]>>,
+} & Omit<AppContainerProps, "currentPath" | "children" | "routeResult">
+
+export type RouteTree = {
+    node: React.ReactNode;
+    path: string;
+    status?: "ready" | "destroying";
+};
+
+export default function Router(props: RouterProps) {
+    const path = usePath();
+    const { routes, exclusivePaths, baseRoutes, notFound, setRouteTree, routeTree } = props;
+    const routeResult = useRoutes(routes) || notFound || <RawPage>Not Found</RawPage>;
+    const [direction, setDirection] = useState<"backward" | "forward" | null>(
+        null
+    );
+
+    const popstateListener = (e: PopStateEvent) => {
+        if (e.state === undefined) {
+            setDirection("backward");
+        } else if (e.state === null) {
+            setDirection("forward");
+        }
+    };
+
+    useEffect(() => {
+        window.addEventListener("popstate", popstateListener);
+        if (
+            !baseRoutes.map(route => route.href).includes(path as string) &&
+            !exclusivePaths.includes(path as `/${string}`)
+        ) {
+            setRouteTree([
+                ...routeTree,
+                {
+                    node: routeResult,
+                    path: path as string,
+                },
+            ]);
+        }
+        return () => {
+            window.removeEventListener("popstate", popstateListener);
+        };
+    }, []);
+
+    useEffect(() => {
+        if (!direction) return;
+        const newPath = path;
+        const lastPath = routeTree[routeTree.length - 1]?.path;
+        if (
+            direction === "backward" &&
+            !baseRoutes.map(route => route.href).includes(lastPath) &&
+            !exclusivePaths.includes(lastPath as `/${string}`)
+        ) {
+            setRouteTree([
+                ...routeTree.slice(0, -1),
+                {
+                    ...routeTree[routeTree.length - 1],
+                    status: "destroying",
+                },
+            ]);
+        } else if (
+            direction === "forward" &&
+            !baseRoutes.map(route => route.href).includes(newPath as string) &&
+            !exclusivePaths.includes(newPath as `/${string}`)
+        ) {
+            setRouteTree([
+                ...routeTree,
+                {
+                    node: routeResult,
+                    path: path as string,
+                },
+            ]);
+        }
+        setDirection(null);
+    }, [direction]);
+
+    useEffect(() => {
+        routeTree.forEach((route, i) => {
+            if (route.status === "destroying") {
+                const el = document.querySelector(`[data-route-index="${i}"]`);
+                if (el) {
+                    el.classList.remove(
+                        "__kui__screen__handler__screen__ready"
+                    );
+                }
+                setTimeout(() => {
+                    setRouteTree((prev) =>
+                        prev.filter((_, index) => index !== i)
+                    );
+                }, 150);
+            } else if (route.status === "ready") {
+                const el = document.querySelector(`[data-route-index="${i}"]`);
+                if (el) {
+                    el.classList.add("__kui__screen__handler__screen__ready");
+                }
+            }
+        });
+        console.log(routeTree);
+    }, [routeTree]);
+
+    return (
+        <>
+            <AppContainer
+                exclusivePaths={exclusivePaths}
+                routeResult={routeResult}
+                baseRoutes={baseRoutes}
+                currentPath={path || ("/" as any)}
+            >
+                {routeTree.map((_, i) => (
+                    <Activity
+                        key={i}
+                        activityIndex={i}
+                        routeTree={routeTree}
+                        setRouteTree={setRouteTree}
+                    />
+                ))}
+            </AppContainer>
+        </>
+    );
+}

src/providers/ThemeProvider.tsx

@@ -1,7 +1,6 @@
 import { useEffect } from "react";
 import { Themes, setTheme, useThemeDetector } from "../utils/themes";
 import { Theme } from "../types/themes";
-import Manrope from '../assets/fonts/manrope-variable.ttf'
 
 export type ThemeProviderProps = {
     children: React.ReactNode;
@@ -39,8 +38,6 @@ export default function ThemeProvider(props: ThemeProviderProps) {
 
     useEffect(() => {
 
-        document.documentElement.style.setProperty(`--kui-font`, `url(${Manrope})`);
-
         if (accent)
             Object.keys(accent).forEach((key) => {
                 document.documentElement.style.setProperty(`--kui-accent${key}`, accent[key]);

src/utils/themes.ts

@@ -94,4 +94,4 @@ export const useThemeDetector = () => {
         return () => darkThemeMq.removeListener(mqListener);
     }, []);
     return isDarkTheme;
-};
+};

tailwind.config.js

@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+    important: true,
     content: [
         "./index.html",
         "./src/**/*.{js,ts,jsx,tsx}",