Merge branch 'dev' into dev

.dockerignore

@@ -4,3 +4,4 @@ Dockerfile
 .gitignore
 .DS_Store
 node_modules
+.idea

.eslintrc.json

@@ -46,6 +46,7 @@
     "react/react-in-jsx-scope": "off",
     "react/prop-types": "off",
     "import/no-anonymous-default-export": "off",
+    "import/no-named-as-default": "off",
     "@next/next/no-img-element": "off",
     "@typescript-eslint/no-empty-function": "off",
     "@typescript-eslint/no-explicit-any": "off",

.gitignore

@@ -17,6 +17,7 @@ node_modules
 /build
 /public/script.js
 /geo
+/dist
 
 # misc
 .DS_Store

.prettierignore

@@ -1 +1 @@
-/public/
+/public/script.js

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,7 +1,7 @@
 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>
@@ -9,3 +9,5 @@ export default function PageHeader({ title, children }) {
     </div>
   );
 }
+
+export default PageHeader;

components/layout/SettingsLayout.js

@@ -1,5 +1,4 @@
 import { Row, Column } from 'react-basics';
-import classNames from 'classnames';
 import { useRouter } from 'next/router';
 import SideNav from './SideNav';
 import useUser from 'hooks/useUser';
@@ -7,7 +6,7 @@ import useMessages from 'hooks/useMessages';
 import useConfig from 'hooks/useConfig';
 import styles from './SettingsLayout.module.css';
 
