@archbase/kanban 4.0.37

package/src/global/dnd/useColumnDnd.tsx

@@ -0,0 +1,231 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { BoardItem, DndState } from "@/components/types";
+import { withPrefix } from "@/utils/getPrefix";
+import {
+  draggable,
+  dropTargetForElements,
+} from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import {
+  attachClosestEdge,
+  extractClosestEdge,
+  type Edge,
+} from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
+import { preserveOffsetOnSource } from "@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
+import { useKanbanContext } from "@/context/KanbanContext";
+
+// ── Column DnD State ──────────────────────────────────────────────────
+
+export type TColumnState =
+  | { type: "idle" }
+  | { type: "is-dragging" }
+  | { type: "is-dragging-and-left-self" }
+  | { type: "is-card-over"; isOverChildCard: boolean; dragging: DOMRect }
+  | { type: "is-column-over"; closestEdge: Edge; rect: DOMRect }
+  | { type: "preview"; container: HTMLElement; dragging: DOMRect };
+
+const isCardData = (data: any) => data.type === "card";
+const isColumnData = (data: any) => data.type === "column";
+const idle: TColumnState = { type: "idle" };
+
+export const useColumnDnd = (
+  data: BoardItem,
+  index: number,
+  items: BoardItem[],
+  onColumnDndStateChange?: (info: DndState) => void,
+  allowColumnDrag?: boolean,
+  hasCustomPreview?: boolean,
+) => {
+  const { viewOnly } = useKanbanContext();
+  const isColumnDraggable =
+    !viewOnly && allowColumnDrag !== false && data.isDraggable !== false;
+
+  const headerRef = useRef<HTMLDivElement>(null);
+  const outerFullHeightRef = useRef<HTMLDivElement | null>(null);
+  const innerRef = useRef<HTMLDivElement | null>(null);
+  const [state, setState] = useState<TColumnState>(idle);
+
+  const cardOverShadowCount =
+    state.type === "is-card-over" && !state.isOverChildCard ? 1 : 0;
+  const totalTasksCount = data.totalChildrenCount + cardOverShadowCount;
+
+  const setIsCardOver = useCallback(
+    ({ data, location }: { data: any; location: any }) => {
+      const innerMost = location.current.dropTargets[0];
+      const isOverChildCard = Boolean(innerMost?.data["card-drop-target"]);
+
+      const proposed: TColumnState = {
+        type: "is-card-over",
+        dragging: data.rect,
+        isOverChildCard,
+      };
+
+      setState((current) => {
+        if (
+          current.type === proposed.type &&
+          current.isOverChildCard === proposed.isOverChildCard &&
+          current.dragging === proposed.dragging
+        ) {
+          return current;
+        }
+        return proposed;
+      });
+    },
+    [],
+  );
+
+  useEffect(() => {
+    const outer = outerFullHeightRef.current;
+    const inner = innerRef.current;
+    const header = headerRef.current;
+    if (!outer || !inner || !header) return;
+
+    const scroller = outer.querySelector(
+      `.${withPrefix("column-content-list")}`,
+    );
+
+    const columnData = {
+      type: "column",
+      columnId: data.id,
+      column: data,
+      index,
+    };
+
+    return combine(
+      draggable({
+        element: header,
+        getInitialData: () => columnData,
+        canDrag: () => isColumnDraggable,
+
+        onGenerateDragPreview({ location, nativeSetDragImage }) {
+          const rect = outer.getBoundingClientRect();
+
+          setCustomNativeDragPreview({
+            nativeSetDragImage,
+            getOffset: preserveOffsetOnSource({
+              element: outer,
+              input: location.current.input,
+            }),
+            render({ container }) {
+              if (hasCustomPreview) {
+                setState({ type: "preview", container, dragging: rect });
+              } else {
+                const clone = outer.cloneNode(true) as HTMLElement;
+                clone.style.width = `${rect.width}px`;
+                clone.style.height = `${rect.height}px`;
+                clone.style.transform = "rotate(4deg)";
+                clone.style.boxShadow = "0 8px 24px rgba(0,0,0,0.15)";
+                container.appendChild(clone);
+              }
+            },
+          });
+        },
+
+        onDragStart() {
+          setState({ type: "is-dragging" });
+        },
+
+        onDrop() {
+          setState(idle);
+        },
+      }),
+
+      dropTargetForElements({
+        element: outer,
+
+        getData({ input, element }) {
+          return attachClosestEdge(columnData, {
+            input,
+            element,
+            allowedEdges: ["left", "right"],
+          });
+        },
+
+        canDrop({ source }) {
+          return isCardData(source.data) || isColumnData(source.data);
+        },
+
+        getIsSticky: () => true,
+
+        onDragStart({ source, location }) {
+          if (isCardData(source.data)) {
+            setIsCardOver({ data: source.data, location });
+          }
+        },
+
+        onDragEnter({ source, location, self }) {
+          if (isCardData(source.data)) {
+            setIsCardOver({ data: source.data, location });
+            return;
+          }
+          if (isColumnData(source.data) && source.data.columnId !== data.id) {
+            const closestEdge = extractClosestEdge(self.data);
+            if (!closestEdge) return;
+            const rect = outer.getBoundingClientRect();
+            setState({ type: "is-column-over", closestEdge, rect });
+          }
+        },
+
+        onDrag({ source, self }) {
+          if (!isColumnData(source.data)) return;
+          if (source.data.columnId === data.id) return;
+
+          const closestEdge = extractClosestEdge(self.data);
+          if (!closestEdge) return;
+
+          setState((current) => {
+            if (
+              current.type === "is-column-over" &&
+              current.closestEdge === closestEdge
+            ) {
+              return current;
+            }
+            const rect = outer.getBoundingClientRect();
+            return { type: "is-column-over", closestEdge, rect };
+          });
+        },
+
+        onDropTargetChange({ source, location }) {
+          if (isCardData(source.data)) {
+            setIsCardOver({ data: source.data, location });
+          }
+        },
+
+        onDragLeave({ source }) {
+          if (isColumnData(source.data) && source.data.columnId === data.id) {
+            setState({ type: "is-dragging-and-left-self" });
+            return;
+          }
+          setState(idle);
+        },
+
+        onDrop() {
+          setState(idle);
+        },
+      }),
+
+      autoScrollForElements({
+        canScroll({ source }) {
+          return isCardData(source.data);
+        },
+        getConfiguration: () => ({ maxScrollSpeed: "standard" as const }),
+        element: scroller,
+      }),
+    );
+  }, [data, index, items?.length, isColumnDraggable, hasCustomPreview]);
+
+  useEffect(() => {
+    onColumnDndStateChange?.({ state, column: data });
+  }, [state, onColumnDndStateChange]);
+
+  return {
+    headerRef,
+    outerFullHeightRef,
+    innerRef,
+    state,
+    cardOverShadowCount,
+    totalTasksCount,
+  };
+};

