@alveole/components 1.10.0 → 2.0.0-alpha.1

package/dist/core/Map/Map.web.js

@@ -1,134 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import Constants from 'expo-constants';
-import * as React from 'react';
 import { Box } from '../Box';
-const GOOGLE_MAPS_WEB_URL = 'https://maps.googleapis.com/maps/api/js?v=quarterly&libraries=marker';
-const GOOGLE_MAPS_URL = (() => {
-    const key = Constants.expoConfig?.extra?.GOOGLE_MAPS_API_KEY;
-    if (!key)
-        console.warn('EXPO_PUBLIC_GOOGLE_MAPS_API_KEY manquant');
-    return key ? `${GOOGLE_MAPS_WEB_URL}&key=${key}` : GOOGLE_MAPS_WEB_URL;
-})();
-let loaderPromise = null;
-function loadGoogleMaps() {
-    if (typeof window === 'undefined')
-        return Promise.resolve();
-    if (window.google?.maps)
-        return Promise.resolve();
-    if (loaderPromise)
-        return loaderPromise;
-    loaderPromise = new Promise((resolve, reject) => {
-        const existing = document.querySelector('script[data-map-loader="google"]');
-        if (existing) {
-            existing.addEventListener('load', () => resolve());
-            existing.addEventListener('error', () => reject(new Error('Failed to load Google Maps')));
-            return;
-        }
-        const script = document.createElement('script');
-        script.src = GOOGLE_MAPS_URL;
-        script.async = true;
-        script.defer = true;
-        script.dataset.mapLoader = 'google';
-        script.onload = () => resolve();
-        script.onerror = () => reject(new Error('Failed to load Google Maps'));
-        document.head.appendChild(script);
-    });
-    return loaderPromise;
-}
+import { useStyles } from './Map.styles';
+import { useGoogleMap } from './useGoogleMap';
 export const Map = (props) => {
-    const { markers = [], center, zoom = 12, fitToMarkers, mapOptions, onMarkerClick } = props;
-    const containerRef = React.useRef(null);
-    const mapRef = React.useRef(null);
-    const gMarkersRef = React.useRef([]);
-    const refreshMarkers = React.useCallback(() => {
-        if (!mapRef.current)
-            return;
-        const g = window.google;
-        if (!g?.maps)
-            return;
-        gMarkersRef.current.forEach(m => m.setMap(null));
-        gMarkersRef.current = [];
-        gMarkersRef.current = markers.map(mk => {
-            const marker = new g.maps.Marker({
-                position: mk.position,
-                map: mapRef.current,
-                title: mk.title,
-                ...(mk.iconUrl ? { icon: { url: mk.iconUrl } } : {}),
-            });
-            if (onMarkerClick)
-                marker.addListener('click', () => onMarkerClick(mk));
-            return marker;
-        });
-    }, [markers, onMarkerClick]);
-    const fitBoundsIfNeeded = React.useCallback(() => {
-        const shouldFit = (fitToMarkers ?? !center) && markers.length > 0 && mapRef.current;
-        if (!shouldFit || !mapRef.current) {
-            if (center && mapRef.current) {
-                mapRef.current.setCenter(center);
-                mapRef.current.setZoom(zoom);
-            }
-            return;
-        }
-        const g = window.google;
-        if (!g?.maps)
-            return;
-        const bounds = new g.maps.LatLngBounds();
-        markers.forEach(m => bounds.extend(m.position));
-        if (!bounds.isEmpty())
-            mapRef.current.fitBounds(bounds, 24);
-    }, [fitToMarkers, center, markers, zoom]);
-    const initMap = React.useCallback(async (cancelled) => {
-        try {
-            await loadGoogleMaps();
-            if (cancelled)
-                return;
-            if (!containerRef.current)
-                return;
-            const google = window.google;
-            if (!google?.maps)
-                throw new Error('Google Maps not available on window');
-            const initialCenter = center ?? markers[0]?.position ?? { lat: 48.8566, lng: 2.3522 };
-            mapRef.current = new google.maps.Map(containerRef.current, {
-                center: initialCenter,
-                zoom,
-                clickableIcons: false,
-                streetViewControl: false,
-                mapTypeControl: false,
-                fullscreenControl: false,
-                ...mapOptions,
-            });
-            refreshMarkers();
-            fitBoundsIfNeeded();
-        }
-        catch (e) {
-            console.error(e);
-        }
-    }, [center, markers, zoom, mapOptions, refreshMarkers, fitBoundsIfNeeded]);
-    // Init map
-    React.useEffect(() => {
-        let cancelled = false;
-        initMap(cancelled);
-        return () => {
-            cancelled = true;
-            gMarkersRef.current.forEach(m => m.setMap(null));
-            gMarkersRef.current = [];
-            mapRef.current = null;
-        };
-    }, [initMap]);
-    // Au changement d'options, on refresh markers et zoom
-    React.useEffect(() => {
-        if (!mapRef.current || !window.google?.maps)
-            return;
-        if (mapOptions)
-            mapRef.current.setOptions(mapOptions);
-        refreshMarkers();
-        fitBoundsIfNeeded();
-    }, [mapOptions, refreshMarkers, fitBoundsIfNeeded]);
-    return (_jsx(Box, { ref: containerRef, style: {
-            width: '100%',
-            height: '100%',
-            minHeight: 240,
-            borderRadius: 12,
-            overflow: 'hidden',
-        } }));
+    const { containerRef } = useGoogleMap(props);
+    const styles = useStyles();
+    return _jsx(Box, { ref: containerRef, style: styles.container });
 };

