merges admin-types and adds asset types

src/admin/assets/assets.d.ts

@@ -0,0 +1,22 @@
+declare module '*.svg' {
+  import React = require('react');
+
+  export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>;
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.png' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.json' {
+  const content: string;
+  export default content;
+}

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 = 'right',
+  onClick,
+  type = 'default',
 }) => {
   const classes = [
     baseClass,
@@ -48,24 +54,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,11 @@
+import { MouseEvent } from 'react';
+
+export type Props = {
+  children?: React.ReactNode,
+  className?: string,
+  icon?: React.ReactNode,
+  alignIcon?: 'left' | 'right',
+  onClick?: (event: MouseEvent) => 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,20 +36,10 @@ 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,
+    type = 'button',
     el,
     to,
     url,
@@ -57,11 +47,11 @@ const Button = (props) => {
     onClick,
     disabled,
     icon,
-    iconStyle,
-    buttonStyle,
+    iconStyle = 'without-border',
+    buttonStyle = 'primary',
     round,
-    size,
-    iconPosition,
+    size = 'medium',
+    iconPosition = 'right',
   } = props;
 
   const classes = [
@@ -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,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?: (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'
+}

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,6 @@
+import { Collection } from '../../../../collections/config/types';
+
+export type Props = {
+  collection: Collection,
+  handleChange: (columns) => void,
+}

src/admin/components/elements/CopyToClipboard/index.tsx

@@ -1,13 +1,17 @@
 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 = 'copy',
+  successMessage = 'copied',
+}) => {
   const ref = useRef(null);
   const [copied, setCopied] = useState(false);
   const [hovered, setHovered] = useState(false);
@@ -60,16 +64,4 @@ const CopyToClipboard = ({ value, defaultMessage, successMessage }) => {
   return null;
 };
 
-CopyToClipboard.defaultProps = {
-  value: '',
-  defaultMessage: 'Copy',
-  successMessage: 'Copied',
-};
-
-CopyToClipboard.propTypes = {
-  value: PropTypes.string,
-  defaultMessage: PropTypes.string,
-  successMessage: PropTypes.string,
-};
-
 export default CopyToClipboard;

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,25 +1,25 @@
 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,
+    useDate = true,
     minDate,
     maxDate,
-    monthsShown,
-    useTime,
+    monthsShown = 1,
+    useTime = true,
     minTime,
     maxTime,
-    timeIntervals,
-    timeFormat,
+    timeIntervals = 30,
+    timeFormat = 'h:mm aa',
     placeholder: placeholderText,
     value,
     onChange,
@@ -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,7 @@
+import { Collection } from '../../../../collections/config/types';
+
+export type Props = {
+  collection?: Collection,
+  id?: string,
+  title?: string,
+}

src/admin/components/elements/DuplicateDocument/index.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
-import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 import { useConfig } from '@payloadcms/config-provider';
+import { Props } from './types';
 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;

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

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

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;

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

@@ -0,0 +1,3 @@
+export type Props = {
+  actions?: React.ReactNode
+}

src/admin/components/elements/FileDetails/Meta/index.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { useConfig } from '@payloadcms/config-provider';
 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,6 @@
+import { createTrue } from 'typescript';
+
+export type Props = {
+  setKey: () => void,
+  highlightField: (Boolean) => void,
+}

src/admin/components/elements/ListControls/index.tsx

@@ -1,22 +1,22 @@
 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,
-    enableColumns,
-    enableSort,
+    enableColumns = true,
+    enableSort = false,
     setSort,
     collection: {
       fields,
@@ -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,9 @@
+import { Collection } from '../../../../collections/config/types';
+
+export type Props = {
+  enableColumns?: boolean,
+  enableSort?: boolean,
+  setSort: () => void,
+  collection: Collection,
+  handleChange: (newState) => 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/Localizer/index.tsx

@@ -5,12 +5,13 @@ import { useConfig } from '@payloadcms/config-provider';
 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();

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

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

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,11 +7,11 @@ import './index.scss';
 
 const baseClass = 'clickable-arrow';
 
-const ClickableArrow = (props) => {
+const ClickableArrow: React.FC<Props> = (props) => {
   const {
     updatePage,
-    isDisabled,
-    direction,
+    isDisabled = false,
+    direction = 'right',
   } = props;
 
   const classes = [
@@ -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 = 1,
+  isCurrent,
+  updatePage,
+  isFirstPage = false,
+  isLastPage = false,
 }) => {
   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?: (page) => 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,19 +17,19 @@ const nodeTypes = {
 
 const baseClass = 'paginator';
 
-const Pagination = (props) => {
+const Pagination: React.FC<Props> = (props) => {
   const history = useHistory();
   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;
 
@@ -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?: (page) => void,
+}

src/admin/components/elements/Pill/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 = 'pill';
 
-const Pill = ({
-  children, className, to, icon, alignIcon, onClick, pillStyle,
+const Pill: React.FC<Props> = ({
+  children,
+  className,
+  to,
+  icon,
+  alignIcon = 'right',
+  onClick,
+  pillStyle = 'light',
 }) => {
   const classes = [
     baseClass,
@@ -46,24 +52,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?: (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,9 +10,19 @@ 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,
+    render,
+    align = 'center',
+    size = 'small',
+    color = 'light',
+    button,
+    buttonType = 'default',
+    children,
+    showOnHover = false,
+    horizontalAlign = 'left',
+    initActive = false,
+    onToggleOpen,
   } = props;
 
   const buttonRef = useRef(null);
@@ -135,32 +145,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?: (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,
+}

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 '@payloadcms/config-provider';
 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;

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

@@ -0,0 +1,3 @@
+export type Props = {
+  generatePreviewURL?: (fields: unknown, token: string) => string
+}

src/admin/components/elements/ReactSelect/index.tsx

@@ -1,18 +1,17 @@
 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,
+    showError = false,
     options,
-    isMulti,
+    isMulti = false,
     onChange,
     value,
-    disabled,
+    disabled = false,
     formatValue,
   } = props;
 
@@ -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?: (formatValue) => void,
+  disabled?: boolean,
+  showError?: boolean,
+  formatValue?: () => void,
+  options?: string[] | { value: string, label: string }[],
+  isMulti?: boolean,
+}

src/admin/components/elements/RenderTitle/index.tsx

@@ -1,14 +1,17 @@
 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,
+    useAsTitle,
+    title: titleFromProps,
+    data,
+    fallback = '[untitled]',
   } = props;
 
   const titleFromForm = useTitle(useAsTitle);
@@ -39,21 +42,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,10 +7,10 @@ import './index.scss';
 
 const baseClass = 'search-filter';
 
-const SearchFilter = (props) => {
+const SearchFilter: React.FC<Props> = (props) => {
   const {
-    fieldName,
-    fieldLabel,
+    fieldName = 'id',
+    fieldLabel = 'ID',
     handleChange,
   } = props;
 
@@ -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: (any) => 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,9 +7,9 @@ import './index.scss';
 
 const baseClass = 'sort-column';
 
-const SortColumn = (props) => {
+const SortColumn: React.FC<Props> = (props) => {
   const {
-    label, handleChange, name, disable,
+    label, handleChange, name, disable = false,
   } = props;
   const [sort, setSort] = useState(null);
 
@@ -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: (sort) => 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,6 @@
+import { Collection } from '../../../../collections/config/types';
+
+export type Props = {
+  handleChange: (any) => void,
+  collection: Collection,
+}

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,6 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { useConfig } from '@payloadcms/config-provider';
+import { Props } from './types';
 import FileGraphic from '../../graphics/File';
 import getThumbnail from '../../../../uploads/getThumbnail';
 
@@ -8,9 +8,14 @@ import './index.scss';
 
 const baseClass = 'thumbnail';
 
-const Thumbnail = (props) => {
+const Thumbnail: React.FC<Props> = (props) => {
   const {
-    filename, mimeType, staticURL, sizes, adminThumbnail, size,
+    filename,
+    mimeType,
+    staticURL,
+    sizes = 'medium',
+    adminThumbnail,
+    size,
   } = props;
 
   const { serverURL } = useConfig();
@@ -36,21 +41,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,10 @@
+import { Collection } from '../../../../collections/config/types';
+
+export type Props = {
+  collection: Collection,
+  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: (doc) => 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,6 @@
+import { Collection } from '../../../../collections/config/types';
+
+export type Props = {
+  handleChange: () => void,
+  collection: Collection,
+}

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

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 '@payloadcms/config-provider';
 
-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 '@payloadcms/config-provider';
 
-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;

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"

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"

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;

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"

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"

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;

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"

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"

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;

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"

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"

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;

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"

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"

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;

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"

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;

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;