Fixes #52 - Remove usage of React.FC

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<any[] | null>(null); // eslint-disable-line
   const Img = layer.img;
@@ -114,11 +116,11 @@ export type InfographicAnimationProps = {
   isOn?: boolean;
 };
 
-const InfographicAnimation: FC<InfographicAnimationProps> = ({
+const InfographicAnimation = ({
   size,
   kind,
   isOn = true,
-}) => {
+}: InfographicAnimationProps) => {
   const [animList, setAnimList] = useState<any>(null); // eslint-disable-line
   const [isAnimOn, setIsAnimOn] = useState(false);
   const [animWidth, setAnimWidth] = useState(size);

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<SlideshowProps> = () => {
+const Slideshow = () => {
   const slidesLength = 4;
   const { height: windowHeight, width: windowWidth } = useWindowSize();
   const wrapperRef = useRef<HTMLDivElement>(null);

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<HTMLDivElement>(null);
   const inView = useInView(animationRef, { once: true });
 

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 <img src="logo.png" alt="A cute dog" />;
 };

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<PageShellProps> = ({ children, className }) => {
+const PageShell = ({ children, className }: PageShellProps) => {
   const pageVariants = useMemo(
     () => ({
       hide: { opacity: 0 },

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<ReleaseCycleProps> = () => (
+const ReleaseCycle = () => (
   <section>
     <Grid>
       <Column

src/components/ReleaseCycle/graphics/ReleaseCycleDiagram.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import { cubicBezier, motion, useInView } from 'framer-motion';
-import { FC, useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 
 import styles from './ReleaseCycleDiagram.module.scss';
 import { useResizeObserver } from '@react-hookz/web';
 
-const ReleaseCycleDiagram: FC = () => {
+const ReleaseCycleDiagram = () => {
   const wrapperRef = useRef<SVGSVGElement>(null);
   const isInView = useInView(wrapperRef, { once: true });
   const [baseFontSize, setBaseFontSize] = useState(16);

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<HTMLDivElement>(null);
   const inView = useInView(ref, { once: true });
   const {

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 (
     <div className={styles.borderedAnswer}>
       {title ? (

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 (
     <div
       className={classNames(styles.cell, {
@@ -39,7 +41,7 @@ const pickRandomIds = (count: number, max: number, avoid: string[] = []) => {
   return result;
 };
 
-const MatrixAnimation: FC = () => {
+const MatrixAnimation = () => {
   const isFresh = useRef<Record<string, boolean>>({});
   const timeout = useRef<any>(); // eslint-disable-line
   const wrapperRef = useRef<HTMLDivElement>(null);

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<Taxonomy> = () => {
+const StartExperimenting = () => {
   const [showTree, setShowTree] = useState(true);
   useResize(
     () => setShowTree(true),

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<HTMLDivElement>;
   dest: RefObject<HTMLDivElement>;
   dashed?: boolean;
   selected?: boolean;
-}> = ({ src, dest, dashed, selected, idx }) => {
+};
+
+const Link = ({ src, dest, dashed, selected, idx }: LinkProps) => {
   const [rendered, setRendered] = useState(false);
 
   useEffect(() => {

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<NodeProps> = ({
+export const DashedNode = ({
   children: renderChildren,
   className,
   idx,
@@ -102,7 +102,7 @@ export const DashedNode: FC<NodeProps> = ({
   parent,
   top,
   width,
-}) => {
+}: NodeProps) => {
   const ref = useRef<HTMLDivElement>(null);
 
   return (
@@ -134,7 +134,7 @@ export const DashedNode: FC<NodeProps> = ({
   );
 };
 
-export const Node: FC<NodeProps> = ({
+export const Node = ({
   children: renderChildren,
   className,
   idx,
@@ -144,7 +144,7 @@ export const Node: FC<NodeProps> = ({
   selected,
   top,
   width,
-}) => {
+}: NodeProps) => {
   const ref = useRef<HTMLDivElement>(null);
 
   return (

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<HTMLDivElement>(null);
   const animationStarted = useRef(true);
   const inView = useInView(animationRef, { once: true });