@exitvibing/hqui 0.1.0 → 0.2.0
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/README.md +13 -7
- package/dist/index.css +1 -1
- package/dist/index.d.mts +18 -16
- package/dist/index.d.ts +18 -16
- package/dist/index.js +137 -94
- package/dist/index.mjs +141 -93
- package/docs/extended-components.md +50 -41
- package/package.json +1 -1
- package/src/components/extended/FloatingPopup.tsx +139 -0
- package/src/components/extended/Sidebar.tsx +64 -0
- package/src/index.css +91 -0
- package/src/index.ts +2 -1
- package/src/components/extended/WeekViewCalendar.tsx +0 -126
|
@@ -1,126 +0,0 @@
|
|
|
1
|
-
import React, { HTMLAttributes, forwardRef } from "react";
|
|
2
|
-
import { cn } from "../../lib/cn";
|
|
3
|
-
|
|
4
|
-
export interface WeekViewEvent {
|
|
5
|
-
id: string;
|
|
6
|
-
dayIndex: number;
|
|
7
|
-
startHour: number;
|
|
8
|
-
durationHours: number;
|
|
9
|
-
title: string;
|
|
10
|
-
color?: string;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
export interface WeekViewCalendarProps extends HTMLAttributes<HTMLDivElement> {
|
|
14
|
-
events?: WeekViewEvent[];
|
|
15
|
-
startHour?: number;
|
|
16
|
-
endHour?: number;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
export const WeekViewCalendar = forwardRef<
|
|
20
|
-
HTMLDivElement,
|
|
21
|
-
WeekViewCalendarProps
|
|
22
|
-
>(({ className, events = [], startHour = 8, endHour = 18, ...props }, ref) => {
|
|
23
|
-
const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
|
24
|
-
const hours = Array.from(
|
|
25
|
-
{ length: endHour - startHour },
|
|
26
|
-
(_, i) => i + startHour,
|
|
27
|
-
);
|
|
28
|
-
|
|
29
|
-
return (
|
|
30
|
-
<div
|
|
31
|
-
ref={ref}
|
|
32
|
-
className={cn(
|
|
33
|
-
"flex flex-col rounded-lg border border-border overflow-hidden bg-card",
|
|
34
|
-
className,
|
|
35
|
-
)}
|
|
36
|
-
{...props}
|
|
37
|
-
>
|
|
38
|
-
{/* Header */}
|
|
39
|
-
<div className="grid grid-cols-8 border-b border-border bg-muted/30">
|
|
40
|
-
<div className="flex items-center justify-center border-r border-border p-2 text-xs font-medium text-muted-foreground w-16">
|
|
41
|
-
Time
|
|
42
|
-
</div>
|
|
43
|
-
{days.map((day, i) => (
|
|
44
|
-
<div
|
|
45
|
-
key={day}
|
|
46
|
-
className={cn(
|
|
47
|
-
"p-2 text-center text-sm font-semibold",
|
|
48
|
-
i < 6 && "border-r border-border",
|
|
49
|
-
)}
|
|
50
|
-
>
|
|
51
|
-
{day}
|
|
52
|
-
</div>
|
|
53
|
-
))}
|
|
54
|
-
</div>
|
|
55
|
-
|
|
56
|
-
{/* Body */}
|
|
57
|
-
<div className="relative overflow-y-auto max-h-[500px] custom-scrollbar">
|
|
58
|
-
{hours.map((hour, hIndex) => (
|
|
59
|
-
<div
|
|
60
|
-
key={hour}
|
|
61
|
-
className={cn(
|
|
62
|
-
"grid grid-cols-8",
|
|
63
|
-
hIndex < hours.length - 1 && "border-b border-border/50",
|
|
64
|
-
)}
|
|
65
|
-
>
|
|
66
|
-
<div className="flex items-start justify-center border-r border-border p-2 text-xs text-muted-foreground w-16 sticky left-0 bg-card">
|
|
67
|
-
{`${hour === 0 ? 12 : hour > 12 ? hour - 12 : hour} ${hour >= 12 ? "PM" : "AM"}`}
|
|
68
|
-
</div>
|
|
69
|
-
{days.map((_, dIndex) => (
|
|
70
|
-
<div
|
|
71
|
-
key={dIndex}
|
|
72
|
-
className={cn(
|
|
73
|
-
"h-16 relative",
|
|
74
|
-
dIndex < 6 && "border-r border-border/50",
|
|
75
|
-
)}
|
|
76
|
-
/>
|
|
77
|
-
))}
|
|
78
|
-
</div>
|
|
79
|
-
))}
|
|
80
|
-
|
|
81
|
-
{/* Events layer */}
|
|
82
|
-
<div
|
|
83
|
-
className="absolute inset-0 z-10 pointer-events-none"
|
|
84
|
-
style={{ paddingLeft: "4rem" }}
|
|
85
|
-
>
|
|
86
|
-
<div className="relative w-full h-full">
|
|
87
|
-
{events.map((event) => {
|
|
88
|
-
if (event.startHour < startHour || event.startHour >= endHour)
|
|
89
|
-
return null;
|
|
90
|
-
const top =
|
|
91
|
-
((event.startHour - startHour) / (endHour - startHour)) * 100;
|
|
92
|
-
const height =
|
|
93
|
-
(event.durationHours / (endHour - startHour)) * 100;
|
|
94
|
-
const left = (event.dayIndex / 7) * 100;
|
|
95
|
-
const width = 100 / 7;
|
|
96
|
-
|
|
97
|
-
return (
|
|
98
|
-
<div
|
|
99
|
-
key={event.id}
|
|
100
|
-
className="absolute p-0.5 pointer-events-auto"
|
|
101
|
-
style={{
|
|
102
|
-
top: `${top}%`,
|
|
103
|
-
left: `${left}%`,
|
|
104
|
-
height: `${height}%`,
|
|
105
|
-
width: `${width}%`,
|
|
106
|
-
}}
|
|
107
|
-
>
|
|
108
|
-
<div
|
|
109
|
-
className="h-full w-full rounded-md border border-white/10 p-1.5 text-xs font-semibold text-white overflow-hidden shadow-sm transition-transform hover:scale-[1.02] hover:shadow-md cursor-pointer"
|
|
110
|
-
style={{
|
|
111
|
-
backgroundColor: event.color || "hsl(var(--primary))",
|
|
112
|
-
}}
|
|
113
|
-
title={event.title}
|
|
114
|
-
>
|
|
115
|
-
{event.title}
|
|
116
|
-
</div>
|
|
117
|
-
</div>
|
|
118
|
-
);
|
|
119
|
-
})}
|
|
120
|
-
</div>
|
|
121
|
-
</div>
|
|
122
|
-
</div>
|
|
123
|
-
</div>
|
|
124
|
-
);
|
|
125
|
-
});
|
|
126
|
-
WeekViewCalendar.displayName = "WeekViewCalendar";
|