@ittinc/strapi-plugin-kanban-board 0.0.1

package/dist/_chunks/index-9nQMm6ez.js

@@ -0,0 +1,465 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const designSystem = require("@strapi/design-system");
+const icons = require("@strapi/icons");
+const styled = require("styled-components");
+const reactIntl = require("react-intl");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const DEFAULT_ITEM_SCHEMA = [
+  { name: "title", label: "Title", type: "text", required: true },
+  { name: "subtitle", label: "Subtitle", type: "text" }
+];
+const DEFAULT_COLUMNS = ["To Do", "In Progress", "Done"];
+const BoardContainer = styled__default.default(designSystem.Flex)`
+  gap: 16px;
+  padding: 16px;
+  align-items: flex-start;
+  overflow-x: auto;
+  border: 1px solid ${({ theme }) => theme.colors.neutral200};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  background: ${({ theme }) => theme.colors.neutral100};
+`;
+const ColumnContainer = styled__default.default(designSystem.Box)`
+  background: ${({ theme }) => theme.colors.neutral0};
+  border: 1px solid ${({ theme }) => theme.colors.neutral200};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  min-width: 280px;
+  width: 280px;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+`;
+const ColumnHeader = styled__default.default(designSystem.Box)`
+  padding: 12px;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
+  background: ${({ theme }) => theme.colors.neutral100};
+  border-top-left-radius: ${({ theme }) => theme.borderRadius};
+  border-top-right-radius: ${({ theme }) => theme.borderRadius};
+`;
+const ItemList = styled__default.default(designSystem.Box)`
+  padding: 12px;
+  flex-grow: 1;
+  min-height: 80px;
+  background: ${({ theme, $isDraggingOver }) => $isDraggingOver ? theme.colors.primary100 : "transparent"};
+  transition: background 0.2s;
+`;
+const CardItem = styled__default.default(designSystem.Box)`
+  background: ${({ theme }) => theme.colors.neutral0};
+  border: 1px solid ${({ theme }) => theme.colors.neutral200};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  padding: 8px;
+  margin-bottom: 8px;
+  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
+  cursor: grab;
+  opacity: ${({ $isDragging }) => $isDragging ? 0.5 : 1};
+
+  &:hover {
+    border-color: ${({ theme }) => theme.colors.primary500};
+  }
+`;
+const AddItemButton = styled__default.default.button`
+  background: none;
+  border: none;
+  color: ${({ theme }) => theme.colors.primary600};
+  cursor: pointer;
+  padding: 8px;
+  width: 100%;
+  text-align: left;
+  border-top: 1px solid ${({ theme }) => theme.colors.neutral150};
+
+  &:hover {
+    text-decoration: underline;
+    background: ${({ theme }) => theme.colors.neutral100};
+  }
+`;
+const KanbanInput = ({ name, value, onChange, intlLabel, attribute }) => {
+  const { formatMessage } = reactIntl.useIntl();
+  const [columns, setColumns] = react.useState([]);
+  const [draggedItem, setDraggedItem] = react.useState(null);
+  const [dragOverColId, setDragOverColId] = react.useState(null);
+  const options = attribute?.options || {};
+  const canAddColumns = options.canAddColumns !== false;
+  const canDeleteColumns = options.canDeleteColumns !== false;
+  const canRenameColumns = options.canRenameColumns !== false;
+  const itemSchema = react.useMemo(() => {
+    let schema = options.itemSchema;
+    if (!schema) return DEFAULT_ITEM_SCHEMA;
+    if (typeof schema === "string") {
+      try {
+        schema = JSON.parse(schema);
+      } catch (e) {
+        console.error("KanbanBoard: Invalid Item Schema JSON string", e);
+        return DEFAULT_ITEM_SCHEMA;
+      }
+    }
+    return Array.isArray(schema) ? schema : DEFAULT_ITEM_SCHEMA;
+  }, [options.itemSchema]);
+  const defaultColumnsList = react.useMemo(() => {
+    let cols = options.defaultColumns;
+    if (!cols) return DEFAULT_COLUMNS;
+    if (typeof cols === "string") {
+      try {
+        cols = JSON.parse(cols);
+      } catch (e) {
+        console.error("KanbanBoard: Invalid Default Columns JSON string", e);
+        return DEFAULT_COLUMNS;
+      }
+    }
+    return Array.isArray(cols) ? cols : DEFAULT_COLUMNS;
+  }, [options.defaultColumns]);
+  const [isModalOpen, setIsModalOpen] = react.useState(false);
+  const [activeColId, setActiveColId] = react.useState(null);
+  const [newItemData, setNewItemData] = react.useState({});
+  const [editingItemId, setEditingItemId] = react.useState(null);
+  const [isColumnModalOpen, setIsColumnModalOpen] = react.useState(false);
+  const [columnFormData, setColumnFormData] = react.useState({ id: "", title: "", code: "" });
+  const [editingColumnId, setEditingColumnId] = react.useState(null);
+  react.useEffect(() => {
+    if (value) {
+      try {
+        const parsed = typeof value === "string" ? JSON.parse(value) : value;
+        if (Array.isArray(parsed) && parsed.length > 0) {
+          setColumns(parsed);
+          return;
+        }
+      } catch (e) {
+        console.error("Failed to parse Kanban data", e);
+      }
+    }
+    if (Array.isArray(defaultColumnsList)) {
+      const initCols = defaultColumnsList.map((col, index) => {
+        if (typeof col === "object" && col !== null && col.title) {
+          return {
+            id: col.id || `col-${index}-${Date.now()}`,
+            title: col.title,
+            code: col.code || "",
+            items: []
+          };
+        }
+        return {
+          id: `col-${index}-${Date.now()}`,
+          title: String(col),
+          items: []
+        };
+      });
+      setColumns(initCols);
+    }
+  }, [value, defaultColumnsList]);
+  const updateState = (newCols) => {
+    setColumns(newCols);
+    onChange({
+      target: {
+        name,
+        value: newCols,
+        type: "json"
+      }
+    });
+  };
+  const handleDragStart = (e, itemId, sourceColId) => {
+    e.stopPropagation();
+    setDraggedItem({ itemId, sourceColId });
+    e.dataTransfer.effectAllowed = "move";
+  };
+  const handleDragOver = (e, colId) => {
+    e.preventDefault();
+    e.stopPropagation();
+    e.dataTransfer.dropEffect = "move";
+    setDragOverColId(colId);
+  };
+  const handleDrop = (e, targetColId, targetItemId) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOverColId(null);
+    if (!draggedItem) return;
+    const { itemId: sourceItemId, sourceColId } = draggedItem;
+    const newColumns = JSON.parse(JSON.stringify(columns));
+    const sourceCol = newColumns.find((c) => c.id === sourceColId);
+    const targetCol = newColumns.find((c) => c.id === targetColId);
+    if (!sourceCol || !targetCol) return;
+    const itemIndex = sourceCol.items.findIndex((i) => i.id === sourceItemId);
+    if (itemIndex === -1) return;
+    const [itemToMove] = sourceCol.items.splice(itemIndex, 1);
+    if (!targetItemId) {
+      targetCol.items.push(itemToMove);
+    } else {
+      const targetItemIndex = targetCol.items.findIndex((i) => i.id === targetItemId);
+      if (targetItemIndex !== -1) {
+        targetCol.items.splice(targetItemIndex, 0, itemToMove);
+      } else {
+        targetCol.items.push(itemToMove);
+      }
+    }
+    updateState(newColumns);
+    setDraggedItem(null);
+  };
+  const handleOpenAddItem = (colId) => {
+    setActiveColId(colId);
+    setEditingItemId(null);
+    setNewItemData({});
+    setIsModalOpen(true);
+  };
+  const handleOpenEditItem = (colId, item) => {
+    setActiveColId(colId);
+    setEditingItemId(item.id);
+    setNewItemData({ ...item });
+    setIsModalOpen(true);
+  };
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+    setActiveColId(null);
+    setEditingItemId(null);
+  };
+  const handleConfirmItemForm = () => {
+    if (!activeColId) return;
+    for (const field of itemSchema) {
+      if (field.required && !newItemData[field.name]) {
+        alert(`${field.label || field.name} is required`);
+        return;
+      }
+    }
+    if (editingItemId) {
+      const newColumns = columns.map((col) => {
+        if (col.id === activeColId) {
+          return {
+            ...col,
+            items: col.items.map(
+              (item) => item.id === editingItemId ? { ...newItemData, id: editingItemId } : item
+            )
+          };
+        }
+        return col;
+      });
+      updateState(newColumns);
+    } else {
+      const newItem = {
+        id: Date.now().toString(),
+        ...newItemData
+      };
+      const newColumns = columns.map((col) => {
+        if (col.id === activeColId) {
+          return { ...col, items: [...col.items, newItem] };
+        }
+        return col;
+      });
+      updateState(newColumns);
+    }
+    handleCloseModal();
+  };
+  const handleDeleteItem = (colId, itemId) => {
+    if (confirm("Are you sure you want to delete this item?")) {
+      const newColumns = columns.map((col) => {
+        if (col.id === colId) {
+          return {
+            ...col,
+            items: col.items.filter((item) => item.id !== itemId)
+          };
+        }
+        return col;
+      });
+      updateState(newColumns);
+    }
+  };
+  const handleOpenAddColumn = () => {
+    if (!canAddColumns) return;
+    setEditingColumnId(null);
+    setColumnFormData({ id: "", title: "", code: "" });
+    setIsColumnModalOpen(true);
+  };
+  const handleOpenEditColumn = (col) => {
+    if (!canRenameColumns) return;
+    setEditingColumnId(col.id);
+    setColumnFormData({ id: col.id, title: col.title, code: col.code || "" });
+    setIsColumnModalOpen(true);
+  };
+  const handleCloseColumnModal = () => {
+    setIsColumnModalOpen(false);
+    setColumnFormData({ id: "", title: "", code: "" });
+    setEditingColumnId(null);
+  };
+  const handleConfirmColumnForm = () => {
+    if (!columnFormData.title) {
+      alert("Column Title is required");
+      return;
+    }
+    if (editingColumnId) {
+      const newColumns = columns.map(
+        (col) => col.id === editingColumnId ? { ...col, title: columnFormData.title, code: columnFormData.code } : col
+      );
+      updateState(newColumns);
+    } else {
+      const newCol = {
+        id: `col-${Date.now()}`,
+        title: columnFormData.title,
+        code: columnFormData.code,
+        items: []
+      };
+      updateState([...columns, newCol]);
+    }
+    handleCloseColumnModal();
+  };
+  const handleDeleteColumn = (colId) => {
+    if (!canDeleteColumns) return;
+    if (confirm("Are you sure you want to delete this column? All items in it will be lost.")) {
+      const newColumns = columns.filter((col) => col.id !== colId);
+      updateState(newColumns);
+    }
+  };
+  let labelText = name;
+  if (intlLabel) {
+    if (typeof intlLabel === "string") labelText = intlLabel;
+    else if (intlLabel.id) {
+      try {
+        labelText = formatMessage(intlLabel);
+      } catch (e) {
+        labelText = intlLabel.defaultMessage || name;
+      }
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", paddingBottom: 2, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", children: labelText }),
+      canAddColumns && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}), onClick: handleOpenAddColumn, size: "S", variant: "secondary", children: "Add Column" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(BoardContainer, { children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsxs(ColumnContainer, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ColumnHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "flex-start", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", fontWeight: "bold", children: [
+            col.title,
+            " (",
+            col.items.length,
+            ")"
+          ] }),
+          col.code && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "sigma", textColor: "neutral600", children: [
+            "Code: ",
+            col.code
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 1, children: [
+          canRenameColumns && /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Button,
+            {
+              onClick: () => handleOpenEditColumn(col),
+              variant: "ghost",
+              size: "S",
+              startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Pencil, {})
+            }
+          ),
+          canDeleteColumns && /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Button,
+            {
+              onClick: () => handleDeleteColumn(col.id),
+              variant: "ghost",
+              size: "S",
+              startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {})
+            }
+          )
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ItemList,
+        {
+          $isDraggingOver: dragOverColId === col.id,
+          onDragOver: (e) => handleDragOver(e, col.id),
+          onDragLeave: () => setDragOverColId(null),
+          onDrop: (e) => handleDrop(e, col.id),
+          children: col.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+            CardItem,
+            {
+              draggable: true,
+              onDragStart: (e) => handleDragStart(e, item.id, col.id),
+              onDragOver: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                e.dataTransfer.dropEffect = "move";
+              },
+              onDrop: (e) => handleDrop(e, col.id, item.id),
+              $isDragging: draggedItem?.itemId === item.id,
+              children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "start", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { flexGrow: 1, children: itemSchema.map((field, idx) => {
+                  const val = item[field.name];
+                  if (!val) return null;
+                  if (idx === 0) {
+                    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "bold", as: "div", children: val }, field.name);
+                  }
+                  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", as: "div", children: val }, field.name);
+                }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 1, style: { opacity: 0.5 }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    designSystem.Button,
+                    {
+                      onClick: () => handleOpenEditItem(col.id, item),
+                      variant: "ghost",
+                      size: "S",
+                      startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Pencil, {})
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    designSystem.Button,
+                    {
+                      onClick: () => handleDeleteItem(col.id, item.id),
+                      variant: "ghost",
+                      size: "S",
+                      startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {})
+                    }
+                  )
+                ] })
+              ] })
+            },
+            item.id
+          ))
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(AddItemButton, { type: "button", onClick: () => handleOpenAddItem(col.id), children: "+ Add Item" })
+    ] }, col.id)) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Root, { open: isModalOpen, onOpenChange: setIsModalOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Content, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: editingItemId ? "Edit Item" : "Add New Item" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", gap: 4, children: itemSchema.map((field) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { width: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.TextInput,
+        {
+          label: field.label || field.name,
+          placeholder: `Enter ${field.label || field.name}`,
+          value: newItemData[field.name] || "",
+          onChange: (e) => setNewItemData({ ...newItemData, [field.name]: e.target.value }),
+          required: field.required
+        }
+      ) }, field.name)) }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Footer, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Close, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", onClick: handleCloseModal, children: "Cancel" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: handleConfirmItemForm, children: editingItemId ? "Save" : "Add" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Root, { open: isColumnModalOpen, onOpenChange: setIsColumnModalOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Content, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: editingColumnId ? "Edit Column" : "Add New Column" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 4, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.TextInput,
+          {
+            label: "Column Title",
+            placeholder: "Enter column title",
+            value: columnFormData.title,
+            onChange: (e) => setColumnFormData({ ...columnFormData, title: e.target.value }),
+            required: true
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.TextInput,
+          {
+            label: "Column Code",
+            placeholder: "Enter column code (optional)",
+            hint: "A unique code for frontend logic (e.g. 'todo', 'done')",
+            value: columnFormData.code,
+            onChange: (e) => setColumnFormData({ ...columnFormData, code: e.target.value })
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Footer, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Close, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", onClick: handleCloseColumnModal, children: "Cancel" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: handleConfirmColumnForm, children: editingColumnId ? "Save" : "Add" })
+      ] })
+    ] }) })
+  ] }) });
+};
+exports.KanbanInput = KanbanInput;