@devaccel-labs/app-comments-toolbar 1.1.0 → 1.3.0

package/src/runtime/ticket-form.tsx

@@ -0,0 +1,342 @@
+import { type KeyboardEvent as ReactKeyboardEvent, type ReactNode, useId, useState } from "react";
+import * as Icon from "./icons.js";
+import {
+  CHIP_OPTIONS_MAX,
+  ticketFieldOptions,
+  ticketFieldVisibility,
+  ticketValueFilled,
+  type TicketForm,
+  type TicketFormField,
+  type TicketValue,
+  type TicketValues,
+} from "./ticket-form-model.js";
+
+export * from "./ticket-form-model.js";
+
+export function TicketFormInput({
+  form,
+  values,
+  onChange,
+  onKeyDown,
+}: {
+  form: TicketForm;
+  values: TicketValues;
+  onChange: (next: TicketValues) => void;
+  onKeyDown?: (event: ReactKeyboardEvent<HTMLTextAreaElement>) => void;
+}) {
+  const visible = ticketFieldVisibility(form, values);
+  const set = (key: string, value: TicketValue | undefined) => {
+    const next: Record<string, TicketValue> = { ...values };
+    if (value === undefined || !ticketValueFilled(value)) delete next[key];
+    else next[key] = value;
+    onChange(next);
+  };
+  return (
+    <div className="cs-details-input cs-ticket-form" data-cs-ui="ticket-form">
+      {form.fields
+        .filter((field) => visible.get(field.key) !== false)
+        .map((field) => (
+          <TicketField
+            key={field.key}
+            field={field}
+            options={ticketFieldOptions(field, values)}
+            value={values[field.key]}
+            onChange={(value) => set(field.key, value)}
+            onKeyDown={onKeyDown}
+          />
+        ))}
+    </div>
+  );
+}
+
+function TicketField({
+  field,
+  options,
+  value,
+  onChange,
+  onKeyDown,
+}: {
+  field: TicketFormField;
+  options: readonly { readonly value: string; readonly label: string }[];
+  value: TicketValue | undefined;
+  onChange: (value: TicketValue | undefined) => void;
+  onKeyDown?: (event: ReactKeyboardEvent<HTMLTextAreaElement>) => void;
+}) {
+  const label = (
+    <span>
+      {field.label}
+      {field.required ? <b aria-hidden="true"> *</b> : null}
+    </span>
+  );
+  const hint = field.helpText ? <small>{field.helpText}</small> : null;
+  const cs = `ticket-${field.key}`;
+
+  if (field.kind === "select_single" || field.kind === "select_multi") {
+    const multi = field.kind === "select_multi";
+    const chosen = multi
+      ? Array.isArray(value)
+        ? (value as readonly string[])
+        : []
+      : typeof value === "string"
+        ? [value]
+        : [];
+    if (!multi && options.length > CHIP_OPTIONS_MAX) {
+      return (
+        <TicketSelect
+          cs={cs}
+          label={label}
+          hint={hint}
+          value={chosen[0] ?? ""}
+          required={field.required}
+          options={options}
+          onChange={(next) => onChange(next || undefined)}
+        />
+      );
+    }
+    return (
+      <div
+        className="cs-roles"
+        role={multi ? "group" : "radiogroup"}
+        aria-label={field.label}
+        data-cs-ui={cs}
+      >
+        <span className="cs-roles-label">
+          {field.label}
+          {field.required ? " *" : ""}
+        </span>
+        {options.map((option) => {
+          const on = chosen.includes(option.value);
+          return (
+            <button
+              key={option.value}
+              type="button"
+              role={multi ? "checkbox" : "radio"}
+              aria-checked={on}
+              className={on ? "cs-chip is-on" : "cs-chip"}
+              onClick={() =>
+                onChange(
+                  multi
+                    ? on
+                      ? chosen.filter((entry) => entry !== option.value)
+                      : [...chosen, option.value]
+                    : on
+                      ? undefined
+                      : option.value,
+                )
+              }
+            >
+              {option.label}
+            </button>
+          );
+        })}
+      </div>
+    );
+  }
+
+  if (field.kind === "checkbox") {
+    return (
+      <label className="cs-detail-field cs-ticket-check">
+        <input
+          type="checkbox"
+          data-cs-ui={cs}
+          checked={value === true}
+          onChange={(event) => onChange(event.target.checked ? true : undefined)}
+        />
+        {label}
+      </label>
+    );
+  }
+
+  if (field.kind === "long_text") {
+    return (
+      <label className="cs-detail-field">
+        {label}
+        <textarea
+          data-cs-ui={cs}
+          rows={2}
+          maxLength={10_000}
+          required={field.required}
+          value={typeof value === "string" ? value : ""}
+          onChange={(event) => onChange(event.target.value)}
+          onKeyDown={onKeyDown}
+        />
+        {hint}
+      </label>
+    );
+  }
+
+  if (field.kind === "number" || field.kind === "rating") {
+    const max = field.kind === "rating" ? (field.scale ?? 5) : field.max;
+    const min = field.kind === "rating" ? 1 : field.min;
+    return (
+      <label className="cs-detail-field">
+        {label}
+        <input
+          type="number"
+          data-cs-ui={cs}
+          min={min}
+          max={max}
+          required={field.required}
+          value={typeof value === "number" ? value : ""}
+          onChange={(event) =>
+            onChange(event.target.value === "" ? undefined : Number(event.target.value))
+          }
+        />
+        {hint}
+      </label>
+    );
+  }
+
+  const inputType =
+    field.kind === "email"
+      ? "email"
+      : field.kind === "phone"
+        ? "tel"
+        : field.kind === "url"
+          ? "url"
+          : field.kind === "date"
+            ? "date"
+            : field.kind === "datetime"
+              ? "datetime-local"
+              : "text";
+  return (
+    <label className="cs-detail-field">
+      {label}
+      <input
+        type={inputType}
+        data-cs-ui={cs}
+        maxLength={field.kind === "short_text" ? 500 : undefined}
+        required={field.required}
+        value={typeof value === "string" ? value : ""}
+        onChange={(event) => onChange(event.target.value)}
+      />
+      {hint}
+    </label>
+  );
+}
+
+/**
+ * One of a long list, in a list the toolbar draws: a native select opens the system's own menu, which looks
+ * different on every system and in every browser.
+ */
+function TicketSelect({
+  cs,
+  label,
+  hint,
+  value,
+  required,
+  options,
+  onChange,
+}: {
+  cs: string;
+  label: ReactNode;
+  hint: ReactNode;
+  value: string;
+  required: boolean;
+  options: readonly { readonly value: string; readonly label: string }[];
+  onChange: (value: string) => void;
+}) {
+  const id = useId();
+  const [open, setOpen] = useState(false);
+  const [active, setActive] = useState(0);
+  const choices = [{ value: "", label: "Choose…" }, ...options];
+  const current = Math.max(
+    0,
+    choices.findIndex((choice) => choice.value === value),
+  );
+  const show = () => {
+    setActive(current);
+    setOpen(true);
+  };
+  const pick = (index: number) => {
+    onChange(choices[index]?.value ?? "");
+    setOpen(false);
+  };
+  const onKeyDown = (event: ReactKeyboardEvent<HTMLButtonElement>) => {
+    const last = choices.length - 1;
+    const moveTo = (index: number) => {
+      event.preventDefault();
+      if (open) setActive(Math.min(last, Math.max(0, index)));
+      else show();
+    };
+    switch (event.key) {
+      case "ArrowDown":
+        return moveTo(active + 1);
+      case "ArrowUp":
+        return moveTo(active - 1);
+      case "Home":
+        return open ? moveTo(0) : undefined;
+      case "End":
+        return open ? moveTo(last) : undefined;
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        if (open) pick(active);
+        else show();
+        return;
+      case "Escape":
+        if (!open) return;
+        // The toolbar's own Escape (closing the composer) skips a key a control has handled.
+        event.preventDefault();
+        setOpen(false);
+        return;
+      case "Tab":
+        setOpen(false);
+        return;
+      default:
+        return;
+    }
+  };
+  return (
+    <div
+      className="cs-detail-field cs-select"
+      onBlur={(event) => {
+        if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setOpen(false);
+      }}
+    >
+      <span id={`${id}-label`}>{label}</span>
+      <button
+        type="button"
+        role="combobox"
+        className={value ? "cs-select-button" : "cs-select-button is-empty"}
+        data-cs-ui={cs}
+        aria-labelledby={`${id}-label`}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-controls={`${id}-list`}
+        aria-activedescendant={open ? `${id}-${active}` : undefined}
+        aria-required={required || undefined}
+        onClick={() => (open ? setOpen(false) : show())}
+        onKeyDown={onKeyDown}
+      >
+        {choices[current]?.label}
+        <Icon.ChevronDown />
+      </button>
+      {open ? (
+        <div
+          className="cs-select-list"
+          role="listbox"
+          id={`${id}-list`}
+          aria-labelledby={`${id}-label`}
+        >
+          {choices.map((choice, index) => (
+            <div
+              key={choice.value}
+              id={`${id}-${index}`}
+              role="option"
+              aria-selected={index === current}
+              className={index === active ? "cs-select-option is-active" : "cs-select-option"}
+              onMouseEnter={() => setActive(index)}
+              // The button keeps focus, so the list stays open until the choice is made.
+              onMouseDown={(event) => event.preventDefault()}
+              onClick={() => pick(index)}
+            >
+              {choice.label}
+            </div>
+          ))}
+        </div>
+      ) : null}
+      {hint}
+    </div>
+  );
+}