@antscorp/antsomi-ui 1.3.5-beta.13 → 1.3.5-beta.15

package/es/hooks/useIntersectionObserver.d.ts

@@ -0,0 +1,57 @@
+import type { RefObject } from 'react';
+type ObserverCallback = (isIntersecting: boolean, entry: IntersectionObserverEntry) => void;
+/**
+ * Represents the options for configuring the Intersection Observer.
+ * @interface IntersectionObserverOptions
+ * @property {number | number[]} [threshold=0] - A threshold indicating the percentage of the target's visibility needed to trigger the callback.
+ * @property {Element | Document | null} [root=null] - The element that is used as the viewport for checking visibility of the target.
+ * @property {string} [rootMargin='0%'] - A margin around the root.
+ * @property {boolean} [freezeOnceVisible=false] - If true, freezes the intersection state once the element becomes visible.
+ * @property {ObserverCallback} [onChange] - A callback function to be invoked when the intersection state changes.
+ * @property {boolean} [initialIsIntersecting=false] - The initial state of the intersection.
+ */
+interface IntersectionObserverOptions extends IntersectionObserverInit {
+    freezeOnceVisible?: boolean;
+    onChange?: ObserverCallback;
+    initialIsIntersecting?: boolean;
+}
+/** Supports both array and object destructing */
+type IntersectionResult = [
+    (node?: Element | null) => void,
+    boolean,
+    IntersectionObserverEntry | undefined
+] & {
+    ref: (node?: Element | null) => void;
+    isIntersecting: boolean;
+    entry?: IntersectionObserverEntry;
+};
+/**
+ * Custom hook for tracking the intersection of a DOM element with its containing element or the viewport.
+ * @param {IntersectionObserverOptions} options - The options for the Intersection Observer.
+ * @returns {IntersectionResult} The ref callback, a boolean indicating if the element is intersecting, and the intersection observer entry.
+ * @see [Documentation](https://usehooks-ts.com/react-hook/use-intersection-observer)
+ * @see [MDN Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
+ * @example
+ * // Example 1
+ * const [ref, isIntersecting, entry] = useIntersectionObserver({ threshold: 0.5 });
+ *
+ * // Example 2
+ * const { ref, isIntersecting, entry } = useIntersectionObserver({ threshold: 0.5 });
+ */
+export declare function useIntersectionObserver(options: IntersectionObserverOptions): IntersectionResult;
+/**
+ * @deprecated Use the new signature with an unique option object instead.
+ * Custom hook for tracking the intersection of a DOM element with its containing element or the viewport.
+ * @param {RefObject<Element>} elementRef - The ref object for the DOM element to observe.
+ * @param {IntersectionObserverOptions} [options] - The options for the Intersection Observer (optional).
+ * @returns {IntersectionObserverEntry | undefined} The intersection observer entry representing the state of the intersection.
+ * @see [Documentation](https://usehooks-ts.com/react-hook/use-intersection-observer)
+ * @see [MDN Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
+ * @example
+ * const targetRef = useRef<HTMLDivElement>(null);
+ * const options = { threshold: 0.5 };
+ * const entry = useIntersectionObserver(targetRef, options);
+ * // Access the intersection details from the entry variable.
+ */
+export declare function useIntersectionObserver(elementRef: RefObject<Element>, legacyOptions: IntersectionObserverOptions): IntersectionObserverEntry | undefined;
+export {};

package/es/hooks/useIntersectionObserver.js

