@alveole/storybook 1.1.0 → 1.1.2

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,gCAgC3D,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,12 +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, stripMarkdown } from '../utils';
-export const StoryCard = ({ story, onPress }) => {
+export const StoryCard = ({ story, href }) => {
     const { text, isVariant } = useTheme();
     const meta = story.default;
     const flags = getStoryFlags(meta);
     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 })] }) }) }));
+    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":"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"}
+{"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,26 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AnchorHeading, Box, Button, Divider, MarkdownDescription, 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, 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: {
-            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 }) }));
-};
 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 })] }));
@@ -68,7 +53,7 @@ export const StoryDetailScreen = ({ story, notFoundMessage = 'Story not found.',
                                             alignItems: 'flex-start',
                                             flexDirection: 'row',
                                             justifyContent: 'space-between',
-                                        }, 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: [
+                                        }, 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alveole/storybook",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "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"
   },