Refactor: removed default exports.

src/components/charts/BarChart.tsx

@@ -1,5 +1,5 @@
-import BarChartTooltip from '@/components/charts/BarChartTooltip';
-import Chart, { ChartProps } from '@/components/charts/Chart';
+import { BarChartTooltip } from '@/components/charts/BarChartTooltip';
+import { Chart, ChartProps } from '@/components/charts/Chart';
 import { useTheme } from '@/components/hooks';
 import { renderNumberLabels } from '@/lib/charts';
 import { useMemo, useState } from 'react';
@@ -95,5 +95,3 @@ export function BarChart(props: BarChartProps) {
     />
   );
 }
-
-export default BarChart;

src/components/charts/BarChartTooltip.tsx

@@ -15,7 +15,7 @@ const formats = {
   year: 'yyyy',
 };
 
-export default function BarChartTooltip({ tooltip, unit, currency }) {
+export function BarChartTooltip({ tooltip, unit, currency }) {
   const { locale } = useLocale();
   const { labelColors, dataPoints } = tooltip;
 

src/components/charts/BubbleChart.tsx

@@ -7,7 +7,7 @@ export interface BubbleChartProps extends ChartProps {
   type?: 'bubble';
 }
 
-export default function BubbleChart(props: BubbleChartProps) {
+export function BubbleChart(props: BubbleChartProps) {
   const [tooltip, setTooltip] = useState(null);
   const { type = 'bubble' } = props;
 

src/components/charts/Chart.tsx

@@ -2,8 +2,8 @@ import { useState, useRef, useEffect, useMemo, ReactNode } from 'react';
 import { Loading } from 'react-basics';
 import classNames from 'classnames';
 import ChartJS, { LegendItem, ChartOptions } from 'chart.js/auto';
-import HoverTooltip from '@/components/common/HoverTooltip';
-import Legend from '@/components/metrics/Legend';
+import { HoverTooltip } from '@/components/common/HoverTooltip';
+import { Legend } from '@/components/metrics/Legend';
 import { DEFAULT_ANIMATION_DURATION } from '@/lib/constants';
 import styles from './Chart.module.css';
 
@@ -151,5 +151,3 @@ export function Chart({
     </>
   );
 }
-
-export default Chart;

src/components/charts/PieChart.tsx

@@ -7,7 +7,7 @@ export interface PieChartProps extends ChartProps {
   type?: 'doughnut' | 'pie';
 }
 
-export default function PieChart(props: PieChartProps) {
+export function PieChart(props: PieChartProps) {
   const [tooltip, setTooltip] = useState(null);
   const { type = 'pie' } = props;
 

src/components/common/Avatar.tsx

@@ -5,7 +5,7 @@ import { getColor, getPastel } from '@/lib/colors';
 
 const lib = lorelei;
 
-function Avatar({ seed, size = 128, ...props }: { seed: string; size?: number }) {
+export function Avatar({ seed, size = 128, ...props }: { seed: string; size?: number }) {
   const backgroundColor = getPastel(getColor(seed), 4);
 
   const avatar = useMemo(() => {
@@ -19,5 +19,3 @@ function Avatar({ seed, size = 128, ...props }: { seed: string; size?: number })
 
   return <img src={avatar} alt="Avatar" style={{ borderRadius: '100%' }} />;
 }
-
-export default Avatar;

src/components/common/Breadcrumb.tsx

@@ -34,5 +34,3 @@ export function Breadcrumb({ data }: BreadcrumbProps) {
     </Flexbox>
   );
 }
-
-export default Breadcrumb;

src/components/common/ConfirmationForm.tsx

@@ -35,5 +35,3 @@ export function ConfirmationForm({
     </Form>
   );
 }
-
-export default ConfirmationForm;

src/components/common/DataTable.tsx

@@ -2,8 +2,8 @@ import { ReactNode } from 'react';
 import classNames from 'classnames';
 import { Loading, SearchField } from 'react-basics';
 import { useMessages, useNavigation } from '@/components/hooks';
-import Empty from '@/components/common/Empty';
-import Pager from '@/components/common/Pager';
+import { Empty } from '@/components/common/Empty';
+import { Pager } from '@/components/common/Pager';
 import { PagedQueryResult } from '@/lib/types';
 import styles from './DataTable.module.css';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
@@ -87,5 +87,3 @@ export function DataTable({
     </>
   );
 }
-
-export default DataTable;

src/components/common/Empty.tsx

@@ -16,5 +16,3 @@ export function Empty({ message, className }: EmptyProps) {
     </div>
   );
 }
-
-export default Empty;

src/components/common/EmptyPlaceholder.tsx

@@ -18,5 +18,3 @@ export function EmptyPlaceholder({ message, children }: EmptyPlaceholderProps) {
     </Flexbox>
   );
 }
-
-export default EmptyPlaceholder;

src/components/common/ErrorBoundary.tsx

@@ -29,5 +29,3 @@ export function ErrorBoundary({ children }: { children: ReactNode }) {
     </Boundary>
   );
 }
-
-export default ErrorBoundary;

src/components/common/ErrorMessage.tsx

@@ -14,5 +14,3 @@ export function ErrorMessage() {
     </div>
   );
 }
-
-export default ErrorMessage;

src/components/common/Favicon.tsx

@@ -17,5 +17,3 @@ export function Favicon({ domain, ...props }) {
 
   return hostName ? <img src={src} width={16} height={16} alt="" {...props} /> : null;
 }
-
-export default Favicon;

src/components/common/FilterButtons.tsx

@@ -16,5 +16,3 @@ export function FilterButtons({ items, selectedKey, onSelect }: FilterButtonsPro
     </Flexbox>
   );
 }
-
-export default FilterButtons;

src/components/common/FilterLink.tsx

@@ -51,5 +51,3 @@ export function FilterLink({
     </div>
   );
 }
-
-export default FilterLink;

src/components/common/HamburgerButton.tsx

@@ -1,6 +1,6 @@
 import { Button, Icon, Icons } from 'react-basics';
 import { useState } from 'react';
-import MobileMenu from './MobileMenu';
+import { MobileMenu } from './MobileMenu';
 
 export function HamburgerButton({ menuItems }: { menuItems: any[] }) {
   const [active, setActive] = useState(false);
@@ -17,5 +17,3 @@ export function HamburgerButton({ menuItems }: { menuItems: any[] }) {
     </>
   );
 }
-
-export default HamburgerButton;

src/components/common/HoverTooltip.tsx

@@ -23,5 +23,3 @@ export function HoverTooltip({ children }: { children: ReactNode }) {
     </Tooltip>
   );
 }
-
-export default HoverTooltip;

src/components/common/LinkButton.tsx

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 import classNames from 'classnames';
 import Link from 'next/link';
 import { useLocale } from '@/components/hooks';
+// eslint-disable-next-line css-modules/no-unused-class
 import styles from './LinkButton.module.css';
 
 export interface LinkButtonProps {
@@ -26,5 +27,3 @@ export function LinkButton({ href, className, variant, scroll = true, children }
     </Link>
   );
 }
-
-export default LinkButton;

src/components/common/LoadingPanel.tsx

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
 import classNames from 'classnames';
 import { Loading } from 'react-basics';
-import ErrorMessage from '@/components/common/ErrorMessage';
-import Empty from '@/components/common/Empty';
+import { ErrorMessage } from '@/components/common/ErrorMessage';
+import { Empty } from '@/components/common/Empty';
 import styles from './LoadingPanel.module.css';
 
 export function LoadingPanel({

src/components/common/MobileMenu.tsx

@@ -43,5 +43,3 @@ export function MobileMenu({
     document.body,
   );
 }
-
-export default MobileMenu;

src/components/common/Pager.tsx

@@ -55,5 +55,3 @@ export function Pager({ page, pageSize, count, onPageChange, className }: PagerP
     </div>
   );
 }
-
-export default Pager;

src/components/common/TypeConfirmationForm.tsx

@@ -51,5 +51,3 @@ export function TypeConfirmationForm({
     </Form>
   );
 }
-
-export default TypeConfirmationForm;

src/components/common/TypeIcon.tsx

@@ -26,5 +26,3 @@ export function TypeIcon({
     </>
   );
 }
-
-export default TypeIcon;

src/components/hooks/queries/useConfig.ts

@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
-import useStore, { setConfig } from '@/store/app';
+import { useApp, setConfig } from '@/store/app';
 import { getConfig } from '@/app/actions/getConfig';
 
 export function useConfig() {
-  const { config } = useStore();
+  const { config } = useApp();
 
   async function loadConfig() {
     setConfig(await getConfig());
@@ -17,5 +17,3 @@ export function useConfig() {
 
   return config;
 }
-
-export default useConfig;

src/components/hooks/queries/useEventDataEvents.ts

@@ -16,5 +16,3 @@ export function useEventDataEvents(
     ...options,
   });
 }
-
-export default useEventDataEvents;

src/components/hooks/queries/useEventDataProperties.ts

@@ -16,5 +16,3 @@ export function useEventDataProperties(
     ...options,
   });
 }
-
-export default useEventDataProperties;

src/components/hooks/queries/useEventDataValues.ts

@@ -19,5 +19,3 @@ export function useEventDataValues(
     ...options,
   });
 }
