@story-map/react-story-map 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Yu-Zhi Chen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/StoryMap.d.ts

@@ -0,0 +1,9 @@
+import type { StoryMapConfig, StorySlide } from '@story-map/story-map-core';
+export interface StoryMapProps {
+    story: StoryMapConfig;
+    initialSlide?: number;
+    className?: string;
+    onSlideChange?: (index: number, slide: StorySlide) => void;
+}
+export declare function StoryMap({ story, initialSlide, className, onSlideChange }: StoryMapProps): import("react").JSX.Element;
+//# sourceMappingURL=StoryMap.d.ts.map

package/dist/StoryMap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StoryMap.d.ts","sourceRoot":"","sources":["../src/StoryMap.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE5E,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,cAAc,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CAC5D;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,YAAgB,EAAE,SAAS,EAAE,aAAa,EAAE,EAAE,aAAa,+BAyI5F"}

package/dist/StoryMap.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+export function StoryMap({ story, initialSlide = 0, className, onSlideChange }) {
+    const mapElementRef = useRef(null);
+    const mapRef = useRef(null);
+    const markerLayerRef = useRef(null);
+    const markersRef = useRef([]);
+    const pathRef = useRef(null);
+    const activeIndexRef = useRef(0);
+    const [rawActiveIndex, setActiveIndex] = useState(() => clamp(initialSlide, 0, story.slides.length - 1));
+    const activeIndex = clamp(rawActiveIndex, 0, story.slides.length - 1);
+    const activeSlide = story.slides[activeIndex];
+    activeIndexRef.current = activeIndex;
+    const locatedSlides = useMemo(() => story.slides.filter((slide) => slide.location), [story]);
+    useEffect(() => {
+        let cancelled = false;
+        async function mountMap() {
+            if (!mapElementRef.current)
+                return;
+            const L = await import('leaflet');
+            if (cancelled || !mapElementRef.current)
+                return;
+            const initial = story.slides[activeIndexRef.current]?.location;
+            const center = initial
+                ? [initial.lat, initial.lng]
+                : story.map.center ?? [0, 0];
+            const zoom = initial?.zoom ?? story.map.zoom;
+            const zoomOptions = {
+                ...(story.map.minZoom === undefined ? {} : { minZoom: story.map.minZoom }),
+                ...(story.map.maxZoom === undefined ? {} : { maxZoom: story.map.maxZoom }),
+            };
+            const map = L.map(mapElementRef.current, zoomOptions).setView(center, zoom);
+            L.tileLayer(story.map.tileUrl, {
+                attribution: story.map.attribution,
+                ...zoomOptions,
+            }).addTo(map);
+            const markerLayer = L.layerGroup().addTo(map);
+            const markers = locatedSlides.map((slide) => {
+                const location = slide.location;
+                return L.circleMarker([location.lat, location.lng], {
+                    radius: 6,
+                    weight: 2,
+                    fillOpacity: 0.85,
+                }).addTo(markerLayer);
+            });
+            const path = story.map.showPath && locatedSlides.length >= 2
+                ? L.polyline(locatedSlides.map((slide) => [slide.location.lat, slide.location.lng]), { weight: 3, opacity: 0.65 }).addTo(map)
+                : null;
+            mapRef.current = map;
+            markerLayerRef.current = markerLayer;
+            markersRef.current = markers;
+            pathRef.current = path;
+            updateMarkerStyles(story, activeIndexRef.current, markers);
+        }
+        void mountMap();
+        return () => {
+            cancelled = true;
+            pathRef.current = null;
+            markersRef.current = [];
+            markerLayerRef.current = null;
+            mapRef.current?.remove();
+            mapRef.current = null;
+        };
+    }, [story, locatedSlides]);
+    useEffect(() => {
+        const location = activeSlide.location;
+        if (location && mapRef.current) {
+            mapRef.current.flyTo([location.lat, location.lng], location.zoom ?? story.map.zoom, { duration: 1.1 });
+        }
+        updateMarkerStyles(story, activeIndex, markersRef.current);
+        onSlideChange?.(activeIndex, activeSlide);
+    }, [activeIndex, activeSlide, onSlideChange, story]);
+    useEffect(() => {
+        setActiveIndex((current) => clamp(current, 0, story.slides.length - 1));
+    }, [story.slides.length]);
+    function goTo(next) {
+        setActiveIndex(clamp(next, 0, story.slides.length - 1));
+    }
+    return (_jsxs("section", { className: ['story-map', className].filter(Boolean).join(' '), style: { height: story.height }, tabIndex: 0, "aria-label": story.title ?? 'Story map', onKeyDown: (event) => {
+            if (event.key === 'ArrowLeft')
+                goTo(activeIndex - 1);
+            if (event.key === 'ArrowRight')
+                goTo(activeIndex + 1);
+        }, children: [_jsx("div", { className: "story-map__map", ref: mapElementRef }), _jsxs("article", { className: "story-map__panel", children: [story.title && _jsx("div", { className: "story-map__story-title", children: story.title }), activeSlide.title && _jsx("h2", { children: activeSlide.title }), _jsx(StoryMediaView, { slide: activeSlide }), activeSlide.text && (_jsx("div", { className: "story-map__text", children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: activeSlide.text }) })), _jsxs("nav", { className: "story-map__nav", "aria-label": "Story navigation", children: [_jsx("button", { type: "button", disabled: activeIndex === 0, onClick: () => goTo(activeIndex - 1), children: "Previous" }), _jsxs("span", { children: [activeIndex + 1, " / ", story.slides.length] }), _jsx("button", { type: "button", disabled: activeIndex === story.slides.length - 1, onClick: () => goTo(activeIndex + 1), children: "Next" })] })] })] }));
+}
+function StoryMediaView({ slide }) {
+    const media = slide.media;
+    if (!media)
+        return null;
+    if (media.type === 'video') {
+        return _jsx("video", { className: "story-map__media", src: media.src, controls: true });
+    }
+    if (media.type === 'iframe') {
+        return (_jsx("iframe", { className: "story-map__media story-map__iframe", src: media.src, title: media.alt ?? slide.title ?? 'Story media', loading: "lazy" }));
+    }
+    return (_jsxs("figure", { className: "story-map__figure", children: [_jsx("img", { className: "story-map__media", src: media.src, alt: media.alt ?? '', loading: "lazy" }), media.caption && _jsx("figcaption", { children: media.caption })] }));
+}
+function updateMarkerStyles(story, activeIndex, markers) {
+    let markerIndex = 0;
+    story.slides.forEach((slide, slideIndex) => {
+        if (!slide.location)
+            return;
+        const marker = markers[markerIndex++];
+        if (!marker)
+            return;
+        marker.setRadius(slideIndex === activeIndex ? 8 : 5);
+        marker.setStyle({
+            weight: slideIndex === activeIndex ? 3 : 2,
+            fillOpacity: slideIndex === activeIndex ? 1 : 0.7,
+        });
+    });
+}
+function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+}
+//# sourceMappingURL=StoryMap.js.map

