feat: add custom banner

.changeset/friendly-brooms-warn.md

@@ -0,0 +1,6 @@
+---
+"@genseki/react": patch
+---
+
+Support custom banner
+

examples/erp/genseki/collections/posts.tsx

@@ -226,6 +226,10 @@ export const postsCollection = createPlugin('posts', (app) => {
           create: true,
           delete: true,
         },
+        banner: {
+          title: 'Posts Banner',
+          description: 'A collection of posts',
+        },
         layout: Layout,
         page: CustomListPage,
       })

examples/erp/genseki/collections/tags.ts

@@ -32,6 +32,10 @@ export const tagsCollection = createPlugin('tags', (app) => {
           create: true,
           delete: true,
         },
+        banner: {
+          title: 'Tags Banner',
+          description: 'A collection of tags',
+        },
       })
     )
     .addPageAndApiRouter(collection.create(fields, {}))

packages/react/src/core/collection/index.tsx

@@ -346,6 +346,10 @@
    * @param actions will decide whether or not to show actios in `list` view screen, This is not related to available features of collection, but rather only visible UI part of the `list` page
    */
   toolbar?: CollectionToolbarActions
+  banner?: {
+    title?: string
+    description?: string
+  }
 }
 
 export type CollectionUpdateApiArgs<
@@ -377,7 +381,7 @@
 }
 
 // TODO: This is not correct, it should return default value of form instead of just simple findOne response
 export type CollectionUpdateDefaultApiReturn<TFields extends Fields> = any
 
 export type CollectionUpdateDefaultApiHandler<
   TContext extends AnyContextable,
@@ -599,6 +603,7 @@
                 search={config.configuration?.search}
                 sortBy={config.configuration?.sortBy}
                 toolbar={config.toolbar}
+                banner={config.banner}
               >
                 <Layout>{page}</Layout>
               </CollectionListProvider>

packages/react/src/react/views/collections/list/banner.tsx

@@ -7,6 +7,8 @@ import { formatSlug } from '../../../utils/format-slug'
 
 interface BannerProps {
   slug: string
+  title?: string
+  description?: string
 }
 
 export function Banner(props: BannerProps) {
@@ -29,10 +31,10 @@ export function Banner(props: BannerProps) {
         </div>
         <div className="flex flex-col justify-center">
           <Typography type="h2" weight="bold" className="text-text-primary leading-[100%]">
-            {formatSlug(props.slug)}
+            {props.title ?? formatSlug(props.slug)}
           </Typography>
           <Typography type="h4" weight="normal" className="text-text-secondary leading-[140%]">
-            A collection
+            {props.description ?? 'A collection'}
           </Typography>
         </div>
       </div>

packages/react/src/react/views/collections/list/context.tsx

@@ -52,6 +52,10 @@ export interface CollectionListContextValue<T extends BaseData = BaseData> {
   search?: string[]
   sortBy?: ([string, 'asc' | 'desc'] | [string])[]
   toolbar?: CollectionToolbarActions
+  banner?: {
+    title?: string
+    description?: string
+  }
 
   // Helper functions
   deleteRows: (rows?: string[]) => void
@@ -67,6 +71,10 @@ export interface CollectionListProviderProps<T extends BaseData = BaseData> {
   search?: string[]
   sortBy?: ([string, 'asc' | 'desc'] | [string])[]
   toolbar?: CollectionToolbarActions
+  banner?: {
+    title?: string
+    description?: string
+  }
 }
 
 /**
@@ -114,13 +122,19 @@ function _CollectionListProvider<T extends BaseData>(props: CollectionListProvid
 
   const components: CollectionListComponents = useMemo(
     () => ({
-      ListBanner: () => <Banner slug={context.slug} />,
+      ListBanner: () => (
+        <Banner
+          slug={context.slug}
+          title={rest.banner?.title}
+          description={rest.banner?.description}
+        />
+      ),
       ListTable: (props) => <CollectionListTable {...props} />,
       ListTableToolbar: (props) => <CollectionListToolbar {...props} />,
       ListTableContainer: (props) => <CollectionListTableContainer {...props} />,
       ListTablePagination: (props) => <CollectionListPagination {...props} />,
     }),
-    [context.slug]
+    [context.slug, rest.banner?.title, rest.banner?.description]
   )
 
   return (
@@ -137,6 +151,7 @@ function _CollectionListProvider<T extends BaseData>(props: CollectionListProvid
         components,
         invalidateList,
         deleteRows,
+        banner: rest.banner,
       }}
     >
       {children}

packages/react/src/react/views/collections/list/default.tsx

@@ -12,7 +12,11 @@ export function DefaultCollectionListPage() {
 
   return (
     <>
-      <Banner slug={context.slug} />
+      <Banner
+        slug={context.slug}
+        title={context.banner?.title}
+        description={context.banner?.description}
+      />
       <CollectionListTableContainer>
         <CollectionListToolbar />
         <CollectionListTable<any> columns={context.columns} onRowClick={undefined} />