@antscorp/antsomi-ui 1.3.5-beta.560 → 1.3.5-beta.562

package/es/components/molecules/RequestAccess/RequestAccess.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface RequestAccessProps {
+    className?: string;
+    placeholder?: string;
+    deniedTitle?: string;
+    deniedSubTitle?: string;
+    sentTitle?: string;
+    sentSubTitle?: string;
+    requestText?: string;
+    switchAccountText?: string;
+    onRequest?: (message: string) => Promise<void>;
+    onSwitchAccount?: () => void;
+}
+export declare const RequestAccess: React.FC<RequestAccessProps>;
+export {};

package/es/components/molecules/RequestAccess/RequestAccess.js

@@ -0,0 +1,42 @@
+import React, { useRef, useState } from 'react';
+import { Button, Flex, TextArea, Typography } from '@antscorp/antsomi-ui/es/components';
+// Styled
+import { RequestAccessStyled } from './styled';
+// Translate
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+const { t } = i18nInstance;
+export const RequestAccess = props => {
+    const { className, placeholder = t(translations.requestAccess.placeholder), deniedTitle = t(translations.requestAccess.deniedTitle), deniedSubTitle = t(translations.requestAccess.deniedSubTitle), sentTitle = t(translations.requestAccess.sentTitle), sentSubTitle = t(translations.requestAccess.sentSubTitle), requestText = t(translations.requestAccess.requestText), switchAccountText = t(translations.requestAccess.switchAccountText), onRequest, onSwitchAccount, } = props;
+    const [isSentRequest, setIsSentRequest] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const messageRef = useRef(null);
+    const handleClickRequest = () => {
+        var _a, _b;
+        const message = ((_b = (_a = messageRef.current) === null || _a === void 0 ? void 0 : _a.resizableTextArea) === null || _b === void 0 ? void 0 : _b.textArea.value) || '';
+        if (onRequest) {
+            try {
+                setIsLoading(true);
+                onRequest(message)
+                    .then(() => setIsSentRequest(true))
+                    .finally(() => setIsLoading(false));
+            }
+            catch (error) {
+                setIsSentRequest(true);
+            }
+        }
+    };
+    const handleSwitchAccount = () => {
+        if (onSwitchAccount)
+            onSwitchAccount();
+    };
+    return (React.createElement(RequestAccessStyled, { className: `antsomi-request-access ${className || ''}` },
+        React.createElement(Flex, { vertical: true, gap: 20 },
+            React.createElement(Flex, { vertical: true, gap: 5 },
+                React.createElement(Typography.Text, { className: "denied-title" }, isSentRequest ? sentTitle : deniedTitle),
+                React.createElement(Typography.Text, { className: "denied-sub-title" }, isSentRequest ? sentSubTitle : deniedSubTitle)),
+            !isSentRequest ? (React.createElement(TextArea, { style: { resize: 'none' }, placeholder: placeholder, ref: messageRef })) : null,
+            React.createElement(Flex, { className: "action-buttons", gap: 10 },
+                isSentRequest ? null : (React.createElement(Button, { onClick: handleClickRequest, type: "primary", loading: isLoading }, requestText)),
+                React.createElement(Button, { onClick: handleSwitchAccount }, switchAccountText)))));
+};

package/es/components/molecules/RequestAccess/index.d.ts

@@ -0,0 +1 @@
+export { RequestAccess } from './RequestAccess';

package/es/components/molecules/RequestAccess/index.js

@@ -0,0 +1 @@
+export { RequestAccess } from './RequestAccess';

package/es/components/molecules/RequestAccess/styled.d.ts

@@ -0,0 +1 @@
+export declare const RequestAccessStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/RequestAccess/styled.js

