@mappedin/viewer 0.0.0-alpha → 0.3.0

package/dist/types/src/lib/types/options.d.ts

@@ -0,0 +1,18 @@
+import { TTheme } from 'lib/types/theme';
+import { DeepPartial } from './utils';
+import type { hydrateVenueMVF } from '@mappedin/mappedin-js/get-venue';
+type ParsedMVF = Parameters<typeof hydrateVenueMVF>[0];
+export type TStartViewerCommonOptions = {
+    root?: HTMLElement;
+    themeOverride?: DeepPartial<TTheme>;
+    overrideShareButtonHandler?: () => void;
+    disableAnalytics?: boolean;
+};
+export type TStartViewerOptions = {
+    venue?: string;
+    dataUrl?: string;
+} & TStartViewerCommonOptions;
+export type TStartViewerWithLocalDataOptions = {
+    data: ParsedMVF;
+} & TStartViewerCommonOptions;
+export {};

package/dist/types/src/lib/types/search.d.ts

@@ -0,0 +1,12 @@
+export type TSearchResult = {
+    id: string;
+    label: string;
+    type: string;
+    floorName: string;
+    floorShortName?: string;
+};
+export type TCategory = {
+    id: string;
+    name: string;
+    results: TSearchResult[];
+};

package/dist/types/src/lib/types/state.d.ts

@@ -0,0 +1,4 @@
+export declare enum E_APP_STATE {
+    START = "/",
+    DIRECTIONS = "/directions"
+}

package/dist/types/src/lib/types/theme.d.ts

@@ -0,0 +1,35 @@
+export type TTheme = {
+    colors: {
+        accent: {
+            primary: string;
+            neutral: string;
+            navigation: string;
+            success: string;
+        };
+        background: string;
+        text: {
+            primary: string;
+            secondary: string;
+            placeholder: string;
+        };
+        map: {
+            highlight: string;
+            departure: string;
+            path: string;
+            hover: string;
+            background: string;
+        };
+    };
+    font: string;
+    fontSize: {
+        small: number;
+        normal: number;
+        large: number;
+    };
+    map: {
+        minZoom: number;
+        pathSize: number;
+        streetMapVisible: boolean;
+        watermarkVisible: boolean;
+    };
+};

package/dist/types/src/lib/types/utils.d.ts

@@ -0,0 +1,3 @@
+export type DeepPartial<T> = T extends object ? {
+    [P in keyof T]?: DeepPartial<T[P]>;
+} : T;

package/dist/types/src/lib/utils/color-utils.d.ts

@@ -0,0 +1,3 @@
+export declare const hexToRGB: (hex: string) => [number, number, number];
+export declare const RGBToHex: (color: [number, number, number]) => string;
+export declare const mixColors: (color1: string, color2: string, ratio: number) => string;

package/dist/types/src/lib/utils/color-utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/lib/utils/number-utils.d.ts

@@ -0,0 +1 @@
+export declare const clamp: (value: any, min: any, max: any) => number;

package/dist/types/src/lib/utils/search-utils.d.ts

@@ -0,0 +1 @@
+export declare const getFilteredSearchResults: <T extends Record<string, string>>(searchQuery: string, searchResults: T[], showAllResultsByDefault?: boolean) => T[];

package/dist/types/src/lib/utils/url-parsing.d.ts

@@ -0,0 +1,7 @@
+export declare const tryConvertToUrl: (source: string) => URL | null;
+export declare enum FindVenueError {
+    InvalidUrl = 0,
+    MissingVenueId = 1,
+    InvalidVenueId = 2
+}
+export declare const findVenueId: (source?: Location | string) => string | FindVenueError;

package/dist/types/src/lib/utils/url-parsing.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/states/global.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const Start: (() => import("react").JSX.Element) & {
+    displayName: string;
+};
+export default Start;

package/dist/types/src/states/loading.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+type TLoadingProps = {
+    visible?: boolean;
+};
+declare const Loading: React.FC<TLoadingProps>;
+export default Loading;

package/dist/types/src/states/map.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const Map: React.FC;
+export default Map;

