pjdev2d-cli 1.1.3 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pjdev2d-cli",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "type": "module",
   "description": "CLI to install reusable React components like shadcn/ui",
   "main": "bin/cli.js",
@@ -30,6 +30,7 @@
     "fs-extra": "^11.3.5",
     "inquirer": "^13.4.3",
     "react": "^19.2.6",
+    "react-router-dom": "^7.16.0",
     "tailwind-merge": "^3.6.0"
   }
 }

package/registry.json

@@ -8,5 +8,10 @@
     "name": "Tanstack Query",
     "category": "tanstack-query",
     "files": ["templates/tanstack-query"]
+  },
+  "react-router-template": {
+    "name": "React Router",
+    "category": "react-router",
+    "files": ["templates/react-router"]
   }
 }

package/templates/react-router/hook/useRouterSearch.ts

@@ -0,0 +1,131 @@
+import { useCallback, useMemo, useRef } from "react";
+import { useSearchParams } from "react-router-dom";
+
+export function useRouterSearch<T extends Record<string, any>>({
+  defaultParams,
+}: {
+  defaultParams: T;
+}) {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const defaultRef = useRef(defaultParams);
+  defaultRef.current = defaultParams;
+
+  const search = useMemo(() => {
+    const result = { ...defaultRef.current };
+    const keys = Object.keys(defaultRef.current);
+
+    for (const key of keys) {
+      const fallback = defaultRef.current[key];
+      if (Array.isArray(fallback)) {
+        const val = searchParams.getAll(key);
+        if (val.length > 0) {
+          result[key as keyof T] = parseValue(val, fallback) as any;
+        }
+      } else {
+        const val = searchParams.get(key);
+        if (val !== null) {
+          result[key as keyof T] = parseValue(val, fallback) as any;
+        }
+      }
+    }
+    return result;
+  }, [searchParams]);
+
+  const setSearch = useCallback(
+    (
+      updates: Partial<Record<keyof T, any>>,
+      options?: { resetPage?: boolean; replace?: boolean }
+    ) => {
+      const next = new URLSearchParams(searchParams);
+      const keys = Object.keys(defaultRef.current);
+
+      for (const key of keys) {
+        const value = updates[key as keyof T];
+        if (value !== undefined) {
+          if (value === null || areEqual(value, defaultRef.current[key])) {
+            next.delete(key);
+          } else if (Array.isArray(value)) {
+            next.delete(key);
+            value.forEach((val) => {
+              if (val !== undefined && val !== null && val !== "") {
+                next.append(key, String(val));
+              }
+            });
+          } else {
+            next.set(key, String(value));
+          }
+        }
+      }
+      /**
+       * Reset pagination
+       * when filters/search changes
+       */
+      if (options?.resetPage && "page" in defaultRef.current) {
+        next.delete("page");
+      }
+
+      setSearchParams(next, {
+        replace: options?.replace,
+      });
+    },
+    [searchParams, setSearchParams]
+  );
+
+  return { search, setSearch };
+}
+
+function areEqual(a: any, b: any) {
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) return false;
+    const sortedA = [...a].sort();
+    const sortedB = [...b].sort();
+    return sortedA.every((val, index) => val === sortedB[index]);
+  }
+  return a === b;
+}
+
+function parseValue(value: string | string[], fallback: any): any {
+  if (Array.isArray(fallback)) {
+    const fallbackVal = fallback[0];
+    const valArray = Array.isArray(value) ? value : [value];
+    return valArray.map((item) => parseSingleValue(item, fallbackVal));
+  }
+  const singleVal = Array.isArray(value) ? value[0] : value;
+  return parseSingleValue(singleVal, fallback);
+}
+
+function parseSingleValue(value: string, fallback: any) {
+  if (typeof fallback === "number") {
+    const parsed = Number(value);
+    return Number.isNaN(parsed) ? fallback : parsed;
+  }
+
+  /**
+   * Boolean parsing
+   */
+  if (typeof fallback === "boolean") {
+    return value === "true";
+  }
+
+  /**
+   * String fallback
+   */
+  return value;
+}
+
+/*
+# NOTE: Array parameter usage example
+
+1. Define the default parameter as an array:
+   export const DefaultSearch = {
+     color: [] as string[],
+   };
+
+2. Set values (e.g., in a component):
+   setSearch({ color: ["red", "blue"] });
+   // Resulting URL query: ?color=red&color=blue
+
+3. Read values (e.g., in a component):
+   const colors = search.color; // Returns ["red", "blue"]
+*/

