@robert-stackflow/oneui 0.0.0-stage → 0.2.0

package/components/TreeTable.d.ts

@@ -0,0 +1,15 @@
+import { type Column } from "./Table";
+export type TreeTableProps<T, K extends string | number> = {
+    rows: T[];
+    columns: Column<T>[];
+    rowKey(row: T): K;
+    getChildren(row: T): T[] | undefined;
+    rowLabel(row: T): string;
+    label?: string;
+    treeColumn?: string;
+    expanded?: K[];
+    defaultExpanded?: K[];
+    defaultExpandAll?: boolean;
+    onExpandedChange?(keys: K[]): void;
+};
+export declare function TreeTable<T, K extends string | number>({ rows, columns, rowKey, getChildren, rowLabel, label, treeColumn, expanded, defaultExpanded, defaultExpandAll, onExpandedChange, }: TreeTableProps<T, K>): import("react").JSX.Element;

package/components/TreeTable.js

@@ -0,0 +1,151 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from "react";
+import { Table } from "./Table.js";
+import { IconButton } from "./IconButton.js";
+import { DisclosureChevron } from "./DisclosureChevron.js";
+import { TreeGuides } from "./TreeGuides.js";
+import s from "./TreeTable.module.css";
+function TreeTable({
+  rows,
+  columns,
+  rowKey,
+  getChildren,
+  rowLabel,
+  label = "\u5C42\u7EA7\u8868\u683C",
+  treeColumn = columns[0]?.key,
+  expanded,
+  defaultExpanded = [],
+  defaultExpandAll = false,
+  onExpandedChange
+}) {
+  const [local, setLocal] = useState(() => {
+    if (!defaultExpandAll) return defaultExpanded;
+    const keys2 = [], seen = /* @__PURE__ */ new Set();
+    const walk = (nodes) => nodes.forEach((row) => {
+      const key = rowKey(row);
+      if (seen.has(key)) return;
+      seen.add(key);
+      const children = getChildren(row);
+      if (children?.length) {
+        keys2.push(key);
+        walk(children);
+      }
+    });
+    walk(rows);
+    return keys2;
+  });
+  const keys = expanded ?? local, open = new Set(keys);
+  const root = useRef(null), [focused, setFocused] = useState();
+  const visible = useMemo(() => {
+    const entries = [], seen = /* @__PURE__ */ new Set();
+    const walk = (nodes, depth, continuations) => nodes.forEach((row, i) => {
+      const key = rowKey(row);
+      if (seen.has(key)) return;
+      seen.add(key);
+      const children = getChildren(row) || [], last = i === nodes.length - 1;
+      entries.push({
+        row,
+        key,
+        depth,
+        last,
+        continuations,
+        children,
+        position: i + 1,
+        size: nodes.length
+      });
+      if (children.length && open.has(key))
+        walk(
+          children,
+          depth + 1,
+          depth === 0 ? [] : [...continuations, !last]
+        );
+    });
+    walk(rows, 0, []);
+    return entries;
+  }, [rows, getChildren, rowKey, keys]);
+  const toggle = (key) => {
+    const next = open.has(key) ? keys.filter((k) => k !== key) : [...keys, key];
+    if (expanded === void 0) setLocal(next);
+    onExpandedChange?.(next);
+  };
+  const focus = (key) => {
+    setFocused(key);
+    const index = visible.findIndex((entry) => entry.key === key);
+    root.current?.querySelectorAll("tbody tr")[index]?.focus();
+  };
+  const active = visible.some((entry) => entry.key === focused) ? focused : visible[0]?.key;
+  return /* @__PURE__ */ jsx("div", { className: s.root, ref: root, children: /* @__PURE__ */ jsx(
+    Table,
+    {
+      label,
+      role: "treegrid",
+      rows: visible,
+      rowKey: (entry) => typeof entry.key + ":" + String(entry.key),
+      rowAttributes: (entry) => ({
+        "aria-level": entry.depth + 1,
+        "aria-posinset": entry.position,
+        "aria-setsize": entry.size,
+        "aria-expanded": entry.children.length ? open.has(entry.key) : void 0,
+        "data-tree-root": entry.depth === 0,
+        tabIndex: entry.key === active ? 0 : -1,
+        onFocus: (event) => {
+          if (event.target === event.currentTarget) setFocused(entry.key);
+        },
+        onKeyDown: (event) => {
+          if (event.target !== event.currentTarget) return;
+          const index = visible.indexOf(entry);
+          let next;
+          if (event.key === "ArrowDown")
+            next = visible[Math.min(visible.length - 1, index + 1)];
+          else if (event.key === "ArrowUp")
+            next = visible[Math.max(0, index - 1)];
+          else if (event.key === "Home") next = visible[0];
+          else if (event.key === "End") next = visible.at(-1);
+          else if (event.key === "ArrowRight") {
+            if (entry.children.length && !open.has(entry.key))
+              toggle(entry.key);
+            else if (visible[index + 1]?.depth > entry.depth)
+              next = visible[index + 1];
+          } else if (event.key === "ArrowLeft") {
+            if (entry.children.length && open.has(entry.key))
+              toggle(entry.key);
+            else
+              next = visible.slice(0, index).reverse().find((parent) => parent.depth < entry.depth);
+          } else return;
+          event.preventDefault();
+          if (next) focus(next.key);
+        }
+      }),
+      columns: columns.map((column) => ({
+        key: column.key,
+        title: column.title,
+        align: column.align,
+        width: column.width,
+        render: (entry) => column.key !== treeColumn ? column.render(entry.row) : /* @__PURE__ */ jsxs("div", { className: s.cell, style: { paddingLeft: entry.depth * 24 }, children: [
+          /* @__PURE__ */ jsx(
+            TreeGuides,
+            {
+              depth: entry.depth,
+              continuations: entry.continuations,
+              last: entry.last
+            }
+          ),
+          entry.children.length ? /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              label: `${open.has(entry.key) ? "\u6298\u53E0" : "\u5C55\u5F00"} ${rowLabel(entry.row)}`,
+              className: s.expander,
+              onClick: () => toggle(entry.key),
+              "aria-expanded": open.has(entry.key),
+              children: /* @__PURE__ */ jsx(DisclosureChevron, { expanded: open.has(entry.key) })
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: s.spacer }),
+          /* @__PURE__ */ jsx("div", { className: s.content, children: column.render(entry.row) })
+        ] })
+      }))
+    }
+  ) });
+}
+export {
+  TreeTable
+};

