@servicetitan/form 22.3.0 → 22.4.0

package/src/form-helpers.ts

@@ -1,259 +0,0 @@
-import { SyntheticEvent, ChangeEvent, Key, ReactNode } from 'react';
-import { FieldState, FormState, ValidatableMapOrArray, ComposibleValidatable } from 'formstate';
-import { toJS, isObservableMap, runInAction, transaction, computed, comparer } from 'mobx';
-
-export class CheckboxFieldState extends FieldState<boolean> {
-    onChangeHandler = (_0: any, checked: boolean) => {
-        this.onChange(checked);
-    };
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    DEPRECATED_onChangeHandler = (
-        _0: SyntheticEvent<HTMLInputElement>,
-        data: { checked?: boolean }
-    ) => {
-        this.onChange(!!data.checked);
-    };
-}
-
-export class InputFieldState<T> extends FieldState<T> {
-    onChangeHandler = (_0: SyntheticEvent<HTMLInputElement>, data: { value: T }) => {
-        this.onChange(data.value);
-    };
-    onChangeNativeHandler = (event: ChangeEvent<HTMLInputElement>) => {
-        this.onChange(event.currentTarget.value as unknown as T);
-    };
-}
-
-export class TextAreaFieldState<T> extends FieldState<T> {
-    /**
-     * react-semantic type for onChange event of TextArea component seems to have a bug with data object type
-     * so declaring data as any
-     */
-    onChangeHandler = (_0: SyntheticEvent<HTMLTextAreaElement>, data: any) => {
-        this.onChange(data.value);
-    };
-}
-
-export class DropdownFieldState<T> extends FieldState<T> {
-    /**
-     * react-semantic type for onChange event of Dropdown component seems to have a bug with data object type
-     * so declaring data as any
-     */
-    onChangeHandler = (_0: SyntheticEvent<HTMLElement>, data: any) => {
-        this.onChange(data.value);
-    };
-}
-
-export class DropdownSearchFieldState<T> extends FieldState<T> {
-    onChangeHandler = (_0: SyntheticEvent<HTMLElement>, data: { searchQuery: T }) => {
-        this.onChange(data.searchQuery);
-    };
-}
-
-export class DatetimeFieldState extends FieldState<Date | null> {
-    onChangeHandler = (event: { target: { value: Date | null } }) => {
-        this.onChange(event.target.value);
-    };
-}
-
-export interface Option<T> {
-    key: Key;
-    text: ReactNode;
-    value: T;
-}
-
-export function enumToOptions<T>(
-    enumObject: T,
-    nameProvider?: (value: T[keyof T]) => Option<T[keyof T]>['text']
-): Option<T[keyof T]>[] {
-    return getEnumKeys(enumObject).map(k => ({
-        key: k as string,
-        text: nameProvider ? nameProvider(enumObject[k]) : k,
-        value: enumObject[k],
-    }));
-}
-
-export function getEnumKeys<T>(enumObject: T) {
-    let keys = Object.keys(enumObject) as (keyof T)[];
-
-    if (keys.some(k => typeof enumObject[k] === 'number')) {
-        keys = keys.filter(k => typeof enumObject[k] === 'number');
-    }
-
-    return keys;
-}
-
-export function getEnumValues<T>(enumObject: T) {
-    return getEnumKeys(enumObject).map(k => enumObject[k]);
-}
-
-export type FormValues = string | number | boolean | (string | number | boolean)[];
-export interface FormStateAsJS {
-    [index: string]: FormValues | Map<any, any> | Set<any> | FormStateAsJS;
-}
-
-export function traverseFormState<T extends ValidatableMapOrArray>(
-    recursive: boolean,
-    formState: FormState<T>,
-    onFormVisit?: (key: string, form: FormState<any>) => void,
-    onFieldVisit?: (key: string, field: FieldState<any>) => void
-) {
-    const visitChild = (key: string, child: ComposibleValidatable<any>) => {
-        if (child instanceof FormState) {
-            if (recursive) {
-                traverseFormState(recursive, child, onFormVisit, onFieldVisit);
-            }
-            if (onFormVisit) {
-                onFormVisit(key, child);
-            }
-        } else if (onFieldVisit) {
-            onFieldVisit(key, child as FieldState<any>);
-        }
-    };
-
-    if (Array.isArray(formState.$)) {
-        formState.$.forEach((child, index) => visitChild(index.toString(), child));
-    } else {
-        (isObservableMap(formState.$)
-            ? Array.from(formState.$ as Map<any, ComposibleValidatable<any>>)
-            : Object.entries(formState.$ as Record<string, ComposibleValidatable<any>>)
-        ).forEach(([key, child]) => visitChild(key, child));
-    }
-}
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export function BAD_formStateToJS<T extends ValidatableMapOrArray>(formState: FormState<T>) {
-    const formValues = {} as any;
-    traverseFormState(
-        false,
-        formState,
-        (key: any, form: FormState<any>) => (formValues[key] = BAD_formStateToJS(form)),
-        (key: any, field: FieldState<any>) => (formValues[key] = toJS(field.value))
-    );
-    return formValues as unknown as FormStateAsJS;
-}
-
-export type FormStateShape<T> = T extends FormState<infer U>[]
-    ? FormStateMapOrObject<U>[]
-    : FormStateMapOrObject<T>;
-
-type FormStateMapOrObject<T> = T extends Map<infer K, infer V>
-    ? FormStateObject<Record<K & (string | number | symbol), V>>
-    : FormStateObject<T>;
-
-type FormStateObject<T> = {
-    [P in keyof T]: T[P] extends FieldState<infer U>
-        ? U
-        : T[P] extends FormState<infer U>
-        ? FormStateShape<U>
-        : never;
-};
-
-export function formStateToJS<T extends ValidatableMapOrArray>(
-    formState: FormState<T>
-): FormStateShape<T> {
-    const formValues = Array.isArray(formState.$) ? [] : ({} as any);
-    traverseFormState(
-        false,
-        formState,
-        (key: any, form: FormState<any>) => (formValues[key] = formStateToJS(form)),
-        (key: any, field: FieldState<any>) => (formValues[key] = toJS(field.$))
-    );
-    return formValues as unknown as FormStateShape<T>;
-}
-
-export type RecursivePartial<T> = T extends (infer U)[]
-    ? RecursivePartialObject<U>[]
-    : RecursivePartialObject<T>;
-
-type RecursivePartialObject<T> = {
-    [P in keyof T]?: T[P] extends Record<any, any> ? RecursivePartial<T[P]> : T[P];
-};
-
-export function setFormStateValues<T extends ValidatableMapOrArray>(
-    formState: FormState<T>,
-    data: RecursivePartial<FormStateShape<T>>,
-    triggerValidation = false
-): FormState<T> {
-    if (Array.isArray(formState.$) && (data as any[]).length !== formState.$.length) {
-        throw new Error(
-            'Number of elements in data object node is different from number of element in form.' +
-                ' All array nodes should match in size before values can be applied to form.'
-        );
-    }
-    transaction(() => {
-        traverseFormState(
-            false,
-            formState,
-            (key: string, form: FormState<any>) => {
-                if (data instanceof Map || isObservableMap(data)) {
-                    if (data.has(key)) {
-                        setFormStateValues(form, data.get(key));
-                    }
-                } else {
-                    if (Object.prototype.hasOwnProperty.call(data, key)) {
-                        setFormStateValues(form, data[key as keyof typeof data]);
-                    }
-                }
-            },
-            (key: string, field: FieldState<any>) => {
-                if (data instanceof Map || isObservableMap(data)) {
-                    if (data.has(key)) {
-                        runInAction(() => {
-                            field.value = data.get(key);
-                            field.$ = data.get(key);
-                        });
-                    }
-                } else {
-                    if (Object.prototype.hasOwnProperty.call(data, key)) {
-                        runInAction(() => {
-                            field.value = data[key as keyof typeof data];
-                            field.$ = data[key as keyof typeof data];
-                        });
-                    }
-                }
-            }
-        );
-        if (triggerValidation) {
-            const setValidatedSubFields = (form: FormState<any>) => {
-                form.validatedSubFields = (form as any).getValues();
-            };
-            traverseFormState(true, formState, (_0: string, form: FormState<any>) => {
-                setValidatedSubFields(form);
-            });
-            setValidatedSubFields(formState);
-            formState.validate();
-        }
-    });
-    return formState;
-}
-
-export function commitFormState<T extends ValidatableMapOrArray>(formState: FormState<T>) {
-    traverseFormState(true, formState, undefined, (_0: string, field: FieldState<any>) => {
-        field.dirty = false;
-        (field as any)._initValue = field.value;
-    });
-}
-
-export function camelCaseToTitleCase(value: string) {
-    const regexp = /[A-Z](?=[A-Z][a-z])|[^A-Z](?=[A-Z])|[A-Za-z](?=[^A-Za-z])/g;
-    return value.replace(regexp, '$& ');
-}
-
-export function isFormStateChanged<T extends ValidatableMapOrArray>(formState: FormState<T>) {
-    return computed(() => {
-        let isChanged = false;
-        traverseFormState(true, formState, undefined, (_0: string, field: FieldState<any>) => {
-            const isValueChanged = () => {
-                if (field instanceof InputFieldState) {
-                    if ((field as any)._initValue === undefined && field.value === '') {
-                        return false;
-                    }
-                }
-                return !comparer.structural((field as any)._initValue, field.value);
-            };
-            isChanged = isChanged || (field.dirty === true && isValueChanged());
-        });
-        return isChanged;
-    });
-}

