@addsign/moje-agenda-shared-lib 2.0.11 → 2.0.13

package/lib/components/ui/DateTimePicker.tsx

@@ -14,6 +14,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "./select";
+import { PopoverClose } from "@radix-ui/react-popover";
 
 const DATE_FORMAT = "dd.MM.yyyy HH:mm";
 
@@ -25,6 +26,18 @@ interface DateTimePickerProps {
   clearable?: boolean;
 }
 
+// Helper function to round to the nearest half-hour
+const roundToNearestHalfHour = (date: Date) => {
+  const minutes = date.getMinutes();
+  const roundedMinutes = minutes < 15 ? 0 : minutes < 45 ? 30 : 60;
+  return set(date, {
+    seconds: 0,
+    milliseconds: 0,
+    minutes: roundedMinutes,
+    hours: roundedMinutes === 60 ? date.getHours() + 1 : date.getHours(),
+  });
+};
+
 const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(
   (
     { value, onChange, className, clearable = true, placeholder, ...props },
@@ -35,8 +48,9 @@ const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(
 
     useEffect(() => {
       if (value) {
-        setDateTime(value);
-        setInputValue(format(value, DATE_FORMAT));
+        const roundedDate = roundToNearestHalfHour(value);
+        setDateTime(roundedDate);
+        setInputValue(format(roundedDate, DATE_FORMAT));
       } else {
         setDateTime(null);
         setInputValue("");
@@ -100,17 +114,11 @@ const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(
 
     const handleTimeSelect = (time: string) => {
       const [hours, minutes] = time.split(":").map(Number);
-      if (dateTime) {
-        const newDateTime = set(dateTime, { hours, minutes });
-        setDateTime(newDateTime);
-        onChange?.(newDateTime);
-        setInputValue(format(newDateTime, DATE_FORMAT));
-      } else {
-        const newDateTime = set(new Date(), { hours, minutes });
-        setDateTime(newDateTime);
-        onChange?.(newDateTime);
-        setInputValue(format(newDateTime, DATE_FORMAT));
-      }
+
+      const newDateTime = set(dateTime ?? new Date(), { hours, minutes });
+      setDateTime(newDateTime);
+      onChange?.(newDateTime);
+      setInputValue(format(newDateTime, DATE_FORMAT));
     };
 
     const handleClear = () => {
@@ -165,30 +173,35 @@ const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(
             initialFocus
           />
           <div className="p-3 border-t border-border">
-            <Select
-              onValueChange={handleTimeSelect}
-              value={dateTime ? format(dateTime, "HH:mm") : undefined}
-            >
-              <SelectTrigger>
-                <SelectValue placeholder="Select time">
-                  {dateTime ? (
-                    <div className="flex items-center">
-                      <Clock className="mr-2 h-4 w-4" />
-                      {format(dateTime, "HH:mm")}
-                    </div>
-                  ) : (
-                    "Select time"
-                  )}
-                </SelectValue>
-              </SelectTrigger>
-              <SelectContent>
-                {timeOptions.map((time) => (
-                  <SelectItem key={time} value={time}>
-                    {time}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
+            <div className="flex items-center justify-between">
+              <Select
+                onValueChange={handleTimeSelect}
+                value={dateTime ? format(dateTime, "HH:mm") : undefined}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Select time">
+                    {dateTime ? (
+                      <div className="flex items-center">
+                        <Clock className="mr-2 h-4 w-4" />
+                        {format(dateTime, "HH:mm")}
+                      </div>
+                    ) : (
+                      "Select time"
+                    )}
+                  </SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  {timeOptions.map((time) => (
+                    <SelectItem key={time} value={time}>
+                      {time}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <PopoverClose asChild>
+                <Button className="ml-2 px-3">OK</Button>
+              </PopoverClose>
+            </div>
           </div>
         </PopoverContent>
       </Popover>

package/lib/components/ui/sonner.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, toast } from "sonner";
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster, toast };

package/lib/components/ui/toast.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import * as React from "react";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+
+import { cn } from "../../utils/utils";
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props}
+  />
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    )}
+    {...props}
+  />
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold", className)}
+    {...props}
+  />
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+};

package/lib/main.ts

@@ -23,6 +23,10 @@ export { default as Modal } from "./components/Modal.tsx";
 export { default as PositionsSelectorSingle } from "./components/form/PositionsSelectorSingle.tsx";
 export { default as Calendar } from "./components/Calendar.tsx";
 export { default as DataTable } from "./components/datatable/DataTable.tsx";
+export { default as CollapsibleSection } from "./components/layout/CollapsibleSection.tsx";
+
+
+
 export {
   default as DataTableServer,
   resetAllDataTablePaging,
@@ -61,6 +65,7 @@ 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 * from "./components/ui/sonner.tsx";
 export { Button as ButtonCN, buttonVariants } from "./components/ui/button.tsx";
 
 

package/lib/types.ts

@@ -66,6 +66,7 @@ export interface IEventMessage {
   message?: string;
   timeout?: number;
   classes?: string;
+  type?: "success" | "info" | "warning" | "error";
 }
 
 export type Events = {

package/lib/utils/handleErrors.ts

@@ -22,7 +22,8 @@ const handleErrors = (error: AxiosError, emitter: Emitter<Events>, customMessage
         title: errorTitle,
         message: errmsgToDisplay,
         classes: "bg-danger ",
-        timeout: 0
+        timeout: 0,
+        type: "error"
     });
 }
 export { handleErrors }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@addsign/moje-agenda-shared-lib",
   "private": false,
-  "version": "2.0.11",
+  "version": "2.0.13",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -73,6 +73,7 @@
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-toast": "^1.2.2",
     "@radix-ui/react-tooltip": "^1.1.4",
     "@types/date-fns": "^2.6.3",
     "axios": "^1.7.2",
@@ -85,6 +86,7 @@
     "jspdf-autotable": "^3.8.3",
     "lucide-react": "^0.456.0",
     "mitt": "^3.0.1",
+    "next-themes": "^0.4.4",
     "react-datepicker": "^7.5.0",
     "react-day-picker": "^8.10.1",
     "react-dropzone": "^14.2.3",
@@ -92,6 +94,7 @@
     "react-icons": "^5.2.1",
     "react-tailwindcss-datepicker": "^1.6.6",
     "react-use": "^17.5.0",
+    "sonner": "^1.7.1",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
     "xlsx": "^0.18.5",