package/dist/core/Map/googleMaps.types.d.ts

@@ -0,0 +1,32 @@
+import { LatLng } from './Map.props';
+export type GoogleMap = {
+    setCenter(center: LatLng): void;
+    setZoom(zoom: number): void;
+    setOptions(options: Record<string, unknown>): void;
+    fitBounds(bounds: GoogleLatLngBounds, padding: number): void;
+};
+export type GoogleMarker = {
+    setMap(map: GoogleMap | null): void;
+    addListener(event: 'click', handler: () => void): void;
+};
+export type GoogleLatLngBounds = {
+    extend(position: LatLng): void;
+    isEmpty(): boolean;
+};
+type GoogleMarkerOptions = {
+    position: LatLng;
+    map: GoogleMap;
+    title?: string;
+    icon?: {
+        url: string;
+    };
+};
+export type GoogleNamespace = {
+    maps: {
+        Map: new (container: HTMLElement, options: Record<string, unknown>) => GoogleMap;
+        Marker: new (options: GoogleMarkerOptions) => GoogleMarker;
+        LatLngBounds: new () => GoogleLatLngBounds;
+    };
+};
+export {};
+//# sourceMappingURL=googleMaps.types.d.ts.map

package/dist/core/Map/googleMaps.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"googleMaps.types.d.ts","sourceRoot":"","sources":["../../../src/core/Map/googleMaps.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAKrC,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,UAAU,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IACnD,SAAS,CAAC,MAAM,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9D,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,CAAC,GAAG,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;IACpC,WAAW,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,IAAI,GAAG,IAAI,CAAC;CACxD,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,OAAO,IAAI,OAAO,CAAC;CACpB,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,SAAS,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE;QACJ,GAAG,EAAE,KAAK,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,SAAS,CAAC;QACjF,MAAM,EAAE,KAAK,OAAO,EAAE,mBAAmB,KAAK,YAAY,CAAC;QAC3D,YAAY,EAAE,UAAU,kBAAkB,CAAC;KAC5C,CAAC;CACH,CAAC"}

package/dist/core/Map/googleMaps.types.js

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

package/dist/core/Map/useGoogleMap.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { GoogleNamespace } from './googleMaps.types';
+import { LatLng, MapProps } from './Map.props';
+declare global {
+    interface Window {
+        google?: GoogleNamespace;
+    }
+}
+export declare const shouldFitToMarkers: (fitToMarkers: boolean | undefined, center: LatLng | undefined, markersCount: number) => boolean;
+export declare function useGoogleMap(props: MapProps): {
+    containerRef: React.RefObject<HTMLDivElement | null>;
+};
+//# sourceMappingURL=useGoogleMap.d.ts.map

