chore: bump to v7

This commit is contained in:
Rafael Taranto 2025-05-12 08:27:42 +01:00
parent 7fbd51cb7e
commit 2fb100d99c
16 changed files with 1579 additions and 1305 deletions

File diff suppressed because it is too large Load diff

View file

@ -5,11 +5,9 @@
"type": "module",
"dependencies": {
"@apollo/client": "^3.13.7",
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0",
"@lamassu/coins": "v1.6.1",
"@mui/icons-material": "^5.17.1",
"@mui/material": "^5.17.1",
"@mui/icons-material": "^7.1.0",
"@mui/material": "^7.1.0",
"@simplewebauthn/browser": "^3.0.0",
"apollo-upload-client": "^18.0.0",
"bignumber.js": "9.0.0",
@ -32,7 +30,6 @@
"react-copy-to-clipboard": "^5.0.2",
"react-dom": "17.0.2",
"react-dropzone": "^11.4.2",
"react-material-ui-carousel": "^3.4.2",
"react-number-format": "^4.4.1",
"react-otp-input": "3.1.1",
"react-router-dom": "5.1.2",

View file

@ -25,7 +25,7 @@ const App = () => {
value={{ wizardTested, setWizardTested, userData, setUserData, setRole }}>
<Router>
<ApolloProvider>
<StyledEngineProvider injectFirst>
<StyledEngineProvider enableCssLayer>
<ThemeProvider theme={theme}>
<CssBaseline />
<Main />

View file

@ -1,45 +1,48 @@
import React, { memo } from 'react'
import ReactCarousel from 'react-material-ui-carousel'
import React, { memo, useState } from 'react'
import styles from './Carousel.module.css'
import LeftArrow from 'src/styling/icons/arrow/carousel-left-arrow.svg?react'
import RightArrow from 'src/styling/icons/arrow/carousel-right-arrow.svg?react'
export const Carousel = memo(({ photosData, slidePhoto }) => {
const [activeIndex, setActiveIndex] = useState(0)
const handlePrev = () => {
const newIndex = activeIndex === 0 ? photosData.length - 1 : activeIndex - 1
setActiveIndex(newIndex)
slidePhoto(newIndex)
}
const handleNext = () => {
const newIndex = activeIndex === photosData.length - 1 ? 0 : activeIndex + 1
setActiveIndex(newIndex)
slidePhoto(newIndex)
}
if (!photosData || photosData.length === 0) {
return null
}
return (
<>
<ReactCarousel
PrevIcon={<LeftArrow />}
NextIcon={<RightArrow />}
navButtonsProps={{
style: {
backgroundColor: 'transparent',
borderRadius: 0,
color: 'transparent',
opacity: 1
}
}}
navButtonsWrapperProps={{
style: {
marginLeft: -22,
marginRight: -22
}
}}
autoPlay={false}
indicators={false}
navButtonsAlwaysVisible={true}
next={activeIndex => slidePhoto(activeIndex)}
prev={activeIndex => slidePhoto(activeIndex)}>
{photosData.map((item, i) => (
<div key={i}>
<div className="items-center justify-center flex">
<div className={styles.carouselContainer}>
{photosData.length > 1 && (
<button onClick={handlePrev} className={styles.navButton}>
<LeftArrow />
</button>
)}
<div className={styles.imageContainer}>
<img
className="object-contain object-center w-75 h-100 mb-10"
src={`/${item?.photoDir}/${item?.path}`}
className={styles.image}
src={`/${photosData[activeIndex]?.photoDir}/${photosData[activeIndex]?.path}`}
alt=""
/>
</div>
{photosData.length > 1 && (
<button onClick={handleNext} className={styles.navButton}>
<RightArrow />
</button>
)}
</div>
))}
</ReactCarousel>
</>
)
})

View file

@ -0,0 +1,45 @@
.carouselContainer {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.imageContainer {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
height: 100%;
overflow: hidden;
max-width: 80%;
}
.image {
object-fit: contain;
object-position: center;
width: 100%;
height: 100%;
margin-bottom: 40px;
}
.navButton {
background-color: transparent;
border: none;
border-radius: 0;
color: transparent;
opacity: 1;
cursor: pointer;
padding: 8px;
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.navButton:hover {
background-color: rgba(0, 0, 0, 0.04);
}

View file

@ -68,7 +68,7 @@ const CopyToClipboard = ({
</>
)}
</div>
)
);
}
export default CopyToClipboard

View file

@ -47,14 +47,6 @@ const SearchBox = memo(
multiple
filterSelectedOptions
isOptionEqualToValue={(option, value) => option.type === value.type}
PaperComponent={({ children }) => (
<Paper
elevation={0}
className="flex flex-col rounded-b-xl bg-zircon shadow-2xl">
<div className="w-[88%] h-[1px] my-p mx-auto border-1 border-comet" />
{children}
</Paper>
)}
renderInput={params => {
return (
<InputBase
@ -74,8 +66,17 @@ const SearchBox = memo(
onClose={() => setPopupOpen(false)}
onChange={(_, filters) => innerOnChange(filters)}
{...props}
/>
slots={{
paper: ({ children }) => (
<Paper
elevation={0}
className="flex flex-col rounded-b-xl bg-zircon shadow-2xl">
<div className="w-[88%] h-[1px] my-p mx-auto border-1 border-comet" />
{children}
</Paper>
)
}} />
);
}
)

View file

@ -37,6 +37,7 @@ const SearchFilter = ({
)}`}</Label3>
}
<ActionButton
altTextColor
color="secondary"
Icon={ReverseFilterIcon}
InverseIcon={FilterIcon}

View file

@ -4,9 +4,19 @@ import React, { memo } from 'react'
import moduleStyles from './ActionButton.module.css'
const ActionButton = memo(
({ className, Icon, InverseIcon, color, center, children, ...props }) => {
({
className,
altTextColor,
Icon,
InverseIcon,
color,
center,
children,
...props
}) => {
const classNames = {
[moduleStyles.actionButton]: true,
[moduleStyles.altText]: altTextColor,
[moduleStyles.primary]: color === 'primary',
[moduleStyles.secondary]: color === 'secondary',
[moduleStyles.spring]: color === 'spring',

View file

@ -8,8 +8,10 @@
padding: 0 8px;
display: flex;
align-items: center;
/*TODO important is a hack while we don't have a better way of handling overrides of 'composes'*/
color: white !important;
}
.actionButton.altText {
color: white;
}
.primary {

View file

@ -80,7 +80,6 @@ const Autocomplete = ({
openOnFocus
autoHighlight
disableClearable
ChipProps={{ onDelete: null }}
clearOnEscape
isOptionEqualToValue={R.eqProps(valueProp)}
{...props}
@ -122,8 +121,10 @@ const Autocomplete = ({
</li>
)
}}
/>
)
slotProps={{
chip: { onDelete: null }
}} />
);
}
export default Autocomplete

View file

@ -53,8 +53,9 @@ const TextInput = memo(
value={value}
className={className}
style={style}
inputProps={{ style: { textAlign } }}
InputProps={{
{...props}
slotProps={{
input: {
className: classnames(divClass),
classes: {
root: sizeClass,
@ -62,10 +63,11 @@ const TextInput = memo(
input: inputClasses
},
...InputProps
}}
{...props}
/>
)
},
htmlInput: { style: { textAlign } }
}} />
);
}
)

View file

@ -1,15 +1,12 @@
.size {
margin-top: 2px;
font-size: 16px;
}
.sizeSm {
margin-top: 2px;
font-size: 14px;
}
.sizeLg {
margin-top: 0;
font-size: 24px;
font-weight: 700;
}

View file

@ -149,6 +149,7 @@ const Header = memo(({ tree, user }) => {
</nav>
<div className={styles.actionButtonsContainer}>
<ActionButton
altTextColor
color="secondary"
Icon={AddIcon}
InverseIcon={AddIconReverse}

View file

@ -1,25 +0,0 @@
import List from '@mui/material/List'
import ListItem from '@mui/material/ListItem'
import ListItemText from '@mui/material/ListItemText'
import React from 'react'
const MachineSidebar = ({ data, getText, getKey, isSelected, selectItem }) => {
return (
<List className="h-100 overflow-y-auto">
{data.map((item, idx) => {
return (
<ListItem
disableRipple
key={getKey(item) + idx}
button
selected={isSelected(getText(item))}
onClick={() => selectItem(getText(item))}>
<ListItemText primary={getText(item)} />
</ListItem>
)
})}
</List>
)
}
export default MachineSidebar

View file

@ -1,8 +1,7 @@
@import "./fonts.css";
/*@tailwind setup with no preflighrt*/
/* TODO remove important after mui v6 migration*/
@layer theme, base, components, utilities;
/* TODO remove important */
@layer theme, base, mui, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities) important;