-
-export default useEventDataValues;

src/components/hooks/queries/useLogin.ts

@@ -1,5 +1,5 @@
 import { UseQueryResult } from '@tanstack/react-query';
-import useStore, { setUser } from '@/store/app';
+import { useApp, setUser } from '@/store/app';
 import { useApi } from '../useApi';
 
 const selector = (state: { user: any }) => state.user;
@@ -9,7 +9,7 @@ export function useLogin(): {
   setUser: (data: any) => void;
 } & UseQueryResult {
   const { get, useQuery } = useApi();
-  const user = useStore(selector);
+  const user = useApp(selector);
 
   const query = useQuery({
     queryKey: ['login'],
@@ -25,5 +25,3 @@ export function useLogin(): {
 
   return { user, setUser, ...query };
 }
-
-export default useLogin;

src/components/hooks/queries/useRealtime.ts

@@ -17,5 +17,3 @@ export function useRealtime(websiteId: string) {
 
   return { data, isLoading, error };
 }
-
-export default useRealtime;

src/components/hooks/queries/useReport.ts

@@ -92,5 +92,3 @@ export function useReport(
 
   return { report, runReport, updateReport, isRunning };
 }
-
-export default useReport;

src/components/hooks/queries/useReports.ts

@@ -1,6 +1,6 @@
-import useApi from '../useApi';
-import usePagedQuery from '../usePagedQuery';
-import useModified from '../useModified';
+import { useApi } from '../useApi';
+import { usePagedQuery } from '../usePagedQuery';
+import { useModified } from '../useModified';
 
 export function useReports({ websiteId, teamId }: { websiteId?: string; teamId?: string }) {
   const { modified } = useModified(`reports`);
@@ -24,5 +24,3 @@ export function useReports({ websiteId, teamId }: { websiteId?: string; teamId?:
     deleteReport,
   };
 }
-
-export default useReports;

src/components/hooks/queries/useRevenueValues.ts

@@ -14,5 +14,3 @@ export function useRevenueValues(websiteId: string, startDate: Date, endDate: Da
     enabled: !!(websiteId && startDate && endDate),
   });
 }
-
-export default useRevenueValues;

src/components/hooks/queries/useSessionDataProperties.ts

@@ -16,5 +16,3 @@ export function useSessionDataProperties(
     ...options,
   });
 }
