fix: Remove prop-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/NavBarDropdownMenu.tsx

@@ -1,5 +1,4 @@
 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";
@@ -158,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/Icon/Icon.story.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import icons from "@nulogy/icons";
 
 import { Box, Flex, Icon, InlineIcon } from "../index";
@@ -16,10 +15,6 @@ const IconCode = ({ icon }) => (
   </code>
 );
 
-IconCode.propTypes = {
-  icon: PropTypes.string.isRequired,
-};
-
 export default {
   title: "Components/Icon",
 };

src/NavBar/DesktopMenu.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import styled from "styled-components";
 import type { CSSObject } from "styled-components";
 import { themeGet } from "@styled-system/theme-get";
@@ -43,12 +42,6 @@ const ApplyMenuLinkStyles = styled.div<{
   },
 }));
 
-ApplyMenuLinkStyles.propTypes = {
-  color: PropTypes.string,
-  hoverColor: PropTypes.string,
-  hoverBackground: PropTypes.string,
-};
-
 ApplyMenuLinkStyles.defaultProps = {
   color: theme.colors.white,
   hoverColor: theme.colors.lightBlue,
@@ -126,11 +119,6 @@ const BaseDesktopMenu = ({ menuData, themeColorObject, ...props }) => (
   <Nav {...props}>{menuData.map((menuItem) => renderMenuItem(menuItem, themeColorObject))}</Nav>
 );
 
-BaseDesktopMenu.propTypes = {
-  menuData: PropTypes.arrayOf(PropTypes.shape({})),
-  themeColorObject: PropTypes.shape({}),
-};
-
 const DesktopMenu = styled(BaseDesktopMenu)({
   "> div": {
     ":not(:last-of-type)": {

src/NavBar/MenuTrigger.tsx

@@ -1,6 +1,5 @@
 import React, { ReactNode } from "react";
 import styled, { useTheme } from "styled-components";
-import PropTypes from "prop-types";
 import { themeGet } from "@styled-system/theme-get";
 import theme from "../theme";
 import { Icon } from "../Icon";
@@ -47,12 +46,6 @@ const StyledButton = styled.button<{
   },
 }));
 
-StyledButton.propTypes = {
-  color: PropTypes.string,
-  hoverColor: PropTypes.string,
-  hoverBackground: PropTypes.string,
-};
-
 StyledButton.defaultProps = {};
 
 const MenuTriggerButton = React.forwardRef<any, MenuTriggerProps>(
@@ -70,13 +63,6 @@ const MenuTriggerButton = React.forwardRef<any, MenuTriggerProps>(
   )
 );
 
-MenuTriggerButton.propTypes = {
-  name: PropTypes.string.isRequired,
-  color: PropTypes.string,
-  hoverColor: PropTypes.string,
-  hoverBackground: PropTypes.string,
-};
-
 function MenuTrigger({
   menuData,
   name,

src/NavBar/MobileMenu.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import styled from "styled-components";
 import type { CSSObject } from "styled-components";
 import { display } from "styled-system";
@@ -56,13 +55,6 @@ const ApplyMenuLinkStyles = styled.li<{
   },
 }));
 
-ApplyMenuLinkStyles.propTypes = {
-  layer: PropTypes.number,
-  color: PropTypes.string,
-  hoverColor: PropTypes.string,
-  hoverBackground: PropTypes.string,
-};
-
 ApplyMenuLinkStyles.defaultProps = {
   layer: 0,
   color: theme.colors.white,
@@ -178,22 +170,6 @@ const SubMenu = ({ menuItem, linkOnClick, themeColorObject, layer }) => (
   </>
 );
 
-const ThemeColorObjectPropTypes = {
-  textColor: PropTypes.string,
-  background: PropTypes.string,
-  logoColor: PropTypes.string,
-};
-
-SubMenu.propTypes = {
-  layer: PropTypes.number.isRequired,
-  menuItem: PropTypes.shape({
-    items: PropTypes.arrayOf(PropTypes.shape({})),
-    name: PropTypes.string.isRequired,
-  }).isRequired,
-  linkOnClick: PropTypes.func,
-  themeColorObject: PropTypes.shape(ThemeColorObjectPropTypes),
-};
-
 SubMenu.defaultProps = {
   linkOnClick: null,
   themeColorObject: undefined,
@@ -235,17 +211,6 @@ const BaseMobileMenu = ({ menuData, closeMenu, subtext, includeSubtext, themeCol
   </Nav>
 );
 
-BaseMobileMenu.propTypes = {
-  menuData: PropTypes.shape({
-    primaryMenu: PropTypes.arrayOf(PropTypes.shape({})),
-    secondaryMenu: PropTypes.arrayOf(PropTypes.shape({})),
-  }),
-  subtext: PropTypes.string,
-  includeSubtext: PropTypes.bool,
-  closeMenu: PropTypes.func,
-  themeColorObject: PropTypes.shape(ThemeColorObjectPropTypes),
-};
-
 BaseMobileMenu.defaultProps = {
   menuData: null,
   subtext: null,

src/NavBar/NavBar.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import styled from "styled-components";
 import { themeGet } from "@styled-system/theme-get";
 import ReactResizeDetector from "react-resize-detector";
@@ -120,22 +119,6 @@ const MediumNavBar: React.FC<React.PropsWithChildren<MediumNavBarProps>> = ({
   );
 };
 
-export const MenuDataPropTypes = {
-  primaryMenu: PropTypes.arrayOf(isValidMenuItem),
-  secondaryMenu: PropTypes.arrayOf(isValidMenuItem),
-  search: PropTypes.shape({
-    onSubmit: PropTypes.func,
-  }),
-};
-
-MediumNavBar.propTypes = {
-  subtext: PropTypes.string,
-  brandingLinkHref: PropTypes.string,
-  menuData: PropTypes.shape(MenuDataPropTypes),
-  brandingLinkTo: PropTypes.string,
-  themeColor: PropTypes.oneOf(["blue", "white"]),
-};
-
 MediumNavBar.defaultProps = {
   subtext: null,
   brandingLinkHref: "/",
@@ -192,10 +175,6 @@ export const MenuIcon = ({ isOpen }) => {
   return <Icon icon={icon} title={title} />;
 };
 
-MenuIcon.propTypes = {
-  isOpen: PropTypes.bool,
-};
-
 MenuIcon.defaultProps = {
   isOpen: false,
 };
@@ -219,13 +198,6 @@ const NavBar = (props) => (
   </ReactResizeDetector>
 );
 
-NavBar.propTypes = {
-  menuData: PropTypes.shape(MenuDataPropTypes),
-  className: PropTypes.string,
-  breakpointUpper: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  themeColor: PropTypes.oneOf(["blue", "white"]),
-};
-
 NavBar.defaultProps = {
   menuData: null,
   className: undefined,

src/NavBar/NavBarDropdownMenu.tsx

@@ -1,6 +1,5 @@
 // @ts-nocheck
 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";
@@ -129,22 +128,6 @@ class StatelessNavBarDropdownMenu extends React.Component {
 }
 /* eslint-enable react/destructuring-assignment */
 
-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"]),
-  modifiers: PropTypes.shape({}),
-  triggerTogglesMenuState: PropTypes.bool,
-  dropdownMenuContainerEventHandlers: PropTypes.func,
-};
-
 StatelessNavBarDropdownMenu.defaultProps = {
   showArrow: true,
   placement: "bottom-start",
@@ -155,11 +138,6 @@ StatelessNavBarDropdownMenu.defaultProps = {
 
 const NavBarDropdownMenu = withMenuState(StatelessNavBarDropdownMenu);
 
-NavBarDropdownMenu.propTypes = {
-  showDelay: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  hideDelay: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-};
-
 NavBarDropdownMenu.defaultProps = {
   showDelay: "0",
   hideDelay: "100",

src/NavBar/SmallNavBar.tsx

@@ -1,6 +1,5 @@
 // @ts-nocheck
 import React from "react";
-import PropTypes from "prop-types";
 import { Branding } from "../Branding";
 import { Flex } from "../Flex";
 import theme from "../theme";
@@ -10,7 +9,6 @@ import MobileMenu from "./MobileMenu";
 import {
   BrandingLink,
   getThemeColor,
-  MenuDataPropTypes,
   MenuIcon,
   MobileMenuTrigger,
   NavBarBackground,
@@ -95,21 +93,6 @@ class SmallNavBarNoState extends React.Component {
   }
 }
 
-SmallNavBarNoState.propTypes = {
-  menuState: PropTypes.shape({
-    isOpen: PropTypes.bool,
-    toggleMenu: PropTypes.func,
-    closeMenu: PropTypes.func,
-  }).isRequired,
-  menuData: PropTypes.shape(MenuDataPropTypes),
-  subtext: PropTypes.string,
-  brandingLinkHref: PropTypes.string,
-  brandingLinkTo: PropTypes.string,
-  breakpointLower: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  width: PropTypes.number,
-  themeColor: PropTypes.oneOf(["blue", "white"]),
-};
-
 SmallNavBarNoState.defaultProps = {
   menuData: null,
   subtext: null,

src/NavBar/SubMenuTrigger.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import styled from "styled-components";
-import PropTypes from "prop-types";
 import theme from "../theme";
 import { Icon } from "../Icon";
 import NavBarDropdownMenu from "./NavBarDropdownMenu";
@@ -50,11 +49,6 @@ const SubMenuTriggerButton = React.forwardRef<any, SubMenuTriggerButtonProps>(({
   </StyledButton>
 ));
 
-SubMenuTriggerButton.propTypes = {
-  name: PropTypes.string.isRequired,
-  isOpen: PropTypes.bool,
-};
-
 SubMenuTriggerButton.defaultProps = {
   isOpen: false,
 };
@@ -83,12 +77,6 @@ const SubMenuTrigger = (props) => {
   );
 };
 
-SubMenuTrigger.propTypes = {
-  name: PropTypes.string.isRequired,
-  menuData: PropTypes.arrayOf(PropTypes.shape({})),
-  onItemClick: PropTypes.func,
-};
-
 SubMenuTrigger.defaultProps = {
   menuData: null,
   onItemClick: null,

src/NavBar/isValidMenuItem.tsx

@@ -1,5 +1,3 @@
-import PropTypes from "prop-types";
-
 const isValidMenuItem = function validArrayItem(arr, idx, componentName, location, propFullName) {
   const obj = arr[idx];
 
@@ -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);