Feat/os project boilerpalte

docs/TANSTACK-QUERY.md

@@ -30,3 +30,10 @@
 
 run `p/mpm run page users` to scafold a page with these best practices
 
+
+## handling forms
+
+We'll use [react-hook-form](https://react-hook-form.com/) to manage our forms and [zod](https://zod.dev/) to validate our data.
+[quick tutorial on react hhok form + zod](https://www.youtube.com/watch?v=cc_xmawJ8Kg)
+
+then use the useMutation hook

package.json

@@ -18,7 +18,7 @@
     "test-ct": "playwright test -c playwright-ct.config.ts"
   },
   "dependencies": {
-    "@hookform/resolvers": "^3.9.0",
+    "@hookform/resolvers": "^3.9.1",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-aspect-ratio": "^1.1.0",
@@ -70,6 +70,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
+    "@faker-js/faker": "^9.3.0",
     "@playwright/experimental-ct-react": "^1.49.0",
     "@playwright/test": "^1.49.0",
     "@tanstack/eslint-plugin-query": "^5.61.6",

src/components/navigation/routes.tsx

@@ -25,7 +25,7 @@ export const dashboard_routes = [
   },
   {
     name: "OS Projects",
-    href: "/dashboard/os-projects",
+    href: "/dashboard/osprojects",
     icon: <Layers />,
   },
   {

src/components/pagination/ReactresponsivePagination.tsx

@@ -11,6 +11,7 @@ export function ListPagination({ total_pages }: ListingsPaginationProps) {
     from: "__root__",
   });
   const navigate = useNavigate({
+    // @ts-expect-error : search param type is possibly undefined but it will exist when we need it
     from: location.pathname,
   });
 

src/data/currency.ts

@@ -0,0 +1,93 @@
+export const dummyCurremcies = [
+    {
+        code: "USD",
+        name: "United States Dollar",
+        symbol: "$",
+    },
+    {
+        code: "EUR",
+        name: "Euro",
+        symbol: "€",
+    },
+    {
+        code: "GBP",
+        name: "British Pound Sterling",
+        symbol: "£",
+    },
+    {
+        code: "JPY",
+        name: "Japanese Yen",
+        symbol: "¥",
+    },
+    {
+        code: "CNY",
+        name: "Chinese Yuan",
+        symbol: "¥",
+    },
+    {
+        code: "INR",
+        name: "Indian Rupee",
+        symbol: "₹",
+    },
+    {
+        code: "RUB",
+        name: "Russian Ruble",
+        symbol: "₽",
+    },
+    {
+        code: "KRW",
+        name: "South Korean Won",
+        symbol: "₩",
+    },
+    {
+        code: "BRL",
+        name: "Brazilian Real",
+        symbol: "R$",
+    },
+    {
+        code: "MXN",
+        name: "Mexican Peso",
+        symbol: "$",
+    },
+    {
+        code: "CHF",
+        name: "Swiss Franc",
+        symbol: "CHF",
+    },
+    {
+        code: "AUD",
+        name: "Australian Dollar",
+        symbol: "$",
+    },
+    {
+        code: "CAD",
+        name: "Canadian Dollar",
+        symbol: "$",
+    },
+    {
+        code: "KES",
+        name: "Kenyan Shilling",
+        symbol: "KSh",
+    },
+    {
+        code: "TZS",
+        name: "Tanzanian Shilling",
+        symbol: "TSh",
+    },
+    {
+        code: "NGN",
+        name: "Nigerian Naira",
+        symbol: "₦",
+    },
+    {
+        code: "ZAR",
+        name: "South African Rand",
+        symbol: "R",
+    },
+    {
+        code: "ETB",
+        name: "Ethiopian Birr",
+        symbol: "ETB",
+    },
+];
+

src/hooks/use-page-searchquery.ts

@@ -3,33 +3,43 @@ import { useTransition, useState, useEffect } from "react";
 import { useDebouncedValue } from "./use-debouncer";
 import { ValidRoutes } from "@/lib/tanstack/router/router-types";
 
-  /**
-   * Use this hook to generate a debounced search query that can be used in a input search field.
-   * @param path the path of the route that the search query will be applied to
-   * @returns an object containing the debounced search query, a boolean indicating if the debouncer is running, the current keyword and a function to update the keyword
-   * Use this hook in a page component that declares a sq search param in the route 
-  */
+/**
+ * Use this hook to generate a debounced search query that can be used in a input search field.
+ * @param path the path of the route that the search query will be applied to
+ * @returns an object containing the debounced search query, a boolean indicating if the debouncer is running, the current keyword and a function to update the keyword
+ * Use this hook in a page component that declares a sq search param in the route
+ */
 export function usePageSearchQuery(path: ValidRoutes) {
   // @ts-expect-error : search parm below wwill exist when the compnent is usesd
-  const { sq, page } = useSearch({ from:`${path}/` });
-  const navigate = useNavigate({ from:path });
+  const { sq, page } = useSearch({ from: `${path}/` });
+  const navigate = useNavigate({ from: path });
   const [_, startTransition] = useTransition();
 
   const [keyword, setKeyword] = useState(sq ?? "");
   const { debouncedValue, isDebouncing } = useDebouncedValue(keyword, 2000);
+  // reset the page to 1 when the keyword changes
+  useEffect(() => {
+    startTransition(() => {
+      navigate({
+        search: {
+          page: 1,
+        },
+      });
+    });
+  }, [keyword,navigate]);
   useEffect(() => {
     if (sq !== debouncedValue) {
       startTransition(() => {
         navigate({
           search: {
-            page,
+            page: 1,
             sq: debouncedValue,
           },
         });
       });
 
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debouncedValue, navigate, page]);
   function updatePage(page: number) {
     startTransition(() => {
@@ -39,7 +49,14 @@ export function usePageSearchQuery(path: ValidRoutes) {
           sq: debouncedValue,
         },
       });
-    })
+    });
   }
