chore: biome tool added into the project

Author: danielbarion

biome.json

@@ -0,0 +1,27 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.7.0/schema.json",
+	"organizeImports": {
+		"enabled": true
+	},
+  "files": {
+    "include": ["./src"],
+    "ignore": ["node_modules/**", "dist/**", "build/**", "coverage/**", "public/**", "docs/**"]
+  },
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true,
+			"complexity": {
+				"useLiteralKeys": "off"
+			}
+		}
+	},
+	"javascript": {
+		"formatter": {
+			"semicolons": "asNeeded",
+			"lineWidth": 100,
+			"quoteStyle": "single",
+			"indentStyle": "space"
+		}
+	}
+}

package.json

@@ -15,6 +15,9 @@
     "bundlesize": "bundlesize",
     "esbuild": "esbuild",
     "test": "jest",
+    "biome:lint": "biome lint --apply ./src",
+    "biome:format": "biome format --write ./src",
+    "biome:pre-commit": "npm run biome:lint && npm run biome:format",
     "postbuild": "npm run types && npm run bundlesize",
     "prepublishOnly": "npm run build"
   },
@@ -49,6 +52,7 @@
   },
   "homepage": "https://github.com/ReactTooltip/react-tooltip#readme",
   "devDependencies": {
+    "@biomejs/biome": "^1.7.0",
     "@rollup/plugin-commonjs": "25.0.7",
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-replace": "5.0.5",

rollup.config.prod.mjs

@@ -103,7 +103,7 @@ const config = allBuildFormats.map(
       }),
     ]
 
