Add layout mutation, listeners, and custom events

[jalal246]

• Add playgrounds to the type checking.
• Add custom events instead of the previous approach which depended on emitting events by functions provided by each interactive element. DFlex events has $ prefix.

type DFlexEvents =
  | "$onDragOutContainer"
  | "$onDragOutThreshold"
  | "$onDragOver"
  | "$onDragLeave"
  | "$onLiftUpSiblings"
  | "$onMoveDownSiblings";

Implementation like any other event:

import type { DFlexEvents } from "@dflex/dnd";

const onDFlexEvent = (e: DFlexEvents) => {
 // Do something, or just don't.
};

// Later you can remove the listener with `removeEventListener`
document.addEventListener("$onDragLeave", onDFlexEvent);

• Provide listeners subscription approach to provide a universal state to the interactive applications. You can subscribe anywhere in the app instead of depending on the emitted events from draggable elements. Currently, DFlex supports subscriptions to LayoutState.

interface DFlexLayoutStateEvent {
  type: "layoutState",
  layoutState: "pending" | "ready" | "dragging" | "dragEnd" | "dragCancel";
}

Implementation from anywhere inside the app:

React.useEffect(() => {
  const unsubscribe = store.listeners.subscribe((e) => {
    console.info("new layout state", e);
  }, "layoutState");

  return () => {
    unsubscribe();
  };
}, []);