trails-cool/trails
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #517 from trails-cool/package-shims

Browse source 
Remove the map and ui shim packages
This commit is contained in:
Ullrich Schäfer 2026-06-10 07:53:57 +02:00 • committed by GitHub
commit e64155b490
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
28 changed files with 13 additions and 357 deletions
Download patch file Download diff file Expand all files Collapse all files

8
CLAUDE.md
View file

@ -41,9 +41,7 @@ apps/
planner/ — Planner app (React Router 7)
journal/ — Journal app (React Router 7 + Fedify)
packages/
types/ — Shared TypeScript interfaces (Route, Activity, Waypoint)
ui/ — Shared React components (Tailwind)
map/ — React/Leaflet components (MapView, RouteLayer); re-exports map-core
types/ — Shared wire types both apps exchange (Waypoint)
map-core/ — Framework-free map constants (colors, tiles, POI, z-index, snap); safe to import server-side
gpx/ — GPX parsing, generation, validation
fit/ — FIT file generation (Wahoo route push)
@ -125,8 +123,8 @@ local config symmetric.
- **Route registration**: Both apps use explicit `routes.ts` (not file-based routing). When adding a new route file, you **must** add it to `apps/*/app/routes.ts` or it won't be compiled into the build.
- All user-facing strings must use i18n (`useTranslation()` hook, never hardcode strings)
- Use `@trails-cool/types` for shared interfaces — don't duplicate type definitions
- Map components go in `@trails-cool/map`, not in individual apps
- Database row types are derived from the Drizzle schema (`@trails-cool/db`); API wire shapes are the Zod contracts in `@trails-cool/api`; only types both apps exchange (e.g. Waypoint) live in `@trails-cool/types`
- Map constants (colors, tiles, POI categories, z-indexes) go in `@trails-cool/map-core`; React/Leaflet map components live in the app that uses them
- GPX parsing/generation goes in `@trails-cool/gpx`
- Database schemas: `planner.*` for Planner data, `journal.*` for Journal data
- Route geometry must be stored as PostGIS LineString (extracted from GPX on save)

2
apps/journal/Dockerfile
View file

@ -9,8 +9,6 @@ FROM base AS deps
COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
COPY apps/journal/package.json apps/journal/
COPY packages/types/package.json packages/types/
COPY packages/ui/package.json packages/ui/
COPY packages/map/package.json packages/map/
COPY packages/gpx/package.json packages/gpx/
COPY packages/i18n/package.json packages/i18n/
COPY packages/sentry-config/package.json packages/sentry-config/

2
apps/journal/app/root.tsx
View file

@ -15,7 +15,7 @@ import { AccountDropdown } from "~/components/AccountDropdown";
import { MobileNavMenu } from "~/components/MobileNavMenu";
import { initSentryClient, stopSentryClient } from "~/lib/sentry.client";
import { TERMS_VERSION } from "~/lib/legal";
import stylesheet from "@trails-cool/ui/styles.css?url";
import stylesheet from "./styles.css?url";
// Paths that must stay reachable even when the user has a stale
// terms_version, so they can read the Terms, accept them, or log out.

0
packages/ui/src/styles.css → apps/journal/app/styles.css
View file

2
apps/journal/package.json
View file

@ -27,10 +27,8 @@
"@trails-cool/gpx": "workspace:*",
"@trails-cool/i18n": "workspace:*",
"@trails-cool/jobs": "workspace:*",
"@trails-cool/map": "workspace:*",
"@trails-cool/sentry-config": "workspace:*",
"@trails-cool/types": "workspace:*",
"@trails-cool/ui": "workspace:*",
"drizzle-orm": "catalog:",
"isbot": "^5.1.41",
"jose": "^6.2.3",

2
apps/planner/Dockerfile
View file

@ -9,8 +9,6 @@ FROM base AS deps
COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
COPY apps/planner/package.json apps/planner/
COPY packages/types/package.json packages/types/
COPY packages/ui/package.json packages/ui/
COPY packages/map/package.json packages/map/
COPY packages/gpx/package.json packages/gpx/
COPY packages/i18n/package.json packages/i18n/
COPY packages/sentry-config/package.json packages/sentry-config/

2
apps/planner/app/components/MapHelpers.tsx
View file

@ -2,7 +2,7 @@ import { useEffect, useState, useRef } from "react";
import { useMap, useMapEvents, Marker } from "react-leaflet";
import L from "leaflet";
import type { YjsState } from "~/lib/use-yjs";
import { overlayLayers } from "@trails-cool/map";
import { overlayLayers } from "@trails-cool/map-core";
import { usePois } from "~/lib/use-pois";
import { Z_CURSOR } from "@trails-cool/map-core";
import { getBaseLayer, getOverlays, setBaseLayer, setOverlays } from "~/lib/route-data";

