@jsenv/navi 0.0.1 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (139) hide show
  1. package/dist/jsenv_navi.js +22959 -0
  2. package/index.js +66 -16
  3. package/package.json +23 -11
  4. package/src/actions.js +50 -26
  5. package/src/browser_integration/browser_integration.js +31 -6
  6. package/src/browser_integration/via_history.js +42 -9
  7. package/src/components/action_execution/render_actionable_component.jsx +6 -4
  8. package/src/components/action_execution/use_action.js +51 -282
  9. package/src/components/action_execution/use_execute_action.js +106 -92
  10. package/src/components/action_execution/use_run_on_mount.js +9 -0
  11. package/src/components/action_renderer.jsx +21 -32
  12. package/src/components/demos/0_button_demo.html +574 -103
  13. package/src/components/demos/10_column_reordering_debug.html +277 -0
  14. package/src/components/demos/11_table_selection_debug.html +432 -0
  15. package/src/components/demos/1_checkbox_demo.html +579 -202
  16. package/src/components/demos/2_input_textual_demo.html +81 -138
  17. package/src/components/demos/3_radio_demo.html +0 -2
  18. package/src/components/demos/4_select_demo.html +19 -23
  19. package/src/components/demos/6_tablist_demo.html +77 -0
  20. package/src/components/demos/7_table_selection_demo.html +176 -0
  21. package/src/components/demos/8_table_fixed_headers_demo.html +584 -0
  22. package/src/components/demos/9_table_column_drag_demo.html +325 -0
  23. package/src/components/demos/action/0_button_demo.html +2 -4
  24. package/src/components/demos/action/1_input_text_demo.html +643 -222
  25. package/src/components/demos/action/3_details_demo.html +146 -115
  26. package/src/components/demos/action/4_input_checkbox_demo.html +442 -322
  27. package/src/components/demos/action/5_input_checkbox_state_demo.html +270 -0
  28. package/src/components/demos/action/6_checkbox_list_demo.html +304 -72
  29. package/src/components/demos/action/7_radio_list_demo.html +310 -170
  30. package/src/components/demos/action/{8_editable_text_demo.html → 8_editable_demo.html} +65 -76
  31. package/src/components/demos/action/9_link_demo.html +84 -62
  32. package/src/components/demos/ui_transition/0_action_renderer_ui_transition_demo.html +695 -0
  33. package/src/components/demos/ui_transition/1_nested_ui_transition_demo.html +429 -0
  34. package/src/components/demos/ui_transition/2_height_transition_test.html +295 -0
  35. package/src/components/details/details.jsx +62 -64
  36. package/src/components/edition/editable.jsx +186 -0
  37. package/src/components/field/README.md +247 -0
  38. package/src/components/{input → field}/button.jsx +151 -130
  39. package/src/components/field/checkbox_list.jsx +184 -0
  40. package/src/components/{collect_form_element_values.js → field/collect_form_element_values.js} +7 -4
  41. package/src/components/{input → field}/field_css.js +4 -1
  42. package/src/components/field/form.jsx +211 -0
  43. package/src/components/{input → field}/input.jsx +1 -0
  44. package/src/components/{input → field}/input_checkbox.jsx +132 -155
  45. package/src/components/{input → field}/input_radio.jsx +135 -46
  46. package/src/components/field/input_textual.jsx +418 -0
  47. package/src/components/field/label.jsx +32 -0
  48. package/src/components/field/radio_list.jsx +182 -0
  49. package/src/components/{input → field}/select.jsx +17 -32
  50. package/src/components/field/use_action_events.js +132 -0
  51. package/src/components/field/use_form_events.js +55 -0
  52. package/src/components/field/use_ui_state_controller.js +506 -0
  53. package/src/components/item_tracker/README.md +461 -0
  54. package/src/components/item_tracker/use_isolated_item_tracker.jsx +209 -0
  55. package/src/components/item_tracker/use_isolated_item_tracker_demo.html +148 -0
  56. package/src/components/item_tracker/use_isolated_item_tracker_demo.jsx +460 -0
  57. package/src/components/item_tracker/use_item_tracker.jsx +143 -0
  58. package/src/components/item_tracker/use_item_tracker_demo.html +207 -0
  59. package/src/components/item_tracker/use_item_tracker_demo.jsx +216 -0
  60. package/src/components/keyboard_shortcuts/active_keyboard_shortcuts.jsx +87 -0
  61. package/src/components/keyboard_shortcuts/aria_key_shortcuts.js +61 -0
  62. package/src/components/keyboard_shortcuts/keyboard_key_meta.js +17 -0
  63. package/src/components/keyboard_shortcuts/keyboard_shortcuts.js +371 -0
  64. package/src/components/link/link.jsx +65 -102
  65. package/src/components/link/link_with_icon.jsx +52 -0
  66. package/src/components/loader/loader_background.jsx +85 -64
  67. package/src/components/loader/rectangle_loading.jsx +38 -19
  68. package/src/components/route.jsx +8 -4
  69. package/src/components/selection/selection.jsx +1583 -0
  70. package/src/components/svg/font_sized_svg.jsx +45 -0
  71. package/src/components/svg/icon_and_text.jsx +21 -0
  72. package/src/components/svg/svg_mask_overlay.jsx +105 -0
  73. package/src/components/table/drag/table_drag.jsx +506 -0
  74. package/src/components/table/resize/table_resize.jsx +650 -0
  75. package/src/components/table/resize/table_size.js +43 -0
  76. package/src/components/table/selection/table_selection.js +106 -0
  77. package/src/components/table/selection/table_selection.jsx +203 -0
  78. package/src/components/table/sticky/sticky_group.js +354 -0
  79. package/src/components/table/sticky/table_sticky.js +25 -0
  80. package/src/components/table/sticky/table_sticky.jsx +501 -0
  81. package/src/components/table/table.jsx +721 -0
  82. package/src/components/table/table_css.js +211 -0
  83. package/src/components/table/table_ui.jsx +49 -0
  84. package/src/components/table/use_cells_and_columns.js +90 -0
  85. package/src/components/table/use_object_array_to_cells.js +46 -0
  86. package/src/components/table/z_indexes.js +23 -0
  87. package/src/components/tablist/tablist.jsx +99 -0
  88. package/src/components/text/overflow.jsx +15 -0
  89. package/src/components/text/text_and_count.jsx +28 -0
  90. package/src/components/ui_transition.jsx +128 -0
  91. package/src/components/use_auto_focus.js +58 -7
  92. package/src/components/use_batch_during_render.js +33 -0
  93. package/src/components/use_debounce_true.js +7 -7
  94. package/src/components/use_dependencies_diff.js +35 -0
  95. package/src/components/use_focus_group.js +4 -3
  96. package/src/components/use_initial_value.js +8 -34
  97. package/src/components/use_signal_sync.js +1 -1
  98. package/src/components/use_stable_callback.js +68 -0
  99. package/src/components/use_state_array.js +16 -9
  100. package/src/docs/actions.md +22 -0
  101. package/src/notes.md +33 -12
  102. package/src/route/route.js +97 -47
  103. package/src/store/resource_graph.js +2 -1
  104. package/src/store/tests/{resource_graph_dependencies.test.js → resource_graph_dependencies.test_manual.js} +13 -13
  105. package/src/utils/is_signal.js +20 -0
  106. package/src/utils/stringify_for_display.js +4 -23
  107. package/src/validation/constraints/confirm_constraint.js +14 -0
  108. package/src/validation/constraints/create_unique_value_constraint.js +27 -0
  109. package/src/validation/constraints/native_constraints.js +313 -0
  110. package/src/validation/constraints/readonly_constraint.js +36 -0
  111. package/src/validation/constraints/single_space_constraint.js +13 -0
  112. package/src/validation/custom_constraint_validation.js +599 -0
  113. package/src/validation/custom_message.js +18 -0
  114. package/src/validation/demos/browser_style.png +0 -0
  115. package/src/validation/demos/form_validation_demo.html +142 -0
  116. package/src/validation/demos/form_validation_demo_preact.html +87 -0
  117. package/src/validation/demos/form_validation_native_popover_demo.html +168 -0
  118. package/src/validation/demos/form_validation_vs_native_demo.html +172 -0
  119. package/src/validation/demos/validation_message_demo.html +203 -0
  120. package/src/validation/hooks/use_constraints.js +23 -0
  121. package/src/validation/hooks/use_custom_validation_ref.js +73 -0
  122. package/src/validation/hooks/use_validation_message.js +19 -0
  123. package/src/validation/validation_message.js +741 -0
  124. package/src/components/editable_text/editable_text.jsx +0 -96
  125. package/src/components/form.jsx +0 -144
  126. package/src/components/input/checkbox_list.jsx +0 -294
  127. package/src/components/input/field.jsx +0 -61
  128. package/src/components/input/input_textual.jsx +0 -338
  129. package/src/components/input/radio_list.jsx +0 -283
  130. package/src/components/input/use_form_event.js +0 -20
  131. package/src/components/input/use_on_change.js +0 -12
  132. package/src/components/selection/selection.js +0 -5
  133. package/src/components/selection/selection_context.jsx +0 -262
  134. package/src/components/shortcut/shortcut_context.jsx +0 -390
  135. package/src/components/use_action_events.js +0 -37
  136. package/src/utils/iterable_weak_set.js +0 -62
  137. /package/src/components/demos/action/{11_nested_shortcuts_demo.html → 11_nested_shortcuts_demo.xhtml} +0 -0
  138. /package/src/components/{shortcut → keyboard_shortcuts}/os.js +0 -0
  139. /package/src/route/{route.test.html → route.xtest.html} +0 -0
