@suphark/ui 0.7.0 → 0.9.0

package/src/components/shared/rule-builder.tsx

@@ -0,0 +1,465 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/ui/button";
+import {
+  NativeSelect,
+  NativeSelectOptGroup,
+  NativeSelectOption,
+} from "@suphark/ui/components/ui/native-select";
+import { ToggleGroup, ToggleGroupItem } from "@suphark/ui/components/ui/toggle-group";
+import { cn } from "@suphark/ui/lib/utils";
+import { Plus, X } from "lucide-react";
+import type { ReactNode } from "react";
+
+// ---------- ชนิดข้อมูล (แอปเก็บ/ส่ง server ในรูปนี้ได้ตรง ๆ) ----------
+
+export type RuleLeaf<F extends string = string> = { field: F; operator: string; value: unknown };
+export type RuleGroup<F extends string = string> = { op: "and" | "or"; items: RuleCondition<F>[] };
+export type RuleNot<F extends string = string> = { op: "not"; item: RuleCondition<F> };
+export type RuleCondition<F extends string = string> = RuleLeaf<F> | RuleGroup<F> | RuleNot<F>;
+
+export function isRuleGroup<F extends string>(c: RuleCondition<F>): c is RuleGroup<F> {
+  return "op" in c && (c.op === "and" || c.op === "or");
+}
+export function isRuleNot<F extends string>(c: RuleCondition<F>): c is RuleNot<F> {
+  return "op" in c && c.op === "not";
+}
+export function emptyGroup<F extends string = string>(op: "and" | "or" = "and"): RuleGroup<F> {
+  return { op, items: [] };
+}
+
+export interface RuleFieldDef<F extends string = string> {
+  key: F;
+  /** ชื่อฟิลด์ (ข้อความ — แสดงใน `<select>` จึงเป็น string) */
+  label: string;
+  /** ตัวดำเนินการที่ฟิลด์นี้รองรับ — 1 ตัว = ซ่อน select operator */
+  operators: ReadonlyArray<{ value: string; label: string }>;
+  /** ค่าเริ่มต้นเมื่อเลือกฟิลด์นี้ (ทั้ง operator + value) */
+  defaultLeaf: () => RuleLeaf<F>;
+  /** ตัวแก้ค่า — แอปส่ง component เอง (ToggleGroup / Input / number+หน่วย …) */
+  renderValue: (props: {
+    leaf: RuleLeaf<F>;
+    onChange: (leaf: RuleLeaf<F>) => void;
+    disabled?: boolean;
+  }) => ReactNode;
+  /** ประโยคสรุปของ leaf (ใช้ใน `describeCondition`) — ไม่ส่ง = "label operator value" */
+  describe?: (leaf: RuleLeaf<F>) => string;
+  /** จัดกลุ่มใน select ฟิลด์ (optgroup) */
+  group?: string;
+  /** true = เลือกไม่ได้; string = เหตุผล (แสดงเป็น title ของตัวเลือก) */
+  disabled?: boolean | string;
+}
+
+export interface RuleBuilderText {
+  and: string;
+  or: string;
+  /** ป้ายกรอบ NOT */
+  not: string;
+  /** ปุ่มครอบ leaf ด้วย NOT */
+  wrapNot: string;
+  addCondition: string;
+  addGroup: string;
+  removeCondition: string;
+  removeNot: string;
+  emptyAnd: string;
+  emptyOr: string;
+  summary: string;
+  field: string;
+  operator: string;
+  /** aria-label ของกลุ่ม */
+  group: (op: "and" | "or", level: number) => string;
+  /** ตัวเชื่อมในประโยคสรุป */
+  andJoin: string;
+  orJoin: string;
+  notPrefix: string;
+  unknownField: (key: string) => string;
+}
+
+const TEXT: Record<"th" | "en", RuleBuilderText> = {
+  th: {
+    and: "ต้องตรงทุกข้อ (AND)",
+    or: "ตรงข้อใดข้อหนึ่ง (OR)",
+    not: "ไม่ใช่",
+    wrapNot: "NOT",
+    addCondition: "เงื่อนไข",
+    addGroup: "กลุ่มย่อย",
+    removeCondition: "ลบเงื่อนไข",
+    removeNot: "เอา NOT ออก",
+    emptyAnd: "ยังไม่มีเงื่อนไข = ตรงทุกรายการ",
+    emptyOr: "ยังไม่มีเงื่อนไข = ไม่ตรงอะไรเลย",
+    summary: "สรุป",
+    field: "ฟิลด์",
+    operator: "ตัวดำเนินการ",
+    group: (op, level) => `กลุ่ม ${op.toUpperCase()} ระดับ ${level}`,
+    andJoin: " และ ",
+    orJoin: " หรือ ",
+    notPrefix: "ไม่ใช่ ",
+    unknownField: (key) => `ฟิลด์ไม่รู้จัก: ${key}`,
+  },
+  en: {
+    and: "Match all (AND)",
+    or: "Match any (OR)",
+    not: "NOT",
+    wrapNot: "NOT",
+    addCondition: "Condition",
+    addGroup: "Subgroup",
+    removeCondition: "Remove condition",
+    removeNot: "Remove NOT",
+    emptyAnd: "No conditions = matches everything",
+    emptyOr: "No conditions = matches nothing",
+    summary: "Summary",
+    field: "Field",
+    operator: "Operator",
+    group: (op, level) => `${op.toUpperCase()} group level ${level}`,
+    andJoin: " and ",
+    orJoin: " or ",
+    notPrefix: "not ",
+    unknownField: (key) => `Unknown field: ${key}`,
+  },
+};
+
+function resolveText(language: "th" | "en", text?: Partial<RuleBuilderText>): RuleBuilderText {
+  return { ...TEXT[language], ...text };
+}
+
+/** ประโยคสรุปของเงื่อนไข: AND " และ ", OR " หรือ ", NOT "ไม่ใช่ …", กลุ่มย่อยที่มี >1 ข้อครอบวงเล็บ */
+export function describeCondition<F extends string>(
+  cond: RuleCondition<F>,
+  fields: ReadonlyArray<RuleFieldDef<F>>,
+  text?: Partial<RuleBuilderText>,
+  language: "th" | "en" = "th",
+): string {
+  const t = resolveText(language, text);
+  const walk = (c: RuleCondition<F>, nested: boolean): string => {
+    if (isRuleGroup(c)) {
+      if (c.items.length === 0) return c.op === "and" ? t.emptyAnd : t.emptyOr;
+      const parts = c.items.map((i) => walk(i, true));
+      const s = parts.join(c.op === "and" ? t.andJoin : t.orJoin);
+      return nested && parts.length > 1 ? `(${s})` : s;
+    }
+    if (isRuleNot(c)) return `${t.notPrefix}${walk(c.item, true)}`;
+    const def = fields.find((f) => f.key === c.field);
+    if (!def) return t.unknownField(c.field);
+    if (def.describe) return def.describe(c);
+    const op = def.operators.find((o) => o.value === c.operator)?.label ?? c.operator;
+    const v = Array.isArray(c.value) ? c.value.join("/") : String(c.value ?? "");
+    return `${def.label} ${op} ${v}`.trim();
+  };
+  return walk(cond, false);
+}
+
+// key คงที่ต่อ object ของเงื่อนไข — แก้ item หนึ่งไม่ทำให้พี่น้อง re-mount (ไม่ใช้ index เป็น key)
+const keys = new WeakMap<object, string>();
+let keySeq = 0;
+function keyOf(item: object): string {
+  let k = keys.get(item);
+  if (!k) {
+    k = `rule-${++keySeq}`;
+    keys.set(item, k);
+  }
+  return k;
+}
+
+export interface RuleBuilderProps<F extends string = string> {
+  value: RuleCondition<F>;
+  /** ส่งต้นไม้ใหม่ทั้งก้อน (immutable) */
+  onChange: (next: RuleCondition<F>) => void;
+  fields: ReadonlyArray<RuleFieldDef<F>>;
+  /** จำนวนระดับกลุ่มสูงสุดรวม root (ค่าเริ่มต้น 3 = root + ซ้อนได้อีก 2) */
+  maxDepth?: number;
+  /** อนุญาต NOT (ค่าเริ่มต้น true) */
+  allowNot?: boolean;
+  /** ฟิลด์เริ่มต้นเมื่อกด "เพิ่มเงื่อนไข" (ค่าเริ่มต้น ฟิลด์แรกที่ไม่ disabled) */
+  defaultField?: F;
+  disabled?: boolean;
+  /** แสดงประโยคสรุปใต้ builder */
+  showSummary?: boolean;
+  language?: "th" | "en";
+  text?: Partial<RuleBuilderText>;
+  className?: string;
+}
+
+interface Ctx<F extends string> {
+  fields: ReadonlyArray<RuleFieldDef<F>>;
+  text: RuleBuilderText;
+  maxDepth: number;
+  allowNot: boolean;
+  disabled: boolean;
+  newLeaf: () => RuleLeaf<F>;
+}
+
+/**
+ * ตัวสร้างเงื่อนไขแบบต้นไม้ AND/OR/NOT ซ้อนได้ (rule builder) — แอปกำหนดฟิลด์/ตัวดำเนินการ/ตัวแก้ค่าเอง
+ * ผ่าน `fields`; component จัดโครง กลุ่ม ปุ่ม การเยื้อง และ a11y — ยกจาก Pi Files (กฎ storage/lifecycle)
+ *
+ *   <RuleBuilder value={cond} onChange={setCond} fields={FIELDS} maxDepth={3} showSummary />
+ */
+export function RuleBuilder<F extends string = string>({
+  value,
+  onChange,
+  fields,
+  maxDepth = 3,
+  allowNot = true,
+  defaultField,
+  disabled = false,
+  showSummary = false,
+  language = "th",
+  text: textProp,
+  className,
+}: RuleBuilderProps<F>) {
+  const text = resolveText(language, textProp);
+  const firstField =
+    fields.find((f) => f.key === defaultField) ?? fields.find((f) => !f.disabled) ?? fields[0];
+  const ctx: Ctx<F> = {
+    fields,
+    text,
+    maxDepth,
+    allowNot,
+    disabled,
+    newLeaf: () =>
+      firstField
+        ? firstField.defaultLeaf()
+        : ({ field: "" as F, operator: "", value: null } as RuleLeaf<F>),
+  };
+  return (
+    <div data-slot="rule-builder" className={cn("flex flex-col gap-2", className)}>
+      <ConditionNode value={value} onChange={onChange} ctx={ctx} depth={0} />
+      {showSummary && (
+        <p className="text-muted-foreground text-xs" data-slot="rule-builder-summary">
+          <span className="font-medium">{text.summary}: </span>
+          {describeCondition(value, fields, textProp, language)}
+        </p>
+      )}
+    </div>
+  );
+}
+
+function ConditionNode<F extends string>({
+  value,
+  onChange,
+  ctx,
+  depth,
+}: {
+  value: RuleCondition<F>;
+  onChange: (next: RuleCondition<F>) => void;
+  ctx: Ctx<F>;
+  depth: number;
+}) {
+  const { text, disabled } = ctx;
+  if (isRuleGroup(value)) {
+    const canNest = depth < ctx.maxDepth - 1;
+    return (
+      <div
+        role="group"
+        aria-label={text.group(value.op, depth + 1)}
+        data-slot="rule-group"
+        data-op={value.op}
+        data-depth={depth}
+        className={cn(
+          "flex flex-col gap-2 rounded-lg border p-2",
+          depth > 0 && "border-dashed bg-muted/30",
+        )}
+      >
+        <div className="flex flex-wrap items-center gap-2">
+          <ToggleGroup
+            value={[value.op]}
+            onValueChange={(v) => {
+              const op = (v as Array<"and" | "or">)[0];
+              if (op && op !== value.op) onChange({ ...value, op });
+            }}
+            variant="outline"
+            size="sm"
+            disabled={disabled}
+            aria-label={text.operator}
+          >
+            <ToggleGroupItem value="and">{text.and}</ToggleGroupItem>
+            <ToggleGroupItem value="or">{text.or}</ToggleGroupItem>
+          </ToggleGroup>
+          <div className="ml-auto flex gap-1">
+            <Button
+              type="button"
+              size="xs"
+              variant="outline"
+              disabled={disabled}
+              onClick={() => onChange({ ...value, items: [...value.items, ctx.newLeaf()] })}
+            >
+              <Plus />
+              {text.addCondition}
+            </Button>
+            {canNest && (
+              <Button
+                type="button"
+                size="xs"
+                variant="ghost"
+                disabled={disabled}
+                onClick={() =>
+                  onChange({
+                    ...value,
+                    // กลุ่มใหม่สลับ op จากแม่ (แม่ AND → ลูก OR) — เคสที่พบบ่อยสุด
+                    items: [...value.items, emptyGroup<F>(value.op === "and" ? "or" : "and")],
+                  })
+                }
+              >
+                <Plus />
+                {text.addGroup}
+              </Button>
+            )}
+          </div>
+        </div>
+        {value.items.length === 0 && (
+          <p className="text-muted-foreground text-xs">
+            {value.op === "and" ? text.emptyAnd : text.emptyOr}
+          </p>
+        )}
+        {value.items.map((item, i) => (
+          <div key={keyOf(item)} className="flex items-start gap-1" data-slot="rule-item">
+            <div className="min-w-0 flex-1">
+              <ConditionNode
+                value={item}
+                onChange={(next) =>
+                  onChange({ ...value, items: value.items.map((x, j) => (j === i ? next : x)) })
+                }
+                ctx={ctx}
+                depth={depth + 1}
+              />
+            </div>
+            <Button
+              type="button"
+              size="icon-xs"
+              variant="ghost"
+              aria-label={text.removeCondition}
+              disabled={disabled}
+              onClick={() => onChange({ ...value, items: value.items.filter((_, j) => j !== i) })}
+            >
+              <X />
+            </Button>
+          </div>
+        ))}
+      </div>
+    );
+  }
+  if (isRuleNot(value)) {
+    return (
+      <div
+        data-slot="rule-not"
+        className="flex flex-wrap items-start gap-2 rounded-lg border border-destructive/40 p-2"
+      >
+        <span className="shrink-0 rounded bg-destructive/10 px-1.5 py-0.5 text-destructive text-xs">
+          {text.not}
+        </span>
+        <div className="min-w-0 flex-1 basis-48">
+          <ConditionNode
+            value={value.item}
+            onChange={(next) => onChange({ op: "not", item: next })}
+            ctx={ctx}
+            depth={depth}
+          />
+        </div>
+        <Button
+          type="button"
+          size="xs"
+          variant="ghost"
+          disabled={disabled}
+          onClick={() => onChange(value.item)}
+        >
+          {text.removeNot}
+        </Button>
+      </div>
+    );
+  }
+  return <LeafRow leaf={value} onChange={onChange} ctx={ctx} />;
+}
+
+function LeafRow<F extends string>({
+  leaf,
+  onChange,
+  ctx,
+}: {
+  leaf: RuleLeaf<F>;
+  onChange: (next: RuleCondition<F>) => void;
+  ctx: Ctx<F>;
+}) {
+  const { fields, text, disabled } = ctx;
+  const def = fields.find((f) => f.key === leaf.field);
+  const showOperator = (def?.operators.length ?? 0) > 1;
+  // optgroup ตามลำดับที่พบครั้งแรก; ฟิลด์ไม่มี group อยู่บนสุด
+  const groups = new Map<string | undefined, RuleFieldDef<F>[]>();
+  for (const f of fields) {
+    const list = groups.get(f.group) ?? [];
+    list.push(f);
+    groups.set(f.group, list);
+  }
+  const option = (f: RuleFieldDef<F>) => (
+    <NativeSelectOption
+      key={f.key}
+      value={f.key}
+      disabled={Boolean(f.disabled) && f.key !== leaf.field}
+      title={typeof f.disabled === "string" ? f.disabled : undefined}
+    >
+      {f.label}
+    </NativeSelectOption>
+  );
+  return (
+    <div
+      data-slot="rule-leaf"
+      className={cn(
+        "grid gap-2 sm:items-center",
+        showOperator
+          ? "sm:grid-cols-[11rem_auto_minmax(0,1fr)_auto]"
+          : "sm:grid-cols-[11rem_minmax(0,1fr)_auto]",
+      )}
+    >
+      <NativeSelect
+        value={leaf.field}
+        disabled={disabled}
+        aria-label={text.field}
+        onChange={(e) => {
+          const next = fields.find((f) => f.key === e.target.value);
+          if (next) onChange(next.defaultLeaf());
+        }}
+      >
+        {!def && (
+          <NativeSelectOption value={leaf.field}>
+            {text.unknownField(leaf.field)}
+          </NativeSelectOption>
+        )}
+        {[...groups.entries()].map(([group, list]) =>
+          group === undefined ? (
+            list.map(option)
+          ) : (
+            <NativeSelectOptGroup key={group} label={group}>
+              {list.map(option)}
+            </NativeSelectOptGroup>
+          ),
+        )}
+      </NativeSelect>
+      {showOperator && def && (
+        <NativeSelect
+          value={leaf.operator}
+          disabled={disabled}
+          aria-label={text.operator}
+          onChange={(e) => onChange({ ...leaf, operator: e.target.value })}
+        >
+          {def.operators.map((o) => (
+            <NativeSelectOption key={o.value} value={o.value}>
+              {o.label}
+            </NativeSelectOption>
+          ))}
+        </NativeSelect>
+      )}
+      <div className="min-w-0">{def?.renderValue({ leaf, onChange, disabled })}</div>
+      {ctx.allowNot && (
+        <Button
+          type="button"
+          size="xs"
+          variant="ghost"
+          disabled={disabled}
+          aria-label={text.wrapNot}
+          onClick={() => onChange({ op: "not", item: leaf })}
+        >
+          {text.wrapNot}
+        </Button>
+      )}
+    </div>
+  );
+}