@archbase/kanban 4.0.37

package/dist/utils/columnsUtils.d.ts

@@ -0,0 +1,4 @@
+import { BoardData, BoardItem } from '../components';
+export declare const getColumnsFromDataSource: (dataSource: BoardData) => BoardItem[];
+export declare const getColumnChildren: (column: BoardItem, dataSource: BoardData) => BoardItem[];
+export declare const getHeaderHeight: (header: HTMLDivElement) => number;

package/dist/utils/getPrefix.d.ts

@@ -0,0 +1,2 @@
+export declare const prefix = "rkk";
+export declare const withPrefix: (string: string | string[], separator?: string) => string;

package/dist/utils/getSharedProps.d.ts

@@ -0,0 +1,8 @@
+import { BoardProps } from '../components';
+export declare const getSharedProps: (props: BoardProps) => {
+    viewOnly: boolean;
+    virtualization: boolean;
+    cardsGap: number;
+    allowColumnAdder: boolean;
+    allowListFooter: (column: import('../components').BoardItem) => boolean;
+};

package/dist/utils/infinite-scroll.d.ts

@@ -0,0 +1,4 @@
+export declare const checkIfSkeletonIsVisible: ({ columnId, limit }: {
+    columnId: any;
+    limit?: number;
+}) => boolean;

package/dist/utils/mergeRefs.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+type CallbackRef<T> = (ref: T | null) => void;
+type Ref<T> = React.MutableRefObject<T> | CallbackRef<T>;
+export default function mergeRefs<T>(refA?: Ref<T | null> | null, refB?: Ref<T | null> | null): React.RefCallback<T>;
+export {};

package/dist/utils/scroll.d.ts

@@ -0,0 +1,2 @@
+import { BoardItem, ScrollEvent } from '../components';
+export declare const handleScroll: (e: React.UIEvent<HTMLDivElement> | number, virtualization: boolean, onScroll: (e: ScrollEvent, column: BoardItem) => void, column: BoardItem) => void;

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@archbase/kanban",
+  "version": "4.0.37",
+  "description": "Kanban board components for Archbase React, based on react-kanban-kit with Archbase packaging",
+  "author": "Edson Martins <edsonmartins2005@gmail.com>",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    },
+    "./dist/index.css": "./dist/index.css",
+    "./dist/cjs/index.css": "./dist/index.css",
+    "./dist/esm/index.css": "./dist/index.css"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "react": "^18.3.0 || ^19.2.0",
+    "react-dom": "^18.3.0 || ^19.2.0"
+  },
+  "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "^1.5.0",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
+    "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll": "^2.0.0",
+    "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^2.1.0",
+    "classes": "^0.3.0",
+    "classnames": "^2.5.1",
+    "virtua": "^0.40.4"
+  },
+  "devDependencies": {
+    "@types/node": "^22.16.1",
+    "@types/react": "^19.0.6",
+    "@types/react-dom": "^19.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "sass-embedded": "^1.80.7",
+    "typescript": "~5.7.2",
+    "vite": "^6.0.3",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^2.1.8"
+  },
+  "publishConfig": {
+    "registry": "http://192.168.1.110:4873"
+  },
+  "scripts": {
+    "dev": "NODE_OPTIONS=\"--max-old-space-size=16384\" vite build --watch",
+    "build": "NODE_OPTIONS=\"--max-old-space-size=16384\" vite build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "lint": "eslint . --max-warnings 0",
+    "clean": "rm -rf dist .turbo node_modules"
+  }
+}

package/src/components/Card/Card.tsx

