@bsol-oss/react-datatable5 12.0.0-beta.71 → 12.0.0-beta.73
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 +67 -40
- package/dist/index.d.ts +265 -14
- package/dist/index.js +356 -98
- package/dist/index.mjs +353 -99
- package/dist/types/components/Form/SchemaFormContext.d.ts +10 -5
- package/dist/types/components/Form/components/core/FormBody.d.ts +2 -1
- package/dist/types/components/Form/components/core/FormRoot.d.ts +12 -8
- package/dist/types/components/Form/components/fields/DatePicker.d.ts +1 -1
- package/dist/types/components/Form/components/fields/EnumPicker.d.ts +1 -1
- package/dist/types/components/Form/components/fields/IdPicker.d.ts +1 -1
- package/dist/types/components/Form/components/types/CustomJSONSchema7.d.ts +30 -4
- package/dist/types/components/Form/useForm.d.ts +3 -2
- package/dist/types/components/Form/utils/buildErrorMessages.d.ts +219 -0
- package/dist/types/index.d.ts +1 -0
- package/package.json +10 -2
package/README.md
CHANGED
|
@@ -22,7 +22,7 @@ The `DataTable` and `DataTableServer` utilize hook to add props.
|
|
|
22
22
|
|
|
23
23
|
```tsx
|
|
24
24
|
const datatable = useDataTable();
|
|
25
|
-
const datatableServer = useDataTableServer({ url:
|
|
25
|
+
const datatableServer = useDataTableServer({ url: '<some-url>' });
|
|
26
26
|
```
|
|
27
27
|
|
|
28
28
|
### DataTable
|
|
@@ -66,9 +66,9 @@ GET http://localhost:8081/api/g/core_people?offset=0&limit=10&sorting[0][id]=id&
|
|
|
66
66
|
<DefaultCard
|
|
67
67
|
{...{
|
|
68
68
|
row: row,
|
|
69
|
-
imageColumnId:
|
|
70
|
-
titleColumnId:
|
|
71
|
-
tagColumnId:
|
|
69
|
+
imageColumnId: 'thumbnail',
|
|
70
|
+
titleColumnId: 'title',
|
|
71
|
+
tagColumnId: 'rating',
|
|
72
72
|
tagIcon: MdStarRate,
|
|
73
73
|
}}
|
|
74
74
|
/>
|
|
@@ -111,45 +111,51 @@ The package now includes built-in JSON Schema validation using AJV (Another JSON
|
|
|
111
111
|
#### Basic Usage with Internationalization
|
|
112
112
|
|
|
113
113
|
```tsx
|
|
114
|
-
import {
|
|
114
|
+
import {
|
|
115
|
+
FormRoot,
|
|
116
|
+
FormBody,
|
|
117
|
+
validateData,
|
|
118
|
+
SupportedLocale,
|
|
119
|
+
} from '@bsol-oss/react-datatable5';
|
|
115
120
|
|
|
116
121
|
const schema = {
|
|
117
|
-
type:
|
|
118
|
-
required: [
|
|
122
|
+
type: 'object',
|
|
123
|
+
required: ['email', 'age'],
|
|
119
124
|
properties: {
|
|
120
125
|
email: {
|
|
121
|
-
type:
|
|
122
|
-
format:
|
|
126
|
+
type: 'string',
|
|
127
|
+
format: 'email',
|
|
123
128
|
},
|
|
124
129
|
age: {
|
|
125
|
-
type:
|
|
130
|
+
type: 'integer',
|
|
126
131
|
minimum: 18,
|
|
127
|
-
maximum: 120
|
|
132
|
+
maximum: 120,
|
|
128
133
|
},
|
|
129
134
|
name: {
|
|
130
|
-
type:
|
|
135
|
+
type: 'string',
|
|
131
136
|
minLength: 2,
|
|
132
|
-
maxLength: 50
|
|
133
|
-
}
|
|
134
|
-
}
|
|
137
|
+
maxLength: 50,
|
|
138
|
+
},
|
|
139
|
+
},
|
|
135
140
|
};
|
|
136
141
|
|
|
137
142
|
// Use Traditional Chinese (Hong Kong) for validation errors
|
|
138
|
-
<FormRoot
|
|
139
|
-
schema={schema}
|
|
143
|
+
<FormRoot
|
|
144
|
+
schema={schema}
|
|
140
145
|
validationLocale="zh-HK"
|
|
141
146
|
/* other props */
|
|
142
147
|
>
|
|
143
148
|
<FormBody />
|
|
144
|
-
</FormRoot
|
|
149
|
+
</FormRoot>;
|
|
145
150
|
```
|
|
146
151
|
|
|
147
152
|
#### Language-specific Examples
|
|
148
153
|
|
|
149
154
|
**Traditional Chinese (Hong Kong):**
|
|
155
|
+
|
|
150
156
|
```tsx
|
|
151
|
-
<FormRoot
|
|
152
|
-
schema={schema}
|
|
157
|
+
<FormRoot
|
|
158
|
+
schema={schema}
|
|
153
159
|
validationLocale="zh-HK"
|
|
154
160
|
/* other props */
|
|
155
161
|
>
|
|
@@ -158,9 +164,10 @@ const schema = {
|
|
|
158
164
|
```
|
|
159
165
|
|
|
160
166
|
**Traditional Chinese (Taiwan):**
|
|
167
|
+
|
|
161
168
|
```tsx
|
|
162
|
-
<FormRoot
|
|
163
|
-
schema={schema}
|
|
169
|
+
<FormRoot
|
|
170
|
+
schema={schema}
|
|
164
171
|
validationLocale="zh-TW"
|
|
165
172
|
/* other props */
|
|
166
173
|
>
|
|
@@ -169,9 +176,10 @@ const schema = {
|
|
|
169
176
|
```
|
|
170
177
|
|
|
171
178
|
**Simplified Chinese:**
|
|
179
|
+
|
|
172
180
|
```tsx
|
|
173
|
-
<FormRoot
|
|
174
|
-
schema={schema}
|
|
181
|
+
<FormRoot
|
|
182
|
+
schema={schema}
|
|
175
183
|
validationLocale="zh-CN"
|
|
176
184
|
/* other props */
|
|
177
185
|
>
|
|
@@ -184,20 +192,27 @@ const schema = {
|
|
|
184
192
|
You can also use the validation utilities directly with language support:
|
|
185
193
|
|
|
186
194
|
```tsx
|
|
187
|
-
import {
|
|
195
|
+
import {
|
|
196
|
+
validateData,
|
|
197
|
+
ValidationResult,
|
|
198
|
+
SupportedLocale,
|
|
199
|
+
} from '@bsol-oss/react-datatable5';
|
|
188
200
|
|
|
189
201
|
// Validate with Traditional Chinese (Hong Kong) error messages
|
|
190
|
-
const result: ValidationResult = validateData(formData, schema, {
|
|
191
|
-
locale: 'zh-HK'
|
|
202
|
+
const result: ValidationResult = validateData(formData, schema, {
|
|
203
|
+
locale: 'zh-HK',
|
|
192
204
|
});
|
|
193
205
|
|
|
194
206
|
if (!result.isValid) {
|
|
195
|
-
console.log(
|
|
207
|
+
console.log('驗證錯誤:', result.errors);
|
|
196
208
|
// Error messages will be in Traditional Chinese
|
|
197
209
|
}
|
|
198
210
|
|
|
199
211
|
// Check supported locales
|
|
200
|
-
import {
|
|
212
|
+
import {
|
|
213
|
+
getSupportedLocales,
|
|
214
|
+
isLocaleSupported,
|
|
215
|
+
} from '@bsol-oss/react-datatable5';
|
|
201
216
|
|
|
202
217
|
const supportedLocales = getSupportedLocales(); // ['en', 'zh-HK', 'zh-TW', 'zh-CN', 'zh']
|
|
203
218
|
const isSupported = isLocaleSupported('zh-HK'); // true
|
|
@@ -207,34 +222,37 @@ const isSupported = isLocaleSupported('zh-HK'); // true
|
|
|
207
222
|
|
|
208
223
|
```tsx
|
|
209
224
|
interface ValidationError {
|
|
210
|
-
field: string;
|
|
211
|
-
message: string;
|
|
212
|
-
value?: unknown;
|
|
213
|
-
schemaPath?: string;
|
|
225
|
+
field: string; // The field that failed validation
|
|
226
|
+
message: string; // User-friendly error message (localized)
|
|
227
|
+
value?: unknown; // The current value that failed
|
|
228
|
+
schemaPath?: string; // JSON Schema path for debugging
|
|
214
229
|
}
|
|
215
230
|
```
|
|
216
231
|
|
|
217
232
|
#### Dynamic Language Switching
|
|
218
233
|
|
|
219
234
|
```tsx
|
|
220
|
-
import { SupportedLocale } from
|
|
235
|
+
import { SupportedLocale } from '@bsol-oss/react-datatable5';
|
|
221
236
|
|
|
222
237
|
const MyForm = () => {
|
|
223
238
|
const [locale, setLocale] = useState<SupportedLocale>('zh-HK');
|
|
224
|
-
|
|
239
|
+
|
|
225
240
|
return (
|
|
226
241
|
<div>
|
|
227
242
|
{/* Language selector */}
|
|
228
|
-
<select
|
|
243
|
+
<select
|
|
244
|
+
value={locale}
|
|
245
|
+
onChange={(e) => setLocale(e.target.value as SupportedLocale)}
|
|
246
|
+
>
|
|
229
247
|
<option value="en">English</option>
|
|
230
248
|
<option value="zh-HK">繁體中文(香港)</option>
|
|
231
249
|
<option value="zh-TW">繁體中文(台灣)</option>
|
|
232
250
|
<option value="zh-CN">简体中文</option>
|
|
233
251
|
</select>
|
|
234
|
-
|
|
252
|
+
|
|
235
253
|
{/* Form with dynamic locale */}
|
|
236
|
-
<FormRoot
|
|
237
|
-
schema={schema}
|
|
254
|
+
<FormRoot
|
|
255
|
+
schema={schema}
|
|
238
256
|
validationLocale={locale}
|
|
239
257
|
/* other props */
|
|
240
258
|
>
|
|
@@ -248,16 +266,19 @@ const MyForm = () => {
|
|
|
248
266
|
#### Example Validation Messages
|
|
249
267
|
|
|
250
268
|
**English:**
|
|
269
|
+
|
|
251
270
|
- "email is required"
|
|
252
271
|
- "Invalid email format"
|
|
253
272
|
- "Must be at least 18"
|
|
254
273
|
|
|
255
274
|
**Traditional Chinese (Hong Kong/Taiwan):**
|
|
275
|
+
|
|
256
276
|
- "email 為必填"
|
|
257
277
|
- "無效的 email 格式"
|
|
258
278
|
- "必須至少為 18"
|
|
259
279
|
|
|
260
280
|
**Simplified Chinese:**
|
|
281
|
+
|
|
261
282
|
- "email 为必填"
|
|
262
283
|
- "无效的 email 格式"
|
|
263
284
|
- "必须至少为 18"
|
|
@@ -281,4 +302,10 @@ For more details of props and examples, please review the stories in storybook p
|
|
|
281
302
|
```
|
|
282
303
|
npm install
|
|
283
304
|
npm run storybook
|
|
284
|
-
```
|
|
305
|
+
```
|
|
306
|
+
|
|
307
|
+
## deployment
|
|
308
|
+
|
|
309
|
+
```
|
|
310
|
+
npm version prerelease --preid=beta
|
|
311
|
+
```
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { Row, RowData, OnChangeFn, Updater, FilterFn, ColumnDef, RowSelectionState, ColumnOrderState, ColumnFiltersState, PaginationState, SortingState, VisibilityState, Table as Table$1, Column } from '@tanstack/react-table';
|
|
3
|
-
import * as
|
|
4
|
-
import
|
|
3
|
+
import * as react from 'react';
|
|
4
|
+
import react__default, { ReactNode, Dispatch, SetStateAction } from 'react';
|
|
5
5
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
6
6
|
import { ImageProps, GridProps, TableRootProps, TableHeaderProps as TableHeaderProps$1, TableRowProps, BoxProps, FlexProps, CardBodyProps, TextProps } from '@chakra-ui/react';
|
|
7
7
|
import { IconType } from 'react-icons';
|
|
@@ -17,7 +17,7 @@ import { UseFormReturn, FieldValues, SubmitHandler } from 'react-hook-form';
|
|
|
17
17
|
import { RenderProps, Props } from '@bsol-oss/dayzed-react19';
|
|
18
18
|
|
|
19
19
|
interface DensityToggleButtonProps {
|
|
20
|
-
icon?:
|
|
20
|
+
icon?: react__default.ReactElement;
|
|
21
21
|
text?: string;
|
|
22
22
|
}
|
|
23
23
|
declare const DensityToggleButton: ({ text, icon, }: DensityToggleButtonProps) => react_jsx_runtime.JSX.Element;
|
|
@@ -50,7 +50,7 @@ declare const ResetSortingButton: () => react_jsx_runtime.JSX.Element;
|
|
|
50
50
|
declare const RowCountText: () => react_jsx_runtime.JSX.Element;
|
|
51
51
|
|
|
52
52
|
interface EditViewButtonProps {
|
|
53
|
-
icon?:
|
|
53
|
+
icon?: react__default.ReactElement;
|
|
54
54
|
}
|
|
55
55
|
declare const ViewDialog: ({ icon }: EditViewButtonProps) => react_jsx_runtime.JSX.Element;
|
|
56
56
|
|
|
@@ -386,7 +386,7 @@ interface TableProps extends TableRootProps {
|
|
|
386
386
|
canResize?: boolean;
|
|
387
387
|
children: ReactNode;
|
|
388
388
|
}
|
|
389
|
-
declare const Table: ({ children, emptyComponent, canResize, ...props }: TableProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean |
|
|
389
|
+
declare const Table: ({ children, emptyComponent, canResize, ...props }: TableProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null;
|
|
390
390
|
|
|
391
391
|
interface TableBodyProps {
|
|
392
392
|
pinnedBgColor?: {
|
|
@@ -500,9 +500,9 @@ declare const DefaultCardTitle: () => react_jsx_runtime.JSX.Element;
|
|
|
500
500
|
declare const TableCards: <TData>({ isSelectable, showDisplayNameOnly, renderTitle, cardBodyProps, }: TableCardsProps<TData>) => react_jsx_runtime.JSX.Element;
|
|
501
501
|
|
|
502
502
|
interface TableRendererProps<TData> {
|
|
503
|
-
render: (render: Table$1<TData>) =>
|
|
503
|
+
render: (render: Table$1<TData>) => react__default.ReactElement;
|
|
504
504
|
}
|
|
505
|
-
declare const TableComponent: <TData>({ render, }: TableRendererProps<TData>) =>
|
|
505
|
+
declare const TableComponent: <TData>({ render, }: TableRendererProps<TData>) => react__default.ReactElement<unknown, string | react__default.JSXElementConstructor<any>>;
|
|
506
506
|
|
|
507
507
|
declare const TableFilter: () => react_jsx_runtime.JSX.Element;
|
|
508
508
|
|
|
@@ -573,6 +573,32 @@ interface ForeignKeyProps {
|
|
|
573
573
|
customQueryFn?: CustomQueryFn;
|
|
574
574
|
}
|
|
575
575
|
|
|
576
|
+
interface DateTimePickerLabels {
|
|
577
|
+
monthNamesShort?: string[];
|
|
578
|
+
weekdayNamesShort?: string[];
|
|
579
|
+
backButtonLabel?: string;
|
|
580
|
+
forwardButtonLabel?: string;
|
|
581
|
+
}
|
|
582
|
+
interface IdPickerLabels {
|
|
583
|
+
undefined?: string;
|
|
584
|
+
addMore?: string;
|
|
585
|
+
typeToSearch?: string;
|
|
586
|
+
total?: string;
|
|
587
|
+
showing?: string;
|
|
588
|
+
perPage?: string;
|
|
589
|
+
emptySearchResult?: string;
|
|
590
|
+
initialResults?: string;
|
|
591
|
+
}
|
|
592
|
+
interface EnumPickerLabels {
|
|
593
|
+
undefined?: string;
|
|
594
|
+
addMore?: string;
|
|
595
|
+
typeToSearch?: string;
|
|
596
|
+
total?: string;
|
|
597
|
+
showing?: string;
|
|
598
|
+
perPage?: string;
|
|
599
|
+
emptySearchResult?: string;
|
|
600
|
+
initialResults?: string;
|
|
601
|
+
}
|
|
576
602
|
interface CustomJSONSchema7 extends JSONSchema7 {
|
|
577
603
|
gridColumn?: string;
|
|
578
604
|
gridRow?: string;
|
|
@@ -620,11 +646,15 @@ interface FormRootProps<TData extends FieldValues> {
|
|
|
620
646
|
requestOptions?: AxiosRequestConfig;
|
|
621
647
|
getUpdatedData?: () => TData | Promise<TData> | void;
|
|
622
648
|
customErrorRenderer?: (error: unknown) => ReactNode;
|
|
649
|
+
customSuccessRenderer?: (resetHandler: () => void | Promise<void>) => ReactNode;
|
|
623
650
|
displayConfig?: {
|
|
624
651
|
showSubmitButton?: boolean;
|
|
625
652
|
showResetButton?: boolean;
|
|
626
653
|
showTitle?: boolean;
|
|
627
654
|
};
|
|
655
|
+
dateTimePickerLabels?: DateTimePickerLabels;
|
|
656
|
+
idPickerLabels?: IdPickerLabels;
|
|
657
|
+
enumPickerLabels?: EnumPickerLabels;
|
|
628
658
|
}
|
|
629
659
|
interface CustomJSONSchema7Definition extends JSONSchema7 {
|
|
630
660
|
variant: string;
|
|
@@ -641,7 +671,7 @@ declare const idPickerSanityCheck: (column: string, foreign_key?: {
|
|
|
641
671
|
column?: string | undefined;
|
|
642
672
|
display_column?: string | undefined;
|
|
643
673
|
} | undefined) => void;
|
|
644
|
-
declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, customErrorRenderer, displayConfig, }: FormRootProps<TData>) => react_jsx_runtime.JSX.Element;
|
|
674
|
+
declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, customErrorRenderer, customSuccessRenderer, displayConfig, dateTimePickerLabels, idPickerLabels, enumPickerLabels, }: FormRootProps<TData>) => react_jsx_runtime.JSX.Element;
|
|
645
675
|
|
|
646
676
|
interface DefaultFormProps<TData extends FieldValues> {
|
|
647
677
|
formConfig: Omit<FormRootProps<TData>, "children">;
|
|
@@ -651,19 +681,240 @@ declare const DefaultForm: <TData extends FieldValues>({ formConfig, }: DefaultF
|
|
|
651
681
|
|
|
652
682
|
declare const FormTitle: () => react_jsx_runtime.JSX.Element;
|
|
653
683
|
|
|
654
|
-
declare const FormBody: <TData extends object>() => react_jsx_runtime.JSX.Element;
|
|
684
|
+
declare const FormBody: <TData extends object>() => string | number | bigint | boolean | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
|
|
655
685
|
|
|
656
686
|
interface UseFormProps {
|
|
657
687
|
preLoadedValues?: FieldValues | undefined;
|
|
658
688
|
keyPrefix?: string;
|
|
689
|
+
namespace?: string;
|
|
659
690
|
}
|
|
660
|
-
declare const useForm: ({ preLoadedValues, keyPrefix }: UseFormProps) => {
|
|
691
|
+
declare const useForm: ({ preLoadedValues, keyPrefix, namespace }: UseFormProps) => {
|
|
661
692
|
form: react_hook_form.UseFormReturn<FieldValues, any, undefined>;
|
|
662
693
|
idMap: Record<string, object>;
|
|
663
|
-
setIdMap:
|
|
664
|
-
translate: react_i18next.UseTranslationResponse<
|
|
694
|
+
setIdMap: react.Dispatch<react.SetStateAction<Record<string, object>>>;
|
|
695
|
+
translate: react_i18next.UseTranslationResponse<string, string>;
|
|
665
696
|
};
|
|
666
697
|
|
|
698
|
+
/**
|
|
699
|
+
* Type definitions for error message configuration
|
|
700
|
+
*/
|
|
701
|
+
/**
|
|
702
|
+
* Common validation error types that can be customized
|
|
703
|
+
*/
|
|
704
|
+
type ValidationErrorType = "minLength" | "maxLength" | "pattern" | "minimum" | "maximum" | "multipleOf" | "format" | "type" | "enum";
|
|
705
|
+
/**
|
|
706
|
+
* Configuration for field-specific validation errors
|
|
707
|
+
*/
|
|
708
|
+
type FieldErrorConfig = Partial<Record<ValidationErrorType, string>>;
|
|
709
|
+
/**
|
|
710
|
+
* Configuration for building error messages
|
|
711
|
+
*/
|
|
712
|
+
interface ErrorMessageConfig {
|
|
713
|
+
/**
|
|
714
|
+
* Required field error messages
|
|
715
|
+
* Maps field names to their required error messages
|
|
716
|
+
* Supports both plain strings and i18n translation keys
|
|
717
|
+
*
|
|
718
|
+
* @example
|
|
719
|
+
* ```typescript
|
|
720
|
+
* required: {
|
|
721
|
+
* username: "Username is required", // plain string
|
|
722
|
+
* email: "user.email.field_required" // i18n key
|
|
723
|
+
* }
|
|
724
|
+
* ```
|
|
725
|
+
*/
|
|
726
|
+
required?: Record<string, string>;
|
|
727
|
+
/**
|
|
728
|
+
* Field-specific validation error messages
|
|
729
|
+
* Maps field names to their validation error configurations
|
|
730
|
+
*
|
|
731
|
+
* @example
|
|
732
|
+
* ```typescript
|
|
733
|
+
* properties: {
|
|
734
|
+
* username: {
|
|
735
|
+
* minLength: "Username must be at least 3 characters",
|
|
736
|
+
* pattern: "Username can only contain letters and numbers"
|
|
737
|
+
* },
|
|
738
|
+
* age: {
|
|
739
|
+
* minimum: "Age must be at least 18",
|
|
740
|
+
* maximum: "Age cannot exceed 120"
|
|
741
|
+
* }
|
|
742
|
+
* }
|
|
743
|
+
* ```
|
|
744
|
+
*/
|
|
745
|
+
properties?: Record<string, FieldErrorConfig>;
|
|
746
|
+
/**
|
|
747
|
+
* Global fallback error messages for validation types
|
|
748
|
+
* These are used when no field-specific message is provided
|
|
749
|
+
*
|
|
750
|
+
* @example
|
|
751
|
+
* ```typescript
|
|
752
|
+
* {
|
|
753
|
+
* minLength: "This field is too short",
|
|
754
|
+
* minimum: "Value is too small"
|
|
755
|
+
* }
|
|
756
|
+
* ```
|
|
757
|
+
*/
|
|
758
|
+
[key: string]: any;
|
|
759
|
+
}
|
|
760
|
+
/**
|
|
761
|
+
* Result of buildErrorMessages that follows ajv-errors format
|
|
762
|
+
*/
|
|
763
|
+
interface ErrorMessageResult {
|
|
764
|
+
required?: Record<string, string>;
|
|
765
|
+
properties?: Record<string, FieldErrorConfig>;
|
|
766
|
+
[key: string]: any;
|
|
767
|
+
}
|
|
768
|
+
/**
|
|
769
|
+
* Schema-level error message builder
|
|
770
|
+
*
|
|
771
|
+
* Builds a complete errorMessage object compatible with ajv-errors plugin.
|
|
772
|
+
* Supports both i18n translation keys and plain string messages.
|
|
773
|
+
*
|
|
774
|
+
* @param config - Error message configuration
|
|
775
|
+
* @returns Complete errorMessage object for JSON Schema
|
|
776
|
+
*
|
|
777
|
+
* @example
|
|
778
|
+
* ```typescript
|
|
779
|
+
* // Simple required field errors
|
|
780
|
+
* const errorMessage = buildErrorMessages({
|
|
781
|
+
* required: {
|
|
782
|
+
* username: "Username is required",
|
|
783
|
+
* email: "user.email.field_required" // i18n key
|
|
784
|
+
* }
|
|
785
|
+
* });
|
|
786
|
+
*
|
|
787
|
+
* // With validation rules
|
|
788
|
+
* const errorMessage = buildErrorMessages({
|
|
789
|
+
* required: {
|
|
790
|
+
* password: "Password is required"
|
|
791
|
+
* },
|
|
792
|
+
* properties: {
|
|
793
|
+
* password: {
|
|
794
|
+
* minLength: "Password must be at least 8 characters",
|
|
795
|
+
* pattern: "Password must contain letters and numbers"
|
|
796
|
+
* },
|
|
797
|
+
* age: {
|
|
798
|
+
* minimum: "Must be 18 or older",
|
|
799
|
+
* maximum: "Must be under 120"
|
|
800
|
+
* }
|
|
801
|
+
* }
|
|
802
|
+
* });
|
|
803
|
+
*
|
|
804
|
+
* // With global fallbacks
|
|
805
|
+
* const errorMessage = buildErrorMessages({
|
|
806
|
+
* required: {
|
|
807
|
+
* email: "Email is required"
|
|
808
|
+
* },
|
|
809
|
+
* minLength: "This field is too short", // applies to all fields
|
|
810
|
+
* minimum: "Value is too small"
|
|
811
|
+
* });
|
|
812
|
+
* ```
|
|
813
|
+
*/
|
|
814
|
+
declare const buildErrorMessages: (config: ErrorMessageConfig) => ErrorMessageResult;
|
|
815
|
+
/**
|
|
816
|
+
* Helper function to build required field errors
|
|
817
|
+
*
|
|
818
|
+
* Simplifies creating required field error messages, especially useful
|
|
819
|
+
* for generating i18n translation keys following a pattern.
|
|
820
|
+
*
|
|
821
|
+
* @param fields - Array of required field names
|
|
822
|
+
* @param messageOrGenerator - Either a string template or function to generate messages
|
|
823
|
+
* @returns Required field error configuration
|
|
824
|
+
*
|
|
825
|
+
* @example
|
|
826
|
+
* ```typescript
|
|
827
|
+
* // Plain string messages
|
|
828
|
+
* const required = buildRequiredErrors(
|
|
829
|
+
* ["username", "email", "password"],
|
|
830
|
+
* (field) => `${field} is required`
|
|
831
|
+
* );
|
|
832
|
+
* // Result: { username: "username is required", email: "email is required", ... }
|
|
833
|
+
*
|
|
834
|
+
* // i18n translation keys
|
|
835
|
+
* const required = buildRequiredErrors(
|
|
836
|
+
* ["username", "email"],
|
|
837
|
+
* (field) => `user.${field}.field_required`
|
|
838
|
+
* );
|
|
839
|
+
* // Result: { username: "user.username.field_required", email: "user.email.field_required" }
|
|
840
|
+
*
|
|
841
|
+
* // Same message for all fields
|
|
842
|
+
* const required = buildRequiredErrors(
|
|
843
|
+
* ["username", "email"],
|
|
844
|
+
* "This field is required"
|
|
845
|
+
* );
|
|
846
|
+
* // Result: { username: "This field is required", email: "This field is required" }
|
|
847
|
+
*
|
|
848
|
+
* // With keyPrefix for i18n
|
|
849
|
+
* const required = buildRequiredErrors(
|
|
850
|
+
* ["username", "email"],
|
|
851
|
+
* (field) => `${field}.field_required`,
|
|
852
|
+
* "user"
|
|
853
|
+
* );
|
|
854
|
+
* // Result: { username: "user.username.field_required", email: "user.email.field_required" }
|
|
855
|
+
* ```
|
|
856
|
+
*/
|
|
857
|
+
declare const buildRequiredErrors: (fields: string[], messageOrGenerator: string | ((field: string) => string), keyPrefix?: string) => Record<string, string>;
|
|
858
|
+
/**
|
|
859
|
+
* Helper function to build field-specific validation errors
|
|
860
|
+
*
|
|
861
|
+
* Creates property-specific error messages for multiple fields at once.
|
|
862
|
+
*
|
|
863
|
+
* @param config - Maps field names to their validation error configurations
|
|
864
|
+
* @returns Properties error configuration
|
|
865
|
+
*
|
|
866
|
+
* @example
|
|
867
|
+
* ```typescript
|
|
868
|
+
* const properties = buildFieldErrors({
|
|
869
|
+
* username: {
|
|
870
|
+
* minLength: "Username must be at least 3 characters",
|
|
871
|
+
* pattern: "Username can only contain letters and numbers"
|
|
872
|
+
* },
|
|
873
|
+
* age: {
|
|
874
|
+
* minimum: "Must be 18 or older",
|
|
875
|
+
* maximum: "Must be under 120"
|
|
876
|
+
* },
|
|
877
|
+
* email: {
|
|
878
|
+
* format: "Please enter a valid email address"
|
|
879
|
+
* }
|
|
880
|
+
* });
|
|
881
|
+
* ```
|
|
882
|
+
*/
|
|
883
|
+
declare const buildFieldErrors: (config: Record<string, FieldErrorConfig>) => Record<string, FieldErrorConfig>;
|
|
884
|
+
/**
|
|
885
|
+
* Helper function to create a complete error message configuration in one call
|
|
886
|
+
*
|
|
887
|
+
* Convenient wrapper that combines required and validation errors.
|
|
888
|
+
*
|
|
889
|
+
* @param required - Required field error messages
|
|
890
|
+
* @param properties - Field-specific validation error messages
|
|
891
|
+
* @param globalFallbacks - Global fallback error messages
|
|
892
|
+
* @returns Complete error message configuration
|
|
893
|
+
*
|
|
894
|
+
* @example
|
|
895
|
+
* ```typescript
|
|
896
|
+
* const errorMessage = createErrorMessage(
|
|
897
|
+
* {
|
|
898
|
+
* username: "Username is required",
|
|
899
|
+
* email: "Email is required"
|
|
900
|
+
* },
|
|
901
|
+
* {
|
|
902
|
+
* username: {
|
|
903
|
+
* minLength: "Username must be at least 3 characters"
|
|
904
|
+
* },
|
|
905
|
+
* email: {
|
|
906
|
+
* format: "Please enter a valid email"
|
|
907
|
+
* }
|
|
908
|
+
* },
|
|
909
|
+
* {
|
|
910
|
+
* minLength: "This field is too short",
|
|
911
|
+
* format: "Invalid format"
|
|
912
|
+
* }
|
|
913
|
+
* );
|
|
914
|
+
* ```
|
|
915
|
+
*/
|
|
916
|
+
declare const createErrorMessage: (required?: Record<string, string>, properties?: Record<string, FieldErrorConfig>, globalFallbacks?: Partial<Record<ValidationErrorType, string>>) => ErrorMessageResult;
|
|
917
|
+
|
|
667
918
|
interface CalendarProps extends RenderProps {
|
|
668
919
|
firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
|
669
920
|
}
|
|
@@ -694,7 +945,7 @@ interface DatePickerProps extends Props {
|
|
|
694
945
|
backButtonLabel?: string;
|
|
695
946
|
forwardButtonLabel?: string;
|
|
696
947
|
};
|
|
697
|
-
render?: (dayzedData: any) =>
|
|
948
|
+
render?: (dayzedData: any) => react__default.ReactNode;
|
|
698
949
|
}
|
|
699
950
|
interface DatePickerLabels {
|
|
700
951
|
monthNamesShort: string[];
|
|
@@ -811,4 +1062,4 @@ declare module "@tanstack/react-table" {
|
|
|
811
1062
|
}
|
|
812
1063
|
}
|
|
813
1064
|
|
|
814
|
-
export { type CalendarProps, CardHeader, type CardHeaderProps, type CustomJSONSchema7, type CustomJSONSchema7Definition, DataDisplay, type DataDisplayProps, type DataResponse, DataTable, type DataTableDefaultState, type DataTableProps, DataTableServer, type DataTableServerProps, type DatePickerLabels, type DatePickerProps, DefaultCardTitle, DefaultForm, type DefaultFormProps, DefaultTable, type DefaultTableProps, DensityToggleButton, type DensityToggleButtonProps, type EditFilterButtonProps, EditSortingButton, type EditSortingButtonProps, type EditViewButtonProps, EmptyState, type EmptyStateProps, ErrorAlert, type ErrorAlertProps, FilterDialog, FormBody, FormRoot, type FormRootProps, FormTitle, type GetColumnsConfigs, type GetDateColorProps, type GetMultiDatesProps, type GetRangeDatesProps, type GetStyleProps, type GetVariantProps, GlobalFilter, PageSizeControl, type PageSizeControlProps, Pagination, type QueryParams, type RangeCalendarProps, type RangeDatePickerProps, RecordDisplay, type RecordDisplayProps, ReloadButton, type ReloadButtonProps, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, type Result, RowCountText, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableComponent, TableControls, type TableControlsProps, TableDataDisplay, type TableDataDisplayProps, TableFilter, TableFilterTags, 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 UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, type UseFormProps, ViewDialog, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };
|
|
1065
|
+
export { type CalendarProps, CardHeader, type CardHeaderProps, type CustomJSONSchema7, type CustomJSONSchema7Definition, DataDisplay, type DataDisplayProps, type DataResponse, DataTable, type DataTableDefaultState, type DataTableProps, DataTableServer, type DataTableServerProps, type DatePickerLabels, type DatePickerProps, type DateTimePickerLabels, DefaultCardTitle, DefaultForm, type DefaultFormProps, DefaultTable, type DefaultTableProps, DensityToggleButton, type DensityToggleButtonProps, type EditFilterButtonProps, EditSortingButton, type EditSortingButtonProps, type EditViewButtonProps, EmptyState, type EmptyStateProps, type EnumPickerLabels, ErrorAlert, type ErrorAlertProps, type ErrorMessageConfig, type ErrorMessageResult, type FieldErrorConfig, FilterDialog, FormBody, FormRoot, type FormRootProps, FormTitle, type GetColumnsConfigs, type GetDateColorProps, type GetMultiDatesProps, type GetRangeDatesProps, type GetStyleProps, type GetVariantProps, GlobalFilter, type IdPickerLabels, PageSizeControl, type PageSizeControlProps, Pagination, type QueryParams, type RangeCalendarProps, type RangeDatePickerProps, RecordDisplay, type RecordDisplayProps, ReloadButton, type ReloadButtonProps, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, type Result, RowCountText, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableComponent, TableControls, type TableControlsProps, TableDataDisplay, type TableDataDisplayProps, TableFilter, TableFilterTags, 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 UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, type UseFormProps, type ValidationErrorType, ViewDialog, buildErrorMessages, buildFieldErrors, buildRequiredErrors, createErrorMessage, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };
|