@tulip-systems/core 0.8.2 → 0.9.0

package/src/modules/data-tables/server/get-data.server.ts

@@ -1,26 +1,31 @@
 import "server-cli-only";
 
-import { and, type DBQueryConfig, getTableName, isTable, type SQL } from "drizzle-orm";
+import {
+  type AnyColumn,
+  and,
+  type DBQueryConfig,
+  getTableColumns,
+  getTableName,
+  isTable,
+  type SQL,
+} from "drizzle-orm";
 import type { PgTable } from "drizzle-orm/pg-core";
 import type { RelationalQueryBuilder } from "drizzle-orm/pg-core/query-builders/query";
-import type { TDatabaseSchema } from "@/modules/config/db/types";
 import type { TulipContext } from "@/modules/config/entry";
-import { convertCursorToQueryParams } from "../lib/converters/cursor";
+import type { TDatabaseSchema } from "@/modules/database/lib/types";
+import { parseTableQueryPagination } from "../entry.server";
 import {
   type ConvertSearchToQueryParamsFields,
   convertSearchToQueryParams,
 } from "../lib/converters/search";
-import {
-  type ConvertSortToQueryParamsFallback,
-  convertOrderByToQueryParams,
-} from "../lib/converters/sorting";
+import { createTableQuerySortingParser } from "../lib/converters/sorting";
 import type { TableQuerySchema } from "../lib/validators";
 
 export type GetTableDataOptions<TTable extends PgTable> = DBQueryConfig<"many"> & {
   table: TTable;
   where?: SQL;
   columns?: keyof TTable["_"]["columns"];
-  defaultOrder: ConvertSortToQueryParamsFallback;
+  defaultOrder: (AnyColumn | SQL)[];
   searchFields: ConvertSearchToQueryParamsFields;
 };
 
@@ -44,10 +49,14 @@ export async function getTableData<TTable extends PgTable, TSchema extends TData
   if (!tableName) throw new Error(`Table name not found for table: ${tableName}`);
 
   // Convert the query params to DB query
-  const { limit, offset } = convertCursorToQueryParams(query);
-  const orderBy = convertOrderByToQueryParams(query, table, defaultSort);
+  const { limit, offset } = parseTableQueryPagination(query);
   const search = convertSearchToQueryParams(query, searchFields);
 
+  const parseTableQuerySorting = createTableQuerySortingParser(getTableColumns(table), {
+    fallback: defaultSort as SQL | SQL[],
+  });
+  const orderBy = parseTableQuerySorting.parse(query);
+
   /**
    * Make a transaction to get the data
    */

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

@@ -11,11 +11,7 @@ import type { InfiniteStrategyMeta } from "./strategy";
 /**
  * Infinite table bottombar
  */
