ui-arreya-components 0.0.6 → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/styles.css +1 -1
- package/dist/ui.cjs.js +29 -24
- package/dist/ui.es.js +1360 -1324
- package/dist/ui.umd.js +31 -26
- package/package.json +1 -1
- package/src/components/feature/header.stories.tsx +129 -0
- package/src/components/feature/header.tsx +77 -0
- package/src/index.css +59 -0
- package/src/index.ts +3 -0
package/package.json
CHANGED
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react"
|
|
2
|
+
import { Header } from "./header"
|
|
3
|
+
|
|
4
|
+
const meta: Meta<typeof Header> = {
|
|
5
|
+
title: "Components/Header",
|
|
6
|
+
component: Header,
|
|
7
|
+
parameters: {
|
|
8
|
+
layout: "fullscreen",
|
|
9
|
+
},
|
|
10
|
+
tags: ["autodocs"],
|
|
11
|
+
argTypes: {
|
|
12
|
+
title: {
|
|
13
|
+
control: "text",
|
|
14
|
+
description: "The main title displayed in the header",
|
|
15
|
+
},
|
|
16
|
+
breadcrumbItems: {
|
|
17
|
+
control: "object",
|
|
18
|
+
description: "Array of breadcrumb items to display in the navigation",
|
|
19
|
+
},
|
|
20
|
+
showHomeLink: {
|
|
21
|
+
control: "boolean",
|
|
22
|
+
description: "Whether to show the home link at the start of the breadcrumb",
|
|
23
|
+
},
|
|
24
|
+
className: {
|
|
25
|
+
control: "text",
|
|
26
|
+
description: "Additional CSS classes to apply to the header",
|
|
27
|
+
},
|
|
28
|
+
children: {
|
|
29
|
+
control: { type: undefined },
|
|
30
|
+
description: "Additional content to render within the header",
|
|
31
|
+
},
|
|
32
|
+
},
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
export default meta
|
|
36
|
+
type Story = StoryObj<typeof Header>
|
|
37
|
+
|
|
38
|
+
// Basic header with just a title
|
|
39
|
+
export const Basic: Story = {
|
|
40
|
+
args: {
|
|
41
|
+
title: "Dashboard",
|
|
42
|
+
showHomeLink: true,
|
|
43
|
+
breadcrumbItems: [],
|
|
44
|
+
},
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
// Header with a single breadcrumb (current page)
|
|
48
|
+
export const SingleBreadcrumb: Story = {
|
|
49
|
+
args: {
|
|
50
|
+
title: "Products",
|
|
51
|
+
showHomeLink: true,
|
|
52
|
+
breadcrumbItems: [
|
|
53
|
+
{ label: "Products", isCurrentPage: true },
|
|
54
|
+
],
|
|
55
|
+
},
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
// Header with multiple breadcrumb levels
|
|
59
|
+
export const MultipleBreadcrumbs: Story = {
|
|
60
|
+
args: {
|
|
61
|
+
title: "Edit Product",
|
|
62
|
+
showHomeLink: true,
|
|
63
|
+
breadcrumbItems: [
|
|
64
|
+
{ label: "Products", href: "/products" },
|
|
65
|
+
{ label: "Electronics", href: "/products/electronics" },
|
|
66
|
+
{ label: "Edit Product", isCurrentPage: true },
|
|
67
|
+
],
|
|
68
|
+
},
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
// Header without home link
|
|
72
|
+
export const NoHomeLink: Story = {
|
|
73
|
+
args: {
|
|
74
|
+
title: "Settings",
|
|
75
|
+
showHomeLink: false,
|
|
76
|
+
breadcrumbItems: [
|
|
77
|
+
{ label: "Account", href: "/account" },
|
|
78
|
+
{ label: "Settings", isCurrentPage: true },
|
|
79
|
+
],
|
|
80
|
+
},
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
// Header with custom content
|
|
84
|
+
export const WithCustomContent: Story = {
|
|
85
|
+
args: {
|
|
86
|
+
title: "Dashboard",
|
|
87
|
+
showHomeLink: true,
|
|
88
|
+
breadcrumbItems: [
|
|
89
|
+
{ label: "Dashboard", isCurrentPage: true },
|
|
90
|
+
],
|
|
91
|
+
},
|
|
92
|
+
render: (args) => (
|
|
93
|
+
<Header {...args}>
|
|
94
|
+
<div className="flex justify-between items-center mt-4">
|
|
95
|
+
<p className="text-muted-foreground">Last updated: Yesterday</p>
|
|
96
|
+
<button className="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm">
|
|
97
|
+
Refresh Data
|
|
98
|
+
</button>
|
|
99
|
+
</div>
|
|
100
|
+
</Header>
|
|
101
|
+
),
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
// Header with a very long breadcrumb path
|
|
105
|
+
export const LongBreadcrumbPath: Story = {
|
|
106
|
+
args: {
|
|
107
|
+
title: "Edit User Profile",
|
|
108
|
+
showHomeLink: true,
|
|
109
|
+
breadcrumbItems: [
|
|
110
|
+
{ label: "Administration", href: "/admin" },
|
|
111
|
+
{ label: "User Management", href: "/admin/users" },
|
|
112
|
+
{ label: "Enterprise Accounts", href: "/admin/users/enterprise" },
|
|
113
|
+
{ label: "ACME Corporation", href: "/admin/users/enterprise/acme" },
|
|
114
|
+
{ label: "Department Leads", href: "/admin/users/enterprise/acme/leads" },
|
|
115
|
+
{ label: "John Doe", isCurrentPage: true },
|
|
116
|
+
],
|
|
117
|
+
},
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
// Header with minimal styling
|
|
121
|
+
export const Minimalist: Story = {
|
|
122
|
+
args: {
|
|
123
|
+
title: "Analytics",
|
|
124
|
+
showHomeLink: false,
|
|
125
|
+
breadcrumbItems: [],
|
|
126
|
+
className: "border-0 pb-0",
|
|
127
|
+
},
|
|
128
|
+
}
|
|
129
|
+
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import {
|
|
3
|
+
Breadcrumb,
|
|
4
|
+
BreadcrumbItem as BreadcrumbItemComponent,
|
|
5
|
+
BreadcrumbLink,
|
|
6
|
+
BreadcrumbList,
|
|
7
|
+
BreadcrumbPage,
|
|
8
|
+
BreadcrumbSeparator,
|
|
9
|
+
} from "@/components/ui/breadcrumb"
|
|
10
|
+
import { ChevronRight, Home } from "lucide-react"
|
|
11
|
+
|
|
12
|
+
export type BreadcrumbItem = {
|
|
13
|
+
label: string
|
|
14
|
+
href?: string
|
|
15
|
+
isCurrentPage?: boolean
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
interface HeaderProps {
|
|
19
|
+
title?: string
|
|
20
|
+
breadcrumbItems?: BreadcrumbItem[]
|
|
21
|
+
showHomeLink?: boolean
|
|
22
|
+
className?: string
|
|
23
|
+
children?: React.ReactNode
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
export function Header({ title, breadcrumbItems = [], showHomeLink = true, className = "", children }: HeaderProps) {
|
|
27
|
+
return (
|
|
28
|
+
<header className={`border-b pb-4 ${className}`}>
|
|
29
|
+
<div className="container mx-auto px-4">
|
|
30
|
+
{(breadcrumbItems.length > 0 || showHomeLink) && (
|
|
31
|
+
<Breadcrumb className="mb-2">
|
|
32
|
+
<BreadcrumbList>
|
|
33
|
+
{showHomeLink && (
|
|
34
|
+
<>
|
|
35
|
+
<BreadcrumbItemComponent>
|
|
36
|
+
<BreadcrumbLink href="/" className="flex items-center">
|
|
37
|
+
<Home className="h-3.5 w-3.5 mr-1" />
|
|
38
|
+
Home
|
|
39
|
+
</BreadcrumbLink>
|
|
40
|
+
</BreadcrumbItemComponent>
|
|
41
|
+
{breadcrumbItems.length > 0 && (
|
|
42
|
+
<BreadcrumbSeparator>
|
|
43
|
+
<ChevronRight className="h-3.5 w-3.5" />
|
|
44
|
+
</BreadcrumbSeparator>
|
|
45
|
+
)}
|
|
46
|
+
</>
|
|
47
|
+
)}
|
|
48
|
+
|
|
49
|
+
{breadcrumbItems.map((item, index) => (
|
|
50
|
+
<React.Fragment key={index}>
|
|
51
|
+
<BreadcrumbItemComponent>
|
|
52
|
+
{item.isCurrentPage ? (
|
|
53
|
+
<BreadcrumbPage>{item.label}</BreadcrumbPage>
|
|
54
|
+
) : (
|
|
55
|
+
<BreadcrumbLink href={item.href || "#"}>{item.label}</BreadcrumbLink>
|
|
56
|
+
)}
|
|
57
|
+
</BreadcrumbItemComponent>
|
|
58
|
+
{index < breadcrumbItems.length - 1 && (
|
|
59
|
+
<BreadcrumbSeparator>
|
|
60
|
+
<ChevronRight className="h-3.5 w-3.5" />
|
|
61
|
+
</BreadcrumbSeparator>
|
|
62
|
+
)}
|
|
63
|
+
</React.Fragment>
|
|
64
|
+
))}
|
|
65
|
+
</BreadcrumbList>
|
|
66
|
+
</Breadcrumb>
|
|
67
|
+
)}
|
|
68
|
+
|
|
69
|
+
{title && <h1 className="text-2xl font-bold tracking-tight">{title}</h1>}
|
|
70
|
+
|
|
71
|
+
{children}
|
|
72
|
+
</div>
|
|
73
|
+
</header>
|
|
74
|
+
)
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
|
package/src/index.css
CHANGED
|
@@ -642,6 +642,40 @@ body{
|
|
|
642
642
|
color: var(--foreground);
|
|
643
643
|
}
|
|
644
644
|
|
|
645
|
+
.container{
|
|
646
|
+
width: 100%;
|
|
647
|
+
}
|
|
648
|
+
|
|
649
|
+
@media (min-width: 640px){
|
|
650
|
+
.container{
|
|
651
|
+
max-width: 640px;
|
|
652
|
+
}
|
|
653
|
+
}
|
|
654
|
+
|
|
655
|
+
@media (min-width: 768px){
|
|
656
|
+
.container{
|
|
657
|
+
max-width: 768px;
|
|
658
|
+
}
|
|
659
|
+
}
|
|
660
|
+
|
|
661
|
+
@media (min-width: 1024px){
|
|
662
|
+
.container{
|
|
663
|
+
max-width: 1024px;
|
|
664
|
+
}
|
|
665
|
+
}
|
|
666
|
+
|
|
667
|
+
@media (min-width: 1280px){
|
|
668
|
+
.container{
|
|
669
|
+
max-width: 1280px;
|
|
670
|
+
}
|
|
671
|
+
}
|
|
672
|
+
|
|
673
|
+
@media (min-width: 1536px){
|
|
674
|
+
.container{
|
|
675
|
+
max-width: 1536px;
|
|
676
|
+
}
|
|
677
|
+
}
|
|
678
|
+
|
|
645
679
|
.sr-only{
|
|
646
680
|
position: absolute;
|
|
647
681
|
width: 1px;
|
|
@@ -850,6 +884,10 @@ body{
|
|
|
850
884
|
margin-bottom: 0.25rem;
|
|
851
885
|
}
|
|
852
886
|
|
|
887
|
+
.mb-2{
|
|
888
|
+
margin-bottom: 0.5rem;
|
|
889
|
+
}
|
|
890
|
+
|
|
853
891
|
.ml-1{
|
|
854
892
|
margin-left: 0.25rem;
|
|
855
893
|
}
|
|
@@ -858,6 +896,10 @@ body{
|
|
|
858
896
|
margin-left: auto;
|
|
859
897
|
}
|
|
860
898
|
|
|
899
|
+
.mr-1{
|
|
900
|
+
margin-right: 0.25rem;
|
|
901
|
+
}
|
|
902
|
+
|
|
861
903
|
.mt-1\.5{
|
|
862
904
|
margin-top: 0.375rem;
|
|
863
905
|
}
|
|
@@ -1488,6 +1530,10 @@ body{
|
|
|
1488
1530
|
border-width: 1px;
|
|
1489
1531
|
}
|
|
1490
1532
|
|
|
1533
|
+
.border-0{
|
|
1534
|
+
border-width: 0px;
|
|
1535
|
+
}
|
|
1536
|
+
|
|
1491
1537
|
.border-2{
|
|
1492
1538
|
border-width: 2px;
|
|
1493
1539
|
}
|
|
@@ -1718,6 +1764,10 @@ body{
|
|
|
1718
1764
|
padding-bottom: 1rem;
|
|
1719
1765
|
}
|
|
1720
1766
|
|
|
1767
|
+
.pb-0{
|
|
1768
|
+
padding-bottom: 0px;
|
|
1769
|
+
}
|
|
1770
|
+
|
|
1721
1771
|
.pb-3{
|
|
1722
1772
|
padding-bottom: 0.75rem;
|
|
1723
1773
|
}
|
|
@@ -1786,6 +1836,11 @@ body{
|
|
|
1786
1836
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
1787
1837
|
}
|
|
1788
1838
|
|
|
1839
|
+
.text-2xl{
|
|
1840
|
+
font-size: 1.5rem;
|
|
1841
|
+
line-height: 2rem;
|
|
1842
|
+
}
|
|
1843
|
+
|
|
1789
1844
|
.text-4xl{
|
|
1790
1845
|
font-size: 2.25rem;
|
|
1791
1846
|
line-height: 2.5rem;
|
|
@@ -1820,6 +1875,10 @@ body{
|
|
|
1820
1875
|
line-height: 1rem;
|
|
1821
1876
|
}
|
|
1822
1877
|
|
|
1878
|
+
.font-bold{
|
|
1879
|
+
font-weight: 700;
|
|
1880
|
+
}
|
|
1881
|
+
|
|
1823
1882
|
.font-medium{
|
|
1824
1883
|
font-weight: 500;
|
|
1825
1884
|
}
|