@tulip-systems/core 0.7.0 → 0.8.1

package/src/modules/data-tables/tables/inline-table/hooks/use-hotkeys.client.ts

@@ -1,117 +1,145 @@
 import { useHotkeys } from "react-hotkeys-hook";
+import type { Keys } from "react-hotkeys-hook/dist/types";
+
+/**
+ * Inline input data attribute used to identify navigable cells in the data table.
+ */
+export const INLINE_INPUT_ATTR = "data-inline-input";
+
+/**
+ * Props for configuring the hotkeys used for navigating between inline-editable cells in a data table.
+ * Each property corresponds to a direction of navigation and accepts an array of key combinations that trigger the navigation in that direction.
+ * If a property is not provided or is an empty array, the corresponding navigation hotkeys will be disabled.
+ */
+export type InlineDataTableHotkeysConfig = {
+  moveLeft?: Keys | undefined;
+  moveRight?: Keys | undefined;
+  moveUp?: Keys | undefined;
+  moveDown?: Keys | undefined;
+};
+
+/**
+ * Sets up hotkeys for navigating between inline-editable cells in a data table:
+ * - ArrowUp / ArrowDown: Move vertically to the next cell with an input in the same column.
+ * - ArrowLeft / ArrowRight: Move horizontally to the next cell with an input in the same row.
+ *
+ * The hotkeys only trigger when focused within a table that uses the "inline-data-table" scope,
+ * and they look for elements with the [data-inline-input] attribute to determine navigable cells.
+ */
+export function useInlineDataTableHotkeys(props: InlineDataTableHotkeysConfig = {}) {
+  /**
+   * Move left hotkey handler
+   */
+  useHotkeys(
+    props.moveLeft ?? [],
+    (e) => {
+      const currentCell = (e.target as HTMLElement)?.closest("td");
+      if (!currentCell) return;
+
+      let cell = currentCell.previousElementSibling;
+
+      while (cell) {
+        const input = cell.querySelector(`[${INLINE_INPUT_ATTR}]`) as HTMLElement | null;
+        if (input) {
+          input.focus();
+          return;
+        }
+        cell = cell.previousElementSibling;
+      }
+    },
+    {
+      enabled: !!(props.moveLeft && props.moveLeft.length > 0),
+      scopes: "inline-data-table",
+      enableOnFormTags: true,
+      enableOnContentEditable: true,
+      preventDefault: true,
+    },
+  );
+
+  /**
+   * Move right hotkey handler
+   */
+  useHotkeys(
+    props.moveRight ?? [],
+    (e) => {
+      const currentCell = (e.target as HTMLElement)?.closest("td");
+      if (!currentCell) return;
+
+      let cell = currentCell.nextElementSibling;
+
+      while (cell) {
+        const input = cell.querySelector(`[${INLINE_INPUT_ATTR}]`) as HTMLElement | null;
+        if (input) {
+          input.focus();
+          return;
+        }
+        cell = cell.nextElementSibling;
+      }
+    },
+    {
+      enabled: !!(props.moveRight && props.moveRight.length > 0),
+      scopes: "inline-data-table",
+      enableOnFormTags: true,
+      enableOnContentEditable: true,
+      preventDefault: true,
+    },
+  );
 
-export function useInlineDataTableHotkeys() {
+  /**
+   * Move up hotkey handler
+   */
   useHotkeys(
-    ["mod+arrowleft", "mod+arrowright"],
-    (e, handler) => {
-      const currentInput = e.target as HTMLInputElement | null;
-      const currentCell = currentInput?.closest("td");
+    props.moveUp ?? [],
+    (e) => {
+      const currentCell = (e.target as HTMLElement)?.closest("td") as HTMLTableCellElement | null;
+      if (!currentCell) return;
 
-      const cellToFocus = handler.keys?.includes("left")
-        ? currentCell?.previousElementSibling
-        : currentCell?.nextElementSibling;
+      const currentRow = currentCell.closest("tr");
+      const nextRow = currentRow?.previousElementSibling;
 
-      const nextCell = cellToFocus?.querySelector("[data-input]") as HTMLInputElement | null;
+      const nextInput = nextRow
+        ? ((nextRow as HTMLTableRowElement).cells?.[currentCell.cellIndex]?.querySelector(
+            `[${INLINE_INPUT_ATTR}]`,
+          ) as HTMLElement | null)
+        : null;
 
-      nextCell?.focus();
+      nextInput?.focus();
     },
     {
+      enabled: !!(props.moveUp && props.moveUp.length > 0),
       scopes: "inline-data-table",
       enableOnFormTags: true,
+      enableOnContentEditable: true,
       preventDefault: true,
     },
   );
 
+  /**
+   * Move down hotkey handler
+   */
   useHotkeys(
-    ["mod+arrowup", "mod+arrowdown"],
-    (e, handler) => {
-      const currentInput = e.target as HTMLInputElement | null;
-      const columnId = currentInput?.closest("td")?.getAttribute("data-column-id");
-      const currentRow = currentInput?.closest("tr");
+    props.moveDown ?? [],
+    (e) => {
+      const currentCell = (e.target as HTMLElement)?.closest("td") as HTMLTableCellElement | null;
+      if (!currentCell) return;
 
-      const nextRow = handler.keys?.includes("up")
-        ? currentRow?.previousElementSibling
-        : currentRow?.nextElementSibling;
+      const currentRow = currentCell.closest("tr");
+      const nextRow = currentRow?.nextElementSibling;
 
-      const nextCell = nextRow
-        ?.querySelector(`td[data-column-id="${columnId}"]`)
-        ?.querySelector("[data-input]") as HTMLInputElement | null;
+      const nextInput = nextRow
+        ? ((nextRow as HTMLTableRowElement).cells?.[currentCell.cellIndex]?.querySelector(
+            `[${INLINE_INPUT_ATTR}]`,
+          ) as HTMLElement | null)
+        : null;
 
-      nextCell?.focus();
+      nextInput?.focus();
     },
     {
+      enabled: !!(props.moveDown && props.moveDown.length > 0),
       scopes: "inline-data-table",
       enableOnFormTags: true,
+      enableOnContentEditable: true,
       preventDefault: true,
     },
   );
-
-  // useHotkeys(
-  //   ["mod+shift+arrowdown", "mod+shift+arrowup"],
-  //   (e, handler) => {
-  //     if (!meta.isDraggable) return;
-
-  //     const currentInput = e.target as HTMLInputElement | null;
-  //     const rowIndex = currentInput?.closest("td")?.getAttribute("data-row-index");
-
-  //     const fromIndex = Number(rowIndex);
-  //     const toIndex = Number(rowIndex) + (handler.keys?.includes("down") ? 1 : -1);
-
-  //     meta.moveRow({ fromIndex, toIndex });
-  //   },
-  //   {
-  //     scopes: "inline-data-table",
-  //     enableOnFormTags: true,
-  //     preventDefault: true,
-  //     enabled: meta.isDraggable,
-  //   },
-  // );
-
-  // useHotkeys(
-  //   "mod+d",
-  //   (e) => {
-  //     if (!meta.isDeletable) return;
-
-  //     const currentInput = e.target as HTMLInputElement | null;
-  //     const currentCell = currentInput?.closest("td");
-  //     const currentRow = currentInput?.closest("tr");
-
-  //     const columnId = currentCell?.getAttribute("data-column-id");
-  //     const rowId = currentRow?.getAttribute("data-row-id");
-
-  //     if (rowId) meta.deleteRow({ id: rowId });
-
-  //     // Focus on the next cell
-  //     const nextRow = currentRow?.nextElementSibling;
-  //     const nextCell = nextRow
-  //       ?.querySelector(`td[data-column-id="${columnId}"]`)
-  //       ?.querySelector("[data-input]") as HTMLInputElement | null;
-
-  //     nextCell?.focus();
-  //   },
-  //   {
-  //     scopes: "inline-data-table",
-  //     enableOnFormTags: true,
-  //     preventDefault: true,
-  //     enabled: meta.isDeletable,
-  //   },
-  // );
-
-  // useHotkeys(
-  //   ["mod+i", "mod+u"],
-  //   (e, handler) => {
-  //     if (!meta.isCreatable) return;
-
-  //     const currentInput = e.target as HTMLInputElement | null;
-  //     const rowIndex = currentInput?.closest("td")?.getAttribute("data-row-index");
-  //     const index = Number(rowIndex) + (handler.keys?.includes("i") ? 1 : 0);
-  //     rowIndex && meta.addRow({ index });
-  //   },
-  //   {
-  //     scopes: "inline-data-table",
-  //     enableOnFormTags: true,
-  //     preventDefault: true,
-  //     enabled: meta.isCreatable,
-  //   },
-  // );
 }

package/src/modules/database/entry.server.ts

@@ -0,0 +1,4 @@
+/**
+ * Lib
+ */
+export * from "../database/lib/service.server";

package/src/modules/database/entry.ts

@@ -0,0 +1,5 @@
+/**
+ * Lib
+ */
+export * from "./lib/helpers";
+export * from "./lib/types";

package/src/modules/database/lib/service.server.ts

@@ -0,0 +1,33 @@
+import { drizzle } from "drizzle-orm/node-postgres";
+import type { Pool } from "pg";
+import type { TDatabaseSchema } from "./types";
+
+type InitDatabaseProps<TSchema extends TDatabaseSchema> = {
+  schema: TSchema;
+  pool: Pool;
+};
+
+/**
+ * Create a Drizzle database client.
+ */
+function createDatabase<TSchema extends TDatabaseSchema>({
+  schema,
+  pool,
+}: InitDatabaseProps<TSchema>) {
+  return drizzle({ client: pool, schema, casing: "snake_case" });
+}
+
+/**
+ * Drizzle database client type returned by `Database.init()`.
+ */
+export type Database<TSchema extends TDatabaseSchema> = ReturnType<typeof createDatabase<TSchema>>;
+
+/**
+ * Database service namespace.
+ *
+ * @example
+ * const db = Database.init<DatabaseSchema>({ schema, pool });
+ */
+export const Database = {
+  init: createDatabase,
+};

package/src/modules/emails/entry.server.ts

@@ -0,0 +1,4 @@
+/**
+ * Lib
+ */
+export * from "./lib/service.server";

package/src/modules/emails/lib/service.server.ts

@@ -0,0 +1,29 @@
+import "server-cli-only";
+
+import { Resend } from "resend";
+
+type InitEmailProps = {
+  key: string;
+};
+
+/**
+ * Create a Resend email client.
+ */
+function createEmail({ key }: InitEmailProps) {
+  return new Resend(key);
+}
+
+/**
+ * Resend email client type returned by `Email.init()`.
+ */
+export type Email = ReturnType<typeof createEmail>;
+
+/**
+ * Email service namespace.
+ *
+ * @example
+ * const email = Email.init({ key: env.RESEND_API_KEY });
+ */
+export const Email = {
+  init: createEmail,
+};

package/src/modules/inline-edit/components/date-input.client.tsx

@@ -54,7 +54,7 @@ export function InlineDateInput<Required extends boolean = false>({
     <Popover>
       <div {...props} className={cn("relative h-full", className)}>
         <Input
-          data-input
+          data-inline-input="date"
           type="string"
           value={stringDate}
           className={cn(inlineEditVariants({ variant, status }), inValid && "text-destructive")}

package/src/modules/inline-edit/components/date-picker.client.tsx

@@ -50,6 +50,7 @@ export function InlineDatePicker<Required extends boolean = false>({
       <PopoverTrigger asChild>
         <Button
           {...props}
+          data-inline-input="date-picker"
           type="button"
           variant="outline"
           className={cn("w-full", inlineEditVariants({ variant, status }), className)}

package/src/modules/inline-edit/components/date-time.client.tsx

@@ -43,6 +43,7 @@ export function InlineDateTimeInput<Required extends boolean = false>({
 
   return (
     <DateTimeInput
+      data-inline-input="date-time"
       value={value ?? undefined}
       className={cn(inlineEditVariants({ variant, status }), className)}
       disabled={disabled || !isAllowed}

package/src/modules/inline-edit/components/editor.client.tsx

@@ -46,6 +46,9 @@ export function InlineEditor<Required extends boolean = false>({
       className={cn(inlineEditVariants({ variant, status }), className)}
       disabled={disabled || !isAllowed}
       variant={variant}
+      attributes={{
+        "data-inline-input": "editor",
+      }}
     >
       {children}
     </Editor>

package/src/modules/inline-edit/components/input-recipient.client.tsx

@@ -45,6 +45,7 @@ export function InlineRecipientInput<Required extends boolean = false>({
   return (
     <RecipientInput
       {...props}
+      data-inline-input="recipient"
       contacts={contacts}
       value={value ?? []}
       onChange={(newValue) => {

package/src/modules/inline-edit/components/input-toggle.client.tsx

@@ -50,6 +50,7 @@ export function InlineStringInputToggle<Required extends boolean>({
     <div className="relative">
       <Input
         {...props}
+        data-inline-input="input-toggle"
         type="text"
         value={value ?? undefined}
         disabled={isDisabled}

package/src/modules/inline-edit/components/input.client.tsx

@@ -42,6 +42,7 @@ export function InlineStringInput<Required extends boolean = false>({
   return (
     <Input
       {...props}
+      data-inline-input="string"
       type="text"
       value={value ?? undefined}
       disabled={disabled || !isAllowed}
@@ -88,6 +89,7 @@ export function InlineNumberInput<Required extends boolean = false>({
   return (
     <Input
       {...props}
+      data-inline-input="number"
       type="number"
       value={value ?? undefined}
       disabled={disabled || !isAllowed}
@@ -131,6 +133,7 @@ export function InlineDecimalInput({
   return (
     <Input
       {...props}
+      data-inline-input="decimal"
       type="number"
       value={value ?? undefined}
       disabled={disabled || !isAllowed}

package/src/modules/inline-edit/components/select.client.tsx

@@ -55,7 +55,11 @@ export function InlineSelectTrigger({
   const { status } = useIndicator();
 
   return (
-    <SelectTrigger {...props} className={cn(inlineEditVariants({ variant, status }), className)} />
+    <SelectTrigger
+      {...props}
+      data-inline-input="select"
+      className={cn(inlineEditVariants({ variant, status }), className)}
+    />
   );
 }
 

package/src/modules/inline-edit/components/switch.client.tsx

@@ -28,6 +28,7 @@ export function InlineSwitch<Required extends boolean = false>({
   return (
     <Switch
       {...props}
+      data-inline-input="switch"
       disabled={disabled || !isAllowed}
       defaultChecked={value ?? undefined}
       onCheckedChange={(checked) => {

package/src/modules/inline-edit/components/toggle.client.tsx

@@ -33,6 +33,7 @@ export function InlineToggle<Required extends boolean = false>({
   return (
     <div {...props} className={cn("flex flex-wrap items-center justify-start gap-1", className)}>
       <Toggle
+        data-inline-input="toggle"
         disabled={!isAllowed}
         variant="outline"
         pressed={value ?? undefined}

package/src/modules/router/handler/init.server.ts

@@ -33,7 +33,7 @@ export function initRPC<TSchema extends TDatabaseSchema>() {
   /**
    * Middleware function to check if the user has the required permission
    */
-  function permissionMiddleware(permission: Permission) {
+  function permissionMiddleware(permissions: Permission) {
     /**
      * Middleware function to check if the user has the required permission
      */
@@ -41,7 +41,7 @@ export function initRPC<TSchema extends TDatabaseSchema>() {
       const { success, error } = await opts.context.auth.api.userHasPermission({
         body: {
           userId: opts.context.session.user.id,
-          permission,
+          permissions,
         },
       });
 

package/src/modules/storage/components/dropzone.client.tsx

@@ -6,7 +6,7 @@ import type { DropEvent, DropzoneOptions, FileRejection } from "react-dropzone";
 import { useDropzone } from "react-dropzone";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils/cn";
-import { renderBytes } from "@/modules/storage/lib/helpers";
+import { renderBytes } from "../lib/helpers";
 import { DropzoneContext, useDropzoneContext } from "./dropzone-context.client";
 
 /**

package/src/modules/storage/components/image-grid.client.tsx

@@ -18,7 +18,6 @@ import {
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { GripIcon, UploadIcon } from "lucide-react";
-import Image from "next/image";
 import React, { type ComponentProps } from "react";
 import { Icons } from "@/components/common/icons";
 import { Button } from "@/components/ui/button";
@@ -35,15 +34,16 @@ import { Input } from "@/components/ui/input";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useAction } from "@/lib/entry.client";
 import { cn } from "@/lib/utils/cn";
-import { getFileUrl, imageLoader } from "../lib/helpers";
-import type { FileNode } from "../lib/validators";
+import { getAssetURL } from "../lib/helpers";
+import type { StorageAsset } from "../lib/validators";
+import { StorageImage } from "./image.client";
 import { useUploadZone } from "./upload-zone-context.client";
 
 /**
  * Image Grid
  */
 type ImageGridProps = ComponentProps<"div"> & {
-  nodes: FileNode[];
+  assets: StorageAsset[];
   disabled?: boolean;
   moveAction: (params: { fromIndex: number; toIndex: number }) => Promise<void>;
   optimistic?: {
@@ -51,10 +51,10 @@ type ImageGridProps = ComponentProps<"div"> & {
   };
 };
 
-export function ImageGrid({ nodes, moveAction, optimistic, disabled, ...props }: ImageGridProps) {
+export function ImageGrid({ assets, moveAction, optimistic, disabled, ...props }: ImageGridProps) {
   const uploadZone = useUploadZone();
 
-  const images = nodes.flatMap((node) => ({ ...node, url: getFileUrl(node.id) }));
+  const images = assets.flatMap((asset) => ({ ...asset, url: getAssetURL(asset.id) }));
 
   const [current, setCurrent] = React.useState<number>(0);
 
@@ -101,8 +101,8 @@ export function ImageGrid({ nodes, moveAction, optimistic, disabled, ...props }:
           className="grid grid-cols-[repeat(auto-fill,minmax(10rem,1fr))] gap-5"
         >
           <SortableContext items={images.map((image) => image.id)} strategy={rectSortingStrategy}>
-            {images.map((node, index) => (
-              <ImageGridItem key={node.id} node={node} index={index} setCurrent={setCurrent} />
+            {images.map((asset, index) => (
+              <ImageGridItem key={asset.id} asset={asset} index={index} setCurrent={setCurrent} />
             ))}
 
             {!disabled && (
@@ -133,13 +133,12 @@ export function ImageGrid({ nodes, moveAction, optimistic, disabled, ...props }:
           <CarouselContent className="md:max-h-[80vh]">
             {images.map(({ id, url }) => (
               <CarouselItem key={id} className="overflow-hidden rounded-xl">
-                <Image
+                <StorageImage
                   src={url}
                   alt="Image Preview"
                   width={1920}
                   height={1080}
                   className="h-full w-full rounded-xl object-contain"
-                  loader={imageLoader}
                 />
               </CarouselItem>
             ))}
@@ -156,36 +155,40 @@ export function ImageGrid({ nodes, moveAction, optimistic, disabled, ...props }:
  * Image Grid Item
  */
 type ImageGridItemProps = {
-  node: FileNode & { url: string };
+  asset: StorageAsset & { url: string };
   index: number;
   setCurrent: React.Dispatch<React.SetStateAction<number>>;
 };
 
-function ImageGridItem({ node, index, setCurrent }: ImageGridItemProps) {
+function ImageGridItem({ asset, index, setCurrent }: ImageGridItemProps) {
   const uploadZone = useUploadZone();
 
-  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: node.id });
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+    id: asset.id,
+  });
 
   return (
     <Card
-      id={node.id}
+      id={asset.id}
       ref={setNodeRef}
       style={{
         transform: CSS.Transform.toString(transform),
         transition,
       }}
-      className={cn("group relative aspect-square w-full", node.isPending && "opacity-30")}
+      className={cn(
+        "group relative aspect-square w-full",
+        asset.status === "pending" && "opacity-30",
+      )}
     >
-      {!node.isPending ? (
+      {asset.status === "ready" ? (
         <>
           <DialogTrigger onClick={() => setCurrent(index)}>
-            <Image
-              src={node.url}
+            <StorageImage
+              src={asset.url}
               alt="Image Preview"
               width={100}
               height={100}
               className="absolute inset-0 h-full w-full cursor-pointer rounded-lg bg-muted object-contain"
-              loader={imageLoader}
             />
           </DialogTrigger>
 
@@ -204,7 +207,7 @@ function ImageGridItem({ node, index, setCurrent }: ImageGridItemProps) {
             type="button"
             variant="destructive"
             size="icon"
-            onClick={() => uploadZone.onRemove([node.id])}
+            onClick={() => uploadZone.onRemove([asset.id])}
             className="absolute top-2 left-2 hidden p-1 group-hover:flex"
           >
             <Icons.trash className="size-4" />

package/src/modules/storage/components/image.client.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import Image, { type ImageProps } from "next/image";
+import { imageLoader } from "../lib/helpers";
+
+export function StorageImage(props: Omit<ImageProps, "loader">) {
+  return <Image {...props} loader={imageLoader} />;
+}

package/src/modules/storage/components/upload-zone-context.client.tsx

@@ -1,31 +1,34 @@
 "use client";
 
 import React from "react";
-import type { UploadClient } from "../lib/create-upload.client";
-import type { FileNode, Node } from "../lib/validators";
+import type { UploadClient } from "../lib/upload.client";
+import type { StorageAsset } from "../lib/validators";
 
 /**
  * Upload Zone Context Value
  */
 export type UploadZoneContextValue = {
   uploadClient: UploadClient;
-  onUpload: (file: File) => Promise<Node>;
+  onUpload: (file: File) => Promise<StorageAsset>;
   onRemove: (ids: string[]) => Promise<void>;
   optimistic?: {
-    add?: (newValue: FileNode) => Promise<void> | void;
+    add?: (
+      newValue: Omit<
+        StorageAsset,
+        "id" | "key" | "bucket" | "provider" | "createdAt" | "updatedAt"
+      >,
+    ) => Promise<void> | void;
     remove?: (ids: string[]) => Promise<void> | void;
     invalidate?: () => Promise<void> | void;
     cancel?: () => Promise<void> | void;
   };
   disabled?: boolean;
-  // updateData: (newValue: FileNode[] | ((oldValue: FileNode[]) => FileNode[])) => Promise<void>;
-  // invalidateQuery: () => Promise<void> | void;
 };
 
 /**
  * Upload Zone Context
  */
-export const UploadZoneContext = React.createContext({} as UploadZoneContextValue);
+export const UploadZoneContext = React.createContext<UploadZoneContextValue | null>(null);
 
 /**
  * Upload Zone Hook
@@ -33,7 +36,7 @@ export const UploadZoneContext = React.createContext({} as UploadZoneContextValu
 export function useUploadZone() {
   const context = React.useContext(UploadZoneContext);
   if (!context) {
-    throw new Error("useUploadZone must be used within an UploadZoneProvider");
+    throw new Error("useUploadZone must be used within an UploadZoneContext provider");
   }
   return context;
 }