bun run check

src/components/ui/native-select.tsx

@@ -1,48 +1,46 @@
-"use client"
-
-import { NativeSelect as Select } from "@chakra-ui/react"
-import * as React from "react"
+import { NativeSelect as Select } from "@chakra-ui/react";
+import * as React from "react";
 
 interface NativeSelectRootProps extends Select.RootProps {
-  icon?: React.ReactNode
+  icon?: React.ReactNode;
 }
 
 export const NativeSelectRoot = React.forwardRef<
   HTMLDivElement,
   NativeSelectRootProps
 >(function NativeSelect(props, ref) {
-  const { icon, children, ...rest } = props
+  const { icon, children, ...rest } = props;
   return (
     <Select.Root ref={ref} {...rest}>
       {children}
       <Select.Indicator>{icon}</Select.Indicator>
     </Select.Root>
-  )
-})
+  );
+});
 
 interface NativeSelectItem {
-  value: string
-  label: string
-  disabled?: boolean
+  value: string;
+  label: string;
+  disabled?: boolean;
 }
 
 interface NativeSelectField extends Select.FieldProps {
-  items?: Array<string | NativeSelectItem>
+  items?: Array<string | NativeSelectItem>;
 }
 
 export const NativeSelectField = React.forwardRef<
   HTMLSelectElement,
   NativeSelectField
 >(function NativeSelectField(props, ref) {
-  const { items: itemsProp, children, ...rest } = props
+  const { items: itemsProp, children, ...rest } = props;
 
   const items = React.useMemo(
     () =>
       itemsProp?.map((item) =>
         typeof item === "string" ? { label: item, value: item } : item,
       ),
     [itemsProp],
-  )
+  );
 
   return (
     <Select.Field ref={ref} {...rest}>
@@ -53,5 +51,5 @@ export const NativeSelectField = React.forwardRef<
         </option>
       ))}
     </Select.Field>
-  )
-})
+  );
+});

src/components/ui/number-input.tsx

@@ -1,13 +1,13 @@
-import { NumberInput as ChakraNumberInput } from "@chakra-ui/react"
-import * as React from "react"
+import { NumberInput as ChakraNumberInput } from "@chakra-ui/react";
+import * as React from "react";
 
 export interface NumberInputProps extends ChakraNumberInput.RootProps {}
 
 export const NumberInputRoot = React.forwardRef<
   HTMLDivElement,
   NumberInputProps
 >(function NumberInput(props, ref) {
-  const { children, ...rest } = props
+  const { children, ...rest } = props;
   return (
     <ChakraNumberInput.Root ref={ref} variant="outline" {...rest}>
       {children}
@@ -16,9 +16,9 @@ export const NumberInputRoot = React.forwardRef<
         <ChakraNumberInput.DecrementTrigger />
       </ChakraNumberInput.Control>
     </ChakraNumberInput.Root>
-  )
-})
+  );
+});
 
-export const NumberInputField = ChakraNumberInput.Input
-export const NumberInputScrubber = ChakraNumberInput.Scrubber
-export const NumberInputLabel = ChakraNumberInput.Label
+export const NumberInputField = ChakraNumberInput.Input;
+export const NumberInputScrubber = ChakraNumberInput.Scrubber;
+export const NumberInputLabel = ChakraNumberInput.Label;

src/routes/samples/about/index.tsx

@@ -1,9 +1,9 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute } from "@tanstack/react-router";
 
-export const Route = createFileRoute('/samples/about/')({
+export const Route = createFileRoute("/samples/about/")({
   component: Index,
-})
+});
 
 function Index() {
-  return <div className="p-2">Hello from About!</div>
+  return <div className="p-2">Hello from About!</div>;
 }

src/routes/samples/chakra-ui/index.tsx

@@ -5,7 +5,7 @@ import {
   TimelineItem,
   TimelineRoot,
   TimelineTitle,
-} from '@/components/ui/timeline'
+} from "@/components/ui/timeline";
 import {
   Box,
   Button,
@@ -16,13 +16,13 @@ import {
   RadioGroup,
   Text,
   VStack,
-} from '@chakra-ui/react'
-import { createFileRoute } from '@tanstack/react-router'
-import { LuCheck, LuPackage, LuShip } from 'react-icons/lu'
+} from "@chakra-ui/react";
+import { createFileRoute } from "@tanstack/react-router";
+import { LuCheck, LuPackage, LuShip } from "react-icons/lu";
 
