sera-components 1.5.0 → 1.6.0

package/dist/data/display/index.d.ts

@@ -1,9 +1,9 @@
-import { DataProperty, DataType, DB, ObjectProperty } from 'sera-db';
+import { DataProperty, DataType, DB, ObjectProperty, NestedProperty } from 'sera-db';
 import { DateDisplay, DateTimeDisplay, DateTimeHideTimeDisplay } from './DateTimeDisplay';
 export { SingleForeignKeyDisplay, MultiForeignKeyDisplay } from './ForeignKeyDisplay';
 export type DisplayInterface<T> = {
     db: DB;
-    property: DataProperty | ObjectProperty;
+    property: DataProperty | ObjectProperty | NestedProperty;
     value: T;
 };
 export declare const DataType2DisplayComponent: Partial<Record<DataType, React.ComponentType<DisplayInterface<any>>>>;

package/dist/data/inputs/ConfirmationInput.d.ts

@@ -0,0 +1,72 @@
+import { InputInterface } from '.';
+import { DataProperty, ObjectProperty } from 'sera-db';
+export interface ConfirmationLabelProps {
+    property: DataProperty | ObjectProperty;
+}
+/**
+ * A component that renders a confirmation label with "Confirm" prefix before the property label.
+ *
+ * This component displays a localized "Confirm" text followed by the property's multilingual label.
+ * Commonly used in forms where users need to confirm a value (e.g., "Confirm Password").
+ *
+ * @param props - The component props
+ * @param props.property - The data property or object property containing the label to display
+ *
+ * @returns A Text component showing "Confirm {property.label}" in the current locale
+ *
+ * @example
+ * ```tsx
+ * const passwordProperty = {
+ *   name: "password",
+ *   label: {
+ *     lang: "en",
+ *     lang2value: {
+ *       en: "Password",
+ *       vi: "Mật Khẩu"
+ *     }
+ *   }
+ * };
+ *
+ * <ConfirmationLabel property={passwordProperty} />
+ * // Renders: "Confirm Password" (in English)
+ * // Or: "Xác Nhận Mật Khẩu" (in Vietnamese)
+ * ```
+ */
+export declare const ConfirmationLabel: ({ property }: ConfirmationLabelProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A confirmation input component that validates matching values against a target field.
+ *
+ * @example
+ * ```tsx
+ * // In a form field group with custom onChange to track validation state:
+ * const [passwordConfirmed, setPasswordConfirmed] = useState(false);
+ *
+ * {
+ *   name: "Security Information",
+ *   fields: [
+ *     ["password"],
+ *     [{
+ *       prop: "password",
+ *       args: {
+ *         input: ConfirmationInput,
+ *         onChange: (value) => {
+ *           // Track validation state - onChange is called on every change
+ *           // so you can lift the error state to the parent component
+ *           setPasswordConfirmed(value === targetPassword);
+ *         }
+ *       }
+ *     }]
+ *   ]
+ * }
+ * ```
+ *
+ * The component:
+ * - Uses the `value` prop as the target value to match against
+ * - Maintains local state for the confirmation input value
+ * - Only shows "Values do not match" error after the field is touched
+ * - Calls `onChange` on every keystroke, allowing parent to lift validation errors
+ * - The parent can compare the confirmation value with the target to track validation state
+ * - Resets when the target value changes (e.g., when switching between records)
+ * - Delegates to the appropriate input component based on property constraints
+ */
+export declare const ConfirmationInput: React.FC<InputInterface<string>>;

package/dist/data/inputs/EnumInput.d.ts

@@ -1,2 +1,4 @@
 import { InputInterface } from '.';
-export declare const EnumInput: React.FC<InputInterface<any>>;
+type EnumValue = string | number;
+export declare const EnumInput: React.FC<InputInterface<EnumValue | undefined>>;
+export {};

package/dist/data/inputs/index.d.ts

@@ -1,16 +1,17 @@
-import { DataProperty, DataType, DB, ObjectProperty } from 'sera-db';
+import { DataProperty, DataType, DB, ObjectProperty, NestedProperty } from 'sera-db';
 import { BooleanInput } from './BooleanInput';
 import { NumberInput } from './NumberInput';
 import { TextInput } from './TextInput';
 import { DateInput } from './DateInput';
 import { EnumInput } from './EnumInput';
+import { ConfirmationInput, ConfirmationLabel } from './ConfirmationInput';
 export { SingleForeignKeyInput, MultiForeignKeyInput } from './ForeignKeyInput';
 export { DateRangeInput, DateTimeRangeInput } from './DateRangeInput';
 /**
  * Interface for input components in forms
  * @interface InputInterface
  * @template T - The type of the input value
- * @property {DataProperty | ObjectProperty} property - The property being edited
+ * @property {DataProperty | ObjectProperty | NestedProperty} property - The property being edited
  * @property {any} value - The current value of the input
  * @property {function} onChange - Callback function triggered when input value changes
  * @property {boolean | string} [error] - If the type is boolean it will be error, if there is a string message it should display that message
@@ -18,7 +19,7 @@ export { DateRangeInput, DateTimeRangeInput } from './DateRangeInput';
  */
 export type InputInterface<T> = {
     db: DB;
-    property: DataProperty | ObjectProperty;
+    property: DataProperty | ObjectProperty | NestedProperty;
     value: T;
     onChange: (value: T) => void;
     error?: boolean | string;
@@ -28,4 +29,4 @@ export type InputInterface<T> = {
  * Mapping of data types to their corresponding input components
  */
 export declare const DataType2InputComponent: Partial<Record<DataType, React.FC<InputInterface<any>>>>;
-export { NumberInput, BooleanInput, TextInput, DateInput, EnumInput };
+export { NumberInput, BooleanInput, TextInput, DateInput, EnumInput, ConfirmationInput, ConfirmationLabel };

package/dist/form/Form.d.ts

@@ -1,24 +1,24 @@
-import { DraftRecord, GenericRecord, MultiLingualString, Schema, SchemaType, Table } from 'sera-db';
+import { PropertyNames, DraftRecord, GenericRecord, Schema, SchemaType, Table, NestedProperty } from 'sera-db';
 import { InputInterface } from '../data/inputs';
 import { FormItemLayout } from './FormItem';
-export interface CustomField {
-    name: string;
-    label: MultiLingualString;
-    description?: MultiLingualString;
-}
-interface FieldArgs<DR> {
+interface FieldArgs<R, DR> {
+    label?: React.ReactNode;
     input?: React.ComponentType<InputInterface<any>>;
     freeze?: boolean;
-    visible?: (record: DR) => boolean;
+    visible?: (record: R | DR) => boolean;
+    onChange?: (value: any) => void;
 }
-export interface FieldGroup<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>, PF extends keyof R, F extends keyof DR, ST extends SchemaType<ID, R, DR, PF, F>> {
+export interface FieldGroup<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>, PF extends PropertyNames<R>, F extends PropertyNames<DR>, ST extends SchemaType<ID, R, DR, PF, F>> {
     name?: string;
     fields: (ST["allProperties"] | {
         prop: ST["allProperties"];
-        args?: FieldArgs<DR>;
+        args?: FieldArgs<R, DR>;
+    } | NestedProperty | {
+        prop: NestedProperty;
+        args?: FieldArgs<R, DR>;
     } | ((store: Table<ID, R, DR>, record: R | DR) => React.ReactNode))[][];
 }
-export interface SeraFormProps<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>, PF extends keyof R, F extends keyof DR, ST extends SchemaType<ID, R, DR, PF, F>> {
+export interface SeraFormProps<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>, PF extends PropertyNames<R>, F extends PropertyNames<DR>, ST extends SchemaType<ID, R, DR, PF, F>> {
     schema: Schema<ID, R, DR, PF, F, ST>;
     store: Table<ID, R, DR>;
     fieldGroups: FieldGroup<ID, R, DR, PF, F, ST>[];
@@ -67,5 +67,5 @@ export interface SeraFormProps<ID extends string | number, R extends GenericReco
  * />
  * ```
  */
-export declare const SeraForm: <ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>, PF extends keyof R, F extends keyof DR, ST extends SchemaType<ID, R, DR, PF, F>>(props: SeraFormProps<ID, R, DR, PF, F, ST>) => import("react/jsx-runtime").JSX.Element;
+export declare const SeraForm: <ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>, PF extends PropertyNames<R>, F extends PropertyNames<DR>, ST extends SchemaType<ID, R, DR, PF, F>>(props: SeraFormProps<ID, R, DR, PF, F, ST>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/form/FormItem.d.ts

@@ -1,4 +1,4 @@
-import { DataProperty, DB, DraftRecord, GenericRecord, ObjectProperty, Table, validators } from 'sera-db';
+import { DataProperty, DB, DraftRecord, GenericRecord, ObjectProperty, Table, NestedProperty } from 'sera-db';
 import { InputInterface } from '../data/inputs';
 export interface FormItemHorizontalLayout {
     type: "horizontal";
@@ -14,11 +14,13 @@ export type FormItemLayout = FormItemHorizontalLayout | FormItemVerticalLayout;
 export interface FormItemProps<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>> {
     store: Table<ID, R, DR>;
     record: R | DR;
-    property: DataProperty | ObjectProperty;
+    property: DataProperty | ObjectProperty | NestedProperty;
     InputComponent: React.FC<InputInterface<any>> | React.ComponentType<InputInterface<any>>;
-    validator: validators.ValueValidator;
     layout?: FormItemLayout;
     freeze?: boolean;
+    label?: React.ReactNode;
+    onChange?: (value: any) => void;
+    visible?: (record: R | DR) => boolean;
 }
 export declare const DEFAULT_LAYOUT: FormItemVerticalLayout;
 /**
@@ -27,18 +29,18 @@ export declare const DEFAULT_LAYOUT: FormItemVerticalLayout;
  * Supports both horizontal and vertical layouts. In horizontal layout, the label and input are placed side by side in a grid.
  * In vertical layout, the label is positioned above the input using Mantine's Input.Wrapper.
  */
-export declare const FormItem: (<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>>({ store, record, property, layout, InputComponent, validator, freeze, }: FormItemProps<ID, R, DR>) => import("react/jsx-runtime").JSX.Element) & {
+export declare const FormItem: (<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>>({ store, record, property, layout, InputComponent, freeze, label, onChange, visible, }: FormItemProps<ID, R, DR>) => import("react/jsx-runtime").JSX.Element) & {
     displayName: string;
 };
-export declare function FormItemInner({ db, layout, property, InputComponent, freeze, value, error, onChange, }: {
+export declare function FormItemInner({ db, layout, property, InputComponent, freeze, value, error, label, onChange, }: {
     db: DB;
     layout: FormItemLayout;
-    property: DataProperty | ObjectProperty;
+    property: DataProperty | ObjectProperty | NestedProperty;
     InputComponent: React.FC<InputInterface<any>> | React.ComponentType<InputInterface<any>>;
-    validator: validators.ValueValidator;
     freeze: boolean;
     value: any;
     error: string | undefined;
+    label?: React.ReactNode;
     onChange: (value: any) => void;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function isHorizontalLayout(layout: FormItemLayout): layout is FormItemHorizontalLayout;

package/dist/form/index.d.ts

@@ -1,4 +1,3 @@
 export * from './Form';
 export * from './FormItem';
 export * from './FormItemLabel';
-export * from './FormNestedPropertyItem';