@alveole/components 1.10.0 → 2.0.0-alpha.1

package/dist/core/MarkdownDescription/markdownComponents.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FOCUS_ATTRIBUTE } from '@alveole/theme';
+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',
+];
+export const extractLanguage = (className) => {
+    const match = /language-(\w+)/.exec(className ?? '');
+    return HIGHLIGHT_LANGUAGES.find(l => l === match?.[1]) ?? 'plaintext';
+};
+export const createTextComponents = ({ bodyStyle, boldStyle, textColor }) => ({
+    p: ({ children: c }) => (_jsx(Typography, { style: bodyStyle, color: textColor, children: c })),
+    strong: ({ children: c }) => (_jsx(Typography, { style: boldStyle, color: textColor, children: c })),
+    em: ({ children: c }) => (_jsx(Typography, { style: [bodyStyle, { fontStyle: 'italic' }], color: textColor, children: c })),
+});
+export const createHeadingComponents = (titres, titleColor) => ({
+    h1: ({ children: c }) => (_jsx(Typography, { style: titres['H3 - MD'], color: titleColor, children: c })),
+    h2: ({ children: c }) => (_jsx(Typography, { style: titres['H4 - SM'], color: titleColor, children: c })),
+    h3: ({ children: c }) => (_jsx(Typography, { style: titres['H5 - XS'], color: titleColor, children: c })),
+    h4: ({ children: c }) => (_jsx(Typography, { style: titres['H6 - XXS'], color: titleColor, children: c })),
+});
+const createListComponents = (bodyStyle) => ({
+    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 })] })),
+});
+const createLinkComponents = ({ linkColor, linkStyle, linkHoverStyle }) => ({
+    a: ({ href, children: c }) => (_jsx(Typography, { tag: "a", href: href, color: linkColor, style: linkStyle, hoverStyle: linkHoverStyle, [FOCUS_ATTRIBUTE]: 'ring', children: c })),
+});
+const createBlockComponents = (borderColor) => ({
+    pre: ({ children: c }) => _jsx(Box, { display: "flex", children: c }),
+    // `tag="blockquote"` pose un vrai `<blockquote>` DOM, qui garde la marge par
+    // défaut du user-agent (`margin: 1em 40px`) tant qu'on ne la remet pas à zéro.
+    blockquote: ({ children: c }) => (_jsx(Box, { tag: "blockquote", display: "flex", pl: 12, style: { margin: 0, borderLeftWidth: 2, borderLeftColor: borderColor }, children: c })),
+});
+const createCodeComponents = () => ({
+    // react-markdown ne passe plus de prop `inline` depuis la v9, et un bloc sans
+    // langage ne porte pas non plus de classe `language-*` : la classe seule ne
+    // départage donc pas un bloc de code inline. mdast-util-to-hast, lui, ajoute
+    // toujours un `\n` de fin à un bloc (avec ou sans langage) et n'en met jamais à
+    // de l'inline, où les retours à la ligne sont remplacés par des espaces : c'est
+    // cette marque qui distingue fiablement les deux.
+    code: ({ className, children: c }) => {
+        if (!String(c).endsWith('\n'))
+            return _jsx(Code, { children: c });
+        return _jsx(Highlight, { language: extractLanguage(className), children: String(c).replace(/\n$/, '') });
+    },
+});
+const createTableComponents = ({ bodyStyle, boldStyle, borderColor, headerBg }) => ({
+    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 })),
+    // Le contenu d'une cellule passe par `Typography` et jamais en enfant direct de
+    // `Box` : une vue Tamagui refuse un nœud de texte nu, et son message d'erreur
+    // sérialise les props de la vue, dont le contexte du thème, circulaire, ce qui
+    // remplace l'avertissement par un « Converting circular structure to JSON » qui
+    // fait planter le rendu.
+    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 }, children: _jsx(Typography, { style: 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' }, children: _jsx(Typography, { style: bodyStyle, children: c }) })),
+});
+export const createMarkdownComponents = (styles) => ({
+    ...createTextComponents(styles),
+    ...createHeadingComponents(styles.titres, styles.titleColor),
+    ...createListComponents(styles.bodyStyle),
+    ...createLinkComponents(styles),
+    ...createBlockComponents(styles.borderColor),
+    ...createCodeComponents(),
+    ...createTableComponents(styles),
+});

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

