@edifice.io/react 2.0.0-develop-rc.13 → 2.0.0-develop-rc.15

package/dist/modules/audience/ReactionModal.js

@@ -0,0 +1,72 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ReactionTypes } from "@edifice.io/ts-client";
+import { StringUtils } from "@edifice.io/utilities";
+import { useState, useId, useCallback, useMemo, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+import useReactionIcons from "./hooks/useReactionIcons.js";
+import { ReactionModalCard } from "./ReactionModal.Card.js";
+import Modal from "../../components/Modal/Modal.js";
+import { Tabs } from "../../components/Tabs/components/Tabs.js";
+import Button from "../../components/Button/Button.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: 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;
+export {
+  ReactionModal as default
+};

package/dist/modules/audience/ReactionSummary.d.ts

@@ -0,0 +1,10 @@
+import { ReactionSummaryData } from '@edifice.io/ts-client';
+export interface ReactionSummaryProps {
+    summary?: ReactionSummaryData;
+    onClick?: () => void;
+}
+declare const ReactionSummary: {
+    ({ summary, onClick, }: ReactionSummaryProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ReactionSummary;

package/dist/modules/audience/ReactionSummary.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { StringUtils } from "@edifice.io/utilities";
+import useReactionIcons from "./hooks/useReactionIcons.js";
+import Button from "../../components/Button/Button.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))
+  ] }) });
+};
+export {
+  ReactionSummary as default
+};

package/dist/modules/audience/ViewsByProfileCard.d.ts

@@ -0,0 +1,9 @@
+import { ViewsDetailsProfile } from '@edifice.io/ts-client';
+export interface ViewsCardProps {
+    viewsByProfile: ViewsDetailsProfile;
+}
+declare const ViewsByProfileCard: {
+    ({ viewsByProfile }: ViewsCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ViewsByProfileCard;

package/dist/modules/audience/ViewsByProfileCard.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { StringUtils } from "@edifice.io/utilities";
+import { useTranslation } from "react-i18next";
+import SvgIconUsers from "../icons/components/IconUsers.js";
+import SvgIconGuest from "../icons/components/audience/IconGuest.js";
+import SvgIconParent from "../icons/components/audience/IconParent.js";
+import SvgIconPersonnel from "../icons/components/audience/IconPersonnel.js";
+import SvgIconStudent from "../icons/components/audience/IconStudent.js";
+import SvgIconTeacher from "../icons/components/audience/IconTeacher.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(SvgIconStudent, {});
+      case "relative":
+        return /* @__PURE__ */ jsx(SvgIconParent, {});
+      case "teacher":
+        return /* @__PURE__ */ jsx(SvgIconTeacher, {});
+      case "personnel":
+        return /* @__PURE__ */ jsx(SvgIconPersonnel, {});
+      case "guest":
+        return /* @__PURE__ */ jsx(SvgIconGuest, {});
+      default:
+        return /* @__PURE__ */ jsx(SvgIconUsers, {});
+    }
+  }
+  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/modules/audience/ViewsCounter.d.ts

