Updated packages, updated theme icon & added dynamic weather page tit…

…les.
dn54321 · Sep 8, 2024 · 230c50a · 230c50a
1 parent daefb7e
commit 230c50a
Show file tree

Hide file tree

Showing 12 changed files with 2,136 additions and 3,804 deletions.
diff --git a/.gitignore b/.gitignore
@@ -17,6 +17,7 @@ coverage
 # production
 /build
 /built
+/false
 
 # misc
 .DS_Store

diff --git a/app/icons/page.tsx b/app/icons/page.tsx
@@ -2,7 +2,7 @@
 import { Box, Card, CardActionArea, CardContent, Container, Divider, Toolbar, Typography } from "@mui/material";
 import Stack from "@mui/material/Stack";
 import React from "react";
-import Grid from "@mui/system/Unstable_Grid";
+import Grid from "@mui/material/Grid2";
 import { weatherIconShowcase } from "./layout";
 import { useRouter } from "next/navigation";
 import { WeatherIcon } from "@components/ui/weather-icon";
@@ -16,7 +16,7 @@ export default function Page() {
             <Divider />
             <Grid container spacing={2} mt="20px">
                 {weatherIconShowcase.map(weatherIcon => (
-                    <Grid key={weatherIcon.id} xs={6} md={4} lg={3}>
+                    <Grid key={weatherIcon.id} size={{ xs: 6, md: 4, lg: 3 }}>
                         <Card data-testid="icon-card">
                             <CardActionArea onClick={() => router.push(`icons/weather/${weatherIcon.id}`)}>
                                 <CardContent>

diff --git a/app/icons/weather/[id]/page.tsx b/app/icons/weather/[id]/page.tsx
@@ -2,7 +2,7 @@
 import { Box, Container, Toolbar, Typography } from "@mui/material";
 import Stack from "@mui/material/Stack";
 import React from "react";
-import Grid from "@mui/system/Unstable_Grid";
+import Grid from "@mui/material/Grid2";
 import { WeatherIcon } from "@components/ui/weather-icon";
 import { weatherIconShowcase } from "@project/app/icons/layout";
 
@@ -18,7 +18,7 @@ export default function Page({ params }: PageProps) {
             <Toolbar />
             <Stack direction={{ xs: "column", md: "row" }} alignItems="center">
                 <Box fontSize="15em"><WeatherIcon id={weatherId} /></Box>
-                <Grid xs={12} sm={6} fontSize="20em">
+                <Grid size={{ xs: 12, sm: 6 }} fontSize="20em">
                     {
                         weatherDetails === undefined
                             ? <Typography variant="body2">Invalid ID. Please try again later.</Typography>

diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -1,9 +1,10 @@
 "use client";
-import { Button, Stack, Box, Grid, Container } from "@mui/material";
+import { Button, Stack, Box, Container } from "@mui/material";
 import Head from "next/head";
 import CloudIcon from "@mui/icons-material/Cloud";
 import styled from "@mui/system/styled";
 import { ThemeToggleButton } from "@components/ui/theme-toggle-button";
+import Grid from "@mui/material/Grid2";
 import React from "react";
 
 interface IconBoxProps {
@@ -72,13 +73,13 @@ export default function NotFound() {
                         width: "100%",
                     }}
                 >
-                    <Grid item xs={12} md={6}>
+                    <Grid size={{ xs: 12, md: 6 }}>
                         <IconBox>
                             <CloudIcon />
                             <CloudIcon />
                         </IconBox>
                     </Grid>
-                    <Grid item xs={12} md={6}>
+                    <Grid size={{ xs: 12, md: 6 }}>
                         <Stack
                             alignItems="center"
                             justifyContent={{ sm: "initial", md: "center" }}

diff --git a/app/weather/[location]/page.tsx b/app/weather/[location]/page.tsx
@@ -1,6 +1,6 @@
 "use client";
-import { Box, Container, Grid, Stack } from "@mui/material";
-import Head from "next/head";
+import { Box, Container, Stack } from "@mui/material";
+import Grid from "@mui/material/Grid2";
 
 import { DailyWeatherCardWidget } from "@components/widgets/daily-weather-card-widget";
 
@@ -49,27 +49,25 @@ export default function Page({ params }: PageProps) {
 
     return (
         <Box>
-            <Head>
-                <title>{locationShortForm ? `${locationShortForm} - Weaget` : "Weaget" }</title>
-            </Head>
+            <title>{locationShortForm ? `${locationShortForm} - Weaget` : "Weaget" }</title>
             <Box display="grid" gridTemplateRows="80px auto max-content" gap={1} height="100%" width="100%">
                 <Box sx={{ gridRow: "1" }}><Navbar /></Box>
                 <Box>
                     <Container maxWidth="lg" sx={{ height: "fit-content", gridRow: "2" }}>
                         <Grid container spacing={2} mt="1px">
-                            <Grid item xs={12}>
+                            <Grid size={{ xs: 12 }}>
                                 <Stack spacing={2}>
                                     <WeatherDisplayWidget weatherData={weatherQuery.data} location={locationLongForm} />
                                     <DailyWeatherCardWidget weatherData={weatherQuery.data} />
                                 </Stack>
                             </Grid>
-                            <Grid item xs={12} md={8}>
+                            <Grid size={{ xs: 12, md: 8 }}>
                                 <Stack spacing={2}>
                                     <WeatherStatWidget weatherData={weatherQuery.data} />
                                     <HourlyWeatherStripWidget weatherData={weatherQuery.data} />
                                 </Stack>
                             </Grid>
-                            <Grid item xs={12} md={4}>
+                            <Grid size={{ xs: 12, md: 4 }}>
                                 <Stack spacing={2}>
                                     <PollutionWidget pollutionData={pollutionQuery.data} />
                                     <RainfallWidget weatherData={weatherQuery.data} />

diff --git a/next-env.d.ts b/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/package.json b/package.json
@@ -3,8 +3,8 @@
   "private": true,
   "type": "module",
   "engines": {
-    "npm": ">=10.7.0",
-    "node": ">=20.15.0"
+    "npm": ">=10.8.2",
+    "node": ">=20.17.0"
   },
   "scripts": {
     "dev": "cross-env NODE_ENV='development' NODE_OPTIONS='--inspect' next dev",
@@ -19,70 +19,70 @@
   },
   "dependencies": {
     "@emotion/cache": "latest",
-    "@emotion/react": "^11.11.4",
+    "@emotion/react": "^11.13.3",
     "@emotion/server": "latest",
-    "@emotion/styled": "^11.11.5",
+    "@emotion/styled": "^11.13.0",
     "@faker-js/faker": "^8.4.1",
+    "@fontsource/roboto": "^5.0.15",
     "@mdi/js": "^7.4.47",
     "@mdi/react": "^1.6.1",
-    "@mui/icons-material": "6.0.0-alpha.13",
-    "@mui/material": "6.0.0-alpha.13",
-    "@mui/material-nextjs": "^5.15.11",
-    "@mui/system": "^5.15.20",
-    "@next/bundle-analyzer": "^14.2.4",
-    "@tanstack/react-query": "^5.50.1",
+    "@mui/icons-material": "^6.0.2",
+    "@mui/material": "^6.0.2",
+    "@mui/material-nextjs": "^6.0.2",
+    "@mui/system": "^6.0.2",
+    "@next/bundle-analyzer": "^14.2.8",
+    "@tanstack/react-query": "^5.55.0",
     "@tanstack/react-query-devtools": "5.50.1",
     "@vercel/analytics": "^1.3.1",
     "@vercel/speed-insights": "^1.0.12",
-    "luxon": "^3.4.4",
-    "next": "^14.2.4",
-    "npm": "^10.8.1",
+    "luxon": "^3.5.0",
+    "next": "^14.2.8",
+    "npm": "^10.8.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "recharts": "2.13.0-alpha.4",
     "request-ip": "^3.3.0",
     "three-dots": "^0.3.2",
     "throttle-debounce": "^5.0.2",
     "zod": "^3.23.8",
-    "zustand": "^4.5.4"
+    "zustand": "^4.5.5"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.6.1",
-    "@dword-design/eslint-plugin-import-alias": "^5.0.0",
-    "@storybook/addon-essentials": "^8.1.11",
-    "@storybook/addon-interactions": "^8.1.11",
-    "@storybook/addon-links": "^8.1.11",
-    "@storybook/addon-onboarding": "^8.1.11",
-    "@storybook/blocks": "^8.1.11",
-    "@storybook/nextjs": "^8.1.11",
-    "@storybook/react": "^8.1.11",
-    "@storybook/test": "^8.1.11",
-    "@stylistic/eslint-plugin": "^2.3.0",
-    "@testing-library/dom": "^10.3.1",
-    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^16.0.0",
+    "@chromatic-com/storybook": "^1.9.0",
+    "@dword-design/eslint-plugin-import-alias": "^5.1.1",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-onboarding": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/nextjs": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/test": "^8.2.9",
+    "@stylistic/eslint-plugin": "^2.7.2",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/luxon": "^3.4.2",
     "@types/node": "20.14.9",
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "@types/request-ip": "^0.0.41",
     "@types/throttle-debounce": "^5.0.2",
-    "@typescript-eslint/eslint-plugin": "^7.15.0",
-    "@typescript-eslint/parser": "^7.15.0",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
     "@vitejs/plugin-react": "^4.3.1",
     "@vitest/coverage-v8": "^1.6.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-config-next": "14.2.4",
     "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-unused-imports": "^4.0.0",
-    "husky": "^9.0.11",
-    "jsdom": "^24.1.0",
-    "msw": "^2.3.1",
-    "storybook": "^8.1.11",
-    "typescript": "^5.5.3",
-    "user-event:14.3.0": "link:@testing-library/user-event:14.3.0",
+    "eslint-plugin-unused-imports": "^4.1.3",
+    "husky": "^9.1.5",
+    "jsdom": "^24.1.3",
+    "msw": "^2.4.3",
+    "storybook": "^8.2.9",
+    "typescript": "^5.5.4",
     "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^1.6.0"
   },