From 56ce92e0128b484750104e4f158a52243a1a9f34 Mon Sep 17 00:00:00 2001
From: Jessica Boezwinkle <jessboez@MacBook-Pro.local>
Date: Mon, 23 Nov 2020 13:32:12 -0500
Subject: [PATCH 1/3] Icons to TS

---
 .../components/elements/Eyebrow/index.tsx     | 24 ++----
 .../components/elements/Eyebrow/types.ts      |  3 +
 .../elements/PreviewButton/index.tsx          | 12 +--
 .../elements/PreviewButton/types.ts           |  3 +
 .../components/icons/Blockquote/index.tsx     |  2 +-
 src/admin/components/icons/Bold/index.tsx     |  2 +-
 src/admin/components/icons/Calendar/index.tsx | 74 +++++++++----------
 src/admin/components/icons/Check/index.tsx    |  2 +-
 src/admin/components/icons/Chevron/index.tsx  |  2 +-
 .../components/icons/CloseMenu/index.tsx      | 52 +++++++------
 src/admin/components/icons/Code/index.tsx     |  2 +-
 .../components/icons/CodeBlock/index.tsx      |  2 +-
 src/admin/components/icons/Copy/index.tsx     | 40 +++++-----
 src/admin/components/icons/Italic/index.tsx   |  2 +-
 src/admin/components/icons/Link/index.tsx     |  2 +-
 src/admin/components/icons/LogOut/index.tsx   | 49 ++++++------
 src/admin/components/icons/Menu/index.tsx     |  2 +-
 .../components/icons/OrderedList/index.tsx    |  2 +-
 src/admin/components/icons/Plus/index.tsx     | 46 ++++++------
 .../components/icons/Relationship/index.tsx   |  2 +-
 src/admin/components/icons/Search/index.tsx   | 54 +++++++-------
 .../components/icons/Strikethrough/index.tsx  | 40 +++++-----
 .../components/icons/Underline/index.tsx      | 40 +++++-----
 .../components/icons/UnorderedList/index.tsx  |  2 +-
 src/admin/components/icons/X/index.tsx        |  2 +-
 .../components/icons/headings/H1/index.tsx    |  2 +-
 .../components/icons/headings/H2/index.tsx    |  2 +-
 .../components/icons/headings/H3/index.tsx    |  2 +-
 .../components/icons/headings/H4/index.tsx    | 40 +++++-----
 .../components/icons/headings/H5/index.tsx    | 40 +++++-----
 .../components/icons/headings/H6/index.tsx    | 40 +++++-----
 src/webpack/getWebpackDevConfig.ts            |  1 +
 32 files changed, 278 insertions(+), 312 deletions(-)
 create mode 100644 src/admin/components/elements/Eyebrow/types.ts
 create mode 100644 src/admin/components/elements/PreviewButton/types.ts

diff --git a/src/admin/components/elements/Eyebrow/index.tsx b/src/admin/components/elements/Eyebrow/index.tsx
index 0b0bd507ff..dd6d080839 100644
--- a/src/admin/components/elements/Eyebrow/index.tsx
+++ b/src/admin/components/elements/Eyebrow/index.tsx
@@ -1,26 +1,16 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import StepNav from '../StepNav';
+import { Props } from './types';
 
 import './index.scss';
 
 const baseClass = 'eyebrow';
 
-const Eyebrow = ({ actions }) => {
-  return (
-    <div className={baseClass}>
-      <StepNav />
-      {actions}
-    </div>
-  );
-};
-
-Eyebrow.defaultProps = {
-  actions: null,
-};
-
-Eyebrow.propTypes = {
-  actions: PropTypes.node,
-};
+const Eyebrow: React.FC<Props> = ({ actions }) => (
+  <div className={baseClass}>
+  <StepNav />
+    {actions}
+  </div>
+);
 
 export default Eyebrow;
diff --git a/src/admin/components/elements/Eyebrow/types.ts b/src/admin/components/elements/Eyebrow/types.ts
new file mode 100644
index 0000000000..284be2b0d3
--- /dev/null
+++ b/src/admin/components/elements/Eyebrow/types.ts
@@ -0,0 +1,3 @@
+export type Props = {
+  actions: React.ReactNode
+}
diff --git a/src/admin/components/elements/PreviewButton/index.tsx b/src/admin/components/elements/PreviewButton/index.tsx
index a4f2e84a61..2ba14a9cb9 100644
--- a/src/admin/components/elements/PreviewButton/index.tsx
+++ b/src/admin/components/elements/PreviewButton/index.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { useForm } from '../../forms/Form/context';
 import { useAuth } from '../../providers/Authentication';
 import Button from '../Button';
+import { Props } from './types';
 
 const baseClass = 'preview-btn';
 
