Upgrade dependencies & pnpm (#785)

* Updated log

* Updates to root

* Updates to pnpm

* successfully moved to pnpm

* type issue

* Local as the default provider

* Upgrade dependencies

* Revert to local

* Upgrade React

* Update node-fetch deps

* Fix types

* Ignore warnings

* Fix missing dependency

* Update pnpm-lock.yaml

* Add missing @types/cookie

* Upgrade dependencies

* Fix missing dependencies

* Update README.md

Co-authored-by: Bel Curcio <curciobel@gmail.com>

site/components/auth/SignUpView.tsx

@@ -41,7 +41,12 @@ const SignUpView: FC<Props> = () => {
       setLoading(false)
       closeModal()
     } catch ({ errors }) {
-      setMessage(errors[0].message)
+      if (errors instanceof Array) {
+        setMessage(errors[0].message)
+      } else {
+        setMessage('Unexpected error')
+        console.log(errors)
+      }
       setLoading(false)
     }
   }

site/components/checkout/context.tsx

@@ -5,6 +5,7 @@ import React, {
   useReducer,
   useContext,
   createContext,
+  ReactNode,
 } from 'react'
 import type { CardFields } from '@commerce/types/customer/card'
 import type { AddressFields } from '@commerce/types/customer/address'
@@ -65,7 +66,7 @@ const checkoutReducer = (state: State, action: Action): State => {
   }
 }
 
