From 78fe1bbceea5edf4bf4a92d88da8136245c2b51f Mon Sep 17 00:00:00 2001
From: kilemensi <kilemensi@gmail.com>
Date: Sat, 31 Aug 2024 09:48:17 +0300
Subject: [PATCH] Use ts(x) instead of js

---
 apps/engineeringblog/app/StyledRoot.tsx       |  17 ---
 apps/engineeringblog/app/layout.tsx           |  24 +++-
 apps/engineeringblog/components/Logo/Logo.js  |  40 -------
 apps/engineeringblog/components/Logo/Logo.tsx | 105 ++++++++++++++++++
 apps/engineeringblog/components/Logo/index.js |   3 -
 apps/engineeringblog/components/Logo/index.ts |   5 +
 .../DesktopNavBar/DesktopNavBar.tsx}          |  17 +--
 .../DesktopNavBar/index.ts}                   |   0
 .../MobileNavBar/MobileNavBar.tsx}            |  27 ++---
 .../index.js => NavBar/MobileNavBar/index.ts} |   0
 .../components/NavBar/NavBar.js               |  78 -------------
 .../components/NavBar/NavBar.tsx              |  75 +++++++++++++
 .../components/NavBar/NavBarProps.tsx         |   9 ++
 .../components/NavBar/index.js                |   3 -
 .../components/NavBar/index.ts                |   5 +
 apps/engineeringblog/theme/index.ts           |   2 +
 apps/engineeringblog/types.d.ts               |   2 +
 17 files changed, 238 insertions(+), 174 deletions(-)
 delete mode 100644 apps/engineeringblog/app/StyledRoot.tsx
 delete mode 100644 apps/engineeringblog/components/Logo/Logo.js
 create mode 100644 apps/engineeringblog/components/Logo/Logo.tsx
 delete mode 100644 apps/engineeringblog/components/Logo/index.js
 create mode 100644 apps/engineeringblog/components/Logo/index.ts
 rename apps/engineeringblog/components/{DesktopNavBar/DesktopNavBar.js => NavBar/DesktopNavBar/DesktopNavBar.tsx} (57%)
 rename apps/engineeringblog/components/{DesktopNavBar/index.js => NavBar/DesktopNavBar/index.ts} (100%)
 rename apps/engineeringblog/components/{MobileNavBar/MobileNavBar.js => NavBar/MobileNavBar/MobileNavBar.tsx} (84%)
 rename apps/engineeringblog/components/{MobileNavBar/index.js => NavBar/MobileNavBar/index.ts} (100%)
 delete mode 100644 apps/engineeringblog/components/NavBar/NavBar.js
 create mode 100644 apps/engineeringblog/components/NavBar/NavBar.tsx
 create mode 100644 apps/engineeringblog/components/NavBar/NavBarProps.tsx
 delete mode 100644 apps/engineeringblog/components/NavBar/index.js
 create mode 100644 apps/engineeringblog/components/NavBar/index.ts
 create mode 100644 apps/engineeringblog/types.d.ts

diff --git a/apps/engineeringblog/app/StyledRoot.tsx b/apps/engineeringblog/app/StyledRoot.tsx
deleted file mode 100644
index c86e74e25..000000000
--- a/apps/engineeringblog/app/StyledRoot.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-"use client";
-import { ThemeProvider } from "@mui/material/styles";
-import theme from "@/engineeringblog/theme";
-import { CssBaseline } from "@mui/material";
-
-export default function StyledRoot({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      {children}
-    </ThemeProvider>
-  );
-}
diff --git a/apps/engineeringblog/app/layout.tsx b/apps/engineeringblog/app/layout.tsx
index 636aa7f3b..32ce49b59 100644
--- a/apps/engineeringblog/app/layout.tsx
+++ b/apps/engineeringblog/app/layout.tsx
@@ -1,7 +1,12 @@
-import type { Metadata } from "next";
-import Navbar from "@/engineeringblog/components/Navbar";
+import { CssBaseline, ThemeProvider } from "@mui/material";
 import { AppRouterCacheProvider } from "@mui/material-nextjs/v13-appRouter";
