@robert-stackflow/oneui 0.0.0-stage → 0.1.0

package/components/FileDropZone.js

@@ -0,0 +1,113 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { FileDropOverlay } from "./FileDropOverlay.js";
+import s from "./FileDropZone.module.css";
+import {
+  validateFiles
+} from "./fileSelection.js";
+import { FileSelectionFeedback } from "./FileSelectionFeedback.js";
+function FileDropZone({
+  children,
+  onFiles,
+  title = "\u6DFB\u52A0\u6587\u4EF6",
+  description,
+  disabled = false,
+  label = "\u6587\u4EF6\u62D6\u62FD\u533A\u57DF",
+  className = "",
+  onReject,
+  onValidation,
+  showErrors = true,
+  ...constraints
+}) {
+  const [dragging, setDragging] = useState(false), [rejections, setRejections] = useState([]), depth = useRef(0);
+  const clear = () => {
+    depth.current = 0;
+    setDragging(false);
+  };
+  useEffect(() => {
+    if (disabled) clear();
+  }, [disabled]);
+  useEffect(() => {
+    const key = (e) => {
+      if (e.key === "Escape") clear();
+    };
+    window.addEventListener("blur", clear);
+    window.addEventListener("dragend", clear);
+    window.addEventListener("drop", clear);
+    window.addEventListener("keydown", key);
+    return () => {
+      window.removeEventListener("blur", clear);
+      window.removeEventListener("dragend", clear);
+      window.removeEventListener("drop", clear);
+      window.removeEventListener("keydown", key);
+    };
+  }, []);
+  const isFiles = (e) => e.dataTransfer.types.includes("Files");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "region",
+      "aria-label": label,
+      className: s.zone + " " + className,
+      "data-dragging": dragging && !disabled,
+      onDragEnter: (e) => {
+        if (!isFiles(e)) return;
+        e.preventDefault();
+        e.stopPropagation();
+        if (!disabled) {
+          depth.current++;
+          setDragging(true);
+        }
+      },
+      onDragOver: (e) => {
+        if (!isFiles(e)) return;
+        e.preventDefault();
+        e.stopPropagation();
+        e.dataTransfer.dropEffect = disabled ? "none" : "copy";
+        if (!disabled) setDragging(true);
+      },
+      onDragLeave: (e) => {
+        if (!isFiles(e)) return;
+        e.stopPropagation();
+        depth.current = Math.max(0, depth.current - 1);
+        if (e.relatedTarget instanceof Node) {
+          if (e.currentTarget.contains(e.relatedTarget)) return;
+          clear();
+          return;
+        }
+        if (!depth.current) setDragging(false);
+      },
+      onDrop: (e) => {
+        if (!isFiles(e)) return;
+        e.preventDefault();
+        e.stopPropagation();
+        clear();
+        if (!disabled && e.dataTransfer.files.length) {
+          const result = validateFiles(
+            Array.from(e.dataTransfer.files),
+            constraints
+          );
+          setRejections(result.rejected);
+          onValidation?.(result);
+          if (result.rejected.length) onReject?.(result.rejected);
+          if (result.accepted.length) onFiles(result.accepted);
+        }
+      },
+      children: [
+        children,
+        showErrors && /* @__PURE__ */ jsx(FileSelectionFeedback, { rejections }),
+        /* @__PURE__ */ jsx(
+          FileDropOverlay,
+          {
+            active: dragging && !disabled,
+            title,
+            description
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  FileDropZone
+};

package/components/FileDropZone.module.css

@@ -0,0 +1,6 @@
+.zone {
+  position: relative;
+  min-width: 0;
+  border-radius: var(--radius);
+  isolation: isolate;
+}

package/components/FilePicker.d.ts

@@ -0,0 +1,10 @@
+import { type FileConstraints, type FileRejection, type FileSelectionResult } from "./fileSelection";
+export type FilePickerProps = FileConstraints & {
+    onFiles(files: File[]): void;
+    onReject?(rejections: FileRejection[]): void;
+    onValidation?(result: FileSelectionResult): void;
+    disabled?: boolean;
+    label?: string;
+    showErrors?: boolean;
+};
+export declare function FilePicker({ onFiles, onReject, onValidation, disabled, label, showErrors, ...constraints }: FilePickerProps): import("react").JSX.Element;

package/components/FilePicker.js

@@ -0,0 +1,59 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from "react";
+import { Upload } from "lucide-react";
+import { Button } from "./Button.js";
+import {
+  validateFiles
+} from "./fileSelection.js";
+import { FileSelectionFeedback } from "./FileSelectionFeedback.js";
+function FilePicker({
+  onFiles,
+  onReject,
+  onValidation,
+  disabled = false,
+  label = "\u9009\u62E9\u6587\u4EF6",
+  showErrors = true,
+  ...constraints
+}) {
+  const ref = useRef(null), id = useId(), [rejections, setRejections] = useState([]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "file",
+        multiple: constraints.multiple !== false,
+        accept: constraints.accept,
+        disabled,
+        hidden: true,
+        onChange: (e) => {
+          const files = Array.from(e.target.files || []);
+          if (files.length && !disabled) {
+            const result = validateFiles(files, constraints);
+            setRejections(result.rejected);
+            onValidation?.(result);
+            if (result.rejected.length) onReject?.(result.rejected);
+            if (result.accepted.length) onFiles(result.accepted);
+          }
+          e.target.value = "";
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        disabled,
+        "aria-describedby": showErrors && rejections.length ? id : void 0,
+        onClick: () => ref.current?.click(),
+        children: [
+          /* @__PURE__ */ jsx(Upload, {}),
+          label
+        ]
+      }
+    ),
+    showErrors && /* @__PURE__ */ jsx(FileSelectionFeedback, { id, rejections })
+  ] });
+}
+export {
+  FilePicker
+};

