@skalfa/skalfa-component 1.0.26 → 1.0.28

package/src/input/Textarea.component.tsx

@@ -0,0 +1,194 @@
+"use client"
+
+import { TextareaHTMLAttributes, ReactNode, Ref, useEffect } from "react";
+import { Icon, type IconName } from "@skalfa/skalfa-icon";
+import { cn, pcn, useInputHandler, useInputRandomId, useValidation, validation, ValidationRules } from "@utils";
+
+type CT = "label" | "tip" | "error" | "base" | "icon";
+
+export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
+  label        ?:  string;
+  tip          ?:  string | ReactNode;
+  leftIcon     ?:  IconName | any;
+  rightIcon    ?:  IconName | any;
+
+  value        ?:  any;
+  invalid      ?:  string;
+
+  validations  ?:  ValidationRules;
+  onlyAlphabet ?:  boolean;
+  uppercase    ?:  boolean;
+  lowercase    ?:  boolean;
+
+  onChange     ?:  (value: any) => any;
+  register     ?:  (name: string, validations?: ValidationRules) => void;
+  unregister   ?:  (name: string) => void;
+
+  ref          ?:  Ref<HTMLTextAreaElement>;
+
+  /** Use custom class with: "label::", "tip::", "error::", "base::", "icon::". */
+  className    ?:  string;
+}
+
+export function TextareaComponent({
+  label,
+  tip,
+  leftIcon,
+  rightIcon,
+  className = "",
+
+  value,
+  invalid,
+
+  validations,
+  onlyAlphabet,
+  uppercase,
+  lowercase,
+
+  register,
+  unregister,
+  onChange,
+
+  ref,
+  ...props
+}: TextareaProps) {
+
+  // =========================>
+  // ## Initial
+  // =========================>
+  const inputHandler = useInputHandler(props.name, value, validations, register, false, unregister);
+  const randomId     = useInputRandomId();
+
+  // =========================>
+  // ## Invalid handler
+  // =========================>
+  const [invalidMessage] = useValidation(inputHandler.value, validations, invalid, inputHandler.idle);
+
+  // =========================>
+  // ## Change value handler
+  // =========================>
+  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 && validation.hasRules(validations, "max")) {
+        newVal = newVal.slice(0, parseInt(validation.getRules(validations, "max") || "0"));
+      }
+
+      inputHandler.setValue(newVal);
+    }
+  }, [inputHandler.value, onlyAlphabet, uppercase, lowercase, validations]);
+
+  return (
+    <div className="relative flex flex-col gap-y-0.5 w-full">
+      {label && (
+        <label
+          htmlFor={randomId}
+          className={cn(
+            "input-label",
+            props.disabled && "input-label-disabled",
+            inputHandler.focus && "input-label-focus",
+            !!invalidMessage && "input-label-error",
+            pcn<CT>(className, "label"),
+            props.disabled && pcn<CT>(className, "label", "disabled"),
+            inputHandler.focus && pcn<CT>(className, "label", "focus"),
+            !!invalidMessage && pcn<CT>(className, "label", "error"),
+          )}
+        >
+          {label}
+          {validations && validation.hasRules(validations, "required") && <span className="text-danger ml-1">*</span>}
+        </label>
+      )}
+
+      {tip && (
+        <small
+          className={cn(
+            "input-tip",
+            props.disabled && "input-tip-disabled",
+            pcn<CT>(className, "tip"),
+            props.disabled && pcn<CT>(className, "tip", "disabled"),
+          )}
+        >
+          {tip}
+        </small>
+      )}
+
+      <div className="relative">
+        <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={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",
+            pcn<CT>(className, "base"),
+            !!invalidMessage && pcn<CT>(className, "base", "error"),
+          )}
+        />
+
+        {leftIcon && (
+          <Icon
+            className={cn(
+              "input-icon",
+              "input-icon-left",
+              "top-3 -translate-y-0",
+              props.disabled && "input-icon-disabled",
+              inputHandler.focus && "input-icon-focus",
+              pcn<CT>(className, "icon"),
+              props.disabled && pcn<CT>(className, "icon", "disabled"),
+              inputHandler.focus && pcn<CT>(className, "icon", "focus"),
+            )}
+            icon={leftIcon}
+          />
+        )}
+
+        {rightIcon && (
+          <Icon
+            className={cn(
+              "input-icon",
+              "input-icon-right",
+              "top-3 -translate-y-0",
+              props.disabled && "input-icon-disabled",
+              inputHandler.focus && "input-icon-focus",
+              pcn<CT>(className, "icon"),
+              props.disabled && pcn<CT>(className, "icon", "disabled"),
+              inputHandler.focus && pcn<CT>(className, "icon", "focus"),
+            )}
+            icon={rightIcon}
+          />
+        )}
+      </div>
+
+      {invalidMessage && (
+        <small
+          className={cn(
+            "input-error-message",
+            pcn<CT>(className, "error"),
+          )}
+        >
+          {invalidMessage}
+        </small>
+      )}
+    </div>
+  );
+}

