hisd3-ui-kit 4.2.2 → 4.4.0

package/README.md

@@ -112,7 +112,7 @@ const menuItems = [
 | `HISD3Provider` | Root theme provider (see above). |
 | `HISD3Sidebar` | App shell (see *Scrolling* below): brand block, grouped menu with accent bar on the active route, account dropdown (Settings / Logout with confirm), collapsible, optional top-nav mode (`layoutTop`). `menuItems` accept `{ key, path, name, icon, children, group, hideInMenu, disabled }`. `renderMenuLink` lets you plug in react-router's `<Link>`. Props `bareContent` + `hideHeaderBar` hand the header over to `HISD3PageHeader`. `collapseTrigger` places the collapse control: `"edge"` (default) floats a round chevron on the sidebar's right edge, level with the top bar — it works even when the top bar is hidden, and `collapseTriggerOffset` moves it down — `"header"` puts a square button in the shell's own top bar, `"none"` renders neither. |
 | `HISD3PageHeader` / `HISD3PageBody` | Top bar (breadcrumb left, actions right) that stays pinned while the page scrolls, plus a large title + subtitle that scrolls away; `HISD3PageBody` is the matching padded content area. |
-| `HISD3Table<T>` | antd `Table` restyled (uppercase muted headers, 2px row rules) with the HISD3 pagination bar: "Total N items", square page buttons, page-size toggle. Pass `pagination={{ current, pageSize, total, onChange, pageSizeOptions?, hidePageSize? }}` or `false`. Optional `footer` strip. Cell helper classes: `hisd3-cell-primary`, `hisd3-cell-link`, `hisd3-cell-muted`. |
+| `HISD3Table<T>` | antd `Table` restyled compactly — 45px rows, 14px cell text, uppercase 11px headers, hairline row rules. antd's own `size="small"` tightens it further with the HISD3 pagination bar: "Total N items", square page buttons, page-size toggle. Pass `pagination={{ current, pageSize, total, onChange, pageSizeOptions?, hidePageSize? }}` or `false`. Optional `footer` strip. Cell helper classes: `hisd3-cell-primary`, `hisd3-cell-link`, `hisd3-cell-muted`. |
 | `HISD3Tabs` | Underlined filter tabs; each item may carry a `count`. |
 | `HISD3Tag` | Uppercase status pill. `variant`: `neutral` (grey, e.g. ACTIVE / IN PATIENT), `soft` (primary tint, e.g. ER PATIENT), `outline` (2px primary border, e.g. OUT PATIENT), `solid`. `tone`: `primary` \| `success` \| `warning` \| `danger` \| `default`. |
 | `HISD3Button` | `variant`: `primary` (filled), `secondary` (default, dark 2px outline), `ghost`, `danger`. Accepts all antd `Button` props (`icon`, `size`, `loading`, …). |
@@ -120,6 +120,7 @@ const menuItems = [
 | `HISD3HeaderActions` | Spacing wrapper for the top-right controls; `divided` inserts a rule before the last child. |
 | `HISD3NotificationButton` | Soft-grey circular button with a solid bell glyph and a count pill on its top-right edge; tints to the primary color while its panel is open. Pass `icon` to swap the glyph. Props: `items` (`{ id, title, description, time, unread, avatarSrc, icon, onClick }`), `count` (defaults to the unread tally), `loading`, `size` (default 40), `icon`, `onMarkAllRead`, `onSeeAll`, `emptyText`. |
 | `HISD3AvatarMenu` | Circular avatar button with a small chevron badge (Facebook-style); clicking it opens a menu with the signed-in identity plus Settings and Logout (confirm dialog by default). Falls back to initials on a grey circle when there is no photo. Props: `account`, `avatarSrc`, `settingsUrl` / `onSettings`, `onLogout`, `confirmLogout`, `extraItems`, `shape` (`circle` \| `square`), `size` (default 40), `hideChevron`. |
+| `HISD3LoginPage` | Split-screen sign-in: a brand panel in the app's primary colour plus a floating form card. Per-app: `appName` (the module name shown on the card), `tagline`, `logoSrc`, `title`/`subtitle`, `panelTitle`/`panelSubtitle`, `panelImage`, `variant` (`"soft"` default, or `"square"`), `side` (`"right"` default, or `"left"`). Form: `onSubmit({ identifier, password, remember })`, `loading`, `error`, `onForgotPassword`, `hideRemember`, the label/placeholder props, and `footer`. The HISD3 watermark on the panel is fixed, so every module still reads as one system. |
 | `UserMenu` | The sidebar-footer account card, on its own. |
 
 Theme utilities: `createHisd3Theme`, `hisd3AntdTheme` (red default),
@@ -163,6 +164,43 @@ Inside styled-components or CSS you can rely on antd's variables:
 `--hisd3-popup-radius`, `--hisd3-bell-stretch` (how wide the bell glyph is drawn, default `1.12`), `--hisd3-edge-trigger-bg` / `--hisd3-edge-trigger-color` (the sidebar collapse chevron, primary-filled by default), so you can retune them per app without forking the
 components.
 
+## Sign-in page
+
+Every module renders the same component and differs only by name, logo and
+primary colour:
+
+```tsx
+<HISD3Provider primary="brandBlue">
+  <HISD3LoginPage
+    appName="Backoffice"
+    tagline="Hospital Information System"
+    // panel copy defaults to a hospital-system line; override per module:
+    panelTitle="Every charge, every folio, in one ledger."
+    panelSubtitle="Receivables, cashiering and accounts — reconciled daily."
+    loading={submitting}
+    error={errorMessage}
+    onForgotPassword={() => router.push("/forgot-password")}
+    onSubmit={async ({ identifier, password, remember }) => login(identifier, password, remember)}
+    footer={<>Need an account? <b>Contact your administrator</b></>}
+  />
+</HISD3Provider>
+```
+
+Responsive by default: the split layout holds down to 1024px, below which the
+brand panel drops and the card centres on a tinted background; under 560px it
+switches to a phone layout: a branded hero carrying the logo, module name and
+panel copy, with a white sheet rising over it that holds the form and runs to
+the bottom of the screen. Inputs are 16px there so iOS Safari does not zoom on
+focus.
+
+The panel copy (`panelTitle` / `panelSubtitle`) defaults to
+"One system for every part of your hospital." with a supporting line; pass your
+own for a module-specific message, or `panelSubtitle={null}` for headline only.
+`logoSrc` swaps the card logo for a module mark; leave it off and the HISD3
+logo is used. `HISD3_LOGO_SRC` is exported if you need the mark elsewhere.
+`primary` accepts the brand presets `"brand"` (the logo's gear, `#E5533B`) and
+`"brandBlue"` (its cloud, `#1B6FE0`), any other preset, or a hex value.
+
 ## Migrating
 
 ### from 3.x