fix: remove defaultProps and propTypes (#1434)

* Remove defaultProps and PropTypes
* Improve types

package.json

@@ -116,7 +116,6 @@
     "jscodeshift": "^0.11.0",
     "mockdate": "^3.0.2",
     "plop": "^2.4.0",
-    "prop-types": "15.7.2",
     "react": "17.0.2",
     "react-color": "^2.18.1",
     "react-dom": "17.0.2",

rollup.config.js

@@ -15,7 +15,6 @@ const PEER_DEPENDENCIES = {
 
 const GLOBALS = {
   ...PEER_DEPENDENCIES,
-  "prop-types": "PropTypes",
   "react-windowed-select": "components",
   "@babel/runtime/helpers/typeof": "typeof",
   "@babel/runtime/helpers/defineProperty": "defineProperty",
@@ -54,7 +53,7 @@ const CORE_PLUGINS = [
   commonjs({
     /* include: include all items in node_modules folders (in entire monorepo) */
     include: [/node_modules/],
-    /* namedExports: sometimes commonjs can't resolve named exports from certain libraries, 
+    /* namedExports: sometimes commonjs can't resolve named exports from certain libraries,
     ex: import {exportName} from "package-name"; => exportName module not found
     in those cases, it needs to be added as ["package-name"]: "exportName" here */
     namedExports: {

src/BrandedNavBar/MobileMenu.tsx

@@ -8,7 +8,6 @@ import { BrandingText } from "../Branding";
 import { DropdownLink, DropdownText } from "../DropdownMenu";
 import { Icon } from "../Icon";
 import { Link } from "../Link";
-import { LinkProps } from "../Link/Link";
 import { addStyledProps } from "../StyledProps";
 import NulogyLogo from "./NulogyLogo";
 import { TriggerFunctionProps } from "./TriggerFunctionProps";
@@ -163,7 +162,7 @@ const getSubMenuHeading = (layer, name) =>
 type ThemeColorObject = {
   textColor?: string;
   background?: string;
-  logoColor?: string;
+  logoColor?: "white" | "blue";
 };
 
 type MenuItem = {
@@ -237,7 +236,7 @@ const BaseMobileMenu: React.FC<React.PropsWithChildren<BaseMobileMenuProps>> = (
 }) => (
   <Nav backgroundColor={themeColorObject && themeColorObject.background} {...props}>
     <BrandingWrap>
-      <BrandingText logoColor={themeColorObject && themeColorObject.logoColor} />
+      <BrandingText logoColor={themeColorObject?.logoColor} />
     </BrandingWrap>
     <Menu>
       {menuData.primaryMenu && renderTopLayerMenuItems(menuData.primaryMenu, closeMenu, themeColorObject)}

src/BrandedNavBar/NavBarDropdownMenu.tsx

@@ -1,7 +1,4 @@
-/* TS IGNORED: due to problems typing propTypes and defaultProps,
-it can stop being ingnored when its refactored to a functional component */
 import React from "react";
-import PropTypes from "prop-types";
 import { Manager, Reference, Popper } from "react-popper";
 import { DetectOutsideClick, withMenuState, PopperArrow } from "../utils";
 import DropdownMenuContainer from "../DropdownMenu/DropdownMenuContainer";
@@ -160,22 +157,6 @@ class StatelessNavBarDropdownMenu extends StatelessNavBarDropdownMenuClass {
 }
 /* eslint-enable react/destructuring-assignment */
 
-// @ts-ignore
-StatelessNavBarDropdownMenu.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-  trigger: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-  menuState: PropTypes.shape({
-    isOpen: PropTypes.bool,
-    openMenu: PropTypes.func,
-    closeMenu: PropTypes.func,
-    toggleMenu: PropTypes.func,
-  }).isRequired,
-  showArrow: PropTypes.bool,
-  placement: PropTypes.oneOf(["bottom-start", "right-start", "left-start"]),
-  modifiers: PropTypes.shape({}),
-  triggerTogglesMenuState: PropTypes.bool,
-  dropdownMenuContainerEventHandlers: PropTypes.func,
-};
 // @ts-ignore
 StatelessNavBarDropdownMenu.defaultProps = {
   showArrow: true,

src/BrandedNavBar/isValidMenuItem.ts

@@ -1,6 +1,4 @@
-import PropTypes from "prop-types";
-
-const isValidMenuItem = function validArrayItem(arr, idx, componentName, location, propFullName) {
+export default function isValidMenuItem(arr, idx, componentName, location, propFullName) {
   const obj = arr[idx];
 
   if (typeof obj !== "object") {
@@ -9,19 +7,6 @@ const isValidMenuItem = function validArrayItem(arr, idx, componentName, locatio
     );
   }
 
-  PropTypes.checkPropTypes(
-    {
-      name: PropTypes.node.isRequired,
-      ariaLabel: PropTypes.string,
-      href: PropTypes.string,
-      items: PropTypes.arrayOf(isValidMenuItem),
-      render: PropTypes.func,
-    },
-    obj,
-    propFullName,
-    componentName
-  );
-
   let numberOfDefiningKeys = 0;
   const definingKeys = ["href", "items", "render"];
   const keys = Object.keys(obj);
@@ -38,6 +23,4 @@ const isValidMenuItem = function validArrayItem(arr, idx, componentName, locatio
   }
 
   return null;
-};
-
-export default isValidMenuItem;
+}

src/Branding/BrandingText.tsx

@@ -13,25 +13,21 @@ const logoColors = {
 
 const getLogoColor = (logoColor) => logoColors[logoColor] || logoColors.blue;
 
-const BrandingText: React.FC<React.PropsWithChildren<any>> = styled.span(
-  ({ logoColor, size }: BrandingTextProps): any => ({
+const BrandingText = styled.span<BrandingTextProps>(({ logoColor = "blue", size }) => ({
+  color: getLogoColor(logoColor),
+  textDecoration: "none",
+  fontWeight: theme.fontWeights.medium,
+  letterSpacing: "0.0333em",
+  textTransform: "uppercase",
+  fontSize: size === "small" ? "10px" : "11px",
+  lineHeight: "12px",
+  whiteSpace: "nowrap",
+  active: {
     color: getLogoColor(logoColor),
-    textDecoration: "none",
-    fontWeight: theme.fontWeights.medium,
-    letterSpacing: "0.0333em",
-    textTransform: "uppercase",
-    fontSize: size === "small" ? "10px" : "11px",
-    lineHeight: "12px",
-    whiteSpace: "nowrap",
-    active: {
-      color: getLogoColor(logoColor),
-    },
-    visited: {
-      color: getLogoColor(logoColor),
-    },
-  })
-);
-BrandingText.defaultProps = {
-  logoColor: "blue",
-};
+  },
+  visited: {
+    color: getLogoColor(logoColor),
+  },
+}));
+
 export default BrandingText;

src/Branding/LettermarkLogo.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 const sizes = {
   small: {
     height: "24px",
@@ -13,26 +14,26 @@ const sizes = {
     width: "56px",
   },
 };
-const getSize = (size) => sizes[size] || sizes.medium;
+
+const getSize = (size: string) => sizes[size] || sizes.medium;
+
 type LettermarkLogoProps = {
   letterFill?: string;
   size?: string;
 };
-const LettermarkLogo: React.FC<React.PropsWithChildren<LettermarkLogoProps>> = ({ size, letterFill, ...props }) => (
-  <svg
-    {...getSize(size)}
-    {...props}
-    viewBox="0 0 37 32"
-    style={{ display: "block", margin: size === "large" ? null : "2px 0" }}
-  >
-    <path
-      fill={letterFill}
-      d="M30.6967273,1.13648485 L36.3810909,3.40945455 L36.3810909,23.8758788 C36.3810909,28.2705455 30.9507879,29.0424242 27.2853333,29.5602424 C29.3818182,29.0424242 30.7083636,28.4606061 30.6967273,23.8758788 L30.6967273,5.68436364 L25.0123636,3.40945455 L30.6967273,1.13648485 Z M6.82084848,28.4237576 L6.82084848,15.9204848 C6.82084848,14.6618182 7.76533333,13.238303 8.91151515,12.7476364 L14.7801212,10.2264242 L14.7801212,18.1779394 L20.4644848,21.6048485 C21.6106667,22.1866667 23.8758788,22.2002424 23.8758788,20.4664242 L23.8758788,17.0550303 L21.5990303,15.9166061 L21.5990303,1.56319402e-13 L4.26666667,6.38642424 C1.91030303,7.25333333 3.55271368e-15,9.98593939 3.55271368e-15,12.5071515 L3.55271368e-15,31.2669091 L6.82084848,28.4237576 Z"
-    />
-  </svg>
-);
-LettermarkLogo.defaultProps = {
-  letterFill: undefined,
-  size: undefined,
-};
-export default LettermarkLogo;
+
+export default function LettermarkLogo({ size, letterFill, ...props }: LettermarkLogoProps) {
+  return (
+    <svg
+      {...getSize(size)}
+      {...props}
+      viewBox="0 0 37 32"
+      style={{ display: "block", margin: size === "large" ? null : "2px 0" }}
+    >
+      <path
+        fill={letterFill}
+        d="M30.6967273,1.13648485 L36.3810909,3.40945455 L36.3810909,23.8758788 C36.3810909,28.2705455 30.9507879,29.0424242 27.2853333,29.5602424 C29.3818182,29.0424242 30.7083636,28.4606061 30.6967273,23.8758788 L30.6967273,5.68436364 L25.0123636,3.40945455 L30.6967273,1.13648485 Z M6.82084848,28.4237576 L6.82084848,15.9204848 C6.82084848,14.6618182 7.76533333,13.238303 8.91151515,12.7476364 L14.7801212,10.2264242 L14.7801212,18.1779394 L20.4644848,21.6048485 C21.6106667,22.1866667 23.8758788,22.2002424 23.8758788,20.4664242 L23.8758788,17.0550303 L21.5990303,15.9166061 L21.5990303,1.56319402e-13 L4.26666667,6.38642424 C1.91030303,7.25333333 3.55271368e-15,9.98593939 3.55271368e-15,12.5071515 L3.55271368e-15,31.2669091 L6.82084848,28.4237576 Z"
+      />
+    </svg>
+  );
+}