package/dist/types/src/states/not-found.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const NotFound: React.FC;
+export default NotFound;

package/dist/types/src/stores/analytics-store/analytics-store.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/stores/analytics-store/index.d.ts

@@ -0,0 +1,9 @@
+import type RootStore from '../root-store';
+declare class AnalyticsStore {
+    private rootStore;
+    constructor({ rootStore }: {
+        rootStore: RootStore;
+    });
+    init(): void;
+}
+export default AnalyticsStore;

package/dist/types/src/stores/map-store/controllers/camera.d.ts

@@ -0,0 +1,27 @@
+import type RootStore from '../../root-store';
+import type MapStore from '..';
+import { MapView, TCameraAnimationOptions } from '@mappedin/mappedin-js';
+export declare const ZOOM_FACTOR = 1.5;
+export declare const TILT_FACTOR = 0.025;
+export declare const CAMERA_ANIMATION_OPTIONS: TCameraAnimationOptions;
+declare class CameraController {
+    private rootStore;
+    private mapStore;
+    private reactionDisposers;
+    private firstLoad;
+    constructor({ rootStore, mapStore }: {
+        rootStore: RootStore;
+        mapStore: MapStore;
+    });
+    focusOn(targets: Parameters<MapView['Camera']['focusOn']>[0], options?: Parameters<MapView['Camera']['focusOn']>[1]): Promise<void>;
+    zoomIn(): Promise<void>;
+    zoomOut(): Promise<void>;
+    zoomAll(): Promise<void>;
+    tiltCamera({ x, y }: {
+        x: number;
+        y: number;
+    }): void;
+    updateCamera(): void;
+    cleanup(): void;
+}
+export default CameraController;

package/dist/types/src/stores/map-store/controllers/directions.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="@mappedin/mappedin-js" />
+import type RootStore from '../../root-store';
+import type MapStore from '..';
+declare class DirectionsController {
+    private rootStore;
+    private mapStore;
+    private reactionDisposers;
+    constructor({ rootStore, mapStore }: {
+        rootStore: RootStore;
+        mapStore: MapStore;
+    });
+    private updateJourney;
+    get mapsInDirections(): import("@mappedin/mappedin-js").MappedinMap[];
+    get directions(): import("@mappedin/mappedin-js").MappedinDirections | undefined;
+    cleanup(): void;
+}
+export default DirectionsController;

package/dist/types/src/stores/map-store/controllers/hover.d.ts

@@ -0,0 +1,25 @@
+import MapStore from '..';
+import RootStore from '../../root-store';
+import { MappedinMap } from '@mappedin/mappedin-js';
+declare class HoverController {
+    private rootStore;
+    private mapStore;
+    private reactionDisposers;
+    cursorPosition: {
+        x: number;
+        y: number;
+    } | undefined;
+    private isPinHoveringOverPolygons;
+    constructor({ rootStore, mapStore }: {
+        rootStore: RootStore;
+        mapStore: MapStore;
+    });
+    private attachListener;
+    private handleContainerMouseMove;
+    private getPolygonsUnderHoverPin;
+    get droppedPinHoverVisible(): boolean;
+    canDropPinNow(): boolean;
+    dropPinOnMap(map: MappedinMap): void;
+    cleanup(): void;
+}
+export default HoverController;

package/dist/types/src/stores/map-store/controllers/labels.d.ts

@@ -0,0 +1,16 @@
+import type MapStore from '..';
+import type RootStore from '../../root-store';
+declare class LabelsController {
+    private rootStore;
+    private mapStore;
+    private reactionDisposers;
+    constructor({ rootStore, mapStore }: {
+        rootStore: RootStore;
+        mapStore: MapStore;
+    });
+    private labelLocationsOfCategory;
+    updateLabels(): void;
+    updateLabelPriorities(): void;
+    cleanup(): void;
+}
+export default LabelsController;

package/dist/types/src/stores/map-store/controllers/map.d.ts

