feat(ui): new menu and cardgrid uis and stories

packages/client/.storybook/main.ts

@@ -5,4 +5,9 @@ import { defineMain } from '@storybook/react-vite/node'
 export default defineMain({
   framework: '@storybook/react-vite',
   stories: ['../stories/**/*.stories.tsx'],
+  addons: ['@storybook/addon-docs'],
+  viteFinal: async config => {
+    config.define = { ...config.define, 'process.env': {} }
+    return config
+  },
 })

packages/client/.storybook/preview-head.html

@@ -0,0 +1,20 @@
+<style>
+  /* Storybook's Docs page applies a class of '.sb-show-main' 
+    or renders inside a specific container layout. 
+    This target breaks your app's restrictions ONLY inside Storybook.
+  */
+  html,
+  body {
+    overflow: auto !important;
+    display: block !important;
+    height: auto !important;
+    min-height: 100vh !important;
+    overscroll-behavior-y: auto !important;
+  }
+
+  /* Ensures the root wrapper can grow naturally with the docs content */
+  #root {
+    height: auto !important;
+    min-height: 100% !important;
+  }
+</style>

packages/client/.storybook/preview.tsx

@@ -0,0 +1,69 @@
+/* eslint-disable import/no-extraneous-dependencies */
+
+import { definePreview, type Decorator } from '@storybook/react-vite'
+import addonDocs from '@storybook/addon-docs'
+
+import { MemoryRouter, Route, Routes } from 'react-router-dom'
+import { ThemeProvider } from 'styled-components'
+import { I18nextProvider } from 'react-i18next'
+import { AntConfigProvider } from '@coko/client'
+
+import { makeTheme } from '../app/theme'
+import GlobalStyle from '../app/theme/elements/GlobalStyle'
+import i18next from '../app/i18n'
+
+const theme = makeTheme()
+
+const withProviders: Decorator = (Story, context) => {
+  const initialEntries = context.parameters?.router?.initialEntries ?? ['/']
+  const routePath = context.parameters?.router?.path
+
+  const content = (
+    <ThemeProvider theme={theme}>
+      <I18nextProvider i18n={i18next}>
+        <AntConfigProvider theme={theme}>
+          <GlobalStyle />
+          <div
+            onClick={e => {
+              const anchor = (e.target as HTMLElement).closest('a')
+              if (anchor) {
+                /* eslint-disable-next-line no-console */
+                console.log('navigate to:', anchor.getAttribute('href'))
+              }
+            }}
+            onKeyDown={e => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                const anchor = (e.target as HTMLElement).closest('a')
+                if (anchor) {
+                  /* eslint-disable-next-line no-console */
+                  console.log('navigate to:', anchor.getAttribute('href'))
+                }
+              }
+            }}
+            role="presentation"
+          >
+            <Story />
+          </div>
+        </AntConfigProvider>
+      </I18nextProvider>
+    </ThemeProvider>
+  )
+
+  return (
+    <MemoryRouter initialEntries={initialEntries}>
+      {routePath ? (
+        <Routes>
+          <Route element={content} path={routePath} />
+        </Routes>
+      ) : (
+        content
+      )}
+    </MemoryRouter>
+  )
+}
+
+export default definePreview({
+  addons: [addonDocs()],
+  tags: ['autodocs'],
+  decorators: [withProviders],
+})

packages/client/app/Router.tsx

@@ -39,7 +39,13 @@ import UsersPage from './components/component-users-manager/src/UsersPage'
 import { ConfigContext } from './components/config/src'
 import { XpubContext } from './components/xpub-with-context/src'
 
-import { AuthenticatedPage, GroupPage, MenuPage } from './pages'
+import {
+  AuthenticatedPage,
+  CMSPage,
+  FormsPage,
+  GroupPage,
+  MenuPage,
+} from './pages'
 
 import { CURRENT_USER } from './queries'
 
@@ -107,16 +113,19 @@ const RoleGate = (props: RoleGateProps): ReactNode => {
  */
 const DashboardRoutes = (): ReactNode => {
   const config = useContext(ConfigContext)
+  // @ts-ignore
+  const dashboard = config?.dashboard
+
   return (
     <Routes>
       <Route element={<DashboardRedirect />} path="" />
-      {config?.dashboard?.showSections?.includes('submission') && (
+      {dashboard?.showSections?.includes('submission') && (
         <Route element={<DashboardSubmissionsPage />} path="submissions" />
       )}
-      {config?.dashboard?.showSections?.includes('review') && (
+      {dashboard?.showSections?.includes('review') && (
         <Route element={<DashboardReviewsPage />} path="reviews" />
       )}
-      {config?.dashboard?.showSections?.includes('editor') && (
+      {dashboard?.showSections?.includes('editor') && (
         <Route element={<DashboardEditsPage />} path="edits" />
       )}
     </Routes>
@@ -216,35 +225,39 @@ const Router = (): ReactNode => {
               >
                 <Route element={<ReportPage />} path="reports" />
 
+                <Route element={<FormsPage />} path="forms" />
+
                 <Route
                   element={<FormBuilderPage category="submission" />}
-                  path="submission-form-builder"
+                  path="forms/submission-form-builder"
                 />
 
                 <Route
                   element={<FormBuilderPage category="review" />}
-                  path="review-form-builder"
+                  path="forms/review-form-builder"
                 />
 
                 <Route
                   element={<FormBuilderPage category="decision" />}
-                  path="decision-form-builder"
+                  path="forms/decision-form-builder"
                 />
 
                 <Route element={<UsersPage />} path="users" />
                 <Route element={<TasksTemplatePage />} path="tasks" />
 
-                <Route path="cms">
-                  <Route element={<CMSPagesPage />} path="pages/:pageId?" />
-                  <Route element={<CMSLayoutPage />} path="layout" />
-                  <Route element={<CMSArticlePage />} path="article" />
-                  <Route element={<CMSFileBrowserPage />} path="filebrowser" />
-                  <Route element={<CMSMetadataPage />} path="metadata" />
-                  <Route
-                    element={<CMSPublishingCollectionPage />}
-                    path="collections"
-                  />
-                </Route>
+                <Route element={<CMSPage />} path="cms" />
+                <Route element={<CMSPagesPage />} path="cms/pages/:pageId?" />
+                <Route element={<CMSLayoutPage />} path="cms/layout" />
+                <Route element={<CMSArticlePage />} path="cms/article" />
+                <Route
+                  element={<CMSFileBrowserPage />}
+                  path="cms/filebrowser"
+                />
+                <Route element={<CMSMetadataPage />} path="cms/metadata" />
+                <Route
+                  element={<CMSPublishingCollectionPage />}
+                  path="cms/collections"
+                />
 
                 <Route element={<ConfigManagerPage />} path="configuration" />
               </Route>

packages/client/app/components/component-ai-assistant/ChatBubble.jsx

@@ -176,8 +176,8 @@ const ChatBubble = ({ forceHide, icons, hasApiKey }) => {
           width: '35px',
           height: '35px',
           borderRadius: '50%',
-          backgroundColor: theme.color.brand1.base(),
-          border: theme.color.brand1.shade50(),
+          backgroundColor: theme.color.brand1.base,
+          border: theme.color.brand1.shade50,
           textAlign: 'center',
           color: '#fff',
         }}