@@ -0,0 +1,97 @@
+/* eslint-disable prefer-destructuring */
+// Libraries
+import { useEffect, useRef, useState } from 'react';
+/**
+ * Custom hook for tracking the intersection of a DOM element with its containing element or the viewport.
+ * @param {IntersectionObserverOptions | RefObject<Element>} optionsOrLegacyRef - The options for the Intersection Observer.
+ * @param {?IntersectionObserverOptions} [legacyOptions] - The options for the Intersection Observer (optional, legacy).
+ * @returns {NewIntersectionResult | IntersectionObserverEntry | undefined} The ref callback, a boolean indicating if the element is intersecting, and the intersection observer entry.
+ * @see [Documentation](https://usehooks-ts.com/react-hook/use-intersection-observer)
+ * @see [MDN Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
+ * @example
+ * // Example 1
+ * const [ref, isIntersecting, entry] = useIntersectionObserver({ threshold: 0.5 });
+ *
+ * // Example 2
+ * const { ref, isIntersecting, entry } = useIntersectionObserver({ threshold: 0.5 });
+ */
+export function useIntersectionObserver(optionsOrLegacyRef, legacyOptions) {
+    var _a;
+    // TODO: Remove this mess when the old signature is removed.
+    const isLegacySignature = 'current' in optionsOrLegacyRef;
+    const options = isLegacySignature ? legacyOptions : optionsOrLegacyRef;
+    const { threshold = 0, root = null, rootMargin = '0%', freezeOnceVisible = false, initialIsIntersecting = false, } = options !== null && options !== void 0 ? options : {};
+    const [newRef, setNewRef] = useState(null);
+    const ref = isLegacySignature ? optionsOrLegacyRef.current : newRef;
+    const [state, setState] = useState(() => ({
+        isIntersecting: initialIsIntersecting,
+        entry: undefined,
+    }));
+    const callbackRef = useRef();
+    callbackRef.current = options === null || options === void 0 ? void 0 : options.onChange;
+    const frozen = ((_a = state.entry) === null || _a === void 0 ? void 0 : _a.isIntersecting) && freezeOnceVisible;
+    useEffect(() => {
+        // Ensure we have a ref to observe
+        if (!ref)
+            return;
+        // Ensure the browser supports the Intersection Observer API
+        if (!('IntersectionObserver' in window))
+            return;
+        // Skip if frozen
+        if (frozen)
+            return;
+        let unobserve;
+        const observer = new IntersectionObserver((entries) => {
+            const thresholds = Array.isArray(observer.thresholds)
+                ? observer.thresholds
+                : [observer.thresholds];
+            entries.forEach(entry => {
+                const isIntersecting = entry.isIntersecting &&
+                    thresholds.some(threshold => entry.intersectionRatio >= threshold);
+                setState({ isIntersecting, entry });
+                if (callbackRef.current) {
+                    callbackRef.current(isIntersecting, entry);
+                }
+                if (isIntersecting && freezeOnceVisible && unobserve) {
+                    unobserve();
+                    unobserve = undefined;
+                }
+            });
+        }, { threshold, root, rootMargin });
+        observer.observe(ref);
+        return () => {
+            observer.disconnect();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        ref,
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        JSON.stringify(threshold),
+        root,
+        rootMargin,
+        frozen,
+        freezeOnceVisible,
+    ]);
+    // ensures that if the observed element changes, the intersection observer is reinitialized
+    const prevRef = useRef(null);
+    useEffect(() => {
+        var _a;
+        if (!ref &&
+            ((_a = state.entry) === null || _a === void 0 ? void 0 : _a.target) &&
+            !freezeOnceVisible &&
+            !frozen &&
+            prevRef.current !== state.entry.target) {
+            prevRef.current = state.entry.target;
+            setState({ isIntersecting: initialIsIntersecting, entry: undefined });
+        }
+    }, [ref, state.entry, freezeOnceVisible, frozen, initialIsIntersecting]);
+    if (isLegacySignature) {
+        return state.entry;
+    }
+    const result = [setNewRef, !!state.isIntersecting, state.entry];
+    // Support object destructuring, by adding the specific values.
+    result.ref = result[0];
+    result.isIntersecting = result[1];
+    result.entry = result[2];
+    return result;
+}

package/es/hooks/useScrollToEnd.d.ts

@@ -0,0 +1 @@
+export declare const useScrollToEnd: (containerRef: React.RefObject<HTMLDivElement>, callback: () => void) => boolean;

package/es/hooks/useScrollToEnd.js

@@ -0,0 +1,30 @@
+import { useState, useEffect, useCallback } from 'react';
+export const useScrollToEnd = (containerRef, callback) => {
+    const [isAtEnd, setIsAtEnd] = useState(false);
+    const handleScroll = useCallback(() => {
+        const container = containerRef.current;
+        if (!container) {
+            return;
+        }
+        const { clientHeight, scrollHeight, scrollTop } = container;
+        console.log({ clientHeight, scrollHeight, scrollTop });
+        const isScrolledToEnd = scrollTop + clientHeight >= scrollHeight;
+        setIsAtEnd(isScrolledToEnd);
+    }, [containerRef]);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container) {
+            return;
+        }
+        container.addEventListener('scroll', handleScroll);
+        return () => {
+            container.removeEventListener('scroll', handleScroll);
+        };
+    }, [containerRef, handleScroll]);
+    useEffect(() => {
+        if (isAtEnd) {
+            callback();
+        }
+    }, [isAtEnd, callback]);
+    return isAtEnd;
+};

