feat: add needed lib

package.json

@@ -18,16 +18,21 @@
     "prod": "pm2 start scripts/pm2.config.cjs --no-daemon"
   },
   "dependencies": {
+    "@chakra-ui/react": "2.8.2",
     "@emotion/react": "11.11.4",
-    "@emotion/styled": "11.11.0",
+    "@emotion/styled": "11.11.5",
+    "framer-motion": "11.0.24",
+    "lodash": "4.17.21",
     "pm2": "5.3.1",
     "react": "0.0.0-experimental-2b036d3f1-20240327",
     "react-devtools-inline": "5.0.2",
     "react-dom": "0.0.0-experimental-2b036d3f1-20240327",
     "react-is": "18.2.0",
+    "react-syntax-highlighter": "15.5.0",
     "serve-handler": "6.1.5"
   },
   "devDependencies": {
+    "@types/lodash": "4.17.0",
     "@types/node": "20.11.30",
     "@types/react": "18.2.73",
     "@types/react-dom": "18.2.22",
@@ -38,6 +43,7 @@
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-react-refresh": "0.4.6",
     "typescript": "5.4.3",
-    "vite": "5.2.6"
+    "vite": "5.2.6",
+    "vite-tsconfig-paths": "4.3.2"
   }
 }

src/components/Layout/index.tsx

@@ -0,0 +1,9 @@
+import { Box } from '@chakra-ui/react';
+
+export const Layout = () => {
+  return (
+    <Box>
+      <p>Header</p>
+    </Box>
+  )
+}

src/devtools.tsx

@@ -78,5 +78,4 @@ iframe.id = 'app';
 const devtoolsContainer = document.getElementById('devtools') as HTMLElement;
 document.body.appendChild(iframe);
 
-// TODO: need to find the way to get file name from vite
 init(iframe, devtoolsContainer, APP_SOURCE);

src/main.tsx

@@ -1,14 +1,13 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import App from './App.tsx'
-import './index.css'
+import { Providers } from '@:providers';
 
 const container = document.createElement('div');
 
 document.body.appendChild(container);
 
 createRoot(container).render(
   <React.StrictMode>
-    <App />
+    <Providers />
   </React.StrictMode>,
 )

src/pages/MainPage/MainPage.tsx

@@ -0,0 +1,9 @@
+export const MainPage = () => {
+  console.log('window location', window.location)
+  console.log('window parent location', window.parent.location)
+  return (
+    <div>
+      <h1>MainPage</h1>
+    </div>
+  );
+}

src/pages/MainPage/index.tsx

@@ -0,0 +1 @@
+export { MainPage } from './MainPage';

src/pages/MoveStateDown/MoveStateDown.tsx

@@ -0,0 +1,7 @@
+export const MoveStateDown = () => {
+  return (
+    <div>
+      <h1>MoveStateDown</h1>
+    </div>
+  );
+}

src/pages/MoveStateDown/index.tsx

@@ -0,0 +1 @@
+export { MoveStateDown } from './MoveStateDown';

src/providers.tsx

@@ -0,0 +1,14 @@
+import React from "react"
+import { ChakraProvider } from '@chakra-ui/react'
+
+import { MainPage } from '@pages:MainPage';
+
+export const Providers = () => {
+  return (
+    <React.Suspense>
+      <ChakraProvider>
+        <MainPage />
+      </ChakraProvider>
+    </React.Suspense>
+  )
+}

tsconfig.json

@@ -18,7 +18,15 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@components:*": ["./src/components/*"],
+      "@hooks:*": ["./src/hooks/*"],
+      "@utils:*": ["./src/utils/*"],
+      "@pages:*": ["./src/pages/*"],
+      "@:*": ["./src/*"]
+    }
   },
   "include": [
     "src"

vite.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import { execSync } from 'node:child_process';
+import tsconfigPaths from 'vite-tsconfig-paths';
 
 const commitHash = execSync('git rev-parse --short HEAD').toString().trim();
 
@@ -10,7 +11,7 @@ process.env.VITE_COMMIT_HASH = commitHash;
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [tsconfigPaths(), react()],
   base: isProduction ? '/react-render/' : './',
   build: {
     minify: false,