hisd3-ui-kit 1.0.0

package/src/components/Sidebar/index.styled.tsx

@@ -0,0 +1,109 @@
+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/src/components/Sidebar/index.tsx

@@ -0,0 +1,168 @@
+import {
+  DownOutlined,
+  ExclamationCircleOutlined,
+  LogoutOutlined,
+  SettingOutlined,
+} from "@ant-design/icons";
+import { ProConfigProvider, ProLayout } from "@ant-design/pro-components";
+import { Dropdown, Modal } from "antd";
+import React, { useEffect, useState } from "react";
+
+import { ThemeProvider } from "styled-components";
+import { IUserEmployee } from "../../types/account";
+import { StyledTheme } from "../../types/theme";
+import {
+  StyledCrUserDesignation,
+  StyledCrUserInfo,
+  StyledCrUserInfoAvatar,
+  StyledCrUserInfoContent,
+  StyledCrUserInfoInner,
+  StyledUserArrow,
+  StyledUsername,
+  StyledUsernameInfo,
+} from "./index.styled";
+
+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;
+}
+
+export const HISD3Sidebar: React.FC<HISD3SidebarProps> = ({
+  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) {
+      setIsCollapsed(collapsed);
+    }
+  }, [collapsed]);
+
+  const confirmLogout = () => {
+    Modal.confirm({
+      title: "Are you sure you want to logout?",
+      content: "Please click OK to continue",
+      icon: <ExclamationCircleOutlined />,
+      onOk: onLogout,
+    });
+  };
+
+  if (typeof document === "undefined") {
+    return null;
+  }
+
+  return (
+    <ThemeProvider theme={styledTheme}>
+      <ProConfigProvider hashed={false}>
+        {!hideSidebar ? (
+          <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) => (
+              <a href="/">
+                {logo}
+                {title}
+              </a>
+            )}
+            menuFooterRender={() => (
+              <StyledCrUserInfo className="cr-user-info-light">
+                <Dropdown
+                  trigger={["click"]}
+                  placement="topRight"
+                  menu={{
+                    items: [
+                      {
+                        key: "settings",
+                        icon: <SettingOutlined />,
+                        label: "Settings",
+                        onClick: () =>
+                          (window.location.href = settingsUrl ?? "/settings"),
+                      },
+                      {
+                        key: "logout",
+                        icon: <LogoutOutlined />,
+                        label: "Logout",
+                        onClick: confirmLogout,
+                      },
+                    ],
+                  }}
+                >
+                  <StyledCrUserInfoInner className="ant-dropdown-link">
+                    {avatarSrc && (
+                      <StyledCrUserInfoAvatar src={avatarSrc} size="small" />
+                    )}
+                    <StyledCrUserInfoContent>
+                      <StyledUsernameInfo>
+                        <StyledUsername>{account.fullName}</StyledUsername>
+                        <StyledUserArrow>
+                          <DownOutlined />
+                        </StyledUserArrow>
+                      </StyledUsernameInfo>
+                      <StyledCrUserDesignation>
+                        {account.positionType}
+                      </StyledCrUserDesignation>
+                    </StyledCrUserInfoContent>
+                  </StyledCrUserInfoInner>
+                </Dropdown>
+              </StyledCrUserInfo>
+            )}
+            menuItemRender={(item, dom) => <a href={item.path || "/"}>{dom}</a>}
+          >
+            {children}
+          </ProLayout>
+        ) : (
+          // If no sidebar, just render children
+          <>{children}</>
+        )}
+      </ProConfigProvider>
+    </ThemeProvider>
+  );
+};
+
+export default HISD3Sidebar;

package/src/enum/theme.ts

@@ -0,0 +1,427 @@
+export enum ThemeStyle {
+  MODERN = "modern",
+  STANDARD = "standard",
+}
+export enum ThemeStyleRadius {
+  MODERN = "30px",
+  STANDARD = "16px",
+}
+export enum ThemeMode {
+  LIGHT = "light",
+  SEMI_DARK = "semi-dark",
+  DARK = "dark",
+}
+export enum LayoutType {
+  FULL_WIDTH = "full-width",
+  BOXED = "boxed",
+  FRAMED = "framed",
+}
+
+export enum MenuStyle {
+  DEFAULT = "default",
+  STANDARD = "standard",
+  ROUNDED = "rounded",
+  ROUNDED_REVERSE = "rounded-reverse",
+  CURVED_MENU = "curved-menu",
+}
+
+export 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 enum FooterType {
+  FIXED = "fixed",
+  FLUID = "fluid",
+}
+export enum LayoutDirection {
+  RTL = "rtl",
+  LTR = "ltr",
+}
+export enum HeaderType {
+  DARK = "dark",
+  LIGHT = "light",
+}
+export enum RouteTransition {
+  NONE = "none",
+  FADE = "fade",
+  SLIDE_LEFT = "slideLeft",
+  SLIDE_RIGHT = "slideRight",
+  SLIDE_UP = "slideUp",
+  SLIDE_DOWN = "slideDown",
+}
+export enum Fonts {
+  LIGHT = "300",
+  REGULAR = "400",
+  MEDIUM = "500",
+  BOLD = "600",
+}
+
+export enum AuthType {
+  FIREBASE = "firebase",
+  AWS_COGNITO = "aws_cognito",
+  AUTH0 = "auth0",
+  JWT_AUTH = "jwt_auth",
+}
+
+export 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 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 enum MessageType {
+  MEDIA = 1,
+  TEXT = 2,
+}
+
+export enum RoutePermittedRole {
+  Admin = "admin",
+  User = "user",
+}

package/src/index.ts

@@ -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/src/types/account.ts

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

package/src/types/styled-components.d.ts

@@ -0,0 +1,7 @@
+// styled-components.d.ts
+import "styled-components";
+import { StyledTheme } from "./theme";
+
+declare module "styled-components" {
+  export interface DefaultTheme extends StyledTheme {}
+}