@archbase/kanban 4.0.37

package/src/components/Column/Column.tsx

@@ -0,0 +1,246 @@
+import React, { memo, useMemo } from "react";
+import { createPortal } from "react-dom";
+import {
+  BoardItem,
+  BoardProps,
+  ConfigMap,
+  DndState,
+  ScrollEvent,
+} from "../types";
+import { withPrefix } from "@/utils/getPrefix";
+import classNames from "classnames";
+import ColumnHeader from "../ColumnHeader";
+import ColumnContent from "../ColumnContent";
+import { useColumnDnd } from "@/global/dnd/useColumnDnd";
+
+const ColumnDropIndicator = memo(
+  ({
+    width,
+    height,
+    customIndicator,
+  }: {
+    width: number;
+    height: number;
+    customIndicator?: React.ReactNode;
+  }) => (
+    <div className={withPrefix("column-shadow-container")}>
+      {customIndicator || (
+        <div
+          className={withPrefix("column-shadow")}
+          style={{ width, height }}
+        />
+      )}
+    </div>
+  ),
+);
+
+
+interface Props {
+  index: number;
+  data: BoardItem;
+  items: BoardItem[];
+  configMap: ConfigMap;
+  allowColumnDrag?: boolean;
+
+  // Renderers
+  renderColumnHeader?: (column: BoardItem) => React.ReactNode;
+  renderColumnFooter?: (column: BoardItem) => React.ReactNode;
+  renderColumnWrapper: (
+    column: BoardItem,
+    props: {
+      children: React.ReactNode;
+      className?: string;
+      style?: React.CSSProperties;
+      ref?: React.RefObject<HTMLDivElement>;
+    },
+  ) => React.ReactNode;
+  renderSkeletonCard?: BoardProps["renderSkeletonCard"];
+  renderListFooter?: (column: BoardItem) => React.ReactNode;
+  renderColumnAdder?: (column: BoardItem) => React.ReactNode;
+  renderGap?: (column: BoardItem) => React.ReactNode;
+
+  // DnD renderers
+  renderCardDragIndicator?: (card: BoardItem, info: any) => React.ReactNode;
+  renderCardDragPreview?: (card: BoardItem, info: any) => React.ReactNode;
+  renderColumnDragIndicator?: (
+    column: BoardItem,
+    info: { width: number; height: number; edge: "left" | "right" },
+  ) => React.ReactNode;
+  renderColumnDragPreview?: (column: BoardItem, info: any) => React.ReactNode;
+
+  // Styling
+  columnWrapperStyle?: (column: BoardItem) => React.CSSProperties;
+  columnWrapperClassName?: (column: BoardItem) => string;
+  columnHeaderStyle?: (column: BoardItem) => React.CSSProperties;
+  columnHeaderClassName?: (column: BoardItem) => string;
+  columnStyle?: (column: BoardItem) => React.CSSProperties;
+  columnClassName?: (column: BoardItem) => string;
+  columnListContentStyle?: (column: BoardItem) => React.CSSProperties;
+  columnListContentClassName?: (column: BoardItem) => string;
+  cardWrapperStyle?: (card: BoardItem, column: BoardItem) => React.CSSProperties;
+  cardWrapperClassName?: string;
+
+  onColumnClick?: (e: React.MouseEvent<HTMLDivElement>, column: BoardItem) => void;
+  onCardClick?: (e: React.MouseEvent<HTMLDivElement>, card: BoardItem) => void;
+  onCardDndStateChange?: (info: DndState) => void;
+  onColumnDndStateChange?: (info: DndState) => void;
+  onScroll?: (e: ScrollEvent, column: BoardItem) => void;
+
+  loadMore?: (columnId: string) => void;
+}
+
+
+const Column = (props: Props) => {
+  const {
+    index,
+    data,
+    items,
+    onColumnClick,
+    renderColumnHeader,
+    renderColumnWrapper,
+    renderColumnFooter,
+    columnWrapperStyle,
+    columnHeaderStyle,
+    onColumnDndStateChange,
+    columnWrapperClassName,
+    columnHeaderClassName,
+    columnListContentClassName,
+    columnClassName,
+    columnStyle,
+    renderColumnDragPreview,
+    renderColumnDragIndicator,
+    allowColumnDrag,
+    ...rest
+  } = props;
+
+
+  const {
+    headerRef,
+    outerFullHeightRef,
+    innerRef,
+    state,
+    cardOverShadowCount,
+  } = useColumnDnd(
+    data,
+    index,
+    items,
+    onColumnDndStateChange,
+    allowColumnDrag,
+    !!renderColumnDragPreview,
+  );
+
+
+  const isDragging = state.type === "is-dragging" || state.type === "preview";
+  const isHidden = state.type === "is-dragging-and-left-self";
+  const isColumnOver = state.type === "is-column-over";
+  const closestEdge = isColumnOver ? state.closestEdge : null;
+
+
+  const columnIndicator = useMemo(() => {
+    if (!isColumnOver) return null;
+
+    const { width, height } = state.rect;
+    const edge = state.closestEdge === "left" ? "left" : "right";
+    const custom = renderColumnDragIndicator?.(data, { width, height, edge });
+
+    return (
+      <ColumnDropIndicator
+        width={width}
+        height={height}
+        customIndicator={custom}
+      />
+    );
+  }, [isColumnOver, state, renderColumnDragIndicator, data]);
+
+
+  const previewContent = useMemo(() => {
+    if (state.type !== "preview" || !renderColumnDragPreview) return null;
+
+    return renderColumnDragPreview(data, {
+      state,
+      data,
+      index,
+      isDraggable: data.isDraggable !== false,
+    });
+  }, [state, data, index, renderColumnDragPreview]);
+
+
+  const containerClassName = classNames(
+    withPrefix("column-outer"),
+    columnWrapperClassName?.(data),
+  );
+
+  const columnWrapperContent = (children: React.ReactNode) =>
+    renderColumnWrapper ? (
+      renderColumnWrapper(data, {
+        children,
+        className: containerClassName,
+        style: columnWrapperStyle?.(data),
+        ref: outerFullHeightRef,
+      })
+    ) : (
+      <div
+        className={containerClassName}
+        ref={outerFullHeightRef}
+        style={columnWrapperStyle?.(data)}
+      >
+        {children}
+      </div>
+    );
+
+
+  const dragStyle = isHidden
+    ? { display: "none" as const }
+    : isDragging
+      ? { opacity: 0.4 }
+      : undefined;
+
+
+  return (
+    <>
+      {closestEdge === "left" && columnIndicator}
+
+      <div onClick={(e) => onColumnClick?.(e, data)} style={dragStyle}>
+        {columnWrapperContent(
+          <div
+            className={classNames(
+              withPrefix("column"),
+              columnClassName?.(data),
+            )}
+            ref={innerRef}
+            style={columnStyle?.(data)}
+          >
+            <div className={withPrefix("column-wrapper")}>
+              <ColumnHeader
+                renderColumnHeader={renderColumnHeader}
+                columnHeaderStyle={columnHeaderStyle}
+                columnHeaderClassName={columnHeaderClassName?.(data)}
+                data={data}
+                ref={headerRef}
+              />
+              <ColumnContent
+                items={items}
+                column={data}
+                columnListContentClassName={columnListContentClassName?.(data)}
+                cardOverHeight={
+                  cardOverShadowCount ? (state as any).dragging.height : null
+                }
+                cardOverShadowCount={cardOverShadowCount}
+                {...rest}
+              />
+              {renderColumnFooter?.(data)}
+            </div>
+          </div>,
+        )}
+
+        {state.type === "preview" &&
+          previewContent &&
+          createPortal(previewContent, state.container)}
+      </div>
+
+      {closestEdge === "right" && columnIndicator}
+    </>
+  );
+};
+
+export default Column;

