@jmruthers/pace-core 0.5.184 → 0.5.185

package/src/components/ProtectedRoute/ProtectedRoute.test.tsx

@@ -83,6 +83,7 @@ describe('ProtectedRoute Component', () => {
   const defaultAuthState = {
     isAuthenticated: true,
     authLoading: false,
+    isLoading: false, // Combined loading state used by component
   };
 
   const defaultSessionState = {
@@ -142,7 +143,7 @@ describe('ProtectedRoute Component', () => {
       expect(screen.queryByTestId('navigate')).not.toBeInTheDocument();
     });
 
-    it('renders outlet when events exist but none selected (allows event selector visibility)', () => {
+    it('renders outlet when events exist but none selected (allows event selector visibility)', async () => {
       const consoleDebugSpy = vi.spyOn(console, 'debug').mockImplementation(() => {});
       
       mockUseEvents.mockReturnValue({
@@ -151,12 +152,25 @@ describe('ProtectedRoute Component', () => {
         isLoading: false,
       });
 
-      renderWithProviders(<ProtectedRoute />);
+      // Wait for logger to be configured
+      await import('../../utils/core/logger').then(({ Logger, LogLevel }) => {
+        Logger.configure({
+          level: LogLevel.DEBUG,
+          includeTimestamp: false,
+          includeComponent: true,
+        });
+      });
+
+      renderWithProviders(<ProtectedRoute requireEvent={true} />);
 
       expect(screen.getByTestId('outlet')).toBeInTheDocument();
-      expect(consoleDebugSpy).toHaveBeenCalledWith(
-        expect.stringContaining('[DEBUG] [ProtectedRoute] Events available but none selected - allowing render so selector is visible')
-      );
+      
+      // Wait a bit for the logger to be called (it's called during render)
+      await waitFor(() => {
+        expect(consoleDebugSpy).toHaveBeenCalledWith(
+          expect.stringContaining('[DEBUG] [ProtectedRoute] Events available but none selected - allowing render so selector is visible')
+        );
+      }, { timeout: 1000 });
     });
 
     it('renders session restoration loader when session is restoring', () => {
@@ -178,6 +192,7 @@ describe('ProtectedRoute Component', () => {
       mockUseUnifiedAuth.mockReturnValue({
         isAuthenticated: false,
         authLoading: true,
+        isLoading: true, // Component uses isLoading, not authLoading
       });
 
       renderWithProviders(<ProtectedRoute />);
@@ -193,6 +208,7 @@ describe('ProtectedRoute Component', () => {
       mockUseUnifiedAuth.mockReturnValue({
         isAuthenticated: false,
         authLoading: true,
+        isLoading: true, // Component uses isLoading, not authLoading
       });
 
       renderWithProviders(<ProtectedRoute loadingFallback={customLoader} />);
@@ -207,6 +223,7 @@ describe('ProtectedRoute Component', () => {
       mockUseUnifiedAuth.mockReturnValue({
         isAuthenticated: false,
         authLoading: false,
+        isLoading: false,
       });
 
       renderWithProviders(<ProtectedRoute />);
@@ -222,6 +239,7 @@ describe('ProtectedRoute Component', () => {
       mockUseUnifiedAuth.mockReturnValue({
         isAuthenticated: false,
         authLoading: false,
+        isLoading: false,
       });
 
       renderWithProviders(<ProtectedRoute loginPath="/custom-login" />);
@@ -234,6 +252,7 @@ describe('ProtectedRoute Component', () => {
       mockUseUnifiedAuth.mockReturnValue({
         isAuthenticated: false,
         authLoading: false,
+        isLoading: false,
       });
 
       renderWithProviders(<ProtectedRoute />);
@@ -248,6 +267,7 @@ describe('ProtectedRoute Component', () => {
       mockUseUnifiedAuth.mockReturnValue({
         isAuthenticated: false,
         authLoading: false,
+        isLoading: false,
       });
 
       mockUseSessionRestoration.mockReturnValue({
@@ -273,6 +293,7 @@ describe('ProtectedRoute Component', () => {
       mockUseUnifiedAuth.mockReturnValue({
         isAuthenticated: false,
         authLoading: false,
+        isLoading: false,
       });
 
       mockUseSessionRestoration.mockReturnValue({
@@ -328,6 +349,7 @@ describe('ProtectedRoute Component', () => {
       mockUseUnifiedAuth.mockReturnValue({
         isAuthenticated: false,
         authLoading: true,
+        isLoading: true,
       });
 
       mockUseSessionRestoration.mockReturnValue({
@@ -347,6 +369,7 @@ describe('ProtectedRoute Component', () => {
       mockUseUnifiedAuth.mockReturnValue({
         isAuthenticated: false,
         authLoading: true,
+        isLoading: true,
       });
 
       mockUseSessionRestoration.mockReturnValue({
@@ -508,6 +531,7 @@ describe('ProtectedRoute Component', () => {
       mockUseUnifiedAuth.mockReturnValue({
         isAuthenticated: true,
         authLoading: false,
+        isLoading: false,
       });
 
       mockUseSessionRestoration.mockReturnValue({
@@ -527,6 +551,7 @@ describe('ProtectedRoute Component', () => {
       mockUseUnifiedAuth.mockReturnValue({
         isAuthenticated: true,
         authLoading: false,
+        isLoading: false,
       });
 
       mockUseSessionRestoration.mockReturnValue({
@@ -546,6 +571,7 @@ describe('ProtectedRoute Component', () => {
       mockUseUnifiedAuth.mockReturnValue({
         isAuthenticated: true,
         authLoading: true,
+        isLoading: true,
       });
 
       mockUseEvents.mockReturnValue({
@@ -576,7 +602,7 @@ describe('ProtectedRoute Component', () => {
   });
 
   describe('Props Configuration', () => {
-    it('defaults requireEvent to true when not provided', () => {
+    it('defaults requireEvent to false when not provided', () => {
       mockUseEvents.mockReturnValue({
         selectedEvent: null,
         events: [],
@@ -585,8 +611,8 @@ describe('ProtectedRoute Component', () => {
 
       renderWithProviders(<ProtectedRoute />);
 
-      // Should show no events error since requireEvent defaults to true
-      expect(screen.getByTestId('alert')).toBeInTheDocument();
+      // Should render outlet since requireEvent defaults to false
+      expect(screen.getByTestId('outlet')).toBeInTheDocument();
     });
 
     it('respects requireEvent prop when set to false', () => {
@@ -607,6 +633,7 @@ describe('ProtectedRoute Component', () => {
       mockUseUnifiedAuth.mockReturnValue({
         isAuthenticated: false,
         authLoading: false,
+        isLoading: false,
       });
 
       renderWithProviders(<ProtectedRoute />);
@@ -619,6 +646,7 @@ describe('ProtectedRoute Component', () => {
       mockUseUnifiedAuth.mockReturnValue({
         isAuthenticated: false,
         authLoading: false,
+        isLoading: false,
       });
 
       renderWithProviders(<ProtectedRoute loginPath="/auth/login" />);
@@ -633,6 +661,7 @@ describe('ProtectedRoute Component', () => {
       mockUseUnifiedAuth.mockReturnValue({
         isAuthenticated: false,
         authLoading: true,
+        isLoading: true,
       });
 
       renderWithProviders(<ProtectedRoute />);

package/src/components/ProtectedRoute/ProtectedRoute.tsx

@@ -131,14 +131,21 @@ export interface ProtectedRouteProps {
  * @returns React element with route protection logic
  */
 export function ProtectedRoute({
-  requireEvent = true,
+  requireEvent = false,
   allowSuperAdminBypass = false,
   noEventsFallback,
   loadingFallback,
   loginPath = '/login'
 }: ProtectedRouteProps) {
-  const { isAuthenticated, authLoading } = useUnifiedAuth();
-  const { selectedEvent, events, isLoading: eventLoading } = useEvents();
+  const { isAuthenticated, isLoading } = useUnifiedAuth();
+  
+  // Always call useEvents() - UnifiedAuthProvider always includes EventServiceProvider
+  // Only use the values when requireEvent is true
+  const eventsContext = useEvents();
+  const selectedEvent = requireEvent ? eventsContext.selectedEvent : null;
+  const events = requireEvent ? (eventsContext.events || []) : [];
+  const eventLoading = requireEvent ? (eventsContext.isLoading || false) : false;
+  
   const sessionRestoration = useSessionRestoration();
 
   const isRestoringSession = useMemo(() => {
@@ -165,7 +172,8 @@ export function ProtectedRoute({
   }
 
   // Show loading state while auth is being determined (but not organisation/event loading)
-  if (authLoading && !sessionRestoration.hasTimedOut) {
+  // Use isLoading (combined loading state) for consistency with simpler implementations
+  if (isLoading && !sessionRestoration.hasTimedOut) {
     return loadingFallback || (
       <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
         <LoadingSpinner />

package/src/components/index.ts

@@ -126,6 +126,14 @@ export type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps } fro
 export { Calendar } from './Calendar';
 export type { CalendarProps } from './Calendar';
 
+// DateTimeField exports
+export { DateTimeField } from './DateTimeField';
+export type { DateTimeFieldProps } from './DateTimeField';
+
+// DatePickerWithTimezone exports
+export { DatePickerWithTimezone } from './DatePickerWithTimezone';
+export type { DatePickerWithTimezoneProps } from './DatePickerWithTimezone';
+
 // Toast exports
 export {
   Toast,

package/src/eslint-rules/pace-core-compliance.cjs

@@ -0,0 +1,406 @@
+/**
+ * ESLint Rules for pace-core Compliance Enforcement
+ * @package @jmruthers/pace-core
+ * @module ESLintRules/pace-core-compliance
+ * @since 1.0.0
+ * 
+ * This module provides ESLint rules to enforce pace-core usage patterns
+ * and prevent consuming apps from creating local alternatives.
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+// Load manifest data
+let manifestData = null;
+try {
+  const manifestPath = path.join(__dirname, '../../core-usage-manifest.json');
+  if (fs.existsSync(manifestPath)) {
+    manifestData = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
+  }
+} catch (error) {
+  // If manifest can't be loaded, rules will use hardcoded defaults
+  console.warn('Warning: Could not load core-usage-manifest.json, using defaults');
+}
+
+// Get restricted imports from manifest or use defaults
+const getRestrictedImports = () => {
+  if (manifestData && manifestData.restrictedImports) {
+    return manifestData.restrictedImports;
+  }
+  // Fallback defaults
+  return [
+    { module: '@radix-ui/react-avatar', reason: 'Use Avatar component from pace-core instead' },
+    { module: '@radix-ui/react-checkbox', reason: 'Use Checkbox component from pace-core instead' },
+    { module: '@radix-ui/react-dialog', reason: 'Use Dialog component from pace-core instead' },
+    { module: '@radix-ui/react-label', reason: 'Use Label component from pace-core instead' },
+    { module: '@radix-ui/react-progress', reason: 'Use Progress component from pace-core instead' },
+    { module: '@radix-ui/react-slot', reason: 'Use Button component from pace-core which handles slot composition' },
+    { module: '@radix-ui/react-switch', reason: 'Use Switch component from pace-core instead' },
+    { module: '@radix-ui/react-tabs', reason: 'Use Tabs component from pace-core instead' },
+    { module: '@radix-ui/react-toast', reason: 'Use Toast component and useToast hook from pace-core instead' },
+    { module: '@radix-ui/react-tooltip', reason: 'Use Tooltip component from pace-core instead' },
+    { module: 'react-day-picker', reason: 'Use Calendar component from pace-core instead' },
+    { module: '@tanstack/react-table', reason: 'Use DataTable component and related hooks from pace-core instead. DataTable wraps and standardizes table functionality' },
+    { module: 'react-hook-form', reason: 'Use Form component and useZodForm hook from pace-core instead' },
+    { module: 'zod', reason: 'Use validation utilities and schemas from pace-core instead. pace-core provides standardized validation helpers' }
+  ];
+};
+
+// Get pace-core components from manifest or use defaults
+const getPaceCoreComponents = () => {
+  if (manifestData && manifestData.components) {
+    return manifestData.components;
+  }
+  return ['Button', 'Card', 'Dialog', 'Input', 'Form', 'Select', 'Alert', 'Badge', 'Checkbox', 'Switch', 'Textarea', 'Label', 'Table', 'DataTable', 'Toast', 'Tooltip', 'Tabs', 'Calendar', 'Avatar', 'Progress'];
+};
+
+// Get pace-core hooks from manifest or use defaults
+const getPaceCoreHooks = () => {
+  if (manifestData && manifestData.hooks) {
+    return manifestData.hooks;
+  }
+  return ['useToast', 'useDebounce', 'useUnifiedAuth', 'useEvents', 'useOrganisations', 'useFileReference', 'useStorage', 'useZodForm', 'useRBAC', 'usePermissions'];
+};
+
+// Get pace-core utils from manifest or use defaults
+const getPaceCoreUtils = () => {
+  if (manifestData && manifestData.utils) {
+    return manifestData.utils;
+  }
+  return ['formatDate', 'formatCurrency', 'formatNumber', 'formatTime', 'formatDateTime', 'cn', 'validateUserInput', 'sanitizeUserInput', 'hasPermission', 'getAppConfig'];
+};
+
+module.exports = {
+  rules: {
+    /**
+     * Block direct imports of libraries wrapped by pace-core
+     */
+    'no-restricted-imports': {
+      meta: {
+        type: 'problem',
+        docs: {
+          description: 'Disallow direct imports of libraries that pace-core wraps',
+          category: 'Best Practices',
+          recommended: true
+        },
+        fixable: 'code',
+        hasSuggestions: true,
+        messages: {
+          restrictedImport: '{{message}} Import from {{alternative}} instead.',
+          restrictedImportWithReason: '{{message}} {{reason}}'
+        }
+      },
+      create(context) {
+        const restrictedImports = getRestrictedImports();
+        const restrictedModules = restrictedImports.map(imp => imp.module);
+        
+        // Also catch @radix-ui/* patterns
+        const radixPattern = /^@radix-ui\//;
+        
+        return {
+          ImportDeclaration(node) {
+            const importSource = node.source.value;
+            
+            // Check exact matches
+            const restricted = restrictedImports.find(imp => imp.module === importSource);
+            if (restricted) {
+              context.report({
+                node: node.source,
+                messageId: 'restrictedImportWithReason',
+                data: {
+                  message: `Direct import of '${importSource}' is not allowed.`,
+                  reason: restricted.reason
+                },
+                suggest: [{
+                  desc: `Use pace-core alternative: ${restricted.reason}`,
+                  fix(fixer) {
+                    // Suggest importing from pace-core instead
+                    const paceCoreAlternative = getPaceCoreAlternative(importSource);
+                    if (paceCoreAlternative) {
+                      return fixer.replaceText(
+                        node.source,
+                        `'@jmruthers/pace-core${paceCoreAlternative}'`
+                      );
+                    }
+                    return null;
+                  }
+                }]
+              });
+              return;
+            }
+            
+            // Check @radix-ui/* pattern
+            if (radixPattern.test(importSource) && !restrictedModules.includes(importSource)) {
+              context.report({
+                node: node.source,
+                messageId: 'restrictedImport',
+                data: {
+                  message: `Direct import of '${importSource}' is not allowed.`,
+                  alternative: '@jmruthers/pace-core'
+                },
+                suggest: [{
+                  desc: 'Use pace-core component instead',
+                  fix(fixer) {
+                    return fixer.replaceText(
+                      node.source,
+                      "'@jmruthers/pace-core'"
+                    );
+                  }
+                }]
+              });
+            }
+          }
+        };
+      }
+    },
+
+    /**
+     * Prefer pace-core components over native HTML elements or custom implementations
+     */
+    'prefer-pace-core-components': {
+      meta: {
+        type: 'suggestion',
+        docs: {
+          description: 'Suggest using pace-core components instead of native HTML elements',
+          category: 'Best Practices',
+          recommended: true
+        },
+        hasSuggestions: true,
+        messages: {
+          preferButton: "Use 'Button' component from '@jmruthers/pace-core' instead of <button>",
+          preferInput: "Use 'Input' component from '@jmruthers/pace-core' instead of <input>",
+          preferTextarea: "Use 'Textarea' component from '@jmruthers/pace-core' instead of <textarea>",
+          preferLabel: "Use 'Label' component from '@jmruthers/pace-core' instead of <label>",
+          preferForm: "Use 'Form' component from '@jmruthers/pace-core' instead of custom form implementation"
+        }
+      },
+      create(context) {
+        const paceCoreComponents = getPaceCoreComponents();
+        
+        return {
+          JSXOpeningElement(node) {
+            const elementName = node.name.name;
+            
+            if (!elementName) return;
+            
+            // Check for native HTML elements that have pace-core alternatives
+            const nativeToPaceCore = {
+              'button': 'Button',
+              'input': 'Input',
+              'textarea': 'Textarea',
+              'label': 'Label'
+            };
+            
+            if (nativeToPaceCore[elementName.toLowerCase()]) {
+              const paceCoreComponent = nativeToPaceCore[elementName.toLowerCase()];
+              if (paceCoreComponents.includes(paceCoreComponent)) {
+                context.report({
+                  node,
+                  messageId: `prefer${paceCoreComponent}`,
+                  suggest: [{
+                    desc: `Import and use ${paceCoreComponent} from pace-core`,
+                    fix(fixer) {
+                      // This is a complex fix, so we'll just report
+                      return null;
+                    }
+                  }]
+                });
+              }
+            }
+          }
+        };
+      }
+    },
+
+    /**
+     * Detect custom hooks that duplicate pace-core functionality
+     */
+    'prefer-pace-core-hooks': {
+      meta: {
+        type: 'suggestion',
+        docs: {
+          description: 'Suggest using pace-core hooks instead of custom implementations',
+          category: 'Best Practices',
+          recommended: true
+        },
+        messages: {
+          preferPaceCoreHook: "Consider using '{{hook}}' from '@jmruthers/pace-core' instead of custom hook '{{customHook}}'"
+        }
+      },
+      create(context) {
+        const paceCoreHooks = getPaceCoreHooks();
+        const hookPatterns = {
+          'useToast': ['useToast', 'useNotification', 'useSnackbar'],
+          'useDebounce': ['useDebounce', 'useDebounced'],
+          'useAuth': ['useAuth', 'useAuthentication', 'useUser'],
+          'useFile': ['useFile', 'useFileUpload', 'useFileReference'],
+          'useForm': ['useForm', 'useZodForm'],
+          'useTable': ['useTable', 'useDataTable']
+        };
+        
+        return {
+          FunctionDeclaration(node) {
+            const functionName = node.id?.name;
+            if (!functionName || !functionName.startsWith('use')) return;
+            
+            // Check if this looks like a hook that pace-core provides
+            for (const [paceCoreHook, patterns] of Object.entries(hookPatterns)) {
+              if (paceCoreHooks.includes(paceCoreHook)) {
+                for (const pattern of patterns) {
+                  if (functionName.toLowerCase().includes(pattern.toLowerCase().replace('use', ''))) {
+                    context.report({
+                      node: node.id,
+                      messageId: 'preferPaceCoreHook',
+                      data: {
+                        hook: paceCoreHook,
+                        customHook: functionName
+                      }
+                    });
+                    return;
+                  }
+                }
+              }
+            }
+          }
+        };
+      }
+    },
+
+    /**
+     * Detect utility functions that duplicate pace-core functionality
+     */
+    'prefer-pace-core-utils': {
+      meta: {
+        type: 'suggestion',
+        docs: {
+          description: 'Suggest using pace-core utilities instead of custom implementations',
+          category: 'Best Practices',
+          recommended: true
+        },
+        messages: {
+          preferPaceCoreUtil: "Consider using '{{util}}' from '@jmruthers/pace-core' instead of custom function '{{customUtil}}'"
+        }
+      },
+      create(context) {
+        const paceCoreUtils = getPaceCoreUtils();
+        const utilPatterns = {
+          'formatDate': ['formatDate', 'formatDateTime', 'dateFormat'],
+          'formatCurrency': ['formatCurrency', 'formatMoney', 'currencyFormat'],
+          'formatNumber': ['formatNumber', 'numberFormat'],
+          'cn': ['cn', 'classNames', 'clsx', 'mergeClasses'],
+          'validateUserInput': ['validate', 'validateInput', 'validateUser'],
+          'sanitizeUserInput': ['sanitize', 'sanitizeInput', 'sanitizeUser']
+        };
+        
+        return {
+          FunctionDeclaration(node) {
+            const functionName = node.id?.name;
+            if (!functionName) return;
+            
+            // Check if this looks like a util that pace-core provides
+            for (const [paceCoreUtil, patterns] of Object.entries(utilPatterns)) {
+              if (paceCoreUtils.includes(paceCoreUtil)) {
+                for (const pattern of patterns) {
+                  if (functionName.toLowerCase().includes(pattern.toLowerCase())) {
+                    context.report({
+                      node: node.id,
+                      messageId: 'preferPaceCoreUtil',
+                      data: {
+                        util: paceCoreUtil,
+                        customUtil: functionName
+                      }
+                    });
+                    return;
+                  }
+                }
+              }
+            }
+          }
+        };
+      }
+    },
+
+    /**
+     * Detect component files with names matching pace-core components
+     */
+    'no-local-component-duplication': {
+      meta: {
+        type: 'problem',
+        docs: {
+          description: 'Disallow local components with names matching pace-core components',
+          category: 'Best Practices',
+          recommended: true
+        },
+        messages: {
+          duplicateComponent: "Component '{{componentName}}' conflicts with pace-core component. Use '@jmruthers/pace-core' instead of creating a local version."
+        }
+      },
+      create(context) {
+        const paceCoreComponents = getPaceCoreComponents();
+        const filename = context.getFilename();
+        
+        // Only check component files (components/, src/components/, etc.)
+        if (!filename.match(/(components|Components)\//)) {
+          return {};
+        }
+        
+        // Extract component name from filename
+        const basename = path.basename(filename, path.extname(filename));
+        const componentName = basename.replace(/\.(test|spec)$/, '');
+        
+        return {
+          Program(node) {
+            // Check if this file exports a component with a name matching pace-core
+            if (paceCoreComponents.includes(componentName)) {
+              // Check if file exports this component
+              const hasExport = node.body.some(stmt => {
+                if (stmt.type === 'ExportNamedDeclaration') {
+                  return stmt.declaration?.id?.name === componentName ||
+                         stmt.specifiers?.some(spec => spec.exported.name === componentName);
+                }
+                if (stmt.type === 'ExportDefaultDeclaration') {
+                  return stmt.declaration?.id?.name === componentName ||
+                         stmt.declaration?.name === componentName;
+                }
+                return false;
+              });
+              
+              if (hasExport) {
+                context.report({
+                  node,
+                  messageId: 'duplicateComponent',
+                  data: {
+                    componentName
+                  }
+                });
+              }
+            }
+          }
+        };
+      }
+    }
+  }
+};
+
+// Helper function to get pace-core alternative for restricted imports
+function getPaceCoreAlternative(importSource) {
+  const alternatives = {
+    '@radix-ui/react-avatar': '/components',
+    '@radix-ui/react-checkbox': '/components',
+    '@radix-ui/react-dialog': '/components',
+    '@radix-ui/react-label': '/components',
+    '@radix-ui/react-progress': '/components',
+    '@radix-ui/react-switch': '/components',
+    '@radix-ui/react-tabs': '/components',
+    '@radix-ui/react-toast': '/components',
+    '@radix-ui/react-tooltip': '/components',
+    'react-day-picker': '/components',
+    '@tanstack/react-table': '/components',
+    'react-hook-form': '/components',
+    'zod': '/utils'
+  };
+  
+  return alternatives[importSource] || '';
+}
+