@snapdragonsnursery/react-components 1.5.0 → 1.6.0

package/README.md

@@ -6,13 +6,14 @@ A collection of reusable React components for Snapdragons Nursery applications.
 
 - **ChildSearchModal**: Advanced child search and selection component with filtering, pagination, and multi-select capabilities
 - **ChildSearchFilters**: Advanced filtering component with date range picker, status, site, and age filters (includes Apply button for better UX)
-- **DateRangePicker**: Shadcn-style date range picker component
+- **DateRangePicker**: Shadcn-style date range picker component (supports optional presets)
 - **DatePicker**: Shadcn-style single date picker component
 - **Calendar**: Official shadcn calendar component
 - **Popover**: Official shadcn popover component
 - **AuthButtons**: Authentication buttons for MSAL integration
 - **ThemeToggle**: Dark/light theme toggle component
 - **LandingPage**: Landing page component with authentication
+- **SoftWarningAlert**: Soft-styled alert for non-blocking warnings with optional action
 
 ## Installation
 
@@ -39,6 +40,25 @@ function MyComponent() {
 }
 ```
 
+### SoftWarningAlert Example
+
+```jsx
+import { SoftWarningAlert } from '@snapdragonsnursery/react-components';
+import { AlertTriangle } from 'lucide-react';
+
+function Notice() {
+  return (
+    <SoftWarningAlert
+      icon={AlertTriangle}
+      title="Unsubmitted claims"
+      description="You have 3 unsubmitted mileage claims. Create a report to submit."
+      actionLabel="Create report"
+      onAction={() => console.log('clicked')}
+    />
+  );
+}
+```
+
 ## Shadcn Components
 
 This package includes official shadcn components with proper styling. The components use shadcn CSS variables, so make sure your consuming project has the shadcn CSS variables defined in your CSS file.
@@ -118,11 +138,28 @@ function MyComponent() {
   };
 
   return (
-    <DateRangePicker
-      selectedRange={selectedRange}
-      onSelect={handleDateRangeChange}
-      placeholder="Select a date range"
-    />
+    <>
+      <DateRangePicker
+        selectedRange={selectedRange}
+        onSelect={handleDateRangeChange}
+        placeholder="Select a date range"
+        numberOfMonths={2}
+      />
+      {/* With presets */}
+      <DateRangePicker
+        selectedRange={selectedRange}
+        onSelect={handleDateRangeChange}
+        presetsEnabled
+        presets={[
+          { key: 'thisWeek', label: 'This week', getRange: () => ({ from: startOfWeek(new Date(), { weekStartsOn: 1 }), to: new Date() }) },
+          { key: 'lastWeek', label: 'Last week', getRange: () => { const ref = subWeeks(new Date(), 1); return { from: startOfWeek(ref, { weekStartsOn: 1 }), to: endOfWeek(ref, { weekStartsOn: 1 }) } } },
+          { key: 'thisMonth', label: 'This month', getRange: () => ({ from: startOfMonth(new Date()), to: new Date() }) },
+          { key: 'lastMonth', label: 'Last month', getRange: () => { const ref = subMonths(new Date(), 1); return { from: startOfMonth(ref), to: endOfMonth(ref) } } },
+          { key: 'thisYear', label: 'This year', getRange: () => ({ from: startOfYear(new Date()), to: new Date() }) },
+          { key: 'lastYear', label: 'Last year', getRange: () => { const ref = subYears(new Date(), 1); return { from: startOfYear(ref), to: endOfYear(ref) } } },
+        ]}
+      />
+    </>
   );
 }
 ```
@@ -162,6 +199,7 @@ VITE_COMMON_API_BASE_URL=https://snaps-common-api.azurewebsites.net
 - [ChildSearchModal Documentation](./CHILD_SEARCH_MODAL_DOCUMENTATION.md)
 - [ChildSearchModal README](./CHILD_SEARCH_README.md)
 - [Release Guide](./RELEASE.md)
+- [SoftWarningAlert](./SOFT_WARNING_ALERT.md)
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snapdragonsnursery/react-components",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "",
   "main": "src/index.js",
   "scripts": {
@@ -59,6 +59,7 @@
     "react": "^18.0.0 || ^19.0.0"
   },
   "module": "src/index.js",