package/src/supervision/FormSupervision.component.tsx

@@ -29,6 +29,10 @@ import {
   InputDatetimeComponent,
   InputTimeComponent,
   InputImageComponent,
+  TextareaComponent,
+  TextareaProps,
+  InputContentComponent,
+  InputContentProps,
 } from "../";
 import { Icon } from "@skalfa/skalfa-icon";
 import { useLang } from "@skalfa/skalfa-lang";
@@ -85,6 +89,8 @@ type ConstructionMap = {
   select            :  SelectProps;
   "enter-password"  :  InputPasswordProps;
   otp               :  InputOtpProps;
+  textarea          :  TextareaProps;
+  content           :  InputContentProps;
   custom            :  formCustomConstructionProps;
 };
 
@@ -366,6 +372,8 @@ export function FormSupervisionComponent({
     "enter-password"  :  InputPasswordComponent,
     otp               :  InputOtpComponent,
     image             :  InputImageComponent,
+    textarea          :  TextareaComponent,
+    content           :  InputContentComponent,
     cluster           :  () => null,
     custom            :  () => null,
   };
@@ -438,7 +446,7 @@ export function FormSupervisionComponent({
           {label && <p className="input-label">{label}</p>}
           {clusterError && <small className="input-error-message">{clusterError}</small>}
           {group.map((gIndex) => (
-            <div key={gIndex} className={cn("relative pr-8", wrap && "p-4 rounded border", className)}>
+            <div key={gIndex} className={cn("relative pr-8", wrap && "form-supervision-cluster-item-wrapped", className)}>
               {label && <p className="input-label">{label} {gIndex + 1}</p>}
               {tip && <small className={cn("input-tip")}>{tip}</small>}
               {(label || tip) && <div className="mb-2"></div>}
@@ -453,7 +461,7 @@ export function FormSupervisionComponent({
                   paint="danger"
                   variant="outline"
                   size="xs"
-                  className={cn("absolute top-10 right-2 translate-x-[50%] -translate-y-[50%]", wrap && "translate-x-0 -translate-y-0 top-1 right-1")}
+                  className={cn("form-supervision-cluster-remove-btn", wrap && "form-supervision-cluster-remove-btn-wrapped")}
                   onClick={() => removeGroup(gIndex)}
                 />
               )}
@@ -463,7 +471,7 @@ export function FormSupervisionComponent({
           <div>
             <ButtonComponent
               icon={"solid/plus"}
-              label={`${l.base.add ? l.base.add() : "Add"} ${label || mapName}`}
+              label={`${l.base.add ? l.base.add() : "Add"} ${label || "Lainnya"}`}
               variant="outline"
               size="sm"
               onClick={addGroup}

package/src/wrap/ContentWrapper.component.tsx

@@ -0,0 +1,241 @@
+import { useMemo } from "react";
+import { cn } from "@utils";
+
+export interface ContentWrapperProps {
+  content    :  string;
+  className  ?:  string;
+}
+
+export const COLOR_MAP: Record<string, { label: string; tw: string; css: string }> = {
+  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)"           },
+};
+
+export function parseInlineFormats(text: string): string {
+  if (!text) return "";
+  let result = text;
+
+  result = result.replace(/\[color:(\w+)\](.*?)\[color\]/g, (_, color, content) => {
+    const colorInfo = 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;
+}
+
+export function parseContentToHtml(content: string): string {
+  if (!content) return "";
+
+  const lines = content.split("\n");
+  const htmlParts: string[] = [];
+  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: string[] = [];
+      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: string[] = [];
+      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("");
+}
+
+export function parseHtmlToContent(html: string): string {
+  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: string[] = [];
+
+  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 as HTMLElement;
+    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 as HTMLElement)}[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 as HTMLElement)}[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: HTMLElement): string {
+  let result = "";
+  for (let i = 0; i < el.childNodes.length; i++) {
+    result += parseNodeToCustom(el.childNodes[i]);
+  }
+  return result;
+}
+
+function parseNodeToCustom(node: Node): string {
+  if (node.nodeType === Node.TEXT_NODE) {
+    return (node.textContent || "").replace(/\u200B/g, "");
+  }
+
+  if (node.nodeType !== Node.ELEMENT_NODE) return "";
+
+  const el = node as HTMLElement;
+  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;
+}
+
+export function ContentWrapperComponent({
+  content,
+  className,
+}: ContentWrapperProps) {
+  const renderedHtml = useMemo(() => parseContentToHtml(content), [content]);
+
+  return (
+    <div
+      className={cn("skcontent-wrapper", className)}
+      dangerouslySetInnerHTML={{ __html: renderedHtml }}
+    />
+  );
+}