2
apps/planner/app/components/PlannerMap.tsx
View file

@ -4,7 +4,7 @@ import L from "leaflet";
import { useTranslation } from "react-i18next";
import type { DayStage } from "@trails-cool/gpx";
import type { YjsState } from "~/lib/use-yjs";
import { baseLayers, overlayLayers } from "@trails-cool/map";
import { baseLayers, overlayLayers } from "@trails-cool/map-core";
import { setOvernight } from "~/lib/overnight";
import { usePois } from "~/lib/use-pois";
import { useProfileDefaults } from "~/lib/use-profile-defaults";

2
apps/planner/app/root.tsx
View file

@ -3,7 +3,7 @@ import type { LinksFunction } from "react-router";
import type { Route } from "./+types/root";
import * as Sentry from "@sentry/react";
import { useTranslation } from "react-i18next";
import stylesheet from "@trails-cool/ui/styles.css?url";
import stylesheet from "./styles.css?url";
export const links: LinksFunction = () => [{ rel: "stylesheet", href: stylesheet }];

6
apps/planner/app/styles.css Normal file
View file

@ -0,0 +1,6 @@
@import "tailwindcss";
@keyframes slide {
0% { transform: translateX(-100%); }
100% { transform: translateX(400%); }
}

2
apps/planner/package.json
View file

@ -27,11 +27,9 @@
"@trails-cool/gpx": "workspace:*",
"@trails-cool/i18n": "workspace:*",
"@trails-cool/jobs": "workspace:*",
"@trails-cool/map": "workspace:*",
"@trails-cool/map-core": "workspace:*",
"@trails-cool/sentry-config": "workspace:*",
"@trails-cool/types": "workspace:*",
"@trails-cool/ui": "workspace:*",
"codemirror": "^6.0.2",
"drizzle-orm": "catalog:",
"isbot": "^5.1.41",

24
packages/map/package.json
View file

@ -1,24 +0,0 @@
{
"name": "@trails-cool/map",
"version": "0.0.1",
"type": "module",
"exports": {
".": "./src/index.ts"
},
"main": "./src/index.ts",
"types": "./src/index.ts",
"scripts": {
"test": "vitest run",
"lint": "eslint .",
"typecheck": "tsc"
},
"dependencies": {
"@trails-cool/map-core": "workspace:*"
},
"peerDependencies": {
"react": ">=18",
"react-dom": ">=18",
"leaflet": ">=1.9",
"react-leaflet": ">=5"
}
}

34
packages/map/src/MapView.tsx
View file

@ -1,34 +0,0 @@
import { MapContainer, TileLayer, LayersControl } from "react-leaflet";
import { baseLayers } from "./layers.ts";
import "leaflet/dist/leaflet.css";
export interface MapViewProps {
center?: [number, number];
zoom?: number;
className?: string;
children?: React.ReactNode;
}
export function MapView({
center = [50.1, 10.0],
zoom = 6,
className = "h-full w-full",
children,
}: MapViewProps) {
return (
<MapContainer center={center} zoom={zoom} className={className}>
<LayersControl position="topright">
{baseLayers.map((layer, i) => (
<LayersControl.BaseLayer key={layer.name} checked={i === 0} name={layer.name}>
<TileLayer
url={layer.url}
attribution={layer.attribution}
maxZoom={layer.maxZoom}
/>
</LayersControl.BaseLayer>
))}
</LayersControl>
{children}
</MapContainer>
);
}

18
packages/map/src/RouteLayer.tsx
View file

@ -1,18 +0,0 @@
import { GeoJSON } from "react-leaflet";
import type { GeoJsonObject } from "geojson";
export interface RouteLayerProps {
data: GeoJsonObject;
color?: string;
weight?: number;
}
export function RouteLayer({ data, color = "#2563eb", weight = 4 }: RouteLayerProps) {
return (
<GeoJSON
key={JSON.stringify(data)}
data={data}
style={{ color, weight, opacity: 0.8 }}
/>
);
}

19
packages/map/src/index.test.ts
View file

@ -1,19 +0,0 @@
/**
* @vitest-environment jsdom
*/
import { describe, it, expect } from "vitest";
import { baseLayers, overlayLayers } from "./index.ts";
describe("map package exports", () => {
it("re-exports baseLayers from map-core", () => {
expect(baseLayers).toBeDefined();
expect(baseLayers.length).toBeGreaterThan(0);
expect(baseLayers[0]!.name).toBe("OpenStreetMap");
});
it("re-exports overlayLayers from map-core", () => {
expect(overlayLayers).toBeDefined();
expect(overlayLayers.length).toBeGreaterThan(0);
expect(overlayLayers.every((l) => l.id)).toBe(true);
});
});

6
packages/map/src/index.ts
View file

