Migrate ENGAGE-HF to @stanfordbdhg/spezi-web-design-system (#78)

# Migrate ENGAGE-HF to @stanfordbdhg/spezi-web-design-system

## ♻️ Current situation & Problem
ENGAGE-HF still sources design system. Migrate to use
https://github.com/StanfordSpezi/spezi-web-design-system


## ⚙️ Release Notes 
* Migrate ENGAGE-HF to @stanfordbdhg/spezi-web-design-system


## 📚 Documentation
This is a draft, because @stanfordbdhg/spezi-web-design-system is not
yet published to NPM.

### Code of Conduct & Contributing Guidelines 

By submitting creating this pull request, you agree to follow our [Code
of
Conduct](https://github.com/StanfordBDHG/.github/blob/main/CODE_OF_CONDUCT.md)
and [Contributing
Guidelines](https://github.com/StanfordBDHG/.github/blob/main/CONTRIBUTING.md):
- [ ] I agree to follow the [Code of
Conduct](https://github.com/StanfordBDHG/.github/blob/main/CODE_OF_CONDUCT.md)
and [Contributing
Guidelines](https://github.com/StanfordBDHG/.github/blob/main/CONTRIBUTING.md).

components/AsideEngageLayout/AsideEngageLayout.tsx

@@ -5,11 +5,11 @@
 //
 // SPDX-License-Identifier: MIT
 //
-import { LogoType } from '@/components/icons/LogoType'
 import {
   type AsideBrandLayoutProps,
   AsideBrandLayout,
-} from '@/packages/design-system/src/molecules/AsideBrandLayout'
+} from '@stanfordspezi/spezi-web-design-system/molecules/AsideBrandLayout'
+import { LogoType } from '@/components/icons/LogoType'
 
 export const AsideEngageLayout = (
   props: Omit<AsideBrandLayoutProps, 'aside'>,

modules/firebase/AuthProvider.ts

@@ -5,11 +5,11 @@
 //
 // SPDX-License-Identifier: MIT
 //
+import { useAuthUser } from '@stanfordspezi/spezi-web-design-system/modules/auth'
 import { useNavigate } from '@tanstack/react-router'
 import { type ReactNode, useEffect } from 'react'
 import { auth } from '@/modules/firebase/app'
 import { routes } from '@/modules/routes'
-import { useAuthUser } from '@/packages/design-system/src/modules/auth/hooks'
 
 interface AuthProviderProps {
   children?: ReactNode

modules/firebase/UserProvider.tsx

@@ -5,9 +5,9 @@
 //
 // SPDX-License-Identifier: MIT
 //
+import { getUserInfo } from '@stanfordspezi/spezi-web-design-system/modules/auth'
 import { queryOptions, useSuspenseQuery } from '@tanstack/react-query'
 import { getCurrentUser } from '@/modules/firebase/app'
-import { getUserInfo } from '@/packages/design-system/src/modules/auth/user'
 
 export const currentUserQueryOptions = () =>
   queryOptions({

modules/firebase/app.ts

@@ -8,6 +8,7 @@
 import { initializeApp } from '@firebase/app'
 import { connectFunctionsEmulator, getFunctions } from '@firebase/functions'
 import { type UserType } from '@stanfordbdhg/engagehf-models'
+import { toast } from '@stanfordspezi/spezi-web-design-system/components/Toaster'
 import { queryOptions } from '@tanstack/react-query'
 import { redirect } from '@tanstack/react-router'
 import { connectAuthEmulator, getAuth, OAuthProvider } from 'firebase/auth'
@@ -22,7 +23,6 @@ import {
 } from '@/modules/firebase/utils'
 import { queryClient } from '@/modules/query/queryClient'
 import { routes } from '@/modules/routes'
-import { toast } from '@/packages/design-system/src/components/Toaster'
 
 const firebaseApp = initializeApp(firebaseConfig)
 

modules/firebase/localizedText.ts

@@ -5,11 +5,13 @@
 //
 // SPDX-License-Identifier: MIT
 //
+import {
+  type Nil,
+  isObject,
+} from '@stanfordspezi/spezi-web-design-system/utils/misc'
+import { getNavigatorLanguage } from '@stanfordspezi/spezi-web-design-system/utils/navigator'
 import { isNil } from 'es-toolkit'
-import { isObject } from 'lodash'
 import { type LocalizedText } from '@/modules/firebase/models'
-import { type Nil } from '@/packages/design-system/src/utils/misc'
-import { getNavigatorLanguage } from '@/packages/design-system/src/utils/navigator'
 
 export const createLocalizationHelpers = (locale: string) => {
   const possibleLocalesToCheck = [

modules/firebase/role.ts

@@ -6,6 +6,6 @@
 // SPDX-License-Identifier: MIT
 //
 import { type UserType } from '@stanfordbdhg/engagehf-models'
-import { upperFirst } from '@/packages/design-system/src/utils/misc'
+import { upperFirst } from '@stanfordspezi/spezi-web-design-system/utils/misc'
 
 export const stringifyType = (type: UserType) => upperFirst(type)

modules/firebase/utils.ts

@@ -21,6 +21,7 @@ import {
   type UpdateUserInformationInput,
   type UpdateUserInformationOutput,
 } from '@stanfordbdhg/engagehf-models'
+import { strategy } from '@stanfordspezi/spezi-web-design-system/utils/misc'
 import {
   collection,
   type CollectionReference,
@@ -43,7 +44,6 @@ import {
   type User,
   type UserMessage,
 } from '@/modules/firebase/models'
-import { strategy } from '@/packages/design-system/src/utils/misc'
 
 export const collectionNames = {
   invitations: 'invitations',

modules/globals.css

@@ -7,8 +7,6 @@ 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;
 @tailwind utilities;

modules/notifications/Notification.tsx

@@ -5,6 +5,18 @@
 //
 // SPDX-License-Identifier: MIT
 //
+import { Button } from '@stanfordspezi/spezi-web-design-system/components/Button'
+import {
+  Notification as NotificationBase,
+  NotificationActions,
+  NotificationContentContainer,
+  NotificationImage,
+  NotificationLink,
+  NotificationMessage,
+  NotificationTime,
+  NotificationTitle,
+  NotificationHeader,
+} from '@stanfordspezi/spezi-web-design-system/molecules/Notifications'
 import { useMutation } from '@tanstack/react-query'
 import { callables } from '@/modules/firebase/app'
 import {
@@ -19,18 +31,6 @@ import {
 } from '@/modules/notifications/helpers'
 import { notificationQueries } from '@/modules/notifications/queries'
 import { queryClient } from '@/modules/query/queryClient'
-import { Button } from '@/packages/design-system/src/components/Button'
-import {
-  Notification as NotificationBase,
-  NotificationActions,
-  NotificationContentContainer,
-  NotificationImage,
-  NotificationLink,
-  NotificationMessage,
-  NotificationTime,
-  NotificationTitle,
-} from '@/packages/design-system/src/molecules/Notifications'
-import { NotificationHeader } from '@/packages/design-system/src/molecules/Notifications/NotificationHeader'
 
 interface NotificationProps {
   notification: UserMessage

modules/notifications/NotificationsTable/MarkAllAsReadButton.tsx

@@ -5,6 +5,8 @@
 //
 // SPDX-License-Identifier: MIT
 //
+import { Button } from '@stanfordspezi/spezi-web-design-system/components/Button'
+import { Tooltip } from '@stanfordspezi/spezi-web-design-system/components/Tooltip'
 import { useMutation } from '@tanstack/react-query'
 import { useMemo } from 'react'
 import { callables } from '@/modules/firebase/app'
@@ -13,8 +15,6 @@ import { useUser } from '@/modules/firebase/UserProvider'
 import { isMessageRead } from '@/modules/notifications/helpers'
 import { notificationQueries } from '@/modules/notifications/queries'
 import { queryClient } from '@/modules/query/queryClient'
-import { Button } from '@/packages/design-system/src/components/Button'
-import { Tooltip } from '@/packages/design-system/src/components/Tooltip'
 
 interface MarkAllAsReadButtonProps {
   notifications: UserMessage[]

modules/notifications/NotificationsTable/ShowUnreadOnlySwitch.tsx

@@ -5,10 +5,10 @@
 //
 // SPDX-License-Identifier: MIT
 //
+import { SideLabel } from '@stanfordspezi/spezi-web-design-system/components/SideLabel'
+import { Switch } from '@stanfordspezi/spezi-web-design-system/components/Switch'
 import { type Table } from '@tanstack/table-core'
 import { type UserMessage } from '@/modules/firebase/models'
-import { SideLabel } from '@/packages/design-system/src/components/SideLabel'
-import { Switch } from '@/packages/design-system/src/components/Switch'
 import { columnIds } from './helpers'
 
 interface ShowUnreadOnlySwitchProps {

modules/notifications/NotificationsTable/index.tsx

@@ -5,14 +5,14 @@
 //
 // SPDX-License-Identifier: MIT
 //
+import {
+  DataTable,
+  DataTableBasicView,
+} from '@stanfordspezi/spezi-web-design-system/components/DataTable'
 import { parseNilLocalizedText } from '@/modules/firebase/localizedText'
 import { type UserMessage } from '@/modules/firebase/models'
 import { isMessageRead } from '@/modules/notifications/helpers'
 import { Notification } from '@/modules/notifications/Notification'
-import {
-  DataTable,
-  DataTableBasicView,
-} from '@/packages/design-system/src/components/DataTable'
 import { columnHelper, columnIds } from './helpers'
 import { MarkAllAsReadButton } from './MarkAllAsReadButton'
 import { ShowUnreadOnlySwitch } from './ShowUnreadOnlySwitch'

modules/user/table.tsx

@@ -5,11 +5,11 @@
 //
 // SPDX-License-Identifier: MIT
 //
+import { CopyText } from '@stanfordspezi/spezi-web-design-system/components/CopyText'
+import { Tooltip } from '@stanfordspezi/spezi-web-design-system/components/Tooltip'
+import { type Nil } from '@stanfordspezi/spezi-web-design-system/utils/misc'
 import { createColumnHelper } from '@tanstack/table-core'
 import { Mail } from 'lucide-react'
-import { CopyText } from '@/packages/design-system/src/components/CopyText'
-import { Tooltip } from '@/packages/design-system/src/components/Tooltip'
-import { type Nil } from '@/packages/design-system/src/utils/misc'
 
 interface SharedUser {
   resourceType: 'invitation' | 'user'