Establish NODE.DC design system baseline

2026-07-10 02:34:36 +03:00
commit 73629d68c3
63 changed files with 6701 additions and 0 deletions
@@ -0,0 +1,129 @@
+import { useMemo, useState, type KeyboardEvent, type ReactNode } from "react";
+import type { FloatingPlacement } from "@nodedc/ui-core";
+import { Dropdown } from "./Dropdown";
+import { cn } from "./cn";
+
+export interface SelectOption<T extends string> {
+  value: T;
+  label: string;
+  description?: string;
+  icon?: ReactNode;
+  disabled?: boolean;
+}
+
+export interface SelectProps<T extends string> {
+  value: T;
+  options: Array<SelectOption<T>>;
+  label: string;
+  onChange: (value: T, option: SelectOption<T>) => void;
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  emptyLabel?: string;
+  placement?: FloatingPlacement;
+  minMenuWidth?: number;
+  menuWidth?: number | "anchor";
+  disabled?: boolean;
+  className?: string;
+  triggerClassName?: string;
+  menuClassName?: string;
+}
+
+export function Select<T extends string>({
+  value,
+  options,
+  label,
+  onChange,
+  searchable = false,
+  searchPlaceholder = "Поиск",
+  emptyLabel = "Ничего не найдено",
+  placement = "bottom-start",
+  minMenuWidth = 180,
+  menuWidth = "anchor",
+  disabled = false,
+  className,
+  triggerClassName,
+  menuClassName,
+}: SelectProps<T>) {
+  const [query, setQuery] = useState("");
+  const selected = options.find((option) => option.value === value) ?? options[0];
+  const visibleOptions = useMemo(() => {
+    const normalized = query.trim().toLocaleLowerCase();
+    if (!normalized) return options;
+    return options.filter((option) => `${option.label} ${option.description ?? ""}`.toLocaleLowerCase().includes(normalized));
+  }, [options, query]);
+
+  return (
+    <Dropdown
+      className={className}
+      placement={placement}
+      minWidth={minMenuWidth}
+      width={menuWidth}
+      disabled={disabled}
+      surfaceRole="listbox"
+      surfaceClassName={menuClassName}
+      trigger={({ open, toggle, setTriggerRef, surfaceId }) => {
+        const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+          if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            if (!open) toggle();
+          }
+        };
+        return (
+          <button
+            ref={setTriggerRef}
+            type="button"
+            className={cn("nodedc-select-trigger", triggerClassName)}
+            aria-label={label}
+            aria-haspopup="listbox"
+            aria-controls={surfaceId}
+            aria-expanded={open}
+            disabled={disabled}
+            onClick={toggle}
+            onKeyDown={handleKeyDown}
+          >
+            {selected?.icon ?? null}
+            <span className="nodedc-select-trigger__label">{selected?.label ?? "—"}</span>
+            <span className="nodedc-select-trigger__chevron" aria-hidden="true" />
+          </button>
+        );
+      }}
+    >
+      {({ close }) => (
+        <>
+          {searchable ? (
+            <label className="nodedc-dropdown-search">
+              <span aria-hidden="true">⌕</span>
+              <input value={query} onChange={(event) => setQuery(event.target.value)} placeholder={searchPlaceholder} />
+            </label>
+          ) : null}
+          {visibleOptions.map((option) => (
+            <button
+              key={option.value}
+              type="button"
+              className="nodedc-dropdown-option"
+              role="option"
+              aria-selected={option.value === value}
+              data-selected={option.value === value ? "true" : undefined}
+              disabled={option.disabled}
+              onClick={() => {
+                if (option.disabled) return;
+                onChange(option.value, option);
+                setQuery("");
+                close();
+              }}
+            >
+              {option.icon ? <span className="nodedc-dropdown-option__icon">{option.icon}</span> : <span />}
+              <span className="nodedc-dropdown-option__body">
+                <span className="nodedc-dropdown-option__label">{option.label}</span>
+                {option.description ? <span className="nodedc-dropdown-option__description">{option.description}</span> : null}
+              </span>
+              {option.value === value ? <span className="nodedc-dropdown-option__check" aria-hidden="true">•</span> : null}
+            </button>
+          ))}
+          {visibleOptions.length === 0 ? <div className="nodedc-empty-state">{emptyLabel}</div> : null}
+        </>
+      )}
+    </Dropdown>
+  );
+}
+