@ittinc/strapi-plugin-kanban-board 0.0.1

package/admin/src/index.ts

@@ -0,0 +1,136 @@
+import { getTranslation } from './utils/getTranslation';
+import { PLUGIN_ID } from './pluginId';
+import { Initializer } from './components/Initializer';
+import { PluginIcon } from './components/PluginIcon';
+
+export default {
+  register(app: any) {
+    app.addMenuLink({
+      to: `plugins/${PLUGIN_ID}`,
+      icon: PluginIcon,
+      intlLabel: {
+        id: `${PLUGIN_ID}.plugin.name`,
+        defaultMessage: PLUGIN_ID,
+      },
+      Component: async () => {
+        const { App } = await import('./pages/App');
+
+        return App;
+      },
+    });
+
+    app.registerPlugin({
+      id: PLUGIN_ID,
+      initializer: Initializer,
+      isReady: false,
+      name: PLUGIN_ID,
+    });
+
+    app.customFields.register({
+      name: 'kanban-board',
+      pluginId: PLUGIN_ID,
+      type: 'json',
+      intlLabel: {
+        id: `${PLUGIN_ID}.kanban-board.label`,
+        defaultMessage: 'Kanban Board',
+      },
+      intlDescription: {
+        id: `${PLUGIN_ID}.kanban-board.description`,
+        defaultMessage: 'Drag and drop items between columns',
+      },
+      icon: PluginIcon,
+      components: {
+        Input: async () => import('./components/KanbanInput').then((module) => ({
+            default: module.KanbanInput
+        })),
+      },
+      options: {
+        base: [
+            {
+                sectionTitle: {
+                    id: 'kanban-plugin.section.settings',
+                    defaultMessage: 'Board Configuration',
+                },
+                items: [
+                    {
+                        intlLabel: {
+                            id: 'kanban-plugin.options.defaultColumns',
+                            defaultMessage: 'Default Columns (JSON Array)',
+                        },
+                        intlDescription: {
+                            id: 'kanban-plugin.options.defaultColumns.desc',
+                            defaultMessage: 'e.g. ["To Do", "In Progress", "Done"]',
+                        },
+                        name: 'options.defaultColumns',
+                        type: 'text',
+                        defaultValue: '[{"code": "todo", "name": "To Do"}, {"code": "in-progress", "name": "In Progress"}, {"code": "done", "name": "Done"}]',
+                    },
+                    {
+                        intlLabel: {
+                            id: 'kanban-plugin.options.itemSchema',
+                            defaultMessage: 'Item Schema (JSON Array)',
+                        },
+                        intlDescription: {
+                            id: 'kanban-plugin.options.itemSchema.desc',
+                            defaultMessage: 'Define fields: [{"name": "title", "label": "Title", "type": "text", "required": true}]',
+                        },
+                        name: 'options.itemSchema',
+                        type: 'text',
+                        defaultValue: '[{"name": "title", "label": "Title", "type": "text", "required": true}, {"name": "subtitle", "label": "Subtitle", "type": "text"}]',
+                    },
+                ],
+            },
+            {
+                sectionTitle: {
+                    id: 'kanban-plugin.section.permissions',
+                    defaultMessage: 'Permissions',
+                },
+                items: [
+                     {
+                        intlLabel: {
+                            id: 'kanban-plugin.options.canAddColumns',
+                            defaultMessage: 'Allow Adding Columns',
+                        },
+                        name: 'options.canAddColumns',
+                        type: 'checkbox',
+                        defaultValue: true,
+                    },
+                    {
+                        intlLabel: {
+                            id: 'kanban-plugin.options.canDeleteColumns',
+                            defaultMessage: 'Allow Deleting Columns',
+                        },
+                        name: 'options.canDeleteColumns',
+                        type: 'checkbox',
+                        defaultValue: true,
+                    },
+                     {
+                        intlLabel: {
+                            id: 'kanban-plugin.options.canRenameColumns',
+                            defaultMessage: 'Allow Renaming Columns',
+                        },
+                        name: 'options.canRenameColumns',
+                        type: 'checkbox',
+                        defaultValue: true,
+                    },
+                ],
+            },
+        ],
+      },
+    });
+  },
+
+  async registerTrads({ locales }: { locales: string[] }) {
+    return Promise.all(
+      locales.map(async (locale) => {
+        try {
+          const { default: data } = await import(`./translations/${locale}.json`);
+
+          return { data, locale };
+        } catch {
+          return { data: {}, locale };
+        }
+      })
+    );
+  },
+};

package/admin/src/pages/App.tsx

