@ittinc/strapi-plugin-kanban-board 0.0.1

package/admin/src/components/KanbanInput/index.tsx

@@ -0,0 +1,605 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { Box, Typography, Flex, Button, TextInput, Modal } from '@strapi/design-system';
+import { Plus, Pencil, Check, Trash } from '@strapi/icons';
+import styled from 'styled-components';
+import { useIntl } from 'react-intl';
+
+// --- Types ---
+interface Item extends Record<string, any> {
+  id: string;
+}
+
+interface ColumnData {
+  id: string;
+  title: string;
+  code?: string;
+  items: Item[];
+}
+
+interface KanbanInputProps {
+  name: string;
+  value?: string | ColumnData[];
+  onChange: (event: { target: { name: string; value: string | ColumnData[]; type?: string } }) => void;
+  attribute: {
+      options?: {
+          defaultColumns?: string | string[];
+          itemSchema?: string | any[];
+          canAddColumns?: boolean;
+          canDeleteColumns?: boolean;
+          canRenameColumns?: boolean;
+      };
+      [key: string]: any;
+  };
+  intlLabel: any;
+}
+
+// --- Default Schemas ---
+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"];
+
+// --- Styled Components ---
+
+const BoardContainer = styled(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(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(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(Box)<{ $isDraggingOver: boolean }>`
+  padding: 12px;
+  flex-grow: 1;
+  min-height: 80px;
+  background: ${({ theme, $isDraggingOver }) =>
+    $isDraggingOver ? theme.colors.primary100 : 'transparent'};
+  transition: background 0.2s;
+`;
+
+const CardItem = styled(Box)<{ $isDragging: boolean }>`
+  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.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};
+  }
+`;
+
+// --- Component ---
+
+export const KanbanInput = ({ name, value, onChange, intlLabel, attribute }: KanbanInputProps) => {
+  const { formatMessage } = useIntl();
+  const [columns, setColumns] = useState<ColumnData[]>([]);
+  const [draggedItem, setDraggedItem] = useState<{ itemId: string; sourceColId: string } | null>(null);
+  const [dragOverColId, setDragOverColId] = useState<string | null>(null);
+
+  // --- Configuration ---
+  const options = attribute?.options || {};
+
+  const canAddColumns = options.canAddColumns !== false;
+  const canDeleteColumns = options.canDeleteColumns !== false;
+  const canRenameColumns = options.canRenameColumns !== false;
+
+  const itemSchema = 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 = 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]);
+
+  // State for Adding/Editing Items (Modal)
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [activeColId, setActiveColId] = useState<string | null>(null);
+  const [newItemData, setNewItemData] = useState<Record<string, any>>({});
+  const [editingItemId, setEditingItemId] = useState<string | null>(null);
+
+  // State for Adding/Editing Columns (Modal)
+  const [isColumnModalOpen, setIsColumnModalOpen] = useState(false);
+  const [columnFormData, setColumnFormData] = useState({ id: '', title: '', code: '' });
+  const [editingColumnId, setEditingColumnId] = useState<string | null>(null);
+
+  // Parse initial value or set defaults
+  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);
+      }
+    }
+
+    // Initialize defaults if value is empty/invalid
+    if (Array.isArray(defaultColumnsList)) {
+        const initCols = defaultColumnsList.map((col: string | { id?: string; title: string; code?: string }, index: number) => {
+            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]);
+
+  // Update parent on change
+  const updateState = (newCols: ColumnData[]) => {
+    setColumns(newCols);
+    onChange({
+      target: {
+        name,
+        value: newCols,
+        type: 'json',
+      },
+    });
+  };
+
+  const handleDragStart = (e: React.DragEvent, itemId: string, sourceColId: string) => {
+    e.stopPropagation();
+    setDraggedItem({ itemId, sourceColId });
+    e.dataTransfer.effectAllowed = 'move';
+  };
+
+  const handleDragOver = (e: React.DragEvent, colId: string) => {
+    e.preventDefault();
+    e.stopPropagation();
+    e.dataTransfer.dropEffect = 'move';
+    setDragOverColId(colId);
+  };
+
+  const handleDrop = (e: React.DragEvent, targetColId: string, targetItemId?: string) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOverColId(null);
+
+    if (!draggedItem) return;
+    const { itemId: sourceItemId, sourceColId } = draggedItem;
+
+    const newColumns: ColumnData[] = 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: string) => {
+      setActiveColId(colId);
+      setEditingItemId(null);
+      setNewItemData({}); // Reset form
+      setIsModalOpen(true);
+  };
+
+  const handleOpenEditItem = (colId: string, item: Item) => {
+      setActiveColId(colId);
+      setEditingItemId(item.id);
+      setNewItemData({ ...item });
+      setIsModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+      setIsModalOpen(false);
+      setActiveColId(null);
+      setEditingItemId(null);
+  };
+
+  const handleConfirmItemForm = () => {
+      if (!activeColId) return;
+
+      // Basic Validation (Check required fields)
+      for (const field of itemSchema) {
+          if (field.required && !newItemData[field.name]) {
+              alert(`${field.label || field.name} is required`);
+              return;
+          }
+      }
+
+      if (editingItemId) {
+          // Edit existing item
+          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 {
+          // Add new item
+          const newItem: Item = {
+              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: string, itemId: string) => {
+      // eslint-disable-next-line no-restricted-globals
+      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);
+      }
+  };
+
+
+  // --- Column Management ---
+
+  const handleOpenAddColumn = () => {
+      if (!canAddColumns) return;
+      setEditingColumnId(null);
+      setColumnFormData({ id: '', title: '', code: '' });
+      setIsColumnModalOpen(true);
+  };
+
+  const handleOpenEditColumn = (col: ColumnData) => {
+      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) {
+          // Edit existing
+          const newColumns = columns.map(col =>
+             col.id === editingColumnId ? { ...col, title: columnFormData.title, code: columnFormData.code } : col
+          );
+          updateState(newColumns);
+      } else {
+          // Add new
+          const newCol: ColumnData = {
+              id: `col-${Date.now()}`,
+              title: columnFormData.title,
+              code: columnFormData.code,
+              items: [],
+          };
+          updateState([...columns, newCol]);
+      }
+
+      handleCloseColumnModal();
+  };
+
+  const handleDeleteColumn = (colId: string) => {
+    if (!canDeleteColumns) return;
+    // eslint-disable-next-line no-restricted-globals
+    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);
+    }
+  };
+
+  // Label resolving
+  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 (
+    <>
+      <Box>
+        <Flex justifyContent="space-between" alignItems="center" paddingBottom={2}>
+            <Typography variant="pi" fontWeight="bold">
+            {labelText}
+            </Typography>
+            {canAddColumns && (
+                <Button startIcon={<Plus />} onClick={handleOpenAddColumn} size="S" variant="secondary">
+                    Add Column
+                </Button>
+            )}
+        </Flex>
+
+        <BoardContainer>
+          {columns.map((col) => (
+            <ColumnContainer key={col.id}>
+              <ColumnHeader>
+                <Flex justifyContent="space-between" alignItems="center">
+                    <Flex direction="column" alignItems="flex-start">
+                            <Typography variant="pi" fontWeight="bold">
+                            {col.title} ({col.items.length})
+                        </Typography>
+                        {col.code && (
+                            <Typography variant="sigma" textColor="neutral600">
+                                Code: {col.code}
+                            </Typography>
+                        )}
+                    </Flex>
+                    <Flex gap={1}>
+                        {canRenameColumns && (
+                            <Button
+                                onClick={() => handleOpenEditColumn(col)}
+                                variant="ghost"
+                                size="S"
+                                startIcon={<Pencil />}
+                            />
+                        )}
+                        {canDeleteColumns && (
+                            <Button
+                                onClick={() => handleDeleteColumn(col.id)}
+                                variant="ghost"
+                                size="S"
+                                startIcon={<Trash />}
+                            />
+                        )}
+                    </Flex>
+                </Flex>
+              </ColumnHeader>
+
+              <ItemList
+                $isDraggingOver={dragOverColId === col.id}
+                onDragOver={(e: React.DragEvent) => handleDragOver(e, col.id)}
+                onDragLeave={() => setDragOverColId(null)}
+                onDrop={(e: React.DragEvent) => handleDrop(e, col.id)}
+              >
+                {col.items.map((item) => (
+                  <CardItem
+                    key={item.id}
+                    draggable
+                    onDragStart={(e: React.DragEvent) => handleDragStart(e, item.id, col.id)}
+                    onDragOver={(e: React.DragEvent) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        e.dataTransfer.dropEffect = 'move';
+                    }}
+                    onDrop={(e: React.DragEvent) => handleDrop(e, col.id, item.id)}
+                    $isDragging={draggedItem?.itemId === item.id}
+                  >
+                    <Flex justifyContent="space-between" alignItems="start">
+                        <Box flexGrow={1}>
+                            {/* Render Fields based on Schema */}
+                            {itemSchema.map((field: any, idx: number) => {
+                                const val = item[field.name];
+                                if (!val) return null;
+
+                                if (idx === 0) {
+                                    return (
+                                        <Typography key={field.name} variant="omega" fontWeight="bold" as="div">
+                                            {val}
+                                        </Typography>
+                                    );
+                                }
+                                return (
+                                    <Typography key={field.name} variant="pi" textColor="neutral600" as="div">
+                                        {val}
+                                    </Typography>
+                                );
+                            })}
+                        </Box>
+                        <Flex gap={1} style={{ opacity: 0.5 }}>
+                            <Button
+                                onClick={() => handleOpenEditItem(col.id, item)}
+                                variant="ghost"
+                                size="S"
+                                startIcon={<Pencil />}
+                            />
+                            <Button
+                                onClick={() => handleDeleteItem(col.id, item.id)}
+                                variant="ghost"
+                                size="S"
+                                startIcon={<Trash />}
+                            />
+                        </Flex>
+                    </Flex>
+                  </CardItem>
+                ))}
+              </ItemList>
+              <AddItemButton type="button" onClick={() => handleOpenAddItem(col.id)}>
+                + Add Item
+              </AddItemButton>
+            </ColumnContainer>
+          ))}
+        </BoardContainer>
+
+        {/* Add Item Modal */}
+        <Modal.Root open={isModalOpen} onOpenChange={setIsModalOpen}>
+            <Modal.Content>
+                <Modal.Header>
+                    <Modal.Title>{editingItemId ? 'Edit Item' : 'Add New Item'}</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                    <Flex direction="column" gap={4}>
+                        {itemSchema.map((field: any) => (
+                            <Box key={field.name} width="100%">
+                                <TextInput 
+                                    label={field.label || field.name}
+                                    placeholder={`Enter ${field.label || field.name}`}
+                                    value={newItemData[field.name] || ''}
+                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => 
+                                        setNewItemData({...newItemData, [field.name]: e.target.value})
+                                    }
+                                    required={field.required}
+                                />
+                            </Box>
+                        ))}
+                    </Flex>
+                </Modal.Body>
+                <Modal.Footer>
+                     <Modal.Close>
+                        <Button variant="tertiary" onClick={handleCloseModal}>Cancel</Button>
+                     </Modal.Close>
+                     <Button onClick={handleConfirmItemForm}>{editingItemId ? 'Save' : 'Add'}</Button>
+                </Modal.Footer>
+            </Modal.Content>
+        </Modal.Root>
+
+        {/* Add/Edit Column Modal */}
+        <Modal.Root open={isColumnModalOpen} onOpenChange={setIsColumnModalOpen}>
+            <Modal.Content>
+                <Modal.Header>
+                    <Modal.Title>{editingColumnId ? 'Edit Column' : 'Add New Column'}</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                    <Flex direction="column" gap={4}>
+                        <TextInput
+                            label="Column Title"
+                            placeholder="Enter column title"
+                            value={columnFormData.title}
+                            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                                setColumnFormData({...columnFormData, title: e.target.value})
+                            }
+                            required
+                        />
+                        <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: React.ChangeEvent<HTMLInputElement>) =>
+                                setColumnFormData({...columnFormData, code: e.target.value})
+                            }
+                        />
+                    </Flex>
+                </Modal.Body>
+                <Modal.Footer>
+                     <Modal.Close>
+                        <Button variant="tertiary" onClick={handleCloseColumnModal}>Cancel</Button>
+                     </Modal.Close>
+                     <Button onClick={handleConfirmColumnForm}>{editingColumnId ? 'Save' : 'Add'}</Button>
+                </Modal.Footer>
+            </Modal.Content>
+        </Modal.Root>
+      </Box>
+    </>
+  );
+};

package/admin/src/components/PluginIcon.tsx

@@ -0,0 +1,5 @@
+import { PuzzlePiece } from '@strapi/icons';
+
+const PluginIcon = () => <PuzzlePiece />;
+
+export { PluginIcon };