@postxl/generators 1.17.1 → 1.18.0

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

@@ -0,0 +1,49 @@
+import { CommandPalette } from '@app-actions/command-palette'
+import { HeaderProvider } from '@context-providers/header-context-provider'
+import { Outlet } from '@tanstack/react-router'
+
+import { ApplicationHeader } from '@components/ui/application-header/application-header'
+import { DynamicTabbedSidebar, SidebarInset, SidebarProvider, SidebarTabsProvider } from '@postxl/ui-components'
+
+export const AuthorizedPageLayout = () => {
+  return (
+    <>
+      <CommandPalette />
+
+      <SidebarTabsProvider>
+        <SidebarProvider
+          defaultOpenSidebars={{ left: true, right: false }}
+          defaultWidths={{ left: 300, right: 300 }}
+          keyboardShortcuts={{ b: 'left', '.': 'right' }}
+          storageKey={'app-sidebar-state'}
+        >
+          <HeaderProvider>
+            <div className="flex flex-col h-screen max-h-screen relative w-full">
+              <ApplicationHeader />
+
+              <div className="flex grow relative max-h-[calc(100vh-var(--header-height))]">
+                {/* sidebar left */}
+                <DynamicTabbedSidebar
+                  side="left"
+                  orientation="vertical"
+                  className="top-[var(--header-height)] h-[calc(100%-var(--header-height))]"
+                />
+
+                {/* page content */}
+                <SidebarInset className="h-full grid">
+                  <Outlet />
+                </SidebarInset>
+
+                {/* sidebar right */}
+                <DynamicTabbedSidebar
+                  side="right"
+                  className="top-[var(--header-height)] h-[calc(100%-var(--header-height))]"
+                />
+              </div>
+            </div>
+          </HeaderProvider>
+        </SidebarProvider>
+      </SidebarTabsProvider>
+    </>
+  )
+}

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

@@ -1,29 +1,52 @@
+import { AiSidebarContent } from '@app-actions/ai-sidebar-content'
 import { useAuth } from '@context-providers/auth-context-provider'
-import { ColorMode } from '@context-providers/theme-context-provider'
-import { PersonIcon } from '@radix-ui/react-icons'
 import { Post } from '@types'
 
-import { useState } from 'react'
+import { FunnelPlus, ListTree, Sparkles } from 'lucide-react'
+import React, { useState } from 'react'
 import { toast } from 'sonner'
 
 import { UpdatePostModal } from '@components/forms/post/update'
-import { ColorModeToggle } from '@components/ui/color-mode-toggle/color-mode-toggle'
 import { Spreadsheet } from '@components/ui/spreadsheet'
 import model from '@components/ui/spreadsheet/model.json'
 import type { Model } from '@components/ui/spreadsheet/types'
 import { usePosts } from '@hooks/use-posts'
-import { APP_CONFIG } from '@lib/config'
-import { Button, ContentFrame } from '@postxl/ui-components'
+import {
+  ContentFrame,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarTab,
+} from '@postxl/ui-components'
 
