feat: make page header composable

.changeset/strange-kiwis-work.md

@@ -0,0 +1,8 @@
+---
+'@mochi-ui/page-header': minor
+'@mochi-ui/layout': patch
+'@mochi-ui/theme': patch
+'@mochi-ui/core': patch
+---
+
+Make Page header composable

apps/mochi-web/components/app/detail/AppDetailPageHeader.tsx

@@ -8,6 +8,8 @@ import {
   DropdownMenuTrigger,
   Typography,
   DropdownMenuPortal,
+  PageHeaderTitle,
+  PageHeaderActions,
 } from '@mochi-ui/core'
 import {
   AddUserSolid,
@@ -24,23 +26,18 @@ interface Props {
 
 export const AppDetailPageHeader = ({ name = '', onDeleteApp }: Props) => {
   return (
-    <PageHeader
-      title={name}
-      actions={[
-        <Button
-          color="white"
-          key="see-docs-button"
-          as="a"
-          href={SOCIAL_LINKS.DOCS}
-          target="_blank"
-        >
+    <PageHeader>
+      <PageHeaderTitle>{name}</PageHeaderTitle>
+
+      <PageHeaderActions>
+        <Button color="white" as="a" href={SOCIAL_LINKS.DOCS} target="_blank">
           See docs
-        </Button>,
-        <Button variant="outline" key="api-keys-button">
+        </Button>
+        <Button variant="outline">
           <KeySolid className="w-4 h-4" />
           API Keys
-        </Button>,
-        <DropdownMenu key="app-select">
+        </Button>
+        <DropdownMenu>
           <DropdownMenuTrigger className="p-1.5">
             <ThreeDotsLine className="w-5 h-5" />
           </DropdownMenuTrigger>
@@ -60,8 +57,8 @@ export const AppDetailPageHeader = ({ name = '', onDeleteApp }: Props) => {
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenuPortal>
-        </DropdownMenu>,
-      ]}
-    />
+        </DropdownMenu>
+      </PageHeaderActions>
+    </PageHeader>
   )
 }

apps/mochi-web/pages/applications/[id]/revenue.tsx

@@ -1,10 +1,13 @@
-import { PageHeader } from '@mochi-ui/core'
+import { PageHeader, PageHeaderTitle } from '@mochi-ui/core'
 import { DashboardBody } from '~cpn/DashboardBody'
 
 const RevenuePage = () => {
   return (
     <>
-      <PageHeader title="Revenue" />
+      <PageHeader>
+        <PageHeaderTitle>Revenue</PageHeaderTitle>
+      </PageHeader>
+
       <DashboardBody>TBD</DashboardBody>
     </>
   )

apps/mochi-web/pages/applications/index.tsx

@@ -12,6 +12,8 @@ import {
   DropdownMenuPortal,
   ModalPortal,
   ModalOverlay,
+  PageHeaderTitle,
+  PageHeaderActions,
 } from '@mochi-ui/core'
 import { CheckLine, ChevronDownLine } from '@mochi-ui/icons'
 import { NextPageWithLayout } from '~pages/_app'
@@ -41,17 +43,17 @@ const AppPageHeader = ({
   apps?: ViewApplication[]
 }) => {
   return (
-    <PageHeader
-      title="Developer Portal"
-      actions={[
+    <PageHeader>
+      <PageHeaderTitle>Developer Portal</PageHeaderTitle>
+
+      <PageHeaderActions>
         <Button
           color="white"
-          key="see-docs-button"
           onClick={() => window.open(SOCIAL_LINKS.DOCS, '_blank')}
         >
           See docs
-        </Button>,
-        <DropdownMenu key="app-select">
+        </Button>
+        <DropdownMenu>
           <DropdownMenuTrigger className="">
             <Button className="!bg-neutral-150">
               <Typography level="p5">All apps</Typography>
@@ -83,9 +85,9 @@ const AppPageHeader = ({
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenuPortal>
-        </DropdownMenu>,
-      ]}
-    />
+        </DropdownMenu>
+      </PageHeaderActions>
+    </PageHeader>
   )
 }
 

apps/mochi-web/pages/profile/transactions/index.tsx

@@ -2,6 +2,9 @@ import {
   Badge,
   ColumnProps,
   PageHeader,
+  PageHeaderActions,
+  PageHeaderBackButton,
+  PageHeaderTitle,
   Select,
   SelectContent,
   SelectItem,
@@ -51,15 +54,11 @@ const AppPageHeader = (props: AppPageHeaderProps) => {
   const { push } = useRouter()
 
   return (
-    <PageHeader
-      title="Transactions"
-      onBack={() => push(ROUTES.MY_PROFILE)}
-      actions={[
-        <Select
-          key="filter-types"
-          onChange={onFilterTypeChange}
-          value={filterType}
-        >
+    <PageHeader>
+      <PageHeaderBackButton onBack={() => push(ROUTES.MY_PROFILE)} />
+      <PageHeaderTitle>Transactions</PageHeaderTitle>
+      <PageHeaderActions>
+        <Select onChange={onFilterTypeChange} value={filterType}>
           <SelectTrigger className="border border-divider min-w-[130px] justify-between px-4">
             <SelectValue placeholder="All Types" />
           </SelectTrigger>
@@ -70,12 +69,8 @@ const AppPageHeader = (props: AppPageHeaderProps) => {
               </SelectItem>
             ))}
           </SelectContent>
-        </Select>,
-        <Select
-          key="filter-platforms"
-          onChange={onFilterPlatformChange}
-          value={filterPlatform}
-        >
+        </Select>
+        <Select onChange={onFilterPlatformChange} value={filterPlatform}>
           <SelectTrigger className="border border-divider min-w-[150px] justify-between px-4">
             <SelectValue placeholder="All Platforms" />
           </SelectTrigger>
@@ -86,9 +81,9 @@ const AppPageHeader = (props: AppPageHeaderProps) => {
               </SelectItem>
             ))}
           </SelectContent>
-        </Select>,
-      ]}
-    />
+        </Select>
+      </PageHeaderActions>
+    </PageHeader>
   )
 }
 

apps/mochi-web/pages/settings.tsx

@@ -1,5 +1,6 @@
 import {
   PageHeader,
+  PageHeaderTitle,
   Tabs,
   TabList,
   TabTrigger,
@@ -24,7 +25,10 @@ const SettingsPage = () => {
 
   return (
     <>
-      <PageHeader title="Settings" />
+      <PageHeader>
+        <PageHeaderTitle>Settings</PageHeaderTitle>
+      </PageHeader>
+
       <Tabs
         className="grow overflow-hidden flex-col flex"
         defaultValue={defaultTabValue}

packages/components/layout/stories/layout.stories.tsx

@@ -1,6 +1,10 @@
 import { Sidebar } from '@mochi-ui/sidebar'
 import { PageContent } from '@mochi-ui/page-content'
-import { PageHeader } from '@mochi-ui/page-header'
+import {
+  PageHeader,
+  PageHeaderTitle,
+  PageHeaderTitleExtra,
+} from '@mochi-ui/page-header'
 import { Badge } from '@mochi-ui/badge'
 import { Typography } from '@mochi-ui/typography'
 import {
@@ -99,11 +103,13 @@ export function Default() {
         />
 
         <Layout className="flex-1 bg-neutral-outline/50">
-          <PageHeader
-            title="Page Title"
-            titleExtra="(2,951 members)"
-            className="border-b"
-          />
+          <PageHeader className="border-b">
+            <PageHeaderTitle>
+              Page Title
+              <PageHeaderTitleExtra>(2,951 members)</PageHeaderTitleExtra>
+            </PageHeaderTitle>
+          </PageHeader>
+
           <PageContent containerClassName="bg-background-surface p-6 border rounded-md">
             <Typography level="p4">Content</Typography>
           </PageContent>

packages/components/page-header/__tests__/page-header.test.tsx

@@ -1,12 +1,23 @@
 import userEvent from '@testing-library/user-event'
 import { render, waitFor } from '@testing-library/react'
 import { Button } from '@mochi-ui/button'
-import { PageHeader } from '../src'
+import {
+  PageHeader,
+  PageHeaderBackButton,
+  PageHeaderTitle,
+  PageHeaderTitleExtra,
+  PageHeaderActions,
+} from '../src'
 
 describe('Page Header', () => {
   it('renders the title correctly', () => {
     const { container } = render(
-      <PageHeader title="Page Title" titleExtra="(2,951 members)" />,
+      <PageHeader>
+        <PageHeaderTitle>
+          Page Title
+          <PageHeaderTitleExtra>(2,951 members)</PageHeaderTitleExtra>
+        </PageHeaderTitle>
+      </PageHeader>,
     )
 
     const title = container.querySelector('h5')
@@ -17,7 +28,12 @@ describe('Page Header', () => {
     const titleExtraValue = '(2,951 members)'
 
     const { container } = render(
-      <PageHeader title="Page Title" titleExtra={titleExtraValue} />,
+      <PageHeader>
+        <PageHeaderTitle>
+          Page Title
+          <PageHeaderTitleExtra>{titleExtraValue}</PageHeaderTitleExtra>
+        </PageHeaderTitle>
+      </PageHeader>,
     )
     const titleExtra = container.querySelector('span')
 
@@ -28,7 +44,10 @@ describe('Page Header', () => {
     const mockFunction = jest.fn()
 
     const { container } = render(
-      <PageHeader onBack={mockFunction} title="Page Title" />,
+      <PageHeader>
+        <PageHeaderBackButton onBack={mockFunction} />
+        <PageHeaderTitle>Page Title</PageHeaderTitle>
+      </PageHeader>,
     )
 
     const backButton = container.querySelector('button')
@@ -43,10 +62,12 @@ describe('Page Header', () => {
 
   it('renders the actions correctly', () => {
     const { container } = render(
-      <PageHeader
-        title="Page Title"
-        actions={[<Button>Button one</Button>, <Button>Button two</Button>]}
-      />,
+      <PageHeader>
+        <PageHeaderTitle>Page Title</PageHeaderTitle>
+        <PageHeaderActions>
+          <Button>Button one</Button> <Button>Button two</Button>
+        </PageHeaderActions>
+      </PageHeader>,
     )
 
     const buttons = container.querySelectorAll('button')