[WIP] [NOT CONFIRMED] Monorepo

.github/workflows/lint.yml → .github/workflows/check.yml

@@ -1,4 +1,4 @@
-name: lint
+name: check
 
 on:
     push:
@@ -7,12 +7,13 @@ on:
         branches: [main, development]
 
 jobs:
-    lint:
+    check:
         runs-on: ubuntu-latest
 
         strategy:
             matrix:
                 node-version: [20.x]
+                pnpm-version: [8.15.9]
 
         steps:
             - name: Setup repo
@@ -23,5 +24,12 @@ jobs:
               with:
                   node-version: ${{ matrix.node-version }}
 
-            - run: npm ci
-            - run: npm run lint
+            - name: Setup pnpm
+              uses: pnpm/action-setup@v4
+              with:
+                version: ${{ matrix.pnpm-version }}
+
+            - run: pnpm install
+            - run: pnpm -r check
+            - run: pnpm -r lint
+            - run: pnpm run lint-format

.gitignore

@@ -1,7 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
+**/node_modules
 /.pnp
 .pnp.js
 .env.local

.husky/pre-commit

@@ -1 +1 @@
-npx lint-staged
+pnpm run lint-staged

.prettierignore

@@ -1,10 +1,28 @@
 **/.git
-**/node_modules
-**/.next
 **/.husky
 **/.github
+**/.DS_Store
+
+**/node_modules
+
+**/.next
+**/.turbo
+**/dist
+**/out
+**/coverage
+
 public/*
+static/*
+apps/*/public/*
+apps/*/static/*
+packages/*/public/*
+packages/*/static/*
+
 LICENSE
 .prettierignore
 .gitignore
-app/favicon.ico
+pnpm-lock.yaml
+yarn.lock
+package-lock.json
+
+apps/*/app/favicon.ico

app/closed/page.tsx → apps/main/app/closed/page.tsx

@@ -18,7 +18,7 @@ import {
     logOut
 } from "@/util/api";
 import { usePathname, useRouter } from "next/navigation";
-import Loading from "@/components/Loading/Loading";
+import Loading from "@/components/Loading";
 import LOGOUT from "@/public/registration/logout.svg";
 
 const Closed: React.FC = () => {

app/page.tsx → apps/main/app/page.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import styles from "./page.module.scss";
-import Olympian from "@/components/Home/Olympian/Olympian";
+import Olympian from "@/components/Home/Hero/Hero";
 import Footer from "@/components/Home/Footer/Footer";
-import FAQJoinUs from "@/components/Home/FAQJoinUs/FAQJoinUs";
+import FAQJoinUs from "@/components/Home/JoinUs/JoinUs";
 import Sponsors from "@/components/Home/Sponsors/Sponsors";
 import FAQSection from "@/components/Home/FAQ/FAQ";
 

app/profile/page.tsx → apps/main/app/profile/page.tsx

@@ -16,7 +16,7 @@ import clsx from "clsx";
 import Head from "next/head";
 import { RegistrationData, RSVPType } from "@/util/types";
 import { registrationFromAPI } from "@/util/helpers";
-import Loading from "@/components/Loading/Loading";
+import Loading from "@/components/Loading";
 import { usePathname, useRouter } from "next/navigation";
 import { QRCodeSVG } from "qrcode.react";
 import Modal from "react-modal";
@@ -27,7 +27,7 @@ import {
     Waitlisted
 } from "@/components/Profile/RSVP/ModalViews/Rejected";
 import Accepted from "@/components/Profile/RSVP/ModalViews/Accepted";
-import CloseButton from "@/components/CloseButton/CloseButton";
+import CloseButton from "@/components/Profile/RSVP/CloseButton/CloseButton";
 import Image from "next/image";
 import LOGOUT from "@/public/registration/logout.svg";
 

app/profile/styles.module.scss → apps/main/app/profile/styles.module.scss

@@ -112,8 +112,6 @@
         min-height: calc(100% - (4rem + 30vw));
         padding: calc(2rem + 30vw) 1rem 2rem 1rem;
     }
