base

plane-src/packages/ui/src/sortable/draggable.tsx

@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// @ts-expect-error Due to live server dependencies
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/combine.js";
+import {
+  draggable,
+  dropTargetForElements,
+  // @ts-expect-error Due to live server dependencies
+} from "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/element/adapter.js";
+import {
+  attachClosestEdge,
+  extractClosestEdge,
+  // @ts-expect-error Due to live server dependencies
+} from "@atlaskit/pragmatic-drag-and-drop-hitbox/dist/cjs/closest-edge.js";
+import { isEqual } from "lodash-es";
+import React, { useEffect, useRef, useState } from "react";
+import { DropIndicator } from "../drop-indicator";
+import { cn } from "../utils";
+
+type Props = {
+  children: React.ReactNode;
+  data: any; //@todo make this generic
+  className?: string;
+};
+
+function Draggable({ children, data, className }: Props) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [dragging, setDragging] = useState<boolean>(false); // NEW
+  const [isDraggedOver, setIsDraggedOver] = useState(false);
+
+  const [closestEdge, setClosestEdge] = useState<string | null>(null);
+  useEffect(() => {
+    const el = ref.current;
+
+    if (el) {
+      combine(
+        draggable({
+          element: el,
+          onDragStart: () => setDragging(true), // NEW
+          onDrop: () => setDragging(false), // NEW
+          getInitialData: () => data,
+        }),
+        dropTargetForElements({
+          element: el,
+          // @ts-expect-error Due to live server dependencies
+          onDragEnter: (args) => {
+            setIsDraggedOver(true);
+            setClosestEdge(extractClosestEdge(args.self.data));
+          },
+          onDragLeave: () => setIsDraggedOver(false),
+          onDrop: () => {
+            setIsDraggedOver(false);
+          },
+          // @ts-expect-error Due to live server dependencies
+          canDrop: ({ source }) => !isEqual(source.data, data) && source.data.__uuid__ === data.__uuid__,
+          // @ts-expect-error Due to live server dependencies
+          getData: ({ input, element }) =>
+            attachClosestEdge(data, {
+              input,
+              element,
+              allowedEdges: ["top", "bottom"],
+            }),
+        })
+      );
+    }
+  }, [data]);
+
+  return (
+    <div ref={ref} className={cn(dragging && "opacity-25", className)}>
+      {<DropIndicator isVisible={isDraggedOver && closestEdge === "top"} />}
+      {children}
+      {<DropIndicator isVisible={isDraggedOver && closestEdge === "bottom"} />}
+    </div>
+  );
+}
+
+export { Draggable };

plane-src/packages/ui/src/sortable/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./sortable";
+export * from "./draggable";

plane-src/packages/ui/src/sortable/sortable.stories.tsx

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { Sortable } from "./sortable";
+
+type StoryItem = { id: string; name: string };
+
+const meta: Meta<typeof Sortable<StoryItem>> = {
+  title: "Sortable",
+  component: Sortable,
+  args: {
+    data: [
+      { id: "1", name: "John Doe" },
+      { id: "2", name: "Satish" },
+      { id: "3", name: "Alice" },
+      { id: "4", name: "Bob" },
+      { id: "5", name: "Charlie" },
+    ],
+    render: (item: StoryItem) => (
+      // <Draggable data={item} className="rounded-lg">
+      <div className="border">{item.name}</div>
+      // </Draggable>
+    ),
+    onChange: (data) => console.log(data.map(({ id }) => id)),
+    keyExtractor: (item) => item.id,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

plane-src/packages/ui/src/sortable/sortable.tsx

@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// @ts-expect-error Due to live server dependencies
+import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/element/adapter.js";
+import React, { Fragment, useEffect, useMemo } from "react";
+import { Draggable } from "./draggable";
+
+type TEnhancedData<T> = T & { __uuid__?: string };
+
+type Props<T> = {
+  data: TEnhancedData<T>[];
+  render: (item: T, index: number) => React.ReactNode;
+  onChange: (data: T[], movedItem?: T) => void;
+  keyExtractor: (item: T, index: number) => string;
+  containerClassName?: string;
+  id?: string;
+};
+
+const moveItem = <T,>(
+  data: TEnhancedData<T>[],
+  source: TEnhancedData<T>,
+  destination: TEnhancedData<T> & Record<symbol, string>,
+  keyExtractor: (item: T, index: number) => string
+): {
+  newData: T[];
+  movedItem: T | undefined;
+} => {
+  const sourceIndex = data.findIndex((item, index) => keyExtractor(item, index) === keyExtractor(source, 0));
+  if (sourceIndex === -1) return { newData: data, movedItem: undefined };
+
+  const destinationIndex = data.findIndex((item, index) => keyExtractor(item, index) === keyExtractor(destination, 0));
+
+  if (destinationIndex === -1) return { newData: data, movedItem: undefined };
+
+  const symbolKey = Reflect.ownKeys(destination).find((key) => key.toString() === "Symbol(closestEdge)");
+  const position = symbolKey ? destination[symbolKey as symbol] : "bottom"; // Add 'as symbol' to cast symbolKey to symbol
+
+  // Calculate final position before removing source item
+  const finalIndex = position === "bottom" ? destinationIndex + 1 : destinationIndex;
+
+  // Adjust for the fact that we're removing the source item first
+  // If source is before destination, removing it shifts everything back by 1
+  const adjustedDestinationIndex = finalIndex > sourceIndex ? finalIndex - 1 : finalIndex;
+
+  const newData = [...data];
+  const [movedItem] = newData.splice(sourceIndex, 1);
+
+  // Insert at the calculated position (bounds check is implicit in splice)
+  newData.splice(adjustedDestinationIndex, 0, movedItem);
+
+  const { __uuid__: movedItemId, ...movedItemData } = movedItem;
+  return {
+    newData: newData.map((item) => {
+      const { __uuid__: uuid, ...rest } = item;
+      return rest as T;
+    }),
+    movedItem: movedItemData as T,
+  };
+};
+
+export function Sortable<T>({ data, render, onChange, keyExtractor, containerClassName, id }: Props<T>) {
+  useEffect(() => {
+    const unsubscribe = monitorForElements({
+      // @ts-expect-error Due to live server dependencies
+      onDrop({ source, location }) {
+        const destination = location?.current?.dropTargets[0];
+        if (!destination) return;
+        const { newData, movedItem } = moveItem(
+          data,
+          source.data as TEnhancedData<T>,
+          destination.data as TEnhancedData<T> & { closestEdge: string },
+          keyExtractor
+        );
+        onChange(newData, movedItem);
+      },
+    });
+
+    // Clean up the subscription on unmount
+    return () => {
+      if (unsubscribe) unsubscribe();
+    };
+  }, [data, keyExtractor, onChange]);
+
+  const enhancedData = useMemo(() => {
+    const uuid = id ? id : Math.random().toString(36).substring(7);
+    return data.map((item) => ({ ...item, __uuid__: uuid }));
+  }, [data, id]);
+
+  return (
+    <>
+      {data.map((item, index) => (
+        <Draggable
+          key={keyExtractor(enhancedData[index], index)}
+          data={enhancedData[index]}
+          className={containerClassName}
+        >
+          <Fragment>{render(item, index)}</Fragment>
+        </Draggable>
+      ))}
+    </>
+  );
+}
+
+export default Sortable;