@alveole/storybook 2.0.0-alpha.5 → 2.0.0-alpha.7

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

@@ -1 +1 @@
-{"version":3,"file":"ExemplesDeLaStory.d.ts","sourceRoot":"","sources":["../../src/components/ExemplesDeLaStory.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAiB,eAAe,EAAE,MAAM,UAAU,CAAC;AAuEnE,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,8FAA8F;IAC9F,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,4FAA4F;AAC5F,eAAO,MAAM,iBAAiB,GAAI,8BAA8B,sBAAsB,gCAUrF,CAAC"}
+{"version":3,"file":"ExemplesDeLaStory.d.ts","sourceRoot":"","sources":["../../src/components/ExemplesDeLaStory.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAiB,eAAe,EAAE,MAAM,UAAU,CAAC;AAwEnE,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,8FAA8F;IAC9F,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,4FAA4F;AAC5F,eAAO,MAAM,iBAAiB,GAAI,8BAA8B,sBAAsB,gCAUrF,CAAC"}

package/dist/components/ExemplesDeLaStory.js

@@ -4,6 +4,7 @@ import { FOCUS_ATTRIBUTE, useTheme } from '@alveole/theme';
 import { descriptionDeLExemple, sourceDeLExemple } from '../screens/sourcesDExemples';
 import { getStoryFlags } from '../utils';
 import { ExampleBlock } from './ExampleBlock';
+import { styleDuLienBrut } from './styleDuLienBrut';
 /**
  * Une demonstration. Le titre et la description appartiennent au document : ils restent dans le
  * flux de la page, hors de tout cadre, pour pouvoir etre ancres et repris dans un sommaire. Le
@@ -21,7 +22,7 @@ const UnExemple = ({ story, nom, Rendu, gabarit }) => {
  */
 const StatutDeLaFiche = ({ meta }) => {
     const { color, text } = useTheme();
-    return (_jsxs(Box, { display: "flex", flexDirection: "row", style: { alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: [meta.tags.map(tag => (_jsx(Tag, { size: "md", children: tag }, tag))), getStoryFlags(meta).map(flag => (_jsx(Tag, { size: "md", children: flag.label }, flag.key)))] }), meta.figmaURL ? (_jsx("a", { href: meta.figmaURL, rel: "noreferrer", style: { textDecoration: 'none' }, target: "_blank", [FOCUS_ATTRIBUTE]: 'ring', children: _jsx(Typography, { style: { ...text['Corps de texte'].SM.Bold, color: color.light.text['action-high-primary'] }, children: "Ouvrir Figma" }) })) : null] }));
+    return (_jsxs(Box, { display: "flex", flexDirection: "row", style: { alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: [meta.tags.map(tag => (_jsx(Tag, { size: "md", children: tag }, tag))), getStoryFlags(meta).map(flag => (_jsx(Tag, { size: "md", children: flag.label }, flag.key)))] }), meta.figmaURL ? (_jsx("a", { href: meta.figmaURL, rel: "noreferrer", style: styleDuLienBrut, target: "_blank", [FOCUS_ATTRIBUTE]: 'ring', children: _jsx(Typography, { style: { ...text['Corps de texte'].SM.Bold, color: color.light.text['action-high-primary'] }, children: "Ouvrir Figma" }) })) : null] }));
 };
 /** Les demonstrations d'une fiche, les unes sous les autres, sous le statut de la fiche. */
 export const ExemplesDeLaStory = ({ story, exemples, gabarit }) => (_jsxs(Box, { display: "flex", gap: 40, mt: '5W', children: [_jsx(StatutDeLaFiche, { meta: story.default }), exemples.map(([nom, Rendu]) => (_jsx(UnExemple, { story: story, nom: nom, Rendu: Rendu, gabarit: gabarit }, nom)))] }));

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

