@tulip-systems/core 0.5.1 → 0.5.3

package/src/lib/hooks/use-indicator.tsx

@@ -9,25 +9,9 @@ import { createContext, useContext, useEffect, useState, useTransition } from "r
 export type IndicatorStatus = "idle" | "pending" | "success" | "error";
 
 /**
- * Indicator context
+ * Use local indicator
  */
-type IndicatorContextType = {
-  status: IndicatorStatus;
-  setStatus: React.Dispatch<React.SetStateAction<IndicatorStatus>>;
-  startTransition: React.TransitionStartFunction;
-};
-
-export const IndicatorContext = createContext<IndicatorContextType>({} as IndicatorContextType);
-
-/**
- * Inline edit indicator context
- */
-export const useIndicator = () => useContext(IndicatorContext);
-
-/**
- * Indicator context provider
- */
-export function IndicatorContextProvider({ children }: { children: React.ReactNode }) {
+export function useLocalIndicator() {
   /**
    * Start transition
    */
@@ -54,6 +38,31 @@ export function IndicatorContextProvider({ children }: { children: React.ReactNo
     if (status === "error") setTimeout(() => setStatus("idle"), 2000);
   }, [status]);
 
+  return { status, setStatus, startTransition };
+}
+
+/**
+ * Indicator context
+ */
+type IndicatorContextType = {
+  status: IndicatorStatus;
+  setStatus: React.Dispatch<React.SetStateAction<IndicatorStatus>>;
+  startTransition: React.TransitionStartFunction;
+};
+
+export const IndicatorContext = createContext<IndicatorContextType>({} as IndicatorContextType);
+
+/**
+ * Inline edit indicator context
+ */
+export const useIndicator = () => useContext(IndicatorContext);
+
+/**
+ * Indicator context provider
+ */
+export function IndicatorContextProvider({ children }: { children: React.ReactNode }) {
+  const { status, setStatus, startTransition } = useLocalIndicator();
+
   return (
     <IndicatorContext.Provider value={{ status, setStatus, startTransition }}>
       {children}

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

@@ -65,6 +65,20 @@ export const parseFilterBoolean = <TSchema extends z.ZodType<boolean>>(
   encode: (decoded) => (decoded ? "true" : "false"),
 });
 
+/**
+ * Filter datetime value
+ */
+export type ParseFilterDatetimeSchema = z.ZodDate;
+
+export const parseFilterDatetime = <TSchema extends ParseFilterDatetimeSchema>(
+  schema: TSchema,
+): ParseFilter<TSchema> => ({
+  schema: schema.nullable(),
+  decode: (encoded) => (encoded ? new Date(encoded) : null) as unknown as z.input<TSchema>,
+  encode: (decoded) => (decoded ? decoded.toISOString() : ""),
+});
+
+
 /**
  * Filter range value
  */

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

@@ -9,14 +9,19 @@ import { cn } from "@/lib/utils/cn";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
 import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
 
-export type InlineEditComboboxDropdownProps<TValue extends ComboboxDropdownItem> =
-  useInlineEditOptions<string> &
-    InlineEditVariantsProps &
-    Omit<ComboboxDropdownProps<TValue>, "onSelect"> & {
-      onSelect?: ComboboxDropdownProps<TValue>["onSelect"];
-    };
+export type InlineEditComboboxDropdownProps<
+  TValue extends ComboboxDropdownItem,
+  Required extends boolean = false,
+> = useInlineEditOptions<string, Required> &
+  InlineEditVariantsProps &
+  Omit<ComboboxDropdownProps<TValue>, "onSelect"> & {
+    onSelect?: ComboboxDropdownProps<TValue>["onSelect"];
+  };
 
-export function InlineComboboxDropdown<TValue extends ComboboxDropdownItem>({
+export function InlineComboboxDropdown<
+  TValue extends ComboboxDropdownItem,
+  Required extends boolean,
+>({
   selectedItem,
   variant,
   className,
@@ -24,13 +29,17 @@ export function InlineComboboxDropdown<TValue extends ComboboxDropdownItem>({
   initialValue,
   action,
   permission,
+  updateStrategy,
+  isRequired,
   disabled,
   ...props
-}: InlineEditComboboxDropdownProps<TValue>) {
-  const { setValue, handleUpdate, isAllowed } = useInlineEdit({
+}: InlineEditComboboxDropdownProps<TValue, Required>) {
+  const { handleChange, handleBlur, isAllowed, status } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
   const initialSelectedItem = props.items.find((item) => item.id === initialValue);
@@ -38,12 +47,12 @@ export function InlineComboboxDropdown<TValue extends ComboboxDropdownItem>({
   return (
     <ComboboxDropdown
       {...props}
-      className={cn(inlineEditVariants({ variant }), className)}
+      className={cn(inlineEditVariants({ variant, status }), className)}
       disabled={disabled || !isAllowed}
       selectedItem={selectedItem ?? initialSelectedItem}
       onSelect={(event) => {
-        setValue(event.id);
-        handleUpdate(event.id);
+        handleChange(event.id ?? null);
+        handleBlur(event.id ?? null);
         onSelect?.(event);
       }}
     />

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

@@ -3,22 +3,29 @@
 import { Combobox, ComboboxProps } from "@/components/ui/combobox.client";
 import { useInlineEdit, useInlineEditOptions } from "../hooks/use-inline.client";
 
-export type InlineComboboxProps<TValue> = useInlineEditOptions<string> &
+export type InlineComboboxProps<TValue, Required extends boolean = false> = useInlineEditOptions<
+  string,
+  Required
+> &
   Omit<ComboboxProps<TValue>, "value">;
 
-export function InlineCombobox<TValue>({
+export function InlineCombobox<TValue, Required extends boolean>({
   initialValue,
   action,
   permission,
   onSelect,
   onBlur,
   disabled,
+  updateStrategy,
+  isRequired,
   ...props
-}: InlineComboboxProps<TValue>) {
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+}: InlineComboboxProps<TValue, Required>) {
+  const { value, handleChange, handleBlur, isAllowed } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
   return (
@@ -27,11 +34,11 @@ export function InlineCombobox<TValue>({
       value={value}
       disabled={disabled || !isAllowed}
       onSelect={(value) => {
-        setValue(value);
+        handleChange(value ?? null);
         onSelect?.(value as TValue);
       }}
       onBlur={(e) => {
-        handleUpdate(e.target.value);
+        handleBlur(e.target.value ?? null);
         onBlur?.(e);
       }}
     />

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

@@ -13,41 +13,53 @@ 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("-"));
+const isValidDate = (date: Date) => date instanceof Date && date.toString() !== "Invalid Date";
 
-export function InlineDateInput({
+export function InlineDateInput<Required extends boolean = false>({
   initialValue,
   action,
   permission,
   variant,
   className,
+  updateStrategy,
+  isRequired,
   ...props
-}: ComponentProps<"div"> & useInlineEditOptions<Date> & InlineEditVariantsProps) {
+}: ComponentProps<"div"> & useInlineEditOptions<Date, Required> & InlineEditVariantsProps) {
   const [inValid, setInValid] = React.useState<boolean>(false);
 
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+  const { value, setValue, handleChange, handleBlur, status, isAllowed } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
   const [stringDate, setStringDate] = React.useState<string>(
     initialValue ? formatDate(initialValue) : "",
   );
 
+  /**
+   * Update string date when value changes
+   */
+  React.useEffect(() => {
+    if (value) setStringDate(formatDate(value));
+  }, [value]);
+
   return (
     <Popover>
-      <div {...props} className={cn("relative h-full", inlineEditVariants({ variant }), className)}>
+      <div {...props} className={cn("relative h-full", className)}>
         <Input
           data-input
           type="string"
           value={stringDate}
-          className={cn(inValid && "text-destructive")}
+          className={cn(inlineEditVariants({ variant, status }), inValid && "text-destructive")}
           disabled={!isAllowed}
           onChange={(e) => {
             setStringDate(e.target.value);
             const parsedDate = parseDate(e.target.value);
 
-            if (parsedDate.toString() === "Invalid Date") {
+            if (!isValidDate(parsedDate)) {
               setInValid(true);
               setValue(undefined);
             } else {
@@ -57,7 +69,7 @@ export function InlineDateInput({
           }}
           onBlur={(e) => {
             const parsedDate = parseDate(e.target.value);
-            handleUpdate(parsedDate);
+            handleBlur(isValidDate(parsedDate) ? parsedDate : null);
           }}
         />
 
@@ -75,18 +87,22 @@ export function InlineDateInput({
           </Button>
         </PopoverTrigger>
       </div>
+
       <PopoverContent className="w-auto p-0">
         <Calendar
           mode="single"
-          initialFocus
-          selected={value}
-          defaultMonth={value}
-          disabled={status === "pending"}
+          autoFocus
+          selected={value ?? undefined}
+          defaultMonth={value ?? undefined}
+          disabled={!isAllowed}
           onSelect={(selectedDate) => {
             if (!selectedDate) return;
-            setValue(selectedDate);
+
             setStringDate(formatDate(selectedDate));
-            handleUpdate(selectedDate);
+
+            handleChange(selectedDate ?? null);
+            handleBlur(selectedDate ?? null);
+
             setInValid(false);
           }}
         />

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

@@ -10,25 +10,29 @@ 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<Required extends boolean> = ComponentProps<typeof Button> &
+  useInlineEditOptions<Date, Required> &
   InlineEditVariantsProps;
 
-export function InlineDatePicker({
+export function InlineDatePicker<Required extends boolean = false>({
   initialValue,
   action,
   permission,
   variant,
   className,
   disabled,
+  updateStrategy,
+  isRequired,
   ...props
-}: InlineEditDatePickerProps) {
+}: InlineEditDatePickerProps<Required>) {
   const [open, setOpen] = React.useState(false);
 
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+  const { value, handleChange, handleBlur, isAllowed, status } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
   return (
@@ -36,7 +40,7 @@ export function InlineDatePicker({
       open={open}
       onOpenChange={(open) => {
         setOpen(open);
-        if (!open && value) handleUpdate(value);
+        if (!open && value) handleBlur(value);
       }}
     >
       <PopoverTrigger asChild>
@@ -44,7 +48,7 @@ export function InlineDatePicker({
           {...props}
           type="button"
           variant="outline"
-          className={cn("w-full", inlineEditVariants({ variant }), className)}
+          className={cn("w-full", inlineEditVariants({ variant, status }), className)}
           disabled={disabled || !isAllowed}
         >
           <CalendarIcon className="mr-2 h-4 w-4" />
@@ -55,9 +59,9 @@ export function InlineDatePicker({
       <PopoverContent className="w-auto p-0">
         <Calendar
           mode="single"
+          autoFocus
           selected={value ? new Date(value) : undefined}
-          onSelect={(date) => date && setValue(date)}
-          initialFocus
+          onSelect={(date) => handleChange(date ?? null)}
         />
       </PopoverContent>
     </Popover>

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

@@ -6,40 +6,40 @@ import { cn } from "@/lib/utils/cn";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
 import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
 
-export type InlineEditorProps = useInlineEditOptions<EditorJSONContent> &
+export type InlineEditorProps<Required extends boolean = false> = useInlineEditOptions<
+  EditorJSONContent,
+  Required
+> &
   InlineEditVariantsProps &
   Omit<EditorProps, "value" | "onUpdate" | "onBlur" | "variant">;
 
-export function InlineEditor({
+export function InlineEditor<Required extends boolean = false>({
   initialValue,
   action,
   extensions,
   variant,
   disabled,
   permission,
+  updateStrategy,
+  isRequired,
   className,
   children,
-}: InlineEditorProps) {
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit<EditorJSONContent>({
+}: InlineEditorProps<Required>) {
+  const { value, handleChange, handleBlur, isAllowed, status } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
-  // const [debouncedValue] = useDebounce(value, 500);
-  // useEffect(() => {
-  //   if (!value) return;
-  //   handleUpdate(value);
-  //   // eslint-disable-next-line react-hooks/exhaustive-deps
-  // }, [debouncedValue]);
-
   return (
     <Editor
       value={value}
       extensions={extensions}
-      onUpdate={(value) => setValue(value)}
-      onBlur={(value) => handleUpdate(value)}
-      className={cn(inlineEditVariants({ variant }), className)}
+      onUpdate={(value) => handleChange(value)}
+      onBlur={(value) => handleBlur(value)}
+      className={cn(inlineEditVariants({ variant, status }), className)}
       disabled={disabled || !isAllowed}
       variant={variant}
     >

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

@@ -6,8 +6,11 @@ import { ComponentProps } from "react";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
 import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
 
-type InlineRecipientInputProps = Omit<ComponentProps<typeof RecipientInput>, "value" | "onChange"> &
-  useInlineEditOptions<string[]> &
+type InlineRecipientInputProps<Required extends boolean = false> = Omit<
+  ComponentProps<typeof RecipientInput>,
+  "value" | "onChange"
+> &
+  useInlineEditOptions<string[], Required> &
   InlineEditVariantsProps & {
     contacts: Contact[];
   };
@@ -15,20 +18,24 @@ type InlineRecipientInputProps = Omit<ComponentProps<typeof RecipientInput>, "va
 /**
  * The inline edit recipient input component.
  */
-export function InlineRecipientInput({
+export function InlineRecipientInput<Required extends boolean = false>({
   initialValue,
   action,
   variant,
   disabled,
   contacts,
   permission,
+  updateStrategy,
+  isRequired,
   className,
   ...props
-}: InlineRecipientInputProps) {
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit<string[]>({
+}: InlineRecipientInputProps<Required>) {
+  const { value, handleChange, handleBlur, isAllowed, status } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
   return (
@@ -37,11 +44,11 @@ export function InlineRecipientInput({
       contacts={contacts}
       value={value ?? []}
       onChange={(newValue) => {
-        setValue(newValue);
-        handleUpdate(newValue);
+        handleChange(newValue);
+        handleBlur(newValue);
       }}
       disabled={disabled || !isAllowed}
-      className={cn(inlineEditVariants({ variant }), className)}
+      className={cn(inlineEditVariants({ variant, status }), className)}
     />
   );
 }

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

@@ -7,30 +7,37 @@ import { CheckIcon, XIcon } from "lucide-react";
 import { ComponentProps, useState } from "react";
 import { useInlineEdit, useInlineEditOptions } from "../hooks/use-inline.client";
 
-type InlineStringInputToggleProps<TValue> = Omit<ComponentProps<typeof Input>, "type"> &
-  useInlineEditOptions<TValue>;
+type InlineStringInputToggleProps<Required extends boolean = false> = Omit<
+  ComponentProps<typeof Input>,
+  "type"
+> &
+  useInlineEditOptions<string, Required>;
 
-export function InlineStringInputToggle({
+export function InlineStringInputToggle<Required extends boolean>({
   initialValue,
   action,
   disabled,
   permission,
+  updateStrategy,
+  isRequired,
   className,
   ...props
-}: InlineStringInputToggleProps<string>) {
+}: InlineStringInputToggleProps<Required>) {
   const [enabled, setEnabled] = useState(!!initialValue);
 
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+  const { value, handleChange, handleBlur, isAllowed } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
   function handleToggle() {
     setEnabled(!enabled);
     if (!enabled) return;
 
-    handleUpdate("");
+    handleBlur(null);
   }
 
   const isDisabled = !enabled || disabled || !isAllowed;
@@ -40,10 +47,10 @@ export function InlineStringInputToggle({
       <Input
         {...props}
         type="text"
-        value={value}
+        value={value ?? undefined}
         disabled={isDisabled}
-        onChange={(e) => setValue(e.target.value)}
-        onBlur={(e) => handleUpdate(e.target.value)}
+        onChange={(e) => handleChange(e.target.value ? e.target.value : null)}
+        onBlur={(e) => handleBlur(e.target.value ? e.target.value : null)}
         className={cn("border-border/70 hover:border-border w-full", className)}
       />
 

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

@@ -6,39 +6,46 @@ import { ComponentProps } from "react";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
 import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
 
-type InlineEditInputProps<TValue> = Omit<ComponentProps<typeof Input>, "type"> &
-  useInlineEditOptions<TValue> &
+type InlineEditInputProps<TValue, Required extends boolean = false> = Omit<
+  ComponentProps<typeof Input>,
+  "type"
+> &
+  useInlineEditOptions<TValue, Required> &
   InlineEditVariantsProps;
 
 /**
  * The inline edit string input component.
  */
-export function InlineStringInput({
+export function InlineStringInput<Required extends boolean = false>({
   initialValue,
   action,
   variant,
   className,
   permission,
+  updateStrategy,
+  isRequired,
   disabled,
   ...props
-}: InlineEditInputProps<string | undefined>) {
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit<string | undefined>({
+}: InlineEditInputProps<string, Required>) {
+  const { value, handleChange, handleBlur, isAllowed, status } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
   return (
     <Input
       {...props}
       type="text"
-      value={value}
+      value={value ?? undefined}
       disabled={disabled || !isAllowed}
-      onChange={(e) => setValue(e.target.value)}
-      onBlur={(e) => handleUpdate(e.target.value)}
+      onChange={(e) => handleChange(e.target.value ? e.target.value : null)}
+      onBlur={(e) => handleBlur(e.target.value ? e.target.value : null)}
       className={cn(
         "border-border/70 hover:border-border w-full",
-        inlineEditVariants({ variant }),
+        inlineEditVariants({ variant, status }),
         className,
       )}
     />
@@ -48,19 +55,26 @@ export function InlineStringInput({
 /**
  * The inline edit number input component.
  */
-export function InlineNumberInput({
+const parseValueAsNumber = (valueAsNumber: number): number | null =>
+  !isNaN(Number(valueAsNumber)) ? valueAsNumber : null;
+
+export function InlineNumberInput<Required extends boolean = false>({
   initialValue,
   action,
   variant,
   className,
   permission,
+  updateStrategy,
+  isRequired,
   disabled,
   ...props
-}: InlineEditInputProps<number | undefined>) {
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit<number | undefined>({
+}: InlineEditInputProps<number, Required>) {
+  const { value, handleChange, handleBlur, isAllowed, status } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
   return (
@@ -69,15 +83,11 @@ export function InlineNumberInput({
       type="number"
       value={value ?? undefined}
       disabled={disabled || !isAllowed}
-      onChange={(e) =>
-        setValue(!isNaN(e.target.valueAsNumber) ? e.target.valueAsNumber : undefined)
-      }
-      onBlur={(e) =>
-        handleUpdate(!isNaN(e.target.valueAsNumber) ? e.target.valueAsNumber : undefined)
-      }
+      onChange={(e) => handleChange(parseValueAsNumber(e.target.valueAsNumber))}
+      onBlur={(e) => handleBlur(parseValueAsNumber(e.target.valueAsNumber))}
       className={cn(
         "border-border/70 hover:border-border w-full",
-        inlineEditVariants({ variant }),
+        inlineEditVariants({ variant, status }),
         className,
       )}
     />
@@ -93,13 +103,17 @@ export function InlineDecimalInput({
   variant,
   className,
   permission,
+  updateStrategy,
+  isRequired,
   disabled,
   ...props
-}: InlineEditInputProps<string | undefined>) {
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit<string | undefined>({
+}: InlineEditInputProps<string>) {
+  const { value, handleChange, handleBlur, isAllowed, status } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
   return (
@@ -108,11 +122,11 @@ export function InlineDecimalInput({
       type="number"
       value={value ?? undefined}
       disabled={disabled || !isAllowed}
-      onChange={(e) => setValue(e.target.value)}
-      onBlur={(e) => handleUpdate(e.target.value ? e.target.value : undefined)}
+      onChange={(e) => handleChange(e.target.value ? e.target.value : null)}
+      onBlur={(e) => handleBlur(e.target.value ? e.target.value : null)}
       className={cn(
         "border-border/70 hover:border-border w-full",
-        inlineEditVariants({ variant }),
+        inlineEditVariants({ variant, status }),
         className,
       )}
     />