my-app/src/App.jsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import AppRoutes from './AppRoutes'; // move the routing and loading logic here
 

my-app/src/AppRoutes.jsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Routes, Route, useLocation } from 'react-router-dom';
 import { useEffect, useState } from 'react';
 import Layout from './Layout';

my-app/src/Layout.jsx

@@ -1,4 +1,5 @@
 // components/Layout.jsx
+import React from 'react';
 import { Outlet, Link } from 'react-router-dom';
 import Header from './components/Header';
 

my-app/src/components/Booking.jsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styles from './Booking.module.css';
 import { convertDateObjectToString } from '../helpers';
 

my-app/src/components/BookingDatePicker.jsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { DatePicker } from '../react-aria-starter/src/DatePicker'; 
 import { today, getLocalTimeZone } from '@internationalized/date';
 import { getFutureDate, isDateUnavailable } from '../utils/bookingUtils';

my-app/src/components/BookingFormFields.jsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import Dropdown from './Dropdown';
 import { ComboBox } from '../react-aria-starter/src/ComboBox';
 import { DEFAULT_BOOKING_TITLE, BOOKING_LENGTHS, SMALL_GROUP_ROOMS, PEOPLE } from '../constants/bookingConstants';

my-app/src/components/BookingsList.jsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styles from './BookingsList.module.css';
 import Booking from './Booking';
 

my-app/src/components/Card.jsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styles from './Card.module.css'; // Import the CSS Module
 
 const Card = ({ imageUrl, header, subheader }) => {

my-app/src/components/Dropdown.jsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styles from "./Dropdown.module.css";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons'

my-app/src/components/TimeCard.jsx

@@ -1,6 +1,6 @@
 import { Button, Dialog, DialogTrigger, Heading, Modal } from 'react-aria-components';
 
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 import styles from './TimeCard.module.css';
 

my-app/src/components/TimeCardContainer.jsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import TimeCard from './TimeCard';
 import styles from './TimeCardContainer.module.css';
 import { useBookingContext } from '../context/BookingContext';

my-app/src/context/BookingContext.jsx

@@ -1,4 +1,4 @@
-import { createContext, useContext } from 'react';
+import React, { createContext, useContext } from 'react';
 
 const BookingContext = createContext(null);
 

my-app/src/main.jsx

@@ -1,4 +1,4 @@
-import { StrictMode } from 'react'
+import React, { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.jsx'

my-app/src/pages/NewBooking.jsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styles from './NewBooking.module.css';
 import { TimeCardContainer } from '../components/TimeCardContainer';
 import { BookingDatePicker } from '../components/BookingDatePicker';

my-app/src/pages/RoomBooking.jsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styles from './RoomBooking.module.css';
 import { Link } from 'react-router-dom';
 import BookingsList from '../components/BookingsList';

my-app/vite.config.js

@@ -1,38 +1,7 @@
-/// <reference types="vitest/config" />
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
 
-// https://vite.dev/config/
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
-const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
-
-// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
+// https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-  basePath: '/~jare2473',
-  test: {
-    projects: [{
-      extends: true,
-      plugins: [
-      // The plugin will run tests for the stories defined in your Storybook config
-      // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      storybookTest({
-        configDir: path.join(dirname, '.storybook')
-      })],
-      test: {
-        name: 'storybook',
-        browser: {
-          enabled: true,
-          headless: true,
-          provider: 'playwright',
-          instances: [{
-            browser: 'chromium'
-          }]
-        },
-        setupFiles: ['.storybook/vitest.setup.js']
-      }
-    }]
-  }
-});
+})