@mbao01/common 0.0.44 → 0.0.46

package/src/components/DragAndDrop/Draggable/Draggable.tsx

@@ -0,0 +1,161 @@
+"use client";
+
+import type { CSSProperties, Ref } from "react";
+import { forwardRef } from "react";
+import { createPortal } from "react-dom";
+import { Slot } from "@radix-ui/react-slot";
+import { DragOverlay, useDndContext, useDraggable } from "@dnd-kit/core";
+import type {
+  DraggableActionProps,
+  DraggableOverlayProps,
+  DraggableProps,
+  DraggableRootProps,
+} from "./types";
+import { cn } from "../../../utilities";
+import { DROP_ANIMATION_CONFIG, getDraggableClasses, getDraggableRootClasses } from "./constants";
+
+const Draggable = ({
+  id,
+  axis,
+  data,
+  disabled,
+  attributes,
+  style,
+  handle,
+  className,
+  ...props
+}: DraggableProps) => {
+  const {
+    attributes: draggableAttributes,
+    isDragging,
+    listeners,
+    transform,
+    setNodeRef,
+    setActivatorNodeRef,
+  } = useDraggable({
+    id,
+    data,
+    disabled,
+    attributes,
+  });
+
+  return (
+    <DraggableRoot
+      {...props}
+      {...draggableAttributes}
+      ref={setNodeRef}
+      activatorNodeRef={setActivatorNodeRef}
+      axis={axis}
+      handle={handle}
+      isDragging={isDragging}
+      listeners={listeners}
+      transform={transform}
+      style={style}
+      className={cn(className, getDraggableClasses({ isDragging }))}
+      data-draggable={true}
+      data-draggable-active={isDragging || undefined}
+    />
+  );
+};
+
+const DraggableRoot = forwardRef<HTMLDivElement, DraggableRootProps>(
+  (
+    {
+      handle,
+      actions,
+      activatorNodeRef,
+      className,
+      isDragging,
+      isDragOverlay,
+      listeners,
+      transform,
+      style,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const draggable = { listeners, ref: activatorNodeRef };
+
+    return (
+      <div
+        {...props}
+        {...(actions || handle ? {} : listeners)}
+        ref={ref}
+        style={
+          {
+            ...style,
+            "--translate-x": `${transform?.x ?? 0}px`,
+            "--translate-y": `${transform?.y ?? 0}px`,
+          } as CSSProperties
+        }
+        className={cn(className, getDraggableRootClasses({ isDragging, isDragOverlay }))}
+      >
+        {actions?.({ draggable })}
+        {handle ? (
+          <Slot {...draggable.listeners} ref={draggable.ref}>
+            {handle}
+          </Slot>
+        ) : null}
+        {children}
+      </div>
+    );
+  }
+);
+DraggableRoot.displayName = "DraggableRoot";
+
+const DraggableAction = forwardRef<HTMLElement, DraggableActionProps>(
+  ({ active, children, className, cursor, style, ...props }, ref) => {
+    return (
+      <button
+        ref={ref as Ref<HTMLButtonElement>}
+        {...props}
+        tabIndex={0}
+        className={className}
+        style={
+          {
+            ...style,
+            cursor,
+            "--fill": active?.fill,
+            "--background": active?.background,
+          } as CSSProperties
+        }
+      >
+        {children}
+      </button>
+    );
+  }
+);
+DraggableAction.displayName = "DraggableAction";
+
+const DraggableOverlay = ({
+  axis,
+  dropAnimation = DROP_ANIMATION_CONFIG,
+  className,
+  ...props
+}: DraggableOverlayProps) => {
+  const { active, activeNode } = useDndContext();
+
+  return createPortal(
+    <DragOverlay dropAnimation={dropAnimation} {...props}>
+      {active ? (
+        <DraggableRoot
+          axis={axis}
+          isDragging
+          isDragOverlay
+          className={cn(className, activeNode?.className)}
+        >
+          <div dangerouslySetInnerHTML={{ __html: activeNode?.innerHTML ?? "" }} />
+        </DraggableRoot>
+      ) : null}
+    </DragOverlay>,
+    document.body
+  );
+};
+DraggableOverlay.displayName = "DraggableOverlay";
+
+Draggable.Root = DraggableRoot;
+Draggable.Action = DraggableAction;
+Draggable.Overlay = DraggableOverlay;
+
+export { Draggable };

package/src/components/DragAndDrop/Draggable/constants.ts

@@ -0,0 +1,47 @@
+import type { DropAnimation } from "@dnd-kit/core";
+import { CSS } from "@dnd-kit/utilities";
+import { cva } from "../../../libs";
+
+export const DROP_ANIMATION_CONFIG: DropAnimation = {
+  keyframes({ transform }) {
+    return [
+      { transform: CSS.Transform.toString(transform.initial) },
+      {
+        transform: CSS.Transform.toString({
+          ...transform.final,
+          scaleX: 0.96,
+          scaleY: 0.96,
+        }),
+      },
+    ];
+  },
+  sideEffects({ active }) {
+    active.node.style.opacity = "0";
+
+    return () => {
+      active.node.style.opacity = "";
+    };
+  },
+};
+
+export const getDraggableClasses = cva(
+  "translate-x-[--translate-x] translate-y-[--translate-y] translate-z-0",
+  {
+    variants: {
+      isDragging: {
+        true: "transition-none z-10 cursor-grabbing",
+      },
+    },
+  }
+);
+
+export const getDraggableRootClasses = cva("relative", {
+  variants: {
+    isDragging: {
+      true: "",
+    },
+    isDragOverlay: {
+      true: "",
+    },
+  },
+});

package/src/components/DragAndDrop/Draggable/index.ts

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

package/src/components/DragAndDrop/Draggable/types.ts

@@ -0,0 +1,56 @@
+import type {
+  DraggableSyntheticListeners,
+  DragOverlayProps,
+  DropAnimation,
+  UseDraggableArguments,
+} from "@dnd-kit/core";
+import type { CSSProperties, ReactNode, Ref } from "react";
+import { type Transform } from "@dnd-kit/utilities";
+
+export enum DraggableAxis {
+  All,
+  Vertical,
+  Horizontal,
+}
+
+export type DraggableHandleElement = JSX.Element | null;
+
+export type DraggableActionsArgs = {
+  draggable: {
+    ref: Ref<HTMLElement> | undefined;
+    listeners: DraggableSyntheticListeners;
+  };
+};
+
+type BaseDraggableProps = Partial<{
+  axis: DraggableAxis;
+  style: CSSProperties;
+  handle: DraggableHandleElement;
+  actions: (args: Partial<DraggableActionsArgs>) => ReactNode;
+}> &
+  React.HTMLAttributes<HTMLDivElement>;
+
+export type DraggableProps = BaseDraggableProps & UseDraggableArguments;
+
+export type DraggableRootProps = BaseDraggableProps &
+  Partial<{
+    isDragOverlay: boolean;
+
+    isDragging: boolean;
+    listeners: DraggableSyntheticListeners;
+    transform: Transform | null;
+    activatorNodeRef: Ref<HTMLElement>;
+  }>;
+
+export type DraggableActionProps = React.HTMLAttributes<HTMLButtonElement> & {
+  active?: Partial<{
+    fill: string;
+    background: string;
+  }>;
+  cursor?: CSSProperties["cursor"];
+};
+
+export type DraggableOverlayProps = {
+  axis?: DraggableRootProps["axis"];
+  dropAnimation?: DropAnimation | null;
+} & DragOverlayProps;

package/src/components/DragAndDrop/Droppable/Droppable.example.tsx

@@ -0,0 +1,86 @@
+import type { Modifiers, UniqueIdentifier } from "@dnd-kit/core";
+import { useState } from "react";
+import {
+  closestCenter,
+  closestCorners,
+  DndContext,
+  pointerWithin,
+  rectIntersection,
+} from "@dnd-kit/core";
+import { Draggable } from "../Draggable";
+import { Droppable } from "./Droppable";
+
+type CollisionDetectionType =
+  | "rectIntersection"
+  | "closestCenter"
+  | "closestCorners"
+  | "pointerWithin";
+
+const collisionDetectionAlgorithms = {
+  rectIntersection,
+  closestCenter,
+  closestCorners,
+  pointerWithin,
+};
+
+type DroppableExampleProps = {
+  collisionDetection?: CollisionDetectionType;
+  containers?: UniqueIdentifier[];
+  modifiers?: Modifiers;
+};
+
+export const DroppableExample = ({
+  containers = ["A"],
+  collisionDetection = "rectIntersection",
+  modifiers,
+}: DroppableExampleProps) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const [parentContainerId, setParentContainerId] = useState<UniqueIdentifier | null>(null);
+
+  const item = (
+    <Draggable
+      id="my-draggable"
+      className="w-fit border border-base-content rounded-md p-2 flex items-center gap-2 data-[draggable-active]:opacity-0"
+    >
+      Go ahead, drag me.
+    </Draggable>
+  );
+
+  return (
+    <DndContext
+      collisionDetection={collisionDetectionAlgorithms[collisionDetection]}
+      modifiers={parentContainerId !== null ? undefined : modifiers}
+      onDragStart={() => setIsDragging(true)}
+      onDragEnd={({ over }) => {
+        setParentContainerId(over ? over.id : null);
+        setIsDragging(false);
+      }}
+      onDragCancel={() => setIsDragging(false)}
+    >
+      <div className="flex gap-6 items-center">
+        <div className="my-10 w-52">{parentContainerId === null ? item : null}</div>
+        <div className="grid grid-cols-2 gap-6">
+          {containers.map((id) => (
+            <Droppable
+              key={id}
+              id={id}
+              isDragging={isDragging}
+              className="relative p-6 border border-base-300 rounded-md w-72 h-72 bg-base-200 box-border data-[draggable-active]:opacity-80 data-[draggable-over]:opacity-100 transition-opacity"
+            >
+              <div className="absolute bottom-6">Container {id}</div>
+              {parentContainerId === id ? item : null}
+            </Droppable>
+          ))}
+        </div>
+      </div>
+      <Draggable.Overlay />
+    </DndContext>
+  );
+};
+
+export const CollisionDetectionAlgorithmsDroppableExample = ({
+  collisionDetection,
+  ...props
+}: DroppableExampleProps) => {
+  return <DroppableExample {...props} collisionDetection={collisionDetection} />;
+};

