@archbase/kanban 4.0.37

package/src/components/GenericItem/GenericItem.tsx

@@ -0,0 +1,132 @@
+import React from "react";
+import { BoardItem, BoardProps, ConfigMap, DndState } from "../types";
+import classNames from "classnames";
+import { withPrefix } from "@/utils/getPrefix";
+import CardSkeleton from "../CardSkeleton";
+import Card from "../Card";
+import DefaultCard from "../DefaultCard";
+import { CardShadow } from "../Card/Card";
+
+const isCardDraggable = (data: BoardItem, isTypeDraggable: boolean) => {
+  return data?.isDraggable !== undefined ? data?.isDraggable : isTypeDraggable;
+};
+
+interface Props {
+  index: number;
+  options: {
+    data: BoardItem;
+    column: BoardItem;
+    configMap: ConfigMap;
+    //isSkeleton is used to show a skeleton UI when the item is not loaded yet
+    isSkeleton: boolean;
+    isShadow: boolean;
+    isListFooter: boolean;
+    renderListFooter?: (column: BoardItem) => React.ReactNode;
+    cardWrapperStyle?: (
+      card: BoardItem,
+      column: BoardItem,
+    ) => React.CSSProperties;
+    cardWrapperClassName?: string;
+    cardsGap?: number;
+    renderSkeletonCard?: BoardProps["renderSkeletonCard"];
+    onCardDndStateChange?: (info: DndState) => void;
+    onCardClick?: (
+      e: React.MouseEvent<HTMLDivElement>,
+      card: BoardItem,
+    ) => void;
+    cardOverHeight?: number;
+    renderCardDragIndicator?: (card: BoardItem, info: any) => React.ReactNode;
+    renderCardDragPreview?: (card: BoardItem, info: any) => React.ReactNode;
+    renderGap?: (column: BoardItem) => React.ReactNode;
+  };
+}
+
+const GenericItem = (props: Props) => {
+  const { index, options } = props;
+  const {
+    data,
+    column,
+    configMap,
+    isSkeleton,
+    cardWrapperStyle,
+    cardWrapperClassName,
+    cardsGap = 8,
+    isShadow,
+    isListFooter,
+    cardOverHeight = 90,
+    renderSkeletonCard,
+    onCardClick,
+    onCardDndStateChange,
+    renderCardDragIndicator,
+    renderListFooter,
+    renderCardDragPreview,
+    renderGap,
+  } = options;
+
+  const { render = DefaultCard, isDraggable = true } =
+    configMap?.[data?.type] || {};
+
+  const wrapperClassName = classNames(
+    withPrefix("generic-item-wrapper"),
+    cardWrapperClassName,
+  );
+
+  const renderCardContent = () => {
+    if (isListFooter)
+      return (
+        <div className={withPrefix("generic-item-list-footer")}>
+          {renderListFooter?.(column) || "Default Footer"}
+        </div>
+      );
+    else if (isShadow)
+      return (
+        <CardShadow
+          height={cardOverHeight}
+          customIndicator={renderCardDragIndicator?.(data, {
+            height: cardOverHeight,
+          })}
+        />
+      );
+    else if (isSkeleton)
+      return (
+        <div
+          className={withPrefix("generic-item-skeleton")}
+          data-index={index}
+          data-rkk-column={column?.id}
+        >
+          {renderSkeletonCard?.({ index, column }) || (
+            <CardSkeleton animationType="wave" />
+          )}
+        </div>
+      );
+
+    return (
+      <Card
+        render={render}
+        isDraggable={isCardDraggable(data, isDraggable)}
+        data={data}
+        column={column}
+        index={index}
+        onClick={onCardClick}
+        cardsGap={cardsGap}
+        renderGap={renderGap}
+        onCardDndStateChange={onCardDndStateChange}
+        renderCardDragIndicator={renderCardDragIndicator}
+        renderCardDragPreview={renderCardDragPreview}
+      />
+    );
+  };
+
+  return (
+    <div
+      className={wrapperClassName}
+      style={{
+        ...(cardWrapperStyle?.(data, column) || {}),
+      }}
+    >
+      {renderCardContent()}
+    </div>
+  );
+};
+
+export default GenericItem;

package/src/components/GenericItem/_GenericItem.scss

