@tulip-systems/drive 0.7.0

package/src/lib/validators.ts

@@ -0,0 +1,89 @@
+import { resolveFiltersSchema, tableQuerySchema } from "@tulip-systems/core/data-tables";
+import { z } from "zod";
+import { driveTreeFilters } from "@/config/filters";
+
+/**
+ * Create drive folder input schema
+ * @description zod schema for validating the input of the create drive folder command
+ */
+export const createDriveFolderInputSchema = z.object({
+  name: z.string(),
+  namespace: z.string(),
+  parentId: z.string().nullable().optional(),
+});
+export type CreateDriveFolderInput = z.input<typeof createDriveFolderInputSchema>;
+export type CreateDriveFolderSchema = z.infer<typeof createDriveFolderInputSchema>;
+
+/**
+ * Update drive node input schema
+ */
+export const updateDriveNodeInputSchema = z.object({
+  name: z.string().optional(),
+});
+export type UpdateDriveNodeInput = z.input<typeof updateDriveNodeInputSchema>;
+export type UpdateDriveNodeSchema = z.infer<typeof updateDriveNodeInputSchema>;
+
+/**
+ * Upload drive file input schema
+ * @description zod schema for validating the input of the upload drive file command
+ */
+export const uploadDriveFileInputSchema = z.object({
+  name: z.string(),
+  namespace: z.string(),
+  parentId: z.string().nullable().optional(),
+  contentType: z.string().nullable().optional(),
+  size: z.number().nullable().optional(),
+});
+export type UploadDriveFileInput = z.input<typeof uploadDriveFileInputSchema>;
+export type UploadDriveFileSchema = z.infer<typeof uploadDriveFileInputSchema>;
+
+/**
+ * Presign drive file input schema
+ * @description zod schema for validating the input of the presign drive file command
+ */
+export const presignDriveFileInputSchema = z.object({
+  name: z.string(),
+  namespace: z.string(),
+  parentId: z.string().nullable().optional(),
+  contentType: z.string().nullable().optional(),
+  size: z.number().nullable().optional(),
+});
+
+export type PresignDriveFileInput = z.input<typeof presignDriveFileInputSchema>;
+export type PresignDriveFileSchema = z.infer<typeof presignDriveFileInputSchema>;
+
+/**
+ * Table filters
+ */
+export const driveTableFiltersSchema = resolveFiltersSchema(driveTreeFilters)
+  .partial()
+  .extend({
+    namespace: z.string(),
+    parentId: z.string().nullable(),
+  })
+  .transform((input) => ({
+    ...input,
+    isArchived: input?.isArchived ?? false,
+  }));
+
+export type NodesTableFilters = z.infer<typeof driveTableFiltersSchema>;
+
+/**
+ * List tree input schema
+ */
+export const listDriveTreeInputSchema = tableQuerySchema.extend({
+  filters: driveTableFiltersSchema,
+});
+
+export type ListDriveTreeInput = z.input<typeof listDriveTreeInputSchema>;
+export type ListDriveTreeSchema = z.infer<typeof listDriveTreeInputSchema>;
+
+/**
+ * Get nodes by parent id input schema
+ */
+export const getNodesByParentIdInputSchema = tableQuerySchema
+  .pick({ order: true, sort: true, search: true })
+  .extend({ filters: driveTableFiltersSchema });
+
+export type GetDriveNodesByParentIdInput = z.input<typeof getNodesByParentIdInputSchema>;
+export type GetDriveNodesByParentIdSchema = z.infer<typeof getNodesByParentIdInputSchema>;