package/src/components/DragAndDrop/Droppable/Droppable.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { useDroppable } from "@dnd-kit/core";
+import { cn } from "../../../utilities";
+import { getDroppableClasses } from "./constants";
+import { type DroppableProps } from "./types";
+
+export const Droppable = ({
+  children,
+  id,
+  disabled,
+  data,
+  resizeObserverConfig,
+  isDragging,
+  className,
+  ...props
+}: DroppableProps) => {
+  const { isOver, setNodeRef } = useDroppable({
+    id,
+    data,
+    disabled,
+    resizeObserverConfig,
+  });
+  const isEmpty = !children || undefined;
+
+  return (
+    <div
+      ref={setNodeRef}
+      className={cn(className, getDroppableClasses({ isDragging, isOver, isEmpty }))}
+      data-empty={isEmpty}
+      data-draggable-over={isOver || undefined}
+      data-draggable-active={isDragging || undefined}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};

package/src/components/DragAndDrop/Droppable/constants.ts

@@ -0,0 +1,15 @@
+import { cva } from "../../../libs";
+
+export const getDroppableClasses = cva("relative", {
+  variants: {
+    isDragging: {
+      true: "",
+    },
+    isOver: {
+      true: "",
+    },
+    isEmpty: {
+      true: "",
+    },
+  },
+});

package/src/components/DragAndDrop/Droppable/index.ts

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

package/src/components/DragAndDrop/Droppable/types.ts

@@ -0,0 +1,7 @@
+import { type UseDroppableArguments } from "@dnd-kit/core";
+
+export type DroppableProps = Omit<React.HTMLAttributes<HTMLDivElement>, "id"> &
+  UseDroppableArguments &
+  Partial<{
+    isDragging: boolean;
+  }>;

package/src/components/DragAndDrop/Sortable/Sortable.example.tsx

@@ -0,0 +1,61 @@
+import type { UniqueIdentifier } from "@dnd-kit/core";
+import { useState } from "react";
+import { DndContext } from "@dnd-kit/core";
+import { arrayMove, SortableContext } from "@dnd-kit/sortable";
+import { cn } from "../../../utilities";
+import { Draggable } from "../Draggable";
+import { Sortable } from "./Sortable";
+import { type SortableProps } from "./types";
+
+type SortableExampleProps = Partial<SortableProps> & { hasDraggableOverlay?: boolean };
+
+export const SortableExample = ({ hasDraggableOverlay, ...props }: SortableExampleProps) => {
+  const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);
+  const [items, setItems] = useState<UniqueIdentifier[]>(["1", "2", "3", "4", "5", "6", "7", "8"]);
+
+  const activeIndex = activeId ? items.indexOf(activeId) : -1;
+
+  return (
+    <DndContext
+      onDragStart={({ active }) => {
+        if (!active) {
+          return;
+        }
+
+        setActiveId(active.id);
+      }}
+      onDragEnd={({ over }) => {
+        setActiveId(null);
+
+        if (over) {
+          const overIndex = items.indexOf(over.id);
+          if (activeIndex !== overIndex) {
+            setItems((items) => arrayMove(items, activeIndex, overIndex));
+          }
+        }
+      }}
+      onDragCancel={() => setActiveId(null)}
+    >
+      <SortableContext items={items}>
+        <div className="grid grid-cols-3 gap-4">
+          {items.map((item) => (
+            <Sortable
+              {...props}
+              key={item}
+              id={item}
+              className={cn(
+                "flex items-center justify-center w-32 h-32 bg-base-100 border border-primary-content/30 rounded-md text-sm p-2 data-[draggable]:shadow data-[draggable-active]:z-20",
+                {
+                  "data-[draggable-active]:opacity-30": hasDraggableOverlay,
+                }
+              )}
+            >
+              {item}
+            </Sortable>
+          ))}
+          {hasDraggableOverlay ? <Draggable.Overlay className="bg-base-100 shadow-lg" /> : null}
+        </div>
+      </SortableContext>
+    </DndContext>
+  );
+};

