@snapdragonsnursery/react-components 1.4.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snapdragonsnursery/react-components",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "",
   "main": "src/index.js",
   "scripts": {
@@ -64,6 +64,8 @@
     "src/index.css"
   ],
   "devDependencies": {
+    "@babel/plugin-syntax-import-meta": "^7.10.4",
+    "@babel/plugin-transform-runtime": "^7.28.0",
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@testing-library/jest-dom": "^6.6.4",

package/src/EmployeeSearchPage.test.jsx

@@ -31,22 +31,19 @@ jest.mock('./lib/utils', () => ({
 // Mock fetch
 global.fetch = jest.fn();
 
-// Mock process.env and import.meta.env
+// Mock process.env
 process.env.VITE_COMMON_API_FUNCTION_KEY = 'test-key';
 process.env.VITE_COMMON_API_BASE_URL = 'https://test-api.example.com';
 
 // Mock import.meta.env for Vite environment variables
-Object.defineProperty(globalThis, 'import', {
-  value: {
-    meta: {
-      env: {
-        VITE_COMMON_API_FUNCTION_KEY: 'test-key',
-        VITE_COMMON_API_BASE_URL: 'https://test-api.example.com',
-      },
+global.import = {
+  meta: {
+    env: {
+      VITE_COMMON_API_FUNCTION_KEY: 'test-key',
+      VITE_COMMON_API_BASE_URL: 'https://test-api.example.com',
     },
   },
-  writable: true,
-});
+};
 
 // Mock the UI components
 jest.mock('./components/ui/input', () => ({

package/src/__mocks__/EmployeeSearchPage.jsx

@@ -0,0 +1,87 @@
+// Mock EmployeeSearchPage component for testing
+// This avoids the import.meta.env issue by providing a comprehensive mock
+
+import React from 'react';
+
+const EmployeeSearchPage = (props) => {
+  const {
+    title = "Employee Search",
+    searchPlaceholder = "Search by name, employee ID, or email...",
+    onSelect,
+    multiSelect = false,
+    selectedEmployees = [],
+    sites = [],
+    roles = [],
+    managers = [],
+    activeOnly = true,
+    status = null,
+    startDateFrom = null,
+    startDateTo = null,
+    endDateFrom = null,
+    endDateTo = null,
+    sortBy = "full_name",
+    sortOrder = "asc",
+    applicationContext = "employee-search",
+    bypassPermissions = false,
+    maxSelections = null,
+    showRoleFilter = true,
+    showManagerFilter = true,
+    showTermTimeFilter = true,
+    showMaternityFilter = true,
+    showStartDateFilter = true,
+    showEndDateFilter = false,
+    showWorkingHoursFilter = true,
+    loadAllResults = false,
+  } = props;
+
+  return (
+    <div data-testid="employee-search-page">
+      <h1>{title}</h1>
+      
+      {/* Search Input */}
+      <input
+        type="text"
+        placeholder={searchPlaceholder}
+        data-testid="search-input"
+        aria-label="Search employees"
+      />
+      
+      {/* Employee Search Filters */}
+      <div data-testid="employee-search-filters">
+        <button>Change Status</button>
+        <button>Apply Filters</button>
+        <button>Clear Filters</button>
+      </div>
+      
+      {/* Loading State */}
+      <div role="status" aria-live="polite">
+        Loading employees...
+      </div>
+      
+      {/* Mock Table */}
+      <table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Email</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>John Doe</td>
+            <td>john@example.com</td>
+            <td>Active</td>
+          </tr>
+        </tbody>
+      </table>
+      
+      {/* Props Display for debugging */}
+      <div style={{ display: 'none' }}>
+        Props: {JSON.stringify(props)}
+      </div>
+    </div>
+  );
+};
+
+export default EmployeeSearchPage; 

package/src/__mocks__/importMetaEnv.js

@@ -0,0 +1,5 @@
+// Mock for import.meta.env to handle Vite environment variables in Jest tests
+export default {
+  VITE_COMMON_API_FUNCTION_KEY: 'test-key',
+  VITE_COMMON_API_BASE_URL: 'https://test-api.example.com',
+}; 

package/src/components/EmployeeSearchFilters.jsx

@@ -33,6 +33,7 @@ const EmployeeSearchFilters = ({
   showStartDateFilter = true,
   showEndDateFilter = true,
   showWorkingHoursFilter = true,
+  showDbsFilter = true,
 }) => {
   // Local state for filters that haven't been applied yet
   const [localFilters, setLocalFilters] = React.useState(filters);
@@ -310,6 +311,22 @@ const EmployeeSearchFilters = ({
                 </div>
               )}
 
+              {/* DBS Number Filter */}
+              {showDbsFilter && (
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    DBS Number
+                  </label>
+                  <Input
+                    type="text"
+                    value={localFilters.dbsNumber}
+                    onChange={(e) => handleFilterChange("dbsNumber", e.target.value)}
+                    placeholder="Enter DBS number"
+                    className="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white"
+                  />
+                </div>
+              )}
+
               {/* Working Hours Filter */}
               {showWorkingHoursFilter && (
                 <div>
@@ -330,6 +347,42 @@ const EmployeeSearchFilters = ({
 
             </div>
 
+            {/* Sorting Options */}
+            <div className="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
+              <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Sorting Options</h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Sort By
+                  </label>
+                  <Select
+                    value={localFilters.sortBy}
+                    onChange={(e) => handleFilterChange("sortBy", e.target.value)}
+                    className="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white"
+                  >
+                    <SelectOption value="surname">Surname</SelectOption>
+                    <SelectOption value="first_name">First Name</SelectOption>
+                    <SelectOption value="full_name">Full Name</SelectOption>
+                    <SelectOption value="date_of_birth">Date of Birth</SelectOption>
+                    <SelectOption value="site_name">Site Name</SelectOption>
+                  </Select>
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Sort Order
+                  </label>
+                  <Select
+                    value={localFilters.sortOrder}
+                    onChange={(e) => handleFilterChange("sortOrder", e.target.value)}
+                    className="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white"
+                  >
+                    <SelectOption value="asc">Ascending</SelectOption>
+                    <SelectOption value="desc">Descending</SelectOption>
+                  </Select>
+                </div>
+              </div>
+            </div>
+
             {/* Apply/Cancel Buttons */}
             {hasUnsavedChanges && (
               <div className="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">

package/src/components/EmployeeSearchFilters.test.jsx

@@ -233,7 +233,7 @@ describe('EmployeeSearchFilters', () => {
     it('updates DBS number filter when changed', () => {
       render(<EmployeeSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
       
-      const dbsInput = screen.getAllByTestId('input')[0];
+      const dbsInput = screen.getByPlaceholderText('Enter DBS number');
       fireEvent.change(dbsInput, { target: { value: 'DBS123456' } });
       
       expect(defaultProps.onFiltersChange).toHaveBeenCalledWith({
@@ -245,7 +245,7 @@ describe('EmployeeSearchFilters', () => {
     it('updates working hours filter when changed', () => {
       render(<EmployeeSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
       
-      const hoursInput = screen.getAllByTestId('input')[1];
+      const hoursInput = screen.getByPlaceholderText('0');
       fireEvent.change(hoursInput, { target: { value: '30' } });
       
       expect(defaultProps.onFiltersChange).toHaveBeenCalledWith({
@@ -459,7 +459,7 @@ describe('EmployeeSearchFilters', () => {
       render(<EmployeeSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
       
       const sortBySelect = screen.getAllByTestId('select').find(select => 
-        select.querySelector('option[value="first_name"]')
+        select.querySelector('option[value="surname"]')
       );
       fireEvent.change(sortBySelect, { target: { value: 'first_name' } });
       
@@ -471,7 +471,7 @@ describe('EmployeeSearchFilters', () => {
       render(<EmployeeSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
       
       const sortOrderSelect = screen.getAllByTestId('select').find(select => 
-        select.querySelector('option[value="desc"]')
+        select.querySelector('option[value="asc"]')
       );
       fireEvent.change(sortOrderSelect, { target: { value: 'desc' } });
       
@@ -541,6 +541,7 @@ describe('EmployeeSearchFilters', () => {
       const statusLabels = screen.getAllByText('Status');
       expect(statusLabels.length).toBeGreaterThan(0);
       expect(screen.getByText('Sort By')).toBeInTheDocument();
+      expect(screen.getByText('Sort Order')).toBeInTheDocument();
     });
   });
 }); 

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

@@ -3,7 +3,7 @@
 // Features cycling behavior: start date -> end date -> start date -> end date...
 // Usage: <DateRangePicker selectedRange={range} onSelect={setRange} />
 
-import { useState, useEffect, useRef } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import { format } from 'date-fns'
 import { CalendarIcon } from '@heroicons/react/24/outline'
 import { Popover, PopoverContent, PopoverTrigger } from './popover'