chore: migrated to biome.

Author: Blankeos

.prettierrc

@@ -0,0 +1,43 @@
+{
+  "lsp": {
+    "biome": {
+      "settings": {
+        "require_config_file": true
+      }
+    }
+  },
+  "languages": {
+    "JavaScript": {
+      "use_on_type_format": false,
+      "formatter": { "language_server": { "name": "biome" } },
+      "code_actions_on_format": {
+        "source.fixAll.biome": true,
+        "source.organizeImports.biome": true
+      }
+    },
+    "TypeScript": {
+      "use_on_type_format": false,
+      "formatter": { "language_server": { "name": "biome" } },
+      "code_actions_on_format": {
+        "source.fixAll.biome": true,
+        "source.organizeImports.biome": true
+      }
+    },
+    "TSX": {
+      "use_on_type_format": false,
+      "formatter": { "language_server": { "name": "biome" } },
+      "code_actions_on_format": {
+        "source.fixAll.biome": true,
+        "source.organizeImports.biome": true
+      }
+    },
+    "CSS": {
+      "use_on_type_format": false,
+      "formatter": { "language_server": { "name": "biome" } },
+      "code_actions_on_format": {
+        "source.fixAll.biome": true,
+        "source.organizeImports.biome": true
+      }
+    }
+  }
+}

.zed/settings.json

@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+  "formatter": {
+    "enabled": true,
+    "formatWithErrors": false,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 100
+  },
+  "files": {
+    "includes": [
+      "**",
+      "!**/dist/**/*",
+      "!**/*.js",
+      "!**/*.cjs",
+      "!**/*.mjs",
+      "!src/route-tree.gen.ts"
+    ]
+  },
+  "linter": {
+    "enabled": true,
+    "domains": {
+      "solid": "recommended"
+    },
+    "rules": {
+      "suspicious": {
+        "noExplicitAny": "off",
+        "noUnknownAtRules": "off",
+        "noAssignInExpressions": "off"
+      },
+      "style": {
+        "noNonNullAssertion": "off"
+      },
+      "a11y": {
+        "useKeyWithClickEvents": "off",
+        "noStaticElementInteractions": "off",
+        "useButtonType": "off",
+        "noSvgWithoutTitle": "off"
+      },
+      "correctness": {
+        "noUnusedVariables": "warn"
+      },
+      "complexity": {
+        "noStaticOnlyClass": "off",
+        "noUselessFragments": "off"
+      },
+      "nursery": {
+        "useSortedClasses": {
+          "fix": "safe",
+          "level": "on",
+          "options": {
+            "attributes": ["classList", ".*Class"],
+            "functions": ["clsx", "cva", "tw", "tw.*"]
+          }
+        }
+      }
+    }
+  },
+  "css": {
+    "parser": {
+      "tailwindDirectives": true
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "trailingCommas": "es5",
+      "semicolons": "asNeeded"
+    }
+  }
+}

biome.jsonc

@@ -1,17 +1,16 @@
-import { clsx } from 'clsx';
+// Tabs
+import { Tabs } from "@kobalte/core/tabs"
+import { clsx } from "clsx"
 import {
+  type ComponentProps,
   children,
-  ComponentProps,
   createSignal,
-  FlowProps,
-  JSX,
+  type FlowProps,
+  type JSX,
   mergeProps,
   Show,
   splitProps,
-} from 'solid-js';
-
-// Tabs
-import { Tabs } from '@kobalte/core/tabs';
+} from "solid-js"
 
 // TODO: Dropdown (use @kobalte)
 // Dropdown
@@ -30,84 +29,84 @@ import { Tabs } from '@kobalte/core/tabs';
 // 	type MenuProps
 // } from '@headlessui/react'
 
-type TabValue = 'preview' | 'code';
+type TabValue = "preview" | "code"
 
 // Switch
-import { Switch } from '@kobalte/core/switch';
+import { Switch } from "@kobalte/core/switch"
 
 // ===========================================================================
 // UI
 // ===========================================================================
 
 export type DemoProps = {
-  ref?: HTMLDivElement;
-  children: JSX.Element;
-  class?: string;
-  defaultValue?: TabValue;
-  code?: JSX.Element;
-  minHeight?: string;
-  title?: JSX.Element;
-};
+  ref?: HTMLDivElement
+  children: JSX.Element
+  class?: string
+  defaultValue?: TabValue
+  code?: JSX.Element
+  minHeight?: string
+  title?: JSX.Element
+}
 
