@postxl/generators 0.2.2

package/dist/frontend-core/template/src/lib/color.ts

@@ -0,0 +1,277 @@
+// TYPES -----------------------------------------------------------------------
+
+export type Color = Hex | Rgb | Hsl
+
+export type Hex = `#${string}`
+
+export type Rgb = { r: number; g: number; b: number; a?: number }
+
+export type Hsl = { h: number; s: number; l: number; a?: number }
+
+// CONVERSIONS -----------------------------------------------------------------
+
+export const toRgb = (color: Color) => {
+  if (typeof color === 'object' && 'h' in color) {
+    return hslToRgb(color)
+  }
+
+  if (typeof color === 'string') {
+    return hexToRgb(color)
+  }
+
+  return color
+}
+
+export const toHex = (color: Color) => {
+  if (typeof color === 'object' && 'r' in color) {
+    return rgbToHex(color)
+  }
+
+  if (typeof color === 'object' && 'h' in color) {
+    return hslToHex(color)
+  }
+
+  return color
+}
+
+export const toHsl = (color: Color) => {
+  if (typeof color === 'object' && 'r' in color) {
+    return rgbToHsl(color)
+  }
+
+  if (typeof color === 'string') {
+    return hexToHsl(color)
+  }
+
+  return color
+}
+
+export const toCss = (color: Color) => {
+  if (typeof color === 'object' && 'r' in color) {
+    return color.a ? `rgb(${color.r}, ${color.g}, ${color.b}, ${color.a})` : `rgb(${color.r}, ${color.g}, ${color.b})`
+  }
+
+  if (typeof color === 'object' && 'h' in color) {
+    return color.a
+      ? `hsl(${color.h}, ${color.s}%, ${color.l}% / ${color.a})`
+      : `hsl(${color.h}, ${color.s}%, ${color.l}%)`
+  }
+
+  return color
+}
+
+export const toShades = (lightShade: Color, darkShade: Color, totalShades: number): Color[] => {
+  if (totalShades < 2) {
+    totalShades = 2
+  }
+
+  const lightRgb = toRgb(lightShade)
+  const darkRgb = toRgb(darkShade)
+
+  const shades: Color[] = []
+  for (let i = 0; i < totalShades; i++) {
+    const ratio = i / (totalShades - 1) // Calculate the interpolation ratio
+    const interpolatedRgb = {
+      r: Math.round(lightRgb.r + ratio * (darkRgb.r - lightRgb.r)),
+      g: Math.round(lightRgb.g + ratio * (darkRgb.g - lightRgb.g)),
+      b: Math.round(lightRgb.b + ratio * (darkRgb.b - lightRgb.b)),
+    } satisfies Rgb
+
+    shades.push(toHex(interpolatedRgb))
+  }
+
+  return shades
+}
+
+// ACCESSIBILITY ---------------------------------------------------------------
+
+export const luminance = (color: Color) => {
+  let { r, g, b } = toRgb(color)
+
+  const r8bit = r / 255
+  const g8bit = g / 255
+  const b8bit = b / 255
+
+  r = r8bit <= 0.03928 ? r8bit / 12.92 : Math.pow((r8bit + 0.055) / 1.055, 2.4)
+  g = g8bit <= 0.03928 ? g8bit / 12.92 : Math.pow((g8bit + 0.055) / 1.055, 2.4)
+  b = b8bit <= 0.03928 ? b8bit / 12.92 : Math.pow((b8bit + 0.055) / 1.055, 2.4)
+
+  return Number((0.2126 * r + 0.7152 * g + 0.0722 * b).toPrecision(2))
+}
+
+export const contrast = (l1: number, l2: number) => (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05)
+
+export const isAccessible = (
+  bg: Color,
+  fg: Color,
+  size: 'sm' | 'lg' = 'sm',
+  criteria: 'aa' | 'aaa' = 'aaa',
+): boolean => {
+  const bgRgb = toRgb(bg)
+  const fgRgb = toRgb(fg)
+
+  const bgLuminance = luminance(bgRgb)
+  const fgLuminance = luminance(fgRgb)
+
+  const contrastRatio = contrast(bgLuminance, fgLuminance)
+
+  if (criteria === 'aa' && size === 'sm') {
+    return contrastRatio >= 4.5
+  } else if (criteria === 'aa' && size === 'lg') {
+    return contrastRatio >= 3
+  } else if (criteria === 'aaa' && size === 'sm') {
+    return contrastRatio >= 7
+  } else if (criteria === 'aaa' && size === 'lg') {
+    return contrastRatio >= 4.5
+  }
+
+  return false
+}
+
+export const toContrastColor = (background: Color): Color => {
+  const bgLuminance = luminance(background)
+
+  console.log(background, bgLuminance)
+
+  const whiteContrast = contrast(bgLuminance, luminance('#ffffff'))
+  const blackContrast = contrast(bgLuminance, luminance('#000000'))
+
+  return whiteContrast >= blackContrast ? '#ffffff' : '#000000'
+}
+
+// GUARDS ----------------------------------------------------------------------
+
+export const isCssVariable = (color: unknown): color is `--${string}` =>
+  typeof color === 'string' && color.startsWith('--')
+
+export const isHexColor = (color: unknown): color is `#${string}` => typeof color === 'string' && color.startsWith('#')
+
+// INTERNAL CONVERSIONS --------------------------------------------------------
+
+const hexToRgb = (hex: string) => {
+  const re = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i
+  const match = re.exec(hex)
+
+  if (!match) {
+    throw new Error(`Invalid hex color: ${hex}`)
+  }
+
+  return {
+    r: Number.parseInt(match[1], 16),
+    g: Number.parseInt(match[2], 16),
+    b: Number.parseInt(match[3], 16),
+  }
+}
+
+const hexToHsl = (hex: string) => rgbToHsl(hexToRgb(hex))
+
+const hslToRgb = ({ h, s, l, a }: Hsl) => {
+  // The HSL format CSS uses is degrees and percentages, like hsl(124, 60%, 39%).
+  // The algorithm below expects these values to be normalized to the range 0 - 1.
+  h /= 360
+  s /= 100
+  l /= 100
+
+  let r, g, b
+
+  if (s === 0) {
+    r = g = b = l
+  } else {
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s
+    const p = 2 * l - q
+
+    r = hueToRgb(p, q, h + 1 / 3)
+    g = hueToRgb(p, q, h)
+    b = hueToRgb(p, q, h - 1 / 3)
+  }
+
+  return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255), a }
+}
+
+const hueToRgb = (p: number, q: number, t: number) => {
+  if (t < 0) {
+    t += 1
+  }
+  if (t > 1) {
+    t -= 1
+  }
+  if (t < 1 / 6) {
+    return p + (q - p) * 6 * t
+  }
+  if (t < 1 / 2) {
+    return q
+  }
+  if (t < 2 / 3) {
+    return p + (q - p) * (2 / 3 - t) * 6
+  }
+
+  return p
+}
+
+const hslToHex = ({ h, s, l, a }: Hsl) => rgbToHex(hslToRgb({ h, s, l, a }))
+
+const rgbToHsl = ({ r, g, b, a }: Rgb) => {
+  r /= 255
+  g /= 255
+  b /= 255
+
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+
+  let h = 0
+  let s = 0
+  const l = (max + min) / 2
+
+  if (max !== min) {
+    const d = max - min
+
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6
+        break
+      case g:
+        h = ((b - r) / d + 2) / 6
+        break
+      case b:
+        h = ((r - g) / d + 4) / 6
+        break
+    }
+  }
+
+  return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100), a }
+}
+
+const rgbToHex = ({ r, g, b }: Rgb) => {
+  // @todo: Add support for alpha channel.
+  return ('#' + ((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1)) as Hex
+}
+
+//
+
+export const generateShades = (baseColor: string, count: number): Hex[] => {
+  const shades: Hex[] = []
+
+  // Parse the HSL string to extract h, s, and l values
+  const hslRe = /hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)/
+  const hslMatch = hslRe.exec(baseColor)
+  if (!hslMatch) {
+    throw new Error('Invalid HSL color format. Expected "hsl(h, s%, l%)".')
+  }
+
+  const h = Number.parseInt(hslMatch[1], 10) // Hue
+  const s = Number.parseInt(hslMatch[2], 10) // Saturation
+  const l = Number.parseInt(hslMatch[3], 10) // Lightness
+
+  for (let i = 0; i < count; i++) {
+    const lightnessStep = i / (count - 1) // Calculate the lightness step
+    const adjustedLightness = Math.max(0, Math.min(100, l * (1 - lightnessStep))) // Adjust lightness
+
+    const shadeHsl: Hsl = { h, s, l: adjustedLightness } // Create the new HSL shade
+    const shadeRgb = hslToRgb(shadeHsl) // Convert the HSL shade back to RGB
+    shades.push(rgbToHex(shadeRgb)) // Convert the RGB shade to Hex and add to the array
+  }
+
+  return shades
+}