package/src/components/demos/action/5_input_checkbox_state_demo.html ADDED
@@ -0,0 +1,270 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" href="data:," />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Input Checkbox State Demo</title>
8
+ </head>
9
+ <body>
10
+ <div id="root" style="position: relative"></div>
11
+
12
+ <script type="module" jsenv-type="module/jsx">
13
+ import { render } from "preact";
14
+ import { useState } from "preact/hooks";
15
+ import {
16
+ // eslint-disable-next-line no-unused-vars
17
+ Button,
18
+ // eslint-disable-next-line no-unused-vars
19
+ Form,
20
+ // eslint-disable-next-line no-unused-vars
21
+ Label,
22
+ // eslint-disable-next-line no-unused-vars
23
+ Checkbox,
24
+ } from "@jsenv/navi";
25
+
26
+ // eslint-disable-next-line no-unused-vars
27
+ const App = () => {
28
+ return (
29
+ <div style="display: flex; flex-direction: column; gap: 40px">
30
+ <SingleCheckboxStateDemo />
31
+ </div>
32
+ );
33
+ };
34
+
35
+ // eslint-disable-next-line no-unused-vars
36
+ const SingleCheckboxStateDemo = () => {
37
+ // DATA STATE - This represents the actual data/server state
38
+ const [isEnabledInState, setIsEnabledInState] = useState(true);
39
+ const [checkboxBgColor, setCheckboxBgColor] = useState("#2196F3");
40
+
41
+ // UI FORM STATE - This represents the current form state (may differ from data state)
42
+ const [uiIsEnabled, setUiIsEnabled] = useState(isEnabledInState);
43
+
44
+ // Form submission feedback
45
+ const [isSubmitting, setIsSubmitting] = useState(false);
46
+ const [submitMessage, setSubmitMessage] = useState("");
47
+ const [submitError, setSubmitError] = useState("");
48
+ const [forceError, setForceError] = useState(false);
49
+
50
+ // Action that simulates submitting form data (takes 1s)
51
+ const submitForm = async ({ notifications }) => {
52
+ const isChecked = notifications === "on"; // Form checkbox value
53
+
54
+ setIsSubmitting(true);
55
+ setSubmitError("");
56
+ setSubmitMessage(
57
+ `Syncing notification setting: ${isChecked ? "enabled" : "disabled"}...`,
58
+ );
59
+
60
+ try {
61
+ console.log("Submitting form data:", { notifications: isChecked });
62
+ await new Promise((resolve) => setTimeout(resolve, 1000));
63
+
64
+ // Simulate error if checkbox is checked
65
+ if (forceError) {
66
+ throw new Error(
67
+ "Simulated server error: Failed to update notification preferences",
68
+ );
69
+ }
70
+
71
+ // Update the data state to match the form submission
72
+ setIsEnabledInState(isChecked);
73
+
74
+ setSubmitMessage(
75
+ `✅ Successfully synced: notifications ${isChecked ? "enabled" : "disabled"}`,
76
+ );
77
+ console.log("Data state updated from form:", isChecked);
78
+ } catch (error) {
79
+ setSubmitError(error.message);
80
+ setSubmitMessage("");
81
+ } finally {
82
+ setIsSubmitting(false);
83
+ }
84
+ };
85
+
86
+ // Get what the reset would sync to
87
+ const getResetValue = () => {
88
+ return isEnabledInState ? "checked" : "unchecked";
89
+ };
90
+
91
+ // Get what the submit would send
92
+ const getSubmitValue = () => {
93
+ return uiIsEnabled ? "checked" : "unchecked";
94
+ };
95
+
96
+ return (
97
+ <div style="border: 2px solid #ddd; padding: 20px; border-radius: 8px; background: #f9f9f9;">
98
+ <h2>Single Checkbox State ↔ UI Form Demo</h2>
99
+
100
+ <div style="display: flex; gap: 20px; margin: 20px 0;">
101
+ {/* DATA STATE SECTION */}
102
+ <div style="flex: 1; padding: 15px; background: #fff; border-radius: 6px; border: 1px solid #ccc;">
103
+ <h3 style="margin: 0 0 15px 0; color: #2196F3;">
104
+ 🗄️ Data State
105
+ </h3>
106
+ <p style="margin: 0 0 15px 0; font-size: 14px; color: #666;">
107
+ Direct manipulation of the data source
108
+ </p>
109
+
110
+ <div style="padding: 15px; border: 1px solid #eee; border-radius: 4px; background: #fafafa;">
111
+ <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 15px;">
112
+ <label style="display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; cursor: pointer;">
113
+ <input
114
+ type="checkbox"
115
+ checked={isEnabledInState}
116
+ onChange={(e) => setIsEnabledInState(e.target.checked)}
117
+ style="transform: scale(1.2);"
118
+ />
119
+ 🔔 Notifications{" "}
120
+ {isEnabledInState ? "ENABLED" : "DISABLED"}
121
+ </label>
122
+ </div>
123
+
124
+ <div style="margin-bottom: 15px;">
125
+ <label style="display: flex; align-items: center; gap: 8px; font-size: 14px;">
126
+ <span style="font-weight: 500;">UI Checkbox Color:</span>
127
+ <select
128
+ value={checkboxBgColor}
129
+ onChange={(e) => setCheckboxBgColor(e.target.value)}
130
+ style="padding: 4px 8px; border: 1px solid #ccc; border-radius: 3px; font-size: 12px;"
131
+ >
132
+ <option value="#2196F3">Blue</option>
133
+ <option value="#4CAF50">Green</option>
134
+ <option value="#FF9800">Orange</option>
135
+ <option value="#9C27B0">Purple</option>
136
+ <option value="#F44336">Red</option>
137
+ <option value="#607D8B">Blue Grey</option>
138
+ <option value="#795548">Brown</option>
139
+ <option value="#E91E63">Pink</option>
140
+ </select>
141
+ <div
142
+ style={{
143
+ width: "16px",
144
+ height: "16px",
145
+ backgroundColor: checkboxBgColor,
146
+ borderRadius: "2px",
147
+ border: "1px solid #ccc",
148
+ }}
149
+ title="Current color preview"
150
+ ></div>
151
+ </label>
152
+ </div>
153
+
154
+ <div style="font-size: 12px; color: #666; margin-top: 8px;">
155
+ Click the checkbox above to toggle the data state directly
156
+ </div>
157
+ </div>
158
+ </div>
159
+
160
+ {/* UI FORM SECTION */}
161
+ <div style="flex: 1; padding: 15px; background: #fff; border-radius: 6px; border: 1px solid #ccc;">
162
+ <h3 style="margin: 0 0 15px 0; color: #FF9800;">📝 UI Form</h3>
163
+ <p style="margin: 0 0 15px 0; font-size: 14px; color: #666;">
164
+ Checkbox interface for user interaction
165
+ </p>
166
+
167
+ <Form action={submitForm}>
168
+ <fieldset style="border: 1px solid #ddd; padding: 15px; border-radius: 4px;">
169
+ <legend>Notification Settings:</legend>
170
+
171
+ <Label style="display: flex; align-items: center; gap: 10px; font-size: 16px; cursor: pointer;">
172
+ <Checkbox
173
+ name="notifications"
174
+ checked={isEnabledInState}
175
+ onUIStateChange={(uiState) =>
176
+ setUiIsEnabled(Boolean(uiState))
177
+ }
178
+ accentColor={checkboxBgColor}
179
+ />
180
+ 🔔 Enable push notifications
181
+ </Label>
182
+ </fieldset>
183
+
184
+ {/* Error simulation checkbox */}
185
+ <div style="margin: 10px 0; padding: 8px; background: #ffebee; border-radius: 4px; border: 1px solid #ffcdd2;">
186
+ <label style="display: flex; align-items: center; gap: 8px; font-size: 12px; color: #d32f2f;">
187
+ <input
188
+ type="checkbox"
189
+ checked={forceError}
190
+ onChange={(e) => setForceError(e.target.checked)}
191
+ style="margin: 0;"
192
+ />
193
+ 🔧 Force submission error (for testing)
194
+ </label>
195
+ </div>
196
+
197
+ {/* Submission feedback messages */}
198
+ {(isSubmitting || submitMessage || submitError) && (
199
+ <div style="margin: 10px 0; padding: 10px; border-radius: 4px; font-size: 14px;">
200
+ {isSubmitting && (
201
+ <div style="color: #1976d2; background: #e3f2fd; padding: 8px; border-radius: 3px; border-left: 3px solid #1976d2;">
202
+ 🔄 {submitMessage}
203
+ </div>
204
+ )}
205
+ {!isSubmitting && submitMessage && (
206
+ <div style="color: #388e3c; background: #e8f5e8; padding: 8px; border-radius: 3px; border-left: 3px solid #388e3c;">
207
+ {submitMessage}
208
+ </div>
209
+ )}
210
+ {submitError && (
211
+ <div style="color: #d32f2f; background: #ffebee; padding: 8px; border-radius: 3px; border-left: 3px solid #d32f2f;">
212
+ ❌ {submitError}
213
+ </div>
214
+ )}
215
+ </div>
216
+ )}
217
+
218
+ <div style="margin-top: 15px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;">
219
+ <Button type="submit" disabled={isSubmitting}>
220
+ {isSubmitting ? "⏳ Submitting..." : "📤 Submit Form"}{" "}
221
+ {!isSubmitting && (
222
+ <span style="font-size: 11px; opacity: 0.7;">
223
+ ({getSubmitValue()})
224
+ </span>
225
+ )}
226
+ </Button>
227
+ <Button type="reset">
228
+ 🔄 Reset to State
229
+ <span style="font-size: 11px; opacity: 0.7;">
230
+ ({getResetValue()})
231
+ </span>
232
+ </Button>
233
+ </div>
234
+ </Form>
235
+ </div>
236
+ </div>
237
+
238
+ <div style="background: #f0f8ff; padding: 15px; border-radius: 6px; margin: 20px 0; border-left: 4px solid #2196F3;">
239
+ <h4 style="margin: 0 0 10px 0;">How it works:</h4>
240
+ <ul style="margin: 0; padding-left: 20px; font-size: 14px;">
241
+ <li>
242
+ <strong>Data State</strong>: The actual notification setting
243
+ with direct toggle button
244
+ </li>
245
+ <li>
246
+ <strong>UI Form</strong>: Checkbox interface that can differ
247
+ from the data state
248
+ </li>
249
+ <li>
250
+ <strong>Submit</strong>: Updates data state to match the form
251
+ checkbox selection
252
+ </li>
253
+ <li>
254
+ <strong>Reset</strong>: Syncs form checkbox back to current
255
+ data state
256
+ </li>
257
+ <li>
258
+ <strong>Button Labels</strong>: Show exactly what will be
259
+ submitted or reset to (checked/unchecked)
260
+ </li>
261
+ </ul>
262
+ </div>
263
+ </div>
264
+ );
265
+ };
266
+
267
+ render(<App />, document.querySelector("#root"));
268
+ </script>
269
+ </body>
270
+ </html>
package/src/components/demos/action/6_checkbox_list_demo.html CHANGED
@@ -11,6 +11,7 @@
11
11
 
