@geothai/maps-react 0.0.0-stage → 0.1.1

package/NOTICE

@@ -0,0 +1,14 @@
+GeoThai boundaries
+
+The boundary lines come from the OCHA COD-AB dataset for Thailand, on the Humanitarian
+Data Exchange, <https://data.humdata.org/dataset/cod-ab-tha>.
+
+- Drawn by: Royal Thai Survey Department (กรมแผนที่ทหาร), acquired by ICRC and made
+  available by OCHA Field Information Services Section
+- License: Creative Commons Attribution 3.0 IGO (LICENSE)
+- Changes by GeoThai: renamed the p-codes `TH…` to DOPA codes, linked 3 old-code shapes to
+  their current subdistricts, simplified the lines to 5% of the points, and dissolved the
+  district and province shapes out of the subdistrict layer
+
+The subdistrict, district and province codes and names come from GeoThai/data, licensed
+under CC BY 4.0: <https://github.com/GeoThai/data>

package/README.md

@@ -1,3 +1,57 @@
-# Temporary Holding Version
+# @geothai/maps-react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A React component that draws a map of Thailand on DOPA codes. It draws the same model as
+`toSvg()` of [`@geothai/maps`](https://www.npmjs.com/package/@geothai/maps). The markup is the
+same in every framework. It works in server components with no client JavaScript.
+
+[👉 Source](https://github.com/GeoThai/maps)
+
+## Install
+
+```sh
+npm install @geothai/maps-react @geothai/maps
+```
+
+## Use
+
+```jsx
+import { choropleth, districtMap } from '@geothai/maps';
+import { GeoThaiMap } from '@geothai/maps-react';
+
+// A React Server Component: the shapes load on the server.
+export async function SuratThani({ values }) {
+  const map = await districtMap('84');
+  const { fills } = choropleth(map, values);
+  return <GeoThaiMap map={map} fills={fills} />;
+}
+```
+
+```jsx
+import { provinces } from '@geothai/maps';
+
+<GeoThaiMap
+  map={provinces}
+  title="Thailand"
+  href={(s) => `/provinces/${s.code}/`}
+  highlight={['84']}
+/>;
+```
+
+## Props
+
+`<GeoThaiMap>` takes `map` and every option of `render()`:
+
+| Prop        | What it does                                                         |
+| ----------- | -------------------------------------------------------------------- |
+| `map`       | `provinces`, or the result of `await districtMap('84')`              |
+| `fills`     | Fill color per area code                                             |
+| `fill`      | Default fill                                                         |
+| `stroke`    | Color of the borders and the outline                                 |
+| `href`      | A function that returns the link of an area, or `undefined` for none |
+| `highlight` | Codes to draw on top with a thick stroke                             |
+| `label`     | Text for each area, shown on hover and to screen readers             |
+| `title`     | Accessible name of the whole map                                     |
+
+## License
+
+The code is MIT, the shapes CC BY 3.0 IGO (`MIT AND CC-BY-3.0-IGO`, full credits in `NOTICE`).

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+import { MapShapes, RenderOptions } from "@geothai/maps/types";
+import { ReactElement } from "react";
+/** Props of `<GeoThaiMap>`: the map to draw, and how. */
+export type GeoThaiMapProps = RenderOptions & {
+  /** `provinces`, or the result of `await districtMap('84')`, from `@geothai/maps`. */
+  map: MapShapes;
+};
+/**
+ * A map of Thailand as React elements. It draws the same model as `toSvg()` and
+ * `<geothai-map>`, so the markup is the same in every framework.
+ *
+ * @param props - The map and the options of `render()`.
+ * @returns The `<svg>` element.
+ * @example
+ * import { provinces } from '@geothai/maps';
+ * <GeoThaiMap map={provinces} href={(s) => `/provinces/${s.code}/`} />
+ */
+export declare function GeoThaiMap(props: Readonly<GeoThaiMapProps>): ReactElement;

package/dist/index.js

@@ -0,0 +1,44 @@
+import { render } from "@geothai/maps";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/index.tsx
+function Node({ node }) {
+	if (node.kind === "line") return /* @__PURE__ */ jsx("path", {
+		d: node.d,
+		fill: "none",
+		stroke: node.stroke,
+		strokeWidth: node.width,
+		strokeLinejoin: "round",
+		vectorEffect: "non-scaling-stroke"
+	});
+	const path = /* @__PURE__ */ jsx("path", {
+		d: node.d,
+		fill: node.fill,
+		children: /* @__PURE__ */ jsx("title", { children: node.label })
+	});
+	return node.href ? /* @__PURE__ */ jsx("a", {
+		href: node.href,
+		children: path
+	}) : path;
+}
+/**
+* A map of Thailand as React elements. It draws the same model as `toSvg()` and
+* `<geothai-map>`, so the markup is the same in every framework.
+*
+* @param props - The map and the options of `render()`.
+* @returns The `<svg>` element.
+* @example
+* import { provinces } from '@geothai/maps';
+* <GeoThaiMap map={provinces} href={(s) => `/provinces/${s.code}/`} />
+*/
+function GeoThaiMap(props) {
+	const { map, ...options } = props;
+	const model = render(map, options);
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: model.viewBox,
+		role: "img",
+		"aria-label": model.title,
+		children: [/* @__PURE__ */ jsx("title", { children: model.title }), model.nodes.map((n) => /* @__PURE__ */ jsx(Node, { node: n }, n.kind === "area" ? n.code : n.key))]
+	});
+}
+export { GeoThaiMap };

package/package.json

@@ -1,6 +1,49 @@
 {
   "name": "@geothai/maps-react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "description": "React component for maps of Thailand, on DOPA codes",
+  "keywords": [
+    "choropleth",
+    "map",
+    "react",
+    "svg",
+    "thailand"
+  ],
+  "homepage": "https://geothai.fasu.dev",
+  "license": "MIT AND CC-BY-3.0-IGO",
+  "author": "Pongsakorn Thipayanate",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/GeoThai/maps.git",
+    "directory": "packages/react"
+  },
+  "files": [
+    "dist",
+    "NOTICE"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": "./dist/index.js",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "test": "bun test",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@geothai/maps": "^0.1.1"
+  },
+  "devDependencies": {
+    "@repo/typescript": "workspace:*",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "tsdown": "0.23.1"
+  },
+  "peerDependencies": {
+    "react": ">=19"
+  }
+}