@tulip-systems/core 0.5.7 → 0.5.9

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

@@ -1,109 +0,0 @@
-"use client";
-
-import { Combobox } from "@/components/ui/combobox.client";
-import { useInlineTableContext } from "../../hooks/context.client";
-import {
-  useInlineDataTableInput,
-  UseInlineDataTableInputParams,
-} from "../../hooks/use-input.client";
-
-export type ComboboxItem = {
-  id: string;
-  label: string;
-  disabled?: boolean;
-};
-
-type InlineDataTableComboboxProps<TData, TValue> = UseInlineDataTableInputParams<TData, TValue> & {
-  options: ComboboxItem[];
-  emptyMessage?: string;
-  placeholder?: string;
-  disabled?: boolean;
-};
-
-export function InlineDataTableCombobox<TData extends { id: string }, TValue>({
-  context,
-  action,
-  permission,
-  disabled,
-  ...props
-}: InlineDataTableComboboxProps<TData, TValue>) {
-  const { disabledColumns } = useInlineTableContext();
-
-  const { value, setValue, mutate, isAllowed } = useInlineDataTableInput({
-    context,
-    action,
-    permission,
-  });
-
-  const isDisabled = disabled || disabledColumns?.[context.column.id] || !isAllowed;
-
-  return (
-    <Combobox
-      {...props}
-      value={value}
-      disabled={isDisabled}
-      onSelect={setValue}
-      onBlur={(e) => mutate(e.target.value as TValue)}
-      className="rounded-none border-none shadow-none"
-    />
-  );
-
-  // return (
-  //   <Popover open={open} onOpenChange={setOpen}>
-  //     <Command className="text-foreground bg-transparent">
-  //       <PopoverAnchor asChild>
-  //         <CommandPrimitive.Input
-  //           data-input
-  //           value={value?.toString() ?? ""}
-  //           placeholder={placeholder}
-  //           disabled={isDisabled}
-  //           onValueChange={(value) => setValue(value as TValue)}
-  //           onKeyDown={(e) => setOpen(e.key !== "Escape")}
-  //           onMouseDown={() => setOpen((open) => !!value || !open)}
-  //           onBlur={(e) => {
-  //             setOpen(false);
-  //             mutate(e.target.value as TValue);
-  //           }}
-  //           onFocus={() => setOpen(true)}
-  //           className="read-only:bg-muted/50 h-full w-full bg-transparent px-3 py-0.5 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-  //         />
-  //       </PopoverAnchor>
-
-  //       {!open && <CommandList aria-hidden="true" className="hidden" />}
-
-  //       <PopoverContent
-  //         asChild
-  //         onOpenAutoFocus={(e) => e.preventDefault()}
-  //         onInteractOutside={(e) => {
-  //           if (e.target instanceof Element && e.target.hasAttribute("cmdk-input")) {
-  //             e.preventDefault();
-  //           }
-  //         }}
-  //         className="w-[var(--radix-popover-trigger-width)] p-0"
-  //       >
-  //         <CommandList>
-  //           {options.length > 0 && (
-  //             <CommandGroup>
-  //               {options.map((option) => (
-  //                 <CommandItem
-  //                   key={option.id}
-  //                   value={option.id}
-  //                   onMouseDown={(e) => e.preventDefault()}
-  //                   onSelect={(id) => {
-  //                     setValue(id as TValue);
-  //                     setOpen(false);
-  //                   }}
-  //                 >
-  //                   {option.label}
-  //                 </CommandItem>
-  //               ))}
-  //             </CommandGroup>
-  //           )}
-
-  //           <CommandEmpty className="px-3 py-1">{emptyMessage}</CommandEmpty>
-  //         </CommandList>
-  //       </PopoverContent>
-  //     </Command>
-  //   </Popover>
-  // );
-}

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

