refactor: prepare react 18 upgrade - batch #2 (#3742)

webiny · Dec 6, 2023 · 2800594 · 2800594
1 parent ee56351
commit 2800594
Show file tree

Hide file tree

Showing 10 changed files with 25 additions and 21 deletions.
diff --git a/apps/admin/src/App.editor.tsx b/apps/admin/src/App.editor.tsx
@@ -4,7 +4,7 @@ import { Cognito } from "@webiny/app-admin-users-cognito";
 import { Editor } from "@webiny/app-page-builder-editor";
 import "./App.scss";
 
-export const App: React.FC = () => {
+export const App = () => {
     return (
         <Admin>
             <Cognito />

diff --git a/apps/admin/src/App.fm.tsx b/apps/admin/src/App.fm.tsx
@@ -31,7 +31,7 @@ const CustomFileManager = createComponentPlugin(FileManagerRenderer, () => {
     };
 });
 
-export const App: React.FC = () => {
+export const App = () => {
     return (
         <Admin>
             <Cognito />

diff --git a/apps/admin/src/App.okta.tsx b/apps/admin/src/App.okta.tsx
@@ -5,7 +5,7 @@ import "./App.scss";
 
 import { oktaFactory, rootAppClientId } from "./okta";
 
-export const App: React.FC = () => {
+export const App = () => {
     return (
         <Admin>
             <Okta factory={oktaFactory} rootAppClientId={rootAppClientId} />

diff --git a/apps/admin/src/App.tsx b/apps/admin/src/App.tsx
@@ -3,7 +3,7 @@ import { Admin } from "@webiny/app-serverless-cms";
 import { Cognito } from "@webiny/app-admin-users-cognito";
 import "./App.scss";
 
-export const App: React.FC = () => {
+export const App = () => {
     return (
         <Admin>
             <Cognito />

diff --git a/apps/theme/layouts/forms/DefaultFormLayout/Field.tsx b/apps/theme/layouts/forms/DefaultFormLayout/Field.tsx
@@ -8,12 +8,14 @@ import { TextareaField } from "./fields/Textarea";
 import { HiddenField } from "./fields/Hidden";
 import { DateTimeField } from "./fields/DateTime";
 
+interface FieldProps {
+    field: FormRenderFbFormModelField;
+}
+
 /**
  * Renders a single form field. If needed, additional field types can be added.
  */
-export const Field: React.FC<{
-    field: FormRenderFbFormModelField;
-}> = props => {
+export const Field = (props: FieldProps) => {
     switch (props.field.type) {
         case "text":
             return <InputField {...props} />;

diff --git a/apps/theme/layouts/forms/DefaultFormLayout/ReCaptchaSection.tsx b/apps/theme/layouts/forms/DefaultFormLayout/ReCaptchaSection.tsx
@@ -6,11 +6,11 @@ import { Row } from "./Row";
 import { Cell } from "./Cell";
 import { ReCaptchaComponent } from "@webiny/app-page-builder-elements/renderers/form/types";
 
-interface Props {
+interface ReCaptchaSectionProps {
     component: ReCaptchaComponent;
 }
 
-export const ReCaptchaSection: React.FC<Props> = ({ component: ReCaptchaComponent }) => {
+export const ReCaptchaSection = ({ component: ReCaptchaComponent }: ReCaptchaSectionProps) => {
     const bind = useBind({
         name: "reCaptcha",
         validators: validation.create("required")

diff --git a/apps/theme/layouts/forms/DefaultFormLayout/SuccessMessage.tsx b/apps/theme/layouts/forms/DefaultFormLayout/SuccessMessage.tsx
@@ -37,11 +37,11 @@ const Wrapper = styled.div`
     text-align: center;
 `;
 
-interface Props {
+interface SuccessMessageProps {
     formData: FbFormModel;
 }
 
-export const SuccessMessage: React.FC<Props> = ({ formData }) => {
+export const SuccessMessage = ({ formData }: SuccessMessageProps) => {
     const heading = "Success!";
 
     let message;

diff --git a/apps/theme/layouts/forms/DefaultFormLayout/TermsOfServiceSection.tsx b/apps/theme/layouts/forms/DefaultFormLayout/TermsOfServiceSection.tsx
@@ -14,10 +14,6 @@ import {
 } from "@webiny/app-page-builder-elements/renderers/form/types";
 import styled from "@emotion/styled";
 
-interface Props {
-    component: TermsOfServiceComponent;
-}
-
 const RteFieldLabel = styled(FieldLabelStyled)`
     .rte-block-paragraph {
         ${props => props.theme.styles.typography.paragraphs.stylesById("paragraph1")};
@@ -59,6 +55,12 @@ export const renderCheckbox: TermsOfServiceChildrenFunction = ({
     );
 };
 
-export const TermsOfServiceSection: React.FC<Props> = ({ component: TermsOfServiceComponent }) => {
+interface TermsOfServiceSectionProps {
+    component: TermsOfServiceComponent;
+}
+
+export const TermsOfServiceSection = ({
+    component: TermsOfServiceComponent
+}: TermsOfServiceSectionProps) => {
     return <TermsOfServiceComponent>{renderCheckbox}</TermsOfServiceComponent>;
 };
diff --git a/apps/theme/layouts/forms/DefaultFormLayout/buttons/Button.tsx b/apps/theme/layouts/forms/DefaultFormLayout/buttons/Button.tsx
@@ -14,21 +14,21 @@ export const Wrapper = styled.div<{ fullWidth: boolean; type: "primary" | "defau
     }
 `;
 
-interface Props {
+interface ButtonProps {
     fullWidth: boolean;
     disabled: boolean;
     children: React.ReactNode;
     type?: "primary" | "default";
     onClick: FormRenderPropParamsSubmit | (() => void);
 }
 
-export const Button: React.FC<Props> = ({
+export const Button = ({
     fullWidth,
     disabled,
     children,
     type = "default",
     onClick
-}) => {
+}: ButtonProps) => {
     return (
         <Wrapper fullWidth={fullWidth} type={type}>
             <button className={"button-body"} onClick={onClick} disabled={disabled}>

diff --git a/apps/theme/layouts/forms/DefaultFormLayout/fields/Checkbox.tsx b/apps/theme/layouts/forms/DefaultFormLayout/fields/Checkbox.tsx
@@ -84,11 +84,11 @@ const otherOption: Option = {
     value: "other"
 };
 
-interface CheckboxProps {
+interface CheckboxFieldProps {
     field: FormRenderFbFormModelField;
 }
 
-export const CheckboxField: React.FC<CheckboxProps> = ({ field }) => {
+export const CheckboxField = ({ field }: CheckboxFieldProps) => {
     const fieldId = field.fieldId;
 
     const { validation, value, onChange } = useBind({