docs: use pnpm for website, highlighting updates

floating-ui · Jan 13, 2024 · 77fe748 · 77fe748
1 parent c9c5058
commit 77fe748
Show file tree

Hide file tree

Showing 18 changed files with 2,875 additions and 21,046 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -2,3 +2,4 @@ packages:
   - packages/*
   - extension
   - config
+  - website
diff --git a/website/lib/components/Canvas.js b/website/lib/components/Canvas.js
@@ -1,9 +1,4 @@
-import {
-  computePosition,
-  flip,
-  offset,
-  shift,
-} from '@floating-ui/core';
+import {computePosition, flip, offset, shift} from '@floating-ui/react';
 import {useCallback, useEffect, useRef, useState} from 'react';
 
 const reference = {width: 150, height: 100, x: 5, y: 5};
@@ -15,8 +10,7 @@ function getCanvasData(canvas) {
   return {
     rect,
     ctx,
-    clear: () =>
-      ctx.clearRect(0, 0, canvas.width, canvas.height),
+    clear: () => ctx.clearRect(0, 0, canvas.width, canvas.height),
   };
 }
 
@@ -35,21 +29,12 @@ export function Canvas() {
         getClippingRect: () => ({x: 0, y: 0, width, height}),
       },
       placement: 'top-start',
-      middleware: [
-        offset(5),
-        flip({padding: 5}),
-        shift({padding: 5}),
-      ],
+      middleware: [offset(5), flip({padding: 5}), shift({padding: 5})],
     }).then(({x, y}) => {
       const {ctx} = getCanvasData(canvasRef.current);
 
       ctx.beginPath();
-      ctx.rect(
-        reference.x,
-        reference.y,
-        reference.width,
-        reference.height,
-      );
+      ctx.rect(reference.x, reference.y, reference.width, reference.height);
       ctx.fillStyle = 'royalblue';
       ctx.fill();
 
@@ -68,11 +53,7 @@ export function Canvas() {
 
       ctx.font = '16px Arial';
       ctx.fillStyle = 'white';
-      ctx.fillText(
-        'Floating',
-        x + 100,
-        y + floating.height / 2 + 5,
-      );
+      ctx.fillText('Floating', x + 100, y + floating.height / 2 + 5);
     });
   }, [width, height]);
 
@@ -132,7 +113,7 @@ export function Canvas() {
       }
     }
 
-    function handlePointerUp() {
+    function handlePointerUp(event) {
       const {rect, clear} = getCanvasData(canvasRef.current);
 
       if (
@@ -151,7 +132,7 @@ export function Canvas() {
       isDragging = false;
     }
 
-    function handlePointerMove() {
+    function handlePointerMove(event) {
       if (!isDragging) return;
 
       const {rect, clear} = getCanvasData(canvasRef.current);
@@ -171,15 +152,9 @@ export function Canvas() {
     window.addEventListener('pointermove', handlePointerMove);
 
     return () => {
-      window.removeEventListener(
-        'pointerdown',
-        handlePointerDown,
-      );
+      window.removeEventListener('pointerdown', handlePointerDown);
       window.removeEventListener('pointerup', handlePointerUp);
-      window.removeEventListener(
-        'pointermove',
-        handlePointerMove,
-      );
+      window.removeEventListener('pointermove', handlePointerMove);
     };
   }, [position]);
 

diff --git a/website/lib/components/Chrome.js b/website/lib/components/Chrome.js
@@ -17,10 +17,8 @@ export const Chrome = ({
 }) => {
   const scrollableRef = useRef();
 
-  const scrollableX =
-    scrollable === 'both' || scrollable === 'x';
-  const scrollableY =
-    scrollable === 'both' || scrollable === 'y';
+  const scrollableX = scrollable === 'both' || scrollable === 'x';
+  const scrollableY = scrollable === 'both' || scrollable === 'y';
   const isScrollable = scrollableX || scrollableY;
 
   useIsomorphicLayoutEffect(() => {
@@ -40,10 +38,10 @@ export const Chrome = ({
   return (
     <div
       className={cn(
-        'overflow-hidden rounded-lg border-gray-1000 text-gray-900 [color-scheme:light] dark:border-none',
+        'overflow-hidden rounded-lg text-gray-900 [color-scheme:light] dark:border-none bg-clip-padding',
         {
           shadow,
-          'border border-gray-100': shadow,
+          'border border-black/10 dark:border-gray-700': shadow,
         },
       )}
     >
@@ -73,23 +71,18 @@ export const Chrome = ({
       <div className="will-change-transform">
         <div
           ref={scrollableRef}
-          className={cn(
-            'h-[20rem] overflow-hidden bg-gray-50 p-2',
-            {
-              'grid place-items-center': center,
-              'overflow-y-auto': scrollableY,
-              'overflow-x-auto': scrollableX,
-              'h-[50rem] md:h-[30rem]': tall,
-              relative,
-            },
-          )}
+          className={cn('h-[20rem] overflow-hidden bg-gray-50 p-2', {
+            'grid place-items-center': center,
+            'overflow-y-auto': scrollableY,
+            'overflow-x-auto': scrollableX,
+            'h-[50rem] md:h-[30rem]': tall,
+            relative,
+          })}
         >
           {isScrollable && (
             <div
               className={
-                scrollableX
-                  ? 'w-[180vw] md:w-[75rem] lg:w-[90rem]'
-                  : undefined
+                scrollableX ? 'w-[180vw] md:w-[75rem] lg:w-[90rem]' : undefined
               }
               style={{
                 height: scrollableY ? scrollHeight : 1,
@@ -102,9 +95,7 @@ export const Chrome = ({
           {isScrollable && (
             <div
               className={
-                scrollableX
-                  ? 'w-[180vw] md:w-[75rem] lg:w-[90rem]'
-                  : undefined
+                scrollableX ? 'w-[180vw] md:w-[75rem] lg:w-[90rem]' : undefined
               }
               style={{
                 height: scrollableY ? scrollHeight : 1,

diff --git a/website/lib/components/Home/Select.js b/website/lib/components/Home/Select.js
@@ -1,7 +1,7 @@
 import {
+  FloatingFocusManager,
   autoUpdate,
   flip,
-  FloatingFocusManager,
   offset,
   size,
   useClick,
@@ -95,8 +95,13 @@ export function SelectDemo() {
     },
   });
 
-  const {getReferenceProps, getFloatingProps, getItemProps} =
-    useInteractions([click, dismiss, role, listNav, typeahead]);
+  const {getReferenceProps, getFloatingProps, getItemProps} = useInteractions([
+    click,
+    dismiss,
+    role,
+    listNav,
+    typeahead,
+  ]);
 
   const handleSelect = (index) => {
     setSelectedIndex(index);
@@ -108,9 +113,11 @@ export function SelectDemo() {
 
   return (
     <div className="flex flex-col gap-2">
+      {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
       <label
         className="text-md flex flex-col items-center font-bold"
         id="select-label"
+        onClick={() => refs.domReference.current?.focus()}
       >
         Select balloon color
       </label>
@@ -125,9 +132,7 @@ export function SelectDemo() {
         className="flex w-[10rem] items-center gap-2 rounded bg-gray-100/75"
         {...getReferenceProps()}
       >
-        <ColorSwatch
-          color={selectedItemLabel?.toLocaleLowerCase()}
-        />
+        <ColorSwatch color={selectedItemLabel?.toLocaleLowerCase()} />
         {selectedItemLabel || 'Select...'}
       </Button>
       {isOpen && (
@@ -150,9 +155,7 @@ export function SelectDemo() {
                 }}
                 role="option"
                 tabIndex={i === activeIndex ? 0 : -1}
-                aria-selected={
-                  i === selectedIndex && i === activeIndex
-                }
+                aria-selected={i === selectedIndex && i === activeIndex}
                 className={classNames(
                   'flex cursor-default select-none scroll-my-1 items-center gap-2 rounded p-2 outline-none',
                   {
@@ -173,18 +176,12 @@ export function SelectDemo() {
                     }
 
                     // Only if not using typeahead.
-                    if (
-                      event.key === ' ' &&
-                      !isTypingRef.current
-                    ) {
+                    if (event.key === ' ' && !isTypingRef.current) {
                       event.preventDefault();
                     }
                   },
                   onKeyUp(event) {
-                    if (
-                      event.key === ' ' &&
-                      !isTypingRef.current
-                    ) {
+                    if (event.key === ' ' && !isTypingRef.current) {
                       handleSelect(i);
                     }
                   },
@@ -193,9 +190,7 @@ export function SelectDemo() {
                 <ColorSwatch color={options[i]?.toLowerCase()} />
                 {value}
                 <span aria-hidden className="absolute right-4">
-                  {i === selectedIndex && (
-                    <Check width={20} height={20} />
-                  )}
+                  {i === selectedIndex && <Check width={20} height={20} />}
                 </span>
               </div>
             ))}

diff --git a/website/lib/components/MiddlewareBadge.js b/website/lib/components/MiddlewareBadge.js
@@ -11,18 +11,15 @@ export function MiddlewareBadge({type}) {
 
   switch (type) {
     case 'Visibility Optimizer':
-      badgeColor =
-        'bg-purple-500 dark:bg-purple-200 dark:text-purple-900';
+      badgeColor = 'bg-purple-500 dark:bg-purple-200 dark:text-purple-900';
       icon = <Eye size={16} />;
       break;
     case 'Placement Modifier':
-      badgeColor =
-        'bg-blue-500 dark:bg-blue-200 dark:text-blue-900';
+      badgeColor = 'bg-blue-500 dark:bg-blue-200 dark:text-blue-900';
       icon = <Move size={16} />;
       break;
     case 'Data Provider':
-      badgeColor =
-        'bg-cyan-500 dark:bg-cyan-200 dark:text-cyan-900';
+      badgeColor = 'bg-cyan-500 dark:bg-cyan-200 dark:text-cyan-900';
       icon = <Database size={16} />;
       break;
     default: