Sevago SSO Frontend Library - A comprehensive SSO solution with React components
npm install sevago-sso-febash
npm install sevago-sso-fe
`
$3
`bash
npm install react@^19.2.0 react-dom@^19.2.0 @emotion/react@>=11 @emotion/styled@>=11 @mui/material@>=5 @mui/system@>=5 @reduxjs/toolkit@^2.9.2 react-redux@^9.2.0 react-router-dom@^7.9.5 redux-persist@^6.0.0
`
---
Quick Start
$3
`tsx
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';
function RootApp() {
return (
);
}
export default RootApp;
`
---
Usage
$3
#### App Component
`tsx
import App from 'sevago-sso-fe';
`
#### System Monitor Screen
`tsx
import { SystemMonitorScreen, Environment, getCurrentEnvironment } from 'sevago-sso-fe';
const env = getCurrentEnvironment();
env={env}
blacklist={[]} // Optional: list of paths to exclude
/>
`
#### App Grid
`tsx
import { AppGrid, Environment, getCurrentEnvironment } from 'sevago-sso-fe';
// AppGrid automatically handles URL routing:
// - If env is valid (develop/staging/production): uses configured URLs
// - If env is not valid (e.g., localhost): uses localhost with path
const env = getCurrentEnvironment(); // or Environment.DEVELOP, etc.
apps={apps}
env={env}
columns={5}
rows={3}
iconSize={80}
showPagination={true}
/>
`
#### Sidebar Components
`tsx
import { AppsSidebar, SystemMonitorSidebarPart, Environment, getCurrentEnvironment } from 'sevago-sso-fe';
const env = getCurrentEnvironment();
isOpen={true}
onClose={() => {}}
env={env}
blacklist={[]} // Optional
/>
`
#### UI Elements
##### Avatar Elements
`tsx
import {
AvatarElement,
AvatarOnlineStatusElement,
AvatarUserInfo
} from 'sevago-sso-fe';
`
##### Button Elements
`tsx
import {
ButtonElement,
ButtonIconElement,
ButtonIconCircleElement,
ButtonIconSquareElement,
ButtonIconContentOpacityElement,
ButtonImageElement,
ButtonUploadFileElement
} from 'sevago-sso-fe';
Click me
`
##### Icon Elements
`tsx
import {
IconElement,
IconContentElement,
IconContentBadgeCountElement,
IconContentBadgeCountSubsElement,
IconButtonElement,
IconContentSubsElement,
IconContentOpacityElement
} from 'sevago-sso-fe';
`
##### Image Elements
`tsx
import {
ImageElement,
ImageContentCaptionComponent,
ImageContentTimeComponent,
ImageSizeType
} from 'sevago-sso-fe';
`
##### Link Elements
`tsx
import {
LinkElement,
LinkInternalElement
} from 'sevago-sso-fe';
External Link
Internal Link
`
##### Form Elements
`tsx
import {
RadioElement,
CheckboxElement
} from 'sevago-sso-fe';
`
##### Typography Elements
`tsx
import {
TypographyContentCaption,
TypographyOneLine
} from 'sevago-sso-fe';
Caption text
Long text that will be truncated...
`
##### Tabs Elements
`tsx
import {
TabsComponent,
TabsSubsComponent,
TabsBadgeCountComponent,
TabsBadgeCountSubsComponent,
TAB_STYLES,
TAB_BACKGROUND_STYLES
} from 'sevago-sso-fe';
`
##### Time Ago Elements
`tsx
import {
TimeAgoComponent,
TimeAgoContentComponent
} from 'sevago-sso-fe';
`
##### Other Elements
`tsx
import {
DialogElement,
DialogConfirmActionElement,
DashedDividerElement,
MotionBox
} from 'sevago-sso-fe';
Content
open={open}
onConfirm={handleConfirm}
onCancel={handleCancel}
/>
Animated content
`
$3
#### Style Constants
`tsx
import { STYLE, MODE, OPACITY } from 'sevago-sso-fe';
const customStyle = {
padding: STYLE.PADDING_GAP_LAYOUT,
borderRadius: STYLE.BORDER_RADIUS_ELEMENT,
height: STYLE.HEIGHT_DEFAULT_TEXT_FIELD_BUTTON,
};
`
#### Theme Modes
`tsx
import { MODE } from 'sevago-sso-fe';
import { createTheme } from '@mui/material/styles';
const theme = createTheme(MODE.light); // or MODE.dark or MODE.other
`
#### Opacity Constants
`tsx
import { MODE, OPACITY } from 'sevago-sso-fe';
const semiTransparent = ${MODE.light.palette.primary.main}${OPACITY[50]};
`
$3
#### Time Utils
`tsx
import { timeUtils } from 'sevago-sso-fe';
const timeAgo = timeUtils.getTimeAgo(new Date());
const dateTime = timeUtils.getDateTime(new Date());
const date = timeUtils.getDate(new Date());
`
#### String Utils
`tsx
import { stringUtils } from 'sevago-sso-fe';
// Use string utility functions
`
#### App Utils
`tsx
import { Environment, getCurrentEnvironment } from 'sevago-sso-fe';
// Get current environment based on hostname
const env = getCurrentEnvironment();
// Returns: Environment.DEVELOP | Environment.STAGING | Environment.PRODUCTION
// Environment enum values
const develop = Environment.DEVELOP; // "develop"
const staging = Environment.STAGING; // "staging"
const production = Environment.PRODUCTION; // "production"
`
$3
`tsx
import { AppCategory, Mode, OrderType, Environment } from 'sevago-sso-fe';
// Use enums
const category = AppCategory.ALL;
const mode = Mode.LIGHT;
const order = OrderType.ASC;
const env = Environment.DEVELOP;
`
---
API Reference
$3
| 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 | - |
| Avatar Elements | | |
| AvatarElement | Basic avatar element | src, alt, sx? |
| AvatarOnlineStatusElement | Avatar with online status indicator | src, isOnline, sx? |
| AvatarUserInfo | Avatar with user information | name, avatar, sx? |
| Button Elements | | |
| ButtonElement | Standard button | onClick, children, variant?, sx? |
| ButtonIconElement | Button with icon | icon, onClick, sx? |
| ButtonIconCircleElement | Circular icon button | icon, onClick, sx? |
| ButtonIconSquareElement | Square icon button | icon, onClick, sx? |
| ButtonIconContentOpacityElement | Button with icon and opacity content | icon, content, onClick, sx? |
| ButtonImageElement | Button with image | image, onClick, sx? |
| ButtonUploadFileElement | File upload button | onUpload, accept?, sx? |
| Icon Elements | | |
| IconElement | Basic icon | icon, sx? |
| IconContentElement | Icon with content | icon, content, sx? |
| IconContentBadgeCountElement | Icon with badge count | icon, count, sx? |
| IconContentBadgeCountSubsElement | Icon with badge count and subtitle | icon, count, subtitle, sx? |
| IconButtonElement | Icon button | icon, onClick, sx? |
| IconContentSubsElement | Icon with content and subtitle | icon, content, subtitle, sx? |
| IconContentOpacityElement | Icon with opacity content | icon, content, opacity?, sx? |
| Image Elements | | |
| ImageElement | Image element | url: string, sizeType?: ImageSizeType, sx? |
| ImageContentCaptionComponent | Image with caption | image, caption, sx? |
| ImageContentTimeComponent | Image with time | image, time, sx? |
| Link Elements | | |
| LinkElement | External link | href, target?, children, sx? |
| LinkInternalElement | Internal router link | to, children, sx? |
| Form Elements | | |
| RadioElement | Radio button | value, checked, onChange, sx? |
| CheckboxElement | Checkbox | checked, onChange, label?, sx? |
| Typography Elements | | |
| TypographyContentCaption | Typography with caption | children, variant?, color?, sx? |
| TypographyOneLine | Single line typography (truncated) | children, variant?, sx? |
| Tabs Elements | | |
| TabsComponent | Basic tabs | tabs, value, onChange, sx? |
| TabsSubsComponent | Tabs with subtitles | tabs, value, onChange, sx? |
| TabsBadgeCountComponent | Tabs with badge counts | tabs, badgeCounts, value, onChange, sx? |
| TabsBadgeCountSubsComponent | Tabs with badge counts and subtitles | tabs, badgeCounts, value, onChange, sx? |
| Time Elements | | |
| TimeAgoComponent | Time ago display | date, sx? |
| TimeAgoContentComponent | Time ago with content | date, content?, sx? |
| Other Elements | | |
| DialogElement | Dialog/modal | open, onClose, children, sx? |
| DialogConfirmActionElement | Confirmation dialog | open, onConfirm, onCancel, title?, content?, sx? |
| DashedDividerElement | Dashed divider line | sx? |
| MotionBox | Framer Motion animated box | preset?, animate?, transition?, children, hover?, index?, sx? |
Note: AppGrid automatically handles URL routing:
- If env is a valid Environment enum value (develop/staging/production): uses configured URLs from app.path[env]
- If env is not valid (e.g., localhost development): extracts path and uses window.location.origin with the path
$3
- STYLE - Style constants (padding, border radius, heights, etc.)
- MODE - Theme modes (light, dark, other)
- OPACITY - Opacity constants (0-100)
- REG_EXP - Regular expression constants
- TYPOGRAPHY - Typography constants
$3
- timeUtils - Time utility functions
- getTimeAgo(date)
- getDateTime(date)
- getDate(date)
- checkNowYear(date)
- getMonthRangeForYear(year)
- getDayOffsetPx(day)
- isSameDateTime(date1, date2)
- getTimeDate(date)
- isDateString(str)
- stringUtils - String utility functions
- getLimitLineCss - CSS utility for limiting lines
- Environment - Environment enum (DEVELOP, STAGING, PRODUCTION)
- getCurrentEnvironment() - Detects current environment based on hostname
- Returns Environment.DEVELOP if hostname includes "dev."
- Returns Environment.STAGING if hostname includes "sta."
- Returns Environment.PRODUCTION otherwise
$3
- AppCategory - Application category enum
- Mode - Theme mode enum
- OrderType - Order type enum
- Environment - Environment enum (DEVELOP, STAGING, PRODUCTION)
- AppGroup - Application group enum (ALL, HRM, WORKFLOW_ENGINE, PLATFORM_AND_INFO, B2B, OTHER, CLIENT)
- ImageSizeType - Image size type enum
---
TypeScript Support
Full TypeScript support with comprehensive type definitions:
`tsx
import type {
AppInfo,
AppGridProps,
SystemMonitorScreenProps,
AppsSidebarProps,
Environment
} from 'sevago-sso-fe';
// AppInfo interface
interface AppInfo {
path: {
develop: string;
staging: string;
production: string;
};
content: string;
color: string;
icon: string;
group: AppGroup;
}
`
---
Development
$3
- Node.js >= 16.x
- npm >= 7.x
$3
`bash
Clone the repository
git clone https://github.com/dev1-gmail2025/sevago-sso-fe.git
cd sevago-sso-fe
Install dependencies
npm install
Run development server
npm run dev
Build library
npm run build:lib
Lint code
npm run lint
``