@mbao01/common 0.0.45 → 0.0.46

package/dist/types/components/DragAndDrop/Draggable/Draggable.d.ts

@@ -0,0 +1,29 @@
+import { CSSProperties, Ref } from 'react';
+import { DraggableOverlayProps, DraggableProps } from './types';
+declare const Draggable: {
+    ({ id, axis, data, disabled, attributes, style, handle, className, ...props }: DraggableProps): import("react/jsx-runtime").JSX.Element;
+    Root: import('react').ForwardRefExoticComponent<Partial<{
+        axis: import('./types').DraggableAxis;
+        style: CSSProperties;
+        handle: import('./types').DraggableHandleElement;
+        actions: (args: Partial<import('./types').DraggableActionsArgs>) => import('react').ReactNode;
+    }> & import('react').HTMLAttributes<HTMLDivElement> & Partial<{
+        isDragOverlay: boolean;
+        isDragging: boolean;
+        listeners: import('@dnd-kit/core').DraggableSyntheticListeners;
+        transform: import('@dnd-kit/utilities').Transform | null;
+        activatorNodeRef: Ref<HTMLElement>;
+    }> & import('react').RefAttributes<HTMLDivElement>>;
+    Action: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLButtonElement> & {
+        active?: Partial<{
+            fill: string;
+            background: string;
+        }>;
+        cursor?: CSSProperties["cursor"];
+    } & import('react').RefAttributes<HTMLElement>>;
+    Overlay: {
+        ({ axis, dropAnimation, className, ...props }: DraggableOverlayProps): import('react').ReactPortal;
+        displayName: string;
+    };
+};
+export { Draggable };

package/dist/types/components/DragAndDrop/Draggable/Draggable.example.d.ts

