@fajarmaulana/komerce-lp-helper 0.1.1 → 0.2.0

package/README.md

@@ -17,38 +17,39 @@ npm install komerce-lp-helper
 A wrapper around `fetch` with support for interceptors, caching, and retries.
 
 ```typescript
-import { http } from "komerce-lp-helper";
+import { http } from 'komerce-lp-helper'
 
 // GET request
-const users = await http.get("/users");
+const users = await http.get('/users')
 
 // POST request with body
-await http.post("/users", { name: "John Doe" });
+await http.post('/users', { name: 'John Doe' })
 
 // Using cache
-const cachedData = http.getCache("my-key");
+const cachedData = http.getCache('my-key')
 ```
 
 #### `createApi`
 
-Creates a new API instance with built-in React hooks (`fetch`, `mutation`, `infinite`) for performing typed data fetching and mutations with progress tracking.
+Creates a new API instance with built-in React hooks (`fetch`, `mutation`, `infinite`) for performing typed data
+fetching and mutations with progress tracking.
 
 ```tsx
-import { createApi } from "komerce-lp-helper";
+import { createApi } from 'komerce-lp-helper'
 
-const api = createApi({ baseURL: "/api" });
+const api = createApi({ baseURL: '/api' })
 
 // Fetch
-const { data, isLoading, refetch } = api.fetch<User[]>("/users");
+const { data, isLoading, refetch } = api.fetch<User[]>('/users')
 
 // Mutation (POST, PUT, DELETE)
-const { mutate, isLoading, progress } = api.mutation<User, FormData>("/users", { method: "POST" });
+const { mutate, isLoading, progress } = api.mutation<User, FormData>('/users', { method: 'POST' })
 
 // Infinite Fetch
-const { data, fetchNextPage } = api.infinite<User[]>("/users", {
+const { data, fetchNextPage } = api.infinite<User[]>('/users', {
   initialOffset: 0,
   setOffset: (lastItems, allItems, lastOffset) => (lastItems.length ? lastOffset + 1 : null),
-});
+})
 ```
 
 ### Hooks
