Merge pull request #104 from wayofdev/feat/ui-header

.changeset/nine-queens-retire.md

@@ -0,0 +1,7 @@
+---
+'@wayofdev/storybook': minor
+'@wayofdev/ui': minor
+'@wayofdev/web': minor
+---
+
+feat: header and dropdown refactor

apps/storybook/.eslintrc.js

@@ -36,7 +36,7 @@ module.exports = {
  },
  overrides: [
  {
- files: ['src/stories/*.ts'],
+ files: ['src/stories/*.{ts,tsx}'],
  rules: {
  '@typescript-eslint/naming-convention': 'off',
  },

apps/storybook/.storybook/NextLink.tsx

@@ -0,0 +1,13 @@
+import { FC, forwardRef, LegacyRef, LinkHTMLAttributes, useRef } from 'react'
+
+const NextLink: FC<LinkHTMLAttributes<HTMLAnchorElement>> = forwardRef((props, ref) => {
+ const { href, children, ...rest } = props
+ const myRef = ref as LegacyRef<HTMLAnchorElement>
+
+ return (
+ <a ref={myRef} href={href} {...rest}>
+ {children}
+ </a>
+ )
+})
+export default NextLink

apps/storybook/.storybook/main.ts

@@ -23,5 +23,9 @@ const config: StorybookConfig = {
  docs: {
  autodocs: 'tag',
  },
+ async viteFinal(config) {
+ config.resolve.alias['next/link'] = require.resolve('./NextLink.tsx')
+ return config
+ },
 }
 export default config

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

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { Banner, type BannerProps } from '@wayofdev/ui/src/base/banner/Banner'
+import type { BannerProps } from '@wayofdev/ui/src'
+import { Banner } from '@wayofdev/ui/src'
 
 const meta = {
  title: 'Example/Banner',

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { Button, Size, Mode } from '@wayofdev/ui/src/base/button/Button'
+import { Button, Size, Mode } from '@wayofdev/ui/src'
 
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
 const meta = {

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

@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import type { DropdownProps } from '@wayofdev/ui/src'
+import { Dropdown, DropdownAlign, DropdownItemVariant } from '@wayofdev/ui/src'
+
+const meta = {
+ title: 'Example/Dropdown',
+ component: Dropdown,
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
+ tags: ['autodocs'],
+ parameters: {
+ // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
+ layout: 'centered',
+ },
+ args: {
+ items: [
+ { variant: DropdownItemVariant.Link, element: 'Profile', props: { href: '/#Profile' } },
+ { variant: DropdownItemVariant.Link, element: 'Settings', props: { href: '/#Settings' } },
+ { variant: DropdownItemVariant.Link, element: 'My Orders', props: { href: '/#MyOrders' } },
+ { variant: DropdownItemVariant.Button, element: 'Logout' },
+ ],
+ align: DropdownAlign.Left,
+ },
+} satisfies Meta<DropdownProps>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const DropdownAlignLeft: Story = {
+ args: {},
+}
+
+export const DropdownAlignRight: Story = {
+ args: {
+ align: DropdownAlign.Right,
+ },
+}
+
+export const DropdownLinkElement: Story = {
+ args: {
+ items: [
+ { variant: DropdownItemVariant.Link, element: 'Profile', props: { href: '/#Profile' } },
+ { variant: DropdownItemVariant.Link, element: 'Settings', props: { href: '/#Settings' } },
+ { variant: DropdownItemVariant.Link, element: 'My Orders', props: { href: '/#MyOrders' } },
+ ],
+ },
+}
+
+export const DropdownButtonElement: Story = {
+ args: {
+ items: [
+ { variant: DropdownItemVariant.Button, element: 'Make Action' },
+ { variant: DropdownItemVariant.Button, element: 'Logout' },
+ ],
+ },
+}
+
+export const DropdownCustomElement: Story = {
+ args: {
+ items: [
+ {
+ element: (
+ <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">
+ Profile
+ </div>
+ ),
+ },
+ ],
+ },
+}
+
+export const CustomTriggerMenu: Story = {
+ args: {
+ trigger: (
+ <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">
+ <div>[email protected]</div>
+
+ <div className="ml-1">
+ <svg
+ className="h-4 w-4 fill-current"
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 20 20"
+ >
+ <path
+ fillRule="evenodd"
+ 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"
+ clipRule="evenodd"
+ />
+ </svg>
+ </div>
+ </button>
+ ),
+ },
+}
+
+export const DropdownCustomWidth: Story = {
+ args: {
+ widthClass: 'w-80',
+ },
+}
+
+export const DropdownCustomClass: Story = {
+ args: {
+ contentClasses: 'py-1.5 bg-purple-200',
+ },
+}

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

@@ -1,5 +1,29 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { Header, type HeaderProps } from './Header'
+import type { HeaderProps } from '@wayofdev/ui/src'
+import { Button, Dropdown, DropdownItemVariant, Header } from '@wayofdev/ui/src'
+import Img from './assets/colors.svg'
+
+const triggerContent = (
+ <>
+ <div>[email protected]</div>
+
+ <div className="ml-1">
+ <svg className="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+ <path
+ fillRule="evenodd"
+ 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"
+ clipRule="evenodd"
+ />
+ </svg>
+ </div>
+ </>
+)
+
+const dropdownItems = [
+ { variant: DropdownItemVariant.Button, element: 'Settings', props: { href: '/#Settings' } },
+ { variant: DropdownItemVariant.Button, element: 'My orders', props: { href: '/#MyOrders' } },
+ { variant: DropdownItemVariant.Button, element: 'Logout' },
+]
 
 const meta = {
  title: 'Example/Header',
@@ -10,17 +34,91 @@ const meta = {
  // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
  layout: 'fullscreen',
  },
+ args: {
+ isAuthenticated: false,
+ activePath: '/',
+ navigation: [
+ { title: 'Home', href: '/' },
+ { title: 'Products', href: '/#Products' },
+ ],
+ userNavigation: [
+ { title: 'Settings', href: '/#Settings' },
+ { title: 'My orders', href: '/#MyOrders' },
+ ],
+ logoutConfig: { label: 'Logout' },
+ logo: <img src={Img} alt="logo" />,
+ guestBlock: <Button label="Sign In" />,
+ triggerContent,
+ authBlock: (
+ <Dropdown
+ items={dropdownItems}
+ trigger={
+ <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">
+ {triggerContent}
+ </button>
+ }
+ />
+ ),
+ userBlock: (
+ <div className="flex items-center px-4">
+ <div className="shrink-0">
+ <svg
+ className="h-12 w-12 fill-current text-gray-400"
+ xmlns="http://www.w3.org/2000/svg"
+ fill="none"
+ viewBox="0 0 24 24"
+ stroke="currentColor"
+ >
+ <path
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth="2"
+ d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+ />
+ </svg>
+ </div>
+
+ <div className="ml-3">
+ <div className="text-base font-medium text-gray-800">John Doe</div>
+ <div className="text-sm font-medium text-gray-500">[email protected]</div>
+ </div>
+ </div>
+ ),
+ },
 } satisfies Meta<HeaderProps>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
+export const LoggedOut: Story = {}
+
 export const LoggedIn: Story = {
  args: {
- user: {
-  name: 'Jane Doe',
- },
+ isAuthenticated: true,
+ triggerContent: undefined,
+ authBlock: <Dropdown items={dropdownItems} />,
  },
 }
 
-export const LoggedOut: Story = {}
+export const CustomTriggerMenu: Story = {
+ args: {
+ isAuthenticated: true,
+ },
+}
+
+export const CustomHeaderClass: Story = {
+ args: {
+ className: 'bg-green-200',
+ },
+}
+
+export const MobileMenuUserInfo: Story = {
+ args: {
+ isAuthenticated: true,
+ },
+ parameters: {
+ viewport: {
+ defaultViewport: 'iphonexsmax',
+ },
+ },
+}