From 208551fca4d22a49ce3d0186bbdef7dc0150b319 Mon Sep 17 00:00:00 2001
From: Abdullah Mzaien <43112535+Mzaien@users.noreply.github.com>
Date: Mon, 16 Nov 2020 18:15:48 +0300
Subject: [PATCH] Upgraded to chakra V1 (#19181)

Upgraded charkra ui and peer dep and fixed the icon to follow the new api
---
 examples/with-chakra-ui/package.json             | 16 ++++++++--------
 examples/with-chakra-ui/src/components/CTA.js    |  2 +-
 .../with-chakra-ui/src/components/Container.js   |  2 +-
 .../src/components/DarkModeSwitch.js             |  2 +-
 examples/with-chakra-ui/src/components/Footer.js |  2 +-
 examples/with-chakra-ui/src/components/Hero.js   |  2 +-
 examples/with-chakra-ui/src/components/Main.js   |  2 +-
 examples/with-chakra-ui/src/pages/_app.js        |  2 +-
 examples/with-chakra-ui/src/pages/index.js       |  8 ++++----
 examples/with-chakra-ui/src/theme.js             |  2 +-
 10 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/examples/with-chakra-ui/package.json b/examples/with-chakra-ui/package.json
index 61c718c628..4d316065c7 100644
--- a/examples/with-chakra-ui/package.json
+++ b/examples/with-chakra-ui/package.json
@@ -1,21 +1,21 @@
 {
   "name": "with-chakra-ui",
   "version": "0.1.0",
-  "private": true,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start"
   },
   "dependencies": {
-    "@chakra-ui/core": "^1.0.0-rc.8",
-    "@chakra-ui/icons": "^1.0.0-rc.8",
+    "@chakra-ui/icons": "^1.0.0",
+    "@chakra-ui/react": "^1.0.0",
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
+    "emotion-theming": "^11.0.0",
     "framer-motion": "^2.9.4",
-    "@emotion/styled": "^10.0.27",
-    "emotion-theming": "^10.0.27",
-    "next": "^9.1.7",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0"
+    "next": "latest",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   },
   "license": "MIT"
 }
diff --git a/examples/with-chakra-ui/src/components/CTA.js b/examples/with-chakra-ui/src/components/CTA.js
index 1652541078..15b2bf8990 100644
--- a/examples/with-chakra-ui/src/components/CTA.js
+++ b/examples/with-chakra-ui/src/components/CTA.js
@@ -1,4 +1,4 @@
-import { Link as ChakraLink, Button } from '@chakra-ui/core'
+import { Link as ChakraLink, Button } from '@chakra-ui/react'
 
 import { Container } from './Container'
 