@@ -0,0 +1,10 @@
+export interface ViewsCounterProps {
+    viewsCounter: number;
+    onClick?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+    className?: string;
+}
+declare const ViewsCounter: {
+    ({ viewsCounter, onClick, className, }: ViewsCounterProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ViewsCounter;

package/dist/modules/audience/ViewsCounter.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { StringUtils } from "@edifice.io/utilities";
+import clsx from "clsx";
+import SvgIconSee from "../icons/components/IconSee.js";
+import Button from "../../components/Button/Button.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(SvgIconSee, {}), variant: "ghost", type: "button", className, onClick: handleButtonClick, disabled: !viewsCounter, children: StringUtils.toCounter(viewsCounter) });
+};
+export {
+  ViewsCounter as default
+};

package/dist/modules/audience/ViewsModal.d.ts

@@ -0,0 +1,11 @@
+import { ViewsDetails } from '@edifice.io/ts-client';
+export interface ViewsModalProps {
+    viewsDetails: ViewsDetails;
+    isOpen: boolean;
+    onModalClose: () => void;
+}
+declare const ViewsModal: {
+    ({ viewsDetails, isOpen, onModalClose, }: ViewsModalProps): import('react').ReactPortal;
+    displayName: string;
+};
+export default ViewsModal;

package/dist/modules/audience/ViewsModal.js

@@ -0,0 +1,41 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { StringUtils } from "@edifice.io/utilities";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+import SvgIconSee from "../icons/components/IconSee.js";
+import SvgIconUsers from "../icons/components/IconUsers.js";
+import ViewsByProfileCard from "./ViewsByProfileCard.js";
+import Modal from "../../components/Modal/Modal.js";
+import Button from "../../components/Button/Button.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(SvgIconSee, {}) }),
+        /* @__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(SvgIconUsers, {}) }),
+        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"));
+};
+export {
+  ViewsModal as default
+};

package/dist/modules/audience/hooks/useReactionIcons.d.ts

@@ -0,0 +1,5 @@
+import { ReactionType } from '@edifice.io/ts-client';
+export default function useReactionIcons(): {
+    getReactionIcon: (reactionType?: ReactionType | null, asCounter?: boolean) => import("react/jsx-runtime").JSX.Element;
+    getReactionLabel: (reactionType?: ReactionType | null) => "audience.reaction.thanks" | "audience.reaction.great" | "audience.reaction.congrats" | "audience.reaction.interesting" | "audience.reaction.default";
+};

package/dist/modules/audience/hooks/useReactionIcons.js

@@ -0,0 +1,45 @@
+import { jsx } from "react/jsx-runtime";
+import SvgIconReaction from "../../icons/components/IconReaction.js";
+import SvgIconCongratsCounter from "../../icons/components/audience/IconCongratsCounter.js";
+import SvgIconCongrats from "../../icons/components/audience/IconCongrats.js";
+import SvgIconGreatCounter from "../../icons/components/audience/IconGreatCounter.js";
+import SvgIconGreat from "../../icons/components/audience/IconGreat.js";
+import SvgIconInterestingCounter from "../../icons/components/audience/IconInterestingCounter.js";
+import SvgIconInteresting from "../../icons/components/audience/IconInteresting.js";
+import SvgIconThanksCounter from "../../icons/components/audience/IconThanksCounter.js";
+import SvgIconThanks from "../../icons/components/audience/IconThanks.js";
+function useReactionIcons() {
+  return {
+    getReactionIcon: (reactionType, asCounter) => {
+      switch (reactionType) {
+        case "REACTION_1":
+          return asCounter ? /* @__PURE__ */ jsx(SvgIconThanksCounter, {}) : /* @__PURE__ */ jsx(SvgIconThanks, {});
+        case "REACTION_2":
+          return asCounter ? /* @__PURE__ */ jsx(SvgIconGreatCounter, {}) : /* @__PURE__ */ jsx(SvgIconGreat, {});
+        case "REACTION_3":
+          return asCounter ? /* @__PURE__ */ jsx(SvgIconCongratsCounter, {}) : /* @__PURE__ */ jsx(SvgIconCongrats, {});
+        case "REACTION_4":
+          return asCounter ? /* @__PURE__ */ jsx(SvgIconInterestingCounter, {}) : /* @__PURE__ */ jsx(SvgIconInteresting, {});
+        default:
+          return /* @__PURE__ */ jsx(SvgIconReaction, {});
+      }
+    },
+    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/modules/audience/hooks/useReactions.d.ts

@@ -0,0 +1,15 @@
+import { ReactionType } from '@edifice.io/ts-client';
+/**
+ * This hook implements some logic and provides functions to easily call "audience" backend endpoints.
+ * @param module application code, e.g. "blog"
+ * @param resourceType type of resource, e.g. "post"
+ * @returns functions to easily call "audience" backend endpoints
+ */
+export default function useReactions(module: string, resourceType: string): {
+    availableReactions: ("REACTION_1" | "REACTION_2" | "REACTION_3" | "REACTION_4")[];
+    loadReactionDetails: (resourceId: string, page: number, size?: number) => Promise<import('@edifice.io/ts-client').ReactionDetailsData | undefined>;
+    loadReactionSummaries: (resourceIds: string[]) => Promise<{
+        [resourceId: string]: import('@edifice.io/ts-client').ReactionSummaryData | undefined;
+    }>;
+    applyReaction: (resourceId: string, newReaction: ReactionType, oldReaction: ReactionType | null) => Promise<"-" | "+" | "=">;
+};

