@tulip-systems/core 0.4.1 → 0.5.0

package/src/modules/commands/hooks/{use-command-action.client.tsx → use-command-mutation.client.tsx}

@@ -2,7 +2,7 @@
 
 import { useAction } from "@/lib/hooks/use-action";
 import type { DefaultError, MutationFunction, MutationOptions } from "@tanstack/react-query";
-import { toast } from "sonner";
+import { useRouter } from "next/navigation";
 import { useCommand } from "./context.client";
 
 export type CommandActionResult = Promise<unknown>;
@@ -10,58 +10,17 @@ export type CommandActionResult = Promise<unknown>;
 export type CommandAction<TInput = void> = (input: TInput) => CommandActionResult;
 export type BulkCommandAction = (params: { ids: string[] }) => CommandActionResult;
 
-/**
- * Hook to use command
- * @returns Command context value
- */
-export function useCommandAction<TInput = void>(
-  action: CommandAction<TInput>,
-  options?: {
-    message?: string;
-    onSuccess?: () => Promise<void> | void;
-    onError?: () => Promise<void> | void;
-  },
-) {
-  const commandContext = useCommand();
-
-  const { mutateAsync } = useAction({
-    mutationFn: action,
-    onMutate: () => {
-      commandContext.setStatus("pending");
-    },
-    onSuccess: async () => {
-      commandContext.setStatus("success");
-      toast.success(options?.message || "Actie voltooid!");
-      await options?.onSuccess?.();
-      await commandContext.onSuccess?.();
-    },
-    onRedirect: async () => {
-      commandContext.setStatus("success");
-      toast.success(options?.message || "Actie voltooid!");
-      await options?.onSuccess?.();
-      await commandContext.onSuccess?.();
-    },
-    onError: async () => {
-      commandContext.setStatus("error");
-      await options?.onError?.();
-      await commandContext.onError?.();
-    },
-    onSettled: () => {
-      commandContext.setStatus("idle");
-      // finnalyCallback?.();
-      // options?.callback?.();
-    },
-  });
-
-  return mutateAsync as (input: TInput) => CommandActionResult;
-}
+export type CommandMutationMeta = {
+  router: ReturnType<typeof useRouter>;
+};
 
-export function useCommandAction2<
+export function useCommandMutation<
   TData = unknown,
   TError = DefaultError,
   TVariables = void,
   TOnMutateResult = unknown,
 >(options?: MutationOptions<TData, TError, TVariables, TOnMutateResult>) {
+  const router = useRouter();
   const commandContext = useCommand();
 
   const mutation = useAction({
@@ -97,6 +56,9 @@ export function useCommandAction2<
 
       return await result;
     },
+    meta: {
+      router,
+    } satisfies CommandMutationMeta,
   });
 
   return mutation;

package/src/modules/commands/utils/delete-command.client.tsx

@@ -18,7 +18,7 @@ import { CommandLabel } from "../components/command-trigger.client";
 export type DeleteCommandProps<
   TData = unknown,
   TError = DefaultError,
