@alveole/storybook 0.36.0 → 0.36.2

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;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;AA8GF,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

@@ -24,6 +24,21 @@ 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);
@@ -39,10 +54,13 @@ 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',

package/package.json

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