Skip to content

Commit ea4fefa

Browse files
lotyplotyp
authored
Merge pull request #104 from wayofdev/feat/ui-header
2 parents 3412de5 + 8f98b09 commit ea4fefa

37 files changed

+2280
-1449
lines changed

‎.changeset/nine-queens-retire.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@wayofdev/storybook': minor
3+
'@wayofdev/ui': minor
4+
'@wayofdev/web': minor
5+
---
6+
7+
feat: header and dropdown refactor

‎apps/storybook/.eslintrc.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ module.exports = {
3636
},
3737
overrides: [
3838
{
39-
files: ['src/stories/*.ts'],
39+
files: ['src/stories/*.{ts,tsx}'],
4040
rules: {
4141
'@typescript-eslint/naming-convention': 'off',
4242
},

‎apps/storybook/.storybook/NextLink.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { FC, forwardRef, LegacyRef, LinkHTMLAttributes, useRef } from 'react'
2+
3+
const NextLink: FC<LinkHTMLAttributes<HTMLAnchorElement>> = forwardRef((props, ref) => {
4+
const { href, children, ...rest } = props
5+
const myRef = ref as LegacyRef<HTMLAnchorElement>
6+
7+
return (
8+
<a ref={myRef} href={href} {...rest}>
9+
{children}
10+
</a>
11+
)
12+
})
13+
export default NextLink

‎apps/storybook/.storybook/main.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,5 +23,9 @@ const config: StorybookConfig = {
2323
docs: {
2424
autodocs: 'tag',
2525
},
26+
async viteFinal(config) {
27+
config.resolve.alias['next/link'] = require.resolve('./NextLink.tsx')
28+
return config
29+
},
2630
}
2731
export default config

‎apps/storybook/src/stories/Banner.stories.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import type { Meta, StoryObj } from '@storybook/react'
2-
import { Banner, type BannerProps } from '@wayofdev/ui/src/base/banner/Banner'
2+
import type { BannerProps } from '@wayofdev/ui/src'
3+
import { Banner } from '@wayofdev/ui/src'
34

45
const meta = {
56
title: 'Example/Banner',

‎apps/storybook/src/stories/Button.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Meta, StoryObj } from '@storybook/react'
2-
import { Button, Size, Mode } from '@wayofdev/ui/src/base/button/Button'
2+
import { Button, Size, Mode } from '@wayofdev/ui/src'
33

44
// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
55
const meta = {

‎apps/storybook/src/stories/Dropdown.stories.tsx‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import type { Meta, StoryObj } from '@storybook/react'
2+
import type { DropdownProps } from '@wayofdev/ui/src'
3+
import { Dropdown, DropdownAlign, DropdownItemVariant } from '@wayofdev/ui/src'
4+
5+
const meta = {
6+
title: 'Example/Dropdown',
7+
component: Dropdown,
8+
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
9+
tags: ['autodocs'],
10+
parameters: {
11+
// More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
12+
layout: 'centered',
13+
},
14+
args: {
15+
items: [
16+
{ variant: DropdownItemVariant.Link, element: 'Profile', props: { href: '/#Profile' } },
17+
{ variant: DropdownItemVariant.Link, element: 'Settings', props: { href: '/#Settings' } },
18+
{ variant: DropdownItemVariant.Link, element: 'My Orders', props: { href: '/#MyOrders' } },
19+
{ variant: DropdownItemVariant.Button, element: 'Logout' },
20+
],
21+
align: DropdownAlign.Left,
22+
},
23+
} satisfies Meta<DropdownProps>
24+
25+
export default meta
26+
type Story = StoryObj<typeof meta>
27+
28+
export const DropdownAlignLeft: Story = {
29+
args: {},
30+
}
31+
32+
export const DropdownAlignRight: Story = {
33+
args: {
34+
align: DropdownAlign.Right,
35+
},
36+
}
37+
38+
export const DropdownLinkElement: Story = {
39+
args: {
40+
items: [
41+
{ variant: DropdownItemVariant.Link, element: 'Profile', props: { href: '/#Profile' } },
42+
{ variant: DropdownItemVariant.Link, element: 'Settings', props: { href: '/#Settings' } },
43+
{ variant: DropdownItemVariant.Link, element: 'My Orders', props: { href: '/#MyOrders' } },
44+
],
45+
},
46+
}
47+
48+
export const DropdownButtonElement: Story = {
49+
args: {
50+
items: [
51+
{ variant: DropdownItemVariant.Button, element: 'Make Action' },
52+
{ variant: DropdownItemVariant.Button, element: 'Logout' },
53+
],
54+
},
55+
}
56+
57+
export const DropdownCustomElement: Story = {
58+
args: {
59+
items: [
60+
{
61+
element: (
62+
<div className="block w-full bg-gray-800 px-4 py-2 text-right leading-5 text-white transition duration-150 ease-in-out focus:outline-none">
63+
Profile
64+
</div>
65+
),
66+
},
67+
],
68+
},
69+
}
70+
71+
export const CustomTriggerMenu: Story = {
72+
args: {
73+
trigger: (
74+
<button className="flex items-center text-sm font-medium text-gray-500 transition duration-150 ease-in-out hover:text-gray-700 focus:outline-none">
75+
<div>john.doe@example.com</div>
76+
77+
<div className="ml-1">
78+
<svg
79+
className="h-4 w-4 fill-current"
80+
xmlns="http://www.w3.org/2000/svg"
81+
viewBox="0 0 20 20"
82+
>
83+
<path
84+
fillRule="evenodd"
85+
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
86+
clipRule="evenodd"
87+
/>
88+
</svg>
89+
</div>
90+
</button>
91+
),
92+
},
93+
}
94+
95+
export const DropdownCustomWidth: Story = {
96+
args: {
97+
widthClass: 'w-80',
98+
},
99+
}
100+
101+
export const DropdownCustomClass: Story = {
102+
args: {
103+
contentClasses: 'py-1.5 bg-purple-200',
104+
},
105+
}

‎apps/storybook/src/stories/Header.stories.tsx‎

Lines changed: 103 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,29 @@
11
import type { Meta, StoryObj } from '@storybook/react'
2-
import { Header, type HeaderProps } from './Header'
2+
import type { HeaderProps } from '@wayofdev/ui/src'
3+
import { Button, Dropdown, DropdownItemVariant, Header } from '@wayofdev/ui/src'
4+
import Img from './assets/colors.svg'
5+
6+
const triggerContent = (
7+
<>
8+
<div>john.doe@example.com</div>
9+
10+
<div className="ml-1">
11+
<svg className="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
12+
<path
13+
fillRule="evenodd"
14+
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
15+
clipRule="evenodd"
16+
/>
17+
</svg>
18+
</div>
19+
</>
20+
)
21+
22+
const dropdownItems = [
23+
{ variant: DropdownItemVariant.Button, element: 'Settings', props: { href: '/#Settings' } },
24+
{ variant: DropdownItemVariant.Button, element: 'My orders', props: { href: '/#MyOrders' } },
25+
{ variant: DropdownItemVariant.Button, element: 'Logout' },
26+
]
327

428
const meta = {
529
title: 'Example/Header',
@@ -10,17 +34,91 @@ const meta = {
1034
// More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
1135
layout: 'fullscreen',
1236
},
37+
args: {
38+
isAuthenticated: false,
39+
activePath: '/',
40+
navigation: [
41+
{ title: 'Home', href: '/' },
42+
{ title: 'Products', href: '/#Products' },
43+
],
44+
userNavigation: [
45+
{ title: 'Settings', href: '/#Settings' },
46+
{ title: 'My orders', href: '/#MyOrders' },
47+
],
48+
logoutConfig: { label: 'Logout' },
49+
logo: <img src={Img} alt="logo" />,
50+
guestBlock: <Button label="Sign In" />,
51+
triggerContent,
52+
authBlock: (
53+
<Dropdown
54+
items={dropdownItems}
55+
trigger={
56+
<button className="flex items-center text-sm font-medium text-gray-500 transition duration-150 ease-in-out hover:text-gray-700 focus:outline-none">
57+
{triggerContent}
58+
</button>
59+
}
60+
/>
61+
),
62+
userBlock: (
63+
<div className="flex items-center px-4">
64+
<div className="shrink-0">
65+
<svg
66+
className="h-12 w-12 fill-current text-gray-400"
67+
xmlns="http://www.w3.org/2000/svg"
68+
fill="none"
69+
viewBox="0 0 24 24"
70+
stroke="currentColor"
71+
>
72+
<path
73+
strokeLinecap="round"
74+
strokeLinejoin="round"
75+
strokeWidth="2"
76+
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
77+
/>
78+
</svg>
79+
</div>
80+
81+
<div className="ml-3">
82+
<div className="text-base font-medium text-gray-800">John Doe</div>
83+
<div className="text-sm font-medium text-gray-500">john.doe@example.com</div>
84+
</div>
85+
</div>
86+
),
87+
},
1388
} satisfies Meta<HeaderProps>
1489

1590
export default meta
1691
type Story = StoryObj<typeof meta>
1792

93+
export const LoggedOut: Story = {}
94+
1895
export const LoggedIn: Story = {
1996
args: {
20-
user: {
21-
name: 'Jane Doe',
22-
},
97+
isAuthenticated: true,
98+
triggerContent: undefined,
99+
authBlock: <Dropdown items={dropdownItems} />,
23100
},
24101
}
25102

26-
export const LoggedOut: Story = {}
103+
export const CustomTriggerMenu: Story = {
104+
args: {
105+
isAuthenticated: true,
106+
},
107+
}
108+
109+
export const CustomHeaderClass: Story = {
110+
args: {
111+
className: 'bg-green-200',
112+
},
113+
}
114+
115+
export const MobileMenuUserInfo: Story = {
116+
args: {
117+
isAuthenticated: true,
118+
},
119+
parameters: {
120+
viewport: {
121+
defaultViewport: 'iphonexsmax',
122+
},
123+
},
124+
}

‎apps/storybook/src/stories/Header.tsx‎

Lines changed: 0 additions & 62 deletions
This file was deleted.

‎apps/storybook/src/stories/Page.stories.ts‎

Lines changed: 0 additions & 29 deletions
This file was deleted.

0 commit comments

Comments
 (0)