package/dist/frontend-core/template/src/lib/compose-refs.ts

@@ -0,0 +1,62 @@
+import * as React from 'react'
+
+type PossibleRef<T> = React.Ref<T> | undefined
+
+/**
+ * Set a given ref to a given value
+ * This utility takes care of different types of refs: callback refs and RefObject(s)
+ */
+function setRef<T>(ref: PossibleRef<T>, value: T) {
+  if (typeof ref === 'function') {
+    return ref(value)
+  }
+
+  if (ref !== null && ref !== undefined) {
+    ref.current = value
+  }
+}
+
+/**
+ * A utility to compose multiple refs together
+ * Accepts callback refs and RefObject(s)
+ */
+function composeRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {
+  return (node) => {
+    let hasCleanup = false
+    const cleanups = refs.map((ref) => {
+      const cleanup = setRef(ref, node)
+      if (!hasCleanup && typeof cleanup === 'function') {
+        hasCleanup = true
+      }
+      return cleanup
+    })
+
+    // React <19 will log an error to the console if a callback ref returns a
+    // value. We don't use ref cleanups internally so this will only happen if a
+    // user's ref callback returns a value, which we only expect if they are
+    // using the cleanup functionality added in React 19.
+    if (hasCleanup) {
+      return () => {
+        for (let i = 0; i < cleanups.length; i++) {
+          const cleanup = cleanups[i]
+          if (typeof cleanup === 'function') {
+            cleanup()
+          } else {
+            setRef(refs[i], null)
+          }
+        }
+      }
+    }
+  }
+}
+
+/**
+ * A custom hook that composes multiple refs
+ * Accepts callback refs and RefObject(s)
+ */
+function useComposedRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return React.useCallback(composeRefs(...refs), refs) // we don't want to re-run this callback when the refs change
+}
+
+export { composeRefs, useComposedRefs }