@ -1,6 +0,0 @@
export { MapView } from "./MapView.tsx";
export type { MapViewProps } from "./MapView.tsx";
export { RouteLayer } from "./RouteLayer.tsx";
export type { RouteLayerProps } from "./RouteLayer.tsx";
export { baseLayers, overlayLayers } from "@trails-cool/map-core";
export type { TileLayerConfig, OverlayLayerConfig } from "@trails-cool/map-core";

2
packages/map/src/layers.ts
View file

@ -1,2 +0,0 @@
export type { TileLayerConfig, OverlayLayerConfig } from "@trails-cool/map-core";
export { baseLayers, overlayLayers } from "@trails-cool/map-core";

8
packages/map/tsconfig.json
View file

@ -1,8 +0,0 @@
{
"extends": "../../tsconfig.base.json",
"compilerOptions": {
"outDir": "dist",
"rootDir": "src"
},
"include": ["src"]
}

1
packages/map/vitest.config.ts
View file

@ -1 +0,0 @@
export { default } from "../../vitest.shared.ts";

16
packages/ui/package.json
View file

@ -1,16 +0,0 @@
{
"name": "@trails-cool/ui",
"version": "0.0.1",
"type": "module",
"exports": {
".": "./src/index.ts",
"./styles.css": "./src/styles.css"
},
"main": "./src/index.ts",
"types": "./src/index.ts",
"scripts": {
"test": "vitest run",
"lint": "eslint .",
"typecheck": "tsc"
}
}

32
packages/ui/src/Button.tsx
View file

@ -1,32 +0,0 @@
import type { ButtonHTMLAttributes } from "react";
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
variant?: "primary" | "secondary" | "ghost";
size?: "sm" | "md" | "lg";
}
const variantStyles = {
primary: "bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800",
secondary: "bg-gray-100 text-gray-900 hover:bg-gray-200 active:bg-gray-300",
ghost: "text-gray-700 hover:bg-gray-100 active:bg-gray-200",
};
const sizeStyles = {
sm: "px-2.5 py-1.5 text-sm",
md: "px-4 py-2 text-sm",
lg: "px-6 py-3 text-base",
};
export function Button({
variant = "primary",
size = "md",
className = "",
...props
}: ButtonProps) {
return (
<button
className={`inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ${variantStyles[variant]} ${sizeStyles[size]} ${className}`}
{...props}
/>
);
}

12
packages/ui/src/Card.tsx
View file

@ -1,12 +0,0 @@
export interface CardProps {
className?: string;
children: React.ReactNode;
}
export function Card({ className = "", children }: CardProps) {
return (
<div className={`rounded-lg border border-gray-200 bg-white p-6 shadow-sm ${className}`}>
{children}
</div>
);
}

25
packages/ui/src/Input.tsx
View file

@ -1,25 +0,0 @@
import type { InputHTMLAttributes } from "react";
export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
label?: string;
error?: string;
}
export function Input({ label, error, className = "", id, ...props }: InputProps) {
const inputId = id ?? label?.toLowerCase().replace(/\s+/g, "-");
return (
<div className="flex flex-col gap-1.5">
{label && (
<label htmlFor={inputId} className="text-sm font-medium text-gray-700">
{label}
</label>
)}
<input
id={inputId}
className={`rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm transition-colors focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 ${error ? "border-red-500" : ""} ${className}`}
{...props}
/>
{error && <p className="text-sm text-red-600">{error}</p>}
</div>
);
}

87
packages/ui/src/components.test.tsx
View file

@ -1,87 +0,0 @@
/**
* @vitest-environment jsdom
*/
import { describe, it, expect, afterEach } from "vitest";
import "@testing-library/jest-dom/vitest";
import { render, screen, cleanup } from "@testing-library/react";
import { Button } from "./Button.tsx";
import { Input } from "./Input.tsx";
import { Card } from "./Card.tsx";
afterEach(cleanup);
describe("Button", () => {
it("renders with text", () => {
render(<Button>Click me</Button>);
expect(screen.getByRole("button", { name: "Click me" })).toBeDefined();
});
it("applies primary variant by default", () => {
render(<Button>Test</Button>);
expect(screen.getByRole("button").className).toContain("bg-blue-600");
});
it("applies secondary variant", () => {
render(<Button variant="secondary">Test</Button>);
expect(screen.getByRole("button").className).toContain("bg-gray-100");
});
it("applies ghost variant", () => {
render(<Button variant="ghost">Test</Button>);
expect(screen.getByRole("button").className).toContain("text-gray-700");
});
it("applies size classes", () => {
render(<Button size="lg">Test</Button>);
expect(screen.getByRole("button").className).toContain("px-6");
});
it("forwards disabled prop", () => {
render(<Button disabled>Test</Button>);
expect(screen.getByRole("button")).toBeDisabled();
});
});
describe("Input", () => {
it("renders with label", () => {
render(<Input label="Email" />);
expect(screen.getByLabelText("Email")).toBeDefined();
});
it("generates id from label", () => {
render(<Input label="First Name" />);
expect(screen.getByLabelText("First Name").id).toBe("first-name");
});
it("uses provided id over generated one", () => {
render(<Input label="Email" id="custom-id" />);
expect(screen.getByLabelText("Email").id).toBe("custom-id");
});
it("shows error message", () => {
render(<Input label="Email" error="Required" />);
expect(screen.getByText("Required")).toBeDefined();
});
it("applies error border class", () => {
render(<Input label="Email" error="Required" />);
expect(screen.getByLabelText("Email").className).toContain("border-red-500");
});
it("renders without label", () => {
render(<Input placeholder="Type here" />);
expect(screen.getByPlaceholderText("Type here")).toBeDefined();
});
});
describe("Card", () => {
it("renders children", () => {
render(<Card>Card content</Card>);
expect(screen.getByText("Card content")).toBeDefined();
});
it("applies additional className", () => {
const { container } = render(<Card className="mt-4">Content</Card>);
expect(container.firstElementChild?.className).toContain("mt-4");
});
});