package/es/locales/en/translation.json

@@ -228,5 +228,13 @@
         "ninth": "Ninth",
         "tenth": "Tenth"
     },
-    "cellAction": "Click to add image"
+    "cellAction": "Click to add image",
+    "templateListing": {
+        "removeSuccess": "Remove template successfully",
+        "removeFailed": "Remove template failed",
+        "addFailed": "Add template failed",
+        "addSuccess": "Add template successfully",
+        "updateFailed": "Update template failed",
+        "updateSuccess": "Update template successfully"
+    }
 }

package/es/locales/i18n.d.ts

@@ -231,6 +231,14 @@ export declare const translationsJson: {
                 tenth: string;
             };
             cellAction: string;
+            templateListing: {
+                removeSuccess: string;
+                removeFailed: string;
+                addFailed: string;
+                addSuccess: string;
+                updateFailed: string;
+                updateSuccess: string;
+            };
         };
     };
     vi: {
@@ -300,6 +308,14 @@ export declare const translationsJson: {
                 tenth: string;
             };
             close: string;
+            templateListing: {
+                removeSuccess: string;
+                removeFailed: string;
+                addFailed: string;
+                addSuccess: string;
+                updateFailed: string;
+                updateSuccess: string;
+            };
         };
     };
 };

package/es/locales/translations.d.ts

@@ -231,6 +231,14 @@ export declare const convertLanguageJsonToObject: (json: any, objToConvertTo?: C
         tenth: string;
     };
     cellAction: string;
+    templateListing: {
+        removeSuccess: string;
+        removeFailed: string;
+        addFailed: string;
+        addSuccess: string;
+        updateFailed: string;
+        updateSuccess: string;
+    };
 }>, current?: string) => void;
 export declare const t: (id: string, ...rest: any[]) => [string, ...any[]];
 export declare const getTranslateMessage: (id: string, defaultMessage?: string, value?: Record<string, unknown>) => string;

package/es/locales/vi/translation.json

@@ -63,5 +63,13 @@
         "ninth": "thứ chín",
         "tenth": "thứ mười"
     },
-    "close": "Đóng"
+    "close": "Đóng",
+    "templateListing": {
+        "removeSuccess": "Xóa mẫu thành công",
+        "removeFailed": "Xóa mẫu thất bại",
+        "addFailed": "Thêm mẫu thất bại",
+        "addSuccess": "Thêm mẫu thành công",
+        "updateFailed": "Cập nhật mẫu thất bại",
+        "updateSuccess": "Cập nhật mẫu thành công"
+    }
 }

package/es/models/ObjectTemplate.d.ts