package/src/components/DragAndDrop/Sortable/Sortable.tsx

@@ -0,0 +1,65 @@
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { cn } from "../../../utilities";
+import { Draggable } from "../Draggable";
+import { getSortableClasses } from "./constants";
+import { type SortableProps } from "./types";
+
+export const Sortable = ({
+  id,
+  data,
+  style,
+  className,
+  children,
+  disabled,
+  attributes,
+  resizeObserverConfig,
+  animateLayoutChanges,
+  getNewIndex,
+  strategy,
+  transition,
+  ...props
+}: SortableProps) => {
+  const {
+    attributes: sortableAttributes,
+    isDragging,
+    isSorting,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition: sortableTransition,
+  } = useSortable({
+    id,
+    data,
+    disabled,
+    attributes,
+    transition,
+    resizeObserverConfig,
+    animateLayoutChanges,
+    getNewIndex,
+    strategy,
+  });
+
+  return (
+    <Draggable.Root
+      {...props}
+      {...sortableAttributes}
+      ref={setNodeRef}
+      activatorNodeRef={setActivatorNodeRef}
+      isDragging={isDragging}
+      listeners={listeners}
+      transform={transform}
+      style={{
+        ...style,
+        transform: CSS.Transform.toString(transform),
+        transition: sortableTransition,
+      }}
+      className={cn(className, getSortableClasses({ isDragging, isSorting }))}
+      data-draggable={true}
+      data-draggable-active={isDragging || undefined}
+    >
+      {children}
+    </Draggable.Root>
+  );
+};

