@skalfa/skalfa-component 1.0.26 → 1.0.28

package/dist/input/Textarea.component.js

@@ -0,0 +1,47 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextareaComponent = TextareaComponent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const skalfa_icon_1 = require("@skalfa/skalfa-icon");
+const _utils_1 = require("@utils");
+function TextareaComponent({ label, tip, leftIcon, rightIcon, className = "", value, invalid, validations, onlyAlphabet, uppercase, lowercase, register, unregister, onChange, ref, ...props }) {
+    // =========================>
+    // ## Initial
+    // =========================>
+    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, false, unregister);
+    const randomId = (0, _utils_1.useInputRandomId)();
+    // =========================>
+    // ## Invalid handler
+    // =========================>
+    const [invalidMessage] = (0, _utils_1.useValidation)(inputHandler.value, validations, invalid, inputHandler.idle);
+    // =========================>
+    // ## Change value handler
+    // =========================>
+    (0, react_1.useEffect)(() => {
+        if (inputHandler.value && typeof inputHandler.value === "string") {
+            let newVal = onlyAlphabet ? inputHandler.value.replace(/[^A-Za-z ]+/g, "") : inputHandler.value;
+            if (uppercase)
+                newVal = newVal.toUpperCase();
+            if (lowercase)
+                newVal = newVal.toLowerCase();
+            if (validations && _utils_1.validation.hasRules(validations, "max")) {
+                newVal = newVal.slice(0, parseInt(_utils_1.validation.getRules(validations, "max") || "0"));
+            }
+            inputHandler.setValue(newVal);
+        }
+    }, [inputHandler.value, onlyAlphabet, uppercase, lowercase, validations]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "relative flex flex-col gap-y-0.5 w-full", children: [label && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("input-label", props.disabled && "input-label-disabled", inputHandler.focus && "input-label-focus", !!invalidMessage && "input-label-error", (0, _utils_1.pcn)(className, "label"), props.disabled && (0, _utils_1.pcn)(className, "label", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "label", "focus"), !!invalidMessage && (0, _utils_1.pcn)(className, "label", "error")), children: [label, validations && _utils_1.validation.hasRules(validations, "required") && (0, jsx_runtime_1.jsx)("span", { className: "text-danger ml-1", children: "*" })] })), tip && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-tip", props.disabled && "input-tip-disabled", (0, _utils_1.pcn)(className, "tip"), props.disabled && (0, _utils_1.pcn)(className, "tip", "disabled")), children: tip })), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("textarea", { ...props, ref: ref, id: randomId, value: inputHandler.value ?? "", onChange: (e) => {
+                            inputHandler.setValue(e.target.value);
+                            inputHandler.setIdle(false);
+                            if (onChange)
+                                onChange(e.target.value);
+                        }, onFocus: (e) => {
+                            props.onFocus?.(e);
+                            inputHandler.setFocus(true);
+                        }, onBlur: (e) => {
+                            props.onBlur?.(e);
+                            setTimeout(() => inputHandler.setFocus(false), 100);
+                        }, className: (0, _utils_1.cn)("input textarea min-h-[80px] py-2", leftIcon && "input-with-left-icon", rightIcon && "input-with-right-icon", props.disabled && "input-disabled", !!invalidMessage && "input-error", (0, _utils_1.pcn)(className, "base"), !!invalidMessage && (0, _utils_1.pcn)(className, "base", "error")) }), leftIcon && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", "top-3 -translate-y-0", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: leftIcon })), rightIcon && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { className: (0, _utils_1.cn)("input-icon", "input-icon-right", "top-3 -translate-y-0", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: rightIcon }))] }), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }));
+}