@@ -58,8 +59,8 @@ const { data, fetchNextPage } = api.infinite<User[]>("/users", {
 Returns a debounced version of a value. Useful for delaying expensive operations.
 
 ```typescript
-import { useDebounce } from "komerce-lp-helper";
-const debouncedSearchTerm = useDebounce(searchTerm, 500);
+import { useDebounce } from 'komerce-lp-helper'
+const debouncedSearchTerm = useDebounce(searchTerm, 500)
 ```
 
 #### `useDebounceFunc`
@@ -67,8 +68,8 @@ const debouncedSearchTerm = useDebounce(searchTerm, 500);
 Returns a debounced version of a callback function.
 
 ```typescript
-import { useDebounceFunc } from "komerce-lp-helper";
-const debouncedSearch = useDebounceFunc((q) => fetchResults(q), 300);
+import { useDebounceFunc } from 'komerce-lp-helper'
+const debouncedSearch = useDebounceFunc(q => fetchResults(q), 300)
 ```
 
 #### `useConditionalDebounce`
@@ -80,12 +81,12 @@ Conditionally executes a callback function after a specified debounce delay.
 A custom router API built on top of React Router DOM that provides easier navigation methods and state management.
 
 ```typescript
-import { useRouter } from "komerce-lp-helper";
+import { useRouter } from 'komerce-lp-helper'
 
-const { push, replace, back, query, params } = useRouter();
+const { push, replace, back, query, params } = useRouter()
 
 // Navigate with query params
-push({ pathname: "/dashboard", query: { tab: "settings" } });
+push({ pathname: '/dashboard', query: { tab: 'settings' } })
 ```
 
 #### `useQueryParams`
@@ -93,8 +94,8 @@ push({ pathname: "/dashboard", query: { tab: "settings" } });
 A hook for reading and updating query parameters in the URL locally.
 
 ```typescript
-import { useQueryParams } from "komerce-lp-helper";
-const [queryObj, updateQuery] = useQueryParams<{ page: string }>();
+import { useQueryParams } from 'komerce-lp-helper'
+const [queryObj, updateQuery] = useQueryParams<{ page: string }>()
 ```
 
 #### `useSlider`
@@ -102,8 +103,35 @@ const [queryObj, updateQuery] = useQueryParams<{ page: string }>();
 Manages logic for custom slider components, including touch/drag support and navigation.
 
 ```typescript
-import { useSlider } from "komerce-lp-helper";
-const slider = useSlider({ data: items });
+import { useSlider } from 'komerce-lp-helper'
+const slider = useSlider({ data: items })
+```
+
+#### `useForm`
+
+Manages form fields, retrieval of values, and error handling for both named inputs and standalone fields.
+
+```typescript
+import { useForm } from 'komerce-lp-helper'
+
+const { form, fields, fieldsWithoutName } = useForm<{ email: string }>(['custom-input-id'])
+
+const handleSubmit = e => {
+  e.preventDefault()
+  const data = fields()
+  console.log(data.email.field_value)
+}
+```
+
+#### `useSectionObserver`
+
+Trigger animations or state changes when a section comes into view.
+
+```typescript
+import { useSectionObserver } from 'komerce-lp-helper'
+
+const ref = useRef(null)
+useSectionObserver({ triggerRef: ref, targetId: 'target-section' })
 ```
 
 ### Utilities
@@ -154,6 +182,19 @@ Common DOM and string utilities.
 - `acronym(name)`: Generates a 2-letter acronym from a name.
 - `isNotPrimitive(value)`: Checks if a value is an object/array.
 
+#### Form Validation
+
+Helpers for validating inputs and displaying error messages.
+
+- `provideFieldError(params)`: Validates a field against a set of rules and updates the error element.
+- `providePasswordFieldError(params)`: Specialized validation for password strength (length, uppercase, lowercase,
+  numbers, symbols).
+
+### Components
+
+- `Form`: A wrapper component for HTML forms.
+- `LazyBackground`: Component for lazy loading background images.
+
 ## License
 
 MIT

package/dist/components/Form.d.ts

@@ -0,0 +1,18 @@
+import type { TFormProps } from './types';
+/**
+ * A reusable form component that simplifies form submission handling.
+ *
+ * ### Features:
+ * - Prevents the default browser submit behavior.
+ * - Collects form values into a `FormData` object.
+ * - Passes the `FormData` to the `action` callback.
+ * - Exposes the underlying `<form>` element via `ref`.
+ *
+ * Props for the `Form` component.
+ *
+ * @property {(formData: FormData) => void} action - Function called when the form is submitted.
+ * @property {ComponentPropsWithRef<'form'>} - All attribute of form element.
+ * @property {React.ReactNode} [children] - The form’s inner content (inputs, buttons, etc.).
+ */
+declare const Form: ({ action, ref, children, ...props }: TFormProps) => import("react/jsx-runtime").JSX.Element;
+export default Form;

package/dist/components/Form.js

@@ -0,0 +1,55 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useImperativeHandle, useRef } from 'react';
+/**
+ * A reusable form component that simplifies form submission handling.
+ *
+ * ### Features:
+ * - Prevents the default browser submit behavior.
+ * - Collects form values into a `FormData` object.
+ * - Passes the `FormData` to the `action` callback.
+ * - Exposes the underlying `<form>` element via `ref`.
+ *
+ * Props for the `Form` component.
+ *
+ * @property {(formData: FormData) => void} action - Function called when the form is submitted.
+ * @property {ComponentPropsWithRef<'form'>} - All attribute of form element.
+ * @property {React.ReactNode} [children] - The form’s inner content (inputs, buttons, etc.).
+ */
+var Form = function (_a) {
+    var action = _a.action, ref = _a.ref, children = _a.children, props = __rest(_a, ["action", "ref", "children"]);
+    var innerRef = useRef(null);
+    useImperativeHandle(ref, function () { return innerRef.current; });
+    var handleSubmit = function (e) {
+        e.preventDefault();
+        var activeEl = document.activeElement;
+        activeEl.blur();
+        if (!innerRef.current)
+            return;
+        var formData = new FormData(innerRef.current);
+        action(formData);
+    };
+    return (_jsx("form", __assign({}, props, { ref: innerRef, onSubmit: handleSubmit, children: children })));
+};
+export default Form;

package/dist/components/LazyBackground.d.ts

@@ -0,0 +1,3 @@
+import type { TLazyBackgroundProps } from './types';
+declare const _default: import("react").MemoExoticComponent<({ url, children, className }: TLazyBackgroundProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/components/LazyBackground.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useLazyBackground } from './hooks';
+/**
+ * A wrapper component that lazily loads a background image when it enters the viewport.
+ *
+ * Uses the `useLazyBackground` hook to observe the element via the Intersection Observer API
+ * and apply the background image only when visible.
+ * This helps improve performance by deferring image loading until needed.
+ *
+ * Props for the `LazyBackground` component.
+ *
+ * @property {string} url - The image URL to be lazily loaded as the background.
+ * @property {React.ReactNode} [children] - Optional elements or content rendered inside the container.
+ * @property {string} [className] - Additional CSS class names applied to the outer container.
+ *
+ * @remarks
+ * The component renders a `<div>` with a `ref` attached for the lazy observer.
+ * The `url` is passed to `useLazyBackground`, which handles loading behavior internally.
+ */
+var LazyBackground = function (_a) {
+    var url = _a.url, children = _a.children, className = _a.className;
+    var ref = useLazyBackground({ url: url }).ref;
+    return (_jsx("div", { ref: ref, className: className || '', children: children }));
+};
+export default memo(LazyBackground);

package/dist/components/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useLazyBackground';

package/dist/components/hooks/index.js

@@ -0,0 +1 @@
+export * from './useLazyBackground';

package/dist/components/hooks/useLazyBackground.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Props for the `useLazyBackground` hook.
+ *
+ * @property url - The URL of the background image to load lazily.
+ */
+export type TLazyBackground = {
+    url: string;
+};
+/**
+ * `useLazyBackground` is a custom React hook that applies a background image
+ * to a `<div>` element only when it enters the viewport (lazy-loading).
+ *
+ * @param {TLazyBackground} props - The props object containing the image URL.
+ */
+export declare const useLazyBackground: ({ url }: TLazyBackground) => {
+    ref: import("react").RefObject<HTMLDivElement | null>;
+};

package/dist/components/hooks/useLazyBackground.js

@@ -0,0 +1,44 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import { useEffect, useRef } from 'react';
+/**
+ * `useLazyBackground` is a custom React hook that applies a background image
+ * to a `<div>` element only when it enters the viewport (lazy-loading).
+ *
+ * @param {TLazyBackground} props - The props object containing the image URL.
+ */
+export var useLazyBackground = function (_a) {
+    var url = _a.url;
+    var ref = useRef(null);
+    useEffect(function () {
+        var el = ref.current;
+        if (!el)
+            return;
+        var observer = new IntersectionObserver(function (_a, obs) {
+            var _b = __read(_a, 1), entry = _b[0];
+            if (entry.isIntersecting) {
+                el.style.backgroundImage = "url(".concat(url, ")");
+                obs.unobserve(el);
+            }
+        });
+        observer.observe(el);
+        return function () { return observer.disconnect(); };
+    }, [url]);
+    return {
+        ref: ref,
+    };
+};

package/dist/components/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Form } from './Form';
+export { default as LazyBackground } from './LazyBackground';
+export type * from './types';