@@ -0,0 +1,4 @@
+@use "./../../global/assets/styles/abstracts/variables" as *;
+
+// .#{$prefix}-generic-item-wrapper {
+// }

package/src/components/GenericItem/_index.scss

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

package/src/components/GenericItem/index.ts

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

package/src/components/Kanban.tsx

@@ -0,0 +1,102 @@
+import { BoardProps } from "./types";
+import {
+  getColumnChildren,
+  getColumnsFromDataSource,
+} from "@/utils/columnsUtils";
+import { withPrefix } from "@/utils/getPrefix";
+import classNames from "classnames";
+import { Column } from "./Column";
+import { forwardRef, useEffect, useRef } from "react";
+import { autoScroller } from "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll";
+import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
+import { KanbanProvider } from "@/context/KanbanContext";
+import mergeRefs from "@/utils/mergeRefs";
+import { handleCardDrop } from "@/global/dnd/dropManager";
+import { getSharedProps } from "@/utils/getSharedProps";
+import ColumnAdder from "./ColumnAdder";
+
+const Kanban = forwardRef<HTMLDivElement, BoardProps>((props, ref) => {
+  const {
+    dataSource,
+    rootStyle = {},
+    rootClassName,
+    onColumnMove,
+    onCardMove,
+    renderColumnWrapper,
+    renderColumnAdder,
+    allowColumnDrag,
+    ...rest
+  } = props;
+
+  const columns = getColumnsFromDataSource(dataSource);
+  const internalRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!internalRef.current) return;
+
+    return combine(
+      monitorForElements({
+        onDragStart({ location }) {
+          autoScroller.start({ input: location.current.input });
+        },
+        onDrag({ location }) {
+          autoScroller.updateInput({ input: location.current.input });
+        },
+        onDrop(args) {
+          autoScroller.stop();
+          handleCardDrop({
+            source: {
+              id: (args.source as any).id || "",
+              data: args.source.data,
+            },
+            location: {
+              current: {
+                dropTargets: args.location.current.dropTargets,
+              },
+            },
+            columns,
+            dataSource,
+            onCardMove,
+            onColumnMove,
+          });
+        },
+      }),
+      autoScrollForElements({
+        element: internalRef.current,
+        canScroll: () => true,
+        getConfiguration: () => ({
+          maxScrollSpeed: "standard",
+        }),
+      }),
+    );
+  }, [columns, dataSource, onCardMove, onColumnMove]);
+
+  const containerClassName = classNames(withPrefix("board"), rootClassName);
+
+  return (
+    <KanbanProvider {...getSharedProps(props)}>
+      <div
+        ref={mergeRefs(ref, internalRef)}
+        className={containerClassName}
+        style={rootStyle}
+      >
+        {columns?.map((column, index) => (
+          <Column
+            key={column.id}
+            index={index}
+            data={column}
+            items={getColumnChildren(column, dataSource)}
+            renderColumnWrapper={renderColumnWrapper}
+            allowColumnDrag={allowColumnDrag}
+            {...rest}
+          />
+        ))}
+        <ColumnAdder renderColumnAdder={renderColumnAdder} />
+      </div>
+    </KanbanProvider>
+  );
+});
+
+export default Kanban;

package/src/components/_Kanban.scss

@@ -0,0 +1,8 @@
+@use "./../global/assets/styles/abstracts/variables" as *;
+
+.#{$prefix}-board {
+  display: flex;
+  overflow: auto;
+  height: 100%;
+  gap: 8px;
+}

package/src/components/_index.scss

@@ -0,0 +1,9 @@
+@forward "./Kanban";
+@forward "./Column";
+@forward "./ColumnHeader";
+@forward "./ColumnContent";
+@forward "./GenericItem";
+@forward "./CardSkeleton";
+@forward "./Card";
+@forward "./DefaultCard";
+@forward "./ColumnAdder";

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from "./types";
+export { default as Kanban } from "./Kanban";

package/src/components/types.ts

