@robert-stackflow/oneui 0.0.0-stage → 0.1.0

package/components/ContributionCalendar.js

@@ -0,0 +1,201 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useCallback,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { ContributionCell } from "./ContributionCell.js";
+import {
+  buildContributionCalendar,
+  parseCalendarDay
+} from "./contribution.js";
+import s from "./ContributionCalendar.module.css";
+function ContributionCalendar({
+  data,
+  year = (/* @__PURE__ */ new Date()).getFullYear(),
+  startDate,
+  endDate,
+  weekStartsOn = 1,
+  value,
+  onChange,
+  label = "\u6D3B\u52A8\u8BB0\u5F55",
+  unit = "\u6B21\u6D3B\u52A8",
+  locale = "zh-CN",
+  color = "var(--success)",
+  emptyMode = "zero",
+  allowFuture = false,
+  today,
+  thresholds
+}) {
+  const current = /* @__PURE__ */ new Date(), todayKey = today || [
+    current.getFullYear(),
+    String(current.getMonth() + 1).padStart(2, "0"),
+    String(current.getDate()).padStart(2, "0")
+  ].join("-");
+  const model = useMemo(
+    () => buildContributionCalendar({
+      data,
+      year,
+      startDate,
+      endDate,
+      weekStartsOn,
+      today: todayKey,
+      allowFuture,
+      thresholds
+    }),
+    [
+      data,
+      year,
+      startDate,
+      endDate,
+      weekStartsOn,
+      todayKey,
+      allowFuture,
+      thresholds
+    ]
+  );
+  const root = useRef(null), [focused, setFocused] = useState(), active = model.dates.some((day) => day.date === focused) ? focused : model.dates.some((day) => day.date === value) ? value : model.dates.some((day) => day.date === todayKey) ? todayKey : model.dates[0]?.date;
+  const formatter = useMemo(
+    () => new Intl.DateTimeFormat(locale, {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      timeZone: "UTC"
+    }),
+    [locale]
+  ), numbers = useMemo(() => new Intl.NumberFormat(locale), [locale]);
+  const choose = useCallback((date) => onChange?.(date), [onChange]);
+  const move = useCallback(
+    (event, day) => {
+      let nextIndex;
+      if (event.key === "ArrowUp" && day.row === 0 || event.key === "ArrowDown" && day.row === 6 || event.key === "ArrowLeft" && day.column === 0 || event.key === "ArrowRight" && day.column === model.weeks - 1) {
+        event.preventDefault();
+        return;
+      }
+      const offset = {
+        ArrowUp: -1,
+        ArrowDown: 1,
+        ArrowLeft: -7,
+        ArrowRight: 7
+      }[event.key];
+      if (offset !== void 0) nextIndex = day.index + offset;
+      else if (event.key === "Home")
+        nextIndex = event.ctrlKey ? model.dates[0]?.index : model.dates.find((item) => item.row === day.row)?.index;
+      else if (event.key === "End")
+        nextIndex = event.ctrlKey ? model.dates.at(-1)?.index : model.dates.findLast((item) => item.row === day.row)?.index;
+      if (nextIndex === void 0) return;
+      event.preventDefault();
+      const date = model.cells[nextIndex];
+      if (!date || date.outside) return;
+      setFocused(date.date);
+      const node = root.current?.querySelector(
+        '[data-date="' + date.date + '"]'
+      );
+      node?.focus({ preventScroll: true });
+      node?.scrollIntoView({
+        block: "nearest",
+        inline: "nearest",
+        behavior: "instant"
+      });
+    },
+    [model]
+  );
+  if (!model.valid) return /* @__PURE__ */ jsx("p", { role: "alert", children: "\u65E5\u671F\u8303\u56F4\u65E0\u6548\u3002" });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: s.calendar,
+      style: { "--calendar-color": color },
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: s.header, children: [
+          /* @__PURE__ */ jsx("h3", { children: label }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            numbers.format(model.total),
+            " ",
+            unit
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: s.scroll, ref: root, children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: s.months,
+              style: {
+                gridTemplateColumns: "28px repeat(" + model.weeks + ",var(--calendar-cell))"
+              },
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ jsx("span", {}),
+                model.months.map((month) => /* @__PURE__ */ jsxs("span", { style: { gridColumn: month.column + 2 }, children: [
+                  month.month,
+                  "\u6708"
+                ] }, month.key))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "grid",
+              "aria-label": label,
+              "aria-rowcount": 7,
+              "aria-colcount": model.weeks,
+              children: Array.from({ length: 7 }, (_, row) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  role: "row",
+                  className: s.row,
+                  style: {
+                    gridTemplateColumns: "28px repeat(" + model.weeks + ",var(--calendar-cell))"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: s.weekday, role: "rowheader", children: ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"][(row + weekStartsOn) % 7] }),
+                    Array.from({ length: model.weeks }, (_2, column) => {
+                      const day = model.cells[column * 7 + row];
+                      const text = formatter.format(parseCalendarDay(day.date)) + (day.future ? "\uFF0C\u672A\u6765\u65E5\u671F" : emptyMode === "missing" && day.missing ? "\uFF0C\u6682\u65E0\u6570\u636E" : "\uFF0C" + numbers.format(day.count) + " " + unit);
+                      return /* @__PURE__ */ jsx(
+                        ContributionCell,
+                        {
+                          day,
+                          label: text,
+                          selected: value === day.date,
+                          tabIndex: active === day.date ? 0 : -1,
+                          missing: emptyMode === "missing" && day.missing && !day.future,
+                          onSelect: choose,
+                          onFocus: setFocused,
+                          onKeyDown: move
+                        },
+                        day.date
+                      );
+                    })
+                  ]
+                },
+                row
+              ))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("footer", { className: s.footer, children: [
+          value && /* @__PURE__ */ jsx("span", { children: value }),
+          /* @__PURE__ */ jsxs("div", { className: s.legend, "aria-label": "\u6D3B\u52A8\u6B21\u6570\u7531\u5C11\u5230\u591A", children: [
+            /* @__PURE__ */ jsx("span", { children: "\u5C11" }),
+            [0, 1, 2, 3, 4].map((level) => /* @__PURE__ */ jsx(
+              "i",
+              {
+                className: s.day,
+                "data-level": level,
+                "aria-hidden": "true"
+              },
+              level
+            )),
+            /* @__PURE__ */ jsx("span", { children: "\u591A" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ContributionCalendar
+};

package/components/ContributionCalendar.module.css

@@ -0,0 +1,114 @@
+.calendar {
+  --calendar-cell: 13px;
+  --calendar-gap: 3px;
+  min-width: 0;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 20px;
+  background: var(--surface);
+}
+.header,
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+}
+.header {
+  margin-bottom: 16px;
+}
+.header > span,
+.footer {
+  font-size: 11px;
+  color: var(--muted);
+}
+.scroll {
+  overflow: auto;
+  padding: 3px 2px 6px;
+}
+.months,
+.row {
+  display: grid;
+  column-gap: var(--calendar-gap);
+  width: max-content;
+  align-items: center;
+}
+.months {
+  height: 22px;
+  font-size: 10px;
+  color: var(--muted);
+}
+.months > span {
+  white-space: nowrap;
+}
+.row {
+  height: calc(var(--calendar-cell) + var(--calendar-gap));
+}
+.weekday {
+  font-size: 10px;
+  color: var(--muted);
+}
+.day,
+.pad {
+  width: var(--calendar-cell);
+  height: var(--calendar-cell);
+}
+.day {
+  display: block;
+  padding: 0;
+  border: 1px solid color-mix(in srgb, var(--fg) 6%, transparent);
+  border-radius: 3px;
+  background: color-mix(in srgb, var(--fg) 8%, var(--surface));
+  transition:
+    transform var(--motion-press),
+    box-shadow var(--motion-hover);
+}
+.day[data-level="1"] {
+  background: color-mix(in srgb, var(--calendar-color) 25%, var(--surface));
+}
+.day[data-level="2"] {
+  background: color-mix(in srgb, var(--calendar-color) 45%, var(--surface));
+}
+.day[data-level="3"] {
+  background: color-mix(in srgb, var(--calendar-color) 70%, var(--surface));
+}
+.day[data-level="4"] {
+  background: var(--calendar-color);
+}
+.day[data-future="true"] {
+  opacity: 0.3;
+  cursor: default;
+}
+.day[data-missing="true"] {
+  background: repeating-linear-gradient(
+    135deg,
+    transparent,
+    transparent 2px,
+    color-mix(in srgb, var(--fg) 12%, var(--surface)) 2px,
+    color-mix(in srgb, var(--fg) 12%, var(--surface)) 3px
+  );
+}
+.day:hover:not([data-future="true"]) {
+  transform: scale(1.12);
+}
+.day:focus-visible,
+.day[aria-selected="true"] {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+.footer {
+  margin-top: 12px;
+  min-height: 18px;
+}
+.legend {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: auto;
+}
+.legend > span {
+  margin: 0 3px;
+}
+.legend .day {
+  cursor: default;
+}

package/components/ContributionCell.d.ts

@@ -0,0 +1,11 @@
+import type { ContributionCellData } from "./contribution";
+export declare const ContributionCell: import("react").MemoExoticComponent<({ day, label, selected, tabIndex, missing, onSelect, onFocus, onKeyDown, }: {
+    day: ContributionCellData;
+    label: string;
+    selected: boolean;
+    tabIndex: number;
+    missing: boolean;
+    onSelect(date: string): void;
+    onFocus(date: string): void;
+    onKeyDown(event: React.KeyboardEvent<HTMLButtonElement>, day: ContributionCellData): void;
+}) => import("react").JSX.Element>;

package/components/ContributionCell.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { Tooltip } from "./Tooltip.js";
+import s from "./ContributionCalendar.module.css";
+const ContributionCell = memo(function ContributionCell2({
+  day,
+  label,
+  selected,
+  tabIndex,
+  missing,
+  onSelect,
+  onFocus,
+  onKeyDown
+}) {
+  if (day.outside)
+    return /* @__PURE__ */ jsx("span", { className: s.pad, role: "gridcell", "aria-hidden": "true" });
+  return /* @__PURE__ */ jsx(Tooltip, { content: label, children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "gridcell",
+      "aria-label": label,
+      "aria-selected": selected,
+      "aria-disabled": day.future || void 0,
+      "data-date": day.date,
+      "data-level": day.level,
+      "data-future": day.future,
+      "data-missing": missing,
+      className: s.day,
+      tabIndex,
+      onClick: () => {
+        if (!day.future) onSelect(day.date);
+      },
+      onFocus: () => onFocus(day.date),
+      onKeyDown: (event) => onKeyDown(event, day)
+    }
+  ) });
+});
+export {
+  ContributionCell
+};

package/components/Control.module.css

@@ -0,0 +1,73 @@
+.surface {
+  height: var(--control-height);
+  min-width: 0;
+  border: 1px solid var(--control-border, var(--line));
+  border-radius: var(--field-radius);
+  background: var(--field);
+  color: var(--fg);
+  font-size: var(--field-font-size);
+  line-height: var(--field-line-height);
+  outline: none;
+  transition:
+    border-color var(--motion-hover),
+    box-shadow var(--motion-hover),
+    background-color var(--motion-hover);
+}
+.surface:hover:where(:not(:disabled):not([data-disabled="true"])) {
+  border-color: color-mix(
+    in srgb,
+    var(--fg) var(--field-hover-strength),
+    var(--surface)
+  );
+}
+.surface[data-focus="true"],
+.surface:focus,
+.surface:focus-visible,
+.surface:focus-within,
+.surface[aria-expanded="true"] {
+  outline: none;
+  border-color: var(--field-focus-border);
+  box-shadow: 0 0 0 var(--field-focus-width)
+    color-mix(in srgb, var(--accent) var(--field-focus-strength), transparent);
+}
+.surface[aria-invalid="true"] {
+  border-color: var(--danger);
+}
+.surface[aria-invalid="true"][data-focus="true"],
+.surface[aria-invalid="true"]:focus-within {
+  box-shadow: 0 0 0 var(--field-focus-width)
+    color-mix(in srgb, var(--danger) var(--field-focus-strength), transparent);
+}
+.surface:disabled,
+.surface[data-disabled="true"] {
+  opacity: var(--field-disabled-opacity);
+  cursor: not-allowed;
+}
+.surface[data-disabled="true"] input:disabled {
+  opacity: 1;
+}
+.surface input {
+  outline: none;
+  color: inherit;
+  font-family: inherit;
+  line-height: inherit;
+}
+.surface input:focus-visible {
+  outline: none;
+}
+.surface::placeholder,
+.surface input::placeholder {
+  color: var(--placeholder);
+  opacity: 1;
+}
+.surface[readonly],
+.surface[aria-readonly="true"],
+.surface:has(input[readonly]) {
+  background: var(--field-readonly);
+}
+@media (max-width: 600px) {
+  .surface:has(input),
+  .surface:is(input, textarea) {
+    font-size: 16px;
+  }
+}

package/components/DataTable.d.ts

@@ -0,0 +1,49 @@
+import { type ReactNode } from "react";
+export interface TableColumn<T> {
+    key: string;
+    label: string;
+    value(row: T): string | number;
+    render?(row: T): ReactNode;
+    sortable?: boolean;
+    filterOptions?: string[];
+    hideable?: boolean;
+}
+export type TableSort = {
+    key: string;
+    direction: "asc" | "desc";
+} | null;
+export type TableFilters = Record<string, string[]>;
+export type TablePagination = {
+    page: number;
+    pageSize: number;
+};
+export type DataTableProps<T, K extends string | number> = {
+    rows: T[];
+    columns: TableColumn<T>[];
+    rowKey(row: T): K;
+    label?: string;
+    selected?: K[];
+    onSelectionChange?(ids: K[]): void;
+    selectionLabel?(row: T): string;
+    initialPageSize?: number;
+    loading?: boolean;
+    sort?: TableSort;
+    defaultSort?: TableSort;
+    onSortChange?(sort: TableSort): void;
+    filters?: TableFilters;
+    defaultFilters?: TableFilters;
+    onFiltersChange?(filters: TableFilters): void;
+    pagination?: TablePagination;
+    defaultPagination?: Partial<TablePagination>;
+    onPaginationChange?(pagination: TablePagination): void;
+    pageSizes?: number[];
+    visibleColumns?: string[];
+    defaultVisibleColumns?: string[];
+    onVisibleColumnsChange?(keys: string[]): void;
+    showColumnSelector?: boolean;
+    manualFiltering?: boolean;
+    manualSorting?: boolean;
+    manualPagination?: boolean;
+    total?: number;
+};
+export declare function DataTable<T, K extends string | number>({ rows, columns, rowKey, label, selected, onSelectionChange, selectionLabel, initialPageSize, loading, sort: controlledSort, defaultSort, onSortChange, filters: controlledFilters, defaultFilters, onFiltersChange, pagination, defaultPagination, onPaginationChange, pageSizes, visibleColumns, defaultVisibleColumns, onVisibleColumnsChange, showColumnSelector, manualFiltering, manualSorting, manualPagination, total, }: DataTableProps<T, K>): import("react").JSX.Element;