refactor(Field): complete migration to wrapWithField wrapper (#425)

Author: tenphi

.changeset/friendly-books-compare.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Add casting property to Field component to cast Field value to different type that input allows

src/components/forms/FileInput/FileInput.tsx

@@ -22,7 +22,7 @@ import {
   tasty,
 } from '../../../tasty';
 import { FieldBaseProps } from '../../../shared';
-import { FieldWrapper } from '../FieldWrapper';
+import { wrapWithField } from '../wrapper';
 
 import type { AriaTextFieldProps } from '@react-types/textfield';
 
@@ -135,6 +135,8 @@ function extractContents(element, callback) {
 }
 
 function FileInput(props: CubeFileInputProps, ref) {
+  props = useProviderProps(props);
+
   let {
     id,
     name,
@@ -163,11 +165,14 @@ function FileInput(props: CubeFileInputProps, ref) {
     type = 'file',
     inputProps,
     ...otherProps
-  } = useProviderProps(props);
+  } = props;
+
   const [value, setValue] = useState();
   const [dragHover, setDragHover] = useState(false);
+
   let domRef = useRef(null);
   let defaultInputRef = useRef(null);
+
   inputRef = inputRef || defaultInputRef;
 
   let styles = extractStyles(otherProps, CONTAINER_STYLES);
@@ -247,31 +252,10 @@ function FileInput(props: CubeFileInputProps, ref) {
     </FileInputElement>
   );
 
-  return (
-    <FieldWrapper
-      {...{
-        labelPosition,
-        label,
-        extra,
-        styles,
-        isRequired,
-        labelStyles,
-        necessityIndicator,
-        necessityLabel,
-        labelProps,
-        isDisabled,
-        validationState,
-        message,
-        description,
-        requiredMark,
-        tooltip,
-        isHidden,
-        labelSuffix,
-        Component: fileInput,
-        ref: domRef,
-      }}
-    />
-  );
+  return wrapWithField(fileInput, domRef, {
+    ...props,
+    styles,
+  });
 }
 
 /**

src/components/forms/Form/ComplexForm.stories.tsx

@@ -36,43 +36,43 @@ export default {
   parameters: { controls: { exclude: baseProps } },
 };
 
-const UnknownSubmitErrorTemplate: StoryFn<typeof Form> = (args) => {
-  const [form] = Form.useForm();
-
-  return (
-    <Form
-      form={form}
-      {...args}
-      onSubmit={(v) => {
-        console.log('onSubmit:', v);
-
-        throw new Error('Unknown error');
-      }}
-      onSubmitFailed={(e) => {
-        console.log('onSubmitFailed', e);
-      }}
-      onValuesChange={(v) => {
-        console.log('onChange', v);
-      }}
-    >
-      <Field
-        name="text"
-        label="Text input"
-        rules={[
-          () => ({
-            async validator() {
-              await timeout(1000);
-            },
-          }),
-        ]}
-      >
-        <TextInput />
-      </Field>
-      <Submit>Submit</Submit>
-      <SubmitError />
-    </Form>
-  );
-};
+// const UnknownSubmitErrorTemplate: StoryFn<typeof Form> = (args) => {
+//   const [form] = Form.useForm();
+//
+//   return (
+//     <Form
+//       form={form}
+//       {...args}
+//       onSubmit={(v) => {
+//         console.log('onSubmit:', v);
+//
+//         throw new Error('Unknown error');
+//       }}
+//       onSubmitFailed={(e) => {
+//         console.log('onSubmitFailed', e);
+//       }}
+//       onValuesChange={(v) => {
+//         console.log('onChange', v);
+//       }}
+//     >
+//       <Field
+//         name="text"
+//         label="Text input"
+//         rules={[
+//           () => ({
+//             async validator() {
+//               await timeout(1000);
+//             },
+//           }),
+//         ]}
+//       >
+//         <TextInput />
+//       </Field>
+//       <Submit>Submit</Submit>
+//       <SubmitError />
+//     </Form>
+//   );
+// };
 
 const CustomSubmitErrorTemplate: StoryFn<typeof Form> = (args) => {
   const [form] = Form.useForm();
@@ -387,8 +387,8 @@ ErrorMessage.play = CustomErrorMessage.play = async ({ canvasElement }) => {
   await waitFor(() => expect(canvas.getByRole('alert')).toBeInTheDocument());
 };
 
-export const UnknownErrorMessage = UnknownSubmitErrorTemplate.bind({});
-
+// export const UnknownErrorMessage = UnknownSubmitErrorTemplate.bind({});
+//
 // UnknownErrorMessage.play = async ({ canvasElement }) => {
 //   const canvas = within(canvasElement);
 //   const button = await canvas.getByRole('button');

src/components/forms/Form/types.ts

@@ -8,7 +8,7 @@ export type CubeFieldData<Name extends string, Value> = {
   readonly name: Name;
   errors: ReactNode[];
   value?: Value;
-  inputValue?: Value;
+  inputValue?: Value | string | undefined | null;
   touched?: boolean;
   rules?: any[];
   validating?: boolean;

src/components/forms/Form/use-field/use-field-props.tsx

@@ -77,7 +77,6 @@ export function useFieldProps<
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const onBlurChained = useChainedCallback(
     field?.onBlur,
-    // TODO: remove type casting after updating to [email protected]
     'onBlur' in props ? (props as any).onBlur : undefined,
   );
 

src/components/forms/Form/use-field/use-field.ts

@@ -172,11 +172,13 @@ export function useField<T extends FieldTypes, Props extends CubeFieldProps<T>>(
     }
   });
 
+  let inputValue = field?.inputValue;
+
   return useMemo(
     () => ({
       id: fieldId,
       name: fieldName,
-      value: field?.inputValue,
+      value: inputValue,
       validateTrigger,
       form,
       field,

src/components/forms/Slider/SliderBase.tsx

@@ -4,10 +4,11 @@ import { FocusableRef } from '@react-types/shared';
 import { SliderState, useSliderState } from 'react-stately';
 import { useSlider, useNumberFormatter } from 'react-aria';
 
-import { FieldWrapper } from '../FieldWrapper';
 import { extractStyles, OUTER_STYLES, tasty } from '../../../tasty';
 import { useFieldProps, useFormProps } from '../Form';
 import { Text } from '../../content/Text';
+import { mergeProps } from '../../../utils/react';
+import { wrapWithField } from '../wrapper';
 
 import { SliderControlsElement, SliderElement } from './elements';
 import { CubeSliderBaseProps } from './types';
@@ -211,27 +212,17 @@ function SliderBase(
 
   styles = extractStyles(otherProps, OUTER_STYLES, styles);
 
-  return (
-    <FieldWrapper
-      {...{
-        labelPosition,
-        label,
-        extra,
+  return wrapWithField(
+    sliderField,
+    ref,
+    mergeProps(
+      {
+        ...props,
         styles,
-        isRequired,
-        labelStyles,
-        necessityIndicator,
-        labelProps,
-        isDisabled,
-        validationState,
-        message,
-        description,
-        requiredMark,
-        labelSuffix,
-        Component: sliderField,
-        ref: ref,
-      }}
-    />
+        extra,
+      },
+      { labelProps },
+    ),
   );
 }
 

src/components/forms/wrapper.tsx

@@ -1,4 +1,5 @@
 import { ReactElement, RefObject } from 'react';
+import { FocusableRef } from '@react-types/shared';
 
 import { FieldBaseProps, FormBaseProps } from '../../shared';
 import { BaseProps, Styles } from '../../tasty';
@@ -11,7 +12,7 @@ interface WrapWithFieldProps extends FieldBaseProps, BaseProps, FormBaseProps {
 
 export function wrapWithField<T extends WrapWithFieldProps>(
   component: ReactElement,
-  ref: RefObject<unknown>,
+  ref: RefObject<unknown> | FocusableRef<HTMLElement>,
   props: T,
 ) {
   let {
@@ -20,13 +21,14 @@ export function wrapWithField<T extends WrapWithFieldProps>(
     labelPosition = 'top',
     labelStyles,
     isRequired,
+    isDisabled,
     necessityIndicator,
-    necessityLabel,
-    validationState,
     message,
+    messageStyles,
     description,
-    isDisabled,
+    validationState,
     labelProps,
+    fieldProps,
     requiredMark = true,
     tooltip,
     isHidden,
@@ -38,23 +40,24 @@ export function wrapWithField<T extends WrapWithFieldProps>(
   return (
     <FieldWrapper
       {...{
-        labelPosition,
         label,
         extra,
-        styles,
-        isRequired,
+        labelPosition,
         labelStyles,
+        isRequired,
+        isDisabled,
         necessityIndicator,
-        necessityLabel,
         labelProps,
-        isDisabled,
-        validationState,
+        fieldProps,
         message,
+        messageStyles,
         description,
+        validationState,
         requiredMark,
         tooltip,
         isHidden,
         labelSuffix,
+        styles,
         children,
         Component: component,
         ref,

src/components/pickers/ComboBox/ComboBox.tsx

@@ -30,10 +30,10 @@ import {
   useCombinedRefs,
   useLayoutEffect,
 } from '../../../utils/react';
-import { FieldWrapper } from '../../forms/FieldWrapper';
 import { CubeSelectBaseProps, ListBoxPopup } from '../Select/Select';
 import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES } from '../../forms';
 import { OverlayWrapper } from '../../overlays/OverlayWrapper';
+import { wrapWithField } from '../../forms/wrapper';
 import { LoadingIcon } from '../../../icons';
 import { InvalidIcon } from '../../shared/InvalidIcon';
 import { ValidIcon } from '../../shared/ValidIcon';
@@ -143,7 +143,6 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
     qa,
     label,
     extra,
-    labelPosition = 'top',
     labelStyles,
     isRequired,
     necessityIndicator,
@@ -174,7 +173,6 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
     autoComplete = 'off',
     direction = 'bottom',
     shouldFlip = true,
-    requiredMark = true,
     menuTrigger = 'input',
     suffixPosition = 'before',
     loadingState,
@@ -400,31 +398,14 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
     </ComboBoxWrapperElement>
   );
 
-  return (
-    <FieldWrapper
-      {...{
-        labelPosition,
-        label,
-        extra,
-        styles,
-        isRequired,
-        labelStyles,
-        necessityIndicator,
-        labelProps,
-        isDisabled,
-        validationState,
-        message,
-        description,
-        requiredMark,
-        labelSuffix,
-        Component: comboBoxField,
-        ref: ref,
-      }}
-    />
+  return wrapWithField<Omit<CubeComboBoxProps<T>, 'children'>>(
+    comboBoxField,
+    ref,
+    mergeProps({ ...props, styles }, { labelProps }),
   );
 }) as unknown as (<T>(
   props: CubeComboBoxProps<T> & { ref?: ForwardedRef<HTMLDivElement> },
-) => JSX.Element) & { Item: typeof Item };
+) => ReactElement) & { Item: typeof Item };
 
 ComboBox.Item = Item;
 Object.defineProperty(ComboBox, 'cubeInputType', {