Revert station types to avoid dep

Author: bkeepers

packages/react/src/components/TideGraph/TideGraph.tsx

@@ -1,42 +1,16 @@
 import { useNeapsConfig } from "../../provider.js";
 import { TideGraphScroll } from "./TideGraphScroll.js";
-import { TideGraphStatic } from "./TideGraphStatic.js";
 import { PX_PER_DAY_DEFAULT } from "./constants.js";
-import type { TimelineEntry, Extreme, Units } from "../../types.js";
 
-export interface TideGraphDataProps {
-  timeline: TimelineEntry[];
-  extremes?: Extreme[];
-  timezone?: string;
-  units?: Units;
-}
-
-export interface TideGraphFetchProps {
+export interface TideGraphProps {
   id: string;
-  timeline?: undefined;
-}
-
-export type TideGraphProps = (TideGraphDataProps | TideGraphFetchProps) & {
   pxPerDay?: number;
   className?: string;
-};
+}
 
 export function TideGraph(props: TideGraphProps) {
   const config = useNeapsConfig();
 
-  if (props.timeline) {
-    return (
-      <TideGraphStatic
-        timeline={props.timeline}
-        extremes={props.extremes}
-        timezone={props.timezone}
-        units={props.units ?? config.units}
-        locale={config.locale}
-        className={props.className}
-      />
-    );
-  }
-
   return (
     <TideGraphScroll
       id={props.id}

packages/react/src/components/TideGraph/TideGraphChart.tsx

@@ -11,6 +11,7 @@ import { useTideScales } from "../../hooks/use-tide-scales.js";
 import { NightBands } from "./NightBands.js";
 import { HEIGHT, MARGIN } from "./constants.js";
 import type { TimelineEntry, Extreme, Units } from "../../types.js";
+import { useNeapsConfig } from "../../provider.js";
 
 const timelineBisector = bisector<TimelineEntry, number>((d) => d.time.getTime()).left;
 
@@ -19,7 +20,6 @@ export function TideGraphChart({
   extremes,
   timezone,
   units,
-  locale,
   svgWidth,
   yDomainOverride,
   latitude,
@@ -32,7 +32,6 @@ export function TideGraphChart({
   extremes: Extreme[];
   timezone: string;
   units: Units;
-  locale: string;
   svgWidth: number;
   yDomainOverride?: [number, number];
   latitude?: number;
@@ -42,6 +41,7 @@ export function TideGraphChart({
   onSelect: (entry: TimelineEntry | null, sticky?: boolean) => void;
 }) {
   const gradientId = useId();
+  const { locale } = useNeapsConfig();
 
   const { xScale, yScale, innerW, innerH } = useTideScales({
     timeline,

packages/react/src/components/TideGraph/TideGraphScroll.tsx

@@ -12,12 +12,10 @@ import type { TimelineEntry } from "../../types.js";
 export function TideGraphScroll({
   id,
   pxPerDay,
-  locale,
   className,
 }: {
   id: string;
   pxPerDay: number;
-  locale: string;
   className?: string;
 }) {
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -221,7 +219,6 @@ export function TideGraphScroll({
               extremes={extremes}
               timezone={timezone}
               units={units}
-              locale={locale}
               svgWidth={svgWidth}
               yDomainOverride={yDomain}
               latitude={station?.latitude}

packages/react/src/components/TideGraph/TideGraphStatic.tsx

@@ -4,17 +4,25 @@ import { useTooltip } from "@visx/tooltip";
 import { useContainerWidth } from "../../hooks/use-container-width.js";
 import { useCurrentLevel } from "../../hooks/use-current-level.js";
 import { TideGraphChart } from "./TideGraphChart.js";
-import type { TideGraphDataProps } from "./TideGraph.js";
-import type { TimelineEntry } from "../../types.js";
+import type { TimelineEntry, Extreme, Units } from "../../types.js";
+
+export interface TideGraphStaticProps {
+  timeline: TimelineEntry[];
+  extremes?: Extreme[];
+  timezone?: string;
+  units?: Units;
+  locale?: string;
+  className?: string;
+}
 
 export function TideGraphStatic({
   timeline,
   extremes = [],
   timezone = "UTC",
   units = "feet",
-  locale,
+  locale = "en",
   className,
-}: TideGraphDataProps & { locale: string; className?: string }) {
+}: TideGraphStaticProps) {
   const { ref: containerRef, width: containerWidth } = useContainerWidth();
   const currentLevel = useCurrentLevel(timeline);
   const { tooltipData, showTooltip, hideTooltip } = useTooltip<TimelineEntry>();

packages/react/src/types.ts

@@ -1,24 +1,51 @@
 export type Units = "meters" | "feet";
-import type { Station as BaseStation } from "@neaps/tide-database";
 
-export interface Station extends BaseStation {
-  defaultDatum: string;
+export interface StationSummary {
+  id: string;
+  name: string;
+  latitude: number;
+  longitude: number;
+  region: string;
+  country: string;
+  continent: string;
+  timezone: string;
+  type: "reference" | "subordinate";
+  distance?: number;
 }
 
-export type StationSummary = Pick<
-  Station,
-  | "id"
-  | "name"
-  | "latitude"
-  | "longitude"
-  | "region"
-  | "country"
-  | "continent"
-  | "timezone"
-  | "type"
-> & {
-  distance?: number;
-};
+export interface Station extends StationSummary {
+  source: {
+    id: string;
+    name: string;
+    url: string;
+  };
+  license: {
+    type: string;
+    commercial_use: boolean;
+    url?: string;
+    notes?: string;
+  };
+  disclaimers?: string;
+  datums: Record<string, number>;
+  defaultDatum?: string;
+  harmonic_constituents: {
+    name: string;
+    amplitude: number;
+    phase: number;
+  }[];
+  offsets?: {
+    reference: string;
+    height?: {
+      high: number;
+      low: number;
+      type: "ratio" | "fixed";
+    };
+    time?: {
+      high: number;
+      low: number;
+    };
+  };
+}
 
 export interface Extreme {
   time: Date;

packages/react/test/a11y.test.tsx

@@ -5,7 +5,7 @@ import { TideTable } from "../src/components/TideTable.js";
 import { StationSearch } from "../src/components/StationSearch.js";
 import { NearbyStations } from "../src/components/NearbyStations.js";
 import { TideStation } from "../src/components/TideStation.js";
-import { TideGraph } from "../src/components/TideGraph/index.js";
+import { TideGraphStatic } from "../src/components/TideGraph/index.js";
 import { createTestWrapper } from "./helpers.js";
 
 async function checkA11y(container: HTMLElement) {
@@ -83,9 +83,12 @@ describe("accessibility", () => {
       { time: new Date("2025-12-17T18:00:00Z"), level: 1.4 },
     ];
 
-    const { container } = render(<TideGraph timeline={timeline} timezone="UTC" units="meters" />, {
-      wrapper: createTestWrapper(),
-    });
+    const { container } = render(
+      <TideGraphStatic timeline={timeline} timezone="UTC" units="meters" />,
+      {
+        wrapper: createTestWrapper(),
+      },
+    );
 
     await checkA11y(container);
   });

packages/react/test/components/TideGraph.test.tsx

@@ -1,6 +1,6 @@
 import { describe, test, expect } from "vitest";
 import { render, waitFor } from "@testing-library/react";
-import { TideGraph } from "../../src/components/TideGraph/index.js";
+import { TideGraphStatic } from "../../src/components/TideGraph/index.js";
 import { createTestWrapper } from "../helpers.js";
 
 const timeline = [
@@ -19,10 +19,10 @@ const extremes = [
   { time: new Date("2025-12-17T12:00:00Z"), level: 0.3, high: false, low: true, label: "Low" },
 ];
 
-describe("TideGraph", () => {
-  test("renders a canvas element in data-driven mode", async () => {
+describe("TideGraphStatic", () => {
+  test("renders an svg element", async () => {
     const { container } = render(
-      <TideGraph timeline={timeline} extremes={extremes} timezone="UTC" units="meters" />,
+      <TideGraphStatic timeline={timeline} extremes={extremes} timezone="UTC" units="meters" />,
       { wrapper: createTestWrapper() },
     );
 
@@ -32,9 +32,10 @@ describe("TideGraph", () => {
   });
 
   test("renders with empty extremes", async () => {
-    const { container } = render(<TideGraph timeline={timeline} timezone="UTC" units="meters" />, {
-      wrapper: createTestWrapper(),
-    });
+    const { container } = render(
+      <TideGraphStatic timeline={timeline} timezone="UTC" units="meters" />,
+      { wrapper: createTestWrapper() },
+    );
 
     await waitFor(() => {
       expect(container.querySelector("svg")).not.toBeNull();
@@ -43,7 +44,7 @@ describe("TideGraph", () => {
 
   test("applies className", () => {
     const { container } = render(
-      <TideGraph timeline={timeline} timezone="UTC" units="meters" className="my-graph" />,
+      <TideGraphStatic timeline={timeline} timezone="UTC" units="meters" className="my-graph" />,
       { wrapper: createTestWrapper() },
     );