@skalfa/skalfa-component 1.0.35 → 1.0.37

package/dist/index.js

@@ -176,6 +176,7 @@ exports.TypographyTipsComponent = require("./typography/TypographyTips.component
 
 // Static export for ./wrap/ContentWrapper.component
 exports.COLOR_MAP = require("./wrap/ContentWrapper.component").COLOR_MAP;
+exports.formatLinkUrl = require("./wrap/ContentWrapper.component").formatLinkUrl;
 exports.parseInlineFormats = require("./wrap/ContentWrapper.component").parseInlineFormats;
 exports.parseContentToHtml = require("./wrap/ContentWrapper.component").parseContentToHtml;
 exports.parseHtmlToContent = require("./wrap/ContentWrapper.component").parseHtmlToContent;

package/dist/input/InputImage.component.js

@@ -9,7 +9,7 @@ const _utils_1 = require("@utils");
 const BottomSheet_component_1 = require("../modal/BottomSheet.component");
 const Button_component_1 = require("../button/Button.component");
 const Modal_component_1 = require("../modal/Modal.component");
-const InputImageComponent = ({ name, label, tip, value, disabled, aspect = "1/1", invalid, validations, onChange, register, unregister, className = "", }) => {
+const InputImageComponent = ({ name, label, tip, value, disabled, aspect, invalid, validations, onChange, register, unregister, className = "", }) => {
     const { isSm } = (0, _utils_1.useResponsive)();
     const randomId = (0, _utils_1.useInputRandomId)();
     const inputRef = (0, react_1.useRef)(null);
@@ -19,6 +19,9 @@ const InputImageComponent = ({ name, label, tip, value, disabled, aspect = "1/1"
     const [openCrop, setOpenCrop] = (0, react_1.useState)(false);
     const inputHandler = (0, _utils_1.useInputHandler)(name, value, validations, register, true, unregister);
     const [invalidMessage, setInvalidMessage] = (0, _utils_1.useValidation)(inputHandler.value, validations, invalid, inputHandler.idle);
+    const isCroppingEnabled = !!aspect;
+    const currentAspect = aspect || "1/1";
+    const containerAspect = (preview && !isCroppingEnabled) ? undefined : currentAspect;
     (0, react_1.useEffect)(() => {
         if (value) {
             const url = typeof value === "object" ? URL.createObjectURL(value) : value;
@@ -48,7 +51,14 @@ const InputImageComponent = ({ name, label, tip, value, disabled, aspect = "1/1"
             setInvalidMessage("Format gambar tidak diperbolehkan (JPG/PNG/WebP)");
             return;
         }
-        openCropper(file);
+        if (isCroppingEnabled) {
+            openCropper(file);
+        }
+        else {
+            const url = URL.createObjectURL(file);
+            setPreview(url);
+            onChange?.(file);
+        }
     };
     const onCropDone = (file) => {
         const url = URL.createObjectURL(file);
@@ -69,17 +79,27 @@ const InputImageComponent = ({ name, label, tip, value, disabled, aspect = "1/1"
         e.preventDefault();
         setDrag(false);
         const file = e.dataTransfer.files?.[0];
-        file && openCropper(file);
+        if (!file)
+            return;
+        if (isCroppingEnabled) {
+            openCropper(file);
+        }
+        else {
+            const url = URL.createObjectURL(file);
+            setPreview(url);
+            onChange?.(file);
+        }
     };
     return ((0, jsx_runtime_1.jsxs)("div", { className: "input-container w-full", children: [label && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("input-label", disabled && "input-label-disabled", inputHandler.focus && "input-label-focus", !!invalidMessage && "input-label-error", (0, _utils_1.pcn)(className, "label")), 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", disabled && "input-tip-disabled", (0, _utils_1.pcn)(className, "tip")), children: tip })), (0, jsx_runtime_1.jsx)("label", { htmlFor: randomId, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("input-image-dropzone", drag ? "input-image-dropzone-drag" : "", invalidMessage && "input-image-dropzone-error", (0, _utils_1.pcn)(className, "input")), style: {
-                        aspectRatio: aspect,
-                        backgroundImage: preview ? `url(${preview})` : undefined,
+                        position: "relative",
+                        aspectRatio: containerAspect,
+                        backgroundImage: preview && containerAspect ? `url(${preview})` : undefined,
                         backgroundSize: "cover",
                         backgroundPosition: "center",
                     }, onDragOver: (e) => e.preventDefault(), onDragEnter: (e) => {
                         e.preventDefault();
                         setDrag(true);
-                    }, onDragLeave: () => setDrag(false), onDrop: onDropFile, children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-image-dropzone-content", children: [(0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: drag ? "solid/hand-holding" : "solid/images", className: "text-3xl" }), (0, jsx_runtime_1.jsx)("p", { className: "input-image-dropzone-text", children: drag ? "Letakkan di sini" : preview ? "Klik atau seret untuk ganti Gambar" : "Klik atau seret gambar" })] }), (0, jsx_runtime_1.jsx)("input", { id: randomId, ref: inputRef, type: "file", accept: "image/*", className: "hidden", disabled: disabled, onChange: onUpload })] }) }), preview && !disabled && ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/times", paint: "danger", size: "sm", className: "absolute top-10 right-4", onClick: remove })), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage })), !isSm ? ((0, jsx_runtime_1.jsx)(Modal_component_1.ModalComponent, { show: openCrop, onClose: onCropCancel, title: "Sesuaikan Gambar", className: "w-max max-w-[350px]", children: cropSrc && ((0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.CanvasCropper, { src: cropSrc, aspect: eval(aspect.replace(":", "/")), onDone: onCropDone }) })) })) : ((0, jsx_runtime_1.jsx)(BottomSheet_component_1.BottomSheetComponent, { show: openCrop, onClose: onCropCancel, size: 400, children: cropSrc && ((0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.CanvasCropper, { src: cropSrc, aspect: eval(aspect.replace(":", "/")), onDone: onCropDone }) })) }))] }));
+                    }, onDragLeave: () => setDrag(false), onDrop: onDropFile, children: [preview && !containerAspect ? ((0, jsx_runtime_1.jsxs)("div", { className: "relative group w-full h-full flex items-center justify-center", children: [(0, jsx_runtime_1.jsx)("img", { src: preview, alt: "Preview", className: "w-full h-auto max-h-[400px] object-contain rounded-lg" }), (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex flex-col items-center justify-center text-white rounded-lg", children: [(0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/images", className: "text-3xl mb-2" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-center", children: "Klik atau seret untuk ganti Gambar" })] })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "input-image-dropzone-content", children: [(0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: drag ? "solid/hand-holding" : "solid/images", className: "text-3xl" }), (0, jsx_runtime_1.jsx)("p", { className: "input-image-dropzone-text", children: drag ? "Letakkan di sini" : preview ? "Klik atau seret untuk ganti Gambar" : "Klik atau seret gambar" })] })), (0, jsx_runtime_1.jsx)("input", { id: randomId, ref: inputRef, type: "file", accept: "image/*", className: "hidden", disabled: disabled, onChange: onUpload })] }) }), preview && !disabled && ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/times", paint: "danger", size: "sm", className: "absolute top-10 right-4", onClick: remove })), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage })), !isSm ? ((0, jsx_runtime_1.jsx)(Modal_component_1.ModalComponent, { show: openCrop, onClose: onCropCancel, title: "Sesuaikan Gambar", className: "w-max max-w-[350px]", children: cropSrc && ((0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.CanvasCropper, { src: cropSrc, aspect: eval(currentAspect.replace(":", "/")), onDone: onCropDone }) })) })) : ((0, jsx_runtime_1.jsx)(BottomSheet_component_1.BottomSheetComponent, { show: openCrop, onClose: onCropCancel, size: 400, children: cropSrc && ((0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.CanvasCropper, { src: cropSrc, aspect: eval(currentAspect.replace(":", "/")), onDone: onCropDone }) })) }))] }));
 };
 exports.InputImageComponent = InputImageComponent;
 const CanvasCropper = ({ src, aspect, onDone, }) => {

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

@@ -7,6 +7,7 @@ export declare const COLOR_MAP: Record<string, {
     tw: string;
     css: string;
 }>;
+export declare function formatLinkUrl(url: string): string;
 export declare function parseInlineFormats(text: string): string;
 export declare function parseContentToHtml(content: string): string;
 export declare function parseHtmlToContent(html: string): string;

package/dist/wrap/ContentWrapper.component.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.COLOR_MAP = void 0;
+exports.formatLinkUrl = formatLinkUrl;
 exports.parseInlineFormats = parseInlineFormats;
 exports.parseContentToHtml = parseContentToHtml;
 exports.parseHtmlToContent = parseHtmlToContent;
@@ -16,6 +17,15 @@ exports.COLOR_MAP = {
     warning: { label: "Warning", tw: "text-warning", css: "var(--color-warning, #f59e0b)" },
     danger: { label: "Danger", tw: "text-danger", css: "var(--color-danger, #ef4444)" },
 };
+function formatLinkUrl(url) {
+    if (!url)
+        return "";
+    const hasProtocol = /^(https?:\/\/|\/\/|\/|#|mailto:|tel:|javascript:)/i.test(url);
+    if (hasProtocol) {
+        return url;
+    }
+    return `https://${url}`;
+}
 function parseInlineFormats(text) {
     if (!text)
         return "";
@@ -29,7 +39,8 @@ function parseInlineFormats(text) {
         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>`;
+        const formattedUrl = formatLinkUrl(url);
+        return `<a href="${formattedUrl}" class="text-primary underline" data-link="${formattedUrl}" target="_blank" rel="noopener noreferrer">${content}</a>`;
     });
     result = result.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>");
     result = result.replace(/\/\/(.*?)\/\//g, "<em>$1</em>");

package/package.json

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

package/src/input/InputImage.component.tsx

@@ -37,7 +37,7 @@ export const InputImageComponent: React.FC<InputImageProps> = ({
 
   value,
   disabled,
-  aspect = "1/1",
+  aspect,
   invalid,
   validations,
 
@@ -59,6 +59,10 @@ export const InputImageComponent: React.FC<InputImageProps> = ({
   const inputHandler                         =  useInputHandler(name, value, validations, register, true, unregister);
   const [invalidMessage, setInvalidMessage]  =  useValidation(inputHandler.value, validations, invalid, inputHandler.idle);
 
+  const isCroppingEnabled = !!aspect;
+  const currentAspect = aspect || "1/1";
+  const containerAspect = (preview && !isCroppingEnabled) ? undefined : currentAspect;
+
   useEffect(() => {
     if (value) {
       const url = typeof value === "object" ? URL.createObjectURL(value) : value;
@@ -91,7 +95,13 @@ export const InputImageComponent: React.FC<InputImageProps> = ({
       return;
     }
 
-    openCropper(file);
+    if (isCroppingEnabled) {
+      openCropper(file);
+    } else {
+      const url = URL.createObjectURL(file);
+      setPreview(url);
+      onChange?.(file);
+    }
   };
 
   const onCropDone = (file: File) => {
@@ -117,7 +127,15 @@ export const InputImageComponent: React.FC<InputImageProps> = ({
     setDrag(false);
 
     const file = e.dataTransfer.files?.[0];
-    file && openCropper(file);
+    if (!file) return;
+
+    if (isCroppingEnabled) {
+      openCropper(file);
+    } else {
+      const url = URL.createObjectURL(file);
+      setPreview(url);
+      onChange?.(file);
+    }
   };
 
   return (
@@ -157,8 +175,9 @@ export const InputImageComponent: React.FC<InputImageProps> = ({
             pcn<CT>(className, "input")
           )}
           style={{
-            aspectRatio: aspect,
-            backgroundImage: preview ? `url(${preview})` : undefined,
+            position: "relative",
+            aspectRatio: containerAspect,
+            backgroundImage: preview && containerAspect ? `url(${preview})` : undefined,
             backgroundSize: "cover",
             backgroundPosition: "center",
           }}
@@ -170,10 +189,24 @@ export const InputImageComponent: React.FC<InputImageProps> = ({
           onDragLeave={() => setDrag(false)}
           onDrop={onDropFile}
         >
-          <div className="input-image-dropzone-content">
-            <Icon icon={drag ? "solid/hand-holding" : "solid/images"} className="text-3xl" />
-            <p className="input-image-dropzone-text">{drag ? "Letakkan di sini" : preview  ? "Klik atau seret untuk ganti Gambar" : "Klik atau seret gambar"}</p>
-          </div>
+          {preview && !containerAspect ? (
+            <div className="relative group w-full h-full flex items-center justify-center">
+              <img
+                src={preview}
+                alt="Preview"
+                className="w-full h-auto max-h-[400px] object-contain rounded-lg"
+              />
+              <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex flex-col items-center justify-center text-white rounded-lg">
+                <Icon icon="solid/images" className="text-3xl mb-2" />
+                <p className="text-xs text-center">Klik atau seret untuk ganti Gambar</p>
+              </div>
+            </div>
+          ) : (
+            <div className="input-image-dropzone-content">
+              <Icon icon={drag ? "solid/hand-holding" : "solid/images"} className="text-3xl" />
+              <p className="input-image-dropzone-text">{drag ? "Letakkan di sini" : preview  ? "Klik atau seret untuk ganti Gambar" : "Klik atau seret gambar"}</p>
+            </div>
+          )}
 
           <input
             id={randomId}
@@ -209,7 +242,7 @@ export const InputImageComponent: React.FC<InputImageProps> = ({
             <div className="p-4">
               <CanvasCropper
                 src={cropSrc}
-                aspect={eval(aspect.replace(":", "/"))}
+                aspect={eval(currentAspect.replace(":", "/"))}
                 onDone={onCropDone}
               />
             </div>
@@ -221,7 +254,7 @@ export const InputImageComponent: React.FC<InputImageProps> = ({
             <div className="p-4">
               <CanvasCropper
                 src={cropSrc}
-                aspect={eval(aspect.replace(":", "/"))}
+                aspect={eval(currentAspect.replace(":", "/"))}
                 onDone={onCropDone}
               />
             </div>

package/src/wrap/ContentWrapper.component.tsx

@@ -15,6 +15,15 @@ export const COLOR_MAP: Record<string, { label: string; tw: string; css: string
   danger:    { label: "Danger",    tw: "text-danger",           css: "var(--color-danger, #ef4444)"           },
 };
 
+export function formatLinkUrl(url: string): string {
+  if (!url) return "";
+  const hasProtocol = /^(https?:\/\/|\/\/|\/|#|mailto:|tel:|javascript:)/i.test(url);
+  if (hasProtocol) {
+    return url;
+  }
+  return `https://${url}`;
+}
+
 export function parseInlineFormats(text: string): string {
   if (!text) return "";
   let result = text;
@@ -30,7 +39,8 @@ export function parseInlineFormats(text: string): string {
   });
 
   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>`;
+    const formattedUrl = formatLinkUrl(url);
+    return `<a href="${formattedUrl}" class="text-primary underline" data-link="${formattedUrl}" target="_blank" rel="noopener noreferrer">${content}</a>`;
   });
 
   result = result.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>");