@alveole/storybook 1.9.0 → 2.0.0-alpha

package/dist/pages/UIKitThemePage.js

@@ -1,10 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Card, Page, Section, Typography } from '@alveole/components';
-import { useTheme } from '@alveole/theme';
-const ThemeCard = ({ title, description, onPress }) => {
-    const { text } = useTheme();
-    return (_jsx(Card, { onPress: onPress, children: _jsxs(Box, { display: "flex", gap: 8, p: '150', children: [_jsx(Typography, { style: text.Titres['H4 - SM'], children: title }), _jsx(Typography, { style: text['Corps de texte'].SM.Regular, children: description })] }) }));
-};
-export const UIKitThemePage = ({ title = 'UI Kit - Thème', description = 'Tokens du thème', onOpenColors, onOpenTypography, }) => {
-    return (_jsx(Page, { scrollable: true, title: title, description: description, children: _jsx(Section, { withPaddingY: true, children: _jsxs(Box, { display: "flex", gap: 16, children: [_jsx(ThemeCard, { title: "Couleurs", description: "Palette et couleurs du th\u00E8me.", onPress: onOpenColors }), _jsx(ThemeCard, { title: "Typographies", description: "Styles de texte et hi\u00E9rarchie typographique.", onPress: onOpenTypography })] }) }) }));
+import { Box, Page, Section } from '@alveole/components';
+import { MenuCard } from '../components/MenuCard';
+export const UIKitThemePage = ({ title = 'UI Kit - Thème', description = 'Tokens du thème', onOpenColors, onOpenTypography, onOpenCSSVariables, sidebar, footerContent, beforeContent, }) => {
+    return (_jsx(Page, { scrollable: true, title: title, description: description, sidebar: sidebar, footerContent: footerContent, beforeContent: beforeContent, children: _jsx(Section, { withPaddingY: true, children: _jsxs(Box, { display: "flex", gap: 16, children: [_jsx(MenuCard, { title: "Couleurs", description: "Palette et couleurs du th\u00E8me.", onPress: onOpenColors }), _jsx(MenuCard, { title: "Typographies", description: "Styles de texte et hi\u00E9rarchie typographique.", onPress: onOpenTypography }), onOpenCSSVariables ? (_jsx(MenuCard, { title: "Variables CSS", description: "Les jetons du th\u00E8me expos\u00E9s en variables CSS.", onPress: onOpenCSSVariables })) : null] }) }) }));
 };

package/dist/pages/ecransDuKit.d.ts

@@ -0,0 +1,18 @@
+import type { BlankPage } from './UIKitPage';
+type InternalHeaderProps = {
+    canGoBack: boolean;
+    onBack: () => void;
+};
+export declare const InternalHeader: ({ canGoBack, onBack }: InternalHeaderProps) => import("react").JSX.Element | null;
+export declare const HomeScreen: ({ title, description, blankPage, onOpenComponents, onOpenTheme, onOpenConstants, onOpenBlank, onOpenPhilosophy, }: {
+    title: string;
+    description: string;
+    blankPage?: BlankPage;
+    onOpenComponents: () => void;
+    onOpenTheme: () => void;
+    onOpenConstants: () => void;
+    onOpenBlank: () => void;
+    onOpenPhilosophy: () => void;
+}) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ecransDuKit.d.ts.map

package/dist/pages/ecransDuKit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ecransDuKit.d.ts","sourceRoot":"","sources":["../../src/pages/ecransDuKit.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAM7C,KAAK,mBAAmB,GAAG;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,uBAAuB,mBAAmB,uCAUxE,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,mHASxB;IACD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B,gCAwBA,CAAC"}

package/dist/pages/ecransDuKit.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, Page, Section } from '@alveole/components';
+import { MenuCard } from '../components/MenuCard';
+export const InternalHeader = ({ canGoBack, onBack }) => {
+    if (!canGoBack)
+        return null;
+    return (_jsx(Section, { withPaddingY: true, children: _jsx(Box, { children: _jsx(Button, { title: "Retour", variant: "tertiary", size: "sm", onPress: onBack }) }) }));
+};
+export const HomeScreen = ({ title, description, blankPage, onOpenComponents, onOpenTheme, onOpenConstants, onOpenBlank, onOpenPhilosophy, }) => {
+    return (_jsx(Page, { scrollable: true, title: title, description: description, children: _jsx(Section, { withPaddingY: true, children: _jsxs(Box, { display: "flex", gap: 16, children: [_jsx(MenuCard, { title: "Composants", description: "Catalogue des composants et de leurs variantes.", onPress: onOpenComponents }), _jsx(MenuCard, { title: "Th\u00E8me", description: "Couleurs et typographies du design system.", onPress: onOpenTheme }), _jsx(MenuCard, { title: "Constantes", description: "Constantes expos\u00E9es par le th\u00E8me.", onPress: onOpenConstants }), _jsx(MenuCard, { title: "Philosophie", description: "Les principes qui guident Alveole.", onPress: onOpenPhilosophy }), blankPage ? (_jsx(MenuCard, { title: blankPage.title ?? 'Page vierge', description: blankPage.description ?? 'Espace de test libre pour expérimenter.', onPress: onOpenBlank })) : null] }) }) }));
+};

