@jsenv/navi 0.0.1

package/src/components/action_renderer.jsx

@@ -0,0 +1,136 @@
+/**
+ * TODO: when switching from one state to another we should preserve the dimensions to prevent layout shift
+ * the exact way to do this is not yet clear but I suspect something as follow:
+ *
+ *
+ * While content is loading we don't know (except if we are given an size)
+ * When reloading the content will be gone, we should keep a placeholder taking the same space
+ * When there is an error the error should take the same space as the content
+ * but be displayed on top
+ * (If error is bigger it can take more space? I guess so, maybe an overflow would be better to prevent layout shit again)
+ *
+ * And once we know the new content size ideally we could have some sort of transition
+ * (like an height transition from current height to new height)
+ *
+ * consider https://motion.dev/docs/react-layout-animations
+ *
+ * but might be too complexe for what we want.
+ * we want ability to transit from anything to anything, it's not a layout change
+ * it's more view transition but with a very simple behavior
+ *
+ * And certainly this https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API#pseudo-elements
+ *
+ */
+
+import { useErrorBoundary, useLayoutEffect } from "preact/hooks";
+import { getActionPrivateProperties } from "../action_private_properties.js";
+import { useActionStatus } from "../use_action_status.js";
+
+import.meta.css = /* css */ `
+  .action_error {
+    padding: 20px;
+    background: #fdd;
+    border: 1px solid red;
+    margin-top: 0;
+    margin-bottom: 20px;
+  }
+`;
+
+const renderIdleDefault = () => null;
+const renderLoadingDefault = () => null;
+const renderAbortedDefault = () => null;
+const renderErrorDefault = (error) => {
+  let routeErrorText = error && error.message ? error.message : error;
+  return <p className="action_error">An error occured: {routeErrorText}</p>;
+};
+const renderCompletedDefault = () => null;
+
+export const ActionRenderer = ({ action, children }) => {
+  const {
+    idle: renderIdle = renderIdleDefault,
+    loading: renderLoading = renderLoadingDefault,
+    aborted: renderAborted = renderAbortedDefault,
+    error: renderError = renderErrorDefault,
+    completed: renderCompleted,
+    always: renderAlways,
+  } = typeof children === "function" ? { completed: children } : children || {};
+  if (!action) {
+    throw new Error(
+      "ActionRenderer requires an action to render, but none was provided.",
+    );
+  }
+  const { idle, loading, aborted, error, data } = useActionStatus(action);
+  const UIRenderedPromise = useUIRenderedPromise(action);
+  const [errorBoundary, resetErrorBoundary] = useErrorBoundary();
+
+  // Mark this action as bound to UI components (has renderers)
+  // This tells the action system that errors should be caught and stored
+  // in the action's error state rather than bubbling up
+  useLayoutEffect(() => {
+    const { ui } = getActionPrivateProperties(action);
+    ui.hasRenderers = true;
+  }, [action]);
+
+  useLayoutEffect(() => {
+    resetErrorBoundary();
+  }, [action, loading, idle, resetErrorBoundary]);
+
+  useLayoutEffect(() => {
+    UIRenderedPromise.resolve();
+    return () => {
+      actionUIRenderedPromiseWeakMap.delete(action);
+    };
+  }, []);
+
+  // If renderAlways is provided, it wins and handles all rendering
+  if (renderAlways) {
+    return renderAlways({ idle, loading, aborted, error, data });
+  }
+
+  if (idle) {
+    return renderIdle(action);
+  }
+  if (errorBoundary) {
+    return renderError(errorBoundary, "ui_error", action);
+  }
+  if (error) {
+    return renderError(error, "action_error", action);
+  }
+  if (aborted) {
+    return renderAborted(action);
+  }
+  let renderCompletedSafe;
+  if (renderCompleted) {
+    renderCompletedSafe = renderCompleted;
+  } else {
+    const { ui } = getActionPrivateProperties(action);
+    if (ui.renderCompleted) {
+      renderCompletedSafe = ui.renderCompleted;
+    } else {
+      renderCompletedSafe = renderCompletedDefault;
+    }
+  }
+  if (loading) {
+    if (action.canDisplayOldData && data !== undefined) {
+      return renderCompletedSafe(data, action);
+    }
+    return renderLoading(action);
+  }
+
+  return renderCompletedSafe(data, action);
+};
+
+const actionUIRenderedPromiseWeakMap = new WeakMap();
+const useUIRenderedPromise = (route) => {
+  const actionUIRenderedPromise = actionUIRenderedPromiseWeakMap.get(route);
+  if (actionUIRenderedPromise) {
+    return actionUIRenderedPromise;
+  }
+  let resolve;
+  const promise = new Promise((res) => {
+    resolve = res;
+  });
+  promise.resolve = resolve;
+  actionUIRenderedPromiseWeakMap.set(route, promise);
+  return promise;
+};

