feat: migrate to biome js + fix issues

Author: YannBirba

apps/storybook/.eslintrc.cjs

@@ -1,45 +1,39 @@
 {
-  "type": "module",
-  "scripts": {
-    "panda-watch": "pnpm exec panda cssgen --watch --outfile dist/styles.css",
-    "dev": "storybook dev -p 6006 --disable-telemetry --no-open",
-    "build": "storybook build",
-    "preview": "pnpm build && pnpm dlx http-server storybook-static -p 8080"
-  },
   "dependencies": {
-    "@storybook/theming": "^8.1.11",
-    "lucide-react": "^0.399.0",
+    "@storybook/theming": "^8.3.6",
+    "lucide-react": "^0.453.0",
     "react": "^18.3.1",
-    "react-aria": "^3.33.1",
-    "react-aria-components": "^1.2.1",
+    "react-aria": "^3.35.1",
+    "react-aria-components": "^1.4.1",
     "react-dom": "^18.3.1",
-    "react-stately": "^3.31.1"
+    "react-stately": "^3.33.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.6.0",
-    "@pandacss/dev": "^0.41.0",
-    "@storybook/addon-a11y": "^8.1.11",
-    "@storybook/addon-essentials": "^8.1.11",
-    "@storybook/addon-interactions": "^8.1.11",
-    "@storybook/addon-links": "^8.1.11",
-    "@storybook/addon-themes": "^8.1.11",
-    "@storybook/blocks": "^8.1.11",
-    "@storybook/react": "^8.1.11",
-    "@storybook/react-vite": "^8.1.11",
-    "@storybook/test": "^8.1.11",
+    "@chromatic-com/storybook": "^3.1.0",
+    "@pandacss/dev": "^0.47.0",
+    "@storybook/addon-a11y": "^8.3.6",
+    "@storybook/addon-essentials": "^8.3.6",
+    "@storybook/addon-interactions": "^8.3.6",
+    "@storybook/addon-links": "^8.3.6",
+    "@storybook/addon-themes": "^8.3.6",
+    "@storybook/blocks": "^8.3.6",
+    "@storybook/react": "^8.3.6",
+    "@storybook/react-vite": "^8.3.6",
+    "@storybook/test": "^8.3.6",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.14.1",
-    "@typescript-eslint/parser": "^7.14.1",
     "@vitejs/plugin-react-swc": "^3.7.0",
-    "eslint": "^9.6.0",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.7",
-    "eslint-plugin-storybook": "^0.8.0",
     "pandacss-preset-react-aria-components": "workspace:*",
-    "storybook": "^8.1.11",
+    "storybook": "^8.3.6",
     "typescript": "^5.5.2",
     "vite": "^5.3.2",
-    "vite-tsconfig-paths": "^4.3.2"
-  }
-}
+    "vite-tsconfig-paths": "^5.0.1"
+  },
+  "scripts": {
+    "build": "storybook build",
+    "dev": "storybook dev -p 6006 --disable-telemetry --no-open",
+    "panda-watch": "pnpm exec panda cssgen --watch --outfile dist/styles.css",
+    "preview": "pnpm build && pnpm dlx http-server storybook-static -p 8080"
+  },
+  "type": "module"
+}

apps/storybook/package.json

@@ -1,3 +1,3 @@
 module.exports = {
   plugins: [require("@pandacss/dev/postcss")()],
-};
+};

apps/storybook/postcss.config.cjs

@@ -1,7 +1,7 @@
-import { type ReactNode } from "react";
+import type { ReactNode } from "react";
 import { chain } from "react-aria";
-import { Heading, type DialogProps } from "react-aria-components";
-import { css, cva, type RecipeVariantProps } from "../../styled-system/css";
+import { type DialogProps, Heading } from "react-aria-components";
+import { type RecipeVariantProps, css, cva } from "../../styled-system/css";
 import { Button } from "./Button";
 import { Dialog } from "./Dialog";
 import { Icon } from "./Icon";
