hisd3-ui-kit 4.0.0 → 4.1.0

package/README.md

@@ -33,9 +33,16 @@ import { HISD3Provider } from "hisd3-ui-kit";
 `HISD3Provider` sets up antd's `ConfigProvider` (CSS variables on, so every kit
 component and every plain antd component follows the chosen primary), antd
 `App` (themed `modal.confirm` / `message`), and the styled-components
-`ThemeProvider`. Options: `primary`, `radius` (default 0), `lineWidth`
-(default 2), `overrides` (extra antd `ThemeConfig`), or `theme` to bypass the
-generator entirely.
+`ThemeProvider`. Options: `primary`, `borders` (`"hairline"` default, or
+`"bold"` for the original 2px near-black rules), `radius` (default 0),
+`lineWidth` (overrides the `borders` preset), `overrides` (extra antd
+`ThemeConfig`), or `theme` to bypass the generator entirely.
+
+Borders are hairline by default — 1px warm grey (`#D9D5CE` structural,
+`#E7E4DE` row rules), with near-black kept for type and for control hover
+states. Every kit component follows `--hisd3-rule-width`, so switching
+`borders="bold"` retunes the sidebar, header, table, tabs, pagination, inputs
+and buttons together.
 
 Need just the antd theme object (e.g. for Storybook)? `createHisd3Theme({ primary: "teal" })`.
 
@@ -44,7 +51,7 @@ Need just the antd theme object (e.g. for Storybook)? `createHisd3Theme({ primar
 ```tsx
 import {
   HISD3Sidebar, HISD3PageHeader, HISD3PageBody, HISD3SearchInput, HISD3Tabs,
-  HISD3Table, HISD3Tag, HISD3Button,
+  HISD3Table, HISD3Tag, HISD3Button, HISD3HeaderActions, HISD3NotificationButton, HISD3AvatarMenu,
 } from "hisd3-ui-kit";
 
 const menuItems = [
@@ -66,6 +73,7 @@ const menuItems = [
   onLogout={logout}
   bareContent      // let HISD3PageHeader own the gutters
   hideHeaderBar    // HISD3PageHeader renders the top bar
+  hideAccountCard  // account lives in the header instead (HISD3AvatarMenu)
 >
   <HISD3PageHeader
     title="Billing Folios"
@@ -74,6 +82,14 @@ const menuItems = [
     extra={<>
       <HISD3Button icon={<ReloadOutlined />}>Refresh</HISD3Button>
       <HISD3Button variant="primary" icon={<PlusOutlined />}>New folio</HISD3Button>
+      <HISD3HeaderActions divided>
+        <HISD3NotificationButton
+          items={notifications}
+          onMarkAllRead={markAllRead}
+          onSeeAll={() => router.push("/notifications")}
+        />
+        <HISD3AvatarMenu account={currentUser} avatarSrc={currentUser.photoUrl} onLogout={logout} />
+      </HISD3HeaderActions>
     </>}
   />
   <HISD3PageBody>
@@ -101,10 +117,14 @@ const menuItems = [
 | `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`, …). |
 | `HISD3Input` / `HISD3SearchInput` | 2px-bordered input; the search variant is the grey filled hero field with a leading icon (`compact` for a 48px version). |
-| `UserMenu` | The account dropdown on its own. |
+| `HISD3HeaderActions` | Spacing wrapper for the top-right controls; `divided` inserts a rule before the last child. |
+| `HISD3NotificationButton` | Soft-grey circular bell button (Facebook-style) with an unread badge; tints to the primary color while its panel is open. Props: `items` (`{ id, title, description, time, unread, avatarSrc, icon, onClick }`), `count` (defaults to the unread tally), `loading`, `size` (default 40), `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`. |
+| `UserMenu` | The sidebar-footer account card, on its own. |
 
 Theme utilities: `createHisd3Theme`, `hisd3AntdTheme` (red default),
-`HISD3_PRESETS`, `HISD3_NEUTRALS`, `HISD3_FONT_FAMILY`,
+`HISD3_PRESETS`, `HISD3_NEUTRALS`, `HISD3_BORDER_PRESETS`, `borderVarsCss`,
+`HISD3_FONT_FAMILY`,
 `HISD3_FONT_WEIGHT_HEADING` (800) / `HISD3_FONT_WEIGHT_BODY` (400), `HISD3_LAYOUT`,
 `resolvePrimary`, `tint`. Plain antd components (Form, Select, DatePicker,
 Modal, …) inherit the same tokens automatically, so use them freely alongside
@@ -119,7 +139,10 @@ Inside styled-components or CSS you can rely on antd's variables:
 `var(--ant-color-primary)`, `var(--ant-color-primary-bg)`,
 `var(--ant-color-border)`, `var(--ant-color-border-secondary)`,
 `var(--ant-color-text)`, `var(--ant-color-text-tertiary)`,
-`var(--ant-color-bg-layout)`.
+`var(--ant-color-bg-layout)`. The header controls additionally read
+`--hisd3-control-bg` / `--hisd3-control-bg-hover` (the grey circle fill) and
+`--hisd3-popup-radius`, so you can retune them per app without forking the
+components.
 
 ## Migrating
 
@@ -127,6 +150,8 @@ Inside styled-components or CSS you can rely on antd's variables:
 
 - Wrap the app in `HISD3Provider` (the sidebar still works standalone with the red default, but the provider is what lets you pick a primary).
 - The default look changed from teal/rounded to the red/square Backoffice style. To keep teal: `<HISD3Provider primary="teal">`.
+- Borders are now hairline by default; pass `borders="bold"` to `HISD3Provider` to keep the 2px near-black look.
+- New `hideAccountCard` prop on `HISD3Sidebar` for apps that put the account in the header via `HISD3AvatarMenu`.
 - `HISD3Sidebar`: `logoUrl` and `styledTheme` are now optional; a primary-colored square is shown when there is no logo. `HISD3_COLORS` is deprecated in favour of `HISD3_PRESETS`.
 
 ### from 2.x (antd 5 / ProLayout)