@jsenv/navi 0.0.1 → 0.1.0

package/src/components/editable_text/editable_text.jsx

@@ -1,96 +0,0 @@
-import { forwardRef } from "preact/compat";
-import {
-  useCallback,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from "preact/hooks";
-import { Input } from "../input/input.jsx";
-
-export const useEditableController = () => {
-  const [editable, editableSetter] = useState(null);
-  const startEditing = useCallback(({ focusVisible } = {}) => {
-    editableSetter({
-      focusVisible,
-    });
-  }, []);
-  const stopEditing = useCallback(() => {
-    editableSetter(null);
-  }, []);
-
-  const prevEditableRef = useRef(editable);
-  const editableJustEnded = prevEditableRef.current && !editable;
-  prevEditableRef.current = editable;
-
-  return { editable, startEditing, stopEditing, editableJustEnded };
-};
-
-export const EditableText = forwardRef((props, ref) => {
-  let { children, action, editable, value, valueSignal, onEditEnd, ...rest } =
-    props;
-  if (import.meta.DEV && !action) {
-    console.warn(`EditableText requires an action prop`);
-  }
-
-  const innerRef = useRef();
-  useImperativeHandle(ref, () => innerRef.current);
-
-  if (valueSignal) {
-    value = valueSignal.value;
-  }
-
-  const editablePreviousRef = useRef(editable);
-  const valueWhenEditStartRef = useRef(editable ? value : undefined);
-  if (editablePreviousRef.current !== editable) {
-    if (editable) {
-      valueWhenEditStartRef.current = value;
-    }
-    editablePreviousRef.current = editable;
-  }
-
-  return (
-    <>
-      <div style={{ display: editable ? "none" : "inline-flex", flexGrow: 1 }}>
-        {children || <span>{value}</span>}
-      </div>
-      {editable && (
-        <Input
-          autoFocus
-          autoFocusVisible
-          autoSelect
-          required
-          cancelOnEscape
-          cancelOnBlurInvalid
-          onCancel={(e) => {
-            if (valueSignal) {
-              valueSignal.value = valueWhenEditStartRef.current;
-            }
-            onEditEnd({
-              cancelled: true,
-              event: e,
-            });
-          }}
-          onBlur={(e) => {
-            if (e.target.value === valueWhenEditStartRef.current) {
-              onEditEnd({
-                cancelled: true,
-                event: e,
-              });
-            }
-          }}
-          action={action}
-          onActionEnd={(e) => {
-            onEditEnd({
-              success: true,
-              event: e,
-            });
-          }}
-          ref={innerRef}
-          value={value}
-          valueSignal={valueSignal}
-          {...rest}
-        />
-      )}
-    </>
-  );
-});

package/src/components/form.jsx

@@ -1,144 +0,0 @@
-/**
- *
- * Here we want the same behaviour as web standards:
- *
- * 1. When submitting the form URL does not change
- * 2. When form submission id done user is redirected (by default the current one)
- *    (we can configure this using target)
- *    So for example user might be reidrect to a page with the resource he just created
- *    I could create an example where we would put a link on the page to let user see what he created
- *    but by default user stays on the form allowing to create multiple resources at once
- *    And an other where he is redirected to the resource he created
- * 3. If form submission fails ideally we should display this somewhere on the UI
- *    right now it's just logged to the console I need to see how we can achieve this
- */
-
-import { requestAction, useConstraints } from "@jsenv/validation";
-import { forwardRef } from "preact/compat";
-import { useImperativeHandle, useRef, useState } from "preact/hooks";
-import { FormContext } from "./action_execution/form_context.js";
-import { renderActionableComponent } from "./action_execution/render_actionable_component.jsx";
-import { useFormActionBoundToFormParams } from "./action_execution/use_action.js";
-import { useExecuteAction } from "./action_execution/use_execute_action.js";
-import { collectFormElementValues } from "./collect_form_element_values.js";
-import { useActionEvents } from "./use_action_events.js";
-
-export const Form = forwardRef((props, ref) => {
-  return renderActionableComponent(props, ref, {
-    Basic: FormBasic,
-    WithAction: FormWithAction,
-  });
-});
-
-const FormBasic = forwardRef((props, ref) => {
-  return <form ref={ref} {...props} />;
-});
-
-const FormWithAction = forwardRef((props, ref) => {
-  let {
-    action,
-    method,
-    readOnly = false,
-    allowConcurrentActions: formAllowConcurrentActions = false,
-    actionErrorEffect = "show_validation_message", // "show_validation_message" or "throw"
-    onActionPrevented,
-    onActionStart,
-    onActionAbort,
-    onActionError,
-    onActionEnd,
-    children,
-    ...rest
-  } = props;
-
-  const innerRef = useRef();
-  useImperativeHandle(ref, () => innerRef.current);
-  // instantiation validation to:
-  // - receive "requestsubmit" custom event ensure submit is prevented
-  // (and also execute action without validation if form.submit() is ever called)
-  useConstraints(innerRef, []);
-
-  const [boundAction, formParamsSignal, setFormParams] =
-    useFormActionBoundToFormParams(action);
-  const [formActionRequester, setFormActionRequester] = useState(null);
-  const [formIsBusy, setFormIsBusy] = useState(false);
-  const [formActionError, setFormActionError] = useState(null);
-  const [formActionAborted, setFormActionAborted] = useState(false);
-  const executeAction = useExecuteAction(innerRef, {
-    errorEffect: actionErrorEffect,
-  });
-  const formIsReadOnly =
-    readOnly || (formIsBusy && !formAllowConcurrentActions);
-
-  useActionEvents(innerRef, {
-    onPrevented: onActionPrevented,
-    onAction: (actionEvent) => {
-      const form = innerRef.current;
-      const formElementValues = collectFormElementValues(form);
-      setFormParams(formElementValues);
-
-      setFormActionRequester(actionEvent.detail.requester);
-      executeAction(actionEvent);
-    },
-    onStart: (e) => {
-      setFormIsBusy(true);
-      setFormActionError(null);
-      setFormActionAborted(false);
-      onActionStart?.(e);
-    },
-    onAbort: (e) => {
-      setFormIsBusy(false);
-      setFormActionAborted(true);
-      onActionAbort?.(e);
-    },
-    onError: (e) => {
-      setFormIsBusy(false);
-      setFormActionError(e);
-      onActionError?.(e);
-    },
-    onEnd: (e) => {
-      setFormIsBusy(false);
-      onActionEnd?.(e);
-    },
-  });
-
-  return (
-    <form
-      {...rest}
-      data-action={boundAction.name}
-      data-method={action.meta?.httpVerb || method || "GET"}
-      ref={innerRef}
-      // eslint-disable-next-line react/no-unknown-property
-      onrequestsubmit={(e) => {
-        // prevent "submit" event that would be dispatched by the browser after form.requestSubmit()
-        // (not super important because our <form> listen the "action" and do does preventDefault on "submit")
-        e.preventDefault();
-        requestAction(boundAction, { event: e });
-      }}
-    >
-      <FormContext.Provider
-        value={{
-          formAllowConcurrentActions,
-          formAction: boundAction,
-          formParamsSignal,
-          formActionRequester,
-          formIsReadOnly,
-          formIsBusy,
-          formActionAborted,
-          formActionError,
-        }}
-      >
-        {children}
-      </FormContext.Provider>
-    </form>
-  );
-});
-
-// const dispatchCustomEventOnFormAndFormElements = (type, options) => {
-//   const form = innerRef.current;
-//   const customEvent = new CustomEvent(type, options);
-//   // https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements
-//   for (const element of form.elements) {
-//     element.dispatchEvent(customEvent);
-//   }
-//   form.dispatchEvent(customEvent);
-// };

package/src/components/input/checkbox_list.jsx

@@ -1,294 +0,0 @@
-import { requestAction } from "@jsenv/validation";
-import { forwardRef } from "preact/compat";
-import { useEffect, useImperativeHandle, useRef } from "preact/hooks";
-import { useNavState } from "../../browser_integration/browser_integration.js";
-import { useActionStatus } from "../../use_action_status.js";
-import { renderActionableComponent } from "../action_execution/render_actionable_component.jsx";
-import {
-  useActionBoundToOneArrayParam,
-  useOneFormArrayParam,
-} from "../action_execution/use_action.js";
-import { useExecuteAction } from "../action_execution/use_execute_action.js";
-import { useActionEvents } from "../use_action_events.js";
-import { useRefArray } from "../use_ref_array.js";
-import { useStateArray } from "../use_state_array.js";
-import { Field } from "./field.jsx";
-import { InputCheckbox } from "./input_checkbox.jsx";
-import { useFormEvents } from "./use_form_event.js";
-
-import.meta.css = /* css */ `
-  .checkbox_list {
-    display: flex;
-    flex-direction: column;
-  }
-`;
-
-export const CheckboxList = forwardRef((props, ref) => {
-  return renderActionableComponent(props, ref, {
-    Basic: CheckboxListBasic,
-    WithAction: CheckboxListWithAction,
-    InsideForm: CheckboxListInsideForm,
-  });
-});
-
-const CheckboxListControlled = forwardRef((props, ref) => {
-  const {
-    name,
-    value,
-    label,
-    loading,
-    disabled,
-    readOnly,
-    children,
-    onChange,
-    ...rest
-  } = props;
-
-  const innerRef = useRef();
-  useImperativeHandle(ref, () => innerRef.current);
-
-  return (
-    <fieldset
-      {...rest}
-      className="checkbox_list"
-      ref={innerRef}
-      data-checkbox-list
-    >
-      {label ? <legend>{label}</legend> : null}
-      {children.map((child) => {
-        const {
-          label: childLabel,
-          readOnly: childReadOnly,
-          disabled: childDisabled,
-          loading: childLoading,
-          onChange: childOnChange,
-          value: childValue,
-          ...childRest
-        } = child;
-
-        const checkbox = (
-          <InputCheckbox
-            {...childRest}
-            // ignoreForm: each input is controller by this list
-            // we don't want the input to try to update the form because it's already done here
-            ignoreForm
-            name={name}
-            value={childValue}
-            checked={value.includes(childValue)}
-            readOnly={readOnly || childReadOnly}
-            disabled={disabled || childDisabled}
-            loading={loading || childLoading}
-            onChange={(event) => {
-              onChange(event, child);
-              childOnChange?.(event);
-            }}
-          />
-        );
-
-        return <Field key={childValue} input={checkbox} label={childLabel} />;
-      })}
-    </fieldset>
-  );
-});
-
-const CheckboxListBasic = forwardRef((props, ref) => {
-  const { value: externalValue, id, children, ...rest } = props;
-
-  const innerRef = useRef();
-  useImperativeHandle(ref, () => innerRef.current);
-
-  const [navState, setNavState] = useNavState(id);
-  const [valueArray, addValue, removeValue] = useStateArray(
-    externalValue,
-    navState,
-    [],
-  );
-  useEffect(() => {
-    setNavState(valueArray);
-  }, [valueArray]);
-
-  return (
-    <CheckboxListControlled
-      ref={innerRef}
-      value={valueArray}
-      onChange={(event) => {
-        const checkbox = event.target;
-        const checkboxIsChecked = checkbox.checked;
-        const checkboxValue = checkbox.value;
-        if (checkboxIsChecked) {
-          addValue(checkboxValue);
-        } else {
-          removeValue(checkboxValue);
-        }
-      }}
-      {...rest}
-    >
-      {children}
-    </CheckboxListControlled>
-  );
-});
-
-const CheckboxListWithAction = forwardRef((props, ref) => {
-  const {
-    id,
-    name,
-    value: externalValue,
-    valueSignal,
-    action,
-    children,
-    actionErrorEffect,
-    onCancel,
-    onActionPrevented,
-    onActionStart,
-    onActionAbort,
-    onActionError,
-    onActionEnd,
-    ...rest
-  } = props;
-
-  const innerRef = useRef();
-  useImperativeHandle(ref, () => innerRef.current);
-
-  const [navState, setNavState, resetNavState] = useNavState(id);
-  const [boundAction, valueArray, addValue, removeValue, resetValueArray] =
-    useActionBoundToOneArrayParam(
-      action,
-      name,
-      valueSignal ? valueSignal : externalValue,
-      navState,
-      [],
-    );
-  const { loading: actionLoading } = useActionStatus(boundAction);
-  const executeAction = useExecuteAction(innerRef, {
-    errorEffect: actionErrorEffect,
-  });
-  useEffect(() => {
-    setNavState(valueArray);
-  }, [valueArray]);
-
-  const actionRequesterRef = useRef(null);
-  useActionEvents(innerRef, {
-    onCancel: (e, reason) => {
-      resetNavState();
-      resetValueArray();
-      onCancel?.(e, reason);
-    },
-    onPrevented: onActionPrevented,
-    onAction: (actionEvent) => {
-      actionRequesterRef.current = actionEvent.detail.requester;
-      executeAction(actionEvent);
-    },
-    onStart: onActionStart,
-    onAbort: (e) => {
-      resetValueArray();
-      onActionAbort?.(e);
-    },
-    onError: (e) => {
-      resetValueArray();
-      onActionError?.(e);
-    },
-    onEnd: (e) => {
-      resetNavState();
-      onActionEnd?.(e);
-    },
-  });
-
-  const childRefArray = useRefArray(children, (child) => child.value);
-
-  return (
-    <CheckboxListControlled
-      {...rest}
-      name={name}
-      value={valueArray}
-      data-action={boundAction}
-      ref={innerRef}
-      onChange={(event) => {
-        const checkbox = event.target;
-        const checkboxIsChecked = checkbox.checked;
-        const checkboxValue = checkbox.value;
-        if (checkboxIsChecked) {
-          addValue(checkboxValue, valueArray);
-        } else {
-          removeValue(checkboxValue, valueArray);
-        }
-        const checkboxListContainer = innerRef.current;
-        requestAction(boundAction, {
-          event,
-          target: checkboxListContainer,
-          requester: checkbox,
-        });
-      }}
-    >
-      {children.map((child, i) => {
-        const childRef = childRefArray[i];
-        const loading =
-          child.loading ||
-          (actionLoading && actionRequesterRef.current === childRef.current);
-
-        return {
-          ...child,
-          ref: childRef,
-          loading,
-          readOnly: child.readOnly || actionLoading,
-        };
-      })}
-    </CheckboxListControlled>
-  );
-});
-
-const CheckboxListInsideForm = forwardRef((props, ref) => {
-  const {
-    formContext,
-    id,
-    name,
-    readOnly,
-    value: initialValue,
-    children,
-    ...rest
-  } = props;
-  const { formIsReadOnly } = formContext;
-
-  const innerRef = useRef();
-  useImperativeHandle(ref, () => innerRef.current);
-
-  const [navState, setNavState] = useNavState(id);
-  const [valueArray, addValue, removeValue, resetValueArray] =
-    useOneFormArrayParam(name, initialValue, navState, []);
-  useEffect(() => {
-    setNavState(valueArray);
-  }, [valueArray]);
-
-  useFormEvents(innerRef, {
-    onFormReset: () => {
-      resetValueArray();
-    },
-    onFormActionAbort: () => {
-      resetValueArray();
-    },
-    onFormActionError: () => {
-      resetValueArray();
-    },
-  });
-
-  return (
-    <CheckboxListControlled
-      ref={innerRef}
-      name={name}
-      value={valueArray}
-      readOnly={readOnly || formIsReadOnly}
-      onChange={(event) => {
-        const checkbox = event.target;
-        const checkboxIsChecked = checkbox.checked;
-        const checkboxValue = checkbox.value;
-        if (checkboxIsChecked) {
-          addValue(checkboxValue, valueArray);
-        } else {
-          removeValue(checkboxValue, valueArray);
-        }
-      }}
-      {...rest}
-    >
-      {children}
-    </CheckboxListControlled>
-  );
-});

package/src/components/input/field.jsx

@@ -1,61 +0,0 @@
-import { useLayoutEffect, useRef, useState } from "preact/hooks";
-
-import.meta.css = /* css */ `
-  .label_wrapper_for_opacity {
-    display: inline-flex;
-  }
-
-  label[data-readonly] .label_wrapper_for_opacity {
-    opacity: 0.5;
-  }
-`;
-
-export const Field = (props) => {
-  const { label, input, readOnly, ...rest } = props;
-
-  const keys = Object.keys(props);
-  const labelIndex = keys.indexOf("label");
-  const inputIndex = keys.indexOf("input");
-  const labelBeforeInput = labelIndex < inputIndex;
-
-  const labelWrapped = <div className="label_wrapper_for_opacity">{label}</div>;
-
-  const children = labelBeforeInput
-    ? [labelWrapped, input]
-    : [input, labelWrapped];
-
-  const [inputReadOnly, setInputReadOnly] = useState(false);
-  const innerReadOnly = readOnly || inputReadOnly;
-  const labelRef = useRef();
-  useLayoutEffect(() => {
-    if (readOnly) {
-      return null;
-    }
-    let animationFrame;
-    const updateInputDisabled = () => {
-      const label = labelRef.current;
-      const input = label.querySelector("input");
-      if (!input) {
-        setInputReadOnly(false);
-      } else {
-        setInputReadOnly(input.readonly || input.hasAttribute("data-readonly"));
-      }
-      animationFrame = requestAnimationFrame(updateInputDisabled);
-    };
-    updateInputDisabled();
-
-    return () => {
-      cancelAnimationFrame(animationFrame);
-    };
-  }, [readOnly]);
-
-  return (
-    <label
-      ref={labelRef}
-      data-readonly={innerReadOnly ? "" : undefined}
-      {...rest}
-    >
-      {children}
-    </label>
-  );
-};