chore: update package.json with new Atlaskit drag-and-drop dependencies; refactor TypeTag component for improved state management

components/form/field/TypeTag.tsx

@@ -1,19 +1,4 @@
-import { useLocal } from "@/lib/utils/use-local";
-import { Input } from "../../ui/input";
 import { useEffect, useRef, useState } from "react";
-import {
-  useEditor,
-  EditorContent,
-  useCurrentEditor,
-  EditorProvider,
-} from "@tiptap/react";
-import Link from "@tiptap/extension-link";
-import StarterKit from "@tiptap/starter-kit";
-import { Color } from "@tiptap/extension-color";
-import ListItem from "@tiptap/extension-list-item";
-import TextStyle from "@tiptap/extension-text-style";
-import { Popover } from "../../Popover/Popover";
-import { ButtonBetter } from "../../ui/button";
 import get from "lodash.get";
 
 export const TypeTag: React.FC<any> = ({
@@ -31,17 +16,17 @@ export const TypeTag: React.FC<any> = ({
   const [editingIndex, setEditingIndex] = useState<number | null>(null); // Index tag yang sedang diedit
   const [tempValue, setTempValue] = useState<string>(""); // Nilai sementara untuk pengeditan
   const tagRefs = useRef<(HTMLDivElement | null)[]>([]);
-
+  const val = fm?.data?.[name];
   useEffect(() => {
     if (get(fm, `data.[${name}].length`)) {
       setTags(fm.data?.[name]);
     }
-  }, []);
+  }, [val]);
   useEffect(() => {
-    console.log("NEW");
+    console.log("MASUK", tags);
     fm.data[name] = tags;
     fm.render();
-
+    console.log("MASUK");
     if (typeof onChange === "function") {
       onChange(tags);
     }

components/ui/list-drag.tsx

@@ -0,0 +1,503 @@
+"use client";
+import {
+  createContext,
+  FC,
+  Fragment,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import ReactDOM from "react-dom";
+import invariant from "tiny-invariant";
+
+import { triggerPostMoveFlash } from "@atlaskit/pragmatic-drag-and-drop-flourish/trigger-post-move-flash";
+import {
+  attachClosestEdge,
+  type Edge,
+  extractClosestEdge,
+} from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { getReorderDestinationIndex } from "@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index";
+import * as liveRegion from "@atlaskit/pragmatic-drag-and-drop-live-region";
+import { DropIndicator } from "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import {
+  draggable,
+  dropTargetForElements,
+  monitorForElements,
+} from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { pointerOutsideOfPreview } from "@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview";
+import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
+import { reorder } from "@atlaskit/pragmatic-drag-and-drop/reorder";
+import { Box, xcss } from "@atlaskit/primitives";
+import { token } from "@atlaskit/tokens";
+import { cn } from "@/lib/utils";
+import { ButtonBetter } from "./button";
+import { RiDraggable } from "react-icons/ri";
+
+type ItemPosition = "first" | "last" | "middle" | "only";
+
+type CleanupFn = () => void;
+
+type ItemEntry = { itemId: string; element: HTMLElement };
+
+type ListContextValue = {
+  getListLength: () => number;
+  registerItem: (entry: ItemEntry) => CleanupFn;
+  reorderItem: (args: {
+    startIndex: number;
+    indexOfTarget: number;
+    closestEdgeOfTarget: Edge | null;
+  }) => void;
+  instanceId: symbol;
+};
+
+const ListContext = createContext<ListContextValue | null>(null);
+
+function useListContext() {
+  const listContext = useContext(ListContext);
+  invariant(listContext !== null);
+  return listContext;
+}
+
+type Item = {
+  id: string;
+  label: string;
+};
+
+const itemKey = Symbol("item");
+type ItemData = {
+  [itemKey]: true;
+  item: Item;
+  index: number;
+  instanceId: symbol;
+};
+
+function getItemData({
+  item,
+  index,
+  instanceId,
+}: {
+  item: Item;
+  index: number;
+  instanceId: symbol;
+}): ItemData {
+  return {
+    [itemKey]: true,
+    item,
+    index,
+    instanceId,
+  };
+}
+
+function isItemData(data: Record<string | symbol, unknown>): data is ItemData {
+  return data[itemKey] === true;
+}
+
+function getItemPosition({
+  index,
+  items,
+}: {
+  index: number;
+  items: Item[];
+}): ItemPosition {
+  if (items.length === 1) {
+    return "only";
+  }
+
+  if (index === 0) {
+    return "first";
+  }
+
+  if (index === items.length - 1) {
+    return "last";
+  }
+
+  return "middle";
+}
+
+const listItemContainerStyles = xcss({
+  position: "relative",
+  backgroundColor: "elevation.surface",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+});
+
+const listItemStyles = xcss({
+  position: "relative",
+  padding: "space.100",
+});
+
+const listItemDisabledStyles = xcss({ opacity: 0.4 });
+
+type DraggableState =
+  | { type: "idle" }
+  | { type: "preview"; container: HTMLElement }
+  | { type: "dragging" };
+
+const idleState: DraggableState = { type: "idle" };
+const draggingState: DraggableState = { type: "dragging" };
+
+const listItemPreviewStyles = xcss({
+  paddingBlock: "space.050",
+  paddingInline: "space.100",
+  borderRadius: "border.radius.100",
+  backgroundColor: "elevation.surface.overlay",
+  maxWidth: "360px",
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+});
+
+const itemLabelStyles = xcss({
+  flexGrow: 1,
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis",
+  overflow: "hidden",
+});
+
+function ListItem({
+  item,
+  index,
+  position,
+  children,
+  className,
+  classDragBtn,
+}: {
+  item: Item;
+  index: number;
+  position: ItemPosition;
+  children: (data?: any, index?: number) => any;
+  className?: string;
+  classDragBtn?: string;
+}) {
+  const { registerItem, instanceId } = useListContext();
+
+  const ref = useRef<HTMLDivElement>(null);
+  const [closestEdge, setClosestEdge] = useState<Edge | null>(null);
+
+  const dragHandleRef = useRef<HTMLButtonElement>(null);
+
+  const [draggableState, setDraggableState] =
+    useState<DraggableState>(idleState);
+
+  useEffect(() => {
+    const element = ref.current;
+    const dragHandle = dragHandleRef?.current;
+    invariant(element);
+    invariant(dragHandle);
+
+    const data = getItemData({ item, index, instanceId });
+
+    return combine(
+      registerItem({ itemId: item.id, element }),
+      draggable({
+        element: dragHandle,
+        getInitialData: () => data,
+        onGenerateDragPreview({ nativeSetDragImage }) {
+          setCustomNativeDragPreview({
+            nativeSetDragImage,
+            getOffset: pointerOutsideOfPreview({
+              x: token("space.200", "16px"),
+              y: token("space.100", "8px"),
+            }),
+            render({ container }) {
+              setDraggableState({ type: "preview", container });
+
+              return () => setDraggableState(draggingState);
+            },
+          });
+        },
+        onDragStart() {
+          setDraggableState(draggingState);
+        },
+        onDrop() {
+          setDraggableState(idleState);
+        },
+      }),
+      dropTargetForElements({
+        element,
+        canDrop({ source }) {
+          return (
+            isItemData(source.data) && source.data.instanceId === instanceId
+          );
+        },
+        getData({ input }) {
+          return attachClosestEdge(data, {
+            element,
+            input,
+            allowedEdges: ["top", "bottom"],
+          });
+        },
+        onDrag({ self, source }) {
+          const isSource = source.element === element;
+          if (isSource) {
+            setClosestEdge(null);
+            return;
+          }
+
+          const closestEdge = extractClosestEdge(self.data);
+
+          const sourceIndex = source.data.index;
+          invariant(typeof sourceIndex === "number");
+
+          const isItemBeforeSource = index === sourceIndex - 1;
+          const isItemAfterSource = index === sourceIndex + 1;
+
+          const isDropIndicatorHidden =
+            (isItemBeforeSource && closestEdge === "bottom") ||
+            (isItemAfterSource && closestEdge === "top");
+
+          if (isDropIndicatorHidden) {
+            setClosestEdge(null);
+            return;
+          }
+
+          setClosestEdge(closestEdge);
+        },
+        onDragLeave() {
+          setClosestEdge(null);
+        },
+        onDrop() {
+          setClosestEdge(null);
+        },
+      })
+    );
+  }, [instanceId, item, index, registerItem]);
+
+  return (
+    <Fragment>
+      <Box ref={ref} xcss={listItemContainerStyles}>
+        <div
+          className={cn(
+            "group relative flex flex-row items-center gap-x-1 pt-2",
+            className
+          )}
+        >
+          <div
+            className={cn(
+              "drag-grab hidden group-hover:flex absolute top-0",
+              css`
+                left: 50%;
+                transform: translateX(-50%);
+              `
+            )}
+          >
+            <ButtonBetter
+              ref={dragHandleRef}
+              variant={"outline"}
+              className={cn(
+                classDragBtn,
+                "p-0 bg-transparent h-auto shadow-none hover:shadow-none hover:bg-transparent border-none "
+              )}
+            >
+              <RiDraggable className="text-gray-500 rotate-90" />
+            </ButtonBetter>
+          </div>
+          <div className="flex flex-col flex-grow">
+            {typeof children === "function" ? children(item, index) : <></>}
+          </div>
+        </div>
+        {closestEdge && <DropIndicator edge={closestEdge} gap="1px" />}
+      </Box>
+      {draggableState.type === "preview" &&
+        ReactDOM.createPortal(
+          <Box xcss={listItemPreviewStyles}>{item.label}</Box>,
+          draggableState.container
+        )}
+    </Fragment>
+  );
+}
+
+function getItemRegistry() {
+  const registry = new Map<string, HTMLElement>();
+
+  function register({ itemId, element }: ItemEntry) {
+    registry.set(itemId, element);
+
+    return function unregister() {
+      registry.delete(itemId);
+    };
+  }
+
+  function getElement(itemId: string): HTMLElement | null {
+    return registry.get(itemId) ?? null;
+  }
+
+  return { register, getElement };
+}
+
+type ListState = {
+  items: Item[];
+  lastCardMoved: {
+    item: Item;
+    previousIndex: number;
+    currentIndex: number;
+    numberOfItems: number;
+  } | null;
+};
+export const ListBetterDragDrop: FC<{
+  data: any[];
+  onChange: (data: any) => void | Promise<void>;
+  className?: string;
+  classContainer?: string;
+  children: (data?: any, index?: number) => any;
+  classDragBtn?: string;
+}> = ({
+  children,
+  data,
+  onChange,
+  className,
+  classContainer,
+  classDragBtn,
+}) => {
+  const [item, setItem] = useState(data);
+
+  const [{ items, lastCardMoved }, setListState] = useState<ListState>({
+    items: data,
+    lastCardMoved: null,
+  });
+  const [registry] = useState(getItemRegistry);
+
+  // Isolated instances of this component from one another
+  const [instanceId] = useState(() => Symbol("instance-id"));
+
+  const reorderItem = useCallback(
+    ({
+      startIndex,
+      indexOfTarget,
+      closestEdgeOfTarget,
+    }: {
+      startIndex: number;
+      indexOfTarget: number;
+      closestEdgeOfTarget: Edge | null;
+    }) => {
+      const finishIndex = getReorderDestinationIndex({
+        startIndex,
+        closestEdgeOfTarget,
+        indexOfTarget,
+        axis: "vertical",
+      });
+
+      if (finishIndex === startIndex) {
+        // If there would be no change, we skip the update
+        return;
+      }
+      setListState((listState) => {
+        const item = listState.items[startIndex];
+
+        return {
+          items: reorder({
+            list: listState.items,
+            startIndex,
+            finishIndex,
+          }),
+          lastCardMoved: {
+            item,
+            previousIndex: startIndex,
+            currentIndex: finishIndex,
+            numberOfItems: listState.items.length,
+          },
+        };
+      });
+      const moveItem = (fromIndex: any, toIndex: any) => {
+        setItem((prevItems) => {
+          const updatedItems = [...prevItems];
+          const [movedItem] = updatedItems.splice(fromIndex, 1); // Hapus elemen
+          updatedItems.splice(toIndex, 0, movedItem); // Masukkan ke target index
+          return updatedItems;
+        });
+      };
+      // finishIndex === startIndex
+      moveItem(startIndex, finishIndex);
+      onChange(items);
+    },
+    []
+  );
+
+  useEffect(() => {
+    console.log(data);
+    return monitorForElements({
+      canMonitor({ source }) {
+        return isItemData(source.data) && source.data.instanceId === instanceId;
+      },
+      onDrop({ location, source }) {
+        const target = location.current.dropTargets[0];
+        if (!target) {
+          return;
+        }
+
+        const sourceData = source.data;
+        const targetData = target.data;
+        if (!isItemData(sourceData) || !isItemData(targetData)) {
+          return;
+        }
+
+        const indexOfTarget = items.findIndex(
+          (item) => item.id === targetData.item.id
+        );
+        if (indexOfTarget < 0) {
+          return;
+        }
+
+        const closestEdgeOfTarget = extractClosestEdge(targetData);
+
+        reorderItem({
+          startIndex: sourceData.index,
+          indexOfTarget,
+          closestEdgeOfTarget,
+        });
+      },
+    });
+  }, [instanceId, items, reorderItem]);
+
+  // once a drag is finished, we have some post drop actions to take
+  useEffect(() => {
+    if (lastCardMoved === null) {
+      return;
+    }
+
+    const { item, previousIndex, currentIndex, numberOfItems } = lastCardMoved;
+    const element = registry.getElement(item.id);
+    if (element) {
+      triggerPostMoveFlash(element);
+    }
+  }, [lastCardMoved, registry]);
+
+  // cleanup the live region when this component is finished
+  useEffect(() => {
+    return function cleanup() {
+      liveRegion.cleanup();
+    };
+  }, []);
+
+  const getListLength = useCallback(() => items.length, [items.length]);
+
+  const contextValue: ListContextValue = useMemo(() => {
+    return {
+      registerItem: registry.register,
+      reorderItem,
+      instanceId,
+      getListLength,
+    };
+  }, [registry.register, reorderItem, instanceId, getListLength]);
+  if (!items?.length) return <></>;
+  return (
+    <ListContext.Provider value={contextValue}>
+      <div className={cn("flex flex-col gap-y-1 w-full", classContainer)}>
+        {items.map((item, index) => (
+          <ListItem
+            key={item.id}
+            item={item}
+            index={index}
+            position={getItemPosition({ index, items })}
+            children={children}
+            className={className}
+            classDragBtn={classDragBtn}
+          />
+        ))}
+      </div>
+    </ListContext.Provider>
+  );
+};

package.json

@@ -3,6 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop-flourish": "^1.2.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
+    "@atlaskit/pragmatic-drag-and-drop-live-region": "^1.3.0",
+    "@atlaskit/pragmatic-drag-and-drop-react-accessibility": "^1.3.1",
+    "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.2.0",
     "@emotion/css": "^11.13.5",
     "@faker-js/faker": "^9.2.0",
     "@floating-ui/react": "^0.26.28",