package/src/components/Column/_Column.scss

@@ -0,0 +1,44 @@
+@use "./../../global/assets/styles/abstracts/variables" as *;
+
+.#{$prefix}-column-outer {
+  min-width: 264px;
+  max-width: 264px;
+  height: 100%; // Changed from max-height to height for proper cascading
+  display: flex;
+  flex-direction: column;
+  transition: all 0.1s ease;
+  -webkit-transition: all 0.1s ease;
+  -moz-transition: all 0.1s ease;
+  -ms-transition: all 0.1s ease;
+  -o-transition: all 0.1s ease;
+
+  .#{$prefix}-column {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 10px;
+    border-radius: 10px;
+    background-color: #f0f0f0;
+    position: relative;
+    overflow: hidden;
+
+    &-wrapper {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      gap: 16px;
+      max-height: 100%;
+    }
+  }
+}
+
+.#{$prefix}-column-shadow-container {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.#{$prefix}-column-shadow {
+  border-radius: 10px;
+  background-color: #ffffffb7;
+  border: 1px solid var(--Schemes-Outline-Variant, #e8ecf5);
+}

package/src/components/Column/_index.scss

@@ -0,0 +1 @@
+@forward "./Column";

package/src/components/Column/index.ts

@@ -0,0 +1 @@
+export { default as Column } from "./Column";

