@edifice.io/react 2.6.6-develop.20260923152855 → 2.6.7-develop-b2school.20260928143952

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.
Files changed (96) hide show
  1. package/dist/components/Alert/Alert.js +47 -23
  2. package/dist/components/Form/FormText.js +11 -6
  3. package/dist/components/Input/Input.d.ts +11 -2
  4. package/dist/components/Input/Input.js +43 -21
  5. package/dist/components/Label/Label.js +4 -4
  6. package/dist/components/Layout/Layout.js +30 -15
  7. package/dist/components/LinkPill/LinkPill.d.ts +41 -0
  8. package/dist/components/LinkPill/LinkPill.js +28 -0
  9. package/dist/components/LinkPill/index.d.ts +2 -0
  10. package/dist/components/ModalBeta/ModalBeta.d.ts +47 -0
  11. package/dist/components/ModalBeta/ModalBeta.js +62 -0
  12. package/dist/components/ModalBeta/ModalBetaBody.d.ts +19 -0
  13. package/dist/components/ModalBeta/ModalBetaBody.js +15 -0
  14. package/dist/components/ModalBeta/ModalBetaContext.d.ts +7 -0
  15. package/dist/components/ModalBeta/ModalBetaContext.js +15 -0
  16. package/dist/components/ModalBeta/ModalBetaFooter.d.ts +13 -0
  17. package/dist/components/ModalBeta/ModalBetaFooter.js +7 -0
  18. package/dist/components/ModalBeta/ModalBetaHeader.d.ts +23 -0
  19. package/dist/components/ModalBeta/ModalBetaHeader.js +31 -0
  20. package/dist/components/ModalBeta/index.d.ts +2 -0
  21. package/dist/components/PageLayout/PageLayout.d.ts +4 -0
  22. package/dist/components/PageLayout/PageLayout.js +37 -14
  23. package/dist/components/PageLayout/components/PageLayoutContent.js +5 -1
  24. package/dist/components/PageLayout/components/PageLayoutHelpZone.d.ts +12 -0
  25. package/dist/components/PageLayout/components/PageLayoutHelpZone.js +6 -0
  26. package/dist/components/Table/components/Table.d.ts +2 -2
  27. package/dist/components/Table/components/TableTd.d.ts +1 -1
  28. package/dist/components/Table/components/TableTh.d.ts +1 -1
  29. package/dist/components/index.d.ts +2 -0
  30. package/dist/homepage.js +16 -1
  31. package/dist/hooks/index.d.ts +2 -0
  32. package/dist/hooks/useBackground/index.d.ts +1 -0
  33. package/dist/hooks/useBackground/useBackground.d.ts +7 -0
  34. package/dist/hooks/useBackground/useBackground.js +16 -0
  35. package/dist/hooks/useClickOutside/useClickOutside.d.ts +1 -1
  36. package/dist/hooks/useClickOutside/useClickOutside.js +3 -2
  37. package/dist/hooks/useToast/useToast.d.ts +1 -0
  38. package/dist/hooks/useToast/useToast.js +12 -9
  39. package/dist/hooks/useUserPreferences/index.d.ts +1 -0
  40. package/dist/hooks/useUserPreferences/useUserPreferences.d.ts +9 -0
  41. package/dist/hooks/useUserPreferences/useUserPreferences.js +40 -0
  42. package/dist/hooks/useZendeskGuide/useZendeskGuide.d.ts +16 -2
  43. package/dist/hooks/useZendeskGuide/useZendeskGuide.js +58 -24
  44. package/dist/icons.js +404 -402
  45. package/dist/index.js +168 -160
  46. package/dist/modules/HelpZone/HelpZone.d.ts +13 -0
  47. package/dist/modules/HelpZone/HelpZone.js +52 -0
  48. package/dist/modules/HelpZone/HelpZoneContainer.d.ts +4 -0
  49. package/dist/modules/HelpZone/HelpZoneContainer.js +18 -0
  50. package/dist/modules/HelpZone/index.d.ts +3 -0
  51. package/dist/modules/homepage/components/Favorites/Favorites.js +2 -2
  52. package/dist/modules/homepage/components/Header/Header.js +11 -4
  53. package/dist/modules/homepage/components/HomeCard/HomeCard.d.ts +1 -1
  54. package/dist/modules/homepage/components/HomeCard/HomeCardHeader.d.ts +15 -1
  55. package/dist/modules/homepage/components/HomeCard/HomeCardHeader.js +2 -1
  56. package/dist/modules/homepage/components/Notifications/components/NotificationFilterModal.js +36 -26
  57. package/dist/modules/homepage/components/Notifications/components/ReportNotificationModal.js +1 -1
  58. package/dist/modules/homepage/components/Notifications/services/queries/notification.js +9 -2
  59. package/dist/modules/homepage/components/UsefulLinks/LinkForm.d.ts +13 -0
  60. package/dist/modules/homepage/components/UsefulLinks/LinkForm.js +67 -0
  61. package/dist/modules/homepage/components/UsefulLinks/UsefulLinks.d.ts +6 -0
  62. package/dist/modules/homepage/components/UsefulLinks/UsefulLinks.js +31 -0
  63. package/dist/modules/homepage/components/UsefulLinks/UsefulLinksContainer.d.ts +1 -0
  64. package/dist/modules/homepage/components/UsefulLinks/UsefulLinksContainer.js +40 -0
  65. package/dist/modules/homepage/components/UsefulLinks/UsefulLinksModal.d.ts +11 -0
  66. package/dist/modules/homepage/components/UsefulLinks/UsefulLinksModal.js +65 -0
  67. package/dist/modules/homepage/components/UsefulLinks/hooks/useUsefulLinksContainer.d.ts +19 -0
  68. package/dist/modules/homepage/components/UsefulLinks/hooks/useUsefulLinksContainer.js +26 -0
  69. package/dist/modules/homepage/components/UsefulLinks/index.d.ts +5 -0
  70. package/dist/modules/homepage/components/UsefulLinks/services/api/index.d.ts +6 -0
  71. package/dist/modules/homepage/components/UsefulLinks/services/api/index.js +5 -0
  72. package/dist/modules/homepage/components/UsefulLinks/services/api/usefulLinksService.d.ts +31 -0
  73. package/dist/modules/homepage/components/UsefulLinks/services/api/usefulLinksService.js +50 -0
  74. package/dist/modules/homepage/components/UsefulLinks/services/queries/usefulLinks.d.ts +20 -0
  75. package/dist/modules/homepage/components/UsefulLinks/services/queries/usefulLinks.js +65 -0
  76. package/dist/modules/homepage/components/UserSpace/UserSpace.d.ts +3 -1
  77. package/dist/modules/homepage/components/UserSpace/UserSpace.js +13 -7
  78. package/dist/modules/homepage/components/UserSpace/UserSpaceContainer.d.ts +4 -2
  79. package/dist/modules/homepage/components/UserSpace/UserSpaceContainer.js +3 -2
  80. package/dist/modules/homepage/components/UserSpace/hooks/useProfileLinks.js +18 -8
  81. package/dist/modules/homepage/components/WidgetsPersonalizationPanel/WidgetToggle.d.ts +16 -0
  82. package/dist/modules/homepage/components/WidgetsPersonalizationPanel/WidgetToggle.js +15 -0
  83. package/dist/modules/homepage/components/WidgetsPersonalizationPanel/WidgetsPersonalizationPanel.d.ts +21 -0
  84. package/dist/modules/homepage/components/WidgetsPersonalizationPanel/WidgetsPersonalizationPanel.js +47 -0
  85. package/dist/modules/homepage/components/WidgetsPersonalizationPanel/index.d.ts +2 -0
  86. package/dist/modules/homepage/components/index.d.ts +3 -1
  87. package/dist/modules/icons/components/IconAddWidget.d.ts +7 -0
  88. package/dist/modules/icons/components/IconAddWidget.js +12 -0
  89. package/dist/modules/icons/components/index.d.ts +1 -0
  90. package/dist/modules/icons/components/logo/IconLogoEdificeFull.d.ts +7 -0
  91. package/dist/modules/icons/components/logo/IconLogoEdificeFull.js +26 -0
  92. package/dist/modules/icons/components/logo/IconLogoEdificeSmall.d.ts +7 -0
  93. package/dist/modules/icons/components/logo/IconLogoEdificeSmall.js +17 -0
  94. package/dist/modules/icons/components/logo/index.d.ts +2 -0
  95. package/dist/modules/widgets/index.d.ts +1 -1
  96. package/package.json +6 -6