package/dist/pages/installation.d.ts

@@ -0,0 +1,18 @@
+import type { HighlightProps } from '@alveole/components';
+/**
+ * Le texte de la page Installation. Comme la Philosophie, il est range en donnees : ajouter une
+ * etape ne demande pas de toucher au JSX. Chaque etape doit pouvoir etre suivie telle quelle par
+ * une personne ou par une IA, donc le code montre est complet et copiable.
+ */
+export type ExtraitDeCode = {
+    langage: HighlightProps['language'];
+    fichier?: string;
+    source: string;
+};
+export type EtapeDInstallation = {
+    titre: string;
+    paragraphes: readonly string[];
+    extraits?: readonly ExtraitDeCode[];
+};
+export declare const ETAPES_D_INSTALLATION: readonly EtapeDInstallation[];
+//# sourceMappingURL=installation.d.ts.map

package/dist/pages/installation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"installation.d.ts","sourceRoot":"","sources":["../../src/pages/installation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAG1D;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,SAAS,MAAM,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,SAAS,aAAa,EAAE,CAAC;CACrC,CAAC;AA4NF,eAAO,MAAM,qBAAqB,EAAE,SAAS,kBAAkB,EAA+C,CAAC"}

package/dist/pages/installation.js

@@ -0,0 +1,218 @@
+import { ETAPES_D_OUTILLAGE } from './installationOutillage';
+const ETAPES_DE_BASE = [
+    {
+        titre: '1. Prérequis',
+        paragraphes: [
+            'Alveole s’installe dans une application Expo (Expo Router) qui utilise Tamagui 1.x. Les composants sont rendus sur iOS, Android et web.',
+            'Les dépendances natives requises par @alveole/components (expo-router, expo-web-browser, react-native-svg, react-native-safe-area-context, tamagui et les paquets @tamagui/*…) sont déclarées en peerDependencies : les installer avec `npx expo install` pour obtenir les versions compatibles avec le SDK Expo.',
+        ],
+    },
+    {
+        titre: '2. Installer les paquets',
+        paragraphes: [
+            'Tous les paquets @alveole/* doivent avoir exactement le même numéro de version, sans ^ ni ~. Ils sont publiés ensemble et s’appuient les uns sur les autres : mélanger les versions provoque des erreurs de types ou de rendu difficiles à diagnostiquer.',
+            'Pour monter de version, changer tous les paquets @alveole/* en même temps, y compris la clé allowScripts.',
+            'Le script postinstall de @alveole/components copie pdf.min.mjs et pdf.worker.min.mjs dans public/ : le visualiseur PDF en a besoin sur le web. npm ne l’exécute que s’il est autorisé dans allowScripts, avec le même numéro de version que les paquets.',
+            'Ces deux fichiers sont régénérés à chaque installation : les ajouter au .gitignore du projet.',
+        ],
+        extraits: [
+            {
+                langage: 'bash',
+                source: 'npm install --save-exact @alveole/components@1.10.0 @alveole/core@1.10.0 @alveole/storybook@1.10.0 @alveole/theme@1.10.0\nnpm install --save-dev --save-exact @alveole/eslint-config@1.10.0',
+            },
+            {
+                langage: 'json',
+                fichier: 'package.json',
+                source: `{
+  "dependencies": {
+    "@alveole/components": "1.10.0",
+    "@alveole/core": "1.10.0",
+    "@alveole/storybook": "1.10.0",
+    "@alveole/theme": "1.10.0"
+  },
+  "devDependencies": {
+    "@alveole/eslint-config": "1.10.0"
+  },
+  "allowScripts": {
+    "@alveole/components@1.10.0": true
+  }
+}`,
+            },
+            {
+                langage: 'plaintext',
+                fichier: '.gitignore',
+                source: '# Copiés par le postinstall de @alveole/components\npublic/pdf.min.mjs\npublic/pdf.worker.min.mjs',
+            },
+        ],
+    },
+    {
+        titre: '3. Configurer ESLint',
+        paragraphes: [
+            'L’application doit utiliser la configuration ESLint d’Alveole. Elle connaît les conventions des composants et évite les erreurs de lint qu’une configuration maison signalerait à tort. ESLint 9 ou 10 sont acceptés.',
+        ],
+        extraits: [
+            {
+                langage: 'typescript',
+                fichier: 'eslint.config.js',
+                source: `const { defineConfig } = require('eslint/config');
+const alveoleConfig = require('@alveole/eslint-config');
+
+module.exports = defineConfig([
+  ...alveoleConfig,
+  {
+    settings: {
+      react: {
+        version: '19.2',
+      },
+    },
+  },
+]);`,
+            },
+        ],
+    },
+    {
+        titre: '4. Configurer Tamagui',
+        paragraphes: [
+            'Les composants Alveole reposent sur Tamagui 1.x. L’application déclare sa configuration Tamagui, la référence dans package.json et active le plugin Babel, qui extrait le CSS en production.',
+        ],
+        extraits: [
+            {
+                langage: 'typescript',
+                fichier: 'tamagui.config.ts',
+                source: `import { defaultConfig } from '@tamagui/config/v4';
+import { createTamagui } from 'tamagui';
+
+const config = createTamagui(defaultConfig);
+
+export type Conf = typeof config;
+
+declare module 'tamagui' {
+  interface TamaguiCustomConfig extends Conf {}
+}
+
+export default config;`,
+            },
+            {
+                langage: 'typescript',
+                fichier: 'babel.config.js',
+                source: `module.exports = function (api) {
+  api.cache(() => process.env.NODE_ENV);
+  const isDev = process.env.NODE_ENV !== 'production';
+
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      [
+        '@tamagui/babel-plugin',
+        {
+          components: ['tamagui'],
+          config: './tamagui.config.ts',
+          disableDebugAttr: isDev,
+          disableServerOptimization: isDev,
+          ...(isDev ? {} : { cssPath: './.tamagui/app.css', emitSingleCSSFile: true }),
+        },
+      ],
+    ],
+  };
+};`,
+            },
+            {
+                langage: 'json',
+                fichier: 'package.json',
+                source: `{
+  "tamagui": {
+    "config": "./tamagui.config.ts"
+  }
+}`,
+            },
+        ],
+    },
+    {
+        titre: '5. Brancher le ThemeProvider',
+        paragraphes: [
+            'ThemeProvider (@alveole/theme) charge les polices et fournit les couleurs et typographies à tous les composants. Il se place à la racine, dans app/_layout.tsx, au-dessus du TamaguiProvider de l’application.',
+            'Par défaut, ThemeProvider affiche un indicateur de chargement le temps de charger les polices. Une application qui a son propre splash screen passe loader={false} et masque son splash dans onReady.',
+            'Toasts (@alveole/components) est nécessaire pour afficher les notifications ; PageMetaProvider gère les balises <meta> sur le web.',
+        ],
+        extraits: [
+            {
+                langage: 'tsx',
+                fichier: 'app/_layout.tsx',
+                source: `import { PageMetaProvider, Toasts } from '@alveole/components';
+import { ThemeProvider } from '@alveole/theme';
+import { Slot } from 'expo-router';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { TamaguiProvider } from 'tamagui';
+import tamaguiConfig from '../tamagui.config';
+import config from '../alveole.config';
+
+export default function RootLayout() {
+  return (
+    <ThemeProvider color={config.palette}>
+      <SafeAreaProvider>
+        <TamaguiProvider defaultTheme="light" config={tamaguiConfig}>
+          <PageMetaProvider meta={[]}>
+            <Toasts>
+              <Slot />
+            </Toasts>
+          </PageMetaProvider>
+        </TamaguiProvider>
+      </SafeAreaProvider>
+    </ThemeProvider>
+  );
+}`,
+            },
+        ],
+    },
+    {
+        titre: '6. Personnaliser les couleurs',
+        paragraphes: [
+            'Les couleurs se surchargent dans un fichier alveole.config.ts à la racine du projet, importé par le layout et passé au ThemeProvider via la prop color.',
+            'La palette est partielle : seules les clés fournies remplacent celles d’Alveole. Les valeurs viennent de préférence des nuanciers exportés par @alveole/theme (Colors.RougeGroseille, Colors.BleuCaptive…) ; la rubrique Thème › Couleurs liste les clés disponibles.',
+            'La clé light cible les jetons sémantiques du thème clair (artwork, background, border, text) ; les clés de premier niveau (primary, background.button, stepper…) ciblent les couleurs propres aux composants.',
+        ],
+        extraits: [
+            {
+                langage: 'typescript',
+                fichier: 'alveole.config.ts',
+                source: `import { Colors, type DeepPartial, type Palette } from '@alveole/theme';
+
+const palette: DeepPartial<Palette> = {
+  light: {
+    background: {
+      'action-high-primary': Colors.RougeGroseille['main-465'],
+      'action-high-primary-hover': Colors.RougeGroseille['200'],
+      'alt-primary': Colors.RougeGroseille['975'],
+    },
+    border: {
+      'action-high-primary': Colors.RougeGroseille['main-465'],
+    },
+    text: {
+      'title-primary': Colors.RougeGroseille['main-465'],
+      'active-primary': Colors.RougeGroseille['main-465'],
+    },
+  },
+
+  primary: Colors.RougeGroseille['main-465'],
+
+  background: {
+    button: {
+      primary: {
+        default: Colors.RougeGroseille['main-465'],
+        hover: Colors.RougeGroseille['200'],
+      },
+    },
+  },
+
+  stepper: {
+    current: Colors.RougeGroseille['625'],
+    success: Colors.RougeGroseille['main-465'],
+  },
+};
+
+export default { palette };`,
+            },
+        ],
+    },
+];
+export const ETAPES_D_INSTALLATION = [...ETAPES_DE_BASE, ...ETAPES_D_OUTILLAGE];

