@madie/madie-design-system 1.2.62 → 2.0.1

package/components/TextField/TextField.stories.js

@@ -1,14 +1,26 @@
 import React from "react";
-import PropTypes from "prop-types";
-import { withKnobs } from "@storybook/addon-knobs";
 import TextField from "./index";
 import { FormHelperText, IconButton, InputAdornment } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
 import ClearIcon from "@mui/icons-material/Clear";
+
 export default {
     title: "TextField",
     component: TextField,
-    decorators: [withKnobs],
+    argTypes: {
+        disabled: { control: "boolean" },
+        error: { control: "boolean" },
+        required: { control: "boolean" },
+        size: {
+            control: { type: "select" },
+            options: ["small", "medium", "large"], // adjust if your component supports different sizes
+        },
+        helperText: { control: "text" },
+        label: { control: "text" },
+        placeholder: { control: "text" },
+        labelColor: { control: "color" },
+        value: { control: "text" },
+    },
 };
 
 const Wrapper = ({ children }) => (
@@ -16,143 +28,109 @@ const Wrapper = ({ children }) => (
         {children}
     </div>
 );
-Wrapper.propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node,
-};
 
-export const Textfield = () => (
+const Template = (args) => (
     <Wrapper>
         <TextField
-            placeholder="Placeholder"
-            label="Text Label"
-            id="measureName"
-            inputProps={{ "data-testid": "measure-name-input" }}
-            data-testid="measure-name-text-field"
-            size="small"
+            {...args}
+            id={args.id || "measureName"}
+            inputProps={{
+                "data-testid": "measure-name-input",
+                ...args.inputProps,
+            }}
+            data-testid={args["data-testid"] || "measure-name-text-field"}
         />
     </Wrapper>
 );
 
-export const WithHelperText = () => (
-    <Wrapper>
-        <TextField
-            placeholder="Placeholder"
-            label="Text Label"
-            id="measureName"
-            inputProps={{ "data-testid": "measure-name-input" }}
-            data-testid="measure-name-text-field"
-            size="small"
-            helperText={
-                <FormHelperText data-testid={`helper-text`} error={false}>
-                    a descriptive message
-                </FormHelperText>
-            }
-        />
-    </Wrapper>
-);
+export const Interactive = Template.bind({});
+Interactive.args = {
+    size: "small",
+    disabled: false,
+    error: false,
+    required: false,
+    helperText: "",
+    label: "Text Label",
+    placeholder: "Placeholder",
+    labelColor: undefined,
+    value: "",
+};
 
-export const Disabled = () => (
-    <Wrapper>
+export const WithHelperText = Template.bind({});
+WithHelperText.args = {
+    ...Interactive.args,
+    helperText: (
+        <FormHelperText data-testid="helper-text" error={false}>
+            a descriptive message
+        </FormHelperText>
+    ),
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+    ...Interactive.args,
+    disabled: true,
+    label: "Disabled Text Label",
+};
+
+export const Required = Template.bind({});
+Required.args = {
+    ...Interactive.args,
+    required: true,
+};
+
+export const Error = Template.bind({});
+Error.args = {
+    ...Interactive.args,
+    error: true,
+    required: true,
+    helperText: "An error message",
+};
+
+export const WithToolTipText = Template.bind({});
+WithToolTipText.args = {
+    ...Interactive.args,
+    label: "Confirm New Version #",
+    tooltipText: "Input the new version # located to the left to confirm.",
+    helperText: "test",
+    id: "measure-name",
+};
+
+export const VariedHeights = () => (
+    <div
+        className="qpp-u-padding--16"
+        style={{ width: 900, marginBottom: "16px", display: "flex", gap: 16 }}
+    >
         <TextField
             placeholder="Placeholder"
-            label="Disabled Text Label"
-            id="measureName"
-            inputProps={{ "data-testid": "measure-name-input" }}
-            data-testid="measure-name-text-field"
+            required
+            label="Text Label"
+            id="measureName1"
+            inputProps={{ "data-testid": "measure-name-input1" }}
+            data-testid="measure-name-text-field1"
             size="small"
-            disabled
+            helperText="An error message"
         />
-    </Wrapper>
-);
-
-export const Required = () => (
-    <Wrapper>
         <TextField
             placeholder="Placeholder"
-            required
             label="Text Label"
-            id="measureName"
-            inputProps={{ "data-testid": "measure-name-input" }}
-            data-testid="measure-name-text-field"
+            id="measureName2"
+            inputProps={{ "data-testid": "measure-name-input2" }}
+            data-testid="measure-name-text-field2"
             size="small"
+            helperText="An error message designed to take up a lot of space to see how we space multiple input elements within the same row in a responsive manner "
         />
-    </Wrapper>
-);
-
-export const Error = () => (
-    <Wrapper>
         <TextField
             placeholder="Placeholder"
             error
             required
             label="Text Label"
-            id="measureName"
-            inputProps={{ "data-testid": "measure-name-input" }}
-            data-testid="measure-name-text-field"
+            id="measureName3"
+            inputProps={{ "data-testid": "measure-name-input3" }}
+            data-testid="measure-name-text-field3"
             size="small"
             helperText="An error message"
         />
-    </Wrapper>
-);
-
-export const WithToolTipText = () => (
-    <Wrapper>
-        <TextField
-            placeholder="Placeholder"
-            label="Confirm New Version #"
-            data-testid="measure-name-text-field"
-            size="small"
-            tooltipText="Input the new version # located to the left to confirm."
-            helperText="test"
-            id="measure-name"
-            // previously this was how it was done. it could make more sense to only pass it an id and progrematically determine it. Example:
-            // inputProps={{
-            //     "data-testid": "measure-name-input",
-            //     "aria-describedby":
-            //         "measure-name-helper-text measure-name-tooltip",
-            // }}
-        />
-    </Wrapper>
-);
-
-export const VariedHeights = () => (
-    <div
-        className="qpp-u-padding--16"
-        style={{ width: 900, marginBottom: "16px" }}
-    >
-        <div style={{ display: "flex", flexDirection: "row" }}>
-            <TextField
-                placeholder="Placeholder"
-                required
-                label="Text Label"
-                id="measureName"
-                inputProps={{ "data-testid": "measure-name-input" }}
-                data-testid="measure-name-text-field"
-                size="small"
-                helperText="An error message"
-            />
-            <TextField
-                placeholder="Placeholder"
-                label="Text Label"
-                id="measureName"
-                inputProps={{ "data-testid": "measure-name-input" }}
-                data-testid="measure-name-text-field"
-                size="small"
-                helperText="An error message designed to take up a lot of space to see how we space multiple input elements within the same row in a responsive manner "
-            />
-            <TextField
-                placeholder="Placeholder"
-                error
-                required
-                label="Text Label"
-                id="measureName"
-                inputProps={{ "data-testid": "measure-name-input" }}
-                data-testid="measure-name-text-field"
-                size="small"
-                helperText="An error message"
-            />
-        </div>
     </div>
 );
 
@@ -176,7 +154,7 @@ export const WithLeftAndRightIcon = () => (
                     ),
                     endAdornment: (
                         <InputAdornment position="end">
-                            <IconButton onClick="">
+                            <IconButton onClick={() => {}}>
                                 <ClearIcon />
                             </IconButton>
                         </InputAdornment>
@@ -188,16 +166,9 @@ export const WithLeftAndRightIcon = () => (
     </Wrapper>
 );
 
-export const TextfieldDifferentLabel = () => (
-    <Wrapper>
-        <TextField
-            placeholder="Placeholder"
-            label="Text Label with different color"
-            labelColor={"#1976d2"}
-            id="measureName"
-            inputProps={{ "data-testid": "measure-name-input" }}
-            data-testid="measure-name-text-field"
-            size="small"
-        />
-    </Wrapper>
-);
+export const TextfieldDifferentLabel = Template.bind({});
+TextfieldDifferentLabel.args = {
+    ...Interactive.args,
+    label: "Text Label with different color",
+    labelColor: "#1976d2",
+};

package/components/TextField/index.jsx

@@ -6,8 +6,7 @@ import {
 } from "@mui/material";
 import InputLabel from "../InputLabel";
 import MadieToolTip from "../MadieTooltip";
-import PropTypes from "prop-types";
-import { ReadOnlyTextField } from "../index";
+import ReadOnlyTextField from "../ReadOnlyTextField";
 
 const TextField = ({
     id,
@@ -32,7 +31,7 @@ const TextField = ({
                 size="small"
                 {...rest}
             />
-        )
+        );
     }
     // get a copy of input props
     const newInputProps = { ...inputProps } || {};
@@ -204,18 +203,4 @@ const TextField = ({
     );
 };
 
-TextField.propTypes = {
-    id: PropTypes.string,
-    textFieldStyles: PropTypes.object,
-    error: PropTypes.bool,
-    helperText: PropTypes.string,
-    required: PropTypes.bool,
-    disabled: PropTypes.bool,
-    placeholder: PropTypes.string, // expects placeholder objects of { name: value } and inserts into the render item function.
-    label: PropTypes.string,
-    tooltipText: PropTypes.string,
-    inputProps: PropTypes.object,
-    labelColor: PropTypes.string,
-    maxLength: PropTypes.number,
-};
 export default TextField;

package/components/TimeField/TimeField.jsx

@@ -4,7 +4,6 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import InputLabel from "../InputLabel";
 import { kebabCase } from "lodash";
-import PropTypes from "prop-types";
 
 const timeFieldStyle = {
     width: "170px",
@@ -89,13 +88,4 @@ const TimeField = ({
     );
 };
 
-TimeField.propTypes = {
-    label: PropTypes.string.isRequired,
-    value: PropTypes.object,
-    handleTimeChange: PropTypes.func.isRequired,
-    disabled: PropTypes.bool,
-    required: PropTypes.bool,
-    error: PropTypes.string,
-};
-
 export default TimeField;

package/components/TimeField/TimeField.stories.js

@@ -1,26 +1,36 @@
 import React, { useState } from "react";
 import TimeField from "./TimeField";
-import { withKnobs } from "@storybook/addon-knobs";
 
 export default {
     title: "TimeField",
     component: TimeField,
-    decorators: [withKnobs],
+    argTypes: {
+        disabled: { control: "boolean" },
+        label: { control: "text" },
+    },
 };
-export const TimeFieldComponent = (args) => {
+
+const Template = (args) => {
     const [value, setValue] = useState("");
-    const handleTimeChange = (newValue, v) => {
+
+    const handleTimeChange = (newValue) => {
         console.log("Time changed: newValue = ", newValue);
         setValue(newValue);
     };
+
     return (
-        <div className="qpp-u-padding--16">
+        <div className="qpp-u-padding--16" style={{ width: 300 }}>
             <TimeField
-                disabled={false}
-                label="Result Time"
-                handleTimeChange={handleTimeChange}
+                {...args}
                 value={value}
+                handleTimeChange={handleTimeChange}
             />
         </div>
     );
 };
+
+export const Default = Template.bind({});
+Default.args = {
+    disabled: false,
+    label: "Result Time",
+};

package/components/Toast/Toast.stories.js

@@ -1,21 +1,31 @@
 import React, { useState } from "react";
-import { withKnobs } from "@storybook/addon-knobs";
 import Toast from "./index";
 
 export default {
     title: "Toast",
     component: Toast,
-    decorators: [withKnobs],
+    argTypes: {
+        toastType: {
+            control: {
+                type: "select",
+                options: ["success", "warning", "info", "danger"],
+            },
+        },
+        message: { control: "text" },
+        autoHideDuration: { control: "number" },
+    },
 };
 
-export const SuccessToast = () => {
+const Template = (args) => {
     const [toastOpen, setToastOpen] = useState(false);
+
     return (
         <div
             style={{
                 height: "100vh",
                 width: "100vw",
                 backgroundColor: "#242424",
+                position: "relative",
             }}
         >
             <button
@@ -23,119 +33,49 @@ export const SuccessToast = () => {
                 style={{
                     position: "absolute",
                     top: "50%",
-                    left: "calc(50% - 80px)",
+                    left: "50%",
+                    transform: "translate(-50%, -50%)",
+                    padding: "8px 16px",
+                    cursor: "pointer",
                 }}
             >
-                Simulate Success
+                Show Toast
             </button>
             <Toast
+                {...args}
                 toastKey="toast-key"
-                testId="success-toast"
-                toastType="success"
+                testId={`${args.toastType}-toast`}
                 open={toastOpen}
-                message="An action has successfully been completed"
                 onClose={() => setToastOpen(false)}
-                autoHideDuration={3000}
             />
         </div>
     );
 };
 
-export const WarningToast = () => {
-    const [toastOpen, setToastOpen] = useState(false);
-    return (
-        <div
-            style={{
-                height: "100vh",
-                width: "100vw",
-                backgroundColor: "#242424",
-            }}
-        >
-            <button
-                onClick={() => setToastOpen(true)}
-                style={{
-                    position: "absolute",
-                    top: "50%",
-                    left: "calc(50% - 80px)",
-                }}
-            >
-                Simulate Warning
-            </button>
-            <Toast
-                toastKey="toast-key"
-                toastType="warning"
-                testId="warning-toast"
-                open={toastOpen}
-                message="Something has gone wrong. consider fixing before continuing"
-                onClose={() => setToastOpen(false)}
-                autoHideDuration={3000}
-            />
-        </div>
-    );
+export const SuccessToast = Template.bind({});
+SuccessToast.args = {
+    toastType: "success",
+    message: "An action has successfully been completed",
+    autoHideDuration: 3000,
 };
 
-export const InfoToast = () => {
-    const [toastOpen, setToastOpen] = useState(false);
-    return (
-        <div
-            style={{
-                height: "100vh",
-                width: "100vw",
-                backgroundColor: "#242424",
-            }}
-        >
-            <button
-                onClick={() => setToastOpen(true)}
-                style={{
-                    position: "absolute",
-                    top: "50%",
-                    left: "calc(50% - 80px)",
-                }}
-            >
-                Simulate Info
-            </button>
-            <Toast
-                toastKey="toast-key"
-                toastType="info"
-                testId="info-toast"
-                open={toastOpen}
-                message="Some useful information"
-                onClose={() => setToastOpen(false)}
-                autoHideDuration={3000}
-            />
-        </div>
-    );
+export const WarningToast = Template.bind({});
+WarningToast.args = {
+    toastType: "warning",
+    message: "Something has gone wrong. Consider fixing before continuing",
+    autoHideDuration: 3000,
 };
 
-export const DangerToast = () => {
-    const [toastOpen, setToastOpen] = useState(false);
-    return (
-        <div
-            style={{
-                height: "100vh",
-                width: "100vw",
-                backgroundColor: "#242424",
-            }}
-        >
-            <button
-                onClick={() => setToastOpen(true)}
-                style={{
-                    position: "absolute",
-                    top: "50%",
-                    left: "calc(50% - 80px)",
-                }}
-            >
-                Simulate Danger
-            </button>
-            <Toast
-                toastKey="toast-key"
-                toastType="danger"
-                testId="danger-toast"
-                open={toastOpen}
-                message="Something has gone wrong. Please try again"
-                onClose={() => setToastOpen(false)}
-                autoHideDuration={3000}
-            />
-        </div>
-    );
+export const InfoToast = Template.bind({});
+InfoToast.args = {
+    toastType: "info",
+    message: "Some useful information",
+    autoHideDuration: 3000,
+};
+
+export const DangerToast = Template.bind({});
+DangerToast.args = {
+    toastType: "danger",
+    message: "Something has gone wrong. Please try again",
+    autoHideDuration: 3000,
 };

package/components/Toast/index.jsx

@@ -9,7 +9,6 @@ import { IconButton, Snackbar } from "@mui/material";
 import ClearIcon from "@mui/icons-material/Clear";
 
 import classNames from "classnames";
-import PropTypes from "prop-types";
 
 const Toast = ({
     toastType = "warning",
@@ -101,17 +100,4 @@ const Toast = ({
     );
 };
 
-Toast.propTypes = {
-    toastType: PropTypes.string,
-    open: PropTypes.bool,
-    message: PropTypes.node,
-    canClose: PropTypes.bool,
-    onClose: PropTypes.func,
-    autoHideDuration: PropTypes.number,
-    testId: PropTypes.string,
-    toastKey: PropTypes.string,
-    toastProps: PropTypes.object,
-    closeButtonProps: PropTypes.object,
-};
-
 export default Toast;

package/components/TruncateText/TruncateText.stories.js

@@ -1,25 +1,30 @@
 import * as React from "react";
-import { withKnobs } from "@storybook/addon-knobs";
 import TruncateText from "./index";
 
 export default {
     title: "Truncate Text",
     component: TruncateText,
-    decorators: [withKnobs],
+    argTypes: {
+        text: { control: "text" },
+        maxLength: { control: { type: "number", min: 0 } },
+        dataTestId: { control: "text" },
+        fontSize: { control: "text" },
+    },
 };
 
-export const FullText = () => (
-    <TruncateText
-        text="Addressing Social Needs in the Inpatient Setting Part 4 of 4 Housing"
-        maxLength={120}
-        dataTestId={"measure-comments"}
-    />
-);
-export const TruncatedText = () => (
-    <TruncateText
-        text="Addressing Social Needs in the Inpatient Setting Part 4 of 4 Housing Domain Addressing Social Needs in the Inpatient Setting Part 4 of 4 Housing Domain"
-        maxLength={60}
-        dataTestId={"measure-comments"}
-        fontSize="1rem"
-    />
-);
+const Template = (args) => <TruncateText {...args} />;
+
+export const FullText = Template.bind({});
+FullText.args = {
+    text: "Addressing Social Needs in the Inpatient Setting Part 4 of 4 Housing",
+    maxLength: 120,
+    dataTestId: "measure-comments",
+};
+
+export const TruncatedText = Template.bind({});
+TruncatedText.args = {
+    text: "Addressing Social Needs in the Inpatient Setting Part 4 of 4 Housing Domain Addressing Social Needs in the Inpatient Setting Part 4 of 4 Housing Domain",
+    maxLength: 60,
+    dataTestId: "measure-comments",
+    fontSize: "1rem",
+};

package/components/TruncateText/index.js

@@ -1,7 +1,6 @@
 import { IconButton } from "@mui/material";
 import React, { useState } from "react";
 import _ from "lodash";
-import PropTypes from "prop-types";
 
 const TruncateText = ({
     text,
@@ -42,11 +41,4 @@ const TruncateText = ({
     );
 };
 
-TruncateText.propTypes = {
-    text: PropTypes.string,
-    maxLength: PropTypes.number,
-    dataTestId: PropTypes.string,
-    fontSize: PropTypes.string,
-};
-
 export default TruncateText;

package/components/hooks/useGetConfig.js

@@ -22,7 +22,7 @@ const useGetConfig = ({
 
     useEffect(() => {
         const storageContent = JSON.parse(
-            localStorage.getItem(localStorageName)
+            localStorage.getItem(localStorageName),
         );
         if (
             storageContent?.content &&
@@ -59,7 +59,7 @@ const useGetConfig = ({
 
                     localStorage.setItem(
                         localStorageName,
-                        JSON.stringify(storageItem)
+                        JSON.stringify(storageItem),
                     );
                     setResult(storageItem);
                 })