@@ -0,0 +1,14 @@
+import type MapStore from '..';
+import type RootStore from '../../root-store';
+declare class MapsController {
+    private rootStore;
+    private mapStore;
+    private reactionDisposers;
+    constructor({ rootStore, mapStore }: {
+        rootStore: RootStore;
+        mapStore: MapStore;
+    });
+    private updateCurrentMap;
+    cleanup(): void;
+}
+export default MapsController;

package/dist/types/src/stores/map-store/controllers/markers.d.ts

@@ -0,0 +1,19 @@
+import type RootStore from '../../root-store';
+import type MapStore from '..';
+declare class MarkersController {
+    private rootStore;
+    private mapStore;
+    private reactionDisposers;
+    constructor({ rootStore, mapStore }: {
+        rootStore: RootStore;
+        mapStore: MapStore;
+    });
+    private isVortexAction;
+    private getActionDirection;
+    private get connectionMarkers();
+    private get directionsConnectionMarkers();
+    private get markers();
+    private updateMarkers;
+    cleanup(): void;
+}
+export default MarkersController;

package/dist/types/src/stores/map-store/controllers/polygons.d.ts

@@ -0,0 +1,17 @@
+import type MapStore from '..';
+import RootStore from '../../root-store';
+declare class PolygonsController {
+    private rootStore;
+    private mapStore;
+    private reactionDisposers;
+    constructor({ rootStore, mapStore }: {
+        rootStore: RootStore;
+        mapStore: MapStore;
+    });
+    private get highlightedPolygons();
+    private makeLocationsOfCategoryInteractive;
+    private updateInteractivePolygons;
+    private updateHighlightedPolygons;
+    cleanup(): void;
+}
+export default PolygonsController;

package/dist/types/src/stores/map-store/index.d.ts

@@ -0,0 +1,32 @@
+import type RootStore from '../root-store';
+import { E_SDK_EVENT, E_SDK_EVENT_PAYLOAD, MapView } from '@mappedin/mappedin-js';
+import MarkersReaction from './controllers/markers';
+import { E_MAP_INTERACTION_MODE } from '../../lib/types/map';
+import PolygonsController from './controllers/polygons';
+import DirectionsController from './controllers/directions';
+import CameraController from './controllers/camera';
+import MapsController from './controllers/map';
+import LabelsController from './controllers/labels';
+import HoverController from './controllers/hover';
+declare class MapStore {
+    readonly interactiveLocationCategories: string[];
+    private rootStore;
+    container: HTMLElement | null;
+    mapView: MapView | null;
+    markers: MarkersReaction;
+    polygons: PolygonsController;
+    directions: DirectionsController;
+    camera: CameraController;
+    maps: MapsController;
+    labels: LabelsController;
+    hover: HoverController;
+    constructor({ rootStore }: {
+        rootStore: RootStore;
+    });
+    private handlePolygonsClicked;
+    get interactionMode(): E_MAP_INTERACTION_MODE;
+    init(container: HTMLElement): Promise<void>;
+    handleMapClick({ polygons }: E_SDK_EVENT_PAYLOAD[E_SDK_EVENT.CLICK]): void;
+    cleanup(): void;
+}
+export default MapStore;

package/dist/types/src/stores/map-store/map-store.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/stores/root-store/index.d.ts

