@fuf-stack/pixels 0.5.7 → 0.5.9
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/Json/index.cjs +2 -2
- package/dist/Json/index.js +1 -1
- package/dist/chunk-64K2TRGL.cjs +7 -0
- package/dist/chunk-64K2TRGL.cjs.map +1 -0
- package/dist/{chunk-7GYTJLD6.cjs → chunk-M7IVIJEA.cjs} +2 -2
- package/dist/chunk-M7IVIJEA.cjs.map +1 -0
- package/dist/chunk-MM5H2WFG.js +7 -0
- package/dist/chunk-MM5H2WFG.js.map +1 -0
- package/dist/chunk-MWNBYTRN.cjs +72 -0
- package/dist/chunk-MWNBYTRN.cjs.map +1 -0
- package/dist/chunk-USOEZROT.js +72 -0
- package/dist/chunk-USOEZROT.js.map +1 -0
- package/dist/{chunk-BTBF633Q.js → chunk-YQBT544X.js} +2 -2
- package/dist/chunk-YQBT544X.js.map +1 -0
- package/dist/hooks/index.cjs +9 -0
- package/dist/hooks/index.cjs.map +1 -0
- package/dist/hooks/index.d.cts +7 -0
- package/dist/hooks/index.d.ts +7 -0
- package/dist/hooks/index.js +9 -0
- package/dist/hooks/index.js.map +1 -0
- package/dist/index.cjs +24 -84
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +3 -7
- package/dist/index.d.ts +3 -7
- package/dist/index.js +11 -71
- package/dist/index.js.map +1 -1
- package/dist/theme/index.cjs +7 -0
- package/dist/theme/index.cjs.map +1 -0
- package/dist/theme/index.d.cts +1 -0
- package/dist/theme/index.d.ts +1 -0
- package/dist/theme/index.js +7 -0
- package/dist/theme/index.js.map +1 -0
- package/package.json +15 -4
- package/dist/chunk-7GYTJLD6.cjs.map +0 -1
- package/dist/chunk-BTBF633Q.js.map +0 -1
package/dist/Json/index.cjs
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _chunkM7IVIJEAcjs = require('../chunk-M7IVIJEA.cjs');
|
|
5
5
|
require('../chunk-ND4VZZVU.cjs');
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
exports.Json =
|
|
9
|
+
exports.Json = _chunkM7IVIJEAcjs.Json_default; exports.default = _chunkM7IVIJEAcjs.Json_default2;
|
|
10
10
|
//# sourceMappingURL=index.cjs.map
|
package/dist/Json/index.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/theme/index.ts"],"names":[],"mappings":";AACA,SAAS,cAAc","sourcesContent":["/* eslint-disable import/prefer-default-export */\nexport { nextui } from '@nextui-org/theme';\n"]}
|
|
@@ -79,7 +79,7 @@ var Json = ({ className = null, collapsed = false, value }) => {
|
|
|
79
79
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-medium", children: "Failed to parse JSON data" })
|
|
80
80
|
] }),
|
|
81
81
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
82
|
-
_chunkND4VZZVUcjs.
|
|
82
|
+
_chunkND4VZZVUcjs.Button_default,
|
|
83
83
|
{
|
|
84
84
|
color: "danger",
|
|
85
85
|
size: "sm",
|
|
@@ -124,4 +124,4 @@ var Json_default2 = Json_default;
|
|
|
124
124
|
|
|
125
125
|
|
|
126
126
|
exports.Json_default = Json_default; exports.Json_default2 = Json_default2;
|
|
127
|
-
//# sourceMappingURL=chunk-
|
|
127
|
+
//# sourceMappingURL=chunk-M7IVIJEA.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Json/Json.tsx","../src/Json/index.ts"],"names":["Json_default"],"mappings":";;;;;AAEA,SAAS,gBAAgB;AACzB,SAAS,eAAe,aAAa,qBAAqB;AAC1D,SAAS,oBAAoB,+BAA+B;AAE5D,OAAO,cAAc;AACrB,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,OAAO,QAAQ;AAiEG,SAiCJ,UAjCI,KAsBR,YAtBQ;AA1DlB,IAAM,WAAW,CAAC,UAA2B;AAC3C,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO,KAAK,MAAM,KAAK;AAAA,EACzB;AACA,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO;AAAA,EACT;AACA,QAAM,IAAI,MAAM,GAAG,OAAO,KAAK,wBAAwB;AACzD;AAcA,IAAM,OAAO,CAAC,EAAE,YAAY,MAAM,YAAY,OAAO,MAAM,MAAiB;AAC1E,QAAM,aAAa,SAAS,KAAK,UAAU,SAAS,MAAM;AAE1D,MAAI,UAAqB;AACzB,MAAI,QAAmB;AAEvB,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,MAAI;AACF,cACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV;AAAA,QACA,kBAAkB;AAAA,QAClB,OAAO;AAAA,UACL,GAAI,aAAa,cAAc;AAAA,UAC/B,iBAAiB;AAAA,QACnB;AAAA,QACA,OAAO,SAAS,KAAK;AAAA,QAGrB;AAAA,UAAC,SAAS;AAAA,UAAT;AAAA,YACC,QAAQ,CAAC;AAAA;AAAA,cAEP,eAAe;AAAA,cACf;AAAA,cACA,GAAG;AAAA,YACL,MAAM;AACJ,oBAAM,aAAa;AAAA,gBACjB,SAAS;AAAA,gBACT;AAAA,gBACA,EAAE,gBAAgB,OAAO;AAAA,cAC3B;AACA,qBACE,oBAAC,UAAK,WAAU,gCAA+B,OAC5C,mBACC;AAAA,gBAAC;AAAA;AAAA,kBAEE,GAAG;AAAA,kBACJ,WAAW;AAAA;AAAA,cACb;AAAA;AAAA,gBAGA,oBAAC,sBAAoB,GAAG,UAAU,WAAW,YAAY;AAAA,iBAE7D;AAAA,YAEJ;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,EAEJ,SAAS,KAAK;AACZ,YACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAK;AAAA,QAEL;AAAA,+BAAC,SAAI,WAAU,qCACb;AAAA,iCAAC,SAAI,WAAU,qBACb;AAAA,kCAAC,iBAAc,WAAU,QAAO;AAAA,cAChC,oBAAC,UAAK,WAAU,eAAc,uCAAyB;AAAA,eACzD;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAM;AAAA,gBACN,MAAK;AAAA,gBACL,SAAQ;AAAA,gBACR,SAAS,MAAM,eAAe,CAAC,WAAW;AAAA,gBAEzC,wBACC,iCACE;AAAA,sCAAC,eAAY;AAAA,kBAAE;AAAA,mBACjB,IAEA,iCACE;AAAA,sCAAC,iBAAc;AAAA,kBAAE;AAAA,mBACnB;AAAA;AAAA,YAEJ;AAAA,aACF;AAAA,UACC,eACC,qBAAC,SAAI,WAAU,yBACb;AAAA,iCAAC,SACC;AAAA,kCAAC,YAAO,oBAAM;AAAA,cACd,qBAAC,SAEE;AAAA,qBAAK;AAAA,gBAAK;AAAA,gBAAG,KAAK;AAAA,iBACrB;AAAA,eACF;AAAA,YACA,qBAAC,SAAI,WAAU,QACb;AAAA,kCAAC,YAAO,mBAAK;AAAA,cACb,oBAAC,SACE,iBAAO,UAAU,WACd,KAAK,UAAU,OAAO,MAAM,CAAC,IAC7B,OACN;AAAA,eACF;AAAA,aACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACA,SAAO,oBAAC,SAAI,WAAW,GAAG,SAAS,GAAI,mBAAS,SAAQ;AAC1D;AAEA,IAAO,eAAQ;;;ACxIf,IAAOA,gBAAQ","sourcesContent":["import type { ReactNode } from 'react';\n\nimport { useState } from 'react';\nimport { FaChevronDown, FaChevronUp, FaTimesCircle } from 'react-icons/fa';\nimport { HiOutlineClipboard, HiOutlineClipboardCheck } from 'react-icons/hi';\n\nimport JsonView from '@uiw/react-json-view';\nimport { lightTheme } from '@uiw/react-json-view/light';\nimport { vscodeTheme } from '@uiw/react-json-view/vscode';\nimport cn from 'classnames';\n\nimport { Button } from '../Button';\n\n/**\n * returns the value (JSON string or object) as object\n */\nconst getValue = (value: string | object) => {\n if (typeof value === 'string') {\n return JSON.parse(value);\n }\n if (typeof value === 'object') {\n return value;\n }\n throw new Error(`${typeof value} can not be visualized`);\n};\n\nexport interface JsonProps {\n /** CSS class name */\n className?: string | string[] | null;\n /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. */\n collapsed?: boolean | number;\n /** Object to be visualized JSON string or object */\n value: string | object;\n}\n\n/**\n * Json renderer based on [react-json-view](https://mac-s-g.github.io/react-json-view/demo/dist/)\n */\nconst Json = ({ className = null, collapsed = false, value }: JsonProps) => {\n const isDarkMode = document.body.classList.contains('dark');\n\n let content: ReactNode = null;\n let error: ReactNode = null;\n\n const [showDetails, setShowDetails] = useState(false);\n\n try {\n content = (\n <JsonView\n className=\"pr-5\"\n collapsed={collapsed}\n displayDataTypes={false}\n style={{\n ...(isDarkMode ? vscodeTheme : lightTheme),\n backgroundColor: 'unset',\n }}\n value={getValue(value)}\n >\n {/* FIX: overwrite Copied component to fix flickering copy button */}\n <JsonView.Copied\n render={({\n // @ts-expect-error this should be fine\n 'data-copied': copied,\n style,\n ...elmProps\n }) => {\n const elmClasses = cn(\n elmProps.className,\n 'absolute -right-4 -top-[2px] h-4 w-4 !fill-transparent pl-1',\n { 'text-success': copied },\n );\n return (\n <span className=\"relative !ml-0 !h-[1em] !w-0\" style={style}>\n {copied ? (\n <HiOutlineClipboardCheck\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...elmProps}\n className={elmClasses}\n />\n ) : (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <HiOutlineClipboard {...elmProps} className={elmClasses} />\n )}\n </span>\n );\n }}\n />\n </JsonView>\n );\n } catch (err) {\n error = (\n <div\n className=\"mb-4 flex flex-col items-center rounded-lg border border-danger bg-danger-50 p-4 text-sm text-danger\"\n role=\"alert\"\n >\n <div className=\"flex w-full justify-between gap-6\">\n <div className=\"flex items-center\">\n <FaTimesCircle className=\"mr-2\" />\n <span className=\"font-medium\">Failed to parse JSON data</span>\n </div>\n <Button\n color=\"danger\"\n size=\"sm\"\n variant=\"light\"\n onClick={() => setShowDetails(!showDetails)}\n >\n {showDetails ? (\n <>\n <FaChevronUp /> Hide Details\n </>\n ) : (\n <>\n <FaChevronDown /> Show Details\n </>\n )}\n </Button>\n </div>\n {showDetails && (\n <div className=\"mt-4 w-full text-left\">\n <div>\n <strong>Error:</strong>\n <pre>\n {/* @ts-expect-error is ok */}\n {err?.name}: {err?.message}\n </pre>\n </div>\n <div className=\"mt-4\">\n <strong>Data:</strong>\n <pre>\n {typeof value !== 'string'\n ? JSON.stringify(value, null, 2)\n : value}\n </pre>\n </div>\n </div>\n )}\n </div>\n );\n }\n return <div className={cn(className)}>{error || content}</div>;\n};\n\nexport default Json;\n","import Json from './Json';\n\nexport type { JsonProps } from './Json';\n\nexport { Json };\n\nexport default Json;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/theme/index.ts"],"sourcesContent":["/* eslint-disable import/prefer-default-export */\nexport { nextui } from '@nextui-org/theme';\n"],"mappings":";AACA,SAAS,cAAc;","names":[]}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/hooks/useDebounce.ts
|
|
2
|
+
var _react = require('react');
|
|
3
|
+
var useDebounce = (value, delay) => {
|
|
4
|
+
const [debouncedValue, setDebouncedValue] = _react.useState.call(void 0, value);
|
|
5
|
+
_react.useEffect.call(void 0,
|
|
6
|
+
() => {
|
|
7
|
+
const handler = setTimeout(() => {
|
|
8
|
+
setDebouncedValue(value);
|
|
9
|
+
}, delay);
|
|
10
|
+
return () => {
|
|
11
|
+
clearTimeout(handler);
|
|
12
|
+
};
|
|
13
|
+
},
|
|
14
|
+
[value, delay]
|
|
15
|
+
// Only re-call effect if value or delay changes
|
|
16
|
+
);
|
|
17
|
+
return debouncedValue;
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
// src/hooks/useLocalStorage.ts
|
|
21
|
+
|
|
22
|
+
var useLocalStorage = (key, initialValue) => {
|
|
23
|
+
const readValue = () => {
|
|
24
|
+
if (typeof window === "undefined") {
|
|
25
|
+
return initialValue;
|
|
26
|
+
}
|
|
27
|
+
try {
|
|
28
|
+
const item = window.localStorage.getItem(key);
|
|
29
|
+
return item ? JSON.parse(item) : initialValue;
|
|
30
|
+
} catch (error) {
|
|
31
|
+
console.warn(`Error reading localStorage key \u201C${key}\u201D:`, error);
|
|
32
|
+
return initialValue;
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
const [storedValue, setStoredValue] = _react.useState.call(void 0, readValue);
|
|
36
|
+
const setValue = (value) => {
|
|
37
|
+
if (typeof window === "undefined") {
|
|
38
|
+
console.warn(
|
|
39
|
+
`Tried setting localStorage key \u201C${key}\u201D even though environment is not a client`
|
|
40
|
+
);
|
|
41
|
+
}
|
|
42
|
+
try {
|
|
43
|
+
const newValue = value instanceof Function ? value(storedValue) : value;
|
|
44
|
+
window.localStorage.setItem(key, JSON.stringify(newValue));
|
|
45
|
+
setStoredValue(newValue);
|
|
46
|
+
window.dispatchEvent(new Event("local-storage"));
|
|
47
|
+
} catch (error) {
|
|
48
|
+
console.warn(`Error setting localStorage key \u201C${key}\u201D:`, error);
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
_react.useEffect.call(void 0, () => {
|
|
52
|
+
setStoredValue(readValue());
|
|
53
|
+
}, []);
|
|
54
|
+
_react.useEffect.call(void 0, () => {
|
|
55
|
+
const handleStorageChange = () => {
|
|
56
|
+
setStoredValue(readValue());
|
|
57
|
+
};
|
|
58
|
+
window.addEventListener("storage", handleStorageChange);
|
|
59
|
+
window.addEventListener("local-storage", handleStorageChange);
|
|
60
|
+
return () => {
|
|
61
|
+
window.removeEventListener("storage", handleStorageChange);
|
|
62
|
+
window.removeEventListener("local-storage", handleStorageChange);
|
|
63
|
+
};
|
|
64
|
+
}, []);
|
|
65
|
+
return [storedValue, setValue];
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
exports.useDebounce = useDebounce; exports.useLocalStorage = useLocalStorage;
|
|
72
|
+
//# sourceMappingURL=chunk-MWNBYTRN.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useDebounce.ts","../src/hooks/useLocalStorage.ts"],"names":["useEffect","useState"],"mappings":";AAEA,SAAS,WAAW,gBAAgB;AAE7B,IAAM,cAAc,CAAQ,OAAc,UAAkB;AAEjE,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAC1D;AAAA,IACE,MAAM;AAEJ,YAAM,UAAU,WAAW,MAAM;AAC/B,0BAAkB,KAAK;AAAA,MACzB,GAAG,KAAK;AAIR,aAAO,MAAM;AACX,qBAAa,OAAO;AAAA,MACtB;AAAA,IACF;AAAA,IACA,CAAC,OAAO,KAAK;AAAA;AAAA,EACf;AACA,SAAO;AACT;;;ACnBA,SAAS,aAAAA,YAAW,YAAAC,iBAAgB;AAE7B,IAAM,kBAAkB,CAC7B,KACA,iBACqC;AAGrC,QAAM,YAAY,MAAM;AAEtB,QAAI,OAAO,WAAW,aAAa;AACjC,aAAO;AAAA,IACT;AAEA,QAAI;AACF,YAAM,OAAO,OAAO,aAAa,QAAQ,GAAG;AAC5C,aAAO,OAAO,KAAK,MAAM,IAAI,IAAI;AAAA,IACnC,SAAS,OAAO;AACd,cAAQ,KAAK,wCAAmC,GAAG,WAAM,KAAK;AAC9D,aAAO;AAAA,IACT;AAAA,EACF;AAIA,QAAM,CAAC,aAAa,cAAc,IAAIA,UAAY,SAAS;AAI3D,QAAM,WAAwC,CAAC,UAAU;AAEvD,QAAI,OAAO,WAAW,aAAa;AACjC,cAAQ;AAAA,QACN,wCAAmC,GAAG;AAAA,MACxC;AAAA,IACF;AAEA,QAAI;AAEF,YAAM,WAAW,iBAAiB,WAAW,MAAM,WAAW,IAAI;AAGlE,aAAO,aAAa,QAAQ,KAAK,KAAK,UAAU,QAAQ,CAAC;AAGzD,qBAAe,QAAQ;AAGvB,aAAO,cAAc,IAAI,MAAM,eAAe,CAAC;AAAA,IACjD,SAAS,OAAO;AACd,cAAQ,KAAK,wCAAmC,GAAG,WAAM,KAAK;AAAA,IAChE;AAAA,EACF;AAEA,EAAAD,WAAU,MAAM;AACd,mBAAe,UAAU,CAAC;AAAA,EAE5B,GAAG,CAAC,CAAC;AAEL,EAAAA,WAAU,MAAM;AACd,UAAM,sBAAsB,MAAM;AAChC,qBAAe,UAAU,CAAC;AAAA,IAC5B;AAGA,WAAO,iBAAiB,WAAW,mBAAmB;AAGtD,WAAO,iBAAiB,iBAAiB,mBAAmB;AAE5D,WAAO,MAAM;AACX,aAAO,oBAAoB,WAAW,mBAAmB;AACzD,aAAO,oBAAoB,iBAAiB,mBAAmB;AAAA,IACjE;AAAA,EAEF,GAAG,CAAC,CAAC;AAEL,SAAO,CAAC,aAAa,QAAQ;AAC/B","sourcesContent":["/* eslint-disable import/prefer-default-export */\n\nimport { useEffect, useState } from 'react';\n\nexport const useDebounce = <Value>(value: Value, delay: number) => {\n // State and setters for debounced value\n const [debouncedValue, setDebouncedValue] = useState(value);\n useEffect(\n () => {\n // Update debounced value after delay\n const handler = setTimeout(() => {\n setDebouncedValue(value);\n }, delay);\n // Cancel the timeout if value changes (also on delay change or unmount)\n // This is how we prevent debounced value from updating if value is changed ...\n // .. within the delay period. Timeout gets cleared and restarted.\n return () => {\n clearTimeout(handler);\n };\n },\n [value, delay], // Only re-call effect if value or delay changes\n );\n return debouncedValue;\n};\n","/* eslint-disable import/prefer-default-export */\n\nimport type { Dispatch, SetStateAction } from 'react';\n\nimport { useEffect, useState } from 'react';\n\nexport const useLocalStorage = <T>(\n key: string,\n initialValue: T | (() => T),\n): [T, Dispatch<SetStateAction<T>>] => {\n // Get from local storage then\n // parse stored json or return initialValue\n const readValue = () => {\n // Prevent build error \"window is undefined\" but keep keep working\n if (typeof window === 'undefined') {\n return initialValue;\n }\n\n try {\n const item = window.localStorage.getItem(key);\n return item ? JSON.parse(item) : initialValue;\n } catch (error) {\n console.warn(`Error reading localStorage key “${key}”:`, error);\n return initialValue;\n }\n };\n\n // State to store our value\n // Pass initial state function to useState so logic is only executed once\n const [storedValue, setStoredValue] = useState<T>(readValue);\n\n // Return a wrapped version of useState's setter function that ...\n // ... persists the new value to localStorage.\n const setValue: Dispatch<SetStateAction<T>> = (value) => {\n // Prevent build error \"window is undefined\" but keeps working\n if (typeof window === 'undefined') {\n console.warn(\n `Tried setting localStorage key “${key}” even though environment is not a client`,\n );\n }\n\n try {\n // Allow value to be a function so we have the same API as useState\n const newValue = value instanceof Function ? value(storedValue) : value;\n\n // Save to local storage\n window.localStorage.setItem(key, JSON.stringify(newValue));\n\n // Save state\n setStoredValue(newValue);\n\n // We dispatch a custom event so every useLocalStorage hook are notified\n window.dispatchEvent(new Event('local-storage'));\n } catch (error) {\n console.warn(`Error setting localStorage key “${key}”:`, error);\n }\n };\n\n useEffect(() => {\n setStoredValue(readValue());\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n const handleStorageChange = () => {\n setStoredValue(readValue());\n };\n\n // this only works for other documents, not the current one\n window.addEventListener('storage', handleStorageChange);\n\n // this is a custom event, triggered in writeValueToLocalStorage\n window.addEventListener('local-storage', handleStorageChange);\n\n return () => {\n window.removeEventListener('storage', handleStorageChange);\n window.removeEventListener('local-storage', handleStorageChange);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return [storedValue, setValue];\n};\n"]}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
// src/hooks/useDebounce.ts
|
|
2
|
+
import { useEffect, useState } from "react";
|
|
3
|
+
var useDebounce = (value, delay) => {
|
|
4
|
+
const [debouncedValue, setDebouncedValue] = useState(value);
|
|
5
|
+
useEffect(
|
|
6
|
+
() => {
|
|
7
|
+
const handler = setTimeout(() => {
|
|
8
|
+
setDebouncedValue(value);
|
|
9
|
+
}, delay);
|
|
10
|
+
return () => {
|
|
11
|
+
clearTimeout(handler);
|
|
12
|
+
};
|
|
13
|
+
},
|
|
14
|
+
[value, delay]
|
|
15
|
+
// Only re-call effect if value or delay changes
|
|
16
|
+
);
|
|
17
|
+
return debouncedValue;
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
// src/hooks/useLocalStorage.ts
|
|
21
|
+
import { useEffect as useEffect2, useState as useState2 } from "react";
|
|
22
|
+
var useLocalStorage = (key, initialValue) => {
|
|
23
|
+
const readValue = () => {
|
|
24
|
+
if (typeof window === "undefined") {
|
|
25
|
+
return initialValue;
|
|
26
|
+
}
|
|
27
|
+
try {
|
|
28
|
+
const item = window.localStorage.getItem(key);
|
|
29
|
+
return item ? JSON.parse(item) : initialValue;
|
|
30
|
+
} catch (error) {
|
|
31
|
+
console.warn(`Error reading localStorage key \u201C${key}\u201D:`, error);
|
|
32
|
+
return initialValue;
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
const [storedValue, setStoredValue] = useState2(readValue);
|
|
36
|
+
const setValue = (value) => {
|
|
37
|
+
if (typeof window === "undefined") {
|
|
38
|
+
console.warn(
|
|
39
|
+
`Tried setting localStorage key \u201C${key}\u201D even though environment is not a client`
|
|
40
|
+
);
|
|
41
|
+
}
|
|
42
|
+
try {
|
|
43
|
+
const newValue = value instanceof Function ? value(storedValue) : value;
|
|
44
|
+
window.localStorage.setItem(key, JSON.stringify(newValue));
|
|
45
|
+
setStoredValue(newValue);
|
|
46
|
+
window.dispatchEvent(new Event("local-storage"));
|
|
47
|
+
} catch (error) {
|
|
48
|
+
console.warn(`Error setting localStorage key \u201C${key}\u201D:`, error);
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
useEffect2(() => {
|
|
52
|
+
setStoredValue(readValue());
|
|
53
|
+
}, []);
|
|
54
|
+
useEffect2(() => {
|
|
55
|
+
const handleStorageChange = () => {
|
|
56
|
+
setStoredValue(readValue());
|
|
57
|
+
};
|
|
58
|
+
window.addEventListener("storage", handleStorageChange);
|
|
59
|
+
window.addEventListener("local-storage", handleStorageChange);
|
|
60
|
+
return () => {
|
|
61
|
+
window.removeEventListener("storage", handleStorageChange);
|
|
62
|
+
window.removeEventListener("local-storage", handleStorageChange);
|
|
63
|
+
};
|
|
64
|
+
}, []);
|
|
65
|
+
return [storedValue, setValue];
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
export {
|
|
69
|
+
useDebounce,
|
|
70
|
+
useLocalStorage
|
|
71
|
+
};
|
|
72
|
+
//# sourceMappingURL=chunk-USOEZROT.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useDebounce.ts","../src/hooks/useLocalStorage.ts"],"sourcesContent":["/* eslint-disable import/prefer-default-export */\n\nimport { useEffect, useState } from 'react';\n\nexport const useDebounce = <Value>(value: Value, delay: number) => {\n // State and setters for debounced value\n const [debouncedValue, setDebouncedValue] = useState(value);\n useEffect(\n () => {\n // Update debounced value after delay\n const handler = setTimeout(() => {\n setDebouncedValue(value);\n }, delay);\n // Cancel the timeout if value changes (also on delay change or unmount)\n // This is how we prevent debounced value from updating if value is changed ...\n // .. within the delay period. Timeout gets cleared and restarted.\n return () => {\n clearTimeout(handler);\n };\n },\n [value, delay], // Only re-call effect if value or delay changes\n );\n return debouncedValue;\n};\n","/* eslint-disable import/prefer-default-export */\n\nimport type { Dispatch, SetStateAction } from 'react';\n\nimport { useEffect, useState } from 'react';\n\nexport const useLocalStorage = <T>(\n key: string,\n initialValue: T | (() => T),\n): [T, Dispatch<SetStateAction<T>>] => {\n // Get from local storage then\n // parse stored json or return initialValue\n const readValue = () => {\n // Prevent build error \"window is undefined\" but keep keep working\n if (typeof window === 'undefined') {\n return initialValue;\n }\n\n try {\n const item = window.localStorage.getItem(key);\n return item ? JSON.parse(item) : initialValue;\n } catch (error) {\n console.warn(`Error reading localStorage key “${key}”:`, error);\n return initialValue;\n }\n };\n\n // State to store our value\n // Pass initial state function to useState so logic is only executed once\n const [storedValue, setStoredValue] = useState<T>(readValue);\n\n // Return a wrapped version of useState's setter function that ...\n // ... persists the new value to localStorage.\n const setValue: Dispatch<SetStateAction<T>> = (value) => {\n // Prevent build error \"window is undefined\" but keeps working\n if (typeof window === 'undefined') {\n console.warn(\n `Tried setting localStorage key “${key}” even though environment is not a client`,\n );\n }\n\n try {\n // Allow value to be a function so we have the same API as useState\n const newValue = value instanceof Function ? value(storedValue) : value;\n\n // Save to local storage\n window.localStorage.setItem(key, JSON.stringify(newValue));\n\n // Save state\n setStoredValue(newValue);\n\n // We dispatch a custom event so every useLocalStorage hook are notified\n window.dispatchEvent(new Event('local-storage'));\n } catch (error) {\n console.warn(`Error setting localStorage key “${key}”:`, error);\n }\n };\n\n useEffect(() => {\n setStoredValue(readValue());\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n const handleStorageChange = () => {\n setStoredValue(readValue());\n };\n\n // this only works for other documents, not the current one\n window.addEventListener('storage', handleStorageChange);\n\n // this is a custom event, triggered in writeValueToLocalStorage\n window.addEventListener('local-storage', handleStorageChange);\n\n return () => {\n window.removeEventListener('storage', handleStorageChange);\n window.removeEventListener('local-storage', handleStorageChange);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return [storedValue, setValue];\n};\n"],"mappings":";AAEA,SAAS,WAAW,gBAAgB;AAE7B,IAAM,cAAc,CAAQ,OAAc,UAAkB;AAEjE,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAC1D;AAAA,IACE,MAAM;AAEJ,YAAM,UAAU,WAAW,MAAM;AAC/B,0BAAkB,KAAK;AAAA,MACzB,GAAG,KAAK;AAIR,aAAO,MAAM;AACX,qBAAa,OAAO;AAAA,MACtB;AAAA,IACF;AAAA,IACA,CAAC,OAAO,KAAK;AAAA;AAAA,EACf;AACA,SAAO;AACT;;;ACnBA,SAAS,aAAAA,YAAW,YAAAC,iBAAgB;AAE7B,IAAM,kBAAkB,CAC7B,KACA,iBACqC;AAGrC,QAAM,YAAY,MAAM;AAEtB,QAAI,OAAO,WAAW,aAAa;AACjC,aAAO;AAAA,IACT;AAEA,QAAI;AACF,YAAM,OAAO,OAAO,aAAa,QAAQ,GAAG;AAC5C,aAAO,OAAO,KAAK,MAAM,IAAI,IAAI;AAAA,IACnC,SAAS,OAAO;AACd,cAAQ,KAAK,wCAAmC,GAAG,WAAM,KAAK;AAC9D,aAAO;AAAA,IACT;AAAA,EACF;AAIA,QAAM,CAAC,aAAa,cAAc,IAAIA,UAAY,SAAS;AAI3D,QAAM,WAAwC,CAAC,UAAU;AAEvD,QAAI,OAAO,WAAW,aAAa;AACjC,cAAQ;AAAA,QACN,wCAAmC,GAAG;AAAA,MACxC;AAAA,IACF;AAEA,QAAI;AAEF,YAAM,WAAW,iBAAiB,WAAW,MAAM,WAAW,IAAI;AAGlE,aAAO,aAAa,QAAQ,KAAK,KAAK,UAAU,QAAQ,CAAC;AAGzD,qBAAe,QAAQ;AAGvB,aAAO,cAAc,IAAI,MAAM,eAAe,CAAC;AAAA,IACjD,SAAS,OAAO;AACd,cAAQ,KAAK,wCAAmC,GAAG,WAAM,KAAK;AAAA,IAChE;AAAA,EACF;AAEA,EAAAD,WAAU,MAAM;AACd,mBAAe,UAAU,CAAC;AAAA,EAE5B,GAAG,CAAC,CAAC;AAEL,EAAAA,WAAU,MAAM;AACd,UAAM,sBAAsB,MAAM;AAChC,qBAAe,UAAU,CAAC;AAAA,IAC5B;AAGA,WAAO,iBAAiB,WAAW,mBAAmB;AAGtD,WAAO,iBAAiB,iBAAiB,mBAAmB;AAE5D,WAAO,MAAM;AACX,aAAO,oBAAoB,WAAW,mBAAmB;AACzD,aAAO,oBAAoB,iBAAiB,mBAAmB;AAAA,IACjE;AAAA,EAEF,GAAG,CAAC,CAAC;AAEL,SAAO,CAAC,aAAa,QAAQ;AAC/B;","names":["useEffect","useState"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {
|
|
2
|
-
|
|
2
|
+
Button_default
|
|
3
3
|
} from "./chunk-HYXTFS4R.js";
|
|
4
4
|
|
|
5
5
|
// src/Json/Json.tsx
|
|
@@ -124,4 +124,4 @@ export {
|
|
|
124
124
|
Json_default,
|
|
125
125
|
Json_default2
|
|
126
126
|
};
|
|
127
|
-
//# sourceMappingURL=chunk-
|
|
127
|
+
//# sourceMappingURL=chunk-YQBT544X.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Json/Json.tsx","../src/Json/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { useState } from 'react';\nimport { FaChevronDown, FaChevronUp, FaTimesCircle } from 'react-icons/fa';\nimport { HiOutlineClipboard, HiOutlineClipboardCheck } from 'react-icons/hi';\n\nimport JsonView from '@uiw/react-json-view';\nimport { lightTheme } from '@uiw/react-json-view/light';\nimport { vscodeTheme } from '@uiw/react-json-view/vscode';\nimport cn from 'classnames';\n\nimport { Button } from '../Button';\n\n/**\n * returns the value (JSON string or object) as object\n */\nconst getValue = (value: string | object) => {\n if (typeof value === 'string') {\n return JSON.parse(value);\n }\n if (typeof value === 'object') {\n return value;\n }\n throw new Error(`${typeof value} can not be visualized`);\n};\n\nexport interface JsonProps {\n /** CSS class name */\n className?: string | string[] | null;\n /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. */\n collapsed?: boolean | number;\n /** Object to be visualized JSON string or object */\n value: string | object;\n}\n\n/**\n * Json renderer based on [react-json-view](https://mac-s-g.github.io/react-json-view/demo/dist/)\n */\nconst Json = ({ className = null, collapsed = false, value }: JsonProps) => {\n const isDarkMode = document.body.classList.contains('dark');\n\n let content: ReactNode = null;\n let error: ReactNode = null;\n\n const [showDetails, setShowDetails] = useState(false);\n\n try {\n content = (\n <JsonView\n className=\"pr-5\"\n collapsed={collapsed}\n displayDataTypes={false}\n style={{\n ...(isDarkMode ? vscodeTheme : lightTheme),\n backgroundColor: 'unset',\n }}\n value={getValue(value)}\n >\n {/* FIX: overwrite Copied component to fix flickering copy button */}\n <JsonView.Copied\n render={({\n // @ts-expect-error this should be fine\n 'data-copied': copied,\n style,\n ...elmProps\n }) => {\n const elmClasses = cn(\n elmProps.className,\n 'absolute -right-4 -top-[2px] h-4 w-4 !fill-transparent pl-1',\n { 'text-success': copied },\n );\n return (\n <span className=\"relative !ml-0 !h-[1em] !w-0\" style={style}>\n {copied ? (\n <HiOutlineClipboardCheck\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...elmProps}\n className={elmClasses}\n />\n ) : (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <HiOutlineClipboard {...elmProps} className={elmClasses} />\n )}\n </span>\n );\n }}\n />\n </JsonView>\n );\n } catch (err) {\n error = (\n <div\n className=\"mb-4 flex flex-col items-center rounded-lg border border-danger bg-danger-50 p-4 text-sm text-danger\"\n role=\"alert\"\n >\n <div className=\"flex w-full justify-between gap-6\">\n <div className=\"flex items-center\">\n <FaTimesCircle className=\"mr-2\" />\n <span className=\"font-medium\">Failed to parse JSON data</span>\n </div>\n <Button\n color=\"danger\"\n size=\"sm\"\n variant=\"light\"\n onClick={() => setShowDetails(!showDetails)}\n >\n {showDetails ? (\n <>\n <FaChevronUp /> Hide Details\n </>\n ) : (\n <>\n <FaChevronDown /> Show Details\n </>\n )}\n </Button>\n </div>\n {showDetails && (\n <div className=\"mt-4 w-full text-left\">\n <div>\n <strong>Error:</strong>\n <pre>\n {/* @ts-expect-error is ok */}\n {err?.name}: {err?.message}\n </pre>\n </div>\n <div className=\"mt-4\">\n <strong>Data:</strong>\n <pre>\n {typeof value !== 'string'\n ? JSON.stringify(value, null, 2)\n : value}\n </pre>\n </div>\n </div>\n )}\n </div>\n );\n }\n return <div className={cn(className)}>{error || content}</div>;\n};\n\nexport default Json;\n","import Json from './Json';\n\nexport type { JsonProps } from './Json';\n\nexport { Json };\n\nexport default Json;\n"],"mappings":"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","names":["Json_default"]}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
var _chunkMWNBYTRNcjs = require('../chunk-MWNBYTRN.cjs');
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
exports.useDebounce = _chunkMWNBYTRNcjs.useDebounce; exports.useLocalStorage = _chunkMWNBYTRNcjs.useLocalStorage;
|
|
9
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Dispatch, SetStateAction } from 'react';
|
|
2
|
+
|
|
3
|
+
declare const useDebounce: <Value>(value: Value, delay: number) => Value;
|
|
4
|
+
|
|
5
|
+
declare const useLocalStorage: <T>(key: string, initialValue: T | (() => T)) => [T, Dispatch<SetStateAction<T>>];
|
|
6
|
+
|
|
7
|
+
export { useDebounce, useLocalStorage };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Dispatch, SetStateAction } from 'react';
|
|
2
|
+
|
|
3
|
+
declare const useDebounce: <Value>(value: Value, delay: number) => Value;
|
|
4
|
+
|
|
5
|
+
declare const useLocalStorage: <T>(key: string, initialValue: T | (() => T)) => [T, Dispatch<SetStateAction<T>>];
|
|
6
|
+
|
|
7
|
+
export { useDebounce, useLocalStorage };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/dist/index.cjs
CHANGED
|
@@ -1,10 +1,17 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
3
|
|
|
4
|
+
var _chunkMWNBYTRNcjs = require('./chunk-MWNBYTRN.cjs');
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
var _chunk64K2TRGLcjs = require('./chunk-64K2TRGL.cjs');
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
4
11
|
var _chunkGIM2W4JHcjs = require('./chunk-GIM2W4JH.cjs');
|
|
5
12
|
|
|
6
13
|
|
|
7
|
-
var
|
|
14
|
+
var _chunkM7IVIJEAcjs = require('./chunk-M7IVIJEA.cjs');
|
|
8
15
|
|
|
9
16
|
|
|
10
17
|
|
|
@@ -27,87 +34,20 @@ var _chunkB35F4645cjs = require('./chunk-B35F4645.cjs');
|
|
|
27
34
|
|
|
28
35
|
var _chunkBSBPQXNGcjs = require('./chunk-BSBPQXNG.cjs');
|
|
29
36
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
return debouncedValue;
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
// src/hooks/useLocalStorage.ts
|
|
50
|
-
|
|
51
|
-
var useLocalStorage = (key, initialValue) => {
|
|
52
|
-
const readValue = () => {
|
|
53
|
-
if (typeof window === "undefined") {
|
|
54
|
-
return initialValue;
|
|
55
|
-
}
|
|
56
|
-
try {
|
|
57
|
-
const item = window.localStorage.getItem(key);
|
|
58
|
-
return item ? JSON.parse(item) : initialValue;
|
|
59
|
-
} catch (error) {
|
|
60
|
-
console.warn(`Error reading localStorage key \u201C${key}\u201D:`, error);
|
|
61
|
-
return initialValue;
|
|
62
|
-
}
|
|
63
|
-
};
|
|
64
|
-
const [storedValue, setStoredValue] = _react.useState.call(void 0, readValue);
|
|
65
|
-
const setValue = (value) => {
|
|
66
|
-
if (typeof window === "undefined") {
|
|
67
|
-
console.warn(
|
|
68
|
-
`Tried setting localStorage key \u201C${key}\u201D even though environment is not a client`
|
|
69
|
-
);
|
|
70
|
-
}
|
|
71
|
-
try {
|
|
72
|
-
const newValue = value instanceof Function ? value(storedValue) : value;
|
|
73
|
-
window.localStorage.setItem(key, JSON.stringify(newValue));
|
|
74
|
-
setStoredValue(newValue);
|
|
75
|
-
window.dispatchEvent(new Event("local-storage"));
|
|
76
|
-
} catch (error) {
|
|
77
|
-
console.warn(`Error setting localStorage key \u201C${key}\u201D:`, error);
|
|
78
|
-
}
|
|
79
|
-
};
|
|
80
|
-
_react.useEffect.call(void 0, () => {
|
|
81
|
-
setStoredValue(readValue());
|
|
82
|
-
}, []);
|
|
83
|
-
_react.useEffect.call(void 0, () => {
|
|
84
|
-
const handleStorageChange = () => {
|
|
85
|
-
setStoredValue(readValue());
|
|
86
|
-
};
|
|
87
|
-
window.addEventListener("storage", handleStorageChange);
|
|
88
|
-
window.addEventListener("local-storage", handleStorageChange);
|
|
89
|
-
return () => {
|
|
90
|
-
window.removeEventListener("storage", handleStorageChange);
|
|
91
|
-
window.removeEventListener("local-storage", handleStorageChange);
|
|
92
|
-
};
|
|
93
|
-
}, []);
|
|
94
|
-
return [storedValue, setValue];
|
|
95
|
-
};
|
|
96
|
-
var useLocalStorage_default = useLocalStorage;
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
exports.Button = _chunkND4VZZVUcjs.Button_default; exports.Card = _chunkGIM2W4JHcjs.Card_default; exports.Json = _chunk7GYTJLD6cjs.Json_default; exports.Label = _chunkBMKGS5PKcjs.Label_default; exports.Menu = _chunkHHTTNYDCcjs.Menu_default; exports.Modal = _chunkX2MUU2ZIcjs.Modal_default; exports.Popover = _chunkB35F4645cjs.Popover_default; exports.Tooltip = _chunkBSBPQXNGcjs.Tooltip_default; exports.buttonVariants = _chunkND4VZZVUcjs.buttonVariants; exports.cardVariants = _chunkGIM2W4JHcjs.cardVariants; exports.modalVariants = _chunkX2MUU2ZIcjs.modalVariants; exports.tooltipPlacementOptions = _chunkBSBPQXNGcjs.tooltipPlacementOptions; exports.useDebounce = useDebounce_default; exports.useLocalStorage = useLocalStorage_default;
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
exports.Button = _chunkND4VZZVUcjs.Button_default; exports.Card = _chunkGIM2W4JHcjs.Card_default; exports.Json = _chunkM7IVIJEAcjs.Json_default; exports.Label = _chunkBMKGS5PKcjs.Label_default; exports.Menu = _chunkHHTTNYDCcjs.Menu_default; exports.Modal = _chunkX2MUU2ZIcjs.Modal_default; exports.Popover = _chunkB35F4645cjs.Popover_default; exports.Tooltip = _chunkBSBPQXNGcjs.Tooltip_default; exports.buttonVariants = _chunkND4VZZVUcjs.buttonVariants; exports.cardVariants = _chunkGIM2W4JHcjs.cardVariants; exports.modalVariants = _chunkX2MUU2ZIcjs.modalVariants; exports.nextui = _chunk64K2TRGLcjs.nextui; exports.tooltipPlacementOptions = _chunkBSBPQXNGcjs.tooltipPlacementOptions; exports.useDebounce = _chunkMWNBYTRNcjs.useDebounce; exports.useLocalStorage = _chunkMWNBYTRNcjs.useLocalStorage;
|
|
113
53
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":""}
|
package/dist/index.d.cts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { Dispatch, SetStateAction } from 'react';
|
|
2
1
|
export { B as Button, a as ButtonProps, b as buttonVariants } from './Button-DS4qK4Lf.cjs';
|
|
3
2
|
export { C as Card, a as CardProps, c as cardVariants } from './Card-D5kspciY.cjs';
|
|
4
3
|
export { J as Json, a as JsonProps } from './Json-ClGDcbcp.cjs';
|
|
@@ -7,15 +6,12 @@ export { M as Menu, b as MenuItem, a as MenuProps, c as MenuSection } from './Me
|
|
|
7
6
|
export { M as Modal, a as ModalProps, m as modalVariants } from './Modal-Ck13vTaf.cjs';
|
|
8
7
|
export { _ as Popover, P as PopoverProps } from './Popover-DbTTk7_N.cjs';
|
|
9
8
|
export { T as Tooltip, a as TooltipProps, t as tooltipPlacementOptions } from './Tooltip-D4znH2L3.cjs';
|
|
9
|
+
export { useDebounce, useLocalStorage } from './hooks/index.cjs';
|
|
10
|
+
export { nextui } from '@nextui-org/theme';
|
|
10
11
|
import 'react/jsx-runtime';
|
|
11
12
|
import 'tailwind-variants';
|
|
12
13
|
import 'tailwind-variants/dist/config.js';
|
|
13
14
|
import '@nextui-org/button';
|
|
15
|
+
import 'react';
|
|
14
16
|
import '@nextui-org/chip';
|
|
15
17
|
import '@nextui-org/popover';
|
|
16
|
-
|
|
17
|
-
declare const _default: <Value>(value: Value, delay: number) => Value;
|
|
18
|
-
|
|
19
|
-
declare const useLocalStorage: <T>(key: string, initialValue: T | (() => T)) => [T, Dispatch<SetStateAction<T>>];
|
|
20
|
-
|
|
21
|
-
export { _default as useDebounce, useLocalStorage };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { Dispatch, SetStateAction } from 'react';
|
|
2
1
|
export { B as Button, a as ButtonProps, b as buttonVariants } from './Button-DS4qK4Lf.js';
|
|
3
2
|
export { C as Card, a as CardProps, c as cardVariants } from './Card-D5kspciY.js';
|
|
4
3
|
export { J as Json, a as JsonProps } from './Json-ClGDcbcp.js';
|
|
@@ -7,15 +6,12 @@ export { M as Menu, b as MenuItem, a as MenuProps, c as MenuSection } from './Me
|
|
|
7
6
|
export { M as Modal, a as ModalProps, m as modalVariants } from './Modal-Ck13vTaf.js';
|
|
8
7
|
export { _ as Popover, P as PopoverProps } from './Popover-DbTTk7_N.js';
|
|
9
8
|
export { T as Tooltip, a as TooltipProps, t as tooltipPlacementOptions } from './Tooltip-D4znH2L3.js';
|
|
9
|
+
export { useDebounce, useLocalStorage } from './hooks/index.js';
|
|
10
|
+
export { nextui } from '@nextui-org/theme';
|
|
10
11
|
import 'react/jsx-runtime';
|
|
11
12
|
import 'tailwind-variants';
|
|
12
13
|
import 'tailwind-variants/dist/config.js';
|
|
13
14
|
import '@nextui-org/button';
|
|
15
|
+
import 'react';
|
|
14
16
|
import '@nextui-org/chip';
|
|
15
17
|
import '@nextui-org/popover';
|
|
16
|
-
|
|
17
|
-
declare const _default: <Value>(value: Value, delay: number) => Value;
|
|
18
|
-
|
|
19
|
-
declare const useLocalStorage: <T>(key: string, initialValue: T | (() => T)) => [T, Dispatch<SetStateAction<T>>];
|
|
20
|
-
|
|
21
|
-
export { _default as useDebounce, useLocalStorage };
|
package/dist/index.js
CHANGED
|
@@ -1,10 +1,17 @@
|
|
|
1
|
+
import {
|
|
2
|
+
useDebounce,
|
|
3
|
+
useLocalStorage
|
|
4
|
+
} from "./chunk-USOEZROT.js";
|
|
5
|
+
import {
|
|
6
|
+
nextui
|
|
7
|
+
} from "./chunk-MM5H2WFG.js";
|
|
1
8
|
import {
|
|
2
9
|
Card_default,
|
|
3
10
|
cardVariants
|
|
4
11
|
} from "./chunk-IEZVKZFP.js";
|
|
5
12
|
import {
|
|
6
13
|
Json_default
|
|
7
|
-
} from "./chunk-
|
|
14
|
+
} from "./chunk-YQBT544X.js";
|
|
8
15
|
import {
|
|
9
16
|
Button_default,
|
|
10
17
|
buttonVariants
|
|
@@ -26,74 +33,6 @@ import {
|
|
|
26
33
|
Tooltip_default,
|
|
27
34
|
tooltipPlacementOptions
|
|
28
35
|
} from "./chunk-236GX7PP.js";
|
|
29
|
-
|
|
30
|
-
// src/hooks/useDebounce.ts
|
|
31
|
-
import { useEffect, useState } from "react";
|
|
32
|
-
var useDebounce_default = (value, delay) => {
|
|
33
|
-
const [debouncedValue, setDebouncedValue] = useState(value);
|
|
34
|
-
useEffect(
|
|
35
|
-
() => {
|
|
36
|
-
const handler = setTimeout(() => {
|
|
37
|
-
setDebouncedValue(value);
|
|
38
|
-
}, delay);
|
|
39
|
-
return () => {
|
|
40
|
-
clearTimeout(handler);
|
|
41
|
-
};
|
|
42
|
-
},
|
|
43
|
-
[value, delay]
|
|
44
|
-
// Only re-call effect if value or delay changes
|
|
45
|
-
);
|
|
46
|
-
return debouncedValue;
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
// src/hooks/useLocalStorage.ts
|
|
50
|
-
import { useEffect as useEffect2, useState as useState2 } from "react";
|
|
51
|
-
var useLocalStorage = (key, initialValue) => {
|
|
52
|
-
const readValue = () => {
|
|
53
|
-
if (typeof window === "undefined") {
|
|
54
|
-
return initialValue;
|
|
55
|
-
}
|
|
56
|
-
try {
|
|
57
|
-
const item = window.localStorage.getItem(key);
|
|
58
|
-
return item ? JSON.parse(item) : initialValue;
|
|
59
|
-
} catch (error) {
|
|
60
|
-
console.warn(`Error reading localStorage key \u201C${key}\u201D:`, error);
|
|
61
|
-
return initialValue;
|
|
62
|
-
}
|
|
63
|
-
};
|
|
64
|
-
const [storedValue, setStoredValue] = useState2(readValue);
|
|
65
|
-
const setValue = (value) => {
|
|
66
|
-
if (typeof window === "undefined") {
|
|
67
|
-
console.warn(
|
|
68
|
-
`Tried setting localStorage key \u201C${key}\u201D even though environment is not a client`
|
|
69
|
-
);
|
|
70
|
-
}
|
|
71
|
-
try {
|
|
72
|
-
const newValue = value instanceof Function ? value(storedValue) : value;
|
|
73
|
-
window.localStorage.setItem(key, JSON.stringify(newValue));
|
|
74
|
-
setStoredValue(newValue);
|
|
75
|
-
window.dispatchEvent(new Event("local-storage"));
|
|
76
|
-
} catch (error) {
|
|
77
|
-
console.warn(`Error setting localStorage key \u201C${key}\u201D:`, error);
|
|
78
|
-
}
|
|
79
|
-
};
|
|
80
|
-
useEffect2(() => {
|
|
81
|
-
setStoredValue(readValue());
|
|
82
|
-
}, []);
|
|
83
|
-
useEffect2(() => {
|
|
84
|
-
const handleStorageChange = () => {
|
|
85
|
-
setStoredValue(readValue());
|
|
86
|
-
};
|
|
87
|
-
window.addEventListener("storage", handleStorageChange);
|
|
88
|
-
window.addEventListener("local-storage", handleStorageChange);
|
|
89
|
-
return () => {
|
|
90
|
-
window.removeEventListener("storage", handleStorageChange);
|
|
91
|
-
window.removeEventListener("local-storage", handleStorageChange);
|
|
92
|
-
};
|
|
93
|
-
}, []);
|
|
94
|
-
return [storedValue, setValue];
|
|
95
|
-
};
|
|
96
|
-
var useLocalStorage_default = useLocalStorage;
|
|
97
36
|
export {
|
|
98
37
|
Button_default as Button,
|
|
99
38
|
Card_default as Card,
|
|
@@ -106,8 +45,9 @@ export {
|
|
|
106
45
|
buttonVariants,
|
|
107
46
|
cardVariants,
|
|
108
47
|
modalVariants,
|
|
48
|
+
nextui,
|
|
109
49
|
tooltipPlacementOptions,
|
|
110
|
-
|
|
111
|
-
|
|
50
|
+
useDebounce,
|
|
51
|
+
useLocalStorage
|
|
112
52
|
};
|
|
113
53
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { nextui } from '@nextui-org/theme';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { nextui } from '@nextui-org/theme';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@fuf-stack/pixels",
|
|
3
3
|
"description": "fuf react component library",
|
|
4
4
|
"author": "Hannes Tiede",
|
|
5
|
-
"version": "0.5.
|
|
5
|
+
"version": "0.5.9",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "./dist/index.js",
|
|
8
8
|
"module": "./dist/index.cjs",
|
|
@@ -24,6 +24,11 @@
|
|
|
24
24
|
"require": "./dist/Card/index.cjs",
|
|
25
25
|
"types": "./dist/Card/index.d.ts"
|
|
26
26
|
},
|
|
27
|
+
"./hooks": {
|
|
28
|
+
"import": "./dist/hooks/index.js",
|
|
29
|
+
"require": "./dist/hooks/index.cjs",
|
|
30
|
+
"types": "./dist/hooks/index.d.ts"
|
|
31
|
+
},
|
|
27
32
|
"./Json": {
|
|
28
33
|
"import": "./dist/Json/index.js",
|
|
29
34
|
"require": "./dist/Json/index.cjs",
|
|
@@ -49,6 +54,11 @@
|
|
|
49
54
|
"require": "./dist/Popover/index.cjs",
|
|
50
55
|
"types": "./dist/Popover/index.d.ts"
|
|
51
56
|
},
|
|
57
|
+
"./theme": {
|
|
58
|
+
"import": "./dist/theme/index.js",
|
|
59
|
+
"require": "./dist/theme/index.cjs",
|
|
60
|
+
"types": "./dist/theme/index.d.ts"
|
|
61
|
+
},
|
|
52
62
|
"./Tooltip": {
|
|
53
63
|
"import": "./dist/Tooltip/index.js",
|
|
54
64
|
"require": "./dist/Tooltip/index.cjs",
|
|
@@ -88,9 +98,10 @@
|
|
|
88
98
|
"@nextui-org/modal": "2.0.33",
|
|
89
99
|
"@nextui-org/popover": "2.1.21",
|
|
90
100
|
"@nextui-org/system": "2.1.2",
|
|
101
|
+
"@nextui-org/theme": "2.2.3",
|
|
91
102
|
"@nextui-org/tooltip": "2.0.33",
|
|
92
103
|
"classnames": "2.5.1",
|
|
93
|
-
"react-icons": "5.1
|
|
104
|
+
"react-icons": "5.2.1",
|
|
94
105
|
"react-json-view": "1.21.3",
|
|
95
106
|
"@uiw/react-json-view": "2.0.0-alpha.24",
|
|
96
107
|
"tailwind-variants": "0.2.1"
|
|
@@ -103,8 +114,8 @@
|
|
|
103
114
|
"react-dom": "18.3.1",
|
|
104
115
|
"@repo/storybook-config": "0.0.1",
|
|
105
116
|
"@repo/tailwind-config": "0.0.1",
|
|
106
|
-
"@repo/
|
|
107
|
-
"@repo/
|
|
117
|
+
"@repo/vite-config": "0.0.1",
|
|
118
|
+
"@repo/tsup-config": "0.0.1"
|
|
108
119
|
},
|
|
109
120
|
"scripts": {
|
|
110
121
|
"build": "tsup --config node_modules/@repo/tsup-config/config.ts",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Json/Json.tsx","../src/Json/index.ts"],"names":["Json_default"],"mappings":"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","sourcesContent":["import type { ReactNode } from 'react';\n\nimport { useState } from 'react';\nimport { FaChevronDown, FaChevronUp, FaTimesCircle } from 'react-icons/fa';\nimport { HiOutlineClipboard, HiOutlineClipboardCheck } from 'react-icons/hi';\n\nimport JsonView from '@uiw/react-json-view';\nimport { lightTheme } from '@uiw/react-json-view/light';\nimport { vscodeTheme } from '@uiw/react-json-view/vscode';\nimport cn from 'classnames';\n\nimport Button from '../Button';\n\n/**\n * returns the value (JSON string or object) as object\n */\nconst getValue = (value: string | object) => {\n if (typeof value === 'string') {\n return JSON.parse(value);\n }\n if (typeof value === 'object') {\n return value;\n }\n throw new Error(`${typeof value} can not be visualized`);\n};\n\nexport interface JsonProps {\n /** CSS class name */\n className?: string | string[] | null;\n /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. */\n collapsed?: boolean | number;\n /** Object to be visualized JSON string or object */\n value: string | object;\n}\n\n/**\n * Json renderer based on [react-json-view](https://mac-s-g.github.io/react-json-view/demo/dist/)\n */\nconst Json = ({ className = null, collapsed = false, value }: JsonProps) => {\n const isDarkMode = document.body.classList.contains('dark');\n\n let content: ReactNode = null;\n let error: ReactNode = null;\n\n const [showDetails, setShowDetails] = useState(false);\n\n try {\n content = (\n <JsonView\n className=\"pr-5\"\n collapsed={collapsed}\n displayDataTypes={false}\n style={{\n ...(isDarkMode ? vscodeTheme : lightTheme),\n backgroundColor: 'unset',\n }}\n value={getValue(value)}\n >\n {/* FIX: overwrite Copied component to fix flickering copy button */}\n <JsonView.Copied\n render={({\n // @ts-expect-error this should be fine\n 'data-copied': copied,\n style,\n ...elmProps\n }) => {\n const elmClasses = cn(\n elmProps.className,\n 'absolute -right-4 -top-[2px] h-4 w-4 !fill-transparent pl-1',\n { 'text-success': copied },\n );\n return (\n <span className=\"relative !ml-0 !h-[1em] !w-0\" style={style}>\n {copied ? (\n <HiOutlineClipboardCheck\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...elmProps}\n className={elmClasses}\n />\n ) : (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <HiOutlineClipboard {...elmProps} className={elmClasses} />\n )}\n </span>\n );\n }}\n />\n </JsonView>\n );\n } catch (err) {\n error = (\n <div\n className=\"mb-4 flex flex-col items-center rounded-lg border border-danger bg-danger-50 p-4 text-sm text-danger\"\n role=\"alert\"\n >\n <div className=\"flex w-full justify-between gap-6\">\n <div className=\"flex items-center\">\n <FaTimesCircle className=\"mr-2\" />\n <span className=\"font-medium\">Failed to parse JSON data</span>\n </div>\n <Button\n color=\"danger\"\n size=\"sm\"\n variant=\"light\"\n onClick={() => setShowDetails(!showDetails)}\n >\n {showDetails ? (\n <>\n <FaChevronUp /> Hide Details\n </>\n ) : (\n <>\n <FaChevronDown /> Show Details\n </>\n )}\n </Button>\n </div>\n {showDetails && (\n <div className=\"mt-4 w-full text-left\">\n <div>\n <strong>Error:</strong>\n <pre>\n {/* @ts-expect-error is ok */}\n {err?.name}: {err?.message}\n </pre>\n </div>\n <div className=\"mt-4\">\n <strong>Data:</strong>\n <pre>\n {typeof value !== 'string'\n ? JSON.stringify(value, null, 2)\n : value}\n </pre>\n </div>\n </div>\n )}\n </div>\n );\n }\n return <div className={cn(className)}>{error || content}</div>;\n};\n\nexport default Json;\n","import Json from './Json';\n\nexport type { JsonProps } from './Json';\n\nexport { Json };\n\nexport default Json;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Json/Json.tsx","../src/Json/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { useState } from 'react';\nimport { FaChevronDown, FaChevronUp, FaTimesCircle } from 'react-icons/fa';\nimport { HiOutlineClipboard, HiOutlineClipboardCheck } from 'react-icons/hi';\n\nimport JsonView from '@uiw/react-json-view';\nimport { lightTheme } from '@uiw/react-json-view/light';\nimport { vscodeTheme } from '@uiw/react-json-view/vscode';\nimport cn from 'classnames';\n\nimport Button from '../Button';\n\n/**\n * returns the value (JSON string or object) as object\n */\nconst getValue = (value: string | object) => {\n if (typeof value === 'string') {\n return JSON.parse(value);\n }\n if (typeof value === 'object') {\n return value;\n }\n throw new Error(`${typeof value} can not be visualized`);\n};\n\nexport interface JsonProps {\n /** CSS class name */\n className?: string | string[] | null;\n /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. */\n collapsed?: boolean | number;\n /** Object to be visualized JSON string or object */\n value: string | object;\n}\n\n/**\n * Json renderer based on [react-json-view](https://mac-s-g.github.io/react-json-view/demo/dist/)\n */\nconst Json = ({ className = null, collapsed = false, value }: JsonProps) => {\n const isDarkMode = document.body.classList.contains('dark');\n\n let content: ReactNode = null;\n let error: ReactNode = null;\n\n const [showDetails, setShowDetails] = useState(false);\n\n try {\n content = (\n <JsonView\n className=\"pr-5\"\n collapsed={collapsed}\n displayDataTypes={false}\n style={{\n ...(isDarkMode ? vscodeTheme : lightTheme),\n backgroundColor: 'unset',\n }}\n value={getValue(value)}\n >\n {/* FIX: overwrite Copied component to fix flickering copy button */}\n <JsonView.Copied\n render={({\n // @ts-expect-error this should be fine\n 'data-copied': copied,\n style,\n ...elmProps\n }) => {\n const elmClasses = cn(\n elmProps.className,\n 'absolute -right-4 -top-[2px] h-4 w-4 !fill-transparent pl-1',\n { 'text-success': copied },\n );\n return (\n <span className=\"relative !ml-0 !h-[1em] !w-0\" style={style}>\n {copied ? (\n <HiOutlineClipboardCheck\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...elmProps}\n className={elmClasses}\n />\n ) : (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <HiOutlineClipboard {...elmProps} className={elmClasses} />\n )}\n </span>\n );\n }}\n />\n </JsonView>\n );\n } catch (err) {\n error = (\n <div\n className=\"mb-4 flex flex-col items-center rounded-lg border border-danger bg-danger-50 p-4 text-sm text-danger\"\n role=\"alert\"\n >\n <div className=\"flex w-full justify-between gap-6\">\n <div className=\"flex items-center\">\n <FaTimesCircle className=\"mr-2\" />\n <span className=\"font-medium\">Failed to parse JSON data</span>\n </div>\n <Button\n color=\"danger\"\n size=\"sm\"\n variant=\"light\"\n onClick={() => setShowDetails(!showDetails)}\n >\n {showDetails ? (\n <>\n <FaChevronUp /> Hide Details\n </>\n ) : (\n <>\n <FaChevronDown /> Show Details\n </>\n )}\n </Button>\n </div>\n {showDetails && (\n <div className=\"mt-4 w-full text-left\">\n <div>\n <strong>Error:</strong>\n <pre>\n {/* @ts-expect-error is ok */}\n {err?.name}: {err?.message}\n </pre>\n </div>\n <div className=\"mt-4\">\n <strong>Data:</strong>\n <pre>\n {typeof value !== 'string'\n ? JSON.stringify(value, null, 2)\n : value}\n </pre>\n </div>\n </div>\n )}\n </div>\n );\n }\n return <div className={cn(className)}>{error || content}</div>;\n};\n\nexport default Json;\n","import Json from './Json';\n\nexport type { JsonProps } from './Json';\n\nexport { Json };\n\nexport default Json;\n"],"mappings":"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","names":["Json_default"]}
|