@tulip-systems/core 0.2.0

package/src/components/forms/form-dialog.tsx

@@ -0,0 +1,141 @@
+// "use client";
+
+// import { Icons } from "@/components/common/icons";
+// import {
+//   Dialog,
+//   DialogContent,
+//   DialogFooter,
+//   DialogHeader,
+//   DialogTitle,
+//   DialogTrigger,
+// } from "@/components/ui/dialog.client";
+// import { Form } from "@/components/ui/form.client";
+// import { type useFormAction } from "@/lib/hooks/use-action";
+// import { cn } from "@/lib/utils/cn";
+// import { DialogProps, type DialogContentProps } from "@radix-ui/react-dialog";
+// import React, { type ComponentProps } from "react";
+// import { useFormContext, type FieldValues, type UseFormReturn } from "react-hook-form";
+// import { Button } from "../ui/button";
+
+// /*
+//  * FormDialogContext
+//  */
+// type FormDialogContextValue = {
+//   open: boolean;
+//   setOpen: (open: boolean) => void;
+// };
+
+// const FormDialogContext = React.createContext({} as FormDialogContextValue);
+
+// /**
+//  * FormDialog
+//  */
+// export function FormDialog({ children, ...props }: DialogProps) {
+//   const openState = React.useState(false);
+
+//   const open = props.open ?? openState[0];
+
+//   const setOpen = props.onOpenChange ?? openState[1];
+
+//   return (
+//     <Dialog {...props} open={open} onOpenChange={setOpen}>
+//       <FormDialogContext.Provider value={{ open, setOpen }}>{children}</FormDialogContext.Provider>
+//     </Dialog>
+//   );
+// }
+
+// /**
+//  * FormDialogContent
+//  */
+// type FormDialogContentProps<TFields extends FieldValues> = DialogContentProps & {
+//   form: UseFormReturn<TFields>;
+//   mutation: ReturnType<typeof useFormAction>;
+// };
+
+// export function FormDialogContent<TFields extends FieldValues>({
+//   mutation,
+//   form,
+//   children,
+//   ...props
+// }: FormDialogContentProps<TFields>) {
+//   const { setOpen } = React.useContext(FormDialogContext);
+//   if (!setOpen) throw new Error("FormDialogContent must be used inside a FormDialog");
+
+//   if (Object.keys(form.formState.errors).length > 0) {
+//     console.error(form.formState.errors);
+//   }
+
+//   React.useEffect(() => {
+//     if (mutation.status === "hasSucceeded") {
+//       form.reset();
+//       setOpen(false);
+//     }
+//   }, [mutation.status, form, setOpen]);
+
+//   return (
+//     <DialogContent {...props}>
+//       <Form {...form}>
+//         <form onSubmit={form.handleSubmit((data) => mutation.execute(data))}>{children}</form>
+//       </Form>
+//     </DialogContent>
+//   );
+// }
+
+// /**
+//  * FormDialogFields
+//  */
+// export function FormDialogFields({ children, className, ...props }: ComponentProps<"div">) {
+//   return (
+//     <div {...props} className={cn("space-y-8 py-10", className)}>
+//       {children}
+//     </div>
+//   );
+// }
+
+// /**
+//  * FormDialogFooter
+//  */
+// export function FormDialogFooter() {
+//   const form = useFormContext();
+
+//   const { setOpen } = React.useContext(FormDialogContext);
+//   if (!setOpen) throw new Error("FormDialogFooter must be used inside a FormDialog");
+
+//   return (
+//     <DialogFooter>
+//       <div className="flex w-full flex-row justify-between">
+//         <Button
+//           variant="secondary"
+//           type="button"
+//           disabled={form.formState.disabled}
+//           onClick={() => {
+//             setOpen(false);
+//             form.reset();
+//           }}
+//         >
+//           Annuleren
+//         </Button>
+
+//         <Button type="submit" disabled={form.formState.disabled}>
+//           {form.formState.disabled && <Icons.spinner className="mr-2 size-4 animate-spin" />}
+//           Toevoegen
+//         </Button>
+//       </div>
+//     </DialogFooter>
+//   );
+// }
+
+// /**
+//  * FormDialogHeader
+//  */
+// export const FormDialogHeader = DialogHeader;
+
+// /**
+//  * FormDialogTitle
+//  */
+// export const FormDialogTitle = DialogTitle;
+
+// /**
+//  * FormDialogTrigger
+//  */
+// export const FormDialogTrigger = DialogTrigger;