package/src/providers/google/components/command-file-update.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { DefaultError, MutationOptions } from "@tanstack/react-query";
+import {
+  CommandFormDialog,
+  CommandFormDialogCancel,
+  CommandFormDialogContent,
+  CommandFormDialogFields,
+  CommandFormDialogFooter,
+  CommandFormDialogHeader,
+  CommandFormDialogSubmit,
+  CommandFormDialogTitle,
+  CommandFormDialogTrigger,
+  CommandLabel,
+} from "@tulip-systems/core/commands/client";
+import { Input } from "@tulip-systems/core/components";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@tulip-systems/core/components/client";
+import { FilePen } from "lucide-react";
+import { useForm } from "react-hook-form";
+import {
+  type UpdateGoogleDriveNodeInput,
+  updateGoogleDriveNodeInputSchema,
+} from "../lib/validators";
+
+export type GoogleDriveFileUpdateCommandProps<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+> = {
+  defaultValues: Partial<UpdateGoogleDriveNodeInput>;
+  variables: (values: UpdateGoogleDriveNodeInput) => TVariables;
+  mutation: MutationOptions<TData, TError, TVariables, TOnMutateResult>;
+};
+
+/**
+ * File update command
+ * @description command to update a Google Drive file
+ */
+export function GoogleDriveFileUpdateCommand<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+>({
+  defaultValues,
+  variables,
+  mutation,
+}: GoogleDriveFileUpdateCommandProps<TData, TError, TVariables, TOnMutateResult>) {
+  const form = useForm<UpdateGoogleDriveNodeInput>({
+    resolver: zodResolver(updateGoogleDriveNodeInputSchema),
+    defaultValues,
+  });
+
+  return (
+    <Form {...form}>
+      <CommandFormDialog>
+        <CommandFormDialogTrigger label="Wijzigen">
+          <FilePen className="size-4" />
+          <CommandLabel />
+        </CommandFormDialogTrigger>
+
+        <CommandFormDialogContent variables={variables} mutation={mutation}>
+          <CommandFormDialogHeader>
+            <CommandFormDialogTitle>Bestand wijzigen</CommandFormDialogTitle>
+          </CommandFormDialogHeader>
+
+          <CommandFormDialogFields>
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Naam</FormLabel>
+                  <FormControl>
+                    <Input {...field} value={field.value ?? ""} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </CommandFormDialogFields>
+
+          <CommandFormDialogFooter>
+            <CommandFormDialogCancel>Annuleren</CommandFormDialogCancel>
+            <CommandFormDialogSubmit>Opslaan</CommandFormDialogSubmit>
+          </CommandFormDialogFooter>
+        </CommandFormDialogContent>
+      </CommandFormDialog>
+    </Form>
+  );
+}

package/src/providers/google/components/command-folder-create.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { DefaultError, MutationOptions } from "@tanstack/react-query";
+import {
+  CommandFormDialog,
+  CommandFormDialogCancel,
+  CommandFormDialogContent,
+  CommandFormDialogFields,
+  CommandFormDialogFooter,
+  CommandFormDialogHeader,
+  CommandFormDialogSubmit,
+  CommandFormDialogTitle,
+  CommandFormDialogTrigger,
+  CommandLabel,
+} from "@tulip-systems/core/commands/client";
+import { Input } from "@tulip-systems/core/components";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@tulip-systems/core/components/client";
+import { FolderPlus } from "lucide-react";
+import { useQueryStates } from "nuqs";
+import { useForm } from "react-hook-form";
+import { driveTreeSearchParams } from "@/lib/search-params";
+import {
+  type CreateGoogleDriveFolderInput,
+  createGoogleDriveFolderInputSchema,
+} from "../lib/validators";
+
+export type GoogleDriveFoldersCreateCommandProps<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+> = {
+  defaultValues?: Partial<CreateGoogleDriveFolderInput>;
+  variables: (values: CreateGoogleDriveFolderInput) => TVariables;
+  mutation: MutationOptions<TData, TError, TVariables, TOnMutateResult>;
+};
+
+/**
+ * Folders create command
+ * @description command to create a Google Drive folder
+ */
+export function GoogleDriveFoldersCreateCommand<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+>({
+  defaultValues,
+  variables,
+  mutation,
+}: GoogleDriveFoldersCreateCommandProps<TData, TError, TVariables, TOnMutateResult>) {
+  const [{ parentId }] = useQueryStates(driveTreeSearchParams);
+
+  const form = useForm<CreateGoogleDriveFolderInput>({
+    resolver: zodResolver(createGoogleDriveFolderInputSchema),
+    defaultValues: { ...defaultValues, parentId },
+  });
+
+  return (
+    <Form {...form}>
+      <CommandFormDialog>
+        <CommandFormDialogTrigger label="Folder toevoegen" hotkey="mod+i">
+          <FolderPlus className="size-4" />
+          <CommandLabel />
+        </CommandFormDialogTrigger>
+
+        <CommandFormDialogContent variables={variables} mutation={mutation}>
+          <CommandFormDialogHeader>
+            <CommandFormDialogTitle>Folder toevoegen</CommandFormDialogTitle>
+          </CommandFormDialogHeader>
+
+          <CommandFormDialogFields>
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Naam</FormLabel>
+                  <FormControl>
+                    <Input {...field} value={field.value ?? ""} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </CommandFormDialogFields>
+
+          <CommandFormDialogFooter>
+            <CommandFormDialogCancel>Annuleren</CommandFormDialogCancel>
+            <CommandFormDialogSubmit>Toevoegen</CommandFormDialogSubmit>
+          </CommandFormDialogFooter>
+        </CommandFormDialogContent>
+      </CommandFormDialog>
+    </Form>
+  );
+}

