@object-ui/plugin-kanban 0.5.0 → 3.0.0

package/src/index.test.ts

@@ -17,12 +17,12 @@ describe('Plugin Kanban', () => {
 
   describe('kanban component', () => {
     it('should be registered in ComponentRegistry', () => {
-      const kanbanRenderer = ComponentRegistry.get('kanban');
+      const kanbanRenderer = ComponentRegistry.get('kanban-ui');
       expect(kanbanRenderer).toBeDefined();
     });
 
     it('should have proper metadata', () => {
-      const config = ComponentRegistry.getConfig('kanban');
+      const config = ComponentRegistry.getConfig('kanban-ui');
       expect(config).toBeDefined();
       expect(config?.label).toBe('Kanban Board');
       expect(config?.icon).toBe('LayoutDashboard');
@@ -32,7 +32,7 @@ describe('Plugin Kanban', () => {
     });
 
     it('should have expected inputs', () => {
-      const config = ComponentRegistry.getConfig('kanban');
+      const config = ComponentRegistry.getConfig('kanban-ui');
       const inputNames = config?.inputs?.map((input: any) => input.name) || [];
       
       expect(inputNames).toContain('columns');
@@ -41,7 +41,7 @@ describe('Plugin Kanban', () => {
     });
 
     it('should have columns as required input', () => {
-      const config = ComponentRegistry.getConfig('kanban');
+      const config = ComponentRegistry.getConfig('kanban-ui');
       const columnsInput = config?.inputs?.find((input: any) => input.name === 'columns');
       
       expect(columnsInput).toBeDefined();
@@ -51,7 +51,7 @@ describe('Plugin Kanban', () => {
     });
 
     it('should have onCardMove as code input', () => {
-      const config = ComponentRegistry.getConfig('kanban');
+      const config = ComponentRegistry.getConfig('kanban-ui');
       const onCardMoveInput = config?.inputs?.find((input: any) => input.name === 'onCardMove');
       
       expect(onCardMoveInput).toBeDefined();
@@ -61,7 +61,7 @@ describe('Plugin Kanban', () => {
     });
 
     it('should have sensible default props', () => {
-      const config = ComponentRegistry.getConfig('kanban');
+      const config = ComponentRegistry.getConfig('kanban-ui');
       const defaults = config?.defaultProps;
       
       expect(defaults).toBeDefined();
@@ -72,7 +72,7 @@ describe('Plugin Kanban', () => {
     });
 
     it('should have default columns with proper structure', () => {
-      const config = ComponentRegistry.getConfig('kanban');
+      const config = ComponentRegistry.getConfig('kanban-ui');
       const defaults = config?.defaultProps;
       const columns = defaults?.columns || [];
       
@@ -93,7 +93,7 @@ describe('Plugin Kanban', () => {
     });
 
     it('should have cards with proper structure', () => {
-      const config = ComponentRegistry.getConfig('kanban');
+      const config = ComponentRegistry.getConfig('kanban-ui');
       const defaults = config?.defaultProps;
       const columns = defaults?.columns || [];
       

package/src/index.tsx

@@ -30,6 +30,7 @@ export interface KanbanRendererProps {
     data?: Array<any>;
     groupBy?: string;
     onCardMove?: (cardId: string, fromColumnId: string, toColumnId: string, newIndex: number) => void;
+    onCardClick?: (card: any) => void;
   };
 }
 
@@ -44,9 +45,18 @@ export const KanbanRenderer: React.FC<KanbanRendererProps> = ({ schema }) => {
     
     // If we have flat data and a grouping key, distribute items into columns
     if (data && groupBy && Array.isArray(data)) {
-      // 1. Group data by key
+      // Build label→id mapping so data values (labels like "In Progress")
+      // match column IDs (option values like "in_progress")
+      const labelToColumnId: Record<string, string> = {};
+      columns.forEach((col: any) => {
+        if (col.id) labelToColumnId[String(col.id).toLowerCase()] = col.id;
+        if (col.title) labelToColumnId[String(col.title).toLowerCase()] = col.id;
+      });
+
+      // 1. Group data by key, normalizing via label→id mapping
       const groups = data.reduce((acc, item) => {
-        const key = item[groupBy];
+        const rawKey = String(item[groupBy] ?? '');
+        const key = labelToColumnId[rawKey.toLowerCase()] ?? rawKey;
         if (!acc[key]) acc[key] = [];
         acc[key].push(item);
         return acc;
@@ -71,6 +81,7 @@ export const KanbanRenderer: React.FC<KanbanRendererProps> = ({ schema }) => {
       <LazyKanban
         columns={processedColumns}
         onCardMove={schema.onCardMove}
+        onCardClick={schema.onCardClick}
         className={schema.className}
       />
     </Suspense>
@@ -79,7 +90,7 @@ export const KanbanRenderer: React.FC<KanbanRendererProps> = ({ schema }) => {
 
 // Register the component with the ComponentRegistry
 ComponentRegistry.register(
-  'kanban',
+  'kanban-ui',
   KanbanRenderer,
   {
     namespace: 'plugin-kanban',
@@ -250,7 +261,21 @@ ComponentRegistry.register(
   {
     namespace: 'plugin-kanban',
     label: 'Object Kanban',
-    category: 'plugin',
+    category: 'view',
+    inputs: [
+      { name: 'objectName', type: 'string', label: 'Object Name', required: true },
+      { name: 'columns', type: 'array', label: 'Columns' }
+    ]
+  }
+);
+
+ComponentRegistry.register(
+  'kanban',
+  ObjectKanbanRenderer,
+  {
+    namespace: 'view',
+    label: 'Kanban Board',
+    category: 'view',
     inputs: [
       { name: 'objectName', type: 'string', label: 'Object Name', required: true },
       { name: 'columns', type: 'array', label: 'Columns' }

package/dist/KanbanImpl-B8nu2BvG.js

@@ -1,144 +0,0 @@
-import { j as e } from "./index-CrR06na7.js";
-import * as x from "react";
-import { u as L, a as P, D as T, c as F, b as H, d as M, P as $, e as k, S as q, v as z, C as G } from "./sortable.esm-ZHwgFQIO.js";
-import { Badge as B, ScrollArea as J, Card as Q, CardHeader as U, CardTitle as V, CardDescription as W, CardContent as X } from "@object-ui/components";
-const E = (...s) => s.filter(Boolean).join(" ");
-function R({ card: s }) {
-  const {
-    attributes: f,
-    listeners: d,
-    setNodeRef: u,
-    transform: p,
-    transition: t,
-    isDragging: n
-  } = k({ id: s.id }), b = {
-    transform: G.Transform.toString(p),
-    transition: t,
-    opacity: n ? 0.5 : void 0
-  };
-  return /* @__PURE__ */ e.jsx("div", { ref: u, style: b, ...f, ...d, children: /* @__PURE__ */ e.jsxs(Q, { className: "mb-2 cursor-grab active:cursor-grabbing border-border bg-card/60 hover:border-primary/40 hover:shadow-lg hover:shadow-primary/10 transition-all duration-300 group", children: [
-    /* @__PURE__ */ e.jsxs(U, { className: "p-4", children: [
-      /* @__PURE__ */ e.jsx(V, { className: "text-sm font-medium font-mono tracking-tight text-foreground group-hover:text-primary transition-colors", children: s.title }),
-      s.description && /* @__PURE__ */ e.jsx(W, { className: "text-xs text-muted-foreground font-mono", children: s.description })
-    ] }),
-    s.badges && s.badges.length > 0 && /* @__PURE__ */ e.jsx(X, { className: "p-4 pt-0", children: /* @__PURE__ */ e.jsx("div", { className: "flex flex-wrap gap-1", children: s.badges.map((S, y) => /* @__PURE__ */ e.jsx(B, { variant: S.variant || "default", className: "text-xs", children: S.label }, y)) }) })
-  ] }) });
-}
-function Y({
-  column: s,
-  cards: f
-}) {
-  const d = f || [], { setNodeRef: u } = k({
-    id: s.id,
-    data: {
-      type: "column"
-    }
-  }), p = s.limit && d.length >= s.limit;
-  return /* @__PURE__ */ e.jsxs(
-    "div",
-    {
-      ref: u,
-      className: E(
-        "flex flex-col w-80 flex-shrink-0 rounded-lg border border-border bg-card/20 backdrop-blur-sm shadow-xl",
-        s.className
-      ),
-      children: [
-        /* @__PURE__ */ e.jsx("div", { className: "p-4 border-b border-border/50 bg-muted/20", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ e.jsx("h3", { className: "font-mono text-sm font-semibold tracking-wider text-primary/90 uppercase", children: s.title }),
-          /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ e.jsxs("span", { className: "font-mono text-xs text-muted-foreground", children: [
-              d.length,
-              s.limit && ` / ${s.limit}`
-            ] }),
-            p && /* @__PURE__ */ e.jsx(B, { variant: "destructive", className: "text-xs", children: "Full" })
-          ] })
-        ] }) }),
-        /* @__PURE__ */ e.jsx(J, { className: "flex-1 p-4", children: /* @__PURE__ */ e.jsx(
-          q,
-          {
-            items: d.map((t) => t.id),
-            strategy: z,
-            children: /* @__PURE__ */ e.jsx("div", { className: "space-y-2", children: d.map((t) => /* @__PURE__ */ e.jsx(R, { card: t }, t.id)) })
-          }
-        ) })
-      ]
-    }
-  );
-}
-function se({ columns: s, onCardMove: f, className: d }) {
-  const [u, p] = x.useState(null), t = x.useMemo(() => (s || []).map((r) => ({
-    ...r,
-    cards: r.cards || []
-  })), [s]), [n, b] = x.useState(t);
-  x.useEffect(() => {
-    b(t);
-  }, [t]);
-  const S = L(
-    P($, {
-      activationConstraint: {
-        distance: 8
-      }
-    })
-  ), y = (r) => {
-    const { active: a } = r, i = A(a.id);
-    p(i);
-  }, O = (r) => {
-    const { active: a, over: i } = r;
-    if (p(null), !i) return;
-    const c = a.id, g = i.id;
-    if (c === g) return;
-    const l = I(c), h = I(g) || K(g);
-    if (!(!l || !h))
-      if (l.id === h.id) {
-        const m = [...l.cards], v = m.findIndex((o) => o.id === c), D = m.findIndex((o) => o.id === g), w = M(m, v, D);
-        b(
-          (o) => o.map(
-            (C) => C.id === l.id ? { ...C, cards: w } : C
-          )
-        );
-      } else {
-        const m = [...l.cards], v = [...h.cards], D = m.findIndex((j) => j.id === c), o = g === h.id ? v.length : v.findIndex((j) => j.id === g), [C] = m.splice(D, 1);
-        v.splice(o, 0, C), b(
-          (j) => j.map((N) => N.id === l.id ? { ...N, cards: m } : N.id === h.id ? { ...N, cards: v } : N)
-        ), f && f(c, l.id, h.id, o);
-      }
-  }, A = x.useCallback(
-    (r) => {
-      for (const a of n) {
-        const i = a.cards.find((c) => c.id === r);
-        if (i) return i;
-      }
-      return null;
-    },
-    [n]
-  ), I = x.useCallback(
-    (r) => n.find((a) => a.cards.some((i) => i.id === r)) || null,
-    [n]
-  ), K = x.useCallback(
-    (r) => n.find((a) => a.id === r) || null,
-    [n]
-  );
-  return /* @__PURE__ */ e.jsxs(
-    T,
-    {
-      sensors: S,
-      collisionDetection: F,
-      onDragStart: y,
-      onDragEnd: O,
-      children: [
-        /* @__PURE__ */ e.jsx("div", { className: E("flex gap-4 overflow-x-auto p-4", d), children: n.map((r) => /* @__PURE__ */ e.jsx(
-          Y,
-          {
-            column: r,
-            cards: r.cards
-          },
-          r.id
-        )) }),
-        /* @__PURE__ */ e.jsx(H, { children: u ? /* @__PURE__ */ e.jsx(R, { card: u }) : null })
-      ]
-    }
-  );
-}
-export {
-  se as default
-};