use FC instead of FunctionalComponent

components/cart/CartSidebarView/CartSidebarView.tsx

@@ -1,10 +1,10 @@
-import React, { FunctionComponent } from 'react'
+import React, { FC } from 'react'
 import { UserNav } from '@components/core'
 import { Button } from '@components/ui'
 import { Trash, Cross } from '@components/icon'
 import { useUI } from '@components/ui/context'
 
-const CartSidebarView: FunctionComponent = () => {
+const CartSidebarView: FC = () => {
   const { closeSidebar } = useUI()
   return (
     <>

components/core/Avatar/Avatar.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import React, { FunctionComponent } from 'react'
+import React, { FC } from 'react'
 import s from './Avatar.module.css'
 
 interface Props {
@@ -7,7 +7,7 @@ interface Props {
   children?: any
 }
 
-const Avatar: FunctionComponent<Props> = ({ className }) => {
+const Avatar: FC<Props> = ({ className }) => {
   const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>

components/core/Featurebar/Featurebar.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import { FunctionComponent } from 'react'
+import { FC } from 'react'
 import s from './Featurebar.module.css'
 
 interface Props {
@@ -8,11 +8,7 @@ interface Props {
   description: string
 }
 
-const Featurebar: FunctionComponent<Props> = ({
+const Featurebar: FC<Props> = ({ title, description, className }) => {
-  title,
-  description,
-  className,
-}) => {
   const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>

components/core/Footer/Footer.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import React, { FunctionComponent } from 'react'
+import React, { FC } from 'react'
 import s from './Footer.module.css'
 import { Container } from '@components/ui'
 
@@ -8,7 +8,7 @@ interface Props {
   children?: any
 }
 
-const Footer: FunctionComponent<Props> = ({ className }) => {
+const Footer: FC<Props> = ({ className }) => {
   const rootClassName = cn(s.root, className)
   return (
     <footer className={rootClassName}>

components/core/Layout/Layout.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import { FunctionComponent } from 'react'
+import { FC } from 'react'
 import s from './Layout.module.css'
 import { Navbar, Featurebar } from '@components/core'
 import { Container, Sidebar } from '@components/ui'
@@ -11,7 +11,7 @@ interface Props {
   children?: any
 }
 
-const CoreLayout: FunctionComponent<Props> = ({ className, children }) => {
+const CoreLayout: FC<Props> = ({ className, children }) => {
   const rootClassName = cn(s.root, className)
   const { displaySidebar } = useUI()
 
@@ -34,7 +34,7 @@ const CoreLayout: FunctionComponent<Props> = ({ className, children }) => {
   )
 }
 
-const Layout: FunctionComponent<Props> = (props) => (
+const Layout: FC<Props> = (props) => (
   <UIProvider>
     <CoreLayout {...props} />
   </UIProvider>

components/core/Navbar/Navbar.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import React, { FunctionComponent } from 'react'
+import React, { FC } from 'react'
 import s from './Navbar.module.css'
 import { Logo, Container } from '@components/ui'
 import { Searchbar } from '@components/core'
@@ -8,7 +8,7 @@ interface Props {
   className?: string
 }
 
-const Navbar: FunctionComponent<Props> = ({ className }) => {
+const Navbar: FC<Props> = ({ className }) => {
   const rootClassName = cn(s.root, className)
   return (
     <Container className={rootClassName}>

components/core/Searchbar/Searchbar.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import React, { FunctionComponent } from 'react'
+import React, { FC } from 'react'
 import s from './Searchbar.module.css'
 
 interface Props {
@@ -7,7 +7,7 @@ interface Props {
   children?: any
 }
 
-const Searchbar: FunctionComponent<Props> = ({ className }) => {
+const Searchbar: FC<Props> = ({ className }) => {
   const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>

components/core/UserNav/UserNav.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import React, { FunctionComponent } from 'react'
+import React, { FC } from 'react'
 import s from './UserNav.module.css'
 import { Avatar } from '@components/core'
 import { Heart, Bag } from '@components/icon'
@@ -9,7 +9,7 @@ interface Props {
   className?: string
 }
 
-const UserNav: FunctionComponent<Props> = ({ className }) => {
+const UserNav: FC<Props> = ({ className }) => {
   const rootClassName = cn(s.root, className)
   const { openSidebar } = useUI()
 

components/product/ProductCard/ProductCard.tsx

@@ -1,13 +1,13 @@
 import cn from 'classnames'
 import s from './ProductCard.module.css'
-import React, { FunctionComponent } from 'react'
+import React, { FC } from 'react'
 import { Heart } from '@components/icon'
 interface Props {
   className?: string
   children?: any
 }
 
-const ProductCard: FunctionComponent<Props> = ({ className }) => {
+const ProductCard: FC<Props> = ({ className }) => {
   const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>

components/product/ProductGrid/ProductGrid.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import React, { FunctionComponent } from 'react'
+import React, { FC } from 'react'
 import s from './ProductGrid.module.css'
 import ProductCard from '@components/ProductCard'
 interface Props {
@@ -8,7 +8,7 @@ interface Props {
   products: [any]
 }
 
-const ProductView: FunctionComponent<Props> = ({ products, className }) => {
+const ProductView: FC<Props> = ({ products, className }) => {
   const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>

components/product/ProductView/ProductView.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import React, { FunctionComponent } from 'react'
+import React, { FC } from 'react'
 import s from './ProductView.module.css'
 import { Button } from '@components/ui'
 import { Swatch } from '@components/product'
@@ -10,7 +10,7 @@ interface Props {
   productData: ProductData
 }
 
-const ProductView: FunctionComponent<Props> = ({ productData, className }) => {
+const ProductView: FC<Props> = ({ productData, className }) => {
   const rootClassName = cn(s.root, className)
   console.log(productData)
   return (

components/product/Swatch/Swatch.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import React, { FunctionComponent } from 'react'
+import React, { FC } from 'react'
 import s from './Swatch.module.css'
 import { Colors } from '@components/ui/types'
 
@@ -11,12 +11,7 @@ interface Props {
   size?: string
 }
 
-const Swatch: FunctionComponent<Props> = ({
+const Swatch: FC<Props> = ({ className, size, color, active }) => {
-  className,
-  size,
-  color,
-  active,
-}) => {
   const rootClassName = cn(
     s.root,
     {

components/ui/ClickOutside/ClickOutside.tsx

@@ -1,9 +1,4 @@
-import React, {
+import React, { FC, MutableRefObject, useEffect, useRef } from 'react'
-  FunctionComponent,
-  MutableRefObject,
-  useEffect,
-  useRef,
-} from 'react'
 
 import { Component } from 'react'
 import PropTypes from 'prop-types'

components/ui/Container/Container.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import { FunctionComponent } from 'react'
+import { FC } from 'react'
 import s from './Container.module.css'
 
 interface Props {
@@ -8,11 +8,7 @@ interface Props {
   el?: HTMLElement
 }
 
-const Container: FunctionComponent<Props> = ({
+const Container: FC<Props> = ({ children, className, el = 'div' }) => {
-  children,
-  className,
-  el = 'div',
-}) => {
   const rootClassName = cn(s.root, className)
 
   let Component: React.ComponentType<React.HTMLAttributes<

components/ui/Sidebar/Sidebar.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import React, { FunctionComponent } from 'react'
+import React, { FC } from 'react'
 import s from './Sidebar.module.css'
 
 interface Props {
@@ -7,7 +7,7 @@ interface Props {
   children?: any
 }
 
-const Sidebar: FunctionComponent<Props> = ({ className, children }) => {
+const Sidebar: FC<Props> = ({ className, children }) => {
   const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>

components/ui/_BLANK/Featurebar.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import { FunctionComponent } from 'react'
+import { FC } from 'react'
 import s from './Featurebar.module.css'
 
 interface Props {
@@ -7,7 +7,7 @@ interface Props {
   children?: any
 }
 
-const Featurebar: FunctionComponent<Props> = ({ children, className }) => {
+const Featurebar: FC<Props> = ({ children, className }) => {
   const rootClassName = cn(s.root, className)
   return <div className={rootClassName}>{children}</div>
 }

components/ui/context.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react'
+import React, { FC } from 'react'
 
 export interface UIState {
   displaySidebar: boolean
@@ -15,7 +15,7 @@ const initialState = {
 export const UIContext = React.createContext(initialState)
 UIContext.displayName = 'UIContext'
 
-export const UIProvider: FunctionComponent = (props) => {
+export const UIProvider: FC = (props) => {
   const [state, dispatch] = React.useReducer(uiReducer, initialState)
 
   const openSidebar = () => dispatch('OPEN_SIDEBAR')