diff --git a/examples/with-chakra-ui/src/components/Container.js b/examples/with-chakra-ui/src/components/Container.js
index 5162e87271..57b73e4419 100644
--- a/examples/with-chakra-ui/src/components/Container.js
+++ b/examples/with-chakra-ui/src/components/Container.js
@@ -1,4 +1,4 @@
-import { Flex, useColorMode } from '@chakra-ui/core'
+import { Flex, useColorMode } from '@chakra-ui/react'
 
 export const Container = (props) => {
   const { colorMode } = useColorMode()
diff --git a/examples/with-chakra-ui/src/components/DarkModeSwitch.js b/examples/with-chakra-ui/src/components/DarkModeSwitch.js
index f19e44a6c7..7edd444801 100644
--- a/examples/with-chakra-ui/src/components/DarkModeSwitch.js
+++ b/examples/with-chakra-ui/src/components/DarkModeSwitch.js
@@ -1,4 +1,4 @@
-import { useColorMode, Switch } from '@chakra-ui/core'
+import { useColorMode, Switch } from '@chakra-ui/react'
 
 export const DarkModeSwitch = () => {
   const { colorMode, toggleColorMode } = useColorMode()
diff --git a/examples/with-chakra-ui/src/components/Footer.js b/examples/with-chakra-ui/src/components/Footer.js
index 84810a52be..3b25462653 100644
--- a/examples/with-chakra-ui/src/components/Footer.js
+++ b/examples/with-chakra-ui/src/components/Footer.js
@@ -1,3 +1,3 @@
-import { Flex } from '@chakra-ui/core'
+import { Flex } from '@chakra-ui/react'
 
 export const Footer = (props) => <Flex as="footer" py="8rem" {...props} />
diff --git a/examples/with-chakra-ui/src/components/Hero.js b/examples/with-chakra-ui/src/components/Hero.js
index cb839034a8..c20fb39b33 100644
--- a/examples/with-chakra-ui/src/components/Hero.js
+++ b/examples/with-chakra-ui/src/components/Hero.js
@@ -1,4 +1,4 @@
-import { Flex, Heading } from '@chakra-ui/core'
+import { Flex, Heading } from '@chakra-ui/react'
 
 export const Hero = ({ title }) => (
   <Flex justifyContent="center" alignItems="center" height="100vh">
diff --git a/examples/with-chakra-ui/src/components/Main.js b/examples/with-chakra-ui/src/components/Main.js
index ad88b27666..a89329e53d 100644
--- a/examples/with-chakra-ui/src/components/Main.js
+++ b/examples/with-chakra-ui/src/components/Main.js
@@ -1,4 +1,4 @@
-import { Stack } from '@chakra-ui/core'
+import { Stack } from '@chakra-ui/react'
 
 export const Main = (props) => (
   <Stack
diff --git a/examples/with-chakra-ui/src/pages/_app.js b/examples/with-chakra-ui/src/pages/_app.js
index 3d12311233..5d59ead733 100644
--- a/examples/with-chakra-ui/src/pages/_app.js
+++ b/examples/with-chakra-ui/src/pages/_app.js
@@ -1,4 +1,4 @@
-import { ThemeProvider, CSSReset, ColorModeProvider } from '@chakra-ui/core'
+import { ThemeProvider, CSSReset, ColorModeProvider } from '@chakra-ui/react'
 
 import theme from '../theme'
 
diff --git a/examples/with-chakra-ui/src/pages/index.js b/examples/with-chakra-ui/src/pages/index.js
index b8f6e18efc..37fffc2d48 100644
--- a/examples/with-chakra-ui/src/pages/index.js
+++ b/examples/with-chakra-ui/src/pages/index.js
@@ -6,8 +6,8 @@ import {
   List,
   ListIcon,
   ListItem,
-} from '@chakra-ui/core'
-
+} from '@chakra-ui/react'
+import { ExternalLinkIcon } from '@chakra-ui/icons'
 import { Hero } from '../components/Hero'
 import { Container } from '../components/Container'
 import { Main } from '../components/Main'
@@ -32,13 +32,13 @@ const Index = () => (
             flexGrow={1}
             mr={2}
           >
-            Chakra UI <Icon name="external-link" mx="2px" />
+            Chakra UI <Icon as={ExternalLinkIcon} mx="2px" />
           </ChakraLink>
         </ListItem>
         <ListItem>
           <ListIcon icon="check-circle" color="green.500" />
           <ChakraLink isExternal href="https://nextjs.org" flexGrow={1} mr={2}>
-            Next.js <Icon name="external-link" mx="2px" />
+            Next.js <Icon as={ExternalLinkIcon} mx="2px" />
           </ChakraLink>
         </ListItem>
       </List>
diff --git a/examples/with-chakra-ui/src/theme.js b/examples/with-chakra-ui/src/theme.js
index 55da727203..a5ce7e8211 100644
--- a/examples/with-chakra-ui/src/theme.js
+++ b/examples/with-chakra-ui/src/theme.js
@@ -1,4 +1,4 @@
-import { theme as chakraTheme } from '@chakra-ui/core'
+import { theme as chakraTheme } from '@chakra-ui/react'
 
 const fonts = { ...chakraTheme.fonts, mono: `'Menlo', monospace` }
 
-- 
GitLab