-
-export default useSessionDataProperties;

src/components/hooks/queries/useSessionDataValues.ts

@@ -17,5 +17,3 @@ export function useSessionDataValues(
     ...options,
   });
 }
-
-export default useSessionDataValues;

src/components/hooks/queries/useShareToken.ts

@@ -1,4 +1,4 @@
-import useStore, { setShareToken } from '@/store/app';
+import { useApp, setShareToken } from '@/store/app';
 import { useApi } from '../useApi';
 
 const selector = (state: { shareToken: string }) => state.shareToken;
@@ -8,7 +8,7 @@ export function useShareToken(shareId: string): {
   isLoading?: boolean;
   error?: Error;
 } {
-  const shareToken = useStore(selector);
+  const shareToken = useApp(selector);
   const { get, useQuery } = useApi();
   const { isLoading, error } = useQuery({
     queryKey: ['share', shareId],
@@ -23,5 +23,3 @@ export function useShareToken(shareId: string): {
 
   return { shareToken, isLoading, error };
 }
-
-export default useShareToken;

src/components/hooks/queries/useTeam.ts

@@ -8,5 +8,3 @@ export function useTeam(teamId: string) {
     enabled: !!teamId,
   });
 }
-
-export default useTeam;

src/components/hooks/queries/useTeamMembers.ts

@@ -1,6 +1,6 @@
 import { useApi } from '../useApi';
-import usePagedQuery from '../usePagedQuery';
-import useModified from '../useModified';
+import { usePagedQuery } from '../usePagedQuery';
+import { useModified } from '../useModified';
 
 export function useTeamMembers(teamId: string) {
   const { get } = useApi();
@@ -14,5 +14,3 @@ export function useTeamMembers(teamId: string) {
     enabled: !!teamId,
   });
 }
-
-export default useTeamMembers;

src/components/hooks/queries/useTeamWebsites.ts

@@ -1,6 +1,6 @@
 import { useApi } from '../useApi';
 import { usePagedQuery } from '../usePagedQuery';
-import useModified from '../useModified';
+import { useModified } from '../useModified';
 
 export function useTeamWebsites(teamId: string) {
   const { get } = useApi();
@@ -13,5 +13,3 @@ export function useTeamWebsites(teamId: string) {
     },
   });
 }
-
-export default useTeamWebsites;

src/components/hooks/queries/useTeams.ts

@@ -1,6 +1,6 @@
 import { useApi } from '../useApi';
 import { usePagedQuery } from '../usePagedQuery';
-import useModified from '../useModified';
+import { useModified } from '../useModified';
 
 export function useTeams(userId: string) {
   const { get } = useApi();
@@ -14,5 +14,3 @@ export function useTeams(userId: string) {
     enabled: !!userId,
   });
 }
-
-export default useTeams;

src/components/hooks/queries/useUser.ts

@@ -9,5 +9,3 @@ export function useUser(userId: string, options?: { [key: string]: any }) {
     ...options,
   });
 }
-
-export default useUser;

src/components/hooks/queries/useUsers.ts

@@ -1,6 +1,6 @@
 import { useApi } from '../useApi';
 import { usePagedQuery } from '../usePagedQuery';
-import useModified from '../useModified';
+import { useModified } from '../useModified';
 
 export function useUsers() {
   const { get } = useApi();
@@ -15,5 +15,3 @@ export function useUsers() {
     },
   });
 }
-
-export default useUsers;

src/components/hooks/queries/useWebsite.ts

@@ -10,5 +10,3 @@ export function useWebsite(websiteId: string, options?: { [key: string]: any })
     ...options,
   });
 }
-
-export default useWebsite;

src/components/hooks/queries/useWebsiteEvents.ts

@@ -18,5 +18,3 @@ export function useWebsiteEvents(
     ...options,
   });
 }
-
-export default useWebsiteEvents;

src/components/hooks/queries/useWebsiteEventsSeries.ts

@@ -16,5 +16,3 @@ export function useWebsiteEventsSeries(
     ...options,
   });
 }
-
-export default useWebsiteEventsSeries;

src/components/hooks/queries/useWebsiteMetrics.ts

@@ -36,5 +36,3 @@ export function useWebsiteMetrics(
     ...options,
   });
 }
-
-export default useWebsiteMetrics;

src/components/hooks/queries/useWebsitePageviews.ts

@@ -17,5 +17,3 @@ export function useWebsitePageviews(
     ...options,
   });
 }