-export default function SettingsLayout({ children }) {
+export function SettingsLayout({ children }) {
   const { user } = useUser();
   const { pathname } = useRouter();
   const { formatMessage, labels } = useMessages();
@@ -35,3 +34,5 @@ export default function SettingsLayout({ children }) {
     </Row>
   );
 }
+
+export default SettingsLayout;

components/layout/ShareLayout.js

@@ -2,7 +2,7 @@ import { Container } from 'react-basics';
 import Header from './Header';
 import Footer from './Footer';
 
-export default function ShareLayout({ children }) {
+export function ShareLayout({ children }) {
   return (
     <Container>
       <Header />
@@ -11,3 +11,5 @@ export default function ShareLayout({ children }) {
     </Container>
   );
 }
+
+export default ShareLayout;

components/layout/SideNav.js

@@ -4,7 +4,7 @@ import { useRouter } from 'next/router';
 import Link from 'next/link';
 import styles from './SideNav.module.css';
 
-export default function SideNav({ selectedKey, items, shallow, onSelect = () => {} }) {
+export function SideNav({ selectedKey, items, shallow, onSelect = () => {} }) {
   const { asPath } = useRouter();
   return (
     <Menu items={items} selectedKey={selectedKey} className={styles.menu} onSelect={onSelect}>
@@ -21,3 +21,5 @@ export default function SideNav({ selectedKey, items, shallow, onSelect = () =>
     </Menu>
   );
 }
+
+export default SideNav;

components/metrics/ActiveUsers.js

@@ -4,7 +4,7 @@ import useApi from 'hooks/useApi';
 import useMessages from 'hooks/useMessages';
 import styles from './ActiveUsers.module.css';
 
-export default function ActiveUsers({ websiteId, value, refetchInterval = 60000 }) {
+export function ActiveUsers({ websiteId, value, refetchInterval = 60000 }) {
   const { formatMessage, messages } = useMessages();
   const { get, useQuery } = useApi();
   const { data } = useQuery(
@@ -34,3 +34,5 @@ export default function ActiveUsers({ websiteId, value, refetchInterval = 60000
     </StatusLight>
   );
 }
+
+export default ActiveUsers;

components/metrics/BarChart.js

@@ -11,7 +11,7 @@ import useTheme from 'hooks/useTheme';
 import { DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants';
 import styles from './BarChart.module.css';
 
-export default function BarChart({
+export function BarChart({
   datasets,
   unit,
   animationDuration = DEFAULT_ANIMATION_DURATION,
@@ -210,3 +210,5 @@ export default function BarChart({
     </>
   );
 }
+
+export default BarChart;

components/metrics/BrowsersTable.js

@@ -3,7 +3,7 @@ import MetricsTable from 'components/metrics/MetricsTable';
 import { BROWSERS } from 'lib/constants';
 import useMessages from 'hooks/useMessages';
 
-export default function BrowsersTable({ websiteId, ...props }) {
+export function BrowsersTable({ websiteId, ...props }) {
   const { formatMessage, labels } = useMessages();
 
   function renderLink({ x: browser }) {
@@ -21,3 +21,5 @@ export default function BrowsersTable({ websiteId, ...props }) {
     />
   );
 }
+
+export default BrowsersTable;

components/metrics/CitiesTable.js

@@ -4,7 +4,7 @@ import FilterLink from 'components/common/FilterLink';
 import useLocale from 'hooks/useLocale';
 import useMessages from 'hooks/useMessages';
 
-export default function CitiesTable({ websiteId, ...props }) {
+export function CitiesTable({ websiteId, ...props }) {
   const { locale } = useLocale();
   const { formatMessage, labels } = useMessages();
 
@@ -28,3 +28,5 @@ export default function CitiesTable({ websiteId, ...props }) {
     />
   );
 }
+
+export default CitiesTable;

components/metrics/CountriesTable.js

@@ -4,7 +4,7 @@ import useCountryNames from 'hooks/useCountryNames';
 import useLocale from 'hooks/useLocale';
 import useMessages from 'hooks/useMessages';
 
-export default function CountriesTable({ websiteId, ...props }) {
+export function CountriesTable({ websiteId, ...props }) {
   const { locale } = useLocale();
   const countryNames = useCountryNames(locale);
   const { formatMessage, labels } = useMessages();
@@ -28,3 +28,5 @@ export default function CountriesTable({ websiteId, ...props }) {
     />
   );
 }
+
+export default CountriesTable;

components/metrics/DataTable.js

@@ -3,13 +3,12 @@ import useMeasure from 'react-use-measure';
 import { FixedSizeList } from 'react-window';
 import { useSpring, animated, config } from 'react-spring';
 import classNames from 'classnames';
-import { FormattedMessage } from 'react-intl';
 import NoData from 'components/common/NoData';
 import { formatNumber, formatLongNumber } from 'lib/format';
 import styles from './DataTable.module.css';
 import useMessages from '../../hooks/useMessages';
 
-export default function DataTable({
+export function DataTable({
   data = [],
   title,
   metric,
@@ -102,3 +101,5 @@ const AnimatedRow = ({
     </div>
   );
 };
+
+export default DataTable;

components/metrics/DatePickerForm.js

@@ -8,7 +8,7 @@ import { FILTER_DAY, FILTER_RANGE } from 'lib/constants';
 import useMessages from 'hooks/useMessages';
 import styles from './DatePickerForm.module.css';
 
-export default function DatePickerForm({
+export function DatePickerForm({
   startDate: defaultStartDate,
   endDate: defaultEndDate,
   minDate,
@@ -78,3 +78,5 @@ export default function DatePickerForm({
     </div>
   );
 }
+
+export default DatePickerForm;

components/metrics/DevicesTable.js

@@ -2,7 +2,7 @@ import MetricsTable from './MetricsTable';
 import FilterLink from 'components/common/FilterLink';
 import useMessages from 'hooks/useMessages';
 
-export default function DevicesTable({ websiteId, ...props }) {
+export function DevicesTable({ websiteId, ...props }) {
   const { formatMessage, labels } = useMessages();
 
   function renderLink({ x: device }) {
@@ -26,3 +26,5 @@ export default function DevicesTable({ websiteId, ...props }) {
     />
   );
 }
+
+export default DevicesTable;

components/metrics/EventsChart.js

@@ -9,7 +9,7 @@ import useTimezone from 'hooks/useTimezone';
 import usePageQuery from 'hooks/usePageQuery';
 import { EVENT_COLORS } from 'lib/constants';
 
-export default function EventsChart({ websiteId, className, token }) {
+export function EventsChart({ websiteId, className, token }) {
   const { get, useQuery } = useApi();
   const [{ startDate, endDate, unit, modified }] = useDateRange(websiteId);
   const [timezone] = useTimezone();
@@ -76,3 +76,5 @@ export default function EventsChart({ websiteId, className, token }) {
     />
   );
 }
+
+export default EventsChart;

components/metrics/EventsTable.js

@@ -1,7 +1,7 @@
 import MetricsTable from './MetricsTable';
 import useMessages from 'hooks/useMessages';
 
-export default function EventsTable({ websiteId, ...props }) {
+export function EventsTable({ websiteId, ...props }) {
   const { formatMessage, labels } = useMessages();
 
   function handleDataLoad(data) {
@@ -19,3 +19,5 @@ export default function EventsTable({ websiteId, ...props }) {
     />
   );
 }
+
+export default EventsTable;

components/metrics/FilterTags.js

@@ -4,7 +4,7 @@ import usePageQuery from 'hooks/usePageQuery';
 import styles from './FilterTags.module.css';
 import useMessages from 'hooks/useMessages';
 
-export default function FilterTags({ params }) {
+export function FilterTags({ params }) {
   const { formatMessage, labels } = useMessages();
   const {
     router,
@@ -50,3 +50,5 @@ export default function FilterTags({ params }) {
     </div>
   );
 }
+
+export default FilterTags;

components/metrics/LanguagesTable.js

@@ -4,7 +4,7 @@ import useLanguageNames from 'hooks/useLanguageNames';
 import useLocale from 'hooks/useLocale';
 import useMessages from 'hooks/useMessages';
 
-export default function LanguagesTable({ websiteId, onDataLoad, ...props }) {
+export function LanguagesTable({ websiteId, onDataLoad, ...props }) {
   const { formatMessage, labels } = useMessages();
   const { locale } = useLocale();
   const languageNames = useLanguageNames(locale);
@@ -25,3 +25,5 @@ export default function LanguagesTable({ websiteId, onDataLoad, ...props }) {
     />
   );
 }
+
+export default LanguagesTable;

components/metrics/Legend.js

@@ -6,7 +6,7 @@ import useLocale from 'hooks/useLocale';
 import useForceUpdate from 'hooks/useForceUpdate';
 import styles from './Legend.module.css';
 
-export default function Legend({ chart }) {
+export function Legend({ chart }) {
   const { locale } = useLocale();
   const forceUpdate = useForceUpdate();
 
@@ -48,3 +48,5 @@ export default function Legend({ chart }) {
     </div>
   );
 }
+
+export default Legend;

components/metrics/MetricCard.js

@@ -3,7 +3,7 @@ import { useSpring, animated } from 'react-spring';
 import { formatNumber } from 'lib/format';
 import styles from './MetricCard.module.css';
 
-const MetricCard = ({
+export const MetricCard = ({
   value = 0,
   change = 0,
   label,

components/metrics/MetricsBar.js

@@ -9,7 +9,7 @@ import MetricCard from './MetricCard';
 import useMessages from 'hooks/useMessages';
 import styles from './MetricsBar.module.css';
 
-export default function MetricsBar({ websiteId }) {
+export function MetricsBar({ websiteId }) {
   const { formatMessage, labels } = useMessages();
   const { get, useQuery } = useApi();
   const [dateRange] = useDateRange(websiteId);
@@ -111,3 +111,5 @@ export default function MetricsBar({ websiteId }) {
     </div>
   );
 }
+
+export default MetricsBar;

components/metrics/MetricsTable.js

@@ -15,7 +15,7 @@ import useMessages from 'hooks/useMessages';
 import styles from './MetricsTable.module.css';
 import useLocale from 'hooks/useLocale';
 
-export default function MetricsTable({
+export function MetricsTable({
   websiteId,
   type,
   className,
@@ -92,3 +92,5 @@ export default function MetricsTable({
     </div>
   );
 }
+
+export default MetricsTable;

components/metrics/OSTable.js

@@ -2,7 +2,7 @@ import MetricsTable from './MetricsTable';
 import FilterLink from 'components/common/FilterLink';
 import useMessages from 'hooks/useMessages';
 
-export default function OSTable({ websiteId, ...props }) {
+export function OSTable({ websiteId, ...props }) {
   const { formatMessage, labels } = useMessages();
 
   function renderLink({ x: os }) {
@@ -20,3 +20,5 @@ export default function OSTable({ websiteId, ...props }) {
     />
   );
 }
+
+export default OSTable;

components/metrics/PagesTable.js

@@ -5,7 +5,7 @@ import useMessages from 'hooks/useMessages';
 import usePageQuery from 'hooks/usePageQuery';
 import { emptyFilter } from 'lib/filters';
 
-export default function PagesTable({ websiteId, showFilters, ...props }) {
+export function PagesTable({ websiteId, showFilters, ...props }) {
   const {
     router,
     resolveUrl,
@@ -47,3 +47,5 @@ export default function PagesTable({ websiteId, showFilters, ...props }) {
     </>
   );
 }
+
+export default PagesTable;

components/metrics/PageviewsChart.js

@@ -6,15 +6,7 @@ import useTheme from 'hooks/useTheme';
 import useMessages from 'hooks/useMessages';
 import useLocale from 'hooks/useLocale';
 
-export default function PageviewsChart({
+export function PageviewsChart({ websiteId, data, unit, records, className, loading, ...props }) {
-  websiteId,
-  data,
-  unit,
-  records,
-  className,
-  loading,
-  ...props
-}) {
   const { formatMessage, labels } = useMessages();
   const [theme] = useTheme();
   const { locale } = useLocale();
@@ -68,3 +60,5 @@ export default function PageviewsChart({
     />
   );
 }
+
+export default PageviewsChart;

components/metrics/QueryParametersTable.js

@@ -12,7 +12,7 @@ const filters = {
   [FILTER_COMBINED]: paramFilter,
 };
 
-export default function QueryParametersTable({ websiteId, showFilters, ...props }) {
+export function QueryParametersTable({ websiteId, showFilters, ...props }) {
   const [filter, setFilter] = useState(FILTER_COMBINED);
   const { formatMessage, labels } = useMessages();
 
@@ -49,3 +49,5 @@ export default function QueryParametersTable({ websiteId, showFilters, ...props
     </>
   );
 }
+
+export default QueryParametersTable;

components/metrics/RealtimeChart.js

@@ -23,7 +23,7 @@ function mapData(data) {
   return arr;
 }
 
-export default function RealtimeChart({ data, unit, ...props }) {
+export function RealtimeChart({ data, unit, ...props }) {
   const endDate = startOfMinute(new Date());
   const startDate = subMinutes(endDate, REALTIME_RANGE);
   const prevEndDate = useRef(endDate);
@@ -58,3 +58,5 @@ export default function RealtimeChart({ data, unit, ...props }) {
     />
   );
 }
+
+export default RealtimeChart;

components/metrics/ReferrersTable.js

@@ -2,7 +2,7 @@ import MetricsTable from './MetricsTable';
 import FilterLink from 'components/common/FilterLink';
 import useMessages from 'hooks/useMessages';
 
-export default function ReferrersTable({ websiteId, ...props }) {
+export function ReferrersTable({ websiteId, ...props }) {
   const { formatMessage, labels } = useMessages();
 
   const renderLink = ({ x: referrer }) => {
@@ -29,3 +29,5 @@ export default function ReferrersTable({ websiteId, ...props }) {
     </>
   );
 }
+
+export default ReferrersTable;

components/metrics/RegionsTable.js

@@ -3,19 +3,25 @@ import { emptyFilter } from 'lib/filters';
 import FilterLink from 'components/common/FilterLink';
 import useLocale from 'hooks/useLocale';
 import useMessages from 'hooks/useMessages';
+import useCountryNames from 'hooks/useCountryNames';
 import regions from 'public/iso-3166-2.json';
 
-export default function RegionsTable({ websiteId, ...props }) {
+export function RegionsTable({ websiteId, ...props }) {
   const { locale } = useLocale();
   const { formatMessage, labels } = useMessages();
+  const countryNames = useCountryNames(locale);
 
-  function renderLink({ x }) {
+  const renderLabel = x => {
+    return regions[x] ? `${regions[x]}, ${countryNames[x.split('-')[0]]}` : x;
+  };
+
+  const renderLink = ({ x }) => {
     return (
       <div className={locale}>
-        <FilterLink id="region" value={x} label={regions[x] || x} />
+        <FilterLink id="region" value={x} label={renderLabel(x)} />
       </div>
     );
-  }
+  };
 
   return (
     <MetricsTable
@@ -29,3 +35,5 @@ export default function RegionsTable({ websiteId, ...props }) {
     />
   );
 }
+
+export default RegionsTable;

components/metrics/ScreenTable.js

@@ -1,7 +1,7 @@
 import MetricsTable from './MetricsTable';
 import useMessages from 'hooks/useMessages';
 
-export default function ScreenTable({ websiteId, ...props }) {
+export function ScreenTable({ websiteId, ...props }) {
   const { formatMessage, labels } = useMessages();
 
   return (
@@ -14,3 +14,5 @@ export default function ScreenTable({ websiteId, ...props }) {
     />
   );
 }
+
+export default ScreenTable;

components/metrics/WebsiteChart.js

@@ -20,7 +20,7 @@ import useMessages from 'hooks/useMessages';
 import styles from './WebsiteChart.module.css';
 import useLocale from 'hooks/useLocale';
 
-export default function WebsiteChart({
+export function WebsiteChart({
   websiteId,
   name,
   domain,
@@ -128,3 +128,5 @@ export default function WebsiteChart({
     </>
   );
 }
+
+export default WebsiteChart;

components/metrics/WebsiteHeader.js

@@ -3,7 +3,7 @@ import Favicon from 'components/common/Favicon';
 import ActiveUsers from './ActiveUsers';
 import styles from './WebsiteHeader.module.css';
 
-export default function WebsiteHeader({ websiteId, name, domain, children }) {
+export function WebsiteHeader({ websiteId, name, domain, children }) {
   return (
     <Row className={styles.header} justifyContent="center">
       <Column className={styles.title} variant="two">
@@ -17,3 +17,5 @@ export default function WebsiteHeader({ websiteId, name, domain, children }) {
     </Row>
   );
 }
+
+export default WebsiteHeader;

components/pages/console/TestConsole.js

@@ -11,7 +11,7 @@ import Script from 'next/script';
 import { Button, Column, Row } from 'react-basics';
 import styles from './TestConsole.module.css';
 
-export default function TestConsole() {
+export function TestConsole() {
   const { get, useQuery } = useApi();
   const { data, isLoading, error } = useQuery(['websites:me'], () => get('/me/websites'));
   const router = useRouter();
@@ -132,3 +132,5 @@ export default function TestConsole() {
     </Page>
   );
 }
+
+export default TestConsole;

components/pages/dashboard/Dashboard.js

@@ -12,7 +12,7 @@ import useDashboard from 'store/dashboard';
 import useMessages from 'hooks/useMessages';
 import useLocale from 'hooks/useLocale';
 
-export default function Dashboard({ userId }) {
+export function Dashboard({ userId }) {
   const { formatMessage, labels, messages } = useMessages();
   const dashboard = useDashboard();
   const { showCharts, limit, editing } = dashboard;
@@ -62,3 +62,5 @@ export default function Dashboard({ userId }) {
     </Page>
   );
 }
+
+export default Dashboard;

components/pages/dashboard/DashboardEdit.js

@@ -9,7 +9,7 @@ import styles from './DashboardEdit.module.css';
 
 const dragId = 'dashboard-website-ordering';
 
-export default function DashboardEdit({ websites }) {
+export function DashboardEdit({ websites }) {
   const settings = useDashboard();
   const { websiteOrder } = settings;
   const { formatMessage, labels } = useMessages();
@@ -98,3 +98,5 @@ export default function DashboardEdit({ websites }) {
     </>
   );
 }
+
+export default DashboardEdit;

components/pages/dashboard/DashboardSettingsButton.js

@@ -3,7 +3,7 @@ import Icons from 'components/icons';
 import { saveDashboard } from 'store/dashboard';
 import useMessages from 'hooks/useMessages';
 
-export default function DashboardSettingsButton() {
+export function DashboardSettingsButton() {
   const { formatMessage, labels } = useMessages();
 
   const menuOptions = [
@@ -42,3 +42,5 @@ export default function DashboardSettingsButton() {
     </PopupTrigger>
   );
 }
+
+export default DashboardSettingsButton;

components/pages/login/LoginForm.js

@@ -17,7 +17,7 @@ import useMessages from 'hooks/useMessages';
 import Logo from 'assets/logo.svg';
 import styles from './LoginForm.module.css';
 
-export default function LoginForm() {
+export function LoginForm() {
   const { formatMessage, labels, getMessage } = useMessages();
   const router = useRouter();
   const { post } = useApi();
@@ -60,3 +60,5 @@ export default function LoginForm() {
     </div>
   );
 }
+
+export default LoginForm;

components/pages/login/LoginLayout.js

@@ -2,7 +2,7 @@ import Head from 'next/head';
 import useLocale from 'hooks/useLocale';
 import styles from './LoginLayout.module.css';
 
-export default function LoginLayout({ children }) {
+export function LoginLayout({ children }) {
   const { dir } = useLocale();
 
   return (
@@ -14,3 +14,5 @@ export default function LoginLayout({ children }) {
     </div>
   );
 }
+
+export default LoginLayout;

components/pages/realtime/RealtimeCountries.js

@@ -4,7 +4,7 @@ import useLocale from 'hooks/useLocale';
 import useCountryNames from 'hooks/useCountryNames';
 import useMessages from 'hooks/useMessages';
 
-export default function RealtimeCountries({ data }) {
+export function RealtimeCountries({ data }) {
   const { formatMessage, labels } = useMessages();
   const { locale } = useLocale();
   const countryNames = useCountryNames(locale);
@@ -23,3 +23,5 @@ export default function RealtimeCountries({ data }) {
     />
   );
 }
+
+export default RealtimeCountries;

components/pages/realtime/RealtimeDashboard.js

@@ -25,7 +25,7 @@ function mergeData(state = [], data = [], time) {
     .filter(({ timestamp }) => timestamp >= time);
 }
 
-export default function RealtimeDashboard({ websiteId }) {
+export function RealtimeDashboard({ websiteId }) {
   const { formatMessage, labels } = useMessages();
   const router = useRouter();
   const [currentData, setCurrentData] = useState();
@@ -125,3 +125,5 @@ export default function RealtimeDashboard({ websiteId }) {
     </Page>
   );
 }
+
+export default RealtimeDashboard;

components/pages/realtime/RealtimeHeader.js

@@ -2,7 +2,7 @@ import MetricCard from 'components/metrics/MetricCard';
 import useMessages from 'hooks/useMessages';
 import styles from './RealtimeHeader.module.css';
 
-export default function RealtimeHeader({ data = {} }) {
+export function RealtimeHeader({ data = {} }) {
   const { formatMessage, labels } = useMessages();
   const { pageviews, visitors, events, countries } = data;
 
@@ -37,3 +37,5 @@ export default function RealtimeHeader({ data = {} }) {
     </div>
   );
 }
+
+export default RealtimeHeader;

components/pages/realtime/RealtimeHome.js

@@ -6,7 +6,7 @@ import useApi from 'hooks/useApi';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import useMessages from 'hooks/useMessages';
 
-export default function RealtimeHome() {
+export function RealtimeHome() {
   const { formatMessage, labels, messages } = useMessages();
   const { get, useQuery } = useApi();
   const router = useRouter();
@@ -27,3 +27,5 @@ export default function RealtimeHome() {
     </Page>
   );
 }
+
+export default RealtimeHome;

components/pages/realtime/RealtimeLog.js

@@ -25,7 +25,7 @@ const icons = {
   [TYPE_EVENT]: <Icons.Bolt />,
 };
 
-export default function RealtimeLog({ data, websiteDomain }) {
+export function RealtimeLog({ data, websiteDomain }) {
   const { formatMessage, labels, messages, FormattedMessage } = useMessages();
   const { locale } = useLocale();
   const countryNames = useCountryNames(locale);
@@ -154,3 +154,5 @@ export default function RealtimeLog({ data, websiteDomain }) {
     </div>
   );
 }
+
+export default RealtimeLog;

components/pages/realtime/RealtimeUrls.js

@@ -6,7 +6,7 @@ import DataTable from 'components/metrics/DataTable';
 import { FILTER_PAGES, FILTER_REFERRERS } from 'lib/constants';
 import useMessages from 'hooks/useMessages';
 
-export default function RealtimeUrls({ websiteDomain, data = {} }) {
+export function RealtimeUrls({ websiteDomain, data = {} }) {
   const { formatMessage, labels } = useMessages();
   const { pageviews } = data;
   const [filter, setFilter] = useState(FILTER_REFERRERS);
@@ -97,3 +97,5 @@ export default function RealtimeUrls({ websiteDomain, data = {} }) {
     </>
   );
 }
+
+export default RealtimeUrls;

components/pages/settings/profile/DateRangeSetting.js

@@ -4,7 +4,7 @@ import useDateRange from 'hooks/useDateRange';
 import { DEFAULT_DATE_RANGE } from 'lib/constants';
 import useMessages from 'hooks/useMessages';
 
-export default function DateRangeSetting() {
+export function DateRangeSetting() {
   const { formatMessage, labels } = useMessages();
   const [dateRange, setDateRange] = useDateRange();
   const { startDate, endDate, value } = dateRange;
@@ -18,3 +18,5 @@ export default function DateRangeSetting() {
     </Flexbox>
   );
 }
+
+export default DateRangeSetting;

components/pages/settings/profile/LanguageSetting.js

@@ -4,7 +4,7 @@ import { DEFAULT_LOCALE } from 'lib/constants';
 import { languages } from 'lib/lang';
 import useMessages from 'hooks/useMessages';
 
-export default function LanguageSetting() {
+export function LanguageSetting() {
   const { formatMessage, labels } = useMessages();
   const { locale, saveLocale } = useLocale();
   const options = Object.keys(languages);
@@ -28,3 +28,5 @@ export default function LanguageSetting() {
     </Flexbox>
   );
 }
+
+export default LanguageSetting;

components/pages/settings/profile/PasswordChangeButton.js

@@ -3,7 +3,7 @@ import PasswordEditForm from 'components/pages/settings/profile/PasswordEditForm
 import Icons from 'components/icons';
 import useMessages from 'hooks/useMessages';
 
-export default function PasswordChangeButton() {
+export function PasswordChangeButton() {
   const { formatMessage, labels, messages } = useMessages();
   const { toast, showToast } = useToast();
 
@@ -28,3 +28,5 @@ export default function PasswordChangeButton() {
     </>
   );
 }
+
+export default PasswordChangeButton;

components/pages/settings/profile/PasswordEditForm.js

@@ -3,7 +3,7 @@ import { Form, FormRow, FormInput, FormButtons, PasswordField, Button } from 're
 import useApi from 'hooks/useApi';
 import useMessages from 'hooks/useMessages';
 
-export default function PasswordEditForm({ onSave, onClose }) {
+export function PasswordEditForm({ onSave, onClose }) {
   const { formatMessage, labels, messages } = useMessages();
   const { post, useMutation } = useApi();
   const { mutate, error, isLoading } = useMutation(data => post('/me/password', data));
@@ -64,3 +64,5 @@ export default function PasswordEditForm({ onSave, onClose }) {
     </Form>
   );
 }
+
+export default PasswordEditForm;

components/pages/settings/profile/ProfileDetails.js

@@ -8,7 +8,7 @@ import useUser from 'hooks/useUser';
 import useMessages from 'hooks/useMessages';
 import useConfig from 'hooks/useConfig';
 
-export default function ProfileDetails() {
+export function ProfileDetails() {
   const { user } = useUser();
   const { formatMessage, labels } = useMessages();
   const { cloudMode } = useConfig();
@@ -45,3 +45,5 @@ export default function ProfileDetails() {
     </Form>
   );
 }
+
+export default ProfileDetails;

components/pages/settings/profile/ProfileSettings.js

@@ -3,7 +3,7 @@ import PageHeader from 'components/layout/PageHeader';
 import ProfileDetails from './ProfileDetails';
 import useMessages from 'hooks/useMessages';
 
-export default function ProfileSettings() {
+export function ProfileSettings() {
   const { formatMessage, labels } = useMessages();
 
   return (
@@ -13,3 +13,5 @@ export default function ProfileSettings() {
     </Page>
   );
 }
+
+export default ProfileSettings;

components/pages/settings/profile/ThemeSetting.js

@@ -5,7 +5,7 @@ import Sun from 'assets/sun.svg';
 import Moon from 'assets/moon.svg';
 import styles from './ThemeSetting.module.css';
 
-export default function ThemeSetting() {
+export function ThemeSetting() {
   const [theme, setTheme] = useTheme();
 
   return (
@@ -29,3 +29,5 @@ export default function ThemeSetting() {
     </div>
   );
 }
+
+export default ThemeSetting;

components/pages/settings/profile/TimezoneSetting.js

@@ -4,7 +4,7 @@ import useTimezone from 'hooks/useTimezone';
 import useMessages from 'hooks/useMessages';
 import { getTimezone } from 'lib/date';
 
-export default function TimezoneSetting() {
+export function TimezoneSetting() {
   const { formatMessage, labels } = useMessages();
   const [timezone, saveTimezone] = useTimezone();
   const options = listTimeZones();
@@ -26,3 +26,5 @@ export default function TimezoneSetting() {
     </Flexbox>
   );
 }
+
+export default TimezoneSetting;

components/pages/settings/teams/TeamAddForm.js

@@ -11,7 +11,7 @@ import {
 import useApi from 'hooks/useApi';
 import useMessages from 'hooks/useMessages';
 
-export default function TeamAddForm({ onSave, onClose }) {
+export function TeamAddForm({ onSave, onClose }) {
   const { formatMessage, labels } = useMessages();
   const { post, useMutation } = useApi();
   const { mutate, error, isLoading } = useMutation(data => post('/teams', data));
@@ -44,3 +44,5 @@ export default function TeamAddForm({ onSave, onClose }) {
     </Form>
   );
 }
+
+export default TeamAddForm;

components/pages/settings/teams/TeamAddWebsiteForm.js

@@ -4,7 +4,7 @@ import { Button, Dropdown, Form, FormButtons, FormRow, Item, SubmitButton } from
 import WebsiteTags from './WebsiteTags';
 import useMessages from 'hooks/useMessages';
 
-export default function TeamAddWebsiteForm({ teamId, onSave, onClose }) {
+export function TeamAddWebsiteForm({ teamId, onSave, onClose }) {
   const { formatMessage, labels } = useMessages();
   const { get, post, useQuery, useMutation } = useApi();
   const { mutate, error } = useMutation(data => post(`/teams/${teamId}/websites`, data));
@@ -59,3 +59,5 @@ export default function TeamAddWebsiteForm({ teamId, onSave, onClose }) {
     </>
   );
 }
+
+export default TeamAddWebsiteForm;

components/pages/settings/teams/TeamDeleteForm.js

@@ -2,7 +2,7 @@ import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
 import useApi from 'hooks/useApi';
 import useMessages from 'hooks/useMessages';
 
-export default function TeamDeleteForm({ teamId, teamName, onSave, onClose }) {
+export function TeamDeleteForm({ teamId, teamName, onSave, onClose }) {
   const { formatMessage, labels, messages, FormattedMessage } = useMessages();
   const { del, useMutation } = useApi();
   const { mutate, error, isLoading } = useMutation(data => del(`/teams/${teamId}`, data));
@@ -30,3 +30,5 @@ export default function TeamDeleteForm({ teamId, teamName, onSave, onClose }) {
     </Form>
   );
 }
+
+export default TeamDeleteForm;

components/pages/settings/teams/TeamEditForm.js

@@ -15,7 +15,7 @@ import useMessages from 'hooks/useMessages';
 
 const generateId = () => getRandomChars(16);
 
-export default function TeamEditForm({ teamId, data, onSave, readOnly }) {
+export function TeamEditForm({ teamId, data, onSave, readOnly }) {
   const { formatMessage, labels } = useMessages();
   const { post, useMutation } = useApi();
   const { mutate, error } = useMutation(data => post(`/teams/${teamId}`, data));
@@ -69,3 +69,5 @@ export default function TeamEditForm({ teamId, data, onSave, readOnly }) {
     </Form>
   );
 }
+
+export default TeamEditForm;

components/pages/settings/teams/TeamJoinForm.js

@@ -11,7 +11,7 @@ import {
 import useApi from 'hooks/useApi';
 import useMessages from 'hooks/useMessages';
 
-export default function TeamJoinForm({ onSave, onClose }) {
+export function TeamJoinForm({ onSave, onClose }) {
   const { formatMessage, labels, getMessage } = useMessages();
   const { post, useMutation } = useApi();
   const { mutate, error } = useMutation(data => post('/teams/join', data));
@@ -40,3 +40,5 @@ export default function TeamJoinForm({ onSave, onClose }) {
     </Form>
   );
 }
+
+export default TeamJoinForm;

components/pages/settings/teams/TeamLeaveForm.js

@@ -2,7 +2,7 @@ import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
 import useApi from 'hooks/useApi';
 import useMessages from 'hooks/useMessages';
 
-export default function TeamLeaveForm({ teamId, userId, teamName, onSave, onClose }) {
+export function TeamLeaveForm({ teamId, userId, teamName, onSave, onClose }) {
   const { formatMessage, labels, messages, FormattedMessage } = useMessages();
   const { del, useMutation } = useApi();
   const { mutate, error, isLoading } = useMutation(() => del(`/team/${teamId}/users/${userId}`));
@@ -33,3 +33,5 @@ export default function TeamLeaveForm({ teamId, userId, teamName, onSave, onClos
     </Form>
   );
 }
+
+export default TeamLeaveForm;

components/pages/settings/teams/TeamMemberRemoveButton.js

@@ -2,7 +2,7 @@ import useApi from 'hooks/useApi';
 import useMessages from 'hooks/useMessages';
 import { Icon, Icons, LoadingButton, Text } from 'react-basics';
 
-export default function TeamMemberRemoveButton({ teamId, userId, disabled, onSave }) {
+export function TeamMemberRemoveButton({ teamId, userId, disabled, onSave }) {
   const { formatMessage, labels } = useMessages();
   const { del, useMutation } = useApi();
   const { mutate, isLoading } = useMutation(() => del(`/team/${teamId}/users/${userId}`));
@@ -27,3 +27,5 @@ export default function TeamMemberRemoveButton({ teamId, userId, disabled, onSav
     </LoadingButton>
   );
 }
+
+export default TeamMemberRemoveButton;

components/pages/settings/teams/TeamMembers.js

@@ -3,7 +3,7 @@ import TeamMembersTable from 'components/pages/settings/teams/TeamMembersTable';
 import useApi from 'hooks/useApi';
 import useMessages from 'hooks/useMessages';
 
-export default function TeamMembers({ teamId, readOnly }) {
+export function TeamMembers({ teamId, readOnly }) {
   const { toast, showToast } = useToast();
   const { get, useQuery } = useApi();
   const { formatMessage, messages } = useMessages();
@@ -27,3 +27,5 @@ export default function TeamMembers({ teamId, readOnly }) {
     </>
   );
 }
+
+export default TeamMembers;

components/pages/settings/teams/TeamMembersTable.js

@@ -4,7 +4,7 @@ import { ROLES } from 'lib/constants';
 import TeamMemberRemoveButton from './TeamMemberRemoveButton';
 import SettingsTable from 'components/common/SettingsTable';
 
-export default function TeamMembersTable({ data = [], onSave, readOnly }) {
+export function TeamMembersTable({ data = [], onSave, readOnly }) {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
 
@@ -43,3 +43,5 @@ export default function TeamMembersTable({ data = [], onSave, readOnly }) {
     </SettingsTable>
   );
 }
+
+export default TeamMembersTable;

components/pages/settings/teams/TeamSettings.js

@@ -11,7 +11,7 @@ import TeamEditForm from './TeamEditForm';
 import TeamMembers from './TeamMembers';
 import TeamWebsites from './TeamWebsites';
 
-export default function TeamSettings({ teamId }) {
+export function TeamSettings({ teamId }) {
   const { formatMessage, labels, messages } = useMessages();
   const { user } = useUser();
   const [values, setValues] = useState(null);
@@ -68,3 +68,5 @@ export default function TeamSettings({ teamId }) {
     </Page>
   );
 }
+
+export default TeamSettings;

components/pages/settings/teams/TeamWebsiteRemoveButton.js

@@ -2,7 +2,7 @@ import useApi from 'hooks/useApi';
 import useMessages from 'hooks/useMessages';
 import { Icon, Icons, LoadingButton, Text } from 'react-basics';
 
-export default function TeamWebsiteRemoveButton({ teamId, websiteId, onSave }) {
+export function TeamWebsiteRemoveButton({ teamId, websiteId, onSave }) {
   const { formatMessage, labels } = useMessages();
   const { del, useMutation } = useApi();
   const { mutate, isLoading } = useMutation(() => del(`/teams/${teamId}/websites/${websiteId}`));
@@ -27,3 +27,5 @@ export default function TeamWebsiteRemoveButton({ teamId, websiteId, onSave }) {
     </LoadingButton>
   );
 }
+
+export default TeamWebsiteRemoveButton;

components/pages/settings/teams/TeamWebsites.js

@@ -14,7 +14,7 @@ import TeamAddWebsiteForm from 'components/pages/settings/teams/TeamAddWebsiteFo
 import useApi from 'hooks/useApi';
 import useMessages from 'hooks/useMessages';
 
-export default function TeamWebsites({ teamId }) {
+export function TeamWebsites({ teamId }) {
   const { toast, showToast } = useToast();
   const { formatMessage, labels, messages } = useMessages();
   const { get, useQuery } = useApi();
@@ -54,3 +54,5 @@ export default function TeamWebsites({ teamId }) {
     </div>
   );
 }
+
+export default TeamWebsites;

components/pages/settings/teams/TeamWebsitesTable.js

@@ -6,7 +6,7 @@ import TeamWebsiteRemoveButton from './TeamWebsiteRemoveButton';
 import SettingsTable from 'components/common/SettingsTable';
 import useConfig from 'hooks/useConfig';
 
-export default function TeamWebsitesTable({ data = [], onSave }) {
+export function TeamWebsitesTable({ data = [], onSave }) {
   const { formatMessage, labels } = useMessages();
   const { openExternal } = useConfig();
   const { user } = useUser();
@@ -51,3 +51,5 @@ export default function TeamWebsitesTable({ data = [], onSave }) {
     </SettingsTable>
   );
 }
+
+export default TeamWebsitesTable;

components/pages/settings/teams/TeamsList.js

@@ -6,7 +6,7 @@ import PageHeader from 'components/layout/PageHeader';
 import TeamsTable from 'components/pages/settings/teams/TeamsTable';
 import Page from 'components/layout/Page';
 import Icons from 'components/icons';
-import TeamJoinForm from './JoinTeamForm';
+import TeamJoinForm from './TeamJoinForm';
 import useApi from 'hooks/useApi';
 import useMessages from 'hooks/useMessages';
 

components/pages/settings/teams/TeamsTable.js

@@ -8,7 +8,7 @@ import { ROLES } from 'lib/constants';
 import SettingsTable from 'components/common/SettingsTable';
 import useLocale from 'hooks/useLocale';
 
-export default function TeamsTable({ data = [], onDelete }) {
+export function TeamsTable({ data = [], onDelete }) {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
   const { dir } = useLocale();
@@ -90,3 +90,5 @@ export default function TeamsTable({ data = [], onDelete }) {
     </SettingsTable>
   );
 }
+
+export default TeamsTable;

components/pages/settings/teams/WebsiteTags.js

@@ -1,7 +1,7 @@
 import { Button, Icon, Icons, Text } from 'react-basics';
 import styles from './WebsiteTags.module.css';
 
-export default function WebsiteTags({ items = [], websites = [], onClick }) {
+export function WebsiteTags({ items = [], websites = [], onClick }) {
   if (websites.length === 0) {
     return null;
   }
@@ -27,3 +27,5 @@ export default function WebsiteTags({ items = [], websites = [], onClick }) {
     </div>
   );
 }
+
+export default WebsiteTags;

components/pages/settings/users/UserAddButton.js

@@ -2,7 +2,7 @@ import { Button, Icon, Text, Modal, Icons, ModalTrigger } from 'react-basics';
 import UserAddForm from './UserAddForm';
 import useMessages from 'hooks/useMessages';
 
-export default function UserAddButton({ onSave }) {
+export function UserAddButton({ onSave }) {
   const { formatMessage, labels } = useMessages();
 
   const handleSave = () => {
@@ -23,3 +23,5 @@ export default function UserAddButton({ onSave }) {
     </ModalTrigger>
   );
 }
+
+export default UserAddButton;

components/pages/settings/users/UserAddForm.js

@@ -14,7 +14,7 @@ import useApi from 'hooks/useApi';
 import { ROLES } from 'lib/constants';
 import useMessages from 'hooks/useMessages';
 
-export default function UserAddForm({ onSave, onClose }) {
+export function UserAddForm({ onSave, onClose }) {
   const { post, useMutation } = useApi();
   const { mutate, error, isLoading } = useMutation(data => post(`/users`, data));
   const { formatMessage, labels } = useMessages();
@@ -68,3 +68,5 @@ export default function UserAddForm({ onSave, onClose }) {
     </Form>
   );
 }
+
+export default UserAddForm;

components/pages/settings/users/UserDeleteForm.js

@@ -3,7 +3,7 @@ import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
 import useApi from 'hooks/useApi';
 import useMessages from 'hooks/useMessages';
 
-export default function UserDeleteForm({ userId, username, onSave, onClose }) {
+export function UserDeleteForm({ userId, username, onSave, onClose }) {
   const { formatMessage, FormattedMessage, labels, messages } = useMessages();
   const { del } = useApi();
   const { mutate, error, isLoading } = useMutation(() => del(`/users/${userId}`));
@@ -33,3 +33,5 @@ export default function UserDeleteForm({ userId, username, onSave, onClose }) {
     </Form>
   );
 }
+
+export default UserDeleteForm;

components/pages/settings/users/UserEditForm.js

@@ -13,7 +13,7 @@ import useApi from 'hooks/useApi';
 import { ROLES } from 'lib/constants';
 import useMessages from 'hooks/useMessages';
 
-export default function UserEditForm({ userId, data, onSave }) {
+export function UserEditForm({ userId, data, onSave }) {
   const { formatMessage, labels, messages } = useMessages();
   const { post, useMutation } = useApi();
   const { mutate, error } = useMutation(({ username, password, role }) =>
@@ -68,3 +68,5 @@ export default function UserEditForm({ userId, data, onSave }) {
     </Form>
   );
 }
+
+export default UserEditForm;