@ultraviolet/form 1.0.0

package/dist/components/SelectInputField/index.js

@@ -0,0 +1,138 @@
+import { SelectInput } from '@ultraviolet/ui';
+import { useMemo, Children, useCallback } from 'react';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useErrors } from '../../providers/ErrorContext/index.js';
+import { useFormField } from '../../hooks/useFormField.js';
+
+const identity = x => x;
+const SelectInputField = _ref => {
+  let {
+    animation,
+    animationDuration,
+    animationOnChange,
+    children,
+    className,
+    disabled,
+    error: errorProp,
+    format: formatProp = identity,
+    formatOnBlur,
+    id,
+    inputId,
+    isClearable,
+    isLoading,
+    isSearchable,
+    label = '',
+    maxLength,
+    menuPortalTarget,
+    minLength,
+    multiple,
+    name,
+    onBlur,
+    onChange,
+    onFocus,
+    options: optionsProp,
+    parse: parseProp = identity,
+    placeholder,
+    readOnly,
+    required,
+    value,
+    noTopLabel,
+    noOptionsMessage,
+    customStyle,
+    'data-testid': dataTestId
+  } = _ref;
+  const {
+    getError
+  } = useErrors();
+  const options = useMemo(() => optionsProp || Children.toArray(children).flat().filter(Boolean).map(_ref2 => {
+    let {
+      props: {
+        children: labelChild,
+        ...option
+      }
+    } = _ref2;
+    return {
+      ...option,
+      label: labelChild
+    };
+  }), [optionsProp, children]);
+  const parse = useMemo(() => multiple ? parseProp : option => parseProp(option?.value ?? null, name), [multiple, parseProp, name]);
+  const format = useCallback(val => {
+    if (multiple) return formatProp(val, name);
+    const find = (opts, valueToFind) => opts?.find(option => option.value === valueToFind);
+    let selected = '';
+    if (val && options) {
+      // TODO: find a proper way to simplify format with recursive options
+      selected = find(options, val);
+      if (!selected) {
+        selected = options.map(curr => find(curr.options, val)).filter(identity);
+        if (Array.isArray(selected) && selected.length === 0) {
+          selected = '';
+        }
+      }
+    }
+    return formatProp(selected, name);
+  }, [formatProp, multiple, name, options]);
+  const {
+    input,
+    meta
+  } = useFormField(name, {
+    disabled,
+    format,
+    formatOnBlur,
+    maxLength,
+    minLength: minLength || required ? 1 : undefined,
+    multiple,
+    parse,
+    required,
+    value
+  });
+  const error = getError({
+    errorProp,
+    label,
+    meta: meta,
+    name,
+    value: input.value
+  });
+  return jsx(SelectInput, {
+    animation: animation,
+    animationDuration: animationDuration,
+    animationOnChange: animationOnChange,
+    className: className,
+    disabled: disabled,
+    error: error,
+    id: id,
+    inputId: inputId,
+    isClearable: isClearable,
+    isLoading: isLoading,
+    isMulti: input.multiple,
+    customStyle: customStyle,
+    isSearchable: isSearchable,
+    menuPortalTarget: menuPortalTarget,
+    name: name,
+    onBlur: event => {
+      input.onBlur(event);
+      onBlur?.(event);
+    },
+    onChange: (event, action) => {
+      input.onChange(event);
+      onChange?.(event, action);
+    },
+    onFocus: event => {
+      input.onFocus(event);
+      onFocus?.(event);
+    },
+    options: options,
+    placeholder: placeholder,
+    readOnly: readOnly,
+    value: input.value,
+    noTopLabel: noTopLabel,
+    required: required,
+    noOptionsMessage: noOptionsMessage,
+    "data-testid": dataTestId,
+    children: children
+  });
+};
+SelectInputField.Option = SelectInput.Option;
+
+export { SelectInputField };

package/dist/components/SelectableCardField/index.js

