@alveole/storybook 1.10.0 → 2.0.0-alpha

package/dist/screens/paletteSections.d.ts

@@ -0,0 +1,30 @@
+export type ColorEntry = {
+    path: string;
+    value: string;
+};
+export type ColorSection = {
+    title: string;
+    entries: ColorEntry[];
+    deprecated?: boolean;
+};
+/**
+ * Les couleurs d'un groupe, aplaties en chemins pointes. La palette imbrique ses familles a
+ * des profondeurs variables, et seule la feuille porte une valeur : tout ce qui n'est ni une
+ * chaine ni un objet n'a rien a montrer et disparait.
+ */
+export declare function flattenColors(obj: object, prefix?: string): ColorEntry[];
+/**
+ * Les sections affichees : une par famille du mode clair, puis les cles historiques. Seul le
+ * mode clair est montre - le catalogue ne rend pas encore le mode sombre, et l'afficher
+ * laisserait croire qu'il est disponible. Une famille vide n'a pas de section : un accordeon
+ * qu'on deplie sur rien se lit comme une erreur.
+ */
+export declare function buildSections(palette: Record<string, unknown>): ColorSection[];
+/** Le nombre de jetons d'une section, tel que son en-tete l'annonce. */
+export declare function compteDeJetons({ entries: { length } }: ColorSection): string;
+/**
+ * Les sections depliees a l'ouverture de l'ecran : les familles, et non l'historique, qui est
+ * ce qui reste a migrer, pas ce qu'on vient consulter.
+ */
+export declare function sectionsOuvertesAuDepart(sections: ColorSection[]): string[];
+//# sourceMappingURL=paletteSections.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"paletteSections.d.ts","sourceRoot":"","sources":["../../src/screens/paletteSections.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AACzD,MAAM,MAAM,YAAY,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,UAAU,EAAE,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAE1F;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,SAAK,GAAG,UAAU,EAAE,CAWpE;AA8BD;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,YAAY,EAAE,CAc9E;AAED,wEAAwE;AACxE,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,YAAY,GAAG,MAAM,CAE5E;AAED;;;GAGG;AACH,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,YAAY,EAAE,GAAG,MAAM,EAAE,CAE3E"}

package/dist/screens/paletteSections.js

@@ -0,0 +1,76 @@
+/**
+ * Les couleurs d'un groupe, aplaties en chemins pointes. La palette imbrique ses familles a
+ * des profondeurs variables, et seule la feuille porte une valeur : tout ce qui n'est ni une
+ * chaine ni un objet n'a rien a montrer et disparait.
+ */
+export function flattenColors(obj, prefix = '') {
+    const entries = [];
+    for (const [key, val] of Object.entries(obj)) {
+        const path = prefix ? `${prefix}.${key}` : key;
+        if (typeof val === 'string') {
+            entries.push({ path, value: val });
+        }
+        else if (val && typeof val === 'object') {
+            entries.push(...flattenColors(val, path));
+        }
+    }
+    return entries;
+}
+/**
+ * Les cles de premier niveau qui precedent le rangement par mode. Elles ne sont plus alimentees,
+ * mais restent lues par du code existant : la palette les garde, et l'ecran les montre a part.
+ */
+const DEPRECATED_KEYS = [
+    'primary',
+    'transparent',
+    'danger',
+    'info',
+    'success',
+    'warning',
+    'link',
+    'text',
+    'border',
+    'background',
+    'system',
+];
+/** Les cles historiques encore presentes, rassemblees en une seule liste. */
+function deprecatedEntries(palette) {
+    return DEPRECATED_KEYS.flatMap(key => {
+        const val = palette[key];
+        if (typeof val === 'string')
+            return [{ path: key, value: val }];
+        if (val && typeof val === 'object')
+            return flattenColors(val, key);
+        return [];
+    });
+}
+/**
+ * Les sections affichees : une par famille du mode clair, puis les cles historiques. Seul le
+ * mode clair est montre - le catalogue ne rend pas encore le mode sombre, et l'afficher
+ * laisserait croire qu'il est disponible. Une famille vide n'a pas de section : un accordeon
+ * qu'on deplie sur rien se lit comme une erreur.
+ */
+export function buildSections(palette) {
+    const clair = typeof palette.light === 'object' && palette.light !== null ? palette.light : {};
+    const familles = Object.entries(clair)
+        .map(([groupKey, groupVal]) => ({
+        title: `light / ${groupKey}`,
+        entries: flattenColors({ [groupKey]: groupVal }, 'light'),
+    }))
+        .filter(section => section.entries.length > 0);
+    const historiques = deprecatedEntries(palette);
+    if (historiques.length === 0)
+        return familles;
+    return [...familles, { title: 'Deprecated', entries: historiques, deprecated: true }];
+}
+/** Le nombre de jetons d'une section, tel que son en-tete l'annonce. */
+export function compteDeJetons({ entries: { length } }) {
+    return `${length} token${length > 1 ? 's' : ''}`;
+}
+/**
+ * Les sections depliees a l'ouverture de l'ecran : les familles, et non l'historique, qui est
+ * ce qui reste a migrer, pas ce qu'on vient consulter.
+ */
+export function sectionsOuvertesAuDepart(sections) {
+    return sections.filter(section => !section.deprecated).map(section => section.title);
+}