package/src/components/collect_form_element_values.js

@@ -0,0 +1,79 @@
+export const collectFormElementValues = (element) => {
+  let formElements;
+  if (element.tagName === "FORM") {
+    formElements = element.elements;
+  } else {
+    // fieldset or anything else
+    formElements = element.querySelectorAll(
+      "input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button[name]:not([disabled])",
+    );
+  }
+
+  const values = {};
+  const checkboxArrayNameSet = new Set();
+  for (const formElement of formElements) {
+    if (formElement.type === "checkbox" && formElement.name) {
+      const name = formElement.name;
+      const endsWithBrackets = name.endsWith("[]");
+      if (endsWithBrackets) {
+        checkboxArrayNameSet.add(name);
+        values[name] = [];
+        continue;
+      }
+      const closestDataCheckboxList = formElement.closest(
+        "[data-checkbox-list]",
+      );
+      if (closestDataCheckboxList) {
+        checkboxArrayNameSet.add(name);
+        values[name] = [];
+      }
+    }
+  }
+
+  for (const formElement of formElements) {
+    const name = formElement.name;
+    if (!name) {
+      continue;
+    }
+    const value = getFormElementValue(formElement);
+    if (value === undefined) {
+      continue; // Skip unchecked checkboxes/radios
+    }
+    if (formElement.type === "checkbox" && checkboxArrayNameSet.has(name)) {
+      values[name].push(value);
+    } else {
+      values[name] = value;
+    }
+  }
+  return values;
+};
+
+const getFormElementValue = (formElement) => {
+  const { type, tagName } = formElement;
+
+  if (tagName === "SELECT") {
+    if (formElement.multiple) {
+      return Array.from(formElement.selectedOptions, (option) =>
+        getValue(option),
+      );
+    }
+    return formElement.value;
+  }
+
+  if (type === "checkbox" || type === "radio") {
+    return formElement.checked ? getValue(formElement) : undefined;
+  }
+
+  if (type === "file") {
+    return formElement.files; // Return FileList for special handling
+  }
+
+  return getValue(formElement);
+};
+
+const getValue = (formElement) => {
+  const hasDataFormValueAttribute = formElement.hasAttribute("data-form-value");
+  return hasDataFormValueAttribute
+    ? formElement.getAttribute("data-form-value")
+    : formElement.value;
+};

package/src/components/demos/0_button_demo.html

