Merge pull request #3 from sp-yduck/feature/data-provider

Add KanbanProvider to globally manage the columnItems and KanbanCardItems

Author: sp-yduck

README.md

@@ -27,30 +27,30 @@ You can find all the sample codes [here](https://github.com/sp-yduck/fast-kanban
 ```example.ts
 // simple example implementation
 
-export function DefaultKanban({
-  columnItems,
-  kanbanCardItems,
-}: {
-  columnItems: { id: UniqueIdentifier }[];
-  kanbanCardItems: { id: UniqueIdentifier; column_id: UniqueIdentifier }[];
-}) {
+function App() {
+  return (
+    <KanbanProvider>
+      <DefaultKanban />
+    </KanbanProvider>
+  )
+}
+
+export function DefaultKanban() {
   return (
     <Kanban>
       <KanbanHeader>
         <KanbanTitle>Kanban Board</KanbanTitle>
       </KanbanHeader>
       <KanbanContent>
         <SortableColumnsContainer
-          items={columnItems}
-          kanbanCardItems={kanbanCardItems}
           columnRenderFunc={renderColumn}
         />
       </KanbanContent>
     </Kanban>
   );
 }
 
-function renderColumn(id: UniqueIdentifier, items: { id: UniqueIdentifier }[]) {
+function renderColumn(id: UniqueIdentifier, column_id: UniqueIdentifier) {
   return (
     <Column key={id} id={id}>
       <ColumnHandler>
@@ -59,7 +59,7 @@ function renderColumn(id: UniqueIdentifier, items: { id: UniqueIdentifier }[]) {
         </ColumnHeader>
       </ColumnHandler>
       <ColumnContent>
-        <KanbanCardsContainer items={items} cardRenderFunc={renderKanbanCard} />
+        <KanbanCardsContainer column_id={id} cardRenderFunc={renderKanbanCard} />
       </ColumnContent>
     </Column>
   );

packages/fast-kanban/index.ts

@@ -5,6 +5,11 @@ export {
   KanbanTitle,
   KanbanContent,
 } from "./src/components/kanban/Board";
+export {
+  KanbanProvider,
+  useColumnItems,
+  useKanbanCardItems,
+} from "./src/components/kanban/Context";
 export {
   Column,
   ColumnHandler,
@@ -21,4 +26,8 @@ export {
   KanbanCardTitle,
   KanbanCardContent,
 } from "./src/components/kanban/Card";
-export type { UniqueIdentifier } from "./src/components/kanban/types";
+export type {
+  UniqueIdentifier,
+  ColumnItems,
+  KanbanCardItems,
+} from "./src/components/kanban/types";

packages/fast-kanban/package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "fast-kanban",
   "private": false,
-  "version": "0.0.1",
+  "version": "0.1.0",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",

packages/fast-kanban/package.json

@@ -4,6 +4,7 @@ import { SortableContext, useSortable } from "@dnd-kit/sortable";
 import { SyntheticListenerMap } from "@dnd-kit/core/dist/hooks/utilities";
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
 import { cn } from "@/lib/utils";
+import { useKanbanCardItems } from "./Context";
 
 export const KanbanCardHeader = CardHeader;
 export const KanbanCardTitle = CardTitle;
@@ -74,15 +75,17 @@ export function KanbanCardHandler({
 
 export function KanbanCardsContainer({
   className,
-  items,
+  column_id,
   data,
   cardRenderFunc,
 }: {
   className?: string;
-  items: { id: UniqueIdentifier }[];
+  column_id: UniqueIdentifier;
   data?: unknown;
   cardRenderFunc: (id: UniqueIdentifier, data: unknown) => React.ReactNode;
 }) {
+  const [kanbanCards] = useKanbanCardItems();
+  const items = kanbanCards.filter((item) => item.column_id === column_id);
   return (
     <SortableContext id="kanban-card" items={items}>
       <div className={cn(className)}>

packages/fast-kanban/src/components/kanban/Card.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import {
   DndContext,
   DragEndEvent,
@@ -9,30 +9,25 @@ import {
 import { SortableContext, arrayMove } from "@dnd-kit/sortable";
 import { CardContent } from "@/components/ui/card";
 import { cn } from "@/lib/utils";
+import { useColumnItems, useKanbanCardItems } from "./Context";
+import { ColumnItems } from "./types";
 
 export function SortableColumnsContainer({
   className,
-  items,
-  kanbanCardItems,
   data,
   columnRenderFunc,
 }: {
   className?: string;
-  items: { id: UniqueIdentifier }[];
-  kanbanCardItems: { id: UniqueIdentifier; column_id: UniqueIdentifier }[];
   data?: unknown;
   columnRenderFunc: (
     id: UniqueIdentifier,
-    items: { id: UniqueIdentifier }[],
+    items: ColumnItems,
     data?: unknown
   ) => React.ReactNode;
 }) {
   const { setNodeRef } = useDroppable({ id: "droppable" });
-  const [cols, setCols] = useState<{ id: UniqueIdentifier }[]>(items);
-  const [kanbanCards, setKanbanCards] =
-    useState<{ id: UniqueIdentifier; column_id: UniqueIdentifier }[]>(
-      kanbanCardItems
-    );
+  const [cols, setCols] = useColumnItems();
+  const [kanbanCards, setKanbanCards] = useKanbanCardItems();
   return (
     <DndContext onDragEnd={onDragEnd} onDragOver={onDragOver}>
       <SortableContext id="columns" items={cols}>

packages/fast-kanban/src/components/kanban/ColumnsContainer.tsx

@@ -0,0 +1,45 @@
+import React, { useContext } from "react";
+import { ColumnItems, KanbanCardItems } from "./types";
+
+// Context for managing the state of ColumnItems
+const ColumnsItemContext = React.createContext<ColumnItems>({} as ColumnItems);
+const SetColumnsItemContext = React.createContext<
+  React.Dispatch<React.SetStateAction<ColumnItems>>
+>(() => {});
+export const useColumnItems = (): [
+  ColumnItems,
+  React.Dispatch<React.SetStateAction<ColumnItems>>
+] => [useContext(ColumnsItemContext), useContext(SetColumnsItemContext)];
+
+// Context for managing the state of KanbanCardItems
+const KanbanCardItemContext = React.createContext<KanbanCardItems>(
+  {} as KanbanCardItems
+);
+const SetKanbanCardItemContext = React.createContext<
+  React.Dispatch<React.SetStateAction<KanbanCardItems>>
+>(() => {});
+export const useKanbanCardItems = (): [
+  KanbanCardItems,
+  React.Dispatch<React.SetStateAction<KanbanCardItems>>
+] => [useContext(KanbanCardItemContext), useContext(SetKanbanCardItemContext)];
+
+// Context Provider for managing the state of ColumnItems and KanbanCardItems
+export function KanbanProvider({ children }: { children: React.ReactNode }) {
+  const [columnItems, setColumnItems] = React.useState<ColumnItems>(
+    [] as ColumnItems
+  );
+  const [kanbanCardItems, setKanbanCardItems] = React.useState<KanbanCardItems>(
+    [] as KanbanCardItems
+  );
+  return (
+    <ColumnsItemContext.Provider value={columnItems}>
+      <SetColumnsItemContext.Provider value={setColumnItems}>
+        <KanbanCardItemContext.Provider value={kanbanCardItems}>
+          <SetKanbanCardItemContext.Provider value={setKanbanCardItems}>
+            {children}
+          </SetKanbanCardItemContext.Provider>
+        </KanbanCardItemContext.Provider>
+      </SetColumnsItemContext.Provider>
+    </ColumnsItemContext.Provider>
+  );
+}

packages/fast-kanban/src/components/kanban/Context.tsx

@@ -1 +1,7 @@
 export type UniqueIdentifier = string | number;
+
+export type ColumnItems = { id: UniqueIdentifier }[];
+export type KanbanCardItems = {
+  id: UniqueIdentifier;
+  column_id: UniqueIdentifier;
+}[];

packages/fast-kanban/src/components/kanban/types.ts

@@ -1,14 +1,15 @@
+import { KanbanProvider } from "fast-kanban";
 import DefaultKanban from "./components/DefaultKanban";
 import JiraStyleKanban from "./components/JiraStyleKanban";
 
 function App() {
-  const columnItems = [
+  const initialColumnItems = [
     { id: "backlog" },
     { id: "to do" },
     { id: "in progress" },
     { id: "done" },
   ];
-  const kanbanCardItems = [
+  const initialKanbanCardItems = [
     { id: "1", column_id: "backlog" },
     { id: "2", column_id: "backlog" },
     { id: "3", column_id: "to do" },
@@ -22,18 +23,22 @@ function App() {
       <div>
         <div className="bg-gray-100 p-8">
           <div className="text-xl px-2 py-4">Default UI</div>
-          <DefaultKanban
-            columnItems={columnItems}
-            kanbanCardItems={kanbanCardItems}
-          />
+          <KanbanProvider>
+            <DefaultKanban
+              columnItems={initialColumnItems}
+              kanbanCardItems={initialKanbanCardItems}
+            />
+          </KanbanProvider>
         </div>
         <div className="p-8">
           <div className="text-xl px-2 py-4">Jira Style UI</div>
           <div>
-            <JiraStyleKanban
-              columnItems={columnItems}
-              kanbanCardItems={kanbanCardItems}
-            />
+            <KanbanProvider>
+              <JiraStyleKanban
+                columnItems={initialColumnItems}
+                kanbanCardItems={initialKanbanCardItems}
+              />
+            </KanbanProvider>
           </div>
         </div>
       </div>

src/App.tsx

@@ -16,32 +16,39 @@ import {
   KanbanCardContent,
   KanbanCardHandler,
   KanbanCardsContainer,
+  ColumnItems,
+  KanbanCardItems,
+  useColumnItems,
+  useKanbanCardItems,
 } from "fast-kanban";
+import { useEffect } from "react";
 
 export default function DefaultKanban({
   columnItems,
   kanbanCardItems,
 }: {
-  columnItems: { id: UniqueIdentifier }[];
-  kanbanCardItems: { id: UniqueIdentifier; column_id: UniqueIdentifier }[];
+  columnItems: ColumnItems;
+  kanbanCardItems: KanbanCardItems;
 }) {
+  const [, setColumnsItems] = useColumnItems();
+  const [, setKanbanCardItems] = useKanbanCardItems();
+  useEffect(() => {
+    setColumnsItems(columnItems);
+    setKanbanCardItems(kanbanCardItems);
+  }, [setColumnsItems, setKanbanCardItems, columnItems, kanbanCardItems]);
   return (
     <Kanban>
       <KanbanHeader>
         <KanbanTitle>Kanban Board</KanbanTitle>
       </KanbanHeader>
       <KanbanContent>
-        <SortableColumnsContainer
-          items={columnItems}
-          kanbanCardItems={kanbanCardItems}
-          columnRenderFunc={renderColumn}
-        />
+        <SortableColumnsContainer columnRenderFunc={renderColumn} />
       </KanbanContent>
     </Kanban>
   );
 }
 
-function renderColumn(id: UniqueIdentifier, items: { id: UniqueIdentifier }[]) {
+function renderColumn(id: UniqueIdentifier) {
   return (
     <Column key={id} id={id}>
       <ColumnHandler>
@@ -50,7 +57,10 @@ function renderColumn(id: UniqueIdentifier, items: { id: UniqueIdentifier }[]) {
         </ColumnHeader>
       </ColumnHandler>
       <ColumnContent>
-        <KanbanCardsContainer items={items} cardRenderFunc={renderKanbanCard} />
+        <KanbanCardsContainer
+          column_id={id}
+          cardRenderFunc={renderKanbanCard}
+        />
       </ColumnContent>
     </Column>
   );

src/components/DefaultKanban.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import {
   EllipsisIcon,
   PlusIcon,
@@ -21,6 +22,8 @@ import {
   KanbanCardContent,
   KanbanCardHandler,
   KanbanCardsContainer,
+  useColumnItems,
+  useKanbanCardItems,
 } from "fast-kanban";
 
 export default function JiraStyleKanban({
@@ -30,6 +33,12 @@ export default function JiraStyleKanban({
   columnItems: { id: UniqueIdentifier }[];
   kanbanCardItems: { id: UniqueIdentifier; column_id: UniqueIdentifier }[];
 }) {
+  const [, setColumnsItems] = useColumnItems();
+  const [, setKanbanCardItems] = useKanbanCardItems();
+  useEffect(() => {
+    setColumnsItems(columnItems);
+    setKanbanCardItems(kanbanCardItems);
+  }, [setColumnsItems, setKanbanCardItems, columnItems, kanbanCardItems]);
   return (
     <Kanban className="rounded-md shadow-none">
       <KanbanHeader>
@@ -38,8 +47,6 @@ export default function JiraStyleKanban({
       <KanbanContent>
         <SortableColumnsContainer
           className="space-x-3"
-          items={columnItems}
-          kanbanCardItems={kanbanCardItems}
           columnRenderFunc={renderColumn}
         />
       </KanbanContent>
@@ -72,7 +79,7 @@ function renderColumn(id: UniqueIdentifier, items: { id: UniqueIdentifier }[]) {
       <ColumnContent className="p-0 px-1 py-2">
         <KanbanCardsContainer
           className="space-y-1 w-full"
-          items={items}
+          column_id={id}
           cardRenderFunc={renderKanbanCard}
         />
         <div className="flex rounded-sm hover:bg-gray-200 p-2 space-x-1 text-center text-md text-gray-500 ">