elements to TS

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;

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',
+}

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;

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'
+}

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;

src/admin/components/elements/Card/types.ts

@@ -0,0 +1,5 @@
+export type Props = {
+  title: string,
+  actions: React.ReactNode,
+  onClick: () => void,
+}

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;

src/admin/components/elements/ColumnSelector/types.ts

@@ -0,0 +1,10 @@
+export type Props = {
+  collection: {
+    fields: [],
+    admin: {
+      defaultColumns: string[],
+      useAsTitle: string,
+    },
+  },
+  handleChange: () => void,
+}

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);

src/admin/components/elements/CopyToClipboard/types.ts

@@ -0,0 +1,5 @@
+export type Props = {
+  value: string,
+  defaultMessage: string,
+  successMessage: string,
+}

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;

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,
+  }
+}

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;

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,
+}

src/admin/components/elements/DuplicateDocument/types.ts

@@ -0,0 +1,3 @@
+export type Props = {
+
+}

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>
 );

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;

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,
+}

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;

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,
+}

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;

src/admin/components/elements/GenerateConfirmation/types.ts

@@ -0,0 +1,4 @@
+export type Props = {
+  setKey: () => void,
+  highlightField: () => void,
+}

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;

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,
+}

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;

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;

src/admin/components/elements/Paginator/ClickableArrow/types.ts

@@ -0,0 +1,5 @@
+export type Props = {
+  updatePage: () => void,
+  isDisabled: boolean,
+  direction: 'right' | 'left',
+}

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;

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,
+}

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;

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,
-};

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,
+}

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;

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',
+}

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;

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,
+}

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;

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,
+}

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;

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,
+}

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;

src/admin/components/elements/RenderTitle/types.ts

@@ -0,0 +1,8 @@
+export type Props = {
+  useAsTitle: string,
+  data: {
+    id: string,
+  },
+  title:string,
+  fallback: string,
+}

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;

src/admin/components/elements/SearchFilter/types.ts

@@ -0,0 +1,5 @@
+export type Props = {
+  fieldName: string,
+  fieldLabel: string,
+  handleChange: () => void,
+}

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;

src/admin/components/elements/SortColumn/types.ts

@@ -0,0 +1,6 @@
+export type Props = {
+  label: string,
+  handleChange: () => void,
+  name: string,
+  disable: boolean,
+}

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;

src/admin/components/elements/SortComplex/types.ts

@@ -0,0 +1,8 @@
+export type Props = {
+  handleChange: () => void,
+  collection: {
+    fields: [],
+    labels: {
+      plural: string,
+  }},
+}

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;

src/admin/components/elements/Table/types.ts

@@ -0,0 +1,10 @@
+export type Props = {
+  columns: {
+      accessor: string,
+      components: {
+        Heading: React.ReactNode,
+        renderCell: () => void,
+      },
+    }[],
+  data: []
+}

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;

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',
+}

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;

src/admin/components/elements/Tooltip/types.ts

@@ -0,0 +1,4 @@
+export type Props = {
+  className: string,
+  children: React.ReactNode,
+}

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;

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,
+}

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;

src/admin/components/elements/UploadGallery/types.ts

@@ -0,0 +1,5 @@
+export type Props = {
+    docs: [],
+    collection: unknown,
+    onCardClick: () => void,
+}

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;

src/admin/components/elements/WhereBuilder/Condition/Date/types.ts

@@ -0,0 +1,4 @@
+export type Props = {
+  onChange: () => void,
+  value: Date,
+}

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;

src/admin/components/elements/WhereBuilder/Condition/Number/types.ts

@@ -0,0 +1,4 @@
+export type Props = {
+  onChange: () => void,
+  value: Date,
+}

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;

src/admin/components/elements/WhereBuilder/Condition/Text/types.ts

@@ -0,0 +1,4 @@
+export type Props = {
+  onChange: () => void,
+  value: Date,
+}

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;

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,
+}

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;

src/admin/components/elements/WhereBuilder/types.ts

@@ -0,0 +1,9 @@
+export type Props = {
+  handleChange: () => void,
+  collection: {
+    fields: [],
+    labels: {
+      plural: string,
+    },
+  },
+}

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;

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()}`);
 

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"

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: {

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: {

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;