[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>
This commit is contained in:
Aaron 2025-11-20 19:09:40 +07:00 committed by GitHub
parent 90866fb925
commit 83fdebf64d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1771 changed files with 17003 additions and 13856 deletions

View file

@ -8,11 +8,13 @@ interface LabelProps {
className?: string;
}
export const Label: React.FC<LabelProps> = ({ htmlFor, children, className }) => (
<label htmlFor={htmlFor} className={cn("block text-sm font-medium text-custom-text-100", className)}>
{children}
</label>
);
export function Label({ htmlFor, children, className }: LabelProps) {
return (
<label htmlFor={htmlFor} className={cn("block text-sm font-medium text-custom-text-100", className)}>
{children}
</label>
);
}
// Reusable Form Field Component
interface FormFieldProps {
@ -23,15 +25,17 @@ interface FormFieldProps {
optional?: boolean;
}
export const FormField: React.FC<FormFieldProps> = ({ label, htmlFor, children, className, optional = false }) => (
<div className={cn("flex flex-col gap-1.5", className)}>
<Label htmlFor={htmlFor}>
{label}
{optional && <span className="text-custom-text-400 text-sm"> (optional)</span>}
</Label>
{children}
</div>
);
export function FormField({ label, htmlFor, children, className, optional = false }: FormFieldProps) {
return (
<div className={cn("flex flex-col gap-1.5", className)}>
<Label htmlFor={htmlFor}>
{label}
{optional && <span className="text-custom-text-400 text-sm"> (optional)</span>}
</Label>
{children}
</div>
);
}
// Reusable Validation Message Component
interface ValidationMessageProps {
@ -40,17 +44,19 @@ interface ValidationMessageProps {
className?: string;
}
export const ValidationMessage: React.FC<ValidationMessageProps> = ({ type, message, className }) => (
<p
className={cn(
"text-sm",
{
"text-red-500": type === "error",
"text-green-500": type === "success",
},
className
)}
>
{message}
</p>
);
export function ValidationMessage({ type, message, className }: ValidationMessageProps) {
return (
<p
className={cn(
"text-sm",
{
"text-red-500": type === "error",
"text-green-500": type === "success",
},
className
)}
>
{message}
</p>
);
}