@alveole/storybook 1.0.0 → 1.1.0

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.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":"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,gCAgC3D,CAAC"}

package/dist/components/StoryCard.js

@@ -2,10 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Badge, Box, Card, Typography } from '@alveole/components';
 import { useTheme } from '@alveole/theme';
 import { Pressable } from 'react-native';
-import { getStoryFlags } from '../utils';
+import { getStoryFlags, stripMarkdown } from '../utils';
 export const StoryCard = ({ story, onPress }) => {
     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(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: description })] }) }) }));
 };

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":"AAYA,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;AA0IF,eAAO,MAAM,iBAAiB,GAAI,2DAK/B,sBAAsB,sBAyKxB,CAAC"}

package/dist/screens/StoryDetailScreen.js

@@ -1,11 +1,11 @@
 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, 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';
+import { getStoryExamples, getStoryFlags, stripMarkdown } 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: {
@@ -25,8 +25,9 @@ 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 +37,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 +58,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(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: [
                                     {
                                         value: 'examples',
                                         label: 'Examples',

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeCSSVariablesScreen.d.ts","sourceRoot":"","sources":["../../src/screens/ThemeCSSVariablesScreen.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,MAAM,OAAO,CAAC;AA0P1B,MAAM,MAAM,4BAA4B,GAAG;IACzC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AAIF,eAAO,MAAM,uBAAuB,GAAI,kCAAkC,4BAA4B,sBA+DrG,CAAC"}
+{"version":3,"file":"ThemeCSSVariablesScreen.d.ts","sourceRoot":"","sources":["../../src/screens/ThemeCSSVariablesScreen.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,MAAM,OAAO,CAAC;AA0P1B,MAAM,MAAM,4BAA4B,GAAG;IACzC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AAIF,eAAO,MAAM,uBAAuB,GAAI,kCAAkC,4BAA4B,sBA+DrG,CAAC"}

package/dist/screens/ThemeCSSVariablesScreen.js

@@ -1,11 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Accordion, Box, Page, PageHeader, Section, Typography, useToast } from '@alveole/components';
-import { Colors, CustomPalette, Spacings, useTheme } from '@alveole/theme';
-import { Elevations } from '@alveole/theme/src/constants/Elevation';
-import { FontWeightMap } from '@alveole/theme/src/constants/Font';
-import { RadiusList } from '@alveole/theme/src/constants/Radius';
-import { CustomTypography } from '@alveole/theme/src/constants/Typography';
-import { sanitizeCSSKey } from '@alveole/theme/src/helpers/sanitizeCSSKey';
+import { Colors, CustomPalette, CustomTypography, Elevations, FontWeightMap, RadiusList, Spacings, sanitizeCSSKey, useTheme, } from '@alveole/theme';
 import React from 'react';
 import { Platform, Pressable } from 'react-native';
 import { screenContent } from '../styles';

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.0",
+  "version": "1.1.0",
   "description": "Catalog screens and helpers for Alveole stories and theme tokens.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",