@snapdragonsnursery/react-components 1.1.38 → 1.3.0

package/README.md

@@ -5,6 +5,11 @@ A collection of reusable React components for Snapdragons Nursery applications.
 ## Components
 
 - **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
+- **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
@@ -34,6 +39,116 @@ function MyComponent() {
 }
 ```
 
+## 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.
+
+### For Consuming Projects
+
+1. **Ensure your project has shadcn CSS variables** in your main CSS file (like `src/index.css`):
+
+```css
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --accent: 210 40% 96%;
+    --accent-foreground: 222.2 84% 4.9%;
+    --muted: 210 40% 96%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.5rem;
+  }
+}
+```
+
+2. **Update your Tailwind config** to include the react-components package:
+
+```js
+// tailwind.config.js
+module.exports = {
+  content: [
+    './src/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@snapdragonsnursery/react-components/src/**/*.{js,jsx}'
+  ],
+  // ... rest of your config
+}
+```
+
+3. **Install tailwindcss-animate** for proper animations:
+
+```bash
+npm install tailwindcss-animate
+```
+
+### Date Range Picker Example
+
+```jsx
+import { DateRangePicker } from '@snapdragonsnursery/react-components';
+
+function MyComponent() {
+  const [selectedRange, setSelectedRange] = useState(null);
+
+  const handleDateRangeChange = (range) => {
+    // Only update your filters when both dates are selected
+    if (range?.from && range?.to) {
+      // Both dates selected - update your filters
+      setFilters(prev => ({
+        ...prev,
+        dobFrom: range.from.toISOString().split('T')[0],
+        dobTo: range.to.toISOString().split('T')[0],
+      }));
+    } else if (!range?.from && !range?.to) {
+      // Range cleared - clear your filters
+      setFilters(prev => ({
+        ...prev,
+        dobFrom: '',
+        dobTo: '',
+      }));
+    }
+    // Don't update filters when only first date is selected
+    
+    setSelectedRange(range);
+  };
+
+  return (
+    <DateRangePicker
+      selectedRange={selectedRange}
+      onSelect={handleDateRangeChange}
+      placeholder="Select a date range"
+    />
+  );
+}
+```
+
+**Important**: The DateRangePicker now maintains its own internal state and only calls `onSelect` when both dates are selected or when the range is cleared. This prevents premature re-renders and keeps the calendar open until the user completes their selection. The ChildSearchFilters component includes an "Apply Filters" button that only triggers searches when clicked, providing better user control.
+
+### Apply Button Functionality
+
+The `ChildSearchFilters` component now includes an "Apply Filters" button that provides better user control:
+
+- **Local State**: Filter changes are stored locally until applied
+- **Visual Feedback**: Shows "You have unsaved filter changes" when filters are modified
+- **Apply Button**: Only triggers search when clicked
+- **Cancel Button**: Reverts changes without applying
+- **Better UX**: Users can configure multiple filters before searching
+
+```jsx
+<ChildSearchFilters
+  filters={filters}
+  onFiltersChange={setFilters}
+  onApplyFilters={setFilters} // New callback for applying filters
+  sites={sites}
+  // ... other props
+/>
+```
+
 ## Environment Variables
 
 Set these environment variables in your application:

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@snapdragonsnursery/react-components",
-  "version": "1.1.38",
+  "version": "1.3.0",
   "description": "",
   "main": "src/index.js",
   "scripts": {
-    "test": "echo \"No tests specified - skipping\"",
+    "test": "jest",
     "version:patch": "npm version patch",
     "version:minor": "npm version minor",
     "version:major": "npm version major",
@@ -40,13 +40,19 @@
     "@headlessui/react": "^2.2.4",
     "@heroicons/react": "^2.2.0",
     "@popperjs/core": "^2.11.8",
+    "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-slot": "^1.2.3",
     "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
     "lucide-react": "^0.526.0",
-    "react": "^18.3.1",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-day-picker": "^9.8.1",
     "react-dom": "^18.3.1",
-    "tailwind-merge": "^3.3.1"
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^4.1.11",
+    "tailwindcss-animate": "^1.0.7"
   },
   "peerDependencies": {
     "@azure/msal-react": ">=1.0.0",
@@ -54,6 +60,17 @@
   },
   "module": "src/index.js",
   "files": [
-    "src"
-  ]
+    "src",
+    "src/index.css"
+  ],
+  "devDependencies": {
+    "@babel/preset-env": "^7.28.0",
+    "@babel/preset-react": "^7.27.1",
+    "@testing-library/jest-dom": "^6.6.4",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "babel-jest": "^30.0.5",
+    "jest": "^30.0.5",
+    "jest-environment-jsdom": "^30.0.5"
+  }
 }

package/src/ApplyButtonDemo.jsx

@@ -0,0 +1,94 @@
+// Demo component to showcase the Apply button functionality
+// This demonstrates how the ChildSearchFilters component now works with local state and Apply button
+
+import React, { useState } from 'react'
+import ChildSearchFilters from './components/ChildSearchFilters'
+
+export default function ApplyButtonDemo() {
+  const [filters, setFilters] = useState({
+    status: "active",
+    selectedSiteId: "",
+    dobFrom: "",
+    dobTo: "",
+    ageFrom: "",
+    ageTo: "",
+    sortBy: "last_name",
+    sortOrder: "asc",
+  })
+
+  const [searchTriggered, setSearchTriggered] = useState(false)
+
+  const mockSites = [
+    { site_id: 1, site_name: "Site A" },
+    { site_id: 2, site_name: "Site B" },
+  ]
+
+  const handleApplyFilters = (newFilters) => {
+    setFilters(newFilters)
+    setSearchTriggered(true)
+    // In a real app, this would trigger the search
+    console.log('Search triggered with filters:', newFilters)
+  }
+
+  const handleClearFilters = () => {
+    const clearedFilters = {
+      status: "active",
+      selectedSiteId: "",
+      dobFrom: "",
+      dobTo: "",
+      ageFrom: "",
+      ageTo: "",
+      sortBy: "last_name",
+      sortOrder: "asc",
+    }
+    setFilters(clearedFilters)
+    setSearchTriggered(false)
+  }
+
+  return (
+    <div className="p-6 space-y-6 max-w-4xl mx-auto">
+      <h2 className="text-2xl font-bold">Apply Button Demo</h2>
+      
+      <div className="space-y-4">
+        <div className="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg">
+          <h3 className="text-lg font-semibold mb-2">How it works:</h3>
+          <ul className="text-sm space-y-1">
+            <li>• Change any filter value - notice no search is triggered</li>
+            <li>• The "Apply Filters" button appears when you have unsaved changes</li>
+            <li>• Click "Apply Filters" to trigger the search</li>
+            <li>• Click "Cancel" to revert changes without applying</li>
+          </ul>
+        </div>
+
+        <ChildSearchFilters
+          filters={filters}
+          onFiltersChange={setFilters}
+          onApplyFilters={handleApplyFilters}
+          sites={mockSites}
+          activeOnly={true}
+          isAdvancedFiltersOpen={true}
+          onToggleAdvancedFilters={() => {}}
+          onClearFilters={handleClearFilters}
+        />
+
+        {searchTriggered && (
+          <div className="bg-green-50 dark:bg-green-900/20 p-4 rounded-lg">
+            <h3 className="text-lg font-semibold text-green-800 dark:text-green-200">
+              ✅ Search Triggered!
+            </h3>
+            <p className="text-sm text-green-700 dark:text-green-300">
+              The search was triggered when you clicked "Apply Filters"
+            </p>
+          </div>
+        )}
+
+        <div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg">
+          <h3 className="text-lg font-semibold mb-2">Current Filters:</h3>
+          <pre className="text-sm overflow-auto">
+            {JSON.stringify(filters, null, 2)}
+          </pre>
+        </div>
+      </div>
+    </div>
+  )
+} 

package/src/CalendarDemo.jsx

@@ -0,0 +1,39 @@
+// Demo component to test calendar styling
+// This can be used to verify that the shadcn calendar is working properly
+
+import React, { useState } from 'react'
+import { Calendar } from './components/ui/calendar'
+
+export default function CalendarDemo() {
+  const [date, setDate] = useState(null)
+
+  return (
+    <div className="p-6 space-y-4">
+      <h2 className="text-2xl font-bold">Calendar Demo</h2>
+      
+      <div className="space-y-2">
+        <h3 className="text-lg font-semibold">Single Date Picker</h3>
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          className="rounded-md border"
+        />
+        {date && (
+          <p className="text-sm text-gray-600">
+            Selected: {date.toLocaleDateString()}
+          </p>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        <h3 className="text-lg font-semibold">Date Range Picker</h3>
+        <Calendar
+          mode="range"
+          numberOfMonths={2}
+          className="rounded-md border"
+        />
+      </div>
+    </div>
+  )
+}