package/components/FileSelectionFeedback.d.ts

@@ -0,0 +1,5 @@
+import type { FileRejection } from "./fileSelection";
+export declare function FileSelectionFeedback({ rejections, id, }: {
+    rejections: FileRejection[];
+    id?: string;
+}): import("react").JSX.Element | null;

package/components/FileSelectionFeedback.js

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import s from "./FileSelectionFeedback.module.css";
+function FileSelectionFeedback({
+  rejections,
+  id
+}) {
+  if (!rejections.length) return null;
+  return /* @__PURE__ */ jsxs("div", { id, className: s.feedback, role: "alert", children: [
+    /* @__PURE__ */ jsx("ul", { children: rejections.slice(0, 3).map((item, index) => /* @__PURE__ */ jsxs("li", { children: [
+      /* @__PURE__ */ jsx("span", { children: item.file.name }),
+      "\uFF1A",
+      item.message
+    ] }, `${item.file.name}-${index}`)) }),
+    rejections.length > 3 && /* @__PURE__ */ jsxs("p", { children: [
+      "\u53E6\u6709 ",
+      rejections.length - 3,
+      " \u4E2A\u6587\u4EF6\u672A\u6DFB\u52A0"
+    ] })
+  ] });
+}
+export {
+  FileSelectionFeedback
+};

package/components/FileSelectionFeedback.module.css

@@ -0,0 +1,14 @@
+.feedback {
+  color: var(--danger);
+  font-size: 12px;
+  line-height: 1.6;
+  margin-top: 8px;
+  overflow-wrap: anywhere;
+}
+.feedback ul {
+  margin: 0;
+  padding-left: 16px;
+}
+.feedback p {
+  margin-top: 4px;
+}

package/components/FileTree.d.ts