package/dist/frontend-core/template/src/lib/config.ts

@@ -0,0 +1,77 @@
+import { z } from 'zod'
+
+const APP_CONFIG_SCHEMA = z.object({
+  apiURL: z.string(),
+  baseURL: z.string(),
+  keycloakURL: z.string(),
+  keycloakRealm: z.string(),
+  keycloakClientId: z.string(),
+  mapBoxAccessToken: z.string(),
+  mapBoxDisableTransitions: z.boolean().optional().default(false),
+  useTestAssets: z.boolean().optional().default(false),
+  enableAnalytics: z.boolean().optional().default(false),
+  analyticsScriptUrl: z.string().optional(),
+  AUTH: z.boolean().optional().default(true),
+  enableDevTools: z.boolean().optional().default(false),
+  checkLoginIframe: z.boolean().optional().default(true),
+})
+
+/**
+ * A list of boolean environment variables.
+ * When using the Docker multi-stage build, these variables are replaced placeholders - which are strings.
+ * As the parser expects booleans, we need to manually convert them to `false` during the build.
+ */
+const DOCKER_BUILD_PLACEHOLDERS_BOOLEAN = new Set(
+  ['VITE_PUBLIC_USE_AUTH', 'VITE_PUBLIC_ENABLE_ANALYTICS'].map((key) => `PLACEHOLDER_${key}`),
+)
+
+export const APP_CONFIG = APP_CONFIG_SCHEMA.parse({
+  apiURL: viteenv(import.meta.env.VITE_PUBLIC_API_URL),
+  baseURL: viteenv(import.meta.env.VITE_PUBLIC_BASE_URL),
+  keycloakURL: viteenv(import.meta.env.VITE_PUBLIC_KEYCLOAK_URL),
+  keycloakRealm: viteenv(import.meta.env.VITE_PUBLIC_KEYCLOAK_REALM),
+  keycloakClientId: viteenv(import.meta.env.VITE_PUBLIC_KEYCLOAK_CLIENT_ID),
+  mapBoxAccessToken: viteenv(import.meta.env.VITE_PUBLIC_MAPBOX_ACCESS_TOKEN),
+  mapBoxDisableTransitions: viteenv(import.meta.env.VITE_PUBLIC_MAPBOX_DISABLE_TRANSITIONS),
+  useTestAssets: viteenv(import.meta.env.VITE_PUBLIC_USE_TEST_ASSETS),
+  enableAnalytics: viteenv(import.meta.env.VITE_PUBLIC_ENABLE_ANALYTICS),
+  analyticsScriptUrl: viteenv(import.meta.env.VITE_PUBLIC_ANALYTICS_SCRIPT_URL),
+  AUTH: viteenv(import.meta.env.VITE_AUTH),
+  enableDevTools: viteenv(import.meta.env.VITE_ENABLE_DEV_TOOLS),
+  checkLoginIframe: viteenv(import.meta.env.VITE_PUBLIC_CHECK_LOGIN_IFRAME),
+})
+
+/**
+ * Transforms a stringified environment variable into its original type.
+ *
+ * @example
+ *
+ * ```ts
+ * const value = viteenv(process.env.VITE_PUBLIC_ENV)
+ * ```
+ */
+
+export function viteenv(value?: string | null): string | boolean | number | null | undefined {
+  if (value == null) {
+    return value
+  }
+
+  // During Next build, the env vars are replaced with placeholder strings.
+  // This works fine for strings - but not for booleans. So we manually evaluate the placeholders to `false`
+  // during the build. At first startup, the placeholders are replaced with the actual NEXT_PUBLIC_... reference -
+  // which will be populated by Next at startup with the actual env variables.
+  // See https://dev.to/itsrennyman/manage-nextpublic-environment-variables-at-runtime-with-docker-53dl
+  if (DOCKER_BUILD_PLACEHOLDERS_BOOLEAN.has(value)) {
+    return false
+  }
+
+  // NOTE: We need to parse the value as JSON because Next statically replaces all references to `process.env` with the
+  // stringified values of the env vars at build time.
+  // https://github.com/vercel/next.js/blob/9db91ebfa04d2ebf58f58ebd1ec2c26b46b8341a/packages/next/src/build/webpack-config.ts#L231
+  try {
+    return JSON.parse(value) as string | boolean | number | null | undefined
+  } catch {
+    // If we can't parse the value as JSON, just return the original value as string.
+    return value
+  }
+}