@@ -0,0 +1,155 @@
+import { TaskCardState } from "@/global/dnd/useCardDnd";
+import { TColumnState } from "@/global/dnd/useColumnDnd";
+import { CSSProperties, ReactNode } from "react";
+
+export interface DndState {
+  state: TaskCardState | TColumnState;
+  column?: BoardItem;
+  card?: BoardItem;
+}
+
+export interface ScrollEvent {
+  target: {
+    scrollTop: number;
+    scrollHeight: number;
+    clientHeight: number;
+  };
+}
+
+export type CardRenderProps = {
+  data: BoardItem;
+  column: BoardItem;
+  index: number;
+  isDraggable: boolean;
+};
+
+export type ConfigMap = {
+  [type: string]: {
+    render: (props: CardRenderProps) => React.ReactNode;
+    isDraggable?: boolean;
+  };
+};
+
+export interface BoardItem {
+  id: string;
+  title: string;
+  parentId: string | null;
+  children: string[];
+  content?: any;
+  type?: keyof ConfigMap;
+  totalItems?: number;
+  // totalChildrenCount is the total number of children in the column
+  totalChildrenCount: number;
+  // totalItemsCount is the total number of items (real content) in the column
+  totalItemsCount?: number;
+  isDraggable?: boolean;
+}
+
+export interface BoardData {
+  root: BoardItem;
+  [key: string]: BoardItem;
+}
+
+export interface DropColumnParams {
+  columnId: string;
+  fromIndex: number;
+  toIndex: number;
+}
+
+export interface DropCardParams {
+  cardId: string;
+  fromColumnId: string;
+  toColumnId: string;
+  taskAbove: string | null;
+  taskBelow: string | null;
+  position: number;
+}
+
+export interface BoardProps {
+  dataSource: BoardData;
+  configMap: ConfigMap;
+  viewOnly?: boolean;
+  loadMore?: (groupsId: string) => void;
+  renderSkeletonCard?: ({
+    index,
+    column,
+  }: {
+    index: number;
+    column: BoardItem;
+  }) => ReactNode;
+  renderColumnHeader?: (column: BoardItem) => ReactNode;
+  renderCardDragIndicator?: (card: BoardItem, info: any) => ReactNode;
+  renderCardDragPreview?: (card: BoardItem, info: any) => ReactNode;
+  renderColumnDragIndicator?: (
+    column: BoardItem,
+    info: { width: number; height: number; edge: "left" | "right" },
+  ) => ReactNode;
+  renderColumnDragPreview?: (column: BoardItem, info: any) => ReactNode;
+
+  renderListFooter?: (column: BoardItem) => ReactNode;
+  allowListFooter?: (column: BoardItem) => boolean;
+
+  renderColumnAdder?: () => ReactNode;
+  allowColumnAdder?: boolean;
+  allowColumnDrag?: boolean;
+
+  renderColumnWrapper?: (
+    column: BoardItem,
+    {
+      children,
+      className,
+      style,
+    }: { children: ReactNode; className?: string; style?: CSSProperties },
+  ) => ReactNode;
+  columnWrapperStyle?: (column: BoardItem) => CSSProperties;
+  columnHeaderStyle?: (column: BoardItem) => CSSProperties;
+  columnListContentStyle?: (column: BoardItem) => CSSProperties;
+  columnListContentClassName?: (column: BoardItem) => string;
+  columnWrapperClassName?: (column: BoardItem) => string;
+  columnHeaderClassName?: (column: BoardItem) => string;
+  columnClassName?: (column: BoardItem) => string;
+  columnStyle?: (column: BoardItem) => CSSProperties;
+  rootStyle?: CSSProperties;
+  rootClassName?: string;
+  cardWrapperStyle?: (card: BoardItem, column: BoardItem) => CSSProperties;
+  cardWrapperClassName?: string;
+  virtualization?: boolean;
+  cardsGap?: number;
+  // renderGap?: (column: BoardItem) => ReactNode;
+  onScroll?: (e: ScrollEvent, column: BoardItem) => void;
+  onColumnMove?: ({ columnId, fromIndex, toIndex }: DropColumnParams) => void;
+  onCardMove?: ({
+    cardId,
+    fromColumnId,
+    toColumnId,
+    taskAbove,
+    taskBelow,
+    position,
+  }: DropCardParams) => void;
+  renderColumnFooter?: (column: BoardItem) => ReactNode;
+  onColumnClick?: (
+    e: React.MouseEvent<HTMLDivElement>,
+    column: BoardItem,
+  ) => void;
+  onCardClick?: (e: React.MouseEvent<HTMLDivElement>, card: BoardItem) => void;
+  onCardDndStateChange?: (info: DndState) => void;
+  onColumnDndStateChange?: (info: DndState) => void;
+}
+
+export interface DropParams {
+  source: {
+    id: string;
+    data: any;
+  };
+  location: {
+    current: {
+      dropTargets: Array<{
+        data: any;
+      }>;
+    };
+  };
+  columns: BoardItem[];
+  dataSource: BoardData;
+  onCardMove?: BoardProps["onCardMove"];
+  onColumnMove?: BoardProps["onColumnMove"];
+}

