sevago-sso-fe 1.0.23 → 1.0.25

package/README.md

@@ -5,13 +5,15 @@ A comprehensive Single Sign-On (SSO) frontend library built with React, TypeScri
 ## Features
 
 - 🔐 Complete authentication system with login, logout, and token management
-- 🎨 Material-UI components with custom styling
+- 🎨 Material-UI components with custom styling and theming
 - 📱 Responsive design with mobile support
 - 🔄 Redux state management with persistence
 - 🌐 API integration with axios
 - 🔔 Real-time notifications with Firebase
 - 📊 Dashboard components and layouts
 - 🎯 TypeScript support with full type definitions
+- 🎭 Framer Motion animations
+- 🔌 Socket.io integration for real-time features
 
 ## Installation
 
@@ -24,7 +26,7 @@ npm install sevago-sso-fe
 This library requires the following peer dependencies to be installed in your project:
 
 ```bash
-npm install react react-dom @emotion/react @emotion/styled @mui/material @mui/system @reduxjs/toolkit react-redux react-router-dom redux-persist
+npm install react@>=17 react-dom@>=17 @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.4 redux-persist@^6.0.0
 ```
 
 ## Usage
@@ -36,21 +38,28 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
 import { BrowserRouter } from 'react-router-dom';
-import { SystemMonitorScreen, store, persistor } from 'sevago-sso-fe';
+import { 
+  App, 
+  store, 
+  persistor,
+  SnackbarProvider 
+} from 'sevago-sso-fe';
 