@@ -0,0 +1,60 @@
+/// <reference types="react" />
+import { Mappedin, MappedinCoordinate, MappedinLocation, MappedinMap, MappedinPolygon } from '@mappedin/mappedin-js';
+import UIStore from '../ui-store';
+import MapStore from '../map-store';
+import { E_DEPARTURE_MODE } from '../../lib/types/directions';
+import { E_APP_STATE } from '../../lib/types/state';
+import RouterStore from '../router-store';
+import { ParsedMVF } from '@mappedin/mvf';
+import AnalyticsStore from '../analytics-store';
+import { TStartViewerOptions, TStartViewerWithLocalDataOptions } from '../../lib/types/options';
+export declare const RootStoreContext: import("react").Context<RootStore>;
+declare class RootStore {
+    private reactionDisposers;
+    private currentMapId;
+    /**
+     * This should not be exposed outside the root store. Root store observables, derived from the router
+     * should be the source of truth for the rest of the application.
+     */
+    private routerStore;
+    readonly data: Mappedin;
+    private startupOptions;
+    /**
+     * This is only populated if the viewer is hydrated with local data (i.e. in Maker's preview).
+     */
+    __mvfData: ParsedMVF | undefined;
+    uiStore: UIStore;
+    mapStore: MapStore;
+    analyticsStore: AnalyticsStore;
+    departureMode: E_DEPARTURE_MODE;
+    constructor({ router, data, startupOptions, }: {
+        router: RouterStore;
+        data: Mappedin;
+        startupOptions: TStartViewerOptions | TStartViewerWithLocalDataOptions;
+    });
+    private getInitialDepartureMode;
+    private serializeCoordinate;
+    private deserializeCoordinate;
+    private syncState;
+    private syncCurrentMap;
+    get __mvfFeaturesByExternalId(): Record<string, import("@mappedin/mvf").Feature<import("@mappedin/mvf").Polygon | import("@mappedin/mvf").LineString | import("@mappedin/mvf").Point, import("@mappedin/mvf").SpaceProperties> | import("@mappedin/mvf").Feature<import("@mappedin/mvf").Polygon | import("@mappedin/mvf").LineString, import("@mappedin/mvf").ObstructionProperties>>;
+    get areNodesAvailable(): boolean;
+    get exteriorEntrancesLocation(): MappedinLocation | undefined;
+    get selectedLocation(): MappedinLocation | undefined;
+    get departure(): MappedinLocation | MappedinCoordinate | undefined;
+    get currentMap(): MappedinMap | undefined;
+    get interactivePolygons(): MappedinPolygon[];
+    private syncDeparture;
+    get isAppEmbedded(): boolean;
+    get state(): E_APP_STATE;
+    setState(state: E_APP_STATE): void;
+    isLocationOnMap(location: MappedinLocation, map: MappedinMap): boolean;
+    setSelectedLocationId(id: string | undefined): void;
+    clearDeparture(): void;
+    setDepartureLocationId(id: string): void;
+    setDepartureCoordinate(coordinate: MappedinCoordinate): void;
+    setCurrentMapId(id: string | undefined): void;
+    setDepartureMode(mode: E_DEPARTURE_MODE): void;
+    cleanup(): void;
+}
+export default RootStore;

package/dist/types/src/stores/root-store/root-store.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/stores/router-store/index.d.ts

@@ -0,0 +1,27 @@
+import { History } from 'history';
+export declare const EMBED_ROUTER_PARAM = "embedded";
+type TRouterGoOptions = {
+    clearExistingParams?: boolean;
+};
+declare class RouterStore {
+    private base;
+    private path;
+    private params;
+    private history;
+    private disposer;
+    constructor({ history, base }: {
+        history: History;
+        base?: string;
+    });
+    private getParams;
+    private update;
+    private getPath;
+    get state(): {
+        path: string;
+        params: Record<string, string>;
+    };
+    go(state: string, newParams: Record<string, string | undefined>, options?: TRouterGoOptions): void;
+    back(): void;
+    cleanup(): void;
+}
+export default RouterStore;

package/dist/types/src/stores/router-store/router-store.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/stores/ui-store/index.d.ts