@@ -0,0 +1,73 @@
+import { SelectableCard } from '@ultraviolet/ui';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useErrors } from '../../providers/ErrorContext/index.js';
+import { useFormField } from '../../hooks/useFormField.js';
+
+const SelectableCardField = _ref => {
+  let {
+    name,
+    value,
+    onChange,
+    showTick,
+    type,
+    disabled,
+    children,
+    className,
+    onFocus,
+    onBlur,
+    required,
+    validate,
+    tooltip,
+    id,
+    label,
+    'data-testid': dataTestId
+  } = _ref;
+  const {
+    getError
+  } = useErrors();
+  const {
+    input,
+    meta
+  } = useFormField(name, {
+    disabled,
+    required,
+    type: type ?? 'radio',
+    validate,
+    value
+  });
+  const error = getError({
+    label: name,
+    meta: meta,
+    name,
+    value: input.value
+  });
+  return jsx(SelectableCard, {
+    isError: !!error,
+    showTick: showTick,
+    checked: input.checked,
+    className: className,
+    disabled: disabled,
+    name: input.name,
+    onChange: event => {
+      input.onChange(event);
+      onChange?.(event);
+    },
+    onBlur: event => {
+      input.onBlur(event);
+      onBlur?.(event);
+    },
+    onFocus: event => {
+      input.onFocus(event);
+      onFocus?.(event);
+    },
+    type: type,
+    value: input.value,
+    id: id,
+    tooltip: tooltip,
+    label: label,
+    "data-testid": dataTestId,
+    children: children
+  });
+};
+
+export { SelectableCardField };

package/dist/components/Submit/index.js

@@ -0,0 +1,49 @@
+import { Button } from '@ultraviolet/ui';
+import { useState, useEffect } from 'react';
+import { useFormState } from 'react-final-form';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const Submit = _ref => {
+  let {
+    children,
+    className,
+    disabled = false,
+    icon,
+    iconPosition,
+    size,
+    variant = 'filled',
+    sentiment = 'success',
+    tooltip
+  } = _ref;
+  const {
+    invalid,
+    submitting,
+    hasValidationErrors,
+    dirtySinceLastSubmit
+  } = useFormState({
+    subscription: {
+      dirtySinceLastSubmit: true,
+      hasValidationErrors: true,
+      invalid: true,
+      submitting: true
+    }
+  });
+  const [isLoading, setIsLoading] = useState(true);
+  const isDisabled = disabled || submitting || isLoading || invalid && hasValidationErrors && !dirtySinceLastSubmit;
+  useEffect(() => setIsLoading(false), []);
+  return jsx(Button, {
+    className: className,
+    disabled: isDisabled,
+    icon: icon,
+    iconPosition: iconPosition,
+    isLoading: submitting,
+    size: size,
+    type: "submit",
+    variant: variant,
+    sentiment: sentiment,
+    tooltip: tooltip,
+    children: children
+  });
+};
+
+export { Submit };

package/dist/components/SubmitErrorAlert/index.js

@@ -0,0 +1,26 @@
+import { Alert } from '@ultraviolet/ui';
+import { FormSpy } from 'react-final-form';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const SubmitErrorAlert = _ref => {
+  let {
+    className
+  } = _ref;
+  return jsx(FormSpy, {
+    subscription: {
+      submitError: true
+    },
+    children: _ref2 => {
+      let {
+        submitError
+      } = _ref2;
+      return submitError ? jsx(Alert, {
+        className: className,
+        sentiment: "danger",
+        children: submitError
+      }) : null;
+    }
+  });
+};
+
+export { SubmitErrorAlert };

package/dist/components/TagInputField/index.js

@@ -0,0 +1,45 @@
+import { TagInput } from '@ultraviolet/ui';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useFormField } from '../../hooks/useFormField.js';
+
+const TagInputField = _ref => {
+  let {
+    className,
+    'data-testid': dataTestId,
+    disabled,
+    id,
+    name,
+    onChange,
+    placeholder,
+    required,
+    tags,
+    validate,
+    variant
+  } = _ref;
+  const {
+    input
+  } = useFormField(name, {
+    disabled,
+    required,
+    initialValue: tags,
+    type: 'text',
+    validate,
+    value: tags
+  });
+  return jsx(TagInput, {
+    className: className,
+    disabled: disabled,
+    id: id,
+    name: name,
+    onChange: event => {
+      onChange?.(event);
+      input.onChange(event);
+    },
+    placeholder: placeholder,
+    variant: variant,
+    tags: input.value,
+    "data-testid": dataTestId
+  });
+};
+
+export { TagInputField };

