@wakastellar/ui 4.0.0-dev.0 → 4.0.1

package/dist/components/waka-dependency-tree/index.es.js

@@ -0,0 +1,368 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import { Badge as t } from "../badge/index.es.js";
+import { Button as n } from "../button/index.es.js";
+import { Input as r } from "../input/index.es.js";
+import { ScrollArea as i } from "../scroll-area/index.es.js";
+import { Tooltip as a, TooltipContent as o, TooltipProvider as s, TooltipTrigger as c } from "../tooltip/index.es.js";
+import * as l from "react";
+import { ArrowUpCircle as u, ChevronDown as d, ChevronRight as f, GitBranch as p, Package as m, Search as h, ShieldAlert as g } from "lucide-react";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+//#region src/components/waka-dependency-tree/index.tsx
+var b = {
+	direct: {
+		label: "Direct",
+		color: "bg-blue-500"
+	},
+	transitive: {
+		label: "Transitive",
+		color: "bg-gray-500"
+	},
+	dev: {
+		label: "Dev",
+		color: "bg-purple-500"
+	},
+	peer: {
+		label: "Peer",
+		color: "bg-orange-500"
+	},
+	optional: {
+		label: "Optional",
+		color: "bg-cyan-500"
+	}
+};
+function x(e) {
+	return e ? e.critical > 0 ? "critical" : e.high > 0 ? "high" : e.medium > 0 ? "medium" : e.low > 0 ? "low" : "none" : "none";
+}
+function S(e) {
+	return e ? e.critical + e.high + e.medium + e.low : 0;
+}
+function C(e) {
+	if (!e) return "";
+	if (e < 1024) return `${e} B`;
+	let t = 1024, n = [
+		"B",
+		"KB",
+		"MB"
+	], r = Math.floor(Math.log(e) / Math.log(t));
+	return parseFloat((e / t ** +r).toFixed(1)) + " " + n[r];
+}
+function w({ dependency: r, depth: i, isExpanded: l, onToggle: p, onDependencyClick: h, onUpgrade: _ }) {
+	let w = r.children && r.children.length > 0, T = x(r.vulnerabilities), E = S(r.vulnerabilities), D = b[r.type];
+	return /* @__PURE__ */ y("div", {
+		className: e("flex items-center gap-2 px-2 py-1.5 hover:bg-muted/50 transition-colors rounded", T === "critical" && "bg-red-500/5", T === "high" && "bg-orange-500/5"),
+		style: { paddingLeft: `${i * 20 + 8}px` },
+		children: [
+			/* @__PURE__ */ v("button", {
+				className: "w-5 h-5 flex items-center justify-center text-muted-foreground",
+				onClick: p,
+				disabled: !w,
+				children: w ? v(l ? d : f, { className: "h-4 w-4" }) : /* @__PURE__ */ v("span", { className: "w-4" })
+			}),
+			/* @__PURE__ */ y("div", {
+				className: "relative",
+				children: [/* @__PURE__ */ v(m, { className: "h-4 w-4 text-muted-foreground" }), T !== "none" && /* @__PURE__ */ v("div", { className: e("absolute -top-1 -right-1 w-2 h-2 rounded-full", T === "critical" ? "bg-red-500" : T === "high" ? "bg-orange-500" : T === "medium" ? "bg-yellow-500" : "bg-blue-500") })]
+			}),
+			/* @__PURE__ */ v("button", {
+				className: "font-medium text-sm hover:text-primary hover:underline",
+				onClick: () => h?.(r),
+				children: r.name
+			}),
+			/* @__PURE__ */ v("code", {
+				className: "text-xs bg-muted px-1.5 py-0.5 rounded",
+				children: r.version
+			}),
+			/* @__PURE__ */ v(t, {
+				variant: "outline",
+				className: "text-xs",
+				children: D.label
+			}),
+			E > 0 && /* @__PURE__ */ v(s, { children: /* @__PURE__ */ y(a, { children: [/* @__PURE__ */ v(c, {
+				asChild: !0,
+				children: /* @__PURE__ */ y(t, {
+					className: e("text-xs text-white", T === "critical" ? "bg-red-500" : T === "high" ? "bg-orange-500" : T === "medium" ? "bg-yellow-500" : "bg-blue-500"),
+					children: [/* @__PURE__ */ v(g, { className: "h-3 w-3 mr-1" }), E]
+				})
+			}), /* @__PURE__ */ v(o, { children: /* @__PURE__ */ y("div", {
+				className: "space-y-1 text-xs",
+				children: [
+					r.vulnerabilities?.critical > 0 && /* @__PURE__ */ y("div", {
+						className: "text-red-500",
+						children: [r.vulnerabilities?.critical, " critical"]
+					}),
+					r.vulnerabilities?.high > 0 && /* @__PURE__ */ y("div", {
+						className: "text-orange-500",
+						children: [r.vulnerabilities?.high, " high"]
+					}),
+					r.vulnerabilities?.medium > 0 && /* @__PURE__ */ y("div", {
+						className: "text-yellow-500",
+						children: [r.vulnerabilities?.medium, " medium"]
+					}),
+					r.vulnerabilities?.low > 0 && /* @__PURE__ */ y("div", {
+						className: "text-blue-500",
+						children: [r.vulnerabilities?.low, " low"]
+					})
+				]
+			}) })] }) }),
+			r.outdated && r.latestVersion && /* @__PURE__ */ v(s, { children: /* @__PURE__ */ y(a, { children: [/* @__PURE__ */ v(c, {
+				asChild: !0,
+				children: /* @__PURE__ */ y(n, {
+					variant: "ghost",
+					size: "sm",
+					className: "h-6 px-2 text-xs text-yellow-500",
+					onClick: (e) => {
+						e.stopPropagation(), _?.(r);
+					},
+					children: [/* @__PURE__ */ v(u, { className: "h-3 w-3 mr-1" }), r.latestVersion]
+				})
+			}), /* @__PURE__ */ y(o, { children: ["Upgrade to ", r.latestVersion] })] }) }),
+			r.license && /* @__PURE__ */ v("span", {
+				className: "text-xs text-muted-foreground ml-auto",
+				children: r.license
+			}),
+			r.size && /* @__PURE__ */ v("span", {
+				className: "text-xs text-muted-foreground",
+				children: C(r.size)
+			})
+		]
+	});
+}
+function T({ dependencies: e, depth: t, expandedIds: n, onToggle: r, onDependencyClick: i, onUpgrade: a, searchQuery: o }) {
+	return /* @__PURE__ */ v(_, { children: e.map((e) => {
+		let s = n.has(e.id);
+		return !(!o || e.name.toLowerCase().includes(o.toLowerCase())) && !e.children?.some((e) => e.name.toLowerCase().includes(o.toLowerCase())) ? null : /* @__PURE__ */ y(l.Fragment, { children: [/* @__PURE__ */ v(w, {
+			dependency: e,
+			depth: t,
+			isExpanded: s,
+			onToggle: () => r(e.id),
+			onDependencyClick: i,
+			onUpgrade: a
+		}), s && e.children && /* @__PURE__ */ v(T, {
+			dependencies: e.children,
+			depth: t + 1,
+			expandedIds: n,
+			onToggle: r,
+			onDependencyClick: i,
+			onUpgrade: a,
+			searchQuery: o
+		})] }, e.id);
+	}) });
+}
+function E({ dependencies: a, onDependencyClick: o, onUpgrade: s, title: c = "Dependencies", showDevDeps: u = !0, showVulnerableOnly: d = !1, className: f }) {
+	let [_, b] = l.useState(""), [x, C] = l.useState(/* @__PURE__ */ new Set()), [w, E] = l.useState(d), D = (e) => {
+		C((t) => {
+			let n = new Set(t);
+			return n.has(e) ? n.delete(e) : n.add(e), n;
+		});
+	}, O = () => {
+		let e = /* @__PURE__ */ new Set(), t = (n) => {
+			n.forEach((n) => {
+				e.add(n.id), n.children && t(n.children);
+			});
+		};
+		t(a), C(e);
+	}, k = () => {
+		C(/* @__PURE__ */ new Set());
+	}, A = l.useMemo(() => {
+		let e = a;
+		if (u || (e = e.filter((e) => e.type !== "dev")), w) {
+			let t = (e) => S(e.vulnerabilities) > 0 ? !0 : e.children?.some(t) || !1;
+			e = e.filter(t);
+		}
+		return e;
+	}, [
+		a,
+		u,
+		w
+	]), j = l.useMemo(() => {
+		let e = 0, t = 0, n = 0, r = 0, i = (a) => {
+			a.forEach((a) => {
+				e++, S(a.vulnerabilities) > 0 && t++, a.vulnerabilities?.critical && (r += a.vulnerabilities.critical), a.outdated && n++, a.children && i(a.children);
+			});
+		};
+		return i(a), {
+			total: e,
+			vulnerable: t,
+			outdated: n,
+			criticalVulns: r
+		};
+	}, [a]);
+	return /* @__PURE__ */ y("div", {
+		className: e("flex flex-col border rounded-lg bg-background", f),
+		children: [
+			/* @__PURE__ */ y("div", {
+				className: "flex items-center justify-between gap-4 p-3 border-b",
+				children: [/* @__PURE__ */ y("div", {
+					className: "flex items-center gap-3",
+					children: [
+						/* @__PURE__ */ v(p, { className: "h-5 w-5" }),
+						/* @__PURE__ */ v("h3", {
+							className: "font-semibold",
+							children: c
+						}),
+						/* @__PURE__ */ v(t, {
+							variant: "secondary",
+							children: j.total
+						})
+					]
+				}), /* @__PURE__ */ y("div", {
+					className: "flex items-center gap-2",
+					children: [
+						j.criticalVulns > 0 && /* @__PURE__ */ y(t, {
+							className: "bg-red-500",
+							children: [j.criticalVulns, " critical"]
+						}),
+						j.vulnerable > 0 && /* @__PURE__ */ y(t, {
+							variant: "secondary",
+							className: "text-orange-500",
+							children: [j.vulnerable, " vulnerable"]
+						}),
+						j.outdated > 0 && /* @__PURE__ */ y(t, {
+							variant: "outline",
+							children: [j.outdated, " outdated"]
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ y("div", {
+				className: "flex items-center gap-2 p-2 border-b bg-muted/30",
+				children: [
+					/* @__PURE__ */ y("div", {
+						className: "relative flex-1 max-w-sm",
+						children: [/* @__PURE__ */ v(h, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), /* @__PURE__ */ v(r, {
+							placeholder: "Search packages...",
+							value: _,
+							onChange: (e) => b(e.target.value),
+							className: "pl-8 h-8"
+						})]
+					}),
+					/* @__PURE__ */ y(n, {
+						variant: w ? "default" : "outline",
+						size: "sm",
+						className: "h-8",
+						onClick: () => E(!w),
+						children: [/* @__PURE__ */ v(g, { className: "h-4 w-4 mr-1" }), "Vulnerable only"]
+					}),
+					/* @__PURE__ */ y("div", {
+						className: "flex items-center gap-1",
+						children: [/* @__PURE__ */ v(n, {
+							variant: "ghost",
+							size: "sm",
+							className: "h-8",
+							onClick: O,
+							children: "Expand All"
+						}), /* @__PURE__ */ v(n, {
+							variant: "ghost",
+							size: "sm",
+							className: "h-8",
+							onClick: k,
+							children: "Collapse All"
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ v(i, {
+				className: "flex-1 max-h-[500px]",
+				children: /* @__PURE__ */ v("div", {
+					className: "py-2",
+					children: A.length === 0 ? /* @__PURE__ */ y("div", {
+						className: "flex flex-col items-center justify-center h-32 text-muted-foreground",
+						children: [/* @__PURE__ */ v(m, { className: "h-8 w-8 mb-2" }), /* @__PURE__ */ v("span", { children: "No dependencies found" })]
+					}) : /* @__PURE__ */ v(T, {
+						dependencies: A,
+						depth: 0,
+						expandedIds: x,
+						onToggle: D,
+						onDependencyClick: o,
+						onUpgrade: s,
+						searchQuery: _
+					})
+				})
+			})
+		]
+	});
+}
+var D = [
+	{
+		id: "1",
+		name: "react",
+		version: "18.2.0",
+		latestVersion: "18.2.0",
+		type: "direct",
+		license: "MIT",
+		size: 2.5 * 1024 * 1024,
+		children: [{
+			id: "1-1",
+			name: "loose-envify",
+			version: "1.4.0",
+			type: "transitive",
+			license: "MIT"
+		}]
+	},
+	{
+		id: "2",
+		name: "lodash",
+		version: "4.17.19",
+		latestVersion: "4.17.21",
+		type: "direct",
+		license: "MIT",
+		outdated: !0,
+		vulnerabilities: {
+			critical: 0,
+			high: 1,
+			medium: 1,
+			low: 0
+		},
+		size: 530 * 1024
+	},
+	{
+		id: "3",
+		name: "axios",
+		version: "0.21.1",
+		latestVersion: "1.6.0",
+		type: "direct",
+		license: "MIT",
+		outdated: !0,
+		vulnerabilities: {
+			critical: 1,
+			high: 0,
+			medium: 0,
+			low: 0
+		},
+		size: 450 * 1024,
+		children: [{
+			id: "3-1",
+			name: "follow-redirects",
+			version: "1.14.0",
+			type: "transitive",
+			license: "MIT",
+			vulnerabilities: {
+				critical: 0,
+				high: 1,
+				medium: 0,
+				low: 0
+			}
+		}]
+	},
+	{
+		id: "4",
+		name: "typescript",
+		version: "5.0.0",
+		latestVersion: "5.3.0",
+		type: "dev",
+		license: "Apache-2.0",
+		outdated: !0,
+		size: 15 * 1024 * 1024
+	},
+	{
+		id: "5",
+		name: "eslint",
+		version: "8.50.0",
+		type: "dev",
+		license: "MIT",
+		size: 3 * 1024 * 1024
+	}
+];
+//#endregion
+export { E as WakaDependencyTree, D as defaultDependencies };

package/dist/components/waka-deployment-lane/index.cjs.js

@@ -0,0 +1 @@
+"use client";"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs.js`),t=require(`../../utils/cn.cjs.js`);let n=require(`react`);n=e.__toESM(n);let r=require(`lucide-react`),i=require(`react/jsx-runtime`);var a={running:{icon:r.CheckCircle2,color:`text-green-500`,bgColor:`bg-green-500/10`,borderColor:`border-green-500/30`,label:`Running`},stopped:{icon:r.XCircle,color:`text-gray-500`,bgColor:`bg-gray-500/10`,borderColor:`border-gray-500/30`,label:`Stopped`},deploying:{icon:r.Loader2,color:`text-blue-500`,bgColor:`bg-blue-500/10`,borderColor:`border-blue-500/30`,label:`Deploying`,animate:!0},failed:{icon:r.AlertCircle,color:`text-red-500`,bgColor:`bg-red-500/10`,borderColor:`border-red-500/30`,label:`Failed`}};function o(e){let t=Math.floor((new Date().getTime()-e.getTime())/1e3);if(t<60)return`just now`;let n=Math.floor(t/60);if(n<60)return`${n}m ago`;let r=Math.floor(n/60);if(r<24)return`${r}h ago`;let i=Math.floor(r/24);return i<7?`${i}d ago`:e.toLocaleDateString()}function s(e){return e.length>7?e.slice(0,7):e}function c({deployment:e,envId:n,envIndex:c,totalEnvs:l,nextEnvId:u,nextEnvRequiresApproval:d,onPromote:f,onRollback:p,onApprove:m,draggable:h,onDragStart:g,isPromoting:_}){let v=a[e.status],y=v.icon,b=c<l-1&&e.status===`running`,x=e.status===`running`||e.status===`failed`;return(0,i.jsxs)(`div`,{draggable:h&&e.status===`running`,onDragStart:t=>g?.(t,e.id,n),className:t.cn(`group relative bg-card border rounded-lg p-4 transition-all duration-300`,`hover:shadow-md hover:border-primary/50`,h&&e.status===`running`&&`cursor-grab active:cursor-grabbing`,_&&`animate-pulse scale-[1.02] border-primary shadow-lg`),children:[h&&e.status===`running`&&(0,i.jsx)(`div`,{className:`absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity`,children:(0,i.jsx)(r.GripVertical,{className:`h-4 w-4 text-muted-foreground`})}),(0,i.jsx)(`div`,{className:`flex items-center justify-between mb-3`,children:(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,i.jsxs)(`span`,{className:`font-mono font-semibold text-sm`,children:[`v`,e.version]}),(0,i.jsxs)(`div`,{className:t.cn(`flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium`,v.bgColor,v.color),children:[(0,i.jsx)(y,{className:t.cn(`h-3 w-3`,v.animate&&`animate-spin`)}),v.label]})]})}),e.commit&&(0,i.jsxs)(`div`,{className:`flex items-center gap-1.5 text-xs text-muted-foreground mb-2`,children:[(0,i.jsx)(r.GitCommit,{className:`h-3 w-3`}),(0,i.jsx)(`span`,{className:`font-mono`,children:s(e.commit)})]}),e.deployedBy&&(0,i.jsxs)(`div`,{className:`flex items-center gap-1.5 text-xs text-muted-foreground mb-2`,children:[(0,i.jsx)(r.User,{className:`h-3 w-3`}),(0,i.jsx)(`span`,{children:e.deployedBy})]}),(0,i.jsxs)(`div`,{className:`flex items-center gap-1.5 text-xs text-muted-foreground mb-3`,children:[(0,i.jsx)(r.Clock,{className:`h-3 w-3`}),(0,i.jsx)(`span`,{children:o(e.deployedAt)})]}),(0,i.jsxs)(`div`,{className:`flex items-center gap-2 pt-3 border-t`,children:[b&&u&&(0,i.jsx)(`button`,{type:`button`,onClick:()=>f?.(e.id,n,u),className:t.cn(`flex items-center gap-1 px-2 py-1 rounded text-xs font-medium`,`bg-primary/10 text-primary hover:bg-primary/20 transition-colors`),children:d?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(r.ShieldCheck,{className:`h-3 w-3`}),`Request Approval`]}):(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(r.Play,{className:`h-3 w-3`}),`Promote`]})}),d&&b&&m&&(0,i.jsxs)(`button`,{type:`button`,onClick:()=>m?.(e.id,n),className:t.cn(`flex items-center gap-1 px-2 py-1 rounded text-xs font-medium`,`bg-green-500/10 text-green-600 hover:bg-green-500/20 transition-colors`),children:[(0,i.jsx)(r.CheckCircle2,{className:`h-3 w-3`}),`Approve`]}),x&&p&&(0,i.jsxs)(`button`,{type:`button`,onClick:()=>p?.(e.id,n),className:t.cn(`flex items-center gap-1 px-2 py-1 rounded text-xs font-medium`,`bg-orange-500/10 text-orange-600 hover:bg-orange-500/20 transition-colors`),children:[(0,i.jsx)(r.RotateCcw,{className:`h-3 w-3`}),`Rollback`]})]})]})}function l({requiresApproval:e,approvers:n}){return e?(0,i.jsxs)(`div`,{className:`flex flex-col items-center justify-center px-4 py-2`,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,i.jsx)(`div`,{className:`w-4 h-px bg-border`}),(0,i.jsxs)(`div`,{className:t.cn(`flex items-center gap-1.5 px-2 py-1 rounded-full`,`bg-amber-500/10 border border-amber-500/30 text-amber-600`,`text-[10px] font-medium`),children:[(0,i.jsx)(r.ShieldCheck,{className:`h-3 w-3`}),`Approval Required`]}),(0,i.jsx)(`div`,{className:`w-4 h-px bg-border`})]}),n&&n.length>0&&(0,i.jsxs)(`div`,{className:`text-[10px] text-muted-foreground mt-1`,children:[n.slice(0,2).join(`, `),n.length>2&&` +${n.length-2}`]})]}):(0,i.jsx)(`div`,{className:`flex items-center justify-center px-4`,children:(0,i.jsxs)(`div`,{className:`flex items-center gap-1 text-muted-foreground`,children:[(0,i.jsx)(`div`,{className:`w-8 h-px bg-border`}),(0,i.jsx)(r.ChevronRight,{className:`h-4 w-4`}),(0,i.jsx)(`div`,{className:`w-8 h-px bg-border`})]})})}function u({environment:e,envIndex:a,totalEnvs:o,nextEnv:s,onPromote:l,onRollback:u,onApprove:d,draggable:f,draggedDeployment:p,setDraggedDeployment:m,promotingDeployment:h}){let[g,_]=n.useState(!1),v=(e,t,n)=>{m({id:t,fromEnvId:n}),e.dataTransfer.effectAllowed=`move`};return(0,i.jsxs)(`div`,{className:t.cn(`flex-1 min-w-[280px] max-w-[360px] flex flex-col`,`bg-muted/30 rounded-lg border transition-all duration-200`,g&&`border-primary bg-primary/5 scale-[1.02]`),onDragOver:t=>{t.preventDefault(),p&&p.fromEnvId!==e.id&&_(!0)},onDragLeave:()=>{_(!1)},onDrop:t=>{t.preventDefault(),_(!1),p&&l&&l(p.id,p.fromEnvId,e.id),m(null)},children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2 p-4 border-b`,children:[(0,i.jsx)(`div`,{className:t.cn(`w-3 h-3 rounded-full`,(e=>{let t=e.toLowerCase();return t.includes(`prod`)?`bg-red-500`:t.includes(`staging`)||t.includes(`stage`)?`bg-amber-500`:t.includes(`dev`)?`bg-blue-500`:t.includes(`test`)||t.includes(`qa`)?`bg-purple-500`:`bg-gray-500`})(e.name))}),(0,i.jsx)(`h3`,{className:`font-semibold text-sm uppercase tracking-wide`,children:e.name}),(0,i.jsx)(`span`,{className:`text-xs text-muted-foreground bg-background px-1.5 py-0.5 rounded ml-auto`,children:e.deployments.length})]}),(0,i.jsxs)(`div`,{className:`flex-1 p-3 space-y-3 overflow-y-auto max-h-[400px]`,children:[e.deployments.length===0?(0,i.jsx)(`div`,{className:`flex items-center justify-center h-24 text-sm text-muted-foreground border-2 border-dashed rounded-lg`,children:`No deployments`}):e.deployments.map(t=>(0,i.jsx)(c,{deployment:t,envId:e.id,envIndex:a,totalEnvs:o,nextEnvId:s?.id,nextEnvRequiresApproval:s?.requiresApproval,onPromote:l,onRollback:u,onApprove:d,draggable:f,onDragStart:v,isPromoting:h===t.id},t.id)),g&&p&&(0,i.jsxs)(`div`,{className:`h-20 border-2 border-dashed border-primary/50 rounded-lg flex items-center justify-center text-sm text-primary`,children:[(0,i.jsx)(r.ArrowRight,{className:`h-4 w-4 mr-2`}),`Drop to promote here`]})]})]})}function d({environments:e,onPromote:r,onRollback:a,onApprove:o,draggable:s=!0,className:c}){let[d,f]=n.useState(null),[p,m]=n.useState(null),h=(e,t,n)=>{m(e),r?.(e,t,n),setTimeout(()=>{m(null)},500)};return(0,i.jsx)(`div`,{className:t.cn(`flex items-stretch gap-0 overflow-x-auto p-4`,c),children:e.map((t,r)=>(0,i.jsxs)(n.Fragment,{children:[(0,i.jsx)(u,{environment:t,envIndex:r,totalEnvs:e.length,nextEnv:e[r+1],onPromote:h,onRollback:a,onApprove:o,draggable:s,draggedDeployment:d,setDraggedDeployment:f,promotingDeployment:p}),r<e.length-1&&(0,i.jsx)(l,{requiresApproval:e[r+1]?.requiresApproval||!1,approvers:e[r+1]?.approvers})]},t.id))})}function f(e){let[t,r]=n.useState(e);return{environments:t,setEnvironments:r,promoteDeployment:(e,t,n)=>{r(r=>{let i=r.map(e=>({...e,deployments:e.deployments.map(e=>({...e}))})),a=i.find(e=>e.id===t);if(!a)return r;let o=a.deployments.findIndex(t=>t.id===e);if(o===-1)return r;let s=a.deployments[o],c=i.find(e=>e.id===n);if(!c)return r;let l={...s,id:`${s.id}-${n}`,status:`deploying`,deployedAt:new Date};return c.deployments.unshift(l),i})},rollbackDeployment:(e,t)=>{r(n=>n.map(n=>n.id===t?{...n,deployments:n.deployments.map(t=>t.id===e?{...t,status:`stopped`}:t)}:n))},approveDeployment:(e,t)=>{console.log(`Approved deployment ${e} for environment ${t}`)},updateDeploymentStatus:(e,t,n)=>{r(r=>r.map(r=>r.id===t?{...r,deployments:r.deployments.map(t=>t.id===e?{...t,status:n}:t)}:r))},addDeployment:(e,t)=>{r(n=>n.map(n=>n.id===e?{...n,deployments:[{id:`deployment-${Date.now()}`,...t},...n.deployments]}:n))},removeDeployment:(e,t)=>{r(n=>n.map(n=>n.id===t?{...n,deployments:n.deployments.filter(t=>t.id!==e)}:n))}}}exports.default=d,exports.useDeploymentLane=f;

package/dist/components/waka-deployment-lane/index.es.js

@@ -0,0 +1,295 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { AlertCircle as n, ArrowRight as r, CheckCircle2 as i, ChevronRight as a, Clock as o, GitCommit as s, GripVertical as c, Loader2 as l, Play as u, RotateCcw as d, ShieldCheck as f, User as p, XCircle as m } from "lucide-react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/components/waka-deployment-lane/index.tsx
+var v = {
+	running: {
+		icon: i,
+		color: "text-green-500",
+		bgColor: "bg-green-500/10",
+		borderColor: "border-green-500/30",
+		label: "Running"
+	},
+	stopped: {
+		icon: m,
+		color: "text-gray-500",
+		bgColor: "bg-gray-500/10",
+		borderColor: "border-gray-500/30",
+		label: "Stopped"
+	},
+	deploying: {
+		icon: l,
+		color: "text-blue-500",
+		bgColor: "bg-blue-500/10",
+		borderColor: "border-blue-500/30",
+		label: "Deploying",
+		animate: !0
+	},
+	failed: {
+		icon: n,
+		color: "text-red-500",
+		bgColor: "bg-red-500/10",
+		borderColor: "border-red-500/30",
+		label: "Failed"
+	}
+};
+function y(e) {
+	let t = Math.floor(((/* @__PURE__ */ new Date()).getTime() - e.getTime()) / 1e3);
+	if (t < 60) return "just now";
+	let n = Math.floor(t / 60);
+	if (n < 60) return `${n}m ago`;
+	let r = Math.floor(n / 60);
+	if (r < 24) return `${r}h ago`;
+	let i = Math.floor(r / 24);
+	return i < 7 ? `${i}d ago` : e.toLocaleDateString();
+}
+function b(e) {
+	return e.length > 7 ? e.slice(0, 7) : e;
+}
+function x({ deployment: t, envId: n, envIndex: r, totalEnvs: a, nextEnvId: l, nextEnvRequiresApproval: m, onPromote: x, onRollback: S, onApprove: C, draggable: w, onDragStart: T, isPromoting: E }) {
+	let D = v[t.status], O = D.icon, k = r < a - 1 && t.status === "running", A = t.status === "running" || t.status === "failed";
+	return /* @__PURE__ */ _("div", {
+		draggable: w && t.status === "running",
+		onDragStart: (e) => T?.(e, t.id, n),
+		className: e("group relative bg-card border rounded-lg p-4 transition-all duration-300", "hover:shadow-md hover:border-primary/50", w && t.status === "running" && "cursor-grab active:cursor-grabbing", E && "animate-pulse scale-[1.02] border-primary shadow-lg"),
+		children: [
+			w && t.status === "running" && /* @__PURE__ */ g("div", {
+				className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity",
+				children: /* @__PURE__ */ g(c, { className: "h-4 w-4 text-muted-foreground" })
+			}),
+			/* @__PURE__ */ g("div", {
+				className: "flex items-center justify-between mb-3",
+				children: /* @__PURE__ */ _("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ _("span", {
+						className: "font-mono font-semibold text-sm",
+						children: ["v", t.version]
+					}), /* @__PURE__ */ _("div", {
+						className: e("flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium", D.bgColor, D.color),
+						children: [/* @__PURE__ */ g(O, { className: e("h-3 w-3", D.animate && "animate-spin") }), D.label]
+					})]
+				})
+			}),
+			t.commit && /* @__PURE__ */ _("div", {
+				className: "flex items-center gap-1.5 text-xs text-muted-foreground mb-2",
+				children: [/* @__PURE__ */ g(s, { className: "h-3 w-3" }), /* @__PURE__ */ g("span", {
+					className: "font-mono",
+					children: b(t.commit)
+				})]
+			}),
+			t.deployedBy && /* @__PURE__ */ _("div", {
+				className: "flex items-center gap-1.5 text-xs text-muted-foreground mb-2",
+				children: [/* @__PURE__ */ g(p, { className: "h-3 w-3" }), /* @__PURE__ */ g("span", { children: t.deployedBy })]
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "flex items-center gap-1.5 text-xs text-muted-foreground mb-3",
+				children: [/* @__PURE__ */ g(o, { className: "h-3 w-3" }), /* @__PURE__ */ g("span", { children: y(t.deployedAt) })]
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "flex items-center gap-2 pt-3 border-t",
+				children: [
+					k && l && /* @__PURE__ */ g("button", {
+						type: "button",
+						onClick: () => x?.(t.id, n, l),
+						className: e("flex items-center gap-1 px-2 py-1 rounded text-xs font-medium", "bg-primary/10 text-primary hover:bg-primary/20 transition-colors"),
+						children: m ? /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(f, { className: "h-3 w-3" }), "Request Approval"] }) : /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(u, { className: "h-3 w-3" }), "Promote"] })
+					}),
+					m && k && C && /* @__PURE__ */ _("button", {
+						type: "button",
+						onClick: () => C?.(t.id, n),
+						className: e("flex items-center gap-1 px-2 py-1 rounded text-xs font-medium", "bg-green-500/10 text-green-600 hover:bg-green-500/20 transition-colors"),
+						children: [/* @__PURE__ */ g(i, { className: "h-3 w-3" }), "Approve"]
+					}),
+					A && S && /* @__PURE__ */ _("button", {
+						type: "button",
+						onClick: () => S?.(t.id, n),
+						className: e("flex items-center gap-1 px-2 py-1 rounded text-xs font-medium", "bg-orange-500/10 text-orange-600 hover:bg-orange-500/20 transition-colors"),
+						children: [/* @__PURE__ */ g(d, { className: "h-3 w-3" }), "Rollback"]
+					})
+				]
+			})
+		]
+	});
+}
+function S({ requiresApproval: t, approvers: n }) {
+	return t ? /* @__PURE__ */ _("div", {
+		className: "flex flex-col items-center justify-center px-4 py-2",
+		children: [/* @__PURE__ */ _("div", {
+			className: "flex items-center gap-2",
+			children: [
+				/* @__PURE__ */ g("div", { className: "w-4 h-px bg-border" }),
+				/* @__PURE__ */ _("div", {
+					className: e("flex items-center gap-1.5 px-2 py-1 rounded-full", "bg-amber-500/10 border border-amber-500/30 text-amber-600", "text-[10px] font-medium"),
+					children: [/* @__PURE__ */ g(f, { className: "h-3 w-3" }), "Approval Required"]
+				}),
+				/* @__PURE__ */ g("div", { className: "w-4 h-px bg-border" })
+			]
+		}), n && n.length > 0 && /* @__PURE__ */ _("div", {
+			className: "text-[10px] text-muted-foreground mt-1",
+			children: [n.slice(0, 2).join(", "), n.length > 2 && ` +${n.length - 2}`]
+		})]
+	}) : /* @__PURE__ */ g("div", {
+		className: "flex items-center justify-center px-4",
+		children: /* @__PURE__ */ _("div", {
+			className: "flex items-center gap-1 text-muted-foreground",
+			children: [
+				/* @__PURE__ */ g("div", { className: "w-8 h-px bg-border" }),
+				/* @__PURE__ */ g(a, { className: "h-4 w-4" }),
+				/* @__PURE__ */ g("div", { className: "w-8 h-px bg-border" })
+			]
+		})
+	});
+}
+function C({ environment: n, envIndex: i, totalEnvs: a, nextEnv: o, onPromote: s, onRollback: c, onApprove: l, draggable: u, draggedDeployment: d, setDraggedDeployment: f, promotingDeployment: p }) {
+	let [m, h] = t.useState(!1), v = (e, t, n) => {
+		f({
+			id: t,
+			fromEnvId: n
+		}), e.dataTransfer.effectAllowed = "move";
+	};
+	return /* @__PURE__ */ _("div", {
+		className: e("flex-1 min-w-[280px] max-w-[360px] flex flex-col", "bg-muted/30 rounded-lg border transition-all duration-200", m && "border-primary bg-primary/5 scale-[1.02]"),
+		onDragOver: (e) => {
+			e.preventDefault(), d && d.fromEnvId !== n.id && h(!0);
+		},
+		onDragLeave: () => {
+			h(!1);
+		},
+		onDrop: (e) => {
+			e.preventDefault(), h(!1), d && s && s(d.id, d.fromEnvId, n.id), f(null);
+		},
+		children: [/* @__PURE__ */ _("div", {
+			className: "flex items-center gap-2 p-4 border-b",
+			children: [
+				/* @__PURE__ */ g("div", { className: e("w-3 h-3 rounded-full", ((e) => {
+					let t = e.toLowerCase();
+					return t.includes("prod") ? "bg-red-500" : t.includes("staging") || t.includes("stage") ? "bg-amber-500" : t.includes("dev") ? "bg-blue-500" : t.includes("test") || t.includes("qa") ? "bg-purple-500" : "bg-gray-500";
+				})(n.name)) }),
+				/* @__PURE__ */ g("h3", {
+					className: "font-semibold text-sm uppercase tracking-wide",
+					children: n.name
+				}),
+				/* @__PURE__ */ g("span", {
+					className: "text-xs text-muted-foreground bg-background px-1.5 py-0.5 rounded ml-auto",
+					children: n.deployments.length
+				})
+			]
+		}), /* @__PURE__ */ _("div", {
+			className: "flex-1 p-3 space-y-3 overflow-y-auto max-h-[400px]",
+			children: [n.deployments.length === 0 ? /* @__PURE__ */ g("div", {
+				className: "flex items-center justify-center h-24 text-sm text-muted-foreground border-2 border-dashed rounded-lg",
+				children: "No deployments"
+			}) : n.deployments.map((e) => /* @__PURE__ */ g(x, {
+				deployment: e,
+				envId: n.id,
+				envIndex: i,
+				totalEnvs: a,
+				nextEnvId: o?.id,
+				nextEnvRequiresApproval: o?.requiresApproval,
+				onPromote: s,
+				onRollback: c,
+				onApprove: l,
+				draggable: u,
+				onDragStart: v,
+				isPromoting: p === e.id
+			}, e.id)), m && d && /* @__PURE__ */ _("div", {
+				className: "h-20 border-2 border-dashed border-primary/50 rounded-lg flex items-center justify-center text-sm text-primary",
+				children: [/* @__PURE__ */ g(r, { className: "h-4 w-4 mr-2" }), "Drop to promote here"]
+			})]
+		})]
+	});
+}
+function w({ environments: n, onPromote: r, onRollback: i, onApprove: a, draggable: o = !0, className: s }) {
+	let [c, l] = t.useState(null), [u, d] = t.useState(null), f = (e, t, n) => {
+		d(e), r?.(e, t, n), setTimeout(() => {
+			d(null);
+		}, 500);
+	};
+	return /* @__PURE__ */ g("div", {
+		className: e("flex items-stretch gap-0 overflow-x-auto p-4", s),
+		children: n.map((e, r) => /* @__PURE__ */ _(t.Fragment, { children: [/* @__PURE__ */ g(C, {
+			environment: e,
+			envIndex: r,
+			totalEnvs: n.length,
+			nextEnv: n[r + 1],
+			onPromote: f,
+			onRollback: i,
+			onApprove: a,
+			draggable: o,
+			draggedDeployment: c,
+			setDraggedDeployment: l,
+			promotingDeployment: u
+		}), r < n.length - 1 && /* @__PURE__ */ g(S, {
+			requiresApproval: n[r + 1]?.requiresApproval || !1,
+			approvers: n[r + 1]?.approvers
+		})] }, e.id))
+	});
+}
+function T(e) {
+	let [n, r] = t.useState(e);
+	return {
+		environments: n,
+		setEnvironments: r,
+		promoteDeployment: (e, t, n) => {
+			r((r) => {
+				let i = r.map((e) => ({
+					...e,
+					deployments: e.deployments.map((e) => ({ ...e }))
+				})), a = i.find((e) => e.id === t);
+				if (!a) return r;
+				let o = a.deployments.findIndex((t) => t.id === e);
+				if (o === -1) return r;
+				let s = a.deployments[o], c = i.find((e) => e.id === n);
+				if (!c) return r;
+				let l = {
+					...s,
+					id: `${s.id}-${n}`,
+					status: "deploying",
+					deployedAt: /* @__PURE__ */ new Date()
+				};
+				return c.deployments.unshift(l), i;
+			});
+		},
+		rollbackDeployment: (e, t) => {
+			r((n) => n.map((n) => n.id === t ? {
+				...n,
+				deployments: n.deployments.map((t) => t.id === e ? {
+					...t,
+					status: "stopped"
+				} : t)
+			} : n));
+		},
+		approveDeployment: (e, t) => {
+			console.log(`Approved deployment ${e} for environment ${t}`);
+		},
+		updateDeploymentStatus: (e, t, n) => {
+			r((r) => r.map((r) => r.id === t ? {
+				...r,
+				deployments: r.deployments.map((t) => t.id === e ? {
+					...t,
+					status: n
+				} : t)
+			} : r));
+		},
+		addDeployment: (e, t) => {
+			r((n) => n.map((n) => n.id === e ? {
+				...n,
+				deployments: [{
+					id: `deployment-${Date.now()}`,
+					...t
+				}, ...n.deployments]
+			} : n));
+		},
+		removeDeployment: (e, t) => {
+			r((n) => n.map((n) => n.id === t ? {
+				...n,
+				deployments: n.deployments.filter((t) => t.id !== e)
+			} : n));
+		}
+	};
+}
+//#endregion
+export { w as default, T as useDeploymentLane };