@@ -0,0 +1,28 @@
+import { TTemplateStatus } from '../types/templateListing';
+export type TTemplateCategory = {};
+export interface ObjectTemplate {
+    templateId: number;
+    templateName: string;
+    objectType: number;
+    publicLevel: number;
+    networkId: number;
+    description: string;
+    properties: Record<string, any>;
+    cUserId: number;
+    uUserId: number;
+    status: TTemplateStatus;
+    ctime: string;
+    utime: string;
+    thumbnail: string;
+    deviceType: number;
+    templateType: number;
+    templateSetting: Record<string, any>;
+    config: Record<string, any>;
+    configObject: Record<string, any>;
+    objective: number[];
+    seasonality: number[];
+    industry: number[];
+    goal: number[];
+    journeyType: number[];
+    lifecycleStage: number[];
+}

package/es/models/ObjectTemplate.js

@@ -0,0 +1,28 @@
+export {};
+// export class TemplateCategory extends Model<TTemplateCategory> {
+//   get id() {
+//     return this.model.media_id || '';
+//   }
+//   get name() {
+//     return this.model.name || '';
+//   }
+//   get url() {
+//     return this.model.properties?.url || '';
+//   }
+//   get thumbnail() {
+//     return this.model.properties?.thumbnail || '';
+//   }
+//   get createdAt() {
+//     return moment(this.model.ctime, true).isValid() ? moment(this.model.ctime) : null;
+//   }
+//   get size() {
+//     return +(this.model.properties?.size || 0);
+//   }
+//   get sizeString() {
+//     const { properties } = this.model;
+//     const dimensionsFile = properties?.dimensions_file;
+//     return `${Math.round(10 * ((properties?.size || 0) / 1024)) / 10} KB, ${
+//       dimensionsFile?.width
+//     } x ${dimensionsFile?.height} `;
+//   }
+// }

package/es/models/TemplateCategory.d.ts

@@ -0,0 +1,13 @@
+import { TObjectType } from '../types/templateListing';
+export type TTemplateCategory = {};
+export interface TemplateCategory {
+    categoryId: number;
+    categoryCode: string;
+    parentCategoryCode: string;
+    categoryName: string;
+    description: string;
+    objectTypes: TObjectType[];
+    filterOperator?: string;
+    children: TemplateCategory[];
+    total?: number;
+}

package/es/models/TemplateCategory.js

@@ -0,0 +1,28 @@
+export {};
+// export class TemplateCategory extends Model<TTemplateCategory> {
+//   get id() {
+//     return this.model.media_id || '';
+//   }
+//   get name() {
+//     return this.model.name || '';
+//   }
+//   get url() {
+//     return this.model.properties?.url || '';
+//   }
+//   get thumbnail() {
+//     return this.model.properties?.thumbnail || '';
+//   }
+//   get createdAt() {
+//     return moment(this.model.ctime, true).isValid() ? moment(this.model.ctime) : null;
+//   }
+//   get size() {
+//     return +(this.model.properties?.size || 0);
+//   }
+//   get sizeString() {
+//     const { properties } = this.model;
+//     const dimensionsFile = properties?.dimensions_file;
+//     return `${Math.round(10 * ((properties?.size || 0) / 1024)) / 10} KB, ${
+//       dimensionsFile?.width
+//     } x ${dimensionsFile?.height} `;
+//   }
+// }

package/es/queries/TemplateListing/index.d.ts