@@ -0,0 +1,13 @@
+export interface FileTreeNode {
+    id: string;
+    name: string;
+    children?: FileTreeNode[];
+    disabled?: boolean;
+}
+export declare function FileTree({ nodes, label, selected, onSelect, defaultExpanded, }: {
+    nodes: FileTreeNode[];
+    label?: string;
+    selected?: string;
+    onSelect?(id: string): void;
+    defaultExpanded?: string[];
+}): import("react").JSX.Element;

package/components/FileTree.js

@@ -0,0 +1,125 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from "react";
+import { ChevronRight, File, Folder, FolderOpen } from "lucide-react";
+import s from "./FileTree.module.css";
+function FileTree({
+  nodes,
+  label = "\u6587\u4EF6\u6811",
+  selected,
+  onSelect,
+  defaultExpanded = []
+}) {
+  const [expanded, setExpanded] = useState(new Set(defaultExpanded)), [focused, setFocused] = useState();
+  const root = useRef(null);
+  const rows = useMemo(() => {
+    const result = [];
+    const walk = (items, level, parent) => items.forEach((node, i) => {
+      result.push({ node, level, parent, pos: i + 1, size: items.length });
+      if (node.children && expanded.has(node.id))
+        walk(node.children, level + 1, node.id);
+    });
+    walk(nodes, 1);
+    return result;
+  }, [nodes, expanded]);
+  const active = rows.find((r) => r.node.id === focused && !r.node.disabled)?.node.id || rows.find((r) => r.node.id === selected && !r.node.disabled)?.node.id || rows.find((r) => !r.node.disabled)?.node.id;
+  const toggle = (id) => setExpanded((old) => {
+    const next = new Set(old);
+    next.has(id) ? next.delete(id) : next.add(id);
+    return next;
+  });
+  const focus = (id) => {
+    if (!id) return;
+    setFocused(id);
+    root.current?.querySelectorAll('[role="treeitem"]').forEach((el) => {
+      if (el.dataset.id === id) el.focus();
+    });
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: root, role: "tree", "aria-label": label, className: s.tree, children: [
+    rows.map(({ node, level, parent, pos, size }, index) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "treeitem",
+        "data-id": node.id,
+        tabIndex: node.id === active ? 0 : -1,
+        "aria-level": level,
+        "aria-posinset": pos,
+        "aria-setsize": size,
+        "aria-selected": selected === node.id,
+        "aria-expanded": node.children ? expanded.has(node.id) : void 0,
+        "aria-disabled": node.disabled || void 0,
+        className: s.row,
+        style: { paddingLeft: 8 + (level - 1) * 20 },
+        onFocus: () => setFocused(node.id),
+        onClick: () => {
+          if (!node.disabled) {
+            onSelect?.(node.id);
+            focus(node.id);
+          }
+        },
+        onDoubleClick: () => {
+          if (node.children && !node.disabled) toggle(node.id);
+        },
+        onKeyDown: (e) => {
+          if (node.disabled) return;
+          const enabled = rows.filter((r) => !r.node.disabled), i = enabled.findIndex((r) => r.node.id === node.id);
+          if ([
+            "ArrowDown",
+            "ArrowUp",
+            "Home",
+            "End",
+            "ArrowRight",
+            "ArrowLeft",
+            "Enter",
+            " "
+          ].includes(e.key))
+            e.preventDefault();
+          if (e.key === "ArrowDown")
+            focus(enabled[Math.min(enabled.length - 1, i + 1)]?.node.id);
+          if (e.key === "ArrowUp")
+            focus(enabled[Math.max(0, i - 1)]?.node.id);
+          if (e.key === "Home") focus(enabled[0]?.node.id);
+          if (e.key === "End") focus(enabled.at(-1)?.node.id);
+          if (e.key === "ArrowRight" && node.children) {
+            if (!expanded.has(node.id)) toggle(node.id);
+            else
+              focus(
+                rows[index + 1]?.parent === node.id ? rows[index + 1]?.node.id : void 0
+              );
+          }
+          if (e.key === "ArrowLeft") {
+            if (node.children && expanded.has(node.id)) toggle(node.id);
+            else focus(parent);
+          }
+          if (e.key === "Enter" || e.key === " ") {
+            onSelect?.(node.id);
+            if (node.children) toggle(node.id);
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: s.disclosure,
+              "data-open": expanded.has(node.id),
+              onClick: (e) => {
+                if (node.children && !node.disabled) {
+                  e.stopPropagation();
+                  toggle(node.id);
+                  focus(node.id);
+                }
+              },
+              children: node.children && /* @__PURE__ */ jsx(ChevronRight, {})
+            }
+          ),
+          node.children ? expanded.has(node.id) ? /* @__PURE__ */ jsx(FolderOpen, {}) : /* @__PURE__ */ jsx(Folder, {}) : /* @__PURE__ */ jsx(File, {}),
+          /* @__PURE__ */ jsx("span", { className: s.name, children: node.name })
+        ]
+      },
+      node.id
+    )),
+    !nodes.length && /* @__PURE__ */ jsx("p", { className: s.empty, children: "\u6CA1\u6709\u6587\u4EF6" })
+  ] });
+}
+export {
+  FileTree
+};