@@ -0,0 +1,15 @@
+import { Page } from '@strapi/strapi/admin';
+import { Routes, Route } from 'react-router-dom';
+
+import { HomePage } from './HomePage';
+
+const App = () => {
+  return (
+    <Routes>
+      <Route index element={<HomePage />} />
+      <Route path="*" element={<Page.Error />} />
+    </Routes>
+  );
+};
+
+export { App };

package/admin/src/pages/HomePage.tsx

@@ -0,0 +1,398 @@
+import React, { useState } from 'react';
+import { Main, Box, Typography, Flex, Button, TextInput } from '@strapi/design-system';
+import { Plus, Pencil, Check, Trash } from '@strapi/icons';
+import styled from 'styled-components';
+
+// --- Types ---
+interface Item {
+  id: string;
+  title: string;
+  subtitle: string;
+}
+
+interface ColumnData {
+  id: string;
+  title: string;
+  items: Item[];
+}
+
+// --- Mock Initial Data ---
+const initialData: ColumnData[] = [
+  {
+    id: 'col-1',
+    title: 'To Do',
+    items: [
+      { id: '1', title: 'Research Plugins', subtitle: 'Read Strapi v5 docs' },
+      { id: '2', title: 'Setup Environment', subtitle: 'Install dependencies' },
+    ],
+  },
+  {
+    id: 'col-2',
+    title: 'In Progress',
+    items: [
+      { id: '3', title: 'Develop Feature', subtitle: 'Implement Drag & Drop' },
+    ],
+  },
+  {
+    id: 'col-3',
+    title: 'Done',
+    items: [
+      { id: '4', title: 'Initialize Project', subtitle: 'Run CLI commands' },
+    ],
+  },
+];
+
+// --- Styled Components ---
+
+const BoardContainer = styled(Flex)`
+  gap: 16px;
+  padding: 24px;
+  height: 100%;
+  align-items: flex-start;
+  overflow-x: auto;
+`;
+
+const ColumnContainer = styled(Box)`
+  background: ${({ theme }) => theme.colors.neutral100};
+  border: 1px solid ${({ theme }) => theme.colors.neutral200};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  min-width: 300px;
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  flex-shrink: 0;
+`;
+
+const ColumnHeader = styled(Flex)`
+  padding: 16px;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
+  background: ${({ theme }) => theme.colors.neutral150};
+  border-top-left-radius: ${({ theme }) => theme.borderRadius};
+  border-top-right-radius: ${({ theme }) => theme.borderRadius};
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+`;
+
+const ItemList = styled(Box)<{ $isDraggingOver: boolean }>`
+  padding: 16px;
+  flex-grow: 1;
+  min-height: 100px;
+  background: ${({ theme, $isDraggingOver }) =>
+    $isDraggingOver ? theme.colors.primary100 : 'transparent'};
+  transition: background 0.2s;
+  overflow-y: auto;
+`;
+
+const CardItem = styled(Box)<{ $isDragging: boolean }>`
+  background: ${({ theme }) => theme.colors.neutral0};
+  border: 1px solid ${({ theme }) => theme.colors.neutral200};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  padding: 12px;
+  margin-bottom: 8px;
+  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
+  cursor: grab;
+  opacity: ${({ $isDragging }) => ($isDragging ? 0.5 : 1)};
+
+  &:hover {
+    border-color: ${({ theme }) => theme.colors.primary500};
+    box-shadow: ${({ theme }) => theme.shadows.tableShadow};
+  }
+
+  &:active {
+    cursor: grabbing;
+  }
+`;
+
+const ScrollableMain = styled(Main)`
+  height: 100vh;
+  overflow-y: hidden;
+  display: flex;
+  flex-direction: column;
+`;
+
+// --- Components ---
+
+const HomePage = () => {
+  const [columns, setColumns] = useState<ColumnData[]>(initialData);
+  const [draggedItem, setDraggedItem] = useState<{ itemId: string; sourceColId: string } | null>(null);
+  const [dragOverColId, setDragOverColId] = useState<string | null>(null);
+
+  // State for renaming columns
+  const [editingColId, setEditingColId] = useState<string | null>(null);
+  const [tempColTitle, setTempColTitle] = useState<string>('');
+
+  // State for editing items
+  const [editingItemId, setEditingItemId] = useState<string | null>(null);
+  const [tempItemTitle, setTempItemTitle] = useState<string>('');
+  const [tempItemSubtitle, setTempItemSubtitle] = useState<string>('');
+
+  const handleDragStart = (e: React.DragEvent, itemId: string, sourceColId: string) => {
+    setDraggedItem({ itemId, sourceColId });
+    e.dataTransfer.effectAllowed = 'move';
+  };
+
+  const handleDragOver = (e: React.DragEvent, colId: string) => {
+    e.preventDefault();
+    setDragOverColId(colId);
+  };
+
+  const handleDragLeave = () => {
+    setDragOverColId(null);
+  };
+
+  const handleDrop = (e: React.DragEvent, targetColId: string) => {
+    e.preventDefault();
+    setDragOverColId(null);
+
+    if (!draggedItem) return;
+    const { itemId, sourceColId } = draggedItem;
+
+    if (sourceColId === targetColId) {
+      setDraggedItem(null);
+      return;
+    }
+
+    const newColumns = columns.map((col) => {
+      // Remove from source
+      if (col.id === sourceColId) {
+        return {
+          ...col,
+          items: col.items.filter((item) => item.id !== itemId),
+        };
+      }
+      // Add to target
+      if (col.id === targetColId) {
+        const itemToMove = columns
+          .find((c) => c.id === sourceColId)
+          ?.items.find((i) => i.id === itemId);
+
+        if (itemToMove) {
+          return {
+            ...col,
+            items: [...col.items, itemToMove],
+          };
+        }
+      }
+      return col;
+    });
+
+    setColumns(newColumns);
+    setDraggedItem(null);
+  };
+
+  // --- Column Management ---
+
+  const handleAddColumn = () => {
+    const newCol: ColumnData = {
+      id: `col-${Date.now()}`,
+      title: 'New Column',
+      items: [],
+    };
+    setColumns([...columns, newCol]);
+  };
+
+  const handleStartRename = (col: ColumnData) => {
+    setEditingColId(col.id);
+    setTempColTitle(col.title);
+  };
+
+  const handleSaveRename = (colId: string) => {
+    if (!tempColTitle.trim()) return;
+
+    setColumns(columns.map(col =>
+      col.id === colId ? { ...col, title: tempColTitle } : col
+    ));
+    setEditingColId(null);
+  };
+
+  const handleDeleteColumn = (colId: string) => {
+    // eslint-disable-next-line no-restricted-globals
+    if (confirm('Are you sure you want to delete this column?')) {
+        setColumns(columns.filter(col => col.id !== colId));
+    }
+  };
+
+  // --- Item Management ---
+
+  const handleStartEditItem = (item: Item) => {
+    setEditingItemId(item.id);
+    setTempItemTitle(item.title);
+    setTempItemSubtitle(item.subtitle);
+  };
+
+  const handleSaveEditItem = (colId: string, itemId: string) => {
+    if (!tempItemTitle.trim()) return;
+
+    setColumns(columns.map(col => {
+      if (col.id === colId) {
+        return {
+          ...col,
+          items: col.items.map(item =>
+            item.id === itemId
+              ? { ...item, title: tempItemTitle, subtitle: tempItemSubtitle }
+              : item
+          ),
+        };
+      }
+      return col;
+    }));
+    setEditingItemId(null);
+  };
+
+  const handleDeleteItem = (colId: string, itemId: string) => {
+    // eslint-disable-next-line no-restricted-globals
+    if (confirm('Are you sure you want to delete this item?')) {
+      setColumns(columns.map(col => {
+        if (col.id === colId) {
+          return {
+            ...col,
+            items: col.items.filter(item => item.id !== itemId)
+          };
+        }
+        return col;
+      }));
+    }
+  };
+
+  return (
+    <>
+        <ScrollableMain>
+        <Box padding={8} background="neutral100">
+            <Flex justifyContent="space-between" alignItems="center">
+                <Box>
+                    <Typography variant="alpha">Kanban Board</Typography>
+                    <Typography variant="epsilon" textColor="neutral600" as="div">
+                    Manage your project tasks visually
+                    </Typography>
+                </Box>
+                <Button startIcon={<Plus />} onClick={handleAddColumn}>
+                    Add Column
+                </Button>
+            </Flex>
+        </Box>
+
+        <BoardContainer>
+            {columns.map((col) => (
+            <ColumnContainer key={col.id}>
+                <ColumnHeader>
+                {editingColId === col.id ? (
+                    <Flex gap={2} style={{ flexGrow: 1 }}>
+                        <TextInput
+                            aria-label="Column title"
+                            value={tempColTitle}
+                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTempColTitle(e.target.value)}
+                            size="S"
+                        />
+                        <Button
+                            onClick={() => handleSaveRename(col.id)}
+                            size="S"
+                            startIcon={<Check />}
+                        >
+                            Save
+                        </Button>
+                    </Flex>
+                ) : (
+                    <>
+                        <Box>
+                            <Typography variant="delta" fontWeight="bold">
+                                {col.title}
+                            </Typography>
+                            <Typography variant="pi" textColor="neutral600" style={{ marginLeft: '8px' }}>
+                                ({col.items.length})
+                            </Typography>
+                        </Box>
+                        <Flex gap={1}>
+                            <Button
+                                onClick={() => handleStartRename(col)}
+                                variant="ghost"
+                                size="S"
+                                startIcon={<Pencil />}
+                            />
+                            <Button
+                                onClick={() => handleDeleteColumn(col.id)}
+                                variant="ghost"
+                                size="S"
+                                startIcon={<Trash />}
+                            />
+                        </Flex>
+                    </>
+                )}
+                </ColumnHeader>
+
+                <ItemList
+                $isDraggingOver={dragOverColId === col.id}
+                onDragOver={(e: React.DragEvent) => handleDragOver(e, col.id)}
+                onDragLeave={handleDragLeave}
+                onDrop={(e: React.DragEvent) => handleDrop(e, col.id)}
+                >
+                {col.items.map((item) => (
+                    <CardItem
+                    key={item.id}
+                    draggable={editingItemId !== item.id}
+                    onDragStart={(e: React.DragEvent) => handleDragStart(e, item.id, col.id)}
+                    $isDragging={draggedItem?.itemId === item.id}
+                    >
+                    {editingItemId === item.id ? (
+                        <Flex direction="column" gap={2}>
+                            <TextInput
+                                aria-label="Item title"
+                                value={tempItemTitle}
+                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTempItemTitle(e.target.value)}
+                                size="S"
+                            />
+                            <TextInput
+                                aria-label="Item subtitle"
+                                value={tempItemSubtitle}
+                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTempItemSubtitle(e.target.value)}
+                                size="S"
+                            />
+                            <Flex gap={2} justifyContent="flex-end" style={{ width: '100%' }}>
+                                <Button
+                                    onClick={() => handleSaveEditItem(col.id, item.id)}
+                                    size="S"
+                                    startIcon={<Check />}
+                                >
+                                    Save
+                                </Button>
+                            </Flex>
+                        </Flex>
+                    ) : (
+                        <Flex justifyContent="space-between" alignItems="start">
+                            <Box>
+                                <Typography variant="omega" fontWeight="bold" as="div" marginBottom={1}>
+                                    {item.title}
+                                </Typography>
+                                <Typography variant="pi" textColor="neutral600" as="div">
+                                    {item.subtitle}
+                                </Typography>
+                            </Box>
+                            <Flex gap={1} style={{ opacity: 0.5 }}>
+                                <Button
+                                    onClick={() => handleStartEditItem(item)}
+                                    variant="ghost"
+                                    size="S"
+                                    startIcon={<Pencil />}
+                                />
+                                <Button
+                                    onClick={() => handleDeleteItem(col.id, item.id)}
+                                    variant="ghost"
+                                    size="S"
+                                    startIcon={<Trash />}
+                                />
+                            </Flex>
+                        </Flex>
+                    )}
+                    </CardItem>
+                ))}
+                </ItemList>
+            </ColumnContainer>
+            ))}
+        </BoardContainer>
+        </ScrollableMain>
+    </>
+  );
+};
+
+export { HomePage };

