@tulip-systems/core 0.6.1 → 0.8.0

package/src/modules/data-tables/strategies/infinite/strategy.ts

@@ -16,7 +16,7 @@ export interface UseInfiniteStrategyInput {
 
 export type InfiniteStrategyMeta = Pick<
   UseInfiniteStrategyInput,
-  "isFetching" | "isFetchingNextPage"
+  "isFetching" | "isFetchingNextPage" | "total" | "cursor" | "fetchNextPage"
 >;
 
 export function useInfiniteStrategy({
@@ -63,6 +63,9 @@ export function useInfiniteStrategy({
     manualSorting: true,
     onSortingChange: handleSortingChange({ sortingState, setQuery, resetCursor }),
     meta: {
+      total,
+      cursor,
+      fetchNextPage,
       isFetching,
       isFetchingNextPage,
     } satisfies InfiniteStrategyMeta,

package/src/modules/data-tables/strategies/pagination/components.tsx

@@ -34,7 +34,7 @@ export function PaginationTableFooter<TData extends { id: string }>({
           </Button>
         )}
 
-        <div className="text-muted-foreground flex-1 text-sm">
+        <div className="flex-1 text-muted-foreground text-sm">
           {selected ?? table.getFilteredSelectedRowModel().rows.length} of{" "}
           {total ?? table.getFilteredRowModel().rows.length} row(s) selected.
         </div>
@@ -42,7 +42,7 @@ export function PaginationTableFooter<TData extends { id: string }>({
 
       <div className="flex items-center justify-between gap-x-6 md:justify-start lg:space-x-8">
         <div className="hidden items-center space-x-2 md:flex">
-          <p className="text-sm font-medium">Rows per page</p>
+          <p className="font-medium text-sm">Rows per page</p>
           <Select
             value={`${table.getState().pagination.pageSize}`}
             onValueChange={(value) => {
@@ -62,7 +62,7 @@ export function PaginationTableFooter<TData extends { id: string }>({
           </Select>
         </div>
 
-        <div className="flex items-center justify-center text-sm font-medium">
+        <div className="flex items-center justify-center font-medium text-sm">
           Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
         </div>
 

package/src/modules/data-tables/tables/data-table/components/row.tsx

@@ -1,12 +1,6 @@
 import type { Row, Table } from "@tanstack/react-table";
 import type * as React from "react";
-import {
-  ContextCommandMenu,
-  ContextCommandMenuContent,
-  ContextCommandMenuTrigger,
-} from "@/modules/commands/menus/context-menu.client";
 import { TableRow } from "@/modules/data-tables/components/table";
-import type { TableMeta } from "../../../lib/types";
 
 export type DataTableRowProps<TData extends { id: string }> = React.ComponentProps<
   typeof TableRow
@@ -21,20 +15,17 @@ export function DataTableRow<TData extends { id: string }>({
   className,
   ...props
 }: DataTableRowProps<TData>) {
-  const meta = table.options.meta as TableMeta<TData>;
+  return <TableRow {...props} data-state={row.getIsSelected() && "selected"} />;
+}
 
-  return (
-    <ContextCommandMenu>
-      <ContextCommandMenuTrigger asChild>
-        <TableRow {...props} data-state={row.getIsSelected() && "selected"} />
-      </ContextCommandMenuTrigger>
+//  <ContextCommandMenu>
+//       <ContextCommandMenuTrigger asChild>
+//   </ContextCommandMenuTrigger>
 
-      <ContextCommandMenuContent
-        data={row.original}
-        commands={meta.commands || []}
-        meta={meta as never}
-        className="w-[300px]"
-      />
-    </ContextCommandMenu>
-  );
-}
+//       <ContextCommandMenuContent
+//         data={row.original}
+//         commands={meta.commands || []}
+//         meta={meta as never}
+//         className="w-[300px]"
+//       />
+//     </ContextCommandMenu>

package/src/modules/data-tables/tables/inline-table/components/body.tsx

@@ -38,7 +38,7 @@ export function InlineTableBody<TData extends { id: string }>({ table }: { table
     }),
   );
 
-  useInlineDataTableHotkeys();
+  useInlineDataTableHotkeys(context.hotkeys);
 
   if (rows?.length === 0) {
     return (

package/src/modules/data-tables/tables/inline-table/components/cells/common.tsx

@@ -6,7 +6,7 @@ export function TableInlineCell({ className, ...props }: React.ComponentProps<ty
   return (
     <TableCell
       className={cn(
-        "focus-within:bg-accent focus-within:text-accent-foreground h-9 border-l p-0 align-middle first:border-0 [&:has([role=checkbox])]:pr-0",
+        "h-8 border-l p-0 align-middle first:border-0 focus-within:bg-accent focus-within:text-accent-foreground [&:has([role=checkbox])]:pr-0",
         className,
       )}
       {...props}

package/src/modules/data-tables/tables/inline-table/components/cells/drag-handle.client.tsx

@@ -34,7 +34,7 @@ export function TableDragHandle<TData, TValue>({
         className={cn("h-full w-8 rounded-none border-none", className)}
         disabled={disabled}
       >
-        <GripIcon className="fill-muted size-4" />
+        <GripIcon className="size-4 fill-muted" />
       </Button>
     </TableInlineCell>
   );

package/src/modules/data-tables/tables/inline-table/components/cells/read-only.tsx

@@ -9,7 +9,7 @@ export function InlineDataTableReadOnly({
   return (
     <span
       {...props}
-      className={cn("bg-muted/50 flex h-full w-full items-center truncate px-3", className)}
+      className={cn("flex h-full w-full items-center truncate bg-muted/50 px-3", className)}
     >
       {children}
     </span>

package/src/modules/data-tables/tables/inline-table/components/row.client.tsx

@@ -4,14 +4,8 @@ import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import type { Row, Table } from "@tanstack/react-table";
 import type * as React from "react";
-import {
-  ContextCommandMenu,
-  ContextCommandMenuContent,
-  ContextCommandMenuTrigger,
-} from "@/modules/commands/entry.client";
 import { TableRow } from "@/modules/data-tables/components/table";
 import { InlineEditProvider } from "@/modules/inline-edit/entry.client";
-import type { TableMeta } from "../../../lib/types";
 
 export type InlineTableRowProps<TData extends { id: string }> =
   React.HTMLAttributes<HTMLTableRowElement> & {
@@ -25,34 +19,34 @@ export function InlineTableRow<TData extends { id: string }>({
   children,
   ...props
 }: InlineTableRowProps<TData>) {
-  const meta = table.options.meta as TableMeta<TData>;
-
   const rowId = (row.original as { id: string }).id;
 
   const { setNodeRef, transform, transition } = useSortable({ id: rowId });
 
   return (
-    <ContextCommandMenu>
-      <ContextCommandMenuTrigger asChild>
-        <TableRow
-          {...props}
-          ref={setNodeRef}
-          data-state={row.getIsSelected() && "selected"}
-          style={{
-            transform: CSS.Transform.toString(transform),
-            transition,
-          }}
-        >
-          <InlineEditProvider id={row.original.id}>{children}</InlineEditProvider>
-        </TableRow>
-      </ContextCommandMenuTrigger>
-
-      <ContextCommandMenuContent
-        data={row.original}
-        commands={meta.commands || []}
-        meta={meta as never}
-        className="w-[300px]"
-      />
-    </ContextCommandMenu>
+    <TableRow
+      {...props}
+      ref={setNodeRef}
+      data-state={row.getIsSelected() && "selected"}
+      style={{
+        transform: CSS.Transform.toString(transform),
+        transition,
+      }}
+    >
+      <InlineEditProvider id={row.original.id}>{children}</InlineEditProvider>
+    </TableRow>
   );
 }
+
+{
+  /* <ContextCommandMenu>
+  <ContextCommandMenuTrigger asChild></ContextCommandMenuTrigger>
+
+  <ContextCommandMenuContent
+    data={row.original}
+    commands={meta.commands || []}
+    meta={meta as never}
+    className="w-[300px]"
+  />
+</ContextCommandMenu>; */
+}

package/src/modules/data-tables/tables/inline-table/components/table.tsx

@@ -14,13 +14,18 @@ import { InlineTableHeader } from "./header";
 export function InlineTable<TData extends { id: string }>({
   disabledColumns,
   moveRowAction,
+  hotkeys,
   ...props
 }: ComponentProps<typeof Table> & ComponentProps<typeof InlineTableProvider>) {
   const table = useTable<TData>();
   const meta = table.options.meta as TableMeta<TData>;
 
   return (
-    <InlineTableProvider disabledColumns={disabledColumns} moveRowAction={moveRowAction}>
+    <InlineTableProvider
+      disabledColumns={disabledColumns}
+      moveRowAction={moveRowAction}
+      hotkeys={hotkeys}
+    >
       <div className="space-y-4">
         <div className="rounded-md border">
           <Table {...props}>

package/src/modules/data-tables/tables/inline-table/hooks/context.client.tsx

@@ -5,6 +5,7 @@ import React, { type PropsWithChildren } from "react";
 import { arrayMove } from "@/lib/entry";
 import { useAction } from "@/lib/hooks/use-action";
 import { useTableConfigContext } from "@/modules/data-tables/entry.client";
+import type { InlineDataTableHotkeysConfig } from "./use-hotkeys.client";
 
 /**
  * Move row method as meta
@@ -24,6 +25,7 @@ type MoveRowMethod =
  */
 export type InlineTableContextValue = MoveRowMethod & {
   disabledColumns?: VisibilityState;
+  hotkeys?: InlineDataTableHotkeysConfig;
   // setData: React.Dispatch<React.SetStateAction<TData[]>>;
 };
 
@@ -49,9 +51,11 @@ export function InlineTableProvider<TData extends { id: string }>({
   children,
   disabledColumns,
   moveRowAction,
+  hotkeys,
 }: PropsWithChildren<{
   disabledColumns?: VisibilityState;
   moveRowAction?: (input: { fromIndex: number; toIndex: number }) => Promise<unknown>;
+  hotkeys?: InlineDataTableHotkeysConfig;
 }>) {
   const { queryData, setData } = useTableConfigContext<TData>();
 
@@ -74,6 +78,7 @@ export function InlineTableProvider<TData extends { id: string }>({
     <InlineTableContext.Provider
       value={{
         disabledColumns,
+        hotkeys,
         ...(moveRowAction
           ? { isDraggable: true, moveRow: moveRowMutation.mutate }
           : { isDraggable: false, moveRow: undefined }),

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

@@ -4,9 +4,9 @@ import { format } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import React, { type ComponentProps } from "react";
 import { Button } from "@/components/ui/button";
-import { Calendar } from "@/components/ui/calendar";
+import { Calendar } from "@/components/ui/calendar.client";
 import { Input } from "@/components/ui/input";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover.client";
 import { cn } from "@/lib/utils/cn";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
 import { type InlineEditVariantsProps, inlineEditVariants } from "../lib/variants";
@@ -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")}
@@ -83,7 +83,7 @@ export function InlineDateInput<Required extends boolean = false>({
             tabIndex={-1}
             disabled={!isAllowed}
             className={cn(
-              "absolute bottom-0 right-0 top-0 opacity-50",
+              "absolute top-0 right-0 bottom-0 opacity-50",
               !value && "text-muted-foreground",
             )}
           >

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

@@ -3,8 +3,8 @@
 import { CalendarIcon } from "lucide-react";
 import React, { type ComponentProps } from "react";
 import { Button } from "@/components/ui/button";
-import { Calendar } from "@/components/ui/calendar";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Calendar } from "@/components/ui/calendar.client";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover.client";
 import { cn } from "@/lib/utils/cn";
 import { formatDate } from "@/lib/utils/format";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
@@ -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

@@ -2,7 +2,7 @@
 
 import { format } from "date-fns";
 import type { ComponentProps } from "react";
-import { DateTimeInput } from "@/components/ui/input-date-time";
+import { DateTimeInput } from "@/components/ui/input-date-time.client";
 import { cn } from "@/lib/utils/cn";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
 import { type InlineEditVariantsProps, inlineEditVariants } from "../lib/variants";
@@ -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}