@tulip-systems/core 0.6.0 → 0.6.1

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

@@ -36,6 +36,10 @@ export function InlineRecipientInput<Required extends boolean = false>({
     permission,
     updateStrategy,
     isRequired,
+    parser: {
+      decode: (value) => value,
+      encode: (value) => value,
+    },
   });
 
   return (

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

@@ -31,6 +31,10 @@ export function InlineStringInputToggle<Required extends boolean>({
     permission,
     updateStrategy,
     isRequired,
+    parser: {
+      decode: (value) => value,
+      encode: (value) => value,
+    },
   });
 
   function handleToggle() {

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

@@ -33,6 +33,10 @@ export function InlineStringInput<Required extends boolean = false>({
     permission,
     updateStrategy,
     isRequired,
+    parser: {
+      decode: (value) => value,
+      encode: (value) => value,
+    },
   });
 
   return (
@@ -75,6 +79,10 @@ export function InlineNumberInput<Required extends boolean = false>({
     permission,
     updateStrategy,
     isRequired,
+    parser: {
+      decode: (value) => value,
+      encode: (value) => value,
+    },
   });
 
   return (
@@ -114,6 +122,10 @@ export function InlineDecimalInput({
     permission,
     updateStrategy,
     isRequired,
+    parser: {
+      decode: (value) => value,
+      encode: (value) => value,
+    },
   });
 
   return (

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

@@ -34,6 +34,10 @@ export function InlineSelect<Required extends boolean = false>({
     permission,
     updateStrategy,
     isRequired,
+    parser: {
+      decode: (value) => value,
+      encode: (value) => value,
+    },
   });
 
   return (

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

@@ -19,6 +19,10 @@ export function InlineSwitch<Required extends boolean = false>({
     permission,
     updateStrategy,
     isRequired,
+    parser: {
+      decode: (value) => value,
+      encode: (value) => value,
+    },
   });
 
   return (

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

@@ -24,6 +24,10 @@ export function InlineToggle<Required extends boolean = false>({
     permission,
     updateStrategy,
     isRequired,
+    parser: {
+      decode: (value) => value,
+      encode: (value) => value,
+    },
   });
 
   return (

package/src/modules/inline-edit/hooks/use-inline.client.tsx

@@ -28,15 +28,15 @@ type MaybeValue<TValue, Required extends boolean> = Required extends true ? TVal
 /**
  * Use the inline edit hook options.
  */
-export type useInlineEditOptions<TValue, Required extends boolean = false> = {
+export type useInlineEditOptions<TResult, Required extends boolean = false> = {
   /**
    * Initial value
    */
-  initialValue?: MaybeValue<TValue, Required>;
+  initialValue?: MaybeValue<TResult, Required>;
   /**
    * Action to execute on update
    */
-  action: (value: { id: string; value: MaybeValue<TValue, Required> }) => Promise<unknown>;
+  action: (value: { id: string; value: MaybeValue<TResult, Required> }) => Promise<unknown>;
   /**
    * Permission required to edit
    */
@@ -55,18 +55,40 @@ export type useInlineEditOptions<TValue, Required extends boolean = false> = {
   isRequired?: Required;
 };
 
+/**
+ * Inline edit hook props
+ */
+export type UseInlineEditProps<
+  TValue extends string | number | Date | boolean | JSON | EditorJSONContent,
+  TResult extends string | number | Date | boolean | JSON | EditorJSONContent,
+  Required extends boolean = false,
+> = useInlineEditOptions<TResult, Required> & {
+  parser: {
+    /**
+     * Transform the value from the result type to the value type
+     */
+    decode: (value: TResult) => TValue;
+    /**
+     * Transform the value from the value type to the result type
+     */
+    encode: (value: TValue) => TResult;
+  };
+};
+
 /**
  * Use the inline edit hook.
  */
 export function useInlineEdit<
   TValue extends string | number | Date | boolean | JSON | EditorJSONContent,
+  TResult extends string | number | Date | boolean | JSON | EditorJSONContent = TValue,
   Required extends boolean = false,
->(props: useInlineEditOptions<TValue, Required>) {
+>(props: UseInlineEditProps<TValue, TResult, Required>) {
   /**
    * The update strategy.
    */
   const strategy = props.updateStrategy ?? defaultUpdateStrategy;
   const delay = strategy.mode === "change" ? (strategy.delay ?? 0) : 0;
+  const initialValue = props.parser.decode(props.initialValue as TResult) ?? undefined;
 
   /**
    * The inline edit context.
@@ -76,7 +98,7 @@ export function useInlineEdit<
   /**
    * The current value of the inline edit.
    */
-  const [value, setValue] = useState<MaybeValue<TValue, Required> | undefined>(props.initialValue);
+  const [value, setValue] = useState<MaybeValue<TValue, Required> | undefined>(initialValue);
 
   /**
    * The indicator status.
@@ -101,7 +123,7 @@ export function useInlineEdit<
       setStatus("success");
     },
     onError: (error) => {
-      setValue(props.initialValue);
+      setValue(initialValue);
       toast.error("Er is iets misgegaan", {
         description: error instanceof Error ? error.message : undefined,
       });
@@ -112,7 +134,7 @@ export function useInlineEdit<
    * Handle instant mutate
    */
   const handleMutateInstant = useCallback(
-    (value: MaybeValue<TValue, Required>) => {
+    (input: TValue) => {
       // Permission guard
       if (!isAllowed) {
         toast.error("Je hebt geen toestemming om dit te bewerken");
@@ -120,12 +142,14 @@ export function useInlineEdit<
       }
 
       // If the value is the same as the initial value, do nothing
-      if (value === props.initialValue) return;
+      if (input === initialValue) return;
+
+      const value = props.parser.encode(input as TValue);
 
       // Update the value
       return mutation.mutate({ id: context.id, value });
     },
-    [isAllowed, props.initialValue, mutation, context.id],
+    [isAllowed, initialValue, mutation, context.id, props.parser],
   );
 
   /**
@@ -145,14 +169,14 @@ export function useInlineEdit<
 
     // If it is required and the value is null or empty, reset to initial value
     if (props.isRequired && next === null) {
-      setValue(props.initialValue ?? undefined);
+      setValue(initialValue ?? undefined);
       setStatus("error");
       toast.error("Dit veld is verplicht");
       return;
     }
 
     // If the strategy is change, update the value after the delay
-    handleMutateDebounced(next as MaybeValue<TValue, Required>);
+    handleMutateDebounced(next as TValue);
   }
 
   /**
@@ -167,14 +191,14 @@ export function useInlineEdit<
 
     // If it is required and the value is null or empty, reset to initial value
     if (props.isRequired && next === null) {
-      setValue(props.initialValue ?? undefined);
+      setValue(initialValue ?? undefined);
       setStatus("error");
       toast.error("Dit veld is verplicht");
       return;
     }
 
     // If the strategy is blur, update the value
-    handleMutateInstant(next as MaybeValue<TValue, Required>);
+    handleMutateInstant(next as TValue);
   }
 
   return { value, setValue, handleChange, handleBlur, status, isAllowed };

package/src/modules/inline-edit/lib/parsers.ts

@@ -0,0 +1,9 @@
+// export function defaultParser<
+//   TValue extends string | number | Date | boolean | JSON | EditorJSONContent,
+//   TResult extends string | number | Date | boolean | JSON | EditorJSONContent,
+// >() {
+//   return {
+//     decode: <>(value: TResult) => value as unknown as TValue,
+//     encode: (value: TValue) => value as unknown as TResult,
+//   };
+// }

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

@@ -17,6 +17,7 @@ export type UploadZoneContextValue = {
     invalidate?: () => Promise<void> | void;
     cancel?: () => Promise<void> | void;
   };
+  disabled?: boolean;
   // updateData: (newValue: FileNode[] | ((oldValue: FileNode[]) => FileNode[])) => Promise<void>;
   // invalidateQuery: () => Promise<void> | void;
 };

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

@@ -10,7 +10,7 @@ import type { FileNode, Node, UploadFileSchema } from "../lib/validators";
 import { UploadZoneContext, type UploadZoneContextValue } from "./upload-zone-context.client";
 
 export type UploadZoneProps = ComponentProps<"div"> &
-  Pick<UploadZoneContextValue, "optimistic" | "uploadClient"> & {
+  Pick<UploadZoneContextValue, "optimistic" | "uploadClient" | "disabled"> & {
     variables: Pick<UploadFileSchema, "namespace" | "parentId" | "mode" | "hidden" | "readonly">;
     uploadHooks?: UploadHooks;
 
@@ -25,6 +25,7 @@ export function UploadZone({
   uploadHooks,
   onUploadCompleted,
   onUploadFailed,
+  disabled = false,
   children,
   className,
   ...props
@@ -106,7 +107,11 @@ export function UploadZone({
     [onUpload],
   );
 
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop, noClick: true });
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    noClick: true,
+    disabled,
+  });
 
   return (
     <div {...props} {...getRootProps()} className={cn("relative z-0", className)}>
@@ -123,6 +128,7 @@ export function UploadZone({
           onUpload,
           onRemove: deleteMutation.mutateAsync,
           optimistic,
+          disabled,
         }}
       >
         {children}

package/dist/modules/commands/menus/data-table-menu.client.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"data-table-menu.client.mjs","names":[],"sources":["../../../../src/modules/commands/menus/data-table-menu.client.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Table } from \"@tanstack/react-table\";\nimport { useRef } from \"react\";\nimport type { TableMeta } from \"@/modules/data-tables/lib/types\";\nimport { RenderCommand } from \"../components/render-command\";\nimport { CommandContextProvider } from \"../hooks/context.client\";\nimport { useBulkCommandMenu } from \"../hooks/use-command-menu.client\";\n\nexport function TableCommandMenu<TData extends { id: string }>({ table }: { table: Table<TData> }) {\n  const meta = table.options.meta as TableMeta<TData>;\n\n  const hasCommands = useRef(true);\n\n  const onSuccess = () => table.resetRowSelection();\n\n  const [validCommands, renderCommand] = useBulkCommandMenu({\n    data: meta.selectedData ?? [],\n    commands: meta.commands ?? [],\n    meta: meta as never,\n  });\n\n  return (\n    <div\n      data-state={meta.selectedData?.length ? \"open\" : \"closed\"}\n      className=\"bg-muted/80 fixed bottom-12 left-0 right-0 z-50 mx-auto flex w-fit items-center rounded-xl border px-3 py-2 shadow-xl backdrop-blur-2xl data-[state=open]:flex data-[state=closed]:hidden\"\n    >\n      <CommandContextProvider value={{ menu: \"table\", onSuccess }}>\n        <div\n          className=\"flex gap-2\"\n          ref={(ref) => {\n            if (ref?.childNodes.length === 0) hasCommands.current = false;\n          }}\n        >\n          {validCommands.map((command) => (\n            <RenderCommand key={command.name} command={command} render={renderCommand} />\n          ))}\n        </div>\n\n        {!hasCommands.current && (\n          <span className=\"text-sm font-medium\">Geen acties beschikbaar</span>\n        )}\n      </CommandContextProvider>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AASA,SAAgB,iBAA+C,EAAE,SAAkC;CACjG,MAAM,OAAO,MAAM,QAAQ;CAE3B,MAAM,cAAc,OAAO,KAAK;CAEhC,MAAM,kBAAkB,MAAM,mBAAmB;CAEjD,MAAM,CAAC,eAAe,iBAAiB,mBAAmB;EACxD,MAAM,KAAK,gBAAgB,EAAE;EAC7B,UAAU,KAAK,YAAY,EAAE;EACvB;EACP,CAAC;AAEF,QACE,oBAAC;EACC,cAAY,KAAK,cAAc,SAAS,SAAS;EACjD,WAAU;YAEV,qBAAC;GAAuB,OAAO;IAAE,MAAM;IAAS;IAAW;cACzD,oBAAC;IACC,WAAU;IACV,MAAM,QAAQ;AACZ,SAAI,KAAK,WAAW,WAAW,EAAG,aAAY,UAAU;;cAGzD,cAAc,KAAK,YAClB,oBAAC;KAA0C;KAAS,QAAQ;OAAxC,QAAQ,KAAiD,CAC7E;KACE,EAEL,CAAC,YAAY,WACZ,oBAAC;IAAK,WAAU;cAAsB;KAA8B;IAE/C;GACrB"}

package/src/modules/commands/menus/data-table-menu.client.tsx

@@ -1,46 +0,0 @@
-"use client";
-
-import type { Table } from "@tanstack/react-table";
-import { useRef } from "react";
-import type { TableMeta } from "@/modules/data-tables/lib/types";
-import { RenderCommand } from "../components/render-command";
-import { CommandContextProvider } from "../hooks/context.client";
-import { useBulkCommandMenu } from "../hooks/use-command-menu.client";
-
-export function TableCommandMenu<TData extends { id: string }>({ table }: { table: Table<TData> }) {
-  const meta = table.options.meta as TableMeta<TData>;
-
-  const hasCommands = useRef(true);
-
-  const onSuccess = () => table.resetRowSelection();
-
-  const [validCommands, renderCommand] = useBulkCommandMenu({
-    data: meta.selectedData ?? [],
-    commands: meta.commands ?? [],
-    meta: meta as never,
-  });
-
-  return (
-    <div
-      data-state={meta.selectedData?.length ? "open" : "closed"}
-      className="bg-muted/80 fixed bottom-12 left-0 right-0 z-50 mx-auto flex w-fit items-center rounded-xl border px-3 py-2 shadow-xl backdrop-blur-2xl data-[state=open]:flex data-[state=closed]:hidden"
-    >
-      <CommandContextProvider value={{ menu: "table", onSuccess }}>
-        <div
-          className="flex gap-2"
-          ref={(ref) => {
-            if (ref?.childNodes.length === 0) hasCommands.current = false;
-          }}
-        >
-          {validCommands.map((command) => (
-            <RenderCommand key={command.name} command={command} render={renderCommand} />
-          ))}
-        </div>
-
-        {!hasCommands.current && (
-          <span className="text-sm font-medium">Geen acties beschikbaar</span>
-        )}
-      </CommandContextProvider>
-    </div>
-  );
-}