@edifice.io/react 2.0.0-develop-rc.8 → 2.0.0-develop-rc.14

package/dist/ui/src/components/ActionBar/ActionBar.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const ActionBar = /* @__PURE__ */ forwardRef(({
+  children
+}, ref) => /* @__PURE__ */ jsx("div", { ref, className: "actionbar", children })), ActionBar$1 = ActionBar;
+export {
+  ActionBar$1 as default
+};

package/dist/ui/src/components/Alert/Alert.js

@@ -0,0 +1,78 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useCallback, useImperativeHandle, useLayoutEffect, useEffect } from "react";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { SuccessOutline as SvgSuccessOutline$1, AlertCircle as SvgAlertCircle$1, InfoCircle as SvgInfoCircle$1, Error as SvgError$1 } from "../../../../icons/dist/index.js";
+import Button from "../Button/Button.js";
+const Alert = /* @__PURE__ */ forwardRef(({
+  type = "success",
+  className = "",
+  children,
+  button,
+  isDismissible = !1,
+  isToast = !1,
+  isConfirm = !1,
+  position = "none",
+  autoClose = !1,
+  autoCloseDelay = 3e3,
+  onClose,
+  onVisibilityChange
+}, ref) => {
+  const [isVisible, setVisibleStatus] = useState(!0), refAlert = useRef(null), {
+    t
+  } = useTranslation(), hide = useCallback(() => {
+    setVisibleStatus(!1), onClose == null || onClose();
+  }, [onClose]);
+  useImperativeHandle(ref, () => ({
+    show,
+    hide,
+    ...refAlert.current
+  })), useLayoutEffect(() => {
+    onVisibilityChange == null || onVisibilityChange(isVisible);
+  }, [isVisible, onVisibilityChange]), useEffect(() => {
+    autoClose && isVisible && setTimeout(() => {
+      hide();
+    }, autoCloseDelay);
+  }, [autoClose, autoCloseDelay, hide, isVisible]);
+  const show = () => {
+    setVisibleStatus(!0);
+  }, mapping = {
+    success: {
+      icon: /* @__PURE__ */ jsx(SvgSuccessOutline$1, {}),
+      classModifier: "alert-success"
+    },
+    warning: {
+      icon: /* @__PURE__ */ jsx(SvgAlertCircle$1, {}),
+      classModifier: "alert-warning"
+    },
+    info: {
+      icon: /* @__PURE__ */ jsx(SvgInfoCircle$1, {}),
+      classModifier: "alert-info"
+    },
+    danger: {
+      icon: /* @__PURE__ */ jsx(SvgError$1, {}),
+      classModifier: "alert-danger"
+    }
+  }, toastClasses = {
+    "is-dismissible": isDismissible,
+    "is-toast ": isToast
+  }, confirmClasses = {
+    "is-confirm": isConfirm
+  }, divContainerClasses = clsx("alert gap-12", mapping[type].classModifier, toastClasses, confirmClasses, position, className);
+  return /* @__PURE__ */ jsx(Fragment, { children: isVisible ? /* @__PURE__ */ jsxs("div", { ref: refAlert, className: divContainerClasses, role: "alert", children: [
+    !isConfirm && mapping[type].icon,
+    /* @__PURE__ */ jsx("div", { className: "alert-content small", children }),
+    button && /* @__PURE__ */ jsxs("div", { className: "ms-12", children: [
+      button,
+      " ",
+      isConfirm && /* @__PURE__ */ jsx(Button, { onClick: hide, children: t("close") })
+    ] }),
+    (isDismissible || isConfirm) && /* @__PURE__ */ jsx("div", { className: "btn-close-container", children: /* @__PURE__ */ jsx("button", { type: "button", className: "btn-close", "data-bs-dismiss": "alert", "aria-label": t("close"), onClick: hide }) }),
+    autoClose && /* @__PURE__ */ jsx("div", { className: "alert-progress", style: {
+      transform: "scaleX(0)"
+    } })
+  ] }) : null });
+});
+export {
+  Alert as default
+};

