@gohanfromgoku/ui-kit 0.0.4 → 0.1.0

package/dist/components/Button/index.js

@@ -9,7 +9,7 @@ const defaultProps = {
 };
 const Button = forwardRef((props, ref) => {
     const { children, className, onClick, disabled, type, ...rest } = { ...defaultProps, ...props };
-    return (_jsx("button", { ref: ref, className: className, onClick: (event) => {
+    return (_jsx("button", { ref: ref, className: className, disabled: disabled, type: type, onClick: (event) => {
             if (type === "button" || !type) {
                 event.preventDefault();
             }

package/dist/components/index.js

@@ -0,0 +1,5 @@
+export { default as Button } from "./Button";
+export { default as Image } from "./Image";
+export { default as Input } from "./Input";
+export { default as Text } from "./Text";
+export { default as Tooltip } from "./Tooltip";

package/dist/helpers/index.js

@@ -0,0 +1,3 @@
+export { default as checkProps } from "./checkProps";
+export { default as objectPath } from "./objectPath";
+export { default as toast } from "./toast";

package/dist/hooks/index.js

@@ -0,0 +1,3 @@
+export { default as useHandleClickOutside } from "./useHandleClickOutside";
+export { queryParams, setQueryParams } from "./useQueryParams";
+export { default as useWindowSize } from "./useWindowSize";

package/dist/navigation/Outlet.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { activeRoute, location } from "./navigation.store";
+import { Page404 } from "./Page404";
+import { useEffect } from "preact/compat";
+import isRouteMatching from "./isRouteMatching";
+import { computed } from "@preact/signals";
+import { extractParamsFromURL } from "./extractParamsFromURL";
+import { extractQueryParamsFromURL } from "./extractQueryParamsFromURL";
+const Outlet = ({ routes, page404: Page404Page = Page404 }) => {
+    const component = computed(() => activeRoute.value?.component ?? Page404Page);
+    useEffect(() => {
+        const updateLocation = () => {
+            const active = routes.find(r => isRouteMatching(r.pathname)) || { pathname: window.location.href, component: Page404Page };
+            const { pathname: currentpath, href } = window.location;
+            const params = extractParamsFromURL(currentpath, active.pathname);
+            const queryParams = extractQueryParamsFromURL(href);
+            activeRoute.setState({ value: active });
+            location.setState({ value: { params, queryParams } });
+        };
+        updateLocation();
+        window.addEventListener("popstate", updateLocation);
+        return () => window.removeEventListener("popstate", updateLocation);
+    }, [routes]);
+    return _jsx(component.value, {});
+};
+export default Outlet;

package/dist/navigation/Page404.js

@@ -0,0 +1,2 @@
+import { Fragment as _Fragment, jsx as _jsx } from "preact/jsx-runtime";
+export const Page404 = () => _jsx(_Fragment, { children: "Page Not Found" });

package/dist/navigation/createRoutes.js

@@ -0,0 +1,6 @@
+import { globalRoutes } from "./navigation.store";
+const createRoutes = (routes) => {
+    globalRoutes.setState({ value: routes });
+    return routes;
+};
+export default createRoutes;

package/dist/navigation/extractParamsFromURL.js

@@ -0,0 +1,24 @@
+/**
+ * @internal
+ */
+export const extractParamsFromURL = (url, compareWith) => {
+    const params = {};
+    const href = url.startsWith(window.location.origin) ? url.split(window.location.origin)[1] : url;
+    const parts = href.split("?");
+    if (parts.length > 2) {
+        throw "Invalid URL";
+    }
+    const pathname = parts[0];
+    const pathnameSegments = pathname.split("/");
+    const routeSegments = compareWith.split("/");
+    for (let index = 0; index < routeSegments.length; index++) {
+        if (routeSegments[index].startsWith(":")) {
+            const paramParts = routeSegments[index].split(":");
+            if (paramParts.length > 2) {
+                throw "Invalid URL";
+            }
+            params[paramParts[1]] = pathnameSegments[index];
+        }
+    }
+    return params;
+};

package/dist/navigation/extractQueryParamsFromURL.js

@@ -0,0 +1,24 @@
+/**
+ * @internal
+ */
+export const extractQueryParamsFromURL = (url) => {
+    const query = {};
+    const href = url.startsWith(window.location.origin) ? url.split(window.location.origin)[1] : url;
+    const parts = href.split("?");
+    if (parts.length > 2) {
+        throw "Invalid URL";
+    }
+    const search = parts[1];
+    if (search && search.length > 0) {
+        const searchSegments = search.split("&");
+        for (const ss of searchSegments) {
+            const ssparts = ss.split("=");
+            if (ssparts.length > 2) {
+                throw "Invalid URL";
+            }
+            const [key, value] = ssparts;
+            query[decodeURIComponent(key)] = decodeURIComponent(value ?? "");
+        }
+    }
+    return query;
+};

package/dist/navigation/index.js

@@ -0,0 +1,4 @@
+export { default as Outlet } from "./Outlet";
+export { default as createRoutes } from "./createRoutes";
+export { default as navigate } from "./navigate";
+export { default as useLocationDetails } from "./useLocationDetails";

package/dist/navigation/isRouteMatching.js

@@ -0,0 +1,15 @@
+/**
+ * @internal
+ */
+const isRouteMatching = (routePath) => {
+    const current = window.location.pathname;
+    if (routePath === "/") {
+        return current === "/";
+    }
+    const routeParts = routePath.split("/").filter(Boolean);
+    const currentParts = current.split("/").filter(Boolean);
+    if (routeParts.length !== currentParts.length)
+        return false;
+    return routeParts.every((part, i) => part.startsWith(":") || part === currentParts[i]);
+};
+export default isRouteMatching;

package/dist/navigation/navigate.js

@@ -0,0 +1,41 @@
+import { extractQueryParamsFromURL } from "./extractQueryParamsFromURL";
+const createSearch = (queryParams) => {
+    const keys = Object.keys(queryParams);
+    if (keys.length > 0) {
+        let search = "?";
+        for (let index = 0; index < keys.length; index++) {
+            const key = keys[index];
+            search = `${search}${key}=${queryParams[key]}`;
+            if (index !== keys.length - 1) {
+                search = search + "&";
+            }
+        }
+        return search;
+    }
+    return "";
+};
+const generateURLFromParams = (pathname, queryParams) => {
+    const pathnameQueryParams = extractQueryParamsFromURL(pathname);
+    const allQueryParams = { ...pathnameQueryParams, ...queryParams };
+    const url = pathname.startsWith("/") ? `${window.location.origin}${pathname.split("?")[0]}` : `${window.location.origin}/${pathname.split("?")[0]}`;
+    const path = `${url}${createSearch(allQueryParams)}`;
+    return path;
+};
+const navigate = (path, { queryParams = {}, replace = false } = {}) => {
+    if (typeof path === "number") {
+        window.history.go(path);
+        return;
+    }
+    const pathname = generateURLFromParams(path, queryParams);
+    if (window.location.href === pathname) {
+        return;
+    }
+    if (replace) {
+        window.history.replaceState({}, "", pathname);
+    }
+    else {
+        window.history.pushState({}, "", pathname);
+    }
+    window.dispatchEvent(new Event("popstate"));
+};
+export default navigate;

package/dist/navigation/navigation.store.js

@@ -0,0 +1,4 @@
+import createStore from "../storage/index";
+export const location = createStore("location", { value: { params: {}, queryParams: {} } });
+export const activeRoute = createStore("activeRoute", { value: {} });
+export const globalRoutes = createStore("globalRoutes", { value: [] });

package/dist/navigation/useLocationDetails.js

@@ -0,0 +1,10 @@
+import { computed } from "@preact/signals";
+import { globalRoutes, location } from "./navigation.store";
+const useLocationDetails = () => {
+    if (globalRoutes.value.length === 0) {
+        throw "useLocationDetails cannot be used without initializing routes, use createRoutes initialize routes";
+    }
+    const values = computed(() => location.value);
+    return values.value;
+};
+export default useLocationDetails;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gohanfromgoku/ui-kit",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "description": "ui-kit is a TypeScript based UI component library designed for building modern web applications with ease and efficiency.",
   "sideEffects": false,
   "scripts": {
@@ -25,11 +25,13 @@
   },
   "author": "GohanfromGoku",
   "license": "MIT",
-  "dependencies": {
+  "peerDependencies": {
     "@preact/signals": "^2.5.1",
     "preact": "^10.28.0"
   },
   "devDependencies": {
+    "@preact/signals": "^2.5.1",
+    "preact": "^10.28.0",
     "tsc-alias": "^1.8.16",
     "typescript": "^5.9.3"
   },
@@ -48,49 +50,21 @@
       "import": "./dist/api/index.js",
       "types": "./types/api/index.d.ts"
     },
-    "./Button": {
-      "import": "./dist/components/Button/index.js",
-      "types": "./types/components/Button/index.d.ts"
-    },
-    "./Image": {
-      "import": "./dist/components/Image/index.js",
-      "types": "./types/components/Image/index.d.ts"
-    },
-    "./Input": {
-      "import": "./dist/components/Input/index.js",
-      "types": "./types/components/Input/index.d.ts"
-    },
-    "./Text": {
-      "import": "./dist/components/Text/index.js",
-      "types": "./types/components/Text/index.d.ts"
-    },
-    "./Tooltip": {
-      "import": "./dist/components/Tooltip/index.js",
-      "types": "./types/components/Tooltip/index.d.ts"
-    },
-    "./checkProps": {
-      "import": "./dist/helpers/checkProps.js",
-      "types": "./types/helpers/checkProps.d.ts"
-    },
-    "./objectPath": {
-      "import": "./dist/helpers/objectPath.js",
-      "types": "./types/helpers/objectPath.d.ts"
-    },
-    "./toast": {
-      "import": "./dist/helpers/toast.js",
-      "types": "./types/helpers/toast.d.ts"
+    "./components": {
+      "import": "./dist/components/index.js",
+      "types": "./types/components/index.d.ts"
     },
-    "./useHandleClickOutside": {
-      "import": "./dist/hooks/useHandleClickOutside.js",
-      "types": "./types/hooks/useHandleClickOutside.d.ts"
+    "./helpers": {
+      "import": "./dist/helpers/index.js",
+      "types": "./types/helpers/index.d.ts"
     },
-    "./useQueryParams": {
-      "import": "./dist/hooks/useQueryParams.js",
-      "types": "./types/hooks/useQueryParams.d.ts"
+    "./hooks": {
+      "import": "./dist/hooks/index.js",
+      "types": "./types/hooks/index.d.ts"
     },
-    "./useWindowSize": {
-      "import": "./dist/hooks/useWindowSize.js",
-      "types": "./types/hooks/useWindowSize.d.ts"
+    "./navigation": {
+      "import": "./dist/navigation/index.js",
+      "types": "./types/navigation/index.d.ts"
     },
     "./storage": {
       "import": "./dist/storage/index.js",

package/types/components/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Button } from "./Button";
+export { default as Image } from "./Image";
+export { default as Input } from "./Input";
+export { default as Text } from "./Text";
+export { default as Tooltip } from "./Tooltip";

package/types/helpers/index.d.ts

@@ -0,0 +1,3 @@
+export { default as checkProps } from "./checkProps";
+export { default as objectPath } from "./objectPath";
+export { default as toast } from "./toast";

package/types/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { default as useHandleClickOutside } from "./useHandleClickOutside";
+export { queryParams, setQueryParams } from "./useQueryParams";
+export { default as useWindowSize } from "./useWindowSize";

package/types/navigation/Outlet.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentType } from "preact";
+import type { Route } from "./createRoutes";
+declare const Outlet: ({ routes, page404: Page404Page }: {
+    routes: Route[];
+    page404?: ComponentType;
+}) => import("preact").JSX.Element;
+export default Outlet;

package/types/navigation/Page404.d.ts

@@ -0,0 +1 @@
+export declare const Page404: () => import("preact").JSX.Element;

package/types/navigation/createRoutes.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentType } from "preact/compat";
+export interface Route {
+    pathname: string;
+    component: ComponentType;
+    index?: true | undefined | null;
+}
+declare const createRoutes: (routes: Route[]) => Route[];
+export default createRoutes;

package/types/navigation/extractParamsFromURL.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @internal
+ */
+export declare const extractParamsFromURL: (url: string, compareWith: string) => Record<string, any>;

package/types/navigation/extractQueryParamsFromURL.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @internal
+ */
+export declare const extractQueryParamsFromURL: (url: string) => Record<string, any>;

package/types/navigation/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Outlet } from "./Outlet";
+export { default as createRoutes } from "./createRoutes";
+export { default as navigate } from "./navigate";
+export { default as useLocationDetails } from "./useLocationDetails";

package/types/navigation/isRouteMatching.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @internal
+ */
+declare const isRouteMatching: (routePath: string) => boolean;
+export default isRouteMatching;

package/types/navigation/navigate.d.ts

@@ -0,0 +1,6 @@
+export interface NavigationProps {
+    queryParams?: Record<string, unknown>;
+    replace?: boolean;
+}
+declare const navigate: (path: string | number, { queryParams, replace }?: NavigationProps) => void;
+export default navigate;

package/types/navigation/navigation.store.d.ts

@@ -0,0 +1,46 @@
+import type { Route } from "./createRoutes";
+export declare const location: {
+    value: {
+        params: {};
+        queryParams: {};
+    };
+} & {
+    setState: (values: Partial<{
+        value: {
+            params: {};
+            queryParams: {};
+        };
+    }>) => void;
+    resetState: () => void;
+} & {
+    __signal: import("@preact/signals").Signal<{
+        value: {
+            params: {};
+            queryParams: {};
+        };
+    }>;
+};
+export declare const activeRoute: {
+    value: Route;
+} & {
+    setState: (values: Partial<{
+        value: Route;
+    }>) => void;
+    resetState: () => void;
+} & {
+    __signal: import("@preact/signals").Signal<{
+        value: Route;
+    }>;
+};
+export declare const globalRoutes: {
+    value: Route[];
+} & {
+    setState: (values: Partial<{
+        value: Route[];
+    }>) => void;
+    resetState: () => void;
+} & {
+    __signal: import("@preact/signals").Signal<{
+        value: Route[];
+    }>;
+};

package/types/navigation/useLocationDetails.d.ts

@@ -0,0 +1,5 @@
+declare const useLocationDetails: () => {
+    params: {};
+    queryParams: {};
+};
+export default useLocationDetails;