@madie/madie-design-system 1.2.36 → 1.2.38

package/.storybook/main.js

@@ -39,6 +39,12 @@ module.exports = {
                 },
             ],
         });
+        // the below lines add hot reload, but somehow put CI/CD into a hanging state
+        // config.watchOptions = {
+        //     aggregateTimeout: 300, // Delay before rebuilding after the first change
+        //     poll: 1000,            // Check for changes every second
+        //     ignored: /node_modules/, // Ignore node_modules to improve performance
+        // };
 
         return config;
     },

package/components/Instant/Instant.stories.js

@@ -0,0 +1,28 @@
+import React, { useState } from "react";
+import Instant from "./index";
+import { withKnobs } from "@storybook/addon-knobs";
+
+export default {
+    title: "Instant",
+    component: Instant,
+    decorators: [withKnobs],
+};
+
+export const InstantComponent = (args) => {
+    const [value, setValue] = useState("");
+    const handleDateTimeChange = (v) => {
+        setValue(v);
+    };
+    return (
+        <div className="qpp-u-padding--16">
+            <div> Date string: {value} </div>
+            <Instant
+                disabled={false}
+                id="status_date_time"
+                label="Status Date/Time"
+                handleDateTimeChange={handleDateTimeChange}
+                dateTimeValue={value}
+            />
+        </div>
+    );
+};

package/components/Instant/index.jsx

