@cripty2001/utils 0.0.106 → 0.0.108
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/react-ui/form.d.ts +3 -2
- package/dist/react-ui/form.js +4 -4
- package/dist/react-ui/input.js +4 -4
- package/dist/react-ui/loader.js +24 -3
- package/dist/react-ui/modal.js +35 -1
- package/dist/react-ui/table.js +25 -4
- package/package.json +1 -1
package/dist/react-ui/form.d.ts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { InputComponentPropsVariants } from "./input";
|
|
2
|
-
export type FormComponentPropsInput = {
|
|
2
|
+
export type FormComponentPropsInput<V extends InputComponentPropsVariants> = {
|
|
3
3
|
label: string;
|
|
4
4
|
required: boolean;
|
|
5
5
|
key: string;
|
|
6
|
+
variant: keyof V;
|
|
6
7
|
} & ({
|
|
7
8
|
type: "text" | "email" | "password" | "tel";
|
|
8
9
|
} | {
|
|
@@ -10,7 +11,7 @@ export type FormComponentPropsInput = {
|
|
|
10
11
|
options: string[];
|
|
11
12
|
});
|
|
12
13
|
export type FormComponentProps<T extends Record<string, string>, V extends InputComponentPropsVariants> = {
|
|
13
|
-
inputs: FormComponentPropsInput[];
|
|
14
|
+
inputs: FormComponentPropsInput<V>[];
|
|
14
15
|
onSubmit: (values: T) => void;
|
|
15
16
|
submitLabel: string;
|
|
16
17
|
value: T;
|
package/dist/react-ui/form.js
CHANGED
|
@@ -8,7 +8,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
8
8
|
const button_1 = __importDefault(require("./button"));
|
|
9
9
|
const input_1 = __importDefault(require("./input"));
|
|
10
10
|
function FormComponent(props) {
|
|
11
|
-
return ((0, jsx_runtime_1.jsxs)("div", {
|
|
11
|
+
return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [props.inputs.map(input => (() => {
|
|
12
12
|
const value = props.value[input.key];
|
|
13
13
|
const setValue = (v) => props.setValue(prev => ({
|
|
14
14
|
...prev,
|
|
@@ -19,14 +19,14 @@ function FormComponent(props) {
|
|
|
19
19
|
case "email":
|
|
20
20
|
case "password":
|
|
21
21
|
case "tel":
|
|
22
|
-
return (0, jsx_runtime_1.jsx)(input_1.default, { label: input.label, value: value, setValue: setValue, variant:
|
|
22
|
+
return (0, jsx_runtime_1.jsx)(input_1.default, { label: input.label, value: value, setValue: setValue, variant: input.variant, variants: props.variants, children: ({ value, setValue, className }) => ((0, jsx_runtime_1.jsx)("input", { type: input.type, value: value, onChange: (e) => setValue(e.target.value), required: input.required, className: className, placeholder: input.label })) });
|
|
23
23
|
case "select":
|
|
24
|
-
return (0, jsx_runtime_1.jsx)(input_1.default, { label: input.label, value: value, setValue: setValue, variant:
|
|
24
|
+
return (0, jsx_runtime_1.jsx)(input_1.default, { label: input.label, value: value, setValue: setValue, variant: input.variant, variants: props.variants, required: input.required, validate: (v) => {
|
|
25
25
|
if (!input.options.includes(v))
|
|
26
26
|
throw new Error("Invalid option");
|
|
27
27
|
}, children: ({ value, setValue, className }) => ((0, jsx_runtime_1.jsx)("select", { value: value, onChange: (e) => setValue(e.target.value), required: input.required, className: className, children: input.options.map(option => ((0, jsx_runtime_1.jsx)("option", { value: option, children: option }, option))) })) });
|
|
28
28
|
default:
|
|
29
|
-
return (0, jsx_runtime_1.jsx)("div", {
|
|
29
|
+
return (0, jsx_runtime_1.jsx)("div", { style: { color: '#ef4444', backgroundColor: 'white' }, children: "Unknown input type" });
|
|
30
30
|
}
|
|
31
31
|
})()), (0, jsx_runtime_1.jsx)(button_1.default, { title: props.submitLabel, onClick: () => props.onSubmit(props.value) })] }));
|
|
32
32
|
}
|
package/dist/react-ui/input.js
CHANGED
|
@@ -9,9 +9,9 @@ function InputComponent(props) {
|
|
|
9
9
|
const variant = props.variant;
|
|
10
10
|
const baseClassName = props.variants[variant ?? "default"];
|
|
11
11
|
const [error, setError] = (0, react_1.useState)(null);
|
|
12
|
-
return ((0, jsx_runtime_1.jsxs)("div", {
|
|
13
|
-
(0, jsx_runtime_1.jsx)("label", {
|
|
14
|
-
(0, jsx_runtime_1.jsx)(lucide_react_1.CopyIcon, {
|
|
12
|
+
return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.5rem' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: '0.5rem' }, children: [props.label &&
|
|
13
|
+
(0, jsx_runtime_1.jsx)("label", { style: { display: 'block', marginBottom: '0.25rem', fontSize: '0.875rem', fontWeight: 500, color: '#374151' }, children: props.label }), props.copy &&
|
|
14
|
+
(0, jsx_runtime_1.jsx)(lucide_react_1.CopyIcon, { style: { width: '1rem', height: '1rem', cursor: 'pointer' }, onClick: () => (0, index_1.copyToClipboard)(props.value) })] }), (0, jsx_runtime_1.jsx)("div", { style: { position: 'relative' }, children: props.children({
|
|
15
15
|
value: props.value,
|
|
16
16
|
setValue: (v) => {
|
|
17
17
|
try {
|
|
@@ -27,5 +27,5 @@ function InputComponent(props) {
|
|
|
27
27
|
},
|
|
28
28
|
className: baseClassName
|
|
29
29
|
}) }), error &&
|
|
30
|
-
(0, jsx_runtime_1.jsx)("div", {
|
|
30
|
+
(0, jsx_runtime_1.jsx)("div", { style: { color: '#ef4444', fontSize: '0.75rem' }, children: error })] }));
|
|
31
31
|
}
|
package/dist/react-ui/loader.js
CHANGED
|
@@ -3,14 +3,35 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.default = Loader;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const react_whispr_1 = require("../react-whispr");
|
|
6
|
+
const spinKeyframes = `
|
|
7
|
+
@keyframes spin {
|
|
8
|
+
from { transform: rotate(0deg); }
|
|
9
|
+
to { transform: rotate(360deg); }
|
|
10
|
+
}
|
|
11
|
+
`;
|
|
12
|
+
if (typeof document !== 'undefined') {
|
|
13
|
+
const style = document.createElement('style');
|
|
14
|
+
style.textContent = spinKeyframes;
|
|
15
|
+
if (!document.head.querySelector('style[data-spin-keyframes]')) {
|
|
16
|
+
style.setAttribute('data-spin-keyframes', 'true');
|
|
17
|
+
document.head.appendChild(style);
|
|
18
|
+
}
|
|
19
|
+
}
|
|
6
20
|
function Loader(props) {
|
|
7
21
|
const data = (0, react_whispr_1.useWhisprValue)(props.data.data);
|
|
8
|
-
return ((0, jsx_runtime_1.jsx)("div", {
|
|
22
|
+
return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Content, { data: data, children: (data) => props.children(data) }) }));
|
|
9
23
|
}
|
|
10
24
|
function Content({ data, children }) {
|
|
11
25
|
if (data.loading)
|
|
12
|
-
return ((0, jsx_runtime_1.jsx)("div", {
|
|
26
|
+
return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh' }, children: (0, jsx_runtime_1.jsx)("div", { style: {
|
|
27
|
+
animation: 'spin 1s linear infinite',
|
|
28
|
+
borderRadius: '9999px',
|
|
29
|
+
height: '3rem',
|
|
30
|
+
width: '3rem',
|
|
31
|
+
borderTop: '2px solid #111827',
|
|
32
|
+
borderBottom: '2px solid #111827'
|
|
33
|
+
} }) }));
|
|
13
34
|
if (!data.ok)
|
|
14
|
-
return (0, jsx_runtime_1.jsx)("div", {
|
|
35
|
+
return (0, jsx_runtime_1.jsx)("div", { style: { color: '#ef4444' }, children: data.error.message });
|
|
15
36
|
return children(data.data);
|
|
16
37
|
}
|
package/dist/react-ui/modal.js
CHANGED
|
@@ -4,6 +4,26 @@ exports.default = ModalComponent;
|
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const react_1 = require("react");
|
|
6
6
|
const react_whispr_1 = require("../react-whispr");
|
|
7
|
+
const slideUpKeyframes = `
|
|
8
|
+
@keyframes slide-up {
|
|
9
|
+
from {
|
|
10
|
+
transform: translateY(20px);
|
|
11
|
+
opacity: 0;
|
|
12
|
+
}
|
|
13
|
+
to {
|
|
14
|
+
transform: translateY(0);
|
|
15
|
+
opacity: 1;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
`;
|
|
19
|
+
if (typeof document !== 'undefined') {
|
|
20
|
+
const style = document.createElement('style');
|
|
21
|
+
style.textContent = slideUpKeyframes;
|
|
22
|
+
if (!document.head.querySelector('style[data-slide-up-keyframes]')) {
|
|
23
|
+
style.setAttribute('data-slide-up-keyframes', 'true');
|
|
24
|
+
document.head.appendChild(style);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
7
27
|
let modalCount = 0;
|
|
8
28
|
function ModalComponent(props) {
|
|
9
29
|
const zIndex = (0, react_1.useRef)(1000 + modalCount++).current;
|
|
@@ -11,5 +31,19 @@ function ModalComponent(props) {
|
|
|
11
31
|
const [open, setOpen] = (0, react_whispr_1.useSynced)(true, props.open, props.setOpen);
|
|
12
32
|
if (!open)
|
|
13
33
|
return null;
|
|
14
|
-
return ((0, jsx_runtime_1.jsx)("div", { id: id,
|
|
34
|
+
return ((0, jsx_runtime_1.jsx)("div", { id: id, style: {
|
|
35
|
+
position: 'fixed',
|
|
36
|
+
top: 0,
|
|
37
|
+
left: 0,
|
|
38
|
+
right: 0,
|
|
39
|
+
bottom: 0,
|
|
40
|
+
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
|
41
|
+
display: 'flex',
|
|
42
|
+
alignItems: 'center',
|
|
43
|
+
justifyContent: 'center',
|
|
44
|
+
padding: '1.5rem',
|
|
45
|
+
height: '100vh',
|
|
46
|
+
width: '100vw',
|
|
47
|
+
zIndex: zIndex
|
|
48
|
+
}, onClick: () => setOpen(false), children: (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: '100%', animation: 'slide-up 0.3s ease-out' }, onClick: (e) => e.stopPropagation(), children: props.children }) }));
|
|
15
49
|
}
|
package/dist/react-ui/table.js
CHANGED
|
@@ -4,9 +4,30 @@ exports.default = Table;
|
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
function Table({ value, headers }) {
|
|
6
6
|
if (value.length === 0) {
|
|
7
|
-
return ((0, jsx_runtime_1.jsx)("div", {
|
|
7
|
+
return ((0, jsx_runtime_1.jsx)("div", { style: { textAlign: 'center', paddingTop: '2rem', paddingBottom: '2rem', color: '#4b5563' }, children: "No data found" }));
|
|
8
8
|
}
|
|
9
|
-
return ((0, jsx_runtime_1.jsx)("div", {
|
|
10
|
-
|
|
11
|
-
:
|
|
9
|
+
return ((0, jsx_runtime_1.jsx)("div", { style: { backgroundColor: 'white', borderRadius: '0.5rem', boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', overflow: 'hidden' }, children: (0, jsx_runtime_1.jsx)("div", { style: { overflowX: 'auto' }, children: (0, jsx_runtime_1.jsxs)("table", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)("thead", { style: { backgroundColor: '#f3f4f6' }, children: (0, jsx_runtime_1.jsx)("tr", { children: headers.map((header, index) => ((0, jsx_runtime_1.jsx)("th", { style: {
|
|
10
|
+
paddingLeft: '1.5rem',
|
|
11
|
+
paddingRight: '1.5rem',
|
|
12
|
+
paddingTop: '0.75rem',
|
|
13
|
+
paddingBottom: '0.75rem',
|
|
14
|
+
textAlign: 'left',
|
|
15
|
+
fontSize: '0.75rem',
|
|
16
|
+
fontWeight: 500,
|
|
17
|
+
color: '#6b7280',
|
|
18
|
+
textTransform: 'uppercase',
|
|
19
|
+
letterSpacing: '0.05em'
|
|
20
|
+
}, children: header }, index))) }) }), (0, jsx_runtime_1.jsx)("tbody", { style: { backgroundColor: 'white' }, children: value.map((row, rowIndex) => ((0, jsx_runtime_1.jsx)("tr", { style: {
|
|
21
|
+
borderTop: rowIndex > 0 ? '1px solid #e5e7eb' : 'none',
|
|
22
|
+
transition: 'background-color 0.15s ease-in-out'
|
|
23
|
+
}, onMouseEnter: (e) => { e.currentTarget.style.backgroundColor = '#f9fafb'; }, onMouseLeave: (e) => { e.currentTarget.style.backgroundColor = 'white'; }, children: row.map((cell, cellIndex) => ((0, jsx_runtime_1.jsx)("td", { style: {
|
|
24
|
+
paddingLeft: '1.5rem',
|
|
25
|
+
paddingRight: '1.5rem',
|
|
26
|
+
paddingTop: '1rem',
|
|
27
|
+
paddingBottom: '1rem',
|
|
28
|
+
whiteSpace: 'nowrap',
|
|
29
|
+
fontSize: '0.875rem',
|
|
30
|
+
fontWeight: cellIndex === 0 ? 500 : 400,
|
|
31
|
+
color: cellIndex === 0 ? '#111827' : '#4b5563'
|
|
32
|
+
}, children: cell }, cellIndex))) }, rowIndex))) })] }) }) }));
|
|
12
33
|
}
|
package/package.json
CHANGED