create-zhx-monorepo 0.2.2 → 2.0.0

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

@@ -0,0 +1,133 @@
+"use client";
+import { Plus } from "lucide-react";
+import type { Dispatch, SetStateAction } from "react";
+
+import { Button } from "@workspace/ui/components/button";
+import { Input } from "@workspace/ui/components/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@workspace/ui/components/select";
+
+export interface ListFilterConfig<TQuery> {
+  key: keyof TQuery;
+  label: string;
+  options: string[];
+  default?: string;
+}
+
+export interface SearchByOption<TQuery extends BaseQueryType> {
+  value: TQuery["searchBy"];
+  label: string;
+}
+
+export interface SearchToolbarProps<TQuery extends BaseQueryType> {
+  search: string;
+  setSearch: Dispatch<SetStateAction<string>>;
+
+  searchBy?: TQuery["searchBy"];
+  setSearchBy: Dispatch<SetStateAction<TQuery["searchBy"]>>;
+
+  setPage: Dispatch<SetStateAction<number>>;
+
+  sortBy?: TQuery["sortBy"];
+  setSortBy?: Dispatch<SetStateAction<TQuery["sortBy"]>>;
+
+  sortOrder?: SortOrderType;
+  setSortOrder?: Dispatch<SetStateAction<SortOrderType>>;
+
+  sortOptions?: Record<string, string>;
+
+  filter?: string;
+  setFilter?: Dispatch<SetStateAction<string | undefined>>;
+  filterConfig?: ListFilterConfig<TQuery>;
+
+  searchByOptions: SearchByOption<TQuery>[];
+  entityType?: string;
+}
+
+function SearchToolbar<TQuery extends BaseQueryType>({
+  search,
+  setPage,
+  setSearch,
+  searchBy,
+  setSearchBy,
+  searchByOptions,
+  filter,
+  setFilter,
+  filterConfig,
+  entityType,
+}: SearchToolbarProps<TQuery>) {
+  return (
+    <div className="flex items-center flex-wrap gap-3 justify-between">
+      <div className="flex gap-2 items-center">
+        <Input
+          placeholder="Search..."
+          value={search}
+          onChange={(e) => {
+            setPage(1);
+            setSearch(e.target.value);
+          }}
+          className="w-full md:w-64"
+        />
+
+        <Select
+          value={searchBy as string}
+          onValueChange={(v) => {
+            setPage(1);
+            setSearch("");
+            setSearchBy(v);
+          }}
+        >
+          <SelectTrigger className="w-44">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {searchByOptions.map((o) => (
+              <SelectItem key={o.value} value={o.value as string}>
+                {o.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {entityType && (
+        <div className="flex items-center gap-4">
+          {filterConfig && setFilter && (
+            <Select
+              value={filter ?? filterConfig.default ?? "all"}
+              onValueChange={(v) => {
+                setPage(1);
+                setFilter(v === "all" ? undefined : v);
+              }}
+            >
+              <SelectTrigger className="w-44">
+                <SelectValue placeholder={filterConfig.label} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All</SelectItem>
+                {filterConfig.options.map((o) => (
+                  <SelectItem key={o} value={o}>
+                    {o}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          )}
+
+          {entityType && (
+            <Button href={`${entityType}/new`} className="capitalize">
+              <Plus /> New {entityType.split("/").pop()?.replace(/s$/, "")}
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default SearchToolbar;

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

@@ -0,0 +1,41 @@
+"use client";
+
+import * as React from "react";
+import { useTheme } from "next-themes";
+import { Button, type ButtonProps } from "@workspace/ui/components/button";
+
+function ThemeSwitch(props: ButtonProps) {
+  const { setTheme, theme, systemTheme } = useTheme();
+
+  const currentTheme = theme === "system" ? systemTheme : theme;
+
+  const toggleTheme = () =>
+    setTheme(currentTheme === "dark" ? "light" : "dark");
+
+  return (
+    <Button variant="ghost" size="icon" {...props} onClick={toggleTheme}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="size-4.5"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
+        <path d="M12 3l0 18"></path>
+        <path d="M12 9l4.65 -4.65"></path>
+        <path d="M12 14.3l7.37 -7.37"></path>
+        <path d="M12 19.6l8.85 -8.85"></path>
+      </svg>
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  );
+}
+
+export default ThemeSwitch;

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

@@ -0,0 +1,109 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { useRouter } from "next/navigation";
+import { CircleCheckIcon, LoaderCircle, OctagonXIcon } from "lucide-react";
+
+import { validateOtp, verifyUpdateIdentifier } from "@workspace/sdk/auth";
+import { cn } from "@workspace/ui/lib/utils";
+import { Card, CardContent } from "@workspace/ui/components/card";
+
+type VerificationStatus = "loading" | "success" | "error";
+const VALID_PURPOSES = new Set(["verifyIdentifier", "updateIdentifier"]);
+
+export interface VerifyAuthProps {
+  identifier: string;
+  newIdentifier?: string;
+  purpose: OtpPurpose;
+  secret: string;
+  type?: OtpType;
+}
+
+function VerifyAuthPage({
+  identifier,
+  newIdentifier,
+  purpose,
+  secret,
+  type,
+}: VerifyAuthProps) {
+  const router = useRouter();
+  const [status, setStatus] = useState<VerificationStatus>("loading");
+
+  useEffect(() => {
+    if (!VALID_PURPOSES.has(purpose)) {
+      toast.error("Invalid verification purpose");
+      router.replace("/auth/sign-in");
+    }
+  }, [purpose, router]);
+
+  useEffect(() => {
+    const verify = async () => {
+      try {
+        const isUpdateIdentifier =
+          purpose === "authUpdateIdentifier" && newIdentifier;
+
+        const res = isUpdateIdentifier
+          ? await verifyUpdateIdentifier({
+              identifier,
+              newIdentifier,
+              purpose,
+              secret,
+              type,
+            })
+          : await validateOtp({ identifier, purpose, secret, type });
+
+        toast.success(res.message);
+        setStatus("success");
+
+        setTimeout(() => {
+          router.replace("/auth/sign-in");
+        }, 1200);
+      } catch {
+        toast.error("Verification failed");
+        setStatus("error");
+
+        setTimeout(() => {
+          router.replace("/auth/sign-in");
+        }, 1200);
+      }
+    };
+
+    verify();
+  }, [identifier, newIdentifier, purpose, secret, type, router]);
+
+  const StatusConfig = {
+    loading: {
+      icon: LoaderCircle,
+      message: "Verifying your request…",
+      className: "",
+    },
+    success: {
+      icon: CircleCheckIcon,
+      message: "Verification successful. Redirecting…",
+      className: "text-green-500",
+    },
+    error: {
+      icon: OctagonXIcon,
+      message: "This verification link is invalid or expired. Redirecting…",
+      className: "text-destructive",
+    },
+  } as const;
+
+  const { icon: Icon, message, className } = StatusConfig[status];
+
+  return (
+    <Card className="mx-auto w-full max-w-md">
+      <CardContent
+        className={cn("flex-center flex-col gap-4 py-10", className)}
+      >
+        <Icon
+          className={cn("size-8", status === "loading" && "animate-spin")}
+        />
+        <p className="text-center">{message}</p>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default VerifyAuthPage;

package/templates/monorepo-starter/apps/dashboard/src/components/skeleton/CUFormSkeleton.tsx

@@ -0,0 +1,31 @@
+import { Skeleton } from "@workspace/ui/components/skeleton";
+
+const CUFormSkeleton = () => {
+  return (
+    <section className="space-y-6 animate-pulse">
+      <div className="flex items-center gap-4">
+        <div className="flex-1 space-y-2">
+          <Skeleton className="h-4 w-20" />
+          <Skeleton className="h-10 w-full" />
+        </div>
+        <div className="flex-1 space-y-2">
+          <Skeleton className="h-4 w-20" />
+          <Skeleton className="h-10 w-full" />
+        </div>
+      </div>
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-24" />
+        <Skeleton className="h-10 w-full" />
+      </div>
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-32" />
+        <Skeleton className="h-48 w-full rounded-md" />{" "}
+      </div>
+      <div className="flex justify-end gap-2">
+        <Skeleton className="h-10 w-28" />
+      </div>
+    </section>
+  );
+};
+
+export default CUFormSkeleton;

package/templates/monorepo-starter/apps/dashboard/src/components/skeleton/DashboardSke1eton.tsx

@@ -0,0 +1,135 @@
+import { Skeleton } from "@workspace/ui/components/skeleton";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@workspace/ui/components/card";
+
+const DashboardSkeleton = () => {
+  return (
+    <div className="flex flex-1 flex-col animate-pulse">
+      <div className="@container/main flex flex-1 flex-col gap-2">
+        <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
+          {/* Dashboard Cards Skeleton */}
+          <div className="grid grid-cols-1 gap-4 px-4 lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
+            {[1, 2, 3, 4].map((i) => (
+              <Card key={i} className="@container/card">
+                <CardHeader>
+                  <CardDescription>
+                    <Skeleton className="h-4 w-24" />
+                  </CardDescription>
+                  <CardTitle>
+                    <Skeleton className="h-8 w-16 @[250px]/card:h-10" />
+                  </CardTitle>
+                  <div className="mt-2">
+                    <Skeleton className="h-6 w-20" />
+                  </div>
+                </CardHeader>
+                <CardContent className="pt-2">
+                  <div className="space-y-2">
+                    <Skeleton className="h-4 w-32" />
+                    <Skeleton className="h-3 w-40" />
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+
+          {/* Chart Area Skeleton */}
+          <div className="px-4 lg:px-6">
+            <Card className="@container/card">
+              <CardHeader>
+                <CardTitle>
+                  <Skeleton className="h-6 w-48" />
+                </CardTitle>
+                <CardDescription>
+                  <Skeleton className="h-4 w-64 hidden @[540px]/card:block" />
+                  <Skeleton className="h-4 w-32 @[540px]/card:hidden" />
+                </CardDescription>
+                <div className="mt-2">
+                  <Skeleton className="h-10 w-40 hidden @[767px]/card:block" />
+                  <Skeleton className="h-10 w-40 @[767px]/card:hidden" />
+                </div>
+              </CardHeader>
+              <CardContent>
+                <Skeleton className="h-62.5 w-full rounded-md" />
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Recent Posts & Content Overview Skeleton */}
+          <div className="grid grid-cols-1 gap-4 px-4 lg:px-6 lg:grid-cols-2">
+            {/* Recent Posts Skeleton */}
+            <Card>
+              <CardHeader>
+                <CardTitle>
+                  <Skeleton className="h-6 w-32" />
+                </CardTitle>
+                <CardDescription>
+                  <Skeleton className="h-4 w-48" />
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-4">
+                  {[1, 2, 3, 4, 5].map((i) => (
+                    <div
+                      key={i}
+                      className="flex items-center justify-between border-b pb-3 last:border-0"
+                    >
+                      <div className="space-y-2">
+                        <Skeleton className="h-5 w-48" />
+                        <Skeleton className="h-4 w-64" />
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <Skeleton className="h-6 w-20" />
+                        <Skeleton className="h-4 w-12" />
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Content Overview Skeleton */}
+            <Card>
+              <CardHeader>
+                <CardTitle>
+                  <Skeleton className="h-6 w-40" />
+                </CardTitle>
+                <CardDescription>
+                  <Skeleton className="h-4 w-64" />
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-6">
+                  {/* Tabs Skeleton */}
+                  <Skeleton className="h-10 w-full rounded-md" />
+
+                  {/* Categories Tab Content Skeleton */}
+                  <div className="space-y-4">
+                    <Skeleton className="h-5 w-32" />
+                    <div className="space-y-3">
+                      {[1, 2, 3, 4, 5].map((i) => (
+                        <div key={i} className="flex flex-col gap-2">
+                          <div className="flex justify-between items-center">
+                            <Skeleton className="h-4 w-24" />
+                            <Skeleton className="h-6 w-16" />
+                          </div>
+                          <Skeleton className="h-2 w-full rounded-lg" />
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardSkeleton;

package/templates/monorepo-starter/apps/dashboard/src/components/skeleton/DetailsPageSkeleton.tsx

@@ -0,0 +1,64 @@
+import { Skeleton } from "@workspace/ui/components/skeleton";
+import { cn } from "@workspace/ui/lib/utils";
+import { Card, CardContent, CardHeader } from "@workspace/ui/components/card";
+import type { SectionConfig } from "@/components/shared/GenericDetailsPage";
+
+interface DetailsPageSkeletonProps<TData> {
+  sections: SectionConfig<TData>[];
+}
+
+// Skeleton Component
+function DetailsPageSkeleton<TData>({
+  sections,
+}: DetailsPageSkeletonProps<TData>) {
+  return (
+    <div className="container mx-auto p-6 space-y-6">
+      {/* Header Skeleton */}
+      <div className="flex flex-col gap-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <Skeleton className="h-10 w-10 rounded-md" />
+            <div className="space-y-2">
+              <Skeleton className="h-8 w-48" />
+              <Skeleton className="h-4 w-64" />
+            </div>
+          </div>
+          <Skeleton className="h-10 w-24" />
+        </div>
+        <Skeleton className="h-32 w-full rounded-lg" />
+      </div>
+
+      {/* Sections Skeleton */}
+      <div className="grid gap-6">
+        {sections.map((section, index) => (
+          <Card key={index}>
+            <CardHeader>
+              <Skeleton className="h-6 w-32" />
+            </CardHeader>
+            <CardContent>
+              <div
+                className={cn(
+                  "grid gap-4",
+                  section.columns === 1
+                    ? "grid-cols-1"
+                    : section.columns === 3
+                      ? "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
+                      : "grid-cols-1 md:grid-cols-2",
+                )}
+              >
+                {section.fields.map((_: unknown, i: number) => (
+                  <div key={i} className="space-y-2">
+                    <Skeleton className="h-4 w-24" />
+                    <Skeleton className="h-6 w-full" />
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default DetailsPageSkeleton;

package/templates/monorepo-starter/apps/dashboard/src/components/skeleton/RootLayoutSkeleton.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { Skeleton } from "@workspace/ui/components/skeleton";
+import {
+  SidebarProvider,
+  SidebarInset,
+  Sidebar,
+  SidebarHeader,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+} from "@workspace/ui/components/sidebar";
+import { cn } from "@workspace/ui/lib/utils";
+import DashboardSkeleton from "./DashboardSke1eton";
+import { sidebarMenu } from "@/lib/constants";
+// import { sidebarMenu } from "@/lib/constants";
+
+const RootLayoutSkeleton = () => {
+  return (
+    <SidebarProvider
+      style={
+        {
+          "--sidebar-width": "calc(var(--spacing) * 72)",
+          "--header-height": "calc(var(--spacing) * 12)",
+        } as React.CSSProperties
+      }
+    >
+      {/* Left Sidebar Skeleton */}
+      <Sidebar collapsible="icon" className="bg-background animate-pulse">
+        {/* Sidebar Header */}
+        <SidebarHeader className="flex flex-col gap-2">
+          <Skeleton className="h-8 w-[60%] rounded" />
+          <Skeleton className="h-6 w-[40%]" />
+        </SidebarHeader>
+
+        {/* Sidebar Groups */}
+        <SidebarContent className="mt-6 space-y-4 scrollbar-hidden">
+          {sidebarMenu.map(({ groupLabel, items }, i) => (
+            <SidebarGroup
+              key={i}
+              className={cn(i === sidebarMenu.length - 1 ? "mt-auto" : "")}
+            >
+              <SidebarGroupContent className="flex flex-col gap-2">
+                {groupLabel && (
+                  <SidebarGroupLabel>
+                    <Skeleton className="h-4 w-20" />
+                  </SidebarGroupLabel>
+                )}
+                <SidebarMenu>
+                  {items.map((item) => (
+                    <SidebarMenuItem key={item.title}>
+                      <SidebarMenuButton className="flex items-center gap-2">
+                        <Skeleton className="h-4 w-4 rounded" />
+                        <Skeleton className="h-4 w-full" />
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          ))}
+        </SidebarContent>
+
+        {/* Sidebar Footer / User */}
+        <SidebarFooter>
+          <div className="flex items-center gap-3">
+            <Skeleton className="h-8 w-8 rounded-full" />
+            <div className="flex-1 space-y-1">
+              <Skeleton className="h-3 w-3/4" />
+              <Skeleton className="h-2 w-1/2" />
+            </div>
+          </div>
+        </SidebarFooter>
+      </Sidebar>
+
+      {/* Right Content */}
+      <SidebarInset>
+        {/* Header Skeleton */}
+        <div className="sticky top-0 z-50 w-full h-(--header-height) border-b bg-background px-6 animate-pulse">
+          <div className="flex items-center justify-between h-full">
+            <div className="flex items-center gap-4">
+              <Skeleton className="h-6 w-6 rounded" />
+              <div className="hidden md:block">
+                <Skeleton className="h-6 w-40" />
+              </div>
+            </div>
+            <div className="flex items-center gap-4">
+              <Skeleton className="h-9 w-9 rounded-full" />
+              <Skeleton className="h-9 w-24 rounded-md" />
+            </div>
+          </div>
+        </div>
+
+        {/* Dashboard Skeleton */}
+        <DashboardSkeleton />
+      </SidebarInset>
+    </SidebarProvider>
+  );
+};
+
+export default RootLayoutSkeleton;