sera-components 1.5.0 → 1.6.2

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

@@ -1,9 +1,9 @@
-import { DataProperty, DataType, DB, ObjectProperty } from 'sera-db';
-import { DateDisplay, DateTimeDisplay, DateTimeHideTimeDisplay } from './DateTimeDisplay';
-export { SingleForeignKeyDisplay, MultiForeignKeyDisplay } from './ForeignKeyDisplay';
+import { DataProperty, DataType, DB, ObjectProperty, NestedProperty } from 'sera-db';
+import { DateDisplay, DateTimeDisplay, DateTimeHideTimeDisplay } from './datetime-display';
+export { SingleForeignKeyDisplay, MultiForeignKeyDisplay } from './foreign-key-display';
 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/confirmation-input.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/enum-input.d.ts

@@ -0,0 +1,4 @@
+import { InputInterface } from '.';
+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 { BooleanInput } from './BooleanInput';
-import { NumberInput } from './NumberInput';
-import { TextInput } from './TextInput';
-import { DateInput } from './DateInput';
-import { EnumInput } from './EnumInput';
-export { SingleForeignKeyInput, MultiForeignKeyInput } from './ForeignKeyInput';
-export { DateRangeInput, DateTimeRangeInput } from './DateRangeInput';
+import { DataProperty, DataType, DB, ObjectProperty, NestedProperty } from 'sera-db';
+import { BooleanInput } from './boolean-input';
+import { NumberInput } from './number-input';
+import { TextInput } from './text-input';
+import { DateInput } from './date-input';
+import { EnumInput } from './enum-input';
+import { ConfirmationInput, ConfirmationLabel } from './confirmation-input';
+export { SingleForeignKeyInput, MultiForeignKeyInput } from './foreign-key-input';
+export { DateRangeInput, DateTimeRangeInput } from './date-range-input';
 /**
  * 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/{FormItem.d.ts → form-item.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/form.d.ts

@@ -0,0 +1,112 @@
+import { PropertyNames, DraftRecord, GenericRecord, Schema, SchemaType, Table, NestedProperty } from 'sera-db';
+import { InputInterface } from '../data/inputs';
+import { FormItemLayout } from './form-item';
+interface FieldArgs<R, DR> {
+    label?: React.ReactNode;
+    input?: React.ComponentType<InputInterface<any>>;
+    freeze?: 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 PropertyNames<R>, F extends PropertyNames<DR>, ST extends SchemaType<ID, R, DR, PF, F>> {
+    name?: string;
+    fields: (ST["allProperties"] | {
+        prop: ST["allProperties"];
+        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 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>[];
+    layout?: FormItemLayout;
+    actions: {
+        variant: "filled" | "light" | "outline";
+        label?: React.ReactNode;
+        disabled?: boolean;
+        onClick?: () => void;
+    }[];
+    record: ST["cls"] | ST["draftCls"];
+    styles?: React.CSSProperties;
+    className?: string;
+    onSubmit?: (record: ST["draftCls"]) => void;
+}
+/**
+ * A form component that renders form items based on a schema from sera-db.
+ *
+ * This component provides a structured way to render form fields based on a schema definition,
+ * with support for grouping fields, custom layouts, and form actions.
+ *
+ * @template ID - The type of ID used for records
+ * @template R - The record type that extends GenericRecord
+ * @template DR - The draft record type that extends DraftRecord
+ * @template PF - The type of public fields in R
+ * @template F - The type of fields in DR
+ * @template ST - The schema type that extends SchemaType
+ *
+ * @example
+ * ```tsx
+ * <SeraForm
+ *   schema={userSchema}
+ *   store={userStore}
+ *   fieldGroups={[
+ *     {
+ *       name: "Basic Info",
+ *       fields: [["firstName", "lastName"], ["email"]]
+ *     }
+ *   ]}
+ *   layout={{ type: "horizontal", labelCol: 3, itemCol: 9 }}
+ *   actions={[
+ *     { variant: "filled", label: "Save", onClick: handleSave },
+ *     { variant: "outline", label: "Cancel", onClick: handleCancel }
+ *   ]}
+ *   record={userRecord}
+ * />
+ * ```
+ */
+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;
+/**
+ * Groups multiple form fields together in a row layout using Mantine's Group component.
+ *
+ * This function creates a renderer that displays multiple form fields side-by-side
+ * in a flexible row layout with equal column widths.
+ *
+ * @template ID - The type of the record identifier (string or number)
+ * @template R - The generic record type extending GenericRecord
+ * @template DR - The draft record type extending DraftRecord
+ * @template PF - The type of public fields in R
+ * @template F - The type of fields in DR
+ * @template ST - The schema type that extends SchemaType
+ *
+ * @param schema - The schema definition containing property information
+ * @param fields - Array of field definitions to display in the group
+ * @param args - Optional arguments for visibility, layout, and flex properties
+ *
+ * @returns A function that takes a store and record, returning a React node with grouped form fields
+ *
+ * @example
+ * ```tsx
+ * const groupedFields = groupFormFields(
+ *   userSchema,
+ *   [{ prop: "firstName" }, { prop: "lastName" }]
+ * );
+ * // Use in fieldGroups:
+ * fieldGroups: [{ fields: [[groupedFields]] }]
+ * ```
+ */
+export declare function groupFormFields<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>, fields: (ST["allProperties"] | {
+    prop: ST["allProperties"];
+    args?: FieldArgs<R, DR>;
+} | NestedProperty | {
+    prop: NestedProperty;
+    args?: FieldArgs<R, DR>;
+} | ((store: Table<ID, R, DR>, record: R | DR) => React.ReactNode))[], args?: {
+    visible?: (record: R | DR) => boolean;
+    layout?: FormItemLayout;
+    flexGrow?: boolean;
+    flexGap?: import('@mantine/core').MantineSpacing;
+}): (store: Table<ID, R, DR>, record: R | DR) => React.ReactNode;
+export {};

package/dist/form/index.d.ts

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