@servicetitan/form-state 22.4.0

package/src/__tests__/form-helpers.test.ts

@@ -0,0 +1,229 @@
+import { FormState, FieldState } from 'formstate';
+import {
+    commitFormState,
+    formStateToJS,
+    BAD_formStateToJS,
+    InputFieldState,
+    traverseFormState,
+    setFormStateValues,
+} from '../form-helpers';
+
+const getFormState = () =>
+    new FormState({
+        field: new InputFieldState(0),
+        subForm: new FormState({
+            subField: new InputFieldState(1),
+            subSubForm: new FormState({
+                subSubField: new InputFieldState(1),
+                subSubField2: new InputFieldState(2),
+            }),
+            subSubFormArray: new FormState([
+                new FormState({
+                    veryNestedField: new FieldState(1),
+                }),
+            ]),
+            subSubFormMap: new FormState(
+                new Map([
+                    ['subSubMapField', new FieldState('x')],
+                    ['subSubMapField2', new FieldState('y')],
+                ])
+            ),
+        }),
+        subFormArray: new FormState([
+            new FormState({
+                a: new InputFieldState(1),
+            }),
+        ]),
+        subFormArray2: new FormState([new InputFieldState(1), new InputFieldState(2)]),
+        subFormMap: new FormState(
+            new Map([
+                ['subMapField', new FieldState('one')],
+                ['subMapField2', new FieldState('two')],
+                ['subMapField3', new FieldState('three')],
+            ])
+        ),
+    });
+
+test('traverseFormState recursive', () => {
+    const form = getFormState();
+    const traverseResult: string[] = [];
+    traverseFormState(
+        true,
+        form,
+        key => {
+            traverseResult.push(key);
+        },
+        key => {
+            traverseResult.push(key);
+        }
+    );
+
+    expect(traverseResult).toContain('field');
+    expect(traverseResult).toContain('subForm');
+    expect(traverseResult).toContain('subField');
+    expect(traverseResult).toContain('veryNestedField');
+    expect(traverseResult).toContain('subSubMapField');
+});
+
+test('traverseFormState non recursive', () => {
+    const form = getFormState();
+    const traverseResult: string[] = [];
+    traverseFormState(
+        false,
+        form,
+        key => {
+            traverseResult.push(key);
+        },
+        key => {
+            traverseResult.push(key);
+        }
+    );
+
+    expect(traverseResult).toContain('field');
+    expect(traverseResult).toContain('subForm');
+    expect(traverseResult).not.toContain('subField');
+});
+
+test('formStateToJS', () => {
+    const form = getFormState();
+    const formStateAsJS = formStateToJS(form);
+
+    expect(formStateAsJS).toMatchSnapshot();
+});
+
+test('formStateToJS complex types', () => {
+    const data = {
+        a: {
+            '1': 1,
+            'string': 'string',
+            'true': true,
+        },
+        b: [3, 5, 7],
+        c: {
+            x: 1,
+            y: 'string',
+            z: true,
+        },
+        d: {
+            '1': true,
+            '2': {
+                x: 2,
+            },
+        },
+    };
+
+    const mapForm = new Map<string, FieldState<boolean> | FormState<{ x: FieldState<number> }>>([
+        ['1', new FieldState<boolean>(true)],
+        [
+            '2',
+            new FormState({
+                x: new FieldState(2),
+            }),
+        ],
+    ]);
+
+    const form = new FormState({
+        a: new FieldState(data.a),
+        b: new FieldState(data.b),
+        c: new FieldState(data.c),
+        d: new FormState(mapForm),
+    });
+
+    expect(formStateToJS(form)).toEqual(data);
+    expect(BAD_formStateToJS(form)).toEqual(data);
+});
+
+test('setFormStateValues', () => {
+    const form = setFormStateValues(getFormState(), {
+        field: 2,
+        subForm: {
+            subSubForm: {
+                subSubField: undefined,
+            },
+            subSubFormMap: { subSubMapField2: 'z' },
+        },
+        subFormArray2: [3, 4],
+        subFormMap: { subMapField: 'infinity' },
+    });
+
+    expect(form.$.field.value).toBe(2);
+    expect(form.$.subForm.$.subSubForm.$.subSubField.value).toBe(undefined);
+    expect(form.$.subForm.$.subSubForm.$.subSubField2.value).toBe(2);
+    expect(form.$.subForm.$.subSubFormMap.$.get('subSubMapField2')!.value).toBe('z');
+    expect(form.$.subFormArray2.$.map(item => item.value)).toEqual([3, 4]);
+    expect(form.$.subFormMap.$.get('subMapField')!.value).toBe('infinity');
+});
+
+test('setFormStateValues array length mismatch', () => {
+    const form = new FormState([
+        new FormState({
+            a: new FieldState(1),
+            b: new FormState([
+                new FormState({
+                    c: new FieldState(1),
+                    d: new FieldState(1),
+                }),
+            ]),
+        }),
+    ]);
+
+    expect(() => setFormStateValues(form, [{ a: 1 }, { a: 2 }])).toThrowError(/Number of elements/);
+    expect(() => setFormStateValues(form, [{ a: 1, b: [{ c: 1 }, { c: 1 }] }])).toThrowError(
+        /Number of elements/
+    );
+});
+
+test('setFormStateValues top level array', () => {
+    const formState = new FormState([
+        new FormState({ a: new FieldState(1), b: new FieldState(2) }),
+        new FormState({ a: new FieldState(1), b: new FieldState(2) }),
+    ]);
+    setFormStateValues(formState, [
+        { a: 4, b: 5 },
+        { a: 5, b: 6 },
+    ]);
+
+    expect(formState.$[0].$.a.value).toBe(4);
+    expect(formState.$[0].$.b.value).toBe(5);
+    expect(formState.$[1].$.a.value).toBe(5);
+    expect(formState.$[1].$.b.value).toBe(6);
+});
+
+test('setFormStateValues top level map', () => {
+    const formState = new FormState(
+        new Map([
+            ['a', new FormState({ a: new FieldState(1), b: new FieldState(2) })],
+            ['b', new FormState({ a: new FieldState(1), b: new FieldState(2) })],
+        ])
+    );
+    setFormStateValues(formState, {
+        a: { a: 4, b: 5 },
+        b: { a: 5, b: 6 },
+    });
+
+    expect(formState.$.get('a')!.$.a.value).toBe(4);
+    expect(formState.$.get('a')!.$.b.value).toBe(5);
+    expect(formState.$.get('b')!.$.a.value).toBe(5);
+    expect(formState.$.get('b')!.$.b.value).toBe(6);
+});
+
+test('commitFormState', () => {
+    const form = getFormState();
+    const oldFieldValue = form.$.field.value;
+    const newFieldValue = oldFieldValue + 1;
+    const oldSubFieldValue = form.$.subForm.$.subField.value;
+    const newSubFieldValue = oldSubFieldValue + 1;
+
+    form.$.field.value = newFieldValue;
+    form.$.subForm.$.subField.value = newSubFieldValue;
+    form.reset();
+    expect(form.$.field.value).toBe(oldFieldValue);
+    expect(form.$.subForm.$.subField.value).toBe(oldSubFieldValue);
+
+    form.$.field.value = newFieldValue;
+    form.$.subForm.$.subField.value = newSubFieldValue;
+    commitFormState(form);
+    form.reset();
+    expect(form.$.field.value).toBe(newFieldValue);
+    expect(form.$.subForm.$.subField.value).toBe(newSubFieldValue);
+});