-const PreviewButton = ({ generatePreviewURL }) => {
+const PreviewButton: React.FC<Props> = ({ generatePreviewURL }) => {
   const { token } = useAuth();
   const { getFields } = useForm();
   const fields = getFields();
@@ -29,12 +29,4 @@ const PreviewButton = ({ generatePreviewURL }) => {
   return null;
 };
 
-PreviewButton.defaultProps = {
-  generatePreviewURL: null,
-};
-
-PreviewButton.propTypes = {
-  generatePreviewURL: PropTypes.func,
-};
-
 export default PreviewButton;
diff --git a/src/admin/components/elements/PreviewButton/types.ts b/src/admin/components/elements/PreviewButton/types.ts
new file mode 100644
index 0000000000..51aa60089e
--- /dev/null
+++ b/src/admin/components/elements/PreviewButton/types.ts
@@ -0,0 +1,3 @@
+export type Props = {
+  generatePreviewURL: (fields: unknown, token: string) => string
+}
diff --git a/src/admin/components/icons/Blockquote/index.tsx b/src/admin/components/icons/Blockquote/index.tsx
index 5b9443b2db..5d832d0693 100644
--- a/src/admin/components/icons/Blockquote/index.tsx
+++ b/src/admin/components/icons/Blockquote/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const BlockquoteIcon = () => (
+const BlockquoteIcon: React.FC = () => (
   <svg
     viewBox="0 0 24 24"
     aria-hidden="true"
diff --git a/src/admin/components/icons/Bold/index.tsx b/src/admin/components/icons/Bold/index.tsx
index 3702f363a5..f42d389f5a 100644
--- a/src/admin/components/icons/Bold/index.tsx
+++ b/src/admin/components/icons/Bold/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const BoldIcon = () => (
+const BoldIcon: React.FC = () => (
   <svg
     viewBox="0 0 24 24"
     aria-hidden="true"
diff --git a/src/admin/components/icons/Calendar/index.tsx b/src/admin/components/icons/Calendar/index.tsx
index f1d67b3333..23db4b959d 100644
--- a/src/admin/components/icons/Calendar/index.tsx
+++ b/src/admin/components/icons/Calendar/index.tsx
@@ -2,43 +2,41 @@ import React from 'react';
 
 import './index.scss';
 
-const Calendar = () => {
-  return (
-    <svg
-      className="icon icon--calendar"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 25 25"
-    >
-      <rect
-        x="4.5"
-        y="6.11401"
-        width="16"
-        height="14"
-        className="stroke"
-      />
-      <line
-        x1="8.625"
-        y1="8.02026"
-        x2="8.625"
-        y2="3.70776"
-        className="stroke"
-      />
-      <line
-        x1="16.375"
-        y1="8.02026"
-        x2="16.375"
-        y2="3.70776"
-        className="stroke"
-      />
-      <line
-        x1="4.5"
-        y1="11.114"
-        x2="20.5"
-        y2="11.114"
-        className="stroke"
-      />
-    </svg>
-  );
-};
+const Calendar: React.FC = () => (
+  <svg
+    className="icon icon--calendar"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 25 25"
+  >
+    <rect
+      x="4.5"
+      y="6.11401"
+      width="16"
+      height="14"
+      className="stroke"
+    />
+    <line
+      x1="8.625"
+      y1="8.02026"
+      x2="8.625"
+      y2="3.70776"
+      className="stroke"
+    />
+    <line
+      x1="16.375"
+      y1="8.02026"
+      x2="16.375"
+      y2="3.70776"
+      className="stroke"
+    />
+    <line
+      x1="4.5"
+      y1="11.114"
+      x2="20.5"
+      y2="11.114"
+      className="stroke"
+    />
+  </svg>
+);
 
 export default Calendar;
diff --git a/src/admin/components/icons/Check/index.tsx b/src/admin/components/icons/Check/index.tsx
index ed22815245..0d1de27f6d 100644
--- a/src/admin/components/icons/Check/index.tsx
+++ b/src/admin/components/icons/Check/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import './index.scss';
 
-const Check = () => (
+const Check: React.FC = () => (
   <svg
     className="icon icon--check"
     xmlns="http://www.w3.org/2000/svg"
diff --git a/src/admin/components/icons/Chevron/index.tsx b/src/admin/components/icons/Chevron/index.tsx
index 8ac1825cc7..fa46fdeca8 100644
--- a/src/admin/components/icons/Chevron/index.tsx
+++ b/src/admin/components/icons/Chevron/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import './index.scss';
 
-const Chevron = () => (
+const Chevron: React.FC = () => (
   <svg
     className="icon icon--chevron"
     xmlns="http://www.w3.org/2000/svg"
diff --git a/src/admin/components/icons/CloseMenu/index.tsx b/src/admin/components/icons/CloseMenu/index.tsx
index a1e0a36df8..901dcb85de 100644
--- a/src/admin/components/icons/CloseMenu/index.tsx
+++ b/src/admin/components/icons/CloseMenu/index.tsx
@@ -2,32 +2,30 @@ import React from 'react';
 
 import './index.scss';
 
-const CloseMenu = () => {
-  return (
-    <svg
-      className="icon icon--close-menu"
-      viewBox="0 0 25 25"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <rect
-        x="5.42896"
-        y="18.1569"
-        width="18"
-        height="2"
-        transform="rotate(-45 5.42896 18.1569)"
-        className="fill"
-      />
-      <rect
-        x="6.84314"
-        y="5.42892"
-        width="18"
-        height="2"
-        transform="rotate(45 6.84314 5.42892)"
-        className="fill"
-      />
-    </svg>
-  );
-};
+const CloseMenu: React.FC = () => (
+  <svg
+    className="icon icon--close-menu"
+    viewBox="0 0 25 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect
+      x="5.42896"
+      y="18.1569"
+      width="18"
+      height="2"
+      transform="rotate(-45 5.42896 18.1569)"
+      className="fill"
+    />
+    <rect
+      x="6.84314"
+      y="5.42892"
+      width="18"
+      height="2"
+      transform="rotate(45 6.84314 5.42892)"
+      className="fill"
+    />
+  </svg>
+);
 
 export default CloseMenu;
diff --git a/src/admin/components/icons/Code/index.tsx b/src/admin/components/icons/Code/index.tsx
index 29185c6180..f801e7f2ba 100644
--- a/src/admin/components/icons/Code/index.tsx
+++ b/src/admin/components/icons/Code/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const CodeIcon = () => (
+const CodeIcon: React.FC = () => (
   <svg
     viewBox="0 0 24 24"
     aria-hidden="true"
diff --git a/src/admin/components/icons/CodeBlock/index.tsx b/src/admin/components/icons/CodeBlock/index.tsx
index 40df5873a7..1b58ee598a 100644
--- a/src/admin/components/icons/CodeBlock/index.tsx
+++ b/src/admin/components/icons/CodeBlock/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const CodeBlockIcon = () => (
+const CodeBlockIcon: React.FC = () => (
   <svg
     viewBox="0 0 24 24"
     aria-hidden="true"
diff --git a/src/admin/components/icons/Copy/index.tsx b/src/admin/components/icons/Copy/index.tsx
index cd93673ae6..a989d745dd 100644
--- a/src/admin/components/icons/Copy/index.tsx
+++ b/src/admin/components/icons/Copy/index.tsx
@@ -2,26 +2,24 @@ import React from 'react';
 
 import './index.scss';
 
-const Copy = () => {
-  return (
-    <svg
-      className="icon icon--copy"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 25 25"
-    >
-      <rect
-        x="6.5"
-        y="10"
-        width="8"
-        height="8"
-        className="stroke"
-      />
-      <path
-        d="M10 9.98438V6.5H18V14.5H14"
-        className="stroke"
-      />
-    </svg>
-  );
-};
+const Copy: React.FC = () => (
+  <svg
+    className="icon icon--copy"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 25 25"
+  >
+    <rect
+      x="6.5"
+      y="10"
+      width="8"
+      height="8"
+      className="stroke"
+    />
+    <path
+      d="M10 9.98438V6.5H18V14.5H14"
+      className="stroke"
+    />
+  </svg>
+);
 
 export default Copy;
diff --git a/src/admin/components/icons/Italic/index.tsx b/src/admin/components/icons/Italic/index.tsx
index cc4772ab70..b66204a580 100644
--- a/src/admin/components/icons/Italic/index.tsx
+++ b/src/admin/components/icons/Italic/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const ItalicIcon = () => (
+const ItalicIcon: React.FC = () => (
   <svg
     viewBox="0 0 24 24"
     aria-hidden="true"
diff --git a/src/admin/components/icons/Link/index.tsx b/src/admin/components/icons/Link/index.tsx
index 0e45c07cb9..4994a5eef3 100644
--- a/src/admin/components/icons/Link/index.tsx
+++ b/src/admin/components/icons/Link/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const LinkIcon = () => (
+const LinkIcon: React.FC = () => (
   <svg
     viewBox="0 0 24 24"
     aria-hidden="true"
diff --git a/src/admin/components/icons/LogOut/index.tsx b/src/admin/components/icons/LogOut/index.tsx
index 1e9ef7f21d..ab76c7dc99 100644
--- a/src/admin/components/icons/LogOut/index.tsx
+++ b/src/admin/components/icons/LogOut/index.tsx
@@ -2,34 +2,31 @@ import React from 'react';
 
 import './index.scss';
 
-const LogOut = () => {
-  return (
-    <svg
-      className="icon icon--logout"
-      viewBox="0 0 25 25"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
+const LogOut: React.FC = () => (
+  <svg
+    className="icon icon--logout"
+    viewBox="0 0 25 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M10 5H18V19H10"
+      className="stroke"
+    />
+    <g>
       <path
-        d="M10 5H18V19H10"
+        d="M8 8.5L4.46447 12.0355L8 15.5711"
         className="stroke"
-
       />
-      <g>
-        <path
-          d="M8 8.5L4.46447 12.0355L8 15.5711"
-          className="stroke"
-        />
-        <line
-          x1="5"
-          y1="12"
-          x2="13"
-          y2="12"
-          className="stroke"
-        />
-      </g>
-    </svg>
-  );
-};
+      <line
+        x1="5"
+        y1="12"
+        x2="13"
+        y2="12"
+        className="stroke"
+      />
+    </g>
+  </svg>
+);
 
 export default LogOut;
diff --git a/src/admin/components/icons/Menu/index.tsx b/src/admin/components/icons/Menu/index.tsx
index f524aad524..2e084fb593 100644
--- a/src/admin/components/icons/Menu/index.tsx
+++ b/src/admin/components/icons/Menu/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const Menu = () => (
+const Menu: React.FC = () => (
   <svg
     width="25"
     height="25"
diff --git a/src/admin/components/icons/OrderedList/index.tsx b/src/admin/components/icons/OrderedList/index.tsx
index ae07f16b8c..b78c14cbf8 100644
--- a/src/admin/components/icons/OrderedList/index.tsx
+++ b/src/admin/components/icons/OrderedList/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const OrderedListIcon = () => (
+const OrderedListIcon: React.FC = () => (
   <svg
     viewBox="0 0 24 24"
     aria-hidden="true"
diff --git a/src/admin/components/icons/Plus/index.tsx b/src/admin/components/icons/Plus/index.tsx
index b1471dedc6..7daab48e73 100644
--- a/src/admin/components/icons/Plus/index.tsx
+++ b/src/admin/components/icons/Plus/index.tsx
@@ -2,29 +2,27 @@ import React from 'react';
 
 import './index.scss';
 
-const Plus = () => {
-  return (
-    <svg
-      className="icon icon--plus"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 25 25"
-    >
-      <line
-        x1="12.4589"
-        y1="16.9175"
-        x2="12.4589"
-        y2="8.50115"
-        className="stroke"
-      />
-      <line
-        x1="8.05164"
-        y1="12.594"
-        x2="16.468"
-        y2="12.594"
-        className="stroke"
-      />
-    </svg>
-  );
-};
+const Plus: React.FC = () => (
+  <svg
+    className="icon icon--plus"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 25 25"
+  >
+    <line
+      x1="12.4589"
+      y1="16.9175"
+      x2="12.4589"
+      y2="8.50115"
+      className="stroke"
+    />
+    <line
+      x1="8.05164"
+      y1="12.594"
+      x2="16.468"
+      y2="12.594"
+      className="stroke"
+    />
+  </svg>
+);
 
 export default Plus;
diff --git a/src/admin/components/icons/Relationship/index.tsx b/src/admin/components/icons/Relationship/index.tsx
index da4e22089c..59d1d5683c 100644
--- a/src/admin/components/icons/Relationship/index.tsx
+++ b/src/admin/components/icons/Relationship/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import './index.scss';
 
-const Relationship = () => (
+const Relationship: React.FC = () => (
   <svg
     className="icon icon--relationship"
     xmlns="http://www.w3.org/2000/svg"
diff --git a/src/admin/components/icons/Search/index.tsx b/src/admin/components/icons/Search/index.tsx
index 2ca84b44df..470f96785b 100644
--- a/src/admin/components/icons/Search/index.tsx
+++ b/src/admin/components/icons/Search/index.tsx
@@ -1,32 +1,30 @@
 import React from 'react';
 
-const Search = () => {
-  return (
-    <svg
-      width="25"
-      height="25"
-      viewBox="0 0 25 25"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className="icon icon--search"
-    >
-      <circle
-        cx="11.2069"
-        cy="10.7069"
-        r="5"
-        stroke="#333333"
-        strokeWidth="2"
-      />
-      <line
-        x1="14.914"
-        y1="13.9998"
-        x2="20.5002"
-        y2="19.586"
-        stroke="#333333"
-        strokeWidth="2"
-      />
-    </svg>
-  );
-};
+const Search: React.FC = () => (
+  <svg
+    width="25"
+    height="25"
+    viewBox="0 0 25 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className="icon icon--search"
+  >
+    <circle
+      cx="11.2069"
+      cy="10.7069"
+      r="5"
+      stroke="#333333"
+      strokeWidth="2"
+    />
+    <line
+      x1="14.914"
+      y1="13.9998"
+      x2="20.5002"
+      y2="19.586"
+      stroke="#333333"
+      strokeWidth="2"
+    />
+  </svg>
+);
 
 export default Search;
diff --git a/src/admin/components/icons/Strikethrough/index.tsx b/src/admin/components/icons/Strikethrough/index.tsx
index b617340a55..f95b504674 100644
--- a/src/admin/components/icons/Strikethrough/index.tsx
+++ b/src/admin/components/icons/Strikethrough/index.tsx
@@ -1,25 +1,23 @@
 import React from 'react';
 
-const StrikethroughIcon = () => {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      aria-hidden="true"
-      focusable="false"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-      className="graphic strikethrough-icon"
-    >
-      <path
-        fill="none"
-        d="M0 0h24v24H0z"
-      />
-      <path
-        className="fill"
-        d="M10 19h4v-3h-4v3zM5 4v3h5v3h4V7h5V4H5zM3 14h18v-2H3v2z"
-      />
-    </svg>
-  );
-};
+const StrikethroughIcon: React.FC = () => (
+  <svg
+    viewBox="0 0 24 24"
+    aria-hidden="true"
+    focusable="false"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    className="graphic strikethrough-icon"
+  >
+    <path
+      fill="none"
+      d="M0 0h24v24H0z"
+    />
+    <path
+      className="fill"
+      d="M10 19h4v-3h-4v3zM5 4v3h5v3h4V7h5V4H5zM3 14h18v-2H3v2z"
+    />
+  </svg>
+);
 
 export default StrikethroughIcon;
diff --git a/src/admin/components/icons/Underline/index.tsx b/src/admin/components/icons/Underline/index.tsx
index 3934960bfd..648e4d84e1 100644
--- a/src/admin/components/icons/Underline/index.tsx
+++ b/src/admin/components/icons/Underline/index.tsx
@@ -1,25 +1,23 @@
 import React from 'react';
 
-const UnderlineIcon = () => {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      aria-hidden="true"
-      focusable="false"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-      className="graphic underline-icon"
-    >
-      <path
-        fill="none"
-        d="M0 0h24v24H0z"
-      />
-      <path
-        className="fill"
-        d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z"
-      />
-    </svg>
-  );
-};
+const UnderlineIcon: React.FC = () => (
+  <svg
+    viewBox="0 0 24 24"
+    aria-hidden="true"
+    focusable="false"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    className="graphic underline-icon"
+  >
+    <path
+      fill="none"
+      d="M0 0h24v24H0z"
+    />
+    <path
+      className="fill"
+      d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z"
+    />
+  </svg>
+);
 
 export default UnderlineIcon;
diff --git a/src/admin/components/icons/UnorderedList/index.tsx b/src/admin/components/icons/UnorderedList/index.tsx
index 56cdc2c3ec..5bf0d2742d 100644
--- a/src/admin/components/icons/UnorderedList/index.tsx
+++ b/src/admin/components/icons/UnorderedList/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const UnorderedListIcon = () => (
+const UnorderedListIcon: React.FC = () => (
   <svg
     viewBox="0 0 24 24"
     aria-hidden="true"
diff --git a/src/admin/components/icons/X/index.tsx b/src/admin/components/icons/X/index.tsx
index 4b52bf878a..ad3e1a5396 100644
--- a/src/admin/components/icons/X/index.tsx
+++ b/src/admin/components/icons/X/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import './index.scss';
 
-const X = () => (
+const X: React.FC = () => (
   <svg
     width="25"
     height="25"
diff --git a/src/admin/components/icons/headings/H1/index.tsx b/src/admin/components/icons/headings/H1/index.tsx
index 5ea883af32..c46ea390d3 100644
--- a/src/admin/components/icons/headings/H1/index.tsx
+++ b/src/admin/components/icons/headings/H1/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const H1Icon = () => (
+const H1Icon: React.FC = () => (
   <svg
     viewBox="0 0 24 24"
     aria-hidden="true"
diff --git a/src/admin/components/icons/headings/H2/index.tsx b/src/admin/components/icons/headings/H2/index.tsx
index a62f97c5c1..7d9b62a2ed 100644
--- a/src/admin/components/icons/headings/H2/index.tsx
+++ b/src/admin/components/icons/headings/H2/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const H2Icon = () => (
+const H2Icon: React.FC = () => (
   <svg
     viewBox="0 0 24 24"
     aria-hidden="true"
diff --git a/src/admin/components/icons/headings/H3/index.tsx b/src/admin/components/icons/headings/H3/index.tsx
index 0991b16207..915668318e 100644
--- a/src/admin/components/icons/headings/H3/index.tsx
+++ b/src/admin/components/icons/headings/H3/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const H3Icon = () => (
+const H3Icon: React.FC = () => (
   <svg
     viewBox="0 0 24 24"
     aria-hidden="true"
diff --git a/src/admin/components/icons/headings/H4/index.tsx b/src/admin/components/icons/headings/H4/index.tsx
index fc72db150e..b084b1fb77 100644
--- a/src/admin/components/icons/headings/H4/index.tsx
+++ b/src/admin/components/icons/headings/H4/index.tsx
@@ -1,25 +1,23 @@
 import React from 'react';
 
-const H4Icon = () => {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      aria-hidden="true"
-      focusable="false"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-      className="graphic h4-icon"
-    >
-      <path
-        fill="none"
-        d="M0 0h24v24H0z"
-      />
-      <path
-        className="fill"
-        d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 14h-2v-4H9V7h2v4h2V7h2v10z"
-      />
-    </svg>
-  );
-};
+const H4Icon: React.FC = () => (
+  <svg
+    viewBox="0 0 24 24"
+    aria-hidden="true"
+    focusable="false"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    className="graphic h4-icon"
+  >
+    <path
+      fill="none"
+      d="M0 0h24v24H0z"
+    />
+    <path
+      className="fill"
+      d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 14h-2v-4H9V7h2v4h2V7h2v10z"
+    />
+  </svg>
+);
 
 export default H4Icon;
diff --git a/src/admin/components/icons/headings/H5/index.tsx b/src/admin/components/icons/headings/H5/index.tsx
index 414e72c8be..559f64767d 100644
--- a/src/admin/components/icons/headings/H5/index.tsx
+++ b/src/admin/components/icons/headings/H5/index.tsx
@@ -1,25 +1,23 @@
 import React from 'react';
 
-const H5Icon = () => {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      aria-hidden="true"
-      focusable="false"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-      className="graphic h5-icon"
-    >
-      <path
-        fill="none"
-        d="M0 0h24v24H0z"
-      />
-      <path
-        className="fill"
-        d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 6h-4v2h2a2 2 0 012 2v2a2 2 0 01-2 2H9v-2h4v-2H9V7h6v2z"
-      />
-    </svg>
-  );
-};
+const H5Icon: React.FC = () => (
+  <svg
+    viewBox="0 0 24 24"
+    aria-hidden="true"
+    focusable="false"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    className="graphic h5-icon"
+  >
+    <path
+      fill="none"
+      d="M0 0h24v24H0z"
+    />
+    <path
+      className="fill"
+      d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 6h-4v2h2a2 2 0 012 2v2a2 2 0 01-2 2H9v-2h4v-2H9V7h6v2z"
+    />
+  </svg>
+);
 
 export default H5Icon;
diff --git a/src/admin/components/icons/headings/H6/index.tsx b/src/admin/components/icons/headings/H6/index.tsx
index cff02c1f9a..866a04b6ce 100644
--- a/src/admin/components/icons/headings/H6/index.tsx
+++ b/src/admin/components/icons/headings/H6/index.tsx
@@ -1,25 +1,23 @@
 import React from 'react';
 
-const H5Icon = () => {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      aria-hidden="true"
-      focusable="false"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-      className="graphic h6-icon"
-    >
-      <path
-        fill="none"
-        d="M0 0h24v24H0z"
-      />
-      <path
-        className="fill"
-        d="M11 15h2v-2h-2v2zm8-12H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 6h-4v2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V9a2 2 0 012-2h4v2z"
-      />
-    </svg>
-  );
-};
+const H5Icon: React.FC = () => (
+  <svg
+    viewBox="0 0 24 24"
+    aria-hidden="true"
+    focusable="false"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    className="graphic h6-icon"
+  >
+    <path
+      fill="none"
+      d="M0 0h24v24H0z"
+    />
+    <path
+      className="fill"
+      d="M11 15h2v-2h-2v2zm8-12H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 6h-4v2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V9a2 2 0 012-2h4v2z"
+    />
+  </svg>
+);
 
 export default H5Icon;
diff --git a/src/webpack/getWebpackDevConfig.ts b/src/webpack/getWebpackDevConfig.ts
index 534981f2e1..169f44f7ba 100644
--- a/src/webpack/getWebpackDevConfig.ts
+++ b/src/webpack/getWebpackDevConfig.ts
@@ -74,6 +74,7 @@ export default (config: Config): Configuration => {
         crypto: false,
         https: false,
         http: false,
+        assert: false,
       },
       modules: ['node_modules', path.resolve(__dirname, '../../node_modules')],
       alias: {

From d2571fa798f685c5b4a3b9f90cc2e64d2d7c9eaf Mon Sep 17 00:00:00 2001
From: Jessica Boezwinkle <jessboez@MacBook-Pro.local>
Date: Mon, 23 Nov 2020 17:44:57 -0500
Subject: [PATCH 2/3] elements to TS

---
 .../components/elements/Banner/index.tsx      | 32 +++-------
 src/admin/components/elements/Banner/types.ts |  9 +++
 .../components/elements/Button/index.tsx      | 55 +-----------------
 src/admin/components/elements/Button/types.ts | 16 +++++
 src/admin/components/elements/Card/index.tsx  | 15 +----
 src/admin/components/elements/Card/types.ts   |  5 ++
 .../elements/ColumnSelector/index.tsx         | 19 +-----
 .../elements/ColumnSelector/types.ts          | 10 ++++
 .../elements/CopyToClipboard/index.tsx        |  3 +-
 .../elements/CopyToClipboard/types.ts         |  5 ++
 .../elements/DatePicker/DatePicker.tsx        | 47 +--------------
 .../components/elements/DatePicker/types.ts   | 18 ++++++
 .../elements/DeleteDocument/index.tsx         | 23 +-------
 .../elements/DeleteDocument/types.ts          | 13 +++++
 .../elements/DuplicateDocument/types.ts       |  3 +
 .../components/elements/Eyebrow/index.tsx     |  2 +-
 .../elements/FileDetails/Meta/index.tsx       | 20 +------
 .../elements/FileDetails/Meta/types.ts        |  9 +++
 .../components/elements/FileDetails/index.tsx | 34 ++++-------
 .../components/elements/FileDetails/types.ts  | 11 ++++
 .../elements/GenerateConfirmation/index.tsx   |  9 +--
 .../elements/GenerateConfirmation/types.ts    |  4 ++
 .../elements/ListControls/index.tsx           | 25 +-------
 .../components/elements/ListControls/types.ts | 13 +++++
 .../components/elements/Loading/index.tsx     |  2 +-
 .../Paginator/ClickableArrow/index.tsx        | 16 +----
 .../Paginator/ClickableArrow/types.ts         |  5 ++
 .../elements/Paginator/Page/index.tsx         | 26 +++------
 .../elements/Paginator/Page/types.ts          |  7 +++
 .../elements/Paginator/Separator/index.tsx    |  2 +-
 .../components/elements/Paginator/index.tsx   | 30 +---------
 .../components/elements/Paginator/types.ts    | 12 ++++
 src/admin/components/elements/Pill/index.tsx  | 24 +-------
 src/admin/components/elements/Pill/types.ts   |  9 +++
 .../elements/Popup/PopupButton/index.tsx      | 17 +-----
 .../elements/Popup/PopupButton/types.ts       |  7 +++
 src/admin/components/elements/Popup/index.tsx | 32 +---------
 src/admin/components/elements/Popup/types.ts  | 13 +++++
 .../components/elements/ReactSelect/index.tsx | 39 +------------
 .../components/elements/ReactSelect/types.ts  |  9 +++
 .../components/elements/RenderTitle/index.tsx | 21 +------
 .../components/elements/RenderTitle/types.ts  |  8 +++
 .../elements/SearchFilter/index.tsx           | 17 +-----
 .../components/elements/SearchFilter/types.ts |  5 ++
 .../components/elements/SortColumn/index.tsx  | 15 +----
 .../components/elements/SortColumn/types.ts   |  6 ++
 .../components/elements/SortComplex/index.tsx | 16 +----
 .../components/elements/SortComplex/types.ts  |  8 +++
 src/admin/components/elements/Table/index.tsx | 20 +------
 src/admin/components/elements/Table/types.ts  | 10 ++++
 .../components/elements/Thumbnail/index.tsx   | 21 +------
 .../components/elements/Thumbnail/types.ts    |  8 +++
 .../components/elements/Tooltip/index.tsx     | 13 +----
 .../components/elements/Tooltip/types.ts      |  4 ++
 .../components/elements/UploadCard/index.tsx  | 27 +--------
 .../components/elements/UploadCard/types.ts   | 15 +++++
 .../elements/UploadGallery/index.tsx          | 36 ++++--------
 .../elements/UploadGallery/types.ts           |  5 ++
 .../WhereBuilder/Condition/Date/index.tsx     | 13 +----
 .../WhereBuilder/Condition/Date/types.ts      |  4 ++
 .../WhereBuilder/Condition/Number/index.tsx   | 31 ++++------
 .../WhereBuilder/Condition/Number/types.ts    |  4 ++
 .../WhereBuilder/Condition/Text/index.tsx     | 31 ++++------
 .../WhereBuilder/Condition/Text/types.ts      |  4 ++
 .../elements/WhereBuilder/Condition/index.tsx | 29 +---------
 .../elements/WhereBuilder/Condition/types.ts  | 15 +++++
 .../elements/WhereBuilder/index.tsx           | 16 +----
 .../components/elements/WhereBuilder/types.ts |  9 +++
 .../components/graphics/Account/index.tsx     | 52 ++++++++---------
 .../graphics/DefaultBlockImage/index.tsx      |  2 +-
 src/admin/components/graphics/File/index.tsx  |  2 +-
 src/admin/components/graphics/Icon/index.tsx  |  4 +-
 src/admin/components/graphics/Logo/index.tsx  |  4 +-
 .../components/graphics/Search/index.tsx      | 58 +++++++++----------
 74 files changed, 456 insertions(+), 727 deletions(-)
 create mode 100644 src/admin/components/elements/Banner/types.ts
 create mode 100644 src/admin/components/elements/Button/types.ts
 create mode 100644 src/admin/components/elements/Card/types.ts
 create mode 100644 src/admin/components/elements/ColumnSelector/types.ts
 create mode 100644 src/admin/components/elements/CopyToClipboard/types.ts
 create mode 100644 src/admin/components/elements/DatePicker/types.ts
 create mode 100644 src/admin/components/elements/DeleteDocument/types.ts
 create mode 100644 src/admin/components/elements/DuplicateDocument/types.ts
 create mode 100644 src/admin/components/elements/FileDetails/Meta/types.ts
 create mode 100644 src/admin/components/elements/FileDetails/types.ts
 create mode 100644 src/admin/components/elements/GenerateConfirmation/types.ts
 create mode 100644 src/admin/components/elements/ListControls/types.ts
 create mode 100644 src/admin/components/elements/Paginator/ClickableArrow/types.ts
 create mode 100644 src/admin/components/elements/Paginator/Page/types.ts
 create mode 100644 src/admin/components/elements/Paginator/types.ts
 create mode 100644 src/admin/components/elements/Pill/types.ts
 create mode 100644 src/admin/components/elements/Popup/PopupButton/types.ts
 create mode 100644 src/admin/components/elements/Popup/types.ts
 create mode 100644 src/admin/components/elements/ReactSelect/types.ts
 create mode 100644 src/admin/components/elements/RenderTitle/types.ts
 create mode 100644 src/admin/components/elements/SearchFilter/types.ts
 create mode 100644 src/admin/components/elements/SortColumn/types.ts
 create mode 100644 src/admin/components/elements/SortComplex/types.ts
 create mode 100644 src/admin/components/elements/Table/types.ts
 create mode 100644 src/admin/components/elements/Thumbnail/types.ts
 create mode 100644 src/admin/components/elements/Tooltip/types.ts
 create mode 100644 src/admin/components/elements/UploadCard/types.ts
 create mode 100644 src/admin/components/elements/UploadGallery/types.ts
 create mode 100644 src/admin/components/elements/WhereBuilder/Condition/Date/types.ts
 create mode 100644 src/admin/components/elements/WhereBuilder/Condition/Number/types.ts
 create mode 100644 src/admin/components/elements/WhereBuilder/Condition/Text/types.ts
 create mode 100644 src/admin/components/elements/WhereBuilder/Condition/types.ts
 create mode 100644 src/admin/components/elements/WhereBuilder/types.ts

diff --git a/src/admin/components/elements/Banner/index.tsx b/src/admin/components/elements/Banner/index.tsx
index f139719488..09db2cc69b 100644
--- a/src/admin/components/elements/Banner/index.tsx
+++ b/src/admin/components/elements/Banner/index.tsx
@@ -1,13 +1,19 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
+import { Props } from './types';
 
 import './index.scss';
 
 const baseClass = 'banner';
 
-const Banner = ({
-  children, className, to, icon, alignIcon, onClick, type,
+const Banner: React.FC<Props> = ({
+  children,
+  className,
+  to,
+  icon,
+  alignIcon,
+  onClick,
+  type,
 }) => {
   const classes = [
     baseClass,
@@ -46,24 +52,4 @@ const Banner = ({
   );
 };
 
-Banner.defaultProps = {
-  children: undefined,
-  className: '',
-  to: undefined,
-  icon: undefined,
-  alignIcon: 'right',
-  onClick: undefined,
-  type: 'default',
-};
-
-Banner.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  icon: PropTypes.node,
-  alignIcon: PropTypes.oneOf(['left', 'right']),
-  onClick: PropTypes.func,
-  to: PropTypes.string,
-  type: PropTypes.oneOf(['error', 'success', 'info', 'default']),
-};
-
 export default Banner;
diff --git a/src/admin/components/elements/Banner/types.ts b/src/admin/components/elements/Banner/types.ts
new file mode 100644
index 0000000000..cf8efef528
--- /dev/null
+++ b/src/admin/components/elements/Banner/types.ts
@@ -0,0 +1,9 @@
+export type Props = {
+  children: React.ReactNode,
+  className: string,
+  icon: React.ReactNode,
+  alignIcon: 'left' | 'right',
+  onClick: () => void,
+  to: string,
+  type: 'error' | 'success' | 'info' | 'default',
+}
diff --git a/src/admin/components/elements/Button/index.tsx b/src/admin/components/elements/Button/index.tsx
index 021ae3770e..befc44b307 100644
--- a/src/admin/components/elements/Button/index.tsx
+++ b/src/admin/components/elements/Button/index.tsx
@@ -1,6 +1,6 @@
 import React, { isValidElement } from 'react';
-import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
+import { Props } from './types';
 
 import plus from '../../icons/Plus';
 import x from '../../icons/X';
@@ -36,17 +36,7 @@ const ButtonContents = ({ children, icon }) => {
   );
 };
 
-ButtonContents.defaultProps = {
-  icon: null,
-  children: null,
-};
-
-ButtonContents.propTypes = {
-  children: PropTypes.node,
-  icon: PropTypes.node,
-};
-
-const Button = (props) => {
+const Button: React.FC<Props> = (props) => {
   const {
     className,
     type,
@@ -127,45 +117,4 @@ const Button = (props) => {
   }
 };
 
-Button.defaultProps = {
-  className: null,
-  type: 'button',
-  buttonStyle: 'primary',
-  el: null,
-  to: null,
-  url: null,
-  children: null,
-  onClick: null,
-  disabled: undefined,
-  icon: null,
-  size: 'medium',
-  round: false,
-  iconPosition: 'right',
-  iconStyle: 'without-border',
-};
-
-Button.propTypes = {
-  round: PropTypes.bool,
-  className: PropTypes.string,
-  type: PropTypes.oneOf(['submit', 'button']),
-  size: PropTypes.oneOf(['small', 'medium']),
-  buttonStyle: PropTypes.oneOf(['primary', 'secondary', 'transparent', 'error', 'none', 'icon-label']),
-  el: PropTypes.oneOf(['link', 'anchor', undefined]),
-  to: PropTypes.string,
-  url: PropTypes.string,
-  children: PropTypes.node,
-  onClick: PropTypes.func,
-  disabled: PropTypes.bool,
-  iconStyle: PropTypes.oneOf([
-    'with-border',
-    'without-border',
-    'none',
-  ]),
-  icon: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.oneOf(['chevron', 'x', 'plus']),
-  ]),
-  iconPosition: PropTypes.oneOf(['left', 'right']),
-};
-
 export default Button;
diff --git a/src/admin/components/elements/Button/types.ts b/src/admin/components/elements/Button/types.ts
new file mode 100644
index 0000000000..d9427096af
--- /dev/null
+++ b/src/admin/components/elements/Button/types.ts
@@ -0,0 +1,16 @@
+export type Props = {
+    className: string,
+    type: 'submit' | 'button',
+    el: 'link' | 'anchor' | undefined,
+    to: string,
+    url: string,
+    children: React.ReactNode,
+    onClick: () => void,
+    disabled: boolean,
+    icon: React.ReactNode | ['chevron' | 'x' | 'plus'],
+    iconStyle: 'with-border' | 'without-border' | 'none',
+    buttonStyle: 'primary' | 'secondary' | 'transparent' | 'error' | 'none' | 'icon-label',
+    round: boolean,
+    size: 'small' | 'medium',
+    iconPosition: 'left' | 'right'
+}
diff --git a/src/admin/components/elements/Card/index.tsx b/src/admin/components/elements/Card/index.tsx
index 7beda6261e..ae30db1238 100644
--- a/src/admin/components/elements/Card/index.tsx
+++ b/src/admin/components/elements/Card/index.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import Button from '../Button';
+import { Props } from './types';
 
 import './index.scss';
 
 const baseClass = 'card';
 
-const Card = (props) => {
+const Card: React.FC<Props> = (props) => {
   const { title, actions, onClick } = props;
 
   const classes = [
@@ -35,15 +35,4 @@ const Card = (props) => {
   );
 };
 
-Card.defaultProps = {
-  actions: null,
-  onClick: undefined,
-};
-
-Card.propTypes = {
-  title: PropTypes.string.isRequired,
-  actions: PropTypes.node,
-  onClick: PropTypes.func,
-};
-
 export default Card;
diff --git a/src/admin/components/elements/Card/types.ts b/src/admin/components/elements/Card/types.ts
new file mode 100644
index 0000000000..965aba676e
--- /dev/null
+++ b/src/admin/components/elements/Card/types.ts
@@ -0,0 +1,5 @@
+export type Props = {
+  title: string,
+  actions: React.ReactNode,
+  onClick: () => void,
+}
diff --git a/src/admin/components/elements/ColumnSelector/index.tsx b/src/admin/components/elements/ColumnSelector/index.tsx
index 8670a8e36e..2dd28b3bd3 100644
--- a/src/admin/components/elements/ColumnSelector/index.tsx
+++ b/src/admin/components/elements/ColumnSelector/index.tsx
@@ -1,10 +1,10 @@
 import React, { useState, useEffect, useReducer } from 'react';
-import PropTypes from 'prop-types';
 import getInitialState from './getInitialState';
 import flattenTopLevelFields from '../../../../utilities/flattenTopLevelFields';
 import Pill from '../Pill';
 import Plus from '../../icons/Plus';
 import X from '../../icons/X';
+import { Props } from './types';
 
 import './index.scss';
 
@@ -27,7 +27,7 @@ const reducer = (state, { type, payload }) => {
   return state.filter((remainingColumn) => remainingColumn !== payload);
 };
 
-const ColumnSelector = (props) => {
+const ColumnSelector: React.FC<Props> = (props) => {
   const {
     collection,
     collection: {
@@ -77,19 +77,4 @@ const ColumnSelector = (props) => {
   );
 };
 
-ColumnSelector.propTypes = {
-  collection: PropTypes.shape({
-    fields: PropTypes.arrayOf(
-      PropTypes.shape({}),
-    ),
-    admin: PropTypes.shape({
-      defaultColumns: PropTypes.arrayOf(
-        PropTypes.string,
-      ),
-      useAsTitle: PropTypes.string,
-    }),
-  }).isRequired,
-  handleChange: PropTypes.func.isRequired,
-};
-
 export default ColumnSelector;
diff --git a/src/admin/components/elements/ColumnSelector/types.ts b/src/admin/components/elements/ColumnSelector/types.ts
new file mode 100644
index 0000000000..426569ea3c
--- /dev/null
+++ b/src/admin/components/elements/ColumnSelector/types.ts
@@ -0,0 +1,10 @@
+export type Props = {
+  collection: {
+    fields: [],
+    admin: {
+      defaultColumns: string[],
+      useAsTitle: string,
+    },
+  },
+  handleChange: () => void,
+}
diff --git a/src/admin/components/elements/CopyToClipboard/index.tsx b/src/admin/components/elements/CopyToClipboard/index.tsx
index 6fc4c2a156..d15a111674 100644
--- a/src/admin/components/elements/CopyToClipboard/index.tsx
+++ b/src/admin/components/elements/CopyToClipboard/index.tsx
@@ -2,12 +2,13 @@ import React, { useEffect, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import Copy from '../../icons/Copy';
 import Tooltip from '../Tooltip';
+import { Props } from './types';
 
 import './index.scss';
 
 const baseClass = 'copy-to-clipboard';
 
-const CopyToClipboard = ({ value, defaultMessage, successMessage }) => {
+const CopyToClipboard: React.FC<Props> = ({ value, defaultMessage, successMessage }) => {
   const ref = useRef(null);
   const [copied, setCopied] = useState(false);
   const [hovered, setHovered] = useState(false);
diff --git a/src/admin/components/elements/CopyToClipboard/types.ts b/src/admin/components/elements/CopyToClipboard/types.ts
new file mode 100644
index 0000000000..22b820d9e1
--- /dev/null
+++ b/src/admin/components/elements/CopyToClipboard/types.ts
@@ -0,0 +1,5 @@
+export type Props = {
+  value: string,
+  defaultMessage: string,
+  successMessage: string,
+}
diff --git a/src/admin/components/elements/DatePicker/DatePicker.tsx b/src/admin/components/elements/DatePicker/DatePicker.tsx
index 146e9af083..2561bec7b5 100644
--- a/src/admin/components/elements/DatePicker/DatePicker.tsx
+++ b/src/admin/components/elements/DatePicker/DatePicker.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import DatePicker from 'react-datepicker';
 import CalendarIcon from '../../icons/Calendar';
+import { Props } from './types';
 
 import 'react-datepicker/dist/react-datepicker.css';
 import './index.scss';
 
 const baseClass = 'date-time-picker';
 
-const DateTime = (props) => {
+const DateTime: React.FC<Props> = (props) => {
   const {
     inputDateTimeFormat,
     useDate,
@@ -69,47 +69,4 @@ const DateTime = (props) => {
   );
 };
 
-DateTime.defaultProps = {
-  placeholder: undefined,
-  // date specific props
-  useDate: true,
-  minDate: undefined,
-  maxDate: undefined,
-  monthsShown: 1,
-  inputDateTimeFormat: '',
-  // time specific props
-  useTime: true,
-  minTime: undefined,
-  maxTime: undefined,
-  timeIntervals: 30,
-  timeFormat: 'h:mm aa',
-  value: undefined,
-  onChange: undefined,
-  admin: {},
-};
-
-DateTime.propTypes = {
-  placeholder: PropTypes.string,
-  // date specific props
-  useDate: PropTypes.bool,
-  minDate: PropTypes.instanceOf(Date),
-  maxDate: PropTypes.instanceOf(Date),
-  monthsShown: PropTypes.number,
-  inputDateTimeFormat: PropTypes.string,
-  // time specific props
-  useTime: PropTypes.bool,
-  minTime: PropTypes.instanceOf(Date),
-  maxTime: PropTypes.instanceOf(Date),
-  timeIntervals: PropTypes.number,
-  timeFormat: PropTypes.string,
-  value: PropTypes.oneOfType([
-    PropTypes.instanceOf(Date),
-    PropTypes.string,
-  ]),
-  onChange: PropTypes.func,
-  admin: PropTypes.shape({
-    readOnly: PropTypes.bool,
-  }),
-};
-
 export default DateTime;
diff --git a/src/admin/components/elements/DatePicker/types.ts b/src/admin/components/elements/DatePicker/types.ts
new file mode 100644
index 0000000000..987fdc878b
--- /dev/null
+++ b/src/admin/components/elements/DatePicker/types.ts
@@ -0,0 +1,18 @@
+export type Props = {
+  placeholder: string,
+  useDate: boolean,
+  minDate: Date,
+  maxDate: Date,
+  monthsShown: number,
+  inputDateTimeFormat: string,
+  useTime: boolean,
+  minTime: Date,
+  maxTime: Date,
+  timeIntervals: number,
+  timeFormat: string,
+  value: Date | string,
+  onChange: () => void,
+  admin: {
+    readOnly: boolean,
+  }
+}
diff --git a/src/admin/components/elements/DeleteDocument/index.tsx b/src/admin/components/elements/DeleteDocument/index.tsx
index 3fd192b7ae..e4f61adc3d 100644
--- a/src/admin/components/elements/DeleteDocument/index.tsx
+++ b/src/admin/components/elements/DeleteDocument/index.tsx
@@ -1,5 +1,4 @@
 import React, { useState, useCallback } from 'react';
-import PropTypes from 'prop-types';
 import { toast } from 'react-toastify';
 import { useHistory } from 'react-router-dom';
 import { Modal, useModal } from '@faceless-ui/modal';
@@ -9,12 +8,13 @@ import MinimalTemplate from '../../templates/Minimal';
 import { useForm } from '../../forms/Form/context';
 import useTitle from '../../../hooks/useTitle';
 import { requests } from '../../../api';
+import { Props } from './types';
 
 import './index.scss';
 
 const baseClass = 'delete-document';
 
-const DeleteDocument = (props) => {
+const DeleteDocument: React.FC<Props> = (props) => {
   const {
     title: titleFromProps,
     id,
@@ -130,23 +130,4 @@ const DeleteDocument = (props) => {
   return null;
 };
 
-DeleteDocument.defaultProps = {
-  title: undefined,
-  id: undefined,
-};
-
-DeleteDocument.propTypes = {
-  collection: PropTypes.shape({
-    admin: PropTypes.shape({
-      useAsTitle: PropTypes.string,
-    }),
-    slug: PropTypes.string,
-    labels: PropTypes.shape({
-      singular: PropTypes.string,
-    }),
-  }).isRequired,
-  id: PropTypes.string,
-  title: PropTypes.string,
-};
-
 export default DeleteDocument;
diff --git a/src/admin/components/elements/DeleteDocument/types.ts b/src/admin/components/elements/DeleteDocument/types.ts
new file mode 100644
index 0000000000..5ac01c0615
--- /dev/null
+++ b/src/admin/components/elements/DeleteDocument/types.ts
@@ -0,0 +1,13 @@
+export type Props = {
+  collection: {
+    admin: {
+      useAsTitle: string,
+    },
+    slug: string,
+    labels: {
+      singular: string,
+    },
+  }
+  id: string,
+  title: string,
+}
diff --git a/src/admin/components/elements/DuplicateDocument/types.ts b/src/admin/components/elements/DuplicateDocument/types.ts
new file mode 100644
index 0000000000..daededa188
--- /dev/null
+++ b/src/admin/components/elements/DuplicateDocument/types.ts
@@ -0,0 +1,3 @@
+export type Props = {
+
+}
diff --git a/src/admin/components/elements/Eyebrow/index.tsx b/src/admin/components/elements/Eyebrow/index.tsx
index dd6d080839..cb0366bbc3 100644
--- a/src/admin/components/elements/Eyebrow/index.tsx
+++ b/src/admin/components/elements/Eyebrow/index.tsx
@@ -8,7 +8,7 @@ const baseClass = 'eyebrow';
 
 const Eyebrow: React.FC<Props> = ({ actions }) => (
   <div className={baseClass}>
-  <StepNav />
+    <StepNav />
     {actions}
   </div>
 );
diff --git a/src/admin/components/elements/FileDetails/Meta/index.tsx b/src/admin/components/elements/FileDetails/Meta/index.tsx
index 8cb60d02db..48102d9ecf 100644
--- a/src/admin/components/elements/FileDetails/Meta/index.tsx
+++ b/src/admin/components/elements/FileDetails/Meta/index.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { useConfig } from '../../../providers/Config';
 import CopyToClipboard from '../../CopyToClipboard';
 import formatFilesize from '../../../../../uploads/formatFilesize';
+import { Props } from './types';
 
 import './index.scss';
 
 const baseClass = 'file-meta';
 
-const Meta = (props) => {
+const Meta: React.FC<Props> = (props) => {
   const {
     filename, filesize, width, height, mimeType, staticURL,
   } = props;
@@ -53,20 +53,4 @@ const Meta = (props) => {
   );
 };
 
-Meta.defaultProps = {
-  width: undefined,
-  height: undefined,
-  sizes: undefined,
-};
-
-Meta.propTypes = {
-  filename: PropTypes.string.isRequired,
-  mimeType: PropTypes.string.isRequired,
-  filesize: PropTypes.number.isRequired,
-  staticURL: PropTypes.string.isRequired,
-  width: PropTypes.number,
-  height: PropTypes.number,
-  sizes: PropTypes.shape({}),
-};
-
 export default Meta;
diff --git a/src/admin/components/elements/FileDetails/Meta/types.ts b/src/admin/components/elements/FileDetails/Meta/types.ts
new file mode 100644
index 0000000000..2df66c242d
--- /dev/null
+++ b/src/admin/components/elements/FileDetails/Meta/types.ts
@@ -0,0 +1,9 @@
+export type Props = {
+  filename: string,
+  mimeType: string,
+  filesize: number,
+  staticURL: string,
+  width: number,
+  height: number,
+  sizes: unknown,
+}
diff --git a/src/admin/components/elements/FileDetails/index.tsx b/src/admin/components/elements/FileDetails/index.tsx
index 7ff62b0e89..5c0ee1cf93 100644
--- a/src/admin/components/elements/FileDetails/index.tsx
+++ b/src/admin/components/elements/FileDetails/index.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
-import PropTypes from 'prop-types';
 import AnimateHeight from 'react-animate-height';
 import Thumbnail from '../Thumbnail';
 import Button from '../Button';
 import Meta from './Meta';
+import { Props } from './types';
 
 import Chevron from '../../icons/Chevron';
 
@@ -11,9 +11,17 @@ import './index.scss';
 
 const baseClass = 'file-details';
 
-const FileDetails = (props) => {
+const FileDetails: React.FC<Props> = (props) => {
   const {
-    filename, mimeType, filesize, staticURL, adminThumbnail, sizes, handleRemove, width, height,
+    filename,
+    mimeType,
+    filesize,
+    staticURL,
+    adminThumbnail,
+    sizes,
+    handleRemove,
+    width,
+    height,
   } = props;
 
   const [moreInfoOpen, setMoreInfoOpen] = useState(false);
@@ -94,24 +102,4 @@ const FileDetails = (props) => {
   );
 };
 
-FileDetails.defaultProps = {
-  adminThumbnail: undefined,
-  handleRemove: undefined,
-  width: undefined,
-  height: undefined,
-  sizes: undefined,
-};
-
-FileDetails.propTypes = {
-  filename: PropTypes.string.isRequired,
-  mimeType: PropTypes.string.isRequired,
-  filesize: PropTypes.number.isRequired,
-  staticURL: PropTypes.string.isRequired,
-  width: PropTypes.number,
-  height: PropTypes.number,
-  sizes: PropTypes.shape({}),
-  adminThumbnail: PropTypes.string,
-  handleRemove: PropTypes.func,
-};
-
 export default FileDetails;
diff --git a/src/admin/components/elements/FileDetails/types.ts b/src/admin/components/elements/FileDetails/types.ts
new file mode 100644
index 0000000000..d2188b2c10
--- /dev/null
+++ b/src/admin/components/elements/FileDetails/types.ts
@@ -0,0 +1,11 @@
+export type Props = {
+  filename: string,
+  mimeType: string,
+  filesize: number,
+  staticURL: string,
+  width: number,
+  height: number,
+  sizes: unknown,
+  adminThumbnail: string,
+  handleRemove: () => void,
+}
diff --git a/src/admin/components/elements/GenerateConfirmation/index.tsx b/src/admin/components/elements/GenerateConfirmation/index.tsx
index 091da4f424..f3d9563207 100644
--- a/src/admin/components/elements/GenerateConfirmation/index.tsx
+++ b/src/admin/components/elements/GenerateConfirmation/index.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { toast } from 'react-toastify';
 import { Modal, useModal } from '@faceless-ui/modal';
 import Button from '../Button';
 import MinimalTemplate from '../../templates/Minimal';
+import { Props } from './types';
 
 import './index.scss';
 
 const baseClass = 'generate-confirmation';
 
-const GenerateConfirmation = (props) => {
+const GenerateConfirmation: React.FC<Props> = (props) => {
   const {
     setKey,
     highlightField,
@@ -74,9 +74,4 @@ const GenerateConfirmation = (props) => {
   );
 };
 
-GenerateConfirmation.propTypes = {
-  setKey: PropTypes.func.isRequired,
-  highlightField: PropTypes.func.isRequired,
-};
-
 export default GenerateConfirmation;
diff --git a/src/admin/components/elements/GenerateConfirmation/types.ts b/src/admin/components/elements/GenerateConfirmation/types.ts
new file mode 100644
index 0000000000..60e2cfed8d
--- /dev/null
+++ b/src/admin/components/elements/GenerateConfirmation/types.ts
@@ -0,0 +1,4 @@
+export type Props = {
+  setKey: () => void,
+  highlightField: () => void,
+}
diff --git a/src/admin/components/elements/ListControls/index.tsx b/src/admin/components/elements/ListControls/index.tsx
index 0350e17530..b14a9c7ea0 100644
--- a/src/admin/components/elements/ListControls/index.tsx
+++ b/src/admin/components/elements/ListControls/index.tsx
@@ -1,17 +1,17 @@
 import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
 import AnimateHeight from 'react-animate-height';
 import SearchFilter from '../SearchFilter';
 import ColumnSelector from '../ColumnSelector';
 import WhereBuilder from '../WhereBuilder';
 import SortComplex from '../SortComplex';
 import Button from '../Button';
+import { Props } from './types';
 
 import './index.scss';
 
 const baseClass = 'list-controls';
 
-const ListControls = (props) => {
+const ListControls: React.FC<Props> = (props) => {
   const {
     handleChange,
     collection,
@@ -149,25 +149,4 @@ const ListControls = (props) => {
   );
 };
 
-ListControls.defaultProps = {
-  enableColumns: true,
-  enableSort: false,
-};
-
-ListControls.propTypes = {
-  enableColumns: PropTypes.bool,
-  enableSort: PropTypes.bool,
-  setSort: PropTypes.func.isRequired,
-  collection: PropTypes.shape({
-    admin: PropTypes.shape({
-      useAsTitle: PropTypes.string,
-      defaultColumns: PropTypes.arrayOf(
-        PropTypes.string,
-      ),
-    }),
-    fields: PropTypes.arrayOf(PropTypes.shape),
-  }).isRequired,
-  handleChange: PropTypes.func.isRequired,
-};
-
 export default ListControls;
diff --git a/src/admin/components/elements/ListControls/types.ts b/src/admin/components/elements/ListControls/types.ts
new file mode 100644
index 0000000000..e497e606a8
--- /dev/null
+++ b/src/admin/components/elements/ListControls/types.ts
@@ -0,0 +1,13 @@
+export type Props = {
+  enableColumns: boolean,
+  enableSort: boolean,
+  setSort: () => void,
+  collection: {
+    admin: {
+      useAsTitle: string,
+      defaultColumns: string[],
+    },
+    fields: []
+  }
+  handleChange: () => void,
+}
diff --git a/src/admin/components/elements/Loading/index.tsx b/src/admin/components/elements/Loading/index.tsx
index 2de9ff6c3f..3ea2f886aa 100644
--- a/src/admin/components/elements/Loading/index.tsx
+++ b/src/admin/components/elements/Loading/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
 
-const Loading = () => <div>Loading</div>;
+const Loading: React.FC = () => <div>Loading</div>;
 
 export default Loading;
diff --git a/src/admin/components/elements/Paginator/ClickableArrow/index.tsx b/src/admin/components/elements/Paginator/ClickableArrow/index.tsx
index 0dd57ecd65..eb9e5332c4 100644
--- a/src/admin/components/elements/Paginator/ClickableArrow/index.tsx
+++ b/src/admin/components/elements/Paginator/ClickableArrow/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { Props } from './types';
 
 import Chevron from '../../../icons/Chevron';
 
@@ -7,7 +7,7 @@ import './index.scss';
 
 const baseClass = 'clickable-arrow';
 
-const ClickableArrow = (props) => {
+const ClickableArrow: React.FC<Props> = (props) => {
   const {
     updatePage,
     isDisabled,
@@ -31,16 +31,4 @@ const ClickableArrow = (props) => {
   );
 };
 
-ClickableArrow.defaultProps = {
-  updatePage: null,
-  isDisabled: false,
-  direction: 'right',
-};
-
-ClickableArrow.propTypes = {
-  updatePage: PropTypes.func,
-  isDisabled: PropTypes.bool,
-  direction: PropTypes.oneOf(['right', 'left']),
-};
-
 export default ClickableArrow;
diff --git a/src/admin/components/elements/Paginator/ClickableArrow/types.ts b/src/admin/components/elements/Paginator/ClickableArrow/types.ts
new file mode 100644
index 0000000000..0f18e35cf2
--- /dev/null
+++ b/src/admin/components/elements/Paginator/ClickableArrow/types.ts
@@ -0,0 +1,5 @@
+export type Props = {
+  updatePage: () => void,
+  isDisabled: boolean,
+  direction: 'right' | 'left',
+}
diff --git a/src/admin/components/elements/Paginator/Page/index.tsx b/src/admin/components/elements/Paginator/Page/index.tsx
index 9acca5f1f8..af781f67b3 100644
--- a/src/admin/components/elements/Paginator/Page/index.tsx
+++ b/src/admin/components/elements/Paginator/Page/index.tsx
@@ -1,10 +1,14 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { Props } from './types';
 
 const baseClass = 'paginator__page';
 
-const Page = ({
-  page, isCurrent, updatePage, isFirstPage, isLastPage,
+const Page: React.FC<Props> = ({
+  page,
+  isCurrent,
+  updatePage,
+  isFirstPage,
+  isLastPage,
 }) => {
   const classes = [
     baseClass,
@@ -24,20 +28,4 @@ const Page = ({
   );
 };
 
-Page.defaultProps = {
-  page: 1,
-  isCurrent: false,
-  updatePage: null,
-  isFirstPage: false,
-  isLastPage: false,
-};
-
-Page.propTypes = {
-  page: PropTypes.number,
-  isCurrent: PropTypes.bool,
-  updatePage: PropTypes.func,
-  isFirstPage: PropTypes.bool,
-  isLastPage: PropTypes.bool,
-};
-
 export default Page;
diff --git a/src/admin/components/elements/Paginator/Page/types.ts b/src/admin/components/elements/Paginator/Page/types.ts
new file mode 100644
index 0000000000..110d728a3f
--- /dev/null
+++ b/src/admin/components/elements/Paginator/Page/types.ts
@@ -0,0 +1,7 @@
+export type Props = {
+  page: number,
+  isCurrent: boolean,
+  updatePage: () => void,
+  isFirstPage: boolean,
+  isLastPage: boolean,
+}
diff --git a/src/admin/components/elements/Paginator/Separator/index.tsx b/src/admin/components/elements/Paginator/Separator/index.tsx
index 4b2c26964d..327697e88b 100644
--- a/src/admin/components/elements/Paginator/Separator/index.tsx
+++ b/src/admin/components/elements/Paginator/Separator/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
 
-const Separator = () => <span className="paginator__separator">&mdash;</span>;
+const Separator: React.FC = () => <span className="paginator__separator">&mdash;</span>;
 
 export default Separator;
diff --git a/src/admin/components/elements/Paginator/index.tsx b/src/admin/components/elements/Paginator/index.tsx
index 34312601c7..c7807bcc45 100644
--- a/src/admin/components/elements/Paginator/index.tsx
+++ b/src/admin/components/elements/Paginator/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { useHistory, useLocation } from 'react-router-dom';
 import queryString from 'qs';
+import { Props } from './types';
 
 import Page from './Page';
 import Separator from './Separator';
@@ -17,7 +17,7 @@ const nodeTypes = {
 
 const baseClass = 'paginator';
 
-const Pagination = (props) => {
+const Pagination: React.FC<Props> = (props) => {
   const history = useHistory();
   const location = useLocation();
 
@@ -135,29 +135,3 @@ const Pagination = (props) => {
 };
 
 export default Pagination;
-
-Pagination.defaultProps = {
-  limit: null,
-  totalPages: null,
-  page: 1,
-  hasPrevPage: false,
-  hasNextPage: false,
-  prevPage: null,
-  nextPage: null,
-  numberOfNeighbors: 1,
-  disableHistoryChange: false,
-  onChange: undefined,
-};
-
-Pagination.propTypes = {
-  limit: PropTypes.number,
-  totalPages: PropTypes.number,
-  page: PropTypes.number,
-  hasPrevPage: PropTypes.bool,
-  hasNextPage: PropTypes.bool,
-  prevPage: PropTypes.number,
-  nextPage: PropTypes.number,
-  numberOfNeighbors: PropTypes.number,
-  disableHistoryChange: PropTypes.bool,
-  onChange: PropTypes.func,
-};
diff --git a/src/admin/components/elements/Paginator/types.ts b/src/admin/components/elements/Paginator/types.ts
new file mode 100644
index 0000000000..b4a1f2487a
--- /dev/null
+++ b/src/admin/components/elements/Paginator/types.ts
@@ -0,0 +1,12 @@
+export type Props = {
+  limit: number,
+  totalPages: number,
+  page: number,
+  hasPrevPage: boolean,
+  hasNextPage: boolean,
+  prevPage: number,
+  nextPage: number,
+  numberOfNeighbors: number,
+  disableHistoryChange: boolean,
+  onChange: () => void,
+}
diff --git a/src/admin/components/elements/Pill/index.tsx b/src/admin/components/elements/Pill/index.tsx
index deed1cc5cf..9eda95e12b 100644
--- a/src/admin/components/elements/Pill/index.tsx
+++ b/src/admin/components/elements/Pill/index.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
+import { Props } from './types';
 
 import './index.scss';
 
 const baseClass = 'pill';
 
-const Pill = ({
+const Pill: React.FC<Props> = ({
   children, className, to, icon, alignIcon, onClick, pillStyle,
 }) => {
   const classes = [
@@ -46,24 +46,4 @@ const Pill = ({
   );
 };
 
-Pill.defaultProps = {
-  children: undefined,
-  className: '',
-  to: undefined,
-  icon: undefined,
-  alignIcon: 'right',
-  onClick: undefined,
-  pillStyle: 'light',
-};
-
-Pill.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  to: PropTypes.string,
-  icon: PropTypes.node,
-  alignIcon: PropTypes.oneOf(['left', 'right']),
-  onClick: PropTypes.func,
-  pillStyle: PropTypes.oneOf(['light', 'dark', 'light-gray']),
-};
-
 export default Pill;
diff --git a/src/admin/components/elements/Pill/types.ts b/src/admin/components/elements/Pill/types.ts
new file mode 100644
index 0000000000..dd8918ae62
--- /dev/null
+++ b/src/admin/components/elements/Pill/types.ts
@@ -0,0 +1,9 @@
+export type Props = {
+  children: React.ReactNode,
+  className: string,
+  to: string,
+  icon: React.ReactNode,
+  alignIcon: 'left' | 'right',
+  onClick: () => void,
+  pillStyle: 'light' | 'dark' | 'light-gray',
+}
diff --git a/src/admin/components/elements/Popup/PopupButton/index.tsx b/src/admin/components/elements/Popup/PopupButton/index.tsx
index 24c04cf9ec..c87d18a314 100644
--- a/src/admin/components/elements/Popup/PopupButton/index.tsx
+++ b/src/admin/components/elements/Popup/PopupButton/index.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { Props } from './types';
 
 import './index.scss';
 
 const baseClass = 'popup-button';
 
-const PopupButton = (props) => {
+const PopupButton: React.FC<Props> = (props) => {
   const {
     buttonType,
     button,
@@ -49,17 +49,4 @@ const PopupButton = (props) => {
   );
 };
 
-PopupButton.defaultProps = {
-  buttonType: null,
-  onToggleOpen: undefined,
-};
-
-PopupButton.propTypes = {
-  buttonType: PropTypes.oneOf(['custom', 'default']),
-  button: PropTypes.node.isRequired,
-  setActive: PropTypes.func.isRequired,
-  active: PropTypes.bool.isRequired,
-  onToggleOpen: PropTypes.func,
-};
-
 export default PopupButton;
diff --git a/src/admin/components/elements/Popup/PopupButton/types.ts b/src/admin/components/elements/Popup/PopupButton/types.ts
new file mode 100644
index 0000000000..9eba4a66ff
--- /dev/null
+++ b/src/admin/components/elements/Popup/PopupButton/types.ts
@@ -0,0 +1,7 @@
+export type Props = {
+    buttonType: 'custom' | 'default',
+    button: React.ReactNode,
+    setActive: () => void,
+    active: boolean,
+    onToggleOpen: () => void,
+}
diff --git a/src/admin/components/elements/Popup/index.tsx b/src/admin/components/elements/Popup/index.tsx
index 32da758391..4ab54c5737 100644
--- a/src/admin/components/elements/Popup/index.tsx
+++ b/src/admin/components/elements/Popup/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
 import { useWindowInfo } from '@faceless-ui/window-info';
 import { useScrollInfo } from '@faceless-ui/scroll-info';
+import { Props } from './types';
 
 import useThrottledEffect from '../../../hooks/useThrottledEffect';
 import PopupButton from './PopupButton';
@@ -10,7 +10,7 @@ import './index.scss';
 
 const baseClass = 'popup';
 
-const Popup = (props) => {
+const Popup: React.FC<Props> = (props) => {
   const {
     render, align, size, color, button, buttonType, children, showOnHover, horizontalAlign, initActive, onToggleOpen,
   } = props;
@@ -135,32 +135,4 @@ const Popup = (props) => {
   );
 };
 
-Popup.defaultProps = {
-  align: 'center',
-  size: 'small',
-  color: 'light',
-  children: undefined,
-  render: undefined,
-  buttonType: 'default',
-  button: undefined,
-  showOnHover: false,
-  horizontalAlign: 'left',
-  initActive: false,
-  onToggleOpen: undefined,
-};
-
-Popup.propTypes = {
-  render: PropTypes.func,
-  children: PropTypes.node,
-  align: PropTypes.oneOf(['left', 'center', 'right']),
-  horizontalAlign: PropTypes.oneOf(['left', 'center', 'right']),
-  size: PropTypes.oneOf(['small', 'large', 'wide']),
-  color: PropTypes.oneOf(['light', 'dark']),
-  buttonType: PropTypes.oneOf(['default', 'custom']),
-  button: PropTypes.node,
-  showOnHover: PropTypes.bool,
-  initActive: PropTypes.bool,
-  onToggleOpen: PropTypes.func,
-};
-
 export default Popup;
diff --git a/src/admin/components/elements/Popup/types.ts b/src/admin/components/elements/Popup/types.ts
new file mode 100644
index 0000000000..f6413e2c58
--- /dev/null
+++ b/src/admin/components/elements/Popup/types.ts
@@ -0,0 +1,13 @@
+export type Props = {
+    render: () => void,
+    children: React.ReactNode,
+    align: 'left' | 'center' | 'right',
+    horizontalAlign: 'left' | 'center' | 'right',
+    size: 'small' | 'large' | 'wide',
+    color: 'light' | 'dark',
+    buttonType: 'default' | 'custom',
+    button: React.ReactNode,
+    showOnHover: boolean,
+    initActive: boolean,
+    onToggleOpen: () => void,
+}
diff --git a/src/admin/components/elements/ReactSelect/index.tsx b/src/admin/components/elements/ReactSelect/index.tsx
index edf4f42d29..59219e5038 100644
--- a/src/admin/components/elements/ReactSelect/index.tsx
+++ b/src/admin/components/elements/ReactSelect/index.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import Select from 'react-select';
+import { Props } from './types';
 import Chevron from '../../icons/Chevron';
 
 import './index.scss';
 
-const ReactSelect = (props) => {
+const ReactSelect: React.FC<Props> = (props) => {
   const {
     showError,
     options,
@@ -73,38 +72,4 @@ const ReactSelect = (props) => {
   );
 };
 
-ReactSelect.defaultProps = {
-  isMulti: false,
-  value: undefined,
-  showError: false,
-  disabled: false,
-  formatValue: null,
-  options: [],
-  onChange: () => { },
-};
-
-ReactSelect.propTypes = {
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.array,
-    PropTypes.shape({}),
-  ]),
-  onChange: PropTypes.func,
-  disabled: PropTypes.bool,
-  showError: PropTypes.bool,
-  formatValue: PropTypes.func,
-  options: PropTypes.oneOfType([
-    PropTypes.arrayOf(
-      PropTypes.string,
-    ),
-    PropTypes.arrayOf(
-      PropTypes.shape({
-        value: PropTypes.string,
-        label: PropTypes.string,
-      }),
-    ),
-  ]),
-  isMulti: PropTypes.bool,
-};
-
 export default ReactSelect;
diff --git a/src/admin/components/elements/ReactSelect/types.ts b/src/admin/components/elements/ReactSelect/types.ts
new file mode 100644
index 0000000000..e905a1c2ad
--- /dev/null
+++ b/src/admin/components/elements/ReactSelect/types.ts
@@ -0,0 +1,9 @@
+export type Props = {
+  value: string | [],
+  onChange: () => void,
+  disabled: boolean,
+  showError: boolean,
+  formatValue: () => void,
+  options: string[] | { value: string, label: string }[],
+  isMulti: boolean,
+}
diff --git a/src/admin/components/elements/RenderTitle/index.tsx b/src/admin/components/elements/RenderTitle/index.tsx
index a56397aa84..3910bd448a 100644
--- a/src/admin/components/elements/RenderTitle/index.tsx
+++ b/src/admin/components/elements/RenderTitle/index.tsx
@@ -1,12 +1,12 @@
 import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
+import { Props } from './types';
 import useTitle from '../../../hooks/useTitle';
 
 import './index.scss';
 
 const baseClass = 'render-title';
 
-const RenderTitle = (props) => {
+const RenderTitle : React.FC<Props> = (props) => {
   const {
     useAsTitle, title: titleFromProps, data, fallback,
   } = props;
@@ -39,21 +39,4 @@ const RenderTitle = (props) => {
   );
 };
 
-RenderTitle.defaultProps = {
-  title: undefined,
-  fallback: '[Untitled]',
-  useAsTitle: null,
-  data: null,
-};
-
-RenderTitle.propTypes = {
-  useAsTitle: PropTypes.string,
-  data: PropTypes.shape({
-    id: PropTypes.string,
-  }),
-  title: PropTypes.string,
-  fallback: PropTypes.string,
-};
-
-
 export default RenderTitle;
diff --git a/src/admin/components/elements/RenderTitle/types.ts b/src/admin/components/elements/RenderTitle/types.ts
new file mode 100644
index 0000000000..18d72514e7
--- /dev/null
+++ b/src/admin/components/elements/RenderTitle/types.ts
@@ -0,0 +1,8 @@
+export type Props = {
+  useAsTitle: string,
+  data: {
+    id: string,
+  },
+  title:string,
+  fallback: string,
+}
diff --git a/src/admin/components/elements/SearchFilter/index.tsx b/src/admin/components/elements/SearchFilter/index.tsx
index b7449f8103..c1a059db7a 100644
--- a/src/admin/components/elements/SearchFilter/index.tsx
+++ b/src/admin/components/elements/SearchFilter/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
+import { Props } from './types';
 import Search from '../../icons/Search';
 import useDebounce from '../../../hooks/useDebounce';
 
@@ -7,7 +7,7 @@ import './index.scss';
 
 const baseClass = 'search-filter';
 
-const SearchFilter = (props) => {
+const SearchFilter: React.FC<Props> = (props) => {
   const {
     fieldName,
     fieldLabel,
@@ -34,22 +34,11 @@ const SearchFilter = (props) => {
         placeholder={`Search by ${fieldLabel}`}
         type="text"
         value={search}
-        onChange={e => setSearch(e.target.value)}
+        onChange={(e) => setSearch(e.target.value)}
       />
       <Search />
     </div>
   );
 };
 
-SearchFilter.defaultProps = {
-  fieldName: 'id',
-  fieldLabel: 'ID',
-};
-
-SearchFilter.propTypes = {
-  fieldName: PropTypes.string,
-  fieldLabel: PropTypes.string,
-  handleChange: PropTypes.func.isRequired,
-};
-
 export default SearchFilter;
diff --git a/src/admin/components/elements/SearchFilter/types.ts b/src/admin/components/elements/SearchFilter/types.ts
new file mode 100644
index 0000000000..2e5e7e0a85
--- /dev/null
+++ b/src/admin/components/elements/SearchFilter/types.ts
@@ -0,0 +1,5 @@
+export type Props = {
+  fieldName: string,
+  fieldLabel: string,
+  handleChange: () => void,
+}
diff --git a/src/admin/components/elements/SortColumn/index.tsx b/src/admin/components/elements/SortColumn/index.tsx
index be2e63bb27..fcd39ae97e 100644
--- a/src/admin/components/elements/SortColumn/index.tsx
+++ b/src/admin/components/elements/SortColumn/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
+import { Props } from './types';
 import Chevron from '../../icons/Chevron';
 import Button from '../Button';
 
@@ -7,7 +7,7 @@ import './index.scss';
 
 const baseClass = 'sort-column';
 
-const SortColumn = (props) => {
+const SortColumn: React.FC<Props> = (props) => {
   const {
     label, handleChange, name, disable,
   } = props;
@@ -53,15 +53,4 @@ const SortColumn = (props) => {
   );
 };
 
-SortColumn.defaultProps = {
-  disable: false,
-};
-
-SortColumn.propTypes = {
-  label: PropTypes.string.isRequired,
-  handleChange: PropTypes.func.isRequired,
-  name: PropTypes.string.isRequired,
-  disable: PropTypes.bool,
-};
-
 export default SortColumn;
diff --git a/src/admin/components/elements/SortColumn/types.ts b/src/admin/components/elements/SortColumn/types.ts
new file mode 100644
index 0000000000..dda524dc1e
--- /dev/null
+++ b/src/admin/components/elements/SortColumn/types.ts
@@ -0,0 +1,6 @@
+export type Props = {
+  label: string,
+  handleChange: () => void,
+  name: string,
+  disable: boolean,
+}
diff --git a/src/admin/components/elements/SortComplex/index.tsx b/src/admin/components/elements/SortComplex/index.tsx
index 2e67036b10..03b321c584 100644
--- a/src/admin/components/elements/SortComplex/index.tsx
+++ b/src/admin/components/elements/SortComplex/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
+import { Props } from './types';
 import ReactSelect from '../ReactSelect';
 import sortableFieldTypes from '../../../../fields/sortableFieldTypes';
 
@@ -9,7 +9,7 @@ const baseClass = 'sort-complex';
 
 const sortOptions = [{ label: 'Ascending', value: '' }, { label: 'Descending', value: '-' }];
 
-const SortComplex = (props) => {
+const SortComplex: React.FC<Props> = (props) => {
   const {
     collection,
     handleChange,
@@ -64,16 +64,4 @@ const SortComplex = (props) => {
   );
 };
 
-SortComplex.propTypes = {
-  handleChange: PropTypes.func.isRequired,
-  collection: PropTypes.shape({
-    fields: PropTypes.arrayOf(
-      PropTypes.shape({}),
-    ),
-    labels: PropTypes.shape({
-      plural: PropTypes.string,
-    }),
-  }).isRequired,
-};
-
 export default SortComplex;
diff --git a/src/admin/components/elements/SortComplex/types.ts b/src/admin/components/elements/SortComplex/types.ts
new file mode 100644
index 0000000000..035e3bc627
--- /dev/null
+++ b/src/admin/components/elements/SortComplex/types.ts
@@ -0,0 +1,8 @@
+export type Props = {
+  handleChange: () => void,
+  collection: {
+    fields: [],
+    labels: {
+      plural: string,
+  }},
+}
diff --git a/src/admin/components/elements/Table/index.tsx b/src/admin/components/elements/Table/index.tsx
index b22454bc7f..78bbd99c7e 100644
--- a/src/admin/components/elements/Table/index.tsx
+++ b/src/admin/components/elements/Table/index.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { Props } from './types';
 
 import './index.scss';
 
 const baseClass = 'table';
 
-const Table = ({ columns, data }) => {
+const Table: React.FC<Props> = ({ columns, data }) => {
   if (columns && columns.length > 0) {
     return (
       <div className={baseClass}>
@@ -41,20 +41,4 @@ const Table = ({ columns, data }) => {
 
   return null;
 };
-
-Table.propTypes = {
-  columns: PropTypes.arrayOf(
-    PropTypes.shape({
-      accessor: PropTypes.string,
-      components: PropTypes.shape({
-        Heading: PropTypes.node,
-        renderCell: PropTypes.function,
-      }),
-    }),
-  ).isRequired,
-  data: PropTypes.arrayOf(
-    PropTypes.shape({}),
-  ).isRequired,
-};
-
 export default Table;
diff --git a/src/admin/components/elements/Table/types.ts b/src/admin/components/elements/Table/types.ts
new file mode 100644
index 0000000000..2babc175f7
--- /dev/null
+++ b/src/admin/components/elements/Table/types.ts
@@ -0,0 +1,10 @@
+export type Props = {
+  columns: {
+      accessor: string,
+      components: {
+        Heading: React.ReactNode,
+        renderCell: () => void,
+      },
+    }[],
+  data: []
+}
diff --git a/src/admin/components/elements/Thumbnail/index.tsx b/src/admin/components/elements/Thumbnail/index.tsx
index 668b4fad81..37da820223 100644
--- a/src/admin/components/elements/Thumbnail/index.tsx
+++ b/src/admin/components/elements/Thumbnail/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { Props } from './types';
 import { useConfig } from '../../providers/Config';
 import FileGraphic from '../../graphics/File';
 import getThumbnail from '../../../../uploads/getThumbnail';
@@ -8,7 +8,7 @@ import './index.scss';
 
 const baseClass = 'thumbnail';
 
-const Thumbnail = (props) => {
+const Thumbnail: React.FC<Props> = (props) => {
   const {
     filename, mimeType, staticURL, sizes, adminThumbnail, size,
   } = props;
@@ -36,21 +36,4 @@ const Thumbnail = (props) => {
     </div>
   );
 };
-
-Thumbnail.defaultProps = {
-  adminThumbnail: undefined,
-  sizes: undefined,
-  mimeType: undefined,
-  size: 'medium',
-};
-
-Thumbnail.propTypes = {
-  filename: PropTypes.string.isRequired,
-  sizes: PropTypes.shape({}),
-  adminThumbnail: PropTypes.string,
-  mimeType: PropTypes.string,
-  staticURL: PropTypes.string.isRequired,
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'expand']),
-};
-
 export default Thumbnail;
diff --git a/src/admin/components/elements/Thumbnail/types.ts b/src/admin/components/elements/Thumbnail/types.ts
new file mode 100644
index 0000000000..c83aa3b2bc
--- /dev/null
+++ b/src/admin/components/elements/Thumbnail/types.ts
@@ -0,0 +1,8 @@
+export type Props = {
+  filename: string,
+  sizes: unknown,
+  adminThumbnail: string,
+  mimeType: string,
+  staticURL: string,
+  size: 'small' | 'medium' | 'large' | 'expand',
+}
diff --git a/src/admin/components/elements/Tooltip/index.tsx b/src/admin/components/elements/Tooltip/index.tsx
index c954fd11ec..edbc799a8c 100644
--- a/src/admin/components/elements/Tooltip/index.tsx
+++ b/src/admin/components/elements/Tooltip/index.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { Props } from './types';
 
 import './index.scss';
 
-const Tooltip = (props) => {
+const Tooltip: React.FC<Props> = (props) => {
   const { className, children } = props;
 
   const classes = [
@@ -19,13 +19,4 @@ const Tooltip = (props) => {
   );
 };
 
-Tooltip.defaultProps = {
-  className: undefined,
-};
-
-Tooltip.propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.node.isRequired,
-};
-
 export default Tooltip;
diff --git a/src/admin/components/elements/Tooltip/types.ts b/src/admin/components/elements/Tooltip/types.ts
new file mode 100644
index 0000000000..e174e01329
--- /dev/null
+++ b/src/admin/components/elements/Tooltip/types.ts
@@ -0,0 +1,4 @@
+export type Props = {
+  className: string,
+  children: React.ReactNode,
+}
diff --git a/src/admin/components/elements/UploadCard/index.tsx b/src/admin/components/elements/UploadCard/index.tsx
index db01b61ad8..8a71d310e1 100644
--- a/src/admin/components/elements/UploadCard/index.tsx
+++ b/src/admin/components/elements/UploadCard/index.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { Props } from './types';
 import Thumbnail from '../Thumbnail';
 
 import './index.scss';
 
 const baseClass = 'upload-card';
 
-const UploadCard = (props) => {
+const UploadCard: React.FC<Props> = (props) => {
   const {
     onClick,
     mimeType,
@@ -43,27 +43,4 @@ const UploadCard = (props) => {
   );
 };
 
-UploadCard.defaultProps = {
-  sizes: undefined,
-  onClick: undefined,
-};
-
-UploadCard.propTypes = {
-  collection: PropTypes.shape({
-    labels: PropTypes.shape({
-      singular: PropTypes.string,
-    }),
-    upload: PropTypes.shape({
-      adminThumbnail: PropTypes.string,
-      staticURL: PropTypes.string,
-    }),
-  }).isRequired,
-  id: PropTypes.string.isRequired,
-  filename: PropTypes.string.isRequired,
-  mimeType: PropTypes.string.isRequired,
-  sizes: PropTypes.shape({}),
-  onClick: PropTypes.func,
-};
-
-
 export default UploadCard;
diff --git a/src/admin/components/elements/UploadCard/types.ts b/src/admin/components/elements/UploadCard/types.ts
new file mode 100644
index 0000000000..e058c6a660
--- /dev/null
+++ b/src/admin/components/elements/UploadCard/types.ts
@@ -0,0 +1,15 @@
+export type Props = {
+  collection: {
+    labels: {
+      singular: string,
+    },
+    upload: {
+      adminThumbnail: string,
+      staticURL: string,
+    }},
+  id: string,
+  filename: string,
+  mimeType: string,
+  sizes: unknown,
+  onClick: () => void,
+}
diff --git a/src/admin/components/elements/UploadGallery/index.tsx b/src/admin/components/elements/UploadGallery/index.tsx
index 88e5bb9bb7..8821a561d5 100644
--- a/src/admin/components/elements/UploadGallery/index.tsx
+++ b/src/admin/components/elements/UploadGallery/index.tsx
@@ -1,29 +1,27 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { Props } from './types';
 import UploadCard from '../UploadCard';
 
 import './index.scss';
 
 const baseClass = 'upload-gallery';
 
-const UploadGallery = (props) => {
+const UploadGallery: React.FC<Props> = (props) => {
   const { docs, onCardClick, collection } = props;
 
 
   if (docs && docs.length > 0) {
     return (
       <ul className={baseClass}>
-        {docs.map((doc, i) => {
-          return (
-            <li key={i}>
-              <UploadCard
-                {...doc}
-                {...{ collection }}
-                onClick={() => onCardClick(doc)}
-              />
-            </li>
-          );
-        })}
+        {docs.map((doc, i) => (
+          <li key={i}>
+            <UploadCard
+              {...doc}
+              {...{ collection }}
+              onClick={() => onCardClick(doc)}
+            />
+          </li>
+        ))}
       </ul>
     );
   }
@@ -31,16 +29,4 @@ const UploadGallery = (props) => {
   return null;
 };
 
-UploadGallery.defaultProps = {
-  docs: undefined,
-};
-
-UploadGallery.propTypes = {
-  docs: PropTypes.arrayOf(
-    PropTypes.shape({}),
-  ),
-  collection: PropTypes.shape({}).isRequired,
-  onCardClick: PropTypes.func.isRequired,
-};
-
 export default UploadGallery;
diff --git a/src/admin/components/elements/UploadGallery/types.ts b/src/admin/components/elements/UploadGallery/types.ts
new file mode 100644
index 0000000000..02d19f634b
--- /dev/null
+++ b/src/admin/components/elements/UploadGallery/types.ts
@@ -0,0 +1,5 @@
+export type Props = {
+    docs: [],
+    collection: unknown,
+    onCardClick: () => void,
+}
diff --git a/src/admin/components/elements/WhereBuilder/Condition/Date/index.tsx b/src/admin/components/elements/WhereBuilder/Condition/Date/index.tsx
index bd64388fdf..1913f50a0d 100644
--- a/src/admin/components/elements/WhereBuilder/Condition/Date/index.tsx
+++ b/src/admin/components/elements/WhereBuilder/Condition/Date/index.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { Props } from './types';
 import DatePicker from '../../../DatePicker';
 
 const baseClass = 'condition-value-date';
 
-const DateField = ({ onChange, value }) => (
+const DateField: React.FC<Props> = ({ onChange, value }) => (
   <div className={baseClass}>
     <DatePicker
       onChange={onChange}
@@ -13,13 +13,4 @@ const DateField = ({ onChange, value }) => (
   </div>
 );
 
-DateField.defaultProps = {
-  value: undefined,
-};
-
-DateField.propTypes = {
-  onChange: PropTypes.func.isRequired,
-  value: PropTypes.instanceOf(Date),
-};
-
 export default DateField;
diff --git a/src/admin/components/elements/WhereBuilder/Condition/Date/types.ts b/src/admin/components/elements/WhereBuilder/Condition/Date/types.ts
new file mode 100644
index 0000000000..1a13d3cb2e
--- /dev/null
+++ b/src/admin/components/elements/WhereBuilder/Condition/Date/types.ts
@@ -0,0 +1,4 @@
+export type Props = {
+  onChange: () => void,
+  value: Date,
+}
diff --git a/src/admin/components/elements/WhereBuilder/Condition/Number/index.tsx b/src/admin/components/elements/WhereBuilder/Condition/Number/index.tsx
index 3770d8725d..19435b7858 100644
--- a/src/admin/components/elements/WhereBuilder/Condition/Number/index.tsx
+++ b/src/admin/components/elements/WhereBuilder/Condition/Number/index.tsx
@@ -1,29 +1,18 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { Props } from './types';
 
 import './index.scss';
 
 const baseClass = 'condition-value-number';
 
-const NumberField = ({ onChange, value }) => {
-  return (
-    <input
-      placeholder="Enter a value"
-      className={baseClass}
-      type="number"
-      onChange={e => onChange(e.target.value)}
-      value={value}
-    />
-  );
-};
-
-NumberField.defaultProps = {
-  value: '',
-};
-
-NumberField.propTypes = {
-  onChange: PropTypes.func.isRequired,
-  value: PropTypes.string,
-};
+const NumberField: React.FC<Props> = ({ onChange, value }) => (
+  <input
+    placeholder="Enter a value"
+    className={baseClass}
+    type="number"
+    onChange={(e) => onChange(e.target.value)}
+    value={value}
+  />
+);
 
 export default NumberField;
diff --git a/src/admin/components/elements/WhereBuilder/Condition/Number/types.ts b/src/admin/components/elements/WhereBuilder/Condition/Number/types.ts
new file mode 100644
index 0000000000..1a13d3cb2e
--- /dev/null
+++ b/src/admin/components/elements/WhereBuilder/Condition/Number/types.ts
@@ -0,0 +1,4 @@
+export type Props = {
+  onChange: () => void,
+  value: Date,
+}
diff --git a/src/admin/components/elements/WhereBuilder/Condition/Text/index.tsx b/src/admin/components/elements/WhereBuilder/Condition/Text/index.tsx
index c9ad5f78bc..dbb4937c03 100644
--- a/src/admin/components/elements/WhereBuilder/Condition/Text/index.tsx
+++ b/src/admin/components/elements/WhereBuilder/Condition/Text/index.tsx
@@ -1,29 +1,18 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { Props } from './types';
 
 import './index.scss';
 
 const baseClass = 'condition-value-text';
 
-const Text = ({ onChange, value }) => {
-  return (
-    <input
-      placeholder="Enter a value"
-      className={baseClass}
-      type="text"
-      onChange={e => onChange(e.target.value)}
-      value={value}
-    />
-  );
-};
-
-Text.defaultProps = {
-  value: '',
-};
-
-Text.propTypes = {
-  onChange: PropTypes.func.isRequired,
-  value: PropTypes.string,
-};
+const Text: React.FC<Props> = ({ onChange, value }) => (
+  <input
+    placeholder="Enter a value"
+    className={baseClass}
+    type="text"
+    onChange={(e) => onChange(e.target.value)}
+    value={value}
+  />
+);
 
 export default Text;
diff --git a/src/admin/components/elements/WhereBuilder/Condition/Text/types.ts b/src/admin/components/elements/WhereBuilder/Condition/Text/types.ts
new file mode 100644
index 0000000000..1a13d3cb2e
--- /dev/null
+++ b/src/admin/components/elements/WhereBuilder/Condition/Text/types.ts
@@ -0,0 +1,4 @@
+export type Props = {
+  onChange: () => void,
+  value: Date,
+}
diff --git a/src/admin/components/elements/WhereBuilder/Condition/index.tsx b/src/admin/components/elements/WhereBuilder/Condition/index.tsx
index d42d5deb98..91c9a15b63 100644
--- a/src/admin/components/elements/WhereBuilder/Condition/index.tsx
+++ b/src/admin/components/elements/WhereBuilder/Condition/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
+import { Props } from './types';
 import RenderCustomComponent from '../../../utilities/RenderCustomComponent';
 import ReactSelect from '../../ReactSelect';
 import Button from '../../Button';
@@ -18,7 +18,7 @@ const valueFields = {
 
 const baseClass = 'condition';
 
-const Condition = (props) => {
+const Condition: React.FC<Props> = (props) => {
   const {
     fields,
     dispatch,
@@ -120,29 +120,4 @@ const Condition = (props) => {
   );
 };
 
-Condition.propTypes = {
-  fields: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.string,
-      value: PropTypes.string,
-      operators: PropTypes.arrayOf(
-        PropTypes.shape({}),
-      ),
-    }),
-  ).isRequired,
-  value: PropTypes.shape({
-    field: PropTypes.string,
-    operator: PropTypes.string,
-    value: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-      PropTypes.instanceOf(Date),
-      PropTypes.shape({}),
-    ]),
-  }).isRequired,
-  dispatch: PropTypes.func.isRequired,
-  orIndex: PropTypes.number.isRequired,
-  andIndex: PropTypes.number.isRequired,
-};
-
 export default Condition;
diff --git a/src/admin/components/elements/WhereBuilder/Condition/types.ts b/src/admin/components/elements/WhereBuilder/Condition/types.ts
new file mode 100644
index 0000000000..9e0484b773
--- /dev/null
+++ b/src/admin/components/elements/WhereBuilder/Condition/types.ts
@@ -0,0 +1,15 @@
+export type Props = {
+  fields: {
+    label: string,
+    value: string,
+    operators: [],
+  }[],
+  value: {
+    field: string,
+    operator: string,
+    value: string | number | Date,
+  },
+  dispatch: () => void
+  orIndex: number,
+  andIndex: number,
+}
diff --git a/src/admin/components/elements/WhereBuilder/index.tsx b/src/admin/components/elements/WhereBuilder/index.tsx
index 16a1235013..2ab99fbd5a 100644
--- a/src/admin/components/elements/WhereBuilder/index.tsx
+++ b/src/admin/components/elements/WhereBuilder/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useReducer } from 'react';
-import PropTypes from 'prop-types';
+import { Props } from './types';
 import useThrottledEffect from '../../../hooks/useThrottledEffect';
 import Button from '../Button';
 import reducer from './reducer';
@@ -39,7 +39,7 @@ const reduceFields = (fields) => flattenTopLevelFields(fields).reduce((reduced,
   return reduced;
 }, []);
 
-const WhereBuilder = (props) => {
+const WhereBuilder: React.FC<Props> = (props) => {
   const {
     collection,
     collection: {
@@ -157,16 +157,4 @@ const WhereBuilder = (props) => {
   );
 };
 
-WhereBuilder.propTypes = {
-  handleChange: PropTypes.func.isRequired,
-  collection: PropTypes.shape({
-    fields: PropTypes.arrayOf(
-      PropTypes.shape({}),
-    ),
-    labels: PropTypes.shape({
-      plural: PropTypes.string,
-    }),
-  }).isRequired,
-};
-
 export default WhereBuilder;
diff --git a/src/admin/components/elements/WhereBuilder/types.ts b/src/admin/components/elements/WhereBuilder/types.ts
new file mode 100644
index 0000000000..033df8d634
--- /dev/null
+++ b/src/admin/components/elements/WhereBuilder/types.ts
@@ -0,0 +1,9 @@
+export type Props = {
+  handleChange: () => void,
+  collection: {
+    fields: [],
+    labels: {
+      plural: string,
+    },
+  },
+}
diff --git a/src/admin/components/graphics/Account/index.tsx b/src/admin/components/graphics/Account/index.tsx
index 87ce33b668..c050374006 100644
--- a/src/admin/components/graphics/Account/index.tsx
+++ b/src/admin/components/graphics/Account/index.tsx
@@ -1,31 +1,29 @@
 import React from 'react';
 
-const Account = () => {
-  return (
-    <svg
-      width="25"
-      height="25"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 25 25"
-    >
-      <circle
-        fill="#c4c4c4"
-        cx="12.5"
-        cy="12.5"
-        r="11.5"
-      />
-      <circle
-        fill="#fff"
-        cx="12.5"
-        cy="10.73"
-        r="3.98"
-      />
-      <path
-        fill="#fff"
-        d="M12.5,24a11.44,11.44,0,0,0,7.66-2.94c-.5-2.71-3.73-4.8-7.66-4.8s-7.16,2.09-7.66,4.8A11.44,11.44,0,0,0,12.5,24Z"
-      />
-    </svg>
-  );
-};
+const Account: React.FC = () => (
+  <svg
+    width="25"
+    height="25"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 25 25"
+  >
+    <circle
+      fill="#c4c4c4"
+      cx="12.5"
+      cy="12.5"
+      r="11.5"
+    />
+    <circle
+      fill="#fff"
+      cx="12.5"
+      cy="10.73"
+      r="3.98"
+    />
+    <path
+      fill="#fff"
+      d="M12.5,24a11.44,11.44,0,0,0,7.66-2.94c-.5-2.71-3.73-4.8-7.66-4.8s-7.16,2.09-7.66,4.8A11.44,11.44,0,0,0,12.5,24Z"
+    />
+  </svg>
+);
 
 export default Account;
diff --git a/src/admin/components/graphics/DefaultBlockImage/index.tsx b/src/admin/components/graphics/DefaultBlockImage/index.tsx
index 13ef649576..bf7a6a45ac 100644
--- a/src/admin/components/graphics/DefaultBlockImage/index.tsx
+++ b/src/admin/components/graphics/DefaultBlockImage/index.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { v4 as uuid } from 'uuid';
 
-const DefaultBlockImage = () => {
+const DefaultBlockImage: React.FC = () => {
   const [patternID] = useState(`pattern${uuid()}`);
   const [imageID] = useState(`image${uuid()}`);
 
diff --git a/src/admin/components/graphics/File/index.tsx b/src/admin/components/graphics/File/index.tsx
index 8223e91e27..29b6e58614 100644
--- a/src/admin/components/graphics/File/index.tsx
+++ b/src/admin/components/graphics/File/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const File = () => (
+const File: React.FC = () => (
   <svg
     width="150"
     height="150"
diff --git a/src/admin/components/graphics/Icon/index.tsx b/src/admin/components/graphics/Icon/index.tsx
index d7d402ece4..393c7d3914 100644
--- a/src/admin/components/graphics/Icon/index.tsx
+++ b/src/admin/components/graphics/Icon/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import RenderCustomComponent from '../../utilities/RenderCustomComponent';
 import { useConfig } from '../../providers/Config';
 
-const PayloadIcon = () => (
+const PayloadIcon: React.FC = () => (
   <svg
     width="25"
     height="25"
@@ -20,7 +20,7 @@ const PayloadIcon = () => (
   </svg>
 );
 
-const Icon = () => {
+const Icon: React.FC = () => {
   const {
     admin: {
       components: {
diff --git a/src/admin/components/graphics/Logo/index.tsx b/src/admin/components/graphics/Logo/index.tsx
index 5a506a0ff8..3815a15b09 100644
--- a/src/admin/components/graphics/Logo/index.tsx
+++ b/src/admin/components/graphics/Logo/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import RenderCustomComponent from '../../utilities/RenderCustomComponent';
 import { useConfig } from '../../providers/Config';
 
-const PayloadLogo = () => (
+const PayloadLogo: React.FC = () => (
   <svg
     width="180"
     height="50"
@@ -50,7 +50,7 @@ const PayloadLogo = () => (
   </svg>
 );
 
-const Logo = () => {
+const Logo: React.FC = () => {
   const {
     admin: {
       components: {
diff --git a/src/admin/components/graphics/Search/index.tsx b/src/admin/components/graphics/Search/index.tsx
index dc8e356d96..d0d1a2c6de 100644
--- a/src/admin/components/graphics/Search/index.tsx
+++ b/src/admin/components/graphics/Search/index.tsx
@@ -1,34 +1,32 @@
 import React from 'react';
 
-const Search = () => {
-  return (
-    <svg
-      width="25"
-      height="26"
-      viewBox="0 0 25 26"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className="search"
-    >
-      <circle
-        cx="11.2069"
-        cy="10.9135"
-        r="5"
-        stroke="#333333"
-        strokeWidth="2"
-        className="stroke"
-      />
-      <line
-        x1="14.914"
-        y1="14.2063"
-        x2="20.5002"
-        y2="19.7925"
-        stroke="#333333"
-        strokeWidth="2"
-        className="stroke"
-      />
-    </svg>
-  );
-};
+const Search: React.FC = () => (
+  <svg
+    width="25"
+    height="26"
+    viewBox="0 0 25 26"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className="search"
+  >
+    <circle
+      cx="11.2069"
+      cy="10.9135"
+      r="5"
+      stroke="#333333"
+      strokeWidth="2"
+      className="stroke"
+    />
+    <line
+      x1="14.914"
+      y1="14.2063"
+      x2="20.5002"
+      y2="19.7925"
+      stroke="#333333"
+      strokeWidth="2"
+      className="stroke"
+    />
+  </svg>
+);
 
 export default Search;

From 34942daf943384146e0ce52ae29c557bac895473 Mon Sep 17 00:00:00 2001
From: Jessica Boezwinkle <jessboez@MacBook-Pro.local>
Date: Tue, 24 Nov 2020 17:58:25 -0500
Subject: [PATCH 3/3] element typescript updates

---
 .../components/elements/Banner/index.tsx      |  4 +--
 src/admin/components/elements/Banner/types.ts | 16 +++++-----
 .../components/elements/Button/index.tsx      | 10 +++----
 src/admin/components/elements/Button/types.ts | 30 ++++++++++---------
 src/admin/components/elements/Card/types.ts   |  4 +--
 .../elements/ColumnSelector/types.ts          | 12 +++-----
 .../elements/CopyToClipboard/index.tsx        | 19 ++++--------
 .../elements/CopyToClipboard/types.ts         |  6 ++--
 .../elements/DatePicker/DatePicker.tsx        | 10 +++----
 .../components/elements/DatePicker/types.ts   | 30 +++++++++----------
 .../elements/DeleteDocument/types.ts          | 16 ++++------
 .../elements/DuplicateDocument/index.tsx      |  8 ++---
 .../elements/DuplicateDocument/types.ts       |  2 +-
 .../components/elements/Eyebrow/types.ts      |  2 +-
 .../elements/FileDetails/Meta/types.ts        |  6 ++--
 .../components/elements/FileDetails/types.ts  | 10 +++----
 .../elements/GenerateConfirmation/types.ts    |  4 ++-
 .../elements/ListControls/index.tsx           |  4 +--
 .../components/elements/ListControls/types.ts | 16 ++++------
 .../components/elements/Localizer/index.tsx   |  3 +-
 .../components/elements/Localizer/types.ts    |  3 ++
 .../Paginator/ClickableArrow/index.tsx        |  4 +--
 .../Paginator/ClickableArrow/types.ts         |  6 ++--
 .../elements/Paginator/Page/index.tsx         |  6 ++--
 .../elements/Paginator/Page/types.ts          | 10 +++----
 .../components/elements/Paginator/index.tsx   | 14 ++++-----
 .../components/elements/Paginator/types.ts    | 20 ++++++-------
 src/admin/components/elements/Pill/index.tsx  |  8 ++++-
 src/admin/components/elements/Pill/types.ts   | 14 ++++-----
 src/admin/components/elements/Popup/index.tsx | 12 +++++++-
 src/admin/components/elements/Popup/types.ts  | 22 +++++++-------
 .../elements/PreviewButton/types.ts           |  2 +-
 .../components/elements/ReactSelect/index.tsx |  6 ++--
 .../components/elements/ReactSelect/types.ts  | 14 ++++-----
 .../components/elements/RenderTitle/index.tsx |  5 +++-
 .../components/elements/RenderTitle/types.ts  | 10 +++----
 .../elements/SearchFilter/index.tsx           |  4 +--
 .../components/elements/SearchFilter/types.ts |  6 ++--
 .../components/elements/SortColumn/index.tsx  |  2 +-
 .../components/elements/SortColumn/types.ts   |  4 +--
 .../components/elements/SortComplex/types.ts  | 10 +++----
 .../components/elements/Thumbnail/index.tsx   |  7 ++++-
 .../components/elements/Thumbnail/types.ts    |  8 ++---
 .../components/elements/Tooltip/types.ts      |  2 +-
 .../components/elements/UploadCard/types.ts   | 15 ++++------
 .../elements/UploadGallery/types.ts           |  4 +--
 .../components/elements/WhereBuilder/types.ts |  9 ++----
 src/admin/components/elements/need fix        | 12 ++++++++
 48 files changed, 230 insertions(+), 221 deletions(-)
 create mode 100644 src/admin/components/elements/Localizer/types.ts
 create mode 100644 src/admin/components/elements/need fix

diff --git a/src/admin/components/elements/Banner/index.tsx b/src/admin/components/elements/Banner/index.tsx
index 09db2cc69b..e2d73ae9d8 100644
--- a/src/admin/components/elements/Banner/index.tsx
+++ b/src/admin/components/elements/Banner/index.tsx
@@ -11,9 +11,9 @@ const Banner: React.FC<Props> = ({
   className,
   to,
   icon,
-  alignIcon,
+  alignIcon = 'right',
   onClick,
-  type,
+  type = 'default',
 }) => {
   const classes = [
     baseClass,
diff --git a/src/admin/components/elements/Banner/types.ts b/src/admin/components/elements/Banner/types.ts
index cf8efef528..a7e366b31e 100644
--- a/src/admin/components/elements/Banner/types.ts
+++ b/src/admin/components/elements/Banner/types.ts
@@ -1,9 +1,11 @@
+import { MouseEvent } from 'react';
+
 export type Props = {
-  children: React.ReactNode,
-  className: string,
-  icon: React.ReactNode,
-  alignIcon: 'left' | 'right',
-  onClick: () => void,
-  to: string,
-  type: 'error' | 'success' | 'info' | 'default',
+  children?: React.ReactNode,
+  className?: string,
+  icon?: React.ReactNode,
+  alignIcon?: 'left' | 'right',
+  onClick?: (event: MouseEvent) => void,
+  to?: string,
+  type?: 'error' | 'success' | 'info' | 'default',
 }
diff --git a/src/admin/components/elements/Button/index.tsx b/src/admin/components/elements/Button/index.tsx
index befc44b307..88215395c4 100644
--- a/src/admin/components/elements/Button/index.tsx
+++ b/src/admin/components/elements/Button/index.tsx
@@ -39,7 +39,7 @@ const ButtonContents = ({ children, icon }) => {
 const Button: React.FC<Props> = (props) => {
   const {
     className,
-    type,
+    type = 'button',
     el,
     to,
     url,
@@ -47,11 +47,11 @@ const Button: React.FC<Props> = (props) => {
     onClick,
     disabled,
     icon,
-    iconStyle,
-    buttonStyle,
+    iconStyle = 'without-border',
+    buttonStyle = 'primary',
     round,
-    size,
-    iconPosition,
+    size = 'medium',
+    iconPosition = 'right',
   } = props;
 
   const classes = [
diff --git a/src/admin/components/elements/Button/types.ts b/src/admin/components/elements/Button/types.ts
index d9427096af..fe18964cd5 100644
--- a/src/admin/components/elements/Button/types.ts
+++ b/src/admin/components/elements/Button/types.ts
@@ -1,16 +1,18 @@
+import { MouseEvent } from 'react';
+
 export type Props = {
-    className: string,
-    type: 'submit' | 'button',
-    el: 'link' | 'anchor' | undefined,
-    to: string,
-    url: string,
-    children: React.ReactNode,
-    onClick: () => void,
-    disabled: boolean,
-    icon: React.ReactNode | ['chevron' | 'x' | 'plus'],
-    iconStyle: 'with-border' | 'without-border' | 'none',
-    buttonStyle: 'primary' | 'secondary' | 'transparent' | 'error' | 'none' | 'icon-label',
-    round: boolean,
-    size: 'small' | 'medium',
-    iconPosition: 'left' | 'right'
+    className?: string,
+    type?: 'submit' | 'button',
+    el?: 'link' | 'anchor' | undefined,
+    to?: string,
+    url?: string,
+    children?: React.ReactNode,
+    onClick?: (event: MouseEvent) => void,
+    disabled?: boolean,
+    icon?: React.ReactNode | ['chevron' | 'x' | 'plus'],
+    iconStyle?: 'with-border' | 'without-border' | 'none',
+    buttonStyle?: 'primary' | 'secondary' | 'transparent' | 'error' | 'none' | 'icon-label',
+    round?: boolean,
+    size?: 'small' | 'medium',
+    iconPosition?: 'left' | 'right'
 }
diff --git a/src/admin/components/elements/Card/types.ts b/src/admin/components/elements/Card/types.ts
index 965aba676e..016254b24e 100644
--- a/src/admin/components/elements/Card/types.ts
+++ b/src/admin/components/elements/Card/types.ts
@@ -1,5 +1,5 @@
 export type Props = {
   title: string,
-  actions: React.ReactNode,
-  onClick: () => void,
+  actions?: React.ReactNode,
+  onClick?: () => void,
 }
diff --git a/src/admin/components/elements/ColumnSelector/types.ts b/src/admin/components/elements/ColumnSelector/types.ts
index 426569ea3c..e44d71d2dd 100644
--- a/src/admin/components/elements/ColumnSelector/types.ts
+++ b/src/admin/components/elements/ColumnSelector/types.ts
@@ -1,10 +1,6 @@
+import { Collection } from '../../../../collections/config/types';
+
 export type Props = {
-  collection: {
-    fields: [],
-    admin: {
-      defaultColumns: string[],
-      useAsTitle: string,
-    },
-  },
-  handleChange: () => void,
+  collection: Collection,
+  handleChange: (columns) => void,
 }
diff --git a/src/admin/components/elements/CopyToClipboard/index.tsx b/src/admin/components/elements/CopyToClipboard/index.tsx
index d15a111674..2a07265d53 100644
--- a/src/admin/components/elements/CopyToClipboard/index.tsx
+++ b/src/admin/components/elements/CopyToClipboard/index.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useState, useRef } from 'react';
-import PropTypes from 'prop-types';
 import Copy from '../../icons/Copy';
 import Tooltip from '../Tooltip';
 import { Props } from './types';
@@ -8,7 +7,11 @@ import './index.scss';
 
 const baseClass = 'copy-to-clipboard';
 
-const CopyToClipboard: React.FC<Props> = ({ value, defaultMessage, successMessage }) => {
+const CopyToClipboard: React.FC<Props> = ({
+  value,
+  defaultMessage = 'copy',
+  successMessage = 'copied',
+}) => {
   const ref = useRef(null);
   const [copied, setCopied] = useState(false);
   const [hovered, setHovered] = useState(false);
@@ -61,16 +64,4 @@ const CopyToClipboard: React.FC<Props> = ({ value, defaultMessage, successMessag
   return null;
 };
 
-CopyToClipboard.defaultProps = {
-  value: '',
-  defaultMessage: 'Copy',
-  successMessage: 'Copied',
-};
-
-CopyToClipboard.propTypes = {
-  value: PropTypes.string,
-  defaultMessage: PropTypes.string,
-  successMessage: PropTypes.string,
-};
-
 export default CopyToClipboard;
diff --git a/src/admin/components/elements/CopyToClipboard/types.ts b/src/admin/components/elements/CopyToClipboard/types.ts
index 22b820d9e1..93be9be5db 100644
--- a/src/admin/components/elements/CopyToClipboard/types.ts
+++ b/src/admin/components/elements/CopyToClipboard/types.ts
@@ -1,5 +1,5 @@
 export type Props = {
-  value: string,
-  defaultMessage: string,
-  successMessage: string,
+  value?: string,
+  defaultMessage?: string,
+  successMessage?: string,
 }
diff --git a/src/admin/components/elements/DatePicker/DatePicker.tsx b/src/admin/components/elements/DatePicker/DatePicker.tsx
index 2561bec7b5..798f622a68 100644
--- a/src/admin/components/elements/DatePicker/DatePicker.tsx
+++ b/src/admin/components/elements/DatePicker/DatePicker.tsx
@@ -11,15 +11,15 @@ const baseClass = 'date-time-picker';
 const DateTime: React.FC<Props> = (props) => {
   const {
     inputDateTimeFormat,
-    useDate,
+    useDate = true,
     minDate,
     maxDate,
-    monthsShown,
-    useTime,
+    monthsShown = 1,
+    useTime = true,
     minTime,
     maxTime,
-    timeIntervals,
-    timeFormat,
+    timeIntervals = 30,
+    timeFormat = 'h:mm aa',
     placeholder: placeholderText,
     value,
     onChange,
diff --git a/src/admin/components/elements/DatePicker/types.ts b/src/admin/components/elements/DatePicker/types.ts
index 987fdc878b..36c9045263 100644
--- a/src/admin/components/elements/DatePicker/types.ts
+++ b/src/admin/components/elements/DatePicker/types.ts
@@ -1,18 +1,18 @@
 export type Props = {
-  placeholder: string,
-  useDate: boolean,
-  minDate: Date,
-  maxDate: Date,
-  monthsShown: number,
-  inputDateTimeFormat: string,
-  useTime: boolean,
-  minTime: Date,
-  maxTime: Date,
-  timeIntervals: number,
-  timeFormat: string,
-  value: Date | string,
-  onChange: () => void,
-  admin: {
-    readOnly: boolean,
+  placeholder?: string,
+  useDate?: boolean,
+  minDate?: Date,
+  maxDate?: Date,
+  monthsShown?: number,
+  inputDateTimeFormat?: string,
+  useTime?: boolean,
+  minTime?: Date,
+  maxTime?: Date,
+  timeIntervals?: number,
+  timeFormat?: string,
+  value?: Date | string,
+  onChange?: () => void,
+  admin?: {
+    readOnly?: boolean,
   }
 }
diff --git a/src/admin/components/elements/DeleteDocument/types.ts b/src/admin/components/elements/DeleteDocument/types.ts
index 5ac01c0615..80d10a6b5d 100644
--- a/src/admin/components/elements/DeleteDocument/types.ts
+++ b/src/admin/components/elements/DeleteDocument/types.ts
@@ -1,13 +1,7 @@
+import { Collection } from '../../../../collections/config/types';
+
 export type Props = {
-  collection: {
-    admin: {
-      useAsTitle: string,
-    },
-    slug: string,
-    labels: {
-      singular: string,
-    },
-  }
-  id: string,
-  title: string,
+  collection?: Collection,
+  id?: string,
+  title?: string,
 }
diff --git a/src/admin/components/elements/DuplicateDocument/index.tsx b/src/admin/components/elements/DuplicateDocument/index.tsx
index 65402605ae..288d721c46 100644
--- a/src/admin/components/elements/DuplicateDocument/index.tsx
+++ b/src/admin/components/elements/DuplicateDocument/index.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
-import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
+import { Props } from './types';
 import { useConfig } from '../../providers/Config';
 import Button from '../Button';
 import { useForm } from '../../forms/Form/context';
@@ -9,7 +9,7 @@ import './index.scss';
 
 const baseClass = 'duplicate';
 
-const Duplicate = ({ slug }) => {
+const Duplicate: React.FC<Props> = ({ slug }) => {
   const { push } = useHistory();
   const { getData } = useForm();
   const { routes: { admin } } = useConfig();
@@ -36,8 +36,4 @@ const Duplicate = ({ slug }) => {
   );
 };
 
-Duplicate.propTypes = {
-  slug: PropTypes.string.isRequired,
-};
-
 export default Duplicate;
diff --git a/src/admin/components/elements/DuplicateDocument/types.ts b/src/admin/components/elements/DuplicateDocument/types.ts
index daededa188..ac7846166d 100644
--- a/src/admin/components/elements/DuplicateDocument/types.ts
+++ b/src/admin/components/elements/DuplicateDocument/types.ts
@@ -1,3 +1,3 @@
 export type Props = {
-
+ slug: string,
 }
diff --git a/src/admin/components/elements/Eyebrow/types.ts b/src/admin/components/elements/Eyebrow/types.ts
index 284be2b0d3..0ba08a339a 100644
--- a/src/admin/components/elements/Eyebrow/types.ts
+++ b/src/admin/components/elements/Eyebrow/types.ts
@@ -1,3 +1,3 @@
 export type Props = {
-  actions: React.ReactNode
+  actions?: React.ReactNode
 }
diff --git a/src/admin/components/elements/FileDetails/Meta/types.ts b/src/admin/components/elements/FileDetails/Meta/types.ts
index 2df66c242d..6aeab1066c 100644
--- a/src/admin/components/elements/FileDetails/Meta/types.ts
+++ b/src/admin/components/elements/FileDetails/Meta/types.ts
@@ -3,7 +3,7 @@ export type Props = {
   mimeType: string,
   filesize: number,
   staticURL: string,
-  width: number,
-  height: number,
-  sizes: unknown,
+  width?: number,
+  height?: number,
+  sizes?: unknown,
 }
diff --git a/src/admin/components/elements/FileDetails/types.ts b/src/admin/components/elements/FileDetails/types.ts
index d2188b2c10..b556628262 100644
--- a/src/admin/components/elements/FileDetails/types.ts
+++ b/src/admin/components/elements/FileDetails/types.ts
@@ -3,9 +3,9 @@ export type Props = {
   mimeType: string,
   filesize: number,
   staticURL: string,
-  width: number,
-  height: number,
-  sizes: unknown,
-  adminThumbnail: string,
-  handleRemove: () => void,
+  width?: number,
+  height?: number,
+  sizes?: unknown,
+  adminThumbnail?: string,
+  handleRemove?: () => void,
 }
diff --git a/src/admin/components/elements/GenerateConfirmation/types.ts b/src/admin/components/elements/GenerateConfirmation/types.ts
index 60e2cfed8d..c22f197100 100644
--- a/src/admin/components/elements/GenerateConfirmation/types.ts
+++ b/src/admin/components/elements/GenerateConfirmation/types.ts
@@ -1,4 +1,6 @@
+import { createTrue } from 'typescript';
+
 export type Props = {
   setKey: () => void,
-  highlightField: () => void,
+  highlightField: (Boolean) => void,
 }
diff --git a/src/admin/components/elements/ListControls/index.tsx b/src/admin/components/elements/ListControls/index.tsx
index b14a9c7ea0..47807b3180 100644
--- a/src/admin/components/elements/ListControls/index.tsx
+++ b/src/admin/components/elements/ListControls/index.tsx
@@ -15,8 +15,8 @@ const ListControls: React.FC<Props> = (props) => {
   const {
     handleChange,
     collection,
-    enableColumns,
-    enableSort,
+    enableColumns = true,
+    enableSort = false,
     setSort,
     collection: {
       fields,
diff --git a/src/admin/components/elements/ListControls/types.ts b/src/admin/components/elements/ListControls/types.ts
index e497e606a8..f63be97f9c 100644
--- a/src/admin/components/elements/ListControls/types.ts
+++ b/src/admin/components/elements/ListControls/types.ts
@@ -1,13 +1,9 @@
+import { Collection } from '../../../../collections/config/types';
+
 export type Props = {
-  enableColumns: boolean,
-  enableSort: boolean,
+  enableColumns?: boolean,
+  enableSort?: boolean,
   setSort: () => void,
-  collection: {
-    admin: {
-      useAsTitle: string,
-      defaultColumns: string[],
-    },
-    fields: []
-  }
-  handleChange: () => void,
+  collection: Collection,
+  handleChange: (newState) => void,
 }
diff --git a/src/admin/components/elements/Localizer/index.tsx b/src/admin/components/elements/Localizer/index.tsx
index abec375694..21f7102b52 100644
--- a/src/admin/components/elements/Localizer/index.tsx
+++ b/src/admin/components/elements/Localizer/index.tsx
@@ -5,12 +5,13 @@ import { useConfig } from '../../providers/Config';
 import { useLocale } from '../../utilities/Locale';
 import { useSearchParams } from '../../utilities/SearchParams';
 import Popup from '../Popup';
+import { Props } from './types';
 
 import './index.scss';
 
 const baseClass = 'localizer';
 
-const Localizer = () => {
+const Localizer: React.FC<Props> = () => {
   const { localization } = useConfig();
   const locale = useLocale();
   const searchParams = useSearchParams();
diff --git a/src/admin/components/elements/Localizer/types.ts b/src/admin/components/elements/Localizer/types.ts
new file mode 100644
index 0000000000..daededa188
--- /dev/null
+++ b/src/admin/components/elements/Localizer/types.ts
@@ -0,0 +1,3 @@
+export type Props = {
+
+}
diff --git a/src/admin/components/elements/Paginator/ClickableArrow/index.tsx b/src/admin/components/elements/Paginator/ClickableArrow/index.tsx
index eb9e5332c4..4910b2d622 100644
--- a/src/admin/components/elements/Paginator/ClickableArrow/index.tsx
+++ b/src/admin/components/elements/Paginator/ClickableArrow/index.tsx
@@ -10,8 +10,8 @@ const baseClass = 'clickable-arrow';
 const ClickableArrow: React.FC<Props> = (props) => {
   const {
     updatePage,
-    isDisabled,
-    direction,
+    isDisabled = false,
+    direction = 'right',
   } = props;
 
   const classes = [
diff --git a/src/admin/components/elements/Paginator/ClickableArrow/types.ts b/src/admin/components/elements/Paginator/ClickableArrow/types.ts
index 0f18e35cf2..3edeff0c33 100644
--- a/src/admin/components/elements/Paginator/ClickableArrow/types.ts
+++ b/src/admin/components/elements/Paginator/ClickableArrow/types.ts
@@ -1,5 +1,5 @@
 export type Props = {
-  updatePage: () => void,
-  isDisabled: boolean,
-  direction: 'right' | 'left',
+  updatePage?: () => void,
+  isDisabled?: boolean,
+  direction?: 'right' | 'left',
 }
diff --git a/src/admin/components/elements/Paginator/Page/index.tsx b/src/admin/components/elements/Paginator/Page/index.tsx
index af781f67b3..6ad04ddb6a 100644
--- a/src/admin/components/elements/Paginator/Page/index.tsx
+++ b/src/admin/components/elements/Paginator/Page/index.tsx
@@ -4,11 +4,11 @@ import { Props } from './types';
 const baseClass = 'paginator__page';
 
 const Page: React.FC<Props> = ({
-  page,
+  page = 1,
   isCurrent,
   updatePage,
-  isFirstPage,
-  isLastPage,
+  isFirstPage = false,
+  isLastPage = false,
 }) => {
   const classes = [
     baseClass,
diff --git a/src/admin/components/elements/Paginator/Page/types.ts b/src/admin/components/elements/Paginator/Page/types.ts
index 110d728a3f..4d18b8ef41 100644
--- a/src/admin/components/elements/Paginator/Page/types.ts
+++ b/src/admin/components/elements/Paginator/Page/types.ts
@@ -1,7 +1,7 @@
 export type Props = {
-  page: number,
-  isCurrent: boolean,
-  updatePage: () => void,
-  isFirstPage: boolean,
-  isLastPage: boolean,
+  page?: number,
+  isCurrent?: boolean,
+  updatePage?: (page) => void,
+  isFirstPage?: boolean,
+  isLastPage?: boolean,
 }
diff --git a/src/admin/components/elements/Paginator/index.tsx b/src/admin/components/elements/Paginator/index.tsx
index c7807bcc45..2360ad89ac 100644
--- a/src/admin/components/elements/Paginator/index.tsx
+++ b/src/admin/components/elements/Paginator/index.tsx
@@ -22,14 +22,14 @@ const Pagination: React.FC<Props> = (props) => {
   const location = useLocation();
 
   const {
-    totalPages,
+    totalPages = null,
     page: currentPage,
-    hasPrevPage,
-    hasNextPage,
-    prevPage,
-    nextPage,
-    numberOfNeighbors,
-    disableHistoryChange,
+    hasPrevPage = false,
+    hasNextPage = false,
+    prevPage = null,
+    nextPage = null,
+    numberOfNeighbors = 1,
+    disableHistoryChange = false,
     onChange,
   } = props;
 
diff --git a/src/admin/components/elements/Paginator/types.ts b/src/admin/components/elements/Paginator/types.ts
index b4a1f2487a..0a1a192f93 100644
--- a/src/admin/components/elements/Paginator/types.ts
+++ b/src/admin/components/elements/Paginator/types.ts
@@ -1,12 +1,12 @@
 export type Props = {
-  limit: number,
-  totalPages: number,
-  page: number,
-  hasPrevPage: boolean,
-  hasNextPage: boolean,
-  prevPage: number,
-  nextPage: number,
-  numberOfNeighbors: number,
-  disableHistoryChange: boolean,
-  onChange: () => void,
+  limit?: number,
+  totalPages?: number,
+  page?: number,
+  hasPrevPage?: boolean,
+  hasNextPage?: boolean,
+  prevPage?: number,
+  nextPage?: number,
+  numberOfNeighbors?: number,
+  disableHistoryChange?: boolean,
+  onChange?: (page) => void,
 }
diff --git a/src/admin/components/elements/Pill/index.tsx b/src/admin/components/elements/Pill/index.tsx
index 9eda95e12b..4475fdf4dd 100644
--- a/src/admin/components/elements/Pill/index.tsx
+++ b/src/admin/components/elements/Pill/index.tsx
@@ -7,7 +7,13 @@ import './index.scss';
 const baseClass = 'pill';
 
 const Pill: React.FC<Props> = ({
-  children, className, to, icon, alignIcon, onClick, pillStyle,
+  children,
+  className,
+  to,
+  icon,
+  alignIcon = 'right',
+  onClick,
+  pillStyle = 'light',
 }) => {
   const classes = [
     baseClass,
diff --git a/src/admin/components/elements/Pill/types.ts b/src/admin/components/elements/Pill/types.ts
index dd8918ae62..6bd5fab002 100644
--- a/src/admin/components/elements/Pill/types.ts
+++ b/src/admin/components/elements/Pill/types.ts
@@ -1,9 +1,9 @@
 export type Props = {
-  children: React.ReactNode,
-  className: string,
-  to: string,
-  icon: React.ReactNode,
-  alignIcon: 'left' | 'right',
-  onClick: () => void,
-  pillStyle: 'light' | 'dark' | 'light-gray',
+  children?: React.ReactNode,
+  className?: string,
+  to?: string,
+  icon?: React.ReactNode,
+  alignIcon?: 'left' | 'right',
+  onClick?: (onClick) => void,
+  pillStyle?: 'light' | 'dark' | 'light-gray',
 }
diff --git a/src/admin/components/elements/Popup/index.tsx b/src/admin/components/elements/Popup/index.tsx
index 4ab54c5737..3c69e69aea 100644
--- a/src/admin/components/elements/Popup/index.tsx
+++ b/src/admin/components/elements/Popup/index.tsx
@@ -12,7 +12,17 @@ const baseClass = 'popup';
 
 const Popup: React.FC<Props> = (props) => {
   const {
-    render, align, size, color, button, buttonType, children, showOnHover, horizontalAlign, initActive, onToggleOpen,
+    render,
+    align = 'center',
+    size = 'small',
+    color = 'light',
+    button,
+    buttonType = 'default',
+    children,
+    showOnHover = false,
+    horizontalAlign = 'left',
+    initActive = false,
+    onToggleOpen,
   } = props;
 
   const buttonRef = useRef(null);
diff --git a/src/admin/components/elements/Popup/types.ts b/src/admin/components/elements/Popup/types.ts
index f6413e2c58..84d6a26776 100644
--- a/src/admin/components/elements/Popup/types.ts
+++ b/src/admin/components/elements/Popup/types.ts
@@ -1,13 +1,13 @@
 export type Props = {
-    render: () => void,
-    children: React.ReactNode,
-    align: 'left' | 'center' | 'right',
-    horizontalAlign: 'left' | 'center' | 'right',
-    size: 'small' | 'large' | 'wide',
-    color: 'light' | 'dark',
-    buttonType: 'default' | 'custom',
-    button: React.ReactNode,
-    showOnHover: boolean,
-    initActive: boolean,
-    onToggleOpen: () => void,
+    render?: (any) => void,
+    children?: React.ReactNode,
+    align?: 'left' | 'center' | 'right',
+    horizontalAlign?: 'left' | 'center' | 'right',
+    size?: 'small' | 'large' | 'wide',
+    color?: 'light' | 'dark',
+    buttonType?: 'default' | 'custom',
+    button?: React.ReactNode,
+    showOnHover?: boolean,
+    initActive?: boolean,
+    onToggleOpen?: () => void,
 }
diff --git a/src/admin/components/elements/PreviewButton/types.ts b/src/admin/components/elements/PreviewButton/types.ts
index 51aa60089e..d397391e6a 100644
--- a/src/admin/components/elements/PreviewButton/types.ts
+++ b/src/admin/components/elements/PreviewButton/types.ts
@@ -1,3 +1,3 @@
 export type Props = {
-  generatePreviewURL: (fields: unknown, token: string) => string
+  generatePreviewURL?: (fields: unknown, token: string) => string
 }
diff --git a/src/admin/components/elements/ReactSelect/index.tsx b/src/admin/components/elements/ReactSelect/index.tsx
index 59219e5038..b7e992d05f 100644
--- a/src/admin/components/elements/ReactSelect/index.tsx
+++ b/src/admin/components/elements/ReactSelect/index.tsx
@@ -6,12 +6,12 @@ import './index.scss';
 
 const ReactSelect: React.FC<Props> = (props) => {
   const {
-    showError,
+    showError = false,
     options,
-    isMulti,
+    isMulti = false,
     onChange,
     value,
-    disabled,
+    disabled = false,
     formatValue,
   } = props;
 
diff --git a/src/admin/components/elements/ReactSelect/types.ts b/src/admin/components/elements/ReactSelect/types.ts
index e905a1c2ad..883c959b53 100644
--- a/src/admin/components/elements/ReactSelect/types.ts
+++ b/src/admin/components/elements/ReactSelect/types.ts
@@ -1,9 +1,9 @@
 export type Props = {
-  value: string | [],
-  onChange: () => void,
-  disabled: boolean,
-  showError: boolean,
-  formatValue: () => void,
-  options: string[] | { value: string, label: string }[],
-  isMulti: boolean,
+  value?: string | [],
+  onChange?: (formatValue) => void,
+  disabled?: boolean,
+  showError?: boolean,
+  formatValue?: () => void,
+  options?: string[] | { value: string, label: string }[],
+  isMulti?: boolean,
 }
diff --git a/src/admin/components/elements/RenderTitle/index.tsx b/src/admin/components/elements/RenderTitle/index.tsx
index 3910bd448a..482270f703 100644
--- a/src/admin/components/elements/RenderTitle/index.tsx
+++ b/src/admin/components/elements/RenderTitle/index.tsx
@@ -8,7 +8,10 @@ const baseClass = 'render-title';
 
 const RenderTitle : React.FC<Props> = (props) => {
   const {
-    useAsTitle, title: titleFromProps, data, fallback,
+    useAsTitle,
+    title: titleFromProps,
+    data,
+    fallback = '[untitled]',
   } = props;
 
   const titleFromForm = useTitle(useAsTitle);
diff --git a/src/admin/components/elements/RenderTitle/types.ts b/src/admin/components/elements/RenderTitle/types.ts
index 18d72514e7..070126c965 100644
--- a/src/admin/components/elements/RenderTitle/types.ts
+++ b/src/admin/components/elements/RenderTitle/types.ts
@@ -1,8 +1,8 @@
 export type Props = {
-  useAsTitle: string,
-  data: {
-    id: string,
+  useAsTitle?: string,
+  data?: {
+    id?: string,
   },
-  title:string,
-  fallback: string,
+  title?: string,
+  fallback?: string,
 }
diff --git a/src/admin/components/elements/SearchFilter/index.tsx b/src/admin/components/elements/SearchFilter/index.tsx
index c1a059db7a..31d24223fd 100644
--- a/src/admin/components/elements/SearchFilter/index.tsx
+++ b/src/admin/components/elements/SearchFilter/index.tsx
@@ -9,8 +9,8 @@ const baseClass = 'search-filter';
 
 const SearchFilter: React.FC<Props> = (props) => {
   const {
-    fieldName,
-    fieldLabel,
+    fieldName = 'id',
+    fieldLabel = 'ID',
     handleChange,
   } = props;
 
diff --git a/src/admin/components/elements/SearchFilter/types.ts b/src/admin/components/elements/SearchFilter/types.ts
index 2e5e7e0a85..a17f8690c5 100644
--- a/src/admin/components/elements/SearchFilter/types.ts
+++ b/src/admin/components/elements/SearchFilter/types.ts
@@ -1,5 +1,5 @@
 export type Props = {
-  fieldName: string,
-  fieldLabel: string,
-  handleChange: () => void,
+  fieldName?: string,
+  fieldLabel?: string,
+  handleChange: (any) => void,
 }
diff --git a/src/admin/components/elements/SortColumn/index.tsx b/src/admin/components/elements/SortColumn/index.tsx
index fcd39ae97e..039c72d0a2 100644
--- a/src/admin/components/elements/SortColumn/index.tsx
+++ b/src/admin/components/elements/SortColumn/index.tsx
@@ -9,7 +9,7 @@ const baseClass = 'sort-column';
 
 const SortColumn: React.FC<Props> = (props) => {
   const {
-    label, handleChange, name, disable,
+    label, handleChange, name, disable = false,
   } = props;
   const [sort, setSort] = useState(null);
 
diff --git a/src/admin/components/elements/SortColumn/types.ts b/src/admin/components/elements/SortColumn/types.ts
index dda524dc1e..1629872222 100644
--- a/src/admin/components/elements/SortColumn/types.ts
+++ b/src/admin/components/elements/SortColumn/types.ts
@@ -1,6 +1,6 @@
 export type Props = {
   label: string,
-  handleChange: () => void,
+  handleChange: (sort) => void,
   name: string,
-  disable: boolean,
+  disable?: boolean,
 }
diff --git a/src/admin/components/elements/SortComplex/types.ts b/src/admin/components/elements/SortComplex/types.ts
index 035e3bc627..62da384c23 100644
--- a/src/admin/components/elements/SortComplex/types.ts
+++ b/src/admin/components/elements/SortComplex/types.ts
@@ -1,8 +1,6 @@
+import { Collection } from '../../../../collections/config/types';
+
 export type Props = {
-  handleChange: () => void,
-  collection: {
-    fields: [],
-    labels: {
-      plural: string,
-  }},
+  handleChange: (any) => void,
+  collection: Collection,
 }
diff --git a/src/admin/components/elements/Thumbnail/index.tsx b/src/admin/components/elements/Thumbnail/index.tsx
index 37da820223..94e70c2d97 100644
--- a/src/admin/components/elements/Thumbnail/index.tsx
+++ b/src/admin/components/elements/Thumbnail/index.tsx
@@ -10,7 +10,12 @@ const baseClass = 'thumbnail';
 
 const Thumbnail: React.FC<Props> = (props) => {
   const {
-    filename, mimeType, staticURL, sizes, adminThumbnail, size,
+    filename,
+    mimeType,
+    staticURL,
+    sizes = 'medium',
+    adminThumbnail,
+    size,
   } = props;
 
   const { serverURL } = useConfig();
diff --git a/src/admin/components/elements/Thumbnail/types.ts b/src/admin/components/elements/Thumbnail/types.ts
index c83aa3b2bc..b848570020 100644
--- a/src/admin/components/elements/Thumbnail/types.ts
+++ b/src/admin/components/elements/Thumbnail/types.ts
@@ -1,8 +1,8 @@
 export type Props = {
   filename: string,
-  sizes: unknown,
-  adminThumbnail: string,
-  mimeType: string,
+  sizes?: unknown,
+  adminThumbnail?: string,
+  mimeType?: string,
   staticURL: string,
-  size: 'small' | 'medium' | 'large' | 'expand',
+  size?: 'small' | 'medium' | 'large' | 'expand',
 }
diff --git a/src/admin/components/elements/Tooltip/types.ts b/src/admin/components/elements/Tooltip/types.ts
index e174e01329..dd929c4841 100644
--- a/src/admin/components/elements/Tooltip/types.ts
+++ b/src/admin/components/elements/Tooltip/types.ts
@@ -1,4 +1,4 @@
 export type Props = {
-  className: string,
+  className?: string,
   children: React.ReactNode,
 }
diff --git a/src/admin/components/elements/UploadCard/types.ts b/src/admin/components/elements/UploadCard/types.ts
index e058c6a660..5178b28c29 100644
--- a/src/admin/components/elements/UploadCard/types.ts
+++ b/src/admin/components/elements/UploadCard/types.ts
@@ -1,15 +1,10 @@
+import { Collection } from '../../../../collections/config/types';
+
 export type Props = {
-  collection: {
-    labels: {
-      singular: string,
-    },
-    upload: {
-      adminThumbnail: string,
-      staticURL: string,
-    }},
+  collection: Collection,
   id: string,
   filename: string,
   mimeType: string,
-  sizes: unknown,
-  onClick: () => void,
+  sizes?: unknown,
+  onClick?: () => void,
 }
diff --git a/src/admin/components/elements/UploadGallery/types.ts b/src/admin/components/elements/UploadGallery/types.ts
index 02d19f634b..ca42a34bab 100644
--- a/src/admin/components/elements/UploadGallery/types.ts
+++ b/src/admin/components/elements/UploadGallery/types.ts
@@ -1,5 +1,5 @@
 export type Props = {
-    docs: [],
+    docs?: [],
     collection: unknown,
-    onCardClick: () => void,
+    onCardClick: (doc) => void,
 }
diff --git a/src/admin/components/elements/WhereBuilder/types.ts b/src/admin/components/elements/WhereBuilder/types.ts
index 033df8d634..f7e1e15d0f 100644
--- a/src/admin/components/elements/WhereBuilder/types.ts
+++ b/src/admin/components/elements/WhereBuilder/types.ts
@@ -1,9 +1,6 @@
+import { Collection } from '../../../../collections/config/types';
+
 export type Props = {
   handleChange: () => void,
-  collection: {
-    fields: [],
-    labels: {
-      plural: string,
-    },
-  },
+  collection: Collection,
 }
diff --git a/src/admin/components/elements/need fix b/src/admin/components/elements/need fix
new file mode 100644
index 0000000000..2a3aeb3a0e
--- /dev/null
+++ b/src/admin/components/elements/need fix	
@@ -0,0 +1,12 @@
+date picker
+handle remove
+file details
+paginator
+pill
+react select
+search filter
+sort complex
+table
+thumbnail
+upload gallery
+whereBuilder