@@ -0,0 +1,155 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="data:," />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Button loading demo</title>
+  </head>
+  <body>
+    <div id="root" style="position: relative"></div>
+
+    <script type="module" jsenv-type="module/jsx">
+      import { render } from "preact";
+      import { useState } from "preact/hooks";
+      import {
+        // eslint-disable-next-line no-unused-vars
+        Button,
+        // eslint-disable-next-line no-unused-vars
+        Field,
+      } from "@jsenv/navi";
+
+      // eslint-disable-next-line no-unused-vars
+      const App = () => {
+        const [loading, setLoading] = useState(false);
+        const [loadingB, setLoadingB] = useState(false);
+        const [loadingC, setLoadingC] = useState(false);
+        const [loadingD, setLoadingD] = useState(false);
+
+        return (
+          <div>
+            <div style="display: flex; flex-direction: row; gap: 30px">
+              <div>
+                <p>
+                  <strong>Loading</strong>
+                </p>
+                <Button loading={loading}>Toggle</Button>
+                <br />
+                <button
+                  onClick={() => {
+                    setLoading(!loading);
+                  }}
+                >
+                  Toggle
+                </button>
+              </div>
+
+              <div>
+                <p>
+                  <strong>Loading (action)</strong>
+                </p>
+                <Button loading={loadingB} action={() => {}}>
+                  B
+                </Button>
+                <br /> <br />
+                <button
+                  onClick={() => {
+                    setLoadingB(!loadingB);
+                  }}
+                >
+                  Toggle
+                </button>
+              </div>
+
+              <div>
+                <p>
+                  <strong>Readonly</strong>
+                </p>
+                <Button loading={loadingC} readOnly>
+                  C
+                </Button>
+                <br />
+                <button data-readonly>C</button>
+                <br />
+                <br />
+                <button>
+                  <span
+                    onClick={() => {
+                      setLoadingC(!loadingC);
+                    }}
+                  >
+                    Toggle
+                  </span>
+                </button>
+              </div>
+
+              <div>
+                <p>
+                  <strong>Disabled</strong>
+                </p>
+                <Button loading={loadingD} disabled>
+                  D
+                </Button>
+                <br />
+                <button disabled>D</button>
+                <br /> <br />
+                <button>
+                  <span
+                    onClick={() => {
+                      setLoadingD(!loadingD);
+                    }}
+                  >
+                    Toggle
+                  </span>
+                </button>
+              </div>
+            </div>
+
+            <div style="display: flex; flex-direction: row; gap: 30px">
+              <div>
+                <p>
+                  <strong>Large button (anim speed shoud be consistent)</strong>
+                </p>
+                <Button loading={loading}>
+                  This button is quite large but loader speed should be same as
+                  small buttons
+                </Button>
+                <br />
+                <button
+                  onClick={() => {
+                    setLoading(!loading);
+                  }}
+                >
+                  Toggle
+                </button>
+              </div>
+            </div>
+
+            <div>
+              <div>
+                <p>
+                  <strong>Big borders</strong>
+                </p>
+                <Button loading={loadingC} borderWidth={10}>
+                  C
+                </Button>
+                <br /> <br />
+                <button>
+                  <span
+                    onClick={() => {
+                      setLoadingC(!loadingC);
+                    }}
+                  >
+                    Toggle
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        );
+      };
+
+      render(<App />, document.querySelector("#root"));
+    </script>
+  </body>
+</html>

package/src/components/demos/1_checkbox_demo.html