-
-export default useWebsitePageviews;

src/components/hooks/queries/useWebsiteSession.ts

@@ -10,5 +10,3 @@ export function useWebsiteSession(websiteId: string, sessionId: string) {
     },
   });
 }
-
-export default useWebsiteSession;

src/components/hooks/queries/useWebsiteSessionStats.ts

@@ -12,5 +12,3 @@ export function useWebsiteSessionStats(websiteId: string, options?: { [key: stri
     ...options,
   });
 }
-
-export default useWebsiteSessionStats;

src/components/hooks/queries/useWebsiteSessions.ts

@@ -1,6 +1,6 @@
 import { useApi } from '../useApi';
 import { usePagedQuery } from '../usePagedQuery';
-import useModified from '../useModified';
+import { useModified } from '../useModified';
 import { useFilterParams } from '@/components/hooks/useFilterParams';
 
 export function useWebsiteSessions(websiteId: string, params?: { [key: string]: string | number }) {
@@ -20,5 +20,3 @@ export function useWebsiteSessions(websiteId: string, params?: { [key: string]:
     },
   });
 }
-
-export default useWebsiteSessions;

src/components/hooks/queries/useWebsiteSessionsWeekly.ts

@@ -1,5 +1,5 @@
 import { useApi } from '../useApi';
-import useModified from '../useModified';
+import { useModified } from '../useModified';
 import { useFilterParams } from '@/components/hooks/useFilterParams';
 
 export function useWebsiteSessionsWeekly(
@@ -20,5 +20,3 @@ export function useWebsiteSessionsWeekly(
     },
   });
 }
-
-export default useWebsiteSessionsWeekly;

src/components/hooks/queries/useWebsiteStats.ts

@@ -16,5 +16,3 @@ export function useWebsiteStats(
     ...options,
   });
 }
-
-export default useWebsiteStats;

src/components/hooks/queries/useWebsiteValues.ts

@@ -1,7 +1,7 @@
 import { useApi } from '../useApi';
 import { useCountryNames } from '@/components/hooks/useCountryNames';
 import { useRegionNames } from '@/components/hooks/useRegionNames';
-import useLocale from '../useLocale';
+import { useLocale } from '../useLocale';
 
 export function useWebsiteValues({
   websiteId,
@@ -60,5 +60,3 @@ export function useWebsiteValues({
     enabled: !!(websiteId && type && startDate && endDate),
   });
 }
-
-export default useWebsiteValues;

src/components/hooks/queries/useWebsites.ts

@@ -1,7 +1,7 @@
 import { useApi } from '../useApi';
 import { usePagedQuery } from '../usePagedQuery';
 import { useLogin } from './useLogin';
-import useModified from '../useModified';
+import { useModified } from '../useModified';
 
 export function useWebsites(
   { userId, teamId }: { userId?: string; teamId?: string },
@@ -21,5 +21,3 @@ export function useWebsites(
     },
   });
 }
-
-export default useWebsites;

src/components/hooks/useApi.ts

@@ -3,7 +3,7 @@ import * as reactQuery from '@tanstack/react-query';
 import { getClientAuthToken } from '@/lib/client';
 import { SHARE_TOKEN_HEADER } from '@/lib/constants';
 import { httpGet, httpPost, httpPut, httpDelete, FetchResponse } from '@/lib/fetch';
-import useStore from '@/store/app';
+import { useApp } from '@/store/app';
 
 const selector = (state: { shareToken: { token?: string } }) => state.shareToken;
 
