@snapdragonsnursery/react-components 1.18.4 → 1.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snapdragonsnursery/react-components",
-  "version": "1.18.4",
+  "version": "1.19.0",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/components/ui/date-range-picker.jsx

@@ -3,18 +3,29 @@
 // Features cycling behavior: start date -> end date -> start date -> end date...
 // Usage: <DateRangePicker selectedRange={range} onSelect={setRange} />
 
-import React, { useState, useEffect, useRef } from 'react'
-import { format, addDays, addMonths, endOfMonth, endOfYear, startOfMonth, startOfYear, subDays, subMonths, subYears } from 'date-fns'
-import { CalendarIcon } from '@heroicons/react/24/outline'
-import { Popover, PopoverContent, PopoverTrigger } from './popover'
-import { Calendar } from './calendar'
-import { Button } from './button'
-import { cn } from '../../lib/utils'
+import React, { useState, useEffect, useRef } from "react";
+import {
+  format,
+  addDays,
+  addMonths,
+  endOfMonth,
+  endOfYear,
+  startOfMonth,
+  startOfYear,
+  subDays,
+  subMonths,
+  subYears,
+} from "date-fns";
+import { CalendarIcon } from "@heroicons/react/24/outline";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { Calendar } from "./calendar";
+import { Button } from "./button";
+import { cn } from "../../lib/utils";
 
 // Optional preset type: { key: string, label: string, getRange: () => ({ from: Date, to: Date }) }
-export function DateRangePicker({ 
-  selectedRange, 
-  onSelect, 
+export function DateRangePicker({
+  selectedRange,
+  onSelect,
   className,
   placeholder = "Select a date range",
   disabled,
@@ -26,87 +37,87 @@ export function DateRangePicker({
   // New: allow styling popover content and calendar for layout control
   contentClassName,
   calendarClassName,
-  ...props 
+  ...props
 }) {
-  const [isOpen, setIsOpen] = useState(false)
-  const [internalRange, setInternalRange] = useState(selectedRange)
-  const isSelectingRange = useRef(false)
+  const [isOpen, setIsOpen] = useState(false);
+  const [internalRange, setInternalRange] = useState(selectedRange);
+  const isSelectingRange = useRef(false);
 
   const normalizeDate = (date) =>
     date
       ? new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))
-      : null
+      : null;
 
   const datesEqual = (a, b) =>
-    a instanceof Date && b instanceof Date && a.getTime() === b.getTime()
+    a instanceof Date && b instanceof Date && a.getTime() === b.getTime();
 
   const handleOpenChange = (open) => {
     // If we're in the middle of selecting a range and trying to close, prevent it
     if (!open && isSelectingRange.current) {
       // Instead of returning, let's try to keep it open
       setTimeout(() => {
-        setIsOpen(true)
-      }, 0)
-      return
+        setIsOpen(true);
+      }, 0);
+      return;
     }
-    
+
     // When opening, set the selecting range flag based on whether we have a partial selection
     if (open) {
       if (internalRange?.from && !internalRange?.to) {
-        isSelectingRange.current = true
+        isSelectingRange.current = true;
       } else {
-        isSelectingRange.current = false
+        isSelectingRange.current = false;
       }
     }
-    
-    setIsOpen(open)
-  }
+
+    setIsOpen(open);
+  };
 
   // Update internal range when prop changes
   useEffect(() => {
-    setInternalRange(selectedRange)
-  }, [selectedRange])
+    setInternalRange(selectedRange);
+  }, [selectedRange]);
 
   const handleSelect = (range, selectedDay) => {
     if (!range || (!range.from && !range.to)) {
-      return
+      return;
     }
 
     const normalizedRange = {
       from: normalizeDate(range.from),
       to: normalizeDate(range.to),
-    }
-    const normalizedSelectedDay = normalizeDate(selectedDay)
+    };
+    const normalizedSelectedDay = normalizeDate(selectedDay);
 
     const hasCompleteCurrentRange = Boolean(
       internalRange?.from && internalRange?.to
-    )
+    );
 
