create-tulip-app 0.6.1 → 0.8.2

package/dist/templates/basic/src/app/admin/drive/_components/drive-header.client.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+import { pointerIntersection } from "@dnd-kit/collision";
+import { useDroppable } from "@dnd-kit/react";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { InlineCommandMenu } from "@tulip-systems/core/commands/client";
+import { BreadcrumbItem, BreadcrumbLink, BreadcrumbPage } from "@tulip-systems/core/components";
+import {
+  Header,
+  type HeaderBreadcrumb,
+  HeaderBreadcrumbSeparator,
+  HeaderBreadcrumbs,
+  HeaderBreadcrumbsDesktopList,
+  HeaderBreadcrumbsDropdownMenu,
+  HeaderBreadcrumbsDropdownMenuItem,
+  HeaderBreadcrumbsLink,
+  HeaderBreadcrumbsMobileList,
+  HeaderTopbarBackButton,
+  HeaderTopbarMobileNavSwitcher,
+  ToggleGroup,
+  ToggleGroupItem,
+  Topbar,
+  TopbarTools,
+} from "@tulip-systems/core/components/client";
+import { cn } from "@tulip-systems/core/lib";
+import { LayoutGridIcon, StretchVerticalIcon } from "lucide-react";
+import Link from "next/link";
+import { createSerializer, useQueryStates } from "nuqs";
+import { type ComponentProps, Fragment } from "react";
+import { orpc } from "@/server/router/client";
+import { driveGlobalCommands } from "../_config/commands.js";
+import { driveSearchParams } from "../_lib/search-params.js";
+import { useDriveContext } from "./drive-context.client.js";
+
+/**
+ * Drive  Header
+ */
+export function DriveHeader({
+  namespace,
+  breadcrumbs,
+  ...props
+}: ComponentProps<"div"> & { namespace: string; breadcrumbs?: DriveHeaderBreadCrumb[] }) {
+  return (
+    <Header {...props}>
+      <Topbar>
+        <div className="flex h-full items-center gap-4">
+          <div className="h-full">
+            <HeaderTopbarBackButton />
+            <HeaderTopbarMobileNavSwitcher />
+          </div>
+
+          <DriveHeaderBreadCrumbs namespace={namespace} breadcrumbs={breadcrumbs} />
+        </div>
+
+        <DriveViewSwitcher />
+
+        <TopbarTools>
+          <InlineCommandMenu data={{ namespace }} commands={driveGlobalCommands} />
+        </TopbarTools>
+      </Topbar>
+    </Header>
+  );
+}
+
+/**
+ * Drive Page Topbar
+ */
+export function DrivePageTopbar({ className, ...props }: ComponentProps<"div">) {
+  const { namespace } = useDriveContext();
+
+  return (
+    <div
+      {...props}
+      className={cn("flex items-center justify-between overflow-x-auto pt-3", className)}
+    >
+      <DriveHeaderBreadCrumbs namespace={namespace} />
+
+      <DriveViewSwitcher />
+
+      <InlineCommandMenu data={{ namespace }} commands={driveGlobalCommands} />
+    </div>
+  );
+}
+
+/**
+ * Drive view switcher
+ */
+export function DriveViewSwitcher() {
+  const [query, setQuery] = useQueryStates(driveSearchParams);
+
+  return (
+    <ToggleGroup
+      type="single"
+      variant="outline"
+      value={query.view}
+      onValueChange={(value) => setQuery({ view: value ? (value as "list" | "grid") : null })}
+    >
+      <ToggleGroupItem value="grid" aria-label="Toggle grid view">
+        <LayoutGridIcon />
+      </ToggleGroupItem>
+
+      {/* <Separator orientation="vertical" className="mx-1" /> */}
+
+      <ToggleGroupItem value="list" aria-label="Toggle list view">
+        <StretchVerticalIcon />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  );
+}
+
+/**
+ * Drive  Header Breadcrumbs
+ */
+type DriveHeaderBreadCrumb = HeaderBreadcrumb & { droppable?: boolean };
+
+function DriveHeaderBreadCrumbs(props: {
+  namespace: string;
+  breadcrumbs?: DriveHeaderBreadCrumb[];
+}) {
+  const { namespace } = props;
+  const [query] = useQueryStates(driveSearchParams);
+  const serialize = createSerializer(driveSearchParams);
+
+  const parents = useSuspenseQuery(
+    orpc.drive.getFolderParents.queryOptions({ input: { id: query.parentId, namespace } }),
+  );
+
+  const breadcrumbs = [
+    ...(props.breadcrumbs ?? []),
+    {
+      label: "Drive",
+      href: serialize({ ...query, parentId: null }),
+      droppable: true,
+    },
+    ...(parents.data?.flatMap(({ name, id }) => ({
+      label: name,
+      href: serialize({ ...query, parentId: id }),
+      droppable: true,
+    })) ?? []),
+  ] satisfies DriveHeaderBreadCrumb[];
+
+  return (
+    <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}>
+            {breadcrumb.droppable ? (
+              <DriveHeaderBreadcrumbsLink breadcrumb={breadcrumb} />
+            ) : (
+              <HeaderBreadcrumbsLink breadcrumb={breadcrumb} />
+            )}
+            {index < array.length - 1 && <HeaderBreadcrumbSeparator />}
+          </Fragment>
+        ))}
+      </HeaderBreadcrumbsDesktopList>
+    </HeaderBreadcrumbs>
+  );
+}
+
+function DriveHeaderBreadcrumbsLink(props: { breadcrumb: DriveHeaderBreadCrumb }) {
+  const id = props.breadcrumb.href?.split("=")[1] ?? null;
+  const [{ parentId }] = useQueryStates(driveSearchParams);
+
+  const { ref, isDropTarget } = useDroppable({
+    id: id ?? "drive",
+    collisionDetector: pointerIntersection,
+  });
+
+  return (
+    <BreadcrumbItem
+      ref={ref}
+      data-over={isDropTarget && parentId !== id}
+      className="data-[over=true]:bg-primary/35"
+    >
+      {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>
+  );
+}

package/dist/templates/basic/src/app/admin/drive/_components/drive-sidebar.tsx

@@ -0,0 +1,61 @@
+// "use client";
+
+// import { asyncDataLoaderFeature, hotkeysCoreFeature } from "@headless-tree/core";
+// import { useTree } from "@headless-tree/react";
+
+// import { AppRouter } from "@/trpc/router";
+// import {
+//   Sidebar,
+//   SidebarContent,
+//   Tree,
+//   TreeItem,
+//   TreeItemLabel,
+// } from "@tulip-systems/core/components/client";
+// import { useTRPCClient } from "@tulip-systems/core/config/client";
+// import { isFolder, Node } from "@tulip-systems/core/storage";
+
+// const rootItemId = "--root--";
+// const indent = 20;
+
+// export default function DriveSidebar() {
+//   const trpcClient = useTRPCClient<AppRouter>();
+
+//   const tree = useTree<Node>({
+//     indent,
+//     rootItemId,
+//     getItemName: (item) => item.getItemData()?.name,
+//     isItemFolder: (node) => isFolder(node.getItemData() ?? {}),
+//     dataLoader: {
+//       getItem: async (id) => {
+//         const node = await trpcClient.drive.getNodeById.query({ id });
+//         if (!node) throw new Error("Error in getItem");
+
+//         return { ...node, children: node?.children.flatMap(({ id }) => id) };
+//       },
+//       getChildren: async (itemId) => {
+//         const children = await trpcClient.drive.getNodesByParentId.query({
+//           parentId: itemId === rootItemId ? null : itemId,
+//         });
+
+//         return children.filter(isFolder).flatMap(({ id }) => id);
+//       },
+//     },
+//     features: [asyncDataLoaderFeature, hotkeysCoreFeature],
+//   });
+
+//   return (
+//     <Sidebar className="ml-[var(--sidebar-width)] mt-[var(--header-top-bar-height)]">
+//       <SidebarContent className="px-2 py-4">
+//         <Tree indent={indent} tree={tree}>
+//           {tree.getItems().map((item) => {
+//             return (
+//               <TreeItem key={item.getId()} item={item}>
+//                 <TreeItemLabel className="bg-transparent" />
+//               </TreeItem>
+//             );
+//           })}
+//         </Tree>
+//       </SidebarContent>
+//     </Sidebar>
+//   );
+// }

package/dist/templates/basic/src/app/admin/drive/_components/drive-view.client.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { TableLayout, TableSkeleton } from "@tulip-systems/core/data-tables";
+import { cn } from "@tulip-systems/core/lib";
+import { useQueryStates } from "nuqs";
+import { type ComponentProps, Suspense } from "react";
+import { driveSearchParams } from "../_lib/search-params.js";
+import { DriveGrid, DriveGridLoading } from "./grid.client.js";
+import { DriveList } from "./list.client.js";
+import { DriveToolbar } from "./toolbars.js";
+
+/**
+ * DriveGridView
+ */
+export function DriveView({
+  className,
+  ...props
+}: ComponentProps<"div"> & Pick<ComponentProps<typeof DriveToolbar>, "filtersVisibility">) {
+  const [{ view }] = useQueryStates(driveSearchParams);
+
+  return (
+    <div {...props} className={cn("flex h-full flex-1 flex-col gap-y-12", className)}>
+      {view === "grid" && (
+        <Suspense fallback={<DriveGridLoading />}>
+          <TableLayout>
+            <DriveToolbar />
+            <DriveGrid />
+          </TableLayout>
+        </Suspense>
+      )}
+      {view === "list" && (
+        <Suspense fallback={<TableSkeleton />}>
+          <DriveList />
+        </Suspense>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Drive Content
+ */
+export function DriveContent({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div {...props} className={cn("space-y-6", className)}>
+      {props.children}
+    </div>
+  );
+}

package/dist/templates/basic/src/app/admin/drive/_components/grid.client.tsx

@@ -0,0 +1,372 @@
+"use client";
+
+import { useDraggable, useDroppable } from "@dnd-kit/react";
+import { useSuspenseInfiniteQuery } from "@tanstack/react-query";
+import {
+  ContextCommandMenu,
+  ContextCommandMenuContent,
+  ContextCommandMenuTrigger,
+  DropdownCommandMenu,
+} from "@tulip-systems/core/commands/client";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  EmptyPage,
+  EmptyPageTitle,
+  findStatus,
+  Skeleton,
+} from "@tulip-systems/core/components";
+import { tableSearchParams } from "@tulip-systems/core/data-tables";
+import { cn } from "@tulip-systems/core/lib";
+import {
+  type FileNode,
+  type FolderNode,
+  getFileUrl,
+  type ImageVariant,
+  isFile,
+  isFolder,
+} from "@tulip-systems/core/storage";
+import { FolderIcon } from "lucide-react";
+import { useInView } from "motion/react";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { useQueryStates } from "nuqs";
+import {
+  type ComponentProps,
+  type PropsWithChildren,
+  useDeferredValue,
+  useEffect,
+  useMemo,
+  useRef,
+} from "react";
+import { orpc } from "@/server/router/client";
+import { driveCommands } from "../_config/commands.js";
+import { nodeSubtypeConfig, nodeSubtypeVariants } from "../_config/types.js";
+import { driveFilterSearchParams, driveSearchParams } from "../_lib/search-params.js";
+import { useDriveContext } from "./drive-context.client.js";
+
+/**
+ * DriveGrid
+ */
+export function DriveGrid(props: ComponentProps<"div">) {
+  const [filters] = useQueryStates(driveFilterSearchParams);
+  const [{ parentId }] = useQueryStates(driveSearchParams);
+  const { namespace, where } = useDriveContext();
+
+  const [query] = useQueryStates(tableSearchParams);
+  const input = useDeferredValue({
+    ...query,
+    filters: { ...filters, ...where, parentId, namespace },
+  });
+  // const { data } = useSuspenseQuery(orpc.drive.getNodesByParentId.queryOptions({ input }));
+
+  const response = useSuspenseInfiniteQuery(
+    orpc.drive.list.infiniteOptions({
+      initialPageParam: 0,
+      input: (cursor: number | undefined) => ({ ...input, cursor }),
+      getNextPageParam: ({ pagination }) => pagination.nextCursor,
+      getPreviousPageParam: ({ pagination }) => pagination.previousCursor,
+    }),
+  );
+
+  const queryData = useMemo(
+    () => response.data.pages.flatMap(({ data }) => data) ?? [],
+    [response.data],
+  );
+
+  return (
+    <DriveGridContent {...props}>
+      {queryData.length > 0 ? (
+        queryData
+          .filter(Boolean)
+          .filter((node) => !node.hidden)
+          .flatMap((node) => {
+            if (node.isPending) {
+              return <DriveGridCardSkeleton key={node.id} />;
+            }
+
+            if (isFolder(node)) {
+              const folder = node as FolderNode;
+              return <DriveGridFolderCard key={folder.id} folder={folder} />;
+            }
+
+            if (isFile(node)) {
+              const file = node as FileNode;
+              return <DriveGridFileCard key={file.id} file={file} />;
+            }
+
+            return null;
+          })
+      ) : (
+        <EmptyPage className="col-span-full min-h-[80dvh]">
+          <EmptyPageTitle>Geen resultaten gevonden</EmptyPageTitle>
+        </EmptyPage>
+      )}
+
+      {response.isFetchingNextPage &&
+        Array.from({ length: response.data.pages[0]?.pagination.limit ?? 0 }).map((_, index) => (
+          <DriveGridCardSkeleton key={index} />
+        ))}
+
+      <DriveGridBottombar
+        hasNextPage={response.hasNextPage}
+        fetchNextPage={response.fetchNextPage}
+        isFetching={response.isFetching}
+        isFetchingNextPage={response.isFetchingNextPage}
+      />
+    </DriveGridContent>
+  );
+}
+
+/**
+ * DriveGridContent
+ */
+function DriveGridContent(props: PropsWithChildren) {
+  return (
+    <div className="grid grid-cols-1 gap-5 md:grid-cols-[repeat(auto-fill,minmax(13rem,1fr))]">
+      {props.children}
+    </div>
+  );
+}
+
+/**
+ * Folder card
+ */
+function DriveGridFolderCard({ folder }: { folder: FolderNode }) {
+  const router = useRouter();
+
+  const droppable = useDroppable({ id: folder.id });
+  const draggable = useDraggable({ id: folder.id });
+
+  if (folder.hidden) return null;
+
+  return (
+    <ContextCommandMenu>
+      <ContextCommandMenuTrigger asChild>
+        <Card
+          ref={draggable.ref}
+          data-dragging={draggable.isDragging}
+          className="group @container relative flex max-h-52 max-w-full cursor-pointer flex-col items-center gap-3 overflow-hidden bg-transparent p-2 hover:bg-muted/70 active:bg-muted data-[dragging=true]:opacity-50"
+          // onMouseOver={() =>
+          //   queryClient.prefetchQuery(
+          //     trpc.drive.getNodesByParentId.queryOptions({ parentId: folder.id, namespace }),
+          //   )
+          // }
+          onDoubleClick={() => router.push(`?parentId=${folder.id}`)}
+        >
+          <div
+            ref={droppable.ref}
+            data-over={droppable.isDropTarget && !draggable.isDragging}
+            className="absolute inset-0 -z-10 data-[over=true]:bg-primary/35"
+          />
+
+          <CardHeader className="flex w-full flex-row items-center justify-between gap-2.5 p-0 px-1.5">
+            <FolderIcon className="w-4 min-w-4 fill-foreground" />
+
+            <CardTitle className="w-full truncate text-sm leading-[1.2]" title={folder.name}>
+              {folder.name}
+            </CardTitle>
+
+            <DropdownCommandMenu data={folder} commands={driveCommands} />
+          </CardHeader>
+
+          <CardContent className="h-52 w-full overflow-hidden rounded-lg bg-background/50 p-0 group-hover:bg-background">
+            <div className="flex h-full w-full items-center justify-center">
+              <FolderIcon className="size-12 fill-foreground" />
+            </div>
+          </CardContent>
+        </Card>
+      </ContextCommandMenuTrigger>
+
+      <ContextCommandMenuContent data={folder} commands={driveCommands} />
+    </ContextCommandMenu>
+  );
+}
+
+/**
+ * File card
+ */
+export function DriveGridFileCard({ file }: { file: FileNode }) {
+  const { id } = file;
+
+  const { ref, isDragging } = useDraggable({ id });
+
+  const subtype = findStatus(nodeSubtypeConfig, file.subtype);
+  const Icon = subtype?.icon;
+  if (file.hidden) return null;
+
+  return (
+    <ContextCommandMenu>
+      <ContextCommandMenuTrigger asChild>
+        <Card
+          key={id}
+          ref={ref}
+          data-dragging={isDragging}
+          className="@container flex max-h-52 max-w-full cursor-pointer flex-col items-center gap-3 overflow-hidden p-2 hover:bg-muted/70 active:bg-muted data-[dragging=true]:opacity-50"
+          onDoubleClick={() => window.open(getFileUrl(id), "_blank")}
+        >
+          <CardHeader className="flex w-full flex-row items-center justify-between gap-2.5 p-0 px-1.5">
+            {Icon && (
+              <Icon
+                className={nodeSubtypeVariants({ status: file.subtype, className: "size-4" })}
+              />
+            )}
+
+            <CardTitle className="w-full truncate text-sm leading-[1.2]" title={file.name}>
+              {file.name}
+            </CardTitle>
+
+            <DropdownCommandMenu data={file} commands={driveCommands} />
+          </CardHeader>
+
+          <CardContent className="h-52 w-full overflow-hidden rounded-lg bg-background p-0">
+            {file.subtype === "image" ? (
+              <Image
+                src={getFileUrl(id)}
+                alt={file.name}
+                width={200}
+                height={200}
+                className="h-full w-full object-cover"
+                loader={({ width }) =>
+                  getFileUrl(id, {
+                    variant: `preview-${width}` as ImageVariant,
+                  })
+                }
+              />
+            ) : (
+              <div className="flex h-full w-full items-center justify-center">
+                {Icon && (
+                  <Icon
+                    className={nodeSubtypeVariants({ status: file.subtype, className: "size-12" })}
+                  />
+                )}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </ContextCommandMenuTrigger>
+
+      <ContextCommandMenuContent data={file} commands={driveCommands} />
+    </ContextCommandMenu>
+  );
+}
+
+/**
+ * Infinite table bottombar
+ */
+export function DriveGridBottombar(props: {
+  hasNextPage: boolean;
+  fetchNextPage: () => void;
+  isFetching: boolean;
+  isFetchingNextPage: boolean;
+}) {
+  const scrollRef = useRef(null);
+  const isInView = useInView(scrollRef);
+
+  useEffect(() => {
+    if (isInView && props.hasNextPage && !props.isFetching && !props.isFetchingNextPage) {
+      props.fetchNextPage();
+    }
+  }, [
+    isInView,
+    props.fetchNextPage,
+    props.hasNextPage,
+    props.isFetching,
+    props.isFetchingNextPage,
+  ]);
+
+  return (
+    <div className="relative col-span-full">
+      <div ref={scrollRef} className="absolute bottom-0 -z-50 min-h-[500px] bg-primary" />
+    </div>
+  );
+}
+
+/**
+ * DriveGridSkeleton
+ */
+export function DriveGridLoading({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div {...props} className={cn("flex flex-col gap-y-12", className)}>
+      <DriveGridContent>
+        {Array.from({ length: 12 }).map((_, index) => (
+          <DriveGridCardSkeleton key={index} />
+        ))}
+      </DriveGridContent>
+    </div>
+  );
+}
+
+/**
+ * Card Skeleton
+ */
+
+function DriveGridCardSkeleton() {
+  return (
+    <Card className="flex max-h-52 cursor-pointer flex-col items-center gap-3 overflow-hidden bg-muted/70 p-3">
+      <Skeleton className="h-7" />
+      <CardContent className="h-52 w-full overflow-hidden rounded-lg bg-background p-0" />
+    </Card>
+  );
+}
+
+/**
+ * Drive Grid Back Droppable
+ */
+// function DriveGridBackDroppable({ parentId }: { parentId: string }) {
+//   const [isVisible, setVisible] = useState(false);
+
+//   const { ref, isDropTarget } = useDroppable({ id: parentId });
+
+//   useDragDropMonitor({
+//     onDragStart: () => setVisible(true),
+//     onDragEnd: () => setVisible(false),
+//   });
+
+//   return (
+//     <AnimatePresence>
+//       {isVisible && (
+//         <div
+//           ref={ref}
+//           data-over={isDropTarget}
+//           className="border-primary/35 data-[over=true]:bg-primary/35 absolute left-0 right-0 top-0 z-50 flex h-[var(--header-top-bar-height)] justify-center border"
+//         />
+//       )}
+//     </AnimatePresence>
+//   );
+// }
+
+/**
+ * Drive Grid Header
+ */
+// export function DriveGridHeader() {
+//   const trpc = useTRPC<AppRouter>();
+//   const [{ parentId }] = useQueryStates(driveGridSearchParams);
+//   const { namespace } = useDriveGridContext();
+
+//   const parents = useSuspenseQuery(
+//     trpc.drive.getFolderParents.queryOptions({ id: parentId, namespace }),
+//   );
+
+//   return (
+//     <Header>
+//       <Topbar>
+//         <TopbarTitle
+//           breadcrumbs={[
+//             { label: "Drive", href: "/admin/drive" },
+//             ...(parents.data?.flatMap((node) => ({
+//               label: node.name,
+//               href: `?parentId=${node.id}`,
+//             })) ?? []),
+//           ]}
+//         />
+
+//         <TopbarTools>
+//           <InlineCommandMenu data={{ parentId, namespace }} commands={driveGlobalCommands} />
+//         </TopbarTools>
+//       </Topbar>
+//     </Header>
+//   );
+// }