@madie/madie-design-system 1.2.62 → 2.0.1

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";
 
@@ -197,7 +196,7 @@ const RichTextEditor = ({
                 onChange(newValue);
             },
         },
-        [content]
+        [content],
     );
     return (
         <div
@@ -245,36 +244,21 @@ const RichTextEditor = ({
                 {label}
             </InputLabel>
             {disabled ? (
-                    <p
-                        data-testid={`${id}-value`}
-                        aria-labelledby={label}
-                        dangerouslySetInnerHTML={{
-                            __html: content ? DOMPurify.sanitize(content) : "-",
-                        }}
-                    />
-
-                ) : (
-                    <>
-                        <MenuBar editor={editor}/>
-                        <EditorContent editor={editor}/>
-                    </>
-                )}
+                <p
+                    data-testid={`${id}-value`}
+                    aria-labelledby={label}
+                    dangerouslySetInnerHTML={{
+                        __html: content ? DOMPurify.sanitize(content) : "-",
+                    }}
+                />
+            ) : (
+                <>
+                    <MenuBar editor={editor} />
+                    <EditorContent editor={editor} />
+                </>
+            )}
         </div>
     );
 };
 
-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/Search.stories.js

@@ -1,11 +1,9 @@
 import React from "react";
 import Search from "./index";
