@sikka/hawa 0.0.264 → 0.0.265
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 +20 -6
- package/es/elements/HawaButton.d.ts +1 -0
- package/es/elements/HawaCodeBlock.d.ts +1 -0
- package/es/index.es.js +3 -3
- package/lib/elements/HawaButton.d.ts +1 -0
- package/lib/elements/HawaCodeBlock.d.ts +1 -0
- package/lib/index.js +3 -3
- package/package.json +2 -1
- package/src/elements/HawaButton.tsx +83 -48
- package/src/elements/HawaCodeBlock.tsx +67 -19
- package/src/styles.css +20 -6
- package/es/stories/ElementsStories/Buttons.stories.d.ts +0 -24
- package/lib/stories/ElementsStories/Buttons.stories.d.ts +0 -24
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sikka/hawa",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.265",
|
|
4
4
|
"description": "SaaS Oriented UI Kit",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.es.js",
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
"kit",
|
|
12
12
|
"saas",
|
|
13
13
|
"kit",
|
|
14
|
+
"tailwind",
|
|
14
15
|
"hawa"
|
|
15
16
|
],
|
|
16
17
|
"repository": {
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import React, { FC, ButtonHTMLAttributes } from "react"
|
|
1
|
+
import React, { FC, ButtonHTMLAttributes, useState } from "react"
|
|
2
2
|
import clsx from "clsx"
|
|
3
3
|
import { HawaSpinner } from "./HawaSpinner"
|
|
4
4
|
import { HawaTooltip } from "./HawaTooltip"
|
|
5
5
|
|
|
6
6
|
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
7
7
|
variant?: "contained" | "outlined"
|
|
8
|
+
feedback?: string
|
|
8
9
|
tooltipDirection?: "rtl" | "ltr"
|
|
9
10
|
color?: "default" | "primary" | "secondary"
|
|
10
11
|
width?: "full" | "normal" | "half"
|
|
@@ -32,6 +33,47 @@ const disabledVariantSyles = {
|
|
|
32
33
|
contained: "text-gray-300 bg-gray-100",
|
|
33
34
|
outlined: "text-gray-300 border-gray-300",
|
|
34
35
|
}
|
|
36
|
+
const baseStyles =
|
|
37
|
+
"cursor-pointer h-[2.36rem] justify-center items-center text-center font-medium rounded transition-all"
|
|
38
|
+
const sizeStyles = {
|
|
39
|
+
xs: "px-1 py-1",
|
|
40
|
+
small: "text-xs px-2.5 py-1.5",
|
|
41
|
+
medium: "text-sm leading-4 px-3 py-2",
|
|
42
|
+
large: "text-sm px-4 py-2",
|
|
43
|
+
noPadding: "p-0",
|
|
44
|
+
full: "h-full max-h-full p-2",
|
|
45
|
+
}
|
|
46
|
+
const widthStyles = {
|
|
47
|
+
full: "w-full flex justify-center px-5 py-2.5 text-center inline-flex items-center",
|
|
48
|
+
half: "w-full text-center flex items-center justify-center h-full",
|
|
49
|
+
normal:
|
|
50
|
+
"w-fit dark:bg-buttonPrimary-dark dark:hover:bg-buttonPrimary-700 dark:hover:brightness-90 dark:focus:ring-buttonPrimary-500",
|
|
51
|
+
}
|
|
52
|
+
const containerWidthStyles = {
|
|
53
|
+
full: "w-full flex justify-center text-center inline-flex items-center",
|
|
54
|
+
half: "w-1/2",
|
|
55
|
+
normal: "w-fit",
|
|
56
|
+
}
|
|
57
|
+
const variantStyles = {
|
|
58
|
+
contained: "border-transparent",
|
|
59
|
+
outlined: "bg-transparent border",
|
|
60
|
+
}
|
|
61
|
+
const colorStyles = {
|
|
62
|
+
contained: {
|
|
63
|
+
default:
|
|
64
|
+
"text-neutral-900 bg-buttonPrimary-500 hover:bg-buttonPrimary-700 bg-buttonPrimary-500 text-white",
|
|
65
|
+
primary:
|
|
66
|
+
"text-white bg-buttonPrimary-500 hover:bg-buttonPrimary-700 transition-all",
|
|
67
|
+
secondary:
|
|
68
|
+
"text-neutral-900 bg-buttonSecondary-default hover:text-white hover:bg-buttonSecondary-700",
|
|
69
|
+
},
|
|
70
|
+
outlined: {
|
|
71
|
+
default: "text-gray-600 border-gray-600 hover:bg-gray-200",
|
|
72
|
+
primary: "text-black hover:bg-gray-50",
|
|
73
|
+
secondary:
|
|
74
|
+
"text-secondary-800 border-secondary-800 hover:bg-buttonSecondary-700 hover:text-white",
|
|
75
|
+
},
|
|
76
|
+
}
|
|
35
77
|
|
|
36
78
|
export const HawaButton: FC<ButtonProps> = ({
|
|
37
79
|
className,
|
|
@@ -48,51 +90,29 @@ export const HawaButton: FC<ButtonProps> = ({
|
|
|
48
90
|
margins = "2",
|
|
49
91
|
children,
|
|
50
92
|
badge,
|
|
93
|
+
feedback,
|
|
51
94
|
...props
|
|
52
95
|
}) => {
|
|
53
|
-
const
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
const sizeStyles = {
|
|
57
|
-
xs: "px-1 py-1",
|
|
58
|
-
small: "text-xs px-2.5 py-1.5",
|
|
59
|
-
medium: "text-sm leading-4 px-3 py-2",
|
|
60
|
-
large: "text-sm px-4 py-2",
|
|
61
|
-
noPadding: "p-0",
|
|
62
|
-
full: "h-full max-h-full p-2",
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
const widthStyles = {
|
|
66
|
-
full: "w-full flex justify-center px-5 py-2.5 text-center inline-flex items-center",
|
|
67
|
-
half: "w-full text-center flex items-center justify-center h-full",
|
|
68
|
-
normal:
|
|
69
|
-
"w-fit dark:bg-buttonPrimary-dark dark:hover:bg-buttonPrimary-700 dark:hover:brightness-90 dark:focus:ring-buttonPrimary-500",
|
|
70
|
-
}
|
|
71
|
-
const containerWidthStyles = {
|
|
72
|
-
full: "w-full flex justify-center text-center inline-flex items-center",
|
|
73
|
-
half: "w-1/2",
|
|
74
|
-
normal: "w-fit",
|
|
75
|
-
}
|
|
76
|
-
const variantStyles = {
|
|
77
|
-
contained: "border-transparent",
|
|
78
|
-
outlined: "bg-transparent border",
|
|
79
|
-
}
|
|
96
|
+
const [isClicked, setIsClicked] = useState(false)
|
|
97
|
+
const [buttonText, setButtonText] = useState(children)
|
|
80
98
|
|
|
81
|
-
const
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
99
|
+
const handleClick = () => {
|
|
100
|
+
if (feedback) {
|
|
101
|
+
if (!isClicked) {
|
|
102
|
+
props.onClick
|
|
103
|
+
setButtonText(feedback)
|
|
104
|
+
setIsClicked(true)
|
|
105
|
+
console.log("hawa button clicked")
|
|
106
|
+
// Reset the button text after 2 seconds (adjust the time as needed).
|
|
107
|
+
setTimeout(() => {
|
|
108
|
+
setButtonText(children)
|
|
109
|
+
setIsClicked(false)
|
|
110
|
+
}, 2000)
|
|
111
|
+
}
|
|
112
|
+
} else {
|
|
113
|
+
props.onClick(null)
|
|
114
|
+
console.log("hawa button clicked")
|
|
115
|
+
}
|
|
96
116
|
}
|
|
97
117
|
|
|
98
118
|
return (
|
|
@@ -133,6 +153,7 @@ export const HawaButton: FC<ButtonProps> = ({
|
|
|
133
153
|
}
|
|
134
154
|
disabled={disabled}
|
|
135
155
|
onClick={props.onClick}
|
|
156
|
+
// onClick={handleClick}
|
|
136
157
|
>
|
|
137
158
|
{!isLoading ? children : <HawaSpinner size="button" />}
|
|
138
159
|
</button>
|
|
@@ -152,6 +173,7 @@ export const HawaButton: FC<ButtonProps> = ({
|
|
|
152
173
|
)
|
|
153
174
|
: clsx(
|
|
154
175
|
className,
|
|
176
|
+
"overflow-x-clip",
|
|
155
177
|
baseStyles,
|
|
156
178
|
variantStyles[variant],
|
|
157
179
|
sizeStyles[size],
|
|
@@ -160,13 +182,26 @@ export const HawaButton: FC<ButtonProps> = ({
|
|
|
160
182
|
)
|
|
161
183
|
}
|
|
162
184
|
disabled={disabled}
|
|
163
|
-
onClick={props.onClick}
|
|
185
|
+
// onClick={props.onClick}
|
|
186
|
+
onClick={handleClick}
|
|
164
187
|
>
|
|
165
188
|
{!isLoading ? (
|
|
166
|
-
<div
|
|
167
|
-
{
|
|
168
|
-
|
|
169
|
-
|
|
189
|
+
<div
|
|
190
|
+
className={clsx(
|
|
191
|
+
" flex flex-col-reverse items-start justify-center gap-4 s transition-all",
|
|
192
|
+
isClicked && feedback
|
|
193
|
+
? " -translate-y-8 pb-1 pt-1"
|
|
194
|
+
: "translate-y-0"
|
|
195
|
+
)}
|
|
196
|
+
>
|
|
197
|
+
{isClicked && feedback ? (
|
|
198
|
+
<div className="w-full text-center">{buttonText}</div>
|
|
199
|
+
) : null}
|
|
200
|
+
<div className="flex w-full flex-row items-center justify-center gap-2 whitespace-nowrap">
|
|
201
|
+
{props.startIcon && props.startIcon}
|
|
202
|
+
{children}
|
|
203
|
+
{props.endIcon && props.endIcon}
|
|
204
|
+
</div>
|
|
170
205
|
</div>
|
|
171
206
|
) : (
|
|
172
207
|
<HawaSpinner size="button" />
|
|
@@ -7,6 +7,7 @@ type CodeBlockTypes = {
|
|
|
7
7
|
language?: string
|
|
8
8
|
width?: "full" | "md" | "sm"
|
|
9
9
|
tabs?: TabsTypes[]
|
|
10
|
+
fileName?: string
|
|
10
11
|
code?: string
|
|
11
12
|
}
|
|
12
13
|
type TabsTypes = {
|
|
@@ -18,21 +19,34 @@ export const HawaCodeBlock: FC<CodeBlockTypes> = ({
|
|
|
18
19
|
tabs,
|
|
19
20
|
language,
|
|
20
21
|
code,
|
|
22
|
+
fileName,
|
|
21
23
|
width = "full",
|
|
22
24
|
}) => {
|
|
23
25
|
const [selectedTab, setSelectedTab] = useState(0)
|
|
24
26
|
const [showTooltip, setShowTooltip] = useState(0)
|
|
27
|
+
const [copyClicked, setCopyClicked] = useState(false)
|
|
25
28
|
let widthStyles = {
|
|
26
29
|
full: "w-full",
|
|
27
30
|
md: "w-full max-w-md",
|
|
28
31
|
sm: "w-full max-w-sm",
|
|
29
32
|
xs: "w-full max-w-xs",
|
|
30
33
|
}
|
|
34
|
+
|
|
35
|
+
const handleCopyClick = () => {
|
|
36
|
+
if (!copyClicked) {
|
|
37
|
+
setCopyClicked(true)
|
|
38
|
+
console.log("copy button clicked")
|
|
39
|
+
// Reset the button text after 2 seconds (adjust the time as needed).
|
|
40
|
+
setTimeout(() => {
|
|
41
|
+
setCopyClicked(false)
|
|
42
|
+
}, 2000)
|
|
43
|
+
}
|
|
44
|
+
}
|
|
31
45
|
return (
|
|
32
46
|
<div
|
|
33
47
|
className={clsx(
|
|
34
48
|
widthStyles[width],
|
|
35
|
-
"w-full flex-col items-center
|
|
49
|
+
"w-full flex-col items-center rounded bg-gray-800 text-left text-sm text-white sm:text-base"
|
|
36
50
|
)}
|
|
37
51
|
>
|
|
38
52
|
{" "}
|
|
@@ -58,36 +72,70 @@ export const HawaCodeBlock: FC<CodeBlockTypes> = ({
|
|
|
58
72
|
))}
|
|
59
73
|
</div>
|
|
60
74
|
)}
|
|
75
|
+
{fileName && (
|
|
76
|
+
<div className="flex flex-row gap-2 rounded-t bg-gray-700 p-2 pb-0">
|
|
77
|
+
<div
|
|
78
|
+
// className={clsx(
|
|
79
|
+
// selectedTab === i
|
|
80
|
+
// ? "border-buttonPrimary-400 border-b-2"
|
|
81
|
+
// : "bg-transparent"
|
|
82
|
+
// )}
|
|
83
|
+
>
|
|
84
|
+
<div
|
|
85
|
+
className={clsx(
|
|
86
|
+
"mb-1 w-full max-w-[52px] rounded-inner p-2 py-1 text-center text-[0.75rem] "
|
|
87
|
+
)}
|
|
88
|
+
>
|
|
89
|
+
{fileName}
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
)}
|
|
61
94
|
<pre>
|
|
62
95
|
<code
|
|
63
96
|
className={clsx(
|
|
64
|
-
"flex flex-row items-start justify-between rounded bg-gray-800
|
|
97
|
+
"flex w-full flex-row items-start justify-between rounded bg-gray-800 p-2 text-left text-sm text-white sm:text-base"
|
|
65
98
|
// `language-${language}`,
|
|
66
|
-
tabs ? "" : "pl-4"
|
|
67
99
|
)}
|
|
68
100
|
>
|
|
69
|
-
<
|
|
70
|
-
|
|
71
|
-
|
|
101
|
+
<div className="flex min-h-[37.75px] w-full flex-col justify-center p-4 ">
|
|
102
|
+
{tabs ? tabs[selectedTab].code : code}
|
|
103
|
+
</div>
|
|
104
|
+
<div className="flex flex-row items-center gap-2 p-2">
|
|
105
|
+
<div
|
|
106
|
+
className={clsx(
|
|
107
|
+
"transition-all",
|
|
108
|
+
copyClicked ? "opacity-100" : "opacity-0"
|
|
109
|
+
)}
|
|
110
|
+
>
|
|
111
|
+
Copied!
|
|
112
|
+
</div>
|
|
113
|
+
<HawaButton
|
|
114
|
+
variant="outlined"
|
|
72
115
|
onClick={() => {
|
|
116
|
+
handleCopyClick()
|
|
73
117
|
navigator.clipboard.writeText(
|
|
74
118
|
tabs ? tabs[selectedTab].code : code
|
|
75
119
|
)
|
|
76
120
|
}}
|
|
77
|
-
|
|
78
|
-
fill="none"
|
|
79
|
-
stroke-width="2"
|
|
80
|
-
viewBox="0 0 24 24"
|
|
81
|
-
stroke-linecap="round"
|
|
82
|
-
stroke-linejoin="round"
|
|
83
|
-
height="1em"
|
|
84
|
-
width="1em"
|
|
85
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
121
|
+
margins="none"
|
|
86
122
|
>
|
|
87
|
-
<
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
123
|
+
<svg
|
|
124
|
+
stroke="currentColor"
|
|
125
|
+
fill="none"
|
|
126
|
+
stroke-width="2"
|
|
127
|
+
viewBox="0 0 24 24"
|
|
128
|
+
stroke-linecap="round"
|
|
129
|
+
stroke-linejoin="round"
|
|
130
|
+
height="1em"
|
|
131
|
+
width="1em"
|
|
132
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
133
|
+
>
|
|
134
|
+
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
|
|
135
|
+
<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
|
|
136
|
+
</svg>
|
|
137
|
+
</HawaButton>
|
|
138
|
+
</div>
|
|
91
139
|
</code>
|
|
92
140
|
</pre>
|
|
93
141
|
{/* {tabs.map((tab) => (
|
package/src/styles.css
CHANGED
|
@@ -973,6 +973,9 @@ video {
|
|
|
973
973
|
.max-h-full {
|
|
974
974
|
max-height: 100%;
|
|
975
975
|
}
|
|
976
|
+
.min-h-\[37\.75px\] {
|
|
977
|
+
min-height: 37.75px;
|
|
978
|
+
}
|
|
976
979
|
.w-0 {
|
|
977
980
|
width: 0px;
|
|
978
981
|
}
|
|
@@ -1145,6 +1148,14 @@ video {
|
|
|
1145
1148
|
--tw-translate-y: -50%;
|
|
1146
1149
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1147
1150
|
}
|
|
1151
|
+
.-translate-y-8 {
|
|
1152
|
+
--tw-translate-y: -2rem;
|
|
1153
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1154
|
+
}
|
|
1155
|
+
.translate-y-0 {
|
|
1156
|
+
--tw-translate-y: 0px;
|
|
1157
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1158
|
+
}
|
|
1148
1159
|
.translate-y-1\/2 {
|
|
1149
1160
|
--tw-translate-y: 50%;
|
|
1150
1161
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
@@ -1217,6 +1228,9 @@ video {
|
|
|
1217
1228
|
.flex-col {
|
|
1218
1229
|
flex-direction: column;
|
|
1219
1230
|
}
|
|
1231
|
+
.flex-col-reverse {
|
|
1232
|
+
flex-direction: column-reverse;
|
|
1233
|
+
}
|
|
1220
1234
|
.flex-wrap {
|
|
1221
1235
|
flex-wrap: wrap;
|
|
1222
1236
|
}
|
|
@@ -1833,6 +1847,9 @@ video {
|
|
|
1833
1847
|
.pb-0 {
|
|
1834
1848
|
padding-bottom: 0px;
|
|
1835
1849
|
}
|
|
1850
|
+
.pb-1 {
|
|
1851
|
+
padding-bottom: 0.25rem;
|
|
1852
|
+
}
|
|
1836
1853
|
.pb-2 {
|
|
1837
1854
|
padding-bottom: 0.5rem;
|
|
1838
1855
|
}
|
|
@@ -1848,9 +1865,6 @@ video {
|
|
|
1848
1865
|
.pl-3 {
|
|
1849
1866
|
padding-left: 0.75rem;
|
|
1850
1867
|
}
|
|
1851
|
-
.pl-4 {
|
|
1852
|
-
padding-left: 1rem;
|
|
1853
|
-
}
|
|
1854
1868
|
.pl-6 {
|
|
1855
1869
|
padding-left: 1.5rem;
|
|
1856
1870
|
}
|
|
@@ -1860,12 +1874,12 @@ video {
|
|
|
1860
1874
|
.pr-3 {
|
|
1861
1875
|
padding-right: 0.75rem;
|
|
1862
1876
|
}
|
|
1863
|
-
.pr-4 {
|
|
1864
|
-
padding-right: 1rem;
|
|
1865
|
-
}
|
|
1866
1877
|
.pt-0 {
|
|
1867
1878
|
padding-top: 0px;
|
|
1868
1879
|
}
|
|
1880
|
+
.pt-1 {
|
|
1881
|
+
padding-top: 0.25rem;
|
|
1882
|
+
}
|
|
1869
1883
|
.pt-2 {
|
|
1870
1884
|
padding-top: 0.5rem;
|
|
1871
1885
|
}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { Meta } from "@storybook/react";
|
|
3
|
-
declare const _default: Meta<import("@storybook/react").Args>;
|
|
4
|
-
export default _default;
|
|
5
|
-
export declare const ButtonVariationsStory: {
|
|
6
|
-
(): React.JSX.Element;
|
|
7
|
-
storyName: string;
|
|
8
|
-
};
|
|
9
|
-
export declare const ButtonLoadingStory: {
|
|
10
|
-
(): React.JSX.Element;
|
|
11
|
-
storyName: string;
|
|
12
|
-
};
|
|
13
|
-
export declare const ButtonWidthStory: {
|
|
14
|
-
(): React.JSX.Element;
|
|
15
|
-
storyName: string;
|
|
16
|
-
};
|
|
17
|
-
export declare const ButtonSizesStory: {
|
|
18
|
-
(): React.JSX.Element;
|
|
19
|
-
storyName: string;
|
|
20
|
-
};
|
|
21
|
-
export declare const ButtonIconsStory: {
|
|
22
|
-
(): React.JSX.Element;
|
|
23
|
-
storyName: string;
|
|
24
|
-
};
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { Meta } from "@storybook/react";
|
|
3
|
-
declare const _default: Meta<import("@storybook/react").Args>;
|
|
4
|
-
export default _default;
|
|
5
|
-
export declare const ButtonVariationsStory: {
|
|
6
|
-
(): React.JSX.Element;
|
|
7
|
-
storyName: string;
|
|
8
|
-
};
|
|
9
|
-
export declare const ButtonLoadingStory: {
|
|
10
|
-
(): React.JSX.Element;
|
|
11
|
-
storyName: string;
|
|
12
|
-
};
|
|
13
|
-
export declare const ButtonWidthStory: {
|
|
14
|
-
(): React.JSX.Element;
|
|
15
|
-
storyName: string;
|
|
16
|
-
};
|
|
17
|
-
export declare const ButtonSizesStory: {
|
|
18
|
-
(): React.JSX.Element;
|
|
19
|
-
storyName: string;
|
|
20
|
-
};
|
|
21
|
-
export declare const ButtonIconsStory: {
|
|
22
|
-
(): React.JSX.Element;
|
|
23
|
-
storyName: string;
|
|
24
|
-
};
|