chore(sonar): no need to import react

Author: fernandatoledo

.eslintrc.js

@@ -46,6 +46,8 @@ module.exports = {
         project: './tsconfig.json',
       },
       rules: {
+        'react/react-in-jsx-scope': 'off',
+        'react/jsx-uses-react': 'off',
         'prettier/prettier': [
           'error',
           {
@@ -79,6 +81,18 @@ module.exports = {
             caughtErrorsIgnorePattern: '^_',
           },
         ],
+        'no-restricted-imports': [
+          'error',
+          {
+            paths: [
+              {
+                name: 'react',
+                importNames: ['default'],
+                message: 'No need to import React',
+              },
+            ],
+          },
+        ],
         curly: [2, 'all'],
       },
     },

docs/src/content/docs/ui-and-theme/Forms.mdx

@@ -53,7 +53,6 @@ Here is how you can create your login screen:
 
 ```tsx
 import { zodResolver } from '@hookform/resolvers/zod';
-import React from 'react';
 import { useForm } from 'react-hook-form';
 import z from 'zod';
 

src/api/common/api-provider.tsx

@@ -1,7 +1,5 @@
 import { useReactQueryDevTools } from '@dev-plugins/react-query';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import React from 'react';
-
 export const queryClient = new QueryClient();
 
 export function APIProvider({ children }: { children: React.ReactNode }) {

src/app/(app)/_layout.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { Link, Redirect, SplashScreen, Tabs } from 'expo-router';
-import React, { useCallback, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 
 import { useAuth, useIsFirstTime } from '@/core';
 import { Pressable, Text } from '@/ui';

src/app/(app)/index.tsx

@@ -1,5 +1,5 @@
 import { FlashList } from '@shopify/flash-list';
-import React from 'react';
+import { useCallback } from 'react';
 
 import type { Post } from '@/api';
 import { usePosts } from '@/api';
@@ -8,7 +8,7 @@ import { EmptyList, FocusAwareStatusBar, Text, View } from '@/ui';
 
 export default function Feed() {
   const { data, isPending, isError } = usePosts();
-  const renderItem = React.useCallback(
+  const renderItem = useCallback(
     ({ item }: { item: Post }) => <Card {...item} />,
     []
   );

src/app/(app)/settings.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/react-in-jsx-scope */
 import { Env } from '@env';
 import { useColorScheme } from 'nativewind';
 

src/app/(app)/style.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Buttons } from '@/components/buttons';
 import { Colors } from '@/components/colors';
 import { Inputs } from '@/components/inputs';

src/app/_layout.tsx

@@ -17,8 +17,6 @@ export { ErrorBoundary } from 'expo-router';
 // Import  global CSS file
 import '../../global.css';
 
-import React from 'react';
-
 export const unstable_settings = {
   initialRouteName: '(app)',
 };

src/app/feed/[id].tsx

@@ -1,5 +1,4 @@
 import { Stack, useLocalSearchParams } from 'expo-router';
-import React from 'react';
 
 import { usePost } from '@/api';
 import { ActivityIndicator, FocusAwareStatusBar, Text, View } from '@/ui';

src/app/feed/add-post.tsx

@@ -1,6 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Stack } from 'expo-router';
-import React from 'react';
 import { useForm } from 'react-hook-form';
 import { showMessage } from 'react-native-flash-message';
 import { z } from 'zod';

src/app/login.tsx

@@ -1,5 +1,4 @@
 import { useRouter } from 'expo-router';
-import React from 'react';
 
 import type { LoginFormProps } from '@/components/login-form';
 import { LoginForm } from '@/components/login-form';

src/app/onboarding.tsx

@@ -1,5 +1,4 @@
 import { useRouter } from 'expo-router';
-import React from 'react';
 
 import { Cover } from '@/components/cover';
 import { useIsFirstTime } from '@/core/hooks';

src/components/buttons.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Button, View } from '@/ui';
 
 import { Title } from './title';

src/components/card.tsx

@@ -1,5 +1,4 @@
 import { Link } from 'expo-router';
-import React from 'react';
 
 import type { Post } from '@/api';
 import { Image, Pressable, Text, View } from '@/ui';

src/components/colors.test.tsx

@@ -1,5 +1,4 @@
 import { render, screen, within } from '@testing-library/react-native';
-import React from 'react';
 
 import { colors } from '@/ui';
 

src/components/colors.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Text, View } from '@/ui';
 import colors from '@/ui/colors';
 

src/components/cover.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable max-lines-per-function */
-import React from 'react';
 import type { SvgProps } from 'react-native-svg';
 import Svg, { Circle, Path, Polygon } from 'react-native-svg';
 // TODO: should be updated to simple images

src/components/inputs.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } from 'react';
 
 import type { Option } from '@/ui';
 import { Input, Select, View } from '@/ui';
@@ -13,7 +13,7 @@ const options: Option[] = [
 ];
 
 export const Inputs = () => {
-  const [value, setValue] = React.useState<string | number | undefined>();
+  const [value, setValue] = useState<string | number | undefined>();
   return (
     <>
       <Title text="Form" />
@@ -36,7 +36,7 @@ export const Inputs = () => {
 };
 
 const CheckboxExample = () => {
-  const [checked, setChecked] = React.useState(false);
+  const [checked, setChecked] = useState(false);
   return (
     <Checkbox.Root
       checked={checked}
@@ -51,7 +51,7 @@ const CheckboxExample = () => {
 };
 
 const RadioExample = () => {
-  const [selected, setSelected] = React.useState(false);
+  const [selected, setSelected] = useState(false);
   return (
     <Radio.Root
       checked={selected}
@@ -66,7 +66,7 @@ const RadioExample = () => {
 };
 
 const SwitchExample = () => {
-  const [active, setActive] = React.useState(false);
+  const [active, setActive] = useState(false);
   return (
     <Switch.Root
       checked={active}

src/components/login-form.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { cleanup, fireEvent, render, screen, waitFor } from '@/core/test-utils';
 
 import type { LoginFormProps } from './login-form';

src/components/login-form.tsx

@@ -1,5 +1,4 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import React from 'react';
 import type { SubmitHandler } from 'react-hook-form';
 import { useForm } from 'react-hook-form';
 import { KeyboardAvoidingView } from 'react-native-keyboard-controller';

src/components/settings/item.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { TxKeyPath } from '@/core';
 import { Pressable, Text, View } from '@/ui';
 import { ArrowRight } from '@/ui/icons';

src/components/settings/items-container.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { TxKeyPath } from '@/core';
 import { Text, View } from '@/ui';
 

src/components/settings/language-item.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useCallback, useMemo } from 'react';
 
 import { useSelectedLanguage } from '@/core';
 import { translate } from '@/core';
@@ -11,23 +11,23 @@ import { Item } from './item';
 export const LanguageItem = () => {
   const { language, setLanguage } = useSelectedLanguage();
   const modal = useModal();
-  const onSelect = React.useCallback(
+  const onSelect = useCallback(
     (option: Option) => {
       setLanguage(option.value as Language);
       modal.dismiss();
     },
     [setLanguage, modal]
   );
 
-  const langs = React.useMemo(
+  const langs = useMemo(
     () => [
       { label: translate('settings.english'), value: 'en' },
       { label: translate('settings.arabic'), value: 'ar' },
     ],
     []
   );
 
-  const selectedLanguage = React.useMemo(
+  const selectedLanguage = useMemo(
     () => langs.find((lang) => lang.value === language),
     [language, langs]
   );

src/components/settings/theme-item.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useCallback, useMemo } from 'react';
 
 import type { ColorSchemeType } from '@/core';
 import { translate, useSelectedTheme } from '@/core';
@@ -11,15 +11,15 @@ export const ThemeItem = () => {
   const { selectedTheme, setSelectedTheme } = useSelectedTheme();
   const modal = useModal();
 
-  const onSelect = React.useCallback(
+  const onSelect = useCallback(
     (option: Option) => {
       setSelectedTheme(option.value as ColorSchemeType);
       modal.dismiss();
     },
     [setSelectedTheme, modal]
   );
 
-  const themes = React.useMemo(
+  const themes = useMemo(
     () => [
       { label: `${translate('settings.theme.dark')} 🌙`, value: 'dark' },
       { label: `${translate('settings.theme.light')} 🌞`, value: 'light' },
@@ -28,7 +28,7 @@ export const ThemeItem = () => {
     []
   );
 
-  const theme = React.useMemo(
+  const theme = useMemo(
     () => themes.find((t) => t.value === selectedTheme),
     [selectedTheme, themes]
   );

src/components/title.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Text, View } from '@/ui';
 
 type Props = {

src/components/typography.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Text, View } from '@/ui';
 
 import { Title } from './title';

src/core/hooks/use-selected-theme.tsx

@@ -1,5 +1,5 @@
 import { colorScheme, useColorScheme } from 'nativewind';
-import React from 'react';
+import { useCallback } from 'react';
 import { useMMKVString } from 'react-native-mmkv';
 
 import { storage } from '../storage';
@@ -17,7 +17,7 @@ export const useSelectedTheme = () => {
   const { colorScheme: _color, setColorScheme } = useColorScheme();
   const [theme, _setTheme] = useMMKVString(SELECTED_THEME, storage);
 
-  const setSelectedTheme = React.useCallback(
+  const setSelectedTheme = useCallback(
     (t: ColorSchemeType) => {
       setColorScheme(t);
       _setTheme(t);

src/core/test-utils.tsx

@@ -5,8 +5,6 @@ import { NavigationContainer } from '@react-navigation/native';
 import type { RenderOptions } from '@testing-library/react-native';
 import { render } from '@testing-library/react-native';
 import type { ReactElement } from 'react';
-import React from 'react';
-
 const createAppWrapper = () => {
   return ({ children }: { children: React.ReactNode }) => (
     <BottomSheetModalProvider>

src/ui/button.test.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable max-lines-per-function */
-import React from 'react';
 import { Text } from 'react-native';
 
 import { cleanup, fireEvent, render, screen } from '@/core/test-utils';

src/ui/button.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { forwardRef, useMemo } from 'react';
 import type { PressableProps, View } from 'react-native';
 import { ActivityIndicator, Pressable, Text } from 'react-native';
 import type { VariantProps } from 'tailwind-variants';
@@ -92,7 +92,7 @@ interface Props extends ButtonVariants, Omit<PressableProps, 'disabled'> {
   textClassName?: string;
 }
 
-export const Button = React.forwardRef<View, Props>(
+export const Button = forwardRef<View, Props>(
   (
     {
       label: text,
@@ -107,7 +107,7 @@ export const Button = React.forwardRef<View, Props>(
     },
     ref
   ) => {
-    const styles = React.useMemo(
+    const styles = useMemo(
       () => button({ variant, disabled, size }),
       [variant, disabled, size]
     );

src/ui/checkbox.test.tsx

@@ -1,8 +1,6 @@
 /* eslint-disable max-lines-per-function */
 import 'react-native';
 
-import React from 'react';
-
 import { cleanup, fireEvent, render, screen } from '@/core/test-utils';
 
 import { Checkbox, Radio, Switch } from './checkbox';

src/ui/checkbox.tsx

@@ -1,5 +1,5 @@
 import { MotiView } from 'moti';
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import {
   I18nManager,
   Pressable,

src/ui/focus-aware-status-bar.tsx

@@ -1,6 +1,5 @@
 import { useIsFocused } from '@react-navigation/native';
 import { useColorScheme } from 'nativewind';
-import React from 'react';
 import { StatusBar } from 'react-native';
 
 type Props = React.ComponentProps<typeof StatusBar>;

src/ui/icons/arrow-right.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { StyleSheet } from 'react-native';
 import type { SvgProps } from 'react-native-svg';
 import Svg, { Path } from 'react-native-svg';

src/ui/icons/caret-down.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { SvgProps } from 'react-native-svg';
 import Svg, { Path } from 'react-native-svg';
 

src/ui/icons/feed.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { SvgProps } from 'react-native-svg';
 import Svg, { Path } from 'react-native-svg';
 

src/ui/icons/github.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { SvgProps } from 'react-native-svg';
 import Svg, { ClipPath, Defs, G, Path } from 'react-native-svg';
 

src/ui/icons/home.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { SvgProps } from 'react-native-svg';
 import Svg, { Path } from 'react-native-svg';
 

src/ui/icons/language.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { SvgProps } from 'react-native-svg';
 import Svg, { G, Path, Text, TSpan } from 'react-native-svg';
 

src/ui/icons/rate.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { SvgProps } from 'react-native-svg';
 import Svg, { ClipPath, Defs, G, Path } from 'react-native-svg';