diff --git a/src/admin/assets/assets.d.ts b/src/admin/assets/assets.d.ts new file mode 100644 index 0000000000..67591d0000 --- /dev/null +++ b/src/admin/assets/assets.d.ts @@ -0,0 +1,22 @@ +declare module '*.svg' { + import React = require('react'); + + export const ReactComponent: React.SFC>; + 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; +} diff --git a/src/admin/components/elements/Banner/index.tsx b/src/admin/components/elements/Banner/index.tsx index 0fae475914..3bea04b684 100644 --- a/src/admin/components/elements/Banner/index.tsx +++ b/src/admin/components/elements/Banner/index.tsx @@ -1,13 +1,19 @@ import React from 'react'; -import PropTypes from 'prop-types'; import { Link } from 'react-router-dom'; +import { Props } from './types'; import './index.scss'; const baseClass = 'banner'; -const Banner = ({ - children, className, to, icon, alignIcon, onClick, type, +const Banner: React.FC = ({ + 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; diff --git a/src/admin/components/elements/Banner/types.ts b/src/admin/components/elements/Banner/types.ts new file mode 100644 index 0000000000..a7e366b31e --- /dev/null +++ b/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', +} diff --git a/src/admin/components/elements/Button/index.tsx b/src/admin/components/elements/Button/index.tsx index 021ae3770e..88215395c4 100644 --- a/src/admin/components/elements/Button/index.tsx +++ b/src/admin/components/elements/Button/index.tsx @@ -1,6 +1,6 @@ import React, { isValidElement } from 'react'; -import PropTypes from 'prop-types'; import { Link } from 'react-router-dom'; +import { Props } from './types'; import plus from '../../icons/Plus'; import x from '../../icons/X'; @@ -36,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) => { 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; diff --git a/src/admin/components/elements/Button/types.ts b/src/admin/components/elements/Button/types.ts new file mode 100644 index 0000000000..fe18964cd5 --- /dev/null +++ b/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' +} diff --git a/src/admin/components/elements/Card/index.tsx b/src/admin/components/elements/Card/index.tsx index 7beda6261e..ae30db1238 100644 --- a/src/admin/components/elements/Card/index.tsx +++ b/src/admin/components/elements/Card/index.tsx @@ -1,12 +1,12 @@ import React from 'react'; -import PropTypes from 'prop-types'; import Button from '../Button'; +import { Props } from './types'; import './index.scss'; const baseClass = 'card'; -const Card = (props) => { +const Card: React.FC = (props) => { const { title, actions, onClick } = props; const classes = [ @@ -35,15 +35,4 @@ const Card = (props) => { ); }; -Card.defaultProps = { - actions: null, - onClick: undefined, -}; - -Card.propTypes = { - title: PropTypes.string.isRequired, - actions: PropTypes.node, - onClick: PropTypes.func, -}; - export default Card; diff --git a/src/admin/components/elements/Card/types.ts b/src/admin/components/elements/Card/types.ts new file mode 100644 index 0000000000..016254b24e --- /dev/null +++ b/src/admin/components/elements/Card/types.ts @@ -0,0 +1,5 @@ +export type Props = { + title: string, + actions?: React.ReactNode, + onClick?: () => void, +} diff --git a/src/admin/components/elements/ColumnSelector/index.tsx b/src/admin/components/elements/ColumnSelector/index.tsx index 8670a8e36e..2dd28b3bd3 100644 --- a/src/admin/components/elements/ColumnSelector/index.tsx +++ b/src/admin/components/elements/ColumnSelector/index.tsx @@ -1,10 +1,10 @@ import React, { useState, useEffect, useReducer } from 'react'; -import PropTypes from 'prop-types'; import getInitialState from './getInitialState'; import flattenTopLevelFields from '../../../../utilities/flattenTopLevelFields'; import Pill from '../Pill'; import Plus from '../../icons/Plus'; import X from '../../icons/X'; +import { Props } from './types'; import './index.scss'; @@ -27,7 +27,7 @@ const reducer = (state, { type, payload }) => { return state.filter((remainingColumn) => remainingColumn !== payload); }; -const ColumnSelector = (props) => { +const ColumnSelector: React.FC = (props) => { const { collection, collection: { @@ -77,19 +77,4 @@ const ColumnSelector = (props) => { ); }; -ColumnSelector.propTypes = { - collection: PropTypes.shape({ - fields: PropTypes.arrayOf( - PropTypes.shape({}), - ), - admin: PropTypes.shape({ - defaultColumns: PropTypes.arrayOf( - PropTypes.string, - ), - useAsTitle: PropTypes.string, - }), - }).isRequired, - handleChange: PropTypes.func.isRequired, -}; - export default ColumnSelector; diff --git a/src/admin/components/elements/ColumnSelector/types.ts b/src/admin/components/elements/ColumnSelector/types.ts new file mode 100644 index 0000000000..e44d71d2dd --- /dev/null +++ b/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, +} diff --git a/src/admin/components/elements/CopyToClipboard/index.tsx b/src/admin/components/elements/CopyToClipboard/index.tsx index 6fc4c2a156..2a07265d53 100644 --- a/src/admin/components/elements/CopyToClipboard/index.tsx +++ b/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 = ({ + 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; diff --git a/src/admin/components/elements/CopyToClipboard/types.ts b/src/admin/components/elements/CopyToClipboard/types.ts new file mode 100644 index 0000000000..93be9be5db --- /dev/null +++ b/src/admin/components/elements/CopyToClipboard/types.ts @@ -0,0 +1,5 @@ +export type Props = { + value?: string, + defaultMessage?: string, + successMessage?: string, +} diff --git a/src/admin/components/elements/DatePicker/DatePicker.tsx b/src/admin/components/elements/DatePicker/DatePicker.tsx index 146e9af083..798f622a68 100644 --- a/src/admin/components/elements/DatePicker/DatePicker.tsx +++ b/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) => { 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; diff --git a/src/admin/components/elements/DatePicker/types.ts b/src/admin/components/elements/DatePicker/types.ts new file mode 100644 index 0000000000..36c9045263 --- /dev/null +++ b/src/admin/components/elements/DatePicker/types.ts @@ -0,0 +1,18 @@ +export type Props = { + placeholder?: string, + useDate?: boolean, + minDate?: Date, + maxDate?: Date, + monthsShown?: number, + inputDateTimeFormat?: string, + useTime?: boolean, + minTime?: Date, + maxTime?: Date, + timeIntervals?: number, + timeFormat?: string, + value?: Date | string, + onChange?: () => void, + admin?: { + readOnly?: boolean, + } +} diff --git a/src/admin/components/elements/DeleteDocument/index.tsx b/src/admin/components/elements/DeleteDocument/index.tsx index 6b910d6e57..8eef3fb4ec 100644 --- a/src/admin/components/elements/DeleteDocument/index.tsx +++ b/src/admin/components/elements/DeleteDocument/index.tsx @@ -1,5 +1,4 @@ import React, { useState, useCallback } from 'react'; -import PropTypes from 'prop-types'; import { toast } from 'react-toastify'; import { useHistory } from 'react-router-dom'; import { Modal, useModal } from '@faceless-ui/modal'; @@ -9,12 +8,13 @@ import MinimalTemplate from '../../templates/Minimal'; import { useForm } from '../../forms/Form/context'; import useTitle from '../../../hooks/useTitle'; import { requests } from '../../../api'; +import { Props } from './types'; import './index.scss'; const baseClass = 'delete-document'; -const DeleteDocument = (props) => { +const DeleteDocument: React.FC = (props) => { const { title: titleFromProps, id, @@ -130,23 +130,4 @@ const DeleteDocument = (props) => { return null; }; -DeleteDocument.defaultProps = { - title: undefined, - id: undefined, -}; - -DeleteDocument.propTypes = { - collection: PropTypes.shape({ - admin: PropTypes.shape({ - useAsTitle: PropTypes.string, - }), - slug: PropTypes.string, - labels: PropTypes.shape({ - singular: PropTypes.string, - }), - }).isRequired, - id: PropTypes.string, - title: PropTypes.string, -}; - export default DeleteDocument; diff --git a/src/admin/components/elements/DeleteDocument/types.ts b/src/admin/components/elements/DeleteDocument/types.ts new file mode 100644 index 0000000000..80d10a6b5d --- /dev/null +++ b/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, +} diff --git a/src/admin/components/elements/DuplicateDocument/index.tsx b/src/admin/components/elements/DuplicateDocument/index.tsx index ae4e36129a..3ad4ce2769 100644 --- a/src/admin/components/elements/DuplicateDocument/index.tsx +++ b/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 = ({ slug }) => { const { push } = useHistory(); const { getData } = useForm(); const { routes: { admin } } = useConfig(); @@ -36,8 +36,4 @@ const Duplicate = ({ slug }) => { ); }; -Duplicate.propTypes = { - slug: PropTypes.string.isRequired, -}; - export default Duplicate; diff --git a/src/admin/components/elements/DuplicateDocument/types.ts b/src/admin/components/elements/DuplicateDocument/types.ts new file mode 100644 index 0000000000..ac7846166d --- /dev/null +++ b/src/admin/components/elements/DuplicateDocument/types.ts @@ -0,0 +1,3 @@ +export type Props = { + slug: string, +} diff --git a/src/admin/components/elements/Eyebrow/index.tsx b/src/admin/components/elements/Eyebrow/index.tsx index 0b0bd507ff..cb0366bbc3 100644 --- a/src/admin/components/elements/Eyebrow/index.tsx +++ b/src/admin/components/elements/Eyebrow/index.tsx @@ -1,26 +1,16 @@ import React from 'react'; -import PropTypes from 'prop-types'; import StepNav from '../StepNav'; +import { Props } from './types'; import './index.scss'; const baseClass = 'eyebrow'; -const Eyebrow = ({ actions }) => { - return ( -
- - {actions} -
- ); -}; - -Eyebrow.defaultProps = { - actions: null, -}; - -Eyebrow.propTypes = { - actions: PropTypes.node, -}; +const Eyebrow: React.FC = ({ actions }) => ( +
+ + {actions} +
+); export default Eyebrow; diff --git a/src/admin/components/elements/Eyebrow/types.ts b/src/admin/components/elements/Eyebrow/types.ts new file mode 100644 index 0000000000..0ba08a339a --- /dev/null +++ b/src/admin/components/elements/Eyebrow/types.ts @@ -0,0 +1,3 @@ +export type Props = { + actions?: React.ReactNode +} diff --git a/src/admin/components/elements/FileDetails/Meta/index.tsx b/src/admin/components/elements/FileDetails/Meta/index.tsx index 218d42dba1..c052935d8c 100644 --- a/src/admin/components/elements/FileDetails/Meta/index.tsx +++ b/src/admin/components/elements/FileDetails/Meta/index.tsx @@ -1,14 +1,14 @@ import React from 'react'; -import PropTypes from 'prop-types'; import { useConfig } from '@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) => { const { filename, filesize, width, height, mimeType, staticURL, } = props; @@ -53,20 +53,4 @@ const Meta = (props) => { ); }; -Meta.defaultProps = { - width: undefined, - height: undefined, - sizes: undefined, -}; - -Meta.propTypes = { - filename: PropTypes.string.isRequired, - mimeType: PropTypes.string.isRequired, - filesize: PropTypes.number.isRequired, - staticURL: PropTypes.string.isRequired, - width: PropTypes.number, - height: PropTypes.number, - sizes: PropTypes.shape({}), -}; - export default Meta; diff --git a/src/admin/components/elements/FileDetails/Meta/types.ts b/src/admin/components/elements/FileDetails/Meta/types.ts new file mode 100644 index 0000000000..6aeab1066c --- /dev/null +++ b/src/admin/components/elements/FileDetails/Meta/types.ts @@ -0,0 +1,9 @@ +export type Props = { + filename: string, + mimeType: string, + filesize: number, + staticURL: string, + width?: number, + height?: number, + sizes?: unknown, +} diff --git a/src/admin/components/elements/FileDetails/index.tsx b/src/admin/components/elements/FileDetails/index.tsx index 7ff62b0e89..5c0ee1cf93 100644 --- a/src/admin/components/elements/FileDetails/index.tsx +++ b/src/admin/components/elements/FileDetails/index.tsx @@ -1,9 +1,9 @@ import React, { useState } from 'react'; -import PropTypes from 'prop-types'; import AnimateHeight from 'react-animate-height'; import Thumbnail from '../Thumbnail'; import Button from '../Button'; import Meta from './Meta'; +import { Props } from './types'; import Chevron from '../../icons/Chevron'; @@ -11,9 +11,17 @@ import './index.scss'; const baseClass = 'file-details'; -const FileDetails = (props) => { +const FileDetails: React.FC = (props) => { const { - filename, mimeType, filesize, staticURL, adminThumbnail, sizes, handleRemove, width, height, + filename, + mimeType, + filesize, + staticURL, + adminThumbnail, + sizes, + handleRemove, + width, + height, } = props; const [moreInfoOpen, setMoreInfoOpen] = useState(false); @@ -94,24 +102,4 @@ const FileDetails = (props) => { ); }; -FileDetails.defaultProps = { - adminThumbnail: undefined, - handleRemove: undefined, - width: undefined, - height: undefined, - sizes: undefined, -}; - -FileDetails.propTypes = { - filename: PropTypes.string.isRequired, - mimeType: PropTypes.string.isRequired, - filesize: PropTypes.number.isRequired, - staticURL: PropTypes.string.isRequired, - width: PropTypes.number, - height: PropTypes.number, - sizes: PropTypes.shape({}), - adminThumbnail: PropTypes.string, - handleRemove: PropTypes.func, -}; - export default FileDetails; diff --git a/src/admin/components/elements/FileDetails/types.ts b/src/admin/components/elements/FileDetails/types.ts new file mode 100644 index 0000000000..b556628262 --- /dev/null +++ b/src/admin/components/elements/FileDetails/types.ts @@ -0,0 +1,11 @@ +export type Props = { + filename: string, + mimeType: string, + filesize: number, + staticURL: string, + width?: number, + height?: number, + sizes?: unknown, + adminThumbnail?: string, + handleRemove?: () => void, +} diff --git a/src/admin/components/elements/GenerateConfirmation/index.tsx b/src/admin/components/elements/GenerateConfirmation/index.tsx index 091da4f424..f3d9563207 100644 --- a/src/admin/components/elements/GenerateConfirmation/index.tsx +++ b/src/admin/components/elements/GenerateConfirmation/index.tsx @@ -1,15 +1,15 @@ import React from 'react'; -import PropTypes from 'prop-types'; import { toast } from 'react-toastify'; import { Modal, useModal } from '@faceless-ui/modal'; import Button from '../Button'; import MinimalTemplate from '../../templates/Minimal'; +import { Props } from './types'; import './index.scss'; const baseClass = 'generate-confirmation'; -const GenerateConfirmation = (props) => { +const GenerateConfirmation: React.FC = (props) => { const { setKey, highlightField, @@ -74,9 +74,4 @@ const GenerateConfirmation = (props) => { ); }; -GenerateConfirmation.propTypes = { - setKey: PropTypes.func.isRequired, - highlightField: PropTypes.func.isRequired, -}; - export default GenerateConfirmation; diff --git a/src/admin/components/elements/GenerateConfirmation/types.ts b/src/admin/components/elements/GenerateConfirmation/types.ts new file mode 100644 index 0000000000..c22f197100 --- /dev/null +++ b/src/admin/components/elements/GenerateConfirmation/types.ts @@ -0,0 +1,6 @@ +import { createTrue } from 'typescript'; + +export type Props = { + setKey: () => void, + highlightField: (Boolean) => void, +} diff --git a/src/admin/components/elements/ListControls/index.tsx b/src/admin/components/elements/ListControls/index.tsx index 0350e17530..47807b3180 100644 --- a/src/admin/components/elements/ListControls/index.tsx +++ b/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) => { 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; diff --git a/src/admin/components/elements/ListControls/types.ts b/src/admin/components/elements/ListControls/types.ts new file mode 100644 index 0000000000..f63be97f9c --- /dev/null +++ b/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, +} diff --git a/src/admin/components/elements/Loading/index.tsx b/src/admin/components/elements/Loading/index.tsx index 2de9ff6c3f..3ea2f886aa 100644 --- a/src/admin/components/elements/Loading/index.tsx +++ b/src/admin/components/elements/Loading/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -const Loading = () =>
Loading
; +const Loading: React.FC = () =>
Loading
; export default Loading; diff --git a/src/admin/components/elements/Localizer/index.tsx b/src/admin/components/elements/Localizer/index.tsx index beb33e0f18..37079e3d52 100644 --- a/src/admin/components/elements/Localizer/index.tsx +++ b/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 = () => { const { localization } = useConfig(); const locale = useLocale(); const searchParams = useSearchParams(); diff --git a/src/admin/components/elements/Localizer/types.ts b/src/admin/components/elements/Localizer/types.ts new file mode 100644 index 0000000000..daededa188 --- /dev/null +++ b/src/admin/components/elements/Localizer/types.ts @@ -0,0 +1,3 @@ +export type Props = { + +} diff --git a/src/admin/components/elements/Paginator/ClickableArrow/index.tsx b/src/admin/components/elements/Paginator/ClickableArrow/index.tsx index 0dd57ecd65..4910b2d622 100644 --- a/src/admin/components/elements/Paginator/ClickableArrow/index.tsx +++ b/src/admin/components/elements/Paginator/ClickableArrow/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import PropTypes from 'prop-types'; +import { Props } from './types'; import Chevron from '../../../icons/Chevron'; @@ -7,11 +7,11 @@ import './index.scss'; const baseClass = 'clickable-arrow'; -const ClickableArrow = (props) => { +const ClickableArrow: React.FC = (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; diff --git a/src/admin/components/elements/Paginator/ClickableArrow/types.ts b/src/admin/components/elements/Paginator/ClickableArrow/types.ts new file mode 100644 index 0000000000..3edeff0c33 --- /dev/null +++ b/src/admin/components/elements/Paginator/ClickableArrow/types.ts @@ -0,0 +1,5 @@ +export type Props = { + updatePage?: () => void, + isDisabled?: boolean, + direction?: 'right' | 'left', +} diff --git a/src/admin/components/elements/Paginator/Page/index.tsx b/src/admin/components/elements/Paginator/Page/index.tsx index 9acca5f1f8..6ad04ddb6a 100644 --- a/src/admin/components/elements/Paginator/Page/index.tsx +++ b/src/admin/components/elements/Paginator/Page/index.tsx @@ -1,10 +1,14 @@ import React from 'react'; -import PropTypes from 'prop-types'; +import { Props } from './types'; const baseClass = 'paginator__page'; -const Page = ({ - page, isCurrent, updatePage, isFirstPage, isLastPage, +const Page: React.FC = ({ + 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; diff --git a/src/admin/components/elements/Paginator/Page/types.ts b/src/admin/components/elements/Paginator/Page/types.ts new file mode 100644 index 0000000000..4d18b8ef41 --- /dev/null +++ b/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, +} diff --git a/src/admin/components/elements/Paginator/Separator/index.tsx b/src/admin/components/elements/Paginator/Separator/index.tsx index 4b2c26964d..327697e88b 100644 --- a/src/admin/components/elements/Paginator/Separator/index.tsx +++ b/src/admin/components/elements/Paginator/Separator/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -const Separator = () => —; +const Separator: React.FC = () => —; export default Separator; diff --git a/src/admin/components/elements/Paginator/index.tsx b/src/admin/components/elements/Paginator/index.tsx index 34312601c7..2360ad89ac 100644 --- a/src/admin/components/elements/Paginator/index.tsx +++ b/src/admin/components/elements/Paginator/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import PropTypes from 'prop-types'; import { useHistory, useLocation } from 'react-router-dom'; import queryString from 'qs'; +import { Props } from './types'; import Page from './Page'; import Separator from './Separator'; @@ -17,19 +17,19 @@ const nodeTypes = { const baseClass = 'paginator'; -const Pagination = (props) => { +const Pagination: React.FC = (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, -}; diff --git a/src/admin/components/elements/Paginator/types.ts b/src/admin/components/elements/Paginator/types.ts new file mode 100644 index 0000000000..0a1a192f93 --- /dev/null +++ b/src/admin/components/elements/Paginator/types.ts @@ -0,0 +1,12 @@ +export type Props = { + limit?: number, + totalPages?: number, + page?: number, + hasPrevPage?: boolean, + hasNextPage?: boolean, + prevPage?: number, + nextPage?: number, + numberOfNeighbors?: number, + disableHistoryChange?: boolean, + onChange?: (page) => void, +} diff --git a/src/admin/components/elements/Pill/index.tsx b/src/admin/components/elements/Pill/index.tsx index deed1cc5cf..4475fdf4dd 100644 --- a/src/admin/components/elements/Pill/index.tsx +++ b/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 = ({ + 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; diff --git a/src/admin/components/elements/Pill/types.ts b/src/admin/components/elements/Pill/types.ts new file mode 100644 index 0000000000..6bd5fab002 --- /dev/null +++ b/src/admin/components/elements/Pill/types.ts @@ -0,0 +1,9 @@ +export type Props = { + children?: React.ReactNode, + className?: string, + to?: string, + icon?: React.ReactNode, + alignIcon?: 'left' | 'right', + onClick?: (onClick) => void, + pillStyle?: 'light' | 'dark' | 'light-gray', +} diff --git a/src/admin/components/elements/Popup/PopupButton/index.tsx b/src/admin/components/elements/Popup/PopupButton/index.tsx index 24c04cf9ec..c87d18a314 100644 --- a/src/admin/components/elements/Popup/PopupButton/index.tsx +++ b/src/admin/components/elements/Popup/PopupButton/index.tsx @@ -1,11 +1,11 @@ import React from 'react'; -import PropTypes from 'prop-types'; +import { Props } from './types'; import './index.scss'; const baseClass = 'popup-button'; -const PopupButton = (props) => { +const PopupButton: React.FC = (props) => { const { buttonType, button, @@ -49,17 +49,4 @@ const PopupButton = (props) => { ); }; -PopupButton.defaultProps = { - buttonType: null, - onToggleOpen: undefined, -}; - -PopupButton.propTypes = { - buttonType: PropTypes.oneOf(['custom', 'default']), - button: PropTypes.node.isRequired, - setActive: PropTypes.func.isRequired, - active: PropTypes.bool.isRequired, - onToggleOpen: PropTypes.func, -}; - export default PopupButton; diff --git a/src/admin/components/elements/Popup/PopupButton/types.ts b/src/admin/components/elements/Popup/PopupButton/types.ts new file mode 100644 index 0000000000..9eba4a66ff --- /dev/null +++ b/src/admin/components/elements/Popup/PopupButton/types.ts @@ -0,0 +1,7 @@ +export type Props = { + buttonType: 'custom' | 'default', + button: React.ReactNode, + setActive: () => void, + active: boolean, + onToggleOpen: () => void, +} diff --git a/src/admin/components/elements/Popup/index.tsx b/src/admin/components/elements/Popup/index.tsx index 32da758391..3c69e69aea 100644 --- a/src/admin/components/elements/Popup/index.tsx +++ b/src/admin/components/elements/Popup/index.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useRef, useState } from 'react'; -import PropTypes from 'prop-types'; import { useWindowInfo } from '@faceless-ui/window-info'; import { useScrollInfo } from '@faceless-ui/scroll-info'; +import { Props } from './types'; import useThrottledEffect from '../../../hooks/useThrottledEffect'; import PopupButton from './PopupButton'; @@ -10,9 +10,19 @@ import './index.scss'; const baseClass = 'popup'; -const Popup = (props) => { +const Popup: React.FC = (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; diff --git a/src/admin/components/elements/Popup/types.ts b/src/admin/components/elements/Popup/types.ts new file mode 100644 index 0000000000..84d6a26776 --- /dev/null +++ b/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, +} diff --git a/src/admin/components/elements/PreviewButton/index.tsx b/src/admin/components/elements/PreviewButton/index.tsx index 7ecdb3eabd..08962e03de 100644 --- a/src/admin/components/elements/PreviewButton/index.tsx +++ b/src/admin/components/elements/PreviewButton/index.tsx @@ -1,12 +1,12 @@ import React from 'react'; -import PropTypes from 'prop-types'; import { useForm } from '../../forms/Form/context'; import { useAuth } from '@payloadcms/config-provider'; import Button from '../Button'; +import { Props } from './types'; const baseClass = 'preview-btn'; -const PreviewButton = ({ generatePreviewURL }) => { +const PreviewButton: React.FC = ({ generatePreviewURL }) => { const { token } = useAuth(); const { getFields } = useForm(); const fields = getFields(); @@ -29,12 +29,4 @@ const PreviewButton = ({ generatePreviewURL }) => { return null; }; -PreviewButton.defaultProps = { - generatePreviewURL: null, -}; - -PreviewButton.propTypes = { - generatePreviewURL: PropTypes.func, -}; - export default PreviewButton; diff --git a/src/admin/components/elements/PreviewButton/types.ts b/src/admin/components/elements/PreviewButton/types.ts new file mode 100644 index 0000000000..d397391e6a --- /dev/null +++ b/src/admin/components/elements/PreviewButton/types.ts @@ -0,0 +1,3 @@ +export type Props = { + generatePreviewURL?: (fields: unknown, token: string) => string +} diff --git a/src/admin/components/elements/ReactSelect/index.tsx b/src/admin/components/elements/ReactSelect/index.tsx index edf4f42d29..b7e992d05f 100644 --- a/src/admin/components/elements/ReactSelect/index.tsx +++ b/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) => { 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; diff --git a/src/admin/components/elements/ReactSelect/types.ts b/src/admin/components/elements/ReactSelect/types.ts new file mode 100644 index 0000000000..883c959b53 --- /dev/null +++ b/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, +} diff --git a/src/admin/components/elements/RenderTitle/index.tsx b/src/admin/components/elements/RenderTitle/index.tsx index a56397aa84..482270f703 100644 --- a/src/admin/components/elements/RenderTitle/index.tsx +++ b/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) => { 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; diff --git a/src/admin/components/elements/RenderTitle/types.ts b/src/admin/components/elements/RenderTitle/types.ts new file mode 100644 index 0000000000..070126c965 --- /dev/null +++ b/src/admin/components/elements/RenderTitle/types.ts @@ -0,0 +1,8 @@ +export type Props = { + useAsTitle?: string, + data?: { + id?: string, + }, + title?: string, + fallback?: string, +} diff --git a/src/admin/components/elements/SearchFilter/index.tsx b/src/admin/components/elements/SearchFilter/index.tsx index b7449f8103..31d24223fd 100644 --- a/src/admin/components/elements/SearchFilter/index.tsx +++ b/src/admin/components/elements/SearchFilter/index.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import PropTypes from 'prop-types'; +import { Props } from './types'; import Search from '../../icons/Search'; import useDebounce from '../../../hooks/useDebounce'; @@ -7,10 +7,10 @@ import './index.scss'; const baseClass = 'search-filter'; -const SearchFilter = (props) => { +const SearchFilter: React.FC = (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)} /> ); }; -SearchFilter.defaultProps = { - fieldName: 'id', - fieldLabel: 'ID', -}; - -SearchFilter.propTypes = { - fieldName: PropTypes.string, - fieldLabel: PropTypes.string, - handleChange: PropTypes.func.isRequired, -}; - export default SearchFilter; diff --git a/src/admin/components/elements/SearchFilter/types.ts b/src/admin/components/elements/SearchFilter/types.ts new file mode 100644 index 0000000000..a17f8690c5 --- /dev/null +++ b/src/admin/components/elements/SearchFilter/types.ts @@ -0,0 +1,5 @@ +export type Props = { + fieldName?: string, + fieldLabel?: string, + handleChange: (any) => void, +} diff --git a/src/admin/components/elements/SortColumn/index.tsx b/src/admin/components/elements/SortColumn/index.tsx index be2e63bb27..039c72d0a2 100644 --- a/src/admin/components/elements/SortColumn/index.tsx +++ b/src/admin/components/elements/SortColumn/index.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from 'react'; -import PropTypes from 'prop-types'; +import { Props } from './types'; import Chevron from '../../icons/Chevron'; import Button from '../Button'; @@ -7,9 +7,9 @@ import './index.scss'; const baseClass = 'sort-column'; -const SortColumn = (props) => { +const SortColumn: React.FC = (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; diff --git a/src/admin/components/elements/SortColumn/types.ts b/src/admin/components/elements/SortColumn/types.ts new file mode 100644 index 0000000000..1629872222 --- /dev/null +++ b/src/admin/components/elements/SortColumn/types.ts @@ -0,0 +1,6 @@ +export type Props = { + label: string, + handleChange: (sort) => void, + name: string, + disable?: boolean, +} diff --git a/src/admin/components/elements/SortComplex/index.tsx b/src/admin/components/elements/SortComplex/index.tsx index 2e67036b10..03b321c584 100644 --- a/src/admin/components/elements/SortComplex/index.tsx +++ b/src/admin/components/elements/SortComplex/index.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from 'react'; -import PropTypes from 'prop-types'; +import { Props } from './types'; import ReactSelect from '../ReactSelect'; import sortableFieldTypes from '../../../../fields/sortableFieldTypes'; @@ -9,7 +9,7 @@ const baseClass = 'sort-complex'; const sortOptions = [{ label: 'Ascending', value: '' }, { label: 'Descending', value: '-' }]; -const SortComplex = (props) => { +const SortComplex: React.FC = (props) => { const { collection, handleChange, @@ -64,16 +64,4 @@ const SortComplex = (props) => { ); }; -SortComplex.propTypes = { - handleChange: PropTypes.func.isRequired, - collection: PropTypes.shape({ - fields: PropTypes.arrayOf( - PropTypes.shape({}), - ), - labels: PropTypes.shape({ - plural: PropTypes.string, - }), - }).isRequired, -}; - export default SortComplex; diff --git a/src/admin/components/elements/SortComplex/types.ts b/src/admin/components/elements/SortComplex/types.ts new file mode 100644 index 0000000000..62da384c23 --- /dev/null +++ b/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, +} diff --git a/src/admin/components/elements/Table/index.tsx b/src/admin/components/elements/Table/index.tsx index b22454bc7f..78bbd99c7e 100644 --- a/src/admin/components/elements/Table/index.tsx +++ b/src/admin/components/elements/Table/index.tsx @@ -1,11 +1,11 @@ import React from 'react'; -import PropTypes from 'prop-types'; +import { Props } from './types'; import './index.scss'; const baseClass = 'table'; -const Table = ({ columns, data }) => { +const Table: React.FC = ({ columns, data }) => { if (columns && columns.length > 0) { return (
@@ -41,20 +41,4 @@ const Table = ({ columns, data }) => { return null; }; - -Table.propTypes = { - columns: PropTypes.arrayOf( - PropTypes.shape({ - accessor: PropTypes.string, - components: PropTypes.shape({ - Heading: PropTypes.node, - renderCell: PropTypes.function, - }), - }), - ).isRequired, - data: PropTypes.arrayOf( - PropTypes.shape({}), - ).isRequired, -}; - export default Table; diff --git a/src/admin/components/elements/Table/types.ts b/src/admin/components/elements/Table/types.ts new file mode 100644 index 0000000000..2babc175f7 --- /dev/null +++ b/src/admin/components/elements/Table/types.ts @@ -0,0 +1,10 @@ +export type Props = { + columns: { + accessor: string, + components: { + Heading: React.ReactNode, + renderCell: () => void, + }, + }[], + data: [] +} diff --git a/src/admin/components/elements/Thumbnail/index.tsx b/src/admin/components/elements/Thumbnail/index.tsx index 6b7990f30d..b8daed4ac1 100644 --- a/src/admin/components/elements/Thumbnail/index.tsx +++ b/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) => { 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) => {
); }; - -Thumbnail.defaultProps = { - adminThumbnail: undefined, - sizes: undefined, - mimeType: undefined, - size: 'medium', -}; - -Thumbnail.propTypes = { - filename: PropTypes.string.isRequired, - sizes: PropTypes.shape({}), - adminThumbnail: PropTypes.string, - mimeType: PropTypes.string, - staticURL: PropTypes.string.isRequired, - size: PropTypes.oneOf(['small', 'medium', 'large', 'expand']), -}; - export default Thumbnail; diff --git a/src/admin/components/elements/Thumbnail/types.ts b/src/admin/components/elements/Thumbnail/types.ts new file mode 100644 index 0000000000..b848570020 --- /dev/null +++ b/src/admin/components/elements/Thumbnail/types.ts @@ -0,0 +1,8 @@ +export type Props = { + filename: string, + sizes?: unknown, + adminThumbnail?: string, + mimeType?: string, + staticURL: string, + size?: 'small' | 'medium' | 'large' | 'expand', +} diff --git a/src/admin/components/elements/Tooltip/index.tsx b/src/admin/components/elements/Tooltip/index.tsx index c954fd11ec..edbc799a8c 100644 --- a/src/admin/components/elements/Tooltip/index.tsx +++ b/src/admin/components/elements/Tooltip/index.tsx @@ -1,9 +1,9 @@ import React from 'react'; -import PropTypes from 'prop-types'; +import { Props } from './types'; import './index.scss'; -const Tooltip = (props) => { +const Tooltip: React.FC = (props) => { const { className, children } = props; const classes = [ @@ -19,13 +19,4 @@ const Tooltip = (props) => { ); }; -Tooltip.defaultProps = { - className: undefined, -}; - -Tooltip.propTypes = { - className: PropTypes.string, - children: PropTypes.node.isRequired, -}; - export default Tooltip; diff --git a/src/admin/components/elements/Tooltip/types.ts b/src/admin/components/elements/Tooltip/types.ts new file mode 100644 index 0000000000..dd929c4841 --- /dev/null +++ b/src/admin/components/elements/Tooltip/types.ts @@ -0,0 +1,4 @@ +export type Props = { + className?: string, + children: React.ReactNode, +} diff --git a/src/admin/components/elements/UploadCard/index.tsx b/src/admin/components/elements/UploadCard/index.tsx index db01b61ad8..8a71d310e1 100644 --- a/src/admin/components/elements/UploadCard/index.tsx +++ b/src/admin/components/elements/UploadCard/index.tsx @@ -1,12 +1,12 @@ import React from 'react'; -import PropTypes from 'prop-types'; +import { Props } from './types'; import Thumbnail from '../Thumbnail'; import './index.scss'; const baseClass = 'upload-card'; -const UploadCard = (props) => { +const UploadCard: React.FC = (props) => { const { onClick, mimeType, @@ -43,27 +43,4 @@ const UploadCard = (props) => { ); }; -UploadCard.defaultProps = { - sizes: undefined, - onClick: undefined, -}; - -UploadCard.propTypes = { - collection: PropTypes.shape({ - labels: PropTypes.shape({ - singular: PropTypes.string, - }), - upload: PropTypes.shape({ - adminThumbnail: PropTypes.string, - staticURL: PropTypes.string, - }), - }).isRequired, - id: PropTypes.string.isRequired, - filename: PropTypes.string.isRequired, - mimeType: PropTypes.string.isRequired, - sizes: PropTypes.shape({}), - onClick: PropTypes.func, -}; - - export default UploadCard; diff --git a/src/admin/components/elements/UploadCard/types.ts b/src/admin/components/elements/UploadCard/types.ts new file mode 100644 index 0000000000..5178b28c29 --- /dev/null +++ b/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, +} diff --git a/src/admin/components/elements/UploadGallery/index.tsx b/src/admin/components/elements/UploadGallery/index.tsx index 88e5bb9bb7..8821a561d5 100644 --- a/src/admin/components/elements/UploadGallery/index.tsx +++ b/src/admin/components/elements/UploadGallery/index.tsx @@ -1,29 +1,27 @@ import React from 'react'; -import PropTypes from 'prop-types'; +import { Props } from './types'; import UploadCard from '../UploadCard'; import './index.scss'; const baseClass = 'upload-gallery'; -const UploadGallery = (props) => { +const UploadGallery: React.FC = (props) => { const { docs, onCardClick, collection } = props; if (docs && docs.length > 0) { return (
    - {docs.map((doc, i) => { - return ( -
  • - onCardClick(doc)} - /> -
    • - ); - })} + {docs.map((doc, i) => ( +
  • + onCardClick(doc)} + /> +
    • + ))}
); } @@ -31,16 +29,4 @@ const UploadGallery = (props) => { return null; }; -UploadGallery.defaultProps = { - docs: undefined, -}; - -UploadGallery.propTypes = { - docs: PropTypes.arrayOf( - PropTypes.shape({}), - ), - collection: PropTypes.shape({}).isRequired, - onCardClick: PropTypes.func.isRequired, -}; - export default UploadGallery; diff --git a/src/admin/components/elements/UploadGallery/types.ts b/src/admin/components/elements/UploadGallery/types.ts new file mode 100644 index 0000000000..ca42a34bab --- /dev/null +++ b/src/admin/components/elements/UploadGallery/types.ts @@ -0,0 +1,5 @@ +export type Props = { + docs?: [], + collection: unknown, + onCardClick: (doc) => void, +} diff --git a/src/admin/components/elements/WhereBuilder/Condition/Date/index.tsx b/src/admin/components/elements/WhereBuilder/Condition/Date/index.tsx index bd64388fdf..1913f50a0d 100644 --- a/src/admin/components/elements/WhereBuilder/Condition/Date/index.tsx +++ b/src/admin/components/elements/WhereBuilder/Condition/Date/index.tsx @@ -1,10 +1,10 @@ import React from 'react'; -import PropTypes from 'prop-types'; +import { Props } from './types'; import DatePicker from '../../../DatePicker'; const baseClass = 'condition-value-date'; -const DateField = ({ onChange, value }) => ( +const DateField: React.FC = ({ onChange, value }) => (
(
); -DateField.defaultProps = { - value: undefined, -}; - -DateField.propTypes = { - onChange: PropTypes.func.isRequired, - value: PropTypes.instanceOf(Date), -}; - export default DateField; diff --git a/src/admin/components/elements/WhereBuilder/Condition/Date/types.ts b/src/admin/components/elements/WhereBuilder/Condition/Date/types.ts new file mode 100644 index 0000000000..1a13d3cb2e --- /dev/null +++ b/src/admin/components/elements/WhereBuilder/Condition/Date/types.ts @@ -0,0 +1,4 @@ +export type Props = { + onChange: () => void, + value: Date, +} diff --git a/src/admin/components/elements/WhereBuilder/Condition/Number/index.tsx b/src/admin/components/elements/WhereBuilder/Condition/Number/index.tsx index 3770d8725d..19435b7858 100644 --- a/src/admin/components/elements/WhereBuilder/Condition/Number/index.tsx +++ b/src/admin/components/elements/WhereBuilder/Condition/Number/index.tsx @@ -1,29 +1,18 @@ import React from 'react'; -import PropTypes from 'prop-types'; +import { Props } from './types'; import './index.scss'; const baseClass = 'condition-value-number'; -const NumberField = ({ onChange, value }) => { - return ( - onChange(e.target.value)} - value={value} - /> - ); -}; - -NumberField.defaultProps = { - value: '', -}; - -NumberField.propTypes = { - onChange: PropTypes.func.isRequired, - value: PropTypes.string, -}; +const NumberField: React.FC = ({ onChange, value }) => ( + onChange(e.target.value)} + value={value} + /> +); export default NumberField; diff --git a/src/admin/components/elements/WhereBuilder/Condition/Number/types.ts b/src/admin/components/elements/WhereBuilder/Condition/Number/types.ts new file mode 100644 index 0000000000..1a13d3cb2e --- /dev/null +++ b/src/admin/components/elements/WhereBuilder/Condition/Number/types.ts @@ -0,0 +1,4 @@ +export type Props = { + onChange: () => void, + value: Date, +} diff --git a/src/admin/components/elements/WhereBuilder/Condition/Text/index.tsx b/src/admin/components/elements/WhereBuilder/Condition/Text/index.tsx index c9ad5f78bc..dbb4937c03 100644 --- a/src/admin/components/elements/WhereBuilder/Condition/Text/index.tsx +++ b/src/admin/components/elements/WhereBuilder/Condition/Text/index.tsx @@ -1,29 +1,18 @@ import React from 'react'; -import PropTypes from 'prop-types'; +import { Props } from './types'; import './index.scss'; const baseClass = 'condition-value-text'; -const Text = ({ onChange, value }) => { - return ( - onChange(e.target.value)} - value={value} - /> - ); -}; - -Text.defaultProps = { - value: '', -}; - -Text.propTypes = { - onChange: PropTypes.func.isRequired, - value: PropTypes.string, -}; +const Text: React.FC = ({ onChange, value }) => ( + onChange(e.target.value)} + value={value} + /> +); export default Text; diff --git a/src/admin/components/elements/WhereBuilder/Condition/Text/types.ts b/src/admin/components/elements/WhereBuilder/Condition/Text/types.ts new file mode 100644 index 0000000000..1a13d3cb2e --- /dev/null +++ b/src/admin/components/elements/WhereBuilder/Condition/Text/types.ts @@ -0,0 +1,4 @@ +export type Props = { + onChange: () => void, + value: Date, +} diff --git a/src/admin/components/elements/WhereBuilder/Condition/index.tsx b/src/admin/components/elements/WhereBuilder/Condition/index.tsx index d42d5deb98..91c9a15b63 100644 --- a/src/admin/components/elements/WhereBuilder/Condition/index.tsx +++ b/src/admin/components/elements/WhereBuilder/Condition/index.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from 'react'; -import PropTypes from 'prop-types'; +import { Props } from './types'; import RenderCustomComponent from '../../../utilities/RenderCustomComponent'; import ReactSelect from '../../ReactSelect'; import Button from '../../Button'; @@ -18,7 +18,7 @@ const valueFields = { const baseClass = 'condition'; -const Condition = (props) => { +const Condition: React.FC = (props) => { const { fields, dispatch, @@ -120,29 +120,4 @@ const Condition = (props) => { ); }; -Condition.propTypes = { - fields: PropTypes.arrayOf( - PropTypes.shape({ - label: PropTypes.string, - value: PropTypes.string, - operators: PropTypes.arrayOf( - PropTypes.shape({}), - ), - }), - ).isRequired, - value: PropTypes.shape({ - field: PropTypes.string, - operator: PropTypes.string, - value: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.number, - PropTypes.instanceOf(Date), - PropTypes.shape({}), - ]), - }).isRequired, - dispatch: PropTypes.func.isRequired, - orIndex: PropTypes.number.isRequired, - andIndex: PropTypes.number.isRequired, -}; - export default Condition; diff --git a/src/admin/components/elements/WhereBuilder/Condition/types.ts b/src/admin/components/elements/WhereBuilder/Condition/types.ts new file mode 100644 index 0000000000..9e0484b773 --- /dev/null +++ b/src/admin/components/elements/WhereBuilder/Condition/types.ts @@ -0,0 +1,15 @@ +export type Props = { + fields: { + label: string, + value: string, + operators: [], + }[], + value: { + field: string, + operator: string, + value: string | number | Date, + }, + dispatch: () => void + orIndex: number, + andIndex: number, +} diff --git a/src/admin/components/elements/WhereBuilder/index.tsx b/src/admin/components/elements/WhereBuilder/index.tsx index 16a1235013..2ab99fbd5a 100644 --- a/src/admin/components/elements/WhereBuilder/index.tsx +++ b/src/admin/components/elements/WhereBuilder/index.tsx @@ -1,5 +1,5 @@ import React, { useState, useReducer } from 'react'; -import PropTypes from 'prop-types'; +import { Props } from './types'; import useThrottledEffect from '../../../hooks/useThrottledEffect'; import Button from '../Button'; import reducer from './reducer'; @@ -39,7 +39,7 @@ const reduceFields = (fields) => flattenTopLevelFields(fields).reduce((reduced, return reduced; }, []); -const WhereBuilder = (props) => { +const WhereBuilder: React.FC = (props) => { const { collection, collection: { @@ -157,16 +157,4 @@ const WhereBuilder = (props) => { ); }; -WhereBuilder.propTypes = { - handleChange: PropTypes.func.isRequired, - collection: PropTypes.shape({ - fields: PropTypes.arrayOf( - PropTypes.shape({}), - ), - labels: PropTypes.shape({ - plural: PropTypes.string, - }), - }).isRequired, -}; - export default WhereBuilder; diff --git a/src/admin/components/elements/WhereBuilder/types.ts b/src/admin/components/elements/WhereBuilder/types.ts new file mode 100644 index 0000000000..f7e1e15d0f --- /dev/null +++ b/src/admin/components/elements/WhereBuilder/types.ts @@ -0,0 +1,6 @@ +import { Collection } from '../../../../collections/config/types'; + +export type Props = { + handleChange: () => void, + collection: Collection, +} diff --git a/src/admin/components/elements/need fix b/src/admin/components/elements/need fix new file mode 100644 index 0000000000..2a3aeb3a0e --- /dev/null +++ b/src/admin/components/elements/need fix @@ -0,0 +1,12 @@ +date picker +handle remove +file details +paginator +pill +react select +search filter +sort complex +table +thumbnail +upload gallery +whereBuilder diff --git a/src/admin/components/graphics/Account/index.tsx b/src/admin/components/graphics/Account/index.tsx index 87ce33b668..c050374006 100644 --- a/src/admin/components/graphics/Account/index.tsx +++ b/src/admin/components/graphics/Account/index.tsx @@ -1,31 +1,29 @@ import React from 'react'; -const Account = () => { - return ( - - - - - - ); -}; +const Account: React.FC = () => ( + + + + + +); export default Account; diff --git a/src/admin/components/graphics/DefaultBlockImage/index.tsx b/src/admin/components/graphics/DefaultBlockImage/index.tsx index 13ef649576..bf7a6a45ac 100644 --- a/src/admin/components/graphics/DefaultBlockImage/index.tsx +++ b/src/admin/components/graphics/DefaultBlockImage/index.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { v4 as uuid } from 'uuid'; -const DefaultBlockImage = () => { +const DefaultBlockImage: React.FC = () => { const [patternID] = useState(`pattern${uuid()}`); const [imageID] = useState(`image${uuid()}`); diff --git a/src/admin/components/graphics/File/index.tsx b/src/admin/components/graphics/File/index.tsx index 8223e91e27..29b6e58614 100644 --- a/src/admin/components/graphics/File/index.tsx +++ b/src/admin/components/graphics/File/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; -const File = () => ( +const File: React.FC = () => ( ( +const PayloadIcon: React.FC = () => ( ( ); -const Icon = () => { +const Icon: React.FC = () => { const { admin: { components: { diff --git a/src/admin/components/graphics/Logo/index.tsx b/src/admin/components/graphics/Logo/index.tsx index 453c4dd4a5..1d33a5354b 100644 --- a/src/admin/components/graphics/Logo/index.tsx +++ b/src/admin/components/graphics/Logo/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import RenderCustomComponent from '../../utilities/RenderCustomComponent'; import { useConfig } from '@payloadcms/config-provider'; -const PayloadLogo = () => ( +const PayloadLogo: React.FC = () => ( ( ); -const Logo = () => { +const Logo: React.FC = () => { const { admin: { components: { diff --git a/src/admin/components/graphics/Search/index.tsx b/src/admin/components/graphics/Search/index.tsx index dc8e356d96..d0d1a2c6de 100644 --- a/src/admin/components/graphics/Search/index.tsx +++ b/src/admin/components/graphics/Search/index.tsx @@ -1,34 +1,32 @@ import React from 'react'; -const Search = () => { - return ( - - - - - ); -}; +const Search: React.FC = () => ( + + + + +); export default Search; diff --git a/src/admin/components/icons/Blockquote/index.tsx b/src/admin/components/icons/Blockquote/index.tsx index 5b9443b2db..5d832d0693 100644 --- a/src/admin/components/icons/Blockquote/index.tsx +++ b/src/admin/components/icons/Blockquote/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; -const BlockquoteIcon = () => ( +const BlockquoteIcon: React.FC = () => (