hs-uix 1.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 +80 -0
- package/datatable.d.ts +21 -0
- package/dist/datatable.js +1040 -0
- package/dist/datatable.mjs +1034 -0
- package/dist/form.js +1268 -0
- package/dist/form.mjs +1271 -0
- package/dist/index.js +2272 -0
- package/dist/index.mjs +2304 -0
- package/form.d.ts +17 -0
- package/index.d.ts +38 -0
- package/package.json +69 -0
package/README.md
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
# hs-uix
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@hs-uix/datatable)
|
|
4
|
+
[](https://www.npmjs.com/package/@hs-uix/form)
|
|
5
|
+
[](./LICENSE)
|
|
6
|
+
|
|
7
|
+
Production-ready UI components for [HubSpot UI Extensions](https://developers.hubspot.com/docs/platform/ui-extensions-overview). Built entirely on HubSpot's native primitives — no custom HTML, no CSS, no iframes.
|
|
8
|
+
|
|
9
|
+
## Packages
|
|
10
|
+
|
|
11
|
+
| Package | Version | Description |
|
|
12
|
+
|---------|---------|-------------|
|
|
13
|
+
| [`@hs-uix/datatable`](./packages/datatable) | [](https://www.npmjs.com/package/@hs-uix/datatable) | Filterable, sortable, paginated DataTable with auto-sized columns, inline editing, row grouping, and more |
|
|
14
|
+
| [`@hs-uix/form`](./packages/form) | [](https://www.npmjs.com/package/@hs-uix/form) | Declarative, config-driven FormBuilder with validation, multi-step wizards, and 20+ field types |
|
|
15
|
+
|
|
16
|
+
## Install
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install @hs-uix/datatable
|
|
20
|
+
npm install @hs-uix/form
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Quick Start
|
|
24
|
+
|
|
25
|
+
### DataTable
|
|
26
|
+
|
|
27
|
+
```jsx
|
|
28
|
+
import { DataTable } from "@hs-uix/datatable";
|
|
29
|
+
|
|
30
|
+
const columns = [
|
|
31
|
+
{ field: "name", label: "Name", sortable: true },
|
|
32
|
+
{ field: "status", label: "Status" },
|
|
33
|
+
{ field: "amount", label: "Amount", sortable: true },
|
|
34
|
+
];
|
|
35
|
+
|
|
36
|
+
<DataTable data={deals} columns={columns} searchFields={["name"]} pageSize={10} />;
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### FormBuilder
|
|
40
|
+
|
|
41
|
+
```jsx
|
|
42
|
+
import { FormBuilder } from "@hs-uix/form";
|
|
43
|
+
|
|
44
|
+
const fields = [
|
|
45
|
+
{ name: "email", label: "Email", type: "text", required: true },
|
|
46
|
+
{ name: "role", label: "Role", type: "select", options: [
|
|
47
|
+
{ label: "Admin", value: "admin" },
|
|
48
|
+
{ label: "User", value: "user" },
|
|
49
|
+
]},
|
|
50
|
+
];
|
|
51
|
+
|
|
52
|
+
<FormBuilder fields={fields} onSubmit={(values) => console.log(values)} />;
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## Local Development
|
|
56
|
+
|
|
57
|
+
```bash
|
|
58
|
+
# Install dependencies
|
|
59
|
+
npm install
|
|
60
|
+
|
|
61
|
+
# Build all packages
|
|
62
|
+
npm run build
|
|
63
|
+
|
|
64
|
+
# Watch mode
|
|
65
|
+
npm run dev
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
## Monorepo Structure
|
|
69
|
+
|
|
70
|
+
```
|
|
71
|
+
hs-uix/
|
|
72
|
+
├── packages/
|
|
73
|
+
│ ├── datatable/ ← @hs-uix/datatable
|
|
74
|
+
│ └── form/ ← @hs-uix/form
|
|
75
|
+
└── package.json ← npm workspaces root
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
## License
|
|
79
|
+
|
|
80
|
+
MIT
|
package/datatable.d.ts
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export {
|
|
2
|
+
DataTable,
|
|
3
|
+
DataTableProps,
|
|
4
|
+
DataTableColumn,
|
|
5
|
+
DataTableFilterConfig,
|
|
6
|
+
DataTableGroupBy,
|
|
7
|
+
DataTableSortDirection,
|
|
8
|
+
DataTableSortObject,
|
|
9
|
+
DataTableParams,
|
|
10
|
+
DataTableOption,
|
|
11
|
+
DataTableDateValue,
|
|
12
|
+
DataTableTimeValue,
|
|
13
|
+
DataTableDateRangeValue,
|
|
14
|
+
DataTableWidth,
|
|
15
|
+
DataTableColumnWidth,
|
|
16
|
+
DataTableEditMode,
|
|
17
|
+
DataTableEditType,
|
|
18
|
+
DataTableSelectionAction,
|
|
19
|
+
DataTableRowAction,
|
|
20
|
+
DataTableSelectAllRequestPayload,
|
|
21
|
+
} from "./packages/datatable/index";
|