:sparkles feat(day-view): show preview for new events (#1371)

* :sparkles feat(day-view): show preview for new events

- Added `useOpenAgendaEventPreview` and `useOpenEventContextMenu` hooks to manage event previews and context menus.
- Created tests for both hooks to ensure correct functionality when interacting with events.
- Refactored event form handling in `useOpenEventForm` to streamline event creation and editing.
- Introduced `useCloseEventForm` hook to handle closing event forms and resetting drafts.
- Updated `useSaveEventForm` to integrate with the new close event form logic.
- Enhanced utility functions for event handling and focus management.
- Removed unnecessary context providers from `DayViewContent` for cleaner component structure.
- add a re-resizable package

* :sparkles feat: refactor event handling and improve test setups

* fix: update existing event check to return false instead of null

* Update packages/web/src/components/DND/Resizable.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* :bug fix: ensure element scrolls into view before focusing in focusElement function

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: victor-enogwe

packages/web/package.json

@@ -26,6 +26,7 @@
     "mini-css-extract-plugin": "^2.3.0",
     "normalizr": "^3.6.1",
     "posthog-js": "^1.259.0",
+    "re-resizable": "^6.11.2",
     "react": "^18.1.0",
     "react-cmdk": "^1.3.9",
     "react-datepicker": "^4.2.1",

packages/web/src/common/constants/web.constants.ts

@@ -21,6 +21,8 @@ export const ID_SOMEDAY_EVENT_FORM = "Someday Event Form";
 export const ID_EVENT_FORM_ACTION_MENU = "event-action-menu";
 export const ID_SOMEDAY_EVENT_ACTION_MENU = "someday-event-action-menu";
 export const DATA_EVENT_ELEMENT_ID = "data-event-id";
+export const DATA_DRAFT_EVENT = "data-draft-event";
+export const DATA_NEW_DRAFT_EVENT = "data-new-draft-event";
 export const DATA_TASK_ELEMENT_ID = "data-task-id";
 export const ID_CONTEXT_MENU_ITEMS = "context-menu-items";
 export const ID_ADD_TASK_BUTTON = "add-task-button";

packages/web/src/common/context/mouse-position.tsx

@@ -77,7 +77,9 @@ export function getElementAtCursor() {
   return getElementAtPoint(getCursorPosition());
 }
 
-export function isElementInViewport(element: HTMLElement) {
+export function isElementInViewport(
+  element: Pick<Element, "getBoundingClientRect">,
+) {
   const rect = element.getBoundingClientRect();
 
   return (

packages/web/src/common/context/open-at-cursor.tsx

@@ -0,0 +1,80 @@
+import { useCallback, useState } from "react";
+import {
+  OpenChangeReason,
+  Placement,
+  ReferenceType,
+  UseFloatingOptions,
+  autoUpdate,
+  flip,
+  offset,
+  useFloating,
+} from "@floating-ui/react";
+import {
+  closeFloatingAtCursor,
+  useFloatingNodeIdAtCursor,
+  useFloatingPlacementAtCursor,
+  useFloatingReferenceAtCursor,
+  useFloatingStrategyAtCursor,
+} from "@web/common/hooks/useOpenAtCursor";
+import { theme } from "@web/common/styles/theme";
+
+const themeSpacing = parseInt(theme.spacing.xs);
+
+const placements: Placement[] = [
+  "right-start",
+  "bottom-start",
+  "top-start",
+  "left-start",
+];
+
+export function useFloatingAtCursor(
+  onOpenChange?: UseFloatingOptions<ReferenceType>["onOpenChange"],
+): ReturnType<typeof useFloating> {
+  const [open, setOpen] = useState(false);
+  const nodeId = useFloatingNodeIdAtCursor() ?? undefined;
+  const placement = useFloatingPlacementAtCursor();
+  const strategy = useFloatingStrategyAtCursor();
+  const reference = useFloatingReferenceAtCursor();
+
+  const handleOpenChange = useCallback(
+    (open: boolean, event?: Event, reason?: OpenChangeReason) => {
+      onOpenChange?.(open, event, reason);
+
+      if (!open) closeFloatingAtCursor();
+
+      setOpen(open);
+    },
+    [onOpenChange],
+  );
+
+  const floating = useFloating({
+    open,
+    nodeId,
+    placement,
+    strategy,
+    elements: { reference },
+    middleware: [
+      offset(({ rects, placement }) => {
+        switch (placement) {
+          case "bottom":
+          case "top":
+            return -rects.reference.height / 2 - rects.floating.height / 2;
+          default:
+            return themeSpacing;
+        }
+      }),
+      flip(({ placement }) => {
+        return {
+          fallbackPlacements: placements.filter((p) => p !== placement),
+          fallbackStrategy: "bestFit",
+          fallbackAxisSideDirection: "start",
+          crossAxis: placement.includes("-"),
+        };
+      }),
+    ],
+    onOpenChange: handleOpenChange,
+    whileElementsMounted: autoUpdate,
+  });
+
+  return floating;
+}

packages/web/src/common/hooks/useFloatingAtCursor.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from "react";
+import { distinctUntilChanged, share } from "rxjs/operators";
+import { maxGridZIndex$ } from "@web/common/utils/dom/grid-organization.util";
+
+const maxZIndex$ = maxGridZIndex$.pipe(distinctUntilChanged(), share());
+
+export function useGridMaxZIndex() {
+  const [maxZIndex, setMaxZIndex] = useState(maxGridZIndex$.getValue());
+
+  useEffect(() => {
+    const subscription = maxZIndex$.subscribe(setMaxZIndex);
+
+    return () => subscription.unsubscribe();
+  }, []);
+
+  return maxZIndex;
+}

packages/web/src/common/hooks/useGridMaxZIndex.ts

@@ -1,25 +1,90 @@
-import { useEffect } from "react";
-import { UseFloatingOptions } from "@floating-ui/react";
-import {
-  OpenAtCursorContext,
-  openedAtCursorChange$,
-} from "@web/common/context/open-at-cursor";
-import { useMetaContext } from "@web/common/hooks/useMetaContext";
-
-export function useOpenAtCursor({
-  onOpenChange,
-}: Pick<UseFloatingOptions, "onOpenChange"> = {}) {
-  const context = useMetaContext(OpenAtCursorContext, "useOpenAtCursor");
+import { useEffect, useState } from "react";
+import { BehaviorSubject, Observable, distinctUntilChanged, share } from "rxjs";
+import { Placement, Strategy } from "@floating-ui/react";
+
+export enum CursorItem {
+  EventForm = "EventForm",
+  EventPreview = "EventPreview",
+  EventContextMenu = "EventContextMenu",
+}
+
+const nodeId$ = new BehaviorSubject<CursorItem | null>(null);
+const placement$ = new BehaviorSubject<Placement>("right-start");
+const strategy$ = new BehaviorSubject<Strategy>("absolute");
+const reference$ = new BehaviorSubject<Element | null>(null);
+const $nodeId = nodeId$.pipe(distinctUntilChanged(), share());
+const $placement = placement$.pipe(distinctUntilChanged(), share());
+const $strategy = strategy$.pipe(distinctUntilChanged(), share());
+const $reference = reference$.pipe(distinctUntilChanged(), share());
+
+function useValue<T>(
+  subject: BehaviorSubject<T>,
+  sharedSubject: Observable<T>,
+): T {
+  const [value, setValue] = useState<T>(subject.getValue());
 
   useEffect(() => {
-    if (onOpenChange) {
-      const subscription = openedAtCursorChange$.subscribe((args) =>
-        onOpenChange(...args),
-      );
+    const subscription = sharedSubject.subscribe((v) => {
+      setValue(v);
+    });
+
+    return () => subscription.unsubscribe();
+  });
+
+  return value;
+}
+
+export function useFloatingNodeIdAtCursor(): CursorItem | null {
+  return useValue<CursorItem | null>(nodeId$, $nodeId);
+}
+
+export function useFloatingPlacementAtCursor(): Placement {
+  return useValue<Placement>(placement$, $placement);
+}
+
+export function useFloatingStrategyAtCursor(): Strategy {
+  return useValue<Strategy>(strategy$, $strategy);
+}
+
+export function useFloatingReferenceAtCursor(): Element | null {
+  return useValue<Element | null>(reference$, $reference);
+}
+
+export function setFloatingNodeIdAtCursor(nodeId: CursorItem | null) {
+  nodeId$.next(nodeId);
+}
+
+export function setFloatingPlacementAtCursor(placement: Placement) {
+  placement$.next(placement);
+}
+
+export function setFloatingStrategyAtCursor(strategy: Strategy) {
+  strategy$.next(strategy);
+}
 
-      return () => subscription.unsubscribe();
-    }
-  }, [onOpenChange]);
+export function setFloatingReferenceAtCursor(reference: Element | null) {
+  reference$.next(reference);
+}
+
+export function openFloatingAtCursor({
+  nodeId,
+  reference,
+  placement = "right-start",
+  strategy = "absolute",
+}: {
+  nodeId: CursorItem;
+  reference: Element;
+  placement?: Placement;
+  strategy?: Strategy;
+}) {
+  setFloatingNodeIdAtCursor(nodeId);
+  setFloatingPlacementAtCursor(placement);
+  setFloatingStrategyAtCursor(strategy);
+  setFloatingReferenceAtCursor(reference);
+}
 
-  return context;
+export function closeFloatingAtCursor() {
+  setFloatingNodeIdAtCursor(null);
+  setFloatingPlacementAtCursor("right-start");
+  setFloatingReferenceAtCursor(null);
 }