ultimate-jekyll-manager 0.0.119 → 0.0.120

package/CLAUDE.md

@@ -597,19 +597,119 @@ const response = await authorizedFetch(url, options);
 
 #### FormManager Library
 
-Form handling library with built-in state management and validation.
+Lightweight form state management library with built-in validation, state machine, and event system.
 
 **Import:**
 ```javascript
 import { FormManager } from '__main_assets__/js/libs/form-manager.js';
 ```
 
-**Usage:**
+**Basic Usage:**
 ```javascript
 const formManager = new FormManager('#my-form', options);
+
+formManager.on('submit', async ({ data, $submitButton }) => {
+  const response = await fetch('/api', { body: JSON.stringify(data) });
+  if (!response.ok) throw new Error('Failed');
+  formManager.showSuccess('Form submitted!');
+});
+```
+
+**State Machine:**
+```
+initializing → ready ⇄ submitting → ready (or submitted)
+```
+
+**Configuration Options:**
+```javascript
+{
+  autoReady: true,           // Auto-transition to initialState when DOM ready
+  initialState: 'ready',     // State after autoReady fires
+  allowResubmit: true,       // Allow resubmission after success (false = 'submitted' state)
+  resetOnSuccess: false,     // Clear form fields after successful submission
+  warnOnUnsavedChanges: false, // Warn user before leaving with unsaved changes
+  submittingText: 'Processing...', // Text shown on submit button during submission
+  submittedText: 'Processed!'  // Text shown on submit button after success (when allowResubmit: false)
+}
+```
+
+**Events:**
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `submit` | `{ data, $submitButton }` | Form submission (throw error to show failure) |
+| `validation` | `{ data, setError }` | Custom validation before submit |
+| `change` | `{ field, name, value, data }` | Field value changed |
+| `statechange` | `{ state, previousState }` | State transition |
+
+**Validation System:**
+
+FormManager runs validation automatically before `submit`:
+1. **HTML5 validation** - Checks `required`, `minlength`, `maxlength`, `min`, `max`, `pattern`, `type="email"`, `type="url"`
+2. **Custom validation** - Use `validation` event for business logic
+
+```javascript
+fm.on('validation', ({ data, setError }) => {
+  if (data.age && parseInt(data.age) < 18) {
+    setError('age', 'You must be 18 or older');
+  }
+});
+```
+
+Errors display with Bootstrap's `is-invalid` class and `.invalid-feedback` elements.
+
+**Autofocus:**
+
+When the form transitions to `ready` state, FormManager automatically focuses the field with the `autofocus` attribute (if present and not disabled).
+
+**Methods:**
+
+| Method | Description |
+|--------|-------------|
+| `on(event, callback)` | Register event listener (chainable) |
+| `ready()` | Transition to ready state |
+| `getData()` | Get form data as nested object (supports dot notation) |
+| `setData(obj)` | Set form values from nested object |
+| `showSuccess(msg)` | Show success notification |
+| `showError(msg)` | Show error notification |
+| `reset()` | Reset form and go to ready state |
+| `isDirty()` | Check if form has unsaved changes |
+| `setDirty(bool)` | Set dirty state |
+| `clearFieldErrors()` | Clear all field validation errors |
+| `throwFieldErrors({ field: msg })` | Set and display field errors, throw error |
+
+**Nested Field Names (Dot Notation):**
+
+Use dot notation in field names for nested data:
+```html
+<input name="user.address.city" value="NYC">
+```
+
+Results in:
+```javascript
+{ user: { address: { city: 'NYC' } } }
+```
+
+**Checkbox Handling:**
+- **Single checkbox:** Returns `true`/`false`
+- **Checkbox group (same name):** Returns object `{ value1: true, value2: false }`
+
+**Multiple Submit Buttons:**
+
+Access the clicked button via `$submitButton`:
+```html
+<button type="submit" data-action="save">Save</button>
+<button type="submit" data-action="draft">Save Draft</button>
+```
+
+```javascript
+fm.on('submit', async ({ data, $submitButton }) => {
+  const action = $submitButton?.dataset?.action; // 'save' or 'draft'
+});
 ```
 
 **Reference:** `src/assets/js/libs/form-manager.js`
