fix: linter errors

Author: DimitarNestorov

src/components/Surface.tsx

@@ -12,6 +12,7 @@ import { useInternalTheme } from '../core/theming';
 import overlay, { isAnimatedValue } from '../styles/overlay';
 import shadow from '../styles/shadow';
 import type { ThemeProp, MD3Elevation } from '../types';
+import { forwardRef } from '../utils/forwardRef';
 
 export type Props = React.ComponentPropsWithRef<typeof View> & {
   /**
@@ -39,7 +40,7 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
   ref?: React.RefObject<View>;
 };
 
-const MD2Surface = React.forwardRef<View, Props>(
+const MD2Surface = forwardRef<View, Props>(
   ({ style, theme: overrideTheme, ...rest }: Omit<Props, 'elevation'>, ref) => {
     const { elevation = 4 } = (StyleSheet.flatten(style) || {}) as ViewStyle;
     const { dark: isDarkTheme, mode, colors } = useInternalTheme(overrideTheme);
@@ -105,7 +106,7 @@ const MD2Surface = React.forwardRef<View, Props>(
  * });
  * ```
  */
-const Surface = React.forwardRef<View, Props>(
+const Surface = forwardRef<View, Props>(
   (
     {
       elevation = 1,

src/components/ToggleButton/ToggleButton.tsx

@@ -12,6 +12,7 @@ import color from 'color';
 import { useInternalTheme } from '../../core/theming';
 import { black, white } from '../../styles/themes/v2/colors';
 import type { ThemeProp } from '../../types';
+import { forwardRef } from '../../utils/forwardRef';
 import type { IconSource } from '../Icon';
 import IconButton from '../IconButton/IconButton';
 import { ToggleButtonGroupContext } from './ToggleButtonGroup';
@@ -92,7 +93,7 @@ export type Props = {
  *
  * ```
  */
-const ToggleButton = React.forwardRef<View, Props>(
+const ToggleButton = forwardRef<View, Props>(
   (
     {
       icon,

src/components/Typography/Text.tsx

@@ -9,6 +9,7 @@ import {
 
 import { useInternalTheme } from '../../core/theming';
 import { Font, MD3TypescaleKey, ThemeProp } from '../../types';
+import { forwardRef } from '../../utils/forwardRef';
 
 export type Props = React.ComponentProps<typeof NativeText> & {
   /**
@@ -149,4 +150,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default React.forwardRef(Text);
+export default forwardRef(Text);

src/components/Typography/v2/Text.tsx

@@ -9,6 +9,7 @@ import {
 import type { MD2Theme } from 'src/types';
 
 import { useInternalTheme } from '../../../core/theming';
+import { forwardRef } from '../../../utils/forwardRef';
 
 type Props = React.ComponentProps<typeof NativeText> & {
   style?: StyleProp<TextStyle>;
@@ -58,4 +59,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default React.forwardRef(Text);
+export default forwardRef(Text);

src/components/__tests__/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "local-rules/no-react-forwardref-usage": "off"
+  }
+}

src/utils/forwardRef.tsx

@@ -1,5 +1,5 @@
-import {
-  forwardRef as reactForwardRef,
+import * as React from 'react';
+import type {
   ForwardRefRenderFunction,
   PropsWithoutRef,
   RefAttributes,
@@ -20,4 +20,4 @@ export type ForwarRefComponent<T, P = {}> = ForwardRefExoticComponent<
  */
 export const forwardRef: <T, P = {}>(
   render: ForwardRefRenderFunction<T, P>
-) => ForwarRefComponent<T, P> = reactForwardRef;
+) => ForwarRefComponent<T, P> = React.forwardRef;