[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:
parent
90866fb925
commit
83fdebf64d
1771 changed files with 17003 additions and 13856 deletions
|
|
@ -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";
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue