feat(Field): add casting property

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/Form/ComplexForm.stories.tsx

@@ -203,6 +203,40 @@ const ComplexErrorTemplate: StoryFn<typeof Form> = (args) => {
   );
 };
 
+const CastingTemplate: StoryFn<typeof Form> = (args) => {
+  const [form] = Form.useForm();
+
+  return (
+    <>
+      <Form
+        form={form}
+        {...args}
+        defaultValues={{
+          select: 3,
+        }}
+        onSubmit={(v) => {
+          console.log('onSubmit:', v);
+        }}
+        onValuesChange={(v) => {
+          console.log('onChange', v);
+        }}
+      >
+        <Select
+          name="select"
+          label="Select field"
+          tooltip="Additional field description"
+          casting="number"
+        >
+          <Item key="1">One</Item>
+          <Item key="2">Two</Item>
+          <Item key="3">Three</Item>
+        </Select>
+        <Submit>Submit</Submit>
+      </Form>
+    </>
+  );
+};
+
 const Template: StoryFn<typeof Form> = (args) => {
   const [form] = Form.useForm();
 
@@ -405,3 +439,5 @@ UnknownErrorMessage.play = async ({ canvasElement }) => {
     expect(alertElement).not.toBeInTheDocument();
   });
 };
+
+export const ValueCasting = CastingTemplate.bind({});

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/types.ts

@@ -9,7 +9,7 @@ import {
 import { CubeFormInstance } from '../use-form';
 import { Props } from '../../../../tasty';
 
-export interface CubeFieldProps<T extends FieldTypes> {
+export interface CubeFieldProps<T extends FieldTypes, K = unknown> {
   /** The initial value of the input. */
   defaultValue?: any;
   /** The unique ID of the field */
@@ -35,6 +35,12 @@ export interface CubeFieldProps<T extends FieldTypes> {
   /** Message for the field. Some additional information or error notice */
   message?: ReactNode;
   labelProps?: Props;
+  casting?:
+    | 'number'
+    | [
+        (inputValue: K) => string | null | undefined,
+        (outputValue: string) => K | null | undefined,
+      ];
 }
 
 export type FieldReturnValue<T extends FieldTypes> = {

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

@@ -59,8 +59,16 @@ export function useField<T extends FieldTypes, Props extends CubeFieldProps<T>>(
     validationDelay,
     showValid,
     shouldUpdate,
+    casting,
   } = props;
 
+  if (casting === 'number') {
+    casting = [
+      (inputValue: unknown) => String(inputValue) ?? null,
+      (outputValue: string) => Number(outputValue) ?? null,
+    ];
+  }
+
   if (rules && rules.length && validationDelay) {
     rules.unshift(delayValidationRule(validationDelay));
   }
@@ -135,6 +143,14 @@ export function useField<T extends FieldTypes, Props extends CubeFieldProps<T>>(
 
     const field = form.getFieldInstance(fieldName);
 
+    if (
+      casting?.[1] &&
+      typeof val === 'string' &&
+      typeof casting?.[1] === 'function'
+    ) {
+      val = casting[1](val);
+    }
+
     if (shouldUpdate) {
       const fieldsValue = form.getFieldsValue();
 
@@ -172,11 +188,17 @@ export function useField<T extends FieldTypes, Props extends CubeFieldProps<T>>(
     }
   });
 
+  let inputValue = field?.inputValue;
+
+  if (casting?.[0] && inputValue) {
+    inputValue = casting[0](inputValue);
+  }
+
   return useMemo(
     () => ({
       id: fieldId,
       name: fieldName,
-      value: field?.inputValue,
+      value: inputValue,
       validateTrigger,
       form,
       field,

src/components/forms/wrapper.tsx

@@ -22,6 +22,7 @@ export function wrapWithField<T extends WrapWithFieldProps>(
     labelStyles,
     isRequired,
     isDisabled,
+    casting,
     necessityIndicator,
     message,
     messageStyles,
@@ -40,13 +41,13 @@ export function wrapWithField<T extends WrapWithFieldProps>(
   return (
     <FieldWrapper
       {...{
-        labelPosition,
         label,
         extra,
-        styles,
+        labelPosition,
+        labelStyles,
         isRequired,
         isDisabled,
-        labelStyles,
+        casting,
         necessityIndicator,
         labelProps,
         fieldProps,
@@ -58,6 +59,7 @@ export function wrapWithField<T extends WrapWithFieldProps>(
         tooltip,
         isHidden,
         labelSuffix,
+        styles,
         children,
         Component: component,
         ref,

src/shared/form.ts

@@ -13,7 +13,7 @@ export type ValidationState = 'invalid' | 'valid';
 /** On which event perform the validation for the field */
 export type ValidateTrigger = 'onBlur' | 'onChange' | 'onSubmit';
 
-export interface FieldBaseProps extends FormBaseProps {
+export interface FieldBaseProps<T = unknown> extends FormBaseProps {
   /** The field name */
   name?: string;
   /** The label of the field */
@@ -59,6 +59,12 @@ export interface FieldBaseProps extends FormBaseProps {
   insideForm?: boolean;
   fieldProps?: Props;
   messageStyles?: Styles;
+  casting?:
+    | 'number'
+    | [
+        (inputValue: T) => string | null | undefined,
+        (outputValue: string) => T | null | undefined,
+      ];
 }
 
 export interface FormBaseProps {