Refactored exports.

components/common/EmptyPlaceholder.js

@@ -1,7 +1,7 @@
 import { Icon, Text, Flexbox } from 'react-basics';
 import Logo from 'assets/logo.svg';
 
-function EmptyPlaceholder({ message, children }) {
+export function EmptyPlaceholder({ message, children }) {
   return (
     <Flexbox direction="column" alignItems="center" justifyContent="center" gap={60} height={600}>
       <Icon size="xl">

components/common/ErrorMessage.js

@@ -2,7 +2,7 @@ import { Icon, Icons, Text } from 'react-basics';
 import styles from './ErrorMessage.module.css';
 import useMessages from 'hooks/useMessages';
 
-export default function ErrorMessage() {
+export function ErrorMessage() {
   const { formatMessage, messages } = useMessages();
 
   return (
@@ -14,3 +14,5 @@ export default function ErrorMessage() {
     </div>
   );
 }
+
+export default ErrorMessage;

components/common/Favicon.js

@@ -5,7 +5,7 @@ function getHostName(url) {
   return match && match.length > 1 ? match[1] : null;
 }
 
-function Favicon({ domain, ...props }) {
+export function Favicon({ domain, ...props }) {
   const hostName = domain ? getHostName(domain) : null;
 
   return hostName ? (

components/common/FilterButtons.js

@@ -1,6 +1,6 @@
 import { ButtonGroup, Button, Flexbox } from 'react-basics';
 
-export default function FilterButtons({ items, selectedKey, onSelect }) {
+export function FilterButtons({ items, selectedKey, onSelect }) {
   return (
     <Flexbox justifyContent="center">
       <ButtonGroup items={items} selectedKey={selectedKey} onSelect={onSelect}>
@@ -9,3 +9,5 @@ export default function FilterButtons({ items, selectedKey, onSelect }) {
     </Flexbox>
   );
 }
+
+export default FilterButtons;

components/common/FilterLink.js

@@ -6,7 +6,7 @@ import usePageQuery from 'hooks/usePageQuery';
 import useMessages from 'hooks/useMessages';
 import styles from './FilterLink.module.css';
 
-export default function FilterLink({ id, value, label, externalUrl }) {
+export function FilterLink({ id, value, label, externalUrl }) {
   const { formatMessage, labels } = useMessages();
   const { resolveUrl, query } = usePageQuery();
   const active = query[id] !== undefined;
@@ -37,3 +37,5 @@ export default function FilterLink({ id, value, label, externalUrl }) {
     </div>
   );
 }
+
+export default FilterLink;

components/common/HamburgerButton.js

@@ -5,7 +5,7 @@ import Icons from 'components/icons';
 import useMessages from 'hooks/useMessages';
 import useConfig from 'hooks/useConfig';
 
-export default function HamburgerButton() {
+export function HamburgerButton() {
   const { formatMessage, labels } = useMessages();
   const [active, setActive] = useState(false);
   const { cloudMode } = useConfig();
@@ -57,3 +57,5 @@ export default function HamburgerButton() {
     </>
   );
 }
+
+export default HamburgerButton;

components/common/HoverTooltip.js

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { Tooltip } from 'react-basics';
 import styles from './HoverTooltip.module.css';
 
-export default function HoverTooltip({ tooltip }) {
+export function HoverTooltip({ tooltip }) {
   const [position, setPosition] = useState({ x: -1000, y: -1000 });
 
   useEffect(() => {
@@ -23,3 +23,5 @@ export default function HoverTooltip({ tooltip }) {
     </div>
   );
 }
+
+export default HoverTooltip;

components/common/MobileMenu.js

@@ -3,7 +3,7 @@ import { useRouter } from 'next/router';
 import Link from 'next/link';
 import styles from './MobileMenu.module.css';
 
-export default function MobileMenu({ items = [], onClose }) {
+export function MobileMenu({ items = [], onClose }) {
   const { pathname } = useRouter();
 
   const Items = ({ items, className }) => (
@@ -34,3 +34,5 @@ export default function MobileMenu({ items = [], onClose }) {
     </div>
   );
 }
+
+export default MobileMenu;

components/common/NoData.js

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import styles from './NoData.module.css';
 import useMessages from 'hooks/useMessages';
 
-function NoData({ className }) {
+export function NoData({ className }) {
   const { formatMessage, messages } = useMessages();
 
   return (

components/common/SettingsTable.js

@@ -1,7 +1,7 @@
 import { Table, TableHeader, TableBody, TableRow, TableCell, TableColumn } from 'react-basics';
 import styles from './SettingsTable.module.css';
 
-export default function SettingsTable({ columns = [], data = [], children, cellRender }) {
+export function SettingsTable({ columns = [], data = [], children, cellRender }) {
   return (
     <Table columns={columns} rows={data}>
       <TableHeader className={styles.header}>
@@ -34,3 +34,5 @@ export default function SettingsTable({ columns = [], data = [], children, cellR
     </Table>
   );
 }
+
+export default SettingsTable;

components/common/UpdateNotice.js

@@ -6,7 +6,7 @@ import { REPO_URL, VERSION_CHECK } from 'lib/constants';
 import styles from './UpdateNotice.module.css';
 import useMessages from 'hooks/useMessages';
 
-export default function UpdateNotice() {
+export function UpdateNotice() {
   const { formatMessage, labels, messages } = useMessages();
   const { latest, checked, hasUpdate, releaseUrl } = useStore();
   const [dismissed, setDismissed] = useState(false);
@@ -50,3 +50,5 @@ export default function UpdateNotice() {
     </Row>
   );
 }
+
+export default UpdateNotice;

components/common/WorldMap.js

@@ -3,16 +3,16 @@ import { useRouter } from 'next/router';
 import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps';
 import classNames from 'classnames';
 import { colord } from 'colord';
-import useTheme from 'hooks/useTheme';
+import HoverTooltip from 'components/common/HoverTooltip';
 import { ISO_COUNTRIES, THEME_COLORS, MAP_FILE } from 'lib/constants';
-import styles from './WorldMap.module.css';
+import useTheme from 'hooks/useTheme';
 import useCountryNames from 'hooks/useCountryNames';
 import useLocale from 'hooks/useLocale';
-import HoverTooltip from './HoverTooltip';
 import { formatLongNumber } from 'lib/format';
 import { percentFilter } from 'lib/filters';
+import styles from './WorldMap.module.css';
 
-function WorldMap({ data, className }) {
+export function WorldMap({ data, className }) {
   const { basePath } = useRouter();
   const [tooltip, setTooltip] = useState();
   const [theme] = useTheme();

components/input/DateFilter.js

@@ -9,7 +9,7 @@ import useApi from 'hooks/useApi';
 import useDateRange from 'hooks/useDateRange';
 import useMessages from 'hooks/useMessages';
 
-function DateFilter({ websiteId, value, className }) {
+export function DateFilter({ websiteId, value, className }) {
   const { formatMessage, labels } = useMessages();
   const { get } = useApi();
   const [dateRange, setDateRange] = useDateRange(websiteId);

components/input/LanguageButton.js

@@ -5,7 +5,7 @@ import useLocale from 'hooks/useLocale';
 import Icons from 'components/icons';
 import styles from './LanguageButton.module.css';
 
-export default function LanguageButton() {
+export function LanguageButton() {
   const { locale, saveLocale, dir } = useLocale();
   const items = Object.keys(languages).map(key => ({ ...languages[key], value: key }));
 
@@ -43,3 +43,5 @@ export default function LanguageButton() {
     </PopupTrigger>
   );
 }
+
+export default LanguageButton;

components/input/LogoutButton.js

@@ -2,7 +2,7 @@ import { Button, Icon, Icons, Tooltip } from 'react-basics';
 import Link from 'next/link';
 import useMessages from 'hooks/useMessages';
 
-export default function LogoutButton({ tooltipPosition = 'top' }) {
+export function LogoutButton({ tooltipPosition = 'top' }) {
   const { formatMessage, labels } = useMessages();
   return (
     <Link href="/logout">
@@ -16,3 +16,5 @@ export default function LogoutButton({ tooltipPosition = 'top' }) {
     </Link>
   );
 }
+
+export default LogoutButton;

components/input/ProfileButton.js

@@ -7,7 +7,7 @@ import useConfig from 'hooks/useConfig';
 import styles from './ProfileButton.module.css';
 import useLocale from 'hooks/useLocale';
 
-export default function ProfileButton() {
+export function ProfileButton() {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
   const { cloudMode } = useConfig();
@@ -57,3 +57,5 @@ export default function ProfileButton() {
     </PopupTrigger>
   );
 }
+
+export default ProfileButton;

components/input/RefreshButton.js

@@ -4,7 +4,7 @@ import useDateRange from 'hooks/useDateRange';
 import Icons from 'components/icons';
 import useMessages from 'hooks/useMessages';
 
-function RefreshButton({ websiteId, isLoading }) {
+export function RefreshButton({ websiteId, isLoading }) {
   const { formatMessage, labels } = useMessages();
   const [dateRange] = useDateRange(websiteId);
 

components/input/SettingsButton.js

@@ -5,7 +5,7 @@ import Icons from 'components/icons';
 import useMessages from 'hooks/useMessages';
 import styles from './SettingsButton.module.css';
 
-export default function SettingsButton() {
+export function SettingsButton() {
   const { formatMessage, labels } = useMessages();
 
   return (
@@ -33,3 +33,5 @@ export default function SettingsButton() {
     </PopupTrigger>
   );
 }
+
+export default SettingsButton;

components/input/ThemeButton.js

@@ -4,7 +4,7 @@ import useTheme from 'hooks/useTheme';
 import Icons from 'components/icons';
 import styles from './ThemeButton.module.css';
 
-export default function ThemeButton() {
+export function ThemeButton() {
   const [theme, setTheme] = useTheme();
 
   const transitions = useTransition(theme, {
@@ -34,3 +34,5 @@ export default function ThemeButton() {
     </Button>
   );
 }
+
+export default ThemeButton;

components/input/WebsiteSelect.js

@@ -2,7 +2,7 @@ import { Dropdown, Item } from 'react-basics';
 import useApi from 'hooks/useApi';
 import useMessages from 'hooks/useMessages';
 
-export default function WebsiteSelect({ websiteId, onSelect }) {
+export function WebsiteSelect({ websiteId, onSelect }) {
   const { formatMessage, labels } = useMessages();
   const { get, useQuery } = useApi();
   const { data } = useQuery(['websites:me'], () => get('/me/websites'));
@@ -25,3 +25,5 @@ export default function WebsiteSelect({ websiteId, onSelect }) {
     </Dropdown>
   );
 }
+
+export default WebsiteSelect;

components/layout/AppLayout.js

@@ -8,7 +8,7 @@ import useConfig from 'hooks/useConfig';
 import { CURRENT_VERSION } from 'lib/constants';
 import styles from './AppLayout.module.css';
 
-export default function AppLayout({ title, children }) {
+export function AppLayout({ title, children }) {
   const { user } = useRequireLogin();
   const config = useConfig();
   const { pathname } = useRouter();
@@ -34,3 +34,5 @@ export default function AppLayout({ title, children }) {
     </div>
   );
 }
+
+export default AppLayout;

components/layout/Footer.js

@@ -4,7 +4,7 @@ import { CURRENT_VERSION, HOMEPAGE_URL, REPO_URL } from 'lib/constants';
 import { labels } from 'components/messages';
 import styles from './Footer.module.css';
 
-export default function Footer() {
+export function Footer() {
   return (
     <footer className={styles.footer}>
       <Row>
@@ -29,3 +29,5 @@ export default function Footer() {
     </footer>
   );
 }
+
+export default Footer;

components/layout/Header.js

@@ -6,7 +6,7 @@ import SettingsButton from 'components/input/SettingsButton';
 import Icons from 'components/icons';
 import styles from './Header.module.css';
 
-export default function Header() {
+export function Header() {
   return (
     <header className={styles.header}>
       <Row>
@@ -27,3 +27,5 @@ export default function Header() {
     </header>
   );
 }
+
+export default Header;

components/layout/NavBar.js

@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { Icon, Text, Row, Column } from 'react-basics';
 import Link from 'next/link';
 import classNames from 'classnames';
@@ -12,7 +11,7 @@ import useMessages from 'hooks/useMessages';
 import { useRouter } from 'next/router';
 import HamburgerButton from '../common/HamburgerButton';
 
-export default function NavBar() {
+export function NavBar() {
   const { pathname } = useRouter();
   const { cloudMode } = useConfig();
   const { formatMessage, labels } = useMessages();
@@ -61,3 +60,5 @@ export default function NavBar() {
     </div>
   );
 }
+
+export default NavBar;

components/layout/NavGroup.js

@@ -6,7 +6,7 @@ import Link from 'next/link';
 import Icons from 'components/icons';
 import styles from './NavGroup.module.css';
 
-export default function NavGroup({
+export function NavGroup({
   title,
   items,
   defaultExpanded = true,
@@ -54,3 +54,5 @@ export default function NavGroup({
     </div>
   );
 }
+
+export default NavGroup;

components/layout/Page.js

@@ -3,7 +3,7 @@ import { Banner, Loading } from 'react-basics';
 import useMessages from 'hooks/useMessages';
 import styles from './Page.module.css';
 
-export default function Page({ className, error, loading, children }) {
+export function Page({ className, error, loading, children }) {
   const { formatMessage, messages } = useMessages();
 
   if (error) {
@@ -16,3 +16,5 @@ export default function Page({ className, error, loading, children }) {
 
   return <div className={classNames(styles.page, className)}>{children}</div>;
 }
+
+export default Page;

components/layout/PageHeader.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import styles from './PageHeader.module.css';
 
-export default function PageHeader({ title, children }) {
+export function PageHeader({ title, children }) {
   return (
     <div className={styles.header}>
       <div className={styles.title}>{title}</div>
       <div className={styles.actions}>{children}</div>
     </div>
   );
 }
+
+export default PageHeader;