@@ -0,0 +1,257 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="data:," />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Checkbox demo</title>
+  </head>
+  <body>
+    <div id="root" style="position: relative"></div>
+
+    <script type="module" jsenv-type="module/jsx">
+      import { render } from "preact";
+      import { useState } from "preact/hooks";
+      import {
+        // eslint-disable-next-line no-unused-vars
+        Input,
+        // eslint-disable-next-line no-unused-vars
+        Field,
+      } from "@jsenv/navi";
+
+      // eslint-disable-next-line no-unused-vars
+      const App = () => {
+        const [loading, setLoading] = useState(false);
+        const [loadingB, setLoadingB] = useState(false);
+        const [loadingC, setLoadingC] = useState(false);
+        const [loadingD, setLoadingD] = useState(false);
+        const [loadingE, setLoadingE] = useState(false);
+        const [loadingF, setLoadingF] = useState(false);
+
+        return (
+          <div>
+            <div style="display: flex; flex-direction: row; gap: 30px">
+              <div>
+                <p>
+                  <strong>Loading</strong>
+                </p>
+
+                <Field
+                  input={
+                    <Input
+                      id="test"
+                      type="checkbox"
+                      name="colors"
+                      loading={loading}
+                    />
+                  }
+                  label="Coucou"
+                ></Field>
+
+                <button>
+                  <span
+                    onClick={() => {
+                      setLoading(!loading);
+                    }}
+                  >
+                    Toggle
+                  </span>
+                </button>
+
+                <div>
+                  <label>
+                    <input type="checkbox" name="colors" checked />
+                    Coucou
+                  </label>
+                </div>
+              </div>
+            </div>
+
+            <div>
+              <div>
+                <p>
+                  <strong>Loading with action</strong>
+                </p>
+
+                <Field
+                  input={
+                    <Input
+                      id="test"
+                      action={() => {}}
+                      type="checkbox"
+                      name="colors"
+                      loading={loadingB}
+                    />
+                  }
+                  label="Coucou"
+                ></Field>
+
+                <button>
+                  <span
+                    onClick={() => {
+                      setLoadingB(!loadingB);
+                    }}
+                  >
+                    Toggle
+                  </span>
+                </button>
+              </div>
+            </div>
+
+            <div>
+              <div>
+                <p>
+                  <strong>Read Only</strong>
+                </p>
+
+                <Field
+                  input={
+                    <Input
+                      id="test"
+                      readOnly
+                      type="checkbox"
+                      name="colors"
+                      loading={loadingC}
+                    />
+                  }
+                  label="C"
+                />
+
+                <button>
+                  <span
+                    onClick={() => {
+                      setLoadingC(!loadingC);
+                    }}
+                  >
+                    Toggle
+                  </span>
+                </button>
+
+                <div>
+                  <label>
+                    <input type="checkbox" name="colors" readonly />C
+                  </label>
+                </div>
+              </div>
+            </div>
+
+            <div>
+              <div>
+                <p>
+                  <strong>Read Only + checked</strong>
+                </p>
+
+                <Field
+                  input={
+                    <Input
+                      id="test"
+                      readOnly
+                      checked
+                      type="checkbox"
+                      name="colors"
+                      loading={loadingD}
+                    />
+                  }
+                  label="D"
+                />
+
+                <button>
+                  <span
+                    onClick={() => {
+                      setLoadingD(!loadingD);
+                    }}
+                  >
+                    Toggle
+                  </span>
+                </button>
+
+                <div>
+                  <label>
+                    <input type="checkbox" name="colors" readonly />D
+                  </label>
+                </div>
+              </div>
+            </div>
+
+            <div>
+              <div>
+                <p>
+                  <strong>Disabled</strong>
+                </p>
+
+                <Field
+                  input={
+                    <Input
+                      id="test"
+                      disabled
+                      type="checkbox"
+                      name="colors"
+                      loading={loadingE}
+                    />
+                  }
+                  label="E"
+                />
+
+                <button>
+                  <span
+                    onClick={() => {
+                      setLoadingE(!loadingE);
+                    }}
+                  >
+                    Toggle
+                  </span>
+                </button>
+
+                <div>
+                  <label>
+                    <input type="checkbox" name="colors" disabled />E
+                  </label>
+                </div>
+              </div>
+            </div>
+
+            <div>
+              <div>
+                <p>
+                  <strong>Disabled + checked</strong>
+                </p>
+
+                <Field
+                  input={
+                    <Input
+                      id="test"
+                      disabled
+                      checked
+                      type="checkbox"
+                      name="colors"
+                      loading={loadingF}
+                    />
+                  }
+                  label="Coucou"
+                />
+
+                <button>
+                  <span
+                    onClick={() => {
+                      setLoadingF(!loadingF);
+                    }}
+                  >
+                    Toggle
+                  </span>
+                </button>
+
+                <div>
+                  <label>
+                    <input type="checkbox" name="colors" disabled checked />F
+                  </label>
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+      };
+
+      render(<App />, document.querySelector("#root"));
+    </script>
+  </body>
+</html>