infra: add linting and formatting for js projects (#230)

* wip

* wip

* wip

* format

* wip(mobile): lint and format

* cleanup

* nits

* nits

* idiomatic react

* nit

* format all root files

js/mobile/src/components/BottomSheet.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from 'react';
 import {
   Dimensions,
   KeyboardAvoidingView,
@@ -6,13 +6,13 @@ import {
   Platform,
   Pressable,
   View,
-} from "react-native";
+} from 'react-native';
 import {
   initialWindowMetrics,
   SafeAreaProvider,
   SafeAreaView,
-} from "react-native-safe-area-context";
-import { Gesture, GestureDetector } from "react-native-gesture-handler";
+} from 'react-native-safe-area-context';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
   Easing,
   Extrapolation,
@@ -22,9 +22,9 @@ import Animated, {
   useSharedValue,
   withSpring,
   withTiming,
-} from "react-native-reanimated";
+} from 'react-native-reanimated';
 
-const SCREEN_HEIGHT = Dimensions.get("window").height;
+const SCREEN_HEIGHT = Dimensions.get('window').height;
 const ANIMATION_MS = 240;
 
 interface BottomSheetProps {
@@ -58,7 +58,7 @@ export function BottomSheet({
   onClose,
   onClosed,
   avoidKeyboard = false,
-  maxHeight = "85%",
+  maxHeight = '85%',
   children,
 }: BottomSheetProps) {
   // Mount slightly past `open` so the slide-in animation has its starting
@@ -66,6 +66,9 @@ export function BottomSheet({
   const [mounted, setMounted] = useState(false);
   const translateY = useSharedValue(SCREEN_HEIGHT);
 
+  // Mount as soon as we open; the close path unmounts after the exit animation.
+  if (open && !mounted) setMounted(true);
+
   // Latest onClosed in a ref so the worklet→JS bridge always invokes the
   // current callback even if the parent re-rendered with a new closure.
   const onClosedRef = useRef(onClosed);
@@ -80,7 +83,6 @@ export function BottomSheet({
 
   useEffect(() => {
     if (open) {
-      setMounted(true);
       requestAnimationFrame(() => {
         translateY.value = withSpring(0, {
           damping: 24,
@@ -104,14 +106,18 @@ export function BottomSheet({
     .activeOffsetY(10)
     .failOffsetX([-25, 25])
     .onUpdate((e) => {
-      "worklet";
+      'worklet';
+      // Reanimated shared values are mutated by design; react-hooks/immutability
+      // doesn't model worklets, so the mutations below are flagged spuriously.
+      // eslint-disable-next-line react-hooks/immutability
       translateY.value = Math.max(0, e.translationY);
     })
     .onEnd((e) => {
-      "worklet";
+      'worklet';
       if (e.translationY > 120 || e.velocityY > 800) {
         runOnJS(onClose)();
       } else {
+        // eslint-disable-next-line react-hooks/immutability
         translateY.value = withSpring(0, {
           damping: 24,
           stiffness: 260,
@@ -138,7 +144,7 @@ export function BottomSheet({
 
   const Wrapper = avoidKeyboard ? KeyboardAvoidingView : View;
   const wrapperProps = avoidKeyboard
-    ? { behavior: Platform.OS === "ios" ? ("padding" as const) : undefined }
+    ? { behavior: Platform.OS === 'ios' ? ('padding' as const) : undefined }
     : {};
 
   return (
@@ -151,9 +157,9 @@ export function BottomSheet({
       <SafeAreaProvider initialMetrics={initialWindowMetrics}>
         <View style={{ flex: 1 }}>
           <Animated.View
-            pointerEvents={open ? "auto" : "none"}
+            pointerEvents={open ? 'auto' : 'none'}
             style={[
-              { position: "absolute", inset: 0, backgroundColor: "black" },
+              { position: 'absolute', inset: 0, backgroundColor: 'black' },
               backdropStyle,
             ]}
           >
@@ -162,23 +168,23 @@ export function BottomSheet({
 
           <Wrapper
             {...wrapperProps}
-            style={{ flex: 1, justifyContent: "flex-end" }}
+            style={{ flex: 1, justifyContent: 'flex-end' }}
             pointerEvents="box-none"
           >
             <GestureDetector gesture={sheetPan}>
               <Animated.View
                 style={[
                   {
-                    backgroundColor: "#1c1c1c",
+                    backgroundColor: '#1c1c1c',
                     borderTopLeftRadius: 22,
                     borderTopRightRadius: 22,
-                    overflow: "hidden",
+                    overflow: 'hidden',
                     maxHeight,
                   },
                   sheetStyle,
                 ]}
               >
-                <SafeAreaView edges={["bottom"]}>
+                <SafeAreaView edges={['bottom']}>
                   <View className="px-5 pt-3 items-center">
                     <View className="bg-white/25 h-1 w-12 rounded-full mb-3" />
                   </View>