-export const Route = createFileRoute('/samples/chakra-ui/')({
+export const Route = createFileRoute("/samples/chakra-ui/")({
   component: Index,
-})
+});
 
 export default function Index() {
   return (
@@ -76,7 +76,7 @@ export default function Index() {
         </HStack>
       </VStack>
     </Box>
-  )
+  );
 }
 
 // https://www.chakra-ui.com/docs/components/timeline
@@ -117,5 +117,5 @@ const TimeLineSample = () => {
         </TimelineContent>
       </TimelineItem>
     </TimelineRoot>
-  )
-}
+  );
+};

src/routes/samples/directionMaps/index.lazy.tsx

@@ -1,84 +1,84 @@
-import { Box } from '@chakra-ui/react'
-import { createLazyFileRoute } from '@tanstack/react-router'
+import { Box } from "@chakra-ui/react";
+import { createLazyFileRoute } from "@tanstack/react-router";
 import {
   APIProvider,
   Map as GoogleMap,
   useMap,
   useMapsLibrary,
-} from '@vis.gl/react-google-maps'
-import { useEffect, useState } from 'react'
+} from "@vis.gl/react-google-maps";
+import { useEffect, useState } from "react";
 
-export const Route = createLazyFileRoute('/samples/directionMaps/')({
+export const Route = createLazyFileRoute("/samples/directionMaps/")({
   component: Index,
-})
+});
 
-const API_KEY = import.meta.env.FRONTEND_GOOGLE_API_KEY
+const API_KEY = import.meta.env.FRONTEND_GOOGLE_API_KEY;
 
 export default function Index() {
   return (
-    <div style={{ width: '100%', height: '100vh' }}>
+    <div style={{ width: "100%", height: "100vh" }}>
       <APIProvider apiKey={API_KEY}>
         <GoogleMap
           defaultZoom={8}
-          gestureHandling={'greedy'}
+          gestureHandling={"greedy"}
           fullscreenControl={false}
         >
           <Directions />
         </GoogleMap>
       </APIProvider>
     </div>
-  )
+  );
 }
 
 // @see: https://developers.google.com/maps/documentation/javascript/directions?hl=ja
 function Directions() {
-  const map = useMap()
-  const routesLibrary = useMapsLibrary('routes')
+  const map = useMap();
+  const routesLibrary = useMapsLibrary("routes");
   const [directionsService, setDirectionsService] =
-    useState<google.maps.DirectionsService>()
+    useState<google.maps.DirectionsService>();
   const [directionsRenderer, setDirectionsRenderer] =
-    useState<google.maps.DirectionsRenderer>()
-  const [routes, setRoutes] = useState<google.maps.DirectionsRoute[]>([])
-  const [routeIndex] = useState(0)
-  const selected = routes[routeIndex]
-  const leg = selected?.legs[0]
+    useState<google.maps.DirectionsRenderer>();
+  const [routes, setRoutes] = useState<google.maps.DirectionsRoute[]>([]);
+  const [routeIndex] = useState(0);
+  const selected = routes[routeIndex];
+  const leg = selected?.legs[0];
 
   // Initialize directions service and renderer
   useEffect(() => {
-    if (!routesLibrary || !map) return
-    setDirectionsService(new routesLibrary.DirectionsService())
-    setDirectionsRenderer(new routesLibrary.DirectionsRenderer({ map }))
-  }, [routesLibrary, map])
+    if (!routesLibrary || !map) return;
+    setDirectionsService(new routesLibrary.DirectionsService());
+    setDirectionsRenderer(new routesLibrary.DirectionsRenderer({ map }));
+  }, [routesLibrary, map]);
 
   // Use directions service
   useEffect(() => {
-    if (!directionsService || !directionsRenderer) return
+    if (!directionsService || !directionsRenderer) return;
 
     directionsService
       .route({
-        origin: '東京都新宿区西新宿2丁目8-1', // 都庁
-        waypoints: [{ location: '東京都港区赤坂9-7-1', stopover: true }], // ミッドタウン
-        destination: '東京都千代田区丸の内1丁目9番1号', // 東京駅
+        origin: "東京都新宿区西新宿2丁目8-1", // 都庁
+        waypoints: [{ location: "東京都港区赤坂9-7-1", stopover: true }], // ミッドタウン
+        destination: "東京都千代田区丸の内1丁目9番1号", // 東京駅
         travelMode: google.maps.TravelMode.DRIVING,
         provideRouteAlternatives: true,
         avoidHighways: true,
       })
       .then((response) => {
-        directionsRenderer.setDirections(response)
-        setRoutes(response.routes)
-      })
+        directionsRenderer.setDirections(response);
+        setRoutes(response.routes);
+      });
 