package/dist/pages/installationOutillage.d.ts

@@ -0,0 +1,7 @@
+import type { EtapeDInstallation } from './installation';
+/**
+ * Suite de la page Installation : les options (thème dynamique, catalogue) et l'outillage (Jest),
+ * puis la vérification. Separees des etapes de base pour garder chaque fichier lisible.
+ */
+export declare const ETAPES_D_OUTILLAGE: readonly EtapeDInstallation[];
+//# sourceMappingURL=installationOutillage.d.ts.map

package/dist/pages/installationOutillage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"installationOutillage.d.ts","sourceRoot":"","sources":["../../src/pages/installationOutillage.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEzD;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,SAAS,kBAAkB,EAmJ3D,CAAC"}

package/dist/pages/installationOutillage.js

@@ -0,0 +1,152 @@
+/**
+ * Suite de la page Installation : les options (thème dynamique, catalogue) et l'outillage (Jest),
+ * puis la vérification. Separees des etapes de base pour garder chaque fichier lisible.
+ */
+export const ETAPES_D_OUTILLAGE = [
+    {
+        titre: '7. Thème dynamique (facultatif)',
+        paragraphes: [
+            'Quand les couleurs dépendent de données chargées à l’exécution (une société, un client), fusionner alveole.config avec la palette calculée grâce à deepMerge (@alveole/theme), puis passer le résultat au ThemeProvider. deepMerge ignore les valeurs absentes : une palette partielle ne remplace que ses clés.',
+        ],
+        extraits: [
+            {
+                langage: 'tsx',
+                fichier: 'providers/ClientThemeProvider.tsx',
+                source: `import { deepMerge, ThemeProvider, type DeepPartial, type Palette } from '@alveole/theme';
+import React from 'react';
+import config from '../alveole.config';
+
+export const ClientThemeProvider = ({
+  clientPalette,
+  children,
+}: {
+  clientPalette?: DeepPartial<Palette>;
+  children: React.ReactNode;
+}) => {
+  const color = React.useMemo(() => deepMerge(config.palette, clientPalette), [clientPalette]);
+
+  return <ThemeProvider color={color}>{children}</ThemeProvider>;
+};`,
+            },
+        ],
+    },
+    {
+        titre: '8. Configurer Jest',
+        paragraphes: [
+            '@alveole/components et Tamagui sont publiés en ESM et importent des fichiers .css : Jest doit les transformer au lieu de les ignorer, et remplacer les .css par un stub.',
+            'Certains modules natifs chargés par les composants (expo-asset pour le favicon de PageHead, matchMedia pour Reanimated) n’existent pas dans l’environnement de test : les simuler dans jest.setup.js.',
+        ],
+        extraits: [
+            {
+                langage: 'typescript',
+                fichier: 'jest.config.js',
+                source: `const webPreset = require('jest-expo/web/jest-preset');
+
+const [babelModule, babelOptions] = webPreset.transform['\\\\.[jt]sx?$'];
+
+module.exports = {
+  ...webPreset,
+  setupFiles: [...(webPreset.setupFiles ?? []), '<rootDir>/jest.setup.js'],
+  moduleNameMapper: {
+    ...webPreset.moduleNameMapper,
+    '\\\\.css$': '<rootDir>/jest.cssStub.js',
+  },
+  transform: {
+    ...webPreset.transform,
+    '\\\\.[jt]sx?$|\\\\.mjs$': [babelModule, babelOptions],
+  },
+  // On transforme tout node_modules, sauf les plugins Babel eux-mêmes.
+  transformIgnorePatterns: ['/node_modules/react-native-reanimated/plugin/', '/node_modules/@react-native/babel-preset/'],
+};`,
+            },
+            {
+                langage: 'typescript',
+                fichier: 'jest.cssStub.js',
+                source: 'module.exports = {};',
+            },
+            {
+                langage: 'typescript',
+                fichier: 'jest.setup.js',
+                source: `jest.mock('expo-asset', () => ({
+  Asset: { fromModule: () => ({ uri: 'test-file-stub' }) },
+}));
+
+if (typeof window !== 'undefined' && !window.matchMedia) {
+  window.matchMedia = () => ({
+    matches: false,
+    media: '',
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false,
+  });
+}`,
+            },
+        ],
+    },
+    {
+        titre: '9. Monter le catalogue dans l’application (facultatif)',
+        paragraphes: [
+            '@alveole/storybook sert à afficher, dans l’application elle-même, le catalogue des composants Alveole et ceux du projet. Deux routes suffisent : la liste et la fiche d’un composant. Les écrans Couleurs, Typographies et Constantes s’ajoutent de la même façon.',
+            'Le catalogue n’a d’intérêt qu’en développement : y donner accès par un bouton affiché sous __DEV__.',
+        ],
+        extraits: [
+            {
+                langage: 'tsx',
+                fichier: 'app/ui-kit/index.tsx',
+                source: `import * as AlveoleStories from '@alveole/components/stories';
+import { StoriesScreen, toStoryModules } from '@alveole/storybook';
+
+const stories = toStoryModules(AlveoleStories);
+
+export default function UIKitIndexScreen() {
+  return (
+    <StoriesScreen
+      stories={stories}
+      title="UI Kit - Composants"
+      getStoryHref={story => \`/ui-kit/components/\${encodeURIComponent(story.default.title)}\`}
+    />
+  );
+}`,
+            },
+            {
+                langage: 'tsx',
+                fichier: 'app/ui-kit/components/[component].tsx',
+                source: `import * as AlveoleStories from '@alveole/components/stories';
+import { StoryDetailScreen, findStoryByTitle, toStoryModules } from '@alveole/storybook';
+import { useLocalSearchParams } from 'expo-router';
+
+const stories = toStoryModules(AlveoleStories);
+
+export default function UIKitComponentScreen() {
+  const { component } = useLocalSearchParams<{ component: string }>();
+
+  return <StoryDetailScreen story={findStoryByTitle(stories, component)} notFoundMessage="Composant introuvable" />;
+}`,
+            },
+        ],
+    },
+    {
+        titre: '10. Vérifier',
+        paragraphes: [
+            'Afficher un premier composant pour valider l’installation, puis lancer le lint et le typecheck de l’application.',
+        ],
+        extraits: [
+            {
+                langage: 'tsx',
+                fichier: 'app/index.tsx',
+                source: `import { Button } from '@alveole/components';
+
+export default function Home() {
+  return <Button variant="primary" title="Alveole est installé" onPress={() => {}} />;
+}`,
+            },
+            {
+                langage: 'bash',
+                source: 'npx eslint .\nnpx tsc --noEmit',
+            },
+        ],
+    },
+];

