Big project update

Fix front app (config, lint)

apps/front/.eslintrc.cjs

@@ -0,0 +1,11 @@
+const config = require("@friday-ai/tools/eslint/react-internal");
+
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  ...config,
+  root: true,
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: "./tsconfig.json",
+  },
+};

apps/front/package.json

@@ -6,24 +6,22 @@
   "type": "module",
   "scripts": {
     "start": "per-env",
-    "start:prod": "cross-env NODE_ENV=production http-server dist -p 1444 -g",
-    "start:dev": "cross-env CHOKIDAR_USEPOLLING=true NODE_ENV=development vite --host --force",
-    "start:demo": "cross-env NODE_ENV=production tsc && vite build --mode staging && http-server dist",
+    "start:prod": "http-server dist -p 1444 -g",
+    "start:dev": "cross-env CHOKIDAR_USEPOLLING=true NODE_ENV=development VITE_SERVER_PORT=3000 vite --host --force",
     "build": "cross-env NODE_ENV=production tsc && vite build --mode production",
-    "preview": "pnpm build && vite preview --host",
-    "preview:https": "cross-env HTTPS=true pnpm run preview",
+    "build:front": "cross-env NODE_ENV=production tsc && vite build --mode production",
     "format": "prettier --write src/**/*.{js,jsx,ts,tsx}",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx ./src",
     "lint:fix": "eslint --ext .js,.jsx,.ts,.tsx --fix ./src"
   },