@@ -0,0 +1,49 @@
+import type RootStore from '../root-store';
+import { TCategory, TSearchResult } from 'lib/types/search';
+import { TLevelSelectorLevel } from '../../components/level-selector/utils';
+import { TTheme } from 'lib/types/theme';
+import { E_DEPARTURE_MODE } from '../../lib/types/directions';
+declare class UIStore {
+    private rootStore;
+    private reactionDisposers;
+    theme: TTheme;
+    searchQuery: string;
+    departureSearchQuery: string;
+    overrideShareButtonHandler?: () => void;
+    constructor({ rootStore }: {
+        rootStore: RootStore;
+    });
+    private get searchableLocations();
+    private get searchResultsById();
+    private get searchCategoriesById();
+    private syncSearchQueryWithSelectedLocation;
+    private syncDepartureSearchQueryWithDepartureLocation;
+    get searchResults(): TSearchResult[];
+    get departureSearchResults(): TSearchResult[];
+    get searchCategories(): TCategory[];
+    get levels(): TLevelSelectorLevel[];
+    get levelSelectorVisible(): boolean;
+    get directionsButtonVisible(): boolean;
+    get directionsButtonDisabled(): boolean;
+    get directionsUIVisible(): boolean;
+    get directionsWarningVisible(): boolean;
+    get openAppLink(): string;
+    get openAppButtonVisible(): boolean;
+    get tiltControlsVisible(): boolean;
+    get shareButtonVisible(): boolean;
+    get mainUIVisible(): boolean;
+    get logoPosition(): "top-left" | "bottom-center";
+    get appPadding(): 12 | 20;
+    setTheme(theme: TTheme): void;
+    setOverrideShareButtonHandler(handler?: () => void): void;
+    setSearchQuery(query: string): void;
+    setDepartureSearchQuery(query: string): void;
+    handleMainUIBlur(): void;
+    handleSearchResultSelected(result: TSearchResult): void;
+    handleDepartureSearchResultSelected(result: TSearchResult): void;
+    handleLevelSelected(level: TLevelSelectorLevel): void;
+    handleDirectionsButtonClick(): void;
+    handleDepartureModeSelected(mode: E_DEPARTURE_MODE): void;
+    cleanup(): void;
+}
+export default UIStore;

package/dist/types/src/stores/ui-store/ui-store.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/test-utils/test-setup.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/theme.d.ts

@@ -0,0 +1,3 @@
+import { TTheme } from './lib/types/theme';
+export declare const defaultTheme: TTheme;
+export declare const defaultThemeEmbedded: TTheme;

package/package.json

@@ -1,26 +1,28 @@
 {
   "name": "@mappedin/viewer",
-  "version": "0.0.0-alpha",
+  "version": "0.3.0",
   "type": "module",
   "browser": "./dist/index.js",
   "license": "UNLICENSED",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.umd.cjs",
-      "types": "./types/src/index.d.ts"
+      "import": {
+        "types": "./dist/types/src/index.d.ts",
+        "default": "./dist/index.js"
+      }
     }
   },
+  "types": "./dist/types/src/index.d.ts",
   "volta": {
     "extends": "../../package.json"
   },
   "dependencies": {
-    "@mappedin/mappedin-js": "^5.16.1-fe0354d.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "styled-components": "^6.0.7"
+    "posthog-js": "^1.78.1"
   },
   "devDependencies": {
+    "@ladle/react": "^2.17.2",
+    "@mappedin/mappedin-js": "5.17.1-cef0746.0",
+    "@mappedin/mvf": "2.0.1-1bfe7ea.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
@@ -32,17 +34,28 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "happy-dom": "^10.9.0",
+    "history": "^5.3.0",
+    "i18next": "^23.4.4",
+    "lodash.merge": "^4.6.2",
+    "mobx": "^6.10.0",
+    "mobx-react-lite": "^4.0.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-i18next": "^13.1.2",
+    "styled-components": "6.0.7",
     "typescript": "^5.0.2",
     "vite": "^4.4.5",
     "vite-plugin-css-injected-by-js": "^3.3.0",
+    "vite-plugin-mkcert": "^1.16.0",
     "vitest": "^0.34.1"
   },
   "scripts": {
     "dev": "vite",
-    "build": "vite build && tsc",
+    "build": "vite build && tsc --project tsconfig.build.json",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
-    "test": "cross-env NODE_ENV=test vitest run",
+    "stories": "pnpm ladle serve",
+    "test": "cross-env NODE_ENV=test vitest run --allowOnly",
     "test:watch": "cross-env NODE_ENV=test vitest",
     "test:cover": "cross-env NODE_ENV=test vitest run --coverage"
   }

package/tsconfig.build.json

@@ -0,0 +1,4 @@
+{
+	"extends": "./tsconfig.json",
+	"include": ["src"]
+}