[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/progress/circular-progress-indicator.tsx

@@ -8,7 +8,7 @@ interface ICircularProgressIndicator {
   children?: React.ReactNode;
 }
 
-export const CircularProgressIndicator: React.FC<ICircularProgressIndicator> = (props) => {
+export function CircularProgressIndicator(props: ICircularProgressIndicator) {
   const { size = 40, percentage = 25, strokeWidth = 6, strokeColor = "stroke-custom-primary-100", children } = props;
 
   const sqSize = size;
@@ -81,4 +81,4 @@ export const CircularProgressIndicator: React.FC<ICircularProgressIndicator> = (
       </div>
     </div>
   );
-};
+}

packages/ui/src/progress/linear-progress-indicator.tsx

@@ -11,14 +11,14 @@ type Props = {
   barClassName?: string;
 };
 
-export const LinearProgressIndicator: React.FC<Props> = ({
+export function LinearProgressIndicator({
   data,
   noTooltip = false,
   inPercentage = false,
   size = "sm",
   className = "",
   barClassName = "",
-}) => {
+}: Props) {
   const total = data.reduce((acc: any, cur: any) => acc + cur.value, 0);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   let progress = 0;
@@ -54,4 +54,4 @@ export const LinearProgressIndicator: React.FC<Props> = ({
       </div>
     </div>
   );
-};
+}

packages/ui/src/progress/progress-bar.tsx

@@ -9,14 +9,14 @@ type Props = {
   inactiveStrokeColor?: string;
 };
 
-export const ProgressBar: React.FC<Props> = ({
+export function ProgressBar({
   maxValue = 0,
   value = 0,
   radius = 8,
   strokeWidth = 2,
   activeStrokeColor = "#3e98c7",
   inactiveStrokeColor = "#ddd",
-}) => {
+}: Props) {
   // PIE Calc Fn
   const generatePie = (value: any) => {
     const x = radius - Math.cos((2 * Math.PI) / (100 / value)) * radius;
@@ -65,4 +65,4 @@ export const ProgressBar: React.FC<Props> = ({
       <circle r={radius - strokeWidth} cx={radius} cy={radius} className="progress-bar" />
     </svg>
   );
-};
+}

packages/ui/src/progress/radial-progress.tsx

@@ -5,7 +5,7 @@ interface IRadialProgressBar {
   progress: number;
 }
 
-export const RadialProgressBar: FC<IRadialProgressBar> = (props) => {
+export function RadialProgressBar(props: IRadialProgressBar) {
   const { progress } = props;
   const [circumference, setCircumference] = useState(0);
 
@@ -43,4 +43,4 @@ export const RadialProgressBar: FC<IRadialProgressBar> = (props) => {
       </svg>
     </div>
   );
-};
+}