@postxl/generators 0.2.2

package/dist/frontend-core/template/src/context-providers/auth-context-provider.tsx

@@ -0,0 +1,210 @@
+import type { UserRoles, ViewerResult } from '@authentication/authentication.types'
+import { useQuery } from '@tanstack/react-query'
+import type { User } from '@types'
+
+import Keycloak from 'keycloak-js'
+import * as React from 'react'
+import { createContext, useCallback, useEffect, useMemo, useState } from 'react'
+
+import { APP_CONFIG } from '@lib/config'
+import { createUseContext } from '@lib/react'
+import { useTRPC } from '@lib/trpc'
+import { Result } from '@postxl/utils'
+
+type AppUser = {
+  userDetails: User | null
+  userRoles: UserRoles
+}
+
+export type AuthContext = {
+  isAuthenticated: boolean
+  isInitComplete: boolean
+  login: () => Promise<void>
+  logout: () => Promise<void>
+  user: AppUser | null
+}
+
+const AuthContext = createContext<AuthContext | null>(null)
+
+let _keycloakInitializationStarted = false
+let _authToken: string | undefined
+
+export function setAuthToken(token?: string) {
+  _authToken = token
+}
+
+export function getAuthToken() {
+  return _authToken
+}
+
+export function getAuthHeaders(options?: RequestInit) {
+  const token = getAuthToken()
+  const headers = new Headers(options?.headers)
+
+  if (token) {
+    headers.set('Authorization', `Bearer${token}`)
+  }
+  return headers
+}
+
+const keycloak = new Keycloak({
+  url: APP_CONFIG.keycloakURL,
+  realm: APP_CONFIG.keycloakRealm,
+  clientId: APP_CONFIG.keycloakClientId,
+})
+
+keycloak.onAuthLogout = () => {
+  console.log('KEYCLOAK AUTH LOGOUT')
+  setAuthToken()
+}
+
+keycloak.onTokenExpired = () => {
+  console.log('KEYCLOAK TOKEN EXPIRED')
+}
+keycloak.onAuthSuccess = () => {
+  console.log('KEYCLOAK AUTH SUCCESS')
+}
+keycloak.onAuthRefreshSuccess = () => {
+  console.log('KEYCLOAK AUTH REFRESH SUCCESS')
+}
+keycloak.onAuthError = () => {
+  console.log('KEYCLOAK AUTH ERROR')
+}
+
+export function AuthProvider({ children }: Readonly<{ children: React.ReactNode }>) {
+  const [user, setUser] = React.useState<AppUser | null>(null)
+  const [isAuthenticated, setIsAuthenticated] = useState(false)
+  const [isInitComplete, setIsInitComplete] = useState(false)
+
+  const trpc = useTRPC()
+
+  const {
+    data: userData,
+    isSuccess: isUserSuccessfullyLoaded,
+    isError: isUserDataError,
+  } = useQuery(
+    trpc.viewer.viewer.queryOptions(
+      { pageUrl: location.href },
+      // load user data when keycloak init complete and user is authenticated
+      { enabled: isInitComplete && isAuthenticated },
+    ),
+  )
+
+  const logout = useCallback(async () => {
+    setAuthToken()
+    await keycloak.logout()
+  }, [])
+
+  const login = useCallback(async () => {
+    await keycloak.login()
+  }, [])
+
+  /**
+   * #1 - initialize the keycloak adapter on a page-load (only once)
+   */
+  useEffect(() => {
+    const initKeycloak = async () => {
+      try {
+        if (!_keycloakInitializationStarted) {
+          _keycloakInitializationStarted = true
+
+          const authenticated = await keycloak.init({
+            onLoad: 'check-sso',
+            silentCheckSsoRedirectUri: `${location.origin}/silent-check-sso.html`,
+            enableLogging: true,
+            // SSO-check via iFrame doesn't work for Brave browser, if
+            // the domain of the auth keycloak url differs from the app domain
+            // see: https://www.keycloak.org/securing-apps/javascript-adapter#_session_status_iframe
+            // This is no problem in the USP setup as Keycloak runs on the same domain,
+            // but should be addressed in PXL
+            checkLoginIframe: APP_CONFIG.checkLoginIframe,
+          })
+
+          if (authenticated) {
+            setAuthToken(keycloak.token)
+            setIsAuthenticated(true)
+          }
+          // if keycloak initialized and the user is not authenticated,
+          // the user will be redirected to the keycloak login page (see "/pages/Login")
+          console.log('Keycloak initialized COMPLETE, user authenticated:', authenticated)
+          setIsInitComplete(true)
+        }
+      } catch (error) {
+        console.error('Failed to initialize adapter:', error)
+        void logout() // NOSONAR
+      }
+    }
+
+    if (APP_CONFIG.AUTH) {
+      void initKeycloak()
+    } else {
+      setIsAuthenticated(true)
+      setIsInitComplete(true)
+    }
+  }, [logout])
+
+  /**
+   * #2 - user data loading
+   * when user authenticated by keycloak, the user data is loaded from the backend
+   */
+  useEffect(() => {
+    if (isInitComplete && isUserDataError) {
+      void logout() // NOSONAR
+      return
+    }
+
+    if (userData && isUserSuccessfullyLoaded) {
+      const userDataResult: ViewerResult = Result.fromObject(userData as unknown as any)
+      if (userDataResult.isOk()) {
+        const value = userDataResult.unwrap()
+        console.log('User data loaded successfully:', value)
+        setUser({
+          userRoles: value.userRoles,
+          userDetails: value.user,
+        })
+      } else if (userDataResult.isErr()) {
+        console.log('User data loaded with an error => logout()', { error: userDataResult.unwrapErr() })
+        // when we get an error result on loading the user, we log out the user
+        void logout() // NOSONAR
+      }
+    }
+  }, [userData, isUserSuccessfullyLoaded, isUserDataError, isInitComplete, logout])
+
+  /**
+   * #3 - token refreshing
+   * when the user is authenticated, the token is refreshed every 5 seconds
+   */
+  useEffect(() => {
+    if (!isInitComplete || !isAuthenticated || !APP_CONFIG.AUTH) {
+      return
+    }
+
+    const refreshIntervalId = setInterval(async () => {
+      try {
+        // refresh the token if it expires within 60 seconds
+        const refreshed = await keycloak.updateToken(60)
+
+        if (refreshed) {
+          console.log('Token was successfully refreshed')
+          // Update your application state if needed
+          setAuthToken(keycloak.token)
+        }
+      } catch (error) {
+        console.error('Failed to refresh token', error)
+        // if the token could not be refreshed, log out the user
+        void logout() // NOSONAR
+      }
+    }, 5000)
+
+    return () => clearInterval(refreshIntervalId)
+  }, [isAuthenticated, isInitComplete, logout])
+
+  const memoizedValues = useMemo(
+    () => ({ isAuthenticated, login, logout, user, isInitComplete }),
+    [isAuthenticated, login, logout, user, isInitComplete],
+  )
+
+  return <AuthContext.Provider value={memoizedValues}>{children}</AuthContext.Provider>
+}
+
+export const useAuth = createUseContext(AuthContext, 'AuthContext')