-function App() {
+function RootApp() {
   return (
     <Provider store={store}>
       <PersistGate loading={null} persistor={persistor}>
         <BrowserRouter>
-          <SystemMonitorScreen />
+          <SnackbarProvider>
+            <App />
+          </SnackbarProvider>
         </BrowserRouter>
       </PersistGate>
     </Provider>
   );
 }
 
-export default App;
+export default RootApp;
 ```
 
 ### Using Individual Components
@@ -60,7 +69,10 @@ import {
   useSnackbar, 
   useApps,
   authApi,
-  userApi 
+  userApi,
+  SystemMonitorScreen,
+  DashboardPage,
+  AuthPage
 } from 'sevago-sso-fe';
 
 function MyComponent() {
@@ -78,6 +90,7 @@ function MyComponent() {
 
   return (
     <div>
+      <SystemMonitorScreen />
       {/* Your content */}
     </div>
   );
@@ -91,13 +104,25 @@ import {
   useSnackbar, 
   useApps, 
   useVersionCheck,
-  useUpdateCurrentAccess 
+  useUpdateCurrentAccess,
+  useActiveSidebar,
+  useAllApps,
+  useIsSystemMonitor,
+  useSidebarState,
+  useTagSelector,
+  useSidebar
 } from 'sevago-sso-fe';
 
 function MyComponent() {
   const { showSnackbar } = useSnackbar();
   const { apps, loading } = useApps();
   const { updateAccess } = useUpdateCurrentAccess();
+  const { isActive } = useActiveSidebar();
+  const { allApps } = useAllApps();
+  const { isSystemMonitor } = useIsSystemMonitor();
+  const { sidebarState } = useSidebarState();
+  const { selectedTags, toggleTag } = useTagSelector();
+  const { sidebar } = useSidebar();
   
   // Version checking
   useVersionCheck({ interval: 5 * 60 * 1000 });
@@ -115,7 +140,7 @@ function MyComponent() {
 ### Using API Services
 
 ```tsx
-import { authApi, userApi, notificationApi } from 'sevago-sso-fe';
+import { authApi, userApi, notificationApi, orgUnitApi } from 'sevago-sso-fe';
 
 // Authentication
 const loginResponse = await authApi.login({ email, password });
@@ -128,49 +153,108 @@ const updatedUser = await userApi.updateAccount(userData);
 // Notifications
 const notifications = await notificationApi.getListNotification(params);
 await notificationApi.subscribeTopic({ token });
+
+// Organization units
+const orgUnits = await orgUnitApi.getOrgUnits();
 ```
 
 ## API Reference
 
+### Main App Component
+- `App` - Main application component with theme provider and routing
+
+### Pages
+- `AuthPage` - Authentication page
+- `DashboardPage` - Main dashboard page
+- `ErrorPage` - Error page
+- `NotFoundPage` - 404 not found page
+
+### Dashboard Screens
+- `SystemMonitorScreen` - System monitoring dashboard screen
+
+### Layouts
+- `AuthLayout` - Authentication layout
+- `DashboardLayout` - Dashboard layout
+- `DefaultLayout` - Default layout
+
 ### Components
-- `AppGrid`
-- `AvatarElement`
-- `AvatarUserInfo`
-- `AvatarUserComponent`
-- `BellComponent`
-- `EmptyComponent`
-- `LoadingComponent`
-- `LogoComponent`
-- `MotionBox`
-- `TimeAgoContentComponent`
-- `TimeAgoComponent`
+
+#### Core Components
+- `AppGrid` - Application grid component
+- `AvatarElement` - Avatar element
+- `AvatarUserInfo` - User info avatar
+- `AvatarUserComponent` - User avatar component
+- `BellComponent` - Notification bell component
+- `EmptyComponent` - Empty state component
+- `LoadingComponent` - Loading component
+- `LogoComponent` - Logo component
+- `MotionBox` - Framer Motion box component
+- `TimeAgoContentComponent` - Time ago content
+- `TimeAgoComponent` - Time ago component
+
+#### UI Elements
+- `ButtonElement` - Custom button element
+- `IconElement` - Icon element
+- `ImageElement` - Image element
+- `RadioElement` - Radio button element
+- `TextFieldElement` - Text field element
+- `TooltipOnClickElement` - Tooltip on click element
+- `TypographyContentCaption` - Typography caption
 
 ### Hooks
-- `useSnackbar()` - Snackbar notifications
+- `useSnackbar()` - Snackbar notifications with SnackbarProvider
 - `useApps()` - Application management
+- `useActiveSidebar()` - Active sidebar state
+- `useAllApps()` - All applications access
+- `useIsSystemMonitor()` - System monitor check
+- `useSidebarState()` - Sidebar state management
 - `useTagSelector()` - Tag selection functionality
 - `useUpdateCurrentAccess()` - Access control updates
 - `useVersionCheck(options)` - Version checking
+- `useSidebar()` - Sidebar management
 
 ### API Services
-- `authApi` - Authentication operations
-- `userApi` - User management
-- `notificationApi` - Notification handling
+- `authApi` - Authentication operations (login, logout, refresh token, etc.)
+- `userApi` - User management (get user, update account, etc.)
+- `notificationApi` - Notification handling (get notifications, subscribe topics, etc.)
 - `orgUnitApi` - Organization unit management
 
 ### Redux Store
 - `store` - Redux store instance
 - `persistor` - Redux persist instance
-- `remainingWeightSlice ` - Redux remainingWeightSlice
-- `account` - login/logout/resetPassword/refreshToken/subscribeTopic/unsubscribeTopic/changeNotificationCount/changeSidebarCount/updateAccount/getAccount/updatePositionOrgUnit/updateCurrentAccess
-- `system` - changeMode(GlobalSystemState)
+- `GlobalReduxState` - Global Redux state type
 
-### Utilities
+#### Redux Slices
+- `remainingWeightSlice` - Remaining weight management
+- `account` - Account management (login, logout, reset password, refresh token, subscribe topic, unsubscribe topic, change notification count, change sidebar count, update account, get account, update position org unit, update current access)
+- `system` - System management (change mode, theme management)
+
+### Router Utilities
 - `renderRoutes` - Route rendering utility
-- `routeConstants` - Route constants
-- `STYLE` - Style constants
-- `MODE` - Theme modes
-- `timeUtils` - Time utility functions (getTimeAgo, getDateTime, getDate, checkNowYear,getMonthRangeForYear, getDayOffsetPx, isSameDateTime, getTimeDate, isDateString)
+- `routes` - Route definitions
+- `routeConstants` - Route constants (ALLOW_USER_TYPES, BOOKING_SCREEN, DASHBOARD_SCREEN, etc.)
+- `RouteType` - Route type enum
+
+### Common Utilities
+
+#### Constants
+- `STYLE` - Style constants (padding, border radius, heights, etc.)
+- `MODE` - Theme modes (light, dark, other)
+- `OPACITY` - Opacity constants
+- `APPS_CONSTANT` - Application constants
+- `REG_EXP` - Regular expression constants
+- `TYPOGRAPHY` - Typography constants
+
+#### Utils
+- `timeUtils` - Time utility functions (getTimeAgo, getDateTime, getDate, checkNowYear, getMonthRangeForYear, getDayOffsetPx, isSameDateTime, getTimeDate, isDateString)
+- `stringUtils` - String utility functions
+- `findCurrentAccessHelper` - Access control helper
+- `otherUtils` - Other utility functions
+
+#### Configuration
+- `axiosConfig` - Axios configuration
+- `firebaseConfig` - Firebase configuration
+- `socketConfig` - Socket.io configuration
 
 ## Configuration
 
@@ -182,6 +266,12 @@ import { initializeApp } from 'firebase/app';
 
 const firebaseConfig = {
   // Your Firebase config
+  apiKey: "your-api-key",
+  authDomain: "your-auth-domain",
+  projectId: "your-project-id",
+  storageBucket: "your-storage-bucket",
+  messagingSenderId: "your-sender-id",
+  appId: "your-app-id"
 };
 
 initializeApp(firebaseConfig);
@@ -197,21 +287,33 @@ import { axiosRequest } from 'sevago-sso-fe';
 axiosRequest.defaults.baseURL = 'https://your-api.com';
 ```
 
+### Environment Variables
+Set up the following environment variables:
+
+```env
+REACT_APP_FIREBASE_VAPID_KEY=your-vapid-key
+REACT_APP_API_BASE_URL=your-api-base-url
+```
+
 ## Styling
 
 The library includes comprehensive styling constants and Material-UI theme customization:
 
 ```tsx
-import { STYLE, MODE } from 'sevago-sso-fe';
+import { STYLE, MODE, OPACITY } from 'sevago-sso-fe';
 
 // Use style constants
 const customStyle = {
   padding: STYLE.PADDING_GAP_LAYOUT,
   borderRadius: STYLE.BORDER_RADIUS_ELEMENT,
+  height: STYLE.HEIGHT_DEFAULT_TEXT_FIELD_BUTTON,
 };
 
 // Use theme modes
-const theme = createTheme(MODE.light); // or MODE.dark
+const theme = createTheme(MODE.light); // or MODE.dark or MODE.other
+
+// Use opacity constants
+const semiTransparent = `${MODE.light.palette.primary.main}${OPACITY[50]}`;
 ```
 
 ## TypeScript Support
@@ -220,11 +322,12 @@ Full TypeScript support is included with comprehensive type definitions:
 
 ```tsx
 import type { 
-  RootState, 
-  AppDispatch, 
+  GlobalReduxState,
   LoginDto, 
   User, 
-  Notification 
+  Notification,
+  SnackbarType,
+  RouteType
 } from 'sevago-sso-fe';
 ```
 
@@ -237,4 +340,25 @@ To contribute to this library:
 3. Run development server: `npm run dev`
 4. Build library: `npm run build:lib`
 5. Test the build: `npm run preview`
-## Changelog
+6. Lint code: `npm run lint`
+
+## Changelog
+
+### Version 1.0.23
+- Initial release with comprehensive SSO functionality
+- Complete authentication system
+- Material-UI integration with custom theming
+- Redux state management with persistence
+- Firebase notifications support
+- Dashboard and system monitoring components
+- TypeScript support throughout
+- Socket.io integration for real-time features
+
+## License
+
+MIT
+
+## Repository
+
+- GitHub: https://github.com/dev1-gmail2025/sevago-sso-fe
+- Issues: https://github.com/dev1-gmail2025/sevago-sso-fe/issues

package/dist/components/styles/typography.style.d.ts

@@ -1 +1 @@
-export declare const TypographyFilter: import('@emotion/styled').StyledComponent<import('@mui/material').TypographyOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "position" | "p" | "style" | "children" | "m" | "classes" | "className" | "color" | "top" | "bottom" | "left" | "right" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
+export declare const TypographyFilter: import('@emotion/styled').StyledComponent<import('@mui/material').TypographyOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "position" | "children" | "p" | "style" | "zIndex" | "typography" | "fontFamily" | "fontSize" | "fontWeight" | "textTransform" | "m" | "classes" | "className" | "color" | "top" | "bottom" | "left" | "right" | "border" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "rowGap" | "textAlign" | "textOverflow" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;