@addsign/moje-agenda-shared-lib 2.0.0 → 2.0.3

package/dist/main.d.ts

@@ -38,6 +38,10 @@ export * from './components/ui/form.tsx';
 export * from './components/ui/radioGroup.tsx';
 export * from './components/ui/command.tsx';
 export * from './components/ui/Combobox.tsx';
+export * from './components/ui/select.tsx';
+export * from './components/ui/tooltip.tsx';
+export * from './components/ui/separator.tsx';
+export { Button as ButtonCN, buttonVariants } from './components/ui/button.tsx';
 export { Calendar as CalendarCn } from './components/ui/Calendar.tsx';
 export { default as DateTimePicker } from './components/ui/DateTimePicker.tsx';
 export { default as DatePicker } from './components/ui/DatePicker.tsx';

package/dist/main.js

@@ -30,16 +30,17 @@ import { handleErrors } from "./utils/handleErrors.js";
 import { hasRightInModule } from "./utils/hasRightInModule.js";
 import { hasRole } from "./utils/hasRole.js";
 import { EApproverRoles, EApproverTypes, EDecisionsTranslations, EEntity, Eagendy, Eassignments, Estavy } from "./types.js";
-import { D, c, e, i, g, f, b, a, h, d } from "./Dialog-DZMfjbGC.js";
+import { D, c, e, i, g, f, b, a, h, d } from "./Dialog-CLPZ1Y00.js";
 import { ScrollArea, ScrollBar } from "./components/ui/ScrollArea.js";
 import { Input } from "./components/ui/input.js";
 import { Form, FormControl, FormDescription, FormFieldCN, FormItem, FormLabel, FormMessage, useFormField } from "./components/ui/form.js";
 import { RadioGroupCN, RadioGroupItem } from "./components/ui/radioGroup.js";
 import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "./components/ui/command.js";
-import "react/jsx-runtime";
-import "react";
-import "./components/ui/button.js";
-import "./components/ui/popover.js";
+import "./components/ui/Combobox.js";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./components/ui/select.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/ui/tooltip.js";
+import { Separator } from "./components/ui/separator.js";
+import { Button, buttonVariants } from "./components/ui/button.js";
 import { C } from "./Calendar-DWT4e7Th.js";
 import { default as default22 } from "./components/ui/DateTimePicker.js";
 import { default as default23 } from "./components/ui/DatePicker.js";
