@robert-stackflow/oneui 0.0.0-stage → 0.2.0

package/components/contribution.d.ts

@@ -0,0 +1,57 @@
+export type ContributionDay = {
+    date: string;
+    count: number;
+    level?: 0 | 1 | 2 | 3 | 4;
+};
+export declare const calendarKey: (date: Date) => string;
+export declare function parseCalendarDay(key: string): Date | undefined;
+export declare function buildContributionCalendar({ data, year, startDate, endDate, weekStartsOn, today, allowFuture, thresholds, }: {
+    data: ContributionDay[];
+    year: number;
+    startDate?: string;
+    endDate?: string;
+    weekStartsOn?: 0 | 1;
+    today: string;
+    allowFuture?: boolean;
+    thresholds?: [number, number, number, number];
+}): {
+    valid: false;
+    cells: never[];
+    dates: never[];
+    weeks: number;
+    total: number;
+    months: never[];
+} | {
+    valid: true;
+    cells: {
+        date: string;
+        outside: boolean;
+        count: number;
+        level: number;
+        future: boolean;
+        missing: boolean;
+        index: number;
+        row: number;
+        column: number;
+    }[];
+    dates: {
+        date: string;
+        outside: boolean;
+        count: number;
+        level: number;
+        future: boolean;
+        missing: boolean;
+        index: number;
+        row: number;
+        column: number;
+    }[];
+    weeks: number;
+    total: number;
+    months: {
+        key: string;
+        column: number;
+        month: number;
+        year: number;
+    }[];
+};
+export type ContributionCellData = ReturnType<typeof buildContributionCalendar>["cells"][number];

package/components/contribution.js

@@ -0,0 +1,86 @@
+const calendarKey = (date) => date.toISOString().slice(0, 10);
+function parseCalendarDay(key) {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(key)) return void 0;
+  const date = /* @__PURE__ */ new Date(key + "T00:00:00Z");
+  return Number.isFinite(date.getTime()) && calendarKey(date) === key ? date : void 0;
+}
+function buildContributionCalendar({
+  data,
+  year,
+  startDate,
+  endDate,
+  weekStartsOn = 1,
+  today,
+  allowFuture = false,
+  thresholds
+}) {
+  const start = parseCalendarDay(startDate || year + "-01-01"), end = parseCalendarDay(endDate || year + "-12-31");
+  if (!start || !end || end < start || end.getTime() - start.getTime() > 366 * 864e5 * 5)
+    return {
+      valid: false,
+      cells: [],
+      dates: [],
+      weeks: 0,
+      total: 0,
+      months: []
+    };
+  const entries = /* @__PURE__ */ new Map();
+  for (const day of data) {
+    if (!parseCalendarDay(day.date)) continue;
+    const old = entries.get(day.date);
+    entries.set(day.date, {
+      ...day,
+      count: Math.max(0, Number.isFinite(day.count) ? day.count : 0) + (old?.count || 0)
+    });
+  }
+  const leading = (start.getUTCDay() - weekStartsOn + 7) % 7, days = Math.round((end.getTime() - start.getTime()) / 864e5) + 1, weeks = Math.ceil((leading + days) / 7), first = start.getTime() - leading * 864e5, max = Math.max(
+    1,
+    ...[...entries.values()].filter(
+      (day) => day.date >= calendarKey(start) && day.date <= calendarKey(end)
+    ).map((day) => day.count)
+  );
+  const cells = Array.from({ length: weeks * 7 }, (_, index) => {
+    const date = new Date(first + index * 864e5), key = calendarKey(date), outside = date < start || date > end, entry = entries.get(key), future = !allowFuture && key > today, count = future ? 0 : entry?.count || 0;
+    let level = count ? Math.min(4, Math.ceil(count / max * 4)) : 0;
+    if (entry?.level !== void 0)
+      level = Math.max(0, Math.min(4, entry.level));
+    if (thresholds)
+      level = count ? thresholds.filter((threshold) => count >= threshold).length : 0;
+    if (future) level = 0;
+    return {
+      date: key,
+      outside,
+      count,
+      level,
+      future,
+      missing: !entry,
+      index,
+      row: index % 7,
+      column: Math.floor(index / 7)
+    };
+  });
+  const dates = cells.filter((day) => !day.outside), months = [];
+  for (const day of dates) {
+    const month = day.date.slice(0, 7);
+    if (months.at(-1)?.key !== month)
+      months.push({
+        key: month,
+        column: day.column,
+        month: Number(month.slice(5)),
+        year: Number(month.slice(0, 4))
+      });
+  }
+  return {
+    valid: true,
+    cells,
+    dates,
+    weeks,
+    total: dates.reduce((n, day) => n + day.count, 0),
+    months
+  };
+}
+export {
+  buildContributionCalendar,
+  calendarKey,
+  parseCalendarDay
+};

