gistda-sphere-react 1.0.0

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "gistda-sphere-react",
+  "version": "1.0.0",
+  "description": "React wrapper library for GISTDA Sphere Map API with TypeScript support",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "lint": "pnpm dlx ultracite check",
+    "lint:fix": "pnpm dlx ultracite fix",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "prepublishOnly": "pnpm run build"
+  },
+  "keywords": [
+    "gistda",
+    "sphere",
+    "map",
+    "maplibre",
+    "react",
+    "typescript",
+    "thailand",
+    "gis"
+  ],
+  "author": "dulapahv",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.3.13",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitest/coverage-v8": "^2.0.0",
+    "jsdom": "^25.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0",
+    "ultracite": "^7.1.3",
+    "vitest": "^2.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dulapahv/gistda-sphere-react.git"
+  },
+  "bugs": {
+    "url": "https://github.com/dulapahv/gistda-sphere-react/issues"
+  },
+  "homepage": "https://github.com/dulapahv/gistda-sphere-react",
+  "packageManager": "pnpm@10.28.2+sha512.41872f037ad22f7348e3b1debbaf7e867cfd448f2726d9cf74c08f19507c31d2c8e7a11525b983febc2df640b5438dee6023ebb1f84ed43cc2d654d2bc326264"
+}

package/src/__tests__/Layer.test.tsx

