feat(inputs): add isError prop to enhance error handling

Added the `isError` property to the input components within the ra-inputs package, allowing for improved error state management. This change updates the component styles to display error-specific colors when `isError` is true, ensuring consistent visual feedback. Additionally, certain optional properties like `borderWidth` and `disabled` are now explicitly marked as optional in the TypeScript interfaces, increasing flexibility in their usage. These enhancements collectively improve the user experience by providing clearer input validation feedback.

Author: RedonAlla

npm-packages/src/packages/components/ra-inputs/src/input.props.ts

@@ -2,7 +2,7 @@
  * @ Author: Redon Alla
  * @ Create Time: 2024-06-17 22:55:53
  * @ Modified by: Redon Alla
- * @ Modified time: 2025-02-01 23:50:28
+ * @ Modified time: 2025-02-02 19:23:08
  * @ Description: Defines interfaces and types commonly used for input components, specifically tailored for a UI library or framework based on React Native. It provides a structured way to define the properties that these components will accept.
  */
 
@@ -51,12 +51,18 @@ export interface BaseInputProps extends TextInputProps {
   * @default 'medium'
   */
   radius?: BorderRadius;
+  
+
+  /** Indicates if the input has an error state.
+  * @default false
+  */
+  isError?: boolean;
 
   /**
    * Optional property to specify the width of the input borders.
    * @default 'hairline'
   */
-  borderWidth: BorderWidth;
+  borderWidth?: BorderWidth;
 
   /** 
    * Color of the border as per `react-native` ColorValue standards. 

npm-packages/src/packages/components/ra-inputs/src/input.styles.ts

@@ -28,6 +28,7 @@ type ContainerProps = {
   color: Color;
   size: Sizes;
   radius: BorderRadius;
+  isError?: boolean;
   borderWidth?: BorderWidth;
   disabled?: boolean;
   readOnly?: boolean;
@@ -118,6 +119,7 @@ export function createStyles(props: ContainerProps) {
       fontSize: iconSize,
       textAlign: 'center',
       verticalAlign: 'middle',
+      color: props.isError ? props.theme.colors.isError : props.theme.colors.text,
     },
     container: {
       flexDirection: 'row',
@@ -136,10 +138,12 @@ export function createStyles(props: ContainerProps) {
     },
     containerFocus: {
       backgroundColor: props.activeBackgroundColor ?? backgroundColor,
-      borderColor: focusBorderColor,
+      borderColor: props.isError ? props.theme.colors.error : focusBorderColor,
     },
     containerNotFocus: {
-      borderColor: props.disabled ? 'transparent' : props.borderColor || themeColor,
+      borderColor: props.isError
+        ? props.theme.colors.error
+        : props.disabled ? 'transparent' : props.borderColor || themeColor,
       backgroundColor:
         props.disabled
           ? props.theme.colors.default
@@ -151,7 +155,7 @@ export function createStyles(props: ContainerProps) {
     },
     label: {
       fontFamily: 'Regular',
-      color: props.theme.colors.text,
+      color: props.isError ? props.theme.colors.isError : props.theme.colors.text,
       marginBottom: TEXT_HELPER_MARGIN_TOP_MULTIPLIER * paddingVertical,
       fontSize: props.material ? TEXT_HELPER_MULTIPLIER * fontSize : fontSize,
     },

npm-packages/src/packages/components/ra-inputs/src/number-text-box/index.tsx

@@ -122,6 +122,7 @@ export default class extends React.PureComponent<NumberTextBoxProps, State> {
       type,
       size,
       radius,
+      isError,
       borderWidth,
       borderColor,
       activeBackgroundColor,
@@ -161,6 +162,7 @@ export default class extends React.PureComponent<NumberTextBoxProps, State> {
         color: color!,
         size: size!,
         radius: radius!,
+        isError: isError!,
         borderWidth: borderWidth,
         disabled: disabled,
         readOnly: readOnly,

npm-packages/src/packages/components/ra-inputs/src/number-text-box/number-actions.tsx

@@ -28,7 +28,7 @@ type ActionProps = {
   /**
    * Indicates if the action is disabled.
    */
-  disabled: boolean;
+  disabled?: boolean;
 
   /**
    * Specifies the icon type.

npm-packages/src/packages/components/ra-inputs/src/text-box.tsx

@@ -78,13 +78,13 @@ export default class TextBox extends React.PureComponent<BaseInputProps, State>
       this.setState({isFocused: false});
 
     this.props.onBlur?.(e);
-  };
+  }
 
   /**
    * Handles focus event and updates focus state. It also calls a parent's onFocus callback.
    * @param {NativeSyntheticEvent<TextInputFocusEventData>} e 
    */
-  private handleFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+  public handleFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
     if(!this.props.disabled)
       this.setState({isFocused: true});
 
@@ -109,6 +109,7 @@ export default class TextBox extends React.PureComponent<BaseInputProps, State>
       type,
       size,
       radius,
+      isError,
       borderWidth,
       borderColor,
       activeBackgroundColor,
@@ -146,6 +147,7 @@ export default class TextBox extends React.PureComponent<BaseInputProps, State>
         color: color!,
         size: size!,
         radius: radius!,
+        isError: isError!,
         borderWidth: borderWidth,
         disabled: disabled,
         readOnly: readOnly,