package/dist/modules/audience/hooks/useReactions.js

@@ -0,0 +1,35 @@
+import { odeServices, ERROR_CODE } from "@edifice.io/ts-client";
+import { useRef, useState, useCallback, useEffect } from "react";
+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/modules/audience/hooks/useViews.d.ts

@@ -0,0 +1,11 @@
+/**
+ * This hook provides functions to easily call "audience" backend endpoints.
+ * @param module application code, e.g. "blog"
+ * @param resourceType type of resource, e.g. "post"
+ * @returns functions to easily call "audience" backend endpoints.
+ */
+export default function useViews(module: string, resourceType: string): {
+    getViewsCounter: (resourceIds: string[]) => Promise<import('@edifice.io/ts-client').ViewsCounters>;
+    getViewsDetail: (resourceId: string) => Promise<import('@edifice.io/ts-client').ViewsDetails | undefined>;
+    triggerView: (resourceId: string) => Promise<void>;
+};

package/dist/modules/comments/components/BadgeProfile.d.ts

@@ -0,0 +1,4 @@
+import { UserProfile } from '@edifice.io/ts-client';
+export declare const BadgeProfile: ({ profile }: {
+    profile: UserProfile[number];
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/modules/comments/components/BadgeProfile.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import Badge from "../../../components/Badge/Badge.js";
+const BadgeProfile = ({
+  profile
+}) => {
+  const {
+    t
+  } = useTranslation();
+  return /* @__PURE__ */ jsx(Badge, { variant: {
+    type: "user",
+    profile,
+    background: !0
+  }, children: ((profile2) => t(`${profile2}`))(profile) });
+};
+export {
+  BadgeProfile
+};

package/dist/modules/comments/components/Comment.d.ts

@@ -0,0 +1,7 @@
+import { UserProfile } from '@edifice.io/ts-client';
+import { CommentProps } from '../types';
+export declare const Comment: ({ comment, userId, profile, }: {
+    comment: CommentProps;
+    userId: string;
+    profile: UserProfile[number];
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/modules/comments/components/Comment.js

@@ -0,0 +1,72 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import SvgIconSave from "../../icons/components/IconSave.js";
+import { useAutosizeTextarea } from "../hooks/useAutosizeTextarea.js";
+import { useCommentsContext } from "../hooks/useCommentsContext.js";
+import { BadgeProfile } from "./BadgeProfile.js";
+import { CommentAvatar } from "./CommentAvatar.js";
+import { CommentDate } from "./CommentDate.js";
+import { CommentTitle } from "./CommentTitle.js";
+import { TextCounter } from "./TextCounter.js";
+import Button from "../../../components/Button/Button.js";
+const Comment = ({
+  comment,
+  userId,
+  profile
+}) => {
+  const [value, setValue] = useState(""), {
+    id,
+    authorId,
+    authorName,
+    createdAt,
+    updatedAt,
+    comment: content
+  } = comment, [ref, onFocus, resizeTextarea] = useAutosizeTextarea(!0), {
+    t
+  } = useTranslation(), {
+    editCommentId,
+    options,
+    type,
+    handleDeleteComment: onDeleteComment,
+    handleModifyComment,
+    handleReset,
+    handleUpdateComment
+  } = useCommentsContext(), isEditing = editCommentId === comment.id, handleChangeContent = (event) => {
+    resizeTextarea(), setValue(event.target.value);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `${isEditing ? "border rounded-3 p-12 pb-8 d-flex gap-12 bg-gray-200  my-16" : "border rounded-3 p-12 pb-8 d-flex gap-12 mt-16"}`, children: [
+    /* @__PURE__ */ jsx(CommentAvatar, { id: authorId }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-fill", children: [
+      /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center gap-12", children: [
+        /* @__PURE__ */ jsx(CommentTitle, { children: authorName }),
+        /* @__PURE__ */ jsx(BadgeProfile, { profile }),
+        /* @__PURE__ */ jsx(CommentDate, { createdAt, updatedAt })
+      ] }),
+      isEditing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "mt-8 mb-4", children: /* @__PURE__ */ jsx("textarea", { id: "update-comment", ref, value, className: "form-control", placeholder: t("comment.placeholder"), maxLength: options.maxCommentLength, onChange: handleChangeContent, rows: 1, style: {
+          resize: "none",
+          overflow: "hidden"
+        }, onFocus }) }),
+        /* @__PURE__ */ jsxs("div", { className: "d-flex justify-content-between align-items-center", children: [
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", size: "sm", onClick: handleReset, children: t("comment.cancel") }),
+          /* @__PURE__ */ jsxs("div", { className: "d-flex justify-content-end align-items-center gap-4", children: [
+            /* @__PURE__ */ jsx(TextCounter, { content: value, maxLength: options.maxCommentLength }),
+            /* @__PURE__ */ jsx(Button, { type: "submit", variant: "ghost", size: "sm", leftIcon: /* @__PURE__ */ jsx(SvgIconSave, {}), disabled: !(content != null && content.length), onClick: () => handleUpdateComment(value), children: t("comment.save") })
+          ] })
+        ] })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "mt-8 mb-4", children: content }),
+        userId === authorId && type === "edit" && /* @__PURE__ */ jsxs("div", { className: "ms-n8", children: [
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", size: "sm", onClick: () => {
+            handleModifyComment(comment.id), setValue(content);
+          }, children: t("comment.edit") }),
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", size: "sm", onClick: () => onDeleteComment(id), children: t("comment.remove") })
+        ] })
+      ] })
+    ] })
+  ] }, id);
+};
+export {
+  Comment
+};

