@tulip-systems/core 0.8.3 → 0.10.0

package/src/modules/commands/utils/send-mail-command.client.tsx

@@ -1,150 +0,0 @@
-// "use client";
-
-// export type SendMailCommandMeta = {
-//   contacts: { id: string; name: string; email: string }[];
-// };
-
-// export type SendMailCommandProps<
-//   TSchema extends FieldValues,
-//   TData extends { id: string },
-//   TMeta extends SendMailCommandMeta,
-// > = {
-//   schema: ZodSchema<TSchema>;
-//   action: CommandAction<TSchema>;
-//   defaultValues?: DefaultValues<TSchema>;
-//   children?: React.ReactNode;
-// } & Pick<SingleCommandDefRenderParams<TData, TMeta>, "meta">;
-
-// /**
-//  * SendMail command
-//  * @description command to delete a resource
-//  */
-// export function SendMailCommand<
-//   TSchema extends SendEmailSchema,
-//   TData extends { id: string },
-//   TMeta extends SendMailCommandMeta,
-// >({ schema, action, defaultValues, meta, children }: SendMailCommandProps<TSchema, TData, TMeta>) {
-//   const form = useForm<SendEmailSchema>({
-//     resolver: standardSchemaResolver(schema as StandardSchemaV1<SendEmailSchema>),
-//     defaultValues,
-//   });
-
-//   const contactComboboxItems = meta.contacts.map((contact) => ({
-//     id: contact.email,
-//     value: contact.name,
-//   }));
-
-//   return (
-//     <CommandFormDialog>
-//       {children}
-
-//       <Form {...form}>
-//         <CommandFormDialogContent action={action} message="Succesvol verzonden">
-//           <CommandFormDialogHeader>
-//             <CommandFormDialogTitle>Verzend een e-mail</CommandFormDialogTitle>
-
-//             <CommandFormDialogDescription>
-//               Verzend een e-mail naar de geselecteerde contacten.
-//             </CommandFormDialogDescription>
-//           </CommandFormDialogHeader>
-
-//           <CommandFormDialogFields>
-//             <div className="flex flex-col">
-//               <FormField
-//                 control={form.control}
-//                 name="to"
-//                 render={({ field }) => (
-//                   <FormItem>
-//                     <FormLabel>Ontvanger</FormLabel>
-//                     <FormControl>
-//                       <ComboboxDropdown
-//                         placeholder="Kies een ontvanger..."
-//                         selectedItem={
-//                           contactComboboxItems?.find((contact) => contact.id === field.value) ??
-//                           undefined
-//                         }
-//                         items={contactComboboxItems ?? []}
-//                         onSelect={({ id }) => field.onChange(id)}
-//                       />
-//                     </FormControl>
-//                     <FormMessage />
-//                   </FormItem>
-//                 )}
-//               />
-
-//               <Accordion type="single" collapsible>
-//                 <AccordionItem value="cc">
-//                   <AccordionTrigger>{""}</AccordionTrigger>
-//                   <AccordionContent>
-//                     <div className="flex flex-col gap-4 p-1">
-//                       <FormField
-//                         control={form.control}
-//                         name="cc"
-//                         render={({ field }) => (
-//                           <FormItem>
-//                             <FormLabel>cc</FormLabel>
-//                             <FormControl>
-//                               <Input placeholder="Vul hier de cc in..." {...field} />
-//                             </FormControl>
-//                             <FormMessage />
-//                           </FormItem>
-//                         )}
-//                       />
-
-//                       <FormField
-//                         control={form.control}
-//                         name="bcc"
-//                         render={({ field }) => (
-//                           <FormItem>
-//                             <FormLabel>bcc</FormLabel>
-//                             <FormControl>
-//                               <Input placeholder="Vul hier de bcc in..." {...field} />
-//                             </FormControl>
-//                             <FormMessage />
-//                           </FormItem>
-//                         )}
-//                       />
-//                     </div>
-//                   </AccordionContent>
-//                 </AccordionItem>
-//               </Accordion>
-//             </div>
-
-//             <FormField
-//               control={form.control}
-//               name="subject"
-//               render={({ field }) => (
-//                 <FormItem>
-//                   <FormLabel>Onderwerp</FormLabel>
-//                   <FormControl>
-//                     <Input placeholder="Vul hier het onderwerp in..." {...field} />
-//                   </FormControl>
-//                   <FormMessage />
-//                 </FormItem>
-//               )}
-//             />
-
-//             <FormField
-//               control={form.control}
-//               name="body"
-//               render={({ field }) => (
-//                 <FormItem>
-//                   <FormLabel>Bericht</FormLabel>
-//                   <Textarea {...field} rows={10} />
-//                   <FormMessage />
-//                 </FormItem>
-//               )}
-//             />
-//           </CommandFormDialogFields>
-
-//           <CommandFormDialogFooter>
-//             <CommandFormDialogCancel>Annuleren</CommandFormDialogCancel>
-//             <CommandFormDialogSubmit>Versturen</CommandFormDialogSubmit>
-//           </CommandFormDialogFooter>
-//         </CommandFormDialogContent>
-//       </Form>
-//     </CommandFormDialog>
-//   );
-// }
-
-// export const SendMailCommandTrigger = CommandFormDialogTrigger;

