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/common/ContentHeader/ContentHeader.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import ContentHeader from './ContentHeader';
+import { ContentHeader } from './ContentHeader';
 
 export default {
   title: 'owncast/Components/Content Header',

web/components/common/ContentHeader/ContentHeader.tsx

@@ -1,36 +1,42 @@
 import cn from 'classnames';
-
-import { ServerLogo } from '../../ui';
-import SocialLinks from '../../ui/SocialLinks/SocialLinks';
+import { FC } from 'react';
+import { Logo } from '../../ui/Logo/Logo';
+import { SocialLinks } from '../../ui/SocialLinks/SocialLinks';
 import { SocialLink } from '../../../interfaces/social-link.model';
-import s from './ContentHeader.module.scss';
+import styles from './ContentHeader.module.scss';
 
-interface Props {
+export type ContentHeaderProps = {
   name: string;
   title: string;
   summary: string;
   tags: string[];
   links: SocialLink[];
   logo: string;
-}
-export default function ContentHeader({ name, title, summary, logo, tags, links }: Props) {
-  return (
-    <div className={s.root}>
-      <div className={s.logoTitleSection}>
-        <div className={s.logo}>
-          <ServerLogo src={logo} />
+};
+
+export const ContentHeader: FC<ContentHeaderProps> = ({
+  name,
+  title,
+  summary,
+  logo,
+  tags,
+  links,
+}) => (
+  <div className={styles.root}>
+    <div className={styles.logoTitleSection}>
+      <div className={styles.logo}>
+        <Logo src={logo} />
+      </div>
+      <div className={styles.titleSection}>
+        <div className={cn(styles.title, styles.row)}>{name}</div>
+        <div className={cn(styles.subtitle, styles.row)}>{title || summary}</div>
+        <div className={cn(styles.tagList, styles.row)}>
+          {tags.length > 0 && tags.map(tag => <span key={tag}>#{tag}&nbsp;</span>)}
         </div>
-        <div className={s.titleSection}>
-          <div className={cn(s.title, s.row)}>{name}</div>
-          <div className={cn(s.subtitle, s.row)}>{title || summary}</div>
-          <div className={cn(s.tagList, s.row)}>
-            {tags.length > 0 && tags.map(tag => <span key={tag}>#{tag}&nbsp;</span>)}
-          </div>
-          <div className={cn(s.socialLinks, s.row)}>
-            <SocialLinks links={links} />
-          </div>
+        <div className={cn(styles.socialLinks, styles.row)}>
+          <SocialLinks links={links} />
         </div>
       </div>
     </div>
-  );
-}
+  </div>
+);

web/components/common/ContentHeader/index.ts

@@ -1 +0,0 @@
-export { default } from './ContentHeader';

web/components/common/Logo/index.ts

@@ -1 +0,0 @@
-export { default } from './Logo';

web/components/common/OwncastLogo/OwncastLogo.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import OwncastLogo from './Logo';
+import { OwncastLogo } from './OwncastLogo';
 
 export default {
   title: 'owncast/Components/Header Logo',

web/components/common/OwncastLogo/OwncastLogo.tsx

@@ -1,15 +1,15 @@
-import React from 'react';
+import React, { FC } from 'react';
 import cn from 'classnames';
-import s from './Logo.module.scss';
+import styles from './OwncastLogo.module.scss';
 
-interface Props {
+export type LogoProps = {
   variant: 'simple' | 'contrast';
-}
+};
 
-export default function Logo({ variant = 'simple' }: Props) {
-  const rootClassName = cn(s.root, {
-    [s.simple]: variant === 'simple',
-    [s.contrast]: variant === 'contrast',
+export const OwncastLogo: FC<LogoProps> = ({ variant = 'simple' }) => {
+  const rootClassName = cn(styles.root, {
+    [styles.simple]: variant === 'simple',
+    [styles.contrast]: variant === 'contrast',
   });
 
   return (
@@ -169,4 +169,4 @@ export default function Logo({ variant = 'simple' }: Props) {
       </svg>
     </div>
   );
-}
+};

web/components/common/UserDropdown/UserDropdown.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { RecoilRoot } from 'recoil';
-import UserDropdown from './UserDropdown';
+import { UserDropdown } from './UserDropdown';
 
 export default {
   title: 'owncast/Components/User settings menu',

web/components/common/UserDropdown/UserDropdown.tsx

@@ -7,24 +7,24 @@ import {
   UserOutlined,
 } from '@ant-design/icons';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { useState } from 'react';
+import { FC, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
-import Modal from '../../ui/Modal/Modal';
+import { Modal } from '../../ui/Modal/Modal';
 import {
   chatVisibleToggleAtom,
   chatDisplayNameAtom,
   appStateAtom,
 } from '../../stores/ClientConfigStore';
-import s from './UserDropdown.module.scss';
-import NameChangeModal from '../../modals/NameChangeModal/NameChangeModal';
+import styles from './UserDropdown.module.scss';
+import { NameChangeModal } from '../../modals/NameChangeModal/NameChangeModal';
 import { AppStateOptions } from '../../stores/application-state';
-import AuthModal from '../../modals/AuthModal/AuthModal';
+import { AuthModal } from '../../modals/AuthModal/AuthModal';
 
-interface Props {
+export type UserDropdownProps = {
   username?: string;
-}
+};
 
-export default function UserDropdown({ username: defaultUsername }: Props) {
+export const UserDropdown: FC<UserDropdownProps> = ({ username: defaultUsername = undefined }) => {
   const username = defaultUsername || useRecoilValue(chatDisplayNameAtom);
   const [showNameChangeModal, setShowNameChangeModal] = useState<boolean>(false);
   const [showAuthModal, setShowAuthModal] = useState<boolean>(false);
@@ -66,7 +66,7 @@ export default function UserDropdown({ username: defaultUsername }: Props) {
   );
 
   return (
-    <div className={`${s.root}`}>
+    <div className={`${styles.root}`}>
       <Dropdown overlay={menu} trigger={['click']}>
         <Button type="primary" icon={<UserOutlined style={{ marginRight: '.5rem' }} />}>
           <Space>
@@ -91,8 +91,4 @@ export default function UserDropdown({ username: defaultUsername }: Props) {
       </Modal>
     </div>
   );
-}
-
-UserDropdown.defaultProps = {
-  username: undefined,
 };

web/components/common/UserDropdown/index.ts

@@ -1 +0,0 @@
-export { default } from './UserDropdown';

web/components/common/index.ts

@@ -1,2 +0,0 @@
-export { default as UserDropdown } from './UserDropdown';
-export { default as OwncastLogo } from './Logo';