From 0ff6b3ae23121286bfa6efc1de8d9e1cb8f61964 Mon Sep 17 00:00:00 2001 From: Rivaldo Rodrigues Date: Thu, 17 Oct 2024 15:41:21 -0300 Subject: [PATCH] Remove usage of React.FC Signed-off-by: Rivaldo Rodrigues --- .../HowItWorks/InfographicAnimation/index.tsx | 12 +++++++----- src/components/HowItWorks/Slideshow.tsx | 16 ++-------------- src/components/Leadspace/graphics/Cube.tsx | 4 ++-- src/components/Leadspace/graphics/Logo.tsx | 4 ++-- src/components/PageShell/PageShell.tsx | 4 ++-- src/components/ReleaseCycle/ReleaseCycle.tsx | 7 +------ .../graphics/ReleaseCycleDiagram.tsx | 4 ++-- .../AnimatedTerminal/AnimatedTerminal.tsx | 4 ++-- .../AnimatedTerminal/animations/chat.tsx | 10 ++++++++-- .../MatrixAnimation/MatrixAnimation.tsx | 10 ++++++---- src/components/Taxonomy/Taxonomy.tsx | 8 ++------ src/components/Taxonomy/TaxonomyTree/Link.tsx | 8 +++++--- src/components/Taxonomy/TaxonomyTree/Node.tsx | 10 +++++----- .../Taxonomy/TaxonomyTree/TaxonomyTree.tsx | 4 ++-- 14 files changed, 48 insertions(+), 57 deletions(-) diff --git a/src/components/HowItWorks/InfographicAnimation/index.tsx b/src/components/HowItWorks/InfographicAnimation/index.tsx index 54519c4..138012e 100644 --- a/src/components/HowItWorks/InfographicAnimation/index.tsx +++ b/src/components/HowItWorks/InfographicAnimation/index.tsx @@ -1,4 +1,4 @@ -import { FC, Fragment, useEffect, useCallback, useState } from 'react'; +import { Fragment, useEffect, useCallback, useState } from 'react'; import { infographicList } from './constant'; import styles from './InfographicAnimation.module.scss'; @@ -17,12 +17,14 @@ const getPos = ( return pos === 0 ? '0' : `${(pos / originalSize[idx]) * 100}%`; }; -const LayerImg: FC<{ +type LayerImgProps = { layer: Layer; // eslint-disable-line size: number; originalSize: number[]; isAnimOn: boolean; -}> = ({ layer, size, originalSize, isAnimOn }) => { +}; + +const LayerImg = ({ layer, size, originalSize, isAnimOn }: LayerImgProps) => { const [targetStyle, setTargetStyle] = useState({}); const [animList, setAnimList] = useState(null); // eslint-disable-line const Img = layer.img; @@ -114,11 +116,11 @@ export type InfographicAnimationProps = { isOn?: boolean; }; -const InfographicAnimation: FC = ({ +const InfographicAnimation = ({ size, kind, isOn = true, -}) => { +}: InfographicAnimationProps) => { const [animList, setAnimList] = useState(null); // eslint-disable-line const [isAnimOn, setIsAnimOn] = useState(false); const [animWidth, setAnimWidth] = useState(size); diff --git a/src/components/HowItWorks/Slideshow.tsx b/src/components/HowItWorks/Slideshow.tsx index af6f851..7b8fad5 100644 --- a/src/components/HowItWorks/Slideshow.tsx +++ b/src/components/HowItWorks/Slideshow.tsx @@ -5,15 +5,7 @@ import { useScroll, useTransform, } from 'framer-motion'; -import { - FC, - memo, - useCallback, - useEffect, - useMemo, - useRef, - useState, -} from 'react'; +import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import DebugAnimationContext from './utils/DebugAnimationContext'; import InfographicAnimation, { InfographicAnimationProps, @@ -72,11 +64,7 @@ const steps = [ const SLIDE_HEIGHT = 800; -type SlideshowProps = { - // -}; - -const Slideshow: FC = () => { +const Slideshow = () => { const slidesLength = 4; const { height: windowHeight, width: windowWidth } = useWindowSize(); const wrapperRef = useRef(null); diff --git a/src/components/Leadspace/graphics/Cube.tsx b/src/components/Leadspace/graphics/Cube.tsx index f64599c..8ebbd3b 100644 --- a/src/components/Leadspace/graphics/Cube.tsx +++ b/src/components/Leadspace/graphics/Cube.tsx @@ -8,7 +8,7 @@ import { motion, useInView, } from 'framer-motion'; -import { FC, useMemo, useRef } from 'react'; +import { useMemo, useRef } from 'react'; import styles from './Cube.module.scss'; @@ -20,7 +20,7 @@ const phaseTransition = ([start, end, easing]: Phase) => ({ ease: easing, }); -const Cube: FC = () => { +const Cube = () => { const animationRef = useRef(null); const inView = useInView(animationRef, { once: true }); diff --git a/src/components/Leadspace/graphics/Logo.tsx b/src/components/Leadspace/graphics/Logo.tsx index 47fdd86..9e6b29a 100644 --- a/src/components/Leadspace/graphics/Logo.tsx +++ b/src/components/Leadspace/graphics/Logo.tsx @@ -1,6 +1,6 @@ -import React, { FC } from 'react'; +import React from 'react'; -const Logo: FC = () => { +const Logo = () => { // eslint-disable-next-line @next/next/no-img-element return A cute dog; }; diff --git a/src/components/PageShell/PageShell.tsx b/src/components/PageShell/PageShell.tsx index 81c6ce7..c8f67f9 100644 --- a/src/components/PageShell/PageShell.tsx +++ b/src/components/PageShell/PageShell.tsx @@ -1,4 +1,4 @@ -import { FC, ReactNode, useMemo } from 'react'; +import { ReactNode, useMemo } from 'react'; import { AnimatePresence, motion } from 'framer-motion'; import classNames from 'classnames'; @@ -9,7 +9,7 @@ type PageShellProps = { className?: string; }; -const PageShell: FC = ({ children, className }) => { +const PageShell = ({ children, className }: PageShellProps) => { const pageVariants = useMemo( () => ({ hide: { opacity: 0 }, diff --git a/src/components/ReleaseCycle/ReleaseCycle.tsx b/src/components/ReleaseCycle/ReleaseCycle.tsx index fbda187..8219033 100644 --- a/src/components/ReleaseCycle/ReleaseCycle.tsx +++ b/src/components/ReleaseCycle/ReleaseCycle.tsx @@ -1,14 +1,9 @@ -import { FC } from 'react'; import { Column, Grid } from '@carbon/react'; import styles from './ReleaseCycle.module.scss'; import ReleaseCycleDiagram from './graphics/ReleaseCycleDiagram'; -type ReleaseCycleProps = { - // -}; - -const ReleaseCycle: FC = () => ( +const ReleaseCycle = () => (
{ +const ReleaseCycleDiagram = () => { const wrapperRef = useRef(null); const isInView = useInView(wrapperRef, { once: true }); const [baseFontSize, setBaseFontSize] = useState(16); diff --git a/src/components/StartExperimenting/components/AnimatedTerminal/AnimatedTerminal.tsx b/src/components/StartExperimenting/components/AnimatedTerminal/AnimatedTerminal.tsx index ee70cf7..d008cae 100644 --- a/src/components/StartExperimenting/components/AnimatedTerminal/AnimatedTerminal.tsx +++ b/src/components/StartExperimenting/components/AnimatedTerminal/AnimatedTerminal.tsx @@ -1,6 +1,6 @@ 'use client'; -import { FC, useEffect, useRef } from 'react'; +import { useEffect, useRef } from 'react'; import Terminal from 'react-animated-term'; import 'react-animated-term/dist/react-animated-term.css'; import styles from './AnimatedTerminal.module.scss'; @@ -19,7 +19,7 @@ const animations = [ { value: chat, duration: 6000 }, ]; -const AnimatedTerminal: FC = () => { +const AnimatedTerminal = () => { const ref = useRef(null); const inView = useInView(ref, { once: true }); const { diff --git a/src/components/StartExperimenting/components/AnimatedTerminal/animations/chat.tsx b/src/components/StartExperimenting/components/AnimatedTerminal/animations/chat.tsx index 07dfaba..8f9bccc 100644 --- a/src/components/StartExperimenting/components/AnimatedTerminal/animations/chat.tsx +++ b/src/components/StartExperimenting/components/AnimatedTerminal/animations/chat.tsx @@ -2,11 +2,17 @@ import wait from './wait'; import styles from './animationStyles.module.scss'; -const BorderedResponse: React.FC<{ +type BorderedResponseProps = { title?: string; children?: React.ReactNode; footer?: string; -}> = ({ children, title, footer }) => { +}; + +const BorderedResponse = ({ + children, + title, + footer, +}: BorderedResponseProps) => { return (
{title ? ( diff --git a/src/components/StartExperimenting/components/MatrixAnimation/MatrixAnimation.tsx b/src/components/StartExperimenting/components/MatrixAnimation/MatrixAnimation.tsx index db5fbfa..659fb4c 100644 --- a/src/components/StartExperimenting/components/MatrixAnimation/MatrixAnimation.tsx +++ b/src/components/StartExperimenting/components/MatrixAnimation/MatrixAnimation.tsx @@ -1,6 +1,6 @@ 'use client'; -import { FC, useCallback, useEffect, useRef, useState } from 'react'; +import { useCallback, useEffect, useRef, useState } from 'react'; import styles from './MatrixAnimation.module.scss'; import classNames from 'classnames'; import { useInView } from 'framer-motion'; @@ -13,9 +13,11 @@ enum Color { const PAINTED_TILES = 8; -const Tile: FC<{ +type TileProps = { color: Color; -}> = ({ color }) => { +}; + +const Tile = ({ color }: TileProps) => { return (
{ return result; }; -const MatrixAnimation: FC = () => { +const MatrixAnimation = () => { const isFresh = useRef>({}); const timeout = useRef(); // eslint-disable-line const wrapperRef = useRef(null); diff --git a/src/components/Taxonomy/Taxonomy.tsx b/src/components/Taxonomy/Taxonomy.tsx index 4be9dcb..b3b3338 100644 --- a/src/components/Taxonomy/Taxonomy.tsx +++ b/src/components/Taxonomy/Taxonomy.tsx @@ -1,17 +1,13 @@ 'use client'; -import { FC, useState } from 'react'; +import { useState } from 'react'; import { Column, Grid } from '@carbon/react'; import TaxonomyTree from './TaxonomyTree/TaxonomyTree'; import useResize from '../../utils/useResize'; import styles from './Taxonomy.module.scss'; -type Taxonomy = { - // -}; - -const StartExperimenting: FC = () => { +const StartExperimenting = () => { const [showTree, setShowTree] = useState(true); useResize( () => setShowTree(true), diff --git a/src/components/Taxonomy/TaxonomyTree/Link.tsx b/src/components/Taxonomy/TaxonomyTree/Link.tsx index 2a54f86..c8256f8 100644 --- a/src/components/Taxonomy/TaxonomyTree/Link.tsx +++ b/src/components/Taxonomy/TaxonomyTree/Link.tsx @@ -1,4 +1,4 @@ -import { FC, RefObject, useEffect, useState } from 'react'; +import { RefObject, useEffect, useState } from 'react'; import { LINE_DRAW_SPEED, NODE_DELAY } from './TaxonomyTree'; import { Variants, cubicBezier, motion } from 'framer-motion'; import classNames from 'classnames'; @@ -44,13 +44,15 @@ const dashedLinkVariants: Variants = { }), }; -const Link: FC<{ +type LinkProps = { idx?: number; src: RefObject; dest: RefObject; dashed?: boolean; selected?: boolean; -}> = ({ src, dest, dashed, selected, idx }) => { +}; + +const Link = ({ src, dest, dashed, selected, idx }: LinkProps) => { const [rendered, setRendered] = useState(false); useEffect(() => { diff --git a/src/components/Taxonomy/TaxonomyTree/Node.tsx b/src/components/Taxonomy/TaxonomyTree/Node.tsx index ecd89bf..69c9407 100644 --- a/src/components/Taxonomy/TaxonomyTree/Node.tsx +++ b/src/components/Taxonomy/TaxonomyTree/Node.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import { Variants, motion } from 'framer-motion'; import Link from './Link'; -import { FC, ReactNode, RefObject, useRef } from 'react'; +import { ReactNode, RefObject, useRef } from 'react'; import { NODE_DELAY, LINE_DRAW_SPEED } from './TaxonomyTree'; import styles from './TaxonomyTree.module.scss'; @@ -93,7 +93,7 @@ const typedTextVariants: Variants = { }), }; -export const DashedNode: FC = ({ +export const DashedNode = ({ children: renderChildren, className, idx, @@ -102,7 +102,7 @@ export const DashedNode: FC = ({ parent, top, width, -}) => { +}: NodeProps) => { const ref = useRef(null); return ( @@ -134,7 +134,7 @@ export const DashedNode: FC = ({ ); }; -export const Node: FC = ({ +export const Node = ({ children: renderChildren, className, idx, @@ -144,7 +144,7 @@ export const Node: FC = ({ selected, top, width, -}) => { +}: NodeProps) => { const ref = useRef(null); return ( diff --git a/src/components/Taxonomy/TaxonomyTree/TaxonomyTree.tsx b/src/components/Taxonomy/TaxonomyTree/TaxonomyTree.tsx index b7fcf14..bb3b7ff 100644 --- a/src/components/Taxonomy/TaxonomyTree/TaxonomyTree.tsx +++ b/src/components/Taxonomy/TaxonomyTree/TaxonomyTree.tsx @@ -1,4 +1,4 @@ -import { FC, useCallback, useEffect, useRef, useState } from 'react'; +import { useCallback, useEffect, useRef, useState } from 'react'; import { useInView } from 'framer-motion'; import { Node, DashedNode } from './Node'; import useBreakpoint, { Breakpoint } from '../../../utils/useBreakpoint'; @@ -16,7 +16,7 @@ const lvl2 = lvl1 + 10 + lvlDelay; const lvl3 = lvl2 + 7 + lvlDelay; const lvl4 = lvl3 + 4 + lvlDelay; -const TaxonomyTree: FC = () => { +const TaxonomyTree = () => { const animationRef = useRef(null); const animationStarted = useRef(true); const inView = useInView(animationRef, { once: true });