Remove geist and fix runtime errors

tannerkrewson · Jul 24, 2024 · 5a5381b · 5a5381b
1 parent 4f2448f
commit 5a5381b
Show file tree

Hide file tree

Showing 36 changed files with 205 additions and 368 deletions.
diff --git a/components/chat/ChatBox.tsx b/components/chat/ChatBox.tsx
@@ -1,4 +1,4 @@
-import { Input, Spacer, useInput } from "@geist-ui/core";
+import { Input, Spacer } from "@nextui-org/react";
 import React, { useEffect, useRef, useState } from "react";
 import {
     ChatMessage,
@@ -27,7 +27,7 @@ export const ChatBox = ({
     unreadMsgCount: number;
     clearUnreadMsgCount: () => void;
 }): JSX.Element => {
-    const { state: msgToSend, bindings, reset } = useInput("");
+    const [msgToSend, setMsgToSend] = useState("");
     const [isChatShowing, setIsChatShowing] = useState(!startHidden);
 
     const messagesEndRef = useRef(null);
@@ -38,7 +38,7 @@ export const ChatBox = ({
         if (!isChatMsgValid(msgToSend, thisPlayer, chat)) return;
 
         onSendChat(msgToSend);
-        reset();
+        setMsgToSend("");
     };
 
     const onEnter = (e) => {
@@ -72,7 +72,7 @@ export const ChatBox = ({
             onCollapse={(currentCollapse) => setIsChatShowing(!currentCollapse)}
             badgeType="error" // red
         >
-            <Spacer h={0.5} />
+            <Spacer y={0.5} />
             <div className="msg-container">
                 {chat.map(({ playerId, playerName, message, date }) => (
                     <div key={date}>
@@ -86,13 +86,11 @@ export const ChatBox = ({
             </div>
             <div className="flex-center-row">
                 <Input
-                    crossOrigin={undefined}
-                    onPointerEnterCapture={undefined}
-                    onPointerLeaveCapture={undefined}
-                    {...bindings}
                     onKeyDown={onEnter}
                     maxLength={MAX_CHAT_MSG_LEN}
                     width="100%"
+                    value={msgToSend}
+                    onValueChange={setMsgToSend}
                 />
                 <div className="send-container">
                     <PrimaryButton size="small" onClick={handleConfirm}>

diff --git a/components/common/ButtonGroup.tsx b/components/common/ButtonGroup.tsx
@@ -1,13 +1,11 @@
-import { Grid } from "@geist-ui/core";
-
 const ButtonGroup = ({ children }: ButtonGroupProps): JSX.Element => {
     const buttons = Array.isArray(children) ? children : [children];
     return (
-        <Grid.Container gap={1} justify="center">
-            {buttons.map((button, index) => (
-                <Grid key={index}>{button}</Grid>
+        <>
+            {buttons.map((button) => (
+                <>{button}</>
             ))}
-        </Grid.Container>
+        </>
     );
 };
 

diff --git a/components/common/CollapseBox.tsx b/components/common/CollapseBox.tsx
@@ -1,4 +1,4 @@
-import { Badge } from "@geist-ui/core";
+import { Badge } from "@nextui-org/react";
 import React, { useState } from "react";
 import PrimaryButton from "./PrimaryButton";
 

diff --git a/components/common/PrimaryButton.tsx b/components/common/PrimaryButton.tsx
@@ -1,4 +1,3 @@
-// import { Button } from "@geist-ui/core";
 import { Button } from "@nextui-org/react";
 import Link from "next/link";
 
@@ -32,11 +31,7 @@ const PrimaryButton = (props: PrimaryButtonProps): JSX.Element => {
 
 const ButtonWrapper = ({ manualWidth, ...props }: PrimaryButtonProps) => (
     <Button
-        placeholder={undefined}
-        onPointerEnterCapture={undefined}
-        onPointerLeaveCapture={undefined}
-        // @ts-expect-error this error makes no sense
-        type="secondary"
+        color="default"
         style={{
             width: manualWidth ? "100%" : "auto",
         }}

diff --git a/components/common/SkinnyCard.tsx b/components/common/SkinnyCard.tsx
@@ -1,18 +1,9 @@
-import { Card, useTheme } from "@geist-ui/core";
+import { Card, CardBody } from "@nextui-org/react";
 
 const SkinnyCard = ({ children }: SkinnyCardProps): JSX.Element => {
-    const {
-        palette: { accents_1 },
-    } = useTheme();
-
     return (
-        <Card
-            style={{
-                marginBottom: "12pt",
-                backgroundColor: accents_1,
-            }}
-        >
-            <Card.Body style={{ padding: "8pt" }}>{children}</Card.Body>
+        <Card>
+            <CardBody style={{ padding: "8pt" }}>{children}</CardBody>
         </Card>
     );
 };

diff --git a/components/detail/GameBadges.tsx b/components/detail/GameBadges.tsx
@@ -1,4 +1,4 @@
-import { Badge } from "@geist-ui/core";
+import { Badge } from "@nextui-org/react";
 import { RocketcrabMode } from "../../types/enums";
 import { ClientGame, GameCategory } from "../../types/types";
 import SkinnyCard from "../common/SkinnyCard";

diff --git a/components/detail/GameDetail.tsx b/components/detail/GameDetail.tsx
@@ -1,5 +1,5 @@
 import { ClientGame, GameCategory } from "../../types/types";
-import { Description, Tabs } from "@geist-ui/core";
+import { Tabs, Tab } from "@nextui-org/react";
 
 import GameInfo from "./GameInfo";
 import GameDescription from "./GameDescription";
@@ -16,24 +16,20 @@ const GameDetail = ({
         <div style={{ fontSize: "1.75em", fontWeight: "bold" }}>
             {game.name}
         </div>
-        <Tabs initialValue="1">
-            <Tabs.Item label="Info" value="1">
+        <Tabs>
+            <Tab title="Info">
                 <GameInfo game={game} />
                 <GamePictures pictures={game.pictures} />
                 <GameBadges game={game} allCategories={allCategories} />
                 <GameDescription description={game.description} />
                 {showOnlyHostMessage && (
-                    <Description
-                        style={{ margin: "0 auto", width: "fit-content" }}
-                        title="Only the host can select a game."
-                        className="remove-text-transform"
-                    />
+                    <div>Only the host can select a game.</div>
                 )}
-            </Tabs.Item>
+            </Tab>
             {(game.guide || game.guideUrl) && (
-                <Tabs.Item label="Guide" value="2">
+                <Tab title="Guide">
                     <GameGuide guide={game.guide} guideUrl={game.guideUrl} />
-                </Tabs.Item>
+                </Tab>
             )}
         </Tabs>
     </div>

diff --git a/components/find/FindTime.tsx b/components/find/FindTime.tsx
@@ -1,10 +1,10 @@
-import { Grid, Spacer } from "@geist-ui/core";
+import { Spacer } from "@nextui-org/react";
 import { formatRelative, differenceInCalendarDays, format } from "date-fns";
 import React from "react";
 
 export const FindTime = ({ dates }: { dates: number[] }): JSX.Element => (
     <div style={{ fontSize: ".85em", padding: "0 2em" }}>
-        <Spacer h={0.5} />
+        <Spacer y={0.5} />
         {Object.entries(
             dates
                 .map((date) =>
@@ -29,15 +29,8 @@ export const FindTime = ({ dates }: { dates: number[] }): JSX.Element => (
         ).map(([day, times]: [string, string[]], i) => (
             <div key={i}>
                 {i === 0 && "and "}
-                {day} at{" "}
-                <Grid.Container gap={0.4} justify="center">
-                    {times.map((time) => (
-                        <Grid xs={4} key={time}>
-                            {time}
-                        </Grid>
-                    ))}
-                </Grid.Container>
-                <Spacer h={0.7} />
+                {day} at <>{times}</>
+                <Spacer y={0.7} />
             </div>
         ))}
         ...and so on.

diff --git a/components/find/FinderInfoCard.tsx b/components/find/FinderInfoCard.tsx
@@ -1,4 +1,4 @@
-import { Spacer } from "@geist-ui/core";
+import { Spacer } from "@nextui-org/react";
 import React from "react";
 import SkinnyCard from "../common/SkinnyCard";
 import { Countdown } from "./Countdown";
@@ -21,10 +21,10 @@ export const FinderInfoCard = ({
 }): JSX.Element => {
     const showSubscriberCount = subscriberCount > 0;
     const scs = subscriberCount === 1;
-    if (!showSubscriberCount && !showCountdown) return <Spacer h={1} />;
+    if (!showSubscriberCount && !showCountdown) return <Spacer y={1} />;
     return (
         <>
-            <Spacer h={1} />
+            <Spacer y={1} />
             <SkinnyCard>
                 {showSubscriberCount && (
                     <div style={{ textAlign: "center" }}>
@@ -34,14 +34,14 @@ export const FinderInfoCard = ({
                         {subscriberCountMsg}
                     </div>
                 )}
-                {showSubscriberCount && showCountdown && <Spacer h={0.8} />}
+                {showSubscriberCount && showCountdown && <Spacer y={0.8} />}
                 {showCountdown && (
                     <Countdown start={countdownStart}>{countdownMsg}</Countdown>
                 )}
-                {showCountdown && findTimeDates && <Spacer h={0.2} />}
+                {showCountdown && findTimeDates && <Spacer y={0.2} />}
                 {findTimeDates && <FindTime dates={findTimeDates} />}
             </SkinnyCard>
-            <Spacer h={1} />
+            <Spacer y={1} />
         </>
     );
 };
diff --git a/components/find/PublicGame.tsx b/components/find/PublicGame.tsx
@@ -1,9 +1,7 @@
 import React from "react";
-import { QuestionCircle } from "@geist-ui/react-icons";
 import { ClientGameLibrary, ClientParty } from "../../types/types";
 import PrimaryButton from "../common/PrimaryButton";
 import SkinnyCard from "../common/SkinnyCard";
-import { Spacer } from "@geist-ui/core";
 
 const PublicGame = ({
     party,
@@ -33,9 +31,7 @@ const PublicGame = ({
                                     onClick={() => onWhatIs(selectedGameId)}
                                     className="game-info"
                                 >
-                                    {selectedGame.name}
-                                    <Spacer inline w={0.15} />
-                                    <QuestionCircle size={18} />
+                                    {selectedGame.name} ❓
                                 </a>
                             </span>
                         ) : (

diff --git a/components/in-game/GameFrame.tsx b/components/in-game/GameFrame.tsx
@@ -1,5 +1,5 @@
 import { GameStatus } from "../../types/enums";
-import { Loading } from "@geist-ui/core";
+import { Spinner } from "@nextui-org/react";
 import { ClientGame, GameState, Player } from "../../types/types";
 import { useConnectedGame } from "../../utils/useConnectedGame";
 
@@ -27,13 +27,14 @@ const GameFrame = ({
         <>
             {(showLoading || showWaitingForHost) && (
                 <div className="frame">
-                    <Loading type={showWaitingForHost ? "error" : "default"}>
-                        {showWaitingForHost ? (
-                            <span>Waiting for host</span>
-                        ) : (
-                            <span>Loading game</span>
-                        )}
-                    </Loading>
+                    <Spinner
+                        color={showWaitingForHost ? "danger" : "default"}
+                        label={
+                            showWaitingForHost
+                                ? "Waiting for host"
+                                : "Loading game"
+                        }
+                    />
                 </div>
             )}
             {showError && (

diff --git a/components/in-game/GameMenu.tsx b/components/in-game/GameMenu.tsx
@@ -1,14 +1,10 @@
 import PrimaryButton from "../common/PrimaryButton";
 import { MenuButton } from "../../types/types";
 import React from "react";
-import { Badge, useTheme } from "@geist-ui/core";
+import { Badge } from "@nextui-org/react";
 import { ThemeToggle } from "../common/ThemeToggle";
 
 const GameMenu = ({ isHost, menuButtons }: GameMenuProps): JSX.Element => {
-    const {
-        palette: { accents_1, accents_2 },
-    } = useTheme();
-
     return (
         <div className="game-menu">
             {menuButtons
@@ -39,13 +35,10 @@ const GameMenu = ({ isHost, menuButtons }: GameMenuProps): JSX.Element => {
                 .game-menu {
                     position: fixed;
                     width: fit-content;
-                    border-left: 1px solid ${accents_2};
-                    border-bottom: 1px solid ${accents_2};
                     right: 0;
                     top: 3em;
                     padding: 1em;
                     padding-bottom: 0.6em;
-                    background: ${accents_1};
                     display: flex;
                     flex-direction: column;
                 }

diff --git a/components/layout/Body.tsx b/components/layout/Body.tsx
@@ -1,10 +1,6 @@
-import { useTheme } from "@geist-ui/core";
 import Head from "next/head";
 
-const Body = ({ children }: BodyProps): JSX.Element => {
-    const {
-        palette: { accents_2, accents_5, accents_7, foreground, success },
-    } = useTheme();
+const Body = ({ children, themeType }: BodyProps): JSX.Element => {
     return (
         <>
             <Head>
@@ -41,7 +37,7 @@ const Body = ({ children }: BodyProps): JSX.Element => {
                 <meta name="theme-color" content="#ffffff" />
                 <meta name="description" content="party games for phones" />
             </Head>
-            {children}
+            <main className={themeType}>{children}</main>
             <style jsx global>{`
                 html,
                 body,
@@ -59,29 +55,6 @@ const Body = ({ children }: BodyProps): JSX.Element => {
                     text-transform: none;
                 }
 
-                /* fixes a weird geist bug where the dashes of unordered list move when you scroll */
-                .container ul li:before {
-                    margin-right: 0.5em;
-                    position: initial;
-                    content: "•";
-                }
-
-                /* "Copied!" tooltip animation */
-                #geist-ui-tooltip .tooltip-content.transition-enter {
-                    opacity: 0;
-                }
-                #geist-ui-tooltip .tooltip-content.transition-enter-active {
-                    transition: opacity 0.2s ease-out;
-                    opacity: 1;
-                }
-                #geist-ui-tooltip .tooltip-content.transition-leave {
-                    opacity: 1;
-                }
-                #geist-ui-tooltip .tooltip-content.transition-leave-active {
-                    transition: opacity 0.2s ease-out;
-                    opacity: 0;
-                }
-
                 .card.card.card,
                 .card.card.card:hover {
                     box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
@@ -92,29 +65,14 @@ const Body = ({ children }: BodyProps): JSX.Element => {
                     padding: 0 1.1em;
                     min-width: initial;
                 }
-
-                .swal2-popup {
-                    background: ${accents_2};
-                }
-                .swal2-title {
-                    color: ${foreground};
-                }
-                .swal2-styled.swal2-confirm {
-                    background: ${success};
-                }
-                .swal2-styled.swal2-cancel {
-                    background: ${accents_5};
-                }
-                .swal2-content {
-                    color: ${accents_7};
-                }
             `}</style>
         </>
     );
 };
 
 type BodyProps = {
     children: React.ReactNode;
+    themeType: string;
 };
 
 export default Body;