Merge pull request #586 from nwplus/vite

Vite migration

.github/workflows/firebase-hosting-merge.yml

@@ -17,7 +17,7 @@ jobs:
         uses: actions/setup-node@v3
 
       - name: Set up firebase
-        run: sudo npm install -g firebase-tools
+        run: yarn global add firebase-tools
 
       - name: Choose dev firebase project
         if: ${{ env.IS_PRODUCTION == 'false' }}
@@ -28,33 +28,33 @@ jobs:
         run: firebase use nwplus-ubc --token ${{ secrets.FIREBASE_TOKEN }}
 
       - name: Install dependencies
-        run: npm install --force
+        run: yarn install --frozen-lockfile
 
       - name: Build with dev env variables
         if: ${{ env.IS_PRODUCTION == 'false' }}
-        run: npm run build:staging
+        run: yarn build:staging
         env:
-          REACT_APP_FIREBASE_API_KEY: ${{ secrets.DEV_FIREBASE_API_KEY }}
-          REACT_APP_FIREBASE_AUTH_DOMAIN: ${{ secrets.DEV_FIREBASE_AUTH_DOMAIN }}
-          REACT_APP_FIREBASE_DATABASE_URL: ${{ secrets.DEV_FIREBASE_DATABASE_URL }}
-          REACT_APP_FIREBASE_PROJECT_ID: ${{ secrets.DEV_FIREBASE_PROJECT_ID }}
-          REACT_APP_FIREBASE_STORAGE_BUCKET: ${{ secrets.DEV_FIREBASE_STORAGE_BUCKET }}
-          REACT_APP_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.DEV_FIREBASE_MESSAGING_SENDER_ID }}
-          REACT_APP_FIREBASE_APP_ID: ${{ secrets.DEV_FIREBASE_APP_ID }}
-          REACT_APP_FIREBASE_MEASUREMENT_ID: ${{ secrets.DEV_FIREBASE_MEASUREMENT_ID }}
+          VITE_FIREBASE_API_KEY: ${{ secrets.DEV_FIREBASE_API_KEY }}
+          VITE_FIREBASE_AUTH_DOMAIN: ${{ secrets.DEV_FIREBASE_AUTH_DOMAIN }}
+          VITE_FIREBASE_DATABASE_URL: ${{ secrets.DEV_FIREBASE_DATABASE_URL }}
+          VITE_FIREBASE_PROJECT_ID: ${{ secrets.DEV_FIREBASE_PROJECT_ID }}
+          VITE_FIREBASE_STORAGE_BUCKET: ${{ secrets.DEV_FIREBASE_STORAGE_BUCKET }}
+          VITE_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.DEV_FIREBASE_MESSAGING_SENDER_ID }}
+          VITE_FIREBASE_APP_ID: ${{ secrets.DEV_FIREBASE_APP_ID }}
+          VITE_FIREBASE_MEASUREMENT_ID: ${{ secrets.DEV_FIREBASE_MEASUREMENT_ID }}
 
       - name: Build with prod env variables
         if: ${{ env.IS_PRODUCTION == 'true' }}
         env:
-          REACT_APP_FIREBASE_API_KEY: ${{ secrets.FIREBASE_API_KEY }}
-          REACT_APP_FIREBASE_AUTH_DOMAIN: ${{ secrets.FIREBASE_AUTH_DOMAIN }}
-          REACT_APP_FIREBASE_DATABASE_URL: ${{ secrets.FIREBASE_DATABASE_URL }}
-          REACT_APP_FIREBASE_PROJECT_ID: ${{ secrets.FIREBASE_PROJECT_ID }}
-          REACT_APP_FIREBASE_STORAGE_BUCKET: ${{ secrets.FIREBASE_STORAGE_BUCKET }}
-          REACT_APP_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.FIREBASE_MESSAGING_SENDER_ID }}
-          REACT_APP_FIREBASE_APP_ID: ${{ secrets.FIREBASE_APP_ID }}
-          REACT_APP_FIREBASE_MEASUREMENT_ID: ${{ secrets.FIREBASE_MEASUREMENT_ID }}
-        run: npm run build
+          VITE_FIREBASE_API_KEY: ${{ secrets.FIREBASE_API_KEY }}
+          VITE_FIREBASE_AUTH_DOMAIN: ${{ secrets.FIREBASE_AUTH_DOMAIN }}
+          VITE_FIREBASE_DATABASE_URL: ${{ secrets.FIREBASE_DATABASE_URL }}
+          VITE_FIREBASE_PROJECT_ID: ${{ secrets.FIREBASE_PROJECT_ID }}
+          VITE_FIREBASE_STORAGE_BUCKET: ${{ secrets.FIREBASE_STORAGE_BUCKET }}
+          VITE_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.FIREBASE_MESSAGING_SENDER_ID }}
+          VITE_FIREBASE_APP_ID: ${{ secrets.FIREBASE_APP_ID }}
+          VITE_FIREBASE_MEASUREMENT_ID: ${{ secrets.FIREBASE_MEASUREMENT_ID }}
+        run: yarn build
 
       - name: Deploy to dev firebase project
         if: ${{ env.IS_PRODUCTION == 'false' }}