-type Props = DemoProps & { onClick?: () => void };
+type Props = DemoProps & { onClick?: () => void }
 
 function Demo(props: FlowProps<Props>) {
   const _props = mergeProps(
     {
-      defaultValue: 'preview',
-      minHeight: 'min-h-[20rem]',
+      defaultValue: "preview",
+      minHeight: "min-h-[20rem]",
       children: undefined,
       renderTitle: false,
     },
-    props,
-  );
+    props
+  )
 
-  const [knowsToClick, setKnowsToClick] = createSignal(false);
-  const [active, setActive] = createSignal(_props.defaultValue);
+  const [knowsToClick, setKnowsToClick] = createSignal(false)
+  const [active, setActive] = createSignal(_props.defaultValue)
 
   function handleClick() {
-    if (!_props.onClick) return;
+    if (!_props.onClick) return
 
-    setKnowsToClick(true);
-    _props?.onClick?.();
+    setKnowsToClick(true)
+    _props?.onClick?.()
   }
 
   const handleMouseDown: JSX.EventHandler<HTMLElement, MouseEvent> = (event) => {
-    if (!_props.onClick) return;
+    if (!_props.onClick) return
 
     // Prevent selection of text:
     // https://stackoverflow.com/a/43321596
     if (event.detail > 1) {
-      event.preventDefault();
+      event.preventDefault()
     }
-  };
+  }
 
   /** Prevent doublle-render when using it in <Show /> https://github.com/solidjs/solid/issues/2345#issuecomment-2427189199 */