@@ -1 +1 @@
-{"version":3,"file":"StorySummary.d.ts","sourceRoot":"","sources":["../../src/components/StorySummary.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,6EAA6E;IAC7E,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB,CAAC;AAEF,wFAAwF;AACxF,eAAO,MAAM,YAAY,GAAI,aAAa,iBAAiB,gCA0B1D,CAAC"}
+{"version":3,"file":"StorySummary.d.ts","sourceRoot":"","sources":["../../src/components/StorySummary.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,6EAA6E;IAC7E,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB,CAAC;AAEF,wFAAwF;AACxF,eAAO,MAAM,YAAY,GAAI,aAAa,iBAAiB,gCAqB1D,CAAC"}

package/dist/components/StorySummary.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, toSlug, Typography } from '@alveole/components';
 import { FOCUS_ATTRIBUTE, useTheme } from '@alveole/theme';
+import { styleDuLienBrut } from './styleDuLienBrut';
 /** Le sommaire d'une page : une entrée par section, vers l'ancre que pose son titre. */
 export const StorySummary = ({ entrees }) => {
     const { color, text } = useTheme();
-    return (_jsxs(Box, { display: "flex", gap: 8, children: [_jsx(Typography, { style: { ...text['Corps de texte'].XS.CapsBold, color: color.light.text['mention-grey'] }, children: "Sur cette page" }), entrees.map(entree => (_jsx("a", { href: `#${toSlug(entree)}`, style: { textDecoration: 'none' }, [FOCUS_ATTRIBUTE]: 'ring', children: _jsx(Typography, { style: { ...text['Corps de texte'].SM.Regular, color: color.light.text['default-grey'] }, children: entree }) }, entree)))] }));
+    return (_jsxs(Box, { display: "flex", gap: 8, children: [_jsx(Typography, { style: { ...text['Corps de texte'].XS.CapsBold, color: color.light.text['mention-grey'] }, children: "Sur cette page" }), entrees.map(entree => (_jsx("a", { href: `#${toSlug(entree)}`, style: styleDuLienBrut, [FOCUS_ATTRIBUTE]: 'ring', children: _jsx(Typography, { style: { ...text['Corps de texte'].SM.Regular, color: color.light.text['default-grey'] }, children: entree }) }, entree)))] }));
 };

package/dist/components/UIKitTopBar.js

@@ -60,7 +60,7 @@ const useNavItemStyles = makeStyles(({ color, radius, spacingValue, text }) => {
  */
 const NavItem = ({ label, href, current, block = false }) => {
     const styles = useNavItemStyles();
-    return (_jsxs(A, { href: href, direction: "replace", ariaCurrent: current ? 'page' : undefined, style: { ...styles.container, alignItems: block ? 'flex-start' : 'center' }, hoverStyle: styles.containerHover, children: [_jsx(Typography, { style: current ? styles.labelCurrent : styles.label, children: label }), _jsx(Box, { "aria-hidden": true, children: _jsx(Typography, { style: styles.labelGhost, children: label }) })] }));
+    return (_jsxs(A, { href: href, direction: "replace", ariaCurrent: current ? 'page' : undefined, style: { ...styles.container, alignItems: block ? 'flex-start' : 'center' }, backgroundColor: { hover: styles.containerHover.backgroundColor }, children: [_jsx(Typography, { style: current ? styles.labelCurrent : styles.label, children: label }), _jsx(Box, { "aria-hidden": true, children: _jsx(Typography, { style: styles.labelGhost, children: label }) })] }));
 };
 /**
  * La barre en version mobile : un menu qui se deplie sous l'entete. L'etat d'ouverture vit ici,

package/dist/components/styleDuLienBrut.d.ts

@@ -0,0 +1,9 @@
+import type { CSSProperties } from 'react';
+/**
+ * Le style d'un `<a>` brut du catalogue qui enveloppe un libellé. En flex, le libellé devient
+ * un bloc à sa propre hauteur de ligne : sinon le lien garde celle de la police que Tamagui v2
+ * remet sur chaque vue, plus haute, et décale son libellé. En colonne, le libellé s'étire à la
+ * largeur du lien et passe à la ligne, là où une rangée le laissait déborder.
+ */
+export declare const styleDuLienBrut: CSSProperties;
+//# sourceMappingURL=styleDuLienBrut.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styleDuLienBrut.d.ts","sourceRoot":"","sources":["../../src/components/styleDuLienBrut.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;;;;GAKG;AACH,eAAO,MAAM,eAAe,EAAE,aAAoF,CAAC"}

package/dist/components/styleDuLienBrut.js

@@ -0,0 +1,7 @@
+/**
+ * Le style d'un `<a>` brut du catalogue qui enveloppe un libellé. En flex, le libellé devient
+ * un bloc à sa propre hauteur de ligne : sinon le lien garde celle de la police que Tamagui v2
+ * remet sur chaque vue, plus haute, et décale son libellé. En colonne, le libellé s'étire à la
+ * largeur du lien et passe à la ligne, là où une rangée le laissait déborder.
+ */
+export const styleDuLienBrut = { display: 'flex', flexDirection: 'column', textDecoration: 'none' };

package/dist/pages/migrationV2.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"migrationV2.d.ts","sourceRoot":"","sources":["../../src/pages/migrationV2.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,4BAA4B,gfAKV,CAAC;AAEhC,eAAO,MAAM,wBAAwB,EAAE,SAAS,kBAAkB,EA6lBjE,CAAC"}
+{"version":3,"file":"migrationV2.d.ts","sourceRoot":"","sources":["../../src/pages/migrationV2.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,4BAA4B,gfAKV,CAAC;AAEhC,eAAO,MAAM,wBAAwB,EAAE,SAAS,kBAAkB,EAopBjE,CAAC"}

package/dist/pages/migrationV2.js

@@ -471,7 +471,7 @@ de la liste : \`options={[...selectedOption ? [selectedOption] : [], ...suggesti
     },
     {
         titre: '5. Icônes → leading / trailing',
-        markdown: `Détail et justification : [leading-trailing.md](https://github.com/Captive-Studio/alveole-js/blob/main/docs/migrations/leading-trailing.md).
+        markdown: `Détail et justification : [leading-trailing.md](https://github.com/captive-studio/alveole-js/blob/main/docs/migrations/leading-trailing.md).
 
 \`\`\`bash
 git grep -nE "startIcon|endIcon|\\bicon[=:]"
@@ -597,7 +597,62 @@ Les clés de spacing dépréciées existent toujours (non cassant) mais leurs us
 l'échelle V/W quand on y passe.`,
     },
     {
-        titre: '8. Vérification finale',
+        titre: '8. Tamagui v2',
+        markdown: `Détail, changements de rendu et relevé par application : [tamagui-v2.md](https://github.com/captive-studio/alveole-js/blob/main/docs/migrations/tamagui-v2.md).
+
+Alveole 2.0 exige Tamagui 3 (section 8 bis) : une application en Tamagui 1 fait d'abord ce saut
+vers la v2, puis celui vers la v3, dans cet ordre. Monter **tous** les paquets \`tamagui\` /
+\`@tamagui/*\` de l'application au même numéro exact, et aligner la clé \`allowScripts\` sur la
+version des paquets \`@alveole/*\` (version unique, ADR 0029).
+
+\`\`\`bash
+git grep -nE "[^a-zA-Z]animation=|onHover(In|Out)|disablePassBorderRadius"
+\`\`\`
+
+| Avant                                                   | Après                             |
+| ------------------------------------------------------- | --------------------------------- |
+| \`animation="…"\` sur un composant Tamagui                | \`transition="…"\`                  |
+| \`onHoverIn\` / \`onHoverOut\` sur Tamagui ou \`Box\`         | \`onMouseEnter\` / \`onMouseLeave\`   |
+| \`disablePassBorderRadius\`                               | retirer                           |
+| \`dataSet\` sur un composant Tamagui                      | attribut direct \`data-x="…"\`      |
+
+\`onHoverIn\` reste valable sur un \`Pressable\` React Native. Ne change pas : \`tag\` de \`Box\` et
+\`Typography\`, et les éléments DOM rendus (un sélecteur CSS sur \`data-table\` reste valable).
+
+Changements de rendu, invisibles au typecheck et en jsdom :
+
+- **chaque vue reprend la police de l'app**, hauteur de ligne comprise : un style de texte posé sur
+  une vue ne descend plus aux enfants, et un texte sans hauteur de ligne prend celle de la config
+  (23 px en \`@tamagui/config\` v3). Les \`Typography\` d'Alveole posent \`normal\` par défaut ;
+- **plus de \`position: relative\` par défaut** : poser \`position: 'relative'\` sur le conteneur d'un
+  enfant absolu, ou \`settings.defaultPosition: 'relative'\` ;
+- **\`flex: 1\` devient \`1 1 0px\`** sur le web : \`flexGrow: 1\`, ou \`settings.styleCompat: 'legacy'\` ;
+- \`Image\` rend un vrai \`<img>\` (\`alt\` exigé) ; \`Switch\` ne compte plus padding ni bordure.`,
+    },
+    {
+        titre: '8 bis. Tamagui v3',
+        markdown: `Détail, changements de rendu et relevé par application : [tamagui-v3.md](https://github.com/captive-studio/alveole-js/blob/main/docs/migrations/tamagui-v3.md).
+
+Les peer dependencies Tamagui d'Alveole sont en \`^3.0.0\` seul.
+
+- **config** : \`@tamagui/config/v3\` et \`/v4\` n'existent plus ; passer à \`@tamagui/config/v5\` avec
+  les animations de \`@tamagui/config/v5-css\` ;
+- **\`SafeAreaProvider\`** enveloppe \`TamaguiProvider\`, tests compris ;
+- **\`@tamagui/babel-plugin\`** n'a pas de version 3 : le retirer de \`package.json\` et de
+  \`babel.config.js\` ;
+- **pseudo-états en clauses** : \`hoverStyle\` et ses voisins disparaissent, de \`Box\` et
+  \`Typography\` aussi (ADR 0031). La valeur de repos et sa clause vivent sur la même prop :
+  \`backgroundColor={{ default: repos, hover: survol }}\`, propriété sortie de \`style\`.
+
+\`\`\`bash
+git grep -nwE "hoverStyle|pressStyle|focusStyle|focusVisibleStyle|enterStyle|exitStyle|disabledStyle"
+\`\`\`
+
+Ce qu'Alveole ne prend pas en charge suit le guide officiel :
+[How to upgrade](https://tamagui.dev/docs/guides/how-to-upgrade).`,
+    },
+    {
+        titre: '9. Vérification finale',
         markdown: `\`\`\`bash
 git grep -nE "\\b(TextField|TextareaField|EmailField|EmailInput|PasswordField|PhoneField|PhoneInput|NumberField|OtpField|FileField|SelectMultiple|Autocomplete\\w*|NativePicker|SelectInput)\\b|startIcon|endIcon|variant=['\\"]link['\\"]|size=['\\"]xs['\\"]|noPadding|borderNone|leftAlign|\\boptional(Text)?[=:]|onActions|actionsIcon|<Tag\\b[^>]*\\bcolor=|Inter-|Barlow-"
 \`\`\`

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeTypographyScreen.d.ts","sourceRoot":"","sources":["../../src/screens/ThemeTypographyScreen.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,0BAA0B,GAAG;IACvC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AAwGF,eAAO,MAAM,qBAAqB,GAAI,4EAOnC,0BAA0B,gCAqC5B,CAAC"}
+{"version":3,"file":"ThemeTypographyScreen.d.ts","sourceRoot":"","sources":["../../src/screens/ThemeTypographyScreen.tsx"],"names":[],"mappings":"AAUA,MAAM,MAAM,0BAA0B,GAAG;IACvC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AAwGF,eAAO,MAAM,qBAAqB,GAAI,4EAOnC,0BAA0B,gCAqC5B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alveole/storybook",
-  "version": "2.0.0-alpha.5",
+  "version": "2.0.0-alpha.7",
   "description": "Catalog screens and helpers for Alveole stories and theme tokens.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,8 +20,8 @@
   "devDependencies": {
     "@alveole/eslint-config": "file:../eslint-config",
     "@testing-library/react": "16.3.3",
-    "babel-preset-expo": "57.0.14",
-    "eslint": "10.10.0",
+    "babel-preset-expo": "57.0.16",
+    "eslint": "10.13.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "30.5.2",
     "jest-expo": "57.0.5",
@@ -29,7 +29,7 @@
     "react-dom": "19.2.3",
     "react-native": "0.86.3",
     "react-native-web": "0.21.4",
-    "tamagui": "1.144.4"
+    "tamagui": "3.0.18"
   },
   "peerDependencies": {
     "@alveole/components": "*",