@nestbotics/nct_frontend_common_components
Version:
A collection of reusable React components with theme management and styling utilities
629 lines (612 loc) • 18.5 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
var _excluded = ["sx", "icon", "children"],
_excluded2 = ["sx"],
_excluded3 = ["sx"],
_excluded4 = ["sx"],
_excluded5 = ["sx"],
_excluded6 = ["sx"],
_excluded7 = ["sx"],
_excluded8 = ["sx"],
_excluded9 = ["sx"],
_excluded0 = ["sx"],
_excluded1 = ["sx"],
_excluded10 = ["sx"],
_excluded11 = ["sx"],
_excluded12 = ["sx"],
_excluded13 = ["sx"],
_excluded14 = ["sx"],
_excluded15 = ["style"],
_excluded16 = ["style"],
_excluded17 = ["sx"],
_excluded18 = ["sx"],
_excluded19 = ["style"],
_excluded20 = ["style"],
_excluded21 = ["sx"],
_excluded22 = ["sx"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { forwardRef } from 'react';
import { useState, useCallback } from 'react';
import { Button as MuiButton, Card as MuiCard, CardContent as MuiCardContent, CardHeader as MuiCardHeader, Checkbox as MuiCheckbox, FormControlLabel as MuiFormControlLabel, Input as MuiInput, InputLabel as MuiInputLabel, MenuItem as MuiMenuItem, Select as MuiSelect, Switch as MuiSwitch, TextField as MuiTextField, Typography as MuiTypography, Dialog as MuiDialog, DialogTitle as MuiDialogTitle, DialogContent as MuiDialogContent, IconButton as MuiIconButton, DialogActions as MuiDialogActions, styled } from '@mui/material';
import { SxProps, Theme } from '@mui/material/styles';
import { Typography } from '@mui/material';
import AddPhotoAlternateIcon from '@mui/icons-material/AddPhotoAlternate';
import CloseIcon from '@mui/icons-material/Close';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
var mergeStyles = function mergeStyles(defaultStyles, customStyles) {
if (!customStyles) return defaultStyles;
return _objectSpread(_objectSpread({}, defaultStyles), customStyles);
};
// Button
var buttonStyles = {
borderRadius: '0.5rem',
textTransform: 'none',
fontWeight: 500,
boxShadow: 'none',
padding: '0.5rem 1rem',
'&:hover': {
boxShadow: 'none'
},
'&.MuiButton-contained': {
backgroundColor: 'primary.main',
color: 'primary.contrastText',
'&:hover': {
backgroundColor: 'primary.dark'
}
},
'&.MuiButton-outlined': {
borderColor: 'primary.main',
color: 'primary.main',
'&:hover': {
backgroundColor: 'primary.main',
color: 'primary.contrastText'
}
}
};
export var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
var sx = _ref.sx,
icon = _ref.icon,
children = _ref.children,
props = _objectWithoutProperties(_ref, _excluded);
return /*#__PURE__*/_jsx(MuiButton, _objectSpread(_objectSpread({
ref: ref,
sx: mergeStyles(buttonStyles, sx),
startIcon: icon // Use startIcon for icon placement before the text
}, props), {}, {
children: children
}));
});
// Card
var cardStyles = {
borderRadius: '0.75rem',
boxShadow: 'none',
border: '1px solid',
borderColor: 'divider'
};
export var Card = /*#__PURE__*/forwardRef(function (_ref2, ref) {
var sx = _ref2.sx,
props = _objectWithoutProperties(_ref2, _excluded2);
return /*#__PURE__*/_jsx(MuiCard, _objectSpread({
ref: ref,
sx: mergeStyles(cardStyles, sx)
}, props));
});
var cardHeaderStyles = {
padding: 3
};
export var CardHeader = /*#__PURE__*/forwardRef(function (_ref3, ref) {
var sx = _ref3.sx,
props = _objectWithoutProperties(_ref3, _excluded3);
return /*#__PURE__*/_jsx(MuiCardHeader, _objectSpread({
ref: ref,
sx: mergeStyles(cardHeaderStyles, sx)
}, props));
});
var cardContentStyles = {
padding: 3,
'&:last-child': {
paddingBottom: 3
}
};
export var CardContent = /*#__PURE__*/forwardRef(function (_ref4, ref) {
var sx = _ref4.sx,
props = _objectWithoutProperties(_ref4, _excluded4);
return /*#__PURE__*/_jsx(MuiCardContent, _objectSpread({
ref: ref,
sx: mergeStyles(cardContentStyles, sx)
}, props));
});
// Checkbox
var checkboxStyles = {
padding: 0.5,
color: 'text.secondary',
'&.Mui-checked': {
color: 'primary.main'
},
'& .MuiSvgIcon-root': {
fontSize: '1.25rem'
}
};
export var Checkbox = /*#__PURE__*/forwardRef(function (_ref5, ref) {
var sx = _ref5.sx,
props = _objectWithoutProperties(_ref5, _excluded5);
return /*#__PURE__*/_jsx(MuiCheckbox, _objectSpread({
ref: ref,
sx: mergeStyles(checkboxStyles, sx)
}, props));
});
// Input
var inputStyles = {
borderRadius: '0.375rem',
border: '1px solid',
borderColor: '#B3B3B3',
padding: '0.5rem 0.75rem',
backgroundColor: 'background.paper',
transition: 'border-color 0.2s, box-shadow 0.2s',
'&:hover': {
borderColor: 'text.primary'
},
'&.Mui-focused': {
borderColor: 'primary.main',
boxShadow: '0 0 0 2px',
boxShadowColor: 'primary.main'
}
};
export var Input = /*#__PURE__*/forwardRef(function (_ref6, ref) {
var sx = _ref6.sx,
props = _objectWithoutProperties(_ref6, _excluded6);
return /*#__PURE__*/_jsx(MuiInput, _objectSpread({
ref: ref,
disableUnderline: true,
sx: mergeStyles(inputStyles, sx)
}, props));
});
// InputLabel
var inputLabelStyles = {
marginBottom: 0.5,
fontSize: '0.875rem',
fontWeight: 500,
color: 'text.primary'
};
export var InputLabel = /*#__PURE__*/forwardRef(function (_ref7, ref) {
var sx = _ref7.sx,
props = _objectWithoutProperties(_ref7, _excluded7);
return /*#__PURE__*/_jsx(MuiInputLabel, _objectSpread({
ref: ref,
sx: mergeStyles(inputLabelStyles, sx)
}, props));
});
// Select
var selectStyles = {
borderRadius: '0.375rem',
'& .MuiOutlinedInput-notchedOutline': {
borderColor: '#B3B3B3'
},
'&:hover .MuiOutlinedInput-notchedOutline': {
borderColor: 'text.primary'
},
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
borderColor: 'primary.main',
boxShadow: '0 0 0 2px',
boxShadowColor: 'primary.main'
}
};
// dialogue
var dialogStyles = {
'& .MuiDialog-paper': {
borderRadius: '0.5rem',
boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
padding: '1.5rem'
}
};
export var Dialog = /*#__PURE__*/forwardRef(function (_ref8, ref) {
var sx = _ref8.sx,
props = _objectWithoutProperties(_ref8, _excluded8);
return /*#__PURE__*/_jsx(MuiDialog, _objectSpread({
ref: ref,
sx: mergeStyles(dialogStyles, sx)
}, props));
});
var dialogTitleStyles = {
padding: '0',
marginBottom: '1rem',
fontSize: '1.5rem',
fontWeight: 700,
color: 'text.primary'
};
export var DialogTitle = /*#__PURE__*/forwardRef(function (_ref9, ref) {
var sx = _ref9.sx,
props = _objectWithoutProperties(_ref9, _excluded9);
return /*#__PURE__*/_jsx(MuiDialogTitle, _objectSpread({
ref: ref,
sx: mergeStyles(dialogTitleStyles, sx)
}, props));
});
// DialogContent
var dialogContentStyles = {
padding: '0',
marginBottom: '1.5rem'
};
export var DialogContent = /*#__PURE__*/forwardRef(function (_ref0, ref) {
var sx = _ref0.sx,
props = _objectWithoutProperties(_ref0, _excluded0);
return /*#__PURE__*/_jsx(MuiDialogContent, _objectSpread({
ref: ref,
sx: mergeStyles(dialogContentStyles, sx)
}, props));
});
// DialogActions
var dialogActionsStyles = {
padding: '0',
justifyContent: 'flex-end'
};
export var DialogActions = /*#__PURE__*/forwardRef(function (_ref1, ref) {
var sx = _ref1.sx,
props = _objectWithoutProperties(_ref1, _excluded1);
return /*#__PURE__*/_jsx(MuiDialogActions, _objectSpread({
ref: ref,
sx: mergeStyles(dialogActionsStyles, sx)
}, props));
});
export var Select = /*#__PURE__*/forwardRef(function (_ref10, ref) {
var sx = _ref10.sx,
props = _objectWithoutProperties(_ref10, _excluded10);
return /*#__PURE__*/_jsx(MuiSelect, _objectSpread({
ref: ref,
sx: mergeStyles(selectStyles, sx)
}, props));
});
var menuItemStyles = {
fontSize: '0.875rem'
};
export var MenuItem = /*#__PURE__*/forwardRef(function (_ref11, ref) {
var sx = _ref11.sx,
props = _objectWithoutProperties(_ref11, _excluded11);
return /*#__PURE__*/_jsx(MuiMenuItem, _objectSpread({
ref: ref,
sx: mergeStyles(menuItemStyles, sx)
}, props));
});
// Switch
var switchStyles = {
width: 42,
height: 26,
padding: 0,
'& .MuiSwitch-switchBase': {
padding: 0,
margin: '2px',
transitionDuration: '300ms',
'&.Mui-checked': {
transform: 'translateX(16px)',
color: '#fff',
'& + .MuiSwitch-track': {
backgroundColor: 'primary.main',
opacity: 1,
border: 0
},
'&.Mui-disabled + .MuiSwitch-track': {
opacity: 0.5
}
},
'&.Mui-focusVisible .MuiSwitch-thumb': {
color: 'primary.main',
border: '6px solid #fff'
}
},
'& .MuiSwitch-thumb': {
boxSizing: 'border-box',
width: 22,
height: 22
},
'& .MuiSwitch-track': {
borderRadius: 13,
backgroundColor: 'grey.300',
opacity: 1,
transition: 'background-color 300ms'
}
};
export var Switch = /*#__PURE__*/forwardRef(function (_ref12, ref) {
var sx = _ref12.sx,
props = _objectWithoutProperties(_ref12, _excluded12);
return /*#__PURE__*/_jsx(MuiSwitch, _objectSpread({
ref: ref,
sx: mergeStyles(switchStyles, sx)
}, props));
});
// TextField
var textFieldStyles = {
'& .MuiOutlinedInput-root': {
borderRadius: '0.375rem',
'& fieldset': {
borderColor: '#B3B3B3'
},
'&:hover fieldset': {
borderColor: 'text.primary'
},
'&.Mui-focused fieldset': {
borderColor: 'primary.main',
boxShadow: '0 0 0 2px',
boxShadowColor: 'primary.main'
}
},
'& .MuiInputLabel-root': {
fontSize: '0.875rem',
'&.Mui-focused': {
color: 'primary.main'
}
}
};
export var TextField = /*#__PURE__*/forwardRef(function (_ref13, ref) {
var sx = _ref13.sx,
props = _objectWithoutProperties(_ref13, _excluded13);
return /*#__PURE__*/_jsx(MuiTextField, _objectSpread({
ref: ref,
sx: mergeStyles(textFieldStyles, sx)
}, props));
});
// Typography
var createStyledTypography = function createStyledTypography(variant) {
var styles = {
fontWeight: variant === 'h1' ? 800 : 700,
lineHeight: 1.2,
letterSpacing: '-0.025em',
color: 'text.primary'
};
return /*#__PURE__*/forwardRef(function (_ref14, ref) {
var sx = _ref14.sx,
props = _objectWithoutProperties(_ref14, _excluded14);
return /*#__PURE__*/_jsx(MuiTypography, _objectSpread({
ref: ref,
variant: variant,
sx: mergeStyles(styles, sx)
}, props));
});
};
export var H1 = createStyledTypography('h1');
export var H2 = createStyledTypography('h2');
export var H3 = createStyledTypography('h3');
export var H4 = createStyledTypography('h4');
// Form components
export var FormControl = /*#__PURE__*/forwardRef(function (_ref15, ref) {
var style = _ref15.style,
props = _objectWithoutProperties(_ref15, _excluded15);
return /*#__PURE__*/_jsx("div", _objectSpread({
ref: ref,
style: _objectSpread({
marginBottom: '16px'
}, style)
}, props));
});
export var FormLabel = /*#__PURE__*/forwardRef(function (_ref16, ref) {
var style = _ref16.style,
props = _objectWithoutProperties(_ref16, _excluded16);
return /*#__PURE__*/_jsx("label", _objectSpread({
ref: ref,
style: _objectSpread({
display: 'block',
marginBottom: '4px',
fontSize: '0.875rem',
fontWeight: 500
}, style)
}, props));
});
export var FormDescription = /*#__PURE__*/forwardRef(function (_ref17, ref) {
var sx = _ref17.sx,
props = _objectWithoutProperties(_ref17, _excluded17);
return /*#__PURE__*/_jsx(MuiTypography, _objectSpread({
ref: ref,
variant: "body2",
color: "textSecondary",
sx: mergeStyles({
mt: 0.5,
fontSize: '0.875rem'
}, sx)
}, props));
});
export var FormMessage = /*#__PURE__*/forwardRef(function (_ref18, ref) {
var sx = _ref18.sx,
props = _objectWithoutProperties(_ref18, _excluded18);
return /*#__PURE__*/_jsx(MuiTypography, _objectSpread({
ref: ref,
variant: "body2",
color: "error",
sx: mergeStyles({
mt: 0.5,
fontSize: '0.875rem'
}, sx)
}, props));
});
// Additional utility components
export var Flex = /*#__PURE__*/forwardRef(function (_ref19, ref) {
var style = _ref19.style,
props = _objectWithoutProperties(_ref19, _excluded19);
return /*#__PURE__*/_jsx("div", _objectSpread({
ref: ref,
style: _objectSpread({
display: 'flex'
}, style)
}, props));
});
export var Grid = /*#__PURE__*/forwardRef(function (_ref20, ref) {
var style = _ref20.style,
props = _objectWithoutProperties(_ref20, _excluded20);
return /*#__PURE__*/_jsx("div", _objectSpread({
ref: ref,
style: _objectSpread({
display: 'grid'
}, style)
}, props));
});
export var Box = /*#__PURE__*/forwardRef(function (props, ref) {
return /*#__PURE__*/_jsx("div", _objectSpread({
ref: ref
}, props));
});
export var FormControlLabel = /*#__PURE__*/forwardRef(function (_ref21, ref) {
var sx = _ref21.sx,
props = _objectWithoutProperties(_ref21, _excluded21);
return /*#__PURE__*/_jsx(MuiFormControlLabel, _objectSpread({
ref: ref,
sx: sx
}, props));
});
// Icon Button
var iconButtonStyles = {
borderRadius: '0.375rem',
padding: '0.5rem',
color: 'text.primary',
'&:hover': {
backgroundColor: 'action.hover'
},
'&:focus': {
outline: 'none',
boxShadow: '0 0 0 2px rgba(66, 153, 225, 0.5)'
}
};
export var IconButton = /*#__PURE__*/forwardRef(function (_ref22, ref) {
var sx = _ref22.sx,
props = _objectWithoutProperties(_ref22, _excluded22);
return /*#__PURE__*/_jsx(MuiIconButton, _objectSpread({
ref: ref,
sx: mergeStyles(iconButtonStyles, sx)
}, props));
});
var UploadBox = styled(Box)(function (_ref23) {
var theme = _ref23.theme;
return {
width: '100%',
aspectRatio: '1/1',
maxWidth: '400px',
border: "2px dashed ".concat(theme.palette.grey[300]),
borderRadius: theme.shape.borderRadius,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer',
transition: 'all 0.2s ease-in-out',
backgroundColor: theme.palette.grey[50],
position: 'relative',
'&:hover': {
borderColor: theme.palette.primary.main,
backgroundColor: theme.palette.grey[100]
}
};
});
var PreviewImage = styled('img')({
width: '100%',
height: '100%',
objectFit: 'cover',
borderRadius: 'inherit'
});
var HiddenInput = styled('input')({
display: 'none'
});
export function UploadImage() {
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
image = _useState2[0],
setImage = _useState2[1];
var _useState3 = useState(null),
_useState4 = _slicedToArray(_useState3, 2),
preview = _useState4[0],
setPreview = _useState4[1];
var handleDrop = useCallback(function (e) {
e.preventDefault();
var file = e.dataTransfer.files[0];
handleFile(file);
}, []);
var handleFile = function handleFile(file) {
if (file && file.type.startsWith('image/')) {
setImage(file);
var reader = new FileReader();
reader.onloadend = function () {
setPreview(reader);
};
reader.readAsDataURL(file);
}
};
var handleChange = function handleChange(e) {
var _e$target$files;
if ((_e$target$files = e.target.files) !== null && _e$target$files !== void 0 && _e$target$files[0]) {
handleFile(e.target.files[0]);
}
};
var removeImage = function removeImage(e) {
e.stopPropagation();
setImage(null);
setPreview(null);
};
return /*#__PURE__*/_jsxs(Box, {
sx: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: 2,
p: 2
},
children: [/*#__PURE__*/_jsx(UploadBox, {
onDrop: handleDrop,
onDragOver: function onDragOver(e) {
return e.preventDefault();
},
onClick: function onClick() {
var _document$getElementB;
return (_document$getElementB = document.getElementById('image-input')) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.click();
},
children: !preview ? /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(AddPhotoAlternateIcon, {
sx: {
fontSize: 40,
color: 'grey.400',
mb: 1
}
}), /*#__PURE__*/_jsx(Typography, {
variant: "body2",
color: "text.secondary",
sx: {
px: 2,
textAlign: 'center'
},
children: "Click or drag image to upload"
}), /*#__PURE__*/_jsx(HiddenInput, {
id: "image-input",
type: "file",
accept: "image/*",
onChange: handleChange
})]
}) : /*#__PURE__*/_jsxs(Box, {
sx: {
position: 'relative',
width: '100%',
height: '100%'
},
children: [/*#__PURE__*/_jsx(PreviewImage, {
src: preview,
alt: "Preview"
}), /*#__PURE__*/_jsx(IconButton, {
onClick: removeImage,
sx: {
position: 'absolute',
top: 8,
right: 8,
backgroundColor: 'rgba(255, 255, 255, 0.8)',
'&:hover': {
backgroundColor: 'rgba(255, 255, 255, 0.9)'
}
},
size: "small",
children: /*#__PURE__*/_jsx(CloseIcon, {
fontSize: "small"
})
})]
})
}), image && /*#__PURE__*/_jsxs(Typography, {
variant: "caption",
color: "text.secondary",
children: [image.name, " (", Math.round(image.size / 1024), " KB)"]
})]
});
}