package/src/components/ColumnAdder/ColumnAdder.tsx

@@ -0,0 +1,18 @@
+import { useKanbanContext } from "@/context/KanbanContext";
+import { withPrefix } from "@/utils/getPrefix";
+import React from "react";
+
+interface Props {
+  renderColumnAdder: () => React.ReactNode;
+}
+
+const ColumnAdder = ({ renderColumnAdder }: Props) => {
+  const { allowColumnAdder = true } = useKanbanContext();
+  if (!allowColumnAdder) return null;
+
+  return (
+    <div className={withPrefix("column-adder")}>{renderColumnAdder?.()}</div>
+  );
+};
+
+export default ColumnAdder;

package/src/components/ColumnAdder/_index.scss

@@ -0,0 +1 @@
+@forward "./ColumnAdder";

package/src/components/ColumnAdder/index.ts

@@ -0,0 +1 @@
+export { default } from "./ColumnAdder";

package/src/components/ColumnContent/ColumnContent.tsx

@@ -0,0 +1,238 @@
+import { withPrefix } from "@/utils/getPrefix";
+import React, { forwardRef } from "react";
+import {
+  BoardItem,
+  BoardProps,
+  ConfigMap,
+  DndState,
+  ScrollEvent,
+} from "../types";
+import classNames from "classnames";
+import { VList } from "virtua";
+import GenericItem from "../GenericItem";
+import { handleScroll } from "@/utils/scroll";
+import { checkIfSkeletonIsVisible } from "@/utils/infinite-scroll";
+import { useKanbanContext } from "@/context/KanbanContext";
+
+interface ListProps {
+  column: BoardItem;
+  items: BoardItem[];
+  configMap: ConfigMap;
+  cardWrapperStyle?: (
+    card: BoardItem,
+    column: BoardItem
+  ) => React.CSSProperties;
+  cardWrapperClassName?: string;
+  cardsGap?: number;
+  cardOverHeight?: number;
+  cardOverShadowCount?: number;
+  renderCardDragIndicator?: (card: BoardItem, info: any) => React.ReactNode;
+  renderCardDragPreview?: (card: BoardItem, info: any) => React.ReactNode;
+  onCardDndStateChange?: (info: DndState) => void;
+  renderSkeletonCard?: BoardProps["renderSkeletonCard"];
+  onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
+  onCardClick?: (e: React.MouseEvent<HTMLDivElement>, card: BoardItem) => void;
+  renderListFooter?: (column: BoardItem) => React.ReactNode;
+  renderGap?: (column: BoardItem) => React.ReactNode;
+}
+
+const renderGenericItem = (
+  items: BoardItem[],
+  index: number,
+  column: BoardItem,
+  configMap: ConfigMap,
+  cardOverShadowCount: number,
+  renderListFooter: (column: BoardItem) => React.ReactNode,
+  props: any,
+  count: number
+) => {
+  return (
+    <GenericItem
+      key={index}
+      index={index}
+      options={{
+        data: items[index],
+        column,
+        configMap,
+        isSkeleton: index >= items.length,
+        renderListFooter,
+        isShadow:
+          cardOverShadowCount && index === count - (renderListFooter ? 2 : 1),
+        isListFooter:
+          renderListFooter && index === count - (renderListFooter ? 1 : 0),
+        ...props,
+      }}
+    />
+  );
+};
+
+const VirtualizedList = ({
+  column,
+  items,
+  configMap,
+  onScroll,
+  cardOverShadowCount,
+  renderListFooter,
+  ...props
+}: ListProps) => {
+  const count =
+    column?.totalChildrenCount +
+    cardOverShadowCount +
+    (renderListFooter ? 1 : 0);
+
+  return (
+    <VList
+      count={count}
+      onScroll={onScroll}
+      className={withPrefix("column-content-list")}
+    >
+      {(index: number) =>
+        renderGenericItem(
+          items,
+          index,
+          column,
+          configMap,
+          cardOverShadowCount,
+          renderListFooter,
+          props,
+          count
+        )
+      }
+    </VList>
+  );
+};
+
+const NormalList = ({
+  column,
+  items,
+  configMap,
+  onScroll,
+  cardOverShadowCount,
+  renderListFooter,
+  ...props
+}: ListProps) => {
+  const count =
+    column?.totalChildrenCount +
+    cardOverShadowCount +
+    (renderListFooter ? 1 : 0);
+
+  return (
+    <div className={withPrefix("column-content-list")} onScroll={onScroll}>
+      {Array.from(
+        {
+          length: count,
+        },
+        (_, index) =>
+          renderGenericItem(
+            items,
+            index,
+            column,
+            configMap,
+            cardOverShadowCount,
+            renderListFooter,
+            props,
+            count
+          )
+      )}
+    </div>
+  );
+};
+
+interface Props {
+  items: BoardItem[];
+  column: BoardItem;
+  columnListContentStyle?: (column: BoardItem) => React.CSSProperties;
+  columnListContentClassName?: string;
+  configMap: ConfigMap;
+  renderSkeletonCard?: BoardProps["renderSkeletonCard"];
+  cardWrapperStyle?: (
+    card: BoardItem,
+    column: BoardItem
+  ) => React.CSSProperties;
+  cardWrapperClassName?: string;
+  onScroll?: (e: ScrollEvent, column: BoardItem) => void;
+  onCardClick?: (e: React.MouseEvent<HTMLDivElement>, card: BoardItem) => void;
+  loadMore?: (columnId: string) => void;
+  cardOverShadowCount?: number;
+  cardOverHeight?: number;
+  onCardDndStateChange?: (info: DndState) => void;
+  renderCardDragIndicator?: (card: BoardItem, info: any) => React.ReactNode;
+  renderCardDragPreview?: (card: BoardItem, info: any) => React.ReactNode;
+  renderListFooter?: (column: BoardItem) => React.ReactNode;
+  renderGap?: (column: BoardItem) => React.ReactNode;
+}
+
+const ColumnContent = forwardRef<HTMLDivElement, Props>((props, ref) => {
+  const {
+    items,
+    column,
+    configMap,
+    columnListContentStyle,
+    columnListContentClassName,
+    cardWrapperStyle,
+    renderSkeletonCard,
+    cardWrapperClassName,
+    onCardClick,
+    loadMore,
+    cardOverShadowCount,
+    cardOverHeight,
+    onCardDndStateChange,
+    renderCardDragIndicator,
+    renderCardDragPreview,
+    renderListFooter,
+    renderGap,
+  } = props;
+  const {
+    virtualization = true,
+    cardsGap,
+    allowListFooter,
+  } = useKanbanContext();
+  const containerClassName = classNames(
+    withPrefix("column-content"),
+    columnListContentClassName
+  );
+
+  const onScroll = (e: ScrollEvent, column: BoardItem) => {
+    const isSkeletonVisible = checkIfSkeletonIsVisible({
+      columnId: column?.id,
+    });
+    if (isSkeletonVisible) loadMore?.(column?.id);
+    props?.onScroll?.(e, column);
+  };
+
+  const List = virtualization ? VirtualizedList : NormalList;
+
+  return (
+    <div
+      ref={ref}
+      className={containerClassName}
+      style={columnListContentStyle?.(column)}
+    >
+      <List
+        column={column}
+        items={items}
+        configMap={configMap}
+        cardWrapperStyle={cardWrapperStyle}
+        cardWrapperClassName={cardWrapperClassName}
+        cardsGap={cardsGap}
+        renderSkeletonCard={renderSkeletonCard}
+        onScroll={(e) => handleScroll(e, virtualization, onScroll, column)}
+        onCardClick={onCardClick}
+        cardOverShadowCount={cardOverShadowCount}
+        onCardDndStateChange={onCardDndStateChange}
+        renderCardDragIndicator={renderCardDragIndicator}
+        renderCardDragPreview={renderCardDragPreview}
+        cardOverHeight={cardOverHeight}
+        renderGap={renderGap}
+        renderListFooter={
+          (allowListFooter !== undefined && allowListFooter?.(column)) ||
+          allowListFooter === undefined
+            ? renderListFooter
+            : null
+        }
+      />
+    </div>
+  );
+});
+
+export default ColumnContent;