package/dist/modules/comments/components/CommentAvatar.d.ts

@@ -0,0 +1,3 @@
+export declare const CommentAvatar: ({ id }: {
+    id: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/modules/comments/components/CommentAvatar.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import Avatar from "../../../components/Avatar/Avatar.js";
+import useDirectory from "../../../hooks/useDirectory/useDirectory.js";
+const CommentAvatar = ({
+  id
+}) => {
+  const {
+    getAvatarURL
+  } = useDirectory(), {
+    t
+  } = useTranslation();
+  return /* @__PURE__ */ jsx(Avatar, { alt: t("comment.author.avatar"), size: "sm", src: getAvatarURL(id, "user"), variant: "circle" });
+};
+export {
+  CommentAvatar
+};

package/dist/modules/comments/components/CommentDate.d.ts

@@ -0,0 +1,4 @@
+export declare const CommentDate: ({ createdAt, updatedAt, }: {
+    createdAt: number;
+    updatedAt: number | undefined;
+}) => import("react/jsx-runtime").JSX.Element | null;

package/dist/modules/comments/components/CommentDate.js

@@ -0,0 +1,27 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import useDate from "../../../hooks/useDate/useDate.js";
+const CommentDate = ({
+  createdAt,
+  updatedAt
+}) => {
+  const {
+    fromNow
+  } = useDate(), {
+    t
+  } = useTranslation(), getPublishedDate = (date) => t("comment.publish.date", {
+    date: fromNow(date)
+  }), getUpdatedDate = (date) => t("comment.update.date", {
+    date: fromNow(date)
+  });
+  return updatedAt ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "small text-gray-700", children: "|" }),
+    /* @__PURE__ */ jsx("span", { className: "small text-gray-700", children: getUpdatedDate(updatedAt) })
+  ] }) : createdAt ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "small text-gray-700", children: "|" }),
+    /* @__PURE__ */ jsx("span", { className: "small text-gray-700", children: getPublishedDate(createdAt) })
+  ] }) : null;
+};
+export {
+  CommentDate
+};

package/dist/modules/comments/components/CommentForm.d.ts

