@jmruthers/pace-core 0.5.135 → 0.5.137

package/examples/features/rbac/PermissionExample.tsx

@@ -0,0 +1,151 @@
+/**
+ * @file Permission System Example
+ * @package @jmruthers/pace-core
+ * @module Examples/RBAC/PermissionExample
+ * @since 0.4.0
+ *
+ * Example component demonstrating the hybrid permission system
+ * that supports both direct app access and event-based permissions.
+ */
+
+import React from 'react';
+import { useUnifiedAuth } from '../../src/providers';
+import { useAppConfig } from '../../src/hooks';
+import { AccessLevel } from '../../src/types';
+
+export function PermissionExample() {
+  const { 
+    user, 
+    isAuthenticated, 
+    hasPermission, 
+    hasAccessLevel, 
+    accessLevel,
+    selectedEventId,
+    setSelectedEventId 
+  } = useUnifiedAuth();
+  
+  const { supportsDirectAccess, requiresEvent, isLoading, appName } = useAppConfig();
+
+  if (!isAuthenticated) {
+    return <div>Please log in to see permissions</div>;
+  }
+
+  if (isLoading) {
+    return <div>Loading app configuration...</div>;
+  }
+
+  return (
+    <div className="p-6 max-w-2xl">
+      <h2>Permission System Example</h2>
+      
+      {/* App Configuration Info */}
+      <div className="mb-6 p-4 bg-sec-100 rounded-lg">
+        <h3>App Configuration: {appName}</h3>
+        <div className="space-y-1">
+          <div>Supports Direct Access: {supportsDirectAccess ? '✅' : '❌'}</div>
+          <div>Requires Event: {requiresEvent ? '✅' : '❌'}</div>
+          <div>Current Access Level: {accessLevel}</div>
+        </div>
+      </div>
+
+      {/* Event Selection */}
+      {requiresEvent && (
+        <div className="mb-6 p-4 border rounded-lg">
+          <h3>Event Context</h3>
+          <div className="space-y-2">
+            <div>Selected Event: {selectedEventId || 'None'}</div>
+            <div className="space-x-2">
+              <button 
+                onClick={() => setSelectedEventId('event-123')}
+                className="px-3 py-1 bg-main-500 text-main-50 rounded"
+              >
+                Select Event 123
+              </button>
+              <button 
+                onClick={() => setSelectedEventId(null)}
+                className="px-3 py-1 bg-sec-500 text-main-50 rounded"
+              >
+                Clear Event
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Permission Examples */}
+      <div className="space-y-4">
+        <h3>Permission Examples</h3>
+        
+        <div className="grid gap-4 md:grid-cols-2">
+          {/* Basic Permissions */}
+          <div className="p-4 border rounded-lg">
+            <h4>Basic Permissions</h4>
+            <div className="space-y-1 text-sm">
+              <div>Can Read: {hasPermission('app:read') ? '✅' : '❌'}</div>
+              <div>Can Write: {hasPermission('app:write') ? '✅' : '❌'}</div>
+              <div>Can Delete: {hasPermission('app:delete') ? '✅' : '❌'}</div>
+            </div>
+          </div>
+
+          {/* Access Level Checks */}
+          <div className="p-4 border rounded-lg">
+            <h4>Access Level Checks</h4>
+            <div className="space-y-1 text-sm">
+              <div>Is Editor+: {hasAccessLevel(AccessLevel.EDITOR) ? '✅' : '❌'}</div>
+              <div>Is Planner+: {hasAccessLevel(AccessLevel.PLANNER) ? '✅' : '❌'}</div>
+              <div>Is Admin: {hasAccessLevel(AccessLevel.ADMIN) ? '✅' : '❌'}</div>
+            </div>
+          </div>
+        </div>
+
+        {/* Conditional Rendering Examples */}
+        <div className="p-4 border rounded-lg">
+          <h4>Conditional UI Elements</h4>
+          <div className="space-y-2">
+            {hasPermission('app:read') && (
+              <div className="p-2 bg-main-100 text-main-800 rounded">
+                ✅ You can see this because you have read permission
+              </div>
+            )}
+            
+            {hasPermission('app:write') && (
+              <button className="px-4 py-2 bg-main-500 text-main-50 rounded">
+                Edit (Available with write permission)
+              </button>
+            )}
+            
+            {hasAccessLevel(AccessLevel.ADMIN) && (
+              <div className="p-2 bg-acc-100 text-acc-800 rounded">
+                🔒 Admin-only content visible
+              </div>
+            )}
+            
+            {!hasPermission('app:delete') && (
+              <div className="p-2 bg-acc-100 text-acc-800 rounded">
+                ⚠️ Delete functionality not available for your access level
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Status Summary */}
+        <div className="p-4 bg-main-50 rounded-lg">
+          <h4>Current Status</h4>
+          <div className="text-sm space-y-1">
+            <div>User: {user?.email}</div>
+            <div>App: {appName}</div>
+            <div>Event: {selectedEventId || 'Direct Access'}</div>
+            <div>
+              Permission Model: {
+                selectedEventId ? 'Event-based' : 
+                supportsDirectAccess ? 'Direct Access' : 
+                'No Access (requires event)'
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+

package/examples/features/rbac/index.ts

@@ -0,0 +1,13 @@
+/**
+ * @file RBAC Examples
+ * @package @jmruthers/pace-core
+ * @module Examples/RBAC
+ * @since 2.0.0
+ *
+ * RBAC and permission-related examples
+ */
+
+export { EventBasedApp } from './EventBasedApp';
+export { CompleteRBACExample } from './CompleteRBACExample';
+export { PermissionExample } from './PermissionExample';
+

package/examples/index.ts

@@ -11,12 +11,20 @@
  *
  * @example
  * ```tsx
+ * // Import feature examples
  * import { PublicPageUsageExample } from '@jmruthers/pace-core/examples';
  * import { EventBasedApp } from '@jmruthers/pace-core/examples';
+ * 
+ * // Import component examples
+ * import { HierarchicalExample } from '@jmruthers/pace-core/examples/components/DataTable';
+ * import { HtmlDialogExample } from '@jmruthers/pace-core/examples/components/Dialog';
  * ```
  */
 
-// Export all examples from subdirectories
-export * from './rbac';
-export * from './public-pages';
+// Export all feature examples
+export * from './features/rbac';
+export * from './features/public-pages';
+
+// Export all component examples
+export * from './components';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jmruthers/pace-core",
-  "version": "0.5.135",
+  "version": "0.5.137",
   "description": "Clean, modern React component library with Tailwind v4 styling and native utilities",
   "private": false,
   "publishConfig": {
@@ -27,11 +27,6 @@
       "import": "./dist/providers.js",
       "default": "./dist/providers.js"
     },
-    "./validation": {
-      "types": "./dist/validation.d.ts",
-      "import": "./dist/validation.js",
-      "default": "./dist/validation.js"
-    },
     "./hooks": {
       "types": "./dist/hooks.d.ts",
       "import": "./dist/hooks.js",
@@ -93,10 +88,6 @@
       "import": "./src/types/index.ts",
       "default": "./src/types/index.ts"
     },
-    "./source/validation": {
-      "import": "./src/validation/index.ts",
-      "default": "./src/validation/index.ts"
-    },
     "./source/rbac": {
       "import": "./src/rbac/index.ts",
       "default": "./src/rbac/index.ts"
@@ -106,15 +97,35 @@
       "import": "./dist/examples/index.js",
       "default": "./dist/examples/index.js"
     },
-    "./examples/rbac": {
-      "types": "./dist/examples/rbac/index.d.ts",
-      "import": "./dist/examples/rbac/index.js",
-      "default": "./dist/examples/rbac/index.js"
-    },
-    "./examples/public-pages": {
-      "types": "./dist/examples/public-pages/index.d.ts",
-      "import": "./dist/examples/public-pages/index.js",
-      "default": "./dist/examples/public-pages/index.js"
+    "./examples/features": {
+      "types": "./dist/examples/features/index.d.ts",
+      "import": "./dist/examples/features/index.js",
+      "default": "./dist/examples/features/index.js"
+    },
+    "./examples/features/rbac": {
+      "types": "./dist/examples/features/rbac/index.d.ts",
+      "import": "./dist/examples/features/rbac/index.js",
+      "default": "./dist/examples/features/rbac/index.js"
+    },
+    "./examples/features/public-pages": {
+      "types": "./dist/examples/features/public-pages/index.d.ts",
+      "import": "./dist/examples/features/public-pages/index.js",
+      "default": "./dist/examples/features/public-pages/index.js"
+    },
+    "./examples/components": {
+      "types": "./dist/examples/components/index.d.ts",
+      "import": "./dist/examples/components/index.js",
+      "default": "./dist/examples/components/index.js"
+    },
+    "./examples/components/DataTable": {
+      "types": "./dist/examples/components/DataTable/index.d.ts",
+      "import": "./dist/examples/components/DataTable/index.js",
+      "default": "./dist/examples/components/DataTable/index.js"
+    },
+    "./examples/components/Dialog": {
+      "types": "./dist/examples/components/Dialog/index.d.ts",
+      "import": "./dist/examples/components/Dialog/index.js",
+      "default": "./dist/examples/components/Dialog/index.js"
     },
     "./source/examples": {
       "import": "./examples/index.ts",

package/src/__tests__/TEST_STANDARD.md

@@ -289,6 +289,50 @@ mockSupabase.rpc.mockImplementation((functionName, params) => {
 });
 ```
 
+### Mock Isolation Best Practices
+
+**Problem**: Mocks can leak between test files, causing flaky tests.
+
+**Solutions**:
+
+```typescript
+// ✅ Good: Use vi.hoisted() for module mocks
+const { mockGetSignedUrl } = vi.hoisted(() => {
+  return {
+    mockGetSignedUrl: vi.fn(() => Promise.resolve({ url: 'test' }))
+  };
+});
+
+vi.mock('../utils/storage/helpers', () => ({
+  getSignedUrl: mockGetSignedUrl
+}));
+
+// ✅ Good: Reset mocks in beforeEach
+beforeEach(() => {
+  mockGetSignedUrl.mockClear();
+  mockGetSignedUrl.mockReset();
+  mockGetSignedUrl.mockImplementation(() => Promise.resolve({ url: 'test' }));
+});
+
+// ✅ Good: Use vi.spyOn for better isolation (when possible)
+const getSignedUrlSpy = vi.spyOn(storageHelpers, 'getSignedUrl');
+getSignedUrlSpy.mockResolvedValue({ url: 'test' });
+
+// ✅ Good: Use vi.stubGlobal for global mocks
+vi.stubGlobal('window', undefined);
+// Automatically restored after test
+
+// ❌ Bad: Directly modifying global objects
+delete global.window; // Can break other tests
+```
+
+**Mock Isolation Checklist**:
+- [ ] Use `vi.hoisted()` for module mocks
+- [ ] Reset mocks in `beforeEach`/`afterEach`
+- [ ] Use `vi.stubGlobal` for global mocks
+- [ ] Prefer `vi.spyOn` over `vi.mock` when possible
+- [ ] Test files in isolation to verify no leakage
+
 ### Cleanup Best Practices
 
 ```typescript
@@ -821,6 +865,54 @@ it.skip('should navigate between headers with arrow keys', async () => {
 3. Use `findBy` queries instead of `waitFor` + `getBy`
 4. Reduce timeout values for fast operations
 
+### Performance Testing Best Practices
+
+**When to Test Performance**:
+- ✅ Critical user-facing operations (rendering, navigation)
+- ✅ Operations that must complete within SLA
+- ✅ Memory-intensive operations
+- ❌ Avoid testing performance of mocked operations
+- ❌ Avoid absolute timing thresholds in CI environments
+
+**Performance Test Patterns**:
+
+```typescript
+// ❌ Bad: Absolute thresholds (brittle in CI/coverage)
+const startTime = performance.now();
+render(<Component />);
+const endTime = performance.now();
+expect(endTime - startTime).toBeLessThan(200); // Fails under coverage
+
+// ✅ Good: Behavioral assertions (focus on outcomes)
+await waitFor(() => {
+  expect(screen.getByRole('navigation')).toBeInTheDocument();
+}, { timeout: 2000 });
+
+// ✅ Good: Relative comparisons (more tolerant)
+const baseline = measureBaseline();
+const actual = measureActual();
+expect(actual).toBeLessThan(baseline * 1.5); // 50% tolerance
+
+// ✅ Good: Smoke tests (verify no regressions)
+it('renders without performance degradation', async () => {
+  const startTime = performance.now();
+  render(<Component />);
+  await waitFor(() => {
+    expect(screen.getByRole('main')).toBeInTheDocument();
+  });
+  const endTime = performance.now();
+  // Only fail if significantly slower (e.g., > 5s)
+  expect(endTime - startTime).toBeLessThan(5000);
+});
+```
+
+**Performance Test Guidelines**:
+1. **Prefer Behavioral Tests**: Focus on what users see, not raw timing
+2. **Use Relative Thresholds**: Compare against baseline, not absolute values
+3. **Skip in Coverage Mode**: Use `if (process.env.COVERAGE) return;` for timing tests
+4. **Document Thresholds**: Explain why specific timing is critical
+5. **Separate Performance Suite**: Consider separate test suite for performance tests
+
 ### Memory Management
 
 ```typescript

package/src/components/Alert/Alert.tsx

@@ -47,7 +47,7 @@
 
 import * as React from "react"
 
-import { cn } from "../../utils/cn"
+import { cn } from "../../utils/core/cn"
 
 // Context to share variant with child components
 const AlertContext = React.createContext<{ variant?: "default" | "destructive" | "inline" | null }>({ variant: "default" })

package/src/components/Avatar/Avatar.tsx

@@ -37,7 +37,7 @@
 import * as React from "react"
 import * as AvatarPrimitive from "@radix-ui/react-avatar"
 
-import { cn } from "../../utils/cn"
+import { cn } from "../../utils/core/cn"
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,