add biome linting

package.json

@@ -14,9 +14,7 @@
     "node": ">=18",
     "pnpm": ">=8"
   },
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "packageManager": "[email protected]",
   "scripts": {
     "build": "pnpm build:scripts",
@@ -25,8 +23,11 @@
     "build:styles": "NODE_ENV=production pnpm tailwindcss -i ./src/styles/globals.css -o ./dist/styles.css --postcss --minify",
     "publish:ci": "pnpm publish --no-git-checks",
     "publish:dry": "pnpm publish --no-git-checks --dry-run",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "lint:fix": "eslint . --fix --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint:check": "biome check ./src",
+    "lint:check:write": "biome check --apply-unsafe ./src",
+    "lint:format": "biome format ./src",
+    "lint:format:write": "biome format --write ./src",
+    "lint:all": "pnpm run lint:check && pnpm run lint:format",
     "test:unit": "TZ=UTC pnpm vitest run --outputFile.junit=./test-results/junit.xml",
     "test:unit:ci": "pnpm test:unit --coverage --silent",
     "test:integration": "pnpm cypress run --component --env ELECTRON_EXTRA_LAUNCH_ARGS=--disable-gpu,LIBVA_DRIVER_NAME=--disable-software-rasterizer",

src/constants/heights.ts

@@ -1 +1 @@
-export const HEADER_HEIGHT = 56
+export const HEADER_HEIGHT = 56;

src/constants/zIndex.ts

@@ -2,4 +2,4 @@ export const Z_INDEX = {
   HEADER: 1000,
   BACKDROP: 900,
   SIDEBAR: 800,
-} as const
+} as const;

src/docs/cookbook/FullDemo.tsx