package/src/modules/data-tables/lib/converters/filter.ts

@@ -1,11 +0,0 @@
-/**
- * Converts a filter value to an array of strings.
- * @param { string | string[] | undefined } filterValue
- * @returns { string[] }
- */
-export function convertFilterValue<TValue extends string>(
-  filterValue: string | string[] | undefined,
-): TValue[] | null {
-  if (!filterValue) return null;
-  return (typeof filterValue === "string" ? [filterValue] : filterValue) as TValue[];
-}

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

@@ -1,64 +0,0 @@
-"use client";
-
-import {
-  ComboboxDropdown,
-  type ComboboxDropdownItem,
-  type ComboboxDropdownProps,
-} from "@/components/ui/combobox-dropdown.client";
-import { cn } from "@/lib/utils/cn";
-import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
-import { type InlineEditVariantsProps, inlineEditVariants } from "../lib/variants";
-
-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,
-  Required extends boolean,
->({
-  selectedItem,
-  variant,
-  className,
-  onSelect,
-  initialValue,
-  action,
-  permission,
-  updateStrategy,
-  isRequired,
-  disabled,
-  ...props
-}: InlineEditComboboxDropdownProps<TValue, Required>) {
-  const { handleChange, handleBlur, isAllowed, status } = useInlineEdit({
-    initialValue,
-    action,
-    permission,
-    updateStrategy,
-    isRequired,
-    parser: {
-      decode: (value) => value,
-      encode: (value) => value,
-    },
-  });
-
-  const initialSelectedItem = props.items.find((item) => item.id === initialValue);
-
-  return (
-    <ComboboxDropdown
-      {...props}
-      className={cn(inlineEditVariants({ variant, status }), className)}
-      disabled={disabled || !isAllowed}
-      selectedItem={selectedItem ?? initialSelectedItem}
-      onSelect={(event) => {
-        handleChange(event.id ?? null);
-        handleBlur(event.id ?? null);
-        onSelect?.(event);
-      }}
-    />
-  );
-}

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

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

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