package/dist/screens/sourcesDExemples.d.ts

@@ -0,0 +1,17 @@
+import { StorybookMeta, StorybookModule } from '../types';
+/**
+ * Le code d'un exemple, ou `null` quand la fiche ne le publie pas : la demonstration se montre
+ * alors sans son code. Les premieres fiches posaient leurs sources a la racine du bloc, les
+ * suivantes les rangent sous `storySources` ; les deux se lisent. Une source publiee en
+ * fonction n'est construite qu'ici, a la demande.
+ */
+export declare const sourceDeLExemple: (story: StorybookModule, nomDeLExemple: string) => string | null;
+/** Le texte qui accompagne un exemple, ou `null` quand la fiche n'en donne pas. */
+export declare const descriptionDeLExemple: (story: StorybookModule, nomDeLExemple: string) => string | null;
+/**
+ * Ce que la fiche annonce hors de l'ecran : la balise `description` de la page, lue par les
+ * moteurs et les apercus de lien. Le resume court prime quand la fiche en donne un ; sinon la
+ * description longue sert, debarrassee de son balisage, qu'une balise `meta` afficherait tel quel.
+ */
+export declare const resumeDeLaFiche: (meta: StorybookMeta) => string;
+//# sourceMappingURL=sourcesDExemples.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sourcesDExemples.d.ts","sourceRoot":"","sources":["../../src/screens/sourcesDExemples.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAG1D;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAAI,OAAO,eAAe,EAAE,eAAe,MAAM,KAAG,MAAM,GAAG,IAQzF,CAAC;AAEF,mFAAmF;AACnF,eAAO,MAAM,qBAAqB,GAAI,OAAO,eAAe,EAAE,eAAe,MAAM,KAAG,MAAM,GAAG,IAI9F,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,MAAM,aAAa,KAAG,MACI,CAAC"}

package/dist/screens/sourcesDExemples.js

@@ -0,0 +1,27 @@
+import { stripMarkdown } from '../utils';
+/**
+ * Le code d'un exemple, ou `null` quand la fiche ne le publie pas : la demonstration se montre
+ * alors sans son code. Les premieres fiches posaient leurs sources a la racine du bloc, les
+ * suivantes les rangent sous `storySources` ; les deux se lisent. Une source publiee en
+ * fonction n'est construite qu'ici, a la demande.
+ */
+export const sourceDeLExemple = (story, nomDeLExemple) => {
+    const sources = story.Sources;
+    const source = sources?.storySources?.[nomDeLExemple] ?? sources?.[nomDeLExemple];
+    if (typeof source === 'string')
+        return source;
+    if (typeof source === 'function')
+        return source();
+    return null;
+};
+/** Le texte qui accompagne un exemple, ou `null` quand la fiche n'en donne pas. */
+export const descriptionDeLExemple = (story, nomDeLExemple) => {
+    const description = story.Sources?.storyDescriptions?.[nomDeLExemple];
+    return typeof description === 'string' ? description : null;
+};
+/**
+ * Ce que la fiche annonce hors de l'ecran : la balise `description` de la page, lue par les
+ * moteurs et les apercus de lien. Le resume court prime quand la fiche en donne un ; sinon la
+ * description longue sert, debarrassee de son balisage, qu'une balise `meta` afficherait tel quel.
+ */
+export const resumeDeLaFiche = (meta) => meta.shortDescription ?? stripMarkdown(meta.description);