package/components/TreeTable.module.css

@@ -0,0 +1,53 @@
+.root {
+  border: 1px solid var(--line);
+  border-radius: var(--card-radius);
+  background: var(--surface);
+  overflow: hidden;
+  box-shadow: var(--card-shadow, none);
+}
+.root table td {
+  padding: 0 18px;
+  border-bottom: 0;
+}
+.root table th {
+  padding: 14px 18px;
+}
+.root tr:focus-visible {
+  outline: 1px solid var(--accent);
+  outline-offset: -1px;
+}
+.root table tr[data-tree-root="true"]:not(:first-child) td {
+  border-top: 1px solid var(--line);
+}
+.cell {
+  --tree-elbow-gap: 8px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 72px;
+  padding-block: 14px;
+  min-width: 260px;
+  white-space: normal;
+}
+.expander,
+.spacer {
+  flex: 0 0 24px;
+  width: 24px;
+  height: 26px;
+}
+.content {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+}
+.expander svg {
+  width: 14px;
+  height: 14px;
+}
+.expander[aria-expanded="false"] svg {
+  rotate: -90deg;
+}
+.expander[aria-expanded="true"] svg {
+  rotate: 0deg;
+}

package/components/UIProvider.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+export type UIConfig = {
+    toastPosition: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+    tooltipPlacement: "top" | "bottom" | "left" | "right";
+    requiredIndicator: "asterisk" | "text" | "none";
+};
+export declare function UIProvider({ children, ...config }: Partial<UIConfig> & {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare const useUIConfig: () => UIConfig;

package/components/UIProvider.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const defaults = {
+  toastPosition: "bottom-right",
+  tooltipPlacement: "top",
+  requiredIndicator: "none"
+};
+const Context = createContext(defaults);
+function UIProvider({
+  children,
+  ...config
+}) {
+  const parent = useContext(Context);
+  return /* @__PURE__ */ jsx(Context, { value: { ...parent, ...config }, children });
+}
+const useUIConfig = () => useContext(Context);
+export {
+  UIProvider,
+  useUIConfig
+};

package/components/UnderlinedTab.d.ts

@@ -0,0 +1,2 @@
+import { type TabListProps } from "./TabList";
+export declare function UnderlinedTab<T extends string>(props: Omit<TabListProps<T>, "orientation">): import("react").JSX.Element;

package/components/UnderlinedTab.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { TabList } from "./TabList.js";
+function UnderlinedTab(props) {
+  return /* @__PURE__ */ jsx(TabList, { ...props, variant: "underlined" });
+}
+export {
+  UnderlinedTab
+};

package/components/Upload.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from "react";
+import { type FieldOptions } from "./field";
+import { type FileConstraints, type FileRejection, type FileSelectionResult } from "./fileSelection";
+import type { UploadFile, UploadRequest, UploadResult } from "./uploadTypes";
+export type UploadProps = Omit<FieldOptions, "name"> & Omit<FileConstraints, "selectedCount"> & {
+    label: string;
+    value?: UploadFile[];
+    defaultValue?: UploadFile[];
+    onChange?(files: UploadFile[]): void;
+    request?: UploadRequest;
+    autoUpload?: boolean;
+    concurrency?: number;
+    draggable?: boolean;
+    showThumbnails?: boolean;
+    description?: ReactNode;
+    onReject?(rejections: FileRejection[]): void;
+    onValidation?(result: FileSelectionResult): void;
+    onSuccess?(file: UploadFile, result: UploadResult | void): void;
+    onError?(file: UploadFile, error: unknown): void;
+    onPreview?(file: UploadFile, source?: string): void;
+};
+export declare function Upload({ label, value, defaultValue, onChange, request, autoUpload, concurrency, draggable, showThumbnails, description, onReject, onValidation, onSuccess, onError, onPreview, accept, maxSize, maxFiles, multiple, ...options }: UploadProps): import("react").JSX.Element;

package/components/Upload.js

@@ -0,0 +1,165 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { FilePicker } from "./FilePicker.js";
+import { FileDropZone } from "./FileDropZone.js";
+import { FileSelectionFeedback } from "./FileSelectionFeedback.js";
+import { UploadList } from "./UploadList.js";
+import { Button } from "./Button.js";
+import { Dialog } from "./Dialog.js";
+import { useFieldControl } from "./field.js";
+import { useUploadQueue } from "./useUploadQueue.js";
+import {
+  validateFiles
+} from "./fileSelection.js";
+import s from "./Upload.module.css";
+function Upload({
+  label,
+  value,
+  defaultValue,
+  onChange,
+  request,
+  autoUpload = true,
+  concurrency = 3,
+  draggable = true,
+  showThumbnails = true,
+  description,
+  onReject,
+  onValidation,
+  onSuccess,
+  onError,
+  onPreview,
+  accept,
+  maxSize,
+  maxFiles,
+  multiple,
+  ...options
+}) {
+  const field = useFieldControl({ ...options, label }), blocked = field.disabled || field.readOnly, queue = useUploadQueue({
+    value,
+    defaultValue,
+    onChange,
+    request,
+    autoUpload,
+    concurrency,
+    disabled: blocked,
+    onSuccess,
+    onError
+  }), [rejected, setRejected] = useState([]), [preview, setPreview] = useState(), root = useRef(null);
+  const receive = (result) => {
+    if (blocked) return;
+    const checked = validateFiles(result.accepted, {
+      accept,
+      maxSize,
+      maxFiles,
+      multiple,
+      selectedCount: queue.current.current.length
+    }), combined = {
+      accepted: checked.accepted,
+      rejected: [...result.rejected, ...checked.rejected]
+    };
+    setRejected(combined.rejected);
+    onValidation?.(combined);
+    if (combined.rejected.length) onReject?.(combined.rejected);
+    if (checked.accepted.length) queue.add(checked.accepted);
+  };
+  const constraints = {
+    accept,
+    maxSize,
+    maxFiles,
+    multiple,
+    selectedCount: queue.files.length
+  }, picker = /* @__PURE__ */ jsx(
+    FilePicker,
+    {
+      ...constraints,
+      label: `\u9009\u62E9${label}`,
+      disabled: blocked,
+      showErrors: false,
+      onFiles: () => {
+      },
+      onValidation: receive
+    }
+  );
+  useEffect(() => {
+    if (!queue.files.length) setRejected((old) => old.length ? [] : old);
+    if (preview && !queue.files.some((file) => file.id === preview.id))
+      setPreview(void 0);
+  }, [queue.files, preview]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: field.id,
+      role: "group",
+      "aria-label": label,
+      "aria-invalid": field.invalid,
+      "aria-describedby": field.descriptionId,
+      className: s.upload,
+      ref: root,
+      tabIndex: -1,
+      onFocus: (event) => {
+        if (event.target === root.current)
+          root.current.querySelector("button:not(:disabled)")?.focus();
+      },
+      children: [
+        draggable ? /* @__PURE__ */ jsx(
+          FileDropZone,
+          {
+            ...constraints,
+            label: `${label}\u62D6\u62FD\u533A\u57DF`,
+            title: "\u6DFB\u52A0\u5230\u4E0A\u4F20\u5217\u8868",
+            disabled: blocked,
+            onFiles: () => {
+            },
+            onValidation: receive,
+            showErrors: false,
+            children: /* @__PURE__ */ jsxs("div", { className: s.drop, children: [
+              picker,
+              description && /* @__PURE__ */ jsx("div", { className: s.description, children: description })
+            ] })
+          }
+        ) : /* @__PURE__ */ jsxs("div", { className: s.row, children: [
+          picker,
+          description && /* @__PURE__ */ jsx("div", { className: s.description, children: description })
+        ] }),
+        /* @__PURE__ */ jsx(FileSelectionFeedback, { rejections: rejected }),
+        !autoUpload && request && queue.files.some((file) => file.status === "ready") && /* @__PURE__ */ jsx("div", { className: s.row, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            disabled: blocked,
+            onClick: () => queue.files.filter((file) => file.status === "ready").forEach((file) => queue.start(file.id)),
+            children: "\u5F00\u59CB\u5168\u90E8\u4E0A\u4F20"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          UploadList,
+          {
+            files: queue.files,
+            label: `${label}\u5217\u8868`,
+            disabled: blocked,
+            showThumbnails,
+            onStart: request ? queue.start : void 0,
+            onCancel: queue.cancel,
+            onRetry: request ? queue.retry : void 0,
+            onRemove: queue.remove,
+            onPreview: onPreview || ((file, source) => {
+              if (source) setPreview({ id: file.id, name: file.name, source });
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Dialog,
+          {
+            open: !!preview,
+            onClose: () => setPreview(void 0),
+            title: preview?.name || "\u6587\u4EF6\u9884\u89C8",
+            children: preview && /* @__PURE__ */ jsx("img", { className: s.preview, src: preview.source, alt: preview.name })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Upload
+};

package/components/Upload.module.css

@@ -0,0 +1,36 @@
+.upload {
+  min-width: 0;
+  outline: none;
+}
+.drop {
+  border: 1px dashed color-mix(in srgb, var(--fg) 20%, var(--surface));
+  border-radius: var(--radius);
+  background: var(--canvas);
+  min-height: 132px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 20px;
+}
+.description {
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 20px;
+  overflow-wrap: anywhere;
+}
+.row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin: 8px 0;
+}
+.preview {
+  display: block;
+  max-width: 100%;
+  max-height: 65vh;
+  object-fit: contain;
+  margin: auto;
+}

package/components/UploadList.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+import { type UploadItemActions } from "./UploadListItem";
+import type { UploadFile } from "./uploadTypes";
+export type UploadListProps = UploadItemActions & {
+    files: UploadFile[];
+    label?: string;
+    emptyText?: ReactNode;
+};
+export declare function UploadList({ files, label, emptyText, ...actions }: UploadListProps): import("react").JSX.Element;

package/components/UploadList.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { UploadListItem } from "./UploadListItem.js";
+import s from "./UploadList.module.css";
+function UploadList({
+  files,
+  label = "\u4E0A\u4F20\u6587\u4EF6\u5217\u8868",
+  emptyText = "\u5C1A\u672A\u6DFB\u52A0\u6587\u4EF6",
+  ...actions
+}) {
+  return /* @__PURE__ */ jsx("div", { className: s.root, children: files.length ? /* @__PURE__ */ jsx("ul", { className: s.list, "aria-label": label, children: files.map((file) => /* @__PURE__ */ jsx(UploadListItem, { file, ...actions }, file.id)) }) : /* @__PURE__ */ jsx("div", { role: "status", className: s.empty, children: emptyText }) });
+}
+export {
+  UploadList
+};

package/components/UploadList.module.css

@@ -0,0 +1,130 @@
+.root {
+  min-width: 0;
+}
+.list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.item {
+  min-height: 84px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+  padding: 14px 0;
+  animation: itemIn 140ms var(--ease);
+}
+.item + .item {
+  border-top: var(--separator-width) var(--separator-style)
+    var(--separator-color);
+}
+.thumbnail {
+  display: grid;
+  place-items: center;
+  flex: 0 0 42px;
+  width: 42px;
+  height: 42px;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  background: var(--soft);
+  color: var(--muted);
+  padding: 0;
+  overflow: hidden;
+}
+button.thumbnail {
+  cursor: pointer;
+}
+.thumbnail img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.thumbnail > svg {
+  width: 20px;
+  height: 20px;
+}
+.body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  line-height: 20px;
+}
+.meta {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  font-size: 11px;
+  color: var(--muted);
+  line-height: 18px;
+}
+.status {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.status svg {
+  width: 13px;
+  height: 13px;
+}
+.item[data-status="success"] .status {
+  color: var(--success);
+}
+.item[data-status="error"] .status,
+.error {
+  color: var(--danger);
+}
+.error {
+  font-size: 11px;
+  line-height: 18px;
+  overflow-wrap: anywhere;
+}
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+}
+.empty {
+  color: var(--muted);
+  font-size: 12px;
+  padding: 18px 0;
+  text-align: center;
+}
+@keyframes itemIn {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@media (max-width: 620px) {
+  .item {
+    gap: 8px;
+  }
+  .actions {
+    flex-direction: column;
+  }
+  .thumbnail {
+    width: 36px;
+    height: 36px;
+    flex-basis: 36px;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .item {
+    animation: none;
+  }
+}

package/components/UploadListItem.d.ts

@@ -0,0 +1,13 @@
+import type { UploadFile } from "./uploadTypes";
+export type UploadItemActions = {
+    disabled?: boolean;
+    showThumbnails?: boolean;
+    onStart?(id: string): void;
+    onRetry?(id: string): void;
+    onCancel?(id: string): void;
+    onRemove?(id: string): void;
+    onPreview?(file: UploadFile, source?: string): void;
+};
+export declare function UploadListItem({ file, disabled, showThumbnails, onStart, onRetry, onCancel, onRemove, onPreview, }: UploadItemActions & {
+    file: UploadFile;
+}): import("react").JSX.Element;