@madie/madie-design-system 1.2.62 → 2.0.1

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/.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/.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 = {
@@ -95,7 +94,7 @@ const AutoComplete = ({
                 {...rest}
                 value={_.isEmpty(rest.value) ? "-" : rest.value}
             />
-        )
+        );
     }
 
     return (
@@ -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,6 +1,4 @@
 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,16 +6,11 @@ import Button, { TextButton } from "./index";
 export default {
     title: "Button",
     component: Button,
-    decorators: [withKnobs],
 };
 
 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();
@@ -66,7 +65,7 @@ const DateField = ({
                 {...rest}
                 value={value ? dayjs.utc(value).format("MM/DD/YYYY") : "-"}
             />
-        )
+        );
     }
 
     if (containerSx === undefined || containerSx === null) {
@@ -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/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

@@ -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();
@@ -58,11 +57,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>
@@ -89,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/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/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/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/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;