+**Test Page:** `src/assets/js/pages/test/libraries/form-manager/index.js`
 **Example:** `src/assets/js/pages/contact/index.js`
 
 ## Analytics & Tracking

package/README.md

@@ -381,14 +381,183 @@ const response = await authorizedFetch(serverApiURL, {
 
 #### FormManager Library
 
-Custom library for form handling with built-in state management and validation.
+Lightweight form state management library with built-in validation, state machine, and event system.
 
 **Import:**
 ```javascript
 import { FormManager } from '__main_assets__/js/libs/form-manager.js';
 ```
 
-**Documentation:** See [form-manager.js](src/assets/js/libs/form-manager.js) for full API and usage examples.
+**Basic Usage:**
+```javascript
+const formManager = new FormManager('#my-form', {
+  allowResubmit: true,      // Allow form to be submitted again after success
+  resetOnSuccess: false,    // Don't clear fields after success
+  warnOnUnsavedChanges: false // Don't warn on page leave
+});
+
+// Handle form submission
+formManager.on('submit', async ({ data, $submitButton }) => {
+  const response = await fetch('/api/submit', {
+    method: 'POST',
+    body: JSON.stringify(data)
+  });
+
+  if (!response.ok) {
+    throw new Error('Submission failed');
+  }
+
+  formManager.showSuccess('Form submitted successfully!');
+});
+```
+
+**State Machine:**
+```
+initializing → ready ⇄ submitting → ready (or submitted)
+```
+
+**Events:**
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `submit` | `{ data, $submitButton }` | Form submission. Throw an error to show failure message. |
+| `validation` | `{ data, setError }` | Custom validation before submit. Use `setError(fieldName, message)` to add errors. |
+| `change` | `{ field, name, value, data }` | Called when any field value changes. |
+| `statechange` | `{ state, previousState }` | Called when form state changes. |
+
+**Validation:**
+
+FormManager runs validation automatically before the `submit` event:
+
+1. **HTML5 Validation** - Automatically checks `required`, `minlength`, `maxlength`, `min`, `max`, `pattern`, `type="email"`, `type="url"`
+2. **Custom Validation** - Use the `validation` event for business logic
+
+```javascript
+formManager.on('validation', ({ data, setError }) => {
+  // Custom validation runs AFTER HTML5 validation
+  if (data.age && parseInt(data.age) < 18) {
+    setError('age', 'You must be 18 or older');
+  }
+
+  if (data.password !== data.confirmPassword) {
+    setError('confirmPassword', 'Passwords do not match');
+  }
+});
+```
+
+Validation errors are displayed using Bootstrap's `is-invalid` class and `.invalid-feedback` elements. The first field with an error is automatically focused.
+
+**Autofocus:**
+
+When the form transitions to `ready` state, FormManager automatically focuses any field with the `autofocus` attribute:
+
+```html
+<input type="text" name="email" autofocus>
+```
+
+**Methods:**
+
+| Method | Description |
+|--------|-------------|
+| `on(event, callback)` | Register event listener (chainable) |
+| `ready()` | Manually transition to ready state (for `autoReady: false`) |
+| `getData()` | Get form data as nested object |
+| `setData(obj)` | Populate form from a nested object |
+| `showSuccess(msg)` | Show success notification |
+| `showError(msg)` | Show error notification |
+| `reset()` | Reset form and state |
+| `isDirty()` | Check if form has unsaved changes |
+| `clearFieldErrors()` | Clear all validation error displays |
+| `throwFieldErrors({ field: msg })` | Set errors and throw (for use in submit handler) |
+
+**Nested Field Names (Dot Notation):**
+
+Use dot notation in field `name` attributes for nested data structures:
+
+```html
+<input name="user.name" value="John">
+<input name="user.address.city" value="NYC">
+<input name="user.address.zip" value="10001">
+```
+
+Produces:
+```javascript
+{
+  user: {
+    name: 'John',
+    address: {
+      city: 'NYC',
+      zip: '10001'
+    }
+  }
+}
+```
+
+**Checkbox Handling:**
+
+- **Single checkbox:** Returns `true` or `false`
+- **Checkbox group (multiple with same name):** Returns object with each value as key
+
+```html
+<!-- Single checkbox -->
+<input type="checkbox" name="subscribe" checked>
+<!-- Result: { subscribe: true } -->
+
+<!-- Checkbox group -->
+<input type="checkbox" name="features" value="darkmode" checked>
+<input type="checkbox" name="features" value="analytics">
+<input type="checkbox" name="features" value="beta" checked>
+<!-- Result: { features: { darkmode: true, analytics: false, beta: true } } -->
+```
+
+**Multiple Submit Buttons:**
+
+Access the clicked submit button to handle different actions:
+
+```html
+<button type="submit" data-action="save">Save</button>
+<button type="submit" data-action="draft">Save as Draft</button>
+```
+
+```javascript
+formManager.on('submit', async ({ data, $submitButton }) => {
+  const action = $submitButton?.dataset?.action;
+
+  if (action === 'draft') {
+    await saveDraft(data);
+    formManager.showSuccess('Draft saved!');
+  } else {
+    await saveAndPublish(data);
+    formManager.showSuccess('Published!');
+  }
+});
+```
+
+**Manual Ready Mode:**
+
+For forms that need async initialization (e.g., loading data from API):
+
+```javascript
+const formManager = new FormManager('#my-form', { autoReady: false });
+
+// Load data, then mark ready
+const userData = await fetchUserData();
+formManager.setData(userData);
+formManager.ready(); // Now form is interactive
+```
+
+**Configuration Options:**
+
+| Option | Default | Description |
+|--------|---------|-------------|
+| `autoReady` | `true` | Auto-transition to ready when DOM is ready |
+| `initialState` | `'ready'` | State after autoReady fires |
+| `allowResubmit` | `true` | Allow form resubmission after success |
+| `resetOnSuccess` | `false` | Clear fields after successful submission |
+| `warnOnUnsavedChanges` | `false` | Show browser warning when leaving with unsaved changes |
+| `submittingText` | `'Processing...'` | Text shown on submit button during submission |
+
+**Test Page:** Navigate to `/test/libraries/form-manager` to see FormManager in action with various configurations.
 
 ### Icons
 * Fontawesome

package/TODO.md

@@ -6,6 +6,10 @@ NEW TODO
 - FIx formmanager .getData() it keeps returning an empty object, make it work flawlessyly
 - It keeps testing whether there is a "." every time it reads or writes. just call the getNested and setNested functions and then check for the DOT inside those functions
 - form manager should NOT submit if the button that was clicked is disabled (class or attribute)
+- script that adds some helpful classes to the body or attributes to html maybe like
+  * data-device="mobile|tablet|desktop"
+  * data-browser="chrome|safari|firefox|edge|opera|other"
+  * data-os="windows|macos|linux|android|ios|other"
 
 Make an admin dashboard backend
 
@@ -94,8 +98,12 @@ REMAKE main/misc/embed-manager.html in UJ
 REMAKE the dashboard one in UJ
 FINISH redirec.js in UJ
 
-
-
+# Fix notifications
+* UJ 2.0 for a while was making a DUPLICATE notifaction in users/{uid}/notifications/{token} AND in notifications/{token}
+* We can SAFELY DELETE the users/{uid}/notifications collection
+* EX: https://console.firebase.google.com/project/replyify-app/firestore/databases/-default-/data/~2Fnotifications~2Fsubscriptions~2Fall
+* Also, there are residual notifications/subscriptions/all/{token} that need to be MIGRATED to the new format
+* EX: https://console.firebase.google.com/project/replyify-app/firestore/databases/-default-/data/~2Fnotifications~2Fsubscriptions~2Fall~2FczUMa9wW0n3FnjpKCL5Wet:APA91bFD9YpwBqtn0i6qVabxiNl1uqIl3Ka1ObNM9CWT5NjzjnlTnyCA7e0G3Y3GGzIEcJUPoDLnGBRP3xBob99EiWItKtOuWP3Sqb906zBYJGFENIyQOJIUw43tizN5lCSq6ICgVJsZ
 
 
 FIX THE settings like