create-tulip-app 0.6.1 → 0.7.0

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

@@ -0,0 +1,83 @@
+"use client";
+
+import { useSuspenseInfiniteQuery } from "@tanstack/react-query";
+import type { VisibilityState } from "@tanstack/react-table";
+import { TableLayout, tableSearchParams } from "@tulip-systems/core/data-tables";
+import {
+  createTableConfig,
+  DataTable,
+  TableConfigProvider,
+  useInfiniteStrategy,
+} from "@tulip-systems/core/data-tables/client";
+import { useQueryStates } from "nuqs";
+import { useDeferredValue, useMemo } from "react";
+import { orpc } from "@/server/router/client";
+import { type DriveColumn, driveColumns } from "../_config/columns-data.js";
+import { driveCommands } from "../_config/commands.js";
+import { driveFilterSearchParams, driveSearchParams } from "../_lib/search-params.js";
+import { useDriveContext } from "./drive-context.client.js";
+import { DriveToolbar } from "./toolbars.js";
+
+/**
+ * Drive List
+ */
+type DriveListProps = {
+  columnVisibility?: VisibilityState;
+};
+
+export function DriveList({ columnVisibility }: DriveListProps) {
+  const [{ parentId }] = useQueryStates(driveSearchParams);
+  const { namespace, where } = useDriveContext();
+
+  const [query] = useQueryStates(tableSearchParams);
+  const [filters] = useQueryStates(driveFilterSearchParams);
+  const input = useDeferredValue({
+    ...query,
+    filters: { ...filters, ...where, parentId, namespace },
+  });
+
+  /**
+   * Data
+   */
+  const response = useSuspenseInfiniteQuery(
+    orpc.drive.list.infiniteOptions({
+      initialPageParam: 0,
+      input: (cursor: number | undefined) => ({ ...input, cursor }),
+      getNextPageParam: ({ pagination }) => pagination.nextCursor,
+      getPreviousPageParam: ({ pagination }) => pagination.previousCursor,
+    }),
+  );
+
+  const { cursor, total } = response.data.pages.at(-1)?.pagination ?? {};
+
+  const queryData = useMemo(
+    () => response.data.pages.flatMap(({ data }) => data) ?? [],
+    [response.data],
+  );
+
+  /**
+   * Strategy
+   */
+  const strategy = useInfiniteStrategy({ ...response, cursor, total });
+
+  /**
+   * Table
+   */
+  const config = createTableConfig<DriveColumn>({
+    queryData,
+    columns: driveColumns,
+    strategy,
+    commands: driveCommands,
+    where,
+    columnVisibility,
+  });
+
+  return (
+    <TableLayout>
+      <TableConfigProvider config={config}>
+        <DriveToolbar />
+        <DataTable />
+      </TableConfigProvider>
+    </TableLayout>
+  );
+}

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

