@addsign/moje-agenda-shared-lib 2.0.4 → 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}
@@ -154,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/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/main.ts

@@ -60,6 +60,7 @@ 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.4",
+  "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",
+  ],
+};