package/dist/screens/variablesCSSDuTheme.d.ts

@@ -0,0 +1,12 @@
+export type PreviewKind = 'color' | 'spacing' | 'elevation' | 'radius' | 'none';
+export type CSSVarEntry = {
+    name: string;
+    rawValue: string;
+    preview: PreviewKind;
+};
+export type CSSVarGroup = {
+    title: string;
+    vars: CSSVarEntry[];
+};
+export declare function buildGroups(): CSSVarGroup[];
+//# sourceMappingURL=variablesCSSDuTheme.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"variablesCSSDuTheme.d.ts","sourceRoot":"","sources":["../../src/screens/variablesCSSDuTheme.ts"],"names":[],"mappings":"AAgBA,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEhF,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,WAAW,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,WAAW,EAAE,CAAC;CACrB,CAAC;AA+EF,wBAAgB,WAAW,IAAI,WAAW,EAAE,CAgB3C"}

package/dist/screens/variablesCSSDuTheme.js

@@ -0,0 +1,77 @@
+/**
+ * Le catalogue des variables CSS que le theme publie, groupe par famille. Construire ce catalogue
+ * est une responsabilite a part : l'ecran qui le montre n'a pas a savoir d'ou sort chaque famille.
+ */
+import { Colors, CustomPalette, CustomTypography, Elevations, FontWeightMap, RadiusList, Spacings, sanitizeCSSKey, } from '@alveole/theme';
+import { variablesDeTypographie } from './variablesDeTypographie';
+/** Les nuances brutes de la palette, une variable par cran. */
+function groupeDesCouleurs() {
+    const vars = Object.entries(Colors).flatMap(([name, shades]) => Object.entries(shades).map(([variant, value]) => ({
+        name: `--color-${name}-${variant}`,
+        rawValue: value,
+        preview: 'color',
+    })));
+    return { title: 'Couleurs palette', vars };
+}
+/**
+ * Les jetons semantiques du theme clair, une categorie par groupe. Une categorie vide ne
+ * donne pas de groupe : un accordeon sans contenu n'apprend rien.
+ */
+const CATEGORIES_SEMANTIQUES = ['background', 'text', 'border', 'artwork', 'system'];
+function groupesSemantiques() {
+    return CATEGORIES_SEMANTIQUES.map(category => {
+        const tokens = CustomPalette.light[category] ?? {};
+        const vars = Object.entries(tokens).flatMap(([token, value]) => typeof value === 'string' ? [{ name: `--${category}-${token}`, rawValue: value, preview: 'color' }] : []);
+        return { title: `Tokens — ${category}`, vars };
+    }).filter(groupe => groupe.vars.length > 0);
+}
+function groupeChiffre({ title, valeurs, prefixe, preview, nomDeCle = key => key }) {
+    return {
+        title,
+        vars: Object.entries(valeurs).map(([key, value]) => ({
+            name: `--${prefixe}-${nomDeCle(key)}`,
+            rawValue: `${value}px`,
+            preview,
+        })),
+    };
+}
+function groupeDesElevations() {
+    return {
+        title: 'Elevations',
+        vars: Object.entries(Elevations).map(([key, value]) => ({
+            name: `--elevation-${key}`,
+            rawValue: value.web,
+            preview: 'elevation',
+        })),
+    };
+}
+/** Chaque graisse publie sa famille et son poids : deux variables pour une entree. */
+function groupeDesFontes() {
+    return {
+        title: 'Fonts',
+        vars: Object.entries(FontWeightMap).flatMap(([key, { familyWithFallback, weight }]) => [
+            { name: `--font-${key}-family`, rawValue: familyWithFallback, preview: 'none' },
+            { name: `--font-${key}-weight`, rawValue: String(weight), preview: 'none' },
+        ]),
+    };
+}
+function groupeDesTypographies() {
+    return { title: 'Typographies', vars: variablesDeTypographie(CustomTypography, sanitizeCSSKey) };
+}
+export function buildGroups() {
+    return [
+        groupeDesCouleurs(),
+        ...groupesSemantiques(),
+        groupeChiffre({
+            title: 'Spacing',
+            valeurs: Spacings,
+            prefixe: 'spacing',
+            preview: 'spacing',
+            nomDeCle: sanitizeCSSKey,
+        }),
+        groupeChiffre({ title: 'Radius', valeurs: RadiusList, prefixe: 'radius', preview: 'radius' }),
+        groupeDesElevations(),
+        groupeDesFontes(),
+        groupeDesTypographies(),
+    ];
+}