package/dist/components/TextInputField/index.js

@@ -0,0 +1,154 @@
+import { TextInput } from '@ultraviolet/ui';
+import { forwardRef } from 'react';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useErrors } from '../../providers/ErrorContext/index.js';
+import { useFormField } from '../../hooks/useFormField.js';
+
+const TextInputField = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    afterSubmit,
+    allowNull,
+    autoCapitalize,
+    autoComplete,
+    autoCorrect,
+    autoFocus,
+    autoSave,
+    beforeSubmit,
+    className,
+    cols,
+    'data-testid': dataTestId,
+    defaultValue,
+    disabled,
+    fillAvailable,
+    format,
+    formatOnBlur,
+    generated,
+    id,
+    initialValue,
+    isEqual,
+    label = '',
+    max,
+    maxLength,
+    min,
+    minLength,
+    multiline,
+    multiple,
+    name,
+    noTopLabel,
+    notice,
+    onBlur,
+    onChange,
+    onFocus,
+    onKeyDown,
+    onKeyUp,
+    parse,
+    placeholder,
+    random,
+    readOnly,
+    regex,
+    required,
+    resizable,
+    rows,
+    subscription,
+    type,
+    unit,
+    size,
+    validate,
+    validateFields,
+    valid,
+    value
+  } = _ref;
+  const {
+    getError
+  } = useErrors();
+  const {
+    input,
+    meta
+  } = useFormField(name, {
+    afterSubmit,
+    allowNull,
+    beforeSubmit,
+    defaultValue,
+    disabled,
+    format,
+    formatOnBlur,
+    initialValue,
+    isEqual,
+    max,
+    maxLength,
+    min,
+    minLength,
+    multiple,
+    parse,
+    regex,
+    required,
+    subscription,
+    type,
+    validate,
+    validateFields,
+    value
+  });
+  const error = getError({
+    label,
+    max,
+    maxLength,
+    meta: meta,
+    min,
+    minLength,
+    name,
+    regex,
+    value: input.value
+  });
+  return jsx(TextInput, {
+    autoCapitalize: autoCapitalize,
+    autoComplete: autoComplete,
+    autoCorrect: autoCorrect,
+    autoFocus: autoFocus,
+    autoSave: autoSave,
+    className: className,
+    cols: cols,
+    "data-testid": dataTestId,
+    disabled: disabled,
+    error: error,
+    fillAvailable: fillAvailable,
+    generated: generated,
+    id: id,
+    label: label,
+    max: max,
+    maxLength: maxLength,
+    min: min,
+    minLength: minLength,
+    multiline: multiline,
+    name: input.name,
+    notice: notice,
+    onBlur: event => {
+      input.onBlur(event);
+      onBlur?.(event);
+    },
+    onChange: event => {
+      input.onChange(event);
+      onChange?.(event);
+    },
+    onFocus: event => {
+      input.onFocus(event);
+      onFocus?.(event);
+    },
+    onKeyUp: onKeyUp,
+    onKeyDown: onKeyDown,
+    placeholder: placeholder,
+    random: random,
+    readOnly: readOnly,
+    ref: ref,
+    required: required,
+    resizable: resizable,
+    rows: rows,
+    type: input.type,
+    value: input.value,
+    noTopLabel: noTopLabel,
+    unit: unit,
+    valid: valid,
+    size: size
+  });
+});
+
+export { TextInputField };

package/dist/components/TimeField/index.js

