hisd3-ui-kit 3.0.0 → 4.0.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 +118 -78
- package/dist/index.cjs.js +485 -93
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +211 -22
- package/dist/index.js +485 -93
- package/dist/index.js.map +1 -1
- package/package.json +7 -8
package/README.md
CHANGED
|
@@ -1,100 +1,140 @@
|
|
|
1
1
|
# HISD3 UI Kit
|
|
2
2
|
|
|
3
3
|
Shared React UI components for HISD3 applications, built on **Ant Design v6**.
|
|
4
|
+
One install gives every app the same "Backoffice" look — square corners, 2px
|
|
5
|
+
borders, Archivo type, grouped sidebar — with a primary color you choose per app.
|
|
4
6
|
|
|
5
7
|
```bash
|
|
6
|
-
# npm
|
|
7
|
-
npm install hisd3-ui-kit antd @ant-design/icons styled-components
|
|
8
|
-
# yarn
|
|
9
|
-
yarn add hisd3-ui-kit antd @ant-design/icons styled-components
|
|
10
|
-
# pnpm
|
|
11
8
|
pnpm add hisd3-ui-kit antd @ant-design/icons styled-components
|
|
9
|
+
# npm i / yarn add work the same
|
|
12
10
|
```
|
|
13
11
|
|
|
14
12
|
`antd`, `@ant-design/icons`, `styled-components`, `react` and `react-dom` are
|
|
15
|
-
**peer dependencies** —
|
|
16
|
-
|
|
13
|
+
**peer dependencies** — each app installs them once so there is a single antd
|
|
14
|
+
copy and one theme chain.
|
|
17
15
|
|
|
18
|
-
| Peer
|
|
19
|
-
|
|
|
20
|
-
| `antd`
|
|
21
|
-
| `@ant-design/icons`
|
|
22
|
-
| `styled-components`
|
|
23
|
-
| `react` / `react-dom` | `>=18`
|
|
16
|
+
| Peer | Version |
|
|
17
|
+
| --------------------- | -------- |
|
|
18
|
+
| `antd` | `^6.0.0` |
|
|
19
|
+
| `@ant-design/icons` | `^6.0.0` |
|
|
20
|
+
| `styled-components` | `^6.1.0` |
|
|
21
|
+
| `react` / `react-dom` | `>=18` |
|
|
24
22
|
|
|
25
|
-
##
|
|
23
|
+
## 1. Wrap the app once
|
|
26
24
|
|
|
27
25
|
```tsx
|
|
28
|
-
import {
|
|
29
|
-
|
|
26
|
+
import { HISD3Provider } from "hisd3-ui-kit";
|
|
27
|
+
|
|
28
|
+
<HISD3Provider primary="red"> {/* "red" | "orange" | "teal" | "blue" | "green" | "purple" | "#hex" */}
|
|
29
|
+
<App />
|
|
30
|
+
</HISD3Provider>
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
`HISD3Provider` sets up antd's `ConfigProvider` (CSS variables on, so every kit
|
|
34
|
+
component and every plain antd component follows the chosen primary), antd
|
|
35
|
+
`App` (themed `modal.confirm` / `message`), and the styled-components
|
|
36
|
+
`ThemeProvider`. Options: `primary`, `radius` (default 0), `lineWidth`
|
|
37
|
+
(default 2), `overrides` (extra antd `ThemeConfig`), or `theme` to bypass the
|
|
38
|
+
generator entirely.
|
|
39
|
+
|
|
40
|
+
Need just the antd theme object (e.g. for Storybook)? `createHisd3Theme({ primary: "teal" })`.
|
|
41
|
+
|
|
42
|
+
## 2. Build a page
|
|
43
|
+
|
|
44
|
+
```tsx
|
|
45
|
+
import {
|
|
46
|
+
HISD3Sidebar, HISD3PageHeader, HISD3PageBody, HISD3SearchInput, HISD3Tabs,
|
|
47
|
+
HISD3Table, HISD3Tag, HISD3Button,
|
|
48
|
+
} from "hisd3-ui-kit";
|
|
30
49
|
|
|
31
50
|
const menuItems = [
|
|
32
|
-
{ path: "/dashboard", name: "Dashboard", icon: <
|
|
33
|
-
{
|
|
34
|
-
path: "/
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
],
|
|
41
|
-
},
|
|
51
|
+
{ path: "/dashboard", name: "Dashboard", icon: <AppstoreOutlined /> },
|
|
52
|
+
{ key: "rc", name: "Receivables and Collections", group: true, children: [
|
|
53
|
+
{ path: "/billing", name: "Billing", icon: <FileTextOutlined />, children: [
|
|
54
|
+
{ path: "/billing/folios", name: "Billing Folios" },
|
|
55
|
+
{ path: "/billing/otc", name: "OTC Transaction" },
|
|
56
|
+
]},
|
|
57
|
+
{ path: "/cashiering", name: "Cashiering", icon: <BankOutlined /> },
|
|
58
|
+
]},
|
|
42
59
|
];
|
|
43
60
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
}
|
|
61
|
+
<HISD3Sidebar
|
|
62
|
+
appName="Backoffice"
|
|
63
|
+
menuItems={menuItems}
|
|
64
|
+
pathname={location.pathname}
|
|
65
|
+
account={currentUser}
|
|
66
|
+
onLogout={logout}
|
|
67
|
+
bareContent // let HISD3PageHeader own the gutters
|
|
68
|
+
hideHeaderBar // HISD3PageHeader renders the top bar
|
|
69
|
+
>
|
|
70
|
+
<HISD3PageHeader
|
|
71
|
+
title="Billing Folios"
|
|
72
|
+
subtitle="Manage your billing records"
|
|
73
|
+
breadcrumb={[{ title: "Receivables and Collections", href: "/rc" }, { title: "Billing" }]}
|
|
74
|
+
extra={<>
|
|
75
|
+
<HISD3Button icon={<ReloadOutlined />}>Refresh</HISD3Button>
|
|
76
|
+
<HISD3Button variant="primary" icon={<PlusOutlined />}>New folio</HISD3Button>
|
|
77
|
+
</>}
|
|
78
|
+
/>
|
|
79
|
+
<HISD3PageBody>
|
|
80
|
+
<HISD3SearchInput placeholder="Search patients, bill no. or case" />
|
|
81
|
+
<HISD3Tabs items={[{ key: "all", label: "All Patients", count: 10 }, { key: "opd", label: "Outpatient", count: 2 }]} />
|
|
82
|
+
<HISD3Table
|
|
83
|
+
columns={columns}
|
|
84
|
+
dataSource={rows}
|
|
85
|
+
footer="Outstanding on this page"
|
|
86
|
+
pagination={{ current, pageSize, total: 7223, onChange: (p, s) => ... }}
|
|
87
|
+
/>
|
|
88
|
+
</HISD3PageBody>
|
|
89
|
+
</HISD3Sidebar>
|
|
59
90
|
```
|
|
60
91
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
|
64
|
-
|
|
|
65
|
-
| `
|
|
66
|
-
| `
|
|
67
|
-
| `
|
|
68
|
-
| `
|
|
69
|
-
| `
|
|
70
|
-
| `
|
|
71
|
-
| `
|
|
72
|
-
| `
|
|
73
|
-
| `
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
-
|
|
88
|
-
- `
|
|
89
|
-
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
92
|
+
## Components
|
|
93
|
+
|
|
94
|
+
| Component | What it is |
|
|
95
|
+
| --- | --- |
|
|
96
|
+
| `HISD3Provider` | Root theme provider (see above). |
|
|
97
|
+
| `HISD3Sidebar` | App shell: 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`. |
|
|
98
|
+
| `HISD3PageHeader` / `HISD3PageBody` | Sticky top bar (breadcrumb left, actions right) plus large title + subtitle; `HISD3PageBody` is the matching padded content area. |
|
|
99
|
+
| `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`. |
|
|
100
|
+
| `HISD3Tabs` | Underlined filter tabs; each item may carry a `count`. |
|
|
101
|
+
| `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`. |
|
|
102
|
+
| `HISD3Button` | `variant`: `primary` (filled), `secondary` (default, dark 2px outline), `ghost`, `danger`. Accepts all antd `Button` props (`icon`, `size`, `loading`, …). |
|
|
103
|
+
| `HISD3Input` / `HISD3SearchInput` | 2px-bordered input; the search variant is the grey filled hero field with a leading icon (`compact` for a 48px version). |
|
|
104
|
+
| `UserMenu` | The account dropdown on its own. |
|
|
105
|
+
|
|
106
|
+
Theme utilities: `createHisd3Theme`, `hisd3AntdTheme` (red default),
|
|
107
|
+
`HISD3_PRESETS`, `HISD3_NEUTRALS`, `HISD3_FONT_FAMILY`,
|
|
108
|
+
`HISD3_FONT_WEIGHT_HEADING` (800) / `HISD3_FONT_WEIGHT_BODY` (400), `HISD3_LAYOUT`,
|
|
109
|
+
`resolvePrimary`, `tint`. Plain antd components (Form, Select, DatePicker,
|
|
110
|
+
Modal, …) inherit the same tokens automatically, so use them freely alongside
|
|
111
|
+
the kit.
|
|
112
|
+
|
|
113
|
+
Typography: Archivo throughout, loaded from Google Fonts by the kit — body 400,
|
|
114
|
+
headings 800. The kit defines `--font-body`, `--font-heading` and
|
|
115
|
+
`--font-weight-heading` on `:root`, so your own CSS can use them, and native
|
|
116
|
+
`h1`–`h6` (and antd `Typography.Title`) pick up the heading weight automatically.
|
|
117
|
+
|
|
118
|
+
Inside styled-components or CSS you can rely on antd's variables:
|
|
119
|
+
`var(--ant-color-primary)`, `var(--ant-color-primary-bg)`,
|
|
120
|
+
`var(--ant-color-border)`, `var(--ant-color-border-secondary)`,
|
|
121
|
+
`var(--ant-color-text)`, `var(--ant-color-text-tertiary)`,
|
|
122
|
+
`var(--ant-color-bg-layout)`.
|
|
123
|
+
|
|
124
|
+
## Migrating
|
|
125
|
+
|
|
126
|
+
### from 3.x
|
|
127
|
+
|
|
128
|
+
- Wrap the app in `HISD3Provider` (the sidebar still works standalone with the red default, but the provider is what lets you pick a primary).
|
|
129
|
+
- The default look changed from teal/rounded to the red/square Backoffice style. To keep teal: `<HISD3Provider primary="teal">`.
|
|
130
|
+
- `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`.
|
|
131
|
+
|
|
132
|
+
### from 2.x (antd 5 / ProLayout)
|
|
133
|
+
|
|
134
|
+
1. Upgrade the app to antd 6 and React 18+: `pnpm add antd@^6 @ant-design/icons@^6`; remove `@ant-design/v5-patch-for-react-19`. Follow the [antd v5 → v6 guide](https://ant.design/docs/react/migration-v6) for your own components.
|
|
135
|
+
2. Remove `@ant-design/pro-layout` / `@ant-design/pro-provider` unless you use them directly (their stable releases do not support antd 6).
|
|
136
|
+
3. `HISD3Sidebar` keeps the same required props and `menuItems` shape.
|
|
137
|
+
4. The `hisd3-ui-kit/Sidebar` sub-path was removed — import from the package root.
|
|
98
138
|
|
|
99
139
|
## Development
|
|
100
140
|
|