@@ -0,0 +1,34 @@
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+import styled from 'styled-components';
+export const RequestAccessStyled = styled.div `
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  & > div {
+    width: 350px;
+
+    .denied-title {
+      font-size: 20px;
+      line-height: 24px;
+      font-weight: 700;
+      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.orange6};
+    }
+
+    .denied-sub-title {
+      line-height: 14px;
+      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
+    }
+
+    .antsomi-input {
+      height: 150px;
+      border: 1px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1} !important;
+      border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
+      padding: 10px;
+    }
+  }
+`;

package/es/components/organism/LeftMenu/hooks/usePermission.js

@@ -11,6 +11,7 @@ import { ENV } from '@antscorp/antsomi-ui/es/config';
 // Utils
 import { findLastMatchedItemByUrl, findPathOfActiveItem, flattenMenuArray, getMappingAppChildren, recursivePermissionMenu, } from '../utils';
 import { useCheckUserPermission } from '@antscorp/antsomi-ui/es/queries';
+import { recursiveSortBy } from '@antscorp/antsomi-ui/es/utils';
 const { DEV, SANDBOX, SANDBOX_CDP } = ENV;
 export const usePermission = () => {
     const appConfig = useLeftMenuContext(store => store.appConfig);
@@ -135,7 +136,7 @@ export const usePermission = () => {
         userPermission,
     ]);
     const mappingChildrenMenuWithNoPermission = useMemo(() => getMappingAppChildren({
-        menuList: (menuList === null || menuList === void 0 ? void 0 : menuList.rows) || [],
+        menuList: recursiveSortBy((menuList === null || menuList === void 0 ? void 0 : menuList.rows) || [], 'children', ['level_position']) || [],
         auth,
         dashboardList,
         destinationChannelEntries: destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries,

package/es/locales/en/translation.json

@@ -665,5 +665,14 @@
         "description": "Ask for permission or switch to an account with access",
         "requestAccess": "Request access",
         "switchAccount": "Switch account"
+    },
+    "requestAccess": {
+        "placeholder": "Message (optional)",
+        "deniedTitle": "Access Denied",
+        "deniedSubTitle": "Ask for permission or switch to an account with access",
+        "sentTitle": "Request sent",
+        "sentSubTitle": "You’ll receive an email once your request is approved or denied",
+        "requestText": "Request Access",
+        "switchAccountText": "Switch account"
     }
 }

package/es/locales/i18n.d.ts

@@ -668,6 +668,15 @@ export declare const translationsJson: {
                 requestAccess: string;
                 switchAccount: string;
             };
+            requestAccess: {
+                placeholder: string;
+                deniedTitle: string;
+                deniedSubTitle: string;
+                sentTitle: string;
+                sentSubTitle: string;
+                requestText: string;
+                switchAccountText: string;
+            };
         };
     };
     vi: {
@@ -889,6 +898,15 @@ export declare const translationsJson: {
                 requestAccess: string;
                 switchAccount: string;
             };
+            requestAccess: {
+                placeholder: string;
+                deniedTitle: string;
+                deniedSubTitle: string;
+                sentTitle: string;
+                sentSubTitle: string;
+                requestText: string;
+                switchAccountText: string;
+            };
         };
     };
 };

package/es/locales/translations.d.ts

@@ -668,6 +668,15 @@ export declare const convertLanguageJsonToObject: (json: any, objToConvertTo?: C
         requestAccess: string;
         switchAccount: string;
     };
+    requestAccess: {
+        placeholder: string;
+        deniedTitle: string;
+        deniedSubTitle: string;
+        sentTitle: string;
+        sentSubTitle: string;
+        requestText: string;
+        switchAccountText: 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

@@ -215,5 +215,14 @@
         "description": "Hãy yêu cầu quyền truy cập hoặc chuyển sang tài khoản có quyền",
         "requestAccess": "Yêu cầu truy cập",
         "switchAccount": "Đổi tài khoản"
+    },
+    "requestAccess": {
+        "placeholder": "Lời nhắn (Không bắt buộc)",
+        "deniedTitle": "Truy cập bị từ chối",
+        "deniedSubTitle": "Hãy yêu cầu cấp quyền hoặc chuyển sang tài khoản có quyền truy cập",
+        "sentTitle": "Đã gửi yêu cầu",
+        "sentSubTitle": "Bạn sẽ nhận được email sau khi yêu cầu của bạn được chấp thuận hoặc bị từ chối",
+        "requestText": "Yêu cầu truy cập",
+        "switchAccountText": "Đổi tài khoản"
     }
 }

