@madie/madie-design-system 1.2.62 → 2.0.0

package/.eslintrc.js

@@ -1,6 +1,6 @@
 module.exports = {
     extends: ["eslint:recommended", "plugin:react/recommended"],
-    parser: "babel-eslint",
+    parser: "@babel/eslint-parser",
     parserOptions: {
         sourceType: "module",
         ecmaFeatures: {

package/.storybook/.babelrc

@@ -1,4 +1,5 @@
 {
-    "presets": ["@babel/preset-react", "@babel/preset-env"],
+    "presets": ["@babel/preset-react"],
+    // "presets": ["@babel/preset-react", "@babel/preset-env"],
     "plugins": ["@babel/plugin-transform-class-properties"]
 }

package/.storybook/main.js

@@ -5,17 +5,9 @@ module.exports = {
     ],
 
     addons: [
-        "@storybook/addon-actions",
-        "@storybook/addon-links",
-        "@storybook/addon-storysource",
-        "@storybook/addon-knobs",
-        "@storybook/addon-a11y",
-        "@storybook/addon-docs",
-        "@storybook/addon-backgrounds",
-        "@storybook/addon-viewport",
-        "@storybook/addon-postcss",
-        "@storybook/addon-webpack5-compiler-babel"
-    ],
+    "@storybook/addon-links", 
+    "@storybook/addon-webpack5-compiler-babel", 
+    "@storybook/addon-docs"],
 
     webpackFinal: async (config) => {
         // do mutation to the config

package/components/AutoComplete/AutoComplete.jsx

@@ -95,7 +95,7 @@ const AutoComplete = ({
                 {...rest}
                 value={_.isEmpty(rest.value) ? "-" : rest.value}
             />
-        )
+        );
     }
 
     return (

package/components/Button/Button.stories.js

@@ -1,6 +1,5 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { withKnobs } from "@storybook/addon-knobs";
 import FeatherIcon from "feather-icons-react";
 
 import Button, { TextButton } from "./index";
@@ -8,7 +7,6 @@ import Button, { TextButton } from "./index";
 export default {
     title: "Button",
     component: Button,
-    decorators: [withKnobs],
 };
 
 const Container = ({ className = "", children }) => (

package/components/DateField/DateField.jsx

@@ -66,7 +66,7 @@ const DateField = ({
                 {...rest}
                 value={value ? dayjs.utc(value).format("MM/DD/YYYY") : "-"}
             />
-        )
+        );
     }
 
     if (containerSx === undefined || containerSx === null) {

package/components/DateField/DateField.stories.jsx

@@ -1,41 +1,54 @@
 import React, { useState } from "react";
 import DateField from "./DateField";
-import { withKnobs } from "@storybook/addon-knobs";
 
 export default {
     title: "DateField",
     component: DateField,
-    decorators: [withKnobs],
+    argTypes: {
+        label: { control: "text" },
+        disabled: { control: "boolean" },
+        value: { control: "text" },
+    },
 };
+
 export const DateFieldComponent = (args) => {
     const [value, setValue] = useState("");
+
     const handleDateChange = (e) => {
         console.log("Handle change triggered", e.target.value);
         setValue(e.target.value);
     };
+
     return (
         <div className="qpp-u-padding--16">
             <DateField
-                label="Status Date"
-                handleDateChange={handleDateChange}
+                {...args}
                 value={value}
+                handleDateChange={handleDateChange}
             />
         </div>
     );
 };
 
+DateFieldComponent.args = {
+    label: "Status Date",
+    disabled: false,
+};
+
 export const DateFieldComponentDisabled = (args) => {
     const handleDateChange = (e) => {
         console.log("Handle change triggered", e.target.value);
     };
+
     return (
         <div className="qpp-u-padding--16">
-            <DateField
-                disabled
-                label="Status Date"
-                handleDateChange={handleDateChange}
-                value="2023-10-01"
-            />
+            <DateField {...args} handleDateChange={handleDateChange} />
         </div>
     );
 };
+
+DateFieldComponentDisabled.args = {
+    label: "Status Date",
+    disabled: true,
+    value: "2023-10-01",
+};

package/components/DateTimeField/DateTimeField.jsx

@@ -58,11 +58,15 @@ const DateTimeField = ({
         return (
             <ReadOnlyTextField
                 label={label}
-                value={dateTimeValue ? dayjs.utc(dateTimeValue).format("MM/DD/YYYY hh:mm A") : "-"}
+                value={
+                    dateTimeValue
+                        ? dayjs.utc(dateTimeValue).format("MM/DD/YYYY hh:mm A")
+                        : "-"
+                }
                 id={id}
                 size="small"
             />
-        )
+        );
     }
     return (
         <FormControl>

package/components/DateTimeField/DateTimeField.stories.jsx

@@ -1,41 +1,51 @@
 import React, { useState } from "react";
 import DateTimeField from "./DateTimeField";
-import { withKnobs } from "@storybook/addon-knobs";
 
 export default {
     title: "DateTimeField",
     component: DateTimeField,
-    decorators: [withKnobs],
+    argTypes: {
+        label: { control: "text" },
+        disabled: { control: "boolean" },
+        dateTimeValue: { control: "text" },
+        id: { control: "text" },
+    },
 };
 
 export const TimeDateFieldComponent = (args) => {
-    const [value, setValue] = useState("");
+    const [value, setValue] = useState(args.dateTimeValue || "");
+
     const handleDateTimeChange = (e) => {
         setValue(e.target.value);
     };
+
     return (
         <div className="qpp-u-padding--16">
             <DateTimeField
-                // disabled={true}
-                id="status_date_time"
-                label="Status Date/Time"
-                handleDateTimeChange={handleDateTimeChange}
+                {...args}
                 dateTimeValue={value}
+                handleDateTimeChange={handleDateTimeChange}
             />
         </div>
     );
 };
 
-export const TimeDateFieldComponentDisabled = (args) => {
-    return (
-        <div className="qpp-u-padding--16">
-            <DateTimeField
-                disabled={true}
-                id="status_date_time"
-                label="Status Date/Time"
-                handleDateTimeChange={(e) => {}}
-                dateTimeValue="2023-10-01T12:00:00Z"
-            />
-        </div>
-    );
+TimeDateFieldComponent.args = {
+    label: "Status Date/Time",
+    disabled: false,
+    id: "status_date_time",
+    dateTimeValue: "",
+};
+
+export const TimeDateFieldComponentDisabled = (args) => (
+    <div className="qpp-u-padding--16">
+        <DateTimeField {...args} handleDateTimeChange={() => {}} />
+    </div>
+);
+
+TimeDateFieldComponentDisabled.args = {
+    label: "Status Date/Time",
+    disabled: true,
+    id: "status_date_time",
+    dateTimeValue: "2023-10-01T12:00:00Z",
 };

package/components/Instant/Instant.stories.js

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

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

@@ -54,8 +54,8 @@ const processContent = (content) => {
                 const childCount = Array.isArray(children)
                     ? children.length
                     : children
-                    ? 1
-                    : 0;
+                      ? 1
+                      : 0;
                 counts[el.type] += childCount;
             }
 
@@ -246,7 +246,7 @@ const MadieAlert = ({
 
     const totalMinimizedErrors = minimizedIndices.reduce(
         (sum, index) => sum + (individualErrors[index] || 0),
-        0
+        0,
     );
 
     // Render alert content
@@ -298,7 +298,7 @@ const MadieAlert = ({
                             navigator.clipboard.writeText(
                                 copyButton
                                     ? processContent(content).copyText
-                                    : copyText
+                                    : copyText,
                             );
                             updateState({ toastOpen: true });
                         }}
@@ -389,7 +389,7 @@ MadieAlert.propTypes = {
             alertProps: PropTypes.object,
             closeButtonProps: PropTypes.object,
             copyButton: PropTypes.bool,
-        })
+        }),
     ),
 };
 

package/components/MadieConfirmDialog/MadieConfirmDialog.stories.js

@@ -1,12 +1,11 @@
 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 }) => (
@@ -21,31 +20,20 @@ Wrapper.propTypes = {
 
 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 +50,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 +65,7 @@ export const ConfirmDialog = () => {
                 name="log out of UMLS"
                 action="confirm"
             />
+
             <MadieConfirmDialog
                 open={openDiscardDialog}
                 onContinue={onDiscardDialogContinue}
@@ -89,6 +77,7 @@ export const ConfirmDialog = () => {
                 continueText="Yes, Discard All Changes"
                 cancelText="No, Keep Working"
             />
+
             <MadieConfirmDialog
                 open={openDeleteDialog}
                 onContinue={onDeleteDialogContinue}
@@ -99,6 +88,7 @@ export const ConfirmDialog = () => {
                 action="delete"
                 continueText="Yes, Delete"
             />
-        </div>
+        </Wrapper>
     );
 };
+ConfirmDialog.storyName = "ConfirmDialog";

package/components/MadieDeleteDialog/MadieDeleteDialog.stories.js

@@ -1,12 +1,11 @@
 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 }) => (
@@ -21,15 +20,11 @@ Wrapper.propTypes = {
 
 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 +33,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 +53,6 @@ export const DeleteDialogNoWarning = () => {
                 onClose={onClose}
                 hideWarning={true}
             />
-        </div>
+        </Wrapper>
     );
 };