@@ -0,0 +1,133 @@
+import { act, render, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { Layer } from "../components/Layer";
+import { SphereMap } from "../components/SphereMap";
+import { SphereProvider } from "../context/SphereContext";
+import { createMockSphereApi } from "./setup";
+
+describe("Layer", () => {
+  const { mockSphere, mockMap } = createMockSphereApi();
+
+  beforeEach(() => {
+    // @ts-expect-error - mockSphere is a partial mock
+    window.sphere = mockSphere;
+    vi.clearAllMocks();
+  });
+
+  function renderLayer(layerProps = {}) {
+    return render(
+      <SphereProvider apiKey="test-key">
+        <SphereMap>
+          <Layer {...layerProps} />
+        </SphereMap>
+      </SphereProvider>
+    );
+  }
+
+  describe("preset layers", () => {
+    it("adds a built-in layer to the map", async () => {
+      renderLayer({ preset: "TRAFFIC" });
+
+      act(() => {
+        mockMap._triggerReady();
+      });
+
+      await waitFor(() => {
+        expect(mockMap.Layers.add).toHaveBeenCalledWith(
+          mockSphere.Layers.TRAFFIC,
+          undefined
+        );
+      });
+    });
+
+    it("sets built-in layer as base when isBase is true", async () => {
+      renderLayer({ preset: "HYBRID", isBase: true });
+
+      act(() => {
+        mockMap._triggerReady();
+      });
+
+      await waitFor(() => {
+        expect(mockMap.Layers.setBase).toHaveBeenCalledWith(
+          mockSphere.Layers.HYBRID
+        );
+      });
+    });
+  });
+
+  describe("custom layers", () => {
+    it("creates a custom layer with name and options", async () => {
+      renderLayer({
+        name: "my-wms-layer",
+        type: "WMS",
+        url: "https://example.com/wms",
+        opacity: 0.7,
+      });
+
+      act(() => {
+        mockMap._triggerReady();
+      });
+
+      await waitFor(() => {
+        expect(mockSphere.Layer).toHaveBeenCalledWith(
+          "my-wms-layer",
+          expect.objectContaining({
+            type: "WMS",
+            url: "https://example.com/wms",
+            opacity: 0.7,
+          })
+        );
+      });
+    });
+  });
+
+  describe("cleanup", () => {
+    it("removes non-base layer on unmount", async () => {
+      const { unmount } = renderLayer({ preset: "TRAFFIC" });
+
+      act(() => {
+        mockMap._triggerReady();
+      });
+
+      await waitFor(() => {
+        expect(mockMap.Layers.add).toHaveBeenCalled();
+      });
+
+      unmount();
+
+      expect(mockMap.Layers.remove).toHaveBeenCalled();
+    });
+
+    it("does not remove base layer on unmount", async () => {
+      const { unmount } = renderLayer({ preset: "HYBRID", isBase: true });
+
+      act(() => {
+        mockMap._triggerReady();
+      });
+
+      await waitFor(() => {
+        expect(mockMap.Layers.setBase).toHaveBeenCalled();
+      });
+
+      unmount();
+
+      // Base layers should not be removed on unmount
+      expect(mockMap.Layers.remove).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("edge cases", () => {
+    it("does nothing without preset or name", async () => {
+      renderLayer({});
+
+      act(() => {
+        mockMap._triggerReady();
+      });
+
+      await new Promise((r) => setTimeout(r, 50));
+      expect(mockMap.Layers.add).not.toHaveBeenCalled();
+      expect(mockMap.Layers.setBase).not.toHaveBeenCalled();
+      expect(mockSphere.Layer).not.toHaveBeenCalled();
+    });
+  });
+});

package/src/__tests__/Marker.test.tsx

@@ -0,0 +1,183 @@
+import { act, render, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { Marker } from "../components/Marker";
+import { SphereMap } from "../components/SphereMap";
+import { SphereProvider } from "../context/SphereContext";
+import { createMockSphereApi } from "./setup";
+
+describe("Marker", () => {
+  const { mockSphere, mockMap } = createMockSphereApi();
+  let mockMarkerInstance: ReturnType<typeof mockSphere.Marker>;
+
+  beforeEach(() => {
+    // @ts-expect-error - mockSphere is a partial mock
+    window.sphere = mockSphere;
+    mockMarkerInstance = mockSphere.Marker();
+    mockSphere.Marker.mockReturnValue(mockMarkerInstance);
+    vi.clearAllMocks();
+  });
+
+  function renderMarker(markerProps = {}) {
+    return render(
+      <SphereProvider apiKey="test-key">
+        <SphereMap>
+          <Marker position={{ lon: 100.5, lat: 13.75 }} {...markerProps} />
+        </SphereMap>
+      </SphereProvider>
+    );
+  }
+
+  describe("creation", () => {
+    it("creates a marker with position", async () => {
+      renderMarker();
+
+      // Trigger map ready
+      act(() => {
+        mockMap._triggerReady();
+      });
+
+      await waitFor(() => {
+        expect(mockSphere.Marker).toHaveBeenCalledWith(
+          { lon: 100.5, lat: 13.75 },
+          expect.any(Object)
+        );
+      });
+    });
+
+    it("creates a marker with title and detail", async () => {
+      renderMarker({ title: "Test Marker", detail: "Test Detail" });
+
+      act(() => {
+        mockMap._triggerReady();
+      });
+
+      await waitFor(() => {
+        expect(mockSphere.Marker).toHaveBeenCalledWith(
+          expect.any(Object),
+          expect.objectContaining({
+            title: "Test Marker",
+            detail: "Test Detail",
+          })
+        );
+      });
+    });
+
+    it("creates a draggable marker", async () => {
+      renderMarker({ draggable: true });
+
+      act(() => {
+        mockMap._triggerReady();
+      });
+
+      await waitFor(() => {
+        expect(mockSphere.Marker).toHaveBeenCalledWith(
+          expect.any(Object),
+          expect.objectContaining({
+            draggable: true,
+          })
+        );
+      });
+    });
+
+    it("creates a marker with custom icon", async () => {
+      const icon = { url: "https://example.com/icon.png" };
+      renderMarker({ icon });
+
+      act(() => {
+        mockMap._triggerReady();
+      });
+
+      await waitFor(() => {
+        expect(mockSphere.Marker).toHaveBeenCalledWith(
+          expect.any(Object),
+          expect.objectContaining({
+            icon,
+          })
+        );
+      });
+    });
+  });
+
+  describe("overlay management", () => {
+    it("adds marker to map overlays", async () => {
+      renderMarker();
+
+      act(() => {
+        mockMap._triggerReady();
+      });
+
+      await waitFor(() => {
+        expect(mockMap.Overlays.add).toHaveBeenCalledWith(mockMarkerInstance);
+      });
+    });
+
+    it("removes marker from map overlays on unmount", async () => {
+      const { unmount } = renderMarker();
+
+      act(() => {
+        mockMap._triggerReady();
+      });
+
+      await waitFor(() => {
+        expect(mockMap.Overlays.add).toHaveBeenCalled();
+      });
+
+      unmount();
+
+      expect(mockMap.Overlays.remove).toHaveBeenCalledWith(mockMarkerInstance);
+    });
+  });
+
+  describe("events", () => {
+    it("binds overlayClick event", async () => {
+      const onClick = vi.fn();
+      renderMarker({ onClick });
+
+      act(() => {
+        mockMap._triggerReady();
+      });
+
+      await waitFor(() => {
+        expect(mockMap.Event.bind).toHaveBeenCalledWith(
+          "overlayClick",
+          expect.any(Function)
+        );
+      });
+    });
+
+    it("binds overlayDrop event when draggable", async () => {
+      const onDrop = vi.fn();
+      renderMarker({ draggable: true, onDrop });
+
+      act(() => {
+        mockMap._triggerReady();
+      });
+
+      await waitFor(() => {
+        expect(mockMap.Event.bind).toHaveBeenCalledWith(
+          "overlayDrop",
+          expect.any(Function)
+        );
+      });
+    });
+
+    it("unbinds events on unmount", async () => {
+      const { unmount } = renderMarker({ onClick: vi.fn() });
+
+      act(() => {
+        mockMap._triggerReady();
+      });
+
+      await waitFor(() => {
+        expect(mockMap.Event.bind).toHaveBeenCalled();
+      });
+
+      unmount();
+
+      expect(mockMap.Event.unbind).toHaveBeenCalledWith(
+        "overlayClick",
+        expect.any(Function)
+      );
+    });
+  });
+});

package/src/__tests__/SphereContext.test.tsx

@@ -0,0 +1,120 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { SphereProvider, useSphereContext } from "../context/SphereContext";
+import { createMockSphereApi } from "./setup";
+
+describe("SphereContext", () => {
+  const { mockSphere } = createMockSphereApi();
+
+  beforeEach(() => {
+    // Reset window.sphere
+    window.sphere = undefined;
+    vi.clearAllMocks();
+  });
+
+  describe("SphereProvider", () => {
+    it("renders children", () => {
+      // @ts-expect-error - mockSphere is a partial mock
+      window.sphere = mockSphere;
+
+      render(
+        <SphereProvider apiKey="test-key">
+          <div data-testid="child">Child Content</div>
+        </SphereProvider>
+      );
+
+      expect(screen.getByTestId("child")).toBeInTheDocument();
+    });
+
+    it("provides isLoaded=true when sphere API is available", async () => {
+      // @ts-expect-error - mockSphere is a partial mock
+      window.sphere = mockSphere;
+
+      function TestComponent() {
+        const { isLoaded } = useSphereContext();
+        return (
+          <div data-testid="loaded">{isLoaded ? "loaded" : "loading"}</div>
+        );
+      }
+
+      render(
+        <SphereProvider apiKey="test-key">
+          <TestComponent />
+        </SphereProvider>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId("loaded")).toHaveTextContent("loaded");
+      });
+    });
+
+    it("provides the sphere namespace", async () => {
+      // @ts-expect-error - mockSphere is a partial mock
+      window.sphere = mockSphere;
+
+      function TestComponent() {
+        const { sphere } = useSphereContext();
+        return (
+          <div data-testid="sphere">{sphere ? "has-sphere" : "no-sphere"}</div>
+        );
+      }
+
+      render(
+        <SphereProvider apiKey="test-key">
+          <TestComponent />
+        </SphereProvider>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId("sphere")).toHaveTextContent("has-sphere");
+      });
+    });
+
+    it("provides the API key", () => {
+      // @ts-expect-error - mockSphere is a partial mock
+      window.sphere = mockSphere;
+
+      function TestComponent() {
+        const { apiKey } = useSphereContext();
+        return <div data-testid="key">{apiKey}</div>;
+      }
+
+      render(
+        <SphereProvider apiKey="my-api-key">
+          <TestComponent />
+        </SphereProvider>
+      );
+
+      expect(screen.getByTestId("key")).toHaveTextContent("my-api-key");
+    });
+
+    it("calls onLoad callback when script loads", async () => {
+      // @ts-expect-error - mockSphere is a partial mock
+      window.sphere = mockSphere;
+      const onLoad = vi.fn();
+
+      render(
+        <SphereProvider apiKey="test-key" onLoad={onLoad}>
+          <div>Content</div>
+        </SphereProvider>
+      );
+
+      await waitFor(() => {
+        expect(onLoad).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe("useSphereContext", () => {
+    it("throws error when used outside provider", () => {
+      function TestComponent() {
+        useSphereContext();
+        return null;
+      }
+
+      expect(() => {
+        render(<TestComponent />);
+      }).toThrow("useSphereContext must be used within a SphereProvider");
+    });
+  });
+});