@krizaka/ui 3.3.0 → 3.5.0

package/dist/native/map.d.ts

@@ -0,0 +1,200 @@
+import { BrandId } from '@krizaka/ui/native';
+import * as React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { brands } from '@krizaka/tokens/native';
+
+/** A position: longitude, latitude (GeoJSON's order, MapLibre's `LngLat`). */
+type LngLat = readonly [lng: number, lat: number];
+/** The great-circle distance between two positions, in metres (haversine). */
+declare function distanceMeters(a: LngLat, b: LngLat): number;
+/** A circle of `radius` metres around `center` as a GeoJSON polygon (`steps` points): a delivery zone, a search radius. */
+declare function circlePolygon(center: LngLat, radius: number, steps?: number): GeoJSON.Feature<GeoJSON.Polygon>;
+/** A distance written the locale's way: metres under 1 km, kilometres (one decimal under 10) above. */
+declare function formatDistance(meters: number, locale: string): string;
+
+/** A product of the family: its accent paints the map. */
+type MapBrand = keyof typeof brands;
+/** The colours of the map in a scheme (and a brand): what the style, the markers and the static map share. */
+declare function mapPalette(scheme: "dark" | "light", brand?: MapBrand): {
+    land: string;
+    background: string;
+    water: string;
+    park: string;
+    road: string;
+    roadMajor: string;
+    casing: string;
+    building: string;
+    boundary: string;
+    label: string;
+    labelStrong: string;
+    halo: string;
+    accent: string;
+    onAccent: string;
+};
+/** A region of the basemap: its PMTiles file and the zoom up to which it has tiles. */
+type MapRegion = {
+    url: string;
+    maxzoom: number;
+};
+type MapStyleOptions = {
+    /** `dark` or `light`: the scheme of the page or the app. */
+    scheme: "dark" | "light";
+    /** The product whose accent the map carries (its markers, its water's tint). Default `krizaka`. */
+    brand?: MapBrand;
+    /** The language of the labels (`fr`, `en`): the place names in it where OpenStreetMap has them. Default `en`. */
+    lang?: string;
+    /** The low zooms of the whole world. Default: our world extract (zoom 0–6). */
+    world?: MapRegion | null;
+    /** The detailed region drawn from zoom 7. Default: Montréal–Québec (up to 14, overzoomed beyond). */
+    region?: MapRegion | null;
+    /** The glyphs' URL template. Default: our Noto Sans on the CDN. */
+    glyphs?: string;
+};
+/**
+ * The MapLibre style of a Krizaka map (a `StyleSpecification`): the world's low zooms, then the detailed region,
+ * painted from the tokens. The `pmtiles://` sources need the PMTiles protocol (the web `Map` registers it; MapLibre
+ * Native reads it as it is).
+ */
+declare function mapStyle({ scheme, brand, lang, world, region, glyphs }: MapStyleOptions): {
+    version: 8;
+    glyphs: string;
+    sources: Record<string, unknown>;
+    layers: {
+        [k: string]: unknown;
+        id: string;
+        minzoom?: number;
+        maxzoom?: number;
+    }[];
+};
+
+/** The basemap extracts: OpenStreetMap data built by Protomaps (ODbL). `world` up to zoom 6, `quebec` (Montréal–Québec) up to 14. */
+declare const MAP_TILES: {
+    readonly world: "https://krizaka-assets.b-cdn.net/maps/v1/tiles/world-20261012.pmtiles";
+    readonly quebec: "https://krizaka-assets.b-cdn.net/maps/v1/tiles/quebec-20261012.pmtiles";
+};
+/** The glyphs of the labels (Noto Sans, SIL OFL): `{fontstack}` and `{range}` filled by MapLibre. */
+declare const MAP_GLYPHS = "https://krizaka-assets.b-cdn.net/maps/v1/fonts/{fontstack}/{range}.pbf";
+/** The words every map shows, as the licences ask: OpenStreetMap's contributors (ODbL) and Protomaps. */
+declare const MAP_ATTRIBUTION: {
+    readonly osm: "© OpenStreetMap contributors";
+    readonly osmUrl: "https://www.openstreetmap.org/copyright";
+    readonly protomaps: "Protomaps";
+    readonly protomapsUrl: "https://protomaps.com";
+};
+
+type MapProps = {
+    /** The map's accessible name ("Pick-up points near you"), passed translated; the places follow it. */
+    label: string;
+    /** Where the map looks: longitude, latitude. */
+    center: LngLat;
+    /** The zoom (0 the world, 12 a city, 16 a street). Default 12. */
+    zoom?: number;
+    /** The product whose accent the map carries. Default `krizaka`. */
+    brand?: BrandId;
+    /** The language of the labels (`fr`, `en`). Default `en`. */
+    lang?: string;
+    /** The detailed region (PMTiles) drawn from zoom 6.5. Default: our Montréal–Québec extract (to zoom 14). */
+    region?: MapRegion | null;
+    /** The world's low zooms (PMTiles). Default: our world extract (to zoom 6). */
+    world?: MapRegion | null;
+    /** Moves with the hand (default). */
+    interactive?: boolean;
+    /** Called when the camera rests: its centre and zoom. */
+    onMoveEnd?: (view: {
+        center: LngLat;
+        zoom: number;
+    }) => void;
+    /** Called with the position pressed on the map (not on a marker). */
+    onPress?: (position: LngLat) => void;
+    /** Markers, circles, clusters, the person's position. */
+    children?: React.ReactNode;
+    /** Styles merged last (its height). */
+    style?: StyleProp<ViewStyle>;
+};
+/** A map: MapLibre Native over our Protomaps tiles, styled from the tokens in the app's scheme; its places in its name. */
+declare function Map({ label, center, zoom, brand, lang, region, world, interactive, onMoveEnd, onPress, children, style }: MapProps): React.JSX.Element;
+type MarkerProps = {
+    /** Where it stands. */
+    position: LngLat;
+    /** Its words: the place's name (read in the map's name and as the button's name). */
+    label: string;
+    /** Pressing it: details in a `Sheet`. */
+    onPress?: () => void;
+    /** The chosen one: larger, its label above it. */
+    selected?: boolean;
+    /** What it draws instead of the accent dot. */
+    children?: React.ReactNode;
+};
+/** A place: an accent dot (or your view) that is a button when it does something. */
+declare function Marker({ position, label, onPress, selected, children }: MarkerProps): React.JSX.Element;
+type UserPositionProps = {
+    /** Where the person is. */
+    position: LngLat;
+    /** Its words ("You are here"). */
+    label: string;
+    /** The accuracy in metres: a soft disc. */
+    accuracy?: number;
+};
+/** The person's position: a dot that pulses (still when the system reduces motion). */
+declare function UserPosition({ position, label, accuracy }: UserPositionProps): React.JSX.Element;
+type RadiusCircleProps = {
+    /** Its centre. */
+    center: LngLat;
+    /** Its radius in metres. */
+    radius: number;
+    /** `accent` (a zone) or `soft` (an accuracy). */
+    tone?: "accent" | "soft";
+};
+/** A circle on the ground: a delivery zone, a search radius. */
+declare function RadiusCircle({ center, radius, tone }: RadiusCircleProps): React.JSX.Element;
+type ClusterPoint = {
+    id: string;
+    position: LngLat;
+    label: string;
+};
+type ClusterProps = {
+    /** The points: many of them. */
+    points: readonly ClusterPoint[];
+    /** Pressing a single point (details in a `Sheet`). */
+    onPointPress?: (point: ClusterPoint) => void;
+    /** The radius, in points, within which points group. Default 48. */
+    radius?: number;
+};
+/** Many points grouped while they are close: a disc with the count; each point is part of the map's name. */
+declare function Cluster({ points, onPointPress, radius }: ClusterProps): React.JSX.Element;
+type LocationPickerLabels = {
+    /** "Near me". */
+    nearMe: string;
+    /** "Finding you…". */
+    locating: string;
+    /** "Location is off for this app. Move the map instead." */
+    denied: string;
+    /** "We could not find you. Move the map instead." */
+    unavailable: string;
+    /** "You are here". */
+    you: string;
+    /** The distance chip ("1.2 km from you"). */
+    distance: (distance: string) => string;
+};
+type LocationPickerProps = Pick<MapProps, "brand" | "lang" | "region" | "world" | "style"> & {
+    /** The picker's accessible name ("Meeting point"). */
+    label: string;
+    /** The chosen position (the centre of the map). */
+    value: LngLat;
+    /** Called when the map rests on a new position. */
+    onValueChange: (value: LngLat) => void;
+    /** The BCP 47 locale of the distance. */
+    locale: string;
+    /** The zoom. Default 14. */
+    zoom?: number;
+    /** A radius in metres around the chosen position. */
+    radius?: number;
+    /** Where the person is, when already known. */
+    origin?: LngLat | null;
+    /** The words, passed translated. */
+    labels?: Partial<LocationPickerLabels>;
+};
+/** A position picked by moving the map under a pin; its distance from the person; "near me" asks for the location only when pressed. */
+declare function LocationPicker({ label, value, onValueChange, locale, zoom, radius: zone, origin: originProp, labels: given, style, ...map }: LocationPickerProps): React.JSX.Element;
+
+export { Cluster, type ClusterPoint, type ClusterProps, type LngLat, LocationPicker, type LocationPickerLabels, type LocationPickerProps, MAP_ATTRIBUTION, MAP_GLYPHS, MAP_TILES, Map, type MapProps, type MapRegion, Marker, type MarkerProps, RadiusCircle, type RadiusCircleProps, UserPosition, type UserPositionProps, circlePolygon, distanceMeters, formatDistance, mapPalette, mapStyle };