@tulip-systems/create-app 0.11.1

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

@@ -0,0 +1,122 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { InlineCommandMenu } from "@tulip-systems/commands/client";
+import { useDriveNavigation } from "@tulip-systems/drive/client";
+import {
+  LocalDriveHeader,
+  LocalDriveHeaderBreadcrumbs,
+  LocalDriveHeaderTools,
+  LocalDriveToolbar,
+  LocalDriveToolbarBreadcrumbs,
+  LocalDriveToolbarTools,
+  LocalDriveViewSwitcher,
+  useLocalDriveContext,
+} from "@tulip-systems/drive-local/client";
+import type { ComponentProps } from "react";
+import { orpc } from "@/server/router/client";
+import { driveFilesUploadCommand, driveFoldersCreateCommand } from "../_config/commands";
+
+type DriveNavigationBreadcrumb = { label: string; href: string };
+
+type DriveNavigationProps = {
+  breadcrumbs?: DriveNavigationBreadcrumb[];
+};
+
+export function DriveHeader(props: DriveNavigationProps) {
+  const { namespace } = useLocalDriveContext();
+  const { parentId } = useDriveNavigation();
+
+  const parents = useSuspenseQuery(
+    orpc.drive.getFolderParents.queryOptions({
+      input: { id: parentId, namespace },
+    }),
+  );
+
+  return (
+    <LocalDriveHeader>
+      <LocalDriveHeaderBreadcrumbs
+        breadcrumbs={[
+          ...(props.breadcrumbs?.map(
+            (breadcrumb) =>
+              ({
+                ...breadcrumb,
+                node: false,
+              }) as const,
+          ) ?? []),
+          {
+            node: true,
+            label: "Drive",
+            parentId: null,
+          },
+          ...(parents.data?.flatMap(
+            ({ name, id }) =>
+              ({
+                node: true,
+                label: name,
+                parentId: id,
+              }) as const,
+          ) ?? []),
+        ]}
+      />
+      <LocalDriveViewSwitcher />
+      <LocalDriveHeaderTools>
+        <InlineCommandMenu
+          data={{ namespace }}
+          commands={[driveFoldersCreateCommand, driveFilesUploadCommand]}
+        />
+      </LocalDriveHeaderTools>
+    </LocalDriveHeader>
+  );
+}
+
+export function DriveToolbar({
+  breadcrumbs,
+  ...props
+}: ComponentProps<typeof LocalDriveToolbar> & DriveNavigationProps) {
+  const { namespace } = useLocalDriveContext();
+  const { parentId } = useDriveNavigation();
+
+  const parents = useSuspenseQuery(
+    orpc.drive.getFolderParents.queryOptions({
+      input: { id: parentId, namespace },
+    }),
+  );
+
+  return (
+    <LocalDriveToolbar {...props}>
+      <LocalDriveToolbarBreadcrumbs
+        breadcrumbs={[
+          ...(breadcrumbs?.map(
+            (breadcrumb: DriveNavigationBreadcrumb) =>
+              ({
+                ...breadcrumb,
+                node: false,
+              }) as const,
+          ) ?? []),
+          {
+            node: true,
+            label: "Drive",
+            parentId: null,
+          },
+          ...(parents.data?.flatMap(
+            ({ name, id }) =>
+              ({
+                node: true,
+                label: name,
+                parentId: id,
+              }) as const,
+          ) ?? []),
+        ]}
+      />
+      <LocalDriveViewSwitcher />
+
+      <LocalDriveToolbarTools>
+        <InlineCommandMenu
+          data={{ namespace }}
+          commands={[driveFoldersCreateCommand, driveFilesUploadCommand]}
+        />
+      </LocalDriveToolbarTools>
+    </LocalDriveToolbar>
+  );
+}