@@ -1,116 +0,0 @@
-"use client";
-
-import { format } from "date-fns";
-import { CalendarIcon } from "lucide-react";
-import React, { type ComponentProps } from "react";
-import { Button } from "@/components/ui/button";
-import { Calendar } from "@/components/ui/calendar.client";
-import { Input } from "@/components/ui/input";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover.client";
-import { cn } from "@/lib/utils/cn";
-import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
-import { type InlineEditVariantsProps, inlineEditVariants } 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<Required extends boolean = false>({
-  initialValue,
-  action,
-  permission,
-  variant,
-  className,
-  updateStrategy,
-  isRequired,
-  ...props
-}: ComponentProps<"div"> & useInlineEditOptions<Date, Required> & InlineEditVariantsProps) {
-  const [inValid, setInValid] = React.useState<boolean>(false);
-
-  const { value, setValue, handleChange, handleBlur, status, isAllowed } = useInlineEdit({
-    initialValue,
-    action,
-    permission,
-    updateStrategy,
-    isRequired,
-    parser: {
-      decode: (value) => value,
-      encode: (value) => value,
-    },
-  });
-
-  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", className)}>
-        <Input
-          data-inline-input="date"
-          type="string"
-          value={stringDate}
-          className={cn(inlineEditVariants({ variant, status }), inValid && "text-destructive")}
-          disabled={!isAllowed}
-          onChange={(e) => {
-            setStringDate(e.target.value);
-            const parsedDate = parseDate(e.target.value);
-
-            if (!isValidDate(parsedDate)) {
-              setInValid(true);
-              setValue(undefined);
-            } else {
-              setInValid(false);
-              setValue(parsedDate);
-            }
-          }}
-          onBlur={(e) => {
-            const parsedDate = parseDate(e.target.value);
-            handleBlur(isValidDate(parsedDate) ? parsedDate : null);
-          }}
-        />
-
-        <PopoverTrigger asChild>
-          <Button
-            variant="ghost"
-            tabIndex={-1}
-            disabled={!isAllowed}
-            className={cn(
-              "absolute top-0 right-0 bottom-0 opacity-50",
-              !value && "text-muted-foreground",
-            )}
-          >
-            <CalendarIcon className="h-4 w-4" />
-          </Button>
-        </PopoverTrigger>
-      </div>
-
-      <PopoverContent className="w-auto p-0">
-        <Calendar
-          mode="single"
-          autoFocus
-          selected={value ?? undefined}
-          defaultMonth={value ?? undefined}
-          disabled={!isAllowed}
-          onSelect={(selectedDate) => {
-            if (!selectedDate) return;
-
-            setStringDate(formatDate(selectedDate));
-
-            handleChange(selectedDate ?? null);
-            handleBlur(selectedDate ?? null);
-
-            setInValid(false);
-          }}
-        />
-      </PopoverContent>
-    </Popover>
-  );
-}

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

@@ -1,74 +0,0 @@
-"use client";
-
-import { CalendarIcon } from "lucide-react";
-import React, { type ComponentProps } from "react";
-import { Button } from "@/components/ui/button";
-import { Calendar } from "@/components/ui/calendar.client";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover.client";
-import { cn } from "@/lib/utils/cn";
-import { formatDate } from "@/lib/utils/format";
-import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
-import { type InlineEditVariantsProps, inlineEditVariants } from "../lib/variants";
-
-type InlineEditDatePickerProps<Required extends boolean> = ComponentProps<typeof Button> &
-  useInlineEditOptions<Date, Required> &
-  InlineEditVariantsProps;
-
-export function InlineDatePicker<Required extends boolean = false>({
-  initialValue,
-  action,
-  permission,
-  variant,
-  className,
-  disabled,
-  updateStrategy,
-  isRequired,
-  ...props
-}: InlineEditDatePickerProps<Required>) {
-  const [open, setOpen] = React.useState(false);
-
-  const { value, handleChange, handleBlur, isAllowed, status } = useInlineEdit({
-    initialValue,
-    action,
-    permission,
-    updateStrategy,
-    isRequired,
-    parser: {
-      decode: (value) => value,
-      encode: (value) => value,
-    },
-  });
-
-  return (
-    <Popover
-      open={open}
-      onOpenChange={(open) => {
-        setOpen(open);
-        if (!open && value) handleBlur(value);
-      }}
-    >
-      <PopoverTrigger asChild>
-        <Button
-          {...props}
-          data-inline-input="date-picker"
-          type="button"
-          variant="outline"
-          className={cn("w-full", inlineEditVariants({ variant, status }), className)}
-          disabled={disabled || !isAllowed}
-        >
-          <CalendarIcon className="mr-2 h-4 w-4" />
-          {value ? formatDate(value) : <span>Kies een datum</span>}
-        </Button>
-      </PopoverTrigger>
-
-      <PopoverContent className="w-auto p-0">
-        <Calendar
-          mode="single"
-          autoFocus
-          selected={value ? new Date(value) : undefined}
-          onSelect={(date) => handleChange(date ?? null)}
-        />
-      </PopoverContent>
-    </Popover>
-  );
-}

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