@@ -0,0 +1,21 @@
+type NoeudMarkdown = {
+    type: string;
+    value?: string;
+    children?: NoeudMarkdown[];
+};
+/**
+ * Rend aux coupures de ligne le sens qu'elles ont en Markdown : une phrase coupee sur deux
+ * lignes source reste une seule phrase.
+ *
+ * Sur le web, le texte d'une description finit dans un `Text` de react-native-web, qui preserve
+ * `\n` la ou HTML l'aurait replie. Une description ecrite dans un JSDoc - donc coupee a la
+ * largeur du fichier - s'affichait coupee aux memes endroits a l'ecran, dans toutes les fiches
+ * du catalogue.
+ *
+ * Seuls les noeuds `text` sont touches : le contenu d'un bloc de code vit dans un noeud `code`
+ * ou `inlineCode`, hors d'atteinte par construction, et une vraie coupure demandee par l'auteur
+ * (deux espaces en fin de ligne) devient un noeud `break`, qui n'est pas du texte non plus.
+ */
+export declare const replierLesCoupuresDeLigne: () => (noeud: NoeudMarkdown) => void;
+export {};
+//# sourceMappingURL=replierLesCoupuresDeLigne.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"replierLesCoupuresDeLigne.d.ts","sourceRoot":"","sources":["../../../src/core/MarkdownDescription/replierLesCoupuresDeLigne.ts"],"names":[],"mappings":"AAAA,KAAK,aAAa,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAA;CAAE,CAAC;AAOlF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,yBAAyB,gBAlBd,aAAa,KAAG,IAkBc,CAAC"}

package/dist/core/MarkdownDescription/replierLesCoupuresDeLigne.js

@@ -0,0 +1,19 @@
+const replier = (noeud) => {
+    if (noeud.type === 'text' && noeud.value)
+        noeud.value = noeud.value.replace(/\n/g, ' ');
+    noeud.children?.forEach(replier);
+};
+/**
+ * Rend aux coupures de ligne le sens qu'elles ont en Markdown : une phrase coupee sur deux
+ * lignes source reste une seule phrase.
+ *
+ * Sur le web, le texte d'une description finit dans un `Text` de react-native-web, qui preserve
+ * `\n` la ou HTML l'aurait replie. Une description ecrite dans un JSDoc - donc coupee a la
+ * largeur du fichier - s'affichait coupee aux memes endroits a l'ecran, dans toutes les fiches
+ * du catalogue.
+ *
+ * Seuls les noeuds `text` sont touches : le contenu d'un bloc de code vit dans un noeud `code`
+ * ou `inlineCode`, hors d'atteinte par construction, et une vraie coupure demandee par l'auteur
+ * (deux espaces en fin de ligne) devient un noeud `break`, qui n'est pas du texte non plus.
+ */
+export const replierLesCoupuresDeLigne = () => replier;

package/dist/core/Metabase/Metabase.props.d.ts

@@ -1,10 +1,14 @@
 import { BoxProps } from '../Box';
-export type MetabaseProps = {
-    source: string;
+type MetabaseCommonProps = {
     style?: BoxProps['style'];
-} | {
+    /** Nom accessible du cadre. @default 'Tableau de bord Metabase' */
+    title?: string;
+};
+export type MetabaseProps = (MetabaseCommonProps & {
+    source: string;
+}) | (MetabaseCommonProps & {
     token: string;
     instanceUrl: string;
-    style?: BoxProps['style'];
-};
+});
+export {};
 //# sourceMappingURL=Metabase.props.d.ts.map

package/dist/core/Metabase/Metabase.props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Metabase.props.d.ts","sourceRoot":"","sources":["../../../src/core/Metabase/Metabase.props.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAElC,MAAM,MAAM,aAAa,GACrB;IACE,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;CAC3B,GACD;IACE,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;CAC3B,CAAC"}
+{"version":3,"file":"Metabase.props.d.ts","sourceRoot":"","sources":["../../../src/core/Metabase/Metabase.props.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAKlC,KAAK,mBAAmB,GAAG;IACzB,KAAK,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC1B,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,aAAa,GACvB,CAAC,mBAAmB,GAAG;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,GAAG,CAAC,mBAAmB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC"}

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

@@ -10,7 +10,7 @@ declare const _default: {
             width: "100%";
             flex: number;
             backgroundColor: "#ffffff";
-            borderRadius: number;
+            borderRadius: import("@alveole/theme").Radius;
             boxSizing: "border-box";
         };
     };

