feat(form): add computed field and related form components to enhance functionality and reusability

Author: Ohh-889

packages/ui/src/components/form/FormComputedField.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { ComputedField } from 'skyroc-form';
+
+import FormField from './FormField';
+import type { FormComputedFieldProps } from './types';
+
+const FormComputedField = <Values = any,>(props: FormComputedFieldProps<Values>) => {
+  return (
+    <FormField
+      component={ComputedField}
+      {...props}
+    />
+  );
+};
+
+export default FormComputedField;

packages/ui/src/components/form/FormDescription.tsx

@@ -0,0 +1,22 @@
+import { cn } from '@/lib/utils';
+
+import { formVariants } from './form-variants';
+import type { FormDescriptionProps } from './types';
+
+const FormDescription = (props: FormDescriptionProps) => {
+  const { className, ...rest } = props;
+
+  const { description } = formVariants();
+
+  const mergedClass = cn(description(), className);
+
+  return (
+    <p
+      className={mergedClass}
+      data-slot="form-description"
+      {...rest}
+    />
+  );
+};
+
+export default FormDescription;

packages/ui/src/components/form/FormField.tsx

@@ -4,15 +4,24 @@ import { useId } from 'react';
 import type { AllPathsKeys } from 'skyroc-form';
 import { Field, useFieldError } from 'skyroc-form';
 