@@ -0,0 +1,19 @@
+import { UseInfiniteQueryOptions, UseMutationOptions, UseQueryOptions } from '@tanstack/react-query';
+import { TemplateCategory } from '@antscorp/antsomi-ui/es/models/TemplateCategory';
+import { TBulkUpdateObjectTemplateArgs, TGetCategoryListArgs, TGetObjectTemplateListArgs } from '@antscorp/antsomi-ui/es/services/TemplateListing';
+import { ResponseListing } from '../../types';
+import { ObjectTemplate } from '../../models/ObjectTemplate';
+export type TGetTemplateCategoryList = {
+    args: TGetCategoryListArgs;
+    options?: UseQueryOptions<any, any, TemplateCategory[], any[]>;
+};
+export type TGetObjectTEmplateList = {
+    args: TGetObjectTemplateListArgs;
+    options?: UseInfiniteQueryOptions<any, any, ResponseListing<ObjectTemplate>, (string | number)[]>;
+};
+export type TBulkUpdateTemplate = {
+    options?: UseMutationOptions<any, any, TBulkUpdateObjectTemplateArgs, unknown>;
+};
+export declare const useGetTemplateCategoryList: (params: TGetTemplateCategoryList) => import("@tanstack/react-query").UseQueryResult<TemplateCategory[], any>;
+export declare const useGetObjectTemplateList: (params: TGetObjectTEmplateList) => import("@tanstack/react-query").UseInfiniteQueryResult<ResponseListing<ObjectTemplate>, any>;
+export declare const useBulkUpdateTemplate: (params: TBulkUpdateTemplate) => import("@tanstack/react-query").UseMutationResult<any, any, TBulkUpdateObjectTemplateArgs, unknown>;

package/es/queries/TemplateListing/index.js

@@ -0,0 +1,43 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+// Libraries
+import { useInfiniteQuery, useMutation, useQuery, } from '@tanstack/react-query';
+// Services
+import { templateListingServices, } from '@antscorp/antsomi-ui/es/services/TemplateListing';
+// Constants
+import { QUERY_KEYS } from '../../constants/queries';
+import { queryClientAntsomiUI } from '../configs';
+const { category, objectTemplate } = templateListingServices;
+export const useGetTemplateCategoryList = (params) => {
+    const { options, args } = params;
+    return useQuery(Object.assign({ queryKey: [QUERY_KEYS.GET_TEMPLATE_CATEGORY_LIST, args.params], queryFn: () => category.getList(params.args), onSuccess() { } }, options));
+};
+export const useGetObjectTemplateList = (params) => {
+    const { options, args } = params;
+    return useInfiniteQuery(Object.assign({ queryKey: [QUERY_KEYS.GET_OBJECT_TEMPLATE_LIST, args.params], queryFn: ({ pageParam = 1 }) => __awaiter(void 0, void 0, void 0, function* () {
+            const res = yield objectTemplate.getList(Object.assign(Object.assign({}, args), { params: Object.assign(Object.assign({}, args.params), { page: pageParam }) }));
+            return res;
+        }), getNextPageParam: lastPage => {
+            const { meta } = lastPage;
+            const { currentPage, totalPages } = meta;
+            return +currentPage < +totalPages ? Number(lastPage.meta.currentPage) + 1 : undefined;
+        } }, options));
+};
+export const useBulkUpdateTemplate = (params) => {
+    const { options } = params;
+    return useMutation(Object.assign({ mutationFn: objectTemplate.bulkUpdate, onSettled() {
+            queryClientAntsomiUI.invalidateQueries([QUERY_KEYS.GET_OBJECT_TEMPLATE_LIST], {
+                exact: false,
+            });
+            queryClientAntsomiUI.invalidateQueries([QUERY_KEYS.GET_TEMPLATE_CATEGORY_LIST], {
+                exact: false,
+            });
+        } }, options));
+};

package/es/services/TemplateListing/index.d.ts