package/dist/core/Map/useGoogleMap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGoogleMap.d.ts","sourceRoot":"","sources":["../../../src/core/Map/useGoogleMap.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA2B,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAU,MAAM,aAAa,CAAC;AAEvD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,MAAM,CAAC,EAAE,eAAe,CAAC;KAC1B;CACF;AAqCD,eAAO,MAAM,kBAAkB,GAC7B,cAAc,OAAO,GAAG,SAAS,EACjC,QAAQ,MAAM,GAAG,SAAS,EAC1B,cAAc,MAAM,KACnB,OAAwD,CAAC;AAqH5D,wBAAgB,YAAY,CAAC,KAAK,EAAE,QAAQ;;EAuC3C"}

package/dist/core/Map/useGoogleMap.js

@@ -0,0 +1,151 @@
+import Constants from 'expo-constants';
+import * as React from 'react';
+const GOOGLE_MAPS_WEB_URL = 'https://maps.googleapis.com/maps/api/js?v=quarterly&libraries=marker';
+const GOOGLE_MAPS_URL = (() => {
+    const key = Constants.expoConfig?.extra?.GOOGLE_MAPS_API_KEY;
+    if (!key)
+        console.warn('EXPO_PUBLIC_GOOGLE_MAPS_API_KEY manquant');
+    return key ? `${GOOGLE_MAPS_WEB_URL}&key=${key}` : GOOGLE_MAPS_WEB_URL;
+})();
+let loaderPromise = null;
+function loadGoogleMaps() {
+    if (typeof window === 'undefined')
+        return Promise.resolve();
+    if (window.google?.maps)
+        return Promise.resolve();
+    if (loaderPromise)
+        return loaderPromise;
+    loaderPromise = new Promise((resolve, reject) => {
+        const existing = document.querySelector('script[data-map-loader="google"]');
+        if (existing) {
+            existing.addEventListener('load', () => resolve());
+            existing.addEventListener('error', () => reject(new Error('Failed to load Google Maps')));
+            return;
+        }
+        const script = document.createElement('script');
+        script.src = GOOGLE_MAPS_URL;
+        script.async = true;
+        script.defer = true;
+        script.dataset.mapLoader = 'google';
+        script.onload = () => resolve();
+        script.onerror = () => reject(new Error('Failed to load Google Maps'));
+        document.head.appendChild(script);
+    });
+    return loaderPromise;
+}
+export const shouldFitToMarkers = (fitToMarkers, center, markersCount) => (fitToMarkers ?? !center) && markersCount > 0;
+function useMarkerSync(mapRef, markers, onMarkerClick) {
+    const gMarkersRef = React.useRef([]);
+    const clearMarkers = React.useCallback(() => {
+        gMarkersRef.current.forEach(m => m.setMap(null));
+        gMarkersRef.current = [];
+    }, []);
+    const refreshMarkers = React.useCallback(() => {
+        const map = mapRef.current;
+        if (!map)
+            return;
+        const g = window.google;
+        if (!g?.maps)
+            return;
+        clearMarkers();
+        gMarkersRef.current = markers.map(mk => {
+            const marker = new g.maps.Marker({
+                position: mk.position,
+                map,
+                title: mk.title,
+                ...(mk.iconUrl ? { icon: { url: mk.iconUrl } } : {}),
+            });
+            if (onMarkerClick)
+                marker.addListener('click', () => onMarkerClick(mk));
+            return marker;
+        });
+    }, [mapRef, markers, onMarkerClick, clearMarkers]);
+    return { refreshMarkers, clearMarkers };
+}
+function useBoundsFit({ mapRef, fitToMarkers, center, zoom, markers }) {
+    return React.useCallback(() => {
+        const map = mapRef.current;
+        if (!map)
+            return;
+        if (!shouldFitToMarkers(fitToMarkers, center, markers.length)) {
+            if (center) {
+                map.setCenter(center);
+                map.setZoom(zoom);
+            }
+            return;
+        }
+        const g = window.google;
+        if (!g?.maps)
+            return;
+        const bounds = new g.maps.LatLngBounds();
+        markers.forEach(m => bounds.extend(m.position));
+        if (!bounds.isEmpty())
+            map.fitBounds(bounds, 24);
+    }, [mapRef, fitToMarkers, center, markers, zoom]);
+}
+function useMapInit({ containerRef, mapRef, center, markers, zoom, mapOptions, refreshMarkers, fitBoundsIfNeeded, }) {
+    return React.useCallback(async (cancelled) => {
+        try {
+            await loadGoogleMaps();
+            if (cancelled)
+                return;
+            if (!containerRef.current)
+                return;
+            const google = window.google;
+            if (!google?.maps)
+                throw new Error('Google Maps not available on window');
+            const initialCenter = center ?? markers[0]?.position ?? { lat: 48.8566, lng: 2.3522 };
+            mapRef.current = new google.maps.Map(containerRef.current, {
+                center: initialCenter,
+                zoom,
+                clickableIcons: false,
+                streetViewControl: false,
+                mapTypeControl: false,
+                fullscreenControl: false,
+                ...mapOptions,
+            });
+            refreshMarkers();
+            fitBoundsIfNeeded();
+        }
+        catch (e) {
+            console.error(e);
+        }
+    }, [containerRef, mapRef, center, markers, zoom, mapOptions, refreshMarkers, fitBoundsIfNeeded]);
+}
+export function useGoogleMap(props) {
+    const { markers = [], center, zoom = 12, fitToMarkers, mapOptions, onMarkerClick } = props;
+    const containerRef = React.useRef(null);
+    const mapRef = React.useRef(null);
+    const { refreshMarkers, clearMarkers } = useMarkerSync(mapRef, markers, onMarkerClick);
+    const fitBoundsIfNeeded = useBoundsFit({ mapRef, fitToMarkers, center, zoom, markers });
+    const initMap = useMapInit({
+        containerRef,
+        mapRef,
+        center,
+        markers,
+        zoom,
+        mapOptions,
+        refreshMarkers,
+        fitBoundsIfNeeded,
+    });
+    // Init map
+    React.useEffect(() => {
+        let cancelled = false;
+        initMap(cancelled);
+        return () => {
+            cancelled = true;
+            clearMarkers();
+            mapRef.current = null;
+        };
+    }, [initMap, clearMarkers]);
+    // Au changement d'options, on refresh markers et zoom
+    React.useEffect(() => {
+        if (!mapRef.current || !window.google?.maps)
+            return;
+        if (mapOptions)
+            mapRef.current.setOptions(mapOptions);
+        refreshMarkers();
+        fitBoundsIfNeeded();
+    }, [mapOptions, refreshMarkers, fitBoundsIfNeeded]);
+    return { containerRef };
+}

