hisd3-ui-kit 1.0.0 → 2.0.0

package/dist/components/Sidebar/index.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { StyledTheme } from "../../types/theme";
 import { IUserEmployee } from "../../types/account";
+import { StyledTheme } from "../../types/theme";
 interface HISD3SidebarProps {
     account: IUserEmployee;
     logoUrl: string;
@@ -15,6 +15,7 @@ interface HISD3SidebarProps {
     layoutTop?: boolean;
     avatarSrc?: string;
     settingsUrl?: string;
+    children: React.ReactNode;
 }
 export declare const HISD3Sidebar: React.FC<HISD3SidebarProps>;
 export default HISD3Sidebar;

package/dist/components/Sidebar/index.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { ProLayout, ProConfigProvider } from "@ant-design/pro-components";
+import { DownOutlined, ExclamationCircleOutlined, LogoutOutlined, SettingOutlined, } from "@ant-design/icons";
+import { ProConfigProvider, ProLayout } from "@ant-design/pro-components";
 import { Dropdown, Modal } from "antd";
-import { SettingOutlined, LogoutOutlined, DownOutlined, ExclamationCircleOutlined, } from "@ant-design/icons";
+import { useEffect, useState } from "react";
 import { ThemeProvider } from "styled-components";
-import { StyledCrUserInfoInner, StyledCrUserInfoAvatar, StyledCrUserInfoContent, StyledUsername, StyledUsernameInfo, StyledUserArrow, StyledCrUserDesignation, StyledCrUserInfo, } from "./index.styled";
-export const HISD3Sidebar = ({ account, logoUrl, appName, menuItems, onLogout, pathname, avatarSrc, styledTheme, settingsUrl, collapsed = false, loading = false, hideSidebar = false, layoutTop = false, }) => {
+import { StyledCrUserDesignation, StyledCrUserInfo, StyledCrUserInfoAvatar, StyledCrUserInfoContent, StyledCrUserInfoInner, StyledUserArrow, StyledUsername, StyledUsernameInfo, } from "./index.styled";
+export const HISD3Sidebar = ({ children, account, logoUrl, appName, menuItems, onLogout, pathname, avatarSrc, styledTheme, settingsUrl, collapsed = false, loading = false, hideSidebar = false, layoutTop = false, }) => {
     const [isCollapsed, setIsCollapsed] = useState(collapsed);
     useEffect(() => {
         if (collapsed !== isCollapsed) {
@@ -51,8 +51,8 @@ export const HISD3Sidebar = ({ account, logoUrl, appName, menuItems, onLogout, p
                                     onClick: confirmLogout,
                                 },
                             ],
-                        }, children: _jsxs(StyledCrUserInfoInner, { className: "ant-dropdown-link", children: [avatarSrc && (_jsx(StyledCrUserInfoAvatar, { src: avatarSrc, size: "small" })), _jsxs(StyledCrUserInfoContent, { children: [_jsxs(StyledUsernameInfo, { children: [_jsx(StyledUsername, { children: account.fullName }), _jsx(StyledUserArrow, { children: _jsx(DownOutlined, {}) })] }), _jsx(StyledCrUserDesignation, { children: account.positionType })] })] }) }) })), menuItemRender: (item, dom) => _jsx("a", { href: item.path || "/", children: dom }) })) : (
+                        }, children: _jsxs(StyledCrUserInfoInner, { className: "ant-dropdown-link", children: [avatarSrc && (_jsx(StyledCrUserInfoAvatar, { src: avatarSrc, size: "small" })), _jsxs(StyledCrUserInfoContent, { children: [_jsxs(StyledUsernameInfo, { children: [_jsx(StyledUsername, { children: account.fullName }), _jsx(StyledUserArrow, { children: _jsx(DownOutlined, {}) })] }), _jsx(StyledCrUserDesignation, { children: account.positionType })] })] }) }) })), menuItemRender: (item, dom) => _jsx("a", { href: item.path || "/", children: dom }), children: children })) : (
             // If no sidebar, just render children
-            _jsx(_Fragment, {})) }) }));
+            _jsx(_Fragment, { children: children })) }) }));
 };
 export default HISD3Sidebar;

package/dist/index.d.ts

@@ -1 +1,160 @@
-export { default as HISD3Sidebar } from "./components/Sidebar";
+import React from 'react';
+
+interface IUserEmployee {
+    id: string;
+    fullName: string;
+    gender: "MALE" | "FEMALE";
+    positionType?: string;
+    [key: string]: any;
+}
+
+declare enum ThemeMode {
+    LIGHT = "light",
+    SEMI_DARK = "semi-dark",
+    DARK = "dark"
+}
+declare enum LayoutDirection {
+    RTL = "rtl",
+    LTR = "ltr"
+}
+
+interface FontSize {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+}
+interface FontWeight {
+    light: string;
+    regular: string;
+    medium: string;
+    bold: string;
+    lg: string;
+}
+interface Font {
+    size: FontSize;
+    weight: FontWeight;
+}
+interface Palette {
+    mode: ThemeMode;
+    borderColor: string;
+    dividerColor: string;
+    tooltipBg: string;
+    background: string;
+    primary: {
+        main: string;
+        contrastText: string;
+    };
+    secondary: {
+        main: string;
+    };
+    success: {
+        main: string;
+        light: string;
+    };
+    warning: {
+        main: string;
+        light: string;
+    };
+    gray: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        A100: string;
+        A200: string;
+        A400: string;
+        A700: string;
+    };
+    black: string;
+    white: string;
+    orange: {
+        5: string;
+        6: string;
+    };
+    cyan: {
+        7: string;
+    };
+    red: {
+        6: string;
+    };
+    green: {
+        3: string;
+        5: string;
+        6: string;
+        7: string;
+    };
+    blue: {
+        5: string;
+        7: string;
+    };
+    text: string;
+}
+interface Sidebar {
+    light: string;
+    dark: string;
+}
+interface Breakpoints {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+}
+interface Sizes {
+    line: {
+        base: number;
+    };
+    borderRadius: {
+        base: string;
+        circle: string;
+    };
+    framed: {
+        base: string;
+    };
+}
+interface StyledTheme {
+    spacing: number;
+    cardRadius: string;
+    cardRadius30: string;
+    cardShadow: string;
+    direction: LayoutDirection;
+    palette: Palette;
+    status: {
+        danger: string;
+    };
+    divider: string;
+    font: Font;
+    sidebar: Sidebar;
+    breakpoints: Breakpoints;
+    sizes: Sizes;
+}
+
+interface HISD3SidebarProps {
+    account: IUserEmployee;
+    logoUrl: string;
+    appName: string;
+    menuItems: any[];
+    onLogout: () => Promise<void>;
+    pathname: string;
+    styledTheme: StyledTheme;
+    collapsed?: boolean;
+    loading?: boolean;
+    hideSidebar?: boolean;
+    layoutTop?: boolean;
+    avatarSrc?: string;
+    settingsUrl?: string;
+    children: React.ReactNode;
+}
+declare const HISD3Sidebar: React.FC<HISD3SidebarProps>;
+
+export { HISD3Sidebar };