package/dist/ui/src/components/AppHeader/AppHeader.js

@@ -0,0 +1,22 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+const AppHeader = /* @__PURE__ */ forwardRef(({
+  children,
+  render,
+  isFullscreen = !1,
+  ...restProps
+}, ref) => {
+  const classes = clsx("d-flex flex-wrap p-16 gap-8 border-bottom bg-white", {
+    "justify-content-between": render,
+    "mx-n16": !isFullscreen,
+    "z-3 top-0 start-0 end-0": isFullscreen
+  });
+  return /* @__PURE__ */ jsxs("div", { ref, className: classes, ...restProps, children: [
+    children,
+    render ? /* @__PURE__ */ jsx("div", { className: "d-flex align-items-center ms-auto gap-8", children: render() }) : null
+  ] });
+}), AppHeader$1 = AppHeader;
+export {
+  AppHeader$1 as default
+};

package/dist/ui/src/components/AppIcon/AppIcon.js

@@ -0,0 +1,49 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import Image from "../Image/Image.js";
+import useOdeIcons from "../../core/useOdeIcons/useOdeIcons.js";
+import usePaths from "../../core/usePaths/usePaths.js";
+const AppIcon = /* @__PURE__ */ forwardRef(({
+  app,
+  size = "24",
+  iconFit = "contain",
+  variant = "square",
+  className = ""
+}, ref) => {
+  const {
+    isIconUrl,
+    getIconCode
+  } = useOdeIcons(), [, iconPath] = usePaths(), isSquare = variant === "square", isRounded = variant === "rounded", isCircle = variant === "circle", isContain = iconFit === "contain", isRatio = iconFit === "ratio", iconSizes = {
+    "icon-xs": size === "24",
+    "icon-sm": size === "40",
+    "icon-md": size === "48",
+    "icon-lg": size === "80",
+    "icon-xl": size === "160"
+  }, iconVariant = {
+    square: isSquare,
+    rounded: isRounded,
+    "rounded-circle": isCircle
+  }, iconFits = {
+    "icon-contain": isContain,
+    "icon-ratio": isRatio
+  }, icon = typeof app == "string" ? app : (app == null ? void 0 : app.icon) !== void 0 ? app.icon : "placeholder", displayName = typeof app != "string" && (app == null ? void 0 : app.displayName) !== void 0 ? app.displayName : "", code = app ? getIconCode(app) : "", isIconURL = isIconUrl(icon), appCode = code || "placeholder";
+  if (isIconURL) {
+    const classes2 = clsx("h-full", className);
+    return /* @__PURE__ */ jsx(Image, { src: icon, alt: displayName, objectFit: "contain", width: size, height: size, className: classes2 });
+  }
+  const classes = clsx("app-icon", {
+    ...iconSizes,
+    ...iconVariant,
+    ...iconFits,
+    [`bg-light-${appCode}`]: appCode && !isContain,
+    [`color-app-${appCode}`]: appCode
+  }, className);
+  return /* @__PURE__ */ jsx("div", { className: classes, style: {
+    width: size + "px",
+    height: size + "px"
+  }, children: /* @__PURE__ */ jsx("svg", { ref, width: size, height: size, role: "img", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ jsx("use", { xlinkHref: `${iconPath}/apps.svg#${appCode}` }) }) });
+});
+export {
+  AppIcon
+};

package/dist/ui/src/components/Attachment/Attachment.js

@@ -0,0 +1,15 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Paperclip as SvgPaperclip$1 } from "../../../../icons/dist/index.js";
+const Attachment = /* @__PURE__ */ forwardRef(({
+  name = "Attachment Name",
+  options,
+  ...restProps
+}, ref) => /* @__PURE__ */ jsxs("div", { ref, className: "attachment px-12 py-8", ...restProps, children: [
+  /* @__PURE__ */ jsx(SvgPaperclip$1, { height: 22, width: 22 }),
+  /* @__PURE__ */ jsx("div", { className: "filename text-truncate", children: name }),
+  options && /* @__PURE__ */ jsx("div", { className: "options ps-12", children: options })
+] })), Attachment$1 = Attachment;
+export {
+  Attachment$1 as default
+};

