further types frontend

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import Select from 'react-select';
 import { Props } from './types';
 import Chevron from '../../icons/Chevron';
 

src/admin/components/forms/Form/index.tsx

@@ -5,10 +5,10 @@ import { objectToFormData } from 'object-to-formdata';
 import { useHistory } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { toast } from 'react-toastify';
+import { useAuth } from '@payloadcms/config-provider';
 import { useLocale } from '../../utilities/Locale';
 import { requests } from '../../../api';
 import useThrottledEffect from '../../../hooks/useThrottledEffect';
-import { useAuth } from '@payloadcms/config-provider';
 import fieldReducer from './fieldReducer';
 import initContextState from './initContextState';
 import reduceFieldsToValues from './reduceFieldsToValues';
@@ -24,7 +24,7 @@ import './index.scss';
 
 const baseClass = 'form';
 
-const Form = (props) => {
+const Form: React.FC = (props) => {
   const {
     disabled,
     onSubmit,

src/admin/components/forms/RenderFields/index.tsx

@@ -1,7 +1,7 @@
 import React, { createContext, useEffect, useContext, useState } from 'react';
-import PropTypes from 'prop-types';
 import RenderCustomComponent from '../../utilities/RenderCustomComponent';
 import useIntersect from '../../../hooks/useIntersect';
+import { Props, Context } from './types';
 
 const baseClass = 'render-fields';
 
@@ -9,11 +9,11 @@ const intersectionObserverOptions = {
   rootMargin: '1000px',
 };
 
-const RenderedFieldContext = createContext({});
+const RenderedFieldContext = createContext({} as Context);
 
-export const useRenderedFields = () => useContext(RenderedFieldContext);
+export const useRenderedFields = (): Context => useContext(RenderedFieldContext);
 
-const RenderFields: React.FC = (props) => {
+const RenderFields: React.FC<Props> = (props) => {
   const {
     fieldSchema,
     fieldTypes,
@@ -135,26 +135,4 @@ const RenderFields: React.FC = (props) => {
   return null;
 };
 
-RenderFields.defaultProps = {
-  filter: null,
-  readOnly: false,
-  permissions: {},
-  operation: undefined,
-  className: undefined,
-};
-
-RenderFields.propTypes = {
-  fieldSchema: PropTypes.arrayOf(
-    PropTypes.shape({}),
-  ).isRequired,
-  fieldTypes: PropTypes.shape({
-    hidden: PropTypes.function,
-  }).isRequired,
-  filter: PropTypes.func,
-  permissions: PropTypes.shape({}),
-  readOnly: PropTypes.bool,
-  operation: PropTypes.string,
-  className: PropTypes.string,
-};
-
 export default RenderFields;

src/admin/components/forms/RenderFields/types.ts

@@ -0,0 +1,17 @@
+import { CollectionPermission, GlobalPermission } from '../../../../auth/types';
+import { Field } from '../../../../fields/config/types';
+
+export type Operation = 'create' | 'update'
+
+export type Context = {
+  operation: Operation
+}
+
+export type Props = {
+  className?: string
+  operation: Operation
+  readOnly: boolean
+  permissions: CollectionPermission | GlobalPermission
+  filter: (field: Field) => boolean
+  fieldSchema: Field[]
+}

src/admin/components/forms/field-types/Relationship/index.tsx

@@ -10,6 +10,8 @@ import useFieldType from '../../useFieldType';
 import Label from '../../Label';
 import Error from '../../Error';
 import { relationship } from '../../../../../fields/validations';
+import { PaginatedDocs } from '../../../../../collections/config/types';
+import { RelationshipProps, OptionsPage } from './types';
 
 import './index.scss';
 
@@ -17,7 +19,7 @@ const maxResultsPerRequest = 10;
 
 const baseClass = 'relationship';
 
-class Relationship extends Component {
+class Relationship extends Component<RelationshipProps> {
   constructor(props) {
     super(props);
 
@@ -77,7 +79,7 @@ class Relationship extends Component {
           const fieldToSearch = collection?.admin?.useAsTitle || 'id';
           const searchParam = search ? `&where[${fieldToSearch}][like]=${search}` : '';
           const response = await fetch(`${serverURL}${api}/${relation}?limit=${maxResultsPerRequest}&page=${lastLoadedPage}${searchParam}`);
-          const data = await response.json();
+          const data: PaginatedDocs = await response.json();
 
           if (response.ok) {
             if (data.hasNextPage) {
@@ -87,7 +89,7 @@ class Relationship extends Component {
               });
             }
 
-            return callback({ relation, data });
+            return callback(true, { relation, data });
           }
 
           let error = 'There was a problem loading options for this field.';
@@ -99,7 +101,7 @@ class Relationship extends Component {
           return this.setState({
             errorLoading: error,
           });
-        }, (lastPage, nextPage) => {
+        }, (lastPage: OptionsPage, nextPage: OptionsPage) => {
           if (nextPage) {
             const { data, relation } = nextPage;
             this.addOptions(data, relation);

src/admin/components/forms/field-types/Relationship/types.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { PaginatedDocs } from '../../../../../collections/config/types';
+import { Config } from '../../../../../config/types';
+
+export type OptionsPage = {
+  relation: string
+  data: PaginatedDocs
+}
+
+export type RelationshipProps = {
+  required: boolean
+  errorMessage: string
+  hasMany: boolean
+  showError: boolean
+  value: unknown
+  path: string
+  formProcessing: boolean
+  admin: {
+    readOnly: boolean
+    style: React.CSSProperties
+    width: string
+  }
+  relationTo: string | string[]
+  config: Config
+}