Chakra UI Updated from v1.0.0 to v2.10.7 to support after react18^ in examples

Author: sriram-palanisamy-hat

examples/query/react/authentication-with-extrareducers/package.json

@@ -6,7 +6,7 @@
   "keywords": [],
   "main": "./src/index.tsx",
   "dependencies": {
-    "@chakra-ui/react": "1.0.0",
+    "@chakra-ui/react": "2.10.7",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "@reduxjs/toolkit": "^1.6.0-rc.1",

examples/query/react/authentication-with-extrareducers/src/features/auth/Login.tsx

@@ -1,21 +1,21 @@
-import * as React from 'react'
 import {
+  Box,
+  Button,
+  Center,
+  Divider,
   Input,
   InputGroup,
   InputRightElement,
-  VStack,
-  Button,
-  Divider,
-  Center,
-  Box,
   useToast,
+  VStack,
 } from '@chakra-ui/react'
-import { useNavigate } from 'react-router-dom'
+import * as React from 'react'
 import { useDispatch } from 'react-redux'
+import { useNavigate } from 'react-router-dom'
 
-import { ProtectedComponent } from './ProtectedComponent'
-import { useLoginMutation } from '../../app/services/auth'
 import type { LoginRequest } from '../../app/services/auth'
+import { useLoginMutation } from '../../app/services/auth'
+import { ProtectedComponent } from './ProtectedComponent'
 
 function PasswordInput({
   name,
@@ -79,7 +79,7 @@ export const Login = () => {
           <PasswordInput onChange={handleChange} name="password" />
         </InputGroup>
         <Button
-          isFullWidth
+          width="100%"
           onClick={async () => {
             try {
               await login(formState).unwrap()

examples/query/react/authentication/package.json

@@ -6,7 +6,7 @@
   "keywords": [],
   "main": "./src/index.tsx",
   "dependencies": {
-    "@chakra-ui/react": "1.0.0",
+    "@chakra-ui/react": "2.10.7",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "@reduxjs/toolkit": "^1.6.0-rc.1",

examples/query/react/authentication/src/features/auth/Login.tsx

@@ -1,22 +1,22 @@
-import * as React from 'react'
 import {
+  Box,
+  Button,
+  Center,
+  Divider,
   Input,
   InputGroup,
   InputRightElement,
-  VStack,
-  Button,
-  Divider,
-  Center,
-  Box,
   useToast,
+  VStack,
 } from '@chakra-ui/react'
-import { useNavigate } from 'react-router-dom'
+import * as React from 'react'
 import { useDispatch } from 'react-redux'
+import { useNavigate } from 'react-router-dom'
 import { setCredentials } from './authSlice'
 
-import { ProtectedComponent } from './ProtectedComponent'
-import { useLoginMutation } from '../../app/services/auth'
 import type { LoginRequest } from '../../app/services/auth'
+import { useLoginMutation } from '../../app/services/auth'
+import { ProtectedComponent } from './ProtectedComponent'
 
 function PasswordInput({
   name,
@@ -80,7 +80,7 @@ export const Login = () => {
           <PasswordInput onChange={handleChange} name="password" />
         </InputGroup>
         <Button
-          isFullWidth
+          width={'100%'}
           onClick={async () => {
             try {
               const user = await login(formState).unwrap()

examples/query/react/graphql-codegen/package.json

@@ -5,7 +5,7 @@
   "keywords": [],
   "main": "./src/index.tsx",
   "dependencies": {
-    "@chakra-ui/react": "1.0.0",
+    "@chakra-ui/react": "2.10.7",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "@mswjs/data": "^0.4.0",

examples/query/react/graphql/package.json

@@ -6,7 +6,7 @@
   "keywords": [],
   "main": "./src/index.tsx",
   "dependencies": {
-    "@chakra-ui/react": "1.0.0",
+    "@chakra-ui/react": "2.10.7",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "@mswjs/data": "^0.3.0",

examples/query/react/mutations/package.json

@@ -6,7 +6,7 @@
   "keywords": [],
   "main": "./src/index.tsx",
   "dependencies": {
-    "@chakra-ui/react": "1.0.0",
+    "@chakra-ui/react": "2.10.7",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "@mswjs/data": "^0.3.0",

examples/query/react/optimistic-update/package.json

@@ -6,7 +6,7 @@
   "keywords": [],
   "main": "./src/index.tsx",
   "dependencies": {
-    "@chakra-ui/react": "1.0.0",
+    "@chakra-ui/react": "2.10.7",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "@mswjs/data": "^0.3.0",

examples/query/react/pagination/package.json

@@ -6,7 +6,7 @@
   "keywords": [],
   "main": "./src/index.tsx",
   "dependencies": {
-    "@chakra-ui/react": "1.0.0",
+    "@chakra-ui/react": "2.10.7",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "@mswjs/data": "^0.3.0",

examples/query/react/prefetching-automatic-waterfall/package.json

@@ -6,7 +6,7 @@
   "keywords": [],
   "main": "./src/index.tsx",
   "dependencies": {
-    "@chakra-ui/react": "1.0.0",
+    "@chakra-ui/react": "2.10.7",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "@mswjs/data": "^0.3.0",