@postxl/generators 1.11.6 → 1.12.0

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

@@ -1,6 +1,6 @@
-import type { UserRoles, ViewerResult } from '@authentication/authentication.types'
+import type { Viewer } from '@authentication/auth.guard'
+import type { 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'
@@ -11,17 +11,18 @@ import { createUseContext } from '@lib/react'
 import { useTRPC } from '@lib/trpc'
 import { Result } from '@postxl/utils'
 
-type AppUser = {
-  userDetails: User | null
-  userRoles: UserRoles
-}
+// Frontend version of Viewer without userInfo (which is only available server-side)
+type FrontendViewer = Omit<Viewer, 'userInfo'>
+
+export const authErrorTypes = ['errorInit', 'errorLoadUser', 'errorTokenRefresh'] as const
+export type AuthErrorType = (typeof authErrorTypes)[number]
+export type AuthState = 'inProgress' | 'loggedIn' | 'loggedOut'
 
 export type AuthContext = {
-  isAuthenticated: boolean
-  isInitComplete: boolean
+  loginState: AuthState | AuthErrorType
   login: () => Promise<void>
-  logout: () => Promise<void>
-  user: AppUser | null
+  logout: (options?: { redirectUri?: string }) => Promise<void>
+  viewerData: FrontendViewer | null
 }
 
 const AuthContext = createContext<AuthContext | null>(null)
@@ -42,7 +43,7 @@ export function getAuthHeaders(options?: RequestInit) {
   const headers = new Headers(options?.headers)
 
   if (token) {
-    headers.set('Authorization', `Bearer${token}`)
+    headers.set('Authorization', `Bearer ${token}`)
   }
   return headers
 }
@@ -72,9 +73,8 @@ keycloak.onAuthError = () => {
 }
 
 export function AuthProvider({ children }: Readonly<{ children: React.ReactNode }>) {
-  const [user, setUser] = React.useState<AppUser | null>(null)
-  const [isAuthenticated, setIsAuthenticated] = useState(!APP_CONFIG.AUTH)
-  const [isInitComplete, setIsInitComplete] = useState(!APP_CONFIG.AUTH)
+  const [viewerData, setViewerData] = React.useState<FrontendViewer | null>(null)
+  const [loginState, setLoginState] = useState<AuthState | AuthErrorType>('inProgress')
 
   const trpc = useTRPC()
 
@@ -86,13 +86,13 @@ export function AuthProvider({ children }: Readonly<{ children: React.ReactNode
     trpc.viewer.viewer.queryOptions(
       { pageUrl: location.href },
       // load user data when keycloak init complete and user is authenticated
-      { enabled: isInitComplete && isAuthenticated },
+      { enabled: loginState === 'loggedIn' },
     ),
   )
 
-  const logout = useCallback(async () => {
+  const logout = useCallback(async (options?: { redirectUri?: string }) => {
     setAuthToken()
-    await keycloak.logout()
+    await keycloak.logout(options)
   }, [])
 
   const login = useCallback(async () => {
@@ -120,59 +120,66 @@ export function AuthProvider({ children }: Readonly<{ children: React.ReactNode
             checkLoginIframe: APP_CONFIG.checkLoginIframe,
           })
 
-          if (authenticated) {
+          console.log(
+            'Keycloak initialized COMPLETE, user authenticated:',
+            authenticated,
+            'token:',
+            keycloak.token ? 'present' : 'missing',
+          )
+
+          if (authenticated && keycloak.token) {
             setAuthToken(keycloak.token)
-            setIsAuthenticated(true)
+            setLoginState('loggedIn')
+          } else {
+            // if keycloak initialized and the user is not authenticated,
+            // the user will be redirected to the keycloak login page (see "/pages/Login")
+            setLoginState('loggedOut')
           }
-          // 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
+        setLoginState('errorInit')
       }
     }
 
     if (APP_CONFIG.AUTH) {
       void initKeycloak()
+    } else {
+      setLoginState('loggedIn')
     }
-  }, [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
+    if (loginState === 'loggedIn' && isUserDataError) {
+      setLoginState('errorLoadUser')
       return
     }
 
     if (userData && isUserSuccessfullyLoaded) {
-      const userDataResult: ViewerResult = Result.fromObject(userData as unknown as any) as unknown as ViewerResult
+      const userDataResult: ViewerResult = Result.fromObject(userData as any) as ViewerResult
       if (userDataResult.isOk()) {
         const value = userDataResult.unwrap()
-        console.log('User data loaded successfully:', value)
-        setUser({
-          userRoles: value.userRoles,
-          userDetails: value.user,
-        })
+        console.log('User data loaded successfully')
+        setViewerData(value)
       } 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
+        console.log('User data loaded with an error => logout and redirect to auth-error', {
+          error: userDataResult.unwrapErr(),
+        })
+        setLoginState('errorLoadUser')
       }
     }
-  }, [userData, isUserSuccessfullyLoaded, isUserDataError, isInitComplete, logout])
+  }, [isUserDataError, isUserSuccessfullyLoaded, loginState, userData])
 
   /**
    * #3 - token refreshing
    * when the user is authenticated, the token is refreshed every 5 seconds
    */
   useEffect(() => {
-    if (!isInitComplete || !isAuthenticated || !APP_CONFIG.AUTH) {
+    if (loginState !== 'loggedIn' || !APP_CONFIG.AUTH) {
       return
     }
 
@@ -188,17 +195,21 @@ export function AuthProvider({ children }: Readonly<{ children: React.ReactNode
         }
       } catch (error) {
         console.error('Failed to refresh token', error)
-        // if the token could not be refreshed, log out the user
-        void logout() // NOSONAR
+        setLoginState('errorTokenRefresh')
       }
     }, 5000)
 
     return () => clearInterval(refreshIntervalId)
-  }, [isAuthenticated, isInitComplete, logout])
+  }, [loginState])
 
   const memoizedValues = useMemo(
-    () => ({ isAuthenticated, login, logout, user, isInitComplete }),
-    [isAuthenticated, login, logout, user, isInitComplete],
+    () => ({
+      loginState,
+      login,
+      logout,
+      viewerData,
+    }),
+    [loginState, login, logout, viewerData],
   )
 
   return <AuthContext.Provider value={memoizedValues}>{children}</AuthContext.Provider>