package/dist/frontend-core/template/src/lib/query-client.ts

@@ -0,0 +1,25 @@
+import { MutationCache, QueryCache, QueryClient } from '@tanstack/react-query'
+
+const queryCache = new QueryCache({
+  onError: (error) => {
+    // always log errors to console
+    console.log(error)
+  },
+})
+
+const mutationCache = new MutationCache({
+  onError: (error) => {
+    console.log(error)
+  },
+})
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: 0,
+    },
+  },
+  queryCache,
+  mutationCache,
+})

package/dist/frontend-core/template/src/lib/react.ts

@@ -0,0 +1,25 @@
+/**
+ * This file was generated by PostXL generator.
+ *
+ * Feel free to manually edit it. The generator will not overwrite it. We suggest you
+ * remove the disclaimer to avoid confusion.
+ **/
+import { type Context, useContext } from 'react'
+
+/**
+ * Let's you create a hook from a React context that may be safely used in the app.
+ */
+export function createUseContext<ContextValue>(
+  context: Context<ContextValue>,
+  name: string,
+): () => NonNullable<ContextValue> {
+  return () => {
+    const value = useContext(context)
+
+    if (!value) {
+      throw new Error(`The context "${name}" is not available.`)
+    }
+
+    return value
+  }
+}

package/dist/frontend-core/template/src/lib/router.tsx

