@crystaltech/hsms-shared-ui 0.6.6 → 0.6.7-alpha-0
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 +134 -0
- package/dist/components/ui/SideDrawer.d.ts +78 -0
- package/dist/hooks/useSyncedLocalStorage.d.ts +5 -0
- package/dist/index.es.js +7398 -7291
- package/dist/index.es2.js +164 -0
- package/dist/index.js +86 -86
- package/dist/index2.js +48 -0
- package/dist/logo.png +0 -0
- package/dist/preMountSplash.iife.js +48 -0
- package/dist/splash/preMountSplash.d.ts +28 -0
- package/package.json +7 -2
package/README.md
CHANGED
|
@@ -280,3 +280,137 @@ import {
|
|
|
280
280
|
- Column visibility toggling in `MultiDynamicTable` relies on shared `id` values across rows for a given column.
|
|
281
281
|
- Ensure peer versions of MUI and React match your app.
|
|
282
282
|
- Refer to `src/theme/defaultTheme.ts` for the complete `ITheme` shape.
|
|
283
|
+
|
|
284
|
+
## Pre-Mount Splash Injector
|
|
285
|
+
|
|
286
|
+
Prevent initial white screen and show brand instantly while Vite/PWA initializes.
|
|
287
|
+
|
|
288
|
+
- ESM (Vite apps): add at the very top of your entry file
|
|
289
|
+
- `import '@crystaltech/hsms-shared-ui/preMountSplash';`
|
|
290
|
+
- Or, for manual control:
|
|
291
|
+
```ts
|
|
292
|
+
import { initPreMountSplash, markAppReady } from '@crystaltech/hsms-shared-ui/preMountSplash';
|
|
293
|
+
initPreMountSplash();
|
|
294
|
+
// Later, when your app has mounted and is ready:
|
|
295
|
+
markAppReady(); // dispatches global 'app-ready' and removes splash
|
|
296
|
+
```
|
|
297
|
+
- IIFE (microfrontend host or legacy HTML): include pinned CDN script before your app bundles
|
|
298
|
+
- `<script src="https://unpkg.com/@crystaltech/hsms-shared-ui@0.6.6-alpha-0.4/dist/preMountSplash.iife.js" crossorigin="anonymous"></script>`
|
|
299
|
+
- Optional manual init with a custom root
|
|
300
|
+
- `import { initPreMountSplash } from '@crystaltech/hsms-shared-ui/preMountSplash';`
|
|
301
|
+
- `initPreMountSplash({ rootId: 'portal-root' });`
|
|
302
|
+
- In IIFE hosts, signal readiness:
|
|
303
|
+
```html
|
|
304
|
+
<script>
|
|
305
|
+
// later in bootstrap
|
|
306
|
+
window.HSMSPreMountSplash?.markAppReady();
|
|
307
|
+
// or: window.dispatchEvent(new Event('app-ready'))
|
|
308
|
+
</script>
|
|
309
|
+
```
|
|
310
|
+
|
|
311
|
+
LocalStorage keys used
|
|
312
|
+
- Theme: `theme.mode`, `theme.themeColor`
|
|
313
|
+
- Branding: `organization_name`, `organization_logo_full_url`
|
|
314
|
+
|
|
315
|
+
PWA and CSP
|
|
316
|
+
- Vite PWA: ESM import gets precached; CDN IIFE is external and fetched network-first.
|
|
317
|
+
- CSP: injector inserts a small `<style>`; allow inline styles or configure policy accordingly.
|
|
318
|
+
|
|
319
|
+
Standard lifecycle
|
|
320
|
+
- Adds `app-loading` class to `html` on init; removes it and sets `app-ready` on hide.
|
|
321
|
+
- Sets `window.__APP_READY__ = true` and dispatches a global `app-ready` event when hidden.
|
|
322
|
+
- Auto-hides on `DOMContentLoaded`, `load`, `hsms-app-mounted`, and `app-ready`.
|
|
323
|
+
- You can programmatically call `markAppReady()` or dispatch `new Event('app-ready')`.
|
|
324
|
+
|
|
325
|
+
Example host page: see `examples/host.html`.
|
|
326
|
+
|
|
327
|
+
### Quick Start (Splash)
|
|
328
|
+
- Choose integration:
|
|
329
|
+
- Vite apps: add `import '@crystaltech/hsms-shared-ui/preMountSplash'` at the top of your entry file.
|
|
330
|
+
- Microfrontend/legacy: include the pinned CDN IIFE script in your host HTML.
|
|
331
|
+
- Ensure branding/theme keys are available early:
|
|
332
|
+
- `localStorage.organization_name`, `localStorage.organization_logo_full_url`, `localStorage.theme`.
|
|
333
|
+
- Optional manual init and custom root:
|
|
334
|
+
- `initPreMountSplash({ rootId: 'portal-root' })`.
|
|
335
|
+
- Signal readiness after your app mounts:
|
|
336
|
+
- ESM: `markAppReady()`.
|
|
337
|
+
- IIFE: `window.HSMSPreMountSplash?.markAppReady()` or `window.dispatchEvent(new Event('app-ready'))`.
|
|
338
|
+
- Verify behavior:
|
|
339
|
+
- First paint: `<html>` has `app-loading` and splash is visible.
|
|
340
|
+
- After readiness: splash fades out and `<html>` switches to `app-ready`.
|
|
341
|
+
|
|
342
|
+
ESM example:
|
|
343
|
+
```ts
|
|
344
|
+
import { initPreMountSplash, markAppReady } from '@crystaltech/hsms-shared-ui/preMountSplash';
|
|
345
|
+
initPreMountSplash();
|
|
346
|
+
// ... your app bootstrap (fetch config, auth, etc.)
|
|
347
|
+
markAppReady();
|
|
348
|
+
```
|
|
349
|
+
|
|
350
|
+
IIFE host example:
|
|
351
|
+
```html
|
|
352
|
+
<script src="https://unpkg.com/@crystaltech/hsms-shared-ui@0.6.6-alpha-0.4/dist/preMountSplash.iife.js" crossorigin="anonymous"></script>
|
|
353
|
+
<script>
|
|
354
|
+
window.HSMSPreMountSplash?.initPreMountSplash({ rootId: 'portal-root' });
|
|
355
|
+
// after app is mounted
|
|
356
|
+
window.HSMSPreMountSplash?.markAppReady();
|
|
357
|
+
// or: window.dispatchEvent(new Event('app-ready'));
|
|
358
|
+
// optional: set branding early so it shows on splash
|
|
359
|
+
localStorage.setItem('organization_name', 'HSMS');
|
|
360
|
+
localStorage.setItem('organization_logo_full_url', '/logo.png');
|
|
361
|
+
localStorage.setItem('theme', JSON.stringify({ mode: 'light', themeColor: '#2c5282' }));
|
|
362
|
+
</script>
|
|
363
|
+
```
|
|
364
|
+
|
|
365
|
+
### Adoption Checklist (Microfrontends)
|
|
366
|
+
- Pin version across all microfrontends and hosts: `@crystaltech/hsms-shared-ui@0.6.6-alpha-0.4`.
|
|
367
|
+
- Choose one integration per app: ESM import (Vite) or IIFE CDN (host HTML) — avoid double init.
|
|
368
|
+
- Standardize the mount root id (e.g., `portal-root`) and pass `{ rootId }` consistently.
|
|
369
|
+
- Seed brand/theme early at login/bootstrap: `organization_name`, `organization_logo_full_url`, `theme`.
|
|
370
|
+
- Signal readiness on mount: call `markAppReady()` or dispatch `new Event('app-ready')`.
|
|
371
|
+
- CSP: allow the injected `<style>` and brand logo source in `style-src`/`img-src`.
|
|
372
|
+
- Performance: include the IIFE script before heavy bundles; avoid blocking inline scripts before splash.
|
|
373
|
+
- PWA: ensure ESM import is precached; if using CDN IIFE, verify network fallback strategy.
|
|
374
|
+
- QA: verify first paint shows splash, fade-out occurs, and `<html>` toggles `app-loading` → `app-ready`.
|
|
375
|
+
|
|
376
|
+
### Minimal Steps (Other Modules)
|
|
377
|
+
- Vite apps (ESM):
|
|
378
|
+
1) Install: `pnpm add @crystaltech/hsms-shared-ui@0.6.6-alpha-0.4`
|
|
379
|
+
2) At top of `src/main.tsx` (or `src/index.ts`): `import '@crystaltech/hsms-shared-ui/preMountSplash'`
|
|
380
|
+
3) After your app mounts: `import { markAppReady } from '@crystaltech/hsms-shared-ui/preMountSplash'; markAppReady();`
|
|
381
|
+
4) Optional: set early brand/theme keys: `localStorage.setItem('organization_name', 'HSMS'); localStorage.setItem('organization_logo_full_url', '/logo.png');`
|
|
382
|
+
|
|
383
|
+
React (Vite) example — recommended wiring
|
|
384
|
+
```tsx
|
|
385
|
+
// src/main.tsx
|
|
386
|
+
import '@crystaltech/hsms-shared-ui/preMountSplash';
|
|
387
|
+
import React from 'react';
|
|
388
|
+
import ReactDOM from 'react-dom/client';
|
|
389
|
+
import App from './App';
|
|
390
|
+
|
|
391
|
+
ReactDOM.createRoot(document.getElementById('root')!).render(
|
|
392
|
+
<React.StrictMode>
|
|
393
|
+
<App />
|
|
394
|
+
</React.StrictMode>
|
|
395
|
+
);
|
|
396
|
+
|
|
397
|
+
// src/App.tsx
|
|
398
|
+
import { useEffect } from 'react';
|
|
399
|
+
import { markAppReady } from '@crystaltech/hsms-shared-ui/preMountSplash';
|
|
400
|
+
|
|
401
|
+
export default function App() {
|
|
402
|
+
useEffect(() => { markAppReady(); }, []);
|
|
403
|
+
return (
|
|
404
|
+
<div>Your UI</div>
|
|
405
|
+
);
|
|
406
|
+
}
|
|
407
|
+
```
|
|
408
|
+
|
|
409
|
+
- Microfrontend/legacy hosts (IIFE):
|
|
410
|
+
1) Add script before your bundles:
|
|
411
|
+
`<script src="https://unpkg.com/@crystaltech/hsms-shared-ui@0.6.6-alpha-0.4/dist/preMountSplash.iife.js" crossorigin="anonymous"></script>`
|
|
412
|
+
2) Optional init with root id:
|
|
413
|
+
`<script>window.HSMSPreMountSplash?.initPreMountSplash({ rootId: 'portal-root' });</script>`
|
|
414
|
+
3) After mount, signal ready:
|
|
415
|
+
`<script>window.HSMSPreMountSplash?.markAppReady();</script>`
|
|
416
|
+
4) Optional: set early brand/theme keys via `localStorage`.
|
|
@@ -1,6 +1,84 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { UserInfo } from '../../routes/ProtectedRoute';
|
|
3
3
|
import { IMenuConfig } from '../layout/layoutConfig';
|
|
4
|
+
export interface IHospitalInfo {
|
|
5
|
+
createdAt: string | null;
|
|
6
|
+
updatedAt: string | null;
|
|
7
|
+
createdBy: string | null;
|
|
8
|
+
updatedBy: string | null;
|
|
9
|
+
status: string | null;
|
|
10
|
+
reasonToUpdate: string | null;
|
|
11
|
+
reasonToDelete: string | null;
|
|
12
|
+
id: string;
|
|
13
|
+
organizationId: string;
|
|
14
|
+
facilityId: string;
|
|
15
|
+
hospitalName: string;
|
|
16
|
+
address: string;
|
|
17
|
+
division: string;
|
|
18
|
+
district: string;
|
|
19
|
+
upazila: string;
|
|
20
|
+
city: string;
|
|
21
|
+
zip: string;
|
|
22
|
+
country: string;
|
|
23
|
+
phone: string;
|
|
24
|
+
email: string;
|
|
25
|
+
website: string | null;
|
|
26
|
+
logoUrl: string | null;
|
|
27
|
+
bannerUrl: string | null;
|
|
28
|
+
backgroundImageUrl: string | null;
|
|
29
|
+
}
|
|
30
|
+
export interface IHospitalInfo {
|
|
31
|
+
createdAt: string | null;
|
|
32
|
+
updatedAt: string | null;
|
|
33
|
+
createdBy: string | null;
|
|
34
|
+
updatedBy: string | null;
|
|
35
|
+
status: string | null;
|
|
36
|
+
reasonToUpdate: string | null;
|
|
37
|
+
reasonToDelete: string | null;
|
|
38
|
+
id: string;
|
|
39
|
+
organizationId: string;
|
|
40
|
+
facilityId: string;
|
|
41
|
+
hospitalName: string;
|
|
42
|
+
address: string;
|
|
43
|
+
division: string;
|
|
44
|
+
district: string;
|
|
45
|
+
upazila: string;
|
|
46
|
+
city: string;
|
|
47
|
+
zip: string;
|
|
48
|
+
country: string;
|
|
49
|
+
phone: string;
|
|
50
|
+
email: string;
|
|
51
|
+
website: string | null;
|
|
52
|
+
logoUrl: string | null;
|
|
53
|
+
bannerUrl: string | null;
|
|
54
|
+
backgroundImageUrl: string | null;
|
|
55
|
+
}
|
|
56
|
+
export interface IHospitalInfo {
|
|
57
|
+
createdAt: string | null;
|
|
58
|
+
updatedAt: string | null;
|
|
59
|
+
createdBy: string | null;
|
|
60
|
+
updatedBy: string | null;
|
|
61
|
+
status: string | null;
|
|
62
|
+
reasonToUpdate: string | null;
|
|
63
|
+
reasonToDelete: string | null;
|
|
64
|
+
id: string;
|
|
65
|
+
organizationId: string;
|
|
66
|
+
facilityId: string;
|
|
67
|
+
hospitalName: string;
|
|
68
|
+
address: string;
|
|
69
|
+
division: string;
|
|
70
|
+
district: string;
|
|
71
|
+
upazila: string;
|
|
72
|
+
city: string;
|
|
73
|
+
zip: string;
|
|
74
|
+
country: string;
|
|
75
|
+
phone: string;
|
|
76
|
+
email: string;
|
|
77
|
+
website: string | null;
|
|
78
|
+
logoUrl: string | null;
|
|
79
|
+
bannerUrl: string | null;
|
|
80
|
+
backgroundImageUrl: string | null;
|
|
81
|
+
}
|
|
4
82
|
interface SideDrawerProps {
|
|
5
83
|
isSidebarOpen: boolean;
|
|
6
84
|
toggleSidebar: () => void;
|