@reactables/forms 0.4.0-alpha.0

package/README.md

@@ -0,0 +1,15 @@
+# Reactable Forms (WIP)
+
+## Description
+
+State management for building a comprehensive form library using [Reactables Core](https://github.com/reactables/reactables/tree/main/packages/core).
+
+## Architecture (WIP see https://github.com/reactables/reactables/issues/8)
+
+The following diagram visualizes the architecture of [Reactables Forms](https://github.com/reactables/reactables/tree/main/packages/forms) - a state management model for building reactive forms.
+
+There are two sets of hub and stores. The first set is responsible for handling user input and updating the form.
+
+The second set is responsible for reacting to the form change in the first store and asynchronous validation.
+
+![Reactables architecture](https://raw.githubusercontent.com/reactables/reactables/main/documentation/Slide10ReactablesForms.jpg)

package/dist/Helpers/FormBuilder.d.ts

@@ -0,0 +1,10 @@
+import { FormControlConfig, FormArrayConfig, FormGroupConfig, AbstractControlConfig } from '../Models/Configs';
+import { ValidatorFn, ValidatorAsyncFn } from '../Models/Validators';
+type FbControl<T> = [T, (ValidatorFn | ValidatorFn[])?, (ValidatorAsyncFn | ValidatorAsyncFn[])?];
+export declare const FormBuilder: {
+    control: <T>(config: FormControlConfig<T> | FbControl<T>) => FormControlConfig<T>;
+    array: (config: FormArrayConfig) => FormArrayConfig;
+    group: (config: FormGroupConfig) => FormGroupConfig;
+    build: (config: AbstractControlConfig, hub?: any) => any;
+};
+export {};

package/dist/Helpers/addAsyncValidationEffects.d.ts

@@ -0,0 +1,5 @@
+import { Action, Effect } from '@reactables/core';
+import { BaseControl } from '../Models/Controls';
+import { ControlAsyncValidationResponse } from '../Models/Payloads';
+export declare const getScopedEffectsForControl: <T>(formControl: BaseControl<T>) => Effect<BaseControl<T>, ControlAsyncValidationResponse>[];
+export declare const getAsyncValidationActions: (formControls: BaseControl<unknown>[]) => Action<BaseControl<unknown>>[];

package/dist/Helpers/buildFormState.d.ts

@@ -0,0 +1,5 @@
+import { AbstractControlConfig } from '../Models/Configs';
+import { BaseForm, BaseFormState } from '../Models/Controls';
+import { ControlRef } from '../Models/ControlRef';
+export declare const buildState: <T>(config: AbstractControlConfig, form?: BaseForm<T>, controlRef?: ControlRef) => BaseForm<T>;
+export declare const buildFormState: <T>(config: AbstractControlConfig, form?: BaseForm<T>, controlRef?: ControlRef) => BaseFormState<T>;

package/dist/Helpers/buildHub2Source.d.ts

@@ -0,0 +1,4 @@
+import { Observable } from 'rxjs';
+import { Action, Reactable } from '@reactables/core';
+import { BaseFormState } from '../Models/Controls';
+export declare const buildHub2Source: <T, S>(rx: Reactable<BaseFormState<T>, S>) => Observable<Action<T>>;

package/dist/Helpers/generateKey.d.ts

@@ -0,0 +1 @@
+export declare const generateKey: (length: number) => string;

package/dist/Helpers/getAncestorControls.d.ts

@@ -0,0 +1,3 @@
+import { BaseControl, BaseForm, Form, FormControl } from '../Models/Controls';
+import { ControlRef } from '../Models/ControlRef';
+export declare const getAncestorControls: <T extends BaseForm<unknown> | Form<unknown>>(controlRef: ControlRef, form: T, excludeSelf?: boolean) => (T extends Form<unknown> ? FormControl<unknown> : BaseControl<unknown>)[];

package/dist/Helpers/getAncestorControls.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Helpers/getArrayItems.d.ts

@@ -0,0 +1,3 @@
+import { FormControl, Form, BaseForm, BaseControl } from '../Models/Controls';
+import { ControlRef } from '../Models/ControlRef';
+export declare const getArrayItems: <T extends BaseForm<unknown> | Form<unknown>>(controlRef: ControlRef, form: T) => T extends BaseForm<unknown> ? BaseControl<unknown>[] : FormControl<unknown>[];

package/dist/Helpers/getArrayItems.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Helpers/getControl.d.ts

@@ -0,0 +1,3 @@
+import { BaseForm, Form, BaseControl, FormControl } from '../Models/Controls';
+import { ControlRef } from '../Models/ControlRef';
+export declare const getControl: <T extends BaseForm<unknown> | Form<unknown>>(controlRef: ControlRef, form: T) => T extends BaseForm<unknown> ? BaseControl<unknown> : FormControl<unknown>;

package/dist/Helpers/getControlBranch.d.ts

@@ -0,0 +1,3 @@
+import { ControlRef } from '../Models/ControlRef';
+import { BaseControl, FormControl, BaseForm, Form } from '../Models/Controls';
+export declare const getControlBranch: <T extends BaseForm<unknown> | Form<unknown>>(controlRef: ControlRef, form: T) => (T extends Form<unknown> ? FormControl<unknown> : BaseControl<unknown>)[];

package/dist/Helpers/getControlBranch.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Helpers/getDescendantControls.d.ts

@@ -0,0 +1,3 @@
+import { BaseControl, FormControl, BaseForm, Form } from '../Models/Controls';
+import { ControlRef } from '../Models/ControlRef';
+export declare const getDescendantControls: <T extends BaseForm<unknown> | Form<unknown>>(controlRef: ControlRef, form: T, excludeSelf?: boolean) => (T extends Form<unknown> ? FormControl<unknown> : BaseControl<unknown>)[];

package/dist/Helpers/getDescendantControls.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Helpers/getFormKey.d.ts

@@ -0,0 +1,2 @@
+import { ControlRef } from '../Models';
+export declare const getFormKey: (controlRef: ControlRef) => string;

package/dist/Helpers/getValueFromControlConfig.d.ts

@@ -0,0 +1,2 @@
+import { AbstractControlConfig } from '../Models/Configs';
+export declare const getValueFromControlConfig: <T>(controlConfig: AbstractControlConfig) => T;

package/dist/Helpers/getValueFromControlConfig.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Helpers/index.d.ts

@@ -0,0 +1 @@
+export { getArrayItems } from './getArrayItems';

package/dist/Helpers/isChildRef.d.ts

@@ -0,0 +1,2 @@
+import { ControlRef } from '../Models/ControlRef';
+export declare const isChildRef: (controlRef: ControlRef, parentRef: ControlRef) => boolean;

package/dist/Models/Configs.d.ts

@@ -0,0 +1,22 @@
+import { ValidatorFn, ValidatorAsyncFn } from './Validators';
+interface ValidatorConfigs {
+    validators?: ValidatorFn[];
+    asyncValidators?: ValidatorAsyncFn[];
+}
+export interface FormGroupConfig extends ValidatorConfigs {
+    controls: {
+        [key: string]: AbstractControlConfig;
+    };
+}
+export interface FormArrayConfig extends ValidatorConfigs {
+    controls: AbstractControlConfig[];
+}
+export interface FormControlConfig<T> extends ValidatorConfigs {
+    initialValue: T;
+}
+export type AbstractControlConfig = (FormControlConfig<unknown> | FormArrayConfig | FormGroupConfig) & {
+    controls?: AbstractControlConfig[] | {
+        [key: string]: AbstractControlConfig;
+    };
+};
+export {};

package/dist/Models/ControlRef.d.ts

@@ -0,0 +1 @@
+export type ControlRef = (string | number)[];

package/dist/Models/Controls.d.ts

@@ -0,0 +1,44 @@
+import { Action } from '@reactables/core';
+import { AbstractControlConfig } from './Configs';
+import { FormErrors } from './FormErrors';
+import { ControlRef } from './ControlRef';
+export interface BaseControl<T> {
+    pristineValue: T;
+    controlRef: ControlRef;
+    value: T;
+    dirty: boolean;
+    touched: boolean;
+    validatorErrors: FormErrors;
+    validatorsValid: boolean;
+    config: AbstractControlConfig;
+    key: string;
+}
+interface AsyncFields {
+    asyncValidatorsValid: boolean;
+    asyncValidatorErrors: FormErrors;
+    asyncValidateInProgress: {
+        [key: string | number]: boolean;
+    };
+    pending?: boolean;
+}
+interface ValidatedFields {
+    valid: boolean;
+    errors: FormErrors;
+}
+export interface Hub2Fields extends AsyncFields, ValidatedFields {
+}
+export interface FormControl<T> extends BaseControl<T>, Hub2Fields {
+}
+export interface BaseFormState<T> {
+    form: BaseForm<T>;
+    action: Action<unknown>;
+}
+export interface BaseForm<T> {
+    root?: BaseControl<T>;
+    [key: string]: BaseControl<unknown>;
+}
+export interface Form<T> {
+    root: FormControl<T>;
+    [key: string]: FormControl<unknown>;
+}
+export {};

package/dist/Models/FormErrors.d.ts

@@ -0,0 +1,3 @@
+export interface FormErrors {
+    [key: string]: boolean;
+}

package/dist/Models/Payloads.d.ts

@@ -0,0 +1,20 @@
+import { ControlRef } from './ControlRef';
+import { AbstractControlConfig } from './Configs';
+import { FormErrors } from './FormErrors';
+export interface ControlChange<T> {
+    value: T;
+    controlRef: ControlRef;
+}
+export interface AddControl {
+    config: AbstractControlConfig;
+    controlRef: ControlRef;
+}
+export interface ControlAsyncValidationResponse {
+    key: string;
+    validatorIndex: number;
+    errors: FormErrors;
+}
+export interface MarkTouched {
+    controlRef: ControlRef;
+    markAll?: boolean;
+}

package/dist/Models/Validators.d.ts

@@ -0,0 +1,5 @@
+import { Observable } from 'rxjs';
+import { BaseAbstractControl } from './Controls';
+import { FormErrors } from './FormErrors';
+export type ValidatorFn = (value: unknown) => FormErrors;
+export type ValidatorAsyncFn = <T>(control$: Observable<BaseAbstractControl<T>>) => Observable<FormErrors>;

package/dist/Models/index.d.ts

@@ -0,0 +1,6 @@
+export { AbstractControlConfig, FormArrayConfig, FormGroupConfig, FormControlConfig, } from './Configs';
+export { ControlRef } from './ControlRef';
+export * as ControlModels from './Controls';
+export { FormErrors } from './FormErrors';
+export { ControlChange, AddControl, ControlAsyncValidationResponse, MarkTouched } from './Payloads';
+export { ValidatorAsyncFn, ValidatorFn } from './Validators';

package/dist/Reducers/Hub1/addControl.d.ts

@@ -0,0 +1,4 @@
+import { Action } from '@reactables/core';
+import { BaseFormState } from '../../Models/Controls';
+import { AddControl } from '../../Models/Payloads';
+export declare const addControl: <T>(state: BaseFormState<T>, action: Action<AddControl>) => BaseFormState<T>;

package/dist/Reducers/Hub1/index.d.ts

@@ -0,0 +1,9 @@
+export { markControlAsPristine } from './markControlAsPristine';
+export { markControlAsTouched } from './markControlAsTouched';
+export { markControlAsUntouched } from './markControlAsUntouched';
+export { removeControl } from './removeControl';
+export { resetControl } from './resetControl';
+export { syncValidate } from './syncValidate';
+export { updateDirty } from './updateDirty';
+export { updateValues } from './updateValues';
+export { buildHub1Reducer } from './buildHub1Reducer';

package/dist/Reducers/Hub1/markControlAsPristine.d.ts

@@ -0,0 +1,4 @@
+import { Action } from '@reactables/core';
+import { BaseFormState } from '../../Models/Controls';
+import { ControlRef } from '../../Models/ControlRef';
+export declare const markControlAsPristine: <T>({ form }: BaseFormState<T>, action: Action<ControlRef>) => BaseFormState<T>;

package/dist/Reducers/Hub1/markControlAsTouched.d.ts

@@ -0,0 +1,4 @@
+import { Action } from '@reactables/core';
+import { BaseFormState } from '../../Models/Controls';
+import { MarkTouched } from '../../Models/Payloads';
+export declare const markControlAsTouched: <T>({ form }: BaseFormState<T>, action: Action<MarkTouched>) => BaseFormState<T>;

package/dist/Reducers/Hub1/markControlAsUntouched.d.ts

@@ -0,0 +1,4 @@
+import { Action } from '@reactables/core';
+import { BaseFormState } from '../../Models/Controls';
+import { ControlRef } from '../../Models/ControlRef';
+export declare const markControlAsUntouched: <T>({ form }: BaseFormState<T>, action: Action<ControlRef>) => BaseFormState<T>;

package/dist/Reducers/Hub1/removeControl.d.ts

@@ -0,0 +1,4 @@
+import { Action } from '@reactables/core';
+import { BaseFormState } from '../../Models/Controls';
+import { ControlRef } from '../../Models/ControlRef';
+export declare const removeControl: <T>({ form }: BaseFormState<T>, action: Action<ControlRef>) => BaseFormState<T>;

package/dist/Reducers/Hub1/resetControl.d.ts

@@ -0,0 +1,4 @@
+import { Action } from '@reactables/core';
+import { BaseFormState } from '../../Models/Controls';
+import { ControlRef } from '../../Models/ControlRef';
+export declare const resetControl: <T>({ form }: BaseFormState<T>, action: Action<ControlRef>) => BaseFormState<T>;

package/dist/Reducers/Hub1/syncValidate.d.ts

@@ -0,0 +1,2 @@
+import { BaseForm } from '../../Models/Controls';
+export declare const syncValidate: <T>(form: BaseForm<T>) => BaseForm<T>;

package/dist/Reducers/Hub1/syncValidate.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Reducers/Hub1/updateAncestorPristineValues.d.ts

@@ -0,0 +1,5 @@
+import { Action } from '@reactables/core';
+import { BaseForm } from '../../Models/Controls';
+import { ControlRef } from '../../Models/ControlRef';
+export declare const UPDATE_ANCESTOR_PRISTINE_VALUES = "UPDATE_ANCESTOR_PRISTINE_VALUES";
+export declare const updateAncestorPristineValues: <T>(form: BaseForm<T>, { payload: controlRef }: Action<ControlRef>) => BaseForm<T>;

package/dist/Reducers/Hub1/updateAncestorValues.d.ts

@@ -0,0 +1,5 @@
+import { Action } from '@reactables/core';
+import { BaseForm } from '../../Models/Controls';
+import { ControlRef } from '../../Models/ControlRef';
+export declare const UPDATE_ANCESTOR_VALUES = "UPDATE_ANCESTOR_VALUES";
+export declare const updateAncestorValues: <T>(form: BaseForm<T>, { payload: controlRef }: Action<ControlRef>) => BaseForm<T>;

package/dist/Reducers/Hub1/updateDirty.d.ts

@@ -0,0 +1,2 @@
+import { BaseForm } from '../../Models/Controls';
+export declare const updateDirty: <T>(form: BaseForm<T>) => BaseForm<T>;

package/dist/Reducers/Hub1/updateDirty.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Reducers/Hub1/updateValues.d.ts

@@ -0,0 +1,4 @@
+import { Action } from '@reactables/core';
+import { BaseFormState } from '../../Models/Controls';
+import { ControlChange } from '../../Models/Payloads';
+export declare const updateValues: <T>({ form }: BaseFormState<T>, action: Action<ControlChange<unknown>>) => BaseFormState<T>;

package/dist/Reducers/Hub2/asyncValidation.d.ts

@@ -0,0 +1,4 @@
+import { Action } from '@reactables/core';
+import { Form } from '../../Models/Controls';
+import { BaseControl } from '../../Models/Controls';
+export declare const asyncValidation: <T>(form: Form<T>, { payload: { controlRef } }: Action<BaseControl<unknown>>) => Form<T>;

package/dist/Reducers/Hub2/asyncValidationResponseSuccess.d.ts

@@ -0,0 +1,4 @@
+import { Action } from '@reactables/core';
+import { Form } from '../../Models/Controls';
+import { ControlAsyncValidationResponse } from '../../Models/Payloads';
+export declare const asyncValidationResponseSuccess: <T>(form: Form<T>, { payload: { key, validatorIndex, errors } }: Action<ControlAsyncValidationResponse>) => Form<T>;

package/dist/Reducers/Hub2/formChange.d.ts

@@ -0,0 +1,4 @@
+import { Reducer } from '@reactables/core';
+import { Form, Hub2Fields } from '../../Models/Controls';
+export declare const DEFAULT_HUB2_FIELDS: Hub2Fields;
+export declare const formChange: Reducer<Form<unknown>>;

package/dist/Reducers/Hub2/hub2Reducer.d.ts

@@ -0,0 +1,3 @@
+import { Form } from '../../Models/Controls';
+import { Reducer } from '@reactables/core';
+export declare const hub2Reducer: Reducer<Form<unknown>>;

package/dist/Reducers/Hub2/index.d.ts

@@ -0,0 +1,3 @@
+export { formChange } from './formChange';
+export { asyncValidation } from './asyncValidation';
+export { asyncValidationResponseSuccess } from './asyncValidationResponseSuccess';

package/dist/Reducers/Hub2/mergeErrors.d.ts

@@ -0,0 +1,2 @@
+import { Form } from '../../Models/Controls';
+export declare const mergeErrors: <T>(form: Form<T>) => Form<T>;

package/dist/Reducers/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Hub1';
+export * from './Hub2';

package/dist/RxForm/RxForm.d.ts

@@ -0,0 +1,23 @@
+import { Reactable } from '@reactables/core';
+import { ControlChange, AddControl, MarkTouched } from '../Models/Payloads';
+import { ControlRef } from '../Models';
+import { FormControlConfig, FormArrayConfig, FormGroupConfig, AbstractControlConfig } from '../Models/Configs';
+import { ValidatorFn, ValidatorAsyncFn } from '../Models/Validators';
+import { Form } from '../Models/Controls';
+type FbControl<T> = [T, (ValidatorFn | ValidatorFn[])?, (ValidatorAsyncFn | ValidatorAsyncFn[])?];
+export type RxFormActions = {
+    updateValues: <T>(payload: ControlChange<T>) => void;
+    addControl: (payload: AddControl) => void;
+    removeControl: (payload: ControlRef) => void;
+    markControlAsPristine: (payload: ControlRef) => void;
+    markControlAsTouched: (payload: MarkTouched) => void;
+    markControlAsUntouched: (payload: ControlRef) => void;
+    resetControl: (payload: ControlRef) => void;
+};
+export declare const RxForm: {
+    group: (config: FormGroupConfig) => FormGroupConfig;
+    array: (config: FormArrayConfig) => FormArrayConfig;
+    control: <T>(config: FormControlConfig<T> | FbControl<T>) => FormControlConfig<T>;
+    build: (config: AbstractControlConfig) => Reactable<Form<unknown>, RxFormActions>;
+};
+export {};

package/dist/RxForm/RxForm.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/RxForm/index.d.ts

@@ -0,0 +1 @@
+export { RxForm, RxFormActions } from './RxForm';

package/dist/Testing/AsyncValidators.d.ts

@@ -0,0 +1,6 @@
+import { ValidatorAsyncFn } from '../Models/Validators';
+export declare const uniqueEmail: ValidatorAsyncFn;
+export declare const blacklistedEmail: ValidatorAsyncFn;
+export declare const arrayLengthError: ValidatorAsyncFn;
+export declare const uniqueFirstAndLastName: ValidatorAsyncFn;
+export declare const blacklistedDoctorType: ValidatorAsyncFn;

package/dist/Testing/Effects.d.ts

@@ -0,0 +1,10 @@
+import { Observable } from 'rxjs';
+import { Action } from '@reactables/core';
+export declare const switchMapEffect: (action$: Observable<Action<string>>) => Observable<{
+    type: any;
+    payload: string;
+}>;
+export declare const debounceEffect: (action$: Observable<Action<string>>) => Observable<{
+    type: any;
+    payload: string;
+}>;

package/dist/Testing/Models/Contact.d.ts

@@ -0,0 +1,11 @@
+import { EmergencyContact } from './EmergencyContact';
+import { DoctorInfo } from './DoctorInfo';
+export interface Contact {
+    firstName: string;
+    lastName: string;
+    email: string;
+    phone: string;
+    occupation?: string;
+    emergencyContacts: EmergencyContact[];
+    doctorInfo: DoctorInfo;
+}

package/dist/Testing/Models/DoctorInfo.d.ts

@@ -0,0 +1,6 @@
+export interface DoctorInfo {
+    firstName: string;
+    lastName: string;
+    email: string;
+    type?: string;
+}

package/dist/Testing/Models/EmergencyContact.d.ts

@@ -0,0 +1,6 @@
+export interface EmergencyContact {
+    firstName: string;
+    lastName: string;
+    email: string;
+    relation: string;
+}

package/dist/Testing/asyncConfig.d.ts

@@ -0,0 +1,11 @@
+import { FormGroupConfig } from '../Models/Configs';
+interface FullName {
+    firstName: string;
+    lastName: string;
+}
+export declare const firstNameNotSameAsLast: (value: FullName) => {
+    firstNameNotSameAsLast: boolean;
+};
+export declare const asyncEmergencyContactConfigs: FormGroupConfig[];
+export declare const asyncConfig: FormGroupConfig;
+export {};

package/dist/Testing/config.d.ts

@@ -0,0 +1,11 @@
+import { FormGroupConfig } from '../Models/Configs';
+interface FullName {
+    firstName: string;
+    lastName: string;
+}
+export declare const firstNameNotSameAsLast: (value: FullName) => {
+    firstNameNotSameAsLast: boolean;
+};
+export declare const emergencyContactConfigs: FormGroupConfig[];
+export declare const config: FormGroupConfig;
+export {};

package/dist/Validators/Validators.d.ts

@@ -0,0 +1,4 @@
+import { ValidatorFn } from '../Models/Validators';
+export declare const required: ValidatorFn;
+export declare const email: ValidatorFn;
+export declare const phoneNumber: ValidatorFn;

package/dist/Validators/index.d.ts

@@ -0,0 +1 @@
+export * from './Validators';

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Models';
+export * as Validators from './Validators';
+export * from './RxForm';
+export * from './Helpers';