@explita/daily-toolset-components
Version:
A lightweight and versatile collection of TypeScript utility functions and form components, inspired by ShadCN UI, designed for seamless everyday development. Enhance your Node.js, React, and Next.js projects with a well-structured suite of helpers for st
119 lines (118 loc) • 7.34 kB
JavaScript
"use client";
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormInput = FormInput;
const react_1 = __importStar(require("react"));
const bs_1 = require("react-icons/bs");
const input_1 = require("../ui/input");
const popover_1 = require("../ui/popover");
const FormLabel_1 = require("./FormLabel");
const lu_1 = require("react-icons/lu");
const io_1 = require("react-icons/io");
const InputError_1 = require("./InputError");
const FormDateInput_1 = require("./FormDateInput");
const daily_toolset_hooks_1 = require("@explita/daily-toolset-hooks");
const useField_1 = require("../hooks/useField");
function FormInput(props) {
var _a;
const { isRequired = true, isDisabled = false, label, type = "text", name, error, defaultValue, onChange, showError = true, leftSection, classNames = {}, ...rest } = props;
const { fieldError, fieldValue, setValue } = (0, useField_1.useField)(name);
const id = (0, react_1.useId)();
const errorData = error ? error : fieldError || "";
const inputValue = defaultValue ? defaultValue : (_a = fieldValue) !== null && _a !== void 0 ? _a : "";
return (react_1.default.createElement("div", { className: "explita-input-root" },
react_1.default.createElement(FormLabel_1.Label, { id: id, label: label, isRequired: isRequired, className: classNames === null || classNames === void 0 ? void 0 : classNames.label }),
react_1.default.createElement("div", null,
leftSection && react_1.default.createElement("span", { className: "left-section" }, leftSection),
react_1.default.createElement(input_1.Input, { id: id, name: name, type: type, disabled: isDisabled, defaultValue: inputValue, "data-error": errorData.length > 0, onChange: (e) => {
onChange === null || onChange === void 0 ? void 0 : onChange(e);
setValue(e.target.value);
}, className: `${leftSection ? "has-left-section" : ""} ${classNames === null || classNames === void 0 ? void 0 : classNames.input}`, ...rest })),
react_1.default.createElement(InputError_1.InputError, { message: errorData })));
}
FormInput.Password = function Password({ minLength = 6, hideRequirements = false, hideRevealer = false, onChange, type = "password", ...props }) {
const [popoverOpened, setPopoverOpened] = (0, react_1.useState)(false);
const [value, setValue] = (0, react_1.useState)("");
const [revealed, setReveal] = (0, react_1.useState)(false);
const window = (0, daily_toolset_hooks_1.useWindowSize)();
const checks = requirements.map((requirement, index) => (react_1.default.createElement(PasswordRequirement, { key: index, label: requirement.label, meets: requirement.re.test(value) })));
// const strength = getStrength(value);
// const color =
// strength === 100
// ? "bg-teal-500"
// : strength > 50
// ? "bg-yellow-500"
// : "bg-red-500";
return (react_1.default.createElement("div", { className: "group explita-password-input-root", "data-has-label": !!props.label },
!hideRevealer && (react_1.default.createElement(PasswordRevealer, { revealed: revealed, onReveal: () => setReveal(!revealed) })),
react_1.default.createElement(popover_1.Popover, { open: popoverOpened, onOpenChange: setPopoverOpened },
react_1.default.createElement(popover_1.PopoverTrigger, { onFocusCapture: () => setPopoverOpened(true), onBlurCapture: () => setPopoverOpened(false), asChild: true },
react_1.default.createElement(FormInput, { type: revealed ? "text" : "password", autoComplete: "off", defaultValue: value, onChange: (event) => {
setValue(event.currentTarget.value);
onChange === null || onChange === void 0 ? void 0 : onChange(event);
}, ...props })),
!hideRequirements && window.width > 768 && (react_1.default.createElement(popover_1.PopoverContent, { className: "explita-popover-content explita-password-popover", align: "start", onPointerDown: (e) => e.stopPropagation(), forceMount: true },
react_1.default.createElement(PasswordRequirement, { label: `Includes at least ${minLength} characters`, meets: value.length > minLength - 1 }),
checks)))));
};
function PasswordRevealer({ revealed, onReveal, }) {
return (react_1.default.createElement("button", { type: "button", "aria-label": revealed ? "Hide password" : "Reveal password", onClick: onReveal, className: "explita-password-reveal" }, revealed ? react_1.default.createElement(io_1.IoIosEyeOff, { size: 16 }) : react_1.default.createElement(io_1.IoIosEye, { size: 16 })));
}
function PasswordRequirement({ meets, label, }) {
return (react_1.default.createElement("p", { className: `password-requirement ${meets ? "success" : "error"}` },
meets ? react_1.default.createElement(lu_1.LuCheck, { size: 16 }) : react_1.default.createElement(lu_1.LuX, { size: 16 }),
" ",
react_1.default.createElement("span", null, label)));
}
const requirements = [
{ re: /[0-9]/, label: "Includes number" },
{ re: /[a-z]/, label: "Includes lowercase letter" },
{ re: /[A-Z]/, label: "Includes uppercase letter" },
{ re: /[$&+,:;=?@#|'<>.^*()%!-]/, label: "Includes special symbol" },
];
function getStrength(password) {
let multiplier = password.length > 5 ? 0 : 1;
requirements.forEach((requirement) => {
if (!requirement.re.test(password)) {
multiplier += 1;
}
});
return Math.max(100 - (100 / (requirements.length + 1)) * multiplier, 10);
}
FormInput.Search = function Search({ placeholder = "Search...", ...props }) {
return (react_1.default.createElement(FormInput, { ...props, type: "search", name: "search", autoComplete: "off", placeholder: placeholder, leftSection: react_1.default.createElement(bs_1.BsSearch, null) }));
};
FormInput.Date = FormDateInput_1.DateInput;