@sikka/hawa 0.0.259 → 0.0.261
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 +33 -0
- package/es/elements/HawaCodeBlock.d.ts +13 -0
- package/es/elements/index.d.ts +1 -0
- package/es/index.es.js +3 -3
- package/lib/elements/HawaCodeBlock.d.ts +13 -0
- package/lib/elements/index.d.ts +1 -0
- package/lib/index.js +1 -1
- package/package.json +1 -1
- package/rollup.config.js +12 -1
- package/src/elements/BackToTop.tsx +61 -28
- package/src/elements/HawaCodeBlock.tsx +98 -0
- package/src/elements/index.ts +1 -0
- package/src/styles.css +33 -0
- package/src/tailwind.css +3 -0
- package/tailwind.config.js +2 -1
package/package.json
CHANGED
package/rollup.config.js
CHANGED
|
@@ -45,6 +45,17 @@ export default [
|
|
|
45
45
|
}
|
|
46
46
|
}),
|
|
47
47
|
commonjs()
|
|
48
|
-
]
|
|
48
|
+
],
|
|
49
|
+
onwarn: function (warning, handler) {
|
|
50
|
+
// Skip certain warnings
|
|
51
|
+
|
|
52
|
+
// should intercept ... but doesn't in some rollup versions
|
|
53
|
+
if (warning.code === "THIS_IS_UNDEFINED") {
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
// console.warn everything else
|
|
58
|
+
handler(warning);
|
|
59
|
+
}
|
|
49
60
|
}
|
|
50
61
|
];
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { FC, RefObject, useState, useEffect } from "react"
|
|
1
|
+
import React, { FC, RefObject, useState, useEffect, useRef } from "react"
|
|
2
2
|
import { clsx } from "clsx"
|
|
3
3
|
|
|
4
4
|
type ComponentTypes = {
|
|
@@ -11,6 +11,14 @@ type ComponentTypes = {
|
|
|
11
11
|
|
|
12
12
|
export const BackToTop: FC<ComponentTypes> = ({ ...props }) => {
|
|
13
13
|
const [visible, setVisible] = useState<boolean>(false)
|
|
14
|
+
const [rect, _setRect] = useState<DOMRect>(null)
|
|
15
|
+
const _rect = useRef(rect)
|
|
16
|
+
const setRect = (data) => {
|
|
17
|
+
_rect.current = data
|
|
18
|
+
_setRect(data)
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
const self = useRef(null)
|
|
14
22
|
|
|
15
23
|
const getCoords = () => {
|
|
16
24
|
let anchor = props.anchor.current
|
|
@@ -29,42 +37,59 @@ export const BackToTop: FC<ComponentTypes> = ({ ...props }) => {
|
|
|
29
37
|
props.anchor.current.scrollTo(0, 0)
|
|
30
38
|
}
|
|
31
39
|
|
|
40
|
+
// FIXME: Observers and listeners run twice
|
|
32
41
|
useEffect(() => {
|
|
42
|
+
if (!props.anchor.current) return
|
|
43
|
+
|
|
33
44
|
props.anchor.current.addEventListener("scroll", onScroll)
|
|
34
45
|
|
|
46
|
+
// Listens to rect changes. Alternatives like ResizeObserver & IntersectionObserver fail to detect positional changes consistently
|
|
47
|
+
let interval = setInterval(() => {
|
|
48
|
+
if (!props.anchor.current) return
|
|
49
|
+
|
|
50
|
+
let newRect = props.anchor.current.getBoundingClientRect()
|
|
51
|
+
if (_rect.current == null) return setRect(newRect)
|
|
52
|
+
|
|
53
|
+
if (
|
|
54
|
+
!(
|
|
55
|
+
_rect.current.top == newRect.top &&
|
|
56
|
+
_rect.current.left == newRect.left &&
|
|
57
|
+
_rect.current.width == newRect.width &&
|
|
58
|
+
_rect.current.height == newRect.height
|
|
59
|
+
)
|
|
60
|
+
) {
|
|
61
|
+
setRect(newRect)
|
|
62
|
+
}
|
|
63
|
+
}, 1)
|
|
64
|
+
|
|
35
65
|
return () => {
|
|
36
66
|
props.anchor.current?.removeEventListener("scroll", onScroll)
|
|
67
|
+
clearInterval(interval)
|
|
37
68
|
}
|
|
38
69
|
}, [])
|
|
39
70
|
|
|
40
|
-
// // Reference to tailwind classes of corners
|
|
41
|
-
// const corners = {
|
|
42
|
-
// "top-left": ["top-0 left-0", "ml", "mt"],
|
|
43
|
-
// "top-right": ["top-0 right-0", "mr", "mt"],
|
|
44
|
-
// "bottom-left": ["bottom-0 left-0", "ml", "mb"],
|
|
45
|
-
// "bottom-right": ["bottom-0 right-0", "mr", "mb"],
|
|
46
|
-
// }
|
|
47
|
-
|
|
48
|
-
// const getClasses = () => {
|
|
49
|
-
// let [corner, horizontal, vertical] = corners[props.corner || "bottom-right"]
|
|
50
|
-
|
|
51
|
-
// return clsx(
|
|
52
|
-
// `${horizontal}-[${props.paddingX || 100}px]`,
|
|
53
|
-
// `${vertical}-[${props.paddingY || 0}px]`,
|
|
54
|
-
// `${corner}`,
|
|
55
|
-
// `${visible ? "block" : "hidden"}`
|
|
56
|
-
// )
|
|
57
|
-
// }
|
|
58
|
-
|
|
59
|
-
// Had to use react styles because tailwind didn't update top & left
|
|
60
71
|
const getStyles = () => {
|
|
72
|
+
if (!props.anchor.current) return {}
|
|
73
|
+
|
|
61
74
|
let corner = props.corner || "bottom-right"
|
|
62
75
|
let [vertical, horizontal] = corner.split("-")
|
|
63
76
|
|
|
64
|
-
let
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
77
|
+
let anchorRect = props.anchor.current.getBoundingClientRect()
|
|
78
|
+
let selfRect = self.current.getBoundingClientRect()
|
|
79
|
+
|
|
80
|
+
let width = horizontal == "right" ? anchorRect.width - selfRect.width : 0
|
|
81
|
+
let height = vertical == "bottom" ? anchorRect.height - selfRect.height : 0
|
|
82
|
+
|
|
83
|
+
let style = {
|
|
84
|
+
top:
|
|
85
|
+
anchorRect.y +
|
|
86
|
+
height +
|
|
87
|
+
(vertical == "bottom" ? -1 : 1) * (props.paddingX || 10),
|
|
88
|
+
left:
|
|
89
|
+
anchorRect.x +
|
|
90
|
+
width +
|
|
91
|
+
(horizontal == "right" ? -1 : 1) * (props.paddingX || 25),
|
|
92
|
+
}
|
|
68
93
|
|
|
69
94
|
return style
|
|
70
95
|
}
|
|
@@ -72,11 +97,19 @@ export const BackToTop: FC<ComponentTypes> = ({ ...props }) => {
|
|
|
72
97
|
return (
|
|
73
98
|
<div
|
|
74
99
|
className={clsx(
|
|
75
|
-
"fixed w-fit rounded bg-blue-300 p-2 text-black transition-all hover:bg-blue-500
|
|
76
|
-
`${
|
|
100
|
+
"fixed w-fit rounded bg-blue-300 p-2 text-black transition-all hover:bg-blue-500",
|
|
101
|
+
`${
|
|
102
|
+
visible
|
|
103
|
+
? "pointer-events-all opacity-100"
|
|
104
|
+
: "pointer-events-none opacity-0"
|
|
105
|
+
}`
|
|
77
106
|
)}
|
|
78
|
-
style={
|
|
107
|
+
style={{
|
|
108
|
+
...getStyles(),
|
|
109
|
+
transitionProperty: "opacity, background-color",
|
|
110
|
+
}}
|
|
79
111
|
onClick={backToTop}
|
|
112
|
+
ref={self}
|
|
80
113
|
>
|
|
81
114
|
{/* Back to top arrow 👇*/}
|
|
82
115
|
<svg
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import React, { FC, useState } from "react"
|
|
2
|
+
import clsx from "clsx"
|
|
3
|
+
|
|
4
|
+
type CodeBlockTypes = {
|
|
5
|
+
color?: "dark" | "light"
|
|
6
|
+
language?: string
|
|
7
|
+
tabs?: TabsTypes[]
|
|
8
|
+
code?: string
|
|
9
|
+
}
|
|
10
|
+
type TabsTypes = {
|
|
11
|
+
title: string
|
|
12
|
+
code: string
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export const HawaCodeBlock: FC<CodeBlockTypes> = ({ tabs, language, code }) => {
|
|
16
|
+
const [selectedTab, setSelectedTab] = useState(0)
|
|
17
|
+
|
|
18
|
+
return (
|
|
19
|
+
<div className="w-full max-w-md flex-col items-center space-x-4 rounded bg-gray-800 text-left text-sm text-white sm:text-base">
|
|
20
|
+
{tabs && (
|
|
21
|
+
<div className="flex flex-row gap-2 rounded-t bg-gray-700 p-2 pb-0">
|
|
22
|
+
{tabs.map((tab, i) => (
|
|
23
|
+
<div
|
|
24
|
+
className={clsx(
|
|
25
|
+
selectedTab === i
|
|
26
|
+
? "border-buttonPrimary-400 border-b-2"
|
|
27
|
+
: "bg-transparent"
|
|
28
|
+
)}
|
|
29
|
+
>
|
|
30
|
+
<div
|
|
31
|
+
onClick={() => setSelectedTab(i)}
|
|
32
|
+
className={clsx(
|
|
33
|
+
"mb-1 w-full max-w-[52px] cursor-pointer rounded-inner p-2 py-1 text-center text-[0.75rem] hover:bg-gray-500"
|
|
34
|
+
)}
|
|
35
|
+
>
|
|
36
|
+
{tab.title}
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
))}
|
|
40
|
+
</div>
|
|
41
|
+
)}
|
|
42
|
+
<pre>
|
|
43
|
+
<code
|
|
44
|
+
className={clsx(
|
|
45
|
+
"flex flex-row items-center justify-between rounded bg-gray-800 py-4 pr-4 text-left text-sm text-white sm:text-base",
|
|
46
|
+
// `language-${language}`,
|
|
47
|
+
tabs ? "" : "pl-4"
|
|
48
|
+
)}
|
|
49
|
+
>
|
|
50
|
+
<span className="flex">{tabs ? tabs[selectedTab].code : code}</span>
|
|
51
|
+
<div className="cursor-pointer rounded p-2 hover:bg-gray-700">
|
|
52
|
+
<svg
|
|
53
|
+
onClick={() =>
|
|
54
|
+
navigator.clipboard.writeText(
|
|
55
|
+
tabs ? tabs[selectedTab].code : code
|
|
56
|
+
)
|
|
57
|
+
}
|
|
58
|
+
stroke="currentColor"
|
|
59
|
+
fill="none"
|
|
60
|
+
stroke-width="2"
|
|
61
|
+
viewBox="0 0 24 24"
|
|
62
|
+
stroke-linecap="round"
|
|
63
|
+
stroke-linejoin="round"
|
|
64
|
+
height="1em"
|
|
65
|
+
width="1em"
|
|
66
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
67
|
+
>
|
|
68
|
+
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
|
|
69
|
+
<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
|
|
70
|
+
</svg>
|
|
71
|
+
</div>
|
|
72
|
+
</code>
|
|
73
|
+
</pre>
|
|
74
|
+
{/* {tabs.map((tab) => (
|
|
75
|
+
<code className="inline-flex items-center space-x-4 rounded bg-gray-800 p-4 pl-6 text-left text-sm text-white sm:text-base">
|
|
76
|
+
<span className="flex gap-4">npm install @sikka/hawa</span>
|
|
77
|
+
|
|
78
|
+
<svg
|
|
79
|
+
onClick={() => navigator.clipboard.writeText("test")}
|
|
80
|
+
className="cursor-pointer"
|
|
81
|
+
stroke="currentColor"
|
|
82
|
+
fill="none"
|
|
83
|
+
stroke-width="2"
|
|
84
|
+
viewBox="0 0 24 24"
|
|
85
|
+
stroke-linecap="round"
|
|
86
|
+
stroke-linejoin="round"
|
|
87
|
+
height="1em"
|
|
88
|
+
width="1em"
|
|
89
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
90
|
+
>
|
|
91
|
+
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
|
|
92
|
+
<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
|
|
93
|
+
</svg>
|
|
94
|
+
</code>
|
|
95
|
+
))} */}
|
|
96
|
+
</div>
|
|
97
|
+
)
|
|
98
|
+
}
|
package/src/elements/index.ts
CHANGED
package/src/styles.css
CHANGED
|
@@ -399,6 +399,9 @@ video {
|
|
|
399
399
|
--button-secondary-700: #b48d24;
|
|
400
400
|
|
|
401
401
|
--border-radius: 10px;
|
|
402
|
+
--border-radius-inner: calc(
|
|
403
|
+
var(--border-radius) - calc(var(--border-radius) / 3)
|
|
404
|
+
);
|
|
402
405
|
}
|
|
403
406
|
input[type="number"]::-webkit-inner-spin-button,
|
|
404
407
|
input[type="number"]::-webkit-outer-spin-button {
|
|
@@ -1039,6 +1042,9 @@ video {
|
|
|
1039
1042
|
.w-9 {
|
|
1040
1043
|
width: 2.25rem;
|
|
1041
1044
|
}
|
|
1045
|
+
.w-\[12px\] {
|
|
1046
|
+
width: 12px;
|
|
1047
|
+
}
|
|
1042
1048
|
.w-\[32px\] {
|
|
1043
1049
|
width: 32px;
|
|
1044
1050
|
}
|
|
@@ -1088,6 +1094,9 @@ video {
|
|
|
1088
1094
|
.max-w-\[200px\] {
|
|
1089
1095
|
max-width: 200px;
|
|
1090
1096
|
}
|
|
1097
|
+
.max-w-\[52px\] {
|
|
1098
|
+
max-width: 52px;
|
|
1099
|
+
}
|
|
1091
1100
|
.max-w-fit {
|
|
1092
1101
|
max-width: -moz-fit-content;
|
|
1093
1102
|
max-width: fit-content;
|
|
@@ -1347,6 +1356,9 @@ video {
|
|
|
1347
1356
|
.rounded-full {
|
|
1348
1357
|
border-radius: 9999px;
|
|
1349
1358
|
}
|
|
1359
|
+
.rounded-inner {
|
|
1360
|
+
border-radius: var(--border-radius-inner);
|
|
1361
|
+
}
|
|
1350
1362
|
.rounded-lg {
|
|
1351
1363
|
border-radius: 0.5rem;
|
|
1352
1364
|
}
|
|
@@ -1597,6 +1609,10 @@ video {
|
|
|
1597
1609
|
--tw-bg-opacity: 1;
|
|
1598
1610
|
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
|
|
1599
1611
|
}
|
|
1612
|
+
.bg-gray-700 {
|
|
1613
|
+
--tw-bg-opacity: 1;
|
|
1614
|
+
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
|
1615
|
+
}
|
|
1600
1616
|
.bg-gray-800 {
|
|
1601
1617
|
--tw-bg-opacity: 1;
|
|
1602
1618
|
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
|
|
@@ -1788,6 +1804,9 @@ video {
|
|
|
1788
1804
|
padding-top: 1.5rem;
|
|
1789
1805
|
padding-bottom: 1.5rem;
|
|
1790
1806
|
}
|
|
1807
|
+
.pb-0 {
|
|
1808
|
+
padding-bottom: 0px;
|
|
1809
|
+
}
|
|
1791
1810
|
.pb-2 {
|
|
1792
1811
|
padding-bottom: 0.5rem;
|
|
1793
1812
|
}
|
|
@@ -1803,6 +1822,9 @@ video {
|
|
|
1803
1822
|
.pl-3 {
|
|
1804
1823
|
padding-left: 0.75rem;
|
|
1805
1824
|
}
|
|
1825
|
+
.pl-4 {
|
|
1826
|
+
padding-left: 1rem;
|
|
1827
|
+
}
|
|
1806
1828
|
.pl-6 {
|
|
1807
1829
|
padding-left: 1.5rem;
|
|
1808
1830
|
}
|
|
@@ -1812,6 +1834,9 @@ video {
|
|
|
1812
1834
|
.pr-3 {
|
|
1813
1835
|
padding-right: 0.75rem;
|
|
1814
1836
|
}
|
|
1837
|
+
.pr-4 {
|
|
1838
|
+
padding-right: 1rem;
|
|
1839
|
+
}
|
|
1815
1840
|
.pt-0 {
|
|
1816
1841
|
padding-top: 0px;
|
|
1817
1842
|
}
|
|
@@ -1855,6 +1880,9 @@ video {
|
|
|
1855
1880
|
font-size: 3.75rem;
|
|
1856
1881
|
line-height: 1;
|
|
1857
1882
|
}
|
|
1883
|
+
.text-\[0\.75rem\] {
|
|
1884
|
+
font-size: 0.75rem;
|
|
1885
|
+
}
|
|
1858
1886
|
.text-\[10px\] {
|
|
1859
1887
|
font-size: 10px;
|
|
1860
1888
|
}
|
|
@@ -2289,6 +2317,11 @@ body {
|
|
|
2289
2317
|
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
|
|
2290
2318
|
}
|
|
2291
2319
|
|
|
2320
|
+
.hover\:bg-gray-500:hover {
|
|
2321
|
+
--tw-bg-opacity: 1;
|
|
2322
|
+
background-color: rgb(107 114 128 / var(--tw-bg-opacity));
|
|
2323
|
+
}
|
|
2324
|
+
|
|
2292
2325
|
.hover\:bg-gray-700:hover {
|
|
2293
2326
|
--tw-bg-opacity: 1;
|
|
2294
2327
|
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
package/src/tailwind.css
CHANGED
|
@@ -18,6 +18,9 @@
|
|
|
18
18
|
--button-secondary-700: #b48d24;
|
|
19
19
|
|
|
20
20
|
--border-radius: 10px;
|
|
21
|
+
--border-radius-inner: calc(
|
|
22
|
+
var(--border-radius) - calc(var(--border-radius) / 3)
|
|
23
|
+
);
|
|
21
24
|
}
|
|
22
25
|
input[type="number"]::-webkit-inner-spin-button,
|
|
23
26
|
input[type="number"]::-webkit-outer-spin-button {
|
package/tailwind.config.js
CHANGED