@@ -49,13 +49,13 @@ export function AlertDialog(props: AlertDialogProps) {
       {({ close }) => (
         <>
           <Heading
-            slot="title"
             className={css({
               fontSize: "xl",
               lineHeight: "tight",
               fontWeight: "semibold",
               my: "0",
             })}
+            slot="title"
           >
             {title}
           </Heading>
@@ -83,17 +83,17 @@ export function AlertDialog(props: AlertDialogProps) {
               gap: "2",
             })}
           >
-            <Button variant="secondary" onPress={close}>
+            <Button onPress={close} variant="secondary">
               {cancelLabel || "Cancel"}
             </Button>
             <Button
+              autoFocus
+              onPress={chain(onAction, close)}
               variant={
                 variantProps.variant === "destructive"
                   ? "destructive"
                   : "primary"
               }
-              autoFocus
-              onPress={chain(onAction, close)}
             >
               {actionLabel}
             </Button>

apps/storybook/src/components/AlertDialog.tsx

@@ -1,7 +1,7 @@
 import {
-  BreadcrumbProps,
-  BreadcrumbsProps,
-  LinkProps,
+  type BreadcrumbProps,
+  type BreadcrumbsProps,
+  type LinkProps,
   Breadcrumb as RACBreadcrumb,
   Breadcrumbs as RACBreadcrumbs,
 } from "react-aria-components";
@@ -19,26 +19,26 @@ export const Breadcrumbs = <T extends object>(props: BreadcrumbsProps<T>) => {
 };
 
 export const Breadcrumb = (
-  props: BreadcrumbProps & Omit<LinkProps, "className">
+  props: BreadcrumbProps & Omit<LinkProps, "className">,
 ) => {
   return (
     <RACBreadcrumb
       {...props}
       className={cx(
         props.className,
-        css({ display: "flex", alignItems: "center", gap: "1" })
+        css({ display: "flex", alignItems: "center", gap: "1" }),
       )}
     >
       <Link variant="secondary" {...props} />
       {props.href && (
         <Icon
-          name="chevron-right"
           className={css({
             w: "3",
             h: "3",
             color: "gray.600",
             _dark: { color: "zinc.400" },
           })}
+          name="chevron-right"
         />
       )}
     </RACBreadcrumb>

apps/storybook/src/components/Breadcrumbs.tsx

@@ -2,7 +2,7 @@ import {
   Button as RACButton,
   type ButtonProps as RACButtonProps,
 } from "react-aria-components";
-import { cva, cx, type RecipeVariantProps } from "../../styled-system/css";
+import { type RecipeVariantProps, cva, cx } from "../../styled-system/css";
 import { focusRing } from "./focusRing";
 
 const buttonRecipe = cva({
@@ -116,7 +116,7 @@ export const Button = (props: ButtonProps) => {
   const className = cx(
     buttonRecipe(variantProps),
     focusRing,
-    localProps.className
+    localProps.className,
   );
 
   return <RACButton {...localProps} className={className} />;

apps/storybook/src/components/Button.tsx

@@ -4,11 +4,11 @@ import {
   CalendarGrid,
   CalendarGridBody,
   CalendarHeaderCell,
-  DateValue,
+  type DateValue,
   Heading,
   Calendar as RACCalendar,
   CalendarGridHeader as RACCalendarGridHeader,
-  CalendarProps as RACCalendarProps,
+  type CalendarProps as RACCalendarProps,
   Text,
   useLocale,
 } from "react-aria-components";
@@ -62,19 +62,19 @@ export const Calendar = <T extends DateValue>({
         <CalendarGridBody>
           {(date) => (
             <CalendarCell
-              date={date}
               className={cx(calendarStyle, focusRing)}
+              date={date}
             />
           )}
         </CalendarGridBody>
       </CalendarGrid>
       {errorMessage && (
         <Text
-          slot="errorMessage"
           className={css({
             fontSize: "sm",
             color: "red.600",
           })}
+          slot="errorMessage"
         >
           {errorMessage}
         </Text>
@@ -84,7 +84,7 @@ export const Calendar = <T extends DateValue>({
 };
 
 export const CalendarHeader = () => {
-  let { direction } = useLocale();
+  const { direction } = useLocale();
 
   return (
     <header
@@ -98,7 +98,7 @@ export const CalendarHeader = () => {
         w: "full",
       })}
     >
-      <Button variant="icon" slot="previous">
+      <Button slot="previous" variant="icon">
         {direction === "rtl" ? (
           <ChevronRight aria-hidden />
         ) : (
@@ -117,7 +117,7 @@ export const CalendarHeader = () => {
           _dark: { color: "zinc.200" },
         })}
       />
-      <Button variant="icon" slot="next">
+      <Button slot="next" variant="icon">
         {direction === "rtl" ? (
           <ChevronLeft aria-hidden />
         ) : (

apps/storybook/src/components/Calendar.tsx

@@ -1,10 +1,10 @@
-import { type ReactNode } from "react";
+import type { ReactNode } from "react";
 import {
   Checkbox as RACCheckbox,
   CheckboxGroup as RACCheckboxGroup,
-  ValidationResult,
   type CheckboxGroupProps as RACCheckboxGroupProps,
   type CheckboxProps as RACCheckboxProps,
+  type ValidationResult,
 } from "react-aria-components";
 import { css, cx } from "../../styled-system/css";
 import { Description, FieldError, Label } from "./Field";
@@ -26,7 +26,7 @@ export function CheckboxGroup(props: CheckboxGroupProps) {
       {...props}
       className={cx(
         props.className,
-        css({ display: "flex", flexDir: "column", gap: "2" })
+        css({ display: "flex", flexDir: "column", gap: "2" }),
       )}
     >
       <Label>{props.label}</Label>
@@ -127,9 +127,9 @@ export const Checkbox = (props: CheckboxProps) => {
         <>
           <div className={cx(boxStyles, focusRing)}>
             {isIndeterminate ? (
-              <Icon name="minus" className={iconStyles} />
+              <Icon className={iconStyles} name="minus" />
             ) : isSelected ? (
-              <Icon name="check" className={iconStyles} />
+              <Icon className={iconStyles} name="check" />
             ) : null}
           </div>
           {props.children}

apps/storybook/src/components/Checkbox.tsx

@@ -1,15 +1,19 @@
 import {
   ListBox,
-  ListBoxItemProps,
+  type ListBoxItemProps,
   ComboBox as RACComboBox,
-  ValidationResult,
   type ComboBoxProps as RACComboBoxProps,
+  type ValidationResult,
 } from "react-aria-components";
 import { css, cx } from "../../styled-system/css";
 import { Button } from "./Button";
 import { Description, FieldError, FieldGroup, Input, Label } from "./Field";
 import { Icon } from "./Icon";
-import { DropdownItem, DropdownSection, DropdownSectionProps } from "./ListBox";
+import {
+  DropdownItem,
+  DropdownSection,
+  type DropdownSectionProps,
+} from "./ListBox";
 import { Popover } from "./Popover";
 
 export interface ComboBoxProps<T extends object>
@@ -35,50 +39,50 @@ export const ComboBox = <T extends object>({
       {...props}
       className={cx(
         props.className,
-        css({ display: "flex", flexDir: "column", gap: "1" })
+        css({ display: "flex", flexDir: "column", gap: "1" }),
       )}
     >
       <Label>{label}</Label>
       <FieldGroup>
         <Input />
         <Button
-          variant="icon"
           className={css({
             w: "6",
             mr: "1",
             borderRadius: "sm",
             outlineOffset: "0",
           })}
+          variant="icon"
         >
-          <Icon name="chevron-down" className={css({ w: "4", h: "4" })} />
+          <Icon className={css({ w: "4", h: "4" })} name="chevron-down" />
         </Button>
       </FieldGroup>
       {description && <Description>{description}</Description>}
       <FieldError>{errorMessage}</FieldError>
       <Popover className={css({ w: "var(--trigger-width)" })}>
         <ListBox
-          items={items}
           className={css({
             ringWidth: "0",
             p: "1",
             maxH: "inherit",
             overflow: "auto",
             clipPath: "inset(0 0 0 0 round .75rem)",
           })}
+          items={items}
         >
           {children}
         </ListBox>
       </Popover>
     </RACComboBox>
   );
-}
+};
 
 export const ComboBoxItem = (props: ListBoxItemProps) => {
   return <DropdownItem {...props} />;
 };
 
 export const ComboBoxSection = <T extends object>(
-  props: DropdownSectionProps<T>
+  props: DropdownSectionProps<T>,
 ) => {
   return <DropdownSection {...props} />;
 };