@madie/madie-design-system 1.2.62 → 2.0.1

package/components/Link/index.js

@@ -1,33 +1,34 @@
 import React from "react";
-import PropTypes from "prop-types";
 
 const VARIANTS = ["white", "gray"];
 
 const DSLink = ({
-    className,
-    href,
-    download,
-    ariaLabel,
-    onClick,
-    children,
-    variant,
+    className = "",
+    href = "",
+    download = false,
+    ariaLabel = null,
+    onClick = () => null,
+    children = null,
+    variant = null,
     ...rest
 }) => {
     let linkClass = "qpp-c-link";
+
     if (VARIANTS.includes(variant)) {
-        variant === "gray"
-            ? (linkClass = linkClass.concat(" ", "qpp-u-color--gray-60"))
-            : (linkClass = linkClass.concat(" ", `qpp-u-color--${variant}`));
+        linkClass +=
+            variant === "gray"
+                ? " qpp-u-color--gray-60"
+                : ` qpp-u-color--${variant}`;
     }
 
     if (className) {
-        linkClass = linkClass.concat(" ", className);
+        linkClass += ` ${className}`;
     }
 
     return (
         <a
             aria-label={ariaLabel}
-            className={linkClass || ""}
+            className={linkClass}
             href={href}
             download={download}
             onClick={onClick}
@@ -38,24 +39,4 @@ const DSLink = ({
     );
 };
 
-DSLink.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    href: PropTypes.string,
-    ariaLabel: PropTypes.string,
-    onClick: PropTypes.func,
-    download: PropTypes.bool,
-    variant: PropTypes.oneOf(VARIANTS),
-};
-
-DSLink.defaultProps = {
-    children: null,
-    className: "",
-    href: "",
-    ariaLabel: null,
-    onClick: () => null,
-    download: false,
-    variant: null,
-};
-
 export default DSLink;

package/components/MadieAlert/MadieAlert.stories.js

@@ -1,34 +1,42 @@
 import React from "react";
 import MadieAlert from "./index";
-import { withKnobs } from "@storybook/addon-knobs";
 
 export default {
     title: "Madie Alert",
     component: MadieAlert,
     decorators: [
-        withKnobs,
-        (storyFn) => (
+        (Story) => (
             <div style={{ padding: "120px", backgroundColor: "gray" }}>
-                {storyFn()}
+                <Story />
             </div>
         ),
     ],
+    argTypes: {
+        type: {
+            control: { type: "select" },
+            options: ["info", "warning", "error", "success"],
+        },
+        content: { control: "text" },
+        active: { control: "boolean" },
+    },
 };
 
-export const MadieAlertWarning = () => (
-    <MadieAlert
-        type="warning"
-        content="Your measure needs a CMS ID, you must first create and import your measure from MAT."
-    />
-);
+const Template = (args) => <MadieAlert {...args} />;
+
+export const MadieAlertWarning = Template.bind({});
+MadieAlertWarning.args = {
+    type: "warning",
+    content:
+        "Your measure needs a CMS ID, you must first create and import your measure from MAT.",
+};
 MadieAlertWarning.storyName = "MadieAlertWarning";
 
-export const MadieAlertInfo = () => (
-    <MadieAlert
-        type="info"
-        content="Your measure needs a CMS ID, you must first create and import your measure from MAT."
-    />
-);
+export const MadieAlertInfo = Template.bind({});
+MadieAlertInfo.args = {
+    type: "info",
+    content:
+        "Your measure needs a CMS ID, you must first create and import your measure from MAT.",
+};
 MadieAlertInfo.storyName = "MadieAlertInfo";
 
 export const MadieAlertInfoList = () => (
@@ -62,19 +70,17 @@ export const MadieAlertWithTitle = () => (
 );
 MadieAlertWithTitle.storyName = "withTitle";
 
-export const MadieAlertError = () => (
-    <MadieAlert
-        type="error"
-        active={false}
-        content="Please complete the CQL Editor process before continuing."
-    />
-);
+export const MadieAlertError = Template.bind({});
+MadieAlertError.args = {
+    type: "error",
+    content: "Please complete the CQL Editor process before continuing.",
+    active: false,
+};
 MadieAlertError.storyName = "MadieAlertError";
 
-export const MadieAlertSuccess = () => (
-    <MadieAlert
-        type="success"
-        content="Your measure has been succesfully updated."
-    />
-);
+export const MadieAlertSuccess = Template.bind({});
+MadieAlertSuccess.args = {
+    type: "success",
+    content: "Your measure has been succesfully updated.",
+};
 MadieAlertSuccess.storyName = "MadieAlertSuccess";

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 = {
@@ -54,8 +53,8 @@ const processContent = (content) => {
                 const childCount = Array.isArray(children)
                     ? children.length
                     : children
-                    ? 1
-                    : 0;
+                      ? 1
+                      : 0;
                 counts[el.type] += childCount;
             }
 
@@ -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
@@ -246,7 +236,7 @@ const MadieAlert = ({
 
     const totalMinimizedErrors = minimizedIndices.reduce(
         (sum, index) => sum + (individualErrors[index] || 0),
-        0
+        0,
     );
 
     // Render alert content
@@ -298,7 +288,7 @@ const MadieAlert = ({
                             navigator.clipboard.writeText(
                                 copyButton
                                     ? processContent(content).copyText
-                                    : copyText
+                                    : copyText,
                             );
                             updateState({ toastOpen: true });
                         }}
@@ -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,12 +1,10 @@
 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 }) => (
@@ -14,38 +12,23 @@ const Wrapper = ({ children }) => (
         {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);
-    };
+
+    const onClose = () => setOpen(false);
+    const onContinue = () => setOpen(false);
+
+    const onDiscardDialogClose = () => setOpenDiscardDialog(false);
+    const onDiscardDialogContinue = () => setOpenDiscardDialog(false);
+
+    const onDeleteDialogClose = () => setOpenDeleteDialog(false);
+    const onDeleteDialogContinue = () => setOpenDeleteDialog(false);
 
     return (
-        <div className="qpp-u-padding--16" style={{ width: 300 }}>
+        <Wrapper>
             <p>
                 <Button variant="cyan" onClick={() => setOpen(true)}>
                     open Confirm Dialog
@@ -62,13 +45,12 @@ export const ConfirmDialog = () => {
             <p>
                 <Button
                     variant="cyan"
-                    onClick={() => {
-                        setOpenDeleteDialog(true);
-                    }}
+                    onClick={() => setOpenDeleteDialog(true)}
                 >
                     open Delete Dialog
                 </Button>
             </p>
+
             <MadieConfirmDialog
                 open={open}
                 onContinue={onContinue}
@@ -78,6 +60,7 @@ export const ConfirmDialog = () => {
                 name="log out of UMLS"
                 action="confirm"
             />
+
             <MadieConfirmDialog
                 open={openDiscardDialog}
                 onContinue={onDiscardDialogContinue}
@@ -89,6 +72,7 @@ export const ConfirmDialog = () => {
                 continueText="Yes, Discard All Changes"
                 cancelText="No, Keep Working"
             />
+
             <MadieConfirmDialog
                 open={openDeleteDialog}
                 onContinue={onDeleteDialogContinue}
@@ -99,6 +83,7 @@ export const ConfirmDialog = () => {
                 action="delete"
                 continueText="Yes, Delete"
             />
-        </div>
+        </Wrapper>
     );
 };
+ConfirmDialog.storyName = "ConfirmDialog";

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,12 +1,10 @@
 import React, { useState } from "react";
-import PropTypes from "prop-types";
-import { withKnobs } from "@storybook/addon-knobs";
 import MadieDeleteDialog from "./index";
 import Button from "../Button";
+
 export default {
     title: "MadieDeleteDialog",
     component: MadieDeleteDialog,
-    decorators: [withKnobs],
 };
 
 const Wrapper = ({ children }) => (
@@ -14,22 +12,13 @@ const Wrapper = ({ children }) => (
         {children}
     </div>
 );
-Wrapper.propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node,
-};
-
 export const DeleteDialog = () => {
     const [open, setOpen] = useState(false);
-    const onClose = () => {
-        setOpen(false);
-    };
-    const onContinue = () => {
-        setOpen(false);
-    };
+    const onClose = () => setOpen(false);
+    const onContinue = () => setOpen(false);
 
     return (
-        <div className="qpp-u-padding--16" style={{ width: 300 }}>
+        <Wrapper>
             <Button variant="cyan" onClick={() => setOpen(true)}>
                 open Dialog
             </Button>
@@ -38,21 +27,17 @@ export const DeleteDialog = () => {
                 onContinue={onContinue}
                 onClose={onClose}
             />
-        </div>
+        </Wrapper>
     );
 };
 
 export const DeleteDialogNoWarning = () => {
     const [open, setOpen] = useState(false);
-    const onClose = () => {
-        setOpen(false);
-    };
-    const onContinue = () => {
-        setOpen(false);
-    };
+    const onClose = () => setOpen(false);
+    const onContinue = () => setOpen(false);
 
     return (
-        <div className="qpp-u-padding--16" style={{ width: 300 }}>
+        <Wrapper>
             <Button variant="cyan" onClick={() => setOpen(true)}>
                 open Dialog
             </Button>
@@ -62,6 +47,6 @@ export const DeleteDialogNoWarning = () => {
                 onClose={onClose}
                 hideWarning={true}
             />
-        </div>
+        </Wrapper>
     );
 };

package/components/MadieDeleteDialog/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";
 
@@ -47,10 +46,4 @@ const MadieDeleteDialog = ({
     </MadieDialog>
 );
 
-MadieDeleteDialog.propTypes = {
-    open: PropTypes.bool,
-    onClose: PropTypes.func,
-    onContinue: PropTypes.func,
-};
-
 export default MadieDeleteDialog;