ece-docs-components 1.0.17 → 1.0.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/Modal.js +52 -55
- package/dist/cjs/components/Modal.js.map +1 -1
- package/dist/cjs/components/NoteBox.js +81 -59
- package/dist/cjs/components/NoteBox.js.map +1 -1
- package/dist/esm/components/Modal.d.ts +4 -5
- package/dist/esm/components/Modal.js +55 -58
- package/dist/esm/components/Modal.js.map +1 -1
- package/dist/esm/components/NoteBox.d.ts +2 -1
- package/dist/esm/components/NoteBox.js +82 -60
- package/dist/esm/components/NoteBox.js.map +1 -1
- package/package.json +1 -1
|
@@ -5,7 +5,16 @@ var React = require('react');
|
|
|
5
5
|
var material = require('@mui/material');
|
|
6
6
|
var Button = require('./Button.js');
|
|
7
7
|
var iconsMaterial = require('@mui/icons-material');
|
|
8
|
+
var Alert = require('./Alert.js');
|
|
8
9
|
|
|
10
|
+
var VariableState;
|
|
11
|
+
(function (VariableState) {
|
|
12
|
+
VariableState["Accepted"] = "Accepted";
|
|
13
|
+
VariableState["Pending"] = "Pending";
|
|
14
|
+
VariableState["Rejected"] = "Rejected";
|
|
15
|
+
VariableState["NotAccepted"] = "Not Accepted";
|
|
16
|
+
VariableState["Draft"] = "Draft";
|
|
17
|
+
})(VariableState || (VariableState = {}));
|
|
9
18
|
const StyledDialog = material.styled(material.Dialog)(({ theme }) => ({
|
|
10
19
|
'& .MuiDialog-paper': {
|
|
11
20
|
color: theme.palette.background.default,
|
|
@@ -30,74 +39,62 @@ const NavButton = material.styled(material.IconButton)(({ theme }) => ({
|
|
|
30
39
|
borderColor: theme.palette.dark.main, // Keep border dark
|
|
31
40
|
},
|
|
32
41
|
}));
|
|
33
|
-
|
|
42
|
+
function mapStatusToVariableState(status) {
|
|
43
|
+
switch (status) {
|
|
44
|
+
case "Accepted":
|
|
45
|
+
return VariableState.Accepted;
|
|
46
|
+
case "Pending":
|
|
47
|
+
return VariableState.Pending;
|
|
48
|
+
case "Rejected":
|
|
49
|
+
return VariableState.Rejected;
|
|
50
|
+
case "Not Accepted":
|
|
51
|
+
return VariableState.NotAccepted;
|
|
52
|
+
case "Draft":
|
|
53
|
+
return VariableState.Draft;
|
|
54
|
+
default:
|
|
55
|
+
return undefined;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
const Modal = ({ isOpen, onClose, status, description, defaultText, note, onSave, onSubmit, onDeclineWording, onPrevious, onNext, currentPage = 1, totalPages = 1, isLoading }) => {
|
|
34
59
|
const [textValue, setTextValue] = React.useState(defaultText);
|
|
35
60
|
const [useDefaultValue, setUseDefaultValue] = React.useState(true);
|
|
36
61
|
const handleUseDefaultValueChange = (event) => {
|
|
37
62
|
setUseDefaultValue(event.target.checked);
|
|
38
63
|
};
|
|
64
|
+
const variableState = mapStatusToVariableState(status);
|
|
39
65
|
const statusConfig = {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
},
|
|
44
|
-
|
|
45
|
-
color: '#F5D76E',
|
|
46
|
-
label: 'Optional',
|
|
47
|
-
},
|
|
48
|
-
accepted: {
|
|
49
|
-
color: '#A3D977',
|
|
50
|
-
label: 'Accepted',
|
|
51
|
-
},
|
|
52
|
-
'action-required': {
|
|
53
|
-
color: '#F56B6B',
|
|
54
|
-
label: 'Action Required',
|
|
55
|
-
},
|
|
56
|
-
'action-required-note': {
|
|
57
|
-
color: '#F56B6B',
|
|
58
|
-
label: 'Action Required',
|
|
59
|
-
},
|
|
60
|
-
'accepted-note': {
|
|
61
|
-
color: '#A3D977',
|
|
62
|
-
label: 'Accepted',
|
|
63
|
-
},
|
|
66
|
+
[VariableState.Pending]: { color: '#F5A623', label: 'Pending' },
|
|
67
|
+
[VariableState.Draft]: { color: '#F5D76E', label: 'Draft' },
|
|
68
|
+
[VariableState.NotAccepted]: { color: '#A3D977', label: 'Not Accepted' },
|
|
69
|
+
[VariableState.Rejected]: { color: '#F56B6B', label: 'Rejected' },
|
|
70
|
+
[VariableState.Accepted]: { color: '#A3D977', label: 'Accepted' },
|
|
64
71
|
};
|
|
65
|
-
const statusStyle = statusConfig[
|
|
66
|
-
|
|
72
|
+
const statusStyle = variableState ? statusConfig[variableState] : { color: '#ccc', label: 'Unknown' };
|
|
73
|
+
const handleSave = () => {
|
|
74
|
+
onSave?.(textValue, useDefaultValue);
|
|
75
|
+
};
|
|
76
|
+
const handleSubmit = () => {
|
|
77
|
+
onSubmit?.(textValue, useDefaultValue);
|
|
78
|
+
};
|
|
79
|
+
return (jsxRuntime.jsxs(StyledDialog, { open: isOpen, onClose: onClose, maxWidth: "md", fullWidth: true, children: [jsxRuntime.jsx(material.IconButton, { onClick: onClose, disabled: isLoading, sx: {
|
|
67
80
|
position: 'absolute',
|
|
68
81
|
top: 16,
|
|
69
82
|
right: 16,
|
|
70
83
|
zIndex: 1,
|
|
71
84
|
}, children: jsxRuntime.jsx(iconsMaterial.CloseRounded, { sx: { fontSize: 24 } }) }), jsxRuntime.jsxs(material.DialogContent, { sx: { p: { xs: 3, sm: 4, md: 6 } }, children: [jsxRuntime.jsx(material.Box, { sx: { mb: 3 }, children: jsxRuntime.jsx(material.Chip, { label: statusStyle.label.toUpperCase(), sx: {
|
|
72
85
|
backgroundColor: statusStyle.color,
|
|
73
|
-
color: status === '
|
|
86
|
+
color: status === 'Not Accepted' || status === 'Pending' ? '#4D3019' : '#fff',
|
|
74
87
|
fontWeight: 600,
|
|
75
88
|
fontSize: '0.875rem',
|
|
76
89
|
height: 'auto',
|
|
77
90
|
py: 1,
|
|
78
91
|
borderRadius: 0,
|
|
79
92
|
px: 2,
|
|
80
|
-
} }) }), jsxRuntime.jsx(material.Typography, { sx: { mb: 3, lineHeight: 1.6, whiteSpace: 'pre-line' }, children: description }), status === '
|
|
81
|
-
mb: 2
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
color: '#F56B6B',
|
|
86
|
-
},
|
|
87
|
-
'& .MuiAlert-message': {
|
|
88
|
-
color: '#4D3019',
|
|
89
|
-
},
|
|
90
|
-
}, children: note })), status === 'accepted-note' && note && (jsxRuntime.jsx(material.Alert, { icon: jsxRuntime.jsx(iconsMaterial.StickyNote2Rounded, { sx: { fontSize: 20 } }), severity: "warning", sx: {
|
|
91
|
-
mb: 2,
|
|
92
|
-
backgroundColor: '#FDFCEE',
|
|
93
|
-
borderLeft: '4px solid #F5D76E',
|
|
94
|
-
'& .MuiAlert-icon': {
|
|
95
|
-
color: '#F5A623',
|
|
96
|
-
},
|
|
97
|
-
'& .MuiAlert-message': {
|
|
98
|
-
color: '#4D3019',
|
|
99
|
-
},
|
|
100
|
-
}, children: note })), jsxRuntime.jsx(material.TextField, { multiline: true, rows: 6, fullWidth: true, value: textValue, onChange: (e) => setTextValue(e.target.value), disabled: useDefaultValue, sx: {
|
|
93
|
+
} }) }), jsxRuntime.jsx(material.Typography, { sx: { mb: 3, lineHeight: 1.6, whiteSpace: 'pre-line' }, children: description }), status === 'Rejected' && note && (jsxRuntime.jsx(Alert.Alert, { variant: "error", sx: {
|
|
94
|
+
mb: 2
|
|
95
|
+
}, children: note })), status === 'Pending' && note && (jsxRuntime.jsx(Alert.Alert, { variant: "info", sx: {
|
|
96
|
+
mb: 2
|
|
97
|
+
}, children: note })), jsxRuntime.jsx(material.TextField, { multiline: true, rows: 6, fullWidth: true, value: textValue, onChange: (e) => setTextValue(e.target.value), disabled: useDefaultValue || isLoading, sx: {
|
|
101
98
|
mb: 2,
|
|
102
99
|
'& .MuiOutlinedInput-root': {
|
|
103
100
|
backgroundColor: useDefaultValue ? 'rgba(0, 0, 0, 0.05)' : '#fff',
|
|
@@ -117,22 +114,22 @@ const Modal = ({ isOpen, onClose, status, description, defaultText, note, accept
|
|
|
117
114
|
pt: 3,
|
|
118
115
|
borderTop: '1px solid',
|
|
119
116
|
borderColor: 'divider',
|
|
120
|
-
}, children: [jsxRuntime.jsxs(material.Box, { sx: { display: 'flex', gap: 1.5, flexWrap: 'wrap' }, children: [jsxRuntime.jsx(Button.Button, { onClick:
|
|
117
|
+
}, children: [jsxRuntime.jsxs(material.Box, { sx: { display: 'flex', gap: 1.5, flexWrap: 'wrap' }, children: [jsxRuntime.jsx(Button.Button, { onClick: handleSave, variant: "outline", size: "md", disabled: isLoading, children: isLoading ? jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.CircularProgress, { size: 20 }), jsxRuntime.jsx(material.Typography, { sx: { paddingLeft: 2 }, children: "Saving..." })] }) : "Save" }), jsxRuntime.jsx(Button.Button, { onClick: handleSubmit, variant: "outline", size: "md", disabled: isLoading, sx: {
|
|
121
118
|
backgroundColor: '#ac46ff52',
|
|
122
119
|
'&:hover': {
|
|
123
|
-
backgroundColor: '#ac46ff80',
|
|
124
|
-
}
|
|
125
|
-
}, children: "Submit for review" }), jsxRuntime.jsx(Button.Button, { onClick: onDeclineWording, variant: "outline", size: "md", sx: {
|
|
120
|
+
backgroundColor: '#ac46ff80',
|
|
121
|
+
},
|
|
122
|
+
}, children: isLoading ? jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.CircularProgress, { size: 20 }), jsxRuntime.jsx(material.Typography, { sx: { paddingLeft: 2 }, children: "Submitting..." })] }) : "Submit for review" }), jsxRuntime.jsx(Button.Button, { onClick: onDeclineWording, variant: "outline", size: "md", sx: {
|
|
126
123
|
backgroundColor: '#ff464652',
|
|
127
124
|
'&:hover': {
|
|
128
125
|
backgroundColor: '#ff464680', // Darker purple on hover
|
|
129
126
|
}
|
|
130
|
-
}, children: "Decline wording" })] }), jsxRuntime.jsxs(material.Box, { sx: {
|
|
127
|
+
}, disabled: isLoading, children: "Decline wording" })] }), jsxRuntime.jsxs(material.Box, { sx: {
|
|
131
128
|
display: 'flex',
|
|
132
129
|
alignItems: 'center',
|
|
133
130
|
gap: 1.5,
|
|
134
131
|
justifyContent: { xs: 'space-between', sm: 'flex-end' },
|
|
135
|
-
}, children: [jsxRuntime.jsxs(material.Typography, { fontWeight: 500, fontSize: "1.125rem", children: [currentPage, "/", totalPages] }), jsxRuntime.jsx(NavButton, { onClick: onPrevious, "aria-label": "Previous", children: jsxRuntime.jsx(material.Typography, { sx: { fontSize: 16, fontWeight: 500 }, children: "Previous" }) }), jsxRuntime.jsx(NavButton, { onClick: onNext, "aria-label": "Next", children: jsxRuntime.jsx(material.Typography, { sx: { fontSize: 16, fontWeight: 500 }, children: "Next" }) })] })] })] })] }));
|
|
132
|
+
}, children: [jsxRuntime.jsxs(material.Typography, { fontWeight: 500, fontSize: "1.125rem", children: [currentPage, "/", totalPages] }), jsxRuntime.jsx(NavButton, { onClick: onPrevious, "aria-label": "Previous", disabled: isLoading, children: jsxRuntime.jsx(material.Typography, { sx: { fontSize: 16, fontWeight: 500 }, children: "Previous" }) }), jsxRuntime.jsx(NavButton, { onClick: onNext, "aria-label": "Next", disabled: isLoading, children: jsxRuntime.jsx(material.Typography, { sx: { fontSize: 16, fontWeight: 500 }, children: "Next" }) })] })] })] })] }));
|
|
136
133
|
};
|
|
137
134
|
|
|
138
135
|
exports.Modal = Modal;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sources":["../../../../src/components/Modal.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n Dialog,\n DialogContent,\n IconButton,\n Box,\n Typography,\n TextField,\n Checkbox,\n FormControlLabel,\n Alert as MuiAlert,\n Chip,\n styled,\n} from '@mui/material';\nimport { Button } from './Button';\nimport { CloseRounded, ErrorOutlineRounded, StickyNote2Rounded } from '@mui/icons-material';\n\n\ninterface ModalProps {\n isOpen: boolean;\n onClose: () => void;\n status: 'mandatory' | 'optional' | 'accepted' | 'action-required' | 'action-required-note' | 'accepted-note';\n description: string;\n defaultText: string;\n note?: string;\n acceptSuggestion?: boolean;\n onAcceptSuggestionChange?: (checked: boolean) => void;\n onSave?: () => void;\n onSubmit?: () => void;\n onDeclineWording?: () => void;\n onPrevious?: () => void;\n onNext?: () => void;\n currentPage?: number;\n totalPages?: number;\n}\n\n\nconst StyledDialog = styled(Dialog)(({ theme }) => ({\n '& .MuiDialog-paper': {\n color: theme.palette.background.default,\n borderRadius: theme.shape.borderRadius,\n maxWidth: '896px',\n width: '100%',\n maxHeight: '90vh',\n },\n}));\n\n\nconst NavButton = styled(IconButton)(({ theme }) => ({\n width: 'auto',\n height: '40px',\n borderRadius: (typeof theme.shape.borderRadius === 'string'\n ? parseInt(theme.shape.borderRadius, 10)\n : theme.shape.borderRadius || 4) * 2,\n border: `2px solid ${theme.palette.dark.main}`,\n backgroundColor: theme.palette.light.main,\n padding: theme.spacing(1, 2),\n '&:hover': {\n backgroundColor: theme.palette.grey[100], // Changed from dark.main to grey[100]\n color: theme.palette.dark.main, // Keep text dark instead of light\n borderColor: theme.palette.dark.main, // Keep border dark\n },\n}));\n\n\n\nexport const Modal: React.FC<ModalProps> = ({\n isOpen,\n onClose,\n status,\n description,\n defaultText,\n note,\n acceptSuggestion: initialAcceptSuggestion = true,\n onAcceptSuggestionChange,\n onSave,\n onSubmit,\n onDeclineWording,\n onPrevious,\n onNext,\n currentPage = 1,\n totalPages = 1,\n}) => {\n const [textValue, setTextValue] = useState(defaultText);\n const [useDefaultValue, setUseDefaultValue] = useState(true);\n\n\n const handleUseDefaultValueChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setUseDefaultValue(event.target.checked);\n };\n\n\n const statusConfig = {\n mandatory: {\n color: '#F5A623',\n label: 'Mandatory',\n },\n optional: {\n color: '#F5D76E',\n label: 'Optional',\n },\n accepted: {\n color: '#A3D977',\n label: 'Accepted',\n },\n 'action-required': {\n color: '#F56B6B',\n label: 'Action Required',\n },\n 'action-required-note': {\n color: '#F56B6B',\n label: 'Action Required',\n },\n 'accepted-note': {\n color: '#A3D977',\n label: 'Accepted',\n },\n };\n\n\n const statusStyle = statusConfig[status];\n\n\n return (\n <StyledDialog open={isOpen} onClose={onClose} maxWidth=\"md\" fullWidth>\n <IconButton\n onClick={onClose}\n sx={{\n position: 'absolute',\n top: 16,\n right: 16,\n zIndex: 1,\n }}\n >\n <CloseRounded sx={{ fontSize: 24 }} />\n </IconButton>\n\n\n <DialogContent sx={{ p: { xs: 3, sm: 4, md: 6 } }}>\n {/* Status Chip */}\n <Box sx={{ mb: 3 }}>\n <Chip\n label={statusStyle.label.toUpperCase()}\n sx={{\n backgroundColor: statusStyle.color,\n color: status === 'optional' || status === 'mandatory' ? '#4D3019' : '#fff',\n fontWeight: 600,\n fontSize: '0.875rem',\n height: 'auto',\n py: 1,\n borderRadius: 0,\n px: 2,\n }}\n />\n </Box>\n\n\n {/* Description */}\n <Typography sx={{ mb: 3, lineHeight: 1.6, whiteSpace: 'pre-line' }}>\n {description}\n </Typography>\n\n\n {/* Alerts */}\n {status === 'action-required-note' && note && (\n <MuiAlert\n icon={<ErrorOutlineRounded sx={{ fontSize: 20 }} />}\n severity=\"error\"\n sx={{\n mb: 2,\n backgroundColor: '#FDFCEE',\n borderLeft: '4px solid #F56B6B',\n '& .MuiAlert-icon': {\n color: '#F56B6B',\n },\n '& .MuiAlert-message': {\n color: '#4D3019',\n },\n }}\n >\n {note}\n </MuiAlert>\n )}\n\n\n {status === 'accepted-note' && note && (\n <MuiAlert\n icon={<StickyNote2Rounded sx={{ fontSize: 20 }} />}\n severity=\"warning\"\n sx={{\n mb: 2,\n backgroundColor: '#FDFCEE',\n borderLeft: '4px solid #F5D76E',\n '& .MuiAlert-icon': {\n color: '#F5A623',\n },\n '& .MuiAlert-message': {\n color: '#4D3019',\n },\n }}\n >\n {note}\n </MuiAlert>\n )}\n\n\n {/* Text Field */}\n <TextField\n multiline\n rows={6}\n fullWidth\n value={textValue}\n onChange={(e) => setTextValue(e.target.value)}\n disabled={useDefaultValue}\n sx={{\n mb: 2,\n '& .MuiOutlinedInput-root': {\n backgroundColor: useDefaultValue ? 'rgba(0, 0, 0, 0.05)' : '#fff',\n borderRadius: 2,\n },\n }}\n />\n\n\n {/* Checkbox */}\n <FormControlLabel\n control={\n <Checkbox\n checked={useDefaultValue}\n onChange={handleUseDefaultValueChange}\n sx={{\n color: '#AC46FF',\n '&.Mui-checked': {\n color: '#AC46FF',\n },\n }}\n />\n }\n label=\"Use Default Value\"\n sx={{ mb: 3 }}\n />\n\n\n {/* Footer with Buttons and Navigation */}\n <Box\n sx={{\n display: 'flex',\n flexDirection: { xs: 'column', sm: 'row' },\n alignItems: { xs: 'stretch', sm: 'center' },\n justifyContent: 'space-between',\n gap: 2,\n pt: 3,\n borderTop: '1px solid',\n borderColor: 'divider',\n }}\n >\n {/* Action Buttons */}\n <Box sx={{ display: 'flex', gap: 1.5, flexWrap: 'wrap' }}>\n <Button onClick={onSave} variant=\"outline\" size=\"md\">\n Save\n </Button>\n <Button onClick={onSubmit} variant=\"outline\" size=\"md\" sx={{\n backgroundColor: '#ac46ff52',\n '&:hover': {\n backgroundColor: '#ac46ff80', // Darker purple on hover\n }\n }}>\n Submit for review\n </Button>\n <Button onClick={onDeclineWording} variant=\"outline\" size=\"md\" sx={{\n backgroundColor: '#ff464652',\n '&:hover': {\n backgroundColor: '#ff464680', // Darker purple on hover\n }\n }}>\n Decline wording\n </Button>\n </Box>\n\n\n {/* Navigation */}\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n gap: 1.5,\n justifyContent: { xs: 'space-between', sm: 'flex-end' },\n }}\n >\n <Typography fontWeight={500} fontSize=\"1.125rem\">\n {currentPage}/{totalPages}\n </Typography>\n <NavButton onClick={onPrevious} aria-label=\"Previous\">\n <Typography sx={{ fontSize: 16, fontWeight: 500 }}>Previous</Typography>\n </NavButton>\n <NavButton onClick={onNext} aria-label=\"Next\">\n <Typography sx={{ fontSize: 16, fontWeight: 500 }}>Next</Typography>\n </NavButton>\n </Box>\n </Box>\n </DialogContent>\n </StyledDialog>\n );\n};\n"],"names":["styled","Dialog","IconButton","useState","_jsxs","_jsx","CloseRounded","DialogContent","Box","Chip","Typography","MuiAlert","ErrorOutlineRounded","StickyNote2Rounded","TextField","FormControlLabel","Checkbox","Button"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Modal.js","sources":["../../../../src/components/Modal.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n Dialog,\n DialogContent,\n IconButton,\n Box,\n Typography,\n TextField,\n Checkbox,\n FormControlLabel,\n Alert as MuiAlert,\n Chip,\n styled,\n CircularProgress,\n} from '@mui/material';\nimport { Button } from './Button';\nimport { CloseRounded, ErrorOutlineRounded, StickyNote2Rounded } from '@mui/icons-material';\nimport { Alert } from './Alert';\n\nenum VariableState {\n Accepted = \"Accepted\",\n Pending = \"Pending\",\n Rejected = \"Rejected\",\n NotAccepted = \"Not Accepted\",\n Draft = \"Draft\"\n}\n\ninterface ModalProps {\n isOpen: boolean;\n onClose: () => void;\n status: string;\n description: string;\n defaultText: string;\n note?: string;\n onSave?: (fieldValue: string, defaultChecked: boolean) => void;\n onSubmit?: (fieldValue: string, defaultChecked: boolean) => void;\n onDeclineWording?: () => void;\n onPrevious?: () => void;\n onNext?: () => void;\n currentPage?: number;\n totalPages?: number;\n isLoading: boolean;\n}\n\n\nconst StyledDialog = styled(Dialog)(({ theme }) => ({\n '& .MuiDialog-paper': {\n color: theme.palette.background.default,\n borderRadius: theme.shape.borderRadius,\n maxWidth: '896px',\n width: '100%',\n maxHeight: '90vh',\n },\n}));\n\n\nconst NavButton = styled(IconButton)(({ theme }) => ({\n width: 'auto',\n height: '40px',\n borderRadius: (typeof theme.shape.borderRadius === 'string'\n ? parseInt(theme.shape.borderRadius, 10)\n : theme.shape.borderRadius || 4) * 2,\n border: `2px solid ${theme.palette.dark.main}`,\n backgroundColor: theme.palette.light.main,\n padding: theme.spacing(1, 2),\n '&:hover': {\n backgroundColor: theme.palette.grey[100], // Changed from dark.main to grey[100]\n color: theme.palette.dark.main, // Keep text dark instead of light\n borderColor: theme.palette.dark.main, // Keep border dark\n },\n}));\n\nfunction mapStatusToVariableState(status: string): VariableState | undefined {\n switch (status) {\n case \"Accepted\":\n return VariableState.Accepted;\n case \"Pending\":\n return VariableState.Pending;\n case \"Rejected\":\n return VariableState.Rejected;\n case \"Not Accepted\":\n return VariableState.NotAccepted;\n case \"Draft\":\n return VariableState.Draft;\n default:\n return undefined;\n }\n}\n\n\n\nexport const Modal: React.FC<ModalProps> = ({\n isOpen,\n onClose,\n status,\n description,\n defaultText,\n note,\n onSave,\n onSubmit,\n onDeclineWording,\n onPrevious,\n onNext,\n currentPage = 1,\n totalPages = 1,\n isLoading\n}) => {\n const [textValue, setTextValue] = useState(defaultText);\n const [useDefaultValue, setUseDefaultValue] = useState(true);\n\n\n const handleUseDefaultValueChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setUseDefaultValue(event.target.checked);\n };\n\n\n const variableState = mapStatusToVariableState(status);\n\n const statusConfig = {\n [VariableState.Pending]: { color: '#F5A623', label: 'Pending' },\n [VariableState.Draft]: { color: '#F5D76E', label: 'Draft' },\n [VariableState.NotAccepted]: { color: '#A3D977', label: 'Not Accepted' },\n [VariableState.Rejected]: { color: '#F56B6B', label: 'Rejected' },\n [VariableState.Accepted]: { color: '#A3D977', label: 'Accepted' },\n };\n\n const statusStyle = variableState ? statusConfig[variableState] : { color: '#ccc', label: 'Unknown' };;\n\n\n const handleSave = () => {\n onSave?.(textValue, useDefaultValue);\n };\n\n const handleSubmit = () => {\n onSubmit?.(textValue, useDefaultValue);\n };\n\n\n\n return (\n <StyledDialog open={isOpen} onClose={onClose} maxWidth=\"md\" fullWidth>\n <IconButton\n onClick={onClose}\n disabled={isLoading}\n sx={{\n position: 'absolute',\n top: 16,\n right: 16,\n zIndex: 1,\n }}\n >\n <CloseRounded sx={{ fontSize: 24 }} />\n </IconButton>\n\n\n <DialogContent sx={{ p: { xs: 3, sm: 4, md: 6 } }}>\n {/* Status Chip */}\n <Box sx={{ mb: 3 }}>\n <Chip\n label={statusStyle.label.toUpperCase()}\n sx={{\n backgroundColor: statusStyle.color,\n color: status === 'Not Accepted' || status === 'Pending' ? '#4D3019' : '#fff',\n fontWeight: 600,\n fontSize: '0.875rem',\n height: 'auto',\n py: 1,\n borderRadius: 0,\n px: 2,\n }}\n />\n </Box>\n\n\n {/* Description */}\n <Typography sx={{ mb: 3, lineHeight: 1.6, whiteSpace: 'pre-line' }}>\n {description}\n </Typography>\n\n\n {/* Alerts */}\n {status === 'Rejected' && note && (\n <Alert\n variant=\"error\"\n sx={{\n mb: 2\n }}\n >\n {note}\n </Alert>\n )}\n\n\n {status === 'Pending' && note && (\n <Alert\n variant=\"info\"\n sx={{\n mb: 2\n }}\n >\n {note}\n </Alert>\n )}\n\n\n {/* Text Field */}\n <TextField\n multiline\n rows={6}\n fullWidth\n value={textValue}\n onChange={(e) => setTextValue(e.target.value)}\n disabled={useDefaultValue || isLoading}\n sx={{\n mb: 2,\n '& .MuiOutlinedInput-root': {\n backgroundColor: useDefaultValue ? 'rgba(0, 0, 0, 0.05)' : '#fff',\n borderRadius: 2,\n },\n }}\n />\n\n\n {/* Checkbox */}\n <FormControlLabel\n control={\n <Checkbox\n checked={useDefaultValue}\n onChange={handleUseDefaultValueChange}\n sx={{\n color: '#AC46FF',\n '&.Mui-checked': {\n color: '#AC46FF',\n },\n }}\n />\n }\n label=\"Use Default Value\"\n sx={{ mb: 3 }}\n />\n\n\n {/* Footer with Buttons and Navigation */}\n <Box\n sx={{\n display: 'flex',\n flexDirection: { xs: 'column', sm: 'row' },\n alignItems: { xs: 'stretch', sm: 'center' },\n justifyContent: 'space-between',\n gap: 2,\n pt: 3,\n borderTop: '1px solid',\n borderColor: 'divider',\n }}\n >\n {/* Action Buttons */}\n <Box sx={{ display: 'flex', gap: 1.5, flexWrap: 'wrap' }}>\n <Button\n onClick={handleSave}\n variant=\"outline\"\n size=\"md\"\n disabled={isLoading}\n >\n {isLoading ? <><CircularProgress size={20} /><Typography sx={{paddingLeft: 2}}>Saving...</Typography></> : \"Save\"}\n </Button>\n <Button\n onClick={handleSubmit}\n variant=\"outline\"\n size=\"md\"\n disabled={isLoading}\n sx={{\n backgroundColor: '#ac46ff52',\n '&:hover': {\n backgroundColor: '#ac46ff80',\n },\n }}\n >\n {isLoading ? <><CircularProgress size={20} /><Typography sx={{paddingLeft: 2}}>Submitting...</Typography></> : \"Submit for review\"}\n </Button>\n <Button onClick={onDeclineWording} variant=\"outline\" size=\"md\" sx={{\n backgroundColor: '#ff464652',\n '&:hover': {\n backgroundColor: '#ff464680', // Darker purple on hover\n }\n }}\n disabled={isLoading}\n >\n Decline wording\n </Button>\n </Box>\n\n\n {/* Navigation */}\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n gap: 1.5,\n justifyContent: { xs: 'space-between', sm: 'flex-end' },\n }}\n >\n <Typography fontWeight={500} fontSize=\"1.125rem\">\n {currentPage}/{totalPages}\n </Typography>\n <NavButton onClick={onPrevious} aria-label=\"Previous\" disabled={isLoading}>\n <Typography sx={{ fontSize: 16, fontWeight: 500 }}>Previous</Typography>\n </NavButton>\n <NavButton onClick={onNext} aria-label=\"Next\" disabled={isLoading}>\n <Typography sx={{ fontSize: 16, fontWeight: 500 }}>Next</Typography>\n </NavButton>\n </Box>\n </Box>\n </DialogContent>\n </StyledDialog>\n );\n};\n"],"names":["styled","Dialog","IconButton","useState","_jsxs","_jsx","CloseRounded","DialogContent","Box","Chip","Typography","Alert","TextField","FormControlLabel","Checkbox","Button","_Fragment","CircularProgress"],"mappings":"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"}
|
|
@@ -4,31 +4,96 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var material = require('@mui/material');
|
|
6
6
|
var iconsMaterial = require('@mui/icons-material');
|
|
7
|
+
var Alert = require('./Alert.js');
|
|
7
8
|
|
|
9
|
+
// Status Enum
|
|
10
|
+
var VariableState;
|
|
11
|
+
(function (VariableState) {
|
|
12
|
+
VariableState["Accepted"] = "Accepted";
|
|
13
|
+
VariableState["Pending"] = "Pending";
|
|
14
|
+
VariableState["Rejected"] = "Rejected";
|
|
15
|
+
VariableState["NotAccepted"] = "Not Accepted";
|
|
16
|
+
VariableState["Draft"] = "Draft";
|
|
17
|
+
})(VariableState || (VariableState = {}));
|
|
18
|
+
function mapStatusToVariableState(status) {
|
|
19
|
+
switch (status) {
|
|
20
|
+
case "Accepted": return VariableState.Accepted;
|
|
21
|
+
case "Pending": return VariableState.Pending;
|
|
22
|
+
case "Rejected": return VariableState.Rejected;
|
|
23
|
+
case "Not Accepted": return VariableState.NotAccepted;
|
|
24
|
+
case "Draft": return VariableState.Draft;
|
|
25
|
+
default: return undefined;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
// Status based color configs (from Modal)
|
|
29
|
+
const statusConfig = {
|
|
30
|
+
Accepted: {
|
|
31
|
+
highlight: '#EDF9CD',
|
|
32
|
+
highlightSelected: '#DBF59A',
|
|
33
|
+
label: 'Accepted',
|
|
34
|
+
labelColor: '#2D5016',
|
|
35
|
+
chipColor: '#A3D977',
|
|
36
|
+
chipTextColor: '#fff',
|
|
37
|
+
},
|
|
38
|
+
Pending: {
|
|
39
|
+
highlight: '#F5E2FF',
|
|
40
|
+
highlightSelected: '#EBC7FF',
|
|
41
|
+
label: 'Pending',
|
|
42
|
+
labelColor: 'var(--color-secondary)',
|
|
43
|
+
chipColor: '#F5A623',
|
|
44
|
+
chipTextColor: '#4D3019',
|
|
45
|
+
alertVariant: 'info',
|
|
46
|
+
},
|
|
47
|
+
Rejected: {
|
|
48
|
+
highlight: '#FBEEEE',
|
|
49
|
+
highlightSelected: '#FFBCB3',
|
|
50
|
+
label: 'Rejected',
|
|
51
|
+
labelColor: '#CC0000',
|
|
52
|
+
chipColor: '#F56B6B',
|
|
53
|
+
chipTextColor: '#fff',
|
|
54
|
+
alertVariant: 'error',
|
|
55
|
+
},
|
|
56
|
+
'Not Accepted': {
|
|
57
|
+
highlight: '#FFF6D1',
|
|
58
|
+
highlightSelected: '#FDE58E',
|
|
59
|
+
label: 'Not Accepted',
|
|
60
|
+
labelColor: 'var(--color-secondary)',
|
|
61
|
+
chipColor: '#A3D977',
|
|
62
|
+
chipTextColor: '#4D3019',
|
|
63
|
+
},
|
|
64
|
+
Draft: {
|
|
65
|
+
highlight: '#FFEACD',
|
|
66
|
+
highlightSelected: '#FFC365',
|
|
67
|
+
label: 'Draft',
|
|
68
|
+
labelColor: 'rgba(0, 0, 0, 0.6)',
|
|
69
|
+
chipColor: '#F5D76E',
|
|
70
|
+
chipTextColor: '#fff',
|
|
71
|
+
},
|
|
72
|
+
};
|
|
8
73
|
const NoteContainer = material.styled(material.Box)({
|
|
9
74
|
position: 'relative',
|
|
10
75
|
maxWidth: '100%',
|
|
11
76
|
});
|
|
77
|
+
// Uses highlight colors driven by status exclusively
|
|
12
78
|
const HighlightWrapper = material.styled(material.Box, {
|
|
13
79
|
shouldForwardProp: (prop) => prop !== 'isHovered' &&
|
|
14
80
|
prop !== 'highlightColor' &&
|
|
15
|
-
prop !== 'highlightSelectedColor'
|
|
16
|
-
|
|
17
|
-
})(({ isHovered, highlightColor, highlightSelectedColor, isCustom }) => ({
|
|
81
|
+
prop !== 'highlightSelectedColor'
|
|
82
|
+
})(({ isHovered, highlightColor, highlightSelectedColor }) => ({
|
|
18
83
|
position: 'relative',
|
|
19
|
-
display: 'inline-block',
|
|
84
|
+
display: 'inline-block',
|
|
20
85
|
maxWidth: '100%',
|
|
21
86
|
'&:hover .edit-button': {
|
|
22
87
|
opacity: 1,
|
|
23
88
|
},
|
|
24
89
|
'& .highlight-span': {
|
|
25
|
-
background:
|
|
90
|
+
background: isHovered ? highlightSelectedColor : highlightColor,
|
|
26
91
|
padding: '2px 4px',
|
|
27
92
|
borderBottom: '2px solid rgba(77, 48, 25, 0.3)',
|
|
28
93
|
boxDecorationBreak: 'clone',
|
|
29
94
|
WebkitBoxDecorationBreak: 'clone',
|
|
30
|
-
transition:
|
|
31
|
-
cursor:
|
|
95
|
+
transition: 'background 0.2s ease',
|
|
96
|
+
cursor: 'pointer',
|
|
32
97
|
fontSize: '13px',
|
|
33
98
|
wordWrap: 'break-word',
|
|
34
99
|
overflowWrap: 'break-word',
|
|
@@ -55,59 +120,16 @@ const EditButton = material.styled(material.IconButton)(({ theme }) => ({
|
|
|
55
120
|
transform: 'translate(50%, -50%) scale(1.1)',
|
|
56
121
|
},
|
|
57
122
|
}));
|
|
58
|
-
const NoteBox = ({
|
|
123
|
+
const NoteBox = ({ status, label, note, children, className = '', onEditClick, }) => {
|
|
59
124
|
const [isHovered, setIsHovered] = React.useState(false);
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
highlight: '#FFEACD',
|
|
69
|
-
highlightSelected: '#FFC365',
|
|
70
|
-
label: 'Not Answered (Mandatory)',
|
|
71
|
-
labelColor: 'var(--color-secondary)',
|
|
72
|
-
},
|
|
73
|
-
optional: {
|
|
74
|
-
highlight: '#FFF6D1',
|
|
75
|
-
highlightSelected: '#FDE58E',
|
|
76
|
-
label: 'Not Answered (Optional)',
|
|
77
|
-
labelColor: 'var(--color-secondary)',
|
|
78
|
-
},
|
|
79
|
-
pending: {
|
|
80
|
-
highlight: '#F5E2FF',
|
|
81
|
-
highlightSelected: '#EBC7FF',
|
|
82
|
-
label: 'Pending',
|
|
83
|
-
labelColor: 'var(--color-secondary)',
|
|
84
|
-
},
|
|
85
|
-
accepted: {
|
|
86
|
-
highlight: '#EDF9CD',
|
|
87
|
-
highlightSelected: '#DBF59A',
|
|
88
|
-
label: 'Accepted',
|
|
89
|
-
labelColor: '#2D5016',
|
|
90
|
-
},
|
|
91
|
-
'action-required': {
|
|
92
|
-
highlight: '#FBEEEE',
|
|
93
|
-
highlightSelected: '#FFBCB3',
|
|
94
|
-
label: 'Action required before approval',
|
|
95
|
-
labelColor: '#CC0000',
|
|
96
|
-
},
|
|
97
|
-
custom: {
|
|
98
|
-
highlight: '#D9EDF8',
|
|
99
|
-
highlightSelected: '#B3E0F2',
|
|
100
|
-
label: 'Custom Text',
|
|
101
|
-
labelColor: 'var(--color-secondary)',
|
|
102
|
-
},
|
|
103
|
-
};
|
|
104
|
-
const style = variants[variant];
|
|
105
|
-
const displayLabel = label || style.label;
|
|
106
|
-
return (jsxRuntime.jsxs(NoteContainer, { className: className, children: [displayLabel && (jsxRuntime.jsx(material.Box, { sx: { mb: 1 }, children: jsxRuntime.jsx(material.Typography, { component: "span", sx: {
|
|
107
|
-
fontSize: '13px',
|
|
108
|
-
fontWeight: 500,
|
|
109
|
-
color: style.labelColor || 'rgba(0, 0, 0, 0.6)',
|
|
110
|
-
}, children: displayLabel }) })), jsxRuntime.jsxs(HighlightWrapper, { isHovered: isHovered, highlightColor: style.highlight, highlightSelectedColor: style.highlightSelected, isCustom: variant === 'custom', onMouseEnter: () => variant !== 'custom' && setIsHovered(true), onMouseLeave: () => variant !== 'custom' && setIsHovered(false), children: [jsxRuntime.jsx("span", { className: "highlight-span", children: children }), jsxRuntime.jsx(EditButton, { className: "edit-button", onClick: (e) => {
|
|
125
|
+
// Map current status
|
|
126
|
+
const variableState = mapStatusToVariableState(status);
|
|
127
|
+
const style = variableState
|
|
128
|
+
? statusConfig[variableState]
|
|
129
|
+
: {
|
|
130
|
+
highlight: '#EEE',
|
|
131
|
+
highlightSelected: '#DDD'};
|
|
132
|
+
return (jsxRuntime.jsxs(NoteContainer, { className: className, children: [variableState && style.alertVariant && note && (jsxRuntime.jsx(Alert.Alert, { variant: style.alertVariant, sx: { mb: 1 }, children: note })), jsxRuntime.jsxs(HighlightWrapper, { isHovered: isHovered, highlightColor: style.highlight, highlightSelectedColor: style.highlightSelected, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [jsxRuntime.jsx("span", { className: "highlight-span", children: children }), jsxRuntime.jsx(EditButton, { className: "edit-button", onClick: (e) => {
|
|
111
133
|
e.stopPropagation();
|
|
112
134
|
if (onEditClick) {
|
|
113
135
|
onEditClick();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NoteBox.js","sources":["../../../../src/components/NoteBox.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Box, Typography, IconButton, styled } from '@mui/material';\nimport { EditRounded } from '@mui/icons-material';\n\n\ninterface NoteBoxProps {\n variant?: 'default' | 'mandatory' | 'optional' | 'pending' | 'accepted' | 'action-required' | 'custom';\n label?: string;\n children: React.ReactNode;\n className?: string;\n onEditClick?: () => void;\n}\n\n\nconst NoteContainer = styled(Box)({\n position: 'relative',\n maxWidth: '100%',\n});\n\nconst HighlightWrapper = styled(Box,{\n shouldForwardProp: (prop) => \n prop !== 'isHovered' && \n prop !== 'highlightColor' && \n prop !== 'highlightSelectedColor' && \n prop !== 'isCustom'\n})<{ \n isHovered: boolean; \n highlightColor: string; \n highlightSelectedColor: string;\n isCustom: boolean;\n}>(({ isHovered, highlightColor, highlightSelectedColor, isCustom }) => ({\n position: 'relative',\n display: 'inline-block', // Keep this as inline-block\n maxWidth: '100%',\n '&:hover .edit-button': {\n opacity: 1,\n },\n '& .highlight-span': {\n background: isCustom ? highlightColor : (isHovered ? highlightSelectedColor : highlightColor),\n padding: '2px 4px',\n borderBottom: '2px solid rgba(77, 48, 25, 0.3)',\n boxDecorationBreak: 'clone',\n WebkitBoxDecorationBreak: 'clone',\n transition: isCustom ? 'none' : 'background 0.2s ease',\n cursor: isCustom ? 'default' : 'pointer',\n fontSize: '13px',\n wordWrap: 'break-word',\n overflowWrap: 'break-word',\n display: 'inline',\n color: '#4D3019',\n },\n}));\n\nconst EditButton = styled(IconButton)(({ theme }) => ({\n position: 'absolute',\n top: 0,\n right: 0,\n transform: 'translate(50%, -50%)',\n width: 20,\n height: 20,\n borderRadius: (typeof theme.shape.borderRadius === 'string'\n ? parseInt(theme.shape.borderRadius, 10)\n : theme.shape.borderRadius || 4) * 2,\n backgroundColor: '#4D3019',\n opacity: 0,\n transition: 'all 0.2s ease',\n boxShadow: '0 1px 3px rgba(0,0,0,0.12)',\n '&:hover': {\n backgroundColor: '#4D3019',\n transform: 'translate(50%, -50%) scale(1.1)',\n },\n}));\n\n\nexport const NoteBox: React.FC<NoteBoxProps> = ({\n variant = 'default',\n label,\n children,\n className = '',\n onEditClick,\n}) => {\n const [isHovered, setIsHovered] = useState(false);\n\n\n const variants = {\n default: {\n highlight: '#FFEACD',\n highlightSelected: '#FFC365',\n label: '',\n labelColor: '',\n },\n mandatory: {\n highlight: '#FFEACD',\n highlightSelected: '#FFC365',\n label: 'Not Answered (Mandatory)',\n labelColor: 'var(--color-secondary)',\n },\n optional: {\n highlight: '#FFF6D1',\n highlightSelected: '#FDE58E',\n label: 'Not Answered (Optional)',\n labelColor: 'var(--color-secondary)',\n },\n pending: {\n highlight: '#F5E2FF',\n highlightSelected: '#EBC7FF',\n label: 'Pending',\n labelColor: 'var(--color-secondary)',\n },\n accepted: {\n highlight: '#EDF9CD',\n highlightSelected: '#DBF59A',\n label: 'Accepted',\n labelColor: '#2D5016',\n },\n 'action-required': {\n highlight: '#FBEEEE',\n highlightSelected: '#FFBCB3',\n label: 'Action required before approval',\n labelColor: '#CC0000',\n },\n custom: {\n highlight: '#D9EDF8',\n highlightSelected: '#B3E0F2',\n label: 'Custom Text',\n labelColor: 'var(--color-secondary)',\n },\n };\n\n\n const style = variants[variant];\n const displayLabel = label || style.label;\n\n\n return (\n <NoteContainer className={className}>\n {displayLabel && (\n <Box sx={{ mb: 1 }}>\n <Typography\n component=\"span\"\n sx={{\n fontSize: '13px',\n fontWeight: 500,\n color: style.labelColor || 'rgba(0, 0, 0, 0.6)',\n }}\n >\n {displayLabel}\n </Typography>\n </Box>\n )}\n <HighlightWrapper\n isHovered={isHovered}\n highlightColor={style.highlight}\n highlightSelectedColor={style.highlightSelected}\n isCustom={variant === 'custom'}\n onMouseEnter={() => variant !== 'custom' && setIsHovered(true)}\n onMouseLeave={() => variant !== 'custom' && setIsHovered(false)}\n >\n <span className=\"highlight-span\">\n {children}\n </span>\n <EditButton\n className=\"edit-button\"\n onClick={(e) => {\n e.stopPropagation();\n if (onEditClick) {\n onEditClick();\n }\n }}\n title=\"Edit variable highlight\"\n size=\"small\"\n >\n <EditRounded sx={{fontSize:14, color:\"#FFFFFF\", strokeWidth:2}} />\n </EditButton>\n </HighlightWrapper>\n </NoteContainer>\n );\n};\n"],"names":["styled","Box","IconButton","useState","_jsxs","_jsx","Typography","EditRounded"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"NoteBox.js","sources":["../../../../src/components/NoteBox.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Box, Typography, IconButton, styled, Chip } from '@mui/material';\nimport { EditRounded } from '@mui/icons-material';\nimport { Alert } from './Alert';\n\n// Status Enum\nenum VariableState {\n Accepted = \"Accepted\",\n Pending = \"Pending\",\n Rejected = \"Rejected\",\n NotAccepted = \"Not Accepted\",\n Draft = \"Draft\"\n}\n\ninterface NoteBoxProps {\n status?: string; // Use only status now\n label?: string;\n note?: string;\n children: React.ReactNode;\n className?: string;\n onEditClick?: () => void;\n}\n\nfunction mapStatusToVariableState(status?: string): VariableState | undefined {\n switch (status) {\n case \"Accepted\": return VariableState.Accepted;\n case \"Pending\": return VariableState.Pending;\n case \"Rejected\": return VariableState.Rejected;\n case \"Not Accepted\": return VariableState.NotAccepted;\n case \"Draft\": return VariableState.Draft;\n default: return undefined;\n }\n}\n\n// Status based color configs (from Modal)\nconst statusConfig: {\n [key in VariableState]: {\n highlight: string;\n highlightSelected: string;\n label: string;\n labelColor: string;\n chipColor: string;\n chipTextColor: string;\n alertVariant?: \"error\" | \"info\";\n }\n} = {\n Accepted: {\n highlight: '#EDF9CD',\n highlightSelected: '#DBF59A',\n label: 'Accepted',\n labelColor: '#2D5016',\n chipColor: '#A3D977',\n chipTextColor: '#fff',\n },\n Pending: {\n highlight: '#F5E2FF',\n highlightSelected: '#EBC7FF',\n label: 'Pending',\n labelColor: 'var(--color-secondary)',\n chipColor: '#F5A623',\n chipTextColor: '#4D3019',\n alertVariant: 'info',\n },\n Rejected: {\n highlight: '#FBEEEE',\n highlightSelected: '#FFBCB3',\n label: 'Rejected',\n labelColor: '#CC0000',\n chipColor: '#F56B6B',\n chipTextColor: '#fff',\n alertVariant: 'error',\n },\n 'Not Accepted': {\n highlight: '#FFF6D1',\n highlightSelected: '#FDE58E',\n label: 'Not Accepted',\n labelColor: 'var(--color-secondary)',\n chipColor: '#A3D977',\n chipTextColor: '#4D3019',\n },\n Draft: {\n highlight: '#FFEACD',\n highlightSelected: '#FFC365',\n label: 'Draft',\n labelColor: 'rgba(0, 0, 0, 0.6)',\n chipColor: '#F5D76E',\n chipTextColor: '#fff',\n },\n};\n\nconst NoteContainer = styled(Box)({\n position: 'relative',\n maxWidth: '100%',\n});\n\n// Uses highlight colors driven by status exclusively\nconst HighlightWrapper = styled(Box, {\n shouldForwardProp: (prop) => \n prop !== 'isHovered' && \n prop !== 'highlightColor' && \n prop !== 'highlightSelectedColor'\n})<{\n isHovered: boolean;\n highlightColor: string;\n highlightSelectedColor: string;\n}>(({ isHovered, highlightColor, highlightSelectedColor }) => ({\n position: 'relative',\n display: 'inline-block',\n maxWidth: '100%',\n '&:hover .edit-button': {\n opacity: 1,\n },\n '& .highlight-span': {\n background: isHovered ? highlightSelectedColor : highlightColor,\n padding: '2px 4px',\n borderBottom: '2px solid rgba(77, 48, 25, 0.3)',\n boxDecorationBreak: 'clone',\n WebkitBoxDecorationBreak: 'clone',\n transition: 'background 0.2s ease',\n cursor: 'pointer',\n fontSize: '13px',\n wordWrap: 'break-word',\n overflowWrap: 'break-word',\n display: 'inline',\n color: '#4D3019',\n },\n}));\n\nconst EditButton = styled(IconButton)(({ theme }) => ({\n position: 'absolute',\n top: 0,\n right: 0,\n transform: 'translate(50%, -50%)',\n width: 20,\n height: 20,\n borderRadius: (typeof theme.shape.borderRadius === 'string'\n ? parseInt(theme.shape.borderRadius, 10)\n : theme.shape.borderRadius || 4) * 2,\n backgroundColor: '#4D3019',\n opacity: 0,\n transition: 'all 0.2s ease',\n boxShadow: '0 1px 3px rgba(0,0,0,0.12)',\n '&:hover': {\n backgroundColor: '#4D3019',\n transform: 'translate(50%, -50%) scale(1.1)',\n },\n}));\n\nexport const NoteBox: React.FC<NoteBoxProps> = ({\n status,\n label,\n note,\n children,\n className = '',\n onEditClick,\n}) => {\n const [isHovered, setIsHovered] = useState(false);\n\n // Map current status\n const variableState = mapStatusToVariableState(status);\n const style = variableState\n ? statusConfig[variableState]\n : {\n highlight: '#EEE',\n highlightSelected: '#DDD',\n label: label || '',\n labelColor: 'rgba(0,0,0,0.6)',\n chipColor: '#ccc',\n chipTextColor: '#4D3019',\n };\n\n return (\n <NoteContainer className={className}>\n {/* Alert for note when status matches and note available */}\n {variableState && style.alertVariant && note && (\n <Alert variant={style.alertVariant} sx={{ mb: 1 }}>\n {note}\n </Alert>\n )}\n\n {/* Highlighted content box */}\n <HighlightWrapper\n isHovered={isHovered}\n highlightColor={style.highlight}\n highlightSelectedColor={style.highlightSelected}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n >\n <span className=\"highlight-span\">{children}</span>\n <EditButton\n className=\"edit-button\"\n onClick={(e) => {\n e.stopPropagation();\n if (onEditClick) {\n onEditClick();\n }\n }}\n title=\"Edit variable highlight\"\n size=\"small\"\n >\n <EditRounded sx={{ fontSize: 14, color: \"#FFFFFF\", strokeWidth: 2 }} />\n </EditButton>\n </HighlightWrapper>\n </NoteContainer>\n );\n};\n"],"names":["styled","Box","IconButton","useState","_jsxs","_jsx","Alert","EditRounded"],"mappings":"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"}
|
|
@@ -2,19 +2,18 @@ import React from 'react';
|
|
|
2
2
|
interface ModalProps {
|
|
3
3
|
isOpen: boolean;
|
|
4
4
|
onClose: () => void;
|
|
5
|
-
status:
|
|
5
|
+
status: string;
|
|
6
6
|
description: string;
|
|
7
7
|
defaultText: string;
|
|
8
8
|
note?: string;
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
onSave?: () => void;
|
|
12
|
-
onSubmit?: () => void;
|
|
9
|
+
onSave?: (fieldValue: string, defaultChecked: boolean) => void;
|
|
10
|
+
onSubmit?: (fieldValue: string, defaultChecked: boolean) => void;
|
|
13
11
|
onDeclineWording?: () => void;
|
|
14
12
|
onPrevious?: () => void;
|
|
15
13
|
onNext?: () => void;
|
|
16
14
|
currentPage?: number;
|
|
17
15
|
totalPages?: number;
|
|
16
|
+
isLoading: boolean;
|
|
18
17
|
}
|
|
19
18
|
export declare const Modal: React.FC<ModalProps>;
|
|
20
19
|
export {};
|
|
@@ -1,9 +1,18 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
1
|
+
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import { useState } from 'react';
|
|
3
|
-
import { styled, Dialog, IconButton, DialogContent, Box, Chip, Typography,
|
|
3
|
+
import { styled, Dialog, IconButton, DialogContent, Box, Chip, Typography, TextField, FormControlLabel, Checkbox, CircularProgress } from '@mui/material';
|
|
4
4
|
import { Button } from './Button.js';
|
|
5
|
-
import { CloseRounded
|
|
5
|
+
import { CloseRounded } from '@mui/icons-material';
|
|
6
|
+
import { Alert } from './Alert.js';
|
|
6
7
|
|
|
8
|
+
var VariableState;
|
|
9
|
+
(function (VariableState) {
|
|
10
|
+
VariableState["Accepted"] = "Accepted";
|
|
11
|
+
VariableState["Pending"] = "Pending";
|
|
12
|
+
VariableState["Rejected"] = "Rejected";
|
|
13
|
+
VariableState["NotAccepted"] = "Not Accepted";
|
|
14
|
+
VariableState["Draft"] = "Draft";
|
|
15
|
+
})(VariableState || (VariableState = {}));
|
|
7
16
|
const StyledDialog = styled(Dialog)(({ theme }) => ({
|
|
8
17
|
'& .MuiDialog-paper': {
|
|
9
18
|
color: theme.palette.background.default,
|
|
@@ -28,74 +37,62 @@ const NavButton = styled(IconButton)(({ theme }) => ({
|
|
|
28
37
|
borderColor: theme.palette.dark.main, // Keep border dark
|
|
29
38
|
},
|
|
30
39
|
}));
|
|
31
|
-
|
|
40
|
+
function mapStatusToVariableState(status) {
|
|
41
|
+
switch (status) {
|
|
42
|
+
case "Accepted":
|
|
43
|
+
return VariableState.Accepted;
|
|
44
|
+
case "Pending":
|
|
45
|
+
return VariableState.Pending;
|
|
46
|
+
case "Rejected":
|
|
47
|
+
return VariableState.Rejected;
|
|
48
|
+
case "Not Accepted":
|
|
49
|
+
return VariableState.NotAccepted;
|
|
50
|
+
case "Draft":
|
|
51
|
+
return VariableState.Draft;
|
|
52
|
+
default:
|
|
53
|
+
return undefined;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
const Modal = ({ isOpen, onClose, status, description, defaultText, note, onSave, onSubmit, onDeclineWording, onPrevious, onNext, currentPage = 1, totalPages = 1, isLoading }) => {
|
|
32
57
|
const [textValue, setTextValue] = useState(defaultText);
|
|
33
58
|
const [useDefaultValue, setUseDefaultValue] = useState(true);
|
|
34
59
|
const handleUseDefaultValueChange = (event) => {
|
|
35
60
|
setUseDefaultValue(event.target.checked);
|
|
36
61
|
};
|
|
62
|
+
const variableState = mapStatusToVariableState(status);
|
|
37
63
|
const statusConfig = {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
},
|
|
42
|
-
|
|
43
|
-
color: '#F5D76E',
|
|
44
|
-
label: 'Optional',
|
|
45
|
-
},
|
|
46
|
-
accepted: {
|
|
47
|
-
color: '#A3D977',
|
|
48
|
-
label: 'Accepted',
|
|
49
|
-
},
|
|
50
|
-
'action-required': {
|
|
51
|
-
color: '#F56B6B',
|
|
52
|
-
label: 'Action Required',
|
|
53
|
-
},
|
|
54
|
-
'action-required-note': {
|
|
55
|
-
color: '#F56B6B',
|
|
56
|
-
label: 'Action Required',
|
|
57
|
-
},
|
|
58
|
-
'accepted-note': {
|
|
59
|
-
color: '#A3D977',
|
|
60
|
-
label: 'Accepted',
|
|
61
|
-
},
|
|
64
|
+
[VariableState.Pending]: { color: '#F5A623', label: 'Pending' },
|
|
65
|
+
[VariableState.Draft]: { color: '#F5D76E', label: 'Draft' },
|
|
66
|
+
[VariableState.NotAccepted]: { color: '#A3D977', label: 'Not Accepted' },
|
|
67
|
+
[VariableState.Rejected]: { color: '#F56B6B', label: 'Rejected' },
|
|
68
|
+
[VariableState.Accepted]: { color: '#A3D977', label: 'Accepted' },
|
|
62
69
|
};
|
|
63
|
-
const statusStyle = statusConfig[
|
|
64
|
-
|
|
70
|
+
const statusStyle = variableState ? statusConfig[variableState] : { color: '#ccc', label: 'Unknown' };
|
|
71
|
+
const handleSave = () => {
|
|
72
|
+
onSave?.(textValue, useDefaultValue);
|
|
73
|
+
};
|
|
74
|
+
const handleSubmit = () => {
|
|
75
|
+
onSubmit?.(textValue, useDefaultValue);
|
|
76
|
+
};
|
|
77
|
+
return (jsxs(StyledDialog, { open: isOpen, onClose: onClose, maxWidth: "md", fullWidth: true, children: [jsx(IconButton, { onClick: onClose, disabled: isLoading, sx: {
|
|
65
78
|
position: 'absolute',
|
|
66
79
|
top: 16,
|
|
67
80
|
right: 16,
|
|
68
81
|
zIndex: 1,
|
|
69
82
|
}, children: jsx(CloseRounded, { sx: { fontSize: 24 } }) }), jsxs(DialogContent, { sx: { p: { xs: 3, sm: 4, md: 6 } }, children: [jsx(Box, { sx: { mb: 3 }, children: jsx(Chip, { label: statusStyle.label.toUpperCase(), sx: {
|
|
70
83
|
backgroundColor: statusStyle.color,
|
|
71
|
-
color: status === '
|
|
84
|
+
color: status === 'Not Accepted' || status === 'Pending' ? '#4D3019' : '#fff',
|
|
72
85
|
fontWeight: 600,
|
|
73
86
|
fontSize: '0.875rem',
|
|
74
87
|
height: 'auto',
|
|
75
88
|
py: 1,
|
|
76
89
|
borderRadius: 0,
|
|
77
90
|
px: 2,
|
|
78
|
-
} }) }), jsx(Typography, { sx: { mb: 3, lineHeight: 1.6, whiteSpace: 'pre-line' }, children: description }), status === '
|
|
79
|
-
mb: 2
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
color: '#F56B6B',
|
|
84
|
-
},
|
|
85
|
-
'& .MuiAlert-message': {
|
|
86
|
-
color: '#4D3019',
|
|
87
|
-
},
|
|
88
|
-
}, children: note })), status === 'accepted-note' && note && (jsx(Alert, { icon: jsx(StickyNote2Rounded, { sx: { fontSize: 20 } }), severity: "warning", sx: {
|
|
89
|
-
mb: 2,
|
|
90
|
-
backgroundColor: '#FDFCEE',
|
|
91
|
-
borderLeft: '4px solid #F5D76E',
|
|
92
|
-
'& .MuiAlert-icon': {
|
|
93
|
-
color: '#F5A623',
|
|
94
|
-
},
|
|
95
|
-
'& .MuiAlert-message': {
|
|
96
|
-
color: '#4D3019',
|
|
97
|
-
},
|
|
98
|
-
}, children: note })), jsx(TextField, { multiline: true, rows: 6, fullWidth: true, value: textValue, onChange: (e) => setTextValue(e.target.value), disabled: useDefaultValue, sx: {
|
|
91
|
+
} }) }), jsx(Typography, { sx: { mb: 3, lineHeight: 1.6, whiteSpace: 'pre-line' }, children: description }), status === 'Rejected' && note && (jsx(Alert, { variant: "error", sx: {
|
|
92
|
+
mb: 2
|
|
93
|
+
}, children: note })), status === 'Pending' && note && (jsx(Alert, { variant: "info", sx: {
|
|
94
|
+
mb: 2
|
|
95
|
+
}, children: note })), jsx(TextField, { multiline: true, rows: 6, fullWidth: true, value: textValue, onChange: (e) => setTextValue(e.target.value), disabled: useDefaultValue || isLoading, sx: {
|
|
99
96
|
mb: 2,
|
|
100
97
|
'& .MuiOutlinedInput-root': {
|
|
101
98
|
backgroundColor: useDefaultValue ? 'rgba(0, 0, 0, 0.05)' : '#fff',
|
|
@@ -115,22 +112,22 @@ const Modal = ({ isOpen, onClose, status, description, defaultText, note, accept
|
|
|
115
112
|
pt: 3,
|
|
116
113
|
borderTop: '1px solid',
|
|
117
114
|
borderColor: 'divider',
|
|
118
|
-
}, children: [jsxs(Box, { sx: { display: 'flex', gap: 1.5, flexWrap: 'wrap' }, children: [jsx(Button, { onClick:
|
|
115
|
+
}, children: [jsxs(Box, { sx: { display: 'flex', gap: 1.5, flexWrap: 'wrap' }, children: [jsx(Button, { onClick: handleSave, variant: "outline", size: "md", disabled: isLoading, children: isLoading ? jsxs(Fragment, { children: [jsx(CircularProgress, { size: 20 }), jsx(Typography, { sx: { paddingLeft: 2 }, children: "Saving..." })] }) : "Save" }), jsx(Button, { onClick: handleSubmit, variant: "outline", size: "md", disabled: isLoading, sx: {
|
|
119
116
|
backgroundColor: '#ac46ff52',
|
|
120
117
|
'&:hover': {
|
|
121
|
-
backgroundColor: '#ac46ff80',
|
|
122
|
-
}
|
|
123
|
-
}, children: "Submit for review" }), jsx(Button, { onClick: onDeclineWording, variant: "outline", size: "md", sx: {
|
|
118
|
+
backgroundColor: '#ac46ff80',
|
|
119
|
+
},
|
|
120
|
+
}, children: isLoading ? jsxs(Fragment, { children: [jsx(CircularProgress, { size: 20 }), jsx(Typography, { sx: { paddingLeft: 2 }, children: "Submitting..." })] }) : "Submit for review" }), jsx(Button, { onClick: onDeclineWording, variant: "outline", size: "md", sx: {
|
|
124
121
|
backgroundColor: '#ff464652',
|
|
125
122
|
'&:hover': {
|
|
126
123
|
backgroundColor: '#ff464680', // Darker purple on hover
|
|
127
124
|
}
|
|
128
|
-
}, children: "Decline wording" })] }), jsxs(Box, { sx: {
|
|
125
|
+
}, disabled: isLoading, children: "Decline wording" })] }), jsxs(Box, { sx: {
|
|
129
126
|
display: 'flex',
|
|
130
127
|
alignItems: 'center',
|
|
131
128
|
gap: 1.5,
|
|
132
129
|
justifyContent: { xs: 'space-between', sm: 'flex-end' },
|
|
133
|
-
}, children: [jsxs(Typography, { fontWeight: 500, fontSize: "1.125rem", children: [currentPage, "/", totalPages] }), jsx(NavButton, { onClick: onPrevious, "aria-label": "Previous", children: jsx(Typography, { sx: { fontSize: 16, fontWeight: 500 }, children: "Previous" }) }), jsx(NavButton, { onClick: onNext, "aria-label": "Next", children: jsx(Typography, { sx: { fontSize: 16, fontWeight: 500 }, children: "Next" }) })] })] })] })] }));
|
|
130
|
+
}, children: [jsxs(Typography, { fontWeight: 500, fontSize: "1.125rem", children: [currentPage, "/", totalPages] }), jsx(NavButton, { onClick: onPrevious, "aria-label": "Previous", disabled: isLoading, children: jsx(Typography, { sx: { fontSize: 16, fontWeight: 500 }, children: "Previous" }) }), jsx(NavButton, { onClick: onNext, "aria-label": "Next", disabled: isLoading, children: jsx(Typography, { sx: { fontSize: 16, fontWeight: 500 }, children: "Next" }) })] })] })] })] }));
|
|
134
131
|
};
|
|
135
132
|
|
|
136
133
|
export { Modal };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sources":["../../../../src/components/Modal.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n Dialog,\n DialogContent,\n IconButton,\n Box,\n Typography,\n TextField,\n Checkbox,\n FormControlLabel,\n Alert as MuiAlert,\n Chip,\n styled,\n} from '@mui/material';\nimport { Button } from './Button';\nimport { CloseRounded, ErrorOutlineRounded, StickyNote2Rounded } from '@mui/icons-material';\n\n\ninterface ModalProps {\n isOpen: boolean;\n onClose: () => void;\n status: 'mandatory' | 'optional' | 'accepted' | 'action-required' | 'action-required-note' | 'accepted-note';\n description: string;\n defaultText: string;\n note?: string;\n acceptSuggestion?: boolean;\n onAcceptSuggestionChange?: (checked: boolean) => void;\n onSave?: () => void;\n onSubmit?: () => void;\n onDeclineWording?: () => void;\n onPrevious?: () => void;\n onNext?: () => void;\n currentPage?: number;\n totalPages?: number;\n}\n\n\nconst StyledDialog = styled(Dialog)(({ theme }) => ({\n '& .MuiDialog-paper': {\n color: theme.palette.background.default,\n borderRadius: theme.shape.borderRadius,\n maxWidth: '896px',\n width: '100%',\n maxHeight: '90vh',\n },\n}));\n\n\nconst NavButton = styled(IconButton)(({ theme }) => ({\n width: 'auto',\n height: '40px',\n borderRadius: (typeof theme.shape.borderRadius === 'string'\n ? parseInt(theme.shape.borderRadius, 10)\n : theme.shape.borderRadius || 4) * 2,\n border: `2px solid ${theme.palette.dark.main}`,\n backgroundColor: theme.palette.light.main,\n padding: theme.spacing(1, 2),\n '&:hover': {\n backgroundColor: theme.palette.grey[100], // Changed from dark.main to grey[100]\n color: theme.palette.dark.main, // Keep text dark instead of light\n borderColor: theme.palette.dark.main, // Keep border dark\n },\n}));\n\n\n\nexport const Modal: React.FC<ModalProps> = ({\n isOpen,\n onClose,\n status,\n description,\n defaultText,\n note,\n acceptSuggestion: initialAcceptSuggestion = true,\n onAcceptSuggestionChange,\n onSave,\n onSubmit,\n onDeclineWording,\n onPrevious,\n onNext,\n currentPage = 1,\n totalPages = 1,\n}) => {\n const [textValue, setTextValue] = useState(defaultText);\n const [useDefaultValue, setUseDefaultValue] = useState(true);\n\n\n const handleUseDefaultValueChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setUseDefaultValue(event.target.checked);\n };\n\n\n const statusConfig = {\n mandatory: {\n color: '#F5A623',\n label: 'Mandatory',\n },\n optional: {\n color: '#F5D76E',\n label: 'Optional',\n },\n accepted: {\n color: '#A3D977',\n label: 'Accepted',\n },\n 'action-required': {\n color: '#F56B6B',\n label: 'Action Required',\n },\n 'action-required-note': {\n color: '#F56B6B',\n label: 'Action Required',\n },\n 'accepted-note': {\n color: '#A3D977',\n label: 'Accepted',\n },\n };\n\n\n const statusStyle = statusConfig[status];\n\n\n return (\n <StyledDialog open={isOpen} onClose={onClose} maxWidth=\"md\" fullWidth>\n <IconButton\n onClick={onClose}\n sx={{\n position: 'absolute',\n top: 16,\n right: 16,\n zIndex: 1,\n }}\n >\n <CloseRounded sx={{ fontSize: 24 }} />\n </IconButton>\n\n\n <DialogContent sx={{ p: { xs: 3, sm: 4, md: 6 } }}>\n {/* Status Chip */}\n <Box sx={{ mb: 3 }}>\n <Chip\n label={statusStyle.label.toUpperCase()}\n sx={{\n backgroundColor: statusStyle.color,\n color: status === 'optional' || status === 'mandatory' ? '#4D3019' : '#fff',\n fontWeight: 600,\n fontSize: '0.875rem',\n height: 'auto',\n py: 1,\n borderRadius: 0,\n px: 2,\n }}\n />\n </Box>\n\n\n {/* Description */}\n <Typography sx={{ mb: 3, lineHeight: 1.6, whiteSpace: 'pre-line' }}>\n {description}\n </Typography>\n\n\n {/* Alerts */}\n {status === 'action-required-note' && note && (\n <MuiAlert\n icon={<ErrorOutlineRounded sx={{ fontSize: 20 }} />}\n severity=\"error\"\n sx={{\n mb: 2,\n backgroundColor: '#FDFCEE',\n borderLeft: '4px solid #F56B6B',\n '& .MuiAlert-icon': {\n color: '#F56B6B',\n },\n '& .MuiAlert-message': {\n color: '#4D3019',\n },\n }}\n >\n {note}\n </MuiAlert>\n )}\n\n\n {status === 'accepted-note' && note && (\n <MuiAlert\n icon={<StickyNote2Rounded sx={{ fontSize: 20 }} />}\n severity=\"warning\"\n sx={{\n mb: 2,\n backgroundColor: '#FDFCEE',\n borderLeft: '4px solid #F5D76E',\n '& .MuiAlert-icon': {\n color: '#F5A623',\n },\n '& .MuiAlert-message': {\n color: '#4D3019',\n },\n }}\n >\n {note}\n </MuiAlert>\n )}\n\n\n {/* Text Field */}\n <TextField\n multiline\n rows={6}\n fullWidth\n value={textValue}\n onChange={(e) => setTextValue(e.target.value)}\n disabled={useDefaultValue}\n sx={{\n mb: 2,\n '& .MuiOutlinedInput-root': {\n backgroundColor: useDefaultValue ? 'rgba(0, 0, 0, 0.05)' : '#fff',\n borderRadius: 2,\n },\n }}\n />\n\n\n {/* Checkbox */}\n <FormControlLabel\n control={\n <Checkbox\n checked={useDefaultValue}\n onChange={handleUseDefaultValueChange}\n sx={{\n color: '#AC46FF',\n '&.Mui-checked': {\n color: '#AC46FF',\n },\n }}\n />\n }\n label=\"Use Default Value\"\n sx={{ mb: 3 }}\n />\n\n\n {/* Footer with Buttons and Navigation */}\n <Box\n sx={{\n display: 'flex',\n flexDirection: { xs: 'column', sm: 'row' },\n alignItems: { xs: 'stretch', sm: 'center' },\n justifyContent: 'space-between',\n gap: 2,\n pt: 3,\n borderTop: '1px solid',\n borderColor: 'divider',\n }}\n >\n {/* Action Buttons */}\n <Box sx={{ display: 'flex', gap: 1.5, flexWrap: 'wrap' }}>\n <Button onClick={onSave} variant=\"outline\" size=\"md\">\n Save\n </Button>\n <Button onClick={onSubmit} variant=\"outline\" size=\"md\" sx={{\n backgroundColor: '#ac46ff52',\n '&:hover': {\n backgroundColor: '#ac46ff80', // Darker purple on hover\n }\n }}>\n Submit for review\n </Button>\n <Button onClick={onDeclineWording} variant=\"outline\" size=\"md\" sx={{\n backgroundColor: '#ff464652',\n '&:hover': {\n backgroundColor: '#ff464680', // Darker purple on hover\n }\n }}>\n Decline wording\n </Button>\n </Box>\n\n\n {/* Navigation */}\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n gap: 1.5,\n justifyContent: { xs: 'space-between', sm: 'flex-end' },\n }}\n >\n <Typography fontWeight={500} fontSize=\"1.125rem\">\n {currentPage}/{totalPages}\n </Typography>\n <NavButton onClick={onPrevious} aria-label=\"Previous\">\n <Typography sx={{ fontSize: 16, fontWeight: 500 }}>Previous</Typography>\n </NavButton>\n <NavButton onClick={onNext} aria-label=\"Next\">\n <Typography sx={{ fontSize: 16, fontWeight: 500 }}>Next</Typography>\n </NavButton>\n </Box>\n </Box>\n </DialogContent>\n </StyledDialog>\n );\n};\n"],"names":["_jsxs","_jsx","MuiAlert"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Modal.js","sources":["../../../../src/components/Modal.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n Dialog,\n DialogContent,\n IconButton,\n Box,\n Typography,\n TextField,\n Checkbox,\n FormControlLabel,\n Alert as MuiAlert,\n Chip,\n styled,\n CircularProgress,\n} from '@mui/material';\nimport { Button } from './Button';\nimport { CloseRounded, ErrorOutlineRounded, StickyNote2Rounded } from '@mui/icons-material';\nimport { Alert } from './Alert';\n\nenum VariableState {\n Accepted = \"Accepted\",\n Pending = \"Pending\",\n Rejected = \"Rejected\",\n NotAccepted = \"Not Accepted\",\n Draft = \"Draft\"\n}\n\ninterface ModalProps {\n isOpen: boolean;\n onClose: () => void;\n status: string;\n description: string;\n defaultText: string;\n note?: string;\n onSave?: (fieldValue: string, defaultChecked: boolean) => void;\n onSubmit?: (fieldValue: string, defaultChecked: boolean) => void;\n onDeclineWording?: () => void;\n onPrevious?: () => void;\n onNext?: () => void;\n currentPage?: number;\n totalPages?: number;\n isLoading: boolean;\n}\n\n\nconst StyledDialog = styled(Dialog)(({ theme }) => ({\n '& .MuiDialog-paper': {\n color: theme.palette.background.default,\n borderRadius: theme.shape.borderRadius,\n maxWidth: '896px',\n width: '100%',\n maxHeight: '90vh',\n },\n}));\n\n\nconst NavButton = styled(IconButton)(({ theme }) => ({\n width: 'auto',\n height: '40px',\n borderRadius: (typeof theme.shape.borderRadius === 'string'\n ? parseInt(theme.shape.borderRadius, 10)\n : theme.shape.borderRadius || 4) * 2,\n border: `2px solid ${theme.palette.dark.main}`,\n backgroundColor: theme.palette.light.main,\n padding: theme.spacing(1, 2),\n '&:hover': {\n backgroundColor: theme.palette.grey[100], // Changed from dark.main to grey[100]\n color: theme.palette.dark.main, // Keep text dark instead of light\n borderColor: theme.palette.dark.main, // Keep border dark\n },\n}));\n\nfunction mapStatusToVariableState(status: string): VariableState | undefined {\n switch (status) {\n case \"Accepted\":\n return VariableState.Accepted;\n case \"Pending\":\n return VariableState.Pending;\n case \"Rejected\":\n return VariableState.Rejected;\n case \"Not Accepted\":\n return VariableState.NotAccepted;\n case \"Draft\":\n return VariableState.Draft;\n default:\n return undefined;\n }\n}\n\n\n\nexport const Modal: React.FC<ModalProps> = ({\n isOpen,\n onClose,\n status,\n description,\n defaultText,\n note,\n onSave,\n onSubmit,\n onDeclineWording,\n onPrevious,\n onNext,\n currentPage = 1,\n totalPages = 1,\n isLoading\n}) => {\n const [textValue, setTextValue] = useState(defaultText);\n const [useDefaultValue, setUseDefaultValue] = useState(true);\n\n\n const handleUseDefaultValueChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setUseDefaultValue(event.target.checked);\n };\n\n\n const variableState = mapStatusToVariableState(status);\n\n const statusConfig = {\n [VariableState.Pending]: { color: '#F5A623', label: 'Pending' },\n [VariableState.Draft]: { color: '#F5D76E', label: 'Draft' },\n [VariableState.NotAccepted]: { color: '#A3D977', label: 'Not Accepted' },\n [VariableState.Rejected]: { color: '#F56B6B', label: 'Rejected' },\n [VariableState.Accepted]: { color: '#A3D977', label: 'Accepted' },\n };\n\n const statusStyle = variableState ? statusConfig[variableState] : { color: '#ccc', label: 'Unknown' };;\n\n\n const handleSave = () => {\n onSave?.(textValue, useDefaultValue);\n };\n\n const handleSubmit = () => {\n onSubmit?.(textValue, useDefaultValue);\n };\n\n\n\n return (\n <StyledDialog open={isOpen} onClose={onClose} maxWidth=\"md\" fullWidth>\n <IconButton\n onClick={onClose}\n disabled={isLoading}\n sx={{\n position: 'absolute',\n top: 16,\n right: 16,\n zIndex: 1,\n }}\n >\n <CloseRounded sx={{ fontSize: 24 }} />\n </IconButton>\n\n\n <DialogContent sx={{ p: { xs: 3, sm: 4, md: 6 } }}>\n {/* Status Chip */}\n <Box sx={{ mb: 3 }}>\n <Chip\n label={statusStyle.label.toUpperCase()}\n sx={{\n backgroundColor: statusStyle.color,\n color: status === 'Not Accepted' || status === 'Pending' ? '#4D3019' : '#fff',\n fontWeight: 600,\n fontSize: '0.875rem',\n height: 'auto',\n py: 1,\n borderRadius: 0,\n px: 2,\n }}\n />\n </Box>\n\n\n {/* Description */}\n <Typography sx={{ mb: 3, lineHeight: 1.6, whiteSpace: 'pre-line' }}>\n {description}\n </Typography>\n\n\n {/* Alerts */}\n {status === 'Rejected' && note && (\n <Alert\n variant=\"error\"\n sx={{\n mb: 2\n }}\n >\n {note}\n </Alert>\n )}\n\n\n {status === 'Pending' && note && (\n <Alert\n variant=\"info\"\n sx={{\n mb: 2\n }}\n >\n {note}\n </Alert>\n )}\n\n\n {/* Text Field */}\n <TextField\n multiline\n rows={6}\n fullWidth\n value={textValue}\n onChange={(e) => setTextValue(e.target.value)}\n disabled={useDefaultValue || isLoading}\n sx={{\n mb: 2,\n '& .MuiOutlinedInput-root': {\n backgroundColor: useDefaultValue ? 'rgba(0, 0, 0, 0.05)' : '#fff',\n borderRadius: 2,\n },\n }}\n />\n\n\n {/* Checkbox */}\n <FormControlLabel\n control={\n <Checkbox\n checked={useDefaultValue}\n onChange={handleUseDefaultValueChange}\n sx={{\n color: '#AC46FF',\n '&.Mui-checked': {\n color: '#AC46FF',\n },\n }}\n />\n }\n label=\"Use Default Value\"\n sx={{ mb: 3 }}\n />\n\n\n {/* Footer with Buttons and Navigation */}\n <Box\n sx={{\n display: 'flex',\n flexDirection: { xs: 'column', sm: 'row' },\n alignItems: { xs: 'stretch', sm: 'center' },\n justifyContent: 'space-between',\n gap: 2,\n pt: 3,\n borderTop: '1px solid',\n borderColor: 'divider',\n }}\n >\n {/* Action Buttons */}\n <Box sx={{ display: 'flex', gap: 1.5, flexWrap: 'wrap' }}>\n <Button\n onClick={handleSave}\n variant=\"outline\"\n size=\"md\"\n disabled={isLoading}\n >\n {isLoading ? <><CircularProgress size={20} /><Typography sx={{paddingLeft: 2}}>Saving...</Typography></> : \"Save\"}\n </Button>\n <Button\n onClick={handleSubmit}\n variant=\"outline\"\n size=\"md\"\n disabled={isLoading}\n sx={{\n backgroundColor: '#ac46ff52',\n '&:hover': {\n backgroundColor: '#ac46ff80',\n },\n }}\n >\n {isLoading ? <><CircularProgress size={20} /><Typography sx={{paddingLeft: 2}}>Submitting...</Typography></> : \"Submit for review\"}\n </Button>\n <Button onClick={onDeclineWording} variant=\"outline\" size=\"md\" sx={{\n backgroundColor: '#ff464652',\n '&:hover': {\n backgroundColor: '#ff464680', // Darker purple on hover\n }\n }}\n disabled={isLoading}\n >\n Decline wording\n </Button>\n </Box>\n\n\n {/* Navigation */}\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n gap: 1.5,\n justifyContent: { xs: 'space-between', sm: 'flex-end' },\n }}\n >\n <Typography fontWeight={500} fontSize=\"1.125rem\">\n {currentPage}/{totalPages}\n </Typography>\n <NavButton onClick={onPrevious} aria-label=\"Previous\" disabled={isLoading}>\n <Typography sx={{ fontSize: 16, fontWeight: 500 }}>Previous</Typography>\n </NavButton>\n <NavButton onClick={onNext} aria-label=\"Next\" disabled={isLoading}>\n <Typography sx={{ fontSize: 16, fontWeight: 500 }}>Next</Typography>\n </NavButton>\n </Box>\n </Box>\n </DialogContent>\n </StyledDialog>\n );\n};\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
interface NoteBoxProps {
|
|
3
|
-
|
|
3
|
+
status?: string;
|
|
4
4
|
label?: string;
|
|
5
|
+
note?: string;
|
|
5
6
|
children: React.ReactNode;
|
|
6
7
|
className?: string;
|
|
7
8
|
onEditClick?: () => void;
|
|
@@ -1,32 +1,97 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { useState } from 'react';
|
|
3
|
-
import { styled, Box, IconButton
|
|
3
|
+
import { styled, Box, IconButton } from '@mui/material';
|
|
4
4
|
import { EditRounded } from '@mui/icons-material';
|
|
5
|
+
import { Alert } from './Alert.js';
|
|
5
6
|
|
|
7
|
+
// Status Enum
|
|
8
|
+
var VariableState;
|
|
9
|
+
(function (VariableState) {
|
|
10
|
+
VariableState["Accepted"] = "Accepted";
|
|
11
|
+
VariableState["Pending"] = "Pending";
|
|
12
|
+
VariableState["Rejected"] = "Rejected";
|
|
13
|
+
VariableState["NotAccepted"] = "Not Accepted";
|
|
14
|
+
VariableState["Draft"] = "Draft";
|
|
15
|
+
})(VariableState || (VariableState = {}));
|
|
16
|
+
function mapStatusToVariableState(status) {
|
|
17
|
+
switch (status) {
|
|
18
|
+
case "Accepted": return VariableState.Accepted;
|
|
19
|
+
case "Pending": return VariableState.Pending;
|
|
20
|
+
case "Rejected": return VariableState.Rejected;
|
|
21
|
+
case "Not Accepted": return VariableState.NotAccepted;
|
|
22
|
+
case "Draft": return VariableState.Draft;
|
|
23
|
+
default: return undefined;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
// Status based color configs (from Modal)
|
|
27
|
+
const statusConfig = {
|
|
28
|
+
Accepted: {
|
|
29
|
+
highlight: '#EDF9CD',
|
|
30
|
+
highlightSelected: '#DBF59A',
|
|
31
|
+
label: 'Accepted',
|
|
32
|
+
labelColor: '#2D5016',
|
|
33
|
+
chipColor: '#A3D977',
|
|
34
|
+
chipTextColor: '#fff',
|
|
35
|
+
},
|
|
36
|
+
Pending: {
|
|
37
|
+
highlight: '#F5E2FF',
|
|
38
|
+
highlightSelected: '#EBC7FF',
|
|
39
|
+
label: 'Pending',
|
|
40
|
+
labelColor: 'var(--color-secondary)',
|
|
41
|
+
chipColor: '#F5A623',
|
|
42
|
+
chipTextColor: '#4D3019',
|
|
43
|
+
alertVariant: 'info',
|
|
44
|
+
},
|
|
45
|
+
Rejected: {
|
|
46
|
+
highlight: '#FBEEEE',
|
|
47
|
+
highlightSelected: '#FFBCB3',
|
|
48
|
+
label: 'Rejected',
|
|
49
|
+
labelColor: '#CC0000',
|
|
50
|
+
chipColor: '#F56B6B',
|
|
51
|
+
chipTextColor: '#fff',
|
|
52
|
+
alertVariant: 'error',
|
|
53
|
+
},
|
|
54
|
+
'Not Accepted': {
|
|
55
|
+
highlight: '#FFF6D1',
|
|
56
|
+
highlightSelected: '#FDE58E',
|
|
57
|
+
label: 'Not Accepted',
|
|
58
|
+
labelColor: 'var(--color-secondary)',
|
|
59
|
+
chipColor: '#A3D977',
|
|
60
|
+
chipTextColor: '#4D3019',
|
|
61
|
+
},
|
|
62
|
+
Draft: {
|
|
63
|
+
highlight: '#FFEACD',
|
|
64
|
+
highlightSelected: '#FFC365',
|
|
65
|
+
label: 'Draft',
|
|
66
|
+
labelColor: 'rgba(0, 0, 0, 0.6)',
|
|
67
|
+
chipColor: '#F5D76E',
|
|
68
|
+
chipTextColor: '#fff',
|
|
69
|
+
},
|
|
70
|
+
};
|
|
6
71
|
const NoteContainer = styled(Box)({
|
|
7
72
|
position: 'relative',
|
|
8
73
|
maxWidth: '100%',
|
|
9
74
|
});
|
|
75
|
+
// Uses highlight colors driven by status exclusively
|
|
10
76
|
const HighlightWrapper = styled(Box, {
|
|
11
77
|
shouldForwardProp: (prop) => prop !== 'isHovered' &&
|
|
12
78
|
prop !== 'highlightColor' &&
|
|
13
|
-
prop !== 'highlightSelectedColor'
|
|
14
|
-
|
|
15
|
-
})(({ isHovered, highlightColor, highlightSelectedColor, isCustom }) => ({
|
|
79
|
+
prop !== 'highlightSelectedColor'
|
|
80
|
+
})(({ isHovered, highlightColor, highlightSelectedColor }) => ({
|
|
16
81
|
position: 'relative',
|
|
17
|
-
display: 'inline-block',
|
|
82
|
+
display: 'inline-block',
|
|
18
83
|
maxWidth: '100%',
|
|
19
84
|
'&:hover .edit-button': {
|
|
20
85
|
opacity: 1,
|
|
21
86
|
},
|
|
22
87
|
'& .highlight-span': {
|
|
23
|
-
background:
|
|
88
|
+
background: isHovered ? highlightSelectedColor : highlightColor,
|
|
24
89
|
padding: '2px 4px',
|
|
25
90
|
borderBottom: '2px solid rgba(77, 48, 25, 0.3)',
|
|
26
91
|
boxDecorationBreak: 'clone',
|
|
27
92
|
WebkitBoxDecorationBreak: 'clone',
|
|
28
|
-
transition:
|
|
29
|
-
cursor:
|
|
93
|
+
transition: 'background 0.2s ease',
|
|
94
|
+
cursor: 'pointer',
|
|
30
95
|
fontSize: '13px',
|
|
31
96
|
wordWrap: 'break-word',
|
|
32
97
|
overflowWrap: 'break-word',
|
|
@@ -53,59 +118,16 @@ const EditButton = styled(IconButton)(({ theme }) => ({
|
|
|
53
118
|
transform: 'translate(50%, -50%) scale(1.1)',
|
|
54
119
|
},
|
|
55
120
|
}));
|
|
56
|
-
const NoteBox = ({
|
|
121
|
+
const NoteBox = ({ status, label, note, children, className = '', onEditClick, }) => {
|
|
57
122
|
const [isHovered, setIsHovered] = useState(false);
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
highlight: '#FFEACD',
|
|
67
|
-
highlightSelected: '#FFC365',
|
|
68
|
-
label: 'Not Answered (Mandatory)',
|
|
69
|
-
labelColor: 'var(--color-secondary)',
|
|
70
|
-
},
|
|
71
|
-
optional: {
|
|
72
|
-
highlight: '#FFF6D1',
|
|
73
|
-
highlightSelected: '#FDE58E',
|
|
74
|
-
label: 'Not Answered (Optional)',
|
|
75
|
-
labelColor: 'var(--color-secondary)',
|
|
76
|
-
},
|
|
77
|
-
pending: {
|
|
78
|
-
highlight: '#F5E2FF',
|
|
79
|
-
highlightSelected: '#EBC7FF',
|
|
80
|
-
label: 'Pending',
|
|
81
|
-
labelColor: 'var(--color-secondary)',
|
|
82
|
-
},
|
|
83
|
-
accepted: {
|
|
84
|
-
highlight: '#EDF9CD',
|
|
85
|
-
highlightSelected: '#DBF59A',
|
|
86
|
-
label: 'Accepted',
|
|
87
|
-
labelColor: '#2D5016',
|
|
88
|
-
},
|
|
89
|
-
'action-required': {
|
|
90
|
-
highlight: '#FBEEEE',
|
|
91
|
-
highlightSelected: '#FFBCB3',
|
|
92
|
-
label: 'Action required before approval',
|
|
93
|
-
labelColor: '#CC0000',
|
|
94
|
-
},
|
|
95
|
-
custom: {
|
|
96
|
-
highlight: '#D9EDF8',
|
|
97
|
-
highlightSelected: '#B3E0F2',
|
|
98
|
-
label: 'Custom Text',
|
|
99
|
-
labelColor: 'var(--color-secondary)',
|
|
100
|
-
},
|
|
101
|
-
};
|
|
102
|
-
const style = variants[variant];
|
|
103
|
-
const displayLabel = label || style.label;
|
|
104
|
-
return (jsxs(NoteContainer, { className: className, children: [displayLabel && (jsx(Box, { sx: { mb: 1 }, children: jsx(Typography, { component: "span", sx: {
|
|
105
|
-
fontSize: '13px',
|
|
106
|
-
fontWeight: 500,
|
|
107
|
-
color: style.labelColor || 'rgba(0, 0, 0, 0.6)',
|
|
108
|
-
}, children: displayLabel }) })), jsxs(HighlightWrapper, { isHovered: isHovered, highlightColor: style.highlight, highlightSelectedColor: style.highlightSelected, isCustom: variant === 'custom', onMouseEnter: () => variant !== 'custom' && setIsHovered(true), onMouseLeave: () => variant !== 'custom' && setIsHovered(false), children: [jsx("span", { className: "highlight-span", children: children }), jsx(EditButton, { className: "edit-button", onClick: (e) => {
|
|
123
|
+
// Map current status
|
|
124
|
+
const variableState = mapStatusToVariableState(status);
|
|
125
|
+
const style = variableState
|
|
126
|
+
? statusConfig[variableState]
|
|
127
|
+
: {
|
|
128
|
+
highlight: '#EEE',
|
|
129
|
+
highlightSelected: '#DDD'};
|
|
130
|
+
return (jsxs(NoteContainer, { className: className, children: [variableState && style.alertVariant && note && (jsx(Alert, { variant: style.alertVariant, sx: { mb: 1 }, children: note })), jsxs(HighlightWrapper, { isHovered: isHovered, highlightColor: style.highlight, highlightSelectedColor: style.highlightSelected, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [jsx("span", { className: "highlight-span", children: children }), jsx(EditButton, { className: "edit-button", onClick: (e) => {
|
|
109
131
|
e.stopPropagation();
|
|
110
132
|
if (onEditClick) {
|
|
111
133
|
onEditClick();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NoteBox.js","sources":["../../../../src/components/NoteBox.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Box, Typography, IconButton, styled } from '@mui/material';\nimport { EditRounded } from '@mui/icons-material';\n\n\ninterface NoteBoxProps {\n variant?: 'default' | 'mandatory' | 'optional' | 'pending' | 'accepted' | 'action-required' | 'custom';\n label?: string;\n children: React.ReactNode;\n className?: string;\n onEditClick?: () => void;\n}\n\n\nconst NoteContainer = styled(Box)({\n position: 'relative',\n maxWidth: '100%',\n});\n\nconst HighlightWrapper = styled(Box,{\n shouldForwardProp: (prop) => \n prop !== 'isHovered' && \n prop !== 'highlightColor' && \n prop !== 'highlightSelectedColor' && \n prop !== 'isCustom'\n})<{ \n isHovered: boolean; \n highlightColor: string; \n highlightSelectedColor: string;\n isCustom: boolean;\n}>(({ isHovered, highlightColor, highlightSelectedColor, isCustom }) => ({\n position: 'relative',\n display: 'inline-block', // Keep this as inline-block\n maxWidth: '100%',\n '&:hover .edit-button': {\n opacity: 1,\n },\n '& .highlight-span': {\n background: isCustom ? highlightColor : (isHovered ? highlightSelectedColor : highlightColor),\n padding: '2px 4px',\n borderBottom: '2px solid rgba(77, 48, 25, 0.3)',\n boxDecorationBreak: 'clone',\n WebkitBoxDecorationBreak: 'clone',\n transition: isCustom ? 'none' : 'background 0.2s ease',\n cursor: isCustom ? 'default' : 'pointer',\n fontSize: '13px',\n wordWrap: 'break-word',\n overflowWrap: 'break-word',\n display: 'inline',\n color: '#4D3019',\n },\n}));\n\nconst EditButton = styled(IconButton)(({ theme }) => ({\n position: 'absolute',\n top: 0,\n right: 0,\n transform: 'translate(50%, -50%)',\n width: 20,\n height: 20,\n borderRadius: (typeof theme.shape.borderRadius === 'string'\n ? parseInt(theme.shape.borderRadius, 10)\n : theme.shape.borderRadius || 4) * 2,\n backgroundColor: '#4D3019',\n opacity: 0,\n transition: 'all 0.2s ease',\n boxShadow: '0 1px 3px rgba(0,0,0,0.12)',\n '&:hover': {\n backgroundColor: '#4D3019',\n transform: 'translate(50%, -50%) scale(1.1)',\n },\n}));\n\n\nexport const NoteBox: React.FC<NoteBoxProps> = ({\n variant = 'default',\n label,\n children,\n className = '',\n onEditClick,\n}) => {\n const [isHovered, setIsHovered] = useState(false);\n\n\n const variants = {\n default: {\n highlight: '#FFEACD',\n highlightSelected: '#FFC365',\n label: '',\n labelColor: '',\n },\n mandatory: {\n highlight: '#FFEACD',\n highlightSelected: '#FFC365',\n label: 'Not Answered (Mandatory)',\n labelColor: 'var(--color-secondary)',\n },\n optional: {\n highlight: '#FFF6D1',\n highlightSelected: '#FDE58E',\n label: 'Not Answered (Optional)',\n labelColor: 'var(--color-secondary)',\n },\n pending: {\n highlight: '#F5E2FF',\n highlightSelected: '#EBC7FF',\n label: 'Pending',\n labelColor: 'var(--color-secondary)',\n },\n accepted: {\n highlight: '#EDF9CD',\n highlightSelected: '#DBF59A',\n label: 'Accepted',\n labelColor: '#2D5016',\n },\n 'action-required': {\n highlight: '#FBEEEE',\n highlightSelected: '#FFBCB3',\n label: 'Action required before approval',\n labelColor: '#CC0000',\n },\n custom: {\n highlight: '#D9EDF8',\n highlightSelected: '#B3E0F2',\n label: 'Custom Text',\n labelColor: 'var(--color-secondary)',\n },\n };\n\n\n const style = variants[variant];\n const displayLabel = label || style.label;\n\n\n return (\n <NoteContainer className={className}>\n {displayLabel && (\n <Box sx={{ mb: 1 }}>\n <Typography\n component=\"span\"\n sx={{\n fontSize: '13px',\n fontWeight: 500,\n color: style.labelColor || 'rgba(0, 0, 0, 0.6)',\n }}\n >\n {displayLabel}\n </Typography>\n </Box>\n )}\n <HighlightWrapper\n isHovered={isHovered}\n highlightColor={style.highlight}\n highlightSelectedColor={style.highlightSelected}\n isCustom={variant === 'custom'}\n onMouseEnter={() => variant !== 'custom' && setIsHovered(true)}\n onMouseLeave={() => variant !== 'custom' && setIsHovered(false)}\n >\n <span className=\"highlight-span\">\n {children}\n </span>\n <EditButton\n className=\"edit-button\"\n onClick={(e) => {\n e.stopPropagation();\n if (onEditClick) {\n onEditClick();\n }\n }}\n title=\"Edit variable highlight\"\n size=\"small\"\n >\n <EditRounded sx={{fontSize:14, color:\"#FFFFFF\", strokeWidth:2}} />\n </EditButton>\n </HighlightWrapper>\n </NoteContainer>\n );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"NoteBox.js","sources":["../../../../src/components/NoteBox.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Box, Typography, IconButton, styled, Chip } from '@mui/material';\nimport { EditRounded } from '@mui/icons-material';\nimport { Alert } from './Alert';\n\n// Status Enum\nenum VariableState {\n Accepted = \"Accepted\",\n Pending = \"Pending\",\n Rejected = \"Rejected\",\n NotAccepted = \"Not Accepted\",\n Draft = \"Draft\"\n}\n\ninterface NoteBoxProps {\n status?: string; // Use only status now\n label?: string;\n note?: string;\n children: React.ReactNode;\n className?: string;\n onEditClick?: () => void;\n}\n\nfunction mapStatusToVariableState(status?: string): VariableState | undefined {\n switch (status) {\n case \"Accepted\": return VariableState.Accepted;\n case \"Pending\": return VariableState.Pending;\n case \"Rejected\": return VariableState.Rejected;\n case \"Not Accepted\": return VariableState.NotAccepted;\n case \"Draft\": return VariableState.Draft;\n default: return undefined;\n }\n}\n\n// Status based color configs (from Modal)\nconst statusConfig: {\n [key in VariableState]: {\n highlight: string;\n highlightSelected: string;\n label: string;\n labelColor: string;\n chipColor: string;\n chipTextColor: string;\n alertVariant?: \"error\" | \"info\";\n }\n} = {\n Accepted: {\n highlight: '#EDF9CD',\n highlightSelected: '#DBF59A',\n label: 'Accepted',\n labelColor: '#2D5016',\n chipColor: '#A3D977',\n chipTextColor: '#fff',\n },\n Pending: {\n highlight: '#F5E2FF',\n highlightSelected: '#EBC7FF',\n label: 'Pending',\n labelColor: 'var(--color-secondary)',\n chipColor: '#F5A623',\n chipTextColor: '#4D3019',\n alertVariant: 'info',\n },\n Rejected: {\n highlight: '#FBEEEE',\n highlightSelected: '#FFBCB3',\n label: 'Rejected',\n labelColor: '#CC0000',\n chipColor: '#F56B6B',\n chipTextColor: '#fff',\n alertVariant: 'error',\n },\n 'Not Accepted': {\n highlight: '#FFF6D1',\n highlightSelected: '#FDE58E',\n label: 'Not Accepted',\n labelColor: 'var(--color-secondary)',\n chipColor: '#A3D977',\n chipTextColor: '#4D3019',\n },\n Draft: {\n highlight: '#FFEACD',\n highlightSelected: '#FFC365',\n label: 'Draft',\n labelColor: 'rgba(0, 0, 0, 0.6)',\n chipColor: '#F5D76E',\n chipTextColor: '#fff',\n },\n};\n\nconst NoteContainer = styled(Box)({\n position: 'relative',\n maxWidth: '100%',\n});\n\n// Uses highlight colors driven by status exclusively\nconst HighlightWrapper = styled(Box, {\n shouldForwardProp: (prop) => \n prop !== 'isHovered' && \n prop !== 'highlightColor' && \n prop !== 'highlightSelectedColor'\n})<{\n isHovered: boolean;\n highlightColor: string;\n highlightSelectedColor: string;\n}>(({ isHovered, highlightColor, highlightSelectedColor }) => ({\n position: 'relative',\n display: 'inline-block',\n maxWidth: '100%',\n '&:hover .edit-button': {\n opacity: 1,\n },\n '& .highlight-span': {\n background: isHovered ? highlightSelectedColor : highlightColor,\n padding: '2px 4px',\n borderBottom: '2px solid rgba(77, 48, 25, 0.3)',\n boxDecorationBreak: 'clone',\n WebkitBoxDecorationBreak: 'clone',\n transition: 'background 0.2s ease',\n cursor: 'pointer',\n fontSize: '13px',\n wordWrap: 'break-word',\n overflowWrap: 'break-word',\n display: 'inline',\n color: '#4D3019',\n },\n}));\n\nconst EditButton = styled(IconButton)(({ theme }) => ({\n position: 'absolute',\n top: 0,\n right: 0,\n transform: 'translate(50%, -50%)',\n width: 20,\n height: 20,\n borderRadius: (typeof theme.shape.borderRadius === 'string'\n ? parseInt(theme.shape.borderRadius, 10)\n : theme.shape.borderRadius || 4) * 2,\n backgroundColor: '#4D3019',\n opacity: 0,\n transition: 'all 0.2s ease',\n boxShadow: '0 1px 3px rgba(0,0,0,0.12)',\n '&:hover': {\n backgroundColor: '#4D3019',\n transform: 'translate(50%, -50%) scale(1.1)',\n },\n}));\n\nexport const NoteBox: React.FC<NoteBoxProps> = ({\n status,\n label,\n note,\n children,\n className = '',\n onEditClick,\n}) => {\n const [isHovered, setIsHovered] = useState(false);\n\n // Map current status\n const variableState = mapStatusToVariableState(status);\n const style = variableState\n ? statusConfig[variableState]\n : {\n highlight: '#EEE',\n highlightSelected: '#DDD',\n label: label || '',\n labelColor: 'rgba(0,0,0,0.6)',\n chipColor: '#ccc',\n chipTextColor: '#4D3019',\n };\n\n return (\n <NoteContainer className={className}>\n {/* Alert for note when status matches and note available */}\n {variableState && style.alertVariant && note && (\n <Alert variant={style.alertVariant} sx={{ mb: 1 }}>\n {note}\n </Alert>\n )}\n\n {/* Highlighted content box */}\n <HighlightWrapper\n isHovered={isHovered}\n highlightColor={style.highlight}\n highlightSelectedColor={style.highlightSelected}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n >\n <span className=\"highlight-span\">{children}</span>\n <EditButton\n className=\"edit-button\"\n onClick={(e) => {\n e.stopPropagation();\n if (onEditClick) {\n onEditClick();\n }\n }}\n title=\"Edit variable highlight\"\n size=\"small\"\n >\n <EditRounded sx={{ fontSize: 14, color: \"#FFFFFF\", strokeWidth: 2 }} />\n </EditButton>\n </HighlightWrapper>\n </NoteContainer>\n );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|