package/dist/ui/src/components/Audience/ReactionChoice.js

@@ -0,0 +1,33 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import useReactionIcons from "./hooks/useReactionIcons.js";
+import { useTranslation } from "react-i18next";
+import clsx from "clsx";
+import Dropdown from "../Dropdown/Dropdown.js";
+import Tooltip from "../Tooltip/Tooltip.js";
+import IconButton from "../Button/IconButton.js";
+const ReactionChoice = ({
+  availableReactions,
+  summary = {
+    totalReactionsCounter: 0,
+    userReaction: null
+  },
+  onChange
+}) => {
+  const {
+    t
+  } = useTranslation(), {
+    getReactionIcon,
+    getReactionLabel
+  } = useReactionIcons(), {
+    userReaction
+  } = summary, classes = clsx({
+    "fw-bold": !!userReaction
+  });
+  return /* @__PURE__ */ jsx("div", { className: "reaction-choice", children: /* @__PURE__ */ jsxs(Dropdown, { placement: "top-start", children: [
+    /* @__PURE__ */ jsx(Dropdown.Trigger, { className: classes, color: "tertiary", variant: "ghost", size: "sm", icon: getReactionIcon(userReaction), hideCarret: !0, label: t(getReactionLabel(userReaction)) }),
+    /* @__PURE__ */ jsx(Dropdown.Menu, { unstyled: !0, className: "bg-white shadow rounded-8 overflow-visible", children: /* @__PURE__ */ jsx("div", { className: "d-flex align-items-center justify-content-between", children: availableReactions == null ? void 0 : availableReactions.map((reactionType) => /* @__PURE__ */ jsx(Dropdown.Item, { className: "p-0", children: /* @__PURE__ */ jsx(Tooltip, { message: t(getReactionLabel(reactionType)), placement: "top", children: /* @__PURE__ */ jsx(IconButton, { className: "reaction-available m-4", variant: "ghost", size: "sm", icon: getReactionIcon(reactionType), onClick: () => onChange == null ? void 0 : onChange(reactionType) }) }) }, reactionType)) }) })
+  ] }) });
+}, ReactionChoice$1 = ReactionChoice;
+export {
+  ReactionChoice$1 as default
+};

