@antscorp/antsomi-ui 2.0.101 → 2.0.102

package/es/components/organism/index.d.ts

@@ -13,6 +13,7 @@ export * from './DataTable';
 export * from './ModifyColumnModal';
 export { AccountProfile, type AccountSettingProps } from './AccountProfile';
 export * from './Login';
+export * from './BasicLogin';
 export * from './Filter';
 export { ActivityTimeline, type ActivityTimeLineProps } from './ActivityTimeline';
 export { WhatsappMobile, SAMPLE_PREVIEW } from './PreviewCollections';

package/es/components/organism/index.js

@@ -13,6 +13,7 @@ export * from './DataTable';
 export * from './ModifyColumnModal';
 export { AccountProfile } from './AccountProfile';
 export * from './Login';
+export * from './BasicLogin';
 export * from './Filter';
 export { ActivityTimeline } from './ActivityTimeline';
 export { WhatsappMobile, SAMPLE_PREVIEW } from './PreviewCollections';

package/es/components/template/Layout/Layout.js

@@ -304,16 +304,16 @@ export const Layout = memo(props => {
             helpInfo: {
                 feature: 'other_feature',
                 title: `Request Access to ${activeMenu?.menu_item_name}`,
-                message: `
-          I want to be granted permission to access this feature. <br /> <br />
-
-          Details:
-          <ul>
-            <li>Portal ID: ${portalId}</li>
-            <li>User ID: ${userId}</li>
-            <li>Link: ${window.location.href}</li>
-            <li>Datetime: ${dayjs().format('MMM DD, YYYY hh:mm:ss.SSS A')}</li>
-          </ul>
+                message: `
+          I want to be granted permission to access this feature. <br /> <br />
+
+          Details:
+          <ul>
+            <li>Portal ID: ${portalId}</li>
+            <li>User ID: ${userId}</li>
+            <li>Link: ${window.location.href}</li>
+            <li>Datetime: ${dayjs().format('MMM DD, YYYY hh:mm:ss.SSS A')}</li>
+          </ul>
           `,
                 files: [],
                 referenceUrl: '',

package/es/components/template/Layout/components/RecommendationWorkspace/components/MenuMapping/components/OldLeftMenu/index.js

@@ -14,7 +14,7 @@ import { recursiveFindParentOfActiveItem } from './utils';
 export const OldLeftMenu = memo(props => {
     const { activeKey, appConfig, onMenuItemClick } = props;
     const [openKeys, setOpenKeys] = useState([]);
-    const { auth, languageCode } = appConfig || {};
+    const { auth, languageCode, permissionDomain } = appConfig || {};
     const mappedActiveKey = useMemo(() => {
         switch (activeKey) {
             case 'SQL_WORKSPACE':
@@ -42,7 +42,7 @@ export const OldLeftMenu = memo(props => {
         args: {
             auth: {
                 token: auth?.token,
-                url: PERMISSION_API,
+                url: permissionDomain || PERMISSION_API,
                 // NOTE: Hot fix for case menu permission working wrong
                 // userId: auth?.userId,
                 userId: auth?.accountId,

package/es/components/template/Layout/components/RecommendationWorkspace/components/MenuMapping/components/OldLeftMenu/styled.js

@@ -1,79 +1,79 @@
 import styled from 'styled-components';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const IconWrapper = styled.div `
-  width: 22px;
-  height: 22px;
-  background: rgb(155, 155, 155);
-  mask-size: contain;
-  mask-position: center center;
-  mask-repeat: no-repeat;
-  ${({ url }) => `mask-image: url(${url});`}
+export const IconWrapper = styled.div `
+  width: 22px;
+  height: 22px;
+  background: rgb(155, 155, 155);
+  mask-size: contain;
+  mask-position: center center;
+  mask-repeat: no-repeat;
+  ${({ url }) => `mask-image: url(${url});`}
 `;
-export const MenuWrapper = styled.div `
-  border-radius: ${THEME?.token?.borderRadiusXL}px;
-  height: 100%;
-  max-height: 100%;
-  overflow: hidden;
-
-  & > .antsomi-menu.antsomi-menu-root {
-    border-radius: ${THEME?.token?.borderRadiusXL}px;
-    height: 100%;
-    max-height: 100%;
-    overflow: auto;
-    &::-webkit-scrollbar {
-      display: none !important;
-    }
-
-    li {
-      min-height: 40px !important;
-      margin: 0px !important;
-
-      .antsomi-menu-submenu-title {
-        padding-right: 10px !important;
-        margin: 0px !important;
-      }
-
-      ul.antsomi-menu > li {
-        padding-left: 6px !important;
-        padding-right: 10px !important;
-        border-left: 4px solid transparent;
-
-        & > .antsomi-menu-title-content {
-          margin: 0;
-        }
-
-        &.antsomi-menu-item-selected {
-          border-left: 4px solid #005eb8;
-          border-radius: 0px !important;
-
-          ${IconWrapper} {
-            background: ${THEME?.token?.colorPrimary};
-          }
-        }
-      }
-    }
-  }
+export const MenuWrapper = styled.div `
+  border-radius: ${THEME?.token?.borderRadiusXL}px;
+  height: 100%;
+  max-height: 100%;
+  overflow: hidden;
+
+  & > .antsomi-menu.antsomi-menu-root {
+    border-radius: ${THEME?.token?.borderRadiusXL}px;
+    height: 100%;
+    max-height: 100%;
+    overflow: auto;
+    &::-webkit-scrollbar {
+      display: none !important;
+    }
+
+    li {
+      min-height: 40px !important;
+      margin: 0px !important;
+
+      .antsomi-menu-submenu-title {
+        padding-right: 10px !important;
+        margin: 0px !important;
+      }
+
+      ul.antsomi-menu > li {
+        padding-left: 6px !important;
+        padding-right: 10px !important;
+        border-left: 4px solid transparent;
+
+        & > .antsomi-menu-title-content {
+          margin: 0;
+        }
+
+        &.antsomi-menu-item-selected {
+          border-left: 4px solid #005eb8;
+          border-radius: 0px !important;
+
+          ${IconWrapper} {
+            background: ${THEME?.token?.colorPrimary};
+          }
+        }
+      }
+    }
+  }
 `;
-export const AppLabel = styled.span `
-  display: flex;
-
-  & > .antsomi-typography {
-    font-size: 14px;
-    font-weight: 700;
-    line-height: 16px;
-    padding: 0 10px;
-    max-width: 100%;
-    color: inherit !important;
-  }
+export const AppLabel = styled.span `
+  display: flex;
+
+  & > .antsomi-typography {
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 16px;
+    padding: 0 10px;
+    max-width: 100%;
+    color: inherit !important;
+  }
 `;
-export const MenuLabel = styled.span `
-  display: flex;
-  & > .antsomi-typography {
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 14px;
-    padding-right: 10px !important;
-    padding-left: 6px !important;
-    color: inherit !important;
-  }
+export const MenuLabel = styled.span `
+  display: flex;
+  & > .antsomi-typography {
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 14px;
+    padding-right: 10px !important;
+    padding-left: 6px !important;
+    color: inherit !important;
+  }
 `;

package/es/components/template/Layout/components/RecommendationWorkspace/components/MenuMapping/styled.js

@@ -1,48 +1,48 @@
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
 import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
-export const MenuMappingContainer = styled(Flex) `
-  height: 100%;
-
-  & > i {
-    font-size: 22px;
-    font-weight: 400;
-    color: ${THEME?.token?.bw8};
-  }
+export const MenuMappingContainer = styled(Flex) `
+  height: 100%;
+
+  & > i {
+    font-size: 22px;
+    font-weight: 400;
+    color: ${THEME?.token?.bw8};
+  }
 `;
 MenuMappingContainer.defaultProps = {
     gap: 30,
     align: 'center',
 };
-export const MenuMappingWrapper = styled.div `
-  padding: 20px;
-  background-color: #eaf1fb;
-  width: 634px;
-  max-height: 100%;
-  overflow: hidden;
-  height: 763px;
-  flex-shrink: 0;
-  border-radius: ${THEME?.token?.borderRadiusXL}px;
-
-  ${MenuMappingContainer} {
-    max-height: 100%;
-
-    .old-menu-wrapper,
-    .new-menu-wrapper {
-      height: 100%;
-      border-radius: ${THEME?.token?.borderRadiusXL}px;
-      box-shadow: 0px 3px 20px 0px #002e5933;
-      background-color: ${THEME?.token?.blue1_3};
-    }
-
-    .old-menu-wrapper {
-      width: 220px;
-      height: 100%;
-      flex-shrink: 0;
-    }
-
-    .new-menu-wrapper .left-menu-nav {
-      border-radius: 10px 0 0px 10px;
-    }
-  }
+export const MenuMappingWrapper = styled.div `
+  padding: 20px;
+  background-color: #eaf1fb;
+  width: 634px;
+  max-height: 100%;
+  overflow: hidden;
+  height: 763px;
+  flex-shrink: 0;
+  border-radius: ${THEME?.token?.borderRadiusXL}px;
+
+  ${MenuMappingContainer} {
+    max-height: 100%;
+
+    .old-menu-wrapper,
+    .new-menu-wrapper {
+      height: 100%;
+      border-radius: ${THEME?.token?.borderRadiusXL}px;
+      box-shadow: 0px 3px 20px 0px #002e5933;
+      background-color: ${THEME?.token?.blue1_3};
+    }
+
+    .old-menu-wrapper {
+      width: 220px;
+      height: 100%;
+      flex-shrink: 0;
+    }
+
+    .new-menu-wrapper .left-menu-nav {
+      border-radius: 10px 0 0px 10px;
+    }
+  }
 `;

package/es/components/template/Layout/components/RecommendationWorkspace/components/RecommendationImage/styled.js

@@ -1,65 +1,65 @@
 import styled from 'styled-components';
-export const MessageWrapper = styled.div `
-  padding: 30px;
-  width: 395px;
-  background-color: #eef5fc;
-  border-radius: 30px;
-  position: relative;
-  flex-shrink: 0;
-
-  & > div.antsomi-typography {
-    margin: 0px !important;
-    font-weight: 500 !important;
-    font-size: 24px !important;
-    line-height: 28px;
-  }
-
-  .arrow-triangle-down {
-    position: absolute;
-    width: 0;
-    height: 0;
-    bottom: -30px;
-    left: 75px;
-    border-style: solid;
-    border-width: 0px 25px 50px 25px;
-    border-color: transparent transparent #eef5fc transparent;
-    transform: rotate(180deg);
-    z-index: 100;
-  }
-
-  @media screen and (max-width: 1400px) {
-    width: 300px;
-    & > div.antsomi-typography {
-      font-size: 22px !important;
-      line-height: 26px;
-    }
-  }
-  @media screen and (max-width: 1330px) {
-    width: 250px;
-    & > div.antsomi-typography {
-      font-size: 20px !important;
-      line-height: 24px;
-    }
-  }
+export const MessageWrapper = styled.div `
+  padding: 30px;
+  width: 395px;
+  background-color: #eef5fc;
+  border-radius: 30px;
+  position: relative;
+  flex-shrink: 0;
+
+  & > div.antsomi-typography {
+    margin: 0px !important;
+    font-weight: 500 !important;
+    font-size: 24px !important;
+    line-height: 28px;
+  }
+
+  .arrow-triangle-down {
+    position: absolute;
+    width: 0;
+    height: 0;
+    bottom: -30px;
+    left: 75px;
+    border-style: solid;
+    border-width: 0px 25px 50px 25px;
+    border-color: transparent transparent #eef5fc transparent;
+    transform: rotate(180deg);
+    z-index: 100;
+  }
+
+  @media screen and (max-width: 1400px) {
+    width: 300px;
+    & > div.antsomi-typography {
+      font-size: 22px !important;
+      line-height: 26px;
+    }
+  }
+  @media screen and (max-width: 1330px) {
+    width: 250px;
+    & > div.antsomi-typography {
+      font-size: 20px !important;
+      line-height: 24px;
+    }
+  }
 `;
-export const ImageWrapper = styled.div `
-  width: 100%;
-  height: 100%;
-  flex: 1 1 0%;
-  overflow: hidden;
-
-  img {
-    width: auto;
-    height: 100%;
-    max-height: 505px;
-    object-fit: contain;
-  }
+export const ImageWrapper = styled.div `
+  width: 100%;
+  height: 100%;
+  flex: 1 1 0%;
+  overflow: hidden;
+
+  img {
+    width: auto;
+    height: 100%;
+    max-height: 505px;
+    object-fit: contain;
+  }
 `;
-export const RecommendationImageWrapper = styled.div `
-  display: flex;
-  gap: 40px;
-  max-height: 700px;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
+export const RecommendationImageWrapper = styled.div `
+  display: flex;
+  gap: 40px;
+  max-height: 700px;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
 `;

package/es/components/template/Layout/components/RecommendationWorkspace/styled.js

@@ -1,18 +1,18 @@
 import styled from 'styled-components';
-export const RecommendationWorkspaceWrapper = styled.div `
-  display: flex;
-  height: 100%;
-  gap: 220px;
-  align-items: center;
-  justify-content: center;
-
-  @media screen and (max-width: 1600px) and (min-width: 1501px) {
-    gap: 110px;
-  }
-  @media screen and (max-width: 1500px) and (min-width: 1401px) {
-    gap: 20px;
-  }
-  @media screen and (max-width: 1400px) {
-    gap: 15px;
-  }
+export const RecommendationWorkspaceWrapper = styled.div `
+  display: flex;
+  height: 100%;
+  gap: 220px;
+  align-items: center;
+  justify-content: center;
+
+  @media screen and (max-width: 1600px) and (min-width: 1501px) {
+    gap: 110px;
+  }
+  @media screen and (max-width: 1500px) and (min-width: 1401px) {
+    gap: 20px;
+  }
+  @media screen and (max-width: 1400px) {
+    gap: 15px;
+  }
 `;

package/es/components/template/Layout/styled.js

@@ -6,95 +6,95 @@ import { Spin } from '@antscorp/antsomi-ui/es/components/atoms/Spin';
 // Constants
 import { HEADER_HEIGHT } from '../../molecules/HeaderV2/constants';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const LayoutWrapper = styled(Flex) `
-  width: 100%;
-  background-color: ${THEME?.token?.blue1_3};
-  position: relative;
-
-  .layout-header {
-    position: absolute;
-    z-index: 20;
+export const LayoutWrapper = styled(Flex) `
+  width: 100%;
+  background-color: ${THEME?.token?.blue1_3};
+  position: relative;
+
+  .layout-header {
+    position: absolute;
+    z-index: 20;
     ${({ showLeftMenu }) => showLeftMenu
-    ? `  
-        width: calc(100% - 70px);
-        left: 70px;
+    ? `  
+        width: calc(100% - 70px);
+        left: 70px;
       `
-    : 'width: 100%'};
-  }
-
-  .layout-body {
-    position: relative;
-    width: 100%;
-    z-index: 10;
-
-    &__menu {
-      flex-shrink: 0;
-    }
-
-    &__content {
-      position: relative;
-      flex: 1 1 0%;
-      border-radius: ${THEME?.token?.borderRadiusXL}px;
-      background-color: white;
-      height: 100%;
-      padding: 15px;
-      display: flex;
-      flex-direction: column;
-      box-sizing: border-box;
-      overflow: auto;
-      z-index: 1;
-    }
-  }
+    : 'width: 100%'};
+  }
+
+  .layout-body {
+    position: relative;
+    width: 100%;
+    z-index: 10;
+
+    &__menu {
+      flex-shrink: 0;
+    }
+
+    &__content {
+      position: relative;
+      flex: 1 1 0%;
+      border-radius: ${THEME?.token?.borderRadiusXL}px;
+      background-color: white;
+      height: 100%;
+      padding: 15px;
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      overflow: auto;
+      z-index: 1;
+    }
+  }
 `;
-export const ContentWrapper = styled.div `
-  position: relative;
-  width: 100%;
-  height: 100vh;
-  box-sizing: border-box;
-
-  ${({ $noPadding }) => $noPadding ? `padding: ${HEADER_HEIGHT}px 0 0 0;` : `padding: ${HEADER_HEIGHT}px 15px 15px 0;`}
-
-  .layout-body__content {
-    ${({ $noSpaceTopContent }) => $noSpaceTopContent && 'padding-top: 0;'}
-  }
-
+export const ContentWrapper = styled.div `
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  box-sizing: border-box;
+
+  ${({ $noPadding }) => $noPadding ? `padding: ${HEADER_HEIGHT}px 0 0 0;` : `padding: ${HEADER_HEIGHT}px 15px 15px 0;`}
+
+  .layout-body__content {
+    ${({ $noSpaceTopContent }) => $noSpaceTopContent && 'padding-top: 0;'}
+  }
+
   ${({ $showOnlyContent }) => $showOnlyContent &&
-    css `
-      padding: 0px;
-
-      .layout-body__content {
-        padding: 0px;
-        border-radius: 0px;
-      }
-    `}
+    css `
+      padding: 0px;
+
+      .layout-body__content {
+        padding: 0px;
+        border-radius: 0px;
+      }
+    `}
 `;
-export const NotificationWrapper = styled.div `
-  flex-shrink: 0;
-  top: 0px;
-  position: sticky;
-  /* height: 50px; */
-  width: 100%;
-  /* margin-bottom: 6px; */
-  background-color: white;
-  z-index: 999;
-
-  > div {
-    margin-top: 15px;
-    margin-bottom: 6px;
-  }
+export const NotificationWrapper = styled.div `
+  flex-shrink: 0;
+  top: 0px;
+  position: sticky;
+  /* height: 50px; */
+  width: 100%;
+  /* margin-bottom: 6px; */
+  background-color: white;
+  z-index: 999;
+
+  > div {
+    margin-top: 15px;
+    margin-bottom: 6px;
+  }
 `;
-export const ChildrenWrapper = styled.div `
-  width: 100%;
-  height: 100%;
-  position: relative;
-
-  & > div {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-  }
-  /* height: calc(100% - 50px); */
+export const ChildrenWrapper = styled.div `
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  & > div {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+  }
+  /* height: calc(100% - 50px); */
 `;
-export const LayoutLoading = styled(Spin) `
-  margin: auto !important;
+export const LayoutLoading = styled(Spin) `
+  margin: auto !important;
 `;