@servicetitan/form 14.3.0 → 16.0.2

package/src/date-range-picker/date-range-picker.tsx

@@ -0,0 +1,297 @@
+import { ComponentType, Component, SyntheticEvent } from 'react';
+import {
+    DateRangePicker as DateRangePickerKendo,
+    DateRangePickerChangeEvent,
+    CalendarHeaderTitleProps,
+    MultiViewCalendarProps,
+    CalendarCellProps,
+    ActiveView,
+} from '@progress/kendo-react-dateinputs';
+import { Icon, InputDateMask, Stack } from '@servicetitan/design-system';
+import { observable, action, makeObservable } from 'mobx';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+import moment from 'moment';
+import * as Styles from './date-range-picker.module.css';
+import { FieldState } from 'formstate';
+import { DateRange } from '../date-range';
+
+export interface DateRangePickerProps {
+    field: FieldState<DateRange | undefined>;
+    ['qa-testing']: string;
+    placeHolder?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    calendarMinDate?: Date;
+    calendarMaxDate?: Date;
+    topView?: ActiveView;
+    bottomView?: ActiveView;
+    className?: string;
+    calendarComponent?: ComponentType<MultiViewCalendarProps>;
+    headerTitleComponent?: ComponentType<CalendarHeaderTitleProps>;
+    cellComponent?: ComponentType<CalendarCellProps>;
+    inputFormat?: string;
+    horizontalAlign?: 'left' | 'center' | 'right';
+    disabled?: boolean;
+    small?: boolean;
+    disableRangeValidation?: boolean;
+    maskChar?: string;
+}
+
+@observer
+export class DateRangePicker extends Component<DateRangePickerProps> {
+    // `HTMLDivElement` leads to issues with Node/SSR
+    @observable wrapElem?: any /* HTMLDivElement */;
+    isFocused = false;
+    @observable showDatePicker = false;
+    isIconClicked = false;
+
+    constructor(props: DateRangePickerProps) {
+        super(props);
+        makeObservable(this);
+    }
+
+    @action
+    handleRef = (wrapElem: HTMLDivElement) => {
+        this.wrapElem = wrapElem;
+    };
+
+    @action
+    toggleShow(show?: boolean) {
+        this.showDatePicker = show !== undefined ? show : !this.showDatePicker;
+    }
+
+    handleFocus = (evt: Event) => {
+        if (!(evt.target instanceof Node)) {
+            return;
+        }
+
+        const isPrevFocused = this.isFocused;
+
+        this.isFocused = this.wrapElem!.contains(evt.target);
+
+        if (!this.isFocused && isPrevFocused) {
+            // click outside
+            this.props.field.enableAutoValidationAndValidate();
+
+            this.toggleShow(false);
+        } else if (this.isFocused && !isPrevFocused && !this.isIconClicked) {
+            // click inside but outside icons
+            this.props.field.disableAutoValidation();
+        }
+
+        this.isIconClicked = false;
+    };
+
+    handleClickIcon = () => {
+        this.isIconClicked = true;
+
+        if (this.showDatePicker) {
+            this.props.field.enableAutoValidationAndValidate();
+        } else {
+            this.props.field.disableAutoValidation();
+        }
+
+        this.toggleShow();
+    };
+
+    componentDidMount() {
+        window.addEventListener('focus', this.handleFocus, true);
+        window.addEventListener('click', this.handleFocus);
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('focus', this.handleFocus, true);
+        window.removeEventListener('click', this.handleFocus);
+    }
+
+    handleChange = (event: DateRangePickerChangeEvent) => {
+        const value = event.target.value;
+
+        if (value.start && value.end && value.start > value.end) {
+            [value.start, value.end] = [value.end, value.start];
+        }
+
+        this.props.field.onChange({ from: value.start ?? undefined, to: value.end ?? undefined });
+    };
+
+    handleFromChange = (from?: Date) => {
+        const to = this.props.field.value ? this.props.field.value.to : undefined;
+
+        if (from || to) {
+            this.props.field.onChange({ from, to });
+        } else {
+            this.props.field.onChange(undefined);
+        }
+    };
+
+    handleToChange = (to?: Date) => {
+        const from = this.props.field.value ? this.props.field.value.from : undefined;
+
+        if (from || to) {
+            this.props.field.onChange({ from, to });
+        } else {
+            this.props.field.onChange(undefined);
+        }
+    };
+
+    render() {
+        const { hasError } = this.props.field;
+        const {
+            'qa-testing': qaTestingLocator,
+            placeHolder,
+            inputFormat,
+            className,
+            calendarComponent,
+            headerTitleComponent,
+            cellComponent,
+            minDate,
+            maxDate,
+            calendarMinDate,
+            calendarMaxDate,
+            topView,
+            bottomView,
+            horizontalAlign,
+            disabled = false,
+            small,
+            maskChar,
+        } = this.props;
+
+        const value = this.props.field.value ? this.props.field.value : {};
+
+        const horizontalAlignClass = classnames({
+            [Styles.popupCenter]: horizontalAlign === 'center',
+            [Styles.popupRight]: horizontalAlign === 'right',
+        });
+
+        return (
+            <div className={classnames(Styles.dateRangePicker, className)} ref={this.handleRef}>
+                <DateRangePickerKendo
+                    className={Styles.dateRangePickerKendo}
+                    calendarSettings={{
+                        min: minDate ?? calendarMinDate,
+                        max: maxDate ?? calendarMaxDate,
+                        topView,
+                        bottomView,
+                        disabled,
+                        mode: 'range',
+                        headerTitle: headerTitleComponent,
+                        cell: cellComponent,
+                    }}
+                    popupSettings={{
+                        appendTo: this.wrapElem,
+                        className: horizontalAlignClass,
+                    }}
+                    startDateInputSettings={{
+                        tabIndex: -1,
+                    }}
+                    endDateInputSettings={{
+                        tabIndex: -1,
+                    }}
+                    show={this.showDatePicker}
+                    value={{ start: value.from ?? null, end: value.to ?? null }}
+                    onChange={this.handleChange}
+                    min={minDate}
+                    max={maxDate}
+                    calendar={calendarComponent}
+                />
+                <Stack alignItems="center" className="flex-grow-1">
+                    <Stack.Item fill>
+                        <InputDateMask
+                            shortLabel={
+                                <Icon
+                                    name="today"
+                                    className={classnames(
+                                        'cursor-pointer',
+                                        `${qaTestingLocator}-icon-from`
+                                    )}
+                                    onClick={this.handleClickIcon}
+                                />
+                            }
+                            placeholder={placeHolder}
+                            value={value.from}
+                            onChange={this.handleFromChange}
+                            error={hasError}
+                            disabled={disabled}
+                            qa-testing={`${qaTestingLocator}-from`}
+                            dateFormat={inputFormat}
+                            minDate={minDate}
+                            maxDate={this.maxFromDate}
+                            small={small}
+                            maskChar={maskChar}
+                        />
+                    </Stack.Item>
+                    <Icon name="arrow_forward" className={Styles.endLabel} />
+                    <Stack.Item fill>
+                        <InputDateMask
+                            shortLabel={
+                                <Icon
+                                    name="today"
+                                    className={classnames(
+                                        'cursor-pointer',
+                                        `${qaTestingLocator}-icon-to`
+                                    )}
+                                    onClick={this.handleClickIcon}
+                                />
+                            }
+                            placeholder={placeHolder}
+                            value={value.to}
+                            onChange={this.handleToChange}
+                            error={hasError}
+                            disabled={disabled}
+                            qa-testing={`${qaTestingLocator}-to`}
+                            dateFormat={inputFormat}
+                            minDate={this.minToDate}
+                            maxDate={maxDate}
+                            small={small}
+                            maskChar={maskChar}
+                        />
+                    </Stack.Item>
+                </Stack>
+                <input
+                    hidden
+                    qa-testing={qaTestingLocator}
+                    onChange={this.handleHiddenInputChange}
+                />
+            </div>
+        );
+    }
+
+    formatDate(date?: Date, inputFormat = 'L') {
+        return date ? moment(date).format(inputFormat) : '';
+    }
+
+    handleHiddenInputChange = (ev: SyntheticEvent<HTMLInputElement>) => {
+        const values = ev.currentTarget.value.split('-').map(v => new Date(v));
+        this.props.field.onChange({ from: values[0] || undefined, to: values[1] || undefined });
+    };
+
+    get maxFromDate() {
+        const { disableRangeValidation, maxDate, field } = this.props;
+        if (disableRangeValidation) {
+            return maxDate;
+        }
+
+        const to = field.value ? field.value.to : undefined;
+
+        if (maxDate && to) {
+            return maxDate > to ? to : maxDate;
+        }
+
+        return maxDate ?? to;
+    }
+
+    get minToDate() {
+        const { disableRangeValidation, minDate, field } = this.props;
+        if (disableRangeValidation) {
+            return minDate;
+        }
+
+        const from = field.value ? field.value.from : undefined;
+        if (minDate && from) {
+            return minDate < from ? from : minDate;
+        }
+
+        return minDate ?? from;
+    }
+}

