refactor: component file structure (#171)

gadomski · web-flow · commit e43e36ae512f · 2025-10-07T05:18:19.000-06:00
diff --git a/src/app.tsx b/src/app.tsx
@@ -1,11 +1,11 @@
 import { useEffect, useMemo, useState } from "react";
 import { Box, Container, FileUpload, useFileUpload } from "@chakra-ui/react";
 import type { StacCollection, StacItem } from "stac-ts";
-import Map from "./components/map";
-import Overlay from "./components/overlay";
 import { Toaster } from "./components/ui/toaster";
 import useStacChildren from "./hooks/stac-children";
 import useStacValue from "./hooks/stac-value";
+import Map from "./layers/map";
+import Overlay from "./layers/overlay";
 import type { BBox2D, Color } from "./types/map";
 import type { DatetimeBounds, StacValue } from "./types/stac";
 import {
diff --git a/src/components/cards/catalog.tsx b/src/components/cards/catalog.tsx
@@ -2,27 +2,7 @@ import { MarkdownHooks } from "react-markdown";
 import { Card, Link, Stack, Text } from "@chakra-ui/react";
 import type { StacCatalog } from "stac-ts";
 
-export default function Catalogs({
-  catalogs,
-  setHref,
-}: {
-  catalogs: StacCatalog[];
-  setHref: (href: string | undefined) => void;
-}) {
-  return (
-    <Stack>
-      {catalogs.map((catalog) => (
-        <CatalogCard
-          key={"catalog-" + catalog.id}
-          catalog={catalog}
-          setHref={setHref}
-        />
-      ))}
-    </Stack>
-  );
-}
-
-export function CatalogCard({
+export default function CatalogCard({
   catalog,
   setHref,
 }: {
diff --git a/src/components/cards/collection.tsx b/src/components/cards/collection.tsx
@@ -1,29 +1,9 @@
 import { MarkdownHooks } from "react-markdown";
 import { Card, Link, Stack, Text } from "@chakra-ui/react";
 import type { StacCollection } from "stac-ts";
-import { SpatialExtent, TemporalExtent } from "./extent";
+import { SpatialExtent, TemporalExtent } from "../extent";
 
-export default function Collections({
-  collections,
-  setHref,
-}: {
-  collections: StacCollection[];
-  setHref: (href: string | undefined) => void;
-}) {
-  return (
-    <Stack>
-      {collections.map((collection) => (
-        <CollectionCard
-          key={"collection-" + collection.id}
-          collection={collection}
-          setHref={setHref}
-        />
-      ))}
-    </Stack>
-  );
-}
-
-export function CollectionCard({
+export default function CollectionCard({
   collection,
   setHref,
   footer,
diff --git a/src/components/error.tsx b/src/components/error.tsx
diff --git a/src/components/sections/assets.tsx b/src/components/sections/assets.tsx
@@ -13,8 +13,8 @@ import {
 } from "@chakra-ui/react";
 import type { StacAsset } from "stac-ts";
 import Properties from "./properties";
-import type { StacAssets } from "../types/stac";
-import { isCog, isVisual } from "../utils/stac";
+import type { StacAssets } from "../../types/stac";
+import { isCog, isVisual } from "../../utils/stac";
 
 export default function Assets({
   assets,
diff --git a/src/components/sections/catalogs.tsx b/src/components/sections/catalogs.tsx
@@ -0,0 +1,23 @@
+import { Stack } from "@chakra-ui/react";
+import type { StacCatalog } from "stac-ts";
+import CatalogCard from "../cards/catalog";
+
+export default function Catalogs({
+  catalogs,
+  setHref,
+}: {
+  catalogs: StacCatalog[];
+  setHref: (href: string | undefined) => void;
+}) {
+  return (
+    <Stack>
+      {catalogs.map((catalog) => (
+        <CatalogCard
+          key={"catalog-" + catalog.id}
+          catalog={catalog}
+          setHref={setHref}
+        />
+      ))}
+    </Stack>
+  );
+}
diff --git a/src/components/sections/collection-search.tsx b/src/components/sections/collection-search.tsx
@@ -15,8 +15,8 @@ import {
 } from "@chakra-ui/react";
 import { useQuery } from "@tanstack/react-query";
 import type { StacCollection } from "stac-ts";
-import { CollectionCard } from "./collections";
-import type { NaturalLanguageCollectionSearchResult } from "../types/stac";
+import type { NaturalLanguageCollectionSearchResult } from "../../types/stac";
+import CollectionCard from "../cards/collection";
 
 export default function CollectionSearch({
   collections,
diff --git a/src/components/sections/collections.tsx b/src/components/sections/collections.tsx
@@ -0,0 +1,23 @@
+import { Stack } from "@chakra-ui/react";
+import type { StacCollection } from "stac-ts";
+import CollectionCard from "../cards/collection";
+
+export default function Collections({
+  collections,
+  setHref,
+}: {
+  collections: StacCollection[];
+  setHref: (href: string | undefined) => void;
+}) {
+  return (
+    <Stack>
+      {collections.map((collection) => (
+        <CollectionCard
+          key={"collection-" + collection.id}
+          collection={collection}
+          setHref={setHref}
+        />
+      ))}
+    </Stack>
+  );
+}
diff --git a/src/components/sections/filter.tsx b/src/components/sections/filter.tsx
@@ -1,10 +1,10 @@
 import { useEffect, useMemo, useState } from "react";
 import { Checkbox, DataList, Slider, Stack, Text } from "@chakra-ui/react";
 import type { StacCollection, StacItem } from "stac-ts";
-import { SpatialExtent } from "./extent";
-import type { BBox2D } from "../types/map";
-import type { DatetimeBounds, StacValue } from "../types/stac";
-import { getItemDatetimes } from "../utils/stac";
+import type { BBox2D } from "../../types/map";
+import type { DatetimeBounds, StacValue } from "../../types/stac";
+import { getItemDatetimes } from "../../utils/stac";
+import { SpatialExtent } from "../extent";
 
 export default function Filter({
   filter,
diff --git a/src/components/sections/item-search.tsx b/src/components/sections/item-search.tsx
@@ -34,10 +34,10 @@ import type {
   TemporalExtent,
 } from "stac-ts";
 import * as stac_wasm from "stac-wasm";
-import { SpatialExtent } from "./extent";
-import useStacSearch from "../hooks/stac-search";
-import type { BBox2D } from "../types/map";
-import type { StacSearch } from "../types/stac";
+import useStacSearch from "../../hooks/stac-search";
+import type { BBox2D } from "../../types/map";
+import type { StacSearch } from "../../types/stac";
+import { SpatialExtent } from "../extent";
 
 export default function ItemSearch({
   search,
diff --git a/src/components/sections/items.tsx b/src/components/sections/items.tsx
diff --git a/src/components/sections/links.tsx b/src/components/sections/links.tsx
diff --git a/src/components/sections/properties.tsx b/src/components/sections/properties.tsx
diff --git a/src/components/value.tsx b/src/components/value.tsx
@@ -34,15 +34,15 @@ import {
 } from "@chakra-ui/react";
 import { useQuery } from "@tanstack/react-query";
 import type { StacCatalog, StacCollection, StacItem } from "stac-ts";
-import Assets from "./assets";
-import Catalogs from "./catalogs";
-import CollectionSearch from "./collection-search";
-import Collections from "./collections";
-import Filter from "./filter";
-import ItemSearch from "./item-search";
-import Items from "./items";
-import Links from "./links";
-import Properties from "./properties";
+import Assets from "./sections/assets";
+import Catalogs from "./sections/catalogs";
+import CollectionSearch from "./sections/collection-search";
+import Collections from "./sections/collections";
+import Filter from "./sections/filter";
+import ItemSearch from "./sections/item-search";
+import Items from "./sections/items";
+import Links from "./sections/links";
+import Properties from "./sections/properties";
 import { Prose } from "./ui/prose";
 import useStacCollections from "../hooks/stac-collections";
 import type { BBox2D } from "../types/map";
diff --git a/src/layers/map.tsx b/src/layers/map.tsx
@@ -15,7 +15,7 @@ import "maplibre-gl/dist/maplibre-gl.css";
 import type { Table } from "apache-arrow";
 import type { SpatialExtent, StacCollection, StacItem } from "stac-ts";
 import type { BBox, Feature, FeatureCollection } from "geojson";
-import { useColorModeValue } from "./ui/color-mode";
+import { useColorModeValue } from "../components/ui/color-mode";
 import type { BBox2D, Color } from "../types/map";
 import type { StacValue } from "../types/stac";
 
diff --git a/src/layers/overlay.tsx b/src/layers/overlay.tsx
@@ -10,10 +10,10 @@ import {
   Input,
   SimpleGrid,
 } from "@chakra-ui/react";
-import Breadcrumbs from "./breadcrumbs";
-import { Examples } from "./examples";
-import Panel, { type PanelProps } from "./panel";
-import { ColorModeButton } from "./ui/color-mode";
+import Breadcrumbs from "../components/breadcrumbs";
+import { Examples } from "../components/examples";
+import Panel, { type PanelProps } from "../components/panel";
+import { ColorModeButton } from "../components/ui/color-mode";
 import type { StacValue } from "../types/stac";
 
 export interface OverlayProps extends PanelProps {
diff --git a/src/main.tsx b/src/main.tsx
@@ -3,7 +3,7 @@ import { createRoot } from "react-dom/client";
 import { ErrorBoundary } from "react-error-boundary";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import App from "./app.tsx";
-import { ErrorComponent } from "./components/error-component.tsx";
+import { ErrorComponent } from "./components/error.tsx";
 import { Provider } from "./components/ui/provider.tsx";
 
 const queryClient = new QueryClient({