@@ -0,0 +1,26 @@
+import { DefaultErrorPage } from '@pages/error/default-error.page'
+import { NotFoundErrorPage } from '@pages/error/not-found-error.page'
+import { createRouter } from '@tanstack/react-router'
+
+import { routeTree } from '../routeTree.gen'
+
+export const router = createRouter({
+  routeTree,
+  defaultPreload: 'intent',
+  scrollRestoration: true,
+  context: {
+    // This will be set after we wrap the app in an AuthProvider (see main.tsx)
+    auth: undefined!,
+  },
+  defaultErrorComponent: (error) => <DefaultErrorPage error={error} />,
+  defaultNotFoundComponent: (error) => <NotFoundErrorPage error={error} />,
+  // defaultPendingComponent: () => <div>Loading...</div>,
+})
+
+// Register things for typesafety (when using routes as string)
+declare module '@tanstack/react-router' {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+  interface Register {
+    router: typeof router
+  }
+}

package/dist/frontend-core/template/src/lib/types.ts

@@ -0,0 +1,9 @@
+/**
+ * Makes a type check that is only valid when all cases of a switch
+ * statement have been convered.
+ */
+export class ExhaustiveSwitchCheck extends Error {
+  constructor(val: never) {
+    super(`Unreachable case: ${JSON.stringify(val)}`)
+  }
+}

package/dist/frontend-core/template/src/lib/utils.ts

@@ -0,0 +1,33 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+/**
+ * Shallow equality check for two plain objects. Returns true if the objects
+ * have the same keys and all primitive/Date values are strictly equal.
+ */
+export function shallowEqual(a?: Record<string, unknown> | null, b?: Record<string, unknown> | null) {
+  if (!a || !b) {
+    return false
+  }
+  const aKeys = Object.keys(a)
+  const bKeys = Object.keys(b)
+  if (aKeys.length !== bKeys.length) {
+    return false
+  }
+  for (const key of aKeys) {
+    const av = (a as any)[key]
+    const bv = (b as any)[key]
+    if (av instanceof Date && bv instanceof Date) {
+      if (av.getTime() !== bv.getTime()) {
+        return false
+      }
+    } else if (av !== bv) {
+      return false
+    }
+  }
+  return true
+}

package/dist/frontend-core/template/src/main.tsx

@@ -0,0 +1,48 @@
+import { AuthProvider, useAuth } from '@context-providers/auth-context-provider'
+import { ThemeProvider } from '@context-providers/theme-context-provider'
+import { QueryClientProvider } from '@tanstack/react-query'
+import { RouterProvider } from '@tanstack/react-router'
+
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+
+import { useFontsLoaded } from '@hooks/useFontsLoaded'
+import { APP_CONFIG } from '@lib/config'
+import { queryClient } from '@lib/query-client'
+import { router } from '@lib/router'
+import { createTrpcClient, TRPCProvider } from '@lib/trpc'
+
+function AppRouter() {
+  const auth = useAuth()
+
+  return <RouterProvider router={router} context={{ auth }} />
+}
+
+function App() {
+  const trpcClient = createTrpcClient({ apiUrl: APP_CONFIG.apiURL })
+
+  // required for snapshot testing
+  const fontsLoaded = useFontsLoaded()
+
+  if (!trpcClient || !fontsLoaded) {
+    return
+  }
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
+        <AuthProvider>
+          <ThemeProvider defaultTheme="light">
+            <AppRouter />
+          </ThemeProvider>
+        </AuthProvider>
+      </TRPCProvider>
+    </QueryClientProvider>
+  )
+}
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

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