-    return () => directionsRenderer.setMap(null)
-  }, [directionsService, directionsRenderer])
+    return () => directionsRenderer.setMap(null);
+  }, [directionsService, directionsRenderer]);
 
   // Update direction route
   useEffect(() => {
-    if (!directionsRenderer) return
+    if (!directionsRenderer) return;
 
-    directionsRenderer.setRouteIndex(routeIndex)
-  }, [routeIndex, directionsRenderer])
+    directionsRenderer.setRouteIndex(routeIndex);
+  }, [routeIndex, directionsRenderer]);
 
-  if (!leg) return null
+  if (!leg) return null;
 
   return (
     <Box
@@ -95,19 +95,19 @@ function Directions() {
       fontSize={10}
     >
       <div className="directions">
-        <h2>{selected.summary || 'ルート'}</h2>
+        <h2>{selected.summary || "ルート"}</h2>
 
         {selected.legs.map((leg) => (
           <div key={`${leg.start_address}-${leg.end_address}`}>
             <p>
-              {leg.start_address.split(',')[0]}
-              <br />→ {leg.end_address.split(',')[0]}
+              {leg.start_address.split(",")[0]}
+              <br />→ {leg.end_address.split(",")[0]}
             </p>
             <p>距離: {leg.distance?.text}</p>
             <p>所要時間: {leg.duration?.text}</p>
           </div>
         ))}
       </div>
     </Box>
-  )
+  );
 }

src/routes/samples/index.tsx

@@ -1,13 +1,13 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute } from "@tanstack/react-router";
 
-export const Route = createFileRoute('/samples/')({
+export const Route = createFileRoute("/samples/")({
   component: Index,
-})
+});
 
 function Index() {
   return (
     <div className="p-2">
       <h3>Welcome Home!</h3>
     </div>
-  )
+  );
 }

src/routes/samples/maps/index.lazy.tsx

@@ -1,31 +1,31 @@
-import { createLazyFileRoute } from '@tanstack/react-router'
+import { createLazyFileRoute } from "@tanstack/react-router";
 import {
   APIProvider,
   AdvancedMarker,
   Map as GoogleMap,
-} from '@vis.gl/react-google-maps'
+} from "@vis.gl/react-google-maps";
 
-export const Route = createLazyFileRoute('/samples/maps/')({
+export const Route = createLazyFileRoute("/samples/maps/")({
   component: Index,
-})
+});
 
-const API_KEY = import.meta.env.FRONTEND_GOOGLE_API_KEY
+const API_KEY = import.meta.env.FRONTEND_GOOGLE_API_KEY;
 
 export default function Index() {
-  const position = { lat: 35.689501375244, lng: 139.69173371705 }
+  const position = { lat: 35.689501375244, lng: 139.69173371705 };
 
   return (
-    <div style={{ width: '100%', height: '100vh' }}>
+    <div style={{ width: "100%", height: "100vh" }}>
       <APIProvider apiKey={API_KEY}>
         <GoogleMap
           defaultCenter={position}
           defaultZoom={14}
-          mapId={'DEMO_MAP_ID'}
-          style={{ width: '100%', height: '100%' }}
+          mapId={"DEMO_MAP_ID"}
+          style={{ width: "100%", height: "100%" }}
         >
           <AdvancedMarker position={position} />
         </GoogleMap>
       </APIProvider>
     </div>
-  )
+  );
 }