@servicetitan/form-state 22.4.0

package/src/form-validators.ts

@@ -0,0 +1,106 @@
+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/index.ts

@@ -0,0 +1,5 @@
+export * from './date-range';
+export * from './persistent-form-state';
+export * from './dropdown-state';
+export * from './form-helpers';
+export * from './form-validators';

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

@@ -0,0 +1,81 @@
+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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,32 @@
+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

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

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

@@ -0,0 +1,68 @@
+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>>);
+        }
+    };
+}