12
12
  <script type="module" jsenv-type="module/jsx">
13
13
  import { render } from "preact";
14
+ import { useState } from "preact/hooks";
14
15
  import {
15
16
  // eslint-disable-next-line no-unused-vars
16
17
  Button,
@@ -18,86 +19,317 @@
18
19
  Form,
19
20
  // eslint-disable-next-line no-unused-vars
20
21
  CheckboxList,
22
+ // eslint-disable-next-line no-unused-vars
23
+ Label,
24
+ // eslint-disable-next-line no-unused-vars
25
+ Checkbox,
21
26
  } from "@jsenv/navi";
22
27
 
23
28
  // eslint-disable-next-line no-unused-vars
24
29
  const App = () => {
25
30
  return (
26
- <div style="display: flex; flex-direction: row; gap: 30px">
27
- <div>
28
- <p>
29
- <strong>Action + log after 1s</strong>
30
- </p>
31
- <CheckboxList
32
- name="colors"
33
- label="Select your favorite colors:"
34
- value={["red", "blue"]}
35
- action={async ({ colors }) => {
36
- await new Promise((resolve) => setTimeout(resolve, 1_000));
37
- console.log(`Colors selected: ${JSON.stringify(colors)}`);
38
- }}
39
- >
40
- {[
41
- { label: "Red", value: "red" },
42
- { label: "Blue", value: "blue" },
43
- { label: "Green", value: "green" },
44
- ]}
45
- </CheckboxList>
46
- </div>
31
+ <div style="display: flex; flex-direction: column; gap: 40px">
32
+ <DynamicCheckboxListDemo />
33
+ <div style="display: flex; flex-direction: row; gap: 30px"></div>
34
+ </div>
35
+ );
36
+ };
37
+
38
+ // eslint-disable-next-line no-unused-vars
39
+ const DynamicCheckboxListDemo = () => {
40
+ // Available color choices with their selection state
41
+ const [colorChoices, setColorChoices] = useState([
42
+ { id: 1, color: "red", selected: true },
43
+ { id: 2, color: "blue", selected: true },
44
+ { id: 3, color: "green", selected: false },
45
+ ]);
46
+
47
+ // Derived state: currently selected colors in data state
48
+
49
+ const selectedColors = colorChoices
50
+ .filter((choice) => choice.selected)
51
+ .map((choice) => choice.color);
52
+
53
+ // UI FORM STATE - This represents the current form state (may differ from data state)
54
+ const [uiSelectedColors, setUiSelectedColors] =
55
+ useState(selectedColors);
56
+
57
+ // Next ID for new colors
58
+ const [nextId, setNextId] = useState(4);
59
+
60
+ // Form submission feedback
61
+ const [isSubmitting, setIsSubmitting] = useState(false);
62
+ const [submitMessage, setSubmitMessage] = useState("");
63
+ const [submitError, setSubmitError] = useState("");
64
+ const [forceError, setForceError] = useState(false);
65
+
66
+ // Random colors pool
67
+ const randomColors = [
68
+ "purple",
69
+ "orange",
70
+ "yellow",
71
+ "pink",
72
+ "cyan",
73
+ "magenta",
74
+ "lime",
75
+ "indigo",
76
+ "coral",
77
+ "teal",
78
+ "gold",
79
+ "silver",
80
+ "navy",
81
+ "maroon",
82
+ ];
83
+
84
+ // Action that simulates submitting form data (takes 1s)
85
+ const submitForm = async ({ colors }) => {
86
+ setIsSubmitting(true);
87
+ setSubmitError("");
88
+ setSubmitMessage(
89
+ `Syncing colors: ${colors?.length ? colors.join(", ") : "none"}...`,
90
+ );
91
+
92
+ try {
93
+ console.log("Submitting form data:", colors);
94
+ await new Promise((resolve) => setTimeout(resolve, 1000000));
95
+
96
+ // Simulate error if checkbox is checked
97
+ if (forceError) {
98
+ throw new Error(
99
+ "Simulated server error: Failed to update color preferences",
100
+ );
101
+ }
102
+
103
+ // Update the data state to match the form submission
104
+ setColorChoices((prev) =>
105
+ prev.map((choice) => ({
106
+ ...choice,
107
+ selected: colors?.includes(choice.color) || false,
108
+ })),
109
+ );
110
+
111
+ setSubmitMessage(
112
+ `✅ Successfully synced: ${colors?.length ? colors.join(", ") : "none"}`,
113
+ );
114
+ console.log("Data state updated from form:", colors);
115
+ } catch (error) {
116
+ setSubmitError(error.message);
117
+ setSubmitMessage("");
118
+ } finally {
119
+ setIsSubmitting(false);
120
+ }
121
+ };
122
+
123
+ // Add a new color to the data state
124
+ const addColorToState = (color) => {
125
+ setColorChoices((prev) => [
126
+ ...prev,
127
+ { id: nextId, color, selected: false },
128
+ ]);
129
+ setNextId((prev) => prev + 1);
130
+ };
131
+
132
+ // Remove a color from the data state
133
+ const removeColorFromState = (colorId) => {
134
+ setColorChoices((prev) =>
135
+ prev.filter((choice) => choice.id !== colorId),
136
+ );
137
+ };
138
+
139
+ // Toggle selection state in the data state
140
+ const toggleColorInState = (colorId) => {
141
+ setColorChoices((prev) =>
142
+ prev.map((choice) =>
143
+ choice.id === colorId
144
+ ? { ...choice, selected: !choice.selected }
145
+ : choice,
146
+ ),
147
+ );
148
+ };
149
+
150
+ // Get the colors that reset would sync to
151
+ const getResetColors = () => {
152
+ return colorChoices
153
+ .filter((choice) => choice.selected)
154
+ .map((choice) => choice.color);
155
+ }; // Add a random color choice to the data state
156
+ const addRandomColor = () => {
157
+ const availableColors = randomColors.filter(
158
+ (color) => !colorChoices.some((choice) => choice.color === color),
159
+ );
160
+ if (availableColors.length > 0) {
161
+ const randomColor =
162
+ availableColors[
163
+ Math.floor(Math.random() * availableColors.length)
164
+ ];
165
+ addColorToState(randomColor);
166
+ }
167
+ };
168
+
169
+ return (
170
+ <div style="border: 2px solid #ddd; padding: 20px; border-radius: 8px; background: #f9f9f9;">
171
+ <h2>State ↔ UI Form Demo</h2>
172
+
173
+ <div style="display: flex; gap: 20px; margin: 20px 0;">
174
+ {/* DATA STATE SECTION */}
175
+ <div style="flex: 1; padding: 15px; background: #fff; border-radius: 6px; border: 1px solid #ccc;">
176
+ <h3 style="margin: 0 0 15px 0; color: #2196F3;">
177
+ 🗄️ Data State
178
+ </h3>
179
+ <p style="margin: 0 0 15px 0; font-size: 14px; color: #666;">
180
+ Direct manipulation of the data source
181
+ </p>
182
+
183
+ <div style="margin-bottom: 15px;">
184
+ <button
185
+ onClick={addRandomColor}
186
+ style="padding: 6px 12px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; margin-right: 8px;"
187
+ >
188
+ + Add Random Color
189
+ </button>
190
+ </div>
191
+
192
+ <div style="display: flex; flex-direction: column; gap: 8px;">
193
+ {colorChoices.map(({ id, color, selected }) => (
194
+ <div
195
+ key={id}
196
+ style="display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid #eee; border-radius: 3px; background: #fafafa;"
197
+ >
198
+ <span style="flex: 1; font-size: 14px;">
199
+ {color.charAt(0).toUpperCase() + color.slice(1)}
200
+ </span>
201
+
202
+ <button
203
+ onClick={() => toggleColorInState(id)}
204
+ style={{
205
+ padding: "4px 8px",
206
+ fontSize: "11px",
207
+ background: selected ? "#4CAF50" : "#ccc",
208
+ color: "white",
209
+ border: "none",
210
+ borderRadius: "3px",
211
+ cursor: "pointer",
212
+ minWidth: "60px",
213
+ }}
214
+ >
215
+ {selected ? "Selected" : "Not Selected"}
216
+ </button>
217
+
218
+ <button
219
+ onClick={() => removeColorFromState(id)}
220
+ style="padding: 4px 6px; background: #f44336; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 11px;"
221
+ title="Remove this color"
222
+ >
223
+ 🗑
224
+ </button>
225
+ </div>
226
+ ))}
227
+ </div>
228
+ </div>
229
+
230
+ {/* UI FORM SECTION */}
231
+ <div style="flex: 1; padding: 15px; background: #fff; border-radius: 6px; border: 1px solid #ccc;">
232
+ <h3 style="margin: 0 0 15px 0; color: #FF9800;">📝 UI Form</h3>
233
+ <p style="margin: 0 0 15px 0; font-size: 14px; color: #666;">
234
+ Checkbox interface for user interaction
235
+ </p>
236
+
237
+ <Form action={submitForm}>
238
+ <fieldset style="border: 1px solid #ddd; padding: 10px; border-radius: 4px;">
239
+ <legend>Select Colors:</legend>
240
+ <CheckboxList
241
+ name="colors"
242
+ onUIStateChange={(colors) => {
243
+ setUiSelectedColors(colors);
244
+ }}
245
+ >
246
+ {colorChoices.map(({ id, color }) => (
247
+ <Label key={id} style="display: block; margin: 5px 0;">
248
+ {color.charAt(0).toUpperCase() + color.slice(1)}
249
+ <Checkbox
250
+ value={color}
251
+ checked={selectedColors.includes(color)}
252
+ />
253
+ </Label>
254
+ ))}
255
+ </CheckboxList>
256
+ </fieldset>
257
+
258
+ {/* Error simulation checkbox */}
259
+ <div style="margin: 10px 0; padding: 8px; background: #ffebee; border-radius: 4px; border: 1px solid #ffcdd2;">
260
+ <label style="display: flex; align-items: center; gap: 8px; font-size: 12px; color: #d32f2f;">
261
+ <input
262
+ type="checkbox"
263
+ checked={forceError}
264
+ onChange={(e) => setForceError(e.target.checked)}
265
+ style="margin: 0;"
266
+ />
267
+ 🔧 Force submission error (for testing)
268
+ </label>
269
+ </div>
270
+
271
+ {/* Submission feedback messages */}
272
+ {(isSubmitting || submitMessage || submitError) && (
273
+ <div style="margin: 10px 0; padding: 10px; border-radius: 4px; font-size: 14px;">
274
+ {isSubmitting && (
275
+ <div style="color: #1976d2; background: #e3f2fd; padding: 8px; border-radius: 3px; border-left: 3px solid #1976d2;">
276
+ 🔄 {submitMessage}
277
+ </div>
278
+ )}
279
+ {!isSubmitting && submitMessage && (
280
+ <div style="color: #388e3c; background: #e8f5e8; padding: 8px; border-radius: 3px; border-left: 3px solid #388e3c;">
281
+ {submitMessage}
282
+ </div>
283
+ )}
284
+ {submitError && (
285
+ <div style="color: #d32f2f; background: #ffebee; padding: 8px; border-radius: 3px; border-left: 3px solid #d32f2f;">
286
+ ❌ {submitError}
287
+ </div>
288
+ )}
289
+ </div>
290
+ )}
47
291
 
48
- <div>
49
- <p>
50
- <strong>Form + alert after 1s</strong>
51
- </p>
52
- <Form
53
- action={async ({ colors }) => {
54
- await new Promise((resolve) => setTimeout(resolve, 1_000));
55
- // eslint-disable-next-line no-alert
56
- window.alert(`Colors selected: ${JSON.stringify(colors)}`);
57
- }}
58
- >
59
- <CheckboxList
60
- id="form_alert_1"
61
- name="colors"
62
- label="Select your favorite colors:"
63
- value={["blue"]}
64
- >
65
- {[
66
- { label: "Red", id: "red", value: "red" },
67
- { label: "Blue", id: "blue", value: "blue" },
68
- { label: "Green", id: "green", value: "green" },
69
- ]}
70
- </CheckboxList>
71
-
72
- <Button type="submit">Submit</Button>
73
- <Button type="reset">Reset</Button>
74
- </Form>
292
+ <div style="margin-top: 15px; display: flex; align-items: flex-start; flex-direction: column; gap: 8px;">
293
+ <Button type="submit" disabled={isSubmitting}>
294
+ {isSubmitting ? "⏳ Submitting..." : "📤 Submit Form"}{" "}
295
+ {!isSubmitting && uiSelectedColors?.length > 0 && (
296
+ <span style="font-size: 11px; opacity: 0.7;">
297
+ ({uiSelectedColors.join(", ")})
298
+ </span>
299
+ )}
300
+ </Button>
301
+ <Button type="reset">
302
+ 🔄 Reset to State{" "}
303
+ {getResetColors().length > 0 && (
304
+ <span style="font-size: 11px; opacity: 0.7;">
305
+ ({getResetColors().join(", ")})
306
+ </span>
307
+ )}
308
+ </Button>
309
+ </div>
310
+ </Form>
311
+ </div>
75
312
  </div>
76
313
 
77
- <div>
78
- <p>
79
- <strong>Form + throw after 1s</strong>
80
- </p>
81
- <Form
82
- action={async ({ colors }) => {
83
- await new Promise((resolve) => setTimeout(resolve, 1_000));
84
- throw new Error(`Colors selected: ${JSON.stringify(colors)}`);
85
- }}
86
- >
87
- <CheckboxList
88
- label="Select your favorite colors:"
89
- name="colors"
90
- value={["red", "blue"]}
91
- >
92
- {[
93
- { label: "Red", value: "red" },
94
- { label: "Blue", value: "blue" },
95
- { label: "Green", value: "green" },
96
- ]}
97
- </CheckboxList>
98
- <Button type="submit">Submit</Button>
99
- <Button type="reset">Reset</Button>
100
- </Form>
314
+ <div style="background: #f0f8ff; padding: 15px; border-radius: 6px; margin: 20px 0; border-left: 4px solid #2196F3;">
315
+ <h4 style="margin: 0 0 10px 0;">How it works:</h4>
316
+ <ul style="margin: 0; padding-left: 20px; font-size: 14px;">
317
+ <li>
318
+ <strong>Data State</strong>: The actual data with direct
319
+ manipulation buttons
320
+ </li>
321
+ <li>
322
+ <strong>UI Form</strong>: Checkbox interface that can differ
323
+ from the data state
324
+ </li>
325
+ <li>
326
+ <strong>Submit</strong>: Updates data state to match the form
327
+ selections
328
+ </li>
329
+ <li>
330
+ <strong>Reset</strong>: Syncs form back to current data state
331
+ </li>
332
+ </ul>
101
333
  </div>
102
334
  </div>
103
335
  );