package/dist/frontend-core/template/src/hooks/use-table-view-config.tsx

@@ -0,0 +1,249 @@
+import type { TableViewId, TableViewViewModel } from '@types'
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { z } from 'zod'
+
+import { useTableViews } from './use-table-views'
+
+/** Creates a Zod decoder that parses a JSON string and validates the result against the given schema. */
+const jsonDecoder = <T,>(schema: z.ZodType<T>) =>
+  z
+    .string()
+    .transform((s) => JSON.parse(s) as unknown)
+    .pipe(schema)
+
+const filtersDecoder = jsonDecoder(z.record(z.string(), z.unknown()))
+const sortingDecoder = jsonDecoder(z.array(z.object({ field: z.string(), direction: z.enum(['asc', 'desc']) })))
+const columnVisibilityDecoder = jsonDecoder(z.record(z.string(), z.boolean()))
+const columnOrderDecoder = jsonDecoder(z.array(z.string()))
+const columnPinningDecoder = jsonDecoder(
+  z.object({ left: z.array(z.string()).optional(), right: z.array(z.string()).optional() }),
+)
+const columnSizingDecoder = jsonDecoder(z.record(z.string(), z.number()))
+
+/**
+ * Parsed table state stored in a TableView.
+ * All JSON string fields are deserialized into their typed representations.
+ */
+export type TableViewState = {
+  filters?: z.infer<typeof filtersDecoder>
+  sorting?: z.infer<typeof sortingDecoder>
+  columnVisibility?: z.infer<typeof columnVisibilityDecoder>
+  columnOrder?: z.infer<typeof columnOrderDecoder>
+  columnPinning?: z.infer<typeof columnPinningDecoder>
+  columnSizing?: z.infer<typeof columnSizingDecoder>
+}
+
+export type UseTableViewConfigOptions = {
+  /** The model/table name to scope views to (e.g. 'user', 'publication'). */
+  model: string
+  /** The current user's ID — used to filter views (own + global). */
+  currentUserId?: string
+}
+
+export type UseTableViewConfigResult = {
+  /** Views for this model visible to the current user (own + global). */
+  views: TableViewViewModel[]
+  /** Views mapped to the SavedView shape expected by DataGridViewMenu. */
+  savedViews: { id: string; name: string; isGlobal: boolean; userId: string }[]
+  /** Whether the initial data has been loaded. */
+  isLoaded: boolean
+  /** The currently active/applied view ID (local state, persisted to localStorage). */
+  activeViewId: string | null
+  /** Set the active view ID (also persists to localStorage). */
+  setActiveViewId: (id: string | null) => void
+  /** Clear the active view. */
+  clearActiveView: () => void
+  /** Parse a view's JSON string fields into typed TableViewState. */
+  parseViewState: (view: TableViewViewModel) => TableViewState
+  /** Get the parsed state of the currently active view, or null. */
+  getActiveViewState: () => TableViewState | null
+  /** Save a new view with the given state. Sets it as active on success. */
+  saveView: (args: { name: string; isGlobal?: boolean; state: TableViewState }) => Promise<TableViewViewModel>
+  /** Update an existing view's state. */
+  updateView: (viewId: string, state: TableViewState) => Promise<TableViewViewModel>
+  /** Rename an existing view. */
+  renameView: (viewId: string, name: string) => Promise<TableViewViewModel>
+  /** Delete a view. Clears active view if it was the deleted one. */
+  deleteView: (viewId: string) => Promise<void>
+}
+
+const STORAGE_PREFIX = 'pxl.tableView:'
+
+function getStorageKey(model: string): string {
+  return `${STORAGE_PREFIX}${model}`
+}
+
+function readPersistedViewId(model: string): string | null {
+  try {
+    return localStorage.getItem(getStorageKey(model))
+  } catch {
+    return null
+  }
+}
+
+function persistViewId(model: string, viewId: string | null): void {
+  try {
+    const key = getStorageKey(model)
+    if (viewId) {
+      localStorage.setItem(key, viewId)
+    } else {
+      localStorage.removeItem(key)
+    }
+  } catch {
+    // ignore storage errors
+  }
+}
+
+/**
+ * Hook that wraps the generated `useTableViews` CRUD hook and adds:
+ * - Scoping by model name and current user
+ * - JSON parsing/serialization for table state fields
+ * - Active view tracking (persisted to localStorage)
+ * - Auto-restore of previously active view on mount
+ * - Simplified save/update/rename/delete API
+ */
+export function useTableViewConfig(options: UseTableViewConfigOptions): UseTableViewConfigResult {
+  const { model, currentUserId } = options
+  const tableViews = useTableViews()
+  const [activeViewId, setActiveViewIdState] = useState<string | null>(() => readPersistedViewId(model))
+  const hasRestoredRef = useRef(false)
+
+  // Persist active view ID to localStorage whenever it changes
+  const setActiveViewId = useCallback(
+    (id: string | null) => {
+      setActiveViewIdState(id)
+      persistViewId(model, id)
+    },
+    [model],
+  )
+
+  // Filter views: only this model, and only the user's own or global views
+  const views = useMemo(
+    (): TableViewViewModel[] =>
+      tableViews.list.filter((v) => v.model === model && (v.isGlobal || v.userId === currentUserId)),
+    [tableViews.list, model, currentUserId],
+  )
+
+  // Map to the shape expected by DataGridViewMenu
+  const savedViews = useMemo(
+    () => views.map((v) => ({ id: v.id, name: v.name, isGlobal: v.isGlobal, userId: v.userId })),
+    [views],
+  )
+
+  // Once views are loaded, validate the persisted view ID still exists.
+  // If the persisted view was deleted, clear it.
+  useEffect(() => {
+    if (!tableViews.isLoaded || hasRestoredRef.current) return
+    hasRestoredRef.current = true
+
+    if (activeViewId && !views.find((v) => v.id === activeViewId)) {
+      setActiveViewId(null)
+    }
+  }, [tableViews.isLoaded, views, activeViewId, setActiveViewId])
+
+  const parseViewState = useCallback((view: TableViewViewModel): TableViewState => {
+    const decode = <T,>(json: string | null | undefined, decoder: z.ZodType<T>): T | undefined => {
+      if (!json) {
+        return undefined
+      }
+      const result = decoder.safeParse(json)
+      return result.success ? result.data : undefined
+    }
+    return {
+      filters: decode(view.filters, filtersDecoder),
+      sorting: decode(view.sorting, sortingDecoder),
+      columnVisibility: decode(view.columnVisibility, columnVisibilityDecoder),
+      columnOrder: decode(view.columnOrder, columnOrderDecoder),
+      columnPinning: decode(view.columnPinning, columnPinningDecoder),
+      columnSizing: decode(view.columnSizing, columnSizingDecoder),
+    }
+  }, [])
+
+  const getActiveViewState = useCallback((): TableViewState | null => {
+    if (!activeViewId) return null
+    const view = views.find((v) => v.id === activeViewId)
+    if (!view) return null
+    return parseViewState(view)
+  }, [activeViewId, views, parseViewState])
+
+  const serializeState = useCallback(
+    (state: TableViewState) => ({
+      filters: state.filters ? JSON.stringify(state.filters) : null,
+      sorting: state.sorting ? JSON.stringify(state.sorting) : null,
+      columnVisibility: state.columnVisibility ? JSON.stringify(state.columnVisibility) : null,
+      columnOrder: state.columnOrder ? JSON.stringify(state.columnOrder) : null,
+      columnPinning: state.columnPinning ? JSON.stringify(state.columnPinning) : null,
+      columnSizing: state.columnSizing ? JSON.stringify(state.columnSizing) : null,
+    }),
+    [],
+  )
+
+  const saveView = useCallback(
+    async (args: { name: string; isGlobal?: boolean; state: TableViewState }) => {
+      if (!currentUserId) {
+        throw new Error('Cannot save a view without a currentUserId')
+      }
+      const result = await tableViews.create({
+        name: args.name,
+        model,
+        userId: currentUserId as TableViewViewModel['userId'],
+        isGlobal: args.isGlobal ?? false,
+        ...serializeState(args.state),
+      })
+      setActiveViewId(result.id)
+      return result
+    },
+    [tableViews, model, currentUserId, serializeState, setActiveViewId],
+  )
+
+  const updateView = useCallback(
+    async (viewId: string, state: TableViewState) => {
+      const existing = views.find((v) => v.id === viewId)
+      if (!existing) throw new Error(`View ${viewId} not found`)
+      return tableViews.update({
+        id: viewId as TableViewId,
+        name: existing.name,
+        model: existing.model,
+        userId: existing.userId,
+        isGlobal: existing.isGlobal,
+        ...serializeState(state),
+      })
+    },
+    [tableViews, views, serializeState],
+  )
+
+  const renameView = useCallback(
+    async (viewId: string, name: string) => {
+      return tableViews.updateField({ id: viewId as TableViewId, field: 'name', value: name })
+    },
+    [tableViews],
+  )
+
+  const deleteView = useCallback(
+    async (viewId: string) => {
+      await tableViews.delete(viewId as TableViewId)
+      if (activeViewId === viewId) {
+        setActiveViewId(null)
+      }
+    },
+    [tableViews, activeViewId, setActiveViewId],
+  )
+
+  const clearActiveView = useCallback(() => setActiveViewId(null), [setActiveViewId])
+
+  return {
+    views,
+    savedViews,
+    isLoaded: tableViews.isLoaded,
+    activeViewId,
+    setActiveViewId,
+    clearActiveView,
+    parseViewState,
+    getActiveViewState,
+    saveView,
+    updateView,
+    renameView,
+    deleteView,
+  }
+}

