migrate to biome

ecklf · Aug 13, 2024 · 00d0fdb · 00d0fdb
1 parent 64f3068
commit 00d0fdb
Show file tree

Hide file tree

Showing 41 changed files with 5,846 additions and 2,846 deletions.
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npm run lint
+npm run format
diff --git a/.prettierignore b/.prettierignore
diff --git a/.prettierrc b/.prettierrc
diff --git a/biome.json b/biome.json
@@ -0,0 +1,39 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
+  "formatter": {
+    "enabled": true,
+    "formatWithErrors": false,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineEnding": "lf",
+    "lineWidth": 80,
+    "attributePosition": "auto",
+    "ignore": ["dist/", "coverage/", "**/.next/**", "**/*.yaml"]
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "complexity": {
+        "noForEach": "off"
+      }
+    },
+    "ignore": ["dist/", "coverage/", "**/.next/**", "**/*.yaml"]
+  },
+  "javascript": {
+    "formatter": {
+      "jsxQuoteStyle": "double",
+      "quoteProperties": "asNeeded",
+      "trailingCommas": "es5",
+      "semicolons": "always",
+      "arrowParentheses": "always",
+      "bracketSpacing": true,
+      "bracketSameLine": false,
+      "quoteStyle": "double",
+      "attributePosition": "auto"
+    }
+  }
+}
diff --git a/demo/components/accordion.tsx b/demo/components/accordion.tsx
@@ -25,9 +25,7 @@ const items: AccordionItem[] = [
   },
 ];
 
