replace bulma with chakra ui

package.json

@@ -3,12 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@chakra-ui/react": "^1.4.1",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "date-fns": "^2.19.0",
+    "framer-motion": "^4",
     "react": "^17.0.1",
-    "react-bulma-components": "^3.4.0",
     "react-dom": "^17.0.1",
     "react-router": "^5.2.0",
     "react-scripts": "4.0.3",

src/App.js

@@ -1,10 +1,12 @@
 import './App.css';
-import DefaultViewer from './features/viewers/DefaultViewer';
+import Editor from './features/editors/Editor';
+import DefaultPresenter from './features/viewers/DefaultPresenter';
 
 function App() {
   return (
     <div className='App'>
-      <DefaultViewer />
+      {/* <Editor /> */}
+      <DefaultPresenter />
     </div>
   );
 }

src/features/viewers/viewers.css

@@ -6,7 +6,7 @@
   color: #ffffff;
   display: flex;
   flex-direction: column;
-  border: red 1px solid;
+  padding: 1em;
 }
 
 .presentationTitle {

src/index.js

@@ -4,9 +4,15 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
+// 1. import `ChakraProvider` component
+import { ChakraProvider } from "@chakra-ui/react"
+
+
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <ChakraProvider>
+      <App />
+    </ChakraProvider>
   </React.StrictMode>,
   document.getElementById('root')
 );