@appquality/unguess-design-system 3.1.65 → 3.1.67

package/CHANGELOG.md

@@ -1,3 +1,34 @@
+# v3.1.67 (Wed Jan 24 2024)
+
+#### 🐛 Bug Fix
+
+- Minor changes [#305](https://github.com/AppQuality/unguess-design-system/pull/305) ([@cannarocks](https://github.com/cannarocks) [@iDome89](https://github.com/iDome89) [@marcbon](https://github.com/marcbon))
+- fixed behaviour when editor is empty [#304](https://github.com/AppQuality/unguess-design-system/pull/304) ([@iDome89](https://github.com/iDome89))
+- 🔧 fix(chat): fix typo in mentionList.tsx [#303](https://github.com/AppQuality/unguess-design-system/pull/303) ([@marcbon](https://github.com/marcbon))
+- Comments design refinement [#302](https://github.com/AppQuality/unguess-design-system/pull/302) ([@iDome89](https://github.com/iDome89) [@marcbon](https://github.com/marcbon))
+- chore(storybook): add extension [#301](https://github.com/AppQuality/unguess-design-system/pull/301) ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 3
+
+- [@iDome89](https://github.com/iDome89)
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
+# v3.1.66 (Fri Jan 19 2024)
+
+#### 🐛 Bug Fix
+
+- Fix editable comments in chat [#300](https://github.com/AppQuality/unguess-design-system/pull/300) ([@marcbon](https://github.com/marcbon))
+- 🎨 style(comment.tsx): update ReadOnly style to make it more readable [#299](https://github.com/AppQuality/unguess-design-system/pull/299) ([@marcbon](https://github.com/marcbon))
+
+#### Authors: 1
+
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
 # v3.1.65 (Fri Jan 19 2024)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -2283,8 +2283,9 @@ const SentimentChart = ({ data, width, height, margin, tooltip, i18n, }) => {
 const ShortcutContainer = styled__default["default"].div `
   display: flex;
   flex-direction: row;
-  padding: ${({ theme }) => `${theme.space.sm} ${theme.space.base * 4}px`};
+  padding: ${({ theme }) => `0 ${theme.space.base * 4}px`};
   background-color: ${({ theme }) => theme.palette.grey[100]};
+  font-size: ${({ theme }) => theme.fontSizes.sm};
 `;
 const Text$1 = styled__default["default"](reactTypography.SM) `
   line-height: 1.7;
@@ -2296,7 +2297,7 @@ const SendShortcut = ({ saveText }) => {
 const Footer$4 = styled__default["default"].div `
   display: flex;
   flex-direction: row;
-  padding: ${({ theme }) => `${theme.space.sm} 0px`};
+  padding: ${({ theme }) => `${theme.space.xs} 0px ${theme.space.sm}`};
   align-items: center;
   margin: ${({ theme }) => `0 -${theme.space.base * 4}px`};
   justify-content: ${({ showShortcut }) => showShortcut ? "space-between" : "flex-end"};
@@ -2318,7 +2319,8 @@ const ChatContextProvider = ({ onSave, setMentionableUsers, children, }) => {
                 if (!result.some((r) => r.id === node.attrs.id))
                     result.push({
                         id: node.attrs.id,
-                        name: node.attrs.name
+                        name: node.attrs.name,
+                        email: node.attrs.email
                     });
             }
         });
@@ -2328,7 +2330,7 @@ const ChatContextProvider = ({ onSave, setMentionableUsers, children, }) => {
         editor,
         setEditor,
         triggerSave: () => {
-            if (editor && onSave) {
+            if (editor && onSave && !editor.isEmpty) {
                 onSave(editor, getMentions(editor));
                 editor.commands.clearContent();
             }
@@ -2607,9 +2609,9 @@ const editorStyle = styled.css `
   }
 `;
 const readOnlyStyle = styled.css `
+  pointer-events: none;
   border: none;
-  outline: none;
-
+  
   .ProseMirror {
     background: transparent;
     border: none;
@@ -2642,7 +2644,6 @@ const EditorContainer$1 = styled__default["default"](reactForms.FauxInput) `
     : `
     margin-left: ${theme.space.sm};
     padding: ${`${theme.space.xxs} ${theme.space.xs}`};
-      
     `}
 
   .ProseMirror {
@@ -2862,9 +2863,25 @@ const SvgAtFill = props => /*#__PURE__*/React__namespace.createElement("svg", _e
   d: "M11 5v3h0a3 3 0 01-3 3h0a3 3 0 01-3-3h0a3 3 0 013-3h0a3 3 0 013 3h0v1a2 2 0 002 2h0a2 2 0 002-2V8h0a7 7 0 00-7-7h0a7 7 0 00-7 7h0a7 7 0 007 7h2.8"
 })));
 
-const EditorButton = ({ editor, type, }) => {
-    const isActive = editor.isActive(type);
-    const getIcon = () => {
+const MenuContainer = styled__default["default"].div `
+  padding: ${({ theme }) => theme.space.xs} 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  gap: ${({ theme }) => theme.space.xxs};
+`;
+const VerticalDivider = styled__default["default"].div `
+  width: 2px;
+  height: 24px;
+  background-color: ${({ theme }) => theme.palette.grey[300]};
+  margin: 0 ${({ theme }) => theme.space.xs};
+`;
+const CommentBar = ({ editor, i18n, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    if (!editor)
+        return null;
+    const getIcon = (type) => {
         switch (type) {
             case "bold":
                 return jsxRuntime.jsx(SvgBoldFill, {});
@@ -2872,9 +2889,11 @@ const EditorButton = ({ editor, type, }) => {
                 return jsxRuntime.jsx(SvgItalicFill, {});
             case "mention":
                 return jsxRuntime.jsx(SvgAtFill, {});
+            default:
+                return null;
         }
     };
-    const handleClick = () => {
+    const handleClick = (type) => {
         switch (type) {
             case "bold":
                 return editor.chain().focus().toggleBold().run();
@@ -2884,29 +2903,11 @@ const EditorButton = ({ editor, type, }) => {
                 const { from } = editor.state.selection;
                 const char = from > 1 ? " @" : "@";
                 return editor.commands.insertContent(char);
+            default:
+                return;
         }
     };
-    return (jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !isActive, isPrimary: isActive, onClick: handleClick }, { children: getIcon() })));
-};
-
-const MenuContainer = styled__default["default"].div `
-  padding: ${({ theme }) => theme.space.xxs} 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-`;
-const VerticalDivider = styled__default["default"].div `
-  width: 2px;
-  height: 24px;
-  background-color: ${({ theme }) => theme.palette.grey[300]};
-  margin: 0 ${({ theme }) => theme.space.xs};
-`;
-const CommentBar = ({ editor, i18n, }) => {
-    var _a, _b, _c, _d, _e, _f;
-    if (!editor)
-        return null;
-    return (jsxRuntime.jsxs(MenuContainer, { children: [jsxRuntime.jsx(Tooltip, Object.assign({ content: (_b = (_a = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _a === void 0 ? void 0 : _a.bold) !== null && _b !== void 0 ? _b : "Bold text", placement: "top", type: "light", size: "small" }, { children: jsxRuntime.jsx(EditorButton, { editor: editor, type: "bold" }) })), jsxRuntime.jsx(Tooltip, Object.assign({ content: (_d = (_c = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _c === void 0 ? void 0 : _c.italic) !== null && _d !== void 0 ? _d : "Italic text", placement: "top", type: "light", size: "small" }, { children: jsxRuntime.jsx(EditorButton, { editor: editor, type: "italic" }) })), jsxRuntime.jsx(VerticalDivider, {}), jsxRuntime.jsx(Tooltip, Object.assign({ content: (_f = (_e = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _e === void 0 ? void 0 : _e.mention) !== null && _f !== void 0 ? _f : "Add a mention", placement: "top", type: "light", size: "small" }, { children: jsxRuntime.jsx(EditorButton, { editor: editor, type: "mention" }) }))] }));
+    return (jsxRuntime.jsxs(MenuContainer, Object.assign({ id: "menu-container" }, { children: [jsxRuntime.jsx(Tooltip, Object.assign({ content: `${(_b = (_a = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _a === void 0 ? void 0 : _a.bold) !== null && _b !== void 0 ? _b : "Bold text"} ${isMac() ? "Cmd" : "Ctrl"} + B`, placement: "top", type: "light", size: "small", hasArrow: false }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("bold"), isPrimary: editor.isActive("bold"), isPill: false, onClick: () => handleClick("bold") }, { children: getIcon("bold") })) })), jsxRuntime.jsx(Tooltip, Object.assign({ content: `${(_d = (_c = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _c === void 0 ? void 0 : _c.italic) !== null && _d !== void 0 ? _d : "Italic text"} ${isMac() ? "Cmd" : "Ctrl"} + I`, placement: "top", type: "light", size: "small", hasArrow: false }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("italic"), isPrimary: editor.isActive("italic"), isPill: false, onClick: () => handleClick("italic") }, { children: getIcon("italic") })) })), jsxRuntime.jsx(VerticalDivider, {}), jsxRuntime.jsx(Tooltip, Object.assign({ content: (_f = (_e = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _e === void 0 ? void 0 : _e.mention) !== null && _f !== void 0 ? _f : "Add a mention", placement: "top", type: "light", size: "small", hasArrow: false }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("mention"), isPrimary: editor.isActive("mention"), isPill: false, onClick: () => handleClick("mention") }, { children: getIcon("mention") })) }))] })));
 };
 
 const CustomMention = Mention__default["default"].extend({
@@ -2986,9 +2987,27 @@ const Item$2 = styled.styled(Button) `
   align-items: flex-start;
   justify-content: center;
   flex-direction: column;
+
+  ${({ isActive }) => isActive &&
+    `
+    background-color: ${getColor(theme.colors.primaryHue, 600, undefined, 0.08)};
+  `}
 `;
+const EmptyList = styled.styled.div `
+  max-height: 100px;
+  max-width:280px;
+  padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.md}`};
+`;
+const EmptyMention = ({ content }) => {
+    return (jsxRuntime.jsx(EmptyList, { children: jsxRuntime.jsx(MD, Object.assign({ style: { color: theme.palette.grey[600] } }, { children: content })) }));
+};
 const MentionList = React.forwardRef((props, ref) => {
+    var _a, _b;
+    const { editor } = props;
+    const { options } = editor;
+    const { i18n } = options;
     const [selectedIndex, setSelectedIndex] = React.useState(0);
+    const selectedRef = React.useRef(null);
     const selectItem = (index) => {
         const item = props.items[index];
         if (item) {
@@ -3005,6 +3024,11 @@ const MentionList = React.forwardRef((props, ref) => {
         selectItem(selectedIndex);
     };
     React.useEffect(() => setSelectedIndex(0), [props.items]);
+    React.useEffect(() => {
+        if (selectedRef.current) {
+            selectedRef.current.scrollIntoView({ behavior: "smooth" });
+        }
+    }, [selectedIndex]);
     React.useImperativeHandle(ref, () => ({
         onKeyDown: ({ event }) => {
             if (event.key === "ArrowUp") {
@@ -3022,7 +3046,7 @@ const MentionList = React.forwardRef((props, ref) => {
             return false;
         },
     }));
-    return (jsxRuntime.jsx("div", Object.assign({ className: "items" }, { children: jsxRuntime.jsx(StyledCard$1, { children: jsxRuntime.jsx(List, { children: props.items.length ? (props.items.map((item, index) => (jsxRuntime.jsx("div", Object.assign({ className: index === selectedIndex ? 'selected' : '' }, { children: jsxRuntime.jsx(Item$2, Object.assign({ isBasic: true, isStretched: true, isAccent: true, isPill: false, onClick: () => selectItem(index) }, { children: jsxRuntime.jsx(MD, Object.assign({ isBold: true, style: { color: theme.palette.black } }, { children: item.name })) }), index) }))))) : (jsxRuntime.jsx("div", Object.assign({ className: "item" }, { children: "No result" }))) }) }) })));
+    return (jsxRuntime.jsx("div", Object.assign({ className: "items" }, { children: jsxRuntime.jsx(StyledCard$1, { children: jsxRuntime.jsx(List, { children: props.items.length ? (props.items.map((item, index) => (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Item$2, Object.assign({ ref: index === selectedIndex ? selectedRef : undefined, isBasic: true, isStretched: true, isAccent: true, isPill: false, isActive: index === selectedIndex, onClick: () => selectItem(index) }, { children: jsxRuntime.jsx(MD, Object.assign({ isBold: true, style: { color: theme.palette.black } }, { children: item.name })) }), index) })))) : (jsxRuntime.jsx(EmptyMention, { content: (_b = (_a = i18n === null || i18n === void 0 ? void 0 : i18n.mention) === null || _a === void 0 ? void 0 : _a.noResults) !== null && _b !== void 0 ? _b : "No results" })) }) }) })));
 });
 
 /**
@@ -3173,12 +3197,10 @@ const CommentCard = styled.styled(Card) `
   border-radius: 8px;
 `;
 const ReadOnly = styled.styled.div `
+  cursor: text;
+
   > div {
-    background-color: ${({ theme }) => theme.palette.grey[100]};
-    &:focus {
-      box-shadow: none;
-      outline: none;
-    }
+    background-color: transparent;
     padding: 0;
   }
 `;
@@ -3209,6 +3231,9 @@ const Comment = ({ author, message, children, date, }) => {
     });
     if (!ed)
         return null;
+    ed.setOptions({
+        editable: false,
+    });
     return (jsxRuntime.jsxs(CommentCard, { children: [jsxRuntime.jsxs(AuthorContainer, { children: [jsxRuntime.jsx(Avatar, Object.assign({ avatarType: (_a = author.avatarType) !== null && _a !== void 0 ? _a : "text", style: { flexShrink: 0 } }, { children: author.avatar })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(CommentTitle, { children: [(_b = author.name) !== null && _b !== void 0 ? _b : "User", jsxRuntime.jsx(CommentDate, { children: date })] }), jsxRuntime.jsx(ReadOnly, { children: jsxRuntime.jsx(EditorContainer$1, Object.assign({ editable: false }, { children: jsxRuntime.jsx(react.EditorContent, { editor: ed }) })) })] })] }), jsxRuntime.jsx(Footer$3, { children: children })] }));
 };
 

package/build/stories/chat/_types.d.ts

@@ -4,6 +4,7 @@ type validationStatus = "success" | "warning" | "error";
 export type SuggestedUser = {
     id: number;
     name: string;
+    email: string;
 };
 export interface ChatEditorArgs extends Partial<EditorOptions> {
     placeholderOptions?: Partial<PlaceholderOptions>;
@@ -17,6 +18,9 @@ export interface ChatEditorArgs extends Partial<EditorOptions> {
             italic?: string;
             mention?: string;
         };
+        mention?: {
+            noResults?: string;
+        };
     };
 }
 export interface Author {

package/build/stories/chat/context/chatContext.d.ts

@@ -7,7 +7,7 @@ export type ChatContextType = {
     setEditor: React.Dispatch<React.SetStateAction<Editor | undefined>>;
     mentionableUsers: (props: {
         query: string;
-    }) => Promise<SuggestedUser[]>;
+    }) => SuggestedUser[];
 };
 export declare const ChatContext: React.Context<ChatContextType | null>;
 export declare const ChatContextProvider: ({ onSave, setMentionableUsers, children, }: {
@@ -15,6 +15,6 @@ export declare const ChatContextProvider: ({ onSave, setMentionableUsers, childr
     children: React.ReactNode;
     setMentionableUsers: (props: {
         query: string;
-    }) => Promise<SuggestedUser[]>;
+    }) => SuggestedUser[];
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const useChatContext: () => ChatContextType;

package/build/stories/chat/parts/extensions.d.ts

@@ -3,6 +3,6 @@ import { SuggestedUser } from "../_types";
 export declare const editorExtensions: ({ placeholderOptions, mentionableUsers, }: {
     mentionableUsers: (props: {
         query: string;
-    }) => Promise<SuggestedUser[]>;
+    }) => SuggestedUser[];
     placeholderOptions?: Partial<PlaceholderOptions> | undefined;
 }) => (import("@tiptap/react").Extension<import("@tiptap/extension-typography").TypographyOptions, any> | import("@tiptap/react").Mark<import("@tiptap/extension-link").LinkOptions, any> | import("@tiptap/react").Extension<import("@tiptap/starter-kit").StarterKitOptions, any> | import("@tiptap/react").Extension<PlaceholderOptions, any> | import("@tiptap/react").Extension<import("@tiptap/extension-character-count").CharacterCountOptions, import("@tiptap/extension-character-count").CharacterCountStorage> | import("@tiptap/react").Node<import("@tiptap/extension-mention").MentionOptions, any>)[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "3.1.65",
+  "version": "3.1.67",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -73,6 +73,7 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.5",
     "@rollup/plugin-image": "^3.0.2",
+    "@storybook/addon-a11y": "^7.6.10",
     "@storybook/addon-essentials": "^7.0.9",
     "@storybook/addon-interactions": "^7.0.9",
     "@storybook/addon-links": "^7.0.9",

package/build/stories/chat/parts/editorButton.d.ts

@@ -1,5 +0,0 @@
-import { Editor } from "@tiptap/react";
-export declare const EditorButton: ({ editor, type, }: {
-    editor: Editor;
-    type: "bold" | "italic" | "mention";
-}) => import("react/jsx-runtime").JSX.Element;