tycho-components 0.40.9 → 0.41.1

package/dist/configs/api/applyAuthErrorHandling.js

@@ -3,9 +3,8 @@ import CookieStorage from '../CookieStorage';
 import { resolveAccessDeniedMessage } from './resolveAccessDeniedMessage';
 import { logged, message } from '../store/actions';
 import { getCommonDispatch } from '../store/commonDispatchBridge';
-const isStorybook = () => typeof window !== 'undefined' &&
-    (window.location.port === '6006' ||
-        window.__STORYBOOK__);
+import StorybookUtils from '../../functions/StorybookUtils';
+const { isStorybook } = StorybookUtils;
 function defaultRedirectUrls() {
     const publicUrl = import.meta.env.VITE_APP_PUBLIC_URL;
     return {

package/dist/configs/localization/CommentsTexts.d.ts

@@ -8,6 +8,7 @@ export declare const CommentsTexts: {
         "label.button.update": string;
         "label.requested.to": string;
         "label.posted.on": string;
+        "label.on": string;
         "placeholder.comments.empty": string;
         "tooltip.edit": string;
         "tooltip.delete": string;
@@ -29,6 +30,13 @@ export declare const CommentsTexts: {
         "notification.empty": string;
         "notification.text": string;
         "label.edited": string;
+        "tab.write": string;
+        "tab.preview": string;
+        "placeholder.preview.empty": string;
+        "menu.undock": string;
+        "menu.dock.left": string;
+        "menu.dock.bottom": string;
+        "menu.dock.right": string;
     };
     "pt-BR": {
         "label.title.comments": string;
@@ -39,6 +47,7 @@ export declare const CommentsTexts: {
         "label.button.update": string;
         "label.requested.to": string;
         "label.posted.on": string;
+        "label.on": string;
         "placeholder.comments.empty": string;
         "tooltip.edit": string;
         "tooltip.delete": string;
@@ -60,6 +69,13 @@ export declare const CommentsTexts: {
         "notification.empty": string;
         "notification.text": string;
         "label.edited": string;
+        "tab.write": string;
+        "tab.preview": string;
+        "placeholder.preview.empty": string;
+        "menu.undock": string;
+        "menu.dock.left": string;
+        "menu.dock.bottom": string;
+        "menu.dock.right": string;
     };
     it: {
         "label.title.comments": string;
@@ -70,6 +86,7 @@ export declare const CommentsTexts: {
         "label.button.update": string;
         "label.requested.to": string;
         "label.posted.on": string;
+        "label.on": string;
         "placeholder.comments.empty": string;
         "tooltip.edit": string;
         "tooltip.delete": string;
@@ -91,5 +108,12 @@ export declare const CommentsTexts: {
         "notification.empty": string;
         "notification.text": string;
         "label.edited": string;
+        "tab.write": string;
+        "tab.preview": string;
+        "placeholder.preview.empty": string;
+        "menu.undock": string;
+        "menu.dock.left": string;
+        "menu.dock.bottom": string;
+        "menu.dock.right": string;
     };
 };

package/dist/configs/localization/CommentsTexts.js

@@ -8,6 +8,7 @@ export const CommentsTexts = {
         "label.button.update": "Update comment",
         "label.requested.to": "Sent to:",
         "label.posted.on": "Posted on:",
+        "label.on": "on",
         "placeholder.comments.empty": "No comments available.",
         "tooltip.edit": "Edit comment",
         "tooltip.delete": "Remove comment",
@@ -29,6 +30,13 @@ export const CommentsTexts = {
         "notification.empty": "No more notifications",
         "notification.text": "{{user}} added a new comment.",
         "label.edited": "edited",
+        "tab.write": "Write",
+        "tab.preview": "Preview",
+        "placeholder.preview.empty": "Nothing to preview",
+        "menu.undock": "Undock into separate window",
+        "menu.dock.left": "Dock to left",
+        "menu.dock.bottom": "Dock to bottom",
+        "menu.dock.right": "Dock to right",
     },
     "pt-BR": {
         "label.title.comments": "Comentários",
@@ -39,6 +47,7 @@ export const CommentsTexts = {
         "label.button.update": "Atualizar comentário",
         "label.requested.to": "Enviado para:",
         "label.posted.on": "Postado em:",
+        "label.on": "em",
         "placeholder.comments.empty": "Nenhum comentário disponível.",
         "tooltip.edit": "Editar comentário",
         "tooltip.delete": "Remover comentário",
@@ -60,6 +69,13 @@ export const CommentsTexts = {
         "notification.empty": "Não há notificações",
         "notification.text": "{{user}} adicionou um novo comentário.",
         "label.edited": "editado",
+        "tab.write": "Escrever",
+        "tab.preview": "Visualizar",
+        "placeholder.preview.empty": "Nada para visualizar",
+        "menu.undock": "Desencaixar em janela separada",
+        "menu.dock.left": "Encaixar à esquerda",
+        "menu.dock.bottom": "Encaixar embaixo",
+        "menu.dock.right": "Encaixar à direita",
     },
     it: {
         "label.title.comments": "Commenti",
@@ -70,6 +86,7 @@ export const CommentsTexts = {
         "label.button.update": "Aggiorna commento",
         "label.requested.to": "Inviato a:",
         "label.posted.on": "Pubblicato il:",
+        "label.on": "il",
         "placeholder.comments.empty": "Nessun commento disponibile.",
         "tooltip.edit": "Modifica commento",
         "tooltip.delete": "Rimuovi commento",
@@ -91,5 +108,12 @@ export const CommentsTexts = {
         "notification.empty": "Nessun'altra notifica",
         "notification.text": "{{user}} ha aggiunto un commento all'inserimento {{entry}}.",
         "label.edited": "modificato",
+        "tab.write": "Scrivi",
+        "tab.preview": "Anteprima",
+        "placeholder.preview.empty": "Niente da visualizzare",
+        "menu.undock": "Sgancia in una finestra separata",
+        "menu.dock.left": "Aggancia a sinistra",
+        "menu.dock.bottom": "Aggancia in basso",
+        "menu.dock.right": "Aggancia a destra",
     },
 };

package/dist/features/Comments/{CommentAdd.d.ts → CommentAdd/CommentAdd.d.ts}

@@ -1,9 +1,11 @@
-import { User } from "../../configs/types/User";
-import "./style.scss";
-import { Comment } from "./types/Comment";
+import '@uiw/react-markdown-preview/markdown.css';
+import '@uiw/react-md-editor/markdown-editor.css';
+import { User } from '../../../configs/types/User';
+import { Comment } from '../types/Comment';
+import './style.scss';
 type Props = {
     uid: string;
-    mode: "lexicon" | "corpus" | "parser";
+    mode: 'lexicon' | 'corpus' | 'parser';
     users: User[];
     references: Record<string, string | number | boolean>;
     keywords?: Record<string, string | number | boolean>;

package/dist/features/Comments/CommentAdd/CommentAdd.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { yupResolver } from '@hookform/resolvers/yup';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import '@uiw/react-markdown-preview/markdown.css';
+import MDEditor from '@uiw/react-md-editor';
+import '@uiw/react-md-editor/markdown-editor.css';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { Button, IconButton, SelectField } from 'tycho-storybook';
+import * as yup from 'yup';
+import { useMessageUtils } from '../../../configs/useMessageUtils';
+import FormUtils from '../../../functions/FormUtils';
+import CommentService from '../CommentService';
+import { EMPTY_COMMENT_REQUEST, } from '../types/Comment';
+import './style.scss';
+const EMPTY_COMMENT_ADD_FORM = {
+    ...EMPTY_COMMENT_REQUEST,
+    requested: [],
+    userPicker: '',
+};
+export default function CommentAdd({ uid, mode, users, references, keywords, comment, reply, onClose, onChange, }) {
+    const { t } = useTranslation('comments');
+    const { isLoading, dispatchLoading } = useMessageUtils();
+    const [activeTab, setActiveTab] = useState('write');
+    const getFormDefaultValues = () => {
+        if (comment)
+            return {
+                ...EMPTY_COMMENT_ADD_FORM,
+                value: comment.value,
+                requested: comment.requested?.map((r) => r.uid) ?? [],
+            };
+        if (reply) {
+            return {
+                ...EMPTY_COMMENT_ADD_FORM,
+                reply: reply.id,
+                requested: [reply.user],
+            };
+        }
+        return EMPTY_COMMENT_ADD_FORM;
+    };
+    const createdForm = useForm({
+        resolver: yupResolver(getFormSchema(t)),
+        mode: 'onChange',
+        defaultValues: getFormDefaultValues(),
+    });
+    const value = createdForm.watch('value') ?? '';
+    const requested = createdForm.watch('requested') ?? [];
+    const toCommentRequest = (form) => {
+        const { userPicker: _userPicker, ...request } = form;
+        return request;
+    };
+    const handleAdd = () => {
+        if (isLoading())
+            return;
+        dispatchLoading(true);
+        CommentService.add(uid, mode, toCommentRequest(createdForm.getValues()), references, keywords).then((r) => {
+            dispatchLoading(false);
+            onClose();
+            onChange(r.data);
+            createdForm.reset(EMPTY_COMMENT_ADD_FORM);
+        });
+    };
+    const handleUpdate = () => {
+        if (!comment)
+            return;
+        CommentService.update(comment.id, toCommentRequest(createdForm.getValues())).then((r) => {
+            onClose();
+            onChange(r.data);
+            createdForm.reset(EMPTY_COMMENT_ADD_FORM);
+        });
+    };
+    const handleUserPick = (_attr, nextValue) => {
+        if (!nextValue)
+            return;
+        const current = createdForm.getValues('requested') ?? [];
+        if (!current.includes(nextValue)) {
+            createdForm.setValue('requested', [...current, nextValue], {
+                shouldDirty: true,
+            });
+        }
+        createdForm.setValue('userPicker', '');
+    };
+    const handleRemoveUser = (uidToRemove) => {
+        const current = createdForm.getValues('requested') ?? [];
+        createdForm.setValue('requested', current.filter((id) => id !== uidToRemove), { shouldDirty: true });
+    };
+    const availableUsers = users.filter((user) => !requested.includes(user.uid));
+    return (_jsxs("div", { className: "comment-add-container", children: [_jsx("div", { className: "form-tabs", children: _jsxs(Tabs, { value: activeTab, onChange: (_, next) => setActiveTab(next), children: [_jsx(Tab, { label: t('tab.write'), value: "write" }), _jsx(Tab, { label: t('tab.preview'), value: "preview" })] }) }), activeTab === 'write' ? (_jsx("div", { className: "form-editor", "data-color-mode": "light", children: _jsx(MDEditor, { height: 220, value: value, preview: "edit", onChange: (next) => createdForm.setValue('value', next || '', {
+                        shouldValidate: true,
+                        shouldDirty: true,
+                    }), textareaProps: {
+                        placeholder: t('placeholder.comment.text'),
+                    } }) })) : (_jsx("div", { className: "form-preview", "data-color-mode": "light", children: value.trim() ? (_jsx(MDEditor.Markdown, { source: value })) : (_jsx("span", { className: "preview-empty", children: t('placeholder.preview.empty') })) })), _jsxs("div", { className: "form-footer", children: [_jsx(SelectField, { label: reply ? t('input.user.reply') : t('input.user'), attr: "userPicker", createdForm: createdForm, placeholder: t('common:generic.placeholder.select'), options: FormUtils.convertList(availableUsers, 'name', 'uid'), showEndAdornment: false, onChange: handleUserPick }), requested.length > 0 && (_jsx("div", { className: "selected-users", children: requested.map((userUid) => {
+                            const user = users.find((u) => u.uid === userUid);
+                            return (_jsxs("div", { className: "selected-user", children: [_jsx("span", { className: "name", children: user?.name || userUid }), _jsx(IconButton, { name: "close", size: "x-small", mode: "ghost", onClick: () => handleRemoveUser(userUid) })] }, userUid));
+                        }) })), _jsxs("div", { className: "buttons", children: [_jsx(Button, { onClick: onClose, text: t('button.discard'), color: "danger", size: "small" }), _jsx(Button, { onClick: comment ? handleUpdate : handleAdd, text: comment ? t('label.button.update') : t('label.button.add'), disabled: !createdForm.formState.isValid, size: "small" })] })] })] }));
+}
+const getFormSchema = (t) => yup.object().shape({
+    id: yup.string().optional(),
+    value: yup.string().required(t('common:validation.required')),
+    requested: yup.array().of(yup.string().defined()).optional(),
+    coordinates: yup.array().of(yup.string().defined()).optional(),
+    userPicker: yup.string().optional(),
+    reply: yup.string().optional(),
+});

package/dist/features/Comments/CommentAdd/index.d.ts

@@ -0,0 +1,2 @@
+import CommentAdd from './CommentAdd';
+export default CommentAdd;

package/dist/features/Comments/CommentAdd/index.js

@@ -0,0 +1,2 @@
+import CommentAdd from './CommentAdd';
+export default CommentAdd;

package/dist/features/Comments/CommentAdd/style.scss

@@ -0,0 +1,124 @@
+.comment-add-container {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: var(--spacing-200);
+  border: 1px solid var(--border-subtle-1);
+  border-radius: var(--radius-200);
+  overflow: hidden;
+  background-color: var(--background-default);
+  margin-top: 16px;
+
+  .form-tabs {
+    padding: 0 var(--spacing-150);
+    background-color: var(--layer-hover-2);
+    border-bottom: 1px solid var(--border-subtle-1);
+
+    .MuiTabs-root {
+      min-height: unset;
+    }
+
+    .MuiTabs-indicator {
+      background-color: var(--border-hover);
+    }
+
+    .MuiTab-root {
+      @include label-medium-1;
+      min-height: unset;
+      min-width: unset;
+      padding: var(--spacing-100) var(--spacing-150);
+      text-transform: none;
+      color: var(--text-secondary);
+
+      &.Mui-selected {
+        color: var(--text-primary);
+      }
+    }
+  }
+
+  .form-editor {
+    .w-md-editor {
+      border: none;
+      border-radius: 0;
+      box-shadow: none;
+
+      .w-md-editor-toolbar {
+        border-bottom: 1px solid var(--border-subtle-1);
+        background-color: var(--background-default);
+        padding: var(--spacing-050) var(--spacing-100);
+
+        li button {
+          padding: 0 var(--spacing-050);
+
+          > svg {
+            width: 16px;
+            height: 16px;
+          }
+        }
+      }
+
+      .w-md-editor-content {
+        background-color: var(--background-default);
+      }
+    }
+  }
+
+  .form-preview {
+    min-height: 220px;
+    padding: var(--spacing-150);
+    background-color: var(--background-default);
+
+    .preview-empty {
+      @include helper-small-1;
+      color: var(--text-tertiary);
+    }
+
+    .wmde-markdown {
+      background: transparent;
+    }
+  }
+
+  .form-footer {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-100);
+    padding: var(--spacing-150);
+    border-top: 1px solid var(--border-subtle-1);
+    background-color: var(--background-default);
+
+    > .ds-select-text {
+      margin-bottom: 0;
+    }
+
+    .selected-users {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--spacing-100);
+    }
+
+    .selected-user {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--spacing-050);
+      padding: 4px 8px;
+      border: 1px solid var(--border-subtle-1);
+      border-radius: var(--radius-100);
+      background-color: var(--layer-hover-2);
+
+      .name {
+        @include label-small-1;
+        color: var(--text-primary);
+      }
+
+      .ds-icon-button.x-small {
+        width: 16px;
+        height: 16px;
+      }
+    }
+
+    > .buttons {
+      display: flex;
+      justify-content: flex-end;
+      gap: var(--spacing-100);
+    }
+  }
+}

package/dist/features/Comments/CommentInfo.d.ts

@@ -1,3 +1,4 @@
+import '@uiw/react-markdown-preview/markdown.css';
 import './style.scss';
 import { Comment } from './types/Comment';
 type Props = {

package/dist/features/Comments/CommentInfo.js

@@ -1,11 +1,13 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import MDEditor from '@uiw/react-md-editor';
+import '@uiw/react-markdown-preview/markdown.css';
 import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Avatar, IconButton } from 'tycho-storybook';
+import { Avatar, IconButton, Tag } from 'tycho-storybook';
 import CommonContext from '../../configs/CommonContext';
 import DateUtils from '../../functions/DateUtils';
-import './style.scss';
 import CommentService from './CommentService';
+import './style.scss';
 export default function CommentInfo({ comment, hasEditAccess = true, onRemove, onUpdate, onEdit, onReply, }) {
     const { t } = useTranslation('comments');
     const { state } = useContext(CommonContext);
@@ -27,5 +29,7 @@ export default function CommentInfo({ comment, hasEditAccess = true, onRemove, o
             return false;
         return !requested.read;
     };
-    return (_jsxs("div", { className: "comment", children: [_jsxs("div", { className: "top", children: [_jsx(Avatar, { title: comment.name, src: comment.picture, size: comment.reply ? 'small' : 'medium' }), _jsx("div", { className: "name", children: comment.name }), _jsxs("div", { className: "buttons", children: [hasEditAccess && !comment.reply && (_jsx(IconButton, { size: "small", onClick: onReply, title: t('tooltip.reply'), name: "reply" })), hasEditAccess && state.logged?.uid === comment.user && (_jsxs(_Fragment, { children: [_jsx(IconButton, { size: comment.reply ? 'x-small' : 'small', onClick: onEdit, title: t('tooltip.edit'), name: "edit" }), _jsx(IconButton, { size: comment.reply ? 'x-small' : 'small', onClick: handleRemove, title: t('tooltip.delete'), name: "delete" })] })), isNotRead(comment) && (_jsx(IconButton, { size: comment.reply ? 'x-small' : 'small', onClick: handleMarkRead, title: t('tooltip.read'), name: "check_circle" }))] })] }), _jsxs("div", { className: "content", children: [comment.title && _jsx("div", { className: "title", children: comment.title }), _jsx("div", { className: "text", children: comment.value }), comment.requested && (_jsxs("div", { className: "date", children: [_jsx("span", { className: "me-1", children: t('label.requested.to') }), _jsx("span", { children: comment.requested.map((e) => e.name).join(', ') })] })), _jsxs("div", { className: "date", children: [_jsx("span", { className: "me-1", children: t('label.posted.on') }), _jsx("span", { className: "me-1", children: DateUtils.formatDateTime(comment.edited ? comment.edited : comment.date, 'MM/dd/yyyy - HH:mm') }), comment.edited && _jsx("i", { children: t('label.edited') })] })] })] }));
+    const displayDate = comment.edited || comment.date;
+    const fullDateTitle = DateUtils.formatDateTime(displayDate, 'MM/dd/yyyy - HH:mm');
+    return (_jsxs("div", { className: "comment", children: [_jsxs("div", { className: "comment-header", children: [_jsx(Avatar, { title: comment.name, src: comment.picture, size: "x-small" }), _jsxs("div", { className: "meta", children: [_jsx("span", { className: "name", children: comment.name }), _jsxs("span", { className: "timestamp", title: fullDateTitle, children: [t('label.on'), ' ', DateUtils.formatDateTime(displayDate, 'MMM d')] })] }), _jsxs("div", { className: "buttons", children: [comment.edited && (_jsx(Tag, { text: t('label.edited'), color: "blue", size: "small" })), hasEditAccess && !comment.reply && (_jsx(IconButton, { size: "x-small", onClick: onReply, title: t('tooltip.reply'), name: "reply" })), hasEditAccess && state.logged?.uid === comment.user && (_jsxs(_Fragment, { children: [_jsx(IconButton, { size: "x-small", onClick: onEdit, title: t('tooltip.edit'), name: "edit" }), _jsx(IconButton, { size: "x-small", onClick: handleRemove, title: t('tooltip.delete'), name: "delete" })] })), isNotRead(comment) && (_jsx(IconButton, { size: "x-small", onClick: handleMarkRead, title: t('tooltip.read'), name: "check_circle" }))] })] }), _jsxs("div", { className: "comment-body", children: [_jsx("div", { className: "text", "data-color-mode": "light", children: _jsx(MDEditor.Markdown, { source: comment.value }) }), comment.requested && (_jsxs("div", { className: "meta-line", children: [_jsx("span", { className: "me-1", children: t('label.requested.to') }), _jsx("span", { children: comment.requested.map((e) => e.name).join(', ') })] }))] })] }));
 }

package/dist/features/Comments/CommentService.d.ts

@@ -1,13 +1,14 @@
+import { AxiosResponse } from 'axios';
 import { User } from '../../configs/types/User';
 import { Comment, CommentRequest } from './types/Comment';
-declare function findNotifications(uid: string, mode: string): Promise<import("axios").AxiosResponse<Comment[], any, {}, any>>;
-declare function findReadNotifications(uid: string, mode: string): Promise<import("axios").AxiosResponse<Comment[], any, {}, any>>;
-declare function markRead(id: string): Promise<import("axios").AxiosResponse<Comment, any, {}, any>>;
-declare function update(id: string, comment: CommentRequest): Promise<import("axios").AxiosResponse<Comment, any, {}, any>>;
-declare function remove(id: string): Promise<import("axios").AxiosResponse<Comment, any, {}, any>>;
-declare function add(uid: string, mode: string, comment: CommentRequest, references: Record<string, string | number | boolean>, keywords?: Record<string, string | number | boolean>): Promise<import("axios").AxiosResponse<Comment, any, {}, any>>;
-declare function find(uid: string, mode: string, request: Record<string, string | number | boolean>): Promise<import("axios").AxiosResponse<Comment[], any, {}, any>>;
-declare function findAvailableUsers(uid: string, mode: string): Promise<import("axios").AxiosResponse<User[], any, {}, any>>;
+declare function findNotifications(uid: string, mode: string): Promise<AxiosResponse<Comment[], any, {}, any>>;
+declare function findReadNotifications(uid: string, mode: string): Promise<AxiosResponse<Comment[], any, {}, any>>;
+declare function markRead(id: string): Promise<AxiosResponse<Comment, any, {}, any>>;
+declare function update(id: string, comment: CommentRequest): Promise<AxiosResponse<Comment, any, {}, any>>;
+declare function remove(id: string): Promise<AxiosResponse<Comment, any, {}, any>>;
+declare function add(uid: string, mode: string, comment: CommentRequest, references: Record<string, string | number | boolean>, keywords?: Record<string, string | number | boolean>): Promise<AxiosResponse<Comment, any, {}, any>>;
+declare function find(uid: string, mode: string, request: Record<string, string | number | boolean>): Promise<AxiosResponse<Comment[], any, {}, any>>;
+declare function findAvailableUsers(uid: string, mode: string): Promise<AxiosResponse<User[], any, {}, any>>;
 declare const CommentService: {
     add: typeof add;
     remove: typeof remove;

package/dist/features/Comments/CommentService.js

@@ -1,4 +1,30 @@
 import api from '../../configs/api';
+import StorybookUtils from '../../functions/StorybookUtils';
+import { mockCommentUsers, mockComments } from './CommentService.mock';
+let storybookComments = mockComments.map((c) => ({ ...c }));
+function mockResponse(data) {
+    return Promise.resolve({
+        data,
+        status: 200,
+        statusText: 'OK',
+        headers: {},
+        config: {},
+    });
+}
+function resolveRequestedUsers(uids) {
+    if (!uids)
+        return undefined;
+    return uids.map((uid) => {
+        const user = mockCommentUsers.find((u) => u.uid === uid);
+        return {
+            uid,
+            name: user?.name || uid,
+            picture: user?.picture || '',
+            email: user?.sub || '',
+            read: false,
+        };
+    });
+}
 function findNotifications(uid, mode) {
     return api.get(`${import.meta.env.VITE_APP_COMMENT_API_URL}/${mode}/notifications/${uid}`);
 }
@@ -6,15 +32,57 @@ function findReadNotifications(uid, mode) {
     return api.get(`${import.meta.env.VITE_APP_COMMENT_API_URL}/${mode}/notifications/read/${uid}`);
 }
 function markRead(id) {
+    if (StorybookUtils.isStorybook()) {
+        storybookComments = storybookComments.map((c) => c.id === id
+            ? { ...c, requested: c.requested?.map((r) => ({ ...r, read: true })) }
+            : c);
+        return mockResponse(storybookComments.find((c) => c.id === id));
+    }
     return api.put(`${import.meta.env.VITE_APP_COMMENT_API_URL}/read/${id}`);
 }
 function update(id, comment) {
+    if (StorybookUtils.isStorybook()) {
+        storybookComments = storybookComments.map((c) => {
+            if (c.id !== id)
+                return c;
+            return {
+                ...c,
+                value: comment.value ?? c.value,
+                requested: comment.requested
+                    ? resolveRequestedUsers(comment.requested)
+                    : c.requested,
+                coordinates: comment.coordinates ?? c.coordinates,
+                edited: new Date().toISOString(),
+            };
+        });
+        return mockResponse(storybookComments.find((c) => c.id === id));
+    }
     return api.patch(`${import.meta.env.VITE_APP_COMMENT_API_URL}/${id}`, { ...comment });
 }
 function remove(id) {
+    if (StorybookUtils.isStorybook()) {
+        storybookComments = storybookComments.filter((c) => c.id !== id);
+        return mockResponse(undefined);
+    }
     return api.delete(`${import.meta.env.VITE_APP_COMMENT_API_URL}/${id}`);
 }
 function add(uid, mode, comment, references, keywords) {
+    if (StorybookUtils.isStorybook()) {
+        const replyId = comment.reply;
+        const newComment = {
+            id: `mock-comment-${Date.now()}`,
+            value: comment.value || '',
+            date: new Date().toISOString(),
+            name: 'Storybook User',
+            user: 'storybook-current-user',
+            picture: '',
+            reply: replyId,
+            requested: resolveRequestedUsers(comment.requested),
+            coordinates: comment.coordinates,
+        };
+        storybookComments = [...storybookComments, newComment];
+        return mockResponse(newComment);
+    }
     return api.post(`${import.meta.env.VITE_APP_COMMENT_API_URL}/${mode}/${uid}`, {
         ...comment,
         ...references,
@@ -22,9 +90,15 @@ function add(uid, mode, comment, references, keywords) {
     });
 }
 function find(uid, mode, request) {
+    if (StorybookUtils.isStorybook()) {
+        return mockResponse(storybookComments);
+    }
     return api.post(`${import.meta.env.VITE_APP_COMMENT_API_URL}/${mode}/find/${uid}`, request);
 }
 function findAvailableUsers(uid, mode) {
+    if (StorybookUtils.isStorybook()) {
+        return mockResponse(mockCommentUsers);
+    }
     return api.get(`${import.meta.env.VITE_APP_AUTH_API}/${mode}/${uid}`);
 }
 const CommentService = {

package/dist/features/Comments/CommentService.mock.d.ts

@@ -0,0 +1,4 @@
+import { User } from '../../configs/types/User';
+import { Comment } from './types/Comment';
+export declare const mockCommentUsers: User[];
+export declare const mockComments: Comment[];

package/dist/features/Comments/CommentService.mock.js

@@ -0,0 +1,67 @@
+import { UserStatus } from '../../configs/types/User';
+export const mockCommentUsers = [
+    {
+        uid: 'storybook-user-ana',
+        name: 'Ana Silva',
+        sub: 'ana.silva@example.com',
+        picture: '',
+        lang: 'en',
+        status: UserStatus.ACTIVE,
+        permissions: [],
+    },
+    {
+        uid: 'storybook-user-john',
+        name: 'John Doe',
+        sub: 'john.doe@example.com',
+        picture: '',
+        lang: 'en',
+        status: UserStatus.ACTIVE,
+        permissions: [],
+    },
+    {
+        uid: 'storybook-user-maria',
+        name: 'Maria Souza',
+        sub: 'maria.souza@example.com',
+        picture: '',
+        lang: 'en',
+        status: UserStatus.ACTIVE,
+        permissions: [],
+    },
+];
+export const mockComments = [
+    {
+        id: 'mock-comment-1',
+        value: 'This passage needs a **second review** before publishing.\n\n```\ncheck coordinates\n```',
+        date: new Date(Date.now() - 2 * 86400000).toISOString(),
+        name: 'Ana Silva',
+        user: 'storybook-user-ana',
+        picture: '',
+        edited: new Date(Date.now() - 86400000).toISOString(),
+        requested: [
+            {
+                uid: 'storybook-user-john',
+                name: 'John Doe',
+                picture: '',
+                email: 'john.doe@example.com',
+                read: false,
+            },
+        ],
+    },
+    {
+        id: 'mock-comment-1-reply',
+        value: 'Agreed, I will take a look today.',
+        date: new Date(Date.now() - 86400000).toISOString(),
+        name: 'John Doe',
+        user: 'storybook-user-john',
+        picture: '',
+        reply: 'mock-comment-1',
+    },
+    {
+        id: 'mock-comment-2',
+        value: 'Great work on this entry!',
+        date: new Date(Date.now() - 3 * 3600000).toISOString(),
+        name: 'Maria Souza',
+        user: 'storybook-user-maria',
+        picture: '',
+    },
+];

package/dist/features/Comments/CommentThread.d.ts

@@ -0,0 +1,11 @@
+import { Comment } from './types/Comment';
+type Props = {
+    comments: Comment[];
+    hasEditAccess: boolean;
+    onRemove: (id: Comment['id']) => void;
+    onUpdate: (comment: Comment) => void;
+    onEdit: (comment: Comment) => void;
+    onReply: (comment: Comment) => void;
+};
+export default function CommentThread({ comments, hasEditAccess, onRemove, onUpdate, onEdit, onReply, }: Props): import("react").JSX.Element;
+export {};