-  const renderedTitle = children(() => _props.title);
+  const renderedTitle = children(() => _props.title)
 
   return (
     <Tabs
       ref={_props.ref}
-      class={clsx(active() === 'code' && 'dark', 'Demo text-primary not-prose relative isolate')} // reset text color if inside prose
+      class={clsx(active() === "code" && "dark", "Demo not-prose relative isolate text-primary")} // reset text color if inside prose
       value={active()}
       onChange={(val) => setActive(val as TabValue)}
       // onValueChange={(val) => setActive(val as TabValue)}
     >
       <Show when={_props.code}>
         {/* <MotionConfig transition={{ layout: { type: 'spring', duration: 0.25, bounce: 0 } }}> */}
-        <Tabs.List class="bg-zinc-150/90 absolute right-3 top-3 z-10 flex gap-1 rounded-full p-1 backdrop-blur-lg dark:bg-black/60">
+        <Tabs.List class="absolute top-3 right-3 z-10 flex gap-1 rounded-full bg-zinc-150/90 p-1 backdrop-blur-lg dark:bg-black/60">
           <Tabs.Trigger
             value="preview"
             class={clsx(
-              active() !== 'preview' && 'hover:transition-[color]',
-              'dark:text-muted hover:text-primary aria-selected:text-primary relative px-2 py-1 text-xs/4 font-medium text-zinc-600',
+              active() !== "preview" && "hover:transition-[color]",
+              "relative px-2 py-1 font-medium text-xs/4 text-zinc-600 hover:text-primary aria-selected:text-primary dark:text-muted"
             )}
           >
-            <Show when={active() === 'preview'}>
+            <Show when={active() === "preview"}>
               {/* // Motion.div */}
               <div
-                class="prefers-dark:!bg-white/15 absolute inset-0 -z-10 size-full bg-white shadow-sm dark:bg-white/25"
-                style={{ 'border-radius': '999' }}
+                class="prefers-dark:!bg-white/15 -z-10 absolute inset-0 size-full bg-white shadow-sm dark:bg-white/25"
+                style={{ "border-radius": "999" }}
                 // layout
                 // layoutId={`${id}active`}
               />
@@ -117,15 +116,15 @@ function Demo(props: FlowProps<Props>) {
           <Tabs.Trigger
             value="code"
             class={clsx(
-              active() !== 'code' && 'hover:transition-[color]',
-              'dark:text-muted hover:text-primary aria-selected:text-primary relative px-2 py-1 text-xs/4 font-medium text-zinc-600',
+              active() !== "code" && "hover:transition-[color]",
+              "relative px-2 py-1 font-medium text-xs/4 text-zinc-600 hover:text-primary aria-selected:text-primary dark:text-muted"
             )}
           >
             <Show when={active() === _props.code}>
               {/* // Motion.div */}
               <div
-                class="prefers-dark:!bg-white/15 absolute inset-0 -z-10 size-full bg-white shadow-sm dark:bg-white/25"
-                style={{ 'border-radius': '999' }}
+                class="prefers-dark:!bg-white/15 -z-10 absolute inset-0 size-full bg-white shadow-sm dark:bg-white/25"
+                style={{ "border-radius": "999" }}
                 // layout
                 // layoutId={`${id}active`}
               />
@@ -139,24 +138,24 @@ function Demo(props: FlowProps<Props>) {
         value="preview"
         class={clsx(
           _props.class,
-          'border-faint relative rounded-lg border data-[state=inactive]:hidden',
+          "relative rounded-lg border border-faint data-[state=inactive]:hidden"
         )}
       >
         <Show when={renderedTitle()}>
-          <div class="absolute left-3 top-3">{renderedTitle()}</div>
+          <div class="absolute top-3 left-3">{renderedTitle()}</div>
         </Show>
 
         <div
-          class={clsx(_props.minHeight, 'flex flex-col items-center justify-center p-5 pb-6')}
+          class={clsx(_props.minHeight, "flex flex-col items-center justify-center p-5 pb-6")}
           onClick={handleClick}
           onMouseDown={handleMouseDown}
         >
           {_props.children}
           {_props?.onClick && (
             <span
               class={clsx(
-                'absolute bottom-5 left-0 w-full text-center text-sm text-zinc-400 transition-opacity duration-200 ease-out',
-                knowsToClick() && 'opacity-0',
+                "absolute bottom-5 left-0 w-full text-center text-sm text-zinc-400 transition-opacity duration-200 ease-out",
+                knowsToClick() && "opacity-0"
               )}
             >
               Click anywhere to change numbers
@@ -168,19 +167,19 @@ function Demo(props: FlowProps<Props>) {
         <Tabs.Content value="code">{_props?.code}</Tabs.Content>«
       </Show>
     </Tabs>
-  );
+  )
 }
 
-export default Demo;
+export default Demo
 
-export function DemoTitle(props: JSX.IntrinsicElements['span'] & { children: string }) {
-  const [_props, other] = splitProps(props, ['class', 'children']);
+export function DemoTitle(props: JSX.IntrinsicElements["span"] & { children: string }) {
+  const [_props, other] = splitProps(props, ["class", "children"])
 
   return (
-    <span {...other} class={clsx(props.class, 'px-2 py-1.5 text-sm')}>
+    <span {...other} class={clsx(props.class, "px-2 py-1.5 text-sm")}>
       {props.children}
     </span>
-  );
+  )
 }
 
 // export function DemoMenu(props: MenuProps) {
@@ -243,19 +242,19 @@ export function DemoTitle(props: JSX.IntrinsicElements['span'] & { children: str
 // }
 
 export function DemoSwitch(props: ComponentProps<typeof Switch>) {
-  const [_props, other] = splitProps(props, ['class', 'children']);
+  const [_props, other] = splitProps(props, ["class", "children"])
 
   return (
     <Switch {...other} class="flex items-center gap-x-2">
       <Switch.Control
         class={clsx(
           props.class,
-          'group relative flex h-6 w-11 cursor-pointer rounded-full bg-zinc-200 p-0.5 transition-colors duration-200 ease-in-out focus:outline-none data-[checked]:bg-zinc-950 data-[focus]:outline-2 data-[focus]:outline-blue-500 dark:bg-zinc-800 dark:data-[checked]:bg-zinc-50',
+          "group relative flex h-6 w-11 cursor-pointer rounded-full bg-zinc-200 p-0.5 transition-colors duration-200 ease-in-out focus:outline-none data-[checked]:bg-zinc-950 data-[focus]:outline-2 data-[focus]:outline-blue-500 dark:bg-zinc-800 dark:data-[checked]:bg-zinc-50"
         )}
       >
         <Switch.Thumb class="spring-bounce-0 spring-duration-200 pointer-events-none inline-block size-5 rounded-full bg-white shadow-lg ring-0 transition-transform group-data-[checked]:translate-x-5 dark:bg-zinc-950" />
       </Switch.Control>
       <Switch.Label class="text-xs">{props.children as any}</Switch.Label>
     </Switch>
-  );
+  )
 }