@mbao01/common 0.0.45 → 0.0.47

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/Menu/Menubar/Menubar.tsx

@@ -8,6 +8,7 @@ import type {
   MenubarContentProps,
   MenubarItemProps,
   MenubarLabelProps,
+  MenubarMenuProps,
   MenubarProps,
   MenubarRadioItemProps,
   MenubarSeparatorProps,
@@ -36,6 +37,9 @@ const Menubar = ({ className, ...props }: MenubarProps) => (
 );
 Menubar.displayName = MenubarPrimitive.Root.displayName;
 
+const MenubarMenu = (props: MenubarMenuProps) => <MenubarPrimitive.Menu {...props} />;
+MenubarMenu.displayName = MenubarPrimitive.Menu.displayName;
+
 const MenubarTrigger = forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Trigger>,
   MenubarTriggerProps
@@ -169,7 +173,7 @@ const MenubarShortcut = ({ className, ...props }: MenubarShortcutProps) => {
 };
 MenubarShortcut.displayname = "MenubarShortcut";
 
-Menubar.Menu = MenubarPrimitive.Menu;
+Menubar.Menu = MenubarMenu;
 Menubar.Group = MenubarPrimitive.Group;
 Menubar.Portal = MenubarPrimitive.Portal;
 Menubar.Sub = MenubarPrimitive.Sub;

package/src/components/Menu/Menubar/types.ts

@@ -15,6 +15,8 @@ import {
 
 export type MenubarProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>;
 
+export type MenubarMenuProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Menu>;
+
 export type MenubarTriggerProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger> &
   VariantProps<typeof getMenubarTriggerClasses>;
 

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>
+  );
+};

package/src/components/Widget/Widgets.example.tsx