-export const CheckoutProvider: FC = (props) => {
+export const CheckoutProvider: FC<{ children?: ReactNode }> = (props) => {
   const [state, dispatch] = useReducer(checkoutReducer, initialState)
 
   const setCardFields = useCallback(
@@ -86,7 +87,10 @@ export const CheckoutProvider: FC = (props) => {
 
   const cardFields = useMemo(() => state.cardFields, [state.cardFields])
 
-  const addressFields = useMemo(() => state.addressFields, [state.addressFields])
+  const addressFields = useMemo(
+    () => state.addressFields,
+    [state.addressFields]
+  )
 
   const value = useMemo(
     () => ({
@@ -96,7 +100,13 @@ export const CheckoutProvider: FC = (props) => {
       setAddressFields,
       clearCheckoutFields,
     }),
-    [cardFields, addressFields, setCardFields, setAddressFields, clearCheckoutFields]
+    [
+      cardFields,
+      addressFields,
+      setCardFields,
+      setAddressFields,
+      clearCheckoutFields,
+    ]
   )
 
   return <CheckoutContext.Provider value={value} {...props} />

site/components/common/I18nWidget/I18nWidget.tsx

@@ -5,6 +5,7 @@ import { useRouter } from 'next/router'
 import s from './I18nWidget.module.css'
 import { Cross, ChevronUp } from '@components/icons'
 import ClickOutside from '@lib/click-outside'
+import Image from 'next/image'
 interface LOCALE_DATA {
   name: string
   img: {
@@ -50,12 +51,13 @@ const I18nWidget: FC = () => {
           onClick={() => setDisplay(!display)}
         >
           <button className={s.button} aria-label="Language selector">
-            <img
+            <Image
               width="20"
               height="20"
               className="block mr-2 w-5"
               src={`/${LOCALES_MAP[currentLocale].img.filename}`}
               alt={LOCALES_MAP[currentLocale].img.alt}
+              unoptimized
             />
             {options && (
               <span className="cursor-pointer">

site/components/common/Layout/Layout.tsx

@@ -53,6 +53,7 @@ interface Props {
     pages?: Page[]
     categories: Category[]
   }
+  children?: React.ReactNode
 }
 
 const ModalView: React.FC<{ modalView: string; closeModal(): any }> = ({

site/components/common/Navbar/NavbarRoot.tsx

@@ -1,9 +1,9 @@
-import { FC, useState, useEffect } from 'react'
+import { FC, useState, useEffect, ReactNode } from 'react'
 import throttle from 'lodash.throttle'
 import cn from 'clsx'
 import s from './Navbar.module.css'
 
-const NavbarRoot: FC = ({ children }) => {
+const NavbarRoot: FC<{ children?: ReactNode }> = ({ children }) => {
   const [hasScrolled, setHasScrolled] = useState(false)
 
   useEffect(() => {

site/components/common/SidebarLayout/SidebarLayout.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from 'react'
+import React, { FC, ReactNode } from 'react'
 import { Cross, ChevronLeft } from '@components/icons'
 import { UserNav } from '@components/common'
 import cn from 'clsx'
 import s from './SidebarLayout.module.css'
 
-type ComponentProps = { className?: string } & (
+type ComponentProps = { className?: string; children?: ReactNode } & (
   | { handleClose: () => any; handleBack?: never }
   | { handleBack: () => any; handleClose?: never }
 )

site/components/product/ProductSlider/ProductSlider.tsx

@@ -12,7 +12,7 @@ import s from './ProductSlider.module.css'
 import ProductSliderControl from '../ProductSliderControl'
 
 interface ProductSliderProps {
-  children: React.ReactNode[]
+  children?: React.ReactNode[]
   className?: string
 }
 

site/components/ui/Button/Button.tsx

@@ -5,7 +5,7 @@ import React, {
   JSXElementConstructor,
   useRef,
 } from 'react'
-import mergeRefs from 'react-merge-refs'
+import { mergeRefs } from 'react-merge-refs'
 import s from './Button.module.css'
 import { LoadingDots } from '@components/ui'
 

site/components/ui/Collapse/Collapse.tsx

@@ -7,7 +7,7 @@ import useMeasure from 'react-use-measure'
 
 export interface CollapseProps {
   title: string
-  children: ReactNode
+  children?: ReactNode
 }
 
 const Collapse: FC<CollapseProps> = ({ title, children }) => {

site/components/ui/Grid/Grid.tsx

@@ -4,7 +4,7 @@ import s from './Grid.module.css'
 
 interface GridProps {
   className?: string
-  children?: ReactNode[] | Component[] | any[]
+  children?: ReactNode
   layout?: 'A' | 'B' | 'C' | 'D' | 'normal'
   variant?: 'default' | 'filled'
 }

site/components/ui/Link/Link.tsx

@@ -1,6 +1,10 @@
 import NextLink, { LinkProps as NextLinkProps } from 'next/link'
 
-const Link: React.FC<NextLinkProps> = ({ href, children, ...props }) => {
+const Link: React.FC<
+  NextLinkProps & {
+    children?: React.ReactNode
+  }
+> = ({ href, children, ...props }) => {
   return (
     <NextLink href={href}>
       <a {...props}>{children}</a>

site/components/ui/Modal/Modal.tsx

@@ -1,4 +1,4 @@
-import { FC, useRef, useEffect, useCallback } from 'react'
+import { FC, useRef, useEffect, useCallback, ReactNode } from 'react'
 import s from './Modal.module.css'
 import FocusTrap from '@lib/focus-trap'
 import { Cross } from '@components/icons'
@@ -6,9 +6,8 @@ import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock'
 
 interface ModalProps {
   className?: string
-  children?: any
+  children?: ReactNode
   onClose: () => void
-  onEnter?: () => void | null
 }
 
 const Modal: FC<ModalProps> = ({ children, onClose }) => {

site/components/ui/Skeleton/Skeleton.tsx

@@ -11,6 +11,7 @@ interface SkeletonProps {
   width?: string | number
   height?: string | number
   boxHeight?: string | number
+  children?: React.ReactNode
 }
 
 const Skeleton: React.FC<SkeletonProps> = ({

site/components/ui/context.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useMemo } from 'react'
+import React, { FC, ReactNode, useCallback, useMemo } from 'react'
 import { ThemeProvider } from 'next-themes'
 
 export interface State {
@@ -124,7 +124,7 @@ function uiReducer(state: State, action: Action) {
   }
 }
 
-export const UIProvider: FC = (props) => {
+export const UIProvider: FC<{ children?: ReactNode }> = (props) => {
   const [state, dispatch] = React.useReducer(uiReducer, initialState)
 
   const openSidebar = useCallback(
@@ -195,6 +195,7 @@ export const UIProvider: FC = (props) => {
       setSidebarView,
       setUserAvatar,
     }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [state]
   )
 
@@ -209,7 +210,9 @@ export const useUI = () => {
   return context
 }
 
-export const ManagedUIContext: FC = ({ children }) => (
+export const ManagedUIContext: FC<{ children?: ReactNode }> = ({
+  children,
+}) => (
   <UIProvider>
     <ThemeProvider>{children}</ThemeProvider>
   </UIProvider>