package/templates/react-router/router/guards/private.route.tsx

@@ -0,0 +1,21 @@
+import { Outlet } from "react-router-dom";
+
+export function PrivateRoute() {
+  return <Outlet />;
+}
+
+/* 
+
+# NOTE : use this when you want to redirect user to login page if he is already logged out
+
+import { Navigate, Outlet } from "react-router-dom";
+
+export default function PrivateRoute() {
+  const token = getLocalAuthToken();
+  if (!token) {
+    return <Navigate to={"/"} replace />;
+  }
+  return <Outlet />;
+}
+
+*/

package/templates/react-router/router/guards/public.route.tsx

@@ -0,0 +1,21 @@
+import { Outlet } from "react-router-dom";
+
+export function PublicRoute() {
+  return <Outlet />;
+}
+
+/* 
+
+# NOTE : use this when you want to redirect user to main page if he is already logged in
+
+import { Navigate, Outlet } from "react-router-dom";
+
+export default function PublicRoute() {
+  const token = getLocalAuthToken();
+  if (token) {
+    return <Navigate to={PATH.desired_path_name} replace />;
+  }
+  return <Outlet />;
+}
+
+*/

package/templates/react-router/router/index.ts

@@ -0,0 +1,144 @@
+import { createBrowserRouter, RouteObject } from "react-router-dom";
+import { PATH } from "./path";
+import { PublicRoute } from "./guards/public.route";
+import { PrivateRoute } from "./guards/private.route";
+import { AuthLayout } from "./layouts/auth.layout";
+import { ErrorLayout } from "./layouts/error.layout";
+import { MainLayout } from "./layouts/main.layout";
+
+const PublicRoutes: RouteObject[] = [
+  {
+    path: PATH.page_root(),
+    Component: PublicRoute,
+    children: [
+      {
+        Component: AuthLayout,
+        ErrorBoundary: ErrorLayout,
+        children: [
+          {
+            path: PATH.page_auth(),
+            lazy: async () => {
+              const module = await import("../routes/page-auth");
+              return { Component: module.default };
+            },
+          },
+        ],
+      },
+      {
+        path: PATH.not_found(),
+        lazy: async () => {
+          const module = await import("../routes/not-found");
+          return { Component: module.default };
+        },
+      },
+    ],
+  },
+];
+
+const PrivateRoutes: RouteObject[] = [
+  {
+    Component: PrivateRoute,
+    children: [
+      {
+        Component: MainLayout,
+        ErrorBoundary: ErrorLayout,
+        children: [
+          {
+            path: PATH.page_root(),
+            ErrorBoundary: ErrorLayout,
+            lazy: async () => {
+              const module = await import("../routes/page-root");
+              return { Component: module.default };
+            },
+          },
+          {
+            path: PATH.page_one(),
+            ErrorBoundary: ErrorLayout,
+            lazy: async () => {
+              const module = await import("../routes/page-one");
+              return { Component: module.default };
+            },
+          },
+          {
+            path: PATH.page_two(),
+            ErrorBoundary: ErrorLayout,
+            lazy: async () => {
+              const module = await import("../routes/page-two");
+              return { Component: module.default };
+            },
+          },
+        ],
+      },
+    ],
+  },
+];
+
+export const router = createBrowserRouter([...PublicRoutes, ...PrivateRoutes]);
+
+/* 
+
+currently i am using new way of using react-router version like
+Component: PrivateLayout,
+lazy: async () => ...
+
+the old way is 
+
+{
+  path: "/",
+  element: (
+    <PublicRoute>
+      <AuthLayout />
+    </PublicRoute>
+  ),
+  children: [
+    {
+      path: PATHS.LOGIN,
+      element: <Login />,
+    },
+  ],
+}
+
+
+
+| Feature              | `errorElement`                    | `ErrorBoundary`            |
+| -------------------- | --------------------------------- | -------------------------- |
+| What you pass        | React Element                     | Component Function         |
+| Syntax               | `errorElement: <ErrorPage />`     | `ErrorBoundary: ErrorPage` |
+| Requires JSX         | Yes                               | No                         |
+| Works in `.ts` file  | No (unless `React.createElement`) | Yes                        |
+| React Router version | v6.4+                             | Newer preferred API        |
+
+
+---------------------------------------------------------------------------
+
+# ANCHOR : 2 ways to show the error boundry page data 
+
+
+# NOTE : WAY-1 inside layout i.e inplace of outlet
+ {
+        path: PATH.page_two(),
+        ErrorBoundary: ErrorLayout,
+        lazy: async () => {
+          const module = await import("../routes/page-two");
+          return { Component: module.default };
+        },
+      },
+
+---------------------------------------------------------------------------
+
+      # NOTE : WAY-2 replace entire layout with error boundary
+       {
+    Component: AuthLayout,
+    ErrorBoundary: ErrorLayout,
+    children: [
+      {
+        path: PATH.page_auth(),
+        lazy: async () => {
+          const module = await import("../routes/page-auth");
+          return { Component: module.default };
+        },
+      },
+    ],
+  },
+
+ */

