From 912995730b9a5f8c0e0d6a03d4a45e100cdee53f Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Mon, 20 May 2024 12:11:28 +0700
Subject: [PATCH] Update UI layout and update request handler types

The UI layout has been updated to fix full screen display issues and enable class names in Sidebar. Separately, request handler function types have been improved in next route handlers for better flexibility and type safety.
---
 packages/next/src/routes/index.ts    | 14 ++++++--------
 packages/ui/src/makerkit/page.tsx    |  8 ++++++--
 packages/ui/src/makerkit/sidebar.tsx | 12 +++++++++---
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/packages/next/src/routes/index.ts b/packages/next/src/routes/index.ts
index f8edcc5dd..9f07ab0d5 100644
--- a/packages/next/src/routes/index.ts
+++ b/packages/next/src/routes/index.ts
@@ -22,12 +22,12 @@ interface Config<Schema> {
 }
 
 interface HandlerParams<
-  Body extends object,
+  Schema extends z.ZodType | undefined,
   RequireAuth extends boolean | undefined,
 > {
   request: NextRequest;
   user: RequireAuth extends false ? undefined : User;
-  body: Body;
+  body: Schema extends z.ZodType ? z.infer<Schema> : never;
 }
 
 /**
@@ -51,19 +51,17 @@ interface HandlerParams<
  *
  */
 export const enhanceRouteHandler = <
-  Body extends object,
-  Schema extends z.ZodType<Body, z.ZodTypeDef>,
-  Params extends Config<Schema> = Config<Schema>,
+  Body,
+  Params extends Config<z.ZodType<Body, z.ZodTypeDef>>,
 >(
   // Route handler function
   handler:
     | ((
-        params: HandlerParams<z.infer<Schema>, Params['auth']>,
+        params: HandlerParams<Params['schema'], Params['auth']>,
       ) => NextResponse | Response)
     | ((
-        params: HandlerParams<z.infer<Schema>, Params['auth']>,
+        params: HandlerParams<Params['schema'], Params['auth']>,
       ) => Promise<NextResponse | Response>),
-
   // Parameters object
   params?: Params,
 ) => {
diff --git a/packages/ui/src/makerkit/page.tsx b/packages/ui/src/makerkit/page.tsx
index b15b795d2..50c3a7e2b 100644
--- a/packages/ui/src/makerkit/page.tsx
+++ b/packages/ui/src/makerkit/page.tsx
@@ -64,7 +64,7 @@ function PageWithHeader(props: PageProps) {
   const { Navigation, Children, MobileNavigation } = getSlotsFromPage(props);
 
   return (
-    <div className={cn('flex flex-1 flex-col', props.className)}>
+    <div className={cn('flex h-screen flex-1 flex-col', props.className)}>
       <div
         className={
           props.contentContainerClassName ?? 'flex flex-1 flex-col space-y-4'
@@ -87,7 +87,11 @@ function PageWithHeader(props: PageProps) {
           {MobileNavigation}
         </div>
 
-        <div className={'flex flex-col space-y-8 px-4 py-4 lg:container'}>
+        <div
+          className={
+            'flex h-screen flex-1 flex-col space-y-8 px-4 py-4 lg:container'
+          }
+        >
           {Children}
         </div>
       </div>
diff --git a/packages/ui/src/makerkit/sidebar.tsx b/packages/ui/src/makerkit/sidebar.tsx
index 61a9fd064..bfcc0aa6b 100644
--- a/packages/ui/src/makerkit/sidebar.tsx
+++ b/packages/ui/src/makerkit/sidebar.tsx
@@ -26,6 +26,7 @@ export type SidebarConfig = z.infer<typeof NavigationConfigSchema>;
 
 export function Sidebar(props: {
   collapsed?: boolean;
+  className?: string;
   children:
     | React.ReactNode
     | ((props: {
@@ -35,7 +36,7 @@ export function Sidebar(props: {
 }) {
   const [collapsed, setCollapsed] = useState(props.collapsed ?? false);
 
-  const className = getClassNameBuilder()({
+  const className = getClassNameBuilder(props.className ?? '')({
     collapsed,
   });
 
@@ -191,9 +192,14 @@ export function SidebarItem({
   );
 }
 
-function getClassNameBuilder() {
+function getClassNameBuilder(className: string) {
   return cva(
-    ['flex box-content h-screen flex-col relative shadow-sm border-r'],
+    [
+      cn(
+        'flex box-content h-screen flex-col relative shadow-sm border-r',
+        className,
+      ),
+    ],
     {
       variants: {
         collapsed: {