package/src/providers/google/components/command-folder-update.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { DefaultError, MutationOptions } from "@tanstack/react-query";
+import {
+  CommandFormDialog,
+  CommandFormDialogCancel,
+  CommandFormDialogContent,
+  CommandFormDialogFields,
+  CommandFormDialogFooter,
+  CommandFormDialogHeader,
+  CommandFormDialogSubmit,
+  CommandFormDialogTitle,
+  CommandFormDialogTrigger,
+  CommandLabel,
+} from "@tulip-systems/core/commands/client";
+import { Input } from "@tulip-systems/core/components";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@tulip-systems/core/components/client";
+import { FolderPen } from "lucide-react";
+import { useForm } from "react-hook-form";
+import {
+  type UpdateGoogleDriveNodeInput,
+  updateGoogleDriveNodeInputSchema,
+} from "../lib/validators";
+
+export type GoogleDriveFoldersUpdateCommandProps<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+> = {
+  defaultValues: Partial<UpdateGoogleDriveNodeInput>;
+  variables: (values: UpdateGoogleDriveNodeInput) => TVariables;
+  mutation: MutationOptions<TData, TError, TVariables, TOnMutateResult>;
+};
+
+/**
+ * Folders update command
+ * @description command to update a Google Drive folder
+ */
+export function GoogleDriveFoldersUpdateCommand<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+>({
+  defaultValues,
+  variables,
+  mutation,
+}: GoogleDriveFoldersUpdateCommandProps<TData, TError, TVariables, TOnMutateResult>) {
+  const form = useForm<UpdateGoogleDriveNodeInput>({
+    resolver: zodResolver(updateGoogleDriveNodeInputSchema),
+    defaultValues,
+  });
+
+  return (
+    <Form {...form}>
+      <CommandFormDialog>
+        <CommandFormDialogTrigger label="Wijzigen">
+          <FolderPen className="size-4" />
+          <CommandLabel />
+        </CommandFormDialogTrigger>
+
+        <CommandFormDialogContent variables={variables} mutation={mutation}>
+          <CommandFormDialogHeader>
+            <CommandFormDialogTitle>Folder wijzigen</CommandFormDialogTitle>
+          </CommandFormDialogHeader>
+
+          <CommandFormDialogFields>
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Naam</FormLabel>
+                  <FormControl>
+                    <Input {...field} value={field.value ?? ""} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </CommandFormDialogFields>
+
+          <CommandFormDialogFooter>
+            <CommandFormDialogCancel>Annuleren</CommandFormDialogCancel>
+            <CommandFormDialogSubmit>Opslaan</CommandFormDialogSubmit>
+          </CommandFormDialogFooter>
+        </CommandFormDialogContent>
+      </CommandFormDialog>
+    </Form>
+  );
+}

package/src/providers/google/components/content.client.tsx

@@ -0,0 +1,6 @@
+import { DriveContent } from "@/components/content";
+
+/**
+ * GoogleDriveContent
+ */
+export const GoogleDriveContent = DriveContent;

