@alveole/storybook 1.0.1 → 1.1.1

package/README.md

@@ -69,6 +69,16 @@ export const BoxPadded = () => (
 
 Le `default` porte les metadonnees de la story. Les autres exports sont les variantes affichees par `StoryDetailScreen`.
 
+### Champ `shortDescription`
+
+Optionnel. A renseigner quand `description` contient du Markdown ou depasse 160 caracteres.
+
+- Max 160 caracteres
+- Texte brut uniquement (pas de Markdown)
+- Utilise pour `<meta name="description">` sur la page de detail du composant
+
+Si absent, la meta description est calculee automatiquement en retirant le Markdown de `description`.
+
 Concretement, `@alveole/storybook` n'introduit pas un nouveau format de story. Il reutilise celui que tu ecris deja dans `packages/components/src/**/*.stories.tsx`.
 
 ## Structure attendue par le package

package/dist/components/SearchField.js

@@ -4,7 +4,7 @@ import { useTheme } from '@alveole/theme';
 import React from 'react';
 import { Platform, TextInput } from 'react-native';
 export const SearchField = ({ label, placeholder, value, onChangeText, size = 'md' }) => {
-    const { text, color, radius, spacing } = useTheme();
+    const { text, color, radius, spacingValue } = useTheme();
     const inputRef = React.useRef(null);
     React.useEffect(() => {
         if (Platform.OS !== 'web')
@@ -22,8 +22,8 @@ export const SearchField = ({ label, placeholder, value, onChangeText, size = 'm
                     borderWidth: 1,
                     borderColor: color.light.border['default-grey'],
                     borderRadius: radius('md'),
-                    paddingVertical: size === 'sm' ? spacing('1,5V') : spacing('1W'),
-                    paddingHorizontal: spacing('2W'),
+                    paddingVertical: size === 'sm' ? spacingValue('1,5V') : spacingValue('1W'),
+                    paddingHorizontal: spacingValue('2W'),
                     backgroundColor: color.light.background['default-grey'],
                     color: color.light.text['default-grey'],
                     ...(size === 'sm' ? text['Corps de texte'].SM.Regular : text['Corps de texte'].MD.Regular),

package/dist/components/StoryCard.d.ts

@@ -1,7 +1,7 @@
 import { StorybookModule } from '../types';
 export type StoryCardProps = {
     story: StorybookModule;
-    onPress?: (story: StorybookModule) => void;
+    href: string;
 };
-export declare const StoryCard: ({ story, onPress }: StoryCardProps) => import("react").JSX.Element;
+export declare const StoryCard: ({ story, href }: StoryCardProps) => import("react").JSX.Element;
 //# sourceMappingURL=StoryCard.d.ts.map

package/dist/components/StoryCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StoryCard.d.ts","sourceRoot":"","sources":["../../src/components/StoryCard.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAG3C,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,oBAAoB,cAAc,gCA8B3D,CAAC"}
+{"version":3,"file":"StoryCard.d.ts","sourceRoot":"","sources":["../../src/components/StoryCard.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAG3C,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,eAAe,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,iBAAiB,cAAc,gCA6BxD,CAAC"}

package/dist/components/StoryCard.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Badge, Box, Card, Typography } from '@alveole/components';
+import { A, Badge, Box, Card, Typography } from '@alveole/components';
 import { useTheme } from '@alveole/theme';
-import { Pressable } from 'react-native';
-import { getStoryFlags } from '../utils';
-export const StoryCard = ({ story, onPress }) => {
+import { getStoryFlags, stripMarkdown } from '../utils';
+export const StoryCard = ({ story, href }) => {
     const { text, isVariant } = useTheme();
     const meta = story.default;
     const flags = getStoryFlags(meta);
-    return (_jsx(Pressable, { onPress: onPress ? () => onPress(story) : undefined, style: { height: isVariant('mobile') ? undefined : '100%' }, children: _jsx(Card, { height: isVariant('mobile') ? undefined : '100%', children: _jsxs(Box, { display: "flex", gap: 12, p: '100', style: { height: isVariant('mobile') ? undefined : '100%' }, children: [_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: [meta.tags.map(tag => (_jsx(Badge, { variant: "info", size: "sm", style: { marginRight: 0 }, children: tag }, tag))), flags.map(flag => (_jsx(Badge, { variant: "default", size: "sm", style: { marginRight: 0 }, children: flag.label }, flag.key)))] }), _jsx(Typography, { style: text.Titres['H5 - XS'], children: meta.title }), _jsx(Typography, { style: text['Corps de texte'].SM.Regular, children: meta.description })] }) }) }));
+    const description = meta.shortDescription ?? stripMarkdown(meta.description);
+    return (_jsx(A, { href: href, style: { height: isVariant('mobile') ? undefined : '100%' }, children: _jsx(Card, { height: isVariant('mobile') ? undefined : '100%', children: _jsxs(Box, { display: "flex", gap: 12, p: '100', style: { height: isVariant('mobile') ? undefined : '100%' }, children: [_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: [meta.tags.map(tag => (_jsx(Badge, { variant: "info", size: "sm", style: { marginRight: 0 }, children: tag }, tag))), flags.map(flag => (_jsx(Badge, { variant: "default", size: "sm", style: { marginRight: 0 }, children: flag.label }, flag.key)))] }), _jsx(Typography, { style: text.Titres['H5 - XS'], children: meta.title }), _jsx(Typography, { style: text['Corps de texte'].SM.Regular, children: description })] }) }) }));
 };

package/dist/pages/UIKitPage.js

@@ -39,7 +39,7 @@ export const UIKitPage = ({ stories, constants, palette = CustomPalette, typogra
         return (_jsx(HomeScreen, { title: title, description: description, blankPage: blankPage, onOpenComponents: () => push({ name: 'components' }), onOpenTheme: () => push({ name: 'theme-home' }), onOpenConstants: () => push({ name: 'constants' }), onOpenBlank: () => push({ name: 'blank' }), onOpenPhilosophy: () => push({ name: 'philosophy' }) }));
     }
     if (route.name === 'components') {
-        return (_jsx(StoriesScreen, { beforeContent: beforeContent, stories: stories, title: "UI Kit - Composants", description: "Catalogue des composants", createLabel: blankPage ? (blankPage.title ?? 'Page vierge') : undefined, onCreatePress: blankPage ? () => push({ name: 'blank' }) : undefined, onSelectStory: story => push({ name: 'component-detail', story }) }));
+        return (_jsx(StoriesScreen, { beforeContent: beforeContent, stories: stories, title: "UI Kit - Composants", description: "Catalogue des composants", createLabel: blankPage ? (blankPage.title ?? 'Page vierge') : undefined, onCreatePress: blankPage ? () => push({ name: 'blank' }) : undefined, getStoryHref: story => `/components/${encodeURIComponent(story.default.title)}` }));
     }
     if (route.name === 'component-detail') {
         return (_jsx(StoryDetailScreen, { beforeContent: beforeContent, story: route.story, notFoundMessage: "Composant introuvable" }));

package/dist/screens/StoriesScreen.d.ts

@@ -9,7 +9,7 @@ export type StoriesScreenProps = {
     footerContent?: React.ReactNode;
     createLabel?: string;
     onCreatePress?: () => void;
-    onSelectStory?: (story: StorybookModule) => void;
+    getStoryHref: (story: StorybookModule) => string;
 };
-export declare const StoriesScreen: ({ stories, title, description, emptyMessage, beforeContent, footerContent, createLabel, onCreatePress, onSelectStory, }: StoriesScreenProps) => React.JSX.Element;
+export declare const StoriesScreen: ({ stories, title, description, emptyMessage, beforeContent, 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,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,yHAU3B,kBAAkB,sBAkJpB,CAAC"}
+{"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"}

package/dist/screens/StoriesScreen.js

@@ -14,7 +14,7 @@ const AVAILABLE_FLAGS = [
     { 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, onSelectStory, }) => {
+export const StoriesScreen = ({ stories, title = 'UI Kit - Components', description = 'Shared component catalog', emptyMessage = 'No story found.', beforeContent, footerContent, createLabel, onCreatePress, getStoryHref, }) => {
     const { text } = useTheme();
     const { width } = useWindowDimensions();
     const columns = width >= 1200 ? 3 : width >= 768 ? 2 : 1;
@@ -41,5 +41,5 @@ export const StoriesScreen = ({ stories, title = 'UI Kit - Components', descript
                                         } }, 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, onPress: onSelectStory }) }, story.default.title))) })] }) }, tag))))] }), footerContent] }));
