refactor(type): change ReactElement to JSX.Element

dooboolab-community · Aug 13, 2023 · cfdc052 · cfdc052
1 parent 03356b9
commit cfdc052
Show file tree

Hide file tree

Showing 109 changed files with 313 additions and 384 deletions.
diff --git a/docs/src/components/Accordion/AccordionStories.tsx b/docs/src/components/Accordion/AccordionStories.tsx
@@ -1,4 +1,4 @@
-import type {ComponentProps, ReactElement} from 'react';
+import type {ComponentProps} from 'react';
 import type {Meta, Story} from '@storybook/react/types-6-0';
 import {Accordion, DoobooProvider} from 'dooboo-ui';
 import {useDarkMode} from 'storybook-dark-mode';
@@ -11,7 +11,7 @@ export default {
 
 const Template: Story<ComponentProps<typeof Accordion>> = (
   args,
-): ReactElement => {
+): JSX.Element => {
   const isDark = useDarkMode();
 
   return (

diff --git a/docs/src/components/Button/ButtonStories.tsx b/docs/src/components/Button/ButtonStories.tsx
@@ -1,4 +1,4 @@
-import type {ComponentProps, ReactElement} from 'react';
+import type {ComponentProps} from 'react';
 import {useState} from 'react';
 import {Image, View} from 'react-native';
 import {css} from '@emotion/native';
@@ -29,7 +29,7 @@ const initialProps: ButtonProps = {
   type: 'solid',
 };
 
-const Container = ({children}): ReactElement => {
+const Container = ({children}): JSX.Element => {
   const isDark = useDarkMode();
 
   return (
@@ -39,7 +39,7 @@ const Container = ({children}): ReactElement => {
   );
 };
 
-const ButtonStory: Story<ButtonProps> = (args): ReactElement => {
+const ButtonStory: Story<ButtonProps> = (args): JSX.Element => {
   return (
     <Container>
       <Button {...args} />
@@ -51,7 +51,7 @@ export const ButtonTemplate = ButtonStory.bind({});
 ButtonTemplate.args = initialProps;
 
 // Story: Button Types - Solid
-const ButtonTypesStory = ({type}: {type?: ButtonType}): ReactElement => {
+const ButtonTypesStory = ({type}: {type?: ButtonType}): JSX.Element => {
   const colors: ButtonColorType[] = [
     'primary',
     'secondary',
@@ -88,22 +88,22 @@ const ButtonTypesStory = ({type}: {type?: ButtonType}): ReactElement => {
   );
 };
 
-export const ButtonTypeSolidStory = (): ReactElement => (
+export const ButtonTypeSolidStory = (): JSX.Element => (
   <ButtonTypesStory type="solid" />
 );
 
 // Story: Button Types - Outline
-export const ButtonTypeOutlinedStory = (): ReactElement => (
+export const ButtonTypeOutlinedStory = (): JSX.Element => (
   <ButtonTypesStory type="outlined" />
 );
 
 // Story: Button Types - Text
-export const ButtonTypeTextStory = (): ReactElement => (
+export const ButtonTypeTextStory = (): JSX.Element => (
   <ButtonTypesStory type="text" />
 );
 
 // Story: Button Sizes
-export function ButtonSizeStory(): ReactElement {
+export function ButtonSizeStory(): JSX.Element {
   const sizes: ButtonSizeType[] = ['large', 'medium', 'small'];
 
   return (
@@ -132,7 +132,7 @@ export function ButtonSizeStory(): ReactElement {
 }
 
 // Story: Button Elements
-export const ButtonElementStory = (): ReactElement => {
+export const ButtonElementStory = (): JSX.Element => {
   const [facebookLoading, setFacebookLoading] = useState<boolean>(false);
   const [googleLoading, setGoogleLoading] = useState<boolean>(false);
 

diff --git a/docs/src/components/ButtonGroup/ButtonGroupStories.tsx b/docs/src/components/ButtonGroup/ButtonGroupStories.tsx
@@ -1,4 +1,4 @@
-import type {ComponentProps, ReactElement} from 'react';
+import type {ComponentProps} from 'react';
 import {useState} from 'react';
 import type {Meta, Story} from '@storybook/react/types-6-0';
 import {ButtonGroup, DoobooProvider} from 'dooboo-ui';
@@ -18,7 +18,7 @@ const initialProps: ButtonGroupProps = {
   color: 'primary',
 };
 
-const Container = ({children}): ReactElement => {
+const Container = ({children}): JSX.Element => {
   const isDark = useDarkMode();
 
   return (
@@ -28,7 +28,7 @@ const Container = ({children}): ReactElement => {
   );
 };
 
-const ButtonGroupStory: Story<ButtonGroupProps> = (args): ReactElement => {
+const ButtonGroupStory: Story<ButtonGroupProps> = (args): JSX.Element => {
   const {options, initialValue} = args;
   const [selectedIndex, setSelectedIndex] = useState(initialValue);
 

diff --git a/docs/src/components/Checkbox/CheckboxStories.tsx b/docs/src/components/Checkbox/CheckboxStories.tsx
@@ -1,4 +1,4 @@
-import type {ComponentProps, ReactElement} from 'react';
+import type {ComponentProps} from 'react';
 import {useState} from 'react';
 import {View} from 'react-native';
 import {css} from '@emotion/native';
@@ -18,7 +18,7 @@ const initialProps: CheckboxProps = {
   checked: false,
 };
 
-const Container = ({children}): ReactElement => {
+const Container = ({children}): JSX.Element => {
   const isDark = useDarkMode();
 
   return (
@@ -34,7 +34,7 @@ const Container = ({children}): ReactElement => {
   );
 };
 
-const CheckboxStory: Story<CheckboxProps> = (args): ReactElement => {
+const CheckboxStory: Story<CheckboxProps> = (args): JSX.Element => {
   return (
     <Container>
       <Checkbox {...args} />
@@ -46,7 +46,7 @@ export const CheckboxTemplate = CheckboxStory.bind({});
 CheckboxTemplate.args = initialProps;
 
 // Disabled
-export function CheckboxDisabledStory(): ReactElement {
+export function CheckboxDisabledStory(): JSX.Element {
   return (
     <Container>
       <View
@@ -64,7 +64,7 @@ export function CheckboxDisabledStory(): ReactElement {
   );
 }
 
-export function CheckboxSolid(): ReactElement {
+export function CheckboxSolid(): JSX.Element {
   const [checked, setChecked] = useState<boolean>(false);
 
   return (
@@ -119,7 +119,7 @@ export function CheckboxSolid(): ReactElement {
 }
 
 // StartElement
-export function CheckboxStartElement(): ReactElement {
+export function CheckboxStartElement(): JSX.Element {
   const [checked, setChecked] = useState<boolean>(false);
 
   return (
@@ -145,7 +145,7 @@ export function CheckboxStartElement(): ReactElement {
 }
 
 // EndElement
-export function CheckboxEndElement(): ReactElement {
+export function CheckboxEndElement(): JSX.Element {
   const [checked, setChecked] = useState<boolean>(false);
 
   return (

diff --git a/docs/src/components/EditText/EditTextStories.tsx b/docs/src/components/EditText/EditTextStories.tsx
@@ -1,4 +1,4 @@
-import type {ComponentProps, ReactElement} from 'react';
+import type {ComponentProps} from 'react';
 import {useState} from 'react';
 import {View} from 'react-native';
 import {css} from '@emotion/native';
@@ -32,7 +32,7 @@ const initialProps: EditTextProps = {
   value: '',
 };
 
-const Container = ({children}): ReactElement => {
+const Container = ({children}): JSX.Element => {
   const isDark = useDarkMode();
 
   return (
@@ -48,7 +48,7 @@ const Container = ({children}): ReactElement => {
   );
 };
 
-const EditTextStory: Story<EditTextProps> = (args): ReactElement => {
+const EditTextStory: Story<EditTextProps> = (args): JSX.Element => {
   const [value, setValue] = useState<string>('');
 
   return (

diff --git a/docs/src/components/Fab/FabStories.tsx b/docs/src/components/Fab/FabStories.tsx
@@ -1,4 +1,4 @@
-import type {ComponentProps, ReactElement} from 'react';
+import type {ComponentProps} from 'react';
 import {useState} from 'react';
 import {View} from 'react-native';
 import {css} from '@emotion/native';
@@ -21,7 +21,7 @@ const initialProps: FabProps = {
   isActive: true,
 };
 
-const Container = ({style, children}): ReactElement => {
+const Container = ({style, children}): JSX.Element => {
   const isDark = useDarkMode();
 
   return (
@@ -40,7 +40,7 @@ const Container = ({style, children}): ReactElement => {
   );
 };
 
-const FabStory: Story<FabProps> = (args): ReactElement => {
+const FabStory: Story<FabProps> = (args): JSX.Element => {
   const [isActive, setIsActive] = useState(false);
 
   return (

diff --git a/docs/src/components/Icon/IconStories.tsx b/docs/src/components/Icon/IconStories.tsx
@@ -1,4 +1,4 @@
-import type {ComponentProps, ReactElement} from 'react';
+import type {ComponentProps} from 'react';
 import {useState} from 'react';
 import {View} from 'react-native';
 import {css} from '@emotion/native';
@@ -25,7 +25,7 @@ const initialProps: IconProps = {
   name: 'Airplane',
 };
 
-const Container = ({children}): ReactElement => {
+const Container = ({children}): JSX.Element => {
   const isDark = useDarkMode();
 
   return (
@@ -41,7 +41,7 @@ const Container = ({children}): ReactElement => {
   );
 };
 
-const IconStory: Story<IconProps> = (args): ReactElement => {
+const IconStory: Story<IconProps> = (args): JSX.Element => {
   return (
     <Container>
       <Icon {...args} />
@@ -53,7 +53,7 @@ export const IconTemplate = IconStory.bind({});
 IconTemplate.args = initialProps;
 
 // IconList
-export function IconList(): ReactElement {
+export function IconList(): JSX.Element {
   const [searchText, setSearchText] = useState('');
   const filteredIcons = (doobooIconList as IconNames).filter((icon) =>
     icon.toLocaleLowerCase().includes(searchText.toLocaleLowerCase()),
@@ -91,7 +91,7 @@ export function IconList(): ReactElement {
             gap: 12px;
           `}
         >
-          {filteredIcons.map((icon): ReactElement => {
+          {filteredIcons.map((icon): JSX.Element => {
             return (
               <View
                 key={icon}

diff --git a/docs/src/components/IconButton/IconButtonStories.tsx b/docs/src/components/IconButton/IconButtonStories.tsx
@@ -1,4 +1,4 @@
-import type {ComponentProps, ReactElement} from 'react';
+import type {ComponentProps} from 'react';
 import {action} from '@storybook/addon-actions';
 import type {Meta, Story} from '@storybook/react/types-6-0';
 import {DoobooProvider, IconButton} from 'dooboo-ui';
@@ -17,7 +17,7 @@ const initialProps: IconButtonProps = {
   icon: 'Airplane',
 };
 
-const Container = ({children}): ReactElement => {
+const Container = ({children}): JSX.Element => {
   const isDark = useDarkMode();
 
   return (
@@ -27,7 +27,7 @@ const Container = ({children}): ReactElement => {
   );
 };
 
-const IconButtonStory: Story<IconButtonProps> = (args): ReactElement => {
+const IconButtonStory: Story<IconButtonProps> = (args): JSX.Element => {
   return (
     <Container>
       <IconButton {...args} />

diff --git a/docs/src/components/LoadingIndicator/LoadingIndicatorStories.tsx b/docs/src/components/LoadingIndicator/LoadingIndicatorStories.tsx
@@ -1,4 +1,4 @@
-import type {ComponentProps, ReactElement} from 'react';
+import type {ComponentProps} from 'react';
 import {View} from 'react-native';
 import {css} from '@emotion/native';
 import type {Meta, Story} from '@storybook/react/types-6-0';
@@ -15,7 +15,7 @@ type LoadingIndicatorProps = ComponentProps<typeof LoadingIndicator>;
 
 const initialProps: LoadingIndicatorProps = {};
 
-const Container = ({children}): ReactElement => {
+const Container = ({children}): JSX.Element => {
   const isDark = useDarkMode();
 
   return (
@@ -33,7 +33,7 @@ const Container = ({children}): ReactElement => {
 
 const LoadingIndicatorStory: Story<LoadingIndicatorProps> = (
   args,
-): ReactElement => {
+): JSX.Element => {
   return (
     <Container>
       <LoadingIndicator {...args} />

diff --git a/docs/src/components/RadioGroup/RadioGroupStories.tsx b/docs/src/components/RadioGroup/RadioGroupStories.tsx
@@ -1,4 +1,4 @@
-import type {ComponentProps, ReactElement} from 'react';
+import type {ComponentProps} from 'react';
 import {useState} from 'react';
 import {View} from 'react-native';
 import {css} from '@emotion/native';
@@ -19,7 +19,7 @@ const initialProps: RadioGroupProps = {
   selectedValue: 'Option 1',
 };
 
-const Container = ({children}): ReactElement => {
+const Container = ({children}): JSX.Element => {
   const isDark = useDarkMode();
 
   return (
@@ -35,7 +35,7 @@ const Container = ({children}): ReactElement => {
   );
 };
 
-const RadioGroupStory: Story<RadioGroupProps> = (args): ReactElement => {
+const RadioGroupStory: Story<RadioGroupProps> = (args): JSX.Element => {
   const [selectedValue, setSelectedValue] = useState(
     args.selectedValue as string,
   );

diff --git a/docs/src/components/SwitchToggle/SwitchToggleStories.tsx b/docs/src/components/SwitchToggle/SwitchToggleStories.tsx
@@ -1,4 +1,4 @@
-import type {ComponentProps, ReactElement} from 'react';
+import type {ComponentProps} from 'react';
 import {useState} from 'react';
 import {View} from 'react-native';
 import {css} from '@emotion/native';
@@ -16,7 +16,7 @@ type SwitchToggleProps = ComponentProps<typeof SwitchToggle>;
 
 const initialProps: SwitchToggleProps = {isOn: false};
 
-const Container = ({children}): ReactElement => {
+const Container = ({children}): JSX.Element => {
   const isDark = useDarkMode();
 
   return (
@@ -32,7 +32,7 @@ const Container = ({children}): ReactElement => {
   );
 };
 
-const SwitchToggleStory: Story<SwitchToggleProps> = (args): ReactElement => {
+const SwitchToggleStory: Story<SwitchToggleProps> = (args): JSX.Element => {
   const [isOn, setIsOn] = useState(args.isOn);
 
   return (

diff --git a/main/modals/AlertDialog/index.tsx b/main/modals/AlertDialog/index.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 import React, {
   cloneElement,
   forwardRef,
@@ -68,11 +67,11 @@ export type AlertDialogStyles = {
 
 export type AlertDialogOptions = {
   styles?: AlertDialogStyles;
-  title?: string | ReactElement;
-  body?: string | ReactElement;
+  title?: string | JSX.Element;
+  body?: string | JSX.Element;
   backdropOpacity?: number;
   closeOnTouchOutside?: boolean;
-  actions?: ReactElement[];
+  actions?: JSX.Element[];
 };
 
 export type AlertDialogContext = {
@@ -83,7 +82,7 @@ export type AlertDialogContext = {
 function AlertDialog(
   {style}: AlertDialogProps,
   ref: React.Ref<AlertDialogContext>,
-): ReactElement {
+): JSX.Element {
   const [options, setOptions] = useState<AlertDialogOptions | null>(null);
   const [visible, setVisible] = useState(false);
   const {theme, themeType} = useTheme();

diff --git a/main/modals/Snackbar/index.tsx b/main/modals/Snackbar/index.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 import React, {forwardRef, useImperativeHandle, useState} from 'react';
 import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {Modal, Platform, StyleSheet} from 'react-native';
@@ -80,7 +79,7 @@ function clearTimer(): void {
 function Snackbar(
   {style}: SnackbarProps,
   ref: React.Ref<SnackbarContext>,
-): ReactElement {
+): JSX.Element {
   const [options, setOptions] = useState<SnackbarOptions | null>(null);
   const [visible, setVisible] = useState(false);
   const {theme} = useTheme();