-    if (specificPlugins && specificPlugins.length) {
+    if (specificPlugins?.length) {
       plugins.push(...specificPlugins)
     }
 

src/App.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import { TooltipController as Tooltip } from 'components/TooltipController'
-import { IPosition, TooltipRefProps } from 'components/Tooltip/TooltipTypes.d'
-import React, { useEffect, useRef, useState } from 'react'
+import type { IPosition, TooltipRefProps } from 'components/Tooltip/TooltipTypes.d'
+import type React from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { inline, offset } from '@floating-ui/dom'
 import styles from './styles.module.css'
 
@@ -81,13 +82,15 @@ function App() {
         <p>
           <button
             id="button2"
+            type="button"
             data-tooltip-content="Hello World from a Tooltip 2"
             onClick={handleButtonClick}
           >
             Hover or focus me
           </button>
           <button
             id="button3"
+            type="button"
             data-tooltip-content="Hello World from a Tooltip 3"
             onClick={handleButtonClick}
           >
@@ -97,11 +100,19 @@ function App() {
       </section>
       <section id="section-anchor-select" style={{ marginTop: '100px' }}>
         <p>
-          <button data-tooltip-id="anchor-select" data-tooltip-content="this content is different">
+          <button
+            type="button"
+            data-tooltip-id="anchor-select"
+            data-tooltip-content="this content is different"
+          >
             Anchor select
           </button>
-          <button data-tooltip-id="anchor-select">Anchor select 2</button>
-          <button data-tooltip-id="anchor-select">Anchor select 3</button>
+          <button type="button" type="button" data-tooltip-id="anchor-select">
+            Anchor select 2
+          </button>
+          <button type="button" type="button" data-tooltip-id="anchor-select">
+            Anchor select 3
+          </button>
         </p>
         <Tooltip id="anchor-select">Tooltip content</Tooltip>
         <Tooltip
@@ -163,6 +174,7 @@ function App() {
           />
         </div>
         <button
+          type="button"
           id="imperativeTooltipButton"
           style={{ height: 40, marginLeft: 100 }}
           onClick={() => {
@@ -184,7 +196,9 @@ function App() {
       </div>
 
       <div style={{ marginTop: '1rem' }}>
-        <button id="buttonCallbacks">Check the dev console</button>
+        <button type="button" id="buttonCallbacks">
+          Check the dev console
+        </button>
         <Tooltip
           place="bottom"
           anchorSelect="#buttonCallbacks"
@@ -195,7 +209,9 @@ function App() {
           content="Showing tooltip and calling afterShow method"
         />
 
-        <button id="buttonCallbacksClick">With click event</button>
+        <button type="button" id="buttonCallbacksClick">
+          With click event
+        </button>
         <Tooltip
           openOnClick
           place="bottom"
@@ -207,7 +223,9 @@ function App() {
           content="Showing tooltip and calling afterShow method"
         />
 
-        <button id="buttonCallbacksDelay">With delay</button>
+        <button type="button" id="buttonCallbacksDelay">
+          With delay
+        </button>
         <Tooltip
           delayShow={1000}
           place="bottom"

src/components/Tooltip/Tooltip.tsx

@@ -509,7 +509,10 @@ const Tooltip = ({
       window.addEventListener('click', handleClickOutsideAnchors)
     }
 
-    const enabledEvents: { event: string; listener: (event?: Event) => void }[] = []
+    const enabledEvents: {
+      event: string
+      listener: (event?: Event) => void
+    }[] = []
 
     const handleClickOpenTooltipAnchor = (event?: Event) => {
       if (show && event?.target === activeAnchor) {

src/components/TooltipController/TooltipController.tsx

@@ -225,7 +225,11 @@ const TooltipController = React.forwardRef<TooltipRefProps, ITooltipController>(
 
       // do not check for subtree and childrens, we only want to know attribute changes
       // to stay watching `data-attributes-*` from anchor element
-      const observerConfig = { attributes: true, childList: false, subtree: false }
+      const observerConfig = {
+        attributes: true,
+        childList: false,
+        subtree: false,
+      }
 
       if (activeAnchor) {
         const dataAttributes = getDataAttributesFromAnchorElement(activeAnchor)
@@ -273,7 +277,10 @@ const TooltipController = React.forwardRef<TooltipRefProps, ITooltipController>(
     if (render) {
       const actualContent =
         activeAnchor?.getAttribute('data-tooltip-content') || tooltipContent || null
-      const rendered = render({ content: actualContent, activeAnchor }) as React.ReactNode
+      const rendered = render({
+        content: actualContent,
+        activeAnchor,
+      }) as React.ReactNode
       renderedContent = rendered ? (
         <div ref={contentWrapperRef} className="react-tooltip-content-wrapper">
           {rendered}

src/test/utils.spec.js

@@ -9,7 +9,11 @@ describe('compute positions', () => {
       tooltipArrowReference: null,
     })
 
-    expect(value).toEqual({ tooltipStyles: {}, tooltipArrowStyles: {}, place: 'top' })
+    expect(value).toEqual({
+      tooltipStyles: {},
+      tooltipArrowStyles: {},
+      place: 'top',
+    })
   })
 
   test('empty tooltip reference element', async () => {
@@ -20,7 +24,11 @@ describe('compute positions', () => {
       tooltipArrowReference: null,
     })
 
-    expect(value).toEqual({ tooltipStyles: {}, tooltipArrowStyles: {}, place: 'top' })
+    expect(value).toEqual({
+      tooltipStyles: {},
+      tooltipArrowStyles: {},
+      place: 'top',
+    })
   })
 
   test('empty tooltip arrow reference element', async () => {

src/utils/compute-tooltip-position-types.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react'
+import type { CSSProperties } from 'react'
 import type { Middleware, PlacesType } from '../components/Tooltip/TooltipTypes'
 
 export interface IComputePositionArgs {

src/utils/compute-tooltip-position.ts

@@ -82,7 +82,11 @@ const computeTooltipPosition = async ({
       }
       /* c8 ignore end */
 
-      return { tooltipStyles: styles, tooltipArrowStyles: arrowStyle, place: placement }
+      return {
+        tooltipStyles: styles,
+        tooltipArrowStyles: arrowStyle,
+        place: placement,
+      }
     })
   }