package/src/date-range-picker/index.ts

@@ -0,0 +1 @@
+export * from './date-range-picker';

package/src/demo/date-range-picker.tsx

@@ -0,0 +1,33 @@
+import { Fragment, useRef, FC } from 'react';
+
+import { observer } from 'mobx-react';
+
+import { Text } from '@servicetitan/design-system';
+
+import { DateRangePicker } from '..';
+
+import { FieldState } from 'formstate';
+import { DateRange } from '../date-range';
+
+function useDateRangeField<T extends DateRange | undefined>(initial: T) {
+    return useRef(new FieldState(initial)).current;
+}
+
+export const DateRangePickerExample: FC = observer(() => {
+    const defaultField = useDateRangeField<DateRange | undefined>(undefined);
+
+    return (
+        <Fragment>
+            <Text size={4} className="m-b-half">
+                Default
+            </Text>
+            <DateRangePicker
+                maskChar="X"
+                field={defaultField}
+                qa-testing="qa-date-range-picker"
+                horizontalAlign="right"
+                small
+            />
+        </Fragment>
+    );
+});

package/src/demo/index.ts

@@ -1,4 +1,8 @@
 export * from './color-picker';
+export * from './date-range-picker';
 export * from './dropdown-state';
 export * from './file-uploader';
 export * from './number-input';
