refactor: improvement DX

.changeset/config.json

@@ -13,4 +13,4 @@
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
   "ignore": []
-}
+}

.gitignore

@@ -69,4 +69,7 @@ lib/
 
 # Cursor
 .cursorrules
-.cursorignore
+.cursorignore
+
+# Add Biome cache
+.biome/

CONTRIBUTING.md

@@ -38,17 +38,17 @@ To run the example app on Web:
 cd example/expo && yarn && yarn web
 ```
 
-Make sure your code passes TypeScript and ESLint. Run the following to verify:
+Make sure your code passes TypeScript and Biome checks. Run the following to verify:
 
 ```sh
 yarn typescript
 yarn lint
 ```
 
-To fix formatting errors, run the following:
+To fix formatting and linting errors, run the following:
 
 ```sh
-yarn lint --fix
+yarn lint:fix
 ```
 
 Remember to add tests for your change if possible. Run the unit tests by:
@@ -72,9 +72,9 @@ Our pre-commit hooks verify that your commit message matches this format when co
 
 ### Linting and tests
 
-[ESLint](https://eslint.org/), [Prettier](https://prettier.io/), [TypeScript](https://www.typescriptlang.org/)
+[Biome](https://biomejs.dev/), [TypeScript](https://www.typescriptlang.org/)
 
-We use [TypeScript](https://www.typescriptlang.org/) for type checking, [ESLint](https://eslint.org/) with [Prettier](https://prettier.io/) for linting and formatting the code, and [Jest](https://jestjs.io/) for testing.
+We use [TypeScript](https://www.typescriptlang.org/) for type checking, [Biome](https://biomejs.dev/) for linting and formatting the code, and [Jest](https://jestjs.io/) for testing.
 
 Our pre-commit hooks verify that the linter and tests pass when committing.
 
@@ -94,7 +94,8 @@ The `package.json` file contains various scripts for common tasks:
 
 - `yarn bootstrap`: setup project by installing all dependencies and pods.
 - `yarn typescript`: type-check files with TypeScript.
-- `yarn lint`: lint files with ESLint.
+- `yarn lint`: check files with Biome.
+- `yarn lint:fix`: fix formatting and linting issues with Biome.
 - `yarn test`: run unit tests with Jest.
 - `yarn dev`: start build.
 - `yarn android`: run the example app on Android.

biome.json

@@ -0,0 +1,59 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "suspicious": {
+        "noExplicitAny": "off",
+        "noArrayIndexKey": "off"
+      },
+      "security": {
+        "noDangerouslySetInnerHtml": "off"
+      },
+      "style": {
+        "useTemplate": "error",
+        "useConst": "error",
+        "noNonNullAssertion": "off",
+        "useImportType": "off",
+        "noArguments": "off"
+      },
+      "correctness": {
+        "useExhaustiveDependencies": "off"
+      }
+    }
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 100
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "double",
+      "trailingCommas": "es5",
+      "semicolons": "always"
+    }
+  },
+  "files": {
+    "ignore": [
+      "node_modules/**/*",
+      "lib/**/*",
+      "coverage/**/*",
+      "dist/**/*",
+      ".yarn/**/*",
+      "example/website/**/*",
+      "example/app/.expo/**/*",
+      "example/app/.yarn/**/*",
+      "example/app/.dist/**/*",
+      "example/app/node_modules/**/*",
+      "example/app/metro.config.js",
+      "example/app/babel.config.js",
+      "scripts/**/*"
+    ]
+  }
+}

example/app/app/+html.tsx

@@ -1,6 +1,6 @@
-import { ScrollViewStyleReset } from "expo-router/html";
 import { WebProvider } from "@/store/WebProvider";
 import Head from "expo-router/head";
+import { ScrollViewStyleReset } from "expo-router/html";
 
 // This file is web-only and used to configure the root HTML for every
 // web page during static rendering.
@@ -30,7 +30,7 @@ export default function Root({ children }: { children: React.ReactNode }) {
         {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
         <style
           dangerouslySetInnerHTML={{
-            __html: ``,
+            __html: "",
           }}
         />
 

example/app/app/_layout.tsx

@@ -9,16 +9,16 @@ import { DefaultTheme, ThemeProvider } from "@react-navigation/native";
 import { useFonts } from "expo-font";
 import * as SplashScreen from "expo-splash-screen";
 import "react-native-reanimated";
-import Stack from "expo-router/stack";
-import { useWebContext } from "@/store/WebProvider";
-import { CaptureProvider } from "@/store/CaptureProvider";
 import { HeaderRight } from "@/components/HeaderRight";
-import { routes } from "./routes";
-import { useInDoc } from "@/hooks/useInDoc";
 import { IS_WEB } from "@/constants/platform";
 import { MAX_WIDTH } from "@/constants/sizes";
+import { useInDoc } from "@/hooks/useInDoc";
+import { CaptureProvider } from "@/store/CaptureProvider";
+import { useWebContext } from "@/store/WebProvider";
 import { Link } from "expo-router";
+import Stack from "expo-router/stack";
 import { useReducedMotion } from "react-native-reanimated";
+import { routes } from "./routes";
 
 export {
   // Catch any errors thrown by the Layout component.
@@ -76,21 +76,14 @@ function RootLayoutNav() {
         type: "reduceMotion",
         reduceMotion,
       },
-      "*",
+      "*"
     );
   }, [reduceMotion]);
 
   return (
-    <TamaguiProvider
-      config={tamaguiConfig}
-      defaultTheme={inDoc ? "dark" : "light"}
-    >
+    <TamaguiProvider config={tamaguiConfig} defaultTheme={inDoc ? "dark" : "light"}>
       <Providers>
-        <XStack
-          flex={1}
-          justifyContent="center"
-          backgroundColor={backgroundColor}
-        >
+        <XStack flex={1} justifyContent="center" backgroundColor={backgroundColor}>
           <YStack minWidth={IS_WEB ? MAX_WIDTH : "100%"} height={"100%"}>
             {IS_WEB && !inDoc && reduceMotion && (
               <XStack paddingHorizontal={"$2"} width={MAX_WIDTH}>
@@ -102,8 +95,8 @@ function RootLayoutNav() {
                     fontSize: 12,
                   }}
                 >
-                  It looks like reduced motion is turned on in your system
-                  preferences. Some of the animations may be skipped.{" "}
+                  It looks like reduced motion is turned on in your system preferences. Some of the
+                  animations may be skipped.{" "}
                   <Link
                     target="_blank"
                     style={{ textDecorationLine: "underline" }}
@@ -125,19 +118,13 @@ function RootLayoutNav() {
                   backgroundColor,
                 },
                 headerRight: ({ tintColor }) => (
-                  <HeaderRight
-                    tintColor={tintColor}
-                    isRTL={isRTL}
-                    setIsRTL={setIsRTL}
-                  />
+                  <HeaderRight tintColor={tintColor} isRTL={isRTL} setIsRTL={setIsRTL} />
                 ),
               }}
             >
               <Stack.Screen name="index" />
               {routes
-                .flatMap((item) =>
-                  item.demos.map((demo) => ({ ...demo, kind: item.kind })),
-                )
+                .flatMap((item) => item.demos.map((demo) => ({ ...demo, kind: item.kind })))
                 .map((item) => (
                   <Stack.Screen
                     key={item.name}

example/app/app/demos/basic-layouts/left-align/demo.tsx

@@ -1,23 +1,13 @@
+import { renderItem } from "@/utils/render-item";
 import * as React from "react";
 import { View } from "react-native";
 import Carousel from "react-native-reanimated-carousel";
-import { renderItem } from "@/utils/render-item";
 
-const defaultDataWith6Colors = [
-  "#B0604D",
-  "#899F9C",
-  "#B3C680",
-  "#5C6265",
-  "#F5D399",
-  "#F1F1F1",
-];
+const defaultDataWith6Colors = ["#B0604D", "#899F9C", "#B3C680", "#5C6265", "#F5D399", "#F1F1F1"];
 
 function Index() {
   return (
-    <View
-      id="carousel-component"
-      dataSet={{ kind: "basic-layouts", name: "left-align" }}
-    >
+    <View id="carousel-component" dataSet={{ kind: "basic-layouts", name: "left-align" }}>
       <Carousel
         loop={true}
         width={430}

example/app/app/demos/basic-layouts/left-align/index.tsx

@@ -1,31 +1,30 @@
+import { CarouselAdvancedSettingsPanel } from "@/components/CarouselAdvancedSettingsPanel";
+import { defaultDataWith6Colors } from "@/components/CarouselBasicSettingsPanel";
+import { useAdvancedSettings } from "@/hooks/useSettings";
+import { CaptureWrapper } from "@/store/CaptureProvider";
+import { renderItem } from "@/utils/render-item";
 import * as React from "react";
 import { View } from "react-native";
 import type { ICarouselInstance } from "react-native-reanimated-carousel";
 import Carousel from "react-native-reanimated-carousel";
-import { CarouselAdvancedSettingsPanel } from "@/components/CarouselAdvancedSettingsPanel";
-import { useAdvancedSettings } from "@/hooks/useSettings";
-import { renderItem } from "@/utils/render-item";
-import { CaptureWrapper } from "@/store/CaptureProvider";
-import { defaultDataWith6Colors } from "@/components/CarouselBasicSettingsPanel";
 
 function Index() {
   const ref = React.useRef<ICarouselInstance>(null);
-  const { constants, advancedSettings, onAdvancedSettingsChange } =
-    useAdvancedSettings({
-      // These values will be passed in the Carousel Component as default props
-      defaultSettings: {
-        autoPlay: false,
-        autoPlayInterval: 2000,
-        autoPlayReverse: false,
-        data: defaultDataWith6Colors,
-        height: 258,
-        loop: true,
-        pagingEnabled: true,
-        snapEnabled: true,
-        vertical: false,
-        width: 430,
-      },
-    });
+  const { constants, advancedSettings, onAdvancedSettingsChange } = useAdvancedSettings({
+    // These values will be passed in the Carousel Component as default props
+    defaultSettings: {
+      autoPlay: false,
+      autoPlayInterval: 2000,
+      autoPlayReverse: false,
+      data: defaultDataWith6Colors,
+      height: 258,
+      loop: true,
+      pagingEnabled: true,
+      snapEnabled: true,
+      vertical: false,
+      width: 430,
+    },
+  });
 
   return (
     <View style={{ flex: 1 }}>

example/app/app/demos/basic-layouts/normal/demo.tsx

@@ -1,26 +1,16 @@
+import { renderItem } from "@/utils/render-item";
 import * as React from "react";
 import { View } from "react-native";
-import Carousel from "react-native-reanimated-carousel";
-import { renderItem } from "@/utils/render-item";
 import { useSharedValue } from "react-native-reanimated";
+import Carousel from "react-native-reanimated-carousel";
 
-const defaultDataWith6Colors = [
-  "#B0604D",
-  "#899F9C",
-  "#B3C680",
-  "#5C6265",
-  "#F5D399",
-  "#F1F1F1",
-];
+const defaultDataWith6Colors = ["#B0604D", "#899F9C", "#B3C680", "#5C6265", "#F5D399", "#F1F1F1"];
 
 function Index() {
   const scrollOffsetValue = useSharedValue<number>(0);
 
   return (
-    <View
-      id="carousel-component"
-      dataSet={{ kind: "basic-layouts", name: "normal" }}
-    >
+    <View id="carousel-component" dataSet={{ kind: "basic-layouts", name: "normal" }}>
       <Carousel
         testID={"xxx"}
         loop={true}

example/app/app/demos/basic-layouts/normal/index.tsx

@@ -1,13 +1,13 @@
+import { CarouselAdvancedSettingsPanel } from "@/components/CarouselAdvancedSettingsPanel";
+import { defaultDataWith6Colors } from "@/components/CarouselBasicSettingsPanel";
+import { useAdvancedSettings } from "@/hooks/useSettings";
+import { CaptureWrapper } from "@/store/CaptureProvider";
+import { renderItem } from "@/utils/render-item";
 import * as React from "react";
 import { useSharedValue } from "react-native-reanimated";
 import type { ICarouselInstance } from "react-native-reanimated-carousel";
 import Carousel from "react-native-reanimated-carousel";
-import { renderItem } from "@/utils/render-item";
-import { CarouselAdvancedSettingsPanel } from "@/components/CarouselAdvancedSettingsPanel";
-import { useAdvancedSettings } from "@/hooks/useSettings";
 import { Stack } from "tamagui";
-import { CaptureWrapper } from "@/store/CaptureProvider";
-import { defaultDataWith6Colors } from "@/components/CarouselBasicSettingsPanel";
 
 function Index() {
   const scrollOffsetValue = useSharedValue<number>(0);