@@ -0,0 +1,215 @@
+import { withPrefix } from "@/utils/getPrefix";
+import React, { Fragment, memo, useMemo } from "react";
+import { BoardItem, DndState } from "../types";
+import { createPortal } from "react-dom";
+import { TaskCardState, useCardDnd } from "@/global/dnd/useCardDnd";
+
+export const CardShadow = memo(
+  ({
+    height,
+    customIndicator,
+  }: {
+    height: number;
+    customIndicator?: React.ReactNode;
+  }) => {
+    return (
+      <div className={withPrefix("card-shadow-container")}>
+        {customIndicator || (
+          <div
+            className={withPrefix("card-shadow")}
+            style={{ height: `${height - 2}px` }}
+          />
+        )}
+      </div>
+    );
+  },
+);
+
+const CardDisplay = (props: {
+  outerRef?: React.RefObject<HTMLDivElement>;
+  innerRef?: React.RefObject<HTMLDivElement>;
+  state: TaskCardState;
+  data: BoardItem;
+  column: BoardItem;
+  index: number;
+  isDraggable: boolean;
+  render: (props: {
+    data: BoardItem;
+    column: BoardItem;
+    index: number;
+    isDraggable: boolean;
+  }) => React.ReactNode;
+  onClick?: (e: React.MouseEvent<HTMLDivElement>, card: BoardItem) => void;
+  cardsGap?: number;
+  renderCardDragIndicator?: (card: BoardItem, info: any) => React.ReactNode;
+  renderGap?: (column: BoardItem) => React.ReactNode;
+}) => {
+  const {
+    outerRef,
+    innerRef,
+    state,
+    data,
+    column,
+    index,
+    isDraggable,
+    cardsGap,
+    render,
+    onClick,
+    renderCardDragIndicator,
+  } = props;
+
+  const containerStyle = useMemo(() => {
+    const styles: React.CSSProperties = {};
+    if (state.type === "is-dragging-and-left-self") {
+      styles.display = "none";
+    }
+    return styles;
+  }, [state.type]);
+
+  const innerStyle = useMemo(() => {
+    if (state.type === "is-dragging") {
+      return { opacity: 0.6 };
+    }
+    if (state.type === "preview") {
+      return {
+        width: state.dragging.width,
+        height: state.dragging.height,
+        transform: "rotate(4deg)",
+      };
+    }
+    return {};
+  }, [state]);
+
+  const showTopShadow = state.type === "is-over" && state.closestEdge === "top";
+  const showBottomShadow =
+    state.type === "is-over" && state.closestEdge === "bottom";
+  const shadowHeight = state.type === "is-over" ? state.dragging.height : 0;
+  const renderContent = render({ data, column, index, isDraggable });
+  const customIndicator = renderCardDragIndicator?.(
+    state.type === "is-dragging" ? data : null,
+    {
+      height: shadowHeight,
+    },
+  );
+
+  return (
+    <Fragment>
+      <div
+        ref={outerRef}
+        className={withPrefix("card-outer")}
+        onClick={(e) => onClick?.(e, data)}
+        style={{
+          ...containerStyle,
+          ...(cardsGap !== undefined ? { marginBottom: cardsGap } : {}),
+        }}
+        data-test-id={data?.id}
+        data-rkk-column={column?.id}
+        data-rkk-index={index}
+      >
+        {showTopShadow && (
+          <CardShadow height={shadowHeight} customIndicator={customIndicator} />
+        )}
+        <div
+          ref={innerRef}
+          className={withPrefix("card-inner")}
+          style={{
+            ...innerStyle,
+            marginBottom: showBottomShadow ? cardsGap : 0,
+            marginTop: showTopShadow ? cardsGap : 0,
+          }}
+        >
+          {renderContent}
+        </div>
+        {showBottomShadow && (
+          <CardShadow height={shadowHeight} customIndicator={customIndicator} />
+        )}
+      </div>
+      {/* {renderGap?.(column)} */}
+    </Fragment>
+  );
+};
+
+interface Props {
+  render: (props: {
+    data: BoardItem;
+    column: BoardItem;
+    index: number;
+    isDraggable: boolean;
+  }) => React.ReactNode;
+  data: BoardItem;
+  column: BoardItem;
+  index: number;
+  isDraggable: boolean;
+  onClick?: (e: React.MouseEvent<HTMLDivElement>, card: BoardItem) => void;
+  cardsGap?: number;
+  renderGap?: (column: BoardItem) => React.ReactNode;
+  onCardDndStateChange?: (info: DndState) => void;
+  renderCardDragIndicator?: (card: BoardItem, info: any) => React.ReactNode;
+  renderCardDragPreview?: (card: BoardItem, info: any) => React.ReactNode;
+}
+
+const Card = (props: Props) => {
+  const {
+    render,
+    data,
+    column,
+    index,
+    isDraggable,
+    cardsGap,
+    onClick,
+    onCardDndStateChange,
+    renderCardDragIndicator,
+    renderCardDragPreview,
+    renderGap,
+  } = props;
+  const { outerRef, innerRef, state } = useCardDnd(
+    data,
+    column,
+    index,
+    isDraggable,
+    onCardDndStateChange,
+  );
+
+  return (
+    <>
+      <CardDisplay
+        outerRef={outerRef}
+        innerRef={innerRef}
+        state={state}
+        data={data}
+        column={column}
+        index={index}
+        isDraggable={isDraggable}
+        render={render}
+        onClick={onClick}
+        cardsGap={cardsGap}
+        renderCardDragIndicator={renderCardDragIndicator}
+        renderGap={renderGap}
+      />
+
+      {state.type === "preview"
+        ? createPortal(
+            renderCardDragPreview?.(data, {
+              state,
+              data,
+              column,
+              index,
+              isDraggable,
+            }) || (
+              <CardDisplay
+                state={state}
+                data={data}
+                column={column}
+                index={index}
+                isDraggable={isDraggable}
+                render={render}
+              />
+            ),
+            state.container,
+          )
+        : null}
+    </>
+  );
+};
+
+export default Card;