@@ -1,12 +1,11 @@
1
1
  import { jsxs, jsx } from "react/jsx-runtime";
2
2
  import clsx from "clsx";
3
- import { useState } from "react";
3
+ import { useState, useRef, useMemo, useEffect } from "react";
4
4
  import { useTranslation } from "react-i18next";
5
5
  import SvgIconCheck from "../../../../icons/components/IconCheck.js";
6
6
  import { getAppCodeAndI18nKey } from "./notificationAdapter.js";
7
7
  import Modal from "../../../../../components/Modal/Modal.js";
8
8
  import Flex from "../../../../../components/Flex/Flex.js";
9
- import Checkbox from "../../../../../components/Checkbox/Checkbox.js";
10
9
  import AppIcon from "../../../../../components/AppIcon/AppIcon.js";
11
10
  import ButtonBeta from "../../../../../components/ButtonBeta/ButtonBeta.js";
12
11
  const NotificationFilterModal = ({
@@ -17,48 +16,59 @@ const NotificationFilterModal = ({
17
16
  onApply
18
17
  }) => {
19
18
  const {
20
- t
21
- } = useTranslation(), [selected, setSelected] = useState(appliedTypes), toggleType = (type) => {
19
+ t,
20
+ i18n
21
+ } = useTranslation(), [selected, setSelected] = useState(appliedTypes), refSelectAllCheckbox = useRef(null), allTypesSorted = useMemo(() => allTypes.map((type) => {
22
+ const [appCode, appI18nKey] = getAppCodeAndI18nKey(type), label = t(appI18nKey, {
23
+ defaultValue: appCode
24
+ });
25
+ return {
26
+ type,
27
+ appCode,
28
+ appI18nKey,
29
+ label
30
+ };
31
+ }).sort((a, b) => a.label.localeCompare(b.label, i18n.language, {
32
+ sensitivity: "base"
33
+ })), [allTypes, t, i18n.language]), toggleType = (type) => {
22
34
  setSelected((current) => current.includes(type) ? current.filter((value) => value !== type) : [...current, type]);
23
35
  }, toggleAll = () => {
24
36
  setSelected(selected.length === allTypes.length ? [] : allTypes);
25
37
  };
26
- return /* @__PURE__ */ jsxs(Modal, { id: "notification-filter-modal", size: "lg", scrollable: !0, isOpen, onModalClose: onCancel, children: [
27
- /* @__PURE__ */ jsx(Modal.Header, { onModalClose: onCancel, children: t("homepage.notifications.filter-modal.title", {
28
- defaultValue: "Filtrer les notifications"
29
- }) }),
30
- /* @__PURE__ */ jsx(Modal.Subtitle, { children: t("homepage.notifications.filter-modal.subtitle", {
31
- defaultValue: "Sélectionnez seulement les notifications importantes pour vous"
32
- }) }),
38
+ return useEffect(() => {
39
+ refSelectAllCheckbox.current && (refSelectAllCheckbox.current.indeterminate = selected.length > 0 && selected.length < allTypes.length);
40
+ }, [selected.length, allTypes.length]), /* @__PURE__ */ jsxs(Modal, { id: "notification-filter-modal", size: "lg", scrollable: !0, isOpen, onModalClose: onCancel, children: [
41
+ /* @__PURE__ */ jsx(Modal.Header, { onModalClose: onCancel, children: t("homepage.notifications.filter-modal.title") }),
42
+ /* @__PURE__ */ jsx(Modal.Subtitle, { children: t("homepage.notifications.filter-modal.subtitle") }),
33
43
  /* @__PURE__ */ jsxs(Modal.Body, { children: [
34
- /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "8", className: "mb-16", children: [
35
- /* @__PURE__ */ jsx("div", { className: "notification-filter-select-all", children: /* @__PURE__ */ jsx(Checkbox, { label: t("homepage.notifications.filter-modal.select-all", {
36
- defaultValue: "Tout sélectionner"
37
- }), checked: selected.length === allTypes.length, indeterminate: selected.length > 0 && selected.length < allTypes.length, onChange: toggleAll }) }),
44
+ /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "8", className: "mb-24", children: [
45
+ /* @__PURE__ */ jsxs("label", { className: "notification-filter-select-all notification-filter-chip", children: [
46
+ /* @__PURE__ */ jsx("span", { children: t("homepage.notifications.filter-modal.select-all") }),
47
+ /* @__PURE__ */ jsx("input", { type: "checkbox", ref: refSelectAllCheckbox, checked: selected.length === allTypes.length, className: "notification-filter-checkbox", onChange: toggleAll })
48
+ ] }),
38
49
  /* @__PURE__ */ jsx("span", { className: "notification-filter-count", children: t("homepage.notifications.filter-modal.count", {
39
50
  selected: selected.length,
40
- total: allTypes.length,
41
- defaultValue: "[[selected]] / [[total]] sélectionnées"
51
+ total: allTypes.length
42
52
  }) })
43
53
  ] }),
44
- /* @__PURE__ */ jsx(Flex, { wrap: "wrap", gap: "8", className: "notification-filter-options", children: allTypes.map((type) => {
45
- const [appCode, appI18nKey] = getAppCodeAndI18nKey(type), checked = selected.includes(type);
54
+ /* @__PURE__ */ jsx(Flex, { wrap: "wrap", gap: "16", className: "notification-filter-options", children: allTypesSorted.map(({
55
+ type,
56
+ label,
57
+ appCode
58
+ }) => {
59
+ const checked = selected.includes(type);
46
60
  return /* @__PURE__ */ jsxs("label", { className: clsx("notification-filter-chip", {
47
61
  "is-checked": checked
48
62
  }), children: [
49
63
  /* @__PURE__ */ jsx(AppIcon, { app: appCode, size: "24", iconFit: "contain" }),
50
- /* @__PURE__ */ jsx("span", { children: t(appI18nKey, {
51
- defaultValue: appCode
52
- }) }),
53
- /* @__PURE__ */ jsx("input", { type: "checkbox", className: "form-check-input", checked, onChange: () => toggleType(type) })
64
+ /* @__PURE__ */ jsx("span", { children: label }),
65
+ /* @__PURE__ */ jsx("input", { type: "checkbox", className: "notification-filter-checkbox", checked, onChange: () => toggleType(type) })
54
66
  ] }, type);
55
67
  }) })
56
68
  ] }),
57
69
  /* @__PURE__ */ jsxs(Modal.Footer, { children: [
58
70
  /* @__PURE__ */ jsx(ButtonBeta, { color: "tertiary", onClick: onCancel, type: "button", variant: "ghost", children: t("cancel") }),
59
- /* @__PURE__ */ jsx(ButtonBeta, { color: "default", onClick: () => onApply(selected), type: "button", variant: "filled", rightIcon: /* @__PURE__ */ jsx(SvgIconCheck, {}), children: t("homepage.notifications.filter-modal.confirm", {
60
- defaultValue: "Enregistrer"
61
- }) })
71
+ /* @__PURE__ */ jsx(ButtonBeta, { color: "default", onClick: () => onApply(selected), type: "button", variant: "filled", rightIcon: /* @__PURE__ */ jsx(SvgIconCheck, {}), children: t("homepage.notifications.filter-modal.confirm") })
62
72
  ] })
63
73
  ] });
64
74
  };
@@ -11,7 +11,7 @@ const ReportNotificationModal = ({
11
11
  const {
12
12
  t
13
13
  } = useTranslation();
14
- return /* @__PURE__ */ jsxs(Modal, { id: "report-notification-modal", size: "lg", isOpen, onModalClose: onCancel, children: [
14
+ return /* @__PURE__ */ jsxs(Modal, { id: "report-notification-modal", size: "sm", isOpen, onModalClose: onCancel, children: [
15
15
  /* @__PURE__ */ jsx(Modal.Header, { onModalClose: onCancel, children: t("homepage.notifications.report-modal.title", {
16
16
  defaultValue: "Signaler une notification"
17
17
  }) }),
@@ -1,6 +1,8 @@
1
1
  import { odeServices } from "@edifice.io/client";
2
2
  import { useQuery, useInfiniteQuery, useMutation, useQueryClient, queryOptions, infiniteQueryOptions } from "@tanstack/react-query";
3
+ import { useTranslation } from "react-i18next";
3
4
  import { notificationService } from "../api/index.js";
5
+ import useToast from "../../../../../../hooks/useToast/useToast.js";
4
6
  const notificationQueryKeys = {
5
7
  all: () => ["notifications"],
6
8
  notifications: (types = []) => [...notificationQueryKeys.all(), "list", types],
@@ -52,7 +54,9 @@ const notificationQueryKeys = {
52
54
  }, useReportNotification = () => useMutation({
53
55
  mutationFn: (id) => notificationService.reportNotification(id)
54
56
  }), useDeleteNotification = () => {
55
- const queryClient = useQueryClient();
57
+ const {
58
+ t
59
+ } = useTranslation(), toast = useToast(), queryClient = useQueryClient();
56
60
  return useMutation({
57
61
  mutationFn: (id) => notificationService.deleteNotification(id),
58
62
  onSuccess: (_data, id) => {
@@ -61,7 +65,10 @@ const notificationQueryKeys = {
61
65
  }, (data) => data && {
62
66
  ...data,
63
67
  pages: data.pages.map((page) => page.filter((notification) => notification._id !== id))
64
- });
68
+ }), toast.success(t("homepage.notifications.options.delete.success"));
69
+ },
70
+ onError: () => {
71
+ toast.error(t("homepage.notifications.options.delete.error"));
65
72
  }
66
73
  });
67
74
  };
@@ -0,0 +1,13 @@
1
+ import { UsefulLink, UsefulLinkPayload } from '@edifice.io/client';
2
+ export interface LinkFormProps {
3
+ mode: 'add' | 'edit';
4
+ /** Link being edited. Ignored (and required to be undefined) in "add" mode. */
5
+ link?: UsefulLink;
6
+ isSubmitting: boolean;
7
+ /** Closes the form and goes back to the management modal, without saving. */
8
+ onCancel: () => void;
9
+ /** Closes the whole modal stack. */
10
+ onClose: () => void;
11
+ onSubmit: (payload: UsefulLinkPayload) => void;
12
+ }
13
+ export declare function LinkForm({ mode, link, isSubmitting, onCancel, onClose, onSubmit, }: LinkFormProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,67 @@
1
+ import { jsxs, jsx } from "react/jsx-runtime";
2
+ import { useTranslation } from "react-i18next";
3
+ import { useForm } from "react-hook-form";
4
+ import ModalBeta from "../../../../components/ModalBeta/ModalBeta.js";
5
+ import FormControl from "../../../../components/Form/FormControl.js";
6
+ import Label from "../../../../components/Label/Label.js";
7
+ import Input from "../../../../components/Input/Input.js";
8
+ import ButtonBeta from "../../../../components/ButtonBeta/ButtonBeta.js";
9
+ const NAME_MAX_LENGTH = 80, URL_PATTERN = /^https?:\/\/.+/i;
10
+ function LinkForm({
11
+ mode,
12
+ link,
13
+ isSubmitting,
14
+ onCancel,
15
+ onClose,
16
+ onSubmit
17
+ }) {
18
+ const {
19
+ t
20
+ } = useTranslation(), formId = "useful-link-form", {
21
+ register,
22
+ handleSubmit,
23
+ formState: {
24
+ errors,
25
+ isDirty,
26
+ isValid
27
+ }
28
+ } = useForm({
29
+ mode: "onChange",
30
+ defaultValues: {
31
+ name: (link == null ? void 0 : link.name) ?? "",
32
+ url: (link == null ? void 0 : link.url) ?? ""
33
+ }
34
+ }), title = t(mode === "add" ? "homepage.usefulLinks.form.addTitle" : "homepage.usefulLinks.form.editTitle"), handleFormSubmit = (data) => {
35
+ onSubmit({
36
+ name: data.name.trim(),
37
+ url: data.url.trim()
38
+ });
39
+ };
40
+ return /* @__PURE__ */ jsxs(ModalBeta, { id: "useful-link-modal", isOpen: !0, size: "l", onModalClose: onClose, children: [
41
+ /* @__PURE__ */ jsx(ModalBeta.Header, { onModalClose: onClose, children: title }),
42
+ /* @__PURE__ */ jsx(ModalBeta.Body, { children: /* @__PURE__ */ jsxs("form", { id: formId, onSubmit: handleSubmit(handleFormSubmit), children: [
43
+ /* @__PURE__ */ jsxs(FormControl, { id: "useful-link-name", className: "mb-16", isRequired: !0, children: [
44
+ /* @__PURE__ */ jsx(Label, { children: t("homepage.usefulLinks.form.name") }),
45
+ /* @__PURE__ */ jsx(Input, { type: "text", size: "md", maxLength: NAME_MAX_LENGTH, showCounter: !0, clearable: !0, "data-testid": "usefullinks-input-name", placeholder: t("homepage.usefulLinks.form.name.placeholder"), ...register("name", {
46
+ required: !0,
47
+ maxLength: NAME_MAX_LENGTH
48
+ }) })
49
+ ] }),
50
+ /* @__PURE__ */ jsxs(FormControl, { id: "useful-link-url", isRequired: !0, status: errors.url ? "invalid" : void 0, children: [
51
+ /* @__PURE__ */ jsx(Label, { children: t("homepage.usefulLinks.form.url") }),
52
+ /* @__PURE__ */ jsx(Input, { type: "text", size: "md", "data-testid": "usefullinks-input-url", placeholder: t("homepage.usefulLinks.form.url.placeholder"), ...register("url", {
53
+ required: !0,
54
+ pattern: URL_PATTERN
55
+ }) }),
56
+ errors.url && /* @__PURE__ */ jsx(FormControl.Text, { children: t("homepage.usefulLinks.form.url.error") })
57
+ ] })
58
+ ] }) }),
59
+ /* @__PURE__ */ jsxs(ModalBeta.Footer, { children: [
60
+ /* @__PURE__ */ jsx(ButtonBeta, { type: "button", variant: "ghost", color: "tertiary", "data-testid": "usefullinks-button-cancel", onClick: onCancel, children: t("homepage.usefulLinks.form.cancel") }),
61
+ /* @__PURE__ */ jsx(ButtonBeta, { form: formId, type: "submit", isLoading: isSubmitting, disabled: !isValid || !isDirty || isSubmitting, "data-testid": "usefullinks-button-save", children: t("homepage.usefulLinks.form.save") })
62
+ ] })
63
+ ] });
64
+ }
65
+ export {
66
+ LinkForm
67
+ };
@@ -0,0 +1,6 @@
1
+ import { UsefulLink } from '@edifice.io/client';
2
+ export interface UsefulLinksProps {
3
+ links: UsefulLink[];
4
+ onEditClick: () => void;
5
+ }
6
+ export declare function UsefulLinks({ links, onEditClick }: UsefulLinksProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,31 @@
1
+ import { jsxs, jsx } from "react/jsx-runtime";
2
+ import { useTranslation } from "react-i18next";
3
+ import illuEmptyUsefulLinks from "@edifice.io/bootstrap/dist/images/homepage/illu-empty-useful-links.png";
4
+ import SvgIconEdit from "../../../icons/components/IconEdit.js";
5
+ import HomeCard from "../HomeCard/HomeCard.js";
6
+ import Image from "../../../../components/Image/Image.js";
7
+ import Flex from "../../../../components/Flex/Flex.js";
8
+ import LinkPill from "../../../../components/LinkPill/LinkPill.js";
9
+ function UsefulLinks({
10
+ links,
11
+ onEditClick
12
+ }) {
13
+ const {
14
+ t
15
+ } = useTranslation();
16
+ return /* @__PURE__ */ jsxs(HomeCard, { variant: "primary", children: [
17
+ /* @__PURE__ */ jsx(HomeCard.Header, { title: t("homepage.usefulLinks.title"), actionLabel: t("homepage.usefulLinks.edit"), actionLeftIcon: /* @__PURE__ */ jsx(SvgIconEdit, {}), onActionClick: onEditClick, actionProps: {
18
+ "data-testid": "usefullinks-button-edit"
19
+ } }),
20
+ /* @__PURE__ */ jsx(HomeCard.Content, { children: links.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "useful-links-widget__empty", children: [
21
+ /* @__PURE__ */ jsx(Image, { src: illuEmptyUsefulLinks, alt: "", "aria-hidden": "true", style: {
22
+ width: 160,
23
+ height: 87
24
+ } }),
25
+ /* @__PURE__ */ jsx("p", { className: "useful-links-widget__empty-text", children: t("homepage.usefulLinks.empty") })
26
+ ] }) : /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "8", children: links.map((link) => /* @__PURE__ */ jsx(LinkPill, { href: link.url, label: link.name, "data-testid": `usefullinks-link-${link.id}` }, link.id)) }) })
27
+ ] });
28
+ }
29
+ export {
30
+ UsefulLinks
31
+ };
@@ -0,0 +1 @@
1
+ export declare function UsefulLinksContainer(): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,40 @@
1
+ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
2
+ import { useState } from "react";
3
+ import { useUsefulLinksContainer } from "./hooks/useUsefulLinksContainer.js";
4
+ import { LinkForm } from "./LinkForm.js";
5
+ import { UsefulLinks } from "./UsefulLinks.js";
6
+ import { UsefulLinksModal } from "./UsefulLinksModal.js";
7
+ function UsefulLinksContainer() {
8
+ const [view, setView] = useState({
9
+ name: "closed"
10
+ }), {
11
+ links,
12
+ canAddLink,
13
+ createLink,
14
+ isCreating,
15
+ updateLink,
16
+ isUpdating,
17
+ deleteLink
18
+ } = useUsefulLinksContainer(), closeAll = () => setView({
19
+ name: "closed"
20
+ }), backToManage = () => setView({
21
+ name: "manage"
22
+ }), handleSubmit = async (payload) => {
23
+ view.name === "edit" ? await updateLink(view.link.id, payload) : await createLink(payload), backToManage();
24
+ };
25
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
26
+ /* @__PURE__ */ jsx(UsefulLinks, { links, onEditClick: () => setView({
27
+ name: "manage"
28
+ }) }),
29
+ /* @__PURE__ */ jsx(UsefulLinksModal, { isOpen: view.name === "manage", links, canAddLink, onClose: closeAll, onAddClick: () => setView({
30
+ name: "add"
31
+ }), onEditLink: (link) => setView({
32
+ name: "edit",
33
+ link
34
+ }), onDeleteLink: deleteLink }),
35
+ (view.name === "add" || view.name === "edit") && /* @__PURE__ */ jsx(LinkForm, { mode: view.name, link: view.name === "edit" ? view.link : void 0, isSubmitting: view.name === "edit" ? isUpdating : isCreating, onCancel: backToManage, onClose: closeAll, onSubmit: handleSubmit })
36
+ ] });
37
+ }
38
+ export {
39
+ UsefulLinksContainer
40
+ };
@@ -0,0 +1,11 @@
1
+ import { UsefulLink } from '@edifice.io/client';
2
+ export interface UsefulLinksModalProps {
3
+ isOpen: boolean;
4
+ links: UsefulLink[];
5
+ canAddLink: boolean;
6
+ onClose: () => void;
7
+ onAddClick: () => void;
8
+ onEditLink: (link: UsefulLink) => void;
9
+ onDeleteLink: (id: string) => void;
10
+ }
11
+ export declare function UsefulLinksModal({ isOpen, links, canAddLink, onClose, onAddClick, onEditLink, onDeleteLink, }: UsefulLinksModalProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,65 @@
1
+ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
+ import { useTranslation } from "react-i18next";
3
+ import illuEmptyUsefulLinks from "@edifice.io/bootstrap/dist/images/homepage/illu-empty-useful-links.png";
4
+ import SvgIconClose from "../../../icons/components/IconClose.js";
5
+ import SvgIconEdit from "../../../icons/components/IconEdit.js";
6
+ import SvgIconPlus from "../../../icons/components/IconPlus.js";
7
+ import useBreakpoint from "../../../../hooks/useBreakpoint/useBreakpoint.js";
8
+ import ButtonBeta from "../../../../components/ButtonBeta/ButtonBeta.js";
9
+ import ModalBeta from "../../../../components/ModalBeta/ModalBeta.js";
10
+ import Flex from "../../../../components/Flex/Flex.js";
11
+ import Image from "../../../../components/Image/Image.js";
12
+ import Table from "../../../../components/Table/components/Table.js";
13
+ function UsefulLinksModal({
14
+ isOpen,
15
+ links,
16
+ canAddLink,
17
+ onClose,
18
+ onAddClick,
19
+ onEditLink,
20
+ onDeleteLink
21
+ }) {
22
+ const {
23
+ t
24
+ } = useTranslation(), {
25
+ md
26
+ } = useBreakpoint(), addLinkButton = /* @__PURE__ */ jsx(ButtonBeta, { type: "button", variant: "outline", leftIcon: /* @__PURE__ */ jsx(SvgIconPlus, {}), onClick: onAddClick, disabled: !canAddLink, "data-testid": "usefullinks-button-add", children: t("homepage.usefulLinks.modal.add") });
27
+ return /* @__PURE__ */ jsxs(ModalBeta, { id: "useful-links-modal", isOpen, size: "l", onModalClose: onClose, children: [
28
+ /* @__PURE__ */ jsx(ModalBeta.Header, { onModalClose: onClose, children: t("homepage.usefulLinks.modal.title") }),
29
+ /* @__PURE__ */ jsx(ModalBeta.Body, { children: links.length === 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
30
+ /* @__PURE__ */ jsx(Flex, { justify: "end", className: "mb-16", children: addLinkButton }),
31
+ /* @__PURE__ */ jsxs("div", { className: "useful-links-modal__empty", children: [
32
+ /* @__PURE__ */ jsx(Image, { src: illuEmptyUsefulLinks, alt: "", "aria-hidden": "true", style: {
33
+ width: 200,
34
+ height: 109
35
+ } }),
36
+ /* @__PURE__ */ jsx("p", { className: "useful-links-modal__empty-title", children: t("homepage.usefulLinks.modal.empty.title") }),
37
+ /* @__PURE__ */ jsx("p", { className: "useful-links-modal__empty-text", children: t("homepage.usefulLinks.modal.empty.text") })
38
+ ] })
39
+ ] }) : /* @__PURE__ */ jsx("div", { className: "useful-links-table", children: /* @__PURE__ */ jsxs(Table, { children: [
40
+ /* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
41
+ /* @__PURE__ */ jsx(Table.Th, { className: "visually-hidden", children: t("homepage.usefulLinks.modal.table.name") }),
42
+ /* @__PURE__ */ jsx(Table.Th, { className: "visually-hidden", children: t("homepage.usefulLinks.modal.table.url") }),
43
+ /* @__PURE__ */ jsx(Table.Th, { className: "visually-hidden", children: t("homepage.usefulLinks.modal.table.actions") })
44
+ ] }) }),
45
+ /* @__PURE__ */ jsxs(Table.Tbody, { children: [
46
+ /* @__PURE__ */ jsx(Table.Tr, { className: "useful-links-table__action-row", children: /* @__PURE__ */ jsx(Table.Td, { colSpan: md ? 3 : 2, children: /* @__PURE__ */ jsx(Flex, { justify: "end", children: addLinkButton }) }) }),
47
+ links.map((link) => /* @__PURE__ */ jsxs(Table.Tr, { "data-testid": `usefullinks-row-${link.id}`, children: [
48
+ /* @__PURE__ */ jsx(Table.Td, { className: "useful-links-table__name", children: link.name }),
49
+ /* @__PURE__ */ jsx(Table.Td, { className: "useful-links-table__url", children: link.url }),
50
+ /* @__PURE__ */ jsx(Table.Td, { className: "useful-links-table__actions", children: /* @__PURE__ */ jsxs(Flex, { gap: "4", justify: "end", children: [
51
+ /* @__PURE__ */ jsx(ButtonBeta, { type: "button", variant: "ghost", color: "tertiary", size: "sm", leftIcon: /* @__PURE__ */ jsx(SvgIconEdit, {}), "aria-label": t("homepage.usefulLinks.modal.table.edit", {
52
+ name: link.name
53
+ }), "data-testid": `usefullinks-button-edit-${link.id}`, onClick: () => onEditLink(link) }),
54
+ /* @__PURE__ */ jsx(ButtonBeta, { type: "button", variant: "ghost", color: "tertiary", size: "sm", leftIcon: /* @__PURE__ */ jsx(SvgIconClose, {}), "aria-label": t("homepage.usefulLinks.modal.table.delete", {
55
+ name: link.name
56
+ }), "data-testid": `usefullinks-button-delete-${link.id}`, onClick: () => onDeleteLink(link.id) })
57
+ ] }) })
58
+ ] }, link.id))
59
+ ] })
60
+ ] }) }) })
61
+ ] });
62
+ }
63
+ export {
64
+ UsefulLinksModal
65
+ };
@@ -0,0 +1,19 @@
1
+ import { UsefulLink, UsefulLinkPayload } from '@edifice.io/client';
2
+ /** Maximum number of useful links a user can save. */
3
+ export declare const MAX_USEFUL_LINKS = 10;
4
+ export interface UseUsefulLinksContainerReturn {
5
+ links: UsefulLink[];
6
+ isLoading: boolean;
7
+ error: Error | null;
8
+ /** Whether the user can still add a new link (fewer than MAX_USEFUL_LINKS). */
9
+ canAddLink: boolean;
10
+ createLink: (payload: UsefulLinkPayload) => Promise<UsefulLink>;
11
+ isCreating: boolean;
12
+ updateLink: (id: string, payload: UsefulLinkPayload) => Promise<UsefulLink>;
13
+ isUpdating: boolean;
14
+ deleteLink: (id: string) => void;
15
+ }
16
+ /**
17
+ * Custom hook that provides useful links data and CRUD handlers.
18
+ */
19
+ export declare const useUsefulLinksContainer: () => UseUsefulLinksContainerReturn;
@@ -0,0 +1,26 @@
1
+ import { useUsefulLinks, useCreateUsefulLink, useUpdateUsefulLink, useDeleteUsefulLink } from "../services/queries/usefulLinks.js";
2
+ const MAX_USEFUL_LINKS = 10, useUsefulLinksContainer = () => {
3
+ const {
4
+ data: links,
5
+ isLoading,
6
+ error
7
+ } = useUsefulLinks(), createMutation = useCreateUsefulLink(), updateMutation = useUpdateUsefulLink(), deleteMutation = useDeleteUsefulLink();
8
+ return {
9
+ links: links ?? [],
10
+ isLoading,
11
+ error,
12
+ canAddLink: ((links == null ? void 0 : links.length) ?? 0) < MAX_USEFUL_LINKS,
13
+ createLink: (payload) => createMutation.mutateAsync(payload),
14
+ isCreating: createMutation.isPending,
15
+ updateLink: (id, payload) => updateMutation.mutateAsync({
16
+ id,
17
+ payload
18
+ }),
19
+ isUpdating: updateMutation.isPending,
20
+ deleteLink: (id) => deleteMutation.mutate(id)
21
+ };
22
+ };
23
+ export {
24
+ MAX_USEFUL_LINKS,
25
+ useUsefulLinksContainer
26
+ };
@@ -0,0 +1,5 @@
1
+ export * from './LinkForm';
2
+ export * from './UsefulLinks';
3
+ export * from './UsefulLinksContainer';
4
+ export * from './UsefulLinksModal';
5
+ export * from './hooks/useUsefulLinksContainer';
@@ -0,0 +1,6 @@
1
+ export declare const usefulLinksService: {
2
+ getUsefulLinks(): Promise<import('@edifice.io/client').UsefulLink[]>;
3
+ createUsefulLink(payload: import('@edifice.io/client').UsefulLinkPayload): Promise<import('@edifice.io/client').UsefulLink>;
4
+ updateUsefulLink(id: string, payload: import('@edifice.io/client').UsefulLinkPayload): Promise<import('@edifice.io/client').UsefulLink>;
5
+ deleteUsefulLink(id: string): Promise<void>;
6
+ };
@@ -0,0 +1,5 @@
1
+ import { createUsefulLinksService } from "./usefulLinksService.js";
2
+ const usefulLinksService = createUsefulLinksService("");
3
+ export {
4
+ usefulLinksService
5
+ };
@@ -0,0 +1,31 @@
1
+ import { UsefulLink, UsefulLinkPayload } from '@edifice.io/client';
2
+ /**
3
+ * Creates a useful links service with methods to manage the current user's
4
+ * personal "useful links" (homepage "Liens utiles" widget).
5
+ *
6
+ * Backend contract: `GET`/`POST`/`PUT`/`DELETE /bookmark/api/v2/bookmarks`.
7
+ * `POST`/`PUT` only return the bookmark's `_id`, not the full resource.
8
+ * Known error code: `bookmark.widget.bad.request.limit.reached` (POST, 400,
9
+ * once the user already has 10 links). `PUT` returns 401 if the id doesn't
10
+ * belong to the user, `DELETE` returns 404 if the id doesn't exist.
11
+ *
12
+ * @param baseURL The base URL for the useful links service API.
13
+ */
14
+ export declare const createUsefulLinksService: (baseURL: string) => {
15
+ /**
16
+ * Get the current user's useful links.
17
+ */
18
+ getUsefulLinks(): Promise<UsefulLink[]>;
19
+ /**
20
+ * Create a new useful link.
21
+ */
22
+ createUsefulLink(payload: UsefulLinkPayload): Promise<UsefulLink>;
23
+ /**
24
+ * Update an existing useful link.
25
+ */
26
+ updateUsefulLink(id: string, payload: UsefulLinkPayload): Promise<UsefulLink>;
27
+ /**
28
+ * Delete a useful link.
29
+ */
30
+ deleteUsefulLink(id: string): Promise<void>;
31
+ };
@@ -0,0 +1,50 @@
1
+ import { odeServices } from "@edifice.io/client";
2
+ const toUsefulLink = ({
3
+ _id,
4
+ name,
5
+ url
6
+ }) => ({
7
+ id: _id,
8
+ name,
9
+ url
10
+ }), createUsefulLinksService = (baseURL) => ({
11
+ /**
12
+ * Get the current user's useful links.
13
+ */
14
+ async getUsefulLinks() {
15
+ const {
16
+ bookmarks
17
+ } = await odeServices.http().get(`${baseURL}/bookmark/api/v2/bookmarks`);
18
+ return bookmarks.map(toUsefulLink);
19
+ },
20
+ /**
21
+ * Create a new useful link.
22
+ */
23
+ async createUsefulLink(payload) {
24
+ const {
25
+ _id
26
+ } = await odeServices.http().postJson(`${baseURL}/bookmark/api/v2/bookmarks`, payload);
27
+ return {
28
+ id: _id,
29
+ ...payload
30
+ };
31
+ },
32
+ /**
33
+ * Update an existing useful link.
34
+ */
35
+ async updateUsefulLink(id, payload) {
36
+ return await odeServices.http().putJson(`${baseURL}/bookmark/api/v2/bookmarks/${id}`, payload), {
37
+ id,
38
+ ...payload
39
+ };
40
+ },
41
+ /**
42
+ * Delete a useful link.
43
+ */
44
+ async deleteUsefulLink(id) {
45
+ await odeServices.http().delete(`${baseURL}/bookmark/api/v2/bookmarks/${id}`);
46
+ }
47
+ });
48
+ export {
49
+ createUsefulLinksService
50
+ };
@@ -0,0 +1,20 @@
1
+ import { UsefulLink, UsefulLinkPayload } from '@edifice.io/client';
2
+ export declare const usefulLinksQueryKeys: {
3
+ all: () => readonly ["usefulLinks"];
4
+ };
5
+ export declare const usefulLinksQueryOptions: {
6
+ getUsefulLinks(): import('@tanstack/react-query').OmitKeyof<import('@tanstack/react-query').UseQueryOptions<UsefulLink[], Error, UsefulLink[], import('@tanstack/react-query').QueryKey>, "queryFn"> & {
7
+ queryFn?: import('@tanstack/react-query').QueryFunction<UsefulLink[], import('@tanstack/react-query').QueryKey, never> | undefined;
8
+ } & {
9
+ queryKey: import('@tanstack/react-query').DataTag<import('@tanstack/react-query').QueryKey, UsefulLink[]>;
10
+ };
11
+ };
12
+ export declare const useUsefulLinks: () => import('@tanstack/react-query').UseQueryResult<UsefulLink[], Error>;
13
+ export declare const useCreateUsefulLink: () => import('@tanstack/react-query').UseMutationResult<UsefulLink, Error, UsefulLinkPayload, unknown>;
14
+ export declare const useUpdateUsefulLink: () => import('@tanstack/react-query').UseMutationResult<UsefulLink, Error, {
15
+ id: string;
16
+ payload: UsefulLinkPayload;
17
+ }, unknown>;
18
+ export declare const useDeleteUsefulLink: () => import('@tanstack/react-query').UseMutationResult<void, Error, string, {
19
+ previousLinks: UsefulLink[] | undefined;
20
+ }>;
@@ -0,0 +1,65 @@
1
+ import { useQuery, useQueryClient, useMutation, queryOptions } from "@tanstack/react-query";
2
+ import { usefulLinksService } from "../api/index.js";
3
+ const usefulLinksQueryKeys = {
4
+ all: () => ["usefulLinks"]
5
+ }, usefulLinksQueryOptions = {
6
+ getUsefulLinks() {
7
+ return queryOptions({
8
+ queryKey: usefulLinksQueryKeys.all(),
9
+ queryFn: async () => usefulLinksService.getUsefulLinks()
10
+ });
11
+ }
12
+ }, useUsefulLinks = () => useQuery(usefulLinksQueryOptions.getUsefulLinks()), useCreateUsefulLink = () => {
13
+ const queryClient = useQueryClient();
14
+ return useMutation({
15
+ mutationFn: (payload) => usefulLinksService.createUsefulLink(payload),
16
+ onSuccess: () => {
17
+ queryClient.invalidateQueries({
18
+ queryKey: usefulLinksQueryKeys.all()
19
+ });
20
+ }
21
+ });
22
+ }, useUpdateUsefulLink = () => {
23
+ const queryClient = useQueryClient();
24
+ return useMutation({
25
+ mutationFn: ({
26
+ id,
27
+ payload
28
+ }) => usefulLinksService.updateUsefulLink(id, payload),
29
+ onSuccess: () => {
30
+ queryClient.invalidateQueries({
31
+ queryKey: usefulLinksQueryKeys.all()
32
+ });
33
+ }
34
+ });
35
+ }, useDeleteUsefulLink = () => {
36
+ const queryClient = useQueryClient();
37
+ return useMutation({
38
+ mutationFn: (id) => usefulLinksService.deleteUsefulLink(id),
39
+ onMutate: async (id) => {
40
+ await queryClient.cancelQueries({
41
+ queryKey: usefulLinksQueryKeys.all()
42
+ });
43
+ const previousLinks = queryClient.getQueryData(usefulLinksQueryKeys.all());
44
+ return queryClient.setQueryData(usefulLinksQueryKeys.all(), (links) => links == null ? void 0 : links.filter((link) => link.id !== id)), {
45
+ previousLinks
46
+ };
47
+ },
48
+ onError: (_error, _id, context) => {
49
+ context != null && context.previousLinks && queryClient.setQueryData(usefulLinksQueryKeys.all(), context.previousLinks);
50
+ },
51
+ onSettled: () => {
52
+ queryClient.invalidateQueries({
53
+ queryKey: usefulLinksQueryKeys.all()
54
+ });
55
+ }
56
+ });
57
+ };
58
+ export {
59
+ useCreateUsefulLink,
60
+ useDeleteUsefulLink,
61
+ useUpdateUsefulLink,
62
+ useUsefulLinks,
63
+ usefulLinksQueryKeys,
64
+ usefulLinksQueryOptions
65
+ };
@@ -5,8 +5,10 @@ export type UserSpaceProps = {
5
5
  avatar: string;
6
6
  profile: UserProfile[number];
7
7
  children?: ReactNode;
8
+ /** Renders a trigger button in the top-right corner when provided. */
9
+ onCustomizeWidgetsClick?: () => void;
8
10
  };
9
- declare function UserSpace({ name, avatar, profile, children, }: UserSpaceProps): import("react/jsx-runtime").JSX.Element;
11
+ declare function UserSpace({ name, avatar, profile, children, onCustomizeWidgetsClick, }: UserSpaceProps): import("react/jsx-runtime").JSX.Element;
10
12
  declare namespace UserSpace {
11
13
  var displayName: string;
12
14
  }