hisd3-ui-kit 1.0.0

package/dist/enum/theme.js

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

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { default as HISD3Sidebar } from "./components/Sidebar";

package/dist/index.js

@@ -0,0 +1,3 @@
+export { default as HISD3Sidebar } from "./components/Sidebar";
+// export { default as Form } from "./components/Form";
+// export { default as CustomButton } from "./components/CustomButton";

package/dist/types/account.d.ts

@@ -0,0 +1,7 @@
+export interface IUserEmployee {
+    id: string;
+    fullName: string;
+    gender: "MALE" | "FEMALE";
+    positionType?: string;
+    [key: string]: any;
+}

package/dist/types/account.js

@@ -0,0 +1 @@
+export {};

package/dist/types/theme.d.ts

@@ -0,0 +1,122 @@
+import { LayoutDirection, ThemeMode } from "../enum/theme";
+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;
+    };
+}
+export 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;
+}
+export {};

package/dist/types/theme.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "hisd3-ui-kit",
+  "version": "1.0.0",
+  "description": "A UI kit for HISD3",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "build": "tsc",
+    "start": "webpack serve"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hisd3/hisd3-ui-kit.git"
+  },
+  "author": "HISD3",
+  "license": "MIT",
+  "dependencies": {
+    "@ant-design/icons": "^6.0.0",
+    "@ant-design/pro-components": "^2.6.10",
+    "antd": "^5.24.8",
+    "react": "18",
+    "react-dom": "18",
+    "styled-components": "^6.1.17"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "mini-css-extract-plugin": "^2.9.2",
+    "terser-webpack-plugin": "^5.3.14",
+    "typescript": "^5.8.3"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "styled-components": "^6.1.17"
+  }
+}