laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
152 lines (151 loc) • 5.55 kB
JavaScript
"use client";
import { jsx as i, jsxs as l, Fragment as z } from "react/jsx-runtime";
import { useState as L } from "react";
import { KanbanBoardProvider as H, KanbanBoard as I, KanbanBoardColumn as P, KanbanBoardColumnHeader as S, KanbanBoardColumnList as A, KanbanBoardColumnListItem as F, KanbanBoardCard as J, KanbanBoardCardTitle as R, KanbanBoardCardDescription as W } from "./kanban.js";
import { stringToHexColor as q, hexToRgba as E } from "../../lib/utils.js";
import { Button as G } from "./button.js";
import { Icon as Q } from "./icon.js";
import U from "../../node_modules/lucide-react/dist/esm/icons/plus.js";
function M({
columns: v,
initialTasks: K,
onTaskMove: m,
onTaskEdit: x,
onTaskCreate: u,
taskActions: B,
renderTaskContent: b,
className: y,
allowTaskCreate: j = !0
}) {
const [h, N] = L(K), g = (r) => {
const d = {};
for (const e of Object.keys(r))
d[e] = [...r[e]];
return d;
}, w = (r, d) => {
N((e) => {
const o = g(e);
let t, n;
for (const s of Object.keys(o)) {
const c = o[s].findIndex((p) => p.id === r);
if (c !== -1) {
n = s, [t] = o[s].splice(c, 1);
break;
}
}
return !t || n === d ? e : (o[d] || (o[d] = []), o[d].push(t), n && m && m(r, n, d), o);
});
}, O = (r, d, e, o) => {
N((t) => {
const n = g(t), s = Object.keys(n).find(
(a) => n[a].some((D) => D.id === r)
);
if (!s) return t;
const c = n[s].findIndex(
(a) => a.id === r
);
if (c === -1) return t;
const [p] = n[s].splice(c, 1);
n[e] || (n[e] = []);
const f = n[e].findIndex(
(a) => a.id === d
);
if (f === -1)
n[e].push(p);
else {
const a = o === "top" ? f : f + 1;
n[e].splice(a, 0, p);
}
return s !== e && m && m(r, s, e), n;
});
}, C = (r) => JSON.parse(r);
return /* @__PURE__ */ i(H, { children: /* @__PURE__ */ i(I, { className: y, children: v.map((r) => {
const d = q(r.label);
return /* @__PURE__ */ l(
P,
{
columnId: r.id,
onDropOverColumn: (e) => {
const o = C(e);
w(o.id, r.id);
},
className: "group/column rounded-xl backdrop-blur-sm transition-colors",
children: [
/* @__PURE__ */ i(S, { className: "relative mb-1.5 px-1.5 pt-1.5", children: /* @__PURE__ */ l("div", { className: "flex w-full items-center justify-between", children: [
/* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ i(
"div",
{
className: "flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-semibold",
style: {
backgroundColor: E(d, 0.15),
color: d
},
children: /* @__PURE__ */ i("span", { className: "max-w-[150px] truncate", children: r.label })
}
),
/* @__PURE__ */ i("span", { className: "text-d-muted-foreground text-xs", children: h[r.id]?.length ?? 0 })
] }),
/* @__PURE__ */ i("div", { className: "flex items-center gap-1", children: j && u && /* @__PURE__ */ i(
G,
{
variant: "ghost",
size: "icon",
className: "text-d-muted-foreground hover:text-d-foreground h-6 w-6",
onClick: () => u(r.id),
children: /* @__PURE__ */ i(U, { className: "size-3.5" })
}
) })
] }) }),
/* @__PURE__ */ i(A, { className: "px-1 pb-2", children: h[r.id]?.map((e) => /* @__PURE__ */ i(
F,
{
cardId: e.id,
className: "mb-1.5 border-0 last:mb-0",
onDropOverListItem: (o, t) => {
if (t === "none") return;
const n = C(o);
O(
n.id,
e.id,
r.id,
t
);
},
children: /* @__PURE__ */ i(
J,
{
data: e,
className: "group/card hover:border-d-border/40 relative rounded-md border border-transparent shadow-sm transition-all duration-200 hover:shadow-md",
backgroundColor: d,
onEdit: x ? () => x(e, r.id) : void 0,
actions: B?.(e, r.id),
meta: e.meta,
children: b ? b(e, r.id) : /* @__PURE__ */ l(z, { children: [
/* @__PURE__ */ l("div", { className: "mb-1 flex items-start gap-2", children: [
e.icon && /* @__PURE__ */ i(
Q,
{
name: e.icon,
size: "sm",
className: "text-d-muted-foreground mt-0.5 shrink-0"
}
),
/* @__PURE__ */ i(R, { className: "flex-1 text-sm leading-snug font-medium", children: e.title })
] }),
e.description && /* @__PURE__ */ i(W, { className: "text-d-muted-foreground mt-1.5 line-clamp-2 text-xs", children: e.description })
] })
}
)
},
e.id
)) })
]
},
r.id
);
}) }) });
}
export {
M as AppKanban
};