package/src/form-validators.ts

@@ -1,106 +0,0 @@
-import { DatetimeFieldState, FormValues } from './form-helpers';
-import { isObservableArray } from 'mobx';
-import { DateRange } from './date-range';
-
-interface DateRangeFieldStates {
-    startDate: DatetimeFieldState;
-    endDate: DatetimeFieldState;
-}
-
-const isDefined = (value: FormValues | undefined) => {
-    if (value === undefined) {
-        return false;
-    }
-
-    if (Array.isArray(value) || isObservableArray(value)) {
-        return !!value.length;
-    }
-
-    return typeof value === 'string' ? !!value.trim() : !!value;
-};
-
-export const FormValidators = {
-    required: (value?: FormValues) =>
-        FormValidators.requiredWithCustomMessage('Value is required')(value),
-
-    requiredWithCustomMessage: (errorMessage: string) => (value?: FormValues) =>
-        !isDefined(value) && errorMessage,
-
-    hasLowerCase: (str: string) => /[a-z]/.test(str),
-
-    hasUpperCase: (str: string) => /[A-Z]/.test(str),
-
-    hasNumber: (str: string) => /\d/.test(str),
-
-    passwordIsValidFormat: (password: string) =>
-        password.length > 7 &&
-        FormValidators.hasLowerCase(password) &&
-        FormValidators.hasUpperCase(password) &&
-        FormValidators.hasNumber(password),
-
-    emailFormatIsValid: (email: string) => {
-        /* tslint:disable: ter-max-len */
-        const regex =
-            /^[a-z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+\/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/i;
-        return email.length !== 0 && regex.test(email);
-    },
-
-    website: (errorMessage = 'Enter valid website') => {
-        return (value: string) =>
-            !/^(https?:\/\/)?(www\.)?([a-zA-Z0-9]+(-?[a-zA-Z0-9])*\.)+[\w]{2,}(\/\S*)?$/i.test(
-                value
-            ) && errorMessage;
-    },
-
-    minDate: new Date(1900, 0, 1),
-
-    maxDate: new Date(2099, 11, 31),
-
-    isDateValid: (date: Date | null) =>
-        (!date || date > FormValidators.maxDate || date < FormValidators.minDate) &&
-        'Please provide a valid date',
-
-    isDateRangeValid: (dateRange: DateRangeFieldStates) =>
-        dateRange.startDate.$ &&
-        dateRange.endDate.$ &&
-        dateRange.startDate.$ > dateRange.endDate.$ &&
-        'Start Date should not be after End Date',
-
-    dateRangeRequired:
-        (errorMessage = 'Date Range is required') =>
-        (dateRange: DateRange | undefined) =>
-            (!dateRange || !dateRange.from || !dateRange.to) && errorMessage,
-
-    dateRangeValid:
-        (errorMessage = 'Start cannot be after End') =>
-        (dateRange: DateRange | undefined) =>
-            !!dateRange &&
-            !!dateRange.from &&
-            !!dateRange.to &&
-            dateRange.from > dateRange.to &&
-            errorMessage,
-
-    isDateRangeLessThanMaxLength: (maxDays: number) => (val: DateRange | undefined) => {
-        const dayInMillseconds = 1000 * 60 * 60 * 24;
-        return (
-            val?.from &&
-            val.to &&
-            (val.to.getTime() - val.from.getTime()) / dayInMillseconds >= maxDays &&
-            `Only ${maxDays} days can be displayed at time`
-        );
-    },
-
-    isAlphaNumeric: (str: string) => /^(\w+,?)*$/.test(str),
-
-    isMatchingRegex: (regexp: RegExp, entity: string) => (str: string) =>
-        !regexp.test(str) && `Invalid format for ${entity}`,
-
-    minLength: (minLength: number) => (value: string | any[] | undefined) =>
-        value && value.length < minLength ? `Value's min length is ${minLength}` : false,
-
-    maxLength: (maxLength: number) => (value: string | any[] | undefined) =>
-        value && value.length > maxLength ? `Value's max length is ${maxLength}` : false,
-
-    exactLength: (exactLength: number) => (value: string | any[] | undefined) =>
-        value && value.length !== exactLength ? `Value's length must be ${exactLength}` : false,
-};

package/src/persistent-form-state/__tests__/domain-storage.test.ts

@@ -1,81 +0,0 @@
-import { DomainStorage } from '../domain-storage';
-
-const newData = {
-    string: 'value',
-    number: 1,
-    simpleObject: {
-        name: 'name value',
-        deepObject: {
-            name2: 'name2 value',
-        },
-    },
-};
-
-describe('domain-storage', () => {
-    test('getItem returns null if the key does not exist', function () {
-        const storage = new DomainStorage({ cacheKey: 'test', version: 1 });
-
-        const data = storage.getItem();
-
-        expect(data).toBe(null);
-    });
-
-    test('getItem returns value from storage', function () {
-        const existingValue = JSON.stringify({ value: newData, version: 1 });
-        localStorage.setItem('test', existingValue);
-        const storage = new DomainStorage<any>({ cacheKey: 'test', version: 1 });
-
-        const data = storage.getItem();
-
-        expect(data).toEqual(newData);
-    });
-
-    test('getItem returns null when the version does not match', function () {
-        const storage = new DomainStorage<any>({ cacheKey: 'test', version: 1 });
-
-        storage.setItem('', newData);
-        const data = storage.getItem();
-        expect(data).toEqual(newData);
-
-        const newStorage = new DomainStorage({ cacheKey: 'test', version: 2 });
-        const newStorageData = newStorage.getItem();
-        expect(newStorageData).toEqual(null);
-    });
-
-    test('getItem returns null when there is invalid formStateCache in storage', function () {
-        localStorage.setItem('test', '{}');
-        const storage = new DomainStorage<any>({ cacheKey: 'test', version: 1 });
-
-        const data = storage.getItem();
-
-        expect(data).toEqual(null);
-        expect(localStorage.removeItem).toHaveBeenCalledWith('test');
-    });
-
-    test('getItem returns null when there is invalid json in storage', function () {
-        localStorage.setItem('test', '{{}');
-        const storage = new DomainStorage<any>({ cacheKey: 'test', version: 1 });
-
-        const data = storage.getItem();
-
-        expect(data).toEqual(null);
-    });
-
-    test('setItem adds value to storage', function () {
-        const storage = new DomainStorage<any>({ cacheKey: 'test', version: 1 });
-
-        storage.setItem('', newData);
-
-        const expectedValue = JSON.stringify({ value: newData, version: 1 });
-        expect(localStorage.getItem('test')).toEqual(expectedValue);
-    });
-
-    test('removeItem removes value from storage', function () {
-        localStorage.setItem('test', '{}');
-        const storage = new DomainStorage<any>({ cacheKey: 'test', version: 1 });
-
-        storage.removeItem();
-
-        expect(localStorage.length).toEqual(0);
-    });
-});

package/src/persistent-form-state/domain-storage.ts

@@ -1,43 +0,0 @@
-import { FormStateShape } from '../form-helpers';
-import { ValidatableMapOrArray } from 'formstate';
-
-interface FormStateCache<T> {
-    version: number;
-    value: FormStateShape<T>;
-}
-
-export class DomainStorage<T extends ValidatableMapOrArray> {
-    private readonly version: number;
-    private readonly cacheKey: string;
-
-    constructor({ cacheKey, version }: { cacheKey: string; version: number }) {
-        this.version = version;
-        this.cacheKey = cacheKey;
-    }
-
-    getItem(): FormStateShape<T> | null {
-        try {
-            const cachedData = localStorage.getItem(this.cacheKey);
-            if (cachedData) {
-                const formData: FormStateCache<T> = JSON.parse(cachedData);
-                if (formData.version === this.version) {
-                    return formData.value;
-                }
-                this.removeItem();
-            }
-        } catch (e) {
-            this.removeItem();
-        }
-
-        return null;
-    }
-
-    removeItem(): void {
-        localStorage.removeItem(this.cacheKey);
-    }
-
-    setItem(_: string, value: FormStateShape<T>): void {
-        const formData = { value, version: this.version };
-        localStorage.setItem(this.cacheKey, JSON.stringify(formData));
-    }
-}

package/src/persistent-form-state/in-memory-storage.ts

@@ -1,32 +0,0 @@
-import { FormStateShape } from '../form-helpers';
-import { ValidatableMapOrArray } from 'formstate';
-
-export class InMemoryStorage<T extends ValidatableMapOrArray> {
-    private storage = new Map<string, FormStateShape<T>>();
-
-    get length() {
-        return this.storage.size;
-    }
-
-    clear(): void {
-        this.storage.clear();
-    }
-
-    getItem(key: string): FormStateShape<T> | null {
-        return this.storage.get(key) !== undefined ? this.storage.get(key)! : null;
-    }
-
-    key(index: number): string | null {
-        return this.length < index ? null : Array.from(this.storage.keys())[index];
-    }
-
-    removeItem(key: string): void {
-        this.storage.delete(key);
-    }
-
-    setItem(key: string, value: FormStateShape<T>): void {
-        this.storage.set(key, value);
-    }
-}
-
-export const MemoryStorage = new InMemoryStorage<any>();

package/src/persistent-form-state/index.ts

@@ -1 +0,0 @@
-export * from './persistent-form-state';

package/src/persistent-form-state/persistent-form-state.ts

@@ -1,68 +0,0 @@
-import { autorun } from 'mobx';
-import { FormState, ValidatableMapOrArray } from 'formstate';
-import { InMemoryStorage, MemoryStorage } from './in-memory-storage';
-import {
-    RecursivePartial,
-    FormStateShape,
-    setFormStateValues,
-    formStateToJS,
-} from '../form-helpers';
-import { DomainStorage } from './domain-storage';
-
-export enum PersistenceMode {
-    Session,
-    Domain,
-    InMemory,
-}
-
-export class PersistentFormState<T extends ValidatableMapOrArray> extends FormState<T> {
-    private storageSystem!: InMemoryStorage<T> | DomainStorage<T>;
-    private resetFormSuper = this.reset;
-
-    constructor(
-        $: T,
-        private cacheKey: string,
-        private persistenceMode: PersistenceMode,
-        autoSave?: boolean,
-        version?: number
-    ) {
-        super($);
-
-        if (PersistenceMode.Domain === this.persistenceMode) {
-            if (!version) {
-                throw 'Set a data structure version.';
-            }
-            this.storageSystem = new DomainStorage<T>({ cacheKey, version });
-        } else if (PersistenceMode.Session === this.persistenceMode) {
-            throw 'Use of Session storage is currently unsafe';
-        } else {
-            this.storageSystem = MemoryStorage;
-        }
-
-        this.getCached();
-        if (autoSave) {
-            this.trackChange();
-        }
-    }
-
-    save = () => {
-        this.storageSystem.setItem(this.cacheKey, formStateToJS(this));
-    };
-
-    resetForm = () => {
-        this.resetFormSuper();
-        this.storageSystem.removeItem(this.cacheKey);
-    };
-
-    private trackChange = () => {
-        autorun(() => this.save(), { delay: 500 });
-    };
-
-    private getCached = () => {
-        const data = this.storageSystem.getItem(this.cacheKey);
-
-        if (data) {
-            setFormStateValues(this, data as unknown as RecursivePartial<FormStateShape<T>>);
-        }
-    };
-}