package/src/providers/google/components/navigation.client.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import {
+  DriveHeader,
+  DriveHeaderBreadcrumbs,
+  DriveHeaderTools,
+} from "@/components/navigation/header.client";
+import {
+  DriveToolbar,
+  DriveToolbarBreadcrumbs,
+  DriveToolbarTools,
+} from "@/components/navigation/toolbar.client";
+import { DriveViewSwitcher } from "@/components/navigation/view-switcher.client";
+
+export const GoogleDriveHeader = DriveHeader;
+export const GoogleDriveHeaderBreadcrumbs = DriveHeaderBreadcrumbs;
+export const GoogleDriveHeaderTools = DriveHeaderTools;
+export const GoogleDriveToolbar = DriveToolbar;
+export const GoogleDriveToolbarBreadcrumbs = DriveToolbarBreadcrumbs;
+export const GoogleDriveToolbarTools = DriveToolbarTools;
+export const GoogleDriveViewSwitcher = DriveViewSwitcher;

package/src/providers/google/components/provider.client.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { Allowed } from "@tulip-systems/core/auth/client";
+import { createContext, type PropsWithChildren, use } from "react";
+import type { DriveContextValue } from "@/components/context.client";
+import { DriveDragDropProvider } from "@/components/dnd.client";
+import {
+  type DriveSelectionContextValue,
+  DriveSelectionProvider,
+} from "@/components/selection.client";
+import { DriveViewProvider, type DriveViewProviderProps } from "@/components/view.client";
+
+/**
+ * GoogleDriveContextValue
+ */
+export type GoogleDriveContextValue = DriveContextValue;
+
+export const GoogleDriveContext = createContext({} as GoogleDriveContextValue);
+
+/**
+ * useDriveContext
+ */
+export function useGoogleDriveContext() {
+  const context = use(GoogleDriveContext);
+  if (!context) throw new Error("DriveContext not found!");
+  return context;
+}
+
+/**
+ * DriveContextProvider
+ */
+type GoogleDriveProviderProps = PropsWithChildren<
+  GoogleDriveContextValue &
+    Partial<DriveSelectionContextValue> &
+    Pick<DriveViewProviderProps, "initialView">
+>;
+
+export function GoogleDriveProvider({
+  initialView = "grid",
+  namespace,
+  permission,
+  meta,
+  selection,
+  selectionConditions,
+  children,
+}: GoogleDriveProviderProps) {
+  return (
+    <Allowed permission={permission}>
+      <DriveSelectionProvider selection={selection} selectionConditions={selectionConditions}>
+        <DriveViewProvider initialView={initialView}>
+          <DriveDragDropProvider>
+            <GoogleDriveContext value={{ namespace, permission, meta }}>
+              {children}
+            </GoogleDriveContext>
+          </DriveDragDropProvider>
+        </DriveViewProvider>
+      </DriveSelectionProvider>
+    </Allowed>
+  );
+}