-    let newRange = normalizedRange
+    let newRange = normalizedRange;
 
     if (normalizedRange.from && normalizedRange.to) {
       if (hasCompleteCurrentRange && !isSelectingRange.current) {
-        const sameStart = datesEqual(normalizedRange.from, internalRange.from)
+        const sameStart = datesEqual(normalizedRange.from, internalRange.from);
 
         if (sameStart) {
           // Adjusting end date on an existing range
           newRange = {
             from: internalRange.from,
             to: normalizedRange.to,
-          }
+          };
         } else {
           // Starting a new range selection cycle
           newRange = {
             from: normalizedSelectedDay ?? normalizedRange.from,
             to: null,
-          }
+          };
         }
       } else if (internalRange?.from && !internalRange?.to) {
         // Completing an in-progress range
         newRange = {
           from: internalRange.from,
           to: normalizedRange.to,
-        }
+        };
       }
     } else if (normalizedRange.from && !normalizedRange.to) {
       if (hasCompleteCurrentRange && !isSelectingRange.current) {
@@ -114,48 +125,48 @@ export function DateRangePicker({
         newRange = {
           from: normalizedSelectedDay ?? normalizedRange.from,
           to: null,
-        }
+        };
       } else {
         newRange = {
           from: normalizedRange.from,
           to: null,
-        }
+        };
       }
     } else {
-      newRange = null
+      newRange = null;
     }
 
-    setInternalRange(newRange)
+    setInternalRange(newRange);
 
     if (newRange?.from && !newRange?.to) {
-      isSelectingRange.current = true
+      isSelectingRange.current = true;
     } else {
-      isSelectingRange.current = false
+      isSelectingRange.current = false;
     }
 
     if (!newRange?.from || newRange?.to) {
-      onSelect(newRange)
+      onSelect(newRange);
     }
