create-zhx-monorepo 0.2.2 → 2.0.0

package/templates/monorepo-starter/apps/dashboard/src/components/shared/GenericArrayField.tsx

@@ -0,0 +1,189 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+"use client";
+
+import React, { useRef, useState } from "react";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@workspace/ui/components/card";
+import { Badge } from "@workspace/ui/components/badge";
+import type { AnyFormApi } from "@workspace/ui/components/form";
+import { Button } from "@workspace/ui/components/button";
+import GenericFormTable from "@/components/shared/GenericFormTable";
+import type { ColumnConfig } from "@/components/shared/GenericTable";
+
+export interface ArrayFormItemProps<TItem, TCtx = any> {
+  onSubmit: (item: TItem) => void;
+  disabled?: boolean;
+  children: (submit: () => void) => React.ReactNode;
+  editData?: TItem;
+  clearEditData: () => void;
+  items: TItem[];
+  ctx?: TCtx;
+}
+
+export type ArrayFormItem<TItem, TCtx = any> = React.ComponentType<
+  ArrayFormItemProps<TItem, TCtx>
+>;
+
+export type ArrayFieldSideEffect<TFormData, TItem, TCtx> = (args: {
+  form: AnyFormApi<TFormData>;
+  items: TItem[];
+  ctx?: TCtx;
+}) => void;
+
+interface GenericArrayFieldProps<
+  TFormData,
+  TName extends keyof TFormData,
+  TFormKeys extends readonly (keyof TFormData)[] = readonly (keyof TFormData)[],
+  TItem = ArrayItem<TFormData[TName]>,
+  TCtx = Pick<TFormData, TFormKeys[number]>,
+> {
+  name: TName & string;
+  form: AnyFormApi<TFormData>;
+  disabled?: boolean;
+  columns: ColumnConfig<TItem>[];
+  FormItem?: ArrayFormItem<TItem, TCtx>;
+  subscribeKeys?: TFormKeys;
+  effects?: ArrayFieldSideEffect<TFormData, TItem, TCtx>;
+  renderFormItem?: (ctx: {
+    items: TItem[];
+    onAdd: (item: TItem) => void;
+    editData?: TItem;
+    clearEditData: () => void;
+    ctx?: TCtx;
+  }) => React.ReactNode;
+}
+
+function GenericArrayField<
+  TFormData,
+  TName extends keyof TFormData,
+  TFormKeys extends readonly (keyof TFormData)[],
+>({
+  name,
+  form,
+  effects,
+  FormItem,
+  columns,
+  subscribeKeys,
+  renderFormItem,
+  disabled = false,
+}: GenericArrayFieldProps<TFormData, TName, TFormKeys>) {
+  const [editData, setEditData] = useState();
+  const effectsAppliedRef = useRef<string>("");
+
+  const entityName = name.replace(/s$/, "");
+
+  return (
+    <form.Subscribe
+      selector={(state) => {
+        const ctx = subscribeKeys?.reduce(
+          (acc, key) => {
+            acc[key] = state.values[key];
+            return acc;
+          },
+          {} as Pick<TFormData, TFormKeys[number]>,
+        );
+        return { ctx, items: state.values[name] ?? [] };
+      }}
+    >
+      {({ items, ctx }) => (
+        <form.Field name={name} mode="array">
+          {(field) => {
+            const ArrItems = Array.isArray(items) ? items : [];
+
+            if (effects) {
+              const effectKey = JSON.stringify({ items: ArrItems, ctx });
+              if (effectsAppliedRef.current !== effectKey) {
+                effectsAppliedRef.current = effectKey;
+                setTimeout(() => {
+                  effects({ form, items: ArrItems, ctx });
+                }, 0);
+              }
+            }
+
+            const handleAdd = (item: any) => {
+              field.pushValue(item);
+              if (editData) setEditData(undefined);
+            };
+            const handleEdit = (i: number, item: any) => {
+              setEditData(item);
+              field.removeValue(i);
+            };
+            const handleRemove = (index: number) => field.removeValue(index);
+
+            return (
+              <>
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="capitalize">{name}</CardTitle>
+                  </CardHeader>
+
+                  <CardContent>
+                    {renderFormItem
+                      ? renderFormItem({
+                          ctx,
+                          items: ArrItems,
+                          onAdd: handleAdd,
+                          clearEditData: () => setEditData(undefined),
+                        })
+                      : FormItem && (
+                          <FormItem
+                            onSubmit={handleAdd}
+                            disabled={disabled}
+                            editData={editData}
+                            items={ArrItems}
+                            clearEditData={() => setEditData(undefined)}
+                            ctx={ctx}
+                          >
+                            {(handleSubmit) => (
+                              <div className="flex items-center justify-between">
+                                <p className="text-xs text-muted-foreground">
+                                  Total {entityName}: <b>{ArrItems.length}</b>
+                                </p>
+                                <Button
+                                  type="button"
+                                  variant="secondary"
+                                  onClick={handleSubmit}
+                                >
+                                  {`Add ${entityName}`}
+                                </Button>
+                              </div>
+                            )}
+                          </FormItem>
+                        )}
+                  </CardContent>
+                </Card>
+
+                {ArrItems.length > 0 && (
+                  <Card className="p-0 pt-6 bg-input/30">
+                    <div className="px-6 flex items-center justify-between">
+                      <CardTitle className="capitalize">
+                        {entityName} History
+                      </CardTitle>
+                      <Badge variant="outline">{ArrItems.length} items</Badge>
+                    </div>
+
+                    <CardContent className="p-0">
+                      <GenericFormTable
+                        items={ArrItems}
+                        columns={columns}
+                        onEdit={handleEdit}
+                        onRemove={handleRemove}
+                        entityTitle={entityName}
+                      />
+                    </CardContent>
+                  </Card>
+                )}
+              </>
+            );
+          }}
+        </form.Field>
+      )}
+    </form.Subscribe>
+  );
+}
+
+export default GenericArrayField;