.github/workflows/firebase-hosting-pull-request.yml

@@ -12,14 +12,14 @@ jobs:
         uses: actions/setup-node@v3
       - run: yarn install --frozen-lockfile && yarn build:staging
         env:
-          REACT_APP_FIREBASE_API_KEY: ${{ secrets.DEV_FIREBASE_API_KEY }}
-          REACT_APP_FIREBASE_AUTH_DOMAIN: ${{ secrets.DEV_FIREBASE_AUTH_DOMAIN }}
-          REACT_APP_FIREBASE_DATABASE_URL: ${{ secrets.DEV_FIREBASE_DATABASE_URL }}
-          REACT_APP_FIREBASE_PROJECT_ID: ${{ secrets.DEV_FIREBASE_PROJECT_ID }}
-          REACT_APP_FIREBASE_STORAGE_BUCKET: ${{ secrets.DEV_FIREBASE_STORAGE_BUCKET }}
-          REACT_APP_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.DEV_FIREBASE_MESSAGING_SENDER_ID }}
-          REACT_APP_FIREBASE_APP_ID: ${{ secrets.DEV_FIREBASE_APP_ID }}
-          REACT_APP_FIREBASE_MEASUREMENT_ID: ${{ secrets.DEV_FIREBASE_MEASUREMENT_ID }}
+          VITE_FIREBASE_API_KEY: ${{ secrets.DEV_FIREBASE_API_KEY }}
+          VITE_FIREBASE_AUTH_DOMAIN: ${{ secrets.DEV_FIREBASE_AUTH_DOMAIN }}
+          VITE_FIREBASE_DATABASE_URL: ${{ secrets.DEV_FIREBASE_DATABASE_URL }}
+          VITE_FIREBASE_PROJECT_ID: ${{ secrets.DEV_FIREBASE_PROJECT_ID }}
+          VITE_FIREBASE_STORAGE_BUCKET: ${{ secrets.DEV_FIREBASE_STORAGE_BUCKET }}
+          VITE_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.DEV_FIREBASE_MESSAGING_SENDER_ID }}
+          VITE_FIREBASE_APP_ID: ${{ secrets.DEV_FIREBASE_APP_ID }}
+          VITE_FIREBASE_MEASUREMENT_ID: ${{ secrets.DEV_FIREBASE_MEASUREMENT_ID }}
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'

.gitignore

@@ -4,7 +4,6 @@
 /node_modules
 /.pnp
 .pnp.js
-yarn.lock
 
 # secrets
 .env

README.md

@@ -29,14 +29,14 @@ We hope for Portal to
 0. Please use `node v16`, 17+ doesn't work.
 1. Setup `.env` file to contain
    ```bash
-   REACT_APP_FIREBASE_API_KEY=...
-   REACT_APP_FIREBASE_AUTH_DOMAIN=...
-   REACT_APP_FIREBASE_DATABASE_URL=...
-   REACT_APP_FIREBASE_PROJECT_ID=...
-   REACT_APP_FIREBASE_STORAGE_BUCKET=...
-   REACT_APP_FIREBASE_MESSAGING_SENDER_ID=...
-   REACT_APP_FIREBASE_APP_ID=...
-   REACT_APP_FIREBASE_MEASUREMENT_ID=...
+   VITE_FIREBASE_API_KEY=...
+   VITE_FIREBASE_AUTH_DOMAIN=...
+   VITE_FIREBASE_DATABASE_URL=...
+   VITE_FIREBASE_PROJECT_ID=...
+   VITE_FIREBASE_STORAGE_BUCKET=...
+   VITE_FIREBASE_MESSAGING_SENDER_ID=...
+   VITE_FIREBASE_APP_ID=...
+   VITE_FIREBASE_MEASUREMENT_ID=...
    ```
 2. run `yarn && yarn start` to start the development server on `http://localhost:3000/`
 

public/index.html → index.html

@@ -2,24 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon_default.ico" />
+    <link rel="icon" href="/favicon_default.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Live event information for events hosted by nwPlus" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
+    <link rel="manifest" href="/manifest.json" />
     <link
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
@@ -40,15 +31,6 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+    <script type="module" src="/src/index.jsx"></script>
   </body>
 </html>

package.json

@@ -3,9 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
     "cross-env": "^7.0.2",
     "firebase": "^7.17.1",
     "html2canvas": "^1.4.1",