+  "types": "src/index.d.ts",
   "files": [
     "src",
     "src/index.css"

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

@@ -4,19 +4,28 @@
 // Usage: <DateRangePicker selectedRange={range} onSelect={setRange} />
 
 import React, { useState, useEffect, useRef } from 'react'
-import { format } from 'date-fns'
+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, 
   className,
   placeholder = "Select a date range",
   disabled,
+  // New: optional presets support (backwards compatible)
+  presetsEnabled = false,
+  presets,
+  // New: allow consumers to control month count
+  numberOfMonths = 2,
+  // New: allow styling popover content and calendar for layout control
+  contentClassName,
+  calendarClassName,
   ...props 
 }) {
   const [isOpen, setIsOpen] = useState(false)
@@ -185,8 +194,8 @@ export function DateRangePicker({
           )}
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-auto p-0" align="start">
-        <div className="relative">
+      <PopoverContent className={cn('w-[90vw] p-3 sm:w-auto', contentClassName)} align="start">
+        <div className="relative w-full sm:w-[520px]">
           <Calendar
             mode="range"
             defaultMonth={internalRange?.from}
@@ -197,8 +206,47 @@ export function DateRangePicker({
                 handleSelect(range)
               }
             }}
-            numberOfMonths={2}
+            numberOfMonths={numberOfMonths}
+            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>
+                )
+              })}
+            </div>
+          )}
+          {/* Always-present footer actions for clarity on mobile/desktop */}
+          <div className="mt-3 flex items-center justify-between px-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => {
+                setInternalRange(null)
+                isSelectingRange.current = false
+                onSelect(null)
+              }}
+            >
+              Clear
+            </Button>
+            <Button size="sm" onClick={() => setIsOpen(false)}>
+              Done
+            </Button>
+          </div>
           {internalRange?.from && (
             <div className="absolute top-2 right-2 flex gap-1">
               <button
@@ -227,6 +275,23 @@ export function DateRangePicker({
   )
 }
 
+// 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)) }
+  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 },
+  ]
+}
+
 // Single date picker variant
 export function DatePicker({ 
   selectedDate, 

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

@@ -38,7 +38,7 @@ describe('DateRangePicker', () => {
     fireEvent.click(button)
     
     await waitFor(() => {
-      expect(screen.getAllByRole('grid')).toHaveLength(2) // Two months for range picker
+      expect(screen.getAllByRole('grid')).toHaveLength(2) // Two months default
     })
   })
 
@@ -64,6 +64,24 @@ describe('DateRangePicker', () => {
   })
 })
 