-  TVariables = { ids: string[] },
+  TVariables = unknown,
   TOnMutateResult = unknown,
 > = {
   variables: TVariables;
@@ -31,7 +31,7 @@ export type DeleteCommandProps<
 export function DeleteCommand<
   TData = unknown,
   TError = DefaultError,
-  TVariables = { ids: string[] },
+  TVariables = unknown,
   TOnMutateResult = unknown,
 >({ variables, mutation }: DeleteCommandProps<TData, TError, TVariables, TOnMutateResult>) {
   return (
@@ -62,3 +62,15 @@ export function DeleteCommand<
     </CommandAlertDialog>
   );
 }
+
+/**
+ * Single Delete command
+ */
+export function SingleDeleteCommand<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = { id: string },
+  TOnMutateResult = unknown,
+>({ variables, mutation }: DeleteCommandProps<TData, TError, TVariables, TOnMutateResult>) {
+  return <DeleteCommand variables={variables} mutation={mutation} />;
+}

package/src/modules/config/db/create-client.ts

@@ -2,18 +2,25 @@ import "server-cli-only";
 
 import { drizzle, PostgresJsDatabase } from "drizzle-orm/postgres-js";
 import postgres from "postgres";
-import { TulipConfig } from "../lib/config.server";
 import { TDatabaseSchema } from "./types";
 
 declare global {
-  // eslint-disable-next-line no-var, @typescript-eslint/no-explicit-any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   var db: PostgresJsDatabase<any> | undefined;
 }
 
+type CreateDatabaseClientProps<TSchema extends TDatabaseSchema> = {
+  schema: TSchema;
+  pool: {
+    connectionString: string;
+    max?: number;
+  };
+};
+
 export function createDatabaseClient<TSchema extends TDatabaseSchema>(
-  database: TulipConfig<TSchema>["database"],
+  props: CreateDatabaseClientProps<TSchema>,
 ) {
-  const { pool, schema } = database;
+  const { pool, schema } = props;
 
   let db: PostgresJsDatabase<TSchema>;
 

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

@@ -6,5 +6,4 @@ export * from "./db/init";
 /**
  * Providers
  */
-export * from "./providers/blob";
 export * from "./providers/email";

package/src/modules/config/lib/config.ts

@@ -1,4 +1,4 @@
-export type TulipConfig = {
+export type TulipConfig<TValues> = {
   general: {
     name: string;
     shortName: string;
@@ -6,10 +6,10 @@ export type TulipConfig = {
   email: {
     defaultFrom: string;
   };
-};
+} & TValues;
 
 /**
  * Build the Tulip config
  */
 
-export const defineTulipConfig = (config: TulipConfig): TulipConfig => config;
+export const defineTulipConfig = <TValues>(config: TulipConfig<TValues>): TulipConfig<TValues> => config;

package/src/modules/config/lib/context.ts

@@ -1,7 +1,7 @@
+import { StorageClient } from "@/modules/storage/lib/create-client.server";
 import { AuthClient } from "../../auth/handler/init";
 import { DatabaseClient } from "../db/init";
 import { TDatabaseSchema } from "../entry";
-import { BlobClient } from "../providers/blob";
 import { EmailClient } from "../providers/email";
 
 export type TulipContext<TSchema extends TDatabaseSchema> = {
@@ -9,7 +9,7 @@ export type TulipContext<TSchema extends TDatabaseSchema> = {
   schema: TSchema;
   auth: AuthClient;
   email: EmailClient;
-  blob: BlobClient;
+  storage: StorageClient<TSchema>;
 };
 
 export function createContext<TSchema extends TDatabaseSchema>(props: TulipContext<TSchema>) {

package/src/modules/data-tables/components/filters/combobox.client.tsx

@@ -114,9 +114,9 @@ export function TableFilterCombobox<TValue extends string>({
                       <Check className="text-foreground h-4 w-4" />
                     </div>
 
-                    <div className={cn("flex flex-1 items-center gap-2", option.className)}>
-                      {Icon && <Icon className="size-4" />}
-                      <span>{option.label}</span>
+                    <div className="flex flex-1 items-center gap-2">
+                      {Icon && <Icon className={cn("size-4", option.className)} />}
+                      <span className={cn(option.className)}>{option.label}</span>
                     </div>
 
                     {option.total !== undefined && (

package/src/modules/data-tables/entry.ts

@@ -12,9 +12,9 @@ export * from "./components/toolbar";
  * Lib
  */
 export * from "./lib/filters/config";
+export * from "./lib/filters/helpers";
 export * from "./lib/filters/parsers";
 export * from "./lib/filters/resolvers";
 export * from "./lib/search-params";
 export * from "./lib/types";
 export * from "./lib/validators";
-

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

@@ -11,7 +11,8 @@ import {
   useEffect,
   useState,
 } from "react";
-import type { Selection, TableColumnDef, TableStrategy } from "../lib/types";
+import { TableFiltersResult } from "../lib/filters/config";
+import type { Selection, TableColumnDef, TableMetaInput, TableStrategy } from "../lib/types";
 
 type useReactTableProps<TData extends { id: string }> = Omit<
   TableOptions<TData>,
@@ -23,7 +24,11 @@ type useReactTableProps<TData extends { id: string }> = Omit<
 /**
  * Use table config
  */
-export type TableConfigContextValue<TData extends { id: string }> = useReactTableProps<TData> & {
+export type TableConfigContextValue<
+  TData extends { id: string },
+  TFilters extends TableFiltersResult = TableFiltersResult,
+  TMeta extends TableMetaInput<TData> = TableMetaInput<TData>,
+> = useReactTableProps<TData> & {
   queryData: TData[];
   data: TData[];
   setData: Dispatch<SetStateAction<TData[]>>;
@@ -31,7 +36,9 @@ export type TableConfigContextValue<TData extends { id: string }> = useReactTabl
   strategy: TableStrategy;
   selection?: Selection;
   columnVisibility?: VisibilityState;
-  commands?: CommandDef<TData>[];
+  commands?: CommandDef<TData, TMeta>[];
+  meta?: TMeta;
+  where?: TFilters;
 };
 
 const TableConfigContext = createContext({});
@@ -41,19 +48,25 @@ const TableConfigContext = createContext({});
  */
 export function useTableConfigContext<
   TData extends { id: string },
->(): TableConfigContextValue<TData> {
+  TFilters extends TableFiltersResult = TableFiltersResult,
+  TMeta extends TableMetaInput<TData> = TableMetaInput<TData>,
+>(): TableConfigContextValue<TData, TFilters, TMeta> {
   const context = use(TableConfigContext);
   if (!context) throw new Error("TableConfigContext not found!");
-  return context as TableConfigContextValue<TData>;
+  return context as TableConfigContextValue<TData, TFilters, TMeta>;
 }
 
 /**
  * Table context provider
  */
-export function TableConfigProvider<TData extends { id: string }>({
+export function TableConfigProvider<
+  TData extends { id: string },
+  TFilters extends TableFiltersResult = TableFiltersResult,
+  TMeta extends TableMetaInput<TData> = TableMetaInput<TData>,
+>({
   children,
   config,
-}: PropsWithChildren<{ config: CreateTableConfigInput<TData> }>) {
+}: PropsWithChildren<{ config: CreateTableConfigInput<TData, TFilters, TMeta> }>) {
   const [data, setData] = useState(config.queryData);
   useEffect(() => setData(config.queryData), [config.queryData]);
 
@@ -63,11 +76,16 @@ export function TableConfigProvider<TData extends { id: string }>({
 /**
  * Create use table config hook
  */
-type CreateTableConfigInput<TData extends { id: string }> = Omit<
-  TableConfigContextValue<TData>,
-  "data" | "setData"
->;
+type CreateTableConfigInput<
+  TData extends { id: string },
+  TFilters extends TableFiltersResult = TableFiltersResult,
+  TMeta extends TableMetaInput<TData> = TableMetaInput<TData>,
+> = Omit<TableConfigContextValue<TData, TFilters, TMeta>, "data" | "setData">;
 
-export const createTableConfig = <TData extends { id: string }>(
-  config: CreateTableConfigInput<TData>,
+export const createTableConfig = <
+  TData extends { id: string },
+  TFilters extends TableFiltersResult = TableFiltersResult,
+  TMeta extends TableMetaInput<TData> = TableMetaInput<TData>,
+>(
+  config: CreateTableConfigInput<TData, TFilters, TMeta>,
 ) => config;

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

@@ -14,9 +14,12 @@ import { useSelection } from "./use-selection.client";
 /**
  * Server data table
  */
-export function useTable<TData extends { id: string }>() {
+export function useTable<
+  TData extends { id: string },
+  TMeta extends TableMeta<TData> = TableMeta<TData>,
+>() {
   const { data, strategy, selection, columnVisibility, commands, ...options } =
-    useTableConfigContext<TData>();
+    useTableConfigContext<TData, TMeta>();
 
   const { rowSelection, selectedData, onRowSelectionChange } = useSelection({
     data,
@@ -52,6 +55,6 @@ export function useTable<TData extends { id: string }>() {
     onColumnFiltersChange: setColumnFilters,
     enableHiding: true,
     onColumnVisibilityChange: setColumnVisibility,
-    meta: { ...options.meta, selectedData, commands, strategy } satisfies TableMeta<TData>,
+    meta: { ...options.meta, selectedData, commands, strategy } satisfies TableMeta<TData, TMeta>,
   });
 }

package/src/modules/data-tables/lib/filters/config.ts

@@ -2,5 +2,6 @@ import { ZodType } from "zod";
 import { ParseFilter } from "./parsers";
 
 export type TableFiltersDef = { readonly [k: string]: ParseFilter<ZodType> };
+export type TableFiltersResult = { readonly [k: string]: unknown };
 
 export const createTableFilters = <TDef extends TableFiltersDef>(def: TDef) => def;

package/src/modules/data-tables/lib/filters/helpers.ts

@@ -0,0 +1,19 @@
+import deepmerge from "deepmerge";
+
+export const mergeFilters = deepmerge;
+
+/**
+ * Converts visibility state to filter config
+ */
+export function parseFiltersVisibility<TKey extends string>(
+  config: TKey[],
+  visibilityState: Partial<Record<TKey, boolean>> | undefined,
+): Record<TKey, boolean> {
+  return config.reduce(
+    (acc, key) => ({
+      ...acc,
+      [key]: visibilityState?.[key] === undefined ? true : visibilityState[key],
+    }),
+    {} as Record<TKey, boolean>,
+  );
+}

package/src/modules/data-tables/lib/filters/parsers.ts

@@ -8,7 +8,20 @@ export type ParseFilter<TSchema extends z.ZodType> = {
 };
 
 /**
- * Filter uuid array
+ * Filter string
+ */
+export type ParseFilterStringSchema = z.ZodString;
+
+export const parseFilterString = <TSchema extends ParseFilterStringSchema>(
+  schema: TSchema,
+): ParseFilter<TSchema> => ({
+  schema: schema.nullable(),
+  decode: (encoded) => (encoded?.trim() ?? null) as unknown as z.input<TSchema>,
+  encode: (decoded) => decoded ?? "",
+});
+
+/**
+ * Filter string array
  */
 export type ParseFilterArraySchema = z.ZodArray<ZodType>;
 

package/src/modules/data-tables/lib/filters/resolvers.ts

@@ -46,6 +46,14 @@ export function resolveFilterDescriptors<TDef extends TableFiltersDef>(def: TDef
   };
 }
 
+/**
+ * Resolvers for the visibility state config
+ * @returns array of keys
+ */
+export function resolveVisibilityState<TDef extends TableFiltersDef>(def: TDef) {
+  return typedEntries(def).map(([key]) => key) as (keyof TDef)[];
+}
+
 /**
  * Helpers
  */

package/src/modules/data-tables/lib/types.ts

@@ -1,16 +1,23 @@
 import { Permission } from "@/modules/auth/lib/permissions";
 import { CommandDef } from "@/modules/commands/lib/definitions";
 import type { RowSelectionState, Updater } from "@tanstack/react-table";
-import { ColumnDef, PaginationState, SortingState } from "@tanstack/react-table";
+import {
+  ColumnDef,
+  PaginationState,
+  SortingState,
+  TableMeta as TanStackTableMeta,
+} from "@tanstack/react-table";
 import { UseQueryStatesKeysMap } from "nuqs";
 
 /**
  * Data table meta
  */
-export type TableMeta<TData extends { id: string }> = {
+export type TableMetaInput<TData extends { id: string }> = TanStackTableMeta<TData>;
+
+export type TableMeta<TData extends { id: string }, TMeta = TableMetaInput<TData>> = {
   strategy: TableStrategy;
   selectedData: TData[];
-  commands?: CommandDef<TData>[];
+  commands?: CommandDef<TData, TMeta>[];
 };
 
 /**

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

@@ -40,7 +40,7 @@ export function TableDragHandle<TData, TValue>({ row, className, disabled }:  Ta
  * Create a new column with the drag handle
  */
 export const createTableDragHandleCell = createTableCell({
-  id: "drag-handle",
+  id: "dragHandle",
   cell: TableDragHandle,
   enableHiding: false,
   enableSorting: false,

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

@@ -21,12 +21,19 @@ export function InlineComboboxDropdown<TValue extends ComboboxDropdownItem>({
   variant,
   className,
   onSelect,
+  initialValue,
+  action,
+  permission,
   disabled,
   ...props
 }: InlineEditComboboxDropdownProps<TValue>) {
-  const { setValue, handleUpdate, isAllowed } = useInlineEdit(props);
+  const { setValue, handleUpdate, isAllowed } = useInlineEdit({
+    initialValue,
+    action,
+    permission,
+  });
 
-  const initialSelectedItem = props.items.find((item) => item.id === props.initialValue);
+  const initialSelectedItem = props.items.find((item) => item.id === initialValue);
 
   return (
     <ComboboxDropdown

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

@@ -7,12 +7,19 @@ export type InlineComboboxProps<TValue> = useInlineEditOptions<string> &
   Omit<ComboboxProps<TValue>, "value">;
 
 export function InlineCombobox<TValue>({
+  initialValue,
+  action,
+  permission,
   onSelect,
   onBlur,
   disabled,
   ...props
 }: InlineComboboxProps<TValue>) {
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit(props);
+  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+    initialValue,
+    action,
+    permission,
+  });
 
   return (
     <Combobox

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

@@ -9,21 +9,25 @@ import { format } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import React, { ComponentProps } from "react";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
+import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
 
 const formatDate = (value: Date) => format(value, "dd/MM/yyyy");
 const parseDate = (value: string) => new Date(value.split("/").reverse().join("-"));
 
 export function InlineDateInput({
   initialValue,
-  className,
   action,
+  permission,
+  variant,
+  className,
   ...props
-}: ComponentProps<"div"> & useInlineEditOptions<Date>) {
+}: ComponentProps<"div"> & useInlineEditOptions<Date> & InlineEditVariantsProps) {
   const [inValid, setInValid] = React.useState<boolean>(false);
 
   const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
     initialValue,
     action,
+    permission,
   });
 
   const [stringDate, setStringDate] = React.useState<string>(
@@ -32,7 +36,7 @@ export function InlineDateInput({
 
   return (
     <Popover>
-      <div {...props} className={cn("relative h-full", className)}>
+      <div {...props} className={cn("relative h-full", inlineEditVariants({ variant }), className)}>
         <Input
           data-input
           type="string"

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

@@ -8,11 +8,17 @@ import { formatDate } from "@/lib/utils/format";
 import { CalendarIcon } from "lucide-react";
 import React, { ComponentProps } from "react";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
+import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
 
-type InlineEditDatePickerProps = ComponentProps<typeof Button> & useInlineEditOptions<Date>;
+type InlineEditDatePickerProps = ComponentProps<typeof Button> &
+  useInlineEditOptions<Date> &
+  InlineEditVariantsProps;
 
 export function InlineDatePicker({
   initialValue,
+  action,
+  permission,
+  variant,
   className,
   disabled,
   ...props
@@ -21,7 +27,8 @@ export function InlineDatePicker({
 
   const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
     initialValue,
-    action: props.action,
+    action,
+    permission,
   });
 
   return (
@@ -37,7 +44,7 @@ export function InlineDatePicker({
           {...props}
           type="button"
           variant="outline"
-          className={cn("w-full", className)}
+          className={cn("w-full", inlineEditVariants({ variant }), className)}
           disabled={disabled || !isAllowed}
         >
           <CalendarIcon className="mr-2 h-4 w-4" />

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

@@ -0,0 +1,48 @@
+"use client";
+
+import { EDITOR_EXTENSIONS_VALUES } from "@/components/editor/lib/constants";
+import { cn } from "@/lib/utils/cn";
+import { EditorContent, JSONContent, useEditor } from "@tiptap/react";
+import { ComponentProps } from "react";
+import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
+import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
+
+/**
+ * @deprecated
+ */
+export function InlineEditorDeprecated({
+  initialValue,
+  action,
+  variant,
+  className,
+  disabled,
+  ...props
+}: Omit<ComponentProps<"input">, "type"> &
+  useInlineEditOptions<JSONContent> &
+  InlineEditVariantsProps) {
+  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+    initialValue,
+    action,
+  });
+
+  const editor = useEditor({
+    extensions: EDITOR_EXTENSIONS_VALUES,
+    content: value,
+    editable: !disabled && isAllowed,
+    immediatelyRender: false,
+    injectCSS: false,
+    onUpdate: ({ editor }) => setValue(editor.getJSON()),
+    onBlur: ({ editor }) => handleUpdate(editor.getJSON()),
+    editorProps: {
+      attributes: {
+        class: cn(
+          "prose max-w-full bg-background ring-offset-background rounded-md border border-input dark:prose-invert p-3 focus:outline-none prose-a:text-primary prose-li:marker:text-primary ring-offset-background file:text-foreground placeholder:text-muted-foreground focus-visible:ring-ring rounded-md border text-base file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 [&[contenteditable=false]]:opacity-50 [&[contenteditable=false]]:cursor-not-allowed md:text-sm",
+          inlineEditVariants({ variant }),
+          className,
+        ),
+      },
+    },
+  });
+
+  return <EditorContent {...props} editor={editor} />;
+}