@@ -0,0 +1,24 @@
+import { DropAnimation, Modifiers, PointerActivationConstraint } from '@dnd-kit/core';
+import { CSSProperties } from 'react';
+import { DraggableAxis, DraggableHandleElement } from './types';
+type DraggableExampleProps = Partial<{
+    activationConstraint: PointerActivationConstraint;
+    axis: DraggableAxis;
+    handle: DraggableHandleElement;
+    modifiers: Modifiers;
+    buttonStyle: CSSProperties;
+    label: string;
+}>;
+export declare const DraggableExample: ({ activationConstraint, axis, handle, modifiers, label, }: DraggableExampleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DraggableSnapToGridExample: () => import("react/jsx-runtime").JSX.Element;
+type DraggableOverlayExampleProps = Partial<{
+    activationConstraint: PointerActivationConstraint;
+    axis: DraggableAxis;
+    handle: DraggableHandleElement;
+    modifiers: Modifiers;
+    label: string;
+    dragOverlayModifiers: Modifiers;
+    dropAnimation: DropAnimation | null;
+}>;
+export declare const DraggableOverlayExample: ({ axis, dropAnimation, handle, label, modifiers, }: DraggableOverlayExampleProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/DragAndDrop/Draggable/constants.d.ts

@@ -0,0 +1,9 @@
+import { DropAnimation } from '@dnd-kit/core';
+export declare const DROP_ANIMATION_CONFIG: DropAnimation;
+export declare const getDraggableClasses: (props?: ({
+    isDragging?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const getDraggableRootClasses: (props?: ({
+    isDragging?: boolean | null | undefined;
+    isDragOverlay?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/types/components/DragAndDrop/Draggable/index.d.ts

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

package/dist/types/components/DragAndDrop/Draggable/types.d.ts

@@ -0,0 +1,41 @@
+import { DraggableSyntheticListeners, DragOverlayProps, DropAnimation, UseDraggableArguments } from '@dnd-kit/core';
+import { CSSProperties, ReactNode, Ref } from 'react';
+import { Transform } from '@dnd-kit/utilities';
+export declare enum DraggableAxis {
+    All = 0,
+    Vertical = 1,
+    Horizontal = 2
+}
+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;
+export {};

package/dist/types/components/DragAndDrop/Droppable/Droppable.d.ts

@@ -0,0 +1,2 @@
+import { DroppableProps } from './types';
+export declare const Droppable: ({ children, id, disabled, data, resizeObserverConfig, isDragging, className, ...props }: DroppableProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DragAndDrop/Droppable/Droppable.example.d.ts

@@ -0,0 +1,10 @@
+import { Modifiers, UniqueIdentifier } from '@dnd-kit/core';
+type CollisionDetectionType = "rectIntersection" | "closestCenter" | "closestCorners" | "pointerWithin";
+type DroppableExampleProps = {
+    collisionDetection?: CollisionDetectionType;
+    containers?: UniqueIdentifier[];
+    modifiers?: Modifiers;
+};
+export declare const DroppableExample: ({ containers, collisionDetection, modifiers, }: DroppableExampleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CollisionDetectionAlgorithmsDroppableExample: ({ collisionDetection, ...props }: DroppableExampleProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/DragAndDrop/Droppable/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const getDroppableClasses: (props?: ({
+    isDragging?: boolean | null | undefined;
+    isOver?: boolean | null | undefined;
+    isEmpty?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/types/components/DragAndDrop/Droppable/index.d.ts

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

package/dist/types/components/DragAndDrop/Droppable/types.d.ts

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

package/dist/types/components/DragAndDrop/Sortable/Sortable.d.ts

@@ -0,0 +1,2 @@
+import { SortableProps } from './types';
+export declare const Sortable: ({ id, data, style, className, children, disabled, attributes, resizeObserverConfig, animateLayoutChanges, getNewIndex, strategy, transition, ...props }: SortableProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DragAndDrop/Sortable/Sortable.example.d.ts

@@ -0,0 +1,6 @@
+import { SortableProps } from './types';
+type SortableExampleProps = Partial<SortableProps> & {
+    hasDraggableOverlay?: boolean;
+};
+export declare const SortableExample: ({ hasDraggableOverlay, ...props }: SortableExampleProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/DragAndDrop/Sortable/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const getSortableClasses: (props?: ({
+    isDragging?: boolean | null | undefined;
+    isSorting?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/types/components/DragAndDrop/Sortable/index.d.ts

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

package/dist/types/components/DragAndDrop/Sortable/types.d.ts

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

package/dist/types/components/DragAndDrop/index.d.ts

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

package/dist/types/components/Widget/InternalWidgetsContext.d.ts

@@ -0,0 +1,2 @@
+import { InternalWidgetsContextProps } from './types';
+export declare const InternalWidgetsContext: import('react').Context<InternalWidgetsContextProps | null>;

package/dist/types/components/Widget/Widget.d.ts

@@ -0,0 +1,2 @@
+import { WidgetProps } from './types';
+export declare const Widget: ({ id, children, actions, ...props }: WidgetProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/types/components/Widget/Widgets.example.d.ts

@@ -0,0 +1 @@
+export declare const WidgetsExample: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Widget/WidgetsContext.d.ts

@@ -0,0 +1,2 @@
+import { WidgetsContextProps } from './types';
+export declare const WidgetsContext: ({ children, initialWidgets }: WidgetsContextProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Widget/hooks/index.d.ts

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

package/dist/types/components/Widget/hooks/useWidget/index.d.ts

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

package/dist/types/components/Widget/hooks/useWidget/useWidget.d.ts

@@ -0,0 +1,7 @@
+import { UniqueIdentifier } from '@dnd-kit/core';
+export declare const useWidget: (id: UniqueIdentifier) => {
+    widget: import('@dnd-kit/core').Data<{
+        id: UniqueIdentifier;
+    }> | undefined;
+    deleteWidget: () => void;
+};

package/dist/types/components/Widget/hooks/useWidgets/index.d.ts

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

package/dist/types/components/Widget/hooks/useWidgets/useWidgets.d.ts

@@ -0,0 +1 @@
+export declare const useWidgets: () => import('../../types').InternalWidgetsContextProps;

package/dist/types/components/Widget/index.d.ts

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

package/dist/types/components/Widget/modifiers/index.d.ts

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

package/dist/types/components/Widget/modifiers/restrictToElement.d.ts

@@ -0,0 +1,2 @@
+import { Modifier } from '@dnd-kit/core';
+export declare const restrictToElement: (rect: DOMRect | null | undefined) => Modifier;

package/dist/types/components/Widget/types.d.ts

@@ -0,0 +1,28 @@
+import { Data, UniqueIdentifier } from '@dnd-kit/core';
+import { ReactNode } from 'react';
+import { DraggableActionsArgs } from '../DragAndDrop/Draggable/types';
+import { 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;
+};
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.0.45",
+  "version": "0.0.46",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -68,6 +68,10 @@
     "test:watch": "vitest"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/modifiers": "^7.0.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-avatar": "^1.1.0",
@@ -167,5 +171,5 @@
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "097691180db90aaf22c9557d1f2f919246b167c1"
+  "gitHead": "541e3f7084b5e39d30b3ce90140ede22d75e1889"
 }

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

@@ -0,0 +1,147 @@
+import type { DropAnimation, Modifiers, PointerActivationConstraint } from "@dnd-kit/core";
+import type { Coordinates } from "@dnd-kit/utilities";
+import type { CSSProperties } from "react";
+import { useMemo, useState } from "react";
+import {
+  DndContext,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import { createSnapModifier } from "@dnd-kit/modifiers";
+import type { DraggableAxis } from "./types";
+import { Draggable } from "./Draggable";
+import { type DraggableHandleElement } from "./types";
+
+type DraggableExampleProps = Partial<{
+  activationConstraint: PointerActivationConstraint;
+  axis: DraggableAxis;
+  handle: DraggableHandleElement;
+  modifiers: Modifiers;
+  buttonStyle: CSSProperties;
+  label: string;
+}>;
+
+export const DraggableExample = ({
+  activationConstraint,
+  axis,
+  handle,
+  modifiers,
+  label = "Go ahead, drag me.",
+}: DraggableExampleProps) => {
+  const [{ x, y }, setCoordinates] = useState<Coordinates>({ x: 0, y: 0 });
+  const mouseSensor = useSensor(MouseSensor, {
+    activationConstraint,
+  });
+  const touchSensor = useSensor(TouchSensor, {
+    activationConstraint,
+  });
+  const keyboardSensor = useSensor(KeyboardSensor, {});
+  const sensors = useSensors(mouseSensor, touchSensor, keyboardSensor);
+
+  return (
+    <DndContext
+      sensors={sensors}
+      onDragEnd={({ delta }) => {
+        setCoordinates(({ x, y }) => {
+          return {
+            x: x + delta.x,
+            y: y + delta.y,
+          };
+        });
+      }}
+      modifiers={modifiers}
+    >
+      <Draggable
+        id="my-draggable"
+        axis={axis}
+        handle={handle}
+        style={{ top: y, left: x }}
+        className="w-fit border border-base-content rounded-md p-2 flex items-center gap-2"
+      >
+        {label}
+      </Draggable>
+    </DndContext>
+  );
+};
+
+export const DraggableSnapToGridExample = () => {
+  const [gridSize] = useState(30);
+  const buttonStyle = {
+    marginLeft: gridSize - 20 + 1,
+    marginTop: gridSize - 20 + 1,
+    width: gridSize * 8 - 1,
+    height: gridSize * 2 - 1,
+  };
+  const snapToGrid = useMemo(() => createSnapModifier(gridSize), [gridSize]);
+
+  return (
+    <>
+      <DraggableExample
+        label={`Snapping to ${gridSize}px increments`}
+        modifiers={[snapToGrid]}
+        buttonStyle={buttonStyle}
+        key={gridSize}
+      />
+      <div
+        className="fixed top-0 left-0 w-full h-full -z-10 pointer-events-none"
+        style={
+          {
+            "--grid-size": `${gridSize}px`,
+            backgroundSize: "var(--grid-size) var(--grid-size)",
+            backgroundImage: `repeating-linear-gradient(
+              0deg,
+              transparent,
+              transparent calc(var(--grid-size) - 1px),
+              #9999991a calc(var(--grid-size) - 1px),
+              #9999991a var(--grid-size)
+            ),
+            repeating-linear-gradient(
+              -90deg,
+              transparent,
+              transparent calc(var(--grid-size) - 1px),
+              #9999991a calc(var(--grid-size) - 1px),
+              #9999991a var(--grid-size)
+            )`,
+          } as React.CSSProperties
+        }
+      />
+    </>
+  );
+};
+
+type DraggableOverlayExampleProps = Partial<{
+  activationConstraint: PointerActivationConstraint;
+  axis: DraggableAxis;
+  handle: DraggableHandleElement;
+  modifiers: Modifiers;
+  label: string;
+  dragOverlayModifiers: Modifiers;
+  dropAnimation: DropAnimation | null;
+}>;
+
+export const DraggableOverlayExample = ({
+  axis,
+  dropAnimation,
+  handle,
+  label = "Drag me to see the <Draggable.Overlay>",
+  modifiers,
+}: DraggableOverlayExampleProps) => {
+  return (
+    <DndContext modifiers={modifiers}>
+      <div>
+        <Draggable
+          id="my-draggable"
+          axis={axis}
+          handle={handle}
+          className="w-fit border border-base-content rounded-md p-2 flex items-center gap-2 data-[draggable-active]:opacity-0"
+        >
+          {label}
+        </Draggable>
+      </div>
+      <Draggable.Overlay axis={axis} dropAnimation={dropAnimation} />
+    </DndContext>
+  );
+};

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";