@tappify/extension-sdk 2.0.0

package/dist/index.mjs

@@ -0,0 +1,698 @@
+import {
+  dataQueryKey,
+  installPrefix,
+  procedurePrefix,
+  procedureQueryKey,
+  storageQueryKey,
+  useTapAuth,
+  useTapContext,
+  useTapFilters,
+  useTapParams,
+  useTapProject,
+  useTapQuery,
+  useTapServer,
+  useTapSize,
+  useTapState,
+  useTapStorage,
+  useTapTheme
+} from "./chunk-BDCX6LRQ.mjs";
+import {
+  useTap
+} from "./chunk-QHM7XNRK.mjs";
+import {
+  TAP_ERROR_CODES,
+  TapError,
+  TapServerError
+} from "./chunk-CSTYBKZC.mjs";
+
+// src/client/ui/cn.ts
+import clsx from "clsx";
+function cn(...values) {
+  return clsx(values);
+}
+
+// src/client/ui/primitives.tsx
+import {
+  useId
+} from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function TapButton({
+  variant = "primary",
+  size = "md",
+  loading = false,
+  disabled,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      ...rest,
+      disabled: disabled === true || loading,
+      "aria-busy": loading || void 0,
+      className: cn(
+        "tap-btn",
+        `tap-btn--${variant}`,
+        size === "sm" && "tap-btn--sm",
+        className
+      ),
+      children
+    }
+  );
+}
+function TapCard({
+  title,
+  action,
+  footer,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: cn("tap-card", className), children: [
+    (title !== void 0 || action !== void 0) && /* @__PURE__ */ jsxs("header", { className: "tap-card__head", children: [
+      /* @__PURE__ */ jsx("span", { children: title }),
+      action
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "tap-card__body", children }),
+    footer !== void 0 && /* @__PURE__ */ jsx("footer", { className: "tap-card__foot", children: footer })
+  ] });
+}
+function TapPageHeader({
+  title,
+  description,
+  actions
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "tap-page-header", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h2", { className: "tap-page-header__title", children: title }),
+      description !== void 0 && /* @__PURE__ */ jsx("p", { className: "tap-page-header__description", children: description })
+    ] }),
+    actions !== void 0 && /* @__PURE__ */ jsx("div", { className: "tap-row", children: actions })
+  ] });
+}
+function TapSkeleton({
+  lines = 1,
+  width,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("tap-skeleton", className),
+      style: { width: width ?? `${String(100 - index * 12)}%` }
+    },
+    index
+  )) });
+}
+function TapEmptyState({
+  title,
+  description,
+  action
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "tap-state", children: [
+    /* @__PURE__ */ jsx("span", { className: "tap-state__title", children: title }),
+    description !== void 0 && /* @__PURE__ */ jsx("span", { children: description }),
+    action
+  ] });
+}
+function TapErrorState({
+  title,
+  description,
+  code,
+  onRetry
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "tap-state tap-state--error", role: "alert", children: [
+    /* @__PURE__ */ jsx("span", { className: "tap-state__title", children: title }),
+    description !== void 0 && /* @__PURE__ */ jsx("span", { children: description }),
+    code !== void 0 && /* @__PURE__ */ jsx("span", { className: "tap-state__code", children: code }),
+    onRetry !== void 0 && /* @__PURE__ */ jsx(TapButton, { variant: "secondary", size: "sm", onClick: onRetry, children: "Retry" })
+  ] });
+}
+function TapStat({
+  label,
+  value,
+  delta,
+  hint
+}) {
+  const percent = delta === void 0 ? void 0 : `${delta > 0 ? "+" : ""}${String(Math.round(delta * 100))}%`;
+  return /* @__PURE__ */ jsxs("div", { className: "tap-stat", children: [
+    /* @__PURE__ */ jsx("span", { className: "tap-stat__label", children: label }),
+    /* @__PURE__ */ jsx("span", { className: "tap-stat__value", children: value }),
+    percent !== void 0 && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          delta !== void 0 && delta < 0 ? "tap-stat__delta--down" : "tap-stat__delta--up"
+        ),
+        children: percent
+      }
+    ),
+    hint !== void 0 && /* @__PURE__ */ jsx("span", { className: "tap-field__hint", children: hint })
+  ] });
+}
+function FieldFrame({
+  id,
+  label,
+  hint,
+  error,
+  hintId,
+  errorId,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "tap-field", children: [
+    label !== void 0 && /* @__PURE__ */ jsx("label", { className: "tap-field__label", htmlFor: id, children: label }),
+    children,
+    hint !== void 0 && /* @__PURE__ */ jsx("span", { className: "tap-field__hint", id: hintId, children: hint }),
+    error !== void 0 && /* @__PURE__ */ jsx("span", { className: "tap-field__error", id: errorId, children: error })
+  ] });
+}
+function describedByOf(fieldId, hint, error) {
+  const value = cn(
+    hint !== void 0 && `${fieldId}-hint`,
+    error !== void 0 && `${fieldId}-error`
+  );
+  return value === "" ? void 0 : value;
+}
+function TapSingleLineInput({
+  label,
+  error,
+  hint,
+  className,
+  id,
+  ...rest
+}) {
+  const generated = useId();
+  const fieldId = id ?? generated;
+  return /* @__PURE__ */ jsx(
+    FieldFrame,
+    {
+      id: fieldId,
+      label,
+      hint,
+      error,
+      hintId: `${fieldId}-hint`,
+      errorId: `${fieldId}-error`,
+      children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...rest,
+          id: fieldId,
+          className: cn(
+            "tap-control",
+            error !== void 0 && "tap-control--invalid",
+            className
+          ),
+          "aria-invalid": error !== void 0 || void 0,
+          "aria-describedby": describedByOf(fieldId, hint, error)
+        }
+      )
+    }
+  );
+}
+function TapTextarea({
+  label,
+  error,
+  hint,
+  className,
+  id,
+  rows,
+  ...rest
+}) {
+  const generated = useId();
+  const fieldId = id ?? generated;
+  return /* @__PURE__ */ jsx(
+    FieldFrame,
+    {
+      id: fieldId,
+      label,
+      hint,
+      error,
+      hintId: `${fieldId}-hint`,
+      errorId: `${fieldId}-error`,
+      children: /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ...rest,
+          id: fieldId,
+          rows: rows ?? 4,
+          className: cn(
+            "tap-control",
+            error !== void 0 && "tap-control--invalid",
+            className
+          ),
+          "aria-invalid": error !== void 0 || void 0,
+          "aria-describedby": describedByOf(fieldId, hint, error)
+        }
+      )
+    }
+  );
+}
+function TapInput(props) {
+  if (props.multiline === true) {
+    const { multiline: _multiline2, ...rest2 } = props;
+    return /* @__PURE__ */ jsx(TapTextarea, { ...rest2 });
+  }
+  const { multiline: _multiline, ...rest } = props;
+  return /* @__PURE__ */ jsx(TapSingleLineInput, { ...rest });
+}
+function TapSelect({
+  label,
+  error,
+  hint,
+  options,
+  className,
+  id,
+  ...rest
+}) {
+  const generated = useId();
+  const fieldId = id ?? generated;
+  return /* @__PURE__ */ jsx(
+    FieldFrame,
+    {
+      id: fieldId,
+      label,
+      hint,
+      error,
+      hintId: `${fieldId}-hint`,
+      errorId: `${fieldId}-error`,
+      children: /* @__PURE__ */ jsx(
+        "select",
+        {
+          ...rest,
+          id: fieldId,
+          className: cn(
+            "tap-control",
+            error !== void 0 && "tap-control--invalid",
+            className
+          ),
+          "aria-invalid": error !== void 0 || void 0,
+          "aria-describedby": describedByOf(fieldId, hint, error),
+          children: options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+        }
+      )
+    }
+  );
+}
+function cellText(row, key) {
+  if (row === null || typeof row !== "object") return "";
+  const value = Reflect.get(row, key);
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean" || typeof value === "bigint") {
+    return String(value);
+  }
+  return "";
+}
+function TapTable({
+  columns,
+  rows,
+  rowKey,
+  empty,
+  onRowClick
+}) {
+  if (rows.length === 0 && empty !== void 0) {
+    return /* @__PURE__ */ jsx(Fragment, { children: empty });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "tap-table-wrap", children: /* @__PURE__ */ jsxs("table", { className: "tap-table", children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx(
+      "th",
+      {
+        className: cn(column.align === "end" && "tap-table__end"),
+        scope: "col",
+        children: column.label
+      },
+      column.key
+    )) }) }),
+    /* @__PURE__ */ jsx("tbody", { children: rows.map((row) => /* @__PURE__ */ jsx(
+      "tr",
+      {
+        "data-clickable": onRowClick !== void 0,
+        tabIndex: onRowClick === void 0 ? void 0 : 0,
+        onClick: onRowClick === void 0 ? void 0 : () => onRowClick(row),
+        onKeyDown: onRowClick === void 0 ? void 0 : (event) => {
+          if (event.key !== "Enter" && event.key !== " ") return;
+          event.preventDefault();
+          onRowClick(row);
+        },
+        children: columns.map((column) => /* @__PURE__ */ jsx(
+          "td",
+          {
+            className: cn(column.align === "end" && "tap-table__end"),
+            children: column.render ? column.render(row) : cellText(row, column.key)
+          },
+          column.key
+        ))
+      },
+      rowKey(row)
+    )) })
+  ] }) });
+}
+
+// src/client/ui/TapDialog.tsx
+import {
+  useCallback,
+  useEffect,
+  useId as useId2,
+  useRef
+} from "react";
+import { createPortal } from "react-dom";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var DIALOG_CLOSE_EVENT = "tap:dialog-close";
+var FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function activeElementNear(node) {
+  const root = node?.getRootNode();
+  return root instanceof ShadowRoot ? root.activeElement : document.activeElement;
+}
+function TapDialog({
+  open,
+  title,
+  onClose,
+  footer,
+  children,
+  labelledBy
+}) {
+  const tap = useTap();
+  const dialogRef = useRef(null);
+  const titleId = useId2();
+  const focusables = useCallback(() => {
+    const root = dialogRef.current;
+    if (root === null) return [];
+    return Array.from(root.querySelectorAll(FOCUSABLE));
+  }, []);
+  useEffect(() => {
+    if (!open) return;
+    const previous = activeElementNear(dialogRef.current);
+    focusables()[0]?.focus();
+    return () => {
+      if (previous instanceof HTMLElement) previous.focus();
+    };
+  }, [open, focusables]);
+  useEffect(() => {
+    const portal = tap.__portal;
+    if (!open || portal === null) return;
+    const close = () => {
+      onClose();
+    };
+    portal.addEventListener(DIALOG_CLOSE_EVENT, close);
+    return () => {
+      portal.removeEventListener(DIALOG_CLOSE_EVENT, close);
+    };
+  }, [open, tap, onClose]);
+  if (!open) return null;
+  if (tap.__portal === null) {
+    throw new TapError(
+      "TAP_NO_PORTAL",
+      "TapDialog needs the host portal node, which the mount sets inside its shadow root. Render this dialog from a contribution entry, or use renderWithTap() in tests."
+    );
+  }
+  const onKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      event.preventDefault();
+      onClose();
+      return;
+    }
+    if (event.key !== "Tab") return;
+    const items = focusables();
+    if (items.length === 0) return;
+    const first = items[0];
+    const last = items[items.length - 1];
+    const active = activeElementNear(dialogRef.current);
+    if (event.shiftKey && active === first) {
+      event.preventDefault();
+      last.focus();
+      return;
+    }
+    if (!event.shiftKey && active === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  };
+  return createPortal(
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: "tap-dialog-scrim",
+        onKeyDown,
+        onMouseDown: (event) => {
+          if (event.target === event.currentTarget) onClose();
+        },
+        children: /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            ref: dialogRef,
+            className: "tap-dialog",
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": labelledBy ?? titleId,
+            children: [
+              /* @__PURE__ */ jsx2("header", { className: "tap-dialog__head", id: titleId, children: title }),
+              /* @__PURE__ */ jsx2("div", { className: "tap-dialog__body", children }),
+              footer !== void 0 && /* @__PURE__ */ jsx2("footer", { className: "tap-dialog__foot", children: footer })
+            ]
+          }
+        )
+      }
+    ),
+    tap.__portal
+  );
+}
+
+// src/client/ui/TapForm.tsx
+import {
+  useMemo,
+  useState
+} from "react";
+import { z } from "zod";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function humanise(name) {
+  const spaced = name.replace(/[_-]+/g, " ").replace(/([a-z0-9])([A-Z])/g, "$1 $2").trim();
+  return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}
+function readString(source, key) {
+  const value = source[key];
+  return typeof value === "string" ? value : void 0;
+}
+function kindOf(property) {
+  if (Array.isArray(property.enum)) return "enum";
+  const type = readString(property, "type");
+  if (type === "boolean") return "boolean";
+  if (type === "number" || type === "integer") return "number";
+  const format = readString(property, "format");
+  if (format === "textarea") return "textarea";
+  if (format === "date") return "date";
+  return "text";
+}
+function formFields(schema) {
+  const properties = schema.properties;
+  if (typeof properties !== "object" || properties === null) return [];
+  const required = new Set(
+    Array.isArray(schema.required) ? schema.required.filter(
+      (name) => typeof name === "string"
+    ) : []
+  );
+  return Object.entries(properties).flatMap(([name, raw]) => {
+    if (typeof raw !== "object" || raw === null) return [];
+    const property = { ...raw };
+    const kind = kindOf(property);
+    const field = {
+      name,
+      label: readString(property, "title") ?? humanise(name),
+      kind,
+      required: required.has(name)
+    };
+    const hint = readString(property, "description");
+    if (hint !== void 0) field.hint = hint;
+    if (kind === "enum" && Array.isArray(property.enum)) {
+      field.options = property.enum.filter((option) => typeof option === "string").map((option) => ({ value: option, label: option }));
+    }
+    return [field];
+  });
+}
+function requiredErrors(fields, values) {
+  const errors = {};
+  for (const field of fields) {
+    const value = values[field.name];
+    if (field.required && (value === void 0 || value === "")) {
+      errors[field.name] = `${field.label} is required.`;
+    }
+  }
+  return errors;
+}
+function compile(schema) {
+  try {
+    return z.fromJSONSchema(schema);
+  } catch {
+    return null;
+  }
+}
+function validate(fields, compiled, values) {
+  const errors = requiredErrors(fields, values);
+  if (compiled === null) return errors;
+  const result = compiled.safeParse(values);
+  if (result.success) return errors;
+  for (const issue of result.error.issues) {
+    const key = issue.path[0];
+    if (typeof key === "string" && errors[key] === void 0) {
+      errors[key] = issue.message;
+    }
+  }
+  return errors;
+}
+function clean(fields, values) {
+  const output = {};
+  for (const field of fields) {
+    const value = values[field.name];
+    if (value === void 0 || value === "") continue;
+    output[field.name] = value;
+  }
+  return output;
+}
+function TapForm({
+  schema,
+  value,
+  submitLabel = "Submit",
+  cancelLabel = "Cancel",
+  busy = false,
+  onSubmit,
+  onCancel
+}) {
+  const fields = useMemo(() => formFields(schema), [schema]);
+  const compiled = useMemo(() => compile(schema), [schema]);
+  const [values, setValues] = useState(() => ({ ...value }));
+  const [errors, setErrors] = useState({});
+  const set = (name, next) => {
+    setValues((current) => ({ ...current, [name]: next }));
+    setErrors((current) => {
+      if (current[name] === void 0) return current;
+      const { [name]: _cleared, ...rest } = current;
+      return rest;
+    });
+  };
+  const submit = (event) => {
+    event.preventDefault();
+    const candidate = clean(fields, values);
+    const found = validate(fields, compiled, candidate);
+    setErrors(found);
+    if (Object.keys(found).length > 0) return;
+    void onSubmit(candidate);
+  };
+  return /* @__PURE__ */ jsxs3("form", { className: "tap-form", onSubmit: submit, noValidate: true, children: [
+    fields.map((field) => {
+      const raw = values[field.name];
+      if (field.kind === "enum") {
+        return /* @__PURE__ */ jsx3(
+          TapSelect,
+          {
+            label: field.label,
+            hint: field.hint,
+            error: errors[field.name],
+            required: field.required,
+            value: typeof raw === "string" ? raw : "",
+            options: [
+              { value: "", label: "Choose one" },
+              ...field.options ?? []
+            ],
+            onChange: (event) => {
+              set(field.name, event.target.value);
+            }
+          },
+          field.name
+        );
+      }
+      if (field.kind === "boolean") {
+        return /* @__PURE__ */ jsx3(
+          TapInput,
+          {
+            type: "checkbox",
+            label: field.label,
+            hint: field.hint,
+            error: errors[field.name],
+            className: "tap-control--checkbox",
+            checked: raw === true,
+            onChange: (event) => {
+              set(field.name, event.target.checked);
+            }
+          },
+          field.name
+        );
+      }
+      if (field.kind === "textarea") {
+        return /* @__PURE__ */ jsx3(
+          TapInput,
+          {
+            multiline: true,
+            label: field.label,
+            hint: field.hint,
+            error: errors[field.name],
+            required: field.required,
+            value: typeof raw === "string" ? raw : "",
+            onChange: (event) => {
+              set(field.name, event.target.value);
+            }
+          },
+          field.name
+        );
+      }
+      return /* @__PURE__ */ jsx3(
+        TapInput,
+        {
+          type: field.kind === "number" ? "number" : field.kind === "date" ? "date" : "text",
+          label: field.label,
+          hint: field.hint,
+          error: errors[field.name],
+          required: field.required,
+          value: typeof raw === "string" || typeof raw === "number" ? String(raw) : "",
+          onChange: (event) => {
+            set(
+              field.name,
+              field.kind === "number" ? event.target.value === "" ? "" : Number(event.target.value) : event.target.value
+            );
+          }
+        },
+        field.name
+      );
+    }),
+    /* @__PURE__ */ jsxs3("div", { className: "tap-form__actions", children: [
+      onCancel !== void 0 && /* @__PURE__ */ jsx3(TapButton, { variant: "secondary", onClick: onCancel, children: cancelLabel }),
+      /* @__PURE__ */ jsx3(TapButton, { type: "submit", loading: busy, children: submitLabel })
+    ] })
+  ] });
+}
+export {
+  TAP_ERROR_CODES,
+  TapButton,
+  TapCard,
+  TapDialog,
+  TapEmptyState,
+  TapError,
+  TapErrorState,
+  TapForm,
+  TapInput,
+  TapPageHeader,
+  TapSelect,
+  TapServerError,
+  TapSkeleton,
+  TapStat,
+  TapTable,
+  cn,
+  dataQueryKey,
+  formFields,
+  installPrefix,
+  procedurePrefix,
+  procedureQueryKey,
+  storageQueryKey,
+  useTap,
+  useTapAuth,
+  useTapContext,
+  useTapFilters,
+  useTapParams,
+  useTapProject,
+  useTapQuery,
+  useTapServer,
+  useTapSize,
+  useTapState,
+  useTapStorage,
+  useTapTheme
+};
+//# sourceMappingURL=index.mjs.map