@antscorp/antsomi-ui 1.3.5-beta.341 → 1.3.5-beta.343

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

@@ -13,6 +13,7 @@ export interface HeaderV2Props {
     style?: React.CSSProperties;
     pageTitle?: string | React.ReactNode;
     breadcrumbs?: Breadcrumb[];
+    showLogo?: boolean;
     accountSelection?: Omit<AccountSelectionProps, 'onChange' | 'apiConfig'> & {
         onSelectAccount?: (userId: string) => void;
     };
@@ -28,6 +29,7 @@ export interface HeaderV2Props {
         show?: boolean;
     };
     useURLParam?: boolean;
+    rightContent?: React.ReactNode;
     config?: {
         env?: envType;
         language?: string;

package/es/components/molecules/HeaderV2/HeaderV2.js

@@ -13,7 +13,7 @@ import React, { memo, useLayoutEffect, useMemo, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 // Hooks
 // Styled
-import { HeaderV2Styled } from './styled';
+import { HeaderV2Styled, LogoWrapper } from './styled';
 // Components
 import { AccountSelection } from '../AccountSelection';
 import { AccountSharing, Help, Notification, } from '../../organism';
@@ -23,16 +23,16 @@ import { useContextSelector } from 'use-context-selector';
 import { AppConfigContext } from '../../..';
 import { isNil } from 'lodash';
 import { useCustomRouter } from '@antscorp/antsomi-ui/es/hooks';
+const SubLogoAntsomi = 'https://st-media-template.antsomi.com/icons/antsomi/antsomi.png';
 const { DATAFLOWS, APP_ANTALYSER } = APP_CODES;
 // const DOUBLE_RIGHT_POINTING = '»'
 export const HeaderV2 = memo(props => {
     var _a;
     const { auth, env: envContext, languageCode = 'en', appCode: contextAppCode, urlLogout: urlLogoutProvider = '', menuCode: contextMenuCode, } = useContextSelector(AppConfigContext, state => state);
     const { search } = useLocation();
-    // const history = useHistory();
     const { replace } = useCustomRouter();
     // * Prefer to use Header in AppConfigContext
-    const { className, style, breadcrumbs, pageTitle = '', accountSelection = {}, helpConfig, notificationConfig = {}, accountSharingConfig, useURLParam, config, } = props;
+    const { className, style, breadcrumbs, showLogo = false, rightContent, pageTitle = '', accountSelection = {}, helpConfig, notificationConfig = {}, accountSharingConfig, useURLParam, config, } = props;
     /** General config for children component */
     const { env = envContext, language = languageCode, userId = isNaN(Number(auth === null || auth === void 0 ? void 0 : auth.userId)) ? 0 : Number(auth === null || auth === void 0 ? void 0 : auth.userId), portalId = auth === null || auth === void 0 ? void 0 : auth.portalId, token = auth === null || auth === void 0 ? void 0 : auth.token, permissionDomain = PERMISSION_API, iamDomain = IAM_API, appCode = contextAppCode, menuCode = contextMenuCode, } = config || {};
     const { currentAccount, inputStyle = 'select', onSelectAccount } = accountSelection, accountSelectionProps = __rest(accountSelection, ["currentAccount", "inputStyle", "onSelectAccount"]);
@@ -107,6 +107,8 @@ export const HeaderV2 = memo(props => {
     const QUOTE_ENTITY = React.createElement(React.Fragment, null, "\u00BB");
     return (React.createElement(HeaderV2Styled, { className: className || '', style: style },
         React.createElement("div", { className: "left-side" },
+            showLogo && (React.createElement(LogoWrapper, null,
+                React.createElement("img", { src: SubLogoAntsomi, alt: "Antsomi sub logo" }))),
             React.createElement(AccountSelection, Object.assign({}, accountSelectionProps, { currentAccount: selectedAccount, apiConfig: accountSelectionApiConfig, onChange: handleChangeAccount, inputStyle: inputStyle })),
             React.createElement("div", { className: "title-container" },
                 breadcrumbs ? (React.createElement("div", { className: "header-breadcrumbs" }, breadcrumbs.map((item, index) => (React.createElement(React.Fragment, { key: `${item.title}_${item.link}` },
@@ -117,6 +119,7 @@ export const HeaderV2 = memo(props => {
                         "\u2002")))))) : null,
                 typeof pageTitle === 'string' ? (React.createElement("div", { className: "page-title" }, pageTitle)) : (pageTitle))),
         React.createElement("div", { className: "right-side" },
+            rightContent,
             showHelp ? React.createElement(Help, Object.assign({ configs: helpConfigProps }, helpProps)) : null,
             showNotification ? React.createElement(Notification, Object.assign({}, notificationConfigProps)) : null,
             showAccountSharing ? (React.createElement(AccountSharing, Object.assign({ isShowSharing: isShowSharing, isShareAccountAccess: isShareAccountAccess }, accountSharingPropsFormatted, accountSharingProps))) : null)));

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

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

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

@@ -14,11 +14,10 @@ export const HeaderV2Styled = styled.div `
   .right-side {
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 15px;
   }
 
   .left-side {
-    gap: 15px;
     flex: 1;
     overflow: hidden;
   }
@@ -45,3 +44,12 @@ export const HeaderV2Styled = styled.div `
     font-weight: bold;
   }
 `;
+export const LogoWrapper = styled.div `
+  height: 30px;
+  width: 30px;
+
+  img {
+    height: 100%;
+    width: 100%;
+  }
+`;

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

@@ -38,6 +38,7 @@ export const Layout = memo(props => {
     const { auth, languageCode, appCode, env } = appConfig;
     const { token, userId, portalId } = auth || {};
     const headerStore = useLayoutStore(store => store.state.header);
+    const showLeftMenu = useLayoutStore(store => store.state.leftMenu.show);
     const [showAccountSelection, setShowAccountSelection] = useState(false);
     // Memo
     const permissionDomain = useMemo(() => {
@@ -91,10 +92,10 @@ export const Layout = memo(props => {
         const hasRole = hasSelectAccountPermission(activeItemPath, flattenPermissionList);
         setShowAccountSelection(hasRole);
     }, [onActiveMenuChange]);
-    return (React.createElement(LayoutWrapper, null,
-        React.createElement(HeaderV2, Object.assign({}, mergeHeaderProps)),
+    return (React.createElement(LayoutWrapper, { showLeftMenu: showLeftMenu },
+        React.createElement(HeaderV2, Object.assign({}, mergeHeaderProps, { showLogo: !showLeftMenu })),
         React.createElement(Flex, { className: "layout-body" },
-            React.createElement(LeftMenu, Object.assign({ className: `layout-body__menu ${className}`, appConfig: appConfig }, restOfLeftMenuProps, { onActiveMenuCodeChange: onActiveMenuCodeChange })),
+            showLeftMenu && (React.createElement(LeftMenu, Object.assign({ className: `layout-body__menu ${className}`, appConfig: appConfig }, restOfLeftMenuProps, { onActiveMenuCodeChange: onActiveMenuCodeChange }))),
             React.createElement(ContentWrapper, null,
                 React.createElement("div", Object.assign({}, restOfWorkspaceProps, { className: `layout-body__content ${(workspaceProps === null || workspaceProps === void 0 ? void 0 : workspaceProps.className) || ''}` }),
                     React.createElement(NotificationWrapper, null,

package/es/components/template/Layout/stores/index.d.ts

@@ -4,6 +4,7 @@ import { DeepPartial } from '@antscorp/antsomi-ui/es/types';
 export interface HeaderStore extends Partial<HeaderV2Props> {
 }
 export interface LeftMenuStore {
+    show: boolean;
     onClickCreateDashboard?: React.MouseEventHandler<HTMLElement>;
 }
 export interface WorkspaceStore {

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

@@ -3,7 +3,7 @@ import { create } from 'zustand';
 import { merge } from 'lodash';
 const initialState = {
     header: {},
-    leftMenu: {},
+    leftMenu: { show: true },
     workspace: {},
 };
 export const useLayoutStore = create(set => ({
@@ -19,15 +19,19 @@ export const useLayoutStore = create(set => ({
         state: Object.assign(Object.assign({}, store.state), { workspace: Object.assign(Object.assign({}, store.state.workspace), newState) }),
     })),
     resetHeaderState: () => set(store => ({
-        state: Object.assign(Object.assign({}, store.state), { header: initialState.header }),
+        state: Object.assign(Object.assign({}, store.state), { header: {} }),
     })),
     resetLeftMenuState: () => set(store => ({
-        state: Object.assign(Object.assign({}, store.state), { leftMenu: initialState.leftMenu }),
+        state: Object.assign(Object.assign({}, store.state), { leftMenu: { show: true } }),
     })),
     resetWorkspaceState: () => set(store => ({
-        state: Object.assign(Object.assign({}, store.state), { workspace: initialState.workspace }),
+        state: Object.assign(Object.assign({}, store.state), { workspace: {} }),
     })),
     resetLayoutState: () => set(store => ({
-        state: Object.assign(Object.assign({}, store.state), initialState),
+        state: Object.assign(Object.assign({}, store.state), {
+            header: {},
+            leftMenu: { show: true },
+            workspace: {},
+        }),
     })),
 }));

package/es/components/template/Layout/styled.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
-export declare const LayoutWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const LayoutWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {
+    showLeftMenu: boolean;
+}, never>;
 export declare const ContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const NotificationWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ChildrenWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -12,10 +12,14 @@ export const LayoutWrapper = styled(Flex) `
   position: relative;
 
   .layout-header {
-    width: calc(100% - 71px);
     position: absolute;
-    left: 71px;
     z-index: 20;
+    ${({ showLeftMenu }) => showLeftMenu
+    ? `  
+        width: calc(100% - 71px);
+        left: 71px;
+      `
+    : 'width: 100%'};
   }
 
   .layout-body {

package/es/components/template/TemplateListing/components/CategoryListing/index.js

@@ -27,7 +27,9 @@ import { handleError } from '@antscorp/antsomi-ui/es/utils';
 import { CATEGORY_DEBOUNCE, CATEGORY_LISTING_WITH } from '../../constants';
 const PATH = 'src/components/template/TemplateListing/components/CategoryListing/index.tsx';
 export const CategoryListing = memo(props => {
-    const { width = CATEGORY_LISTING_WITH, items = [], loading = false, show = true, checkedCategories = {}, emptyProps, debounceChangeMenu = CATEGORY_DEBOUNCE, header, footer, onMenuChange } = props, restOfProps = __rest(props, ["width", "items", "loading", "show", "checkedCategories", "emptyProps", "debounceChangeMenu", "header", "footer", "onMenuChange"]);
+    const { width = CATEGORY_LISTING_WITH, items = [], loading = false, show = true, checkedCategories = {}, emptyProps, debounceChangeMenu = CATEGORY_DEBOUNCE, header, footer, 
+    /* Wrapper */
+    wrapperClassName, wrapperStyle, onMenuChange } = props, restOfProps = __rest(props, ["width", "items", "loading", "show", "checkedCategories", "emptyProps", "debounceChangeMenu", "header", "footer", "wrapperClassName", "wrapperStyle", "onMenuChange"]);
     const [checkedState, setCheckedState] = useState({});
     useEffect(() => {
         setCheckedState(prev => (isEqual(prev, checkedCategories) ? prev : checkedCategories));
@@ -112,7 +114,7 @@ export const CategoryListing = memo(props => {
         });
         return menuItems;
     }, [getItem, items]);
-    return (show && !isEmpty(menuItems)) || header || loading ? (React.createElement(MenuWrapper, { "$width": width },
+    return (show && !isEmpty(menuItems)) || header || loading ? (React.createElement(MenuWrapper, { "$width": width, className: wrapperClassName, style: wrapperStyle },
         header,
         React.createElement(Scrollbars, { className: "category__listing" },
             React.createElement(Spin, { spinning: loading, wrapperClassName: "template-listing__loading" },

package/es/components/template/TemplateListing/constants/defaultProps.d.ts

@@ -1,7 +1,7 @@
 import { ThumbnailCardProps } from '../../../molecules';
 import { BlankTemplateProps, CategoryListingProps, TemplateListingProps, TemplatesProps } from '../types';
 import { EmptyProps } from '../types/Empty';
-export declare const CATEGORY_LISTING_WITH = 220;
+export declare const CATEGORY_LISTING_WITH = 230;
 export declare const THUMBNAIL_URL = "https://st-media-template.antsomi.com/base64-img/37563.png";
 export declare const LISTING_GAP_DEFAULT = 30;
 export declare const CATEGORY_DEBOUNCE = 400;

package/es/components/template/TemplateListing/constants/defaultProps.js

@@ -1,5 +1,5 @@
 /* Variables */
-export const CATEGORY_LISTING_WITH = 220;
+export const CATEGORY_LISTING_WITH = 230;
 export const THUMBNAIL_URL = 'https://st-media-template.antsomi.com/base64-img/37563.png';
 export const LISTING_GAP_DEFAULT = 30;
 export const CATEGORY_DEBOUNCE = 400;

package/es/components/template/TemplateListing/types/CategoryListing.d.ts

@@ -13,6 +13,8 @@ export interface CategoryListingProps extends MenuProps {
     emptyProps?: EmptyProps;
     header?: ReactNode;
     footer?: ReactNode;
+    wrapperClassName?: string;
+    wrapperStyle?: React.CSSProperties;
     onMenuChange?: (value: TCheckedCategories) => void;
 }
 export type TMenuItem = Required<MenuProps>['items'][number];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.341",
+  "version": "1.3.5-beta.343",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",