@@ -1,55 +0,0 @@
-"use client";
-
-import { format } from "date-fns";
-import type { ComponentProps } from "react";
-import { DateTimeInput } from "@/components/ui/input-date-time.client";
-import { cn } from "@/lib/utils/cn";
-import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
-import { type InlineEditVariantsProps, inlineEditVariants } from "../lib/variants";
-
-export function InlineDateTimeInput<Required extends boolean = false>({
-  initialValue,
-  action,
-  permission,
-  variant,
-  className,
-  updateStrategy,
-  isRequired,
-  disabled,
-  ...props
-}: ComponentProps<typeof DateTimeInput> &
-  useInlineEditOptions<Date, Required> &
-  InlineEditVariantsProps) {
-  const { value, handleChange, handleBlur, status, isAllowed } = useInlineEdit<
-    string,
-    Date,
-    Required
-  >({
-    initialValue,
-    action,
-    permission,
-    updateStrategy,
-    isRequired,
-    parser: {
-      decode: (value) =>
-        (value instanceof Date
-          ? format(value, "yyyy-MM-dd'T'HH:mm")
-          : typeof value === "string"
-            ? value
-            : undefined) as string,
-      encode: (value) => (value ? new Date(value) : null) as Date,
-    },
-  });
-
-  return (
-    <DateTimeInput
-      data-inline-input="date-time"
-      value={value ?? undefined}
-      className={cn(inlineEditVariants({ variant, status }), className)}
-      disabled={disabled || !isAllowed}
-      onValueChange={(date) => handleChange(date ?? null)}
-      onValueBlur={(date) => handleBlur(date ?? null)}
-      {...props}
-    />
-  );
-}

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

@@ -1,56 +0,0 @@
-"use client";
-
-import { Editor, type EditorProps } from "@/components/editor/components/editor.client";
-import type { EditorJSONContent } from "@/components/editor/lib/types";
-import { cn } from "@/lib/utils/cn";
-import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
-import { type InlineEditVariantsProps, inlineEditVariants } from "../lib/variants";
-
-export type InlineEditorProps<Required extends boolean = false> = useInlineEditOptions<
-  EditorJSONContent,
-  Required
-> &
-  InlineEditVariantsProps &
-  Omit<EditorProps, "value" | "onUpdate" | "onBlur" | "variant">;
-
-export function InlineEditor<Required extends boolean = false>({
-  initialValue,
-  action,
-  extensions,
-  variant,
-  disabled,
-  permission,
-  updateStrategy,
-  isRequired,
-  className,
-  children,
-}: InlineEditorProps<Required>) {
-  const { value, handleChange, handleBlur, isAllowed, status } = useInlineEdit({
-    initialValue,
-    action,
-    permission,
-    updateStrategy,
-    isRequired,
-    parser: {
-      decode: (value) => value,
-      encode: (value) => value,
-    },
-  });
-
-  return (
-    <Editor
-      value={value}
-      extensions={extensions}
-      onUpdate={(value) => handleChange(value)}
-      onBlur={(value) => handleBlur(value)}
-      className={cn(inlineEditVariants({ variant, status }), className)}
-      disabled={disabled || !isAllowed}
-      variant={variant}
-      attributes={{
-        "data-inline-input": "editor",
-      }}
-    >
-      {children}
-    </Editor>
-  );
-}

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

@@ -1,59 +0,0 @@
-"use client";
-
-import type { ComponentProps } from "react";
-import { type Contact, RecipientInput } from "@/components/ui/input-recipient";
-import { cn } from "@/lib/utils/cn";
-import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
-import { type InlineEditVariantsProps, inlineEditVariants } from "../lib/variants";
-
-type InlineRecipientInputProps<Required extends boolean = false> = Omit<
-  ComponentProps<typeof RecipientInput>,
-  "value" | "onChange"
-> &
-  useInlineEditOptions<string[], Required> &
-  InlineEditVariantsProps & {
-    contacts: Contact[];
-  };
-
-/**
- * The inline edit recipient input component.
- */
-export function InlineRecipientInput<Required extends boolean = false>({
-  initialValue,
-  action,
-  variant,
-  disabled,
-  contacts,
-  permission,
-  updateStrategy,
-  isRequired,
-  className,
-  ...props
-}: InlineRecipientInputProps<Required>) {
-  const { value, handleChange, handleBlur, isAllowed, status } = useInlineEdit({
-    initialValue,
-    action,
-    permission,
-    updateStrategy,
-    isRequired,
-    parser: {
-      decode: (value) => value,
-      encode: (value) => value,
-    },
-  });
-
-  return (
-    <RecipientInput
-      {...props}
-      data-inline-input="recipient"
-      contacts={contacts}
-      value={value ?? []}
-      onChange={(newValue) => {
-        handleChange(newValue);
-        handleBlur(newValue);
-      }}
-      disabled={disabled || !isAllowed}
-      className={cn(inlineEditVariants({ variant, status }), className)}
-    />
-  );
-}