package/dist/pages/philosophie.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Le texte de la page Philosophie. Il est range ici, en donnees, parce qu'ecrire une section de
+ * plus ne doit pas demander de toucher a du JSX : la page sait rendre, elle n'a pas a savoir quoi.
+ */
+export type SectionDePhilosophie = {
+    titre: string;
+    paragraphes: readonly string[];
+};
+export declare const SECTIONS_DE_PHILOSOPHIE: readonly SectionDePhilosophie[];
+//# sourceMappingURL=philosophie.d.ts.map

package/dist/pages/philosophie.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"philosophie.d.ts","sourceRoot":"","sources":["../../src/pages/philosophie.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,SAAS,MAAM,EAAE,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,SAAS,oBAAoB,EA6ClE,CAAC"}

package/dist/pages/philosophie.js

@@ -0,0 +1,46 @@
+export const SECTIONS_DE_PHILOSOPHIE = [
+    {
+        titre: 'Objectif',
+        paragraphes: [
+            "Alveole est un framework de composants conçu pour accélérer la construction d'outils B2B. L'ambition est de proposer une expérience clé en main : installer les packages, utiliser les composants, livrer. Pas de configuration interminable, pas de décisions de design à prendre à chaque écran.",
+        ],
+    },
+    {
+        titre: 'Convention plutôt que configuration',
+        paragraphes: [
+            "Alveole s'inspire du principe Convention over Configuration : le thème par défaut est pensé pour fonctionner sans ajustement. La customisation reste possible — palette, typographie, espacements — mais elle est optionnelle et ciblée. Le but est de ne pas passer du temps à configurer ce qui fonctionne déjà bien.",
+        ],
+    },
+    {
+        titre: "Des composants pensés pour l'UX",
+        paragraphes: [
+            "Chaque composant embarque les meilleures pratiques UI et UX de sa catégorie. L'objectif n'est pas de fournir une brique neutre que chaque projet devra affiner, mais un composant fini qui propose d'emblée la meilleure expérience pour l'utilisateur final. Il ne faut pas réinventer la roue à chaque projet.",
+        ],
+    },
+    {
+        titre: 'Des choix assumés',
+        paragraphes: [
+            "Certaines décisions ne sont pas exposées en configuration. Par exemple, les icônes Lucide utilisent systématiquement un strokeWidth à 1.5 — cette valeur n'est pas modifiable par le consommateur du composant. Ce type de choix garantit la cohérence visuelle de l'ensemble : un design system qui offre trop de flexibilité cesse d'être un design system.",
+        ],
+    },
+    {
+        titre: "Le catalogue n'est pas une application",
+        paragraphes: [
+            "Ce site ne titre pas ses pages avec PageHeader, et c'est volontaire. PageHeader est l'en-tête des écrans d'une application cliente : son titre se lit dans le registre d'un outil de travail, à 24. Un site de documentation se lit dans un autre registre, à 40, celui que Primer et Atlassian emploient tous deux pour leur propre documentation.",
+            "Les trois références séparent les deux, chacune à sa façon : Primer publie un paquet distinct, @primer/react-brand, pour sa documentation et sa vitrine ; Atlassian titre la sienne avec un style local au site, à une taille qui n'existe dans aucun de ses jetons, leur échelle s'arrêtant à 32 ; Uber reste dans son échelle publiée mais ne livre aucun PageHeader, son site composant son titre directement.",
+            "C'est la voie d'Uber qui est suivie ici, parce que c'est celle du design system dont la portée ressemble le plus à la nôtre, natif et web à la fois : une seule échelle de titres, et un site de documentation qui compose son titre avec, sans emprunter un composant d'application. La conséquence pratique : dans une application, un titre de page passe par PageHeader ; nulle part ailleurs.",
+        ],
+    },
+    {
+        titre: 'Inspirations',
+        paragraphes: [
+            "Alveole s'inspire de trois systèmes de design de référence dans l'écosystème B2B et open source : l'Atlassian Design System, reconnu pour sa rigueur dans les outils professionnels, Primer, le design system de GitHub, apprécié pour sa clarté et sa cohérence à grande échelle, et Base, celui d'Uber, dont la portée couvre comme la nôtre le natif et le web.",
+        ],
+    },
+    {
+        titre: 'Construit dans la durée par Captive',
+        paragraphes: [
+            "Alveole est maintenu par Captive et évolue au fil des projets réels. Chaque composant est extrait, généralisé et affiné à partir de besoins concrets. Le framework grandit progressivement, avec une attention constante à la qualité plutôt qu'à l'exhaustivité.",
+        ],
+    },
+];

