tycho-components 0.40.9 → 0.41.1

package/dist/features/Comments/style.scss

@@ -1,7 +1,98 @@
+.comments-drawer-paper {
+  overflow: hidden;
+
+  &:not(.dock-bottom) {
+    width: 40vw;
+    max-width: 90vw;
+    min-width: 320px;
+  }
+
+  &.dock-bottom {
+    width: 100%;
+    max-width: none;
+    min-width: 0;
+    max-height: 90vh;
+    min-height: 200px;
+  }
+}
+
+.comments-undocked-root {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: var(--background-default);
+}
+
 .comments-container {
+  position: relative;
   display: flex;
   flex-direction: column;
-  width: 25vw;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  > .comments-resize-handle {
+    position: absolute;
+    z-index: 2;
+    touch-action: none;
+
+    &::after {
+      content: '';
+      position: absolute;
+      background-color: transparent;
+      transition: background-color 0.15s ease;
+    }
+
+    &:hover::after,
+    &:active::after {
+      background-color: var(--border-hover);
+    }
+  }
+
+  &.dock-right > .comments-resize-handle {
+    top: 0;
+    left: 0;
+    width: 6px;
+    height: 100%;
+    cursor: col-resize;
+
+    &::after {
+      top: 0;
+      left: 0;
+      width: 2px;
+      height: 100%;
+    }
+  }
+
+  &.dock-left > .comments-resize-handle {
+    top: 0;
+    right: 0;
+    width: 6px;
+    height: 100%;
+    cursor: col-resize;
+
+    &::after {
+      top: 0;
+      right: 0;
+      width: 2px;
+      height: 100%;
+    }
+  }
+
+  &.dock-bottom > .comments-resize-handle {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 6px;
+    cursor: row-resize;
+
+    &::after {
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 2px;
+    }
+  }
 
   > .header {
     display: flex;
@@ -12,132 +103,153 @@
     > .title {
       @include tag-medium-1;
       color: var(--text-secondary);
-      margin-left: 8px;
+      margin-left: var(--spacing-100);
     }
 
     > .actions {
       display: flex;
+      align-items: center;
       margin-left: auto;
+      gap: var(--spacing-100);
 
       .edit-button {
-        margin-right: var(--spacing-100);
+        margin-right: 0;
       }
     }
   }
 
   > .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:not(.dock-bottom) {
     width: 40vw;
   }
 }
 
 @media (max-width: 768px) {
-  .comments-container {
+  .comments-drawer-paper:not(.dock-bottom) {
     width: 60vw;
   }
 }
 
 @media (max-width: 767px) {
-  .comments-container {
+  .comments-drawer-paper:not(.dock-bottom) {
     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.1",
   "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(),
-});