package/dist/core/MarkdownDescription/MarkdownDescription.d.ts

@@ -1,6 +1,13 @@
 import React from 'react';
 export type MarkdownDescriptionProps = {
     children: string;
+    /**
+     * Le cran de texte du corps. `LG` sert la phrase qui presente une page : elle n'est pas un
+     * paragraphe parmi d'autres, et Primer comme Base la posent un cran au-dessus du courant.
+     */
+    taille?: 'MD' | 'LG';
+    /** Couleur du texte courant. Laisser vide garde le gris par defaut de `Typography`. */
+    color?: string;
 };
-export declare const MarkdownDescription: ({ children }: MarkdownDescriptionProps) => React.JSX.Element;
+export declare const MarkdownDescription: ({ children, taille, color: textColor }: MarkdownDescriptionProps) => React.JSX.Element;
 //# sourceMappingURL=MarkdownDescription.d.ts.map

package/dist/core/MarkdownDescription/MarkdownDescription.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownDescription.d.ts","sourceRoot":"","sources":["../../../src/core/MarkdownDescription/MarkdownDescription.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,MAAM,wBAAwB,GAAG;IACrC,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAiBF,eAAO,MAAM,mBAAmB,GAAI,cAAc,wBAAwB,sBAsIzE,CAAC"}
+{"version":3,"file":"MarkdownDescription.d.ts","sourceRoot":"","sources":["../../../src/core/MarkdownDescription/MarkdownDescription.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,MAAM,wBAAwB,GAAG;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACrB,uFAAuF;IACvF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,wCAA+C,wBAAwB,sBAsD1G,CAAC"}

package/dist/core/MarkdownDescription/MarkdownDescription.js

@@ -1,59 +1,42 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useTheme } from '@alveole/theme';
-import { Platform, Text } from 'react-native';
+import { Platform } from 'react-native';
 import { Box } from '../Box';
-import { Code } from '../Code';
-import { Highlight } from '../Highlight';
 import { Typography } from '../Typography';
