reafctor: normalize component formatting (#2082)

* refactor: move/rename BanUserButton file

* refactor: move/rename Chart file

* refactor: update generic component filenames to PascalCase

* refactor: update config component filenames to PascalCase

* refactor: update AdminLayout component filename to PascalCase

* refactor: update/move VideoJS component

* chore(eslint): disable bad react/require-default-props rule

* refactor: normalize ActionButton component

* refactor: normalize ActionButtonRow component

* refactor: normalize FollowButton component

* refactor: normalize NotifyButton component

* refactor: normalize ChatActionMessage component

* refactor: normalize ChatContainer component

* refactor: normalize ChatJoinMessage component

* refactor: normalize ChatModerationActionMenu component

* refactor: normalize ChatModerationDetailsModal component

* refactor: normalize ChatModeratorNotification component

* refactor: normalize ChatSocialMessage component

* refactor: normalize ChatSystemMessage component

* refactor: normalize ChatTextField component

* refactor: normalize ChatUserBadge component

* refactor: normalize ChatUserMessage component

* refactor: normalize ContentHeader component

* refactor: normalize OwncastLogo component

* refactor: normalize UserDropdown component

* chore(eslint): modify react/function-component-definition rule

* refactor: normalize CodecSelector component

* refactor: update a bunch of functional components using eslint

* refactor: update a bunch of functional components using eslint, pt2

* refactor: update a bunch of functional components using eslint, pt3

* refactor: replace all component->component default imports with named imports

* refactor: replace all component-stories->component default imports with named imports

* refactor: remove default exports from most components

* chore(eslint): add eslint config files for the components and pages dirs

* fix: use-before-define error in ChatContainer

* Fix ChatContainer import

* Only process .tsx files in Next builds

Co-authored-by: Gabe Kangas <gabek@real-ity.com>

web/components/config/CodecSelector.tsx

@@ -1,5 +1,5 @@
 import { Popconfirm, Select, Typography } from 'antd';
-import React, { useContext, useEffect, useState } from 'react';
+import React, { FC, useContext, useEffect, useState } from 'react';
 import { AlertMessageContext } from '../../utils/alert-message-context';
 import {
   API_VIDEO_CODEC,
@@ -13,10 +13,11 @@ import {
   STATUS_SUCCESS,
 } from '../../utils/input-statuses';
 import { ServerStatusContext } from '../../utils/server-status-context';
-import FormStatusIndicator from './form-status-indicator';
+import { FormStatusIndicator } from './FormStatusIndicator';
 
-// eslint-disable-next-line react/function-component-definition
-export default function CodecSelector() {
+export type CodecSelectorProps = {};
+
+export const CodecSelector: FC<CodecSelectorProps> = () => {
   const serverStatusData = useContext(ServerStatusContext);
   const { serverConfig, setFieldInConfigState } = serverStatusData || {};
   const { videoCodec, supportedCodecs } = serverConfig || {};
@@ -170,4 +171,4 @@ export default function CodecSelector() {
       </div>
     </>
   );
-}
+};

web/components/config/CurrentVariantsTable.tsx

@@ -1,6 +1,6 @@
 // Updating a variant will post ALL the variants in an array as an update to the API.
 
-import React, { useContext, useState } from 'react';
+import React, { FC, useContext, useState } from 'react';
 import { Typography, Table, Modal, Button, Alert } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { DeleteOutlined } from '@ant-design/icons';
@@ -8,7 +8,7 @@ import { ServerStatusContext } from '../../utils/server-status-context';
 import { AlertMessageContext } from '../../utils/alert-message-context';
 import { UpdateArgs, VideoVariant } from '../../types/config-section';
 
-import VideoVariantForm from './video-variant-form';
+import { VideoVariantForm } from './VideoVariantForm';
 import {
   API_VIDEO_VARIANTS,
   DEFAULT_VARIANT_STATE,
@@ -24,11 +24,11 @@ import {
   STATUS_PROCESSING,
   STATUS_SUCCESS,
 } from '../../utils/input-statuses';
-import FormStatusIndicator from './form-status-indicator';
+import { FormStatusIndicator } from './FormStatusIndicator';
 
 const { Title } = Typography;
 
-export default function CurrentVariantsTable() {
+export const CurrentVariantsTable: FC = () => {
   const [displayModal, setDisplayModal] = useState(false);
   const [modalProcessing, setModalProcessing] = useState(false);
   const [editId, setEditId] = useState(0);
@@ -242,4 +242,4 @@ export default function CurrentVariantsTable() {
       </Button>
     </>
   );
-}
+};

web/components/config/EditCustomStyles.tsx

@@ -1,5 +1,5 @@
 // EDIT CUSTOM CSS STYLES
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useState, useEffect, useContext, FC } from 'react';
 import { Typography, Button } from 'antd';
 
 import { ServerStatusContext } from '../../utils/server-status-context';
@@ -15,14 +15,13 @@ import {
   STATUS_PROCESSING,
   STATUS_SUCCESS,
 } from '../../utils/input-statuses';
-import FormStatusIndicator from './form-status-indicator';
-
-import TextField, { TEXTFIELD_TYPE_TEXTAREA } from './form-textfield';
+import { FormStatusIndicator } from './FormStatusIndicator';
+import { TextField, TEXTFIELD_TYPE_TEXTAREA } from './TextField';
 import { UpdateArgs } from '../../types/config-section';
 
 const { Title } = Typography;
 
-export default function EditCustomStyles() {
+export const EditCustomStyles: FC = () => {
   const [content, setContent] = useState('');
   const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
   const [hasChanged, setHasChanged] = useState(false);
@@ -114,4 +113,4 @@ export default function EditCustomStyles() {
       </div>
     </div>
   );
-}
+};

web/components/config/EditInstanceDetails.tsx

@@ -1,11 +1,10 @@
-import React, { useState, useContext, useEffect } from 'react';
+import React, { useState, useContext, useEffect, FC } from 'react';
 import { Typography } from 'antd';
-
-import TextFieldWithSubmit, {
+import {
+  TextFieldWithSubmit,
   TEXTFIELD_TYPE_TEXTAREA,
   TEXTFIELD_TYPE_URL,
-} from './form-textfield-with-submit';
-
+} from './TextFieldWithSubmit';
 import { ServerStatusContext } from '../../utils/server-status-context';
 import {
   postConfigUpdateToAPI,
@@ -18,14 +17,13 @@ import {
   FIELD_PROPS_NSFW,
   FIELD_PROPS_HIDE_VIEWER_COUNT,
 } from '../../utils/config-constants';
-
 import { UpdateArgs } from '../../types/config-section';
-import ToggleSwitch from './form-toggleswitch';
-import EditLogo from './edit-logo';
+import { ToggleSwitch } from './ToggleSwitch';
+import { EditLogo } from './EditLogo';
 
 const { Title } = Typography;
 
-export default function EditInstanceDetails() {
+export const EditInstanceDetails: FC = () => {
   const [formDataValues, setFormDataValues] = useState(null);
   const serverStatusData = useContext(ServerStatusContext);
   const { serverConfig } = serverStatusData || {};
@@ -163,4 +161,4 @@ export default function EditInstanceDetails() {
       </div>
     </div>
   );
-}
+};

web/components/config/EditInstanceDetails2.tsx

@@ -1,17 +1,10 @@
 import React, { useState, useContext, useEffect } from 'react';
 import { Button, Tooltip, Collapse, Typography } from 'antd';
 import { CopyOutlined, RedoOutlined } from '@ant-design/icons';
-
-import {
-  TEXTFIELD_TYPE_NUMBER,
-  TEXTFIELD_TYPE_PASSWORD,
-  TEXTFIELD_TYPE_URL,
-} from './form-textfield';
-import TextFieldWithSubmit from './form-textfield-with-submit';
-
+import { TEXTFIELD_TYPE_NUMBER, TEXTFIELD_TYPE_PASSWORD, TEXTFIELD_TYPE_URL } from './TextField';
+import { TextFieldWithSubmit } from './TextFieldWithSubmit';
 import { ServerStatusContext } from '../../utils/server-status-context';
 import { AlertMessageContext } from '../../utils/alert-message-context';
-
 import {
   TEXTFIELD_PROPS_FFMPEG,
   TEXTFIELD_PROPS_RTMP_PORT,
@@ -19,13 +12,12 @@ import {
   TEXTFIELD_PROPS_STREAM_KEY,
   TEXTFIELD_PROPS_WEB_PORT,
 } from '../../utils/config-constants';
-
 import { UpdateArgs } from '../../types/config-section';
-import ResetYP from './reset-yp';
+import { ResetYP } from './ResetYP';
 
 const { Panel } = Collapse;
 
-export default function EditInstanceDetails() {
+export const EditInstanceDetails = () => {
   const [formDataValues, setFormDataValues] = useState(null);
   const serverStatusData = useContext(ServerStatusContext);
   const { setMessage } = useContext(AlertMessageContext);
@@ -164,4 +156,4 @@ export default function EditInstanceDetails() {
       </Collapse>
     </div>
   );
-}
+};

web/components/config/EditInstanceTags.tsx

@@ -1,14 +1,13 @@
 /* eslint-disable react/no-array-index-key */
-import React, { useContext, useState, useEffect } from 'react';
+import React, { useContext, useState, useEffect, FC } from 'react';
 import { Typography, Tag } from 'antd';
-
 import { ServerStatusContext } from '../../utils/server-status-context';
 import {
   FIELD_PROPS_TAGS,
   RESET_TIMEOUT,
   postConfigUpdateToAPI,
 } from '../../utils/config-constants';
-import TextField from './form-textfield';
+import { TextField } from './TextField';
 import { UpdateArgs } from '../../types/config-section';
 import {
   createInputStatus,
@@ -18,11 +17,11 @@ import {
   STATUS_SUCCESS,
   STATUS_WARNING,
 } from '../../utils/input-statuses';
-import { TAG_COLOR } from './edit-string-array';
+import { TAG_COLOR } from './EditValueArray';
 
 const { Title } = Typography;
 
-export default function EditInstanceTags() {
+export const EditInstanceTags: FC = () => {
   const [newTagInput, setNewTagInput] = useState<string>('');
   const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
 
@@ -136,4 +135,4 @@ export default function EditInstanceTags() {
       </div>
     </div>
   );
-}
+};

web/components/config/EditLogo.tsx

@@ -1,8 +1,8 @@
 import { Button, Upload } from 'antd';
 import { RcFile } from 'antd/lib/upload/interface';
 import { LoadingOutlined, UploadOutlined } from '@ant-design/icons';
-import React, { useState, useContext } from 'react';
-import FormStatusIndicator from './form-status-indicator';
+import React, { useState, useContext, FC } from 'react';
+import { FormStatusIndicator } from './FormStatusIndicator';
 import { ServerStatusContext } from '../../utils/server-status-context';
 import {
   postConfigUpdateToAPI,
@@ -26,7 +26,7 @@ function getBase64(img: File | Blob, callback: (imageUrl: string | ArrayBuffer)
   reader.readAsDataURL(img);
 }
 
-export default function EditLogo() {
+export const EditLogo: FC = () => {
   const [logoUrl, setlogoUrl] = useState(null);
   const [loading, setLoading] = useState(false);
   const [logoCachedbuster, setLogoCacheBuster] = useState(0);
@@ -125,4 +125,4 @@ export default function EditLogo() {
       </div>
     </div>
   );
-}
+};

web/components/config/EditPageContent.tsx

@@ -1,5 +1,5 @@
 // EDIT CUSTOM DETAILS ON YOUR PAGE
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useState, useEffect, useContext, FC } from 'react';
 import { Typography, Button } from 'antd';
 import dynamic from 'next/dynamic';
 import MarkdownIt from 'markdown-it';
@@ -17,7 +17,7 @@ import {
   STATUS_PROCESSING,
   STATUS_SUCCESS,
 } from '../../utils/input-statuses';
-import FormStatusIndicator from './form-status-indicator';
+import { FormStatusIndicator } from './FormStatusIndicator';
 
 import 'react-markdown-editor-lite/lib/index.css';
 
@@ -28,7 +28,7 @@ const MdEditor = dynamic(() => import('react-markdown-editor-lite'), {
 
 const { Title } = Typography;
 
-export default function EditPageContent() {
+export const EditPageContent: FC = () => {
   const [content, setContent] = useState('');
   const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
   const [hasChanged, setHasChanged] = useState(false);
@@ -122,4 +122,4 @@ export default function EditPageContent() {
       </div>
     </div>
   );
-}
+};

web/components/config/EditSocialLinks.tsx

@@ -1,8 +1,8 @@
-import React, { useState, useContext, useEffect } from 'react';
+import React, { useState, useContext, useEffect, FC } from 'react';
 import { Typography, Table, Button, Modal, Input } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { DeleteOutlined } from '@ant-design/icons';
-import SocialDropdown from './social-icons-dropdown';
+import { SocialDropdown } from './SocialDropdown';
 import { fetchData, SOCIAL_PLATFORMS_LIST, NEXT_PUBLIC_API_HOST } from '../../utils/apis';
 import { ServerStatusContext } from '../../utils/server-status-context';
 import {
@@ -14,13 +14,13 @@ import {
 } from '../../utils/config-constants';
 import { SocialHandle, UpdateArgs } from '../../types/config-section';
 import isValidUrl, { DEFAULT_TEXTFIELD_URL_PATTERN } from '../../utils/urls';
-import TextField from './form-textfield';
+import { TextField } from './TextField';
 import { createInputStatus, STATUS_ERROR, STATUS_SUCCESS } from '../../utils/input-statuses';
-import FormStatusIndicator from './form-status-indicator';
+import { FormStatusIndicator } from './FormStatusIndicator';
 
 const { Title } = Typography;
 
-export default function EditSocialLinks() {
+export const EditSocialLinks: FC = () => {
   const [availableIconsList, setAvailableIconsList] = useState([]);
   const [currentSocialHandles, setCurrentSocialHandles] = useState([]);
 
@@ -316,4 +316,4 @@ export default function EditSocialLinks() {
       </Button>
     </div>
   );
-}
+};

web/components/config/EditStorage.tsx

@@ -1,6 +1,6 @@
 import { Button, Collapse } from 'antd';
 import classNames from 'classnames';
-import React, { useContext, useState, useEffect } from 'react';
+import React, { useContext, useState, useEffect, FC } from 'react';
 import { UpdateArgs } from '../../types/config-section';
 import { ServerStatusContext } from '../../utils/server-status-context';
 import { AlertMessageContext } from '../../utils/alert-message-context';
@@ -18,10 +18,10 @@ import {
   STATUS_PROCESSING,
   STATUS_SUCCESS,
 } from '../../utils/input-statuses';
-import TextField from './form-textfield';
-import FormStatusIndicator from './form-status-indicator';
+import { TextField } from './TextField';
+import { FormStatusIndicator } from './FormStatusIndicator';
 import isValidUrl from '../../utils/urls';
-import ToggleSwitch from './form-toggleswitch';
+import { ToggleSwitch } from './ToggleSwitch';
 
 const { Panel } = Collapse;
 
@@ -63,7 +63,7 @@ function checkSaveable(formValues: any, currentValues: any) {
   return false;
 }
 
-export default function EditStorage() {
+export const EditStorage: FC = () => {
   const [formDataValues, setFormDataValues] = useState(null);
   const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
 
@@ -254,4 +254,4 @@ export default function EditStorage() {
       </div>
     </div>
   );
-}
+};

web/components/config/EditValueArray.tsx

@@ -1,17 +1,17 @@
 /* eslint-disable react/no-array-index-key */
-import React, { useState } from 'react';
+import React, { FC, useState } from 'react';
 import { Typography, Tag } from 'antd';
 
-import TextField from './form-textfield';
+import { TextField } from './TextField';
 import { UpdateArgs } from '../../types/config-section';
 import { StatusState } from '../../utils/input-statuses';
-import FormStatusIndicator from './form-status-indicator';
+import { FormStatusIndicator } from './FormStatusIndicator';
 
 const { Title } = Typography;
 
 export const TAG_COLOR = '#5a67d8';
 
-interface EditStringArrayProps {
+export type EditStringArrayProps = {
   title: string;
   description?: string;
   placeholder: string;
@@ -21,21 +21,20 @@ interface EditStringArrayProps {
   continuousStatusMessage?: StatusState;
   handleDeleteIndex: (index: number) => void;
   handleCreateString: (arg: string) => void;
-}
+};
 
-export default function EditValueArray(props: EditStringArrayProps) {
+export const EditValueArray: FC<EditStringArrayProps> = ({
+  title,
+  description,
+  placeholder,
+  maxLength,
+  values,
+  handleDeleteIndex,
+  handleCreateString,
+  submitStatus,
+  continuousStatusMessage,
+}) => {
   const [newStringInput, setNewStringInput] = useState<string>('');
-  const {
-    title,
-    description,
-    placeholder,
-    maxLength,
-    values,
-    handleDeleteIndex,
-    handleCreateString,
-    submitStatus,
-    continuousStatusMessage,
-  } = props;
 
   const handleInputChange = ({ value }: UpdateArgs) => {
     setNewStringInput(value);
@@ -84,7 +83,7 @@ export default function EditValueArray(props: EditStringArrayProps) {
       </div>
     </div>
   );
-}
+};
 
 EditValueArray.defaultProps = {
   maxLength: 50,

web/components/config/EditYPDetails.tsx

@@ -1,15 +1,14 @@
 // Note: references to "yp" in the app are likely related to Owncast Directory
-import React, { useState, useContext, useEffect } from 'react';
+import React, { useState, useContext, useEffect, FC } from 'react';
 import { Typography } from 'antd';
 
-import ToggleSwitch from './form-toggleswitch';
-
+import { ToggleSwitch } from './ToggleSwitch';
 import { ServerStatusContext } from '../../utils/server-status-context';
 import { FIELD_PROPS_NSFW, FIELD_PROPS_YP } from '../../utils/config-constants';
 
 const { Title } = Typography;
 
-export default function EditYPDetails() {
+export const EditYPDetails: FC = () => {
   const [formDataValues, setFormDataValues] = useState(null);
 
   const serverStatusData = useContext(ServerStatusContext);
@@ -68,4 +67,4 @@ export default function EditYPDetails() {
       </div>
     </div>
   );
-}
+};

web/components/config/FormStatusIndicator.tsx

@@ -1,12 +1,13 @@
-import React from 'react';
+import React, { FC } from 'react';
 import classNames from 'classnames';
 
 import { StatusState } from '../../utils/input-statuses';
 
-interface FormStatusIndicatorProps {
+export type FormStatusIndicatorProps = {
   status: StatusState;
-}
-export default function FormStatusIndicator({ status }: FormStatusIndicatorProps) {
+};
+
+export const FormStatusIndicator: FC<FormStatusIndicatorProps> = ({ status }) => {
   const { type, icon, message } = status || {};
   const classes = classNames({
     'status-container': true,
@@ -19,4 +20,5 @@ export default function FormStatusIndicator({ status }: FormStatusIndicatorProps
       {message ? <span className="status-message">{message}</span> : null}
     </span>
   );
-}
+};
+export default FormStatusIndicator;

web/components/config/ResetYP.tsx

@@ -1,5 +1,5 @@
 import { Popconfirm, Button, Typography } from 'antd';
-import { useContext, useState } from 'react';
+import { FC, useContext, useState } from 'react';
 import { AlertMessageContext } from '../../utils/alert-message-context';
 
 import { API_YP_RESET, fetchData } from '../../utils/apis';
@@ -10,9 +10,9 @@ import {
   STATUS_PROCESSING,
   STATUS_SUCCESS,
 } from '../../utils/input-statuses';
-import FormStatusIndicator from './form-status-indicator';
+import { FormStatusIndicator } from './FormStatusIndicator';
 
-export default function ResetYP() {
+export const ResetYP: FC = () => {
   const { setMessage } = useContext(AlertMessageContext);
 
   const [submitStatus, setSubmitStatus] = useState(null);
@@ -61,4 +61,4 @@ export default function ResetYP() {
       </p>
     </>
   );
-}
+};

web/components/config/SocialDropdown.tsx

@@ -1,16 +1,16 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { Select } from 'antd';
 import { SocialHandleDropdownItem } from '../../types/config-section';
 import { NEXT_PUBLIC_API_HOST } from '../../utils/apis';
 import { OTHER_SOCIAL_HANDLE_OPTION } from '../../utils/config-constants';
 
-interface DropdownProps {
+export type DropdownProps = {
   iconList: SocialHandleDropdownItem[];
   selectedOption: string;
   onSelected: any;
-}
+};
 
-export default function SocialDropdown({ iconList, selectedOption, onSelected }: DropdownProps) {
+export const SocialDropdown: FC<DropdownProps> = ({ iconList, selectedOption, onSelected }) => {
   const handleSelected = (value: string) => {
     if (onSelected) {
       onSelected(value);
@@ -62,4 +62,4 @@ export default function SocialDropdown({ iconList, selectedOption, onSelected }:
       </div>
     </div>
   );
-}
+};

web/components/config/TextField.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { FC } from 'react';
 import classNames from 'classnames';
 import { Input, InputNumber } from 'antd';
 import { FieldUpdaterFunc } from '../../types/config-section';
 // import InfoTip from '../info-tip';
 import { StatusState } from '../../utils/input-statuses';
-import FormStatusIndicator from './form-status-indicator';
+import { FormStatusIndicator } from './FormStatusIndicator';
 
 export const TEXTFIELD_TYPE_TEXT = 'default';
 export const TEXTFIELD_TYPE_PASSWORD = 'password'; // Input.Password
@@ -12,7 +12,7 @@ export const TEXTFIELD_TYPE_NUMBER = 'numeric'; // InputNumber
 export const TEXTFIELD_TYPE_TEXTAREA = 'textarea'; // Input.TextArea
 export const TEXTFIELD_TYPE_URL = 'url';
 
-export interface TextFieldProps {
+export type TextFieldProps = {
   fieldName: string;
 
   onSubmit?: () => void;
@@ -33,28 +33,26 @@ export interface TextFieldProps {
   value?: string | number;
   onBlur?: FieldUpdaterFunc;
   onChange?: FieldUpdaterFunc;
-}
-
-export default function TextField(props: TextFieldProps) {
-  const {
-    className,
-    disabled,
-    fieldName,
-    label,
-    maxLength,
-    onBlur,
-    onChange,
-    onPressEnter,
-    pattern,
-    placeholder,
-    required,
-    status,
-    tip,
-    type,
-    useTrim,
-    value,
-  } = props;
+};
 
+export const TextField: FC<TextFieldProps> = ({
+  className,
+  disabled,
+  fieldName,
+  label,
+  maxLength,
+  onBlur,
+  onChange,
+  onPressEnter,
+  pattern,
+  placeholder,
+  required,
+  status,
+  tip,
+  type,
+  useTrim,
+  value,
+}) => {
   const handleChange = (e: any) => {
     // if an extra onChange handler was sent in as a prop, let's run that too.
     if (onChange) {
@@ -151,7 +149,8 @@ export default function TextField(props: TextFieldProps) {
       </div>
     </div>
   );
-}
+};
+export default TextField;
 
 TextField.defaultProps = {
   className: '',

web/components/config/TextFieldWithSubmit.tsx

@@ -1,6 +1,6 @@
 import { Button } from 'antd';
 import classNames from 'classnames';
-import React, { useContext, useEffect, useState } from 'react';
+import React, { FC, useContext, useEffect, useState } from 'react';
 import { UpdateArgs } from '../../types/config-section';
 import { postConfigUpdateToAPI, RESET_TIMEOUT } from '../../utils/config-constants';
 import {
@@ -11,8 +11,8 @@ import {
   STATUS_SUCCESS,
 } from '../../utils/input-statuses';
 import { ServerStatusContext } from '../../utils/server-status-context';
-import FormStatusIndicator from './form-status-indicator';
-import TextField, { TextFieldProps } from './form-textfield';
+import { FormStatusIndicator } from './FormStatusIndicator';
+import { TextField, TextFieldProps } from './TextField';
 
 export const TEXTFIELD_TYPE_TEXT = 'default';
 export const TEXTFIELD_TYPE_PASSWORD = 'password'; // Input.Password
@@ -20,13 +20,20 @@ export const TEXTFIELD_TYPE_NUMBER = 'numeric';
 export const TEXTFIELD_TYPE_TEXTAREA = 'textarea';
 export const TEXTFIELD_TYPE_URL = 'url';
 
-interface TextFieldWithSubmitProps extends TextFieldProps {
+export type TextFieldWithSubmitProps = TextFieldProps & {
   apiPath: string;
   configPath?: string;
   initialValue?: string;
-}
+};
 
-export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
+export const TextFieldWithSubmit: FC<TextFieldWithSubmitProps> = ({
+  apiPath,
+  configPath = '',
+  initialValue,
+  useTrim,
+  useTrimLead,
+  ...textFieldProps // rest of props
+}) => {
   const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
 
   const [hasChanged, setHasChanged] = useState(false);
@@ -36,15 +43,6 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
 
   let resetTimer = null;
 
-  const {
-    apiPath,
-    configPath = '',
-    initialValue,
-    useTrim,
-    useTrimLead,
-    ...textFieldProps // rest of props
-  } = props;
-
   const { fieldName, required, tip, status, value, onChange, onSubmit } = textFieldProps;
 
   // Clear out any validation states and messaging
@@ -150,7 +148,7 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
       </div>
     </div>
   );
-}
+};
 
 TextFieldWithSubmit.defaultProps = {
   configPath: '',

web/components/config/ToggleSwitch.tsx

@@ -2,7 +2,7 @@
 // This one is styled to match the form-textfield component.
 // If `useSubmit` is true then it will automatically post to the config API onChange.
 
-import React, { useState, useContext } from 'react';
+import React, { useState, useContext, FC } from 'react';
 import { Switch } from 'antd';
 import {
   createInputStatus,
@@ -11,13 +11,12 @@ import {
   STATUS_PROCESSING,
   STATUS_SUCCESS,
 } from '../../utils/input-statuses';
-import FormStatusIndicator from './form-status-indicator';
+import { FormStatusIndicator } from './FormStatusIndicator';
 
 import { RESET_TIMEOUT, postConfigUpdateToAPI } from '../../utils/config-constants';
-
 import { ServerStatusContext } from '../../utils/server-status-context';
 
-interface ToggleSwitchProps {
+export type ToggleSwitchProps = {
   fieldName: string;
 
   apiPath?: string;
@@ -29,8 +28,20 @@ interface ToggleSwitchProps {
   tip?: string;
   useSubmit?: boolean;
   onChange?: (arg: boolean) => void;
-}
-export default function ToggleSwitch(props: ToggleSwitchProps) {
+};
+
+export const ToggleSwitch: FC<ToggleSwitchProps> = ({
+  apiPath,
+  checked,
+  reversed = false,
+  configPath = '',
+  disabled = false,
+  fieldName,
+  label,
+  tip,
+  useSubmit,
+  onChange,
+}) => {
   const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
 
   let resetTimer = null;
@@ -38,19 +49,6 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
   const serverStatusData = useContext(ServerStatusContext);
   const { setFieldInConfigState } = serverStatusData || {};
 
-  const {
-    apiPath,
-    checked,
-    reversed = false,
-    configPath = '',
-    disabled = false,
-    fieldName,
-    label,
-    tip,
-    useSubmit,
-    onChange,
-  } = props;
-
   const resetStates = () => {
     setSubmitStatus(null);
     clearTimeout(resetTimer);
@@ -107,7 +105,8 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
       </div>
     </div>
   );
-}
+};
+export default ToggleSwitch;
 
 ToggleSwitch.defaultProps = {
   apiPath: '',

web/components/config/VideoLatency.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState, useEffect } from 'react';
+import React, { useContext, useState, useEffect, FC } from 'react';
 import { Typography, Slider } from 'antd';
 import { ServerStatusContext } from '../../utils/server-status-context';
 import { AlertMessageContext } from '../../utils/alert-message-context';
@@ -14,7 +14,7 @@ import {
   STATUS_PROCESSING,
   STATUS_SUCCESS,
 } from '../../utils/input-statuses';
-import FormStatusIndicator from './form-status-indicator';
+import { FormStatusIndicator } from './FormStatusIndicator';
 
 const { Title } = Typography;
 
@@ -34,7 +34,7 @@ const SLIDER_COMMENTS = {
   4: 'Highest latency, highest error tolerance',
 };
 
-export default function VideoLatency() {
+export const VideoLatency: FC = () => {
   const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
   const [selectedOption, setSelectedOption] = useState(null);
 
@@ -130,4 +130,4 @@ export default function VideoLatency() {
       </div>
     </div>
   );
-}
+};

web/components/config/VideoVariantForm.tsx

@@ -1,10 +1,10 @@
 // This content populates the video variant modal, which is spawned from the variants table. This relies on the `dataState` prop fed in by the table.
-import React from 'react';
+import React, { FC } from 'react';
 import { Popconfirm, Row, Col, Slider, Collapse, Typography } from 'antd';
 import { ExclamationCircleFilled } from '@ant-design/icons';
 import classNames from 'classnames';
 import { FieldUpdaterFunc, VideoVariant, UpdateArgs } from '../../types/config-section';
-import TextField from './form-textfield';
+import { TextField } from './TextField';
 import {
   DEFAULT_VARIANT_STATE,
   VIDEO_VARIANT_SETTING_DEFAULTS,
@@ -17,19 +17,19 @@ import {
   FRAMERATE_DEFAULTS,
   FRAMERATE_TOOLTIPS,
 } from '../../utils/config-constants';
-import ToggleSwitch from './form-toggleswitch';
+import { ToggleSwitch } from './ToggleSwitch';
 
 const { Panel } = Collapse;
 
-interface VideoVariantFormProps {
+export type VideoVariantFormProps = {
   dataState: VideoVariant;
   onUpdateField: FieldUpdaterFunc;
-}
+};
 
-export default function VideoVariantForm({
+export const VideoVariantForm: FC<VideoVariantFormProps> = ({
   dataState = DEFAULT_VARIANT_STATE,
   onUpdateField,
-}: VideoVariantFormProps) {
+}) => {
   const videoPassthroughEnabled = dataState.videoPassthrough;
 
   const handleFramerateChange = (value: number) => {
@@ -314,4 +314,4 @@ export default function VideoVariantForm({
       </Collapse>
     </div>
   );
-}
+};

web/components/config/notification/browser.tsx

@@ -1,13 +1,13 @@
 import { Button, Typography } from 'antd';
 import React, { useState, useContext, useEffect } from 'react';
 import { ServerStatusContext } from '../../../utils/server-status-context';
-import TextField, { TEXTFIELD_TYPE_TEXTAREA } from '../form-textfield';
+import { TextField, TEXTFIELD_TYPE_TEXTAREA } from '../TextField';
 import {
   postConfigUpdateToAPI,
   RESET_TIMEOUT,
   BROWSER_PUSH_CONFIG_FIELDS,
 } from '../../../utils/config-constants';
-import ToggleSwitch from '../form-toggleswitch';
+import { ToggleSwitch } from '../ToggleSwitch';
 import {
   createInputStatus,
   StatusState,
@@ -15,11 +15,11 @@ import {
   STATUS_SUCCESS,
 } from '../../../utils/input-statuses';
 import { UpdateArgs } from '../../../types/config-section';
-import FormStatusIndicator from '../form-status-indicator';
+import { FormStatusIndicator } from '../FormStatusIndicator';
 
 const { Title } = Typography;
 
-export default function ConfigNotify() {
+export const ConfigNotify = () => {
   const serverStatusData = useContext(ServerStatusContext);
   const { serverConfig, setFieldInConfigState } = serverStatusData || {};
   const { notifications } = serverConfig || {};
@@ -126,4 +126,5 @@ export default function ConfigNotify() {
       <FormStatusIndicator status={submitStatus} />
     </>
   );
-}
+};
+export default ConfigNotify;

web/components/config/notification/discord.tsx

@@ -1,14 +1,14 @@
 import { Button, Typography } from 'antd';
 import React, { useState, useContext, useEffect } from 'react';
 import { ServerStatusContext } from '../../../utils/server-status-context';
-import TextField from '../form-textfield';
-import FormStatusIndicator from '../form-status-indicator';
+import { TextField } from '../TextField';
+import { FormStatusIndicator } from '../FormStatusIndicator';
 import {
   postConfigUpdateToAPI,
   RESET_TIMEOUT,
   DISCORD_CONFIG_FIELDS,
 } from '../../../utils/config-constants';
-import ToggleSwitch from '../form-toggleswitch';
+import { ToggleSwitch } from '../ToggleSwitch';
 import {
   createInputStatus,
   StatusState,
@@ -19,7 +19,7 @@ import { UpdateArgs } from '../../../types/config-section';
 
 const { Title } = Typography;
 
-export default function ConfigNotify() {
+export const ConfigNotify = () => {
   const serverStatusData = useContext(ServerStatusContext);
   const { serverConfig, setFieldInConfigState } = serverStatusData || {};
   const { notifications } = serverConfig || {};
@@ -150,4 +150,5 @@ export default function ConfigNotify() {
       <FormStatusIndicator status={submitStatus} />
     </>
   );
-}
+};
+export default ConfigNotify;

web/components/config/notification/federation.tsx

@@ -5,7 +5,7 @@ import { ServerStatusContext } from '../../../utils/server-status-context';
 
 const { Title } = Typography;
 
-export default function ConfigNotify() {
+export const ConfigNotify = () => {
   const serverStatusData = useContext(ServerStatusContext);
   const { serverConfig } = serverStatusData || {};
   const { federation } = serverConfig || {};
@@ -48,4 +48,5 @@ export default function ConfigNotify() {
       </Link>
     </>
   );
-}
+};
+export default ConfigNotify;

web/components/config/notification/twitter.tsx

@@ -1,14 +1,14 @@
 import { Button, Typography } from 'antd';
 import React, { useState, useContext, useEffect } from 'react';
 import { ServerStatusContext } from '../../../utils/server-status-context';
-import TextField, { TEXTFIELD_TYPE_PASSWORD } from '../form-textfield';
-import FormStatusIndicator from '../form-status-indicator';
+import { TextField, TEXTFIELD_TYPE_PASSWORD } from '../TextField';
+import { FormStatusIndicator } from '../FormStatusIndicator';
 import {
   postConfigUpdateToAPI,
   RESET_TIMEOUT,
   TWITTER_CONFIG_FIELDS,
 } from '../../../utils/config-constants';
-import ToggleSwitch from '../form-toggleswitch';
+import { ToggleSwitch } from '../ToggleSwitch';
 import {
   createInputStatus,
   StatusState,
@@ -16,11 +16,11 @@ import {
   STATUS_SUCCESS,
 } from '../../../utils/input-statuses';
 import { UpdateArgs } from '../../../types/config-section';
-import { TEXTFIELD_TYPE_TEXT } from '../form-textfield-with-submit';
+import { TEXTFIELD_TYPE_TEXT } from '../TextFieldWithSubmit';
 
 const { Title } = Typography;
 
-export default function ConfigNotify() {
+export const ConfigNotify = () => {
   const serverStatusData = useContext(ServerStatusContext);
   const { serverConfig, setFieldInConfigState } = serverStatusData || {};
   const { notifications } = serverConfig || {};
@@ -222,4 +222,5 @@ export default function ConfigNotify() {
       <FormStatusIndicator status={submitStatus} />
     </>
   );
-}
+};
+export default ConfigNotify;