package/dist/core/Metabase/Metabase.styles.d.ts

@@ -4,7 +4,7 @@ export declare const useStyles: () => {
         width: "100%";
         flex: number;
         backgroundColor: "#ffffff";
-        borderRadius: number;
+        borderRadius: import("@alveole/theme").Radius;
         boxSizing: "border-box";
     };
 };

package/dist/core/Metabase/Metabase.styles.js

@@ -1,12 +1,12 @@
 import { makeStyles } from '@alveole/theme';
 import { Platform } from 'react-native';
-export const useStyles = makeStyles(() => ({
+export const useStyles = makeStyles(({ radius }) => ({
     metabase: {
         height: Platform.OS === 'web' ? '100%' : 600,
         width: '100%',
         flex: 1,
         backgroundColor: '#ffffff',
-        borderRadius: 10,
+        borderRadius: radius('lg'),
         boxSizing: 'border-box',
     },
 }));

package/dist/core/Metabase/Metabase.web.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { MetabaseProps } from './Metabase.props';
-declare global {
+declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
             'metabase-dashboard': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {

package/dist/core/Metabase/Metabase.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Metabase.web.d.ts","sourceRoot":"","sources":["../../../src/core/Metabase/Metabase.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,oBAAoB,EAAE,KAAK,CAAC,iBAAiB,CAC3C,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG;gBAClC,KAAK,CAAC,EAAE,MAAM,CAAC;gBACf,YAAY,CAAC,EAAE,MAAM,CAAC;gBACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;aAC3B,EACD,WAAW,CACZ,CAAC;SACH;KACF;CACF;AAED,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,6BAoE5C,CAAC"}
+{"version":3,"file":"Metabase.web.d.ts","sourceRoot":"","sources":["../../../src/core/Metabase/Metabase.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAQjD,OAAO,QAAQ,OAAO,CAAC;IACrB,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,oBAAoB,EAAE,KAAK,CAAC,iBAAiB,CAC3C,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG;gBAClC,KAAK,CAAC,EAAE,MAAM,CAAC;gBACf,YAAY,CAAC,EAAE,MAAM,CAAC;gBACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;aAC3B,EACD,WAAW,CACZ,CAAC;SACH;KACF;CACF;AAED,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,6BAgC5C,CAAC"}

package/dist/core/Metabase/Metabase.web.js

@@ -1,46 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
 import { useStyles } from './Metabase.styles';
+import { useMetabaseEmbed } from './useMetabaseEmbed';
 export const Metabase = (props) => {
     const styles = useStyles();
-    const scriptLoadedRef = useRef(false);
-    const configLoadedRef = useRef(false);
+    const title = props.title ?? 'Tableau de bord Metabase';
     const isSourceFormat = 'source' in props && props.source;
     const token = 'token' in props ? props.token : undefined;
     const instanceUrl = 'instanceUrl' in props ? props.instanceUrl : undefined;
-    useEffect(() => {
-        if (!scriptLoadedRef.current && typeof window !== 'undefined' && instanceUrl) {
-            const existingScript = document.querySelector(`script[src="${instanceUrl}/app/embed.js"]`);
-            if (existingScript) {
-                scriptLoadedRef.current = true;
-                return;
-            }
-            const script = document.createElement('script');
-            script.src = `${instanceUrl}/app/embed.js`;
-            script.defer = true;
-            script.onload = () => {
-                scriptLoadedRef.current = true;
-            };
-            document.head.appendChild(script);
-        }
-    }, [instanceUrl]);
-    useEffect(() => {
-        if (!configLoadedRef.current && typeof window !== 'undefined' && instanceUrl) {
-            window.defineMetabaseConfig = (config) => {
-                window.metabaseConfig = config;
-            };
-            window.defineMetabaseConfig({
-                theme: {
-                    preset: 'light',
-                },
-                isGuest: true,
-                instanceUrl: instanceUrl,
-            });
-            configLoadedRef.current = true;
-        }
-    }, [instanceUrl]);
+    useMetabaseEmbed(instanceUrl);
     if (isSourceFormat) {
-        return _jsx("iframe", { src: props.source, style: styles.metabase, frameBorder: "0" });
+        return _jsx("iframe", { src: props.source, title: title, style: styles.metabase, frameBorder: "0" });
     }
     if (!token || !instanceUrl) {
         return null;

package/dist/core/Metabase/useMetabaseEmbed.d.ts

@@ -0,0 +1,16 @@
+type MetabaseConfig = {
+    theme: {
+        preset: 'light';
+    };
+    isGuest: boolean;
+    instanceUrl: string;
+};
+declare global {
+    interface Window {
+        metabaseConfig?: MetabaseConfig;
+        defineMetabaseConfig?: (config: MetabaseConfig) => void;
+    }
+}
+export declare const useMetabaseEmbed: (instanceUrl?: string) => void;
+export {};
+//# sourceMappingURL=useMetabaseEmbed.d.ts.map

package/dist/core/Metabase/useMetabaseEmbed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMetabaseEmbed.d.ts","sourceRoot":"","sources":["../../../src/core/Metabase/useMetabaseEmbed.ts"],"names":[],"mappings":"AAEA,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE;QAAE,MAAM,EAAE,OAAO,CAAA;KAAE,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,cAAc,CAAC,EAAE,cAAc,CAAC;QAChC,oBAAoB,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;KACzD;CACF;AAMD,eAAO,MAAM,gBAAgB,GAAI,cAAc,MAAM,SAwCpD,CAAC"}

package/dist/core/Metabase/useMetabaseEmbed.js

@@ -0,0 +1,41 @@
+import { useEffect, useRef } from 'react';
+// Le web component `metabase-dashboard` est fourni par le script `embed.js` de l'instance et se
+// configure via `window.metabaseConfig`. Charger le script et poser la config sont deux effets
+// distincts, montés une fois par instance : les isoler du composant garde ce dernier à son seul
+// rôle de rendu.
+export const useMetabaseEmbed = (instanceUrl) => {
+    const scriptLoadedRef = useRef(false);
+    const configLoadedRef = useRef(false);
+    useEffect(() => {
+        if (!scriptLoadedRef.current && typeof window !== 'undefined' && instanceUrl) {
+            const existingScript = document.querySelector(`script[src="${instanceUrl}/app/embed.js"]`);
+            if (existingScript) {
+                scriptLoadedRef.current = true;
+                return;
+            }
+            const script = document.createElement('script');
+            script.src = `${instanceUrl}/app/embed.js`;
+            script.defer = true;
+            script.onload = () => {
+                scriptLoadedRef.current = true;
+            };
+            document.head.appendChild(script);
+        }
+    }, [instanceUrl]);
+    useEffect(() => {
+        if (!configLoadedRef.current && typeof window !== 'undefined' && instanceUrl) {
+            const defineMetabaseConfig = (config) => {
+                window.metabaseConfig = config;
+            };
+            window.defineMetabaseConfig = defineMetabaseConfig;
+            defineMetabaseConfig({
+                theme: {
+                    preset: 'light',
+                },
+                isGuest: true,
+                instanceUrl,
+            });
+            configLoadedRef.current = true;
+        }
+    }, [instanceUrl]);
+};

package/dist/core/Page/Page.d.ts

@@ -1,33 +1,4 @@
 import React from 'react';
-import type { StatusBarStyle } from 'react-native';
-import { BoxProps } from '../../core';
-import { SidebarController } from '../../ui/Sidebar';
-export type PageStatusBarProps = {
-    barStyle?: StatusBarStyle;
-    backgroundColor?: string;
-};
-export type MetaTagProps = React.ComponentPropsWithoutRef<'meta'>;
-export type PageProps = BoxProps & {
-    title: string;
-    description?: string;
-    defaultBackgroundColor?: string;
-    og?: {
-        title?: string;
-        description?: string;
-    };
-    meta?: MetaTagProps[];
-    scrollable?: boolean | 'mobile-only' | 'desktop-only';
-    sidebar?: React.ReactNode;
-    beforeContent?: React.ReactNode;
-    footerContent?: React.ReactNode;
-    sideBarController?: SidebarController;
-    statusBar?: PageStatusBarProps;
-    renderToolbar?: (options?: {
-        isScrolled: boolean;
-    }) => React.ReactNode;
-    onScrollToBottom?: () => void;
-    onEndReachedThreshold?: number;
-    onScrollChange?: (scrollY: number) => void;
-};
+import type { PageProps } from './Page.types';
 export declare const Page: (props: PageProps) => React.JSX.Element;
 //# sourceMappingURL=Page.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../../src/core/Page/Page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAIrD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,CAAC;AAElE,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,EAAE,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,IAAI,CAAC,EAAE,YAAY,EAAE,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,GAAG,aAAa,GAAG,cAAc,CAAC;IACtD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAE/B,aAAa,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,UAAU,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAEvE,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,sBAOpC,CAAC"}
+{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../../src/core/Page/Page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,sBAOpC,CAAC"}

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

@@ -4,7 +4,7 @@ declare const _default: {
     experimental: false;
     description: string;
     shortDescription: string;
-    component: (props: import("./Page").PageProps) => import("react").JSX.Element;
+    component: (props: import("./Page.types").PageProps) => import("react").JSX.Element;
     styleFn: () => string;
 };
 export default _default;
@@ -32,6 +32,14 @@ export declare const WithMultipleMeta: () => import("react").JSX.Element;
  * ```
  */
 export declare const WithPageMetaProvider: () => null;
+/**
+ * Rend la page scrollable via l'attribut `scrollable`. Accepte aussi `mobile-only` ou `desktop-only`
+ * pour limiter le scroll à une plateforme.
+ *
+ * Ci-dessous, 4 Box de 300px de haut chacune : le contenu dépasse la hauteur de l'écran, ce qui
+ * démontre que le scroll se fait bien au sein de la page.
+ */
+export declare const WithScrollable: () => import("react").JSX.Element;
 /**
  * Intégration avec un contrôleur de sidebar via `useSidebar()`.
  *

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

@@ -1 +1 @@
-{"version":3,"file":"Page.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Page/Page.stories.tsx"],"names":[],"mappings":";;;;;;;;;AAIA,wBAUkB;AAElB,eAAO,MAAM,OAAO,mCAInB,CAAC;AAEF,eAAO,MAAM,MAAM,mCAIlB,CAAC;AAEF,eAAO,MAAM,cAAc,mCAI1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAY5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,oBAAoB,YAAa,CAAC;AAE/C;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,WAAW,YAAa,CAAC;AAEtC,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"Page.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Page/Page.stories.tsx"],"names":[],"mappings":";;;;;;;;;AAIA,wBAUkB;AAElB,eAAO,MAAM,OAAO,mCAInB,CAAC;AAEF,eAAO,MAAM,MAAM,mCAIlB,CAAC;AAEF,eAAO,MAAM,cAAc,mCAI1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAY5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,oBAAoB,YAAa,CAAC;AAE/C;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,mCAI1B,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,WAAW,YAAa,CAAC;AAEtC,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}

package/dist/core/Page/Page.stories.js

@@ -38,6 +38,14 @@ export const WithMultipleMeta = () => (_jsx(Page, { title: "Page compl\u00E8te",
  * ```
  */
 export const WithPageMetaProvider = () => null;
+/**
+ * Rend la page scrollable via l'attribut `scrollable`. Accepte aussi `mobile-only` ou `desktop-only`
+ * pour limiter le scroll à une plateforme.
+ *
+ * Ci-dessous, 4 Box de 300px de haut chacune : le contenu dépasse la hauteur de l'écran, ce qui
+ * démontre que le scroll se fait bien au sein de la page.
+ */
+export const WithScrollable = () => (_jsx(Page, { title: "Page scrollable", scrollable: true, children: _jsx(Typography, { children: "Page avec du scroll." }) }));
 /**
  * Intégration avec un contrôleur de sidebar via `useSidebar()`.
  *

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

@@ -3,6 +3,7 @@ export declare const WithOg: () => string;
 export declare const WithMetaRobots: () => string;
 export declare const WithMultipleMeta: () => string;
 export declare const WithPageMetaProvider: () => string;
+export declare const WithScrollable: () => string;
 export declare const WithSidebar: () => string;
 export declare const storySources: {
     readonly Default: () => string;
@@ -10,6 +11,7 @@ export declare const storySources: {
     readonly WithMetaRobots: () => string;
     readonly WithMultipleMeta: () => string;
     readonly WithPageMetaProvider: () => string;
+    readonly WithScrollable: () => string;
     readonly WithSidebar: () => string;
 };
 export type StorySourceName = keyof typeof storySources;

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

@@ -1 +1 @@
-{"version":3,"file":"Page.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Page/Page.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAmK,CAAC;AAExL,eAAO,MAAM,MAAM,cAA2O,CAAC;AAE/P,eAAO,MAAM,cAAc,cAAoP,CAAC;AAEhR,eAAO,MAAM,gBAAgB,cAAsa,CAAC;AAEpc,eAAO,MAAM,oBAAoB,cAA0D,CAAC;AAE5F,eAAO,MAAM,WAAW,cAAiD,CAAC;AAE1E,eAAO,MAAM,YAAY;;;;;;;CAOf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAGtE,CAAC"}
+{"version":3,"file":"Page.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Page/Page.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAmK,CAAC;AAExL,eAAO,MAAM,MAAM,cAA2O,CAAC;AAE/P,eAAO,MAAM,cAAc,cAAoP,CAAC;AAEhR,eAAO,MAAM,gBAAgB,cAAsa,CAAC;AAEpc,eAAO,MAAM,oBAAoB,cAA0D,CAAC;AAE5F,eAAO,MAAM,cAAc,cAAiK,CAAC;AAE7L,eAAO,MAAM,WAAW,cAAiD,CAAC;AAE1E,eAAO,MAAM,YAAY;;;;;;;;CAQf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAItE,CAAC"}

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

@@ -5,6 +5,7 @@ export const WithOg = () => "export const WithOg = () => (\n  <Page title=\"Mon
 export const WithMetaRobots = () => "export const WithMetaRobots = () => (\n  <Page title=\"Page privée\" meta={[{ name: 'robots', content: 'noindex, nofollow' }]}>\n    <Typography>Cette page ne sera pas indexée par les moteurs de recherche.</Typography>\n  </Page>\n);";
 export const WithMultipleMeta = () => "export const WithMultipleMeta = () => (\n  <Page\n    title=\"Page complète\"\n    description=\"Avec plusieurs balises meta\"\n    meta={[\n      { name: 'robots', content: 'noindex, nofollow' },\n      { name: 'author', content: 'Alvéole' },\n      { httpEquiv: 'X-UA-Compatible', content: 'IE=edge' },\n    ]}\n  >\n    <Typography>Page avec plusieurs balises meta personnalisées.</Typography>\n  </Page>\n);";
 export const WithPageMetaProvider = () => "export const WithPageMetaProvider = () => null;";
+export const WithScrollable = () => "export const WithScrollable = () => (\n  <Page title=\"Page scrollable\" scrollable>\n    <Typography>Page avec du scroll.</Typography>\n  </Page>\n);";
 export const WithSidebar = () => "export const WithSidebar = () => null;";
 export const storySources = {
     Default,
@@ -12,9 +13,11 @@ export const storySources = {
     WithMetaRobots,
     WithMultipleMeta,
     WithPageMetaProvider,
+    WithScrollable,
     WithSidebar,
 };
 export const storyDescriptions = {
     WithPageMetaProvider: "Configure des meta globales pour toutes les pages via `PageMetaProvider` dans `app/_layout.tsx`.\nLes meta du provider sont injectées en premier ; la prop `meta` de chaque `<Page>` les complète ou les écrase.\n\n```tsx\nimport { PageMetaProvider } from '@alveole/components';\n\nexport default function RootLayout() {\n  return (\n    <PageMetaProvider meta={[{ name: 'robots', content: 'noindex, nofollow' }]}>\n      <Stack />\n    </PageMetaProvider>\n  );\n}\n\n// Une page peut surcharger ou ajouter des meta sans répéter le noindex :\n<Page title=\"Ma page\" meta={[{ name: 'author', content: 'Alvéole' }]} />\n```",
+    WithScrollable: "Rend la page scrollable via l'attribut `scrollable`. Accepte aussi `mobile-only` ou `desktop-only`\npour limiter le scroll à une plateforme.\n\nCi-dessous, 4 Box de 300px de haut chacune : le contenu dépasse la hauteur de l'écran, ce qui\ndémontre que le scroll se fait bien au sein de la page.",
     WithSidebar: "Intégration avec un contrôleur de sidebar via `useSidebar()`.\n\n```tsx\nconst sidebarController = useSidebar();\nreturn (\n  <Page\n    sideBarController={sidebarController}\n    sidebar={<AdminNavigation sidebarController={sidebarController} />}\n    title=\"Mon titre\"\n  >\n    ...\n  </Page>\n);\n```",
 };

package/dist/core/Page/Page.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const useStyles: () => {
-    gradientBackground: {
+    pageBackground: {
         flex: number;
         width: "100%";
     };

package/dist/core/Page/Page.styles.js

@@ -1,6 +1,6 @@
 import { makeStyles } from '@alveole/theme';
 export const useStyles = makeStyles(() => ({
-    gradientBackground: {
+    pageBackground: {
         flex: 1,
         width: '100%',
     },

package/dist/core/Page/Page.types.d.ts

@@ -0,0 +1,32 @@
+import type React from 'react';
+import type { StatusBarStyle } from 'react-native';
+import type { SidebarController } from '../../ui/Sidebar';
+import type { BoxProps } from '../Box';
+export type PageStatusBarProps = {
+    barStyle?: StatusBarStyle;
+    backgroundColor?: string;
+};
+export type MetaTagProps = React.ComponentPropsWithoutRef<'meta'>;
+export type PageProps = BoxProps & {
+    title: string;
+    description?: string;
+    defaultBackgroundColor?: string;
+    og?: {
+        title?: string;
+        description?: string;
+    };
+    meta?: MetaTagProps[];
+    scrollable?: boolean | 'mobile-only' | 'desktop-only';
+    sidebar?: React.ReactNode;
+    beforeContent?: React.ReactNode;
+    footerContent?: React.ReactNode;
+    sideBarController?: SidebarController;
+    statusBar?: PageStatusBarProps;
+    renderToolbar?: (options?: {
+        isScrolled: boolean;
+    }) => React.ReactNode;
+    onScrollToBottom?: () => void;
+    onEndReachedThreshold?: number;
+    onScrollChange?: (scrollY: number) => void;
+};
+//# sourceMappingURL=Page.types.d.ts.map

package/dist/core/Page/Page.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Page.types.d.ts","sourceRoot":"","sources":["../../../src/core/Page/Page.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAEvC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,CAAC;AAElE,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,EAAE,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,IAAI,CAAC,EAAE,YAAY,EAAE,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,GAAG,aAAa,GAAG,cAAc,CAAC;IACtD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAE/B,aAAa,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,UAAU,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAEvE,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C,CAAC"}

package/dist/core/Page/Page.types.js

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

package/dist/core/Page/PageBackground.d.ts

@@ -2,5 +2,11 @@ import React from 'react';
 export type PageBackgroundProps = {
     children: React.ReactNode;
 };
+/**
+ * Le fond d'une page est une surface de la palette, unie. Un dégradé ferait varier la
+ * couleur selon la hauteur : aucun contenu posé dessus ne pourrait alors s'accorder à une
+ * valeur du thème, et deux éléments identiques n'auraient pas le même fond selon l'endroit
+ * où ils tombent dans la page.
+ */
 export declare const PageBackground: ({ children }: PageBackgroundProps) => React.JSX.Element;
 //# sourceMappingURL=PageBackground.d.ts.map

package/dist/core/Page/PageBackground.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageBackground.d.ts","sourceRoot":"","sources":["../../../src/core/Page/PageBackground.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,cAAc,mBAAmB,sBAa/D,CAAC"}
+{"version":3,"file":"PageBackground.d.ts","sourceRoot":"","sources":["../../../src/core/Page/PageBackground.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GAAI,cAAc,mBAAmB,sBAO/D,CAAC"}

package/dist/core/Page/PageBackground.js

@@ -1,8 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Colors } from '@alveole/theme';
-import { LinearGradient } from 'expo-linear-gradient';
+import { useTheme } from '@alveole/theme';
+import { Box } from '../Box';
 import { useStyles } from './Page.styles';
+/**
+ * Le fond d'une page est une surface de la palette, unie. Un dégradé ferait varier la
+ * couleur selon la hauteur : aucun contenu posé dessus ne pourrait alors s'accorder à une
+ * valeur du thème, et deux éléments identiques n'auraient pas le même fond selon l'endroit
+ * où ils tombent dans la page.
+ */
 export const PageBackground = ({ children }) => {
     const styles = useStyles();
-    return (_jsx(LinearGradient, { colors: [Colors.Neutre['1000'], Colors.Neutre['975']], start: { x: 0.5, y: 0 }, end: { x: 0.5, y: 1 }, style: styles.gradientBackground, children: children }));
+    const { color } = useTheme();
+    return (_jsx(Box, { style: { ...styles.pageBackground, backgroundColor: color.light.background['default-grey'] }, children: children }));
 };

package/dist/core/Page/PageContent.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PageProps } from './Page';
+import { PageProps } from './Page.types';
 export type PageContentProps = PageProps;
 export declare const PageContent: (props: PageContentProps) => React.JSX.Element;
 //# sourceMappingURL=PageContent.d.ts.map

package/dist/core/Page/PageContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageContent.d.ts","sourceRoot":"","sources":["../../../src/core/Page/PageContent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,SAAS,EAAsB,MAAM,QAAQ,CAAC;AAMvD,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC;AAazC,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,sBAwFlD,CAAC"}
+{"version":3,"file":"PageContent.d.ts","sourceRoot":"","sources":["../../../src/core/Page/PageContent.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMzC,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC;AAEzC,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,sBAiElD,CAAC"}

package/dist/core/Page/PageContent.js

@@ -1,50 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTheme } from '@alveole/theme';
-import { useFocusEffect } from 'expo-router';
-import * as SystemUI from 'expo-system-ui';
 import React from 'react';
-import { AppState, Platform, StatusBar } from 'react-native';
+import { Platform } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Box } from '../../core/Box';
 import { useStyles } from './Page.styles';
 import { PageBackground } from './PageBackground';
 import { PageContentDefault } from './PageContentDefault';
 import { PageContentScrollable } from './PageContentScrollable';
-const DEFAULT_STATUS_BAR = {
-    barStyle: 'dark-content',
-    backgroundColor: 'white',
-};
-const applyStatusBar = (statusBar) => {
-    StatusBar.setBarStyle(statusBar.barStyle);
-    if (Platform.OS === 'android')
-        StatusBar.setBackgroundColor(statusBar.backgroundColor);
-    void SystemUI.setBackgroundColorAsync(statusBar.backgroundColor);
-};
+import { usePageStatusBar } from './usePageStatusBar';
 export const PageContent = (props) => {
     const { scrollable = false, renderToolbar, sidebar, sideBarController, onScrollChange, statusBar } = props;
     const { isVariant } = useTheme();
     const styles = useStyles();
     const { top } = useSafeAreaInsets();
     const mobileOrTablet = isVariant('mobile') || isVariant('tablet');
-    const resolvedStatusBar = React.useMemo(() => ({
-        barStyle: statusBar?.barStyle ?? DEFAULT_STATUS_BAR.barStyle,
-        backgroundColor: statusBar?.backgroundColor ?? DEFAULT_STATUS_BAR.backgroundColor,
-    }), [statusBar?.backgroundColor, statusBar?.barStyle]);
+    usePageStatusBar(statusBar);
     const [isScrolled, setIsScrolled] = React.useState(false);
-    useFocusEffect(React.useCallback(() => {
-        applyStatusBar(resolvedStatusBar);
-        return () => applyStatusBar(DEFAULT_STATUS_BAR);
-    }, [resolvedStatusBar]));
-    React.useEffect(() => {
-        const subscription = AppState.addEventListener('change', nextAppState => {
-            if (nextAppState !== 'active')
-                return;
-            applyStatusBar(resolvedStatusBar);
-        });
-        return () => {
-            subscription.remove();
-        };
-    }, [resolvedStatusBar]);
     const handleInternalScrollChange = React.useCallback((scrollY) => {
         const scrolled = scrollY > 0;
         setIsScrolled(scrolled);

package/dist/core/Page/PageContentDefault.d.ts

@@ -1,4 +1,4 @@
-import type { PageProps } from './Page';
+import type { PageProps } from './Page.types';
 export type PageContentDefaultProps = PageProps;
 export declare const PageContentDefault: (props: PageContentDefaultProps) => import("react").JSX.Element;
 //# sourceMappingURL=PageContentDefault.d.ts.map