+export * from './phone-number-input';
+export * from './original-number-input';
+export * from './input-date-mask';

package/src/demo/input-date-mask.tsx

@@ -0,0 +1,30 @@
+import { FC, Fragment, useRef } from 'react';
+
+import { observer } from 'mobx-react';
+
+import { Text, Icon } from '@servicetitan/design-system';
+
+import { FieldState } from 'formstate';
+
+import { InputDateMask } from '..';
+
+function useInputDateMaskField<T extends Date | undefined>(initial: T) {
+    return useRef(new FieldState(initial)).current;
+}
+
+export const InputDateMaskExample: FC = observer(() => {
+    const defaultField = useInputDateMaskField(undefined);
+
+    return (
+        <Fragment>
+            <Text size={4} className="m-b-half">
+                Default
+            </Text>
+            <InputDateMask
+                value={defaultField.value}
+                onChange={defaultField.onChange}
+                shortLabel={<Icon name="event" />}
+            />
+        </Fragment>
+    );
+});

package/src/demo/original-number-input.tsx

@@ -0,0 +1,32 @@
+import { FC, Fragment, useRef } from 'react';
+
+import { observer } from 'mobx-react';
+
+import { Text } from '@servicetitan/design-system';
+
+import { FieldState } from 'formstate';
+
+import { OrdinalNumberInput } from '..';
+
+function useOrdinalNumberInputField<T extends number | undefined>(initial: T) {
+    return useRef(new FieldState(initial)).current;
+}
+
+export const OrdinalNumberInputExample: FC = observer(() => {
+    const defaultField = useOrdinalNumberInputField(undefined);
+
+    return (
+        <Fragment>
+            <Text size={4} className="m-b-half">
+                Default
+            </Text>
+            <OrdinalNumberInput
+                value={defaultField.value}
+                onChange={defaultField.onChange}
+                min={1}
+                max={31}
+                placeholder="1 - 31"
+            />
+        </Fragment>
+    );
+});