-const HIGHLIGHT_LANGUAGES = [
-    'json',
-    'typescript',
-    'tsx',
-    'ruby',
-    'bash',
-    'html',
-    'plaintext',
-];
-const extractLanguage = (className) => {
-    const match = /language-(\w+)/.exec(className ?? '');
-    return HIGHLIGHT_LANGUAGES.find(l => l === match?.[1]) ?? 'plaintext';
-};
-export const MarkdownDescription = ({ children }) => {
+import { createMarkdownComponents } from './markdownComponents';
+import { replierLesCoupuresDeLigne } from './replierLesCoupuresDeLigne';
+export const MarkdownDescription = ({ children, taille = 'MD', color: textColor }) => {
     const { text, color } = useTheme();
-    const bodyStyle = text['Corps de texte'].MD.Regular;
-    const boldStyle = text['Corps de texte'].MD.Bold;
+    const bodyStyle = text['Corps de texte'][taille].Regular;
+    const boldStyle = text['Corps de texte'][taille].Bold;
     if (Platform.OS !== 'web') {
-        return _jsx(Typography, { style: bodyStyle, children: children });
+        return (_jsx(Typography, { style: bodyStyle, color: textColor, children: children }));
     }
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
     const ReactMarkdown = require('react-markdown').default;
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
     const remarkGfm = require('remark-gfm').default;
     const borderColor = color.light.border['default-grey'];
     const headerBg = color.light.background['alt-grey'];
-    return (_jsx(Box, { tag: "markdown-description", display: "flex", gap: 8, children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components: {
-                p: ({ children: c }) => _jsx(Typography, { style: bodyStyle, children: c }),
-                strong: ({ children: c }) => _jsx(Text, { style: boldStyle, children: c }),
-                em: ({ children: c }) => (_jsx(Text, { style: [bodyStyle, { fontStyle: 'italic' }], children: c })),
-                h1: ({ children: c }) => (_jsx(Typography, { style: text.Titres['H3 - MD'], children: c })),
-                h2: ({ children: c }) => (_jsx(Typography, { style: text.Titres['H4 - SM'], children: c })),
-                h3: ({ children: c }) => (_jsx(Typography, { style: text.Titres['H5 - XS'], children: c })),
-                h4: ({ children: c }) => (_jsx(Typography, { style: text.Titres['H6 - XXS'], children: c })),
-                ul: ({ children: c }) => (_jsx(Box, { display: "flex", gap: 4, children: c })),
-                ol: ({ children: c }) => (_jsx(Box, { display: "flex", gap: 4, children: c })),
-                li: ({ children: c }) => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 8, style: { alignItems: 'flex-start' }, children: [_jsx(Typography, { style: bodyStyle, children: '•' }), _jsx(Typography, { style: [bodyStyle, { flex: 1 }], children: c })] })),
-                pre: ({ children: c }) => _jsx(Box, { display: "flex", children: c }),
-                code: ({ inline, className, children: c, }) => {
-                    if (inline) {
-                        return _jsx(Code, { children: c });
-                    }
-                    return _jsx(Highlight, { language: extractLanguage(className), children: String(c).replace(/\n$/, '') });
-                },
-                table: ({ children: c }) => (_jsx(Box, { tag: "div", borderWidth: 1, borderColor: borderColor, borderRadius: 8, overflow: "hidden", children: _jsx(Box, { tag: "table", style: { display: 'table', borderCollapse: 'collapse', width: '100%' }, children: c }) })),
-                thead: ({ children: c }) => (_jsx(Box, { tag: "thead", style: { display: 'table-header-group' }, children: c })),
-                tbody: ({ children: c }) => (_jsx(Box, { tag: "tbody", style: { display: 'table-row-group' }, children: c })),
-                tr: ({ children: c }) => (_jsx(Box, { tag: "tr", style: { display: 'table-row' }, children: c })),
-                th: ({ children: c }) => (_jsx(Box, { tag: "th", borderWidth: 1, borderColor: borderColor, pt: 8, pb: 8, pl: 12, pr: 12, style: { display: 'table-cell', textAlign: 'left', backgroundColor: headerBg, ...boldStyle }, children: c })),
-                td: ({ children: c }) => (_jsx(Box, { tag: "td", borderWidth: 1, borderColor: borderColor, pt: 8, pb: 8, pl: 12, pr: 12, style: { display: 'table-cell', ...bodyStyle }, children: c })),
-            }, children: children }) }));
+    // Même bleu que le lien du fil d'Ariane (`Breadcrumbs.styles.ts`), pour que les liens de
+    // contenu Markdown se fondent dans le reste du catalogue. La couleur passe par la prop
+    // dédiée de Typography, pas par `style` : c'est elle qui a le dernier mot sur `color`.
+    // Le soulignement, lui, reste permanent : contrairement au fil d'Ariane, ce lien est noyé
+    // dans un paragraphe, et la règle d'accessibilité `link-in-text-block` (WCAG 1.4.1, usage
+    // de la couleur) exige qu'un lien au milieu d'un bloc de texte se distingue de son
+    // entourage par autre chose que sa seule couleur.
+    const linkColor = color.light.text['default-info'];
+    const linkStyle = { textDecoration: 'underline' };
+    const linkHoverStyle = { textDecoration: 'none' };
+    const components = createMarkdownComponents({
+        bodyStyle,
+        boldStyle,
+        textColor,
+        titres: text.Titres,
+        titleColor: textColor ?? color.light.text['title-grey'],
+        borderColor,
+        headerBg,
+        linkColor,
+        linkStyle,
+        linkHoverStyle,
+    });
+    return (_jsx(Box, { tag: "markdown-description", display: "flex", gap: 8, children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm, replierLesCoupuresDeLigne], components: components, children: children }) }));
 };