package/dist/templates/spark/src/app/admin/drive/_components/provider.client.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import { useQueryClient } from "@tanstack/react-query";
+import type { Permission } from "@tulip-systems/auth/permissions";
+import { useAction } from "@tulip-systems/core/client";
+import type { DriveNavigationConfig } from "@tulip-systems/drive/client";
+import { type LocalDriveFiltersInput, localDriveTableSorts } from "@tulip-systems/drive-local";
+import {
+  LocalDriveProvider,
+  type LocalDriveProviderProps,
+} from "@tulip-systems/drive-local/client";
+import { normalizeFiltersSearchParams, offsetPagination } from "@tulip-systems/query";
+import { usePagination, useSorting } from "@tulip-systems/query/client";
+import { useQueryStates } from "nuqs";
+import { type ComponentProps, useDeferredValue } from "react";
+import { orpc } from "@/server/router/client";
+import { driveFilterSearchParams } from "../_lib/search-params";
+import { driveUploadClient } from "../_lib/upload.client";
+
+type DriveProviderProps = ComponentProps<"div"> &
+  Omit<
+    LocalDriveProviderProps,
+    "driveUploadClient" | "meta" | "namespace" | "parentId" | "navigation"
+  > & {
+    namespace: string;
+    parentId: string | null;
+    navigation: DriveNavigationConfig;
+    where?: Omit<LocalDriveFiltersInput, "namespace" | "parentId">;
+    permission?: Permission;
+  };
+
+export function DriveProvider({
+  namespace,
+  parentId,
+  navigation,
+  where,
+  children,
+  ...props
+}: DriveProviderProps) {
+  const queryClient = useQueryClient();
+
+  const pagination = usePagination(offsetPagination);
+  const sorting = useSorting(localDriveTableSorts);
+
+  const [filters] = useQueryStates(driveFilterSearchParams);
+  const normalizedFilters = normalizeFiltersSearchParams({ ...filters, ...where });
+
+  const input = useDeferredValue({
+    pagination: pagination.input,
+    sorts: sorting.input,
+    filters: { ...normalizedFilters, parentId, namespace },
+  });
+
+  const queryOptions = orpc.drive.listTree.infiniteOptions({
+    initialPageParam: 0,
+    input: (page: number) => ({
+      ...input,
+      pagination: { ...input.pagination, page },
+    }),
+    getNextPageParam: ({ pagination }) => pagination.nextPage,
+    getPreviousPageParam: ({ pagination }) => pagination.previousPage,
+  });
+  const queryKey = queryOptions.queryKey;
+
+  const moveNode = useAction(
+    orpc.drive.moveNode.mutationOptions({
+      onMutate: async (data) => {
+        await queryClient.cancelQueries({ queryKey });
+
+        const previousNodes = queryClient.getQueryData(queryKey);
+
+        queryClient.setQueryData(queryKey, (old) => {
+          if (!old) return old;
+
+          return {
+            ...old,
+            pages: old.pages.map((page) => ({
+              ...page,
+              data: page.data.filter(({ id }) => id !== data.id),
+            })),
+          };
+        });
+
+        return { previousNodes };
+      },
+      onError: (err, _, context) => {
+        console.error("moveNode error: ", err);
+        queryClient.setQueryData(queryKey, context?.previousNodes);
+      },
+      onSettled: () => {
+        queryClient.invalidateQueries({ queryKey });
+      },
+    }),
+  );
+
+  return (
+    <LocalDriveProvider
+      {...props}
+      namespace={namespace}
+      parentId={parentId}
+      navigation={navigation}
+      meta={{ where }}
+      driveUploadClient={driveUploadClient}
+      onMove={(input) => moveNode.mutate(input)}
+      optimistic={{
+        add: (node) => {
+          queryClient.setQueryData(queryKey, (old) => {
+            if (!old) return old;
+
+            const firstPage = old.pages[0];
+            if (!firstPage) return old;
+
+            return {
+              ...old,
+              pages: [
+                {
+                  ...firstPage,
+                  data: [node, ...(firstPage.data ?? [])],
+                },
+                ...old.pages.slice(1),
+              ],
+            };
+          });
+        },
+        replace: ({ id, newValue }) => {
+          queryClient.setQueryData(queryKey, (old) => {
+            if (!old) return old;
+
+            return {
+              ...old,
+              pages: old.pages.map((page) => ({
+                ...page,
+                data: page.data.map((node) => (node.id === id ? newValue : node)),
+              })),
+            };
+          });
+        },
+        remove: (ids) => {
+          const idsToRemove = new Set(ids);
+
+          queryClient.setQueryData(queryKey, (old) => {
+            if (!old) return old;
+
+            return {
+              ...old,
+              pages: old.pages.map((page) => ({
+                ...page,
+                data: page.data.filter(({ id }) => !idsToRemove.has(id)),
+              })),
+            };
+          });
+        },
+        cancel: () => queryClient.cancelQueries({ queryKey }),
+        invalidate: () => queryClient.invalidateQueries({ queryKey }),
+      }}
+    >
+      {children}
+    </LocalDriveProvider>
+  );
+}

