@madie/madie-design-system 2.0.0 → 2.0.2

package/.babelrc

@@ -1,4 +1,16 @@
 {
-    "presets": ["@babel/preset-react", "@babel/preset-env"],
-    "plugins": ["@babel/plugin-transform-modules-umd", "@babel/plugin-transform-class-properties"]
+  "presets": [
+    ["@babel/preset-react", { "runtime": "automatic" }],
+    ["@babel/preset-env", { "modules": false }]
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties"
+  ],
+  "env": {
+    "test": {
+      "presets": [
+        ["@babel/preset-env", { "targets": { "node": "current" } }]
+      ]
+    }
+  }
 }

package/.storybook/preview.js

@@ -3,4 +3,4 @@ import "../../react/styles/_main.scss";
 export const parameters = {
     layout: "fullscreen",
 };
-export const tags = ["autodocs"];
+export const tags = ["autodocs"];

package/components/Accordion/index.jsx

@@ -1,17 +1,29 @@
 import React, { useState, useRef, useEffect } from "react";
-import PropTypes from "prop-types";
 import { Chevron } from "../../lib/Chevron.jsx";
 
-const Accordion = (props) => {
+/**
+ * @param {{
+ *   title?: string,
+ *   subTitle?: string,
+ *   children: React.ReactNode,
+ *   centerItem?: string,
+ *   rightItem?: string,
+ *   isOpen?: boolean
+ * }} props
+ */
+const Accordion = ({
+    title = "",
+    subTitle,
+    children,
+    centerItem,
+    rightItem,
+    isOpen = false,
+}) => {
     const content = useRef(null);
-    const [setActive, setActiveState] = useState(props.isOpen ? "active" : "");
+    const [setActive, setActiveState] = useState(isOpen ? "active" : "");
     const ariaPressed = setActive ? "true" : "false";
-    const getHeight = (node) => {
-        if (node) {
-            return `${node.scrollHeight}px`;
-        }
-        return "auto";
-    };
+
+    const getHeight = (node) => (node ? `${node.scrollHeight}px` : "auto");
     const height = setActive ? getHeight(content.current) : "0px";
     const rotate = setActive ? "accordion-icon rotate" : "accordion-icon";
 
@@ -28,37 +40,37 @@ const Accordion = (props) => {
     }
 
     useEffect(() => {
-        if (props.isOpen) {
+        if (isOpen) {
             openAccordion();
         } else {
             closeAccordion();
         }
-    }, [props.isOpen]);
+    }, [isOpen]);
 
     return (
         <div className="accordion-section" data-testid="accordion">
             <button
                 className={`accordion ${setActive}`}
-                aria-label={props.title}
+                aria-label={title}
                 aria-pressed={ariaPressed}
                 aria-expanded={ariaPressed}
                 tabIndex="0"
                 onClick={toggleAccordion}
             >
                 <div className="accordion-left-title">
-                    <p className="accordion-title">{props.title}</p>
-                    {props.subTitle && (
-                        <p className="accordion-subtitle">{props.subTitle}</p>
+                    <p className="accordion-title">{title}</p>
+                    {subTitle && (
+                        <p className="accordion-subtitle">{subTitle}</p>
                     )}
                 </div>
-                {props.centerItem && (
+                {centerItem && (
                     <div className="accordion-center">
-                        <p>{props.centerItem}</p>
+                        <p>{centerItem}</p>
                     </div>
                 )}
-                {props.rightItem && (
+                {rightItem && (
                     <div className="accordion-right">
-                        <p>{props.rightItem}</p>
+                        <p>{rightItem}</p>
                     </div>
                 )}
                 <div className="chevron-container">
@@ -70,26 +82,10 @@ const Accordion = (props) => {
                 style={{ maxHeight: height }}
                 className="accordion-content"
             >
-                <div className="accordion-text dashed-border">
-                    {props.children}
-                </div>
+                <div className="accordion-text dashed-border">{children}</div>
             </div>
         </div>
     );
 };
 
-Accordion.propTypes = {
-    title: PropTypes.string.isRequired,
-    subTitle: PropTypes.string,
-    children: PropTypes.any.isRequired,
-    centerItem: PropTypes.string,
-    rightItem: PropTypes.string,
-    isOpen: PropTypes.bool,
-};
-
-Accordion.defaultProps = {
-    title: "",
-    isOpen: false,
-};
-
 export default Accordion;

package/components/AutoComplete/AutoComplete.jsx

@@ -6,11 +6,10 @@ import {
     TextField,
     Checkbox,
 } from "@mui/material";
-import PropTypes from "prop-types";
 import InputLabel from "../InputLabel";
 import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
 import CheckBoxIcon from "@mui/icons-material/CheckBox";
-import { ReadOnlyTextField } from "../index";
+import ReadOnlyTextField from "../ReadOnlyTextField";
 import _ from "lodash";
 
 const autoCompleteStyles = {
@@ -244,18 +243,4 @@ const AutoComplete = ({
     );
 };
 
-AutoComplete.propTypes = {
-    id: PropTypes.string,
-    dataTestId: PropTypes.string,
-    placeholder: PropTypes.string,
-    required: PropTypes.bool,
-    disabled: PropTypes.bool,
-    multiple: PropTypes.bool,
-    error: PropTypes.bool,
-    label: PropTypes.string,
-    helperText: PropTypes.string,
-    options: PropTypes.arrayOf(PropTypes.element),
-    onChange: PropTypes.any,
-};
-
 export default AutoComplete;

package/components/Button/Button.stories.js

@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import FeatherIcon from "feather-icons-react";
 
 import Button, { TextButton } from "./index";
@@ -12,10 +11,6 @@ export default {
 const Container = ({ className = "", children }) => (
     <div className={`qppds qpp-u-padding--16 ${className}`}>{children}</div>
 );
-Container.propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node,
-};
 
 export const Primary = () => (
     <div>

package/components/Button/index.js

@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 
 const VARIANTS = [
     "secondary",
@@ -14,27 +13,42 @@ const VARIANTS = [
 ];
 const SIZES = ["big"];
 
+/**
+ * @param {{
+ *   children?: React.ReactNode,
+ *   className?: string,
+ *   href?: string,
+ *   loading?: boolean,
+ *   onClick?: () => void,
+ *   size?: string | null,
+ *   type?: string,
+ *   variant?: string | null,
+ *   [key: string]: any
+ * }} props
+ */
 const Button = ({
-    children,
-    className,
-    href,
-    loading,
-    onClick,
-    size,
-    variant,
-    type,
+    children = null,
+    className = "",
+    href = "",
+    loading = false,
+    onClick = () => null,
+    size = null,
+    type = "button",
+    variant = null,
     ...rest
 }) => {
     let btnClass = "qpp-c-button";
 
     if (VARIANTS.includes(variant)) {
-        btnClass = btnClass.concat(" ", `qpp-c-button--${variant}`);
+        btnClass += ` qpp-c-button--${variant}`;
     }
+
     if (SIZES.includes(size)) {
-        btnClass = btnClass.concat(" ", `qpp-c-button--${size}`);
+        btnClass += ` qpp-c-button--${size}`;
     }
+
     if (className) {
-        btnClass = btnClass.concat(" ", className);
+        btnClass += ` ${className}`;
     }
 
     if (href) {
@@ -42,17 +56,18 @@ const Button = ({
             <a
                 href={href}
                 data-testid="ds-btn"
-                className={btnClass || ""}
+                className={btnClass}
                 onClick={onClick}
             >
                 {children}
             </a>
         );
     }
+
     return (
         <button
             data-testid="ds-btn"
-            className={btnClass || ""}
+            className={btnClass}
             onClick={onClick}
             disabled={loading}
             type={type}
@@ -63,38 +78,13 @@ const Button = ({
     );
 };
 
-Button.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    href: PropTypes.string,
-    loading: PropTypes.bool,
-    onClick: PropTypes.func,
-    size: PropTypes.oneOf(SIZES),
-    type: PropTypes.string,
-    variant: PropTypes.oneOf(VARIANTS),
-};
-
-Button.defaultProps = {
-    children: false,
-    className: "",
-    href: "",
-    loading: false,
-    onClick: () => null,
-    size: null,
-    type: "button",
-    variant: null,
-};
-
+/**
+ * @param {{
+ *   className?: string
+ * } & React.ComponentProps<typeof Button>} props
+ */
 export const TextButton = ({ className = "", ...props }) => (
     <Button className={`qpp-c-button--text ${className}`} {...props} />
 );
 
-TextButton.propTypes = {
-    className: PropTypes.string,
-};
-
-TextButton.defaultProps = {
-    className: "",
-};
-
 export default Button;

package/components/DateField/DateField.jsx

@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import TextField from "../TextField";
 import { Box } from "@mui/material";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
@@ -7,7 +6,7 @@ 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 { ReadOnlyTextField } from "../index";
+import ReadOnlyTextField from "../ReadOnlyTextField";
 
 dayjs.extend(utc);
 dayjs.utc();
@@ -112,17 +111,5 @@ const DateField = ({
         </LocalizationProvider>
     );
 };
-DateField.propTypes = {
-    label: PropTypes.string.isRequired,
-    value: PropTypes.object,
-    handleDateChange: PropTypes.func.isRequired,
-    disabled: PropTypes.bool,
-    id: PropTypes.string,
-    error: PropTypes.bool,
-    helperText: PropTypes.string,
-    required: PropTypes.bool,
-    containerSx: PropTypes.object,
-    textFieldSx: PropTypes.object,
-};
 
 export default DateField;

package/components/DateTimeField/DateTimeField.jsx

@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import TextField from "../TextField";
 import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
@@ -8,7 +7,7 @@ import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 
 import { FormControl } from "@mui/material";
-import { ReadOnlyTextField } from "../index";
+import ReadOnlyTextField from "../ReadOnlyTextField";
 
 dayjs.extend(utc);
 dayjs.utc();
@@ -93,12 +92,5 @@ const DateTimeField = ({
         </FormControl>
     );
 };
-DateTimeField.propTypes = {
-    id: PropTypes.string,
-    dateTimeValue: PropTypes.object,
-    handleDateTimeChange: PropTypes.func.isRequired,
-    label: PropTypes.string.isRequired,
-    disabled: PropTypes.bool,
-};
 
 export default DateTimeField;

package/components/InputLabel/index.jsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { InputLabel as MUIInputLabel } from "@mui/material";
-import PropTypes from "prop-types";
 
 const Label = ({ required, disabled, error, ...rest }) => {
     return (
@@ -45,9 +44,5 @@ const Label = ({ required, disabled, error, ...rest }) => {
         />
     );
 };
-Label.propTypes = {
-    required: PropTypes.bool.isRequired,
-    disabled: PropTypes.bool.isRequired,
-    error: PropTypes.bool,
-};
+
 export default Label;

package/components/Instant/index.jsx

@@ -1,5 +1,4 @@
 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";
@@ -249,19 +248,4 @@ const Instant = ({
     );
 };
 
-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/Link/index.js

@@ -0,0 +1,42 @@
+import React from "react";
+
+const VARIANTS = ["white", "gray"];
+
+const DSLink = ({
+    className = "",
+    href = "",
+    download = false,
+    ariaLabel = null,
+    onClick = () => null,
+    children = null,
+    variant = null,
+    ...rest
+}) => {
+    let linkClass = "qpp-c-link";
+
+    if (VARIANTS.includes(variant)) {
+        linkClass +=
+            variant === "gray"
+                ? " qpp-u-color--gray-60"
+                : ` qpp-u-color--${variant}`;
+    }
+
+    if (className) {
+        linkClass += ` ${className}`;
+    }
+
+    return (
+        <a
+            aria-label={ariaLabel}
+            className={linkClass}
+            href={href}
+            download={download}
+            onClick={onClick}
+            {...rest}
+        >
+            {children}
+        </a>
+    );
+};
+
+export default DSLink;

package/components/MadieAlert/index.jsx

@@ -12,7 +12,6 @@ import { IconButton } from "@mui/material";
 import ClearIcon from "@mui/icons-material/Clear";
 import Toast from "../Toast/index";
 import classNames from "classnames";
-import PropTypes from "prop-types";
 
 // Define icon mapping outside component to avoid recreation on each render
 const typeToIconMap = {
@@ -144,15 +143,6 @@ const ActionButton = ({ tooltip, onClick, icon, testId, sx }) => (
     </Tooltip>
 );
 
-// Add PropTypes for ActionButton
-ActionButton.propTypes = {
-    tooltip: PropTypes.string.isRequired,
-    onClick: PropTypes.func.isRequired,
-    icon: PropTypes.node.isRequired,
-    testId: PropTypes.string.isRequired,
-    sx: PropTypes.object,
-};
-
 const MadieAlert = ({
     type = "warning",
     visible = true,
@@ -161,7 +151,7 @@ const MadieAlert = ({
     minimizeAlerts = false,
     alertProps,
     closeButtonProps,
-    copyButton,
+    copyButton = false,
     alerts = null,
 }) => {
     // Consolidate related state
@@ -370,33 +360,4 @@ const MadieAlert = ({
     );
 };
 
-// PropTypes definition
-MadieAlert.propTypes = {
-    type: PropTypes.string,
-    visible: PropTypes.bool,
-    content: PropTypes.node,
-    canClose: PropTypes.bool,
-    alertProps: PropTypes.object,
-    closeButtonProps: PropTypes.object,
-    copyButton: PropTypes.bool,
-    minimizeAlerts: PropTypes.bool,
-    alerts: PropTypes.arrayOf(
-        PropTypes.shape({
-            type: PropTypes.string,
-            visible: PropTypes.bool,
-            content: PropTypes.node,
-            canClose: PropTypes.bool,
-            alertProps: PropTypes.object,
-            closeButtonProps: PropTypes.object,
-            copyButton: PropTypes.bool,
-        }),
-    ),
-};
-
-MadieAlert.defaultProps = {
-    copyButton: false,
-    minimizeAlerts: false,
-    alerts: null,
-};
-
 export default MadieAlert;

package/components/MadieConfirmDialog/MadieConfirmDialog.stories.js

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import PropTypes from "prop-types";
 import MadieConfirmDialog from "./index";
 import Button from "../Button";
 
@@ -13,10 +12,6 @@ const Wrapper = ({ children }) => (
         {children}
     </div>
 );
-Wrapper.propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node,
-};
 
 export const ConfirmDialog = () => {
     const [open, setOpen] = useState(false);

package/components/MadieConfirmDialog/index.jsx

@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import ErrorIcon from "@mui/icons-material/Error";
 import MadieDialog from "../MadieDialog";
 
@@ -53,12 +52,5 @@ const MadieConfirmDialog = ({
         </div>
     </MadieDialog>
 );
-MadieConfirmDialog.propTypes = {
-    open: PropTypes.bool,
-    onClose: PropTypes.func,
-    onContinue: PropTypes.func,
-    action: PropTypes.string,
-    warning: PropTypes.string,
-};
 
 export default MadieConfirmDialog;

package/components/MadieDeleteDialog/MadieDeleteDialog.stories.js

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import PropTypes from "prop-types";
 import MadieDeleteDialog from "./index";
 import Button from "../Button";
 
@@ -13,10 +12,8 @@ const Wrapper = ({ children }) => (
         {children}
     </div>
 );
-Wrapper.propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node,
-};
+const contentWithHtmlTag =
+    '<p><strong>test &amp;</strong></p><table class="rich-text-table" style="min-width: 75px"><colgroup><col style="min-width: 25px"><col style="min-width: 25px"><col style="min-width: 25px"></colgroup><tbody><tr><th colspan="1" rowspan="1"><p></p></th><th colspan="1" rowspan="1"><p></p></th><th colspan="1" rowspan="1"><p></p></th></tr><tr><td colspan="1" rowspan="1"><p>table col 1</p></td><td colspan="1" rowspan="1"><p>table col 2</p></td><td colspan="1" rowspan="1"><p>table col 3</p></td></tr><tr><td colspan="1" rowspan="1"><p>table col 4</p></td><td colspan="1" rowspan="1"><p>table col 5</p></td><td colspan="1" rowspan="1"><p>table col 6</p></td></tr></tbody></table><ol><li><p><strong>test2</strong></p></li><li><p><strong>test3</strong></p></li></ol>';
 
 export const DeleteDialog = () => {
     const [open, setOpen] = useState(false);
@@ -56,3 +53,25 @@ export const DeleteDialogNoWarning = () => {
         </Wrapper>
     );
 };
+
+export const DeleteDialogWithHtmlTags = () => {
+    const [open, setOpen] = useState(false);
+    const onClose = () => setOpen(false);
+    const onContinue = () => setOpen(false);
+
+    return (
+        <Wrapper>
+            <Button variant="cyan" onClick={() => setOpen(true)}>
+                open Dialog
+            </Button>
+            <MadieDeleteDialog
+                open={open}
+                onContinue={onContinue}
+                onClose={onClose}
+                hideWarning={true}
+                dialogTitle="Delete Measure Reference"
+                name={contentWithHtmlTag}
+            />
+        </Wrapper>
+    );
+};

package/components/MadieDeleteDialog/index.jsx

@@ -1,7 +1,15 @@
 import React from "react";
-import PropTypes from "prop-types";
 import ErrorIcon from "@mui/icons-material/Error";
 import MadieDialog from "../MadieDialog";
+import parse, { domToReact } from "html-react-parser";
+
+const options = {
+    replace: ({ name, children }) => {
+        if (name === "p") {
+            return <>{domToReact(children)}</>; //  Return the children directly, effectively removing the <p> tag
+        }
+    },
+};
 
 const MadieDeleteDialog = ({
     open,
@@ -34,7 +42,15 @@ const MadieDeleteDialog = ({
             <section className="dialog-warning-body">
                 <p>
                     Are you sure you want to delete{" "}
-                    <span className="strong">{otherDialogProps.name}</span>?
+                    <span className="strong">
+                        {parse(
+                            otherDialogProps?.name
+                                ? otherDialogProps?.name
+                                : "",
+                            options,
+                        )}
+                    </span>
+                    ?
                 </p>
             </section>
             {otherDialogProps.hideWarning !== true && (
@@ -47,10 +63,4 @@ const MadieDeleteDialog = ({
     </MadieDialog>
 );
 
-MadieDeleteDialog.propTypes = {
-    open: PropTypes.bool,
-    onClose: PropTypes.func,
-    onContinue: PropTypes.func,
-};
-
 export default MadieDeleteDialog;

package/components/MadieDialog/MadieDialog.stories.js

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import PropTypes from "prop-types";
 import MadieDialog from "./index";
 import TextArea from "../TextArea";
 import Select from "../Select";
@@ -17,10 +16,6 @@ const Wrapper = ({ children }) => (
         {children}
     </div>
 );
-Wrapper.propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node,
-};
 
 export const Dialog = () => {
     const [open, setOpen] = useState(false);