@@ -0,0 +1,97 @@
+import { useAuth } from '@context-providers/auth-context-provider'
+import { useTheme } from '@context-providers/theme-context-provider'
+import { MoonIcon, PersonIcon, SunIcon } from '@radix-ui/react-icons'
+
+import { toast } from 'sonner'
+
+import { Button } from '@components/ui/button/button'
+import { ContentFrame } from '@components/ui/content-frame/content-frame'
+import { APP_CONFIG } from '@lib/config'
+import { useState } from 'react'
+import { Post } from '@types'
+import { usePosts } from '@hooks/use-posts'
+import { UpdatePostModal } from '@components/forms/post/update'
+import { Spreadsheet } from '@components/ui/spreadsheet'
+import model from '@components/ui/spreadsheet/model.json'
+import type { Model } from '@components/ui/spreadsheet/types'
+
+export const DashboardPage = () => {
+  const { logout, user } = useAuth()
+  const { theme, setTheme } = useTheme()
+
+  const [selectedPost, setSelectedPost] = useState<Post | null>(null)
+  const [isUpdateModalOpen, setIsUpdateModalOpen] = useState(false)
+
+  const onToggleTheme = () => {
+    setTheme(theme === 'light' ? 'dark' : 'light')
+    toast.info("As you may see now it's " + (theme === 'light' ? 'dark' : 'light') + ' theme')
+  }
+  const { list } = usePosts()
+
+  const data = {
+    Sales: [100, null, 110, 120, 130, 140, null, 160, 170, 180, 190, null, 200, 210, 220, 230, null, null],
+    COGS: [-10, null, -15, -20, -25, -30, null, -35, -40, -45, -50, null, -55, -60, -65, -70, null, null],
+    SGNA: [-20, null, -25, -30, -35, -40, null, -45, -50, -55, -60, null, -65, -70, -75, -80, null, null],
+    FTE: [1, null, 2, 3, 4, 5, null, 6, 7, 8, 9, null, 10, 11, 12, 13, null, null],
+    // prettier-ignore
+    CO2Impact: [1000, null, 1100, 1300, 1400, 1500, null, 1600, 1700, 1800, 1900, null, 2000, 2100, 2200, 2300, null, null],
+  }
+
+  return (
+    <div className="p-4 h-lvh">
+      <ContentFrame
+        title={APP_CONFIG.AUTH ? 'Dashboard (authorized route)' : 'Dashboard'}
+        controls={[
+          <Button key="btn-theme" onClick={onToggleTheme} __e2e_test_id__="button-toggle-theme">
+            {theme === 'light' ? <MoonIcon /> : <SunIcon />}
+          </Button>,
+          APP_CONFIG.AUTH && (
+            <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>
+        </div>
+        <div className="p-3">
+          <h3 className="mb-4">Posts:</h3>
+          <ul>
+            {list
+              .toSorted((a, b) => a.id.localeCompare(b.id))
+              .map((post) => (
+                <li
+                  key={post.id}
+                  onClick={() => {
+                    setSelectedPost(post)
+                    setIsUpdateModalOpen(true)
+                  }}
+                  className="cursor-pointer mb-2 hover:underline"
+                >
+                  <strong>{post.title}</strong>: {post.body}
+                </li>
+              ))}
+          </ul>
+        </div>
+        <div className="p-3">
+          <Spreadsheet model={model as Model} data={data} />
+        </div>
+      </ContentFrame>
+      <UpdatePostModal
+        initial={selectedPost!}
+        open={isUpdateModalOpen}
+        onClose={() => setIsUpdateModalOpen(false)}
+        onSuccess={(updatedPost) => {
+          toast.success(`Post "${updatedPost.title}" updated successfully!`)
+          setIsUpdateModalOpen(false)
+        }}
+        onError={(updatedPost, error) => {
+          toast.error(`Error updating post "${updatedPost.title}": ${String(error)}`)
+        }}
+      />
+    </div>
+  )
+}