feat: updated template with latest designs

.github/workflows/build-test.yaml

@@ -4,7 +4,6 @@ on:
     pull_request:
         branches:
             - master
-            - dev
     push:
         branches:
             - master

constants/variables.ts

@@ -1,4 +1,4 @@
-export const frontendBaseUrl: string =
-	process.env.NEXT_PUBLIC_FRONTEND_BASE_URL + "";
-export const backendBaseUrl: string =
-	process.env.NEXT_PUBLIC_BACKEND_BASE_URL + "";
+export const frontendBaseUrl: string = process.env
+	.NEXT_PUBLIC_FRONTEND_BASE_URL as string;
+export const backendBaseUrl: string = process.env
+	.NEXT_PUBLIC_BACKEND_BASE_URL as string;

controllers/user.ts

@@ -13,26 +13,3 @@ export const getAllUsers = async (req: ApiRequest, res: ApiResponse) => {
 		return res.status(500).json({ error: RESPONSE_MESSAGES.SERVER_ERROR });
 	}
 };
-
-export const getUserById = async (req: ApiRequest, res: ApiResponse) => {
-	try {
-		const { id } = req.query;
-		const user = await User.findById(id).select("-password");
-		if (!user) {
-			return res
-				.status(404)
-				.json({ error: "User with the given id does not exist" });
-		}
-		return res
-			.status(200)
-			.json({ data: user, message: RESPONSE_MESSAGES.SUCCESS });
-	} catch (error: any) {
-		console.error(error);
-		if (error.kind === "ObjectId") {
-			return res
-				.status(404)
-				.json({ error: "User with the given id does not exist" });
-		}
-		return res.status(500).json({ error: RESPONSE_MESSAGES.SERVER_ERROR });
-	}
-};

db/index.ts

@@ -22,7 +22,7 @@ const connectDB = async () => {
 			return db;
 		})
 		.catch((err) => {
-			console.log("Error connecting to MongoDB", err);
+			console.error("Error connecting to MongoDB", err);
 			return err;
 		});
 

interfaces/api.ts

@@ -1,13 +1,13 @@
 import { NextApiRequest, NextApiResponse } from "next";
 
 interface ApiRequest extends NextApiRequest {
-	user: {
+	user?: {
 		id: string;
 	};
 }
 
 interface ApiResponse extends NextApiResponse {
-	user: {
+	user?: {
 		id: string;
 	};
 }

library/Typography/index.tsx

@@ -0,0 +1,29 @@
+import { TypographyProps } from "./types";
+import styles from "./styles.module.scss";
+import { stylesConfig } from "@/utils/functions";
+import React from "react";
+
+const classes = stylesConfig(styles, "typography-");
+
+const Typography: React.FC<TypographyProps> = ({
+	type = "body",
+	variant = "medium",
+	format = "regular",
+	children,
+	className,
+	...rest
+}: TypographyProps) => {
+	return (
+		<span
+			className={[
+				classes([type, variant, format].join("-")),
+				className,
+			].join(" ")}
+			{...rest}
+		>
+			{children}
+		</span>
+	);
+};
+
+export default Typography;

library/Typography/styles.module.scss

@@ -0,0 +1,17 @@
+@import "@/styles/config/typography";
+
+.typography {
+	@each $type in $types {
+		@each $variant in $variants {
+			@each $format in $formats {
+				&-#{$type}-#{$variant}-#{$format} {
+					@include typography($type, $variant, $format);
+				}
+
+				&-#{$type}-#{$variant} {
+					@include typography($type, $variant, $format);
+				}
+			}
+		}
+	}
+}

library/Typography/types.ts

