@devalok/shilp-sutra-karm 0.8.2 → 0.9.0

package/dist/_chunks/kanban-board.js

@@ -0,0 +1,597 @@
+"use client";
+import { jsx as e, jsxs as c, Fragment as X } from "react/jsx-runtime";
+import * as F from "react";
+import { useState as O, useRef as J, useEffect as Z, useMemo as le, useCallback as L } from "react";
+import { u as se } from "./use-composed-ref.js";
+import { createPortal as me } from "react-dom";
+import { u as fe, C as ue, c as he, a as pe, S as re, v as xe, b as be, d as U, D as ge, e as ve, h as ye, f as Ne, s as we, K as ke, T as Ie, P as De } from "./vendor.js";
+import { cn as j } from "@devalok/shilp-sutra/ui/lib/utils";
+import { Button as $ } from "@devalok/shilp-sutra/ui/button";
+import { Input as H } from "@devalok/shilp-sutra/ui/input";
+import { DropdownMenu as Ce, DropdownMenuTrigger as Se, DropdownMenuContent as Oe, DropdownMenuItem as q, DropdownMenuSeparator as Ee } from "@devalok/shilp-sutra/ui/dropdown-menu";
+import { IconGripVertical as Re, IconCalendar as Be, IconEye as ee, IconPlus as Q, IconDots as Ke, IconPencil as Ae, IconEyeOff as Te, IconTrash as ze } from "@tabler/icons-react";
+import { Badge as Le } from "@devalok/shilp-sutra/ui";
+import { AvatarGroup as $e } from "@devalok/shilp-sutra/composed/avatar-group";
+import { P as je, a as Me } from "./task-constants.js";
+function _e(s) {
+  const t = new Date(s), r = /* @__PURE__ */ new Date(), h = t.getTime() - r.getTime(), m = Math.ceil(h / (1e3 * 60 * 60 * 24));
+  return m < 0 ? { label: "Overdue", className: "text-text-error" } : m === 0 ? { label: "Today", className: "text-text-warning" } : m === 1 ? { label: "Tomorrow", className: "text-text-warning" } : {
+    label: t.toLocaleDateString("en-IN", { month: "short", day: "numeric" }),
+    className: "text-text-tertiary"
+  };
+}
+const Fe = he(
+  "group/card relative rounded-ds-lg border border-border/60 bg-layer-01 p-ds-04 shadow-01 transition-[color,background-color,border-color,box-shadow] duration-fast-02 ease-productive-standard hover:shadow-02 hover:border-border cursor-pointer",
+  {
+    variants: {
+      state: {
+        default: "",
+        dragging: "opacity-[0.38]",
+        overlay: "rotate-[2deg] shadow-03 border-border-interactive/60 ring-1 ring-interactive/40"
+      },
+      blocked: {
+        true: "border-l-2 border-l-error",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      state: "default",
+      blocked: !1
+    }
+  }
+);
+function ae({
+  task: s,
+  isDragging: t,
+  isDragOverlay: r,
+  dragHandleProps: h,
+  onClickTask: m
+}) {
+  const w = s.dueDate ? _e(s.dueDate) : null;
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      className: Fe({
+        state: r ? "overlay" : t ? "dragging" : "default",
+        blocked: s.isBlocked
+      }),
+      onClick: () => m == null ? void 0 : m(s.id),
+      onKeyDown: (f) => {
+        (f.key === "Enter" || f.key === " ") && (f.preventDefault(), m == null || m(s.id));
+      },
+      children: [
+        /* @__PURE__ */ c("div", { className: "flex items-start gap-ds-02b", children: [
+          /* @__PURE__ */ e(
+            "button",
+            {
+              className: j(
+                "mt-ds-01 flex-shrink-0 cursor-grab rounded p-ds-01 opacity-0 transition-opacity",
+                "group-hover/card:opacity-[0.38] hover:!opacity-100",
+                "active:cursor-grabbing",
+                r && "opacity-[0.38]"
+              ),
+              ...(h == null ? void 0 : h.attributes) ?? {},
+              ...(h == null ? void 0 : h.listeners) ?? {},
+              "aria-label": `Drag handle for task: ${s.title}`,
+              "aria-roledescription": "sortable",
+              onClick: (f) => f.stopPropagation(),
+              children: /* @__PURE__ */ e(Re, { className: "h-ico-sm w-ico-sm text-icon-secondary" })
+            }
+          ),
+          /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ e("p", { className: "text-ds-md font-medium text-text-primary line-clamp-2", children: s.title }) })
+        ] }),
+        /* @__PURE__ */ c("div", { className: "mt-ds-03 flex items-center gap-ds-03", children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: j(
+                "h-2 w-2 rounded-ds-full flex-shrink-0",
+                Me[s.priority]
+              ),
+              title: je[s.priority]
+            }
+          ),
+          s.labels.length > 0 && /* @__PURE__ */ c("div", { className: "flex items-center gap-ds-02 overflow-hidden", children: [
+            s.labels.slice(0, 2).map((f) => /* @__PURE__ */ e(Le, { size: "sm", className: "max-w-[80px] truncate", children: f }, f)),
+            s.labels.length > 2 && /* @__PURE__ */ c("span", { className: "text-ds-xs text-text-tertiary", children: [
+              "+",
+              s.labels.length - 2
+            ] })
+          ] }),
+          /* @__PURE__ */ e("div", { className: "flex-1" }),
+          w && /* @__PURE__ */ c(
+            "div",
+            {
+              className: j(
+                "flex items-center gap-ds-01 text-ds-xs leading-tight",
+                w.className
+              ),
+              children: [
+                /* @__PURE__ */ e(Be, { className: "h-2.5 w-2.5" }),
+                /* @__PURE__ */ e("span", { children: w.label })
+              ]
+            }
+          ),
+          s.assignees.length > 0 && /* @__PURE__ */ e(
+            $e,
+            {
+              users: s.assignees,
+              size: "sm",
+              max: 2,
+              showTooltip: !1
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+const ie = F.forwardRef(
+  function({ task: t, onClickTask: r }, h) {
+    const {
+      attributes: m,
+      listeners: w,
+      setNodeRef: f,
+      transform: D,
+      transition: C,
+      isDragging: T
+    } = fe({
+      id: t.id,
+      data: {
+        type: "task",
+        task: t
+      }
+    }), E = se(f, h), x = {
+      transform: ue.Transform.toString(D),
+      transition: C
+    };
+    return /* @__PURE__ */ e("div", { ref: E, style: x, children: /* @__PURE__ */ e(
+      ae,
+      {
+        task: t,
+        isDragging: T,
+        dragHandleProps: { attributes: m, listeners: w },
+        onClickTask: r
+      }
+    ) });
+  }
+);
+ie.displayName = "TaskCard";
+const ne = F.forwardRef(
+  function({ task: t }, r) {
+    return /* @__PURE__ */ e("div", { ref: r, children: /* @__PURE__ */ e(ae, { task: t, isDragOverlay: !0 }) });
+  }
+);
+ne.displayName = "TaskCardOverlay";
+const te = [
+  "border-l-category-cyan",
+  "border-l-category-amber",
+  "border-l-category-teal",
+  "border-l-category-indigo",
+  "border-l-category-orange",
+  "border-l-category-emerald",
+  "border-l-category-slate",
+  "border-l-accent"
+], oe = F.forwardRef(
+  function({
+    column: t,
+    index: r,
+    isOverlay: h,
+    onAddTask: m,
+    onClickTask: w,
+    onRenameColumn: f,
+    onDeleteColumn: D,
+    onToggleVisibility: C
+  }, T) {
+    const [E, x] = O(!1), [k, S] = O(""), [G, R] = O(!1), [B, K] = O(t.name), z = J(null), P = J(null), { setNodeRef: g, isOver: V } = pe({
+      id: `column-${t.id}`,
+      data: {
+        type: "column",
+        column: t
+      }
+    }), I = t.tasks.map((o) => o.id), A = te[r % te.length], M = () => {
+      k.trim() && (m(t.id, k.trim()), S(""), x(!1));
+    }, W = (o) => {
+      o.key === "Enter" && M(), o.key === "Escape" && (S(""), x(!1));
+    }, _ = () => {
+      B.trim() && B.trim() !== t.name && (f == null || f(t.id, B.trim())), R(!1);
+    }, Y = (o) => {
+      o.key === "Enter" && _(), o.key === "Escape" && (K(t.name), R(!1));
+    };
+    return /* @__PURE__ */ c(
+      "div",
+      {
+        ref: T,
+        className: j(
+          /* intentional: board column fixed width — matches add-column button */
+          "flex h-full w-[300px] flex-shrink-0 flex-col rounded-ds-xl border-l-[3px] bg-layer-01 shadow-01",
+          A,
+          h && "shadow-04"
+        ),
+        children: [
+          /* @__PURE__ */ c("div", { className: "flex items-center gap-ds-03 px-ds-04 py-ds-04", children: [
+            G ? /* @__PURE__ */ e(
+              H,
+              {
+                ref: P,
+                value: B,
+                onChange: (o) => K(o.target.value),
+                onBlur: _,
+                onKeyDown: Y,
+                className: "h-ds-xs-plus text-ds-md font-semibold",
+                autoFocus: !0
+              }
+            ) : /* @__PURE__ */ e(
+              "h3",
+              {
+                className: "text-ds-md font-semibold text-text-primary truncate",
+                onDoubleClick: () => {
+                  K(t.name), R(!0);
+                },
+                children: t.name
+              }
+            ),
+            /* @__PURE__ */ e("span", { className: "flex h-5 min-w-[20px] items-center justify-center rounded-ds-full bg-field px-ds-02b text-ds-sm font-medium text-text-tertiary", children: t.tasks.length }),
+            t.isClientVisible && /* @__PURE__ */ e(
+              ee,
+              {
+                className: "h-3 w-3 text-text-tertiary",
+                "aria-label": "Visible to client"
+              }
+            ),
+            /* @__PURE__ */ e("div", { className: "flex-1" }),
+            /* @__PURE__ */ e(
+              $,
+              {
+                variant: "ghost",
+                size: "icon-md",
+                className: "h-ds-xs w-ds-xs opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus:opacity-100 hover:bg-interactive-subtle hover:text-interactive transition-opacity",
+                "aria-label": "Add task",
+                onClick: () => {
+                  x(!0), setTimeout(() => {
+                    var o;
+                    return (o = z.current) == null ? void 0 : o.focus();
+                  }, 50);
+                },
+                children: /* @__PURE__ */ e(Q, { className: "h-ico-sm w-ico-sm" })
+              }
+            ),
+            /* @__PURE__ */ c(Ce, { children: [
+              /* @__PURE__ */ e(Se, { asChild: !0, children: /* @__PURE__ */ e(
+                $,
+                {
+                  variant: "ghost",
+                  size: "icon-md",
+                  className: "h-ds-xs w-ds-xs opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus:opacity-100 transition-opacity",
+                  "aria-label": "Column options",
+                  children: /* @__PURE__ */ e(Ke, { className: "h-ico-sm w-ico-sm" })
+                }
+              ) }),
+              /* @__PURE__ */ c(Oe, { align: "end", className: "w-44", children: [
+                /* @__PURE__ */ c(
+                  q,
+                  {
+                    onClick: () => {
+                      K(t.name), R(!0);
+                    },
+                    children: [
+                      /* @__PURE__ */ e(Ae, { className: "mr-ds-03 h-ico-sm w-ico-sm" }),
+                      "Rename"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  q,
+                  {
+                    onClick: () => C == null ? void 0 : C(t.id, !t.isClientVisible),
+                    children: t.isClientVisible ? /* @__PURE__ */ c(X, { children: [
+                      /* @__PURE__ */ e(Te, { className: "mr-ds-03 h-ico-sm w-ico-sm" }),
+                      "Hide from client"
+                    ] }) : /* @__PURE__ */ c(X, { children: [
+                      /* @__PURE__ */ e(ee, { className: "mr-ds-03 h-ico-sm w-ico-sm" }),
+                      "Show to client"
+                    ] })
+                  }
+                ),
+                /* @__PURE__ */ e(Ee, {}),
+                /* @__PURE__ */ c(
+                  q,
+                  {
+                    className: "text-error focus:text-error",
+                    onClick: () => D == null ? void 0 : D(t.id),
+                    children: [
+                      /* @__PURE__ */ e(ze, { className: "mr-ds-03 h-ico-sm w-ico-sm" }),
+                      "Delete column"
+                    ]
+                  }
+                )
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ c(
+            "div",
+            {
+              ref: g,
+              className: j(
+                "no-scrollbar flex flex-1 flex-col gap-ds-03 overflow-y-auto px-ds-03 pb-ds-03 transition-colors duration-fast-02 ease-productive-standard",
+                V && "bg-interactive-subtle/50"
+              ),
+              children: [
+                /* @__PURE__ */ e(re, { items: I, strategy: xe, children: t.tasks.map((o) => /* @__PURE__ */ e(ie, { task: o, onClickTask: w }, o.id)) }),
+                t.tasks.length === 0 && !E && /* @__PURE__ */ e("div", { className: "flex flex-1 items-center justify-center py-ds-07", children: /* @__PURE__ */ e("p", { className: "text-ds-sm text-text-placeholder", children: "No tasks" }) })
+              ]
+            }
+          ),
+          E ? /* @__PURE__ */ c("div", { className: "border-t border-border-subtle p-ds-03", children: [
+            /* @__PURE__ */ e(
+              H,
+              {
+                ref: z,
+                value: k,
+                onChange: (o) => S(o.target.value),
+                onKeyDown: W,
+                onBlur: () => {
+                  k.trim() || x(!1);
+                },
+                placeholder: "Task title...",
+                className: "h-ds-sm text-ds-md",
+                autoFocus: !0
+              }
+            ),
+            /* @__PURE__ */ c("div", { className: "mt-ds-02b flex items-center gap-ds-02", children: [
+              /* @__PURE__ */ e(
+                $,
+                {
+                  size: "sm",
+                  className: "h-ds-xs-plus bg-interactive hover:bg-interactive-hover text-text-on-color text-ds-sm",
+                  onClick: M,
+                  disabled: !k.trim(),
+                  children: "Add"
+                }
+              ),
+              /* @__PURE__ */ e(
+                $,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  className: "h-ds-xs-plus text-ds-sm",
+                  onClick: () => {
+                    S(""), x(!1);
+                  },
+                  children: "Cancel"
+                }
+              )
+            ] })
+          ] }) : /* @__PURE__ */ c(
+            "button",
+            {
+              onClick: () => {
+                x(!0), setTimeout(() => {
+                  var o;
+                  return (o = z.current) == null ? void 0 : o.focus();
+                }, 50);
+              },
+              className: "flex items-center gap-ds-02b border-t border-border-subtle px-ds-04 py-ds-03 text-ds-sm text-text-placeholder transition-colors hover:bg-field hover:text-text-tertiary",
+              children: [
+                /* @__PURE__ */ e(Q, { className: "h-3 w-3" }),
+                "Add task"
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+oe.displayName = "BoardColumn";
+function Ge() {
+  return {
+    onDragStart({ active: s }) {
+      const t = s.data.current;
+      return (t == null ? void 0 : t.type) === "task" ? `Picked up task: ${t.task.title}` : "Picked up item";
+    },
+    onDragOver({ active: s, over: t }) {
+      if (!t) return;
+      const r = s.data.current;
+      if ((r == null ? void 0 : r.type) === "task")
+        return `Task ${r.task.title} is over ${t.id}`;
+    },
+    onDragEnd({ active: s, over: t }) {
+      if (!t) return "Dropped item";
+      const r = s.data.current;
+      return (r == null ? void 0 : r.type) === "task" ? `Dropped task: ${r.task.title}` : "Dropped item";
+    },
+    onDragCancel() {
+      return "Dragging cancelled";
+    }
+  };
+}
+const Pe = F.forwardRef(
+  function({
+    initialData: t,
+    onTaskMove: r,
+    onTaskAdd: h,
+    onColumnRename: m,
+    onColumnDelete: w,
+    onColumnToggleVisibility: f,
+    onClickTask: D,
+    onAddColumn: C
+  }, T) {
+    const [E, x] = O(t), [k, S] = O(null), [G, R] = O(!1), B = J(null), K = se(B, T);
+    Z(() => {
+      x(t);
+    }, [t]), Z(() => {
+      R(!0);
+    }, []);
+    const z = be(
+      U(De, {
+        activationConstraint: {
+          distance: 5
+        }
+      }),
+      U(Ie, {
+        activationConstraint: {
+          delay: 200,
+          tolerance: 5
+        }
+      }),
+      U(ke, {
+        coordinateGetter: we
+      })
+    ), P = le(() => Ge(), []), g = E.columns, V = g.map((a) => `column-${a.id}`), I = L(
+      (a) => {
+        for (const i of g)
+          if (i.tasks.some((p) => p.id === a))
+            return i.id;
+        return null;
+      },
+      [g]
+    ), A = L(
+      (a, i, p, u) => {
+        x((v) => {
+          const y = v.columns.map((b) => ({
+            ...b,
+            tasks: [...b.tasks]
+          })), d = y.find((b) => b.id === i), N = y.find((b) => b.id === p);
+          if (!d || !N) return v;
+          const n = d.tasks.findIndex((b) => b.id === a);
+          if (n === -1) return v;
+          const [l] = d.tasks.splice(n, 1);
+          return N.tasks.splice(u, 0, l), { columns: y };
+        });
+      },
+      []
+    ), M = L((a) => {
+      const i = a.active.data.current;
+      (i == null ? void 0 : i.type) === "task" && S(i.task);
+    }, []), W = L(
+      (a) => {
+        const { active: i, over: p } = a;
+        if (!p) return;
+        const u = i.id, v = p.id, y = I(u);
+        if (!y) return;
+        let d = null, N = 0;
+        if (v.startsWith("column-")) {
+          d = v.replace("column-", "");
+          const n = g.find((l) => l.id === d);
+          N = (n == null ? void 0 : n.tasks.length) ?? 0;
+        } else if (d = I(v), d) {
+          const n = g.find((l) => l.id === d);
+          N = (n == null ? void 0 : n.tasks.findIndex((l) => l.id === v)) ?? 0;
+        }
+        !d || y === d || A(u, y, d, N);
+      },
+      [g, I, A]
+    ), _ = L(
+      (a) => {
+        const { active: i, over: p } = a;
+        if (S(null), !p) return;
+        const u = i.id, v = p.id, y = I(u);
+        if (!y) return;
+        let d, N;
+        if (v.startsWith("column-")) {
+          d = v.replace("column-", "");
+          const n = g.find((l) => l.id === d);
+          if (N = (n == null ? void 0 : n.tasks.length) ?? 0, y === d) {
+            const l = n == null ? void 0 : n.tasks.findIndex((b) => b.id === u);
+            l !== void 0 && l >= 0 && (N = l);
+          }
+        } else {
+          d = I(v) ?? y;
+          const n = g.find((l) => l.id === d);
+          N = (n == null ? void 0 : n.tasks.findIndex((l) => l.id === v)) ?? 0;
+        }
+        if (y === d) {
+          const n = g.find((b) => b.id === d), l = n == null ? void 0 : n.tasks.findIndex((b) => b.id === u);
+          l !== void 0 && l !== N && A(u, y, d, N);
+        }
+        r == null || r(u, d, N);
+      },
+      [g, I, A, r]
+    ), Y = (a, i) => {
+      h == null || h(a, i);
+    }, o = (a, i) => {
+      x((p) => ({
+        columns: p.columns.map(
+          (u) => u.id === a ? { ...u, name: i } : u
+        )
+      })), m == null || m(a, i);
+    }, de = (a) => {
+      x((i) => ({
+        columns: i.columns.filter((p) => p.id !== a)
+      })), w == null || w(a);
+    }, ce = (a, i) => {
+      x((p) => ({
+        columns: p.columns.map(
+          (u) => u.id === a ? { ...u, isClientVisible: i } : u
+        )
+      })), f == null || f(a, i);
+    };
+    return /* @__PURE__ */ c(
+      ge,
+      {
+        sensors: z,
+        collisionDetection: ve,
+        onDragStart: M,
+        onDragOver: W,
+        onDragEnd: _,
+        accessibility: { announcements: P },
+        children: [
+          /* @__PURE__ */ c(
+            "div",
+            {
+              ref: K,
+              className: "no-scrollbar flex h-full gap-ds-05 overflow-x-auto pb-ds-05",
+              children: [
+                /* @__PURE__ */ e(
+                  re,
+                  {
+                    items: V,
+                    strategy: ye,
+                    children: g.map((a, i) => /* @__PURE__ */ e("div", { className: "group flex-shrink-0", children: /* @__PURE__ */ e(
+                      oe,
+                      {
+                        column: a,
+                        index: i,
+                        onAddTask: Y,
+                        onClickTask: D,
+                        onRenameColumn: o,
+                        onDeleteColumn: de,
+                        onToggleVisibility: ce
+                      }
+                    ) }, a.id))
+                  }
+                ),
+                /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: /* @__PURE__ */ c(
+                  $,
+                  {
+                    variant: "ghost",
+                    onClick: C,
+                    className: "h-ds-md w-[300px] justify-start gap-ds-03 rounded-ds-xl border border-dashed border-border/60 bg-layer-02 text-text-tertiary hover:border-border-interactive hover:bg-interactive-subtle/50 hover:text-interactive",
+                    children: [
+                      /* @__PURE__ */ e(Q, { className: "h-ico-sm w-ico-sm" }),
+                      "Add column"
+                    ]
+                  }
+                ) })
+              ]
+            }
+          ),
+          G && me(
+            /* @__PURE__ */ e(Ne, { dropAnimation: null, children: k ? /* @__PURE__ */ e(ne, { task: k }) : null }),
+            document.body
+          )
+        ]
+      }
+    );
+  }
+);
+Pe.displayName = "KanbanBoard";
+export {
+  oe as B,
+  Pe as K,
+  ie as T,
+  ne as a
+};