package/src/__tests__/form-validators.test.ts

@@ -0,0 +1,55 @@
+import { FormValidators } from '../form-validators';
+
+describe('FormValidators', () => {
+    describe('website', () => {
+        const exec = FormValidators.website();
+
+        it('should return false if website url is valid', () => {
+            for (const url of [
+                'servicetitan.com',
+                'www.servicetitan.com',
+                'http://servicetitan.com',
+                'http://wwww.servicetitan.com',
+                'https://servicetitan.com',
+                'https://wwww.servicetitan.com',
+                'something.servicetitan.com',
+            ]) {
+                expect(exec(url)).toBeFalsy();
+            }
+        });
+
+        it('should return error message if website url is not valid', () => {
+            for (const url of [
+                'servicetitan.c',
+                'servicetitan',
+                'htp://servicetitan.com',
+                'http://wwww.servicetitan.com!',
+                'https://servicetitan.com:',
+                'https://wwww.servic:etitan.com',
+            ]) {
+                expect(exec(url)).toBeTruthy();
+            }
+        });
+    });
+
+    describe('exactLength', () => {
+        const exactLength = 10;
+        const exec = FormValidators.exactLength(exactLength);
+
+        it('should return error message if value length is greater than defined', () => {
+            expect(exec('a'.repeat(exactLength + 1))).toBeTruthy();
+        });
+
+        it('should return error message if value length is less than defined', () => {
+            expect(exec('a'.repeat(exactLength - 1))).toBeTruthy();
+        });
+
+        it('should return false if value length is equal to defined', () => {
+            expect(exec('a'.repeat(exactLength))).toBeFalsy();
+        });
+
+        it('should return false if value is undefined', () => {
+            expect(exec(undefined)).toBeFalsy();
+        });
+    });
+});

