@antscorp/antsomi-ui 1.3.2 → 1.3.3

package/es/utils/common.js

@@ -0,0 +1,355 @@
+/* eslint-disable no-underscore-dangle */
+// Libraries
+import axios from 'axios';
+// Constants
+import { MESSAGES, PORTAL_KEYS } from '@antscorp/antsomi-ui/es/services/constants';
+/**
+ * Function to reorder list
+ * @param {Object[]} list - list of item want to reorder
+ * @param {number} startIndex - start item index want to replace position: ;
+ * @param {number} endIndex - end item index want to replace position: ;
+ * @returns {object[]}
+ */
+export const reorder = (list, startIndex, endIndex) => {
+    const result = Array.from(list);
+    const [removed] = result.splice(startIndex, 1);
+    result.splice(endIndex, 0, removed);
+    return result;
+};
+export const safeParse = (val, defaultVal) => {
+    if (typeof val === 'undefined' ||
+        val === 'undefined' ||
+        val === null ||
+        val.length === 0 ||
+        val === 'NaN') {
+        return defaultVal;
+    }
+    return val;
+};
+export function getPortalId(config) {
+    const portalId = safeParse(getSessionStorage('api_pid', config), 0);
+    if (portalId === 0) {
+        return getAppParamURL(window.location.pathname, false, config).portalId;
+    }
+    return portalId;
+    // return safeParse(getAppSession('api_pid'), 0);
+}
+export const safeParseInt = (val, defaultVal) => {
+    let tempt = safeParse(val, 0);
+    if (tempt !== 0) {
+        tempt = parseInt(tempt);
+        if (Number.isNaN(tempt)) {
+            return defaultVal;
+        }
+    }
+    return tempt;
+};
+export function isUrlEmbedded() {
+    return false;
+}
+function getDataWithEmbeddedPublic(key, config) {
+    const data = safeParse(config.embeddedData, {});
+    return data[key];
+}
+export function getWindowParam(name, config) {
+    return config[name];
+}
+export function getSessionStorage(key, config) {
+    if (isUrlEmbedded()) {
+        return getDataWithEmbeddedPublic(key, config);
+    }
+    const tempt = getWindowParam(key, config);
+    if (tempt !== undefined) {
+        return tempt;
+    }
+    if (typeof Storage !== 'undefined') {
+        return sessionStorage.getItem(key);
+    }
+    return '';
+}
+export function getMessageByCode(messageCode, def = undefined) {
+    if (def === undefined) {
+        def = 'Error happened. Please try again.';
+    }
+    const tempt = MESSAGES[messageCode];
+    if (tempt === undefined) {
+        return def;
+    }
+    return tempt;
+}
+export function urlHasQueryString(url) {
+    const arr = url.split('?');
+    if (arr.length > 1 && arr[1] !== '') {
+        return true;
+    }
+    return false;
+}
+export function isNumeric(num) {
+    return !isNaN(num) && num !== '';
+}
+export function getUserLocaleLanguage(config) {
+    return safeParse(getWindowParam(PORTAL_KEYS.USER_LANGUAGE, config), 'en');
+}
+export function getAppSession(key, config) {
+    if (isUrlEmbedded()) {
+        return getDataWithEmbeddedPublic(key, config);
+    }
+    let tempt = safeParse(getSessionStorage(key, config), '');
+    if (tempt === '') {
+        // console.error('------CAN"T NOT GET APP SESSION');
+        tempt = getCookie(key, config);
+    }
+    return window.decodeURIComponent(tempt);
+}
+export function getAppParamURL(pathname, forceVersionV2 = false, config) {
+    const output = {
+        portalId: 0,
+        accessUserId: 0,
+    };
+    const isV3 = pathname.indexOf('marketing-hub') > -1;
+    let portalId = 0;
+    let accessUserId = 0;
+    if (forceVersionV2 || !isV3) {
+        try {
+            // const arr = pathname.split('/');
+            const arr = pathname.split('v2');
+            if (arr.length >= 2) {
+                const arrTmp = arr[1].split('/');
+                // console.log('arrTmp', arrTmp);
+                if (arrTmp.length >= 2) {
+                    // console.log('arr', arrTmp);
+                    portalId = safeParseInt(arrTmp[2], 0);
+                    if (portalId <= 0) {
+                        portalId = safeParseInt(arrTmp[1], 0);
+                    }
+                }
+            }
+            if (portalId <= 0) {
+                portalId = safeParseInt(getAppSession('api_pid', config), 0);
+            }
+        }
+        catch (e) {
+            // console.error(e);
+        }
+    }
+    // V3 thêm param userid trên URL
+    // http://localhost:5000/gen2/33167/marketing-hub/journeys/3/create
+    // => http://localhost:5000/gen2/33167/1600082431/marketing-hub/journeys/3/create
+    if (isV3) {
+        try {
+            // const arr = pathname.split('/');
+            const arr = pathname.split('v2');
+            if (arr.length >= 2) {
+                const arrTmp = arr[1].split('/');
+                if (arrTmp.length >= 2) {
+                    portalId = safeParseInt(arrTmp[1], 0);
+                    accessUserId = safeParseInt(arrTmp[2], 0);
+                    // if (portalId <= 0) {
+                    //   portalId = safeParseInt(arrTmp[1], 0);
+                    // }
+                }
+            }
+            if (portalId <= 0) {
+                portalId = safeParseInt(getAppSession('api_pid', config), 0);
+            }
+        }
+        catch (e) {
+            // console.error(e);
+        }
+    }
+    output.portalId = portalId;
+    output.accessUserId = accessUserId;
+    return output;
+}
+export function callApiWithAuth(endpoint, method = 'GET', body, domain = '', config = {}, token = '', userId = '', isTicket = false, type = '', isAccount = false, isPermission = false, others = {}) {
+    console.log(token);
+    const apiPid = getPortalId(config);
+    const apiToken = token;
+    const _user_id = userId;
+    let _owner_id = userId;
+    // get from other params
+    if (isTicket) {
+        const params = {
+            _token: apiToken,
+            _account_id: _owner_id,
+            _user_id,
+        };
+        // endpoint += `${apiToken}&_account_id=${_owner_id}&_user_id=${_user_id}`;
+        if (type) {
+            params.type = type;
+            // endpoint += `&type=${type}`
+        }
+        if (body.isGetAllAppInfo) {
+            params.hasChild = body.hasChild;
+            params.from = body.from;
+        }
+        return axios({
+            method,
+            url: `${domain}/${endpoint}`,
+            params,
+            data: body,
+        }).catch(err => {
+            console.log(err);
+        });
+    }
+    if (isAccount) {
+        const params = {
+            _token: apiToken,
+            _account_id: _owner_id,
+            _user_id,
+            account_type: type,
+        };
+        return axios({
+            method,
+            url: `${domain}/${endpoint}`,
+            params,
+            data: body,
+        }).catch(err => {
+            console.log(err);
+        });
+    }
+    if (isPermission) {
+        const params = {
+            type,
+            appCode: body.appCode,
+            menuCode: body.menuCode,
+            fullParent: body.fullParent,
+            _token: apiToken,
+            _user_id: body.ownerId || _user_id,
+            _account_id: _user_id,
+        };
+        return axios({
+            method,
+            url: `${domain}/${endpoint}`,
+            params,
+            data: body,
+        }).catch(err => {
+            console.log(err);
+        });
+    }
+    if (Object.prototype.hasOwnProperty.call(others, '_owner_id')) {
+        _owner_id = safeParse(others._owner_id, '');
+    }
+    const isJourney = window.location.href.includes('marketing-hub/journeys');
+    if (_owner_id === 'all' && !isJourney) {
+        _owner_id = _user_id;
+    }
+    const headers = {
+        'Content-Type': 'application/json; charset=utf-8',
+        token: apiToken,
+    };
+    if (urlHasQueryString(endpoint)) {
+        endpoint += `&portalId=${apiPid}&languageCode=${getUserLocaleLanguage(config)}&_user_id=${_user_id}`;
+    }
+    else {
+        endpoint += `?portalId=${apiPid}&languageCode=${getUserLocaleLanguage(config)}&_user_id=${_user_id}`;
+    }
+    if (isNumeric(_owner_id)) {
+        endpoint += `&_owner_id=${_owner_id}`;
+    }
+    if (endpoint.includes('journey-histories')) {
+        endpoint += `&token=${apiToken}`;
+    }
+    return axios({
+        method,
+        url: `${domain}/${endpoint}`,
+        data: body,
+        headers,
+    }).catch(err => {
+        console.log(err);
+    });
+}
+export function getData(res, def) {
+    if (typeof res !== 'undefined') {
+        const code = parseInt(safeParse(res.data.code, 500));
+        const message = safeParse(res.data.message, '');
+        // if (code === 200) {
+        const data = safeParse(res.data.data, def);
+        return {
+            code,
+            message,
+            data,
+        };
+    }
+    return {
+        code: 500,
+        codeMessage: 'INTERNAL_SERVER_ERROR',
+        message: getMessageByCode('INTERNAL_SERVER_ERROR'),
+        data: def,
+    };
+}
+export function getEntriesV2(res, def) {
+    if (typeof res !== 'undefined') {
+        const code = parseInt(safeParse(res.data.code, 500));
+        const message = safeParse(res.data.message, '');
+        // validateRedirect(code, message);
+        let codeMessage = safeParse(res.data.codeMessage, 'INTERNAL_SERVER_ERROR');
+        let entries = def;
+        if (code === 200) {
+            const data = safeParse(res.data.data, {});
+            entries = safeParse(data.entries, []);
+            codeMessage = 'SUCCESS';
+        }
+        else {
+            const data = safeParse(res.data.data, {});
+            entries = safeParse(data.entries, def);
+        }
+        return {
+            code,
+            codeMessage,
+            // message: getMessageByCode(codeMessage),
+            messageAPI: message,
+            data: entries,
+        };
+    }
+    return {
+        code: 500,
+        codeMessage: 'INTERNAL_SERVER_ERROR',
+        // message: getMessageByCode('INTERNAL_SERVER_ERROR'),
+        data: def,
+    };
+}
+function getCookie(key, config) {
+    throw new Error('Function not implemented.');
+}
+export const getNumberFromString = (str) => {
+    try {
+        return +(str.match(/^-?\d+/) || []).flat()[0];
+    }
+    catch (error) {
+        return 0;
+    }
+};
+/**
+ * Maps a number to its corresponding ordinal text representation.
+ * @param {number} num - The number to be mapped.
+ * @return {string} The ordinal text representation of the number.
+ */
+export function mapNumberToOrdinalText(num) {
+    switch (num) {
+        case 0:
+            return 'zeroth';
+        case 1:
+            return 'first';
+        case 2:
+            return 'second';
+        case 3:
+            return 'third';
+        case 4:
+            return 'fourth';
+        case 5:
+            return 'fifth';
+        case 6:
+            return 'sixth';
+        case 7:
+            return 'seventh';
+        case 8:
+            return 'eighth';
+        case 9:
+            return 'ninth';
+        case 10:
+            return 'tenth';
+        default:
+            return '';
+    }
+}