@@ -0,0 +1,90 @@
+import { TimeInput } from '@ultraviolet/ui';
+import { useMemo } from 'react';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useFormField } from '../../hooks/useFormField.js';
+
+const parseTime = date => {
+  const timeStr = date && typeof date !== 'string' ? date.toLocaleTimeString().slice(0, -3) : '';
+  return {
+    label: timeStr,
+    value: timeStr
+  };
+};
+const TimeField = _ref => {
+  let {
+    required,
+    name,
+    schedule,
+    placeholder,
+    disabled,
+    initialValue,
+    validate,
+    readOnly,
+    value,
+    onChange,
+    onBlur,
+    onFocus,
+    isLoading,
+    isClearable,
+    inputId,
+    id,
+    formatOnBlur,
+    animation,
+    animationDuration,
+    animationOnChange,
+    className,
+    isSearchable,
+    options,
+    'data-testid': dataTestId
+  } = _ref;
+  const {
+    input,
+    meta
+  } = useFormField(name, {
+    disabled,
+    formatOnBlur,
+    initialValue,
+    required,
+    validate,
+    value
+  });
+  const error = useMemo(() => input.value && meta.error ? meta.error : undefined, [input.value, meta.error]);
+  return jsx(TimeInput, {
+    placeholder: placeholder,
+    schedule: schedule,
+    required: required,
+    value: parseTime(input.value),
+    onChange: (val, action) => {
+      if (!val) return;
+      onChange?.(val, action);
+      const [hours, minutes] = val.value.split(':');
+      const date = input.value ? new Date(input.value) : new Date();
+      date.setHours(Number(hours), Number(minutes), 0);
+      input.onChange(date);
+    },
+    onBlur: event => {
+      input.onBlur(event);
+      onBlur?.(event);
+    },
+    onFocus: event => {
+      input.onFocus(event);
+      onFocus?.(event);
+    },
+    error: error,
+    disabled: disabled,
+    readOnly: readOnly,
+    animation: animation,
+    animationDuration: animationDuration,
+    animationOnChange: animationOnChange,
+    className: className,
+    isLoading: isLoading,
+    isClearable: isClearable,
+    isSearchable: isSearchable,
+    inputId: inputId,
+    id: id,
+    options: options,
+    "data-testid": dataTestId
+  });
+};
+
+export { TimeField };

package/dist/components/ToggleField/index.js

@@ -0,0 +1,73 @@
+import { Toggle } from '@ultraviolet/ui';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useFormField } from '../../hooks/useFormField.js';
+
+const ToggleField = _ref => {
+  let {
+    afterSubmit,
+    allowNull,
+    beforeSubmit,
+    className,
+    data,
+    defaultValue,
+    disabled,
+    format,
+    formatOnBlur,
+    initialValue,
+    isEqual,
+    label,
+    multiple,
+    name,
+    onChange,
+    parse,
+    required,
+    size,
+    subscription,
+    tooltip,
+    validate,
+    validateFields,
+    value,
+    labelPosition,
+    'data-testid': dataTestId
+  } = _ref;
+  const {
+    input
+  } = useFormField(name, {
+    afterSubmit,
+    allowNull,
+    beforeSubmit,
+    data,
+    defaultValue,
+    disabled,
+    format,
+    formatOnBlur,
+    initialValue,
+    isEqual,
+    multiple,
+    parse,
+    required,
+    subscription,
+    type: 'checkbox',
+    validate,
+    validateFields,
+    value
+  });
+  return jsx(Toggle, {
+    checked: input.checked,
+    tooltip: tooltip,
+    onChange: event => {
+      input.onChange(event);
+      onChange?.(event);
+    },
+    label: label,
+    size: size,
+    name: name,
+    disabled: disabled,
+    labelPosition: labelPosition,
+    className: className,
+    required: required,
+    "data-testid": dataTestId
+  });
+};
+
+export { ToggleField };

package/dist/helpers/pickValidators.js

@@ -0,0 +1,8 @@
+import validators from '../validators/index.js';
+
+const pickValidators = args => Object.entries(args).map(_ref => {
+  let [key, value] = _ref;
+  return value !== undefined ? validators[key]?.(value) : undefined;
+}).filter(validator => !!validator);
+
+export { pickValidators };