hisd3-ui-kit 1.0.0 → 2.0.1

package/dist/types/theme.d.ts

@@ -104,19 +104,19 @@ interface Sizes {
     };
 }
 export interface StyledTheme {
-    spacing: number;
-    cardRadius: string;
-    cardRadius30: string;
-    cardShadow: string;
-    direction: LayoutDirection;
-    palette: Palette;
-    status: {
-        danger: string;
+    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;
+    divider?: string;
+    font?: Font;
+    sidebar?: Sidebar;
+    breakpoints?: Breakpoints;
+    sizes?: Sizes;
 }
 export {};

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "hisd3-ui-kit",
-  "version": "1.0.0",
+  "version": "2.0.1",
   "description": "A UI kit for HISD3",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",
   "scripts": {
-    "build": "tsc",
+    "build": "rollup -c",
     "start": "webpack serve"
   },
   "repository": {
@@ -15,18 +15,36 @@
   },
   "author": "HISD3",
   "license": "MIT",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./Sidebar": {
+      "import": "./dist/components/Sidebar/index.js",
+      "types": "./dist/components/Sidebar/index.d.ts"
+    }
+  },
+  "sideEffects": false,
   "dependencies": {
     "@ant-design/icons": "^6.0.0",
     "@ant-design/pro-components": "^2.6.10",
+    "@rollup/plugin-terser": "^0.4.4",
     "antd": "^5.24.8",
     "react": "18",
     "react-dom": "18",
     "styled-components": "^6.1.17"
   },
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-typescript": "^12.1.2",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "mini-css-extract-plugin": "^2.9.2",
+    "rollup": "^4.40.1",
+    "rollup-plugin-dts": "^6.2.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
     "terser-webpack-plugin": "^5.3.14",
     "typescript": "^5.8.3"
   },

package/tsconfig.json

@@ -13,6 +13,6 @@
     "allowJs": true, // Allow JavaScript files to be imported into the TypeScript project
     "resolveJsonModule": true // Allow importing JSON files as modules
   },
-  "include": ["src"], // Include all TypeScript files in 'src' folder
+  "include": ["src", "dist"], // Add your source directories here
   "exclude": ["node_modules"] // Exclude 'node_modules' folder
 }

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

@@ -1,109 +0,0 @@
-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

@@ -1,168 +0,0 @@
-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;