package/src/components/ColumnContent/_ColumnContent.scss

@@ -0,0 +1,23 @@
+@use "../../global/assets/styles/abstracts/variables" as *;
+
+.#{$prefix}-column-content {
+  flex: 1;
+  position: relative;
+  height: 0; // This forces the flex item to shrink and become scrollable
+  min-height: 0; // Ensure flex child can shrink below content size
+
+  &-list {
+    height: 100%;
+    overflow-y: auto; // Enable vertical scrolling
+    overflow-x: hidden;
+    contain: none !important;
+    scrollbar-width: thin; /* For Firefox */
+    scrollbar-color: rgba(0, 0, 0, 0.3) transparent; /* For Firefox - thumb and track color */
+    transition: scrollbar-color 0.3s ease;
+
+    // Show scrollbar on hover for better UX
+    &:hover {
+      scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
+    }
+  }
+}

package/src/components/ColumnContent/_index.scss

@@ -0,0 +1 @@
+@forward "./ColumnContent";

package/src/components/ColumnContent/index.ts

@@ -0,0 +1 @@
+export { default } from "./ColumnContent";

package/src/components/ColumnHeader/ColumnHeader.tsx

@@ -0,0 +1,43 @@
+import { withPrefix } from "@/utils/getPrefix";
+import React, { forwardRef } from "react";
+import { BoardItem } from "../types";
+import classNames from "classnames";
+
+interface Props {
+  renderColumnHeader?: (column: BoardItem) => React.ReactNode;
+  columnHeaderStyle?: (column: BoardItem) => React.CSSProperties;
+  columnHeaderClassName?: string;
+  data: BoardItem;
+}
+
+const ColumnHeader = forwardRef<HTMLDivElement, Props>((props, ref) => {
+  const {
+    renderColumnHeader,
+    columnHeaderStyle,
+    columnHeaderClassName = "",
+    data,
+  } = props;
+
+  const headerClassName = classNames(
+    withPrefix("column-header"),
+    columnHeaderClassName,
+  );
+
+  if (renderColumnHeader)
+    return <div ref={ref}>{renderColumnHeader(data)}</div>;
+
+  return (
+    <header
+      ref={ref}
+      className={headerClassName}
+      style={columnHeaderStyle?.(data)}
+    >
+      <div className={withPrefix("column-header-left")}>{data?.title}</div>
+      <div className={withPrefix("column-header-right")}>
+        {data?.totalItemsCount || data?.totalChildrenCount || 0}
+      </div>
+    </header>
+  );
+});
+
+export default ColumnHeader;