package/src/global/theme-default.scss

@@ -0,0 +1,137 @@
+:root {
+  --vf-font-familly: "Raleway", sans-serif;
+  --vf-prefix-class: "vf";
+
+  //COLORS
+
+  --vf-color-white: #fff;
+  --vf-color-black: #000;
+
+  --vf-color-primary: #5f55ee;
+  --vf-color-primary-50: #fcf9ff;
+  --vf-color-primary-100: #f5eefa;
+  --vf-color-primary-200: #e0ccef;
+  --vf-color-primary-300: #c198e0;
+  --vf-color-primary-400: #ad76d5;
+  --vf-color-primary-500: #9854cb;
+  --vf-color-primary-600: #7a43a2;
+  --vf-color-primary-700: #5b327a;
+  --vf-color-primary-800: #3d2251;
+  --vf-color-primary-900: #301942;
+  --vf-color-primary-950: #1e1129;
+
+  --vf-color-secondary: #fdb022;
+  --vf-color-secondary-50: #fffcf5;
+  --vf-color-secondary-100: #fffaeb;
+  --vf-color-secondary-200: #fef0c7;
+  --vf-color-secondary-300: #fedf89;
+  --vf-color-secondary-400: #fec84b;
+  --vf-color-secondary-500: #fdb022;
+  --vf-color-secondary-600: #f79009;
+  --vf-color-secondary-700: #dc6803;
+  --vf-color-secondary-800: #b54708;
+  --vf-color-secondary-900: #92330a;
+  --vf-color-secondary-950: #6c2304;
+
+  --vf-color-red: #ff4141;
+  --vf-color-red-50: #fff4f4;
+  --vf-color-red-100: #ffe8e8;
+  --vf-color-red-200: #ffd4d4;
+  --vf-color-red-300: #ffb4b4;
+  --vf-color-red-400: #ff8383;
+  --vf-color-red-500: #ff4141;
+  --vf-color-red-600: #ff1616;
+  --vf-color-red-700: #d80000;
+  --vf-color-red-800: #b50000;
+  --vf-color-red-900: #7e040e;
+  --vf-color-red-950: #64020a;
+
+  --vf-color-gray: #9d9d9d;
+  --vf-color-gray-50: #ffffff;
+  --vf-color-gray-100: #f0f0f0;
+  --vf-color-gray-200: #dadada;
+  --vf-color-gray-300: #cecece;
+  --vf-color-gray-400: #b6b6b6;
+  --vf-color-gray-500: #9d9d9d;
+  --vf-color-gray-600: #6a6a6a;
+  --vf-color-gray-700: #545454;
+  --vf-color-gray-800: #373737;
+  --vf-color-gray-900: #1c1c1c;
+  --vf-color-gray-950: #000000;
+
+  --vf-color-green: #29b58b;
+  --vf-color-green-50: #f1fffb;
+  --vf-color-green-100: #e2fff6;
+  --vf-color-green-200: #ccfff0;
+  --vf-color-green-300: #a3edd7;
+  --vf-color-green-400: #52c8a4;
+  --vf-color-green-500: #29b58b;
+  --vf-color-green-600: #00a372;
+  --vf-color-green-700: #00825b;
+  --vf-color-green-800: #006346;
+  --vf-color-green-900: #00412e;
+  --vf-color-green-950: #002117;
+
+  --vf-color-orange: #29b58b;
+  --vf-color-orange-50: #fffdf6;
+  --vf-color-orange-100: #fffaea;
+  --vf-color-orange-200: #fff5d4;
+  --vf-color-orange-300: #ffecaa;
+  --vf-color-orange-400: #ffe27f;
+  --vf-color-orange-500: #ffcf2b;
+  --vf-color-orange-600: #e6ba27;
+  --vf-color-orange-700: #bf9b20;
+  --vf-color-orange-800: #806716;
+  --vf-color-orange-900: #4d3f0d;
+  --vf-color-orange-950: #342a08;
+  --vf-color-orange-1000: #fa8900;
+
+  --vf-color-ashgrey: #b3afa1;
+  --vf-color-ashgrey-50: #fdfdfc;
+  --vf-color-ashgrey-100: #fbfbf9;
+  --vf-color-ashgrey-200: #f7f6f2;
+  --vf-color-ashgrey-300: #f0efea;
+  --vf-color-ashgrey-400: #dddad0;
+  --vf-color-ashgrey-500: #b3afa1;
+  --vf-color-ashgrey-600: #858071;
+  --vf-color-ashgrey-700: #5e5267;
+  --vf-color-ashgrey-800: #676252;
+  --vf-color-ashgrey-900: #39321d;
+  --vf-color-ashgrey-950: #282210;
+
+  --vf-color-snow: #b3afa1;
+  --vf-color-snow-50: #fdfcfd;
+  --vf-color-snow-100: #faf9fb;
+  --vf-color-snow-200: #f5f2f7;
+  --vf-color-snow-300: #edeaf0;
+  --vf-color-snow-400: #d7d0dd;
+  --vf-color-snow-500: #aba1b3;
+  --vf-color-snow-600: #7c7185;
+  --vf-color-snow-700: #5e5267;
+  --vf-color-snow-800: #463454;
+  --vf-color-snow-900: #2d1d39;
+  --vf-color-snow-950: #1e1028;
+
+  --vf-color-gray-0: #fff;
+  --vf-color-yellow-50: #ffb300;
+  --vf-color-cyan-50: #00bcd4;
+  --vf-color-blue-50: #2196f3;
+  --vf-color-violet-50: #673ab7;
+
+  --vf-color-info: #1677ff;
+  --vf-color-success: #52c41a;
+  --vf-color-warning: #faad14;
+  --vf-color-error: #ff4d4f;
+
+  --vf-control-bar-height: 48px;
+
+  --vf-border-radius: 12px;
+
+  --vf-progress-bar-bg: #fff3;
+  --vf-progress-bar-load-bg: #fff6;
+  --vf-progress-bar-play-bg: var(--vf-color-primary);
+
+  --vf-dropdown-menu-item-hover: #ffffff1a;
+  --vf-sound-icon-size: 18px;
+  --vf-sound-icon-color: #fff;
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+import "./components/_index.scss";
+import { dropHandler, dropColumnHandler } from "./global/dnd/dropManager";
+
+export type { BoardProps, BoardItem, BoardData } from "./components/types";
+export { default as Kanban } from "./components/Kanban";
+export { dropHandler, dropColumnHandler };

package/src/utils/columnsUtils.ts

@@ -0,0 +1,19 @@
+import { BoardData, BoardItem } from "@/components";
+
+export const getColumnsFromDataSource = (dataSource: BoardData) => {
+  if (!dataSource?.root) return [];
+  return dataSource.root.children?.map((child) => dataSource[child]) || [];
+};
+
+export const getColumnChildren = (column: BoardItem, dataSource: BoardData) => {
+  if (!column) return [];
+  return column.children?.map((child) => dataSource[child]) || [];
+};
+
+export const getHeaderHeight = (header: HTMLDivElement): number => {
+  if (!header) return 0;
+  const style = window.getComputedStyle(header);
+  const marginTop = parseFloat(style.marginTop) || 0;
+  const marginBottom = parseFloat(style.marginBottom) || 0;
+  return header.offsetHeight + marginTop + marginBottom;
+};

package/src/utils/getPrefix.ts

@@ -0,0 +1,7 @@
+export const prefix = "rkk";
+
+export const withPrefix = (string: string | string[], separator = " ") => {
+  if (Array.isArray(string))
+    return string.map((item) => `${prefix}-${item}`).join(separator);
+  return `${prefix}-${string}`;
+};

package/src/utils/getSharedProps.ts

@@ -0,0 +1,18 @@
+import { BoardProps } from "@/components";
+
+export const getSharedProps = (props: BoardProps) => {
+  const {
+    viewOnly = false,
+    virtualization = true,
+    cardsGap = 8,
+    allowColumnAdder = true,
+    allowListFooter,
+  } = props;
+  return {
+    viewOnly,
+    virtualization,
+    cardsGap,
+    allowColumnAdder,
+    allowListFooter,
+  };
+};

package/src/utils/infinite-scroll.ts

@@ -0,0 +1,18 @@
+import { withPrefix } from "./getPrefix";
+
+export const checkIfSkeletonIsVisible = ({ columnId, limit = 20 }): boolean => {
+  const skeletons = document.querySelectorAll(
+    `.${withPrefix("generic-item-skeleton")}[data-rkk-column="${columnId}"]`
+  );
+
+  if (!skeletons.length) return false;
+
+  const skeletonsToCheck = Array.from(skeletons).slice(0, limit);
+
+  const isVisible = skeletonsToCheck.some((skeleton) => {
+    const { top, bottom } = skeleton.getBoundingClientRect();
+    return top <= window.innerHeight && bottom >= 0;
+  });
+
+  return isVisible;
+};

package/src/utils/mergeRefs.ts

@@ -0,0 +1,23 @@
+import React from "react";
+
+type CallbackRef<T> = (ref: T | null) => void;
+type Ref<T> = React.MutableRefObject<T> | CallbackRef<T>;
+
+const toFnRef = <T>(ref?: Ref<T | null> | null) =>
+  !ref || typeof ref === "function"
+    ? ref
+    : (value: T | null) => {
+        ref.current = value;
+      };
+
+export default function mergeRefs<T>(
+  refA?: Ref<T | null> | null,
+  refB?: Ref<T | null> | null
+): React.RefCallback<T> {
+  const a = toFnRef(refA);
+  const b = toFnRef(refB);
+  return (value: T | null) => {
+    if (typeof a === "function") a(value);
+    if (typeof b === "function") b(value);
+  };
+}

package/src/utils/scroll.ts

@@ -0,0 +1,34 @@
+import { BoardItem, ScrollEvent } from "@/components";
+import { withPrefix } from "./getPrefix";
+
+export const handleScroll = (
+  e: React.UIEvent<HTMLDivElement> | number,
+  virtualization: boolean,
+  onScroll: (e: ScrollEvent, column: BoardItem) => void,
+  column: BoardItem
+) => {
+  const scrollContainer = document.querySelector(
+    `.${withPrefix("column-content-list")}`
+  );
+  if (!scrollContainer) return;
+
+  const { scrollHeight, clientHeight } = scrollContainer;
+  let offset: number;
+  if (virtualization) {
+    offset = typeof e === "number" ? e : 0;
+  } else {
+    const target = (e as React.UIEvent<HTMLDivElement>)
+      .target as HTMLDivElement;
+    offset = target.scrollTop;
+  }
+
+  const syntheticEvent = {
+    target: {
+      scrollTop: offset,
+      scrollHeight,
+      clientHeight,
+    },
+  };
+
+  onScroll?.(syntheticEvent, column);
+};