package/src/providers/google/components/view.client.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import type { VisibilityState } from "@tanstack/react-table";
+import type { CommandDef } from "@tulip-systems/core/commands";
+import { FloatingCommandMenu } from "@tulip-systems/core/commands/client";
+import { type TableColumnDef, TableLayout, TableSkeleton } from "@tulip-systems/core/data-tables";
+import {
+  createTableConfig,
+  DataTable,
+  type InfiniteStrategyMeta,
+  TableConfigProvider,
+  type useInfiniteStrategy,
+  useTableConfigContext,
+} from "@tulip-systems/core/data-tables/client";
+import { type ComponentProps, useMemo } from "react";
+import {
+  DriveGrid,
+  DriveGridBottombar,
+  DriveGridEmpty,
+  DriveGridLoading,
+} from "@/components/grid.client";
+import { DriveGridCard, DriveGridCardSkeleton } from "@/components/grid-card.client";
+import { useDriveSelectionContext } from "@/components/selection.client";
+import { useDriveViewContext } from "@/components/view.client";
+import { googleDriveColumns } from "../config/columns-data";
+import type { GoogleDriveNode } from "../lib/validators";
+import { useGoogleDriveContext } from "./provider.client";
+
+/**
+ * GoogleDriveContent
+ */
+type GoogleDriveViewProviderProps<TData extends GoogleDriveNode = GoogleDriveNode> =
+  ComponentProps<"div"> & {
+    queryData: TData[];
+    columns?: TableColumnDef<TData>[];
+    strategy: ReturnType<typeof useInfiniteStrategy>;
+    commands?: CommandDef<TData>[];
+    columnVisibility?: VisibilityState;
+  };
+
+export function GoogleDriveViewProvider<TData extends GoogleDriveNode = GoogleDriveNode>({
+  queryData,
+  columns = googleDriveColumns as TableColumnDef<TData>[],
+  strategy,
+  commands,
+  columnVisibility,
+  children,
+  ...props
+}: GoogleDriveViewProviderProps<TData>) {
+  const { meta } = useGoogleDriveContext();
+  const { selection } = useDriveSelectionContext();
+
+  /**
+   * Table
+   */
+  const config = createTableConfig<TData>({
+    queryData,
+    columns,
+    strategy,
+    commands,
+    meta,
+    columnVisibility,
+    selection,
+  });
+
+  return (
+    <TableConfigProvider config={config}>
+      <TableLayout {...props}>{children}</TableLayout>
+    </TableConfigProvider>
+  );
+}
+
+/**
+ * GoogleDriveView
+ */
+export function GoogleDriveView() {
+  const { view } = useDriveViewContext();
+
+  if (view === "grid") {
+    return <GoogleDriveGrid />;
+  }
+
+  if (view === "list") {
+    return <GoogleDriveList />;
+  }
+
+  return null;
+}
+
+/**
+ * GoogleDriveGrid
+ */
+function GoogleDriveGrid(props: ComponentProps<"div">) {
+  const { queryData, strategy, commands, selection, meta } =
+    useTableConfigContext<GoogleDriveNode>();
+  const { rowCount, paginationState } = strategy;
+  const { isFetching, isFetchingNextPage, fetchNextPage } = strategy.meta as InfiniteStrategyMeta;
+
+  const hasNextPage = rowCount == null ? false : queryData.length < rowCount;
+
+  const selectedData = useMemo(
+    () => queryData.filter((node) => selection?.rowSelection?.[node.id] === true),
+    [queryData, selection?.rowSelection],
+  );
+
+  return (
+    <DriveGrid {...props}>
+      {queryData.length > 0 ? (
+        queryData.map((node) => <DriveGridCard key={node.id} node={node} commands={commands} />)
+      ) : (
+        <DriveGridEmpty title="Geen resultaten gevonden" />
+      )}
+
+      {isFetchingNextPage &&
+        Array.from({ length: paginationState?.pageSize ?? 0 }).map((_, index) => (
+          <DriveGridCardSkeleton key={index} />
+        ))}
+
+      <DriveGridBottombar
+        hasNextPage={hasNextPage}
+        fetchNextPage={fetchNextPage}
+        isFetching={isFetching}
+        isFetchingNextPage={isFetchingNextPage}
+      />
+
+      {commands && commands.length > 0 && (
+        <FloatingCommandMenu
+          data={selectedData as never}
+          commands={commands as never}
+          meta={meta}
+          state={selectedData.length > 0 ? "open" : "closed"}
+          onSuccess={() => selection?.setRowSelection?.({})}
+        />
+      )}
+    </DriveGrid>
+  );
+}
+
+/**
+ * GoogleDriveList
+ */
+function GoogleDriveList(props: ComponentProps<typeof DataTable>) {
+  return <DataTable {...props} />;
+}
+
+/**
+ * GoogleDriveViewLoading
+ */
+export function GoogleDriveViewLoading({ ...props }: ComponentProps<"div">) {
+  const { view } = useDriveViewContext();
+
+  return (
+    <div {...props}>
+      {view === "grid" && <DriveGridLoading {...props} />}
+      {view === "list" && <TableSkeleton {...props} />}
+    </div>
+  );
+}