package/dist/ui/src/components/Audience/ReactionModal.Card.js

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import useReactionIcons from "./hooks/useReactionIcons.js";
+import useAvatar from "../../core/useAvatar/useAvatar.js";
+import Avatar from "../Avatar/Avatar.js";
+function ReactionModalCard({
+  reaction
+}) {
+  const {
+    t
+  } = useTranslation(), {
+    avatarURL
+  } = useAvatar(reaction.userId, reaction.profile), {
+    getReactionIcon,
+    getReactionLabel
+  } = useReactionIcons();
+  return /* @__PURE__ */ jsxs("div", { className: "reaction-modal-card w-100 d-flex gap-8", children: [
+    /* @__PURE__ */ jsxs("div", { className: "position-relative p-8", children: [
+      /* @__PURE__ */ jsx(Avatar, { variant: "circle", size: "md", src: avatarURL, alt: reaction.displayName }),
+      /* @__PURE__ */ jsx("div", { className: "position-absolute end-0 bottom-0", children: getReactionIcon(reaction.reactionType, !0) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "d-flex flex-column w-100 pt-8", children: [
+      /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-baseline", children: [
+        /* @__PURE__ */ jsx("div", { className: "d-flex overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "text-reset flex-shrink-0", children: reaction.displayName }) }),
+        /* @__PURE__ */ jsx("strong", { className: "ms-12 caption text-gray-700", children: t(reaction.profile) })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "caption text-gray-700", children: t(getReactionLabel(reaction.reactionType)) })
+    ] })
+  ] });
+}
+export {
+  ReactionModalCard
+};

package/dist/ui/src/components/Audience/ReactionModal.js

@@ -0,0 +1,73 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useId, useCallback, useMemo, useEffect } from "react";
+import useReactionIcons from "./hooks/useReactionIcons.js";
+import { useTranslation } from "react-i18next";
+import { ReactionTypes } from "edifice-ts-client";
+import { ReactionModalCard } from "./ReactionModal.Card.js";
+import { createPortal } from "react-dom";
+import Modal from "../Modal/Modal.js";
+import Tabs from "../Tabs/Tabs.js";
+import Button from "../Button/Button.js";
+import { StringUtils } from "../../utils/StringUtils.js";
+const ALL_TAB_ID = "all", ReactionModal = ({
+  resourceId,
+  pageSize = 30,
+  reactionDetailsLoader: loadReactionDetails,
+  onModalClose,
+  ...restProps
+}) => {
+  const [counters, setCounters] = useState({
+    countByType: {},
+    allReactionsCounter: 0
+  }), [reactions, setReactions] = useState([]), [currentTabId, setCurrentTabId] = useState(ALL_TAB_ID), id = useId(), {
+    t
+  } = useTranslation(), {
+    getReactionIcon
+  } = useReactionIcons(), [latestPage, setLatestPage] = useState(0), loadNextPage = useCallback(async () => {
+    const nextPage = latestPage + 1;
+    setLatestPage(nextPage);
+    const data = await loadReactionDetails(resourceId, nextPage, pageSize);
+    if (data) {
+      const {
+        reactionCounters,
+        userReactions
+      } = data;
+      nextPage === 1 && setCounters(reactionCounters), setReactions((old) => [...old, ...userReactions.filter((reaction) => !old.some((oldReaction) => oldReaction.userId === reaction.userId))]);
+    }
+  }, [latestPage, loadReactionDetails, pageSize, resourceId]), panel = useMemo(() => /* @__PURE__ */ jsx("div", { className: "d-flex flex-column w-100 gap-8 mt-32", children: reactions.filter((reaction) => currentTabId === ALL_TAB_ID || reaction.reactionType === currentTabId).map((reaction) => /* @__PURE__ */ jsx(ReactionModal.Card, { reaction }, reaction.userId)) }), [currentTabId, reactions]), tabs = useMemo(() => {
+    const items = ReactionTypes.filter((type) => {
+      var _a;
+      return typeof ((_a = counters.countByType) == null ? void 0 : _a[type]) == "number";
+    }).map((type) => ({
+      id: type,
+      icon: getReactionIcon(type),
+      label: StringUtils.toCounter(counters.countByType[type]),
+      content: panel
+    }));
+    return [{
+      id: ALL_TAB_ID,
+      icon: null,
+      label: t("audience.reaction.tab.all"),
+      content: panel
+    }, ...items];
+  }, [counters.countByType, panel]);
+  useEffect(() => {
+    loadNextPage();
+  }, []);
+  const handleTabChange = (tab) => {
+    setCurrentTabId(tab.id);
+  }, hasMore = reactions.length < counters.allReactionsCounter;
+  return /* @__PURE__ */ createPortal(/* @__PURE__ */ jsxs(Modal, { id, ...restProps, onModalClose, size: "md", scrollable: !0, children: [
+    /* @__PURE__ */ jsx(Modal.Header, { onModalClose, children: /* @__PURE__ */ jsx("h2", { children: t("audience.reaction.modal.header") }) }),
+    /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsx(Tabs, { items: tabs, defaultId: ALL_TAB_ID, onChange: handleTabChange }) }),
+    /* @__PURE__ */ jsxs(Modal.Footer, { children: [
+      hasMore && /* @__PURE__ */ jsx(Button, { color: "tertiary", onClick: loadNextPage, children: t("audience.reaction.modal.more") }),
+      /* @__PURE__ */ jsx(Button, { color: "primary", onClick: onModalClose, type: "button", variant: "filled", children: t("close") })
+    ] })
+  ] }), document.getElementById("portal"));
+};
+ReactionModal.Card = ReactionModalCard;
+const ReactionModal$1 = ReactionModal;
+export {
+  ReactionModal$1 as default
+};