@@ -19,7 +19,7 @@ function handleError(err: Error | string) {
 }
 
 export function useApi() {
-  const shareToken = useStore(selector);
+  const shareToken = useApp(selector);
 
   const defaultHeaders = {
     authorization: `Bearer ${getClientAuthToken()}`,
@@ -74,5 +74,3 @@ export function useApi() {
     ...reactQuery,
   };
 }
-
-export default useApi;

src/components/hooks/useCountryNames.ts

@@ -30,5 +30,3 @@ export function useCountryNames(locale: string) {
 
   return { countryNames: list };
 }
-
-export default useCountryNames;

src/components/hooks/useDateRange.ts

@@ -1,8 +1,8 @@
 import { getMinimumUnit, parseDateRange } from '@/lib/date';
 import { setItem } from '@/lib/storage';
 import { DATE_RANGE_CONFIG, DEFAULT_DATE_COMPARE, DEFAULT_DATE_RANGE } from '@/lib/constants';
-import websiteStore, { setWebsiteDateRange, setWebsiteDateCompare } from '@/store/websites';
-import appStore, { setDateRange } from '@/store/app';
+import { useWebsites, setWebsiteDateRange, setWebsiteDateCompare } from '@/store/websites';
+import { useApp, setDateRange } from '@/store/app';
 import { DateRange } from '@/lib/types';
 import { useLocale } from './useLocale';
 import { useApi } from './useApi';
@@ -15,11 +15,11 @@ export function useDateRange(websiteId?: string): {
 } {
   const { get } = useApi();
   const { locale } = useLocale();
-  const websiteConfig = websiteStore(state => state[websiteId]?.dateRange);
+  const websiteConfig = useWebsites(state => state[websiteId]?.dateRange);
   const defaultConfig = DEFAULT_DATE_RANGE;
-  const globalConfig = appStore(state => state.dateRange);
+  const globalConfig = useApp(state => state.dateRange);
   const dateRange = parseDateRange(websiteConfig || globalConfig || defaultConfig, locale);
-  const dateCompare = websiteStore(state => state[websiteId]?.dateCompare || DEFAULT_DATE_COMPARE);
+  const dateCompare = useWebsites(state => state[websiteId]?.dateCompare || DEFAULT_DATE_COMPARE);
 
   const saveDateRange = async (value: DateRange | string) => {
     if (websiteId) {
@@ -57,5 +57,3 @@ export function useDateRange(websiteId?: string): {
 
   return { dateRange, saveDateRange, dateCompare, saveDateCompare };
 }
-
-export default useDateRange;

src/components/hooks/useDocumentClick.ts

@@ -11,5 +11,3 @@ export function useDocumentClick(handler: (event: MouseEvent) => any) {
 
   return null;
 }
-
-export default useDocumentClick;

src/components/hooks/useEscapeKey.ts

@@ -17,5 +17,3 @@ export function useEscapeKey(handler: (event: KeyboardEvent) => void) {
 
   return null;
 }
-
-export default useEscapeKey;

src/components/hooks/useFields.ts

@@ -20,5 +20,3 @@ export function useFields() {
 
   return { fields };
 }
-
-export default useFields;

src/components/hooks/useFilters.ts

@@ -49,5 +49,3 @@ export function useFilters() {
 
   return { filters, operatorLabels, typeFilters, getFilters };
 }
-
-export default useFilters;

src/components/hooks/useForceUpdate.ts

@@ -7,5 +7,3 @@ export function useForceUpdate() {
     update(Object.create(null));
   }, [update]);
 }
-
-export default useForceUpdate;

src/components/hooks/useFormat.ts

@@ -1,8 +1,8 @@
-import useMessages from './useMessages';
+import { useMessages } from './useMessages';
 import { BROWSERS, OS_NAMES } from '@/lib/constants';
-import useLocale from './useLocale';
-import useCountryNames from './useCountryNames';
-import useLanguageNames from './useLanguageNames';
+import { useLocale } from './useLocale';
+import { useCountryNames } from './useCountryNames';
+import { useLanguageNames } from './useLanguageNames';
 import regions from '../../../public/iso-3166-2.json';
 
 export function useFormat() {
@@ -72,5 +72,3 @@ export function useFormat() {
     formatValue,
   };
 }
-
-export default useFormat;

src/components/hooks/useLanguageNames.ts

@@ -30,5 +30,3 @@ export function useLanguageNames(locale) {
 
   return { languageNames: list };
 }
-
-export default useLanguageNames;

src/components/hooks/useLocale.ts

@@ -3,7 +3,7 @@ import { httpGet } from '@/lib/fetch';
 import { setItem } from '@/lib/storage';
 import { LOCALE_CONFIG } from '@/lib/constants';
 import { getDateLocale, getTextDirection } from '@/lib/lang';
-import useStore, { setLocale } from '@/store/app';
+import { useApp, setLocale } from '@/store/app';
 import { useForceUpdate } from './useForceUpdate';
 import enUS from '../../../public/intl/country/en-US.json';
 
@@ -14,7 +14,7 @@ const messages = {
 const selector = (state: { locale: any }) => state.locale;
 
 export function useLocale() {
-  const locale = useStore(selector);
+  const locale = useApp(selector);
   const forceUpdate = useForceUpdate();
   const dir = getTextDirection(locale);
   const dateLocale = getDateLocale(locale);
@@ -58,5 +58,3 @@ export function useLocale() {
 
   return { locale, saveLocale, messages, dir, dateLocale };
 }
-
-export default useLocale;

src/components/hooks/useMessages.ts

@@ -23,5 +23,3 @@ export function useMessages(): any {
 
   return { formatMessage, messages, labels, getMessage };
 }
-
-export default useMessages;

src/components/hooks/useModified.ts

@@ -1,15 +1,13 @@
-import useStore from '@/store/modified';
+import { create } from 'zustand';
+
+const store = create(() => ({}));
+
+export function touch(key: string) {
+  store.setState({ [key]: Date.now() });
+}
 
 export function useModified(key?: string) {
-  const modified = useStore(state => state?.[key]);
-
-  const touch = (id?: string) => {
-    if (id || key) {
-      useStore.setState({ [id || key]: Date.now() });
-    }
-  };
+  const modified = store(state => state?.[key]);
 
   return { modified, touch };
 }
-
-export default useModified;

src/components/hooks/useNavigation.ts

@@ -28,5 +28,3 @@ export function useNavigation(): {
 
   return { pathname, query, router, renderUrl };
 }
-
-export default useNavigation;

src/components/hooks/usePagedQuery.ts

@@ -29,5 +29,3 @@ export function usePagedQuery<T = any>({
     setParams,
   };
 }
-
-export default usePagedQuery;

src/components/hooks/useRegionNames.ts

@@ -1,4 +1,4 @@
-import useCountryNames from './useCountryNames';
+import { useCountryNames } from './useCountryNames';
 import regions from '../../../public/iso-3166-2.json';
 
 export function useRegionNames(locale: string) {
@@ -15,5 +15,3 @@ export function useRegionNames(locale: string) {
 
   return { regionNames: regions, getRegionName };
 }
-
-export default useRegionNames;

src/components/hooks/useSticky.ts

@@ -6,6 +6,7 @@ export function useSticky({ enabled = true, threshold = 1 }) {
 
   useEffect(() => {
     let observer: IntersectionObserver | undefined;
+    // eslint-disable-next-line no-undef
     const handler: IntersectionObserverCallback = ([entry]) =>
       setIsSticky(entry.intersectionRatio < threshold);
 
@@ -22,5 +23,3 @@ export function useSticky({ enabled = true, threshold = 1 }) {
 
   return { ref, isSticky };
 }
-
-export default useSticky;

src/components/hooks/useTeamUrl.ts

@@ -13,5 +13,3 @@ export function useTeamUrl(): {
 
   return { teamId, renderTeamUrl };
 }
-
-export default useTeamUrl;

src/components/hooks/useTheme.ts

@@ -1,5 +1,5 @@
 import { useEffect, useMemo } from 'react';
-import useStore, { setTheme } from '@/store/app';
+import { useApp, setTheme } from '@/store/app';
 import { getItem, setItem } from '@/lib/storage';
 import { DEFAULT_THEME, THEME_COLORS, THEME_CONFIG } from '@/lib/constants';
 import { colord } from 'colord';
@@ -7,7 +7,7 @@ import { colord } from 'colord';
 const selector = (state: { theme: string }) => state.theme;
 
 export function useTheme() {
-  const theme = useStore(selector) || getItem(THEME_CONFIG) || DEFAULT_THEME;
+  const theme = useApp(selector) || getItem(THEME_CONFIG) || DEFAULT_THEME;
   const primaryColor = colord(THEME_COLORS[theme].primary);
 
   const colors = useMemo(() => {
@@ -60,5 +60,3 @@ export function useTheme() {
 
   return { theme, saveTheme, colors };
 }
-
-export default useTheme;

src/components/hooks/useTimezone.ts

@@ -1,12 +1,12 @@
 import { setItem } from '@/lib/storage';
 import { TIMEZONE_CONFIG } from '@/lib/constants';
 import { formatInTimeZone, zonedTimeToUtc, utcToZonedTime } from 'date-fns-tz';
-import useStore, { setTimezone } from '@/store/app';
+import { useApp, setTimezone } from '@/store/app';
 
 const selector = (state: { timezone: string }) => state.timezone;
 
 export function useTimezone() {
-  const timezone = useStore(selector);
+  const timezone = useApp(selector);
 
   const saveTimezone = (value: string) => {
     setItem(TIMEZONE_CONFIG, value);
@@ -33,5 +33,3 @@ export function useTimezone() {
 
   return { timezone, saveTimezone, formatTimezoneDate, toUtc, fromUtc };
 }
-
-export default useTimezone;

src/components/icons.ts

@@ -1,4 +1,4 @@
-import { Icons } from 'react-basics';
+import { Icons as ReactBasicsIcons } from 'react-basics';
 import AddUser from '@/assets/add-user.svg';
 import Bars from '@/assets/bars.svg';
 import BarChart from '@/assets/bar-chart.svg';
@@ -27,7 +27,7 @@ import Users from '@/assets/users.svg';
 import Visitor from '@/assets/visitor.svg';
 
 const icons = {
-  ...Icons,
+  ...ReactBasicsIcons,
   AddUser,
   Bars,
   BarChart,
@@ -56,4 +56,4 @@ const icons = {
   Visitor,
 };
 
-export default icons;
+export const Icons = icons;

src/components/input/DateFilter.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react';
 import { Icon, Modal, Dropdown, Item, Text, Flexbox } from 'react-basics';
 import { endOfYear, isSameDay } from 'date-fns';
-import DatePickerForm from '@/components/metrics/DatePickerForm';
+import { DatePickerForm } from '@/components/metrics/DatePickerForm';
 import { useLocale, useMessages } from '@/components/hooks';
-import Icons from '@/components/icons';
+import { Icons } from '@/components/icons';
 import { formatDate, parseDateValue } from '@/lib/date';
 import styles from './DateFilter.module.css';
 import classNames from 'classnames';
@@ -184,5 +184,3 @@ const CustomRange = ({ startDate, endDate, unit, onClick }) => {
     </Flexbox>
   );
 };
-
-export default DateFilter;

src/components/input/LanguageButton.tsx

@@ -1,7 +1,7 @@
 import { Icon, Button, MenuTrigger, Popover, Grid, Text, Dialog } from '@umami/react-zen';
 import { languages } from '@/lib/lang';
 import { useLocale } from '@/components/hooks';
-import Icons from '@/components/icons';
+import { Icons } from '@/components/icons';
 
 export function LanguageButton() {
   const { locale, saveLocale } = useLocale();
@@ -39,5 +39,3 @@ export function LanguageButton() {
     </MenuTrigger>
   );
 }
-
-export default LanguageButton;

src/components/input/LogoutButton.tsx

@@ -20,5 +20,3 @@ export function LogoutButton({
     </Link>
   );
 }
-
-export default LogoutButton;

src/components/input/MonthSelect.tsx

@@ -9,7 +9,7 @@ import {
   Popup,
 } from 'react-basics';
 import { startOfMonth, endOfMonth } from 'date-fns';
-import Icons from '@/components/icons';
+import { Icons } from '@/components/icons';
 import { useLocale } from '@/components/hooks';
 import { formatDate } from '@/lib/date';
 import styles from './MonthSelect.module.css';
@@ -62,5 +62,3 @@ export function MonthSelect({ date = new Date(), onChange }) {
     </>
   );
 }
-
-export default MonthSelect;

src/components/input/ProfileButton.tsx

@@ -11,7 +11,7 @@ import {
   Text,
 } from '@umami/react-zen';
 import { useRouter } from 'next/navigation';
-import Icons from '@/components/icons';
+import { Icons } from '@/components/icons';
 import { useMessages, useLogin } from '@/components/hooks';
 
 export function ProfileButton() {
@@ -60,5 +60,3 @@ export function ProfileButton() {
     </MenuTrigger>
   );
 }
-
-export default ProfileButton;

src/components/input/RefreshButton.tsx

@@ -1,7 +1,7 @@
 import { LoadingButton, Icon, TooltipPopup } from 'react-basics';
 import { setWebsiteDateRange } from '@/store/websites';
 import { useDateRange } from '@/components/hooks';
-import Icons from '@/components/icons';
+import { Icons } from '@/components/icons';
 import { useMessages } from '@/components/hooks';
 
 export function RefreshButton({
@@ -30,5 +30,3 @@ export function RefreshButton({
     </TooltipPopup>
   );
 }
-
-export default RefreshButton;

src/components/input/SettingsButton.tsx

@@ -1,7 +1,7 @@
 import { Button, Icon, PopupTrigger, Popup, Form, FormRow } from 'react-basics';
-import TimezoneSetting from '@/app/(main)/profile/TimezoneSetting';
-import DateRangeSetting from '@/app/(main)/profile/DateRangeSetting';
-import Icons from '@/components/icons';
+import { TimezoneSetting } from '@/app/(main)/profile/TimezoneSetting';
+import { DateRangeSetting } from '@/app/(main)/profile/DateRangeSetting';
+import { Icons } from '@/components/icons';
 import { useMessages } from '@/components/hooks';
 import styles from './SettingsButton.module.css';
 
@@ -28,5 +28,3 @@ export function SettingsButton() {
     </PopupTrigger>
   );
 }
-
-export default SettingsButton;

src/components/input/TeamsButton.tsx

@@ -14,7 +14,7 @@ import {
   Row,
   Box,
 } from '@umami/react-zen';
-import Icons from '@/components/icons';
+import { Icons } from '@/components/icons';
 import { useLogin, useMessages, useTeams, useTeamUrl } from '@/components/hooks';
 
 export function TeamsButton({
@@ -90,5 +90,3 @@ export function TeamsButton({
     </MenuTrigger>
   );
 }
-
-export default TeamsButton;

src/components/input/WebsiteDateFilter.tsx

@@ -2,7 +2,7 @@ import { useDateRange, useLocale } from '@/components/hooks';
 import { isAfter } from 'date-fns';
 import { getOffsetDateRange } from '@/lib/date';
 import { Button, Icon, Icons } from 'react-basics';
-import DateFilter from './DateFilter';
+import { DateFilter } from './DateFilter';
 import styles from './WebsiteDateFilter.module.css';
 import { DateRange } from '@/lib/types';
 
@@ -55,5 +55,3 @@ export function WebsiteDateFilter({
     </div>
   );
 }
-
-export default WebsiteDateFilter;

src/components/input/WebsiteSelect.tsx

@@ -1,7 +1,7 @@
 import { useState, Key } from 'react';
 import { Dropdown, Item } from 'react-basics';
 import { useWebsite, useWebsites, useMessages } from '@/components/hooks';
-import Empty from '@/components/common/Empty';
+import { Empty } from '@/components/common/Empty';
 import styles from './WebsiteSelect.module.css';
 
 export function WebsiteSelect({
@@ -56,5 +56,3 @@ export function WebsiteSelect({
     </Dropdown>
   );
 }
-
-export default WebsiteSelect;

src/components/layout/MenuLayout.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { usePathname } from 'next/navigation';
-import SideNav from '@/components/layout/SideNav';
+import { SideNav } from '@/components/layout/SideNav';
 import styles from './MenuLayout.module.css';
 
 export function MenuLayout({ items = [], children }: { items: any[]; children: ReactNode }) {
@@ -20,5 +20,3 @@ export function MenuLayout({ items = [], children }: { items: any[]; children: R
     </div>
   );
 }
-
-export default MenuLayout;

src/components/layout/NavGroup.tsx

@@ -3,7 +3,7 @@ import { Icon, Text, TooltipPopup } from 'react-basics';
 import classNames from 'classnames';
 import { usePathname } from 'next/navigation';
 import Link from 'next/link';
-import Icons from '@/components/icons';
+import { Icons } from '@/components/icons';
 import styles from './NavGroup.module.css';
 
 export interface NavGroupProps {
@@ -62,5 +62,3 @@ export function NavGroup({
     </div>
   );
 }
-
-export default NavGroup;

src/components/layout/Page.tsx

@@ -28,5 +28,3 @@ export function Page({
 
   return <div className={classNames(styles.page, className)}>{children}</div>;
 }
-
-export default Page;

src/components/layout/PageHeader.tsx

@@ -32,5 +32,3 @@ export function PageHeader({
     </>
   );
 }
-
-export default PageHeader;

src/components/layout/SideNav.tsx

@@ -42,5 +42,3 @@ export function SideNav({
     </Menu>
   );
 }
-
-export default SideNav;

src/components/metrics/ActiveUsers.tsx

@@ -40,5 +40,3 @@ export function ActiveUsers({
     </StatusLight>
   );
 }
-
-export default ActiveUsers;

src/components/metrics/BrowsersTable.tsx

@@ -1,8 +1,8 @@
-import FilterLink from '@/components/common/FilterLink';
-import MetricsTable, { MetricsTableProps } from '@/components/metrics/MetricsTable';
+import { FilterLink } from '@/components/common/FilterLink';
+import { MetricsTable, MetricsTableProps } from '@/components/metrics/MetricsTable';
 import { useMessages } from '@/components/hooks';
 import { useFormat } from '@/components/hooks';
-import TypeIcon from '@/components/common/TypeIcon';
+import { TypeIcon } from '@/components/common/TypeIcon';
 
 export function BrowsersTable(props: MetricsTableProps) {
   const { formatMessage, labels } = useMessages();
@@ -26,5 +26,3 @@ export function BrowsersTable(props: MetricsTableProps) {
     />
   );
 }
-
-export default BrowsersTable;

src/components/metrics/ChangeLabel.tsx

@@ -42,5 +42,3 @@ export function ChangeLabel({
     </div>
   );
 }
-
-export default ChangeLabel;

src/components/metrics/ChannelsTable.tsx

@@ -1,4 +1,4 @@
-import MetricsTable, { MetricsTableProps } from '@/components/metrics/MetricsTable';
+import { MetricsTable, MetricsTableProps } from '@/components/metrics/MetricsTable';
 import { useMessages } from '@/components/hooks';
 
 export function ChannelsTable(props: MetricsTableProps) {
@@ -18,5 +18,3 @@ export function ChannelsTable(props: MetricsTableProps) {
     />
   );
 }
-
-export default ChannelsTable;

src/components/metrics/CitiesTable.tsx

@@ -1,6 +1,6 @@
-import MetricsTable, { MetricsTableProps } from './MetricsTable';
+import { MetricsTable, MetricsTableProps } from './MetricsTable';
 import { emptyFilter } from '@/lib/filters';
-import FilterLink from '@/components/common/FilterLink';
+import { FilterLink } from '@/components/common/FilterLink';
 import { useMessages } from '@/components/hooks';
 import { useFormat } from '@/components/hooks';
 
@@ -35,5 +35,3 @@ export function CitiesTable(props: MetricsTableProps) {
     />
   );
 }
-
-export default CitiesTable;

src/components/metrics/CountriesTable.tsx

@@ -1,8 +1,8 @@
-import FilterLink from '@/components/common/FilterLink';
+import { FilterLink } from '@/components/common/FilterLink';
 import { useCountryNames } from '@/components/hooks';
 import { useLocale, useMessages, useFormat } from '@/components/hooks';
-import MetricsTable, { MetricsTableProps } from './MetricsTable';
-import TypeIcon from '@/components/common/TypeIcon';
+import { MetricsTable, MetricsTableProps } from './MetricsTable';
+import { TypeIcon } from '@/components/common/TypeIcon';
 
 export function CountriesTable({ ...props }: MetricsTableProps) {
   const { locale } = useLocale();
@@ -33,5 +33,3 @@ export function CountriesTable({ ...props }: MetricsTableProps) {
     />
   );
 }
-
-export default CountriesTable;

src/components/metrics/DatePickerForm.tsx

@@ -82,5 +82,3 @@ export function DatePickerForm({
     </div>
   );
 }
-
-export default DatePickerForm;

src/components/metrics/DevicesTable.tsx

@@ -1,8 +1,8 @@
-import MetricsTable, { MetricsTableProps } from './MetricsTable';
-import FilterLink from '@/components/common/FilterLink';
+import { MetricsTable, MetricsTableProps } from './MetricsTable';
+import { FilterLink } from '@/components/common/FilterLink';
 import { useMessages } from '@/components/hooks';
 import { useFormat } from '@/components/hooks';
-import TypeIcon from '@/components/common/TypeIcon';
+import { TypeIcon } from '@/components/common/TypeIcon';
 
 export function DevicesTable(props: MetricsTableProps) {
   const { formatMessage, labels } = useMessages();
@@ -27,5 +27,3 @@ export function DevicesTable(props: MetricsTableProps) {
     />
   );
 }
-
-export default DevicesTable;

src/components/metrics/EventsChart.tsx

@@ -1,5 +1,5 @@
 import { colord } from 'colord';
-import BarChart from '@/components/charts/BarChart';
+import { BarChart } from '@/components/charts/BarChart';
 import { useDateRange, useLocale, useWebsiteEventsSeries } from '@/components/hooks';
 import { renderDateLabels } from '@/lib/charts';
 import { CHART_COLORS } from '@/lib/constants';
@@ -59,5 +59,3 @@ export function EventsChart({ websiteId, className }: EventsChartProps) {
     />
   );
 }
-
-export default EventsChart;

src/components/metrics/EventsTable.tsx

@@ -1,4 +1,4 @@
-import MetricsTable, { MetricsTableProps } from './MetricsTable';
+import { MetricsTable, MetricsTableProps } from './MetricsTable';
 import { useMessages } from '@/components/hooks';
 
 export function EventsTable(props: MetricsTableProps) {
@@ -18,5 +18,3 @@ export function EventsTable(props: MetricsTableProps) {
     />
   );
 }
-
-export default EventsTable;