tycho-components 0.40.9 → 0.41.0

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,9 @@ export declare const CommentsTexts: {
         "notification.empty": string;
         "notification.text": string;
         "label.edited": string;
+        "tab.write": string;
+        "tab.preview": string;
+        "placeholder.preview.empty": string;
     };
     "pt-BR": {
         "label.title.comments": string;
@@ -39,6 +43,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 +65,9 @@ export declare const CommentsTexts: {
         "notification.empty": string;
         "notification.text": string;
         "label.edited": string;
+        "tab.write": string;
+        "tab.preview": string;
+        "placeholder.preview.empty": string;
     };
     it: {
         "label.title.comments": string;
@@ -70,6 +78,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 +100,8 @@ export declare const CommentsTexts: {
         "notification.empty": string;
         "notification.text": string;
         "label.edited": string;
+        "tab.write": string;
+        "tab.preview": string;
+        "placeholder.preview.empty": 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,9 @@ 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",
     },
     "pt-BR": {
         "label.title.comments": "Comentários",
@@ -39,6 +43,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 +65,9 @@ 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",
     },
     it: {
         "label.title.comments": "Commenti",
@@ -70,6 +78,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 +100,8 @@ 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",
     },
 };

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 {};

package/dist/features/Comments/CommentThread.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import UsabilityUtils from '../../functions/UsabilityUtils';
+import CommentInfo from './CommentInfo';
+export default function CommentThread({ comments, hasEditAccess, onRemove, onUpdate, onEdit, onReply, }) {
+    const hasReplies = (thisComment) => comments.some((c) => c.reply === thisComment.id);
+    const getReplies = (thisComment) => comments.filter((c) => c.reply === thisComment.id);
+    return (_jsx(_Fragment, { children: comments.map((el, idx) => (_jsxs("div", { className: "thread", children: [!el.reply && (_jsx(CommentInfo, { comment: el, hasEditAccess: hasEditAccess, onRemove: () => onRemove(el.id), onUpdate: onUpdate, onEdit: () => {
+                        onEdit(el);
+                        UsabilityUtils.goToAnchor('comment-top');
+                    }, onReply: () => {
+                        onReply(el);
+                        UsabilityUtils.goToAnchor('comment-top');
+                    } })), hasReplies(el) && (_jsx("div", { className: "replies", children: getReplies(el).map((rel, idy) => (_jsx(CommentInfo, { comment: rel, hasEditAccess: hasEditAccess, onRemove: () => onRemove(rel.id), onUpdate: onUpdate, onEdit: () => onEdit(rel), onReply: () => onReply(rel) }, `${idx}_${idy}`))) }))] }, idx.valueOf()))) }));
+}

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

@@ -7,6 +7,8 @@ type Props = {
     onClose: () => void;
     mode: 'lexicon' | 'corpus' | 'parser';
     onChange?: (a: Comment[]) => void;
+    /** Opens the add-comment panel on mount (useful in Storybook). */
+    initialOpenAdd?: boolean;
 };
-export default function Comments({ uid, keywords, references, mode, onClose, onChange, }: Props): import("react").JSX.Element;
+export default function Comments({ uid, keywords, references, mode, onClose, onChange, initialOpenAdd, }: Props): import("react").JSX.Element;
 export {};

package/dist/features/Comments/Comments.js

@@ -1,23 +1,57 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Drawer } from '@mui/material';
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, IconButton } from 'tycho-storybook';
 import AppLoading from '../../common/AppLoading';
 import AppPlaceholder from '../../common/AppPlaceholder';
 import SecurityUtils from '../../functions/SecurityUtils';
-import UsabilityUtils from '../../functions/UsabilityUtils';
 import CommentAdd from './CommentAdd';
-import CommentInfo from './CommentInfo';
 import CommentService from './CommentService';
+import CommentThread from './CommentThread';
 import './style.scss';