package/templates/monorepo-starter/apps/dashboard/src/components/shared/GenericCUForm.tsx

@@ -0,0 +1,124 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+"use client";
+import { toast } from "sonner";
+import { useEffect, useState } from "react";
+import { usePathname, useRouter } from "next/navigation";
+import { useForm, type FormValidateOrFn } from "@tanstack/react-form";
+
+import type { ApiException } from "@workspace/sdk";
+import { getBackPath } from "@workspace/ui/lib/utils";
+import { Form, type AnyFormApi } from "@workspace/ui/components/form";
+import type { ColumnConfig } from "@/components/shared/GenericTable";
+import CUFormSkeleton from "@/components/skeleton/CUFormSkeleton";
+import GenericArrayField, { type ArrayFormItem } from "./GenericArrayField";
+
+interface UseQueryResult<TData, TFormData> {
+  data?: TData;
+  isLoading?: boolean;
+  fetchError: ApiException | null;
+  mutateAsync: (data: TFormData) => Promise<TData>;
+  isPending: boolean;
+  mutateError: ApiException | null;
+}
+
+interface GenericCUFormProps<TData, TFormData> extends BaseCUFormProps {
+  entityName: string;
+  defaultValues: Partial<TFormData>;
+  schema: FormValidateOrFn<TFormData>;
+  children?: (
+    form: AnyFormApi<TFormData>,
+    formType: FormSectionType,
+    data?: TData,
+  ) => React.ReactNode;
+  useQuery: (...args: string[]) => UseQueryResult<TData, TFormData>;
+  formHeader?: (
+    form: AnyFormApi<TFormData>,
+    formType: FormSectionType,
+    data?: TData,
+  ) => React.ReactNode;
+  arrayFields?: {
+    [K in keyof TFormData]: TFormData[K] extends readonly any[]
+      ? {
+          name: K & string;
+          component: ArrayFormItem<ArrayItem<TFormData[K]>>;
+          columns: ColumnConfig<ArrayItem<TFormData[K]>>[];
+        }
+      : never;
+  }[keyof TFormData];
+}
+
+export function GenericCUForm<
+  TData extends Record<string, any>,
+  TFormData extends Record<string, any>,
+>({
+  entityId,
+  entityName,
+  formType,
+  children,
+  defaultValues,
+  schema,
+  useQuery,
+  formHeader,
+  arrayFields,
+}: GenericCUFormProps<TData, TFormData>) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const listPath = getBackPath(pathname, formType === "add" ? 1 : 2);
+  const { data, mutateAsync, isLoading, isPending } = useQuery(entityId!);
+  const [isFormReady, setIsFormReady] = useState(!entityId);
+
+  const form = useForm({
+    defaultValues: entityId ? undefined : (defaultValues as TFormData),
+    validators: {
+      onSubmit: schema,
+    },
+    onSubmit: async ({ value }) => {
+      try {
+        await mutateAsync(value);
+        toast.success(
+          `${entityName} ${entityId ? "updated" : "created"} successfully!`,
+        );
+        form.reset();
+        router.push(listPath);
+      } catch (err: any) {
+        toast.error(err?.message ?? "Something went wrong.");
+      }
+    },
+  });
+
+  useEffect(() => {
+    if (data && !isFormReady) {
+      form.reset(data as unknown as TFormData);
+      setIsFormReady(true);
+    }
+  }, [data, form, isFormReady]);
+
+  if (isLoading || !isFormReady) return <CUFormSkeleton />;
+
+  return (
+    <Form
+      form={form}
+      isPending={isPending}
+      title={
+        <>
+          {formType === "add" ? "Add New" : "Update"} {entityName}
+          {entityId && `: ${entityId}`}
+        </>
+      }
+      btnText={`${formType} ${entityName}`}
+    >
+      {formHeader && formHeader(form, formType)}
+
+      {arrayFields && (
+        <GenericArrayField
+          form={form}
+          name={arrayFields.name}
+          FormItem={arrayFields.component}
+          columns={arrayFields.columns}
+        />
+      )}
+
+      {children?.(form, formType)}
+    </Form>
+  );
+}

