Implement dashboard layout

.eslintrc.json

@@ -3,6 +3,13 @@
   "parserOptions": {
     "project": "./tsconfig.json"
   },
+  "settings": {
+    "import/resolver": {
+      "typescript": {
+        "project": ["./tsconfig.json"]
+      }
+    }
+  },
   "parser": "@typescript-eslint/parser",
   "extends": [
     "plugin:@typescript-eslint/strict-type-checked",

.github/workflows/build-and-test.yml

@@ -49,4 +49,3 @@ jobs:
         NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET='${{ secrets.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET }}'
         NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID='${{ secrets.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID }}'
         NEXT_PUBLIC_FIREBASE_APP_ID='${{ secrets.NEXT_PUBLIC_FIREBASE_APP_ID }}'
-

app/(dashboard)/User.tsx

@@ -0,0 +1,43 @@
+//
+// This source file is part of the Stanford Biodesign Digital Health ENGAGE-HF open-source project
+//
+// SPDX-FileCopyrightText: 2023 Stanford University and the project authors (see CONTRIBUTORS.md)
+//
+// SPDX-License-Identifier: MIT
+//
+'use client'
+import { LogOut } from 'lucide-react'
+import { auth } from '@/modules/firebase/clientApp'
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from '@stanfordbdhg/design-system/components/DropdownMenu'
+import {
+  getUserName,
+  type UserInfo,
+} from '@stanfordbdhg/design-system/modules/auth/user'
+import { UserMenuItem } from '@stanfordbdhg/design-system/molecules/DashboardLayout'
+
+interface UserProps {
+  user: UserInfo
+}
+
+export const User = ({ user }: UserProps) => (
+  <DropdownMenu>
+    <DropdownMenuTrigger asChild>
+      <UserMenuItem img={user.photoURL} name={getUserName(user)} />
+    </DropdownMenuTrigger>
+    <DropdownMenuContent>
+      <DropdownMenuItem
+        onClick={async () => {
+          await auth.signOut()
+        }}
+      >
+        <LogOut className="size-4" />
+        Sign Out
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+)

app/(dashboard)/layout.tsx

@@ -5,18 +5,62 @@
 //
 // SPDX-License-Identifier: MIT
 //
+import { Home } from 'lucide-react'
+import Link from 'next/link'
 import { type ReactNode } from 'react'
-import { authenticatedOnly } from '../../modules/firebase/guards'
+import { LogoType } from '@/components/icons/LogoType'
+import { getAuthenticatedOnlyApp } from '@/modules/firebase/guards'
+import { getUserInfo } from '@stanfordbdhg/design-system/modules/auth/user'
+import {
+  DashboardLayout as DashboardLayoutBase,
+  MenuItem,
+  PageTitle,
+} from '@stanfordbdhg/design-system/molecules/DashboardLayout'
+import { User } from './User'
 
 interface DashboardLayoutProps {
   children?: ReactNode
 }
 
 export const dynamic = 'force-dynamic'
 
+const MenuLinks = () => (
+  <>
+    <MenuItem href="/" label="Home" icon={<Home />} isActive />
+  </>
+)
+
 const DashboardLayout = async ({ children }: DashboardLayoutProps) => {
-  await authenticatedOnly()
-  return children
+  const { currentUser } = await getAuthenticatedOnlyApp()
+
+  const user = <User user={getUserInfo(currentUser)} />
+
+  return (
+    <DashboardLayoutBase
+      aside={
+        <>
+          <Link href="/" className="interactive-opacity w-full pt-4">
+            <LogoType className="!h-auto !w-full px-2 xl:px-8" />
+          </Link>
+          <nav className="mt-9 flex flex-col gap-1 xl:w-full">
+            <MenuLinks />
+          </nav>
+          {user}
+        </>
+      }
+      mobile={
+        <>
+          <nav className="mt-9 flex flex-col gap-1 px-4">
+            <MenuLinks />
+          </nav>
+          {user}
+        </>
+      }
+      title={<PageTitle icon={<Home />} title="Home" />}
+    >
+      {children}
+    </DashboardLayoutBase>
+  )
 }
 
 export default DashboardLayout

app/(dashboard)/page.tsx

@@ -5,12 +5,10 @@
 //
 // SPDX-License-Identifier: MIT
 //
-import { SignOutButton } from './SignOutButton'
 
 const DashboardPage = () => (
-  <div className="grid gap-6 p-10 text-center">
+  <div className="text-center">
     <h1 className="text-2xl">Dashboard</h1>
-    <SignOutButton />
   </div>
 )
 

app/globals.css

@@ -7,6 +7,7 @@ SPDX-FileCopyrightText: 2023 Stanford University and the project authors (see CO
 SPDX-License-Identifier: MIT
 
 */
+@import '../packages/design-system/src/main.css';
 
 @tailwind base;
 @tailwind components;
@@ -24,7 +25,7 @@ SPDX-License-Identifier: MIT
 
 @layer components {
   .focus-ring {
-    @apply ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+    @apply ring-offset-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
   }
 }
 

app/layout.tsx

@@ -8,7 +8,6 @@
 import type { Metadata } from 'next'
 import { getLocale } from 'next-intl/server'
 import type { ReactNode } from 'react'
-import '@stanfordbdhg/design-system/main.css'
 import { themeToCSSVariables, lightTheme } from '@stanfordbdhg/design-system'
 import './globals.css'
 import { AuthProvider } from '../modules/firebase/AuthProvider'

app/sign-in/page.tsx

@@ -6,12 +6,12 @@
 // SPDX-License-Identifier: MIT
 //
 import { SignInForm } from './SignInForm'
-import { unauthenticatedOnly } from '../../modules/firebase/guards'
+import { getUnauthenticatedOnlyApp } from '../../modules/firebase/guards'
 
 export const dynamic = 'force-dynamic'
 
 const SignInPage = async () => {
-  await unauthenticatedOnly()
+  await getUnauthenticatedOnlyApp()
   return <SignInForm />
 }
 

components/AsideEngageLayout/AsideEngageLayout.tsx

@@ -6,6 +6,7 @@
 // SPDX-License-Identifier: MIT
 //
 import Image from 'next/image'
+import { LogoType } from '@/components/icons/LogoType'
 import {
   type AsideBrandLayoutProps,
   AsideBrandLayout,
@@ -17,9 +18,7 @@
   <AsideBrandLayout
     aside={
       <>
-        <h2 className="text-6xl font-light tracking-widest text-primary">
-          ENGAGE-HF
-        </h2>
+        <LogoType className="h-auto w-80 text-primary" />
         <Image
           src="/stanfordbiodesign.png"
           alt="Stanford Biodesign Logo"

components/icons/LogoType.tsx

@@ -0,0 +1,28 @@
+//
+// This source file is part of the Stanford Biodesign Digital Health ENGAGE-HF open-source project
+//
+// SPDX-FileCopyrightText: 2023 Stanford University and the project authors (see CONTRIBUTORS.md)
+//
+// SPDX-License-Identifier: MIT
+//
+import type { SVGProps } from 'react'
+
+type LogoTypeProps = SVGProps<SVGSVGElement> & {
+  className?: string
+}
+
+export const LogoType = (props: LogoTypeProps) => (
+  <svg
+    width="69"
+    height="10"
+    viewBox="0 0 69 10"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M0.0568182 9V0.272727H5.32386V1.21023H1.11364V4.15909H5.05114V5.09659H1.11364V8.0625H5.39205V9H0.0568182ZM14.1491 0.272727V9H13.1264L8.37074 2.14773H8.28551V9H7.22869V0.272727H8.25142L13.0241 7.14205H13.1094V0.272727H14.1491ZM22.2298 3C22.136 2.71307 22.0124 2.45597 21.859 2.22869C21.7085 1.99858 21.5281 1.80256 21.3178 1.64062C21.1104 1.47869 20.8746 1.35511 20.6104 1.26989C20.3462 1.18466 20.0565 1.14205 19.7411 1.14205C19.2241 1.14205 18.7539 1.27557 18.3306 1.54261C17.9073 1.80966 17.5707 2.20312 17.3207 2.72301C17.0707 3.2429 16.9457 3.88068 16.9457 4.63636C16.9457 5.39205 17.0721 6.02983 17.3249 6.54972C17.5778 7.0696 17.9201 7.46307 18.3519 7.73011C18.7837 7.99716 19.2695 8.13068 19.8093 8.13068C20.3093 8.13068 20.7496 8.02415 21.1303 7.81108C21.5138 7.59517 21.8121 7.29119 22.0252 6.89915C22.2411 6.50426 22.3491 6.03977 22.3491 5.50568L22.6729 5.57386H20.0479V4.63636H23.3718V5.57386C23.3718 6.29261 23.2184 6.91761 22.9116 7.44886C22.6076 7.98011 22.1871 8.39205 21.6502 8.68466C21.1161 8.97443 20.5025 9.11932 19.8093 9.11932C19.0366 9.11932 18.3576 8.9375 17.7724 8.57386C17.19 8.21023 16.7354 7.69318 16.4087 7.02273C16.0849 6.35227 15.9229 5.55682 15.9229 4.63636C15.9229 3.94602 16.0153 3.32528 16.1999 2.77415C16.3874 2.22017 16.6516 1.74858 16.9925 1.35938C17.3335 0.97017 17.7369 0.671875 18.2028 0.464489C18.6687 0.257102 19.1815 0.153409 19.7411 0.153409C20.2013 0.153409 20.6303 0.223011 21.0281 0.362216C21.4286 0.498579 21.7852 0.693181 22.0977 0.946022C22.413 1.19602 22.6758 1.49574 22.886 1.84517C23.0962 2.19176 23.2411 2.5767 23.3207 3H22.2298ZM25.2702 9H24.1623L27.3668 0.272727H28.4577L31.6623 9H30.5543L27.9464 1.65341H27.8782L25.2702 9ZM25.6793 5.59091H30.1452V6.52841H25.6793V5.59091ZM38.5774 3C38.4837 2.71307 38.3601 2.45597 38.2067 2.22869C38.0561 1.99858 37.8757 1.80256 37.6655 1.64062C37.4581 1.47869 37.2223 1.35511 36.9581 1.26989C36.6939 1.18466 36.4041 1.14205 36.0888 1.14205C35.5717 1.14205 35.1016 1.27557 34.6783 1.54261C34.255 1.80966 33.9183 2.20312 33.6683 2.72301C33.4183 3.2429 33.2933 3.88068 33.2933 4.63636C33.2933 5.39205 33.4197 6.02983 33.6726 6.54972C33.9254 7.0696 34.2678 7.46307 34.6996 7.73011C35.1314 7.99716 35.6172 8.13068 36.157 8.13068C36.657 8.13068 37.0973 8.02415 37.478 7.81108C37.8615 7.59517 38.1598 7.29119 38.3729 6.89915C38.5888 6.50426 38.6967 6.03977 38.6967 5.50568L39.0206 5.57386H36.3956V4.63636H39.7195V5.57386C39.7195 6.29261 39.5661 6.91761 39.2592 7.44886C38.9553 7.98011 38.5348 8.39205 37.9979 8.68466C37.4638 8.97443 36.8501 9.11932 36.157 9.11932C35.3842 9.11932 34.7053 8.9375 34.12 8.57386C33.5376 8.21023 33.0831 7.69318 32.7564 7.02273C32.4325 6.35227 32.2706 5.55682 32.2706 4.63636C32.2706 3.94602 32.3629 3.32528 32.5476 2.77415C32.7351 2.22017 32.9993 1.74858 33.3402 1.35938C33.6811 0.97017 34.0845 0.671875 34.5504 0.464489C35.0163 0.257102 35.5291 0.153409 36.0888 0.153409C36.549 0.153409 36.978 0.223011 37.3757 0.362216C37.7763 0.498579 38.1328 0.693181 38.4453 0.946022C38.7607 1.19602 39.0234 1.49574 39.2337 1.84517C39.4439 2.19176 39.5888 2.5767 39.6683 3H38.5774ZM41.5295 9V0.272727H46.7965V1.21023H42.5863V4.15909H46.5238V5.09659H42.5863V8.0625H46.8647V9H41.5295ZM52.315 4.16761V5.10511H48.4968V4.16761H52.315ZM54.2209 9V0.272727H55.2777V4.15909H59.9311V0.272727H60.9879V9H59.9311V5.09659H55.2777V9H54.2209ZM63.1037 9V0.272727H68.3366V1.21023H64.1605V4.15909H67.9446V5.09659H64.1605V9H63.1037Z"
+      fill="currentColor"
+    />
+  </svg>
+)

jest.config.js

@@ -28,6 +28,6 @@ module.exports = {
     '!**/node_modules/**',
     '!**/.storybook/**',
     '!**/tailwind.config.ts',
-    '!**/*.stories.tsx'
-  ]
+    '!**/*.stories.tsx',
+  ],
 }

modules/firebase/AuthProvider.ts

@@ -8,13 +8,13 @@
 'use client'
 import { useRouter } from 'next/navigation'
 import { useEffect } from 'react'
+import { routes } from '@/modules/routes'
 import {
   useAuthUser,
   useRegisterAuthServiceWorker,
 } from '@stanfordbdhg/design-system/modules/auth/hooks'
 import { auth } from './clientApp'
 import { firebaseConfig } from './config'
-import { routes } from '../routes'
 
 export const AuthProvider = () => {
   const router = useRouter()

modules/firebase/guards.tsx

@@ -5,22 +5,25 @@
 //
 // SPDX-License-Identifier: MIT
 //
+import { type User } from '@firebase/auth-types'
 import { redirect } from 'next/navigation'
+import { routes } from '@/modules/routes'
 import { getServerApp } from './serverApp'
-import { routes } from '../routes'
 
 /**
  * Redirects to home if authenticated
  * */
-export const unauthenticatedOnly = async () => {
-  const { currentUser } = await getServerApp()
-  if (currentUser) redirect(routes.home)
+export const getUnauthenticatedOnlyApp = async () => {
+  const firebaseApp = await getServerApp()
+  if (firebaseApp.currentUser) redirect(routes.home)
+  return firebaseApp
 }
 
 /**
  * Redirects to signIn if not authenticated
  * */
-export const authenticatedOnly = async () => {
-  const { currentUser } = await getServerApp()
-  if (!currentUser) redirect(routes.signIn)
+export const getAuthenticatedOnlyApp = async () => {
+  const firebaseApp = await getServerApp()
+  if (!firebaseApp.currentUser) redirect(routes.signIn)
+  return firebaseApp as typeof firebaseApp & { currentUser: User }
 }