package/dist/screens/variablesDeTypographie.d.ts

@@ -0,0 +1,8 @@
+import type { CSSVarEntry } from './variablesCSSDuTheme';
+/**
+ * Les variables CSS d'un arbre de typographies : une feuille est reconnue a sa taille, et son
+ * chemin dans l'arbre donne le nom de ses variables. L'assainisseur de cle est injecte : il vient
+ * du theme, et cette collecte n'a pas a le charger pour etre testee.
+ */
+export declare function variablesDeTypographie(arbre: object, nommer: (cle: string) => string, chemin?: string[]): CSSVarEntry[];
+//# sourceMappingURL=variablesDeTypographie.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"variablesDeTypographie.d.ts","sourceRoot":"","sources":["../../src/screens/variablesDeTypographie.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEzD;;;;GAIG;AACH,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,EAC/B,MAAM,GAAE,MAAM,EAAO,GACpB,WAAW,EAAE,CAkBf"}

package/dist/screens/variablesDeTypographie.js

@@ -0,0 +1,23 @@
+/**
+ * Les variables CSS d'un arbre de typographies : une feuille est reconnue a sa taille, et son
+ * chemin dans l'arbre donne le nom de ses variables. L'assainisseur de cle est injecte : il vient
+ * du theme, et cette collecte n'a pas a le charger pour etre testee.
+ */
+export function variablesDeTypographie(arbre, nommer, chemin = []) {
+    const { fontSize, lineHeight, fontFamily, fontWeight } = Object.fromEntries(Object.entries(arbre));
+    if (typeof fontSize === 'number') {
+        const prefixe = `--typography-${chemin.map(nommer).join('-')}`;
+        const variable = (suffixe, rawValue) => ({
+            name: `${prefixe}-${suffixe}`,
+            rawValue,
+            preview: 'none',
+        });
+        const variables = [variable('font-size', `${fontSize}px`), variable('line-height', `${lineHeight}px`)];
+        if (typeof fontFamily === 'string')
+            variables.push(variable('font-family', fontFamily));
+        if (typeof fontWeight === 'string')
+            variables.push(variable('font-weight', fontWeight));
+        return variables;
+    }
+    return Object.entries(arbre).flatMap(([cle, valeur]) => typeof valeur === 'object' && valeur !== null ? variablesDeTypographie(valeur, nommer, [...chemin, cle]) : []);
+}

package/dist/storySource.d.ts

@@ -0,0 +1,7 @@
+export type SourceDecoupee = {
+    /** Ce qui est affiché tant que la source est repliée. */
+    visible: string;
+    tronque: boolean;
+};
+export declare const decouperSource: (source: string, lignes: number) => SourceDecoupee;
+//# sourceMappingURL=storySource.d.ts.map

package/dist/storySource.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"storySource.d.ts","sourceRoot":"","sources":["../src/storySource.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG;IAC3B,yDAAyD;IACzD,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,QAAQ,MAAM,EAAE,QAAQ,MAAM,KAAG,cAO/D,CAAC"}

package/dist/storySource.js

@@ -0,0 +1,7 @@
+export const decouperSource = (source, lignes) => {
+    const toutes = source.split('\n');
+    return {
+        visible: toutes.slice(0, lignes).join('\n'),
+        tronque: toutes.length > lignes,
+    };
+};

package/dist/types.d.ts