package/src/demo/phone-number-input.tsx

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+
+import { observer } from 'mobx-react';
+
+import { PhoneNumberInput } from '..';
+
+export const PhoneNumberInputExample: FC = observer(() => (
+    <PhoneNumberInput placeholder="(123) 456-7890" label="Phone" />
+));

package/src/index.ts

@@ -8,3 +8,7 @@ export * from './dropdown-state';
 export * from './form-helpers';
 export * from './form-validators';
 export * from './masked-input';
+export * from './date-range-picker';
+export * from './phone-number-input';
+export * from './original-number-input';
+export * from './input-date-mask';

package/src/input-date-mask/index.ts

@@ -0,0 +1 @@
+export * from './input-date-mask';

package/src/input-date-mask/input-date-mask.module.css

@@ -0,0 +1,22 @@
+.input {
+    font-size: var(--typescale-2);
+    flex-grow: 1;
+}
+
+.input :global(.label) {
+    background-color: var(--color-neutral-30);
+    border: 1px solid var(--color-neutral-60);
+    font-size: var(--typescale-3);
+    color: var(--color-neutral-90);
+}
+
+.input.error :global(.label) {
+    transition: all 0.2s ease-in-out;
+    color: var(--color-red-500) !important;
+    border-color: var(--color-red-500) !important;
+    background-color: var(--color-red-100) !important;
+}
+
+.input.error input:focus {
+    border-left-color: transparent !important;
+}

package/src/input-date-mask/input-date-mask.module.css.d.ts

@@ -0,0 +1,4 @@
+export const __esModule: true;
+export const input: string;
+export const error: string;
+

package/src/input-date-mask/input-date-mask.tsx

@@ -0,0 +1,157 @@
+import { FC, ChangeEvent, useEffect, InputHTMLAttributes } from 'react';
+import { Input, InputProps } from '@servicetitan/design-system';
+import { action } from 'mobx';
+import { useLocalStore, observer } from 'mobx-react';
+import moment from 'moment';
+import InputMask from 'react-input-mask';
+import classnames from 'classnames';
+import * as Styles from './input-date-mask.module.css';
+
+const KEY_DEL = 46;
+
+interface InputDateMaskStore {
+    maskValue: string;
+    setMask(maskValue: string): void;
+}
+
+export interface InputDateMaskProps extends Omit<InputProps, 'onChange' | 'value'> {
+    value?: Date;
+    ['qa-testing']?: string;
+    maskChar?: string;
+    alwaysShowMask?: boolean;
+    dateFormat?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    onChange(value: Date | undefined): void;
+}
+
+export const InputDateMask: FC<InputDateMaskProps> = observer(
+    ({
+        className,
+        maskChar = 'X',
+        alwaysShowMask,
+        shortLabel,
+        value,
+        onChange,
+        'qa-testing': qaTestingLocator,
+        error,
+        disabled,
+        placeholder,
+        dateFormat = 'MM/DD/YYYY',
+        minDate,
+        maxDate,
+    }: InputDateMaskProps) => {
+        const state = useLocalStore(() => ({
+            maskValue: '',
+            setMask: action(function (this: InputDateMaskStore, mask: string) {
+                this.maskValue = mask;
+            }),
+        }));
+
+        const handleKeyDown = (evt: any) => {
+            if (evt.keyCode === KEY_DEL) {
+                onChange(undefined);
+
+                state.setMask('');
+            }
+        };
+
+        const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+            const value = event.target.value;
+
+            state.setMask(value);
+
+            if (event.type === 'focus' || event.type === 'blur') {
+                return;
+            }
+
+            if (isMaskValid(value)) {
+                onChange(parseDate(value));
+            } else {
+                onChange(undefined);
+            }
+        };
+
+        useEffect(() => {
+            if (value === undefined && isMaskValid(state.maskValue)) {
+                state.setMask('');
+            }
+        }, [value]); // eslint-disable-line react-hooks/exhaustive-deps
+
+        const getMaskError = () => {
+            return value === undefined && state.maskValue !== '' && isMaskInvalid(state.maskValue);
+        };
+
+        const getValueError = () => {
+            return value !== undefined && !isDateInRange(value);
+        };
+
+        const formatDate = (date?: Date) => {
+            return date ? moment(date).format(dateFormat) : '';
+        };
+
+        const parseDate = (date: string) => {
+            return moment(date, dateFormat).toDate();
+        };
+
+        const isMaskValid = (mask: string) => {
+            return !mask.includes(maskChar) && isDateStringValid(mask);
+        };
+
+        const isMaskInvalid = (mask: string) => {
+            return !mask.includes(maskChar) && !isDateStringValid(mask);
+        };
+
+        const isDateStringValid = (date: string) => {
+            return moment(date, dateFormat).isValid() && isDateInRange(parseDate(date));
+        };
+
+        const isDateInRange = (date: Date) => {
+            if (minDate && maxDate) {
+                return date >= minDate && date <= maxDate;
+            } else if (minDate) {
+                return date >= minDate;
+            } else if (maxDate) {
+                return date <= maxDate;
+            }
+
+            return true;
+        };
+
+        const mask = dateFormat.replace(/[MDY]/g, '9');
+
+        const realError = error || getMaskError() || getValueError();
+
+        const realPlaceholder = placeholder || mask.replace(/9/g, maskChar);
+
+        const classes = classnames(className, qaTestingLocator, Styles.input, {
+            [Styles.error]: realError,
+        });
+
+        return (
+            <InputMask
+                mask={mask}
+                maskChar={maskChar}
+                onChange={handleChange}
+                onKeyDown={handleKeyDown}
+                alwaysShowMask={alwaysShowMask}
+                value={formatDate(value) || state.maskValue}
+            >
+                {({ size, ...props }: InputHTMLAttributes<HTMLInputElement>) => (
+                    <div>
+                        <Input
+                            {...props}
+                            shortLabel={shortLabel}
+                            className={classes}
+                            small
+                            fluid
+                            error={realError}
+                            disabled={disabled}
+                            placeholder={realPlaceholder}
+                        />
+                    </div>
+                )}
+            </InputMask>
+        );
+    }
+);

