Merge pull request #105 from matthieuauger/useId-fix-react-types

Use React 18 types and useId hook for identifiers
walnuthq · Mar 21, 2024 · bc5132b · bc5132b
2 parents 3c09008 + 47c74b6
commit bc5132b
Show file tree

Hide file tree

Showing 11 changed files with 37 additions and 28 deletions.
diff --git a/components/Editor/Header.tsx b/components/Editor/Header.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { useMemo, useId } from 'react'
 
 import Select, { OnChangeValue } from 'react-select'
 
@@ -37,7 +37,7 @@ const EditorHeader = ({ codeType, onCodeTypeChange }: Props) => {
           isSearchable={false}
           classNamePrefix="select"
           menuPlacement="auto"
-          instanceId="headerSelect"
+          instanceId={useId()}
         />
       </div>
     </div>

diff --git a/components/layouts/Home.tsx b/components/layouts/Home.tsx
@@ -1,3 +1,5 @@
+import { PropsWithChildren } from 'react'
+
 import { GoogleAnalytics } from '@next/third-parties/google'
 import type { NextPage } from 'next'
 import Head from 'next/head'
@@ -7,7 +9,7 @@ import { getAbsoluteURL } from 'util/browser'
 import Footer from './Footer'
 import Nav from './Nav'
 
-const HomeLayout: NextPage = ({ children }) => {
+const HomeLayout: NextPage<PropsWithChildren> = ({ children }) => {
   return (
     <>
       <Head>

diff --git a/components/ui/Input.tsx b/components/ui/Input.tsx
@@ -4,12 +4,11 @@ import cn from 'classnames'
 
 type Props = {
   searchable?: boolean
-  ref?: ForwardedRef<HTMLInputElement>
   rightIcon?: JSX.Element
   className?: string
   inputClassName?: string
   readOnly?: boolean
-} & React.ComponentPropsWithoutRef<'input'>
+} & React.ComponentProps<'input'>
 
 export const Input: React.FC<Props> = forwardRef(
   (

diff --git a/context/appUiContext.tsx b/context/appUiContext.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useState } from 'react'
+import React, { PropsWithChildren, createContext, useState } from 'react'
 
 export enum LogType {
   Error,
@@ -31,7 +31,7 @@ export const AppUiContext = createContext<AppUiContextProps>({
   addToConsoleLog: () => undefined,
 })
 
-export const AppUiProvider: React.FC = ({ children }) => {
+export const AppUiProvider: React.FC<PropsWithChildren> = ({ children }) => {
   const [isFullScreen, setIsFullScreen] = useState(false)
   const [consoleLog, setConsoleLog] = useState<IConsoleOutput[]>([
     {

diff --git a/context/cairoVMApiContext.tsx b/context/cairoVMApiContext.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useState } from 'react'
+import React, { PropsWithChildren, createContext, useState } from 'react'
 
 import { IInstruction, ILogEntry } from 'types'
 
@@ -74,7 +74,9 @@ export const CairoVMApiContext = createContext<ContextProps>({
   removeBreakPoint: noOp,
 })
 
-export const CairoVMApiProvider: React.FC = ({ children }) => {
+export const CairoVMApiProvider: React.FC<PropsWithChildren> = ({
+  children,
+}) => {
   const [sierraCode, setSierraCode] = useState<string>('')
   const [casmCode, setCasmCode] = useState<string>('')
   const [casmInstructions, setCasmInstructions] = useState<IInstruction[]>([])

diff --git a/context/settingsContext.tsx b/context/settingsContext.tsx
@@ -1,4 +1,9 @@
-import React, { createContext, useEffect, useState } from 'react'
+import React, {
+  PropsWithChildren,
+  createContext,
+  useEffect,
+  useState,
+} from 'react'
 
 const LOCAL_SETTINGS_KEY = 'cairovmcodes_settings'
 
@@ -23,7 +28,7 @@ export const SettingsContext = createContext<ContextProps>({
   setSetting: () => null,
 })
 
-export const SettingsProvider: React.FC<{}> = ({ children }) => {
+export const SettingsProvider: React.FC<PropsWithChildren> = ({ children }) => {
   const [settings, setSettings] = useState<any>({})
   const [settingsLoaded, setSettingsLoaded] = useState(false)
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,7 +36,7 @@
     "lodash.debounce": "^4.0.8",
     "next": "13",
     "next-mdx-remote": "^4.4.1",
-    "next-themes": "^0.0.15",
+    "next-themes": "^0.1.1",
     "process": "^0.11.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -57,7 +57,7 @@
     "@types/js-cookie": "^3.0.1",
     "@types/lodash.debounce": "^4.0.6",
     "@types/mdx-js__react": "^1.5.5",
-    "@types/react": "17.0.30",
+    "@types/react": "^18.2.67",
     "@types/react-table": "^7.7.6",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",

diff --git a/pages/about.tsx b/pages/about.tsx
@@ -1,6 +1,5 @@
-import React from 'react'
+import React, { ReactNode } from 'react'
 
-import type { NextPage } from 'next'
 import Head from 'next/head'
 
 import HomeLayout from 'components/layouts/Home'
@@ -513,7 +512,7 @@ const AboutPage = () => {
   )
 }
 
-AboutPage.getLayout = function getLayout(page: NextPage) {
+AboutPage.getLayout = function getLayout(page: ReactNode) {
   return <HomeLayout>{page}</HomeLayout>
 }
 

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,6 +1,5 @@
-import { useContext } from 'react'
+import { ReactNode, useContext } from 'react'
 
-import type { NextPage } from 'next'
 import Head from 'next/head'
 
 import { AppUiContext } from 'context/appUiContext'
@@ -37,7 +36,7 @@ const HomePage = () => {
   )
 }
 
-HomePage.getLayout = function getLayout(page: NextPage) {
+HomePage.getLayout = function getLayout(page: ReactNode) {
   return <HomeLayout>{page}</HomeLayout>
 }
 

diff --git a/pages/playground.tsx b/pages/playground.tsx
@@ -1,4 +1,5 @@
-import type { NextPage } from 'next'
+import { ReactNode } from 'react'
+
 import Head from 'next/head'
 
 import Editor from 'components/Editor'
@@ -25,7 +26,7 @@ const PlaygroundPage = () => {
   )
 }
 
-PlaygroundPage.getLayout = function getLayout(page: NextPage) {
+PlaygroundPage.getLayout = function getLayout(page: ReactNode) {
   return <HomeLayout>{page}</HomeLayout>
 }