sevago-sso-fe 1.0.55 → 1.0.56
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +252 -23
- package/dist/common/constant/color.constant.d.ts +40 -0
- package/dist/common/constant/index.d.ts +4 -2
- package/dist/common/enums/app-category.enum.d.ts +6 -0
- package/dist/common/index.d.ts +1 -0
- package/dist/common/interfaces/image-with-preview.interface.d.ts +3 -0
- package/dist/common/interfaces/index.d.ts +1 -0
- package/dist/common/utils/delay.utils.d.ts +1 -0
- package/dist/common/utils/index.d.ts +2 -2
- package/dist/common/utils/validator.utils.d.ts +2 -0
- package/dist/components/banner/banner.component.d.ts +5 -0
- package/dist/components/banner/index.d.ts +1 -0
- package/dist/components/bread-cumbs/bread-cumbs.d.ts +9 -0
- package/dist/components/bread-cumbs/index.d.ts +1 -0
- package/dist/components/elements/avatar/avatar-online-status.element.d.ts +12 -0
- package/dist/components/elements/avatar/avatar-user-info.element.d.ts +14 -0
- package/dist/components/elements/avatar/avatar.element.d.ts +9 -0
- package/dist/components/elements/avatar/index.d.ts +3 -0
- package/dist/components/elements/button/button-icon-circle.element.d.ts +5 -0
- package/dist/components/elements/button/button-icon-content-opacity.element.d.ts +9 -0
- package/dist/components/elements/button/button-icon-square.element.d.ts +7 -0
- package/dist/components/elements/button/button-icon.element.d.ts +6 -0
- package/dist/components/elements/button/button-image.element.d.ts +10 -0
- package/dist/components/elements/button/button-upload-file.element.d.ts +9 -0
- package/dist/components/elements/button/button.element.d.ts +10 -0
- package/dist/components/elements/button/index.d.ts +7 -0
- package/dist/components/elements/check-box/check-box.element.d.ts +8 -0
- package/dist/components/elements/check-box/index.d.ts +1 -0
- package/dist/components/elements/dialog/dialog-confirm-action.element.d.ts +16 -0
- package/dist/components/elements/dialog/dialog.element.d.ts +30 -0
- package/dist/components/elements/dialog/index.d.ts +2 -0
- package/dist/components/elements/divider/dashed-divider.element.d.ts +11 -0
- package/dist/components/elements/divider/index.d.ts +1 -0
- package/dist/components/elements/icon/icon-button.element.d.ts +10 -0
- package/dist/components/elements/icon/icon-content-badge-count-subs.element.d.ts +9 -0
- package/dist/components/elements/icon/icon-content-badge-count.element.d.ts +10 -0
- package/dist/components/elements/icon/icon-content-opacity.element.d.ts +10 -0
- package/dist/components/elements/icon/icon-content-subs.element.d.ts +8 -0
- package/dist/components/elements/icon/icon-content.element.d.ts +15 -0
- package/dist/components/elements/icon/index.d.ts +6 -0
- package/dist/components/elements/image/image-content-caption.component.d.ts +15 -0
- package/dist/components/elements/image/image-name-time.component.d.ts +9 -0
- package/dist/components/elements/image/image.element.d.ts +1 -1
- package/dist/components/elements/image/index.d.ts +2 -0
- package/dist/components/elements/index.d.ts +12 -4
- package/dist/components/elements/link/index.d.ts +2 -0
- package/dist/components/elements/link/link-internal.element.d.ts +8 -0
- package/dist/components/elements/link/link.element.d.ts +7 -0
- package/dist/components/elements/tabs/index.d.ts +5 -0
- package/dist/components/elements/tabs/tabs-badge-count-subs.component.d.ts +17 -0
- package/dist/components/elements/tabs/tabs-badge-count.component.d.ts +13 -0
- package/dist/components/elements/tabs/tabs-subs.component.d.ts +16 -0
- package/dist/components/elements/tabs/tabs.component.d.ts +21 -0
- package/dist/components/elements/tabs/tabs.constant.d.ts +21 -0
- package/dist/components/elements/time-ago/index.d.ts +2 -0
- package/dist/components/elements/time-ago/time-ago-content.component.d.ts +7 -0
- package/dist/components/elements/time-ago/time-ago.component.d.ts +6 -0
- package/dist/components/elements/typography/index.d.ts +1 -0
- package/dist/components/elements/typography/typography-content-caption.component.d.ts +1 -0
- package/dist/components/elements/typography/typography-limit-one-line.component.d.ts +7 -0
- package/dist/components/index.d.ts +5 -2
- package/dist/components/loading/index.d.ts +1 -0
- package/dist/components/loading/loading.component.d.ts +7 -0
- package/dist/index.cjs.js +10686 -7651
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +5210 -2175
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -79,42 +79,193 @@ import App from 'sevago-sso-fe';
|
|
|
79
79
|
#### System Monitor Screen
|
|
80
80
|
|
|
81
81
|
```tsx
|
|
82
|
-
import { SystemMonitorScreen } from 'sevago-sso-fe';
|
|
82
|
+
import { SystemMonitorScreen, Environment, getCurrentEnvironment } from 'sevago-sso-fe';
|
|
83
83
|
|
|
84
|
-
|
|
84
|
+
const env = getCurrentEnvironment();
|
|
85
|
+
|
|
86
|
+
<SystemMonitorScreen
|
|
87
|
+
env={env}
|
|
88
|
+
blacklist={[]} // Optional: list of paths to exclude
|
|
89
|
+
/>
|
|
85
90
|
```
|
|
86
91
|
|
|
87
92
|
#### App Grid
|
|
88
93
|
|
|
89
94
|
```tsx
|
|
90
|
-
import { AppGrid } from 'sevago-sso-fe';
|
|
91
|
-
|
|
92
|
-
|
|
95
|
+
import { AppGrid, Environment, getCurrentEnvironment } from 'sevago-sso-fe';
|
|
96
|
+
|
|
97
|
+
// AppGrid automatically handles URL routing:
|
|
98
|
+
// - If env is valid (develop/staging/production): uses configured URLs
|
|
99
|
+
// - If env is not valid (e.g., localhost): uses localhost with path
|
|
100
|
+
|
|
101
|
+
const env = getCurrentEnvironment(); // or Environment.DEVELOP, etc.
|
|
102
|
+
|
|
103
|
+
<AppGrid
|
|
104
|
+
apps={apps}
|
|
105
|
+
env={env}
|
|
106
|
+
columns={5}
|
|
107
|
+
rows={3}
|
|
108
|
+
iconSize={80}
|
|
109
|
+
showPagination={true}
|
|
110
|
+
/>
|
|
93
111
|
```
|
|
94
112
|
|
|
95
113
|
#### Sidebar Components
|
|
96
114
|
|
|
97
115
|
```tsx
|
|
98
|
-
import { AppsSidebar, SystemMonitorSidebarPart } from 'sevago-sso-fe';
|
|
116
|
+
import { AppsSidebar, SystemMonitorSidebarPart, Environment, getCurrentEnvironment } from 'sevago-sso-fe';
|
|
99
117
|
|
|
100
|
-
|
|
118
|
+
const env = getCurrentEnvironment();
|
|
119
|
+
|
|
120
|
+
<AppsSidebar
|
|
121
|
+
isOpen={true}
|
|
122
|
+
onClose={() => {}}
|
|
123
|
+
env={env}
|
|
124
|
+
blacklist={[]} // Optional
|
|
125
|
+
/>
|
|
101
126
|
<SystemMonitorSidebarPart />
|
|
102
127
|
```
|
|
103
128
|
|
|
104
129
|
#### UI Elements
|
|
105
130
|
|
|
131
|
+
##### Avatar Elements
|
|
132
|
+
```tsx
|
|
133
|
+
import {
|
|
134
|
+
AvatarElement,
|
|
135
|
+
AvatarOnlineStatusElement,
|
|
136
|
+
AvatarUserInfo
|
|
137
|
+
} from 'sevago-sso-fe';
|
|
138
|
+
|
|
139
|
+
<AvatarElement src="/avatar.jpg" alt="User" />
|
|
140
|
+
<AvatarOnlineStatusElement src="/avatar.jpg" isOnline={true} />
|
|
141
|
+
<AvatarUserInfo name="John Doe" avatar="/avatar.jpg" />
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
##### Button Elements
|
|
145
|
+
```tsx
|
|
146
|
+
import {
|
|
147
|
+
ButtonElement,
|
|
148
|
+
ButtonIconElement,
|
|
149
|
+
ButtonIconCircleElement,
|
|
150
|
+
ButtonIconSquareElement,
|
|
151
|
+
ButtonIconContentOpacityElement,
|
|
152
|
+
ButtonImageElement,
|
|
153
|
+
ButtonUploadFileElement
|
|
154
|
+
} from 'sevago-sso-fe';
|
|
155
|
+
|
|
156
|
+
<ButtonElement onClick={handleClick}>Click me</ButtonElement>
|
|
157
|
+
<ButtonIconElement icon="home" onClick={handleClick} />
|
|
158
|
+
<ButtonIconCircleElement icon="user" onClick={handleClick} />
|
|
159
|
+
<ButtonUploadFileElement onUpload={handleUpload} />
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
##### Icon Elements
|
|
163
|
+
```tsx
|
|
164
|
+
import {
|
|
165
|
+
IconElement,
|
|
166
|
+
IconContentElement,
|
|
167
|
+
IconContentBadgeCountElement,
|
|
168
|
+
IconContentBadgeCountSubsElement,
|
|
169
|
+
IconButtonElement,
|
|
170
|
+
IconContentSubsElement,
|
|
171
|
+
IconContentOpacityElement
|
|
172
|
+
} from 'sevago-sso-fe';
|
|
173
|
+
|
|
174
|
+
<IconElement icon="home" />
|
|
175
|
+
<IconContentElement icon="user" content="Profile" />
|
|
176
|
+
<IconContentBadgeCountElement icon="notifications" count={5} />
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
##### Image Elements
|
|
106
180
|
```tsx
|
|
107
181
|
import {
|
|
108
182
|
ImageElement,
|
|
183
|
+
ImageContentCaptionComponent,
|
|
184
|
+
ImageContentTimeComponent,
|
|
185
|
+
ImageSizeType
|
|
186
|
+
} from 'sevago-sso-fe';
|
|
187
|
+
|
|
188
|
+
<ImageElement url="/image.jpg" sizeType={ImageSizeType.SQUARE} />
|
|
189
|
+
<ImageContentCaptionComponent image="/image.jpg" caption="Caption text" />
|
|
190
|
+
<ImageContentTimeComponent image="/image.jpg" time={new Date()} />
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
##### Link Elements
|
|
194
|
+
```tsx
|
|
195
|
+
import {
|
|
196
|
+
LinkElement,
|
|
197
|
+
LinkInternalElement
|
|
198
|
+
} from 'sevago-sso-fe';
|
|
199
|
+
|
|
200
|
+
<LinkElement href="/path" target="_blank">External Link</LinkElement>
|
|
201
|
+
<LinkInternalElement to="/internal">Internal Link</LinkInternalElement>
|
|
202
|
+
```
|
|
203
|
+
|
|
204
|
+
##### Form Elements
|
|
205
|
+
```tsx
|
|
206
|
+
import {
|
|
109
207
|
RadioElement,
|
|
110
|
-
|
|
111
|
-
MotionBox
|
|
208
|
+
CheckboxElement
|
|
112
209
|
} from 'sevago-sso-fe';
|
|
113
210
|
|
|
114
|
-
<ImageElement src="/path/to/image.jpg" alt="Image" />
|
|
115
211
|
<RadioElement value="option1" checked={true} onChange={handleChange} />
|
|
212
|
+
<CheckboxElement checked={false} onChange={handleChange} />
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
##### Typography Elements
|
|
216
|
+
```tsx
|
|
217
|
+
import {
|
|
218
|
+
TypographyContentCaption,
|
|
219
|
+
TypographyOneLine
|
|
220
|
+
} from 'sevago-sso-fe';
|
|
221
|
+
|
|
116
222
|
<TypographyContentCaption>Caption text</TypographyContentCaption>
|
|
117
|
-
<
|
|
223
|
+
<TypographyOneLine>Long text that will be truncated...</TypographyOneLine>
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
##### Tabs Elements
|
|
227
|
+
```tsx
|
|
228
|
+
import {
|
|
229
|
+
TabsComponent,
|
|
230
|
+
TabsSubsComponent,
|
|
231
|
+
TabsBadgeCountComponent,
|
|
232
|
+
TabsBadgeCountSubsComponent,
|
|
233
|
+
TAB_STYLES,
|
|
234
|
+
TAB_BACKGROUND_STYLES
|
|
235
|
+
} from 'sevago-sso-fe';
|
|
236
|
+
|
|
237
|
+
<TabsComponent tabs={tabs} value={value} onChange={handleChange} />
|
|
238
|
+
<TabsBadgeCountComponent tabs={tabs} badgeCounts={[5, 3, 2]} />
|
|
239
|
+
```
|
|
240
|
+
|
|
241
|
+
##### Time Ago Elements
|
|
242
|
+
```tsx
|
|
243
|
+
import {
|
|
244
|
+
TimeAgoComponent,
|
|
245
|
+
TimeAgoContentComponent
|
|
246
|
+
} from 'sevago-sso-fe';
|
|
247
|
+
|
|
248
|
+
<TimeAgoComponent date={new Date()} />
|
|
249
|
+
<TimeAgoContentComponent date={new Date()} content="Posted" />
|
|
250
|
+
```
|
|
251
|
+
|
|
252
|
+
##### Other Elements
|
|
253
|
+
```tsx
|
|
254
|
+
import {
|
|
255
|
+
DialogElement,
|
|
256
|
+
DialogConfirmActionElement,
|
|
257
|
+
DashedDividerElement,
|
|
258
|
+
MotionBox
|
|
259
|
+
} from 'sevago-sso-fe';
|
|
260
|
+
|
|
261
|
+
<DialogElement open={open} onClose={handleClose}>Content</DialogElement>
|
|
262
|
+
<DialogConfirmActionElement
|
|
263
|
+
open={open}
|
|
264
|
+
onConfirm={handleConfirm}
|
|
265
|
+
onCancel={handleCancel}
|
|
266
|
+
/>
|
|
267
|
+
<DashedDividerElement />
|
|
268
|
+
<MotionBox preset="fadeInUp" hover>Animated content</MotionBox>
|
|
118
269
|
```
|
|
119
270
|
|
|
120
271
|
### Constants
|
|
@@ -171,20 +322,28 @@ import { stringUtils } from 'sevago-sso-fe';
|
|
|
171
322
|
#### App Utils
|
|
172
323
|
|
|
173
324
|
```tsx
|
|
174
|
-
import {
|
|
325
|
+
import { Environment, getCurrentEnvironment } from 'sevago-sso-fe';
|
|
326
|
+
|
|
327
|
+
// Get current environment based on hostname
|
|
328
|
+
const env = getCurrentEnvironment();
|
|
329
|
+
// Returns: Environment.DEVELOP | Environment.STAGING | Environment.PRODUCTION
|
|
175
330
|
|
|
176
|
-
//
|
|
331
|
+
// Environment enum values
|
|
332
|
+
const develop = Environment.DEVELOP; // "develop"
|
|
333
|
+
const staging = Environment.STAGING; // "staging"
|
|
334
|
+
const production = Environment.PRODUCTION; // "production"
|
|
177
335
|
```
|
|
178
336
|
|
|
179
337
|
### Enums
|
|
180
338
|
|
|
181
339
|
```tsx
|
|
182
|
-
import { AppCategory, Mode, OrderType } from 'sevago-sso-fe';
|
|
340
|
+
import { AppCategory, Mode, OrderType, Environment } from 'sevago-sso-fe';
|
|
183
341
|
|
|
184
342
|
// Use enums
|
|
185
343
|
const category = AppCategory.ALL;
|
|
186
344
|
const mode = Mode.LIGHT;
|
|
187
345
|
const order = OrderType.ASC;
|
|
346
|
+
const env = Environment.DEVELOP;
|
|
188
347
|
```
|
|
189
348
|
|
|
190
349
|
---
|
|
@@ -196,14 +355,60 @@ const order = OrderType.ASC;
|
|
|
196
355
|
| Component | Description | Props |
|
|
197
356
|
|-----------|-------------|-------|
|
|
198
357
|
| `App` | Main application component with theme provider | None |
|
|
199
|
-
| `SystemMonitorScreen` | System monitoring dashboard screen |
|
|
200
|
-
| `AppGrid` | Application grid component | `apps`, `
|
|
201
|
-
| `AppsSidebar` | Applications sidebar component |
|
|
358
|
+
| `SystemMonitorScreen` | System monitoring dashboard screen | `env: Environment`, `blacklist?: string[]` |
|
|
359
|
+
| `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?` |
|
|
360
|
+
| `AppsSidebar` | Applications sidebar component | `isOpen: boolean`, `onClose: () => void`, `env: Environment`, `position?: "left" \| "right"`, `blacklist?: string[]` |
|
|
202
361
|
| `SystemMonitorSidebarPart` | System monitor sidebar part | - |
|
|
203
|
-
|
|
|
204
|
-
| `
|
|
205
|
-
| `
|
|
206
|
-
| `
|
|
362
|
+
| **Avatar Elements** | | |
|
|
363
|
+
| `AvatarElement` | Basic avatar element | `src`, `alt`, `sx?` |
|
|
364
|
+
| `AvatarOnlineStatusElement` | Avatar with online status indicator | `src`, `isOnline`, `sx?` |
|
|
365
|
+
| `AvatarUserInfo` | Avatar with user information | `name`, `avatar`, `sx?` |
|
|
366
|
+
| **Button Elements** | | |
|
|
367
|
+
| `ButtonElement` | Standard button | `onClick`, `children`, `variant?`, `sx?` |
|
|
368
|
+
| `ButtonIconElement` | Button with icon | `icon`, `onClick`, `sx?` |
|
|
369
|
+
| `ButtonIconCircleElement` | Circular icon button | `icon`, `onClick`, `sx?` |
|
|
370
|
+
| `ButtonIconSquareElement` | Square icon button | `icon`, `onClick`, `sx?` |
|
|
371
|
+
| `ButtonIconContentOpacityElement` | Button with icon and opacity content | `icon`, `content`, `onClick`, `sx?` |
|
|
372
|
+
| `ButtonImageElement` | Button with image | `image`, `onClick`, `sx?` |
|
|
373
|
+
| `ButtonUploadFileElement` | File upload button | `onUpload`, `accept?`, `sx?` |
|
|
374
|
+
| **Icon Elements** | | |
|
|
375
|
+
| `IconElement` | Basic icon | `icon`, `sx?` |
|
|
376
|
+
| `IconContentElement` | Icon with content | `icon`, `content`, `sx?` |
|
|
377
|
+
| `IconContentBadgeCountElement` | Icon with badge count | `icon`, `count`, `sx?` |
|
|
378
|
+
| `IconContentBadgeCountSubsElement` | Icon with badge count and subtitle | `icon`, `count`, `subtitle`, `sx?` |
|
|
379
|
+
| `IconButtonElement` | Icon button | `icon`, `onClick`, `sx?` |
|
|
380
|
+
| `IconContentSubsElement` | Icon with content and subtitle | `icon`, `content`, `subtitle`, `sx?` |
|
|
381
|
+
| `IconContentOpacityElement` | Icon with opacity content | `icon`, `content`, `opacity?`, `sx?` |
|
|
382
|
+
| **Image Elements** | | |
|
|
383
|
+
| `ImageElement` | Image element | `url: string`, `sizeType?: ImageSizeType`, `sx?` |
|
|
384
|
+
| `ImageContentCaptionComponent` | Image with caption | `image`, `caption`, `sx?` |
|
|
385
|
+
| `ImageContentTimeComponent` | Image with time | `image`, `time`, `sx?` |
|
|
386
|
+
| **Link Elements** | | |
|
|
387
|
+
| `LinkElement` | External link | `href`, `target?`, `children`, `sx?` |
|
|
388
|
+
| `LinkInternalElement` | Internal router link | `to`, `children`, `sx?` |
|
|
389
|
+
| **Form Elements** | | |
|
|
390
|
+
| `RadioElement` | Radio button | `value`, `checked`, `onChange`, `sx?` |
|
|
391
|
+
| `CheckboxElement` | Checkbox | `checked`, `onChange`, `label?`, `sx?` |
|
|
392
|
+
| **Typography Elements** | | |
|
|
393
|
+
| `TypographyContentCaption` | Typography with caption | `children`, `variant?`, `color?`, `sx?` |
|
|
394
|
+
| `TypographyOneLine` | Single line typography (truncated) | `children`, `variant?`, `sx?` |
|
|
395
|
+
| **Tabs Elements** | | |
|
|
396
|
+
| `TabsComponent` | Basic tabs | `tabs`, `value`, `onChange`, `sx?` |
|
|
397
|
+
| `TabsSubsComponent` | Tabs with subtitles | `tabs`, `value`, `onChange`, `sx?` |
|
|
398
|
+
| `TabsBadgeCountComponent` | Tabs with badge counts | `tabs`, `badgeCounts`, `value`, `onChange`, `sx?` |
|
|
399
|
+
| `TabsBadgeCountSubsComponent` | Tabs with badge counts and subtitles | `tabs`, `badgeCounts`, `value`, `onChange`, `sx?` |
|
|
400
|
+
| **Time Elements** | | |
|
|
401
|
+
| `TimeAgoComponent` | Time ago display | `date`, `sx?` |
|
|
402
|
+
| `TimeAgoContentComponent` | Time ago with content | `date`, `content?`, `sx?` |
|
|
403
|
+
| **Other Elements** | | |
|
|
404
|
+
| `DialogElement` | Dialog/modal | `open`, `onClose`, `children`, `sx?` |
|
|
405
|
+
| `DialogConfirmActionElement` | Confirmation dialog | `open`, `onConfirm`, `onCancel`, `title?`, `content?`, `sx?` |
|
|
406
|
+
| `DashedDividerElement` | Dashed divider line | `sx?` |
|
|
407
|
+
| `MotionBox` | Framer Motion animated box | `preset?`, `animate?`, `transition?`, `children`, `hover?`, `index?`, `sx?` |
|
|
408
|
+
|
|
409
|
+
**Note:** `AppGrid` automatically handles URL routing:
|
|
410
|
+
- If `env` is a valid Environment enum value (develop/staging/production): uses configured URLs from `app.path[env]`
|
|
411
|
+
- If `env` is not valid (e.g., localhost development): extracts path and uses `window.location.origin` with the path
|
|
207
412
|
|
|
208
413
|
### Constants
|
|
209
414
|
|
|
@@ -227,14 +432,21 @@ const order = OrderType.ASC;
|
|
|
227
432
|
- `isDateString(str)`
|
|
228
433
|
|
|
229
434
|
- **`stringUtils`** - String utility functions
|
|
230
|
-
- **`appUtils`** - Application utility functions
|
|
231
435
|
- **`getLimitLineCss`** - CSS utility for limiting lines
|
|
436
|
+
- **`Environment`** - Environment enum (DEVELOP, STAGING, PRODUCTION)
|
|
437
|
+
- **`getCurrentEnvironment()`** - Detects current environment based on hostname
|
|
438
|
+
- Returns `Environment.DEVELOP` if hostname includes "dev."
|
|
439
|
+
- Returns `Environment.STAGING` if hostname includes "sta."
|
|
440
|
+
- Returns `Environment.PRODUCTION` otherwise
|
|
232
441
|
|
|
233
442
|
### Enums
|
|
234
443
|
|
|
235
444
|
- **`AppCategory`** - Application category enum
|
|
236
445
|
- **`Mode`** - Theme mode enum
|
|
237
446
|
- **`OrderType`** - Order type enum
|
|
447
|
+
- **`Environment`** - Environment enum (DEVELOP, STAGING, PRODUCTION)
|
|
448
|
+
- **`AppGroup`** - Application group enum (ALL, HRM, WORKFLOW_ENGINE, PLATFORM_AND_INFO, B2B, OTHER, CLIENT)
|
|
449
|
+
- **`ImageSizeType`** - Image size type enum
|
|
238
450
|
|
|
239
451
|
---
|
|
240
452
|
|
|
@@ -244,8 +456,25 @@ Full TypeScript support with comprehensive type definitions:
|
|
|
244
456
|
|
|
245
457
|
```tsx
|
|
246
458
|
import type {
|
|
247
|
-
|
|
459
|
+
AppInfo,
|
|
460
|
+
AppGridProps,
|
|
461
|
+
SystemMonitorScreenProps,
|
|
462
|
+
AppsSidebarProps,
|
|
463
|
+
Environment
|
|
248
464
|
} from 'sevago-sso-fe';
|
|
465
|
+
|
|
466
|
+
// AppInfo interface
|
|
467
|
+
interface AppInfo {
|
|
468
|
+
path: {
|
|
469
|
+
develop: string;
|
|
470
|
+
staging: string;
|
|
471
|
+
production: string;
|
|
472
|
+
};
|
|
473
|
+
content: string;
|
|
474
|
+
color: string;
|
|
475
|
+
icon: string;
|
|
476
|
+
group: AppGroup;
|
|
477
|
+
}
|
|
249
478
|
```
|
|
250
479
|
|
|
251
480
|
---
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
export declare const COLOR_CONSTANT: {
|
|
2
|
+
error: string;
|
|
3
|
+
successLight: string;
|
|
4
|
+
success: string;
|
|
5
|
+
main: string;
|
|
6
|
+
mainLight: string;
|
|
7
|
+
info: string;
|
|
8
|
+
warning: string;
|
|
9
|
+
secondary: string;
|
|
10
|
+
white: string;
|
|
11
|
+
gray: string;
|
|
12
|
+
gray2: string;
|
|
13
|
+
gray3: string;
|
|
14
|
+
gray4: string;
|
|
15
|
+
gray5: string;
|
|
16
|
+
gray6: string;
|
|
17
|
+
gray7: string;
|
|
18
|
+
gray8: string;
|
|
19
|
+
gray9: string;
|
|
20
|
+
gray10: string;
|
|
21
|
+
green: string;
|
|
22
|
+
green2: string;
|
|
23
|
+
green3: string;
|
|
24
|
+
green4: string;
|
|
25
|
+
green5: string;
|
|
26
|
+
blue: string;
|
|
27
|
+
blue2: string;
|
|
28
|
+
red: string;
|
|
29
|
+
red2: string;
|
|
30
|
+
black: string;
|
|
31
|
+
yellow: string;
|
|
32
|
+
new: string;
|
|
33
|
+
pending: string;
|
|
34
|
+
overDue: string;
|
|
35
|
+
primary: string;
|
|
36
|
+
};
|
|
37
|
+
export declare const colorMap: Record<string, {
|
|
38
|
+
backgroundColor: string;
|
|
39
|
+
color: string;
|
|
40
|
+
}>;
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
+
export * from './apps.data';
|
|
2
|
+
export * from './color.constant';
|
|
3
|
+
export * from './icons.constant';
|
|
1
4
|
export * from './mode.constant';
|
|
2
5
|
export * from './opacity.constant';
|
|
3
6
|
export * from './reg-exp.constant';
|
|
4
|
-
export * from './typography.constant';
|
|
5
7
|
export * as STYLE from './style.constant';
|
|
6
|
-
export * from './
|
|
8
|
+
export * from './typography.constant';
|
package/dist/common/index.d.ts
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './image-with-preview.interface';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const throttle: (func: (...args: any[]) => void, limit: number) => (...args: any[]) => void;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export * from './other';
|
|
2
|
+
export * from './delay.utils';
|
|
2
3
|
export * from './string.utils';
|
|
3
4
|
export * from './time.utils';
|
|
4
|
-
|
|
5
|
-
export declare const timeUtils: typeof timeUtilsMethods;
|
|
5
|
+
export * from './validator.utils';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { BannerComponent } from './banner.component';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Breadcrumbs } from './bread-cumbs';
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
interface AvatarOnlineStatusElementProps {
|
|
3
|
+
url?: string | null;
|
|
4
|
+
size?: "small" | "medium" | "large" | "extra_large";
|
|
5
|
+
online?: boolean;
|
|
6
|
+
children?: React.ReactNode;
|
|
7
|
+
}
|
|
8
|
+
export declare const OnlineBadge: import('@emotion/styled').StyledComponent<import('@mui/material').BadgeOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "components" | "color" | "className" | "style" | "classes" | "children" | "sx" | "variant" | "slots" | "slotProps" | "componentsProps" | "max" | "invisible" | "anchorOrigin" | "badgeContent" | "overlap" | "showZero"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
|
|
9
|
+
component?: React.ElementType;
|
|
10
|
+
}, {}, {}>;
|
|
11
|
+
export declare const AvatarOnlineStatusElement: React.FC<AvatarOnlineStatusElementProps>;
|
|
12
|
+
export default AvatarOnlineStatusElement;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { SxProps } from '@mui/material';
|
|
2
|
+
import { default as React } from 'react';
|
|
3
|
+
import { SizeProps } from '../../../common';
|
|
4
|
+
export interface AvatarUserInfoProps {
|
|
5
|
+
name: string;
|
|
6
|
+
url?: string;
|
|
7
|
+
positions?: string[];
|
|
8
|
+
maxWidth?: string | number;
|
|
9
|
+
isTag?: boolean;
|
|
10
|
+
sxName?: SxProps;
|
|
11
|
+
sxPosition?: SxProps;
|
|
12
|
+
sizeAvatar?: SizeProps;
|
|
13
|
+
}
|
|
14
|
+
export declare const AvatarUserInfo: React.FC<AvatarUserInfoProps>;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { AvatarProps } from '@mui/material';
|
|
2
|
+
import { default as React, ReactNode } from 'react';
|
|
3
|
+
import { SizeProps } from '../../../common';
|
|
4
|
+
export interface AvatarElementProps extends AvatarProps {
|
|
5
|
+
url?: string | null;
|
|
6
|
+
size?: SizeProps;
|
|
7
|
+
tooltipContent?: ReactNode;
|
|
8
|
+
}
|
|
9
|
+
export declare const AvatarElement: React.FC<AvatarElementProps>;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ButtonProps } from '@mui/material';
|
|
2
|
+
import { default as React } from 'react';
|
|
3
|
+
export interface ButtonIconContentOpacityElementProps extends ButtonProps {
|
|
4
|
+
loading?: boolean;
|
|
5
|
+
icon: string;
|
|
6
|
+
content: any;
|
|
7
|
+
isQuare?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export declare const ButtonIconContentOpacityElement: React.FC<ButtonIconContentOpacityElementProps>;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { ButtonProps } from '@mui/material';
|
|
2
|
+
import { default as React } from 'react';
|
|
3
|
+
export interface ButtonIconSquareElementProps extends ButtonProps {
|
|
4
|
+
loading?: boolean;
|
|
5
|
+
icon: string;
|
|
6
|
+
}
|
|
7
|
+
export declare const ButtonIconSquareElement: React.FC<ButtonIconSquareElementProps>;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ButtonProps, SxProps } from '@mui/material';
|
|
2
|
+
import { default as React } from 'react';
|
|
3
|
+
export interface ButtonImageElementProps extends ButtonProps {
|
|
4
|
+
loading?: boolean;
|
|
5
|
+
startIcon?: string;
|
|
6
|
+
endIcon?: string;
|
|
7
|
+
content: string;
|
|
8
|
+
sx?: SxProps;
|
|
9
|
+
}
|
|
10
|
+
export declare const ButtonImageElement: React.FC<ButtonImageElementProps>;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ButtonProps } from '@mui/material';
|
|
2
|
+
import { default as React } from 'react';
|
|
3
|
+
import { FileWithPreview } from '../../../common/interfaces/image-with-preview.interface';
|
|
4
|
+
export interface ButtonUploadFileElementProps extends Omit<ButtonProps, "onChange"> {
|
|
5
|
+
multiple?: boolean;
|
|
6
|
+
onChange: (files: FileWithPreview[]) => void;
|
|
7
|
+
accept?: string;
|
|
8
|
+
}
|
|
9
|
+
export declare const ButtonUploadFileElement: React.FC<ButtonUploadFileElementProps>;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ButtonProps } from '@mui/material';
|
|
2
|
+
import { default as React } from 'react';
|
|
3
|
+
export interface ButtonElementProps extends ButtonProps {
|
|
4
|
+
content?: string;
|
|
5
|
+
loading?: boolean;
|
|
6
|
+
startIcon?: string | React.ReactNode;
|
|
7
|
+
endIcon?: string | React.ReactNode;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
}
|
|
10
|
+
export declare const ButtonElement: React.FC<ButtonElementProps>;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export { ButtonIconCircleElement } from './button-icon-circle.element';
|
|
2
|
+
export { ButtonIconContentOpacityElement } from './button-icon-content-opacity.element';
|
|
3
|
+
export { ButtonIconSquareElement } from './button-icon-square.element';
|
|
4
|
+
export { ButtonIconElement } from './button-icon.element';
|
|
5
|
+
export { ButtonImageElement } from './button-image.element';
|
|
6
|
+
export { ButtonUploadFileElement } from './button-upload-file.element';
|
|
7
|
+
export { ButtonElement } from './button.element';
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { CheckboxProps, SxProps, Theme } from '@mui/material';
|
|
2
|
+
import { default as React } from 'react';
|
|
3
|
+
export interface CheckboxElementProps extends CheckboxProps {
|
|
4
|
+
label?: string;
|
|
5
|
+
sx?: SxProps<Theme>;
|
|
6
|
+
name?: string;
|
|
7
|
+
}
|
|
8
|
+
export declare const CheckboxElement: React.FC<CheckboxElementProps>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { CheckboxElement } from './check-box.element';
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { SnackbarType } from '../../../common';
|
|
3
|
+
interface DialogConfirmActionElementProps {
|
|
4
|
+
open: boolean;
|
|
5
|
+
title: string;
|
|
6
|
+
description: string;
|
|
7
|
+
closeText?: string;
|
|
8
|
+
confirmText?: string;
|
|
9
|
+
confirmColor?: SnackbarType;
|
|
10
|
+
closeColor?: SnackbarType;
|
|
11
|
+
onClose: () => void;
|
|
12
|
+
onConfirm: () => void;
|
|
13
|
+
loading?: boolean;
|
|
14
|
+
}
|
|
15
|
+
export declare const DialogConfirmActionElement: React.FC<DialogConfirmActionElementProps>;
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { DialogProps, SxProps, Theme } from '@mui/material';
|
|
2
|
+
import { default as React, ReactNode } from 'react';
|
|
3
|
+
import { SnackbarType } from '../../../common';
|
|
4
|
+
import { ButtonElementProps } from '../button/button.element';
|
|
5
|
+
export interface DialogElementProps extends DialogProps {
|
|
6
|
+
iconLabel?: string;
|
|
7
|
+
label: string;
|
|
8
|
+
nodeLabel?: ReactNode;
|
|
9
|
+
nodeHelp?: ReactNode;
|
|
10
|
+
nodeBottomLeft?: ReactNode;
|
|
11
|
+
buttonRight?: ButtonElementProps & {
|
|
12
|
+
buttonType?: SnackbarType;
|
|
13
|
+
};
|
|
14
|
+
buttonCenter?: ButtonElementProps & {
|
|
15
|
+
buttonType?: SnackbarType;
|
|
16
|
+
};
|
|
17
|
+
buttonLeft?: ButtonElementProps & {
|
|
18
|
+
buttonType?: SnackbarType;
|
|
19
|
+
};
|
|
20
|
+
nodeContent?: ReactNode;
|
|
21
|
+
isForm?: boolean;
|
|
22
|
+
widthButton?: number;
|
|
23
|
+
sxDialogTitle?: SxProps<Theme>;
|
|
24
|
+
sxContent?: SxProps<Theme>;
|
|
25
|
+
closeButton?: boolean;
|
|
26
|
+
fullWidth?: boolean;
|
|
27
|
+
sxTitle?: SxProps<Theme>;
|
|
28
|
+
sxBottom?: SxProps<Theme>;
|
|
29
|
+
}
|
|
30
|
+
export declare const DialogElement: React.FC<DialogElementProps>;
|