-import { cn } from '@/lib/utils';
-
-import FormLabel from '../label/Label';
-
-import { formVariants } from './form-variants';
+import FormDescription from './FormDescription';
+import FormItem from './FormItem';
+import FormLabel from './FormLable';
+import FormMessage from './FormMessage';
 import type { FormFieldProps } from './types';
 
 const FormField = <Values = any,>(props: FormFieldProps<Values>) => {
-  const { children, className, description, label, name, size, ...rest } = props;
+  const {
+    children,
+    className,
+    classNames,
+    component: Component = Field,
+    description,
+    label,
+    name,
+    size,
+    ...rest
+  } = props;
 
   const id = useId();
 
@@ -24,60 +33,48 @@ const FormField = <Values = any,>(props: FormFieldProps<Values>) => {
   const formDescriptionId = `${id}-form-item-description`;
   const formMessageId = `${id}-form-item-message`;
 
-  const {
-    description: descriptionCls,
-    item,
-    label: labelCls,
-    message
-  } = formVariants({ error: errors.length > 0, size });
-
-  const mergedCls = {
-    description: cn(descriptionCls(), className),
-    item: cn(item(), className),
-    label: cn(labelCls()),
-    message: cn(message(), className)
-  };
-
   return (
-    <div className={mergedCls.item}>
+    <FormItem
+      className={className}
+      size={size}
+    >
       <FormLabel
-        className={mergedCls.label}
-        data-error={hasError}
-        data-slot="form-label"
-        htmlFor={id}
+        className={classNames?.label}
+        error={hasError}
+        htmlFor={formItemId}
         size={size}
       >
         {label}
       </FormLabel>
 
-      <Field
+      <Component
         {...rest}
         aria-describedby={!hasError ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
         aria-invalid={hasError}
         id={id}
         name={name}
       >
         {children}
-      </Field>
+      </Component>
 
       {description && (
-        <p
-          className={mergedCls.description}
+        <FormDescription
+          className={classNames?.description}
           id={formDescriptionId}
         >
           {description}
-        </p>
+        </FormDescription>
       )}
 
       {hasError && (
-        <p
-          className={mergedCls.message}
+        <FormMessage
+          className={classNames?.message}
           id={formMessageId}
         >
           {errors[0]}
-        </p>
+        </FormMessage>
       )}
-    </div>
+    </FormItem>
   );
 };
 

packages/ui/src/components/form/FormItem.tsx

@@ -0,0 +1,22 @@
+import { cn } from '@/lib/utils';
+
+import { formVariants } from './form-variants';
+import type { FormItemProps } from './types';
+
+const FormItem = (props: FormItemProps) => {
+  const { className, size, ...rest } = props;
+
+  const { item } = formVariants({ size });
+
+  const mergedCls = cn(item(), className);
+
+  return (
+    <div
+      className={mergedCls}
+      data-slot="form-item"
+      {...rest}
+    />
+  );
+};
+
+export default FormItem;

packages/ui/src/components/form/FormLable.tsx

@@ -0,0 +1,26 @@
+import { cn } from '@/lib/utils';
+
+import Label from '../label/Label';
+
+import { formVariants } from './form-variants';
+import type { FormLabelProps } from './types';
+
+const FormLabel = (props: FormLabelProps) => {
+  const { className, error, size, ...rest } = props;
+
+  const { label } = formVariants({ error, size });
+
+  const mergedCls = cn(label(), className);
+
+  return (
+    <Label
+      className={mergedCls}
+      data-error={error}
+      data-slot="form-label"
+      size={size}
+      {...rest}
+    />
+  );
+};
+
+export default FormLabel;

packages/ui/src/components/form/FormMessage.tsx

@@ -0,0 +1,28 @@
+import { cn } from '@/lib/utils';
+
+import { formVariants } from './form-variants';
+import type { FormMessageProps } from './types';
+
+const FormMessage = (props: FormMessageProps) => {
+  const { className, error, ...rest } = props;
+
+  const { message } = formVariants();
+
+  const mergedCls = cn(message(), className);
+
+  const body = error?.length ? error[0] : props.children;
+
+  if (!body) return null;
+
+  return (
+    <p
+      className={mergedCls}
+      data-slot="form-message"
+      {...rest}
+    >
+      {body}
+    </p>
+  );
+};
+
+export default FormMessage;

packages/ui/src/components/form/index.ts

@@ -1,9 +1,9 @@
 'use client';
 
 export {
-  ComputedField as FormComputedField,
   Form,
   List as FormList,
+  useArrayField,
   useEffectField,
   useFieldError,
   useFieldState,
@@ -13,8 +13,20 @@ export {
   useWatch
 } from 'skyroc-form';
 
-export type { Action as FormAction, FormInstance } from 'skyroc-form';
+export type {
+  Action as FormAction,
+  AllPathsKeys,
+  ComputedFieldProps,
+  FieldElement,
+  FormInstance,
+  FormProps,
+  Meta,
+  Rule,
+  SubscribeMaskOptions,
+  ValidateMessages
+} from 'skyroc-form';
 
+export { default as FormComputedField } from './FormComputedField';
 export { default as FormField } from './FormField';
 
-export type { FormFieldProps } from './types';
+export type { FormComputedFieldProps, FormFieldProps } from './types';

packages/ui/src/components/form/types.ts

@@ -1,12 +1,36 @@
-import type { ReactNode } from 'react';
-import type { FieldProps } from 'skyroc-form';
+import type { ComponentProps, ElementType, ReactNode } from 'react';
+import type { ComputedFieldProps, FieldProps } from 'skyroc-form';
 
-import type { BaseProps } from '@/types/other';
+import type { BaseNodeProps, ClassValue } from '@/types/other';
+
+import type { LabelProps } from '../label/types';
+
+import type { FormSlots } from './form-variants';
+
+type FormClassNames = Partial<Record<FormSlots, ClassValue>>;
+
+export interface FormDescriptionProps extends BaseNodeProps<ComponentProps<'p'>> {}
+
+export interface FormItemProps extends BaseNodeProps<ComponentProps<'div'>> {}
+
+export interface FormLabelProps extends LabelProps {
+  error?: boolean;
+}
+
+export interface FormMessageProps extends BaseNodeProps<ComponentProps<'p'>> {
+  error?: string[];
+}
+
+type FormSharedProps = BaseNodeProps<{
+  classNames?: FormClassNames;
+  description?: string;
+  error?: string;
+  label?: ReactNode;
+}>;
 
 export type FormFieldProps<Values = any> = FieldProps<Values> &
-  BaseProps<{
-    description?: string;
-    error?: string;
-    label?: ReactNode;
-    required?: boolean;
-  }>;
+  FormSharedProps & {
+    component?: ElementType;
+  };
+
+export type FormComputedFieldProps<Values = any> = ComputedFieldProps<Values> & FormSharedProps;

packages/ui/src/components/input/Input.tsx

@@ -6,14 +6,17 @@ import { inputVariants } from './input-variants';
 import type { InputProps } from './types';
 
 const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
-  const { className, size, ...rest } = props;
+  const { className, disabled, size, ...rest } = props;
 
   const mergedCls = cn(inputVariants({ size }), className);
 
+  const isDisabled = disabled || rest.readOnly;
+
   return (
     <input
       className={mergedCls}
       data-slot="input"
+      disabled={isDisabled}
       ref={ref}
       {...rest}
     />

playground/src/app/(demo)/form/modules/ComputedDemo.tsx

@@ -30,24 +30,25 @@ const ComputedDemo = () => {
           label="Price"
           name="price"
         >
-          <Input />
+          <Input placeholder="please input price" />
         </FormField>
 
         <FormField
           label="Quantity"
           name="quantity"
         >
-          <Input />
+          <Input placeholder="please input quantity" />
         </FormField>
 
         <FormComputedField
           deps={['price', 'quantity']}
+          label="Total"
           name="total"
           compute={get => {
             return Number(get('price')) * Number(get('quantity')) || 0;
           }}
         >
-          <Input />
+          <Input placeholder="auto compute total" />
         </FormComputedField>
 
         <Button