@@ -16,7 +13,6 @@
     "react-csv": "^2.2.1",
     "react-dom": "^18.2.0",
     "react-markdown": "^4.3.1",
-    "react-scripts": "5.0.1",
     "react-select": "^3.1.0",
     "react-spinner": "^0.2.7",
     "react-spinners": "^0.9.0",
@@ -25,11 +21,10 @@
     "wouter": "^2.5.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build:staging": "cross-env REACT_APP_ENV=STAGING react-scripts build",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "dev": "vite",
+    "build:staging": "cross-env VITE_ENV=STAGING vite build",
+    "build": "vite build",
+    "serve": "vite preview",
     "deploy": "yarn build && firebase deploy --only hosting:nwplus-ubc",
     "deploy:dev": "yarn build && firebase deploy --only hosting:nwplus-ubc-dev"
   },
@@ -54,7 +49,12 @@
     }
   },
   "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.1",
+    "browserslist": "^4.23.0",
+    "browserslist-to-esbuild": "^2.1.1",
     "prettier": "^2.1.2",
-    "pretty-quick": "^3.1.0"
+    "pretty-quick": "^3.1.0",
+    "vite": "^5.2.11",
+    "vite-plugin-svgr": "^4.2.0"
   }
 }

src/components/Announcements.js → src/components/Announcements.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { format } from 'timeago.js'
+import { format } from 'timeago'
 import ReactMarkdown from 'react-markdown'
 import { Card, CardWithHeader } from './Common'
 import { P, A } from './Typography'