package/templates/react-router/router/layouts/auth.layout.tsx

@@ -0,0 +1,5 @@
+import { Outlet } from "react-router-dom";
+
+export function AuthLayout() {
+  return <Outlet />;
+}

package/templates/react-router/router/layouts/error.layout.tsx

@@ -0,0 +1,6 @@
+import { Outlet, useRouteError } from "react-router-dom";
+
+export function ErrorLayout() {
+  const error = useRouteError();
+  return <div>Error Page</div>;
+}

package/templates/react-router/router/layouts/main.layout.tsx

@@ -0,0 +1,5 @@
+import { Outlet } from "react-router-dom";
+
+export function MainLayout() {
+  return <Outlet />;
+}

package/templates/react-router/router/path.ts

@@ -0,0 +1,7 @@
+export const PATH = {
+  page_root: () => "/" as const,
+  page_one: () => "/page_one" as const,
+  page_two: () => "/page_two" as const,
+  page_auth: () => "/page_auth" as const,
+  not_found: () => "*" as const,
+};

package/templates/react-router/routes/not-found/index.tsx

@@ -0,0 +1,3 @@
+export default function NotFound() {
+  return <div>Not Found</div>;
+}

package/templates/react-router/routes/page-auth/index.tsx

@@ -0,0 +1,3 @@
+export default function PageAuth() {
+  return <div>Page Auth</div>;
+}

package/templates/react-router/routes/page-one/index.tsx

@@ -0,0 +1,3 @@
+export default function PageOne() {
+  return <div>Page One</div>;
+}

package/templates/react-router/routes/page-one/search.page-one.ts

@@ -0,0 +1,5 @@
+export const PageOneDefaultSearchParam = {
+  param_one: "",
+  param_two: "",
+  param_three: "",
+};

package/templates/react-router/routes/page-root/index.tsx

@@ -0,0 +1,3 @@
+export default function PageRoot() {
+  return <div>Page Root</div>;
+}

package/templates/react-router/routes/page-two/index.tsx

@@ -0,0 +1,3 @@
+export default function PageTwo() {
+  return <div>Page Two</div>;
+}

package/templates/react-router/routes/page-two/search.page-two.ts

@@ -0,0 +1,5 @@
+export const PageTwoDefaultSearchParam = {
+  param_one: "",
+  param_two: "",
+  param_three: "",
+};