package/src/async-lazy-dropdown-state/async-lazy-dropdown-state.stories.tsx

@@ -0,0 +1,66 @@
+import { FC, useState } from 'react';
+import { useAsyncLazyDropdownState } from './use-async-lazy-dropdown-state';
+import { AnvilSelectOptionsProps, Form } from '@servicetitan/design-system';
+import { observer } from 'mobx-react';
+import { DropdownOption } from '../dropdown-state';
+
+export default {
+    title: 'Marketing Form/Async Select Helper',
+    component: useAsyncLazyDropdownState,
+    parameters: {},
+};
+
+const dataFetcher = async (searchString: string) => {
+    const options = [
+        { value: 1, text: 'Australia' },
+        { value: 2, text: 'America' },
+        { value: 3, text: 'New Zealand' },
+        { value: 4, text: 'Spain' },
+        { value: 5, text: 'Turkey' },
+        { value: 6, text: 'India' },
+        { value: 7, text: 'Russia' },
+        { value: 8, text: 'Poland' },
+        { value: 9, text: 'Canada' },
+    ];
+    // simulating remote api call
+    const res = await new Promise<DropdownOption<any>[]>(resolve => {
+        setTimeout(() => {
+            const resultNumber = 3;
+            const filteredOptions = options.filter(o =>
+                o.text.toLowerCase().includes(searchString.toLowerCase())
+            );
+            if (filteredOptions.length > resultNumber) {
+                filteredOptions.length = resultNumber;
+            }
+            resolve(filteredOptions);
+        }, 1000);
+    });
+    return res;
+};
+
+const BasicExample: FC = observer(() => {
+    const [value, setValue] = useState<AnvilSelectOptionsProps>();
+    const [state, onOpenChange] = useAsyncLazyDropdownState(value, dataFetcher);
+
+    return (
+        <Form.AnvilSelect
+            label="Async Select (For Selects that have to fetch options from a remote server)"
+            onChange={setValue}
+            small
+            scrollHeight="250px"
+            trigger={{}}
+            search={{
+                value: state.search,
+                placeholder: 'type something',
+                onChange: state.onSearchChange,
+            }}
+            value={value}
+            onOpenChange={onOpenChange}
+            loading={state.loading}
+            options={state.optionsWithValue}
+            multiple
+        />
+    );
+});
+
+export const basic = () => <BasicExample />;

package/src/async-lazy-dropdown-state/async-lazy-dropdown-state.ts