package/es/utils/handleError.d.ts

@@ -0,0 +1,2 @@
+import { THandleErrorPayload } from '@antscorp/antsomi-ui/es/types';
+export declare const handleError: (error: any, payload: THandleErrorPayload) => void;

package/es/utils/handleError.js

@@ -0,0 +1,6 @@
+export const handleError = (error, payload) => {
+    // eslint-disable-next-line no-console
+    console.log({
+        error: payload,
+    });
+};

package/es/utils/loadable.js

@@ -0,0 +1,10 @@
+import React, { lazy, Suspense } from 'react';
+export const lazyLoad = (importFunc, selectorFunc, opts = { fallback: null }) => {
+    let lazyFactory = importFunc;
+    if (selectorFunc) {
+        lazyFactory = () => importFunc().then(module => ({ default: selectorFunc(module) }));
+    }
+    const LazyComponent = lazy(lazyFactory);
+    return (props) => (React.createElement(Suspense, { fallback: opts.fallback },
+        React.createElement(LazyComponent, Object.assign({}, props))));
+};

package/es/utils/web.js

@@ -0,0 +1,26 @@
+import { VALUE_C, VALUE_CONTROL, VALUE_LEFT_WINDOW, VALUE_V, VALUE_Z, } from '@antscorp/antsomi-ui/es/constants/keyCode';
+/**
+ * Function to parse search params string to object
+ * @param {string} searchParams - search params
+ * @returns {Record<string, unknown>}
+ */
+export const searchPramsToObject = (searchParams = '') => Object.fromEntries(new URLSearchParams(searchParams));
+let ctrlDown = false;
+export const getPreventKeyboardAction = (actions = []) => ({
+    onKeyDown: (e) => {
+        if (e.key === VALUE_CONTROL || e.key === VALUE_LEFT_WINDOW) {
+            ctrlDown = true;
+        }
+        if ((actions.includes('undo') && ctrlDown && e.key === VALUE_Z) ||
+            (actions.includes('copy') && ctrlDown && e.key === VALUE_V) ||
+            (actions.includes('paste') && ctrlDown && e.key === VALUE_C)) {
+            e.preventDefault();
+            return false;
+        }
+    },
+    onKeyUp: (e) => {
+        if (e.key === VALUE_CONTROL || e.key === VALUE_LEFT_WINDOW) {
+            ctrlDown = false;
+        }
+    },
+});

