use named imports

frontend/app/__stubs__/store.ts

@@ -2,6 +2,4 @@ import createMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const mockStore = createMockStore<any, any>([thunk]);
-
-export default mockStore;
+export const mockStore = createMockStore<any, any>([thunk]);

frontend/app/common/api.getLastComments.ts

@@ -1,6 +1,6 @@
 import { Comment } from './types';
 import { apiFetcher } from './fetcher';
 
-export default function getLastComments(siteId: string, max: number): Promise<Comment[]> {
+export function getLastComments(siteId: string, max: number): Promise<Comment[]> {
   return apiFetcher.get(`/last/${max}`, { site: siteId });
 }

frontend/app/common/copy.ts

@@ -1,5 +1,5 @@
 // based on https://github.com/sindresorhus/copy-text-to-clipboard, but improved to copy text styles too
-export default function copy(input: string): boolean {
+export function copy(input: string): boolean {
   const element = document.createElement('textarea') as HTMLTextAreaElement;
   const previouslyFocusedElement = document.activeElement as HTMLElement;
 

frontend/app/common/settings.ts

@@ -1,4 +1,4 @@
-import parseQuery from 'utils/parseQuery';
+import { parseQuery } from 'utils/parseQuery';
 
 import type { Theme } from './types';
 import { THEMES, MAX_SHOWN_ROOT_COMMENTS } from './constants';

frontend/app/common/user-info-settings.ts

@@ -1,4 +1,4 @@
-import parseQuery from 'utils/parseQuery';
+import { parseQuery } from 'utils/parseQuery';
 
 import type { UserInfo } from './types';
 

frontend/app/components/auth-panel/auth-panel.test.tsx

@@ -8,7 +8,7 @@ import { IntlProvider } from 'react-intl';
 import type { User } from 'common/types';
 import enMessages from 'locales/en.json';
 
-import AuthPanel, { Props } from './auth-panel';
+import { AuthPanel, Props } from './auth-panel';
 
 const DefaultProps = {
   postInfo: {

frontend/app/components/auth-panel/auth-panel.tsx

@@ -6,16 +6,15 @@ import b from 'bem-react-helper';
 import { User, Sorting, Theme, PostInfo } from 'common/types';
 import { IS_STORAGE_AVAILABLE, IS_THIRD_PARTY } from 'common/constants';
 import { requestDeletion } from 'utils/email';
-import postMessage from 'utils/postMessage';
+import { postMessage } from 'utils/postMessage';
 import { getHandleClickProps } from 'common/accessibility';
 import { StoreState } from 'store';
 import { Dropdown, DropdownItem } from 'components/dropdown';
 import { Button } from 'components/button';
-import Auth from 'components/auth';
+import { Auth } from 'components/auth';
+import { useTheme } from 'hooks/useTheme';
 
-import useTheme from 'hooks/useTheme';
-
-export interface OwnProps {
+interface OwnProps {
   user: User | null;
   hiddenUsers: StoreState['hiddenUsers'];
   isCommentsDisabled: boolean;
@@ -40,7 +39,7 @@ interface State {
   sortSelectFocused: boolean;
 }
 
-export class AuthPanel extends Component<Props, State> {
+class AuthPanelComponent extends Component<Props, State> {
   state = {
     isBlockedVisible: false,
     anonymousUsernameInputValue: 'anon',
@@ -319,10 +318,10 @@ function getSortArray(currentSort: Sorting, intl: IntlShape) {
   });
 }
 
-export default function AuthPanelConnected(props: OwnProps) {
+export function AuthPanel(props: OwnProps) {
   const intl = useIntl();
   const theme = useTheme();
   const sort = useSelector<StoreState, Sorting>((state) => state.comments.sort);
 
-  return <AuthPanel intl={intl} theme={theme} sort={sort} {...props} />;
+  return <AuthPanelComponent intl={intl} theme={theme} sort={sort} {...props} />;
 }

frontend/app/components/auth-panel/index.ts

@@ -15,4 +15,4 @@ import './_theme/_light/auth-panel_theme_light.css';
 
 import './_logged-in/auth-panel_logged-in.css';
 
-export { default } from './auth-panel';
+export * from './auth-panel';

frontend/app/components/auth/auth.messsages.ts

@@ -1,6 +1,6 @@
 import { defineMessages } from 'react-intl';
 
-const messages = defineMessages({
+export const messages = defineMessages({
   signin: {
     id: 'auth.signin',
     defaultMessage: 'Sign In',
@@ -58,5 +58,3 @@ const messages = defineMessages({
     defaultMessage: 'Submit',
   },
 });
-
-export default messages;

frontend/app/components/auth/auth.spec.tsx

@@ -5,7 +5,7 @@ import { fireEvent, render, waitFor } from '@testing-library/preact';
 import { OAuthProvider, User } from 'common/types';
 import { StaticStore } from 'common/static-store';
 
-import Auth from './auth';
+import { Auth } from './auth';
 import * as utils from './auth.utils';
 import * as api from './auth.api';
 import { getProviderData } from './components/oauth.utils';
@@ -14,7 +14,9 @@ jest.mock('react-redux', () => ({
   useDispatch: () => jest.fn(),
 }));
 
-jest.mock('hooks/useTheme', () => () => 'light');
+jest.mock('hooks/useTheme', () => ({
+  useTheme: () => 'light',
+}));
 
 describe('<Auth/>', () => {
   let defaultProviders = StaticStore.config.auth_providers;

frontend/app/components/auth/auth.tsx

@@ -6,18 +6,18 @@ import { useDispatch } from 'react-redux';
 
 import { setUser } from 'store/user/actions';
 import { Input } from 'components/input';
-import TextareaAutosize from 'components/textarea-autosize';
+import { TextareaAutosize } from 'components/textarea-autosize';
 
-import Button from './components/button';
-import OAuthProviders from './components/oauth';
-import messages from './auth.messsages';
+import { Button } from './components/button';
+import { OAuth } from './components/oauth';
+import { messages } from './auth.messsages';
 import { useDropdown } from './auth.hooks';
 import { getProviders, getTokenInvalidReason } from './auth.utils';
 import { emailSignin, verifyEmailSignin, anonymousSignin } from './auth.api';
 
 import styles from './auth.module.css';
 
-export default function Auth() {
+export function Auth() {
   const intl = useIntl();
   const dispath = useDispatch();
   const [oauthProviders, formProviders] = getProviders();
@@ -197,7 +197,7 @@ export default function Auth() {
                 {hasOAuthProviders && (
                   <>
                     <h5 className={cn('auth-form-title', styles.title)}>{intl.formatMessage(messages.oauthSource)}</h5>
-                    <OAuthProviders providers={oauthProviders} />
+                    <OAuth providers={oauthProviders} />
                   </>
                 )}
                 {hasOAuthProviders && hasFormProviders && (

frontend/app/components/auth/auth.utils.ts

@@ -3,7 +3,7 @@ import { StaticStore } from 'common/static-store';
 import type { FormProvider, OAuthProvider } from 'common/types';
 
 import { OAUTH_PROVIDERS } from './components/oauth.consts';
-import messages from './auth.messsages';
+import { messages } from './auth.messsages';
 
 export function getProviders(): [OAuthProvider[], FormProvider[]] {
   const oauthProviders: OAuthProvider[] = [];

frontend/app/components/auth/components/button.tsx

@@ -1,25 +1,23 @@
-import { h, FunctionComponent, JSX, VNode } from 'preact';
+import { h, JSX, VNode } from 'preact';
 import classnames from 'classnames/bind';
 
 import styles from './button.module.css';
 
 const cx = classnames.bind(styles);
 
-export type ButtonProps = Omit<JSX.HTMLAttributes<HTMLButtonElement>, 'size'> & {
+type Props = Omit<JSX.HTMLAttributes<HTMLButtonElement>, 'size'> & {
   size?: 'small';
   kind?: 'transparent';
   suffix?: VNode;
   loading?: boolean;
   selected?: boolean;
 };
 
-const Button: FunctionComponent<ButtonProps> = ({ children, size, kind, suffix, selected, className, ...props }) => {
+export function Button({ children, size, kind, suffix, selected, className, ...props }: Props) {
   return (
     <button className={cx(className, styles.button, kind, size, { selected })} {...props}>
       {children}
       {suffix && <div className={styles.suffix}>{suffix}</div>}
     </button>
   );
-};
-
-export default Button;
+}

frontend/app/components/auth/components/oauth.spec.tsx

@@ -5,14 +5,16 @@ import type { User } from 'common/types';
 import * as userActions from 'store/user/actions';
 import { BASE_URL } from 'common/constants.config';
 
-import OAuth from './oauth';
+import { OAuth } from './oauth';
 import * as api from './oauth.api';
 
 jest.mock('react-redux', () => ({
   useDispatch: () => jest.fn(),
 }));
 
-jest.mock('hooks/useTheme', () => () => 'light');
+jest.mock('hooks/useTheme', () => ({
+  useTheme: () => 'light',
+}));
 
 describe('<OAuth />', () => {
   it('should have permanent class name', () => {

frontend/app/components/auth/components/oauth.tsx

@@ -3,25 +3,25 @@ import { useDispatch } from 'react-redux';
 import cn from 'classnames';
 import { useIntl } from 'react-intl';
 
-import { siteId } from 'common/settings';
 import type { OAuthProvider } from 'common/types';
-import useTheme from 'hooks/useTheme';
+import { siteId } from 'common/settings';
+import { useTheme } from 'hooks/useTheme';
 import { setUser } from 'store/user/actions';
 
-import messages from 'components/auth/auth.messsages';
+import { messages } from 'components/auth/auth.messsages';
 
-import { getButtonVariant, getProviderData } from './oauth.utils';
 import { oauthSignin } from './oauth.api';
-import styles from './oauth.module.css';
 import { BASE_URL } from 'common/constants.config';
+import { getButtonVariant, getProviderData } from './oauth.utils';
+import styles from './oauth.module.css';
 
 const location = encodeURIComponent(`${window.location.origin}${window.location.pathname}?selfClose`);
 
 type Props = {
   providers: OAuthProvider[];
 };
 
-export default function OAuthProviders({ providers }: Props) {
+export function OAuth({ providers }: Props) {
   const intl = useIntl();
   const dispath = useDispatch();
   const theme = useTheme();

frontend/app/components/auth/components/oauth.utils.ts

@@ -1,5 +1,5 @@
 import { OAuthProvider, Theme } from 'common/types';
-import capitalizeFirstLetter from 'utils/capitalize-first-letter';
+import { capitalizeFirstLetter } from 'utils/capitalize-first-letter';
 
 import { OAUTH_DATA } from './oauth.consts';
 

frontend/app/components/auth/index.ts

@@ -1 +1 @@
-export { default } from './auth';
+export * from './auth';

frontend/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.tsx

@@ -10,14 +10,14 @@ import { StoreState } from 'store';
 import { setUserSubscribed } from 'store/user/actions';
 import { sleep } from 'utils/sleep';
 import { extractErrorMessageFromResponse } from 'utils/errorUtils';
-import useTheme from 'hooks/useTheme';
+import { useTheme } from 'hooks/useTheme';
 import { getHandleClickProps } from 'common/accessibility';
 import { emailVerificationForSubscribe, emailConfirmationForSubscribe, unsubscribeFromEmailUpdates } from 'common/api';
 import { Input } from 'components/input';
 import { Button } from 'components/button';
 import { Dropdown } from 'components/dropdown';
-import Preloader from 'components/preloader';
-import TextareaAutosize from 'components/textarea-autosize';
+import { Preloader } from 'components/preloader';
+import { TextareaAutosize } from 'components/textarea-autosize';
 import { isUserAnonymous } from 'utils/isUserAnonymous';
 import { isJwtExpired } from 'utils/jwt';
 

frontend/app/components/comment-form/__subscribe-by-rss/comment-form__subscribe-by-rss.tsx

@@ -2,7 +2,7 @@ import { h, FunctionComponent } from 'preact';
 import { useMemo } from 'preact/hooks';
 import { useIntl, defineMessages } from 'react-intl';
 
-import useTheme from 'hooks/useTheme';
+import { useTheme } from 'hooks/useTheme';
 import { siteId, url } from 'common/settings';
 import { BASE_URL, API_BASE } from 'common/constants';
 import { Dropdown, DropdownItem } from 'components/dropdown';

frontend/app/components/comment-form/comment-form.test.tsx

@@ -5,7 +5,7 @@ import { user, anonymousUser } from '__stubs__/user';
 import { StaticStore } from 'common/static-store';
 import { LS_SAVED_COMMENT_VALUE } from 'common/constants';
 import * as localStorageModule from 'common/local-storage';
-import TextareaAutosize from 'components/textarea-autosize';
+import { TextareaAutosize } from 'components/textarea-autosize';
 
 import { CommentForm, CommentFormProps, messages } from './comment-form';
 import { SubscribeByEmail } from './__subscribe-by-email';

frontend/app/components/comment-form/comment-form.tsx

@@ -10,15 +10,15 @@ import { isUserAnonymous } from 'utils/isUserAnonymous';
 import { sleep } from 'utils/sleep';
 import { replaceSelection } from 'utils/replaceSelection';
 import { Button } from 'components/button';
-import TextareaAutosize from 'components/textarea-autosize';
-import Auth from 'components/auth';
+import { TextareaAutosize } from 'components/textarea-autosize';
+import { Auth } from 'components/auth';
 import { getJsonItem, updateJsonItem } from 'common/local-storage';
 import { LS_SAVED_COMMENT_VALUE } from 'common/constants';
 
 import { SubscribeByEmail } from './__subscribe-by-email';
 import { SubscribeByRSS } from './__subscribe-by-rss';
 
-import MarkdownToolbar from './markdown-toolbar';
+import { MarkdownToolbar } from './markdown-toolbar';
 import { TextExpander } from './text-expander';
 
 let textareaId = 0;

frontend/app/components/comment-form/markdown-toolbar-icons/bold-icon.tsx

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 
-export default function BoldIcon() {
+export function BoldIcon() {
   return (
     <svg
       className="comment-form__toolbar-icon"

frontend/app/components/comment-form/markdown-toolbar-icons/code-icon.tsx

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 
-export default function CodeIcon() {
+export function CodeIcon() {
   return (
     <svg
       className="comment-form__toolbar-icon"

frontend/app/components/comment-form/markdown-toolbar-icons/header-icon.tsx

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 
-export default function HeaderIcon() {
+export function HeaderIcon() {
   return (
     <svg
       className="comment-form__toolbar-icon"

frontend/app/components/comment-form/markdown-toolbar-icons/image-icon.tsx

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 
-export default function ImageIcon() {
+export function ImageIcon() {
   return (
     <svg className="comment-form__toolbar-icon" width="11.25" height="15" viewBox="0 0 384 512" aria-hidden="true">
       <path

frontend/app/components/comment-form/markdown-toolbar-icons/italic-icon.tsx

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 
-export default function ItalicIcon() {
+export function ItalicIcon() {
   return (
     <svg
       className="comment-form__toolbar-icon"

frontend/app/components/comment-form/markdown-toolbar-icons/link-icon.tsx

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 
-export default function LinkIcon() {
+export function LinkIcon() {
   return (
     <svg
       className="comment-form__toolbar-icon"

frontend/app/components/comment-form/markdown-toolbar-icons/ordered-list-icon.tsx

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 
-export default function OrderedListIcon() {
+export function OrderedListIcon() {
   return (
     <svg
       className="comment-form__toolbar-icon"

frontend/app/components/comment-form/markdown-toolbar-icons/quote-icon.tsx

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 
-export default function QuoteIcon() {
+export function QuoteIcon() {
   return (
     <svg
       className="comment-form__toolbar-icon"

frontend/app/components/comment-form/markdown-toolbar-icons/unordered-list-icon.tsx

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 
-export default function UnorderedListIcon() {
+export function UnorderedListIcon() {
   return (
     <svg
       className="comment-form__toolbar-icon"