chore: formatting

Signed-off-by: Henry Gressmann <mail@henrygressmann.de>

web/src/api/constants.ts

@@ -1,4 +1,4 @@
-import type { Dimension, Metric } from ".";
+import type { Dimension, Metric } from "./types";
 
 export const metricNames: Record<Metric, string> = {
 	views: "Total Views",

web/src/api/hooks.ts

@@ -1,7 +1,10 @@
 import { useMemo } from "react";
-import { queryClient, useQuery } from "./query";
-import { api, type DateRange, type Dimension, type DimensionTableRow, type Metric, type ProjectResponse } from ".";
+
 import { toDataPoints } from "../components/graph";
+import type { DateRange, Dimension, DimensionTableRow, Metric, ProjectResponse } from "./types";
+
+import { api } from ".";
+import { queryClient, useQuery } from "./query";
 import { resolveRange, type RangeName } from "./ranges";
 
 export const useMe = () => {

web/src/api/ranges.ts

@@ -1,5 +1,3 @@
-import type { DateRange } from ".";
-
 import {
 	addHours,
 	differenceInDays,
@@ -13,6 +11,8 @@ import {
 	subDays,
 	subMonths,
 } from "date-fns";
+
+import type { DateRange } from "./types";
 import type { GraphRange } from "../components/graph/graph";
 
 export const rangeNames = {

web/src/components/dialog.tsx

@@ -1,8 +1,21 @@
 import * as Dia from "@radix-ui/react-dialog";
 import { XIcon } from "lucide-react";
+
 import { cls } from "../utils";
 import styles from "./dialog.module.css";
 
+export type DialogProps = {
+	title: string;
+	description?: string;
+	hideDescription?: boolean;
+	trigger: React.ReactNode | (() => React.ReactNode);
+	children: React.ReactNode;
+	onOpenChange?: (open: boolean) => void;
+	className?: string;
+	showClose?: boolean;
+	hideTitle?: boolean;
+};
+
 export const Dialog = ({
 	title,
 	description,
@@ -13,17 +26,7 @@ export const Dialog = ({
 	className,
 	showClose,
 	hideTitle,
-}: {
-	title: string;
-	description?: string;
-	hideDescription?: boolean;
-	trigger: React.ReactNode | (() => React.ReactNode);
-	children: React.ReactNode;
-	onOpenChange?: (open: boolean) => void;
-	className?: string;
-	showClose?: boolean;
-	hideTitle?: boolean;
-}) => {
+}: DialogProps) => {
 	return (
 		<Dia.Root onOpenChange={onOpenChange}>
 			<Dia.Trigger asChild>{typeof trigger === "function" ? trigger() : trigger}</Dia.Trigger>
@@ -56,22 +59,3 @@ export const Dialog = ({
 };
 
 Dialog.Close = Dia.Close;
-
-const Hidden = ({ children }: { children: React.ReactNode }) => (
-	<span
-		style={{
-			position: "absolute",
-			border: 0,
-			width: 1,
-			height: 1,
-			padding: 0,
-			margin: -1,
-			overflow: "hidden",
-			clip: "rect(0, 0, 0, 0)",
-			whiteSpace: "nowrap",
-			wordWrap: "normal",
-		}}
-	>
-		{children}
-	</span>
-);

web/src/components/dimensions/index.tsx

@@ -14,7 +14,7 @@ import {
 } from "../../api";
 
 import { BrowserIcon, MobileDeviceIcon, OSIcon, ReferrerIcon } from "../icons";
-import { countryCodeToFlag, formatFullUrl, formatHost, getHref, tryParseUrl } from "./utils";
+import { countryCodeToFlag, formatFullUrl, formatHost, getHref, tryParseUrl } from "../../utils";
 import { DetailsModal } from "./modal";
 import { formatMetricVal } from "../../utils";
 

web/src/components/graph/index.tsx

@@ -1,5 +1,5 @@
 import { differenceInSeconds } from "date-fns";
-import "./graph.module.css";
+import _graph from "./graph.module.css";
 
 import { lazy } from "react";
 import type { Metric } from "../../api";

web/src/components/project.tsx

@@ -4,8 +4,8 @@ import _map from "./worldmap.module.css";
 import { useLocalStorage } from "@uidotdev/usehooks";
 import { Suspense, lazy, useEffect, useState } from "react";
 
-import { metricNames, useDimension, useProject, useProjectData, useQuery } from "../api";
-import type { DateRange, Metric, ProjectResponse, StatsResponse } from "../api";
+import { metricNames, useDimension, useProject, useProjectData } from "../api";
+import type { DateRange, Metric, ProjectResponse } from "../api";
 import { type RangeName, resolveRange } from "../api/ranges";
 
 import { cls } from "../utils";

web/src/components/project/project.tsx

@@ -1,7 +1,8 @@
 import styles from "./project.module.css";
 import { CircleIcon, LockIcon } from "lucide-react";
-import type { ProjectResponse, StatsResponse } from "../../api";
+
 import { formatMetricVal } from "../../utils";
+import type { ProjectResponse, StatsResponse } from "../../api";
 
 export const ProjectHeader = ({
 	project,

web/src/components/settings/dialogs.tsx

@@ -4,7 +4,6 @@ import { Dialog } from "../dialog";
 import { type Tag, Tags } from "../tags";
 import styles from "./dialogs.module.css";
 
-import { InfoIcon } from "lucide-react";
 import {
 	type EntityResponse,
 	type ProjectResponse,

web/src/components/tags.tsx

@@ -1,8 +1,8 @@
 import { useId } from "react";
 import styles from "./tags.module.css";
 
-import { ReactTags, type TagSelected, type TagSuggestion } from "react-tag-autocomplete";
 export type { Tag } from "react-tag-autocomplete";
+import { ReactTags, type TagSelected, type TagSuggestion } from "react-tag-autocomplete";
 
 export const Tags = ({
 	onAdd,

web/src/components/userInfo.tsx

@@ -1,8 +1,8 @@
 import styles from "./userInfo.module.css";
 
 import { LogOutIcon, SettingsIcon, UserIcon } from "lucide-react";
-import { api } from "../api";
 import { cls, getUsername } from "../utils";
+import { api } from "../api";
 
 export const LoginButton = () => {
 	const username = getUsername();

web/src/components/worldmap.tsx

@@ -1,10 +1,12 @@
+import styles from "./worldmap.module.css";
+
 import { useMemo, useState } from "react";
-import { ComposableMap, Geographies, Geography, ZoomableGroup } from "react-simple-maps";
 import { Tooltip } from "react-tooltip";
-import geo from "../../../data/geo.json";
+import { ComposableMap, Geographies, Geography, ZoomableGroup } from "react-simple-maps";
+
 import { type DimensionTableRow, type Metric, metricNames } from "../api";
-import styles from "./worldmap.module.css";
 import { formatMetricVal } from "../utils";
+import geo from "../../../data/geo.json";
 
 type Geo = {
 	name: string;

web/src/utils.ts

@@ -34,3 +34,43 @@ export const formatPercent = (value: number) => {
 	if (value >= 1000 || value <= -1000) return `${value.toFixed(0).replace(/\.0$/, "") || "0"}%`;
 	return `${value.toFixed(1).replace(/\.0$/, "") || "0"}%`;
 };
+
+export const tryParseUrl = (url: string) => {
+	try {
+		return new URL(url);
+	} catch {
+		try {
+			return new URL(`https://${url}`);
+		} catch {
+			return url;
+		}
+	}
+};
+
+export const formatHost = (url: string | URL) => {
+	if (typeof url === "string") return url;
+	return url.hostname;
+};
+
+export const formatFullUrl = (url: string | URL) => {
+	if (typeof url === "string") return url;
+	return `${url.hostname}${url.pathname}${url.search}`;
+};
+
+export const getHref = (url: string | URL) => {
+	if (typeof url === "string") {
+		if (!url.startsWith("http")) return `https://${url}`;
+		return url;
+	}
+
+	return url.href;
+};
+
+export const countryCodeToFlag = (countryCode: string) => {
+	const code = countryCode.length === 2 ? countryCode : "XX";
+	const codePoints = code
+		.toUpperCase()
+		.split("")
+		.map((char) => 127397 + char.charCodeAt(0));
+	return String.fromCodePoint(...codePoints);
+};