@alveole/storybook 2.0.0-alpha.12 → 2.0.0-alpha.13

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

@@ -1 +1 @@
-{"version":3,"file":"ExampleBlock.d.ts","sourceRoot":"","sources":["../../src/components/ExampleBlock.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AA8F1B,MAAM,MAAM,iBAAiB,GAAG;IAC9B,0FAA0F;IAC1F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kFAAkF;IAClF,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,2FAA2F;IAC3F,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,8EAA8E;AAC9E,eAAO,MAAM,YAAY,GAAI,kCAA0C,iBAAiB,sBAkCvF,CAAC"}
+{"version":3,"file":"ExampleBlock.d.ts","sourceRoot":"","sources":["../../src/components/ExampleBlock.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAuH1B,MAAM,MAAM,iBAAiB,GAAG;IAC9B,0FAA0F;IAC1F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kFAAkF;IAClF,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,2FAA2F;IAC3F,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,8EAA8E;AAC9E,eAAO,MAAM,YAAY,GAAI,kCAA0C,iBAAiB,sBAkCvF,CAAC"}

package/dist/components/ExampleBlock.js

@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Box, Button, Highlight, Typography } from '@alveole/components';
 import { useTheme } from '@alveole/theme';
 import React from 'react';
-import { Platform } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
+import Svg, { Circle, Defs, Pattern, Rect } from 'react-native-svg';
 import { decouperSource } from '../storySource';
 /** Au delà, la source prend plus de place que ce qu'elle documente. */
 const LIGNES_VISIBLES = 12;
@@ -17,14 +18,17 @@ const PAS_DE_LA_TRAME = 16;
  */
 const Scene = ({ children, pleinEcran }) => {
     const { color } = useTheme();
-    return (_jsx(Box, { p: Platform.OS === 'web' ? '3W' : '1W', style: {
+    const trameId = `trame-${React.useId().replace(/[^a-zA-Z0-9_-]/g, '')}`;
+    return (_jsxs(Box, { p: Platform.OS === 'web' ? '3W' : '1W', style: {
             backgroundColor: color.light.background['default-grey'],
-            backgroundImage: `radial-gradient(circle, ${color.light.border['default-grey']} 1px, transparent 1px)`,
-            backgroundSize: `${PAS_DE_LA_TRAME}px ${PAS_DE_LA_TRAME}px`,
+            ...(Platform.OS === 'web' && {
+                backgroundImage: `radial-gradient(circle, ${color.light.border['default-grey']} 1px, transparent 1px)`,
+                backgroundSize: `${PAS_DE_LA_TRAME}px ${PAS_DE_LA_TRAME}px`,
+            }),
             alignItems: pleinEcran ? undefined : 'center',
             justifyContent: 'center',
             minHeight: pleinEcran ? 420 : 160,
-        }, children: children }));
+        }, children: [Platform.OS !== 'web' && (_jsxs(Svg, { style: StyleSheet.absoluteFill, pointerEvents: "none", accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: [_jsx(Defs, { children: _jsx(Pattern, { id: trameId, width: PAS_DE_LA_TRAME, height: PAS_DE_LA_TRAME, patternUnits: "userSpaceOnUse", children: _jsx(Circle, { cx: PAS_DE_LA_TRAME / 2, cy: PAS_DE_LA_TRAME / 2, r: 1, fill: color.light.border['default-grey'] }) }) }), _jsx(Rect, { width: "100%", height: "100%", fill: `url(#${trameId})` })] })), children] }));
 };
 /**
  * La barre qui sépare la démonstration de sa source : elle dit où finit ce qu'on montre et

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alveole/storybook",
-  "version": "2.0.0-alpha.12",
+  "version": "2.0.0-alpha.13",
   "description": "Catalog screens and helpers for Alveole stories and theme tokens.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -36,7 +36,8 @@
     "@alveole/core": "*",
     "@alveole/theme": "*",
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-svg": "^15.0.0"
   },
   "scripts": {
     "build": "pnpm run generate:sources && tsc -p tsconfig.build.json",