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

package/lib/components/ui/Combobox.tsx

@@ -36,7 +36,7 @@ const Combobox = React.forwardRef<HTMLButtonElement, ComboboxProps>(
       placeholder,
       placeholderSearch = "Vyhledejte položku",
       clearable = false,
-      options = [],
+      options: propOptions = [],
       allowAddNew = false,
     },
     ref
@@ -44,17 +44,28 @@ const Combobox = React.forwardRef<HTMLButtonElement, ComboboxProps>(
     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 [frameworks, setFrameworks] =
+      React.useState<IOptionItem[]>(propOptions);
 
     React.useEffect(() => {
+      console.log(
+        "%clibcomponentsCombobox.tsx:51 propValue",
+        "color: #007acc;",
+        propValue
+      );
       if (propValue !== undefined) {
         setValue(propValue);
       }
     }, [propValue]);
 
     React.useEffect(() => {
-      setFrameworks(options);
-    }, [options]);
+      console.log(
+        "%clibcomponentsCombobox.tsx:60 setFrameworks",
+        "color: #007acc;",
+        setFrameworks
+      );
+      setFrameworks(propOptions);
+    }, [propOptions]);
 
     const handleSelect = (currentValue: string) => {
       if (currentValue === "add-custom") {
@@ -127,7 +138,7 @@ const Combobox = React.forwardRef<HTMLButtonElement, ComboboxProps>(
             </Button>
           )}
         </div>
-        <PopoverContent className="min-w-[200px]  w-full p-0">
+        <PopoverContent className="min-w-[200px]  w-[var(--radix-popover-trigger-width)] p-0">
           <Command>
             <CommandInput
               placeholder={placeholderSearch}
@@ -139,6 +150,7 @@ const Combobox = React.forwardRef<HTMLButtonElement, ComboboxProps>(
               <CommandEmpty>
                 {allowAddNew && (
                   <Button
+                    type="button"
                     variant="ghost"
                     className="w-full justify-start"
                     onClick={() => handleSelect("add-custom")}
@@ -153,8 +165,8 @@ const Combobox = React.forwardRef<HTMLButtonElement, ComboboxProps>(
                 {frameworks.map((framework) => (
                   <CommandItem
                     key={framework.value}
-                    value={framework.value as string}
-                    onSelect={handleSelect}
+                    value={framework.label as string}
+                    onSelect={() => handleSelect(framework.value as string)}
                   >
                     {framework.label}
                     <Check

package/lib/components/ui/DatePicker.tsx

@@ -38,6 +38,16 @@ const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
 
     const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
       setInputValue(event.target.value);
+      const parsedDate = parse(event.target.value, DATE_FORMAT, new Date());
+      if (isValid(parsedDate)) {
+        setDate(parsedDate);
+        onChange?.(parsedDate);
+        setInputValue(format(parsedDate, DATE_FORMAT));
+      } else {
+        setInputValue("");
+        setDate(undefined);
+        onChange?.(undefined);
+      }
     };
 
     const handleInputBlur = () => {
@@ -95,6 +105,7 @@ const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
             <CalendarIcon className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
             {clearable && inputValue && (
               <Button
+                type="button"
                 variant="ghost"
                 size="icon"
                 className="absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 p-0"

package/lib/components/ui/DateTimePicker.tsx

@@ -19,7 +19,7 @@ const DATE_FORMAT = "dd.MM.yyyy HH:mm";
 
 interface DateTimePickerProps {
   value?: Date;
-  onChange?: (date: Date | undefined) => void;
+  onChange?: (date: Date | undefined | null) => void;
   className?: string;
   placeholder?: string;
   clearable?: boolean;
@@ -30,43 +30,56 @@ const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(
     { value, onChange, className, clearable = true, placeholder, ...props },
     ref
   ) => {
-    const [dateTime, setDateTime] = React.useState<Date | undefined>(value);
-    const [inputValue, setInputValue] = React.useState<string>("");
+    const [dateTime, setDateTime] = React.useState<Date | null>(value || null);
+    const [inputValue, setInputValue] = React.useState<string | null>("");
 
     useEffect(() => {
       if (value) {
         setDateTime(value);
         setInputValue(format(value, DATE_FORMAT));
       } else {
-        setDateTime(undefined);
+        setDateTime(null);
         setInputValue("");
       }
     }, [value]);
 
     const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      event.stopPropagation(); // Stop bubbling to prevent interference with other components
+
       setInputValue(event.target.value);
+      const parsedDateTime = parse(event.target.value, DATE_FORMAT, new Date());
+
+      if (isValid(parsedDateTime)) {
+        setDateTime(parsedDateTime);
+        onChange?.(parsedDateTime);
+        setInputValue(format(parsedDateTime, DATE_FORMAT));
+      } else {
+        setInputValue("");
+        setDateTime(null);
+        onChange?.(null);
+      }
     };
 
     const handleInputBlur = () => {
       if (inputValue === "") {
-        setDateTime(undefined);
-        onChange?.(undefined);
+        setDateTime(null);
+        onChange?.(null);
         return;
       }
 
-      const parsedDateTime = parse(inputValue, DATE_FORMAT, new Date());
+      const parsedDateTime = parse(inputValue || "", DATE_FORMAT, new Date());
       if (isValid(parsedDateTime)) {
         setDateTime(parsedDateTime);
         onChange?.(parsedDateTime);
         setInputValue(format(parsedDateTime, DATE_FORMAT));
       } else {
         setInputValue("");
-        setDateTime(undefined);
-        onChange?.(undefined);
+        setDateTime(null);
+        onChange?.(null);
       }
     };
 
-    const handleDateSelect = (selectedDate: Date | undefined) => {
+    const handleDateSelect = (selectedDate: Date | undefined | null) => {
       if (selectedDate) {
         const newDateTime = dateTime
           ? set(dateTime, {
@@ -79,9 +92,9 @@ const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(
         onChange?.(newDateTime);
         setInputValue(format(newDateTime, DATE_FORMAT));
       } else {
-        setDateTime(undefined);
+        setDateTime(null);
         setInputValue("");
-        onChange?.(undefined);
+        onChange?.(null);
       }
     };
 
@@ -102,8 +115,8 @@ const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(
 
     const handleClear = () => {
       setInputValue("");
-      setDateTime(undefined);
-      onChange?.(undefined);
+      setDateTime(null);
+      onChange?.(null);
     };
 
     const timeOptions = Array.from({ length: 48 }, (_, i) => {
@@ -119,7 +132,7 @@ const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(
             <Input
               ref={ref}
               type="text"
-              value={inputValue}
+              value={inputValue || ""}
               onChange={handleInputChange}
               onBlur={handleInputBlur}
               placeholder={placeholder}
@@ -132,6 +145,7 @@ const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(
             <CalendarClockIcon className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
             {clearable && inputValue && (
               <Button
+                type="button"
                 variant="ghost"
                 size="icon"
                 className="absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 p-0"
@@ -146,7 +160,7 @@ const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(
         <PopoverContent className="w-auto p-0" align="start">
           <Calendar
             mode="single"
-            selected={dateTime}
+            selected={dateTime || undefined}
             onSelect={handleDateSelect}
             initialFocus
           />

package/lib/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+
+import { cn } from "../../utils/utils";
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

package/lib/components/ui/input.tsx

@@ -90,6 +90,7 @@ const Input = React.forwardRef<HTMLInputElement, IInputProps>(
         )}
         {!!internalValue && clearable && (
           <Button
+            type="button"
             variant="ghost"
             size="icon"
             className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"

package/lib/components/ui/textarea.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import { cn } from "../../utils/utils";
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-ring 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-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Textarea.displayName = "Textarea";
+
+export { Textarea };

package/lib/main.ts

@@ -59,6 +59,8 @@ 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 * from "./components/ui/textarea.tsx";
+export * from "./components/ui/checkbox.tsx";
 export { Button as ButtonCN, buttonVariants } from "./components/ui/button.tsx";
 
 

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@addsign/moje-agenda-shared-lib",
   "private": false,
-  "version": "2.0.3",
+  "version": "2.0.5",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
   "files": [
     "dist",
-    "lib"
+    "lib",
+    "tailwind.config.js"
   ],
   "sideEffects": [
     "**/*.css"
@@ -63,6 +64,7 @@
   "dependencies": {
     "@addsign/moje-agenda-shared-lib": "file:",
     "@hookform/resolvers": "^3.9.1",
+    "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.2",

package/tailwind.config.js

@@ -0,0 +1,97 @@
+
+/** @type {import('tailwindcss').Config.theme.extend} */
+export const TAILWIND_THEME_EXTEND = {
+  colors: {
+    border: "var(--border)",
+    input: "var(--input)",
+    ring: "var(--ring)",
+    background: "var(--background)",
+    foreground: "var(--foreground)",
+
+    // Using modern `rgb`
+    primary: {
+      DEFAULT: "var(--color-primary)",
+      hover: "var(--color-primary-hover)",
+      text: "var(--color-primary-text)",
+      foreground: "var(--color-primary-text)",
+      border: "var(--color-primary-border)",
+    },
+    secondary: {
+      DEFAULT: "var(--color-secondary)",
+      hover: "var(--color-secondary-hover)",
+      text: "var(--color-secondary-text)",
+      foreground: "var(--secondary-foreground)",
+      border: "var(--color-secondary-border)",
+    },
+    danger: {
+      DEFAULT: "var(--color-danger)",
+      hover: "var(--color-danger-hover)",
+      text: "var(--color-danger-text)",
+      border: "var(--color-danger-border)",
+    },
+    destructive: {
+      DEFAULT: "var(--destructive)",
+      foreground: "var(--destructive-foreground)",
+    },
+    warning: {
+      DEFAULT: "var(--color-warning)",
+      hover: "var(--color-warning-hover)",
+      text: "var(--color-warning-text)",
+      border: "var(--color-warning-border)",
+    },
+    success: {
+      DEFAULT: "var(--color-success)",
+      hover: "var(--color-success-hover)",
+      text: "var(--color-success-text)",
+      border: "var(--color-success-border)",
+    },
+
+    gray: {
+      150: "rgb(238, 240, 243)",
+    },
+
+    muted: {
+      DEFAULT: "var(--muted)",
+      foreground: "var(--muted-foreground)",
+    },
+    accent: {
+      DEFAULT: "var(--accent)",
+      foreground: "var(--accent-foreground)",
+    },
+    popover: {
+      DEFAULT: "var(--popover)",
+      foreground: "var(--popover-foreground)",
+    },
+    card: {
+      DEFAULT: "var(--card)",
+      foreground: "var(--card-foreground)",
+    },
+  },
+
+  animation: {
+    spin: 'spin 2s linear infinite',
+  },
+}
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: "class",
+  important: false, // Ensures all classes use !important
+
+  content: [
+    "./lib/**/*.{js,ts,jsx,tsx}",
+    "./lib/**/*.{ts,tsx}",
+    "./lib/components/**/*.{ts,tsx}",
+    "./node_modules/react-tailwindcss-datepicker/dist/index.esm.js",
+  ],
+  theme: {
+    extend: TAILWIND_THEME_EXTEND,
+  },
+  plugins: [],
+  safelist: [
+    "bg-danger", // Add any other dynamic classes here
+    "lg:grid-cols-3",
+    "lg:grid-cols-2",
+    "lg:grid-cols-4",
+  ],
+};