+                                        } }, 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] }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"StoryDetailScreen.d.ts","sourceRoot":"","sources":["../../src/screens/StoryDetailScreen.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAG3C,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AAiIF,eAAO,MAAM,iBAAiB,GAAI,2DAK/B,sBAAsB,sBAwKxB,CAAC"}
+{"version":3,"file":"StoryDetailScreen.d.ts","sourceRoot":"","sources":["../../src/screens/StoryDetailScreen.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAG3C,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AAsGF,eAAO,MAAM,iBAAiB,GAAI,2DAK/B,sBAAsB,sBA6KxB,CAAC"}

package/dist/screens/StoryDetailScreen.js

@@ -1,32 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AnchorHeading, Box, Button, Divider, Page, PageHeader, Section, Typography } from '@alveole/components';
+import { AnchorHeading, Box, Button, Divider, MarkdownDescription, Page, PageHeader, Section, Tag, Typography, } from '@alveole/components';
 import { useTheme } from '@alveole/theme';
 import React from 'react';
 import { Linking, ScrollView } from 'react-native';
 import { JsonBlock } from '../components/JsonBlock';
 import { screenContent } from '../styles';
-import { getStoryExamples, getStoryFlags } from '../utils';
-const DetailPill = ({ label, tone = 'info' }) => {
-    const { color, radius, text, spacing } = useTheme();
-    return (_jsx(Box, { borderColor: tone === 'tag' ? color.light.border['action-low-primary'] : color.light.border['default-grey'], borderRadius: radius('full'), borderWidth: 1, style: {
-            backgroundColor: tone === 'tag' ? color.light.background['contrast-info'] : color.light.background['default-grey'],
-            paddingLeft: spacing('1W'),
-            paddingRight: spacing('1W'),
-            paddingTop: spacing('0,5V'),
-            paddingBottom: spacing('0,5V'),
-        }, children: _jsx(Typography, { style: [
-                text['Corps de texte'].XS.CapsBold,
-                {
-                    color: tone === 'tag' ? color.light.text['default-info'] : color.light.text['default-grey'],
-                },
-            ], children: label }) }));
-};
+import { getStoryExamples, getStoryFlags, stripMarkdown } from '../utils';
 const MetaCard = ({ label, value }) => {
     const { color, radius, text } = useTheme();
     return (_jsxs(Box, { borderColor: color.light.border['default-grey'], borderRadius: radius('md'), borderWidth: 1, display: "flex", gap: 4, p: '100', style: { backgroundColor: color.light.background['alt-grey'], minWidth: 160 }, children: [_jsx(Typography, { style: text['Corps de texte'].XS.CapsBold, children: label }), _jsx(Typography, { style: text['Corps de texte'].SM.SemiBold, children: value })] }));
 };