package/dist/templates/spark/src/app/admin/drive/_components/toolbars.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { TableToolbar, TableToolbarList } from "@tulip-systems/data-tables";
+import { localDriveFilters } from "@tulip-systems/drive-local";
+import {
+  offsetPaginationSearchParams,
+  parseFiltersVisibility,
+  resolveFilterDescriptors,
+  resolveFilteringSearchParams,
+} from "@tulip-systems/query";
+import { FilterCombobox } from "@tulip-systems/query/client";
+import { Input } from "@tulip-systems/ui/input";
+import { FileIcon, FolderIcon } from "lucide-react";
+import { useQueryStates } from "nuqs";
+import { type PropsWithChildren, Suspense, startTransition } from "react";
+
+const nodesFiltersDescriptors = resolveFilterDescriptors(localDriveFilters);
+const nodesTableSearchParams = {
+  ...offsetPaginationSearchParams,
+  ...resolveFilteringSearchParams(localDriveFilters),
+};
+
+const filtersVisibilityConfig = ["types"] satisfies (keyof typeof nodesFiltersDescriptors)[];
+
+export function DriveToolbar(
+  props: PropsWithChildren<{
+    filtersVisibility?: Partial<Record<(typeof filtersVisibilityConfig)[number], boolean>>;
+  }>,
+) {
+  const visibilityState = parseFiltersVisibility(filtersVisibilityConfig, props.filtersVisibility);
+
+  const [query, setQuery] = useQueryStates(nodesTableSearchParams, {
+    shallow: false,
+    startTransition,
+  });
+  const defaultValue = query.search ?? "";
+
+  return (
+    <TableToolbar>
+      <TableToolbarList>
+        <Input
+          placeholder="Zoeken..."
+          defaultValue={defaultValue}
+          onChange={(e) => {
+            const value = e.target.value;
+            setQuery({ page: null, search: value ? value : null });
+          }}
+          className="h-8 w-[150px] min-w-fit lg:w-[250px]"
+        />
+
+        <Suspense>{visibilityState.types && <DriveTypeFilter />}</Suspense>
+      </TableToolbarList>
+
+      <TableToolbarList>{props.children}</TableToolbarList>
+    </TableToolbar>
+  );
+}
+
+/**
+ * Project status filter
+ */
+export function DriveTypeFilter() {
+  return (
+    <FilterCombobox
+      title="Type"
+      filter={nodesFiltersDescriptors.types}
+      options={[
+        {
+          label: "Folders",
+          value: "folder",
+          icon: FolderIcon,
+        },
+        {
+          label: "Bestanden",
+          value: "file",
+          icon: FileIcon,
+        },
+      ]}
+    />
+  );
+}

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

