feat: implement FormHelperText base component wrapper (#1400)

src/base/FormHelperText/FormHelperText.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import FormHelperText from './FormHelperText';
+
+describe('FormHelperText Component', () => {
+  it('renders children correctly', () => {
+    render(<FormHelperText>Sample Helper Text</FormHelperText>);
+    expect(screen.getByText('Sample Helper Text')).toBeInTheDocument();
+  });
+
+  it('forwards ref correctly to the underlying HTML element', () => {
+    const ref = React.createRef<HTMLParagraphElement>();
+    render(<FormHelperText ref={ref}>Ref Attached Text</FormHelperText>);
+    expect(ref.current).toBeInstanceOf(HTMLParagraphElement);
+    expect(ref.current?.textContent).toBe('Ref Attached Text');
+  });
+
+  it('applies custom className and props', () => {
+    render(
+      <FormHelperText data-testid="custom-helper" className="custom-class" error>
+        Error state text
+      </FormHelperText>
+    );
+    const element = screen.getByTestId('custom-helper');
+    expect(element).toHaveClass('custom-class');
+    expect(element).toHaveClass('Mui-error');
+  });
+});

src/base/FormHelperText/FormHelperText.tsx

@@ -0,0 +1,19 @@
+import MuiFormHelperText, {
+  FormHelperTextProps as MuiFormHelperTextProps
+} from '@mui/material/FormHelperText';
+import React from 'react';
+
+export type SistentFormHelperTextProps = MuiFormHelperTextProps;
+
+export const FormHelperText = React.forwardRef<HTMLParagraphElement, SistentFormHelperTextProps>(
+  ({ children, ...props }, ref) => {
+    return (
+      <MuiFormHelperText ref={ref} {...props}>
+        {children}
+      </MuiFormHelperText>
+    );
+  }
+);
+FormHelperText.displayName = 'FormHelperText';
+
+export default FormHelperText;

src/base/FormHelperText/index.ts

@@ -0,0 +1 @@
+export * from './FormHelperText';

src/base/index.tsx

@@ -96,3 +96,4 @@ export * from './Toolbar';
 export * from './Tooltip';
 export * from './Typography';
 export * from './Zoom';
+export * from './FormHelperText';