package/dist/pressePapiers.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copie une valeur, quand le navigateur le permet. Le presse-papiers n'existe pas partout : le
+ * catalogue est aussi rendu hors navigateur, et un navigateur peut refuser l'acces. Appeler
+ * l'API sans verifier leve une erreur que le gestionnaire d'evenement avale en silence, et la
+ * copie echoue alors sans que rien ne le dise.
+ *
+ * Rend `true` quand la copie a ete lancee, pour que l'appelant n'annonce que ce qui a eu lieu.
+ */
+export declare const copier: (valeur: string, quandCopie: () => void) => boolean;
+//# sourceMappingURL=pressePapiers.d.ts.map

package/dist/pressePapiers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pressePapiers.d.ts","sourceRoot":"","sources":["../src/pressePapiers.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,MAAM,GAAI,QAAQ,MAAM,EAAE,YAAY,MAAM,IAAI,KAAG,OAM/D,CAAC"}

package/dist/pressePapiers.js

@@ -0,0 +1,14 @@
+/**
+ * Copie une valeur, quand le navigateur le permet. Le presse-papiers n'existe pas partout : le
+ * catalogue est aussi rendu hors navigateur, et un navigateur peut refuser l'acces. Appeler
+ * l'API sans verifier leve une erreur que le gestionnaire d'evenement avale en silence, et la
+ * copie echoue alors sans que rien ne le dise.
+ *
+ * Rend `true` quand la copie a ete lancee, pour que l'appelant n'annonce que ce qui a eu lieu.
+ */
+export const copier = (valeur, quandCopie) => {
+    if (typeof navigator === 'undefined' || !navigator.clipboard)
+        return false;
+    navigator.clipboard.writeText(valeur).then(quandCopie);
+    return true;
+};