package/src/components/forms/form-layout.tsx

@@ -0,0 +1,56 @@
+// "use client";
+
+// import { cn } from "@/lib/utils/cn";
+// import { useRouter } from "next/navigation";
+// import type React from "react";
+// import type { FieldValues, UseFormReturn } from "react-hook-form";
+// import { Button } from "../ui/button";
+// import { Form } from "@/components/ui/form.client";
+// import { Icons } from "@/components/common/icons";
+
+// type FormLayoutProps<TFields extends FieldValues> = React.HTMLAttributes<HTMLElement> & {
+//   form: UseFormReturn<TFields>;
+//   mutation: UseActionPayload;
+//   children: React.ReactNode;
+// };
+
+// export function FormLayout<TFields extends FieldValues>({
+//   form,
+//   mutation,
+//   children,
+//   className,
+//   ...props
+// }: FormLayoutProps<TFields>) {
+//   const router = useRouter();
+
+//   return (
+//     <Form {...props} {...form}>
+//       <form
+//         onSubmit={form.handleSubmit((data) => mutation.execute(data))}
+//         className={cn("pb-40", className)}
+//       >
+//         {children}
+
+//         <div className="absolute bottom-0 left-0 right-0 flex w-full flex-row justify-between border-t bg-background p-6 md:px-10">
+//           <Button
+//             variant="ghost"
+//             type="button"
+//             disabled={form.formState.disabled}
+//             onClick={() => router.back()}
+//           >
+//             Annuleren
+//           </Button>
+
+//           <Button disabled={form.formState.disabled} type="submit" className="flex gap-2">
+//             {mutation.status === "executing" ? (
+//               <Icons.spinner className="size-4 animate-spin" />
+//             ) : (
+//               <Icons.save className="size-4" />
+//             )}
+//             Opslaan
+//           </Button>
+//         </div>
+//       </form>
+//     </Form>
+//   );
+// }

package/src/components/header/back-button.client.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { Icons } from "@/components/common/icons";
+import { Button } from "@/components/ui/button";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+import { cn } from "@/lib/utils/cn";
+import { useRouter } from "next/navigation";
+
+export function HeaderTopbarBackButton({
+  className,
+  ...props
+}: React.HtmlHTMLAttributes<HTMLButtonElement>) {
+  const router = useRouter();
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        <Button
+          {...props}
+          variant="ghost"
+          onClick={() => router.back()}
+          className={cn(
+            "text-muted-foreground hover:text-foreground w-content h-full rounded-none border-r p-0",
+            className,
+          )}
+        >
+          <Icons.chevronLeft className="opacity-50" />
+        </Button>
+      </ContextMenuTrigger>
+
+      <ContextMenuContent>
+        <ContextMenuItem className="flex gap-3" onClick={() => router.back()}>
+          <Icons.moveLeft className="w-4" />
+          Terug
+        </ContextMenuItem>
+
+        <ContextMenuItem className="flex gap-3" onClick={() => router.forward()}>
+          <Icons.moveRight className="w-4" />
+          Vooruit
+        </ContextMenuItem>
+
+        <ContextMenuItem className="flex gap-3" onClick={() => router.refresh()}>
+          <Icons.refresh className="w-3.5" />
+          Verversen
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}

