@sikka/hawa 0.1.6 → 0.1.8
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 +32 -4
- package/es/elements/Card.d.ts +4 -1
- package/es/elements/Skeleton.d.ts +3 -0
- package/es/index.es.js +2 -2
- package/lib/elements/Card.d.ts +4 -1
- package/lib/elements/Skeleton.d.ts +3 -0
- package/lib/index.js +2 -2
- package/package.json +1 -1
- package/src/elements/Card.tsx +18 -13
- package/src/elements/HawaStats.tsx +42 -46
- package/src/elements/Skeleton.tsx +15 -0
- package/src/layout/HawaAppLayoutSimplified.tsx +6 -6
- package/src/styles.css +32 -4
- package/tailwind.config.js +2 -1
package/package.json
CHANGED
package/src/elements/Card.tsx
CHANGED
|
@@ -1,19 +1,24 @@
|
|
|
1
1
|
import * as React from "react"
|
|
2
2
|
import { cn } from "../util"
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
className
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
4
|
+
interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
5
|
+
clickable?: boolean
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
const Card = React.forwardRef<HTMLDivElement, CardProps>(
|
|
9
|
+
({ className, clickable = false, ...props }, ref) => (
|
|
10
|
+
<div
|
|
11
|
+
ref={ref}
|
|
12
|
+
className={cn(
|
|
13
|
+
"rounded-lg border bg-card text-card-foreground shadow-sm",
|
|
14
|
+
clickable &&
|
|
15
|
+
"cursor-pointer transition-all hover:drop-shadow-md dark:hover:shadow-dark",
|
|
16
|
+
className
|
|
17
|
+
)}
|
|
18
|
+
{...props}
|
|
19
|
+
/>
|
|
20
|
+
)
|
|
21
|
+
)
|
|
17
22
|
Card.displayName = "Card"
|
|
18
23
|
|
|
19
24
|
const CardHeader = React.forwardRef<
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { FC } from "react"
|
|
2
2
|
import clsx from "clsx"
|
|
3
3
|
import { HawaLoading } from "./HawaLoading"
|
|
4
|
-
|
|
4
|
+
import { Card, CardContent, CardHeader, CardTitle } from "./Card"
|
|
5
5
|
|
|
6
6
|
type StatTypes = {
|
|
7
7
|
label?: string
|
|
@@ -21,52 +21,48 @@ type StatTypes = {
|
|
|
21
21
|
handleClick?: () => void
|
|
22
22
|
}
|
|
23
23
|
export const HawaStats: FC<StatTypes> = ({ variant = "default", ...props }) => {
|
|
24
|
-
let defaultStyle =
|
|
25
|
-
"flex transition-all flex-col gap-1 rounded p-4 text-sm h-fit max-h-fit"
|
|
26
|
-
let statStyles = {
|
|
27
|
-
plain: "",
|
|
28
|
-
default: "border bg-card text-card-foreground shadow-sm",
|
|
29
|
-
contained: "bg-layoutPrimary-500",
|
|
30
|
-
outlined: "ring-2 w-fit",
|
|
31
|
-
neobrutalism: "shadow-neobrutalism border-4 border-black bg-white",
|
|
32
|
-
dropshadow: "bg-white drop-shadow-md",
|
|
33
|
-
}
|
|
34
|
-
let widthStyles = {
|
|
35
|
-
full: "w-full",
|
|
36
|
-
min: "w-fit",
|
|
37
|
-
normal: "w-full max-w-[200px]",
|
|
38
|
-
}
|
|
39
|
-
|
|
40
24
|
return (
|
|
41
|
-
<
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
props.handleClick ? "cursor-pointer" : "cursor-default",
|
|
48
|
-
props.handleClick && variant === "dropshadow"
|
|
49
|
-
? "hover:drop-shadow-lg"
|
|
50
|
-
: ""
|
|
51
|
-
)}
|
|
52
|
-
style={{
|
|
53
|
-
backgroundColor: props.color
|
|
54
|
-
? props.color
|
|
55
|
-
: variant === "contained"
|
|
56
|
-
? "var(--layout-primary-500)"
|
|
57
|
-
: "",
|
|
58
|
-
}}
|
|
59
|
-
>
|
|
60
|
-
{props.icon && <div className="mb-2">{props.icon} </div>}
|
|
61
|
-
<div>{props.label}</div>
|
|
62
|
-
{props.isLoading ? (
|
|
63
|
-
<HawaLoading />
|
|
64
|
-
) : (
|
|
25
|
+
<Card onClick={props.handleClick} clickable={Boolean(props.handleClick)}>
|
|
26
|
+
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
27
|
+
<CardTitle className="text-sm font-medium">{props.label}</CardTitle>
|
|
28
|
+
{props.icon && props.icon}
|
|
29
|
+
</CardHeader>
|
|
30
|
+
<CardContent>
|
|
65
31
|
<div className="text-2xl font-bold">{props.number}</div>
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
</
|
|
32
|
+
{props.helperText && (
|
|
33
|
+
<p className="text-xs text-muted-foreground">{props.helperText}</p>
|
|
34
|
+
)}
|
|
35
|
+
</CardContent>
|
|
36
|
+
</Card>
|
|
37
|
+
|
|
38
|
+
// <Card>
|
|
39
|
+
|
|
40
|
+
// <CardContent
|
|
41
|
+
// // headless
|
|
42
|
+
// className={clsx(
|
|
43
|
+
// // defaultStyle,
|
|
44
|
+
// // widthStyles[props.width],
|
|
45
|
+
// statStyles[variant],
|
|
46
|
+
// props.handleClick ? "cursor-pointer" : "cursor-default",
|
|
47
|
+
// props.handleClick && variant === "dropshadow"
|
|
48
|
+
// ? "hover:drop-shadow-lg"
|
|
49
|
+
// : ""
|
|
50
|
+
// )}
|
|
51
|
+
// onClick={props.handleClick}
|
|
52
|
+
// >
|
|
53
|
+
// {props.icon && <div className="mb-2">{props.icon} </div>}
|
|
54
|
+
// {/* <div>{props.label}</div> */}
|
|
55
|
+
// {props.isLoading ? (
|
|
56
|
+
// <HawaLoading />
|
|
57
|
+
// ) : (
|
|
58
|
+
// <div className="text-2xl font-bold">{props.number}</div>
|
|
59
|
+
// )}
|
|
60
|
+
// {props.helperText ? (
|
|
61
|
+
// <div className="text-xs text-muted-foreground">
|
|
62
|
+
// {props.helperText}
|
|
63
|
+
// </div>
|
|
64
|
+
// ) : null}
|
|
65
|
+
// </CardContent>
|
|
66
|
+
// </Card>
|
|
71
67
|
)
|
|
72
68
|
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { cn } from "../util"
|
|
2
|
+
|
|
3
|
+
function Skeleton({
|
|
4
|
+
className,
|
|
5
|
+
...props
|
|
6
|
+
}: React.HTMLAttributes<HTMLDivElement>) {
|
|
7
|
+
return (
|
|
8
|
+
<div
|
|
9
|
+
className={cn("animate-pulse rounded-md bg-muted", className)}
|
|
10
|
+
{...props}
|
|
11
|
+
/>
|
|
12
|
+
)
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export { Skeleton }
|
|
@@ -71,7 +71,7 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
|
|
|
71
71
|
}, [keepOpen])
|
|
72
72
|
|
|
73
73
|
let drawerDefaultStyle =
|
|
74
|
-
"fixed top-0 z-40 flex h-full flex-col justify-between overflow-x-clip bg-
|
|
74
|
+
"fixed top-0 z-40 flex h-full flex-col justify-between overflow-x-clip bg-card transition-all"
|
|
75
75
|
//The width of the drawer when closed
|
|
76
76
|
let closeDrawerWidth = 56
|
|
77
77
|
//The width of the drawer when opened
|
|
@@ -96,7 +96,7 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
|
|
|
96
96
|
{props.topBar && (
|
|
97
97
|
<div
|
|
98
98
|
className={clsx(
|
|
99
|
-
"fixed left-0 right-0 top-0 z-30 flex h-14 w-full items-center justify-between bg-
|
|
99
|
+
"fixed left-0 right-0 top-0 z-30 flex h-14 w-full items-center justify-between bg-primary-foreground p-2",
|
|
100
100
|
isRTL ? "flex-row-reverse" : "flex-row"
|
|
101
101
|
)}
|
|
102
102
|
>
|
|
@@ -230,7 +230,7 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
|
|
|
230
230
|
<div
|
|
231
231
|
dir={direction}
|
|
232
232
|
className={clsx(
|
|
233
|
-
"fixed z-50 mb-2 flex h-14 w-full flex-row items-center justify-center bg-
|
|
233
|
+
"fixed z-50 mb-2 flex h-14 w-full flex-row items-center justify-center bg-primary-foreground transition-all"
|
|
234
234
|
)}
|
|
235
235
|
style={{
|
|
236
236
|
width:
|
|
@@ -271,7 +271,7 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
|
|
|
271
271
|
<div
|
|
272
272
|
className={clsx(
|
|
273
273
|
// "no-scrollbar", TODO: make this optional to hide scrollbar or not
|
|
274
|
-
"fixed bottom-14 top-14 bg-
|
|
274
|
+
"fixed bottom-14 top-14 bg-primary-foreground py-2 transition-all",
|
|
275
275
|
// bg-yellow-400
|
|
276
276
|
openSideMenu ? "overflow-auto" : "overflow-hidden"
|
|
277
277
|
)}
|
|
@@ -373,7 +373,7 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
|
|
|
373
373
|
"flex flex-row gap-2 overflow-x-clip rounded-inner p-2 px-2 text-xs",
|
|
374
374
|
isRTL ? "text-right" : "text-left",
|
|
375
375
|
props.currentPage === subIt.slug
|
|
376
|
-
? "bg-buttonPrimary-500 text-white hover:bg-
|
|
376
|
+
? "bg-buttonPrimary-500 text-white hover:bg-primary-foreground"
|
|
377
377
|
: "hover:bg-layoutPrimary-500 dark:text-white"
|
|
378
378
|
)}
|
|
379
379
|
dir={direction}
|
|
@@ -404,7 +404,7 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
|
|
|
404
404
|
{/* Drawer Footer */}
|
|
405
405
|
<div
|
|
406
406
|
className={clsx(
|
|
407
|
-
"fixed bottom-0 flex h-14 w-full items-center justify-center gap-2 overflow-clip bg-
|
|
407
|
+
"fixed bottom-0 flex h-14 w-full items-center justify-center gap-2 overflow-clip bg-primary-foreground transition-all",
|
|
408
408
|
|
|
409
409
|
direction === "rtl" ? "flex-row-reverse" : "flex-row"
|
|
410
410
|
)}
|
package/src/styles.css
CHANGED
|
@@ -1383,6 +1383,15 @@ video {
|
|
|
1383
1383
|
.animate-bounce {
|
|
1384
1384
|
animation: bounce 1s infinite;
|
|
1385
1385
|
}
|
|
1386
|
+
@keyframes pulse {
|
|
1387
|
+
|
|
1388
|
+
50% {
|
|
1389
|
+
opacity: .5;
|
|
1390
|
+
}
|
|
1391
|
+
}
|
|
1392
|
+
.animate-pulse {
|
|
1393
|
+
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
1394
|
+
}
|
|
1386
1395
|
@keyframes spin {
|
|
1387
1396
|
|
|
1388
1397
|
to {
|
|
@@ -1914,6 +1923,9 @@ video {
|
|
|
1914
1923
|
.bg-layoutPrimary-600 {
|
|
1915
1924
|
background-color: var(--layout-primary-600);
|
|
1916
1925
|
}
|
|
1926
|
+
.bg-muted {
|
|
1927
|
+
background-color: hsl(var(--muted));
|
|
1928
|
+
}
|
|
1917
1929
|
.bg-orange-400 {
|
|
1918
1930
|
--tw-bg-opacity: 1;
|
|
1919
1931
|
background-color: rgb(251 146 60 / var(--tw-bg-opacity));
|
|
@@ -2538,10 +2550,6 @@ video {
|
|
|
2538
2550
|
--tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
|
|
2539
2551
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
2540
2552
|
}
|
|
2541
|
-
.drop-shadow-md {
|
|
2542
|
-
--tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
|
|
2543
|
-
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
2544
|
-
}
|
|
2545
2553
|
.filter {
|
|
2546
2554
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
2547
2555
|
}
|
|
@@ -2824,6 +2832,9 @@ body {
|
|
|
2824
2832
|
.hover\:bg-primary:hover {
|
|
2825
2833
|
background-color: hsl(var(--primary));
|
|
2826
2834
|
}
|
|
2835
|
+
.hover\:bg-primary-foreground:hover {
|
|
2836
|
+
background-color: hsl(var(--primary-foreground));
|
|
2837
|
+
}
|
|
2827
2838
|
.hover\:bg-primary\/90:hover {
|
|
2828
2839
|
background-color: hsl(var(--primary) / 0.9);
|
|
2829
2840
|
}
|
|
@@ -2905,6 +2916,10 @@ body {
|
|
|
2905
2916
|
--tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
|
|
2906
2917
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
2907
2918
|
}
|
|
2919
|
+
.hover\:drop-shadow-md:hover {
|
|
2920
|
+
--tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
|
|
2921
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
2922
|
+
}
|
|
2908
2923
|
.focus\:border-blue-500:focus {
|
|
2909
2924
|
--tw-border-opacity: 1;
|
|
2910
2925
|
border-color: rgb(59 130 246 / var(--tw-border-opacity));
|
|
@@ -3366,6 +3381,11 @@ body {
|
|
|
3366
3381
|
--tw-text-opacity: 1;
|
|
3367
3382
|
color: rgb(255 255 255 / var(--tw-text-opacity));
|
|
3368
3383
|
}
|
|
3384
|
+
:is(.dark .dark\:hover\:shadow-dark:hover) {
|
|
3385
|
+
--tw-shadow: 0 10px 15px -3px rgba(255, 255, 255, 0.1), 0 4px 6px -2px rgba(255, 255, 255, 0.05);
|
|
3386
|
+
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -2px var(--tw-shadow-color);
|
|
3387
|
+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
3388
|
+
}
|
|
3369
3389
|
:is(.dark .dark\:hover\:brightness-90:hover) {
|
|
3370
3390
|
--tw-brightness: brightness(.9);
|
|
3371
3391
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
@@ -3505,6 +3525,10 @@ body {
|
|
|
3505
3525
|
columns: 3;
|
|
3506
3526
|
}
|
|
3507
3527
|
|
|
3528
|
+
.md\:grid-cols-2 {
|
|
3529
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
3530
|
+
}
|
|
3531
|
+
|
|
3508
3532
|
.md\:flex-row {
|
|
3509
3533
|
flex-direction: row;
|
|
3510
3534
|
}
|
|
@@ -3560,6 +3584,10 @@ body {
|
|
|
3560
3584
|
-moz-columns: 4;
|
|
3561
3585
|
columns: 4;
|
|
3562
3586
|
}
|
|
3587
|
+
|
|
3588
|
+
.lg\:grid-cols-4 {
|
|
3589
|
+
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
3590
|
+
}
|
|
3563
3591
|
}
|
|
3564
3592
|
@media (min-width: 1280px) {
|
|
3565
3593
|
|
package/tailwind.config.js
CHANGED
|
@@ -19,7 +19,8 @@ module.exports = {
|
|
|
19
19
|
},
|
|
20
20
|
extend: {
|
|
21
21
|
boxShadow: {
|
|
22
|
-
neobrutalism: "5px 5px 0px 0px rgba(0,0,0,1);"
|
|
22
|
+
neobrutalism: "5px 5px 0px 0px rgba(0,0,0,1);",
|
|
23
|
+
dark: "0 10px 15px -3px rgba(255, 255, 255, 0.1), 0 4px 6px -2px rgba(255, 255, 255, 0.05)"
|
|
23
24
|
},
|
|
24
25
|
maxWidth: {
|
|
25
26
|
"2xs": "250px"
|