Introducing Kanban Preview

Author: FalkWolsky

client/packages/lowcoder-design/src/icons/index.ts

@@ -336,6 +336,7 @@ export { ReactComponent as VideoCameraStreamCompIconSmall } from "./v2/camera-st
 export { ReactComponent as VideoScreenshareCompIconSmall } from "./v2/screen-share-stream-s.svg"; // new
 export { ReactComponent as SignatureCompIconSmall } from "./v2/signature-s.svg";
 export { ReactComponent as StepCompIconSmall } from "./v2/steps-s.svg"; 
+export { ReactComponent as KanbanCompIconSmall } from "./v2/kanban-s.svg"; // new
 
 export { ReactComponent as CandlestickChartCompIconSmall } from "./v2/candlestick-chart-s.svg"; // new
 export { ReactComponent as FunnelChartCompIconSmall } from "./v2/funnel-chart-s.svg"; // new
@@ -441,6 +442,7 @@ export { ReactComponent as VideoScreenshareCompIcon } from "./v2/screen-share-st
 export { ReactComponent as StepCompIcon } from "./v2/steps-m.svg";
 export { ReactComponent as SignatureCompIcon } from "./v2/signature-m.svg";
 export { ReactComponent as GanttCompIcon } from "./v2/gantt-chart-m.svg";
+export { ReactComponent as KanbanCompIcon } from "./v2/kanban-m.svg";
 
 export { ReactComponent as CandlestickChartCompIcon } from "./v2/candlestick-chart-m.svg";
 export { ReactComponent as FunnelChartCompIcon } from "./v2/funnel-chart-m.svg";

client/packages/lowcoder-design/src/icons/v2/kanban-l.svg

@@ -112,7 +112,7 @@ UtilsComp = withMethodExposing(UtilsComp, [
   {
     method: {
       name: "logoutUser",
-      description: trans("utilsComp.downloadFile"),
+      description: trans("utilsComp.logoutUser"),
       params: [],
     },
     execute: (comp, params) => {

client/packages/lowcoder-design/src/icons/v2/kanban-m.svg

@@ -110,6 +110,7 @@ import {
   PivotTableCompIcon,
   GraphChartCompIcon,
   GanttCompIcon,
+  KanbanCompIcon,
 
 } from "lowcoder-design";
 
@@ -1248,6 +1249,26 @@ export var uiCompMap: Registry = {
     },
   },
 
+  kanban: {
+    name: trans("uiComp.kanbanCompName"),
+    enName: "Kanban",
+    description: trans("uiComp.kanbanCompDesc"),
+    categories: ["projectmanagement"],
+    icon: KanbanCompIcon,
+    keywords: trans("uiComp.kanbanCompKeywords"),
+    comp: remoteComp({
+      compName: "kanban",
+      packageName: "lowcoder-comp-kanban",
+      source: "npm",
+      isRemote: true,
+    }),
+    compName: "lowcoder-comp-kanban",
+    layoutInfo: {
+      w: 20,
+      h: 60,
+    },
+  },
+
   hillchart: {
     name: trans("uiComp.hillchartCompName"),
     enName: "Hillchart",

client/packages/lowcoder-design/src/icons/v2/kanban-s.svg

@@ -162,6 +162,7 @@ export type UICompType =
   | "basicChart"
   | "columnLayout"
   | "ganttChart"
+  | "kanban"
   ;
 
 

client/packages/lowcoder/src/comps/hooks/utilsComp.ts

@@ -1199,6 +1199,9 @@ export const de = {
   "ganttChartCompName": "Gantt-Diagramm",
   "ganttChartCompDesc": "Ein Diagramm, das einen Projektplan mit den Start- und Endterminen von Elementen und Abhängigkeiten darstellt.",
   "ganttChartCompKeywords": "Gantt-Diagramm, Projektmanagement, Zeitplan",
+  "kanbanCompName" : "Kanban Board (preview!)",
+  "kanbanCompDesc" : "Eine visuelle Organisationsmethode zur Verwaltung von Aufgaben und Workflows in einem Board mit Spalten und Karten.",
+  "kanbanCompKeywords" : "kanban, board, workflow, tasks",
   "colorPickerCompName": "Farbwähler",
   "colorPickerCompDesc": "Intuitive Farbauswahl zur individuellen Gestaltung.",
   "colorPickerCompKeywords": "farbe, auswahl, anpassung",

client/packages/lowcoder/src/comps/index.tsx

@@ -1250,6 +1250,10 @@ export const en = {
     "ganttChartCompDesc" : "A chart that illustrates a project schedule, showing the start and finish dates of elements and dependencies.",
     "ganttChartCompKeywords" : "gantt chart, project management, schedule",
 
+    "kanbanCompName" : "Kanban Board (preview!)",
+    "kanbanCompDesc" : "A board for visualizing workflow, with columns representing stages of work and cards representing tasks.",
+    "kanbanCompKeywords" : "kanban, board, workflow, tasks",
+
     // by mousheng
 
     "colorPickerCompName": "Color Picker",
@@ -2446,7 +2450,8 @@ export const en = {
     "openUrl": "Open URL",
     "openApp": "Open App",
     "copyToClipboard": "Copy to Clipboard",
-    "downloadFile": "Download File"
+    "downloadFile": "Download File",
+    "logoutUser" : "Logout User",
   },
   "messageComp": {
     "info": "Send a Notification",

client/packages/lowcoder/src/comps/uiCompRegistry.ts

@@ -1199,6 +1199,9 @@ export const es = {
   "ganttChartCompName": "Diagrama de Gantt",
   "ganttChartCompDesc": "Gráfico que ilustra el calendario de un proyecto, mostrando las fechas de inicio y fin de los elementos y las dependencias.",
   "ganttChartCompKeywords": "diagrama de gantt, gestión de proyectos, calendario",
+  "kanbanCompName" : "Kanban Board (preview!)",
+  "kanbanCompDesc" : "Un tablero de Kanban interactivo para la gestión visual de tareas y flujos de trabajo.",
+  "kanbanCompKeywords" : "kanban, board, workflow, tasks",
   "colorPickerCompName": "Selector de color",
   "colorPickerCompDesc": "Selección intuitiva de colores para personalizar.",
   "colorPickerCompKeywords": "color, selector, personalización",