Initial commit: Plane

Synced from upstream: 8853637e981ed7d8a6cff32bd98e7afe20f54362

apps/web/core/components/base-layouts/kanban/group-header.tsx

@@ -0,0 +1,14 @@
+import type { IGroupHeaderProps } from "@plane/types";
+
+export const GroupHeader = ({ group, itemCount, onToggleGroup }: IGroupHeaderProps) => (
+  <button
+    onClick={() => onToggleGroup(group.id)}
+    className="flex w-full items-center gap-2 text-sm font-medium text-custom-text-200"
+  >
+    <div className="flex items-center gap-2">
+      {group.icon}
+      <span>{group.name}</span>
+    </div>
+    <span className="text-xs text-custom-text-300">{itemCount}</span>
+  </button>
+);

apps/web/core/components/base-layouts/kanban/group.tsx

@@ -0,0 +1,96 @@
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+import type { IBaseLayoutsKanbanItem, IBaseLayoutsKanbanGroupProps } from "@plane/types";
+import { cn } from "@plane/utils";
+import { useGroupDropTarget } from "../hooks/use-group-drop-target";
+import { GroupHeader } from "./group-header";
+import { BaseKanbanItem } from "./item";
+
+export const BaseKanbanGroup = observer(<T extends IBaseLayoutsKanbanItem>(props: IBaseLayoutsKanbanGroupProps<T>) => {
+  const {
+    group,
+    itemIds,
+    items,
+    renderItem,
+    renderGroupHeader,
+    isCollapsed,
+    onToggleGroup,
+    enableDragDrop = false,
+    onDrop,
+    canDrag,
+    groupClassName,
+    loadMoreItems: _loadMoreItems,
+  } = props;
+
+  const { t } = useTranslation();
+  const { groupRef, isDraggingOver } = useGroupDropTarget({
+    groupId: group.id,
+    enableDragDrop,
+    onDrop,
+  });
+
+  return (
+    <div
+      ref={groupRef}
+      className={cn(
+        "relative flex flex-shrink-0 flex-col w-[350px] border-[1px] border-transparent p-2 pt-0 max-h-full overflow-y-auto bg-custom-background-90 rounded-md",
+        {
+          "bg-custom-background-80": isDraggingOver,
+        },
+        groupClassName
+      )}
+    >
+      {/* Group Header */}
+      <div className="sticky top-0 z-[2] w-full flex-shrink-0 bg-custom-background-90 px-1 py-2 cursor-pointer">
+        {renderGroupHeader ? (
+          renderGroupHeader({ group, itemCount: itemIds.length, isCollapsed, onToggleGroup })
+        ) : (
+          <GroupHeader
+            group={group}
+            itemCount={itemIds.length}
+            isCollapsed={isCollapsed}
+            onToggleGroup={onToggleGroup}
+          />
+        )}
+      </div>
+
+      {/* Group Items */}
+      {!isCollapsed && (
+        <div className="flex flex-col gap-2 py-2">
+          {itemIds.map((itemId, index) => {
+            const item = items[itemId];
+            if (!item) return null;
+
+            return (
+              <BaseKanbanItem
+                key={itemId}
+                item={item}
+                index={index}
+                groupId={group.id}
+                renderItem={renderItem}
+                enableDragDrop={enableDragDrop}
+                canDrag={canDrag}
+                onDrop={onDrop}
+                isLast={index === itemIds.length - 1}
+              />
+            );
+          })}
+
+          {itemIds.length === 0 && (
+            <div className="flex items-center justify-center py-8 text-sm text-custom-text-300">
+              {t("common.no_items_in_this_group")}
+            </div>
+          )}
+        </div>
+      )}
+
+      {isDraggingOver && enableDragDrop && (
+        <div className="absolute top-0 left-0 h-full w-full flex items-center justify-center text-sm font-medium text-custom-text-300 rounded bg-custom-background-80/85 border-[1px] border-custom-border-300 z-[2]">
+          <div className="p-3 my-8 flex flex-col rounded items-center text-custom-text-200">
+            {t("common.drop_here_to_move")}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});

apps/web/core/components/base-layouts/kanban/item.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useRef } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { observer } from "mobx-react";
+import type { IBaseLayoutsKanbanItem, IBaseLayoutsKanbanItemProps } from "@plane/types";
+
+export const BaseKanbanItem = observer(<T extends IBaseLayoutsKanbanItem>(props: IBaseLayoutsKanbanItemProps<T>) => {
+  const { item, groupId, renderItem, enableDragDrop, canDrag } = props;
+
+  const itemRef = useRef<HTMLDivElement | null>(null);
+
+  const isDragAllowed = canDrag ? canDrag(item) : true;
+
+  // Setup draggable and drop target
+  useEffect(() => {
+    const element = itemRef.current;
+    if (!element || !enableDragDrop) return;
+
+    return combine(
+      draggable({
+        element,
+        canDrag: () => isDragAllowed,
+        getInitialData: () => ({ id: item.id, type: "ITEM", groupId }),
+      }),
+      dropTargetForElements({
+        element,
+        getData: () => ({ id: item.id, groupId, type: "ITEM" }),
+        canDrop: ({ source }) => source?.data?.id !== item.id,
+      })
+    );
+  }, [enableDragDrop, isDragAllowed, item.id, groupId]);
+
+  const renderedItem = renderItem(item, groupId);
+
+  return (
+    <div ref={itemRef} className="cursor-pointer">
+      {renderedItem}
+    </div>
+  );
+});

apps/web/core/components/base-layouts/kanban/layout.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { observer } from "mobx-react";
+import type { IBaseLayoutsKanbanItem, IBaseLayoutsKanbanProps } from "@plane/types";
+import { cn } from "@plane/utils";
+import { useLayoutState } from "../hooks/use-layout-state";
+import { BaseKanbanGroup } from "./group";
+
+export const BaseKanbanLayout = observer(<T extends IBaseLayoutsKanbanItem>(props: IBaseLayoutsKanbanProps<T>) => {
+  const {
+    items,
+    groups,
+    groupedItemIds,
+    renderItem,
+    renderGroupHeader,
+    onDrop,
+    canDrag,
+    className,
+    groupClassName,
+    showEmptyGroups = true,
+    enableDragDrop = false,
+    loadMoreItems,
+    collapsedGroups: externalCollapsedGroups,
+    onToggleGroup: externalOnToggleGroup,
+  } = props;
+
+  const useExternalMode = externalCollapsedGroups !== undefined && externalOnToggleGroup !== undefined;
+  const { containerRef, collapsedGroups, onToggleGroup } = useLayoutState(
+    useExternalMode
+      ? {
+          mode: "external",
+          externalCollapsedGroups,
+          externalOnToggleGroup,
+        }
+      : {
+          mode: "internal",
+        }
+  );
+
+  return (
+    <div ref={containerRef} className={cn("relative w-full flex gap-2 p-3 h-full overflow-x-auto", className)}>
+      {groups.map((group) => {
+        const itemIds = groupedItemIds[group.id] || [];
+        const isCollapsed = collapsedGroups.includes(group.id);
+
+        if (!showEmptyGroups && itemIds.length === 0) return null;
+
+        return (
+          <BaseKanbanGroup
+            key={group.id}
+            group={group}
+            itemIds={itemIds}
+            items={items}
+            renderItem={renderItem}
+            renderGroupHeader={renderGroupHeader}
+            isCollapsed={isCollapsed}
+            onToggleGroup={onToggleGroup}
+            enableDragDrop={enableDragDrop}
+            onDrop={onDrop}
+            canDrag={canDrag}
+            groupClassName={groupClassName}
+            loadMoreItems={loadMoreItems}
+          />
+        );
+      })}
+    </div>
+  );
+});