package/dist/ui/src/components/Audience/ReactionSummary.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import useReactionIcons from "./hooks/useReactionIcons.js";
+import Button from "../Button/Button.js";
+import { StringUtils } from "../../utils/StringUtils.js";
+const ReactionSummary = ({
+  summary = {
+    userReaction: null,
+    totalReactionsCounter: 0
+  },
+  onClick
+}) => {
+  const {
+    getReactionIcon
+  } = useReactionIcons(), {
+    totalReactionsCounter,
+    reactionTypes
+  } = summary, hasNoReactions = totalReactionsCounter === 0;
+  return /* @__PURE__ */ jsx(Button, { variant: "ghost", className: "py-4 px-8 btn-icon", disabled: hasNoReactions, onClick: (event) => {
+    event.preventDefault(), event.stopPropagation(), onClick == null || onClick();
+  }, children: /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-gray-700 fw-normal me-8", children: StringUtils.toCounter(totalReactionsCounter) }),
+    hasNoReactions ? /* @__PURE__ */ jsx("div", { className: "reaction-overlap", children: getReactionIcon("REACTION_1", !0) }) : reactionTypes == null ? void 0 : reactionTypes.map((reactionType) => /* @__PURE__ */ jsx("div", { className: "reaction-overlap", children: getReactionIcon(reactionType, !0) }, reactionType))
+  ] }) });
+}, ReactionSummary$1 = ReactionSummary;
+export {
+  ReactionSummary$1 as default
+};

package/dist/ui/src/components/Audience/ViewsByProfileCard.js

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Guest, Personnel, Teacher, Parent, Student } from "@edifice.io/icons/audience";
+import { useTranslation } from "react-i18next";
+import { Users as SvgUsers$1 } from "../../../../icons/dist/index.js";
+import { StringUtils } from "../../utils/StringUtils.js";
+const ViewsByProfileCard = ({
+  viewsByProfile
+}) => {
+  const {
+    t
+  } = useTranslation(), profile = viewsByProfile.profile.toLowerCase(), classNameIcon = `views-detail-icon rounded p-8 views-detail-icon-${profile}`;
+  function getIcon(profile2) {
+    switch (profile2) {
+      case "student":
+        return /* @__PURE__ */ jsx(Student, {});
+      case "relative":
+        return /* @__PURE__ */ jsx(Parent, {});
+      case "teacher":
+        return /* @__PURE__ */ jsx(Teacher, {});
+      case "personnel":
+        return /* @__PURE__ */ jsx(Personnel, {});
+      case "guest":
+        return /* @__PURE__ */ jsx(Guest, {});
+      default:
+        return /* @__PURE__ */ jsx(SvgUsers$1, {});
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "views-detail-line p-8 ms-32 mb-12", children: [
+    /* @__PURE__ */ jsx("div", { className: classNameIcon, children: getIcon(profile) }),
+    /* @__PURE__ */ jsx("div", { className: "h3", children: StringUtils.toCounter(viewsByProfile.counter) }),
+    /* @__PURE__ */ jsx("div", { children: t(`audience.views.uniqueViewsPerProfile.${profile}`) })
+  ] }, profile);
+};
+export {
+  ViewsByProfileCard as default
+};

package/dist/ui/src/components/Audience/ViewsCounter.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { See as SvgSee$1 } from "../../../../icons/dist/index.js";
+import Button from "../Button/Button.js";
+import { StringUtils } from "../../utils/StringUtils.js";
+const ViewsCounter = ({
+  viewsCounter,
+  onClick,
+  className
+}) => {
+  const handleButtonClick = (event) => {
+    event.preventDefault(), event.stopPropagation(), onClick == null || onClick();
+  };
+  return className = clsx("text-gray-700 fw-normal py-4 px-8 btn-icon", className), /* @__PURE__ */ jsx(Button, { rightIcon: /* @__PURE__ */ jsx(SvgSee$1, {}), variant: "ghost", type: "button", className, onClick: handleButtonClick, disabled: !viewsCounter, children: StringUtils.toCounter(viewsCounter) });
+}, ViewsCounter$1 = ViewsCounter;
+export {
+  ViewsCounter$1 as default
+};