src/components/ApplicationDashboard.js → src/components/ApplicationDashboard.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import styled from 'styled-components'
-import { ReactComponent as HandWave } from '../assets/hand-wave.svg'
-import Icon from '../components/Icon'
+import HandWave from '../assets/hand-wave.svg?react'
+import Icon from './Icon'
 import {
   ANALYTICS_EVENTS,
   APPLICATION_STATUS,

src/components/ApplicationForm/BasicInfo.js → src/components/ApplicationForm/BasicInfo.jsx

@@ -21,7 +21,7 @@ import {
   QuestionHeading,
   ErrorSpan as Required,
 } from '../Typography'
-import { FormSpacing, SubHeading } from './'
+import { FormSpacing, SubHeading } from './index'
 
 const genderOptions = [
   { value: 'female', label: 'Woman' },
@@ -456,7 +456,10 @@ const BasicInfo = ({ refs, errors, formInputs, onChange }) => (
         What is your current age?
         <Required />
       </SubHeading>
-      <P>We accept hackers currently in high school but require this information for consent purposes.</P>
+      <P>
+        We accept hackers currently in high school but require this information for consent
+        purposes.
+      </P>
       {errors?.ageByHackathon && <ErrorMessage>{errors?.ageByHackathon}</ErrorMessage>}
       <Dropdown
         options={ageOptions}

src/components/ApplicationForm/HackathonInfo.js → src/components/ApplicationForm/HackathonInfo.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { FormSpacing } from '.'
+import { FormSpacing } from './index'
 import { A, CenteredH1, P } from '../Typography'
 
 const HackathonInfo = () => {

src/components/ApplicationForm/Questionnaire.js → src/components/ApplicationForm/Questionnaire.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import { Select, TextInput } from '../../components/Input'
-import { ErrorMessage, QuestionHeading, ErrorSpan as Required } from '../../components/Typography'
+import { Select, TextInput } from '../Input'
+import { ErrorMessage, QuestionHeading, ErrorSpan as Required } from '../Typography'
 import { copyText } from '../../utility/Constants'
 import { CenteredH1 } from '../Typography'
-import { FormSpacing, SubHeading } from './'
+import { FormSpacing, SubHeading } from './index'
 
 // const StyledDropdown = styled(Dropdown)`
 //   .react-select__control {

src/components/ApplicationForm/ReviewCards.js → src/components/ApplicationForm/ReviewCards.jsx

@@ -15,7 +15,7 @@ import { SocialMediaLinks } from '../ApplicationDashboard'
 import Banner from '../Banner'
 import { Button, Checkbox } from '../Input'
 import { A, H1, P, QuestionHeading, ErrorSpan as Required } from '../Typography'
-import { FormSpacing, SubHeading } from './'
+import { FormSpacing, SubHeading } from './index'
 
 const ReviewContainer = styled.div`
   position: relative;

src/components/ApplicationForm/Skills.js → src/components/ApplicationForm/Skills.jsx

@@ -6,7 +6,7 @@ import { Select, TextArea, TextInput } from '../Input'
 import Dropdown from '../Input/Dropdown'
 import ResumeUploadBtn from '../ResumeUploadBtn'
 import { CenteredH1, ErrorMessage, P, QuestionHeading, ErrorSpan as Required } from '../Typography'
-import { FormSpacing, SubHeading } from './'
+import { FormSpacing, SubHeading } from './index'
 
 const hackathonsAttendedOptions = [
   { value: '0', label: '0' },

src/components/Faq.js → src/components/Faq.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Accordion from '../components/Accordion'
+import Accordion from './Accordion'
 import { chunkify } from '../utility/utilities'
 import { DetailAnswer, DetailColumn, DetailContainer } from './Common'
 import { H2 } from './Typography'

src/components/Input/TextArea.js → src/components/Input/TextArea.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { useCallback } from 'react'
 import styled from 'styled-components'
-import { ScrollbarLike, TextInputLike } from '../Common.js'
+import { ScrollbarLike, TextInputLike } from '../Common'
 import { ErrorMessage, Message } from '../Typography'
 
 const TextAreaBox = styled.textarea.attrs({

src/components/Input/TextInput.js → src/components/Input/TextInput.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { TextInputLike, TextInputNoOutline } from '../Common.js'
+import { TextInputLike, TextInputNoOutline } from '../Common'
 import { ErrorMessage } from '../Typography'
 
 const inputSize = {

src/components/Judging/JudgingCard.js → src/components/Judging/JudgingCard.jsx

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { Link } from 'wouter'
 import { MAX_CHARACTERS_IN_DESCRIPTION } from '../../utility/Constants'
 import { cutString } from '../../utility/utilities'
-import { CardLike } from '../Common.js'
+import { CardLike } from '../Common'
 import { Button } from '../Input/Button'
 import { H2, P } from '../Typography'
 

src/components/Livestream.js → src/components/Livestream.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import styled, { keyframes } from 'styled-components'
-import { CardWithHeader } from '../components/Common.js'
-import { H2 } from '../components/Typography'
+import { CardWithHeader } from './Common'
+import { H2 } from './Typography'
 
 const Container = styled(CardWithHeader)`
   text-align: center;

src/components/Quicklinks.js → src/components/Quicklinks.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import QuicklinksCard from '../components/QuicklinksCard'
+import QuicklinksCard from './QuicklinksCard'
 import { chunkify } from '../utility/utilities'
 
 import { DetailContainer, DetailColumn } from './Common'

src/components/QuicklinksCard.js → src/components/QuicklinksCard.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { A, UL, LI } from './Typography'
-import { CardWithHeader } from '../components/Common'
+import { CardWithHeader } from './Common'
 
 export default ({ title, links }) => {
   return (

src/components/ResumeUploadBtn.js → src/components/ResumeUploadBtn.jsx

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react'
-import { Button } from '../components/Input'
+import { Button } from './Input'
 import styled from 'styled-components'
 import { ErrorMessage } from './Typography'
 

src/components/Schedule/Schedule.js → src/components/Schedule/Schedule.jsx

@@ -84,7 +84,7 @@ const MobileFlexColumn = styled.div`
   align-items: center;
 `
 
-// These styles are a copy of what's in Common.js
+// These styles are a copy of what's in Common.jsx
 // I'm doing this because we're styling Schedule uniquely for cmd-f 2022
 // TODO: We should change this back to what it was before this PR
 const OverflowContainer = styled.div`

src/components/Schedule/Tag.js → src/components/Schedule/Tag.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 import { EVENT_TYPES } from './Constants'
-import { ReactComponent as Icon } from '../../assets/scheduleTag.svg'
+import Icon from '../../assets/scheduleTag.svg?react'
 
 export const TagLegendContainer = styled.div`
   display: flex;

src/components/Sidebar.js → src/components/Sidebar.jsx

@@ -274,7 +274,7 @@ const Sidebar = ({
     links.tools.push({ location: '/judging/admin', text: 'Judging Admin' })
   }
 
-  if (process.env.NODE_ENV !== 'production') {
+  if (import.meta.env.NODE_ENV !== 'production') {
     links.information.push({ location: '/charcuterie', text: 'CHARCUTERIE' })
   }
 

src/containers/Schedule.js → src/containers/Schedule.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import ScheduleC from '../components/Schedule/'
+import ScheduleC from '../components/Schedule'
 import { db } from '../utility/firebase'
 import { DB_COLLECTION, DB_HACKATHON, DAYOF_COLLECTION } from '../utility/Constants'
 import { livesiteDocRef } from '../utility/firebase'

src/pages/Charcuterie.js → src/pages/Charcuterie.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { H1, H2, H3, P, A, QuestionHeading } from '../components/Typography'
-import { Card } from '../components/Common.js'
+import { Card } from '../components/Common'
 import { Button, TextInput, TextArea, Checkbox, Select, Dropdown } from '../components/Input'
 import Accordion from '../components/Accordion'
 import Countdown from '../containers/Countdown'