package/dist/core/MarkdownDescription/MarkdownDescription.stories.d.ts

@@ -3,7 +3,7 @@ declare const _default: {
     tags: "core"[];
     experimental: false;
     description: string;
-    component: ({ children }: import("./MarkdownDescription").MarkdownDescriptionProps) => import("react").JSX.Element;
+    component: ({ children, taille, color: textColor }: import("./MarkdownDescription").MarkdownDescriptionProps) => import("react").JSX.Element;
     styleFn: () => {};
 };
 export default _default;
@@ -11,5 +11,7 @@ export declare const Default: () => import("react").JSX.Element;
 export declare const SimpleText: () => import("react").JSX.Element;
 export declare const WithCodeBlock: () => import("react").JSX.Element;
 export declare const WithTable: () => import("react").JSX.Element;
+export declare const WithLink: () => import("react").JSX.Element;
+export declare const WithBlockquote: () => import("react").JSX.Element;
 export * as Sources from './MarkdownDescription.stories.sources';
 //# sourceMappingURL=MarkdownDescription.stories.d.ts.map

package/dist/core/MarkdownDescription/MarkdownDescription.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownDescription.stories.d.ts","sourceRoot":"","sources":["../../../src/core/MarkdownDescription/MarkdownDescription.stories.tsx"],"names":[],"mappings":";;;;;;;;AAGA,wBAOkB;AAkClB,eAAO,MAAM,OAAO,mCAAmE,CAAC;AAExF,eAAO,MAAM,UAAU,mCAEtB,CAAC;AAEF,eAAO,MAAM,aAAa,mCAMzB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAIrB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,uCAAuC,CAAC"}
+{"version":3,"file":"MarkdownDescription.stories.d.ts","sourceRoot":"","sources":["../../../src/core/MarkdownDescription/MarkdownDescription.stories.tsx"],"names":[],"mappings":";;;;;;;;AAGA,wBAOkB;AAwClB,eAAO,MAAM,OAAO,mCAAmE,CAAC;AAExF,eAAO,MAAM,UAAU,mCAEtB,CAAC;AAEF,eAAO,MAAM,aAAa,mCAMzB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAIrB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAIpB,CAAC;AAEF,eAAO,MAAM,cAAc,mCAI1B,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,uCAAuC,CAAC"}

package/dist/core/MarkdownDescription/MarkdownDescription.stories.js