@@ -0,0 +1,35 @@
+import { PaginationRequest, PayloadInfo, ResponseListing } from '../../types';
+import { TObjectType, TPublicLevel } from '../../types/templateListing';
+import { TemplateCategory } from '../../models/TemplateCategory';
+import { ObjectTemplate } from '../../models/ObjectTemplate';
+export type TGetCategoryListArgs = {
+    params: {
+        objectTypes: TObjectType[];
+        categoryCodes?: string[];
+        publicLevel?: TPublicLevel;
+    };
+    infos: PayloadInfo;
+};
+export type TGetObjectTemplateListArgs = {
+    params: {
+        objectType: TObjectType;
+        publicLevel: TPublicLevel;
+    } & PaginationRequest;
+    infos: PayloadInfo;
+};
+export type TBulkUpdateObjectTemplateArgs = {
+    params: {
+        templateIds: number[];
+        data: Partial<ObjectTemplate>;
+    };
+    infos: PayloadInfo;
+};
+export declare const templateListingServices: {
+    category: {
+        getList: ({ params, infos }: TGetCategoryListArgs) => Promise<TemplateCategory[]>;
+    };
+    objectTemplate: {
+        getList: ({ params, infos, }: TGetObjectTemplateListArgs) => Promise<ResponseListing<ObjectTemplate>>;
+        bulkUpdate: ({ params, infos }: TBulkUpdateObjectTemplateArgs) => Promise<any>;
+    };
+};

package/es/services/TemplateListing/index.js

@@ -0,0 +1,69 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+// Libraries
+import { get } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
+// Services
+// Types
+import axios from 'axios';
+const TEMPLATE_CATEGORY_ROUTE = 'template-category/index';
+const OBJECT_TEMPLATE_ROUTE = 'object_template';
+export const templateListingServices = {
+    category: {
+        getList: ({ params, infos }) => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                const { objectTypes = [], categoryCodes, publicLevel } = params;
+                const response = yield axios({
+                    method: 'GET',
+                    url: `${infos.url}/${TEMPLATE_CATEGORY_ROUTE}`,
+                    params: Object.assign({ _token: infos.token, _user_id: infos.userId, _account_id: infos.accountId, objectTypes: objectTypes.join(','), publicLevel: publicLevel !== null && publicLevel !== void 0 ? publicLevel : 0 }, (!isEmpty(categoryCodes) ? { categoryCodes: categoryCodes === null || categoryCodes === void 0 ? void 0 : categoryCodes.join(',') } : {})),
+                });
+                return get(response, 'data.data', []);
+            }
+            catch (error) {
+                return Promise.reject(error);
+            }
+        }),
+    },
+    objectTemplate: {
+        getList: ({ params, infos, }) => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                const response = yield axios({
+                    method: 'GET',
+                    url: `${infos.url}/${OBJECT_TEMPLATE_ROUTE}`,
+                    params: Object.assign({ _token: infos.token, _user_id: infos.userId, _account_id: infos.accountId }, params),
+                });
+                return get(response, 'data.data', {});
+            }
+            catch (error) {
+                return Promise.reject(error);
+            }
+        }),
+        bulkUpdate: ({ params, infos }) => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                const response = yield axios({
+                    method: 'POST',
+                    url: `${infos.url}/${OBJECT_TEMPLATE_ROUTE}/bulk-update`,
+                    params: {
+                        _token: infos.token,
+                        _user_id: infos.userId,
+                        _account_id: infos.accountId,
+                        templateIds: (params.templateIds || []).join(','),
+                    },
+                    data: params.data,
+                });
+                return get(response, 'data.data', {});
+            }
+            catch (error) {
+                return Promise.reject(error);
+            }
+        }),
+    },
+};

package/es/test.js

