feat: make page header composable (#467)

* feat: make page header composable * feat: expose icon button props to use in back button * feat: put classname to back button clsx * chore: add page header title wrapper
consolelabs · Dec 21, 2023 · 62b7ad9 · 62b7ad9 · vercel · Dec 21, 2023
1 parent 5d3b40f
commit 62b7ad9
Show file tree

Hide file tree

Showing 14 changed files with 339 additions and 208 deletions.
diff --git a/.changeset/strange-kiwis-work.md b/.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
diff --git a/apps/mochi-web/components/app/detail/AppDetailPageHeader.tsx b/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>
   )
 }
diff --git a/apps/mochi-web/pages/applications/[id]/revenue.tsx b/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>
     </>
   )

diff --git a/apps/mochi-web/pages/applications/index.tsx b/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>
   )
 }
 

diff --git a/apps/mochi-web/pages/profile/transactions/index.tsx b/apps/mochi-web/pages/profile/transactions/index.tsx
@@ -2,6 +2,9 @@ import {
   Badge,
   ColumnProps,
   PageHeader,
+  PageHeaderActions,
+  PageHeaderBackButton,
+  PageHeaderTitle,
   Select,
   SelectContent,
   SelectItem,
@@ -11,7 +14,7 @@ import {
   Typography,
   useLoginWidget,
 } from '@mochi-ui/core'
-import { useRouter } from 'next/router'
+import Link from 'next/link'
 import { SEO } from '~app/layout/seo'
 import { ROUTES } from '~constants/routes'
 import {
@@ -48,18 +51,13 @@ const AppPageHeader = (props: AppPageHeaderProps) => {
     onFilterPlatformChange,
     onFilterTypeChange,
   } = props
-  const { push } = useRouter()
 
   return (
-    <PageHeader
-      title="Transactions"
-      onBack={() => push(ROUTES.MY_PROFILE)}
-      actions={[
-        <Select
-          key="filter-types"
-          onChange={onFilterTypeChange}
-          value={filterType}
-        >
+    <PageHeader>
+      <PageHeaderBackButton as={Link} href={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 +68,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 +80,9 @@ const AppPageHeader = (props: AppPageHeaderProps) => {
               </SelectItem>
             ))}
           </SelectContent>
-        </Select>,
-      ]}
-    />
+        </Select>
+      </PageHeaderActions>
+    </PageHeader>
   )
 }
 

diff --git a/apps/mochi-web/pages/settings.tsx b/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}

diff --git a/packages/components/layout/stories/layout.stories.tsx b/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>

diff --git a/packages/components/page-header/__tests__/page-header.test.tsx b/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,18 +28,26 @@ 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')
 
     expect(titleExtra?.innerHTML || '').toBe(titleExtraValue)
   })
 
-  it('applies the onBack function correctly', async () => {
+  it('applies the onClick function correctly', async () => {
     const mockFunction = jest.fn()
 
     const { container } = render(
-      <PageHeader onBack={mockFunction} title="Page Title" />,
+      <PageHeader>
+        <PageHeaderBackButton onClick={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')

diff --git a/packages/components/page-header/package.json b/packages/components/page-header/package.json
@@ -40,7 +40,8 @@
     "@mochi-ui/icon-button": "workspace:*",
     "@mochi-ui/icons": "workspace:*",
     "@mochi-ui/theme": "workspace:*",
-    "@mochi-ui/typography": "workspace:*"
+    "@mochi-ui/typography": "workspace:*",
+    "@mochi-ui/polymorphic": "workspace:*"
   },
   "clean-package": "../../../clean-package.config.json"
-}
+}