@@ -0,0 +1,267 @@
+import React from "react";
+import PropTypes from "prop-types";
+import TextField from "../TextField";
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
+import { FormControl, Box } from "@mui/material";
+
+dayjs.extend(utc);
+dayjs.utc();
+dayjs.extend(timezone);
+const formatDateTime = (dateTime) =>
+    dayjs.utc(dateTime).format("YYYY-MM-DDTHH:mm:ss.SSSZ");
+export const defaultDateFieldStyles = {
+    width: "170px",
+    height: 40,
+    marginTop: "8px",
+    "& .MuiOutlinedInput-notchedOutline": {
+        border: "1px solid #8C8C8C",
+        borderRadius: "3px",
+        "& legend": {
+            width: 0,
+        },
+    },
+    "& .MuiOutlinedInput-root": {
+        "&&": {
+            borderRadius: "3px",
+        },
+    },
+    "& .MuiInputBase-input": {
+        color: "#333333",
+        fontFamily: "Rubik",
+        fontSize: 14,
+        borderRadius: "3px",
+        padding: "9px",
+        Width: "170px",
+        "&::placeholder": {
+            opacity: 1,
+            color: "#717171",
+            fontFamily: "Rubik",
+            fontSize: 14,
+        },
+    },
+};
+const Instant = ({
+    dateTimeValue,
+    handleDateTimeChange,
+    required = false,
+    disabled,
+    id = "default_dateTime-input",
+    textFieldSx = {},
+    dateFieldSx = {},
+    error = false,
+    helperText,
+    datePickerProps = {},
+    onBlur,
+    ...rest
+}) => {
+    const textFieldStyles = {
+        width: "55px",
+        height: "40px",
+        "& .MuiInputBase-input": {
+            color: "#333",
+            fontFamily: "Rubik",
+            fontSize: 14,
+            borderRadius: "3px",
+            padding: "9px 5px 9px 5px",
+            "&::placeholder": {
+                opacity: 1,
+                color: "#717171",
+            },
+        },
+    };
+    const handleHoursChange = (e) => {
+        const newHours = parseInt(e.target.value, 10);
+        if (dateTimeValue) {
+            const updatedDateTime = dayjs
+                .utc(dateTimeValue)
+                .set("hour", newHours);
+            handleDateTimeChange(formatDateTime(updatedDateTime));
+        }
+    };
+    const handleMinutesChange = (e) => {
+        const newMinutes = parseInt(e.target.value, 10);
+        if (dateTimeValue) {
+            const updatedDateTime = dayjs
+                .utc(dateTimeValue)
+                .set("minute", newMinutes);
+            handleDateTimeChange(formatDateTime(updatedDateTime));
+        }
+    };
+    const handleSecondsChange = (e) => {
+        const newSeconds = parseInt(e.target.value, 10);
+        if (dateTimeValue) {
+            const updatedDateTime = dayjs
+                .utc(dateTimeValue)
+                .set("second", newSeconds);
+            handleDateTimeChange(formatDateTime(updatedDateTime));
+        }
+    };
+    const handleMillisecondsChange = (e) => {
+        const newMilliseconds = parseInt(e.target.value, 10);
+        if (dateTimeValue) {
+            const updatedDateTime = dayjs
+                .utc(dateTimeValue)
+                .set("millisecond", newMilliseconds);
+            handleDateTimeChange(formatDateTime(updatedDateTime));
+        }
+    };
+    const onDateChange = (newDate) => {
+        if (!isNaN(newDate)) {
+            if (dateTimeValue) {
+                const updatedDate = dayjs.utc(newDate);
+                handleDateTimeChange(formatDateTime(updatedDate));
+            } else {
+                const updatedDate = newDate.utc(newDate);
+                handleDateTimeChange(formatDateTime(updatedDate));
+            }
+        }
+    };
+    return (
+        <FormControl error={error}>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <Box
+                    sx={{
+                        display: "flex",
+                        flexDirection: "row",
+                        flexGrow: 1,
+                    }}
+                >
+                    <Box sx={{ marginRight: "24px" }}>
+                        <DatePicker
+                            value={
+                                dateTimeValue ? dayjs.utc(dateTimeValue) : null
+                            }
+                            onChange={onDateChange}
+                            disabled={disabled}
+                            onClose={() => (onBlur ? onBlur() : undefined)}
+                            slotProps={{
+                                textField: (params) => {
+                                    const { InputProps } = params;
+                                    InputProps["data-testid"] = id;
+                                    InputProps["aria-required"] = required;
+                                    return {
+                                        id: id,
+                                        label: "Date",
+                                        sx: {
+                                            ...defaultDateFieldStyles,
+                                            ...dateFieldSx,
+                                        },
+                                        value: dateTimeValue
+                                            ? dayjs.utc(dateTimeValue)
+                                            : null,
+                                        onChange: onDateChange,
+                                        error,
+                                        helperText: helperText,
+                                        onBlur: onBlur,
+                                        ...rest,
+                                    };
+                                },
+                                openPickerButton: {
+                                    id: `${id}-open-picker-button`,
+                                    "data-testid": `${id}-open-picker-button`,
+                                },
+                            }}
+                            slots={{ textField: TextField }}
+                        />
+                    </Box>
+                    <TextField
+                        id={`${id}-hour`}
+                        data-testid={`${id}-hour`}
+                        value={
+                            dateTimeValue ? dayjs.utc(dateTimeValue).hour() : 0
+                        }
+                        onChange={handleHoursChange}
+                        label="Hr"
+                        type="number"
+                        disabled={!dateTimeValue}
+                        inputProps={{
+                            min: 0,
+                            max: 24,
+                        }}
+                        textFieldStyles={textFieldStyles}
+                        required={required}
+                    />
+                    <TextField
+                        id={`${id}-minute`}
+                        data-testid={`${id}-minute`}
+                        value={
+                            dateTimeValue
+                                ? dayjs.utc(dateTimeValue).minute()
+                                : 0
+                        }
+                        onChange={handleMinutesChange}
+                        label="Min"
+                        type="number"
+                        disabled={!dateTimeValue}
+                        inputProps={{
+                            min: 0,
+                            max: 60,
+                        }}
+                        textFieldStyles={textFieldStyles}
+                        required={required}
+                    />
+                    <TextField
+                        id={`${id}-second`}
+                        data-testid={`${id}-second`}
+                        value={
+                            dateTimeValue
+                                ? dayjs.utc(dateTimeValue).second()
+                                : 0
+                        }
+                        onChange={handleSecondsChange}
+                        label="Sec"
+                        type="number"
+                        disabled={!dateTimeValue}
+                        inputProps={{
+                            min: 0,
+                            max: 60,
+                        }}
+                        textFieldStyles={textFieldStyles}
+                        required={required}
+                    />
+                    <TextField
+                        id={`${id}-millisecond`}
+                        data-testid={`${id}-millisecond`}
+                        value={
+                            dateTimeValue
+                                ? dayjs.utc(dateTimeValue).millisecond()
+                                : 0
+                        }
+                        onChange={handleMillisecondsChange}
+                        label="MS"
+                        type="number"
+                        disabled={!dateTimeValue}
+                        inputProps={{
+                            min: 0,
+                            max: 999,
+                        }}
+                        textFieldStyles={textFieldStyles}
+                        required={required}
+                    />
+                </Box>
+            </LocalizationProvider>
+        </FormControl>
+    );
+};
+
+Instant.propTypes = {
+    id: PropTypes.string,
+    placeholder: PropTypes.string,
+    disabled: PropTypes.bool,
+    required: PropTypes.bool,
+    dateTimeValue: PropTypes.any,
+    handleDateTimeChange: PropTypes.function,
+    textFieldSx: PropTypes.any,
+    dateFieldSx: PropTypes.any,
+    error: PropTypes.bool,
+    helperText: PropTypes.string,
+    datePickerProps: PropTypes.any,
+    onBlur: PropTypes.any,
+};
+
+export default Instant;