-export default function Comments({ uid, keywords, references, mode, onClose, onChange, }) {
+const DRAWER_WIDTH_STORAGE_KEY = 'tycho-comments-drawer-width';
+const DRAWER_MIN_WIDTH = 320;
+const getDefaultDrawerWidth = () => {
+    if (typeof window === 'undefined')
+        return 480;
+    const { innerWidth } = window;
+    if (innerWidth <= 767)
+        return Math.round(innerWidth * 0.9);
+    if (innerWidth <= 768)
+        return Math.round(innerWidth * 0.6);
+    return Math.round(innerWidth * 0.4);
+};
+const clampDrawerWidth = (width) => {
+    if (typeof window === 'undefined')
+        return width;
+    const maxWidth = Math.min(Math.round(window.innerWidth * 0.9), window.innerWidth - 48);
+    return Math.min(Math.max(width, DRAWER_MIN_WIDTH), maxWidth);
+};
+const readStoredDrawerWidth = () => {
+    try {
+        const stored = localStorage.getItem(DRAWER_WIDTH_STORAGE_KEY);
+        if (stored) {
+            const parsed = Number(stored);
+            if (!Number.isNaN(parsed) && parsed > 0) {
+                return clampDrawerWidth(parsed);
+            }
+        }
+    }
+    catch {
+        // ignore storage access errors
+    }
+    return clampDrawerWidth(getDefaultDrawerWidth());
+};
+export default function Comments({ uid, keywords, references, mode, onClose, onChange, initialOpenAdd = false, }) {
     const { t } = useTranslation('comments');
-    const [openAddComment, setOpenAddComment] = useState(false);
+    const [openAddComment, setOpenAddComment] = useState(initialOpenAdd);
     const [comment, setComment] = useState();
     const [comments, setComments] = useState();
     const [users, setUsers] = useState([]);
     const [reply, setReply] = useState();
+    const [drawerWidth, setDrawerWidth] = useState(readStoredDrawerWidth);
+    const commentAddRef = useRef(null);
     const load = async () => {
         try {
             const [commentsResponse, usersResponse] = await Promise.all([
@@ -35,61 +69,86 @@ export default function Comments({ uid, keywords, references, mode, onClose, onC
     const hasEditAccess = useMemo(() => {
         return SecurityUtils.hasAccess(uid, ['ADMIN', 'EDITOR'], mode);
     }, [uid, mode]);
-    const hasReplies = (thisComment) => comments && comments.some((c) => c.reply === thisComment.id);
-    const getReplies = (thisComment) => comments?.filter((c) => c.reply === thisComment.id) || [];
     useEffect(() => {
         load();
     }, []);
-    return (_jsx(Drawer, { anchor: "right", open: true, onClose: onClose, children: !comments ? (_jsx(AppLoading, {})) : (_jsxs("div", { className: "comments-container", id: "comment-top", children: [_jsxs("div", { className: "header", children: [_jsx(IconButton, { name: "close", size: "small", mode: "ghost", onClick: onClose }), _jsx("span", { className: "title", children: t('label.title.comments') }), _jsx("div", { className: "actions", children: hasEditAccess && (_jsx(Button, { text: t('button.add'), icon: "add", mode: "outlined", size: "small", className: "edit-button", onClick: () => {
-                                    setComment(undefined);
-                                    setOpenAddComment(!openAddComment);
-                                } })) })] }), _jsxs("div", { className: "body", children: [hasEditAccess && openAddComment && (_jsx(CommentAdd, { uid: uid, mode: mode, users: users, references: references, keywords: keywords, comment: comment, reply: reply, onClose: () => {
-                                setComment(undefined);
-                                setReply(undefined);
-                                setOpenAddComment(false);
-                            }, onChange: (el) => {
-                                if (!comment) {
-                                    const updated = [...(comments || []), el];
-                                    setComments(updated);
-                                    onChange?.(updated);
-                                }
-                                else {
-                                    const updated = comments?.map((c) => (c.id === comment.id ? el : c)) ||
-                                        [];
-                                    setComments(updated);
-                                    onChange?.(updated);
-                                }
-                            } })), comments?.length === 0 && (_jsx(AppPlaceholder, { text: t('placeholder.comments.empty') })), comments?.map((el, idx) => (_jsxs("div", { className: "thread", children: [!el.reply && (_jsx(CommentInfo, { comment: el, hasEditAccess: hasEditAccess, onRemove: () => {
-                                        const updated = comments?.filter((c) => c.id !== el.id);
+    useEffect(() => {
+        if (!openAddComment || !comments)
+            return;
+        const frame = requestAnimationFrame(() => {
+            commentAddRef.current?.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+            });
+        });
+        return () => cancelAnimationFrame(frame);
+    }, [openAddComment, comments, comment, reply]);
+    const handleResizePointerDown = useCallback((event) => {
+        event.preventDefault();
+        const handle = event.currentTarget;
+        handle.setPointerCapture(event.pointerId);
+        const previousUserSelect = document.body.style.userSelect;
+        const previousCursor = document.body.style.cursor;
+        document.body.style.userSelect = 'none';
+        document.body.style.cursor = 'col-resize';
+        const onPointerMove = (moveEvent) => {
+            const nextWidth = clampDrawerWidth(window.innerWidth - moveEvent.clientX);
+            setDrawerWidth(nextWidth);
+        };
+        const onPointerUp = (upEvent) => {
+            const nextWidth = clampDrawerWidth(window.innerWidth - upEvent.clientX);
+            setDrawerWidth(nextWidth);
+            try {
+                localStorage.setItem(DRAWER_WIDTH_STORAGE_KEY, String(nextWidth));
+            }
+            catch {
+                // ignore storage access errors
+            }
+            document.body.style.userSelect = previousUserSelect;
+            document.body.style.cursor = previousCursor;
+            handle.releasePointerCapture(upEvent.pointerId);
+            handle.removeEventListener('pointermove', onPointerMove);
+            handle.removeEventListener('pointerup', onPointerUp);
+            handle.removeEventListener('pointercancel', onPointerUp);
+        };
+        handle.addEventListener('pointermove', onPointerMove);
+        handle.addEventListener('pointerup', onPointerUp);
+        handle.addEventListener('pointercancel', onPointerUp);
+    }, []);
+    return (_jsx(Drawer, { anchor: "right", open: true, onClose: onClose, PaperProps: {
+            className: 'comments-drawer-paper',
+            style: { width: drawerWidth },
+        }, children: _jsxs("div", { className: "comments-container", id: "comment-top", children: [_jsx("div", { className: "comments-resize-handle", onPointerDown: handleResizePointerDown, role: "separator", "aria-orientation": "vertical", "aria-label": "Resize comments panel" }), !comments ? (_jsx(AppLoading, { pageLoading: true })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "header", children: [_jsx(IconButton, { name: "close", size: "small", mode: "ghost", onClick: onClose }), _jsx("span", { className: "title", children: t('label.title.comments') }), _jsx("div", { className: "actions", children: hasEditAccess && (_jsx(Button, { text: t('button.add'), icon: "add", mode: "outlined", size: "small", className: "edit-button", onClick: () => {
+                                            setComment(undefined);
+                                            setOpenAddComment(!openAddComment);
+                                        } })) })] }), _jsxs("div", { className: "body", children: [comments?.length === 0 && (_jsx(AppPlaceholder, { text: t('placeholder.comments.empty'), useMarginTop: true })), _jsx(CommentThread, { comments: comments, hasEditAccess: hasEditAccess, onRemove: (id) => {
+                                        const updated = comments.filter((c) => c.id !== id);
                                         setComments(updated);
-                                        onChange && onChange(updated || []);
+                                        onChange?.(updated);
                                     }, onUpdate: (thisComment) => {
-                                        const updated = comments?.map((c) => c.id === thisComment.id ? { ...c, ...thisComment } : c) || [];
+                                        const updated = comments.map((c) => c.id === thisComment.id ? { ...c, ...thisComment } : c);
                                         setComments(updated);
                                         onChange?.(updated);
-                                    }, onEdit: () => {
+                                    }, onEdit: (el) => {
                                         setComment(el);
                                         setOpenAddComment(true);
-                                        UsabilityUtils.goToAnchor('comment-top');
-                                    }, onReply: () => {
+                                    }, onReply: (el) => {
                                         setReply(el);
                                         setOpenAddComment(true);
-                                        UsabilityUtils.goToAnchor('comment-top');
-                                    } })), hasReplies(el) && (_jsx("div", { className: "replies", children: getReplies(el).map((rel, idy) => (_jsx(CommentInfo, { comment: rel, hasEditAccess: hasEditAccess, onRemove: () => {
-                                            const updated = comments?.filter((c) => c.id !== rel.id);
-                                            setComments(updated);
-                                            onChange && onChange(updated || []);
-                                        }, onUpdate: (thisComment) => {
-                                            const updated = comments?.map((c) => c.id === thisComment.id
-                                                ? { ...c, ...thisComment }
-                                                : c) || [];
-                                            setComments(updated);
-                                            onChange?.(updated);
-                                        }, onEdit: () => {
-                                            setComment(rel);
-                                            setOpenAddComment(true);
-                                        }, onReply: () => {
-                                            setReply(rel);
-                                            setOpenAddComment(true);
-                                        } }, `${idx}_${idy}`))) }))] }, idx.valueOf())))] })] })) }));
+                                    } }), hasEditAccess && openAddComment && (_jsx("div", { ref: commentAddRef, children: _jsx(CommentAdd, { uid: uid, mode: mode, users: users, references: references, keywords: keywords, comment: comment, reply: reply, onClose: () => {
+                                            setComment(undefined);
+                                            setReply(undefined);
+                                            setOpenAddComment(false);
+                                        }, onChange: (el) => {
+                                            if (!comment) {
+                                                const updated = [...(comments || []), el];
+                                                setComments(updated);
+                                                onChange?.(updated);
+                                            }
+                                            else {
+                                                const updated = comments?.map((c) => c.id === comment.id ? el : c) || [];
+                                                setComments(updated);
+                                                onChange?.(updated);
+                                            }
+                                        } }) }))] })] }))] }) }));
 }

