update react next (#36)

* update react next

* (BA) lint design-sytem-mui

---------

Co-authored-by: Alexandre Anicio <[email protected]>

Author: ficast

packages/core/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @baseapp-frontend/core
 
+## 2.6.0
+
+### Minor Changes
+
+- Update Next React vesions
+
 ## 2.5.3
 
 ### Patch Changes

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baseapp-frontend/core",
-  "version": "2.5.3",
+  "version": "2.6.0",
   "description": "Core utilities.",
   "main": "./src/index.tsx",
   "scripts": {
@@ -27,9 +27,9 @@
     "yup": "^0.32.11"
   },
   "peerDependencies": {
-    "next": "12.0.7",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "next": "^12.3.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.16.12",
@@ -42,17 +42,17 @@
     "@types/js-cookie": "^3.0.1",
     "@types/node": "^17.0.8",
     "@types/qs": "^6.9.7",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
     "babel-jest": "^27.4.6",
     "jest": "^27.4.7",
-    "next": "^12.2.4",
-    "prettier": "^2.5.1",
+    "next": "12.3.4",
+    "prettier": "^2.8.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "ts-jest": "^27.1.3",
-    "typescript": "^4.5.4"
+    "typescript": "^4.9.5"
   },
   "license": "MIT",
   "repository": {

packages/core/src/auth/provider.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { ReactNode, useState } from 'react'
 
 import { Hydrate, QueryCache, QueryClient, QueryClientProvider } from 'react-query'
 import type { QueryFunction } from 'react-query'
@@ -40,7 +40,7 @@ export const BaseAppProvider = ({
   queryClientOptions,
 }: {
   pageProps?: any
-  children: React.ReactNode
+  children: ReactNode
   queryClientOptions?: any
 }) => {
   const [queryClient] = useState(() => buildQueryClient(queryClientOptions))

packages/core/src/permissions/withPermissions.tsx

@@ -1,7 +1,9 @@
+import { FC } from 'react'
+
+import { IProps, PermissionOptions, UserWithPermissions } from './types'
 import { checkPermissions } from './utils'
-import { UserWithPermissions, PermissionOptions, IProps } from './types'
 
-export const withPermissions = (Component: React.FC<any>, options: PermissionOptions = {}) => {
+export const withPermissions = (Component: FC<any>, options: PermissionOptions = {}) => {
   const { all, any, PermissionDeniedComponent, hide } = options
 
   return (props: IProps) => {

packages/design-system-mui/components/ButtonWithLoading/index.tsx

@@ -10,11 +10,11 @@ function ButtonWithLoading({
   form,
   ...props
 }: IButtonWitthLoadingProps) {
-  const _isLoading = loading || form?.formState.isSubmitting
+  const isLoading = loading || form?.formState.isSubmitting
   return (
-    <Button disabled={_isLoading} {...props}>
+    <Button disabled={isLoading} {...props}>
       {children}
-      {_isLoading && loadingChildren}
+      {isLoading && loadingChildren}
     </Button>
   )
 }

packages/design-system-mui/components/ButtonWithLoading/styled.tsx

@@ -1,11 +1,12 @@
-import { styled } from '@mui/material/styles'
-import { CircularProgress as MuiCircularProgress, CircularProgressProps } from '@mui/material'
 import { FC } from 'react'
 
-export const CircularProgress = styled(MuiCircularProgress)(({ theme }) => ({
+import { CircularProgressProps, CircularProgress as MuiCircularProgress } from '@mui/material'
+import { styled } from '@mui/material/styles'
+
+export const CircularProgress = styled(MuiCircularProgress)({
   position: 'absolute',
   top: '50%',
   left: '50%',
   marginTop: '-10px',
   marginLeft: '-10px',
-})) as unknown as FC<CircularProgressProps>
+}) as unknown as FC<CircularProgressProps>

packages/design-system-mui/components/ButtonWithLoading/types.d.ts

@@ -1,9 +1,10 @@
-import { Button, ButtonProps } from '@mui/material'
+import { PropsWithChildren } from 'react'
+
+import { ButtonProps } from '@mui/material'
 import { UseFormReturn } from 'react-hook-form'
 
-export interface IButtonWitthLoadingProps extends ButtonProps {
-  children?: React.FC<any> | React.Element | string
+export interface IButtonWitthLoadingProps extends ButtonProps, PropsWithChildren {
   loading?: boolean
-  loadingChildren?: React.FC<any> | React.Element
+  loadingChildren?: any
   form?: UseFormReturn
 }

packages/design-system-mui/components/CheckboxField/index.tsx

@@ -1,8 +1,9 @@
+import { withController } from '@baseapp-frontend/core'
+
 import Checkbox from '@mui/material/Checkbox'
-import FormControlLabel from '@mui/material/FormControlLabel'
 import FormControl from '@mui/material/FormControl'
+import FormControlLabel from '@mui/material/FormControlLabel'
 import FormHelperText from '@mui/material/FormHelperText'
-import { withController } from '@baseapp-frontend/core'
 
 import { ICheckboxFieldProps, IControlledCheckBoxProps } from './types'
 
@@ -26,13 +27,13 @@ export default function CheckboxField({
   FormControlProps,
 }: ICheckboxFieldProps) {
   const formError = form?.formState?.errors?.[name]?.message
-  const _showError = (formError && form?.formState?.touchedFields?.[name]) as boolean
+  const innerShowError = (formError && form?.formState?.touchedFields?.[name]) as boolean
 
   return (
     <FormControl
       component="fieldset"
       variant={variant}
-      error={showError || _showError}
+      error={showError || innerShowError}
       {...FormControlProps}
     >
       <FormControlLabel
@@ -42,11 +43,11 @@ export default function CheckboxField({
             checked={checked}
             handleChange={handleChange}
             {...CheckboxProps}
-          ></ControlledCheckBox>
+          />
         }
         label={label}
       />
-      {((showError && errorMessage) || _showError) && (
+      {((showError && errorMessage) || innerShowError) && (
         <FormHelperText>{showError ? (formError as string) : errorMessage}</FormHelperText>
       )}
       {helperText && <FormHelperText>{helperText}</FormHelperText>}

packages/design-system-mui/components/CheckboxField/types.d.ts

@@ -1,4 +1,6 @@
-import { UseFormReturn, ControllerRenderProps } from 'react-hook-form'
+import { ChangeEvent } from 'react'
+
+import { ControllerRenderProps, UseFormReturn } from 'react-hook-form'
 
 export interface ICheckboxFieldProps {
   label?: string
@@ -10,7 +12,7 @@ export interface ICheckboxFieldProps {
   name: string
   showError?: boolean
   checked?: boolean
-  handleChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+  handleChange?: (event: ChangeEvent<HTMLInputElement>) => void
   CheckboxProps?: CheckboxProps
   FormControlProps?: FormControlProps
 }

packages/design-system-mui/components/ImageUploader/index.tsx

@@ -1,8 +1,8 @@
-import { FormControl, FormHelperText } from '@mui/material'
 import UploadFileOutlinedIcon from '@mui/icons-material/UploadFileOutlined'
+import { FormControl, FormHelperText } from '@mui/material'
 
+import { DeleteButton, Image, ImageGroup, ImageLabel, LabelGroup, UploaderButton } from './styled'
 import type { IImageUploadInput, ImageFile } from './types'
-import { ImageGroup, Image, UploaderButton, LabelGroup, ImageLabel, DeleteButton } from './styled'
 
 function ImageUploader({
   images,
@@ -27,12 +27,11 @@ function ImageUploader({
   }
 
   function onChange(e: any): void {
-    //eslint-disable-line @typescript-eslint/no-explicit-any
-    for (let i = 0; i < e.target?.files?.length; i++) {
+    for (let i = 0; i < e.target?.files?.length; i += 1) {
       const file = e.target?.files[i]
       const fileReader = new FileReader()
       fileReader.onload = () => {
-        setImages([{ file: file, imagePreviewUrl: fileReader.result }])
+        setImages([{ file, imagePreviewUrl: fileReader.result }])
       }
       fileReader.readAsDataURL(file)
     }
@@ -42,7 +41,7 @@ function ImageUploader({
     <FormControl error={error} fullWidth>
       <UploaderButton
         component="label"
-        htmlFor={'imageInput' + name}
+        htmlFor={`imageInput${name}`}
         variant="outlined"
         color="primary"
         sx={{ display: images.length ? 'none' : 'auto' }}
@@ -53,7 +52,7 @@ function ImageUploader({
       </UploaderButton>
       <input
         name={name}
-        id={'imageInput' + name}
+        id={`imageInput${name}`}
         type="file"
         accept="image/*"
         onChange={onChange}
@@ -62,7 +61,7 @@ function ImageUploader({
       />
       {error && <FormHelperText>{helperText}</FormHelperText>}
       {images?.map((img: ImageFile, index: number) => (
-        <ImageGroup key={index}>
+        <ImageGroup key={img.file.name}>
           <Image src={img.imagePreviewUrl as string} alt="preview" {...ImageProps} />
           <LabelGroup>
             <ImageLabel variant="caption" {...ImageLabelProps}>