Merge pull request #62 from zachspiel/feature/61

Migrate to Mantine 7.0

next.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  reactStrictMode: true,
+  reactStrictMode: false,
   images: {
     domains: ["firebasestorage.googleapis.com"],
   },

package.json

@@ -1,42 +1,39 @@
 {
   "name": "wedding-rsvp-next-js",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
+  "author": {
+    "name": "Zachary Spielberger",
+    "email": "zachspielberger@gmail.com"
+  },
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
-    "@aws-sdk/client-s3": "^3.359.0",
-    "@aws-sdk/s3-presigned-post": "^3.359.0",
-    "@aws-sdk/s3-request-presigner": "^3.359.0",
-    "@aws-sdk/signature-v4-crt": "^3.357.0",
-    "@emotion/react": "^11.11.1",
-    "@mantine/carousel": "^6.0.13",
-    "@mantine/core": "^6.0.13",
-    "@mantine/dates": "^6.0.13",
-    "@mantine/dropzone": "^6.0.20",
-    "@mantine/form": "^6.0.13",
-    "@mantine/hooks": "^6.0.13",
-    "@mantine/modals": "^6.0.13",
-    "@mantine/notifications": "^6.0.13",
+    "@mantine/carousel": "^7.1.2",
+    "@mantine/core": "^7.1.2",
+    "@mantine/dates": "^7.1.2",
+    "@mantine/dropzone": "^7.1.2",
+    "@mantine/form": "^7.1.2",
+    "@mantine/hooks": "^7.1.2",
+    "@mantine/modals": "^7.1.2",
+    "@mantine/notifications": "^7.1.2",
     "@tabler/icons-react": "^2.22.0",
     "@types/node": "20.3.1",
     "@types/react": "18.2.12",
     "@types/react-beautiful-dnd": "^13.1.4",
     "@types/react-dom": "18.2.5",
     "@types/uuid": "^9.0.2",
-    "aws-sdk": "^2.1404.0",
-    "axios": "^1.4.0",
-    "embla-carousel-react": "^7.1.0",
+    "embla-carousel-react": "^8.0.0-rc14",
     "encoding": "^0.1.13",
     "eslint": "8.43.0",
-    "eslint-config-next": "13.4.6",
+    "eslint-config-next": "13.5.2",
     "firebase": "^9.22.2",
     "lodash.findlastindex": "^4.6.0",
-    "next": "13.4.6",
+    "next": "13.5.4",
     "react": "18.2.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-countdown": "^2.3.5",
@@ -47,6 +44,8 @@
     "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "@types/lodash.findlastindex": "^4.6.7"
+    "@types/lodash.findlastindex": "^4.6.7",
+    "postcss-preset-mantine": "^1.7.0",
+    "postcss-simple-vars": "^7.0.1"
   }
 }

postcss.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  plugins: {
+    "postcss-preset-mantine": {},
+    "postcss-simple-vars": {
+      variables: {
+        "mantine-breakpoint-xs": "36em",
+        "mantine-breakpoint-sm": "48em",
+        "mantine-breakpoint-md": "62em",
+        "mantine-breakpoint-lg": "75em",
+        "mantine-breakpoint-xl": "88em",
+      },
+    },
+  },
+};

src/app/Providers.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import AdminViewProvider from "../context/AdminView";
+import SignInStatusProvider from "../context/SignInStatus";
+
+export function Providers({ children }: { children: any }) {
+  return (
+    <SignInStatusProvider>
+      <AdminViewProvider>{children}</AdminViewProvider>
+    </SignInStatusProvider>
+  );
+}

src/app/api/upload/route.ts

@@ -1,8 +1,6 @@
 import { NextResponse } from "next/server";
 import { v4 as uuidv4 } from "uuid";
 import sharp from "sharp";
-import { ref, uploadBytes } from "firebase/storage";
-import { storage } from "@spiel-wedding/database/database";
 
 export interface UploadImageParams {
   name: string;

src/app/guestList/page.tsx

@@ -72,12 +72,12 @@ export default function GuestList() {
   return (
     <Container>
       <SimpleGrid cols={1} pb="xl">
-        <MGroup position="apart">
+        <MGroup justify="space-between">
           <SectionTitle title="All Guests" id="allGuests" />
           <AddGuest />
         </MGroup>
         <Summary groups={groups} />
-        <MGroup position="apart">
+        <MGroup justify="space-between">
           <FilterSelection
             groups={groups}
             filters={filters}
@@ -93,7 +93,7 @@ export default function GuestList() {
           <TextInput
             placeholder="Search by any field"
             mb="md"
-            icon={<IconSearch size="0.9rem" stroke={1.5} />}
+            rightSection={<IconSearch size="0.9rem" stroke={1.5} />}
             value={search}
             onChange={handleSearchChange}
           />

src/app/layout.tsx

@@ -1,22 +1,60 @@
 import Navbar from "@spiel-wedding/components/navbar/Navbar";
-import "./globals.css";
-import RootStyleRegistry from "./emotion";
 import Footer from "@spiel-wedding/components/navbar/Footer";
+import { MantineProvider, ColorSchemeScript } from "@mantine/core";
+import { theme } from "./theme";
+import { Providers } from "./Providers";
+import { Notifications } from "@mantine/notifications";
+import "@mantine/notifications/styles.css";
+import "@mantine/core/styles.css";
+import "@mantine/carousel/styles.css";
+import "./globals.css";
+import { Metadata } from "next";
 
-export const metadata = {
+export const metadata: Metadata = {
   title: "Spielberger Wedding 2024",
+  metadataBase: new URL("https://zachandsedona.com"),
   description: "The Spielbergers 2024",
+  creator: "Zachary Spielberger",
+  keywords: ["The Spielbergers 2024"],
+  openGraph: {
+    images: ["/opengraph-image.png"],
+  },
+  robots: {
+    index: true,
+    follow: true,
+    nocache: true,
+    googleBot: {
+      index: true,
+      follow: false,
+      noimageindex: true,
+      "max-video-preview": -1,
+      "max-image-preview": "large",
+      "max-snippet": -1,
+    },
+  },
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
+      <head>
+        <ColorSchemeScript />
+        <link rel="shortcut icon" href="/favicon.ico" />
+        <meta
+          name="viewport"
+          content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
+        />
+        <meta name="robots" content="all" />
+      </head>
       <body>
-        <RootStyleRegistry>
-          <Navbar />
-          {children}
-          <Footer />
-        </RootStyleRegistry>
+        <MantineProvider theme={theme}>
+          <Notifications />
+          <Providers>
+            <Navbar />
+            {children}
+            <Footer />
+          </Providers>
+        </MantineProvider>
       </body>
     </html>
   );

src/app/login/page.tsx

@@ -53,11 +53,11 @@ export default function Login() {
   return (
     <Container size={420} my={40}>
       <Title
-        align="center"
-        sx={(theme): Record<string, string | number> => ({
-          fontFamily: `Greycliff CF, ${theme.fontFamily}`,
+        style={{
+          fontFamily: `Greycliff CF, sans-serif`,
           fontWeight: 900,
-        })}
+          textAlign: "center",
+        }}
       >
         Hello 👋, please login below
       </Title>