-  }
+  };
 
   return (
-    <Popover 
-      open={isOpen} 
-      onOpenChange={handleOpenChange} 
+    <Popover
+      open={isOpen}
+      onOpenChange={handleOpenChange}
       modal={false}
       onPointerDownOutside={(e) => {
         if (isSelectingRange.current) {
-          e.preventDefault()
+          e.preventDefault();
         }
       }}
       onEscapeKeyDown={(e) => {
         if (isSelectingRange.current) {
-          e.preventDefault()
+          e.preventDefault();
         }
       }}
       onInteractOutside={(e) => {
         if (isSelectingRange.current) {
-          e.preventDefault()
+          e.preventDefault();
         }
       }}
     >
@@ -163,8 +174,8 @@ export function DateRangePicker({
         <Button
           variant="outline"
           className={cn(
-            'w-full justify-start text-left font-normal',
-            !internalRange?.from && 'text-muted-foreground',
+            "w-full justify-start text-left font-normal",
+            !internalRange?.from && "text-muted-foreground",
             className
           )}
           disabled={disabled}
@@ -174,20 +185,21 @@ export function DateRangePicker({
           {internalRange?.from ? (
             internalRange.to ? (
               <>
-                {format(internalRange.from, 'LLL dd, y')} -{' '}
-                {format(internalRange.to, 'LLL dd, y')}
+                {format(internalRange.from, "LLL dd, y")} -{" "}
+                {format(internalRange.to, "LLL dd, y")}
               </>
             ) : (
-              <>
-                {format(internalRange.from, 'LLL dd, y')} - Select end date
-              </>
+              <>{format(internalRange.from, "LLL dd, y")} - Select end date</>
             )
           ) : (
             <span>{placeholder}</span>
           )}
         </Button>
       </PopoverTrigger>
-      <PopoverContent className={cn('w-[90vw] p-3 sm:w-auto', contentClassName)} align="start">
+      <PopoverContent
+        className={cn("w-[90vw] p-3 sm:w-auto", contentClassName)}
+        align="start"
+      >
         <div className="relative w-full sm:w-[520px]">
           <Calendar
             mode="range"
@@ -195,31 +207,33 @@ export function DateRangePicker({
             selected={internalRange}
             onSelect={(range, selectedDay) => {
               if (range && (range.from || range.to)) {
-                handleSelect(range, selectedDay)
+                handleSelect(range, selectedDay);
               }
             }}
             numberOfMonths={numberOfMonths}
-            className={cn('w-full', calendarClassName)}
+            className={cn("w-full", calendarClassName)}
           />
           {presetsEnabled && (
             <div className="mt-2 flex flex-wrap gap-2 p-2">
-              {(presets && presets.length > 0 ? presets : defaultPresets()).map((p) => {
-                const r = p.getRange()
-                return (
-                  <Button
-                    key={p.key}
-                    variant="outline"
-                    size="sm"
-                    onClick={() => {
-                      setInternalRange(r)
-                      isSelectingRange.current = false
-                      onSelect(r)
-                    }}
-                  >
-                    {p.label}
-                  </Button>
-                )
-              })}
+              {(presets && presets.length > 0 ? presets : defaultPresets()).map(
+                (p) => {
+                  const r = p.getRange();
+                  return (
+                    <Button
+                      key={p.key}
+                      variant="outline"
+                      size="sm"
+                      onClick={() => {
+                        setInternalRange(r);
+                        isSelectingRange.current = false;
+                        onSelect(r);
+                      }}
+                    >
+                      {p.label}
+                    </Button>
+                  );
+                }
+              )}
             </div>
           )}
           {/* Always-present footer actions for clarity on mobile/desktop */}
@@ -228,9 +242,9 @@ export function DateRangePicker({
               variant="ghost"
               size="sm"
               onClick={() => {
-                setInternalRange(null)
-                isSelectingRange.current = false
-                onSelect(null)
+                setInternalRange(null);
+                isSelectingRange.current = false;
+                onSelect(null);
               }}
             >
               Clear
@@ -243,42 +257,48 @@ export function DateRangePicker({
         </div>
       </PopoverContent>
     </Popover>
-  )
+  );
 }
 
 // Provide a default preset set similar to app usage, but minimal
 function defaultPresets() {
-  const today = new Date()
-  const last7Days = { from: subDays(today, 6), to: today }
-  const monthToDate = { from: startOfMonth(today), to: today }
-  const yearToDate = { from: startOfYear(today), to: today }
-  const lastMonth = { from: startOfMonth(subMonths(today, 1)), to: endOfMonth(subMonths(today, 1)) }
-  const lastYear = { from: startOfYear(subYears(today, 1)), to: endOfYear(subYears(today, 1)) }
+  const today = new Date();
+  const last7Days = { from: subDays(today, 6), to: today };
+  const monthToDate = { from: startOfMonth(today), to: today };
+  const yearToDate = { from: startOfYear(today), to: today };
+  const lastMonth = {
+    from: startOfMonth(subMonths(today, 1)),
+    to: endOfMonth(subMonths(today, 1)),
+  };
+  const lastYear = {
+    from: startOfYear(subYears(today, 1)),
+    to: endOfYear(subYears(today, 1)),
+  };
   return [
-    { key: 'last7', label: 'Last 7 days', getRange: () => last7Days },
-    { key: 'mtd', label: 'Month to date', getRange: () => monthToDate },
-    { key: 'lastMonth', label: 'Last month', getRange: () => lastMonth },
-    { key: 'ytd', label: 'Year to date', getRange: () => yearToDate },
-    { key: 'lastYear', label: 'Last year', getRange: () => lastYear },
-  ]
+    { key: "last7", label: "Last 7 days", getRange: () => last7Days },
+    { key: "mtd", label: "Month to date", getRange: () => monthToDate },
+    { key: "lastMonth", label: "Last month", getRange: () => lastMonth },
+    { key: "ytd", label: "Year to date", getRange: () => yearToDate },
+    { key: "lastYear", label: "Last year", getRange: () => lastYear },
+  ];
 }
 
 // Single date picker variant
-export function DatePicker({ 
-  selectedDate, 
-  onSelect, 
+export function DatePicker({
+  selectedDate,
+  onSelect,
   className,
   placeholder = "Select a date",
   disabled,
   disableFuture = false,
-  ...props 
+  ...props
 }) {
-  const [isOpen, setIsOpen] = useState(false)
+  const [isOpen, setIsOpen] = useState(false);
 
   const handleSelect = (date) => {
-    onSelect(date)
-    setIsOpen(false)
-  }
+    onSelect(date);
+    setIsOpen(false);
+  };
 
   return (
     <Popover open={isOpen} onOpenChange={setIsOpen} modal={false}>
@@ -286,8 +306,8 @@ export function DatePicker({
         <Button
           variant="outline"
           className={cn(
-            'w-full justify-start text-left font-normal',
-            !selectedDate && 'text-muted-foreground',
+            "w-full justify-start text-left font-normal",
+            !selectedDate && "text-muted-foreground",
             className
           )}
           disabled={disabled}
@@ -295,7 +315,7 @@ export function DatePicker({
         >
           <CalendarIcon className="mr-2 h-4 w-4" />
           {selectedDate ? (
-            format(selectedDate, 'PPP')
+            format(selectedDate, "PPP")
           ) : (
             <span>{placeholder}</span>
           )}
@@ -311,5 +331,5 @@ export function DatePicker({
         />
       </PopoverContent>
     </Popover>
-  )
+  );
 }