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/action-buttons/ActionButton/ActionButton.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import ActionButton from './ActionButton';
+import { ActionButton } from './ActionButton';
 
 export default {
   title: 'owncast/Components/Action Buttons/Single button',

web/components/action-buttons/ActionButton/ActionButton.tsx

@@ -1,24 +1,21 @@
 import { Button } from 'antd';
-import { useState } from 'react';
-import Modal from '../../ui/Modal/Modal';
+import { FC, useState } from 'react';
+import { Modal } from '../../ui/Modal/Modal';
 import { ExternalAction } from '../../../interfaces/external-action';
-import s from './ActionButton.module.scss';
+import styles from './ActionButton.module.scss';
 
-interface Props {
+export type ActionButtonProps = {
   action: ExternalAction;
   primary?: boolean;
-}
-ActionButton.defaultProps = {
-  primary: true,
 };
 
-export default function ActionButton({
+export const ActionButton: FC<ActionButtonProps> = ({
   action: { url, title, description, icon, color, openExternally },
-  primary = false,
-}: Props) {
+  primary = true,
+}) => {
   const [showModal, setShowModal] = useState(false);
 
-  const buttonClicked = () => {
+  const onButtonClicked = () => {
     if (openExternally) {
       window.open(url, '_blank');
     } else {
@@ -30,11 +27,11 @@ export default function ActionButton({
     <>
       <Button
         type={primary ? 'primary' : 'default'}
-        className={`${s.button}`}
-        onClick={buttonClicked}
+        className={`${styles.button}`}
+        onClick={onButtonClicked}
         style={{ backgroundColor: color }}
       >
-        <img src={icon} className={`${s.icon}`} alt={description} />
+        <img src={icon} className={`${styles.icon}`} alt={description} />
         {title}
       </Button>
       <Modal
@@ -46,4 +43,4 @@ export default function ActionButton({
       />
     </>
   );
-}
+};

web/components/action-buttons/ActionButtonRow/ActionButtonRow.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import ActionButtonRow from './ActionButtonRow';
-import ActionButton from '../ActionButton/ActionButton';
+import { ActionButtonRow } from './ActionButtonRow';
+import { ActionButton } from '../ActionButton/ActionButton';
 
 export default {
   title: 'owncast/Components/Action Buttons/Buttons Row',

web/components/action-buttons/ActionButtonRow/ActionButtonRow.tsx

@@ -1,12 +1,10 @@
-import React from 'react';
-import s from './ActionButtonRow.module.scss';
+import { FC, ReactNode } from 'react';
+import styles from './ActionButtonRow.module.scss';
 
-interface Props {
-  children: React.ReactNode[];
-}
+export type ActionButtonRowProps = {
+  children: ReactNode;
+};
 
-export default function ActionButtonRow(props: Props) {
-  const { children } = props;
-
-  return <div className={`${s.row}`}>{children}</div>;
-}
+export const ActionButtonRow: FC<ActionButtonRowProps> = ({ children }) => (
+  <div className={`${styles.row}`}>{children}</div>
+);

web/components/action-buttons/FollowButton.tsx

@@ -1,31 +1,29 @@
-import { Button } from 'antd';
+import { Button, ButtonProps } from 'antd';
 import { HeartFilled } from '@ant-design/icons';
-import { useState } from 'react';
+import { FC, useState } from 'react';
 import { useRecoilValue } from 'recoil';
-import Modal from '../ui/Modal/Modal';
-import FollowModal from '../modals/FollowModal/FollowModal';
-import s from './ActionButton/ActionButton.module.scss';
+import { Modal } from '../ui/Modal/Modal';
+import { FollowModal } from '../modals/FollowModal/FollowModal';
+import styles from './ActionButton/ActionButton.module.scss';
 import { clientConfigStateAtom } from '../stores/ClientConfigStore';
 import { ClientConfig } from '../../interfaces/client-config.model';
 
-export default function FollowButton(props: any) {
+export type FollowButtonProps = ButtonProps;
+
+export const FollowButton: FC<FollowButtonProps> = props => {
   const [showModal, setShowModal] = useState(false);
   const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
   const { name, federation } = clientConfig;
   const { account } = federation;
 
-  const buttonClicked = () => {
-    setShowModal(true);
-  };
-
   return (
     <>
       <Button
         {...props}
         type="primary"
-        className={s.button}
+        className={styles.button}
         icon={<HeartFilled />}
-        onClick={buttonClicked}
+        onClick={() => setShowModal(true)}
       >
         Follow
       </Button>
@@ -40,4 +38,4 @@ export default function FollowButton(props: any) {
       </Modal>
     </>
   );
-}
+};

web/components/action-buttons/NotifyButton.tsx

@@ -1,15 +1,14 @@
 import { Button } from 'antd';
 import { BellFilled } from '@ant-design/icons';
-import s from './ActionButton/ActionButton.module.scss';
+import { FC } from 'react';
+import styles from './ActionButton/ActionButton.module.scss';
 
-interface Props {
-  onClick: () => void;
-}
+export type NotifyButtonProps = {
+  onClick?: () => void;
+};
 
-export default function NotifyButton({ onClick }: Props) {
-  return (
-    <Button type="primary" className={`${s.button}`} icon={<BellFilled />} onClick={onClick}>
-      Notify
-    </Button>
-  );
-}
+export const NotifyButton: FC<NotifyButtonProps> = ({ onClick }) => (
+  <Button type="primary" className={`${styles.button}`} icon={<BellFilled />} onClick={onClick}>
+    Notify
+  </Button>
+);