package/src/context/KanbanContext.tsx

@@ -0,0 +1,19 @@
+import { BoardProps } from "@/components";
+import { createContext, useContext } from "react";
+
+const KanbanContext = createContext<Partial<BoardProps> | undefined>(undefined);
+
+export const useKanbanContext = () => {
+  const context = useContext(KanbanContext);
+  if (!context) throw new Error("KanbanContext must be used within a provider");
+  return context;
+};
+
+export const KanbanProvider = ({
+  children,
+  ...props
+}: Partial<BoardProps> & { children: React.ReactNode }) => {
+  return (
+    <KanbanContext.Provider value={props}>{children}</KanbanContext.Provider>
+  );
+};

package/src/global/_index.scss

@@ -0,0 +1,3 @@
+@use "./assets/styles/base" as *;
+@use "./assets/styles/abstracts" as *;
+@use "./theme-default.scss" as *;

package/src/global/assets/styles/abstracts/_breakpoints.scss

@@ -0,0 +1,71 @@
+// Small devices
+@mixin sm {
+  @media (min-width: #{map-get($breakpoints, 'small')}) {
+    @content;
+  }
+}
+
+// Medium devices
+@mixin md {
+  @media (min-width: #{map-get($breakpoints, 'medium')}) {
+    @content;
+  }
+}
+
+// Large devices
+@mixin lg {
+  @media (min-width: #{map-get($breakpoints, 'large')}) {
+    @content;
+  }
+}
+
+// Extra large devices
+@mixin xl {
+  @media (min-width: #{map-get($breakpoints, 'xlarge')}) {
+    @content;
+  }
+}
+
+// ++++++++++ MAX WIDTH ++++++++++
+
+// Small devices
+@mixin max-sm {
+  @media (max-width: #{map-get($breakpoints, 'small')}) {
+    @content;
+  }
+}
+
+// Medium devices
+@mixin max-md {
+  @media (max-width: #{map-get($breakpoints, 'medium')}) {
+    @content;
+  }
+}
+
+// Large devices
+@mixin max-lg {
+  @media (max-width: #{map-get($breakpoints, 'large')}) {
+    @content;
+  }
+}
+
+// Extra large devices
+@mixin max-xl {
+  @media (max-width: #{map-get($breakpoints, 'xlarge')}) {
+    @content;
+  }
+}
+
+// Custom devices (min-width)
+@mixin rwd($screen) {
+  @media (min-width: #{$screen}px) {
+    @content;
+  }
+}
+
+// Custom devices (max-width)
+@mixin max-rwd($screen) {
+  @media (max-width: #{$screen}px) {
+    @content;
+  }
+}

package/src/global/assets/styles/abstracts/_colors.scss