-  return { debouncedValue, isDebouncing, keyword, setKeyword,page, updatePage };
+  return {
+    debouncedValue,
+    isDebouncing,
+    keyword,
+    setKeyword,
+    page,
+    updatePage,
+  };
 }

src/lib/react-oook-form/RHFInput.tsx

@@ -0,0 +1,62 @@
+import { getNestedProperty, PossibleNestedUnions } from "@/utils/object";
+import { Controller, FieldError, UseFormReturn } from "react-hook-form";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RHFErrorWrapper } from "./RHFWrappers";
+import { twMerge } from "tailwind-merge";
+type ExtractFormType<T> =
+  T extends UseFormReturn<infer U, any, undefined> ? U : never;
+
+interface RHFTextInputProps<T extends UseFormReturn<any, any, undefined>> {
+  fieldKey: PossibleNestedUnions<ExtractFormType<T>>;
+  form: T;
+  placeholder: string;
+  label?: string;
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+  containerClassName?: string;
+  labelClassName?: string;
+}
+
+export function RHFTextInput<T extends UseFormReturn<any, any, undefined>>({
+  form,
+  fieldKey,
+  label,
+  placeholder,
+  inputProps,
+  containerClassName,
+  labelClassName,
+}: RHFTextInputProps<T>) {
+  const { control, register } = form;
+  const fieldError = getNestedProperty<FieldError>(
+    form?.formState?.errors,
+    fieldKey,
+  );
+  return (
+    <div className={twMerge("flex flex-col gap-1 w-full", containerClassName)}>
+      {label && (
+        <Label className={twMerge("inline-flex gap-1", labelClassName)}>
+          {label}
+        </Label>
+      )}
+      <Controller
+        name={fieldKey}
+        control={control}
+        render={({ field }) => {
+          return (
+            <Input
+              {...inputProps}
+                {...field}
+              className={twMerge(
+                `w-full rounded border border-[#737776CC] bg-transparent ${fieldError?.message ? "border-4 border-error" : ""}`,
+                inputProps?.className,
+              )}
+              placeholder={placeholder}
+              {...register(fieldKey, { valueAsNumber: inputProps?.type === "number" })}
+            />
+          );
+        }}
+      />
+      <RHFErrorWrapper form={form} fieldKey={fieldKey} />
+    </div>
+  );
+}

src/lib/react-oook-form/RHFWrappers.tsx

@@ -0,0 +1,44 @@
+import { getNestedProperty, PossibleNestedUnions } from "@/utils/object";
+import { FieldError, UseFormReturn } from "react-hook-form";
+
+type ExtractFormType<T> =
+  T extends UseFormReturn<infer U, any, undefined> ? U : never;
+
+
+interface RHFErrorWrapperProps<T extends UseFormReturn<any, any, undefined>> {
+  fieldKey: PossibleNestedUnions<ExtractFormType<T>>;
+  form: T;
+}
+
+export function RHFErrorWrapper<T extends UseFormReturn<any, any, undefined>>({
+  fieldKey,
+  form,
+}: RHFErrorWrapperProps<T>) {
+  const nestedKeys = fieldKey.split(".");
+  if (nestedKeys.length > 1) {
+    const errorObject = getNestedProperty<FieldError>(form?.formState?.errors, fieldKey);
+    return (
+      <div className="text-sm italic text-error-content">
+        <div className="text-sm italic text-error-content">
+          {errorObject?.message}
+        </div>
+      </div>
+    );
+  }
+  const errorObject = form?.formState?.errors?.[fieldKey];
+  if (!errorObject) return null;
+  if (typeof errorObject?.message === "string") {
+    return (
+      <div className="text-sm italic text-error-content">
+        {errorObject?.message}
+      </div>
+    );
+  }
+  if (typeof errorObject === "object") {
+    return (
+      <div className="text-sm italic text-error-content">
+        {Object.values(errorObject).join(", \n ")}
+      </div>
+    );
+  }
+}

src/lib/tanstack/router/RouterPendingComponent.tsx

@@ -2,12 +2,12 @@ interface RouterPendingComponentProps {}
 
 export function RouterPendingComponent({}: RouterPendingComponentProps) {
   return (
-    <div className="flex min-h-screen w-full flex-col items-center justify-center gap-2">
-      <div className="skeleton h-[40vh] w-full rounded-lg bg-base-300" />
-      <div className="justify-center' flex w-full flex-col items-center md:flex-row">
+    <div className="flex min-h-screen w-full  flex-col items-center justify-center gap-2">
+      {/* <div className="justify-center' flex w-full flex-col items-center md:flex-row">
         <div className="skeleton h-[40vh] w-full rounded-lg bg-base-300" />
         <div className="skeleton h-[40vh] w-full rounded-lg bg-base-300" />
-      </div>
+      </div> */}
+      <img src="/colabs.png" alt="Loading..." />
     </div>
   );
 }