-  "prettier": "../../packages/tools/prettier.config.js",
+  "prettier": "@friday-ai/tools/configs/prettier.config.js",
   "dependencies": {
     "@ebay/nice-modal-react": "^1.2.13",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@friday-ai/shared": "workspace:*",
     "@mui/icons-material": "^5.15.3",
     "@mui/material": "^5.15.3",
+    "@friday-ai/shared": "workspace:*",
     "@tanstack/react-query": "^5.17.8",
     "@visx/event": "^3.3.0",
     "@visx/group": "^3.3.0",
@@ -64,7 +62,8 @@
     "prettier": "^3.1.1",
     "rollup-plugin-visualizer": "^5.12.0",
     "typescript": "^5.3.3",
-    "vite": "^5.0.11",
+    "vite": "^5.0.12",
+    "vite-plugin-node-polyfills": "^0.21.0",
     "vite-plugin-pwa": "^0.17.4",
     "vite-plugin-svgr": "^4.2.0",
     "workbox-window": "^7.0.0"

apps/front/src/components/App/AnimationContainer.tsx

@@ -1,5 +1,4 @@
 import { AnimatePresence, m, MotionStyle } from 'framer-motion';
-import React from 'react';
 
 interface AnimationContainerProps {
   children: React.ReactNode;

apps/front/src/components/App/AnimationLayout.tsx

@@ -1,5 +1,4 @@
 import { m } from 'framer-motion';
-import React from 'react';
 import { useLocation } from 'react-router-dom';
 
 const pageVariants = {

apps/front/src/components/App/DashboardLayout.tsx

@@ -1,6 +1,5 @@
 import Container from '@mui/material/Container';
 import Paper from '@mui/material/Paper';
-import React from 'react';
 import { Outlet } from 'react-router-dom';
 
 import AppBar from '../AppBar/AppBar';

apps/front/src/components/AppBar/AccountMenu.tsx

@@ -7,7 +7,6 @@ import Divider from '@mui/material/Divider';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import MenuItem from '@mui/material/MenuItem';
 
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 

apps/front/src/components/AppBar/AppBar.tsx

@@ -13,8 +13,6 @@ import Typography from '@mui/material/Typography';
 
 import { useTheme } from '@mui/material/styles';
 
-import React from 'react';
-
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 

apps/front/src/components/Charts/Pie.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import { localPoint } from '@visx/event';
 import { Group } from '@visx/group';

apps/front/src/components/Countdown/Countdown.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 
 interface CountdownProps {
   start: boolean;

apps/front/src/components/Loader/Loader.tsx

@@ -1,6 +1,5 @@
 import { useTheme } from '@mui/material/styles';
 import { m, Transition } from 'framer-motion';
-import React from 'react';
 
 const transition: Transition = {
   duration: 4,

apps/front/src/components/Loader/LoaderLayout.tsx

@@ -1,5 +1,4 @@
 import Box from '@mui/material/Box';
-import React from 'react';
 
 import FaviconLoader from './Loader';
 

apps/front/src/components/Loader/LoaderSuspense.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import AnimationLayout from '../App/AnimationLayout';
 import LoaderLayout from './LoaderLayout';

apps/front/src/components/Map/LocationMarker.tsx

@@ -1,14 +1,15 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Marker, Popup, useMap } from 'react-leaflet';
 
+import { LocationEvent } from 'leaflet';
 import { DEFAULT_COORDS } from '../../utils/constants';
 
 export default function LocationMarker() {
   const [position, setPosition] = useState<[number, number]>(DEFAULT_COORDS);
   const map = useMap();
 
   useEffect(() => {
-    map.locate().on('locationfound', (e) => {
+    map.locate().on('locationfound', (e: LocationEvent) => {
       setPosition([e.latlng.lat, e.latlng.lng]);
       map.flyTo(e.latlng, map.getZoom());
     });

apps/front/src/components/Map/Map.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { MapContainer, Marker as MapMarker, Popup, TileLayer } from 'react-leaflet';
 
 import 'leaflet/dist/leaflet.css';
@@ -16,7 +15,7 @@ interface MapProps {
   onNewMarker: (latitude: number, longitude: number) => void;
 }
 
-export default function Map({ markers, onNewMarker }: MapProps) {
+export default function CustomMap({ markers, onNewMarker }: MapProps) {
   const theme = useTheme();
 
   return (
@@ -39,6 +38,6 @@ export default function Map({ markers, onNewMarker }: MapProps) {
   );
 }
 
-Map.defaultProps = {
+CustomMap.defaultProps = {
   markers: [],
 };

apps/front/src/components/Map/MapEvents.tsx

@@ -1,5 +1,6 @@
 import { useMapEvents } from 'react-leaflet';
 
+import { LeafletMouseEvent } from 'leaflet';
 import { round } from '../../utils/number';
 
 interface MapEventsProps {
@@ -8,7 +9,7 @@ interface MapEventsProps {
 
 export default function MapEvents({ onClick }: MapEventsProps) {
   useMapEvents({
-    click: (e) => {
+    click: (e: LeafletMouseEvent) => {
       onClick(round(e.latlng.lat, 5), round(e.latlng.lng, 5));
     },
   });

apps/front/src/components/Menu/Menu.tsx

@@ -4,7 +4,7 @@ import MuiMenu from '@mui/material/Menu';
 import { SxProps, Theme } from '@mui/material/styles';
 import Tooltip from '@mui/material/Tooltip';
 
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 interface MenuProps {
   id: string;

apps/front/src/components/Modal/Confirm.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import Button from '@mui/material/Button';
 import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';

apps/front/src/components/Snackbar/Snackbar.tsx

@@ -1,24 +1,21 @@
-import React from 'react';
-
 import Alert from '@mui/material/Alert';
 import Snackbar from '@mui/material/Snackbar';
 
 import { CustomContentProps, SnackbarContent } from 'notistack';
+import { forwardRef } from 'react';
 
-const defaultSnackbar = React.forwardRef<HTMLDivElement, CustomContentProps>((props, ref) => {
+const defaultSnackbar = forwardRef<HTMLDivElement, CustomContentProps>((props, ref) => {
   const { id, message } = props;
   return (
-    // eslint-disable-next-line react/jsx-props-no-spreading
     <SnackbarContent ref={ref}>
       <Snackbar open key={id} message={message} />
     </SnackbarContent>
   );
 });
 
-const successSnackbar = React.forwardRef<HTMLDivElement, CustomContentProps>((props, ref) => {
+const successSnackbar = forwardRef<HTMLDivElement, CustomContentProps>((props, ref) => {
   const { id, message } = props;
   return (
-    // eslint-disable-next-line react/jsx-props-no-spreading
     <SnackbarContent ref={ref}>
       <Snackbar open key={id}>
         <Alert severity="success" variant="filled" sx={{ minWidth: 288 }}>
@@ -29,10 +26,9 @@ const successSnackbar = React.forwardRef<HTMLDivElement, CustomContentProps>((pr
   );
 });
 
-const errorSnackbar = React.forwardRef<HTMLDivElement, CustomContentProps>((props, ref) => {
+const errorSnackbar = forwardRef<HTMLDivElement, CustomContentProps>((props, ref) => {
   const { id, message } = props;
   return (
-    // eslint-disable-next-line react/jsx-props-no-spreading
     <SnackbarContent ref={ref}>
       <Snackbar open key={id}>
         <Alert severity="error" variant="filled" sx={{ minWidth: 288 }}>
@@ -43,10 +39,9 @@ const errorSnackbar = React.forwardRef<HTMLDivElement, CustomContentProps>((prop
   );
 });
 
-const warningSnackbar = React.forwardRef<HTMLDivElement, CustomContentProps>((props, ref) => {
+const warningSnackbar = forwardRef<HTMLDivElement, CustomContentProps>((props, ref) => {
   const { id, message } = props;
   return (
-    // eslint-disable-next-line react/jsx-props-no-spreading
     <SnackbarContent ref={ref}>
       <Snackbar open key={id}>
         <Alert severity="warning" variant="filled" sx={{ minWidth: 288 }}>
@@ -57,10 +52,9 @@ const warningSnackbar = React.forwardRef<HTMLDivElement, CustomContentProps>((pr
   );
 });
 
-const infoSnackbar = React.forwardRef<HTMLDivElement, CustomContentProps>((props, ref) => {
+const infoSnackbar = forwardRef<HTMLDivElement, CustomContentProps>((props, ref) => {
   const { id, message } = props;
   return (
-    // eslint-disable-next-line react/jsx-props-no-spreading
     <SnackbarContent ref={ref}>
       <Snackbar open key={id}>
         <Alert severity="info" variant="filled" sx={{ minWidth: 288 }}>

apps/front/src/main.tsx

@@ -3,7 +3,7 @@ import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider } from '@mui/material/styles';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { LazyMotion, domAnimation } from 'framer-motion';
-import React from 'react';
+import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { RouterProvider } from 'react-router-dom';
 import { registerSW } from 'virtual:pwa-register';
@@ -29,7 +29,7 @@ if (rootContainer !== null) {
   const root = createRoot(rootContainer);
 
   root.render(
-    <React.StrictMode>
+    <StrictMode>
       <LazyMotion features={domAnimation}>
         <QueryClientProvider client={queryClient}>
           <ThemeProvider theme={theme}>
@@ -40,7 +40,7 @@ if (rootContainer !== null) {
           </ThemeProvider>
         </QueryClientProvider>
       </LazyMotion>
-    </React.StrictMode>
+    </StrictMode>,
   );
 
   registerSW();

apps/front/src/routes/Dashboard/Dashboard.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import DashboardLayout from '../../components/App/DashboardLayout';
 
 export default function Dashboard() {

apps/front/src/routes/Dashboard/Devices.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default function Devices() {
   return <div>Devices</div>;
 }

apps/front/src/routes/Dashboard/Satellites/Details.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
 import FilterListOutlinedIcon from '@mui/icons-material/FilterListOutlined';

apps/front/src/routes/Dashboard/Satellites/Plugins/Install.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import ArrowBackIosNewOutlinedIcon from '@mui/icons-material/ArrowBackIosNewOutlined';
@@ -56,7 +56,7 @@ export default function Install() {
           return { id: varId, key, value };
         }
         return variable;
-      })
+      }),
     );
   };
 
@@ -86,7 +86,7 @@ export default function Install() {
           })
           .catch((_err) => setRepoExisting(2));
       }, 500),
-    []
+    [],
   );
 
   const getIcon = () => {

apps/front/src/routes/Dashboard/Satellites/Plugins/PluginList.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 
 import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
 import MoreVertOutlinedIcon from '@mui/icons-material/MoreVertOutlined';
@@ -46,7 +46,7 @@ export default function PluginList({ plugins, onRemovePlugin }: { plugins: Plugi
     NiceModal.show(ConfirmDialog, {
       title: t('dashboard.satellites.areYouSure'),
       content: `${t('dashboard.satellites.deletePluginMessage')} <b>${name}</b>.`,
-      onClose: async (confirm) => {
+      onClose: async (confirm: boolean) => {
         if (confirm) {
           uninstallPlugin
             .mutateAsync(id)

apps/front/src/routes/Dashboard/Satellites/SatelliteCard.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';

apps/front/src/routes/Dashboard/Satellites/Satellites.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Navigate, useLocation } from 'react-router-dom';
 
 import LoaderSuspense from '../../../components/Loader/LoaderSuspense';
@@ -10,14 +8,14 @@ export default function Satellites() {
   const location = useLocation();
   const { isLoading, isSuccess, data } = useGetSatellites();
 
-  if (!isSuccess) {
+  if (!isSuccess || data === undefined || data[0] === undefined) {
     return null;
   }
 
   return (
     <LoaderSuspense isFetching={isLoading}>
       <>
-        <Navigate to={`${data[0].id}`} state={{ from: location }} />{' '}
+        <Navigate to={`${data[0].id}`} state={{ from: location }} />
       </>
     </LoaderSuspense>
   );

apps/front/src/routes/Dashboard/Satellites/States.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import Chip from '@mui/material/Chip';
 
 import { AvailableState } from '@friday-ai/shared';

apps/front/src/routes/Dashboard/Settings/House/House.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
 import { Divider, IconButton, Stack, Tooltip, Typography } from '@mui/material';