@@ -1,7 +1,8 @@
-import type { Story, StoryModule, StoryTag } from '@alveole/components';
+import type { Story, StoryExample, StoryModule, StoryTag } from '@alveole/components';
 export type StorybookTag = StoryTag;
 export type StorybookMeta = Story;
 export type StorybookModule<TMeta extends StorybookMeta = StorybookMeta> = StoryModule<TMeta>;
+export type Exemple = readonly [nom: string, Rendu: StoryExample];
 export type StorybookFlagKey = 'figma' | 'experimental' | 'props' | 'webOnly' | 'mobileOnly';
 export type StorybookFlag = {
     key: StorybookFlagKey;

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAExE,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC;AAEpC,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC;AAElC,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,aAAa,GAAG,aAAa,IAAI,WAAW,CAAC,KAAK,CAAC,CAAC;AAE9F,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,cAAc,GAAG,OAAO,GAAG,SAAS,GAAG,YAAY,CAAC;AAE7F,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,EAAE,gBAAgB,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAEtF,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC;AAEpC,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC;AAElC,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,aAAa,GAAG,aAAa,IAAI,WAAW,CAAC,KAAK,CAAC,CAAC;AAE9F,MAAM,MAAM,OAAO,GAAG,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC;AAElE,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,cAAc,GAAG,OAAO,GAAG,SAAS,GAAG,YAAY,CAAC;AAE7F,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,EAAE,gBAAgB,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC"}

package/dist/utils.d.ts

@@ -1,5 +1,11 @@
-import { StorybookFlag, StorybookMeta, StorybookModule } from './types';
+import { Exemple, StorybookFlag, StorybookMeta, StorybookModule } from './types';
 export declare const normalizeText: (value: string) => string;
+/**
+ * Tous les indicateurs qu'une fiche peut porter, dans l'ordre ou le catalogue les propose.
+ * Ils se deduisent des definitions plutot que d'etre recopies : un indicateur ajoute ici
+ * devient filtrable sans autre geste.
+ */
+export declare const ALL_STORY_FLAGS: StorybookFlag[];
 export declare const getStoryFlags: (meta: StorybookMeta) => StorybookFlag[];
 export declare const getAllStoryTags: (stories: StorybookModule[]) => string[];
 export declare const filterStories: (params: {
@@ -10,9 +16,11 @@ export declare const filterStories: (params: {
 }) => StorybookModule[];
 export declare const sortStoriesByTitle: (stories: StorybookModule[]) => StorybookModule[];
 export declare const groupStoriesByTag: (stories: StorybookModule[], tags: string[]) => (readonly [string, StorybookModule[]])[];
-export declare const getStoryExamples: (story: StorybookModule) => [string, Exclude<StorybookModule[keyof StorybookModule], StorybookMeta>][];
-export declare const toStoryModules: (stories: Record<string, unknown>) => StorybookModule[];
+export declare const getStoryExamples: (story: StorybookModule) => Exemple[];
+export declare const toStoryModules: (stories: Record<string, StorybookModule>) => StorybookModule[];
 export declare const findStoryByTitle: (stories: StorybookModule[], title: string | undefined | null) => StorybookModule | null;
+export declare const getConstantEntries: (constants: Record<string, unknown>) => [string, unknown][];
 export declare const findConstantByName: (constants: Record<string, unknown>, name: string | undefined | null) => [string, unknown] | null;
 export declare const stripMarkdown: (markdown: string) => string;
+export declare const groupTitleForTag: (tag: string) => string;
 //# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAUxE,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,WAIP,CAAC;AAErC,eAAO,MAAM,aAAa,GAAI,MAAM,aAAa,KAAG,aAAa,EAC+B,CAAC;AAEjG,eAAO,MAAM,eAAe,GAAI,SAAS,eAAe,EAAE,KAAG,MAAM,EAOlE,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,QAAQ;IACpC,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,YAAY,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;CAC3C,sBAoBA,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,SAAS,eAAe,EAAE,sBAC8B,CAAC;AAE5F,eAAO,MAAM,iBAAiB,GAAI,SAAS,eAAe,EAAE,EAAE,MAAM,MAAM,EAAE,6CAGd,CAAC;AAE/D,eAAO,MAAM,gBAAgB,GAAI,OAAO,eAAe,KAC+C,CAClG,MAAM,EACN,OAAO,CAAC,eAAe,CAAC,MAAM,eAAe,CAAC,EAAE,aAAa,CAAC,CAC/D,EAAE,CAAC;AAEN,eAAO,MAAM,cAAc,GAAI,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAA+B,eAAe,EAAE,CAAC;AAEhH,eAAO,MAAM,gBAAgB,GAAI,SAAS,eAAe,EAAE,EAAE,OAAO,MAAM,GAAG,SAAS,GAAG,IAAI,2BAC/B,CAAC;AAE/D,eAAO,MAAM,kBAAkB,GAAI,WAAW,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,MAAM,GAAG,SAAS,GAAG,IAAI,6BACrC,CAAC;AAElE,eAAO,MAAM,aAAa,GAAI,UAAU,MAAM,KAAG,MAWtC,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAUjF,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,WAIP,CAAC;AAErC;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,aAAa,EAA+D,CAAC;AAE3G,eAAO,MAAM,aAAa,GAAI,MAAM,aAAa,KAAG,aAAa,EAC+B,CAAC;AAEjG,eAAO,MAAM,eAAe,GAAI,SAAS,eAAe,EAAE,KAAG,MAAM,EAOlE,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,QAAQ;IACpC,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,YAAY,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;CAC3C,sBAoBA,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,SAAS,eAAe,EAAE,sBAC8B,CAAC;AAE5F,eAAO,MAAM,iBAAiB,GAAI,SAAS,eAAe,EAAE,EAAE,MAAM,MAAM,EAAE,6CAGd,CAAC;AAE/D,eAAO,MAAM,gBAAgB,GAAI,OAAO,eAAe,KAAG,OAAO,EAG9D,CAAC;AAEJ,eAAO,MAAM,cAAc,GAAI,SAAS,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,sBAA2B,CAAC;AAEnG,eAAO,MAAM,gBAAgB,GAAI,SAAS,eAAe,EAAE,EAAE,OAAO,MAAM,GAAG,SAAS,GAAG,IAAI,2BAC/B,CAAC;AAI/D,eAAO,MAAM,kBAAkB,GAAI,WAAW,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,wBAGV,CAAC;AAE5D,eAAO,MAAM,kBAAkB,GAAI,WAAW,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,MAAM,GAAG,SAAS,GAAG,IAAI,6BACrC,CAAC;AAElE,eAAO,MAAM,aAAa,GAAI,UAAU,MAAM,KAAG,MAWtC,CAAC;AAOZ,eAAO,MAAM,gBAAgB,GAAI,KAAK,MAAM,WAC6B,CAAC"}

package/dist/utils.js

@@ -9,6 +9,12 @@ export const normalizeText = (value) => value
     .toLowerCase()
     .normalize('NFD')
     .replace(/[\u0300-\u036f]/g, '');
+/**
+ * Tous les indicateurs qu'une fiche peut porter, dans l'ordre ou le catalogue les propose.
+ * Ils se deduisent des definitions plutot que d'etre recopies : un indicateur ajoute ici
+ * devient filtrable sans autre geste.
+ */
+export const ALL_STORY_FLAGS = FLAG_DEFINITIONS.map(({ key, label }) => ({ key, label }));
 export const getStoryFlags = (meta) => FLAG_DEFINITIONS.filter(flag => flag.isActive(meta)).map(({ key, label }) => ({ key, label }));
 export const getAllStoryTags = (stories) => {
     const tags = new Set();
@@ -23,9 +29,9 @@ export const filterStories = (params) => {
     const normalizedQuery = normalizeText(query.trim());
     return stories.filter(story => {
         const meta = story.default;
-        const matchesQuery = normalizedQuery.length === 0 ||
-            normalizeText(meta.title).includes(normalizedQuery) ||
-            normalizeText(meta.description).includes(normalizedQuery);
+        // Une recherche vide n'a pas besoin d'etre traitee a part : toute chaine contient la
+        // chaine vide, donc le titre suffit a laisser passer la fiche.
+        const matchesQuery = normalizeText(meta.title).includes(normalizedQuery) || normalizeText(meta.description).includes(normalizedQuery);
         if (!matchesQuery)
             return false;
         if (selectedTag && !meta.tags.includes(selectedTag))
@@ -42,9 +48,14 @@ export const sortStoriesByTitle = (stories) => [...stories].sort((left, right) =
 export const groupStoriesByTag = (stories, tags) => tags
     .map(tag => [tag, stories.filter(story => story.default.tags.includes(tag))])
     .filter(([, groupedStories]) => groupedStories.length > 0);
-export const getStoryExamples = (story) => Object.entries(story).filter(([key, value]) => key !== 'default' && typeof value === 'function');
+export const getStoryExamples = (story) => Object.entries(story).flatMap(([nom, valeur]) => nom !== 'default' && typeof valeur === 'function' ? [[nom, valeur]] : []);
 export const toStoryModules = (stories) => Object.values(stories);
 export const findStoryByTitle = (stories, title) => stories.find(story => story.default.title === title) ?? null;
+// Une constante du thème n'est présentée que si elle est structurée : les scalaires exportés
+// par `@alveole/theme` (numéro de version, drapeaux) ne sont pas des jetons à parcourir.
+export const getConstantEntries = (constants) => Object.entries(constants)
+    .filter(([, value]) => typeof value === 'object' && value != null)
+    .sort((left, right) => left[0].localeCompare(right[0]));
 export const findConstantByName = (constants, name) => Object.entries(constants).find(([key]) => key === name) ?? null;
 export const stripMarkdown = (markdown) => markdown
     .replace(/#{1,6}\s*/g, '')
@@ -57,3 +68,8 @@ export const stripMarkdown = (markdown) => markdown
     .replace(/^\s*\d+\.\s+/gm, '')
     .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
     .trim();
+// Les tags de fiches sont écrits comme les répertoires du dépôt (`core`, `ui`), mais servent de
+// titre de groupe dans la colonne, où ils doivent se lire comme des mots. Un sigle n'obéit pas
+// à la règle générale : `ui` donne `UI` et non `Ui`, d'où la table d'exceptions.
+const ACRONYM_GROUP_TITLES = { ui: 'UI' };
+export const groupTitleForTag = (tag) => ACRONYM_GROUP_TITLES[tag] ?? tag.charAt(0).toUpperCase() + tag.slice(1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alveole/storybook",
-  "version": "1.10.0",
+  "version": "2.0.0-alpha",
   "description": "Catalog screens and helpers for Alveole stories and theme tokens.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -13,19 +13,23 @@
   },
   "files": [
     "dist",
+    "!dist/.tsbuildinfo",
     "README.md"
   ],
   "sideEffects": false,
-  "scripts": {
-    "build": "tsc -p tsconfig.build.json",
-    "lint": "eslint .",
-    "typecheck": "tsc -p tsconfig.typecheck.json --noEmit"
-  },
   "devDependencies": {
     "@alveole/eslint-config": "file:../eslint-config",
-    "eslint": "9.39.5",
+    "@testing-library/react": "16.3.3",
+    "babel-preset-expo": "57.0.13",
+    "eslint": "10.10.0",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "30.5.2",
+    "jest-expo": "57.0.5",
     "react": "19.2.3",
-    "react-native": "0.86.3"
+    "react-dom": "19.2.3",
+    "react-native": "0.86.3",
+    "react-native-web": "0.21.3",
+    "tamagui": "1.144.4"
   },
   "peerDependencies": {
     "@alveole/components": "*",
@@ -33,5 +37,11 @@
     "@alveole/theme": "*",
     "react": "*",
     "react-native": "*"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "lint": "eslint . --cache --cache-strategy content",
+    "typecheck": "tsc -p tsconfig.typecheck.json --noEmit",
+    "test:unit": "npx jest --coverage --maxWorkers=$(node ../../scripts/print-allocated-cpus.mjs) --ci"
   }
-}
+}

package/dist/styles.d.ts

@@ -1,7 +0,0 @@
-export declare const screenContent: {
-    readonly display: "flex";
-    readonly gap: 24;
-    readonly pt: "150";
-    readonly pb: "150";
-};
-//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa;;;;;CAKhB,CAAC"}

package/dist/styles.js

@@ -1,6 +0,0 @@
-export const screenContent = {
-    display: 'flex',
-    gap: 24,
-    pt: '150',
-    pb: '150',
-};