6
packages/ui/src/index.ts
View file

@ -1,6 +0,0 @@
export { Button } from "./Button.tsx";
export type { ButtonProps } from "./Button.tsx";
export { Input } from "./Input.tsx";
export type { InputProps } from "./Input.tsx";
export { Card } from "./Card.tsx";
export type { CardProps } from "./Card.tsx";

8
packages/ui/tsconfig.json
View file

@ -1,8 +0,0 @@
{
"extends": "../../tsconfig.base.json",
"compilerOptions": {
"outDir": "dist",
"rootDir": "src"
},
"include": ["src"]
}

8
packages/ui/vitest.config.ts
View file

@ -1,8 +0,0 @@
import { defineConfig, mergeConfig } from "vitest/config";
import shared from "../../vitest.shared.ts";
export default mergeConfig(shared, defineConfig({
test: {
setupFiles: ["../../vitest.setup.ts"],
},
}));

34
pnpm-lock.yaml generated
View file

@ -241,18 +241,12 @@ importers:
'@trails-cool/jobs':
specifier: workspace:*
version: link:../../packages/jobs
'@trails-cool/map':
specifier: workspace:*
version: link:../../packages/map
'@trails-cool/sentry-config':
specifier: workspace:*
version: link:../../packages/sentry-config
'@trails-cool/types':
specifier: workspace:*
version: link:../../packages/types
'@trails-cool/ui':
specifier: workspace:*
version: link:../../packages/ui
drizzle-orm:
specifier: 'catalog:'
version: 0.45.2(@opentelemetry/api@1.9.1)(@types/pg@8.15.6)(expo-sqlite@56.0.4(expo@56.0.9)(react-native@0.85.3(@babel/core@7.29.7)(@react-native/jest-preset@0.85.3(@babel/core@7.29.7)(react@19.2.7))(@react-native/metro-config@0.85.3(@babel/core@7.29.7))(@types/react@19.2.17)(react@19.2.7))(react@19.2.7))(pg@8.20.0)(postgres@3.4.9)
@ -495,9 +489,6 @@ importers:
'@trails-cool/jobs':
specifier: workspace:*
version: link:../../packages/jobs
'@trails-cool/map':
specifier: workspace:*
version: link:../../packages/map
'@trails-cool/map-core':
specifier: workspace:*
version: link:../../packages/map-core
@ -507,9 +498,6 @@ importers:
'@trails-cool/types':
specifier: workspace:*
version: link:../../packages/types
'@trails-cool/ui':
specifier: workspace:*
version: link:../../packages/ui
codemirror:
specifier: ^6.0.2
version: 6.0.2
@ -663,24 +651,6 @@ importers:
specifier: 'catalog:'
version: 22.19.20
packages/map:
dependencies:
'@trails-cool/map-core':
specifier: workspace:*
version: link:../map-core
leaflet:
specifier: '>=1.9'
version: 1.9.4
react:
specifier: ^19.2.5
version: 19.2.7
react-dom:
specifier: ^19.2.7
version: 19.2.7(react@19.2.7)
react-leaflet:
specifier: '>=5'
version: 5.0.0(leaflet@1.9.4)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
packages/map-core: {}
packages/sentry-config:
@ -691,8 +661,6 @@ importers:
packages/types: {}
packages/ui: {}
scripts:
devDependencies:
'@types/node':
@ -10428,9 +10396,7 @@ snapshots:
metro-runtime: 0.84.4
transitivePeerDependencies:
- '@babel/core'
- bufferutil
- supports-color
- utf-8-validate
'@react-native/normalize-colors@0.85.3': {}