@nestbotics/nct_frontend_common_components
Version:
A collection of reusable React components with theme management and styling utilities
638 lines (620 loc) • 21.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TextField = exports.Switch = exports.Select = exports.MenuItem = exports.InputLabel = exports.Input = exports.IconButton = exports.H4 = exports.H3 = exports.H2 = exports.H1 = exports.Grid = exports.FormMessage = exports.FormLabel = exports.FormDescription = exports.FormControlLabel = exports.FormControl = exports.Flex = exports.DialogTitle = exports.DialogContent = exports.DialogActions = exports.Dialog = exports.Checkbox = exports.CardHeader = exports.CardContent = exports.Card = exports.Button = exports.Box = void 0;
exports.UploadImage = UploadImage;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _material = require("@mui/material");
var _styles = require("@mui/material/styles");
var _AddPhotoAlternate = _interopRequireDefault(require("@mui/icons-material/AddPhotoAlternate"));
var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
var _jsxRuntime = require("react/jsx-runtime");
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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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) { (0, _defineProperty2.default)(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; }
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'
}
}
};
var Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
var sx = _ref.sx,
icon = _ref.icon,
children = _ref.children,
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, _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'
};
var Card = exports.Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
var sx = _ref2.sx,
props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Card, _objectSpread({
ref: ref,
sx: mergeStyles(cardStyles, sx)
}, props));
});
var cardHeaderStyles = {
padding: 3
};
var CardHeader = exports.CardHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref3, ref) {
var sx = _ref3.sx,
props = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CardHeader, _objectSpread({
ref: ref,
sx: mergeStyles(cardHeaderStyles, sx)
}, props));
});
var cardContentStyles = {
padding: 3,
'&:last-child': {
paddingBottom: 3
}
};
var CardContent = exports.CardContent = /*#__PURE__*/(0, _react.forwardRef)(function (_ref4, ref) {
var sx = _ref4.sx,
props = (0, _objectWithoutProperties2.default)(_ref4, _excluded4);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CardContent, _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'
}
};
var Checkbox = exports.Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref5, ref) {
var sx = _ref5.sx,
props = (0, _objectWithoutProperties2.default)(_ref5, _excluded5);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Checkbox, _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'
}
};
var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref6, ref) {
var sx = _ref6.sx,
props = (0, _objectWithoutProperties2.default)(_ref6, _excluded6);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Input, _objectSpread({
ref: ref,
disableUnderline: true,
sx: mergeStyles(inputStyles, sx)
}, props));
});
// InputLabel
var inputLabelStyles = {
marginBottom: 0.5,
fontSize: '0.875rem',
fontWeight: 500,
color: 'text.primary'
};
var InputLabel = exports.InputLabel = /*#__PURE__*/(0, _react.forwardRef)(function (_ref7, ref) {
var sx = _ref7.sx,
props = (0, _objectWithoutProperties2.default)(_ref7, _excluded7);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputLabel, _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'
}
};
var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function (_ref8, ref) {
var sx = _ref8.sx,
props = (0, _objectWithoutProperties2.default)(_ref8, _excluded8);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Dialog, _objectSpread({
ref: ref,
sx: mergeStyles(dialogStyles, sx)
}, props));
});
var dialogTitleStyles = {
padding: '0',
marginBottom: '1rem',
fontSize: '1.5rem',
fontWeight: 700,
color: 'text.primary'
};
var DialogTitle = exports.DialogTitle = /*#__PURE__*/(0, _react.forwardRef)(function (_ref9, ref) {
var sx = _ref9.sx,
props = (0, _objectWithoutProperties2.default)(_ref9, _excluded9);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.DialogTitle, _objectSpread({
ref: ref,
sx: mergeStyles(dialogTitleStyles, sx)
}, props));
});
// DialogContent
var dialogContentStyles = {
padding: '0',
marginBottom: '1.5rem'
};
var DialogContent = exports.DialogContent = /*#__PURE__*/(0, _react.forwardRef)(function (_ref0, ref) {
var sx = _ref0.sx,
props = (0, _objectWithoutProperties2.default)(_ref0, _excluded0);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.DialogContent, _objectSpread({
ref: ref,
sx: mergeStyles(dialogContentStyles, sx)
}, props));
});
// DialogActions
var dialogActionsStyles = {
padding: '0',
justifyContent: 'flex-end'
};
var DialogActions = exports.DialogActions = /*#__PURE__*/(0, _react.forwardRef)(function (_ref1, ref) {
var sx = _ref1.sx,
props = (0, _objectWithoutProperties2.default)(_ref1, _excluded1);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.DialogActions, _objectSpread({
ref: ref,
sx: mergeStyles(dialogActionsStyles, sx)
}, props));
});
var Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref10, ref) {
var sx = _ref10.sx,
props = (0, _objectWithoutProperties2.default)(_ref10, _excluded10);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Select, _objectSpread({
ref: ref,
sx: mergeStyles(selectStyles, sx)
}, props));
});
var menuItemStyles = {
fontSize: '0.875rem'
};
var MenuItem = exports.MenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref11, ref) {
var sx = _ref11.sx,
props = (0, _objectWithoutProperties2.default)(_ref11, _excluded11);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, _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'
}
};
var Switch = exports.Switch = /*#__PURE__*/(0, _react.forwardRef)(function (_ref12, ref) {
var sx = _ref12.sx,
props = (0, _objectWithoutProperties2.default)(_ref12, _excluded12);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Switch, _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'
}
}
};
var TextField = exports.TextField = /*#__PURE__*/(0, _react.forwardRef)(function (_ref13, ref) {
var sx = _ref13.sx,
props = (0, _objectWithoutProperties2.default)(_ref13, _excluded13);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, _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__*/(0, _react.forwardRef)(function (_ref14, ref) {
var sx = _ref14.sx,
props = (0, _objectWithoutProperties2.default)(_ref14, _excluded14);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, _objectSpread({
ref: ref,
variant: variant,
sx: mergeStyles(styles, sx)
}, props));
});
};
var H1 = exports.H1 = createStyledTypography('h1');
var H2 = exports.H2 = createStyledTypography('h2');
var H3 = exports.H3 = createStyledTypography('h3');
var H4 = exports.H4 = createStyledTypography('h4');
// Form components
var FormControl = exports.FormControl = /*#__PURE__*/(0, _react.forwardRef)(function (_ref15, ref) {
var style = _ref15.style,
props = (0, _objectWithoutProperties2.default)(_ref15, _excluded15);
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread({
ref: ref,
style: _objectSpread({
marginBottom: '16px'
}, style)
}, props));
});
var FormLabel = exports.FormLabel = /*#__PURE__*/(0, _react.forwardRef)(function (_ref16, ref) {
var style = _ref16.style,
props = (0, _objectWithoutProperties2.default)(_ref16, _excluded16);
return /*#__PURE__*/(0, _jsxRuntime.jsx)("label", _objectSpread({
ref: ref,
style: _objectSpread({
display: 'block',
marginBottom: '4px',
fontSize: '0.875rem',
fontWeight: 500
}, style)
}, props));
});
var FormDescription = exports.FormDescription = /*#__PURE__*/(0, _react.forwardRef)(function (_ref17, ref) {
var sx = _ref17.sx,
props = (0, _objectWithoutProperties2.default)(_ref17, _excluded17);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, _objectSpread({
ref: ref,
variant: "body2",
color: "textSecondary",
sx: mergeStyles({
mt: 0.5,
fontSize: '0.875rem'
}, sx)
}, props));
});
var FormMessage = exports.FormMessage = /*#__PURE__*/(0, _react.forwardRef)(function (_ref18, ref) {
var sx = _ref18.sx,
props = (0, _objectWithoutProperties2.default)(_ref18, _excluded18);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, _objectSpread({
ref: ref,
variant: "body2",
color: "error",
sx: mergeStyles({
mt: 0.5,
fontSize: '0.875rem'
}, sx)
}, props));
});
// Additional utility components
var Flex = exports.Flex = /*#__PURE__*/(0, _react.forwardRef)(function (_ref19, ref) {
var style = _ref19.style,
props = (0, _objectWithoutProperties2.default)(_ref19, _excluded19);
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread({
ref: ref,
style: _objectSpread({
display: 'flex'
}, style)
}, props));
});
var Grid = exports.Grid = /*#__PURE__*/(0, _react.forwardRef)(function (_ref20, ref) {
var style = _ref20.style,
props = (0, _objectWithoutProperties2.default)(_ref20, _excluded20);
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread({
ref: ref,
style: _objectSpread({
display: 'grid'
}, style)
}, props));
});
var Box = exports.Box = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread({
ref: ref
}, props));
});
var FormControlLabel = exports.FormControlLabel = /*#__PURE__*/(0, _react.forwardRef)(function (_ref21, ref) {
var sx = _ref21.sx,
props = (0, _objectWithoutProperties2.default)(_ref21, _excluded21);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, _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)'
}
};
var IconButton = exports.IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref22, ref) {
var sx = _ref22.sx,
props = (0, _objectWithoutProperties2.default)(_ref22, _excluded22);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, _objectSpread({
ref: ref,
sx: mergeStyles(iconButtonStyles, sx)
}, props));
});
var UploadBox = (0, _material.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 = (0, _material.styled)('img')({
width: '100%',
height: '100%',
objectFit: 'cover',
borderRadius: 'inherit'
});
var HiddenInput = (0, _material.styled)('input')({
display: 'none'
});
function UploadImage() {
var _useState = (0, _react.useState)(null),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
image = _useState2[0],
setImage = _useState2[1];
var _useState3 = (0, _react.useState)(null),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
preview = _useState4[0],
setPreview = _useState4[1];
var handleDrop = (0, _react.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__*/(0, _jsxRuntime.jsxs)(Box, {
sx: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: 2,
p: 2
},
children: [/*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AddPhotoAlternate.default, {
sx: {
fontSize: 40,
color: 'grey.400',
mb: 1
}
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
variant: "body2",
color: "text.secondary",
sx: {
px: 2,
textAlign: 'center'
},
children: "Click or drag image to upload"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(HiddenInput, {
id: "image-input",
type: "file",
accept: "image/*",
onChange: handleChange
})]
}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(Box, {
sx: {
position: 'relative',
width: '100%',
height: '100%'
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PreviewImage, {
src: preview,
alt: "Preview"
}), /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_Close.default, {
fontSize: "small"
})
})]
})
}), image && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
variant: "caption",
color: "text.secondary",
children: [image.name, " (", Math.round(image.size / 1024), " KB)"]
})]
});
}