package/dist/ui/src/components/Audience/ViewsModal.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+import { See as SvgSee$1, Users as SvgUsers$1 } from "../../../../icons/dist/index.js";
+import ViewsByProfileCard from "./ViewsByProfileCard.js";
+import Modal from "../Modal/Modal.js";
+import Button from "../Button/Button.js";
+import { StringUtils } from "../../utils/StringUtils.js";
+const ViewsModal = ({
+  viewsDetails,
+  isOpen,
+  onModalClose
+}) => {
+  var _a;
+  const {
+    t
+  } = useTranslation(), hasUniqueViews = viewsDetails.uniqueViewsCounter !== void 0;
+  return /* @__PURE__ */ createPortal(/* @__PURE__ */ jsxs(Modal, { id: "ViewsModal", isOpen, onModalClose, children: [
+    /* @__PURE__ */ jsx(Modal.Header, { onModalClose, children: t("audience.views.title") }),
+    /* @__PURE__ */ jsxs(Modal.Body, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "views-detail-line p-8 mb-12", children: [
+        /* @__PURE__ */ jsx("div", { className: "views-detail-icon rounded p-8", children: /* @__PURE__ */ jsx(SvgSee$1, {}) }),
+        /* @__PURE__ */ jsx("div", { className: "h3", children: StringUtils.toCounter(viewsDetails.viewsCounter) }),
+        /* @__PURE__ */ jsx("div", { children: t("audience.views.detail.viewsCounter") })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "views-detail-line p-8 mb-12", children: [
+        /* @__PURE__ */ jsx("div", { className: "views-detail-icon rounded p-8", children: /* @__PURE__ */ jsx(SvgUsers$1, {}) }),
+        hasUniqueViews ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "h3", children: StringUtils.toCounter(viewsDetails.uniqueViewsCounter) }),
+          /* @__PURE__ */ jsx("div", { children: t("audience.views.detail.uniqueViewsCounter") })
+        ] }) : /* @__PURE__ */ jsx("div", { children: t("audience.views.detail.noUniqueViews") })
+      ] }),
+      hasUniqueViews ? (_a = viewsDetails.uniqueViewsPerProfile) == null ? void 0 : _a.map((viewsByProfile) => /* @__PURE__ */ jsx(ViewsByProfileCard, { viewsByProfile }, viewsByProfile.profile)) : null
+    ] }),
+    /* @__PURE__ */ jsx(Modal.Footer, { children: /* @__PURE__ */ jsx(Button, { color: "primary", onClick: onModalClose, type: "button", variant: "filled", children: t("audience.views.cancel") }) })
+  ] }), document.getElementById("portal"));
+}, ViewsModal$1 = ViewsModal;
+export {
+  ViewsModal$1 as default
+};

package/dist/ui/src/components/Audience/hooks/useReactionIcons.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import { InterestingCounter, Interesting, CongratsCounter, Congrats, GreatCounter, Great, ThanksCounter, Thanks } from "@edifice.io/icons/audience";
+import { Reaction as SvgReaction$1 } from "../../../../../icons/dist/index.js";
+function useReactionIcons() {
+  return {
+    getReactionIcon: (reactionType, asCounter) => {
+      switch (reactionType) {
+        case "REACTION_1":
+          return asCounter ? /* @__PURE__ */ jsx(ThanksCounter, {}) : /* @__PURE__ */ jsx(Thanks, {});
+        case "REACTION_2":
+          return asCounter ? /* @__PURE__ */ jsx(GreatCounter, {}) : /* @__PURE__ */ jsx(Great, {});
+        case "REACTION_3":
+          return asCounter ? /* @__PURE__ */ jsx(CongratsCounter, {}) : /* @__PURE__ */ jsx(Congrats, {});
+        case "REACTION_4":
+          return asCounter ? /* @__PURE__ */ jsx(InterestingCounter, {}) : /* @__PURE__ */ jsx(Interesting, {});
+        default:
+          return /* @__PURE__ */ jsx(SvgReaction$1, {});
+      }
+    },
+    getReactionLabel: (reactionType) => {
+      switch (reactionType) {
+        case "REACTION_1":
+          return "audience.reaction.thanks";
+        case "REACTION_2":
+          return "audience.reaction.great";
+        case "REACTION_3":
+          return "audience.reaction.congrats";
+        case "REACTION_4":
+          return "audience.reaction.interesting";
+        default:
+          return "audience.reaction.default";
+      }
+    }
+  };
+}
+export {
+  useReactionIcons as default
+};

