chore: NO-JIRA: change React.FC to FC

VirtusLab · Nov 3, 2023 · a6dbd52 · a6dbd52
1 parent 5229417
commit a6dbd52
Show file tree

Hide file tree

Showing 37 changed files with 123 additions and 92 deletions.
diff --git a/src/components/AlertBanner/AlertBanner.tsx b/src/components/AlertBanner/AlertBanner.tsx
@@ -1,5 +1,5 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
-import { useMemo } from 'react';
+import { FC, useMemo } from 'react';
 
 import { AlertBannerProps } from './AlertBanner.props';
 import { resolveIconName } from './AlertBanner.styles';
@@ -11,7 +11,7 @@ import { useAction } from '@/hooks';
 import { tet } from '@/tetrisly';
 import { MarginProps } from '@/types';
 
-export const AlertBanner: React.FC<AlertBannerProps & MarginProps> = ({
+export const AlertBanner: FC<AlertBannerProps & MarginProps> = ({
   text,
   intent = 'none',
   custom,

diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
@@ -1,12 +1,12 @@
-import { useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
 import type { AvatarProps } from './Avatar.props';
 import { stylesBuilder } from './stylesBuilder';
 
 import { tet } from '@/tetrisly';
 import type { MarginProps } from '@/types/MarginProps';
 
-export const Avatar: React.FC<AvatarProps & MarginProps> = ({
+export const Avatar: FC<AvatarProps & MarginProps> = ({
   appearance = 'blue',
   emphasis = 'low',
   shape = 'rounded',

diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
@@ -1,13 +1,13 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
-import { useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
-import { BadgeProps } from './Badge.props';
+import type { BadgeProps } from './Badge.props';
 import { stylesBuilder } from './stylesBuilder';
 
 import { tet } from '@/tetrisly';
-import { MarginProps } from '@/types/MarginProps';
+import type { MarginProps } from '@/types/MarginProps';
 
-export const Badge: React.FC<BadgeProps & MarginProps> = ({
+export const Badge: FC<BadgeProps & MarginProps> = ({
   appearance,
   intent = 'neutral',
   emphasis = 'high',

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -1,15 +1,15 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
-import { useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
-import { ButtonProps } from './Button.props';
+import type { ButtonProps } from './Button.props';
 import { stylesBuilder } from './stylesBuilder';
 import { tet } from '../../tetrisly';
 import { Loader } from '../Loader';
 
 import { warnInDevelopment } from '@/services';
 import type { MarginProps } from '@/types';
 
-export const Button: React.FC<ButtonProps & MarginProps> = ({
+export const Button: FC<ButtonProps & MarginProps> = ({
   variant = 'default',
   appearance = 'secondary',
   intent = 'none',

diff --git a/src/components/CheckboxGroup/CheckboxGroup.tsx b/src/components/CheckboxGroup/CheckboxGroup.tsx
@@ -1,5 +1,6 @@
 import {
   Children,
+  FC,
   ForwardRefExoticComponent,
   isValidElement,
   PropsWithChildren,
@@ -8,14 +9,14 @@ import {
 
 import type { CheckboxGroupProps } from './CheckboxGroup.props';
 import { stylesBuilder } from './stylesBuilder';
-import { Checkbox, CheckboxProps } from '../Checkbox';
+import { Checkbox, type CheckboxProps } from '../Checkbox';
 import { HelperText } from '../HelperText';
 import { Label } from '../Label';
 
 import { tet } from '@/tetrisly';
-import { MarginProps } from '@/types';
+import type { MarginProps } from '@/types';
 
-type Props = React.FC<PropsWithChildren<CheckboxGroupProps & MarginProps>> & {
+type Props = FC<PropsWithChildren<CheckboxGroupProps & MarginProps>> & {
   Item: ForwardRefExoticComponent<CheckboxProps & MarginProps>;
 };
 

diff --git a/src/components/Counter/Counter.tsx b/src/components/Counter/Counter.tsx
@@ -1,12 +1,12 @@
-import { useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
 import type { CounterProps } from './Counter.props';
 import { stylesBuilder } from './stylesBuilder';
 
 import { tet } from '@/tetrisly';
 import type { MarginProps } from '@/types';
 
-export const Counter: React.FC<CounterProps & MarginProps> = ({
+export const Counter: FC<CounterProps & MarginProps> = ({
   number,
   appearance = 'default',
   emphasis = 'low',

diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx
@@ -1,12 +1,12 @@
-import { useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
 import type { DividerProps } from './Divider.props';
 import { stylesBuilder } from './stylesBuilder';
 
 import { tet } from '@/tetrisly';
 import type { MarginProps } from '@/types';
 
-export const Divider: React.FC<DividerProps & MarginProps> = ({
+export const Divider: FC<DividerProps & MarginProps> = ({
   orientation = 'horizontal',
   width,
   height,

diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx
@@ -1,9 +1,11 @@
+import type { FC } from 'react';
+
 import { IconButtonProps } from './IconButton.props';
 import { defaultConfig } from './IconButton.styles';
-import { Button, ButtonProps } from '../Button';
+import { Button, type ButtonProps } from '../Button';
 
 import { mergeConfigWithCustom } from '@/services';
-import { MarginProps } from '@/types';
+import type { MarginProps } from '@/types';
 
 const mapperIconButtonPropsToButtonProps = ({
   children,
@@ -21,7 +23,7 @@ const mapperIconButtonPropsToButtonProps = ({
   } as ButtonProps;
 };
 
-export const IconButton: React.FC<IconButtonProps & MarginProps> = (props) => {
+export const IconButton: FC<IconButtonProps & MarginProps> = (props) => {
   const buttonProps = mapperIconButtonPropsToButtonProps(props);
   const custom = mergeConfigWithCustom({
     defaultConfig,

diff --git a/src/components/InlineBanner/InlineBanner.tsx b/src/components/InlineBanner/InlineBanner.tsx
@@ -1,5 +1,5 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
-import { useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
 import type { InlineBannerProps } from './InlineBanner.props';
 import { resolveIconName } from './InlineBanner.styles';
@@ -11,7 +11,7 @@ import { useAction } from '@/hooks';
 import { tet } from '@/tetrisly/tetrisly';
 import type { MarginProps } from '@/types';
 
-export const InlineBanner: React.FC<InlineBannerProps & MarginProps> = ({
+export const InlineBanner: FC<InlineBannerProps & MarginProps> = ({
   title,
   description,
   intent = 'none',

diff --git a/src/components/InlineMessage/InlineMessage.tsx b/src/components/InlineMessage/InlineMessage.tsx
@@ -1,14 +1,14 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
-import { useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
-import { InlineMessageProps } from './InlineMessage.props';
+import type { InlineMessageProps } from './InlineMessage.props';
 import { resolveIconName } from './InlineMessage.styles';
 import { stylesBuilder } from './stylesBuilder';
 import { tet } from '../../tetrisly';
 
-import { MarginProps } from '@/types/MarginProps';
+import type { MarginProps } from '@/types/MarginProps';
 
-export const InlineMessage: React.FC<InlineMessageProps & MarginProps> = ({
+export const InlineMessage: FC<InlineMessageProps & MarginProps> = ({
   intent = 'informative',
   title,
   description,

diff --git a/src/components/InlineSearchInput/InlineSearchInput.tsx b/src/components/InlineSearchInput/InlineSearchInput.tsx
@@ -1,15 +1,16 @@
-import { useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
-import { InlineSearchInputProps } from './InlineSearchInput.props';
+import type { InlineSearchInputProps } from './InlineSearchInput.props';
 import { defaultConfig } from './InlineSearchInput.styles';
 import { SearchInput } from '../SearchInput';
 
 import { mergeConfigWithCustom } from '@/services';
-import { MarginProps } from '@/types';
+import type { MarginProps } from '@/types';
 
-export const InlineSearchInput: React.FC<
-  InlineSearchInputProps & MarginProps
-> = ({ custom, ...restProps }) => {
+export const InlineSearchInput: FC<InlineSearchInputProps & MarginProps> = ({
+  custom,
+  ...restProps
+}) => {
   const config = useMemo(
     () => mergeConfigWithCustom({ defaultConfig, custom }),
     [custom],

diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
@@ -1,14 +1,14 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
-import { useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
 import type { LabelProps } from './Label.props';
 import { stylesBuilder } from './stylesBuilder';
 import { Button } from '../Button';
 
 import { tet } from '@/tetrisly';
-import { MarginProps } from '@/types/MarginProps';
+import type { MarginProps } from '@/types/MarginProps';
 
-export const Label: React.FC<LabelProps & MarginProps> = ({
+export const Label: FC<LabelProps & MarginProps> = ({
   label,
   tooltip,
   action,

diff --git a/src/components/Loader/Loader.tsx b/src/components/Loader/Loader.tsx
@@ -1,13 +1,15 @@
-import { useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
 import { AnimatedProgress } from './AnimatedProgress';
-import { LoaderProps } from './Loader.props';
+import type { LoaderProps } from './Loader.props';
 import { stylesBuilder } from './stylesBuilder';
 
 import { tet } from '@/tetrisly';
-import { MarginProps } from '@/types';
+import type { MarginProps } from '@/types';
 
-export const Loader: React.FC<LoaderProps & MarginProps> = ({
+type NewType = FC<LoaderProps & MarginProps>;
+
+export const Loader: NewType = ({
   appearance = 'primary',
   progress,
   shape,

diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx
@@ -1,15 +1,13 @@
 import { useSpace } from '@xstyled/styled-components';
-import { type PropsWithChildren, useMemo } from 'react';
+import { type PropsWithChildren, useMemo, type FC } from 'react';
 
 import { AnchorWrapper, PopoverContent } from './AnchorWrapper.styled';
 import type { PopoverProps } from './Popover.props';
 import { stylesBuilder } from './stylesBuilder';
 
 import type { MarginProps } from '@/types';
 
-export const Popover: React.FC<
-  PropsWithChildren<PopoverProps & MarginProps>
-> = ({
+export const Popover: FC<PropsWithChildren<PopoverProps & MarginProps>> = ({
   align = 'center',
   origin = 'top',
   offset = '$space-component-gap-large',

diff --git a/src/components/RadioButtonGroup/RadioButtonGroup.tsx b/src/components/RadioButtonGroup/RadioButtonGroup.tsx
@@ -1,9 +1,10 @@
 import {
   Children,
   cloneElement,
+  type FC,
   isValidElement,
-  PropsWithChildren,
-  ReactElement,
+  type PropsWithChildren,
+  type ReactElement,
   useMemo,
 } from 'react';
 
@@ -19,10 +20,8 @@ import { RadioButton } from '../RadioButton';
 import { tet } from '@/tetrisly';
 import type { MarginProps } from '@/types';
 
-type Props = React.FC<
-  PropsWithChildren<RadioButtonGroupProps & MarginProps>
-> & {
-  Item: React.FC<RadioButtonGroupItemProps>;
+type Props = FC<PropsWithChildren<RadioButtonGroupProps & MarginProps>> & {
+  Item: FC<RadioButtonGroupItemProps>;
 };
 
 export const RadioButtonGroup: Props = ({
@@ -95,7 +94,7 @@ export const RadioButtonGroup: Props = ({
   );
 };
 
-const Item: React.FC<RadioButtonGroupItemProps> = (props) => (
+const Item: FC<RadioButtonGroupItemProps> = (props) => (
   <RadioButton {...props} />
 );
 

diff --git a/src/components/SearchInput/SearchInput.tsx b/src/components/SearchInput/SearchInput.tsx
@@ -1,7 +1,9 @@
-import { SearchInputProps } from './SearchInput.props';
-import { TextInput, TextInputProps } from '../TextInput';
+import type { FC } from 'react';
 
-import { MarginProps } from '@/types';
+import type { SearchInputProps } from './SearchInput.props';
+import { TextInput, type TextInputProps } from '../TextInput';
+
+import type { MarginProps } from '@/types';
 
 const SEARCH_ICON_COMPONENT: TextInputProps['beforeComponent'] = {
   type: 'Icon',
@@ -10,7 +12,7 @@ const SEARCH_ICON_COMPONENT: TextInputProps['beforeComponent'] = {
   },
 };
 
-export const SearchInput: React.FC<SearchInputProps & MarginProps> = ({
+export const SearchInput: FC<SearchInputProps & MarginProps> = ({
   placeholder = 'Search...',
   hasClearButton = true,
   ...restProps

diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -1,4 +1,5 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
+import type { FC } from 'react';
 
 import type { SelectProps } from './Select.props';
 import { Avatar } from '../Avatar';
@@ -16,7 +17,7 @@ const DROPDOWN_INDICATOR_COMPONENT = {
   },
 } satisfies TextInputProps['afterComponent'];
 
-export const Select: React.FC<SelectProps & MarginProps> = ({
+export const Select: FC<SelectProps & MarginProps> = ({
   state,
   beforeComponent,
   hasClearButton,

diff --git a/src/components/SocialButton/SocialButton.tsx b/src/components/SocialButton/SocialButton.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { FC, useMemo } from 'react';
 
 import { SocialButtonProps } from './SocialButton.props';
 import { socials } from './socials';
@@ -7,7 +7,7 @@ import { stylesBuilder } from './stylesBuilder';
 import { tet } from '@/tetrisly';
 import type { MarginProps } from '@/types';
 
-export const SocialButton: React.FC<SocialButtonProps & MarginProps> = ({
+export const SocialButton: FC<SocialButtonProps & MarginProps> = ({
   platform,
   appearance = 'primary',
   custom,

diff --git a/src/components/SocialButton/socials/Apple.tsx b/src/components/SocialButton/socials/Apple.tsx
@@ -1,9 +1,11 @@
+import type { FC } from 'react';
+
 import type { SocialProps } from './SocialProps';
 import { WithLoader } from './WithLoader';
 
 import { tet } from '@/tetrisly';
 
-export const Apple: React.FC<SocialProps> = ({ fill, loading }) => (
+export const Apple: FC<SocialProps> = ({ fill, loading }) => (
   <WithLoader loading={loading}>
     <tet.svg
       data-testid="apple-icon"

diff --git a/src/components/SocialButton/socials/Facebook.tsx b/src/components/SocialButton/socials/Facebook.tsx
@@ -1,7 +1,9 @@
+import type { FC } from 'react';
+
 import type { SocialProps } from './SocialProps';
 import { WithLoader } from './WithLoader';
 
-export const Facebook: React.FC<SocialProps> = ({ fill, loading }) => (
+export const Facebook: FC<SocialProps> = ({ fill, loading }) => (
   <WithLoader loading={loading}>
     <svg
       data-testid="facebook-icon"

diff --git a/src/components/SocialButton/socials/Figma.tsx b/src/components/SocialButton/socials/Figma.tsx
@@ -1,7 +1,9 @@
-import { SocialProps } from './SocialProps';
+import type { FC } from 'react';
+
+import type { SocialProps } from './SocialProps';
 import { WithLoader } from './WithLoader';
 
-export const Figma: React.FC<SocialProps> = ({ fill, loading }) => (
+export const Figma: FC<SocialProps> = ({ fill, loading }) => (
   <WithLoader loading={loading}>
     <svg
       data-testid="figma-icon"

diff --git a/src/components/SocialButton/socials/Github.tsx b/src/components/SocialButton/socials/Github.tsx
@@ -1,7 +1,9 @@
-import { SocialProps } from './SocialProps';
+import type { FC } from 'react';
+
+import type { SocialProps } from './SocialProps';
 import { WithLoader } from './WithLoader';
 
-export const Github: React.FC<SocialProps> = ({ fill, loading }) => (
+export const Github: FC<SocialProps> = ({ fill, loading }) => (
   <WithLoader loading={loading}>
     <svg
       data-testid="github-icon"