sevago-library 1.0.2 → 1.0.6

package/README.md

@@ -4,7 +4,7 @@
 
 A comprehensive Single Sign-On (SSO) frontend library built with React, TypeScript, and Material-UI.
 
-[![npm version](https://img.shields.io/npm/v/sevago-sso-fe)](https://www.npmjs.com/package/sevago-sso-fe)
+[![npm version](https://img.shields.io/npm/v/sevago-library)](https://www.npmjs.com/package/sevago-library)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
 </div>
@@ -13,9 +13,10 @@ A comprehensive Single Sign-On (SSO) frontend library built with React, TypeScri
 
 ## Support
 
-- **GitHub Issues:** [https://github.com/dev1-gmail2025/sevago-sso-fe/issues](https://github.com/dev1-gmail2025/sevago-sso-fe/issues)
-- **Repository:** [https://github.com/dev1-gmail2025/sevago-sso-fe](https://github.com/dev1-gmail2025/sevago-sso-fe)
+- **GitHub Issues:** [https://github.com/dev1-gmail2025/sevago-library/issues](https://github.com/dev1-gmail2025/sevago-library/issues)
+- **Repository:** [https://github.com/dev1-gmail2025/sevago-library](https://github.com/dev1-gmail2025/sevago-library)
 - **Material Symbols:** [https://fonts.google.com/icons](https://fonts.google.com/icons)
+
 ## Features
 
 - 🎨 Material-UI components with custom styling and theming
@@ -30,7 +31,7 @@ A comprehensive Single Sign-On (SSO) frontend library built with React, TypeScri
 ## Installation
 
 ```bash
-npm install sevago-sso-fe
+npm install sevago-library
 ```
 
 ### Peer Dependencies
@@ -50,7 +51,7 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
 import { BrowserRouter } from 'react-router-dom';
-import App from 'sevago-sso-fe';
+import App from 'sevago-library';
 
 function RootApp() {
   return (
@@ -74,7 +75,7 @@ export default RootApp;
 #### Style Constants
 
 ```tsx
-import { STYLE, MODE, OPACITY } from 'sevago-sso-fe';
+import { STYLE, MODE, OPACITY } from 'sevago-library';
 
 const customStyle = {
   padding: STYLE.PADDING_GAP_LAYOUT,
@@ -86,7 +87,7 @@ const customStyle = {
 #### Theme Modes
 
 ```tsx
-import { MODE } from 'sevago-sso-fe';
+import { MODE } from 'sevago-library';
 import { createTheme } from '@mui/material/styles';
 
 const theme = createTheme(MODE.light); // or MODE.dark or MODE.other
@@ -95,7 +96,7 @@ const theme = createTheme(MODE.light); // or MODE.dark or MODE.other
 #### Opacity Constants
 
 ```tsx
-import { MODE, OPACITY } from 'sevago-sso-fe';
+import { MODE, OPACITY } from 'sevago-library';
 
 const semiTransparent = `${MODE.light.palette.primary.main}${OPACITY[50]}`;
 ```
@@ -105,7 +106,7 @@ const semiTransparent = `${MODE.light.palette.primary.main}${OPACITY[50]}`;
 #### Time Utils
 
 ```tsx
-import { timeUtils } from 'sevago-sso-fe';
+import { timeUtils } from 'sevago-library';
 
 const timeAgo = timeUtils.getTimeAgo(new Date());
 const dateTime = timeUtils.getDateTime(new Date());
@@ -115,7 +116,7 @@ const date = timeUtils.getDate(new Date());
 #### String Utils
 
 ```tsx
-import { stringUtils } from 'sevago-sso-fe';
+import { stringUtils } from 'sevago-library';
 
 // Use string utility functions
 ```
@@ -123,7 +124,7 @@ import { stringUtils } from 'sevago-sso-fe';
 #### App Utils
 
 ```tsx
-import { Environment, getCurrentEnvironment } from 'sevago-sso-fe';
+import { Environment, getCurrentEnvironment } from 'sevago-library';
 
 // Get current environment based on hostname
 const env = getCurrentEnvironment();
@@ -138,7 +139,7 @@ const production = Environment.PRODUCTION; // "production"
 ### Enums
 
 ```tsx
-import { AppCategory, Mode, OrderType, Environment } from 'sevago-sso-fe';
+import { AppCategory, Mode, OrderType, Environment } from 'sevago-library';
 
 // Use enums
 const category = AppCategory.ALL;
@@ -153,20 +154,20 @@ const env = Environment.DEVELOP;
 
 ### Components
 
-| Component                         | Description                                       | Props                                                                                                                                                                                                                         |
-| --------------------------------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `App`                             | Main application component with theme provider    | None                                                                                                                                                                                                                          |
-| `SystemMonitorScreen`             | System monitoring dashboard screen                | `env: Environment`, `blacklist?: string[]`                                                                                                                                                                                    |
-| `AppGrid`                         | Application grid component with smart URL routing | `apps: AppInfo[]`, `env: Environment`, `columns?: number`, `rows?: number`, `iconSize?: number`, `iconRadius?: number`, `gap?: number \| string`, `showPagination?: boolean`, `titleVariant?`, `titleColor?`, `captionColor?` |
-| `AppsSidebar`                     | Applications sidebar component                    | `isOpen: boolean`, `onClose: () => void`, `env: Environment`, `position?: "left" \| "right"`, `blacklist?: string[]`                                                                                                          |
-| `SystemMonitorSidebarPart`        | System monitor sidebar part                       | -                                                                                                                                                                                                                             |
+| Component                  | Description                                       | Props                                                                                                                                                                                                                         |
+| -------------------------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `App`                      | Main application component with theme provider    | None                                                                                                                                                                                                                          |
+| `SystemMonitorScreen`      | System monitoring dashboard screen                | `env: Environment`, `blacklist?: string[]`                                                                                                                                                                                    |
+| `AppGrid`                  | Application grid component with smart URL routing | `apps: AppInfo[]`, `env: Environment`, `columns?: number`, `rows?: number`, `iconSize?: number`, `iconRadius?: number`, `gap?: number \| string`, `showPagination?: boolean`, `titleVariant?`, `titleColor?`, `captionColor?` |
+| `AppsSidebar`              | Applications sidebar component                    | `isOpen: boolean`, `onClose: () => void`, `env: Environment`, `position?: "left" \| "right"`, `blacklist?: string[]`                                                                                                          |
+| `SystemMonitorSidebarPart` | System monitor sidebar part                       | -                                                                                                                                                                                                                             |
 
 ## TypeScript Support
 
 Full TypeScript support with comprehensive type definitions:
 
 ```tsx
-import type { AppInfo, AppGridProps, SystemMonitorScreenProps, AppsSidebarProps, Environment } from 'sevago-sso-fe';
+import type { AppInfo, AppGridProps, SystemMonitorScreenProps, AppsSidebarProps, Environment } from 'sevago-library';
 
 // AppInfo interface
 interface AppInfo {
@@ -195,8 +196,8 @@ interface AppInfo {
 
 ```bash
 # Clone the repository
-git clone https://github.com/dev1-gmail2025/sevago-sso-fe.git
-cd sevago-sso-fe
+git clone https://github.com/dev1-gmail2025/sevago-library.git
+cd sevago-library
 
 # Install dependencies
 npm install
@@ -211,7 +212,6 @@ npm run build:lib
 npm run lint
 ```
 
-
 ---
 
 <div align="center">

package/dist/index.cjs.js

@@ -73709,6 +73709,68 @@ const TextFieldElement = ({
     )
   ] });
 };
+const TagElement = ({
+  type,
+  content,
+  width: width2 = "fit-content",
+  variation = "caption",
+  size = "medium",
+  variant = "contained",
+  sx,
+  color: color2,
+  iconProps
+}) => {
+  const TAG_VARIANT = {
+    contained: {
+      backgroundColor: type,
+      color: color2 || "white"
+    },
+    outlined: {
+      backgroundColor: lightenColor(type, 0.8),
+      color: type
+    },
+    "outlined-border": {
+      backgroundColor: lightenColor(type, 0.8),
+      border: `1px solid ${type}`,
+      color: type
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: iconProps ? /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Stack,
+    {
+      sx: {
+        borderRadius: BORDER_RADIUS_ELEMENT_SMALL,
+        width: width2,
+        textAlign: "center",
+        textWrap: "nowrap",
+        ...TAG_SIZE[size],
+        ...TAG_VARIANT[variant],
+        ...sx
+      },
+      children: [
+        iconProps && iconProps,
+        /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: variation, children: content })
+      ]
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
+    material.Typography,
+    {
+      variant: variation,
+      sx: {
+        borderRadius: BORDER_RADIUS_ELEMENT_SMALL,
+        width: width2,
+        textAlign: "center",
+        textWrap: "nowrap",
+        justifyContent: "center",
+        ...getLimitLineCss(1),
+        ...TAG_SIZE[size],
+        ...TAG_VARIANT[variant],
+        ...sx
+      },
+      children: content
+    }
+  ) });
+};
 const TypographyInfoUser = ({
   items,
   columns = 2,
@@ -73718,7 +73780,8 @@ const TypographyInfoUser = ({
   showEmptyAsDots = true,
   gridTemplateColumns: gridTemplateColumns2 = "1.75fr 2fr",
   highlightQuery,
-  direction = "row"
+  direction = "row",
+  color: color2
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     StackRow,
@@ -73734,37 +73797,27 @@ const TypographyInfoUser = ({
         system.Stack,
         {
           sx: {
-            display: direction === "row" ? "grid" : "flex",
             gridTemplateColumns: direction === "row" ? columns === 1 ? "1fr 3fr" : gridTemplateColumns2 : "unset",
             height: "fit-content",
-            flexDirection: direction === "column" ? "column" : "row"
+            flexDirection: direction === "column" ? "column" : "row",
+            gap: 0
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              material.Typography,
+            /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { sx: { ...TYPOGRAPHY.textSm.regular, color: COMMON.gray6, flex: 1 }, children: [
+              highlightYellow(item.label, highlightQuery ?? "", showEmptyAsDots),
+              ":"
+            ] }),
+            item.statusTag ? /* @__PURE__ */ jsxRuntime.jsx(
+              TagElement,
               {
-                sx: {
-                  ...TYPOGRAPHY.textSm.regular,
-                  color: COMMON.gray6,
-                  flex: 1
-                },
-                children: [
-                  highlightYellow(item.label, highlightQuery ?? "", showEmptyAsDots),
-                  ":"
-                ]
+                sx: { textTransform: "none", width: "100%", ...sx },
+                content: item.value,
+                type: color2 || "inherit"
               }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
               material.Typography,
               {
-                sx: {
-                  ...TYPOGRAPHY.textSm.regular,
-                  color: COMMON.black,
-                  flex: 1,
-                  borderBottom: `1px solid ${COMMON.gray8}`,
-                  textAlign: "right",
-                  ...item.sxValue
-                },
+                sx: { ...TYPOGRAPHY.textSm.regular, color: COMMON.black, flex: 1, ...item.sxValue },
                 children: highlightYellow(item.value, highlightQuery ?? "", showEmptyAsDots)
               }
             )
@@ -75989,68 +76042,6 @@ const tableArgTypes = {
   getRowMenu: { control: false },
   onDisabled: { control: false }
 };
-const TagElement = ({
-  type,
-  content,
-  width: width2 = "fit-content",
-  variation = "caption",
-  size = "medium",
-  variant = "contained",
-  sx,
-  color: color2,
-  iconProps
-}) => {
-  const TAG_VARIANT = {
-    contained: {
-      backgroundColor: type,
-      color: color2 || "white"
-    },
-    outlined: {
-      backgroundColor: lightenColor(type, 0.8),
-      color: type
-    },
-    "outlined-border": {
-      backgroundColor: lightenColor(type, 0.8),
-      border: `1px solid ${type}`,
-      color: type
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: iconProps ? /* @__PURE__ */ jsxRuntime.jsxs(
-    material.Stack,
-    {
-      sx: {
-        borderRadius: BORDER_RADIUS_ELEMENT_SMALL,
-        width: width2,
-        textAlign: "center",
-        textWrap: "nowrap",
-        ...TAG_SIZE[size],
-        ...TAG_VARIANT[variant],
-        ...sx
-      },
-      children: [
-        iconProps && iconProps,
-        /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: variation, children: content })
-      ]
-    }
-  ) : /* @__PURE__ */ jsxRuntime.jsx(
-    material.Typography,
-    {
-      variant: variation,
-      sx: {
-        borderRadius: BORDER_RADIUS_ELEMENT_SMALL,
-        width: width2,
-        textAlign: "center",
-        textWrap: "nowrap",
-        justifyContent: "center",
-        ...getLimitLineCss(1),
-        ...TAG_SIZE[size],
-        ...TAG_VARIANT[variant],
-        ...sx
-      },
-      children: content
-    }
-  ) });
-};
 const UserInfo = ({
   name = "Hệ thống",
   department = "Hệ thống",