package/dist/ui/src/components/Audience/hooks/useReactions.js

@@ -0,0 +1,35 @@
+import { useRef, useState, useCallback, useEffect } from "react";
+import { odeServices, ERROR_CODE } from "edifice-ts-client";
+function useReactions(module, resourceType) {
+  const {
+    reactions
+  } = useRef(odeServices.audience(module, resourceType)).current, [availableReactions, setAvailableReactions] = useState([]);
+  async function loadAvailableReactions() {
+    const results = await reactions.loadAvailableReactions();
+    results && setAvailableReactions(results);
+  }
+  async function loadReactionSummaries(resourceIds) {
+    return await reactions.loadReactionSummaries(resourceIds);
+  }
+  const loadReactionDetails = async (resourceId, page, size = 30) => await reactions.loadReactionDetails(resourceId, page, size), applyReaction = useCallback(
+    async (resourceId, newReaction, oldReaction) => {
+      if (newReaction !== oldReaction && availableReactions.indexOf(newReaction) < 0)
+        return Promise.reject(ERROR_CODE.MALFORMED_DATA);
+      let result = "+";
+      return oldReaction ? newReaction === oldReaction ? (await reactions.deleteReaction(resourceId), result = "-") : (await reactions.updateReaction(resourceId, newReaction), result = "=") : await reactions.createReaction(resourceId, newReaction), odeServices.http().isResponseError() ? Promise.reject(ERROR_CODE.UNKNOWN) : result;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [availableReactions]
+  );
+  return useEffect(() => {
+    loadAvailableReactions();
+  }, []), {
+    availableReactions,
+    loadReactionDetails,
+    loadReactionSummaries,
+    applyReaction
+  };
+}
+export {
+  useReactions as default
+};

package/dist/ui/src/components/Avatar/Avatar.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import usePaths from "../../core/usePaths/usePaths.js";
+import Image from "../Image/Image.js";
+const Avatar = /* @__PURE__ */ forwardRef(({
+  variant = "square",
+  size = "md",
+  alt,
+  src,
+  imgPlaceholder,
+  className,
+  ...restProps
+}, ref) => {
+  const [imagePath] = usePaths(), placeholder = imgPlaceholder || `${imagePath}/avatar/no-avatar.svg`, classes = clsx("avatar", {
+    ...{
+      "avatar-xs": size === "xs",
+      "avatar-sm": size === "sm",
+      "avatar-md": size === "md",
+      "avatar-lg": size === "lg",
+      "avatar-xl": size === "xl"
+    },
+    ...{
+      square: variant === "square",
+      rounded: variant === "rounded",
+      "rounded-circle": variant === "circle"
+    }
+  }, className);
+  return /* @__PURE__ */ jsx("div", { ref, className: classes, children: /* @__PURE__ */ jsx(Image, { src: src || placeholder, alt, imgPlaceholder: placeholder, ...restProps }) });
+});
+export {
+  Avatar as default
+};

package/dist/ui/src/components/Badge/Badge.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+const Badge = /* @__PURE__ */ forwardRef(({
+  className,
+  variant = {
+    type: "notification",
+    level: "danger",
+    color: "background"
+  },
+  visibility,
+  rounded,
+  children,
+  ...restProps
+}, ref) => {
+  function getRadiusClass() {
+    if (!rounded) {
+      if (visibility === "always" && !children)
+        return "rounded-circle";
+      if (variant.type === "notification")
+        return "rounded-pill";
+      if (variant.type === "link")
+        return "rounded-2";
+    }
+  }
+  const classes = clsx("badge", getRadiusClass(), visibility === "always" && "position-absolute translate-middle p-8 d-inline", variant.type === "notification" && (!variant.color || variant.color === "background") && `bg-${variant.level} text-light`, variant.type === "notification" && variant.color === "text" && `text-${variant.level} bg-gray-200 border border-gray-400`, variant.type === "profile" && `badge-profile-${variant.profile}`, variant.type === "link" && "border border-secondary", className);
+  return /* @__PURE__ */ jsx("span", { ref, className: classes, ...restProps, children: variant.type === "link" ? /* @__PURE__ */ jsx("div", { className: "d-flex fw-800 align-items-center", children }) : children });
+}), Badge$1 = Badge;
+export {
+  Badge$1 as default
+};

package/dist/ui/src/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useTranslation } from "react-i18next";
+import { RafterRight as SvgRafterRight$1 } from "../../../../icons/dist/index.js";
+import Heading from "../Heading/Heading.js";
+import BreadcrumbItem from "./BreadcrumbItem.js";
+import BreadcrumbList from "./BreadcrumbList.js";
+import BreadcrumbNav from "./BreadcrumbNav.js";
+import { AppIcon } from "../AppIcon/AppIcon.js";
+const Breadcrumb = /* @__PURE__ */ forwardRef(({
+  app,
+  name
+}, ref) => {
+  const {
+    t
+  } = useTranslation();
+  return /* @__PURE__ */ jsx(BreadcrumbNav, { app, ref, className: "mw-100", children: /* @__PURE__ */ jsx(BreadcrumbList, { className: "gap-12 mw-100", children: name ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx("a", { href: app == null ? void 0 : app.address, className: "d-flex", "aria-label": t(app == null ? void 0 : app.displayName), children: /* @__PURE__ */ jsx(AppIcon, { app, size: "40" }) }) }),
+    /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(SvgRafterRight$1, { color: "var(--edifice-gray-600)", width: 20, height: 20 }) }),
+    /* @__PURE__ */ jsx(BreadcrumbItem, { className: "text-truncate", children: /* @__PURE__ */ jsx(Heading, { level: "h1", headingStyle: "h3", className: "text-truncate", children: name }) })
+  ] }) : /* @__PURE__ */ jsxs(BreadcrumbItem, { className: "gap-12 d-flex align-items-center", children: [
+    /* @__PURE__ */ jsx("a", { href: app == null ? void 0 : app.address, className: "d-flex", "aria-label": t(app == null ? void 0 : app.displayName), children: /* @__PURE__ */ jsx(AppIcon, { app, size: "40" }) }),
+    /* @__PURE__ */ jsx(Heading, { level: "h1", headingStyle: "h3", className: "d-none d-md-flex", children: t(app == null ? void 0 : app.displayName) })
+  ] }) }) });
+});
+export {
+  Breadcrumb
+};

package/dist/ui/src/components/Breadcrumb/BreadcrumbItem.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+const BreadcrumbItem = /* @__PURE__ */ forwardRef(({
+  children,
+  className,
+  ...restProps
+}, forwardRef2) => {
+  const classes = clsx("breadcrumb-item", className);
+  return /* @__PURE__ */ jsx("li", { ref: forwardRef2, className: classes, ...restProps, children });
+});
+export {
+  BreadcrumbItem as default
+};

package/dist/ui/src/components/Breadcrumb/BreadcrumbList.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+const BreadcrumbList = /* @__PURE__ */ forwardRef(({
+  children,
+  className
+}, ref) => {
+  const classes = clsx("breadcrumb d-flex flex-nowrap align-items-center mb-0", className);
+  return /* @__PURE__ */ jsx("ol", { ref, className: classes, children });
+});
+export {
+  BreadcrumbList as default
+};