package/es/utils/common.d.ts

@@ -137,3 +137,13 @@ export declare function splitTextByNewline(text?: string): string[];
  * @returns {any | null} The parsed JSON object if successful, or `null` if the parsing fails or the key does not exist.
  */
 export declare function parseJSONFromLocalStorage<T = any>(key: string): T | null;
+/**
+ * Recursively sorts an array of objects by specified keys and also sorts their nested children arrays.
+ *
+ * @template T - The type of the objects within the array.
+ * @param {T[]} arr - The array of objects to be sorted.
+ * @param {keyof T} [childrenKey='children'] - The key used to identify the children array in each object.
+ * @param {Array<keyof T>} [sortByKeys=[]] - The keys used to sort the objects.
+ * @returns {T[]} - The sorted array with each object’s children arrays also sorted recursively.
+ */
+export declare const recursiveSortBy: <T = any>(arr: T[], childrenKey?: keyof T, sortByKeys?: (keyof T)[]) => T[];

package/es/utils/common.js

@@ -6,6 +6,7 @@ import uniqid from 'uniqid';
 import { MESSAGES, PORTAL_KEYS } from '@antscorp/antsomi-ui/es/services/constants';
 // Utils
 import { handleError } from './handleError';
+import { sortBy } from 'lodash';
 const PATH = 'src/utils/common.ts';
 /**
  * Function to reorder list
@@ -607,3 +608,15 @@ export function parseJSONFromLocalStorage(key) {
         return null;
     }
 }
+/**
+ * Recursively sorts an array of objects by specified keys and also sorts their nested children arrays.
+ *
+ * @template T - The type of the objects within the array.
+ * @param {T[]} arr - The array of objects to be sorted.
+ * @param {keyof T} [childrenKey='children'] - The key used to identify the children array in each object.
+ * @param {Array<keyof T>} [sortByKeys=[]] - The keys used to sort the objects.
+ * @returns {T[]} - The sorted array with each object’s children arrays also sorted recursively.
+ */
+export const recursiveSortBy = (arr, childrenKey = 'children', sortByKeys = []) => sortBy(arr, [...sortByKeys]).map(item => (Object.assign(Object.assign({}, item), (item[childrenKey] && {
+    [childrenKey]: recursiveSortBy(item[childrenKey], childrenKey, sortByKeys),
+}))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.560",
+  "version": "1.3.5-beta.562",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -40,8 +40,8 @@
     "ts-compile": "tsc -p tsconfig.esm.json",
     "copy-files": "copyfiles -u 1 src/**/*.json src/**/*.svg src/**/*.scss src/**/*.png es",
     "icons:add": "tsx scripts/add-icons.ts",
-    "icons:export": "tsx scripts/generate-export-icons.ts",
-    "icons:format": "prettier --write \"src/components/icons/*.tsx\"",
+    "icons:export": "sh -e scripts/generate-export-icon.sh",
+    "icons:format": "prettier --loglevel warn --write \"src/components/icons/*.tsx\"",
     "icons:update": "sh -e scripts/update-icons.sh"
   },
   "husky": {
@@ -200,7 +200,7 @@
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.8.0",
@@ -212,7 +212,7 @@
     "mini-css-extract-plugin": "^2.7.5",
     "postcss": "^8.4.21",
     "postcss-loader": "^7.1.0",
-    "prettier": "^2.8.7",
+    "prettier": "^3.3.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-fast-compare": "^3.2.1",