@bsol-oss/react-datatable5 12.0.0-beta.70 → 12.0.0-beta.72

package/dist/types/components/Form/SchemaFormContext.d.ts

@@ -1,8 +1,9 @@
-import { AxiosRequestConfig } from "axios";
-import { JSONSchema7 } from "json-schema";
-import { Dispatch, ReactNode, SetStateAction } from "react";
-import { FieldValues } from "react-hook-form";
-import { UseTranslationResponse } from "react-i18next";
+import { AxiosRequestConfig } from 'axios';
+import { JSONSchema7 } from 'json-schema';
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+import { FieldValues } from 'react-hook-form';
+import { UseTranslationResponse } from 'react-i18next';
+import { DateTimePickerLabels, IdPickerLabels } from './components/types/CustomJSONSchema7';
 export interface SchemaFormContext<TData extends FieldValues> {
     schema: JSONSchema7;
     serverUrl: string;
@@ -30,11 +31,14 @@ export interface SchemaFormContext<TData extends FieldValues> {
     setError: Dispatch<SetStateAction<unknown>>;
     getUpdatedData: () => TData | Promise<TData>;
     customErrorRenderer?: (error: unknown) => ReactNode;
+    customSuccessRenderer?: (resetHandler: () => void | Promise<void>) => ReactNode;
     timezone?: string;
     displayConfig: {
         showSubmitButton?: boolean;
         showResetButton?: boolean;
         showTitle?: boolean;
     };
+    dateTimePickerLabels?: DateTimePickerLabels;
+    idPickerLabels?: IdPickerLabels;
 }
 export declare const SchemaFormContext: import("react").Context<SchemaFormContext<unknown>>;

package/dist/types/components/Form/components/core/FormBody.d.ts

@@ -1 +1,2 @@
-export declare const FormBody: <TData extends object>() => import("react/jsx-runtime").JSX.Element;
+/// <reference types="react" />
+export declare const FormBody: <TData extends object>() => string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;

package/dist/types/components/Form/components/core/FormRoot.d.ts

@@ -1,10 +1,10 @@
-import { ForeignKeyProps } from "@/components/Form/components/fields/StringInputField";
-import { AxiosRequestConfig } from "axios";
-import { JSONSchema7 } from "json-schema";
-import { Dispatch, ReactNode, SetStateAction } from "react";
-import { FieldValues, SubmitHandler, UseFormReturn } from "react-hook-form";
-import { UseTranslationResponse } from "react-i18next";
-import { CustomJSONSchema7 } from "../types/CustomJSONSchema7";
+import { ForeignKeyProps } from '@/components/Form/components/fields/StringInputField';
+import { AxiosRequestConfig } from 'axios';
+import { JSONSchema7 } from 'json-schema';
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+import { FieldValues, SubmitHandler, UseFormReturn } from 'react-hook-form';
+import { UseTranslationResponse } from 'react-i18next';
+import { CustomJSONSchema7, DateTimePickerLabels, IdPickerLabels } from '../types/CustomJSONSchema7';
 export interface FormRootProps<TData extends FieldValues> {
     schema: CustomJSONSchema7;
     serverUrl: string;
@@ -22,11 +22,14 @@ export interface FormRootProps<TData extends FieldValues> {
     requestOptions?: AxiosRequestConfig;
     getUpdatedData?: () => TData | Promise<TData> | void;
     customErrorRenderer?: (error: unknown) => ReactNode;
+    customSuccessRenderer?: (resetHandler: () => void | Promise<void>) => ReactNode;
     displayConfig?: {
         showSubmitButton?: boolean;
         showResetButton?: boolean;
         showTitle?: boolean;
     };
+    dateTimePickerLabels?: DateTimePickerLabels;
+    idPickerLabels?: IdPickerLabels;
 }
 export interface CustomJSONSchema7Definition extends JSONSchema7 {
     variant: string;
@@ -43,4 +46,4 @@ export declare const idPickerSanityCheck: (column: string, foreign_key?: {
     column?: string | undefined;
     display_column?: string | undefined;
 } | undefined) => void;
-export declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, customErrorRenderer, displayConfig, }: FormRootProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export 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, }: FormRootProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Form/components/fields/IdPicker.d.ts

@@ -1,4 +1,4 @@
-import { CustomJSONSchema7 } from "../types/CustomJSONSchema7";
+import { CustomJSONSchema7 } from '../types/CustomJSONSchema7';
 export interface IdPickerProps {
     column: string;
     schema: CustomJSONSchema7;

package/dist/types/components/Form/components/types/CustomJSONSchema7.d.ts

@@ -1,7 +1,23 @@
-import { JSONSchema7 } from "json-schema";
-import { ReactNode } from "react";
-import { ForeignKeyProps } from "../fields/StringInputField";
-import { UseFormReturn } from "react-hook-form";
+import { JSONSchema7 } from 'json-schema';
+import { ReactNode } from 'react';
+import { ForeignKeyProps } from '../fields/StringInputField';
+import { UseFormReturn } from 'react-hook-form';
+export interface DateTimePickerLabels {
+    monthNamesShort?: string[];
+    weekdayNamesShort?: string[];
+    backButtonLabel?: string;
+    forwardButtonLabel?: string;
+}
+export interface IdPickerLabels {
+    undefined?: string;
+    addMore?: string;
+    typeToSearch?: string;
+    total?: string;
+    showing?: string;
+    perPage?: string;
+    emptySearchResult?: string;
+    initialResults?: string;
+}
 export interface CustomJSONSchema7 extends JSONSchema7 {
     gridColumn?: string;
     gridRow?: string;

package/dist/types/components/Form/useForm.d.ts

@@ -3,10 +3,11 @@ import { FieldValues } from "react-hook-form";
 export interface UseFormProps {
     preLoadedValues?: FieldValues | undefined;
     keyPrefix?: string;
+    namespace?: string;
 }
-export declare const useForm: ({ preLoadedValues, keyPrefix }: UseFormProps) => {
+export declare const useForm: ({ preLoadedValues, keyPrefix, namespace }: UseFormProps) => {
     form: import("react-hook-form").UseFormReturn<FieldValues, any, undefined>;
     idMap: Record<string, object>;
     setIdMap: import("react").Dispatch<import("react").SetStateAction<Record<string, object>>>;
-    translate: import("react-i18next").UseTranslationResponse<"", string>;
+    translate: import("react-i18next").UseTranslationResponse<string, string>;
 };

package/dist/types/components/Form/utils/buildErrorMessages.d.ts

@@ -0,0 +1,219 @@
+/**
+ * Type definitions for error message configuration
+ */
+/**
+ * Common validation error types that can be customized
+ */
+export type ValidationErrorType = "minLength" | "maxLength" | "pattern" | "minimum" | "maximum" | "multipleOf" | "format" | "type" | "enum";
+/**
+ * Configuration for field-specific validation errors
+ */
+export type FieldErrorConfig = Partial<Record<ValidationErrorType, string>>;
+/**
+ * Configuration for building error messages
+ */
+export interface ErrorMessageConfig {
+    /**
+     * Required field error messages
+     * Maps field names to their required error messages
+     * Supports both plain strings and i18n translation keys
+     *
+     * @example
+     * ```typescript
+     * required: {
+     *   username: "Username is required", // plain string
+     *   email: "user.email.field_required" // i18n key
+     * }
+     * ```
+     */
+    required?: Record<string, string>;
+    /**
+     * Field-specific validation error messages
+     * Maps field names to their validation error configurations
+     *
+     * @example
+     * ```typescript
+     * properties: {
+     *   username: {
+     *     minLength: "Username must be at least 3 characters",
+     *     pattern: "Username can only contain letters and numbers"
+     *   },
+     *   age: {
+     *     minimum: "Age must be at least 18",
+     *     maximum: "Age cannot exceed 120"
+     *   }
+     * }
+     * ```
+     */
+    properties?: Record<string, FieldErrorConfig>;
+    /**
+     * Global fallback error messages for validation types
+     * These are used when no field-specific message is provided
+     *
+     * @example
+     * ```typescript
+     * {
+     *   minLength: "This field is too short",
+     *   minimum: "Value is too small"
+     * }
+     * ```
+     */
+    [key: string]: any;
+}
+/**
+ * Result of buildErrorMessages that follows ajv-errors format
+ */
+export interface ErrorMessageResult {
+    required?: Record<string, string>;
+    properties?: Record<string, FieldErrorConfig>;
+    [key: string]: any;
+}
+/**
+ * Schema-level error message builder
+ *
+ * Builds a complete errorMessage object compatible with ajv-errors plugin.
+ * Supports both i18n translation keys and plain string messages.
+ *
+ * @param config - Error message configuration
+ * @returns Complete errorMessage object for JSON Schema
+ *
+ * @example
+ * ```typescript
+ * // Simple required field errors
+ * const errorMessage = buildErrorMessages({
+ *   required: {
+ *     username: "Username is required",
+ *     email: "user.email.field_required" // i18n key
+ *   }
+ * });
+ *
+ * // With validation rules
+ * const errorMessage = buildErrorMessages({
+ *   required: {
+ *     password: "Password is required"
+ *   },
+ *   properties: {
+ *     password: {
+ *       minLength: "Password must be at least 8 characters",
+ *       pattern: "Password must contain letters and numbers"
+ *     },
+ *     age: {
+ *       minimum: "Must be 18 or older",
+ *       maximum: "Must be under 120"
+ *     }
+ *   }
+ * });
+ *
+ * // With global fallbacks
+ * const errorMessage = buildErrorMessages({
+ *   required: {
+ *     email: "Email is required"
+ *   },
+ *   minLength: "This field is too short", // applies to all fields
+ *   minimum: "Value is too small"
+ * });
+ * ```
+ */
+export declare const buildErrorMessages: (config: ErrorMessageConfig) => ErrorMessageResult;
+/**
+ * Helper function to build required field errors
+ *
+ * Simplifies creating required field error messages, especially useful
+ * for generating i18n translation keys following a pattern.
+ *
+ * @param fields - Array of required field names
+ * @param messageOrGenerator - Either a string template or function to generate messages
+ * @returns Required field error configuration
+ *
+ * @example
+ * ```typescript
+ * // Plain string messages
+ * const required = buildRequiredErrors(
+ *   ["username", "email", "password"],
+ *   (field) => `${field} is required`
+ * );
+ * // Result: { username: "username is required", email: "email is required", ... }
+ *
+ * // i18n translation keys
+ * const required = buildRequiredErrors(
+ *   ["username", "email"],
+ *   (field) => `user.${field}.field_required`
+ * );
+ * // Result: { username: "user.username.field_required", email: "user.email.field_required" }
+ *
+ * // Same message for all fields
+ * const required = buildRequiredErrors(
+ *   ["username", "email"],
+ *   "This field is required"
+ * );
+ * // Result: { username: "This field is required", email: "This field is required" }
+ *
+ * // With keyPrefix for i18n
+ * const required = buildRequiredErrors(
+ *   ["username", "email"],
+ *   (field) => `${field}.field_required`,
+ *   "user"
+ * );
+ * // Result: { username: "user.username.field_required", email: "user.email.field_required" }
+ * ```
+ */
+export declare const buildRequiredErrors: (fields: string[], messageOrGenerator: string | ((field: string) => string), keyPrefix?: string) => Record<string, string>;
+/**
+ * Helper function to build field-specific validation errors
+ *
+ * Creates property-specific error messages for multiple fields at once.
+ *
+ * @param config - Maps field names to their validation error configurations
+ * @returns Properties error configuration
+ *
+ * @example
+ * ```typescript
+ * const properties = buildFieldErrors({
+ *   username: {
+ *     minLength: "Username must be at least 3 characters",
+ *     pattern: "Username can only contain letters and numbers"
+ *   },
+ *   age: {
+ *     minimum: "Must be 18 or older",
+ *     maximum: "Must be under 120"
+ *   },
+ *   email: {
+ *     format: "Please enter a valid email address"
+ *   }
+ * });
+ * ```
+ */
+export declare const buildFieldErrors: (config: Record<string, FieldErrorConfig>) => Record<string, FieldErrorConfig>;
+/**
+ * Helper function to create a complete error message configuration in one call
+ *
+ * Convenient wrapper that combines required and validation errors.
+ *
+ * @param required - Required field error messages
+ * @param properties - Field-specific validation error messages
+ * @param globalFallbacks - Global fallback error messages
+ * @returns Complete error message configuration
+ *
+ * @example
+ * ```typescript
+ * const errorMessage = createErrorMessage(
+ *   {
+ *     username: "Username is required",
+ *     email: "Email is required"
+ *   },
+ *   {
+ *     username: {
+ *       minLength: "Username must be at least 3 characters"
+ *     },
+ *     email: {
+ *       format: "Please enter a valid email"
+ *     }
+ *   },
+ *   {
+ *     minLength: "This field is too short",
+ *     format: "Invalid format"
+ *   }
+ * );
+ * ```
+ */
+export declare const createErrorMessage: (required?: Record<string, string>, properties?: Record<string, FieldErrorConfig>, globalFallbacks?: Partial<Record<ValidationErrorType, string>>) => ErrorMessageResult;

package/dist/types/components/Form/utils/useFormI18n.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Custom hook to simplify i18n translation for form fields.
+ * Automatically handles colLabel construction and removeIndex logic.
+ *
+ * @param column - The column name
+ * @param prefix - The prefix for the field (usually empty string or parent path)
+ * @returns Object with translation helper functions
+ *
+ * @example
+ * ```tsx
+ * const formI18n = useFormI18n(column, prefix);
+ *
+ * // Get field label
+ * <Field label={formI18n.label()} />
+ *
+ * // Get error message
+ * <Text>{formI18n.required()}</Text>
+ *
+ * // Get custom translation key
+ * <Text>{formI18n.t('add_more')}</Text>
+ *
+ * // Access the raw colLabel
+ * const colLabel = formI18n.colLabel;
+ * ```
+ */
+export declare const useFormI18n: (column: string, prefix?: string) => {
+    /**
+     * The constructed column label (prefix + column)
+     */
+    colLabel: string;
+    /**
+     * Get the field label translation
+     * Equivalent to: translate.t(removeIndex(`${colLabel}.field_label`))
+     */
+    label: (options?: any) => string;
+    /**
+     * Get the required error message translation
+     * Equivalent to: translate.t(removeIndex(`${colLabel}.field_required`))
+     */
+    required: (options?: any) => string;
+    /**
+     * Get a translation for any custom key relative to the field
+     * Equivalent to: translate.t(removeIndex(`${colLabel}.${key}`))
+     *
+     * @param key - The translation key suffix (e.g., 'add_more', 'total', etc.)
+     * @param options - Optional translation options (e.g., defaultValue, interpolation variables)
+     */
+    t: (key: string, options?: any) => string;
+    /**
+     * Access to the original translate object for edge cases
+     */
+    translate: import("react-i18next").UseTranslationResponse<any, any>;
+};

package/dist/types/index.d.ts

@@ -115,7 +115,9 @@ export * from "./components/Form/components/core/DefaultForm";
 export * from "./components/Form/components/core/FormRoot";
 export * from "./components/Form/components/core/FormTitle";
 export * from "./components/Form/components/core/FormBody";
+export * from "./components/Form/components/types/CustomJSONSchema7";
 export * from "./components/Form/useForm";
+export * from "./components/Form/utils/buildErrorMessages";
 export * from "./components/DatePicker/DatePicker";
 export * from "./components/DatePicker/getMultiDates";
 export * from "./components/DatePicker/getRangeDates";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsol-oss/react-datatable5",
-  "version": "12.0.0-beta.70",
+  "version": "12.0.0-beta.72",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -32,7 +32,8 @@
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "format": "prettier --ignore-unknown '**/*'"
+    "format": "prettier --ignore-unknown '**/*'",
+    "prepare": "husky"
   },
   "peerDependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
@@ -81,10 +82,17 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "eslint-plugin-storybook": "^0.8.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.5",
     "prettier": "3.2.5",
     "rollup-plugin-dts": "^6.1.0",
     "storybook": "^8.4.7",
     "typescript": "^5.2.2",
     "vite": "^5.2.0"
+  },
+  "lint-staged": {
+    "*.{ts,js,json,md,tsx}": [
+      "prettier --config ./.prettierrc --write"
+    ]
   }
 }