chore: update storybook and unit test for OverlayTip component style

.eslintrc.cjs

@@ -305,7 +305,7 @@ module.exports = {
 
   overrides: [
     {
-      files: ['packages/*/src/**/*.{js,ts}'],
+      files: ['packages/*/src/**/*.{js,ts,tsx}'],
       rules: {
         // For more compatibility with lower Node.js versions
         'unicorn/prefer-node-protocol': 'off',

packages/inspector/.storybook/tailwind.css

@@ -39,3 +39,6 @@
     --radius: 0.5rem;
   }
 
+  #storybook-root {
+    padding: 0 !important;
+  }

packages/inspector/package.json

@@ -7,7 +7,8 @@
   "module": "es",
   "types": "es",
   "scripts": {
-    "test": "jest --passWithNoTests",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
     "clean": "rimraf coverage dist es lib build",
     "dev": "storybook dev -p 6006",
     "build:storybook": "storybook build",
@@ -55,11 +56,21 @@
     "react": ">=16.14.0"
   },
   "peerDependenciesMeta": {
-    "@react-dev-inspector/babel-plugin": { "optional": true },
-    "@react-dev-inspector/middleware": { "optional": true },
-    "@react-dev-inspector/umi3-plugin": { "optional": true },
-    "@react-dev-inspector/umi4-plugin": { "optional": true },
-    "@react-dev-inspector/vite-plugin": { "optional": true }
+    "@react-dev-inspector/babel-plugin": {
+      "optional": true
+    },
+    "@react-dev-inspector/middleware": {
+      "optional": true
+    },
+    "@react-dev-inspector/umi3-plugin": {
+      "optional": true
+    },
+    "@react-dev-inspector/umi4-plugin": {
+      "optional": true
+    },
+    "@react-dev-inspector/vite-plugin": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "7.22.15",
@@ -76,16 +87,16 @@
     "@storybook/react": "7.6.6",
     "@storybook/react-vite": "7.6.6",
     "@storybook/testing-library": "0.2.2",
-    "@types/node": "^20.10.1",
+    "@types/node": "16.18.7",
     "@types/react": "18.0.26",
     "@types/react-dev-utils": "9.0.11",
+    "@types/react-dom": "18.0.9",
     "@types/react-reconciler": "0.28.0",
     "@vitejs/plugin-react": "4.0.3",
     "@zthxxx/tsconfig": "1.0.2",
     "autoprefixer": "10.4.14",
     "class-variance-authority": "0.6.1",
     "clsx": "1.2.1",
-    "jest": "29.6.1",
     "npm-run-all": "4.1.5",
     "postcss": "8.4.26",
     "react": "18.2.0",
@@ -94,9 +105,9 @@
     "rxjs": "7.8.1",
     "storybook": "7.6.6",
     "tailwindcss": "3.3.3",
-    "ts-jest": "29.1.1",
     "ts-node": "10.9.1",
     "typescript": "5.3.2",
-    "vite": "4.4.2"
+    "vite": "4.4.2",
+    "vitest": "1.1.1"
   }
 }

packages/inspector/src/Inspector/Overlay/Overlay.stories.tsx

@@ -1,6 +1,14 @@
-
+import assert from 'assert'
 import { useState, useRef, useEffect } from 'react'
-import type { Meta } from '@storybook/react'
+import type { StoryFn, Meta } from '@storybook/react'
+import { clsx } from 'clsx'
+import {
+  fromEvent,
+  map,
+  switchMap,
+  takeUntil,
+  tap,
+} from 'rxjs'
 import {
   Button,
   Card as CardContainer,
@@ -18,7 +26,7 @@ import {
 } from '../utils'
 import {
   getElementDimensions,
-  getNestedBoundingClientRect,
+  getNestedBoundingBox,
 } from './utils'
 import {
   type InspectorOverlay,
@@ -40,8 +48,7 @@ export default {
   title: 'Overlay',
 } satisfies Meta
 
-
-export const OverlayTips = () => {
+export const CornerItems = () => {
   const setup = async () => {
     const tips = document.querySelectorAll('inspector-overlay-tip')
     const rects = document.querySelectorAll('inspector-overlay-rect')
@@ -77,20 +84,44 @@ export const OverlayTips = () => {
         top: (screenHeight - itemSize) / 2,
         left: (screenWidth - itemSize) / 2,
       },
+
+      // Top-Center but outside the space
+      {
+        top: -2 * itemSize,
+        left: (screenWidth - itemSize) / 2,
+      },
+
+      // Bottom-Center but outside the space
+      {
+        top: screenHeight + 2 * itemSize,
+        left: (screenWidth - itemSize) / 2,
+      },
+
+      // Left-Center but outside the space
+      {
+        top: (screenHeight - itemSize) / 2,
+        left: -2 * itemSize,
+      },
+
+      // Right-Center but outside the space
+      {
+        top: (screenHeight - itemSize) / 2,
+        left: screenWidth + 2 * itemSize,
+      },
     ]
 
 
     // Set the positions for each tip
     positions.forEach((position, index) => {
       const rect = rects[index]
       const tip = tips[index]
+      assert(rect)
+      assert(tip)
 
       const boundingRect: Rect = {
         ...position,
         width: itemSize,
         height: itemSize,
-        right: position.left + itemSize,
-        bottom: position.top + itemSize,
       }
 
       const boxSizing: BoxSizing = {
@@ -141,10 +172,136 @@ export const OverlayTips = () => {
 
       <inspector-overlay-rect />
       <inspector-overlay-tip />
+
+      <inspector-overlay-rect />
+      <inspector-overlay-tip />
+
+      <inspector-overlay-rect />
+      <inspector-overlay-tip />
+
+      <inspector-overlay-rect />
+      <inspector-overlay-tip />
+
+      <inspector-overlay-rect />
+      <inspector-overlay-tip />
     </Inspector>
   )
 }
 
+
+export const MoveableDragItem: StoryFn<{ itemSize: 'normal' | 'full' | 'large' }> = ({ itemSize }) => {
+  const elementRef = useRef<HTMLDivElement>(null)
+  const overlayRef = useRef<InspectorOverlayRect>(null)
+  const overlayTipRef = useRef<InspectorOverlayTip>(null)
+
+  const positionRef = useRef({
+    top: 0,
+    left: 0,
+  })
+  const [position, setPosition] = useState(positionRef.current)
+
+  const mockInspectElement = (element?: HTMLElement | null) => {
+    const overlayRect = overlayRef.current
+    const overlayTip = overlayTipRef.current
+    if (!(element && overlayRect && overlayTip)) return
+
+    const boxSizing = getElementDimensions(element)
+    const boundingRect = getNestedBoundingBox(element)
+
+    overlayRect.updateBound({
+      boundingRect,
+      boxSizing,
+    })
+
+    overlayTip.updateTip({
+      title: 'div in <Card>',
+      info: 'relative/path/to/packages/component.tsx',
+      boundingRect,
+      boxSizing,
+    })
+  }
+
+  useEffect(() => {
+    const element = elementRef.current
+    assert(element)
+    mockInspectElement(element)
+
+    const subscriber = fromEvent<PointerEvent>(element, 'pointerdown').pipe(
+      switchMap(down => {
+        const start = positionRef.current
+        return fromEvent<PointerEvent>(document, 'pointermove').pipe(
+          map(move => ({
+            x: move.clientX - down.clientX,
+            y: move.clientY - down.clientY,
+          })),
+          map(movement => ({
+            left: movement.x + start.left,
+            top: movement.y + start.top,
+          })),
+          takeUntil(fromEvent(document, 'pointerup')),
+        )
+      }),
+      tap(position => {
+        setPosition(position)
+        positionRef.current = position
+        mockInspectElement(element)
+      }),
+    ).subscribe()
+
+    return () => subscriber.unsubscribe()
+  }, [])
+
+  return (
+    <div>
+      <div
+        ref={elementRef}
+        className={clsx(
+          `
+            relative flex justify-center items-center
+            m-4 p-2
+            border border-slate-800 text-black
+            select-none cursor-move
+          `,
+          itemSize === 'normal' && 'w-32 h-32',
+          itemSize === 'full' && 'w-screen h-screen',
+          itemSize === 'large' && 'w-[120vw] h-[120vw]',
+        )}
+        style={position}
+      >
+        <span>({position.top.toFixed(0)}, {position.left.toFixed(0)})</span>
+      </div>
+
+      <inspector-overlay-rect
+        ref={overlayRef}
+        class='pointer-events-none'
+      />
+      <inspector-overlay-tip
+        ref={overlayTipRef}
+      />
+    </div>
+  )
+}
+
+/**
+ * https://storybook.js.org/docs/api/arg-types
+ */
+MoveableDragItem.argTypes = {
+  itemSize: {
+    name: 'Item Size',
+    type: {
+      name: 'enum',
+      value: ['normal', 'full', 'large'],
+      required: true,
+    },
+  },
+}
+
+// https://storybook.js.org/docs/writing-stories/args
+MoveableDragItem.args = {
+  itemSize: 'normal',
+}
+
+
 export const OverlayRectAndTipItems = () => {
   const [active, setActive] = useState(false)
   const contentRef = useRef<HTMLDivElement>(null)
@@ -157,7 +314,7 @@ export const OverlayRectAndTipItems = () => {
     if (!(element && overlayRect && overlayTip)) return
 
     const boxSizing = getElementDimensions(element)
-    const boundingRect = getNestedBoundingClientRect(element)
+    const boundingRect = getNestedBoundingBox(element)
 
     overlayRect.updateBound({
       boundingRect,

packages/inspector/src/Inspector/Overlay/Overlay.tsx

@@ -4,7 +4,7 @@ import { ref, createRef, type Ref } from 'lit/directives/ref.js'
 import {
   registerElement,
   getElementDimensions,
-  getNestedBoundingClientRect,
+  getNestedBoundingBox,
 } from './utils'
 import {
   InspectorOverlayRect,
@@ -58,7 +58,7 @@ export class InspectorOverlay extends LitElement {
     overlayTip: InspectorOverlayTip;
   }) {
     const boxSizing = getElementDimensions(element)
-    const boundingRect = getNestedBoundingClientRect(element)
+    const boundingRect = getNestedBoundingBox(element)
 
     overlayRect.updateBound({
       boundingRect,