@@ -0,0 +1,95 @@
+"use client";
+
+import { useSuspenseInfiniteQuery } from "@tanstack/react-query";
+import type { VisibilityState } from "@tanstack/react-table";
+import { useInfiniteStrategy } from "@tulip-systems/data-tables/client";
+import { useDriveNavigation } from "@tulip-systems/drive/client";
+import {
+  type LocalDriveFiltersInput,
+  type LocalDriveNodeWithAsset,
+  localDriveTableSorts,
+  localDriveTreeFilterSearchParams,
+} from "@tulip-systems/drive-local";
+import {
+  LocalDriveView,
+  LocalDriveViewProvider,
+  useLocalDriveContext,
+} from "@tulip-systems/drive-local/client";
+import { normalizeFiltersSearchParams, offsetPagination } from "@tulip-systems/query";
+import { usePagination, useSorting } from "@tulip-systems/query/client";
+import { useQueryStates } from "nuqs";
+import { type ComponentProps, useDeferredValue } from "react";
+import { orpc } from "@/server/router/client";
+import {
+  driveFileUpdateCommand,
+  driveFoldersUpdateCommand,
+  driveNodeArchiveCommand,
+  driveNodeDeleteCommand,
+  driveNodeRestoreCommand,
+} from "../_config/commands";
+import { DriveToolbar } from "./toolbars";
+
+type DriveGridViewProps = ComponentProps<"div"> & {
+  where?: LocalDriveFiltersInput;
+  columnVisibility?: VisibilityState;
+};
+
+export function DriveView({ where, columnVisibility, ...props }: DriveGridViewProps) {
+  const { parentId } = useDriveNavigation();
+  const { namespace } = useLocalDriveContext();
+
+  const pagination = usePagination(offsetPagination);
+  const [filters] = useQueryStates(localDriveTreeFilterSearchParams);
+  const sorting = useSorting(localDriveTableSorts);
+  const normalizedFilters = normalizeFiltersSearchParams({ ...filters, ...where });
+  const input = useDeferredValue({
+    pagination: pagination.input,
+    sorts: sorting.input,
+    filters: { ...normalizedFilters, parentId, namespace },
+  });
+
+  const response = useSuspenseInfiniteQuery(
+    orpc.drive.listTree.infiniteOptions({
+      initialPageParam: 0,
+      input: (page: number) => ({
+        ...input,
+        pagination: { ...input.pagination, page },
+      }),
+      getNextPageParam: ({ pagination }) => pagination.nextPage,
+      getPreviousPageParam: ({ pagination }) => pagination.previousPage,
+    }),
+  );
+
+  const { total } = response.data.pages.at(-1)?.pagination ?? {};
+  const queryData = response.data.pages.flatMap(({ data }) => data) as LocalDriveNodeWithAsset[];
+  const strategy = useInfiniteStrategy({
+    pagination,
+    total,
+    fetchNextPage: response.fetchNextPage,
+    isFetching: response.isFetching,
+    isFetchingNextPage: response.isFetchingNextPage,
+  });
+
+  return (
+    <LocalDriveViewProvider
+      {...props}
+      queryData={queryData}
+      strategy={strategy}
+      sorting={sorting}
+      columnVisibility={columnVisibility}
+      commands={{
+        node: [
+          driveFoldersUpdateCommand,
+          driveFileUpdateCommand,
+          driveNodeArchiveCommand,
+          driveNodeRestoreCommand,
+          driveNodeDeleteCommand,
+        ],
+        selectedNodes: [driveNodeArchiveCommand, driveNodeRestoreCommand, driveNodeDeleteCommand],
+      }}
+    >
+      <DriveToolbar />
+      <LocalDriveView />
+    </LocalDriveViewProvider>
+  );
+}