package/dist/components/index.js

@@ -0,0 +1,2 @@
+export { default as Form } from './Form';
+export { default as LazyBackground } from './LazyBackground';

package/dist/constants/regex.d.ts

@@ -0,0 +1,40 @@
+export declare const VALID_EMAIL: {
+    re: RegExp;
+    text: string;
+};
+export declare const DOTALPHANUM: {
+    re: RegExp;
+    text: string;
+};
+export declare const REPEATED_DOT: {
+    re: RegExp;
+    text: string;
+};
+export declare const NUMBER_ONLY: {
+    re: RegExp;
+    text: string;
+};
+export declare const ALPHASPACE: {
+    re: RegExp;
+    text: string;
+};
+export declare const ANY_UPPERCASE: {
+    re: RegExp;
+    text: string;
+};
+export declare const ANY_LOWERCASE: {
+    re: RegExp;
+    text: string;
+};
+export declare const ANY_NUMBER: {
+    re: RegExp;
+    text: string;
+};
+export declare const ANY_SYMBOL: {
+    re: RegExp;
+    text: string;
+};
+export declare const NO_SPACE: {
+    re: RegExp;
+    text: string;
+};

package/dist/constants/regex.js

@@ -0,0 +1,40 @@
+export var VALID_EMAIL = {
+    re: /^(?![.])[A-Za-z0-9._-]+(?<![.])@[A-Za-z0-9-]+(\.[A-Za-z0-9-]+)*\.[A-Za-z]{2,4}$/,
+    text: 'masukkan email yang valid',
+};
+export var DOTALPHANUM = {
+    re: /^[a-zA-Z0-9._-]+$/,
+    text: " hanya boleh berisi huruf, angka, '.', '_' atau '-'",
+};
+export var REPEATED_DOT = {
+    re: /(\.\.|__|--)/,
+    text: ' tidak boleh berisi simbol berulang',
+};
+export var NUMBER_ONLY = {
+    re: /[^\d]/,
+    text: ' hanya boleh berisi angka',
+};
+export var ALPHASPACE = {
+    re: /^[A-Za-z]+(?: [A-Za-z]+)*$/,
+    text: ' hanya boleh berisi huruf dan spasi antar kata',
+};
+export var ANY_UPPERCASE = {
+    re: /[A-Z]/,
+    text: ' harus berisi minimal 1 huruf kapital',
+};
+export var ANY_LOWERCASE = {
+    re: /[a-z]/,
+    text: ' harus berisi minimal 1 huruf kecil',
+};
+export var ANY_NUMBER = {
+    re: /\d/,
+    text: ' harus berisi minimal 1 angka',
+};
+export var ANY_SYMBOL = {
+    re: /[\W+_]/,
+    text: ' harus berisi minimal 1 simbol',
+};
+export var NO_SPACE = {
+    re: /^\S+$/,
+    text: ' tidak boleh berisi spasi',
+};

package/dist/hooks/form.d.ts

@@ -0,0 +1,44 @@
+import type { TPrimitive } from '@/types';
+/**
+ * Represents a single form field item, containing its value, element ID, and related helper elements.
+ *
+ * @template T - The type of the field value.
+ * @property {T} field_value - The current value of the field (string, number, boolean, etc.).
+ * @property {string} field_id - The ID attribute of the input element.
+ * @property {HTMLElement | null} [field_error] - The element that displays the error message (e.g. `#field_error`).
+ * @property {HTMLElement | null} [field_info] - The element that displays extra info (e.g. `#field_info`).
+ */
+export type TFieldItem<T> = {
+    field_value: T;
+    field_id: string;
+    field_error?: HTMLElement | null;
+    field_info?: HTMLElement | null;
+};
+/**
+ * Represents a collection of fields keyed by their input names, where each key maps to a `TFieldItem`.
+ *
+ * @template T - The record type mapping field names to primitive values.
+ */
+type TFields<T extends Record<string, TPrimitive>> = {
+    [K in keyof T & string]: TFieldItem<T[K]>;
+};
+/**
+ * A custom React hook for managing form fields and their associated elements.
+ *
+ * This hook provides access to both named form inputs (retrieved from an HTML `<form>`)
+ * and standalone fields that do not belong to the form (`fieldsWithoutName`).
+ *
+ * It simplifies working with dynamic forms by returning structured data that includes
+ * field values, IDs, and linked error/info elements.
+ *
+ * @template T - The type for form fields inside the `<form>`.
+ * @template U - The type for standalone fields outside the `<form>`.
+ *
+ * @param {string[]} [fieldsWithoutNameIds=[]] - A list of field IDs that exist outside the form element.
+ */
+export declare function useForm<T extends Record<string, TPrimitive>, U extends Record<string, TPrimitive> = Record<string, TPrimitive>>(fieldsWithoutNameIds?: (keyof U & string)[]): {
+    form: import("react").RefObject<HTMLFormElement | null>;
+    fields: () => TFields<T>;
+    fieldsWithoutName: () => TFields<U>;
+};
+export {};

