refactor(ui): replace headlessui Switch with radix-ui

ui/package.json

@@ -32,6 +32,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.4",
     "@radix-ui/react-select": "^2.1.4",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.2",
     "@reduxjs/toolkit": "^2.5.0",
     "@tanstack/react-table": "^8.20.5",
     "@uiw/codemirror-theme-tokyo-night": "^4.23.6",

ui/src/app/preferences/Preferences.tsx

@@ -1,11 +1,10 @@
-import { Switch } from '@headlessui/react';
+import { Switch } from '~/components/Switch';
 import { Formik } from 'formik';
 import { useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import Select from '~/components/forms/Select';
 import { useTimezone } from '~/data/hooks/timezone';
 import { Theme, Timezone } from '~/types/Preferences';
-import { cls } from '~/utils/helpers';
 import {
   selectTheme,
   selectTimezone,
@@ -60,14 +59,10 @@ export default function Preferences() {
                 }}
               />
             </div>
-            <Switch.Group
-              as="div"
-              className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:pt-5"
-            >
-              <Switch.Label
-                as="span"
+            <div className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:pt-5">
+              <span
                 className="text-sm font-bold text-gray-500"
-                passive
+                id="label-switch-tmz"
               >
                 UTC Timezone
                 <p className="mt-2 text-xs font-normal">
@@ -76,32 +71,19 @@ export default function Preferences() {
                 <p className="mt-2 text-xs font-semibold">
                   {inTimezone(new Date().toISOString())}
                 </p>
-              </Switch.Label>
-              <dd className="mt-1 flex text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+              </span>
+              <dd className="sm:col-span-2 sm:mt-0 sm:text-right">
                 <Switch
                   checked={isUTC}
-                  onChange={() => {
+                  aria-labelledby="label-switch-tmz"
+                  onCheckedChange={() => {
                     dispatch(
                       timezoneChanged(isUTC ? Timezone.LOCAL : Timezone.UTC)
                     );
                   }}
-                  className={cls(
-                    'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-gray-200 transition-colors duration-200 ease-in-out focus:outline-none sm:ml-auto',
-                    { 'bg-violet-400': isUTC }
-                  )}
-                >
-                  <span
-                    aria-hidden="true"
-                    className={cls(
-                      'inline-block h-5 w-5 translate-x-0 transform rounded-full bg-background shadow ring-0 transition duration-200 ease-in-out',
-                      {
-                        'translate-x-5': isUTC
-                      }
-                    )}
-                  />
-                </Switch>
+                />
               </dd>
-            </Switch.Group>
+            </div>
           </div>
         </div>
       </div>

ui/src/components/Switch.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+
+import { cls } from '~/utils/helpers';
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & {
+    className?: string;
+  }
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cls(
+      'border-1 peer my-1 inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cls(
+        'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-1'
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };

ui/src/components/forms/Toggle.tsx

@@ -1,6 +1,5 @@
-import { Switch } from '@headlessui/react';
+import { Switch } from '~/components/Switch';
 import { useField } from 'formik';
-import { cls } from '~/utils/helpers';
 
 type ToggleProps = {
   id: string;
@@ -17,47 +16,29 @@ export default function Toggle(props: ToggleProps) {
   const [field] = useField(props);
 
   return (
-    <Switch.Group as="div" className="flex items-center justify-between">
+    <div className="flex items-center justify-between">
       <span className="flex flex-grow flex-col">
-        <Switch.Label
-          as="span"
+        <span
           className="text-sm font-medium text-gray-900"
-          passive
+          id={'switch-label:' + id}
         >
           {label}
-        </Switch.Label>
+        </span>
         {description && (
-          <Switch.Description as="span" className="text-sm text-gray-500">
-            {description}
-          </Switch.Description>
+          <span className="text-sm text-gray-500">{description}</span>
         )}
       </span>
       <Switch
         disabled={disabled}
         checked={checked}
+        aria-labelledby={'switch-label:' + id}
         id={id}
         {...field}
-        onChange={(e: boolean) => {
+        onCheckedChange={(e: boolean) => {
           onChange && onChange(e);
         }}
-        className={cls(
-          'relative inline-flex h-6 w-11 items-center rounded-full bg-violet-200 hover:cursor-pointer focus:ring-0',
-          {
-            'bg-green-400': checked,
-            'hover:cursor-not-allowed': disabled
-          }
-        )}
-      >
-        <span className="sr-only">Enable</span>
-        <span
-          className={cls(
-            'inline-block h-4 w-4 translate-x-1 transform rounded-full bg-background ring-0 transition',
-            {
-              'translate-x-6': checked
-            }
-          )}
-        />
-      </Switch>
-    </Switch.Group>
+        className="data-[state=checked]:bg-green-400 data-[state=unchecked]:bg-violet-200"
+      />
+    </div>
   );
 }

ui/src/components/ui/table-skeleton.tsx

@@ -5,7 +5,7 @@ const TableSkeleton = () => {
     <>
       <div className="flex items-center justify-between">
         <div className="flex flex-1 items-center justify-between">
-          <Skeleton className="h-8 w-full max-w-60 lg:max-w-md text-xs" />
+          <Skeleton className="h-8 w-full max-w-60 text-xs lg:max-w-md" />
           <Skeleton className="h-8 w-[75px] text-xs" />
         </div>
       </div>