package/dist/supervision/FormSupervision.component.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { ApiType, FormErrorType, FormRegisterType, FormValueType, ValidationRules, DBSchema } from "@utils";
-import { InputProps, InputCheckboxProps, InputCurrencyProps, InputDateProps, InputNumberProps, InputRadioProps, SelectProps, InputPasswordProps, InputOtpProps, InputTimeProps, InputImageProps, InputDateTimeProps } from "../";
+import { InputProps, InputCheckboxProps, InputCurrencyProps, InputDateProps, InputNumberProps, InputRadioProps, SelectProps, InputPasswordProps, InputOtpProps, InputTimeProps, InputImageProps, InputDateTimeProps, TextareaProps, InputContentProps } from "../";
 type formCustomConstructionProps = ({ formControl, values, setValues, setRegister, errors, setErrors, }: {
     formControl: (name: string) => {
         register: (regName: string, regValidations?: ValidationRules | undefined) => void;
@@ -42,6 +42,8 @@ type ConstructionMap = {
     select: SelectProps;
     "enter-password": InputPasswordProps;
     otp: InputOtpProps;
+    textarea: TextareaProps;
+    content: InputContentProps;
     custom: formCustomConstructionProps;
 };
 type TypeKeys = keyof ConstructionMap;

package/dist/supervision/FormSupervision.component.js

@@ -181,6 +181,8 @@ function FormSupervisionComponent({ title, fields, submitControl, confirmation,
         "enter-password": __1.InputPasswordComponent,
         otp: __1.InputOtpComponent,
         image: __1.InputImageComponent,
+        textarea: __1.TextareaComponent,
+        content: __1.InputContentComponent,
         cluster: () => null,
         custom: () => null,
     };
@@ -235,7 +237,7 @@ function FormSupervisionComponent({ title, fields, submitControl, confirmation,
                 setValues(updatedValues);
             };
             const clusterError = errors?.find((err) => err.name === groupKey || err.name === mapName)?.error;
-            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("flex flex-col gap-4", generateColClass(form.col || "12")), children: [label && (0, jsx_runtime_1.jsx)("p", { className: "input-label", children: label }), clusterError && (0, jsx_runtime_1.jsx)("small", { className: "input-error-message", children: clusterError }), group.map((gIndex) => ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("relative pr-8", wrap && "p-4 rounded border", className), children: [label && (0, jsx_runtime_1.jsxs)("p", { className: "input-label", children: [label, " ", gIndex + 1] }), tip && (0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-tip"), children: tip }), (label || tip) && (0, jsx_runtime_1.jsx)("div", { className: "mb-2" }), (0, jsx_runtime_1.jsx)("div", { className: "w-full grid grid-cols-12 gap-4", children: innerForms.map((inner, i) => renderInput(inner, i, `${groupKey}[${gIndex}]`)) }), showDeleteButton && ((0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/times", paint: "danger", variant: "outline", size: "xs", className: (0, _utils_1.cn)("absolute top-10 right-2 translate-x-[50%] -translate-y-[50%]", wrap && "translate-x-0 -translate-y-0 top-1 right-1"), onClick: () => removeGroup(gIndex) }))] }, gIndex))), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/plus", label: `${l.base.add ? l.base.add() : "Add"} ${label || mapName}`, variant: "outline", size: "sm", onClick: addGroup }) })] }, key));
+            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("flex flex-col gap-4", generateColClass(form.col || "12")), children: [label && (0, jsx_runtime_1.jsx)("p", { className: "input-label", children: label }), clusterError && (0, jsx_runtime_1.jsx)("small", { className: "input-error-message", children: clusterError }), group.map((gIndex) => ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("relative pr-8", wrap && "form-supervision-cluster-item-wrapped", className), children: [label && (0, jsx_runtime_1.jsxs)("p", { className: "input-label", children: [label, " ", gIndex + 1] }), tip && (0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-tip"), children: tip }), (label || tip) && (0, jsx_runtime_1.jsx)("div", { className: "mb-2" }), (0, jsx_runtime_1.jsx)("div", { className: "w-full grid grid-cols-12 gap-4", children: innerForms.map((inner, i) => renderInput(inner, i, `${groupKey}[${gIndex}]`)) }), showDeleteButton && ((0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/times", paint: "danger", variant: "outline", size: "xs", className: (0, _utils_1.cn)("form-supervision-cluster-remove-btn", wrap && "form-supervision-cluster-remove-btn-wrapped"), onClick: () => removeGroup(gIndex) }))] }, gIndex))), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/plus", label: `${l.base.add ? l.base.add() : "Add"} ${label || "Lainnya"}`, variant: "outline", size: "sm", onClick: addGroup }) })] }, key));
         }
         if (inputType === "custom") {
             const customRender = form.construction;

package/dist/wrap/ContentWrapper.component.d.ts

@@ -0,0 +1,13 @@
+export interface ContentWrapperProps {
+    content: string;
+    className?: string;
+}
+export declare const COLOR_MAP: Record<string, {
+    label: string;
+    tw: string;
+    css: string;
+}>;
+export declare function parseInlineFormats(text: string): string;
+export declare function parseContentToHtml(content: string): string;
+export declare function parseHtmlToContent(html: string): string;
+export declare function ContentWrapperComponent({ content, className, }: ContentWrapperProps): import("@types/react").JSX.Element;

package/dist/wrap/ContentWrapper.component.js

@@ -0,0 +1,208 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.COLOR_MAP = void 0;
+exports.parseInlineFormats = parseInlineFormats;
+exports.parseContentToHtml = parseContentToHtml;
+exports.parseHtmlToContent = parseHtmlToContent;
+exports.ContentWrapperComponent = ContentWrapperComponent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const _utils_1 = require("@utils");
+exports.COLOR_MAP = {
+    normal: { label: "Normal", tw: "text-foreground", css: "var(--color-foreground, #1f2937)" },
+    light: { label: "Light", tw: "text-light-foreground", css: "var(--color-light-foreground, #9ca3af)" },
+    primary: { label: "Primary", tw: "text-primary", css: "var(--color-primary, #3b82f6)" },
+    secondary: { label: "Secondary", tw: "text-secondary", css: "var(--color-secondary, #8b5cf6)" },
+    warning: { label: "Warning", tw: "text-warning", css: "var(--color-warning, #f59e0b)" },
+    danger: { label: "Danger", tw: "text-danger", css: "var(--color-danger, #ef4444)" },
+};
+function parseInlineFormats(text) {
+    if (!text)
+        return "";
+    let result = text;
+    result = result.replace(/\[color:(\w+)\](.*?)\[color\]/g, (_, color, content) => {
+        const colorInfo = exports.COLOR_MAP[color];
+        const twClass = colorInfo?.tw || "text-foreground";
+        return `<span class="${twClass}" data-color="${color}">${content}</span>`;
+    });
+    result = result.replace(/\[size:(\d+)\](.*?)\[size\]/g, (_, size, content) => {
+        return `<span style="font-size:${size}px" data-size="${size}">${content}</span>`;
+    });
+    result = result.replace(/\[link:(.*?)\](.*?)\[link\]/g, (_, url, content) => {
+        return `<a href="${url}" class="text-primary underline" data-link="${url}" target="_blank" rel="noopener noreferrer">${content}</a>`;
+    });
+    result = result.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>");
+    result = result.replace(/\/\/(.*?)\/\//g, "<em>$1</em>");
+    result = result.replace(/__(.*?)__/g, "<u>$1</u>");
+    result = result.replace(/--(.*?)--/g, "<s>$1</s>");
+    return result;
+}
+function parseContentToHtml(content) {
+    if (!content)
+        return "";
+    const lines = content.split("\n");
+    const htmlParts = [];
+    let i = 0;
+    while (i < lines.length) {
+        const line = lines[i];
+        if (line.trim() === "---") {
+            htmlParts.push('<div class="skcontent-divider" contenteditable="false"><hr /></div>');
+            i++;
+            continue;
+        }
+        const headerMatch = line.match(/^##(.+?)##$/);
+        if (headerMatch) {
+            htmlParts.push(`<h2>${parseInlineFormats(headerMatch[1])}</h2>`);
+            i++;
+            continue;
+        }
+        if (line.match(/^\[list:bullet\]/)) {
+            const items = [];
+            while (i < lines.length) {
+                const bm = lines[i].match(/^\[list:bullet\](.*?)\[list\]$/);
+                if (!bm)
+                    break;
+                items.push(`<li>${parseInlineFormats(bm[1])}</li>`);
+                i++;
+            }
+            htmlParts.push(`<ul>${items.join("")}</ul>`);
+            continue;
+        }
+        if (line.match(/^\[list:number\]/)) {
+            const items = [];
+            while (i < lines.length) {
+                const nm = lines[i].match(/^\[list:number\](.*?)\[list\]$/);
+                if (!nm)
+                    break;
+                items.push(`<li>${parseInlineFormats(nm[1])}</li>`);
+                i++;
+            }
+            htmlParts.push(`<ol>${items.join("")}</ol>`);
+            continue;
+        }
+        const alignMatch = line.match(/^\[align:(left|center|right|justify)\](.*?)\[align\]$/);
+        if (alignMatch) {
+            const alignVal = alignMatch[1];
+            const alignStyle = alignVal === "left" ? "text-align:left" : alignVal === "center" ? "text-align:center" : alignVal === "right" ? "text-align:right" : "text-align:justify";
+            htmlParts.push(`<p style="${alignStyle}" class="text-${alignVal}">${parseInlineFormats(alignMatch[2])}</p>`);
+            i++;
+            continue;
+        }
+        if (line.trim() === "") {
+            htmlParts.push("<p><br></p>");
+            i++;
+            continue;
+        }
+        htmlParts.push(`<p>${parseInlineFormats(line)}</p>`);
+        i++;
+    }
+    return htmlParts.join("");
+}
+function parseHtmlToContent(html) {
+    if (!html)
+        return "";
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(`<div>${html}</div>`, "text/html");
+    const root = doc.body.firstElementChild;
+    if (!root)
+        return "";
+    const lines = [];
+    for (let i = 0; i < root.childNodes.length; i++) {
+        const node = root.childNodes[i];
+        if (node.nodeType === Node.TEXT_NODE) {
+            const text = node.textContent?.trim();
+            if (text)
+                lines.push(parseNodeToCustom(node));
+            continue;
+        }
+        if (node.nodeType !== Node.ELEMENT_NODE)
+            continue;
+        const el = node;
+        const tag = el.tagName.toLowerCase();
+        if (el.classList.contains("skcontent-divider") || tag === "hr") {
+            lines.push("---");
+            continue;
+        }
+        if (tag === "h2") {
+            lines.push(`##${parseChildrenToCustom(el)}##`);
+            continue;
+        }
+        if (tag === "ul") {
+            for (let j = 0; j < el.children.length; j++) {
+                const li = el.children[j];
+                lines.push(`[list:bullet]${parseChildrenToCustom(li)}[list]`);
+            }
+            continue;
+        }
+        if (tag === "ol") {
+            for (let j = 0; j < el.children.length; j++) {
+                const li = el.children[j];
+                lines.push(`[list:number]${parseChildrenToCustom(li)}[list]`);
+            }
+            continue;
+        }
+        if (tag === "p" || tag === "div") {
+            const align = el.style.textAlign || (el.classList.contains("text-center") ? "center" : el.classList.contains("text-right") ? "right" : el.classList.contains("text-justify") ? "justify" : "");
+            const content = parseChildrenToCustom(el);
+            if (!content || content === "\n" || el.innerHTML === "<br>" || el.innerHTML === "<br/>") {
+                lines.push("");
+                continue;
+            }
+            if (align && align !== "left" && align !== "start") {
+                lines.push(`[align:${align}]${content}[align]`);
+            }
+            else {
+                lines.push(content);
+            }
+            continue;
+        }
+        const fallback = parseChildrenToCustom(el);
+        if (fallback)
+            lines.push(fallback);
+    }
+    return lines.join("\n");
+}
+function parseChildrenToCustom(el) {
+    let result = "";
+    for (let i = 0; i < el.childNodes.length; i++) {
+        result += parseNodeToCustom(el.childNodes[i]);
+    }
+    return result;
+}
+function parseNodeToCustom(node) {
+    if (node.nodeType === Node.TEXT_NODE) {
+        return (node.textContent || "").replace(/\u200B/g, "");
+    }
+    if (node.nodeType !== Node.ELEMENT_NODE)
+        return "";
+    const el = node;
+    const tag = el.tagName.toLowerCase();
+    const inner = parseChildrenToCustom(el);
+    if (tag === "strong" || tag === "b")
+        return `**${inner}**`;
+    if (tag === "em" || tag === "i")
+        return `//${inner}//`;
+    if (tag === "u")
+        return `__${inner}__`;
+    if (tag === "s" || tag === "strike" || tag === "del")
+        return `--${inner}--`;
+    if (tag === "span" && el.dataset.color) {
+        return `[color:${el.dataset.color}]${inner}[color]`;
+    }
+    if (tag === "span" && el.dataset.size) {
+        return `[size:${el.dataset.size}]${inner}[size]`;
+    }
+    if (tag === "a") {
+        const href = el.getAttribute("href") || el.dataset.link || "";
+        return `[link:${href}]${inner}[link]`;
+    }
+    if (tag === "br")
+        return "";
+    if (tag === "hr")
+        return "---";
+    return inner;
+}
+function ContentWrapperComponent({ content, className, }) {
+    const renderedHtml = (0, react_1.useMemo)(() => parseContentToHtml(content), [content]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("skcontent-wrapper", className), dangerouslySetInnerHTML: { __html: renderedHtml } }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skalfa/skalfa-component",
-  "version": "1.0.26",
+  "version": "1.0.28",
   "description": "Reusable UI components for Skalfa App.",
   "license": "MIT",
   "keywords": [

package/src/index.ts

@@ -25,6 +25,8 @@ export * from "./input/InputTime.component";
 export * from "./input/InputValues.component";
 export * from "./input/Radio.component";
 export * from "./input/Select.component";
+export * from "./input/Textarea.component";
+export * from "./input/InputContent.component";
 export * from "./modal/BottomSheet.component";
 export * from "./modal/FloatingPage.component";
 export * from "./modal/Modal.component";
@@ -47,6 +49,7 @@ export * from "./typography/TypographyArticle.component";
 export * from "./typography/TypographyColumn.component";
 export * from "./typography/TypographyContent.component";
 export * from "./typography/TypographyTips.component";
+export * from "./wrap/ContentWrapper.component";
 export * from "./wrap/Draggable.component";
 export * from "./wrap/Image.component";
 export * from "./wrap/OutsideClick.component";