package/dist/templates/spark/src/app/admin/drive/_config/columns-data.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import type { Row } from "@tanstack/react-table";
+import { type TableColumnDef, TableColumnHeader } from "@tulip-systems/data-tables";
+import { createTableSelectCell, TableTextCell } from "@tulip-systems/data-tables/client";
+import { useDriveNavigation } from "@tulip-systems/drive/client";
+import {
+  getLocalDriveFileUrl,
+  isLocalDriveFile,
+  isLocalDriveFolder,
+  type LocalDriveNodeWithAsset,
+} from "@tulip-systems/drive-local";
+import { findStatus } from "@tulip-systems/ui/status";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@tulip-systems/ui/tooltip";
+import { FolderIcon } from "lucide-react";
+import Link from "next/link";
+import { nodeSubtypeConfig, nodeSubtypeVariants } from "./types";
+
+export type DriveColumn = LocalDriveNodeWithAsset;
+
+export const driveColumns: TableColumnDef<DriveColumn>[] = [
+  createTableSelectCell(),
+  {
+    id: "icon",
+    accessorKey: "icon",
+    header: () => null,
+    cell: ({ row }) => {
+      if (isLocalDriveFile(row.original)) {
+        const subtype = findStatus(nodeSubtypeConfig, row.original.subtype);
+        if (!subtype) return null;
+
+        return (
+          <TableTextCell className="w-4">
+            <Tooltip>
+              <TooltipTrigger>
+                <subtype.icon
+                  className={nodeSubtypeVariants({
+                    status: row.original.subtype,
+                    className: "size-4",
+                  })}
+                />
+              </TooltipTrigger>
+
+              <TooltipContent>{subtype.label}</TooltipContent>
+            </Tooltip>
+          </TableTextCell>
+        );
+      }
+
+      if (isLocalDriveFolder(row.original)) {
+        return (
+          <TableTextCell className="w-4">
+            <FolderIcon className="w-4 min-w-4" />
+          </TableTextCell>
+        );
+      }
+
+      return null;
+    },
+    enableSorting: false,
+  },
+  {
+    id: "name",
+    accessorKey: "name",
+    header: ({ column }) => <TableColumnHeader column={column} title="Naam" />,
+    cell: ({ row }) => <DriveNameCell row={row} />,
+    enableSorting: false,
+  },
+  // {
+  //   id: "subtype",
+  //   accessorKey: "subtype",
+  //   header: () => null,
+  //   cell: ({ row }) => (
+  //     <TableTextCell className="min-w-40">
+  //       {isLocalDriveFile(row.original) ? <NodeSubtypeField subtype={row.original.subtype} /> : null}
+  //     </TableTextCell>
+  //   ),
+  // },
+  // {
+  //   accessorKey: "size",
+  //   header: ({ column }) => <TableColumnHeader column={column} title="Grootte" />,
+  //   cell: ({ row }) => <TableTextCell>{row.getValue("size")}</TableTextCell>,
+  // },
+];
+
+function DriveNameCell({ row }: { row: Row<DriveColumn> }) {
+  const navigation = useDriveNavigation();
+
+  return (
+    <TableTextCell className="w-full min-w-64">
+      <Link
+        href={
+          row.original.type === "file"
+            ? getLocalDriveFileUrl(row.original.id)
+            : navigation.getFolderHref(row.original.id)
+        }
+        className="truncate hover:underline"
+        target={row.original.type === "file" ? "_blank" : "_self"}
+      >
+        {row.getValue("name")}
+      </Link>
+    </TableTextCell>
+  );
+}