package/dist/features/Comments/style.scss

@@ -1,7 +1,44 @@
+.comments-drawer-paper {
+  width: 40vw;
+  max-width: 90vw;
+  min-width: 320px;
+  overflow: hidden;
+}
+
 .comments-container {
+  position: relative;
   display: flex;
   flex-direction: column;
-  width: 25vw;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  > .comments-resize-handle {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 6px;
+    height: 100%;
+    cursor: col-resize;
+    z-index: 2;
+    touch-action: none;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 2px;
+      height: 100%;
+      background-color: transparent;
+      transition: background-color 0.15s ease;
+    }
+
+    &:hover::after,
+    &:active::after {
+      background-color: var(--border-hover);
+    }
+  }
 
   > .header {
     display: flex;
@@ -12,7 +49,7 @@
     > .title {
       @include tag-medium-1;
       color: var(--text-secondary);
-      margin-left: 8px;
+      margin-left: var(--spacing-100);
     }
 
     > .actions {
@@ -26,118 +63,137 @@
   }
 
   > .body {
-    padding: var(--spacing-0) var(--spacing-250);
-    background-color: #fff;
-    padding: 16px;
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--spacing-200);
+    background-color: var(--background-default);
 
     .thread {
-      border-bottom: 1px solid var(--border-subtle-1);
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-200);
+
+      & + .thread {
+        margin-top: var(--spacing-100);
+      }
 
       .comment {
         display: flex;
         flex-direction: column;
-        padding: var(--spacing-150) var(--spacing-100);
+        border: 1px solid var(--border-subtle-1);
+        border-radius: var(--radius-200);
+        overflow: hidden;
+        background-color: var(--background-default);
 
-        .top {
+        .comment-header {
           display: flex;
           align-items: center;
+          gap: var(--spacing-100);
+          padding: 4px 8px;
+          background-color: var(--layer-hover-2);
+          border-bottom: 1px solid var(--border-subtle-1);
 
           > .ds-avatar {
-            margin-right: 8px;
+            flex-shrink: 0;
+          }
+
+          .meta {
+            display: flex;
+            align-items: baseline;
+            flex-wrap: wrap;
+            gap: var(--spacing-050) var(--spacing-100);
+            min-width: 0;
+
+            .name {
+              @include label-medium-1;
+              color: var(--text-primary);
+            }
+
+            .timestamp {
+              @include helper-small-1;
+              color: var(--text-tertiary);
+            }
           }
 
           .buttons {
             display: flex;
             margin-left: auto;
-            gap: 8px;
+            flex-shrink: 0;
+            gap: var(--spacing-100);
           }
         }
 
-        .content {
-          margin-top: 16px;
-
-          .title {
-            @include tag-medium-1;
-            color: var(--text-accent);
-            text-transform: none;
-            margin-bottom: 4px;
-          }
+        .comment-body {
+          padding: var(--spacing-200) var(--spacing-150);
+          background-color: var(--background-default);
 
           .text {
             @include body-medium-1;
             color: var(--text-primary);
+            word-break: break-word;
+
+            .wmde-markdown {
+              background: transparent;
+              font-size: inherit;
+              color: inherit;
+
+              p {
+                margin: 0 0 var(--spacing-100);
+
+                &:last-child {
+                  margin-bottom: 0;
+                }
+              }
+
+              pre,
+              code {
+                border-radius: var(--radius-100);
+              }
+
+              pre {
+                overflow-x: auto;
+              }
+
+              ul,
+              ol {
+                margin: 0 0 var(--spacing-100);
+                padding-left: var(--spacing-250);
+              }
+            }
           }
 
-          .date {
+          .meta-line {
             @include helper-small-1;
             color: var(--text-tertiary);
-            margin-top: 8px;
+            margin-top: var(--spacing-100);
           }
         }
       }
 
       .replies {
-        margin-left: 32px;
-
-        .comment {
-          margin-top: 8px;
-
-          .top {
-            .name {
-              font-size: 14px !important;
-            }
-          }
-
-          .content {
-            .title {
-              font-size: 13px !important;
-            }
-
-            .text {
-              font-size: 13px !important;
-            }
-          }
-        }
-      }
-    }
-
-    .form {
-      display: flex;
-      flex-direction: column;
-      padding-bottom: 16px;
-      border-bottom: 1px solid var(--border-subtle-1);
-
-      > .ds-input-text,
-      > .ds-select-text {
-        margin-bottom: 8px;
-      }
-
-      > .buttons {
+        margin-left: var(--spacing-400);
         display: flex;
-        gap: 8px;
-
-        > .ds-button {
-          width: 100%;
-        }
+        flex-direction: column;
+        gap: var(--spacing-100);
       }
     }
   }
 }
 
 @media (max-width: 1366px) {
-  .comments-container {
+  .comments-drawer-paper {
     width: 40vw;
   }
 }
 
 @media (max-width: 768px) {
-  .comments-container {
+  .comments-drawer-paper {
     width: 60vw;
   }
 }
 
 @media (max-width: 767px) {
-  .comments-container {
+  .comments-drawer-paper {
     width: 90vw;
   }
 }

package/dist/features/Comments/types/Comment.d.ts

@@ -1,13 +1,11 @@
 export type CommentRequest = {
     id?: string;
-    title?: string;
     value?: string;
     requested?: string[];
     coordinates?: string[];
 };
 export type Comment = {
     id: string;
-    title?: string;
     value: string;
     date: string;
     edited?: string;

package/dist/functions/StorybookUtils.d.ts

@@ -0,0 +1,4 @@
+declare const StorybookUtils: {
+    isStorybook: () => boolean;
+};
+export default StorybookUtils;

package/dist/functions/StorybookUtils.js

@@ -0,0 +1,8 @@
+/** True when running inside Storybook (dev server on port 6006, or the `__STORYBOOK__` flag set in .storybook/preview.tsx). */
+const isStorybook = () => typeof window !== 'undefined' &&
+    Boolean(window.location.port === '6006' ||
+        window.__STORYBOOK__);
+const StorybookUtils = {
+    isStorybook,
+};
+export default StorybookUtils;

package/dist/functions/index.d.ts

@@ -5,6 +5,7 @@ export { default as FormUtils } from './FormUtils';
 export { default as ImageUtils } from './ImageUtils';
 export { default as SecurityUtils } from './SecurityUtils';
 export { default as SentenceUtils } from './SentenceUtils';
+export { default as StorybookUtils } from './StorybookUtils';
 export { EDITION_TOOLS, default as ToolsUtils, type PlatformTools, } from './ToolsUtils';
 export type { OpenDocumentParams, RedirectPageParams } from './ToolsUtils';
 export { default as UsabilityUtils } from './UsabilityUtils';

package/dist/functions/index.js

@@ -5,6 +5,7 @@ export { default as FormUtils } from './FormUtils';
 export { default as ImageUtils } from './ImageUtils';
 export { default as SecurityUtils } from './SecurityUtils';
 export { default as SentenceUtils } from './SentenceUtils';
+export { default as StorybookUtils } from './StorybookUtils';
 export { EDITION_TOOLS, default as ToolsUtils, } from './ToolsUtils';
 export { default as UsabilityUtils } from './UsabilityUtils';
 export { conlluViewerConfigurations } from './conllu/ConlluViewerConstants';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.40.9",
+  "version": "0.41.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -51,6 +51,7 @@
     "@svgdotjs/svg.js": "^3.2.4",
     "@svgdotjs/svg.panzoom.js": "^2.1.2",
     "@tanstack/react-table": "^8.20.6",
+    "@uiw/react-md-editor": "^4.1.2",
     "classnames": "^2.5.1",
     "cytoscape": "^3.28.1",
     "cytoscape-dagre": "^2.5.0",
@@ -84,7 +85,7 @@
     "react-i18next": "^13.0.2",
     "react-router-dom": "^6.14.2",
     "react-toastify": "^9.1.3",
-    "tycho-storybook": "0.11.0",
+    "tycho-storybook": "0.12.0",
     "wavesurfer-react": "^2.2.2",
     "wavesurfer.js": "^6.6.3"
   },
@@ -114,7 +115,7 @@
     "react-toastify": "^9.1.3",
     "sass-embedded": "^1.97.2",
     "storybook": "^10.1.11",
-    "tycho-storybook": "^0.11.0",
+    "tycho-storybook": "^0.12.0",
     "typescript": "^5.7.3",
     "vite": "^7.0.0",
     "vitest": "^3.2.6",

package/dist/features/Comments/CommentAdd.js

@@ -1,70 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { yupResolver } from "@hookform/resolvers/yup";
-import { useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { Button, SelectMultipleField, TextField, } from "tycho-storybook";
-import * as yup from "yup";
-import { useMessageUtils } from "../../configs/useMessageUtils";
-import FormUtils from "../../functions/FormUtils";
-import "./style.scss";
-import { EMPTY_COMMENT_REQUEST, } from "./types/Comment";
-import CommentService from "./CommentService";
-export default function CommentAdd({ uid, mode, users, references, keywords, comment, reply, onClose, onChange, }) {
-    const { t } = useTranslation("comments");
-    const { isLoading, dispatchLoading } = useMessageUtils();
-    const getFormDefaultValues = () => {
-        if (comment)
-            return {
-                value: comment.value,
-                title: comment.title,
-                requested: comment.requested?.map((r) => r.uid),
-            };
-        if (reply) {
-            return {
-                ...EMPTY_COMMENT_REQUEST,
-                reply: reply.id,
-                requested: [reply.user],
-            };
-        }
-        return EMPTY_COMMENT_REQUEST;
-    };
-    const createdForm = useForm({
-        resolver: yupResolver(getFormSchema(t)),
-        mode: "onChange",
-        defaultValues: getFormDefaultValues(),
-    });
-    const handleAdd = () => {
-        if (isLoading())
-            return;
-        dispatchLoading(true);
-        CommentService.add(uid, mode, createdForm.getValues(), references, keywords).then((r) => {
-            dispatchLoading(false);
-            onClose();
-            onChange(r.data);
-            createdForm.reset(EMPTY_COMMENT_REQUEST);
-        });
-    };
-    const handleUpdate = () => {
-        if (!comment)
-            return;
-        CommentService.update(comment.id, createdForm.getValues()).then((r) => {
-            onClose();
-            onChange(r.data);
-            createdForm.reset(EMPTY_COMMENT_REQUEST);
-        });
-    };
-    return (_jsxs("div", { className: "form", children: [_jsx(TextField, { label: t("input.value"), attr: "value", createdForm: createdForm, showEndAdornment: false, placeholder: t("common:generic.placeholder"), required: true, multiline: true }), _jsx(TextField, { label: t("input.title"), attr: "title", createdForm: createdForm, showEndAdornment: false, placeholder: t("common:generic.placeholder") }), _jsx(SelectMultipleField, { label: reply ? t("input.user.reply") : t("input.user"), attr: "requested", createdForm: createdForm, options: [
-                    {
-                        label: t("common:generic.placeholder.select"),
-                        value: "",
-                    },
-                    ...FormUtils.convertList(users, "name", "uid"),
-                ], showEndAdornment: false }), _jsxs("div", { className: "buttons", children: [_jsx(Button, { onClick: onClose, text: t("button.discard"), color: "danger" }), _jsx(Button, { onClick: comment ? handleUpdate : handleAdd, text: comment ? t("label.button.update") : t("label.button.add"), disabled: !createdForm.formState.isValid })] })] }));
-}
-const getFormSchema = (t) => yup.object().shape({
-    id: yup.string().optional(),
-    title: 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(),
-});