@@ -2,7 +2,7 @@
 import React, { useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import '@antscorp/icons/main.css';
-import { ConfigProvider, InputDynamic, SettingWrapper, UploadImage, SlideBar, } from './components';
+import { ConfigProvider, InputDynamic, SettingWrapper, UploadImage, useTemplateListing, } from './components';
 // Queries configs
 import { queryClientAntsomiUI, QueryClientProviderAntsomiUI } from './queries';
 export const BACKGROUND_COLOR_STYLE = {
@@ -66,7 +66,23 @@ export const App = () => {
     const [sliderValue, setSliderValue] = useState(10);
     const [edge, setEdge] = useState(['auto', 'auto', 700, 700]);
     const [icon, setIcon] = useState('');
-    console.log('valueShortlink :>', valueShortlink);
+    const { categoryItems, templateItems, checkedCategories, openCategoryKeys, isLoadingCategoryList, isLoadingTemplateList, onLoadMore, onChangeOpenCategoryKeys, onChangeCheckedCategories, onRemoveObjectTemplate, } = useTemplateListing({
+        service: {
+            url: 'http://localhost:3000/api/v1',
+            token: '5474r2x214r2c4d4v2e4y4y5r4q5j446c4j4a4b4j5',
+            userId: '1600007829',
+            accountId: '1600007829',
+        },
+        config: {
+            objectType: 1,
+            publicLevel: 0,
+            limitListPerPage: 10,
+        },
+        checkedCategoriesDefault: {
+            device_type: [1, 2],
+            template_type: [1, 2, 3, 4, 5],
+        },
+    });
     const callbackColorSetting = (key, dataIn) => {
         switch (key) {
             case 'ON_ADD_NEW_PRESET':
@@ -100,15 +116,20 @@ export const App = () => {
         console.log({ type, data });
     };
     // --------------------------- Test SlideBar start -------------------------------------------
-    return (React.createElement("div", { style: {
-            width: 500,
-            height: 500,
-            border: '1px solid black',
-            margin: '0 auto',
-            padding: 12,
-            borderRadius: '10px',
-        } },
-        React.createElement(SlideBar, Object.assign({}, stateSlideBar, { callback: callbackSlideBar }))));
+    // return (
+    //   <div
+    //     style={{
+    //       width: 500,
+    //       height: 500,
+    //       border: '1px solid black',
+    //       margin: '0 auto',
+    //       padding: 12,
+    //       borderRadius: '10px',
+    //     }}
+    //   >
+    //     <SlideBar {...stateSlideBar} callback={callbackSlideBar} />
+    //   </div>
+    // );
     // --------------------------- Test SlideBar end -------------------------------------------
     // ----------------------------  Test Input Dynamic start ------------------------------
     // return (

package/es/types/index.d.ts

@@ -16,7 +16,9 @@ export type TConfigErrorInfo = {
 };
 export * from './richMenu';
 export * from './variables';
+export * from './service';
 export type PayloadInfo = {
+    url?: string;
     userId?: string;
     token?: string;
     accountId?: string;

package/es/types/index.js

@@ -1,2 +1,3 @@
 export * from './richMenu';
 export * from './variables';
+export * from './service';

package/es/types/service.d.ts

@@ -0,0 +1,17 @@
+export type TFilter = Record<string, Record<string, any>>;
+export interface PaginationRequest {
+    limit?: number;
+    page?: number;
+    filter?: string;
+}
+export interface ResponseListing<T> {
+    entities: T[];
+    meta: {
+        itemsPerPage: number;
+        totalItems: number;
+        currentPage: string;
+        totalPages: number;
+        sortBy: any[][];
+        filter: string;
+    };
+}

package/es/types/service.js

@@ -0,0 +1 @@
+export {};

package/es/types/templateListing.d.ts

@@ -0,0 +1,10 @@
+import { OBJECT_TYPES, PUBLIC_LEVEL, TEMPLATE_STATUS } from '../constants/templateListing';
+export type TObjectType = (typeof OBJECT_TYPES)[keyof typeof OBJECT_TYPES];
+export type TPublicLevel = (typeof PUBLIC_LEVEL)[keyof typeof PUBLIC_LEVEL];
+export type TTemplateStatus = (typeof TEMPLATE_STATUS)[keyof typeof TEMPLATE_STATUS];
+export type TTemplateListingConfig = {
+    objectType: TObjectType;
+    publicLevel: TPublicLevel;
+    categoryCodes?: string[];
+    limitListPerPage?: number;
+};

package/es/types/templateListing.js

@@ -0,0 +1 @@
+export {};