@@ -0,0 +1,3 @@
+export declare const CommentForm: ({ userId }: {
+    userId: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/modules/comments/components/CommentForm.js

@@ -0,0 +1,37 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import SvgIconSend from "../../icons/components/IconSend.js";
+import { useAutosizeTextarea } from "../hooks/useAutosizeTextarea.js";
+import { useCommentsContext } from "../hooks/useCommentsContext.js";
+import { CommentAvatar } from "./CommentAvatar.js";
+import { TextCounter } from "./TextCounter.js";
+import Button from "../../../components/Button/Button.js";
+const CommentForm = ({
+  userId
+}) => {
+  const {
+    t
+  } = useTranslation(), {
+    content,
+    handleChangeContent,
+    handleCreateComment,
+    options,
+    type
+  } = useCommentsContext(), [ref, onFocus] = useAutosizeTextarea();
+  return /* @__PURE__ */ jsx(Fragment, { children: type === "edit" && /* @__PURE__ */ jsxs("div", { className: "border rounded-3 p-12 pb-8 d-flex gap-12 bg-gray-200", children: [
+    /* @__PURE__ */ jsx(CommentAvatar, { id: userId }),
+    /* @__PURE__ */ jsxs("div", { className: "d-flex flex-column flex-fill gap-4", children: [
+      /* @__PURE__ */ jsx("textarea", { id: "add-comment", ref, value: content, className: "form-control", placeholder: t("comment.placeholder.textarea"), maxLength: options.maxCommentLength, onChange: handleChangeContent, onFocus, rows: 1, style: {
+        resize: "none",
+        overflow: "hidden"
+      } }),
+      /* @__PURE__ */ jsxs("div", { className: "d-flex justify-content-end align-items-center gap-4", children: [
+        /* @__PURE__ */ jsx(TextCounter, { content, maxLength: options.maxCommentLength }),
+        /* @__PURE__ */ jsx(Button, { type: "submit", variant: "ghost", size: "sm", leftIcon: /* @__PURE__ */ jsx(SvgIconSend, {}), disabled: !(content != null && content.length), onClick: () => handleCreateComment(content), children: t("comment.post") })
+      ] })
+    ] })
+  ] }) });
+};
+export {
+  CommentForm
+};

package/dist/modules/comments/components/CommentHeader.d.ts

@@ -0,0 +1,3 @@
+export declare const CommentHeader: ({ title }: {
+    title: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/modules/comments/components/CommentHeader.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import Heading from "../../../components/Heading/Heading.js";
+const CommentHeader = ({
+  title
+}) => /* @__PURE__ */ jsx(Heading, { level: "h3", headingStyle: "h3", children: title });
+export {
+  CommentHeader
+};

package/dist/modules/comments/components/CommentList.d.ts

@@ -0,0 +1 @@
+export declare function CommentList(): import("react/jsx-runtime").JSX.Element[] | undefined;

package/dist/modules/comments/components/CommentList.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { useEdificeClient } from "../../../providers/EdificeClientProvider/EdificeClientProvider.hook.js";
+import { useCommentsContext } from "../hooks/useCommentsContext.js";
+import { Comment } from "./Comment.js";
+function CommentList() {
+  const {
+    user
+  } = useEdificeClient(), {
+    comments,
+    profiles
+  } = useCommentsContext();
+  return comments == null ? void 0 : comments.map((comment) => {
+    var _a;
+    const {
+      authorId
+    } = comment, profile = ((_a = profiles == null ? void 0 : profiles.find((user2) => (user2 == null ? void 0 : user2.userId) === authorId)) == null ? void 0 : _a.profile) ?? "Guest";
+    return /* @__PURE__ */ jsx(Comment, { comment, profile, userId: user == null ? void 0 : user.userId }, comment.id);
+  });
+}
+export {
+  CommentList
+};

package/dist/modules/comments/components/CommentTitle.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export declare const CommentTitle: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/modules/comments/components/CommentTitle.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+const CommentTitle = ({
+  children
+}) => /* @__PURE__ */ jsx("span", { className: "small text-gray-800", children });
+export {
+  CommentTitle
+};

package/dist/modules/comments/components/TextCounter.d.ts

@@ -0,0 +1,4 @@
+export declare const TextCounter: ({ content, maxLength, }: {
+    content: string;
+    maxLength: number;
+}) => import("react/jsx-runtime").JSX.Element;