bnk-components
Version:
Reusable React components for Issaglam UI - Modern, responsive UI components with TypeScript support
69 lines (68 loc) • 1.75 kB
TypeScript
export interface FieldMetadata {
name: string;
type: 'string' | 'number' | 'boolean' | 'date' | 'datetime' | 'email' | 'tel' | 'url' | 'textarea' | 'relation' | 'enum';
label?: string;
required?: boolean;
disabled?: boolean;
placeholder?: string;
helpText?: string;
validation?: ValidationRules;
relation?: RelationMetadata;
enumValues?: Array<{
value: any;
label: string;
}>;
componentOverride?: string;
width?: string;
responsive?: boolean;
}
export interface ValidationRules {
required?: boolean;
minLength?: number;
maxLength?: number;
min?: number;
max?: number;
pattern?: string;
custom?: (value: any) => string | null;
}
export interface RelationMetadata {
endpoint: string;
displayField: string;
valueField?: string;
searchFields?: string[];
multiple?: boolean;
allowCreate?: boolean;
allowClear?: boolean;
placeholder?: string;
noDataText?: string;
loadingText?: string;
}
export interface FormMetadata {
fields: FieldMetadata[];
layout?: 'single' | 'two-column' | 'three-column';
sections?: FormSection[];
}
export interface FormSection {
title: string;
fields: string[];
collapsible?: boolean;
collapsed?: boolean;
}
export interface AutoFormProps {
metadata: FormMetadata;
data: any;
onChange: (fieldName: string, value: any) => void;
onSubmit?: (data: any) => void;
onCancel?: () => void;
loading?: boolean;
readOnly?: boolean;
className?: string;
}
export interface FormFieldProps {
field: FieldMetadata;
value: any;
onChange: (value: any) => void;
error?: string;
disabled?: boolean;
readOnly?: boolean;
}