@alveole/storybook 0.36.1 → 0.37.2

package/dist/components/JsonBlock.d.ts

@@ -1,5 +1,7 @@
+import { HighlightProps } from '@alveole/components';
 export type JsonBlockProps = {
     value: unknown;
+    language?: HighlightProps['language'];
 };
-export declare const JsonBlock: ({ value }: JsonBlockProps) => import("react/jsx-runtime").JSX.Element;
+export declare const JsonBlock: ({ value, language }: JsonBlockProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=JsonBlock.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"JsonBlock.d.ts","sourceRoot":"","sources":["../../src/components/JsonBlock.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,WAAW,cAAc,4CA0BlD,CAAC"}
+{"version":3,"file":"JsonBlock.d.ts","sourceRoot":"","sources":["../../src/components/JsonBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErE,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,qBAA8B,cAAc,4CAMrE,CAAC"}

package/dist/components/JsonBlock.js

@@ -1,13 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box, Typography } from '@alveole/components';
-import { useTheme } from '@alveole/theme';
-export const JsonBlock = ({ value }) => {
-    const { text, color, radius } = useTheme();
-    return (_jsx(Box, { backgroundColor: color.light.background['alt-grey'], borderColor: color.light.border['plain-grey'], borderRadius: radius('md'), borderWidth: 1, p: '100', mt: '1,5V', width: '100%', children: _jsx(Typography, { style: [
-                text['Corps de texte'].SM.Regular,
-                {
-                    fontFamily: 'monospace',
-                    whiteSpace: 'pre-wrap',
-                },
-            ], children: typeof value === 'string' ? value : JSON.stringify(value, null, 2) }) }));
+import { Box, Highlight } from '@alveole/components';
+export const JsonBlock = ({ value, language = 'json' }) => {
+    return (_jsx(Box, { mt: '1,5V', width: '100%', children: _jsx(Highlight, { language: language, children: typeof value === 'string' ? value : JSON.stringify(value, null, 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;AAyJF,eAAO,MAAM,iBAAiB,GAAI,4CAI/B,sBAAsB,4CAsJxB,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;AAiIF,eAAO,MAAM,iBAAiB,GAAI,4CAI/B,sBAAsB,4CAwJxB,CAAC"}

package/dist/screens/StoryDetailScreen.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Button, Page, Section, Typography } from '@alveole/components';
+import { Box, Button, Divider, Page, Section, Typography } from '@alveole/components';
 import { useTheme } from '@alveole/theme';
 import React from 'react';
 import { Linking, ScrollView } from 'react-native';
@@ -35,10 +35,6 @@ const getStoryExampleSource = (story, exampleName) => {
     }
     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);
@@ -59,7 +55,7 @@ export const StoryDetailScreen = ({ story, notFoundMessage = 'Story not found.',
             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));
+                        }, 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, 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',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alveole/storybook",
-  "version": "0.36.1",
+  "version": "0.37.2",
   "description": "Catalog screens and helpers for Alveole stories and theme tokens.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -27,6 +27,7 @@
   },
   "peerDependencies": {
     "@alveole/components": "*",
+    "@alveole/core": "*",
     "@alveole/theme": "*",
     "react": "*",
     "react-native": "*"