@servicetitan/form 22.3.0 → 22.4.0

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

@@ -1,55 +0,0 @@
-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/date-range.ts

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

package/src/demo/dropdown-state.tsx

@@ -1,233 +0,0 @@
-import { useRef, Fragment, FC } from 'react';
-
-import { InMemoryDataSource, AsyncDataSource, FilterDescriptor } from '@servicetitan/data-query';
-
-import {
-    AnvilSelect,
-    AnvilSelectOptionsProps,
-    Text,
-    ButtonGroup,
-    Button,
-} from '@servicetitan/design-system';
-
-import { FieldState } from 'formstate';
-import { observer } from 'mobx-react';
-
-import { DropdownState, DropdownOption } from '..';
-
-function useDropdownField<T>(initial: T) {
-    return useRef(new FieldState(initial)).current;
-}
-
-function useDropdownState<T extends DropdownOption<any>>(state: DropdownState<T>) {
-    return useRef(state).current;
-}
-
-interface Planet extends DropdownOption<number> {
-    diameter: number;
-    moons: number;
-}
-
-const options: Planet[] = [
-    { value: 1, text: 'Alderaan', diameter: 12500, moons: 0 },
-    { value: 2, text: 'Bespin', diameter: 118000, moons: 2 },
-    { value: 3, text: 'Coruscant', diameter: 12240, moons: 4 },
-    { value: 4, text: 'Dagobah', diameter: 14410, moons: 0 },
-    { value: 5, text: 'Hoth', diameter: 7200, moons: 3 },
-    { value: 6, text: 'Kashyyyk', diameter: 12765, moons: 3 },
-    { value: 7, text: 'Naboo', diameter: 12120, moons: 3 },
-    { value: 8, text: 'Tatooine', diameter: 10465, moons: 3 },
-    { value: 9, text: 'Yavin', diameter: 200000, moons: 26 },
-];
-
-interface Character extends DropdownOption<number> {
-    group: string;
-}
-
-const optionsWithGroups: Character[] = [
-    { value: 1, text: 'Hem Dazon', group: 'Arcona' },
-    { value: 2, text: 'El-Les', group: 'Arcona' },
-    { value: 3, text: 'Jheeg', group: 'Arcona' },
-    { value: 4, text: 'Paploo', group: 'Ewok' },
-    { value: 5, text: 'Gallo', group: 'Gungan' },
-    { value: 6, text: 'Lyonie', group: 'Gungan' },
-    { value: 7, text: 'Tobler Ceel', group: 'Gungan' },
-    { value: 8, text: 'Ganne', group: 'Gungan' },
-    { value: 9, text: 'Augara Jowil', group: 'Gungan' },
-    { value: 10, text: 'Reegesk', group: 'Ranat' },
-    { value: 11, text: 'Rik-tak', group: 'Ranat' },
-    { value: 12, text: 'Bahb', group: 'Zeltron' },
-    { value: 13, text: 'Chantique', group: 'Zeltron' },
-    { value: 14, text: 'Luxa', group: 'Zeltron' },
-    { value: 15, text: 'Rahuhl', group: 'Zeltron' },
-];
-
-const InMemoryDropdownStateExample: FC = observer(() => {
-    const field = useDropdownField<AnvilSelectOptionsProps[]>([]);
-    const state = useDropdownState(
-        new DropdownState<Planet | Character>({
-            dataSource: new InMemoryDataSource(options),
-        })
-    );
-
-    const handleChange = (data: AnvilSelectOptionsProps | AnvilSelectOptionsProps[]) => {
-        field.onChange(Array.isArray(data) ? data : [data]);
-    };
-
-    const withReset = (handler: () => void) => {
-        return async () => {
-            handleChange([]);
-            state.setSearch('');
-            state.setDataSource(null);
-            state.setSearchByGroup(false);
-            state.setSort([{ field: 'text' }]);
-            state.setFilter(null);
-            state.setGroup([{ field: 'group' }]);
-
-            await Promise.resolve();
-
-            handler();
-        };
-    };
-
-    const withoutGroups = withReset(() => {
-        state.setDataSource(new InMemoryDataSource(options));
-    });
-
-    const withGroups = withReset(() => {
-        state.setDataSource(new InMemoryDataSource(optionsWithGroups));
-    });
-
-    const withGroupsAndSearch = withReset(() => {
-        state.setDataSource(new InMemoryDataSource(optionsWithGroups));
-        state.setSearchByGroup(true);
-    });
-
-    const customSort = withReset(() => {
-        state.setDataSource(new InMemoryDataSource(options));
-        state.setSort([{ field: 'diameter', dir: 'desc' }]);
-    });
-
-    const customFilter = withReset(() => {
-        state.setDataSource(new InMemoryDataSource(options));
-        state.setFilter({
-            logic: 'and',
-            filters: [{ field: 'diameter', value: 12250, operator: 'gte' }],
-        });
-    });
-
-    const customGroup = withReset(() => {
-        state.setDataSource(new InMemoryDataSource(options));
-        state.setGroup([{ field: 'moons', dir: 'desc' }]);
-    });
-
-    return (
-        <Fragment>
-            <AnvilSelect
-                value={field.value}
-                onChange={handleChange}
-                options={state.options}
-                search={{ value: state.search, onChange: state.onSearchChange }}
-                multiple
-            />
-
-            <Text size={4} className="m-t-4 m-b-half">
-                Without groups
-            </Text>
-            <Button onClick={withoutGroups}>Apply</Button>
-
-            <Text size={4} className="m-t-4 m-b-half">
-                With groups
-            </Text>
-            <ButtonGroup>
-                <Button onClick={withGroups}>Search in options</Button>
-                <Button onClick={withGroupsAndSearch}>Search in options & groups</Button>
-            </ButtonGroup>
-
-            <Text size={4} className="m-t-4 m-b-half">
-                Custom sort
-            </Text>
-            <Button onClick={customSort}>Apply</Button>
-
-            <Text size={4} className="m-t-4 m-b-half">
-                Custom filter
-            </Text>
-            <Button onClick={customFilter}>Apply</Button>
-
-            <Text size={4} className="m-t-4 m-b-half">
-                Custom group
-            </Text>
-            <Button onClick={customGroup}>Apply</Button>
-        </Fragment>
-    );
-});
-
-const AsyncDropdownStateExample: FC = observer(() => {
-    const field = useDropdownField<AnvilSelectOptionsProps[]>([]);
-    const state = useDropdownState(
-        new DropdownState<Planet>({
-            dataSource: new AsyncDataSource(
-                {
-                    async get({ filter }) {
-                        const search = (filter?.filters?.[0] as FilterDescriptor | undefined)
-                            ?.value as string | undefined;
-
-                        const result = search
-                            ? options.filter(({ text }) =>
-                                  text.toLowerCase().includes(search.toLowerCase())
-                              )
-                            : options;
-
-                        await new Promise(resolver => setTimeout(resolver, 1000));
-
-                        return {
-                            data: result,
-                            total: result.length,
-                        };
-                    },
-                },
-                undefined,
-                true
-            ),
-            lazy: true,
-        })
-    );
-
-    const handleChange = (data: AnvilSelectOptionsProps | AnvilSelectOptionsProps[]) => {
-        field.onChange(Array.isArray(data) ? data : [data]);
-    };
-
-    const handleOpenChange = (open: boolean) => {
-        if (open) {
-            state.fetch();
-        }
-    };
-
-    return (
-        <AnvilSelect
-            value={field.value}
-            onChange={handleChange}
-            options={state.options}
-            search={{ value: state.search, onChange: state.onSearchChange }}
-            onOpenChange={handleOpenChange}
-            loading={state.loading}
-            multiple
-        />
-    );
-});
-
-export const DropdownStateExample: FC = () => {
-    return (
-        <Fragment>
-            <Text size={5} className="m-b-half">
-                InMemoryDataSource
-            </Text>
-            <InMemoryDropdownStateExample />
-
-            <Text size={5} className="m-t-5 m-b-half">
-                AsyncDataSource
-            </Text>
-            <AsyncDropdownStateExample />
-        </Fragment>
-    );
-};

