Skip to content

Commit 62b7ad9

Browse files
nguyend-namnguyend-nam
authored
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
1 parent 5d3b40f commit 62b7ad9

File tree

14 files changed

+339
-208
lines changed

14 files changed

+339
-208
lines changed

‎.changeset/strange-kiwis-work.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
'@mochi-ui/page-header': minor
3+
'@mochi-ui/layout': patch
4+
'@mochi-ui/theme': patch
5+
'@mochi-ui/core': patch
6+
---
7+
8+
Make Page header composable

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

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import {
88
DropdownMenuTrigger,
99
Typography,
1010
DropdownMenuPortal,
11+
PageHeaderTitle,
12+
PageHeaderActions,
1113
} from '@mochi-ui/core'
1214
import {
1315
AddUserSolid,
@@ -24,23 +26,18 @@ interface Props {
2426

2527
export const AppDetailPageHeader = ({ name = '', onDeleteApp }: Props) => {
2628
return (
27-
<PageHeader
28-
title={name}
29-
actions={[
30-
<Button
31-
color="white"
32-
key="see-docs-button"
33-
as="a"
34-
href={SOCIAL_LINKS.DOCS}
35-
target="_blank"
36-
>
29+
<PageHeader>
30+
<PageHeaderTitle>{name}</PageHeaderTitle>
31+
32+
<PageHeaderActions>
33+
<Button color="white" as="a" href={SOCIAL_LINKS.DOCS} target="_blank">
3734
See docs
38-
</Button>,
39-
<Button variant="outline" key="api-keys-button">
35+
</Button>
36+
<Button variant="outline">
4037
<KeySolid className="w-4 h-4" />
4138
API Keys
42-
</Button>,
43-
<DropdownMenu key="app-select">
39+
</Button>
40+
<DropdownMenu>
4441
<DropdownMenuTrigger className="p-1.5">
4542
<ThreeDotsLine className="w-5 h-5" />
4643
</DropdownMenuTrigger>
@@ -60,8 +57,8 @@ export const AppDetailPageHeader = ({ name = '', onDeleteApp }: Props) => {
6057
</DropdownMenuItem>
6158
</DropdownMenuContent>
6259
</DropdownMenuPortal>
63-
</DropdownMenu>,
64-
]}
65-
/>
60+
</DropdownMenu>
61+
</PageHeaderActions>
62+
</PageHeader>
6663
)
6764
}

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1-
import { PageHeader } from '@mochi-ui/core'
1+
import { PageHeader, PageHeaderTitle } from '@mochi-ui/core'
22
import { DashboardBody } from '~cpn/DashboardBody'
33

44
const RevenuePage = () => {
55
return (
66
<>
7-
<PageHeader title="Revenue" />
7+
<PageHeader>
8+
<PageHeaderTitle>Revenue</PageHeaderTitle>
9+
</PageHeader>
10+
811
<DashboardBody>TBD</DashboardBody>
912
</>
1013
)

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

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import {
1212
DropdownMenuPortal,
1313
ModalPortal,
1414
ModalOverlay,
15+
PageHeaderTitle,
16+
PageHeaderActions,
1517
} from '@mochi-ui/core'
1618
import { CheckLine, ChevronDownLine } from '@mochi-ui/icons'
1719
import { NextPageWithLayout } from '~pages/_app'
@@ -41,17 +43,17 @@ const AppPageHeader = ({
4143
apps?: ViewApplication[]
4244
}) => {
4345
return (
44-
<PageHeader
45-
title="Developer Portal"
46-
actions={[
46+
<PageHeader>
47+
<PageHeaderTitle>Developer Portal</PageHeaderTitle>
48+
49+
<PageHeaderActions>
4750
<Button
4851
color="white"
49-
key="see-docs-button"
5052
onClick={() => window.open(SOCIAL_LINKS.DOCS, '_blank')}
5153
>
5254
See docs
53-
</Button>,
54-
<DropdownMenu key="app-select">
55+
</Button>
56+
<DropdownMenu>
5557
<DropdownMenuTrigger className="">
5658
<Button className="!bg-neutral-150">
5759
<Typography level="p5">All apps</Typography>
@@ -83,9 +85,9 @@ const AppPageHeader = ({
8385
</DropdownMenuItem>
8486
</DropdownMenuContent>
8587
</DropdownMenuPortal>
86-
</DropdownMenu>,
87-
]}
88-
/>
88+
</DropdownMenu>
89+
</PageHeaderActions>
90+
</PageHeader>
8991
)
9092
}
9193

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

Lines changed: 14 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ import {
22
Badge,
33
ColumnProps,
44
PageHeader,
5+
PageHeaderActions,
6+
PageHeaderBackButton,
7+
PageHeaderTitle,
58
Select,
69
SelectContent,
710
SelectItem,
@@ -11,7 +14,7 @@ import {
1114
Typography,
1215
useLoginWidget,
1316
} from '@mochi-ui/core'
14-
import { useRouter } from 'next/router'
17+
import Link from 'next/link'
1518
import { SEO } from '~app/layout/seo'
1619
import { ROUTES } from '~constants/routes'
1720
import {
@@ -48,18 +51,13 @@ const AppPageHeader = (props: AppPageHeaderProps) => {
4851
onFilterPlatformChange,
4952
onFilterTypeChange,
5053
} = props
51-
const { push } = useRouter()
5254

5355
return (
54-
<PageHeader
55-
title="Transactions"
56-
onBack={() => push(ROUTES.MY_PROFILE)}
57-
actions={[
58-
<Select
59-
key="filter-types"
60-
onChange={onFilterTypeChange}
61-
value={filterType}
62-
>
56+
<PageHeader>
57+
<PageHeaderBackButton as={Link} href={ROUTES.MY_PROFILE} />
58+
<PageHeaderTitle>Transactions</PageHeaderTitle>
59+
<PageHeaderActions>
60+
<Select onChange={onFilterTypeChange} value={filterType}>
6361
<SelectTrigger className="border border-divider min-w-[130px] justify-between px-4">
6462
<SelectValue placeholder="All Types" />
6563
</SelectTrigger>
@@ -70,12 +68,8 @@ const AppPageHeader = (props: AppPageHeaderProps) => {
7068
</SelectItem>
7169
))}
7270
</SelectContent>
73-
</Select>,
74-
<Select
75-
key="filter-platforms"
76-
onChange={onFilterPlatformChange}
77-
value={filterPlatform}
78-
>
71+
</Select>
72+
<Select onChange={onFilterPlatformChange} value={filterPlatform}>
7973
<SelectTrigger className="border border-divider min-w-[150px] justify-between px-4">
8074
<SelectValue placeholder="All Platforms" />
8175
</SelectTrigger>
@@ -86,9 +80,9 @@ const AppPageHeader = (props: AppPageHeaderProps) => {
8680
</SelectItem>
8781
))}
8882
</SelectContent>
89-
</Select>,
90-
]}
91-
/>
83+
</Select>
84+
</PageHeaderActions>
85+
</PageHeader>
9286
)
9387
}
9488

‎apps/mochi-web/pages/settings.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {
22
PageHeader,
3+
PageHeaderTitle,
34
Tabs,
45
TabList,
56
TabTrigger,
@@ -24,7 +25,10 @@ const SettingsPage = () => {
2425

2526
return (
2627
<>
27-
<PageHeader title="Settings" />
28+
<PageHeader>
29+
<PageHeaderTitle>Settings</PageHeaderTitle>
30+
</PageHeader>
31+
2832
<Tabs
2933
className="grow overflow-hidden flex-col flex"
3034
defaultValue={defaultTabValue}

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

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import { Sidebar } from '@mochi-ui/sidebar'
22
import { PageContent } from '@mochi-ui/page-content'
3-
import { PageHeader } from '@mochi-ui/page-header'
3+
import {
4+
PageHeader,
5+
PageHeaderTitle,
6+
PageHeaderTitleExtra,
7+
} from '@mochi-ui/page-header'
48
import { Badge } from '@mochi-ui/badge'
59
import { Typography } from '@mochi-ui/typography'
610
import {
@@ -99,11 +103,13 @@ export function Default() {
99103
/>
100104

101105
<Layout className="flex-1 bg-neutral-outline/50">
102-
<PageHeader
103-
title="Page Title"
104-
titleExtra="(2,951 members)"
105-
className="border-b"
106-
/>
106+
<PageHeader className="border-b">
107+
<PageHeaderTitle>
108+
Page Title
109+
<PageHeaderTitleExtra>(2,951 members)</PageHeaderTitleExtra>
110+
</PageHeaderTitle>
111+
</PageHeader>
112+
107113
<PageContent containerClassName="bg-background-surface p-6 border rounded-md">
108114
<Typography level="p4">Content</Typography>
109115
</PageContent>

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

Lines changed: 30 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,23 @@
11
import userEvent from '@testing-library/user-event'
22
import { render, waitFor } from '@testing-library/react'
33
import { Button } from '@mochi-ui/button'
4-
import { PageHeader } from '../src'
4+
import {
5+
PageHeader,
6+
PageHeaderBackButton,
7+
PageHeaderTitle,
8+
PageHeaderTitleExtra,
9+
PageHeaderActions,
10+
} from '../src'
511

612
describe('Page Header', () => {
713
it('renders the title correctly', () => {
814
const { container } = render(
9-
<PageHeader title="Page Title" titleExtra="(2,951 members)" />,
15+
<PageHeader>
16+
<PageHeaderTitle>
17+
Page Title
18+
<PageHeaderTitleExtra>(2,951 members)</PageHeaderTitleExtra>
19+
</PageHeaderTitle>
20+
</PageHeader>,
1021
)
1122

1223
const title = container.querySelector('h5')
@@ -17,18 +28,26 @@ describe('Page Header', () => {
1728
const titleExtraValue = '(2,951 members)'
1829

1930
const { container } = render(
20-
<PageHeader title="Page Title" titleExtra={titleExtraValue} />,
31+
<PageHeader>
32+
<PageHeaderTitle>
33+
Page Title
34+
<PageHeaderTitleExtra>{titleExtraValue}</PageHeaderTitleExtra>
35+
</PageHeaderTitle>
36+
</PageHeader>,
2137
)
2238
const titleExtra = container.querySelector('span')
2339

2440
expect(titleExtra?.innerHTML || '').toBe(titleExtraValue)
2541
})
2642

27-
it('applies the onBack function correctly', async () => {
43+
it('applies the onClick function correctly', async () => {
2844
const mockFunction = jest.fn()
2945

3046
const { container } = render(
31-
<PageHeader onBack={mockFunction} title="Page Title" />,
47+
<PageHeader>
48+
<PageHeaderBackButton onClick={mockFunction} />
49+
<PageHeaderTitle>Page Title</PageHeaderTitle>
50+
</PageHeader>,
3251
)
3352

3453
const backButton = container.querySelector('button')
@@ -43,10 +62,12 @@ describe('Page Header', () => {
4362

4463
it('renders the actions correctly', () => {
4564
const { container } = render(
46-
<PageHeader
47-
title="Page Title"
48-
actions={[<Button>Button one</Button>, <Button>Button two</Button>]}
49-
/>,
65+
<PageHeader>
66+
<PageHeaderTitle>Page Title</PageHeaderTitle>
67+
<PageHeaderActions>
68+
<Button>Button one</Button> <Button>Button two</Button>
69+
</PageHeaderActions>
70+
</PageHeader>,
5071
)
5172

5273
const buttons = container.querySelectorAll('button')

‎packages/components/page-header/package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,8 @@
4040
"@mochi-ui/icon-button": "workspace:*",
4141
"@mochi-ui/icons": "workspace:*",
4242
"@mochi-ui/theme": "workspace:*",
43-
"@mochi-ui/typography": "workspace:*"
43+
"@mochi-ui/typography": "workspace:*",
44+
"@mochi-ui/polymorphic": "workspace:*"
4445
},
4546
"clean-package": "../../../clean-package.config.json"
46-
}
47+
}

0 commit comments

Comments
 (0)