@@ -0,0 +1,77 @@
+import { computed, makeObservable } from 'mobx';
+import { AsyncDataSource } from '@servicetitan/data-query';
+import { AnvilSelectOptionsProps, AnvilSelectPropsStrict } from '@servicetitan/design-system';
+import { DropdownOption, DropdownState } from '../dropdown-state';
+
+export type DataFetcher = (searchQuery: string) => Promise<DropdownOption<any>[]>;
+
+export class AsyncLazyDropdownState<T extends DropdownOption<any>> extends DropdownState<T> {
+    private arrayValue: AnvilSelectOptionsProps[] = [];
+
+    constructor(dataFetcher: DataFetcher) {
+        super({
+            dataSource: new AsyncDataSource({
+                get: async () => {
+                    const result: any[] = await dataFetcher(this.search);
+
+                    return {
+                        data: result,
+                        total: result.length,
+                    };
+                },
+            }),
+            lazy: true,
+        });
+
+        makeObservable(this);
+    }
+
+    @computed
+    get optionsWithValue() {
+        return this.getOptionsWithValue();
+    }
+
+    onChange = (value: AnvilSelectPropsStrict['value']) => {
+        const isEmptyValue = value === undefined || (Array.isArray(value) && value.length === 0);
+
+        this.arrayValue = isEmptyValue ? [] : !Array.isArray(value) ? [value!] : value;
+    };
+
+    setDataFetcher(dataFetcher: DataFetcher) {
+        this.setDataSource(
+            new AsyncDataSource({
+                get: async () => {
+                    const result: any[] = await dataFetcher(this.search);
+
+                    return {
+                        data: result,
+                        total: result.length,
+                    };
+                },
+            })
+        );
+    }
+
+    private getOptionsWithValue = () => {
+        const options = [...this.options];
+
+        if (!this.search) {
+            const values = this.arrayValue;
+
+            const selectedOptions = options.filter(
+                option => !!values.find(value => value.value === option.value)
+            );
+
+            const unselectedOptions = options.filter(
+                option => !values.find(value => value.value === option.value)
+            );
+
+            const missingSelectedOptions = values.filter(
+                value => !options.some(option => option.value === value.value)
+            );
+            return [...missingSelectedOptions, ...selectedOptions, ...unselectedOptions];
+        }
+
+        return options;
+    };
+}

package/src/async-lazy-dropdown-state/index.ts

@@ -0,0 +1,2 @@
+export * from './async-lazy-dropdown-state';
+export * from './use-async-lazy-dropdown-state';

package/src/async-lazy-dropdown-state/use-async-lazy-dropdown-state.ts

@@ -0,0 +1,38 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { AnvilSelectPropsStrict } from '@servicetitan/design-system';
+import { AsyncLazyDropdownState, DataFetcher } from './async-lazy-dropdown-state';
+import { DropdownOption } from '../dropdown-state';
+
+export const useAsyncLazyDropdownState = (
+    value: AnvilSelectPropsStrict['value'],
+    // try memoising dataFetcher
+    dataFetcher: DataFetcher
+) => {
+    const [state] = useState(() => new AsyncLazyDropdownState(dataFetcher));
+    useEffect(() => {
+        state.onChange(value);
+    }, [state, value]);
+
+    const isInitialMount = useRef(true);
+    useEffect(() => {
+        if (isInitialMount.current) {
+            isInitialMount.current = false;
+        } else {
+            state.setDataFetcher(dataFetcher);
+        }
+    }, [state, dataFetcher]);
+
+    const onOpenChange = useCallback(
+        (open: boolean) => {
+            if (open) {
+                state.setSearch('');
+            }
+        },
+        [state]
+    );
+
+    return [state, onOpenChange] as [
+        AsyncLazyDropdownState<DropdownOption<any>>,
+        (open: boolean) => void
+    ];
+};

package/src/date-range.ts

@@ -0,0 +1,4 @@
+export interface DateRange {
+    from?: Date;
+    to?: Date;
+}