hisd3-ui-kit 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 HISD3
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# HISD3 UI KIT

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

@@ -0,0 +1,20 @@
+import React from "react";
+import { StyledTheme } from "../../types/theme";
+import { IUserEmployee } from "../../types/account";
+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;
+}
+export declare const HISD3Sidebar: React.FC<HISD3SidebarProps>;
+export default HISD3Sidebar;

package/dist/components/Sidebar/index.js

@@ -0,0 +1,58 @@
+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 { Dropdown, Modal } from "antd";
+import { SettingOutlined, LogoutOutlined, DownOutlined, ExclamationCircleOutlined, } from "@ant-design/icons";
+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, }) => {
+    const [isCollapsed, setIsCollapsed] = useState(collapsed);
+    useEffect(() => {
+        if (collapsed !== isCollapsed) {
+            setIsCollapsed(collapsed);
+        }
+    }, [collapsed]);
+    const confirmLogout = () => {
+        Modal.confirm({
+            title: "Are you sure you want to logout?",
+            content: "Please click OK to continue",
+            icon: _jsx(ExclamationCircleOutlined, {}),
+            onOk: onLogout,
+        });
+    };
+    if (typeof document === "undefined") {
+        return null;
+    }
+    return (_jsx(ThemeProvider, { theme: styledTheme, children: _jsx(ProConfigProvider, { hashed: false, children: !hideSidebar ? (_jsx(ProLayout, { layout: layoutTop ? "top" : "side", title: appName, logo: logoUrl, location: { pathname }, loading: loading, collapsed: isCollapsed, onCollapse: (collapse) => setIsCollapsed(collapse), menuDataRender: () => menuItems, menu: {
+                    collapsedShowGroupTitle: true,
+                }, token: {
+                    header: {
+                        colorBgMenuItemSelected: "rgba(0,0,0,0.04)",
+                    },
+                    sider: {
+                        colorBgMenuItemActive: "#e0f7f7",
+                        colorBgMenuItemHover: "#e0f7f7",
+                        colorTextMenuItemHover: "#00796b",
+                        colorBgMenuItemSelected: "#e0f7f7",
+                        colorTextMenuSelected: "#00796b",
+                    },
+                }, headerTitleRender: (logo, title) => (_jsxs("a", { href: "/", children: [logo, title] })), menuFooterRender: () => (_jsx(StyledCrUserInfo, { className: "cr-user-info-light", children: _jsx(Dropdown, { trigger: ["click"], placement: "topRight", menu: {
+                            items: [
+                                {
+                                    key: "settings",
+                                    icon: _jsx(SettingOutlined, {}),
+                                    label: "Settings",
+                                    onClick: () => (window.location.href = settingsUrl ?? "/settings"),
+                                },
+                                {
+                                    key: "logout",
+                                    icon: _jsx(LogoutOutlined, {}),
+                                    label: "Logout",
+                                    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 }) })) : (
+            // If no sidebar, just render children
+            _jsx(_Fragment, {})) }) }));
+};
+export default HISD3Sidebar;

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

@@ -0,0 +1,17 @@
+export declare const StyledDropdownList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("antd").ListProps<unknown> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}, never>> & string & Omit<(<T>(props: import("antd").ListProps<T> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => ReturnType<(<T_1>(props: import("antd").ListProps<T_1>, ref: React.ForwardedRef<HTMLDivElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>)>) & Pick<import("react").FC<{}>, "displayName"> & {
+    Item: import("antd/es/list/Item").ListItemTypeProps;
+}, keyof import("react").Component<any, {}, any>>;
+export declare const StyledCrUserInfo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledCrUserInfoInner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
+export declare const StyledCrUserInfoAvatar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("antd").AvatarProps & import("react").RefAttributes<HTMLSpanElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("antd").AvatarProps & import("react").RefAttributes<HTMLSpanElement>> & {
+    Group: import("react").FC<import("antd/es/avatar/AvatarGroup").AvatarGroupProps>;
+}, keyof import("react").Component<any, {}, any>>;
+export declare const StyledCrUserInfoContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledUsernameInfo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledUsername: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const StyledUserArrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledCrUserDesignation: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;

package/dist/components/Sidebar/index.styled.js

@@ -0,0 +1,100 @@
+import styled from "styled-components";
+import { Avatar, List } from "antd";
+export const StyledDropdownList = styled(List) `
+  & .ant-list-item {
+    padding: 5px 12px;
+    cursor: pointer;
+  }
+`;
+export const StyledCrUserInfo = styled.div `
+  background-color: transparent;
+  padding: 7px 12px;
+  height: 56px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  transition: all 0.2s ease;
+
+  @media screen and (min-width: ${({ theme }) => theme.breakpoints.md}px) {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    height: 71px;
+  }
+
+  & .ant-dropdown-link {
+    color: inherit;
+
+    & .anticon {
+      font-size: ${({ theme }) => theme.font.size.sm};
+    }
+  }
+
+  &.light {
+    & .ant-dropdown-link {
+      color: inherit;
+    }
+  }
+`;
+export const StyledCrUserInfoInner = styled.a `
+  display: flex;
+  align-items: center;
+`;
+export const StyledCrUserInfoAvatar = styled(Avatar) `
+  font-size: 24px;
+  background-color: ${({ theme }) => theme.palette.orange[6]};
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+export const StyledCrUserInfoContent = styled.span `
+  width: calc(100% - 62px);
+  margin-left: 16px;
+  transition: all 0.2s ease;
+
+  [dir="rtl"] & {
+    margin-left: 0;
+    margin-right: 16px;
+  }
+`;
+export const StyledUsernameInfo = styled.span `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+export const StyledUsername = styled.h3 `
+  margin-bottom: 0;
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.lg};
+  color: #000000e0;
+
+  &.light {
+    color: #000000e0;
+  }
+`;
+export const StyledUserArrow = styled.span `
+  margin-left: 12px;
+  width: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  [dir="rtl"] & {
+    margin-left: 0;
+    margin-right: 12px;
+  }
+
+  & svg {
+    display: block;
+  }
+`;
+export const StyledCrUserDesignation = styled.span `
+  margin-top: -2px;
+  color: #000000e0;
+  font-size: ${({ theme }) => theme.font.size.sm};
+
+  .ant-layout-sider-dark & {
+    color: #000000e0;
+  }
+`;

package/dist/components/Sidebar.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface SidebarProps {
+    children: React.ReactNode;
+}
+declare const HISD3Sidebar: React.FC<SidebarProps>;
+export default HISD3Sidebar;

package/dist/components/Sidebar.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Layout, Menu } from "antd";
+import { HomeOutlined, SearchOutlined, SettingOutlined, } from "@ant-design/icons";
+const { Sider, Content } = Layout;
+const HISD3Sidebar = (props) => {
+    return (_jsxs(Layout, { style: { minHeight: "100vh" }, children: [_jsx(Sider, { width: 200, style: { background: "#fff" }, children: _jsxs(Menu, { mode: "inline", defaultSelectedKeys: ["1"], style: { height: "100%", borderRight: 0 }, children: [_jsx(Menu.Item, { icon: _jsx(HomeOutlined, {}), children: "Home" }, "1"), _jsx(Menu.Item, { icon: _jsx(SearchOutlined, {}), children: "Search" }, "2"), _jsx(Menu.Item, { icon: _jsx(SettingOutlined, {}), children: "Settings" }, "3")] }) }), _jsx(Layout, { style: { padding: "0 24px 24px" }, children: _jsx(Content, { style: {
+                        padding: 24,
+                        margin: 0,
+                        minHeight: 280,
+                    }, children: props.children }) })] }));
+};
+export default HISD3Sidebar;

package/dist/enum/theme.d.ts

@@ -0,0 +1,419 @@
+export declare enum ThemeStyle {
+    MODERN = "modern",
+    STANDARD = "standard"
+}
+export declare enum ThemeStyleRadius {
+    MODERN = "30px",
+    STANDARD = "16px"
+}
+export declare enum ThemeMode {
+    LIGHT = "light",
+    SEMI_DARK = "semi-dark",
+    DARK = "dark"
+}
+export declare enum LayoutType {
+    FULL_WIDTH = "full-width",
+    BOXED = "boxed",
+    FRAMED = "framed"
+}
+export declare enum MenuStyle {
+    DEFAULT = "default",
+    STANDARD = "standard",
+    ROUNDED = "rounded",
+    ROUNDED_REVERSE = "rounded-reverse",
+    CURVED_MENU = "curved-menu"
+}
+export declare enum NavStyle {
+    DEFAULT = "default",
+    MINI = "mini",
+    MINI_SIDEBAR_TOGGLE = "mini-sidebar-toggle",
+    STANDARD = "standard",
+    HEADER_USER = "user-header",
+    HEADER_USER_MINI = "user-mini-header",
+    DRAWER = "drawer",
+    BIT_BUCKET = "bit-bucket",
+    H_DEFAULT = "h-default",
+    HOR_HEADER_FIXED = "hor-header-fixed",
+    HOR_DARK_LAYOUT = "hor-dark-layout"
+}
+export declare enum FooterType {
+    FIXED = "fixed",
+    FLUID = "fluid"
+}
+export declare enum LayoutDirection {
+    RTL = "rtl",
+    LTR = "ltr"
+}
+export declare enum HeaderType {
+    DARK = "dark",
+    LIGHT = "light"
+}
+export declare enum RouteTransition {
+    NONE = "none",
+    FADE = "fade",
+    SLIDE_LEFT = "slideLeft",
+    SLIDE_RIGHT = "slideRight",
+    SLIDE_UP = "slideUp",
+    SLIDE_DOWN = "slideDown"
+}
+export declare enum Fonts {
+    LIGHT = "300",
+    REGULAR = "400",
+    MEDIUM = "500",
+    BOLD = "600"
+}
+export declare enum AuthType {
+    FIREBASE = "firebase",
+    AWS_COGNITO = "aws_cognito",
+    AUTH0 = "auth0",
+    JWT_AUTH = "jwt_auth"
+}
+export declare enum AppAnimates {
+    SLIDEUPIN = "transition.slideUpIn",
+    SLIDEUPOUT = "transition.slideUpOut",
+    SLIDEDOWNIN = "transition.slideDownIn",
+    SLIDEDOWNOUT = "transition.slideDownOut",
+    SLIDELEFTIN = "transition.slideLeftIn",
+    SLIDELEFTOUT = "transition.slideLeftOut",
+    SLIDERIGHTIN = "transition.slideRightIn",
+    SLIDERIGHTOUT = "transition.slideRightOut",
+    FADEIN = "transition.fadeIn",
+    FADEOUT = "transition.fadeOut"
+}
+export declare const AppAnimateGroups: {
+    SLIDEUPIN: {
+        hidden: {
+            y: number;
+        };
+        visible: {
+            opacity: number;
+            y: number;
+            transition: {
+                ease: string;
+                delay: number;
+                when: string;
+                duration: number;
+                staggerChildren: number;
+            };
+        };
+    };
+    SLIDEUPOUT: {
+        hidden: {
+            y: number;
+        };
+        visible: {
+            opacity: number;
+            y: string;
+            transition: {
+                ease: string;
+                delay: number;
+                when: string;
+                duration: number;
+                staggerChildren: number;
+            };
+        };
+    };
+    SLIDEDOWNIN: {
+        hidden: {
+            opacity: number;
+            y: string;
+        };
+        visible: {
+            opacity: number;
+            y: number;
+            transition: {
+                ease: string;
+                delay: number;
+                when: string;
+                duration: number;
+                staggerChildren: number;
+            };
+        };
+    };
+    SLIDEDOWNOUT: {
+        hidden: {
+            y: number;
+        };
+        visible: {
+            opacity: number;
+            y: string;
+            transition: {
+                ease: string;
+                delay: number;
+                when: string;
+                duration: number;
+                staggerChildren: number;
+            };
+        };
+    };
+    SLIDELEFTIN: {
+        hidden: {
+            x: string;
+        };
+        visible: {
+            opacity: number;
+            x: number;
+            transition: {
+                ease: string;
+                delay: number;
+                when: string;
+                duration: number;
+                staggerChildren: number;
+            };
+        };
+    };
+    SLIDELEFTOUT: {
+        hidden: {
+            x: number;
+        };
+        visible: {
+            opacity: number;
+            x: string;
+            transition: {
+                ease: string;
+                delay: number;
+                when: string;
+                duration: number;
+                staggerChildren: number;
+            };
+        };
+    };
+    SLIDERIGHTIN: {
+        hidden: {
+            x: string;
+        };
+        visible: {
+            opacity: number;
+            x: number;
+            transition: {
+                ease: string;
+                delay: number;
+                when: string;
+                duration: number;
+                staggerChildren: number;
+            };
+        };
+    };
+    SLIDERIGHTOUT: {
+        hidden: {
+            x: number;
+        };
+        visible: {
+            opacity: number;
+            x: string;
+            transition: {
+                ease: string;
+                delay: number;
+                when: string;
+                duration: number;
+                staggerChildren: number;
+            };
+        };
+    };
+    FADEIN: {
+        hidden: {
+            opacity: number;
+            scale: number;
+        };
+        visible: {
+            opacity: number;
+            scale: number;
+            transition: {
+                ease: string;
+                when: string;
+                staggerChildren: number;
+            };
+        };
+    };
+    FADEOUT: {
+        hidden: {
+            opacity: number;
+            scale: number;
+        };
+        visible: {
+            opacity: number;
+            scale: number;
+            transition: {
+                ease: string;
+                when: string;
+                staggerChildren: number;
+            };
+        };
+    };
+    NOANIMATION: {
+        hidden: {
+            opacity: number;
+        };
+        visible: {
+            opacity: number;
+        };
+    };
+};
+export declare const AppMotionAnimate: {
+    SLIDEUPIN: {
+        variants: {
+            hidden: {
+                y: number;
+                opacity: number;
+            };
+            visible: {
+                opacity: number;
+                y: number;
+            };
+        };
+        transition: {
+            ease: string;
+            when: string;
+        };
+    };
+    SLIDEUPOUT: {
+        variants: {
+            hidden: {
+                y: number;
+                opacity: number;
+            };
+            visible: {
+                opacity: number;
+                y: string;
+            };
+        };
+        transition: {
+            ease: string;
+            when: string;
+        };
+    };
+    SLIDEDOWNIN: {
+        variants: {
+            hidden: {
+                y: number;
+                opacity: number;
+            };
+            visible: {
+                opacity: number;
+                y: number;
+            };
+        };
+        transition: {
+            ease: string;
+            when: string;
+        };
+    };
+    SLIDEDOWNOUT: {
+        variants: {
+            hidden: {
+                y: number;
+                opacity: number;
+            };
+            visible: {
+                opacity: number;
+                y: string;
+            };
+        };
+        transition: {
+            ease: string;
+            when: string;
+        };
+    };
+    SLIDELEFTIN: {
+        variants: {
+            hidden: {
+                x: number;
+                opacity: number;
+            };
+            visible: {
+                opacity: number;
+                x: number;
+            };
+        };
+        transition: {
+            ease: string;
+            when: string;
+        };
+    };
+    SLIDELEFTOUT: {
+        variants: {
+            hidden: {
+                x: number;
+                opacity: number;
+            };
+            visible: {
+                opacity: number;
+                x: string;
+            };
+        };
+        transition: {
+            ease: string;
+            when: string;
+        };
+    };
+    SLIDERIGHTIN: {
+        variants: {
+            hidden: {
+                x: number;
+                opacity: number;
+            };
+            visible: {
+                opacity: number;
+                x: number;
+            };
+        };
+        transition: {
+            ease: string;
+            when: string;
+        };
+    };
+    SLIDERIGHTOUT: {
+        variants: {
+            hidden: {
+                x: number;
+                opacity: number;
+            };
+            visible: {
+                opacity: number;
+                x: string;
+            };
+        };
+        transition: {
+            ease: string;
+            when: string;
+        };
+    };
+    FADEIN: {
+        variants: {
+            hidden: {
+                opacity: number;
+            };
+            visible: {
+                opacity: number;
+            };
+        };
+        transition: {
+            duration: number;
+            ease: string;
+            when: string;
+        };
+    };
+    FADEOUT: {
+        variants: {
+            hidden: {
+                opacity: number;
+            };
+            visible: {
+                opacity: number;
+            };
+        };
+        transition: {
+            duration: number;
+            ease: string;
+            when: string;
+        };
+    };
+};
+export declare enum MessageType {
+    MEDIA = 1,
+    TEXT = 2
+}
+export declare enum RoutePermittedRole {
+    Admin = "admin",
+    User = "user"
+}