@@ -0,0 +1,74 @@
+"use client";
+
+import { Input } from "@tulip-systems/core/components";
+import {
+  parseFiltersVisibility,
+  resolveFilterDescriptors,
+  TableToolbar,
+  TableToolbarList,
+  tableSearchParams,
+} from "@tulip-systems/core/data-tables";
+import { TableFilterCombobox } from "@tulip-systems/core/data-tables/client";
+import { nodesTableFilters } from "@tulip-systems/core/storage";
+import { FileIcon, FolderIcon } from "lucide-react";
+import { useQueryStates } from "nuqs";
+import { type PropsWithChildren, Suspense, startTransition } from "react";
+
+const nodesTableFiltersDescriptors = resolveFilterDescriptors(nodesTableFilters);
+
+const filtersVisibilityConfig = ["types"] satisfies (keyof typeof nodesTableFiltersDescriptors)[];
+
+export function DriveToolbar(
+  props: PropsWithChildren<{
+    filtersVisibility?: Partial<Record<(typeof filtersVisibilityConfig)[number], boolean>>;
+  }>,
+) {
+  const visibilityState = parseFiltersVisibility(filtersVisibilityConfig, props.filtersVisibility);
+
+  const [query, setQuery] = useQueryStates(tableSearchParams, { shallow: false, startTransition });
+  const defaultValue = query.search ?? "";
+
+  return (
+    <TableToolbar>
+      <TableToolbarList>
+        <Input
+          placeholder="Zoeken..."
+          defaultValue={defaultValue}
+          onChange={(e) => {
+            const value = e.target.value;
+            setQuery({ cursor: 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 (
+    <TableFilterCombobox
+      title="Type"
+      filter={nodesTableFiltersDescriptors.types}
+      options={[
+        {
+          label: "Folders",
+          value: "folder",
+          icon: FolderIcon,
+        },
+        {
+          label: "Bestanden",
+          value: "file",
+          icon: FileIcon,
+        },
+      ]}
+    />
+  );
+}

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

@@ -0,0 +1,98 @@
+"use client";
+
+import { findStatus } from "@tulip-systems/core/components";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@tulip-systems/core/components/client";
+import { type TableColumnDef, TableColumnHeader } from "@tulip-systems/core/data-tables";
+import { createTableSelectCell, TableTextCell } from "@tulip-systems/core/data-tables/client";
+import { getFileUrl, isFile, isFolder, type Node } from "@tulip-systems/core/storage";
+import { FolderIcon } from "lucide-react";
+import Link from "next/link";
+import { createSerializer, useQueryStates } from "nuqs";
+import { driveSearchParams } from "../_lib/search-params.js";
+import { nodeSubtypeConfig, nodeSubtypeVariants } from "./types.js";
+
+export type DriveColumn = Node;
+
+export const driveColumns: TableColumnDef<DriveColumn>[] = [
+  createTableSelectCell(),
+  {
+    id: "icon",
+    accessorKey: "icon",
+    header: () => null,
+    cell: ({ row }) => {
+      if (isFile(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 (isFolder(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 }) => {
+      const [query] = useQueryStates(driveSearchParams);
+      const serialize = createSerializer(driveSearchParams);
+
+      return (
+        <TableTextCell className="w-full min-w-64">
+          <Link
+            href={
+              row.original.type === "file"
+                ? getFileUrl(row.original.id)
+                : serialize({ ...query, parentId: row.original.id })
+            }
+            className="truncate hover:underline"
+            target={row.original.type === "file" ? "_blank" : "_self"}
+          >
+            {row.getValue("name")}
+          </Link>
+        </TableTextCell>
+      );
+    },
+    enableSorting: false,
+  },
+  // {
+  //   id: "subtype",
+  //   accessorKey: "subtype",
+  //   header: () => null,
+  //   cell: ({ row }) => (
+  //     <TableTextCell className="min-w-40">
+  //       {isFile(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>,
+  // },
+];

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

@@ -0,0 +1,197 @@
+"use client";
+
+import type { CommandDef } from "@tulip-systems/core/commands";
+import {
+  ArchiveCommand,
+  CommandLabel,
+  DeleteCommand,
+  RestoreCommand,
+} from "@tulip-systems/core/commands/client";
+import { toast } from "@tulip-systems/core/components/client";
+import type { Node } from "@tulip-systems/core/storage";
+import { FilePen, FolderPen, FolderPlus } from "lucide-react";
+import { orpc } from "@/server/router/client";
+import {
+  NodeDialogCommand,
+  NodeDialogCommandCancel,
+  NodeDialogCommandContent,
+  NodeDialogCommandFields,
+  NodeDialogCommandFooter,
+  NodeDialogCommandHeader,
+  NodeDialogCommandSubmit,
+  NodeDialogCommandTitle,
+  NodeDialogCommandTrigger,
+} from "../_components/command-create.js";
+import { UploadCommand } from "../_components/command-upload.js";
+
+/**
+ * Node commands
+ */
+export const driveCommands: CommandDef<Node>[] = [
+  {
+    name: "folders-update",
+    mode: "single",
+    permission: { drive: ["update"] },
+    conditions: ({ data }) => [data.type === "folder", !data.readonly],
+    render: ({ id, data }) => (
+      <NodeDialogCommand>
+        <NodeDialogCommandTrigger label="Wijzigen">
+          <FolderPen className="size-4" />
+          <CommandLabel />
+        </NodeDialogCommandTrigger>
+
+        <NodeDialogCommandContent
+          defaultValues={data}
+          variables={(data) => ({ id, data })}
+          mutation={orpc.drive.updateNode.mutationOptions({
+            onSuccess: () => {
+              toast.success("Folder succesvol gewijzigd");
+            },
+          })}
+        >
+          <NodeDialogCommandHeader>
+            <NodeDialogCommandTitle>Folder Wijzigen</NodeDialogCommandTitle>
+          </NodeDialogCommandHeader>
+
+          <NodeDialogCommandFields />
+
+          <NodeDialogCommandFooter>
+            <NodeDialogCommandCancel>Annuleren</NodeDialogCommandCancel>
+            <NodeDialogCommandSubmit>Opslaan</NodeDialogCommandSubmit>
+          </NodeDialogCommandFooter>
+        </NodeDialogCommandContent>
+      </NodeDialogCommand>
+    ),
+  },
+  {
+    name: "file-update",
+    mode: "single",
+    permission: { drive: ["update"] },
+    conditions: ({ data }) => [data.type === "file", !data.readonly],
+    render: ({ id, data }) => {
+      const [name, extension] = data.name.split(".");
+
+      return (
+        <NodeDialogCommand>
+          <NodeDialogCommandTrigger label="Wijzigen">
+            <FilePen className="size-4" />
+            <CommandLabel />
+          </NodeDialogCommandTrigger>
+
+          <NodeDialogCommandContent
+            defaultValues={{ ...data, name }}
+            variables={(data) => ({
+              id,
+              data: { ...data, name: `${data.name}.${extension}` },
+            })}
+            mutation={orpc.drive.updateNode.mutationOptions({
+              onSuccess: () => {
+                toast.success("Bestand succesvol gewijzigd");
+              },
+            })}
+          >
+            <NodeDialogCommandHeader>
+              <NodeDialogCommandTitle>File Wijzigen</NodeDialogCommandTitle>
+            </NodeDialogCommandHeader>
+
+            <NodeDialogCommandFields />
+
+            <NodeDialogCommandFooter>
+              <NodeDialogCommandCancel>Annuleren</NodeDialogCommandCancel>
+              <NodeDialogCommandSubmit>Opslaan</NodeDialogCommandSubmit>
+            </NodeDialogCommandFooter>
+          </NodeDialogCommandContent>
+        </NodeDialogCommand>
+      );
+    },
+  },
+  {
+    name: "node-archive",
+    mode: "bulk",
+    permission: { drive: ["archive"] },
+    conditions: ({ data }) => data.every((item) => !item.isDeleted),
+    render: ({ ids }) => (
+      <ArchiveCommand
+        variables={{ ids }}
+        mutation={orpc.drive.archive.mutationOptions({
+          onSuccess: () => toast.success("Succesvol gearchiveerd"),
+        })}
+      />
+    ),
+  },
+  {
+    name: "node-restore",
+    mode: "bulk",
+    permission: { drive: ["archive"] },
+    conditions: ({ data }) => data.every((item) => item.isDeleted),
+    render: ({ ids }) => (
+      <RestoreCommand
+        variables={{ ids }}
+        mutation={orpc.drive.restore.mutationOptions({
+          onSuccess: () => toast.success("Succesvol hersteld"),
+        })}
+      />
+    ),
+  },
+  {
+    name: "node-delete",
+    mode: "bulk",
+    permission: { drive: ["delete"] },
+    render: ({ ids }) => (
+      <DeleteCommand
+        variables={{ ids }}
+        mutation={orpc.drive.deleteNodes.mutationOptions({
+          onSuccess: () => {
+            toast.success("Succesvol verwijderd");
+          },
+        })}
+      />
+    ),
+  },
+];
+
+/**
+ * Project commands
+ */
+export const driveGlobalCommands: CommandDef<{ namespace: string }>[] = [
+  {
+    name: "folders-create",
+    mode: "single",
+    permission: { drive: ["create"] },
+    render: ({ data }) => (
+      <NodeDialogCommand>
+        <NodeDialogCommandTrigger label="Folder toevoegen" hotkey="mod+i">
+          <FolderPlus className="size-4" />
+          <CommandLabel />
+        </NodeDialogCommandTrigger>
+
+        <NodeDialogCommandContent
+          defaultValues={{ ...data, type: "folder" }}
+          variables={(values) => values}
+          mutation={orpc.drive.createFolder.mutationOptions({
+            onSuccess: () => {
+              toast.success("Folder succesvol toegevoegd");
+            },
+          })}
+        >
+          <NodeDialogCommandHeader>
+            <NodeDialogCommandTitle>Folder toevoegen</NodeDialogCommandTitle>
+          </NodeDialogCommandHeader>
+
+          <NodeDialogCommandFields />
+
+          <NodeDialogCommandFooter>
+            <NodeDialogCommandCancel>Annuleren</NodeDialogCommandCancel>
+            <NodeDialogCommandSubmit>Toevoegen</NodeDialogCommandSubmit>
+          </NodeDialogCommandFooter>
+        </NodeDialogCommandContent>
+      </NodeDialogCommand>
+    ),
+  },
+  {
+    name: "files-upload",
+    mode: "single",
+    permission: { drive: ["create"] },
+    render: () => <UploadCommand />,
+  },
+];

package/dist/templates/basic/src/app/admin/drive/_config/types.tsx

@@ -0,0 +1,90 @@
+import {
+  createStatusConfig,
+  createStatusVariants,
+  StatusBadge,
+  StatusField,
+} from "@tulip-systems/core/components";
+import type { NodeSubtype } from "@tulip-systems/core/storage";
+import { cva } from "class-variance-authority";
+import {
+  FileArchiveIcon,
+  FileAudioIcon,
+  FileIcon,
+  FileImageIcon,
+  FileSpreadsheetIcon,
+  FileTextIcon,
+  FileVideoIcon,
+} from "lucide-react";
+
+/**
+ * Node subtype config
+ */
+export const nodeSubtypeConfig = createStatusConfig<NodeSubtype>([
+  {
+    value: "image",
+    label: "Afbeelding",
+    icon: FileImageIcon,
+    className: "stroke-blue-500",
+  },
+  {
+    value: "document",
+    label: "Document",
+    icon: FileTextIcon,
+    className: "stroke-red-600",
+  },
+  {
+    value: "archive",
+    label: "Archief",
+    icon: FileArchiveIcon,
+    className: "stroke-yellow-500",
+  },
+  {
+    value: "audio",
+    label: "Audio",
+    icon: FileAudioIcon,
+    className: "stroke-pink-500",
+  },
+  {
+    value: "video",
+    label: "Video",
+    icon: FileVideoIcon,
+    className: "stroke-purple-500",
+  },
+  {
+    value: "spreadsheet",
+    label: "Tabel",
+    icon: FileSpreadsheetIcon,
+    className: "stroke-green-600",
+  },
+  {
+    value: "other",
+    label: "Bestand",
+    icon: FileIcon,
+    className: "stroke-gray-400",
+  },
+]);
+
+/**
+ * Node subtype variants
+ */
+export const nodeSubtypeVariants = cva("", {
+  variants: { status: createStatusVariants(nodeSubtypeConfig) },
+});
+
+/**
+ * Node subtype badge
+ */
+export function NodeSubtypeBadge(props: { subtype: NodeSubtype }) {
+  return (
+    <StatusBadge config={nodeSubtypeConfig} variants={nodeSubtypeVariants} status={props.subtype} />
+  );
+}
+
+/**
+ * Node subtype field
+ */
+export function NodeSubtypeField(props: { subtype: NodeSubtype }) {
+  return (
+    <StatusField config={nodeSubtypeConfig} variants={nodeSubtypeVariants} status={props.subtype} />
+  );
+}

package/dist/templates/basic/src/app/admin/drive/_lib/router.ts

@@ -0,0 +1,72 @@
+import "server-cli-only";
+
+import { tableQuerySchema } from "@tulip-systems/core/data-tables";
+import { createTableQueryResponse, getTableData } from "@tulip-systems/core/data-tables/server";
+import { bulkActionSchema } from "@tulip-systems/core/router";
+import { nodes, nodesTableFiltersSchema } from "@tulip-systems/core/storage";
+import { createDriveBaseProcedures } from "@tulip-systems/core/storage/server";
+import { and, desc, eq, inArray, isNotNull, isNull } from "drizzle-orm";
+import { revalidatePath } from "next/cache";
+import { permissionMiddleware, protectedProcedure } from "@/server/router/init";
+import type { DriveColumn } from "../_config/columns-data.js";
+
+export const driveRouter = {
+  /**
+   * Base procedures
+   */
+  ...createDriveBaseProcedures(),
+  /**
+   * Extended procedures
+   */
+
+  list: protectedProcedure
+    .use(permissionMiddleware({ drive: ["view"] }))
+    .input(tableQuerySchema.extend({ filters: nodesTableFiltersSchema }))
+    .handler(async ({ context, input: { filters, ...input } }) => {
+      const { data, total } = await getTableData(context, input, {
+        table: nodes,
+        where: and(
+          filters.nodeIds != null ? inArray(nodes.id, filters.nodeIds) : undefined,
+          filters.types != null ? inArray(nodes.type, filters.types) : undefined,
+          filters.isDeleted != null ? eq(nodes.isDeleted, filters.isDeleted) : undefined,
+          filters.isOrphaned === true
+            ? isNotNull(nodes.orphanedAt)
+            : filters.isOrphaned === false
+              ? isNull(nodes.orphanedAt)
+              : undefined,
+          filters.hidden != null ? eq(nodes.hidden, filters.hidden) : undefined,
+          filters.parentId ? eq(nodes.parentId, filters.parentId) : isNull(nodes.parentId),
+          eq(nodes.namespace, filters.namespace),
+        ),
+        searchFields: [nodes.name],
+        defaultOrder: [desc(nodes.createdAt)],
+      });
+
+      return createTableQueryResponse<DriveColumn>({ data, input, total });
+    }),
+  archive: protectedProcedure
+    .use(permissionMiddleware({ drive: ["archive"] }))
+    .input(bulkActionSchema)
+    .handler(async ({ context, input }) => {
+      await context.db
+        .update(nodes)
+        .set({ isDeleted: true })
+        .where(inArray(nodes.id, input.ids))
+        .returning();
+
+      revalidatePath("/drive", "page");
+    }),
+
+  restore: protectedProcedure
+    .use(permissionMiddleware({ drive: ["archive"] }))
+    .input(bulkActionSchema)
+    .handler(async ({ context, input }) => {
+      await context.db
+        .update(nodes)
+        .set({ isDeleted: false })
+        .where(inArray(nodes.id, input.ids))
+        .returning();
+
+      revalidatePath("/drive", "page");
+    }),
+};

package/dist/templates/basic/src/app/admin/drive/_lib/search-params.ts

@@ -0,0 +1,21 @@
+import { resolveFiltersSearchParams } from "@tulip-systems/core/data-tables";
+import { nodesTableFilters } from "@tulip-systems/core/storage";
+import { parseAsStringEnum } from "nuqs";
+import { createLoader, parseAsString } from "nuqs/server";
+
+/**
+ * Params
+ */
+export const driveSearchParams = {
+  parentId: parseAsString,
+  view: parseAsStringEnum(["list", "grid"]).withDefault("grid"),
+};
+
+export const loadDriveGridSearchParams = createLoader(driveSearchParams);
+
+/**
+ * Filters
+ */
+export const driveFilterSearchParams = resolveFiltersSearchParams(nodesTableFilters);
+
+export const loadDriveGridFilterSearchParams = createLoader(driveFilterSearchParams);

package/dist/templates/basic/src/app/admin/drive/loading.tsx

@@ -0,0 +1,10 @@
+import { AdminLoadingLayout } from "@tulip-systems/core/components";
+import { DriveGridLoading } from "./_components/grid.client.js";
+
+export default function Loading() {
+  return (
+    <AdminLoadingLayout>
+      <DriveGridLoading className="p-content" />
+    </AdminLoadingLayout>
+  );
+}

package/dist/templates/basic/src/app/admin/error.tsx

@@ -0,0 +1,5 @@
+"use client";
+
+import { AdminErrorPage } from "@tulip-systems/core/components";
+
+export default AdminErrorPage;

package/dist/templates/basic/src/app/admin/layout.tsx

@@ -0,0 +1,21 @@
+import { AuthProvider } from "@tulip-systems/core/auth/client";
+import { AuthGuard } from "@tulip-systems/core/auth/server";
+import { AdminContent } from "@tulip-systems/core/components/client";
+import { AdminLayout } from "@tulip-systems/core/components/server";
+import type { PropsWithChildren } from "react";
+import { AdminSidebar } from "@/lib/config/paths";
+import { authClient } from "@/server/auth/client";
+import { auth } from "@/server/auth/init";
+
+export default async function Layout(props: PropsWithChildren) {
+  return (
+    <AuthGuard auth={auth}>
+      <AuthProvider authClient={authClient}>
+        <AdminLayout>
+          <AdminSidebar />
+          <AdminContent>{props.children}</AdminContent>
+        </AdminLayout>
+      </AuthProvider>
+    </AuthGuard>
+  );
+}

package/dist/templates/basic/src/app/admin/not-found.tsx

@@ -0,0 +1,3 @@
+import { AdminNotFoundPage } from "@tulip-systems/core/components";
+
+export default AdminNotFoundPage;

package/dist/templates/basic/src/app/api/auth/[...all]/route.ts

@@ -0,0 +1,4 @@
+import { handleAuthRoute } from "@tulip-systems/core/auth/server";
+import { auth } from "@/server/auth/init";
+
+export const { GET, POST } = handleAuthRoute({ auth });