fix(dashboard): Fix Page component not rendering when used externally

When consumed from an external app (using the dashboard as an npm
module) the PageContext was not working (there seemed to be 2 versions
created by Vite). Somehow, extracting it into a file solves it.

packages/dashboard/src/lib/components/shared/error-page.tsx

@@ -13,12 +13,12 @@ export interface ErrorPageProps {
  */
 export function ErrorPage({ message }: ErrorPageProps) {
     return (
-        <Page>
+        <Page pageId='error-page'>
             <PageTitle>
                 <Trans>Error</Trans>
             </PageTitle>
             <PageLayout>
-                <PageBlock column="main">
+                <PageBlock column="main" blockId='error-message'>
                     <Alert variant="destructive">
                         <AlertCircle className="h-4 w-4" />
                         <AlertTitle>Error</AlertTitle>

packages/dashboard/src/lib/framework/extension-api/extension-api-types.ts

@@ -1,9 +1,9 @@
+import { PageContextValue } from '@/framework/layout-engine/page-provider.js';
 import { AnyRoute, RouteOptions } from '@tanstack/react-router';
 import type React from 'react';
 
 import { DashboardAlertDefinition } from '../alert/types.js';
 import { DashboardWidgetDefinition } from '../dashboard-widget/types.js';
-import { PageContextValue } from '../layout-engine/page-layout.js';
 import { NavMenuItem } from '../nav-menu/nav-menu-extensions.js';
 
 export interface DashboardRouteDefinition {

packages/dashboard/src/lib/framework/layout-engine/page-layout.tsx

@@ -7,13 +7,14 @@ import { usePage } from '@/hooks/use-page.js';
 import { cn } from '@/lib/utils.js';
 import { NavigationConfirmation } from '@/components/shared/navigation-confirmation.js';
 import { useMediaQuery } from '@uidotdev/usehooks';
-import React, { ComponentProps, createContext } from 'react';
+import React, { ComponentProps } from 'react';
 import { Control, UseFormReturn } from 'react-hook-form';
 
 import { DashboardActionBarItem } from '../extension-api/extension-api-types.js';
 
 import { getDashboardActionBarItems, getDashboardPageBlocks } from './layout-extensions.js';
 import { LocationWrapper } from './location-wrapper.js';
+import { PageContext, PageContextValue } from '@/framework/layout-engine/page-provider.js';
 
 export interface PageProps extends ComponentProps<'div'> {
     pageId?: string;
@@ -22,8 +23,6 @@ export interface PageProps extends ComponentProps<'div'> {
     submitHandler?: any;
 }
 
-export const PageContext = createContext<PageContextValue | undefined>(undefined);
-
 export function Page({ children, pageId, entity, form, submitHandler, ...props }: PageProps) {
     const childArray = React.Children.toArray(children);
 
@@ -45,9 +44,9 @@ export function Page({ children, pageId, entity, form, submitHandler, ...props }
 
     return (
         <PageContext.Provider value={{ pageId, form, entity }}>
-            <PageContent 
-                pageHeader={pageHeader} 
-                pageContent={pageContent} 
+            <PageContent
+                pageHeader={pageHeader}
+                pageContent={pageContent}
                 form={form}
                 submitHandler={submitHandler}
                 className={props.className}
@@ -58,8 +57,8 @@ export function Page({ children, pageId, entity, form, submitHandler, ...props }
 }
 
 function PageContent({ pageHeader, pageContent, form, submitHandler, ...props }: {
-    pageHeader: React.ReactElement;
-    pageContent: React.ReactElement;
+    pageHeader: React.ReactNode;
+    pageContent: React.ReactNode;
     form?: UseFormReturn<any>;
     submitHandler?: any;
     className?: string;
@@ -67,11 +66,11 @@ function PageContent({ pageHeader, pageContent, form, submitHandler, ...props }:
     return (
         <div className={cn('m-4', props.className)} {...props}>
             <LocationWrapper>
-                <PageContentWithOptionalForm 
-                    pageHeader={pageHeader} 
-                    pageContent={pageContent} 
+                <PageContentWithOptionalForm
+                    pageHeader={pageHeader}
+                    pageContent={pageContent}
                     form={form}
-                    submitHandler={submitHandler} 
+                    submitHandler={submitHandler}
                 />
             </LocationWrapper>
         </div>
@@ -80,8 +79,8 @@ function PageContent({ pageHeader, pageContent, form, submitHandler, ...props }:
 
 export function PageContentWithOptionalForm({ form, pageHeader, pageContent, submitHandler }: {
     form?: UseFormReturn<any>;
-    pageHeader: React.ReactElement
-    pageContent: React.ReactElement;
+    pageHeader: React.ReactNode
+    pageContent: React.ReactNode;
     submitHandler?: any;
 }) {
     return form ? (
@@ -195,12 +194,6 @@ export function DetailFormGrid({ children }: { children: React.ReactNode }) {
     return <div className="md:grid md:grid-cols-2 gap-4 items-start mb-4">{children}</div>;
 }
 
-export interface PageContextValue {
-    pageId?: string;
-    entity?: any;
-    form?: UseFormReturn<any>;
-}
-
 export function PageTitle({ children }: { children: React.ReactNode }) {
     return <h1 className="text-2xl font-semibold">{children}</h1>;
 }

packages/dashboard/src/lib/framework/layout-engine/page-provider.tsx

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+import { UseFormReturn } from 'react-hook-form';
+
+export interface PageContextValue {
+    pageId?: string;
+    entity?: any;
+    form?: UseFormReturn<any>;
+}
+
+export const PageContext = createContext<PageContextValue | undefined>(undefined);

packages/dashboard/src/lib/hooks/use-page.tsx

@@ -1,5 +1,5 @@
-import { PageContext } from "@/framework/layout-engine/page-layout.js";
 import { useContext } from "react";
+import { PageContext } from '@/framework/layout-engine/page-provider.js';
 
 export function usePage() {
     const page = useContext(PageContext);