package/src/components/Card/_Card.scss

@@ -0,0 +1,11 @@
+@use "../../global/assets/styles/abstracts/variables" as *;
+
+.#{$prefix}-card-shadow-container {
+  position: relative;
+}
+
+.#{$prefix}-card-shadow {
+  border-radius: 8px;
+  background-color: #ffffffb7;
+  border: 1px solid var(--Schemes-Outline-Variant, #e8ecf5);
+}

package/src/components/Card/_index.scss

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

package/src/components/Card/index.ts

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

package/src/components/CardSkeleton/CardSkeleton.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { withPrefix } from "@/utils/getPrefix";
+
+export type SkeletonAnimationType = "shimmer" | "pulse" | "wave";
+
+interface CardSkeletonProps {
+  className?: string;
+  style?: React.CSSProperties;
+  animationType?: SkeletonAnimationType;
+}
+
+const CardSkeleton: React.FC<CardSkeletonProps> = ({
+  className,
+  style,
+  animationType = "shimmer",
+}) => {
+  const skeletonClass = `${withPrefix("skeleton")} ${
+    animationType === "pulse" ? withPrefix("skeleton-pulse") : ""
+  } ${animationType === "wave" ? withPrefix("skeleton-wave") : ""} ${
+    className || ""
+  }`.trim();
+
+  const renderDefaultSkeleton = () => (
+    <div className={withPrefix("skeleton-content")}>
+      <div className={withPrefix("skeleton-title")}></div>
+
+      <div className={withPrefix("skeleton-description")}>
+        <div className={withPrefix("skeleton-line")}></div>
+        <div
+          className={`${withPrefix("skeleton-line")} ${withPrefix(
+            "skeleton-line-short"
+          )}`}
+        ></div>
+      </div>
+    </div>
+  );
+
+  return (
+    <div className={skeletonClass} style={style}>
+      {renderDefaultSkeleton()}
+    </div>
+  );
+};
+
+export default CardSkeleton;

package/src/components/CardSkeleton/_CardSkeleton.scss