package/src/components/header/bottom-bar.client.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { cn } from "@/lib/utils/cn";
+import { PathOutput } from "@/modules/config/paths/types";
+import Link from "next/link";
+import { useSelectedLayoutSegment } from "next/navigation";
+import type React from "react";
+
+/**
+ * Bottombar component
+ */
+export type BottomBarProps = {
+  children: React.ReactNode;
+};
+
+export function BottomBar({ children }: BottomBarProps) {
+  return (
+    <nav className="flex h-[var(--header-bottom-bar-height)] items-center justify-between overflow-x-auto border-b">
+      {children}
+    </nav>
+  );
+}
+
+/**
+ * Bottombar link component
+ */
+export type BottomBarLink = Omit<PathOutput, "icon" | "badge">;
+
+export type BottomBarLinksProps = React.HTMLAttributes<HTMLElement> & {
+  paths: BottomBarLink[];
+};
+
+export function BottomBarLinks({ paths, className, ...props }: BottomBarLinksProps) {
+  const currentSegment = useSelectedLayoutSegment();
+
+  return (
+    <ul
+      {...props}
+      className={cn("px-content flex flex-row items-center gap-6 text-sm font-medium", className)}
+    >
+      {paths.map(({ href, name, segment }) => (
+        <Link
+          key={href}
+          href={href}
+          className={cn(
+            "text-muted-foreground hover:text-foreground w-fit text-nowrap break-keep transition-colors",
+            currentSegment === segment && "text-primary",
+          )}
+        >
+          {name}
+        </Link>
+      ))}
+    </ul>
+  );
+}

package/src/components/header/breadcrumbs.client.tsx

@@ -0,0 +1,99 @@
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import Link from "next/link";
+import { PropsWithChildren } from "react";
+
+export type HeaderBreadcrumb = {
+  label: string;
+  href?: string;
+};
+
+export type HeaderBreadcrumbProps = {
+  breadcrumbs: HeaderBreadcrumb[];
+};
+
+export function HeaderBreadcrumbs(props: PropsWithChildren) {
+  return <Breadcrumb>{props.children}</Breadcrumb>;
+}
+
+export const HeaderBreadcrumbSeparator = BreadcrumbSeparator;
+
+/**
+ * Dropdown menu
+ */
+export function HeaderBreadcrumbsDropdownMenu(props: PropsWithChildren) {
+  return (
+    <BreadcrumbItem>
+      <DropdownMenu>
+        <DropdownMenuTrigger className="flex items-center gap-1">
+          <BreadcrumbEllipsis />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">{props.children}</DropdownMenuContent>
+      </DropdownMenu>
+    </BreadcrumbItem>
+  );
+}
+
+export function HeaderBreadcrumbsDropdownMenuItem(props: { breadcrumb: HeaderBreadcrumb }) {
+  return (
+    <DropdownMenuItem>
+      {props.breadcrumb.href ? (
+        <Link href={props.breadcrumb.href}>{props.breadcrumb.label}</Link>
+      ) : (
+        <span>{props.breadcrumb.label}</span>
+      )}
+    </DropdownMenuItem>
+  );
+}
+
+/**
+ * Links
+ */
+export function HeaderBreadcrumbsLink(props: { breadcrumb: HeaderBreadcrumb }) {
+  return (
+    <BreadcrumbItem>
+      {props.breadcrumb.href ? (
+        <BreadcrumbLink asChild>
+          <Link href={props.breadcrumb.href} className="truncate">
+            {props.breadcrumb.label}
+          </Link>
+        </BreadcrumbLink>
+      ) : (
+        <BreadcrumbPage className="truncate">{props.breadcrumb.label}</BreadcrumbPage>
+      )}
+    </BreadcrumbItem>
+  );
+}
+
+/**
+ * Lists
+ */
+export function HeaderBreadcrumbsMobileList(props: PropsWithChildren) {
+  return (
+    <ScrollArea>
+      <BreadcrumbList className="flex-nowrap lg:hidden">{props.children}</BreadcrumbList>
+    </ScrollArea>
+  );
+}
+
+export function HeaderBreadcrumbsDesktopList(props: PropsWithChildren) {
+  return (
+    <ScrollArea>
+      <BreadcrumbList className="hidden flex-nowrap lg:flex">{props.children}</BreadcrumbList>
+    </ScrollArea>
+  );
+}

package/src/components/header/header.client.tsx

@@ -0,0 +1,10 @@
+import { cn } from "@/lib/utils/cn";
+import { ComponentProps } from "react";
+
+export function Header({ children, className, ...props }: ComponentProps<"header">) {
+  return (
+    <header className={cn("bg-sidebar sticky top-0 z-30 backdrop-blur-3xl", className)} {...props}>
+      {children}
+    </header>
+  );
+}