@@ -1,108 +0,0 @@
-"use client";
-
-import type { Input } from "@/components/ui/input";
-import { cn } from "@/lib/utils/cn";
-import { ComponentProps } from "react";
-import { useInlineTableContext } from "../../hooks/context.client";
-import {
-  useInlineDataTableInput,
-  UseInlineDataTableInputParams,
-} from "../../hooks/use-input.client";
-
-export type InlineDataTableInputProps<TData, TValue> = Omit<ComponentProps<typeof Input>, "type"> &
-  UseInlineDataTableInputParams<TData, TValue> & { autoSelect?: boolean };
-
-export function InlineDataTableStringInput<TData extends { id: string }, TValue>({
-  context,
-  action,
-  permission,
-  onChange,
-  onBlur,
-  onFocus,
-  autoSelect,
-  disabled,
-  className,
-  ...props
-}: InlineDataTableInputProps<TData, TValue>) {
-  const { disabledColumns } = useInlineTableContext();
-
-  const { value, setValue, mutate, isAllowed } = useInlineDataTableInput({
-    context,
-    action,
-    permission,
-  });
-
-  const isDisabled = disabled || disabledColumns?.[context.column.id] || !isAllowed;
-
-  return (
-    <input
-      {...props}
-      key={`${context.row.id}-${context.column.id}`}
-      type="text"
-      value={value as string}
-      data-input
-      disabled={isDisabled}
-      onFocus={(e) => {
-        if (autoSelect) e.target.select();
-        onFocus?.(e);
-      }}
-      onChange={(e) => {
-        setValue(e.target.value as TValue);
-        onChange?.(e);
-      }}
-      onBlur={(e) => {
-        mutate(e.target.value as TValue);
-        onBlur?.(e);
-      }}
-      className={cn(
-        "placeholder:text-primary-foreground read-only:bg-muted/50 flex h-full w-full bg-transparent px-3 py-0.5 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
-    />
-  );
-}
-
-export function InlineDataTableNumberInput<TData extends { id: string }, TValue>({
-  context,
-  action,
-  onChange,
-  onFocus,
-  onBlur,
-  autoSelect,
-  disabled,
-  className,
-  ...props
-}: InlineDataTableInputProps<TData, TValue>) {
-  const { disabledColumns } = useInlineTableContext();
-
-  const { value, setValue, mutate, isAllowed } = useInlineDataTableInput({ context, action });
-
-  const isDisabled = disabled || disabledColumns?.[context.column.id] || !isAllowed;
-
-  return (
-    <input
-      {...props}
-      type="number"
-      value={value as number}
-      data-input
-      disabled={isDisabled}
-      onFocus={(e) => {
-        if (autoSelect) e.target.select();
-        onFocus?.(e);
-      }}
-      onChange={(e) => {
-        setValue(e.target.valueAsNumber as TValue);
-        onChange?.(e);
-      }}
-      onBlur={(e) => {
-        mutate(e.target.value as TValue);
-        onBlur?.(e);
-      }}
-      className={cn(
-        "placeholder:text-primary-foreground read-only:bg-muted/50 flex h-full w-full bg-transparent px-3 py-0.5 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
-        "[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
-        className,
-      )}
-    />
-  );
-}

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

@@ -1,102 +0,0 @@
-"use client";
-
-import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select.client";
-import { cn } from "@/lib/utils/cn";
-import React from "react";
-import { useInlineTableContext } from "../../hooks/context.client";
-import {
-  useInlineDataTableInput,
-  UseInlineDataTableInputParams,
-} from "../../hooks/use-input.client";
-
-export type SelectItem = {
-  id: string;
-  value: string;
-  label?: React.ReactNode;
-  disabled?: boolean;
-};
-
-export type InlineDataTableSelectProps<TData, TValue> = UseInlineDataTableInputParams<
-  TData,
-  TValue
-> & {
-  placeholder?: React.ReactNode;
-  options: SelectItem[];
-  renderSelectedItem?: (selectedItem: SelectItem) => React.ReactNode;
-  disabled?: boolean;
-  className?: string;
-};
-
-export function InlineDataTableSelect<TData extends { id: string }, TValue>({
-  context,
-  action,
-  permission,
-  placeholder,
-  options,
-  renderSelectedItem,
-  disabled,
-  className,
-}: InlineDataTableSelectProps<TData, TValue>) {
-  const { disabledColumns } = useInlineTableContext();
-
-  const { value, setValue, mutate, isAllowed } = useInlineDataTableInput({
-    context,
-    action,
-    permission,
-  });
-  const incomingSelectedItem = options.find((item) => item.id === value);
-
-  const [open, setOpen] = React.useState(false);
-  const [internalSelectedItem, setInternalSelectedItem] = React.useState<SelectItem | undefined>();
-
-  const selectedItem = incomingSelectedItem ?? internalSelectedItem;
-
-  const isDisabled = disabled || disabledColumns?.[context.column.id] || !isAllowed;
-
-  return (
-    <Select
-      open={open}
-      defaultValue={value as string}
-      onOpenChange={setOpen}
-      onValueChange={(id) => {
-        const foundItem = options.find((item) => item.id === id);
-
-        if (!foundItem) return;
-
-        setValue(foundItem.id as TValue);
-        mutate(foundItem.id as TValue);
-        setInternalSelectedItem(foundItem);
-        setOpen(false);
-      }}
-    >
-      <SelectTrigger
-        disabled={isDisabled}
-        className={cn(
-          "h-full w-full border-none outline-none ring-0 focus:border-0 focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:outline-none",
-          className,
-        )}
-      >
-        {selectedItem ? (
-          <div className="flex items-center">
-            {renderSelectedItem?.(selectedItem) ?? selectedItem.label ?? selectedItem.value}
-          </div>
-        ) : (
-          (placeholder ?? "Kies een optie...")
-        )}
-      </SelectTrigger>
-
-      <SelectContent>
-        {options.map((item) => (
-          <SelectItem
-            disabled={item.disabled}
-            className="cursor-pointer"
-            key={item.id}
-            value={item.id}
-          >
-            {item.label ?? item.value}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
-  );
-}

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

@@ -1,65 +0,0 @@
-import "client-only";
-
-import { useAction } from "@/lib/hooks/use-action";
-import { Permission } from "@/modules/auth/entry";
-import { usePermission } from "@/modules/auth/hooks/use-permission";
-import { InlineEditSchema } from "@/modules/inline-edit/entry";
-import { type CellContext } from "@tanstack/react-table";
-import { useEffect, useState } from "react";
-import { toast } from "sonner";
-
-export type UseInlineDataTableInputParams<TData, TValue> = {
-  context: CellContext<TData, TValue>;
-  action: (params: InlineEditSchema<TValue>) => Promise<void> | void;
-  permission?: Permission;
-};
-
-/**
- * Inline form table input
- */
-export function useInlineDataTableInput<TData extends { id: string }, TValue>({
-  context,
-  action,
-  permission,
-}: UseInlineDataTableInputParams<TData, TValue>) {
-  const initialValue = context.getValue();
-
-  const [value, setValue] = useState(initialValue);
-
-  useEffect(() => setValue(initialValue), [initialValue]);
-
-  const permissionData = usePermission(permission ?? {});
-  const isAllowed = permissionData.data?.success;
-
-  /**
-   * Update value mutation
-   */
-  const { mutate } = useAction({
-    mutationFn: async (value: TValue) => {
-      if (initialValue === value) return;
-
-      const { id } = context.row.original as TData;
-      await action({ id, value });
-    },
-    onError: () => {
-      setValue(initialValue);
-    },
-  });
-
-  /**
-   * Handle the update of the value.
-   */
-  const handleUpdate = (value: TValue) => {
-    if (!isAllowed) {
-      toast.error("Je hebt geen toestemming om dit te bewerken");
-      return;
-    }
-
-    // If the value is the same as the initial value, do nothing
-    if (value === initialValue) return;
-
-    return mutate(value);
-  };
-
-  return { value, setValue, mutate: handleUpdate, isAllowed };
-}