package/components/FileTree.module.css

@@ -0,0 +1,66 @@
+.tree {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 6px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  min-height: 180px;
+  overflow: auto;
+}
+.row {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  min-height: 34px;
+  padding: 5px 10px;
+  border-radius: 6px;
+  cursor: default;
+  transition: background var(--motion-hover);
+}
+.row:hover {
+  background: var(--hover);
+}
+.row[aria-selected="true"] {
+  background: var(--selected);
+}
+.row[aria-disabled="true"] {
+  opacity: 0.4;
+}
+.row:focus-visible {
+  outline-offset: -2px;
+}
+.disclosure {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 18px;
+  height: 22px;
+}
+.disclosure svg {
+  width: 14px;
+  transition: transform var(--motion-chevron) var(--ease);
+}
+.disclosure[data-open="true"] svg {
+  transform: rotate(90deg);
+}
+.name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.empty {
+  margin: auto;
+  color: var(--muted);
+}
+
+.row > svg {
+  width: 17px;
+  height: 17px;
+  flex-shrink: 0;
+}
+
+.disclosure svg {
+  width: 14px;
+  height: 14px;
+}

package/components/Form.d.ts

@@ -0,0 +1,7 @@
+import type { FormHTMLAttributes, ReactNode } from "react";
+import type { FormController } from "./useFormState";
+export declare function Form<T extends Record<string, unknown>>({ controller, onSubmit, children, ...props }: Omit<FormHTMLAttributes<HTMLFormElement>, "onSubmit" | "onReset" | "children"> & {
+    controller: FormController<T>;
+    onSubmit(values: T): void | Promise<void>;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/components/Form.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import s from "./Form.module.css";
+function Form({
+  controller,
+  onSubmit,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "form",
+    {
+      ...props,
+      noValidate: true,
+      "aria-busy": controller.isSubmitting || void 0,
+      onSubmit: controller.handleSubmit(onSubmit),
+      onReset: (event) => {
+        event.preventDefault();
+        controller.reset();
+      },
+      children: /* @__PURE__ */ jsx("fieldset", { className: s.fields, disabled: controller.isSubmitting, children })
+    }
+  );
+}
+export {
+  Form
+};

package/components/Form.module.css

@@ -0,0 +1,7 @@
+.fields {
+  display: contents;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  min-width: 0;
+}

package/components/FormErrorSummary.d.ts

@@ -0,0 +1,6 @@
+export declare function FormErrorSummary({ errors, labels, onFocus, submitError, }: {
+    errors: Record<string, string | undefined>;
+    labels?: Record<string, string>;
+    onFocus(name: string): void;
+    submitError?: string;
+}): import("react").JSX.Element | null;

package/components/FormErrorSummary.js

@@ -0,0 +1,27 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import s from "./FormErrorSummary.module.css";
+function FormErrorSummary({
+  errors,
+  labels,
+  onFocus,
+  submitError
+}) {
+  const entries = Object.entries(errors).filter(
+    (entry) => !!entry[1]
+  );
+  if (!entries.length && !submitError) return null;
+  return /* @__PURE__ */ jsxs("div", { className: s.summary, role: "alert", children: [
+    submitError && /* @__PURE__ */ jsx("p", { children: submitError }),
+    entries.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("strong", { children: "\u8BF7\u68C0\u67E5\u4EE5\u4E0B\u5185\u5BB9" }),
+      /* @__PURE__ */ jsx("ul", { children: entries.map(([name, error]) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => onFocus(name), children: [
+        labels?.[name] || name,
+        "\uFF1A",
+        error
+      ] }) }, name)) })
+    ] })
+  ] });
+}
+export {
+  FormErrorSummary
+};