@@ -38,6 +38,12 @@ const greet = (name: string): string => {
 |-----------|-----------|-----------|
 | Cellule 1 | Cellule 2 | Cellule 3 |
 | Cellule 4 | Cellule 5 | Cellule 6 |
+
+## Liens et citations
+
+Voir la [documentation Markdown](https://www.markdownguide.org/) pour la syntaxe complète.
+
+> Une citation met en avant un point important, comme cet avertissement.
 `;
 export const Default = () => _jsx(MarkdownDescription, { children: FULL_MARKDOWN });
 export const SimpleText = () => (_jsx(MarkdownDescription, { children: 'Paragraphe simple avec du texte **en gras** et du texte *en italique*.' }));
@@ -49,4 +55,6 @@ npm install @alveole/components
 export const WithTable = () => (_jsx(MarkdownDescription, { children: `| Nom | Type | Description |
 |-----|------|-------------|
 | children | string | Contenu Markdown à afficher |` }));
+export const WithLink = () => (_jsx(MarkdownDescription, { children: 'Voir la [documentation Markdown](https://www.markdownguide.org/) pour la syntaxe complète.' }));
+export const WithBlockquote = () => (_jsx(MarkdownDescription, { children: '> Une citation met en avant un point important, comme cet avertissement.' }));
 export * as Sources from './MarkdownDescription.stories.sources';

package/dist/core/MarkdownDescription/MarkdownDescription.stories.sources.d.ts

@@ -2,11 +2,15 @@ export declare const Default: () => string;
 export declare const SimpleText: () => string;
 export declare const WithCodeBlock: () => string;
 export declare const WithTable: () => string;
+export declare const WithLink: () => string;
+export declare const WithBlockquote: () => string;
 export declare const storySources: {
     readonly Default: () => string;
     readonly SimpleText: () => string;
     readonly WithCodeBlock: () => string;
     readonly WithTable: () => string;
+    readonly WithLink: () => string;
+    readonly WithBlockquote: () => string;
 };
 export type StorySourceName = keyof typeof storySources;
 //# sourceMappingURL=MarkdownDescription.stories.sources.d.ts.map

package/dist/core/MarkdownDescription/MarkdownDescription.stories.sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownDescription.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/MarkdownDescription/MarkdownDescription.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAmG,CAAC;AAExH,eAAO,MAAM,UAAU,cAAyK,CAAC;AAEjM,eAAO,MAAM,aAAa,cAA6N,CAAC;AAExP,eAAO,MAAM,SAAS,cAAiN,CAAC;AAExO,eAAO,MAAM,YAAY;;;;;CAKf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"MarkdownDescription.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/MarkdownDescription/MarkdownDescription.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAmG,CAAC;AAExH,eAAO,MAAM,UAAU,cAAyK,CAAC;AAEjM,eAAO,MAAM,aAAa,cAA6N,CAAC;AAExP,eAAO,MAAM,SAAS,cAAiN,CAAC;AAExO,eAAO,MAAM,QAAQ,cAAqM,CAAC;AAE3N,eAAO,MAAM,cAAc,cAAyL,CAAC;AAErN,eAAO,MAAM,YAAY;;;;;;;CAOf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/core/MarkdownDescription/MarkdownDescription.stories.sources.js

@@ -4,9 +4,13 @@ export const Default = () => "export const Default = () => <MarkdownDescription>
 export const SimpleText = () => "export const SimpleText = () => (\n  <MarkdownDescription>{'Paragraphe simple avec du texte **en gras** et du texte *en italique*.'}</MarkdownDescription>\n);";
 export const WithCodeBlock = () => "export const WithCodeBlock = () => (\n  <MarkdownDescription>{`Utilisez \\`npm install\\` pour installer les dépendances.\n\n\\`\\`\\`bash\nnpm install @alveole/components\n\\`\\`\\``}</MarkdownDescription>\n);";
 export const WithTable = () => "export const WithTable = () => (\n  <MarkdownDescription>{`| Nom | Type | Description |\n|-----|------|-------------|\n| children | string | Contenu Markdown à afficher |`}</MarkdownDescription>\n);";
+export const WithLink = () => "export const WithLink = () => (\n  <MarkdownDescription>\n    {'Voir la [documentation Markdown](https://www.markdownguide.org/) pour la syntaxe complète.'}\n  </MarkdownDescription>\n);";
+export const WithBlockquote = () => "export const WithBlockquote = () => (\n  <MarkdownDescription>\n    {'> Une citation met en avant un point important, comme cet avertissement.'}\n  </MarkdownDescription>\n);";
 export const storySources = {
     Default,
     SimpleText,
     WithCodeBlock,
     WithTable,
+    WithLink,
+    WithBlockquote,
 };

package/dist/core/MarkdownDescription/markdownComponents.d.ts

@@ -0,0 +1,43 @@
+import { Theme } from '@alveole/theme';
+import React from 'react';
+import type { Components } from 'react-markdown';
+import { TextStyle as RNTextStyle } from 'react-native';
+import { HighlightProps } from '../Highlight';
+export declare const extractLanguage: (className?: string) => HighlightProps["language"];
+type AvecEnfants = {
+    children?: React.ReactNode;
+};
+type TextStyle = Pick<RNTextStyle, 'fontSize' | 'lineHeight' | 'fontWeight' | 'fontFamily' | 'letterSpacing'>;
+type MarkdownComponentsStyles = {
+    bodyStyle: TextStyle;
+    boldStyle: TextStyle;
+    /** Couleur du texte courant, hors titres et liens. Vide garde le gris par defaut. */
+    textColor?: string;
+    titres: Theme['text']['Titres'];
+    /** Couleur des titres : `textColor` s'il est fourni, sinon `title-grey`. */
+    titleColor: string;
+    borderColor: string;
+    headerBg: string;
+    linkColor: string;
+    linkStyle: {
+        textDecoration: 'underline';
+    };
+    linkHoverStyle: {
+        textDecoration: 'none';
+    };
+};
+type TextComponentStyles = Pick<MarkdownComponentsStyles, 'bodyStyle' | 'boldStyle' | 'textColor'>;
+export declare const createTextComponents: ({ bodyStyle, boldStyle, textColor }: TextComponentStyles) => {
+    p: ({ children: c }: AvecEnfants) => React.JSX.Element;
+    strong: ({ children: c }: AvecEnfants) => React.JSX.Element;
+    em: ({ children: c }: AvecEnfants) => React.JSX.Element;
+};
+export declare const createHeadingComponents: (titres: Theme["text"]["Titres"], titleColor: string) => {
+    h1: ({ children: c }: AvecEnfants) => React.JSX.Element;
+    h2: ({ children: c }: AvecEnfants) => React.JSX.Element;
+    h3: ({ children: c }: AvecEnfants) => React.JSX.Element;
+    h4: ({ children: c }: AvecEnfants) => React.JSX.Element;
+};
+export declare const createMarkdownComponents: (styles: MarkdownComponentsStyles) => Components;
+export {};
+//# sourceMappingURL=markdownComponents.d.ts.map

package/dist/core/MarkdownDescription/markdownComponents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdownComponents.d.ts","sourceRoot":"","sources":["../../../src/core/MarkdownDescription/markdownComponents.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAC;AAGxD,OAAO,EAAa,cAAc,EAAE,MAAM,cAAc,CAAC;AAazD,eAAO,MAAM,eAAe,GAAI,YAAY,MAAM,KAAG,cAAc,CAAC,UAAU,CAG7E,CAAC;AAEF,KAAK,WAAW,GAAG;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC;AAClD,KAAK,SAAS,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,YAAY,GAAG,YAAY,GAAG,YAAY,GAAG,eAAe,CAAC,CAAC;AAE9G,KAAK,wBAAwB,GAAG;IAC9B,SAAS,EAAE,SAAS,CAAC;IACrB,SAAS,EAAE,SAAS,CAAC;IACrB,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC;IAChC,4EAA4E;IAC5E,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE;QAAE,cAAc,EAAE,WAAW,CAAA;KAAE,CAAC;IAC3C,cAAc,EAAE;QAAE,cAAc,EAAE,MAAM,CAAA;KAAE,CAAC;CAC5C,CAAC;AAEF,KAAK,mBAAmB,GAAG,IAAI,CAAC,wBAAwB,EAAE,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC,CAAC;AAEnG,eAAO,MAAM,oBAAoB,GAAI,qCAAqC,mBAAmB;yBACtE,WAAW;8BAKN,WAAW;0BAKf,WAAW;CAKjC,CAAC;AAEH,eAAO,MAAM,uBAAuB,GAAI,QAAQ,KAAK,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,EAAE,YAAY,MAAM;0BACnE,WAAW;0BAKX,WAAW;0BAKX,WAAW;0BAKX,WAAW;CAKjC,CAAC;AAgIH,eAAO,MAAM,wBAAwB,GAAI,QAAQ,wBAAwB,KAAG,UAQ1E,CAAC"}