add nextUI

web/package.json

@@ -11,8 +11,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@nextui-org/react": "^2.2.9",
+    "@reduxjs/toolkit": "^2.0.1",
+    "framer-motion": "^10.16.16",
+    "lr-components": "^0.2.3",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-redux": "^9.0.4",
+    "react-toastify": "^9.1.3",
+    "styled-components": "^6.1.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.37",
@@ -20,9 +27,12 @@
     "@typescript-eslint/eslint-plugin": "^6.11.0",
     "@typescript-eslint/parser": "^6.11.0",
     "@vitejs/plugin-react": "^4.2.0",
+    "autoprefixer": "^10.4.16",
     "eslint": "^8.54.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.4",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.3.6",
     "typescript": "^5.2.2",
     "vite": "^5.0.0"
   }

web/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

web/src/App.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Provider, useSelector } from 'react-redux';
+import { RootState, store } from './store';
+import { ToastContainer } from 'react-toastify';
+import { Box } from 'lr-components';
+import { NextUIProvider } from '@nextui-org/react';
+
+function App() {
+  const show = useSelector((state: RootState) => state.state.show);
+  return (
+    show && (
+      <NextUIProvider>
+        <Provider store={store}>
+          <Box
+            width={'100%'}
+            height={'100%'}
+            display='flex'
+            justifyContent='center'
+            alignItems='center'
+            className='prose'
+            pointerEvents='none'
+          ></Box>
+
+          <ToastContainer pauseOnFocusLoss={false} hideProgressBar={true} />
+        </Provider>
+      </NextUIProvider>
+    )
+  );
+}
+
+export default App;

web/src/components/App.tsx

@@ -1,66 +0,0 @@
-import React, { useState } from "react";
-import "./App.css";
-import { debugData } from "../utils/debugData";
-import { fetchNui } from "../utils/fetchNui";
-
-// This will set the NUI to visible if we are
-// developing in browser
-debugData([
-  {
-    action: "setVisible",
-    data: true,
-  },
-]);
-
-interface ReturnClientDataCompProps {
-  data: unknown;
-}
-
-const ReturnClientDataComp: React.FC<ReturnClientDataCompProps> = ({
-  data,
-}) => (
-  <>
-    <h5>Returned Data:</h5>
-    <pre>
-      <code>{JSON.stringify(data, null)}</code>
-    </pre>
-  </>
-);
-
-interface ReturnData {
-  x: number;
-  y: number;
-  z: number;
-}
-
-const App: React.FC = () => {
-  const [clientData, setClientData] = useState<ReturnData | null>(null);
-
-  const handleGetClientData = () => {
-    fetchNui<ReturnData>("getClientData")
-      .then((retData) => {
-        console.log("Got return data from client scripts:");
-        console.dir(retData);
-        setClientData(retData);
-      })
-      .catch((e) => {
-        console.error("Setting mock data due to error", e);
-        setClientData({ x: 500, y: 300, z: 200 });
-      });
-  };
-
-  return (
-    <div className="nui-wrapper">
-      <div className="popup-thing">
-        <div>
-          <h1>This is the NUI Popup!</h1>
-          <p>Exit with the escape key</p>
-          <button onClick={handleGetClientData}>Get Client Data</button>
-          {clientData && <ReturnClientDataComp data={clientData} />}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default App;

web/src/index.css

@@ -1,3 +1,14 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+:root {
+  color-scheme: light !important;
+}
+
+html {
+  background-color: transparent !important;
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -6,13 +17,21 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+  background-color: transparent  !important;
 }
 
 #root {
-  height: 100%
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: transparent  !important;
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
-}
+}

web/src/main.tsx

@@ -1,13 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { VisibilityProvider } from './providers/VisibilityProvider';
-import App from './components/App';
+import App from './App';
 import './index.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <VisibilityProvider>
-      <App />
-    </VisibilityProvider>
-  </React.StrictMode>,
+    <App />
+  </React.StrictMode>
 );

web/src/store/index.ts

@@ -0,0 +1,10 @@
+import { configureStore } from '@reduxjs/toolkit';
+
+export const store = configureStore({
+  reducer: {},
+});
+
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<typeof store.getState>;
+// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
+export type AppDispatch = typeof store.dispatch;

web/src/types/index.ts

@@ -0,0 +1 @@
+export * from './redux.type';

web/src/types/redux.type.ts

@@ -0,0 +1,19 @@
+import { Dispatch } from '@reduxjs/toolkit';
+import { RootState } from '../store';
+
+export type AsyncThunkConfig = {
+  state: RootState;
+  dispatch: Dispatch;
+  /** type of the `extra` argument for the thunk middleware, which will be passed in as `thunkApi.extra` */
+  extra?: unknown;
+  /** type to be passed into `rejectWithValue`'s first argument that will end up on `rejectedAction.payload` */
+  rejectValue?: unknown;
+  /** return type of the `serializeError` option callback */
+  serializedErrorType?: unknown;
+  /** type to be returned from the `getPendingMeta` option callback & merged into `pendingAction.meta` */
+  pendingMeta?: unknown;
+  /** type to be passed into the second argument of `fulfillWithValue` to finally be merged into `fulfilledAction.meta` */
+  fulfilledMeta?: unknown;
+  /** type to be passed into the second argument of `rejectWithValue` to finally be merged into `rejectedAction.meta` */
+  rejectedMeta?: unknown;
+};

web/tailwind.config.js

@@ -0,0 +1,15 @@
+/** @type {import('tailwindcss').Config} */
+// eslint-disable-next-line @typescript-eslint/no-var-requires, no-undef
+const { nextui } = require('@nextui-org/react');
+export default {
+  content: [
+    './index.html',
+    './src/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  darkMode: 'class',
+  plugins: [nextui()],
+};