package/src/components/DragAndDrop/Sortable/constants.ts

@@ -0,0 +1,12 @@
+import { cva } from "../../../libs";
+
+export const getSortableClasses = cva("", {
+  variants: {
+    isDragging: {
+      true: "",
+    },
+    isSorting: {
+      true: "",
+    },
+  },
+});

package/src/components/DragAndDrop/Sortable/index.ts

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

package/src/components/DragAndDrop/Sortable/types.ts

@@ -0,0 +1,11 @@
+import type { UseSortableArguments } from "@dnd-kit/sortable";
+import type { CSSProperties } from "react";
+import type { DraggableAxis, DraggableRootProps } from "../Draggable/types";
+
+export type SortableProps = Omit<React.HTMLAttributes<HTMLDivElement>, "id"> &
+  UseSortableArguments &
+  Pick<DraggableRootProps, "handle" | "actions"> &
+  Partial<{
+    axis: DraggableAxis;
+    style: CSSProperties;
+  }>;

package/src/components/DragAndDrop/index.ts

@@ -0,0 +1,3 @@
+export { Draggable } from "./Draggable";
+export { Droppable } from "./Droppable";
+export { Sortable } from "./Sortable";

package/src/components/Widget/InternalWidgetsContext.tsx

@@ -0,0 +1,4 @@
+import { createContext } from "react";
+import { type InternalWidgetsContextProps } from "./types";
+
+export const InternalWidgetsContext = createContext<InternalWidgetsContextProps | null>(null);

package/src/components/Widget/Widget.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { Sortable } from "../DragAndDrop";
+import { useWidget } from "./hooks";
+import { WidgetProps } from "./types";
+
+export const Widget = ({ id, children, actions, ...props }: WidgetProps) => {
+  const { widget, deleteWidget } = useWidget(id);
+
+  if (!widget) return null;
+
+  return (
+    <Sortable id={id} actions={(args) => actions?.({ deleteWidget, ...args })} {...props}>
+      {children}
+    </Sortable>
+  );
+};