@@ -0,0 +1,68 @@
+/* 
+    Font Type
+    - Heading
+    - Body
+
+    Font Variant
+    - Heading
+        - Display
+        - Subtitle
+        - Title 1
+        - Title 2
+        - Title 3
+        - Title 4
+        - Eyebrow
+    - Body
+        - Extra Large
+        - Large
+        - Medium
+        - Small
+    
+    Font Format
+    - Body
+        - Regular
+        - Medium
+        - Bold
+        - Underlined
+        - Italic
+        - Bold Italic
+ */
+
+import React from "react";
+
+export type FontType = "heading" | "body";
+export type FontVariant<T extends FontType> = T extends "heading"
+	?
+			| "display"
+			| "subtitle"
+			| "title-1"
+			| "title-2"
+			| "title-3"
+			| "title-4"
+			| "eyebrow"
+	: "extra-large" | "large" | "medium" | "small";
+export type FontFormat<T extends FontType> = T extends "heading"
+	? never
+	: "regular" | "medium" | "bold" | "underlined" | "italic" | "bold-italic";
+
+export interface FontHeading {
+	type: "heading";
+	variant: FontVariant<"heading">;
+	format?: FontFormat<"heading">;
+}
+
+export interface FontBody {
+	type: "body";
+	variant: FontVariant<"body">;
+	format?: FontFormat<"body">;
+}
+
+export type Font = FontHeading | FontBody;
+
+export type TypographyProps = Font & {
+	children: React.ReactNode;
+	className?: string;
+	style?: React.CSSProperties;
+	title?: string;
+	onClick?: () => void;
+};

models/User.ts

@@ -16,10 +16,6 @@ const UserSchema = new mongoose.Schema(
 			type: String,
 			required: true,
 		},
-		date: {
-			type: Date,
-			default: Date.now,
-		},
 		role: {
 			type: String,
 			default: USER_ROLES.USER,

package.json

@@ -10,9 +10,9 @@
 		"format": "prettier --write .",
 		"format:check": "prettier --check .",
 		"prepare": "husky install",
-		"test": "jest",
-		"test:watch": "jest --watch",
-		"test:coverage": "jest --coverage"
+		"test": "jest --passWithNoTests",
+		"test:watch": "jest --watch --passWithNoTests",
+		"test:coverage": "jest --coverage --passWithNoTests"
 	},
 	"dependencies": {
 		"@types/jsonwebtoken": "^9.0.2",

pages/api/users/index.ts

@@ -2,14 +2,15 @@ import { RESPONSE_MESSAGES } from "@/constants/enum";
 import { getAllUsers } from "@/controllers/user";
 import connectDB from "@/db";
 import { ApiRequest, ApiResponse } from "@/interfaces/api";
+import authMiddleware from "@/middleware/auth";
 
 const handler = async (req: ApiRequest, res: ApiResponse) => {
 	try {
 		await connectDB();
 		const { method } = req;
 		switch (method) {
 			case "GET":
-				return getAllUsers(req, res);
+				return authMiddleware(getAllUsers)(req, res);
 			default:
 				res.setHeader("Allow", ["GET"]);
 				return res.status(405).end(`Method ${method} Not Allowed`);

pages/index.tsx

@@ -1,11 +1,22 @@
 import React from "react";
+import Typography from "@/library/Typography";
+import styles from "@/styles/Home.module.scss";
+import { stylesConfig } from "@/utils/functions";
+
+const classes = stylesConfig(styles, "home");
 
 const HomePage: React.FC = () => {
 	return (
-		<div>
-			<h1>Home Page</h1>
-			<p>Some content</p>
-		</div>
+		<main className={classes("")}>
+			<Typography type="heading" variant="display">
+				NextJS Boilerplate
+			</Typography>
+			<Typography type="body" variant="medium">
+				NextJS Boilerplate is a starter template for NextJS with
+				TypeScript, ESLint, Prettier, Husky, Commit Lint and modular
+				SASS.
+			</Typography>
+		</main>
 	);
 };
 

styles/Home.module.scss

@@ -0,0 +1,9 @@
+.home {
+	width: 100vw;
+	height: 100vh;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-flow: column;
+	gap: 36px;
+}

styles/config/_animations.scss

@@ -39,3 +39,23 @@
 		opacity: 0;
 	}
 }
+
+@keyframes shimmer {
+	0% {
+		background-position: -450px 0;
+	}
+
+	100% {
+		background-position: 450px 0;
+	}
+}
+
+@keyframes rotate {
+	0% {
+		transform: rotate(0deg);
+	}
+
+	100% {
+		transform: rotate(359deg);
+	}
+}

styles/config/_base.scss

@@ -12,6 +12,8 @@
 :root::before,
 :root::after {
 	--transition-time: 0.3s;
+	--font-red-hat-display: "Red Hat Display", sans-serif;
+	--font-red-hat-text: "Red Hat Text", sans-serif;
 }
 
 html {