@@ -0,0 +1,245 @@
+@use "../../global/assets/styles/abstracts/variables" as *;
+
+// Shimmer animation keyframes
+@keyframes skeleton-shimmer {
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+}
+
+// Wave animation keyframes
+@keyframes skeleton-wave {
+  0% {
+    transform: translateX(-100%);
+  }
+  50% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+// Pulse animation keyframes
+@keyframes skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
+.#{$prefix}-skeleton {
+  border-radius: 8px;
+  border: 1px solid #e8ecf5;
+  background: #fff;
+  padding: 16px;
+  margin-bottom: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: box-shadow 0.2s ease;
+  position: relative;
+  overflow: hidden;
+
+  &:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  }
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  // Base skeleton element styles
+  %skeleton-base {
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 200px 100%;
+    animation: skeleton-shimmer 1.5s infinite ease-in-out;
+    border-radius: 4px;
+    position: relative;
+  }
+
+  // Wave animation base
+  %skeleton-wave-base {
+    background: #f0f0f0;
+    position: relative;
+    overflow: hidden;
+    border-radius: 4px;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      transform: translateX(-100%);
+      background: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0) 0,
+        rgba(255, 255, 255, 0.2) 20%,
+        rgba(255, 255, 255, 0.5) 60%,
+        rgba(255, 255, 255, 0)
+      );
+      animation: skeleton-wave 2s infinite;
+      content: "";
+    }
+  }
+
+  // Title skeleton
+  &-title {
+    @extend %skeleton-base;
+    height: 20px;
+    width: 80%;
+    border-radius: 6px;
+  }
+
+  // Description section
+  &-description {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &-line {
+    @extend %skeleton-base;
+    height: 14px;
+    width: 100%;
+
+    &-short {
+      width: 65%;
+    }
+  }
+
+  // Priority indicator
+  &-priority {
+    @extend %skeleton-base;
+    height: 4px;
+    width: 40px;
+    border-radius: 2px;
+    margin-bottom: 4px;
+  }
+
+  // Tags section
+  &-tags {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  &-tag {
+    @extend %skeleton-base;
+    height: 20px;
+    width: 60px;
+    border-radius: 12px;
+
+    &:nth-child(2) {
+      width: 45px;
+    }
+
+    &:nth-child(3) {
+      width: 55px;
+    }
+  }
+
+  // Footer section
+  &-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 4px;
+
+    &-left {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+  }
+
+  &-avatar {
+    @extend %skeleton-base;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  &-assignee {
+    @extend %skeleton-base;
+    height: 12px;
+    width: 60px;
+    border-radius: 3px;
+  }
+
+  &-date {
+    @extend %skeleton-base;
+    height: 12px;
+    width: 80px;
+    border-radius: 3px;
+  }
+}
+
+// Wave animation variant
+.#{$prefix}-skeleton-wave {
+  .#{$prefix}-skeleton-title,
+  .#{$prefix}-skeleton-line,
+  .#{$prefix}-skeleton-tag,
+  .#{$prefix}-skeleton-avatar,
+  .#{$prefix}-skeleton-assignee,
+  .#{$prefix}-skeleton-date,
+  .#{$prefix}-skeleton-priority {
+    @extend %skeleton-wave-base;
+    animation: none; // Remove shimmer animation
+  }
+}
+
+// Pulse animation variant
+.#{$prefix}-skeleton-pulse {
+  .#{$prefix}-skeleton-title,
+  .#{$prefix}-skeleton-line,
+  .#{$prefix}-skeleton-tag,
+  .#{$prefix}-skeleton-avatar,
+  .#{$prefix}-skeleton-assignee,
+  .#{$prefix}-skeleton-date,
+  .#{$prefix}-skeleton-priority {
+    background: #f0f0f0;
+    animation: skeleton-pulse 1.5s ease-in-out infinite;
+  }
+}
+
+// Responsive design for smaller screens
+@media (max-width: 768px) {
+  .#{$prefix}-skeleton {
+    padding: 12px;
+
+    &-content {
+      gap: 10px;
+    }
+
+    &-title {
+      height: 18px;
+    }
+
+    &-line {
+      height: 12px;
+    }
+
+    &-tag {
+      height: 18px;
+      width: 50px;
+
+      &:nth-child(2) {
+        width: 40px;
+      }
+    }
+
+    &-avatar {
+      width: 20px;
+      height: 20px;
+    }
+  }
+}

package/src/components/CardSkeleton/_index.scss

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

package/src/components/CardSkeleton/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./CardSkeleton";
+export type { SkeletonAnimationType } from "./CardSkeleton";