package/dist/StoryMap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StoryMap.js","sourceRoot":"","sources":["../src/StoryMap.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { StoryMap } from './StoryMap.js';
+export type { StoryMapProps } from './StoryMap.js';
+export type { StoryMapConfig, StoryMapOptions, StorySlide, StoryLocation, StoryMedia, } from '@story-map/story-map-core';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,YAAY,EACV,cAAc,EACd,eAAe,EACf,UAAU,EACV,aAAa,EACb,UAAU,GACX,MAAM,2BAA2B,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { StoryMap } from './StoryMap.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC"}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@story-map/react-story-map",
+  "version": "0.1.0",
+  "description": "React and Leaflet renderer for the StoryMap v1 config format.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kywk/story-map-monorepo.git",
+    "directory": "packages/react-story-map"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./src/styles.css"
+  },
+  "files": [
+    "dist",
+    "src/styles.css"
+  ],
+  "dependencies": {
+    "@story-map/story-map-core": "0.1.0",
+    "leaflet": "^1.9.4",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/leaflet": "1.9.22",
+    "react": "19.3.0",
+    "react-dom": "19.3.0"
+  },
+  "scripts": {
+    "build": "tsc -b",
+    "typecheck": "tsc -b",
+    "clean": "rm -rf dist tsconfig.tsbuildinfo"
+  }
+}

package/src/styles.css

@@ -0,0 +1,136 @@
+.story-map {
+  --story-map-bg: var(--background-primary, #ffffff);
+  --story-map-fg: var(--text-normal, #1f2937);
+  --story-map-muted: var(--text-muted, #6b7280);
+  --story-map-border: var(--background-modifier-border, rgba(0, 0, 0, 0.14));
+  --story-map-accent: var(--interactive-accent, #2563eb);
+
+  position: relative;
+  width: 100%;
+  min-height: 360px;
+  overflow: hidden;
+  border: 1px solid var(--story-map-border);
+  border-radius: 12px;
+  background: var(--story-map-bg);
+  color: var(--story-map-fg);
+}
+
+.story-map:focus-visible {
+  outline: 2px solid var(--story-map-accent);
+  outline-offset: 2px;
+}
+
+.story-map__map {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+}
+
+.story-map__panel {
+  position: absolute;
+  z-index: 500;
+  left: 16px;
+  bottom: 16px;
+  width: min(380px, calc(100% - 32px));
+  max-height: calc(100% - 32px);
+  overflow: auto;
+  box-sizing: border-box;
+  padding: 16px;
+  border: 1px solid var(--story-map-border);
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--story-map-bg) 94%, transparent);
+  backdrop-filter: blur(6px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+}
+
+.story-map__panel h2 {
+  margin: 0 0 10px;
+  font-size: 1.2rem;
+}
+
+.story-map__story-title {
+  margin-bottom: 6px;
+  color: var(--story-map-muted);
+  font-size: 0.82rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.story-map__text > :first-child {
+  margin-top: 0;
+}
+
+.story-map__text > :last-child {
+  margin-bottom: 0;
+}
+
+.story-map__figure {
+  margin: 0 0 12px;
+}
+
+.story-map__media {
+  display: block;
+  width: 100%;
+  max-height: 210px;
+  object-fit: cover;
+  border-radius: 7px;
+}
+
+.story-map__iframe {
+  min-height: 200px;
+  border: 0;
+}
+
+.story-map__figure figcaption {
+  margin-top: 4px;
+  color: var(--story-map-muted);
+  font-size: 0.8rem;
+}
+
+.story-map__nav {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 8px;
+  align-items: center;
+  margin-top: 14px;
+}
+
+.story-map__nav button {
+  border: 1px solid var(--story-map-border);
+  border-radius: 6px;
+  padding: 7px 10px;
+  background: var(--story-map-bg);
+  color: var(--story-map-fg);
+  cursor: pointer;
+}
+
+.story-map__nav button:last-child {
+  justify-self: end;
+}
+
+.story-map__nav button:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+.story-map__nav span {
+  color: var(--story-map-muted);
+  font-size: 0.85rem;
+  white-space: nowrap;
+}
+
+@media (max-width: 640px) {
+  .story-map__panel {
+    left: 8px;
+    right: 8px;
+    bottom: 8px;
+    width: auto;
+    max-height: 48%;
+    padding: 12px;
+  }
+
+  .story-map__media {
+    max-height: 140px;
+  }
+}