package/components/MadieConfirmDialog/MadieConfirmDialog.stories.js

@@ -0,0 +1,104 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { withKnobs } from "@storybook/addon-knobs";
+import MadieConfirmDialog from "./index";
+import Button from "../Button";
+export default {
+    title: "MadieConfirmDialog",
+    component: MadieConfirmDialog,
+    decorators: [withKnobs],
+};
+
+const Wrapper = ({ children }) => (
+    <div className="qpp-u-padding--16" style={{ width: 300 }}>
+        {children}
+    </div>
+);
+Wrapper.propTypes = {
+    className: PropTypes.string,
+    children: PropTypes.node,
+};
+
+export const ConfirmDialog = () => {
+    const [open, setOpen] = useState(false);
+    const onClose = () => {
+        setOpen(false);
+    };
+    const onContinue = () => {
+        setOpen(false);
+    };
+
+    const [openDiscardDialog, setOpenDiscardDialog] = useState(false);
+    const onDiscardDialogClose = () => {
+        setOpenDiscardDialog(false);
+    };
+    const onDiscardDialogContinue = () => {
+        setOpenDiscardDialog(false);
+    };
+
+    const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
+    const onDeleteDialogClose = () => {
+        setOpenDeleteDialog(false);
+    };
+    const onDeleteDialogContinue = () => {
+        setOpenDeleteDialog(false);
+    };
+
+    return (
+        <div className="qpp-u-padding--16" style={{ width: 300 }}>
+            <p>
+                <Button variant="cyan" onClick={() => setOpen(true)}>
+                    open Confirm Dialog
+                </Button>
+            </p>
+            <p>
+                <Button
+                    variant="cyan"
+                    onClick={() => setOpenDiscardDialog(true)}
+                >
+                    open Discard Dialog
+                </Button>
+            </p>
+            <p>
+                <Button
+                    variant="cyan"
+                    onClick={() => {
+                        setOpenDeleteDialog(true);
+                    }}
+                >
+                    open Delete Dialog
+                </Button>
+            </p>
+            <MadieConfirmDialog
+                open={open}
+                onContinue={onContinue}
+                onClose={onClose}
+                warning="You are about to Sign Out from UMLS. You will need to enter your UMLS API key to log back in."
+                dialogTitle="Are you sure?"
+                name="log out of UMLS"
+                action="confirm"
+            />
+            <MadieConfirmDialog
+                open={openDiscardDialog}
+                onContinue={onDiscardDialogContinue}
+                onClose={onDiscardDialogClose}
+                warning="This Action cannot be undone."
+                dialogTitle="Discard Changes"
+                name="discard your changes"
+                action="discard"
+                continueText="Yes, Discard All Changes"
+                cancelText="No, Keep Working"
+            />
+            <MadieConfirmDialog
+                open={openDeleteDialog}
+                onContinue={onDeleteDialogContinue}
+                onClose={onDeleteDialogClose}
+                warning="This Action cannot be undone."
+                dialogTitle="Are You Sure"
+                name="delete this Definition"
+                action="delete"
+                continueText="Yes, Delete"
+            />
+        </div>
+    );
+};

package/components/MadieConfirmDialog/index.jsx

