@tulip-systems/core 0.5.16 → 0.6.1

package/src/components/ui/combobox-dropdown.client.tsx

@@ -1,10 +1,9 @@
 "use client";
 
+import { CommandList } from "cmdk";
 import { ChevronsUpDown } from "lucide-react";
 import * as React from "react";
-
 import { cn } from "@/lib/utils/cn";
-import { CommandList } from "cmdk";
 import { Button } from "./button";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "./command";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover";
@@ -39,7 +38,6 @@ export function ComboboxDropdown<T extends ComboboxDropdownItem>({
   onSelect,
   selectedItem: incomingSelectedItem,
   renderSelectedItem,
-  renderListItem,
   renderOnCreate,
   emptyResults,
   popoverProps,
@@ -100,7 +98,7 @@ export function ComboboxDropdown<T extends ComboboxDropdownItem>({
 
           <CommandEmpty>{emptyResults ?? "Geen resultaat gevonden"}</CommandEmpty>
           <CommandGroup>
-            <CommandList className="max-h-[225px] overflow-auto">
+            <CommandList className="max-h-56.25 overflow-auto">
               {filteredItems.map((item) => {
                 const isChecked = selectedItem?.id === item.id;
 

package/src/components/ui/combobox.client.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { Command as CommandPrimitive } from "cmdk";
+import { useState } from "react";
 import {
   Command,
   CommandEmpty,
@@ -9,8 +11,6 @@ import {
 } from "@/components/ui/command";
 import { Popover, PopoverAnchor, PopoverContent } from "@/components/ui/popover";
 import { cn } from "@/lib/entry";
-import { Command as CommandPrimitive } from "cmdk";
-import { useState } from "react";
 
 export type ComboboxItem = {
   id: string;

package/src/components/ui/command.tsx

@@ -2,7 +2,7 @@
 
 import { Command as CommandPrimitive } from "cmdk";
 import { SearchIcon } from "lucide-react";
-import * as React from "react";
+import type * as React from "react";
 
 import {
   Dialog,

package/src/components/ui/context-menu.tsx

@@ -2,7 +2,7 @@
 
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils/cn";
 

package/src/components/ui/date-picker.client.tsx

@@ -1,11 +1,11 @@
 "use client";
 
+import { Calendar as CalendarIcon } from "lucide-react";
+import * as React from "react";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { cn } from "@/lib/utils/cn";
-import { Calendar as CalendarIcon } from "lucide-react";
-import * as React from "react";
 
 export type DatePickerProps = Omit<React.ComponentProps<typeof Button>, "onSelect" | "disabled"> & {
   initialDate?: Date;

package/src/components/ui/dialog.client.tsx

@@ -2,7 +2,7 @@
 
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { XIcon } from "lucide-react";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils/cn";
 

package/src/components/ui/drawer.client.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import * as React from "react";
+import type * as React from "react";
 import { Drawer as DrawerPrimitive } from "vaul";
 
 import { cn } from "@/lib/utils/cn";

package/src/components/ui/dropdown-menu.tsx

@@ -2,7 +2,7 @@
 
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils/cn";
 

package/src/components/ui/form.client.tsx

@@ -1,16 +1,16 @@
 "use client";
 
-import * as LabelPrimitive from "@radix-ui/react-label";
+import type * as LabelPrimitive from "@radix-ui/react-label";
 import { Slot } from "@radix-ui/react-slot";
 import * as React from "react";
 import {
   Controller,
-  FormProvider,
-  useFormContext,
-  useFormState,
   type ControllerProps,
   type FieldPath,
   type FieldValues,
+  FormProvider,
+  useFormContext,
+  useFormState,
 } from "react-hook-form";
 
 import { Label } from "@/components/ui/label";

package/src/components/ui/hover-card.client.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils/cn";
 

package/src/components/ui/input-date-time.tsx

@@ -1,15 +1,15 @@
-import { cn } from "@/lib/utils/cn";
 import { format } from "date-fns";
+import { cn } from "@/lib/utils/cn";
 import { Input } from "./input";
 
 /**
  * DateTimeInput
  */
 type DateTimeInputProps = Omit<React.ComponentProps<"input">, "type" | "value" | "defaultValue"> & {
-  defaultValue?: Date;
-  value?: Date;
-  onValueChange?: (date: Date | undefined) => void;
-  onValueBlur?: (date: Date | undefined) => void;
+  defaultValue?: Date | string;
+  value?: Date | string;
+  onValueChange?: (date: string | undefined) => void;
+  onValueBlur?: (date: string | undefined) => void;
 };
 
 export function DateTimeInput({
@@ -26,12 +26,16 @@ export function DateTimeInput({
   const defaultValue =
     props.defaultValue instanceof Date
       ? format(props.defaultValue, "yyyy-MM-dd'T'HH:mm")
-      : undefined;
+      : typeof props.defaultValue === "string"
+        ? props.defaultValue
+        : undefined;
 
   const value =
     props.value && props.value instanceof Date
       ? format(props.value, "yyyy-MM-dd'T'HH:mm")
-      : undefined;
+      : typeof props.value === "string"
+        ? props.value
+        : undefined;
 
   return (
     <Input
@@ -40,13 +44,11 @@ export function DateTimeInput({
       defaultValue={defaultValue}
       value={value}
       onChange={(e) => {
-        const date = new Date(e.target.value);
-        onValueChange?.(date ?? undefined);
+        onValueChange?.(e.target.value ?? undefined);
         onChange?.(e);
       }}
       onBlur={(e) => {
-        const date = new Date(e.target.value);
-        onValueBlur?.(date ?? undefined);
+        onValueBlur?.(e.target.value ?? undefined);
         onBlur?.(e);
       }}
       className={cn(

package/src/components/ui/input-recipient.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { cn } from "@/lib/utils/cn";
 import { X } from "lucide-react";
 import * as React from "react";
 import { toast } from "sonner";
+import { cn } from "@/lib/utils/cn";
 
 import { Button } from "./button";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover";
@@ -66,6 +66,7 @@ export function RecipientInput({
     );
   }, [availableContacts, inputValue]);
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: We only want to reset the highlighted index when the filtered contacts change
   React.useEffect(() => {
     setHighlightedIndex(0);
   }, [filteredContacts]);
@@ -167,6 +168,8 @@ export function RecipientInput({
   return (
     <Popover open={open}>
       <PopoverTrigger asChild>
+        {/** biome-ignore lint/a11y/useKeyWithClickEvents: This is needed */}
+        {/** biome-ignore lint/a11y/noStaticElementInteractions: This is needed */}
         <div
           ref={containerRef}
           className={cn(
@@ -216,7 +219,7 @@ export function RecipientInput({
             onKeyDown={handleKeyDown}
             placeholder={value.length === 0 ? placeholder : ""}
             disabled={disabled}
-            className="placeholder:text-muted-foreground min-w-[120px] flex-1 bg-transparent outline-none placeholder:text-sm disabled:cursor-not-allowed"
+            className="placeholder:text-muted-foreground min-w-30 flex-1 bg-transparent outline-none placeholder:text-sm disabled:cursor-not-allowed"
           />
         </div>
       </PopoverTrigger>
@@ -228,7 +231,7 @@ export function RecipientInput({
           width: containerRef.current?.offsetWidth || "auto",
         }}
       >
-        <div className="max-h-[300px] overflow-y-auto p-1">
+        <div className="max-h-75 overflow-y-auto p-1">
           {filteredContacts.length === 0 && inputValue ? (
             <div className="text-muted-foreground px-2 py-2">
               <div className="mb-2 text-xs">Geen contacten gevonden.</div>

package/src/components/ui/input.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils/cn";
 

package/src/components/ui/label.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as LabelPrimitive from "@radix-ui/react-label";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils/cn";
 

package/src/components/ui/navigation-menu.tsx

@@ -3,7 +3,7 @@
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import { cva } from "class-variance-authority";
 import { ChevronDownIcon } from "lucide-react";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils/cn";
 

package/src/components/ui/pagination.tsx

@@ -1,12 +1,14 @@
 import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
-import * as React from "react";
+import type * as React from "react";
 
-import { Button, buttonVariants } from "@/components/ui/button";
+import { type Button, buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils/cn";
 
 function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
   return (
+    // biome-ignore lint/a11y/useSemanticElements: The "nav" element is necessary for accessibility and semantics
     <nav
+      // biome-ignore lint/a11y/noRedundantRoles: The "navigation" role is necessary
       role="navigation"
       aria-label="pagination"
       data-slot="pagination"

package/src/components/ui/popover.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils/cn";
 

package/src/components/ui/progress.client.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as ProgressPrimitive from "@radix-ui/react-progress";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils/cn";
 

package/src/components/ui/radio-group.tsx

@@ -2,7 +2,7 @@
 
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { CircleIcon } from "lucide-react";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils/cn";
 

package/src/components/ui/resizable.client.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { GripVerticalIcon } from "lucide-react";
-import * as React from "react";
+import type * as React from "react";
 import * as ResizablePrimitive from "react-resizable-panels";
 
 import { cn } from "@/lib/utils/cn";

package/src/components/ui/scroll-area.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils/cn";
 

package/src/components/ui/select.client.tsx

@@ -2,7 +2,7 @@
 
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils/cn";
 

package/src/components/ui/separator.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils/cn";
 

package/src/components/ui/sheet.client.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { XIcon } from "lucide-react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils/cn";
 

package/src/components/ui/sidebar.client.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Slot } from "@radix-ui/react-slot";
-import { VariantProps, cva } from "class-variance-authority";
+import { cva, type VariantProps } from "class-variance-authority";
 import { PanelLeftIcon } from "lucide-react";
 import * as React from "react";
 
@@ -83,12 +83,14 @@ function SidebarProvider({
       }
 
       // This sets the cookie to keep the sidebar state.
+      // biome-ignore lint/suspicious/noDocumentCookie: This is needed to persist the sidebar state across page reloads.
       document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
     },
     [setOpenProp, open],
   );
 
   // Helper to toggle the sidebar.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: This is intentional to avoid adding setOpen and setOpenMobile to the dependency array
   const toggleSidebar = React.useCallback(() => {
     return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
   }, [isMobile, setOpen, setOpenMobile]);
@@ -110,6 +112,7 @@ function SidebarProvider({
   // This makes it easier to style the sidebar with Tailwind classes.
   const state = open ? "expanded" : "collapsed";
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: This is intentional to only run on mount to read the cookie value.
   const contextValue = React.useMemo<SidebarContext>(
     () => ({
       state,
@@ -281,7 +284,7 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
       onClick={toggleSidebar}
       title="Toggle Sidebar"
       className={cn(
-        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
         "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
         "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
         "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",

package/src/components/ui/sonner.client.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { Toaster as Sonner, ToasterProps, toast } from "sonner";
+import { Toaster as Sonner, type ToasterProps, toast } from "sonner";
 
 const Toaster = ({ ...props }: ToasterProps) => {
   const { theme = "system" } = useTheme();

package/src/components/ui/switch.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as SwitchPrimitive from "@radix-ui/react-switch";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils/cn";
 

package/src/components/ui/tabs.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils/cn";
 

package/src/components/ui/textarea.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils/cn";
 

package/src/components/ui/toggle-group.client.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import { type VariantProps } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
 import * as React from "react";
 
 import { toggleVariants } from "@/components/ui/toggle";

package/src/components/ui/toggle.tsx

@@ -2,7 +2,7 @@
 
 import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils/cn";
 

package/src/components/ui/tooltip.client.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils/cn";
 

package/src/lib/config/constants.ts

@@ -1 +1 @@
-export const BUCKET_NAME = process.env.S3_BUCKET ?? "";
+export const BUCKET_NAME = process.env.S3_BUCKET ?? "";

package/src/lib/hooks/use-action.ts

@@ -1,10 +1,10 @@
 import "client-only";
 
 import {
-  DefaultError,
-  MutationFunctionContext,
+  type DefaultError,
+  type MutationFunctionContext,
+  type UseMutationOptions,
   useMutation,
-  UseMutationOptions,
 } from "@tanstack/react-query";
 import { isRedirectError } from "next/dist/client/components/redirect-error";
 import { toast } from "sonner";

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

@@ -1,7 +1,7 @@
 "use client";
 
 import type React from "react";
-import { createContext, useContext, useEffect, useState, useTransition } from "react";
+import { createContext, useCallback, useContext, useEffect, useState, useTransition } from "react";
 
 /**
  * Indicator status
@@ -15,7 +15,7 @@ export function useLocalIndicator() {
   /**
    * Start transition
    */
-  const [isPending, startTransition] = useTransition();
+  const [, startTransitionBase] = useTransition();
 
   /**
    * Status of the inline edit indicator
@@ -25,19 +25,28 @@ export function useLocalIndicator() {
   /**
    * Set status to pending when isPending is true
    */
-  useEffect(() => {
-    if (isPending) setStatus("pending");
-  }, [isPending]);
+  const startTransition = useCallback<React.TransitionStartFunction>(
+    (callback) => {
+      setStatus("pending");
+      startTransitionBase(callback);
+    },
+    [],
+  );
 
   /**
    * Set status back to idle after 1.5 seconds when status is succes
    * Set status back to idle after 3 seconds when status is error
    */
-  useEffect(() => {
-    if (status === "success") setTimeout(() => setStatus("idle"), 1000);
-    if (status === "error") setTimeout(() => setStatus("idle"), 2000);
+  const resetAfterDelay = useCallback(() => {
+    if (status !== "success" && status !== "error") return undefined;
+
+    const timeout = setTimeout(() => setStatus("idle"), status === "success" ? 1000 : 2000);
+
+    return () => clearTimeout(timeout);
   }, [status]);
 
+  useEffect(() => resetAfterDelay(), [resetAfterDelay]);
+
   return { status, setStatus, startTransition };
 }
 

package/src/lib/types/config.ts

@@ -1,4 +1,4 @@
-import { type LucideIcon } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
 
 export type ConfigWithIcon<TValue> = {
   value: TValue;

package/src/lib/utils/cn.ts

@@ -1,4 +1,4 @@
-import { clsx, type ClassValue } from "clsx";
+import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {

package/src/lib/utils/manifest.ts

@@ -1,5 +1,5 @@
-import { type TulipConfig } from "@/modules/config/lib/config";
-import { MetadataRoute } from "next";
+import type { MetadataRoute } from "next";
+import type { TulipConfig } from "@/modules/config/lib/config";
 
 export function generateManifest(config: TulipConfig) {
   return (): MetadataRoute.Manifest => ({
@@ -9,6 +9,7 @@ export function generateManifest(config: TulipConfig) {
     theme_color: "#ffffff",
     background_color: "#ffffff",
     display: "standalone",
+    // biome-ignore lint/suspicious/noExplicitAny: This value is not yet supported by the type definitions.
     display_override: ["tabbed" as any],
     orientation: "portrait",
     start_url: "/",

package/src/lib/utils/time-picker.ts

@@ -27,7 +27,7 @@ export function getValidNumber(
 ) {
   let numericValue = parseInt(value, 10);
 
-  if (!isNaN(numericValue)) {
+  if (!Number.isNaN(numericValue)) {
     if (!loop) {
       if (numericValue > max) numericValue = max;
       if (numericValue < min) numericValue = min;
@@ -64,7 +64,7 @@ type GetValidArrowNumberConfig = {
 
 export function getValidArrowNumber(value: string, { min, max, step }: GetValidArrowNumberConfig) {
   let numericValue = parseInt(value, 10);
-  if (!isNaN(numericValue)) {
+  if (!Number.isNaN(numericValue)) {
     numericValue += step;
     return getValidNumber(String(numericValue), { min, max, loop: true });
   }

package/src/lib/utils/url.ts

@@ -8,5 +8,5 @@ export function url(path: string = ""): string {
 
   if (base) return `https://${base}${path}`;
 
-  return `http://localhost:${process.env.NEXT_PUBLIC_PORT ?? 3000}` + path;
+  return `http://localhost:${process.env.NEXT_PUBLIC_PORT ?? 3000}${path}`;
 }

package/src/modules/auth/components/allowed.client.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { JSX } from "react";
-import { usePermission, UsePermissionProps } from "../hooks/use-permission";
+import type { JSX } from "react";
+import { type UsePermissionProps, usePermission } from "../hooks/use-permission";
 
 /**
  * Allowed types

package/src/modules/auth/components/auth-layout.server.tsx

@@ -1,10 +1,10 @@
 import Image from "next/image";
 import Link from "next/link";
-import { PropsWithChildren } from "react";
+import type { PropsWithChildren } from "react";
 
 export async function AuthLayout(props: PropsWithChildren<{ name: string }>) {
   return (
-    <div className="container relative mx-auto grid h-[100dvh] flex-col items-center justify-center lg:max-w-none lg:grid-cols-2 lg:px-0">
+    <div className="container relative mx-auto grid h-dvh flex-col items-center justify-center lg:max-w-none lg:grid-cols-2 lg:px-0">
       <div className="bg-muted relative hidden h-full flex-col p-10 text-white lg:flex dark:border-r">
         <Image src="/images/auth-background.jpeg" alt="Background" className="object-cover" fill />