♻️ Replace eslint and prettier with biome (#1697)

packages/ui/.eslintrc.js

@@ -1,2 +0,0 @@
-/** @type {import("eslint").Linter.Config} */
-module.exports = require("@rallly/eslint-config/preset")(__dirname);

packages/ui/package.json

@@ -6,7 +6,6 @@
   "types": "src/index.ts",
   "scripts": {
     "ui:add": "npx shadcn-ui@latest add",
-    "lint": "eslint .",
     "type-check": "tsc --noEmit"
   },
   "exports": {
@@ -46,7 +45,6 @@
     "tailwind-merge": "^1.12.0"
   },
   "devDependencies": {
-    "@rallly/eslint-config": "workspace:*",
     "@rallly/tsconfig": "workspace:*",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0"

packages/ui/src/badge.tsx

@@ -1,5 +1,5 @@
 import { type VariantProps, cva } from "class-variance-authority";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "./lib/utils";
 

packages/ui/src/breadcrumb.tsx

@@ -63,7 +63,6 @@ const BreadcrumbPage = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <span
     ref={ref}
-    role="link"
     aria-disabled="true"
     aria-current="page"
     className={cn("text-foreground font-normal", className)}

packages/ui/src/helpers/component-props.ts

@@ -1,7 +1,7 @@
 import type React from "react";
 
 type ComponentPropsAs<
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // biome-ignore lint/suspicious/noExplicitAny: Fix this later
   C extends React.ElementType<any>,
   T extends React.ComponentPropsWithoutRef<C>["as"],
 > = Omit<

packages/ui/src/hooks/use-toast.ts

@@ -91,6 +91,7 @@ export const reducer = (state: State, action: Action): State => {
       if (toastId) {
         addToRemoveQueue(toastId);
       } else {
+        // biome-ignore lint/complexity/noForEach: Fix this later
         state.toasts.forEach((toast) => {
           addToRemoveQueue(toast.id);
         });
@@ -128,6 +129,7 @@ let memoryState: State = { toasts: [] };
 
 function dispatch(action: Action) {
   memoryState = reducer(memoryState, action);
+  // biome-ignore lint/complexity/noForEach: Fix this later
   listeners.forEach((listener) => {
     listener(memoryState);
   });
@@ -167,6 +169,7 @@ function toast({ ...props }: Toast) {
 function useToast() {
   const [state, setState] = React.useState<State>(memoryState);
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: I think this needs to be here
   React.useEffect(() => {
     listeners.push(setState);
     return () => {

packages/ui/src/sidebar.tsx

@@ -102,7 +102,7 @@ const SidebarProvider = React.forwardRef<
       return isMobile
         ? setOpenMobile((open) => !open)
         : setOpen((open) => !open);
-    }, [isMobile, setOpen, setOpenMobile]);
+    }, [isMobile, setOpen]);
 
     // Adds a keyboard shortcut to toggle the sidebar.
     React.useEffect(() => {
@@ -134,15 +134,7 @@ const SidebarProvider = React.forwardRef<
         setOpenMobile,
         toggleSidebar,
       }),
-      [
-        state,
-        open,
-        setOpen,
-        isMobile,
-        openMobile,
-        setOpenMobile,
-        toggleSidebar,
-      ],
+      [state, open, setOpen, isMobile, openMobile, toggleSidebar],
     );
 
     return (

packages/ui/src/skeleton.tsx

@@ -1,4 +1,4 @@
-import { cn } from "./lib/utils"
+import { cn } from "./lib/utils";
 
 function Skeleton({
   className,
@@ -9,7 +9,7 @@ function Skeleton({
       className={cn("animate-pulse rounded-md bg-muted", className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Skeleton }
+export { Skeleton };

packages/ui/src/toaster.tsx

@@ -14,20 +14,16 @@ export function Toaster() {
 
   return (
     <ToastProvider duration={2000}>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
-        return (
-          <Toast key={id} {...props}>
-            <div className="grid gap-1">
-              {title && <ToastTitle>{title}</ToastTitle>}
-              {description && (
-                <ToastDescription>{description}</ToastDescription>
-              )}
-            </div>
-            {action}
-            <ToastClose />
-          </Toast>
-        );
-      })}
+      {toasts.map(({ id, title, description, action, ...props }) => (
+        <Toast key={id} {...props}>
+          <div className="grid gap-1">
+            {title && <ToastTitle>{title}</ToastTitle>}
+            {description && <ToastDescription>{description}</ToastDescription>}
+          </div>
+          {action}
+          <ToastClose />
+        </Toast>
+      ))}
       <ToastViewport />
     </ToastProvider>
   );