@@ -0,0 +1,118 @@
+import { useState } from "react";
+import { MoveIcon, TrashIcon } from "@radix-ui/react-icons";
+import { Draggable } from "../DragAndDrop";
+import { useWidgets } from "./hooks/useWidgets/useWidgets";
+import { Widget } from "./Widget";
+import { WidgetsContext } from "./WidgetsContext";
+
+export const WidgetsExample = () => {
+  return (
+    <WidgetsContext
+      initialWidgets={[
+        { id: "A" },
+        { id: "B" },
+        { id: "C" },
+        { id: "D" },
+        { id: "E" },
+        { id: "F" },
+        { id: "G" },
+      ]}
+    >
+      <Widgets />
+    </WidgetsContext>
+  );
+};
+
+const Widgets = () => {
+  const [widgetId, setWidgetId] = useState<string>("");
+  const [insertionIndex, setInsertionIndex] = useState<number>();
+  const { widgets, addWidget, addWidgets, deleteWidget, deleteWidgets, resetWidgets } =
+    useWidgets();
+
+  const widgetIds = widgetId.split(",").map((id) => ({
+    id,
+  }));
+
+  return (
+    <div className="relative h-[calc(100dvh-50px)] border border-base-200 rounded-md p-6 overflow-y-auto">
+      <div className="flex flex-col gap-2 mb-6">
+        <span className="text-sm">Controls:</span>
+        <div className="flex gap-2">
+          <input
+            type="text"
+            placeholder="Enter Widget ID"
+            className="input input-xs input-bordered rounded-md"
+            value={widgetId}
+            onChange={(e) => setWidgetId(e.target.value)}
+          />
+          <input
+            type="number"
+            placeholder="Enter Insertion Index"
+            className="input input-xs input-bordered rounded-md"
+            value={insertionIndex}
+            onChange={(e) => setInsertionIndex(Number(e.target.value))}
+          />
+        </div>
+        <div className="flex gap-2">
+          <button
+            className="btn btn-outline btn-xs btn-success"
+            onClick={() => addWidget(widgetIds[0], insertionIndex)}
+          >
+            Add widget
+          </button>
+          <button
+            className="btn btn-outline btn-xs btn-info"
+            onClick={() => addWidgets(widgetIds, insertionIndex)}
+          >
+            Add widgets
+          </button>
+          <button
+            className="btn btn-outline btn-xs btn-warning"
+            onClick={() => deleteWidget(widgetIds[0])}
+          >
+            Delete widget
+          </button>
+          <button
+            className="btn btn-outline btn-xs btn-error"
+            onClick={() => deleteWidgets(widgetIds)}
+          >
+            Delete widgets
+          </button>
+          <button className="btn btn-outline btn-xs" onClick={() => resetWidgets()}>
+            Reset widgets
+          </button>
+        </div>
+      </div>
+      <div className="grid gap-4 grid-cols-3 w-fit h-fit">
+        {widgets.map((widget) => (
+          <Widget
+            key={widget.id}
+            id={widget.id}
+            actions={({ draggable, deleteWidget }) => (
+              <div className="absolute top-1 right-1 opacity-0 flex gap-1 [&>*]:cursor-pointer [&_svg]:size-4 pointer-events-none transition-opacity duration-300 hover:opacity-100 group-hover:pointer-events-auto">
+                <Draggable.Action
+                  ref={draggable?.ref}
+                  {...draggable?.listeners}
+                  aria-label={`Drag widget ${widget.id}`}
+                  className="transition-all hover:text-primary active:cursor-grabbing"
+                >
+                  <MoveIcon />
+                </Draggable.Action>
+                <Draggable.Action
+                  onClick={deleteWidget}
+                  aria-label={`Delete widget ${widget.id}`}
+                  className="transition-all hover:text-error"
+                >
+                  <TrashIcon />
+                </Draggable.Action>
+              </div>
+            )}
+            className="group flex items-center justify-center w-32 h-32 bg-base-100 border border-primary-content/30 rounded-md text-sm p-2 cursor-default data-[draggable]:shadow data-[draggable-active]:z-20"
+          >
+            {widget.id}
+          </Widget>
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/components/Widget/WidgetsContext.tsx

@@ -0,0 +1,97 @@
+import { useRef, useState } from "react";
+import { closestCenter, DndContext } from "@dnd-kit/core";
+import { arrayMove, SortableContext } from "@dnd-kit/sortable";
+import { InternalWidgetsContext } from "./InternalWidgetsContext";
+import { restrictToElement } from "./modifiers";
+import { Widget, WidgetsContextProps } from "./types";
+
+export const WidgetsContext = ({ children, initialWidgets }: WidgetsContextProps) => {
+  const [activeId, setActiveId] = useState<Widget["id"] | null>(null);
+  const [widgets, setWidgets] = useState<Widget[]>(initialWidgets ?? []);
+  const boundingRef = useRef<HTMLDivElement>(null);
+  const boundingRect = boundingRef.current?.getBoundingClientRect();
+
+  const activeIndex = activeId ? widgets.findIndex((item) => item.id === activeId) : -1;
+
+  const addWidget = (widget: Widget, insertIndex?: number) => {
+    const isValid = Boolean(widget.id);
+    const isExist = widgets.some((w) => w.id === widget.id);
+
+    if (!isExist && isValid) {
+      // if there's no existing widget in the list, then add it at the given index or at the end of the list
+      setWidgets((widgets) => widgets.toSpliced(insertIndex ?? Infinity, 0, widget));
+    }
+  };
+
+  const addWidgets = (_widgets: Widget[], startIndex?: number) => {
+    setWidgets((widgets) => {
+      // filter widgets that do NOT already exist do avoid duplicate IDs
+      const newWidgets = _widgets.filter(
+        (widget) => widget.id && !widgets.some((w) => w.id === widget.id)
+      );
+
+      // insert new widgets at the given start index or at the end of the list
+      return widgets.toSpliced(startIndex ?? Infinity, 0, ...newWidgets);
+    });
+  };
+
+  const deleteWidget = (widget: Widget) => {
+    const widgetIndex = widgets.findIndex((w) => w.id === widget.id);
+
+    if (widgetIndex >= 0) {
+      // if the widget to be deleted exists in the list, then delete it.
+      setWidgets((widgets) => widgets.toSpliced(widgetIndex, 1));
+    }
+  };
+
+  const deleteWidgets = (_widgets: Widget[]) => {
+    setWidgets((widgets) => {
+      // filter widgets that do NOT exist in the deletion list
+      return widgets.filter((widget) => !_widgets.some((w) => w.id === widget.id));
+    });
+  };
+
+  const resetWidgets = () => {
+    setWidgets(initialWidgets ?? []);
+  };
+
+  return (
+    <DndContext
+      modifiers={[restrictToElement(boundingRect)]}
+      collisionDetection={closestCenter}
+      onDragStart={({ active }) => {
+        if (!active) {
+          return;
+        }
+
+        setActiveId(active.id);
+      }}
+      onDragEnd={({ over }) => {
+        setActiveId(null);
+
+        if (over) {
+          const overIndex = widgets.findIndex((item) => item.id === over.id);
+          if (activeIndex !== overIndex) {
+            setWidgets((w) => arrayMove(w, activeIndex, overIndex));
+          }
+        }
+      }}
+      onDragCancel={() => setActiveId(null)}
+    >
+      <SortableContext items={widgets}>
+        <InternalWidgetsContext.Provider
+          value={{
+            widgets,
+            addWidget,
+            addWidgets,
+            deleteWidget,
+            deleteWidgets,
+            resetWidgets,
+          }}
+        >
+          <div ref={boundingRef}>{children}</div>
+        </InternalWidgetsContext.Provider>
+      </SortableContext>
+    </DndContext>
+  );
+};

package/src/components/Widget/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useWidget } from "./useWidget";
+export { useWidgets } from "./useWidgets";

package/src/components/Widget/hooks/useWidget/index.ts

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

package/src/components/Widget/hooks/useWidget/useWidget.ts

@@ -0,0 +1,21 @@
+import { useContext } from "react";
+import { UniqueIdentifier } from "@dnd-kit/core";
+import { InternalWidgetsContext } from "../../InternalWidgetsContext";
+
+export const useWidget = (id: UniqueIdentifier) => {
+  const context = useContext(InternalWidgetsContext);
+
+  if (!context) {
+    throw new Error("useWidget must be used within a <WidgetsContext />");
+  }
+
+  const widget = context.widgets.find((widget) => widget.id === id);
+
+  const deleteWidget = () => {
+    if (widget) {
+      context.deleteWidget(widget);
+    }
+  };
+
+  return { widget, deleteWidget };
+};

package/src/components/Widget/hooks/useWidgets/index.ts

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

package/src/components/Widget/hooks/useWidgets/useWidgets.ts

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { InternalWidgetsContext } from "../../InternalWidgetsContext";
+
+export const useWidgets = () => {
+  const context = useContext(InternalWidgetsContext);
+
+  if (!context) {
+    throw new Error("useWidgets must be used within a <WidgetsContext />");
+  }
+
+  return context;
+};

package/src/components/Widget/index.ts

@@ -0,0 +1,3 @@
+export * from "./hooks";
+export { Widget } from "./Widget";
+export { WidgetsContext } from "./WidgetsContext";

package/src/components/Widget/modifiers/index.ts

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

package/src/components/Widget/modifiers/restrictToElement.ts

@@ -0,0 +1,8 @@
+import { type Modifier } from "@dnd-kit/core";
+import { restrictToParentElement } from "@dnd-kit/modifiers";
+
+export const restrictToElement = (rect: DOMRect | null | undefined) => {
+  const modifier: Modifier = (args) =>
+    restrictToParentElement({ ...args, containerNodeRect: rect ?? null });
+  return modifier;
+};

package/src/components/Widget/types.ts

@@ -0,0 +1,30 @@
+import type { Data, UniqueIdentifier } from "@dnd-kit/core";
+import { type ReactNode } from "react";
+import { type DraggableActionsArgs } from "../DragAndDrop/Draggable/types";
+import { type SortableProps } from "../DragAndDrop/Sortable/types";
+
+export type Widget = Data<{ id: UniqueIdentifier }>;
+
+type WidgetActions = (
+  args: Partial<DraggableActionsArgs> & {
+    deleteWidget: () => void;
+  }
+) => ReactNode;
+
+export type WidgetProps = Omit<SortableProps, "actions"> & {
+  actions?: WidgetActions;
+};
+
+export type WidgetsContextProps = {
+  children?: ReactNode;
+  initialWidgets?: Widget[];
+};
+
+export type InternalWidgetsContextProps = {
+  widgets: Data<{ id: UniqueIdentifier }>[];
+  addWidget: (widget: Widget, insertIndex?: number) => void;
+  addWidgets: (widgets: Widget[], startIndex?: number) => void;
+  deleteWidget: (widget: Widget) => void;
+  deleteWidgets: (widgets: Widget[]) => void;
+  resetWidgets: () => void;
+};

package/src/index.ts

@@ -39,8 +39,10 @@ export * from "./components/Tooltip";
 
 /** composable */
 export * from "./components/AlertDialog";
+export * from "./components/Chart";
 export * from "./components/Command";
 export * from "./components/Dialog";
 export * from "./components/HoverCard";
 export * from "./components/Popover";
 export * from "./components/Slot";
+export * from "./components/Widget";