package/templates/monorepo-starter/apps/dashboard/src/components/shared/GenericDetailsPage.tsx

@@ -0,0 +1,291 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { ArrowLeft, Edit, Eye } from "lucide-react";
+
+import type { ApiException } from "@workspace/sdk";
+import { cn } from "@workspace/ui/lib/utils";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@workspace/ui/components/card";
+import { Button } from "@workspace/ui/components/button";
+import DetailsPageSkeleton from "@/components/skeleton/DetailsPageSkeleton";
+
+export interface DetailFieldConfig<TData> {
+  label: string;
+  accessor: keyof TData | ((data: TData) => React.ReactNode);
+  icon?: React.ComponentType<{ className?: string }>;
+  className?: string;
+  format?: (value: any) => string;
+  render?: (value: any, data: TData) => React.ReactNode;
+}
+
+export interface SectionConfig<TData> {
+  title: string;
+  description?: (data: TData) => React.ReactNode;
+  fields: DetailFieldConfig<TData>[];
+  columns?: 1 | 2 | 3;
+}
+
+export interface RelatedEntityConfig<TData, TKey extends keyof TData> {
+  title: string;
+  dataKey: TKey;
+  columns: Array<{
+    header: string;
+    accessor: (item: ArrayItem<TData[TKey]>) => React.ReactNode;
+  }>;
+  viewPath?: (item: ArrayItem<TData[TKey]>) => string;
+}
+
+interface GenericDetailsPageProps<
+  TData extends BaseResponse,
+  TKey extends keyof TData,
+> {
+  entityId: string;
+  entityName: string;
+  sections: SectionConfig<TData>[];
+  relatedEntities?: RelatedEntityConfig<TData, TKey>[];
+  renderHeader: (data: TData) => React.ReactNode;
+  renderActions?: (data: TData) => React.ReactNode;
+  children?: (data: TData) => React.ReactNode;
+  useQuery: (...args: string[]) => {
+    data?: TData;
+    isLoading?: boolean;
+    fetchError: ApiException | null;
+  };
+}
+
+export function GenericDetailsPage<
+  TData extends BaseResponse,
+  TKey extends keyof TData,
+>({
+  entityId,
+  entityName,
+  sections,
+  useQuery,
+  relatedEntities,
+  renderHeader,
+  renderActions,
+  children,
+}: GenericDetailsPageProps<TData, TKey>) {
+  const pathname = usePathname();
+  const backPath = pathname.slice(0, pathname.lastIndexOf("/")) || "/";
+
+  const { data, isLoading, fetchError } = useQuery(entityId);
+
+  if (isLoading) {
+    return <DetailsPageSkeleton sections={sections} />;
+  }
+
+  if (fetchError || !data) {
+    return (
+      <div className="container mx-auto p-6">
+        <div className="flex items-center gap-2 mb-6">
+          <Button variant="ghost" size="icon" href={backPath}>
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+          <h1 className="text-3xl font-bold">Error</h1>
+        </div>
+        <Card>
+          <CardContent className="pt-6">
+            <div className="text-center py-12">
+              <p className="text-destructive text-lg">
+                {fetchError?.message || `Failed to load ${entityName}`}
+              </p>
+              <Button variant="outline" className="mt-4" href={backPath}>
+                Go Back
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  const getFieldValue = (field: DetailFieldConfig<TData>, data: TData) => {
+    if (typeof field.accessor === "function") {
+      return field.accessor(data);
+    }
+
+    const value = data[field.accessor];
+
+    if (field.format && value) {
+      return field.format(value);
+    }
+
+    if (field.render) {
+      return field.render(value, data);
+    }
+
+    return value ?? "—";
+  };
+
+  const getGridColumns = (columns: 1 | 2 | 3 = 1) => {
+    switch (columns) {
+      case 1:
+        return "grid-cols-1";
+      case 2:
+        return "grid-cols-1 md:grid-cols-2";
+      case 3:
+        return "grid-cols-1 md:grid-cols-2 lg:grid-cols-3";
+      default:
+        return "grid-cols-1 md:grid-cols-2";
+    }
+  };
+
+  return (
+    <div className="container mx-auto p-6 space-y-6">
+      {/* Header */}
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
+          <div className="flex items-center gap-3">
+            <Button variant="ghost" size="icon" href={backPath}>
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+            <div>
+              <h1 className="text-3xl font-bold capitalize">
+                {entityName} Details
+              </h1>
+              <p className="text-muted-foreground">
+                Viewing details for {entityName.toLowerCase()}: {entityId}
+              </p>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2">
+            {renderActions?.(data)}
+            <Button asChild>
+              <Link href={`${pathname}/edit`}>
+                <Edit className="h-4 w-4 mr-2" />
+                Edit
+              </Link>
+            </Button>
+          </div>
+        </div>
+
+        <Card className="border-0 shadow-none bg-linear-to-r from-primary/20 to-secondary/50">
+          <CardContent className="pt-6">{renderHeader(data)}</CardContent>
+        </Card>
+      </div>
+
+      {/* Main Content Sections */}
+      <div className="grid gap-6">
+        {sections.map(({ title, description, fields, columns }, index) => (
+          <Card key={index}>
+            <CardHeader>
+              <CardTitle className="text-lg">{title}</CardTitle>
+              {description && (
+                <CardDescription>{description(data)}</CardDescription>
+              )}
+            </CardHeader>
+            <CardContent>
+              <div className={cn("grid gap-4", getGridColumns(columns))}>
+                {fields.map((field, fieldIndex) => {
+                  const Icon = field.icon;
+                  const value = getFieldValue(field, data);
+
+                  return (
+                    <div
+                      key={fieldIndex}
+                      className={cn("space-y-2", field.className)}
+                    >
+                      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                        {Icon && <Icon className="h-4 w-4" />}
+                        <span>{field.label}</span>
+                      </div>
+                      <div className="text-sm font-medium">
+                        {value as string}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {/* Related Entities */}
+      {relatedEntities?.map((related, index) => {
+        const relatedData = data[related.dataKey];
+        if (
+          !relatedData ||
+          (Array.isArray(relatedData) && relatedData.length === 0)
+        ) {
+          return null;
+        }
+
+        return (
+          <Card key={index}>
+            <CardHeader>
+              <CardTitle className="text-lg">{related.title}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="overflow-hidden rounded-lg border">
+                <table className="w-full text-sm">
+                  <thead className="bg-muted/50">
+                    <tr>
+                      {related.columns.map((col, colIndex) => (
+                        <th
+                          key={colIndex}
+                          className="px-4 py-2 text-left font-medium"
+                        >
+                          {col.header}
+                        </th>
+                      ))}
+                      {related.viewPath && <th className="w-20"></th>}
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y">
+                    {Array.isArray(relatedData) ? (
+                      relatedData.map((item: any, itemIndex: number) => (
+                        <tr key={itemIndex} className="hover:bg-muted/50">
+                          {related.columns.map((col, colIndex) => (
+                            <td key={colIndex} className="px-4 py-3">
+                              {typeof col.accessor === "function"
+                                ? col.accessor(item)
+                                : (item[col.accessor] ?? "—")}
+                            </td>
+                          ))}
+                          {related.viewPath && (
+                            <td className="px-4 py-3 text-right">
+                              <Button variant="ghost" size="sm" asChild>
+                                <Link href={related.viewPath(item)}>
+                                  <Eye className="h-4 w-4" />
+                                </Link>
+                              </Button>
+                            </td>
+                          )}
+                        </tr>
+                      ))
+                    ) : (
+                      <tr>
+                        <td
+                          colSpan={related.columns.length + 1}
+                          className="px-4 py-3 text-center"
+                        >
+                          No data available
+                        </td>
+                      </tr>
+                    )}
+                  </tbody>
+                </table>
+              </div>
+            </CardContent>
+          </Card>
+        );
+      })}
+
+      {/* Custom Children */}
+      {children?.(data)}
+    </div>
+  );
+}