@alveole/components 1.10.0 → 2.0.0-alpha.1

package/dist/ui/Spinner/Spinner.stories.d.ts

@@ -4,7 +4,7 @@ declare const _default: {
     experimental: false;
     description: string;
     shortDescription: string;
-    component: ({ size, delay, style }: import("./Spinner.shared").SpinnerProps) => import("react").JSX.Element | null;
+    component: ({ style, ...props }: import("./Spinner.shared").SpinnerProps) => import("react").JSX.Element | null;
     styleFn: () => {
         track: {
             color: string;
@@ -16,6 +16,13 @@ declare const _default: {
 };
 export default _default;
 export declare const Sizes: () => import("react").JSX.Element;
+/**
+ * `delay` retarde l'apparition du spinner pour éviter un flash sur les opérations rapides :
+ * rien ne s'affiche avant que le délai ne soit écoulé. `'short'` attend 300 ms, `'long'`
+ * (comme `true`) 1 000 ms ; un `number` accepte n'importe quel délai personnalisé en
+ * millisecondes. C'est cette même prop que `Button` expose sous le nom `loadingDelay`, pour
+ * régler le retard de son propre spinner pendant `isLoading`.
+ */
 export declare const WithDelay: () => import("react").JSX.Element;
 export * as Sources from './Spinner.stories.sources';
 //# sourceMappingURL=Spinner.stories.d.ts.map

package/dist/ui/Spinner/Spinner.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Spinner/Spinner.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAKA,wBAiBkB;AAElB,eAAO,MAAM,KAAK,mCAMjB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAKrB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"Spinner.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Spinner/Spinner.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAKA,wBAiBkB;AAElB,eAAO,MAAM,KAAK,mCAMjB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,mCAKrB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC"}

package/dist/ui/Spinner/Spinner.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '../../core';
+import { Box } from '../../core/Box';
 import { Spinner } from './Spinner';
 import { useStyles } from './Spinner.styles';
 export default {
@@ -21,5 +21,12 @@ La prop \`delay\` permet de retarder l'apparition du spinner pour éviter un fla
     styleFn: useStyles,
 };
 export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", style: { alignItems: 'center' }, gap: 16, children: [_jsx(Spinner, { size: "sm" }), _jsx(Spinner, { size: "md" }), _jsx(Spinner, { size: "lg" })] }));
+/**
+ * `delay` retarde l'apparition du spinner pour éviter un flash sur les opérations rapides :
+ * rien ne s'affiche avant que le délai ne soit écoulé. `'short'` attend 300 ms, `'long'`
+ * (comme `true`) 1 000 ms ; un `number` accepte n'importe quel délai personnalisé en
+ * millisecondes. C'est cette même prop que `Button` expose sous le nom `loadingDelay`, pour
+ * régler le retard de son propre spinner pendant `isLoading`.
+ */
 export const WithDelay = () => (_jsxs(Box, { display: "flex", flexDirection: "row", style: { alignItems: 'center' }, gap: 16, children: [_jsx(Spinner, { size: "md", delay: "short" }, "short"), _jsx(Spinner, { size: "md", delay: "long" }, "long")] }));
 export * as Sources from './Spinner.stories.sources';

package/dist/ui/Spinner/Spinner.stories.sources.d.ts

@@ -5,4 +5,5 @@ export declare const storySources: {
     readonly WithDelay: () => string;
 };
 export type StorySourceName = keyof typeof storySources;
+export declare const storyDescriptions: Partial<Record<StorySourceName, string>>;
 //# sourceMappingURL=Spinner.stories.sources.d.ts.map

package/dist/ui/Spinner/Spinner.stories.sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Spinner/Spinner.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,cAAsO,CAAC;AAEzP,eAAO,MAAM,SAAS,cAAuQ,CAAC;AAE9R,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Spinner.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Spinner/Spinner.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,cAAsO,CAAC;AAEzP,eAAO,MAAM,SAAS,cAAuQ,CAAC;AAE9R,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAEtE,CAAC"}

package/dist/ui/Spinner/Spinner.stories.sources.js

@@ -6,3 +6,6 @@ export const storySources = {
     Sizes,
     WithDelay,
 };
+export const storyDescriptions = {
+    WithDelay: "`delay` retarde l'apparition du spinner pour éviter un flash sur les opérations rapides :\nrien ne s'affiche avant que le délai ne soit écoulé. `'short'` attend 300 ms, `'long'`\n(comme `true`) 1 000 ms ; un `number` accepte n'importe quel délai personnalisé en\nmillisecondes. C'est cette même prop que `Button` expose sous le nom `loadingDelay`, pour\nrégler le retard de son propre spinner pendant `isLoading`.",
+};

package/dist/ui/Spinner/Spinner.web.d.ts

@@ -1,5 +1,3 @@
-import React from 'react';
-import { SpinnerProps } from './Spinner.shared';
-export type { SpinnerProps };
-export declare const Spinner: ({ size, delay, style }: SpinnerProps) => React.JSX.Element | null;
+import type { SpinnerProps } from './Spinner.shared';
+export declare const Spinner: ({ style, ...props }: SpinnerProps) => import("react").JSX.Element | null;
 //# sourceMappingURL=Spinner.web.d.ts.map

package/dist/ui/Spinner/Spinner.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.web.d.ts","sourceRoot":"","sources":["../../../src/ui/Spinner/Spinner.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAsB,YAAY,EAAc,MAAM,kBAAkB,CAAC;AAGhF,YAAY,EAAE,YAAY,EAAE,CAAC;AAS7B,eAAO,MAAM,OAAO,GAAI,wBAA+B,YAAY,6BA+ClE,CAAC"}
+{"version":3,"file":"Spinner.web.d.ts","sourceRoot":"","sources":["../../../src/ui/Spinner/Spinner.web.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGrD,eAAO,MAAM,OAAO,GAAI,qBAAqB,YAAY,uCAqBxD,CAAC"}

package/dist/ui/Spinner/Spinner.web.js

@@ -1,41 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { Animated, Easing } from 'react-native';
-import { DELAY_MS, SIZE_MAP, STROKE_MAP } from './Spinner.shared';
-import { useStyles } from './Spinner.styles';
-function resolveDelay(delay) {
-    if (delay === undefined || delay === false)
-        return null;
-    if (delay === true)
-        return 1000;
-    if (typeof delay === 'string')
-        return DELAY_MS[delay] ?? 0;
-    return delay;
-}
-export const Spinner = ({ size = 'md', delay, style }) => {
-    const styles = useStyles();
-    const [rotation] = React.useState(() => new Animated.Value(0));
-    const delayMs = React.useMemo(() => resolveDelay(delay), [delay]);
-    const [visible, setVisible] = React.useState(delayMs === null);
-    const px = SIZE_MAP[size];
-    const strokeWidth = STROKE_MAP[size];
-    const spin = rotation.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] });
-    React.useEffect(() => {
-        if (delayMs === null)
-            return;
-        const timer = setTimeout(() => setVisible(true), delayMs);
-        return () => clearTimeout(timer);
-    }, [delayMs]);
-    React.useEffect(() => {
-        const anim = Animated.loop(Animated.timing(rotation, {
-            toValue: 1,
-            duration: 800,
-            easing: Easing.linear,
-            useNativeDriver: false,
-        }));
-        anim.start();
-        return () => anim.stop();
-    }, [rotation]);
+import { Animated } from 'react-native';
+import { useSpinner } from './useSpinner';
+export const Spinner = ({ style, ...props }) => {
+    const { styles, spin, visible, px, strokeWidth } = useSpinner(props, false);
     if (!visible)
         return null;
     return (_jsx(Animated.View, { style: [

package/dist/ui/Spinner/index.d.ts

@@ -1,2 +1,3 @@
 export * from './Spinner';
+export type { SpinnerProps } from './Spinner.shared';
 //# sourceMappingURL=index.d.ts.map

package/dist/ui/Spinner/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Spinner/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Spinner/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,YAAY,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/ui/Spinner/useDelaiDAffichage.d.ts

@@ -0,0 +1,12 @@
+import { SpinnerDelay } from './Spinner.shared';
+/**
+ * Le retard avant qu'un spinner ne se montre : `false` tant qu'il n'est pas ecoule.
+ *
+ * Il evite un clignotement quand l'operation se termine vite - si le serveur repond en moins
+ * d'une seconde, personne ne voit rien. Il vivait a l'identique dans `Spinner.tsx` et
+ * `Spinner.web.tsx`, et le bouton en a besoin a son tour : c'est au moment ou le spinner
+ * parait, et pas avant, qu'il doit masquer son libelle. Sans cette date partagee, le bouton
+ * se viderait une seconde avant que quoi que ce soit ne le remplace.
+ */
+export declare const useDelaiDAffichage: (delay: SpinnerDelay | undefined) => boolean;
+//# sourceMappingURL=useDelaiDAffichage.d.ts.map

package/dist/ui/Spinner/useDelaiDAffichage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDelaiDAffichage.d.ts","sourceRoot":"","sources":["../../../src/ui/Spinner/useDelaiDAffichage.ts"],"names":[],"mappings":"AACA,OAAO,EAAY,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAU1D;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB,GAAI,OAAO,YAAY,GAAG,SAAS,KAAG,OAsBpE,CAAC"}

package/dist/ui/Spinner/useDelaiDAffichage.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { DELAY_MS } from './Spinner.shared';
+const enMillisecondes = (delay) => {
+    if (delay === undefined || delay === false)
+        return null;
+    if (delay === true)
+        return 1000;
+    if (typeof delay === 'string')
+        return DELAY_MS[delay] ?? 0;
+    return delay;
+};
+/**
+ * Le retard avant qu'un spinner ne se montre : `false` tant qu'il n'est pas ecoule.
+ *
+ * Il evite un clignotement quand l'operation se termine vite - si le serveur repond en moins
+ * d'une seconde, personne ne voit rien. Il vivait a l'identique dans `Spinner.tsx` et
+ * `Spinner.web.tsx`, et le bouton en a besoin a son tour : c'est au moment ou le spinner
+ * parait, et pas avant, qu'il doit masquer son libelle. Sans cette date partagee, le bouton
+ * se viderait une seconde avant que quoi que ce soit ne le remplace.
+ */
+export const useDelaiDAffichage = (delay) => {
+    const delayMs = React.useMemo(() => enMillisecondes(delay), [delay]);
+    const [ecoule, setEcoule] = React.useState(delayMs === null);
+    const [delaiPrecedent, setDelaiPrecedent] = React.useState(delayMs);
+    // Le retard repart de zero quand il change : sans quoi un bouton qui a deja charge une fois
+    // montrerait son spinner sans attendre a la fois suivante. L'ajustement se fait pendant le
+    // rendu, et non dans un effet, ou un `setState` synchrone declencherait un rendu en cascade.
+    if (delaiPrecedent !== delayMs) {
+        setDelaiPrecedent(delayMs);
+        setEcoule(delayMs === null);
+    }
+    React.useEffect(() => {
+        if (delayMs === null)
+            return;
+        const timer = setTimeout(() => setEcoule(true), delayMs);
+        return () => clearTimeout(timer);
+    }, [delayMs]);
+    return ecoule;
+};

package/dist/ui/Spinner/useRotation.d.ts

@@ -0,0 +1,8 @@
+import { Animated } from 'react-native';
+/**
+ * L'angle d'un spinner qui tourne sans fin, un tour toutes les 800 ms.
+ *
+ * Seul le pilote differe : le natif tourne hors du fil JavaScript, le navigateur n'en a pas.
+ */
+export declare const useRotation: (useNativeDriver: boolean) => Animated.AnimatedInterpolation<string | number>;
+//# sourceMappingURL=useRotation.d.ts.map

package/dist/ui/Spinner/useRotation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRotation.d.ts","sourceRoot":"","sources":["../../../src/ui/Spinner/useRotation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAU,MAAM,cAAc,CAAC;AAEhD;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,iBAAiB,OAAO,oDAYnD,CAAC"}

package/dist/ui/Spinner/useRotation.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Animated, Easing } from 'react-native';
+/**
+ * L'angle d'un spinner qui tourne sans fin, un tour toutes les 800 ms.
+ *
+ * Seul le pilote differe : le natif tourne hors du fil JavaScript, le navigateur n'en a pas.
+ */
+export const useRotation = (useNativeDriver) => {
+    const [rotation] = React.useState(() => new Animated.Value(0));
+    React.useEffect(() => {
+        const anim = Animated.loop(Animated.timing(rotation, { toValue: 1, duration: 800, easing: Easing.linear, useNativeDriver }));
+        anim.start();
+        return () => anim.stop();
+    }, [rotation, useNativeDriver]);
+    return rotation.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] });
+};

package/dist/ui/Spinner/useSpinner.d.ts

@@ -0,0 +1,20 @@
+import { SpinnerProps } from './Spinner.shared';
+/**
+ * Ce que le spinner natif et le spinner web ont en commun : seul leur dessin differe, un cercle
+ * SVG d'un cote, une bordure CSS de l'autre.
+ */
+export declare const useSpinner: ({ size, delay }: SpinnerProps, useNativeDriver: boolean) => {
+    styles: {
+        track: {
+            color: string;
+        };
+        arc: {
+            color: string;
+        };
+    };
+    spin: import("react-native").Animated.AnimatedInterpolation<string | number>;
+    visible: boolean;
+    px: number;
+    strokeWidth: number;
+};
+//# sourceMappingURL=useSpinner.d.ts.map

package/dist/ui/Spinner/useSpinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSpinner.d.ts","sourceRoot":"","sources":["../../../src/ui/Spinner/useSpinner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,YAAY,EAAc,MAAM,kBAAkB,CAAC;AAKtE;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,iBAAwB,YAAY,EAAE,iBAAiB,OAAO;;;;;;;;;;;;;CAMvF,CAAC"}

package/dist/ui/Spinner/useSpinner.js

@@ -0,0 +1,15 @@
+import { SIZE_MAP, STROKE_MAP } from './Spinner.shared';
+import { useStyles } from './Spinner.styles';
+import { useDelaiDAffichage } from './useDelaiDAffichage';
+import { useRotation } from './useRotation';
+/**
+ * Ce que le spinner natif et le spinner web ont en commun : seul leur dessin differe, un cercle
+ * SVG d'un cote, une bordure CSS de l'autre.
+ */
+export const useSpinner = ({ size = 'md', delay }, useNativeDriver) => ({
+    styles: useStyles(),
+    spin: useRotation(useNativeDriver),
+    visible: useDelaiDAffichage(delay),
+    px: SIZE_MAP[size],
+    strokeWidth: STROKE_MAP[size],
+});