package/package.json

@@ -1,15 +1,29 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "An enterprise-class UI design language and React UI library.",
-  "main": "dist/index.js",
+  "sideEffects": [
+    "dist/*",
+    "es/**/style/*",
+    "lib/**/style/*",
+    "**/*.css",
+    "**/*.scss",
+    "**/*.less"
+  ],
   "files": [
+    "es",
     "dist"
   ],
-  "types": "dist/types",
+  "main": "es/index.js",
+  "module": "es/index.js",
+  "unpkg": "dist/index.js",
+  "types": "es/index.d.ts",
   "scripts": {
+    "build:es": "npm run copy-files && npm run ts-compile",
+    "clean": "rimraf dist lib es",
     "dev": "vite",
-    "build": "webpack --config webpack.build.js",
+    "build:dist": "webpack --config webpack.build.js",
+    "build": "npm run clean && npm run build:es && npm run build:dist",
     "eslint": "eslint --ext js,ts,tsx",
     "lint": "yarn run eslint src",
     "lint:fix": "yarn run eslint src --fix",
@@ -20,7 +34,9 @@
     "test": "jest",
     "test:changed": "jest --onlyChanged",
     "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage"
+    "test:coverage": "jest --coverage",
+    "ts-compile": "tsc -p tsconfig.esm.json",
+    "copy-files": "copyfiles -u 1 src/**/*.json src/**/*.svg src/**/*.scss src/**/*.png es"
   },
   "husky": {
     "hooks": {
@@ -34,16 +50,24 @@
   },
   "author": "",
   "license": "MIT",
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not op_mini all"
+  ],
   "dependencies": {
+    "@antscorp/icons": "0.26.58",
     "@antscorp/image-editor": "1.0.2",
+    "@emotion/react": "^11.11.1",
     "@fortawesome/fontawesome-svg-core": "6.1.1",
     "@fortawesome/free-brands-svg-icons": "6.1.1",
     "@fortawesome/free-regular-svg-icons": "6.1.1",
     "@fortawesome/free-solid-svg-icons": "6.1.1",
-    "@fortawesome/react-fontawesome": "0.1.18",
+    "@fortawesome/react-fontawesome": "0.2.0",
     "@tinymce/tinymce-react": "^3.7.0",
     "antd": "^5.3.2",
     "axios": "^1.4.0",
+    "babel-plugin-file-loader": "^2.0.0",
     "dayjs": "^1.11.7",
     "font-awesome": "4.7.0",
     "highlight.js": "^11.8.0",
@@ -59,18 +83,27 @@
     "rehype-highlight": "^6.0.0",
     "remark-gfm": "^3.0.1",
     "ts-dedent": "^2.2.0",
-    "tui-image-editor": "^3.15.3"
+    "tui-image-editor": "^3.15.3",
+    "i18next": "21.6.16",
+    "i18next-browser-languagedetector": "6.1.2"
   },
   "devDependencies": {
     "@ant-design/cssinjs": "^1.6.2",
     "@antscorp/eslint-config-antsomi": "1.0.4",
-    "@antscorp/icons": "0.26.49",
+    "@babel/cli": "^7.23.4",
     "@babel/core": "^7.21.3",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-react-jsx": "^7.23.4",
+    "@babel/plugin-transform-react-jsx-source": "^7.23.3",
+    "@babel/plugin-transform-runtime": "^7.23.6",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.23.3",
     "@commitlint/cli": "17.5.0",
     "@commitlint/config-conventional": "17.4.4",
-    "@emotion/react": "^11.10.6",
     "@storybook/addon-actions": "^6.5.16",
     "@storybook/addon-essentials": "^6.5.16",
     "@storybook/addon-interactions": "^6.5.16",
@@ -93,9 +126,15 @@
     "@vitejs/plugin-react": "^3.1.0",
     "auto-changelog": "^2.4.0",
     "babel-loader": "^8.3.0",
+    "babel-plugin-import": "^1.13.8",
+    "babel-plugin-module-resolver": "^5.0.0",
+    "babel-plugin-styled-components": "^2.1.4",
     "clsx": "^1.2.1",
+    "copyfiles": "^2.4.1",
+    "cross-env": "^7.0.3",
     "css-loader": "^6.7.3",
     "date-fns": "^2.29.3",
+    "esbuild-loader": "^4.0.2",
     "eslint": "^8.36.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
@@ -108,8 +147,6 @@
     "eslint-plugin-storybook": "^0.6.11",
     "file-loader": "^6.2.0",
     "husky": "^8.0.3",
-    "i18next": "^22.4.14",
-    "i18next-browser-languagedetector": "^7.0.1",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "lint-staged": "^13.2.0",
@@ -120,7 +157,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-fast-compare": "^3.2.1",
-    "react-i18next": "^12.2.0",
+    "react-i18next": "11.16.7",
     "sass": "^1.60.0",
     "sass-loader": "^13.2.2",
     "style-loader": "^3.3.2",
@@ -134,10 +171,11 @@
     "vite": "^4.2.1",
     "vite-plugin-mkcert": "^1.15.0",
     "webpack": "^5.78.0",
+    "webpack-bundle-analyzer": "^4.10.1",
     "webpack-cli": "^5.0.1"
   },
   "peerDependencies": {
-    "@antscorp/icons": ">=0.26.0",
+    "@antscorp/icons": ">=0.26.58",
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   }

package/dist/688be4ec34a228a3d51c.png

@@ -1 +0,0 @@
-export default __webpack_public_path__ + "/public/icons/8d4b7f99c706464161e377ad92c16626.png";

package/dist/7bd6d6407df2d867ce2f.svg

@@ -1 +0,0 @@
-export default __webpack_public_path__ + "/public/icons/f044bd910efe471eab411d1a144b489b.svg";