fix: vue component typing in react

src/components/room-booking/BookModal.tsx

@@ -50,13 +50,14 @@ export function BookModal({
 
   const { getFloatingProps } = useInteractions([dismiss, role]);
 
-  const titleInputRef = useRef(null);
+  const titleInputRef = useRef<HTMLInputElement>(null);
 
   const [title, setTitle] = useState("");
 
   const submitBooking = useCallback(() => {
+    if (!data) return;
     if (!title) {
-      titleInputRef.current.focus();
+      titleInputRef.current?.focus();
       return;
     }
 

src/components/room-booking/BookingTimeline.tsx

@@ -1,5 +1,6 @@
+import { FunctionComponent } from "react";
 import { applyVueInReact } from "veaury";
 import RoomBookingViewVue from "./BookingTimeline.vue";
 
 const BookingTimeline = applyVueInReact(RoomBookingViewVue);
-export default BookingTimeline;
+export default BookingTimeline as FunctionComponent<any>;

src/components/room-booking/RoomBookingPage.tsx

@@ -19,7 +19,7 @@ export function RoomBookingPage() {
     <>
       <BookingTimeline
         className="flex max-h-full"
-        onBooking={(data) => {
+        onBooking={(data: BookingData) => {
           setBookingModalData(data);
           setModalOpen(true);
         }}

src/vite-env.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-plugin-pwa/vanillajs" />
 /// <reference types="vite-plugin-pwa/react" />
+declare module "*.vue";

vite.config.ts

@@ -1,6 +1,7 @@
 import mdx from "@mdx-js/rollup";
 import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
 import remarkGfm from "remark-gfm";
+// @ts-expect-error The plugin is not typed
 import veauryVitePlugins from "veaury/vite/index.js";
 import { defineConfig } from "vite";
 import { ViteMinifyPlugin } from "vite-plugin-minify";