@bsol-oss/react-datatable5 13.0.1-beta.17 → 13.0.1-beta.18
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 +0 -260
- package/dist/index.d.ts +45 -247
- package/dist/index.js +273 -1084
- package/dist/index.mjs +275 -1081
- package/dist/types/components/Form/SchemaFormContext.d.ts +3 -11
- package/dist/types/components/Form/components/core/FormRoot.d.ts +27 -8
- package/dist/types/components/Form/components/types/CustomJSONSchema7.d.ts +3 -2
- package/dist/types/components/Form/useForm.d.ts +1 -2
- package/dist/types/components/Form/utils/ajvResolver.d.ts +4 -0
- package/dist/types/components/Form/utils/getTableData.d.ts +1 -2
- package/dist/types/components/Form/utils/useFormLabel.d.ts +12 -0
- package/dist/types/index.d.ts +0 -1
- package/package.json +1 -1
- package/dist/types/components/Form/utils/buildErrorMessages.d.ts +0 -222
- package/dist/types/components/Form/utils/getFieldError.d.ts +0 -6
- package/dist/types/components/Form/utils/useFormI18n.d.ts +0 -41
package/README.md
CHANGED
|
@@ -1,263 +1,3 @@
|
|
|
1
1
|
# @bsol-oss/react-datatable5
|
|
2
2
|
|
|
3
3
|
A powerful React component library built on top of `@tanstack/react-table` and `@chakra-ui/react` v3 that provides advanced data table and form components with built-in filtering, sorting, pagination, and JSON Schema validation.
|
|
4
|
-
|
|
5
|
-
## Features
|
|
6
|
-
|
|
7
|
-
### 📊 DataTable Components
|
|
8
|
-
|
|
9
|
-
- **Client-side DataTable**: Full-featured table with local state management
|
|
10
|
-
- **Server-side DataTable**: API-integrated table with automatic data fetching
|
|
11
|
-
- Advanced filtering (text, range, select, tag, boolean, dateRange, custom)
|
|
12
|
-
- Column sorting and reordering
|
|
13
|
-
- Pagination and row selection
|
|
14
|
-
- Responsive design with mobile-friendly card views
|
|
15
|
-
- Density controls and column visibility
|
|
16
|
-
- Customizable display components
|
|
17
|
-
|
|
18
|
-
### 📝 Form Components
|
|
19
|
-
|
|
20
|
-
- **JSON Schema-based forms**: Auto-generate forms from JSON Schema
|
|
21
|
-
- **AJV validation**: Full Draft 7 JSON Schema validation support
|
|
22
|
-
- Multi-language validation support (en, zh-HK, zh-TW, zh-CN)
|
|
23
|
-
- Custom error messages via schema configuration
|
|
24
|
-
- Field types: String, Number, Boolean, Date, DateTime, Enum, ID Picker, Tag, File
|
|
25
|
-
- Read-only form viewers
|
|
26
|
-
- Built-in form state management with `react-hook-form`
|
|
27
|
-
|
|
28
|
-
### 📅 Date & Time Pickers
|
|
29
|
-
|
|
30
|
-
- Custom date/time picker components
|
|
31
|
-
- Built-in calendar implementation (no external dependencies)
|
|
32
|
-
- `dayjs` integration for date formatting and manipulation
|
|
33
|
-
- Timezone support (default: Asia/Hong_Kong)
|
|
34
|
-
|
|
35
|
-
## Installation
|
|
36
|
-
|
|
37
|
-
```bash
|
|
38
|
-
npm install @bsol-oss/react-datatable5
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
### Peer Dependencies
|
|
42
|
-
|
|
43
|
-
This library requires the following peer dependencies to be installed in your project:
|
|
44
|
-
|
|
45
|
-
```bash
|
|
46
|
-
npm install react@^19.0.0 react-dom@^19.0.0
|
|
47
|
-
npm install @chakra-ui/react@^3.19.1
|
|
48
|
-
npm install @tanstack/react-table@^8.21.2
|
|
49
|
-
npm install @tanstack/react-query@^5.66.9
|
|
50
|
-
npm install react-hook-form@^7.54.2
|
|
51
|
-
npm install ajv@^8.12.0 ajv-formats@^3.0.1 ajv-errors@^3.0.0
|
|
52
|
-
npm install dayjs@^1.11.13
|
|
53
|
-
npm install react-icons@^5.4.0
|
|
54
|
-
npm install axios@^1.13.2
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
See `package.json` for the complete list of peer dependencies.
|
|
58
|
-
|
|
59
|
-
## Quick Start
|
|
60
|
-
|
|
61
|
-
### Client-side DataTable
|
|
62
|
-
|
|
63
|
-
```tsx
|
|
64
|
-
import {
|
|
65
|
-
useDataTable,
|
|
66
|
-
DataTable,
|
|
67
|
-
DefaultTable,
|
|
68
|
-
} from '@bsol-oss/react-datatable5';
|
|
69
|
-
|
|
70
|
-
const columns = [
|
|
71
|
-
{
|
|
72
|
-
accessorKey: 'name',
|
|
73
|
-
header: 'Name',
|
|
74
|
-
},
|
|
75
|
-
{
|
|
76
|
-
accessorKey: 'email',
|
|
77
|
-
header: 'Email',
|
|
78
|
-
},
|
|
79
|
-
];
|
|
80
|
-
|
|
81
|
-
const data = [
|
|
82
|
-
{ name: 'John Doe', email: 'john@example.com' },
|
|
83
|
-
{ name: 'Jane Smith', email: 'jane@example.com' },
|
|
84
|
-
];
|
|
85
|
-
|
|
86
|
-
function MyTable() {
|
|
87
|
-
const datatable = useDataTable({
|
|
88
|
-
default: {
|
|
89
|
-
pageSize: 20,
|
|
90
|
-
sorting: [{ id: 'name', desc: false }],
|
|
91
|
-
},
|
|
92
|
-
});
|
|
93
|
-
|
|
94
|
-
return (
|
|
95
|
-
<DataTable columns={columns} data={data} {...datatable}>
|
|
96
|
-
<DefaultTable />
|
|
97
|
-
</DataTable>
|
|
98
|
-
);
|
|
99
|
-
}
|
|
100
|
-
```
|
|
101
|
-
|
|
102
|
-
### Server-side DataTable
|
|
103
|
-
|
|
104
|
-
```tsx
|
|
105
|
-
import {
|
|
106
|
-
useDataTableServer,
|
|
107
|
-
DataTableServer,
|
|
108
|
-
DefaultTable,
|
|
109
|
-
Pagination,
|
|
110
|
-
} from '@bsol-oss/react-datatable5';
|
|
111
|
-
|
|
112
|
-
function MyServerTable() {
|
|
113
|
-
const datatable = useDataTableServer({
|
|
114
|
-
url: 'https://api.example.com/data',
|
|
115
|
-
default: { pageSize: 10 },
|
|
116
|
-
});
|
|
117
|
-
|
|
118
|
-
return (
|
|
119
|
-
<DataTableServer columns={columns} {...datatable}>
|
|
120
|
-
<DefaultTable />
|
|
121
|
-
<Pagination />
|
|
122
|
-
</DataTableServer>
|
|
123
|
-
);
|
|
124
|
-
}
|
|
125
|
-
```
|
|
126
|
-
|
|
127
|
-
### Form with JSON Schema
|
|
128
|
-
|
|
129
|
-
```tsx
|
|
130
|
-
import { FormRoot, FormBody } from '@bsol-oss/react-datatable5';
|
|
131
|
-
|
|
132
|
-
const schema = {
|
|
133
|
-
type: 'object',
|
|
134
|
-
required: ['username', 'email'],
|
|
135
|
-
properties: {
|
|
136
|
-
username: {
|
|
137
|
-
type: 'string',
|
|
138
|
-
minLength: 3,
|
|
139
|
-
errorMessages: {
|
|
140
|
-
required: 'Username is required',
|
|
141
|
-
minLength: 'Username must be at least 3 characters',
|
|
142
|
-
},
|
|
143
|
-
},
|
|
144
|
-
email: {
|
|
145
|
-
type: 'string',
|
|
146
|
-
format: 'email',
|
|
147
|
-
errorMessages: {
|
|
148
|
-
required: 'Email is required',
|
|
149
|
-
format: 'Invalid email format',
|
|
150
|
-
},
|
|
151
|
-
},
|
|
152
|
-
},
|
|
153
|
-
};
|
|
154
|
-
|
|
155
|
-
function MyForm() {
|
|
156
|
-
return (
|
|
157
|
-
<FormRoot
|
|
158
|
-
schema={schema}
|
|
159
|
-
validationLocale="en"
|
|
160
|
-
onSubmit={async (data) => {
|
|
161
|
-
console.log('Submitted:', data);
|
|
162
|
-
}}
|
|
163
|
-
>
|
|
164
|
-
<FormBody />
|
|
165
|
-
</FormRoot>
|
|
166
|
-
);
|
|
167
|
-
}
|
|
168
|
-
```
|
|
169
|
-
|
|
170
|
-
## Documentation
|
|
171
|
-
|
|
172
|
-
- [Server-side DataTable Usage](./docs/DATATABLE_SERVER_USAGE.md)
|
|
173
|
-
- [ID Picker Guide](./docs/IDPICKER_GUIDE.md)
|
|
174
|
-
- [Enum Picker Translation](./docs/ENUMPICKER_TRANSLATION.md)
|
|
175
|
-
- [i18n Migration Guide](./docs/I18N_MIGRATION_GUIDE.md)
|
|
176
|
-
- [Validation Guide](./VALIDATION_GUIDE.md)
|
|
177
|
-
- [Deployment Guide](./docs/deployment.md)
|
|
178
|
-
|
|
179
|
-
## Development
|
|
180
|
-
|
|
181
|
-
### Storybook
|
|
182
|
-
|
|
183
|
-
View interactive examples and component documentation:
|
|
184
|
-
|
|
185
|
-
```bash
|
|
186
|
-
npm run storybook
|
|
187
|
-
```
|
|
188
|
-
|
|
189
|
-
Stories are organized by feature:
|
|
190
|
-
|
|
191
|
-
- `DataTable/` - Client-side table examples
|
|
192
|
-
- `DataTableServer/` - Server-side table examples
|
|
193
|
-
- `Form/` - Form component examples
|
|
194
|
-
- `DatePicker/` - Date/time picker examples
|
|
195
|
-
|
|
196
|
-
### Build
|
|
197
|
-
|
|
198
|
-
```bash
|
|
199
|
-
npm run build
|
|
200
|
-
```
|
|
201
|
-
|
|
202
|
-
### Lint
|
|
203
|
-
|
|
204
|
-
```bash
|
|
205
|
-
npm run lint
|
|
206
|
-
```
|
|
207
|
-
|
|
208
|
-
### Format
|
|
209
|
-
|
|
210
|
-
```bash
|
|
211
|
-
npm run format
|
|
212
|
-
```
|
|
213
|
-
|
|
214
|
-
## Key Features
|
|
215
|
-
|
|
216
|
-
### Column Customization
|
|
217
|
-
|
|
218
|
-
Define custom filters and display options in column metadata:
|
|
219
|
-
|
|
220
|
-
```tsx
|
|
221
|
-
{
|
|
222
|
-
id: 'status',
|
|
223
|
-
meta: {
|
|
224
|
-
displayName: 'Status',
|
|
225
|
-
filterVariant: 'select',
|
|
226
|
-
filterOptions: [
|
|
227
|
-
{ label: 'Active', value: 'active' },
|
|
228
|
-
{ label: 'Inactive', value: 'inactive' }
|
|
229
|
-
]
|
|
230
|
-
}
|
|
231
|
-
}
|
|
232
|
-
```
|
|
233
|
-
|
|
234
|
-
### Label Objects
|
|
235
|
-
|
|
236
|
-
Components use label objects from schema context for internationalization:
|
|
237
|
-
|
|
238
|
-
```tsx
|
|
239
|
-
<FormRoot
|
|
240
|
-
schema={schema}
|
|
241
|
-
idPickerLabels={{
|
|
242
|
-
typeToSearch: 'Type to search...',
|
|
243
|
-
total: 'Total',
|
|
244
|
-
// ... other labels
|
|
245
|
-
}}
|
|
246
|
-
>
|
|
247
|
-
<FormBody />
|
|
248
|
-
</FormRoot>
|
|
249
|
-
```
|
|
250
|
-
|
|
251
|
-
## Requirements
|
|
252
|
-
|
|
253
|
-
- React 19+
|
|
254
|
-
- @chakra-ui/react 3.19+
|
|
255
|
-
- TypeScript (for type definitions)
|
|
256
|
-
|
|
257
|
-
## License
|
|
258
|
-
|
|
259
|
-
MIT
|
|
260
|
-
|
|
261
|
-
## Repository
|
|
262
|
-
|
|
263
|
-
[GitHub](https://github.com/bsol-oss/react-datatable5)
|
package/dist/index.d.ts
CHANGED
|
@@ -11,7 +11,7 @@ import { JSONSchema7 } from 'json-schema';
|
|
|
11
11
|
import { ForeignKeyProps as ForeignKeyProps$1 } from '@/components/Form/components/fields/StringInputField';
|
|
12
12
|
import { AxiosRequestConfig } from 'axios';
|
|
13
13
|
import * as react_hook_form from 'react-hook-form';
|
|
14
|
-
import {
|
|
14
|
+
import { UseFormReturn, FieldValues, SubmitHandler } from 'react-hook-form';
|
|
15
15
|
|
|
16
16
|
interface TableHeaderTexts {
|
|
17
17
|
pinColumn?: string;
|
|
@@ -502,22 +502,6 @@ interface GetColumnsConfigs<K extends RowData> {
|
|
|
502
502
|
declare const widthSanityCheck: <K extends unknown>(widthList: number[], ignoreList: K[], properties: { [key in K as string]?: object | undefined; }) => void;
|
|
503
503
|
declare const getColumns: <TData extends unknown>({ schema, include, ignore, width, meta, defaultWidth, }: GetColumnsConfigs<TData>) => ColumnDef<TData>[];
|
|
504
504
|
|
|
505
|
-
interface Translate {
|
|
506
|
-
t: (key: string, options?: any) => string;
|
|
507
|
-
i18n?: any;
|
|
508
|
-
ready?: boolean;
|
|
509
|
-
}
|
|
510
|
-
interface UseFormProps {
|
|
511
|
-
preLoadedValues?: FieldValues | undefined;
|
|
512
|
-
schema?: JSONSchema7;
|
|
513
|
-
}
|
|
514
|
-
declare const useForm: ({ preLoadedValues, schema }: UseFormProps) => {
|
|
515
|
-
form: react_hook_form.UseFormReturn<FieldValues, any, undefined>;
|
|
516
|
-
idMap: Record<string, object>;
|
|
517
|
-
setIdMap: React$1.Dispatch<React$1.SetStateAction<Record<string, object>>>;
|
|
518
|
-
translate: Translate;
|
|
519
|
-
};
|
|
520
|
-
|
|
521
505
|
interface CustomQueryFnResponse {
|
|
522
506
|
/**
|
|
523
507
|
* The data of the query
|
|
@@ -544,234 +528,13 @@ interface ForeignKeyProps {
|
|
|
544
528
|
customQueryFn?: CustomQueryFn;
|
|
545
529
|
}
|
|
546
530
|
|
|
547
|
-
/**
|
|
548
|
-
* Type definitions for error message configuration
|
|
549
|
-
*/
|
|
550
|
-
/**
|
|
551
|
-
* Common validation error types that can be customized
|
|
552
|
-
*/
|
|
553
531
|
type ValidationErrorType = 'minLength' | 'maxLength' | 'pattern' | 'minimum' | 'maximum' | 'multipleOf' | 'format' | 'type' | 'enum' | 'required' | 'minItems' | 'maxItems' | 'uniqueItems' | 'minProperties' | 'maxProperties' | 'anyOf' | 'oneOf' | 'allOf' | 'const' | 'additionalProperties' | 'dependencies';
|
|
554
|
-
/**
|
|
555
|
-
* Configuration for field-specific validation errors
|
|
556
|
-
*/
|
|
557
|
-
type FieldErrorConfig = Partial<Record<ValidationErrorType, string>>;
|
|
558
|
-
/**
|
|
559
|
-
* Configuration for building error messages
|
|
560
|
-
*/
|
|
561
|
-
interface ErrorMessageConfig {
|
|
562
|
-
/**
|
|
563
|
-
* Required field error messages
|
|
564
|
-
* Maps field names to their required error messages
|
|
565
|
-
* Supports both plain strings and i18n translation keys
|
|
566
|
-
*
|
|
567
|
-
* @example
|
|
568
|
-
* ```typescript
|
|
569
|
-
* required: {
|
|
570
|
-
* username: "Username is required", // plain string
|
|
571
|
-
* email: "user.email.field_required" // i18n key
|
|
572
|
-
* }
|
|
573
|
-
* ```
|
|
574
|
-
*/
|
|
575
|
-
required?: Record<string, string>;
|
|
576
|
-
/**
|
|
577
|
-
* Field-specific validation error messages
|
|
578
|
-
* Maps field names to their validation error configurations
|
|
579
|
-
*
|
|
580
|
-
* @example
|
|
581
|
-
* ```typescript
|
|
582
|
-
* properties: {
|
|
583
|
-
* username: {
|
|
584
|
-
* minLength: "Username must be at least 3 characters",
|
|
585
|
-
* pattern: "Username can only contain letters and numbers"
|
|
586
|
-
* },
|
|
587
|
-
* age: {
|
|
588
|
-
* minimum: "Age must be at least 18",
|
|
589
|
-
* maximum: "Age cannot exceed 120"
|
|
590
|
-
* }
|
|
591
|
-
* }
|
|
592
|
-
* ```
|
|
593
|
-
*/
|
|
594
|
-
properties?: Record<string, FieldErrorConfig>;
|
|
595
|
-
/**
|
|
596
|
-
* Global fallback error messages for validation types
|
|
597
|
-
* These are used when no field-specific message is provided
|
|
598
|
-
*
|
|
599
|
-
* @example
|
|
600
|
-
* ```typescript
|
|
601
|
-
* {
|
|
602
|
-
* minLength: "This field is too short",
|
|
603
|
-
* minimum: "Value is too small"
|
|
604
|
-
* }
|
|
605
|
-
* ```
|
|
606
|
-
*/
|
|
607
|
-
[key: string]: any;
|
|
608
|
-
}
|
|
609
|
-
/**
|
|
610
|
-
* Result of buildErrorMessages that follows ajv-errors format
|
|
611
|
-
*/
|
|
612
|
-
interface ErrorMessageResult {
|
|
613
|
-
required?: Record<string, string>;
|
|
614
|
-
properties?: Record<string, FieldErrorConfig>;
|
|
615
|
-
[key: string]: any;
|
|
616
|
-
}
|
|
617
|
-
/**
|
|
618
|
-
* Schema-level error message builder
|
|
619
|
-
*
|
|
620
|
-
* Builds a complete errorMessage object compatible with ajv-errors plugin.
|
|
621
|
-
* Supports both i18n translation keys and plain string messages.
|
|
622
|
-
*
|
|
623
|
-
* @param config - Error message configuration
|
|
624
|
-
* @returns Complete errorMessage object for JSON Schema
|
|
625
|
-
*
|
|
626
|
-
* @example
|
|
627
|
-
* ```typescript
|
|
628
|
-
* // Simple required field errors
|
|
629
|
-
* const errorMessage = buildErrorMessages({
|
|
630
|
-
* required: {
|
|
631
|
-
* username: "Username is required",
|
|
632
|
-
* email: "user.email.field_required" // i18n key
|
|
633
|
-
* }
|
|
634
|
-
* });
|
|
635
|
-
*
|
|
636
|
-
* // With validation rules
|
|
637
|
-
* const errorMessage = buildErrorMessages({
|
|
638
|
-
* required: {
|
|
639
|
-
* password: "Password is required"
|
|
640
|
-
* },
|
|
641
|
-
* properties: {
|
|
642
|
-
* password: {
|
|
643
|
-
* minLength: "Password must be at least 8 characters",
|
|
644
|
-
* pattern: "Password must contain letters and numbers"
|
|
645
|
-
* },
|
|
646
|
-
* age: {
|
|
647
|
-
* minimum: "Must be 18 or older",
|
|
648
|
-
* maximum: "Must be under 120"
|
|
649
|
-
* }
|
|
650
|
-
* }
|
|
651
|
-
* });
|
|
652
|
-
*
|
|
653
|
-
* // With global fallbacks
|
|
654
|
-
* const errorMessage = buildErrorMessages({
|
|
655
|
-
* required: {
|
|
656
|
-
* email: "Email is required"
|
|
657
|
-
* },
|
|
658
|
-
* minLength: "This field is too short", // applies to all fields
|
|
659
|
-
* minimum: "Value is too small"
|
|
660
|
-
* });
|
|
661
|
-
* ```
|
|
662
|
-
*/
|
|
663
|
-
declare const buildErrorMessages: (config: ErrorMessageConfig) => ErrorMessageResult;
|
|
664
|
-
/**
|
|
665
|
-
* Converts buildErrorMessages result to ajv-errors compatible format
|
|
666
|
-
*/
|
|
667
|
-
declare const convertToAjvErrorsFormat: (errorMessages: ErrorMessageResult) => Record<string, any>;
|
|
668
|
-
/**
|
|
669
|
-
* Helper function to build required field errors
|
|
670
|
-
*
|
|
671
|
-
* Simplifies creating required field error messages, especially useful
|
|
672
|
-
* for generating i18n translation keys following a pattern.
|
|
673
|
-
*
|
|
674
|
-
* @param fields - Array of required field names
|
|
675
|
-
* @param messageOrGenerator - Either a string template or function to generate messages
|
|
676
|
-
* @returns Required field error configuration
|
|
677
|
-
*
|
|
678
|
-
* @example
|
|
679
|
-
* ```typescript
|
|
680
|
-
* // Plain string messages
|
|
681
|
-
* const required = buildRequiredErrors(
|
|
682
|
-
* ["username", "email", "password"],
|
|
683
|
-
* (field) => `${field} is required`
|
|
684
|
-
* );
|
|
685
|
-
* // Result: { username: "username is required", email: "email is required", ... }
|
|
686
|
-
*
|
|
687
|
-
* // i18n translation keys
|
|
688
|
-
* const required = buildRequiredErrors(
|
|
689
|
-
* ["username", "email"],
|
|
690
|
-
* (field) => `user.${field}.field_required`
|
|
691
|
-
* );
|
|
692
|
-
* // Result: { username: "user.username.field_required", email: "user.email.field_required" }
|
|
693
|
-
*
|
|
694
|
-
* // Same message for all fields
|
|
695
|
-
* const required = buildRequiredErrors(
|
|
696
|
-
* ["username", "email"],
|
|
697
|
-
* "This field is required"
|
|
698
|
-
* );
|
|
699
|
-
* // Result: { username: "This field is required", email: "This field is required" }
|
|
700
|
-
*
|
|
701
|
-
* // With prefix in generator function
|
|
702
|
-
* const required = buildRequiredErrors(
|
|
703
|
-
* ["username", "email"],
|
|
704
|
-
* (field) => `user.${field}.field_required`
|
|
705
|
-
* );
|
|
706
|
-
* // Result: { username: "user.username.field_required", email: "user.email.field_required" }
|
|
707
|
-
* ```
|
|
708
|
-
*/
|
|
709
|
-
declare const buildRequiredErrors: (fields: string[], messageOrGenerator: string | ((field: string) => string)) => Record<string, string>;
|
|
710
|
-
/**
|
|
711
|
-
* Helper function to build field-specific validation errors
|
|
712
|
-
*
|
|
713
|
-
* Creates property-specific error messages for multiple fields at once.
|
|
714
|
-
*
|
|
715
|
-
* @param config - Maps field names to their validation error configurations
|
|
716
|
-
* @returns Properties error configuration
|
|
717
|
-
*
|
|
718
|
-
* @example
|
|
719
|
-
* ```typescript
|
|
720
|
-
* const properties = buildFieldErrors({
|
|
721
|
-
* username: {
|
|
722
|
-
* minLength: "Username must be at least 3 characters",
|
|
723
|
-
* pattern: "Username can only contain letters and numbers"
|
|
724
|
-
* },
|
|
725
|
-
* age: {
|
|
726
|
-
* minimum: "Must be 18 or older",
|
|
727
|
-
* maximum: "Must be under 120"
|
|
728
|
-
* },
|
|
729
|
-
* email: {
|
|
730
|
-
* format: "Please enter a valid email address"
|
|
731
|
-
* }
|
|
732
|
-
* });
|
|
733
|
-
* ```
|
|
734
|
-
*/
|
|
735
|
-
declare const buildFieldErrors: (config: Record<string, FieldErrorConfig>) => Record<string, FieldErrorConfig>;
|
|
736
|
-
/**
|
|
737
|
-
* Helper function to create a complete error message configuration in one call
|
|
738
|
-
*
|
|
739
|
-
* Convenient wrapper that combines required and validation errors.
|
|
740
|
-
*
|
|
741
|
-
* @param required - Required field error messages
|
|
742
|
-
* @param properties - Field-specific validation error messages
|
|
743
|
-
* @param globalFallbacks - Global fallback error messages
|
|
744
|
-
* @returns Complete error message configuration
|
|
745
|
-
*
|
|
746
|
-
* @example
|
|
747
|
-
* ```typescript
|
|
748
|
-
* const errorMessage = createErrorMessage(
|
|
749
|
-
* {
|
|
750
|
-
* username: "Username is required",
|
|
751
|
-
* email: "Email is required"
|
|
752
|
-
* },
|
|
753
|
-
* {
|
|
754
|
-
* username: {
|
|
755
|
-
* minLength: "Username must be at least 3 characters"
|
|
756
|
-
* },
|
|
757
|
-
* email: {
|
|
758
|
-
* format: "Please enter a valid email"
|
|
759
|
-
* }
|
|
760
|
-
* },
|
|
761
|
-
* {
|
|
762
|
-
* minLength: "This field is too short",
|
|
763
|
-
* format: "Invalid format"
|
|
764
|
-
* }
|
|
765
|
-
* );
|
|
766
|
-
* ```
|
|
767
|
-
*/
|
|
768
|
-
declare const createErrorMessage: (required?: Record<string, string>, properties?: Record<string, FieldErrorConfig>, globalFallbacks?: Partial<Record<ValidationErrorType, string>>) => ErrorMessageResult;
|
|
769
|
-
|
|
770
532
|
interface DateTimePickerLabels {
|
|
771
533
|
monthNamesShort?: string[];
|
|
772
534
|
weekdayNamesShort?: string[];
|
|
773
535
|
backButtonLabel?: string;
|
|
774
536
|
forwardButtonLabel?: string;
|
|
537
|
+
selectDateLabel?: string;
|
|
775
538
|
quickActionLabels?: {
|
|
776
539
|
yesterday?: string;
|
|
777
540
|
today?: string;
|
|
@@ -829,6 +592,7 @@ interface FormButtonLabels {
|
|
|
829
592
|
interface TimePickerLabels {
|
|
830
593
|
placeholder?: string;
|
|
831
594
|
emptyMessage?: string;
|
|
595
|
+
selectTimeLabel?: string;
|
|
832
596
|
}
|
|
833
597
|
interface LoadInitialValuesParams {
|
|
834
598
|
ids: string[];
|
|
@@ -873,7 +637,6 @@ interface CustomJSONSchema7 extends JSONSchema7 {
|
|
|
873
637
|
filePicker?: FilePickerProps;
|
|
874
638
|
tagPicker?: {
|
|
875
639
|
queryFn?: (params: {
|
|
876
|
-
in_table: string;
|
|
877
640
|
where?: {
|
|
878
641
|
id: string;
|
|
879
642
|
value: string[];
|
|
@@ -923,13 +686,36 @@ interface FilePickerProps {
|
|
|
923
686
|
}
|
|
924
687
|
|
|
925
688
|
interface FormRootProps<TData extends FieldValues> {
|
|
689
|
+
/**
|
|
690
|
+
* JSON Schema with support for errorMessages in properties.
|
|
691
|
+
* Each property can define errorMessages object with keys like:
|
|
692
|
+
* - required: Error message when field is required but missing
|
|
693
|
+
* - minLength, maxLength: Error messages for string length validation
|
|
694
|
+
* - minimum, maximum: Error messages for number range validation
|
|
695
|
+
* - format: Error message for format validation (email, date, etc.)
|
|
696
|
+
* - pattern: Error message for pattern validation
|
|
697
|
+
* - type: Error message for type validation
|
|
698
|
+
*
|
|
699
|
+
* @example
|
|
700
|
+
* {
|
|
701
|
+
* type: 'object',
|
|
702
|
+
* properties: {
|
|
703
|
+
* username: {
|
|
704
|
+
* type: 'string',
|
|
705
|
+
* minLength: 3,
|
|
706
|
+
* errorMessages: {
|
|
707
|
+
* required: 'Username is required',
|
|
708
|
+
* minLength: 'Username must be at least 3 characters'
|
|
709
|
+
* }
|
|
710
|
+
* }
|
|
711
|
+
* }
|
|
712
|
+
* }
|
|
713
|
+
*/
|
|
926
714
|
schema: CustomJSONSchema7;
|
|
927
715
|
requestUrl?: string;
|
|
928
716
|
idMap: Record<string, object>;
|
|
929
717
|
setIdMap: Dispatch<SetStateAction<Record<string, object>>>;
|
|
930
718
|
form: UseFormReturn;
|
|
931
|
-
/** Translate object for fallback text (components prefer label objects) */
|
|
932
|
-
translate: Translate;
|
|
933
719
|
children: ReactNode;
|
|
934
720
|
order?: string[];
|
|
935
721
|
ignore?: string[];
|
|
@@ -945,7 +731,6 @@ interface FormRootProps<TData extends FieldValues> {
|
|
|
945
731
|
showResetButton?: boolean;
|
|
946
732
|
showTitle?: boolean;
|
|
947
733
|
};
|
|
948
|
-
requireConfirmation?: boolean;
|
|
949
734
|
dateTimePickerLabels?: DateTimePickerLabels;
|
|
950
735
|
idPickerLabels?: IdPickerLabels;
|
|
951
736
|
enumPickerLabels?: EnumPickerLabels;
|
|
@@ -956,8 +741,6 @@ interface FormRootProps<TData extends FieldValues> {
|
|
|
956
741
|
}
|
|
957
742
|
interface CustomJSONSchema7Definition extends JSONSchema7 {
|
|
958
743
|
variant: string;
|
|
959
|
-
in_table: string;
|
|
960
|
-
column_ref: string;
|
|
961
744
|
gridColumn: string;
|
|
962
745
|
gridRow: string;
|
|
963
746
|
foreign_key: ForeignKeyProps$1;
|
|
@@ -967,7 +750,7 @@ declare const idPickerSanityCheck: (column: string, foreign_key?: {
|
|
|
967
750
|
table?: string | undefined;
|
|
968
751
|
column?: string | undefined;
|
|
969
752
|
} | undefined) => void;
|
|
970
|
-
declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form,
|
|
753
|
+
declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, customErrorRenderer, customSuccessRenderer, displayConfig, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, formButtonLabels, timePickerLabels, insideDialog, }: FormRootProps<TData>) => react_jsx_runtime.JSX.Element;
|
|
971
754
|
|
|
972
755
|
interface DefaultFormProps<TData extends FieldValues> {
|
|
973
756
|
formConfig: Omit<FormRootProps<TData>, "children">;
|
|
@@ -1000,6 +783,21 @@ type MediaLibraryBrowserPropsMultiple = MediaLibraryBrowserPropsBase & {
|
|
|
1000
783
|
type MediaLibraryBrowserProps = MediaLibraryBrowserPropsSingle | MediaLibraryBrowserPropsMultiple;
|
|
1001
784
|
declare const MediaLibraryBrowser: ({ onFetchFiles, filterImageOnly, labels, enabled, multiple, onFileSelect, selectedFile: controlledSelectedFile, onSelectedFileChange, }: MediaLibraryBrowserProps) => react_jsx_runtime.JSX.Element | null;
|
|
1002
785
|
|
|
786
|
+
interface Translate {
|
|
787
|
+
t: (key: string, options?: any) => string;
|
|
788
|
+
i18n?: any;
|
|
789
|
+
ready?: boolean;
|
|
790
|
+
}
|
|
791
|
+
interface UseFormProps {
|
|
792
|
+
preLoadedValues?: FieldValues | undefined;
|
|
793
|
+
schema?: JSONSchema7;
|
|
794
|
+
}
|
|
795
|
+
declare const useForm: ({ preLoadedValues, schema }: UseFormProps) => {
|
|
796
|
+
form: react_hook_form.UseFormReturn<FieldValues, any, undefined>;
|
|
797
|
+
idMap: Record<string, object>;
|
|
798
|
+
setIdMap: React$1.Dispatch<React$1.SetStateAction<Record<string, object>>>;
|
|
799
|
+
};
|
|
800
|
+
|
|
1003
801
|
interface CalendarDate {
|
|
1004
802
|
date: Date;
|
|
1005
803
|
selected: boolean;
|
|
@@ -1451,4 +1249,4 @@ declare module '@tanstack/react-table' {
|
|
|
1451
1249
|
}
|
|
1452
1250
|
}
|
|
1453
1251
|
|
|
1454
|
-
export { CalendarDisplay, type CalendarDisplayProps, type CalendarEvent, type CalendarProps, CardHeader, type CardHeaderProps, type CustomJSONSchema7, type CustomJSONSchema7Definition, DataDisplay, type DataDisplayProps, type DataResponse, DataTable, type DataTableDefaultState, type DataTableProps, DataTableServer, type DataTableServerProps, DatePickerContext, DatePickerInput, type DatePickerInputProps, type DatePickerLabels, type DatePickerProps, type DateTimePickerLabels, DefaultCardTitle, DefaultForm, type DefaultFormProps, DefaultTable, type DefaultTableProps, DefaultTableServer, type DefaultTableServerProps, DensityToggleButton, type DensityToggleButtonProps, type EditFilterButtonProps, EditSortingButton, type EditSortingButtonProps, type EditViewButtonProps, EmptyState, type EmptyStateProps, type EnumPickerLabels, ErrorAlert, type ErrorAlertProps, type
|
|
1252
|
+
export { CalendarDisplay, type CalendarDisplayProps, type CalendarEvent, type CalendarProps, CardHeader, type CardHeaderProps, type CustomJSONSchema7, type CustomJSONSchema7Definition, DataDisplay, type DataDisplayProps, type DataResponse, DataTable, type DataTableDefaultState, type DataTableProps, DataTableServer, type DataTableServerProps, DatePickerContext, DatePickerInput, type DatePickerInputProps, type DatePickerLabels, type DatePickerProps, type DateTimePickerLabels, DefaultCardTitle, DefaultForm, type DefaultFormProps, DefaultTable, type DefaultTableProps, DefaultTableServer, type DefaultTableServerProps, DensityToggleButton, type DensityToggleButtonProps, type EditFilterButtonProps, EditSortingButton, type EditSortingButtonProps, type EditViewButtonProps, EmptyState, type EmptyStateProps, type EnumPickerLabels, ErrorAlert, type ErrorAlertProps, type FilePickerLabels, type FilePickerMediaFile, type FilePickerProps, FilterDialog, FormBody, type FormButtonLabels, FormRoot, type FormRootProps, FormTitle, type GetColumnsConfigs, type GetDateColorProps, type GetMultiDatesProps, type GetRangeDatesProps, type GetStyleProps, type GetVariantProps, GlobalFilter, type IdPickerLabels, type LoadInitialValuesParams, type LoadInitialValuesResult, MediaLibraryBrowser, type MediaLibraryBrowserProps, PageSizeControl, type PageSizeControlProps, Pagination, type QueryParams, type RangeCalendarProps, type RangeDatePickerLabels, type RangeDatePickerProps, RecordDisplay, type RecordDisplayProps, ReloadButton, type ReloadButtonProps, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, type Result, RowCountText, SelectAllRowsToggle, type SelectAllRowsToggleProps, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableComponent, TableControls, type TableControlsProps, TableDataDisplay, type TableDataDisplayProps, TableFilter, TableFilterTags, type TableFilterTagsProps, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, type TableHeaderTexts, TableLoadingComponent, type TableLoadingComponentProps, type TableProps, type TableRendererProps, type TableRowSelectorProps, TableSelector, TableSorter, TableViewer, type TagPickerProps, TextCell, type TextCellProps, type TimePickerLabels, type Translate, type UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, type UseFormProps, type ValidationErrorType, ViewDialog, defaultRenderDisplay, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };
|