package/admin/src/pluginId.ts

@@ -0,0 +1 @@
+export const PLUGIN_ID = 'kanban-board';

package/admin/src/translations/en.json

@@ -0,0 +1,5 @@
+{
+  "kanban-plugin.kanban-board.label": "Kanban Board",
+  "kanban-plugin.kanban-board.description": "Drag and drop items between columns",
+  "kanban-plugin.plugin.name": "Kanban Board"
+}

package/admin/src/translations/ru.json

@@ -0,0 +1,5 @@
+{
+  "kanban-plugin.kanban-board.label": "Канбан-доска",
+  "kanban-plugin.kanban-board.description": "Перетаскивайте карточки между колонками",
+  "kanban-plugin.plugin.name": "Канбан-доска"
+}

package/admin/src/utils/getTranslation.ts

@@ -0,0 +1,5 @@
+import { PLUGIN_ID } from '../pluginId';
+
+const getTranslation = (id: string) => `${PLUGIN_ID}.${id}`;
+
+export { getTranslation };

package/admin/tsconfig.build.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig",
+  "include": ["./src", "./custom.d.ts"],
+  "exclude": ["**/*.test.ts", "**/*.test.tsx"],
+  "compilerOptions": {
+    "rootDir": "../",
+    "baseUrl": ".",
+    "outDir": "./dist"
+  }
+}

package/admin/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@strapi/typescript-utils/tsconfigs/admin",
+  "include": ["./src", "./custom.d.ts"],
+  "compilerOptions": {
+    "rootDir": "../",
+    "baseUrl": "."
+  }
+}