-export function InfinteTableBottombar<TData extends { id: string }>({
-  table,
-}: {
-  table: Table<TData>;
-}) {
+export function InfinteTableBottombar<TData>({ table }: { table: Table<TData> }) {
   const scrollRef = useRef(null);
   const isInView = useInView(scrollRef);
 
@@ -41,11 +37,7 @@ export function InfinteTableBottombar<TData extends { id: string }>({
 /**
  * Infinite table footer
  */
-export function InfinteTableFooter<TData extends { id: string }>({
-  table,
-}: {
-  table: Table<TData>;
-}) {
+export function InfinteTableFooter<TData>({ table }: { table: Table<TData> }) {
   const meta = table.options.meta as TableMeta<TData>;
   const { isFetchingNextPage } = meta.strategy.meta as InfiniteStrategyMeta;
 

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

@@ -11,11 +11,7 @@ import {
   SelectValue,
 } from "@/components/ui/select.client";
 
-export function PaginationTableFooter<TData extends { id: string }>({
-  table,
-}: {
-  table: Table<TData>;
-}) {
+export function PaginationTableFooter<TData>({ table }: { table: Table<TData> }) {
   const selected = Object.keys(table.getState().rowSelection).length;
   const total = table.getRowCount();
 

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

@@ -7,11 +7,11 @@ import { TableBody, TableCell, TableRow } from "@/modules/data-tables/components
 import type { TableColumnDef } from "../../../lib/types";
 import { DataTableRow } from "./row";
 
-type DataTableBodyProps<TData extends { id: string }> = {
+type DataTableBodyProps<TData> = {
   table: Table<TData>;
 };
 
-export function DataTableBody<TData extends { id: string }>({ table }: DataTableBodyProps<TData>) {
+export function DataTableBody<TData>({ table }: DataTableBodyProps<TData>) {
   const { rows } = table.getRowModel();
 
   return (

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

@@ -3,7 +3,7 @@
 import type { Table } from "@tanstack/react-table";
 import { TableHeader, TableHeaderCell, TableHeaderRow } from "../../../components/header";
 
-export function DataTableHeader<TData extends { id: string }>({ table }: { table: Table<TData> }) {
+export function DataTableHeader<TData>({ table }: { table: Table<TData> }) {
   return (
     <TableHeader>
       {table.getHeaderGroups().map((headerGroup) => (

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

@@ -2,30 +2,11 @@ import type { Row, Table } from "@tanstack/react-table";
 import type * as React from "react";
 import { TableRow } from "@/modules/data-tables/components/table";
 
-export type DataTableRowProps<TData extends { id: string }> = React.ComponentProps<
-  typeof TableRow
-> & {
+export type DataTableRowProps<TData> = React.ComponentProps<typeof TableRow> & {
   row: Row<TData>;
   table: Table<TData>;
 };
 
-export function DataTableRow<TData extends { id: string }>({
-  row,
-  table,
-  className,
-  ...props
-}: DataTableRowProps<TData>) {
+export function DataTableRow<TData>({ row, table, className, ...props }: DataTableRowProps<TData>) {
   return <TableRow {...props} data-state={row.getIsSelected() && "selected"} />;
 }
-
-//  <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/data-table/components/table.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { ComponentProps } from "react";
-import { FloatingCommandMenu } from "@/modules/commands/menus/floating-menu.client";
+import { FloatingCommandMenu } from "@/modules/commands/components/menus/floating-menu.client";
 import { TableBottombar, TableFooter } from "@/modules/data-tables/components/footer";
 import { Table } from "@/modules/data-tables/components/table";
 import type { TableMeta } from "@/modules/data-tables/entry";
@@ -9,7 +9,7 @@ import { useTable } from "@/modules/data-tables/hooks/use-table.client";
 import { DataTableBody } from "./body";
 import { DataTableHeader } from "./header";
 
-export function DataTable<TData extends { id: string }>(props: ComponentProps<typeof Table>) {
+export function DataTable<TData>(props: ComponentProps<typeof Table>) {
   const table = useTable<TData>();
   const meta = table.options.meta as TableMeta<TData>;
 

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

@@ -25,7 +25,7 @@ import { useInlineTableContext } from "../hooks/context.client";
 import { useInlineDataTableHotkeys } from "../hooks/use-hotkeys.client";
 import { InlineTableRow } from "./row.client";
 
-export function InlineTableBody<TData extends { id: string }>({ table }: { table: Table<TData> }) {
+export function InlineTableBody<TData>({ table }: { table: Table<TData> }) {
   const context = useInlineTableContext();
 
   const { rows } = table.getRowModel();

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

@@ -1,11 +1,7 @@
 import type { Table } from "@tanstack/react-table";
 import { TableHeader, TableHeaderCell, TableHeaderRow } from "../../../components/header";
 
-export function InlineTableHeader<TData extends { id: string }>({
-  table,
-}: {
-  table: Table<TData>;
-}) {
+export function InlineTableHeader<TData>({ table }: { table: Table<TData> }) {
   return (
     <TableHeader>
       {table.getHeaderGroups().map((headerGroup) => (

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

@@ -5,23 +5,19 @@ import { CSS } from "@dnd-kit/utilities";
 import type { Row, Table } from "@tanstack/react-table";
 import type * as React from "react";
 import { TableRow } from "@/modules/data-tables/components/table";
-import { InlineEditProvider } from "@/modules/inline-edit/entry.client";
 
-export type InlineTableRowProps<TData extends { id: string }> =
-  React.HTMLAttributes<HTMLTableRowElement> & {
-    row: Row<TData>;
-    table: Table<TData>;
-  };
+export type InlineTableRowProps<TData> = React.HTMLAttributes<HTMLTableRowElement> & {
+  row: Row<TData>;
+  table: Table<TData>;
+};
 
-export function InlineTableRow<TData extends { id: string }>({
+export function InlineTableRow<TData>({
   row,
   table,
   children,
   ...props
 }: InlineTableRowProps<TData>) {
-  const rowId = (row.original as { id: string }).id;
-
-  const { setNodeRef, transform, transition } = useSortable({ id: rowId });
+  const { setNodeRef, transform, transition } = useSortable({ id: row.id });
 
   return (
     <TableRow
@@ -33,7 +29,7 @@ export function InlineTableRow<TData extends { id: string }>({
         transition,
       }}
     >
-      <InlineEditProvider id={row.original.id}>{children}</InlineEditProvider>
+      {children}
     </TableRow>
   );
 }

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

@@ -2,7 +2,7 @@
 
 import type { ComponentProps } from "react";
 import { HotkeysProvider } from "react-hotkeys-hook";
-import { FloatingCommandMenu } from "@/modules/commands/menus/floating-menu.client";
+import { FloatingCommandMenu } from "@/modules/commands/components/menus/floating-menu.client";
 import { TableBottombar, TableFooter } from "@/modules/data-tables/components/footer";
 import { Table } from "@/modules/data-tables/components/table";
 import type { TableMeta } from "@/modules/data-tables/entry";
@@ -11,7 +11,7 @@ import { InlineTableProvider } from "../hooks/context.client";
 import { InlineTableBody } from "./body";
 import { InlineTableHeader } from "./header";
 
-export function InlineTable<TData extends { id: string }>({
+export function InlineTable<TData>({
   disabledColumns,
   moveRowAction,
   hotkeys,

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

@@ -47,7 +47,7 @@ export function useInlineTableContext() {
  * Inline form table context provider
  */
 
-export function InlineTableProvider<TData extends { id: string }>({
+export function InlineTableProvider<TData>({
   children,
   disabledColumns,
   moveRowAction,

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

@@ -1,5 +1,4 @@
-import { useHotkeys } from "react-hotkeys-hook";
-import type { Keys } from "react-hotkeys-hook/dist/types";
+import { type Keys, useHotkeys } from "react-hotkeys-hook";
 
 /**
  * Inline input data attribute used to identify navigable cells in the data table.

package/src/modules/inline/components/cell.client.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { AlertCircleIcon } from "lucide-react";
+import type React from "react";
+import { useState } from "react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip.client";
+import { useLocalIndicator } from "@/lib/entry.client";
+import { cn } from "@/lib/utils/cn";
+import { TableCell } from "@/modules/data-tables/entry";
+import { InlineStateContext, useInlineState } from "../hooks/inline-state.client";
+
+/**
+ * Inline Cell
+ */
+export function InlineTableCell({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof TableCell>) {
+  const { status, setStatus } = useLocalIndicator();
+  const [error, setError] = useState<string>();
+
+  return (
+    <InlineStateContext value={{ status, setStatus, error, setError }}>
+      <TableCell
+        {...props}
+        className={cn(
+          "relative 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,
+        )}
+      >
+        {children}
+      </TableCell>
+    </InlineStateContext>
+  );
+}
+
+/**
+ * Inline Cell Error
+ */
+export function InlineTableCellError() {
+  const { error } = useInlineState();
+  if (!error) return null;
+
+  return (
+    <Tooltip>
+      <TooltipTrigger className="absolute top-1/2 right-2 z-10 -translate-y-1/2 text-destructive">
+        <AlertCircleIcon className="size-4" />
+      </TooltipTrigger>
+      <TooltipContent>{error}</TooltipContent>
+    </Tooltip>
+  );
+}

package/src/modules/inline/components/field.client.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import type React from "react";
+import { useState } from "react";
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+} from "@/components/ui/field.client";
+import { useLocalIndicator } from "@/lib/entry.client";
+import { InlineStateContext, useInlineState } from "../hooks/inline-state.client";
+
+/**
+ * Inline Field
+ */
+export function InlineField({ children, ...props }: React.ComponentProps<typeof Field>) {
+  const { status, setStatus } = useLocalIndicator();
+  const [error, setError] = useState<string>();
+  const isInvalid = status === "error" || Boolean(error);
+
+  return (
+    <InlineStateContext value={{ status, setStatus, error, setError }}>
+      <Field data-invalid={isInvalid} {...props}>
+        {children}
+      </Field>
+    </InlineStateContext>
+  );
+}
+
+/**
+ * Inline Field Label
+ */
+export const InlineFieldLabel = FieldLabel;
+
+/**
+ * Inline Field Error
+ */
+export function InlineFieldError(props: Omit<React.ComponentProps<typeof FieldError>, "children">) {
+  const context = useInlineState();
+
+  return <FieldError {...props}>{context.error}</FieldError>;
+}
+
+/**
+ * Inline Field Description
+ */
+export const InlineFieldDescription = FieldDescription;
+
+/**
+ * Inline Field Group and Separator
+ */
+export const InlineFieldGroup = FieldGroup;
+export const InlineFieldSeparator = FieldSeparator;
+
+/**
+ * Inline Field Set and Legend
+ */
+export const InlineFieldSet = FieldSet;
+export const InlineFieldLegend = FieldLegend;

package/src/modules/inline/components/inputs/combobox-dropdown.client.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import type { DefaultError } from "@tanstack/react-query";
+import type { z } from "zod";
+import {
+  ComboboxDropdown,
+  type ComboboxDropdownItem,
+  type ComboboxDropdownProps,
+} from "@/components/ui/combobox-dropdown.client";
+import { cn } from "@/lib/utils/cn";
+import { useInlineState } from "../../hooks/inline-state.client";
+import {
+  useInlineAccess,
+  type useInlineEditOptions,
+  useInlineMutation,
+  useInlineStrategy,
+} from "../../hooks/use-inline.client";
+import { type InlineEditVariantsProps, inlineEditVariants } from "../../lib/variants";
+
+type ComboboxDropdownInlineTrigger = "commit";
+
+export type InlineEditComboboxDropdownProps<
+  TValue extends ComboboxDropdownItem,
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+> = useInlineEditOptions<
+  ComboboxDropdownInlineTrigger,
+  z.ZodString | z.ZodNullable<z.ZodString>,
+  TData,
+  TError,
+  TVariables,
+  TOnMutateResult
+> &
+  InlineEditVariantsProps &
+  Omit<ComboboxDropdownProps<TValue>, "onSelect"> & {
+    onSelect?: ComboboxDropdownProps<TValue>["onSelect"];
+  };
+
+export function InlineComboboxDropdown<
+  TValue extends ComboboxDropdownItem,
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+>({
+  selectedItem,
+  variant,
+  className,
+  onSelect,
+  initialValue,
+  variables,
+  mutation,
+  permission,
+  strategy,
+  disabled,
+  ...props
+}: InlineEditComboboxDropdownProps<TValue, TData, TError, TVariables, TOnMutateResult>) {
+  const state = useInlineState<string | null>(initialValue);
+  const access = useInlineAccess({ permission, disabled });
+  const mutations = useInlineMutation<
+    z.ZodString | z.ZodNullable<z.ZodString>,
+    string | null,
+    TData,
+    TError,
+    TVariables,
+    TOnMutateResult
+  >({
+    variables,
+    mutation,
+    access,
+    state,
+  });
+
+  const { handleTrigger } = useInlineStrategy<
+    ComboboxDropdownInlineTrigger,
+    z.ZodString | z.ZodNullable<z.ZodString>,
+    string | null
+  >({
+    strategy,
+    state,
+    mutations,
+    parser: {
+      decode: (value) => value,
+      encode: (value) => value,
+    },
+  });
+
+  const resolvedValue = state.value ?? initialValue ?? null;
+  const valueSelectedItem =
+    resolvedValue !== null ? props.items.find((item) => item.id === resolvedValue) : undefined;
+
+  return (
+    <ComboboxDropdown
+      {...props}
+      className={cn(inlineEditVariants({ variant, status: state.status }), className)}
+      disabled={access.isDisabled}
+      selectedItem={selectedItem ?? valueSelectedItem}
+      onSelect={(event) => {
+        handleTrigger("commit", event.id ?? null);
+        onSelect?.(event);
+      }}
+    />
+  );
+}

package/src/modules/inline/components/inputs/combobox.client.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import type { DefaultError } from "@tanstack/react-query";
+import type { z } from "zod";
+import { Combobox, type ComboboxProps } from "@/components/ui/combobox.client";
+import { useInlineState } from "../../hooks/inline-state.client";
+import {
+  useInlineAccess,
+  type useInlineEditOptions,
+  useInlineMutation,
+  useInlineStrategy,
+} from "../../hooks/use-inline.client";
+
+type ComboboxInlineTrigger = "commit";
+
+export type InlineComboboxProps<
+  TValue,
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+> = useInlineEditOptions<
+  ComboboxInlineTrigger,
+  z.ZodString | z.ZodNullable<z.ZodString>,
+  TData,
+  TError,
+  TVariables,
+  TOnMutateResult
+> &
+  Omit<ComboboxProps<TValue>, "value">;
+
+export function InlineCombobox<
+  TValue,
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+>({
+  initialValue,
+  variables,
+  mutation,
+  permission,
+  onSelect,
+  onBlur,
+  disabled,
+  strategy,
+  ...props
+}: InlineComboboxProps<TValue, TData, TError, TVariables, TOnMutateResult>) {
+  const state = useInlineState<string | null>(initialValue);
+  const access = useInlineAccess({ permission, disabled });
+  const mutations = useInlineMutation<
+    z.ZodString | z.ZodNullable<z.ZodString>,
+    string | null,
+    TData,
+    TError,
+    TVariables,
+    TOnMutateResult
+  >({
+    variables,
+    mutation,
+    access,
+    state,
+  });
+
+  const { handleTrigger } = useInlineStrategy<
+    ComboboxInlineTrigger,
+    z.ZodString | z.ZodNullable<z.ZodString>,
+    string | null
+  >({
+    strategy,
+    state,
+    mutations,
+    parser: {
+      decode: (value) => value,
+      encode: (value) => value,
+    },
+  });
+
+  return (
+    <Combobox
+      {...props}
+      value={state.value}
+      disabled={access.isDisabled}
+      onSelect={(value) => {
+        handleTrigger("commit", (value as string | null | undefined) ?? null);
+        onSelect?.(value as TValue);
+      }}
+      onBlur={(e) => {
+        handleTrigger("commit", e.target.value ? e.target.value : null);
+        onBlur?.(e);
+      }}
+    />
+  );
+}