package/dist/screens/StoriesScreen.d.ts

@@ -6,10 +6,11 @@ export type StoriesScreenProps = {
     description?: string;
     emptyMessage?: string;
     beforeContent?: React.ReactNode;
+    sidebar?: React.ReactNode;
     footerContent?: React.ReactNode;
     createLabel?: string;
     onCreatePress?: () => void;
     getStoryHref: (story: StorybookModule) => string;
 };
-export declare const StoriesScreen: ({ stories, title, description, emptyMessage, beforeContent, footerContent, createLabel, onCreatePress, getStoryHref, }: StoriesScreenProps) => React.JSX.Element;
+export declare const StoriesScreen: ({ stories, title, description, emptyMessage, beforeContent, sidebar, footerContent, createLabel, onCreatePress, getStoryHref, }: StoriesScreenProps) => React.JSX.Element;
 //# sourceMappingURL=StoriesScreen.d.ts.map

package/dist/screens/StoriesScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StoriesScreen.d.ts","sourceRoot":"","sources":["../../src/screens/StoriesScreen.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAiB,eAAe,EAAE,MAAM,UAAU,CAAC;AAW1D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,MAAM,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,wHAU3B,kBAAkB,sBAkJpB,CAAC"}
+{"version":3,"file":"StoriesScreen.d.ts","sourceRoot":"","sources":["../../src/screens/StoriesScreen.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAiB,eAAe,EAAE,MAAM,UAAU,CAAC;AAI1D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,MAAM,CAAC;CAClD,CAAC;AAgBF,eAAO,MAAM,aAAa,GAAI,iIAW3B,kBAAkB,sBAgDpB,CAAC"}

package/dist/screens/StoriesScreen.js

@@ -1,45 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ActionMenu, Box, Button, Page, PageHeader, Section, Typography } from '@alveole/components';
+import { Box, Button, Page, Section } from '@alveole/components';
 import { useTheme } from '@alveole/theme';
 import React from 'react';
