feat(FE-Storyless): add FieldMessage component for consistent field feedback across inputs

src/components/input/SelectInput.tsx

@@ -1,12 +1,6 @@
 'use client';
 
-import {
-  ComponentType,
-  ReactNode,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
+import { ComponentType, ReactNode, useEffect, useMemo, useState } from 'react';
 import Select, {
   OptionProps,
   GroupBase,
@@ -18,6 +12,7 @@ import CreatableSelect from 'react-select/creatable';
 import makeAnimated from 'react-select/animated';
 import { useDebounce } from 'use-debounce';
 import { cn } from '@/lib/helper';
+import FieldMessage from '@/components/helper/FieldMessage';
 
 export interface OptionType {
   value: string | number;
@@ -98,10 +93,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
     return { ...base, IndicatorSeparator: () => null };
   }, [isAnimated]);
 
-  const internalInputChangeHandler = (
-    val: string,
-    meta: InputActionMeta
-  ) => {
+  const internalInputChangeHandler = (val: string, meta: InputActionMeta) => {
     if (meta.action === 'input-change') setInternalInputValue(val);
     if (meta.action === 'menu-close') setInternalInputValue('');
   };
@@ -113,9 +105,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
   const SelectComponent = createables ? CreatableSelect : Select;
 
   /** 🎯 handleChange tanpa any */
-  const handleChange = (
-    val: MultiValue<T> | SingleValue<T>
-  ): void => {
+  const handleChange = (val: MultiValue<T> | SingleValue<T>): void => {
     if (!val) {
       onChange?.(null);
       return;
@@ -128,6 +118,9 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
     }
   };
 
+  const showErrorMessage = Boolean(isError && errorMessage);
+  const feedbackMessage = showErrorMessage ? errorMessage : bottomLabel;
+
   return (
     <div
       className={cn(
@@ -145,15 +138,15 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         >
           {label}
           {required && (
-            <span className="tooltip tooltip-error" data-tip="required">
-              <span className="text-error"> *</span>
+            <span className='tooltip tooltip-error' data-tip='required'>
+              <span className='text-error'> *</span>
             </span>
           )}
         </span>
       )}
 
       <SelectComponent<T, boolean, GroupBase<T>>
-        instanceId="select"
+        instanceId='select'
         value={value ?? (isMulti ? [] : null)}
         onChange={handleChange}
         options={options}
@@ -225,10 +218,11 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         }}
       />
 
-      {isError && <p className="w-full text-sm text-error">{errorMessage}</p>}
-      {!isError && bottomLabel && (
-        <p className="w-full text-sm opacity-60">{bottomLabel}</p>
-      )}
+      <FieldMessage
+        message={feedbackMessage}
+        tone={showErrorMessage ? 'error' : 'info'}
+        isVisible={showErrorMessage || Boolean(bottomLabel)}
+      />
     </div>
   );
 };