@jmruthers/pace-core 0.5.121 → 0.5.123

package/docs/migration/quick-migration-guide.md

@@ -0,0 +1,320 @@
+# Quick Migration Guide
+
+> **🚀 Fast Track Migration** | [Full Migration Guide](./README.md) | [Breaking Changes](./breaking-changes.md)
+
+Quick migration guide for common PACE Core upgrade scenarios. For detailed migration instructions, see the [Full Migration Guide](./README.md).
+
+## 🎯 Quick Migration Checklist
+
+### Before You Start
+- [ ] **Backup your project** - Always backup before major updates
+- [ ] **Check current version** - `npm list @jmruthers/pace-core`
+- [ ] **Review changelog** - Check for breaking changes
+- [ ] **Test in development** - Never migrate directly in production
+
+### Common Migration Scenarios
+
+## 📦 Package Updates
+
+### Minor Version Updates (e.g., v0.4.16 → v0.4.17)
+
+**Usually safe, but check for:**
+- New features
+- Bug fixes
+- Performance improvements
+
+```bash
+# Update to latest
+npm update @jmruthers/pace-core
+
+# Or specific version
+npm install @jmruthers/pace-core@0.4.17
+```
+
+**What to check:**
+- [ ] App still builds successfully
+- [ ] No console errors
+- [ ] Components render correctly
+- [ ] Authentication still works
+
+### Major Version Updates (e.g., v0.x → v1.x)
+
+**Requires more attention:**
+- Breaking API changes
+- New required props
+- Deprecated features
+- Configuration changes
+
+```bash
+# Check what's new
+npm info @jmruthers/pace-core versions --json
+
+# Update to latest
+npm install @jmruthers/pace-core@latest
+```
+
+**What to check:**
+- [ ] Review [Breaking Changes](./breaking-changes.md)
+- [ ] Update import statements
+- [ ] Fix deprecated API usage
+- [ ] Update configuration files
+- [ ] Test all functionality
+
+## 🔧 Configuration Updates
+
+### Tailwind v4 Migration
+
+**From v0.4.15 to v0.4.16+ (CSS-First Approach):**
+
+```bash
+# Remove old dependencies
+npm uninstall tailwindcss postcss autoprefixer
+
+# Install new dependencies
+npm install @tailwindcss/vite tailwindcss@^4.0.0
+```
+
+**Update vite.config.ts:**
+```ts
+// Before (v0.4.15)
+import tailwindcss from '@tailwindcss/vite'
+export default defineConfig({
+  plugins: [
+    react(),
+    tailwindcss({
+      content: [
+        './src/**/*.{js,ts,jsx,tsx}',
+        './node_modules/@jmruthers/pace-core/src/**/*.{js,ts,jsx,tsx}'
+      ]
+    })
+  ],
+})
+
+// After (v0.4.16+)
+import tailwindcss from '@tailwindcss/vite'
+export default defineConfig({
+  plugins: [
+    react(),
+    tailwindcss({
+      content: [
+        './src/**/*.{js,ts,jsx,tsx}' // Only app files, pace-core scanned via @source
+      ]
+    })
+  ],
+})
+```
+
+**Update CSS imports:**
+```tsx
+// Before
+import '@jmruthers/pace-core/src/styles/core.css';
+
+// After
+import '@jmruthers/pace-core/src/styles/core.css';
+```
+
+### Source Path Fix (v0.4.17+)
+
+**Critical fix for @source directive paths:**
+
+```ts
+// vite.config.ts
+import tailwindcss from '@tailwindcss/vite'
+export default defineConfig({
+  plugins: [
+    react(),
+    tailwindcss({
+      content: [
+        './src/**/*.{js,ts,jsx,tsx}',
+        './node_modules/@jmruthers/pace-core/**/*.{js,ts,jsx,tsx}'
+      ]
+    })
+  ],
+})
+```
+
+## 🔄 API Changes
+
+### Component Props
+
+**Common prop changes:**
+
+```tsx
+// Before (v0.x)
+<DataTable
+  data={data}
+  columns={columns}
+  enableSearch={true}
+  enablePagination={true}
+/>
+
+// After (v1.x)
+<DataTable
+  data={data}
+  columns={columns}
+  features={{
+    search: true,
+    pagination: true,
+    sorting: true,
+    filtering: true
+  }}
+/>
+```
+
+### Hook Changes
+
+**RBAC hooks moved to separate module:**
+
+```tsx
+// Before
+import { useCan, usePermissions } from '@jmruthers/pace-core';
+
+// After
+import { useCan, usePermissions } from '@jmruthers/pace-core/rbac';
+```
+
+### Import Changes
+
+**Consolidated imports:**
+
+```tsx
+// Before
+import { Button } from '@jmruthers/pace-core/components';
+import { useUnifiedAuth } from '@jmruthers/pace-core/hooks';
+
+// After
+import { Button, useUnifiedAuth } from '@jmruthers/pace-core';
+```
+
+## 🐛 Common Migration Issues
+
+### Styling Issues
+
+**Problem**: Components appear unstyled after update
+
+**Solution**:
+```tsx
+// Ensure CSS import is first
+import '@jmruthers/pace-core/src/styles/core.css';
+import { Button } from '@jmruthers/pace-core';
+```
+
+### Build Errors
+
+**Problem**: Build fails with Tailwind errors
+
+**Solution**:
+```bash
+# Clear all caches
+rm -rf node_modules package-lock.json
+npm install
+
+# Check Tailwind config
+npm run build -- --debug
+```
+
+### TypeScript Errors
+
+**Problem**: Type errors after update
+
+**Solution**:
+```bash
+# Update TypeScript types
+npm install @types/react@latest @types/react-dom@latest
+
+# Regenerate types
+npm run type-check
+```
+
+### Authentication Issues
+
+**Problem**: Login not working after update
+
+**Solution**:
+```tsx
+// Check provider hierarchy
+<UnifiedAuthProvider supabaseClient={supabase} appName="my-app">
+  <OrganisationProvider>
+    <EventProvider>
+      <YourApp />
+    </EventProvider>
+  </OrganisationProvider>
+</UnifiedAuthProvider>
+```
+
+## ✅ Post-Migration Testing
+
+### Essential Tests
+- [ ] **Build succeeds** - `npm run build`
+- [ ] **App starts** - `npm run dev`
+- [ ] **Authentication works** - Login/logout
+- [ ] **Components render** - All UI components display
+- [ ] **Permissions work** - RBAC functions correctly
+- [ ] **Forms work** - Form validation and submission
+- [ ] **Data tables work** - CRUD operations
+- [ ] **Styling correct** - No visual regressions
+
+### Performance Tests
+- [ ] **Bundle size** - Check for size increases
+- [ ] **Load time** - Measure initial load
+- [ ] **Runtime performance** - Check for slowdowns
+- [ ] **Memory usage** - Monitor for leaks
+
+### Browser Tests
+- [ ] **Chrome** - Latest version
+- [ ] **Firefox** - Latest version
+- [ ] **Safari** - Latest version
+- [ ] **Mobile browsers** - iOS Safari, Chrome Mobile
+
+## 🆘 Getting Help
+
+### If Migration Fails
+
+1. **Check the logs** - Look for specific error messages
+2. **Revert changes** - Go back to working version
+3. **Check documentation** - Look for migration guides
+4. **Search issues** - Check GitHub issues
+5. **Ask for help** - Create detailed issue report
+
+### Debug Information
+
+When asking for help, include:
+
+```bash
+# Version information
+npm list @jmruthers/pace-core
+node --version
+npm --version
+
+# Build output
+npm run build 2>&1 | tee build.log
+
+# Error details
+# Include full error messages and stack traces
+```
+
+### Emergency Rollback
+
+```bash
+# Rollback to previous version
+npm install @jmruthers/pace-core@0.4.16
+
+# Or specific working version
+npm install @jmruthers/pace-core@0.4.15
+
+# Clear caches
+rm -rf node_modules package-lock.json
+npm install
+```
+
+## 📚 Additional Resources
+
+- **[Full Migration Guide](./README.md)** - Detailed migration instructions
+- **[Breaking Changes](./breaking-changes.md)** - Complete list of breaking changes
+- **[Changelog](../CHANGELOG.md)** - Version history and changes
+- **[Troubleshooting](../troubleshooting/README.md)** - Common issues and solutions
+- **[GitHub Issues](https://github.com/jmruthers/pace-core/issues)** - Report bugs and get help
+
+---
+
+**Remember**: Always test migrations in a development environment first!

package/docs/rbac/quick-start.md

@@ -356,10 +356,10 @@ export function Login() {
   }
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50">
+    <div className="min-h-screen flex items-center justify-center bg-sec-50">
       <div className="max-w-md w-full space-y-8">
         <div>
-          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
+          <h2 className="mt-6 text-center text-3xl font-extrabold text-sec-900">
             Sign in to your account
           </h2>
         </div>
@@ -373,7 +373,7 @@ export function Login() {
               name="email"
               type="email"
               required
-              className="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
+              className="appearance-none rounded-md relative block w-full px-3 py-2 border border-sec-300 placeholder-sec-500 text-sec-900 focus:outline-none focus:ring-sec-500 focus:border-sec-500 focus:z-10 sm:text-sm"
               placeholder="Email address"
               value={email}
               onChange={(e) => setEmail(e.target.value)}
@@ -388,7 +388,7 @@ export function Login() {
               name="password"
               type="password"
               required
-              className="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
+              className="appearance-none rounded-md relative block w-full px-3 py-2 border border-sec-300 placeholder-sec-500 text-sec-900 focus:outline-none focus:ring-sec-500 focus:border-sec-500 focus:z-10 sm:text-sm"
               placeholder="Password"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
@@ -398,7 +398,7 @@ export function Login() {
             <button
               type="submit"
               disabled={loading}
-              className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
+              className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-main-50 bg-sec-600 hover:bg-sec-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sec-500 disabled:opacity-50"
             >
               {loading ? 'Signing in...' : 'Sign in'}
             </button>
@@ -430,7 +430,7 @@ export function Dashboard() {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-sec-50">
       <nav className="bg-white shadow">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between h-16">
@@ -438,12 +438,12 @@ export function Dashboard() {
               <h1 className="text-xl font-semibold">Dashboard</h1>
             </div>
             <div className="flex items-center space-x-4">
-              <span className="text-sm text-gray-700">
+              <span className="text-sm text-sec-700">
                 {user.email} | Org: {selectedOrganisationId}
               </span>
               <button
                 onClick={() => supabase.auth.signOut()}
-                className="text-sm text-gray-500 hover:text-gray-700"
+                className="text-sm text-sec-500 hover:text-sec-700"
               >
                 Sign out
               </button>
@@ -454,7 +454,7 @@ export function Dashboard() {
 
       <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
         <div className="px-4 py-6 sm:px-0">
-          <div className="border-4 border-dashed border-gray-200 rounded-lg h-96 p-8">
+          <div className="border-4 border-dashed border-sec-200 rounded-lg h-96 p-8">
             <h2 className="text-2xl font-bold mb-4">Welcome to your Dashboard</h2>
             
             {/* CRITICAL: Use PagePermissionGuard for page-level permissions */}
@@ -469,7 +469,7 @@ export function Dashboard() {
                 <div className="space-x-4">
                   <Link 
                     to="/users" 
-                    className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
+                    className="bg-main-500 text-main-50 px-4 py-2 rounded hover:bg-main-600"
                   >
                     View Users
                   </Link>
@@ -504,23 +504,23 @@ export function Users() {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-sec-50">
       <nav className="bg-white shadow">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between h-16">
             <div className="flex items-center">
-              <Link to="/" className="text-blue-600 hover:text-blue-800 mr-4">
+              <Link to="/" className="text-main-600 hover:text-main-800 mr-4">
                 ← Back to Dashboard
               </Link>
               <h1 className="text-xl font-semibold">Users</h1>
             </div>
             <div className="flex items-center space-x-4">
-              <span className="text-sm text-gray-700">
+              <span className="text-sm text-sec-700">
                 {user.email} | Org: {selectedOrganisationId}
               </span>
               <button
                 onClick={() => supabase.auth.signOut()}
-                className="text-sm text-gray-500 hover:text-gray-700"
+                className="text-sm text-sec-500 hover:text-sec-700"
               >
                 Sign out
               </button>
@@ -531,7 +531,7 @@ export function Users() {
 
       <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
         <div className="px-4 py-6 sm:px-0">
-          <div className="border-4 border-dashed border-gray-200 rounded-lg h-96 p-8">
+          <div className="border-4 border-dashed border-sec-200 rounded-lg h-96 p-8">
             <h2 className="text-2xl font-bold mb-4">User Management</h2>
             
             {/* CRITICAL: Use PagePermissionGuard for page-level permissions */}
@@ -544,7 +544,7 @@ export function Users() {
                 <p>You have access to the users page!</p>
                 <p>This means your RBAC system is working correctly.</p>
                 
-                <div className="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded">
+                <div className="bg-main-100 border border-main-400 text-main-700 px-4 py-3 rounded">
                   <strong>Success!</strong> Your RBAC setup is working correctly.
                 </div>
               </div>

package/docs/troubleshooting/README.md

@@ -777,13 +777,13 @@ class DebugErrorBoundary extends React.Component {
   render() {
     if (this.state.hasError) {
       return (
-        <div className="p-4 border border-red-500 bg-red-50">
-          <h2 className="text-red-800 font-bold">Something went wrong</h2>
+        <div className="p-4 border border-acc-500 bg-acc-50">
+          <h2 className="text-acc-800 font-bold">Something went wrong</h2>
           <details className="mt-2">
-            <summary className="cursor-pointer text-red-700">
+            <summary className="cursor-pointer text-acc-700">
               Error Details (Click to expand)
             </summary>
-            <pre className="mt-2 text-xs text-red-600 whitespace-pre-wrap">
+            <pre className="mt-2 text-xs text-acc-600 whitespace-pre-wrap">
               {this.state.error && this.state.error.toString()}
               {this.state.errorInfo.componentStack}
             </pre>

package/docs/troubleshooting/cake-page-permission-guard-issue-summary.md

@@ -135,7 +135,7 @@ export function Meals() {
         fallback={
           <div className="min-h-screen flex items-center justify-center">
             <div className="text-center">
-              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto mb-4"></div>
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-sec-900 mx-auto mb-4"></div>
               <p>Loading permissions...</p>
             </div>
           </div>