package/src/components/header/indicator.client.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { IndicatorStatus, useIndicator } from "@/lib/hooks/use-indicator";
+import { cn } from "@/lib/utils/cn";
+import { cva } from "class-variance-authority";
+
+const inlineEditIndicatorVariants = cva(
+  "absolute top-2 left-3 z-50 size-2 rounded-full bg-primary",
+  {
+    variants: {
+      status: {
+        idle: "bg-transparent",
+        pending: "bg-primary",
+        success: "bg-green-500",
+        error: "bg-destructive",
+      } satisfies Record<IndicatorStatus, string>,
+    },
+    defaultVariants: {
+      status: "idle",
+    },
+  },
+);
+
+export function Indicator() {
+  const { status } = useIndicator();
+
+  return <div className={cn(inlineEditIndicatorVariants({ status }))} />;
+}

package/src/components/header/mobile-nav-switcher.client.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { cn } from "@/lib/entry";
+import { SidebarTrigger, useSidebar } from "../entry.client";
+
+export function HeaderTopbarMobileNavSwitcher({
+  className,
+  ...props
+}: React.HtmlHTMLAttributes<HTMLButtonElement>) {
+  const { isMobile } = useSidebar();
+
+  return (
+    <SidebarTrigger
+      {...props}
+      data-is-mobile={!!isMobile}
+      className={cn(
+        "h-full w-12 rounded-none border-r p-0 data-[is-mobile=false]:hidden",
+        className,
+      )}
+    />
+  );
+}

package/src/components/header/top-bar.client.tsx