-import { withKnobs } from "@storybook/addon-knobs";
 
 export default {
     title: "Search",
     component: Search,
-    decorators: [withKnobs],
 };
 
 export const ExampleSearch = () => (
@@ -13,8 +11,8 @@ export const ExampleSearch = () => (
         id="Example id"
         name="Example name"
         placeholder="Example placeholder"
-        inputAriaLabel="Example input arial-label"
-        buttonAriaLabel="Example button arial-label"
+        inputAriaLabel="Example input aria-label"
+        buttonAriaLabel="Example button aria-label"
     />
 );
 

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,13 +1,23 @@
 import React from "react";
-import PropTypes from "prop-types";
-import { withKnobs } from "@storybook/addon-knobs";
 import Select from "./index";
 import { MenuItem, Box } from "@mui/material";
 
 export default {
     title: "Select",
     component: Select,
-    decorators: [withKnobs],
+    argTypes: {
+        defaultValue: { control: "text" },
+        placeHolder: { control: "object" },
+        label: { control: "text" },
+        id: { control: "text" },
+        size: {
+            control: { type: "select", options: ["small", "medium", "large"] },
+        },
+        disabled: { control: "boolean" },
+        required: { control: "boolean" },
+        error: { control: "boolean" },
+        helperText: { control: "text" },
+    },
 };
 
 const Wrapper = ({ children }) => (
@@ -18,145 +28,62 @@ const Wrapper = ({ children }) => (
         {children}
     </div>
 );
-Wrapper.propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node,
-};
 
 const options = [
     { key: "key1", value: "value1", testId: "testid1", name: "name1" },
     { key: "key2", value: "value2", testId: "testid2", name: "name2" },
     { key: "key3", value: "value2", testId: "testid3", name: "name3" },
 ];
-export const SelectWithLabel = () => (
-    <Wrapper>
-        <Select
-            defaultValue=""
-            placeHolder={{ name: "placeholder", value: "" }}
-            label="Text Label"
-            id="measureName"
-            inputProps={{ "data-testid": "measure-name-input" }}
-            data-testid="measure-name-text-field"
-            size="small"
-            options={options.map(({ key, value, testId, name }) => {
-                return (
-                    <MenuItem
-                        key={key}
-                        value={value}
-                        data-testid={`option-${testId}`}
-                    >
-                        {name}
-                    </MenuItem>
-                );
-            })}
-        />
-    </Wrapper>
-);
 
-export const WithHelperText = () => (
-    <Wrapper>
-        <Select
-            placeHolder={{ name: "placeholder", value: "" }}
-            defaultValue=""
-            label="Text Label"
-            id="measureName"
-            inputProps={{ "data-testid": "measure-name-input" }}
-            data-testid="measure-name-text-field"
-            size="small"
-            helperText="A descriptive message"
-            options={options.map(({ key, value, testId, name }) => {
-                return (
-                    <MenuItem
-                        key={key}
-                        value={value}
-                        data-testid={`option-${testId}`}
-                    >
-                        {name}
-                    </MenuItem>
-                );
-            })}
-        />
-    </Wrapper>
-);
+const renderedOptions = options.map(({ key, value, testId, name }) => (
+    <MenuItem key={key} value={value} data-testid={`option-${testId}`}>
+        {name}
+    </MenuItem>
+));
 
-export const Disabled = () => (
+const Template = (args) => (
     <Wrapper>
-        <Select
-            placeHolder={{ name: "placeholder", value: "" }}
-            defaultValue=""
-            label="Text Label"
-            id="measureName"
-            inputProps={{ "data-testid": "measure-name-input" }}
-            data-testid="measure-name-text-field"
-            size="small"
-            disabled
-            options={options.map(({ key, value, testId, name }) => {
-                return (
-                    <MenuItem
-                        key={key}
-                        value={value}
-                        data-testid={`option-${testId}`}
-                    >
-                        {name}
-                    </MenuItem>
-                );
-            })}
-        />
+        <Select {...args} options={renderedOptions} />
     </Wrapper>
 );
 
-export const Required = () => (
-    <Wrapper>
-        <Select
-            required
-            placeHolder={{ name: "placeholder", value: "" }}
-            defaultValue=""
-            label="Text Label"
-            id="measureName"
-            inputProps={{ "data-testid": "measure-name-input" }}
-            data-testid="measure-name-text-field"
-            size="small"
-            options={options.map(({ key, value, testId, name }) => {
-                return (
-                    <MenuItem
-                        key={key}
-                        value={value}
-                        data-testid={`option-${testId}`}
-                    >
-                        {name}
-                    </MenuItem>
-                );
-            })}
-        />
-    </Wrapper>
-);
+export const SelectWithLabel = Template.bind({});
+SelectWithLabel.args = {
+    defaultValue: "",
+    placeHolder: { name: "placeholder", value: "" },
+    label: "Text Label",
+    id: "measureName",
+    size: "small",
+    disabled: false,
+    required: false,
+    error: false,
+    helperText: "",
+};
 
-export const Error = () => (
-    <Wrapper>
-        <Select
-            error
-            placeHolder={{ name: "placeholder", value: "" }}
-            defaultValue=""
-            label="Text Label"
-            id="measureName"
-            inputProps={{ "data-testid": "measure-name-input" }}
-            data-testid="measure-name-text-field"
-            size="small"
-            helperText="An error message An error message An error message"
-            options={options.map(({ key, value, testId, name }) => {
-                return (
-                    <MenuItem
-                        key={key}
-                        value={value}
-                        data-testid={`option-${testId}`}
-                    >
-                        {name}
-                    </MenuItem>
-                );
-            })}
-        />
-    </Wrapper>
-);
+export const WithHelperText = Template.bind({});
+WithHelperText.args = {
+    ...SelectWithLabel.args,
+    helperText: "A descriptive message",
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+    ...SelectWithLabel.args,
+    disabled: true,
+};
+
+export const Required = Template.bind({});
+Required.args = {
+    ...SelectWithLabel.args,
+    required: true,
+};
+
+export const Error = Template.bind({});
+Error.args = {
+    ...SelectWithLabel.args,
+    error: true,
+    helperText: "An error message An error message An error message",
+};
 
 export const VariedHeights = () => (
     <div
@@ -174,20 +101,9 @@ export const VariedHeights = () => (
                 data-testid="measure-name-text-field"
                 size="small"
                 helperText="An error message"
-                options={options.map(({ key, value, testId, name }) => {
-                    return (
-                        <MenuItem
-                            key={key}
-                            value={value}
-                            data-testid={`option-${testId}`}
-                        >
-                            {name}
-                        </MenuItem>
-                    );
-                })}
+                options={renderedOptions}
             />
             <Select
-                // error
                 placeHolder={{ name: "placeholder", value: "" }}
                 defaultValue=""
                 label="Text Label"
@@ -196,20 +112,9 @@ export const VariedHeights = () => (
                 data-testid="measure-name-text-field"
                 size="small"
                 helperText=""
-                options={options.map(({ key, value, testId, name }) => {
-                    return (
-                        <MenuItem
-                            key={key}
-                            value={value}
-                            data-testid={`option-${testId}`}
-                        >
-                            {name}
-                        </MenuItem>
-                    );
-                })}
+                options={renderedOptions}
             />
             <Select
-                // error
                 placeHolder={{ name: "placeholder", value: "" }}
                 defaultValue=""
                 label="Text Label"
@@ -218,17 +123,7 @@ export const VariedHeights = () => (
                 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 "
-                options={options.map(({ key, value, testId, name }) => {
-                    return (
-                        <MenuItem
-                            key={key}
-                            value={value}
-                            data-testid={`option-${testId}`}
-                        >
-                            {name}
-                        </MenuItem>
-                    );
-                })}
+                options={renderedOptions}
             />
         </Box>
     </div>

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.
@@ -34,7 +33,7 @@ const Select = ({
                 size="small"
                 {...rest}
             />
-        )
+        );
     }
 
     const placehold = (
@@ -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;

package/components/Tabs/Tab.js

@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { Tab as MuiTab } from "@mui/material";
 
 const typeA = {
@@ -14,6 +13,7 @@ const typeA = {
         boxShadow: "0px 0px 0px 4px #CBE4FF",
     },
 };
+
 const typeB = {
     color: "#515151",
     "&:hover": {
@@ -25,6 +25,7 @@ const typeB = {
         background: "#fff",
     },
 };
+
 const typeC = {
     color: "#333",
     background: "#EDEDED",
@@ -38,7 +39,20 @@ const typeC = {
     },
 };
 
-const Tab = ({ type, orientation, size, ...rest }) => {
+/**
+ * @param {{
+ *   type?: "A" | "B" | "C" | "D",
+ *   size?: "standard" | string,
+ *   orientation?: "horizontal" | "vertical",
+ *   [key: string]: any
+ * }} props
+ */
+const Tab = ({
+    type = "A",
+    size = "standard",
+    orientation = "horizontal",
+    ...rest
+}) => {
     const baseStyle = {
         height: size === "standard" ? "48px" : "60px",
         fontFamily: "Rubik, sans serif",
@@ -46,35 +60,25 @@ const Tab = ({ type, orientation, size, ...rest }) => {
         padding: size === "standard" ? "14.5px 24px" : "20.5px 24px",
         textTransform: "none",
         fontSize: "16px",
-        alignItems: orientation === "vertical" && "flex-start",
+        alignItems: orientation === "vertical" ? "flex-start" : undefined,
         "&.Mui-disabled": {
             background: "#DDDDDD",
             color: "#717171 !important",
         },
     };
-    const style = ((type) => {
-        if (type === "A") {
-            return { ...baseStyle, ...typeA };
-        }
-        if (type === "B" || type === "D") {
-            return { ...baseStyle, ...typeB };
-        }
-        if (type === "C") {
-            return { ...baseStyle, ...typeC };
-        }
-    })(type);
-    return <MuiTab tabIndex={0} sx={style} {...rest} />;
-};
 
-Tab.propTypes = {
-    orientation: PropTypes.string,
-    type: PropTypes.oneOf(["A", "B", "C", "D"]),
-    size: PropTypes.oneOf(["standard", "large"]),
-};
-Tab.defaultProps = {
-    type: "A",
-    size: "standard",
-    onChange: null,
+    const variantStyles =
+        type === "A"
+            ? typeA
+            : type === "B" || type === "D"
+              ? typeB
+              : type === "C"
+                ? typeC
+                : {};
+
+    const style = { ...baseStyle, ...variantStyles };
+
+    return <MuiTab tabIndex={0} sx={style} {...rest} />;
 };
 
 export default Tab;

package/components/Tabs/TabPanel.js

@@ -1,15 +1,25 @@
 import React from "react";
-import PropTypes from "prop-types";
 
+/**
+ * @param {{
+ *   children?: React.ReactNode,
+ *   value?: number,
+ *   id: string,
+ *   index?: number,
+ *   className?: string,
+ *   disabled?: boolean
+ * }} props
+ */
 export const TabPanel = ({
     children,
-    value,
+    value = 0,
+    index = 0,
     id,
-    index,
-    className,
-    disabled,
+    className = "",
+    disabled = false,
 }) => {
     const classes = ["qpp-c-tabs__panel", className].filter(Boolean).join(" ");
+
     return (
         <div
             role="tabpanel"
@@ -24,18 +34,4 @@ export const TabPanel = ({
     );
 };
 
-TabPanel.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    index: PropTypes.number.isRequired,
-    id: PropTypes.string,
-    value: PropTypes.number.isRequired,
-    disabled: PropTypes.bool,
-};
-
-TabPanel.defaultProps = {
-    index: 0,
-    value: 0,
-};
-
 export default TabPanel;