[WEB-4944] feat: add base layouts for kanban and list with drag-and-drop support (#8032)

packages/types/src/base-layouts/base.ts

@@ -0,0 +1,101 @@
+import type { ReactNode } from "react";
+
+// Base Types
+
+export interface IBaseLayoutsBaseItem {
+  id: string;
+  [key: string]: unknown;
+}
+
+export interface IBaseLayoutsBaseGroup {
+  id: string;
+  name: string;
+  icon?: ReactNode;
+  payload?: Record<string, unknown>;
+  count?: number;
+}
+
+// Drag & Drop Types
+
+export interface IDragDropHandlers<T extends IBaseLayoutsBaseItem> {
+  enableDragDrop?: boolean;
+  onDrop?: (
+    sourceId: string,
+    destinationId: string | null,
+    sourceGroupId: string,
+    destinationGroupId: string
+  ) => Promise<void>;
+  canDrag?: (item: T) => boolean;
+}
+
+// Render Props
+
+export interface IItemRenderProps<T extends IBaseLayoutsBaseItem> {
+  renderItem: (item: T, groupId: string) => ReactNode;
+}
+
+export interface IGroupHeaderControls {
+  isCollapsed: boolean;
+  onToggleGroup: (groupId: string) => void;
+}
+
+export interface IGroupHeaderProps extends IGroupHeaderControls {
+  group: IBaseLayoutsBaseGroup;
+  itemCount: number;
+}
+
+export interface IGroupRenderProps {
+  renderGroupHeader?: (props: IGroupHeaderProps) => ReactNode;
+}
+
+export interface IRenderProps<T extends IBaseLayoutsBaseItem> extends IItemRenderProps<T>, IGroupRenderProps {}
+
+// Layout Configuration
+
+export type TBaseLayoutType = "list" | "kanban";
+
+export interface IBaseLayoutConfig {
+  key: TBaseLayoutType;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  label: string;
+}
+
+// Base Layout Props
+export interface IBaseLayoutsBaseProps<T extends IBaseLayoutsBaseItem> extends IDragDropHandlers<T>, IRenderProps<T> {
+  items: Record<string, T>;
+  groupedItemIds: Record<string, string[]>;
+  groups: IBaseLayoutsBaseGroup[];
+
+  collapsedGroups?: string[];
+  onToggleGroup?: (groupId: string) => void;
+
+  isLoading?: boolean;
+  loadMoreItems?: (groupId: string) => void;
+
+  showEmptyGroups?: boolean;
+  className?: string;
+}
+
+// Group Props
+
+export interface IBaseLayoutsBaseGroupProps<T extends IBaseLayoutsBaseItem>
+  extends IDragDropHandlers<T>,
+    IRenderProps<T> {
+  group: IBaseLayoutsBaseGroup;
+  itemIds: string[];
+  items: Record<string, T>;
+  isCollapsed: boolean;
+  onToggleGroup: (groupId: string) => void;
+  loadMoreItems?: (groupId: string) => void;
+}
+
+// Item Props
+
+export interface IBaseLayoutsBaseItemProps<T extends IBaseLayoutsBaseItem>
+  extends IDragDropHandlers<T>,
+    IItemRenderProps<T> {
+  item: T;
+  index: number;
+  groupId: string;
+  isLast: boolean;
+}

packages/types/src/base-layouts/index.ts

@@ -0,0 +1,3 @@
+export * from "./base";
+export * from "./list";
+export * from "./kanban";

packages/types/src/base-layouts/kanban.ts

@@ -0,0 +1,24 @@
+import type {
+  IBaseLayoutsBaseItem,
+  IBaseLayoutsBaseProps,
+  IBaseLayoutsBaseGroupProps,
+  IBaseLayoutsBaseItemProps,
+} from "./base";
+
+export type IBaseLayoutsKanbanItem = IBaseLayoutsBaseItem;
+
+// Main Kanban Layout Props
+
+export interface IBaseLayoutsKanbanProps<T extends IBaseLayoutsKanbanItem> extends IBaseLayoutsBaseProps<T> {
+  groupClassName?: string;
+}
+
+// Kanban Column/Group Props
+
+export interface IBaseLayoutsKanbanGroupProps<T extends IBaseLayoutsKanbanItem> extends IBaseLayoutsBaseGroupProps<T> {
+  groupClassName?: string;
+}
+
+// Kanban Card/Item Props
+
+export type IBaseLayoutsKanbanItemProps<T extends IBaseLayoutsKanbanItem> = IBaseLayoutsBaseItemProps<T>;

packages/types/src/base-layouts/list.ts

@@ -0,0 +1,20 @@
+import type {
+  IBaseLayoutsBaseItem,
+  IBaseLayoutsBaseProps,
+  IBaseLayoutsBaseGroupProps,
+  IBaseLayoutsBaseItemProps,
+} from "./base";
+
+export type IBaseLayoutsListItem = IBaseLayoutsBaseItem;
+
+// Main List Layout Props
+
+export type IBaseLayoutsListProps<T extends IBaseLayoutsListItem> = IBaseLayoutsBaseProps<T>;
+
+// Group component props
+
+export type IBaseLayoutsListGroupProps<T extends IBaseLayoutsListItem> = IBaseLayoutsBaseGroupProps<T>;
+
+// Item component props
+
+export type IBaseLayoutsListItemProps<T extends IBaseLayoutsListItem> = IBaseLayoutsBaseItemProps<T>;

packages/types/src/index.ts

@@ -47,3 +47,4 @@ export * from "./workspace";
 export * from "./workspace-draft-issues/base";
 export * from "./workspace-notifications";
 export * from "./workspace-views";
+export * from "./base-layouts";