beenull/Cosmos-Server
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Perf updates

Browse source
This commit is contained in:
Kawanaao 2023-12-02 15:45:10 +02:00
parent c49f93572e
commit 9a556c2b9c
No known key found for this signature in database
GPG key ID: 5B7A8DDCE861E7DC
68 changed files with 3180 additions and 4151 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
.babelrc
View file

@ -1,11 +1,20 @@
{
"presets": [
"@babel/preset-env",
"@babel/env",
"@babel/react",
"@babel/preset-typescript"
],
"plugins": [
"@babel/plugin-transform-runtime",
[
"@babel/preset-react",
"babel-plugin-direct-import",
{
"runtime": "automatic"
"modules": [
"@mui/lab",
"@mui/material",
"@mui/x-date-pickers"
]
}
]
]
],
}

5
client/src/App.jsx
View file

@ -3,8 +3,7 @@ import Routes from './routes';
import * as React from 'react';
import ThemeCustomization from './themes';
import ScrollTop from './components/ScrollTop';
import Snackbar from '@mui/material/Snackbar';
import {Alert, Box} from '@mui/material';
import { Alert, Box, Snackbar } from '@mui/material';
import logo from './assets/images/icons/cosmos.png';
import * as API from './api';
@ -26,7 +25,7 @@ export let SetPrimaryColor = () => {};
export let SetSecondaryColor = () => {};
export let GlobalPrimaryColor = '';
export let GlobalSecondaryColor = '';
const App = () => {
const [open, setOpen] = React.useState(false);
const [message, setMessage] = React.useState('');

4
client/src/assets/images/auth/AuthBackground.jsx
View file

@ -1,6 +1,4 @@
// material-ui
import { useTheme } from '@mui/material/styles';
import { Box } from '@mui/material';
import { Box, useTheme } from '@mui/material';
import logo from '../icons/cosmos.png';

4
client/src/components/@extended/Breadcrumbs.jsx
View file

@ -2,9 +2,7 @@ import PropTypes from 'prop-types';
import { useEffect, useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
// material-ui
import MuiBreadcrumbs from '@mui/material/Breadcrumbs';
import { Grid, Typography } from '@mui/material';
import { Grid, Typography, Breadcrumbs as MuiBreadcrumbs } from '@mui/material';
// project imports
import MainCard from '../MainCard';

4
client/src/components/@extended/Dot.jsx
View file

@ -1,8 +1,6 @@
import PropTypes from 'prop-types';
// material-ui
import { useTheme } from '@mui/material/styles';
import { Box } from '@mui/material';
import { Box, useTheme } from '@mui/material';
const Dot = ({ color, size }) => {
const theme = useTheme();

6
client/src/components/Loader.jsx
View file

@ -1,8 +1,6 @@
// material-ui
import { styled } from '@mui/material/styles';
import LinearProgress from '@mui/material/LinearProgress';
// loader style
import { styled, LinearProgress } from '@mui/material';
const LoaderWrapper = styled('div')(({ theme }) => ({
position: 'fixed',
top: 0,

5
client/src/components/Logo/Logo.jsx
View file

@ -1,9 +1,8 @@
// material-ui
import { useTheme } from '@mui/material/styles';
import { fontWeight } from '@mui/system';
import logo from '../../assets/images/icons/cosmos_simple_black.png';
import logoDark from '../../assets/images/icons/cosmos_simple_white.png';
import { useTheme } from '@mui/material';
// ==============================|| LOGO SVG ||============================== //

4
client/src/components/MainCard.jsx
View file

@ -1,9 +1,7 @@
import PropTypes from 'prop-types';
import { forwardRef } from 'react';
// material-ui
import { useTheme } from '@mui/material/styles';
import { Card, CardContent, CardHeader, Divider, Typography } from '@mui/material';
import { Card, CardContent, CardHeader, Divider, Typography, useTheme } from '@mui/material';
// project import
import Highlighter from './third-party/Highlighter';

14
client/src/components/apiModal.jsx
View file

@ -1,11 +1,13 @@
// material-ui
import { LoadingButton } from '@mui/lab';
import { Button } from '@mui/material';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import {
Button,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
} from '@mui/material';
import * as React from 'react';
import { useEffect, useState } from 'react';

14
client/src/components/confirmModal.jsx
View file

@ -1,11 +1,13 @@
// material-ui
import { LoadingButton } from '@mui/lab';
import { Button } from '@mui/material';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import {
Button,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
} from '@mui/material';
import * as React from 'react';
import { useEffect, useState } from 'react';

5
client/src/components/countrySelect.jsx
View file

@ -1,8 +1,5 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
import { Grid } from '@mui/material';
import { Grid, Box, TextField, Autocomplete } from '@mui/material';
// From https://bitbucket.org/atlassian/atlaskit-mk-2/raw/4ad0e56649c3e6c973e226b7efaeb28cb240ccb0/packages/core/select/src/data/countries.js
const _countries = [

3
client/src/components/delete.jsx
View file

@ -1,7 +1,6 @@
import { CheckOutlined, ClockCircleOutlined, DashboardOutlined, DeleteOutlined, DownOutlined, LockOutlined, SafetyOutlined, UpOutlined } from "@ant-design/icons";
import { Card, Chip, Stack, Tooltip } from "@mui/material";
import { Card, Chip, Stack, Tooltip, useTheme } from "@mui/material";
import { useState } from "react";
import { useTheme } from '@mui/material/styles';
export const DeleteButton = ({onDelete, disabled, size}) => {
const [confirmDelete, setConfirmDelete] = useState(false);

3
client/src/components/hostChip.jsx
View file

@ -1,8 +1,7 @@
import { SettingOutlined } from "@ant-design/icons";
import { Chip } from "@mui/material";
import { Chip, useTheme } from "@mui/material";
import { useEffect, useState } from "react";
import { getOrigin, getFullOrigin } from "../utils/routes";
import { useTheme } from '@mui/material/styles';
const HostChip = ({route, settings, style}) => {
const theme = useTheme();

17
client/src/components/logsInModal.jsx
View file

@ -1,12 +1,17 @@
// material-ui
import * as React from 'react';
import { Alert, Button, Stack, Typography } from '@mui/material';
import {
Alert,
Button,
Stack,
Typography,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
} from '@mui/material';
import { WarningOutlined, PlusCircleOutlined, CopyOutlined, ExclamationCircleOutlined , SyncOutlined, UserOutlined, KeyOutlined, ArrowUpOutlined, FileZipOutlined } from '@ant-design/icons';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import { useEffect, useState } from 'react';
import { smartDockerLogConcat, tryParseProgressLog } from '../utils/docker';

3
client/src/components/routeComponents.jsx
View file

@ -1,7 +1,6 @@
import { CheckOutlined, ClockCircleOutlined, DashboardOutlined, DeleteOutlined, DownOutlined, LockOutlined, SafetyOutlined, UpOutlined } from "@ant-design/icons";
import { Card, Chip, Stack, Tooltip } from "@mui/material";
import { Card, Chip, Stack, Tooltip, useTheme } from "@mui/material";
import { useState } from "react";
import { useTheme } from '@mui/material/styles';
let routeImages = {
"SERVAPP": {

25
client/src/components/tableView/prettyTableView.jsx
View file

@ -1,14 +1,21 @@
import * as React from 'react';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import { CircularProgress, Input, InputAdornment, Stack, TextField, useMediaQuery } from '@mui/material';
import {
CircularProgress,
Input,
InputAdornment,
Stack,
TextField,
useMediaQuery,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Paper,
useTheme,
} from '@mui/material';
import { SearchOutlined } from '@ant-design/icons';
import { useTheme } from '@mui/material/styles';
import { Link } from 'react-router-dom';
const PrettyTableView = ({ isLoading, getKey, data, columns, sort, onRowClick, linkTo, buttons, fullWidth }) => {

4
client/src/components/third-party/SimpleBar.jsx vendored
View file

@ -1,8 +1,8 @@
import PropTypes from 'prop-types';
// material-ui
import { alpha, styled } from '@mui/material/styles';
import { Box } from '@mui/material';
import { styled } from '@mui/material/styles';
import { Box, alpha } from '@mui/material';
// third-party
import SimpleBar from 'simplebar-react';

12
client/src/layout/MainLayout/Drawer/DrawerContent/Navigation/NavItem.jsx
View file

@ -3,9 +3,15 @@ import { forwardRef, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
// material-ui
import { useTheme } from '@mui/material/styles';
import { Avatar, Chip, ListItemButton, ListItemIcon, ListItemText, Typography } from '@mui/material';
import {
Avatar,
Chip,
ListItemButton,
ListItemIcon,
ListItemText,
Typography,
useTheme,
} from '@mui/material';
// project import
import { activeItem } from '../../../../../store/reducers/menu';

4
client/src/layout/MainLayout/Drawer/DrawerHeader/DrawerHeaderStyled.jsx
View file

@ -1,6 +1,4 @@
// material-ui
import { styled } from '@mui/material/styles';
import { Box } from '@mui/material';
import { Box, styled } from '@mui/material';
// ==============================|| DRAWER HEADER - STYLED ||============================== //

4
client/src/layout/MainLayout/Drawer/DrawerHeader/index.jsx
View file

@ -1,8 +1,6 @@
import PropTypes from 'prop-types';
// material-ui
import { useTheme } from '@mui/material/styles';
import { Stack, Chip } from '@mui/material';
import { Stack, Chip, useTheme } from '@mui/material';
// project import
import DrawerHeaderStyled from './DrawerHeaderStyled';

6
client/src/layout/MainLayout/Drawer/MiniDrawerStyled.jsx
View file

@ -1,10 +1,8 @@
// material-ui
import { styled } from '@mui/material/styles';
import Drawer from '@mui/material/Drawer';
// project import
import { drawerWidth } from '../../../config';
import { styled, Drawer } from '@mui/material';
const openedMixin = (theme) => ({
width: drawerWidth,
borderRight: `1px solid ${theme.palette.divider}`,

4
client/src/layout/MainLayout/Drawer/index.jsx
View file

@ -1,9 +1,7 @@
import PropTypes from 'prop-types';
import { useMemo } from 'react';
// material-ui
import { useTheme } from '@mui/material/styles';
import { Box, Drawer, useMediaQuery } from '@mui/material';
import { Box, Drawer, useMediaQuery, useTheme } from '@mui/material';
// project import
import DrawerHeader from './DrawerHeader';

6
client/src/layout/MainLayout/Header/AppBarStyled.jsx
View file

@ -1,10 +1,8 @@
// material-ui
import { styled } from '@mui/material/styles';
import AppBar from '@mui/material/AppBar';
// project import
import { drawerWidth } from '../../../config';
import { styled, AppBar } from '@mui/material';
// ==============================|| HEADER - APP BAR STYLED ||============================== //
const AppBarStyled = styled(AppBar, { shouldForwardProp: (prop) => prop !== 'open' })(({ theme, open }) => ({

13
client/src/layout/MainLayout/Header/HeaderContent/MobileSection.jsx
View file

@ -1,8 +1,15 @@
import { useEffect, useRef, useState } from 'react';
// material-ui
import { useTheme } from '@mui/material/styles';
import { AppBar, Box, ClickAwayListener, IconButton, Paper, Popper, Toolbar } from '@mui/material';
import {
AppBar,
Box,
ClickAwayListener,
IconButton,
Paper,
Popper,
Toolbar,
useTheme,
} from '@mui/material';
// project import
import Search from './Search';

5
client/src/layout/MainLayout/Header/HeaderContent/Notification.jsx
View file

@ -1,7 +1,5 @@
import { useEffect, useRef, useState } from 'react';
// material-ui
import { useTheme } from '@mui/material/styles';
import {
Avatar,
Badge,
@ -17,7 +15,8 @@ import {
Paper,
Popper,
Typography,
useMediaQuery
useMediaQuery,
useTheme,
} from '@mui/material';
import * as timeago from 'timeago.js';

4
client/src/layout/MainLayout/Header/HeaderContent/Profile/ProfileTab.jsx
View file

@ -1,9 +1,7 @@
import PropTypes from 'prop-types';
import { useState } from 'react';
// material-ui
import { useTheme } from '@mui/material/styles';
import { List, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
import { List, ListItemButton, ListItemIcon, ListItemText, useTheme } from '@mui/material';
// assets
import { EditOutlined, ProfileOutlined, LogoutOutlined, UserOutlined, WalletOutlined } from '@ant-design/icons';

4
client/src/layout/MainLayout/Header/HeaderContent/Profile/SettingTab.jsx
View file

@ -1,8 +1,6 @@
import { useState } from 'react';
// material-ui
import { useTheme } from '@mui/material/styles';
import { List, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
import { List, ListItemButton, ListItemIcon, ListItemText, useTheme } from '@mui/material';
// assets
import { CommentOutlined, LockOutlined, QuestionCircleOutlined, UserOutlined, UnorderedListOutlined } from '@ant-design/icons';

5
client/src/layout/MainLayout/Header/HeaderContent/Profile/index.jsx
View file

@ -1,8 +1,6 @@
import PropTypes from 'prop-types';
import { useRef, useState } from 'react';
// material-ui
import { useTheme } from '@mui/material/styles';
import {
Avatar,
Box,
@ -16,7 +14,8 @@ import {
Stack,
Tab,
Tabs,
Typography
Typography,
useTheme,
} from '@mui/material';
// project import

4
client/src/layout/MainLayout/Header/index.jsx
View file

@ -1,8 +1,6 @@
import PropTypes from 'prop-types';
// material-ui
import { useTheme } from '@mui/material/styles';
import { AppBar, IconButton, Toolbar, useMediaQuery } from '@mui/material';
import { AppBar, IconButton, Toolbar, useMediaQuery, useTheme } from '@mui/material';
// project import
import AppBarStyled from './AppBarStyled';

4
client/src/layout/MainLayout/index.jsx
View file

@ -2,9 +2,7 @@ import { useEffect, useState } from 'react';
import { Outlet } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
// material-ui
import { useTheme } from '@mui/material/styles';
import { Box, Toolbar, useMediaQuery } from '@mui/material';
import { Box, Toolbar, useMediaQuery, useTheme } from '@mui/material';
// project import
import Drawer from './Drawer';

2
client/src/menu-items/support.jsx
View file

@ -2,7 +2,7 @@
import { GithubOutlined, QuestionOutlined, BugOutlined } from '@ant-design/icons';
import DiscordOutlined from '../assets/images/icons/discord.svg'
import DiscordOutlinedWhite from '../assets/images/icons/discord_white.svg'
import { useTheme } from '@mui/material/styles';
import { useTheme } from '@mui/material';
// ==============================|| MENU ITEMS - SAMPLE PAGE & DOCUMENTATION ||============================== //

3
client/src/pages/authentication/AuthWrapper.jsx
View file

@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
// material-ui
import { Box, Grid } from '@mui/material';
import { Box, Grid, useTheme } from '@mui/material';
// project import
import AuthCard from './AuthCard';
@ -10,7 +10,6 @@ import AuthFooter from '../../components/cards/AuthFooter';
// assets
import AuthBackground from '../../assets/images/auth/AuthBackground';
import { useTheme } from '@mui/material/styles';
// ==============================|| AUTHENTICATION - WRAPPER ||============================== //

276
client/src/pages/authentication/auth-forms/AuthRegister.jsx
View file

@ -57,149 +57,147 @@ const AuthRegister = ({nickname, isRegister, isInviteLink, regkey}) => {
changePassword('');
}, []);
return (
<>
<Formik
initialValues={{
return <>
<Formik
initialValues={{
nickname: nickname,
lastname: '',
email: '',
company: '',
password: '',
submit: null
}}
validationSchema={Yup.object().shape({
nickname: Yup.string().max(255).required('Nickname is required'),
password: Yup.string()
.max(255)
.required('Password is required')
.matches(
/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[~!@#$%\^&\*\(\)_\+=\-\{\[\}\]:;"'<,>\/])(?=.{9,})/,
'Must Contain 9 Characters, One Uppercase, One Lowercase, One Number and one special case Character (~!@#$%^&*()_+=-{[}]:;"\'<>.?/)'
),
})}
onSubmit={async (values, { setErrors, setStatus, setSubmitting }) => {
return API.users.register({
nickname: nickname,
lastname: '',
email: '',
company: '',
password: '',
submit: null
}}
validationSchema={Yup.object().shape({
nickname: Yup.string().max(255).required('Nickname is required'),
password: Yup.string()
.max(255)
.required('Password is required')
.matches(
/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[~!@#$%\^&\*\(\)_\+=\-\{\[\}\]:;"'<,>\/])(?=.{9,})/,
'Must Contain 9 Characters, One Uppercase, One Lowercase, One Number and one special case Character (~!@#$%^&*()_+=-{[}]:;"\'<>.?/)'
),
})}
onSubmit={async (values, { setErrors, setStatus, setSubmitting }) => {
return API.users.register({
nickname: nickname,
registerKey: regkey,
password: values.password,
}).then((res) => {
setStatus({ success: true });
setSubmitting(false);
redirectToLocal('/cosmos-ui/login');
}).catch((err) => {
setStatus({ success: false });
setErrors({ submit: err.message });
setSubmitting(false);
});
}}
>
{({ errors, handleBlur, handleChange, handleSubmit, isSubmitting, touched, values }) => (
<form noValidate onSubmit={handleSubmit}>
<Grid container spacing={3}>
{isInviteLink ? <Grid item xs={12}>
<Alert severity="info">
<strong>Invite Link</strong> - You have been invited to join this Cosmos instance. This Nickname has been provided to us by your administrator. Keep note of it, you will need it to login.
</Alert>
</Grid> : ''}
{isInviteLink ? <Grid item xs={12}>
<Stack spacing={1}>
<InputLabel htmlFor="nickname-signup">Nickname</InputLabel>
<OutlinedInput
id="nickname-login"
type="nickname"
value={nickname}
name="nickname"
onBlur={handleBlur}
onChange={handleChange}
placeholder=""
disabled={true}
fullWidth
error={Boolean(touched.nickname && errors.nickname)}
/>
{touched.nickname && errors.nickname && (
<FormHelperText error id="helper-text-nickname-signup">
{errors.nickname}
</FormHelperText>
)}
</Stack>
</Grid> : ''}
<Grid item xs={12}>
<Stack spacing={1}>
<InputLabel htmlFor="password-signup">Password</InputLabel>
<OutlinedInput
fullWidth
error={Boolean(touched.password && errors.password)}
id="password-signup"
type={showPassword ? 'text' : 'password'}
value={values.password}
name="password"
onBlur={handleBlur}
onChange={(e) => {
handleChange(e);
changePassword(e.target.value);
}}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
edge="end"
size="large"
>
{showPassword ? <EyeOutlined /> : <EyeInvisibleOutlined />}
</IconButton>
</InputAdornment>
}
placeholder="********"
inputProps={{}}
/>
{touched.password && errors.password && (
<FormHelperText error id="helper-text-password-signup">
{errors.password}
</FormHelperText>
)}
</Stack>
<FormControl fullWidth sx={{ mt: 2 }}>
<Grid container spacing={2} alignItems="center">
<Grid item>
<Box sx={{ bgcolor: level?.color, width: 85, height: 8, borderRadius: '7px' }} />
</Grid>
<Grid item>
<Typography variant="subtitle1" fontSize="0.75rem">
{level?.label}
</Typography>
</Grid>
registerKey: regkey,
password: values.password,
}).then((res) => {
setStatus({ success: true });
setSubmitting(false);
redirectToLocal('/cosmos-ui/login');
}).catch((err) => {
setStatus({ success: false });
setErrors({ submit: err.message });
setSubmitting(false);
});
}}
>
{({ errors, handleBlur, handleChange, handleSubmit, isSubmitting, touched, values }) => (
<form noValidate onSubmit={handleSubmit}>
<Grid container spacing={3}>
{isInviteLink ? <Grid item xs={12}>
<Alert severity="info">
<strong>Invite Link</strong> - You have been invited to join this Cosmos instance. This Nickname has been provided to us by your administrator. Keep note of it, you will need it to login.
</Alert>
</Grid> : ''}
{isInviteLink ? <Grid item xs={12}>
<Stack spacing={1}>
<InputLabel htmlFor="nickname-signup">Nickname</InputLabel>
<OutlinedInput
id="nickname-login"
type="nickname"
value={nickname}
name="nickname"
onBlur={handleBlur}
onChange={handleChange}
placeholder=""
disabled={true}
fullWidth
error={Boolean(touched.nickname && errors.nickname)}
/>
{touched.nickname && errors.nickname && (
<FormHelperText error id="helper-text-nickname-signup">
{errors.nickname}
</FormHelperText>
)}
</Stack>
</Grid> : ''}
<Grid item xs={12}>
<Stack spacing={1}>
<InputLabel htmlFor="password-signup">Password</InputLabel>
<OutlinedInput
fullWidth
error={Boolean(touched.password && errors.password)}
id="password-signup"
type={showPassword ? 'text' : 'password'}
value={values.password}
name="password"
onBlur={handleBlur}
onChange={(e) => {
handleChange(e);
changePassword(e.target.value);
}}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
edge="end"
size="large"
>
{showPassword ? <EyeOutlined /> : <EyeInvisibleOutlined />}
</IconButton>
</InputAdornment>
}
placeholder="********"
inputProps={{}}
/>
{touched.password && errors.password && (
<FormHelperText error id="helper-text-password-signup">
{errors.password}
</FormHelperText>
)}
</Stack>
<FormControl fullWidth sx={{ mt: 2 }}>
<Grid container spacing={2} alignItems="center">
<Grid item>
<Box sx={{ bgcolor: level?.color, width: 85, height: 8, borderRadius: '7px' }} />
</Grid>
<Grid item>
<Typography variant="subtitle1" fontSize="0.75rem">
{level?.label}
</Typography>
</Grid>
</FormControl>
</Grid>
{errors.submit && (
<Grid item xs={12}>
<FormHelperText error>{errors.submit}</FormHelperText>
</Grid>
)}
<Grid item xs={12}>
<LoadingButton
disableElevation
loading={isSubmitting}
fullWidth
size="large"
type="submit"
variant="contained"
color="primary"
>
{
isRegister ? 'Register' : 'Reset Password'
}
</LoadingButton>
</Grid>
</FormControl>
</Grid>
</form>
)}
</Formik>
</>
);
{errors.submit && (
<Grid item xs={12}>
<FormHelperText error>{errors.submit}</FormHelperText>
</Grid>
)}
<Grid item xs={12}>
<LoadingButton
disableElevation
loading={isSubmitting}
fullWidth
size="large"
type="submit"
variant="contained"
color="primary"
>
{
isRegister ? 'Register' : 'Reset Password'
}
</LoadingButton>
</Grid>
</Grid>
</form>
)}
</Formik>
</>;
};
export default AuthRegister;

4
client/src/pages/authentication/auth-forms/FirebaseSocial.jsx
View file

@ -1,6 +1,4 @@
// material-ui
import { useTheme } from '@mui/material/styles';
import { useMediaQuery, Button, Stack } from '@mui/material';
import { useMediaQuery, Button, Stack, useTheme } from '@mui/material';
// assets
import Google from '../../../assets/images/icons/google.svg';

4
client/src/pages/authentication/newMFA.jsx
View file

@ -16,7 +16,8 @@ import {
Typography,
Alert,
TextField,
Tooltip
Tooltip,
useTheme,
} from '@mui/material';
// project import
@ -28,7 +29,6 @@ import * as Yup from 'yup';
import * as API from '../../api';
import QRCode from 'qrcode';
import { useTheme } from '@mui/material/styles';
import { Formik } from 'formik';
import { LoadingButton } from '@mui/lab';
import { CosmosCollapse } from '../config/users/formShortcuts';

5
client/src/pages/components-overview/AntIcons.jsx
View file

@ -1,9 +1,8 @@
// material-ui
import { styled } from '@mui/material/styles';
// project import
import ComponentSkeleton from './ComponentSkeleton';
import MainCard from '../../components/MainCard';
import { styled } from '@mui/material';
// styles
const IFrameWrapper = styled('iframe')(() => ({

4
client/src/pages/components-overview/Shadow.jsx
View file

@ -1,8 +1,6 @@
import PropTypes from 'prop-types';
// material-ui
import { useTheme } from '@mui/material/styles';
import { Grid, Stack, Typography } from '@mui/material';
import { Grid, Stack, Typography, useTheme } from '@mui/material';
// project import
import MainCard from '../../components/MainCard';

25
client/src/pages/config/routes/newRoute.jsx
View file

@ -1,11 +1,30 @@
// material-ui
import { AppstoreAddOutlined, PlusCircleOutlined, ReloadOutlined, SearchOutlined, SettingOutlined } from '@ant-design/icons';
import { Alert, Badge, Button, Card, Checkbox, Chip, CircularProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, Input, InputAdornment, TextField, Tooltip, Typography } from '@mui/material';
import {
Alert,
Badge,
Button,
Card,
Checkbox,
Chip,
CircularProgress,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
Divider,
Input,
InputAdornment,
TextField,
Tooltip,
Typography,
Paper,
styled,
} from '@mui/material';
import Grid2 from '@mui/material/Unstable_Grid2/Grid2';
import { Stack } from '@mui/system';
import { useEffect, useState } from 'react';
import Paper from '@mui/material/Paper';
import { styled } from '@mui/material/styles';
import * as API from '../../../api';
import IsLoggedIn from '../../../isLoggedIn';

1236
client/src/pages/config/users/configman.jsx
View file

File diff suppressed because it is too large Load diff

4
client/src/pages/config/users/containerPicker.jsx
View file

@ -21,13 +21,13 @@ import {
AccordionDetails,
Accordion,
Chip,
Autocomplete,
CircularProgress,
} from '@mui/material';
import { Formik, Field } from 'formik';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import AnimateButton from '../../../components/@extended/AnimateButton';
import RestartModal from './restart';
import Autocomplete from '@mui/material/Autocomplete';
import CircularProgress from '@mui/material/CircularProgress';
import defaultport from '../../servapps/defaultport.json';

3
client/src/pages/config/users/proxyman.jsx
View file

@ -4,7 +4,6 @@ import * as API from '../../../api';
import MainCard from '../../../components/MainCard';
import { Formik, Field } from 'formik';
import * as Yup from 'yup';
import { useTheme } from '@mui/material/styles';
import { WarningOutlined, PlusCircleOutlined, CopyOutlined, ExclamationCircleOutlined , SyncOutlined, UserOutlined, KeyOutlined } from '@ant-design/icons';
import {
Alert,
@ -26,7 +25,7 @@ import {
MenuItem,
Chip,
CircularProgress,
useTheme,
} from '@mui/material';
import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
import AnimateButton from '../../../components/@extended/AnimateButton';

39
client/src/pages/config/users/restart.jsx
View file

@ -1,23 +1,28 @@
// material-ui
import * as React from 'react';
import { Alert, Button, Stack, Typography } from '@mui/material';
import {
Alert,
Button,
Stack,
Typography,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Paper,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
TextField,
CircularProgress,
Chip,
IconButton,
} from '@mui/material';
import { WarningOutlined, PlusCircleOutlined, CopyOutlined, ExclamationCircleOutlined , SyncOutlined, UserOutlined, KeyOutlined } from '@ant-design/icons';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import TextField from '@mui/material/TextField';
import CircularProgress from '@mui/material/CircularProgress';
import Chip from '@mui/material/Chip';
import IconButton from '@mui/material/IconButton';
import * as API from '../../../api';
import MainCard from '../../../components/MainCard';
import IsLoggedIn from '../../../isLoggedIn';

37
client/src/pages/config/users/usermanagement.jsx
View file

@ -1,23 +1,26 @@
// material-ui
import * as React from 'react';
import { Button, Typography } from '@mui/material';
import {
Button,
Typography,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Paper,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
TextField,
CircularProgress,
Chip,
IconButton,
} from '@mui/material';
import { WarningOutlined, PlusCircleOutlined, CopyOutlined, ExclamationCircleOutlined , SyncOutlined, UserOutlined, KeyOutlined } from '@ant-design/icons';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import TextField from '@mui/material/TextField';
import CircularProgress from '@mui/material/CircularProgress';
import Chip from '@mui/material/Chip';
import IconButton from '@mui/material/IconButton';
import * as API from '../../../api';
import MainCard from '../../../components/MainCard';
import IsLoggedIn from '../../../isLoggedIn';

19
client/src/pages/constellation/addDevice.jsx
View file

@ -1,10 +1,17 @@
// material-ui
import { Alert, Button, InputLabel, OutlinedInput, Stack, TextField } from '@mui/material';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import {
Alert,
Button,
InputLabel,
OutlinedInput,
Stack,
TextField,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
} from '@mui/material';
import * as React from 'react';
import { useState } from 'react';
import ResponsiveButton from '../../components/responseiveButton';

6
client/src/pages/dashboard/components/mini-plot.jsx
View file

@ -17,13 +17,11 @@ import {
Stack,
TextField,
Typography,
Alert
Alert,
useTheme,
} from '@mui/material';
import MainCard from '../../../components/MainCard';
// material-ui
import { useTheme } from '@mui/material/styles';
// third-party
import ReactApexChart from 'react-apexcharts';
import { FormaterForMetric, formatDate, toUTC } from './utils';

6
client/src/pages/dashboard/components/plot.jsx
View file

@ -15,13 +15,11 @@ import {
Stack,
TextField,
Typography,
Alert
Alert,
useTheme,
} from '@mui/material';
import MainCard from '../../../components/MainCard';
// material-ui
import { useTheme } from '@mui/material/styles';
// third-party
import ReactApexChart from 'react-apexcharts';
import { FormaterForMetric, toUTC } from './utils';

6
client/src/pages/dashboard/components/table.jsx
View file

@ -26,13 +26,11 @@ import {
DialogTitle,
DialogContent,
DialogContentText,
DialogActions
DialogActions,
useTheme,
} from '@mui/material';
import MainCard from '../../../components/MainCard';
// material-ui
import { useTheme } from '@mui/material/styles';
// third-party
import ReactApexChart from 'react-apexcharts';
import { object } from 'prop-types';

25
client/src/pages/openid/openid-edit.jsx
View file

@ -1,11 +1,30 @@
// material-ui
import { AppstoreAddOutlined, PlusCircleOutlined, ReloadOutlined, SearchOutlined, SettingOutlined } from '@ant-design/icons';
import { Alert, Badge, Button, Card, Checkbox, Chip, CircularProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, Input, InputAdornment, TextField, Tooltip, Typography } from '@mui/material';
import {
Alert,
Badge,
Button,
Card,
Checkbox,
Chip,
CircularProgress,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
Divider,
Input,
InputAdornment,
TextField,
Tooltip,
Typography,
Paper,
styled,
} from '@mui/material';
import Grid2 from '@mui/material/Unstable_Grid2/Grid2';
import { Stack } from '@mui/system';
import { useEffect, useState } from 'react';
import Paper from '@mui/material/Paper';
import { styled } from '@mui/material/styles';
import * as API from '../../api';
import IsLoggedIn from '../../isLoggedIn';

3
client/src/pages/openid/openid-list.jsx
View file

@ -4,7 +4,6 @@ import * as API from '../../api';
import MainCard from '../../components/MainCard';
import { Formik, Field } from 'formik';
import * as Yup from 'yup';
import { useTheme } from '@mui/material/styles';
import { WarningOutlined, PlusCircleOutlined, CopyOutlined, ExclamationCircleOutlined, SyncOutlined, UserOutlined, KeyOutlined, ArrowRightOutlined } from '@ant-design/icons';
import {
Alert,
@ -21,7 +20,7 @@ import {
DialogContentText,
DialogActions,
IconButton,
useTheme,
} from '@mui/material';
import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
import AnimateButton from '../../components/@extended/AnimateButton';

42
client/src/pages/servapps/containers/docker-compose.jsx
View file

@ -1,23 +1,31 @@
// material-ui
import * as React from 'react';
import { Alert, Button, Checkbox, FormControlLabel, FormLabel, Stack, Typography } from '@mui/material';
import {
Alert,
Button,
Checkbox,
FormControlLabel,
FormLabel,
Stack,
Typography,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Paper,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
TextField,
CircularProgress,
Chip,
IconButton,
} from '@mui/material';
import { WarningOutlined, PlusCircleOutlined, CopyOutlined, ExclamationCircleOutlined, SyncOutlined, UserOutlined, KeyOutlined, ArrowUpOutlined, FileZipOutlined, ArrowDownOutlined, ConsoleSqlOutlined } from '@ant-design/icons';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import TextField from '@mui/material/TextField';
import CircularProgress from '@mui/material/CircularProgress';
import Chip from '@mui/material/Chip';
import IconButton from '@mui/material/IconButton';
import * as API from '../../../api';
import MainCard from '../../../components/MainCard';
import IsLoggedIn from '../../../isLoggedIn';

3
client/src/pages/servapps/containers/setup.jsx
View file

@ -401,7 +401,8 @@ const DockerContainerSetup = ({ noCard, containerInfo, installer, OnChange, refr
</form>
)}
</Formik>
</div>);
</div>
);
};
export default DockerContainerSetup;

4
client/src/pages/servapps/containers/terminal.jsx
View file

@ -1,8 +1,6 @@
import React, { useEffect, useRef, useState } from 'react';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import * as API from '../../../api';
import { Alert, Input, Stack, useMediaQuery, useTheme } from '@mui/material';
import { Alert, Input, Stack, useMediaQuery, useTheme, Button, TextField } from '@mui/material';
import Terminal from '../../../components/terminal';
import { ApiOutlined, SendOutlined } from '@ant-design/icons';
import ResponsiveButton from '../../../components/responseiveButton';

26
client/src/pages/servapps/createNetwork.jsx
View file

@ -1,13 +1,25 @@
// material-ui
import * as React from 'react';
import { Alert, Button, Checkbox, FormControl, FormHelperText, Grid, InputLabel, MenuItem, Select, Stack, TextField } from '@mui/material';
import {
Alert,
Button,
Checkbox,
FormControl,
FormHelperText,
Grid,
InputLabel,
MenuItem,
Select,
Stack,
TextField,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
CircularProgress,
} from '@mui/material';
import { PlusCircleFilled, PlusCircleOutlined, WarningOutlined } from '@ant-design/icons';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import CircularProgress from '@mui/material/CircularProgress';
import { useEffect, useState } from 'react';
import { LoadingButton } from '@mui/lab';
import { FormikProvider, useFormik } from 'formik';

26
client/src/pages/servapps/linkContainersButton.jsx
View file

@ -1,13 +1,25 @@
// material-ui
import * as React from 'react';
import { Alert, Button, Checkbox, FormControl, FormHelperText, Grid, InputLabel, MenuItem, Select, Stack, TextField } from '@mui/material';
import {
Alert,
Button,
Checkbox,
FormControl,
FormHelperText,
Grid,
InputLabel,
MenuItem,
Select,
Stack,
TextField,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
CircularProgress,
} from '@mui/material';
import { PlusCircleFilled, PlusCircleOutlined, WarningOutlined } from '@ant-design/icons';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import CircularProgress from '@mui/material/CircularProgress';
import { useEffect, useState } from 'react';
import { LoadingButton } from '@mui/lab';
import { FormikProvider, useFormik } from 'formik';

28
client/src/pages/servapps/servapps.jsx
View file

@ -1,11 +1,32 @@
// material-ui
import { AlertFilled, AppstoreAddOutlined, CloseSquareOutlined, DeleteOutlined, PauseCircleOutlined, PlaySquareOutlined, PlusCircleOutlined, ReloadOutlined, RollbackOutlined, SearchOutlined, SettingOutlined, StopOutlined, UpCircleOutlined, UpSquareFilled, WarningFilled } from '@ant-design/icons';
import { Alert, Badge, Button, Card, Checkbox, Chip, CircularProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, IconButton, Input, InputAdornment, TextField, Tooltip, Typography } from '@mui/material';
import {
Alert,
Badge,
Button,
Card,
Checkbox,
Chip,
CircularProgress,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
Divider,
IconButton,
Input,
InputAdornment,
TextField,
Tooltip,
Typography,
Paper,
styled,
useTheme,
} from '@mui/material';
import Grid2 from '@mui/material/Unstable_Grid2/Grid2';
import { Stack } from '@mui/system';
import { useEffect, useState } from 'react';
import Paper from '@mui/material/Paper';
import { styled } from '@mui/material/styles';
import * as API from '../../api';
import IsLoggedIn from '../../isLoggedIn';
@ -22,7 +43,6 @@ import { ContainerNetworkWarning } from '../../components/containers';
import { ServAppIcon } from '../../utils/servapp-icon';
import MiniPlotComponent from '../dashboard/components/mini-plot';
import { DownloadFile } from '../../api/downloadButton';
import { useTheme } from '@mui/material/styles';
const Item = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',

27
client/src/pages/servapps/volumes.jsx
View file

@ -1,11 +1,32 @@
// material-ui
import { AppstoreAddOutlined, CloseSquareOutlined, DeleteOutlined, PauseCircleOutlined, PlaySquareOutlined, PlusCircleOutlined, ReloadOutlined, RollbackOutlined, SearchOutlined, SettingOutlined, StopOutlined, SyncOutlined, UpCircleOutlined, UpSquareFilled } from '@ant-design/icons';
import { Alert, Badge, Button, Card, Checkbox, Chip, CircularProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, IconButton, Input, InputAdornment, TextField, Tooltip, Typography, useTheme } from '@mui/material';
import {
Alert,
Badge,
Button,
Card,
Checkbox,
Chip,
CircularProgress,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
Divider,
IconButton,
Input,
InputAdornment,
TextField,
Tooltip,
Typography,
useTheme,
Paper,
styled,
} from '@mui/material';
import Grid2 from '@mui/material/Unstable_Grid2/Grid2';
import { Stack } from '@mui/system';
import { useEffect, useState } from 'react';
import Paper from '@mui/material/Paper';
import { styled } from '@mui/material/styles';
import * as API from '../../api';
import IsLoggedIn from '../../isLoggedIn';

4
client/src/themes/index.jsx
View file

@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
import { useMemo } from 'react';
// material-ui
import { CssBaseline, StyledEngineProvider } from '@mui/material';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { CssBaseline, StyledEngineProvider, createTheme } from '@mui/material';
import { ThemeProvider } from '@mui/material/styles';
// project import
import Palette from './palette';

4
client/src/themes/overrides/OutlinedInput.jsx
View file

@ -1,7 +1,5 @@
// material-ui
import { alpha } from '@mui/material/styles';
// ==============================|| OVERRIDES - OUTLINED INPUT ||============================== //
import { alpha } from '@mui/material';
export default function OutlinedInput(theme) {
return {

5
client/src/themes/palette.jsx
View file

@ -1,6 +1,3 @@
// material-ui
import { createTheme } from '@mui/material/styles';
// third-party
import { presetPalettes } from '@ant-design/colors';
@ -9,6 +6,8 @@ import ThemeOption from './theme';
import * as API from '../api';
import { createTheme } from '@mui/material';
// ==============================|| DEFAULT THEME - PALETTE ||============================== //
const Palette = (mode, PrimaryColor, SecondaryColor) => {

4
client/src/themes/shadows.jsx
View file

@ -1,7 +1,5 @@
// material-ui
import { alpha } from '@mui/material/styles';
// ==============================|| DEFAULT THEME - CUSTOM SHADOWS ||============================== //
import { alpha } from '@mui/material';
const CustomShadows = (theme) => ({
button: `0 2px #0000000b`,

4
client/src/themes/theme/index.jsx
View file

@ -1,6 +1,8 @@
// ==============================|| PRESET THEME - THEME SELECTOR ||============================== //
import { purple, pink, deepPurple, blueGrey, lightBlue, lightGreen, orange, teal, indigo } from '@mui/material/colors';
import { pink, blueGrey, lightGreen, teal } from '@mui/material/colors';
import { purple, deepPurple, lightBlue, orange, indigo } from '@mui/material';
const Theme = (colors, darkMode) => {
const { blue, red, gold, cyan, green, grey } = colors;

2
client/src/utils/SyntaxHighlight.jsx
View file

@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
// third-party
import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
import { SyntaxHighlighter } from 'react-syntax-highlighter';
import { a11yDark } from 'react-syntax-highlighter/dist/esm/styles/hljs';
import js from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';

1
client/src/utils/hooks.js
View file

@ -1,4 +1,3 @@
import React from 'react';
import { useCookies } from 'react-cookie';
import { logout } from '../api/authentication';

26
eslint.config.js Normal file
View file

@ -0,0 +1,26 @@
const reactAll = require('eslint-plugin-react/configs/all');
const globals = require('globals');
module.exports = [
{
files: ['client/src/**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
...reactAll,
languageOptions: {
...reactAll.languageOptions,
globals: {
...globals.serviceworker,
...globals.browser,
},
},
rules: {
'react/jsx-uses-react': 'error',
'react/jsx-uses-vars': 'error',
'no-restricted-imports': [
"error",
{
"patterns": ["@mui/*/*/*"]
}
]
},
},
];

5125
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

11
package.json
View file

@ -66,6 +66,9 @@
"whiskers.js": "^1.0.0",
"yup": "^0.32.11"
},
"peerDependencies": {
"bn.js": ">= 4.12.0 =< 5.2.1"
},
"overrides": {
"react-lazyload": {
"react": "^18.2.0",
@ -114,14 +117,16 @@
"@babel/core": "^7.23.5",
"@babel/eslint-parser": "^7.19.1",
"@babel/preset-env": "^7.23.5",
"@babel/preset-typescript": "^7.23.3",
"@swc/core": "^1.3.100",
"babel-loader": "^9.1.3",
"babel-plugin-direct-import": "^1.0.0",
"browserify-fs": "^1.0.0",
"buffer": "^6.0.3",
"crypto-browserify": "^3.12.0",
"css-loader": "^6.8.1",
"css-minimizer-webpack-plugin": "^5.0.1",
"eslint": "^8.23.1",
"eslint": "^8.55.0",
"eslint-config-airbnb-typescript": "^17.0.0",
"eslint-config-prettier": "^8.5.0",
"eslint-config-react-app": "7.0.1",
@ -130,10 +135,12 @@
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "6.6.1",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.31.8",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "4.6.0",
"eslint-webpack-plugin": "^4.0.1",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.3",
"inspectpack": "^4.7.1",
"mini-css-extract-plugin": "^2.7.6",
"path-browserify": "^1.0.1",
"prettier": "2.7.1",

5
tsconfig.json
View file

@ -1,6 +1,11 @@
{
"compilerOptions": {
"outDir": "client/dist",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"noImplicitAny": true,
"module": "es6",
"target": "es6",

65
webpack.config.js
View file

@ -1,9 +1,12 @@
const { IgnorePlugin } = require("webpack")
const { IgnorePlugin } = require('webpack')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
const TerserPlugin = require("terser-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const { DuplicatesPlugin } = require("inspectpack/plugin");
const TerserPlugin = require('terser-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const path = require('path');
module.exports = {
@ -11,26 +14,26 @@ module.exports = {
module: {
rules: [
{
test: /\.(ts|tsx)$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.(js|jsx)$/,
use: "babel-loader",
test: /\.(ts|tsx|js|jsx|mjs|cjs)$/,
use: {
loader: 'babel-loader',
options: {
cacheCompression: true
}
},
exclude: /node_modules/,
},
{
test: /\.s[ac]ss$/i,
use: [
MiniCssExtractPlugin.loader,
{ loader: "css-loader", options: { modules: true } },
"sass-loader",
{ loader: 'css-loader', options: { modules: true } },
'sass-loader',
],
},
{
test: /\.css$/i,
use: ["style-loader", { loader: "css-loader", options: { modules: true } },],
use: ['style-loader', { loader: 'css-loader', options: { modules: true } },],
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
@ -39,34 +42,46 @@ module.exports = {
],
},
resolve: {
extensions: ['.*', '.tsx', '.ts', '.jsx', '.js'],
extensions: ['.*', '.tsx', '.ts', '.jsx', '.js', '.mjs', '.cjs'],
fallback: {
"stream": require.resolve("stream-browserify"),
"crypto": require.resolve("crypto-browserify"),
"path": require.resolve("path-browserify"),
"fs": require.resolve("browserify-fs"),
"buffer": require.resolve("buffer/"),
"util": require.resolve("util/"),
'stream': require.resolve('stream-browserify'),
'crypto': require.resolve('crypto-browserify'),
'path': require.resolve('path-browserify'),
'fs': require.resolve('browserify-fs'),
'buffer': require.resolve('buffer/'),
'util': require.resolve('util/'),
},
alias: {
'bn.js': require.resolve('bn.js')
}
},
plugins: [
new ESLintPlugin(),
new IgnorePlugin({
resourceRegExp: /[\d\D]*.demo[\d\D]*/
}),
new HtmlWebpackPlugin({
template: path.join(__dirname, "client", "index.html"),
template: path.join(__dirname, 'client', 'index.html'),
filename: 'index.[contenthash].html'
}),
new BundleAnalyzerPlugin(),
new DuplicatesPlugin({
emitErrors: false,
verbose: true
})
],
output: {
path: path.resolve(__dirname, 'client/dist'),
},
optimization: {
chunkIds: "total-size",
moduleIds: "size",
chunkIds: 'total-size',
moduleIds: 'size',
mergeDuplicateChunks: true,
portableRecords: true,
sideEffects: true,
splitChunks: {
chunks: 'all',
},
minimizer: [
new CssMinimizerPlugin(),
new TerserPlugin({