@madie/madie-design-system 2.0.0 → 2.0.2

package/components/MadieDialog/index.jsx

@@ -1,5 +1,4 @@
 import React, { useState, useRef } from "react";
-import PropTypes from "prop-types";
 import Draggable from "react-draggable";
 import CloseIcon from "@mui/icons-material/Close";
 import {
@@ -337,24 +336,4 @@ const MadieDialog = ({
     );
 };
 
-MadieDialog.propTypes = {
-    required: PropTypes.bool,
-    form: PropTypes.bool,
-    title: PropTypes.string,
-    dialogProps: PropTypes.object,
-    cancelButtonProps: PropTypes.object,
-    continueButtonProps: PropTypes.object,
-    children: PropTypes.object,
-    maxWidth: PropTypes.string,
-};
-
-DraggablePaper.propTypes = {
-    children: PropTypes.object,
-};
-
-Actions.propTypes = {
-    onClose: PropTypes.any,
-    cancelButtonProps: PropTypes.object,
-    continueButtonProps: PropTypes.object,
-};
 export default MadieDialog;

package/components/MadieDiscardDialog/MadieDiscardDialog.stories.js

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import PropTypes from "prop-types";
 import MadieDiscardDialog 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 DiscardDialog = () => {
     const [open, setOpen] = useState(false);

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

package/components/MadieSpinner/MadieSpinner.stories.js

@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import MadieSpinner from "./index";
 
 export default {
@@ -13,11 +12,6 @@ const Wrapper = ({ children }) => (
     </div>
 );
 
-Wrapper.propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node,
-};
-
 export const ExampleSpinner = () => (
     <Wrapper>
         <MadieSpinner />

package/components/MadieSpinner/index.jsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { CircularProgress } from "@mui/material";
-import PropTypes from "prop-types";
 
 // To change the spinner size you have to pass style props for height and width.
 const MadieSpinner = (props) => {
@@ -28,8 +27,4 @@ const MadieSpinner = (props) => {
     );
 };
 
-MadieSpinner.propTypes = {
-    thickness: PropTypes.number,
-};
-
 export default MadieSpinner;

package/components/MadieTooltip/index.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import TooltipIcon from "../MadieTooltipIcon";
-import PropTypes from "prop-types";
 
 // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role
 const MadieToolTip = ({ tooltipText = "informational text", id }) => {
@@ -41,9 +40,4 @@ const MadieToolTip = ({ tooltipText = "informational text", id }) => {
     );
 };
 
-MadieToolTip.propTypes = {
-    tooltipText: PropTypes.string,
-    id: PropTypes.string,
-};
-
 export default MadieToolTip;

package/components/MadieTooltipIcon/index.jsx

@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 
 const TooltipIcon = ({ color = "#0073C8", ...props }) => (
     <svg
@@ -25,7 +24,3 @@ const TooltipIcon = ({ color = "#0073C8", ...props }) => (
 );
 
 export default TooltipIcon;
-
-TooltipIcon.propTypes = {
-    color: PropTypes.string,
-};

package/components/Modal/Modal.jsx

@@ -1,17 +1,38 @@
 import React, { useRef, useState, useEffect } from "react";
 import ReactModal from "react-modal";
-import PropTypes from "prop-types";
-
 import { CloseXIcon2 } from "../../lib/SvgComponents.jsx";
 
+/**
+ * @param {{
+ *   title?: string,
+ *   children: React.ReactNode,
+ *   primary?: {
+ *     title: string | React.ReactElement,
+ *     onClick?: () => void,
+ *     loading?: boolean,
+ *     loadingText?: string,
+ *   } | null,
+ *   secondary?: {
+ *     title: string | React.ReactElement,
+ *     onClick?: () => void,
+ *     loading?: boolean,
+ *     loadingText?: string,
+ *   } | null,
+ *   onRequestClose?: () => void,
+ *   appElement?: string,
+ *   isOpen?: boolean,
+ *   width?: string,
+ *   [key: string]: any
+ * }} props
+ */
 const Modal = ({
     children,
-    onRequestClose,
+    onRequestClose = () => {},
     title,
-    primary,
-    secondary,
-    appElement,
-    isOpen,
+    primary = null,
+    secondary = null,
+    appElement = "body > *:not(.qpp-c-modal)",
+    isOpen = false,
     ...props
 }) => {
     const [overflowSeparator, setOverflowSeparator] = useState(false);
@@ -29,9 +50,8 @@ const Modal = ({
                 maxWidth: "calc(100vw - 2rem)",
                 maxHeight: "calc(100vh - 2rem)",
             };
-        } else {
-            return {};
         }
+        return {};
     };
 
     return (
@@ -46,7 +66,6 @@ const Modal = ({
                 content: getWidth(),
             }}
             onAfterOpen={() => {
-                // Add heading separator based on overflow
                 if (
                     contentRef.current?.scrollHeight >
                     document.documentElement.clientHeight * 0.6
@@ -56,7 +75,6 @@ const Modal = ({
                     setOverflowSeparator(false);
                 }
 
-                // Set default focus
                 if (closeButtonRef?.current) {
                     closeButtonRef.current.focus();
                 }
@@ -98,7 +116,7 @@ const Modal = ({
                             className={`qpp-c-button qpp-c-button--secondary ${
                                 primary ? "qpp-u-margin-right--16" : ""
                             }`}
-                            loading={secondary.loading}
+                            disabled={secondary.loading}
                             onClick={secondary.onClick || onRequestClose}
                             aria-label={secondary.title}
                             data-testid="modal-secondary-btn"
@@ -109,7 +127,7 @@ const Modal = ({
                     {primary && (
                         <button
                             className="qpp-c-button"
-                            loading={primary.loading}
+                            disabled={primary.loading}
                             onClick={primary.onClick}
                             data-testid="modal-primary-btn"
                             aria-label={primary.title}
@@ -123,34 +141,4 @@ const Modal = ({
     );
 };
 
-Modal.propTypes = {
-    title: PropTypes.string,
-    children: PropTypes.node.isRequired,
-    primary: PropTypes.shape({
-        title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-        onClick: PropTypes.func,
-        loading: PropTypes.bool,
-        loadingText: PropTypes.string,
-    }),
-    secondary: PropTypes.shape({
-        title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-        onClick: PropTypes.func,
-        loading: PropTypes.bool,
-        loadingText: PropTypes.string,
-    }),
-    onRequestClose: PropTypes.func,
-    appElement: PropTypes.string,
-    isOpen: PropTypes.bool,
-    width: PropTypes.string,
-};
-
-Modal.defaultProps = {
-    onRequestClose: () => {},
-    title: undefined,
-    primary: null,
-    secondary: null,
-    appElement: "body > *:not(.qpp-c-modal)",
-    isOpen: false,
-};
-
 export default Modal;

package/components/Modal/index.jsx

@@ -1,18 +1,16 @@
 import React from "react";
-import PropTypes from "prop-types";
 
 import DsModal from "./Modal";
 
-const Modal = ({ useDesignSystem, ...rest }) => {
+/**
+ * @param {{
+ *   useDesignSystem?: boolean
+ * } & React.ComponentProps<typeof DsModal>} props
+ */
+const Modal = ({ useDesignSystem = false, ...rest }) => {
     return <DsModal {...rest} />;
 };
 
-Modal.propTypes = {
-    useDesignSystem: PropTypes.bool,
-};
-Modal.defaultProps = {
-    useDesignSystem: false,
-};
 Modal.displayName = "Modal";
 
 export default Modal;

package/components/NumberInput/NumberInput.stories.js

@@ -1,6 +1,5 @@
 import React from "react";
 import NumberInput from "./index";
-import PropTypes from "prop-types";
 
 export default {
     title: "NumberInput",
@@ -13,10 +12,6 @@ const Wrapper = ({ children }) => (
     </div>
 );
 
-Wrapper.propTypes = {
-    children: PropTypes.node,
-};
-
 export const BasicNumberInput = () => (
     <Wrapper>
         <NumberInput id="basic-number-input" label="Demo number input" />

package/components/NumberInput/index.jsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import PropTypes from "prop-types";
 import TextField from "../TextField";
 
 export default function NumberInput({
@@ -61,15 +60,3 @@ export default function NumberInput({
         />
     );
 }
-
-NumberInput.propTypes = {
-    id: PropTypes.string,
-    error: PropTypes.bool,
-    helperText: PropTypes.string,
-    required: PropTypes.bool,
-    disabled: PropTypes.bool,
-    label: PropTypes.string,
-    tooltipText: PropTypes.string,
-    inputProps: PropTypes.object,
-    allowNegative: PropTypes.bool,
-};

package/components/Pagination/index.jsx

@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { visuallyHidden } from "@mui/utils";
 
 import {
@@ -198,20 +197,4 @@ const Pagination = ({
     );
 };
 
-Pagination.propTypes = {
-    totalItems: PropTypes.number,
-    visibleItems: PropTypes.number,
-    count: PropTypes.number,
-    offset: PropTypes.number,
-    shape: PropTypes.string,
-    limit: PropTypes.number,
-    page: PropTypes.number,
-    limitOptions: PropTypes.array,
-    handlePageChange: PropTypes.func,
-    handleLimitChange: PropTypes.func,
-    hidePrevButton: PropTypes.bool,
-    hideNextButton: PropTypes.bool,
-    type: PropTypes.string,
-};
-
 export { Pagination };

package/components/Popover/index.js

@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import Popover from "@mui/material/Popover";
 
 const MadiePopover = ({
@@ -107,26 +106,4 @@ const MadiePopover = ({
     );
 };
 
-MadiePopover.propTypes = {
-    optionsOpen: PropTypes.bool,
-    anchorEl: PropTypes.any,
-    handleClose: PropTypes.func,
-    canEdit: PropTypes.bool,
-    editViewSelectOptionProps: PropTypes.object,
-    otherSelectOptionProps: PropTypes.arrayOf(
-        PropTypes.shape({
-            dataTestId: PropTypes.string,
-            label: PropTypes.string,
-            toImplementFunction: PropTypes.func,
-        }),
-    ),
-    additionalSelectOptionProps: PropTypes.arrayOf(
-        PropTypes.shape({
-            dataTestId: PropTypes.string,
-            label: PropTypes.string,
-            toImplementFunction: PropTypes.func,
-        }),
-    ),
-};
-
 export default MadiePopover;

package/components/RadioButton/RadioButton.jsx

@@ -6,9 +6,8 @@ import {
     Radio,
     RadioGroup,
 } from "@mui/material";
-import PropTypes from "prop-types";
 import InputLabel from "../InputLabel";
-import { ReadOnlyTextField } from "../index";
+import ReadOnlyTextField from "../ReadOnlyTextField";
 
 const RadioButton = ({
     id,
@@ -121,15 +120,4 @@ const RadioButton = ({
     );
 };
 
-RadioButton.propTypes = {
-    id: PropTypes.string,
-    dataTestId: PropTypes.string,
-    required: PropTypes.bool,
-    disabled: PropTypes.bool,
-    error: PropTypes.bool,
-    label: PropTypes.string,
-    helperText: PropTypes.string,
-    options: PropTypes.arrayOf(PropTypes.any),
-};
-
 export default RadioButton;

package/components/ReadOnlyTextField/ReadOnlyTextField.stories.js

@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import ReadOnlyTextField from "./index";
 import { FormHelperText } from "@mui/material";
 
@@ -14,11 +13,6 @@ const Wrapper = ({ children }) => (
     </div>
 );
 
-Wrapper.propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node,
-};
-
 export const Textfield = () => (
     <Wrapper>
         <ReadOnlyTextField

package/components/ReadOnlyTextField/index.jsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { FormControl, TextareaAutosize } from "@mui/material";
 import InputLabel from "../InputLabel";
-import PropTypes from "prop-types";
 import _ from "lodash";
 
 const ReadOnlyTextField = ({
@@ -77,11 +76,4 @@ const ReadOnlyTextField = ({
     );
 };
 
-ReadOnlyTextField.propTypes = {
-    id: 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,
-};
 export default ReadOnlyTextField;

package/components/RichTextEditor/index.jsx

@@ -1,6 +1,5 @@
 import React from "react";
 
-import PropTypes from "prop-types";
 import { EditorContent, useEditor } from "@tiptap/react";
 import InputLabel from "../InputLabel";
 
@@ -262,18 +261,4 @@ const RichTextEditor = ({
     );
 };
 
-RichTextEditor.propTypes = {
-    id: PropTypes.string,
-    error: PropTypes.bool,
-    required: PropTypes.bool,
-    label: PropTypes.string,
-    onChange: PropTypes.func,
-    content: PropTypes.any,
-    disabled: PropTypes.bool,
-};
-
-MenuBar.propTypes = {
-    editor: PropTypes.any,
-};
-
 export default RichTextEditor;

package/components/SanitizedContent/index.jsx

@@ -1,6 +1,5 @@
 import React from "react";
 import xss from "xss";
-import PropTypes from "prop-types";
 
 // Override the default allowed HTML tags
 const defaultAllowedTags = [
@@ -190,11 +189,4 @@ const SanitizedContent = ({
     );
 };
 
-SanitizedContent.propTypes = {
-    html: PropTypes.string,
-    customClassName: PropTypes.string,
-    allowedTags: PropTypes.array,
-    allowedAttributes: PropTypes.array,
-};
-
 export default SanitizedContent;

package/components/Search/index.js

@@ -1,19 +1,33 @@
 import React from "react";
-import PropTypes from "prop-types";
 import SearchIcon from "@mui/icons-material/Search";
 
+/**
+ * @param {{
+ *   id?: string,
+ *   name?: string,
+ *   placeholder?: string,
+ *   disableSearchBtn?: boolean,
+ *   disabled?: boolean,
+ *   inputValue?: string,
+ *   onClick?: () => void,
+ *   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void,
+ *   inputAriaLabel?: string,
+ *   buttonAriaLabel?: string,
+ *   inputWidth?: string
+ * }} props
+ */
 const Search = ({
-    id,
-    name,
-    placeholder,
-    disableSearchBtn,
-    disabled,
-    inputValue,
-    onClick,
-    onChange,
-    inputAriaLabel,
-    buttonAriaLabel,
-    inputWidth,
+    id = "search-input",
+    name = "",
+    placeholder = "",
+    disableSearchBtn = false,
+    disabled = false,
+    inputValue = "",
+    onClick = () => null,
+    onChange = () => null,
+    inputAriaLabel = "",
+    buttonAriaLabel = "",
+    inputWidth = "auto",
 }) => {
     const inputStyle = {
         width: inputWidth,
@@ -55,32 +69,4 @@ const Search = ({
     );
 };
 
-Search.propTypes = {
-    id: PropTypes.string,
-    name: PropTypes.string,
-    placeholder: PropTypes.string,
-    disableSearchBtn: PropTypes.bool,
-    disabled: PropTypes.bool,
-    inputValue: PropTypes.string,
-    onClick: PropTypes.func,
-    onChange: PropTypes.func,
-    inputAriaLabel: PropTypes.string,
-    buttonAriaLabel: PropTypes.string,
-    inputWidth: PropTypes.string,
-};
-
-Search.defaultProps = {
-    id: "search-input",
-    name: "",
-    placeholder: "",
-    disableSearchBtn: false,
-    disabled: false,
-    inputValue: "",
-    onClick: () => null,
-    onChange: () => null,
-    inputAriaLabel: "",
-    buttonAriaLabel: "",
-    inputWidth: "auto",
-};
-
 export default Search;

package/components/Select/Select.stories.js

@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import Select from "./index";
 import { MenuItem, Box } from "@mui/material";
 
@@ -29,9 +28,6 @@ const Wrapper = ({ children }) => (
         {children}
     </div>
 );
-Wrapper.propTypes = {
-    children: PropTypes.node,
-};
 
 const options = [
     { key: "key1", value: "value1", testId: "testid1", name: "name1" },

package/components/Select/index.jsx

@@ -3,8 +3,7 @@ import { FormControl, Select as MUISelect, MenuItem } from "@mui/material";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import InputLabel from "../InputLabel";
 import FormHelperText from "@mui/material/FormHelperText";
-import PropTypes from "prop-types";
-import { ReadOnlyTextField } from "../index";
+import ReadOnlyTextField from "../ReadOnlyTextField";
 
 const Select = ({
     placeHolder = undefined, // expects placeholder objects of { name: value } and inserts into the render item function.
@@ -174,18 +173,4 @@ const Select = ({
     );
 };
 
-Select.propTypes = {
-    id: PropTypes.string,
-    placeHolder: PropTypes.shape({
-        name: PropTypes.string,
-        value: PropTypes.any,
-    }), // expects placeholder objects of { name: value } and inserts into the render item function.
-    required: PropTypes.bool,
-    disabled: PropTypes.bool,
-    error: PropTypes.bool,
-    label: PropTypes.string,
-    helperText: PropTypes.string,
-    options: PropTypes.arrayOf(PropTypes.element),
-};
-
 export default Select;