chore(playground): replace ESLint with Biome

apps/playground/package.json

@@ -5,10 +5,11 @@
   "type": "module",
   "scripts": {
     "build": "tsc -b && vite build",
-    "check:lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "check:lint": "biome lint .",
     "check:types": "tsc --noEmit --pretty",
     "clean": "del .turbo && del dist && del node_modules",
     "dev": "vite",
+    "lint:fix": "biome lint --write .",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -39,13 +40,8 @@
     "@types/react-dom": "^18.3.0",
     "@types/react-is": "^18.3.0",
     "@types/uuid": "^10.0.0",
-    "@typescript-eslint/eslint-plugin": "^8.2.0",
-    "@typescript-eslint/parser": "^8.2.0",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.20",
-    "eslint": "^8.57.0",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.9",
     "postcss": "^8.4.41",
     "tailwind-merge": "^2.5.2",
     "tailwind-variants": "^0.2.1",

apps/playground/src/components/button.tsx

@@ -1,7 +1,7 @@
 import {
   composeRenderProps,
   Button as RACButton,
-  ButtonProps as RACButtonProps,
+  type ButtonProps as RACButtonProps,
 } from 'react-aria-components'
 import {tv} from 'tailwind-variants'
 import {focusRing} from './utils'

apps/playground/src/components/field.tsx

@@ -1,15 +1,15 @@
 import {
   composeRenderProps,
-  FieldErrorProps,
   Group,
-  GroupProps,
-  InputProps,
-  LabelProps,
   FieldError as RACFieldError,
   Input as RACInput,
   Label as RACLabel,
   Text,
-  TextProps,
+  type FieldErrorProps,
+  type GroupProps,
+  type InputProps,
+  type LabelProps,
+  type TextProps,
 } from 'react-aria-components'
 import {twMerge} from 'tailwind-merge'
 import {tv} from 'tailwind-variants'

apps/playground/src/components/list-box.tsx

@@ -4,9 +4,9 @@ import {
   Collection,
   composeRenderProps,
   Header,
-  ListBoxItemProps,
   Section,
-  SectionProps,
+  type ListBoxItemProps,
+  type SectionProps,
 } from 'react-aria-components'
 import {tv} from 'tailwind-variants'
 

apps/playground/src/components/popover.tsx

@@ -1,11 +1,11 @@
-import React from 'react'
+import type React from 'react'
 import {
   Popover as AriaPopover,
-  PopoverProps as AriaPopoverProps,
   composeRenderProps,
   OverlayArrow,
   PopoverContext,
   useSlottedContext,
+  type PopoverProps as AriaPopoverProps,
 } from 'react-aria-components'
 import {tv} from 'tailwind-variants'
 
@@ -52,6 +52,7 @@ export function Popover({
             viewBox="0 0 12 12"
             className="block fill-white dark:fill-[#1f1f21] forced-colors:fill-[Canvas] stroke-1 stroke-black/10 dark:stroke-zinc-600 forced-colors:stroke-[ButtonBorder] group-placement-bottom:rotate-180 group-placement-left:-rotate-90 group-placement-right:rotate-90"
           >
+            <title>Popover Arrow</title>
             <path d="M0 0 L6 6 L12 0" />
           </svg>
         </OverlayArrow>

apps/playground/src/components/select.tsx

@@ -1,17 +1,21 @@
 import {ChevronDown} from 'lucide-react'
-import React from 'react'
+import type React from 'react'
 import {
   Select as AriaSelect,
-  SelectProps as AriaSelectProps,
   Button,
   ListBox,
-  ListBoxItemProps,
   SelectValue,
-  ValidationResult,
+  type SelectProps as AriaSelectProps,
+  type ListBoxItemProps,
+  type ValidationResult,
 } from 'react-aria-components'
 import {tv} from 'tailwind-variants'
 import {Description, FieldError, Label} from './field'
-import {DropdownItem, DropdownSection, DropdownSectionProps} from './list-box'
+import {
+  DropdownItem,
+  DropdownSection,
+  type DropdownSectionProps,
+} from './list-box'
 import {Popover} from './popover'
 import {composeTailwindRenderProps, focusRing} from './utils'
 

apps/playground/src/components/separator.tsx

@@ -1,4 +1,7 @@
-import {Separator as RACSeparator, SeparatorProps} from 'react-aria-components'
+import {
+  Separator as RACSeparator,
+  type SeparatorProps,
+} from 'react-aria-components'
 import {tv} from 'tailwind-variants'
 
 const styles = tv({

apps/playground/src/components/switch.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
+import type React from 'react'
 import {
   Switch as AriaSwitch,
-  SwitchProps as AriaSwitchProps,
+  type SwitchProps as AriaSwitchProps,
 } from 'react-aria-components'
 import {tv} from 'tailwind-variants'
 import {composeTailwindRenderProps, focusRing} from './utils'

apps/playground/src/components/toggle-button.tsx

@@ -1,7 +1,7 @@
 import {
   composeRenderProps,
   ToggleButton as RACToggleButton,
-  ToggleButtonProps,
+  type ToggleButtonProps,
 } from 'react-aria-components'
 import {tv} from 'tailwind-variants'
 import {focusRing} from './utils'

apps/playground/src/components/toolbar.tsx

@@ -1,7 +1,7 @@
 import {
   composeRenderProps,
   Toolbar as RACToolbar,
-  ToolbarProps,
+  type ToolbarProps,
 } from 'react-aria-components'
 import {tv} from 'tailwind-variants'
 

apps/playground/src/components/tooltip.tsx

@@ -1,9 +1,9 @@
-import React from 'react'
+import type React from 'react'
 import {
   Tooltip as AriaTooltip,
-  TooltipProps as AriaTooltipProps,
   composeRenderProps,
   OverlayArrow,
+  type TooltipProps as AriaTooltipProps,
 } from 'react-aria-components'
 import {tv} from 'tailwind-variants'
 
@@ -39,6 +39,7 @@ export function Tooltip({children, ...props}: TooltipProps) {
           viewBox="0 0 8 8"
           className="fill-slate-700 dark:fill-slate-600 forced-colors:fill-[Canvas] stroke-gray-800 dark:stroke-white/10 forced-colors:stroke-[ButtonBorder] group-placement-bottom:rotate-180 group-placement-left:-rotate-90 group-placement-right:rotate-90"
         >
+          <title>Tooltip Arrow</title>
           <path d="M0 0 L4 4 L8 0" />
         </svg>
       </OverlayArrow>

apps/playground/src/editor-patches-preview.tsx

@@ -1,6 +1,6 @@
 import {omit} from 'remeda'
 import {tv} from 'tailwind-variants'
-import {EditorActorRef} from './playground-machine'
+import type {EditorActorRef} from './playground-machine'
 
 type EditorPatch = ReturnType<
   EditorActorRef['getSnapshot']

apps/playground/src/editor-portable-text-preview.tsx

@@ -1,9 +1,9 @@
-import {PortableTextBlock} from '@sanity/types'
+import type {PortableTextBlock} from '@sanity/types'
 import {useActorRef, useSelector} from '@xstate/react'
 import {useEffect} from 'react'
 import {Spinner} from './components/spinner'
 import {higlightMachine} from './highlight-json-machine'
-import {EditorActorRef} from './playground-machine'
+import type {EditorActorRef} from './playground-machine'
 
 export function EditorPortableTextPreview(props: {
   editorId: EditorActorRef['id']

apps/playground/src/editor.tsx

@@ -1,18 +1,18 @@
 import {
-  BlockDecoratorRenderProps,
-  BlockStyleRenderProps,
-  Patch,
   PortableTextEditable,
   PortableTextEditor,
-  RenderAnnotationFunction,
-  RenderBlockFunction,
-  RenderChildFunction,
-  RenderDecoratorFunction,
-  RenderListItemFunction,
-  RenderPlaceholderFunction,
-  RenderStyleFunction,
+  type BlockDecoratorRenderProps,
+  type BlockStyleRenderProps,
+  type Patch,
+  type RenderAnnotationFunction,
+  type RenderBlockFunction,
+  type RenderChildFunction,
+  type RenderDecoratorFunction,
+  type RenderListItemFunction,
+  type RenderPlaceholderFunction,
+  type RenderStyleFunction,
 } from '@portabletext/editor'
-import {PortableTextBlock} from '@sanity/types'
+import type {PortableTextBlock} from '@sanity/types'
 import {useSelector} from '@xstate/react'
 import {CopyIcon, ImageIcon, TrashIcon} from 'lucide-react'
 import {useEffect, useMemo, useState} from 'react'
@@ -29,7 +29,7 @@ import {Toolbar} from './components/toolbar'
 import {Tooltip} from './components/tooltip'
 import {EditorPatchesPreview} from './editor-patches-preview'
 import {EditorPortableTextPreview} from './editor-portable-text-preview'
-import {EditorActorRef} from './playground-machine'
+import type {EditorActorRef} from './playground-machine'
 import {PortableTextToolbar} from './portable-text-toolbar'
 import {
   CommentAnnotationSchema,

apps/playground/src/editors.tsx

@@ -4,7 +4,7 @@ import {TooltipTrigger} from 'react-aria-components'
 import {Button} from './components/button'
 import {Tooltip} from './components/tooltip'
 import {Editor} from './editor'
-import {PlaygroundActorRef} from './playground-machine'
+import type {PlaygroundActorRef} from './playground-machine'
 import {PortableTextPreview} from './portable-text-preview'
 
 export function Editors(props: {playgroundRef: PlaygroundActorRef}) {

apps/playground/src/generate-color.ts

@@ -1,4 +1,4 @@
-import {COLOR_HUES, ColorTintKey, hues} from '@sanity/color'
+import {COLOR_HUES, hues, type ColorTintKey} from '@sanity/color'
 
 export function* generateColor(tint: ColorTintKey): Generator<string, string> {
   let colorCursor = 0

apps/playground/src/playground-machine.ts

@@ -1,9 +1,8 @@
-import {type MutationChange} from '@portabletext/editor'
-import {applyAll, Patch} from '@portabletext/patches'
-import {PortableTextBlock} from '@sanity/types'
+import type {MutationChange} from '@portabletext/editor'
+import {applyAll, type Patch} from '@portabletext/patches'
+import type {PortableTextBlock} from '@sanity/types'
 import {v4 as uuid} from 'uuid'
 import {
-  ActorRefFrom,
   assertEvent,
   assign,
   emit,
@@ -12,8 +11,9 @@ import {
   sendParent,
   setup,
   stopChild,
+  type ActorRefFrom,
 } from 'xstate'
-import {generateColor} from './generate-color'
+import type {generateColor} from './generate-color'
 import {createKeyGenerator} from './key-generator'
 
 const copyToTextClipboardActor = fromPromise(

apps/playground/src/portable-text-preview.tsx

@@ -2,7 +2,7 @@ import {useActorRef, useSelector} from '@xstate/react'
 import {useEffect} from 'react'
 import {Spinner} from './components/spinner'
 import {higlightMachine} from './highlight-json-machine'
-import {PlaygroundActorRef} from './playground-machine'
+import type {PlaygroundActorRef} from './playground-machine'
 
 export function PortableTextPreview(props: {
   playgroundRef: PlaygroundActorRef

apps/playground/src/portable-text-toolbar.tsx

@@ -1,10 +1,10 @@
 import {
-  EditorSelection,
   PortableTextEditor,
   usePortableTextEditor,
   usePortableTextEditorSelection,
+  type EditorSelection,
 } from '@portabletext/editor'
-import {
+import type {
   BlockDecoratorDefinition,
   BlockListDefinition,
   ObjectSchemaType,

apps/playground/src/selection-preview.tsx

@@ -3,7 +3,7 @@ import {useActorRef, useSelector} from '@xstate/react'
 import {useEffect} from 'react'
 import {Spinner} from './components/spinner'
 import {higlightMachine} from './highlight-json-machine'
-import {EditorActorRef} from './playground-machine'
+import type {EditorActorRef} from './playground-machine'
 
 export function SelectionPreview(props: {editorId: EditorActorRef['id']}) {
   const highlightSelectionActor = useActorRef(higlightMachine, {

apps/playground/tsconfig.app.json

@@ -8,7 +8,6 @@
     "module": "ESNext",
     "skipLibCheck": true,
 
-    /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
@@ -17,7 +16,6 @@
     "noEmit": true,
     "jsx": "react-jsx",
 
-    /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,

biome.json

@@ -25,6 +25,9 @@
       "performance": {
         "noAccumulatingSpread": "off"
       },
+      "security": {
+        "noDangerouslySetInnerHtml": "off"
+      },
       "suspicious": {
         "noConfusingVoidType": "off",
         "noExplicitAny": "off",