@@ -47,6 +48,7 @@ export {
   default3 as AutocompleteSearchBar,
   default4 as AutocompleteSearchBarServer,
   default2 as Button,
+  Button as ButtonCN,
   default15 as Calendar,
   C as CalendarCn,
   Command,
@@ -107,9 +109,25 @@ export {
   ScrollArea,
   ScrollBar,
   default11 as SectionTitle,
+  Select,
+  SelectContent,
   default7 as SelectField,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  Separator,
   default13 as Spinner,
   default20 as SpinnerIcon,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  buttonVariants,
   getFullName,
   getFullNameList,
   getFullNameListPositionWithEmployee,

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"main.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/ui/Combobox.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as React from "react";
-import { Check, ChevronsUpDown, Plus } from "lucide-react";
+import { Check, ChevronsUpDown, Plus, X } from "lucide-react";
 
 import { cn } from "../../utils/utils";
 import { Button } from "./button";
@@ -14,109 +14,166 @@ import {
   CommandList,
 } from "./command";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { IOptionItem } from "../../types";
 
-const predefinedFrameworks = [
-  {
-    value: "next.js",
-    label: "Next.js",
-  },
-  {
-    value: "sveltekit",
-    label: "SvelteKit",
-  },
-  {
-    value: "nuxt.js",
-    label: "Nuxt.js",
-  },
-  {
-    value: "remix",
-    label: "Remix",
-  },
-  {
-    value: "astro",
-    label: "Astro",
-  },
-];
+interface ComboboxProps {
+  value?: string;
+  onChange?: (value: string | undefined) => void;
+  className?: string;
+  placeholder?: string;
+  placeholderSearch?: string;
+  clearable?: boolean;
+  options?: IOptionItem[];
+  allowAddNew?: boolean;
+}
 
-export default function ComboboxDemo() {
-  const [open, setOpen] = React.useState(false);
-  const [value, setValue] = React.useState("");
-  const [inputValue, setInputValue] = React.useState("");
-  const [frameworks, setFrameworks] = React.useState(predefinedFrameworks);
+const Combobox = React.forwardRef<HTMLButtonElement, ComboboxProps>(
+  (
+    {
+      value: propValue,
+      onChange: propOnChange,
+      className,
+      placeholder,
+      placeholderSearch = "Vyhledejte položku",
+      clearable = false,
+      options = [],
+      allowAddNew = false,
+    },
+    ref
+  ) => {
+    const [open, setOpen] = React.useState(false);
+    const [value, setValue] = React.useState(propValue || "");
+    const [inputValue, setInputValue] = React.useState("");
+    const [frameworks, setFrameworks] = React.useState<IOptionItem[]>(options);
 
-  const handleSelect = (currentValue: string) => {
-    if (currentValue === "add-custom") {
-      if (
-        inputValue &&
-        !frameworks.some((f) => f.value === inputValue.toLowerCase())
-      ) {
-        const newFramework = {
-          value: inputValue.toLowerCase(),
-          label: inputValue,
-        };
-        setFrameworks([...frameworks, newFramework]);
-        setValue(newFramework.value);
+    React.useEffect(() => {
+      if (propValue !== undefined) {
+        setValue(propValue);
       }
-    } else {
-      setValue(currentValue === value ? "" : currentValue);
-    }
-    setOpen(false);
-  };
+    }, [propValue]);
 
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          role="combobox"
-          aria-expanded={open}
-          className="w-[200px] justify-between"
-        >
-          {value
-            ? frameworks.find((framework) => framework.value === value)?.label
-            : "Select framework..."}
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-[200px] p-0">
-        <Command>
-          <CommandInput
-            placeholder="Search framework..."
-            className="h-9"
-            value={inputValue}
-            onValueChange={setInputValue}
-          />
-          <CommandList>
-            <CommandEmpty>
-              <Button
-                variant="ghost"
-                className="w-full justify-start"
-                onClick={() => handleSelect("add-custom")}
-              >
-                <Plus className="mr-2 h-4 w-4" />
-                Add "{inputValue}"
-              </Button>
-            </CommandEmpty>
-            <CommandGroup>
-              {frameworks.map((framework) => (
-                <CommandItem
-                  key={framework.value}
-                  value={framework.value}
-                  onSelect={handleSelect}
-                >
-                  {framework.label}
-                  <Check
-                    className={cn(
-                      "ml-auto h-4 w-4",
-                      value === framework.value ? "opacity-100" : "opacity-0"
-                    )}
-                  />
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  );
-}
+    React.useEffect(() => {
+      setFrameworks(options);
+    }, [options]);
+
+    const handleSelect = (currentValue: string) => {
+      if (currentValue === "add-custom") {
+        if (
+          inputValue &&
+          !frameworks.some((f) => f.value === inputValue.toLowerCase())
+        ) {
+          const newFramework = {
+            value: inputValue.toLowerCase(),
+            label: inputValue,
+          };
+
+          setFrameworks([...frameworks, newFramework]);
+          updateValue(newFramework.value);
+        }
+      } else {
+        updateValue(currentValue === value ? "" : currentValue);
+      }
+      setOpen(false);
+    };
+
+    const updateValue = (newValue: string) => {
+      setValue(newValue);
+      propOnChange?.(newValue || undefined);
+    };
+
+    const handleClear = (e: React.MouseEvent) => {
+      e.stopPropagation();
+      updateValue("");
+      setInputValue("");
+      setOpen(false);
+    };
+
+    value;
+    return (
+      <Popover open={open} onOpenChange={setOpen}>
+        <div className="relative w-full">
+          <PopoverTrigger asChild>
+            <Button
+              ref={ref}
+              type="button"
+              variant="outline"
+              role="combobox"
+              aria-expanded={open}
+              className={cn("w-full justify-between", className)}
+            >
+              <span className="flex-1 text-left truncate mr-2 font-normal">
+                {value ? (
+                  frameworks.find((framework) => framework.value === value)
+                    ?.label
+                ) : (
+                  <span className="text-muted-foreground font-normal">
+                    {placeholder}
+                  </span>
+                )}
+              </span>
+
+              <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50 ml-6" />
+            </Button>
+          </PopoverTrigger>
+          {clearable && value && (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="absolute right-6 top-0 h-full px-1 py-2 hover:bg-transparent"
+              onClick={handleClear}
+            >
+              <X className="h-4 w-4 shrink-0 opacity-50 hover:opacity-100" />
+            </Button>
+          )}
+        </div>
+        <PopoverContent className="min-w-[200px]  w-full p-0">
+          <Command>
+            <CommandInput
+              placeholder={placeholderSearch}
+              className="h-9"
+              value={inputValue}
+              onValueChange={setInputValue}
+            />
+            <CommandList>
+              <CommandEmpty>
+                {allowAddNew && (
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start"
+                    onClick={() => handleSelect("add-custom")}
+                  >
+                    <Plus className="mr-2 h-4 w-4" />
+                    Přidat "{inputValue}"
+                  </Button>
+                )}
+              </CommandEmpty>
+
+              <CommandGroup>
+                {frameworks.map((framework) => (
+                  <CommandItem
+                    key={framework.value}
+                    value={framework.value as string}
+                    onSelect={handleSelect}
+                  >
+                    {framework.label}
+                    <Check
+                      className={cn(
+                        "ml-auto h-4 w-4",
+                        value === framework.value ? "opacity-100" : "opacity-0"
+                      )}
+                    />
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    );
+  }
+);
+
+Combobox.displayName = "Combobox";
+
+export default Combobox;

package/lib/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../utils/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-ring transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -20,8 +20,8 @@ const buttonVariants = cva(
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
+        default: "h-10 px-2 py-2",
+        sm: "h-9 rounded-md px-2",
         lg: "h-11 rounded-md px-8",
         icon: "h-10 w-10",
       },

package/lib/components/ui/command.tsx

@@ -73,7 +73,7 @@ const CommandEmpty = React.forwardRef<
 >((props, ref) => (
   <CommandPrimitive.Empty
     ref={ref}
-    className="py-6 text-center text-sm"
+    className="py-0 text-center text-sm"
     {...props}
   />
 ));

package/lib/components/ui/input.tsx

@@ -1,19 +1,105 @@
 import * as React from "react";
 
 import { cn } from "../..//utils/utils";
+import { Button } from "./button";
+import { LoaderCircleIcon, X } from "lucide-react";
+import SpinnerIcon from "../SpinnerIcon";
 
-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
-  ({ className, type, ...props }, ref) => {
+interface IInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  debounceTimeout?: number;
+  clearable?: boolean;
+}
+const Input = React.forwardRef<HTMLInputElement, IInputProps>(
+  (
+    {
+      className,
+      type,
+      value: propValue,
+      onChange,
+      clearable = false,
+      debounceTimeout,
+      ...props
+    },
+    ref
+  ) => {
+    const [internalValue, setInternalValue] = React.useState(propValue || "");
+    const debounceTimeoutRef = React.useRef<NodeJS.Timeout | null>(null); // Ref to hold the debounce timeout
+    const [inputIsChanging, setInputIsChanging] = React.useState(false);
+    React.useEffect(() => {
+      setInternalValue(propValue ?? "");
+    }, [propValue]);
+
+    const handleDebouncedChange = React.useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        const { value } = e.target;
+        setInternalValue(value); // Update local state
+        setInputIsChanging(true);
+
+        if (debounceTimeout) {
+          // Clear any previous debounce timeout
+          if (debounceTimeoutRef.current)
+            clearTimeout(debounceTimeoutRef.current);
+
+          // Set a new debounce timeout
+          debounceTimeoutRef.current = setTimeout(() => {
+            const newValue: string = e.target.value;
+            setInternalValue(newValue);
+            onChange?.(e);
+            setInputIsChanging(false);
+          }, debounceTimeout);
+        } else {
+          const newValue = e.target.value;
+          setInternalValue(newValue);
+          onChange?.(e);
+          setInputIsChanging(false);
+        }
+      },
+      [debounceTimeout, debounceTimeoutRef, onChange, setInternalValue]
+    );
+
+    const handleClear = () => {
+      setInternalValue("");
+      onChange?.({
+        target: { value: "" },
+      } as React.ChangeEvent<HTMLInputElement>);
+    };
     return (
-      <input
-        type={type}
-        className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-ring file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-80 disabled:border-opacity-100 md:text-sm",
-          className
+      <div className="relative w-full">
+        <input
+          type={type}
+          value={internalValue}
+          onChange={handleDebouncedChange}
+          className={cn(
+            "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 " +
+              (clearable && !!internalValue ? " pr-10 " : " pr-3 ") +
+              "  text-base ring-offset-ring file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-80 disabled:border-opacity-100 md:text-sm",
+            className
+          )}
+          ref={ref}
+          {...props}
+        />
+
+        {inputIsChanging === true && (
+          <div className="absolute right-0 top-0 h-full px-2 py-2 hover:bg-transparent text-muted-foreground">
+            <SpinnerIcon
+              icon={
+                <LoaderCircleIcon size={25} className="text-muted-foreground" />
+              }
+            />
+          </div>
+        )}
+        {!!internalValue && clearable && (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+            onClick={handleClear}
+          >
+            <X className="h-4 w-4 text-muted-foreground" />
+            <span className="sr-only">Clear input</span>
+          </Button>
         )}
-        ref={ref}
-        {...props}
-      />
+      </div>
     );
   }
 );

package/lib/components/ui/select.tsx

@@ -9,22 +9,26 @@ const Select = SelectPrimitive.Root;
 const SelectGroup = SelectPrimitive.Group;
 
 const SelectValue = SelectPrimitive.Value;
-
+type SelectTriggerProps = React.ComponentPropsWithoutRef<
+  typeof SelectPrimitive.Trigger
+> & {
+  iconClassName?: string;
+};
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
+  SelectTriggerProps
+>(({ className, children, iconClassName, ...props }, ref) => (
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-ring placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className
     )}
     {...props}
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
+      <ChevronDown className={cn("h-4 w-4 opacity-50 ", iconClassName)} />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));

package/lib/components/ui/separator.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+import { cn } from "../../utils/utils";
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };

package/lib/components/ui/tooltip.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "../../utils/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/lib/main.ts

@@ -56,6 +56,10 @@ export * from "./components/ui/form.tsx";
 export * from "./components/ui/radioGroup.tsx";
 export * from "./components/ui/command.tsx";
 export * from "./components/ui/Combobox.tsx";
+export * from "./components/ui/select.tsx";
+export * from "./components/ui/tooltip.tsx";
+export * from "./components/ui/separator.tsx";
+export { Button as ButtonCN, buttonVariants } from "./components/ui/button.tsx";
 
 
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@addsign/moje-agenda-shared-lib",
   "private": false,
-  "version": "2.0.0",
+  "version": "2.0.3",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -69,7 +69,9 @@
     "@radix-ui/react-radio-group": "^1.2.1",
     "@radix-ui/react-scroll-area": "^1.2.0",
     "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.4",
     "@types/date-fns": "^2.6.3",
     "axios": "^1.7.2",
     "class-variance-authority": "^0.7.0",