package/dist/frontend-core/template/src/context-providers/theme-context-provider.tsx

@@ -0,0 +1,107 @@
+import { createContext, useEffect, useMemo, useState } from 'react'
+import useLocalStorageState from 'use-local-storage-state'
+
+import { createUseContext } from '@lib/react'
+
+export type Theme = 'dark' | 'light' | 'system'
+type ThemeLightDark = 'dark' | 'light'
+
+type ThemeProviderProps = {
+  children: React.ReactNode
+  defaultTheme?: Theme
+  storageKey?: string
+}
+
+type ThemeProviderState = {
+  theme: Theme
+  setTheme: (theme: Theme) => void
+  isThemeReady: boolean
+}
+
+const initialState: ThemeProviderState = {
+  theme: 'system',
+  setTheme: () => null,
+  isThemeReady: false,
+}
+
+const ThemeContext = createContext<ThemeProviderState>(initialState)
+const STORAGE_KEY = 'usp-theme-mode'
+
+function nextFrame(): Promise<void> {
+  return new Promise((r) => requestAnimationFrame(() => r()))
+}
+
+/**
+ * here we wait until the css var '--theme-ready-flag' is set, so we know the css is loaded
+ * we need this 'hack' because we set the values of the DataTable with js and read the values from the css file.
+ * to make sure these values are not undefined, we need to wait until the css is loaded.
+ */
+async function waitForThemeApplied(expected: Theme, timeoutMs = 500): Promise<boolean> {
+  const start = performance.now()
+  // Give the browser a paint opportunity
+  await nextFrame()
+
+  while (performance.now() - start < timeoutMs) {
+    const value = getComputedStyle(document.documentElement)
+      .getPropertyValue('--theme-ready-flag')
+      .replaceAll(/['"\s]/g, '')
+    if (value === expected) {
+      return true
+    }
+    await nextFrame()
+  }
+  return false
+}
+
+export function ThemeProvider({ children, defaultTheme = 'system', ...props }: Readonly<ThemeProviderProps>) {
+  const [theme, setTheme] = useLocalStorageState(STORAGE_KEY, {
+    defaultValue: defaultTheme,
+  })
+  const [isThemeReady, setIsThemeReady] = useState(false)
+
+  useEffect(() => {
+    const root = globalThis.document.documentElement
+
+    root.classList.remove('light', 'dark')
+
+    let applied: ThemeLightDark
+    if (theme === 'system') {
+      applied = globalThis.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+      root.classList.add(applied)
+      return
+    }
+    applied = theme
+    root.classList.add(theme)
+
+    let cancelled = false
+
+    void (async () => {
+      // Option A: wait for computed variable
+      const ok = await waitForThemeApplied(applied)
+      if (!cancelled) {
+        setIsThemeReady(ok)
+      }
+    })()
+
+    return () => {
+      cancelled = true
+    }
+  }, [theme])
+
+  const value = useMemo(
+    () => ({
+      theme,
+      setTheme,
+      isThemeReady,
+    }),
+    [isThemeReady, setTheme, theme],
+  )
+
+  return (
+    <ThemeContext.Provider {...props} value={value}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+export const useTheme = createUseContext(ThemeContext, 'ThemeProviderContext')

package/dist/frontend-core/template/src/hooks/useDelay.ts

@@ -0,0 +1,17 @@
+import { useCallback, useEffect, useState } from 'react'
+
+export function useDelay(ms: number): [boolean, () => void] {
+  const [delayed, setDelayed] = useState(false)
+
+  useEffect(() => {
+    if (delayed) {
+      return
+    }
+    const timeout = setTimeout(() => setDelayed(true), ms)
+    return () => clearTimeout(timeout)
+  }, [delayed, ms])
+
+  const reset = useCallback(() => setDelayed(false), [setDelayed])
+
+  return [delayed, reset]
+}

package/dist/frontend-core/template/src/hooks/useFontsLoaded.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react'
+
+export function useFontsLoaded() {
+  const [fontsLoaded, setFontsLoaded] = useState(false)
+
+  useEffect(() => {
+    document.fonts.ready
+      .then(() => {
+        setFontsLoaded(true)
+      })
+      .catch((error) => {
+        console.error('Failed to load fonts:', error)
+      })
+  }, [])
+
+  return fontsLoaded
+}

package/dist/frontend-core/template/src/hooks/useMediaQuery.ts

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react'
+
+import { useIsMounted } from './useIsMounted'
+
+/**
+ * Tells if the media query matches.
+ */
+export function useMediaQuery(media: string): boolean {
+  const isMounted = useIsMounted()
+  const [matches, setMatches] = useState((typeof window === 'object' && window.matchMedia?.(media).matches) || false)
+
+  // https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
+  useEffect(() => {
+    const mediaQuery = window.matchMedia?.(media)
+    const listener = (event: MediaQueryListEvent) => setMatches(event.matches)
+
+    mediaQuery?.addEventListener?.('change', listener)
+    return () => {
+      mediaQuery?.removeEventListener?.('change', listener)
+    }
+  }, [media, setMatches])
+
+  if (!isMounted) {
+    return false
+  }
+
+  return matches
+}

package/dist/frontend-core/template/src/hooks/useScreenSize.ts

@@ -0,0 +1,37 @@
+import { useEffect, useMemo, useState } from 'react'
+
+import { useIsMounted } from './useIsMounted'
+
+/**
+ * A utility hook that lets you read the dimensions of the screen and automatically
+ * updates on resize.
+ */
+export function useScreenSize() {
+  const isMounted = useIsMounted()
+  const [width, setWidth] = useState(0)
+  const [height, setHeight] = useState(0)
+
+  useEffect(() => {
+    if (!isMounted) {
+      return
+    }
+
+    const handler = () => {
+      setWidth(window.innerWidth)
+      setHeight(window.innerHeight)
+    }
+
+    // Trigger immediately.
+    handler()
+
+    // Subscribe to resize event.
+    window.addEventListener('resize', handler)
+    return () => window.removeEventListener('resize', handler)
+  }, [setWidth, setHeight, isMounted])
+
+  const size = useMemo(() => {
+    return { width, height }
+  }, [width, height])
+
+  return size
+}

package/dist/frontend-core/template/src/hooks/useScrollLock.tsx

@@ -0,0 +1,93 @@
+import React, { useCallback, useEffect, useMemo, useRef } from 'react'
+
+import { createUseContext } from '@lib/react'
+
+export type LockKeyId = number & { readonly __key: never }
+
+const ScrollLockContext = React.createContext<{
+  /**
+   * Locks the scroll and returns a unique ID that should be used to release the lock.
+   */
+  lock: () => LockKeyId
+
+  /**
+   * Releases the lock and removes the scroll lock if there are no more locks.
+   */
+  release: (id: LockKeyId) => void
+} | null>(null)
+
+/**
+ * Global context that takes care of locking the scroll when overflowing elements are visible.
+ */
+export const ScrollLockContextProvider = ({ children }: React.PropsWithChildren) => {
+  const visibleModals = useRef(new Set<LockKeyId>())
+
+  const nextKeyId = useRef<LockKeyId>(0 as LockKeyId)
+
+  const release = useCallback((id: LockKeyId) => {
+    visibleModals.current.delete(id)
+
+    if (visibleModals.current.size > 0) {
+      document.body.classList.add('scroll-locked')
+    } else {
+      document.body.classList.remove('scroll-locked')
+    }
+  }, [])
+
+  const lock = useCallback(() => {
+    const id = nextKeyId.current++ as LockKeyId
+
+    visibleModals.current.add(id)
+
+    document.body.classList.add('scroll-locked')
+
+    return id
+  }, [])
+
+  // Remove lock on unmount.
+  useEffect(() => {
+    return () => {
+      document.body.classList.remove('scroll-locked')
+    }
+  }, [])
+
+  const context = useMemo(() => {
+    return { lock, release }
+  }, [lock, release])
+
+  return <ScrollLockContext.Provider value={context}>{children}</ScrollLockContext.Provider>
+}
+
+/**
+ * Lets you lock the scroll when overflowing elements are visible.
+ */
+export const useScrollLockContext = createUseContext(ScrollLockContext, 'ScrollLockContext')
+
+/**
+ * Acquires and manages a scroll lock based on the value of `show`.
+ */
+export function useScrollLock(show: boolean) {
+  const { lock, release } = useScrollLockContext()
+
+  const lockKeyRef = useRef<LockKeyId | null>(null)
+
+  useEffect(() => {
+    // NOTE: If there's an existing lock, we always release it first.
+    if (lockKeyRef.current != null) {
+      release(lockKeyRef.current)
+      lockKeyRef.current = null
+    }
+
+    if (show) {
+      lockKeyRef.current = lock()
+    }
+
+    return () => {
+      // NOTE: This is to make sure that the modal is not marked visible when it is unmounted.
+      if (lockKeyRef.current != null) {
+        release(lockKeyRef.current)
+        lockKeyRef.current = null
+      }
+    }
+  }, [lock, release, show])
+}

package/dist/frontend-core/template/src/hooks/useWindowFocus.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react'
+
+/**
+ * A utility hook that returns whether the window is focused or not.
+ */
+export function useWindowFocus(): boolean {
+  // NOTE: We track the focus of the window because you can trigger
+  //       scroll without triggering "mouseenter" event on Mac when another window is in focus.
+  const [isWindowFocused, setIsWindowFocused] = useState<boolean>(true)
+
+  useEffect(() => {
+    const handleWindowFocus = () => {
+      setIsWindowFocused(true)
+    }
+
+    const handleWindowBlur = () => {
+      setIsWindowFocused(false)
+    }
+
+    window.addEventListener('focus', handleWindowFocus)
+    window.addEventListener('blur', handleWindowBlur)
+
+    return () => {
+      window.removeEventListener('focus', handleWindowFocus)
+      window.removeEventListener('blur', handleWindowBlur)
+    }
+  }, [])
+
+  return isWindowFocused
+}