@@ -0,0 +1,64 @@
+import React from "react";
+import PropTypes from "prop-types";
+import ErrorIcon from "@mui/icons-material/Error";
+import MadieDialog from "../MadieDialog";
+
+const MadieConfirmDialog = ({
+    open,
+    onClose,
+    onContinue,
+    action,
+    warning,
+    ...otherDialogProps
+}) => (
+    <MadieDialog
+        title={otherDialogProps.dialogTitle}
+        dialogProps={{
+            open: open,
+            onClose,
+            "data-testid": `${action}-dialog`,
+        }}
+        cancelButtonProps={{
+            variant: "secondary",
+            onClick: onClose,
+            cancelText: otherDialogProps.cancelText
+                ? otherDialogProps.cancelText
+                : "Cancel",
+            "data-testid": `${action}-dialog-cancel-button`,
+        }}
+        continueButtonProps={{
+            variant: "danger-primary",
+            type: "submit",
+            "data-testid": `${action}-dialog-continue-button`,
+            continueText: otherDialogProps.continueText
+                ? otherDialogProps.continueText
+                : "Continue",
+            onClick: onContinue,
+        }}
+    >
+        <div id="confirm-dialog-body">
+            <section className="dialog-warning-body">
+                {action?.includes("discard") && (
+                    <p>You have unsaved changes.</p>
+                )}
+                <p>
+                    Are you sure you want to{" "}
+                    <span className="strong">{otherDialogProps.name}</span>?
+                </p>
+            </section>
+            <section className="dialog-warning-action">
+                <ErrorIcon />
+                <p>{warning}</p>
+            </section>
+        </div>
+    </MadieDialog>
+);
+MadieConfirmDialog.propTypes = {
+    open: PropTypes.bool,
+    onClose: PropTypes.func,
+    onContinue: PropTypes.func,
+    action: PropTypes.string,
+    warning: PropTypes.string,
+};
+
+export default MadieConfirmDialog;

package/components/TextField/index.jsx

@@ -18,6 +18,7 @@ const TextField = ({
     tooltipText,
     inputProps,
     labelColor = undefined,
+    textFieldStyles = {},
     ...rest
 }) => {
     // get a copy of input props
@@ -40,6 +41,39 @@ const TextField = ({
         }
     }
 
+    const extendedTextFieldStyles = {
+        borderRadius: "3px",
+        border: "none",
+        marginTop: "8px",
+        "& .MuiOutlinedInput-notchedOutline": {
+            borderRadius: "3px",
+            borderColor: "#8C8C8C",
+            "& legend": {
+                width: 0,
+            },
+        },
+        "& .MuiInputBase-root": {
+            height: "auto",
+        },
+        "& .MuiOutlinedInput-root": {
+            "&&": {
+                borderRadius: "3px",
+            },
+        },
+        // input base selector
+        "& .MuiInputBase-input": {
+            color: "#333",
+            fontFamily: "Rubik",
+            fontSize: 14,
+            borderRadius: "3px",
+            padding: "9px 14px",
+            "&::placeholder": {
+                opacity: 1,
+                color: "#717171",
+            },
+        },
+        ...textFieldStyles,
+    };
     return (
         <FormControl fullWidth error={error}>
             <div
@@ -128,45 +162,7 @@ const TextField = ({
                 </FormHelperText>
             )}
             <MUITextField
-                sx={[
-                    {
-                        borderRadius: "3px",
-                        border: "none",
-                        marginTop: "8px",
-                        "& .MuiOutlinedInput-notchedOutline": {
-                            borderRadius: "3px",
-                            borderColor: "#8C8C8C",
-                            "& legend": {
-                                width: 0,
-                            },
-                        },
-                        "& .MuiInputBase-root": {
-                            height: "auto",
-                        },
-                        "& .MuiOutlinedInput-root": {
-                            "&&": {
-                                borderRadius: "3px",
-                            },
-                        },
-                        // input base selector
-                        "& .MuiInputBase-input": {
-                            color: "#333",
-                            fontFamily: "Rubik",
-                            fontSize: 14,
-                            borderRadius: "3px",
-                            padding: "9px 14px",
-                            "&::placeholder": {
-                                opacity: 1,
-                                color: "#717171",
-                            },
-                        },
-                    },
-                    error && {
-                        "& .MuiOutlinedInput-notchedOutline": {
-                            borderColor: "#AE1C1C !important",
-                        },
-                    },
-                ]}
+                sx={extendedTextFieldStyles}
                 label={null}
                 error={error}
                 disabled={disabled}
@@ -180,6 +176,7 @@ const TextField = ({
 
 TextField.propTypes = {
     id: PropTypes.string,
+    textFieldStyles: PropTypes.object,
     error: PropTypes.bool,
     helperText: PropTypes.string,
     required: PropTypes.bool,

package/components/index.js

@@ -9,6 +9,7 @@ import DateField from "./DateField/DateField";
 import DateTimeField from "./DateTimeField/DateTimeField";
 import FlashNotification from "./FlashNotification/FlashNotificationUI";
 import Footer from "./Footer/FooterUI";
+import Instant from "./Instant";
 import InputLabel from "./InputLabel";
 import FormControlLabel from "./FormControlLabel";
 import MadieAlert from "./MadieAlert";
@@ -137,6 +138,7 @@ export {
     InputLabel,
     Icons,
     Infotip,
+    Instant,
     Modal,
     MadieAlert,
     MadieDialog,