Updates ESLint rules to error on default imports (#12512)

* add rule

* add named imports

* more missed files

* so many files

.eslintrc.js

@@ -15,5 +15,12 @@ module.exports = {
   },
   rules: {
     'no-console': ['error', { allow: ['error'] }],
+    'no-restricted-syntax': [
+      'error',
+      {
+        selector: 'ExportDefaultDeclaration',
+        message: 'Prefer named exports',
+      },
+    ],
   },
 };

app/javascript/actionsPanel/__tests__/initializeActionsPanelToggle.test.js

@@ -1,4 +1,4 @@
-import initializeActionsPanel from '../initializeActionsPanelToggle';
+import { initializeActionsPanel } from '../initializeActionsPanelToggle';
 
 describe('toggling the actions panel', () => {
   describe('when the page is the article show page', () => {

app/javascript/actionsPanel/initializeActionsPanelToggle.js

@@ -1,5 +1,5 @@
 /** This initializes the mod actions button on the article show page (app/views/articles/show.html.erb). */
-export default function initializeActionsPanel(user, path) {
+export function initializeActionsPanel(user, path) {
   const modActionsMenuHTML = `
     <iframe id="mod-container" src=${path}/actions_panel title="Moderation panel actions">
     </iframe>

app/javascript/admin/__tests__/controllers/article_controller.test.js

@@ -1,5 +1,5 @@
 import { Application } from 'stimulus';
-import ArticleController from '../../controllers/article_controller';
+import { ArticleController } from '../../controllers/article_controller';
 
 describe('ArticleController', () => {
   beforeEach(() => {

app/javascript/admin/__tests__/controllers/buffer_controller.test.js

@@ -1,5 +1,5 @@
 import { Application } from 'stimulus';
-import BufferController from '../../controllers/buffer_controller';
+import { BufferController } from '../../controllers/buffer_controller';
 
 describe('BufferController', () => {
   beforeEach(() => {

app/javascript/admin/__tests__/controllers/config_controller.test.js

@@ -1,5 +1,5 @@
 import { Application } from 'stimulus';
-import ConfigController from '../../controllers/config_controller';
+import { ConfigController } from '../../controllers/config_controller';
 
 describe('ConfigController', () => {
   beforeEach(() => {

app/javascript/admin/adminModal.js

@@ -14,7 +14,7 @@
  * @param {string} modalProps.leftCustomDataAttr A custom data attribute for the left button.
  * @param {string} modalProps.rightCustomDataAttr A custom data attribute for the right button.
  */
-const adminModal = function ({
+export const adminModal = function ({
   title,
   body,
   leftBtnText,
@@ -59,5 +59,3 @@ const adminModal = function ({
     </div>
   `;
 };
-
-export default adminModal;

app/javascript/admin/controllers/article_controller.js

@@ -1,6 +1,6 @@
 import { Controller } from 'stimulus';
 
-export default class ArticleController extends Controller {
+export class ArticleController extends Controller {
   static classes = ['bgHighlighted', 'borderHighlighted'];
   static targets = ['featuredNumber', 'cardBody'];
 

app/javascript/admin/controllers/buffer_controller.js

@@ -5,7 +5,7 @@ const CONFIRM_BADGE_HTML =
 const DISMISS_BADGE_HTML =
   '<span class="ml-2 badge badge-danger">Dismiss</span>';
 
-export default class BufferController extends Controller {
+export class BufferController extends Controller {
   static classes = ['bgHighlighted', 'borderHighlighted'];
   static targets = ['header', 'bodyText'];
 

app/javascript/admin/controllers/config_controller.js

@@ -1,6 +1,6 @@
 /* global jQuery */
 import { Controller } from 'stimulus';
-import adminModal from '../adminModal';
+import { adminModal } from '../adminModal';
 
 const recaptchaFields = document.getElementById('recaptchaContainer');
 const emailRegistrationCheckbox = document.getElementById(
@@ -17,7 +17,7 @@ const emailAuthModalBody = `
   <p>However, people who have already created an account using their email address can continue to login.</p>
   <p><strong>You must confirm and update site config to save below this action.</strong></p>`;
 
-export default class ConfigController extends Controller {
+export class ConfigController extends Controller {
   static targets = [
     'authenticationProviders',
     'authSectionForm',

app/javascript/admin/controllers/image_upload_controller.js

@@ -1,6 +1,6 @@
 import { Controller } from 'stimulus';
 
-export default class ImageUploadController extends Controller {
+export class ImageUploadController extends Controller {
   static targets = ['fileField', 'imageResult'];
   static values = { url: String };
 

app/javascript/admin/controllers/modal_controller.js

@@ -1,6 +1,6 @@
 import { Controller } from 'stimulus';
 
-export default class ModalController extends Controller {
+export class ModalController extends Controller {
   static classes = ['hidden'];
   static targets = ['toggle'];
 

app/javascript/admin/controllers/reaction_controller.js

@@ -1,6 +1,6 @@
 import { Controller } from 'stimulus';
 
-export default class ReactionController extends Controller {
+export class ReactionController extends Controller {
   static targets = ['invalid', 'confirmed'];
   static values = {
     id: Number,

app/javascript/analytics/dashboard.js

@@ -227,7 +227,7 @@ function drawInfinityCharts({ organizationId, articleId }) {
   callAnalyticsAPI(beginningOfTime, '', { organizationId, articleId });
 }
 
-export default function initCharts({ organizationId, articleId }) {
+export function initCharts({ organizationId, articleId }) {
   const weekButton = document.getElementById('week-button');
   weekButton.addEventListener(
     'click',

app/javascript/article-form/articleForm.jsx

@@ -14,7 +14,7 @@ import { Button, Modal } from '@crayons';
   editing are not used in this file, they are important to the
   editor.
 */
-export default class ArticleForm extends Component {
+export class ArticleForm extends Component {
   static handleGistPreview() {
     const els = document.getElementsByClassName('ltag_gist-liquid-tag');
     for (let i = 0; i < els.length; i += 1) {

app/javascript/article-form/components/TagsField.jsx

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import PropTypes from 'prop-types';
-import Tags from '../../shared/components/tags';
+import { Tags } from '../../shared/components/tags';
 
 export const DEFAULT_TAG_FORMAT = '[0-9A-Za-z, ]+';
 

app/javascript/chat/ChatChannelSettings/ActiveMembershipsSection.jsx

@@ -1,11 +1,11 @@
 import { h } from 'preact';
 import PropTypes from 'prop-types';
 
-import { defaulMembershipPropType } from '../../common-prop-types/membership-prop-type';
-import Membership from './Membership';
+import { defaultMembershipPropType } from '../../common-prop-types/membership-prop-type';
+import { Membership } from './Membership';
 import { Button } from '@crayons';
 
-const ActiveMembershipSection = ({
+export const ActiveMembershipsSection = ({
   activeMemberships,
   removeMembership,
   currentMembershipRole,
@@ -43,11 +43,9 @@ const ActiveMembershipSection = ({
   );
 };
 
-ActiveMembershipSection.propTypes = {
-  activeMemberships: PropTypes.arrayOf(defaulMembershipPropType).isRequired,
+ActiveMembershipsSection.propTypes = {
+  activeMemberships: PropTypes.arrayOf(defaultMembershipPropType).isRequired,
   removeMembership: PropTypes.func.isRequired,
   currentMembershipRole: PropTypes.string.isRequired,
   toggleScreens: PropTypes.func.isRequired,
 };
-
-export default ActiveMembershipSection;

app/javascript/chat/ChatChannelSettings/ChannelDescriptionSection.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import PropTypes from 'prop-types';
 
-const ChannelDescriptionSection = ({
+export const ChannelDescriptionSection = ({
   channelName,
   channelDescription,
   currentMembershipRole,
@@ -20,5 +20,3 @@ ChannelDescriptionSection.propTypes = {
   currentMembershipRole: PropTypes.string.isRequired,
   channelDescription: PropTypes.string.isRequired,
 };
-
-export default ChannelDescriptionSection;

app/javascript/chat/ChatChannelSettings/ChatChannelMembershipSection.jsx

@@ -1,12 +1,12 @@
 import { h } from 'preact';
 import PropTypes from 'prop-types';
 
-import { defaulMembershipPropType } from '../../common-prop-types/membership-prop-type';
-import ActiveMembershipSection from './ActiveMembershipsSection';
-import PendingMembershipSection from './PendingMembershipSection';
-import RequestedMembershipSection from './RequestedMembershipSection';
+import { defaultMembershipPropType } from '../../common-prop-types/membership-prop-type';
+import { ActiveMembershipsSection } from './ActiveMembershipsSection';
+import { PendingMembershipSection } from './PendingMembershipSection';
+import { RequestedMembershipSection } from './RequestedMembershipSection';
 
-const ChatChannelMembershipSection = ({
+export const ChatChannelMembershipSection = ({
   pendingMemberships,
   requestedMemberships,
   chatChannelAcceptMembership,
@@ -17,7 +17,7 @@ const ChatChannelMembershipSection = ({
 }) => {
   return (
     <div className="membership-list">
-      <ActiveMembershipSection
+      <ActiveMembershipsSection
         activeMemberships={activeMemberships}
         removeMembership={removeMembership}
         currentMembershipRole={currentMembershipRole}
@@ -39,13 +39,11 @@ const ChatChannelMembershipSection = ({
 };
 
 ChatChannelMembershipSection.propTypes = {
-  pendingMemberships: PropTypes.arrayOf(defaulMembershipPropType).isRequired,
-  requestedMemberships: PropTypes.arrayOf(defaulMembershipPropType).isRequired,
-  activeMemberships: PropTypes.arrayOf(defaulMembershipPropType).isRequired,
+  pendingMemberships: PropTypes.arrayOf(defaultMembershipPropType).isRequired,
+  requestedMemberships: PropTypes.arrayOf(defaultMembershipPropType).isRequired,
+  activeMemberships: PropTypes.arrayOf(defaultMembershipPropType).isRequired,
   removeMembership: PropTypes.func.isRequired,
   chatChannelAcceptMembership: PropTypes.func.isRequired,
   currentMembershipRole: PropTypes.string.isRequired,
   toggleScreens: PropTypes.func.isRequired,
 };
-
-export default ChatChannelMembershipSection;

app/javascript/chat/ChatChannelSettings/ChatChannelSettings.jsx

@@ -13,10 +13,10 @@ import {
 } from '../actions/chat_channel_setting_actions';
 
 import { addSnackbarItem } from '../../Snackbar';
-import ManageActiveMembership from './MembershipManager/ManageActiveMembership';
-import ChatChannelSettingsSection from './ChatChannelSettingsSection';
+import { ManageActiveMembership } from './MembershipManager/ManageActiveMembership';
+import { ChatChannelSettingsSection } from './ChatChannelSettingsSection';
 
-export default class ChatChannelSettings extends Component {
+export class ChatChannelSettings extends Component {
   static propTypes = {
     handleLeavingChannel: PropTypes.func.isRequired,
     activeMembershipId: PropTypes.number.isRequired,

app/javascript/chat/ChatChannelSettings/ChatChannelSettingsSection.jsx

@@ -1,14 +1,14 @@
 import { h } from 'preact';
 import PropTypes from 'prop-types';
 
-import ModSection from './ModSection';
-import PersonalSettings from './PersonalSetting';
-import LeaveMembershipSection from './LeaveMembershipSection';
-import ModFaqSection from './ModFaqSection';
-import ChannelDescriptionSection from './ChannelDescriptionSection';
-import ChatChannelMembershipSection from './ChatChannelMembershipSection';
+import { ModSection } from './ModSection';
+import { PersonalSettings } from './PersonalSetting';
+import { LeaveMembershipSection } from './LeaveMembershipSection';
+import { ModFaqSection } from './ModFaqSection';
+import { ChannelDescriptionSection } from './ChannelDescriptionSection';
+import { ChatChannelMembershipSection } from './ChatChannelMembershipSection';
 
-const ChatChannelSettingsSection = ({
+export const ChatChannelSettingsSection = ({
   channelDiscoverable,
   updateCurrentMembershipNotificationSettings,
   handleleaveChannelMembership,
@@ -101,5 +101,3 @@ ChatChannelSettingsSection.propTypes = {
   handlePersonChannelSetting: PropTypes.func.isRequired,
   updateCurrentMembershipNotificationSettings: PropTypes.func.isRequired,
 };
-
-export default ChatChannelSettingsSection;

app/javascript/chat/ChatChannelSettings/InviteForm.jsx

@@ -2,7 +2,7 @@ import { h } from 'preact';
 import PropTypes from 'prop-types';
 import { Button } from '@crayons';
 
-const InviteForm = ({
+export const InviteForm = ({
   handleChannelInvitations,
   invitationUsernames,
   handleInvitationUsernames,
@@ -40,5 +40,3 @@ InviteForm.propTypes = {
   handleChannelInvitations: PropTypes.func.isRequired,
   invitationUsernames: PropTypes.func.isRequired,
 };
-
-export default InviteForm;

app/javascript/chat/ChatChannelSettings/LeaveMembershipSection.jsx

@@ -2,7 +2,7 @@ import { h } from 'preact';
 import PropsType from 'prop-types';
 import { Button } from '@crayons';
 
-const LeaveMembershipSection = ({
+export const LeaveMembershipSection = ({
   handleleaveChannelMembership,
   currentMembershipRole,
 }) => {
@@ -30,5 +30,3 @@ const LeaveMembershipSection = ({
 LeaveMembershipSection.propTypes = {
   handleleaveChannelMembership: PropsType.func.isRequired,
 };
-
-export default LeaveMembershipSection;

app/javascript/chat/ChatChannelSettings/Membership.jsx

@@ -1,9 +1,9 @@
 import { h } from 'preact';
 import PropTypes from 'prop-types';
-import { defaulMembershipPropType } from '../../common-prop-types/membership-prop-type';
+import { defaultMembershipPropType } from '../../common-prop-types/membership-prop-type';
 import { Button } from '@crayons';
 
-const Membership = ({
+export const Membership = ({
   membership,
   removeMembership,
   membershipType,
@@ -54,11 +54,9 @@ const Membership = ({
 };
 
 Membership.propTypes = {
-  membership: PropTypes.objectOf(defaulMembershipPropType).isRequired,
+  membership: PropTypes.objectOf(defaultMembershipPropType).isRequired,
   removeMembership: PropTypes.func.isRequired,
   membershipType: PropTypes.func.isRequired,
   chatChannelAcceptMembership: PropTypes.func.isRequired,
   currentMembershipRole: PropTypes.string.isRequired,
 };
-
-export default Membership;

app/javascript/chat/ChatChannelSettings/MembershipManager/InvitationLinkManager.jsx

@@ -20,7 +20,7 @@ const CopyIcon = () => (
   </svg>
 );
 
-export default class InvitationLinkManager extends Component {
+export class InvitationLinkManager extends Component {
   static propTypes = {
     invitationLink: PropTypes.string.isRequired,
     currentMembership: PropTypes.isRequired,

app/javascript/chat/ChatChannelSettings/MembershipManager/ManageActiveMembership.jsx

@@ -1,10 +1,10 @@
 import { h, Component } from 'preact';
 import PropTypes from 'prop-types';
 
-import MembershipSection from './MembershipSection';
-import InvitationLinkManager from './InvitationLinkManager';
+import { MembershipSection } from './MembershipSection';
+import { InvitationLinkManager } from './InvitationLinkManager';
 
-export default class ManageActiveMembership extends Component {
+export class ManageActiveMembership extends Component {
   static propTypes = {
     activeMemberships: PropTypes.arrayOf(
       PropTypes.shape({

app/javascript/chat/ChatChannelSettings/MembershipManager/Membership.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import adminEmoji from '../../../../assets/images/emoji/apple-fire.png';
 import { Button } from '@crayons';
 
-const Membership = ({
+export const Membership = ({
   membership,
   currentMembership,
   removeMembership,
@@ -127,5 +127,3 @@ Membership.propTypes = {
   handleUpdateMembershipRole: PropTypes.func.isRequired,
   showActionButton: PropTypes.bool.isRequired,
 };
-
-export default Membership;

app/javascript/chat/ChatChannelSettings/MembershipManager/MembershipSection.jsx

@@ -1,8 +1,8 @@
 import { h } from 'preact';
 import PropTypes from 'prop-types';
-import Membership from './Membership';
+import { Membership } from './Membership';
 
-const MembershipSection = ({
+export const MembershipSection = ({
   memberships,
   currentMembership,
   removeMembership,
@@ -48,5 +48,3 @@ MembershipSection.propType = {
   handleUpdateMembershipRole: PropTypes.func.isRequired,
   membershipCount: PropTypes.number.isRequired,
 };
-
-export default MembershipSection;

app/javascript/chat/ChatChannelSettings/ModFaqSection.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import PropTypes from 'prop-types';
 
-const ModFaqSection = ({ currentMembershipRole }) => {
+export const ModFaqSection = ({ currentMembershipRole }) => {
   if (currentMembershipRole === 'member') {
     return null;
   }
@@ -26,5 +26,3 @@ const ModFaqSection = ({ currentMembershipRole }) => {
 ModFaqSection.propTypes = {
   currentMembershipRole: PropTypes.string.isRequired,
 };
-
-export default ModFaqSection;

app/javascript/chat/ChatChannelSettings/ModSection.jsx

@@ -1,10 +1,10 @@
 import { h } from 'preact';
 import PropTypes from 'prop-types';
 
-import InviteForm from './InviteForm';
-import SettingsForm from './SettingsForm';
+import { InviteForm } from './InviteForm';
+import { SettingsForm } from './SettingsForm';
 
-const ModSection = ({
+export const ModSection = ({
   handleChannelInvitations,
   invitationUsernames,
   handleInvitationUsernames,
@@ -47,5 +47,3 @@ ModSection.propTypes = {
   handleChannelDescriptionChanges: PropTypes.func.isRequired,
   channelDiscoverable: PropTypes.bool.isRequired,
 };
-
-export default ModSection;

app/javascript/chat/ChatChannelSettings/PendingMembershipSection.jsx

@@ -1,10 +1,10 @@
 import { h } from 'preact';
 import PropTypes from 'prop-types';
 
-import { defaulMembershipPropType } from '../../common-prop-types/membership-prop-type';
-import Membership from './Membership';
+import { defaultMembershipPropType } from '../../common-prop-types/membership-prop-type';
+import { Membership } from './Membership';
 
-const PendingMembershipSection = ({
+export const PendingMembershipSection = ({
   pendingMemberships,
   removeMembership,
   currentMembershipRole,
@@ -36,9 +36,7 @@ const PendingMembershipSection = ({
 };
 
 PendingMembershipSection.propTypes = {
-  pendingMemberships: PropTypes.arrayOf(defaulMembershipPropType).isRequired,
+  pendingMemberships: PropTypes.arrayOf(defaultMembershipPropType).isRequired,
   removeMembership: PropTypes.func.isRequired,
   currentMembershipRole: PropTypes.func.isRequired,
 };
-
-export default PendingMembershipSection;

app/javascript/chat/ChatChannelSettings/PersonalSetting.jsx

@@ -2,7 +2,7 @@ import { h } from 'preact';
 import PropTypes from 'prop-types';
 import { Button } from '@crayons';
 
-const PersonalSettings = ({
+export const PersonalSettings = ({
   handlePersonChannelSetting,
   showGlobalBadgeNotification,
   updateCurrentMembershipNotificationSettings,
@@ -40,5 +40,3 @@ PersonalSettings.propTypes = {
   showGlobalBadgeNotification: PropTypes.bool.isRequired,
   handlePersonChannelSetting: PropTypes.func.isRequired,
 };
-
-export default PersonalSettings;

app/javascript/chat/ChatChannelSettings/RequestedMembershipSection.jsx

@@ -1,10 +1,10 @@
 import { h } from 'preact';
 import PropTypes from 'prop-types';
-import { defaulMembershipPropType } from '../../common-prop-types/membership-prop-type';
+import { defaultMembershipPropType } from '../../common-prop-types/membership-prop-type';
 
-import Membership from './Membership';
+import { Membership } from './Membership';
 
-const RequestedMembershipSection = ({
+export const RequestedMembershipSection = ({
   requestedMemberships,
   removeMembership,
   chatChannelAcceptMembership,
@@ -39,10 +39,8 @@ const RequestedMembershipSection = ({
 };
 
 RequestedMembershipSection.propTypes = {
-  requestedMemberships: PropTypes.arrayOf(defaulMembershipPropType).isRequired,
+  requestedMemberships: PropTypes.arrayOf(defaultMembershipPropType).isRequired,
   removeMembership: PropTypes.func.isRequired,
   chatChannelAcceptMembership: PropTypes.func.isRequired,
   currentMembershipRole: PropTypes.func.isRequired,
 };
-
-export default RequestedMembershipSection;

app/javascript/chat/ChatChannelSettings/SettingsForm.jsx

@@ -2,7 +2,7 @@ import { h } from 'preact';
 import PropTypes from 'prop-types';
 import { Button } from '@crayons';
 
-const SettingsFrom = ({
+export const SettingsForm = ({
   channelDescription,
   handleDescriptionChange,
   channelDiscoverable,
@@ -51,12 +51,10 @@ const SettingsFrom = ({
   );
 };
 
-SettingsFrom.propTypes = {
+SettingsForm.propTypes = {
   channelDescription: PropTypes.string.isRequired,
   handleDescriptionChange: PropTypes.func.isRequired,
   handleChannelDiscoverableStatus: PropTypes.func.isRequired,
   handleChannelDescriptionChanges: PropTypes.func.isRequired,
   channelDiscoverable: PropTypes.bool.isRequired,
 };
-
-export default SettingsFrom;

app/javascript/chat/ReportAbuse/index.jsx

@@ -22,7 +22,7 @@ import { Button, FormField, RadioButton } from '@crayons';
  * />
  *
  */
-function ReportAbuse({ data, closeReportAbuseForm }) {
+export function ReportAbuse({ data, closeReportAbuseForm }) {
   const [category, setCategory] = useState(null);
 
   const handleChange = (e) => {
@@ -145,5 +145,3 @@ ReportAbuse.propTypes = {
     }),
   }).isRequired,
 };
-
-export default ReportAbuse;

app/javascript/chat/RequestManager/ChannelRequestSection.jsx

@@ -1,8 +1,8 @@
 import { h } from 'preact';
 import PropTypes from 'prop-types';
-import RequestListItem from './RequestListItem';
+import { RequestListItem } from './RequestListItem';
 
-const ChannelRequestSection = ({
+export const ChannelRequestSection = ({
   channelRequests,
   handleRequestApproval,
   handleRequestRejection,
@@ -46,5 +46,3 @@ ChannelRequestSection.propTypes = {
   handleRequestApproval: PropTypes.func.isRequired,
   handleRequestRejection: PropTypes.func.isRequired,
 };
-
-export default ChannelRequestSection;

app/javascript/chat/RequestManager/HeaderSection.jsx

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 
-const HeaderSection = ({}) => (
+export const HeaderSection = ({}) => (
   <div className="request_manager_header crayons-card mb-6 grid grid-flow-row gap-6 p-6">
     <h1>
       Request Center{' '}
@@ -10,5 +10,3 @@ const HeaderSection = ({}) => (
     </h1>
   </div>
 );
-
-export default HeaderSection;

app/javascript/chat/RequestManager/PersonalInvitationListItem.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import { Button } from '@crayons';
 
-const RequestListItem = ({ request, updateMembership }) => (
+export const PendingInvitationListItem = ({ request, updateMembership }) => (
   <div className="crayons-card mb-6">
     <div className="crayons-card__body channel-request-card">
       <div className="request-message d-flex flex-wrap">
@@ -40,7 +40,7 @@ const RequestListItem = ({ request, updateMembership }) => (
   </div>
 );
 
-RequestListItem.propTypes = {
+PendingInvitationListItem.propTypes = {
   request: PropTypes.arrayOf(
     PropTypes.shape({
       name: PropTypes.string.isRequired,
@@ -55,5 +55,3 @@ RequestListItem.propTypes = {
   ).isRequired,
   updateMembership: PropTypes.func.isRequired,
 };
-
-export default RequestListItem;

app/javascript/chat/RequestManager/PersonalInvitationSection.jsx

@@ -1,8 +1,11 @@
 import { h } from 'preact';
 import PropTypes from 'prop-types';
-import PendingInvitationListItem from './PersonalInvitationListItem';
+import { PendingInvitationListItem } from './PersonalInvitationListItem';
 
-const PersonalInvitationSection = ({ userInvitations, updateMembership }) => {
+export const PersonalInvitationSection = ({
+  userInvitations,
+  updateMembership,
+}) => {
   if (!userInvitations || userInvitations?.length < 0) {
     return null;
   }
@@ -40,5 +43,3 @@ PersonalInvitationSection.propTypes = {
   ).isRequired,
   updateMembership: PropTypes.func.isRequired,
 };
-
-export default PersonalInvitationSection;

app/javascript/chat/RequestManager/RequestListItem.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import { Button } from '@crayons';
 
-const RequestListItem = ({
+export const RequestListItem = ({
   request,
   handleRequestRejection,
   handleRequestApproval,
@@ -55,5 +55,3 @@ RequestListItem.propTypes = {
   handleRequestRejection: PropTypes.func.isRequired,
   handleRequestApproval: PropTypes.func.isRequired,
 };
-
-export default RequestListItem;

app/javascript/chat/RequestManager/RequestManager.jsx

@@ -8,11 +8,11 @@ import {
   acceptJoiningRequest,
   rejectJoiningRequest,
 } from '../actions/requestActions';
-import HeaderSection from './HeaderSection';
-import ChannelRequestSection from './ChannelRequestSection';
-import PersonalInvitations from './PersonalInvitationSection';
+import { HeaderSection } from './HeaderSection';
+import { ChannelRequestSection } from './ChannelRequestSection';
+import { PersonalInvitationSection } from './PersonalInvitationSection';
 
-export default class RequestManager extends Component {
+export class RequestManager extends Component {
   static propTypes = {
     resource: PropTypes.shape({
       data: PropTypes.object,
@@ -141,7 +141,7 @@ export default class RequestManager extends Component {
             handleRequestRejection={this.handleRejectJoingRequest}
             handleRequestApproval={this.handleAcceptJoingRequest}
           />
-          <PersonalInvitations
+          <PersonalInvitationSection
             userInvitations={userInvitations}
             updateMembership={this.handleIUpdateMembership}
           />

app/javascript/chat/__tests__/ManageActiveMembership.test.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { axe } from 'jest-axe';
-import ManageActiveMembership from '../ChatChannelSettings/MembershipManager/ManageActiveMembership';
+import { ManageActiveMembership } from '../ChatChannelSettings/MembershipManager/ManageActiveMembership';
 
 const currentModMembership = {
   name: 'dummy user',

app/javascript/chat/__tests__/Membership.test.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { axe } from 'jest-axe';
-import Membership from '../ChatChannelSettings/MembershipManager/Membership';
+import { Membership } from '../ChatChannelSettings/MembershipManager/Membership';
 
 const membershipData = {
   name: 'dummy Name',

app/javascript/chat/__tests__/PersonalInvitationListItem.test.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { axe } from 'jest-axe';
-import PersonalInvitationSection from '../RequestManager/PersonalInvitationSection';
+import { PersonalInvitationSection } from '../RequestManager/PersonalInvitationSection';
 
 const data = {
   request: {

app/javascript/chat/__tests__/PersonalInvitationSection.test.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { axe } from 'jest-axe';
-import PersonalInvitationSection from '../RequestManager/PersonalInvitationSection';
+import { PersonalInvitationSection } from '../RequestManager/PersonalInvitationSection';
 
 const data = {
   userInvitations: [

app/javascript/chat/__tests__/RequestListItem.test.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { axe } from 'jest-axe';
-import RequestListItem from '../RequestManager/RequestListItem';
+import { RequestListItem } from '../RequestManager/RequestListItem';
 
 const data = {
   request: {

app/javascript/chat/__tests__/activeMembershipsSection.test.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { axe } from 'jest-axe';
-import ActiveMembershipsSection from '../ChatChannelSettings/ActiveMembershipsSection';
+import { ActiveMembershipsSection } from '../ChatChannelSettings/ActiveMembershipsSection';
 
 function getEmptyMembershipData() {
   return {

app/javascript/chat/__tests__/alert.test.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { axe } from 'jest-axe';
-import Alert from '../alert';
+import { Alert } from '../alert';
 
 describe('<Alert />', () => {
   it('should have no a11y violations', async () => {

app/javascript/chat/__tests__/article.test.jsx

@@ -2,7 +2,7 @@ import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import fetch from 'jest-fetch-mock';
 import { axe } from 'jest-axe';
-import Article from '../article';
+import { Article } from '../article';
 
 global.fetch = fetch;
 

app/javascript/chat/__tests__/channelButton.test.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { axe } from 'jest-axe';
-import ChannelButton from '../components/ChannelButton';
+import { ChannelButton } from '../components/ChannelButton';
 
 const getChannel = () => {
   return {

app/javascript/chat/__tests__/channelRequest.test.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { axe } from 'jest-axe';
-import ChannelRequest from '../channelRequest';
+import { ChannelRequest } from '../channelRequest';
 
 const getResource = () => {
   return {

app/javascript/chat/__tests__/channelRequestSection.test.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { axe } from 'jest-axe';
-import ChannelRequestSection from '../RequestManager/ChannelRequestSection';
+import { ChannelRequestSection } from '../RequestManager/ChannelRequestSection';
 
 const data = {
   channelRequests: [

app/javascript/chat/__tests__/channels.test.jsx

@@ -2,7 +2,7 @@ import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { JSDOM } from 'jsdom';
 import { axe } from 'jest-axe';
-import Channels from '../channels';
+import { Channels } from '../channels';
 
 const doc = new JSDOM('<!doctype html><html><body></body></html>');
 global.document = doc;

app/javascript/chat/__tests__/chat.test.jsx

@@ -3,7 +3,7 @@ import { fireEvent, render } from '@testing-library/preact';
 import fetch from 'jest-fetch-mock';
 import { JSDOM } from 'jsdom';
 import { axe } from 'jest-axe';
-import Chat from '../chat';
+import { Chat } from '../chat';
 
 const doc = new JSDOM('<!doctype html><html><body></body></html>');
 global.document = doc;

app/javascript/chat/__tests__/chatChannelDescription.test.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { axe } from 'jest-axe';
-import ChannelDescriptionSection from '../ChatChannelSettings/ChannelDescriptionSection';
+import { ChannelDescriptionSection } from '../ChatChannelSettings/ChannelDescriptionSection';
 
 describe('<ChannelDescriptionSection />', () => {
   it('should have no a11y violations', async () => {

app/javascript/chat/__tests__/chatChannelMembersection.test.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { axe } from 'jest-axe';
-import ChatChannelMembershipSection from '../ChatChannelSettings/ChatChannelMembershipSection';
+import { ChatChannelMembershipSection } from '../ChatChannelSettings/ChatChannelMembershipSection';
 
 describe('<ChatChannelMembershipSection />', () => {
   it('should have no a11y violations', async () => {

app/javascript/chat/__tests__/chatChannelSettingActions.test.js

@@ -12,7 +12,7 @@ import {
 
 /* global globalThis */
 
-describe('Chat cahnnel API requestes', () => {
+describe('Chat channel API requests', () => {
   const csrfToken = 'this-is-a-csrf-token';
   const chanChannelMembershipId = 26; // Just a random chatChannelMembershipId ID.
   const channelId = 2;

app/javascript/chat/__tests__/chatChannelSettings.test.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { axe } from 'jest-axe';
-import ChatChannelSettings from '../ChatChannelSettings/ChatChannelSettings';
+import { ChatChannelSettings } from '../ChatChannelSettings/ChatChannelSettings';
 
 // TODO: These tests are imcomplete, but currently
 // this is simply a migration to preact-testing-library.

app/javascript/chat/__tests__/compose.test.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { render, fireEvent, createEvent } from '@testing-library/preact';
 import { axe } from 'jest-axe';
-import Compose from '../compose';
+import { Compose } from '../compose';
 
 let submitNoMessage = false;
 let submitWithMessage = false;

app/javascript/chat/__tests__/content.test.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { axe } from 'jest-axe';
-import Content from '../content';
+import { Content } from '../content';
 
 const getChannelRequestData = () => ({
   onTriggerContent: jest.fn(),

app/javascript/chat/__tests__/draw.test.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { axe } from 'jest-axe';
-import Draw from '../draw';
+import { Draw } from '../draw';
 
 describe('<Draw />', () => {
   it('should have no a11y violations', async () => {

app/javascript/chat/__tests__/invitationLinkManager.test.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { axe } from 'jest-axe';
-import InviationLinkManager from '../ChatChannelSettings/MembershipManager/InvitationLinkManager';
+import { InviationLinkManager } from '../ChatChannelSettings/MembershipManager/InvitationLinkManager';
 
 const currentModMembership = {
   name: 'dummy user',

app/javascript/chat/__tests__/inviteForm.test.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { axe } from 'jest-axe';
-import InviteForm from '../ChatChannelSettings/InviteForm';
+import { InviteForm } from '../ChatChannelSettings/InviteForm';
 
 describe('<InviteForm />', () => {
   it('should have no a11y violations', async () => {

app/javascript/chat/__tests__/leaveMembershipSection.test.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { axe } from 'jest-axe';
-import LeaveMembershipSection from '../ChatChannelSettings/LeaveMembershipSection';
+import { LeaveMembershipSection } from '../ChatChannelSettings/LeaveMembershipSection';
 
 describe('<LeaveMembershipSection />', () => {
   it('should have no a11y violations', async () => {

app/javascript/chat/__tests__/message.test.jsx

@@ -2,7 +2,7 @@ import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import '@testing-library/jest-dom';
 import { axe } from 'jest-axe';
-import Message from '../message';
+import { Message } from '../message';
 
 const msg = {
   username: 'asdf',

app/javascript/chat/__tests__/modFaqSection.test.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { axe } from 'jest-axe';
-import ModFaqSection from '../ChatChannelSettings/ModFaqSection';
+import { ModFaqSection } from '../ChatChannelSettings/ModFaqSection';
 
 describe('<ChannelDescriptionSection />', () => {
   it('should have no a11y violations', async () => {

app/javascript/chat/__tests__/modSection.test.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { axe } from 'jest-axe';
-import ModSection from '../ChatChannelSettings/ModSection';
+import { ModSection } from '../ChatChannelSettings/ModSection';
 
 describe('<ModSection />', () => {
   it('should have no a11y violations', async () => {

app/javascript/chat/__tests__/pendingMembershipsSection.test.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { axe } from 'jest-axe';
-import PendingMembershipSections from '../ChatChannelSettings/PendingMembershipSection';
+import { PendingMembershipSection } from '../ChatChannelSettings/PendingMembershipSection';
 
 function getEmptyMembershipData() {
   return {
@@ -28,14 +28,14 @@ function getMembershipData() {
   };
 }
 
-describe('<PendingMembershipSections />', () => {
+describe('<PendingMembershipSection />', () => {
   it('should have no a11y violations when there are no members', async () => {
     const {
       pendingMemberships,
       currentMembershipRole,
     } = getEmptyMembershipData();
     const { container } = render(
-      <PendingMembershipSections
+      <PendingMembershipSection
         pendingMemberships={pendingMemberships}
         currentMembershipRole={currentMembershipRole}
       />,
@@ -48,7 +48,7 @@ describe('<PendingMembershipSections />', () => {
   it('should have no a11y violations when there are members', async () => {
     const { pendingMemberships, currentMembershipRole } = getMembershipData();
     const { container } = render(
-      <PendingMembershipSections
+      <PendingMembershipSection
         pendingMemberships={pendingMemberships}
         currentMembershipRole={currentMembershipRole}
       />,
@@ -64,7 +64,7 @@ describe('<PendingMembershipSections />', () => {
       currentMembershipRole,
     } = getEmptyMembershipData();
     const { getByTestId } = render(
-      <PendingMembershipSections
+      <PendingMembershipSection
         pendingMemberships={pendingMemberships}
         currentMembershipRole={currentMembershipRole}
       />,
@@ -79,7 +79,7 @@ describe('<PendingMembershipSections />', () => {
   it('should render the membership list', () => {
     const { pendingMemberships, currentMembershipRole } = getMembershipData();
     const { getByTestId } = render(
-      <PendingMembershipSections
+      <PendingMembershipSection
         pendingMemberships={pendingMemberships}
         currentMembershipRole={currentMembershipRole}
       />,

app/javascript/chat/__tests__/personalSetting.test.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { axe } from 'jest-axe';
-import PersonalSettng from '../ChatChannelSettings/PersonalSetting';
+import { PersonalSettng } from '../ChatChannelSettings/PersonalSetting';
 
 describe('<PersonalSettng />', () => {
   it('should have no a11y violations', async () => {

app/javascript/chat/__tests__/reportAbuse.test.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { axe } from 'jest-axe';
-import ReportAbuse from '../ReportAbuse';
+import { ReportAbuse } from '../ReportAbuse';
 
 describe('<ReportAbuse />', () => {
   it('should have no a11y violations', async () => {

app/javascript/chat/__tests__/requestManager.test.jsx

@@ -3,7 +3,7 @@ import { render } from '@testing-library/preact';
 import fetch from 'jest-fetch-mock';
 import { axe } from 'jest-axe';
 import { beforeEach } from '@jest/globals';
-import RequestManager from '../RequestManager/RequestManager';
+import { RequestManager } from '../RequestManager/RequestManager';
 
 function getData() {
   const data = [

app/javascript/chat/__tests__/requestedMembershipSection.test.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { axe } from 'jest-axe';
-import RequestedMembershipSection from '../ChatChannelSettings/RequestedMembershipSection';
+import { RequestedMembershipSection } from '../ChatChannelSettings/RequestedMembershipSection';
 
 function getEmptyMembershipRequestsData() {
   return {

app/javascript/chat/__tests__/settingsForm.test.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { axe } from 'jest-axe';
-import SettingsForm from '../ChatChannelSettings/SettingsForm';
+import { SettingsForm } from '../ChatChannelSettings/SettingsForm';
 
 const data = {
   channelDescription: 'some description test',

app/javascript/chat/actionMessage.jsx

@@ -2,7 +2,7 @@ import { h } from 'preact';
 import PropTypes from 'prop-types';
 import { adjustTimestamp } from './util';
 
-const ActionMessage = ({
+export const ActionMessage = ({
   user,
   message,
   color,
@@ -86,5 +86,3 @@ ActionMessage.defaultProps = {
   profileImageUrl: '',
   timestamp: null,
 };
-
-export default ActionMessage;

app/javascript/chat/alert.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import PropTypes from 'prop-types';
 
-const Alert = ({ showAlert }) => {
+export const Alert = ({ showAlert }) => {
   const otherClassname = showAlert ? '' : 'chatalert__default--hidden';
 
   return (
@@ -18,5 +18,3 @@ const Alert = ({ showAlert }) => {
 Alert.propTypes = {
   showAlert: PropTypes.bool.isRequired,
 };
-
-export default Alert;

app/javascript/chat/article.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import PropTypes from 'prop-types';
 
-const Article = ({ resource: article }) => (
+export const Article = ({ resource: article }) => (
   <div className="activechatchannel__activeArticle">
     <iframe
       id="activecontent-iframe"
@@ -16,4 +16,3 @@ Article.propTypes = {
     id: PropTypes.string,
   }).isRequired,
 };
-export default Article;

app/javascript/chat/channelRequest.jsx

@@ -2,7 +2,7 @@ import { h } from 'preact';
 import PropTypes from 'prop-types';
 import { Button } from '@crayons';
 
-const ChannelRequest = ({ resource: data, handleJoiningRequest }) => (
+export const ChannelRequest = ({ resource: data, handleJoiningRequest }) => (
   <div>
     <div className="joining-message">
       <h2>Hey {data.user.name} !</h2>
@@ -45,4 +45,3 @@ ChannelRequest.propTypes = {
   }).isRequired,
   handleJoiningRequest: PropTypes.func.isRequired,
 };
-export default ChannelRequest;

app/javascript/chat/channels.jsx

@@ -2,10 +2,10 @@ import { h } from 'preact';
 import PropTypes from 'prop-types';
 // eslint-disable-next-line import/no-unresolved
 import ConfigImage from 'images/overflow-horizontal.svg';
-import ChannelButton from './components/ChannelButton';
+import { ChannelButton } from './components/ChannelButton';
 import { channelSorter } from './util';
 
-const Channels = ({
+export const Channels = ({
   activeChannelId,
   chatChannels,
   unopenedChannelIds,
@@ -132,5 +132,3 @@ Channels.propTypes = {
   channelsLoaded: PropTypes.bool.isRequired,
   currentUserId: PropTypes.string.isRequired,
 };
-
-export default Channels;

app/javascript/chat/chat.jsx

@@ -7,8 +7,8 @@
 import { h, Component } from 'preact';
 import PropTypes from 'prop-types';
 import { setupPusher } from '../utilities/connect';
-import notifyUser from '../utilities/connect/newMessageNotify';
-import debounceAction from '../utilities/debounceAction';
+import { notifyUser } from '../utilities/connect/newMessageNotify';
+import { debounceAction } from '../utilities/debounceAction';
 import { addSnackbarItem } from '../Snackbar';
 import { processImageUpload } from '../article-form/actions';
 import {
@@ -22,7 +22,7 @@ import {
   deleteMessage,
   editMessage,
 } from './actions/actions';
-import CreateChatModal from './components/CreateChatModal';
+import { CreateChatModal } from './components/CreateChatModal';
 import {
   sendChannelRequest,
   rejectJoiningRequest,
@@ -34,14 +34,13 @@ import {
   scrollToBottom,
   setupObserver,
   getCurrentUser,
-  channelSorter,
 } from './util';
-import Alert from './alert';
-import Channels from './channels';
-import Compose from './compose';
-import Message from './message';
-import ActionMessage from './actionMessage';
-import Content from './content';
+import { Alert } from './alert';
+import { Channels } from './channels';
+import { Compose } from './compose';
+import { Message } from './message';
+import { ActionMessage } from './actionMessage';
+import { Content } from './content';
 import { VideoContent } from './videoContent';
 import { DragAndDropZone } from '@utilities/dragAndDrop';
 import { dragAndUpload } from '@utilities/dragAndUpload';
@@ -50,7 +49,7 @@ import { Button } from '@crayons';
 const NARROW_WIDTH_LIMIT = 767;
 const WIDE_WIDTH_LIMIT = 1600;
 
-export default class Chat extends Component {
+export class Chat extends Component {
   static propTypes = {
     pusherKey: PropTypes.number.isRequired,
     chatChannels: PropTypes.string.isRequired,

app/javascript/chat/components/ChannelButton.jsx

@@ -2,7 +2,7 @@ import { h, createRef } from 'preact';
 import { useEffect } from 'preact/hooks';
 import PropTypes from 'prop-types';
 import { defaultChannelPropTypes } from '../../common-prop-types/channel-list-prop-type';
-import ChannelImage from './ChannelImage';
+import { ChannelImage } from './ChannelImage';
 import { Button } from '@crayons';
 
 /**
@@ -22,7 +22,7 @@ import { Button } from '@crayons';
  * />
  *
  */
-export default function ChannelButton(props) {
+export function ChannelButton(props) {
   const buttonRef = createRef();
   const { isActiveChannel = false } = props;
 

app/javascript/chat/components/ChannelImage.jsx

@@ -2,7 +2,7 @@ import { h } from 'preact';
 import PropTypes from 'prop-types';
 import { defaultChannelPropTypes } from '../../common-prop-types/channel-list-prop-type';
 
-export default function ChannelImage(props) {
+export function ChannelImage(props) {
   const { channel, newMessagesIndicator, discoverableChannel } = props;
 
   return (

app/javascript/chat/components/CreateChatModal.jsx

@@ -24,7 +24,7 @@ import { Modal, Button } from '@crayons';
  *
  */
 
-function CreateChatModal({
+export function CreateChatModal({
   toggleModalCreateChannel,
   handleCreateChannelSuccess,
 }) {
@@ -85,5 +85,3 @@ CreateChatModal.propTypes = {
   toggleModalCreateChannel: PropTypes.func.isRequired,
   handleCreateChannelSuccess: PropTypes.func.isRequired,
 };
-
-export default CreateChatModal;

app/javascript/chat/compose.jsx

@@ -3,7 +3,7 @@ import { useState, useEffect, useMemo } from 'preact/hooks';
 import PropTypes from 'prop-types';
 import Textarea from 'preact-textarea-autosize';
 
-const Compose = ({
+export const Compose = ({
   handleKeyDown,
   handleKeyDownEdit,
   handleSubmitOnClick,
@@ -123,5 +123,3 @@ Compose.propTypes = {
   handleFilePaste: PropTypes.func.isRequired,
   activeChannelName: PropTypes.string.isRequired,
 };
-
-export default Compose;

app/javascript/chat/content.jsx

@@ -1,11 +1,11 @@
 import { h, Component } from 'preact';
 import PropTypes from 'prop-types';
-import Article from './article';
-import ChannelRequest from './channelRequest';
-import RequestManager from './RequestManager/RequestManager';
-import ChatChannelSettings from './ChatChannelSettings/ChatChannelSettings';
-import Draw from './draw';
-import ReportAbuse from './ReportAbuse';
+import { Article } from './article';
+import { ChannelRequest } from './channelRequest';
+import { RequestManager } from './RequestManager/RequestManager';
+import { ChatChannelSettings } from './ChatChannelSettings/ChatChannelSettings';
+import { Draw } from './draw';
+import { ReportAbuse } from './ReportAbuse';
 
 const smartSvgIcon = (content, d) => (
   <svg
@@ -20,7 +20,7 @@ const smartSvgIcon = (content, d) => (
   </svg>
 );
 
-export default class Content extends Component {
+export class Content extends Component {
   static propTypes = {
     resource: PropTypes.shape({
       data: PropTypes.any,

app/javascript/chat/draw/index.jsx

@@ -16,7 +16,7 @@ import { Button } from '@crayons';
  * @param {object} props
  * @param {function} props.sendCanvasImage
  */
-function Draw({ sendCanvasImage }) {
+export function Draw({ sendCanvasImage }) {
   const canvasRef = useRef(null);
   const canvasWidth = useRef(null);
   const [isDrawing, setIsDrawing] = useState(false);
@@ -185,5 +185,3 @@ function usePrevious(value) {
 Draw.propTypes = {
   sendCanvasImage: PropTypes.func.isRequired,
 };
-
-export default Draw;

app/javascript/chat/message.jsx

@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 // eslint-disable-next-line import/no-unresolved
 import ThreeDotsIcon from 'images/overflow-horizontal.svg';
 import { adjustTimestamp } from './util';
-import ErrorMessage from './messages/errorMessage';
+import { ErrorMessage } from './messages/errorMessage';
 import { Button } from '@crayons';
 
-const Message = ({
+export const Message = ({
   currentUserId,
   id,
   user,
@@ -168,5 +168,3 @@ Message.defaultProps = {
   timestamp: null,
   profileImageUrl: '',
 };
-
-export default Message;

app/javascript/chat/messages/errorMessage.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import PropTypes from 'prop-types';
 
-const ErrorMessage = ({ message }) => {
+export const ErrorMessage = ({ message }) => {
   const errorStyle = { color: 'darksalmon', 'font-size': '13px' };
   return (
     <div className="chatmessage">
@@ -19,5 +19,3 @@ const ErrorMessage = ({ message }) => {
 ErrorMessage.propTypes = {
   message: PropTypes.string.isRequired,
 };
-
-export default ErrorMessage;

app/javascript/common-prop-types/membership-prop-type.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 
-export const defaulMembershipPropType = PropTypes.shape({
+export const defaultMembershipPropType = PropTypes.shape({
   name: PropTypes.string.isRequired,
   membership_id: PropTypes.number.isRequired,
   user_id: PropTypes.number.isRequired,

app/javascript/contentDisplayPolicy/hideBlockedContent.js

@@ -1,6 +1,6 @@
 /* global userData */
 
-export default function hideBlockedContent() {
+export function hideBlockedContent() {
   const contentUserElements = Array.from(
     document.querySelectorAll('div[data-content-user-id]'),
   );

app/javascript/contentDisplayPolicy/initHiddenComments.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-alert */
-export default function initHiddenComments() {
+export function initHiddenComments() {
   function hide(commentId) {
     const confirmMsg = `
 Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.

app/javascript/listings/__tests__/AllListings.test.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { axe } from 'jest-axe';
-import AllListings from '../components/AllListings';
+import { AllListings } from '../components/AllListings';
 import '../../../assets/javascripts/utilities/localDateTime';
 
 const firstListing = {

app/javascript/listings/__tests__/BodyMarkdown.test.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { render, fireEvent } from '@testing-library/preact';
 import { axe } from 'jest-axe';
-import BodyMarkdown from '../components/BodyMarkdown';
+import { BodyMarkdown } from '../components/BodyMarkdown';
 
 describe('<BodyMarkdown />', () => {
   const getProps = () => ({

app/javascript/listings/__tests__/ClearQueryButton.test.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { axe } from 'jest-axe';
-import ClearQueryButton from '../components/ClearQueryButton';
+import { ClearQueryButton } from '../components/ClearQueryButton';
 
 describe('<ClearQueryButton />', () => {
   it('has no a11y violations', async () => {

app/javascript/listings/__tests__/ContactViaConnect.test.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { render, fireEvent } from '@testing-library/preact';
 import { axe } from 'jest-axe';
-import ContactViaConnect from '../components/ContactViaConnect';
+import { ContactViaConnect } from '../components/ContactViaConnect';
 
 describe('<ContactViaConnect />', () => {
   it('should have no a11y violations', async () => {

app/javascript/listings/__tests__/ListingFilterTags.test.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { axe } from 'jest-axe';
-import ListingFiltersTags from '../components/ListingFiltersTags';
+import { ListingFiltersTags } from '../components/ListingFiltersTags';
 
 describe('<ListingFilterTags />', () => {
   const getTags = () => ['clojure', 'java', 'dotnet'];

app/javascript/listings/__tests__/ListingFiltersCategories.test.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { axe } from 'jest-axe';
-import ListingFiltersCategories from '../components/ListingFiltersCategories';
+import { ListingFiltersCategories } from '../components/ListingFiltersCategories';
 
 describe('<ListingFiltersCategories />', () => {
   beforeEach(() => {

app/javascript/listings/__tests__/MessageModal.test.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { axe } from 'jest-axe';
-import MessageModal from '../components/MessageModal';
+import { MessageModal } from '../components/MessageModal';
 
 const getDefaultListing = () => ({
   id: 22,

app/javascript/listings/__tests__/Modal.test.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { axe } from 'jest-axe';
-import Modal from '../components/Modal';
+import { Modal } from '../components/Modal';
 
 import '../../../assets/javascripts/utilities/localDateTime';
 

app/javascript/listings/__tests__/ModalBackground.test.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { axe } from 'jest-axe';
-import ModalBackground from '../components/ModalBackground';
+import { ModalBackground } from '../components/ModalBackground';
 
 describe('<ModalBackground />', () => {
   const defaultProps = {

app/javascript/listings/__tests__/NextPageButton.test.jsx

@@ -2,7 +2,7 @@ import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { axe } from 'jest-axe';
 
-import NextPageButton from '../components/NextPageButton';
+import { NextPageButton } from '../components/NextPageButton';
 
 describe('<NextPageButton />', () => {
   const defaultProps = {