package/dist/templates/spark/src/app/admin/drive/_config/commands.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { commandBuilder, ensureArray } from "@tulip-systems/commands";
+import { ArchiveCommand, DeleteCommand, RestoreCommand } from "@tulip-systems/commands/client";
+import {
+  LocalDriveFilesUploadCommand,
+  LocalDriveFileUpdateCommand,
+  LocalDriveFoldersCreateCommand,
+  LocalDriveFoldersUpdateCommand,
+} from "@tulip-systems/drive-local/client";
+import { toast } from "@tulip-systems/ui/sonner";
+import { orpc } from "@/server/router/client";
+
+/**
+ * Node commands
+ */
+type DriveCommandItem = {
+  id: string;
+  type: "file" | "folder";
+  readonly?: boolean;
+  archivedAt: Date | null;
+};
+
+const bulkCommandBuilder = commandBuilder
+  .$type<DriveCommandItem | DriveCommandItem[]>()
+  .transform(ensureArray);
+
+export const driveFoldersCreateCommand = commandBuilder
+  .$type<{ namespace: string }>()
+
+  .permission({ drive: ["create"] })
+  .render(({ data }) => (
+    <LocalDriveFoldersCreateCommand
+      defaultValues={data}
+      variables={(values) => values}
+      mutation={orpc.drive.createFolder.mutationOptions({
+        onSuccess: () => {
+          toast.success("Folder succesvol toegevoegd");
+        },
+      })}
+    />
+  ));
+export const driveFilesUploadCommand = commandBuilder
+
+  .permission({ drive: ["create"] })
+  .render(() => <LocalDriveFilesUploadCommand />);
+export const driveFoldersUpdateCommand = commandBuilder
+  .$type<DriveCommandItem>()
+
+  .permission({ drive: ["update"] })
+  .visibleWhen(({ data }) => [data.type === "folder", !data.readonly])
+  .render(({ data }) => (
+    <LocalDriveFoldersUpdateCommand
+      defaultValues={data as never}
+      variables={(values) => ({ id: data.id, data: values })}
+      mutation={orpc.drive.updateNode.mutationOptions({
+        onSuccess: () => {
+          toast.success("Folder succesvol gewijzigd");
+        },
+      })}
+    />
+  ));
+export const driveFileUpdateCommand = commandBuilder
+  .$type<DriveCommandItem>()
+
+  .permission({ drive: ["update"] })
+  .visibleWhen(({ data }) => [data.type === "file", !data.readonly])
+  .render(({ data }) => (
+    <LocalDriveFileUpdateCommand
+      defaultValues={data as never}
+      variables={(values) => ({ id: data.id, data: values })}
+      mutation={orpc.drive.updateNode.mutationOptions({
+        onSuccess: () => {
+          toast.success("Bestand succesvol gewijzigd");
+        },
+      })}
+    />
+  ));
+export const driveNodeArchiveCommand = bulkCommandBuilder
+  .permission({ drive: ["archive"] })
+  .visibleWhen(({ data }) => data.every((item) => item.archivedAt === null))
+  .render(({ data }) => (
+    <ArchiveCommand
+      variables={{ ids: data.map((item) => item.id) }}
+      mutation={orpc.drive.archiveNodes.mutationOptions({
+        onSuccess: () => toast.success("Succesvol gearchiveerd"),
+      })}
+    />
+  ));
+export const driveNodeRestoreCommand = bulkCommandBuilder
+  .permission({ drive: ["archive"] })
+  .visibleWhen(({ data }) => data.every((item) => item.archivedAt !== null))
+  .render(({ data }) => (
+    <RestoreCommand
+      variables={{ ids: data.map((item) => item.id) }}
+      mutation={orpc.drive.restoreNodes.mutationOptions({
+        onSuccess: () => toast.success("Succesvol hersteld"),
+      })}
+    />
+  ));
+export const driveNodeDeleteCommand = bulkCommandBuilder
+  .permission({ drive: ["delete"] })
+  .render(({ data }) => (
+    <DeleteCommand
+      variables={{ ids: data.map((item) => item.id) }}
+      mutation={orpc.drive.deleteNodes.mutationOptions({
+        onSuccess: () => {
+          toast.success("Succesvol verwijderd");
+        },
+      })}
+    />
+  ));

package/dist/templates/spark/src/app/admin/drive/_config/filters.ts

@@ -0,0 +1,16 @@
+import { localDriveFilters } from "@tulip-systems/drive-local";
+import { resolveFiltersSchema } from "@tulip-systems/query";
+import z from "zod";
+
+/**
+ * Validators
+ */
+export const driveTreeFiltersSchema = resolveFiltersSchema(localDriveFilters).extend({
+  namespace: z.string(),
+  parentId: z.string().nullable(),
+});
+
+export type DriveTreeFiltersSchema = z.input<typeof driveTreeFiltersSchema>;
+
+export const driveFlatFiltersSchema = resolveFiltersSchema(localDriveFilters);
+export type DriveFlatFiltersSchema = z.input<typeof driveFlatFiltersSchema>;