+const getSources = (story) => story.Sources;
 const getStoryExampleSource = (story, exampleName) => {
-    const sources = story.Sources;
+    const sources = getSources(story);
     const source = sources?.storySources?.[exampleName] ?? sources?.[exampleName];
     if (typeof source === 'string')
         return source;
@@ -36,6 +22,10 @@ const getStoryExampleSource = (story, exampleName) => {
     }
     return null;
 };
+const getStoryExampleDescription = (story, exampleName) => {
+    const description = getSources(story)?.storyDescriptions?.[exampleName];
+    return typeof description === 'string' ? description : null;
+};
 const DetailTabs = ({ tabs, defaultValue }) => {
     const initialValue = defaultValue || tabs[0]?.value || '';
     const [activeValue, setActiveValue] = React.useState(initialValue);
@@ -53,16 +43,17 @@ export const StoryDetailScreen = ({ story, notFoundMessage = 'Story not found.',
     const isTemplate = meta.tags.includes('Template');
     const examplesContent = (_jsx(Box, { display: "flex", gap: 24, mt: '1,5V', children: examples.map(([key, Example]) => {
             const source = getStoryExampleSource(story, key);
-            return (_jsxs(Box, { borderColor: color.light.border['default-grey'], borderRadius: radius('lg'), borderWidth: 1, display: "flex", gap: 16, p: '150', style: { backgroundColor: color.light.background['alt-grey'] }, children: [!isTemplate ? (_jsx(Box, { display: "flex", gap: 6, children: _jsx(AnchorHeading, { style: text.Titres['H5 - XS'], children: key }) })) : null, _jsx(Box, { borderColor: color.light.border['default-grey'], borderWidth: 1, borderRadius: radius('md'), p: '100', style: {
+            const description = getStoryExampleDescription(story, key);
+            return (_jsxs(Box, { borderColor: color.light.border['default-grey'], borderRadius: radius('lg'), borderWidth: 1, display: "flex", gap: 16, p: '150', style: { backgroundColor: color.light.background['alt-grey'] }, children: [!isTemplate ? (_jsxs(Box, { display: "flex", gap: 6, children: [_jsx(AnchorHeading, { style: text.Titres['H5 - XS'], children: key }), description ? _jsx(MarkdownDescription, { children: description }) : null] })) : null, _jsx(Box, { borderColor: color.light.border['default-grey'], borderWidth: 1, borderRadius: radius('md'), p: '100', style: {
                             backgroundColor: color.light.background['default-grey'],
                             minHeight: isTemplate ? 420 : undefined,
                         }, children: _jsx(Example, {}) }), _jsx(Divider, { mt: "1W", mb: "1,5V" }), source ? _jsx(JsonBlock, { language: "tsx", value: source }) : null] }, key));
         }) }));
-    return (_jsx(Page, { scrollable: true, title: meta.title, description: meta.description, beforeContent: beforeContent, footerContent: footerContent, children: _jsxs(Box, { ...screenContent, children: [_jsx(Section, { withPaddingY: false, children: _jsx(PageHeader, { title: meta.title }) }), _jsx(Section, { withPaddingY: false, children: _jsxs(Box, { display: "flex", gap: 20, children: [_jsxs(Box, { borderColor: color.light.border['default-grey'], borderRadius: radius('lg'), borderWidth: 1, display: "flex", gap: 16, p: '150', style: { backgroundColor: color.light.background['alt-grey'] }, children: [_jsxs(Box, { display: "flex", gap: 12, style: {
+    return (_jsx(Page, { scrollable: true, title: meta.title, description: meta.shortDescription ?? stripMarkdown(meta.description), beforeContent: beforeContent, footerContent: footerContent, children: _jsxs(Box, { ...screenContent, children: [_jsx(Section, { withPaddingY: false, children: _jsx(PageHeader, { title: meta.title }) }), _jsx(Section, { withPaddingY: false, children: _jsxs(Box, { display: "flex", gap: 20, children: [_jsxs(Box, { borderColor: color.light.border['default-grey'], borderRadius: radius('lg'), borderWidth: 1, display: "flex", gap: 16, p: '150', style: { backgroundColor: color.light.background['alt-grey'] }, children: [_jsxs(Box, { display: "flex", gap: 12, style: {
                                             alignItems: 'flex-start',
                                             flexDirection: 'row',
                                             justifyContent: 'space-between',
-                                        }, children: [_jsxs(Box, { display: "flex", gap: 6, style: { flex: 1 }, children: [_jsx(Typography, { style: text.Titres['H3 - MD'], children: meta.title }), _jsx(Typography, { style: text['Corps de texte'].MD.Regular, children: meta.description })] }), meta.figmaURL ? (_jsx(Button, { title: "Ouvrir Figma", variant: "primary", onPress: () => Linking.openURL(meta.figmaURL) })) : null] }), _jsxs(Box, { display: "flex", gap: 10, children: [_jsx(Typography, { style: text['Corps de texte'].XS.CapsBold, children: "Tags" }), _jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: meta.tags.map(tag => (_jsx(DetailPill, { label: tag, tone: "tag" }, tag))) })] }), flags.length > 0 ? (_jsxs(Box, { display: "flex", gap: 10, children: [_jsx(Typography, { style: text['Corps de texte'].XS.CapsBold, children: "Informations" }), _jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: flags.map(flag => (_jsx(DetailPill, { label: flag.label }, flag.key))) })] })) : null, _jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 12, children: [_jsx(MetaCard, { label: "Exemples", value: String(examples.length) }), _jsx(MetaCard, { label: "Styles", value: "Disponibles" }), meta.props != null ? _jsx(MetaCard, { label: "Props", value: "Document\u00E9es" }) : null] })] }), _jsx(DetailTabs, { defaultValue: "examples", tabs: [
+                                        }, children: [_jsx(Box, { display: "flex", gap: 6, style: { flex: 1 }, children: _jsx(MarkdownDescription, { children: meta.description }) }), meta.figmaURL ? (_jsx(Button, { title: "Ouvrir Figma", variant: "primary", onPress: () => Linking.openURL(meta.figmaURL) })) : null] }), _jsxs(Box, { display: "flex", gap: 10, children: [_jsx(Typography, { style: text['Corps de texte'].XS.CapsBold, children: "Tags" }), _jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: meta.tags.map(tag => (_jsx(Tag, { color: "action", size: "md", children: tag }, tag))) })] }), flags.length > 0 ? (_jsxs(Box, { display: "flex", gap: 10, children: [_jsx(Typography, { style: text['Corps de texte'].XS.CapsBold, children: "Informations" }), _jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: flags.map(flag => (_jsx(Tag, { color: "default", size: "md", children: flag.label }, flag.key))) })] })) : null, _jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 12, children: [_jsx(MetaCard, { label: "Exemples", value: String(examples.length) }), _jsx(MetaCard, { label: "Styles", value: "Disponibles" }), meta.props != null ? _jsx(MetaCard, { label: "Props", value: "Document\u00E9es" }) : null] })] }), _jsx(DetailTabs, { defaultValue: "examples", tabs: [
                                     {
                                         value: 'examples',
                                         label: 'Examples',

package/dist/utils.d.ts

@@ -14,4 +14,5 @@ export declare const getStoryExamples: (story: StorybookModule) => [string, Excl
 export declare const toStoryModules: (stories: Record<string, unknown>) => StorybookModule[];
 export declare const findStoryByTitle: (stories: StorybookModule[], title: string | undefined | null) => StorybookModule | null;
 export declare const findConstantByName: (constants: Record<string, unknown>, name: string | undefined | null) => [string, unknown] | null;
+export declare const stripMarkdown: (markdown: 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"}
+{"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"}

package/dist/utils.js

@@ -46,3 +46,14 @@ export const getStoryExamples = (story) => Object.entries(story).filter(([key, v
 export const toStoryModules = (stories) => Object.values(stories);
 export const findStoryByTitle = (stories, title) => stories.find(story => story.default.title === title) ?? null;
 export const findConstantByName = (constants, name) => Object.entries(constants).find(([key]) => key === name) ?? null;
+export const stripMarkdown = (markdown) => markdown
+    .replace(/#{1,6}\s*/g, '')
+    .replace(/\*\*([^*]+)\*\*/g, '$1')
+    .replace(/__([^_]+)__/g, '$1')
+    .replace(/\*([^*]+)\*/g, '$1')
+    .replace(/_([^_]+)_/g, '$1')
+    .replace(/`([^`]+)`/g, '$1')
+    .replace(/^\s*[-*+]\s+/gm, '')
+    .replace(/^\s*\d+\.\s+/gm, '')
+    .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
+    .trim();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alveole/storybook",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "description": "Catalog screens and helpers for Alveole stories and theme tokens.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -23,7 +23,7 @@
   },
   "devDependencies": {
     "@alveole/eslint-config": "file:../eslint-config",
-    "eslint": "9.39.4",
+    "eslint": "9.39.5",
     "react": "19.2.3",
     "react-native": "0.85.3"
   },