extract input message

elpassion · Nov 5, 2024 · 3cd3fad · 3cd3fad
1 parent 7cf8fdd
commit 3cd3fad
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 32 deletions.
diff --git a/apps/web-remix/app/components/form/fields/field.message.tsx b/apps/web-remix/app/components/form/fields/field.message.tsx
@@ -2,19 +2,21 @@ import type { ReactNode } from 'react';
 import React from 'react';
 
 import { useFieldContext } from '~/components/form/fields/field.context';
-import { BaseSize } from '~/components/ui/ui.types';
-import { cn } from '~/utils/cn';
+import type { InputMessageProps } from '~/components/ui/label';
+import { InputMessage } from '~/components/ui/label';
 
-interface FieldMessageProps extends React.HTMLAttributes<HTMLParagraphElement> {
+interface FieldMessageProps extends Omit<InputMessageProps, 'isError'> {
   error?: ReactNode;
-  size?: BaseSize;
 }
 
-export const FieldMessage = React.forwardRef<
-  HTMLParagraphElement,
-  FieldMessageProps
->(({ className, size, error: propsError, children, ...props }, ref) => {
-  const { name, error } = useFieldContext();
+export const FieldMessage = ({
+  className,
+  size,
+  error: propsError,
+  children,
+  ...rest
+}: FieldMessageProps) => {
+  const { error } = useFieldContext();
 
   const body = propsError ? propsError : error ? error : children;
 
@@ -25,28 +27,9 @@ export const FieldMessage = React.forwardRef<
   }
 
   return (
-    <div
-      ref={ref}
-      id={name}
-      className={cn(
-        'font-medium mt-1',
-        getMessageSize(size),
-        { 'text-red-500': isError, 'text-muted-foreground': !isError },
-        className,
-      )}
-      {...props}
-    >
+    <InputMessage className={className} size={size} {...rest} isError={isError}>
       {body}
-    </div>
+    </InputMessage>
   );
-});
+};
 FieldMessage.displayName = 'FieldMessage';
-
-export function getMessageSize(size?: BaseSize) {
-  switch (size) {
-    case 'sm':
-      return 'text-xs';
-    default:
-      return 'text-sm';
-  }
-}
diff --git a/apps/web-remix/app/components/ui/label.tsx b/apps/web-remix/app/components/ui/label.tsx
@@ -33,9 +33,40 @@ const Label = ({
   );
 };
 Label.displayName = LabelPrimitive.Root.displayName;
-
 export { Label };
 
+export interface InputMessageProps
+  extends React.HTMLAttributes<HTMLParagraphElement> {
+  isError?: boolean;
+  size?: BaseSize;
+  ref?: React.RefObject<HTMLDivElement>;
+}
+
+export const InputMessage = ({
+  children,
+  size,
+  isError,
+  className,
+  ref,
+  ...rest
+}: InputMessageProps) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'font-medium mt-1',
+        getLabelSize(size),
+        { 'text-red-500': isError, 'text-muted-foreground': !isError },
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+};
+InputMessage.displayName = InputMessage.name;
+
 export function getLabelSize(size?: BaseSize) {
   switch (size) {
     case 'sm':