-
-    width: 100%;
 }
 
 .modalContent p {

app/register/(general)/(form)/layout.tsx → apps/main/app/register/(general)/(form)/layout.tsx

@@ -3,7 +3,7 @@ import { getChallenge, getRegistrationOrDefault } from "@/util/api";
 import Registration from "@/components/Registration/Registration";
 import React, { useEffect, useState } from "react";
 import { registrationFromAPI } from "@/util/helpers";
-import Loading from "@/components/Loading/Loading";
+import Loading from "@/components/Loading";
 import { RegistrationData } from "@/util/types";
 
 const GeneralRegistration = ({ children }: { children: React.ReactNode }) => {

app/register/(general)/confirmation/page.tsx → apps/main/app/register/(general)/confirmation/page.tsx

@@ -9,7 +9,7 @@ import {
     getRegistrationOrDefault
 } from "@/util/api";
 import { usePathname, useRouter } from "next/navigation";
-import Loading from "@/components/Loading/Loading";
+import Loading from "@/components/Loading";
 
 const Confirmation: React.FC = () => {
     const [isLoading, setIsLoading] = useState(true);

app/register/(general)/review/page.tsx → apps/main/app/register/(general)/review/page.tsx

@@ -5,7 +5,7 @@ import ReviewForm from "@/components/Registration/ReviewForm";
 import { getChallenge, getRegistrationOrDefault } from "@/util/api";
 import { registrationFromAPI } from "@/util/helpers";
 import { RegistrationData } from "@/util/types";
-import Loading from "@/components/Loading/Loading";
+import Loading from "@/components/Loading";
 
 const ReviewInfo: React.FC = () => {
     const [registration, setRegistration] = useState<RegistrationData | null>(

app/register/challenge/page.tsx → apps/main/app/register/challenge/page.tsx

@@ -14,7 +14,7 @@ import NavigationButton from "@/components/Form/NavigationButton/NavigationButto
 import { isAuthenticated, authenticate, getChallenge } from "@/util/api";
 import { usePathname, useRouter } from "next/navigation";
 import { useState, useEffect } from "react";
-import Loading from "@/components/Loading/Loading";
+import Loading from "@/components/Loading";
 
 const jwtUrl = `https://adonix.hackillinois.org/auth/login/github/?device=challenge`;
 const challengeEndpoint =

app/register/challenge/status/page.tsx → apps/main/app/register/challenge/status/page.tsx

@@ -9,7 +9,7 @@ import clsx from "clsx";
 import { getChallenge } from "@/util/api";
 import Link from "next/link";
 import { useEffect, useState } from "react";
-import Loading from "@/components/Loading/Loading";
+import Loading from "@/components/Loading";
 import { ChallengeStatus } from "@/util/types";
 
 interface SolidButtonsProps {

app/register/layout.tsx → apps/main/app/register/layout.tsx

@@ -1,5 +1,5 @@
 "use client";
-import Loading from "@/components/Loading/Loading";
+import Loading from "@/components/Loading";
 import {
     isAuthenticated,
     authenticate,

app/rsvp/page.tsx → apps/main/app/rsvp/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import AvatarSelector from "@/components/AvatarSelector/AvatarSelector";
+import AvatarSelector from "@/components/Profile/RSVP/AcceptForm/AvatarSelector/AvatarSelector";
 import styles from "./styles.module.scss";
 import { Formik } from "formik";
 

components/FAQ/FAQ.module.scss → apps/main/components/Home/FAQ/FAQ.module.scss

@@ -1,3 +1,14 @@
+.faqMain {
+    position: relative;
+    background-color: #384646;
+    width: 100vw;
+}
+
+.background {
+    height: fit-content;
+    width: 100vw;
+}
+
 .faqContainer {
     position: absolute;
     display: flex;

components/FAQ/FAQ.tsx → apps/main/components/Home/FAQ/FAQ.tsx

@@ -1,14 +1,21 @@
 "use client";
-import React, { useContext, useEffect, useMemo, useState } from "react";
+import { FC, useContext, useEffect, useMemo, useState } from "react";
+
 import styles from "./FAQ.module.scss";
-import Link from "next/link";
+import BACKGROUND_MOBILE from "@/public/home/faq/background-mobile.svg";
+import BACKGROUND_DESKTOP from "@/public/home/faq/background-desktop.svg";
+
+import Image from "next/image";
+import useWindowSize from "@/hooks/use-window-size";
 import clsx from "clsx";
 import GlobalContext from "@/app/context";
+import Link from "next/link";
 
-const FAQ: React.FC = () => {
+const FAQSection: FC = () => {
     const { eventStatus } = useContext(GlobalContext);
     const [currentPage, setCurrentPage] = useState(0);
     const [windowWidth, setWindowWidth] = useState(0);
+    const windowSizeHook = useWindowSize();
 
     const faqData = [
         {
@@ -183,35 +190,46 @@ const FAQ: React.FC = () => {
     );
 
     return (
-        <div className={styles.faqContainer}>
-            {showArrows && (
-                <button
-                    className={clsx(styles.faqArrow, styles.faqArrowLeft)}
-                    onClick={() => navigatePage(-1)}
-                    disabled={currentPage === 0}
-                >
-                    &#x25c4;
-                </button>
-            )}
-            <div className={styles.faqContent}>
-                {currentFAQs.map((faq, index) => (
-                    <div className={styles.faqItem} key={index}>
-                        <h3>{faq.question}</h3>
-                        {faq.answer}
-                    </div>
-                ))}
+        <section className={styles.faqMain}>
+            <Image
+                alt="background"
+                src={
+                    windowSizeHook?.width && windowSizeHook.width >= 768
+                        ? BACKGROUND_DESKTOP
+                        : BACKGROUND_MOBILE
+                }
+                className={styles.background}
+            />
+            <div className={styles.faqContainer}>
+                {showArrows && (
+                    <button
+                        className={clsx(styles.faqArrow, styles.faqArrowLeft)}
+                        onClick={() => navigatePage(-1)}
+                        disabled={currentPage === 0}
+                    >
+                        &#x25c4;
+                    </button>
+                )}
+                <div className={styles.faqContent}>
+                    {currentFAQs.map((faq, index) => (
+                        <div className={styles.faqItem} key={index}>
+                            <h3>{faq.question}</h3>
+                            {faq.answer}
+                        </div>
+                    ))}
+                </div>
+                {showArrows && (
+                    <button
+                        className={clsx(styles.faqArrow, styles.faqArrowRight)}
+                        onClick={() => navigatePage(1)}
+                        disabled={currentPage === totalPages - 1}
+                    >
+                        &#x25ba;
+                    </button>
+                )}
             </div>
-            {showArrows && (
-                <button
-                    className={clsx(styles.faqArrow, styles.faqArrowRight)}
-                    onClick={() => navigatePage(1)}
-                    disabled={currentPage === totalPages - 1}
-                >
-                    &#x25ba;
-                </button>
-            )}
-        </div>
+        </section>
     );
 };
 
-export default FAQ;
+export default FAQSection;

components/Home/Olympian/Olympian.tsx → apps/main/components/Home/Hero/Hero.tsx

@@ -1,5 +1,5 @@
 "use client";
-import styles from "./Olympian.module.scss";
+import styles from "./Hero.module.scss";
 import { useContext } from "react";
 
 import Image from "next/image";

components/Home/FAQJoinUs/FAQJoinUs.tsx → apps/main/components/Home/JoinUs/JoinUs.tsx

@@ -1,6 +1,6 @@
 import { FC } from "react";
 
-import styles from "./FAQJoinUs.module.scss";
+import styles from "./JoinUs.module.scss";
 import BACKGROUND from "@/public/home/faq-joinus/faq-joinus-background.svg";
 
 import Image from "next/image";

components/AcceptRSVPForm/AcceptRSVPForm.tsx → apps/main/components/Profile/RSVP/AcceptForm/AcceptForm.tsx

@@ -1,16 +1,16 @@
 "use client";
 
 import React, { useState } from "react";
-import styles from "./AcceptRSVPForm.module.scss";
+import styles from "./AcceptForm.module.scss";
 import { Form, Formik } from "formik";
 import * as yup from "yup";
 import Checkboxes from "@/components/Form/Checkboxes/Checkboxes";
 import TextInput from "@/components/Form/TextInput/TextInput";
-import AvatarSelector from "../AvatarSelector/AvatarSelector";
+import AvatarSelector from "./AvatarSelector/AvatarSelector";
 import { refreshToken, setProfile } from "@/util/api";
 import Link from "next/link";
 import { RSVPDecideAccept } from "@/util/api";
-import Loading from "@/components/Loading/Loading";
+import Loading from "@/components/Loading";
 import Image from "next/image";
 
 const schema = yup.object({

components/Profile/RSVP/ModalViews/Accepted.tsx → apps/main/components/Profile/RSVP/ModalViews/Accepted.tsx

@@ -1,11 +1,11 @@
-import AcceptRSVPForm from "@/components/AcceptRSVPForm/AcceptRSVPForm";
 import OlympianButton from "@/components/OlympianButton/OlympianButton";
 import { useState } from "react";
 import styles from "./styles.module.scss";
 import ConfirmReject from "./ConfirmReject";
 import { RSVPDecideDecline } from "@/util/api";
-import Loading from "@/components/Loading/Loading";
+import Loading from "@/components/Loading";
 import Image from "next/image";
+import AcceptForm from "../AcceptForm/AcceptForm";
 
 type AcceptedType = "PRO" | "PRO_TO_GENERAL" | "GENERAL";
 
@@ -32,7 +32,7 @@ export default function Accepted({
     };
 
     if (accepted) {
-        return <AcceptRSVPForm closeModal={onRequestClose} />;
+        return <AcceptForm closeModal={onRequestClose} />;
     }
 
     if (declined) {

components/Registration/Registration.tsx → apps/main/components/Registration/Registration.tsx

@@ -12,7 +12,7 @@ import { RegistrationData } from "@/util/types";
 import { usePathname, useRouter } from "next/navigation";
 import NavigationButton from "../Form/NavigationButton/NavigationButton";
 import { registerUpdate } from "@/util/api";
-import Loading from "../Loading/Loading";
+import Loading from "../Loading";
 import { handleError, registrationToAPI } from "@/util/helpers";
 import { getRegistrationSchema } from "./validation";
 

components/Registration/ReviewForm.tsx → apps/main/components/Registration/ReviewForm.tsx

@@ -11,7 +11,7 @@ import { reviewSchema } from "./validation";
 import { registerSubmit } from "@/util/api";
 import { handleError, registrationToAPI } from "@/util/helpers";
 import { useRouter } from "next/navigation";
-import Loading from "../Loading/Loading";
+import Loading from "../Loading";
 import NavigationButton from "../Form/NavigationButton/NavigationButton";
 
 type ReviewFormProps = {