+describe('DateRangePicker presets', () => {
+  it('renders presets when enabled and selects a range on click', async () => {
+    const onSelect = jest.fn()
+    render(<DateRangePicker selectedRange={null} onSelect={onSelect} presetsEnabled numberOfMonths={1} />)
+    // Open popover
+    fireEvent.click(screen.getByRole('button'))
+    // Default preset button e.g. Last 7 days should appear
+    await waitFor(() => {
+      expect(screen.getByText(/last 7 days/i)).toBeInTheDocument()
+    })
+    fireEvent.click(screen.getByText(/last 7 days/i))
+    expect(onSelect).toHaveBeenCalled()
+    const arg = onSelect.mock.calls[0][0]
+    expect(arg?.from).toBeInstanceOf(Date)
+    expect(arg?.to).toBeInstanceOf(Date)
+  })
+})
+
 describe('DatePicker', () => {
   it('renders with placeholder text', () => {
     const mockOnSelect = jest.fn()

package/src/components/ui/soft-warning-alert.jsx

@@ -0,0 +1,112 @@
+//
+// soft-warning-alert.jsx
+// -----------------------
+// A soft-styled warning alert built on shadcn-like primitives used in this package.
+// Use this for non-blocking warnings with an optional action button.
+//
+// Example:
+// import { SoftWarningAlert } from '@snapdragonsnursery/react-components'
+// import { AlertTriangle } from 'lucide-react'
+//
+// export default function Example() {
+//   return (
+//     <SoftWarningAlert
+//       icon={AlertTriangle}
+//       title="Unsubmitted claims"
+//       description="You have 3 unsubmitted mileage claims. Create a report to submit."
+//       actionLabel="Create report"
+//       onAction={() => console.log('clicked')}
+//     />
+//   )
+// }
+
+import React from 'react'
+import { cn } from '../../lib/utils'
+
+// Lightweight Alert primitives compatible with package styling
+function Alert({ className, children }) {
+  return (
+    <div
+      className={cn(
+        'w-full rounded-lg border p-4 text-sm',
+        'bg-amber-600/10 text-amber-700 border-amber-200',
+        'dark:bg-amber-400/10 dark:text-amber-300 dark:border-amber-300/20',
+        className
+      )}
+      role="alert"
+    >
+      {children}
+    </div>
+  )
+}
+
+// Prop types omitted to avoid runtime dependency
+
+function AlertTitle({ className, children }) {
+  return <div className={cn('font-medium', className)}>{children}</div>
+}
+
+// Prop types omitted to avoid runtime dependency
+
+function AlertDescription({ className, children }) {
+  return (
+    <div className={cn('mt-1 text-amber-700/80 dark:text-amber-300/80', className)}>
+      {children}
+    </div>
+  )
+}
+
+// Prop types omitted to avoid runtime dependency
+
+function Button({ className, children, ...props }) {
+  return (
+    <button
+      type="button"
+      className={cn(
+        'inline-flex items-center rounded-md px-3 py-1.5 text-xs font-medium',
+        'bg-amber-600 text-white hover:bg-amber-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-500',
+        'dark:bg-amber-500 dark:text-black dark:hover:bg-amber-400',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}
+
+// Prop types omitted to avoid runtime dependency
+
+export function SoftWarningAlert({
+  title,
+  description,
+  icon: Icon,
+  className,
+  actionLabel,
+  onAction,
+}) {
+  return (
+    <Alert className={className}>
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex items-start gap-3">
+          {Icon ? <Icon className="h-5 w-5 mt-0.5 shrink-0" /> : null}
+          <div>
+            <AlertTitle>{title}</AlertTitle>
+            {description ? (
+              <AlertDescription>{description}</AlertDescription>
+            ) : null}
+          </div>
+        </div>
+        {typeof onAction === 'function' && actionLabel ? (
+          <Button onClick={onAction}>{actionLabel}</Button>
+        ) : null}
+      </div>
+    </Alert>
+  )
+}
+
+// Prop types omitted to avoid runtime dependency
+
+export default SoftWarningAlert
+
+

package/src/index.d.ts

@@ -0,0 +1,48 @@
+//
+// index.d.ts
+// -------------
+// TypeScript declarations for @snapdragonsnursery/react-components
+// This provides minimal typings for components used in consuming TypeScript apps.
+
+import * as React from 'react'
+
+export interface SoftWarningAlertProps {
+  title: React.ReactNode
+  description?: React.ReactNode
+  icon?: React.ComponentType<any>
+  className?: string
+  actionLabel?: string
+  onAction?: () => void
+}
+
+export const SoftWarningAlert: React.FC<SoftWarningAlertProps>
+
+// Existing components (typed as any for now)
+export const AuthButtons: React.ComponentType<any>
+export const ThemeToggle: React.ComponentType<any>
+export const ChildSearchModal: React.ComponentType<any>
+export const ChildSearchPage: React.ComponentType<any>
+export const ChildSearchPageDemo: React.ComponentType<any>
+export const ThemeToggleTest: React.ComponentType<any>
+export const LandingPage: React.ComponentType<any>
+export const ChildSearchFilters: React.ComponentType<any>
+export const DateRangePickerDemo: React.ComponentType<any>
+export const CalendarDemo: React.ComponentType<any>
+export const DateRangePickerTest: React.ComponentType<any>
+export const ApplyButtonDemo: React.ComponentType<any>
+export const EmployeeSearchPage: React.ComponentType<any>
+export const EmployeeSearchModal: React.ComponentType<any>
+export const EmployeeSearchDemo: React.ComponentType<any>
+export const EmployeeSearchFilters: React.ComponentType<any>
+
+export const DateRangePicker: React.ComponentType<any>
+export const DatePicker: React.ComponentType<any>
+export const Calendar: React.ComponentType<any>
+export const SimpleCalendar: React.ComponentType<any>
+export const Popover: React.ComponentType<any>
+export const PopoverContent: React.ComponentType<any>
+export const PopoverTrigger: React.ComponentType<any>
+
+export function configureTelemetry(...args: any[]): any
+
+

package/src/index.js

@@ -24,3 +24,4 @@ export { DateRangePicker, DatePicker } from "./components/ui/date-range-picker";
 export { Calendar } from "./components/ui/calendar";
 export { SimpleCalendar } from "./components/ui/simple-calendar";
 export { Popover, PopoverContent, PopoverTrigger } from "./components/ui/popover";
+export { default as SoftWarningAlert } from "./components/ui/soft-warning-alert";