@alveole/storybook 0.35.3 → 0.36.1

package/dist/components/UIKitTopBar.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Typography } from '@alveole/components';
+import { ALVEOLE_COMPONENTS_VERSION, Box, Typography } from '@alveole/components';
 import { useTheme } from '@alveole/theme';
 import { Pressable, useWindowDimensions } from 'react-native';
 export const UIKitTopBar = ({ activeKey, items }) => {
@@ -13,10 +13,10 @@ export const UIKitTopBar = ({ activeKey, items }) => {
                 alignItems: width >= 960 ? 'center' : 'flex-start',
                 flexDirection: width >= 960 ? 'row' : 'column',
                 justifyContent: 'space-between',
-            }, children: [_jsxs(Box, { display: "flex", gap: 2, children: [_jsx(Typography, { style: text['Corps de texte'].XS.CapsBold, children: "UI Kit" }), _jsx(Typography, { style: {
+            }, children: [_jsxs(Box, { display: "flex", gap: 2, children: [_jsx(Typography, { style: text['Corps de texte'].SM.Bold, children: "Alveole \u2022 UI Kit" }), _jsxs(Typography, { style: {
                                 ...text['Corps de texte'].XS.Regular,
                                 color: color.light.text['mention-grey'],
-                            }, children: "Alveole" })] }), _jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: items.map(item => {
+                            }, children: ["Version ", ALVEOLE_COMPONENTS_VERSION] })] }), _jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: items.map(item => {
                         const isActive = item.key === activeKey;
                         return (_jsx(Pressable, { accessibilityRole: "link", onPress: item.onPress, children: ({ pressed }) => (_jsx(Box, { borderColor: isActive ? color.light.border['action-low-primary'] : color.light.border['default-grey'], borderRadius: radius('full'), borderWidth: 1, pl: '100', pr: '100', pt: '075', pb: '075', style: {
                                     backgroundColor: isActive

package/dist/screens/StoryDetailScreen.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { StorybookModule } from '../types';
 export type StoryDetailScreenProps = {
     story?: StorybookModule | null;

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

@@ -1 +1 @@
-{"version":3,"file":"StoryDetailScreen.d.ts","sourceRoot":"","sources":["../../src/screens/StoryDetailScreen.tsx"],"names":[],"mappings":"AAIA,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;CACjC,CAAC;AA8DF,eAAO,MAAM,iBAAiB,GAAI,4CAI/B,sBAAsB,4CAgJxB,CAAC"}
+{"version":3,"file":"StoryDetailScreen.d.ts","sourceRoot":"","sources":["../../src/screens/StoryDetailScreen.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,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;CACjC,CAAC;AAyJF,eAAO,MAAM,iBAAiB,GAAI,4CAI/B,sBAAsB,4CAsJxB,CAAC"}

package/dist/screens/StoryDetailScreen.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Button, Page, Section, Tabs, Typography } from '@alveole/components';
+import { Box, Button, Page, Section, Typography } from '@alveole/components';
 import { useTheme } from '@alveole/theme';
-import { Linking } from 'react-native';
+import React from 'react';
+import { Linking, ScrollView } from 'react-native';
 import { JsonBlock } from '../components/JsonBlock';
 import { getStoryExamples, getStoryFlags } from '../utils';
 const DetailPill = ({ label, tone = 'info' }) => {
@@ -23,6 +24,27 @@ 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 getStoryExampleSource = (story, exampleName) => {
+    const sources = story.Sources;
+    const source = sources?.storySources?.[exampleName] ?? sources?.[exampleName];
+    if (typeof source === 'string')
+        return source;
+    if (typeof source === 'function') {
+        const value = source();
+        return typeof value === 'string' ? value : null;
+    }
+    return null;
+};
+const SourceAccordion = ({ source }) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    return (_jsxs(Box, { display: "flex", gap: 8, children: [_jsx(Box, { style: { alignItems: 'flex-start' }, children: _jsx(Button, { title: isOpen ? 'Masquer le code source' : 'Afficher le code source', size: "sm", variant: "secondary", endIcon: isOpen ? 'ChevronUp' : 'ChevronDown', onPress: () => setIsOpen(value => !value) }) }), isOpen ? _jsx(JsonBlock, { value: source }) : null] }));
+};
+const DetailTabs = ({ tabs, defaultValue }) => {
+    const initialValue = defaultValue || tabs[0]?.value || '';
+    const [activeValue, setActiveValue] = React.useState(initialValue);
+    const activeTab = tabs.find(tab => tab.value === activeValue) ?? tabs[0];
+    return (_jsxs(Box, { display: "flex", gap: 16, children: [_jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: tabs.map(tab => (_jsx(Button, { title: tab.label, size: "sm", variant: "tertiary", selected: tab.value === activeTab?.value, onPress: () => setActiveValue(tab.value) }, tab.value))) }), activeTab?.scrollable ? (_jsx(ScrollView, { style: { flex: 1 }, contentContainerStyle: { paddingBottom: 16 }, keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: true, children: activeTab.content })) : (activeTab?.content)] }));
+};
 export const StoryDetailScreen = ({ story, notFoundMessage = 'Story not found.', beforeContent, }) => {
     const { text, color, radius } = useTheme();
     if (!story) {
@@ -32,15 +54,18 @@ export const StoryDetailScreen = ({ story, notFoundMessage = 'Story not found.',
     const flags = getStoryFlags(meta);
     const examples = getStoryExamples(story);
     const isTemplate = meta.tags.includes('Template');
-    const examplesContent = (_jsx(Box, { display: "flex", gap: 24, mt: '1,5V', children: examples.map(([key, Example]) => (_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(Typography, { style: text.Titres['H5 - XS'], children: key }) })) : 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, {}) })] }, key))) }));
+    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(Typography, { style: text.Titres['H5 - XS'], children: key }) })) : 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, {}) }), source ? _jsx(SourceAccordion, { source: source }) : null] }, key));
+        }) }));
     return (_jsx(Page, { scrollable: true, title: meta.title, description: meta.description, beforeContent: beforeContent, children: _jsx(Section, { withPaddingY: true, 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(Tabs, { defaultValue: "examples", tabs: [
+                                }, 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: [
                             {
                                 value: 'examples',
                                 label: 'Examples',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alveole/storybook",
-  "version": "0.35.3",
+  "version": "0.36.1",
   "description": "Catalog screens and helpers for Alveole stories and theme tokens.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",