@payla-io/mantine-ui-accelerate
Version:
Collection of mantine ui components to help you accelerate your development
1,265 lines (1,236 loc) • 119 kB
JavaScript
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
var target = {};
for (var prop in source)
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
target[prop] = source[prop];
if (source != null && __getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(source)) {
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
target[prop] = source[prop];
}
return target;
};
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var __async = (__this, __arguments, generator) => {
return new Promise((resolve, reject) => {
var fulfilled = (value) => {
try {
step(generator.next(value));
} catch (e) {
reject(e);
}
};
var rejected = (value) => {
try {
step(generator.throw(value));
} catch (e) {
reject(e);
}
};
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
step((generator = generator.apply(__this, __arguments)).next());
});
};
// src/index.ts
var index_exports = {};
__export(index_exports, {
CButton: () => CButton,
CConfirmModal: () => CConfirmModal,
CCopyButton: () => CCopyButton,
CCopyValue: () => CCopyValue,
CDataFilter: () => CDataFilter,
CDataSort: () => CDataSort,
CDateInputPicker: () => CDateInputPicker,
CDetailAccordionCard: () => CDetailAccordionCard,
CDetailTable: () => CDetailTable,
CDrawer: () => CDrawer,
CDropzone: () => CDropzone,
CErrorBoundary: () => CErrorBoundary,
CFieldInput: () => CFieldInput,
CFileUpload: () => CFileUpload,
CFilterOptions: () => CFilterOptions,
CForm: () => CForm,
CFormFooter: () => CFormFooter,
CFullScreenLoader: () => CFullScreenLoader,
CIcon: () => CIcon,
CInfiniteScrollTable: () => CInfiniteScrollTable,
CItem: () => CItem,
CItemList: () => CItemList,
CItemListSection: () => CItemListSection,
CLinkList: () => CLinkList,
CLocationInput: () => CLocationInput,
CMenu: () => CMenu,
CNavLink: () => CNavLink,
CNavigations: () => CNavigations,
CPhoneInput: () => CPhoneInput,
CPopoverOptions: () => CPopoverOptions,
CRangeSlider: () => CRangeSlider,
CSearchFilterHeader: () => CSearchFilterHeader,
CSearchInput: () => CSearchInput,
CSelect: () => CSelect,
CSkeletonRow: () => CSkeletonRow,
CTableData: () => CTableData,
CTextArea: () => CTextArea,
CTextInput: () => CTextInput,
CTimeline: () => CTimeline,
CUploadedFile: () => CUploadedFile,
ClosableBadge: () => ClosableBadge,
IOrderByDirection: () => IOrderByDirection,
MIME_TYPE_MAP: () => MIME_TYPE_MAP,
conditionValidator: () => conditionValidator,
convertNumberToMonetaryValue: () => convertNumberToMonetaryValue,
currencySymbolForCode: () => currencySymbolForCode,
displayCurrency: () => displayCurrency,
fileToBase64: () => fileToBase64,
getFormattedIban: () => getFormattedIban,
isValidHttpUrl: () => isValidHttpUrl,
isValidUrl: () => isValidUrl,
openConfirmModal: () => openConfirmModal,
parseJwt: () => parseJwt,
parseMaskedDate: () => parseMaskedDate,
useFilters: () => useFilters,
usePermissions: () => usePermissions,
useUniqueOptions: () => useUniqueOptions,
validateConditions: () => validateConditions
});
module.exports = __toCommonJS(index_exports);
// src/ui/CForm/index.tsx
var import_form = require("@mantine/form");
var import_react6 = require("react");
var import_core15 = require("@mantine/core");
// src/ui/CForm/CFieldInput.tsx
var import_core13 = require("@mantine/core");
// src/ui/CForm/CRangeSlider.tsx
var import_core = require("@mantine/core");
var import_jsx_runtime = require("react/jsx-runtime");
function CRangeSlider(props) {
const _a = props, { label, description, labelProps, descriptionProps } = _a, rest = __objRest(_a, ["label", "description", "labelProps", "descriptionProps"]);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Stack, { children: [
label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, __spreadProps(__spreadValues({ size: "sm" }, labelProps), { children: label })),
description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, __spreadProps(__spreadValues({ size: "sm" }, descriptionProps), { children: description })),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_core.RangeSlider,
__spreadValues({
value: props.value,
onChange: (value) => {
if (props.onChange) props.onChange(value);
},
onChangeEnd: (value) => {
if (props.onChange) props.onChange(value);
}
}, rest)
)
] });
}
// src/ui/CForm/CTextArea.tsx
var import_core2 = require("@mantine/core");
var import_jsx_runtime2 = require("react/jsx-runtime");
function CTextArea(props) {
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.Textarea, __spreadValues({ autosize: true, minRows: 5 }, props));
}
// src/ui/CForm/CFileUpload/index.tsx
var import_core6 = require("@mantine/core");
var import_dropzone2 = require("@mantine/dropzone");
// src/ui/CForm/CFileUpload/CDropzone.tsx
var import_core4 = require("@mantine/core");
var import_dropzone = require("@mantine/dropzone");
var import_icons_react = require("@tabler/icons-react");
var import_react = __toESM(require("react"));
// src/utils/index.tsx
var import_core3 = require("@mantine/core");
var import_modals = require("@mantine/modals");
var import_jsx_runtime3 = require("react/jsx-runtime");
var openConfirmModal = (payload) => {
var _a;
return import_modals.modals.openConfirmModal({
title: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.Title, { size: "20px", children: payload.title }),
children: payload.children,
labels: (_a = payload.labels) != null ? _a : { confirm: "Confirm", cancel: "Cancel" },
onCancel: payload.onCancel,
onConfirm: payload.onConfirm
});
};
function getFormattedIban(iban) {
if (!iban) {
return "";
}
return iban.replace(/[^\dA-Z]/g, "").replace(/(.{4})/g, "$1 ").trim();
}
var fileToBase64 = (file) => __async(null, null, function* () {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
if (typeof reader.result === "string") {
resolve(reader.result);
} else {
resolve(null);
}
};
reader.onerror = (error) => reject(error);
});
});
function currencySymbolForCode(currencyCode) {
const amount = 0;
return amount.toLocaleString("en", {
style: "currency",
currency: currencyCode,
currencyDisplay: "symbol",
minimumFractionDigits: 2,
maximumFractionDigits: 2
}).replace("0.00", "");
}
function convertNumberToMonetaryValue(value, minimumFractionDigits = 2, locales) {
return value.toLocaleString(locales, {
minimumFractionDigits,
maximumFractionDigits: 2
});
}
var displayCurrency = (value, symbol = "\u20AC") => {
return `${symbol}${convertNumberToMonetaryValue(value)}`;
};
function parseJwt(token) {
const base64Url = token.split(".")[1];
const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
const jsonPayload = decodeURIComponent(
window.atob(base64).split("").map(function(c) {
return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
}).join("")
);
return JSON.parse(jsonPayload);
}
// src/ui/CForm/CFileUpload/CDropzone.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
var CDropzone = import_react.default.forwardRef(
(props, ref) => {
var _a, _b, _c;
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core4.Stack, { gap: "xs", style: { cursor: "pointer" }, children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
import_dropzone.Dropzone,
__spreadProps(__spreadValues({
openRef: ref,
onDrop: (files) => __async(null, null, function* () {
props.form.setFieldValue(
props.name,
!props.noBase64 ? yield fileToBase64(files[0]) : files[0]
);
}),
onReject: (files) => {
var _a2, _b2;
props.form.setFieldError(
props.name,
files[0].errors[0].message.includes("larger than") ? (_a2 = props.fileSizeError) != null ? _a2 : "File is larger than 2GB" : (_b2 = props.fileFormatError) != null ? _b2 : "File type not supported"
);
}
}, props.form.getInputProps(props.name)), {
maxSize: (_a = props.maxSize) != null ? _a : 2e3 * 1024 ** 2,
accept: props.fileTypes,
multiple: false,
styles: {
root: {
display: !props.show ? "none" : "flex",
flexShrink: 0,
minHeight: "150px",
padding: "16px",
gap: "16px",
backgroundColor: "var(--mantine-primary-color-0)",
borderRadius: "8px",
border: `1px dashed darkgray`
},
inner: {
display: "flex",
flex: 1,
justifyContent: "center",
alignItems: "center",
gap: "6px"
}
},
children: props.getDisplayInfo ? props.getDisplayInfo() : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core4.Stack, { children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.Text, { c: "dimmed", children: props.placeholder }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
import_core4.Group,
{
gap: "sm",
style: {
flexWrap: "nowrap"
},
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.Center, { h: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core4.Flex, { gap: "xs", children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core4.Box, { children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_dropzone.Dropzone.Reject, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react.IconX, { size: "32px", stroke: 1.5, color: "red" }) }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_dropzone.Dropzone.Idle, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react.IconUpload, { size: "32px", color: "gray" }) })
] }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core4.Box, { children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.Text, { c: "primary.9", size: "xs", children: (_b = props.userInstructions) != null ? _b : "Click to Browse or Drag & Drop file" }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
import_core4.Text,
{
ff: "Lato",
fw: 400,
lh: "15.6px",
size: "12px",
c: "primary.9",
children: (_c = props.fileSizeInfo) != null ? _c : "Max file size: 2GB"
}
),
props.error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
import_core4.Text,
{
ff: "Lato",
fw: 400,
lh: "15.6px",
size: "12px",
c: "error.4",
children: props.error
}
)
] })
] }) })
}
)
] })
})
),
!!props.form.errors[props.name] && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.Text, { ff: "Lato", fw: 400, lh: "15.6px", size: "12px", c: "red", children: props.form.errors[props.name] })
] });
}
);
CDropzone.displayName = "CDropzone";
// src/ui/CForm/CFileUpload/index.tsx
var import_react3 = require("react");
// src/ui/CForm/CFileUpload/CUploadedFile.tsx
var import_core5 = require("@mantine/core");
var import_icons_react2 = require("@tabler/icons-react");
var import_react2 = require("react");
var import_jsx_runtime5 = require("react/jsx-runtime");
var CUploadedFile = ({
componentType,
file,
handleRemoveImage,
openSelect,
error,
label = "",
changeButtonLabel = "Change",
removeButtonLabel = "Remove"
}) => {
const isFile = file instanceof File;
const [imageUrl, setImageUrl] = (0, import_react2.useState)(null);
const [isImage, setIsImage] = (0, import_react2.useState)(false);
(0, import_react2.useEffect)(() => {
const getImageUrl = () => __async(null, null, function* () {
var _a;
if (isFile) {
const base64File = yield fileToBase64(file);
setImageUrl(base64File);
setIsImage((_a = base64File == null ? void 0 : base64File.toString().includes("data:image")) != null ? _a : false);
} else {
setImageUrl(file);
setIsImage(file == null ? void 0 : file.toString().includes("data:image"));
}
});
getImageUrl();
}, [file, isFile]);
const getIcon = () => {
switch (componentType) {
case "pdfOrImage": {
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons_react2.IconFileTypePdf, { color: "var(--mantine-color-red-5)" });
}
case "file": {
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons_react2.IconFile, {});
}
case "video": {
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons_react2.IconVideo, {});
}
case "audio": {
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons_react2.IconDeviceAudioTape, {});
}
default: {
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons_react2.IconFile, {});
}
}
};
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_core5.Flex, { direction: "column", children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_core5.Stack, { gap: "sm", children: [
(componentType === "image" || componentType === "pdfOrImage") && isImage ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.Stack, { align: "center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
import_core5.Image,
{
height: 100,
fit: "contain",
alt: "file upload preview",
src: imageUrl
}
) }) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_core5.Stack, { align: "center", children: [
getIcon(),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
import_core5.Text,
{
ff: "Lato",
fw: 400,
lh: "15.6px",
size: "12px",
c: "primary.9",
ta: "center",
children: isFile && (file == null ? void 0 : file.name) ? file == null ? void 0 : file.name : label
}
)
] }),
error && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.Text, { ff: "Lato", fw: 400, size: "12px", c: "error.4", m: "md", children: error })
] }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_core5.Flex, { gap: "lg", mt: "xl", justify: "center", children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.Button, { variant: "subtle", fw: 400, onClick: openSelect, children: changeButtonLabel }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.Button, { variant: "subtle", fw: 400, c: "red.5", onClick: handleRemoveImage, children: removeButtonLabel })
] })
] });
};
// src/ui/CForm/CFileUpload/index.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
var MIME_TYPE_MAP = {
audio: ["audio/mpeg"],
video: [import_dropzone2.MIME_TYPES.mp4, "video/quicktime"],
file: [import_dropzone2.MIME_TYPES.pdf],
image: [import_dropzone2.MIME_TYPES.png, import_dropzone2.MIME_TYPES.jpeg, import_dropzone2.MIME_TYPES.svg, import_dropzone2.MIME_TYPES.gif],
all: [
import_dropzone2.MIME_TYPES.png,
import_dropzone2.MIME_TYPES.jpeg,
import_dropzone2.MIME_TYPES.svg,
import_dropzone2.MIME_TYPES.gif,
import_dropzone2.MIME_TYPES.mp4,
"video/quicktime",
"audio/mpeg",
import_dropzone2.MIME_TYPES.pdf
]
};
var CFileUpload = ({
fileTypes,
name,
form,
dropzoneProps,
getDisplayInfo,
componentType
}) => {
const openRef = (0, import_react3.useRef)(null);
const [error, setError] = (0, import_react3.useState)(null);
const handleRemoveImage = () => {
form.setFieldValue(name, "");
};
(0, import_react3.useEffect)(() => {
if (error) {
setTimeout(() => {
setError(null);
}, 5e3);
}
}, [error]);
const openSelect = () => openRef.current && openRef.current();
const file = form.values[name];
const isFile = file instanceof File;
const imageUrl = isFile ? URL.createObjectURL(file) : file;
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_core6.Box, { children: [
!!imageUrl && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
CUploadedFile,
{
file,
componentType: componentType != null ? componentType : "image",
handleRemoveImage,
openSelect,
error
}
),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
CDropzone,
__spreadValues({
setError,
getDisplayInfo,
error,
form,
fileTypes: fileTypes != null ? fileTypes : MIME_TYPE_MAP.all,
name,
ref: openRef,
show: !imageUrl
}, dropzoneProps)
)
] });
};
// src/ui/CForm/CPhoneInput.tsx
var import_core7 = require("@mantine/core");
var import_react_phone_input_2 = __toESM(require("react-phone-input-2"));
var import_style = require("react-phone-input-2/lib/style.css");
var import_jsx_runtime7 = require("react/jsx-runtime");
function CPhoneInput(props) {
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.Stack, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_phone_input_2.default, __spreadValues({ country: "de", inputStyle: { width: "100%" } }, props)) });
}
// src/ui/CForm/CheckboxInput.tsx
var import_core8 = require("@mantine/core");
var import_jsx_runtime8 = require("react/jsx-runtime");
function CheckboxInput(props) {
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core8.Checkbox.Group, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core8.Stack, { gap: "sm", children: props.data.map((option) => {
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
import_core8.Checkbox,
{
name: props.name,
value: option.value,
label: option.label,
size: "xs"
},
option.value
);
}) }) }));
}
// src/ui/CForm/CLocationInput.tsx
var import_jsx_runtime9 = require("react/jsx-runtime");
function CLocationInput(props) {
var _a, _b, _c, _d, _e, _f;
const fields = [
"street",
"house_number",
"zipcode",
"city",
"state",
"country"
];
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
CForm,
{
noFormTag: true,
data: [
{
inputType: "text",
name: "street",
initialValue: (_a = props.value) == null ? void 0 : _a.street,
inputProps: {
placeholder: "Street name"
}
},
{
inputType: "number",
label: "House number",
name: "house_number",
initialValue: (_b = props.value) == null ? void 0 : _b.house_number
},
{
inputType: "number",
label: "Zip code",
name: "zipcode",
initialValue: (_c = props.value) == null ? void 0 : _c.zipcode
},
{
inputType: "text",
label: "City",
name: "city",
initialValue: (_d = props.value) == null ? void 0 : _d.city
},
{
inputType: "text",
label: "State",
name: "state",
initialValue: (_e = props.value) == null ? void 0 : _e.state
},
{
inputType: "text",
label: "Country",
name: "country",
initialValue: (_f = props.value) == null ? void 0 : _f.country
}
],
onValueChange: (values) => {
if (fields.every((field) => values[field]) && props.value !== values) {
props.form.setFieldValue(props.name, values);
}
},
hideSubmit: true,
noFooter: props.noFooter
}
);
}
// src/ui/CForm/CSelect.tsx
var import_core9 = require("@mantine/core");
var import_jsx_runtime10 = require("react/jsx-runtime");
function CSelect(props) {
const option = props.form.values[props.name];
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
import_core9.Select,
__spreadProps(__spreadValues({}, props), {
onChange: (_, option2) => {
if (props.form && props.name) {
props.form.setFieldValue(props.name, option2);
}
},
value: option == null ? void 0 : option.value,
error: props.form.errors[props.name]
})
);
}
// src/ui/CForm/CTextInput.tsx
var import_core10 = require("@mantine/core");
var import_react_input_mask = __toESM(require("@mona-health/react-input-mask"));
var import_jsx_runtime11 = require("react/jsx-runtime");
function CTextInput(props) {
if (props.mask) {
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core10.TextInput, __spreadProps(__spreadValues({}, props), { component: import_react_input_mask.default }));
}
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core10.TextInput, __spreadValues({}, props));
}
// src/ui/CForm/CDateInputPicker.tsx
var import_core11 = require("@mantine/core");
var import_icons_react3 = require("@tabler/icons-react");
var import_dates = require("@mantine/dates");
var import_react_input_mask2 = __toESM(require("@mona-health/react-input-mask"));
var import_react4 = require("react");
var import_jsx_runtime12 = require("react/jsx-runtime");
var parseMaskedDate = (dateString, partSplit) => {
if (!dateString || dateString.includes("_")) return /* @__PURE__ */ new Date();
const parts = dateString.split(partSplit);
const day = parseInt(parts[0], 10);
const month = parseInt(parts[1], 10) - 1;
const year = parseInt(parts[2], 10);
return new Date(year, month, day);
};
function CDateInputPicker(props) {
const _a = props, { pickerProps, formatDate, maskSeparator } = _a, rest = __objRest(_a, ["pickerProps", "formatDate", "maskSeparator"]);
const value = props.form.values[props.name];
const [dateValue, setDateValue] = (0, import_react4.useState)();
(0, import_react4.useEffect)(() => {
if (value) {
setDateValue(parseMaskedDate(value, maskSeparator != null ? maskSeparator : "/"));
}
}, [value]);
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
import_core11.TextInput,
__spreadValues({
component: import_react_input_mask2.default,
rightSection: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core11.Popover, { width: 200, position: "bottom", withArrow: true, shadow: "md", children: [
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Popover.Target, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.ActionIcon, { variant: "subtle", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons_react3.IconCalendar, {}) }) }),
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Popover.Dropdown, { w: "290px", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
import_dates.DatePicker,
__spreadProps(__spreadValues({}, pickerProps), {
value: dateValue,
date: dateValue,
onDateChange: (val) => setDateValue(new Date(val)),
onChange: (v) => {
setDateValue(new Date(v));
if (props.form && props.name) {
props.form.setFieldValue(
props.name,
formatDate ? formatDate(v == null ? void 0 : v.toString()) : v == null ? void 0 : v.toString()
);
}
}
})
) })
] })
}, rest)
) });
}
// src/ui/CForm/CFieldInput.tsx
var import_dates2 = require("@mantine/dates");
// src/ui/CButtonOptions.tsx
var import_core12 = require("@mantine/core");
var import_jsx_runtime13 = require("react/jsx-runtime");
function CButtonOptions({
options,
value,
label,
onChange,
direction = "horizontal",
buttonProps,
labelProps
}) {
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
label && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, __spreadProps(__spreadValues({}, labelProps), { children: label })),
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.ButtonGroup, { orientation: direction, children: options == null ? void 0 : options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
import_core12.Button,
__spreadProps(__spreadValues({
variant: value === option.value ? "filled" : "light",
onClick: () => onChange == null ? void 0 : onChange(option.value)
}, buttonProps), {
children: option.label
}),
option.value
)) })
] });
}
// src/ui/CForm/CFieldInput.tsx
var import_jsx_runtime14 = require("react/jsx-runtime");
var componentMap = {
text: CTextInput,
textarea: CTextArea,
email: import_core13.TextInput,
number: import_core13.NumberInput,
image: CFileUpload,
file: CFileUpload,
phone: CPhoneInput,
password: import_core13.PasswordInput,
date_mask: CDateInputPicker,
date: import_dates2.DatePickerInput,
select: CSelect,
multi_select: import_core13.MultiSelect,
range: CRangeSlider,
checkbox: CheckboxInput,
location: CLocationInput,
switch: import_core13.Switch,
button_options: CButtonOptions
};
function CFieldInput(props) {
var _a;
const FieldComponent = componentMap[props.inputType];
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Stack, __spreadProps(__spreadValues({ align: props.align }, props.containerProps), { children: [
props.label && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Text, { size: "md", children: props.label }),
props.description && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Text, { size: "xs", c: "dimmed", children: props.description }),
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Box, { children: [
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
FieldComponent,
__spreadValues(__spreadValues({
name: props.name,
form: props.formInstance
}, (_a = props.formInstance) == null ? void 0 : _a.getInputProps(props.name)), props.inputProps)
),
props.helpText && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Text, { size: "xs", c: "dimmed", m: "0", children: props.helpText }),
props.infoText
] })
] }));
}
// src/ui/CForm/CFormFooter.tsx
var import_core14 = require("@mantine/core");
var import_react5 = require("react");
var import_jsx_runtime15 = require("react/jsx-runtime");
function CFormFooter(props) {
var _a, _b, _c, _d;
const [buttonType, setButtonType] = (0, import_react5.useState)("submit");
const formName = props.data.name;
const lastQuestion = props.currentIndex === props.totalQuestions || !props.singleQuestion;
(0, import_react5.useEffect)(() => {
if (lastQuestion) {
setTimeout(() => {
setButtonType("submit");
}, 500);
} else {
setButtonType("button");
}
}, [lastQuestion]);
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Flex, __spreadProps(__spreadValues({ justify: "right", w: "100%", gap: "xs" }, props.containerProps), { children: [
props.singleQuestion && props.currentIndex > 0 && !props.disableBack && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
import_core14.Button,
__spreadProps(__spreadValues({
onClick: () => {
props.handleBack();
setButtonType("button");
},
type: "button"
}, props.backButtonProps), {
children: (_a = props.backLabel) != null ? _a : "Back"
})
),
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Flex, __spreadProps(__spreadValues({ justify: "right" }, props.submitButtonContainerProps), { children: [
props.singleQuestion && !props.data.inputProps.required && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
import_core14.Button,
__spreadProps(__spreadValues({
variant: "subtle",
onClick: () => {
props.handleContinue();
},
mr: "sm"
}, props.skipButtonProps), {
children: (_b = props.backLabel) != null ? _b : "Skip"
})
),
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
import_core14.Button,
__spreadProps(__spreadValues({
onClick: () => {
if (props.singleQuestion) {
props.formInstance.validateField(formName);
if (props.formInstance.isValid(formName) || props.data.inputType === "label") {
props.handleContinue();
}
}
},
type: !props.singleQuestion ? "submit" : buttonType,
loading: props.isPending
}, props.submitButtonProps), {
children: !props.singleQuestion || lastQuestion ? (_c = props.submitLabel) != null ? _c : "Save" : (_d = props.continueLabel) != null ? _d : "Continue"
})
)
] }))
] }));
}
// src/utils/conditions.ts
function isValidUrl(value) {
const pattern = new RegExp(
"^([a-zA-Z]+:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_.~+=-]*)?(\\#[-a-z\\d_]*)?$"
);
return pattern.test(value);
}
var isValidHttpUrl = (value) => {
if (!value || value.length === 0) return false;
try {
return isValidUrl(value) || new URL(value).protocol === "http:" || new URL(value).protocol === "https:";
} catch (_) {
return false;
}
};
var conditionValidator = {
is_equal_to: (currentValue, conditionValue) => {
return conditionValue == currentValue;
},
is_not_equal_to: (currentValue, conditionValue) => {
return conditionValue != currentValue;
},
is_greater_than: (currentValue, conditionValue) => {
return Number(currentValue) > Number(conditionValue);
},
is_greater_than_or_equal_to: (currentValue, conditionValue) => {
return Number(currentValue) >= Number(conditionValue);
},
is_less_than: (currentValue, conditionValue) => {
return Number(currentValue) < Number(conditionValue);
},
is_less_than_or_equal_to: (currentValue, conditionValue) => {
return Number(currentValue) <= Number(conditionValue);
},
options_in: (currentValue, options) => {
if (currentValue instanceof Array) {
return currentValue == null ? void 0 : currentValue.some((value) => options.includes(value));
}
return options.includes(currentValue);
},
options_not_in: (currentValue, options) => {
if (currentValue instanceof Array) {
return currentValue == null ? void 0 : currentValue.every((value) => !options.includes(value));
}
return !options.includes(currentValue);
},
is_character_length_greater_than_or_equal_to: (currentValue, conditionValue) => {
return (currentValue == null ? void 0 : currentValue.toString().length) >= conditionValue;
},
is_character_length_less_than_or_equal_to: (currentValue, conditionValue) => {
return (currentValue == null ? void 0 : currentValue.toString().length) <= conditionValue;
},
is_word_length_greater_than_or_equal_to: (currentValue, conditionValue) => {
return (currentValue == null ? void 0 : currentValue.split(" ").length) >= conditionValue;
},
is_word_length_less_than_or_equal_to: (currentValue, conditionValue) => {
return (currentValue == null ? void 0 : currentValue.split(" ").length) <= conditionValue;
},
contains: (currentValue, conditionValue) => {
var _a;
return (_a = currentValue == null ? void 0 : currentValue.toLowerCase()) == null ? void 0 : _a.includes(conditionValue);
},
not_contains: (currentValue, conditionValue) => {
var _a;
return !((_a = currentValue == null ? void 0 : currentValue.toLowerCase()) == null ? void 0 : _a.includes(conditionValue));
},
starts_with: (currentValue, conditionValue) => {
var _a;
return (_a = currentValue == null ? void 0 : currentValue.toLowerCase()) == null ? void 0 : _a.startsWith(conditionValue);
},
ends_with: (currentValue, conditionValue) => {
var _a;
return (_a = currentValue == null ? void 0 : currentValue.toLowerCase()) == null ? void 0 : _a.endsWith(conditionValue);
},
options_length_equal_to: (currentValue, conditionValue) => {
return (currentValue == null ? void 0 : currentValue.length) == conditionValue;
},
options_length_greater_than: (currentValue, conditionValue) => {
return (currentValue == null ? void 0 : currentValue.length) > conditionValue;
},
options_length_greater_than_or_equal_to: (currentValue, conditionValue) => {
return (currentValue == null ? void 0 : currentValue.length) >= conditionValue;
},
options_length_less_than: (currentValue, conditionValue) => {
return (currentValue == null ? void 0 : currentValue.length) < conditionValue;
},
options_length_less_than_or_equal_to: (currentValue, conditionValue) => {
return (currentValue == null ? void 0 : currentValue.length) <= conditionValue;
},
is_url: (currentValue) => {
return isValidHttpUrl(currentValue);
},
is_not_empty: (currentValue) => {
if (currentValue instanceof Array || typeof currentValue === "string") {
return currentValue.length > 0;
}
return !!currentValue;
}
};
var comparisonMap = {
is_equal_to: "should be equal to",
is_not_empty: "should not be empty",
is_not_equal_to: "should be not equal to",
is_greater_than: "should be greater than",
is_greater_than_or_equal_to: "should be greater than or equal to",
is_less_than: "should be less than",
is_less_than_or_equal_to: "should be less than or equal to",
options_in: "should be in",
options_not_in: "should be not in",
is_character_length_greater_than_or_equal_to: "character length should be greater than or equal to",
is_character_length_less_than_or_equal_to: "character length should be less than or equal to",
is_word_length_greater_than_or_equal_to: "word length should be greater than or equal to",
is_word_length_less_than_or_equal_to: "word length should be less than or equal to",
contains: "should contain",
not_contains: "should not contain",
starts_with: "should start with",
ends_with: "should end with",
options_length_equal_to: "options length should be equal to",
options_length_greater_than: "options length should be greater than",
options_length_greater_than_or_equal_to: "options length should be greater than or equal to",
options_length_less_than: "options length should be less than",
options_length_less_than_or_equal_to: "options length should be less than or equal to",
is_url: "Please enter a valid url",
response_count_less_than_or_equal: "count should be less than or equal to"
};
var buildErrorText = (comparison, conditionValue, conditionOptions) => {
const comparisonText = comparisonMap[comparison];
if (comparison === "options_in" || comparison === "options_not_in") {
return `Response ${comparisonText} [${conditionOptions.join(", ")}]`;
} else if (comparison === "is_url") {
return `${comparisonText}`;
}
return `Response ${comparisonText} ${conditionValue}`;
};
var validateConditions = (conditions, values) => {
let result = null;
const failed = [];
conditions.forEach((c) => {
var _a, _b, _c;
const method = conditionValidator[c.method];
const logic = c.logic;
if (method) {
let currentValue = values[c.formName];
if (c.getCurrentValue) {
currentValue = c.getCurrentValue();
}
const conditionOptions = (_a = c.options) == null ? void 0 : _a.map((o) => o.value);
const conditionOptionsTitle = (_b = c.options) == null ? void 0 : _b.map((o) => o.label);
const conditionValue = c.value;
const conditionWithOptions = ["options_in", "options_not_in"].includes(
c.method
);
let currentResult = null;
if (c.validate) {
currentResult = c.validate(currentValue, values);
} else {
currentResult = conditionWithOptions ? method(currentValue, conditionOptions) : method(currentValue, conditionValue);
}
if (!currentResult) {
failed.push(
(_c = c.failedMessage) != null ? _c : buildErrorText(c.method, conditionValue, conditionOptionsTitle)
);
}
if (result === null) {
result = currentResult;
} else {
if (logic === "and") {
result = result && currentResult;
} else {
result = result || currentResult;
}
}
}
});
return { isValid: result || result === null, failed };
};
// src/ui/CForm/index.tsx
var import_jsx_runtime16 = require("react/jsx-runtime");
function CForm(props) {
var _a, _b;
const [currentIndex, setCurrentIndex] = (0, import_react6.useState)((_a = props.currentIndex) != null ? _a : 0);
const formRef = (0, import_react6.useRef)(null);
const onValueChangeTimoutRef = (0, import_react6.useRef)(null);
const isResettingRef = (0, import_react6.useRef)(false);
const getDefaultValues = (field) => {
var _a2;
if (["select", "multi_select"].includes(field.inputType)) {
return [];
} else if (["range"].includes(field.inputType)) {
return [0, 0];
} else if (["location"].includes(field.inputType)) {
return {};
} else if (field.inputType === "date") {
if (((_a2 = field.inputProps) == null ? void 0 : _a2.type) === "range") return [null, null];
return null;
}
return "";
};
const getInitialValues = () => {
const initialValues = {};
props.data.forEach((field) => {
var _a2;
initialValues[field.name] = (_a2 = field.initialValue) != null ? _a2 : getDefaultValues(field);
});
return initialValues;
};
const getValidations = () => {
const data = {};
props.data.forEach((field) => {
data[field.name] = (value, values) => {
var _a2, _b2, _c, _d, _e, _f;
const message = (0, import_form.isNotEmpty)(
(_b2 = (_a2 = props.errorMessages) == null ? void 0 : _a2.required) != null ? _b2 : "This field is required"
)(value);
if (((_c = field.inputProps) == null ? void 0 : _c.required) && message) {
return message;
}
if (field.inputType === "email" && value) {
return (0, import_form.isEmail)((_e = (_d = props.errorMessages) == null ? void 0 : _d.invalidEmail) != null ? _e : "Invalid email")(
value
);
}
const { isValid, failed } = validateConditions(
(_f = field.valueConditions) != null ? _f : [],
values
);
if (!isValid) {
return failed.join(", ");
}
if (field.validate) {
return field.validate(value, values);
}
return null;
};
});
return data;
};
const fmk = (0, import_form.useForm)({
initialValues: getInitialValues(),
validate: getValidations(),
validateInputOnChange: true
});
const additionalProps = {};
if (!props.noFormTag) {
additionalProps.onSubmit = fmk.onSubmit(() => {
if (props.onSubmit) props.onSubmit(fmk.values);
});
}
const handleBack = () => {
if (currentIndex > 0) {
setCurrentIndex(currentIndex - 1);
}
};
const handleContinue = () => {
if (currentIndex < props.data.length - 1) {
setCurrentIndex(currentIndex + 1);
}
};
(0, import_react6.useEffect)(() => {
window.addEventListener("keypress", function(e) {
if (e.key === "Enter") {
setCurrentIndex((currentIndex2) => {
const currentData = props.data[currentIndex2];
fmk.validateField(currentData.name);
if (fmk.isValid(currentData.name)) {
if (currentIndex2 < props.data.length - 1) {
return currentIndex2 + 1;
} else if (props.onSubmit) {
fmk.validate();
if (fmk.isValid()) formRef.current.requestSubmit();
}
}
return currentIndex2;
});
}
});
if (props.setFormInstance) props.setFormInstance(fmk);
}, []);
(0, import_react6.useEffect)(() => {
if (onValueChangeTimoutRef.current) {
clearTimeout(onValueChangeTimoutRef.current);
}
if (!isResettingRef.current) {
onValueChangeTimoutRef.current = setTimeout(() => {
if (props.onValueChange) props.onValueChange(fmk.values);
}, 500);
}
}, [fmk.values]);
(0, import_react6.useEffect)(() => {
if (props.onCurrentIndexChange) props.onCurrentIndexChange(currentIndex);
}, [currentIndex]);
(0, import_react6.useEffect)(() => {
if (props.refreshSeed) {
isResettingRef.current = true;
fmk.setValues(getInitialValues());
setTimeout(() => {
isResettingRef.current = false;
}, 100);
}
}, [props.refreshSeed]);
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
import_core15.Box,
__spreadProps(__spreadValues({
component: props.noFormTag ? "div" : "form",
ref: formRef
}, additionalProps), {
style: { height: props.fullHeight ? "95%" : "auto" },
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
import_core15.Stack,
__spreadProps(__spreadValues({
gap: "md",
justify: "space-between",
h: "100%",
p: "md"
}, props.formContainerProps), {
children: [
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.Grid, { grow: props.grow, gutter: (_b = props.gutter) != null ? _b : 10, children: props.data.map((field, index) => {
var _b2, _c, _d, _e, _f, _g, _h;
const _a2 = field, { span, hidden } = _a2, fieldInputProps = __objRest(_a2, ["span", "hidden"]);
if (hidden || field.inputType === "label") return null;
const { isValid } = validateConditions(
(_b2 = field.visibilityConditions) != null ? _b2 : [],
(_c = fmk.values) != null ? _c : {}
);
if (!isValid) return null;
if (props.singleQuestion && currentIndex !== index) return null;
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
import_core15.Grid.Col,
{
span,
px: 0,
"data-cy": `cform-${(_h = (_f = (_d = fieldInputProps.inputProps) == null ? void 0 : _d.name) != null ? _f : (_e = fieldInputProps.inputProps) == null ? void 0 : _e.placeholder) != null ? _h : (_g = fieldInputProps.inputProps) == null ? void 0 : _g.label}`,
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
CFieldInput,
__spreadValues(__spreadValues({
formInstance: fmk
}, fieldInputProps), props.inputFieldContainerProps)
)
},
field.name
);
}) }),
!props.noFooter && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
import_core15.Flex,
__spreadProps(__spreadValues({
p: "xl",
style: {
position: props.fixedFooter ? "fixed" : "relative",
bottom: 0,
left: 0,
zIndex: props.fixedFooter ? 9 : 0
},
justify: "center",
w: "100%",
bg: "var(--mantine-primary-color-0)"
}, props.footerContainerWrapperProps), {
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
import_core15.Flex,
__spreadProps(__spreadValues({
w: { base: "100%", sm: 720 },
justify: "right"
}, props.footerContainerProps), {
children: !props.hideSubmit && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: props.getSubmitComponent ? props.getSubmitComponent(fmk) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
CFormFooter,
{
currentIndex,
handleContinue,
handleBack,
singleQuestion: props.singleQuestion,
data: props.data[currentIndex],
totalQuestions: props.data.length - 1,
formInstance: fmk,
isPending: props.isPending,
submitButtonContainerProps: props.submitButtonContainerProps,
containerProps: props.footerContainerProps,
submitButtonProps: props.submitButtonProps,
backButtonProps: props.backButtonProps,
submitLabel: props.submitLabel,
continueLabel: props.continueLabel,
skipLabel: props.skipLabel,
disableBack: props.disableBack
}
) })
})
)
})
)
]
})
)
})
);
}
// src/ui/CForm/CButton.tsx
var import_core16 = require("@mantine/core");
var import_jsx_runtime17 = require("react/jsx-runtime");
function CButton(props) {
const _a = props, { label } = _a, rest = __objRest(_a, ["label"]);
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Button, __spreadProps(__spreadValues({}, rest), { children: label }));
}
// src/ui/CForm/CSearchInput.tsx
var import_core17 = require("@mantine/core");
var import_icons_react4 = require("@tabler/icons-react");
var import_jsx_runtime18 = require("react/jsx-runtime");
function CSearchInput(props) {
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
import_core17.TextInput,
__spreadValues({
flex: 1,
w: "100%",
onChange: (event) => {
if (props.onChange) {
props.onChange(event.currentTarget.value);
}
},
value: props.value,
rightSection: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.ActionIcon, { variant: "subtle", onClick: props.onClick, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons_react4.IconSearch, {}) }),
radius: "xl"
}, props.inputProps)
);
}
// src/ui/CTableData/index.tsx
var import_core23 = require("@mantine/core");
// src/ui/CDataSort.tsx
var import_core18 = require("@mantine/core");
var import_icons_react5 = require("@tabler/icons-react");
var import_react7 = require("react");
var import_jsx_runtime19 = require("react/jsx-runtime");
var IOrderByDirection = /* @__PURE__ */ ((IOrderByDirection2) => {
IOrderByDirection2["asc"] = "asc";
IOrderByDirection2["desc"] = "desc";
return IOrderByDirection2;
})(IOrderByDirection || {});
function CDataSort({
column,
orderBy,
descIndicator,
ascIndicator,
onChange