fix: remove prop types

.eslintrc

@@ -1,8 +1,8 @@
 {
-  "extends": [
-    "@readme/eslint-config",
-    "@readme/eslint-config/react"
-  ],
+  "extends": ["@readme/eslint-config", "@readme/eslint-config/react"],
   "parser": "@babel/eslint-parser",
-  "root": true
+  "root": true,
+  "rules": {
+    "react/prop-types": "off",
+  },
 }

__tests__/__snapshots__/index.test.js.snap

@@ -296,10 +296,7 @@ exports[`export multiple Markdown renderers renders custom React components 1`]
 
 
   <Callout
-    attributes={null}
-    calloutStyle="info"
     icon="❗️"
-    node={null}
     theme="error"
     title="UhOh"
     value="Lorem ipsum dolor sit amet consectetur adipisicing elit."

__tests__/components/test.js

@@ -3,7 +3,6 @@ const { cleanup, fireEvent, render } = require('@testing-library/react');
 const React = require('react');
 
 const markdown = require('../../index');
-const { silenceConsole } = require('../helpers');
 
 describe('Data Replacements', () => {
   beforeAll(() => {
@@ -134,13 +133,9 @@ describe('Components', () => {
       rdmd: '[](https://www.nytimes.com/2020/05/03/us/politics/george-w-bush-coronavirus-unity.html "@embed")',
     };
 
-    silenceConsole()(error => {
-      Object.values(fixtures).map(fx => {
-        const { container } = render(markdown.react(fx));
-        return expect(container.innerHTML).toMatchSnapshot();
-      });
-
-      expect(error).toHaveBeenCalledTimes(1);
+    Object.values(fixtures).map(fx => {
+      const { container } = render(markdown.react(fx));
+      return expect(container.innerHTML).toMatchSnapshot();
     });
   });
 

__tests__/lib/registerCustomComponents.test.js

@@ -1,4 +1,3 @@
-const PropTypes = require('prop-types');
 const React = require('react');
 
 const registerCustomComponents = require('../../lib/registerCustomComponents');
@@ -17,8 +16,8 @@ const customComponents = {
   },
 };
 
-customComponents.a.propTypes = { attrToConcatToSafelist: PropTypes.any };
-customComponents.twoWords.propTypes = { attrToBeSafelisted: PropTypes.any };
+customComponents.a.propTypes = { attrToConcatToSafelist: true };
+customComponents.twoWords.propTypes = { attrToBeSafelisted: true };
 
 describe('Custom Component Registrar', () => {
   let registered;

components/Anchor.jsx

@@ -1,4 +1,3 @@
-const PropTypes = require('prop-types');
 const React = require('react');
 
 const BaseUrlContext = require('../contexts/BaseUrl');
@@ -48,8 +47,7 @@ function docLink(href) {
   };
 }
 
-function Anchor(props) {
-  const { baseUrl, children, href, target, title, ...attrs } = props;
+function Anchor({ baseUrl = '/', href = '', target = '', title = '', children, ...attrs }) {
   return (
     // eslint-disable-next-line react/jsx-props-no-spreading
     <a {...attrs} href={getHref(href, baseUrl)} target={target} title={title} {...docLink(href)}>
@@ -58,22 +56,6 @@ function Anchor(props) {
   );
 }
 
-Anchor.propTypes = {
-  baseUrl: PropTypes.string,
-  children: PropTypes.node.isRequired,
-  download: PropTypes.string,
-  href: PropTypes.string,
-  target: PropTypes.string,
-  title: PropTypes.string,
-};
-
-Anchor.defaultProps = {
-  baseUrl: '/',
-  href: '',
-  target: '',
-  title: '',
-};
-
 const AnchorWithContext = props => (
   <BaseUrlContext.Consumer>{baseUrl => <Anchor baseUrl={baseUrl} {...props} />}</BaseUrlContext.Consumer>
 );

components/Callout/index.jsx

@@ -1,8 +1,7 @@
-const PropTypes = require('prop-types');
 const React = require('react');
 
 const Callout = props => {
-  const { attributes, theme, icon } = props;
+  const { attributes = null, theme, icon } = props;
   const [title, ...content] = !props.title ? [null, props.children] : props.children;
 
   return (
@@ -17,22 +16,6 @@ const Callout = props => {
   );
 };
 
-Callout.propTypes = {
-  attributes: PropTypes.shape({}),
-  calloutStyle: PropTypes.string,
-  children: PropTypes.arrayOf(PropTypes.any).isRequired,
-  icon: PropTypes.string,
-  node: PropTypes.shape(),
-  theme: PropTypes.string,
-  title: PropTypes.string,
-};
-
-Callout.defaultProps = {
-  attributes: null,
-  calloutStyle: 'info',
-  node: null,
-};
-
 Callout.sanitize = sanitizeSchema => {
   sanitizeSchema.attributes['rdme-callout'] = ['icon', 'theme', 'title'];
 

components/Code/index.jsx

@@ -1,5 +1,4 @@
 const copy = require('copy-to-clipboard');
-const PropTypes = require('prop-types');
 const React = require('react');
 
 const useHydrated = require('../../hooks/useHydrated');
@@ -32,15 +31,7 @@ function CopyCode({ codeRef, rootClass = 'rdmd-code-copy', className = '' }) {
   return <button ref={button} aria-label="Copy Code" className={`${rootClass} ${className}`} onClick={copier} />;
 }
 
-CopyCode.propTypes = {
-  className: PropTypes.string,
-  codeRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.instanceOf(React.Element) })])
-    .isRequired,
-  rootClass: PropTypes.string,
-};
-
-function Code(props) {
-  const { children, className, copyButtons, lang, meta, theme } = props;
+function Code({ children, className = '', copyButtons = true, lang = '', meta = '', theme }) {
   const isHydrated = useHydrated();
 
   const langClass = className.search(/lang(?:uage)?-\w+/) >= 0 ? className.match(/\s?lang(?:uage)?-(\w+)/)[1] : '';
@@ -82,22 +73,6 @@ function CreateCode({ copyButtons, theme }) {
   return props => <Code {...props} copyButtons={copyButtons} theme={theme} />;
 }
 
-Code.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.string),
-  className: PropTypes.string,
-  copyButtons: PropTypes.bool,
-  lang: PropTypes.string,
-  meta: PropTypes.string,
-  theme: PropTypes.string,
-};
-
-Code.defaultProps = {
-  className: '',
-  copyButtons: true,
-  lang: '',
-  meta: '',
-};
-
 CreateCode.sanitize = sanitizeSchema => {
   // This is for code blocks class name
   sanitizeSchema.attributes.code = ['className', 'lang', 'meta', 'value'];

components/CodeTabs/index.jsx

@@ -1,5 +1,4 @@
 const { uppercase } = require('@readme/syntax-highlighter');
-const PropTypes = require('prop-types');
 const React = require('react');
 const { useState } = require('react');
 
@@ -46,11 +45,6 @@ const CodeTabs = props => {
   );
 };
 
-CodeTabs.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.any).isRequired,
-  theme: PropTypes.string,
-};
-
 function CreateCodeTabs({ theme }) {
   // eslint-disable-next-line react/display-name
   return props => <CodeTabs {...props} theme={theme} />;

components/Embed/index.jsx

@@ -1,12 +1,7 @@
 /* eslint-disable react/jsx-props-no-spreading, jsx-a11y/iframe-has-title */
-const propTypes = require('prop-types');
 const React = require('react');
 
 const Favicon = ({ src, alt = 'favicon', ...attr }) => <img {...attr} alt={alt} height="14" src={src} width="14" />;
-Favicon.propTypes = {
-  alt: propTypes.string,
-  src: propTypes.string,
-};
 
 class Embed extends React.Component {
   render() {
@@ -62,19 +57,6 @@ class Embed extends React.Component {
   }
 }
 
-Embed.propTypes = {
-  children: propTypes.oneOfType([propTypes.string, propTypes.array, propTypes.shape({}), propTypes.element]),
-  favicon: propTypes.string,
-  height: propTypes.string,
-  html: propTypes.string,
-  iframe: propTypes.any,
-  image: propTypes.string,
-  lazy: propTypes.bool,
-  provider: propTypes.string,
-  title: propTypes.string,
-  url: propTypes.oneOfType([propTypes.string, propTypes.shape({})]),
-  width: propTypes.string,
-};
 Embed.defaultProps = {
   height: '300px',
   width: '100%',

components/GlossaryItem/index.jsx

@@ -1,5 +1,4 @@
 const Tooltip = require('@tippyjs/react').default;
-const PropTypes = require('prop-types');
 const React = require('react');
 
 const GlossaryContext = require('../../contexts/GlossaryTerms');
@@ -84,13 +83,6 @@ function GlossaryItem({ term, terms }) {
   );
 }
 
-GlossaryItem.propTypes = {
-  term: PropTypes.string.isRequired,
-  terms: PropTypes.arrayOf(
-    PropTypes.shape({ definition: PropTypes.string.isRequired, term: PropTypes.string.isRequired }),
-  ).isRequired,
-};
-
 // eslint-disable-next-line react/display-name
 module.exports = props => (
   <GlossaryContext.Consumer>{terms => terms && <GlossaryItem {...props} terms={terms} />}</GlossaryContext.Consumer>

components/HTMLBlock/index.jsx

@@ -1,7 +1,6 @@
 /* eslint-disable no-eval
  */
 const escape = require('lodash.escape');
-const PropTypes = require('prop-types');
 const React = require('react');
 
 const MATCH_SCRIPT_TAGS = /<script\b[^>]*>([\s\S]*?)<\/script *>\n?/gim;
@@ -47,12 +46,6 @@ HTMLBlock.defaultProps = {
   safeMode: false,
 };
 
-HTMLBlock.propTypes = {
-  html: PropTypes.string,
-  runScripts: PropTypes.any,
-  safeMode: PropTypes.bool,
-};
-
 const CreateHtmlBlock =
   ({ safeMode }) =>
   // eslint-disable-next-line react/display-name

components/Heading/index.jsx

@@ -1,56 +1,39 @@
-const PropTypes = require('prop-types');
 const React = require('react');
 
-function Heading({ tag, showAnchorIcons, ...props }) {
-  if (!props.children) return '';
+function Heading({ align = '', id = '', level = 2, tag, showAnchorIcons = true, children }) {
+  if (!children) return '';
 
   const attrs = {
-    className: `heading heading-${props.level} header-scroll`,
-    align: props.align,
+    className: `heading heading-${level} header-scroll`,
+    align,
   };
 
-  const children = [
-    <div key={`heading-anchor-${props.id}`} className="heading-anchor anchor waypoint" id={props.id} />,
-    <div key={`heading-text-${props.id}`} className="heading-text">
-      {props.children}
+  const childrenWithAnchor = [
+    <div key={`heading-anchor-${id}`} className="heading-anchor anchor waypoint" id={id} />,
+    <div key={`heading-text-${id}`} className="heading-text">
+      {children}
     </div>,
   ];
 
   if (showAnchorIcons) {
-    const headingText = props.children[1];
-    children.push(
+    const headingText = children[1];
+    childrenWithAnchor.push(
       // eslint-disable-next-line jsx-a11y/anchor-has-content
       <a
-        key={`heading-anchor-icon-${props.id}`}
+        key={`heading-anchor-icon-${id}`}
         aria-label={`Skip link to ${headingText}`}
         className="heading-anchor-icon fa fa-anchor"
-        href={`#${props.id}`}
+        href={`#${id}`}
       />,
     );
   }
 
-  return React.createElement(tag, attrs, children);
+  return React.createElement(tag, attrs, childrenWithAnchor);
 }
 
 function CreateHeading(level, { showAnchorIcons }) {
   // eslint-disable-next-line react/display-name
   return props => <Heading {...props} level={level} showAnchorIcons={showAnchorIcons} tag={`h${level}`} />;
 }
 
-Heading.propTypes = {
-  align: PropTypes.oneOf(['left', 'center', 'right', '']),
-  children: PropTypes.array.isRequired,
-  id: PropTypes.string.isRequired,
-  level: PropTypes.number,
-  showAnchorIcons: PropTypes.bool,
-  tag: PropTypes.string.isRequired,
-};
-
-Heading.defaultProps = {
-  align: '',
-  id: '',
-  level: 2,
-  showAnchorIcons: true,
-};
-
 module.exports = CreateHeading;

components/Image/index.jsx

@@ -1,6 +1,4 @@
 /* eslint-disable no-param-reassign, react/jsx-props-no-spreading, no-fallthrough */
-
-const PropTypes = require('prop-types');
 const React = require('react');
 
 class Image extends React.Component {
@@ -71,18 +69,6 @@ class Image extends React.Component {
   }
 }
 
-Image.propTypes = {
-  align: PropTypes.string,
-  alt: PropTypes.string,
-  caption: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  lazy: PropTypes.bool,
-  src: PropTypes.string.isRequired,
-  title: PropTypes.string,
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-};
-
 Image.defaultProps = {
   align: '',
   alt: '',

components/Style.jsx

@@ -1,4 +1,3 @@
-const PropTypes = require('prop-types');
 const React = require('react');
 
 const Style = ({ children, safeMode }) => {
@@ -11,11 +10,6 @@ const Style = ({ children, safeMode }) => {
   );
 };
 
-Style.propTypes = {
-  children: PropTypes.node,
-  safeMode: PropTypes.bool,
-};
-
 const CreateStyle =
   ({ safeMode }) =>
   // eslint-disable-next-line react/display-name