@@ -0,0 +1,134 @@
+import { cn } from "@/lib/utils/cn";
+import type React from "react";
+import { Fragment } from "react";
+import { Icons } from "../common/icons";
+import { Badge } from "../ui/badge";
+import { HeaderTopbarBackButton } from "./back-button.client";
+import {
+  HeaderBreadcrumbs,
+  HeaderBreadcrumbsDesktopList,
+  HeaderBreadcrumbsDropdownMenu,
+  HeaderBreadcrumbsDropdownMenuItem,
+  HeaderBreadcrumbSeparator,
+  HeaderBreadcrumbsLink,
+  HeaderBreadcrumbsMobileList,
+  type HeaderBreadcrumb,
+} from "./breadcrumbs.client";
+import { Indicator } from "./indicator.client";
+import { HeaderTopbarMobileNavSwitcher } from "./mobile-nav-switcher.client";
+
+/**
+ * Topbar component
+ */
+export type TopbarProps = {
+  children: React.ReactNode;
+};
+
+export function Topbar({ children }: TopbarProps) {
+  return (
+    <nav className="flex h-[var(--header-top-bar-height)] items-center justify-between overflow-x-auto border-b">
+      <Indicator />
+
+      {children}
+    </nav>
+  );
+}
+
+/**
+ * Topbar title component
+ */
+export type TopbarTitleProps = React.HTMLAttributes<HTMLElement> & {
+  isDeleted?: boolean;
+  badge?: React.ReactNode;
+  breadcrumbs: HeaderBreadcrumb[];
+};
+
+export function TopbarTitle({
+  breadcrumbs,
+  badge,
+  isDeleted,
+  className,
+  ...props
+}: TopbarTitleProps) {
+  return (
+    <div {...props} className={cn("flex h-full items-center gap-4", className)}>
+      <div className="h-full">
+        <HeaderTopbarBackButton />
+        <HeaderTopbarMobileNavSwitcher />
+      </div>
+
+      <HeaderBreadcrumbs>
+        <HeaderBreadcrumbsMobileList>
+          {breadcrumbs.length > 1 && (
+            <>
+              <HeaderBreadcrumbsDropdownMenu>
+                {breadcrumbs.slice(0, -1).map((breadcrumb, index) => (
+                  <HeaderBreadcrumbsDropdownMenuItem key={index} breadcrumb={breadcrumb} />
+                ))}
+              </HeaderBreadcrumbsDropdownMenu>
+
+              <HeaderBreadcrumbSeparator />
+            </>
+          )}
+
+          {breadcrumbs.slice(-1).map((breadcrumb, index, array) => (
+            <Fragment key={index}>
+              <HeaderBreadcrumbsLink breadcrumb={breadcrumb} />
+              {index < array.length - 1 && <HeaderBreadcrumbSeparator />}
+            </Fragment>
+          ))}
+        </HeaderBreadcrumbsMobileList>
+
+        <HeaderBreadcrumbsDesktopList>
+          {breadcrumbs.length > 2 && (
+            <>
+              <HeaderBreadcrumbsDropdownMenu>
+                {breadcrumbs.slice(0, -2).map((breadcrumb, index) => (
+                  <HeaderBreadcrumbsDropdownMenuItem key={index} breadcrumb={breadcrumb} />
+                ))}
+              </HeaderBreadcrumbsDropdownMenu>
+
+              <HeaderBreadcrumbSeparator />
+            </>
+          )}
+
+          {breadcrumbs.slice(-2).map((breadcrumb, index, array) => (
+            <Fragment key={index}>
+              <HeaderBreadcrumbsLink breadcrumb={breadcrumb} />
+              {index < array.length - 1 && <HeaderBreadcrumbSeparator />}
+            </Fragment>
+          ))}
+        </HeaderBreadcrumbsDesktopList>
+      </HeaderBreadcrumbs>
+
+      <span className="hidden md:ml-4 md:block">
+        {isDeleted ? (
+          <Badge variant="destructive">
+            <Icons.archive className="mr-2 h-3 w-3" />
+            Archief
+          </Badge>
+        ) : (
+          badge
+        )}
+      </span>
+    </div>
+  );
+}
+
+/**
+ * Topbar tools component
+ */
+export type TopbarToolsProps = React.HTMLAttributes<HTMLElement> & {
+  children: React.ReactNode;
+};
+
+export function TopbarTools({ children, className, ...props }: TopbarToolsProps) {
+  return (
+    <div
+      {...props}
+      className={cn("flex h-full items-center justify-end gap-4 px-6 py-2", className)}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/layouts/admin-content.client.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { cn } from "@/lib/entry";
+import { ComponentProps } from "react";
+import { useSidebar } from "../entry.client";
+import { ScrollArea } from "../ui/scroll-area";
+
+export function AdminContent({ children, className, ...props }: ComponentProps<typeof ScrollArea>) {
+  const { isMobile, open } = useSidebar();
+
+  return (
+    <ScrollArea {...props} className={cn("h-[100dvh] basis-full", className)}>
+      <div
+        className={cn(
+          "h-full max-w-[100vw]",
+          isMobile !== undefined && !isMobile && open && "max-w-[calc(100vw-var(--sidebar-width))]",
+        )}
+      >
+        {children}
+      </div>
+    </ScrollArea>
+  );
+}

package/src/components/layouts/admin-layout.server.tsx

@@ -0,0 +1,31 @@
+import "server-cli-only";
+
+import { getSession } from "@/modules/auth/lib/helpers.server";
+import { TDatabaseSchema } from "@/modules/config/db/types";
+import { getTulip, GetTulipParams } from "@/modules/config/lib/resolve.server";
+import { getPaths } from "@/modules/config/paths/get.server";
+import { PropsWithChildren } from "react";
+import { AdminContent } from "./admin-content.client";
+import { AdminSidebarProvider } from "./admin-sidebar-context.client";
+import { AdminSidebar } from "./admin-sidebar.client";
+
+export async function AdminLayout<TSchema extends TDatabaseSchema>({
+  config,
+  children,
+}: PropsWithChildren<GetTulipParams<TSchema>>) {
+  const tulip = await getTulip({ config });
+  const session = await getSession(tulip);
+
+  const paths = await getPaths(tulip);
+
+  return (
+    <AdminSidebarProvider
+      value={{ paths, session }}
+      className="max-h-[100dvh] overflow-hidden border"
+    >
+      <AdminSidebar />
+
+      <AdminContent>{children}</AdminContent>
+    </AdminSidebarProvider>
+  );
+}

package/src/components/layouts/admin-loading.tsx

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from "react";
+import { Skeleton } from "../ui/skeleton";
+
+export function AdminLoading(props: PropsWithChildren) {
+  return (
+    <div className="h-dvh">
+      <Skeleton className="h-[var(--header-top-bar-height)] w-full rounded-none border-b" />
+      {props.children}
+    </div>
+  );
+}