@@ -21,7 +21,7 @@ import {
 import { InfoIcon, UserIcon } from "lucide-react";
 import { useContext, useState } from "react";
 
-import { Header, Sidebar, Content, ShellContext } from "@/lib";
+import { Content, Header, ShellContext, Sidebar } from "@/lib";
 
 const DEMO_SIDEBAR_ITEMS = [
   {

src/docs/cookbook/SimpleImplementation.tsx

@@ -1,5 +1,5 @@
 import { ShellContainer } from "../../modules/Shell/ShellRoot";
 
 export function SimpleImplementation() {
-	return <ShellContainer>Hello</ShellContainer>;
+  return <ShellContainer>Hello</ShellContainer>;
 }

src/modules/Header/Header.stories.tsx

@@ -7,7 +7,7 @@ import { InfoIcon, UserIcon } from "lucide-react";
 
 import { Box } from "@chakra-ui/react";
 
-import { Shell, Header, Sidebar, Content } from "@/lib";
+import { Content, Header, Shell, Sidebar } from "@/lib";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta = {
@@ -30,7 +30,6 @@ export const WithSidebarNavigationToggle: Story = {
   render() {
     return (
       <Shell.Root>
-
         <Header.Root>
           <Header.SidebarToggle />
           <Header.Logo src={Logo} alt="HiveMQ Logo" title="Control Center" />
@@ -66,7 +65,6 @@ export const WithSidebarNavigationToggle: Story = {
         </Sidebar.Root>
 
         <Content.Root>Hello World 🌍</Content.Root>
-
       </Shell.Root>
     );
   },

src/modules/Header/HeaderLogo.tsx

@@ -15,15 +15,8 @@ export type HeaderLogoProps = BoxProps & {
  * HeaderLogo component
  * Second parameter of the forwardRef generic has to be of the component bound to `as` prop
  */
-export const HeaderLogo = forwardRef<HeaderLogoProps, 'button'>(
-  ({
-    children,
-    src,
-    alt,
-    title,
-    as = 'button',
-    ...props
-  }, ref) => {
+export const HeaderLogo = forwardRef<HeaderLogoProps, "button">(
+  ({ children, src, alt, title, as = "button", ...props }, ref) => {
     return (
       <Box
         type="button"
@@ -47,5 +40,5 @@ export const HeaderLogo = forwardRef<HeaderLogoProps, 'button'>(
         </Text>
       </Box>
     );
-  }
-)
+  },
+);

src/modules/Header/HeaderMenuContentItem.tsx

@@ -2,7 +2,10 @@ import { MenuItem, type MenuItemProps, forwardRef } from "@chakra-ui/react";
 
 export type HeaderMenuContentItemProps = MenuItemProps & {};
 
-export const HeaderMenuContentItem = forwardRef<HeaderMenuContentItemProps, 'button'>(({ children, ...props }, ref) => {
+export const HeaderMenuContentItem = forwardRef<
+  HeaderMenuContentItemProps,
+  "button"
+>(({ children, ...props }, ref) => {
   return (
     <MenuItem
       backgroundColor="black"
@@ -18,4 +21,4 @@ export const HeaderMenuContentItem = forwardRef<HeaderMenuContentItemProps, 'but
       {children}
     </MenuItem>
   );
-})
+});

src/modules/Header/HeaderSidebarToggle.tsx

@@ -1,7 +1,7 @@
-import { Box, Icon, type BoxProps } from "@chakra-ui/react";
+import { Box, type BoxProps, Icon } from "@chakra-ui/react";
+import { MenuIcon, XIcon } from "lucide-react";
 import { useContext } from "react";
 import { ShellContext } from "../../context/ShellContext";
-import { MenuIcon, XIcon } from "lucide-react";
 
 export type HeaderSidebarToggleProps = BoxProps & {};
 

src/modules/Header/index.ts

@@ -1,4 +1,3 @@
-import { HeaderRoot } from "./HeaderRoot";
 import { HeaderDivider } from "./HeaderDivider";
 import { HeaderLogo } from "./HeaderLogo";
 import { HeaderMenu } from "./HeaderMenu";
@@ -7,6 +6,7 @@ import { HeaderMenuContent } from "./HeaderMenuContent";
 import { HeaderMenuContentDetails } from "./HeaderMenuContentDetails";
 import { HeaderMenuContentItem } from "./HeaderMenuContentItem";
 import { HeaderNavigationItem } from "./HeaderNavigationItem";
+import { HeaderRoot } from "./HeaderRoot";
 import { HeaderSidebarToggle } from "./HeaderSidebarToggle";
 
 // ?TODO: Remove deprecated items in the next version

src/modules/Shell/ShellRoot.tsx

@@ -1,7 +1,7 @@
 import { Box, Grid } from "@chakra-ui/react";
 import { useContext, useMemo, useState } from "react";
-import { ShellContext } from "../../context/ShellContext";
 import { Z_INDEX } from "../../constants/zIndex";
+import { ShellContext } from "../../context/ShellContext";
 
 export type ShellContainerProps = {
   children: React.ReactNode;
@@ -22,9 +22,9 @@ export function ShellProvider({
 }: ShellContainerProps) {
   const [isSidebarOpen, setSidebarOpen] =
     useState<boolean>(isSidebarOpenDefault);
-  const [openedOverlayId, setOpenedOverlayId] = useState<
-    string | undefined
-  >(undefined);
+  const [openedOverlayId, setOpenedOverlayId] = useState<string | undefined>(
+    undefined,
+  );
 
   return (
     <ShellContext.Provider
@@ -107,18 +107,22 @@ export type ShellRootProps = {
    */
   isSidebarOpen?: boolean;
   /**
- * Define the width of your sidebar
- * @default 290px
- */
+   * Define the width of your sidebar
+   * @default 290px
+   */
   sidebarWidth?: string;
 };
 
-export function ShellRoot({ children, isSidebarOpen: isSidebarOpenDefault = true, sidebarWidth = "290px" }: ShellRootProps) {
+export function ShellRoot({
+  children,
+  isSidebarOpen: isSidebarOpenDefault = true,
+  sidebarWidth = "290px",
+}: ShellRootProps) {
   const [isSidebarOpen, setSidebarOpen] =
     useState<boolean>(isSidebarOpenDefault);
-  const [openedOverlayId, setOpenedOverlayId] = useState<
-    string | undefined
-  >(undefined);
+  const [openedOverlayId, setOpenedOverlayId] = useState<string | undefined>(
+    undefined,
+  );
 
   const gridTemplateAreas = useMemo(() => {
     if (isSidebarOpen) {

src/modules/Sidebar/Sidebar.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 // @ts-expect-error - Typescript doesn't how to import svgs yet
 import Logo from "@/assets/hivemq-neg.svg?component";
 
-import { Header, Content, Sidebar, Shell } from "@/lib";
+import { Content, Header, Shell, Sidebar } from "@/lib";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta = {
@@ -26,7 +26,6 @@ export const WithSidebarNavigationToggle: Story = {
   render() {
     return (
       <Shell.Root>
-
         <Header.Root>
           <Header.SidebarToggle />
           <Header.Logo src={Logo} alt="HiveMQ Logo" title="Control Center" />
@@ -41,7 +40,6 @@ export const WithSidebarNavigationToggle: Story = {
         </Sidebar.Root>
 
         <Content.Root>Hello</Content.Root>
-
       </Shell.Root>
     );
   },

src/modules/Sidebar/SidebarListItem.tsx

@@ -1,5 +1,4 @@
-import { Box, ListItem, type BoxProps, forwardRef } from "@chakra-ui/react";
-
+import { Box, type BoxProps, ListItem, forwardRef } from "@chakra-ui/react";
 
 export type SidebarListItemProps = BoxProps & {
   /**
@@ -8,30 +7,32 @@ export type SidebarListItemProps = BoxProps & {
   isActive?: boolean;
 };
 
-export const SidebarListItem = forwardRef<SidebarListItemProps, 'button'>(({ children, isActive, ...props }, ref) => {
-  return (
-    <ListItem>
-      <Box
-        as="button"
-        type="button"
-        borderLeft="6px solid"
-        borderColor={isActive ? "primary.400" : "transparent"}
-        textAlign="left"
-        backgroundColor={isActive ? "surface.100" : "transparent"}
-        p={2}
-        pl={4}
-        _hover={{
-          backgroundColor: "surface.200",
-        }}
-        _focusVisible={{
-          backgroundColor: "surface.200",
-        }}
-        w="100%"
-        ref={ref}
-        {...props}
-      >
-        {children}
-      </Box>
-    </ListItem>
-  );
-})
+export const SidebarListItem = forwardRef<SidebarListItemProps, "button">(
+  ({ children, isActive, ...props }, ref) => {
+    return (
+      <ListItem>
+        <Box
+          as="button"
+          type="button"
+          borderLeft="6px solid"
+          borderColor={isActive ? "primary.400" : "transparent"}
+          textAlign="left"
+          backgroundColor={isActive ? "surface.100" : "transparent"}
+          p={2}
+          pl={4}
+          _hover={{
+            backgroundColor: "surface.200",
+          }}
+          _focusVisible={{
+            backgroundColor: "surface.200",
+          }}
+          w="100%"
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </Box>
+      </ListItem>
+    );
+  },
+);

src/modules/Sidebar/SidebarRoot.tsx

@@ -1,7 +1,7 @@
 import { Box, type BoxProps } from "@chakra-ui/react";
-import { ShellContext } from "../../context/ShellContext";
 import { useContext } from "react";
 import { Z_INDEX } from "../../constants/zIndex";
+import { ShellContext } from "../../context/ShellContext";
 
 export type SidebarRootProps = BoxProps & {};
 

src/modules/Sidebar/index.ts

@@ -1,7 +1,7 @@
-import { SidebarRoot } from "./SidebarRoot";
 import { SidebarGroup } from "./SidebarGroup";
 import { SidebarList } from "./SidebarList";
 import { SidebarListItem } from "./SidebarListItem";
+import { SidebarRoot } from "./SidebarRoot";
 
 export type {
   /**