[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

@ -11,46 +11,48 @@ export interface IToggleSwitchProps {
className?: string;
}
const Switch: React.FC<IToggleSwitchProps> = ({ value, onChange, label, size = "sm", disabled, className }) => (
<BaseSwitch.Root
checked={value}
disabled={disabled}
onCheckedChange={onChange}
aria-label={label}
className={cn(
"relative inline-flex flex-shrink-0 cursor-pointer rounded-full border border-custom-border-200 transition-colors duration-200 ease-in-out focus:outline-none",
// size
size === "sm" ? "h-4 w-6" : size === "md" ? "h-5 w-8" : "h-6 w-10",
// state
disabled
? "cursor-not-allowed bg-custom-background-80"
: value
? "cursor-pointer bg-custom-primary-100"
: "cursor-pointer bg-custom-background-90",
className
)}
>
{label && <span className="sr-only">{label}</span>}
<BaseSwitch.Thumb
aria-hidden="true"
function Switch({ value, onChange, label, size = "sm", disabled, className }: IToggleSwitchProps) {
return (
<BaseSwitch.Root
checked={value}
disabled={disabled}
onCheckedChange={onChange}
aria-label={label}
className={cn(
"inline-block self-center rounded-full shadow ring-0 transition-transform duration-200 ease-in-out",
"relative inline-flex flex-shrink-0 cursor-pointer rounded-full border border-custom-border-200 transition-colors duration-200 ease-in-out focus:outline-none",
// size
size === "sm" ? "h-3 w-3" : size === "md" ? "h-4 w-4" : "h-5 w-5",
// position + color by state
value
? size === "sm"
? "translate-x-3 bg-white"
: size === "md"
? "translate-x-4 bg-white"
: "translate-x-5 bg-white"
: "translate-x-0.5 bg-custom-background-90",
// disabled
disabled && "cursor-not-allowed bg-custom-background-90"
size === "sm" ? "h-4 w-6" : size === "md" ? "h-5 w-8" : "h-6 w-10",
// state
disabled
? "cursor-not-allowed bg-custom-background-80"
: value
? "cursor-pointer bg-custom-primary-100"
: "cursor-pointer bg-custom-background-90",
className
)}
/>
</BaseSwitch.Root>
);
>
{label && <span className="sr-only">{label}</span>}
<BaseSwitch.Thumb
aria-hidden="true"
className={cn(
"inline-block self-center rounded-full shadow ring-0 transition-transform duration-200 ease-in-out",
// size
size === "sm" ? "h-3 w-3" : size === "md" ? "h-4 w-4" : "h-5 w-5",
// position + color by state
value
? size === "sm"
? "translate-x-3 bg-white"
: size === "md"
? "translate-x-4 bg-white"
: "translate-x-5 bg-white"
: "translate-x-0.5 bg-custom-background-90",
// disabled
disabled && "cursor-not-allowed bg-custom-background-90"
)}
/>
</BaseSwitch.Root>
);
}
Switch.displayName = "plane-ui-switch";