package/src/dropdown-state.ts

@@ -1,205 +0,0 @@
-import { ChangeEvent } from 'react';
-import {
-    State,
-    SortDescriptor,
-    CompositeFilterDescriptor,
-    GroupDescriptor,
-    GroupResult,
-    DataSource,
-} from '@servicetitan/data-query';
-
-import { InputOnChangeData, AnvilSelectOptionsProps } from '@servicetitan/design-system';
-
-import { observable, computed, action, runInAction, makeObservable } from 'mobx';
-
-import debounce from 'debounce';
-
-function isGroupItem<T>(item: T | GroupResult<T>, groupedBy: string): item is GroupResult<T> {
-    const { items, field } = item as GroupResult<T>;
-    return !!items && field === groupedBy;
-}
-
-export interface DropdownOption<T> {
-    value: T;
-    text: string;
-}
-
-interface DropdownStateConstructorParams<T> {
-    dataSource?: DataSource<T>;
-    searchByGroup?: boolean;
-    state?: {
-        sort?: SortDescriptor[];
-        filter?: CompositeFilterDescriptor;
-        group?: [GroupDescriptor];
-    };
-    lazy?: boolean;
-}
-
-export class DropdownState<T extends DropdownOption<any>> {
-    @observable loading = false;
-    @observable search = '';
-
-    @computed get options() {
-        const result = new Map<T[keyof T], AnvilSelectOptionsProps>();
-        const flat: AnvilSelectOptionsProps[] = [];
-
-        const groupField = this.group[0].field;
-
-        this.traverse(
-            this.data,
-            item => {
-                const group = item[groupField as keyof T];
-
-                if (group) {
-                    if (result.has(group)) {
-                        result.get(group)?.options?.push(item);
-                    } else {
-                        result.set(group, {
-                            value: group,
-                            text: String(group),
-                            options: [item],
-                        });
-                    }
-                } else {
-                    flat.push(item);
-                }
-            },
-            groupField
-        );
-
-        return [...flat, ...Array.from(result.values())];
-    }
-
-    @computed get state() {
-        return {
-            sort: this.sort,
-            filter:
-                this.searchFilter || this.filter
-                    ? this.searchFilter && this.filter
-                        ? { logic: 'and', filters: [this.searchFilter, this.filter] }
-                        : this.searchFilter ?? this.filter
-                    : undefined,
-            group: this.group,
-        } as State;
-    }
-
-    @computed private get searchFilter() {
-        if (!this.search) {
-            return undefined;
-        }
-
-        const filter = { operator: 'contains', value: this.search, ignoreCase: true };
-
-        return {
-            logic: 'or',
-            filters: [
-                { ...filter, field: 'text' },
-                ...(this.searchByGroup ? [{ ...filter, field: 'group' }] : []),
-            ],
-        } as CompositeFilterDescriptor;
-    }
-
-    @observable private dataSource: DataSource<T> | null;
-    @observable private searchByGroup: boolean;
-    @observable private sort: SortDescriptor[];
-    @observable private filter: CompositeFilterDescriptor | null;
-    @observable private group: [GroupDescriptor];
-
-    @observable private data: T[] | GroupResult<T>[] = [];
-
-    constructor({
-        dataSource,
-        searchByGroup,
-        state,
-        lazy,
-    }: DropdownStateConstructorParams<T> = {}) {
-        makeObservable(this);
-
-        this.dataSource = dataSource ?? null;
-        this.searchByGroup = searchByGroup ?? false;
-        this.sort = state?.sort ?? [{ field: 'text' }];
-        this.filter = state?.filter ?? null;
-        this.group = state?.group ?? [{ field: 'group' }];
-
-        if (!lazy) {
-            this.fetch();
-        }
-    }
-
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    onSearchChange = (() => {
-        const fetch = debounce(() => this.fetch(), 100);
-        return (_0: ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => {
-            runInAction(() => {
-                this.search = data.value;
-            });
-            fetch();
-        };
-    })();
-
-    @action
-    setSearch = async (search: string) => {
-        this.search = search;
-        await this.fetch();
-    };
-
-    @action
-    setDataSource = async (dataSource: DataSource<T> | null) => {
-        this.dataSource = dataSource;
-        await this.fetch();
-    };
-
-    @action
-    setSearchByGroup = async (searchByGroup: boolean) => {
-        this.searchByGroup = searchByGroup;
-        await this.fetch();
-    };
-
-    @action
-    setSort = async (sort: SortDescriptor[]) => {
-        this.sort = sort;
-        await this.fetch();
-    };
-
-    @action
-    setFilter = async (filter: CompositeFilterDescriptor | null) => {
-        this.filter = filter;
-        await this.fetch();
-    };
-
-    @action
-    setGroup = async (group: [GroupDescriptor]) => {
-        this.group = group;
-        await this.fetch();
-    };
-
-    @action
-    fetch = async () => {
-        this.loading = true;
-
-        const response = await this.dataSource?.getData(this.state);
-
-        runInAction(() => {
-            this.data = response?.data ?? [];
-            this.loading = false;
-        });
-    };
-
-    private traverse = (
-        items: T[] | GroupResult<T>[],
-        itemCallback: (item: T) => void,
-        groupedBy: string
-    ) => {
-        if (!items) {
-            return;
-        }
-
-        for (const item of items) {
-            if (isGroupItem(item, groupedBy)) {
-                this.traverse(item.items, itemCallback, groupedBy);
-            } else {
-                itemCallback(item);
-            }
-        }
-    };
-}