-export const DashboardPage = () => {
-  const { logout, viewerData } = useAuth()
+// ---------------------------------------------------------------------------
+// placeholder tab content (only for demo)
+// ---------------------------------------------------------------------------
+function TabContent({ items }: Readonly<{ items: string[] }>) {
+  return (
+    <SidebarGroup>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {items.map((item) => (
+            <SidebarMenuItem key={item}>
+              <SidebarMenuButton>
+                <span>{item}</span>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
 
+export const DashboardPage = () => {
+  const { viewerData } = useAuth()
   const [selectedPost, setSelectedPost] = useState<Post | null>(null)
   const [isUpdateModalOpen, setIsUpdateModalOpen] = useState(false)
 
-  const onToggleTheme = (nextMode: ColorMode) => {
-    toast.info("As you may see now it's " + nextMode + ' color mode')
-  }
   const { list } = usePosts()
 
   const data = {
@@ -36,44 +59,35 @@ export const DashboardPage = () => {
   }
 
   return (
-    <div className="p-4 h-lvh">
-      <ContentFrame
-        title={APP_CONFIG.AUTH ? 'Dashboard (authorized route)' : 'Dashboard'}
-        controls={[
-          <ColorModeToggle key="btn-color-mode" onClick={onToggleTheme} __e2e_test_id__="button-toggle-theme" />,
-          APP_CONFIG.AUTH && (
-            <Button key="btn-logout" onClick={() => logout()}>
-              <PersonIcon /> Logout
-            </Button>
-          ),
-        ]}
-      >
-        <div className="p-3">
-          <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>
-          <ul>
-            {list
-              .toSorted((a, b) => a.title.localeCompare(b.title))
-              .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} />
+    <>
+      <ContentFrame title={`Hi ${viewerData?.user?.name}!`}>
+        <div className="grid">
+          <div className="p-3">
+            <p>eMail: {viewerData?.user?.email}</p>
+            <p>roles: {viewerData?.userRoles.join(', ')}</p>
+          </div>
+          <div className="p-3">
+            <h3 className="mb-4">Posts:</h3>
+            <ul>
+              {list
+                .toSorted((a, b) => a.title.localeCompare(b.title))
+                .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 overflow-auto">
+            <Spreadsheet model={model as Model} data={data} />
+          </div>
         </div>
       </ContentFrame>
       <UpdatePostModal
@@ -88,6 +102,15 @@ export const DashboardPage = () => {
           toast.error(`Error updating post "${updatedPost.title}": ${String(error)}`)
         }}
       />
-    </div>
+      <SidebarTab side="left" id="tab-l-1" icon={ListTree} label="Tab 1 label" order={0}>
+        <TabContent items={['Lorem ipsum', 'Dolor sit', 'Amet consectetur']} />
+      </SidebarTab>
+      <SidebarTab side="left" id="tab-l-2" icon={FunnelPlus} label="Tab 2 label" order={1}>
+        <TabContent items={['Donec felis neque', 'Tincidunt vel eros', 'Rutrum, porttitor pulvinar']} />
+      </SidebarTab>
+      <SidebarTab side="right" id="ai-assistant-content" icon={Sparkles} label="AI Assistant" order={2}>
+        <AiSidebarContent />
+      </SidebarTab>
+    </>
   )
 }

package/dist/frontend-core/template/src/routes/_auth-routes.tsx

@@ -1,5 +1,6 @@
 import { useAuth } from '@context-providers/auth-context-provider'
-import { createFileRoute, Outlet } from '@tanstack/react-router'
+import { AuthorizedPageLayout } from '@pages/authorized-page-layout'
+import { createFileRoute } from '@tanstack/react-router'
 
 import { useEffect } from 'react'
 
@@ -28,5 +29,5 @@ function AuthGuard() {
     return null
   }
 
-  return <Outlet />
+  return <AuthorizedPageLayout />
 }

package/dist/frontend-core/template/src/styles/theme-default.css

@@ -3,6 +3,8 @@
 html.default.light {
   --color-scheme: light;
 
+  --header-height: 49px;
+
   --background: hsl(0 0% 100%);
   --foreground: hsl(0 0% 20%);
   --card: hsl(0 0% 100%);
@@ -36,7 +38,7 @@ html.default.light {
   --sidebar-border: hsl(220 13.0435% 90.9804%);
   --sidebar-ring: hsl(217.2193 91.2195% 59.8039%);
   --font-sans: Helvetica, sans-serif;
-  --font-serif: "Times New Roman", Times, serif;
+  --font-serif: 'Times New Roman', Times, serif;
   --font-mono: JetBrains Mono, monospace;
   --radius: 0.375rem;
   --shadow-x: 0;
@@ -55,7 +57,7 @@ html.default.light {
   --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
   --tracking-normal: 0em;
   --spacing: 0.25rem;
-  
+
   /* additional theme colors */
   --discreet-border: #c0c6c9;
 
@@ -75,6 +77,8 @@ html.default.light {
 html.default.dark {
   --color-scheme: dark;
 
+  --header-height: 49px;
+
   --background: hsl(0 0% 9.0196%);
   --foreground: hsl(0 0% 89.8039%);
   --card: hsl(0 0% 14.902%);
@@ -125,7 +129,7 @@ html.default.dark {
   --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
   --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
   --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
-  
+
   /* additional theme colors */
   --discreet-border: #3f4143;
 }

package/dist/frontend-trpc-client/trpc-client.generator.js

@@ -54,7 +54,7 @@ exports.generator = {
     ],
     register: (context) => {
         const { packageVersions } = context.trpcRouter;
-        context.frontend.packageJson.dependencies.push({ packageName: '@tanstack/react-query-devtools', version: '5.91.1' }, { packageName: '@tanstack/react-query', version: '5.90.12' }, { packageName: '@trpc/client', version: packageVersions.trpc }, { packageName: '@trpc/react-query', version: packageVersions.trpc }, { packageName: '@trpc/tanstack-react-query', version: packageVersions.trpc }, { packageName: 'react-query', version: '3.39.3' }, { packageName: 'superjson', version: packageVersions.superJSON });
+        context.frontend.packageJson.dependencies.push({ packageName: '@tanstack/react-query-devtools', version: '5.91.3' }, { packageName: '@tanstack/react-query', version: '5.90.21' }, { packageName: '@trpc/client', version: packageVersions.trpc }, { packageName: '@trpc/react-query', version: packageVersions.trpc }, { packageName: '@trpc/tanstack-react-query', version: packageVersions.trpc }, { packageName: 'react-query', version: '3.39.3' }, { packageName: 'superjson', version: packageVersions.superJSON });
         const location = Generator.toBackendModuleLocation('@lib/trpc');
         const trpcClient = {
             // Important: Do not change this name as this is the default name as provided by the TRPC library

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@postxl/generators",
-  "version": "1.17.1",
+  "version": "1.18.0",
   "description": "Code generators for PXL - generates backend, frontend, Prisma schemas, and more",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -41,13 +41,13 @@
     "directory": "packages/generators"
   },
   "dependencies": {
-    "@faker-js/faker": "9.4.0",
-    "@prisma/prisma-schema-wasm": "7.2.0-4.0c8ef2ce45c83248ab3df073180d5eda9e8be7a3",
+    "@faker-js/faker": "9.9.0",
+    "@prisma/prisma-schema-wasm": "7.5.0-9.c6be8e68bf8e4a36534064f9323a343f2fcafe21",
     "exceljs": "^4.4.0",
-    "@postxl/generator": "^1.3.5",
+    "@postxl/generator": "^1.3.6",
     "@postxl/schema": "^1.6.0",
-    "@postxl/utils": "^1.3.3",
-    "@postxl/ui-components": "^1.5.2"
+    "@postxl/ui-components": "^1.6.0",
+    "@postxl/utils": "^1.3.4"
   },
   "devDependencies": {},
   "wallaby": {