package/components/dateConstraints.d.ts

@@ -0,0 +1,13 @@
+export type DateRange = [string, string];
+export type DateConstraints = {
+    minDate?: string;
+    maxDate?: string;
+    disabledDate?(date: string): boolean;
+};
+export declare const dateKey: (date: Date) => string;
+export declare function calendarDate(year: number, month: number, day?: number): Date;
+export declare function parseDate(value: string): Date | null;
+export declare const readDate: (value: string) => Date;
+export declare function isDateAllowed(value: string, { minDate, maxDate, disabledDate }?: DateConstraints): boolean;
+export declare function boundedDate(value: string, { minDate, maxDate }?: DateConstraints): string;
+export declare function isRangeAllowed(range: DateRange, constraints: DateConstraints): boolean;

package/components/dateConstraints.js

@@ -0,0 +1,44 @@
+const dateKey = (date) => `${String(date.getFullYear()).padStart(4, "0")}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+function calendarDate(year, month, day = 1) {
+  const date = /* @__PURE__ */ new Date(0);
+  date.setHours(12, 0, 0, 0);
+  date.setFullYear(year, month, day);
+  return date;
+}
+function parseDate(value) {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(value) || value.slice(0, 4) === "0000")
+    return null;
+  const [year, month, day] = value.split("-").map(Number), date = calendarDate(year, month - 1, day);
+  return dateKey(date) === value ? date : null;
+}
+const readDate = (value) => parseDate(value.slice(0, 10)) || /* @__PURE__ */ new Date();
+function isDateAllowed(value, { minDate, maxDate, disabledDate } = {}) {
+  return !!parseDate(value) && !(minDate && parseDate(minDate) && value < minDate) && !(maxDate && parseDate(maxDate) && value > maxDate) && !disabledDate?.(value);
+}
+function boundedDate(value, { minDate, maxDate } = {}) {
+  let next = parseDate(value) ? value : dateKey(/* @__PURE__ */ new Date());
+  if (minDate && parseDate(minDate) && next < minDate) next = minDate;
+  if (maxDate && parseDate(maxDate) && next > maxDate) next = maxDate;
+  return next;
+}
+function isRangeAllowed(range, constraints) {
+  const [start, end] = range;
+  if (start > end || !isDateAllowed(start, constraints) || !isDateAllowed(end, constraints))
+    return false;
+  if (!constraints.disabledDate) return true;
+  const cursor = parseDate(start);
+  while (dateKey(cursor) < end) {
+    cursor.setDate(cursor.getDate() + 1);
+    if (!isDateAllowed(dateKey(cursor), constraints)) return false;
+  }
+  return true;
+}
+export {
+  boundedDate,
+  calendarDate,
+  dateKey,
+  isDateAllowed,
+  isRangeAllowed,
+  parseDate,
+  readDate
+};

package/components/field.d.ts

@@ -0,0 +1,58 @@
+import type { AriaAttributes } from "react";
+export type FieldOptions = {
+    id?: string;
+    name?: string;
+    label?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    error?: string;
+    hint?: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: AriaAttributes["aria-invalid"];
+};
+export type FieldState = {
+    id: string;
+    name?: string;
+    label: string;
+    required: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    error?: string;
+    hint?: string;
+    descriptionId?: string;
+    invalid: AriaAttributes["aria-invalid"];
+};
+export declare const FieldContext: import("react").Context<FieldState | null>;
+export declare function fieldInputProps(field: FieldState): {
+    id: string;
+    name: string | undefined;
+    required: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    "aria-invalid": "false" | "grammar" | "spelling" | "true" | boolean | undefined;
+    "aria-describedby": string | undefined;
+};
+export declare function fieldTriggerProps(field: FieldState): {
+    id: string;
+    disabled: boolean;
+    "aria-label": string;
+    "aria-required": true | undefined;
+    "aria-readonly": true | undefined;
+    "aria-invalid": "false" | "grammar" | "spelling" | "true" | boolean | undefined;
+    "aria-describedby": string | undefined;
+};
+export declare const joinIds: (...values: (string | undefined)[]) => string | undefined;
+export declare function useFieldControl(options: FieldOptions): {
+    id: string;
+    name: string | undefined;
+    label: string;
+    required: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    error: string | undefined;
+    hint: string | undefined;
+    descriptionId: string | undefined;
+    invalid: "false" | "grammar" | "spelling" | "true" | boolean;
+    wrapped: boolean;
+};

package/components/field.js

@@ -0,0 +1,57 @@
+import { createContext, useContext, useId } from "react";
+const FieldContext = createContext(null);
+function fieldInputProps(field) {
+  return {
+    id: field.id,
+    name: field.name,
+    required: field.required,
+    disabled: field.disabled,
+    readOnly: field.readOnly,
+    "aria-invalid": field.invalid,
+    "aria-describedby": field.descriptionId
+  };
+}
+function fieldTriggerProps(field) {
+  return {
+    id: field.id,
+    disabled: field.disabled,
+    "aria-label": field.label,
+    "aria-required": field.required || void 0,
+    "aria-readonly": field.readOnly || void 0,
+    "aria-invalid": field.invalid,
+    "aria-describedby": field.descriptionId
+  };
+}
+const joinIds = (...values) => [
+  ...new Set(
+    values.flatMap((value) => value?.split(/\s+/).filter(Boolean) || [])
+  )
+].join(" ") || void 0;
+function useFieldControl(options) {
+  const inherited = useContext(FieldContext), generated = useId(), id = options.id || inherited?.id || generated, error = options.error ?? inherited?.error, hint = options.hint ?? inherited?.hint;
+  return {
+    id,
+    name: options.name ?? inherited?.name,
+    label: options.label ?? inherited?.label ?? "",
+    required: options.required ?? inherited?.required ?? false,
+    disabled: options.disabled ?? inherited?.disabled ?? false,
+    readOnly: options.readOnly ?? inherited?.readOnly ?? false,
+    error,
+    hint,
+    descriptionId: joinIds(
+      inherited?.descriptionId,
+      options["aria-describedby"],
+      hint ? id + "-hint" : void 0,
+      error ? id + "-error" : void 0
+    ),
+    invalid: error ? true : options["aria-invalid"] ?? inherited?.invalid ?? false,
+    wrapped: !!inherited
+  };
+}
+export {
+  FieldContext,
+  fieldInputProps,
+  fieldTriggerProps,
+  joinIds,
+  useFieldControl
+};

package/components/fileSelection.d.ts

@@ -0,0 +1,21 @@
+export type FileConstraints = {
+    accept?: string;
+    maxSize?: number;
+    maxFiles?: number;
+    selectedCount?: number;
+    multiple?: boolean;
+};
+export type FileRejection = {
+    file: File;
+    code: "type" | "size" | "count";
+    message: string;
+};
+export type FileSelectionResult = {
+    accepted: File[];
+    rejected: FileRejection[];
+};
+export declare function formatFileSize(bytes: number): string;
+export declare function validateFiles(files: readonly File[], { accept, maxSize, maxFiles, selectedCount, multiple, }?: FileConstraints): {
+    accepted: File[];
+    rejected: FileRejection[];
+};

package/components/fileSelection.js

@@ -0,0 +1,43 @@
+function formatFileSize(bytes) {
+  const unit = bytes >= 1024 * 1024 ? "MB" : bytes >= 1024 ? "KB" : "B", divisor = unit === "MB" ? 1024 * 1024 : unit === "KB" ? 1024 : 1;
+  return `${Math.round(bytes / divisor * 100) / 100} ${unit}`;
+}
+function validateFiles(files, {
+  accept,
+  maxSize,
+  maxFiles,
+  selectedCount = 0,
+  multiple = true
+} = {}) {
+  const rules = (accept || "").split(",").map((rule) => rule.trim().toLowerCase()).filter(Boolean);
+  const size = maxSize === void 0 || !Number.isFinite(maxSize) ? Infinity : Math.max(0, maxSize);
+  const limit = maxFiles === void 0 || !Number.isFinite(maxFiles) ? Infinity : Math.max(0, Math.floor(maxFiles));
+  const existing = Number.isFinite(selectedCount) ? Math.max(0, Math.floor(selectedCount)) : 0, slots = Math.max(0, Math.min(limit, multiple ? Infinity : 1) - existing);
+  const accepted = [], rejected = [];
+  for (const file of files) {
+    const name = file.name.toLowerCase(), type = file.type.toLowerCase();
+    const matches = !rules.length || rules.some(
+      (rule) => rule === "*" || rule === "*/*" || (rule.startsWith(".") ? name.endsWith(rule) : rule.endsWith("/*") ? type.startsWith(rule.slice(0, -1)) : type === rule)
+    );
+    if (!matches)
+      rejected.push({ file, code: "type", message: "\u6587\u4EF6\u7C7B\u578B\u4E0D\u53D7\u652F\u6301" });
+    else if (file.size > size)
+      rejected.push({
+        file,
+        code: "size",
+        message: `\u6587\u4EF6\u4E0D\u80FD\u8D85\u8FC7 ${formatFileSize(size)}`
+      });
+    else if (accepted.length >= slots)
+      rejected.push({
+        file,
+        code: "count",
+        message: `\u6700\u591A\u9009\u62E9 ${Math.min(limit, multiple ? Infinity : 1)} \u4E2A\u6587\u4EF6`
+      });
+    else accepted.push(file);
+  }
+  return { accepted, rejected };
+}
+export {
+  formatFileSize,
+  validateFiles
+};

package/components/hierarchy.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+export type HierarchyOption = {
+    value: string;
+    label: string;
+    icon?: ReactNode;
+    count?: number;
+    keywords?: string[];
+    children?: HierarchyOption[];
+    disabled?: boolean;
+    selectable?: boolean;
+    isLeaf?: boolean;
+};
+export type HierarchyLoader = (node: HierarchyOption, signal: AbortSignal) => Promise<HierarchyOption[]>;
+export type HierarchyEntry = {
+    node: HierarchyOption;
+    path: HierarchyOption[];
+    disabled: boolean;
+    parent?: string;
+    branch: boolean;
+};
+export declare function indexHierarchy(options: HierarchyOption[], children: (node: HierarchyOption) => HierarchyOption[] | undefined, lazy?: boolean): Map<string, HierarchyEntry>;
+export declare function hierarchyMatches(entry: HierarchyEntry, query: string): boolean;
+export declare function hierarchyLeaves(entry: HierarchyEntry, entries: Map<string, HierarchyEntry>): string[];

package/components/hierarchy.js

@@ -0,0 +1,33 @@
+function indexHierarchy(options, children, lazy = false) {
+  const entries = /* @__PURE__ */ new Map();
+  const walk = (nodes, path, disabled) => {
+    for (const node of nodes) {
+      if (entries.has(node.value)) continue;
+      const next = [...path, node], nested = children(node);
+      entries.set(node.value, {
+        node,
+        path: next,
+        disabled: disabled || !!node.disabled,
+        parent: path.at(-1)?.value,
+        branch: !!nested?.length || node.isLeaf === false && nested === void 0 && lazy
+      });
+      if (nested?.length) walk(nested, next, disabled || !!node.disabled);
+    }
+  };
+  walk(options, [], false);
+  return entries;
+}
+function hierarchyMatches(entry, query) {
+  const text = entry.path.flatMap((node) => [node.label, node.value, ...node.keywords || []]).join(" ").normalize("NFKC").toLocaleLowerCase();
+  return query.normalize("NFKC").toLocaleLowerCase().trim().split(/\s+/).every((word) => text.includes(word));
+}
+function hierarchyLeaves(entry, entries) {
+  return [...entries.values()].filter(
+    (item) => !item.disabled && !item.branch && item.node.selectable !== false && item.path.some((node) => node.value === entry.node.value)
+  ).map((item) => item.node.value);
+}
+export {
+  hierarchyLeaves,
+  hierarchyMatches,
+  indexHierarchy
+};

package/components/iconCatalog.d.ts

@@ -0,0 +1,13 @@
+import type { LucideIconData } from "lucide-react";
+export type CatalogEntry = LucideIconData & {
+    name: string;
+    aliases: string[];
+    categories: string[];
+};
+export declare function loadCatalog(): Promise<CatalogEntry[]>;
+export declare function useIconCatalog(enabled?: boolean): {
+    items: CatalogEntry[] | undefined;
+    error: boolean;
+    retry: () => void;
+};
+export declare const iconCategories: Record<string, string>;

package/components/iconCatalog.js

@@ -0,0 +1,80 @@
+import { useEffect, useState } from "react";
+const url = new URL("../assets/icon-catalog.json", import.meta.url).href;
+let cache;
+let pending;
+function loadCatalog() {
+  return pending ||= fetch(url).then((r) => {
+    if (!r.ok) throw Error("\u56FE\u6807\u52A0\u8F7D\u5931\u8D25");
+    return r.json();
+  }).then((data) => cache = data).catch((e) => {
+    pending = void 0;
+    throw e;
+  });
+}
+function useIconCatalog(enabled = true) {
+  const [items, setItems] = useState(cache), [error, setError] = useState(false), [revision, setRevision] = useState(0);
+  useEffect(() => {
+    if (!enabled) return;
+    let alive = true;
+    setError(false);
+    loadCatalog().then((data) => {
+      if (alive) setItems(data);
+    }).catch(() => {
+      if (alive) setError(true);
+    });
+    return () => {
+      alive = false;
+    };
+  }, [enabled, revision]);
+  return { items, error, retry: () => setRevision((x) => x + 1) };
+}
+const iconCategories = {
+  accessibility: "\u65E0\u969C\u788D",
+  account: "\u8D26\u6237",
+  animals: "\u52A8\u7269",
+  arrows: "\u7BAD\u5934",
+  buildings: "\u5EFA\u7B51",
+  charts: "\u56FE\u8868",
+  communication: "\u901A\u4FE1",
+  connectivity: "\u8FDE\u63A5",
+  cursors: "\u5149\u6807",
+  design: "\u8BBE\u8BA1",
+  development: "\u5F00\u53D1",
+  devices: "\u8BBE\u5907",
+  emoji: "\u8868\u60C5",
+  files: "\u6587\u4EF6",
+  finance: "\u91D1\u878D",
+  "food-beverage": "\u9910\u996E",
+  gaming: "\u6E38\u620F",
+  home: "\u5BB6\u5C45",
+  layout: "\u5E03\u5C40",
+  mail: "\u90AE\u4EF6",
+  math: "\u6570\u5B66",
+  medical: "\u533B\u7597",
+  multimedia: "\u591A\u5A92\u4F53",
+  nature: "\u81EA\u7136",
+  navigation: "\u5BFC\u822A",
+  notifications: "\u901A\u77E5",
+  people: "\u4EBA\u7269",
+  photography: "\u6444\u5F71",
+  science: "\u79D1\u5B66",
+  seasons: "\u5B63\u8282",
+  security: "\u5B89\u5168",
+  shapes: "\u5F62\u72B6",
+  shopping: "\u8D2D\u7269",
+  social: "\u793E\u4EA4",
+  sports: "\u8FD0\u52A8",
+  sustainability: "\u53EF\u6301\u7EED",
+  text: "\u6587\u672C",
+  time: "\u65F6\u95F4",
+  tools: "\u5DE5\u5177",
+  transportation: "\u4EA4\u901A",
+  travel: "\u65C5\u884C",
+  weather: "\u5929\u6C14",
+  uncategorized: "\u5176\u4ED6"
+};
+export {
+  iconCategories,
+  loadCatalog,
+  useIconCatalog
+};