@@ -0,0 +1,85 @@
+$light: white;
+
+$main: #d7e7ef;
+
+$info: #1cc3eb;
+$info-50: #ecfdff;
+$info-100: #d0f7fd;
+$info-200: #a6edfb;
+$info-300: #69def7;
+$info-400: #1cc3eb;
+$info-500: #08a8d2;
+$info-600: #0a86b0;
+$info-700: #0f6b8f;
+$info-800: #165774;
+$info-900: #174962;
+$info-950: #092f43;
+
+$success: #4caf50;
+$success-50: #f3faf3;
+$success-100: #e3f5e3;
+$success-200: #c8eac9;
+$success-300: #9dd89f;
+$success-400: #6bbd6e;
+$success-500: #4caf50;
+$success-600: #358438;
+$success-700: #2d6830;
+$success-800: #275429;
+$success-900: #224525;
+$success-950: #0e2510;
+
+$danger: #f04438;
+$danger-50: #fff9f9;
+$danger-100: #ffe3e1;
+$danger-200: #ffccc8;
+$danger-300: #ffa8a2;
+$danger-400: #fc776d;
+$danger-500: #f44336;
+$danger-600: #e22d20;
+$danger-700: #be2217;
+$danger-800: #9d2017;
+$danger-900: #82211a;
+$danger-950: #470c08;
+
+$warning: #ffc008;
+$warning-50: #fffeea;
+$warning-100: #fffbc5;
+$warning-200: #fff785;
+$warning-300: #ffed46;
+$warning-400: #ffde1b;
+$warning-500: #ffc008;
+$warning-600: #e29200;
+$warning-700: #bb6802;
+$warning-800: #985008;
+$warning-900: #7c410b;
+$warning-950: #482100;
+
+$dark: #131f3c;
+$dark-50: #edf8ff;
+$dark-100: #def2ff;
+$dark-200: #c4e5ff;
+$dark-300: #a1d2ff;
+$dark-400: #7bb6fe;
+$dark-500: #5c96f8;
+$dark-600: #3e72ed;
+$dark-700: #305dd2;
+$dark-800: #2a4fa9;
+$dark-900: #2a4785;
+$dark-950: #131f3c;
+
+$secondary: #d6d9e1;
+$secondary-50: #f6f7f9;
+$secondary-100: #f1f2f5;
+$secondary-200: #d6d9e1;
+$secondary-300: #b1b9c8;
+$secondary-400: #8793a9;
+$secondary-500: #68758f;
+$secondary-600: #535e76;
+$secondary-700: #444c60;
+$secondary-800: #3b4151;
+$secondary-900: #343946;
+$secondary-950: #23262e;
+
+$grey: #91939a;
+
+$hover: #d7e7ef;

package/src/global/assets/styles/abstracts/_functions.scss

@@ -0,0 +1,3 @@
+@function rem($pxValue) {
+  @return #{calc($pxValue / 16)}rem;
+}

package/src/global/assets/styles/abstracts/_index.scss

@@ -0,0 +1,5 @@
+@forward "./colors";
+@forward "./breakpoints";
+@forward "./functions";
+@forward "./mixins";
+@forward "./variables";

package/src/global/assets/styles/abstracts/_mixins.scss

@@ -0,0 +1,49 @@
+//Cross browser CSS3 mixins
+
+@mixin box-shadow($left, $top, $radius, $color) {
+  box-shadow: $left $top $radius $color;
+  -webkit-box-shadow: $left $top $radius $color;
+  -moz-box-shadow: $left $top $radius $color;
+}
+
+@mixin transition($property, $duration, $easing: linear) {
+  transition: $property $duration $easing;
+  -webkit-transition: $property $duration $easing;
+  -moz-transition: $property $duration $easing;
+  -ms-transition: $property $duration $easing;
+  -o-transition: $property $duration $easing;
+}
+
+@mixin border-radius($radius) {
+  border-radius: $radius;
+  -webkit-border-radius: $radius;
+  -moz-border-radius: $radius;
+}
+
+@mixin border-radii($topleft, $topright, $bottomright, $bottomleft) {
+  border-top-left-radius: $topleft;
+  border-top-right-radius: $topright;
+  border-bottom-right-radius: $bottomright;
+  border-bottom-left-radius: $bottomleft;
+  -webkit-border-top-left-radius: $topleft;
+  -webkit-border-top-right-radius: $topright;
+  -webkit-border-bottom-right-radius: $bottomright;
+  -webkit-border-bottom-left-radius: $bottomleft;
+  -moz-border-radius-topleft: $topleft;
+  -moz-border-radius-topright: $topright;
+  -moz-border-radius-bottomright: $bottomright;
+  -moz-border-radius-bottomleft: $bottomleft;
+}
+
+@mixin gradient($color1, $color2) {
+  background-color: $color1;
+  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#{$color1}, endColorstr=#{$color2});
+  background-image: -moz-linear-gradient(center top, $color1, $color2);
+  background-image: -webkit-gradient(
+    linear,
+    0% 0%,
+    0% 100%,
+    from($color1),
+    to($color2)
+  );
+}

package/src/global/assets/styles/abstracts/_padding.scss

@@ -0,0 +1 @@
+$padding-level: 30px;

package/src/global/assets/styles/abstracts/_variables.scss

@@ -0,0 +1,8 @@
+$prefix: "rkk";
+
+$breakpoints: (
+  "small": 320px,
+  "medium": 768px,
+  "large": 1024px,
+  "xlarge": 1200px,
+) !default;