-import StyledRoot from "./StyledRoot";
+import type { Metadata } from "next";
+
+import NavBar from "@/engineeringblog/components/NavBar";
+import theme from "@/engineeringblog/theme";
+
+// TODO: blurWidth/blueHeight https://github.com/vercel/next.js/issues/56511
+import logoLight from "@/engineeringblog/assets/images/logo-light.png";
 
 export const metadata: Metadata = {
   title: "Technology | Code for Africa",
@@ -14,14 +19,21 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const logo = {
+    ...logoLight,
+    alt: "Technology | Code for Africa",
+    title: "Technology",
+  };
+
   return (
     <html lang="en">
       <body>
         <AppRouterCacheProvider>
-          <StyledRoot>
-            <Navbar />
+          <ThemeProvider theme={theme}>
+            <CssBaseline enableColorScheme />
+            <NavBar logo={logo} />
             {children}
-          </StyledRoot>
+          </ThemeProvider>
         </AppRouterCacheProvider>
       </body>
     </html>
diff --git a/apps/engineeringblog/components/Logo/Logo.js b/apps/engineeringblog/components/Logo/Logo.js
deleted file mode 100644
index 1df7cbec9..000000000
--- a/apps/engineeringblog/components/Logo/Logo.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import { ImageButton } from "@commons-ui/core";
-import { Divider, Link, Stack } from "@mui/material";
-import PropTypes from "prop-types";
-import React from "react";
-
-const Logo = React.forwardRef(function Logo(props, ref) {
-  const {
-    alt = "Technology | Code for Africa",
-    href = "https://codeforafrica.org",
-    src,
-    ...other
-  } = props;
-  return (
-    <Stack direction="horizontal" gap={1} alignItems="center" ref={ref}>
-      <ImageButton
-        {...other}
-        href={href}
-        src={src}
-        alt={alt}
-        sx={{ ...other?.sx, display: "flex" }}
-      />
-      <Link
-        color="text.primary"
-        href="/"
-        textTransform="uppercase"
-        typography="h3"
-        underline="none"
-        sx={({ typography }) => ({ fontFamily: typography.fontFamilyMono })}
-      >
-        Technology
-      </Link>
-    </Stack>
-  );
-});
-
-Logo.propTypes = {
-  src: PropTypes.string,
-};
-
-export default Logo;
diff --git a/apps/engineeringblog/components/Logo/Logo.tsx b/apps/engineeringblog/components/Logo/Logo.tsx
new file mode 100644
index 000000000..2f44cdc06
--- /dev/null
+++ b/apps/engineeringblog/components/Logo/Logo.tsx
@@ -0,0 +1,105 @@
+import { Link, Stack, SvgIcon } from "@mui/material";
+import { SxProps, Theme } from "@mui/material/styles";
+import Image, { ImageProps } from "next/image";
+import React from "react";
+
+import PreviousIcon from "@/engineeringblog/assets/icons/Type=chevron-left, Size=24, Color=CurrentColor.svg";
+
+export interface LogoProps extends ImageProps {
+  href?: string;
+  sx?: SxProps<Theme>;
+  title?: string;
+}
+
+const Logo = React.forwardRef(function Logo(
+  props: LogoProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const {
+    alt,
+    href: hrefProp,
+    src,
+    sx,
+    title,
+    ...other // All next/image supported props
+  } = props;
+  const logoHref = title?.length ? "https://codeforafrica.org" : "/";
+
+  return (
+    <Stack
+      direction="row"
+      spacing={1}
+      sx={{
+        color: "inherit",
+        alignItems: "center",
+        position: "relative",
+        ...sx,
+      }}
+      ref={ref}
+    >
+      <Link
+        color="inherit"
+        href={logoHref}
+        sx={(theme) => ({
+          "&>svg,&>img": {
+            transition: theme.transitions.create(["opacity", "transform"]),
+          },
+          "&:hover": {
+            "&>svg,&>img": {
+              opacity: 0.65,
+            },
+            "&>svg": {
+              transform: "translateX(-5px)",
+            },
+          },
+        })}
+      >
+        {title?.length ? (
+          <SvgIcon
+            sx={(theme) => ({
+              fill: { xs: "none" },
+              fontSize: 32,
+              left: -24,
+              opacity: 0,
+              position: "absolute",
+              right: 0,
+            })}
+          >
+            <PreviousIcon />
+          </SvgIcon>
+        ) : null}
+        <Image
+          {...other}
+          alt={alt}
+          priority
+          src={src}
+          style={{
+            height: 32,
+            width: "auto",
+          }}
+        />
+      </Link>
+      {title?.length ? (
+        <Link
+          color="text.primary"
+          href="/"
+          textTransform="uppercase"
+          typography="h4"
+          underline="none"
+          sx={({ transitions, typography }) => ({
+            display: "flex",
+            fontFamily: typography.fontFamilyMono,
+            transition: transitions.create(["opacity", "transform"]),
+            "&:hover": {
+              opacity: 0.65,
+            },
+          })}
+        >
+          Technology
+        </Link>
+      ) : null}
+    </Stack>
+  );
+});
+
+export default Logo;
diff --git a/apps/engineeringblog/components/Logo/index.js b/apps/engineeringblog/components/Logo/index.js
deleted file mode 100644
index b7d6439c1..000000000
--- a/apps/engineeringblog/components/Logo/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Logo from "./Logo";
-
-export default Logo;
diff --git a/apps/engineeringblog/components/Logo/index.ts b/apps/engineeringblog/components/Logo/index.ts
new file mode 100644
index 000000000..ef29c030a
--- /dev/null
+++ b/apps/engineeringblog/components/Logo/index.ts
@@ -0,0 +1,5 @@
+import type { LogoProps } from "./Logo";
+import Logo from "./Logo";
+
+export type { LogoProps };
+export default Logo;
diff --git a/apps/engineeringblog/components/DesktopNavBar/DesktopNavBar.js b/apps/engineeringblog/components/NavBar/DesktopNavBar/DesktopNavBar.tsx
similarity index 57%
rename from apps/engineeringblog/components/DesktopNavBar/DesktopNavBar.js
rename to apps/engineeringblog/components/NavBar/DesktopNavBar/DesktopNavBar.tsx
index d6f0443c3..1d7d74916 100644
--- a/apps/engineeringblog/components/DesktopNavBar/DesktopNavBar.js
+++ b/apps/engineeringblog/components/NavBar/DesktopNavBar/DesktopNavBar.tsx
@@ -1,10 +1,13 @@
 import { Grid } from "@mui/material";
-import PropTypes from "prop-types";
 import React from "react";
 
 import Logo from "@/engineeringblog/components/Logo";
+import type NavBarProps from "@/engineeringblog/components/NavBar/NavBarProps";
 
-const DesktopNavBar = React.forwardRef(function DesktopNavBar(props, ref) {
+const DesktopNavBar = React.forwardRef(function DesktopNavBar(
+  props: NavBarProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
   const { logo, sx } = props;
 
   return (
@@ -22,14 +25,4 @@ const DesktopNavBar = React.forwardRef(function DesktopNavBar(props, ref) {
   );
 });
 
-DesktopNavBar.propTypes = {
-  direction: PropTypes.string,
-  menu: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.string,
-      href: PropTypes.string,
-    }),
-  ),
-};
-
 export default DesktopNavBar;
diff --git a/apps/engineeringblog/components/DesktopNavBar/index.js b/apps/engineeringblog/components/NavBar/DesktopNavBar/index.ts
similarity index 100%
rename from apps/engineeringblog/components/DesktopNavBar/index.js
rename to apps/engineeringblog/components/NavBar/DesktopNavBar/index.ts
diff --git a/apps/engineeringblog/components/MobileNavBar/MobileNavBar.js b/apps/engineeringblog/components/NavBar/MobileNavBar/MobileNavBar.tsx
similarity index 84%
rename from apps/engineeringblog/components/MobileNavBar/MobileNavBar.js
rename to apps/engineeringblog/components/NavBar/MobileNavBar/MobileNavBar.tsx
index 9df1a5b24..52d0e2764 100644
--- a/apps/engineeringblog/components/MobileNavBar/MobileNavBar.js
+++ b/apps/engineeringblog/components/NavBar/MobileNavBar/MobileNavBar.tsx
@@ -4,12 +4,13 @@ import {
   Grid,
   IconButton,
   Slide,
+  SlideProps,
   SvgIcon,
 } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import PropTypes from "prop-types";
 import React from "react";
 
+import type NavBarProps from "@/engineeringblog/components/NavBar/NavBarProps";
 import Logo from "@/engineeringblog/components/Logo";
 import CloseIcon from "@/engineeringblog/assets/icons/Type=x, Size=24, Color=CurrentColor.svg";
 import MenuIcon from "@/engineeringblog/assets/icons/Type=menu, Size=24, Color=CurrentColor.svg";
@@ -29,11 +30,19 @@ const DialogContainer = styled(Dialog)(({ theme: { palette, spacing } }) => ({
   },
 }));
 
-const Transition = React.forwardRef(function Transition(props, ref) {
+interface TransitionProps extends SlideProps {}
+
+const Transition = React.forwardRef(function Transition(
+  props: TransitionProps,
+  ref,
+) {
   return <Slide direction="up" ref={ref} {...props} />;
 });
 
-const MobileNavBar = React.forwardRef(function MobileNavBar(props, ref) {
+const MobileNavBar = React.forwardRef(function MobileNavBar(
+  props: NavBarProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
   const { logo, sx } = props;
   const [open, setOpen] = React.useState(false);
 
@@ -88,7 +97,6 @@ const MobileNavBar = React.forwardRef(function MobileNavBar(props, ref) {
               justifyContent: "space-between",
               alignItems: "flex-start",
             }}
-            onClose={handleClose}
           ></DialogContent>
         </DialogContainer>
       </Grid>
@@ -96,15 +104,4 @@ const MobileNavBar = React.forwardRef(function MobileNavBar(props, ref) {
   );
 });
 
-MobileNavBar.propTypes = {
-  direction: PropTypes.string,
-  logo: PropTypes.shape({}),
-  menus: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.string,
-      href: PropTypes.string,
-    }),
-  ),
-};
-
 export default MobileNavBar;
diff --git a/apps/engineeringblog/components/MobileNavBar/index.js b/apps/engineeringblog/components/NavBar/MobileNavBar/index.ts
similarity index 100%
rename from apps/engineeringblog/components/MobileNavBar/index.js
rename to apps/engineeringblog/components/NavBar/MobileNavBar/index.ts
diff --git a/apps/engineeringblog/components/NavBar/NavBar.js b/apps/engineeringblog/components/NavBar/NavBar.js
deleted file mode 100644
index d647da4f0..000000000
--- a/apps/engineeringblog/components/NavBar/NavBar.js
+++ /dev/null
@@ -1,78 +0,0 @@
-"use client";
-
-import { NavBar as NavigationBar, Section } from "@commons-ui/core";
-import { alpha, useScrollTrigger, useTheme } from "@mui/material";
-import PropTypes from "prop-types";
-import React from "react";
-
-import DesktopNavBar from "@/engineeringblog/components/DesktopNavBar";
-import MobileNavBar from "@/engineeringblog/components/MobileNavBar";
-import logoLight from "@/engineeringblog/assets/images/logo-light.png";
-
-function ScrollStyle({ children, sx, ...other }) {
-  const theme = useTheme();
-  const trigger = useScrollTrigger({
-    disableHysteresis: true,
-    threshold: 0,
-  });
-
-  return React.cloneElement(children, {
-    ...other,
-    sx: trigger
-      ? {
-          ...sx,
-          backgroundColor: alpha(theme.palette.background.default, 0.9),
-          borderBottom: `1px solid ${theme.palette.divider}`,
-        }
-      : sx,
-  });
-}
-
-function NavBar({ logo: logoProp, menus, socialLinks }) {
-  const logo = logoProp || { height: 32, src: logoLight.src, width: 29.5 };
-
-  return (
-    <ScrollStyle
-      ToolbarProps={{ sx: { minHeight: { xs: 48, md: 56 } } }}
-      elevation={0}
-      sx={{
-        backgroundColor: "background.default",
-        border: "none",
-        borderBottom: "1px solid transparent",
-        p: 0,
-      }}
-    >
-      <NavigationBar>
-        <Section sx={{ px: { xs: 2.5, sm: 0 } }}>
-          <MobileNavBar
-            logo={logo}
-            menus={menus}
-            socialLinks={socialLinks}
-            sx={{
-              display: { xs: "flex", md: "none" },
-            }}
-          />
-          <DesktopNavBar
-            logo={logo}
-            menus={menus}
-            socialLinks={socialLinks}
-            sx={{
-              display: { xs: "none", md: "flex" },
-            }}
-          />
-        </Section>
-      </NavigationBar>
-    </ScrollStyle>
-  );
-}
-
-NavBar.propTypes = {
-  menus: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.string,
-      href: PropTypes.string,
-    }),
-  ),
-};
-
-export default NavBar;
diff --git a/apps/engineeringblog/components/NavBar/NavBar.tsx b/apps/engineeringblog/components/NavBar/NavBar.tsx
new file mode 100644
index 000000000..56a5d281a
--- /dev/null
+++ b/apps/engineeringblog/components/NavBar/NavBar.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import { NavBar as NavigationBar, Section } from "@commons-ui/core";
+import {
+  AppBarProps,
+  ToolbarProps,
+  alpha,
+  useScrollTrigger,
+  useTheme,
+} from "@mui/material";
+import React from "react";
+
+import type NavBarProps from "@/engineeringblog/components/NavBar/NavBarProps";
+import DesktopNavBar from "./DesktopNavBar";
+import MobileNavBar from "./MobileNavBar";
+
+interface ScrollStyleProps extends AppBarProps {
+  ToolbarProps: ToolbarProps;
+  children: React.ReactElement<any>;
+}
+
+function ScrollStyle({ children, sx, ...other }: ScrollStyleProps) {
+  const theme = useTheme();
+  const trigger = useScrollTrigger({
+    disableHysteresis: true,
+    threshold: 0,
+  });
+
+  return children
+    ? React.cloneElement(children, {
+        ...other,
+        sx: trigger
+          ? {
+              ...sx,
+              backgroundColor: alpha(theme.palette.background.default, 0.9),
+              borderBottom: `1px solid ${theme.palette.divider}`,
+            }
+          : sx,
+      })
+    : null;
+}
+
+function NavBar({ logo }: NavBarProps) {
+  return (
+    <ScrollStyle
+      ToolbarProps={{ sx: { minHeight: { xs: 48, md: 56 } } }}
+      elevation={0}
+      sx={{
+        backgroundColor: "background.default",
+        border: "none",
+        borderBottom: "1px solid transparent",
+        p: 0,
+      }}
+    >
+      <NavigationBar>
+        <Section sx={{ px: { xs: 2.5, sm: 0 } }}>
+          <MobileNavBar
+            logo={logo}
+            sx={{
+              display: { xs: "flex", md: "none" },
+            }}
+          />
+          <DesktopNavBar
+            logo={logo}
+            sx={{
+              display: { xs: "none", md: "flex" },
+            }}
+          />
+        </Section>
+      </NavigationBar>
+    </ScrollStyle>
+  );
+}
+
+export default NavBar;
diff --git a/apps/engineeringblog/components/NavBar/NavBarProps.tsx b/apps/engineeringblog/components/NavBar/NavBarProps.tsx
new file mode 100644
index 000000000..9f626be59
--- /dev/null
+++ b/apps/engineeringblog/components/NavBar/NavBarProps.tsx
@@ -0,0 +1,9 @@
+import { Theme, SxProps } from "@mui/material/styles";
+import { LogoProps } from "@/engineeringblog/components/Logo";
+
+interface NavBarProps {
+  logo: LogoProps;
+  sx?: SxProps<Theme>;
+}
+
+export default NavBarProps;
diff --git a/apps/engineeringblog/components/NavBar/index.js b/apps/engineeringblog/components/NavBar/index.js
deleted file mode 100644
index 085b6b525..000000000
--- a/apps/engineeringblog/components/NavBar/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import NavBar from "./NavBar";
-
-export default NavBar;
diff --git a/apps/engineeringblog/components/NavBar/index.ts b/apps/engineeringblog/components/NavBar/index.ts
new file mode 100644
index 000000000..757a2207f
--- /dev/null
+++ b/apps/engineeringblog/components/NavBar/index.ts
@@ -0,0 +1,5 @@
+import NavBar from "./NavBar";
+import type NavBarProps from "./NavBarProps";
+
+export type { NavBarProps };
+export default NavBar;
diff --git a/apps/engineeringblog/theme/index.ts b/apps/engineeringblog/theme/index.ts
index 008438231..126bef355 100644
--- a/apps/engineeringblog/theme/index.ts
+++ b/apps/engineeringblog/theme/index.ts
@@ -1,3 +1,5 @@
+"use client";
+
 import { ThemeOptions, createTheme } from "@mui/material/styles";
 import { deepmerge } from "@mui/utils";
 
diff --git a/apps/engineeringblog/types.d.ts b/apps/engineeringblog/types.d.ts
new file mode 100644
index 000000000..33ce257b0
--- /dev/null
+++ b/apps/engineeringblog/types.d.ts
@@ -0,0 +1,2 @@
+declare module "@commons-ui/core";
+declare module "@commons-ui/next";