@abyss-project/commons-front-core 8.3.0 → 9.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -0
- package/catalog/catalog-entries.ts +1 -0
- package/catalog/pages/Menu.tsx +99 -99
- package/catalog/pages/ProductTour.tsx +80 -0
- package/catalog/pages/index.ts +2 -0
- package/dist/{AbyssCookieConsentProvider-B-PlGbFf.js → AbyssCookieConsentProvider-B7-F6osY.js} +12 -0
- package/dist/{CookieConsentSettings.component-DEGCDEJW.js → CookieConsentSettings.component-DxQL4ULz.js} +1 -1
- package/dist/components/layers/ProductTour/ProductTour.d.ts +24 -0
- package/dist/components/layers/ProductTour/ProductTour.spec.d.ts +1 -0
- package/dist/components/layers/ProductTour/product-tour-geometry.d.ts +51 -0
- package/dist/components/layers/ProductTour/product-tour-geometry.spec.d.ts +1 -0
- package/dist/components/layers/index.d.ts +1 -0
- package/dist/cookie-consent.js +2 -2
- package/dist/{design-theme-CKTz_cOa.js → design-theme-BztWe75w.js} +1 -1
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/use-rich-intl.hook.d.ts +12 -0
- package/dist/hooks/use-service-tour.hook.d.ts +31 -0
- package/dist/hooks/use-service-tour.hook.spec.d.ts +1 -0
- package/dist/{index-B_yywet5.js → index-2zbZ2URx.js} +3 -3
- package/dist/{index-Bpnf8xKI.js → index-BAcf97X_.js} +2 -2
- package/dist/{index-sEWp0xIC.js → index-BMM6rvML.js} +2 -2
- package/dist/{index-Bpg9TBMX.js → index-BXtPl6pH.js} +1 -1
- package/dist/{index-Csvh-AG6.js → index-Bhhwuj39.js} +2 -2
- package/dist/{index-_UY_fqvv.js → index-BloHDADq.js} +7240 -7240
- package/dist/{index-Bw2swxVq.js → index-BtzB7aR_.js} +2 -2
- package/dist/{index-Bdtvzv-J.js → index-BuQlif6i.js} +2 -2
- package/dist/{index-BxxZgBFn.js → index-C5OyIHCq.js} +2 -2
- package/dist/{index-DqedXp41.js → index-CTP0QoCT.js} +3 -3
- package/dist/{index-DfUcsAJv.js → index-CspGahq0.js} +4 -4
- package/dist/{index-BMaAO_4e.js → index-CsyAu658.js} +2 -2
- package/dist/{index-B6qHo25Z.js → index-Dew1ymFy.js} +2 -2
- package/dist/{index-DFC9xBY9.js → index-DflXNluH.js} +2 -2
- package/dist/{index-B_jSh70G.js → index-DkcMwm_T.js} +3 -3
- package/dist/{index-Ca9tzEsn.js → index-IooWxH41.js} +2 -2
- package/dist/{index-DwXNHQIp.js → index-RkXYGPSf.js} +4 -4
- package/dist/{index-B3rK_-T4.js → index-Waz6-pQr.js} +4 -4
- package/dist/{index-Bh2_8FCK.js → index-iQhqBjKY.js} +2 -2
- package/dist/{index-7N3J68EI.js → index-jhW25X__.js} +2 -2
- package/dist/{index-CwuklsUK.js → index-uGXjK3xv.js} +3 -3
- package/dist/{index-dVVflNge.js → index-uLh81uFU.js} +2 -2
- package/dist/index.js +4899 -4580
- package/dist/legacy.js +4 -4
- package/dist/rum/monitor-browser-version.spec.d.ts +1 -0
- package/dist/translations/en.d.ts +6 -0
- package/dist/translations/fr.d.ts +6 -0
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -90,6 +90,20 @@ export const buildRumOptions = () =>
|
|
|
90
90
|
|
|
91
91
|
## Changements visibles
|
|
92
92
|
|
|
93
|
+
### Prochaine version
|
|
94
|
+
|
|
95
|
+
- **`ProductTour`** (`layers`) : visite guidée d'un service (carte #285, spec §6.7). Bulle ancrée sur l'élément
|
|
96
|
+
`data-tour`, page voilée autour d'une découpe, compteur et points d'étape, « Suivant » / « Terminer » et « Passer la
|
|
97
|
+
visite » ; Échap passe la visite, les flèches changent d'étape, focus piégé ; feuille du bas sous 768 px (boutons de
|
|
98
|
+
44 px) ; sans mouvement sous `prefers-reduced-motion`. Une étape dont la cible manque s'affiche au centre d'un écran
|
|
99
|
+
voilé.
|
|
100
|
+
- **`useServiceTour(service, { eligible })`** : ouvre la visite à la première visite (aucun état
|
|
101
|
+
`users.settings.serviceTours[service]`), la relance à la demande (`start`) et écrit `completedAt` ou `skippedAt` par
|
|
102
|
+
`AbyssCore.sdk.user.updateSettings`.
|
|
103
|
+
- **Menu « Famille » du legacy** (`buildAbyssFamilyMenuSection`) : sans famille, l'entrée mène à `/family/new`
|
|
104
|
+
d'abyss-main au lieu de `/onboarding`.
|
|
105
|
+
- **Traductions** : `ds.layers.product-tour.*` (FR et EN).
|
|
106
|
+
|
|
93
107
|
### 8.3.0
|
|
94
108
|
|
|
95
109
|
Compte et facturation du front principal sur le design system (carte #286, zone 2). Sept pièces nouvelles, chacune
|
|
@@ -87,6 +87,7 @@ export const CATALOG_ENTRIES: CatalogEntry[] = [
|
|
|
87
87
|
entry('Menu', 'layers', 'menu'),
|
|
88
88
|
entry('Toast', 'layers', 'toast'),
|
|
89
89
|
entry('CommandPalette', 'layers', 'command-palette'),
|
|
90
|
+
entry('ProductTour', 'layers', 'product-tour', { mobileCapture: true }),
|
|
90
91
|
entry('RichSelect', 'inputs', 'rich-select'),
|
|
91
92
|
entry('DateField', 'inputs', 'date-field'),
|
|
92
93
|
entry('DateRangeField', 'inputs', 'date-range-field'),
|
package/catalog/pages/Menu.tsx
CHANGED
|
@@ -1,99 +1,99 @@
|
|
|
1
|
-
import { useEffect, useRef, useState } from 'react';
|
|
2
|
-
import Button from '@mui/material/Button';
|
|
3
|
-
import ContentCopyOutlined from '@mui/icons-material/ContentCopyOutlined';
|
|
4
|
-
import DeleteOutlineOutlined from '@mui/icons-material/DeleteOutlineOutlined';
|
|
5
|
-
import DriveFileMoveOutlined from '@mui/icons-material/DriveFileMoveOutlined';
|
|
6
|
-
import EditOutlined from '@mui/icons-material/EditOutlined';
|
|
7
|
-
import IosShareOutlined from '@mui/icons-material/IosShareOutlined';
|
|
8
|
-
import LockOutlined from '@mui/icons-material/LockOutlined';
|
|
9
|
-
import MoreHorizRounded from '@mui/icons-material/MoreHorizRounded';
|
|
10
|
-
import {
|
|
11
|
-
Menu,
|
|
12
|
-
MenuItemTone,
|
|
13
|
-
MenuSeparator,
|
|
14
|
-
} from '../../src/components/layers/Menu/Menu';
|
|
15
|
-
import { Example, LastEvent, Showcase, useEventLog } from '../frame';
|
|
16
|
-
|
|
17
|
-
export const MenuPage = () => {
|
|
18
|
-
const { log } = useEventLog();
|
|
19
|
-
const trigger = useRef<HTMLButtonElement>(null);
|
|
20
|
-
const [anchor, setAnchor] = useState<HTMLElement | null>(null);
|
|
21
|
-
|
|
22
|
-
// Opened on arrival, so the page shows the menu without a click.
|
|
23
|
-
useEffect(() => {
|
|
24
|
-
setAnchor(trigger.current);
|
|
25
|
-
}, []);
|
|
26
|
-
|
|
27
|
-
const select = (action: string) => () => log(action);
|
|
28
|
-
|
|
29
|
-
return (
|
|
30
|
-
<Showcase
|
|
31
|
-
family="Couches"
|
|
32
|
-
name="Menu"
|
|
33
|
-
description="Menu d'actions : icône, description, raccourci, ton danger, entrées désactivées sautées par les flèches."
|
|
34
|
-
>
|
|
35
|
-
<Example title="Actions d'un fichier">
|
|
36
|
-
<Button
|
|
37
|
-
ref={trigger}
|
|
38
|
-
variant="outlined"
|
|
39
|
-
startIcon={<MoreHorizRounded />}
|
|
40
|
-
onClick={(event) => setAnchor(event.currentTarget)}
|
|
41
|
-
>
|
|
42
|
-
avis-imposition-2026.pdf
|
|
43
|
-
</Button>
|
|
44
|
-
</Example>
|
|
45
|
-
<LastEvent />
|
|
46
|
-
<Menu
|
|
47
|
-
anchorEl={anchor}
|
|
48
|
-
open={anchor !== null}
|
|
49
|
-
onClose={() => setAnchor(null)}
|
|
50
|
-
items={[
|
|
51
|
-
{
|
|
52
|
-
id: 'share',
|
|
53
|
-
label: 'Partager',
|
|
54
|
-
description: 'Lien ou invitation par courriel',
|
|
55
|
-
icon: <IosShareOutlined />,
|
|
56
|
-
shortcut: 'Ctrl+Maj+S',
|
|
57
|
-
onSelect: select('partager'),
|
|
58
|
-
},
|
|
59
|
-
{
|
|
60
|
-
id: 'rename',
|
|
61
|
-
label: 'Renommer',
|
|
62
|
-
icon: <EditOutlined />,
|
|
63
|
-
shortcut: 'F2',
|
|
64
|
-
onSelect: select('renommer'),
|
|
65
|
-
},
|
|
66
|
-
{
|
|
67
|
-
id: 'copy',
|
|
68
|
-
label: 'Copier le lien',
|
|
69
|
-
icon: <ContentCopyOutlined />,
|
|
70
|
-
shortcut: 'Ctrl+L',
|
|
71
|
-
onSelect: select('copier'),
|
|
72
|
-
},
|
|
73
|
-
{
|
|
74
|
-
id: 'move',
|
|
75
|
-
label: 'Déplacer',
|
|
76
|
-
icon: <DriveFileMoveOutlined />,
|
|
77
|
-
onSelect: select('déplacer'),
|
|
78
|
-
},
|
|
79
|
-
{
|
|
80
|
-
id: 'encrypt',
|
|
81
|
-
label: 'Déjà chiffré',
|
|
82
|
-
icon: <LockOutlined />,
|
|
83
|
-
disabled: true,
|
|
84
|
-
onSelect: select('chiffrer'),
|
|
85
|
-
},
|
|
86
|
-
MenuSeparator.Divider,
|
|
87
|
-
{
|
|
88
|
-
id: 'trash',
|
|
89
|
-
label: 'Mettre à la corbeille',
|
|
90
|
-
icon: <DeleteOutlineOutlined />,
|
|
91
|
-
tone: MenuItemTone.Danger,
|
|
92
|
-
shortcut: 'Suppr',
|
|
93
|
-
onSelect: select('corbeille'),
|
|
94
|
-
},
|
|
95
|
-
]}
|
|
96
|
-
/>
|
|
97
|
-
</Showcase>
|
|
98
|
-
);
|
|
99
|
-
};
|
|
1
|
+
import { useEffect, useRef, useState } from 'react';
|
|
2
|
+
import Button from '@mui/material/Button';
|
|
3
|
+
import ContentCopyOutlined from '@mui/icons-material/ContentCopyOutlined';
|
|
4
|
+
import DeleteOutlineOutlined from '@mui/icons-material/DeleteOutlineOutlined';
|
|
5
|
+
import DriveFileMoveOutlined from '@mui/icons-material/DriveFileMoveOutlined';
|
|
6
|
+
import EditOutlined from '@mui/icons-material/EditOutlined';
|
|
7
|
+
import IosShareOutlined from '@mui/icons-material/IosShareOutlined';
|
|
8
|
+
import LockOutlined from '@mui/icons-material/LockOutlined';
|
|
9
|
+
import MoreHorizRounded from '@mui/icons-material/MoreHorizRounded';
|
|
10
|
+
import {
|
|
11
|
+
Menu,
|
|
12
|
+
MenuItemTone,
|
|
13
|
+
MenuSeparator,
|
|
14
|
+
} from '../../src/components/layers/Menu/Menu';
|
|
15
|
+
import { Example, LastEvent, Showcase, useEventLog } from '../frame';
|
|
16
|
+
|
|
17
|
+
export const MenuPage = () => {
|
|
18
|
+
const { log } = useEventLog();
|
|
19
|
+
const trigger = useRef<HTMLButtonElement>(null);
|
|
20
|
+
const [anchor, setAnchor] = useState<HTMLElement | null>(null);
|
|
21
|
+
|
|
22
|
+
// Opened on arrival, so the page shows the menu without a click.
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
setAnchor(trigger.current);
|
|
25
|
+
}, []);
|
|
26
|
+
|
|
27
|
+
const select = (action: string) => () => log(action);
|
|
28
|
+
|
|
29
|
+
return (
|
|
30
|
+
<Showcase
|
|
31
|
+
family="Couches"
|
|
32
|
+
name="Menu"
|
|
33
|
+
description="Menu d'actions : icône, description, raccourci, ton danger, entrées désactivées sautées par les flèches."
|
|
34
|
+
>
|
|
35
|
+
<Example title="Actions d'un fichier">
|
|
36
|
+
<Button
|
|
37
|
+
ref={trigger}
|
|
38
|
+
variant="outlined"
|
|
39
|
+
startIcon={<MoreHorizRounded />}
|
|
40
|
+
onClick={(event) => setAnchor(event.currentTarget)}
|
|
41
|
+
>
|
|
42
|
+
avis-imposition-2026.pdf
|
|
43
|
+
</Button>
|
|
44
|
+
</Example>
|
|
45
|
+
<LastEvent />
|
|
46
|
+
<Menu
|
|
47
|
+
anchorEl={anchor}
|
|
48
|
+
open={anchor !== null}
|
|
49
|
+
onClose={() => setAnchor(null)}
|
|
50
|
+
items={[
|
|
51
|
+
{
|
|
52
|
+
id: 'share',
|
|
53
|
+
label: 'Partager',
|
|
54
|
+
description: 'Lien ou invitation par courriel',
|
|
55
|
+
icon: <IosShareOutlined />,
|
|
56
|
+
shortcut: 'Ctrl+Maj+S',
|
|
57
|
+
onSelect: select('partager'),
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
id: 'rename',
|
|
61
|
+
label: 'Renommer',
|
|
62
|
+
icon: <EditOutlined />,
|
|
63
|
+
shortcut: 'F2',
|
|
64
|
+
onSelect: select('renommer'),
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
id: 'copy',
|
|
68
|
+
label: 'Copier le lien',
|
|
69
|
+
icon: <ContentCopyOutlined />,
|
|
70
|
+
shortcut: 'Ctrl+L',
|
|
71
|
+
onSelect: select('copier'),
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
id: 'move',
|
|
75
|
+
label: 'Déplacer',
|
|
76
|
+
icon: <DriveFileMoveOutlined />,
|
|
77
|
+
onSelect: select('déplacer'),
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
id: 'encrypt',
|
|
81
|
+
label: 'Déjà chiffré',
|
|
82
|
+
icon: <LockOutlined />,
|
|
83
|
+
disabled: true,
|
|
84
|
+
onSelect: select('chiffrer'),
|
|
85
|
+
},
|
|
86
|
+
MenuSeparator.Divider,
|
|
87
|
+
{
|
|
88
|
+
id: 'trash',
|
|
89
|
+
label: 'Mettre à la corbeille',
|
|
90
|
+
icon: <DeleteOutlineOutlined />,
|
|
91
|
+
tone: MenuItemTone.Danger,
|
|
92
|
+
shortcut: 'Suppr',
|
|
93
|
+
onSelect: select('corbeille'),
|
|
94
|
+
},
|
|
95
|
+
]}
|
|
96
|
+
/>
|
|
97
|
+
</Showcase>
|
|
98
|
+
);
|
|
99
|
+
};
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { useState } from 'react';
|
|
2
|
+
import Button from '@mui/material/Button';
|
|
3
|
+
import AddRounded from '@mui/icons-material/AddRounded';
|
|
4
|
+
import FileUploadOutlined from '@mui/icons-material/FileUploadOutlined';
|
|
5
|
+
import { ProductTour } from '../../src/components/layers/ProductTour/ProductTour';
|
|
6
|
+
import type { ProductTourStep } from '../../src/components/layers/ProductTour/ProductTour';
|
|
7
|
+
import { Example, LastEvent, Row, Showcase, useEventLog } from '../frame';
|
|
8
|
+
|
|
9
|
+
const STEPS: [ProductTourStep, ...ProductTourStep[]] = [
|
|
10
|
+
{
|
|
11
|
+
target: 'catalog-create-event',
|
|
12
|
+
title: 'Créez votre premier événement',
|
|
13
|
+
description:
|
|
14
|
+
'Donnez-lui un nom et une date : vous obtenez un lien à envoyer à vos invités pour qu’ils déposent leurs photos.',
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
target: 'catalog-import',
|
|
18
|
+
title: 'Importez vos photos',
|
|
19
|
+
description:
|
|
20
|
+
'Ajoutez celles que vous avez déjà prises, depuis votre appareil ou AbyssCloud.',
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
target: 'catalog-help',
|
|
24
|
+
title: 'Revoir la visite',
|
|
25
|
+
description:
|
|
26
|
+
'Elle se relance à tout moment depuis le menu d’aide du service.',
|
|
27
|
+
},
|
|
28
|
+
];
|
|
29
|
+
|
|
30
|
+
export const ProductTourPage = () => {
|
|
31
|
+
const { log } = useEventLog();
|
|
32
|
+
// Opened on arrival, so the page shows the first step without a click.
|
|
33
|
+
const [open, setOpen] = useState(true);
|
|
34
|
+
return (
|
|
35
|
+
<Showcase
|
|
36
|
+
family="Couches"
|
|
37
|
+
name="ProductTour"
|
|
38
|
+
description="Visite guidée d'un service : une bulle ancrée sur un élément data-tour, le reste de la page voilé autour d'une découpe. Échap passe la visite, les flèches changent d'étape ; sous 768 px, une feuille du bas."
|
|
39
|
+
>
|
|
40
|
+
<Example title="Première visite de Memories">
|
|
41
|
+
<Row>
|
|
42
|
+
<Button
|
|
43
|
+
data-tour="catalog-import"
|
|
44
|
+
variant="outlined"
|
|
45
|
+
startIcon={<FileUploadOutlined />}
|
|
46
|
+
>
|
|
47
|
+
Importer
|
|
48
|
+
</Button>
|
|
49
|
+
<Button
|
|
50
|
+
data-tour="catalog-create-event"
|
|
51
|
+
variant="contained"
|
|
52
|
+
startIcon={<AddRounded />}
|
|
53
|
+
>
|
|
54
|
+
Créer un événement
|
|
55
|
+
</Button>
|
|
56
|
+
<Button
|
|
57
|
+
data-tour="catalog-help"
|
|
58
|
+
variant="text"
|
|
59
|
+
onClick={() => setOpen(true)}
|
|
60
|
+
>
|
|
61
|
+
Aide
|
|
62
|
+
</Button>
|
|
63
|
+
</Row>
|
|
64
|
+
</Example>
|
|
65
|
+
<LastEvent />
|
|
66
|
+
<ProductTour
|
|
67
|
+
open={open}
|
|
68
|
+
steps={STEPS}
|
|
69
|
+
onComplete={() => {
|
|
70
|
+
setOpen(false);
|
|
71
|
+
log('visite terminée');
|
|
72
|
+
}}
|
|
73
|
+
onSkip={() => {
|
|
74
|
+
setOpen(false);
|
|
75
|
+
log('visite passée');
|
|
76
|
+
}}
|
|
77
|
+
/>
|
|
78
|
+
</Showcase>
|
|
79
|
+
);
|
|
80
|
+
};
|
package/catalog/pages/index.ts
CHANGED
|
@@ -31,6 +31,7 @@ import { NotificationsMenuPage } from './NotificationsMenu';
|
|
|
31
31
|
import { NumberFieldPage } from './NumberField';
|
|
32
32
|
import { PageHeaderPage } from './PageHeader';
|
|
33
33
|
import { PageStatePage } from './PageState';
|
|
34
|
+
import { ProductTourPage } from './ProductTour';
|
|
34
35
|
import { QRCodeModalPage } from './QRCodeModal';
|
|
35
36
|
import { RichSelectPage } from './RichSelect';
|
|
36
37
|
import { RoleBadgePage } from './RoleBadge';
|
|
@@ -87,6 +88,7 @@ export const CATALOG_PAGES: Record<string, ComponentType> = {
|
|
|
87
88
|
NumberField: NumberFieldPage,
|
|
88
89
|
PageHeader: PageHeaderPage,
|
|
89
90
|
PageState: PageStatePage,
|
|
91
|
+
ProductTour: ProductTourPage,
|
|
90
92
|
QRCodeModal: QRCodeModalPage,
|
|
91
93
|
RichSelect: RichSelectPage,
|
|
92
94
|
RoleBadge: RoleBadgePage,
|
package/dist/{AbyssCookieConsentProvider-B-PlGbFf.js → AbyssCookieConsentProvider-B7-F6osY.js}
RENAMED
|
@@ -1924,6 +1924,12 @@ const fm = {
|
|
|
1924
1924
|
"clear-group": "Retirer le filtre « {group} »",
|
|
1925
1925
|
"source-loading": "Recherche dans « {group} »…",
|
|
1926
1926
|
"source-error": "La recherche dans « {group} » a échoué"
|
|
1927
|
+
},
|
|
1928
|
+
"product-tour": {
|
|
1929
|
+
step: "Étape {current} sur {total}",
|
|
1930
|
+
next: "Suivant",
|
|
1931
|
+
finish: "Terminer",
|
|
1932
|
+
skip: "Passer la visite"
|
|
1927
1933
|
}
|
|
1928
1934
|
}
|
|
1929
1935
|
}
|
|
@@ -3684,6 +3690,12 @@ const fm = {
|
|
|
3684
3690
|
"clear-group": "Remove the “{group}” filter",
|
|
3685
3691
|
"source-loading": "Searching “{group}”…",
|
|
3686
3692
|
"source-error": "Searching “{group}” failed"
|
|
3693
|
+
},
|
|
3694
|
+
"product-tour": {
|
|
3695
|
+
step: "Step {current} of {total}",
|
|
3696
|
+
next: "Next",
|
|
3697
|
+
finish: "Finish",
|
|
3698
|
+
skip: "Skip the tour"
|
|
3687
3699
|
}
|
|
3688
3700
|
}
|
|
3689
3701
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as e, jsxs as a } from "react/jsx-runtime";
|
|
2
2
|
import { useState as m, useEffect as C } from "react";
|
|
3
3
|
import { Card as v, CardContent as b, Stack as u, Typography as o, FormControlLabel as l, Box as r, Checkbox as d, Button as M } from "@mui/material";
|
|
4
|
-
import { g as R, u as x } from "./AbyssCookieConsentProvider-
|
|
4
|
+
import { g as R, u as x } from "./AbyssCookieConsentProvider-B7-F6osY.js";
|
|
5
5
|
const B = () => {
|
|
6
6
|
const t = R(), { consent: i, save: y } = x(), [h, g] = m((i == null ? void 0 : i.analytics) ?? !1), [k, f] = m((i == null ? void 0 : i.marketing) ?? !1), c = i == null ? void 0 : i.analytics, n = i == null ? void 0 : i.marketing;
|
|
7
7
|
return C(() => {
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
export interface ProductTourStep {
|
|
2
|
+
/** Value of the `data-tour` attribute of the element the step points at. */
|
|
3
|
+
target: string;
|
|
4
|
+
title: string;
|
|
5
|
+
description: string;
|
|
6
|
+
}
|
|
7
|
+
export interface ProductTourProps {
|
|
8
|
+
/** Whether the tour is shown; controlled by the host (`useServiceTour` for a service's tour). */
|
|
9
|
+
open: boolean;
|
|
10
|
+
/** The steps, in order; at least one. */
|
|
11
|
+
steps: readonly [ProductTourStep, ...ProductTourStep[]];
|
|
12
|
+
/** Called by the button of the last step. */
|
|
13
|
+
onComplete(): void;
|
|
14
|
+
/** Called by « Passer la visite » and by Escape, at any step. */
|
|
15
|
+
onSkip(): void;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* A guided tour over the page (maquette E, spec §6.7): one step at a time, a bubble anchored to
|
|
19
|
+
* the element carrying `data-tour="<target>"`, the rest of the page dimmed around a cut-out. Below
|
|
20
|
+
* 768 px the bubble becomes a sheet at the bottom of the screen. Focus is trapped in the step and
|
|
21
|
+
* returns to the opener when the tour closes; Escape skips the tour, the arrow keys move between
|
|
22
|
+
* steps. A step whose target is not on the page is shown in the middle of a fully dimmed screen.
|
|
23
|
+
*/
|
|
24
|
+
export declare function ProductTour({ open, steps, onComplete, onSkip, }: ProductTourProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
/** A box in viewport coordinates, in px. */
|
|
2
|
+
export interface TourRect {
|
|
3
|
+
top: number;
|
|
4
|
+
left: number;
|
|
5
|
+
width: number;
|
|
6
|
+
height: number;
|
|
7
|
+
}
|
|
8
|
+
export interface TourSize {
|
|
9
|
+
width: number;
|
|
10
|
+
height: number;
|
|
11
|
+
}
|
|
12
|
+
/** Side of its target the bubble opens on. */
|
|
13
|
+
export declare enum BubbleSide {
|
|
14
|
+
Below = "below",
|
|
15
|
+
Above = "above"
|
|
16
|
+
}
|
|
17
|
+
export interface BubblePlacement {
|
|
18
|
+
top: number;
|
|
19
|
+
left: number;
|
|
20
|
+
side: BubbleSide;
|
|
21
|
+
/** Horizontal center of the caret, from the bubble's left edge. */
|
|
22
|
+
arrowLeft: number;
|
|
23
|
+
}
|
|
24
|
+
export interface BubbleSpacing {
|
|
25
|
+
/** Distance between the target and the bubble. */
|
|
26
|
+
gap: number;
|
|
27
|
+
/** Distance kept between the bubble and the viewport edges. */
|
|
28
|
+
margin: number;
|
|
29
|
+
/** Distance kept between the caret's center and the bubble's sides (its rounded corners). */
|
|
30
|
+
arrowInset: number;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Where the bubble of a step goes: below its target when it fits there or when the room below is
|
|
34
|
+
* the larger, above otherwise; horizontally centered on the target and kept inside the viewport.
|
|
35
|
+
* The caret points at the target's center as long as the bubble's corners allow it.
|
|
36
|
+
*/
|
|
37
|
+
export declare const placeBubble: (target: TourRect, bubble: TourSize, viewport: TourSize, { gap, margin, arrowInset }: BubbleSpacing) => BubblePlacement;
|
|
38
|
+
/** The bubble in the middle of the viewport, for a step whose target is not on the page. */
|
|
39
|
+
export declare const centerBubble: (bubble: TourSize, viewport: TourSize, margin: number) => Pick<BubblePlacement, "top" | "left">;
|
|
40
|
+
/** The rectangle `rect` grown by `by` px on every side. */
|
|
41
|
+
export declare const inflateRect: (rect: TourRect, by: number) => TourRect;
|
|
42
|
+
export declare const toTourRect: (rect: DOMRectReadOnly) => TourRect;
|
|
43
|
+
export declare const sameRect: (a: TourRect | null, b: TourRect | null) => boolean;
|
|
44
|
+
export declare const sameSize: (a: TourSize, b: TourSize) => boolean;
|
|
45
|
+
/** Name of the attribute a host puts on the element a step points at. */
|
|
46
|
+
export declare const TOUR_TARGET_ATTRIBUTE = "data-tour";
|
|
47
|
+
/**
|
|
48
|
+
* The element whose `data-tour` attribute is `target`, or `null` when the page does not hold it.
|
|
49
|
+
* Compared as a string rather than built into a selector, so any value is safe.
|
|
50
|
+
*/
|
|
51
|
+
export declare const findTourTarget: (target: string) => HTMLElement | null;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/cookie-consent.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { A as e, c as a, C as n, D as C, R as i, V as t, d as r, f as A, r as k, e as c, u as l, b, a as f, w as u } from "./AbyssCookieConsentProvider-
|
|
2
|
-
import { C as E } from "./CookieConsentSettings.component-
|
|
1
|
+
import { A as e, c as a, C as n, D as C, R as i, V as t, d as r, f as A, r as k, e as c, u as l, b, a as f, w as u } from "./AbyssCookieConsentProvider-B7-F6osY.js";
|
|
2
|
+
import { C as E } from "./CookieConsentSettings.component-DxQL4ULz.js";
|
|
3
3
|
export {
|
|
4
4
|
e as AbyssCookieConsentProvider,
|
|
5
5
|
a as COOKIE_NAME,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { m as ot, g as a0, n as Mr, o as Bp, p as Wp, h as Np, q as Qp } from "./AbyssCookieConsentProvider-
|
|
1
|
+
import { m as ot, g as a0, n as Mr, o as Bp, p as Wp, h as Np, q as Qp } from "./AbyssCookieConsentProvider-B7-F6osY.js";
|
|
2
2
|
import { W as Yp, r as Lp, C as Gp } from "./index-D7cgykJH.js";
|
|
3
3
|
import tr, { useMemo as ut, useRef as Ve, useReducer as i0, useEffect as Ne, useCallback as Re, forwardRef as jp, useImperativeHandle as Hp, Fragment as Jp, createElement as ye, useLayoutEffect as Xp, useState as Pe, isValidElement as rr, cloneElement as $o, useId as Zp } from "react";
|
|
4
4
|
import { jsx as k, jsxs as Ce } from "react/jsx-runtime";
|
package/dist/hooks/index.d.ts
CHANGED
|
@@ -2124,6 +2124,12 @@ export declare const translations: {
|
|
|
2124
2124
|
'source-loading': string;
|
|
2125
2125
|
'source-error': string;
|
|
2126
2126
|
};
|
|
2127
|
+
'product-tour': {
|
|
2128
|
+
step: string;
|
|
2129
|
+
next: string;
|
|
2130
|
+
finish: string;
|
|
2131
|
+
skip: string;
|
|
2132
|
+
};
|
|
2127
2133
|
};
|
|
2128
2134
|
};
|
|
2129
2135
|
};
|
|
@@ -4249,6 +4255,12 @@ export declare const translations: {
|
|
|
4249
4255
|
'source-loading': string;
|
|
4250
4256
|
'source-error': string;
|
|
4251
4257
|
};
|
|
4258
|
+
'product-tour': {
|
|
4259
|
+
step: string;
|
|
4260
|
+
next: string;
|
|
4261
|
+
finish: string;
|
|
4262
|
+
skip: string;
|
|
4263
|
+
};
|
|
4252
4264
|
};
|
|
4253
4265
|
};
|
|
4254
4266
|
};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { AbyssService } from '@abyss-project/main';
|
|
2
|
+
/** The react-query key of the signed-in user's tour states, read from `user.me()`. */
|
|
3
|
+
export declare const serviceToursQueryKey: readonly ["service-tours", "me"];
|
|
4
|
+
export interface UseServiceTourOptions {
|
|
5
|
+
/**
|
|
6
|
+
* Whether this visit may open the tour by itself, decided by the host service: the service was
|
|
7
|
+
* just activated, or the user never had any presence in it (spec §6.7). The tour then opens
|
|
8
|
+
* only when no state is stored for the service yet.
|
|
9
|
+
*/
|
|
10
|
+
eligible: boolean;
|
|
11
|
+
}
|
|
12
|
+
export interface UseServiceTour {
|
|
13
|
+
/** Whether the `ProductTour` is shown: first visit of an eligible user, or launched by `start`. */
|
|
14
|
+
open: boolean;
|
|
15
|
+
/** Opens the tour again on demand, from the service's help menu, whatever its stored state. */
|
|
16
|
+
start(): void;
|
|
17
|
+
/** For `ProductTour.onComplete`: closes the tour and stores `completedAt`. */
|
|
18
|
+
complete(): void;
|
|
19
|
+
/** For `ProductTour.onSkip`: closes the tour and stores `skippedAt`. */
|
|
20
|
+
skip(): void;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* The guided tour of `service` for the signed-in user (spec §6.7, AC-C9). Reads
|
|
24
|
+
* `users.settings.serviceTours` through `AbyssCore.sdk.user.me()` and writes the end or the skip
|
|
25
|
+
* through `AbyssCore.sdk.user.updateSettings`, which merges it per service on the server. Needs a
|
|
26
|
+
* `QueryClientProvider` and an initialized `AbyssCore`.
|
|
27
|
+
*
|
|
28
|
+
* The tour closes at once on « Passer » or at the end. When the write fails, nothing is stored:
|
|
29
|
+
* the tour stays closed for this page and opens again at the next eligible visit.
|
|
30
|
+
*/
|
|
31
|
+
export declare const useServiceTour: (service: AbyssService, { eligible }: UseServiceTourOptions) => UseServiceTour;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { L as V, E as X } from "./index-
|
|
2
|
-
import { s as d, t as $, a as Z, L as R, p as s, i as t, f as y, c, j as U, g as l } from "./index-
|
|
3
|
-
import { html as w } from "./index-
|
|
1
|
+
import { L as V, E as X } from "./index-BXtPl6pH.js";
|
|
2
|
+
import { s as d, t as $, a as Z, L as R, p as s, i as t, f as y, c, j as U, g as l } from "./index-BloHDADq.js";
|
|
3
|
+
import { html as w } from "./index-Waz6-pQr.js";
|
|
4
4
|
const W = 1, p = 2, q = 275, u = 3, b = 276, _ = 277, f = 278, k = 4, m = 5, G = 6, x = 7, z = 8, h = 9, g = 10, v = 11, j = 12, E = 13, I = 14, N = 15, L = 16, F = 17, C = 18, H = 19, A = 20, K = 21, D = 22, B = 23, M = 24, J = 25, OO = 26, $O = 27, QO = 28, iO = 29, aO = 30, TO = 31, PO = 32, XO = 33, SO = 34, cO = 35, eO = 36, oO = 37, _O = 38, zO = 39, nO = 40, rO = 41, YO = 42, VO = 43, dO = 44, ZO = 45, RO = 46, sO = 47, tO = 48, yO = 49, UO = 50, lO = 51, wO = 52, WO = 53, pO = 54, qO = 55, uO = 56, bO = 57, fO = 58, kO = 59, mO = 60, GO = 61, xO = 62, e = 63, hO = 64, gO = 65, vO = 66, jO = {
|
|
5
5
|
abstract: k,
|
|
6
6
|
and: m,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { a as O, L as r, i as b, f as s, s as a, j as t, g as P, t as e } from "./index-
|
|
2
|
-
import { L as n } from "./index-
|
|
1
|
+
import { a as O, L as r, i as b, f as s, s as a, j as t, g as P, t as e } from "./index-BloHDADq.js";
|
|
2
|
+
import { L as n } from "./index-BXtPl6pH.js";
|
|
3
3
|
const S = { __proto__: null, anyref: 34, dataref: 34, eqref: 34, externref: 34, i31ref: 34, funcref: 34, i8: 34, i16: 34, i32: 34, i64: 34, f32: 34, f64: 34 }, i = /* @__PURE__ */ n.deserialize({
|
|
4
4
|
version: 14,
|
|
5
5
|
states: "!^Q]QPOOOqQPO'#CbOOQO'#Cd'#CdOOQO'#Cl'#ClOOQO'#Ch'#ChQ]QPOOOOQO,58|,58|OxQPO,58|OOQO-E6f-E6fOOQO1G.h1G.h",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { L as M, E as X, a as h, C as E } from "./index-
|
|
2
|
-
import { s as A, t as i, E as C, a as J, n as o, L as I, b as B, d as D, e as u, h as K, i as N, f as H, c as g, j as F, m as OO, g as aO, J as j, x as QO, o as iO, I as eO } from "./index-
|
|
1
|
+
import { L as M, E as X, a as h, C as E } from "./index-BXtPl6pH.js";
|
|
2
|
+
import { s as A, t as i, E as C, a as J, n as o, L as I, b as B, d as D, e as u, h as K, i as N, f as H, c as g, j as F, m as OO, g as aO, J as j, x as QO, o as iO, I as eO } from "./index-BloHDADq.js";
|
|
3
3
|
const $O = 315, rO = 316, v = 1, tO = 2, lO = 3, nO = 4, oO = 317, sO = 319, ZO = 320, PO = 5, pO = 6, cO = 0, q = [
|
|
4
4
|
9,
|
|
5
5
|
10,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { P as nt, k as j, l as v, q as st, N as Ae, s as Be, p as it, t as c, T as E, r as ot, L as le, u as at, v as lt, w as ht, x as ft, e as _, h as P, y as T, z as ut, f as Ie, i as dt, A as pt, C as ct, B as mt, F as he, G as gt } from "./index-
|
|
2
|
-
import { html as kt, htmlCompletionSource as Lt } from "./index-
|
|
1
|
+
import { P as nt, k as j, l as v, q as st, N as Ae, s as Be, p as it, t as c, T as E, r as ot, L as le, u as at, v as lt, w as ht, x as ft, e as _, h as P, y as T, z as ut, f as Ie, i as dt, A as pt, C as ct, B as mt, F as he, G as gt } from "./index-BloHDADq.js";
|
|
2
|
+
import { html as kt, htmlCompletionSource as Lt } from "./index-Waz6-pQr.js";
|
|
3
3
|
class $ {
|
|
4
4
|
static create(e, r, n, s, i) {
|
|
5
5
|
let o = s + (s << 8) + e + (r << 4) | 0;
|