[WEB-5459] feat(codemods): add function declaration transformer with tests (#8137)

- Add jscodeshift-based codemod to convert arrow function components to function declarations
- Support React.FC, observer-wrapped, and forwardRef components
- Include comprehensive test suite covering edge cases
- Add npm script to run transformer across codebase
- Target only .tsx files in source directories, excluding node_modules and declaration files

* [WEB-5459] chore: updates after running codemod

---------

Co-authored-by: sriramveeraghanta <veeraghanta.sriram@gmail.com>

packages/ui/src/auth-form/auth-confirm-password-input.tsx

@@ -15,7 +15,7 @@ export interface AuthConfirmPasswordInputProps
   onPasswordMatchChange?: (matches: boolean) => void;
 }
 
-export const AuthConfirmPasswordInput: React.FC<AuthConfirmPasswordInputProps> = ({
+export function AuthConfirmPasswordInput({
   password,
   label = "Confirm Password",
   error,
@@ -27,7 +27,7 @@ export const AuthConfirmPasswordInput: React.FC<AuthConfirmPasswordInputProps> =
   onChange,
   onPasswordMatchChange,
   ...props
-}) => {
+}: AuthConfirmPasswordInputProps) {
   const [isFocused, setIsFocused] = useState(false);
 
   const confirmPassword = value as string;
@@ -74,4 +74,4 @@ export const AuthConfirmPasswordInput: React.FC<AuthConfirmPasswordInputProps> =
       {confirmPassword && passwordsMatch && <p className="text-sm text-green-500">Passwords match</p>}
     </div>
   );
-};
+}

packages/ui/src/auth-form/auth-forgot-password.tsx

@@ -8,12 +8,12 @@ export interface AuthForgotPasswordProps {
   disabled?: boolean;
 }
 
-export const AuthForgotPassword: React.FC<AuthForgotPasswordProps> = ({
+export function AuthForgotPassword({
   onForgotPassword,
   className = "",
   text = "Forgot your password?",
   disabled = false,
-}) => {
+}: AuthForgotPasswordProps) {
   const handleClick = (e: React.MouseEvent) => {
     e.preventDefault();
     if (!disabled && onForgotPassword) {
@@ -38,4 +38,4 @@ export const AuthForgotPassword: React.FC<AuthForgotPasswordProps> = ({
       {text}
     </button>
   );
-};
+}

packages/ui/src/auth-form/auth-form.tsx

@@ -35,7 +35,7 @@ export interface AuthFormProps {
   alternateModeButtonText?: string;
 }
 
-export const AuthForm: React.FC<AuthFormProps> = ({
+export function AuthForm({
   mode,
   initialData = {},
   onSubmit,
@@ -52,7 +52,7 @@ export const AuthForm: React.FC<AuthFormProps> = ({
   submitButtonText,
   alternateModeText,
   alternateModeButtonText,
-}) => {
+}: AuthFormProps) {
   const [formData, setFormData] = useState<AuthFormData>({
     email: initialData.email || "",
     password: initialData.password || "",
@@ -204,4 +204,4 @@ export const AuthForm: React.FC<AuthFormProps> = ({
       </div>
     </form>
   );
-};
+}

packages/ui/src/auth-form/auth-input.tsx

@@ -13,7 +13,7 @@ export interface AuthInputProps extends Omit<React.InputHTMLAttributes<HTMLInput
 
 const baseContainerClassName = "flex flex-col gap-1.5";
 
-export const AuthInput: React.FC<AuthInputProps> = ({
+export function AuthInput({
   label,
   error,
   showPasswordToggle = false,
@@ -21,7 +21,7 @@ export const AuthInput: React.FC<AuthInputProps> = ({
   className = "",
   type = "text",
   ...props
-}) => {
+}: AuthInputProps) {
   const { id } = props;
   const [showPassword, setShowPassword] = useState(false);
   const isPasswordType = type === "password";
@@ -63,4 +63,4 @@ export const AuthInput: React.FC<AuthInputProps> = ({
       {error && <p className={cn("text-sm text-red-500", errorClassName)}>{error}</p>}
     </div>
   );
-};
+}

packages/ui/src/auth-form/auth-password-input.tsx

@@ -16,7 +16,7 @@ export interface AuthPasswordInputProps extends Omit<React.InputHTMLAttributes<H
   onPasswordStrengthChange?: (strength: E_PASSWORD_STRENGTH) => void;
 }
 
-export const AuthPasswordInput: React.FC<AuthPasswordInputProps> = ({
+export function AuthPasswordInput({
   label = "Password",
   error,
   showPasswordStrength = true,
@@ -29,7 +29,7 @@ export const AuthPasswordInput: React.FC<AuthPasswordInputProps> = ({
   onPasswordChange,
   onPasswordStrengthChange,
   ...props
-}) => {
+}: AuthPasswordInputProps) {
   const [isFocused, setIsFocused] = useState(false);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -74,4 +74,4 @@ export const AuthPasswordInput: React.FC<AuthPasswordInputProps> = ({
       )}
     </div>
   );
-};
+}