hisd3-ui-kit 2.0.8 → 3.0.0

package/dist/index.d.ts

@@ -1,2 +1,648 @@
-import "antd/dist/reset.css";
-export { default as HISD3Sidebar } from "./components/Sidebar/index";
+import { ThemeConfig, MenuProps } from 'antd';
+import React, { ReactNode } from 'react';
+
+interface IUserEmployee {
+    id: string;
+    fullName: string;
+    gender: "MALE" | "FEMALE";
+    positionType?: string;
+    [key: string]: any;
+}
+
+declare enum ThemeStyle {
+    MODERN = "modern",
+    STANDARD = "standard"
+}
+declare enum ThemeStyleRadius {
+    MODERN = "30px",
+    STANDARD = "16px"
+}
+declare enum ThemeMode {
+    LIGHT = "light",
+    SEMI_DARK = "semi-dark",
+    DARK = "dark"
+}
+declare enum LayoutType {
+    FULL_WIDTH = "full-width",
+    BOXED = "boxed",
+    FRAMED = "framed"
+}
+declare enum MenuStyle {
+    DEFAULT = "default",
+    STANDARD = "standard",
+    ROUNDED = "rounded",
+    ROUNDED_REVERSE = "rounded-reverse",
+    CURVED_MENU = "curved-menu"
+}
+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"
+}
+declare enum FooterType {
+    FIXED = "fixed",
+    FLUID = "fluid"
+}
+declare enum LayoutDirection {
+    RTL = "rtl",
+    LTR = "ltr"
+}
+declare enum HeaderType {
+    DARK = "dark",
+    LIGHT = "light"
+}
+declare enum RouteTransition {
+    NONE = "none",
+    FADE = "fade",
+    SLIDE_LEFT = "slideLeft",
+    SLIDE_RIGHT = "slideRight",
+    SLIDE_UP = "slideUp",
+    SLIDE_DOWN = "slideDown"
+}
+declare enum Fonts {
+    LIGHT = "300",
+    REGULAR = "400",
+    MEDIUM = "500",
+    BOLD = "600"
+}
+declare enum AuthType {
+    FIREBASE = "firebase",
+    AWS_COGNITO = "aws_cognito",
+    AUTH0 = "auth0",
+    JWT_AUTH = "jwt_auth"
+}
+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"
+}
+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;
+        };
+    };
+};
+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;
+        };
+    };
+};
+declare enum MessageType {
+    MEDIA = 1,
+    TEXT = 2
+}
+declare enum RoutePermittedRole {
+    Admin = "admin",
+    User = "user"
+}
+
+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;
+}
+
+/**
+ * Menu item shape accepted by HISD3Sidebar.
+ *
+ * This intentionally mirrors the `MenuDataItem` shape that the previous
+ * ProLayout-based sidebar consumed (`path`, `name`, `icon`, `children`,
+ * `hideInMenu`), so existing apps keep passing the same `menuItems`.
+ */
+interface HISD3MenuItem {
+    key?: string;
+    path?: string;
+    name?: ReactNode;
+    icon?: ReactNode;
+    children?: HISD3MenuItem[];
+    hideInMenu?: boolean;
+    disabled?: boolean;
+    /** When true the item is rendered as a group title (like ProLayout's `flatMenu`). */
+    group?: boolean;
+    [key: string]: unknown;
+}
+
+interface HISD3SidebarProps {
+    account: IUserEmployee;
+    logoUrl: string;
+    appName: string;
+    /** Same shape as before (ProLayout `MenuDataItem`): `{ path, name, icon, children }`. */
+    menuItems: HISD3MenuItem[];
+    onLogout: () => Promise<void> | void;
+    /** Current location pathname, used to highlight the active menu item. */
+    pathname: string;
+    styledTheme: StyledTheme;
+    collapsed?: boolean;
+    /** Called when the user toggles the sider (controlled usage). */
+    onCollapse?: (collapsed: boolean) => void;
+    loading?: boolean;
+    hideSidebar?: boolean;
+    /** Render the navigation as a top header bar instead of a left sider. */
+    layoutTop?: boolean;
+    avatarSrc?: string;
+    settingsUrl?: string;
+    /**
+     * Ant Design theme applied via a nested `ConfigProvider`.
+     * Defaults to `hisd3AntdTheme`; pass `null` to inherit the parent theme untouched.
+     */
+    antdTheme?: ThemeConfig | null;
+    /**
+     * Custom link renderer, e.g. to use react-router's `<Link>`:
+     * `(item, label) => <Link to={item.path!}>{label}</Link>`
+     */
+    renderMenuLink?: (item: HISD3MenuItem, label: ReactNode) => ReactNode;
+    /** Extra content rendered in the header, right side (top layout) or sider header (side layout). */
+    headerExtra?: ReactNode;
+    /** Extra items prepended to the account dropdown. */
+    userMenuItems?: MenuProps["items"];
+    /** Hide the collapse trigger button. */
+    hideCollapseTrigger?: boolean;
+    /** Width in px of the expanded sider. Default 220. */
+    siderWidth?: number;
+    /** Disable the built-in content padding wrapper and render children directly. */
+    bareContent?: boolean;
+    children: React.ReactNode;
+}
+declare const HISD3Sidebar: React.FC<HISD3SidebarProps>;
+
+interface UserMenuProps {
+    account: IUserEmployee;
+    avatarSrc?: string;
+    settingsUrl?: string;
+    onLogout: () => Promise<void> | void;
+    collapsed?: boolean;
+    /** "topRight" for the sider footer, "bottomRight" for the top header. */
+    placement?: "topRight" | "bottomRight";
+    extraItems?: MenuProps["items"];
+}
+/**
+ * Account dropdown (Settings / Logout) shown in the sider footer or header.
+ * Uses `App.useApp()` so the confirm modal picks up the surrounding
+ * ConfigProvider theme — the static `Modal.confirm` cannot in antd v6.
+ */
+declare const UserMenu: React.FC<UserMenuProps>;
+
+/**
+ * HISD3 brand tokens for Ant Design v6.
+ *
+ * These reproduce the look of the former ProLayout `token.sider` settings
+ * (teal selected/hover state) and are exported so every HISD3 app can pass
+ * them to its own `<ConfigProvider theme={hisd3AntdTheme}>`.
+ */
+declare const HISD3_COLORS: {
+    readonly primary: "#00796b";
+    readonly primaryLight: "#e0f7f7";
+    readonly headerSelectedBg: "rgba(0,0,0,0.04)";
+};
+declare const hisd3AntdTheme: ThemeConfig;
+
+export { AppAnimateGroups, AppAnimates, AppMotionAnimate, AuthType, Fonts, FooterType, HISD3Sidebar, HISD3_COLORS, HeaderType, LayoutDirection, LayoutType, MenuStyle, MessageType, NavStyle, RoutePermittedRole, RouteTransition, ThemeMode, ThemeStyle, ThemeStyleRadius, UserMenu, hisd3AntdTheme };
+export type { HISD3MenuItem, HISD3SidebarProps, IUserEmployee, StyledTheme, UserMenuProps };