package/dist/frontend-core/template/src/pages/dashboard/dashboard.page.tsx

@@ -16,7 +16,7 @@ import { APP_CONFIG } from '@lib/config'
 import { Button, ContentFrame } from '@postxl/ui-components'
 
 export const DashboardPage = () => {
-  const { logout, user } = useAuth()
+  const { logout, viewerData } = useAuth()
 
   const [selectedPost, setSelectedPost] = useState<Post | null>(null)
   const [isUpdateModalOpen, setIsUpdateModalOpen] = useState(false)
@@ -42,16 +42,16 @@ export const DashboardPage = () => {
         controls={[
           <ColorModeToggle key="btn-color-mode" onClick={onToggleTheme} __e2e_test_id__="button-toggle-theme" />,
           APP_CONFIG.AUTH && (
-            <Button key="btn-logout" onClick={logout}>
+            <Button key="btn-logout" onClick={() => logout()}>
               <PersonIcon /> Logout
             </Button>
           ),
         ]}
       >
         <div className="p-3">
-          <h3 className="mb-4">Hi {user?.userDetails?.name}!</h3>
-          <p>eMail: {user?.userDetails?.email}</p>
-          <p>roles: {user?.userRoles.join(', ')}</p>
+          <h3 className="mb-4">Hi {viewerData?.user?.name}!</h3>
+          <p>eMail: {viewerData?.user?.email}</p>
+          <p>roles: {viewerData?.userRoles.join(', ')}</p>
         </div>
         <div className="p-3">
           <h3 className="mb-4">Posts:</h3>

package/dist/frontend-core/template/src/pages/error/auth-error.page.tsx

@@ -0,0 +1,37 @@
+import { AuthErrorType, useAuth } from '@context-providers/auth-context-provider'
+
+import { Button, InfoCard } from '@postxl/ui-components'
+
+const errorMessages: Record<AuthErrorType, { title: string; message: string }> = {
+  errorInit: {
+    title: 'Authentication Failed',
+    message: 'Failed to initialize the authentication system. Please try logging in again.',
+  },
+  errorLoadUser: {
+    title: 'Unable to Load User Data',
+    message: 'There was an error loading your user information. Please try logging in again.',
+  },
+  errorTokenRefresh: {
+    title: 'Session Expired',
+    message: 'Your session could not be refreshed. Please log in again to continue.',
+  },
+}
+
+export const AuthErrorPage = ({ errorType }: { errorType?: AuthErrorType }) => {
+  const errorInfo = errorMessages[errorType ?? 'errorInit']
+  const { logout } = useAuth()
+
+  return (
+    <InfoCard variant="error" title={errorInfo.title} message={errorInfo.message}>
+      <div className="flex gap-2">
+        <Button asChild>
+          {/* we don't use a tanstack link here to force a page reload. So all auth states will be re-initialized */}
+          <a href="/">Try Again</a>
+        </Button>
+        <Button variant="secondary" onClick={() => void logout({ redirectUri: window.location.origin })}>
+          Login Again
+        </Button>
+      </div>
+    </InfoCard>
+  )
+}

package/dist/frontend-core/template/src/pages/error/default-error.page.tsx

@@ -1,6 +1,6 @@
-import { type ErrorComponentProps, Link } from '@tanstack/react-router'
+import { type ErrorComponentProps } from '@tanstack/react-router'
 
-import { Button, Card, CardContent, CardFooter, CardHeader, CardTitle } from '@postxl/ui-components'
+import { InfoCard } from '@postxl/ui-components'
 
 const isDev = import.meta.env.DEV
 
@@ -10,44 +10,28 @@ export const DefaultErrorPage = ({ error }: { error: ErrorComponentProps }) => {
   const errorStack = actualError instanceof Error ? actualError.stack : undefined
 
   return (
-    <div className="flex w-full pt-4 px-4 h-(--content-without-header) items-center justify-center">
-      <Card className="max-w-3xl w-full">
-        <CardHeader>
-          <CardTitle className="text-destructive">An unexpected error occurred</CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div className="p-4 bg-destructive/10 border border-destructive/20 rounded-md">
-            <p className="font-mono text-sm text-destructive break-words">{errorMessage}</p>
-          </div>
+    <InfoCard variant="error" title="An unexpected error occurred" message={errorMessage} showHomeButton>
+      {isDev && errorStack && (
+        <details>
+          <summary className="cursor-pointer text-sm text-muted-foreground hover:text-foreground">
+            Show stack trace
+          </summary>
+          <pre className="mt-2 p-4 bg-muted rounded-md overflow-auto text-xs font-mono whitespace-pre-wrap break-words max-h-96">
+            {errorStack}
+          </pre>
+        </details>
+      )}
 
-          {isDev && errorStack && (
-            <details>
-              <summary className="cursor-pointer text-sm text-muted-foreground hover:text-foreground">
-                Show stack trace
-              </summary>
-              <pre className="mt-2 p-4 bg-muted rounded-md overflow-auto text-xs font-mono whitespace-pre-wrap break-words max-h-96">
-                {errorStack}
-              </pre>
-            </details>
-          )}
-
-          {isDev && (
-            <details>
-              <summary className="cursor-pointer text-sm text-muted-foreground hover:text-foreground">
-                Show raw error data
-              </summary>
-              <pre className="mt-2 p-4 bg-muted rounded-md overflow-auto text-xs font-mono whitespace-pre-wrap break-words max-h-64">
-                {JSON.stringify(error, null, 2)}
-              </pre>
-            </details>
-          )}
-        </CardContent>
-        <CardFooter>
-          <Button asChild>
-            <Link to={'/'}>Back to Home</Link>
-          </Button>
-        </CardFooter>
-      </Card>
-    </div>
+      {isDev && (
+        <details>
+          <summary className="cursor-pointer text-sm text-muted-foreground hover:text-foreground">
+            Show raw error data
+          </summary>
+          <pre className="mt-2 p-4 bg-muted rounded-md overflow-auto text-xs font-mono whitespace-pre-wrap break-words max-h-64">
+            {JSON.stringify(error, null, 2)}
+          </pre>
+        </details>
+      )}
+    </InfoCard>
   )
 }

package/dist/frontend-core/template/src/pages/error/not-found-error.page.tsx

@@ -1,17 +1,15 @@
-import { Link, NotFoundError } from '@tanstack/react-router'
+import { NotFoundError } from '@tanstack/react-router'
 
-import { Button } from '@postxl/ui-components'
+import { InfoCard } from '@postxl/ui-components'
 
 export const NotFoundErrorPage = ({ error }: { error: NotFoundError }) => {
   console.log(error)
   return (
-    <div className="flex w-full pt-4 px-4 h-(--content-without-header)">
-      <div className="flex flex-col gap-4 border-1 border-(--discreet-border) w-full h-full items-center justify-center">
-        <h2>The page you’re looking for doesn’t exist.</h2>
-        <Button asChild>
-          <Link to={'/'}>Back to Home</Link>
-        </Button>
-      </div>
-    </div>
+    <InfoCard
+      variant="not-found"
+      title="Page Not Found"
+      message="The page you're looking for doesn't exist."
+      showHomeButton
+    />
   )
 }