package/components/FormErrorSummary.module.css

@@ -0,0 +1,27 @@
+.summary {
+  padding: 12px 14px;
+  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--surface));
+  border-radius: var(--radius);
+  background: color-mix(in srgb, var(--danger) 5%, var(--surface));
+  color: var(--danger);
+  font-size: 12px;
+  line-height: 1.6;
+}
+.summary strong {
+  font-weight: 550;
+}
+.summary ul {
+  margin: 5px 0 0;
+  padding-left: 18px;
+}
+.summary button {
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  padding: 2px 0;
+  font-size: 12px;
+}
+.summary button:hover {
+  text-decoration: underline;
+}

package/components/FormField.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+import type { FieldOptions } from "./field";
+export declare function FormField({ children, pending, requiredIndicator, optional, onBlur, ...options }: FieldOptions & {
+    children: ReactNode;
+    pending?: boolean;
+    requiredIndicator?: "asterisk" | "text" | "none";
+    optional?: boolean;
+    onBlur?(): void;
+}): import("react").JSX.Element;

package/components/FormField.js

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useUIConfig } from "./UIProvider.js";
+import { FieldMessages } from "./FieldMessages.js";
+import { Spinner } from "./Spinner.js";
+import { useRef } from "react";
+import { FieldContext, useFieldControl } from "./field.js";
+import { FieldLabel } from "./FieldLabel.js";
+import s from "./FormField.module.css";
+function FormField({
+  children,
+  pending = false,
+  requiredIndicator,
+  optional = false,
+  onBlur,
+  ...options
+}) {
+  const config = useUIConfig();
+  const field = useFieldControl(options), root = useRef(null);
+  return /* @__PURE__ */ jsx(FieldContext, { value: field, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: root,
+      className: s.field,
+      "data-invalid": !!field.error,
+      "data-disabled": field.disabled || void 0,
+      onBlur: (event) => {
+        const next = event.relatedTarget, node = root.current;
+        if (next && node.contains(next)) return;
+        const portals = [...node.querySelectorAll("[aria-controls]")].map(
+          (control) => document.getElementById(
+            control.getAttribute("aria-controls") || ""
+          )
+        );
+        if (next && portals.some((portal) => portal?.contains(next))) return;
+        onBlur?.();
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: s.labelRow, children: [
+          /* @__PURE__ */ jsx(
+            FieldLabel,
+            {
+              label: field.label,
+              htmlFor: field.id,
+              required: field.required,
+              indicator: requiredIndicator ?? config.requiredIndicator,
+              optional
+            }
+          ),
+          pending && /* @__PURE__ */ jsx(Spinner, { size: 13, label: "\u6B63\u5728\u6821\u9A8C" + field.label })
+        ] }),
+        children,
+        /* @__PURE__ */ jsx(FieldMessages, { id: field.id, hint: field.hint, error: field.error })
+      ]
+    }
+  ) });
+}
+export {
+  FormField
+};