package/src/components/ColumnHeader/_ColumnHeader.scss

@@ -0,0 +1,26 @@
+@use "./../../global/assets/styles/abstracts/variables" as *;
+
+.#{$prefix}-column-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 10px;
+  height: 24px;
+  margin-bottom: 10px;
+  background-color: #f0f0f0;
+
+  &-left {
+    font-size: 18px;
+    font-weight: 600;
+    color: #000;
+  }
+
+  &-right {
+    font-size: 15px;
+    background-color: #37352f14;
+    color: #37352f;
+    padding: 5px 10px;
+    border-radius: 5px;
+    font-weight: 500;
+  }
+}

package/src/components/ColumnHeader/_index.scss

@@ -0,0 +1 @@
+@forward "./ColumnHeader";

package/src/components/ColumnHeader/index.ts

@@ -0,0 +1 @@
+export { default } from "./ColumnHeader";

package/src/components/DefaultCard/DefaultCard.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { CardRenderProps } from "../types";
+import { withPrefix } from "@/utils/getPrefix";
+
+const DefaultCard = (props: CardRenderProps) => {
+  return <div className={withPrefix("default-card")}>{props?.data?.title}</div>;
+};
+
+export default DefaultCard;

package/src/components/DefaultCard/_DefaultCard.scss

@@ -0,0 +1,14 @@
+@use "../../global/assets/styles/abstracts/variables" as *;
+
+.#{$prefix}-default-card {
+  background-color: #fff;
+  padding: 10px;
+  border-radius: 8px;
+  border: 1px solid #ccc;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  -webkit-border-radius: 8px;
+  -moz-border-radius: 8px;
+  -ms-border-radius: 8px;
+  -o-border-radius: 8px;
+}

package/src/components/DefaultCard/_index.scss

@@ -0,0 +1 @@
+@forward "./DefaultCard";

package/src/components/DefaultCard/index.ts

@@ -0,0 +1 @@
+export { default } from "./DefaultCard";