package/src/original-number-input/__tests__/ordinal-number-input.test.tsx

@@ -0,0 +1,51 @@
+import { parseIntIntoRange, ordinalString } from '../ordinal-number-input';
+
+describe('[Common] OrdinalNumberInput', () => {
+    describe('parseDayInput', () => {
+        it('parses numeric input.', () => {
+            expect(parseIntIntoRange('2', 1, 31)).toEqual(2);
+        });
+        it('parses mixed input starting with number.', () => {
+            expect(parseIntIntoRange('2asdf', 1, 31)).toEqual(2);
+        });
+        it('sets input value to empty string when cannot parse.', () => {
+            expect(parseIntIntoRange('asdf2', 1, 31)).toEqual(undefined);
+        });
+        it('forces input lower than bounds into valid range.', () => {
+            expect(parseIntIntoRange('0', 1, 31)).toEqual(1);
+        });
+        it('forces input higher than bounds into valid range.', () => {
+            expect(parseIntIntoRange('32', 1, 31)).toEqual(31);
+        });
+    });
+    describe('formatDay', () => {
+        it("appends 'st'", () => {
+            expect(ordinalString(1)).toEqual('1st');
+            expect(ordinalString(21)).toEqual('21st');
+        });
+        it("appends 'nd'", () => {
+            expect(ordinalString(2)).toEqual('2nd');
+            expect(ordinalString(22)).toEqual('22nd');
+        });
+        it("appends 'rd'", () => {
+            expect(ordinalString(3)).toEqual('3rd');
+            expect(ordinalString(23)).toEqual('23rd');
+        });
+        it("appends 'th'", () => {
+            expect(ordinalString(4)).toEqual('4th');
+            expect(ordinalString(24)).toEqual('24th');
+        });
+        it("appends 'th' to 11", () => {
+            expect(ordinalString(11)).toEqual('11th');
+            expect(ordinalString(111)).toEqual('111th');
+        });
+        it("appends 'th' to 12", () => {
+            expect(ordinalString(12)).toEqual('12th');
+            expect(ordinalString(112)).toEqual('112th');
+        });
+        it("appends 'th' to 13", () => {
+            expect(ordinalString(13)).toEqual('13th');
+            expect(ordinalString(113)).toEqual('113th');
+        });
+    });
+});

package/src/original-number-input/index.ts

@@ -0,0 +1 @@
+export * from './ordinal-number-input';