package/dist/hooks/form.js

@@ -0,0 +1,94 @@
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import { useRef } from 'react';
+import { getById } from '@/utils/general';
+/**
+ * A custom React hook for managing form fields and their associated elements.
+ *
+ * This hook provides access to both named form inputs (retrieved from an HTML `<form>`)
+ * and standalone fields that do not belong to the form (`fieldsWithoutName`).
+ *
+ * It simplifies working with dynamic forms by returning structured data that includes
+ * field values, IDs, and linked error/info elements.
+ *
+ * @template T - The type for form fields inside the `<form>`.
+ * @template U - The type for standalone fields outside the `<form>`.
+ *
+ * @param {string[]} [fieldsWithoutNameIds=[]] - A list of field IDs that exist outside the form element.
+ */
+export function useForm(fieldsWithoutNameIds) {
+    if (fieldsWithoutNameIds === void 0) { fieldsWithoutNameIds = []; }
+    var form = useRef(null);
+    var fields = function () {
+        var e_1, _a;
+        var result = {};
+        if (!form.current)
+            return result;
+        var formData = new FormData(form.current);
+        try {
+            for (var _b = __values(formData.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var _d = __read(_c.value, 2), name_1 = _d[0], value = _d[1];
+                var key = name_1;
+                var input = form.current.querySelector("[name=\"".concat(key, "\"]"));
+                var fieldValue = value;
+                if ((input === null || input === void 0 ? void 0 : input.type) === 'checkbox')
+                    fieldValue = input.checked;
+                result[key] = {
+                    field_value: fieldValue,
+                    field_id: (input === null || input === void 0 ? void 0 : input.id) || '',
+                    field_error: form.current.querySelector("#".concat(key, "_error")),
+                    field_info: form.current.querySelector("#".concat(key, "_info")),
+                };
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        return result;
+    };
+    var fieldsWithoutName = function () {
+        var result = {};
+        fieldsWithoutNameIds.forEach(function (id) {
+            var field = getById(id);
+            var key = id;
+            var value = field.type === 'radio' || field.type === 'checkbox' ? field.checked : field.value;
+            result[key] = {
+                field_value: value,
+                field_id: field.id,
+                field_error: getById("".concat(key, "_error")),
+                field_info: getById("".concat(key, "_info")),
+            };
+        });
+        return result;
+    };
+    return { form: form, fields: fields, fieldsWithoutName: fieldsWithoutName };
+}

package/dist/hooks/sectionObserver.d.ts

@@ -0,0 +1,8 @@
+import { type RefObject } from 'react';
+type TSectionObserverProps = {
+    triggerRef: RefObject<HTMLElement | null>;
+    targetId: string;
+    threshold?: number;
+};
+export declare const useSectionObserver: ({ triggerRef, targetId, threshold }: TSectionObserverProps) => void;
+export {};

package/dist/hooks/sectionObserver.js

@@ -0,0 +1,41 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import { useEffect } from 'react';
+import { getById } from '@/utils/general';
+export var useSectionObserver = function (_a) {
+    var triggerRef = _a.triggerRef, targetId = _a.targetId, _b = _a.threshold, threshold = _b === void 0 ? 0.8 : _b;
+    useEffect(function () {
+        var container = getById(targetId);
+        var trigger = triggerRef.current;
+        if (!trigger || !container)
+            return;
+        var observer = new IntersectionObserver(function (_a) {
+            var _b = __read(_a, 1), entry = _b[0];
+            if (entry.isIntersecting) {
+                container.setAttribute('data-visible', 'true');
+                return;
+            }
+            if (entry.boundingClientRect.top > 0) {
+                container.setAttribute('data-visible', 'false');
+            }
+        }, { threshold: threshold });
+        observer.observe(trigger);
+        return function () {
+            observer.disconnect();
+        };
+    }, [triggerRef, targetId, threshold]);
+};

package/dist/index.d.ts

@@ -1,11 +1,15 @@
-export * from "./constants";
-export * from "./hooks/debounce";
-export * from "./hooks/router";
-export * from "./hooks/slider";
-export * from "./types";
-export * from "./utils/api";
-export * from "./utils/cookie";
-export * from "./utils/file";
-export * from "./utils/general";
-export * from "./utils/local";
-export { default as createApi } from "./utils/useApi";
+export * from './components';
+export * from './constants';
+export * from './hooks/debounce';
+export * from './hooks/form';
+export * from './hooks/router';
+export * from './hooks/sectionObserver';
+export * from './hooks/slider';
+export * from './types';
+export * from './utils/api';
+export * from './utils/cookie';
+export * from './utils/error-provider';
+export * from './utils/file';
+export * from './utils/general';
+export * from './utils/local';
+export { default as createApi } from './utils/useApi';

package/dist/index.js

@@ -1,11 +1,15 @@
-export * from "./constants";
-export * from "./hooks/debounce";
-export * from "./hooks/router";
-export * from "./hooks/slider";
-export * from "./types";
-export * from "./utils/api";
-export * from "./utils/cookie";
-export * from "./utils/file";
-export * from "./utils/general";
-export * from "./utils/local";
-export { default as createApi } from "./utils/useApi";
+export * from './components';
+export * from './constants';
+export * from './hooks/debounce';
+export * from './hooks/form';
+export * from './hooks/router';
+export * from './hooks/sectionObserver';
+export * from './hooks/slider';
+export * from './types';
+export * from './utils/api';
+export * from './utils/cookie';
+export * from './utils/error-provider';
+export * from './utils/file';
+export * from './utils/general';
+export * from './utils/local';
+export { default as createApi } from './utils/useApi';

package/dist/types/index.d.ts

@@ -1 +1,2 @@
-export type * from "./meta.d.ts";
+export type * from './general.d.ts';
+export type * from './meta.d.ts';

package/dist/utils/api.d.ts

@@ -1,4 +1,4 @@
-export type TPrimitive = string | number | boolean;
+import { TPrimitive } from '@/types';
 export type TProgress = {
     loaded: number;
     total: number;
@@ -38,7 +38,7 @@ export type TApiConfig = {
     /** Endpoint URL (relative or absolute) */
     url: string;
     /** HTTP method for the request */
-    method?: "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
+    method?: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
     /** Request body content */
     body?: globalThis.BodyInit;
     /** Request mode (e.g., 'cors', 'same-origin') */

package/dist/utils/api.js

@@ -83,13 +83,13 @@ export var buildURL = function (url, params) {
         .map(function (_a) {
         var _b = __read(_a, 2), key = _b[0], value = _b[1];
         if (Array.isArray(value)) {
-            var joined = value.map(function (v) { return encodeURIComponent(v); }).join(",");
+            var joined = value.map(function (v) { return encodeURIComponent(v); }).join(',');
             return "".concat(encodeURIComponent(key), "=").concat(joined);
         }
         return "".concat(encodeURIComponent(key), "=").concat(encodeURIComponent(value));
     })
-        .join("&");
-    return url.includes("?") ? "".concat(url, "&").concat(queryString) : "".concat(url, "?").concat(queryString);
+        .join('&');
+    return url.includes('?') ? "".concat(url, "&").concat(queryString) : "".concat(url, "?").concat(queryString);
 };
 var ApiMeta = /** @class */ (function (_super) {
     __extends(ApiMeta, _super);
@@ -106,9 +106,9 @@ var ApiInstance = /** @class */ (function () {
     function ApiInstance(options) {
         if (options === void 0) { options = {}; }
         this.interceptors = {};
-        this.baseURL = options.baseURL || "";
+        this.baseURL = options.baseURL || '';
         this.defaultHeaders = options.headers || {};
-        this.source = "komcards-".concat(options.source || "default");
+        this.source = "komcards-".concat(options.source || 'default');
         this.cache = new Map();
         this.maxCacheSize = options.maxCacheSize || 100;
         this.cacheAccessOrder = [];
@@ -141,7 +141,7 @@ var ApiInstance = /** @class */ (function () {
             return __generator(this, function (_a) {
                 return [2 /*return*/, new Promise(function (resolve, reject) {
                         var xhr = new XMLHttpRequest();
-                        var method = (init.method || "GET").toUpperCase();
+                        var method = (init.method || 'GET').toUpperCase();
                         xhr.open(method, input);
                         if (init.headers) {
                             var headers = new Headers(init.headers);
@@ -150,7 +150,7 @@ var ApiInstance = /** @class */ (function () {
                             });
                         }
                         if (onUpload && xhr.upload) {
-                            xhr.upload.addEventListener("progress", function (e) {
+                            xhr.upload.addEventListener('progress', function (e) {
                                 var total = e.lengthComputable ? e.total : 0;
                                 var percentage = e.lengthComputable ? Math.round((e.loaded / e.total) * 100) : 0;
                                 onUpload({
@@ -161,8 +161,8 @@ var ApiInstance = /** @class */ (function () {
                             });
                         }
                         if (onDownload) {
-                            xhr.responseType = "blob";
-                            xhr.addEventListener("progress", function (e) {
+                            xhr.responseType = 'blob';
+                            xhr.addEventListener('progress', function (e) {
                                 var total = e.lengthComputable ? e.total : 0;
                                 var percentage = e.lengthComputable ? Math.round((e.loaded / e.total) * 100) : 0;
                                 onDownload({
@@ -173,18 +173,18 @@ var ApiInstance = /** @class */ (function () {
                             });
                         }
                         if (init.signal) {
-                            init.signal.addEventListener("abort", function () {
+                            init.signal.addEventListener('abort', function () {
                                 xhr.abort();
-                                reject(new DOMException("The operation was aborted.", "AbortError"));
+                                reject(new DOMException('The operation was aborted.', 'AbortError'));
                             });
                         }
                         xhr.onload = function () {
                             var headers = new Headers();
                             xhr
                                 .getAllResponseHeaders()
-                                .split("\r\n")
+                                .split('\r\n')
                                 .forEach(function (line) {
-                                var parts = line.split(": ");
+                                var parts = line.split(': ');
                                 if (parts.length === 2) {
                                     headers.append(parts[0], parts[1]);
                                 }
@@ -196,8 +196,8 @@ var ApiInstance = /** @class */ (function () {
                             });
                             resolve(response);
                         };
-                        xhr.onerror = function () { return reject(new TypeError("Network request failed")); };
-                        xhr.ontimeout = function () { return reject(new TypeError("Network request timeout")); };
+                        xhr.onerror = function () { return reject(new TypeError('Network request failed')); };
+                        xhr.ontimeout = function () { return reject(new TypeError('Network request timeout')); };
                         xhr.send(init.body);
                     })];
             });
@@ -242,7 +242,7 @@ var ApiInstance = /** @class */ (function () {
                                     case 6: return [2 /*return*/, { value: res }];
                                     case 7:
                                         err_1 = _b.sent();
-                                        if (err_1 instanceof Error && err_1.name === "AbortError") {
+                                        if (err_1 instanceof Error && err_1.name === 'AbortError') {
                                             throw err_1;
                                         }
                                         lastErr = err_1;
@@ -356,7 +356,7 @@ var ApiInstance = /** @class */ (function () {
                     case 1:
                         finalConfig = _d.sent();
                         cacheKey = this.buildcacheKey(finalConfig);
-                        if (finalConfig.cache && finalConfig.cache.enabled && finalConfig.method === "GET") {
+                        if (finalConfig.cache && finalConfig.cache.enabled && finalConfig.method === 'GET') {
                             cached = this.getCacheEntry(cacheKey);
                             if (cached) {
                                 expired = cached.ttl && Date.now() - cached.timestamp > cached.ttl;
@@ -370,13 +370,9 @@ var ApiInstance = /** @class */ (function () {
                         finalURL = buildURL(url, finalConfig.params);
                         isFormData = finalConfig.body instanceof FormData;
                         return [4 /*yield*/, this.fetchWithRetry(finalURL, {
-                                method: finalConfig.method || "GET",
-                                headers: __assign(__assign(__assign({}, (isFormData ? {} : { "Content-Type": "application/json" })), this.defaultHeaders), finalConfig.headers),
-                                body: isFormData
-                                    ? finalConfig.body
-                                    : finalConfig.body
-                                        ? JSON.stringify(finalConfig.body)
-                                        : undefined,
+                                method: finalConfig.method || 'GET',
+                                headers: __assign(__assign(__assign({}, (isFormData ? {} : { 'Content-Type': 'application/json' })), this.defaultHeaders), finalConfig.headers),
+                                body: isFormData ? finalConfig.body : finalConfig.body ? JSON.stringify(finalConfig.body) : undefined,
                             }, (_b = finalConfig.retry) !== null && _b !== void 0 ? _b : 0, finalConfig.signal, finalConfig.onUpload, finalConfig.onDownload)];
                     case 2:
                         response = _d.sent();
@@ -404,15 +400,15 @@ var ApiInstance = /** @class */ (function () {
                         errorText = _d.sent();
                         throw new Error(errorText || finalResponse.statusText);
                     case 8:
-                        contentType = finalResponse.headers.get("content-type") || "";
+                        contentType = finalResponse.headers.get('content-type') || '';
                         data = void 0;
-                        if (!contentType.includes("application/json")) return [3 /*break*/, 10];
+                        if (!contentType.includes('application/json')) return [3 /*break*/, 10];
                         return [4 /*yield*/, finalResponse.json()];
                     case 9:
                         data = (_d.sent());
                         return [3 /*break*/, 14];
                     case 10:
-                        if (!contentType.includes("text/")) return [3 /*break*/, 12];
+                        if (!contentType.includes('text/')) return [3 /*break*/, 12];
                         return [4 /*yield*/, finalResponse.text()];
                     case 11:
                         data = (_d.sent());
@@ -422,7 +418,7 @@ var ApiInstance = /** @class */ (function () {
                         data = (_d.sent());
                         _d.label = 14;
                     case 14:
-                        if (finalConfig.cache && finalConfig.cache.enabled && finalConfig.method === "GET") {
+                        if (finalConfig.cache && finalConfig.cache.enabled && finalConfig.method === 'GET') {
                             this.setCacheEntry(cacheKey, {
                                 data: data,
                                 timestamp: Date.now(),
@@ -440,23 +436,23 @@ var ApiInstance = /** @class */ (function () {
     };
     ApiInstance.prototype.get = function (url, config) {
         if (config === void 0) { config = {}; }
-        return this.request(__assign(__assign({}, config), { url: url, method: "GET" }));
+        return this.request(__assign(__assign({}, config), { url: url, method: 'GET' }));
     };
     ApiInstance.prototype.post = function (url, body, config) {
         if (config === void 0) { config = {}; }
-        return this.request(__assign(__assign({}, config), { url: url, method: "POST", body: body }));
+        return this.request(__assign(__assign({}, config), { url: url, method: 'POST', body: body }));
     };
     ApiInstance.prototype.put = function (url, body, config) {
         if (config === void 0) { config = {}; }
-        return this.request(__assign(__assign({}, config), { url: url, method: "PUT", body: body }));
+        return this.request(__assign(__assign({}, config), { url: url, method: 'PUT', body: body }));
     };
     ApiInstance.prototype.patch = function (url, body, config) {
         if (config === void 0) { config = {}; }
-        return this.request(__assign(__assign({}, config), { url: url, method: "PATCH", body: body }));
+        return this.request(__assign(__assign({}, config), { url: url, method: 'PATCH', body: body }));
     };
     ApiInstance.prototype.delete = function (url, body, config) {
         if (config === void 0) { config = {}; }
-        return this.request(__assign(__assign({}, config), { url: url, method: "DELETE", body: body }));
+        return this.request(__assign(__assign({}, config), { url: url, method: 'DELETE', body: body }));
     };
     ApiInstance.prototype.getCache = function (key) {
         var entry = this.getCacheEntry(key);
@@ -478,18 +474,10 @@ export { ApiInstance };
 var instance = new ApiInstance();
 var http = {
     get: function (url, config) { return instance.get(url, config); },
-    post: function (url, body, config) {
-        return instance.post(url, body, config);
-    },
-    put: function (url, body, config) {
-        return instance.put(url, body, config);
-    },
-    patch: function (url, body, config) {
-        return instance.patch(url, body, config);
-    },
-    delete: function (url, body, config) {
-        return instance.delete(url, body, config);
-    },
+    post: function (url, body, config) { return instance.post(url, body, config); },
+    put: function (url, body, config) { return instance.put(url, body, config); },
+    patch: function (url, body, config) { return instance.patch(url, body, config); },
+    delete: function (url, body, config) { return instance.delete(url, body, config); },
     getCache: function (key) { return instance.getCache(key); },
     setCache: function (key, data, ttl) { return instance.setCache(key, data, ttl); },
     removeCache: function (key) { return instance.removeCache(key); },

package/dist/utils/error-provider.d.ts

@@ -0,0 +1,67 @@
+import type { TFieldItem } from '@/hooks/form';
+/**
+ * Validates a generic input field and updates its associated error element and label styling based on defined rules.
+ *
+ * @template T - The type of the input field value.
+ *
+ * @param {TFieldItem<T> & { rules: Record<string, boolean> }} params - The field metadata and validation rules.
+ * @param {string} params.field_id - The ID of the input element being validated.
+ * @param {T} params.field_value - The current value of the input field.
+ * @param {HTMLElement | null} params.field_error - The error message element associated with this field.
+ * @param {Record<string, boolean>} params.rules - A mapping of error messages to their boolean validation results (`true` = invalid).
+ *
+ *
+ * @example
+ * ```tsx
+ * provideFieldError({
+ *   field_id: 'email',
+ *   field_value: 'invalid-email',
+ *   field_error: document.getElementById('email_error'),
+ *   rules: {
+ *     'Email is required': !email,
+ *     'Email format is invalid': !email.includes('@')
+ *   }
+ * })
+ * ```
+ *
+ * @remarks
+ * - If a rule evaluates to `true`, its message is displayed in the error element.
+ * - The function automatically applies a red border style (`!border-error-main`) to the associated `<label>`.
+ * - When all rules pass, the error text is cleared and the border style is removed.
+ */
+export declare const provideFieldError: <T>({ field_id, field_value, field_error, rules, }: TFieldItem<T> & {
+    rules: Record<string, boolean>;
+}) => void;
+/**
+ * Performs advanced password validation and updates the error message and styling accordingly.
+ *
+ * This function enforces password strength requirements such as:
+ * - Minimum length (8 characters)
+ * - Presence of uppercase letters, lowercase letters, numbers, and symbols
+ * - No spaces allowed
+ *
+ * It dynamically generates an error message that lists missing requirements and adjusts the label border color to indicate errors.
+ *
+ * @template T - The type of the input field value.
+ *
+ * @param {TFieldItem<T>} params - The password field metadata.
+ * @param {string} params.field_id - The ID of the password input field.
+ * @param {T} params.field_value - The current value of the password field.
+ * @param {HTMLElement | null} params.field_error - The element where password validation messages will appear.
+ *
+ *
+ * @example
+ * ```tsx
+ * providePasswordFieldError({
+ *   field_id: 'password',
+ *   field_value: 'weakPass',
+ *   field_error: document.getElementById('password_error')
+ * })
+ * ```
+ *
+ * @remarks
+ * - Displays context-aware feedback such as “add numbers or symbols to strengthen your password.”
+ * - Automatically applies or removes the red border class (`!border-error-main`) on the associated `<label>`.
+ * - Uses predefined regex constants from `@/constants/regex` for validation checks.
+ */
+export declare const providePasswordFieldError: <T>({ field_id, field_value, field_error }: TFieldItem<T>) => void;

package/dist/utils/error-provider.js

@@ -0,0 +1,158 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import { ANY_LOWERCASE, ANY_NUMBER, ANY_SYMBOL, ANY_UPPERCASE, NO_SPACE } from '@/constants/regex';
+import { getByAny } from './general';
+/**
+ * Validates a generic input field and updates its associated error element and label styling based on defined rules.
+ *
+ * @template T - The type of the input field value.
+ *
+ * @param {TFieldItem<T> & { rules: Record<string, boolean> }} params - The field metadata and validation rules.
+ * @param {string} params.field_id - The ID of the input element being validated.
+ * @param {T} params.field_value - The current value of the input field.
+ * @param {HTMLElement | null} params.field_error - The error message element associated with this field.
+ * @param {Record<string, boolean>} params.rules - A mapping of error messages to their boolean validation results (`true` = invalid).
+ *
+ *
+ * @example
+ * ```tsx
+ * provideFieldError({
+ *   field_id: 'email',
+ *   field_value: 'invalid-email',
+ *   field_error: document.getElementById('email_error'),
+ *   rules: {
+ *     'Email is required': !email,
+ *     'Email format is invalid': !email.includes('@')
+ *   }
+ * })
+ * ```
+ *
+ * @remarks
+ * - If a rule evaluates to `true`, its message is displayed in the error element.
+ * - The function automatically applies a red border style (`!border-error-main`) to the associated `<label>`.
+ * - When all rules pass, the error text is cleared and the border style is removed.
+ */
+export var provideFieldError = function (_a) {
+    var field_id = _a.field_id, field_value = _a.field_value, field_error = _a.field_error, rules = _a.rules;
+    var error = false;
+    var label = getByAny("label[for=\"".concat(field_id, "\"]"));
+    Object.entries(rules).forEach(function (_a) {
+        var _b = __read(_a, 2), message = _b[0], isError = _b[1];
+        if (isError && (!error || !!field_value)) {
+            field_error.textContent = message;
+            error = true;
+            label === null || label === void 0 ? void 0 : label.classList.add('!border-error-main');
+        }
+    });
+    if (!error) {
+        field_error.textContent = '';
+        label === null || label === void 0 ? void 0 : label.classList.remove('!border-error-main');
+    }
+};
+/**
+ * Performs advanced password validation and updates the error message and styling accordingly.
+ *
+ * This function enforces password strength requirements such as:
+ * - Minimum length (8 characters)
+ * - Presence of uppercase letters, lowercase letters, numbers, and symbols
+ * - No spaces allowed
+ *
+ * It dynamically generates an error message that lists missing requirements and adjusts the label border color to indicate errors.
+ *
+ * @template T - The type of the input field value.
+ *
+ * @param {TFieldItem<T>} params - The password field metadata.
+ * @param {string} params.field_id - The ID of the password input field.
+ * @param {T} params.field_value - The current value of the password field.
+ * @param {HTMLElement | null} params.field_error - The element where password validation messages will appear.
+ *
+ *
+ * @example
+ * ```tsx
+ * providePasswordFieldError({
+ *   field_id: 'password',
+ *   field_value: 'weakPass',
+ *   field_error: document.getElementById('password_error')
+ * })
+ * ```
+ *
+ * @remarks
+ * - Displays context-aware feedback such as “add numbers or symbols to strengthen your password.”
+ * - Automatically applies or removes the red border class (`!border-error-main`) on the associated `<label>`.
+ * - Uses predefined regex constants from `@/constants/regex` for validation checks.
+ */
+export var providePasswordFieldError = function (_a) {
+    var _b;
+    var field_id = _a.field_id, field_value = _a.field_value, field_error = _a.field_error;
+    var error = false;
+    var value = field_value;
+    var label = getByAny("label[for=\"".concat(field_id, "\"]"));
+    var firstRules = {
+        'password harus diisi': !value,
+        'panjang password minimal adalah 8 karakter': value.length < 8,
+    };
+    Object.entries(firstRules).forEach(function (_a) {
+        var _b = __read(_a, 2), message = _b[0], isError = _b[1];
+        if (isError && (!error || !!value)) {
+            field_error.textContent = message;
+            error = true;
+            label === null || label === void 0 ? void 0 : label.classList.add('!border-error-main');
+        }
+    });
+    var nextRules = (_b = {},
+        _b['huruf kapital'] = !ANY_UPPERCASE.re.test(value),
+        _b['huruf kecil'] = !ANY_LOWERCASE.re.test(value),
+        _b['angka'] = !ANY_NUMBER.re.test(value),
+        _b['simbol'] = !ANY_SYMBOL.re.test(value),
+        _b);
+    var nextError = Object.entries(nextRules).filter(function (_a) {
+        var _b = __read(_a, 2), _ = _b[0], rule = _b[1];
+        return rule;
+    });
+    var nextMessage = 'tambahkan ' +
+        nextError
+            .map(function (_a, idx) {
+            var _b = __read(_a, 1), message = _b[0];
+            var len = nextError.length;
+            if (len > 1 && idx >= len - 1) {
+                if (len <= 2)
+                    return " dan ".concat(message);
+                return ", dan ".concat(message);
+            }
+            if (idx > 0)
+                return ", ".concat(message);
+            return message;
+        })
+            .join('');
+    if (nextError.length > 0 && (!error || !!value)) {
+        field_error.textContent = nextMessage + ' untuk memperkuat passwordmu.';
+        if (nextError.length >= Object.keys(nextError).length - 1) {
+            field_error.textContent = 'password  terlalu lemah. ' + nextMessage + '.';
+        }
+        error = true;
+        label === null || label === void 0 ? void 0 : label.classList.add('!border-error-main');
+    }
+    if (!NO_SPACE.re.test(value) && (!error || !!value)) {
+        field_error.textContent = "password ".concat(NO_SPACE.text);
+        error = true;
+        label === null || label === void 0 ? void 0 : label.classList.add('!border-error-main');
+    }
+    if (!error) {
+        field_error.textContent = '';
+        label === null || label === void 0 ? void 0 : label.classList.remove('!border-error-main');
+    }
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fajarmaulana/komerce-lp-helper",
-  "version": "0.1.1",
-  "description": "Helper functions, hooks and utils for Komerce LP",
+  "version": "0.2.0",
+  "description": "Helper functions, hooks, and utils for Komerce LP",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -11,14 +11,30 @@
     "build": "tsc"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "react-router-dom": ">=6"
+    "react": ">=19",
+    "react-dom": ">=19",
+    "react-router-dom": ">=7"
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.8",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
+    "@eslint/js": "^9.33.0",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@typescript-eslint/eslint-plugin": "^8.39.1",
+    "@typescript-eslint/parser": "^8.39.1",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-unused-imports": "^4.1.4",
+    "globals": "^15.14.0",
+    "prettier": "^3.6.2",
+    "react-router-dom": "^7.11.0",
     "typescript": "^5.2.0"
   },
   "author": "Fajar Maulana",