-import { Platform, ScrollView, useWindowDimensions } from 'react-native';
-import { SearchField } from '../components/SearchField';
-import { StoryCard } from '../components/StoryCard';
-import { screenContent } from '../styles';
+import { useWindowDimensions } from 'react-native';
+import { BarreDeFiltres } from '../components/BarreDeFiltres';
+import { GrilleDeFiches } from '../components/GrilleDeFiches';
+import { PageTitle } from '../components/PageTitle';
+import { ScreenZone } from '../components/ScreenZone';
 import { filterStories, getAllStoryTags, groupStoriesByTag } from '../utils';
-const AVAILABLE_FLAGS = [
-    { key: 'figma', label: 'Figma' },
-    { key: 'experimental', label: 'Experimental' },
-    { key: 'props', label: 'Props' },
-    { key: 'webOnly', label: 'Web only' },
-    { key: 'mobileOnly', label: 'Mobile only' },
-];
-export const StoriesScreen = ({ stories, title = 'UI Kit - Components', description = 'Shared component catalog', emptyMessage = 'No story found.', beforeContent, footerContent, createLabel, onCreatePress, getStoryHref, }) => {
-    const { text } = useTheme();
+import { largeurDeColonne } from './colonnesDeFiches';
+/** L'action de creation n'a de sens qu'avec un libelle et une action : un seul des deux donnerait
+ *  un bouton muet ou inerte. */
+const ActionDeCreation = ({ label, onPress }) => {
+    if (!label || !onPress)
+        return null;
+    return (_jsx(Section, { withPaddingY: true, children: _jsx(Box, { style: { alignItems: 'flex-end' }, children: _jsx(Button, { title: label, variant: "primary", onPress: onPress }) }) }));
+};
+export const StoriesScreen = ({ stories, title = 'UI Kit - Components', description = 'Shared component catalog', emptyMessage = 'No story found.', beforeContent, sidebar, footerContent, createLabel, onCreatePress, getStoryHref, }) => {
+    const { grilles } = useTheme();
     const { width } = useWindowDimensions();
-    const columns = width >= 1200 ? 3 : width >= 768 ? 2 : 1;
-    const columnStyle = columns === 1
-        ? { width: '100%' }
-        : columns === 2
-            ? { width: 'calc((100% - 16px) / 2)' }
-            : { width: 'calc((100% - 32px) / 3)' };
     const [query, setQuery] = React.useState('');
     const [selectedTag, setSelectedTag] = React.useState(null);
     const [selectedFlag, setSelectedFlag] = React.useState(null);
-    const [openFilter, setOpenFilter] = React.useState(null);
     const allTags = React.useMemo(() => getAllStoryTags(stories), [stories]);
-    const filteredStories = React.useMemo(() => filterStories({
-        stories,
-        query,
-        selectedTag,
-        selectedFlag,
-    }), [stories, query, selectedTag, selectedFlag]);
-    const groupedStories = React.useMemo(() => groupStoriesByTag(filteredStories, allTags), [filteredStories, allTags]);
-    return (_jsxs(Page, { scrollable: true, title: title, description: description, beforeContent: _jsxs(_Fragment, { children: [beforeContent, createLabel && onCreatePress ? (_jsx(Section, { withPaddingY: true, children: _jsx(Box, { style: { alignItems: 'flex-end' }, children: _jsx(Button, { title: createLabel, variant: "primary", onPress: onCreatePress }) }) })) : null] }), children: [_jsxs(Box, { ...screenContent, children: [_jsx(Section, { withPaddingY: false, children: _jsx(PageHeader, { title: title }) }), _jsx(Section, { withPaddingY: false, children: _jsxs(ScrollView, { horizontal: true, nestedScrollEnabled: true, directionalLockEnabled: Platform.OS === 'ios', showsHorizontalScrollIndicator: false, contentContainerStyle: { flexDirection: 'row', gap: 8, alignItems: 'center' }, children: [_jsx(Box, { style: { minWidth: 200 }, children: _jsx(SearchField, { placeholder: "Button, Tabs, Card...", value: query, onChangeText: setQuery, size: "sm" }) }), _jsx(ActionMenu, { placement: "bottom-start", scrollable: false, open: openFilter === 'tags', setOpen: open => setOpenFilter(open ? 'tags' : null), renderTrigger: () => (_jsx(Button, { variant: "secondary", title: selectedTag ?? 'Tags', endIcon: "ChevronDown", size: "sm", selected: selectedTag !== null, active: openFilter === 'tags' })), children: allTags.map(tag => (_jsx(ActionMenu.Item, { title: tag, selected: selectedTag === tag, onPress: () => {
-                                            setSelectedTag(prev => (prev === tag ? null : tag));
-                                            setOpenFilter(null);
-                                        } }, tag))) }), _jsx(ActionMenu, { placement: "bottom-start", scrollable: false, open: openFilter === 'indicateurs', setOpen: open => setOpenFilter(open ? 'indicateurs' : null), renderTrigger: () => (_jsx(Button, { variant: "secondary", title: AVAILABLE_FLAGS.find(f => f.key === selectedFlag)?.label ?? 'Indicateurs', endIcon: "ChevronDown", size: "sm", selected: selectedFlag !== null, active: openFilter === 'indicateurs' })), children: AVAILABLE_FLAGS.map(flag => (_jsx(ActionMenu.Item, { title: flag.label, selected: selectedFlag === flag.key, onPress: () => {
-                                            setSelectedFlag(prev => (prev === flag.key ? null : flag.key));
-                                            setOpenFilter(null);
-                                        } }, flag.key))) })] }) }), groupedStories.length === 0 ? (_jsx(Section, { withPaddingY: false, children: _jsx(Typography, { style: text['Corps de texte'].MD.Regular, children: emptyMessage }) })) : (groupedStories.map(([tag, taggedStories]) => (_jsx(Section, { withPaddingY: false, children: _jsxs(Box, { display: "flex", gap: 16, children: [_jsx(Typography, { style: text.Titres['H4 - SM'], children: tag }), _jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 16, children: taggedStories.map(story => (_jsx(Box, { style: { alignSelf: 'stretch', width: columnStyle.width }, children: _jsx(StoryCard, { story: story, href: getStoryHref(story) }) }, story.default.title))) })] }) }, tag))))] }), footerContent] }));
+    const groupedStories = React.useMemo(() => groupStoriesByTag(filterStories({ stories, query, selectedTag, selectedFlag }), allTags), [stories, query, selectedTag, selectedFlag, allTags]);
+    return (_jsxs(Page, { scrollable: true, title: title, description: description, sidebar: sidebar, beforeContent: _jsxs(_Fragment, { children: [beforeContent, _jsx(ActionDeCreation, { label: createLabel, onPress: onCreatePress })] }), children: [_jsxs(ScreenZone, { largeur: grilles['12 colonnes'], children: [_jsx(PageTitle, { title: title }), _jsx(BarreDeFiltres, { recherche: query, onRecherche: setQuery, tags: allTags, tagChoisi: selectedTag, onTag: setSelectedTag, indicateurChoisi: selectedFlag, onIndicateur: setSelectedFlag }), _jsx(GrilleDeFiches, { groupes: groupedStories, largeurDeFiche: largeurDeColonne(width), getStoryHref: getStoryHref, messageVide: emptyMessage })] }), footerContent] }));
 };