move client typings to ~/types/client

Signed-off-by: Vu Van Dung <joulev.vvd@yahoo.com>

__tests__/client/components/docs.test.tsx

@@ -4,7 +4,7 @@ import mockRouter from "next-router-mock";
 
 import Nav from "~/client/components/docs/navbar";
 
-import { NavData } from "~/types/docs.type";
+import { NavData } from "~/types/client/docs.type";
 
 jest.mock("next/router", () => require("next-router-mock"));
 

__tests__/client/layouts/blog.test.tsx

@@ -6,7 +6,7 @@ import useBuildId from "~/client/hooks/buildId";
 
 import BlogLayout from "~/client/layouts/blog";
 
-import { Author } from "~/types/utils.type";
+import { Author } from "~/types/client/utils.type";
 
 type Props = { authors?: Author[]; wordCount?: number };
 const Component: FC<Props> = ({ authors, wordCount }) => (

client/components/anchor.tsx

@@ -2,7 +2,7 @@ import clsx from "clsx";
 import Link from "next/link";
 import { forwardRef } from "react";
 
-import { HyperlinkProps } from "~/types/components.type";
+import { HyperlinkProps } from "~/types/client/components.type";
 
 /**
  * A wrapper for `next/link` to handle all anchors inside the app, including in-page links (#),

client/components/app/navbar/index.tsx

@@ -1,6 +1,6 @@
 import { FC } from "react";
 
-import { CurrentPage } from "~/types/page.type";
+import { CurrentPage } from "~/types/client/page.type";
 
 import MainNav from "./main";
 import TopNav from "./top";

client/components/app/navbar/main.tsx

@@ -3,7 +3,7 @@ import { ComponentProps, FC, forwardRef, useRef, useState } from "react";
 
 import A from "~/client/components/anchor";
 
-import { CurrentPage, NavbarItems, PageType } from "~/types/page.type";
+import { CurrentPage, NavbarItems, PageType } from "~/types/client/page.type";
 
 type Item = {
   href: string;

client/components/app/navbar/top.tsx

@@ -16,8 +16,8 @@ import { signOut } from "~/client/lib/firebase/auth";
 import A from "~/client/components/anchor";
 import ModeSwitcher from "~/client/components/modeSwitcher";
 
-import { CurrentPage } from "~/types/page.type";
-import { IconType } from "~/types/utils.type";
+import { CurrentPage } from "~/types/client/page.type";
+import { IconType } from "~/types/client/utils.type";
 
 import defaultAvatar from "~/public/images/default-photo.svg";
 import logo from "~/public/images/logo.svg";

client/components/banner.tsx

@@ -1,8 +1,8 @@
 import clsx from "clsx";
 import { FC } from "react";
 
-import { BannerProps } from "~/types/components.type";
-import { BannerVariant } from "~/types/utils.type";
+import { BannerProps } from "~/types/client/components.type";
+import { BannerVariant } from "~/types/client/utils.type";
 
 /**
  * A banner (for warnings, etc.)

client/components/blogImage.tsx

@@ -2,7 +2,7 @@
 import clsx from "clsx";
 import { FC } from "react";
 
-import { BlogImageProps } from "~/types/components.type";
+import { BlogImageProps } from "~/types/client/components.type";
 
 const BlogImage: FC<BlogImageProps> = ({ src, caption }) => (
   <div className="flex flex-col items-center gap-3 py-3 mb-3">

client/components/buttons.tsx

@@ -1,8 +1,8 @@
 import clsx from "clsx";
 import { ForwardedRef, forwardRef } from "react";
 
-import { ButtonProps } from "~/types/components.type";
-import { ButtonVariant } from "~/types/utils.type";
+import { ButtonProps } from "~/types/client/components.type";
+import { ButtonVariant } from "~/types/client/utils.type";
 
 import A from "./anchor";
 import IconLabel from "./utils/iconAndLabel";

client/components/comments.tsx

@@ -2,7 +2,7 @@ import clsx from "clsx";
 import { formatDistanceToNowStrict, parseISO } from "date-fns";
 import { FC } from "react";
 
-import { CommentsProps } from "~/types/components.type";
+import { CommentsProps } from "~/types/client/components.type";
 
 /**
  * Display comments as in `/app/site/[siteName]/[pageName]/index.tsx`

client/components/copiableCode.tsx

@@ -4,7 +4,7 @@ import { FC, useState } from "react";
 import CheckOutlinedIcon from "@mui/icons-material/CheckOutlined";
 import ContentCopyOutlinedIcon from "@mui/icons-material/ContentCopyOutlined";
 
-import { CopiableCodeProps } from "~/types/components.type";
+import { CopiableCodeProps } from "~/types/client/components.type";
 
 import IconLabel from "./utils/iconAndLabel";
 

client/components/docs/navbar.tsx

@@ -1,6 +1,6 @@
 import { FC, Fragment } from "react";
 
-import { NavData } from "~/types/docs.type";
+import { NavData } from "~/types/client/docs.type";
 
 import SidebarLink from "./sidebarlink";
 

client/components/docs/sidebar.tsx

@@ -13,7 +13,7 @@ import A from "~/client/components/anchor";
 import Input from "~/client/components/forms/input";
 import ModeSwitcher from "~/client/components/modeSwitcher";
 
-import { NavData } from "~/types/docs.type";
+import { NavData } from "~/types/client/docs.type";
 
 import logoText from "~/public/images/logo-text.svg";
 

client/components/footer.tsx

@@ -12,8 +12,8 @@ import useBuildId from "~/client/hooks/buildId";
 import A from "~/client/components/anchor";
 import ModeSwitcher from "~/client/components/modeSwitcher";
 
-import { FooterProps } from "~/types/components.type";
-import { IconType } from "~/types/utils.type";
+import { FooterProps } from "~/types/client/components.type";
+import { IconType } from "~/types/client/utils.type";
 
 import logoText from "~/public/images/logo-text.svg";
 

client/components/forms/input.tsx

@@ -3,7 +3,7 @@ import { FC } from "react";
 
 import IconLabel from "~/client/components/utils/iconAndLabel";
 
-import { InputDetachedLabelProps, InputProps } from "~/types/components.type";
+import { InputDetachedLabelProps, InputProps } from "~/types/client/components.type";
 
 /**
  * A wrapper for the default `input` component, with styling from the design system and label

client/components/forms/select.tsx

@@ -3,7 +3,7 @@ import { FC } from "react";
 
 import IconLabel from "~/client/components/utils/iconAndLabel";
 
-import { SelectProps } from "~/types/components.type";
+import { SelectProps } from "~/types/client/components.type";
 
 /**
  * A wrapper for the default `select` component, with styling from the design system and label

client/components/home/section.tsx

@@ -1,6 +1,6 @@
 import { FC } from "react";
 
-import { SectionProps } from "~/types/components.type";
+import { SectionProps } from "~/types/client/components.type";
 
 /**
  * A section in the home page. If an illustration is available, the section is displayed with the

client/components/home/window.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { FC } from "react";
 
-import { WindowProps } from "~/types/components.type";
+import { WindowProps } from "~/types/client/components.type";
 
 const MacOSWindowButton: FC = () => (
   <div className="border-r border-b border-card h-12 px-4.5 flex flex-row items-center shrink-0">

client/components/modal.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { FC } from "react";
 
-import { ModalProps } from "~/types/components.type";
+import { ModalProps } from "~/types/client/components.type";
 
 /**
  * A modal. Well, what else can I say?

client/components/modeSwitcher.tsx

@@ -7,7 +7,7 @@ import LightModeOutlinedIcon from "@mui/icons-material/LightModeOutlined";
 
 import { useMode } from "~/client/hooks/theme";
 
-import { IconType, Mode } from "~/types/utils.type";
+import { IconType, Mode } from "~/types/client/utils.type";
 
 /**
  * The mode switcher component is used to switch between light and dark mode. It's not customisable

client/components/postHeading.tsx

@@ -4,7 +4,7 @@ import TagOutlinedIcon from "@mui/icons-material/TagOutlined";
 
 import A from "~/client/components/anchor";
 
-import { PostHeadingProps } from "~/types/components.type";
+import { PostHeadingProps } from "~/types/client/components.type";
 
 const PostHeading: FC<PostHeadingProps & { level: number }> = ({ level, id, children }) => {
   const HeadingTag: keyof JSX.IntrinsicElements = `h${level as 1 | 2 | 3 | 4 | 5 | 6}`;

client/components/seo.tsx

@@ -1,7 +1,7 @@
 import { NextSeo } from "next-seo";
 import { FC } from "react";
 
-import { SeoProps } from "~/types/components.type";
+import { SeoProps } from "~/types/client/components.type";
 
 const Seo: FC<SeoProps> = ({ title, description, image, url }) => (
   <NextSeo

client/components/sideBySide.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { FC, useEffect, useRef } from "react";
 
-import { SideBySideProps } from "~/types/components.type";
+import { SideBySideProps } from "~/types/client/components.type";
 
 /**
  * Create a resizable side-by-side component.

client/components/siteGraph.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { FC, useEffect, useRef, useState } from "react";
 
-import { SiteGraphProps } from "~/types/components.type";
+import { SiteGraphProps } from "~/types/client/components.type";
 
 const DateText: FC<{ daysAgo: number }> = ({ daysAgo }) => {
   if (daysAgo === 0) return <>Today</>;

client/components/utils/iconAndLabel.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { FC } from "react";
 
-import { IconAndLabelProps } from "~/types/components.type";
+import { IconAndLabelProps } from "~/types/client/components.type";
 
 /**
  * Consistently place a MUI icon in front of a label

client/context/auth.ts

@@ -1,6 +1,6 @@
 import { createContext } from "react";
 
-import { AppAuth } from "~/types/auth.type";
+import { AppAuth } from "~/types/client/auth.type";
 
 const AuthContext = createContext<AppAuth>({
     user: null,

client/context/breakpoint.ts

@@ -1,6 +1,6 @@
 import { createContext } from "react";
 
-import { BreakpointContextType } from "~/types/utils.type";
+import { BreakpointContextType } from "~/types/client/utils.type";
 
 const BreakpointContext = createContext<BreakpointContextType>("unknown");
 

client/context/mode.ts

@@ -1,6 +1,6 @@
 import { createContext } from "react";
 
-import { ModeContextType } from "~/types/utils.type";
+import { ModeContextType } from "~/types/client/utils.type";
 
 const ModeContext = createContext<ModeContextType>({
     mode: "system",

client/hooks/auth.ts

@@ -5,7 +5,7 @@ import { useContext, useEffect, useState } from "react";
 import AuthContext from "~/client/context/auth";
 import firebaseApp from "~/client/lib/firebase/app";
 
-import { AppAuth } from "~/types/auth.type";
+import { AppAuth } from "~/types/client/auth.type";
 
 import { endProgress, startProgress } from "./nprogress";
 

client/hooks/breakpoint.ts

@@ -4,7 +4,7 @@ import theme from "~/config/tailwindTheme";
 
 import BreakpointContext from "~/client/context/breakpoint";
 
-import { Breakpoint } from "~/types/utils.type";
+import { Breakpoint } from "~/types/client/utils.type";
 
 /**
  * Get the current browser breakpoint.

client/hooks/buildId.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 
-import { BuildInfo } from "~/types/utils.type";
+import { BuildInfo } from "~/types/client/utils.type";
 
 function parseBuildId(buildId: string): BuildInfo {
     if (process.env.NODE_ENV === "development") return { hash: "", timestamp: 0 };

client/hooks/theme.ts

@@ -2,7 +2,7 @@ import { useContext, useEffect, useState } from "react";
 
 import ModeContext from "~/client/context/mode";
 
-import { Mode } from "~/types/utils.type";
+import { Mode } from "~/types/client/utils.type";
 
 /**
  * Check whether the current mode is a dark theme or not, especially for "system" mode.

client/layouts/app.tsx

@@ -8,7 +8,7 @@ import Navbar from "~/client/components/app/navbar";
 import AuthProvider from "~/client/components/auth/provider";
 import Footer from "~/client/components/footer";
 
-import { AppProps } from "~/types/components.type";
+import { AppProps } from "~/types/client/components.type";
 
 const App: FC<AppProps> = ({ title, removePadding, loadingScreen, children, ...rest }) => {
   const { user } = useAuth();

client/layouts/blog.tsx

@@ -8,8 +8,8 @@ import Footer from "~/client/components/footer";
 import HomeNavbar from "~/client/components/home/navbar";
 import Seo from "~/client/components/seo";
 
-import { BlogLayoutProps } from "~/types/components.type";
-import { Author } from "~/types/utils.type";
+import { BlogLayoutProps } from "~/types/client/components.type";
+import { Author } from "~/types/client/utils.type";
 
 import defaultAvatar from "~/public/images/default-photo.svg";
 import logo from "~/public/images/logo-text.svg";

client/lib/documentation.ts

@@ -2,7 +2,7 @@ import { readFileSync } from "fs";
 import { parse as JSON5Parse } from "json5";
 import { join } from "path";
 
-import { DocsData, NavData } from "~/types/docs.type";
+import { DocsData, NavData } from "~/types/client/docs.type";
 
 const docsDir = join(process.cwd(), "docs");
 

client/lib/firebase/auth.ts

@@ -13,7 +13,7 @@ import {
 
 import { NOT_AUTHENTICATED } from "~/client/lib/errors";
 
-import { AppAuth, Provider } from "~/types/auth.type";
+import { AppAuth, Provider } from "~/types/client/auth.type";
 
 import firebaseApp from "./app";
 

client/lib/getOgImage.ts

@@ -2,7 +2,7 @@ import captureWebsite from "capture-website";
 import { createHash } from "crypto";
 import { mkdirSync, writeFileSync } from "fs";
 
-import { OgImageProps } from "~/types/components.type";
+import { OgImageProps } from "~/types/client/components.type";
 
 export default async function getOgImage({ title, label }: OgImageProps) {
     if (!process.env.VERCEL) return "only run on Vercel";

client/lib/orbital/logJoulev.ts

@@ -1,4 +1,4 @@
-import { ProjectLog } from "~/types/utils.type";
+import { ProjectLog } from "~/types/client/utils.type";
 
 export default async function getProjectLogJoulev(): Promise<ProjectLog> {
     try {

client/lib/prism.tsx

@@ -1,7 +1,7 @@
 import { highlight, languages } from "prismjs";
 import { renderToStaticMarkup } from "react-dom/server";
 
-import { PrismOptions } from "~/types/utils.type";
+import { PrismOptions } from "~/types/client/utils.type";
 
 function addLineNumbers(codeHtml: string, lineNumberFrom: number) {
   const lines = codeHtml.split("\n");

constants/authors.ts

@@ -1,4 +1,4 @@
-import { Author } from "~/types/utils.type";
+import { Author } from "~/types/client/utils.type";
 
 const authors: { [key: string]: Author } = {
     joulev: {

pages/_app.tsx

@@ -11,7 +11,7 @@ import A from "~/client/components/anchor";
 import PostHeading from "~/client/components/postHeading";
 import { ErrorBoundary } from "~/client/layouts/errors";
 
-import { AppPropsWithLayout } from "~/types/utils.type";
+import { AppPropsWithLayout } from "~/types/client/utils.type";
 
 import "~/client/styles/globals.css";
 

pages/api/project-log/joulev.ts

@@ -2,7 +2,7 @@ import { NextApiHandler } from "next";
 
 import getProjectLogJoulev from "~/client/lib/orbital/logJoulev";
 
-import { ProjectLog } from "~/types/utils.type";
+import { ProjectLog } from "~/types/client/utils.type";
 
 /**
  * A wrapper to fetch the project log from Google Sheets. I don't want to expose the Google Sheets

pages/app/account.tsx

@@ -33,8 +33,8 @@ import Modal from "~/client/components/modal";
 import RightAligned from "~/client/components/utils/rightAligned";
 import AppLayout from "~/client/layouts/app";
 
-import { Provider } from "~/types/auth.type";
-import { NextPageWithLayout } from "~/types/utils.type";
+import { Provider } from "~/types/client/auth.type";
+import { NextPageWithLayout } from "~/types/client/utils.type";
 
 type Msg = { type: "success" | "error"; message: ReactNode } | null;
 

pages/app/dashboard.tsx

@@ -14,7 +14,7 @@ import Input from "~/client/components/forms/input";
 import Select from "~/client/components/forms/select";
 import AppLayout from "~/client/layouts/app";
 
-import { NextPageWithLayout } from "~/types/utils.type";
+import { NextPageWithLayout } from "~/types/client/utils.type";
 
 import sites from "~/sample/sites.json";