-interface AccordionProps {}
-
-const Accordion = (props: AccordionProps) => {
+const Accordion = () => {
   return (
     <AccordionPrimitive.Root
       type="single"
@@ -36,7 +34,7 @@ const Accordion = (props: AccordionProps) => {
     >
       {items.map(({ header, content }, i) => (
         <AccordionPrimitive.Item
-          key={`header-${i}`}
+          key={`accordion-header-${header}`}
           value={`item-${i + 1}`}
           className="rounded-lg focus-within:ring focus-within:ring-purple-500 focus-within:ring-opacity-75 focus:outline-none w-full"
         >
@@ -46,7 +44,7 @@ const Accordion = (props: AccordionProps) => {
                 "group",
                 "radix-state-open:rounded-t-lg radix-state-closed:rounded-lg",
                 "focus:outline-none",
-                "inline-flex w-full items-center justify-between bg-white px-4 py-2 text-left dark:bg-gray-800",
+                "inline-flex w-full items-center justify-between bg-white px-4 py-2 text-left dark:bg-gray-800"
               )}
             >
               <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
@@ -55,7 +53,7 @@ const Accordion = (props: AccordionProps) => {
               <ChevronDownIcon
                 className={clsx(
                   "ml-2 h-5 w-5 shrink-0 text-gray-700 ease-in-out dark:text-gray-400",
-                  "group-radix-state-open:rotate-180 group-radix-state-open:duration-300",
+                  "group-radix-state-open:rotate-180 group-radix-state-open:duration-300"
                 )}
               />
             </AccordionPrimitive.Trigger>

diff --git a/demo/components/alert-dialog.tsx b/demo/components/alert-dialog.tsx
@@ -4,10 +4,8 @@ import { clsx } from "clsx";
 import React, { Fragment, useState } from "react";
 import Button from "./shared/button";
 
-interface AlertDialogProps {}
-
-const AlertDialog = (props: AlertDialogProps) => {
-  let [isOpen, setIsOpen] = useState(false);
+const AlertDialog = () => {
+  const [isOpen, setIsOpen] = useState(false);
 
   return (
     <AlertDialogPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>
@@ -46,7 +44,7 @@ const AlertDialog = (props: AlertDialogProps) => {
                 "w-[95vw] max-w-md rounded-lg p-4 md:w-full",
                 "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
                 "bg-white dark:bg-gray-800",
-                "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75",
+                "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
               )}
             >
               <AlertDialogPrimitive.Title className="text-sm font-medium text-gray-900 dark:text-gray-100">
@@ -62,7 +60,7 @@ const AlertDialog = (props: AlertDialogProps) => {
                     "inline-flex select-none justify-center rounded-md px-4 py-2 text-sm font-medium",
                     "bg-white text-gray-900 hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-100 hover:dark:bg-gray-600",
                     "border border-gray-300 dark:border-transparent",
-                    "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75",
+                    "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
                   )}
                 >
                   Cancel
@@ -72,7 +70,7 @@ const AlertDialog = (props: AlertDialogProps) => {
                     "inline-flex select-none justify-center rounded-md px-4 py-2 text-sm font-medium",
                     "bg-purple-600 text-white hover:bg-purple-700 dark:bg-purple-700 dark:text-gray-100 dark:hover:bg-purple-600",
                     "border border-transparent",
-                    "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75",
+                    "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
                   )}
                 >
                   Confirm

diff --git a/demo/components/aspect-ratio.tsx b/demo/components/aspect-ratio.tsx
@@ -2,9 +2,7 @@ import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
 import { clsx } from "clsx";
 import React, { Fragment } from "react";
 
-interface AspectRatioProps {}
-
-const AspectRatio = (props: AspectRatioProps) => {
+const AspectRatio = () => {
   return (
     <Fragment>
       <AspectRatioPrimitive.Root
@@ -19,7 +17,7 @@ const AspectRatio = (props: AspectRatioProps) => {
         <div
           className={clsx(
             "absolute inset-0 bg-gray-600 object-cover group-hover:bg-gray-500",
-            "transition-colors duration-300 ease-in-out",
+            "transition-colors duration-300 ease-in-out"
           )}
         >
           {/* eslint-disable-next-line @next/next/no-img-element */}

diff --git a/demo/components/avatar.tsx b/demo/components/avatar.tsx
@@ -4,8 +4,8 @@ import React, { Fragment } from "react";
 import { getRandomInitials } from "../utils/random";
 
 enum Variant {
-  Circle,
-  Rounded,
+  Circle = 0,
+  Rounded = 1,
 }
 
 type AvatarProps = {
@@ -14,7 +14,7 @@ type AvatarProps = {
   isOnline?: boolean;
 };
 
-let users = [
+const users = [
   "https://images.unsplash.com/photo-1573607217032-18299406d100?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=830&q=80",
   "https://images.unsplash.com/photo-1594089426440-ab4513b4d0d0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80",
   "https://images.unsplash.com/photo-1549237511-6b64e006ce65?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80",
@@ -32,9 +32,9 @@ const Avatar = ({
 
   return (
     <Fragment>
-      {urls.map((src, i) => (
+      {urls.map((src) => (
         <AvatarPrimitive.Root
-          key={`avatar-${i}-{src}`}
+          key={`avatar-${src}`}
           className="relative inline-flex h-10 w-10"
         >
           <AvatarPrimitive.Image
@@ -45,7 +45,7 @@ const Avatar = ({
               {
                 [Variant.Circle]: "rounded-full",
                 [Variant.Rounded]: "rounded",
-              }[variant],
+              }[variant]
             )}
           />
           {isOnline && (
@@ -55,7 +55,7 @@ const Avatar = ({
                 {
                   [Variant.Circle]: "-translate-x-1/2 -translate-y-1/2",
                   [Variant.Rounded]: "",
-                }[variant],
+                }[variant]
               )}
             >
               <span className="block h-2.5 w-2.5 rounded-full bg-green-400" />
@@ -67,7 +67,7 @@ const Avatar = ({
               {
                 [Variant.Circle]: "rounded-full",
                 [Variant.Rounded]: "rounded",
-              }[variant],
+              }[variant]
             )}
             delayMs={600}
           >

diff --git a/demo/components/checkbox.tsx b/demo/components/checkbox.tsx
@@ -4,9 +4,7 @@ import * as LabelPrimitive from "@radix-ui/react-label";
 import { clsx } from "clsx";
 import React from "react";
 
-interface CheckboxProps {}
-
-const Checkbox = (props: CheckboxProps) => {
+const Checkbox = () => {
   return (
     <form className="flex items-center">
       <CheckboxPrimitive.Root
@@ -15,7 +13,7 @@ const Checkbox = (props: CheckboxProps) => {
         className={clsx(
           "flex h-5 w-5 items-center justify-center rounded",
           "radix-state-checked:bg-purple-600 radix-state-unchecked:bg-gray-100 dark:radix-state-unchecked:bg-gray-900",
-          "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75",
+          "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
         )}
       >
         <CheckboxPrimitive.Indicator>

diff --git a/demo/components/collapsible.tsx b/demo/components/collapsible.tsx
@@ -3,9 +3,7 @@ import { PlayIcon, Share2Icon, TriangleRightIcon } from "@radix-ui/react-icons";
 import { clsx } from "clsx";
 import React from "react";
 
-interface CollapsibleProps {}
-
-const Collapsible = (props: CollapsibleProps) => {
+const Collapsible = () => {
   const [isOpen, setIsOpen] = React.useState(true);
 
   return (
@@ -14,21 +12,21 @@ const Collapsible = (props: CollapsibleProps) => {
         className={clsx(
           "group flex w-full select-none items-center justify-between rounded-md px-4 py-2 text-left text-sm font-medium",
           "bg-white text-gray-900 dark:bg-gray-800 dark:text-gray-100",
-          "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75",
+          "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
         )}
       >
         <div>My Playlists</div>
         <TriangleRightIcon className="transform duration-300 ease-in-out group-radix-state-open:rotate-90" />
       </CollapsiblePrimitive.Trigger>
       <CollapsiblePrimitive.Content className="mt-4 flex flex-col space-y-4">
         {["80s Synthwave", "Maximale Konzentration", "高人氣金曲"].map(
-          (title, i) => (
+          (title) => (
             <div
-              key={`collapsible-${title}-${i}`}
+              key={`collapsible-${title}`}
               className={clsx(
                 "group",
                 "ml-12 flex select-none items-center justify-between rounded-md px-4 py-2 text-left text-sm font-medium",
-                "bg-white text-gray-900 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-900",
+                "bg-white text-gray-900 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-900"
               )}
             >
               {title}
@@ -37,7 +35,7 @@ const Collapsible = (props: CollapsibleProps) => {
                 <PlayIcon className="cursor-pointer text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200" />
               </div>
             </div>
-          ),
+          )
         )}
       </CollapsiblePrimitive.Content>
     </CollapsiblePrimitive.Root>